/* ==========================================================================
   Aspen FMS - "Still Water"
   Plain CSS. Tokens mirror DESIGN.md (palette sampled from the logo).
   Fixed warm-light heritage theme.
   ========================================================================== */

:root {
  /* Brand blues (from the logo) */
  --aspen-ink: #1c2c54;
  --ink-deep: #14203d;
  --steel: #3d5680;
  --steel-strong: #46618a;
  --sky: #5a78a2;
  --sky-light: #8ba3c4;
  --mist: #dce6f0;
  --haze: #eef2f7;

  /* Warm neutrals */
  --bone: #f6f3ec;
  --ivory: #fcfaf4;
  --sand: #ece6da;
  --warm-ink: #1a1d24;
  --warm-muted: #595d66;
  --warm-faint: #83847f;
  --hairline: #e2dcd0;
  --hairline-cool: #cbd6e6;

  /* Heritage Brass - single scarce accent */
  --brass: #b08a4f;
  --brass-deep: #8c6a38;
  --brass-pale: #e8dcc4;

  /* On-dark */
  --on-ink: #f4f1ea;
  --on-ink-muted: #aeb7c9;

  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Public Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1200px;
  --nav-h: 72px;

  /* The house ease — one curve for the whole site. Mirrored in js/main.js as
     CustomEase "aspen" so CSS and GSAP motion are literally identical. */
  --ease-aspen: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* --- Cross-document page transitions (View Transitions API) ---
   Browsers that support it get a soft cross-fade between pages instead of the
   white flash; everyone else gets today's behaviour. The nav/footer are given
   stable names so they hold still while the page body crosses over. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.28s var(--ease-aspen) both; }
::view-transition-new(root) { animation: vt-in 0.4s var(--ease-aspen) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.nav { view-transition-name: site-nav; }
.footer { view-transition-name: site-footer; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--warm-ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; }
img, svg { display: block; max-width: 100%; }

a { color: var(--steel-strong); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--aspen-ink); }

::selection { background: var(--mist); color: var(--aspen-ink); }

:focus-visible { outline: 2px solid var(--steel-strong); outline-offset: 2px; border-radius: 2px; }

.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Layout primitives --- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
@media (min-width: 640px) { .section { padding: 7rem 0; } }

.bg-bone { background: var(--bone); }
.bg-ivory { background: var(--ivory); }
.bg-haze { background: var(--haze); }
.bg-mist { background: var(--mist); }
.bg-sand { background: var(--sand); }
.bg-navy { background: var(--ink-deep); color: var(--on-ink); }

/* --- Type --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brass-deep);
  margin: 0 0 1.25rem;
}
.eyebrow.on-dark { color: var(--brass); }

.headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--aspen-ink);
}
.headline.on-dark { color: var(--on-ink); }

.h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--aspen-ink);
}

.lead { font-size: 1.1875rem; line-height: 1.7; color: var(--warm-muted); }
.muted { color: var(--warm-muted); }
.measure { max-width: 42rem; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1.0625rem;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-sm { padding: 0.65rem 1.25rem; font-size: 0.95rem; }
.btn-primary { background: var(--aspen-ink); color: var(--on-ink); box-shadow: inset 0 -2px 0 var(--brass); }
.btn-primary:hover { background: var(--steel); color: var(--on-ink); }
.btn-secondary { background: transparent; border-color: var(--aspen-ink); color: var(--aspen-ink); }
.btn-secondary:hover { background: var(--aspen-ink); color: var(--on-ink); }
.btn-primary.on-dark { background: var(--bone); color: var(--aspen-ink); box-shadow: none; }
.btn-primary.on-dark:hover { background: var(--mist); }
.btn-secondary.on-dark { border-color: rgba(244,241,234,0.4); color: var(--on-ink); }
.btn-secondary.on-dark:hover { background: var(--on-ink); color: var(--aspen-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* --- Header / nav --- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(246,243,236,0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226,220,208,0.7);
}
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand img { height: 36px; width: auto; }
.wordmark { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.08em; color: var(--aspen-ink); white-space: nowrap; }
.wordmark span { color: var(--steel); }
/* The nav has to survive translation. Somali and Hmong labels run 30-60% longer
   than English ("Contact" -> "Nala soo xiriir"), and without nowrap the text wraps
   INSIDE each link: the flex row stays one line while the links themselves go tall
   and skinny. English already did this at 1024px, rendering "How It / Works" stacked.
   nowrap forbids that; the fluid gap and font buy back the width it costs. */
.nav-links { display: none; align-items: center; gap: clamp(0.85rem, 1.7vw, 2rem); list-style: none; padding: 0; margin: 0; }
.nav-links a, .nav-links .nav-drop-toggle { white-space: nowrap; }
.nav-links a { color: rgba(26,29,36,0.8); font-size: clamp(0.875rem, 0.55vw + 0.52rem, 0.95rem); }
.nav-links a:hover { color: var(--steel-strong); }
.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.nav-phone { display: none; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--warm-muted); }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--aspen-ink); cursor: pointer; }
.mobile-menu { display: none; border-top: 1px solid var(--hairline); background: var(--bone); padding: 0.5rem 1.5rem 1rem; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 0.75rem 0; font-size: 1.05rem; color: var(--warm-ink); }
.mobile-menu .mobile-label { display: block; margin-top: 0.5rem; padding: 0.75rem 0 0.25rem; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass-deep); border-top: 1px solid var(--hairline); }

