/* ==========================================================================
   HEALTHSPAN BY DESIGN — Funnel Design System
   Dr. Joel Wussow, MD · hslp.andrespreschel.com
   Foundation: self-hosted fonts · design tokens · base · motion
   Authored hand (no build step). Brand palette per blueprint (locked).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. FONTS — self-hosted variable woff2 (Fraunces serif · Montserrat body)
   ---------------------------------------------------------------------------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/fraunces-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/fraunces-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;
  src:url('../fonts/fraunces-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;
  src:url('../fonts/fraunces-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/montserrat-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/montserrat-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400 600;font-display:swap;
  src:url('../fonts/montserrat-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400 600;font-display:swap;
  src:url('../fonts/montserrat-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ----------------------------------------------------------------------------
   2. DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root{
  /* — Brand palette (locked, per blueprint) — */
  --c-navy:#1E4D5C;          /* primary ink + headings */
  --c-navy-ink:#163A46;      /* deeper heading ink */
  --c-navy-deep:#0E2A33;     /* dark bands / footer */
  --c-navy-900:#0A2128;      /* deepest */
  --c-teal:#3A7A8C;          /* accent: buttons, links, checks */
  --c-teal-bright:#4E9DB0;   /* hover / highlight */
  --c-teal-700:#2F6675;      /* pressed */
  --c-teal-soft:#E7EFF1;     /* teal tint surface */
  --c-teal-mist:#F1F6F7;     /* faintest teal wash */
  --c-gold:#B98A3E;          /* premium chips / dividers (sparing) */
  --c-gold-bright:#CDA15A;
  --c-gold-soft:#F0E7D6;
  --c-bg:#FBFAF8;            /* off-white page */
  --c-surface:#F2F4F7;       /* surface tint */
  --c-surface-2:#E9EDF1;     /* deeper surface */
  --c-ink:#1E4D5C;           /* body text (navy ink) */
  --c-muted:#51607A;         /* muted text */
  --c-faint:#646E82;         /* faintest text — AA 4.5:1+ on --c-bg (was #8995A6, 2.9:1) */
  --c-white:#FFFFFF;
  --c-line:rgba(30,77,92,.12);      /* hairline on light */
  --c-line-strong:rgba(30,77,92,.20);
  --c-line-light:rgba(255,255,255,.14); /* hairline on dark */

  /* — Data / biomarker semantics — */
  --c-optimal:#228B22;
  --c-optimal-ink:#176B17;    /* AA-readable green text on light bg */
  --c-warning:#FF8C00;
  --c-warning-ink:#B35E00;    /* AA-readable amber text on light bg */
  --c-concern:#DC143C;

  /* — On-dark text — */
  --c-on-dark:#EAF1F2;
  --c-on-dark-muted:#A9C0C6;

  /* — Typography — */
  --font-heading:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.25rem;
  --text-2xl:clamp(1.375rem,1.22rem + .66vw,1.6rem);
  --text-3xl:clamp(1.6rem,1.34rem + 1.1vw,2rem);
  --text-4xl:clamp(1.9rem,1.5rem + 1.7vw,2.5rem);
  --text-5xl:clamp(2.2rem,1.66rem + 2.3vw,3.15rem);
  --text-6xl:clamp(2.55rem,1.85rem + 3vw,3.9rem);
  --text-7xl:clamp(2.9rem,2rem + 3.9vw,4.6rem);

  --lh-display:1.05;
  --lh-tight:1.12;
  --lh-snug:1.25;
  --lh-normal:1.65;
  --lh-relaxed:1.75;

  --tracking-tighter:-.03em;
  --tracking-tight:-.018em;
  --tracking-normal:0;
  --tracking-wide:.04em;
  --tracking-eyebrow:.2em;

  --weight-body:450;
  --weight-medium:550;
  --weight-semibold:650;
  --weight-bold:750;

  /* — Spacing scale — */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
  --space-32:128px;

  /* — Layout — */
  --container:1200px;
  --container-wide:1320px;
  --container-narrow:760px;
  --gutter:clamp(20px,5vw,48px);
  --section-y:clamp(64px,8vw,120px);
  --measure:66ch;

  /* — Radii — */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --r-card:18px; --r-pill:999px;

  /* — Elevation (navy-tinted, soft & premium) — */
  --shadow-xs:0 1px 2px rgba(14,42,51,.06);
  --shadow-sm:0 2px 8px rgba(14,42,51,.06),0 1px 2px rgba(14,42,51,.05);
  --shadow-md:0 10px 30px -8px rgba(14,42,51,.14),0 4px 10px -4px rgba(14,42,51,.08);
  --shadow-lg:0 28px 60px -16px rgba(14,42,51,.22),0 10px 24px -10px rgba(14,42,51,.12);
  --shadow-xl:0 40px 90px -24px rgba(14,42,51,.30);
  --shadow-cta:0 12px 28px -8px rgba(58,122,140,.45);
  --shadow-cta-hover:0 18px 40px -10px rgba(58,122,140,.55);
  --ring:0 0 0 3px rgba(58,122,140,.35);

  /* — Motion — */
  --dur-fast:160ms; --dur:300ms; --dur-slow:600ms; --dur-slower:900ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* — Z-index — */
  --z-base:1; --z-bar:80; --z-nav:100; --z-overlay:900; --z-modal:1000; --z-toast:1100;

  /* — Gradients — */
  --grad-teal:linear-gradient(135deg,var(--c-teal) 0%,var(--c-teal-bright) 100%);
  --grad-navy:linear-gradient(160deg,var(--c-navy) 0%,var(--c-navy-deep) 100%);
  --grad-gold:linear-gradient(120deg,var(--c-gold) 0%,var(--c-gold-bright) 100%);
  --grad-sheen:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
}

