/* ==========================================================================
   Youth Financial Literacy Alliance - Design System (v3)
   --------------------------------------------------------------------------
   A close clone of the client's reference site (beautyfoundationnj.com):
   huge royal-blue Playfair Display headlines with an italic accent word, clean
   Roboto-light body, a light-gray page, pill buttons, big photography, very
   generous whitespace, and a charcoal footer.

   The reference's accent is hot pink; per the client we use GOLD in its place
   (matching the YFLA logo). Everything else mirrors the reference:

     Display serif   Playfair Display   weight 900 (hero/stats), 700 (headings)
     Body / UI       Roboto             weight 300 (lead), 400 (body), 500 (UI)
     Primary blue    #004c8a            headings, stats, quotes, links, nav
     Accent gold     #d6ab30 / #a8801a  pill buttons, small marks
     Page            #f5f5f5            light neutral gray
     Ink             #222222            body text
     Footer          #363636            charcoal

   See docs/BRAND.md.

   SECTION MAP
   01 Tokens        06 Header/nav   11 Articles   16 Accents
   02 Reset         07 Hero         12 Tools      17 Utilities
   03 Typography    08 Cards        13 Forms      18 Motion
   04 Layout        09 Stats        14 Accordion  19 Print
   05 Buttons       10 Features     15 Footer
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* --- Reference royal blue (primary) --------------------------------- */
  --blue-900: #002544;
  --blue-800: #003a6b;
  --blue-700: #004c8a; /* the reference's exact blue */
  --blue-600: #1462a6;
  --blue-500: #2f80c2;
  --blue-100: #cfe0ee;
  --blue-50:  #eaf1f7;

  /* Kept as aliases so existing markup using "navy" maps to the blue. */
  --navy-900: var(--blue-900);
  --navy-800: var(--blue-800);
  --navy-700: var(--blue-700);
  --navy-600: var(--blue-600);
  --navy-500: var(--blue-500);
  --navy-300: #7ea3c4;
  --navy-100: var(--blue-100);
  --navy-50:  var(--blue-50);
  --royal:    var(--blue-700);

  /* --- Gold accent (replaces the reference pink) ---------------------- */
  --gold-700: #866413;
  --gold-600: #a8801a; /* gold as readable text on light */
  --gold-500: #c9a227; /* logo gold */
  --gold-400: #d6ab30; /* pill fill / marks */
  --gold-300: #e6c766;
  --gold-200: #f0dfa8;
  --gold-100: #f6edd4;

  /* --- Neutrals (the reference's light-gray world) -------------------- */
  --gray:    #f5f5f5; /* page background */
  --gray-2:  #ececec; /* alternating band / hairline fills */
  --paper:   #ffffff;
  --charcoal: #363636; /* footer */
  --charcoal-2: #2b2b2b;
  --line:    #e2e2e2;
  --line-2:  #ededed;

  /* Aliases for older names used in markup. */
  --ivory:   var(--gray);
  --ivory-2: var(--paper);
  --cream:   var(--gray);
  --cream-2: var(--paper);

  /* --- Semantic -------------------------------------------------------- */
  --bg:          var(--gray);
  --surface:     var(--paper);
  --ink:         #222222;
  --ink-strong:  var(--blue-700);
  --ink-soft:    #565b62;
  --ink-faint:   #8b9096;
  --border:      var(--line);
  --focus:       var(--blue-600);

  /* --- Type ------------------------------------------------------------ */
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid scale - display runs large & airy like the reference (hero 96px). */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   clamp(1.2rem, 0.6vw + 1.05rem, 1.5rem);   /* Roboto-300 sub */
  --fs-xl:   clamp(1.5rem, 1.2vw + 1.1rem, 2.1rem);
  --fs-2xl:  clamp(2rem, 2.4vw + 1.2rem, 3rem);
  --fs-3xl:  clamp(2.4rem, 3.6vw + 1.2rem, 4rem);
  --fs-4xl:  clamp(2.9rem, 5.4vw + 1.1rem, 5.25rem);
  --fs-5xl:  clamp(3.2rem, 8.5vw + 0.6rem, 6.5rem);    /* hero (≈96px+) */

  --lh-tight: 1.0;
  --lh-snug:  1.1;
  --lh-body:  1.7;

  /* --- Spacing (generous) --------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 2.75rem;  --sp-8: 3.5rem;
  --sp-9: 5rem;     --sp-10: 8rem;

  --section-y: clamp(4.5rem, 9vw, 9.5rem);
  --container: 1200px;
  --container-narrow: 720px;

  /* --- Radii ----------------------------------------------------------- */
  --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-2xl: 22px;
  --r-pill: 300px;

  /* --- Shadows (soft) -------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(0, 40, 80, 0.05), 0 1px 3px rgba(0, 40, 80, 0.04);
  --sh-md: 0 4px 14px rgba(0, 40, 80, 0.08), 0 2px 4px rgba(0, 40, 80, 0.04);
  --sh-lg: 0 18px 44px rgba(0, 40, 80, 0.12), 0 6px 12px rgba(0, 40, 80, 0.06);
  --sh-xl: 0 30px 70px rgba(0, 40, 80, 0.16);

  --ring: 0 0 0 3px var(--gray), 0 0 0 5px var(--focus);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { padding-left: 1.25em; }

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

::selection { background: var(--gold-200); color: var(--blue-900); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200; background: var(--blue-700); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 500; text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink-strong);
  font-weight: 900;
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-4);
  letter-spacing: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); font-weight: 700; }
h4 { font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-body); }
h5 { font-size: var(--fs-base); font-weight: 700; font-family: var(--font-body); }

/* The reference's signature: one word in italic display serif. */
.hl, em.display, .display-italic { font-style: italic; font-weight: inherit; color: inherit; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--blue-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--gold-700); }