/* --- Nav dropdown (Forms) --- */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 0.7rem; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 0; padding: 0; font: inherit; font-size: 0.95rem; color: rgba(26, 29, 36, 0.8); cursor: pointer; }
.nav-drop-toggle:hover { color: var(--steel-strong); }
.nav-drop-toggle svg { transition: transform 0.2s ease; }
.nav-dropdown:hover .nav-drop-toggle svg, .nav-dropdown.open .nav-drop-toggle svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 0.6rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 190px; padding: 0.4rem;
  background: var(--ivory); border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 2px 4px rgba(28, 44, 84, 0.04), 0 14px 32px rgba(28, 44, 84, 0.10);
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 60;
}
.nav-dropdown:hover .nav-drop-menu, .nav-dropdown.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop-menu a { display: block; padding: 0.6rem 0.85rem; border-radius: 6px; font-size: 0.95rem; color: var(--warm-ink); white-space: nowrap; }
.nav-drop-menu a:hover { background: var(--haze); color: var(--aspen-ink); }
@media (prefers-reduced-motion: reduce) { .nav-drop-toggle svg, .nav-drop-menu { transition: none; } }

/* --- Language switcher (in-place: swaps text, never navigates) --- */
.lang-switch .nav-drop-toggle { gap: 0.4rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm-muted); }
.lang-switch .nav-drop-toggle:hover { color: var(--aspen-ink); }
.lang-switch .nav-drop-menu { min-width: 160px; }
/* the menu items are <button> now, so they need the <a> treatment */
.nav-drop-menu button[data-lang] {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 0.6rem 0.85rem; border-radius: 6px; font: inherit; font-size: 0.95rem;
  color: var(--warm-ink); white-space: nowrap;
}
.nav-drop-menu button[data-lang]:hover { background: var(--haze); color: var(--aspen-ink); }
.nav-drop-menu button[data-lang][aria-current="true"] { color: var(--brass-deep); background: var(--brass-pale); }
.mobile-menu button[data-lang] {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 0.75rem 0; font: inherit; font-size: 1.05rem; color: var(--warm-ink);
}
.mobile-menu button[data-lang][aria-current="true"] { color: var(--brass-deep); }

/* --- Intake forms (demo) --- */
.intake-intro { max-width: 46rem; }
.intake-form { margin-top: 2.5rem; }
.intake-section { border: 1px solid var(--hairline); border-radius: 12px; background: var(--ivory); padding: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .intake-section { padding: 2rem; } }
.intake-section .sec-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.5rem; }
.intake-section .sec-head h2 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--aspen-ink); }
.intake-section .sec-head .sec-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--brass-deep); }
.intake-section .sec-head .sec-note { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-deep); background: var(--brass-pale); border-radius: 999px; padding: 0.3rem 0.7rem; }
.field .hint-inline { font-weight: 400; color: var(--warm-faint); }
.intake-grid { display: grid; gap: 1.1rem 1.5rem; }
@media (min-width: 680px) { .intake-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .intake-grid.three { grid-template-columns: 1fr 1fr 1fr; } }
.intake-grid .span2 { grid-column: 1 / -1; }
@media (min-width: 1040px) { .intake-grid.three .span-all { grid-column: 1 / -1; } }
.chip-toggles { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-toggle span { display: inline-block; padding: 0.5rem 1.1rem; border: 1px solid var(--hairline); border-radius: 999px; font-size: 0.9rem; color: var(--warm-muted); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.chip-toggle input:checked + span { background: var(--brass-pale); border-color: var(--brass); color: var(--brass-deep); }
.chip-toggle input:focus-visible + span { outline: 2px solid var(--steel-strong); outline-offset: 2px; }
.radio-row { display: flex; gap: 1.5rem; align-items: center; padding-top: 0.3rem; }
.radio-row label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 1rem; color: var(--warm-ink); }
.radio-row input { width: auto; }
.check-inline { display: flex; align-items: center; gap: 0.55rem; padding-top: 1.6rem; }
.check-inline input { width: auto; }
.check-inline label { margin: 0; }
.is-submitted .intake-form { display: none; }
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}
@media (min-width: 768px) { .nav-phone { display: inline-flex; } }
/* 1024-1199 is the squeeze: the full link row has just arrived but the viewport is
   still narrow. The mono phone number costs ~140px there and is the least essential
   thing in the bar (the Enroll button is right beside it, and the sticky call bar
   covers small screens). Drop it in that band only, in every language. */
@media (min-width: 1024px) and (max-width: 1199px) { .nav-phone { display: none; } }
@media (max-width: 639px) { .wordmark { display: none; } }

