/* ==========================================================================
   Access to Opportunity Corporation — getato.org
   Design system: "Potential & Purpose"  ·  built from the ATO logo
   --------------------------------------------------------------------------
   Colour is taken straight out of the logo artwork:
     royal purple  #2A005A   the ATO monogram
     deep navy     #12003C   the ACCESS TO OPPORTUNITY wordmark
     gold          #C68406   the rising swoosh, star and tagline
     bright gold   #F0B430   the swoosh highlight
     deep gold     #8A5400   the tagline — the only gold dark enough for text

   Type is the logo's own pairing:
     Playfair Display  the high-contrast serif of "ATO"
     Montserrat        the geometric sans of the wordmark, for labels
     Inter             body copy, for legibility at 18px on an old phone

   Principles held throughout:
   · Light, warm-neutral ground. Never dark by default — federal health
     literacy guidance is explicit that dark grounds hurt low-literacy readers.
   · 18px minimum body text. 48px minimum tap targets.
   · Motion is opt-in: gated behind @supports AND prefers-reduced-motion, and
     the un-animated state is always the FINAL state, never opacity:0.
   · Only transform/opacity/filter/clip-path animate (compositor tier).
   · Three colour-coded pathways, kept strictly apart:
        HELP  gold      loudest thing on the page
        REFER purple    the brand voice, institutional
        GIVE  violet    quietest — an outline, never the loudest CTA
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Ground and ink — light, faintly lavender, high contrast */
  --ground:        #faf8fd;
  --ground-2:      #f3effa;
  --ground-3:      #e9e2f4;
  --surface:       #ffffff;
  --ink:           #17093c;
  --ink-2:         #473a63;
  --ink-3:         #6b5f87;
  --rule:          #e3daf0;
  --rule-strong:   #c9bbe0;

  /* Brand — royal purple from the monogram */
  --brand:         #2a005a;
  --brand-600:     #1e004e;
  --brand-500:     #300066;
  --brand-400:     #55219b;
  --brand-200:     #c9b6e6;
  --brand-100:     #e8e0f6;
  --brand-tint:    #f5f1fc;
  --navy:          #12003c;

  /* HELP pathway — gold. Reserved. Never used for donation. */
  --help:          #c68406;
  --help-600:      #a96d04;
  --help-dark:     #8a5400;
  --help-100:      #faeed8;
  --help-tint:     #fdf8ee;

  /* Gold, as a material: highlights and gradients */
  --gold:          #c68406;
  --gold-bright:   #f0b430;
  --gold-mid:      #eaae2a;
  --gold-text:     #8a5400;
  --gold-100:      #faeed8;

  /* GIVE pathway — violet */
  --give:          #55219b;
  --give-600:      #431a7e;
  --give-100:      #ebe2f8;
  --give-tint:     #f7f3fd;

  /* Signal — semantic only, deliberately outside the brand hues */
  --ok:            #1f6b45;
  --ok-100:        #dff0e7;
  --warn:          #8a5400;
  --err:           #a3182b;
  --err-100:       #fbe4e7;

  --focus:         var(--ink);
  --focus-glow:    rgba(240, 180, 48, .6);

  /* Type */
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Playfair Display", "Playfair Display Fallback", Georgia, "Times New Roman", serif;
  --font-mono: "Montserrat", "Montserrat Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-data: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Fluid scale. Base 18px mobile / 20px desktop — deliberately large. */
  --step--2: clamp(0.80rem, 0.78rem + 0.09vw, 0.86rem);
  --step--1: clamp(0.95rem, 0.92rem + 0.16vw, 1.06rem);
  --step-0:  clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --step-1:  clamp(1.32rem, 1.24rem + 0.42vw, 1.60rem);
  --step-2:  clamp(1.58rem, 1.43rem + 0.75vw, 2.05rem);
  --step-3:  clamp(1.89rem, 1.64rem + 1.24vw, 2.62rem);
  --step-4:  clamp(2.27rem, 1.87rem + 1.99vw, 3.36rem);
  --step-5:  clamp(2.72rem, 2.11rem + 3.06vw, 4.30rem);
  --step-6:  clamp(3.05rem, 2.10rem + 4.75vw, 5.60rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);

  /* Shape */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* Elevation — purple-tinted, low, never floaty */
  --shadow-1: 0 1px 2px rgba(23, 9, 60, .05), 0 2px 6px rgba(23, 9, 60, .05);
  --shadow-2: 0 2px 4px rgba(23, 9, 60, .07), 0 8px 22px rgba(23, 9, 60, .08);
  --shadow-3: 0 4px 8px rgba(23, 9, 60, .08), 0 18px 46px rgba(23, 9, 60, .13);

  --wrap: 1240px;
  --wrap-narrow: 780px;
  /* Fallback only. app.js measures the real header — which is two rows tall
     on a phone once the utility bar is counted — and rewrites this, because a
     wrong value both overflows the mobile menu and parks in-page anchor
     targets underneath the sticky header. */
  --header-h: 76px;
  /* The measured height, written by app.js. Falls back to --header-h so the
     page is correct before script runs. Never assign --header-h from script:
     .nav reads it for min-height, which makes the measurement self-feeding. */
  --header-real: var(--header-h);
  --action-bar-h: 0px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Wide-gamut refinement where supported. The sRGB values above stay the
   fallback, so nothing depends on oklch being available. */
