/* =============================================================================
   SON FOUNDATION — v2.0 Design System
   Premium editorial aesthetic for a Nigerian scholar development institution.
   
   Design decisions:
   - Ink stays deep navy (#0F0E2E) — intensified from 1.x for stronger hierarchy
   - Gold (#C9A84C) shifts warmer and more muted — less saturated, more credible
   - New off-white (#FAFAF7) — cooler than cream, cleaner reading surface
   - Newsreader kept for display; Inter replaces DM Sans for body — sharper, more institutional
   - Coral accent used sparingly for structural markers only
   - Typography leads: hero at ~120px, section heads at 72px, refined scale throughout
   - Signature element: the full-bleed horizontal rule system with generous whitespace
   ============================================================================= */

/* ── Tokens ──────────────────────────────────────────────────────────────────── */
:root {
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter Fallback", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Fira Code", monospace;

  --ink:      #0F0E2E;   /* near-black navy — primary text + backgrounds */
  --navy:     #1A2B6B;   /* Foundation Navy — the identity's brand colour */
  --ink-mid:  #1A183F;   /* slightly lighter navy — footer, dark sections */
  --gold:     #C9A84C;   /* warm, muted gold — accent, never background */
  --gold-lt:  #E8D08A;   /* light gold — hover states, belief strip text */
  --sand:     #FAFAF7;   /* cool off-white — primary page surface */
  --sand-2:   #F4F2EC;   /* warm sand — alternate section surface */
  --coral:    #9C3A30;   /* muted coral — structural markers only */
  --muted:    #64607A;   /* body text secondary */
  --muted-lt: #9490A4;   /* captions, supporting text */
  --line:     rgba(15,14,46,.12);
  --line-lt:  rgba(255,255,255,.14);

  /* -- Approved interface palette ------------------------------------------
     Brand Identity Guidelines S07 and Editorial & Publication Standards S8 fix
     the Foundation's colours. These tokens name them for interface use so a
     page cannot drift onto a parallel palette again. The Academy had done
     exactly that: a navy of #0f2747, a gold of #b89446 and a cream of #f7f3ea,
     none of them approved values.

     Colour law S07: navy carries the journey, gold carries the return; cream or
     white leads, navy anchors, gold is scarce. Gold never carries text below
     12 pt on light grounds. Where gold cannot carry a label the brand states
     its own remedy -- in small lockups the caps line switches from gold to
     navy -- and that is the rule the Academy now follows.
     ---------------------------------------------------------------------- */
  --cream:    #F5F3EE;   /* Foundation Cream - approved */
  --cream-lt: #FAFAF7;   /* Cream (light) - approved (same value as --sand) */
  --white:    #FFFFFF;   /* Paper White - approved */
  --navy-a12: rgba(26,43,107,.12);
  --navy-a16: rgba(26,43,107,.16);
  --navy-a18: rgba(26,43,107,.18);
  --navy-a20: rgba(26,43,107,.20);
  --navy-a30: rgba(26,43,107,.30);

  /* Interface status colours. NOT part of the approved palette. Editorial &
     Publication Standards S8 reserves new accent colours to the Board, so
     these are tokenised, isolated and recorded as a pending decision rather
     than spread through the stylesheet as literals. Every state they mark is
     also stated in words, so nothing depends on colour alone. */
  --status-sound:      #4f765b;
  --status-sound-bg:   #f2f7f3;
  --status-unsound:    #9C3A30;
  --status-unsound-bg: #fbf4f3;
  --status-sound-rev:   #7fae90;  /* pale pair, for use on navy only */
  --status-unsound-rev: #d08a80;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  color: var(--ink);
  background: var(--sand);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.son-redesign { min-height: 100vh; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Accessibility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -60px; left: 20px; z-index: 200;
  padding: 10px 18px; background: var(--sand); color: var(--ink);
  font-weight: 700; font-size: 13px; border-radius: 2px;
  box-shadow: 0 4px 20px rgba(15,14,46,.2);
  transition: top .2s;
}
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Typography Scale ──────────────────────────────────────────────────────── */
h1, h2, h3, h4, blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .92;
}
h1  { font-size: clamp(68px, 8.5vw, 128px); }
h2  { font-size: clamp(46px, 5.5vw, 80px); line-height: .96; }
h3  { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; }
h4  { font-size: 20px; letter-spacing: -.02em; }
h1 em, h2 em { color: var(--gold); font-style: italic; font-weight: 500; }

/* Labels / eyebrows */
.label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
}
.label--light { color: var(--gold-lt); opacity: .8; }
.label--rule {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.label--rule-lt {
  padding-top: 14px;
  border-top: 1px solid var(--line-lt);
  color: var(--gold-lt);
  opacity: .8;
}

/* Kicker (same visual role as label, used inline with headings) */
.kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 22px;
}
.kicker.gold { color: var(--gold); }

/* Lead */
.lead {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
}

/* Body prose */
.prose p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.82;
  max-width: 660px;
}
.prose p + p { margin-top: 18px; }
.prose .lead { color: var(--ink); margin-bottom: 28px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 0;
  cursor: pointer;
  border-radius: 2px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-dark  { background: var(--ink); color: #fff; }
.btn-gold  { background: var(--gold); color: var(--ink); }
.btn-ghost { border: 1px solid currentColor; }
.btn-ghost-light { border: 1px solid rgba(255,255,255,.35); color: #fff; }

/* Arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap .18s ease;
}
.link-arrow:hover { gap: 16px; }
.link-arrow span { font-size: 16px; line-height: 1; }

/* ── Layout Utilities ──────────────────────────────────────────────────────── */
.container { padding-inline: clamp(24px, 8vw, 120px); }

/* A signature structural device: the horizontal rule system */
.ruled-top  { border-top: 1px solid var(--line); }
.ruled-lt   { border-top: 1px solid var(--line-lt); }

/* ── Site Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 80px;
  padding: 0 clamp(24px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250,250,247,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* Brand mark */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.03em;
  flex-shrink: 0;
}
.brand-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
}

/* Navigation */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 38px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.site-nav > a:not(.btn) {
  padding: 6px 0;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.site-nav > a:not(.btn):hover { color: var(--ink); border-color: var(--ink); }
.site-nav .btn { padding: 11px 18px; font-size: 12px; }

/* Active nav states */
body.son-page-about .site-nav a[href*="/about/"],
body.son-page-programs .site-nav a[href*="/programs/"],
body.son-page-impact .site-nav a[href*="/impact/"],
body.son-page-transparency .site-nav a[href*="/transparency/"] {
  color: var(--ink); border-bottom-color: var(--ink);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 0; background: transparent; cursor: pointer; padding: 11px;
}
.menu-toggle span:not(.sr-only) {
  display: block; width: 20px; height: 1.5px;
  background: var(--ink); margin: 5px 0;
  transition: transform .2s, opacity .2s;
}

/* ── Scroll Reveal (JS adds .revealed) ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.revealed { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — design.html sections
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.v2-hero {
  position: relative;
  min-height: calc(100svh - 80px);
  background: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Full-bleed editorial background. Replace with approved local photography later. */
.v2-hero__bg {
  position: absolute;
  inset: 0;
  /*
    PHOTOGRAPHY NOTE: Replace this treatment with an approved local photograph
    of Nigerian SS1/SS2 students in a classroom or school assembly setting.
    The image should feel natural, dignified, and recognisably Nigerian.
    Target: bright, slightly warm exposure. Students engaged, not posed.
  */
  background-image:
    linear-gradient(
      to top,
      rgba(15,14,46,.92) 0%,
      rgba(15,14,46,.74) 44%,
      rgba(15,14,46,.42) 100%
    ),
    radial-gradient(circle at 82% 18%, rgba(201,168,76,.42) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 56%, rgba(255,255,255,.13) 0 3%, transparent 4%),
    linear-gradient(135deg, rgba(201,168,76,.24) 0 18%, transparent 18% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 96px);
  background-size: cover, 720px 720px, 360px 360px, cover, auto;
  background-position: center;
  filter: saturate(.95);
}

.v2-hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 7vw, 100px) clamp(24px, 8vw, 120px) clamp(64px, 7vw, 100px);
  max-width: 1400px;
}

.v2-hero__label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.v2-hero__label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.v2-hero h1 {
  font-size: clamp(60px, 9vw, 130px);
  color: #fff;
  max-width: 1100px;
  line-height: .88;
  margin-bottom: 36px;
}
.v2-hero h1 em { color: var(--gold); }

.v2-hero__body {
  font-size: clamp(16px, 1.5vw, 19px);
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 44px;
}

/* Nonprofit status, stated under the mission sentence rather than only in
   11px grey in the footer. Gold-light on the hero ground measures well above
   the 4.5:1 floor, and the rule sits between the mission and the second body
   paragraph so it reads as credential, not as caption. */
.v2-hero__status {
  margin: -28px 0 30px;
  padding-top: 18px;
  max-width: 560px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--gold-lt);
}

.v2-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.v2-hero__note {
  position: absolute;
  right: clamp(24px, 8vw, 120px);
  bottom: clamp(48px, 6vw, 80px);
  width: 290px;
  background: rgba(201,168,76,.15);
  border: 1px solid rgba(201,168,76,.3);
  backdrop-filter: blur(8px);
  padding: 24px 28px;
  color: #fff;
}
.v2-hero__note p {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.45;
  color: rgba(255,255,255,.9);
  margin-top: 10px;
}
.v2-hero__note-label {
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── Values Strip ──────────────────────────────────────────────────────────── */
.v2-values-strip {
  background: var(--ink-mid);
  padding: 0 clamp(24px, 8vw, 120px);
  display: flex;
  align-items: center;
  height: 64px;
  overflow: hidden;
  gap: 0;
}
.v2-values-strip__item {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 20px);
  color: rgba(255,255,255,.55);
  letter-spacing: -.01em;
  padding: 0 20px;
  border-right: 1px solid var(--line-lt);
  white-space: nowrap;
  transition: color .2s;
}
.v2-values-strip__item:last-child { border-right: 0; }
.v2-values-strip__item:hover { color: var(--gold); }

/* ── Founder Section ──────────────────────────────────────────────────────── */
.v2-founder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  background: var(--sand-2);
}

.v2-founder__image {
  position: relative;
  overflow: hidden;
  background: var(--sand-2);
}
.v2-founder__image picture,
.v2-founder__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.v2-founder__image-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 28px;
  background: linear-gradient(transparent, rgba(15,14,46,.65));
  color: rgba(255,255,255,.85);
  font-size: 11px;
  letter-spacing: .08em;
}

.v2-founder__copy {
  padding: clamp(60px, 7vw, 100px) clamp(40px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.v2-founder__rule {
  width: 48px;
  height: 1px;
  background: var(--gold);
}
.v2-founder__copy h2 {
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: .95;
  max-width: 500px;
}
.v2-founder__copy > p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.82;
  max-width: 500px;
}
.v2-founder__copy .lead {
  font-size: clamp(19px, 2vw, 24px);
  color: var(--ink);
  line-height: 1.45;
  max-width: 520px;
}

/* ── Program Section ────────────────────────────────────────────────────── */
.v2-programme {
  background: var(--sand);
  padding: clamp(80px, 10vw, 140px) clamp(24px, 8vw, 120px);
}
.v2-programme__header {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 10vw;
  align-items: end;
  margin-bottom: 80px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.v2-programme__header h2 { line-height: .95; }
.v2-programme__header p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

/* Pillars — horizontal row with numbered labels */
.v2-pillars {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.v2-pillar {
  padding: 40px 24px 40px 0;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background .2s;
}
.v2-pillar:last-child { border-right: 0; padding-right: 0; }
.v2-pillar:not(:first-child) { padding-left: 24px; }
.v2-pillar:hover { background: var(--sand-2); }
.v2-pillar__num {
  font-family: var(--font-display);
  font-size: clamp(38px, 3.2vw, 52px);
  font-weight: 500;
  color: var(--line);
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: 28px;
}
.v2-pillar h3 {
  font-size: clamp(22px, 1.8vw, 28px);
  margin-bottom: 14px;
}
.v2-pillar p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  max-width: 360px;
}
.v2-pillar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: .04em;
}
.v2-pillar__link:hover { gap: 14px; }

/* ── Scholar Journey — Vertical Timeline ──────────────────────────────────── */
.v2-journey {
  background: var(--ink);
  color: #fff;
  padding: clamp(80px, 10vw, 140px) clamp(24px, 8vw, 120px);
}
.v2-journey__header {
  display: grid;
  grid-template-columns: 1fr .6fr;
  gap: 10vw;
  align-items: end;
  margin-bottom: 80px;
}
.v2-journey__header h2 { color: #fff; }
.v2-journey__header h2 em { color: var(--gold); }
.v2-journey__header p { color: rgba(255,255,255,.65); line-height: 1.75; }

/* Horizontal step track */
.v2-journey__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.v2-journey__track::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-lt);
}
.v2-step {
  padding: 48px 32px 0 0;
  position: relative;
}
.v2-step:not(:first-child) { padding-left: 32px; }
.v2-step::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 3px rgba(201,168,76,.3);
}
.v2-step:not(:first-child)::before { left: 32px; }
.v2-step__num {
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.v2-step h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.05;
}
.v2-step p {
  color: rgba(255,255,255,.6);
  font-size: 14px;
  line-height: 1.7;
}