/* sticky mobile call bar */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--aspen-ink); color: var(--on-ink);
  padding: 0.85rem; font-weight: 500; font-size: 0.95rem;
  box-shadow: inset 0 2px 0 var(--brass);
}
.callbar:hover { color: var(--on-ink); }
@media (min-width: 1024px) { .callbar { display: none; } }

/* --- Circuit current spine (desktop) --- */
.spine { position: fixed; left: 2rem; top: 0; z-index: 30; width: 1px; height: 100vh; pointer-events: none; display: none; }
.spine .track { position: absolute; inset: 0; background: rgba(203,214,230,0.5); }
.spine .current {
  position: absolute; inset: 0 0 auto 0; height: 100%; transform-origin: top; transform: scaleY(0);
  background: linear-gradient(to bottom, var(--sky), var(--sky), var(--brass));
  filter: drop-shadow(0 1px 5px var(--brass));
}
@media (min-width: 1024px) { .spine { display: block; } }

/* --- Hero --- */
.hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 4rem) 0 5rem; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.hero-copy { max-width: 36rem; }
.hero-copy .h1 { margin-top: 0; }
.hero-sub { margin-top: 1.75rem; max-width: 32rem; font-size: 1.1875rem; line-height: 1.7; color: var(--warm-muted); }
.hero-cta { margin-top: 2.25rem; }
.hero-art { justify-self: center; }
.hero-art .panel {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; width: clamp(280px, 40vw, 420px);
  border-radius: 16px; border: 1px solid var(--hairline-cool); background: var(--haze);
}
.hero-art svg { width: 78%; height: auto; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
  .hero-art { justify-self: end; }
}

/* --- Page hero (inner pages) --- */
.page-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 4rem) 0 4rem; }
.page-hero .h1 { max-width: 56rem; }
.page-hero .lead { margin-top: 1.75rem; max-width: 44rem; }
.page-hero .btn-row { margin-top: 2.25rem; }
@media (min-width: 640px) { .page-hero { padding: calc(var(--nav-h) + 6rem) 0 6rem; } }

/* --- Trust strip --- */
.trust { border-top: 1px solid var(--hairline-cool); border-bottom: 1px solid var(--hairline-cool); background: var(--haze); }
.trust ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.75rem; list-style: none; padding: 1.25rem 0; margin: 0; }
.trust li { display: flex; align-items: center; gap: 1.75rem; }
.trust .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--brass); }
.trust span.label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--aspen-ink); }

/* --- Generic grids + cards --- */
.grid { display: grid; gap: 1.5rem; }
.cols-2 { grid-template-columns: 1fr; }
.cols-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.split { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .split { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } .split.even { grid-template-columns: 1fr 1fr; } }

.card { border-radius: 12px; border: 1px solid var(--hairline); background: var(--ivory); padding: 2rem; }
.card.bone { background: var(--bone); }
.card h3 { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.2; color: var(--aspen-ink); }
.card p { margin-top: 1rem; color: rgba(26,29,36,0.85); }
.tag { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass-deep); }

.note { border-radius: 12px; border: 1px solid var(--hairline-cool); background: var(--haze); padding: 1.5rem; font-size: 0.95rem; line-height: 1.7; color: rgba(26,29,36,0.85); }
.note b { color: var(--aspen-ink); }

/* checklist */
.checklist { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.9rem; }
.checklist.two { grid-template-columns: 1fr; }
@media (min-width: 640px) { .checklist.two { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.checklist li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.95rem; color: var(--warm-ink); }
.checklist .check { color: var(--brass); flex: none; margin-top: 0.15rem; }

/* numbered blocks (why / steps) */
.numbered { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 768px) { .numbered.three { grid-template-columns: repeat(3,1fr); } .numbered.two { grid-template-columns: repeat(2,1fr); } }
.num { font-family: var(--font-mono); color: var(--brass-deep); font-size: 0.85rem; }
.numbered h3 { margin-top: 0.5rem; font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; color: var(--aspen-ink); }
.numbered p { margin-top: 0.75rem; color: rgba(26,29,36,0.85); }

/* values definition list */
.values { display: grid; gap: 2rem 3rem; margin-top: 3rem; }
@media (min-width: 768px) { .values { grid-template-columns: 1fr 1fr; } }
.value { border-top: 1px solid var(--hairline); padding-top: 1.25rem; }
.value dt { font-family: var(--font-serif); font-size: 1.5rem; color: var(--aspen-ink); }
.value dd { margin: 0.5rem 0 0; color: rgba(26,29,36,0.85); }

/* quotes / testimonials */
.pull { border-left: 2px solid var(--brass); padding-left: 1.25rem; font-family: var(--font-serif); font-style: italic; font-size: 1.375rem; line-height: 1.5; color: var(--aspen-ink); }
.quote-list { display: grid; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.quote-list li { border-left: 2px solid var(--brass); padding-left: 1.25rem; font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--aspen-ink); }
.testimonial { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--hairline); background: var(--ivory); padding: 1.75rem; }
.testimonial blockquote { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.5; color: var(--aspen-ink); }
.testimonial figcaption { margin-top: 1.25rem; font-size: 0.9rem; color: var(--warm-muted); }