@supports (color: oklch(50% 0.1 200)) {
  :root {
    --ground:    oklch(98%   0.006 300);
    --ground-2:  oklch(95.5% 0.012 300);
    --ground-3:  oklch(91.5% 0.022 300);
    --ink:       oklch(23%   0.075 300);
    --ink-2:     oklch(38%   0.048 300);
    --ink-3:     oklch(51%   0.042 300);
    --rule:      oklch(89%   0.022 300);
    --brand:     oklch(26%   0.145 303);
    --brand-400: oklch(41%   0.165 300);
    --help:      oklch(59%   0.128 76);
    --gold-bright: oklch(78%  0.145 80);
  }
}

@media (min-width: 56rem) { :root { --header-h: 84px; } }
/* The sticky bottom action bar exists below 70rem only. */
@media (max-width: 69.99rem) { :root { --action-bar-h: 65px; } }

/* ---------- 2. Reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Reserve the scrollbar so appearing content never shifts the layout. */
  scrollbar-gutter: stable;
  /* WCAG 2.4.11 — a focused element must never hide under the sticky header */
  scroll-padding-top: calc(var(--header-real) + 24px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

/* Long unbroken strings — "Houston/Harris County", an email address, a URL —
   are the most common cause of horizontal overflow on a phone. Break them
   rather than letting them push the page sideways. */
h1, h2, h3, h4, p, li, dd, dt, td, th, summary, label, figcaption {
  overflow-wrap: break-word;
}
a, code { overflow-wrap: anywhere; }

/* Body copy hyphenates only where the measure is genuinely tight. */
@media (max-width: 30rem) {
  p, li, dd { hyphens: auto; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
  color: var(--navy);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-4); max-width: 66ch; text-wrap: pretty; }

a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--brand-400); }

ul, ol { margin: 0 0 var(--sp-5); padding-left: 1.35em; }
li { margin-bottom: var(--sp-2); max-width: 62ch; }
li::marker { color: var(--gold); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-7) 0; }

strong, b { font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 6px var(--focus-glow);
}

::selection { background: var(--gold-100); color: var(--navy); }

/* ---------- 3. Layout: mobile-first and continuous -----------------------
   There are almost no layout breakpoints here on purpose. Every multi-column
   arrangement is an auto-fit grid with a sensible minimum track, so columns
   appear and disappear smoothly as the window changes instead of snapping.

   minmax(min(100%, Xrem), 1fr) is the important idiom: the min() clamp is what
   stops an auto-fit track from ever exceeding its container, which is the
   classic cause of auto-fit grids overflowing on a narrow phone.            */

