/* =====================================================================
   The Tango Yankee Project — brand stylesheet
   Concept: "The Record & The Person"
   - Spectral (warm literary serif) = the human voice
   - Public Sans (the U.S. gov't public typeface) = the voice of the record
   - Instrument steel + warm brass on archival off-white
   ===================================================================== */

:root {
  /* ---- Color (OKLCH) ---------------------------------------------- */
  --paper:      oklch(0.986 0.003 235);   /* archival off-white, faint cool */
  --paper-2:    oklch(0.968 0.004 235);   /* raised surface */
  --paper-3:    oklch(0.945 0.005 235);   /* inset / hairline fills */
  --ink:        oklch(0.245 0.021 245);   /* body text, deep steel-black */
  --ink-soft:   oklch(0.415 0.022 245);   /* secondary text on paper (>=4.5:1) */
  --danger:     oklch(0.5 0.17 28);       /* error text on paper (>=4.5:1) — never the only signal, always a sentence */

  --steel:      oklch(0.312 0.043 244);   /* deep instrument band */
  --steel-2:    oklch(0.372 0.049 244);   /* lighter within steel gradients */
  --steel-3:    oklch(0.255 0.038 246);   /* deepest, footer */

  --brass:      oklch(0.735 0.115 74);    /* warm brass — the emotional accent */
  --brass-hi:   oklch(0.805 0.108 80);    /* brass highlight / on-steel text */
  --brass-deep: oklch(0.560 0.098 62);    /* brass for text/borders on paper */

  /* Parchment is a MATERIAL, not a surface colour. It exists only as the
     stock the crest is mounted on. The logo's olive sits at the same
     lightness as --steel (0.34 vs 0.31), so the two darks cancel rather
     than stack: the mark must never touch steel bare. See .plate. */
  --parchment:   oklch(0.925 0.028 84);   /* the logo's own field colour */
  --parchment-2: oklch(0.880 0.032 82);   /* plate edge / bevel */

  --line:       oklch(0.895 0.006 240);   /* hairline on paper */
  --line-2:     oklch(0.845 0.008 240);   /* stronger hairline */

  /* on-steel text roles */
  --on-steel:       oklch(0.965 0.006 240);
  --on-steel-soft:  oklch(0.815 0.014 242);

  /* ---- Type ------------------------------------------------------- */
  --serif: "Spectral", Georgia, "Iowan Old Style", serif;
  --sans:  "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1.05rem, 1.00rem + 0.24vw, 1.19rem);
  --step-1:  clamp(1.24rem, 1.15rem + 0.44vw, 1.55rem);
  --step-2:  clamp(1.48rem, 1.32rem + 0.80vw, 2.05rem);
  --step-3:  clamp(1.80rem, 1.52rem + 1.35vw, 2.85rem);
  --step-4:  clamp(2.15rem, 1.68rem + 2.30vw, 3.90rem);
  --step-5:  clamp(2.55rem, 1.85rem + 3.40vw, 5.10rem);

  /* ---- Space (fluid) ---------------------------------------------- */
  --sp-1: clamp(0.5rem, 0.45rem + 0.25vw, 0.7rem);
  --sp-2: clamp(0.85rem, 0.75rem + 0.5vw, 1.2rem);
  --sp-3: clamp(1.3rem, 1.1rem + 1vw, 2rem);
  --sp-4: clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --sp-5: clamp(3rem, 2.3rem + 3.5vw, 5.5rem);
  --sp-6: clamp(4.5rem, 3.2rem + 6vw, 9rem);

  --measure: 62ch;
  --edge: clamp(1.15rem, 0.6rem + 2.6vw, 2.75rem);
  --maxw: 76rem;
  --radius: 14px;
  --radius-sm: 9px;

  /* ---- Elevation -------------------------------------------------- */
  --shadow-1: 0 1px 2px oklch(0.3 0.04 244 / 0.06), 0 2px 8px oklch(0.3 0.04 244 / 0.05);
  --shadow-2: 0 4px 14px oklch(0.3 0.04 244 / 0.10), 0 14px 40px oklch(0.3 0.04 244 / 0.10);
  --shadow-photo: 0 2px 6px oklch(0.2 0.03 244 / 0.14), 0 22px 48px oklch(0.2 0.03 244 / 0.22);

  /* ---- Motion ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* out-expo-ish */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Z scale ---------------------------------------------------- */
  --z-header: 50;
  --z-menu: 60;
  --z-toast: 80;
}

