/* contact.css — /contact page layout. Tokens and primitives come from
   design-system/tokens.css + primitives.css; nothing here defines a color
   that isn't already in the token layer. The heavy hero atmosphere is not
   replicated — one faint warm wash keeps the family resemblance. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--font); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(221,172,58,.26); }
a { color: var(--gold-text); }
/* Buttons are anchors too — a bare `a:hover` outranks `.an-btn--primary`'s own
   colour and repaints the label gold on a gold fill. */
a:not(.an-btn):not(.nav-cta):not(.mnav-cta):hover { color: var(--gold-100); }
:root[data-theme="light"] a:not(.an-btn):not(.nav-cta):not(.mnav-cta):hover { color: var(--gold-600); }
.an-btn--primary, .an-btn--primary:hover { color: var(--ink); }
.an-btn--secondary:hover, .an-btn--tertiary:hover { color: var(--gold-text); }

.page { position: relative; min-height: 100vh; display: flex; flex-direction: column; isolation: isolate; }
.page-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 58% at 50% -14%, rgba(221,172,58,.07), transparent 62%); }
:root[data-theme="light"] .page-glow { background: radial-gradient(120% 58% at 50% -14%, rgba(221,172,58,.13), transparent 62%); }
.shell { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ── nav + footer: the unified chrome, owned by site/site-chrome.jsx (batch 6).
   The /contact fork — no-CTA nav, legal-only footer, its own theme toggle — is
   gone; this page renders the same chrome as every other route. ── */

/* ── page head ── */
.contact-main { flex: 1; padding: clamp(30px, 5vh, 60px) 0 clamp(56px, 9vh, 96px); }
.contact-head { max-width: 620px; }
.contact-title { margin: 14px 0 0; font-weight: 700; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.07; letter-spacing: -.018em; color: var(--heading); text-wrap: balance; }
.contact-sub { margin: 18px 0 0; font-weight: 400; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62; color: var(--body); max-width: 50ch; }

/* min-width:0 down the whole chain. A grid ITEM defaults to min-width:auto —
   its max-content width — so the column track shrinks and the card inside it
   does not, and the page scrolls sideways below ~330px. minmax(0,…) fixes the
   track; these fix the items sitting in it. */
.form-card, .rail, .form-rows, .row-2, .rail-step, .an-input, .an-textarea, .an-select { min-width: 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .72fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(30px, 4.5vh, 46px); }

/* ── the form ── */
.form-card { padding: clamp(24px, 3vw, 38px); border-radius: var(--r-xl); background: var(--surface-2); border: 1px solid var(--hairline); box-shadow: var(--shadow-2); }
.form-rows { display: grid; gap: 18px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.optional { font-weight: 400; color: var(--tertiary); margin-left: 5px; }

.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.submit-note { font-size: 13px; line-height: 1.5; color: var(--tertiary); max-width: 34ch; }

/* waiting state. The spinner is INK on the gold fill — the previous version
   shipped gold-on-gold, which was invisible and made the form look dead. */
/* Busy is NOT disabled. The design system dims both :disabled and
   [aria-disabled] to 45%, which buries the ink spinner (2.5:1 dark, 2.0:1
   light) and makes the control read as dead — the exact failure the previous
   version shipped. The busy state stays at full strength; re-entry is guarded
   in the submit handler instead. */
.an-btn.is-busy, .an-btn.is-busy[aria-disabled="true"] { opacity: 1; pointer-events: auto; cursor: progress; transform: none; box-shadow: var(--shadow-gold); }
.an-btn.is-busy:hover { background: var(--gold); transform: none; box-shadow: var(--shadow-gold); }

.spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(65,36,2,.30); border-top-color: var(--ink); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.wait { margin-top: 20px; }
.wait-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.wait-msg { font-weight: 700; font-size: 14px; line-height: 1.45; color: var(--heading); }
.wait-clock { font-size: 12.5px; color: var(--tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress { height: 3px; margin-top: 11px; border-radius: 2px; background: var(--control-off); overflow: hidden; }
.progress-fill { display: block; height: 100%; border-radius: 2px; background: var(--gold); transition: width .28s linear; }
.progress--over .progress-fill { background: var(--warning); }

/* ── result panels ── */
.result { display: flex; gap: 16px; align-items: flex-start; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-lg); border: 1px solid; }
.result--success { background: var(--success-bg); border-color: var(--success-border); }
.result--error { background: var(--danger-bg); border-color: var(--danger-border); }
.result-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; border: 1px solid currentColor; }
.result--success .result-icon { color: var(--success); }
.result--error .result-icon { color: var(--danger); }
.result-title { margin: 2px 0 8px; font-weight: 700; font-size: 18px; letter-spacing: -.008em; color: var(--heading); }
.result-body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--body); max-width: 52ch; }
.result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* placeholder that must not read as final (per the brief's §9 rule) */
.pending { display: flex; gap: 11px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--warning-border); border-radius: var(--r-md); background: var(--warning-bg); }
.pending-tag { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--warning-text, var(--warning)); padding-top: 2px; }
.pending-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); }

/* ── right rail: what happens next. No links — this page has one action. ── */
.rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 26px; }
.rail-title { margin: 0 0 16px; font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.rail-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.rail-step { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.rail-num { font-weight: 300; font-size: 21px; line-height: 1.1; color: var(--gold-text); opacity: .6; font-variant-numeric: tabular-nums; }
.rail-step-title { margin: 0 0 5px; font-weight: 700; font-size: 14.5px; color: var(--heading); }
.rail-step-body { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--body); }
.rail-note { padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 13.5px; line-height: 1.58; color: var(--tertiary); }

/* ── design-review bar (not page chrome — deliberately neutral) ── */
.review { position: fixed; left: 16px; bottom: 16px; z-index: 90; font-family: var(--font); background: var(--bg-elev); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; max-width: min(340px, calc(100vw - 32px)); }
.review-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; background: none; border: 0; width: 100%; white-space: nowrap; color: var(--heading); font-family: inherit; font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.review-bar:focus-visible { outline: none; box-shadow: var(--ring); }
.review-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tertiary); }
.review-chevron { margin-left: auto; color: var(--tertiary); transition: transform .2s var(--ease); }
.review.is-open .review-chevron { transform: rotate(180deg); }
.review-body { padding: 4px 12px 14px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 14px; }
.review-group-label { margin: 10px 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--tertiary); }
.review-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.review-opt { font-family: inherit; font-weight: 700; font-size: 12px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--hairline-strong); background: var(--surface-1); color: var(--body); cursor: pointer; transition: color var(--dur) ease, border-color var(--dur) ease, background var(--dur) ease; }
.review-opt:hover { color: var(--heading); border-color: var(--field-border-hover); }
.review-opt.is-on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.review-opt:focus-visible { outline: none; box-shadow: var(--ring); }
.review-readout { font-size: 12px; line-height: 1.5; color: var(--tertiary); }
.review-readout strong { color: var(--body); font-weight: 700; }

/* ── responsive ── */
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
  .rail { position: static; }
}
@media (max-width: 640px) {
  .row-2 { grid-template-columns: 1fr; }
  .submit-row .an-btn { width: 100%; }
  .submit-note { max-width: none; }
}