.wrap        { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (min-width: 44rem) {
  .wrap        { width: min(100% - 4rem, var(--wrap)); }
  .wrap-narrow { width: min(100% - 4rem, var(--wrap-narrow)); }
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--ground2 { background: var(--ground-2); }

.section--brand {
  background: var(--brand);
  color: #ece5f7;
  --focus: var(--gold-bright);
  --focus-glow: rgba(255, 255, 255, .35);
}
.section--brand h2, .section--brand h3, .section--brand h4 { color: #ffffff; }
.section--brand a { color: #e3cf9a; }
.section--brand a:hover { color: #f6e6bd; }
.section--brand li::marker { color: var(--gold-bright); }
.section--brand .eyebrow { color: #b9a4dd; }
.section--brand .lede, .section--brand p { color: rgba(255,255,255,.86); }
.section--brand .eyebrow::before { background: var(--gold-bright); }

/* Deferred rendering for heavy below-fold blocks (INP + style-recalc win). */
.defer { content-visibility: auto; contain-intrinsic-size: auto 720px; }

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 60rem) { .grid { gap: var(--sp-6); } }

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Prose beside a sidecar. Body copy needs about 30rem before a second column
   earns its place — below that it degrades into a 30-character ribbon. */
.split {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  align-items: start;
}
@media (min-width: 64rem) { .split { gap: var(--sp-8); } }
.split--center { align-items: center; }

/* A section's opening paragraph block. */
.section-intro { max-width: 58ch; margin-bottom: var(--sp-7); }
.section-intro > :last-child { margin-bottom: 0; }

/* Heading on the left, a link or button on the right, stacking when narrow. */
.section-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--sp-7);
}
.section-head > div { max-width: 52ch; }
.section-head > div > :last-child { margin-bottom: 0; }

/* Label / value pairs — locations, contact details, at-a-glance panels. */
.dl { display: grid; gap: var(--sp-4); margin: 0; }
.dl dt {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .15rem;
}
.dl dd { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.dl--lg dd { font-size: var(--step-0); color: var(--ink); }
.dl ul { margin: 0; padding-left: 1.1em; }

.list-plain { list-style: none; padding: 0; margin: 0; }

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* A short, honest spacing scale, so vertical rhythm is set in one place
   rather than re-decided inline on every page. */
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.big  { font-size: var(--step-0); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 999;
  transform: translateY(-200%);
  background: var(--navy); color: #fff; padding: .85rem 1.25rem;
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* Aligned variants of .split, and small shared patterns the pages need. */
.split--end { align-items: end; }

.row-between {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-4); flex-wrap: wrap;
}

.quote-lg {
  font-family: var(--font-display); font-size: var(--step-2);
  line-height: 1.22; letter-spacing: -.012em; color: var(--navy);
}

.eyebrow--tight { margin-top: -.5rem; }
.field--narrow { max-width: 18rem; }

/* Muted text takes its colour from whatever ground it sits on. */
.footer .fine { color: #a898c8; }
.cta-band .fine { color: rgba(255, 255, 255, .75); }
.cta-band .eyebrow { color: rgba(255, 255, 255, .72); }
.section--brand .fine { color: rgba(255, 255, 255, .72); }

/* Dark-band guards ------------------------------------------------------- */
/* A band sets `color` on descendant links and paragraphs, which is right for
   text sitting directly on the band and wrong for anything that brings its own
   surface with it. A .btn carries its own --btn-fg token; a .card is a light
   panel. Both are re-asserted here at higher specificity, because a band rule
   like `.section--brand a` (0,1,1) otherwise outranks `.btn` (0,1,0) and the
   button's label ends up gold-on-white at 1.5:1. */
:is(.section--brand, .section--deep, .cta-band, .footer) .btn { color: var(--btn-fg); }
:is(.section--brand, .cta-band) .card { color: var(--ink); }
:is(.section--brand, .cta-band) .card :is(h2, h3, h4) { color: var(--navy); }
:is(.section--brand, .cta-band) .card p { color: var(--ink-2); }
:is(.section--brand, .cta-band) .card :is(a, .card-link) { color: var(--brand); }
:is(.section--brand, .cta-band) .card .fine { color: var(--ink-3); }

/* ---------- 3b. Container queries ---------------------------------------
   Components size themselves from the space they are actually given, not from
   the viewport. A card in a four-up grid and the same card full-width on a
   phone are different jobs, and neither should depend on guessing the window.  */

.card, .door, .loc, .capacity-card { container-type: inline-size; }

@container (max-width: 17rem) {
  .card, .door { padding: var(--sp-5); }
  .card h3 { font-size: var(--step-0); }
  .door-title { font-size: var(--step-1); }
  .card-icon { width: 44px; height: 44px; margin-bottom: var(--sp-3); }
  .capacity-number { font-size: var(--step-4); }
}
@container (min-width: 34rem) {
  .card { padding: var(--sp-7); }
  .dl--wide { grid-template-columns: 12rem 1fr; align-items: baseline; }
  .dl--wide dt { margin-bottom: 0; }
}

/* ---------- 4. Eyebrow / label ------------------------------------------ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--sp-3);
  display: flex; align-items: center; gap: .65rem;
}
.eyebrow::before {
  content: ""; width: 1.7rem; height: 2px; flex: none; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.eyebrow--plain::before { display: none; }
.center .eyebrow { justify-content: center; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}

.fine { font-size: var(--step--1); color: var(--ink-3); }

/* ---------- 5. Buttons --------------------------------------------------- */

.btn {
  --btn-bg: var(--brand);
  --btn-fg: #ffffff;
  --btn-bd: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px;           /* well above the WCAG 2.5.8 floor of 24px */
  padding: .85rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd); border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--step--1); font-weight: 650; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease);
  will-change: transform;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

/* HELP — gold, with dark text. 5.9:1, and the loudest thing on the page. */
.btn--help  { --btn-bg: var(--help); --btn-bd: var(--help); --btn-fg: var(--navy); }
.btn--help:hover { --btn-bg: var(--help-600); --btn-bd: var(--help-600); }

/* GIVE — violet outline. Deliberately never the loudest CTA. */
.btn--give  { --btn-bg: transparent; --btn-fg: var(--give); --btn-bd: var(--give); }
.btn--give:hover { --btn-bg: var(--give-tint); }

.btn--ink   { --btn-bg: var(--navy);  --btn-bd: var(--navy); }
.btn--ghost { --btn-bg: transparent;  --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.btn--ghost:hover { --btn-bg: var(--surface); --btn-bd: var(--brand-400); }
.btn--onbrand { --btn-bg: #ffffff; --btn-fg: var(--brand); --btn-bd: #ffffff; }
.btn--onbrand-ghost { --btn-bg: transparent; --btn-fg: #ffffff; --btn-bd: rgba(255,255,255,.5); }
.btn--onbrand-ghost:hover { --btn-bd: var(--gold-bright); --btn-fg: var(--gold-bright); }
.btn--lg { min-height: 60px; padding: 1.05rem 2rem; font-size: var(--step-0); }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.center .btn-row { justify-content: center; }

/* ---------- 6. Header ---------------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.header[data-stuck="true"] {
  border-bottom-color: var(--rule);
  background: color-mix(in srgb, var(--ground) 96%, transparent);
}
@supports not (backdrop-filter: blur(1px)) { .header { background: var(--ground); } }

/* Utility strip — the "Consistent Help" bar (WCAG 3.2.6).
   Identical position on every page. Carries the tap-to-call number. */
.utility {
  background: var(--navy); color: #cdbdea;
  font-size: var(--step--2);
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em;
  border-bottom: 2px solid var(--gold);
}
.utility .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 40px; flex-wrap: wrap;
}
.utility a { color: #ffffff; text-decoration: none; font-weight: 650; }
.utility a:hover { color: var(--gold-bright); text-decoration: underline; }
.utility-links { display: flex; gap: var(--sp-5); align-items: center; }
.utility-call { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .1rem; }
.utility-call svg { color: var(--gold-bright); }
.utility-note { color: #9c8ac0; }
@media (max-width: 44rem) {
  .utility-note { display: none; }
  .utility .wrap { justify-content: center; gap: var(--sp-4); }
}

.nav {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--header-h);
}
@media (min-width: 70rem) { .nav { gap: var(--sp-5); } }

/* Brand lockup: the real logo monogram, plus live text for the wordmark so it
   stays legible and selectable at header size (an image of the full lockup
   would render the wordmark at ~5px). */
.brand-lockup {
  display: inline-flex; align-items: center; gap: .8rem;
  text-decoration: none; color: var(--ink); margin-right: auto;
  padding: .25rem 0;
}
.brand-mark { flex: none; height: 44px; width: auto; }
@media (min-width: 56rem) { .brand-mark { height: 50px; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-mono); font-weight: 700;
  font-size: .96rem; letter-spacing: .085em; text-transform: uppercase;
  color: var(--navy); white-space: nowrap;
}
.brand-sub {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-text); margin-top: 3px; white-space: nowrap;
}
@media (max-width: 44rem) {
  .brand-name { font-size: .8rem; letter-spacing: .06em; }
  .brand-sub { display: none; }
  .brand-lockup { gap: .55rem; }
}
/* On a narrow phone the monogram carries the brand on its own — it already
   reads "ATO". Squeezing the wordmark in collides with the Get help button. */
@media (max-width: 35rem) {
  .brand-text { display: none; }
  .brand-mark { height: 40px; }
}
.nav-cta .btn { white-space: nowrap; }

.nav-links { display: none; }
@media (min-width: 70rem) { .nav-links { display: flex; align-items: center; gap: var(--sp-2); } }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 .85rem; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--step--1); font-weight: 550;
}
.nav-link:hover { color: var(--brand); background: var(--ground-2); }
.nav-link[aria-current="page"] { color: var(--brand); font-weight: 700; }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 8px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

.nav-cta { display: flex; align-items: center; gap: var(--sp-2); }
.nav-cta .btn { min-height: 46px; padding: .6rem 1.1rem; font-size: var(--step--1); }
@media (max-width: 39rem) { .nav-cta .btn--give { display: none; } }

.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; flex: none;
  background: transparent; border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-sm); cursor: pointer; color: var(--brand);
}
@media (min-width: 70rem) { .hamburger { display: none; } }
.hamburger span {
  position: relative; display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .25s var(--ease), opacity .18s linear;
}
.hamburger span::before, .hamburger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .25s var(--ease);
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }
.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--rule); background: var(--ground);
  padding-block: var(--sp-4);
  /* The panel hangs off the bottom of a sticky header, so its room is the
     viewport minus the header above it and minus the fixed action bar below
     it. Without the action-bar term the last link and the main call to action
     sit underneath that bar and cannot be tapped at all. */
  max-height: calc(100dvh - var(--header-real) - var(--action-bar-h) - 8px);
  padding-bottom: calc(var(--action-bar-h) + var(--sp-5));
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu[data-open="true"] { display: block; }
@media (min-width: 70rem) { .mobile-menu { display: none !important; } }
.mobile-menu a {
  display: flex; align-items: center; min-height: 54px;
  padding: .5rem 0; border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
  font-family: var(--font-mono); font-weight: 550; font-size: var(--step-0);
}
.mobile-menu a[aria-current="page"] { color: var(--brand); font-weight: 750; }
.mobile-menu .btn { margin-top: var(--sp-5); }