/* =====================================================================
   Reset / base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: oklch(0.735 0.115 74 / 0.28); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}
p { text-wrap: pretty; }

/* =====================================================================
   Layout helpers
   ===================================================================== */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
}
.section { padding-block: var(--sp-6); }
.section--tight { padding-block: var(--sp-5); }
.stack > * + * { margin-top: var(--sp-3); }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }
.measure { max-width: var(--measure); }
.center { text-align: center; margin-inline: auto; }

.kicker {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brass-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.kicker::before {
  content: "";
  width: 1.9em; height: 2px;
  background: var(--brass);
  border-radius: 2px;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  --_bg: var(--brass);
  --_fg: oklch(0.24 0.03 60);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 0.92em 1.5em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--_bg);
  color: var(--_fg);
  text-decoration: none;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
              background-color 0.25s ease, color 0.25s ease;
  box-shadow: 0 1px 0 oklch(0.9 0.09 85 / 0.7) inset, var(--shadow-1);
  will-change: transform;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 oklch(0.92 0.09 85 / 0.8) inset, var(--shadow-2);
}
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform 0.35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--ink);
  border-color: var(--line-2);
  box-shadow: none;
}
.btn--ghost:hover {
  border-color: var(--ink);
  box-shadow: none;
  background: oklch(0.5 0.02 245 / 0.04);
}
.btn--on-steel.btn--ghost {
  --_fg: var(--on-steel);
  border-color: oklch(0.9 0.02 240 / 0.28);
}
.btn--on-steel.btn--ghost:hover {
  border-color: oklch(0.95 0.02 240 / 0.6);
  background: oklch(0.95 0.02 240 / 0.08);
}
.btn--lg { font-size: var(--step-1); padding: 1.05em 1.9em; }

/* Text link with brass underline draw */
.tlink {
  text-decoration: none;
  font-weight: 600;
  color: var(--brass-deep);
  background-image: linear-gradient(var(--brass), var(--brass));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease-out);
  padding-bottom: 2px;
}
.tlink:hover { background-size: 100% 2px; }

/* =====================================================================
   Header
   ===================================================================== */
/* The header is the ONLY place the brand is stated, and it holds full size
   at every scroll position — the crest never shrinks. --hdr drives both the
   bar height and the mobile menu's offset; they must never disagree. */
.site-header {
  --hdr: clamp(92px, 4vw + 68px, 118px);
  --mark-h: clamp(52px, 2.6vw + 38px, 68px);
  --word: clamp(1.35rem, 0.5vw + 1.22rem, 1.7rem);
  --word-sub: 0.68rem;

  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: oklch(0.986 0.003 235 / 0.82);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
/* Scrolling settles the bar onto the page — it does not resize it. */
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  background: oklch(0.986 0.003 235 / 0.94);
}
.site-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--hdr);
  padding-block: 0.6rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}
/* On paper the mark stands on its own — light ground, dark mark, real
   separation. Only steel needs the plate.
   Below ~60px the laurel collapses into a smudge, so the compact/scrolled
   sizes use the shield alone (mark.png); the full crest lives at the
   header's opening size and on the plates. */
.brand__mark { flex: none; height: var(--mark-h, 38px); width: auto; }
.brand .plate--chip { flex: none; }
.brand__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--word, 1.16rem);
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand__name small {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--word-sub, 0.6rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-top: 3px;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 1.6vw, 2.1rem);
}
.nav a:not(.btn) {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink-soft);
  position: relative;
  padding-block: 4px;
  transition: color 0.2s ease;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 0.4rem + 1.6vw, 2.1rem); }

.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav__links {
    position: fixed;
    inset: var(--hdr) 0 auto 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--edge) var(--sp-3);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
  }
  .nav__links[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__links a:not(.btn) { padding-block: 0.85rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__links .btn { margin-top: var(--sp-2); }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--line-2);
    border-radius: 10px; background: var(--paper);
  }
  .nav-toggle svg { width: 22px; height: 22px; }
}

/* =====================================================================
   The mounted plate
   The crest is an object, not a graphic. On a steel ground it is always
   bolted down on its own parchment — brass-ruled, screwed at the corners,
   casting a real shadow. This is what lets a warm olive-and-brass mark
   live on a cold steel field: the two never touch.
   ===================================================================== */