strong, b { font-weight: 700; color: var(--ink-strong); }
small { font-size: var(--fs-sm); }

code {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 0.9em; background: var(--blue-50); padding: 0.15em 0.45em; border-radius: var(--r-sm);
}

blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  border-left: 3px solid var(--gold-400);
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 500; color: var(--blue-700); line-height: 1.4;
}
blockquote p:last-child { margin-bottom: 0; }

/* Text roles ---------------------------------------------------------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-600); margin: 0 0 var(--sp-4);
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--gold-500); }
.eyebrow--center::before { display: none; }

.lede {
  font-size: var(--fs-lg); font-weight: 300; color: #3a3f47;
  line-height: 1.5; max-width: 60ch;
}

.section-head { max-width: 48rem; margin-bottom: var(--sp-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }

/* ==========================================================================
   04. LAYOUT
   ========================================================================== */

.container {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 1440px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }
.section--cream { background: var(--paper); }       /* white band on gray page */
.section--paper { background: var(--paper); }
.section--navy {                                     /* blue band (reference dark section) */
  background: var(--blue-700); color: #d6e2f0;
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy .lede { color: #bcd0e6; }
.section--navy .eyebrow { color: var(--gold-300); }
.section--navy .eyebrow::before { background: var(--gold-300); }
.section--navy a { color: var(--gold-300); }

.section--curve, .section--curve-top, .section--curve-bottom { border-radius: 0; }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-lg { gap: clamp(2rem, 4vw, 3.5rem); }
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
.split--wide-right { grid-template-columns: 0.85fr 1.15fr; }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
  .split__media--first-on-mobile { order: -1; }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.cluster--center { justify-content: center; }

/* ==========================================================================
   05. BUTTONS
   Reference: solid pill CTA (pink, now gold). Gold needs dark text for contrast.
   ========================================================================== */

.btn {
  --btn-bg: var(--gold-400);
  --btn-ink: var(--blue-900);
  --btn-bd: var(--gold-400);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.85em 1.9em;
  background: var(--btn-bg); color: var(--btn-ink);
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.02em; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.btn:hover { color: var(--btn-ink); transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-sm); }

.btn--primary { --btn-bg: var(--gold-400); --btn-ink: var(--blue-900); --btn-bd: var(--gold-400); }
.btn--primary:hover { --btn-bg: var(--gold-300); }

.btn--navy { --btn-bg: var(--blue-700); --btn-ink: #fff; --btn-bd: var(--blue-700); }
.btn--navy:hover { --btn-bg: var(--blue-800); }

.btn--white { --btn-bg: #fff; --btn-ink: var(--blue-900); --btn-bd: #fff; }

.btn--ghost { --btn-bg: transparent; --btn-ink: var(--blue-700); --btn-bd: var(--blue-700); }
.btn--ghost:hover { --btn-bg: var(--blue-700); --btn-ink: #fff; --btn-bd: var(--blue-700); }
.section--navy .btn--ghost { --btn-ink: #fff; --btn-bd: rgba(255, 255, 255, 0.55); }
.section--navy .btn--ghost:hover { --btn-bg: #fff; --btn-ink: var(--blue-900); --btn-bd: #fff; }

.btn--sm { padding: 0.7em 1.35em; font-size: var(--fs-xs); }
.btn--lg { padding: 1em 2.4em; font-size: var(--fs-base); }
.btn--block { width: 100%; }

/* Underlined uppercase text link, like the reference's "Read More". */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--blue-700); position: relative;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover { color: var(--gold-700); }
.link-arrow:hover::after { transform: scaleX(1); }

/* ==========================================================================
   06. HEADER / NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 245, 245, 0.92);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--sh-sm); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 88px; }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--blue-700); flex-shrink: 0; }
.brand:hover { color: var(--blue-700); }
.brand img, .brand svg { width: 50px; height: 50px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.02; }
.brand__name { font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; letter-spacing: 0; }
.brand__tag { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
@media (max-width: 420px) { .brand__tag { display: none; } }

.nav__links { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: 0.5rem 0.85rem; border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: 500; font-size: 0.98rem;
  text-decoration: none; color: var(--blue-700); position: relative;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.35rem;
  height: 1.5px; background: var(--gold-500);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--gold-700); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--gold-700); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 0.6rem; }

.nav__toggle {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--blue-100); border-radius: var(--r-sm);
}
.nav__toggle span { display: block; position: relative; width: 20px; height: 2px; border-radius: 2px; background: var(--blue-700); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: var(--blue-700); transition: transform var(--dur) var(--ease); }
.nav__toggle span::before { top: -6.5px; }
.nav__toggle span::after { top: 6.5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: 88px 0 auto; display: block;
    background: var(--gray); border-bottom: 1px solid var(--line); box-shadow: var(--sh-lg);
    padding: var(--sp-4) clamp(1.15rem, 4vw, 3rem) var(--sp-6);
    max-height: calc(100dvh - 88px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0.1rem; }
  .nav__link { padding: 0.85rem 1rem; border-radius: var(--r-md); font-size: 1.15rem; }
  .nav__link::after { display: none; }
  .nav__menu .nav__actions { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); flex-direction: column; align-items: stretch; }
  .nav__menu .btn { width: 100%; }
  .nav__cta { display: none; }
}
@media (min-width: 1041px) {
  .nav__menu { display: flex !important; align-items: center; gap: var(--sp-6); }
  .nav__menu .nav__actions--mobile { display: none; }
}

/* ==========================================================================
   07. HERO - single column, huge blue serif + italic word (reference style)
   ========================================================================== */

.hero { position: relative; padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; }
.hero__inner { display: block; max-width: 60rem; }
.hero h1 { font-size: var(--fs-5xl); margin-bottom: var(--sp-6); }
.hero .lede { margin-bottom: var(--sp-7); font-size: clamp(1.25rem, 1.2vw + 1rem, 1.7rem); max-width: 42ch; }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border); }

/* Optional inline hero media (kept for interior pages that still use it). */
.hero__media { position: relative; margin-top: var(--sp-8); }
.hero__photo { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 16 / 9; background: var(--blue-50); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.hero__float {
  position: absolute; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 0.9rem 1.15rem; box-shadow: var(--sh-lg);
  display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-body);
  font-weight: 600; font-size: 0.95rem; color: var(--blue-900); max-width: 15rem;
}
.hero__float--tl { top: 7%; left: 4%; }
.hero__float--br { bottom: 8%; right: 4%; }
@media (max-width: 520px) { .hero__float { display: none; } }

/* Full-bleed photo band (reference places one under the hero). */
.photo-band { position: relative; width: 100%; aspect-ratio: 21 / 8; min-height: 340px; overflow: hidden; background: var(--blue-50); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }
.photo-band .img-placeholder { position: absolute; inset: 0; }

/* Interior page hero */
.page-hero { position: relative; padding-block: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.page-hero__inner { max-width: 54rem; }
.page-hero h1 { margin-bottom: var(--sp-4); }

.crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; list-style: none; margin: 0 0 var(--sp-5); padding: 0; font-size: var(--fs-sm); color: var(--ink-faint); }
.crumbs li::after { content: "/"; margin-left: 0.4rem; color: var(--ink-faint); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--gold-700); text-decoration: underline; }

/* ==========================================================================
   08. CARDS & PANELS - minimal, airy (reference is light on chrome)
   ========================================================================== */

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--ink-soft); }
.card--hover:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--sh-lg); }
.card--sticker { border: 1px solid var(--line); }
.card--sticker.card--hover:hover { box-shadow: var(--sh-lg); }