/* ---------- 7. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 7vw, 6.5rem) clamp(3rem, 2rem + 5vw, 5.5rem);
  overflow: clip;
  isolation: isolate;
}
.hero::before {
  /* Purple-and-gold wash plus film grain, entirely in CSS — zero image bytes */
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%;
  z-index: -2;
  background:
    radial-gradient(58% 62% at 10% 6%,   rgba(42, 0, 90, .17), transparent 62%),
    radial-gradient(54% 56% at 93% 20%,  rgba(240, 180, 48, .30), transparent 62%),
    radial-gradient(50% 50% at 68% 98%,  rgba(85, 33, 155, .14), transparent 66%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .42; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.hero-grid { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 64rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--sp-8);
  }
  .hero-grid > aside { margin-top: 3.25rem; }
}

.hero h1 {
  font-size: var(--step-6);
  letter-spacing: -.022em;
  max-width: 15ch;
  margin-bottom: var(--sp-5);
  color: var(--navy);
}
.hero h1 em {
  font-style: italic;
  color: var(--brand);
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .02em;
  height: .2em; z-index: -1; border-radius: .1em;
  background: linear-gradient(90deg, rgba(240,180,48,.55), rgba(198,132,6,.18));
}
.hero .lede { font-size: var(--step-1); max-width: 46ch; margin-bottom: var(--sp-6); }

/* The three doors. Three cards never sit two-up — that leaves an orphan — so
   they stack until there is genuinely room for all three, and return to a
   vertical list once the hero itself splits into two columns. */
.doors { display: grid; gap: var(--sp-4); }
@media (min-width: 56rem) { .doors { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .doors { grid-template-columns: 1fr; } }

.door {
  --door-accent: var(--brand);
  position: relative; display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--door-accent);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
  min-height: 100%;
}
.door:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); color: var(--ink); }
.door--help  { --door-accent: var(--help); }
.door--refer { --door-accent: var(--brand); }
.door--give  { --door-accent: var(--give); }

.door-kicker {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--door-accent); margin-bottom: var(--sp-2);
}
.door--help .door-kicker { color: var(--help-dark); }
.door-title {
  font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 600; line-height: 1.12; margin-bottom: var(--sp-2);
  letter-spacing: -.012em; color: var(--navy);
}
.door-body { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.door-go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--2); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--door-accent);
}
.door--help .door-go { color: var(--help-dark); }
.door-go svg { transition: transform .22s var(--ease); }
.door:hover .door-go svg { transform: translateX(5px); }

/* Hero side panel — the live capacity card */
.capacity-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-6);
  position: relative; overflow: hidden;
}
.capacity-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--give), var(--gold-bright));
}
.capacity-status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--help-dark); background: var(--gold-100);
  padding: .35rem .75rem; border-radius: var(--r-pill); margin-bottom: var(--sp-4);
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .pulse::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: currentColor; animation: pulse 2.4s var(--ease) infinite;
  }
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

