/* ============================================================================
   GROWTH SENSE FOUNDATION — Design System & Styles  (v2 "premium" pass)
   Plain CSS, no build step. Every brand decision lives in section 1.

    1. Design tokens          10. Events, filters, partners
    2. Reset & base           11. Testimonials & pull quotes
    3. Typography             12. CTA band
    4. Layout & surfaces      13. Newsletter
    5. Buttons & links        14. Forms, panels, info lists
    6. Header / nav           15. Interior pages (hero, timeline, people, FAQ)
    7. Hero                   16. Footer
    8. Stats                  17. Utilities, reveal, chrome, reduced motion
    9. Cards, journey, splits, blueprint panels

   CONCEPT — "Trajectory / blueprint of builders."
   Deep-navy anchor, one ignition gold, teal for the ecosystem. Dark bands are
   layered gradients with a drafting grid and film grain, never flat fills.
   Data is always set in the mono face with tabular figures.
   ========================================================================== */

/* 1. DESIGN TOKENS ========================================================= */
:root {
  /* --- Color: navy anchor + a single "ignition" gold + ecosystem teal ----- */
  --ink-0:      #071019;   /* deepest navy: gradient floor, footer base */
  --ink:        #0E1A2B;   /* brand navy: primary text, dark sections */
  --ink-2:      #16273c;   /* raised navy layer */
  --ink-3:      #22374f;   /* hairlines on dark */
  --ink-4:      #2e4763;   /* hover hairlines on dark */

  --paper:      #FAF9F5;   /* warm off-white: content sections */
  --paper-2:    #F3F1E9;   /* recessed warm wash */
  --surface:    #FFFFFF;   /* cards, panels */
  --muted:      #4A5A6B;   /* secondary text on paper */
  --muted-2:    #6B7A89;   /* tertiary text on paper */
  --line:       #E7E3D8;   /* hairlines on paper */
  --line-2:     #D8D3C4;   /* stronger hairline / hover */

  --gold:       #f69f4c;   /* logo orange accent */
  --gold-lift:  #ffb875;   /* top stop of the orange gradient */
  --gold-deep:  #c27021;   /* orange that passes contrast as text on light */
  --gold-tint:  #fcecd9;   /* soft orange wash */
  --teal:       #e30016;   /* logo red secondary */
  --teal-deep:  #99000f;   /* red as text on light */
  --teal-tint:  #fcdbdc;

  /* Text on dark surfaces */
  --on-dark-1:  #EEF3F8;
  --on-dark-2:  #C4D0DC;
  --on-dark-3:  #94A6B8;

  /* --- Typography -------------------------------------------------------- */
  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "Inter", "Segoe UI", system-ui, sans-serif;


  --fs-eyebrow: 0.78rem;
  --fs-small:   0.875rem;
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
  --fs-h4:      1.0625rem;
  --fs-h3:      clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.6vw, 3.75rem);
  --fs-display: clamp(2.5rem, 1.5rem + 4.9vw, 4.75rem);

  /* --- Spacing (4px base) ------------------------------------------------ */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;    --space-9: 6rem;
  --space-section: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  /* --- Structure --------------------------------------------------------- */
  --maxw: 1200px;
  --maxw-wide: 1320px;
  --maxw-narrow: 760px;
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  /* Elevation: every shadow pairs a tight contact edge with wide ambient
     diffusion — the difference between "has a box-shadow" and "sits on paper" */
  --shadow-xs: 0 1px 1px rgba(14,26,43,.05);
  --shadow-sm: 0 1px 2px rgba(14,26,43,.06), 0 3px 8px -2px rgba(14,26,43,.06);
  --shadow-md: 0 1px 2px rgba(14,26,43,.07), 0 10px 28px -6px rgba(14,26,43,.12);
  --shadow-lg: 0 2px 4px rgba(14,26,43,.06), 0 26px 60px -12px rgba(14,26,43,.20);
  --shadow-gold: 0 10px 28px -6px rgba(240,165,0,.42);
  --edge: inset 0 1px 0 rgba(255,255,255,.7);      /* inner highlight, light */
  --edge-dark: inset 0 1px 0 rgba(255,255,255,.07); /* inner highlight, dark */
  --ring: 0 0 0 3px rgba(240,165,0,.45);

  /* Film grain — the one texture that unifies every dark band */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .5s;
}

/* 2. RESET & BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
  overflow-x: clip;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  width: 100%;
  position: relative;
  padding-top: 74px;
}

/* Prevent long text, emails, and links from overflowing containers */
p, a, span, li, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
::selection { background: var(--gold); color: var(--ink); }

/* Skip link */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--ink); color: #fff; padding: .6rem 1rem;
  border-radius: 8px; font: 600 var(--fs-small)/1 var(--font-body);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* 3. TYPOGRAPHY ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.08;
  letter-spacing: -0.022em; color: var(--ink); text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.032em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
strong { font-weight: 600; }
p {
  max-width: 68ch;
  /* text-wrap: pretty; */
  text-align: justify;
  text-justify: inter-word;
}
.text-center p, .section-head p, .cta-band p.lead {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: center;
}

/* Forms & Form Wraps: ensure justified paragraphs with proper last line alignment and full width */
form p,
.form-card-wrap p,
.form-grid-responsive p {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
  max-width: 100% !important;
}
.form-card-wrap label,
form label {
  text-align: left !important;
}

/* Eyebrow: mono, tracked out, preceded by a short gold rule — the label style
   for every section. The rule is the trajectory motif at its smallest. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; flex: none; display: inline-block;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  line-height: 1.65;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-word;
}
.section-head .lead, .text-center .lead, .hero--center .lead {
  text-align: justify;
  text-align-last: center;
}
.text-mono { font-family: var(--font-mono); }

/* Every number on the site is an instrument reading: tabular, slashed zero */
.stat .n, .hero-proof .num, .event .date, .metric .n, .num-tab,
.timeline .when, .fee, .stat-inline b {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* 4. LAYOUT & SURFACES ===================================================== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.container--wide { max-width: var(--maxw-wide); }
.container--narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section--flush-top { padding-top: 0; }
.section--alt { background: var(--surface); }
.section--wash { background: var(--paper-2); }

.section-head { max-width: var(--maxw-narrow); margin-bottom: var(--space-7); margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: var(--space-4); margin-inline: auto; }
.section-head h2 { margin-top: var(--space-4); }
.section-head .eyebrow { justify-content: center; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
/* Heading on the left, a link or button on the right, aligned to the baseline */
.section-head--split {
  max-width: none; display: flex; justify-content: space-between;
  align-items: flex-end; gap: var(--space-6); flex-wrap: wrap;
}

.grid { display: grid; gap: var(--space-5); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { gap: 1.25rem; }
  .card { padding: 1.35rem 1.15rem; }
}

/* --- Dark surfaces -------------------------------------------------------
   Three stacked layers make a dark band read as lit rather than filled:
   a vertical gradient (depth), a drafting grid (concept), film grain (matter).
   ------------------------------------------------------------------------- */
.on-dark {
  position: relative; isolation: isolate;
  color: var(--on-dark-1);
  background-color: var(--ink);
  background-image: linear-gradient(180deg, var(--ink-0), var(--ink) 52%, var(--ink-2));
}
.on-dark > * { position: relative; z-index: 2; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p { color: var(--on-dark-2); }
.on-dark .lead { color: #A9B8C7; }
.on-dark .eyebrow { color: var(--gold); }
.on-dark .eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold)); }

/* Grain layer */
.on-dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 180px 180px;
  opacity: .16; mix-blend-mode: overlay;
}