/* Feature card - the emphasised, larger treatment used for the homepage
   "Four ways we teach it" grid. A gold top rule + oversized icon give the
   section visual weight without adding clutter. */
.card--feature { padding: clamp(2rem, 3.6vw, 3.1rem); border-top: 4px solid var(--gold-400); }
.card--feature h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.card--feature p { font-size: var(--fs-base); color: var(--ink-soft); }
.card--feature .card__foot { padding-top: var(--sp-5); }
@media (min-width: 720px) {
  .card--feature h3 { font-size: var(--fs-2xl); }
}

/* Compact inline tool strip - the de-emphasised homepage tools row. */
.tool-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.tool-strip__link {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.5em 1em; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm);
  color: var(--blue-700); text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tool-strip__link:hover { border-color: var(--gold-400); color: var(--gold-700); }

.card--tint-gold { background: var(--gold-100); border-color: var(--gold-200); }
.card--tint-mint, .card--tint-sky, .card--tint-coral, .card--tint-violet { background: var(--paper); border-color: var(--line); }
.card--tint-navy { background: var(--blue-700); border-color: var(--blue-700); color: #cfe0ee; }
.card--tint-navy h3, .card--tint-navy h4 { color: #fff; }
.card--tint-navy p { color: #b3c8de; }

/* No icon chips anywhere: structure comes from type, rules and whitespace. */

.card__foot { margin-top: auto; padding-top: var(--sp-4); }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.card__num {
  font-family: var(--font-display); font-weight: 900; font-size: 3.25rem; line-height: 1;
  color: var(--gold-500); margin-bottom: var(--sp-3); font-variant-numeric: tabular-nums;
}

/* Numbered step: an editorial figure, not a badge. */
.card--feature .card__num {
  font-size: 2.6rem; color: var(--gold-500); margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
}
.feature-row__num {
  flex-shrink: 0; min-width: 1.9rem;
  font-family: var(--font-display); font-weight: 900; font-size: 1.65rem; line-height: 1.15;
  color: var(--gold-600); font-variant-numeric: tabular-nums;
}
.section--navy .feature-row__num, .card--tint-navy .feature-row__num { color: var(--gold-300); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.75rem, 4vw, 3.5rem); }
.panel--navy { background: var(--blue-700); border-color: var(--blue-700); color: #cfe0ee; }
.panel--navy h2, .panel--navy h3 { color: #fff; }
.panel--gold { background: var(--gold-100); border-color: var(--gold-200); }

.pill { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 0.95em; border-radius: var(--r-pill); background: transparent; border: 1px solid var(--blue-100); color: var(--blue-700); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; line-height: 1.3; }
.pill--gold, .pill--mint, .pill--sky, .pill--coral, .pill--violet { background: var(--gold-100); border-color: var(--gold-200); color: var(--gold-700); }
a.pill:hover { border-color: var(--gold-500); color: var(--gold-700); }

/* Pull-quote - big upright blue Playfair with a large gold quote mark. */
.quote { display: flex; flex-direction: column; gap: var(--sp-4); background: transparent; border: 0; border-radius: 0; padding: var(--sp-6) 0 0; box-shadow: none; }
.quote__mark { font-family: var(--font-display); font-size: 4rem; line-height: 0.6; color: var(--gold-500); height: 1.8rem; }
.quote__text { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--blue-700); margin: 0; line-height: 1.35; }
.quote__by { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.section--navy .quote__by { border-top-color: rgba(255, 255, 255, 0.18); }
.quote__name { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--blue-700); line-height: 1.3; }
.quote__meta { font-size: var(--fs-xs); color: var(--ink-faint); }

.member { text-align: center; }
.member__photo { aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); margin-bottom: var(--sp-4); background: var(--blue-50); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); margin: 0 0 0.15rem; color: var(--blue-700); }
.member__role { font-size: var(--fs-sm); color: var(--gold-700); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--sp-2); }
.member__bio { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   09. STATS - big blue Playfair figures (reference "Our Impact")
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--sp-6); }
.stat { text-align: center; padding: var(--sp-4); background: transparent; border: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
@media (max-width: 620px) { .stat + .stat { border-left: 0; border-top: 1px solid var(--line); padding-top: var(--sp-6); } }
.section--navy .stat + .stat { border-color: rgba(255, 255, 255, 0.18); }

.stat__num { font-family: var(--font-display); font-size: clamp(3.25rem, 6vw, 5.5rem); font-weight: 900; line-height: 1; color: var(--blue-700); display: block; }
.section--navy .stat__num { color: var(--gold-300); }
.stat__label { display: block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 500; letter-spacing: 0.03em; }
.section--navy .stat__label { color: #bcd0e6; }

/* ==========================================================================
   10. FEATURES, STEPS, TIMELINE
   ========================================================================== */

.feature-row { display: flex; gap: var(--sp-4); align-items: flex-start; }
/* Rows without a figure read as a list: a hairline rule gives them structure. */
.feature-row:not(:has(.feature-row__num)) {
  display: block; padding-left: var(--sp-5); border-left: 2px solid var(--gold-300);
}
.section--navy .feature-row:not(:has(.feature-row__num)) { border-left-color: var(--gold-500); }
.feature-row h4 { margin-bottom: 0.25rem; }
.feature-row p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.checklist li { display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.5; }
.checklist li::before {
  content: ""; flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; border-radius: 50%;
  background: var(--gold-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002544' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}

.timeline { position: relative; padding-left: 2.5rem; margin: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 0.6rem; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--gold-300); }
.timeline li { position: relative; padding-bottom: var(--sp-6); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -2.5rem; top: 0.3rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px var(--gray); }
.timeline__when { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); color: var(--gold-700); text-transform: uppercase; letter-spacing: 0.1em; }
.timeline h4 { margin: 0.25rem 0 0.35rem; }
.timeline p { color: var(--ink-soft); margin: 0; }

.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.logo-strip__item { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--ink-faint); }

/* ==========================================================================
   11. ARTICLES
   ========================================================================== */

.article-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.article-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--sh-lg); }
.article-card__thumb { aspect-ratio: 16 / 10; background: var(--blue-50); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.article-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { padding: clamp(1.35rem, 2.5vw, 1.85rem); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.article-card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; margin: 0; color: var(--blue-700); }
.article-card__title a { color: inherit; text-decoration: none; }
.article-card__title a::after { content: ""; position: absolute; inset: 0; }
.article-card__excerpt { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.article-card__meta { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: var(--fs-xs); color: var(--ink-faint); }

.article-card--featured { grid-column: 1 / -1; }
@media (min-width: 800px) {
  .article-card--featured { flex-direction: row; }
  .article-card--featured .article-card__thumb { flex: 0 0 48%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .article-card--featured .article-card__body { padding: clamp(1.75rem, 3.5vw, 3rem); justify-content: center; }
  .article-card--featured .article-card__title { font-size: var(--fs-2xl); }
}

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; margin-bottom: var(--sp-7); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.filter-bar__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-tag { padding: 0.45em 1.1em; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: var(--ink-soft); transition: all var(--dur) var(--ease); }
.filter-tag:hover { border-color: var(--gold-400); color: var(--blue-700); }
.filter-tag[aria-pressed="true"] { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }

.empty-state { text-align: center; padding: var(--sp-9) var(--sp-4); color: var(--ink-soft); }


.prose { max-width: 42rem; font-size: 1.18rem; line-height: 1.75; color: #2a2e35; }
.prose > * + * { margin-top: 1.35em; }
.prose h2 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 900; margin-top: 1.8em; margin-bottom: 0.15em; scroll-margin-top: 7rem; }
.prose h3 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; margin-top: 1.6em; margin-bottom: 0.15em; scroll-margin-top: 7rem; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.5em; }
.prose img { border-radius: var(--r-lg); }
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: var(--fs-sm); color: var(--ink-faint); text-align: center; margin-top: 0.75em; }
.prose a { font-weight: 500; }

.callout { display: block; padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--gold-400); }
.callout h4 { margin: 0 0 0.35rem; font-family: var(--font-body); font-weight: 700; }
.callout p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.callout--gold { background: var(--gold-100); border-color: var(--gold-200); border-left-color: var(--gold-500); }
.callout--mint { background: var(--paper); border-left-color: var(--blue-500); }
.callout--coral { background: var(--paper); border-left-color: var(--gold-600); }

