/* ============================================================================
   Contact (light page). No mockup: built from the 09-28 audit handoff, section
   B, with Robb's 09-29 answers. #E7E7E4 end to end, text masthead like Services.

   Form styles: css/forms.css.
   ========================================================================= */

:where(.page-contact) p + p { margin-top: 1.15em; }

/* ---- Masthead (text only) ---------------------------------------------------- */
.ct-masthead { padding: clamp(120px, 14vw, 172px) 0 clamp(40px, 5vw, 64px); }
.ct-masthead .display { max-width: 16ch; margin-top: 18px; }
.ct-masthead .lede { max-width: 58ch; margin-top: 26px; color: var(--ink-2); }

/* ---- Two columns: what happens next | the form ------------------------------- */
.ct-body { padding-bottom: var(--sec); }
.ct-grid { display: grid; grid-template-columns: 1fr; gap: clamp(48px, 6vw, 96px); }
@media (min-width: 900px) {
  .ct-grid {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start;
    grid-template-areas: "next form" "more form"; grid-template-rows: auto 1fr;
  }
  .ct-aside { grid-area: next; }
  .ct-formcol { grid-area: form; }
  .ct-more { grid-area: more; }
}

.ct-next { margin-top: 18px; }
.ct-next li {
  display: grid; grid-template-columns: 2.6em 1fr; gap: 12px;
  padding-block: 16px; border-top: 1px solid var(--hairline);
}
.ct-next li:last-child { border-bottom: 1px solid var(--hairline); }
.ct-next__num {
  font-family: var(--display); font-weight: 300; font-size: var(--size-h4); line-height: 1.2;
  color: var(--quiet);
}
.ct-next p { color: var(--ink); }
.ct-trade { color: var(--ink-2); }
.ct-trade a { color: var(--voice-link); text-decoration: underline; text-underline-offset: .2em; }
.ct-studio { margin-top: clamp(28px, 3vw, 40px); }
.ct-studio p:not(.eyebrow) { margin-top: 10px; color: var(--ink-2); }
.ct-studio address { margin-top: 10px; font-style: normal; color: var(--ink-2); }
.ct-studio a { color: var(--voice-link); }

/* The form, its states and the review-only switcher live in css/forms.css (shared with
   Collaborate, 2026-10-02). */

/* ---- Close: the light ground fades into navy (Robb, 2026-11-06), as on the other pages, with a client's
   words in a card over the fade (the project pages' .drift-note--close). The drift holds only the card and
   the close, so the form above can change height without moving the fade. -------------------------------- */
.ct-body { padding-bottom: clamp(24px, 3vw, 48px); }