/* Drafting grid + ignition glows + gradient edge hairlines */
.blueprint {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(180deg, var(--ink-0), var(--ink) 52%, var(--ink-2));
  background-size: 48px 48px, 48px 48px, 100% 100%;
}
.blueprint::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(115% 85% at 82% -12%, rgba(240,165,0,.17), transparent 58%),
    radial-gradient(90% 80% at -6% 112%, rgba(18,165,148,.13), transparent 58%),
    linear-gradient(90deg, transparent, rgba(240,165,0,.55) 26%, rgba(18,165,148,.42) 64%, transparent);
  background-size: 100% 100%, 100% 100%, 100% 1px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}
.blueprint > * { position: relative; z-index: 2; }
/* Suppress the top hairline where a dark band opens the page */
.blueprint--no-edge::after { background-image:
  radial-gradient(115% 85% at 82% -12%, rgba(240,165,0,.17), transparent 58%),
  radial-gradient(90% 80% at -6% 112%, rgba(18,165,148,.13), transparent 58%); }

/* A hairline divider that carries the trajectory motif: it rises to a lit node */
.rule { position: relative; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line-2) 50%, var(--line) 82%, transparent); }
.rule::after {
  content: ""; position: absolute; top: -3px; left: 62%; width: 7px; height: 7px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(240,165,0,.16);
}
.on-dark .rule { background: linear-gradient(90deg, transparent, var(--ink-3) 18%, var(--ink-4) 50%, var(--ink-3) 82%, transparent); }

/* 5. BUTTONS & LINKS ======================================================= */
.btn {
  --_bg: linear-gradient(180deg, var(--gold-lift), var(--gold));
  --_fg: var(--ink); --_bd: rgba(184,116,0,.35); --_sh: var(--edge), var(--shadow-xs);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
  line-height: 1; padding: .95rem 1.5rem; border-radius: 999px;
  border: 1.5px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--_sh);
  transition: transform .2s var(--ease), box-shadow .24s var(--ease),
              background .24s var(--ease), color .2s var(--ease), border-color .24s var(--ease);
}
/* Sheen: a single soft highlight sweeps across on hover */
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 46%, transparent 62%);
  transform: translateX(-120%); transition: transform .6s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--edge), var(--shadow-gold); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--outline { --_bg: transparent; --_fg: var(--ink); --_bd: var(--line-2); --_sh: none; }
