/* ==========================================================================
   LEGACY STYLESHEET - TRANSITIONAL, DO NOT EXTEND
   --------------------------------------------------------------------------
   The pre-redesign stylesheet, restored verbatim from 40f0b11 so the routes
   that have not been rebuilt yet keep rendering exactly as they do in
   production today. Only /about, /training, /employers, /partners,
   /get-involved, /donate, /contact and /404 link this file.

   It does NOT satisfy the design contract: 38 font sizes, arbitrary spacing,
   radii, shadows and gradients all live here. Each route drops its link to
   this file as it is rebuilt on styles.css, and this file is deleted when the
   last one does. Nothing new should ever be added to it.
   ========================================================================== */

/* ==========================================================================
   Talent Development Coalition - Shared Design System CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SELF-HOSTED TYPE — Archivo (display), Public Sans (body), JetBrains Mono (utility)
   Sourced once from Google Fonts' variable-font files and served from this
   origin; no runtime request to any Google Fonts CDN host.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-variable-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: 400 700;
  font-display: swap;
  src: url("/assets/fonts/public-sans-variable-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: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/public-sans-italic-variable-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-variable-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;
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
  /* Color Palette — sampled from the TDC logo mark (see docs/content-source-of-truth.md) */
  --navy: #052443;
  --navy-light: #0d3a63;
  --navy-dark: #031630;
  --green: #146435;
  --green-dark: #0d4623;
  --green-light: #1c8548;
  --blue: #16619c;
  --blue-dark: #0f4570;
  --blue-light: #2680c4;
  --gold: #e3a620;
  --gold-dark: #b8830f;
  --gold-light: #edbb4e;
  --white: #ffffff;

  /* Neutral ramp — desaturated navy hue (~207°), not Tailwind slate/gray/zinc */
  --neutral-950: #0a1420;
  --neutral-900: #101d2e;
  --neutral-800: #1c2c3e;
  --neutral-700: #2e4257;
  --neutral-600: #46596c;
  --neutral-500: #647587;
  --neutral-400: #8a97a4;
  --neutral-300: #b3bcc4;
  --neutral-200: #d6dbe0;
  --neutral-100: #eceff1;
  --neutral-50: #f5f7f8;

  --text-dark: var(--neutral-900);
  --text-muted: var(--neutral-600);
  --border-color: var(--neutral-200);
  --bg-light: var(--neutral-50);
  /* Gold darkened further than --gold-dark specifically for text on white —
     4.96:1, passes WCAG AA at normal text size. --gold-dark itself stays as
     the UI/border shade, whose contrast math is against different backgrounds. */
  --gold-text: #8f6a0f;

  /* Backward Compatibility Aliases */
  --charcoal: var(--text-dark);
  --text: var(--text-dark);
  --muted: var(--text-muted);
  --line: var(--border-color);
  --light: var(--bg-light);
  --green-band: var(--green);
  --hero-bg: var(--navy);
  --section-bg: var(--navy);

  /* Layout & Spacing */
  --container: 1340px;
  --font-display: "Archivo", "Arial Narrow", Helvetica, Arial, sans-serif;
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --measure: 68ch;

  /* Shadows & Elevation */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 14px rgba(5, 36, 67, 0.08), 0 2px 4px rgba(5, 36, 67, 0.04);
  --shadow-lg: 0 12px 32px rgba(5, 36, 67, 0.12), 0 4px 8px rgba(5, 36, 67, 0.06);
  --shadow-xl: 0 20px 48px rgba(5, 36, 67, 0.16), 0 8px 16px rgba(5, 36, 67, 0.08);

  /* Transitions & Borders */
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.15s ease-in-out;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
}

