/* Contact page: hero, the form with its inline subject chooser, the details panel, partner band. */

/* ---------- Hero ---------- */
.contact-hero { position: relative; min-height: 66svh; display: grid; align-items: end; color: #fff; isolation: isolate; }
.contact-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #14251c; }
.contact-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.contact-hero-scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6,18,12,.86) 0%, rgba(6,18,12,.42) 42%, rgba(6,18,12,.05) 72%, rgba(6,18,12,0) 88%);
}
.contact-hero-inner { padding: calc(var(--header-h) + 6vh) 0 clamp(36px, 6vh, 64px); display: grid; gap: 22px; }
.contact-hero .eyebrow { color: var(--sprout); }
.contact-hero h1 { font-size: var(--t-88); max-width: 17ch; text-shadow: 0 2px 30px rgba(6,18,12,.35); }
.contact-hero h1 em { color: var(--sprout); }
.contact-hero .lede { color: rgba(255,255,255,.94); max-width: 34em; text-shadow: 0 1px 18px rgba(6,18,12,.5); }
@media (max-width: 640px) { .contact-hero h1 { font-size: clamp(38px, 11vw, 56px); } }

/* ---------- The enquiry type, set as the first line of the message ----------
   Four tiles with pictograms in rings became one sentence you complete. The chosen words carry a
   single rule that slides between them, and the line under the sentence says what that choice
   covers. The subject field stays visible and editable, and keeps itself in step. */
.ct-ask { margin-top: clamp(30px, 4vw, 44px); padding-top: clamp(26px, 3vw, 36px); border-top: 1.5px solid var(--line-strong); }
.ct-ask-line { font-size: var(--t-36); line-height: 1.24; color: var(--forest); }
.ct-choices { position: relative; display: inline-flex; flex-wrap: wrap; column-gap: .42em; margin-left: .3em; vertical-align: baseline; }
.ct-choice { font-family: var(--display); font-weight: 500; font-style: italic; font-size: 1em; line-height: 1.24; color: var(--moss); opacity: .48; padding: 0; text-align: left; transition: opacity .35s var(--ease); }
.ct-choice:hover { opacity: .8; }
.ct-choice.is-on { opacity: 1; }
.ct-choice:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
/* One element, 1px wide, stretched to the width of the active option: it travels rather than
   redrawing, and it follows the options when they wrap onto a second line. */
.ct-rule { position: absolute; left: 0; top: 0; width: 1px; height: 1.5px; background: var(--moss); transform-origin: 0 0; opacity: 0; pointer-events: none; }
.ct-choices.is-ready .ct-rule { transition: transform .55s var(--ease), opacity .3s var(--ease); }
.ct-ask-note { margin-top: 14px; font-size: var(--t-16); color: var(--stone); transition: opacity .3s var(--ease); min-height: 1.5em; }
.ct-ask-note.is-fading { opacity: 0; }
@media (max-width: 560px) { .ct-ask-line { font-size: var(--t-28); } }

/* ---------- Form + details ---------- */
.contact-main { padding: calc(var(--sect) * .7) 0 var(--sect); scroll-margin-top: var(--header-h); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-form-col h2 { color: var(--forest); max-width: 14ch; }
.contact-form-col .lede { margin-top: 14px; }
.contact-form { margin-top: clamp(26px, 3vw, 36px); display: grid; gap: 20px; }
.contact-form textarea.input { height: auto; padding: 14px 16px; resize: vertical; }
.check-field { display: flex; align-items: flex-start; gap: 12px; font-size: var(--t-16); color: var(--stone); }
.check-field input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--leaf); }
/* Honeypot: kept in the layout and in the tab order's blind spot, not display:none, so bots that
   only skip hidden fields still fall for it. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-form button[type="submit"] { justify-self: start; margin-top: 4px; }
[data-form-status] { margin: 0; font-size: var(--t-14); color: var(--moss); min-height: 1.4em; }
[data-form-status][data-state="error"] { color: #b3372c; }

.contact-panel { background: var(--mist); border-radius: var(--r-20); padding: 28px 28px 32px; display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.panel-photo { margin: 0; border-radius: var(--r-12); overflow: hidden; aspect-ratio: 4 / 3; }
.panel-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-panel h3 { color: var(--forest); font-size: var(--t-28); }
.panel-rows { list-style: none; display: grid; }
.panel-rows li { padding: 13px 0; font-size: var(--t-16); line-height: 1.45; border-bottom: 1px dotted var(--line-strong); }
.panel-rows li:first-child { padding-top: 0; }
.panel-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.panel-rows a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.panel-office { margin: 0; font-size: var(--t-16); color: var(--ink); }
.panel-office b { color: var(--forest); }
.panel-note { margin: 0; color: var(--stone); font-size: var(--t-14); line-height: 1.6; }
.panel-social { list-style: none; display: flex; gap: 16px; font-size: var(--t-14); }
.panel-social a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-panel { order: -1; } }

/* Photo hero: keep the header legible over bright sky, same rule as About */
.page-contact [data-hero]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 240px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(6,18,12,.55), transparent); }