.plate {
  position: relative;
  display: inline-flex;
  padding: clamp(10px, 1.4vw, 15px);
  background: var(--parchment);
  border-radius: 3px;
  box-shadow:
    0 1px 2px oklch(0.16 0.03 245 / 0.32),
    0 14px 34px oklch(0.14 0.03 245 / 0.40),
    inset 0 0 0 1px var(--parchment-2);
}
/* the engraved brass rule, inset from the plate edge */
.plate::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--brass-deep);
  border-radius: 1px;
  pointer-events: none;
}
/* four brass screws, one per corner */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --screw: radial-gradient(circle closest-side,
            oklch(0.88 0.07 86), oklch(0.58 0.08 70) 76%, oklch(0.44 0.06 66));
  background-image: var(--screw), var(--screw), var(--screw), var(--screw);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position:
    9px 9px, calc(100% - 9px) 9px,
    9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px);
}
.plate img { display: block; height: auto; }

/* hero insignia — big enough for the laurel to survive */
.plate--crest img { width: clamp(66px, 5vw + 2.4rem, 86px); }
/* the closing plaque */
.plate--lockup { padding: clamp(12px, 1.8vw, 20px); }
.plate--lockup img { width: min(300px, 66vw); }
/* footer / rail chip — too small for screws to read as anything but noise */
.plate--chip { padding: 6px; border-radius: 2px; }
.plate--chip::before { inset: 3px; }
.plate--chip::after { display: none; }
.plate--chip img { height: 32px; width: auto; }

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 88% 10%, var(--steel-2), transparent 60%),
    linear-gradient(168deg, var(--steel) 0%, var(--steel-3) 100%);
  color: var(--on-steel);
  overflow: hidden;
  isolation: isolate;
}
.hero__grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.5; mix-blend-mode: soft-light; pointer-events: none; }
.hero__in {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(1.5rem, 0.5rem + 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.2rem, 2rem + 6vw, 6.5rem);
}
/* Grid children must be allowed to shrink below content min-content,
   or a long heading line overflows and gets clipped by overflow-x:hidden. */
.hero__in > *, .holding > *, .recover__grid > *,
.note__grid > *, .steps > *, .intake > * { min-width: 0; }
.hero h1 { overflow-wrap: break-word; }
/* The brand is stated once, in the header. The hero opens straight on the
   headline — no second lockup, no eyebrow. */
.hero h1 {
  color: var(--on-steel);
  font-size: var(--step-5);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.018em;
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--brass-hi);
}

/* Cycling relation ("great-grandfather" … "brother").
   The word owns its own line so it can grow and shrink without shifting a
   single glyph of the rest of the heading. Static "grandfather" is the
   no-JS and reduced-motion state; app.js takes over only if it may animate. */
.cycle {
  display: block;
  white-space: nowrap;
}
.cycle__caret {
  display: none;
  width: 0.055em;
  height: 0.78em;
  margin-left: 0.06em;
  background: var(--brass);
  border-radius: 1px;
  vertical-align: baseline;
  translate: 0 0.04em;
}
.js .cycle--on .cycle__caret { display: inline-block; animation: caret 1.05s steps(1, end) infinite; }
@keyframes caret { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
/* Long words at phone sizes: shed a step rather than overflow the screen. */
@media (max-width: 520px) { .cycle { font-size: 0.88em; } }
@media (prefers-reduced-motion: reduce) {
  .cycle__caret { display: none !important; animation: none !important; }
}

.hero__sub {
  margin-top: var(--sp-3);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-steel-soft);
  max-width: 40ch;
}
.hero__cta { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.hero__note {
  margin-top: var(--sp-3);
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: var(--step--1);
  color: var(--on-steel-soft);
  max-width: 42ch;
  line-height: 1.5;
}
.hero__note svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brass-hi); }