/* --------------------------------------------------------------------------
   2. CSS RESET & BASE STYLES
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  margin: 0;
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  max-width: var(--measure);
}

p.no-measure, .section-lead p, blockquote p {
  max-width: none;
}

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

a {
  color: var(--green);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--green-dark);
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
}

h1 {
  font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem);
  letter-spacing: -0.02em;
  line-height: 0.97;
}

h2 {
  font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem);
  font-stretch: 112.5%;
  letter-spacing: -0.018em;
  line-height: 1.02;
}

h3 {
  font-size: clamp(1.35rem, 1.5vw + 0.5rem, 2rem);
  font-weight: 700;
  font-stretch: 112.5%;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

h4 {
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

h5, h6 {
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   3. ACCESSIBILITY & FOCUS UTILITIES
   -------------------------------------------------------------------------- */
/* Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--navy);
  color: var(--gold);
  padding: 12px 24px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  z-index: 9999;
  border: 2px solid var(--gold);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

/* Visible Focus Indicator (WCAG AAA/AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.container {
  width: min(calc(100% - 64px), var(--container));
  margin-inline: auto;
}

.container.narrow, .narrow {
  max-width: 760px;
}

.section {
  padding: 100px 0;
}

.eyebrow {
  color: var(--gold-text);
  text-transform: uppercase;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  font-weight: 500;
  font-size: 0.8125rem;
  margin-bottom: 16px;
  display: block;
}

.eyebrow.light {
  color: var(--gold);
}

.eyebrow.centered {
  text-align: center;
}

.center-rule {
  width: 120px;
  height: 3px;
  background: var(--green);
  margin: 0 auto 40px;
}

.title-rule {
  width: 60px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   5. HEADER & NAVIGATION SYSTEM
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  width: min(calc(100% - 48px), var(--container));
  margin: auto;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  max-width: 180px;
  height: 48px;
  width: auto;
  object-fit: contain;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.nav-link {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.nav-link:hover, .nav-link:focus {
  color: var(--green);
  background-color: var(--bg-light);
}

.nav-link.active {
  color: var(--green);
  border-bottom-color: var(--gold);
}

.header-cta-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.menu-toggle {
  display: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.menu-toggle:hover {
  background: var(--bg-light);
}

.menu-toggle span:not(.sr-only) {
  width: 24px;
  height: 2px;
  background: var(--navy);
  display: block;
  margin: 5px 0;
  transition: var(--transition);
}

/* Mobile Nav Drawer Backdrop */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 36, 67, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1001;
}

.nav-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   6. BUTTONS & INTERACTIVE ELEMENTS
   -------------------------------------------------------------------------- */
.button, .btn-primary, .btn-navy, .btn-green, .btn-outline, .apply-button, .donate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  text-align: center;
  white-space: nowrap;
}

.button:hover, .btn-primary:hover, .btn-navy:hover, .btn-green:hover, .btn-outline:hover, .apply-button:hover, .donate-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.button:active, .btn-primary:active {
  transform: translateY(0);
}