/* --- CTA banner --- */
.cta-banner { position: relative; overflow: hidden; border-radius: 16px; background: var(--aspen-ink); color: var(--on-ink); padding: 4rem 1.5rem; text-align: center; }
.cta-banner::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: rgba(176,138,79,0.7); }
.cta-banner .headline { margin: 0 auto; max-width: 48rem; }
.cta-banner p { margin: 1.25rem auto 0; max-width: 34rem; color: var(--on-ink-muted); }
.cta-banner .btn-row { margin-top: 2.25rem; justify-content: center; }
@media (min-width: 640px) { .cta-banner { padding: 5rem 4rem; } }

/* --- Services list --- */
.services-grid { display: grid; gap: 3rem; margin-top: 3.5rem; }
@media (min-width: 768px) { .services-grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.service .num { display: block; }
.service h3 { margin-top: 0.5rem; font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; color: var(--aspen-ink); }
.service p { margin-top: 0.75rem; color: rgba(26,29,36,0.85); }
.service-forms { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .service-forms { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.service-forms li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; color: var(--warm-muted); }
.service-forms .dot { margin-top: 0.55rem; width: 4px; height: 4px; border-radius: 999px; background: var(--brass); flex: none; }

/* compliance */
.compliance { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 1024px) { .compliance { grid-template-columns: 1fr 1fr; } }
.problems { margin: 1.25rem 0 0; padding-left: 0; list-style: none; display: grid; gap: 0.75rem; }
.problems li { display: flex; gap: 0.75rem; font-size: 0.95rem; line-height: 1.6; color: rgba(26,29,36,0.9); }
.problems .num { flex: none; }

/* timeline */
.timeline { position: relative; margin-top: 3.5rem; padding-left: 2.5rem; }
.timeline .rail { position: absolute; left: 5px; top: 4px; bottom: 2rem; width: 12px; pointer-events: none; }
.timeline ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 3rem; }
.timeline li { position: relative; }
.step-node { position: absolute; left: -2.5rem; top: 6px; width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--ivory); background: var(--sky); }
.timeline h3 { margin-top: 0.5rem; font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; color: var(--aspen-ink); }
.timeline p { margin-top: 0.75rem; max-width: 42rem; color: rgba(26,29,36,0.85); }
.chip { display: inline-block; margin-top: 0.75rem; border-radius: 6px; background: var(--brass-pale); color: var(--brass-deep); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; padding: 0.25rem 0.75rem; }
@media (min-width: 640px) { .timeline { padding-left: 3rem; } .timeline .rail { left: 7px; } .step-node { left: -3rem; } }

/* --- Contact --- */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } }
.contact-info { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; }
.contact-info li { display: flex; align-items: flex-start; gap: 0.9rem; }
.contact-info .ico { color: var(--steel); flex: none; margin-top: 0.15rem; }
.contact-info .k { font-weight: 500; color: var(--aspen-ink); }
.contact-info .v { color: var(--warm-muted); }
.departments { list-style: none; padding: 0; margin: 2rem 0 0; }
.departments li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 0; border-top: 1px solid var(--hairline); }
.departments li:last-child { border-bottom: 1px solid var(--hairline); }
.departments .label { font-size: 1.0625rem; color: var(--warm-ink); }
.departments a { font-family: var(--font-mono); font-size: 0.85rem; }

/* form */
.form { border-radius: 12px; border: 1px solid var(--hairline); background: var(--ivory); padding: 1.5rem; }
@media (min-width: 640px) { .form { padding: 2rem; } }
.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 500; color: var(--aspen-ink); }
.field .req { color: var(--brass-deep); }
.field input, .field select, .field textarea {
  width: 100%; border-radius: 8px; border: 1px solid var(--hairline); background: var(--bone);
  padding: 0.75rem 1rem; font: inherit; font-size: 1rem; color: var(--warm-ink);
}
.field input::placeholder, .field textarea::placeholder { color: var(--warm-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--steel-strong); }
.field.full { margin-top: 1.25rem; }
.field textarea { resize: vertical; }
.form button { margin-top: 1.5rem; }
.form .fine { margin-top: 1rem; font-size: 0.85rem; color: var(--warm-muted); }
.form-success { display: none; flex-direction: column; align-items: flex-start; gap: 1rem; border-radius: 12px; border: 1px solid var(--hairline); background: var(--bone); padding: 2rem; }
.form-success .badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--brass-pale); color: var(--brass-deep); }
.form-success h3 { font-family: var(--font-serif); font-size: 1.6rem; color: var(--aspen-ink); }
.form-success p { color: rgba(26,29,36,0.85); }
.is-submitted .form { display: none; }
.is-submitted .form-success { display: flex; }