/* ----------------------------------------------------------------------------
   3. RESET & BASE
   ---------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;           /* offset for sticky nav anchors */
  -webkit-tap-highlight-color:transparent;
}
body{
  font-family:var(--font-body);
  font-weight:var(--weight-body);
  font-size:var(--text-base);
  line-height:var(--lh-normal);
  color:var(--c-ink);
  background:var(--c-bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
  overflow-x:hidden;
}
img,picture,svg,video{display:block;max-width:100%;height:auto;}
input,button,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
ul[role="list"],ol[role="list"]{list-style:none;padding:0;}
a{color:var(--c-teal);text-decoration:none;text-underline-offset:.18em;
  transition:color var(--dur-fast) var(--ease);}
a:hover{color:var(--c-teal-700);}
strong,b{font-weight:var(--weight-semibold);}

/* — Headings: Fraunces, optical sizing, tight & elegant — */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-optical-sizing:auto;
  font-weight:550;
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight);
  color:var(--c-navy-ink);
  text-wrap:balance;
}
h1{font-size:var(--text-6xl);line-height:var(--lh-display);letter-spacing:var(--tracking-tighter);}
h2{font-size:var(--text-5xl);}
h3{font-size:var(--text-3xl);}
h4{font-size:var(--text-2xl);}
h5{font-size:var(--text-xl);}
p{text-wrap:pretty;}
/* emphasised words in headings get a refined teal gradient (graceful fallback) */
h1 em,h2 em{color:var(--c-teal);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1 em,h2 em{background-image:linear-gradient(118deg,var(--c-teal) 10%,var(--c-teal-bright) 70%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
}

/* — Selection & focus — */
::selection{background:var(--c-navy);color:var(--c-white);}
:focus-visible{outline:2px solid var(--c-teal);outline-offset:3px;border-radius:3px;}
:focus:not(:focus-visible){outline:none;}

/* — Scrollbar (subtle, brand-tinted) — */
@supports (scrollbar-color:auto){
  html{scrollbar-color:var(--c-teal) transparent;scrollbar-width:thin;}
}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:rgba(58,122,140,.4);border-radius:99px;border:2px solid var(--c-bg);}
::-webkit-scrollbar-thumb:hover{background:var(--c-teal);}

/* ----------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   ---------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.container--wide{max-width:var(--container-wide);}
.container--narrow{max-width:var(--container-narrow);}
.section{padding-block:var(--section-y);position:relative;}
.section--tight{padding-block:clamp(48px,6vw,80px);}

/* Eyebrow / kicker */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--c-teal);
}
.eyebrow--gold{color:var(--c-gold);}
.eyebrow--on-dark{color:var(--c-teal-bright);}
.eyebrow::before{content:"";width:1.8em;height:1px;background:currentColor;opacity:.6;}
.eyebrow--center::after{content:"";width:1.8em;height:1px;background:currentColor;opacity:.6;}

