/* @source _src/css/00-tokens.css */
/* ============================================================================
   THE SULLIVANS DIVISION USNSCC - DESIGN TOKENS
   Single source of truth. No component may hard-code a value that lives here.
   Direction (ADR-007): institutional editorial restraint. Photography carries
   the emotion; type and grid carry the credibility.
   Contrast (ADR-008): every foreground/background pair below meets WCAG 2.2 AA.
   ========================================================================= */

:root {
  /* --- Typography -----------------------------------------------------------
     Self-hosted variable faces, no third-party request (better CSP + privacy).
     Display: Newsreader, an optical-size news serif - editorial authority.
     Text:    Public Sans, the U.S. Web Design System typeface - the face of
              federal government sites, which is what a congressionally
              chartered program should read like. */
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --font-text: "Public Sans", "Public Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid type scale, 1.25 minor third at mobile opening to 1.333 at desktop.
     Every step pairs a size with the line-height that belongs to it. */
  --text-2xs: 0.6875rem;   --leading-2xs: 1.45;
  --text-xs: 0.775rem;     --leading-xs: 1.5;
  --text-sm: 0.875rem;     --leading-sm: 1.55;
  --text-base: 1rem;       --leading-base: 1.65;
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   --leading-md: 1.6;
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     --leading-lg: 1.45;
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);           --leading-xl: 1.3;
  --text-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);   --leading-2xl: 1.18;
  --text-3xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem);    --leading-3xl: 1.08;
  --text-4xl: clamp(2.75rem, 1.9rem + 4.2vw, 5rem);       --leading-4xl: 1.02;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.011em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;

  /* Readable measure. Institutional copy stays inside 65-75 characters. */
  --measure: 68ch;
  --measure-narrow: 54ch;
  --measure-wide: 82ch;

  /* --- Color ---------------------------------------------------------------
     Semantic names only. Never reference a raw ramp value in a component. */
  --navy-950: #050f1f;
  --navy-900: #071326;
  --navy-800: #0a1d3a;
  --navy-700: #0c2b5a;
  --navy-600: #124178;
  --blue-500: #1d5cb8;
  --blue-100: #e7f0ff;
  --blue-050: #f2f7ff;

  --red-800: #9c0e26;
  --red-700: #c41230;
  --red-600: #d81c3c;

  --gold-600: #a97f16;
  --gold-500: #d6a938;
  --gold-200: #f4e3b6;

  --gray-900: #12181f;
  --gray-700: #38424f;
  --gray-600: #4c5766;  /* 7.0:1 on --paper. The AA-safe muted text value. */
  --gray-400: #8b95a3;
  --gray-200: #d8dee6;
  --gray-100: #eaeef3;
  --paper: #f6f8fb;
  --white: #ffffff;

  /* Semantic surface + text roles */
  --surface: var(--paper);
  --surface-raised: var(--white);
  --surface-sunken: var(--gray-100);
  --surface-inverse: var(--navy-900);
  --surface-inverse-raised: var(--navy-800);

  --ink: var(--gray-900);           /* 16.1:1 on --paper */
  --ink-secondary: var(--gray-700); /* 9.4:1  on --paper */
  --ink-muted: var(--gray-600);     /* 7.0:1  on --paper - AA at every size */
  --ink-inverse: var(--white);
  --ink-inverse-muted: #c3ccd8;     /* 9.6:1 on --navy-900 */

  --accent: var(--red-700);         /* 7.4:1 on white. Emphasis and CTA only. */
  --accent-hover: var(--red-800);
  --accent-on-dark: #ff6b83;        /* 5.6:1 on --navy-900 */
  --honor: var(--gold-500);         /* Rare. Honors and highlights. */
  --honor-on-light: #8f6a10;        /* 4.96:1 on white. Raw gold is 2.19:1 and fails AA. */

  --line: rgba(10, 29, 58, 0.14);
  --line-strong: rgba(10, 29, 58, 0.28);
  --line-inverse: rgba(255, 255, 255, 0.18);
  /* Legacy aliases. legacy.css still references these; migrate and delete. */
  --blue-700: var(--navy-600);
  --muted: var(--ink-muted);

  --focus-ring: var(--blue-500);
  --focus-ring-inverse: var(--gold-500);

  /* --- Space ---------------------------------------------------------------
     One 4px-based scale. Section rhythm is deliberately varied by choosing
     different steps, never by inventing new values. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --section-y-tight: clamp(2.5rem, 5vw, 4rem);
  --gutter: clamp(1.125rem, 4vw, 3rem);

  /* --- Layout -------------------------------------------------------------- */
  --max: 1180px;
  --max-wide: 1440px;
  --max-text: 46rem;

  /* --- Radius, border, shadow ---------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Ghost button ground. Transparent on light surfaces; the inverted-surface
     block in 02-base.css gives it a translucent white so the button still
     reads over the hero video. */
  --button-ghost-bg: transparent;

  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  --shadow-sm: 0 1px 2px rgba(7, 19, 38, 0.08), 0 2px 6px rgba(7, 19, 38, 0.06);
  --shadow: 0 24px 70px rgba(7, 19, 38, 0.18);
  --shadow-lg: 0 32px 90px rgba(7, 19, 38, 0.24);
  --shadow-header: 0 12px 34px rgba(0, 0, 0, 0.22);

  /* --- Z-index ladder -------------------------------------------------------
     Named, ordered, and total. z-index-by-guess contributed to BUG-001, so a
     raw numeric z-index anywhere in the stylesheet now fails the gate. */
  --z-behind: -2;
  --z-below: -1;
  --z-base: 0;
  --z-raised: 1;
  --z-raised-2: 2;
  --z-sticky: 100;
  --z-announce: 200;
  --z-header: 300;
  --z-nav-drawer: 400;
  --z-float: 500;
  --z-overlay: 700;
  --z-modal: 800;
  --z-drawer: 850;
  --z-toast: 900;
  --z-skip-link: 1000;

  /* --- Motion ---------------------------------------------------------------
     Minimal and functional (design-system.md). Nothing bounces. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 130ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  /* Runtime-controlled. main.js owns this; nothing else may set it. */
  --announcement-offset: 0px;
  --header-height: 84px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration: 0.01ms;
    --duration-slow: 0.01ms;
  }
}


/* @source _src/css/01-fonts.css */
/* ============================================================================
   SELF-HOSTED VARIABLE FONTS (ADR-007)
   Served from our own origin: no third-party request, which keeps the CSP tight
   and sends no visitor data to a font CDN. Both families are SIL Open Font
   License 1.1, which permits self-hosting and redistribution.
   ========================================================================= */

/* Newsreader - display. Variable optical size and weight. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: normal;
  font-display: swap;
  src: url("./assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Public Sans - text and interface. The U.S. Web Design System typeface. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/public-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   METRIC-MATCHED FALLBACKS
   font-display: swap paints a fallback first, then swaps. On a slow connection
   the real face cannot beat first paint no matter how early it is preloaded, so
   the only way to stop the swap moving the page is to make the fallback occupy
   the same space.

   Measured in-browser against the real faces at 100px, same sample string:
     Public Sans vs system-ui   112.03%   <- this was the whole problem
     Public Sans vs Arial       103.49%
     Newsreader  vs Georgia     100.60%

   system-ui being 12% narrower changed how many lines the lede and the button
   row occupied, which moved everything below them. size-adjust corrects the
   width so the line count matches; our line-heights come from tokens, so the
   line box height is already fixed independently of the font's own metrics.
   ========================================================================= */
@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 103.49%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 100.6%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}


/* @source _src/css/02-base.css */
/* ============================================================================
   BASE - element defaults built only from tokens.
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-sm));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-normal);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Focus is always visible and never removed. WCAG 2.2 AA (ADR-008). */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* --- Headline system -------------------------------------------------------
   Display serif, tight tracking, deliberate scale. This is where the site's
   credibility is earned, not in decoration. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 var(--space-md);
}

h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
h2 { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
h3 { font-size: var(--text-lg);  line-height: var(--leading-lg); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--text-md);  line-height: var(--leading-md); letter-spacing: var(--tracking-snug); }

h5, h6 {
  font-family: var(--font-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xs);
}