/* --- Comparison table --- */
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--hairline); }
table.compare { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--ivory); text-align: left; }
table.compare thead tr { background: var(--aspen-ink); color: var(--on-ink); }
table.compare th[scope="col"] { padding: 1rem 1.25rem; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
table.compare tbody tr:nth-child(even) { background: rgba(246,243,236,0.6); }
table.compare th[scope="row"] { padding: 1rem 1.25rem; vertical-align: top; font-size: 0.95rem; font-weight: 600; color: var(--aspen-ink); border-top: 1px solid var(--hairline); width: 28%; }
table.compare td { padding: 1rem 1.25rem; vertical-align: top; font-size: 0.95rem; line-height: 1.55; color: rgba(26,29,36,0.85); border-top: 1px solid var(--hairline); }

/* --- Article / prose --- */
.article { max-width: 68ch; margin: 0 auto; }
.article .lead-p { font-size: 1.25rem; line-height: 1.7; color: var(--aspen-ink); }
.article h2 { margin-top: 3.5rem; font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.2; color: var(--aspen-ink); }
.article h3 { margin-top: 2.25rem; font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.2; color: var(--aspen-ink); }
.article p { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.8; color: rgba(26,29,36,0.9); }
.article ul, .article ol { margin-top: 1.25rem; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.article ul li { display: flex; gap: 0.75rem; font-size: 1.0625rem; line-height: 1.7; color: rgba(26,29,36,0.9); }
.article ul li::before { content: ""; flex: none; margin-top: 0.65rem; width: 6px; height: 6px; border-radius: 999px; background: var(--brass); }
.article ol { counter-reset: c; }
.article ol li { display: flex; gap: 0.85rem; font-size: 1.0625rem; line-height: 1.7; color: rgba(26,29,36,0.9); counter-increment: c; }
.article ol li::before { content: counter(c, decimal-leading-zero); font-family: var(--font-mono); color: var(--brass-deep); flex: none; }
.article .back { margin-top: 3.5rem; border-top: 1px solid var(--hairline); padding-top: 1.75rem; display: inline-flex; }

/* resource cards */
.guide-grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .guide-grid { grid-template-columns: 1fr 1fr; } }
.guide-card { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--hairline); background: var(--ivory); padding: 1.75rem; }
.guide-card:hover { border-color: var(--steel-strong); }
.guide-card h2 { margin-top: 0.75rem; font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.2; color: var(--aspen-ink); }
.guide-card p { margin-top: 0.75rem; flex: 1; font-size: 1rem; line-height: 1.65; color: rgba(26,29,36,0.85); }
.guide-card .more { margin-top: 1.25rem; font-weight: 500; color: var(--steel-strong); }

/* --- FAQ ---
   Answers stay visible rather than collapsing into an accordion. Two reasons:
   a stressed caregiver scanning for one fact should not have to hunt-and-click,
   and visible text is what Google and AI assistants extract most reliably. */
.faq { margin-top: 2.5rem; display: grid; gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.faq-item { background: var(--bone); padding: 1.75rem; }
.faq-item h3 { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.3;
  color: var(--aspen-ink); font-weight: 500; }
.faq-item p { margin-top: 0.6rem; font-size: 1rem; line-height: 1.7; color: rgba(26,29,36,0.85); max-width: 68ch; }
.faq-item a { color: var(--steel-strong); text-decoration: underline; text-underline-offset: 2px; }
.faq-item a:hover { color: var(--aspen-ink); }
@media (min-width: 900px) { .faq-item { padding: 2rem 2.25rem; } }

/* --- Footer --- */
.footer { background: var(--ink-deep); color: var(--on-ink-muted); }
.footer .topline { height: 1px; background: rgba(176,138,79,0.6); }
.footer-inner { padding: 5rem 0; }
.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand .wordmark { color: var(--on-ink); }
.footer-brand .wordmark span { color: var(--sky-light); }
.footer-brand p { margin-top: 1rem; font-size: 0.95rem; line-height: 1.7; color: var(--on-ink-muted); max-width: 24rem; }
.footer h4 { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass); margin: 0; }
.footer ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.6rem; }
.footer ul a { font-size: 0.95rem; color: var(--on-ink-muted); }
.footer ul a:hover { color: var(--on-ink); }
.footer-legal { margin-top: 4rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 1rem; font-size: 0.85rem; }
.footer-legal .mono { font-family: var(--font-mono); }
.legal-left { display: flex; flex-direction: column; gap: 0.4rem; }
@media (min-width: 640px) { .legal-left { flex-direction: row; align-items: center; gap: 1.25rem; } }
.footer-legal .credit { color: var(--on-ink-muted); }
.footer-legal .credit a { color: var(--on-ink-muted); text-decoration: none; border-bottom: 1px solid rgba(176,138,79,0.45); padding-bottom: 1px; transition: color var(--dur) var(--ease-aspen), border-color var(--dur) var(--ease-aspen); }
.footer-legal .credit a:hover { color: var(--brass); border-bottom-color: var(--brass); }
@media (min-width: 640px) { .footer-legal { flex-direction: row; align-items: center; justify-content: space-between; } }

/* --- Reveal animation base (JS adds .reveal-ready when motion is on) --- */
.reveal-ready [data-reveal] { opacity: 0; }
.reveal-ready [data-hero-headline], .reveal-ready [data-reveal-headline] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready [data-reveal],
  .reveal-ready [data-hero-headline],
  .reveal-ready [data-reveal-headline] { opacity: 1 !important; }
  .spine { display: none; }
}