/* Section heading lockup */
.lede{font-size:var(--text-lg);color:var(--c-muted);line-height:var(--lh-relaxed);max-width:60ch;}

/* Misc */
.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;}
.skip-link{position:absolute;left:50%;top:-60px;transform:translateX(-50%);z-index:var(--z-toast);
  background:var(--c-navy);color:var(--c-white);padding:.7em 1.2em;border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top var(--dur) var(--ease);}
.skip-link:focus{top:0;color:var(--c-white);}
.text-gold{color:var(--c-gold);} .text-teal{color:var(--c-teal);}
.no-wrap{white-space:nowrap;}

/* ----------------------------------------------------------------------------
   5. SCROLL-REVEAL & MOTION PRIMITIVES (JS adds .is-in)
   ---------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
  will-change:opacity,transform;}
.reveal.is-in{opacity:1;transform:none;}
.reveal-fade{opacity:0;transition:opacity var(--dur-slow) var(--ease-out);}
.reveal-fade.is-in{opacity:1;}
.reveal-scale{opacity:0;transform:scale(.96);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-spring);}
.reveal-scale.is-in{opacity:1;transform:none;}
/* Staggered children */
[data-stagger]>*{opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);}
[data-stagger].is-in>*{opacity:1;transform:none;}
[data-stagger].is-in>*:nth-child(1){transition-delay:.05s;}
[data-stagger].is-in>*:nth-child(2){transition-delay:.13s;}
[data-stagger].is-in>*:nth-child(3){transition-delay:.21s;}
[data-stagger].is-in>*:nth-child(4){transition-delay:.29s;}
[data-stagger].is-in>*:nth-child(5){transition-delay:.37s;}
[data-stagger].is-in>*:nth-child(6){transition-delay:.45s;}

@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(58,122,140,.5);}70%{box-shadow:0 0 0 14px rgba(58,122,140,0);}100%{box-shadow:0 0 0 0 rgba(58,122,140,0);}}
@keyframes shimmer{0%{background-position:-150% 0;}100%{background-position:250% 0;}}
@keyframes spinSlow{to{transform:rotate(360deg);}}

/* ----------------------------------------------------------------------------
   6. REDUCED MOTION — honor user preference fully
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .reveal,.reveal-fade,.reveal-scale,[data-stagger]>*{opacity:1 !important;transform:none !important;}
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ----------------------------------------------------------------------------
   C1. BUTTONS — one primary style (teal pill) with lift + sheen sweep
   ---------------------------------------------------------------------------- */
.btn{
  --btn-pad-y:.95em;--btn-pad-x:1.6em;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:44px;max-width:100%;
  font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-base);
  line-height:1.15;letter-spacing:.005em;text-align:center;white-space:normal;text-wrap:balance;
  padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--r-pill);
  color:var(--c-white);background:var(--grad-teal);box-shadow:var(--shadow-cta);
  overflow:hidden;isolation:isolate;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),
    filter var(--dur) var(--ease);
}
.btn::after{ /* sheen */
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-sheen);
  background-size:200% 100%;background-position:-150% 0;opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-cta-hover);color:var(--c-white);filter:saturate(1.06);}