.btn--outline:hover { --_bg: var(--ink); --_fg: #fff; --_bd: var(--ink); box-shadow: var(--shadow-md); }
.btn--outline::after { display: none; }
.on-dark .btn--outline { --_fg: #fff; --_bd: rgba(255,255,255,.34); }
.on-dark .btn--outline:hover { --_bg: rgba(255,255,255,.08); --_fg: #fff; --_bd: rgba(255,255,255,.6); box-shadow: none; }
.btn--ghost { --_bg: transparent; --_bd: transparent; --_fg: var(--ink); --_sh: none; padding-inline: .5rem; }
.btn--ghost:hover { box-shadow: none; transform: none; color: var(--gold-deep); }
.btn--ghost::after { display: none; }
.btn--lg { padding: 1.1rem 1.9rem; font-size: var(--fs-body); }
.btn--sm { padding: .68rem 1.1rem; font-size: .82rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
@media (max-width: 540px) {
  .btn-row { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .btn-row .btn { width: 100%; text-align: center; justify-content: center; }
}

/* Text link with a gold rule that sweeps in from the left */
.link {
  font-weight: 600; color: var(--ink); text-decoration: none;
  position: relative; display: inline-flex; align-items: center; gap: .4rem;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.link:hover::after { transform: scaleX(1); }
.on-dark .link { color: #fff; }

/* 6. HEADER / NAV ========================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(250,249,245,.92);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
/* The header's bottom edge is a gradient hairline, not a border */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
  opacity: 0; transition: opacity .3s var(--ease);
}
.site-header.is-scrolled { background: rgba(250,249,245,.9); box-shadow: 0 8px 30px -14px rgba(14,26,43,.20); }
.site-header.is-scrolled::after { opacity: 1; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 74px; }

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.03em;
}
.brand .mark { width: auto; height: 48px; max-width: 48px; flex: none; object-fit: contain; display: block; transform: none !important; transition: opacity .2s var(--ease); }
.brand:hover .mark { opacity: .92; transform: none !important; }
.brand span b { color: var(--gold-deep); font-weight: 700; }

@media (max-width: 460px) {
  .brand { font-size: 1rem; gap: 0.45rem; }
  .brand .mark { height: 40px; max-width: 40px; }
}
@media (max-width: 360px) {
  .brand { font-size: 0.88rem; gap: 0.35rem; }
  .brand .mark { height: 34px; max-width: 34px; }
}

.nav-menu { display: flex; align-items: center; gap: var(--space-2); }
.nav-links { display: flex; align-items: center; gap: .15rem; }
.nav-links a {
  font-size: var(--fs-small); font-weight: 500; color: var(--ink);
  text-decoration: none; padding: .55rem .8rem; border-radius: 8px;
  position: relative; transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 2px;
  border-radius: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s var(--ease-out);
}
.nav-links a:hover { color: var(--gold-deep); }
.nav-links a:hover::after { transform: scaleX(.55); }
.nav-links a[aria-current="page"] { color: var(--gold-deep); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { margin-left: var(--space-3); }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line-2);
  background: var(--surface); border-radius: 12px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; box-shadow: var(--shadow-xs);
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before { position: absolute; top: -6px; }
.nav-toggle .bars::after  { position: absolute; top:  6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--paper); border-bottom: 1px solid var(--line);
    padding: var(--space-4) clamp(1.15rem,4vw,2.5rem) var(--space-6);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform .28s var(--ease), opacity .28s var(--ease), visibility .28s;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
  }
  .nav-menu.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: .95rem .4rem; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.05rem; }
  .nav-links a::after { display: none; }
  .nav-cta { margin: var(--space-5) 0 0; }
  .nav-cta .btn { width: 100%; text-align: center; justify-content: center; }
}

/* 7. HERO ================================================================== */
.hero { 
  position: relative; 
  overflow: hidden; 
  padding-block: clamp(2rem, 1rem + 2vw, 4rem); 
  min-height: calc(100vh - 74px); 
  display: flex; 
  align-items: center; 
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
.hero-kicker { margin-bottom: var(--space-3); }
.hero h1 { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.7rem); margin-bottom: 1rem; max-width: 100%; line-height: 1.15; font-weight: 700; }
.hero h1 .accent { color: var(--gold); position: relative; white-space: nowrap; }
.hero .lead { font-size: 1.1rem; line-height: 1.55; margin-bottom: 1rem; max-width: 50ch; }
.hero p:not(.lead):not(.eyebrow) { font-size: 1rem; margin-bottom: 2rem; max-width: 55ch; color: rgba(255,255,255,0.85); }
.hero .btn-row { margin-top: 3.5rem; margin-bottom: 0; gap: 1.5rem; }
.hero-proof {
  display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap;
  padding-top: var(--space-5); border-top: 1px solid var(--ink-3);
}
.hero-proof .num { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; color: #fff; letter-spacing: -.03em; line-height: 1.1; }
.hero-proof .num .unit { color: var(--gold); }
.hero-proof .lbl { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--on-dark-3); margin-top: .25rem; }

/* Signature: the trajectory panel */
.hero-visual { position: relative; aspect-ratio: 1 / 1; }
.trajectory { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trajectory .path {
  fill: none; stroke: url(#trajGrad); stroke-width: 3.2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s var(--ease);
  filter: drop-shadow(0 0 10px rgba(240,165,0,.35));
}
.trajectory .path.is-drawn { stroke-dashoffset: 0; }
.trajectory .area { opacity: 0; transition: opacity 1.2s var(--ease); }
.trajectory .area.is-lit { opacity: 1; }
.trajectory .rung { stroke: rgba(255,255,255,.11); stroke-width: 1.5; }
.trajectory .tick { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.trajectory .axis-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; fill: #6f8496; }
.node {
  fill: var(--ink); stroke: var(--gold); stroke-width: 2.5;
  opacity: 0; transform: scale(.4); transform-origin: center; transform-box: fill-box;
}
.node.is-lit { opacity: 1; transform: scale(1); transition: opacity .4s var(--ease), transform .55s var(--ease-out); }
.node--teal { stroke: var(--teal); }
.node--goal { fill: var(--gold); stroke: var(--gold); }
.node-label {
  font-family: var(--font-mono); font-size: 11px; fill: #cdd8e3;
  letter-spacing: .1em; text-transform: uppercase; opacity: 0;
  transition: opacity .45s var(--ease);
}
.node-label.is-lit { opacity: 1; }
/* Removed the literal sparkle strokes: the summit reads better as one calm
   expanding ring than as clip-art rays. */
.halo { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; transform-origin: center; transform-box: fill-box; }
.halo.is-lit { animation: halo 3.4s var(--ease-out) infinite; }
@keyframes halo {
  0%   { opacity: .55; transform: scale(.55); }
  70%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 430px; margin-inline: auto; order: -1; width: 100%; }
  .hero h1 { max-width: 100%; }
}

/* 8. STATS ================================================================= */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.stat { background: var(--surface); padding: var(--space-6) var(--space-5); position: relative; transition: background .25s var(--ease); }
.stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(240,165,0,0));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.stat:hover::before { transform: scaleX(1); }
.stat .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem,1.4rem+2.4vw,3rem); line-height: 1; color: var(--ink); letter-spacing: -.04em; }
.stat .n .suffix { color: var(--gold-deep); }
.stat .k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-top: .65rem; }
.stat .sub { font-size: .82rem; color: var(--muted-2); margin-top: .4rem; }
.on-dark .stats { background: var(--ink-3); border-color: var(--ink-3); box-shadow: none; }
.on-dark .stat { background: rgba(255,255,255,.028); }
.on-dark .stat .n { color: #fff; }
.on-dark .stat .n .suffix { color: var(--gold); }
.on-dark .stat .k { color: var(--on-dark-3); }

/* Compact inline metric row, for interior pages */
.metric-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--space-5) var(--space-6); }
.metric .n { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1.05; letter-spacing: -.035em; color: var(--ink); }
.metric .n .suffix { color: var(--gold-deep); }
.metric .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }
.on-dark .metric .n { color: #fff; }
.on-dark .metric .n .suffix { color: var(--gold); }
.on-dark .metric .k { color: var(--on-dark-3); }

/* 9. CARDS, JOURNEY, SPLITS, BLUEPRINT PANELS ============================== */
.on-dark .card { background: var(--ink-2); border-color: var(--ink-3); }
.on-dark .card p { color: var(--on-dark-2); }
.card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  box-shadow: var(--edge), var(--shadow-sm);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
/* Blueprint corner tick — a drafting mark, top-right. Ties every surface back
   to the grid concept without adding another colour or shape. */
.card::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 12px; height: 12px;
  border-top: 1.5px solid var(--line-2); border-right: 1.5px solid var(--line-2);
  border-top-right-radius: 3px; opacity: .9;
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--edge), var(--shadow-md); border-color: var(--line-2); }
.card:hover::after { border-color: var(--gold); transform: translate(2px,-2px); }
.card .card-icon {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: linear-gradient(180deg, #fff6dd, var(--gold-tint));
  color: var(--gold-deep); margin-bottom: var(--space-2);
  box-shadow: inset 0 0 0 1px rgba(184,116,0,.14);
  transition: transform .28s var(--ease-out);
}
.card:hover .card-icon { transform: translateY(-2px) scale(1.04); }
.card--teal .card-icon { background: linear-gradient(180deg, #eafaf7, var(--teal-tint)); color: var(--teal-deep); box-shadow: inset 0 0 0 1px rgba(10,107,96,.14); }
.card h3 { font-size: 1.22rem; }
.card p {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.65;
  text-align: justify;
  text-justify: inter-word;
}
.card .card-link {
  margin-top: auto; padding-top: var(--space-2);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  color: var(--gold-deep); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem; letter-spacing: .04em;
  word-break: break-all;
  max-width: 100%;
}
.card--teal .card-link { color: var(--teal-deep); }
.card .card-link .arrow { transition: transform .2s var(--ease); }
.card:hover .card-link .arrow { transform: translateX(4px); }
.card--flat { box-shadow: none; }
.card--flat:hover { transform: none; box-shadow: var(--edge), var(--shadow-sm); }
/* A whole card can be the link */
a.card, a.person, a.pathway { text-decoration: none; color: inherit; }

/* Featured card: a gold gradient hairline instead of a flat border */
.card--feature {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, var(--gold), rgba(240,165,0,.15) 42%, var(--teal)) border-box;
  border: 1.5px solid transparent;
}
.card--feature::after { border-color: var(--gold); }

/* Card on a dark band */
.card--dark {
  background: rgba(255,255,255,.035); border-color: var(--ink-3);
  box-shadow: var(--edge-dark);
}
.card--dark::after { border-color: var(--ink-4); }
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--on-dark-2); }
.card--dark:hover { border-color: var(--ink-4); background: rgba(255,255,255,.055); box-shadow: var(--edge-dark), 0 20px 40px -20px rgba(0,0,0,.6); }
.card--dark .card-icon { background: rgba(240,165,0,.14); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(240,165,0,.22); }
.card--dark .card-link { color: var(--gold); }

/* Journey — a real 4-step sequence, so the numbering carries information */
.journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); counter-reset: step; max-width: 1000px; margin: 0 auto; }
.step { position: relative; padding-top: var(--space-6); text-align: center; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--gold-deep);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); letter-spacing: .1em;
  font-variant-numeric: tabular-nums slashed-zero;
}
.step::after {
  content: ""; position: absolute; top: 7px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 7px, transparent 7px 14px);
}
.step:last-child::after { display: none; }
.step h3 { font-size: 1.15rem; margin-top: var(--space-3); margin-bottom: var(--space-2); }
.step p { font-size: var(--fs-small); color: var(--muted); text-align: justify; text-justify: inter-word; }
.on-dark .step::before { color: var(--gold); }
.on-dark .step::after { background: repeating-linear-gradient(90deg, var(--ink-4) 0 7px, transparent 7px 14px); }
.on-dark .step p { color: #A9B8C7; }




@media (max-width: 1000px) { .journey { grid-template-columns: repeat(3, 1fr); } .step:nth-child(3)::after { display: none; } }
@media (max-width: 760px) { .journey { grid-template-columns: repeat(2, 1fr); } .step:nth-child(even)::after { display: none; } .step:nth-child(3)::after { display: block; } }
@media (max-width: 500px) { .journey { grid-template-columns: 1fr; } .step::after { display: none !important; } }

  /* Feature split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
/* Visual on the left, words on the right. Markup always stays text-first so the
   mobile stack leads with the words no matter which way the desktop row runs. */
.split--reverse > :first-child { order: 2; }
.split--top { align-items: start; }
.split--wide-text { grid-template-columns: 1.15fr .85fr; }
.split-media {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--ink); aspect-ratio: 4/3;
}
@media (max-width: 840px) { .split, .split--wide-text { grid-template-columns: 1fr; } .split--reverse > :first-child { order: 0; } }

