/* =========================================================================
   CONTACT — page-scoped styles
   Loaded alongside the shared css/styles.css. Three moments: Let's Talk
   (dark, confident open - the same register as every other page's
   closing CTA, just promoted to be the whole page's opening statement),
   Three Routes (a restrained numbered list, not cards - consistent with
   .exist-questions on About and .agility-fundamentals on Delivery
   Capability, never boxes-with-shadows), Start a Conversation (the
   actual conversion moment: contact details + a short, frictionless
   form). No new visual language introduced - every component below
   reuses the site's existing type scale, rule/divider idiom and button
   style.
   ========================================================================= */

.pg-contact .mark-stop { color: var(--lime); }

/* -------------------------------------------------------------------------
   01 — LET'S TALK
   Not the full-height .hero component (no photography here - this is a
   conversation opener, not a landscape statement) - a shorter, confident
   dark band with the same radial-glow treatment already established for
   photography-free dark openers (see .hero--nomedia on Delivery
   Capability).
   ------------------------------------------------------------------------- */
.contact-hero {
  min-height: clamp(26rem, 56vh, 36rem);
  display: flex; align-items: flex-end;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(198,243,81,0.07), transparent 60%),
    var(--forest-deep);
}
.contact-hero .container { padding-block: clamp(6rem, 12vh, 9rem) clamp(2.6rem, 5vh, 4rem); }
.contact-hero h1 { max-width: 20ch; }
.contact-hero__body { margin-top: clamp(1.2rem, 2.2vw, 1.6rem); max-width: 56ch; color: var(--fg-soft); }

/* -------------------------------------------------------------------------
   02 — THREE ROUTES
   Three columns at desktop (numeral, title, description), each divided
   by a left rule rather than a card boundary - the routes read as one
   considered field, not three separate tiles.
   ------------------------------------------------------------------------- */
.contact-routes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
  padding-top: clamp(2rem, 4vw, 2.8rem);
}
.contact-route { padding-left: clamp(1.2rem, 2vw, 1.6rem); border-left: 1px solid var(--rule); }
.contact-route:first-child { padding-left: 0; border-left: none; }
.contact-route__n { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.1em; color: var(--fg-faint); margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem); }
.contact-route__t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.25; color: var(--fg); }
.contact-route__d { margin-top: 0.6rem; color: var(--fg-soft); font-size: 0.94rem; line-height: 1.55; }

@media (max-width: 760px) {
  .contact-routes { grid-template-columns: 1fr; gap: 1.8rem; }
  .contact-route { padding-left: clamp(1.2rem, 4vw, 1.6rem); border-left: 1px solid var(--rule); }
  .contact-route:first-child { padding-left: clamp(1.2rem, 4vw, 1.6rem); border-left: 1px solid var(--rule); }
}

/* -------------------------------------------------------------------------
   03 — START A CONVERSATION
   Same asymmetric column ratio as .founder-grid on About (0.8fr/1.2fr) -
   a deliberate, sitewide-consistent proportion for "short intro beside
   the substantial thing," here the form instead of a biography.
   ------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: start; }
.contact-intro h2 { margin-top: 0.6rem; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.6rem; }
}

/* Form: bottom-border-only fields, not boxed inputs - keeps the
   editorial, line-driven register the rest of the site already uses
   instead of introducing a generic form-template look. */
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
.contact-form__field { margin-top: clamp(1.4rem, 2.4vw, 1.8rem); display: flex; flex-direction: column; }
.contact-form__row .contact-form__field:first-child { margin-top: 0; }
.contact-form > .contact-form__field:first-of-type { margin-top: 0; }
.contact-form__field label { font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 0.6rem; }
.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--fg);
  background: transparent; border: none; border-bottom: 1px solid var(--rule);
  padding: 0.55rem 0.1rem; border-radius: 0;
  transition: border-color .25s var(--ease);
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none; border-bottom-color: var(--forest);
}
.contact-form__field textarea { resize: vertical; min-height: 6.5rem; font-family: var(--sans); line-height: 1.5; }
.contact-form__submit { margin-top: clamp(1.8rem, 3vw, 2.4rem); }
.contact-form__submit[disabled] { opacity: 0.55; cursor: default; }