/* dossier photo frame */
.dossier {
  position: relative;
  justify-self: center;
  width: min(100%, 400px);
  rotate: 1.4deg;
}
.dossier__photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
  background: var(--steel-3);
  aspect-ratio: 4 / 5;
}
.dossier__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.32) saturate(0.82) contrast(1.03) brightness(1.02);
}
.dossier__photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, oklch(0.28 0.05 250 / 0.55)),
    linear-gradient(0deg, oklch(0.32 0.05 244 / 0.22), oklch(0.75 0.11 74 / 0.12));
  mix-blend-mode: multiply;
}
.dossier__frame {
  position: absolute; inset: 0;
  border: 1px solid oklch(0.85 0.06 80 / 0.35);
  border-radius: var(--radius);
  pointer-events: none;
}
.dossier__tag {
  position: absolute;
  right: -14px; bottom: 26px;
  rotate: -3deg;
  background: var(--brass);
  color: oklch(0.26 0.03 60);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  box-shadow: var(--shadow-2);
  font-family: var(--sans);
}
.dossier__tag b { display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; font-weight: 700; }
.dossier__tag span { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.04em; }
.dossier__caption {
  position: absolute;
  left: 12px; top: 12px;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--on-steel);
  background: oklch(0.2 0.03 250 / 0.5);
  backdrop-filter: blur(3px);
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
}

@media (max-width: 880px) {
  .hero__in { grid-template-columns: 1fr; gap: var(--sp-4); }
  .dossier { order: -1; rotate: 0deg; width: min(78%, 320px); }
  .dossier__tag { rotate: -3deg; }
}

/* =====================================================================
   Empathy / "what you're holding"
   ===================================================================== */
.holding {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(1.6rem, 0.6rem + 4vw, 4.5rem);
  align-items: center;
}
.holding__media { position: relative; }
.photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
  background: var(--paper-3);
}
.photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.28) saturate(0.86) contrast(1.02);
}
.photo--warm::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 55%, oklch(0.75 0.11 74 / 0.14));
  mix-blend-mode: multiply;
}
.photo__pin {
  position: absolute; top: 12px; right: 16px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(0.85 0.09 80), var(--brass-deep));
  box-shadow: 0 3px 6px oklch(0.2 0.03 60 / 0.4);
}
.holding h2 { font-size: var(--step-3); }
.holding p { color: var(--ink-soft); max-width: 50ch; }
.holding p strong { color: var(--ink); font-weight: 600; }
.holding em { font-style: italic; color: var(--brass-deep); font-weight: 500; }

@media (max-width: 780px) {
  .holding { grid-template-columns: 1fr; }
  .holding__media { max-width: 440px; }
}

/* =====================================================================
   Steps — a genuine 3-part sequence (numbers earn their place)
   ===================================================================== */
.steps__head { max-width: 44ch; margin-bottom: var(--sp-5); }
.steps__head h2 { font-size: var(--step-3); }
.steps__head p { color: var(--ink-soft); margin-top: var(--sp-2); font-size: var(--step-1); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.2rem + 2.4vw, 2.4rem);
  counter-reset: step;
}
.step { position: relative; padding-top: var(--sp-3); border-top: 2px solid var(--line-2); }
.step__n {
  counter-increment: step;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3.1rem);
  font-weight: 600;
  color: var(--brass);
  line-height: 1;
  display: block;
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: var(--step-1); margin-top: var(--sp-2); }
.step p { color: var(--ink-soft); margin-top: 0.6rem; font-size: 0.98rem; }
.step::before {
  content: "";
  position: absolute; top: -2px; left: 0;
  width: 2.4rem; height: 2px; background: var(--brass);
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* =====================================================================
   Recover — record types (varied, not identical cards)
   ===================================================================== */
.recover { background: var(--paper-2); border-block: 1px solid var(--line); }
.recover__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.6rem, 0.6rem + 4vw, 4rem);
  align-items: start;
}
.recover__intro h2 { font-size: var(--step-3); }
.recover__intro p { color: var(--ink-soft); margin-top: var(--sp-2); }
.recover__intro .btn { margin-top: var(--sp-3); }
.ledger { display: flex; flex-direction: column; }
.ledger__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.1rem;
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.ledger__row:first-child { padding-top: 0; }
.ledger__row:last-child { border-bottom: 0; }
.ledger__mark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--brass-deep);
  padding-top: 0.35rem;
}
.ledger__row h3 { font-family: var(--serif); font-size: var(--step-1); font-weight: 500; }
.ledger__row p { color: var(--ink-soft); font-size: 0.96rem; margin-top: 0.3rem; }
@media (max-width: 780px) { .recover__grid { grid-template-columns: 1fr; } }

/* The grain wash. Named for the fire band it was built for; that section is
   gone, but the intake page's reassurance rail still drenches itself in it. */