/* Primary Button (Gold Accent) */
.button, .btn-primary {
  background-color: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.button:hover, .btn-primary:hover {
  background-color: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}

/* Navy Button */
.btn-navy {
  background-color: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.btn-navy:hover {
  background-color: var(--navy-light);
  border-color: var(--navy-light);
  color: var(--white);
}

/* Green Button */
.btn-green {
  background-color: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.btn-green:hover {
  background-color: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}

/* Donate / Giving Button (Gold Accent) — reserved for gold=giving actions */
.donate-button, .apply-button.donate-button {
  background-color: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}

.donate-button:hover, .apply-button.donate-button:hover {
  background-color: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--navy);
}

/* Employer Button (Blue Accent) — reserved for blue=employer/business actions */
.btn-blue, .button.button-blue {
  background-color: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.btn-blue:hover, .button.button-blue:hover {
  background-color: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--white);
}

/* Outline Button */
.button-outline, .btn-outline {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

.button-outline:hover, .btn-outline:hover {
  background-color: var(--white);
  color: var(--navy);
}

/* Dark Outline Variant */
.btn-outline-navy {
  background-color: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.btn-outline-navy:hover {
  background-color: var(--navy);
  color: var(--white);
}

.button-arrow {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.button:hover .button-arrow {
  transform: translateX(4px);
}

.button-row {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.centered-row {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. HERO SECTIONS
   -------------------------------------------------------------------------- */
/* Hero V3 (Clean Premium Dark Navy Layout) */
.hero-v3 {
  position: relative;
  padding: 80px 0 96px;
  background: var(--navy);
  overflow: hidden;
  color: var(--white);
}

.hero-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1000px 500px at 20% 0%, rgba(217, 164, 65, 0.15), transparent 70%);
  pointer-events: none;
}

.hero-v3-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-v3-content h1 {
  color: var(--white);
  font-weight: 600;
  font-stretch: 112.5%;
  font-size: clamp(2.25rem, 3.5vw, 4rem);
  line-height: 1.2;
  margin-bottom: 24px;
}

.hero-v3-content h1 strong {
  font-weight: 800;
  color: var(--white);
}

.hero-v3-mission {
  color: #e2e8f0;
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 640px;
}

.hero-v3-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.hero-v3-quick-paths {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.hero-v3-quick-paths .quick-paths-label {
  font-weight: 700;
  color: var(--gold);
}

.hero-v3-quick-paths a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
}

.hero-v3-quick-paths a:hover {
  color: var(--gold);
}

.hero-v3-media {
  display: flex;
  justify-content: center;
}

.hero-media-card {
  width: 100%;
  max-width: 500px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 0 2px rgba(217, 164, 65, 0.3);
  background: var(--navy-light);
}

.hero-media-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}

/* Legacy Home Hero Split */
.home-hero {
  min-height: 600px;
  display: grid;
  grid-template-columns: 48% 52%;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.hero-left {
  background: rgba(42, 107, 52, 0.9);
  display: flex;
  align-items: center;
  padding: 64px 48px;
}

.hero-right {
  background: rgba(15, 24, 43, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.hero-copy h1 {
  color: var(--white);
  font-size: clamp(2.5rem, 4vw, 4.5rem);
}

/* Generic Subpage Hero */
.generic-hero {
  background: var(--navy);
  min-height: 320px;
  position: relative;
}

.generic-hero-overlay {
  min-height: 320px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(15, 24, 43, 0.95), rgba(22, 35, 61, 0.85));
}

.generic-hero h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 700;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   8. PILLAR ROW (FOUR-PILLAR SYSTEM)
   -------------------------------------------------------------------------- */
.pillar-row {
  background: var(--navy);
  padding-bottom: 64px;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pillar-tile {
  padding: 36px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
}

.pillar-tile:last-child {
  border-right: none;
}

.pillar-tile:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pillar-tile .pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.pillar-tile .pillar-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--white);
  fill: none;
  stroke-width: 2;
}

.pillar-tile.blue .pillar-icon {
  background: var(--blue);
}

.pillar-tile.green .pillar-icon {
  background: var(--green);
}

.pillar-tile.gold .pillar-icon {
  background: var(--gold);
}

.pillar-tile.gold .pillar-icon svg {
  stroke: var(--navy);
}

.pillar-tile.equal .pillar-icon {
  background: var(--navy-light);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.pillar-tile h3 {
  color: var(--white);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 12px;
}

.pillar-tile p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. AUDIENCE PATHWAY CARDS & SIX-ACTION GRID
   -------------------------------------------------------------------------- */
.action-grid, .audience-grid, .pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.action-card, .audience-card, .pathway-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.action-card:hover, .audience-card:hover, .pathway-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}

.action-card .action-icon, .audience-icon, .pathway-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-card .action-icon svg, .audience-icon svg, .pathway-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
}

.action-card.donate .action-icon {
  background: var(--gold);
}

.action-card.donate .action-icon svg {
  stroke: var(--navy);
}

.action-card h3, .audience-card h3, .pathway-card h3 {
  font-size: 1.4rem;
  color: var(--navy);
  font-weight: 700;
  margin: 0;
}

.action-card p, .audience-card p, .pathway-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  flex-grow: 1;
}

.action-card .button, .audience-card .button, .pathway-card .button {
  align-self: flex-start;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   10. PROCESS STEP CARDS (4-STEP GRID)
   -------------------------------------------------------------------------- */
.how-grid, .process-grid, .step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.how-card, .step-card, .process-card {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 40px 28px;
  min-height: 300px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: var(--transition);
}

.how-card:hover, .step-card:hover, .process-card:hover {
  transform: translateY(-4px);
  background: var(--white);
  border-color: var(--green);
  box-shadow: var(--shadow-md);
}

.step-card .step-number, .how-card .step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.how-card img, .step-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 24px;
}

.how-card h3, .step-card h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--navy);
  font-weight: 700;
  margin: 0 0 12px;
}

.how-card p, .step-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   10B. WAYFINDING PATHWAY — signature device
   A route line with numbered stations, left-edge structure (not centered,
   not a uniform icon grid). The line fills in on scroll; respects
   prefers-reduced-motion. See site.js §"Pathway line reveal".
   -------------------------------------------------------------------------- */
.pathway {
  position: relative;
  margin: 56px 0 8px;
  padding-left: 0;
}

.pathway-track {
  position: absolute;
  left: 27px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--border-color);
  border-radius: var(--radius-pill);
}