/* ==========================================================================
   v2: "Next Level" layer (BLUEPRINT.md): hero media, marquee, stats,
   image breaks, avatars, checker. Tokens unchanged from DESIGN.md.
   ========================================================================== */

/* --- Hero media (photo-led hero) --- */
.hero-media { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); background: var(--sand); width: 100%; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 4.6; display: block; }
.hero-media .badge-lotus {
  position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: 0.6rem;
  background: rgba(252,250,244,0.92); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 0.6rem 0.9rem; backdrop-filter: blur(6px);
}
.hero-media .badge-lotus svg { width: 26px; height: 26px; }
.hero-media .badge-lotus span { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--aspen-ink); line-height: 1.4; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 0.95fr; }
  .hero-media img, .hero-media video { aspect-ratio: 4 / 4.4; }
}

/* --- Hero seal (minted brass coin) --- */
.hero-seal { width: clamp(300px, 34vw, 420px); margin-inline: auto; }
.hero-seal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 38px rgba(28, 44, 84, 0.16)); }

/* Split hero: left copy, a medium readable seal on the right, vertically
   centered so the seal shortens the hero instead of stacking below the CTAs. */
.hero-split { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 3rem) 0 3.5rem; }
.hero-split-grid { display: grid; gap: 2.75rem; align-items: center; }
.hero-split .hero-copy { max-width: 40rem; }
.hero-split .hero-art { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }

/* Hero photo with the seal stamped on its corner. The photograph carries the
   warmth; the seal carries the authority — which is what a seal is actually
   for. It is deliberately small here: at stamp scale the engraving reads as
   fine minted texture, not something you are meant to stop and read. */
.hero-photo-wrap { position: relative; width: 100%; }
.hero-photo { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); background: var(--sand); }
.hero-photo img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-split .hero-seal.seal-stamp { position: absolute; right: -16px; bottom: -16px; width: 128px; margin: 0; z-index: 2; }
.hero-split .hero-seal.seal-stamp svg { filter: drop-shadow(0 8px 18px rgba(28, 44, 84, 0.30)); }
@media (min-width: 900px) { .hero-split .hero-seal.seal-stamp { right: -26px; bottom: -26px; width: 158px; } }
.seal-caption {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-muted);
  line-height: 1.7;
}
@media (min-width: 900px) {
  .hero-split-grid { grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; }
  .hero-split .hero-art { justify-self: end; }
}

/* Result stamp: the same seal certifying the eligibility answer */
.result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.result-stamp { flex: none; width: 108px; transform: rotate(-12deg); margin-top: 0.25rem; }
.result-stamp svg { width: 100%; height: auto; filter: drop-shadow(0 6px 12px rgba(28, 44, 84, 0.15)); }
@media (max-width: 639px) { .result-stamp { width: 84px; } }
#coin-glint { animation: coin-glint 8.5s linear infinite; }
@keyframes coin-glint {
  0% { transform: translateX(0); }
  16% { transform: translateX(760px); }
  100% { transform: translateX(760px); }
}
#coin-ring {
  transform-box: view-box;
  transform-origin: 240px 240px;
  animation: coin-turn 60s linear infinite;
}
@keyframes coin-turn { to { transform: rotate(360deg); } }
@media (min-width: 1024px) { .hero-seal { margin-inline: 0; } }
@media (prefers-reduced-motion: reduce) {
  #coin-glint { animation: none; opacity: 0; }
  #coin-ring { animation: none; }
}

/* --- Trust marquee --- */
.trust { overflow: hidden; }
.trust .track { display: flex; width: max-content; align-items: center; padding: 1.1rem 0; animation: marquee 30s linear infinite; }
.trust .track:hover { animation-play-state: paused; }
.trust ul { flex: none; display: flex; align-items: center; gap: 3rem; list-style: none; padding: 0 1.5rem 0 1.5rem; margin: 0; }
.trust li { display: flex; align-items: center; gap: 3rem; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust .track { animation: none; } }

/* --- Photo duo (who we serve) --- */
.photo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.25rem; }
.photo-duo figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); }
.photo-duo img { width: 100%; height: 100%; object-fit: cover; object-position: right top; aspect-ratio: 16 / 9; }
.photo-duo figure:nth-child(2) { transform: translateY(1.75rem); }

/* --- Stats band --- */
.stats { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.stat .val { font-family: var(--font-serif); font-variant-numeric: tabular-nums; font-size: clamp(3rem, 6vw, 4.75rem); line-height: 1; color: var(--aspen-ink); }
.stat .val .unit { font-size: 0.5em; color: var(--brass-deep); }
.stat .cap { margin-top: 0.75rem; font-size: 0.95rem; color: var(--warm-muted); max-width: 22rem; }

/* --- Full-bleed image break --- */
.break { position: relative; overflow: hidden; height: clamp(320px, 52vh, 560px); }
.break img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
.break .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,32,61,0.45), rgba(20,32,61,0) 55%); z-index: 1; }
/* Depth parallax: the canvas replaces the <img> only once WebGL is confirmed
   working, so the photograph is never missing if anything fails. */