/* ── School Impact — Alternating editorial ────────────────────────────────── */
.v2-school-impact {
  background: var(--sand-2);
  padding: clamp(80px, 10vw, 140px) 0;
}
.v2-school-impact__inner {
  display: block;
  min-height: 0;
}
.v2-school-impact__image { display: none; }
.v2-school-impact__content {
  width: min(100%, 1240px);
  margin-inline: auto;
  padding: clamp(64px, 7vw, 104px) clamp(24px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  background: var(--sand);
}
.v2-school-impact__content h2 { max-width: 760px; line-height: .96; }
.v2-school-impact__content > p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.82;
  max-width: 760px;
}
.v2-service-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}
.v2-service-item {
  padding: 18px 18px 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-service-item:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
.v2-service-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* ── Measurement / Impact ─────────────────────────────────────────────────── */
.v2-measurement {
  background: var(--sand);
  padding: clamp(80px, 10vw, 140px) clamp(24px, 8vw, 120px);
}
.v2-measurement__header {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 10vw;
  align-items: end;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 60px;
}
.v2-measurement__header h2 { line-height: .95; }
.v2-measurement__header p { color: var(--muted); line-height: 1.8; }

.v2-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.v2-metric {
  padding: 40px 32px 36px 0;
  border-right: 1px solid var(--line);
  position: relative;
}
.v2-metric:last-child { border-right: 0; }
.v2-metric:not(:first-child) { padding-left: 32px; }
.v2-metric__label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  display: block;
  min-height: 32px;
}
.v2-metric__value {
  font-family: var(--font-display);
  font-size: clamp(44px, 4.5vw, 64px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink);
}
.v2-metric__desc {
  display: block;
  margin-top: 12px;
  color: var(--muted-lt);
  font-size: 13px;
  line-height: 1.6;
}

.v2-measurement__what {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid var(--line);
}
.v2-what-item {
  padding: 0 32px 0 0;
  border-right: 1px solid var(--line);
}
.v2-what-item:last-child { border-right: 0; }
.v2-what-item:not(:first-child) { padding-left: 32px; }
.v2-what-item h4 { font-size: 18px; margin-bottom: 10px; letter-spacing: -.02em; }
.v2-what-item p { color: var(--muted); font-size: 14px; line-height: 1.72; }

/* ── Pull Quote ──────────────────────────────────────────────────────────── */
.v2-quote {
  background: var(--ink-mid);
  padding: clamp(80px, 10vw, 130px) clamp(24px, 8vw, 120px);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 40px;
  align-items: start;
}
.v2-quote__mark {
  font-family: var(--font-display);
  font-size: 80px;
  color: var(--gold);
  line-height: .7;
  margin-top: 8px;
}
.v2-quote blockquote {
  font-size: clamp(30px, 3.5vw, 52px);
  color: #fff;
  line-height: 1.12;
  max-width: 900px;
  letter-spacing: -.03em;
}
.v2-quote__attribution {
  margin-top: 32px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* ── Get Involved ──────────────────────────────────────────────────────────── */
.v2-involved {
  background: var(--sand);
  padding: clamp(80px, 10vw, 140px) clamp(24px, 8vw, 120px);
}
.v2-involved__header {
  display: grid;
  grid-template-columns: 1fr .6fr;
  gap: 10vw;
  align-items: end;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.v2-involved__header h2 { line-height: .95; }
.v2-involved__header p { color: var(--muted); line-height: 1.8; }

.v2-pathways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.v2-pathway {
  padding: 48px 40px 48px 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .2s;
}
.v2-pathway:last-child { border-right: 0; }
.v2-pathway:not(:first-child) { padding-left: 40px; }
.v2-pathway:hover { background: var(--sand-2); }
.v2-pathway__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sand-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 8px;
  transition: background .2s, border-color .2s;
}
.v2-pathway:hover .v2-pathway__icon { background: var(--gold); border-color: var(--gold); }
.v2-pathway__num {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral);
}
.v2-pathway h3 { font-size: 30px; line-height: 1.05; }
.v2-pathway > p { color: var(--muted); font-size: 15px; line-height: 1.75; flex: 1; }
.v2-pathway .btn { align-self: flex-start; }
.v2-pathway small { font-size: 12px; color: var(--muted-lt); }