p {
  margin: 0 0 var(--space-md);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* The eyebrow: small, spaced, uppercase. Used instead of decorative badges. */
.eyebrow {
  font-family: var(--font-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-sm);
}

.lede {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--ink-secondary);
  max-width: var(--measure);
}

/* --- Utilities ------------------------------------------------------------- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-measure { max-width: var(--measure); }
.u-measure-narrow { max-width: var(--measure-narrow); }

.skip-link {
  position: fixed;
  left: var(--space-sm);
  top: var(--space-xs);
  z-index: var(--z-skip-link);
  transform: translateY(-160%);
  background: var(--white);
  color: var(--navy-900);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-weight: var(--weight-semibold);
  transition: transform var(--duration) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Inverted surfaces ------------------------------------------------------
   Dark sections redefine the ink ROLES rather than overriding colour on each
   element inside them. Anything written in terms of var(--ink) is then correct
   on a dark background automatically, including components added later.

   This is the fix for a real regression: .hero set `color: white` and relied on
   h1 inheriting it. An explicit `h1 { color: var(--ink) }` beats inheritance no
   matter how low its specificity, so the hero headline turned near-black on a
   dark video. Redefining the token fixes the whole class of bug at once.

   Custom properties resolve where they are declared, so --muted is redefined
   here too; inheriting the alias alone would carry the light-surface value in. */
.u-on-dark,
.hero,
.announce-bar,
.site-header,
.site-footer,
.join-plate {
  --ink: var(--white);
  --ink-secondary: var(--ink-inverse-muted);
  --ink-muted: var(--ink-inverse-muted);
  --muted: var(--ink-inverse-muted);
  --accent: var(--accent-on-dark);
  --button-ghost-bg: rgba(255, 255, 255, 0.14);
  --line: var(--line-inverse);
  --line-strong: rgba(255, 255, 255, 0.42);
  color: var(--ink);
}

/* Utility spacing + the classes that replaced the last inline style attributes,
   so the CSP can ship without style-src-attr 'unsafe-inline'. */
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.map-embed { border: 0; border-radius: var(--radius); }
.age-badge--nlcc { background: var(--blue-100); color: var(--navy-600); }
.age-badge--nscc { background: rgba(196, 18, 48, 0.08); color: var(--red-700); }


/* @source _src/css/50-legacy.css */
/* ============================================================================
   LEGACY STYLESHEET
   The original hand-written CSS, kept intact and appended after the token,
   font, and base layers so rule order and cascade are unchanged. Rules move
   out of here into real components as pages are rebuilt; nothing new is
   added here.
   ========================================================================= */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-weight: 800;
}

.brand span {
  display: grid;
  line-height: 1.1;
}

.brand small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.primary-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  padding: 0 13px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  font-weight: 750;
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.primary-nav .nav-login {
  margin-left: 6px;
  background: var(--red-700);
  color: var(--white);
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
}

.hero {
  position: relative;
  min-height: 92dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-950);
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media {
  object-fit: cover;
  opacity: 0.9;
  filter: brightness(1.1);
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(7, 19, 38, 0.82) 0%, rgba(7, 19, 38, 0.44) 50%, rgba(7, 19, 38, 0.08) 100%),
    linear-gradient(0deg, rgba(7, 19, 38, 0.72) 0%, rgba(7, 19, 38, 0) 55%),
    linear-gradient(rgba(180, 20, 40, 0.1), rgba(180, 20, 40, 0.1));
}

.hero-content {
  position: relative;
  width: min(var(--max), calc(100% - 36px));
  margin: 0 auto 0 clamp(24px, 6vw, 80px);
  padding: 160px 0 90px;
  max-width: 780px;
}

.hero h1,
.page-hero h1 {
  max-width: 840px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 5.8vw, 5.8rem);
  line-height: 0.95;
  letter-spacing: 0;
  white-space: nowrap;
}

.page-hero h1 {
  max-width: 680px;
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  line-height: 1.02;
}

.hero-copy {
  max-width: 670px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.05rem, 2vw, 1.24rem);
}

.hero-subtitle {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 3vw, 2.45rem);
  font-style: italic;
}

.hero-actions,
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions {
  margin-top: 34px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  padding: 0 18px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}

.button.primary {
  background: var(--red-700);
  color: var(--white);
  box-shadow: 0 14px 28px rgba(196, 18, 48, 0.28);
}

/* Token-driven so it is correct on BOTH surfaces. It used to hardcode white
   text on translucent white, which meant every light-background page needed its
   own override; three of those had accumulated and a fourth was about to. */
.button.secondary {
  background: var(--button-ghost-bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.button.secondary:hover,
.button.secondary:focus-visible {
  border-color: var(--ink);
}

.action-dock {
  width: min(1180px, calc(100% - 36px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 4px auto 0;
  position: relative;
  z-index: var(--z-raised);
}

.action-button,
.mission-panel{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(7, 19, 38, 0.08);
}

.action-button {
  position: relative;
  min-height: clamp(170px, 18vw, 250px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  transform: translateY(0);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.action-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background:
    linear-gradient(135deg, rgba(7, 19, 38, 0.82), rgba(196, 18, 48, 0.42));
}

.action-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-behind);
  transition: transform 420ms ease;
}

.action-button span {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(7, 19, 38, 0.34);
  padding: 0 26px;
  color: var(--white);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 950;
}

.action-button:hover,
.action-button:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 24px 58px rgba(7, 19, 38, 0.18);
}

.action-button:hover .action-img,
.action-button:focus-visible .action-img {
  transform: scale(1.08);
}
.panel-label{
  display: block;
  color: var(--red-700);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section {
  width: min(var(--max), calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(72px, 9vw, 116px) 0;
}

.intro-section {
  padding-top: clamp(42px, 5vw, 66px);
  padding-bottom: clamp(34px, 5vw, 56px);
}

.intro-top {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.intro-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.intro-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.section-heading {
  max-width: 730px;
}

h2 {
  margin: 0;
  color: var(--navy-950);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.04;
}

h3 {
  margin: 0 0 10px;
  color: var(--navy-900);
  font-size: 1.08rem;
  line-height: 1.25;
}

p {
  color: var(--muted);
}

.intro-grid,
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.intro-copy p:first-child {
  margin-top: 0;
  color: var(--navy-900);
  font-size: 1.15rem;
}

.mission-panel {
  padding: 28px;
  border-top: 5px solid var(--red-700);
}

.mission-panel ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.mission-panel li {
  position: relative;
  padding-left: 24px;
  color: var(--navy-900);
  font-weight: 750;
}

.mission-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 3px;
  background: var(--red-700);
}

.media-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: min(1440px, calc(100% - 36px));
  margin: 14px auto 0;
}

.media-band figure {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-900);
}

.media-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.media-band figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  border-radius: var(--radius);
  background: rgba(7, 19, 38, 0.76);
  color: var(--white);
  padding: 12px 14px;
}

.media-band figcaption span {
  display: block;
  color: var(--gold-500);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.media-band figcaption strong {
  display: block;
  margin-top: 4px;
  color: var(--white);
  font-size: 0.98rem;
  line-height: 1.25;
}

.media-band figure:hover img,
.media-band figure:focus-within img {
  transform: scale(1.05);
}

.recruit-section {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(26px, 5vw, 60px);
  align-items: start;
}

.recruit-grid {
  display: grid;
  gap: 14px;
}

.recruit-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  grid-template-areas:
    "num title action"
    "num text action";
  column-gap: 18px;
  row-gap: 6px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 18px 46px rgba(7, 19, 38, 0.08);
}

.recruit-card span {
  grid-area: num;
  color: var(--red-700);
  font-weight: 950;
}

.recruit-card h3 {
  grid-area: title;
  margin: 0;
}

.recruit-card p {
  grid-area: text;
  margin: 0;
}

.recruit-card a {
  grid-area: action;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  background: var(--navy-900);
  color: var(--white);
  padding: 0 14px;
  font-weight: 900;
  white-space: nowrap;
}

.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding: clamp(34px, 5vw, 54px);
  border-radius: var(--radius);
  background: var(--navy-900);
}

.callout h2,
.callout p {
  color: var(--white);
}

.callout p {
  max-width: 740px;
  color: rgba(255, 255, 255, 0.78);
}

.join-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
  align-items: center;
}

.join-callout .button {
  min-height: 64px;
  width: min(100%, 280px);
  justify-self: center;
  font-size: 1.08rem;
}