.article-head { max-width: 42rem; }
.article-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; font-size: var(--fs-sm); color: var(--ink-faint); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.byline { display: inline-flex; align-items: center; gap: 0.5rem; }
.byline__name { font-weight: 600; color: var(--blue-700); font-size: var(--fs-sm); }

.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--gold-400); z-index: 150; transition: width 80ms linear; }

/* ==========================================================================
   12. TOOLS (calculators, quiz)
   ========================================================================== */

.tool-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .tool-shell { grid-template-columns: 1fr; } }

.tool-controls { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--sh-sm); }
.tool-results { position: sticky; top: 110px; background: var(--blue-700); color: #cfe0ee; border: 0; border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--sh-lg); }
@media (max-width: 900px) { .tool-results { position: static; } }
.tool-results h3 { color: #fff; }

.tool-field { margin-bottom: var(--sp-5); }
.tool-field:last-child { margin-bottom: 0; }
.tool-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.tool-field label { font-family: var(--font-body); font-weight: 600; color: var(--blue-700); font-size: var(--fs-base); }
.tool-field__hint { font-size: var(--fs-xs); color: var(--ink-faint); display: block; margin-top: 0.4rem; line-height: 1.5; }
.tool-field__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--gold-700); font-variant-numeric: tabular-nums; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--blue-100); outline: none; margin: 0.5rem 0 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-400); border: 3px solid var(--paper); cursor: pointer; box-shadow: var(--sh-md); transition: transform var(--dur) var(--ease); }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-400); border: 3px solid var(--paper); cursor: pointer; }