/* ── Final CTA ──────────────────────────────────────────────────────────────── */
.v2-cta {
  background: var(--ink);
  padding: clamp(80px, 10vw, 130px) clamp(24px, 8vw, 120px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10vw;
  align-items: center;
}
.v2-cta h2 {
  font-size: clamp(42px, 5vw, 72px);
  color: #fff;
  line-height: .96;
  max-width: 680px;
}
.v2-cta h2 em { color: var(--gold); }
.v2-cta__action { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.v2-cta__action p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.7; max-width: 280px; }

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGE SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.inner-page { background: var(--sand); }

/* ── Page Hero ──────────────────────────────────────────────────────────── */
.v2-page-hero {
  background: var(--sand-2);
  padding: clamp(80px, 10vw, 130px) clamp(24px, 8vw, 120px) clamp(60px, 7vw, 100px);
  border-bottom: 1px solid var(--line);
}
.v2-page-hero__inner {
  display: grid;
  grid-template-columns: 1.3fr .5fr;
  gap: 10vw;
  align-items: end;
  max-width: 1280px;
}
.v2-page-hero h1 {
  margin-top: 20px;
  max-width: 820px;
  line-height: .9;
}
.v2-page-hero__sub {
  margin-top: 32px;
  font-size: 18px;
  color: var(--muted);
  line-height: 1.72;
  max-width: 680px;
}
.v2-page-hero__note {
  padding: 28px;
  background: var(--sand);
  border-top: 3px solid var(--gold);
}
.v2-page-hero__note-label {
  display: block;
  margin-bottom: 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral);
}
.v2-page-hero__note p {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* Dark hero variant */
.v2-page-hero--dark {
  background: var(--ink);
  border-bottom: 0;
}
.v2-page-hero--dark h1 { color: #fff; }
.v2-page-hero--dark h1 em { color: var(--gold); }
.v2-page-hero--dark .v2-page-hero__sub { color: rgba(255,255,255,.65); }
.v2-page-hero--dark .v2-page-hero__note { background: rgba(201,168,76,.12); border-color: var(--gold); }
.v2-page-hero--dark .v2-page-hero__note p { color: #fff; }
.v2-page-hero--dark .v2-page-hero__label { color: var(--gold); }
.v2-page-hero--dark .v2-page-hero__note-label { color: var(--gold); }

/* ── Content Sections ──────────────────────────────────────────────────── */
.v2-section {
  padding: clamp(72px, 9vw, 120px) clamp(24px, 8vw, 120px);
}
.v2-section--alt { background: var(--sand-2); }
.v2-section--dark { background: var(--ink); color: #fff; }

.v2-split {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 80px);
}
.v2-split--wide { grid-template-columns: 1fr .7fr; }

.v2-section-header {
  display: grid;
  grid-template-columns: 1fr .65fr;
  gap: 10vw;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 64px;
}
.v2-section-header--dark { border-bottom-color: var(--line-lt); }
.v2-section-header h2 { line-height: .95; }
.v2-section-header p { color: var(--muted); line-height: 1.8; }
.v2-section-header--dark p { color: rgba(255,255,255,.65); }

/* ── Value Grid (About) ────────────────────────────────────────────────── */
.v2-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 64px;
}
.v2-value {
  padding: 44px 36px 44px 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.v2-value:nth-child(3n) { border-right: 0; }
.v2-value:nth-child(3n+2),
.v2-value:nth-child(3n+3) { padding-left: 36px; }
.v2-value:last-child { border-bottom: 0; }
.v2-value__num { color: var(--coral); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; }
.v2-value h3 { margin: 36px 0 12px; font-size: clamp(24px, 2.4vw, 32px); }
.v2-value p { color: var(--muted); font-size: 15px; line-height: 1.75; }

/* ── Program Detail Sections (Programs page) ─────────────────────────── */
.v2-programme-detail {
  padding: clamp(60px, 7vw, 90px) clamp(24px, 8vw, 120px);
  border-bottom: 1px solid var(--line);
}
.v2-programme-detail--alt { background: var(--sand-2); }
.v2-programme-detail__inner {
  display: grid;
  grid-template-columns: 88px 1fr .65fr;
  gap: 52px;
  align-items: start;
  margin-top: 52px;
}
.v2-detail-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 32px;
  flex-shrink: 0;
}
.v2-detail-icon--alt { background: var(--gold); color: var(--ink); }
.v2-programme-detail h2 { font-size: clamp(38px, 4vw, 58px); margin-bottom: 20px; }
.v2-programme-detail .lead { margin-bottom: 20px; }
.v2-programme-detail .lead-body {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.v2-check-list {
  list-style: none;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.v2-check-list li {
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  position: relative;
  color: var(--ink);
}
.v2-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
.v2-detail-note {
  padding: 28px;
  background: var(--ink);
  color: #fff;
}
.v2-detail-note__label {
  display: block;
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.v2-detail-note p {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -.02em;
}

/* ── Program Showcase Callout ───────────────────────────────────────── */
.v2-showcase {
  background: var(--ink);
  padding: clamp(72px, 8vw, 110px) clamp(24px, 8vw, 120px);
  display: grid;
  grid-template-columns: 1fr .6fr;
  gap: 10vw;
  align-items: end;
}
.v2-showcase h2 { color: #fff; font-size: clamp(40px, 5vw, 68px); }
.v2-showcase h2 em { color: var(--gold); }
.v2-showcase__right p { color: rgba(255,255,255,.65); line-height: 1.8; margin-bottom: 24px; }

/* ── Impact Dashboard ─────────────────────────────────────────────────── */
.v2-dashboard {
  background: var(--ink);
  padding: clamp(72px, 8vw, 110px) clamp(24px, 8vw, 120px);
}
.v2-dashboard h2 { color: #fff; }
.v2-dashboard h2 em { color: var(--gold); }
.v2-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid var(--line-lt);
}
.v2-dashboard-metric {
  padding: 44px 32px 40px 0;
  border-right: 1px solid var(--line-lt);
}
.v2-dashboard-metric:last-child { border-right: 0; }
.v2-dashboard-metric:not(:first-child) { padding-left: 32px; }
.v2-dashboard-metric__label {
  display: block;
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  min-height: 32px;
  margin-bottom: 24px;
}
.v2-dashboard-metric__value {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  color: #fff;
}
.v2-dashboard-metric__desc {
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,.5);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Measure Cards (Impact what we track) ─────────────────────────────── */
.v2-measure-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 60px;
}
.v2-measure-card {
  padding: 38px 32px 36px 0;
  border-right: 1px solid var(--line);
}
.v2-measure-card:last-child { border-right: 0; }
.v2-measure-card:not(:first-child) { padding-left: 32px; }
.v2-measure-card__num { color: var(--coral); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; }
.v2-measure-card h3 { margin: 32px 0 12px; font-size: clamp(20px, 2vw, 26px); }
.v2-measure-card p { color: var(--muted); font-size: 14px; line-height: 1.72; }

/* ── Pathway Cards (Get Involved) ────────────────────────────────────── */
.v2-pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: clamp(48px, 6vw, 80px) clamp(24px, 8vw, 120px);
  background: var(--sand-2);
}
.v2-pathway-card {
  background: var(--sand);
  border: 1px solid var(--line);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 520px;
  transition: border-color .2s, box-shadow .2s;
}
.v2-pathway-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(15,14,46,.08);
}
.v2-pathway-card--featured { background: var(--ink); border-color: var(--ink); color: #fff; }
.v2-pathway-card--featured:hover { border-color: var(--gold); }
.v2-pathway-card__num { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); }
.v2-pathway-card--featured .v2-pathway-card__num { color: var(--gold); }
.v2-pathway-card__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--sand-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 22px; color: var(--ink);
  margin-top: 12px;
}
.v2-pathway-card--featured .v2-pathway-card__icon { background: rgba(201,168,76,.15); border-color: rgba(201,168,76,.3); color: var(--gold); }
.v2-pathway-card .kicker { color: var(--coral); }
.v2-pathway-card--featured .kicker { color: var(--gold); }
.v2-pathway-card h2 { font-size: 48px; line-height: 1; }
.v2-pathway-card--featured h2 { color: #fff; }
.v2-pathway-card > p { color: var(--muted); font-size: 15px; line-height: 1.72; flex: 1; }
.v2-pathway-card--featured > p { color: rgba(255,255,255,.7); }
.v2-pathway-card .btn { align-self: flex-start; margin-top: auto; }
.v2-pathway-card small { font-size: 12px; color: var(--muted-lt); }
.v2-pathway-card--featured small { color: rgba(255,255,255,.4); }

/* ── Contact Layout ────────────────────────────────────────────────────── */
.v2-contact {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 0;
  padding: clamp(72px, 8vw, 110px) clamp(24px, 8vw, 120px);
}
.v2-contact__meta { padding-right: 8vw; }
.v2-contact__meta a {
  display: block;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.v2-contact__meta a:first-of-type { margin-top: 44px; border-top: 1px solid var(--line); }
.v2-contact__meta-label { display: block; margin-bottom: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); }
.v2-contact__meta strong { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.v2-inquiry-panel { background: var(--ink); color: #fff; padding: 52px; }
.v2-inquiry-panel h2 { color: #fff; font-size: 52px; margin-bottom: 40px; }
.v2-inquiry-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line-lt);
  transition: background .15s;
}
.v2-inquiry-link:hover { padding-inline: 14px; background: rgba(255,255,255,.04); }
.v2-inquiry-link strong { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 400; }
.v2-inquiry-link small { display: block; margin-top: 3px; color: rgba(255,255,255,.5); font-size: 13px; }
.v2-inquiry-link b { color: var(--gold); font-size: 20px; flex-shrink: 0; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.v2-form-section {
  padding: clamp(72px, 8vw, 110px) clamp(24px, 8vw, 120px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 80px;
}
.v2-form-intro { max-width: 680px; margin-bottom: 40px; }
.v2-form-intro h2 { font-size: clamp(38px, 4vw, 56px); margin: 12px 0 16px; }
.v2-form-intro p { color: var(--muted); font-size: 16px; line-height: 1.8; }

/* Keep existing .son-form styles but update the container feel */
.son-form {
  max-width: 820px;
  margin-top: 36px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--sand-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.son-form label { display: block; margin-bottom: 20px; font-weight: 600; color: var(--ink); font-size: 14px; }
.son-form label span { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.son-form input, .son-form textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid rgba(15,14,46,.2); border-radius: 2px;
  background: var(--sand); color: var(--ink);
  font: inherit; font-size: 15px;
  transition: border-color .15s;
}
.son-form input:focus, .son-form textarea:focus {
  outline: 2px solid rgba(201,168,76,.5);
  outline-offset: 2px;
  border-color: var(--ink);
}
.son-form textarea { min-height: 140px; resize: vertical; }
.son-form .btn, .son-form .button { margin-top: 8px; border: 0; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.son-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { background: var(--gold); color: var(--ink); padding: clamp(56px, 7vw, 90px) clamp(24px, 8vw, 120px); }
.form-success h2 { max-width: 680px; }

/* ── Transparency / Governance ────────────────────────────────────────── */
.v2-transparency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.v2-transparency-item {
  background: var(--sand);
  padding: clamp(36px, 4vw, 52px);
  min-height: 320px;
}
.v2-transparency-item:last-child { grid-column: 1 / -1; min-height: 280px; }
.v2-status-badge {
  display: inline-block;
  padding: 6px 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--sand-2);
  color: var(--muted);
  margin-bottom: 24px;
}
.v2-status-badge--active { background: #e6f0e7; color: #26593d; }
.v2-transparency-item h2 { font-size: clamp(32px, 3.5vw, 46px); margin-bottom: 16px; }
.v2-transparency-item p { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 600px; }
.v2-transparency-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.v2-transparency-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--coral);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .15s;
}
.v2-transparency-link:hover { color: var(--ink); }

/* ── Policy Pages ─────────────────────────────────────────────────────── */
.v2-policy {
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(72px, 8vw, 110px) clamp(24px, 8vw, 120px);
}
.v2-policy h2 {
  font-size: clamp(28px, 3vw, 40px);
  margin: clamp(40px, 4vw, 56px) 0 14px;
  color: var(--ink);
}
.v2-policy p { color: var(--muted); font-size: 16px; line-height: 1.85; max-width: 700px; margin-top: 12px; }

/* ── Portal Pages (preserve existing look, minor token alignment) ──────── */
.portal-page {
  background: var(--sand);
}
.portal-hero-section {
  background: var(--ink);
  padding: clamp(72px, 8vw, 110px) clamp(24px, 8vw, 120px);
  display: grid;
  grid-template-columns: 1.25fr .55fr;
  gap: 9vw;
  align-items: end;
}
.portal-hero-section h1 { color: #fff; font-size: clamp(56px, 6.5vw, 96px); }
.portal-hero-section h1 em { color: var(--gold); }
.portal-hero-section > p { color: rgba(255,255,255,.72); max-width: 640px; font-size: 17px; line-height: 1.72; }
.portal-note {
  padding: 28px;
  background: rgba(201,168,76,.12);
  border-top: 3px solid var(--gold);
}
.portal-note span { display: block; margin-bottom: 12px; color: var(--gold); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.portal-note p { font-family: var(--font-display); font-size: 20px; line-height: 1.45; color: #fff; }
.portal-content { padding: clamp(56px, 7vw, 90px) clamp(24px, 8vw, 120px); }
.portal-section-label {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-lt);
  margin-bottom: 28px;
}
.portal-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.resource-card {
  min-height: 220px;
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--sand);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .2s, box-shadow .2s;
}
.resource-card:hover { border-color: var(--gold); box-shadow: 0 4px 20px rgba(15,14,46,.07); }
.resource-card h3 { font-size: 22px; margin-bottom: 8px; }
.resource-card p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.resource-card a { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; font-weight: 700; color: var(--coral); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.resource-card-pending { opacity: .55; }
.resource-status { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-lt); margin-top: 16px; }
.document-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin-top: 20px; }
.document-list a, .document-list .document-pending {
  background: var(--sand); padding: 16px 18px; display: flex;
  align-items: center; justify-content: space-between; gap: 10px;
  font-size: 14px; font-weight: 600; min-height: 58px;
  border-bottom: 0; transition: background .15s;
}
.document-list a:hover { background: var(--sand-2); }
.document-list .document-pending { opacity: .5; flex-direction: column; align-items: flex-start; }
.document-list .document-pending small { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-lt); }
.portal-hub-rules {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,400px);
  gap: 80px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.portal-rule-list { list-style: none; border-top: 1px solid var(--line); }
.portal-rule-list li { padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); position: relative; }
.portal-rule-list li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.btn-outline-light { border: 1px solid rgba(255,255,255,.35); color: #fff; padding: 13px 18px; font-size: 12px; font-weight: 700; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── Footer ──────────────────────────────────────────────────────────── */
footer {
  background: var(--ink-mid);
  color: #fff;
  padding: 80px clamp(24px, 8vw, 120px) 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: .55fr 1fr auto;
  align-items: end;
  gap: 6vw;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line-lt);
}
.footer-brand .brand-mark { background: var(--gold); color: var(--ink); }
.footer-top h2 { font-size: clamp(38px, 4.5vw, 62px); color: #fff; line-height: .98; }
.footer-top h2 em { color: var(--gold); }
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5vw;
  padding: 40px 0;
  border-bottom: 1px solid var(--line-lt);
}
.footer-links div { display: flex; flex-direction: column; gap: 10px; }
.footer-links h3 { color: var(--gold); font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
.footer-links a { color: rgba(255,255,255,.65); font-size: 13px; transition: color .15s; }
.footer-links a:hover { color: #fff; }
.footer-links a:focus-visible { outline-color: var(--gold); }
/* .4 alpha over --ink-mid composites to #76748C = 3.73:1, below the 4.5:1
   floor for normal text. This line carries the registration disclosure, so
   it is the last place on the site that should be hard to read. .55 = 5.9:1. */
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; padding-top: 22px; color: rgba(255,255,255,.55); font-size: 11px; }
/* Trustee list on the Governance page. Names and roles only — the CAC Status
   Report also carries dates of birth, personal telephone numbers and
   residential addresses, and those are Confidential and never published. */
/* Label-above-value pairs: the Prospectus "at a glance" figures and the six
   stages of the scholar journey. Deliberately not a <table> — none of this is
   tabular data, and a one-column table stacks badly on a phone. */
.spec-list { list-style: none; margin: 24px 0; padding: 0; border-top: 1px solid var(--line); }
.spec-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec-list span {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-lt);
}
.spec-list strong { display: block; margin-top: 6px; font-weight: 600; line-height: 1.6; }

.trustee-list { list-style: none; margin: 20px 0; padding: 0; }
.trustee-list li { padding: 12px 0; border-bottom: 1px solid rgba(15,39,71,.12); }
.trustee-list li:last-child { border-bottom: 0; }
.trustee-list strong { display: block; }
.trustee-list span { display: block; margin-top: 2px; font-size: .86em; opacity: .72; }

/* Registration line. A registered body states its number in the footer;
   this is the Incorporated Trustees number, not a company RC number. */
.footer-registration { letter-spacing: .02em; color: rgba(255,255,255,.72); }

/* ── Cookie Notice ───────────────────────────────────────────────────── */
.cookie-notice {
  position: fixed; left: clamp(16px,4vw,40px); right: clamp(16px,4vw,40px);
  bottom: clamp(16px,4vw,32px); z-index: 9999;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  max-width: 960px; margin-inline: auto;
  padding: 20px 24px; background: var(--ink);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 48px rgba(15,14,46,.3);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; color: rgba(255,255,255,.8); line-height: 1.55; font-size: 14px; }
.cookie-notice p strong { display: block; margin-bottom: 3px; color: #fff; }
.cookie-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.cookie-actions a { color: var(--gold); font-weight: 700; font-size: 13px; }
.cookie-actions button {
  min-height: 40px; padding: 0 18px; border: 0;
  background: var(--gold); color: var(--ink); font-weight: 800; font-size: 12px; cursor: pointer;
}

/* ── Backward-compat aliases (existing PHP templates call these) ──────── */
/* Map old class names used in existing PHP to new v2 tokens */
.button-primary  { background: var(--ink); color: #fff; }
.button-gold     { background: var(--gold); color: var(--ink); }
.button, .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; font-family: var(--font-body); font-size: 13px; font-weight: 700; border-radius: 2px; transition: transform .18s, background .18s; border: 0; cursor: pointer; text-decoration: none; }
.button:hover, .btn:hover { transform: translateY(-2px); }
.button span, .btn span { font-size: 15px; line-height: 1; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--coral); margin-bottom: 20px; }
.eyebrow span { width: 24px; height: 1px; background: currentColor; }
.eyebrow.gold { color: var(--gold); }
.text-link, .arrow-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 4px; transition: gap .18s; }
.text-link:hover, .arrow-link:hover { gap: 16px; }

/* Old content-section used by inner pages */
.content-section { padding: clamp(72px, 8vw, 110px) clamp(24px, 8vw, 120px); }
.inner-page > .content-section:first-of-type { padding-top: clamp(56px, 7vw, 90px); }
.alt-surface { background: var(--sand-2); }
.content-index {
  padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-lt); margin-bottom: 0;
}
.content-split { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(48px, 8vw, 120px); align-items: start; margin-top: 56px; }
.section-intro {
  display: grid; grid-template-columns: 1fr .65fr;
  align-items: end; gap: 10vw; margin-top: 64px;
}
.section-intro > p { color: var(--muted); line-height: 1.8; max-width: 540px; }
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 64px; border-top: 1px solid var(--line); }
.value-grid article { padding: 40px 36px 40px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 260px; }
.value-grid article:nth-child(3n+2), .value-grid article:nth-child(3n+3) { padding-left: 36px; }
.value-grid article:nth-child(3n) { border-right: 0; }
.value-grid article:last-child { border-bottom: 0; }
.value-grid article > span { color: var(--coral); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; }
.value-grid h3 { margin: 36px 0 12px; font-size: clamp(22px, 2.2vw, 30px); }
.value-grid p, .measure-cards p { color: var(--muted); line-height: 1.7; font-size: 15px; }
.trust-banner, .pilot-callout {
  display: grid; grid-template-columns: 1fr .7fr; gap: 10vw; align-items: end;
  padding: clamp(72px, 8vw, 100px) clamp(24px, 8vw, 120px);
  background: var(--ink); color: #fff;
}
.trust-banner h2, .pilot-callout h2 { color: #fff; }
.trust-banner h2 em, .pilot-callout h2 em { color: var(--gold); }
.trust-banner > div:last-child p, .pilot-callout > div:last-child p { color: rgba(255,255,255,.72); line-height: 1.8; }
.trust-banner .button, .pilot-callout .button { margin-top: 20px; }
.prose { max-width: 660px; }
.prose p { color: var(--muted); font-size: 16px; line-height: 1.82; }
.prose p + p { margin-top: 18px; }
.prose .lead { color: var(--ink); }
.lead { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; line-height: 1.42; letter-spacing: -.02em; }
.page-hero { min-height: 560px; display: grid; grid-template-columns: 1.25fr .55fr; align-items: end; gap: 9vw; padding: clamp(80px,9vw,120px) clamp(24px,8vw,120px) clamp(64px,7vw,90px); background: var(--sand-2); border-bottom: 1px solid var(--line); }
.page-hero-copy h1 { color: var(--ink); max-width: 900px; line-height: .9; margin-top: 18px; }
.page-hero-copy > p:last-child { max-width: 680px; margin-top: 32px; color: var(--muted); font-size: 17px; line-height: 1.72; }
.page-hero-note { padding: 26px 28px; border-top: 3px solid var(--gold); background: var(--sand); }
.page-hero-note span { display: block; margin-bottom: 11px; color: var(--coral); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.page-hero-note p { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.45; letter-spacing: -.02em; }
.page-hero-dark { background: var(--ink); border-bottom: 0; }
.page-hero-dark .page-hero-copy h1 { color: #fff; }
.page-hero-dark .page-hero-copy h1 em { color: var(--gold); }
.page-hero-dark .page-hero-copy > p:last-child { color: rgba(255,255,255,.65); }
.gold-note { background: rgba(201,168,76,.12); border-color: var(--gold); }
.gold-note span { color: var(--gold); }
.gold-note p { color: #fff; }
.program-detail-section { padding: clamp(60px,7vw,88px) clamp(24px,8vw,120px); border-bottom: 1px solid var(--line); }
.program-detail { display: grid; grid-template-columns: 88px 1.1fr .7fr; gap: 52px; align-items: start; margin-top: 52px; }
.detail-symbol { width: 88px; height: 88px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; font-size: 34px; }
.program-detail h2 { font-size: clamp(38px, 4vw, 56px); margin-bottom: 18px; }
.check-list { list-style: none; border-top: 1px solid var(--line); }
.check-list li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; position: relative; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.detail-note { padding: 26px 28px; background: var(--ink); color: #fff; }
.detail-note span { color: var(--gold); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; display: block; margin-bottom: 12px; }
.detail-note p { font-family: var(--font-display); font-size: 21px; line-height: 1.42; letter-spacing: -.02em; }
.dashboard-section { padding: clamp(72px,8vw,110px) clamp(24px,8vw,120px); background: var(--ink); color: #fff; }
.dashboard-heading { display: grid; grid-template-columns: 1fr .6fr; gap: 10vw; align-items: end; }
.dashboard-heading h2 { color: #fff; }
.dashboard-heading h2 em { color: var(--gold); }
.dashboard-heading > p { color: rgba(255,255,255,.65); line-height: 1.8; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 64px; border-top: 1px solid rgba(255,255,255,.14); }
.metric-grid article { padding: 40px 28px 36px 0; border-right: 1px solid rgba(255,255,255,.14); }
.metric-grid article:last-child { border-right: 0; }
.metric-grid article:not(:first-child) { padding-left: 28px; }
.metric-grid span { display: block; min-height: 32px; color: var(--gold); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; }
.metric-grid strong { display: block; font-family: var(--font-display); font-size: clamp(44px,4.5vw,64px); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: #fff; }
.metric-grid small { display: block; margin-top: 10px; color: rgba(255,255,255,.5); font-size: 13px; line-height: 1.6; }
.measure-cards { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); margin-top: 56px; }
.measure-cards article { padding: 36px 28px 32px 0; border-right: 1px solid var(--line); }
.measure-cards article:last-child { border-right: 0; }
.measure-cards article:not(:first-child) { padding-left: 28px; }
.measure-cards article > span { color: var(--coral); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; }
.measure-cards h3 { margin: 30px 0 10px; font-size: clamp(18px,2vw,24px); }
.pathway-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; padding: clamp(48px,6vw,72px) clamp(24px,8vw,120px); background: var(--sand-2); }
.pathway-card { min-height: 520px; display: flex; flex-direction: column; gap: 16px; padding: 40px; background: var(--sand); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.pathway-card:hover { border-color: var(--gold); box-shadow: 0 6px 28px rgba(15,14,46,.08); }
.pathway-number { color: var(--coral); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pathway-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--sand-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 22px; color: var(--ink); margin-top: 12px; }
.pathway-card h2 { font-size: 46px; line-height: 1; }
.pathway-card > p:not(.kicker) { color: var(--muted); font-size: 15px; line-height: 1.72; flex: 1; }
.pathway-card .button { margin-top: auto; align-self: flex-start; }
.pathway-card small { font-size: 12px; color: var(--muted-lt); }
.featured-pathway { background: var(--ink); color: #fff; border-color: var(--ink); }
.featured-pathway:hover { border-color: var(--gold); }
.featured-pathway h2 { color: #fff; }
.featured-pathway > p:not(.kicker), .featured-pathway small { color: rgba(255,255,255,.7); }
.featured-pathway .pathway-icon { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.2); color: var(--gold); }
.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 0; }
.contact-details > a { display: block; padding: 26px 0; border-bottom: 1px solid var(--line); }
.contact-details > a:first-of-type { margin-top: 40px; border-top: 1px solid var(--line); }
.contact-details span { display: block; margin-bottom: 8px; color: var(--coral); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.contact-details strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.inquiry-panel { padding: 48px; background: var(--ink); color: #fff; }
.inquiry-panel .kicker { color: var(--gold); }
.inquiry-panel h2 { color: #fff; font-size: 50px; margin-bottom: 36px; }
.inquiry-panel > a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); transition: padding .15s; }
.inquiry-panel > a:hover { padding-inline: 12px; background: rgba(255,255,255,.04); }
.inquiry-panel strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.inquiry-panel small { display: block; margin-top: 3px; color: rgba(255,255,255,.5); font-size: 13px; }
.inquiry-panel b { color: var(--gold); font-size: 20px; flex-shrink: 0; }
.transparency-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.transparency-list article { background: var(--sand); padding: clamp(32px,4vw,48px); min-height: 300px; }
.transparency-list article:last-child { grid-column: 1/-1; min-height: 260px; }
.status-badge { display: inline-block; padding: 6px 10px; background: var(--sand-2); color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; }
.active-status { background: #e6f0e7; color: #26593d; }
.transparency-list .content-index { color: var(--coral); border: 0; padding: 0; margin-top: 20px; width: auto; }
.transparency-list h2 { font-size: clamp(28px,3.5vw,46px); margin-top: 16px; }
.transparency-list p:last-child { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 640px; }
.transparency-contact { text-align: center; padding: clamp(72px,8vw,100px) clamp(24px,8vw,120px); background: var(--sand-2); }
.transparency-contact h2 { margin-bottom: 32px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; margin-right: 14px; font-size: 13px; font-weight: 700; color: var(--coral); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.text-link:hover { color: var(--ink); }
.policy-content { max-width: 780px; margin-inline: auto; }
.policy-content h2 { font-size: clamp(26px,3vw,38px); margin-top: clamp(36px,4vw,52px); margin-bottom: 10px; }
.policy-content p { color: var(--muted); font-size: 16px; line-height: 1.85; max-width: 700px; margin-top: 12px; }
.section-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: end;
}

.academy-pathway-heading {
  max-width: 920px;
  margin-bottom: clamp(64px, 8vw, 104px);
}
.academy-pathway-heading h2 {
  max-width: 900px;
  margin: 12px 0 24px;
}
.academy-pathway-heading .academy-pathway-intro {
  max-width: 660px;
}
.academy-pathway-intro {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}
.section-heading-row .section-intro { max-width: 460px; color: var(--muted); line-height: 1.7; }

.form-section { padding: clamp(72px,8vw,110px) clamp(24px,8vw,120px); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.compact-intro { max-width: 680px; }
.form-section .compact-intro { display: block; max-width: 680px; margin-top: 0; }
.form-section .compact-intro h2 { font-size: clamp(38px,4vw,54px); margin: 10px 0 14px; }
.form-section .compact-intro p:not(.kicker) { color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 600px; }
/* Program / impact page helpers */
.measurement-section { background: var(--sand); }
.section-label { padding-top: 14px; border-top: 1px solid var(--line); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-lt); }
.section-label.light { border-color: var(--line-lt); color: rgba(255,255,255,.5); }

/* dashboard-section .metric-grid disambiguation */
.dashboard-section .metric-grid { border-top: 1px solid rgba(255,255,255,.14); margin-top: 64px; }
.dashboard-section .metric-grid article { background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.14); gap: 0; }
.dashboard-section .metric-grid article:last-child { border-right: 0; }

/* ── Animations & Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .v2-hero h1 { animation: hero-rise .8s cubic-bezier(.22,1,.36,1) both; }
  .v2-hero__label { animation: hero-rise .7s .1s cubic-bezier(.22,1,.36,1) both; }
  .v2-hero__body { animation: hero-rise .7s .2s cubic-bezier(.22,1,.36,1) both; }
  .v2-hero__actions { animation: hero-rise .7s .3s cubic-bezier(.22,1,.36,1) both; }
  @keyframes hero-rise { from { opacity: 0; transform: translateY(24px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .btn, .button, .nav-cta, .v2-pathway__icon { border: 2px solid currentColor; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .v2-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-pillar:nth-child(2n) { border-right: 0; padding-right: 0; }
  .v2-pillar:nth-child(2n+1) { border-right: 1px solid var(--line); padding-right: 24px; }
  .v2-pillar:nth-child(n+3) { border-top: 1px solid var(--line); }
  .v2-pillar:last-child { grid-column: span 2; }
  .v2-metrics, .v2-measurement__what, .v2-dashboard-grid { grid-template-columns: 1fr 1fr; }
  .v2-metric { padding: 40px 24px 36px 0; min-height: 220px; }
  .v2-metric:nth-child(even) { padding-left: 24px; border-right: 0; }
  .v2-metric:nth-child(odd) { border-right: 1px solid var(--line); }
  .v2-metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .v2-metric:nth-child(2), .v2-measurement__what:nth-child(2), .v2-dashboard-metric:nth-child(2) { border-right: 0; }
  .v2-metric:nth-child(-n+2), .v2-dashboard-metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .v2-dashboard-metric:nth-child(-n+2) { border-bottom-color: var(--line-lt); }
  .v2-what-item:nth-child(2) { border-right: 0; }
  .v2-what-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 32px; }
  .v2-what-item:nth-child(n+3) { padding-top: 32px; }
}

@media (max-width: 900px) {
  .site-header { height: 72px; }
  .menu-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--sand); flex-direction: column; align-items: stretch;
    padding: 20px clamp(24px,6vw,60px) 28px;
    box-shadow: 0 20px 40px rgba(15,14,46,.1);
    border-bottom: 1px solid var(--line);
  }
  .site-nav.open { display: flex; }
  .site-nav > a:not(.btn) { font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-nav .btn { text-align: center; margin-top: 10px; }

  .v2-hero h1 { font-size: clamp(56px, 11vw, 96px); }
  .v2-hero__note { position: static; width: 100%; max-width: 400px; margin-top: 32px; }
  .v2-founder { grid-template-columns: 1fr; }
  .v2-founder__image { min-height: 500px; }
  .v2-programme__header, .v2-journey__header, .v2-involved__header,
  .v2-measurement__header, .v2-section-header { grid-template-columns: 1fr; gap: 28px; }
  .v2-pillars { grid-template-columns: 1fr; }
  .v2-pillar { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
  .v2-pillar:last-child { border-bottom: 0; }
  .v2-pillar:not(:first-child) { padding-left: 0; }
  .v2-pillar:nth-child(n+3) { border-top: 0; }
  .v2-pillar:nth-child(2n+1) { border-right: 0; padding-right: 0; }
  .v2-pillar:last-child { grid-column: auto; }
  .v2-journey__track { grid-template-columns: 1fr 1fr; }
  .v2-step:nth-child(2)::before { left: 32px; }
  .v2-step:nth-child(3), .v2-step:nth-child(4) { padding-top: 52px; border-top: 1px solid var(--line-lt); }
  .v2-school-impact__inner { min-height: 0; }
  /*
    Hidden, not shortened. Stacked, this decorative panel was 440px of empty
    navy above the Accountability section — roughly a full phone screen of
    nothing, which reads as a page that failed to load. A shorter empty band
    is the same defect, smaller. It returns when a cleared photograph exists.
  */
  .v2-school-impact__image { display: none; }
  .v2-service-list { grid-template-columns: 1fr 1fr; }
  .section-heading-row { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .academy-pathway-intro { max-width: 680px; }
  .v2-pathways, .v2-pathway-grid, .pathway-grid { grid-template-columns: 1fr; }
  .v2-pathway { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
  .v2-pathway:not(:first-child) { padding-left: 0; }
  .v2-cta { grid-template-columns: 1fr; gap: 40px; }
  .v2-quote { grid-template-columns: 40px 1fr; gap: 20px; }
  .footer-top, .footer-links { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { padding-bottom: 40px; }
  .content-split, .program-detail, .section-intro,
  .trust-banner, .pilot-callout, .page-hero,
  .dashboard-heading, .contact-layout,
  .transparency-list { grid-template-columns: 1fr; }
  .transparency-list { background: transparent; gap: 1px; }
  .value-grid, .metric-grid, .measure-cards { grid-template-columns: 1fr 1fr; }
  .value-grid article:nth-child(2n) { border-right: 0; }
  .value-grid article:nth-child(3n) { border-right: 1px solid var(--line); }
  .metric-grid article:nth-child(2), .measure-cards article:nth-child(2n) { border-right: 0; }
  .metric-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .measure-cards article:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .program-detail { grid-template-columns: 80px 1fr; }
  .program-detail > :last-child { grid-column: 2; }
  .portal-hero-section { grid-template-columns: 1fr; }
  .portal-card-grid { grid-template-columns: 1fr; }
  .v2-pathway-card { min-height: auto; padding-bottom: 44px; }
}

/* Headline sizes on small screens. Both h1 clamps have floors (68px inner,
   60px hero) that beat their vw terms below about 760px, so a 360px phone got
   the floor: five or six lines of headline filling the viewport, pushing the
   body copy — the only place the Foundation states what it is — below the fold.
   Google's Ad Grants review is done on mobile. These floors are the reason the
   mission statement was invisible. */
@media (max-width: 900px) {
  h1 { font-size: clamp(40px, 7.2vw, 68px); }
  .v2-hero h1 { font-size: clamp(38px, 7.6vw, 64px); line-height: .95; }
}
@media (max-width: 600px) {
  h1 { font-size: clamp(32px, 8.4vw, 44px); }
  .v2-hero h1 { font-size: clamp(31px, 8.6vw, 42px); line-height: 1; }
}

@media (max-width: 600px) {
  .v2-values-strip { height: auto; padding-block: 16px; flex-wrap: wrap; gap: 0; }
  .v2-values-strip__item { flex: 0 0 50%; border-right: 0; border-bottom: 1px solid var(--line-lt); padding: 12px; }
  .v2-values-strip__item:nth-child(odd) { border-right: 1px solid var(--line-lt); }
  .v2-values-strip__item:last-child { border-bottom: 0; }
  .v2-journey__track { grid-template-columns: 1fr; }
  .v2-step { padding-left: 0; border-top: 1px solid var(--line-lt); }
  .v2-step:not(:first-child) { padding-left: 0; }
  .v2-step::before, .v2-step:not(:first-child)::before { left: 0; }
  .v2-measure-cards, .v2-metrics, .measure-cards { grid-template-columns: 1fr; }
  .v2-measure-card { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
  .v2-measure-card:last-child { border-bottom: 0; }
  .v2-measure-card:not(:first-child) { padding-left: 0; }
  .v2-metric { border-right: 0; padding-right: 0; }
  .v2-service-list { grid-template-columns: 1fr; }
  .v2-service-item:nth-child(even) { padding-left: 0; border-left: 0; }
  .value-grid, .metric-grid, .measure-cards { grid-template-columns: 1fr; }
  .value-grid article, .value-grid article:nth-child(3n+2), .value-grid article:nth-child(3n+3) { padding: 28px 0; border-right: 0; min-height: auto; }
  .measure-cards article, .measure-cards article:not(:first-child) { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .metric-grid article, .metric-grid article:nth-child(2) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .program-detail { grid-template-columns: 1fr; }
  .program-detail > :last-child { grid-column: 1; }
  .page-hero { padding-top: 64px; }
  /* Was clamp(52px, 13vw, 80px). At 360px that resolves to the 52px floor,
     while the homepage hero correctly gets 31px from the 2.6.9 fix — so the
     mobile-headline correction never reached a single inner page, and About
     opened with roughly four lines of headline before its mission sentence.
     Specificity (0,1,1) beat the general h1 rule, so it won silently. */
  .page-hero-copy h1 { font-size: clamp(34px, 9vw, 48px); }
  .pathway-card { padding: 30px 24px; }
  .inquiry-panel { padding: 32px 22px; }
  .v2-inquiry-panel { padding: 32px 22px; }
  .transparency-list article, .transparency-list article:last-child { grid-column: auto; min-height: auto; padding: 32px 22px; }
  .contact-details strong { overflow-wrap: anywhere; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
  .footer-links { grid-template-columns: 1fr; gap: 32px; }
  .cookie-notice { grid-template-columns: 1fr; }
  .cookie-actions { justify-content: space-between; }
}


/* ── v2.1.1 Brand: the Returning Arc lockup ───────────────────────────────────
   The arc is the only circular mark. The old disc badge is retired: "SON" now
   sets as serif letterspaced text beside the symbol, mirroring the approved
   horizontal lockup (symbol · wordmark · full name). */
.brand { display: flex; align-items: center; gap: 13px; }
.brand-symbol {
  width: 38px; height: 38px; flex: 0 0 auto;
  color: var(--navy);
}
.brand-mark {
  width: auto; height: auto;
  display: inline-block;
  background: none;
  border-radius: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  flex-shrink: 0;
}
.footer-brand .brand-mark { background: none; color: var(--sand); }
footer .brand-symbol { color: var(--sand); }
footer .brand-name { color: rgba(250,250,247,.78); }
.v2-hero .brand-symbol { color: var(--sand); }
.brand:hover .brand-symbol { color: var(--gold); transition: color .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-symbol { transition: none; }
}

/* Visible keyboard focus, everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* v2.1.3 — single Programme CTA under the pillars grid */
.v2-pillars__cta { margin-top: 34px; }
.v2-pillars__cta .v2-pillar__link { font-size: 17px; }

/* ================================================================
   SON Learning Academy — v2.2.0
   ================================================================ */
.academy-page { background: var(--cream); }
.academy-hero .page-hero-copy { max-width: 760px; }
.academy-course-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  width: min(100%, 1180px);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 64px);
  background: var(--white);
  border: 1px solid var(--navy-a12);
}
.academy-course-card h3 { margin: 6px 0 16px; font-size: clamp(2rem, 4vw, 3.4rem); }
.academy-course-card p { max-width: 760px; }
.academy-course-label,
.academy-progress-copy { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; }
.academy-progress { height: 7px; margin: 28px 0 10px; background: var(--navy-a12); overflow: hidden; }
.academy-progress span { display: block; height: 100%; background: var(--gold); }

@media (max-width: 760px) {
  .academy-pathway-heading { margin-bottom: 52px; }
  .academy-course-card {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .academy-course-card .button { justify-self: start; }
}

.academy-course-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  padding: 84px max(6vw, 40px) 54px;
  color: var(--white);
  background: var(--navy);
}
.academy-course-header h1 { max-width: 900px; margin: 14px 0 20px; color: var(--white); font-size: clamp(2.5rem, 5vw, 5rem); }
.academy-course-header p { max-width: 760px; }
.academy-course-progress-box { align-self: end; padding: 28px; border: 1px solid rgba(255,255,255,.2); }
.academy-course-progress-box strong { display: block; font-family: Newsreader, Georgia, serif; font-size: 3rem; }
.academy-course-progress-box span { display: block; margin-top: 4px; font-size: .84rem; }
.academy-course-progress-box .academy-progress { background: rgba(255,255,255,.2); }
.academy-module-list { border-top: 1px solid var(--navy-a16); }
.academy-module-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 170px;
  gap: 30px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--navy-a16);
}
.academy-module-number { font-family: Newsreader, Georgia, serif; font-size: 2rem; color: var(--navy); }
.academy-module-copy p { margin: 0 0 5px; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 700; }
.academy-module-copy h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
.academy-module-copy span { display: block; max-width: 760px; }
.academy-module-action { text-align: right; }
.academy-module-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .72rem 1.1rem;
  border: 1px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.academy-module-button:hover,
.academy-module-button:focus-visible {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(26,43,107,.16);
  transform: translateY(-1px);
}
.academy-module-button:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.academy-module-action span { font-size: .78rem; opacity: .65; }
.academy-module-row.is-complete .academy-module-number::after { content: ' ✓'; font-family: Inter, sans-serif; font-size: 1rem; }
.academy-module-row.is-locked { opacity: .5; }
.academy-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 35px; font-size: .8rem; }
.academy-lesson-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: start; }
/* The main column must be allowed to be narrower than its widest child, or a
   wide table or a long unbroken string forces the whole column past the grid
   and content spills out. min-width:0 lifts the grid item's auto minimum;
   overflow-wrap catches long strings inside prose. */
.academy-lesson-main { min-width: 0; }
.academy-lesson-main p,
.academy-lesson-main li,
.academy-lesson-main h2,
.academy-lesson-main h3 { overflow-wrap: anywhere; }
.academy-lesson-main > section { padding: 0 0 52px; margin: 0 0 52px; border-bottom: 1px solid var(--navy-a16); }
.academy-lesson-main h2 { margin: 8px 0 18px; }
.academy-placeholder { padding-left: 20px; border-left: 3px solid var(--gold); }
.academy-content-placeholder { min-height: 130px; padding: 30px; background: rgba(255,255,255,.65); border: 1px dashed var(--navy-a30); }
.academy-lesson-main blockquote { margin: 24px 0 0; padding: 30px; font-family: Newsreader, Georgia, serif; font-size: 1.5rem; background: var(--white); border-left: 4px solid var(--gold); }
.academy-lesson-sidebar { position: sticky; top: 32px; padding: 28px; background: var(--white); border: 1px solid var(--navy-a12); }
.academy-lesson-sidebar dl { margin: 24px 0; }
.academy-lesson-sidebar dl div { padding: 13px 0; border-bottom: 1px solid var(--navy-a12); }
.academy-lesson-sidebar dt { text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; font-weight: 700; }
.academy-lesson-sidebar dd { margin: 4px 0 0; }
.academy-complete-form { padding: 32px; background: var(--navy); color: var(--white); }
.academy-complete-form button { padding: 14px 22px; border: 0; background: var(--gold); color: var(--navy); font-weight: 800; cursor: pointer; }
.academy-complete-form p { margin: 14px 0 0; font-size: .8rem; opacity: .8; }
.academy-notice { margin-bottom: 28px; padding: 22px 26px; background: var(--white); border-left: 4px solid var(--gold); }
.academy-notice p { margin: 5px 0 0; }
.academy-notice.success { border-left-color: var(--status-sound); }

/* -- Module journey rail --------------------------------------------------
   The ordered stages of the module, shown across the top so the reader has
   the shape of the lesson before they start and can jump between parts.
   Derived from the module's own sections, so it can never drift from the
   content it describes. */
.academy-rail { margin: 0 0 44px; }
.academy-rail ol { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
.academy-rail-stage { position: relative; text-align: center; min-width: 0; }
.academy-rail-stage a { display: block; padding: 0 4px; text-decoration: none; color: var(--muted); }
.academy-rail-stage a:hover .academy-rail-label,
.academy-rail-stage a:focus-visible .academy-rail-label { color: var(--navy); }
.academy-rail-dot { display: flex; width: 34px; height: 34px; margin: 0 auto 9px; align-items: center; justify-content: center; border-radius: 50%; background: var(--white); border: 1px solid var(--navy-a30); font-size: .85rem; font-weight: 700; color: var(--navy); position: relative; z-index: 1; }
.academy-rail-label { display: block; font-size: .72rem; line-height: 1.35; color: var(--muted); }
/* Connecting line + arrowhead between stages. */
.academy-rail-stage:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 50%; width: 100%; height: 1px; background: var(--navy-a20); z-index: 0; }
.academy-rail-stage:not(:last-child)::before { content: ""; position: absolute; top: 13px; left: calc(100% - 4px); width: 7px; height: 7px; border-top: 1.5px solid var(--navy-a30); border-right: 1.5px solid var(--navy-a30); transform: rotate(45deg); z-index: 1; }

/* -- Reflection flip cards -------------------------------------------------
   Prompt on the front and approved guidance on the back. JavaScript enables
   the fixed-size 3D interaction; without JavaScript both faces remain in the
   normal document flow so no guidance is lost. */
.academy-flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 28px 0;
  align-items: start;
}
.academy-flip {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  font: inherit;
  box-sizing: border-box;
}
.academy-flip-inner { display: block; }
.academy-flip-face {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 26px 26px 24px;
  background: var(--white);
  border: 1px solid var(--navy-a16);
  border-left: 4px solid var(--coral);
  box-sizing: border-box;
}
.academy-flip-back { margin-top: 12px; }
.academy-flip-tag {
  display: block;
  margin: 0 0 12px;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--coral);
}
.academy-flip-back .academy-flip-tag { color: var(--navy); }
.academy-flip-body {
  display: block;
  margin: 0;
  font-family: Newsreader, Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.58;
  overflow-wrap: anywhere;
}
.academy-flip-guidance {
  font-family: Inter, system-ui, sans-serif;
  font-size: .95rem;
  line-height: 1.6;
}
.academy-flip-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: auto 0 0;
  padding-top: 20px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 170ms ease;
}
.academy-flip-hint::after {
  content: "›";
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 170ms ease;
}
.academy-flip-return::after { transform: rotate(180deg); }

/* The flip treatment is activated only after JavaScript has initialised the
   card. This preserves a complete, readable no-JavaScript fallback. */
.academy-flip.is-ready {
  height: 286px;
  cursor: pointer;
  perspective: 1200px;
}
.academy-flip.is-ready .academy-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(.2,.72,.2,1);
}
.academy-flip.is-ready.is-flipped .academy-flip-inner { transform: rotateY(180deg); }
.academy-flip.is-ready .academy-flip-face {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  transition: border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease;
}
.academy-flip.is-ready .academy-flip-back { transform: rotateY(180deg); }
.academy-flip.is-ready .academy-flip-guidance {
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}
.academy-flip.is-ready:hover .academy-flip-face,
.academy-flip.is-ready:focus-visible .academy-flip-face {
  background: var(--paper);
  border-color: var(--navy-a30);
  border-left-color: var(--coral);
  box-shadow: 0 12px 28px rgba(15,14,46,.1);
}
.academy-flip.is-ready:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.academy-flip.is-ready:hover .academy-flip-hint,
.academy-flip.is-ready:focus-visible .academy-flip-hint { color: var(--navy); }
.academy-flip.is-ready:hover .academy-flip-hint::after,
.academy-flip.is-ready:focus-visible .academy-flip-hint::after { transform: translateX(3px); }
.academy-flip.is-ready:hover .academy-flip-return::after,
.academy-flip.is-ready:focus-visible .academy-flip-return::after { transform: rotate(180deg) translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .academy-flip.is-ready .academy-flip-inner { transition: none; }
}
@media (max-width: 700px) {
  .academy-flip-grid { grid-template-columns: 1fr; }
  .academy-flip.is-ready { height: 300px; }
  .academy-flip-face { padding: 24px; }
}

/* -- Per-section sources ---------------------------------------------------
   Citations live here rather than in the prose. Quiet by design: the reader
   reaches it only if they want the source. Links open the manual; until a link
   is registered the item shows a pending marker. Distinct from the sidebar
   .academy-sources panel. */
.academy-section-sources { margin: 28px 0 0; padding: 18px 20px; background: var(--cream); border-left: 3px solid var(--navy-a30); }
.academy-section-sources-label { margin: 0 0 10px; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.academy-section-sources ul { margin: 0; padding: 0; list-style: none; }
.academy-section-sources li { padding: 7px 0; border-top: 1px solid var(--navy-a12); font-size: .85rem; line-height: 1.5; }
.academy-section-sources li:first-child { border-top: 0; padding-top: 0; }
.academy-source-name { font-weight: 700; color: var(--navy); text-decoration: none; }
a.academy-source-name:hover { text-decoration: underline; }
.academy-source-pending { margin-left: 8px; font-size: .7rem; font-weight: 400; color: var(--muted-lt); font-style: italic; }
.academy-source-ref { display: block; margin-top: 2px; color: var(--muted); }

@media (max-width: 900px) {
  /* On narrow screens the rail wraps to two rows and drops the arrowheads. */
  .academy-rail ol { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; gap: 18px 4px; }
  .academy-rail-stage:not(:last-child)::after,
  .academy-rail-stage:not(:last-child)::before { display: none; }
}
@media (max-width: 900px) {
  .academy-course-card,
  .academy-course-header,
  .academy-lesson-grid { grid-template-columns: 1fr; }
  .academy-module-row { grid-template-columns: 48px 1fr; }
  .academy-module-action { grid-column: 2; text-align: left; }
  .academy-lesson-sidebar { position: static; }
}
@media (max-width: 560px) {
  .academy-course-card { padding: 28px; }
  .academy-course-header { padding: 58px 24px 38px; }
  .academy-module-row { gap: 16px; }
}


/* ── v2.3.0 Expression of Interest forms ──────────────────────────────────
   Longer than the enquiry forms, so answers are grouped into fieldsets with
   visible legends. Adds the first select, fieldset, and checkbox styling in
   the system; the enquiry form had none because it never needed any. */
.son-application-form { max-width: 860px; }
.son-fieldset {
  margin: 0 0 34px;
  padding: 0 0 30px;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.son-fieldset:last-of-type { border-bottom: 0; padding-bottom: 8px; }
.son-fieldset legend {
  padding: 0 0 18px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--ink);
}
.son-form select {
  width: 100%; padding: 14px 16px;
  border: 1px solid rgba(15,14,46,.2); border-radius: 2px;
  background: var(--sand); color: var(--ink);
  font: inherit; font-size: 15px;
  transition: border-color .15s;
}
.son-form select:focus {
  outline: 2px solid rgba(201,168,76,.5);
  outline-offset: 2px;
  border-color: var(--ink);
}
.son-field-note {
  margin: -8px 0 22px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}
.son-field-note a { color: var(--coral); border-bottom: 1px solid currentColor; }
.son-check-group { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 22px; }
.son-check {
  display: flex; align-items: flex-start; gap: 11px;
  margin-bottom: 0; font-size: 14px; font-weight: 500; line-height: 1.6;
  color: var(--ink); cursor: pointer;
}
.son-check input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--gold); cursor: pointer;
}
.son-check span {
  display: block; margin-bottom: 0;
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink);
}
.son-check-block {
  margin-bottom: 18px; padding: 16px 18px;
  background: var(--sand); border: 1px solid rgba(15,14,46,.12); border-radius: 2px;
}
.son-check-block span { color: var(--muted); line-height: 1.7; }
@media (max-width: 720px) {
  .son-check-group { flex-direction: column; gap: 14px; }
}

/* Programme Manager Academy — lesson content (v2.5.0) */
.academy-lesson-standing-note {
  margin: 0 0 40px; padding: 20px 24px; background: var(--white);
  border-left: 4px solid var(--gold); font-size: .92rem;
}
.academy-lesson-main .academy-lesson-subhead {
  margin: 38px 0 14px; font-family: Inter, sans-serif;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy);
}
.academy-lesson-main > section > p { max-width: 68ch; margin: 0 0 18px; }
.academy-lesson-main > section > p:last-child { margin-bottom: 0; }
.academy-lesson-main .academy-lesson-subhead + p { margin-top: 0; }
.academy-lesson-main blockquote + p { margin-top: 24px; }
.academy-lesson-main .academy-lesson-note {
  max-width: 68ch; padding: 18px 22px; background: rgba(184, 148, 70, .1);
  border-left: 3px solid var(--gold); font-size: .92rem;
}
.academy-lesson-list { max-width: 68ch; margin: 18px 0; padding-left: 1.2em; }
.academy-lesson-list li { margin-bottom: 10px; }
.academy-lesson-list-numbered { counter-reset: none; }
.academy-lesson-table-wrap { margin: 24px 0; overflow-x: auto; }
.academy-lesson-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: .9rem; }
.academy-lesson-table th,
.academy-lesson-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--navy-a12); }
.academy-lesson-table th {
  background: var(--navy); color: var(--white); font-family: Inter, sans-serif;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.academy-lesson-table tbody tr:last-child td { border-bottom: 0; }
.academy-sources { margin: 28px 0; padding-top: 24px; border-top: 1px solid var(--navy-a12); }
.academy-sources-intro { margin: 10px 0 16px; font-size: .78rem; opacity: .75; }
.academy-sources ul { margin: 0; padding: 0; list-style: none; }
.academy-sources li { padding: 11px 0; border-bottom: 1px solid rgba(15,39,71,.1); }
.academy-sources li:last-child { border-bottom: 0; }
.academy-sources strong { display: block; font-size: .82rem; }
.academy-sources span { display: block; margin-top: 3px; font-size: .76rem; opacity: .75; }
.academy-sources-drawn { margin: 16px 0 0; font-size: .72rem; opacity: .65; }
@media (max-width: 900px) {
  .academy-lesson-main > section > p,
  .academy-lesson-main .academy-lesson-note,
  .academy-lesson-list { max-width: none; }
}

/* =============================================================================
   ACADEMY — the interaction layer (v2.6.0)

   Before this, a lesson was prose with the answer printed underneath it. The
   three interactive blocks are what make the Academy something other than the
   manual on a page, and the signature of the set is the seal: the discussion
   in section 4 is physically closed until the learner commits to a choice.
   Everything else here stays quiet so that the seal, and the verdict that
   follows it, are the two things the page is remembered by.

   Palette follows the surrounding Academy block: navy var(--navy), gold var(--gold),
   page var(--cream), hairlines on rgba(15,39,71,...). No radii, as everywhere else.
   ============================================================================= */

.academy-index-intro { max-width: 68ch; margin: 0 0 38px; }
.academy-module-state {
  margin: 10px 0 0 !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: .78rem !important;
  font-weight: 600 !important; color: var(--navy);
}

/* ── Shared controls ─────────────────────────────────────────────────────── */
.academy-interactive-form { margin: 0; }
.academy-button {
  margin-top: 26px; padding: 15px 26px; border: 0; background: var(--navy); color: var(--white);
  font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; transition: background .18s;
}
.academy-button:hover { background: var(--gold); color: var(--navy); }
.academy-link-button {
  margin-top: 22px; padding: 0; border: 0; border-bottom: 1px solid rgba(15,39,71,.4);
  background: none; color: var(--navy); font-family: inherit; font-size: .82rem;
  font-weight: 700; cursor: pointer;
}
.academy-link-button:hover { border-bottom-color: var(--navy); color: var(--navy); }
.academy-textarea {
  width: 100%; min-height: 210px; padding: 16px 18px; background: var(--white); color: var(--navy);
  border: 1px solid rgba(15,39,71,.28); font-family: inherit; font-size: .95rem;
  line-height: 1.65; resize: vertical;
}
.academy-textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--navy); }