/* Blueprint panel — the interior-page answer to a stock photo. A dark drafting
   plate holding an inline SVG diagram drawn in gold and teal. */
.bp-panel {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(160deg, var(--ink-2), var(--ink-0));
  background-size: 32px 32px, 32px 32px, 100% 100%;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3; display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.25rem);
}
.bp-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 180px; opacity: .13; mix-blend-mode: overlay;
}
.bp-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 78% -10%, rgba(240,165,0,.20), transparent 60%);
}
.bp-panel > svg { position: relative; z-index: 1; width: 100%; height: auto; overflow: visible; }
/* Shared vocabulary for every diagram drawn inside a blueprint panel */
.bp-panel .bp-grid   { stroke: rgba(255,255,255,.14); stroke-width: 1; fill: none; }
.bp-panel .bp-line   { stroke: var(--gold); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bp-panel .bp-line-2 { stroke: var(--teal); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bp-panel .bp-dash   { stroke: rgba(255,255,255,.3); stroke-width: 1.5; fill: none; stroke-dasharray: 5 6; stroke-linecap: round; }
.bp-panel .bp-fill   { fill: rgba(240,165,0,.12); stroke: none; }
.bp-panel .bp-fill-2 { fill: rgba(18,165,148,.14); stroke: none; }
.bp-panel .bp-dot    { fill: var(--gold); stroke: none; }
.bp-panel .bp-dot-2  { fill: var(--teal); stroke: none; }
/* Solid bars, for gantt rows and column charts — a 12% fill is too faint to read
   as a measured quantity, which is the whole point of a bar. */
.bp-panel .bp-bar    { fill: rgba(240,165,0,.55); stroke: none; }
.bp-panel .bp-bar-2  { fill: rgba(18,165,148,.5); stroke: none; }
.bp-panel .bp-ring   { fill: var(--ink); stroke: var(--gold); stroke-width: 2.2; }
.bp-panel .bp-label  { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; fill: #9fb0c2; }
.bp-panel .bp-value  { font-family: var(--font-mono); font-size: 13px; font-weight: 600; fill: #fff; font-variant-numeric: tabular-nums slashed-zero; }
.bp-panel--tall { aspect-ratio: 1 / 1; }

/* Check list */
.check-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.check-list li { display: flex; gap: .75rem; align-items: center; color: var(--muted); font-size: var(--fs-small); }
.check-list .tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal-tint); color: var(--teal-deep);
  display: grid; place-items: center; margin-top: 2px;
}
.check-list--gold .tick { background: var(--gold-tint); color: var(--gold-deep); }
.on-dark .check-list li { color: var(--on-dark-2); }
.on-dark .check-list .tick { background: rgba(18,165,148,.2); color: #6fdccd; }

/* Spec list — mono key / value rows for program facts */
.spec-list { display: grid; gap: 0; margin-top: var(--space-5); border-top: 1px solid var(--line); }
.spec-list > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-4); padding: .8rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.spec-list dt, .spec-list .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.spec-list dd, .spec-list .v { margin: 0; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.on-dark .spec-list, .on-dark .spec-list > div { border-color: var(--ink-3); }
.on-dark .spec-list dd, .on-dark .spec-list .v { color: #fff; }
/* --muted-2 is tuned for paper; on navy it only reaches 3.9:1, so lift the keys. */
.on-dark .spec-list dt, .on-dark .spec-list .k { color: var(--on-dark-3); }
@media (max-width: 520px) { .spec-list > div { grid-template-columns: 1fr; gap: .2rem; } }

/* 10. EVENTS, FILTERS, PARTNERS ============================================ */
.event {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5);
  align-items: center; padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-inline: calc(var(--space-4) * -1);
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.event:first-child { border-top: 1px solid var(--line); }
/* When a list can be filtered, the container owns the top rule instead — otherwise
   hiding the first row takes the rule with it and the list loses its top edge. */
.event-list { border-top: 1px solid var(--line); }
.event-list .event:first-child { border-top: 0; }
.event:hover { background: var(--surface); transform: translateX(4px); box-shadow: var(--shadow-sm); border-bottom-color: transparent; }
.event .date { text-align: center; font-family: var(--font-display); line-height: 1; min-width: 64px; }
.event .date .d { font-size: 1.95rem; font-weight: 700; color: var(--ink); letter-spacing: -.04em; }
.event .date .m { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-top: .15rem; }
.event .date .y { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--muted-2); }
.event h3 { font-size: 1.18rem; margin-top: .5rem; }
.event .meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .4rem; color: var(--muted); font-size: var(--fs-small); }
.event .meta .sep { color: var(--line-2); }
.event .go { color: var(--ink); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.event:hover .go { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateX(3px); }
.event--past { opacity: .78; }
.event--past .date .d { color: var(--muted); }
.event--past:hover { transform: none; }
.event.is-hidden { display: none; }
.events--past .event .go { display: none; }
@media (max-width: 640px) {
  .event { grid-template-columns: auto 1fr; gap: var(--space-4); }
  .event .go { grid-column: 2; justify-self: start; margin-top: .5rem; }
}

.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .62rem; border-radius: 999px;
  background: var(--gold-tint); color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(184,116,0,.12);
}
.pill--teal { background: var(--teal-tint); color: var(--teal-deep); box-shadow: inset 0 0 0 1px rgba(10,107,96,.12); }
.pill--ink { background: rgba(14,26,43,.06); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(14,26,43,.08); }
.pill--quiet { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Filter bar — real filtering, driven by data-filter in main.js */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: var(--space-6); }
.filters .filter {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .6rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: var(--muted);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.filters .filter:hover { border-color: var(--ink); color: var(--ink); }
.filters .filter[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--shadow-sm);
}
.filter-count { font-family: var(--font-mono); font-size: .74rem; color: var(--muted-2); margin-left: auto; letter-spacing: .06em; }
.filter-empty { display: none; padding: var(--space-7) 0; text-align: center; color: var(--muted); }
.filter-empty.is-visible { display: block; }

/* Partners — a slow marquee reads as an active network, not a logo dump */
.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem,4vw,3.5rem); }
.partners .logo {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--muted-2); letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  opacity: .9; transition: color .2s var(--ease), opacity .2s var(--ease);
}
.partners .logo:hover { color: #fff; opacity: 1; }
.partners.is-light .logo { color: #93a1b0; }
.partners.is-light .logo:hover { color: var(--ink); opacity: 1; }
.partners-note {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); text-align: center;
  margin-bottom: var(--space-5);
}
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: clamp(2rem,5vw,4rem); animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .partners { flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 11. TESTIMONIALS & PULL QUOTES =========================================== */
.quote {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-7) var(--space-6) var(--space-6);
  box-shadow: var(--edge), var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-5);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.quote:hover { transform: translateY(-3px); box-shadow: var(--edge), var(--shadow-md); }
.quote .mark { font-family: var(--font-display); font-size: 3.4rem; line-height: .5; color: var(--gold); height: 1.1rem; }
.quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: 1.28rem; line-height: 1.42; color: var(--ink); letter-spacing: -.018em; }
.quote .who { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--gold-lift), #e77a1e);
  display: grid; place-items: center; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.avatar--teal { background: linear-gradient(140deg, #4bd6c4, var(--teal-deep)); color: #fff; }
.avatar--ink { background: linear-gradient(140deg, var(--ink-2), var(--ink-0)); color: var(--gold); }
.quote .who .name { font-weight: 600; }
.quote .who .role { font-size: var(--fs-small); color: var(--muted); }

/* Feature pull quote, for a single voice given room */
.quote--feature { padding: clamp(2rem,4vw,3.5rem); }
.quote--feature blockquote { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.05rem); line-height: 1.3; }
.quote--dark { background: rgba(255,255,255,.035); border-color: var(--ink-3); box-shadow: var(--edge-dark); }
.quote--dark blockquote { color: #fff; }
.quote--dark .who { border-top-color: var(--ink-3); }
.quote--dark .who .role { color: var(--on-dark-3); }
.quote--dark:hover { transform: none; box-shadow: var(--edge-dark); }

/* 12. CTA BAND ============================================================= */
.cta-band { border-radius: var(--radius-xl); padding: clamp(2.5rem,4vw,4.5rem); overflow: hidden; text-align: center; }
.cta-band h2 { max-width: 20ch; margin: 0 auto; }
.cta-band .lead { max-width: 54ch; margin: var(--space-4) auto 0 auto; text-align: justify; text-align-last: center; }
.cta-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); margin-top: var(--space-7); }
.cta-cards a { text-decoration: none; }
.cta-choice {
  position: relative; height: 100%;
  border: 1px solid var(--ink-3); border-radius: var(--radius); padding: var(--space-5);
  background: rgba(255,255,255,.03); box-shadow: var(--edge-dark);
  transition: border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
  text-align: center;
}
.cta-choice:hover { border-color: var(--gold); background: rgba(240,165,0,.09); transform: translateY(-3px); }
.cta-choice .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); text-align: center; }
.cta-choice h3 { font-size: 1.18rem; margin: .55rem 0 .35rem; color: #fff; text-align: center; }
.cta-choice p { font-size: var(--fs-small); color: #A9B8C7; text-align: center !important; text-align-last: center !important; text-justify: auto !important; }
.cta-choice .arrow { display: inline-block; margin-top: var(--space-4); color: var(--gold); transition: transform .22s var(--ease); text-align: center; }
.cta-choice:hover .arrow { transform: translateX(4px); }
@media (max-width: 760px) { .cta-cards { grid-template-columns: 1fr; } }

/* 13. NEWSLETTER =========================================================== */
.newsletter { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.subscribe { display: flex; gap: .6rem; flex-wrap: wrap; }
.subscribe input { flex: 1 1 240px; }
@media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; } .subscribe .btn { width: 100%; } }

/* 14. FORMS, PANELS, INFO LISTS ============================================ */
.field { display: grid; gap: .45rem; margin-bottom: var(--space-4); }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.field .req { color: var(--gold-deep); }
.field .hint { font-size: .8rem; color: var(--muted-2); }
input, textarea, select {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 10px;
  padding: .8rem 1rem; width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5A6B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
textarea { min-height: 140px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9aa7b3; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: var(--ring); }
.on-dark input, .on-dark textarea, .on-dark select { background: var(--ink-2); border-color: var(--ink-3); color: #fff; }
.on-dark input::placeholder, .on-dark textarea::placeholder { color: #7d8ea0; }
.field .error { font-size: .8rem; color: #C62F2F; display: none; }
.field.has-error .error { display: block; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #C62F2F; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); align-items: start; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-note { font-size: var(--fs-small); color: var(--muted-2); margin-top: var(--space-3); }
.form-success {
  display: none; align-items: center; gap: .8rem;
  background: var(--teal-tint); border: 1px solid var(--teal);
  border-radius: var(--radius); padding: var(--space-5); color: var(--teal-deep);
}
.form-success.is-visible { display: flex !important; }
.form-success .ok { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: .8rem; }
/* label.checkbox, not .checkbox — it has to out-specify `.field label`, which is
   bold. A consent line is body copy, not a field label. */
label.checkbox { display: flex; gap: .6rem; align-items: center; font-size: var(--fs-small); color: var(--muted); font-weight: 400; }
.checkbox input { width: auto; margin-top: .28rem; accent-color: var(--gold); flex: none; }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.6rem);
  box-shadow: var(--edge), var(--shadow-md);
}
.panel--flat { box-shadow: var(--edge), var(--shadow-sm); }
.panel--dark { background: rgba(255,255,255,.035); border-color: var(--ink-3); box-shadow: var(--edge-dark); }
.panel-head { margin-bottom: var(--space-5); }
.panel-head h2, .panel-head h3 { margin-top: var(--space-3); }

/* Callout — deadlines, eligibility, anything the reader must not miss */
.callout {
  display: flex; gap: var(--space-4); align-items: center;
  border-radius: var(--radius); padding: var(--space-5);
  background: var(--gold-tint); border: 1px solid rgba(184,116,0,.28);
}
.callout .ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; }
.callout h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.callout p { font-size: var(--fs-small); color: #6b4a06; margin-top: .3rem; }
.callout--teal { background: var(--teal-tint); border-color: rgba(10,107,96,.24); }
.callout--teal .ic { background: var(--teal); color: #fff; }
.callout--teal h4 { color: var(--teal-deep); }
.callout--teal p { color: #0b4f47; }

/* Contact info list */
.info-list { display: grid; gap: var(--space-5); }
.info-list li { display: flex; gap: var(--space-4); align-items: center; }
.info-list .ic {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(180deg, #fff6dd, var(--gold-tint));
  color: var(--gold-deep); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(184,116,0,.14);
}
.info-list .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.info-list a, .info-list p { color: var(--ink); text-decoration: none; font-weight: 500; margin-top: .2rem; }
.info-list a:hover { color: var(--gold-deep); }

/* 15. INTERIOR PAGES ======================================================= */
.page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); overflow: hidden; }
.page-hero-grid { 
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(3rem, 5vw, 6rem); align-items: center; text-align: left; 
}
.page-hero-grid > div:first-child { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.page-hero-grid h1 { max-width: 100%; margin-block: var(--space-4) var(--space-5); text-align: left; }
.page-hero-grid .lead,
.page-hero-grid p { max-width: 55ch; text-align: justify; text-justify: inter-word; text-align-last: left !important; }
.page-hero-grid .eyebrow { justify-content: flex-start; text-align: left; }

/* Contact page layout overrides */
#hero-contact .info-list p, #hero-contact .info-list a { color: rgba(255,255,255,0.9); }
#hero-contact .info-list .k { color: rgba(255,255,255,0.6); }
#hero-contact .panel { background: #fff; color: #16273c; padding: 1.5rem 2rem; }
#hero-contact .panel-head { margin-bottom: 1.5rem; }
#hero-contact .panel-head p, #hero-contact .panel-head h2 { color: #16273c; margin: 0; }
#hero-contact .panel-head h2 { margin-top: 0.25rem; font-size: 1.2rem !important; }
#hero-contact .panel .field { margin-bottom: 0.85rem; gap: 0.25rem; }
#hero-contact .panel label { color: #16273c; font-size: 0.8rem; }
#hero-contact .panel input, #hero-contact .panel textarea, #hero-contact .panel select {
  background: #fff; color: #16273c; border-color: #d1d9e0;
  padding: 0.5rem 0.75rem; font-size: 0.9rem; border-radius: 6px;
}
#hero-contact .panel input:focus, #hero-contact .panel textarea:focus, #hero-contact .panel select:focus { border-color: var(--gold-deep); }
#hero-contact .panel .btn { margin-top: 0.5rem !important; padding: 0.6rem 1.2rem; }

.metric-band { 
  grid-column: 2; grid-row: 1; 
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; 
  width: 100%;
}
.metric-band .metric {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.metric-band .metric:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.04);
  border-color: rgba(240,165,0,0.3);
}
.metric-band .metric:first-child { grid-column: 1 / span 2; }

@media (max-width: 900px) { 
  .page-hero-grid { grid-template-columns: 1fr; text-align: left; gap: 2.5rem; }
  .page-hero-grid > div:first-child { grid-column: 1; grid-row: 1; text-align: left; }
  .page-hero-grid .eyebrow { justify-content: flex-start; }
  .page-hero-grid h1 { text-align: left; }
  .metric-band { grid-column: 1; grid-row: 2; }
}
.breadcrumb { display: none; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .09em; color: #8fa0b1; text-transform: uppercase; }
.breadcrumb a { color: #b9c6d3; text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { color: var(--ink-4); margin-inline: .35rem; }

/* Timeline — dates carry real information, so the sequence is explicit */
.timeline { display: grid; gap: 0; position: relative; }
.timeline .tl-item { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-5); padding: var(--space-5) 0 var(--space-6) 0; }
.timeline .tl-item::before {
  content: ""; position: absolute; left: calc(7.5rem / 2); top: 2.4rem; bottom: -.4rem;
  width: 2px; background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 12px);
}
.timeline .tl-item:last-child::before { display: none; }
.timeline .when {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  color: var(--gold-deep); text-align: center; position: relative; padding-top: .1rem;
}
.timeline .when::after {
  content: ""; display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--gold);
  margin: .9rem auto 0; box-shadow: 0 0 0 4px rgba(240,165,0,.14);
}
.timeline h3 { font-size: 1.2rem; }
.timeline p { color: var(--muted); font-size: var(--fs-small); margin-top: .45rem; }
.on-dark .timeline .tl-item::before { background: repeating-linear-gradient(180deg, var(--ink-4) 0 6px, transparent 6px 12px); }
.on-dark .timeline .when { color: var(--gold); }
.on-dark .timeline .when::after { background: var(--ink); }
@media (max-width: 600px) {
  .timeline .tl-item { grid-template-columns: 1fr; gap: var(--space-2); padding-left: 1.75rem; }
  .timeline .tl-item::before { left: 5px; top: 1.9rem; }
  .timeline .when { text-align: left; display: flex; align-items: center; gap: .6rem; }
  .timeline .when::after { margin: 0; order: -1; }
}

/* People / Leader Cards */
.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 18px;
  padding: 2.75rem 2rem;
  box-shadow: 0 4px 20px -4px rgba(14, 26, 43, 0.06);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s;
  height: 100%;
  position: relative;
}
.person:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 42px -10px rgba(14, 26, 43, 0.12), 0 0 0 1px rgba(240, 165, 0, 0.35);
  border-color: var(--gold);
}
.person .avatar-frame {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, rgba(240, 165, 0, 0.4), rgba(18, 165, 148, 0.25));
  margin: 0 auto 1.25rem auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  flex: none;
}
.person .avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #fff;
  border: none;
  transform: none !important;
}
.person:hover .avatar, .person:hover .avatar-frame {
  transform: none !important;
}
.person h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.person .role-badge {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(240, 165, 0, 0.12);
  padding: .35rem .95rem;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: .6rem;
}
.person .leader-tagline {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin-bottom: 1.25rem;
}
.person .leader-divider {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin-bottom: 1.25rem;
}
.person p {
  font-size: 0.92rem;
  color: #4B5563;
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.person .person-links {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.person .linkedin-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.35rem;
  border-radius: 999px;
  border: 1.5px solid var(--line-2);
  background: #ffffff;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s var(--ease);
}
.person .linkedin-btn:hover {
  background: #0077b5;
  border-color: #0077b5;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 119, 181, 0.35);
}

/* FAQ — native <details>, so keyboard and screen-reader behaviour is free */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  color: var(--ink); letter-spacing: -.015em; transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-deep); }
.faq summary .sign { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: border-color .2s var(--ease), transform .3s var(--ease); }
.faq summary .sign::before, .faq summary .sign::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--ink);
  transition: transform .3s var(--ease), background .2s var(--ease);
}
.faq summary .sign::before { width: 9px; height: 1.5px; }
.faq summary .sign::after  { width: 1.5px; height: 9px; }
.faq details[open] summary { color: var(--gold-deep); }
.faq details[open] summary .sign { border-color: var(--gold); transform: rotate(90deg); }
.faq details[open] summary .sign::after { transform: scaleY(0); }
.faq details[open] summary .sign::before { background: var(--gold-deep); }
.faq .answer { padding-bottom: var(--space-5); }
.faq .answer p { color: var(--muted); max-width: 72ch; text-align: justify; text-justify: inter-word; line-height: 1.65; }
.faq .answer p + p { margin-top: var(--space-3); }
.on-dark .faq, .on-dark .faq details { border-color: var(--ink-3); }
.on-dark .faq summary { color: #fff; }
.on-dark .faq summary .sign { border-color: var(--ink-4); }
.on-dark .faq summary .sign::before, .on-dark .faq summary .sign::after { background: #fff; }
.on-dark .faq details[open] summary { color: var(--gold); }

/* Anchored program block: scroll target with a mono index above the heading */
.anchor-block { scroll-margin-top: 96px; }
.block-index { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .14em; color: var(--muted-2); font-variant-numeric: tabular-nums slashed-zero; }
.on-dark .block-index { color: var(--on-dark-3); }

/* Pathway card — the get-involved routes */
.pathway {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
  align-items: start; padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--edge), var(--shadow-sm); text-decoration: none;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.pathway:hover { transform: translateY(-3px); box-shadow: var(--edge), var(--shadow-md); border-color: var(--line-2); }
.pathway .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(180deg,#fff6dd,var(--gold-tint)); color: var(--gold-deep); box-shadow: inset 0 0 0 1px rgba(184,116,0,.14); }
.pathway h3 { font-size: 1.1rem; }
.pathway p { font-size: var(--fs-small); color: var(--muted); margin-top: .35rem; }
.pathway .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
/* Four-up pathways land at ~262px, which leaves the text column only ~126px —
   narrow enough to shred the copy into two-word lines. Stack the icon instead. */
.grid-4 .pathway { grid-template-columns: 1fr; gap: var(--space-4); }

/* 16. FOOTER =============================================================== */
.site-footer {
  position: relative; color: #b9c6d3; padding-block: var(--space-8) var(--space-6);
  background-color: var(--ink);
  background-image: linear-gradient(180deg, var(--ink) 0%, var(--ink-0) 100%);
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,165,0,.5) 26%, rgba(18,165,148,.4) 64%, transparent);
}
.footer-top { display: grid; grid-template-columns: 1.4fr 0.85fr 1.1fr 1.35fr; gap: var(--space-6); padding-bottom: var(--space-7); border-bottom: 1px solid var(--ink-3); }
.footer-brand .brand { color: #fff; margin-bottom: var(--space-4); }
.footer-brand p { color: #93a4b5; font-size: var(--fs-small); max-width: 36ch; }
.footer-col h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: #6f8092; font-weight: 500; margin-bottom: var(--space-4); }
.footer-col ul { display: grid; gap: .7rem; list-style: none; padding: 0; }
.footer-col a { color: #b9c6d3; text-decoration: none; font-size: var(--fs-small); transition: color .18s var(--ease), padding-left .18s var(--ease); }
.footer-col a:hover { color: var(--gold); padding-left: 3px; }
.footer-col a[href^="mailto:"] { white-space: nowrap; word-break: keep-all; }
.socials { display: flex; gap: .6rem; margin-top: var(--space-5); }
.socials a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--ink-3); display: grid; place-items: center; color: #b9c6d3; transition: border-color .2s, color .2s, background .2s, transform .2s var(--ease); }
.socials a:hover { border-color: var(--gold); color: var(--gold); background: rgba(240,165,0,.08); transform: translateY(-2px); }
.footer-social a:hover { background: var(--gold) !important; color: #0b1523 !important; transform: translateY(-2px); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; padding-top: var(--space-6); font-size: var(--fs-small); color: #7d8ea0; padding-right: 3.75rem; }
.footer-bottom .legal { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer-bottom a { color: #7d8ea0; text-decoration: none; }
.footer-bottom a:hover { color: #b9c6d3; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

/* 17. UTILITIES, REVEAL, CHROME, REDUCED MOTION ============================ */

/* Reading progress disabled as requested */
.progress {
  display: none !important;
}

.to-top {
  position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, border-color .2s, color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--gold); color: var(--gold-deep); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }

/* Failsafe: anything that starts hidden and waits for JS must still be readable
   when scripting is unavailable. Paired with a timeout guard in main.js for
   browsers that don't support the `scripting` media feature. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
  .trajectory .path { stroke-dashoffset: 0; }
  .trajectory .area, .node, .node-label { opacity: 1; transform: none; }
}

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.measure { max-width: 62ch; }
.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; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .trajectory .path { transition: none; stroke-dashoffset: 0; }
  .node, .node-label { opacity: 1 !important; transform: none !important; }
  .trajectory .area { opacity: 1; transition: none; }
  .halo.is-lit { animation: none; opacity: .35; }
  .marquee-track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .btn::after { display: none; }
  .btn:hover, .card:hover, .quote:hover, .person:hover, .pathway:hover, .event:hover { transform: none; }
  .progress { display: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   18. PREMIUM REFINEMENT PASS (v4) — Growth Sense Foundation
   Layered on top of the base system: sharper type, warmer paper, deeper
   elevation, one scroll-progress filament, and richer accent treatments.
   ========================================================================== */

:root {
  --paper:   #FBFAF6;
  --paper-2: #F2F0E7;
  --gold-deep: #A96B00;
  --shadow-lg: 0 2px 4px rgba(14,26,43,.05), 0 18px 40px -18px rgba(14,26,43,.18),
               0 44px 90px -30px rgba(14,26,43,.22);
  --shadow-md: 0 1px 2px rgba(14,26,43,.06), 0 12px 32px -10px rgba(14,26,43,.14);
}

/* --- Paper gets an almost invisible tooth so it reads as stock, not #fff --- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 200px 200px;
  opacity: .035; mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 1; }

/* --- Scroll-progress filament in the header disabled as requested -- */
.site-header::before { display: none !important; }

/* --- Display type: tighter, more editorial ------------------------------- */
h1, h2 { letter-spacing: -.028em; }
.hero h1 { font-weight: 700; }

/* Accent word: solid gold, no gradient fill */
.accent { color: var(--gold-deep); background: none; -webkit-text-fill-color: currentColor; position: relative; }
.on-dark .accent { color: var(--gold-lift); -webkit-text-fill-color: currentColor; }


/* --- Cards & panels: contact edge + lit top hairline --------------------- */
.card, .panel, .form-card, .event, .metric, .tier, .role {
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out),
              border-color .32s var(--ease);
}
.card::before, .tier::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,165,0,.55), transparent);
  opacity: 0; transition: opacity .32s var(--ease);
}
.card, .tier { position: relative; }
.card:hover, .tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card:hover::before, .tier:hover::before { opacity: 1; }

/* --- Stats: instrument readouts sit on a hairline plate ------------------ */
.stat .n, .hero-proof .num { letter-spacing: -.04em; }
.stat { position: relative; }

/* --- Dark bands: a touch more atmosphere -------------------------------- */
.blueprint::after {
  background-image:
    radial-gradient(120% 90% at 84% -14%, rgba(240,165,0,.20), transparent 58%),
    radial-gradient(95% 85% at -8% 114%, rgba(18,165,148,.16), transparent 58%),
    linear-gradient(90deg, transparent, rgba(240,165,0,.6) 26%, rgba(18,165,148,.45) 64%, transparent);
  background-size: 100% 100%, 100% 100%, 100% 1px;
  background-repeat: no-repeat;
}

/* --- Buttons: a hair more presence -------------------------------------- */
.btn { letter-spacing: .005em; }
.btn:not(.btn--outline):not(.btn--ghost) {
  box-shadow: var(--edge), 0 1px 2px rgba(14,26,43,.10), 0 10px 24px -12px rgba(240,165,0,.55);
}

/* --- Footer brand line -------------------------------------------------- */
.site-footer .brand span { letter-spacing: -.03em; }

/* --- Focus ring: gold halo, always visible on dark ---------------------- */
:focus-visible { box-shadow: 0 0 0 3px rgba(240,165,0,.55), 0 0 0 6px rgba(240,165,0,.16); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .tier:hover { transform: none; }
  .site-header::before { animation: none; }
}







/* Dropdown Navigation */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle { 
  background: transparent; border: none; font-size: var(--fs-small); font-weight: 500; color: var(--ink);
  cursor: pointer; display: flex; align-items: center; gap: 8px; padding: .55rem .8rem; border-radius: 8px;
  position: relative; transition: background .2s var(--ease), color .2s var(--ease);
}

.nav-dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0.4em; height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-bottom: 3px;
  transition: transform 0.2s ease;
}
.nav-dropdown-toggle:hover { color: var(--gold-deep); }
.nav-dropdown:hover .nav-dropdown-toggle::after {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-2) 0;
  min-width: 180px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 100;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-menu a {
  display: block; padding: var(--space-2) var(--space-4);
  color: var(--text) !important; text-decoration: none;
  font-size: 0.95rem;
  text-align: left;
}
.nav-dropdown-menu a:hover {
  background: var(--bg); color: var(--gold) !important;
}
@media (max-width: 940px) {
  .nav-dropdown-menu {
    position: static; box-shadow: none; border: none; background: transparent;
    opacity: 1; visibility: visible; transform: none; padding-left: var(--space-4);
    display: none;
  }
  .nav-dropdown.is-open .nav-dropdown-menu { display: block; }
}

.nav-dropdown-menu a::after { transform-origin: left !important; }

.cta-choice {
  text-align: center !important;
}
.cta-choice p,
.cta-choice h3,
.cta-choice .k {
  text-align: center !important;
  text-align-last: center !important;
  text-justify: auto !important;
}
.cta-choice .arrow {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.card p,
.card--dark p {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
}
.card ul,
.card li {
  text-align: justify;
  text-justify: inter-word;
}

.timeline-item .card p { text-align: justify; text-align-last: center; }
.timeline-item .card h3 { text-align: center; }

/* ==========================================================================
   16. SHUTTER-STYLE SLIDING LEADERSHIP DECK (ADANI STYLE)
   Smooth 1:1 scroll-driven shutter reveal, stacked cards with realistic depth,
   Inter headlines, gold accents, clean editorial typography
   ========================================================================== */

:root {
  --font-serif: var(--font-display, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --gold-accent: #b8860b;
  --gold-subtle: rgba(184, 134, 11, 0.15);
}

.leadership-scroll-section {
  position: relative;
  background: #faf8f5;
  color: #1a2744;
}

/* Scroll Stage Container */
.leadership-scroll-container {
  position: relative;
  height: 280vh; /* Smooth, natural scroll headroom for 3 directors */
}

.leadership-sticky-stage {
  position: sticky;
  top: 74px;
  height: calc(100vh - 74px);
  min-height: 560px;
  max-height: calc(100vh - 74px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, rgba(240, 165, 0, 0.06) 0%, #faf8f5 70%);
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
  box-sizing: border-box;
}

/* Individual Leader Shutter Cards - positioned absolutely so they stack directly on top of each other */
.leader-shutter-card {
  position: absolute;
  max-width: 1040px;
  width: min(92%, 1040px);
  max-height: calc(100vh - 110px);
  background: #ffffff;
  border: 1.5px solid rgba(229, 149, 0, 0.35);
  border-radius: 18px;
  box-shadow: 0 -12px 35px -5px rgba(14, 26, 43, 0.12), 0 25px 60px -15px rgba(14, 26, 43, 0.15);
  padding: clamp(1.75rem, 2.25vw, 2.35rem) clamp(2rem, 3vw, 2.75rem);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.75rem;
  align-items: center;
  will-change: transform;
}

/* Stacking z-indices & initial positions: Sanjay at base, Jimish & Rahul below stage waiting to slide UP from bottom */
.leader-shutter-card[data-index="0"] {
  z-index: 10;
  transform: translate3d(0, 0, 0);
  visibility: visible;
}
.leader-shutter-card[data-index="1"] {
  z-index: 20;
  transform: translate3d(0, 120vh, 0);
  visibility: hidden;
}
.leader-shutter-card[data-index="2"] {
  z-index: 30;
  transform: translate3d(0, 120vh, 0);
  visibility: hidden;
}

/* Simple Director title word below leader name */
.lsc-role-badge {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold-accent);
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  display: block;
  text-transform: none;
  margin-bottom: 0.75rem;
}

/* Left: Portrait Column */
.lsc-portrait-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lsc-portrait-frame {
  width: 235px;
  height: 275px;
  border-radius: 12px;
  padding: 7px;
  background: linear-gradient(135deg, rgba(229, 149, 0, 0.08) 0%, rgba(229, 149, 0, 0.02) 100%);
  border: 2px solid rgba(229, 149, 0, 0.25);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  position: relative;
}

.lsc-avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transform: none !important;
}

.lsc-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 250px;
  margin-top: 1.25rem;
  padding: 0.7rem 1.25rem;
  border-radius: 50px;
  border: 1.5px solid rgba(229, 149, 0, 0.32);
  background: #ffffff;
  color: #0E1A2B;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.lsc-linkedin svg {
  color: #0077b5;
  transition: color 0.2s ease;
}

.lsc-linkedin:hover {
  background: #0077b5;
  border-color: #0077b5;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 119, 181, 0.25);
}

.lsc-linkedin:hover svg {
  color: #ffffff;
}

/* Right: Dossier Column */
.lsc-details-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}