.readout { text-align: center; padding: var(--sp-4) 0; }
.readout__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--gold-300); margin-bottom: var(--sp-3); }
.readout__value { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 900; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.readout__sub { font-size: var(--fs-sm); color: #a9bdd6; margin-top: var(--sp-2); }

.readout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.readout-mini { text-align: center; }
.readout-mini__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--gold-300); font-variant-numeric: tabular-nums; line-height: 1.1; }
.readout-mini__label { font-size: var(--fs-xs); color: #a9bdd6; margin-top: 0.3rem; }

.bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.bar { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--gold-400); transition: height 400ms var(--ease); position: relative; }
.bar--contrib { background: var(--blue-500); }
.bar__seg { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 2px 2px; background: rgba(255, 255, 255, 0.3); transition: height 400ms var(--ease); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-3); font-size: var(--fs-xs); color: #a9bdd6; }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend i { width: 0.85rem; height: 0.85rem; border-radius: 2px; display: inline-block; }

.split-bar { display: flex; height: 2.75rem; border-radius: var(--r-pill); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); }
.split-bar__seg { display: grid; place-items: center; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); color: var(--blue-900); transition: flex-basis 400ms var(--ease); overflow: hidden; white-space: nowrap; }
.split-bar__seg--needs { background: #9fc0dd; }
.split-bar__seg--wants { background: var(--gold-400); }
.split-bar__seg--save { background: var(--gold-200); }

.tool-card__tag { position: absolute; top: var(--sp-5); right: var(--sp-5); }

.quiz { max-width: 44rem; margin-inline: auto; }
.quiz__progress { height: 4px; border-radius: var(--r-pill); background: var(--blue-100); overflow: hidden; margin-bottom: var(--sp-6); }
.quiz__progress-fill { height: 100%; width: 0%; border-radius: var(--r-pill); background: var(--gold-400); transition: width 300ms var(--ease); }
.quiz__count { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-3); }
.quiz__question { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 900; color: var(--blue-700); margin-bottom: var(--sp-6); line-height: 1.2; }
.quiz__options { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.quiz__option { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-base); color: var(--ink); transition: all var(--dur) var(--ease); }
.quiz__option:hover:not(:disabled) { border-color: var(--gold-400); transform: translateX(3px); }
.quiz__option:disabled { cursor: default; }
.quiz__option__key { width: 2rem; height: 2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--blue-50); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); color: var(--blue-600); }
.quiz__option.is-correct { border-color: var(--blue-600); background: var(--blue-50); }
.quiz__option.is-correct .quiz__option__key { background: var(--blue-600); color: #fff; }
.quiz__option.is-wrong { border-color: var(--gold-600); background: var(--gold-100); }
.quiz__option.is-wrong .quiz__option__key { background: var(--gold-500); color: var(--blue-900); }

.quiz__explain { padding: var(--sp-4); border-radius: var(--r-md); background: var(--gold-100); border: 1px solid var(--gold-200); border-left: 3px solid var(--gold-500); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.quiz__explain strong { display: block; margin-bottom: 0.25rem; }

.quiz__score { font-family: var(--font-display); font-size: clamp(3.5rem, 10vw, 6rem); font-weight: 900; line-height: 1; color: var(--blue-700); text-align: center; }

/* ==========================================================================
   13. FORMS
   ========================================================================== */

.field { margin-bottom: var(--sp-5); }
.field label, .field__label { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--blue-700); margin-bottom: var(--sp-2); }
.field .req { color: var(--gold-700); }

.input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-base); color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:hover, input:hover:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select:hover, textarea:hover { border-color: var(--blue-100); }
.input:focus, input:focus:not([type="range"]), select:focus, textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-100); }
textarea { min-height: 9rem; resize: vertical; }
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='%23004c8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.1rem; padding-right: 2.6rem; }

.input-prefix { position: relative; }
.input-prefix::before { content: "$"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--ink-faint); pointer-events: none; }
.input-prefix input { padding-left: 2rem; }

.choice { display: flex; gap: 0.75rem; align-items: flex-start; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); font-size: var(--fs-sm); }
.choice:hover { border-color: var(--blue-100); }
.choice input { margin-top: 0.15rem; width: 1.15rem; height: 1.15rem; accent-color: var(--blue-700); flex-shrink: 0; }
.choice:has(input:checked) { border-color: var(--gold-500); background: var(--gold-100); }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-4); }
.form-note { font-size: var(--fs-xs); color: var(--ink-faint); margin-top: var(--sp-3); }