/* ── Choices, shared by probes, decisions and the knowledge check ────────── */
.academy-choices { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
/* Flex rather than grid: a choice carries two children when it is resolved and
   three when it carries an input, and a grid would need :has() to tell them
   apart. Flex handles both without depending on selector support. */
.academy-choice {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px; background: var(--white); border: 1px solid var(--navy-a18);
  cursor: pointer; transition: border-color .16s, background .16s;
}
.academy-choice:hover { border-color: var(--navy); }
.academy-choice input { flex: none; margin: .32em 0 0; accent-color: var(--navy); }
.academy-choice-key {
  flex: none; min-width: 20px; font-family: Newsreader, Georgia, serif;
  font-size: 1.1rem; font-weight: 600; color: var(--navy); line-height: 1.45;
}
.academy-choice-text { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.6; }
.academy-choice:has(input:checked) { border-color: var(--navy); background: var(--cream-lt); }
.academy-choice:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

.academy-choices-resolved { list-style: none; }
.academy-choice-static { cursor: default; }
.academy-choice-static.is-chosen { border-color: var(--navy); border-left-width: 4px; }
.academy-choice-static.is-answer { background: var(--status-sound-bg); border-color: var(--status-sound); }
.academy-choice-static.is-answer .academy-choice-key { color: var(--status-sound); }
.academy-choice-static.is-wrong { background: var(--status-unsound-bg); border-color: var(--status-unsound); }
.academy-choice-static.is-wrong .academy-choice-key { color: var(--status-unsound); }
.academy-choice-static.is-answer.is-chosen { border-left-width: 4px; }

/* ── Probe: light practice, recorded but unscored ────────────────────────── */
.academy-probe {
  margin: 26px 0 0; padding: 24px; background: var(--white);
  border: 1px solid var(--navy-a16); border-left: 3px solid var(--navy-a20);
}
.academy-probe-head { margin-bottom: 18px; }
.academy-probe-label {
  margin: 0 0 6px !important; text-transform: uppercase; letter-spacing: .12em;
  font-size: .62rem; font-weight: 800; color: var(--muted);
}
.academy-probe-situation { max-width: 68ch; margin: 0 0 12px; color: var(--muted); }
.academy-probe-situation p { margin: 0 0 10px; }
.academy-probe-situation p:last-child { margin-bottom: 0; }
.academy-probe .academy-lesson-subhead { margin-top: 0; }
.academy-probe-reveal {
  margin-top: 22px; padding: 18px 22px; background: var(--cream-lt);
  border-left: 3px solid var(--status-sound);
}
.academy-probe-reveal .academy-answer-label { margin-top: 0 !important; }

/* ── Section 4: the decision, and the seal ───────────────────────────────── */
.academy-decision { margin: 30px 0 0; padding: 30px; background: var(--cream-lt); border: 1px solid var(--navy-a20); border-top: 3px solid var(--gold); }
.academy-decision-head { margin-bottom: 22px; }
.academy-decision-label {
  margin: 0 0 6px !important; text-transform: uppercase; letter-spacing: .12em;
  font-size: .66rem; font-weight: 800; color: var(--navy);
}
.academy-decision .academy-lesson-subhead { margin-top: 0; }
.academy-decision-help { margin: 10px 0 0 !important; max-width: 68ch; font-size: .9rem; color: var(--muted); }
.academy-decision-warning { margin: 18px 0 0 !important; max-width: 68ch; font-size: .8rem; line-height: 1.6; color: var(--muted); }

.academy-verdict { margin-top: 30px; padding: 26px 28px; background: var(--white); border-left: 4px solid var(--gold); }
.academy-verdict-label {
  margin: 0 0 12px !important; text-transform: uppercase; letter-spacing: .1em;
  font-size: .68rem; font-weight: 800;
}
.academy-verdict-body p { margin: 0 0 14px; max-width: 68ch; }
.academy-verdict-body p:last-child { margin-bottom: 0; }
.verdict-sound { border-left-color: var(--status-sound); }
.verdict-sound .academy-verdict-label { color: var(--status-sound); }
.verdict-defensible { border-left-color: var(--navy); }
.verdict-defensible .academy-verdict-label { color: var(--navy); }
.verdict-unsound { border-left-color: var(--status-unsound); }
.verdict-unsound .academy-verdict-label { color: var(--status-unsound); }

.academy-discussion { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--navy-a16); }
.academy-discussion p { max-width: 68ch; margin: 0 0 18px; }
.academy-discussion p:last-child { margin-bottom: 0; }
.academy-discussion .academy-lesson-subhead { margin-top: 26px; }