.lsc-name {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
  font-weight: 700;
  color: #0E1A2B;
  letter-spacing: -0.015em;
  margin: 0 0 0.35rem 0;
  line-height: 1.15;
}

.lsc-divider {
  width: 45px;
  height: 2px;
  background: var(--gold-accent);
  margin-bottom: 0.75rem;
}

.lsc-bio p {
  font-family: var(--font-body);
  font-size: 0.885rem;
  color: #4b5563;
  line-height: 1.58;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
  margin-bottom: 0.6rem;
}

.lsc-bio p:last-child {
  margin-bottom: 0;
}

/* Official Document Bullet List */
.lsc-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.lsc-bullet-list li {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.55;
  position: relative;
  padding-left: 1.25rem;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
}

.lsc-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--gold-accent);
  font-size: 1.15rem;
  line-height: 1.55;
}

.lsc-bullet-list strong {
  color: #0E1A2B;
  font-weight: 600;
}

/* Responsive for Mobile / Tablets */
@media (max-width: 959px) {
  .leadership-scroll-container {
    height: auto !important;
  }
  .leadership-sticky-stage {
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 3rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
  }
  .leader-shutter-card {
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
    padding: 2.25rem 1.5rem !important;
    width: 100% !important;
  }
  .lsc-details-col {
    overflow-y: visible !important;
    max-height: none !important;
  }
  .lsc-portrait-col {
    width: 100% !important;
  }
  .lsc-portrait-frame {
    width: 200px !important;
    height: 235px !important;
  }
}