.form-status { display: none; padding: var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-5); font-size: var(--fs-sm); font-weight: 500; }
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--gold-100); border: 1px solid var(--gold-200); border-left: 3px solid var(--blue-600); color: var(--blue-700); }
.form-status--err { background: var(--gold-100); border: 1px solid var(--gold-200); border-left: 3px solid var(--gold-600); color: var(--gold-700); }

.subscribe { display: flex; gap: var(--sp-3); flex-wrap: wrap; max-width: 32rem; }
.subscribe input { flex: 1 1 14rem; }

/* ==========================================================================
   14. ACCORDION / FAQ
   ========================================================================== */

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--blue-700); list-style: none; transition: color var(--dur) var(--ease); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--gold-700); }
.accordion summary::after { content: ""; flex-shrink: 0; width: 1.5rem; height: 1.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8801a' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--dur) var(--ease); }
.accordion details[open] summary::after { transform: rotate(135deg); }
.accordion__body { padding: 0 0 var(--sp-5); max-width: 52rem; color: var(--ink-soft); }
.accordion__body > :first-child { margin-top: 0; }

/* ==========================================================================
   15. FOOTER - charcoal (reference)
   ========================================================================== */

.site-footer { background: var(--charcoal); color: #b3b3b3; padding-block: var(--sp-9) var(--sp-6); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: var(--sp-6); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer .brand { color: #fff; }
.site-footer .brand:hover { color: #fff; }
.site-footer .brand__tag { color: #9a9a9a; }
.footer-about p { font-size: var(--fs-sm); margin-top: var(--sp-4); max-width: 32ch; line-height: 1.6; }

.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.footer-col a { color: #b3b3b3; text-decoration: none; font-size: var(--fs-sm); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--gold-300); }

.socials { display: flex; gap: 0.6rem; margin-top: var(--sp-5); }
.socials a { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.socials a:hover { background: var(--gold-400); color: var(--blue-900); transform: translateY(-2px); border-color: var(--gold-400); }
.socials svg { width: 1.1rem; height: 1.1rem; }

.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; padding-top: var(--sp-5); font-size: var(--fs-xs); color: #9a9a9a; }
.footer-bottom a { color: #9a9a9a; text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-300); text-decoration: underline; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ==========================================================================
   16. ACCENTS (restrained)
   ========================================================================== */

.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.22; pointer-events: none; z-index: -1; }
.blob--gold { background: var(--gold-300); }
.blob--mint, .blob--sky, .blob--violet { background: var(--blue-100); }

.underline-squiggle { background: none; padding-bottom: 0; font-style: italic; }
.paper-dots, .paper-grid { background-image: none; }
.tilt-l, .tilt-r { transform: none; }

/* Awaiting a real photo. A quiet tinted panel with a small caption reads as
   deliberate; the old diagonal stripes read as a broken image. */
.img-placeholder {
  display: grid; place-items: center; gap: 0.5rem; width: 100%; height: 100%; min-height: 12rem;
  background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--blue-500); text-align: center; padding: var(--sp-4);
}
.img-placeholder::after {
  content: "Photo to come";
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-500); opacity: 0.75;
}
.img-placeholder__label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: var(--blue-600); max-width: 22ch; line-height: 1.4; }

/* ==========================================================================
   17. UTILITIES
   ========================================================================== */

.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; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; } .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-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); } .mb-7 { margin-bottom: var(--sp-7); }
.w-full { width: 100%; } .relative { position: relative; } .hide { display: none !important; }
@media (max-width: 700px) { .hide-sm { display: none !important; } }
@media (min-width: 701px) { .hide-lg { display: none !important; } }
.muted { color: var(--ink-soft); } .faint { color: var(--ink-faint); } .nums { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   18. MOTION
   ========================================================================== */

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-delay="2"] { transition-delay: 180ms; }
.js .reveal[data-delay="3"] { transition-delay: 270ms; }
.js .reveal[data-delay="4"] { transition-delay: 360ms; }
.js .reveal[data-delay="5"] { transition-delay: 450ms; }