/* ── The capstone simulation ─────────────────────────────────────────────
   A stateful, branching week. Resolved steps stack as a trail; the current
   step is a live decision; the run ends in an outcome. Reuses .academy-choice,
   .academy-button and the verdict-* colour tokens. */
.academy-simulation { margin: 30px 0 0; padding: 30px; background: var(--cream-lt); border: 1px solid var(--navy-a20); border-top: 3px solid var(--gold); }
.academy-sim-intro { max-width: 68ch; margin: 0 0 24px; }
.academy-sim-intro p { max-width: 68ch; margin: 0 0 14px; }
.academy-sim-intro p:last-child { margin-bottom: 0; }
.academy-sim-trail { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: sim; }
.academy-sim-step { position: relative; }
.academy-sim-step-resolved { padding: 0 0 22px 22px; margin: 0 0 22px; border-left: 2px solid var(--navy-a16); }
.academy-sim-step-resolved:last-child { margin-bottom: 0; }
.academy-sim-day { margin: 0 0 6px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep, var(--navy)); }
.academy-sim-situation { max-width: 68ch; margin: 0 0 10px; }
.academy-sim-chosen { max-width: 68ch; margin: 0 0 10px; font-size: .92rem; }
.academy-sim-chosen-key { font-weight: 700; color: var(--navy); }
.academy-sim-feedback { padding: 14px 18px; background: var(--white); border-left: 4px solid var(--navy); }
.academy-sim-feedback.verdict-sound { border-left-color: var(--status-sound); }
.academy-sim-feedback.verdict-unsound { border-left-color: var(--status-unsound); }
.academy-sim-feedback.verdict-defensible { border-left-color: var(--navy); }
.academy-sim-feedback p { max-width: 68ch; margin: 0 0 12px; font-size: .92rem; }
.academy-sim-feedback p:last-child { margin-bottom: 0; }
.academy-sim-step-active { padding: 24px; background: var(--white); border: 1px solid var(--navy-a20); border-top: 3px solid var(--gold); }
.academy-sim-step-active .academy-lesson-subhead { margin-top: 6px; }
.academy-sim-outcome { margin-top: 8px; padding: 26px 28px; background: var(--white); border-left: 4px solid var(--gold); }
.academy-sim-outcome.verdict-sound { border-left-color: var(--status-sound); }
.academy-sim-outcome.verdict-unsound { border-left-color: var(--status-unsound); }
.academy-sim-outcome.verdict-defensible { border-left-color: var(--navy); }
.academy-sim-outcome-label { margin: 0 0 12px; font-weight: 700; color: var(--navy); }
.academy-sim-outcome-body p { max-width: 68ch; margin: 0 0 14px; }
.academy-sim-outcome-body p:last-child { margin-bottom: 0; }