.btn:hover::after{opacity:1;animation:shimmer .9s var(--ease) 1;}
.btn:active{transform:translateY(0) scale(.99);}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-cta),var(--ring);}
.btn .icon{width:1.1em;height:1.1em;flex:none;}
.btn--lg{--btn-pad-y:1.1em;--btn-pad-x:2em;font-size:var(--text-lg);}
.btn--sm{--btn-pad-y:.7em;--btn-pad-x:1.2em;font-size:var(--text-sm);}
.btn--block{display:flex;width:100%;}
.btn--gold{background:var(--grad-gold);box-shadow:0 12px 28px -8px rgba(185,138,62,.5);}
.btn--gold:focus-visible{box-shadow:0 12px 28px -8px rgba(185,138,62,.5),0 0 0 3px rgba(185,138,62,.35);}
.btn--ghost{background:transparent;color:var(--c-navy);box-shadow:inset 0 0 0 1.5px var(--c-line-strong);}
.btn--ghost::after{display:none;}
.btn--ghost:hover{background:var(--c-teal-mist);color:var(--c-navy);box-shadow:inset 0 0 0 1.5px var(--c-teal);transform:translateY(-2px);}
.btn--on-dark{background:var(--c-white);color:var(--c-navy);box-shadow:0 12px 30px -10px rgba(0,0,0,.4);}
.btn--on-dark:hover{color:var(--c-navy-ink);}
.btn-note{display:block;margin-top:var(--space-3);font-size:var(--text-sm);color:var(--c-muted);}
.btn-note--on-dark{color:var(--c-on-dark-muted);}

/* ----------------------------------------------------------------------------
   C2. CHIPS, BADGES, DIVIDERS, CREDENTIAL STRIP
   ---------------------------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em;border-radius:var(--r-pill);
  font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--c-navy);
  background:var(--c-white);box-shadow:inset 0 0 0 1px var(--c-line);}
.chip--gold{color:var(--c-gold);background:var(--c-gold-soft);box-shadow:inset 0 0 0 1px rgba(185,138,62,.25);}
.chip--teal{color:var(--c-teal);background:var(--c-teal-soft);box-shadow:inset 0 0 0 1px rgba(58,122,140,.2);}
.chip .icon{width:1em;height:1em;}

.badge{display:inline-flex;align-items:center;gap:.4em;padding:.3em .7em;border-radius:var(--r-xs);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase;}

.divider-gold{width:64px;height:2px;border:0;border-radius:2px;background:var(--grad-gold);}
.divider-gold--center{margin-inline:auto;}

/* Credential strip (hero / authority) */
.cred-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.7em 1.4em;
  font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-muted);}
.cred-strip li{display:flex;align-items:center;gap:1.4em;}
.cred-strip li::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--c-gold);opacity:.7;}
.cred-strip li:last-child::after{display:none;}

/* ----------------------------------------------------------------------------
   C3. CHECKLIST (teal check marks)
   ---------------------------------------------------------------------------- */