@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.floaty { animation: float-y 6s ease-in-out infinite; }
.floaty--slow { animation-duration: 8s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   19. PRINT
   ========================================================================== */

@media print {
  .site-header, .site-footer, .nav__toggle, .read-progress, .blob { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .panel { border: 1px solid #999; box-shadow: none; }
  a { text-decoration: underline; }
  .prose { max-width: none; }
}


/* ==========================================================================
   20. PROGRAM IDENTITY
   The umbrella holds two distinct alliances. They share the navy base so they
   read as one family, but each owns an accent and its own masthead so you
   always know which one you are inside:
       money  (YFLA)  warm gold accent
       rights (YLLA)  cool blue accent
   ========================================================================== */

.progbar {
  background: var(--blue-900); color: #cfe0ee;
  font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.progbar .container { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; justify-content: space-between; padding-block: 0.6rem; }
.progbar__who { display: inline-flex; align-items: center; gap: 0.6rem; }
.progbar__who b { color: #fff; font-weight: 700; letter-spacing: 0.1em; }
.progbar a { color: var(--gold-300); text-decoration: none; }
.progbar a:hover { color: #fff; text-decoration: underline; }
.sec--rights .progbar__who b { color: #fff; }

/* Sub-navigation, one row per program. */
.subnav { background: var(--paper); border-bottom: 1px solid var(--line); }
.subnav .container { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; }
.subnav a {
  display: inline-block; padding: 0.85rem 0.75rem; font-size: var(--fs-sm); font-weight: 500;
  color: var(--blue-700); text-decoration: none; border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--gold-700); }
.subnav a[aria-current="page"] { border-bottom-color: var(--accent, var(--gold-500)); color: var(--accent-ink, var(--gold-700)); font-weight: 600; }
.sec--rights .subnav a:hover { color: var(--blue-600); }

/* --- money keeps the gold accent (its existing identity) ------------------ */
.sec--money { --accent: var(--gold-500); --accent-ink: var(--gold-700); }

/* --- rights takes the cool blue accent ----------------------------------- */
.sec--rights { --accent: var(--blue-600); --accent-ink: var(--blue-700); }
.sec--rights .eyebrow { color: var(--blue-600); }
.sec--rights .eyebrow::before { background: var(--blue-500); }
.sec--rights .card--feature { border-top-color: var(--blue-600); }
.sec--rights .card__num { color: var(--blue-600); }
.sec--rights .feature-row__num { color: var(--blue-600); }
.sec--rights .feature-row:not(:has(.feature-row__num)) { border-left-color: var(--blue-500); }
.sec--rights blockquote { border-left-color: var(--blue-500); }
.sec--rights .timeline::before { background: var(--blue-100); }
.sec--rights .timeline li::before { background: var(--blue-600); }
.sec--rights .pill--gold { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }
.sec--rights .callout--gold { background: var(--blue-50); border-color: var(--blue-100); border-left-color: var(--blue-600); }
.sec--rights .panel--gold { background: var(--blue-50); border-color: var(--blue-100); }
.sec--rights .tool-strip__link:hover { border-color: var(--blue-500); color: var(--blue-700); }
.sec--rights .link-arrow::after { background: var(--blue-500); }
.sec--rights .nav__link::after { background: var(--blue-500); }
.sec--rights .read-progress { background: var(--blue-600); }
.sec--rights .section--navy .eyebrow { color: #9fc0dd; }
.sec--rights .section--navy .eyebrow::before { background: #9fc0dd; }

/* Program "doors" on the umbrella home: each alliance shown with its own seal
   and accent so the split is obvious before you pick one. */
.door { position: relative; display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-top: 5px solid var(--gold-500); border-radius: var(--r-lg);
  padding: clamp(1.9rem, 3.4vw, 2.9rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.door:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.door--rights { border-top-color: var(--blue-600); }
.door__seal { width: 78px; height: 78px; margin-bottom: var(--sp-5); }
.door__abbr { font-family: var(--font-display); font-weight: 900; font-size: 2.1rem; line-height: 1;
  color: var(--gold-700); margin: 0 0 0.35rem; letter-spacing: 0.02em; }
.door--rights .door__abbr { color: var(--blue-700); }
.door__full { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--sp-4); }
.door h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.door p { color: var(--ink-soft); }
.door__topics { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--sp-4); }
.door__topics span { font-size: var(--fs-xs); padding: 0.3em 0.8em; border-radius: var(--r-pill);
  background: var(--gold-100); color: var(--gold-700); border: 1px solid var(--gold-200); }
.door--rights .door__topics span { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.door .card__foot { margin-top: auto; padding-top: var(--sp-5); }

/* Program tag on a combined article card. */
.pill--rights { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }

/* ==========================================================================
   21. ORGANIZATION TABS
   The two alliances are separate organizations sharing a parent, so they get
   a permanent pair of tabs above the header. The active one is lifted into
   the page surface; the other sits back. Present on every page.
   ========================================================================== */

.orgtabs { background: var(--blue-900); }
.orgtabs .container { display: flex; align-items: flex-end; gap: 0.35rem; padding-inline: clamp(1.15rem, 4vw, 3rem); }
.orgtabs__home {
  margin-right: auto; align-self: center; padding: 0.75rem 0.25rem 0.75rem 0;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #9fb6cf; text-decoration: none;
}
.orgtabs__home:hover { color: #fff; }

.orgtab {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.15rem; border-radius: var(--r-md) var(--r-md) 0 0;
  background: transparent; border: 1px solid transparent; border-bottom: 0;
  font-family: var(--font-body); text-decoration: none; line-height: 1.15;
  color: #bcd0e6; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.orgtab img { width: 26px; height: 26px; flex-shrink: 0; opacity: 0.85; }
.orgtab b { display: block; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; }
.orgtab span small { display: block; font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase; color: #9fb6cf; }
.orgtab:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

/* Active tab joins the page below it. */
.orgtab.is-active { background: var(--gray); color: var(--ink); }
.orgtab.is-active img { opacity: 1; }
.orgtab.is-active b { color: var(--gold-700); }
.orgtab.is-active span small { color: var(--ink-faint); }
.orgtab--rights.is-active b { color: var(--blue-700); }
.orgtab.is-active { box-shadow: inset 0 3px 0 var(--gold-500); }
.orgtab--rights.is-active { box-shadow: inset 0 3px 0 var(--blue-600); }

@media (max-width: 620px) {
  .orgtabs .container { gap: 0.2rem; }
  .orgtabs__home { display: none; }
  .orgtab { flex: 1; justify-content: center; padding: 0.6rem 0.5rem; }
  .orgtab span small { display: none; }
}

/* ==========================================================================
   22. GATEWAY
   The front door. Its only job is to send you into one of the two alliances,
   so it is a directory of big clickable branches, not a marketing homepage.
   ========================================================================== */

.gateway { padding-block: clamp(3rem, 7vw, 6rem); }
.gateway__head { text-align: center; max-width: 44rem; margin-inline: auto; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.gateway__seal { width: 96px; height: 96px; margin: 0 auto var(--sp-5); }
.gateway__head h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: var(--sp-4); }
.gateway__head p { font-size: var(--fs-lg); font-weight: 300; color: #3a3f47; margin: 0 auto; max-width: 38ch; }

.branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); }
@media (max-width: 800px) { .branches { grid-template-columns: 1fr; } }

.branch {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-top: 6px solid var(--gold-500);
  border-radius: var(--r-lg); padding: clamp(2rem, 4vw, 3.25rem); text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.branch:hover { transform: translateY(-5px); box-shadow: var(--sh-xl); }
.branch--rights { border-top-color: var(--blue-600); }

.branch__seal { width: 84px; height: 84px; margin-bottom: var(--sp-5); }
.branch__abbr { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1; color: var(--gold-700); margin: 0 0 0.4rem; }
.branch--rights .branch__abbr { color: var(--blue-700); }
.branch__full { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--sp-5); }
.branch__line { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700;
  color: var(--ink-strong); line-height: 1.25; margin: 0 0 var(--sp-4); }
.branch p { color: var(--ink-soft); margin: 0 0 var(--sp-5); }
.branch__topics { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--sp-6); }
.branch__topics span { font-size: var(--fs-xs); padding: 0.3em 0.8em; border-radius: var(--r-pill);
  background: var(--gold-100); color: var(--gold-700); border: 1px solid var(--gold-200); }
.branch--rights .branch__topics span { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.branch__go { margin-top: auto; }
.branch__go .btn { pointer-events: none; }
.branch--rights .branch__go .btn { --btn-bg: var(--blue-700); --btn-ink: #fff; --btn-bd: var(--blue-700); }

/* Shared-across-both directory strip. */
.shared { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: var(--sp-7); border-top: 1px solid var(--line); }
.shared h2 { font-size: var(--fs-lg); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); text-align: center; margin-bottom: var(--sp-5); }
.shared__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.75rem; }
.shared__links a {
  display: inline-flex; align-items: center; padding: 0.65em 1.3em; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper); color: var(--blue-700);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.shared__links a:hover { border-color: var(--gold-400); color: var(--gold-700); }


/* ==========================================================================
   24. ARTICLE DRAFT BAR
   Sits above the submission textarea: autosave status, live word count, and
   a clear-draft button. Used on all three submit pages.
   ========================================================================== */

.draftbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.25rem; margin-bottom: var(--sp-5);
  padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); font-size: var(--fs-sm);
}
.draftbar__status { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-faint); font-weight: 500; }
.draftbar__status::before {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--line); transition: background-color var(--dur) var(--ease);
}
.draftbar__status.is-on { color: var(--blue-700); }
.draftbar__status.is-on::before { background: #12a150; }
.draftbar__wc { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.draftbar button {
  background: none; border: 0; color: var(--gold-700); font-weight: 600;
  font-size: var(--fs-sm); cursor: pointer; text-decoration: underline;
}
.sec--rights .draftbar button { color: var(--blue-700); }

/* ==========================================================================
   25. TEAM
   Members are shown with a monogram until real headshots exist. A initial in
   the display serif reads as deliberate where an empty photo box does not.
   ========================================================================== */

.member { text-align: left; }
.member__mono {
  width: 5.5rem; height: 5.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-100); color: var(--gold-700); border: 1px solid var(--gold-200);
  font-family: var(--font-display); font-weight: 900; font-size: 1.9rem; line-height: 1;
  margin-bottom: var(--sp-4);
}
.sec--rights .member__mono { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.member__name { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-xl); margin: 0 0 0.2rem; color: var(--blue-700); }
.member__role { font-size: var(--fs-xs); color: var(--gold-700); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.35rem; }
.member__school { font-size: var(--fs-sm); color: var(--ink-faint); margin: 0 0 var(--sp-4); }
.member__bio { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; line-height: 1.7; }
.member--lead { border-top: 4px solid var(--gold-400); padding-top: var(--sp-5); }

/* Real headshots. object-position is set per person so a square crop from a
   tall portrait still lands on the face. */
.member__photo {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
  background: var(--blue-50); margin-bottom: var(--sp-4); box-shadow: var(--sh-sm);
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Articles not published yet. A quiet, deliberate holding state. */
.soon { text-align: center; padding: clamp(3rem, 7vw, 5.5rem) var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.soon__eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-600); margin: 0 0 var(--sp-4); }
.sec--rights .soon__eyebrow { color: var(--blue-600); }
.soon h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--sp-4); }
.soon p { max-width: 44ch; margin-inline: auto; color: var(--ink-soft); }

/* ==========================================================================
   26. MAILING LIST
   A recurring sign-up band. Deliberately plain: a heading, one line, and the
   fields, so it reads as an offer rather than an advert.
   ========================================================================== */

.signup { background: var(--gold-100); border: 1px solid var(--gold-200); border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3rem); }
.sec--rights .signup { background: var(--blue-50); border-color: var(--blue-100); }
.signup h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin-bottom: var(--sp-3); }
.signup__lede { color: var(--ink-soft); max-width: 46ch; margin: 0 0 var(--sp-6); }
.signup form { display: grid; gap: var(--sp-4); max-width: 34rem; }
.signup .field-row { gap: var(--sp-4); }
.signup .form-note { margin-top: 0; }