.fire__grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.45; mix-blend-mode: soft-light; }

/* =====================================================================
   Founder's note — honest, no fabricated testimonials
   ===================================================================== */
.note__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1.6rem, 0.6rem + 4vw, 4rem);
  align-items: center;
}
.note__media { position: relative; max-width: 360px; }
.note blockquote {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.32;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.note blockquote em { color: var(--brass-deep); font-style: italic; }
.note__by { margin-top: var(--sp-3); font-size: 0.96rem; color: var(--ink-soft); }
.note__by b { color: var(--ink); font-weight: 600; }
@media (max-width: 780px) { .note__grid { grid-template-columns: 1fr; } .note__media { max-width: 300px; } }

/* =====================================================================
   Questions (faq.html)

   The accordion is a native <details>/<summary>: the browser already knows
   how to open it with a keyboard and how to announce it to a screen reader,
   and the answers sit in the DOM whether or not our JS ever runs. Every item
   shares name="faq", so exactly one answer is open at a time — an older
   browser ignores the attribute and simply lets several stand open, which is
   a shrug, not a break.

   Nothing here is animated by JavaScript. The open/close glide is CSS
   (::details-content + interpolate-size), which means the panel a family is
   *closing* animates out at the same time as the one they're opening — the
   thing a script can't do against the native exclusive accordion, because the
   browser slams the sibling shut the instant we set [open]. Where that CSS
   isn't supported the rules are dropped and the panels snap. Also fine.
   ===================================================================== */
.faq__masthead { padding-bottom: 0; }
.faq__masthead h1 { font-size: var(--step-4); max-width: 16ch; }
.faq__masthead .lede { margin-top: var(--sp-3); max-width: 54ch; }

.faq__in { display: flex; flex-direction: column; gap: var(--sp-5); }
.faq__group { display: grid; grid-template-columns: 15rem 1fr; gap: var(--sp-3) var(--sp-4); align-items: start; }

/* The group name reads as a tab on the record, not a headline: it belongs to
   the sans voice (the record), while the answers speak in the serif (the
   person). */
.faq__head {
  position: sticky;
  top: calc(var(--sp-5) + 2.5rem);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding-top: var(--sp-3);
}
.faq__list { border-top: 1px solid var(--line); }
.faq__group + .faq__group .faq__head { padding-top: var(--sp-3); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 4rem;              /* touch target, with room to spare */
  padding: var(--sp-3) 0;
  cursor: pointer;
  list-style: none;              /* kill the default triangle… */
  transition: color 0.25s ease;
}
.faq__item > summary::-webkit-details-marker { display: none; }  /* …and again, for Safari */
.faq__item > summary:hover { color: var(--brass-deep); }
.faq__item > summary:focus-visible { outline-offset: -3px; }

.faq__q {
  font-family: var(--sans);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* A brass + that becomes a −. Not a chevron: the ledger speaks in marks. */
.faq__mark {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 2px;
  margin: -1px 0 0 -0.625rem;
  border-radius: 1px;
  background: var(--brass-deep);
  transition: transform 0.4s var(--ease-out);
}
.faq__mark::after { transform: rotate(90deg); }
.faq__item[open] .faq__mark::after { transform: rotate(0deg); }

.faq__a {
  padding-bottom: var(--sp-3);
  max-width: var(--measure);
}
.faq__a p {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--ink);            /* never --ink-soft: this is body copy, and the
                                   people reading it are eighty */
}
.faq__a p + p { margin-top: var(--sp-2); }
.faq__a strong { font-weight: 600; }
.faq__a em { font-style: italic; color: var(--brass-deep); }
/* Underlined, not merely brass: colour alone must never carry the meaning. */
.faq__a a {
  color: var(--brass-deep);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(0.560 0.098 62 / 0.45);
  transition: text-decoration-color 0.25s ease;
}
.faq__a a:hover { text-decoration-color: var(--brass-deep); }

/* The glide. interpolate-size is what lets a height animate to `auto`. */
:root { interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.42s var(--ease-out), content-visibility 0.42s allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

/* The proof: one finished reconstruction, given more weight than any answer,
   because it argues better than the copy does. */
.example {
  grid-column: 2;
  display: block;
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
              border-color 0.25s ease;
}
.example:hover {
  transform: translateY(-3px);
  border-color: var(--brass);
  box-shadow: var(--shadow-2);
}
.example__label {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.example__title {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.example__title em {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.example__body {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--ink);
  max-width: var(--measure);
}
/* The caveat on the card: Jim's trail was a generous one. Say so where the
   proof is, not in a footnote nobody opens. */
.example__body em {
  display: block;
  margin-top: 0.8em;
  font-style: italic;
  color: var(--ink-soft);
}
.example__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--sp-3);
  font-family: var(--sans);
  font-weight: 600;
  color: var(--brass-deep);
}
.example__go .arrow { transition: transform 0.35s var(--ease-out); }
.example:hover .example__go .arrow { transform: translateX(4px); }

@media (max-width: 860px) {
  .faq__group { grid-template-columns: 1fr; gap: var(--sp-2); }
  .faq__head { position: static; padding-top: 0; }
  .example { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__mark::before, .faq__mark::after,
  .example, .example__go .arrow { transition: none !important; }
  .example:hover { transform: none; }
}

/* =====================================================================
   Final CTA
   ===================================================================== */
.finale { text-align: center; }
.finale .plate--lockup { margin-bottom: var(--sp-4); }
.finale h2 { font-size: var(--step-4); max-width: 18ch; margin-inline: auto; }
.finale h2 em { font-style: italic; color: var(--brass-deep); }
.finale p { color: var(--ink-soft); font-size: var(--step-1); max-width: 42ch; margin: var(--sp-3) auto 0; }
.finale .btn { margin-top: var(--sp-4); }
.finale__strip {
  display: flex; justify-content: center; gap: 0.75rem;
  margin-top: var(--sp-5); flex-wrap: wrap;
}
.finale__strip .thumb {
  width: clamp(74px, 16vw, 118px);
  aspect-ratio: 3/4;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  opacity: 0.9;
}
.finale__strip .thumb:nth-child(even) { margin-top: 22px; }
.finale__strip .thumb img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.34) saturate(0.8) contrast(1.02); }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background: var(--steel-3); color: var(--on-steel-soft); }
.site-footer__in {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5) var(--sp-4);
}
.site-footer .brand__name { color: var(--on-steel); }
.site-footer h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-hi); font-weight: 700; margin-bottom: var(--sp-2); }
.site-footer a { color: var(--on-steel-soft); text-decoration: none; transition: color 0.2s ease; }
.site-footer a:hover { color: var(--on-steel); }
.site-footer__links { display: flex; flex-direction: column; gap: 0.55rem; }
.site-footer p { font-size: 0.92rem; max-width: 34ch; margin-top: var(--sp-2); }
.site-footer__bottom {
  border-top: 1px solid oklch(0.9 0.02 240 / 0.14);
  padding-block: var(--sp-3);
  display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
  font-size: 0.8rem; color: var(--on-steel-soft);
}
.site-footer__bottom a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) { .site-footer__in { grid-template-columns: 1fr 1fr; } .site-footer__in > :first-child { grid-column: 1 / -1; } }