.pathway-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--blue), var(--green) 55%, var(--gold));
  border-radius: var(--radius-pill);
}

.pathway-js .pathway-track-fill {
  height: 0%;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pathway-step {
  position: relative;
  display: flex;
  gap: 28px;
  padding-bottom: 52px;
  /* Visible by default — JS opts INTO the reveal animation via .pathway-js
     on <html>, never the reverse, so a JS failure never hides content. */
  opacity: 1;
  transform: none;
}

.pathway-step:last-child {
  padding-bottom: 0;
}

.pathway-js .pathway-step {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.pathway-js .pathway-step.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.pathway-station {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--neutral-300);
  color: var(--neutral-500);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: var(--transition);
}

.pathway-step.is-visible .pathway-station {
  border-color: var(--green);
  color: var(--navy);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.pathway-content {
  padding-top: 8px;
  max-width: 56ch;
}

.pathway-label, .tag-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  display: block;
  margin-bottom: 6px;
}

.tag-label.tag-label-green { color: var(--green); }
.tag-label.tag-label-gold { color: var(--gold-text); }

/* Field card — replaces uniform icon grids: colored top accent + mono index, no icon-library glyphs */
.field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

@media (max-width: 860px) {
  .field-grid { grid-template-columns: 1fr; }
}

.field-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--neutral-300);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  transition: var(--transition);
}

.field-card:nth-child(1) { border-top-color: var(--blue); }
.field-card:nth-child(2) { border-top-color: var(--green); }
.field-card:nth-child(3) { border-top-color: var(--gold); }

.field-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.field-card h3 {
  margin-bottom: 10px;
}

.field-card p {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.pathway-content h3 {
  margin-bottom: 8px;
}

.pathway-content p {
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 640px) {
  .pathway-track { left: 21px; }
  .pathway-station { width: 44px; height: 44px; font-size: 0.95rem; }
  .pathway-step { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pathway-track-fill { height: 100% !important; transition: none; }
  .pathway-step { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   10C. CHECK LIST — asymmetric text list, not an icon grid
   -------------------------------------------------------------------------- */
.check-list, .feature-checklist {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.check-list li, .feature-checklist .checklist-item {
  position: relative;
  padding-left: 34px;
  color: var(--text-dark);
  line-height: 1.55;
}

.check-list li::before, .feature-checklist .checklist-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--green);
}

.check-list li::after, .feature-checklist .checklist-item::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
}

.check-list.check-list-blue li::before {
  background: var(--blue);
}

.check-list.check-list-gold li::before {
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   10D. IN-PAGE JUMP NAV (for pages consolidating multiple prior routes)
   -------------------------------------------------------------------------- */
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.jump-nav a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  transition: var(--transition-fast);
}

.jump-nav a:hover, .jump-nav a:focus-visible {
  background: var(--white);
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   10E. IMPACT LIST — asymmetric numbered rows, not a grid
   -------------------------------------------------------------------------- */
.impact-list {
  margin-top: 40px;
  border-top: 1px solid var(--border-color);
}

.impact-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-color);
  align-items: baseline;
}

.impact-row .impact-index {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--neutral-500);
}