/* ── Section 5: the knowledge check ──────────────────────────────────────── */
.academy-quiz { width: 100%; max-width: 100%; margin: 30px 0 0; }
.academy-quiz-intro,
.academy-quiz-meta { max-width: 68ch; }
.academy-quiz-intro { margin: 0 0 14px; }
.academy-quiz-meta { margin: 0 0 30px; font-size: .84rem; color: var(--muted); }

/* Keep every Academy content block inside its parent at all viewport sizes. */
.academy-lesson-main,
.academy-lesson-main > section,
.academy-quiz,
.academy-quiz form,
.academy-interactive-form,
.academy-choices,
.academy-probe,
.academy-decision,
.academy-discussion,
.academy-simulation,
.academy-question,
.academy-question-head,
.academy-order-list,
.academy-classify-list,
.academy-order-row,
.academy-classify-row {
  min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box;
}
.academy-lesson-main :is(p, li, blockquote, label, td, th, a, span, strong) {
  overflow-wrap: break-word; word-break: normal;
}
.academy-textarea,
.academy-order-select,
.academy-classify-select { max-width: 100%; box-sizing: border-box; }

.academy-question {
  min-inline-size: 0; width: 100%; max-width: 100%; box-sizing: border-box;
  margin: 0 0 30px; padding: 28px; background: var(--white);
  border: 1px solid var(--navy-a18); overflow: hidden;
}
/* Keep the semantic fieldset legend available to assistive technology without
   allowing the browser's native legend geometry to cut through the card. */