/* =====================================================================
   Reveal-on-scroll (enhances an already-visible default)
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease-out-soft), transform 0.7s var(--ease-out-soft);
}
.js .reveal[data-delay="1"].is-in { transition-delay: 0.08s; }
.js .reveal[data-delay="2"].is-in { transition-delay: 0.16s; }
.js .reveal[data-delay="3"].is-in { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .btn .arrow, .tlink, .nav a::after { transition: none !important; }
  .dossier { rotate: 0deg; }
}

/* =====================================================================
   Intake page
   ===================================================================== */
.intake {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(1.5rem, 0.4rem + 4vw, 4.5rem);
  align-items: start;
  padding-block: var(--sp-5) var(--sp-6);
}

/* Left: reassurance rail (steel) */
.intake__aside {
  position: sticky;
  top: 92px;
  background:
    radial-gradient(120% 80% at 20% 0%, var(--steel-2), transparent 55%),
    linear-gradient(165deg, var(--steel), var(--steel-3));
  color: var(--on-steel);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-2);
}
.intake__aside .fire__grain { border-radius: var(--radius); }
.intake__crest { margin-bottom: var(--sp-3); }
.intake__aside h1 { color: var(--on-steel); font-size: var(--step-3); }
.intake__aside > p { color: var(--on-steel-soft); margin-top: var(--sp-2); font-size: 0.98rem; }
.reassure { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.reassure li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.reassure svg { width: 24px; height: 24px; color: var(--brass-hi); flex: none; margin-top: 1px; }
.reassure b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--on-steel); }
.reassure span { color: var(--on-steel-soft); font-size: 0.92rem; line-height: 1.5; }
.intake__aside .back { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--sp-4); font-size: 0.9rem; font-weight: 600; color: var(--brass-hi); text-decoration: none; }
.intake__aside .back:hover { color: var(--on-steel); }