.capacity-number {
  font-family: var(--font-display);
  font-size: var(--step-6); line-height: .92; font-weight: 700;
  letter-spacing: -.03em; color: var(--brand);
  margin-bottom: var(--sp-2);
}
.capacity-label { font-size: var(--step-0); font-weight: 620; margin-bottom: var(--sp-1); color: var(--navy); }
.capacity-meta {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 550;
  color: var(--ink-3); letter-spacing: .06em;
  padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px solid var(--rule);
}
.capacity-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.capacity-list li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--sp-2);
}
.capacity-list svg { flex: none; margin-top: .28em; color: var(--gold); }

/* ---------- 8. Trust strip ---------------------------------------------- */

.trust-strip {
  border-block: 1px solid var(--rule);
  background: var(--ground-2);
  padding-block: var(--sp-5);
}
.trust-items {
  display: grid; gap: var(--sp-4) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: center;
}
.trust-item {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: var(--step--1); color: var(--ink-2); line-height: 1.4;
}
.trust-item svg { flex: none; color: var(--gold); margin-top: .1em; }
.trust-item b { display: block; color: var(--navy); font-weight: 650; }

/* ---------- 9. Cards ----------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
a.card { text-decoration: none; color: var(--ink); }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); color: var(--ink); }
.card h3 { margin-bottom: var(--sp-3); font-size: var(--step-1); }
.card p:last-child { margin-bottom: 0; }
.card--flat { box-shadow: none; }
.card--tint { background: var(--brand-tint); border-color: var(--brand-100); }

.card-icon {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-100); color: var(--brand);
  margin-bottom: var(--sp-4);
}
.card-icon--help { background: var(--gold-100); color: var(--help-dark); }
.card-icon--give { background: var(--give-100); color: var(--give); }

.card-link {
  margin-top: auto; padding-top: var(--sp-4);
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono);
  font-size: var(--step--2); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.card-link svg { transition: transform .22s var(--ease); }
a.card-link { text-decoration: none; }
a.card-link:hover { color: var(--brand-400); }
a.card-link:hover svg { transform: translateX(5px); }
/* Label and arrow are one unit — the arrow never drops to its own line. */
.card-link { white-space: nowrap; }
a.card:hover .card-link svg { transform: translateX(5px); }

/* Numbered step cards */
.steps { counter-reset: step; display: grid; gap: var(--sp-6) var(--sp-5); }
.steps--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.steps--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.step {
  counter-increment: step;
  position: relative;
  padding-top: var(--sp-6);
  border-top: 2px solid var(--rule-strong);
}
.step::before {
  content: counter(step);
  position: absolute; top: calc(-1 * var(--sp-5)); left: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700;
  box-shadow: 0 0 0 6px var(--ground);
}
.section--ground2 .step::before { box-shadow: 0 0 0 6px var(--ground-2); }
.step h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.step p { font-size: var(--step--1); color: var(--ink-2); margin-bottom: 0; }
.step-time {
  display: inline-block; margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--help-dark); background: var(--gold-100);
  padding: .3rem .65rem; border-radius: var(--r-sm);
}

/* ---------- 10. Stats ---------------------------------------------------- */

.stats { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat { border-top: 3px solid var(--gold); padding-top: var(--sp-4); }
.stat-num {
  font-family: var(--font-display); font-size: var(--step-4);
  font-weight: 700; line-height: 1; letter-spacing: -.025em; color: var(--brand);
  margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.section--brand .stat { border-top-color: var(--gold-bright); }
.section--brand .stat-num { color: #ffffff; }
.stat-label { font-size: var(--step--1); color: var(--ink-2); line-height: 1.35; }
.section--brand .stat-label { color: rgba(255,255,255,.85); }

/* ---------- 11. Locations ------------------------------------------------ */

.loc {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-1);
}
.loc-head {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3);
}
.loc-head h3 { margin: 0 0 .2rem; font-size: var(--step-1); }
.loc-region {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.loc-body { padding: var(--sp-5); flex: 1; }
.loc-body dl { margin: 0; display: grid; gap: var(--sp-3); }
.loc-body dt {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px;
}
.loc-body dd { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.loc-foot { padding: 0 var(--sp-5) var(--sp-5); }

.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
  padding: .3rem .65rem; border-radius: var(--r-pill);
  background: var(--ground-3); color: var(--ink-2); white-space: nowrap;
}
.badge--open { background: var(--gold-100); color: var(--help-dark); }
.badge--full { background: var(--ground-3); color: var(--ink-3); }
.badge--help { background: var(--gold-100); color: var(--help-dark); }

/* ---------- 11b. Icon fact grid (shared) -------------------------------- */
/* A row of short, icon-led facts. Used by the v2 credibility strip and by the
   internship page's support list, so it lives here rather than in v2.css. */

.cred-grid {
  display: grid; gap: var(--sp-5) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: start;
}
.cred-item { display: flex; gap: .8rem; align-items: flex-start; }
.cred-item svg { flex: none; color: var(--gold); margin-top: .15em; }
.cred-item b {
  display: block; color: var(--navy); font-weight: 650;
  font-size: var(--step--1); line-height: 1.3; margin-bottom: .15rem;
}
.cred-item span { font-size: var(--step--2); color: var(--ink-3); line-height: 1.45; }
.cred-note {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--step--2); color: var(--ink-3); max-width: none;
}


/* ---------- 11c. Numbered process (shared) ------------------------------ */
/* Outlined numerals with a dashed connector. --flow wraps for step counts
   that are not a tidy four. */

.proc { display: grid; gap: var(--sp-6); counter-reset: proc; }
@media (min-width: 56rem) { .proc--4 { grid-template-columns: repeat(4, 1fr); } }
.proc-step { position: relative; counter-increment: proc; padding-top: var(--sp-2); }
.proc-no {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3vw, 4.4rem); font-weight: 700; line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--brand-400);
  display: block; margin-bottom: var(--sp-3);
  opacity: .55;
}
.proc-step h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.proc-step p { font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--sp-3); }
/* Dashed connector, correctly terminated — it never trails off the last step. */
@media (min-width: 56rem) {
  .proc-step:not(:last-child)::after {
    content: ""; position: absolute; top: 1.9rem; left: 4.6rem; right: -1.4rem;
    border-top: 1.5px dashed var(--rule-strong);
  }
}
.proc-time {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--help-dark); background: var(--gold-100);
  padding: .28rem .6rem; border-radius: var(--r-xs);
}
/* --gold at .9 opacity lands at 2.8:1 against the light ground, just under
   the 3:1 floor for large text; --gold-text is the accessible gold. */