.command-card span,
.blueprint article span {
  color: var(--red-700);
  font-weight: 950;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.leadership-hero {
  width: min(var(--max), calc(100% - 36px));
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(360px, 1.18fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
  margin: 0 auto;
  padding: 150px 0 60px;
}

.leadership-copy {
  border-left: 8px solid var(--red-700);
  padding-left: clamp(20px, 3vw, 34px);
}

.leadership-copy h1 {
  margin: 0;
  color: var(--navy-950);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 5vw, 4.7rem);
  line-height: 1.02;
}

.leadership-copy p {
  max-width: 580px;
  font-size: 1.06rem;
}

.leadership-hero figure {
  margin: 0;
}

.leadership-hero img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.leadership-hero figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 750;
}

.command-board {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 14px;
  padding-top: 0;
}

.command-card {
  min-height: 220px;
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(7, 19, 38, 0.08);
}

.primary-command {
  grid-row: span 2;
  background: var(--navy-900);
}

.primary-command h2,
.primary-command p {
  color: var(--white);
}

.primary-command p {
  color: rgba(255, 255, 255, 0.72);
}

.roadmap-page .site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.roadmap-hero {
  width: min(980px, calc(100% - 36px));
  margin: 0 auto;
  padding: 154px 0 52px;
  text-align: center;
}

.roadmap-hero h1 {
  margin: 0;
  color: var(--white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 6vw, 5.4rem);
  line-height: 0.98;
}

.roadmap-hero p {
  max-width: 720px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.1rem;
}

.blueprint {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding-top: 30px;
}

.blueprint-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 68px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.blueprint article {
  position: relative;
  min-height: 300px;
  padding: 30px 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}

.blueprint article::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red-600);
  box-shadow: 0 0 0 8px rgba(224, 27, 60, 0.18);
}

.blueprint h3 {
  margin-top: 26px;
  color: var(--white);
}

.blueprint p {
  color: rgba(255, 255, 255, 0.72);
}

.cart-preview .button {
  width: 100%;
  margin-top: 8px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 34px clamp(18px, 4vw, 48px);
  background: var(--navy-950);
  color: var(--white);
}

.site-footer p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.66);
}

.site-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 750;
}

.page-hero {
  width: min(var(--max), calc(100% - 36px));
  min-height: auto;
  margin: 0 auto;
  padding: 150px 0 64px;
}

.page-hero p {
  max-width: 690px;
  font-size: 1.05rem;
}

.page-hero img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ── Announcement Banner ── */
/* ── Nav CTA ── */
.nav-cta {
  margin-left: 4px;
  background: var(--gold-500) !important;
  color: var(--navy-950) !important;
  font-weight: 900;
  border-radius: var(--radius);
}

/* ── Hero Video ── */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  filter: brightness(1.12) saturate(1.05);
}

.hero-fallback {
  display: none;
}

/* No src means the video was never worth its bytes here (see main.js), or it
   failed to load. Either way the hero still needs a background, so hide the
   video element and let the poster image behind it show through. */
.hero-video:not([src]),
.hero-video[src=""] {
  display: none;
}

.hero:has(.hero-video:not([src])) .hero-fallback,
.hero:has(.hero-video[src=""]) .hero-fallback {
  display: block;
}

/* ── Stats Bar ── */
.stats-bar {
  background: var(--navy-900);
  padding: 0;
}

.stats-bar-inner {
  width: min(var(--max), calc(100% - 36px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 28px 0;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 0 24px;
}

.stat-item strong {
  display: block;
  color: var(--white);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  line-height: 1;
}

.stat-item span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,0.6);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stat-divider {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* ── Age Split Section ── */
.age-split-section {
  background: var(--paper);
}

.age-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}

.age-card {
  padding: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 18px 46px rgba(7,19,38,0.08);
  position: relative;
}

.nlcc-card {
  border-top: 5px solid var(--blue-700);
}

.sea-card {
  border-top: 5px solid var(--red-700);
}

.age-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.nlcc-card .age-badge {
  background: var(--blue-100);
  color: var(--blue-700);
}

.sea-card .age-badge {
  background: rgba(196,18,48,0.08);
  color: var(--red-700);
}

.age-card h3 {
  font-size: 1.45rem;
  color: var(--navy-950);
  margin: 0 0 4px;
}

.age-abbr {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.age-card > p:not(.age-abbr) {
  color: var(--muted);
  margin-bottom: 18px;
}

.age-card ul {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.age-card li {
  padding-left: 22px;
  position: relative;
  color: var(--navy-900);
  font-weight: 700;
  font-size: 0.95rem;
}

.age-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 10px;
  height: 2px;
  background: var(--red-700);
}

.nlcc-card li::before { background: var(--blue-700); }

/* ── Where We Meet ── */
.where-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: 36px;
}

.where-info {
  display: grid;
  gap: 14px;
}

.where-card {
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(7,19,38,0.08);
}

.where-card span {
  display: block;
  color: var(--red-700);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.where-card strong {
  display: block;
  color: var(--navy-900);
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

.where-card a {
  color: var(--blue-700);
  font-weight: 850;
  font-size: 0.9rem;
}

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(7,19,38,0.12);
}

/* ── Footer Upgrade ── */
.site-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "brand nav social"
    "copy copy copy";
  gap: 20px 40px;
  padding: 40px clamp(18px, 4vw, 48px) 28px;
  background: var(--navy-950);
  color: var(--white);
}

.footer-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  object-fit: contain;
  flex-shrink: 0;
}

.footer-brand strong {
  display: block;
  color: var(--white);
  font-size: 0.95rem;
}

.footer-brand p {
  margin: 3px 0 0;
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
}

.footer-social {
  grid-area: social;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.footer-social a {
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  transition: background 160ms ease, color 160ms ease;
}

.footer-social a:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
}

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .hero-video {
    display: none;
  }

  .hero-fallback {
    display: block;
  }

  .hero {
    background:
      linear-gradient(rgba(7, 19, 38, 0.6), rgba(7, 19, 38, 0.6)),
      url("./assets/images/cadets-aboard-ship.webp") center / cover;
  }}

@media (max-width: 1279px) {
  .nav-toggle {
    display: block;
  }

  .primary-nav {
    position: absolute;
    left: 18px;
    right: 18px;
    top: calc(100% + 8px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius);
    background: rgba(7, 19, 38, 0.98);
  }

  .primary-nav.is-open {
    display: flex;
  }

  .primary-nav a,
  .primary-nav .nav-login {
    margin: 0;
    justify-content: center;
  }}

@media (max-width: 940px) {
  .age-split-grid { grid-template-columns: 1fr; }
  .where-grid { grid-template-columns: 1fr; }
  .stats-bar-inner { flex-wrap: wrap; gap: 20px; }
  .stat-divider { display: none; }
  .stat-item { flex: 0 0 calc(50% - 20px); }
  .intro-top { grid-template-columns: 1fr; }
  .site-footer {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "nav social"
      "copy copy";
  }

  .action-dock,
  .intro-grid,
  .recruit-section,
  .page-hero,
  .leadership-hero{
    grid-template-columns: 1fr;
  }

  .media-band,
  .command-board,
  .blueprint {
    grid-template-columns: 1fr 1fr;
  }

  .primary-command{
    grid-column: auto;
    grid-row: auto;
  }

  .blueprint-line {
    display: none;
  }

  .callout,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .join-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.58fr);
    align-items: center;
  }}

/* ── Gold Button ── */
.button.gold {
  background: var(--gold-500);
  color: var(--navy-950);
  box-shadow: 0 14px 28px rgba(214, 169, 56, 0.28);
}
.button.gold:hover,
.button.gold:focus-visible {
  background: #bf9520;
}

/* ── Nav Social Icons ── */
.nav-social {
  display: flex;
  align-items: center;
  gap: 1px;
  margin: 0 4px;
  padding: 0 8px;
  border-left: 1px solid rgba(255,255,255,0.16);
  border-right: 1px solid rgba(255,255,255,0.16);
}
.nav-social a {
  width: 32px;
  height: 32px;
  min-height: unset;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(255,255,255,0.68);
}
.nav-social a:hover,
.nav-social a:focus-visible {
  background: rgba(255,255,255,0.12);
  color: var(--white);
}
.nav-social svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Footer Redesign ── */
.site-footer {
  display: block;
  background: var(--navy-950);
  color: var(--white);
  padding: 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 44px;
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: 56px 0 40px;
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  grid-column: auto;
}

