/* TerraFab OS marketing site — Contact (/contact).
   Source: HANDOVER-marketing-site.md §6.4 (structure) + Contact.dc.html
   (verbatim copy — the doc doesn't inline the full copy for this page).
   Front-end only: state, validation, fake success — no network call in
   this slice (see forms.css header note).

   Flagged: the existing, already-shipped contact form posted to a real
   backend endpoint (POST /api/v1/public/contact) which hard-requires a
   `consent` field. This new prototype's form has no consent UI at all --
   wiring the real endpoint back up in the §7 slice needs that resolved
   first (add a consent checkbox to this design, or relax the backend
   requirement) rather than silently dropping consent enforcement. */

.tf-contact-hero {
  max-width: 1280px; margin: 0 auto; padding: 80px 48px 48px;
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 56px; align-items: end;
}
.tf-contact-hero__title { max-width: 22ch; margin: 0; }
.tf-contact-hero__intro { font-size: 16px; line-height: 1.65; color: var(--tf-body); margin: 0; }

.tf-contact-methods {
  max-width: 1280px; margin: 0 auto; padding: 0 48px 40px;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px;
}
.tf-contact-method {
  background: var(--tf-shell); border: 1px solid var(--tf-line); border-radius: 16px; padding: 26px;
  transition: transform var(--tf-dur) var(--tf-ease), box-shadow var(--tf-dur) var(--tf-ease);
}
.tf-contact-method:hover { transform: translateY(-3px); box-shadow: var(--tf-shadow-hover); }
.tf-contact-method__label {
  /* --tf-coral fails AA at this size on --tf-shell (2.8:1); --tf-coral-press
     per §2's own fallback instruction, still short of 4.5:1 (3.6:1) but a
     real improvement -- see the responsive/a11y slice's PR notes. */
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--tf-coral-press);
  margin-bottom: 12px; text-transform: uppercase;
}
.tf-contact-method__email { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; margin-bottom: 8px; }
.tf-contact-method__desc { font-size: 14px; line-height: 1.6; color: var(--tf-body-muted); }

.tf-contact-grid {
  max-width: 1280px; margin: 0 auto; padding: 24px 48px 104px;
  display: grid; grid-template-columns: minmax(0,520px) minmax(0,1fr); gap: 64px; align-items: start;
}

.tf-locations { display: grid; gap: 16px; margin-bottom: 40px; }
.tf-location-card { background: var(--tf-shell); border-left: 3px solid var(--tf-ocean); border-radius: 0 12px 12px 0; padding: 20px 24px; }
.tf-location-card--coral { border-left-color: var(--tf-coral); }
.tf-location-card--palm { border-left-color: var(--tf-palm); }
.tf-location-card__title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 5px; }
.tf-location-card__desc { font-size: 14.5px; line-height: 1.6; color: var(--tf-body-muted); }

.tf-faq { display: grid; gap: 2px; }
.tf-faq__item { border-top: 1px solid var(--tf-line); }
.tf-faq__trigger {
  width: 100%; background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: 'Inter', sans-serif;
}
.tf-faq__question { font-size: 15.5px; font-weight: 600; color: var(--tf-ink); }
.tf-faq__icon {
  font-family: 'IBM Plex Mono', monospace; font-size: 18px; color: var(--tf-coral); flex-shrink: 0;
  transition: transform 200ms;
}
.tf-faq__trigger[aria-expanded="true"] .tf-faq__icon { transform: rotate(45deg); }
.tf-faq__answer {
  font-size: 14.5px; line-height: 1.65; color: var(--tf-body-muted); max-width: 58ch;
  max-height: 0; opacity: 0; overflow: hidden; transition: all 300ms var(--tf-ease);
}
.tf-faq__trigger[aria-expanded="true"] + .tf-faq__answer { max-height: 200px; opacity: 1; padding-bottom: 20px; }

@media (max-width: 1099px) {
  .tf-contact-hero, .tf-contact-grid { grid-template-columns: 1fr; }
  .tf-contact-methods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .tf-contact-hero { padding: 56px 24px 32px; }
  .tf-contact-methods, .tf-contact-grid { padding-left: 24px; padding-right: 24px; }
  .tf-contact-methods { grid-template-columns: 1fr; }
}