.break .depth-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.break.depth-on img { visibility: hidden; }
.break figcaption { position: absolute; left: 0; right: 0; bottom: 2rem; }
.break figcaption p { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.75rem); color: var(--on-ink); max-width: 34rem; }

/* --- Checklist ignition (comet pass) --- */
.checklist li .check { transition: color 0.45s ease, transform 0.45s ease, filter 0.45s ease; }
.checklist li.is-lit .check { color: var(--brass); transform: scale(1.18); filter: drop-shadow(0 0 5px rgba(176,138,79,0.7)); }

/* --- Testimonial avatars --- */
.testimonial figcaption { display: flex; align-items: center; gap: 0.85rem; }
.testimonial .avatar { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; border: 1px solid var(--hairline); flex: none; }
.testimonial .who b { display: block; font-weight: 600; color: var(--aspen-ink); font-size: 0.95rem; }

/* --- Checker entry module (homepage) --- */
.check-cta { display: grid; overflow: hidden; border-radius: 16px; border: 1px solid var(--hairline); background: var(--ivory); }
@media (min-width: 900px) { .check-cta { grid-template-columns: 1.05fr 1fr; } }
.check-cta .copy { padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
@media (min-width: 900px) { .check-cta .copy { padding: 3.5rem 3rem; } }
.check-cta .copy .headline { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.check-cta .copy p { margin-top: 1rem; color: rgba(26,29,36,0.85); max-width: 30rem; }
.check-cta .copy .btn { margin-top: 1.75rem; }
.check-cta .photo { min-height: 260px; }
.check-cta .photo img { width: 100%; height: 100%; object-fit: cover; object-position: right top; }

/* --- Atmosphere: paper grain, light, one watermark --- */
/* Whisper of film grain over the whole page; content scrolls beneath it.
   The grain TICKS rather than drifts: it re-seeds in discrete jumps ~20x/sec
   (kprverse re-seeds its noise tile at 20Hz — quantised noise reads as film,
   continuous noise reads as a screensaver). The layer is oversized and moved
   with transform only, so every tick is a GPU composite, not a repaint —
   which keeps it honest on the mid-range phones our audience actually uses.
   This layer is also the site's dither: it sits above every surface, so the
   navy blocks and the coin's brass gradient get broken up for free. */
body::after {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grain-tick 0.5s steps(1) infinite;
}
@keyframes grain-tick {
  0%   { transform: translate3d(0, 0, 0); }
  10%  { transform: translate3d(-2%, -3%, 0); }
  20%  { transform: translate3d(-4%, 2%, 0); }
  30%  { transform: translate3d(2%, -4%, 0); }
  40%  { transform: translate3d(-3%, 3%, 0); }
  50%  { transform: translate3d(-5%, -2%, 0); }
  60%  { transform: translate3d(4%, 1%, 0); }
  70%  { transform: translate3d(-1%, 4%, 0); }
  80%  { transform: translate3d(3%, -1%, 0); }
  90%  { transform: translate3d(-4%, -4%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* Soft light falling on the cool mist bands: felt, not seen. */
.section.bg-mist {
  background-color: var(--mist);
  background-image: radial-gradient(120% 90% at 15% 0%, rgba(252, 250, 244, 0.5), rgba(252, 250, 244, 0) 55%);
}

/* The single watermark moment: the lotus, huge and near-invisible. */
.watermark { position: relative; overflow: hidden; }
.watermark::before {
  content: "";
  position: absolute;
  right: -170px;
  bottom: -180px;
  width: 680px;
  height: 612px;
  background: url("../assets/aspen-mark.png") no-repeat center / contain;
  opacity: 0.05;
  transform: rotate(-8deg);
  pointer-events: none;
}
.watermark > .container { position: relative; }

/* --- 404 --- */
.notfound { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .notfound { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; } }
.nf-art { justify-self: center; width: clamp(220px, 30vw, 330px); }
.nf-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 34px rgba(28, 44, 84, 0.16)); }
#nf-ring { transform-box: view-box; transform-origin: 220px 220px; animation: coin-turn 60s linear infinite; }
@media (prefers-reduced-motion: reduce) { #nf-ring { animation: none; } }
.nf-links { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 0; }
.nf-links li { border-top: 1px solid var(--hairline); }
.nf-links li:last-child { border-bottom: 1px solid var(--hairline); }
.nf-links a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; padding: 1rem 0.25rem; transition: padding 0.3s var(--ease-aspen), background 0.3s var(--ease-aspen); }
.nf-links a b { font-weight: 600; color: var(--aspen-ink); font-size: 1.0625rem; }
.nf-links a span { font-size: 0.95rem; color: var(--warm-muted); }
.nf-links a:hover { padding-left: 0.9rem; background: var(--ivory); }

/* --- Service area county list --- */
.county-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.county-list li { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--warm-muted); background: var(--bone); border: 1px solid var(--hairline); border-radius: 6px; padding: 0.4rem 0.7rem; transition: color 0.2s ease, border-color 0.2s ease; }
.county-list li:hover { color: var(--aspen-ink); border-color: var(--hairline-cool); }

/* --- In-section media band (photo + short caption, never a hero) --- */
.media-split { display: grid; gap: 2rem; align-items: center; }
.media-split .m-fig { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); background: var(--sand); }
.media-split .m-fig img { width: 100%; height: 100%; object-fit: cover; object-position: right top; aspect-ratio: 16 / 9; display: block; }
.media-split .m-copy .eyebrow { margin-bottom: 1rem; }
.media-split .m-copy h3 { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; color: var(--aspen-ink); }
.media-split .m-copy p { margin-top: 1rem; color: rgba(26, 29, 36, 0.85); max-width: 34rem; }
@media (min-width: 900px) {
  .media-split { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .media-split.rev .m-fig { order: 2; }
}

/* --- Cardified text blocks --- */
.numbered > div, .values .value, .service {
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--ivory);
  padding: 2rem;
}
.values .value { padding-top: 2rem; }
.values .value dd { margin-top: 0.75rem; }
.numbered { gap: 1.5rem; }
.values { gap: 1.5rem; }
.services-grid { gap: 1.5rem; }

/* --- Card hover: lift + gradient shine (one system, everywhere) --- */
.card, .testimonial, .guide-card, .numbered > div, .values .value, .service, .check-cta {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease-aspen), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card:hover, .testimonial:hover, .guide-card:hover, .numbered > div:hover, .values .value:hover, .service:hover, .check-cta:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-cool);
  box-shadow: 0 2px 4px rgba(28, 44, 84, 0.04), 0 16px 36px rgba(28, 44, 84, 0.09);
}
.guide-card:hover { border-color: var(--steel-strong); }
.card::after, .testimonial::after, .guide-card::after, .numbered > div::after, .values .value::after, .service::after, .check-cta::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -65%;
  width: 55%;
  background: linear-gradient(100deg, rgba(252, 250, 244, 0) 0%, rgba(252, 250, 244, 0.65) 45%, rgba(232, 220, 196, 0.35) 60%, rgba(252, 250, 244, 0) 100%);
  transform: skewX(-16deg);
  pointer-events: none;
  z-index: 2;
}
.card:hover::after, .testimonial:hover::after, .guide-card:hover::after, .numbered > div:hover::after, .values .value:hover::after, .service:hover::after, .check-cta:hover::after {
  transform: translateX(300%) skewX(-16deg);
  transition: transform 0.9s var(--ease-aspen);
}
@media (prefers-reduced-motion: reduce) {
  .card, .testimonial, .guide-card, .numbered > div, .values .value, .service, .check-cta { transition: none; }
  .card:hover, .testimonial:hover, .guide-card:hover, .numbered > div:hover, .values .value:hover, .service:hover, .check-cta:hover { transform: none; }
  .card::after, .testimonial::after, .guide-card::after, .numbered > div::after, .values .value::after, .service::after, .check-cta::after { display: none; }
}