/* Honeypot: removed from layout, tab order and the accessibility tree
   (the wrapper also carries aria-hidden). Not display:none, which some
   bots detect and skip. */
.contact-form__hp {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden;
}

.contact-form__note { margin-top: 0.9rem; font-size: 0.86rem; color: var(--fg-soft); min-height: 1.2em; }
/* Status colours reuse the existing palette - forest for success, the
   established deep tone for errors. No new colour is introduced. */
.contact-form__note.is-success { color: var(--forest); font-weight: 500; }
.contact-form__note.is-error { color: #8A2B20; font-weight: 500; }

.contact-form__privacy { margin-top: 1.1rem; font-size: 0.78rem; line-height: 1.5; color: var(--fg-faint); max-width: 46ch; }
/* Plain inline anchor, not the .link component - that is inline-flex at a
   fixed 0.92rem and would break the flow of this small sentence. */
.contact-form__privacy a { color: var(--fg-soft); border-bottom: 1px solid var(--rule); transition: border-color .25s var(--ease), color .25s var(--ease); }
.contact-form__privacy a:hover { color: var(--forest); border-bottom-color: var(--forest); }
.contact-form__field input[aria-invalid="true"],
.contact-form__field textarea[aria-invalid="true"] { border-bottom-color: #8A2B20; }

@media (max-width: 560px) {
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-form__row .contact-form__field:not(:first-child) { margin-top: clamp(1.4rem, 2.4vw, 1.8rem); }
}

/* -------------------------------------------------------------------------
   LEGAL / PRIVACY PAGE
   Single-column reading measure using the existing type scale - no new
   typographic system. Loaded here because privacy.html shares this
   stylesheet with the Contact page (same interior dark hero).
   ------------------------------------------------------------------------- */
.legal { max-width: 72ch; }
.legal__meta { font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.legal__intro { font-size: 1.05rem; line-height: 1.7; color: var(--fg-soft); }
.legal__h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.25; color: var(--fg); margin-top: clamp(2.4rem, 4vw, 3.2rem); margin-bottom: 0.8rem; }
.legal p { color: var(--fg-soft); line-height: 1.7; margin-bottom: 1rem; }
.legal p:last-child { margin-bottom: 0; }
.legal__list { margin: 0 0 1rem; padding-left: 1.1rem; list-style: disc; color: var(--fg-soft); line-height: 1.7; }
.legal__list li { margin-bottom: 0.35rem; }
.legal strong { color: var(--fg); font-weight: 600; }
.legal a { color: var(--fg); border-bottom: 1px solid var(--rule); transition: border-color .25s var(--ease), color .25s var(--ease); }
.legal a:hover { color: var(--forest); border-bottom-color: var(--forest); }

/* =========================================================================
   LARGE-DESKTOP ART DIRECTION (Contact) — ≥1500px only
   ========================================================================= */
@media (min-width: 1500px) {
  /* .contact-hero h1 (.display) and .contact-hero__body (.lead) previously
     carried their own, materially smaller growth curves here, which
     suppressed the shared large-desktop hero-tier growth in styles.css
     (a more specific selector overriding a less specific one) - Contact's
     hero read as undersized next to every other page's hero by 1920px.
     Removing the overrides lets the shared .display/.lead curves apply,
     matching the hero scale used sitewide. */
  .contact-hero__body { max-width: 62ch; }
  .contact-route__t { font-size: clamp(1.3rem, calc(1.3rem + 0.006 * (100vw - 1500px)), 1.55rem); }
  .contact-route__d { font-size: clamp(0.98rem, calc(0.98rem + 0.004 * (100vw - 1500px)), 1.08rem); }
  .contact-grid { max-width: 84rem; }
}