.footer-brand img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-brand-text strong {
  display: block;
  color: var(--white);
  font-size: 1rem;
  line-height: 1.2;
}

.footer-brand-text p {
  margin: 5px 0 0;
  color: rgba(255,255,255,0.5);
  font-size: 0.82rem;
  line-height: 1.55;
}

.footer-col-title {
  display: block;
  margin: 0 0 14px;
  color: rgba(255,255,255,0.9);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-col-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-col-nav a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 2px 0;
  transition: color 160ms ease;
}

.footer-col-nav a:hover { color: var(--white); }

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: 18px 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ── Chart Your Course Section ── */
.chart-section {
  background: var(--navy-900);
  padding: clamp(60px, 8vw, 100px) 0;
}

.chart-inner {
  width: min(var(--max), calc(100% - 36px));
  margin: 0 auto;
}

.chart-section .eyebrow { color: var(--gold-500); }

.chart-section h2 {
  color: var(--white);
  margin: 0 0 42px;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.chart-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
}

.chart-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.chart-card-body {
  padding: 22px 24px 18px;
  flex: 1;
}

.chart-card-body h3 {
  font-size: 1.18rem;
  color: var(--navy-950);
  margin: 0 0 8px;
}

.chart-card-body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.chart-card-cta {
  display: block;
  min-height: 48px;
  margin: 0 24px 24px;
  border-radius: var(--radius);
  background: var(--gold-500);
  color: var(--navy-950);
  font-weight: 900;
  font-size: 0.95rem;
  text-align: center;
  line-height: 48px;
  transition: background 160ms ease, transform 160ms ease;
}

.chart-card-cta:hover {
  background: #bf9520;
  transform: translateY(-1px);
}

/* ── Responsive: New Sections ── */
@media (max-width: 940px) {
  .chart-grid{ grid-template-columns: 1fr 1fr; }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }}

@media (max-width: 640px) {
  .age-card { padding: 24px; }
  .where-grid { grid-template-columns: 1fr; }
  .site-footer {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "nav" "social" "copy";
  }
  .footer-social { flex-direction: row; align-items: flex-start; }

  .site-header {
    padding: 12px 16px;
  }

  .brand small {
    display: none;
  }

  .hero {
    min-height: 88dvh;
  }

  .hero-content {
    width: min(100% - 28px, var(--max));
    padding-bottom: 70px;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(1.6rem, 9vw, 3.7rem);
    white-space: normal;
  }

  .page-hero h1 {
    font-size: clamp(2.1rem, 12vw, 3.25rem);
  }

  .action-dock {
    grid-template-columns: 1fr;
  }

  .section,
  .page-hero {
    width: min(100% - 28px, var(--max));
  }

  .media-band,
  .command-board,
  .blueprint {
    width: min(100% - 28px, var(--max));
    grid-template-columns: 1fr;
  }

  .leadership-hero,
  .roadmap-hero{
    width: min(100% - 28px, var(--max));
    padding-top: 128px;
  }

  .roadmap-hero h1 {
    font-size: clamp(2.15rem, 12vw, 3.35rem);
  }

  .leadership-copy h1 {
    font-size: clamp(2.05rem, 11vw, 3.2rem);
  }

  .media-band figure {
    aspect-ratio: 4 / 3;
  }

  .recruit-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "title"
      "text"
      "action";
  }

  .recruit-card a {
    justify-content: center;
  }

  .join-callout {
    grid-template-columns: 1fr;
  }

  .page-hero {
    padding-top: 120px;
  }

  .chart-grid{ grid-template-columns: 1fr; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 0 28px;
  }
  .footer-brand { grid-column: auto !important; }
  .footer-social { flex-direction: column; }
  .nav-social { display: none; }}
.rh-hero .eyebrow { color: var(--gold-500); }
.rh-connect .eyebrow { color: var(--gold-500); }

/* ===== DEFINITIVE OVERRIDES ===== */

/* Logo nav */
/* Logo footer */
.footer-brand img {
  width: 130px !important;
  height: 130px !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}
.footer-brand {
  grid-area: auto !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

/* Footer column titles */
.footer-col-title {
  color: #c6a22c !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
  border-bottom: none !important;
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
  text-decoration-color: #c6a22c !important;
  display: block !important;
}

/* Footer social — plain text links, no icons */
.footer-social {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.footer-social a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: block !important;
  padding: 2px 0 !important;
  width: auto !important;
}
.footer-social a:hover { color: #fff !important; text-decoration: underline !important; }

/* Footer grid */
.footer-inner {
  grid-template-columns: 1.5fr 0.9fr 0.9fr 1.1fr !important;
}

/* Nav social icons */
.nav-social {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.nav-social a {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: rgba(255,255,255,0.8) !important;
  text-decoration: none !important;
  transition: color 160ms ease !important;
}
.nav-social a:hover { color: #fff !important; }
.nav-social svg { width: 20px !important; height: 20px !important; display: block !important; }

/* Sticky join */

@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr !important; }}

/* ===== STORE V2: Product cards, modal{
  display: flex !important;
  flex-direction: column !important;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

/* Image wrap — bigger, white{
  position: relative;
  background: #ffffff;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}
/* ── Product Modal ──────────────────────────────── */
#product-modal[hidden] { display: none !important; }
#modal-img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
}
#modal-img-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  margin-top: 8px;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }}

#cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#cart-total { font-size: 1.3rem; color: #0a1f4e; }

/* ── Toast ──────────────────────────────────────── */
/* ================================================================
   STORE V3 — bigger images, lower text, envelopes, detail overlay,
   cart page + checkout page
   ================================================================ */

/* ── Product cards: image fills the box{
  height: 320px !important;
  padding: 12px !important;
}

/* ── Envelopes (dues): front-facing{ overflow: hidden; background: #fff; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; flex: 1; min-width: 160px; }
.field span { font-size: 0.82rem; font-weight: 700; color: #3a4150; }
.field input,
.field textarea {
  border: 1px solid #cfd5df;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #0a0f1e;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: #0a1f4e;
  box-shadow: 0 0 0 3px rgba(10,31,78,0.12);
}

/* ── Responsive: cart + checkout ── */
@media (max-width: 560px) {
  .field-row { flex-direction: column; gap: 0; }}

/* ================================================================
   FINAL — Logo (no white, bigger, crisp) + Footer layout
   Appended last so it wins the cascade.
   ================================================================ */

/* Nav logo: transparent patch (white background removed), shown in full */
/* Footer brand block: logo middle-left, much bigger, text beside it */
.footer-inner {
  grid-template-columns: 2.4fr 1fr 1fr 1.2fr !important;
  align-items: start !important;
}
.footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  grid-column: auto !important;
}
.footer-brand img {
  width: 152px !important;
  height: 152px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  clip-path: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.footer-brand-text strong { font-size: 1.18rem !important; }

/* Footer column titles: gold, bold, underlined, pushed right group */
.footer-col-title {
  color: #d6a938 !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-decoration-color: #d6a938 !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 2px !important;
  margin: 0 0 16px !important;
  border-bottom: none !important;
  display: block !important;
}

/* Footer social: icon + name text links (kill old circular icon styling) */
.footer-social { align-items: flex-start !important; }
.footer-social a {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  color: rgba(255,255,255,0.72) !important;
  padding: 3px 0 !important;
}
.footer-social a svg {
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.footer-social a:hover {
  background: transparent !important;
  color: #fff !important;
}
.footer-social a:hover span { text-decoration: underline; }

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1.6fr 1fr 1fr !important; }
  .footer-brand { grid-column: 1 / -1 !important; margin-bottom: 8px; }}
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .footer-brand { grid-column: 1 / -1 !important; }
  .footer-brand img { width: 120px !important; height: 120px !important; }}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr !important; }}

/* ================================================================
   Resource Hub — closing CTA band (replaces two stacked CTAs)
   ================================================================ */