.checklist{display:grid;gap:var(--space-4);}
/* Absolute-positioned check so inline <strong> + text flow normally (no grid-cell split). */
.checklist li{position:relative;padding-left:2.6em;line-height:var(--lh-normal);}
.checklist li::before{
  content:"";position:absolute;left:0;top:.12em;width:1.6em;height:1.6em;border-radius:50%;
  background:var(--c-teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A7A8C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/1em no-repeat;
  box-shadow:inset 0 0 0 1px rgba(58,122,140,.2);}

/* ----------------------------------------------------------------------------
   C4. CARDS
   ---------------------------------------------------------------------------- */
.card{background:var(--c-white);border-radius:var(--r-card);padding:var(--space-8);
  box-shadow:var(--shadow-sm);border:1px solid var(--c-line);}
.card--hover{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.card--flush{padding:0;overflow:hidden;}

/* ----------------------------------------------------------------------------
   C5. STICKY NAV (transparent over hero -> solid on scroll)
   ---------------------------------------------------------------------------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),backdrop-filter var(--dur) var(--ease);
  border-bottom:1px solid transparent;}
.nav.is-scrolled{background:rgba(251,250,248,.85);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:var(--shadow-sm);border-bottom-color:var(--c-line);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  height:72px;width:100%;max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter);
  transition:height var(--dur) var(--ease);}
.nav.is-scrolled .nav__inner{height:64px;}
.nav__brand{display:flex;align-items:center;}
.nav__brand img{height:30px;width:auto;}
.nav__links{display:none;align-items:center;gap:var(--space-8);}
.nav__link{position:relative;color:var(--c-navy);font-size:var(--text-sm);font-weight:var(--weight-medium);
  padding-block:.4em;}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--c-teal);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease-out);}
.nav__link:hover{color:var(--c-teal);}
.nav__link:hover::after{transform:scaleX(1);}
.nav__actions{display:flex;align-items:center;gap:var(--space-3);}
/* Hide the redundant header CTA on the smallest screens (toggle + bottom apply-bar cover it);
   reveal once there's room so the 44px toggle never gets crowded/clipped. */
.nav__actions .btn{display:none;}
@media (min-width:600px){.nav__actions .btn{display:inline-flex;}}
.nav__toggle{display:inline-flex;flex:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;border-radius:var(--r-sm);}
.nav__toggle span{display:block;height:2px;width:100%;background:var(--c-navy);border-radius:2px;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile drawer */
.nav__drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:var(--z-modal);
  background:var(--c-bg);box-shadow:var(--shadow-xl);padding:calc(72px + var(--space-6)) var(--gutter) var(--space-10);
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow);
  display:flex;flex-direction:column;gap:var(--space-2);overflow-y:auto;}
.nav__drawer.is-open{transform:none;visibility:visible;
  transition:transform var(--dur-slow) var(--ease-out),visibility 0s;}
.nav__drawer a{font-size:var(--text-lg);font-weight:var(--weight-medium);color:var(--c-navy);
  padding:.7em 0;border-bottom:1px solid var(--c-line);}
.nav__drawer .btn{margin-top:var(--space-6);}
.nav__scrim{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(14,42,51,.45);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);
  backdrop-filter:blur(2px);}
.nav__scrim.is-open{opacity:1;visibility:visible;}

@media (min-width:880px){
  .nav__links{display:flex;}
  .nav__toggle{display:none;}
}

/* ----------------------------------------------------------------------------
   C6. STICKY MOBILE APPLY BAR (sibling of <main>, never inside)
   ---------------------------------------------------------------------------- */
.apply-bar{position:fixed;inset:auto 0 0 0;z-index:var(--z-bar);
  display:flex;align-items:center;gap:var(--space-4);
  padding:.7em var(--gutter) calc(.7em + env(safe-area-inset-bottom));
  background:rgba(251,250,248,.92);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--c-line);
  box-shadow:0 -8px 24px -12px rgba(14,42,51,.2);
  transform:translateY(110%);transition:transform var(--dur-slow) var(--ease-out);}
.apply-bar.is-visible{transform:none;}
.apply-bar__text{flex:1;min-width:0;font-size:var(--text-xs);color:var(--c-muted);line-height:1.3;}
.apply-bar__text strong{display:block;color:var(--c-navy);font-size:var(--text-sm);}
.apply-bar .btn{flex:none;}
@media (min-width:880px){.apply-bar{display:none;}}

/* ----------------------------------------------------------------------------
   C7. FOOTER
   ---------------------------------------------------------------------------- */