/* Right: the form */
.form__head h2 { font-size: var(--step-2); }
.form__head p { color: var(--ink-soft); margin-top: 0.5rem; }
.form__progress { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-deep); }

.fieldset {
  border: 0; padding: 0; margin: 0;
  padding-top: var(--sp-4); margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.fieldset:first-of-type { border-top: 0; margin-top: var(--sp-3); padding-top: 0; }
.fieldset > legend {
  font-family: var(--serif); font-size: var(--step-1); font-weight: 600;
  display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; padding: 0;
}
.fieldset > legend .num { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; color: var(--brass); letter-spacing: 0.06em; }
.fieldset > .hint { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: var(--sp-3); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 540px) { .grid-2 { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--sp-3); }
.field:last-child { margin-bottom: 0; }
/* .field__approx > label is not a child of .field, so it needs naming here too —
   left out, it renders at body size and wraps where no other label does. */
.field > label,
.field__approx > label { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.field .opt { font-weight: 500; color: var(--ink-soft); font-size: 0.82rem; }
.field .help { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.45; }

/* Revealed by intake.js when "Somewhere else" is chosen. Visible by default:
   without JavaScript there is nothing to reveal it, and an unanswerable
   question is worse than an extra one. */
.js .field--conditional { display: none; }
.js .field--conditional.is-open { display: flex; }

/* When a hidden conditional field is last, treat the field before it as last. */
.field:has(+ .field--conditional:not(.is-open)) { margin-bottom: 0; }

.input, .select, .textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.input::placeholder, .textarea::placeholder { color: oklch(0.6 0.02 245); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px oklch(0.735 0.115 74 / 0.22);
  background: var(--paper);
}
.textarea { resize: vertical; min-height: 6.5rem; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

/* Pill controls. Checkbox chips and radio pills share one geometry so the form
   reads as one family of controls; only the marker differs — square for a
   choice you can make several of, round for one you can't. */
.chips, .radios { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.chip, .radio { position: relative; }
.chip input, .radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip label, .radio label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.94rem; font-weight: 500;
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.chip label::before, .radio label::before {
  content: ""; width: 15px; height: 15px;
  border: 1.5px solid var(--line-2); flex: none; transition: inherit;
}
.chip label::before { border-radius: 4px; }
.radio label::before { border-radius: 50%; }
.chip:hover label, .radio:hover label { border-color: var(--ink-soft); }
.chip input:checked + label, .radio input:checked + label {
  border-color: var(--brass);
  background: oklch(0.735 0.115 74 / 0.12);
  color: var(--brass-deep);
}
.chip input:checked + label::before {
  background: var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23332203' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color: var(--brass);
}
/* The dot is the paper showing through a filled ring — no second colour. */
.radio input:checked + label::before {
  background: var(--brass);
  border-color: var(--brass);
  box-shadow: inset 0 0 0 3px var(--paper);
}
.chip input:focus-visible + label,
.radio input:focus-visible + label { outline: 3px solid var(--brass); outline-offset: 2px; }

/* A group of controls has no single label to point at, so its heading is a
   span. Matches .field > label exactly — it reads as the same thing. */
.field > .field__legend { font-weight: 600; font-size: 0.95rem; color: var(--ink); }

/* Standalone checkbox — a consent question, not one pill among a set. The box
   is 24px because the audience skews older and this is a touch target. */
.check { display: flex; align-items: flex-start; gap: 0.65rem; }
.check input {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 0.1rem;
  accent-color: var(--brass);
  cursor: pointer;
}
.check label {
  font-weight: 500; font-size: 0.94rem; color: var(--ink);
  line-height: 1.45; cursor: pointer;
}
.check input:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

/* Date field. A picker, plus an escape hatch to an approximate answer: a family
   that knows only "around 1920" would otherwise have to leave it blank (and we
   lose a real clue) or invent January 1st (and we get a false date we could
   never tell from a real one).
   Without JavaScript there is no swap button, so both inputs simply show. */
.field--date input[type="date"] { min-height: 3rem; }

/* The right inner edge of a field is not ours. A password manager (LastPass,
   1Password) parks its icon there, and the browser puts the calendar button in
   the same place, so the two sit on top of each other. Padding the button
   inward does not help: the extension reads the field's padding and insets by
   it too, so both move together and stay stacked. The only edge we can hold is
   the other one — so the calendar moves left and the right edge is left to
   whatever the visitor has installed.

   Scoped to browsers that expose the button, or Firefox would draw its own on
   the right and we would have painted a second, dead one on the left. */
@supports selector(::-webkit-calendar-picker-indicator) {
  .field--date input[type="date"] {
    position: relative; /* the containing block for the button below */
    padding-left: 3.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10.5h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.95rem center;
    background-size: 20px;
  }
  /* The real button, made invisible and stretched over the glyph we just drew.
     Full field height, so the target clears 44px without a pseudo-element. */
  .field--date input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3.1rem;
    height: auto;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
}
.field__approx { display: flex; flex-direction: column; gap: 0.4rem; }
/* .field__approx wraps the approx label with its input, so hiding the wrapper
   in exact mode already takes the label with it. The exact date's label has
   no such wrapper — it's a direct child of .field--date — so approx mode has
   to hide it explicitly, or it dangles above a control that isn't there. */
.js .field--date[data-mode="exact"] .field__approx { display: none; }
.js .field--date[data-mode="approx"] input[type="date"] { display: none; }
.js .field--date[data-mode="approx"] > label { display: none; }
.field--date .swap {
  align-self: flex-start;
  justify-self: start; /* flex-start is the block axis once the field is a grid */
  background: none; border: 0;
  padding: 0.4rem 0;
  font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--brass-deep);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.field--date .swap:hover { color: var(--ink); }
.field--date .swap:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 3px; }

/* The two date fields sit side by side with labels of different lengths, and
   "Roughly when he was born" is long enough to wrap in a narrow column while its
   neighbour doesn't — from there the two columns are a line out of step all the
   way down. Subgrid pins label, input, swap and help to shared rows, so a wrap on
   one side moves both. display: contents lifts the approximate label and input
   into those rows in place of the exact ones they stand in for. */
@media (min-width: 541px) {
  @supports (grid-template-rows: subgrid) {
    .js .grid-2:has(> .field--date) { grid-template-rows: repeat(4, auto); }
    .js .field--date {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0.4rem;
    }
    .js .field__approx { display: contents; }
  }
}

.form__submit {
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.form__submit .btn { flex: none; }
.form__submit .assure { font-size: 0.86rem; color: var(--ink-soft); max-width: 32ch; }

.field-error { color: oklch(0.5 0.17 28); font-size: 0.85rem; font-weight: 500; display: none; }
.field.invalid .input, .field.invalid .select { border-color: oklch(0.6 0.19 28); }
.field.invalid .field-error { display: block; }

.form-status { margin-top: var(--sp-3); font-size: 0.92rem; font-weight: 500; }
.form-status[data-state="error"] { color: oklch(0.5 0.19 28); }

/* Success panel */
.done {
  text-align: center;
  max-width: 34rem; margin-inline: auto;
  padding-block: var(--sp-5);
}
.done__seal {
  width: 84px; height: 84px; margin: 0 auto var(--sp-3);
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass));
  box-shadow: var(--shadow-2), 0 0 0 8px oklch(0.735 0.115 74 / 0.14);
}
.done__seal svg { width: 42px; height: 42px; color: oklch(0.26 0.03 60); }
.done h2 { font-size: var(--step-3); }
.done p { color: var(--ink-soft); margin-top: var(--sp-2); font-size: var(--step-1); }
.done .btn { margin-top: var(--sp-4); }
.done__ref { margin-top: var(--sp-3); font-size: 0.85rem; color: var(--ink-soft); }
.done__ref code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--brass-deep); font-weight: 600; }

@media (max-width: 860px) {
  .intake { grid-template-columns: 1fr; }
  .intake__aside { position: static; }
}

.is-hidden { display: none !important; }

/* Visible to assistive tech only. The hero heading uses this to read as one
   clean sentence instead of a stuttering, half-typed word. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}