.rh-closing {
  background: var(--navy-900, #0a1830);
  margin: 0;
  padding: clamp(56px, 8vw, 88px) 24px;
}
.rh-closing-inner {
  width: min(760px, 100%);
  margin: 0 auto;
  text-align: center;
}
.rh-closing .eyebrow { color: var(--gold-500, #d6a938); }
.rh-closing h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 10px 0 16px;
  line-height: 1.15;
}
.rh-closing p {
  color: rgba(255,255,255,0.72);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 auto 30px;
  max-width: 600px;
}
.rh-closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ================================================================
   Contact page (rebuilt)
   ================================================================ */
.contact-hero2 {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(120px, 14vw, 150px) 0 clamp(28px, 4vw, 44px);
  text-align: center;
}
.contact-hero2 .eyebrow { color: var(--red-700, #c41230); }
.contact-hero2 h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.08;
  margin: 12px auto 16px;
  max-width: 18ch;
  color: var(--navy-950, #071326);
}
.contact-hero2 > p {
  font-size: 1.08rem;
  line-height: 1.6;
  color: #4a5160;
  max-width: 60ch;
  margin: 0 auto;
}
.contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy-950, #071326);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(10,20,40,0.05);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.contact-chip:hover { transform: translateY(-2px); border-color: var(--gold-500, #d6a938); box-shadow: 0 6px 18px rgba(10,20,40,0.1); }
.contact-chip svg { width: 17px; height: 17px; color: var(--red-700, #c41230); }

.contact-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: start;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) 0;
}
.contact-form-card {
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: 18px;
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 10px 40px rgba(10,20,40,0.06);
}
.contact-form-card h2 {
  font-size: 1.5rem;
  color: var(--navy-950, #071326);
  margin: 0 0 6px;
}
.contact-form-card > p.form-sub {
  color: #6a7280;
  font-size: 0.95rem;
  margin: 0 0 24px;
}
.contact-form .field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.contact-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; flex: 1; min-width: 0; }
.contact-form label > span { font-size: 0.82rem; font-weight: 700; color: #3a4150; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid #cfd5df;
  border-radius: 9px;
  padding: 12px 13px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #0a0f1e;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--navy-700, #0a1f4e);
  box-shadow: 0 0 0 3px rgba(10,31,78,0.12);
}
.contact-form .send-btn {
  width: 100%;
  margin-top: 6px;
  background: var(--red-700, #c41230);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease;
}
.contact-form .send-btn:hover { background: #a50f28; }
.contact-form .form-note { font-size: 0.78rem; color: var(--ink-muted); text-align: center; margin: 12px 0 0; }
.contact-msg {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: #e8f3ec;
  border: 1px solid #b9dcc6;
  border-radius: 10px;
  color: #1f6b3a;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
}
.contact-aside { display: flex; flex-direction: column; gap: 16px; }
.info-card {
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 6px 24px rgba(10,20,40,0.05);
}
.info-card .info-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.info-card .info-ico {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(196,18,48,0.08);
  color: var(--red-700, #c41230);
}
.info-card .info-ico svg { width: 19px; height: 19px; }
.info-card h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6a7280; margin: 0; font-weight: 800; }
.info-card strong { display: block; font-size: 1rem; color: var(--navy-950, #071326); line-height: 1.4; margin-bottom: 8px; }
.info-card a.info-link { color: var(--navy-700, #0a1f4e); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.info-card a.info-link:hover { text-decoration: underline; }
.info-card p { margin: 0; color: #4a5160; font-size: 0.92rem; line-height: 1.55; }
.info-social { display: flex; gap: 10px; flex-wrap: wrap; }
.info-social a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid #e3e7ee;
  color: var(--navy-700, #0a1f4e);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.info-social a:hover { background: var(--navy-950, #071326); color: #fff; border-color: var(--navy-950, #071326); }
.info-social svg { width: 18px; height: 18px; }

.contact-map { width: min(1180px, calc(100% - 36px)); margin: 8px auto 0; }
.contact-map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: 16px;
  display: block;
  box-shadow: 0 8px 30px rgba(10,20,40,0.08);
}

.contact-reasons2 {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) 0 clamp(20px, 3vw, 32px);
}
.contact-reasons2 .section-heading { text-align: center; margin: 0 auto 30px; }
.contact-reasons2 .section-heading .eyebrow { color: var(--red-700, #c41230); }
.contact-reasons2 .section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy-950, #071326); margin: 8px 0 0; }
.reasons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.reason-card {
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: 14px;
  padding: 24px 22px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.reason-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10,20,40,0.08); }
.reason-card span { display: block; font-size: 0.8rem; font-weight: 900; color: var(--honor-on-light); margin-bottom: 8px; letter-spacing: 0.04em; }
.reason-card h3 { font-size: 1.08rem; color: var(--navy-950, #071326); margin: 0 0 8px; }
.reason-card p { font-size: 0.9rem; color: #5a616e; line-height: 1.55; margin: 0; }

.contact-faq {
  width: min(820px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(36px, 5vw, 60px) 0 clamp(48px, 6vw, 80px);
}
.contact-faq .section-heading { text-align: center; margin-bottom: 26px; }
.contact-faq .section-heading .eyebrow { color: var(--red-700, #c41230); }
.contact-faq .section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy-950, #071326); margin: 8px 0 0; }
.faq-item {
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-950, #071326);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--red-700, #c41230);
  transition: transform 200ms ease;
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 22px 20px; color: #4a5160; font-size: 0.95rem; line-height: 1.65; }

@media (max-width: 900px) {
  .contact-main { grid-template-columns: 1fr; }
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 540px) {
  .reasons-grid { grid-template-columns: 1fr; }
  .contact-form .field-row { flex-direction: column; gap: 0; }}

/* ================================================================
   Store — category color dots, all-blue buttons{ display: flex !important; align-items: center; }

/* Category dot on each product card (color set inline by store.js) */
.cat-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* All "Add to Cart" buttons blue — grid + modal{ background: #0a1f4e !important; color: #fff !important; }

/* Hover hint text — white{ color: #fff !important; }

/* Cart preview sub-line */
#hero-cart-sub {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  margin: 4px 0 0;
}

/* ── Sponsors page ── */
.sponsor-intro {
  max-width: 760px;
}

.sponsors-page .page-hero h1 {
  white-space: normal;
  text-wrap: balance;
  font-size: clamp(2rem, 3.6vw, 3.3rem);
  line-height: 1.05;
}

.sponsors-page .page-hero .hero-actions {
  margin-top: 28px;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
}

.sponsor-card {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(7, 19, 38, 0.08);
}

.sponsor-card .sponsor-icon {
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 12px;
}

.sponsor-card h3 {
  color: var(--navy-950);
  font-size: 1.12rem;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
  align-items: stretch;
}

.tier-card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold-500);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(7, 19, 38, 0.08);
}

.tier-card.tier-feature {
  background: var(--navy-900);
  border-top-color: var(--red-600);
}

.tier-card.tier-feature h3,
.tier-card.tier-feature li {
  color: var(--white);
}

.tier-card.tier-feature li {
  opacity: 0.86;
}

.tier-card h3 {
  color: var(--navy-950);
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.tier-card .tier-tag {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-600);
}

.tier-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.tier-card li {
  color: var(--muted);
  font-size: 0.95rem;
}

.sponsor-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
}

.sponsor-logo {
  display: grid;
  place-items: center;
  min-height: 104px;
  padding: 16px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.sponsor-cta {
  width: min(var(--max), calc(100% - 36px));
  margin: 0 auto clamp(72px, 9vw, 116px);
  padding: clamp(36px, 5vw, 60px);
  background: var(--navy-950);
  border-radius: var(--radius);
  text-align: center;
  color: var(--white);
}

.sponsor-cta h2 {
  color: var(--white);
}

.sponsor-cta p {
  max-width: 620px;
  margin: 12px auto 24px;
  color: rgba(255, 255, 255, 0.76);
}

@media (max-width: 820px) {
  .sponsor-grid,
  .tier-grid {
    grid-template-columns: 1fr;
  }}
/* Turnstile mount. The widget sizes itself; this only reserves room so it does
   not shove the submit button down when it renders. */
.turnstile-mount {
  min-height: 65px;
  margin-block: var(--space-sm);
}


/* @source _src/css/60-header.css */
/* ============================================================================
   HEADER STACK - announcement bar, masthead, primary navigation, sticky CTA.
   Rebuilt from tokens. Supersedes the legacy rules for these components; the
   originals were deleted rather than left to drift.
   ========================================================================= */

/* --- Announcement bar ------------------------------------------------------
   Scrolls away with the document on purpose. It is drill-date specific and
   dismissible, so pinning it would cost 43px of every mobile viewport
   permanently. The header reclaims that space instead (see BUG-001). */
.announce-bar {
  position: relative;
  z-index: var(--z-announce);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) calc(var(--gutter) + var(--space-lg));
  background: var(--red-800);
  color: var(--white);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  text-align: center;
}

.announce-bar[hidden] { display: none; }

.announce-text {
  margin: 0;
  max-width: none;
  color: var(--white);
  font-weight: var(--weight-medium);
}

.announce-link {
  color: var(--white);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

.announce-link:hover { text-decoration-thickness: 2px; }

.announce-close {
  position: absolute;
  right: var(--space-2xs);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;               /* 44x44 minimum tap target */
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--white);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.announce-close svg { width: 14px; height: 14px; }
.announce-close:hover { opacity: 1; }

/* --- Masthead --------------------------------------------------------------
   BUG-001: `top` is driven per frame by main.js, which sets
   --announcement-offset to max(0, barHeight - scrollY). At rest the header sits
   below the bar; once the bar has scrolled away the header is flush at 0 and
   there is no strip of exposed page above it. */
.site-header {
  position: fixed;
  top: var(--announcement-offset, 0px);
  right: 0;
  left: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) var(--gutter);
  color: var(--ink-inverse);
  background: var(--navy-900);
  box-shadow: var(--shadow-header);
  transition:
    background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

/* The homepage header floats over the hero video until the page is scrolled. */
.site-header.home-header {
  background: transparent;
  box-shadow: none;
}

.site-header.is-scrolled,
.site-header.home-header.is-scrolled,
.site-header:has(.primary-nav.is-open) {
  background: var(--navy-900);
  box-shadow: var(--shadow-header);
}

/* --- Sticky Join pill ------------------------------------------------------
   BUG-002: previously fixed to the lower left with no gutter, so it covered the
   intro paragraph. It now sits in the bottom-right safe area and stays hidden
   until the in-page call to action has scrolled out of view, so the two never
   compete and it can never sit on top of copy the reader is mid-sentence in. */
.sticky-join {
  position: fixed;
  right: max(var(--space-md), env(safe-area-inset-right));
  bottom: max(var(--space-md), env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
  background: var(--red-700);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  box-shadow: var(--shadow-lg);
  transition:
    opacity var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.sticky-join.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-join:hover { background: var(--accent-hover); }

/* Hidden-until-scrolled only where scripting can reveal it again. With JS
   unavailable the pill simply stays visible rather than becoming unreachable. */
@media (scripting: enabled) {
  .sticky-join {
    opacity: 0;
    transform: translateY(0.75rem);
    pointer-events: none;
  }

  .sticky-join.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* The pill matters most on a phone: recruiting traffic arrives from a flyer QR
   code or a social post. The legacy sheet hid it below 640px to work around
   BUG-002; with the overlap fixed it belongs there more than anywhere. */
@media (max-width: 640px) {
  .sticky-join {
    right: max(var(--space-sm), env(safe-area-inset-right));
    bottom: max(var(--space-sm), env(safe-area-inset-bottom));
    padding: var(--space-xs) var(--space-sm);
  }
}

/* The bar wraps rather than stacking into a column: forcing a column made it
   97px tall on a phone, a tenth of the viewport, before a word was read. */
.announce-bar {
  flex-wrap: wrap;
  row-gap: var(--space-3xs);
}

@media (max-width: 560px) {
  .announce-bar {
    padding-inline: var(--space-sm) 52px;
    font-size: var(--text-xs);
    text-align: left;
    justify-content: flex-start;
  }
}

/* --- Brand mark -------------------------------------------------------------
   One rule. The legacy sheet had five, escalating 58 -> 48 -> 110 -> 60 -> 116
   -> 76px with !important as each tried to beat the last, which is why the
   masthead was 140px tall at tablet width. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
}

.brand img {
  width: clamp(44px, 6vw, 56px);
  height: clamp(44px, 6vw, 56px);
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  flex: none;
}

.brand span { display: grid; line-height: 1.15; }

.brand strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}

.brand small {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-inverse-muted);
}


/* @source _src/css/61-join.css */
/* ============================================================================
   JOIN PAGE
   Mode: persuade. The reader is a parent deciding whether to trust this program
   with their child, usually on a phone, arriving from a flyer QR code.
   Every section answers one question and hands off to one action.
   ========================================================================= */

.page-join main { padding-top: var(--header-height); }

/* --- Hero -------------------------------------------------------------------
   Asymmetric: the photograph carries the emotion, the type carries the promise.
   Never a centred headline over a gradient. */
.join-hero {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: var(--space-xl) var(--gutter) var(--section-y-tight);
}

.join-hero-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-900);
}

.join-hero-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 74%;
}

.join-hero-body h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  max-width: 15ch;
  margin-bottom: var(--space-md);
}

.join-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

@media (min-width: 900px) {
  .join-hero {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-3xl);
    padding-block: var(--space-xl) var(--section-y);
  }
  .join-hero-media { order: 2; }
  .join-hero-media img { aspect-ratio: 5 / 6; }
}

/* --- The four answers -------------------------------------------------------
   A definition list, not a card grid. Hairlines separate the questions; the
   question is the heading and the answer is real prose a parent can act on. */
.join-answers {
  padding: var(--section-y) var(--gutter);
  background: var(--surface-raised);
  border-block: var(--border);
}

.join-answers-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.join-answers h2 {
  max-width: var(--measure-narrow);
  margin-bottom: var(--space-xl);
}

.answer-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.answer {
  display: grid;
  gap: var(--space-2xs) var(--space-2xl);
  padding-block: var(--space-lg);
  border-top: var(--border);
}

.answer:last-child { border-bottom: var(--border); }

.answer dt {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  text-wrap: balance;
}

.answer dd {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-secondary);
}

.answer dd strong {
  color: var(--ink);
  font-weight: var(--weight-bold);
}

/* Multi-paragraph answers: the cost answer states real figures, which needs more
   than one sentence. Spacing comes from the paragraph, not a wrapper. */
.answer dd > p { margin: 0; }
.answer dd > p + p { margin-block-start: var(--space-sm); }

.answer-aside {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

@media (min-width: 860px) {
  .answer { grid-template-columns: minmax(16rem, 22rem) 1fr; }
}

/* --- Full-bleed plate -------------------------------------------------------
   One photograph at scale, with a caption that says what is happening. This is
   the section that answers "what does my child actually do" without adjectives. */
.join-plate {
  display: grid;
  gap: 0;
  margin: 0;
  background: var(--surface-inverse);
  color: var(--ink-inverse);
}

.join-plate img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.join-plate figcaption {
  display: grid;
  align-content: center;
  padding: var(--section-y-tight) var(--gutter);
}

.join-plate figcaption p {
  max-width: var(--measure-narrow);
  margin: 0;
  color: var(--ink-inverse-muted);
  font-size: var(--text-md);
  line-height: var(--leading-md);
}

@media (min-width: 900px) {
  .join-plate { grid-template-columns: 1.4fr 1fr; }
  .join-plate img { aspect-ratio: auto; min-height: 26rem; }
  .join-plate figcaption { padding-inline: var(--space-2xl); }
}

/* --- Enrollment steps -------------------------------------------------------
   Numbered because the order genuinely matters: step two is where a prospect is
   lost to another division, so it is the loudest thing on the page. */
.join-steps {
  padding: var(--section-y) var(--gutter);
}

.join-steps-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.join-steps h2 {
  max-width: 24ch;
}

.step-list {
  counter-reset: step;
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--border);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 3;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  line-height: 1.15;
}

.step h3 { margin: 0; }
.step p { margin: 0; color: var(--ink-secondary); max-width: var(--measure); }
.step p + p { margin-top: var(--space-xs); }

/* Step two decides whether the inquiry reaches this division at all. */
.step--critical { border-top-color: var(--accent); }
.step--critical::before { color: var(--accent); }

.step-callout {
  justify-self: start;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--blue-050);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-md);
  color: var(--ink) !important;
}

.step-callout strong { font-weight: var(--weight-bold); }

.step-action {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--border);
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
}

.step-action-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.step-action-note strong { color: var(--ink); font-weight: var(--weight-semibold); }

/* --- Secondary path ---------------------------------------------------------
   For the parent who is interested but not ready. Quiet on purpose: it must not
   compete with enrollment. */
.join-ask {
  padding: var(--section-y) var(--gutter);
  background: var(--surface-sunken);
  border-top: var(--border);
}

.join-ask-inner {
  max-width: var(--max-text);
  margin: 0 auto;
}

.join-ask h2 { font-size: var(--text-xl); line-height: var(--leading-xl); }
.join-ask p { color: var(--ink-secondary); }
.join-ask .button { margin-top: var(--space-2xs); }

/* --- Buttons used by this page ---------------------------------------------
   Sized for a 44px minimum tap target and a single-line label at every width. */
.page-join .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  text-align: center;
  border: 1px solid transparent;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.page-join .button.primary {
  background: var(--accent);        /* 7.4:1 against white text */
  color: var(--white);
}

.page-join .button.primary:hover { background: var(--accent-hover); }

.page-join .button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.page-join .button.secondary:hover {
  background: var(--surface-raised);
  border-color: var(--ink);
}

.page-join .button--lg {
  min-height: 56px;
  padding-inline: var(--space-xl);
  font-size: var(--text-md);
}


/* @source _src/css/62-store.css */
/* ============================================================================
   STORE
   ADR-005: one page, two clearly separated sections, no shared cart. The two
   halves are visually distinct because they are genuinely different: different
   owners, different fulfilment, different checkout.
   ========================================================================= */

.page-store main { padding-top: var(--header-height); }

.store-masthead {
  padding: var(--section-y) var(--gutter) var(--section-y-tight);
  border-bottom: var(--border);
}

.store-masthead-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.store-masthead h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  max-width: 18ch;
}

/* The XO asked for obvious movement between the two counters. */
.store-jump {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

.store-jump a {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.store-jump a:hover {
  border-color: var(--ink);
  background: var(--white);
}

.store-jump-label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}

.store-jump-note {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

@media (min-width: 720px) {
  .store-jump { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
}

/* --- Sections --------------------------------------------------------------- */
.store-section { padding: var(--section-y) var(--gutter); }
.store-section--merch { background: var(--surface-raised); border-top: var(--border); }

.store-section-inner { max-width: var(--max); margin: 0 auto; }

.store-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--ink);
}

.store-section-head h2 { margin: 0; }

.store-section-meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.store-section-lede {
  margin-top: var(--space-md);
  max-width: var(--measure);
  color: var(--ink-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-md);
}

/* --- Unit essentials --------------------------------------------------------
   A price list, not cards. Nine priced rows read as an institution publishing its
   figures; nine decorated boxes would read as a marketing page. The price sits in
   its own column so the numbers align down the page and stay scannable. */
.essentials-list {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.essentials-list li {
  display: grid;
  gap: var(--space-3xs) var(--space-2xl);
  padding-block: var(--space-md);
  border-top: var(--border);
}

.essentials-list li:last-child { border-bottom: var(--border); }
.essentials-list h3 { margin: 0; font-size: var(--text-md); }
.essentials-list p { margin: 0; color: var(--ink-secondary); }

.essentials-price {
  color: var(--ink);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 720px) {
  .essentials-list li {
    grid-template-columns: minmax(12rem, 18rem) 1fr minmax(5rem, auto);
    align-items: baseline;
  }
  .essentials-price { text-align: right; }
}

.store-cta-row {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
}

.store-note {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* --- Merchandise grid -------------------------------------------------------
   The product photograph does the work. No card chrome, no shadow, no hover
   lift: a hairline and the image itself. */
.merch-grid {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg) var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.merch-link {
  display: grid;
  gap: var(--space-xs);
  height: 100%;
  align-content: start;
}

.merch-media {
  display: block;
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.merch-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-out);
}

.merch-link:hover .merch-media img { transform: scale(1.03); }
.merch-link:hover .merch-title { text-decoration: underline; text-underline-offset: 3px; }

.merch-body { display: grid; gap: var(--space-3xs); }

.merch-category {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.merch-title {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-medium);
  color: var(--ink);
  text-wrap: pretty;
}

.merch-price {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- Buttons ---------------------------------------------------------------- */
.page-store .button,
.page-cadet-dashboard .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  border: 1px solid transparent;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.page-store .button.primary,
.page-cadet-dashboard .button.primary {
  background: var(--accent);
  color: var(--white);
}

.page-store .button.primary:hover,
.page-cadet-dashboard .button.primary:hover { background: var(--accent-hover); }

/* ============================================================================
   CADET AND FAMILY ACCESS (ADR-009)
   A signpost, not a portal. There is no login here to attack and no cadet data
   behind it: the gate is a managed access check and the records live nationally.
   ========================================================================= */

.page-cadet-dashboard main { padding-top: var(--header-height); }

.access-page { padding: var(--section-y) var(--gutter); }

.access-inner {
  max-width: var(--max-text);
  margin: 0 auto;
}

.access-block {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--border);
}

.access-block h2 { font-size: var(--text-lg); line-height: var(--leading-lg); }
.access-block p { color: var(--ink-secondary); }
.access-block .button { margin-top: var(--space-2xs); }

.access-status {
  padding: var(--space-sm) var(--space-md);
  background: var(--blue-050);
  border-left: 3px solid var(--navy-600);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink) !important;
}

.access-footnote {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--border);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}


/* @source _src/css/63-footer.css */
/* ============================================================================
   FOOTER
   Fixes the two pairs Lighthouse flagged as BUG-003, in the tokens rather than
   with one-off overrides (ADR-008):
     .footer-bottom p   rgba(255,255,255,.35) on navy  =  3.17:1  FAIL
     .join-footer       rgba(255,255,255,.80) on gold  =  1.89:1  FAIL
   Translucent white was the cause of both. Opaque token values replace it.
   ========================================================================= */

.footer-bottom p {
  color: var(--ink-inverse-muted);   /* 9.6:1 on --navy-950 */
  font-size: var(--text-sm);
  max-width: var(--measure-wide);
}

/* The footer call to action now speaks the same language as every other call to
   action on the site: one accent, one label per intent. Gold is reserved for
   honours, and gold-on-gold was unreadable. */
.site-footer .join-footer {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-md);
  background: var(--red-600);        /* 3.44:1 against the navy footer */
  color: var(--white);               /* 5.06:1 on --red-600 */
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out);
}

.site-footer .join-footer:hover {
  background: var(--red-700);
  transform: none;
}

/* Footer links were rgba(255,255,255,.8); at small sizes that lands close to
   the AA floor on navy. An opaque value is both readable and predictable. */
.site-footer .footer-col-nav a,
.site-footer .footer-social a {
  color: var(--ink-inverse-muted);
  font-size: var(--text-sm);
}

.site-footer .footer-col-nav a:hover,
.site-footer .footer-social a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-col-title {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--white);
}

/* ============================================================================
   FORM STATES
   The contact form previously had no error or confirmation state at all.
   ========================================================================= */

.field-error {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--red-800);          /* 7.9:1 on white */
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.contact-form [aria-invalid="true"] {
  border-color: var(--red-700);
  outline-color: var(--red-700);
}

.contact-msg {
  margin: var(--space-sm) 0 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.contact-msg[data-state="ok"] {
  background: var(--blue-050);
  border-left: 3px solid var(--navy-600);
  color: var(--ink);
}

.contact-msg[data-state="error"] {
  background: #fdeef1;
  border-left: 3px solid var(--red-700);
  color: var(--red-800);
}

/* ============================================================================
   404 - kept quiet and useful. Its presence also switches Cloudflare Pages
   from SPA fallback (every bad URL soft-404s as the homepage) to real 404s.
   ========================================================================= */

.page-404 main { padding-top: var(--header-height); }
.notfound { padding: var(--section-y) var(--gutter) var(--section-y); }
.notfound-inner { max-width: var(--max-text); margin: 0 auto; }

.notfound-links {
  display: grid;
  gap: 0;
  margin-top: var(--space-lg);
}

.notfound-links a {
  padding: var(--space-sm) 0;
  border-top: var(--border);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  transition: color var(--duration-fast) var(--ease-out);
}

.notfound-links a:last-child { border-bottom: var(--border); }
.notfound-links a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }


/* @source _src/css/64-about.css */
/* =============================================================================
   ABOUT - rebuilt 2026-08-23
   Replaces the icon triad and the alternating 50/50 block, both banned in
   design-system.md. The page is now photograph, narrative, comparison, list.
   Four different layout families, so the page has a cadence rather than a loop.
   ========================================================================== */

/* The header is fixed, so pages without a full-bleed hero clear it on main.
   Same convention as .page-join, .page-store, .page-404. */
.page-about main { padding-top: var(--header-height); }

.about-masthead {
  padding: var(--section-y) var(--gutter) var(--section-y-tight);
}

.about-masthead-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.about-masthead h1 {
  margin: 0;
  max-width: 18ch;
  font-size: var(--text-4xl);
  line-height: var(--leading-4xl);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.about-masthead .lede {
  margin: var(--space-lg) 0 0;
}

.about-masthead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* --- The plate --------------------------------------------------------------
   One photograph at full width, with the caption underneath in a reading
   column. Deliberately NOT the two-column dark plate the Join page uses; two
   pages sharing one layout family is how a site starts to loop. */
.about-plate {
  margin: 0;
  display: grid;
  gap: 0;
}

.about-plate img {
  width: 100%;
  /* height:auto is load-bearing. The img carries width/height attributes so the
     browser can reserve space and avoid a layout shift, but those attributes act
     as a definite height, which makes aspect-ratio a no-op. Without this the
     photograph rendered 900px tall regardless of the ratio below. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* The caption has to sit on the same left edge as every other section. Those
   sections pad by --gutter and then centre a --max inner box, so the caption
   centres a box of (--max + 2 * --gutter) and pads inside it. Centring --max
   directly, then padding, pushed it a gutter's width off the page grid. */
.about-plate figcaption {
  width: 100%;
  max-width: min(calc(var(--max) + (2 * var(--gutter))), 100%);
  margin-inline: auto;
  padding: var(--space-md) var(--gutter) 0;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

@media (min-width: 900px) {
  .about-plate img { aspect-ratio: 21 / 9; }
}

/* --- Narrative --------------------------------------------------------------
   Prose, set at a real reading measure. This is the section that does the work
   the three icon cards were pretending to do. */
.about-narrative {
  padding: var(--section-y) var(--gutter);
}

.about-narrative-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.about-narrative h2,
.about-eligibility h2,
.about-training h2 {
  margin: 0;
  max-width: 20ch;
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.about-prose {
  margin-top: var(--space-xl);
  max-width: var(--measure);
}

.about-prose p {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--ink-secondary);
}

.about-prose p + p { margin-top: var(--space-md); }
.about-prose strong { color: var(--ink); font-weight: var(--weight-semibold); }

.about-section-lede {
  margin: var(--space-md) 0 0;
  max-width: var(--measure);
  color: var(--ink-secondary);
}

/* --- Eligibility comparison -------------------------------------------------
   A real table, because this is genuinely tabular: two programmes compared on
   the same four axes. Two decorated cards forced the reader to hold one column
   in their head while reading the other. On narrow screens the table becomes
   stacked blocks, with each cell labelled by its row header. */
.about-eligibility {
  padding: var(--section-y) var(--gutter);
  background: var(--surface-sunken);
}

.about-eligibility-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.compare {
  width: 100%;
  margin-top: var(--space-2xl);
  border-collapse: collapse;
  text-align: left;
}

.compare th,
.compare td {
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  vertical-align: top;
  border-top: var(--border);
}

.compare thead th { border-top: 0; padding-top: 0; }

.compare-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}

.compare-sub {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-regular);
  color: var(--ink-muted);
}

.compare tbody th {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.compare tbody td { color: var(--ink-secondary); }

@media (max-width: 719px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tr { padding-block: var(--space-md); border-top: var(--border); }
  .compare th, .compare td { border-top: 0; padding: 0; }
  .compare tbody th { margin-bottom: var(--space-2xs); }
  .compare tbody td { padding-block: var(--space-2xs); }
  /* Without the header row, each cell has to name its own programme. */
  .compare tbody td::before {
    content: attr(data-label) ": ";
    font-weight: var(--weight-semibold);
    color: var(--ink);
  }
}

@media (min-width: 720px) {
  .compare { table-layout: fixed; }
  .compare th:first-child { width: 11rem; }
}

.about-requirements {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}

.about-requirements li { display: grid; gap: var(--space-3xs); }

.about-requirements span {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.about-requirements p { margin: 0; color: var(--ink-secondary); }

@media (min-width: 720px) {
  .about-requirements { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
}

/* --- Training ---------------------------------------------------------------
   Three grouped lists, not three cards. The grouping is the information; a card
   around each one would add a box and nothing else. */
.about-training {
  padding: var(--section-y) var(--gutter);
}

.about-training-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.training-groups {
  margin-top: var(--space-2xl);
  display: grid;
  gap: var(--space-xl);
}

.training-group h3 {
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--border-strong);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
}

.training-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
  color: var(--ink-secondary);
}

@media (min-width: 720px) {
  .training-groups { grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); }
}

/* --- Close ------------------------------------------------------------------ */
.about-close {
  padding: var(--section-y) var(--gutter);
  background: var(--surface-inverse);
}

.about-close-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.about-close h2 {
  margin: 0;
  max-width: 22ch;
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--ink);
}

.about-close p {
  margin: var(--space-md) 0 0;
  max-width: var(--measure);
  color: var(--ink-secondary);
}

.about-close-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}


/* @source _src/css/65-resources.css */
/* =============================================================================
   RESOURCES - rebuilt 2026-08-23
   Was four identical icon cards. This is an index: hairline rows grouped by
   audience, where a row is either a real link or an honest "not published yet".
   The unavailable rows are deliberately not links and are visually quieter, so
   the page never sells a destination it does not have.
   ========================================================================== */

.page-resource-hub main { padding-top: var(--header-height); }

.rh-masthead {
  padding: var(--section-y) var(--gutter) var(--section-y-tight);
}

.rh-masthead-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.rh-masthead h1 {
  margin: 0;
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  letter-spacing: var(--tracking-tight);
}

.rh-masthead .lede { margin: var(--space-md) 0 0; }

.rh-index {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--section-y);
  display: grid;
  gap: var(--space-2xl);
}

.rh-group-head h2 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  letter-spacing: var(--tracking-snug);
}

.rh-group-head p {
  margin: var(--space-3xs) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  max-width: var(--measure-narrow);
}

.rh-list {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.rh-list li { border-top: var(--border); }
.rh-list li:last-child { border-bottom: var(--border); }

.rh-list a,
.rh-pending {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-md);
  text-decoration: none;
  color: inherit;
}

.rh-list a { transition: background-color var(--duration) var(--ease-out); }

.rh-list a:hover { background: var(--surface-sunken); }
.rh-list a:hover .rh-item { text-decoration: underline; text-underline-offset: 0.18em; }

.rh-item {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}

.rh-note {
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  max-width: var(--measure);
}

.rh-ext { font-size: 0.85em; }

/* A row with nothing behind it yet. Quieter, and never a link, so a reader can
   tell at a glance which rows go somewhere. Not conveyed by colour alone: the
   note itself says it is not published. */
.rh-pending .rh-item { color: var(--ink-muted); font-weight: var(--weight-medium); }
.rh-pending .rh-note { color: var(--ink-muted); }

@media (min-width: 900px) {
  .rh-index { gap: var(--space-3xl); }
  .rh-group {
    display: grid;
    grid-template-columns: minmax(14rem, 20rem) 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }
  .rh-list { margin-top: 0; }
  .rh-list a,
  .rh-pending {
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    gap: var(--space-2xs) var(--space-xl);
    align-items: baseline;
  }
  .rh-list a { margin-inline: calc(var(--space-sm) * -1); padding-inline: var(--space-sm); }
}

/* --- Close ------------------------------------------------------------------ */
.rh-close {
  padding: var(--section-y) var(--gutter);
  background: var(--surface-sunken);
  border-top: var(--border);
}

.rh-close-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.rh-close h2 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  letter-spacing: var(--tracking-tight);
}

.rh-close p {
  margin: var(--space-sm) 0 0;
  max-width: var(--measure);
  color: var(--ink-secondary);
}

.rh-close-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}