.footer{background:var(--grad-navy);color:var(--c-on-dark);padding-block:var(--space-20) var(--space-8);}
.footer a{color:var(--c-on-dark-muted);}
.footer a:hover{color:var(--c-white);}
.footer__top{display:grid;gap:var(--space-12);grid-template-columns:1fr;}
.footer__brand img{height:34px;width:auto;margin-bottom:var(--space-5);}
.footer__tagline{font-family:var(--font-heading);font-style:italic;font-size:var(--text-xl);color:var(--c-white);}
.footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);}
.footer__col-title{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--c-teal-bright);margin-bottom:var(--space-4);font-weight:var(--weight-semibold);}
.footer__col ul{display:grid;gap:var(--space-3);font-size:var(--text-sm);}
.footer__addr{font-size:var(--text-sm);line-height:var(--lh-relaxed);color:var(--c-on-dark-muted);font-style:normal;}
.footer__disclaimer{margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--c-line-light);
  font-size:var(--text-xs);line-height:var(--lh-relaxed);color:var(--c-on-dark-muted);max-width:80ch;}
.footer__bottom{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--c-line-light);
  display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);justify-content:space-between;
  font-size:var(--text-xs);color:var(--c-on-dark-muted);}
@media (min-width:760px){
  .footer__top{grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-16);}
  .footer__cols{grid-template-columns:1fr 1fr;}
}

/* ----------------------------------------------------------------------------
   C8. ACCORDION (FAQ)
   ---------------------------------------------------------------------------- */
.accordion{display:grid;gap:var(--space-3);}
.acc-item{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.acc-item[open],.acc-item.is-open{box-shadow:var(--shadow-sm);border-color:rgba(58,122,140,.35);}
.acc-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;
  text-align:left;padding:var(--space-5) var(--space-6);font-family:var(--font-heading);
  font-size:var(--text-lg);font-weight:550;color:var(--c-navy-ink);}
.acc-trigger .acc-icon{flex:none;width:22px;height:22px;position:relative;transition:transform var(--dur) var(--ease);}
.acc-trigger .acc-icon::before,.acc-trigger .acc-icon::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:2px;background:var(--c-teal);border-radius:2px;transition:transform var(--dur) var(--ease);}
.acc-trigger .acc-icon::after{transform:rotate(90deg);}
.acc-item.is-open .acc-trigger .acc-icon::after{transform:rotate(0);}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out);}
.acc-item.is-open .acc-panel{grid-template-rows:1fr;}
.acc-panel>div{overflow:hidden;}
.acc-panel p{padding:0 var(--space-6) var(--space-6);color:var(--c-muted);line-height:var(--lh-relaxed);}

/* ----------------------------------------------------------------------------
   C9. FORM CONTROLS
   ---------------------------------------------------------------------------- */
.field{display:grid;gap:.5em;margin-bottom:var(--space-5);}
.field label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--c-navy);}
.field .req{color:var(--c-teal);}
.input,.select,textarea.input{
  width:100%;padding:.85em 1em;font-size:var(--text-base);color:var(--c-navy);
  background:var(--c-white);border:1.5px solid var(--c-line-strong);border-radius:var(--r-md);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);}
.input::placeholder{color:var(--c-faint);}
.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--c-teal);box-shadow:var(--ring);}
.input[aria-invalid="true"]{border-color:var(--c-concern);box-shadow:0 0 0 3px rgba(220,20,60,.15);}
.field__error{font-size:var(--text-sm);color:var(--c-concern);min-height:0;}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351607A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;background-size:1.1em;padding-right:2.6em;}
.form-card{background:var(--c-white);border-radius:var(--r-lg);padding:clamp(var(--space-6),4vw,var(--space-10));
  box-shadow:var(--shadow-lg);border:1px solid var(--c-line);}

/* ----------------------------------------------------------------------------
   C10. DARK SECTION (CTA bands)
   ---------------------------------------------------------------------------- */
.band-dark{background:var(--grad-navy);color:var(--c-on-dark);}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--c-white);}
.band-dark .lede{color:var(--c-on-dark-muted);}
.band-tint{background:var(--c-teal-mist);}
.band-surface{background:var(--c-surface);}