.proc-step--final .proc-no { -webkit-text-stroke-color: var(--gold-text); opacity: .9; }

.proc--flow {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* The connector assumes a single row; with wrapping columns it would cut
   across a gap into the wrong step. */
.proc--flow .proc-step:not(:last-child)::after { content: none; }

/* ---------- 12. Callout / quote ------------------------------------------ */

.callout {
  border-left: 4px solid var(--gold);
  background: var(--help-tint);
  padding: var(--sp-5) var(--sp-6);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout--help  { border-left-color: var(--help); background: var(--help-tint); }
.callout--brand { border-left-color: var(--brand-400); background: var(--brand-tint); }
.callout p:last-child { margin-bottom: 0; }
.callout h3 { font-size: var(--step-1); }

.pull {
  font-family: var(--font-display);
  font-size: var(--step-3); line-height: 1.24; letter-spacing: -.012em;
  font-style: italic;
  color: var(--navy); max-width: 22ch; text-wrap: balance;
}

/* ---------- 13. Accordion (FAQ) ------------------------------------------ */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-5) 3rem var(--sp-5) 0;
  position: relative;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600;
  line-height: 1.28; letter-spacing: -.008em; color: var(--navy);
  min-height: 52px; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: 16px; height: 16px;
  margin-top: -8px;
  background:
    linear-gradient(var(--gold), var(--gold)) center/16px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center/2px 16px no-repeat;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--brand); }
.faq .faq-body { padding: 0 0 var(--sp-5); }
.faq .faq-body > :last-child { margin-bottom: 0; }

/* ---------- 14. Forms ---------------------------------------------------- */

.form-shell {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
}

.progress { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); list-style: none; padding: 0; }
.progress li {
  flex: 1; margin: 0; font-size: var(--step--2); font-family: var(--font-mono);
  font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  padding-top: .7rem; border-top: 4px solid var(--rule);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.progress li[data-state="active"] { color: var(--brand); border-top-color: var(--brand); font-weight: 750; }
.progress li[data-state="done"] { color: var(--help-dark); border-top-color: var(--gold); }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-6); }
.fieldset legend {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 600;
  letter-spacing: -.012em; padding: 0; margin-bottom: var(--sp-2); color: var(--navy);
}
.fieldset .fine { margin-bottom: var(--sp-5); }

.field { margin-bottom: var(--sp-5); }
.field > label, .field-label {
  display: block; font-weight: 650; font-size: var(--step--1);
  margin-bottom: .4rem; color: var(--navy);
}
.field-hint { display: block; font-size: var(--step--2); color: var(--ink-3); margin-bottom: .5rem; font-weight: 400; }
.req { color: var(--err); font-weight: 700; }

.input, .select, .textarea {
  width: 100%; min-height: 54px;
  padding: .8rem 1rem;
  font: inherit; font-size: var(--step--1);
  color: var(--ink); background: var(--ground);
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
@supports (field-sizing: content) {
  .textarea { field-sizing: content; max-height: 60vh; }
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236b5f87' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.75rem;
}
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea { border-color: var(--err); background: var(--err-100); }
.field-error { display: none; margin-top: .45rem; font-size: var(--step--2); color: var(--err); font-weight: 600; }
.field[data-invalid="true"] .field-error { display: flex; gap: .4rem; align-items: center; }

.field-row { display: grid; gap: var(--sp-4); }
.field-row--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.choices { display: grid; gap: var(--sp-2); }
.choices--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.choice {
  display: flex; align-items: flex-start; gap: .75rem;
  min-height: 52px; padding: .85rem 1rem;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--ground); cursor: pointer;
  font-size: var(--step--1); line-height: 1.4;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.choice:hover { border-color: var(--ink-3); }
.choice input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--brand); }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid var(--rule);
  align-items: center;
}
.form-actions .spacer { margin-left: auto; }

.form-note {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: var(--brand-tint); border-radius: var(--r-md);
  font-size: var(--step--2); color: var(--ink-2);
}
.form-note p { margin-bottom: 0; max-width: none; }