.impact-row h3 {
  margin-bottom: 6px;
}

.impact-row p {
  color: var(--text-muted);
  margin: 0;
  max-width: 56ch;
}

@media (max-width: 640px) {
  .impact-row { grid-template-columns: 1fr; gap: 4px; }
}

/* --------------------------------------------------------------------------
   10F. VALUE TAGS — inline strip, quiet texture
   -------------------------------------------------------------------------- */
.value-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  list-style: none;
  padding-left: 0;
}

.value-tags li {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   10G. BANNER STRIP — slim, high-contrast, deliberately short (varies rhythm)
   -------------------------------------------------------------------------- */
.banner-strip {
  background: var(--navy);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  padding: 32px 0;
  text-align: center;
}

.banner-strip p {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112.5%;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.banner-strip p .divider {
  color: var(--gold);
  margin: 0 0.5em;
}

/* --------------------------------------------------------------------------
   10H. GIVE ONLINE TOGGLE (Stripe, behind DONATIONS_LIVE flag)
   -------------------------------------------------------------------------- */
.give-toggle {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}

.give-toggle-option {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.give-toggle-option.is-active {
  background: var(--gold);
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   10I. FULL-BLEED IMAGE BAND (vision quote / consortium history)
   These sections set --section-bg inline but had no consuming CSS — text
   was rendering with no background image or overlay, which is what caused
   the color-contrast failures on .eyebrow.light and .quote-author.
   -------------------------------------------------------------------------- */
.vision-section, .consortia {
  position: relative;
  background-color: var(--navy);
  background-image: var(--section-bg);
  background-size: cover;
  background-position: center;
}

.vision-overlay, .dark-overlay {
  background: linear-gradient(135deg, rgba(5, 36, 67, 0.94), rgba(5, 36, 67, 0.86));
  padding: 90px 0;
}

.vision-grid, .consortia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 780px) {
  .vision-grid, .consortia-grid { grid-template-columns: 1fr; }
}

.vision-overlay h2, .dark-overlay h2 {
  color: var(--white);
}

.vision-overlay p, .dark-overlay p {
  color: rgba(255, 255, 255, 0.9);
}

.vision-overlay strong, .dark-overlay strong {
  color: var(--white);
}

.vision-overlay blockquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 112.5%;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.35;
  color: var(--white);
  margin: 20px 0 28px;
  padding-left: 20px;
  border-left: 4px solid var(--gold);
}

.quote-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.quote-author strong {
  display: block;
  color: var(--white);
  font-size: 1.0625rem;
}

.quote-author span {
  display: block;
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   11. FEATURE BLOCKS & GRID LAYOUTS
   -------------------------------------------------------------------------- */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split-copy h2 {
  color: var(--navy);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 600;
  margin-bottom: 28px;
}

.split-copy h2 strong {
  color: var(--green);
  font-weight: 800;
}

.split-copy p {
  margin-bottom: 20px;
  color: var(--text-dark);
}

.split-media img {
  width: 100%;
  max-height: 640px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* GrowPro Callout Section */
.growpro-section .split-copy h2 strong {
  color: var(--navy);
}

.growpro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 36px;
  padding: 0;
  list-style: none;
}

.growpro-tags li {
  background: var(--bg-light);
  color: var(--navy);
  border: 1px solid var(--border-color);
  font: 700 0.85rem var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
}

/* Partner Logo Grid Tiles */
.logo-grid, .partner-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
  align-items: stretch;
}

.logo-tile, .partner-tile {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.logo-tile:hover, .partner-tile:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: var(--shadow-md);
}

.logo-tile img, .partner-tile img {
  max-height: 72px;
  width: auto;
  object-fit: contain;
}

.partner-tile-text {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. BANDS & HIGHLIGHT SECTIONS
   -------------------------------------------------------------------------- */
.mission-band {
  background: var(--navy);
  color: var(--white);
  padding: 90px 0;
}

.mission-band .eyebrow {
  color: var(--gold);
}

.mission-band blockquote {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--white);
}

.mission-band blockquote strong {
  font-weight: 800;
  color: var(--gold);
}

.together-band {
  background: var(--green);
  color: var(--white);
  padding: 100px 0;
}

.together-band .container {
  max-width: 960px;
  text-align: center;
}

.together-band h2 {
  color: var(--white);
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  font-weight: 800;
  margin-bottom: 24px;
}

.together-band p {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.1rem, 1.2vw, 1.25rem);
  line-height: 1.7;
}

.donate-section {
  background: var(--navy);
  color: var(--white);
  padding: 100px 0;
  text-align: center;
}

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

.donate-section h2 {
  color: var(--white);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  max-width: 780px;
  margin: 0 auto 20px;
}

.donate-section p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  margin: 0 auto 36px;
  font-size: 1.15rem;
}