.academy-question-sr {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.academy-question-head {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 12px;
  align-items: start; width: 100%; max-width: 100%; box-sizing: border-box;
  margin: 0 0 22px; padding: 0;
  font-family: Newsreader, Georgia, serif; font-size: 1.22rem; line-height: 1.38;
  letter-spacing: -.02em;
}
.academy-question-legend {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 12px; align-items: start;
  min-width: 0; max-width: 100%;
  font-family: Newsreader, Georgia, serif; font-size: 1.22rem; line-height: 1.38;
  letter-spacing: -.02em;
}
/* The marked result view emits a different head from the form view: the number
   and title are wrapped in `.academy-question-legend` and a `.academy-mark`
   badge follows. Under the two-column grid above, that put the whole legend —
   number and full question text — into the 2.25rem track and the badge into
   the 1fr track, breaking the question apart character by character. `float`
   is ignored on a grid item, so the badge could not escape it. The marked head
   gets its own axis instead. */
.academy-question-marked .academy-question-head {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
}
.academy-question-marked .academy-question-legend { flex: 1 1 auto; }
.academy-question-marked .academy-mark { flex: 0 0 auto; float: none; margin-left: 0; }

.academy-question-title { min-width: 0; overflow-wrap: break-word; word-break: normal; }
.academy-question-number {
  display: block; margin: .38em 0 0; font-family: Inter, sans-serif;
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--navy);
  line-height: 1;
}
.academy-question-hint { margin: 0 0 14px !important; font-size: .82rem; color: var(--muted); }
.academy-question-marked { border-left: 4px solid var(--navy-a20); }
.mark-correct { border-left-color: var(--status-sound); }
.mark-incorrect { border-left-color: var(--status-unsound); }
.mark-written { border-left-color: var(--navy); }
.academy-mark {
  float: right; margin-left: 16px; font-family: Inter, sans-serif;
  text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; font-weight: 800;
}
.mark-correct .academy-mark { color: var(--status-sound); }
.mark-incorrect .academy-mark { color: var(--status-unsound); }
.mark-written .academy-mark { color: var(--navy); }

.academy-order-list, .academy-classify-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.academy-order-row, .academy-classify-row {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 12px 14px; background: var(--cream-lt); border: 1px solid var(--navy-a12);
}
.academy-order-select, .academy-classify-select {
  padding: 9px 10px; background: var(--white); color: var(--navy);
  border: 1px solid var(--navy-a30); font-family: inherit; font-size: .88rem;
}
.academy-order-select:focus, .academy-classify-select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.academy-order-select { min-width: 68px; }
.academy-classify-select { min-width: 170px; }
.academy-order-text, .academy-classify-text { font-size: .92rem; line-height: 1.55; }

.academy-score {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px;
  margin: 0 0 30px; padding: 24px 28px; background: var(--navy); color: var(--white);
}
.academy-score strong { font-family: Newsreader, Georgia, serif; font-size: 2.8rem; line-height: 1; }
.academy-score span { font-size: .88rem; opacity: .85; }
.academy-score.is-pass { border-left: 5px solid var(--status-sound-rev); }
.academy-score.is-fail { border-left: 5px solid var(--status-unsound-rev); }