.form-status { margin-bottom: var(--sp-5); }
.alert {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  font-size: var(--step--1); border: 1px solid transparent;
}
.alert svg { flex: none; margin-top: .15em; }
.alert p { margin: 0; }
.alert--ok  { background: var(--ok-100);  color: var(--ok);  border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.alert--err { background: var(--err-100); color: var(--err); border-color: color-mix(in srgb, var(--err) 25%, transparent); }
.alert--info{ background: var(--brand-tint); color: var(--brand); border-color: var(--brand-100); }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.step-panel[hidden] { display: none !important; }

/* ---------- 15. Amounts (donate) ----------------------------------------- */

.amounts { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.amount {
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--surface); padding: var(--sp-4); cursor: pointer;
  text-align: left; font: inherit; color: var(--ink);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  min-height: 96px;
}
.amount:hover { border-color: var(--give); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.amount[aria-pressed="true"] { border-color: var(--give); background: var(--give-tint); box-shadow: var(--shadow-2); }
.amount-value {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
  letter-spacing: -.025em; color: var(--help-dark); display: block; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.amount-desc { font-size: var(--step--2); color: var(--ink-2); display: block; margin-top: .35rem; line-height: 1.35; }

/* ---------- 16. Timeline ------------------------------------------------- */

.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--gold), var(--rule)); border-radius: 2px;
}
.timeline li { position: relative; padding-left: 2.4rem; margin-bottom: var(--sp-6); max-width: 62ch; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand);
}
.timeline-year {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .13em;
  text-transform: uppercase; color: var(--help-dark); font-weight: 700; display: block; margin-bottom: .2rem;
}
.timeline h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.timeline p { font-size: var(--step--1); color: var(--ink-2); margin-bottom: 0; }

/* ---------- 17. Big CTA band --------------------------------------------- */

.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand); color: #ede6f8;
  border-radius: var(--r-xl);
  padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  --focus: var(--gold-bright);
  --focus-glow: rgba(255, 255, 255, .35);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(62% 92% at 88% 10%, rgba(240, 180, 48, .42), transparent 62%),
    radial-gradient(52% 82% at 6% 96%, rgba(85, 33, 155, .55), transparent 62%);
}
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 52ch; }
.cta-band .btn-row { margin-top: var(--sp-6); }
.cta-band .eyebrow::before { background: var(--gold-bright); }

/* ---------- 18. Footer --------------------------------------------------- */

.footer {
  background: var(--navy); color: #bdaddd;
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--step--1);
  border-top: 4px solid var(--gold);
  --focus: var(--gold-bright);
  --focus-glow: rgba(255, 255, 255, .35);
}
.footer a { color: #eee7fa; text-decoration: none; }
.footer a:hover { color: var(--gold-bright); text-decoration: underline; }
.footer h2, .footer h3 { color: #fff; }
.footer-top {
  display: grid; gap: var(--sp-6) var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
/* Brand block plus four link columns. Below 76rem the auto-fit rule above
   handles it, so the explicit five-track layout only applies where it fits. */
@media (min-width: 76rem) { .footer-top { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 60rem) { .footer-brand { grid-column: auto; } }
.footer-logo { width: 240px; max-width: 100%; height: auto; margin-bottom: var(--sp-5); }
.footer-brand p { color: #a898c8; font-size: var(--step--1); max-width: 34ch; }
.footer h3 {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: var(--sp-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0; }
.footer li a { min-height: 44px; display: flex; align-items: center; }
.footer-bottom {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
  justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--2); color: #9684b8;
}
.footer-bottom a { color: #bdaddd; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

/* WCAG 2.2 AA, 2.5.8 Target Size (Minimum): standalone link clusters get a
   24px tap box. Links that sit inline inside a sentence are exempt by the
   spec and are deliberately left at their reading size. */
.utility-links > a,
.footer-legal > a,
.table-wrap td > a,
.dl dd > a {
  display: inline-flex; align-items: center; min-height: 24px;
}

/* Used twice: as the big phone number in the navy footer, and inside a light
   card on the referral page. It must not hard-code white — the card version would be
   invisible — so the white lives in the footer-scoped rule below. */
.footer-call {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
  color: var(--brand); text-decoration: none; letter-spacing: -.015em;
  margin-top: var(--sp-2);
}
.footer .footer-call, .section--deep .footer-call { color: #fff; }
.footer-call svg { color: var(--gold-bright); }

/* ---------- 19. Mobile sticky action bar --------------------------------- */

.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--rule);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 22px rgba(23, 9, 60, .14);
}
@media (min-width: 70rem) { .action-bar { display: none; } }
body:has(.action-bar) { padding-bottom: 68px; }
.action-bar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 64px; background: var(--surface); color: var(--ink);
  text-decoration: none; font-family: var(--font-mono);
  font-weight: 700; font-size: var(--step--1); letter-spacing: .02em;
}
.action-bar a.is-call { background: var(--help); color: var(--navy); }
.action-bar a.is-primary { background: var(--brand); color: #fff; }

/* ---------- 20. Breadcrumb ----------------------------------------------- */

.crumbs {
  padding-block: var(--sp-4);
  font-size: var(--step--2); color: var(--ink-3);
  font-family: var(--font-mono); font-weight: 550; letter-spacing: .05em;
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li { margin: 0; display: flex; gap: .4rem; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--rule-strong); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- 21. Page header (interior) ----------------------------------- */

.page-head {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 120% at 88% -10%, rgba(42, 0, 90, .15), transparent 62%),
    radial-gradient(60% 110% at 4% 110%, rgba(240, 180, 48, .24), transparent 62%);
}
.page-head h1 { max-width: 18ch; margin-bottom: var(--sp-4); font-size: var(--step-5); }
.page-head .lede { max-width: 58ch; margin-bottom: 0; }
.page-head--help::before {
  background:
    radial-gradient(70% 120% at 88% -10%, rgba(240, 180, 48, .34), transparent 62%),
    radial-gradient(60% 110% at 4% 110%, rgba(42, 0, 90, .13), transparent 62%);
}

/* ---------- 22. Prose (long-form pages) ---------------------------------- */

.prose h2 { margin-top: var(--sp-8); font-size: var(--step-3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-6); font-size: var(--step-1); }
.prose > p, .prose > ul, .prose > ol { max-width: 66ch; }

.table-wrap {
  overflow-x: auto; margin-bottom: var(--sp-5); -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  /* Shadows that appear only when there is more table to scroll to. */
  background:
    linear-gradient(90deg, var(--surface) 30%, transparent) left / 3rem 100% no-repeat,
    linear-gradient(-90deg, var(--surface) 30%, transparent) right / 3rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(23,9,60,.14), transparent) left / 1rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(23,9,60,.14), transparent) right / 1rem 100% no-repeat,
    var(--surface);
  background-attachment: local, local, scroll, scroll, local;
}
.table-wrap table { min-width: 34rem; }
.table-wrap :is(th, td):first-child { padding-left: var(--sp-5); }
.table-wrap :is(th, td):last-child { padding-right: var(--sp-5); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); min-width: 480px; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  background: var(--ground-2);
}
tbody tr:hover { background: var(--ground-2); }

/* ---------- 24. Capacity table: stack on a phone ------------------------ */
/* A four-column table at 360px either squeezes every cell into a two-word
   ribbon or pushes Beds and Status off behind a horizontal scroll nobody
   discovers. Below the breakpoint each row becomes its own labelled block —
   the label comes from the td's data-label, so the markup stays a real table
   for screen readers and for wide screens. */

@media (max-width: 44rem) {
  .table-wrap { overflow-x: visible; background: none; }
  /* app.css gives tables a 34rem min-width so they scroll rather than squeeze;
     that floor has to be lifted here or the stacked rows overflow the page. */
  .table-wrap table { min-width: 0; }
  .table-wrap table,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td { display: block; width: 100%; }
  /* Each cell carries its own visible label once stacked, so the header row
     would only be read twice. The caption keeps the table named. */
  .table-wrap thead { display: none; }
  .table-wrap tr {
    border: 1px solid var(--rule); border-radius: var(--r-sm);
    background: var(--surface); padding: var(--sp-4);
    margin-bottom: var(--sp-4);
  }
  .table-wrap tr:last-child { margin-bottom: 0; }
  .table-wrap td {
    border: 0; padding: 0; display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr); gap: var(--sp-4);
    align-items: baseline;
    padding-block: .38rem;
  }
  /* minmax(0,1fr) alone is not enough: a nowrap pill still sets its own
     min-content floor, so let badges wrap at this width. */
  .table-wrap td > * { min-width: 0; }
  .table-wrap td .badge { white-space: normal; }
  .table-wrap td + td { border-top: 1px solid var(--rule); }
  .table-wrap td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: var(--step--2);
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gold-text);
  }
  .table-wrap td:empty { display: none; }
}