/* --------------------------------------------------------------------------
   13. FORM STYLING & ALERT CALLOUTS
   -------------------------------------------------------------------------- */
.tdc-form {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-group, .tdc-form label {
  display: block;
  margin-bottom: 24px;
}

.form-group label span, .tdc-form label span {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 8px;
}

.tdc-form input[type="text"],
.tdc-form input[type="email"],
.tdc-form input[type="tel"],
.tdc-form input[type="url"],
.tdc-form input[type="number"],
.tdc-form textarea,
.tdc-form select {
  width: 100%;
  border: 1px solid var(--border-color);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-dark);
  transition: var(--transition-fast);
}

.tdc-form input:focus,
.tdc-form textarea:focus,
.tdc-form select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.3);
}

.tdc-form input[aria-invalid="true"],
.tdc-form textarea[aria-invalid="true"],
.tdc-form select[aria-invalid="true"] {
  border-color: #dc2626;
}

.required-hint {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 24px;
}

.field-error {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 6px;
  font-weight: 600;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
}

.form-status {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 4px 12px;
}

.form-status[data-state="error"], .alert-error {
  color: #991b1b;
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
}

.form-status[data-state="success"], .alert-success {
  color: #14532d;
  background-color: #dcfce7;
  border: 1px solid #86efac;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   14. COURSES & COMMUNITY GRID
   -------------------------------------------------------------------------- */
.course-wave {
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.course-wave-overlay {
  padding: 140px 0 100px;
  background: rgba(42, 107, 52, 0.9);
}

.course-card {
  background: var(--white);
  color: var(--text-dark);
  border-radius: var(--radius-md);
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
  box-shadow: var(--shadow-lg);
}

.course-listing-card {
  display: grid;
  grid-template-columns: 45% 55%;
  box-shadow: var(--shadow-lg);
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.course-listing-card > img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
}

.course-listing-copy {
  padding: 48px;
}

.course-listing-copy h2 {
  font-size: 2.25rem;
  color: var(--navy);
}

.course-date {
  color: var(--green);
  font-weight: 700;
}

.course-detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: start;
}

.course-info {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 24px 0;
  background: var(--bg-light);
}

.apply-panel {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.apply-panel .tdc-form {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.apply-panel .form-grid {
  grid-template-columns: 1fr;
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 40px;
}

.leader-card {
  text-align: center;
}

.leader-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.leader-card h3 {
  font-size: 1.25rem;
  margin: 20px 0 4px;
  color: var(--navy);
}

.leader-card p {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   15. FOOTER (5-COLUMN EDITORIAL DARK NAVY LAYOUT)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: var(--white);
  padding: 80px 0 0;
  border-top: 4px solid var(--gold);
}

.footer-grid, .footer-grid.footer-grid-wide {
  width: min(calc(100% - 64px), var(--container));
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-brand img {
  width: 170px;
  height: auto;
  filter: brightness(0) invert(1);
}

.footer-donate {
  margin-top: 24px;
}

.site-footer .footer-heading {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a, .footer-course {
  color: #e2e8f0;
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--gold);
  transform: translateX(2px);
}

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.social-links a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-weight: 700;
  transition: var(--transition-fast);
}

.social-links a:hover {
  background: var(--gold);
  color: var(--navy);
}

.footer-bottom {
  width: min(calc(100% - 64px), var(--container));
  margin: 60px auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 28px 0 36px;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   16. MEDIA QUERIES & RESPONSIVE DESIGN
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .header-inner {
    min-height: 80px;
  }
  
  .menu-toggle {
    display: block;
  }
  
  /* Mobile Navigation Drawer Overlay Styling */
  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(280px, 80vw, 360px);
    background: var(--navy);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: 90px 32px 40px;
    box-shadow: var(--shadow-xl);
    z-index: 1002;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
  }

  /* Separate from .open on purpose: display has no transition, so it
     applies instantly in both directions, and unlike visibility (which is
     inherited and proved unreliable here — descendants kept computing
     hidden well after the parent had already flipped to visible) display
     leaves no inheritance ambiguity: an element is either rendered or it
     isn't. JS adds this immediately on open (before the slide-in) and
     removes it only after the slide-out transform finishes (see site.js),
     so a closed drawer's links are excluded from Tab order without
     visibly cutting the close animation short. */
  .primary-nav.is-hidden {
    display: none;
  }

  .primary-nav.open {
    transform: translateX(0);
  }
  
  .nav-link {
    color: var(--white);
    font-size: 1.15rem;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .nav-link:hover, .nav-link:focus {
    color: var(--gold);
    background: rgba(255, 255, 255, 0.05);
  }
  
  .nav-link.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }

  .action-grid, .audience-grid, .pathway-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-grid, .process-grid, .step-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid, .footer-grid.footer-grid-wide {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

@media (max-width: 820px) {
  body {
    font-size: 1rem;
  }

  .container {
    width: min(calc(100% - 36px), var(--container));
  }

  .section {
    padding: 64px 0;
  }

  .hero-v3-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-v3-media {
    order: -1;
  }

  .hero-media-card {
    max-width: 100%;
  }

  .hero-media-card img {
    aspect-ratio: 16/9;
    max-height: 320px;
  }

  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillar-tile {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .split-section, .course-detail-grid, .course-listing-card {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .split-media {
    order: -1;
  }

  .logo-grid, .partner-tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid, .footer-grid.footer-grid-wide {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .container, .header-inner, .footer-grid, .footer-bottom {
    width: calc(100% - 32px);
  }

  .brand img {
    max-width: 135px;
    height: 38px;
  }

  .apply-button, .donate-button {
    padding: 10px 16px;
    font-size: 0.875rem;
  }

  .pillar-grid {
    grid-template-columns: 1fr;
  }

  .action-grid, .audience-grid, .pathway-grid, .how-grid, .process-grid, .step-grid, .leadership-grid, .form-grid {
    grid-template-columns: 1fr;
  }

  .logo-grid, .partner-tiles {
    grid-template-columns: 1fr;
  }

  .footer-grid, .footer-grid.footer-grid-wide {
    grid-template-columns: 1fr;
  }

  .course-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
  }

  .tdc-form, .apply-panel {
    padding: 24px;
  }
}