@media (max-width: 540px) {
  .leadership-sticky-stage {
    padding: 2rem 1rem !important;
    gap: 2rem !important;
  }
  .leader-shutter-card {
    padding: 1.65rem 1.15rem !important;
    border-radius: 14px !important;
  }
  .lsc-portrait-frame {
    width: 170px !important;
    height: 200px !important;
  }
  .lsc-name {
    font-size: 1.65rem !important;
  }
  .lsc-linkedin {
    padding: 0.6rem 1rem !important;
    font-size: 0.82rem !important;
    max-width: 220px !important;
  }
  .lsc-bio p, .lsc-bullet-list li {
    font-size: 0.865rem !important;
  }
}

/* Laptops / short screens */
@media (min-width: 960px) and (max-height: 750px) {
  .leader-shutter-card {
    padding: 1.5rem 2rem;
    gap: 1.75rem;
  }
  .lsc-portrait-frame {
    width: 170px;
    height: 205px;
  }
  .lsc-bio p, .lsc-bullet-list li {
    font-size: 0.825rem;
    line-height: 1.45;
  }
}

/* Associate Concerns - Side-by-side Logo and Title */
.associate-header {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: 1.25rem;
}

.associate-logo {
  height: 48px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.associate-logo--circle {
  border-radius: 6px;
}

.card h3.associate-name,
.associate-name {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--ink);
}

@media (max-width: 480px) {
  .associate-header {
    gap: 0.85rem;
  }
  .associate-logo {
    height: 42px;
    max-width: 76px;
  }
  .card h3.associate-name,
  .associate-name {
    font-size: 1.125rem;
  }
}