/* Scoped editorial layout preserves native contact fields and email drafts. */
#contact.contact-section {
  --contact-copy-size: 14px;
  background: var(--pale-blue);
  color: var(--ink);
  padding-block: 64px;
  border-block-start: 1px solid var(--line);
}

#contact .contact-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

#contact .contact-intro { padding-block: 8px; }

#contact .contact-intro .eyebrow {
  color: var(--blue);
  font-size: var(--contact-copy-size);
  font-weight: 500;
  letter-spacing: 0;
  margin-block-end: 20px;
}

#contact .contact-intro h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

#contact .contact-intro > p:not(.eyebrow) {
  margin-block-start: 18px;
  max-width: 400px;
  font-size: var(--contact-copy-size);
  line-height: 1.85;
  color: var(--muted);
}

#contact .contact-links { margin-block-start: 36px; gap: 0; max-width: 400px; }

#contact .contact-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 16px;
  border-block-end: 1px solid var(--line);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  width: 100%;
  transition: color 180ms ease, transform 180ms ease;
}

#contact .contact-links svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--blue);
}

#contact .contact-links .contact-arrow {
  margin-inline-start: auto;
  width: 14px;
  height: 14px;
}

#contact .contact-links a:hover { color: var(--blue); transform: translateY(-5px); }

#contact .contact-links span {
  margin-block-start: 16px;
  color: var(--muted);
  font-size: var(--contact-copy-size);
  line-height: 1.7;
}

#contact .contact-form-wrap {
  max-width: none;
  background: #12294a;
  border: 1px solid #375f96;
  border-radius: 4px;
  padding: 32px;
  box-shadow: none;
}

#contact .contact-form-wrap > h3 {
  color: #f1f6fc;
  font-size: 19px !important;
  font-weight: 500;
  line-height: 1.5;
}

#contact .contact-form-wrap > p {
  color: #94add1;
  font-size: 12px !important;
  margin-block-start: 10px !important;
}

#contact .contact-form-wrap label {
  color: #cbdbf1;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  gap: 9px;
  margin-block-start: 20px;
}

#contact .contact-form-wrap :is(input, select, textarea) {
  background: #0e203a;
  color: #f1f6fc;
  border: 1px solid #355b90;
  border-radius: 3px;
  padding: 12px;
  font-size: var(--contact-copy-size);
  line-height: 1.6;
  min-height: 44px;
}

#contact .contact-form-wrap :is(input, textarea)::placeholder { color: #7492bd; }

#contact .contact-form-wrap textarea { resize: vertical; }

#contact .form-row { gap: 12px; }

#contact .contact-form-wrap form > .button {
  font-size: var(--contact-copy-size) !important;
  width: 100%;
  min-height: 44px;
  margin-block-start: 24px;
}

#contact .form-status { color: #c4deff; font-size: 12px; }

#contact .contact-form-wrap pre {
  background: #0e203a;
  color: #e4edf9;
  border: 0;
}

#contact #email-draft > p { color: #94add1; font-size: 13px; }

#contact .copy-button { color: #8ebeff; }

@media (max-width: 1000px) {
  #contact .contact-grid { gap: 32px; }
  #contact .contact-intro h2 { font-size: 28px; }
}

@media (max-width: 760px) {
  #contact.contact-section { padding-block: 44px; }
  #contact .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #contact .contact-intro h2 { font-size: 26px; }
  #contact .contact-intro > p:not(.eyebrow),
  #contact .contact-links { max-width: none; }
  #contact .contact-links { margin-block-start: 24px; }
  #contact .contact-links a { font-size: 17px; }
  #contact .contact-form-wrap { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #contact .contact-links a { transition: none; }
  #contact .contact-links a:hover { transform: none; }
}