/* ---------- 23. Tag list ------------------------------------------------- */

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.tags li { margin: 0; }
.tag {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .4rem .9rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
a.tag:hover { border-color: var(--gold); color: var(--help-dark); }

/* ---------- 24. Motion layer --------------------------------------------- */
/* The base state below is the FINAL state. Browsers without scroll-driven
   animation support (Firefox, iOS < 26) simply see finished content.        */

.reveal { opacity: 1; transform: none; }
.reveal-child > * { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    .reveal-child > * {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 24%;
    }
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-drift {
      animation: hero-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
  }
}
@keyframes hero-drift {
  to { transform: translateY(4%) scale(1.03); opacity: .78; }
}

/* One-shot entrance for above-the-fold content (no scroll timeline needed) */
@media (prefers-reduced-motion: no-preference) {
  /* Deliberately quick: the hero must be readable in the first frames, not
     after a staged sequence. Total time to full opacity is under 0.75s. */
  .enter { animation: enter-up .55s var(--ease-out) both; }
  .enter-1 { animation-delay: .03s; }
  .enter-2 { animation-delay: .08s; }
  .enter-3 { animation-delay: .13s; }
  .enter-4 { animation-delay: .18s; }
  .enter-5 { animation-delay: .18s; }
}
@keyframes enter-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Line-mask headline reveal — clip-path is compositor-tier */
@media (prefers-reduced-motion: no-preference) {
  .line-reveal > span {
    display: block;
    animation: line-up .65s var(--ease-out) both;
    clip-path: inset(0 0 0 0);
  }
  .line-reveal > span:nth-child(2) { animation-delay: .07s; }
  .line-reveal > span:nth-child(3) { animation-delay: .14s; }
}
@keyframes line-up {
  from { opacity: 0; transform: translateY(.5em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none;             clip-path: inset(0 0 -10% 0); }
}

/* Readers who ask the OS for more contrast get firmer rules and darker text. */
@media (prefers-contrast: more) {
  :root {
    --ink-2: #2b1f47;
    --ink-3: #3f3160;
    --rule: #b9a9d4;
    --rule-strong: #8f7bb4;
    --gold-text: #6f4400;
  }
  .btn { border-width: 2.5px; }
  .card, .door, .loc, .form-shell { border-width: 2px; }
}

/* Global reduced-motion kill switch */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* Cross-document view transitions — pure enhancement */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root), ::view-transition-new(root) { object-fit: cover; }

/* ---------- 25. Print ---------------------------------------------------- */

@media print {
  .header, .footer, .action-bar, .cta-band, .btn, .hamburger, .mobile-menu { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .card, .form-shell, .loc { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .page-head::before, .hero::before, .hero::after { display: none; }
}

/* .proc is used as both a div and an ordered list; as a list it must not carry
   native markers, since .proc-no already numbers every step visibly. */
ol.proc { list-style: none; padding-left: 0; margin: 0; }
ol.proc > li { margin-bottom: 0; }

/* A long checklist reads better in two columns once there is room for them.
   `columns` rather than a grid, so the list stays one list for assistive tech
   and the break lands wherever the content allows. */
.cols-2 { columns: 2 20rem; column-gap: var(--sp-7); }
.cols-2 > li { break-inside: avoid; }