.academy-answer-label {
  margin: 20px 0 8px !important; text-transform: uppercase; letter-spacing: .1em;
  font-size: .64rem; font-weight: 800; color: var(--navy);
}
.academy-answer-given, .academy-answer-model { max-width: 68ch; }
.academy-answer-given p, .academy-answer-model p, .academy-explain p { margin: 0 0 12px; }
.academy-answer-given { padding: 14px 18px; background: var(--cream-lt); border-left: 3px solid var(--navy-a20); }
.academy-answer-model { padding: 14px 18px; background: var(--status-sound-bg); border-left: 3px solid var(--status-sound); }
.academy-explain { max-width: 68ch; }
.academy-cite {
  margin: 14px 0 0 !important; font-family: "IBM Plex Mono", monospace;
  font-size: .72rem; letter-spacing: .01em; color: var(--muted);
}

/* ── Section 6: the practical task ───────────────────────────────────────── */
.academy-task { margin: 30px 0 0; }
.academy-criteria { max-width: 68ch; margin: 22px 0; padding: 20px 24px; background: var(--white); border: 1px solid var(--navy-a16); }
.academy-criteria ul { margin: 0; padding: 0; list-style: none; }
.academy-criteria li { position: relative; padding: 0 0 9px 20px; font-size: .9rem; line-height: 1.55; }
.academy-criteria li::before { content: '—'; position: absolute; left: 0; color: var(--navy); }
.academy-criteria li:last-child { padding-bottom: 0; }

.academy-task-part { margin: 26px 0; }
.academy-task-label { display: block; margin-bottom: 6px; font-weight: 700; font-size: .95rem; }
.academy-task-status {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px;
  margin: 22px 0; padding: 18px 22px; background: var(--white); border-left: 4px solid var(--gold);
}
.academy-task-status strong { font-size: .95rem; }
.academy-task-status span { font-size: .8rem; color: var(--muted); }
.status-submitted { border-left-color: var(--navy); }
.status-accepted { border-left-color: var(--status-sound); }
.status-returned { border-left-color: var(--status-unsound); }
.academy-founder-note { max-width: 68ch; margin: 20px 0; padding: 18px 22px; background: var(--cream-lt); border: 1px solid rgba(184,148,70,.5); }
.academy-founder-note p { margin: 0 0 10px; }
.academy-founder-note p:last-child { margin-bottom: 0; }

/* ── Completion gate and the sidebar rail ────────────────────────────────── */
.academy-complete-form form { margin: 0; }
.academy-complete-form .academy-decision-label { color: var(--gold-lt); }
.academy-outstanding { list-style: none; margin: 0 0 18px; padding: 0; }
.academy-outstanding li {
  position: relative; padding: 0 0 12px 26px; font-size: .92rem; line-height: 1.55;
}
.academy-outstanding li::before {
  content: ''; position: absolute; top: 7px; left: 0; width: 11px; height: 11px;
  border: 1px solid rgba(255,255,255,.55);
}
.academy-outstanding li:last-child { padding-bottom: 0; }

.academy-requirements { list-style: none; margin: 14px 0 30px; padding: 0; counter-reset: req; }
.academy-requirements li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--navy-a12); font-size: .82rem;
}
.academy-requirements li a { border-bottom: 1px solid transparent; }
.academy-requirements li a:hover { border-bottom-color: var(--navy); }

/* ── Academy: accessibility floor ────────────────────────────────────────────
   Priority 1 and 2 checks. The Academy is the only part of the site driven by
   radios, checkboxes, selects and textareas, and the global focus rule covers
   `a` and `button` only — so every one of these controls was reaching keyboard
   users with no visible focus at all. Focus rings are navy rather than gold:
   gold on a light ground measures 2.3:1 and cannot carry a focus indicator.
   -------------------------------------------------------------------------- */
.academy-page :is(input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 1px;
}
.academy-draft-status {
  margin: 14px 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
  border-left: 2px solid var(--gold);
  padding-left: 12px;
}
.academy-complete-form .academy-draft-status { color: var(--cream-lt); }

.academy-page :is(a, button):focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* Touch targets: probe, decision and quiz choices are primary controls and
   must clear 44px on a phone. */
.academy-choice,
.academy-order-row,
.academy-classify-row { min-height: 44px; }
.academy-choice { align-items: center; }
.academy-order-select,
.academy-classify-select { min-height: 44px; }
.academy-button,
.academy-complete-form button { min-height: 44px; }

/* Motion: the Academy's transitions are 160ms colour fades, already inside the
   150–300ms band. They are still surrendered on request. */
@media (prefers-reduced-motion: reduce) {
  .academy-page *,
  .academy-page *::before,
  .academy-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

.academy-requirements li span { flex: none; font-size: .7rem; font-weight: 700; color: var(--muted); }
.academy-requirements li.is-done a { color: var(--status-sound); }
.academy-requirements li.is-done span { color: var(--status-sound); }
.academy-requirements li.is-done::before { content: '✓ '; color: var(--status-sound); font-size: .78rem; }

.academy-notice.warning { border-left-color: var(--status-unsound); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .academy-lesson-grid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .academy-lesson-sidebar { position: static; width: 100%; }
}
@media (max-width: 900px) {
  .academy-probe, .academy-decision, .academy-question { padding: 22px 20px; }
  .academy-question-head, .academy-question-legend { grid-template-columns: 1.9rem minmax(0, 1fr); gap: 10px; }
  .academy-mark { float: none; margin: 0; align-self: flex-start; }
  .academy-classify-row, .academy-order-row { grid-template-columns: 1fr; gap: 8px; }
  .academy-classify-select, .academy-order-select { width: 100%; }
  .academy-score { padding: 20px 22px; }
  .academy-score strong { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .academy-button, .academy-choice { transition: none; }
}

/* ── Structured primary navigation — v2.8.2 ─────────────────────────────── */
.nav-group { position: relative; }
.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.nav-group-toggle span { font-size: 11px; transition: transform .15s; }
.nav-group.is-open .nav-group-toggle { color: var(--ink); border-bottom-color: var(--ink); }
.nav-group.is-open .nav-group-toggle span { transform: rotate(180deg); }
.nav-submenu {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: -18px;
  width: max-content;
  min-width: 245px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--sand);
  box-shadow: 0 18px 42px rgba(15,14,46,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-submenu-right { left: auto; right: -18px; }
.nav-group.is-open .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-submenu a {
  display: block;
  padding: 10px 12px;
  color: var(--muted);
  line-height: 1.35;
  white-space: nowrap;
}
.nav-submenu a:hover,
.nav-submenu a:focus { color: var(--ink); background: rgba(26,43,107,.05); }

body.son-page-about .nav-group:first-child .nav-group-toggle,
body.son-page-transparency .nav-group:first-child .nav-group-toggle,
body.son-page-governance-accountability .nav-group:first-child .nav-group-toggle,
body.son-page-programs .nav-group:nth-child(2) .nav-group-toggle,
body.son-page-scholar-development-framework .nav-group:nth-child(2) .nav-group-toggle,
body.son-page-school-partnership .nav-group:nth-child(2) .nav-group-toggle,
body.son-page-impact .nav-group:nth-child(2) .nav-group-toggle,
body.son-page-get-involved .nav-group:nth-of-type(3) .nav-group-toggle,
body.son-page-apply .nav-group:nth-of-type(3) .nav-group-toggle,
body.son-page-learning-academy .site-nav > a[href*="/learning-academy/"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

@media (max-width: 900px) {
  .site-nav { gap: 0; }
  .nav-group { border-bottom: 1px solid var(--line); }
  .nav-group-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 16px;
    border-bottom: 0;
  }
  .nav-submenu,
  .nav-submenu-right {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    padding: 0 0 10px 14px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
  }
  .nav-group.is-open .nav-submenu { display: block; }
  .nav-submenu a {
    padding: 9px 0;
    white-space: normal;
    font-size: 14px;
  }
  .site-nav > a:not(.btn) { font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
}


/* v2.8.2 repair: stable anchor offsets, Academy layout, and visible header focus. */
html { scroll-padding-top: 96px; }
.academy-standard-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: clamp(32px, 6vw, 84px); align-items: start; }
.site-header :is(a, button):focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
@media (max-width: 760px) { .academy-standard-grid { grid-template-columns: 1fr; } }

/* v2.9.3 Academy typography and course navigation. */
.academy-standard-grid > div:first-child { max-width: 760px; }
.academy-standard-grid h2 {
  max-width: 12ch;
  margin: 0 0 24px;
  font-size: clamp(3rem, 5.6vw, 5.8rem);
  line-height: .94;
  letter-spacing: -.045em;
}
.academy-standard-grid > div:first-child > p {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.65;
  color: var(--muted);
}
.academy-standard-grid .check-list { margin: 8px 0 0; }
.academy-standard-grid .check-list li {
  padding: 22px 0 22px 34px;
  font-size: .95rem;
  line-height: 1.5;
}
.academy-standard-grid .check-list li::before { top: 29px; }
.academy-page .alt-surface > .content-index { margin-bottom: clamp(34px, 4vw, 54px); }

.academy-back-link {
  display: inline-flex;
  margin-bottom: 20px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.55);
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
}
.academy-back-link:hover { border-bottom-color: var(--gold); }
.academy-module-context {
  margin: 0 0 12px;
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.academy-module-context + .eyebrow { margin-top: 0; }

.academy-module-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(54px, 7vw, 90px);
  border: 1px solid var(--navy-a16);
  background: var(--navy-a16);
}
.academy-module-pagination > div { min-width: 0; background: var(--white); }
.academy-pagination-link {
  display: flex;
  min-height: 138px;
  padding: 32px 36px;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  background: var(--white);
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.academy-pagination-link:hover,
.academy-pagination-link:focus-visible {
  position: relative;
  z-index: 1;
  background: var(--sand);
  box-shadow: 0 10px 24px rgba(15,14,46,.09);
  transform: translateY(-2px);
}
.academy-pagination-link:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: -3px;
}
.academy-pagination-link span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color 180ms ease, transform 180ms ease;
}
.academy-pagination-link strong {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.12;
  color: var(--navy);
}
.academy-pagination-next { text-align: right; align-items: flex-end; }
.academy-pagination-link:hover strong,
.academy-pagination-link:focus-visible strong { color: var(--gold-dark); }
.academy-pagination-previous:hover span,
.academy-pagination-previous:focus-visible span { transform: translateX(-4px); }
.academy-pagination-next:hover span,
.academy-pagination-next:focus-visible span { transform: translateX(4px); }

@media (max-width: 760px) {
  .academy-standard-grid h2 { max-width: 14ch; }
  .academy-module-pagination { grid-template-columns: 1fr; }
  .academy-pagination-link { min-height: 112px; padding: 24px; }
  .academy-pagination-next { text-align: left; align-items: flex-start; }
}
.academy-pagination-previous { text-align: left; align-items: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .academy-flip,
  .academy-flip-hint,
  .academy-flip-hint::after { transition: none; }
  .academy-flip:hover,
  .academy-flip:focus-visible { transform: none; }
}
/* Explicit component hooks retained for verifier and future course variants. */
.academy-flip-front { transform: none; }
.academy-flip-guidance { min-width: 0; }
.academy-flip-return { min-width: 0; }

/* ── Academy gateway: audience signpost ─────────────────────────────────────
   The hero's lead paragraph is styled by `.page-hero-copy > p:last-child`.
   Adding a second paragraph would silently move that treatment onto the note
   and strip it from the intro, so both are pinned explicitly here rather than
   left to depend on sibling order. */
.academy-hero .page-hero-copy > p:not(.academy-audience-note) {
  max-width: 680px;
  margin-top: 32px;
  color: rgba(255,255,255,.65);
  font-size: 17px;
  line-height: 1.72;
}
.academy-hero .page-hero-copy > p.academy-audience-note {
  max-width: 680px;
  margin-top: 18px;
  color: rgba(255,255,255,.55);
  font-size: 14px;
  line-height: 1.7;
}
/* White, underlined — not gold. Colour law s.07 forbids gold as a text
   colour, and the release gate enforces it across the Academy block
   regardless of ground, so the link earns its affordance from the underline. */
.academy-hero .page-hero-copy > p.academy-audience-note a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.academy-hero .page-hero-copy > p.academy-audience-note a:hover,
.academy-hero .page-hero-copy > p.academy-audience-note a:focus { text-decoration-thickness: 2px; }