/* --- Brass ink cursor trail (navy sections + footer) --- */
.footer { position: relative; overflow: hidden; }
.ink-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.cta-banner > :not(.ink-canvas), .footer > :not(.ink-canvas), .bg-navy > :not(.ink-canvas) { position: relative; z-index: 1; }

/* --- Eligibility checker page --- */
.quiz-shell { max-width: 46rem; margin: 0 auto; }
.quiz-progress { height: 2px; background: var(--hairline); border-radius: 999px; overflow: hidden; margin-bottom: 3rem; }
.quiz-progress .bar { height: 100%; width: 0%; background: linear-gradient(to right, var(--sky), var(--brass)); transition: width 0.45s var(--ease-aspen); }
.q-step { display: none; }
.q-step.active { display: block; animation: qin 0.5s var(--ease-aspen); }
@keyframes qin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .q-step.active { animation: none; } }
.q-step .q-num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-deep); }
.q-step h2 { margin-top: 0.75rem; font-family: var(--font-serif); font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; color: var(--aspen-ink); }
.q-step .hint { margin-top: 0.75rem; color: var(--warm-muted); }
.opts { display: grid; gap: 0.85rem; margin-top: 2.25rem; }
@media (min-width: 640px) { .opts { grid-template-columns: 1fr 1fr; } }
.opt {
  display: flex; align-items: center; gap: 0.9rem; text-align: left; width: 100%;
  border: 1px solid var(--hairline); border-radius: 12px; background: var(--ivory);
  padding: 1.25rem 1.4rem; font: inherit; font-size: 1.0625rem; color: var(--warm-ink); cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.opt:hover { border-color: var(--steel-strong); background: var(--haze); }
.opt:active { transform: scale(0.985); }
.opt .glyph { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--brass-pale); color: var(--brass-deep); }
.q-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 2rem; border: 0; background: none; font: inherit; font-size: 0.95rem; color: var(--warm-muted); cursor: pointer; }
.q-back:hover { color: var(--aspen-ink); }
.q-result .eyebrow { margin-bottom: 1rem; }
.q-result .photo { border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); margin-top: 2.5rem; }
.q-result .photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: right top; }
.q-result .lead-form { margin-top: 2.5rem; }