/* ═══════════════════════════════════════════════════════════════════
   G-SAEP DESIGN SYSTEM
   A unified stylesheet shared by every page of gonjalandstars.org.

   Built on the navy/gold/cream palette established across all G-SAEP
   documents, and inspired by the editorial rhythm of GEF — the
   split-color italic moments, generous whitespace, sectional rhythm
   between light/photo/navy bands, soft circle contact icons, and
   filled-square pricing tiles.

   Last updated: 2026
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. TOKENS — colors, motion, depth, type
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --navy-50:  #f0f4f9;
  --navy-100: #dbe5f0;
  --navy-200: #b8c8db;
  --navy-300: #8fa6c4;
  --navy-400: #5d7ca5;
  --navy-500: #3a5a85;
  --navy-600: #2a4566;
  --navy-700: #1f3653;
  --navy-800: #1a3a5c;
  --navy-900: #0f1f33;
  --navy-950: #070f1d;

  --gold-50:  #fdf8ed;
  --gold-100: #faedca;
  --gold-200: #f4d989;
  --gold-300: #eebf4d;
  --gold-400: #e9a924;
  --gold-500: #c8922a;
  --gold-600: #a3711d;
  --gold-700: #82541a;
  --gold-800: #6b431c;
  --gold-900: #5b391c;

  --cream:        #fdf8ed;
  --cream-soft:   #fdfcfa;
  --warm-white:   #ffffff;
  --text:         #1a1a1a;
  --text-muted:   #475569;
  --text-soft:    #64748b;
  --rule:         #e5e7eb;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   160ms;
  --dur-base:   260ms;
  --dur-slow:   480ms;
  --dur-slower: 720ms;

  /* Depth */
  --shadow-sm:      0 1px 2px rgba(15,31,51,0.06), 0 1px 1px rgba(15,31,51,0.04);
  --shadow-md:      0 4px 12px -2px rgba(15,31,51,0.08), 0 2px 4px -1px rgba(15,31,51,0.06);
  --shadow-lg:      0 16px 32px -8px rgba(15,31,51,0.12), 0 4px 8px -2px rgba(15,31,51,0.06);
  --shadow-xl:      0 28px 56px -12px rgba(15,31,51,0.18), 0 8px 16px -4px rgba(15,31,51,0.08);
  --shadow-gold:    0 8px 24px -6px rgba(200,146,42,0.40);
  --shadow-gold-lg: 0 16px 40px -10px rgba(200,146,42,0.55);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(200,146,42,0.40);

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ───────────────────────────────────────────────────────────────
   2. RESET + GLOBAL DEFAULTS
   ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream-soft);
  margin: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

/* Selection — warm gold tint */
::selection { background: rgba(200,146,42,0.25); color: var(--navy-800); }

/* Universal focus ring */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Scrollbar — themed */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--gold-500); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-600); }

/* Headings — Fraunces serif, tight tracking.
   The COLOR is set with :where() so it has zero specificity. That means
   Tailwind classes like .text-white, .text-gold-600, .text-navy-100 etc.
   always win, even though they're class selectors and this is element-
   level. Without :where(), an h1 inside .hero-slide-content (which sets
   color:white on the parent) would still be forced to navy-900 because
   the direct element selector beats inheritance. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 1rem;
  font-feature-settings: "ss01", "ss02";
}
:where(h1, h2, h3, h4, h5, h6) { color: var(--navy-900); }

/* Paragraph defaults — same :where() trick so Tailwind text-* classes
   on <p> elements always take precedence over this color default. */
p { margin: 0 0 1rem; line-height: 1.7; }
:where(p) { color: var(--navy-700); }

/* Links */
a { color: var(--gold-600); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--gold-700); }

/* Container utility */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; }

/* ───────────────────────────────────────────────────────────────
   3. SCROLL PROGRESS BAR
   ─────────────────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-300) 50%, var(--gold-500) 100%);
  z-index: 51;
  transition: width var(--dur-fast) linear;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(200,146,42,0.5);
}

/* ───────────────────────────────────────────────────────────────
   4. NAVIGATION
   ─────────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(200,146,42,0.10);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -8px rgba(15,31,51,0.06);
  transition: background var(--dur-base) var(--ease-out);
}
/* When hero is visible (transparent nav over dark hero) — added by JS */
.site-nav.is-transparent {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: transparent;
}
.site-nav.is-transparent .nav-link { color: white; }
.site-nav.is-transparent .nav-link:hover { color: var(--gold-300); }
.site-nav.is-transparent .logo-text { color: white; }

.site-nav-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

.brand-logo {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo svg { width: 44px; height: 44px; flex-shrink: 0; }
.brand-logo .logo-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--navy-800);
  letter-spacing: -0.01em;
  line-height: 1;
  transition: color var(--dur-base) var(--ease-out);
}
.brand-logo .logo-sub {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--gold-500);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 2px;
}

.nav-links {
  display: flex; align-items: center; gap: 0.25rem;
  flex: 1;
  justify-content: center;
}
.nav-link {
  position: relative;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy-800);
  border-radius: 999px;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}
.nav-link:hover { color: var(--gold-600); }
/* Active state — soft cream pill (mirrors GEF's active nav treatment, in our palette) */
.nav-link.is-active {
  background: var(--cream);
  color: var(--gold-700);
}
.nav-link.is-active:hover { color: var(--gold-700); }

.nav-cta { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

.menu-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem;
  color: var(--navy-800);
}
.site-nav.is-transparent .menu-toggle { color: white; }

/* Mobile menu drawer — visibility is controlled by Tailwind's .hidden
   class (added/removed by setupMobileMenu in layout.js). When the .hidden
   class is removed, the menu becomes visible (block layout by default).
   No `display:none` here — that was a legacy MPA rule that fought with
   the Tailwind class and prevented the menu from ever showing. */
.mobile-menu {
  background: white;
  border-top: 1px solid var(--rule);
  padding: 1rem 1.5rem;
}
.mobile-menu a {
  display: block;
  padding: 0.625rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy-800);
  border-bottom: 1px solid var(--rule);
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a:hover { color: var(--gold-600); }
.mobile-menu a.is-active { color: var(--gold-700); }
.mobile-menu a.is-donate { color: var(--gold-600); font-weight: 700; }

@media (max-width: 1100px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
}

/* ───────────────────────────────────────────────────────────────
   5. BUTTONS
   ─────────────────────────────────────────────────────────────── */

/* Primary — gold gradient with shine sweep on hover */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
  color: white;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  font-family: inherit;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out),
    filter var(--dur-base) var(--ease-out);
  will-change: transform;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-lg);
  filter: brightness(1.05);
  color: white;
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-md); transition-duration: var(--dur-fast); }
.btn-primary > * { position: relative; z-index: 2; }

/* Outline — fills with navy from left on hover */
.btn-outline {
  background: transparent;
  color: var(--navy-800);
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  font-family: inherit;
  cursor: pointer;
  border: 2px solid var(--navy-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy-800);
  transform: translateX(-101%);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: -1;
}
.btn-outline:hover { color: white; }
.btn-outline:hover::before { transform: translateX(0); }

/* White outline — for use over dark/navy backgrounds */
.btn-outline-white {
  background: transparent;
  color: white;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  font-family: inherit;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}
.btn-outline-white:hover {
  background: white;
  color: var(--navy-800);
  border-color: white;
  transform: translateY(-2px);
}

/* Glass — for dark hero backgrounds */
.btn-glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-spring);
}
.btn-glass:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-2px);
  color: white;
}

/* Ghost — tertiary actions */
.btn-ghost {
  background: transparent;
  color: var(--navy-800);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  font-family: inherit;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}
.btn-ghost:hover { background: rgba(200,146,42,0.10); color: var(--gold-700); }

/* Loading state */
.btn-primary.is-loading, .btn-outline.is-loading, .btn-outline-white.is-loading, .btn-glass.is-loading {
  pointer-events: none;
  color: transparent !important;
  position: relative;
}
.btn-primary.is-loading::after, .btn-outline.is-loading::after,
.btn-outline-white.is-loading::after, .btn-glass.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 3;
}
.btn-outline.is-loading::after { border-color: rgba(26,58,92,0.3); border-top-color: var(--navy-800); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sizing modifiers */
.btn-sm { padding: 9px 18px; font-size: 0.8125rem; }
.btn-lg { padding: 18px 36px; font-size: 1rem; }

/* ───────────────────────────────────────────────────────────────
   6. EDITORIAL TYPOGRAPHY — the GEF-inspired split-color italic
       This is the signature visual move. Use on every page hero.
   ─────────────────────────────────────────────────────────────── */
.headline {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--navy-900);
  margin: 0 0 1.5rem;
}
.headline-xl { font-size: clamp(2.5rem, 6vw, 5rem); }
.headline-lg { font-size: clamp(2rem, 4.5vw, 3.5rem); }
.headline-md { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }

/* The signature: italic gold accent word inside a headline */
.headline .accent {
  font-style: italic;
  font-weight: 700;
  color: var(--gold-500);
  font-feature-settings: "ss01", "ss02";
}
/* On dark backgrounds */
.is-dark .headline { color: white; }
.is-dark .headline .accent { color: var(--gold-300); }

/* Eyebrow label — small gold caps above headings */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-600);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-bottom: 1rem;
}
.is-dark .eyebrow { color: var(--gold-300); }
.eyebrow-centered { text-align: center; width: 100%; }

/* Lead paragraph — bigger intro text under a hero */
.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--navy-700);
  max-width: 60ch;
}
.is-dark .lead { color: rgba(255,255,255,0.85); }

/* Gold rule — editorial separator */
.gold-rule {
  display: block;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  border: none;
  border-radius: 3px;
  margin: 1.5rem 0;
}
.gold-rule-centered { margin-left: auto; margin-right: auto; }

/* Pull quote */
.pullquote {
  position: relative;
  padding: 2rem 2rem 2rem 3.5rem;
  border-left: 4px solid var(--gold-500);
  background: linear-gradient(135deg, var(--cream) 0%, white 100%);
  border-radius: 0 16px 16px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--navy-800);
  box-shadow: var(--shadow-sm);
  margin: 2rem 0;
}
.pullquote::before {
  content: '\201C';
  position: absolute;
  left: 1rem; top: 0.5rem;
  font-size: 4rem;
  line-height: 1;
  color: rgba(200,146,42,0.35);
}
.pullquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-weight: 600;
}
.pullquote cite::before { content: '\2014  '; color: var(--gold-600); }

/* ───────────────────────────────────────────────────────────────
   7. PAGE HEADER — full-width hero band with photo + overlay
       Used on every non-home page. The signature editorial moment.
   ─────────────────────────────────────────────────────────────── */
.page-hero {
  position: relative;
  padding: 9rem 0 5rem;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-800);
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0.45;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(200,146,42,0.15) 0%, transparent 50%),
    linear-gradient(135deg, rgba(15,31,51,0.7) 0%, rgba(26,58,92,0.4) 60%, rgba(15,31,51,0.7) 100%);
  z-index: 1;
}
.page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: white;
}
.page-hero-content .headline { color: white; }
.page-hero-content .headline .accent { color: var(--gold-300); }
.page-hero-content .eyebrow { color: var(--gold-300); }
.page-hero-content .lead {
  color: rgba(255,255,255,0.85);
  margin: 0 auto;
}

/* Coral/gold stripe — sits between sections, like GEF's coral bar */
.gold-stripe {
  height: 4px;
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-300) 50%, var(--gold-500) 100%);
}

/* ───────────────────────────────────────────────────────────────
   8. SECTIONS — the rhythm
   ─────────────────────────────────────────────────────────────── */
.section {
  padding: 5rem 0;
}
.section-lg { padding: 7rem 0; }
.section-sm { padding: 3rem 0; }

.section-cream { background: var(--cream-soft); }
.section-warm { background: linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%); }
.section-navy { background: var(--navy-900); color: white; }
.section-navy .headline { color: white; }
.section-navy .eyebrow { color: var(--gold-300); }
.section-navy p { color: rgba(255,255,255,0.8); }
.section-photo { position: relative; color: white; }
.section-photo > .section-photo-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.section-photo > .section-photo-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,31,51,0.85) 0%, rgba(26,58,92,0.7) 100%);
}
.section-photo > .container,
.section-photo > .container-narrow,
.section-photo > .container-wide { position: relative; z-index: 1; }
.section-photo .headline { color: white; }
.section-photo .eyebrow { color: var(--gold-300); }
.section-photo p { color: rgba(255,255,255,0.85); }

/* Section header — eyebrow + headline + lead, optionally centered */
.section-header { margin-bottom: 3rem; }
.section-header-center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; margin-bottom: 3rem; }

/* ───────────────────────────────────────────────────────────────
   9. CARDS
   ─────────────────────────────────────────────────────────────── */

/* Generic media card */
.card {
  position: relative;
  background: white;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}
.card-image { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #e5e5e5; transition: transform var(--dur-slower) var(--ease-out); }
.card:hover .card-image { transform: scale(1.05); }
.card-body { padding: 1.5rem; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--navy-900); margin: 0 0 0.5rem; }
.card-meta { font-size: 0.75rem; font-weight: 600; color: var(--gold-600); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.5rem; }
.card-excerpt { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }

/* Program card — vertical, photo + navy overlay reveal */
.program-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 1.5rem;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.program-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.program-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--navy-800); transition: transform 0.8s var(--ease-out); }
.program-card:hover .program-card-bg { transform: scale(1.08); }
.program-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(15,31,51,0.4) 40%, rgba(15,31,51,0.95) 100%);
}
.program-card-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem;
  color: white;
  transition: transform var(--dur-slow) var(--ease-out);
}
.program-card:hover .program-card-content { transform: translateY(-6px); }
.program-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: white; margin: 0; }
.program-card-desc { color: rgba(255,255,255,0.85); font-size: 0.9375rem; margin-top: 0.25rem; }

/* GEF-style donation/tier tile — filled icon square + amount + label + body */
.tier-tile {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 1.25rem;
  padding: 2rem;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tier-tile:hover {
  transform: translateY(-4px);
  border-color: var(--gold-400);
  box-shadow: var(--shadow-lg);
}
.tier-tile-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: white;
  border-radius: 0.875rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-gold);
}
.tier-tile-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--navy-900);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.tier-tile-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-600);
  margin-bottom: 0.75rem;
}
.tier-tile-desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Stat tile — for the home page stats / impact section */
.stat {
  text-align: center;
  padding: 2rem 1rem;
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--gold-500);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.is-dark .stat-number { color: var(--gold-300); }
.stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.is-dark .stat-label { color: rgba(255,255,255,0.75); }

/* ───────────────────────────────────────────────────────────────
   Team cards — circular photo + name + role + optional bio.
   Used on /about "The Team" section (Batch E).
   ─────────────────────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (max-width: 480px)  { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  text-align: center;
  padding: 0;
}
.team-card-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, var(--gold-200), var(--navy-700));
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 3px solid var(--gold-400);
  box-shadow: 0 8px 24px rgba(15, 31, 51, 0.18);
  position: relative;
}
.team-card-photo .team-card-fallback {
  opacity: 0.5;
}
.team-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--navy-900);
  margin-bottom: 0.25rem;
  line-height: 1.2;
}
.team-card-role {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}
.team-card-bio {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.is-dark .team-card-name { color: white; }
.is-dark .team-card-bio  { color: rgba(255,255,255,0.75); }

/* ───────────────────────────────────────────────────────────────
   10. CONTACT ITEMS — GEF-inspired soft circle icons + text
   ─────────────────────────────────────────────────────────────── */
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
}
.contact-item-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-600);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.contact-item:hover .contact-item-icon {
  background: linear-gradient(135deg, var(--gold-100), var(--gold-200));
  transform: scale(1.05);
}
.contact-item-icon svg { width: 22px; height: 22px; }
.contact-item-body { flex: 1; min-width: 0; }
.contact-item-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--navy-900);
  margin: 0 0 0.125rem;
}
.contact-item-value {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0;
}
.contact-item-value a { color: var(--text-muted); }
.contact-item-value a:hover { color: var(--gold-600); }

/* ───────────────────────────────────────────────────────────────
   11. FORMS
   ─────────────────────────────────────────────────────────────── */
.form-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
.form-label .required { color: #ef4444; margin-left: 2px; }
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 16px;
  background: white;
  color: var(--text);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.9375rem;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.form-input:hover, .form-textarea:hover, .form-select:hover { border-color: #cbd5e1; }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(200,146,42,0.12);
  background: #fffdf8;
}
.form-input::placeholder, .form-textarea::placeholder { color: #94a3b8; }
.form-textarea { min-height: 120px; resize: vertical; }

/* ───────────────────────────────────────────────────────────────
   12. NEWS / DOCUMENT / GALLERY GRIDS
   ─────────────────────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Document card */
.doc-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.doc-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-400);
  box-shadow: var(--shadow-lg);
}
.doc-card-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
.doc-card-ext {
  font-weight: 700;
  font-size: 0.75rem;
  padding: 12px 10px;
  border-radius: 10px;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
  letter-spacing: 0.05em;
}
.doc-card-ext.pdf  { background: #fee2e2; color: #991b1b; }
.doc-card-ext.docx { background: #dbeafe; color: #1e40af; }
.doc-card-ext.doc  { background: #dbeafe; color: #1e40af; }
.doc-card-ext.xlsx { background: #d1fae5; color: #065f46; }
.doc-card-ext.pptx { background: #fed7aa; color: #9a3412; }
.doc-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--navy-900); margin: 0; line-height: 1.3; }
.doc-card-meta { font-size: 0.75rem; color: var(--text-soft); margin-top: 0.25rem; }
.doc-card-desc { color: var(--text-muted); font-size: 0.9375rem; margin: 0.75rem 0 1.25rem; }
.doc-card-actions { display: flex; gap: 0.5rem; margin-top: auto; }
.doc-card-actions .btn-primary, .doc-card-actions .btn-outline { flex: 1; padding: 10px 16px; font-size: 0.8125rem; }

/* ───────────────────────────────────────────────────────────────
   13. FOOTER
   ─────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  background: var(--navy-950);
  color: white;
  padding: 4rem 0 2rem;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-300) 50%, var(--gold-500) 100%);
}
.site-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 900px) {
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 540px) {
  .site-footer-grid { grid-template-columns: 1fr; }
}
.site-footer h4 {
  color: var(--gold-300);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0 0 1.25rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.625rem; }
.site-footer a {
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
  font-size: 0.9375rem;
}
.site-footer a:hover { color: var(--gold-300); padding-left: 6px; }
.site-footer-brand { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.site-footer-brand svg { width: 44px; height: 44px; }
.site-footer-brand .logo-text { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; color: white; }
.site-footer-brand .logo-sub { font-size: 0.625rem; color: var(--gold-300); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 2px; }
.site-footer-tagline { color: rgba(255,255,255,0.6); font-size: 0.9375rem; line-height: 1.5; max-width: 26ch; }
.site-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
}
.site-footer-bottom .heart { color: var(--gold-400); animation: heart 1.5s ease-in-out infinite; }
@keyframes heart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* The rotating star in the footer brand */
.footer-star {
  animation: gentle-rotate 20s linear infinite;
  transform-origin: center;
}
@keyframes gentle-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ───────────────────────────────────────────────────────────────
   14. SCROLL REVEAL — legacy `.reveal` class
   Older pages (about, programs, sponsor, volunteer, contact, schools)
   use the .reveal class. We map it onto the new dramatic motion system
   so those pages feel as alive as the home page without rewriting
   every section. Distance and duration match [data-reveal="up"].
   Existing data-delay values still drive the stagger. */
html.js .reveal {
  opacity: 0;
  transform: translate3d(0, 80px, 0);
  will-change: opacity, transform;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.reveal[data-delay="50"]  { transition-delay:  50ms; }
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="150"] { transition-delay: 150ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="250"] { transition-delay: 250ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="350"] { transition-delay: 350ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }
.reveal[data-delay="500"] { transition-delay: 500ms; }
.reveal[data-delay="600"] { transition-delay: 600ms; }
.reveal[data-delay="700"] { transition-delay: 700ms; }
.reveal[data-delay="800"] { transition-delay: 800ms; }

/* ───────────────────────────────────────────────────────────────
   15. BACK-TO-TOP
   ─────────────────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
  z-index: 40;
  display: flex; align-items: center; justify-content: center;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-gold-lg); }
.back-to-top svg { width: 20px; height: 20px; }

/* ───────────────────────────────────────────────────────────────
   16. TOAST
   ─────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 1.5rem; right: 1.5rem;
  padding: 14px 22px;
  border-radius: 12px;
  background: var(--navy-800);
  color: white;
  font-weight: 500;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-xl);
  z-index: 9999;
  transform: translateX(120%);
  transition: transform var(--dur-slow) var(--ease-spring);
  max-width: 380px;
}
.toast.is-visible { transform: translateX(0); }
.toast.is-success { background: linear-gradient(135deg, #1a6b3c, #2d8a55); }
.toast.is-error { background: linear-gradient(135deg, #c0392b, #e74c3c); }

/* ───────────────────────────────────────────────────────────────
   17. UTILITIES
   ─────────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-gold { color: var(--gold-600); }
.text-navy { color: var(--navy-900); }
.text-muted { color: var(--text-muted); }
.font-display { font-family: var(--font-display); }
.italic { font-style: italic; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.flex-wrap { flex-wrap: wrap; }

.hidden { display: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Section quick variants */
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-row-centered { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ───────────────────────────────────────────────────────────────
   19. RESPONSIVE refinements
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .nav-link { padding: 0.45rem 0.625rem; font-size: 0.8125rem; }
}
@media (max-width: 1100px) {
  .nav-link.is-secondary { display: none; }
}
@media (max-width: 768px) {
  .section { padding: 3.5rem 0; }
  .section-lg { padding: 5rem 0; }
  .page-hero { padding: 7rem 0 3rem; min-height: 320px; }
  .grid-4 { grid-template-columns: 1fr; }
  .form-card { padding: 1.75rem; }
  .pullquote { font-size: 1.125rem; padding: 1.5rem 1.5rem 1.5rem 2.5rem; }
}
@media (max-width: 640px) {
  .container { padding: 0 1.25rem; }
  .btn-primary, .btn-outline, .btn-outline-white, .btn-glass { padding: 12px 22px; font-size: 0.875rem; }
}

/* About intro grid stacks at narrow widths */
@media (max-width: 900px) {
  [id="aboutIntroGrid"] { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
}
@media (max-width: 700px) {
  [id="statsGrid"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SPA HOMEPAGE PRESERVATION LAYER
   These styles preserve the original SPA design language for the home
   page — the section-bg image/video system, the hero carousel, and the
   custom card variants. They sit at the end so they take precedence
   over the MPA defaults when needed.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Hero carousel (full-screen, with Ken Burns) ──────────────── */
.hero-carousel {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.2s ease-in-out, visibility 1.2s;
}
.hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: kenBurns 12s ease-out forwards;
}
@keyframes kenBurns {
  0%   { transform: scale(1.0) translate(0,0); }
  100% { transform: scale(1.15) translate(-1.5%,-1.5%); }
}
.hero-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,31,51,0.85) 0%, rgba(26,58,92,0.6) 50%, rgba(15,31,51,0.85) 100%);
  z-index: 2;
}
.hero-slide-content {
  position: relative; z-index: 3;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  color: white;
  padding: 0 1.5rem;
  max-width: 1280px; margin: 0 auto;
}
/* The global `h1 { color: var(--navy-900) }` rule wins over the parent's
   `color: white` because it targets the element directly. Re-assert white
   for any h1 inside the hero so the headline stays white over the dark
   image background. The .text-gradient span on the last word still wins
   because it uses background-clip:text (no `color` involved). */
.hero-slide-content h1 { color: white; }
.hero-slide.active .hero-slide-content > * {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 1s ease-out forwards;
}
.hero-slide.active .hero-slide-content > *:nth-child(1) { animation-delay: 0.3s; }
.hero-slide.active .hero-slide-content > *:nth-child(2) { animation-delay: 0.5s; }
.hero-slide.active .hero-slide-content > *:nth-child(3) { animation-delay: 0.7s; }
.hero-slide.active .hero-slide-content > *:nth-child(4) { animation-delay: 0.9s; }
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.hero-arrow:hover {
  background: rgba(200,146,42,0.3);
  border-color: rgba(200,146,42,0.5);
  transform: translateY(-50%) scale(1.1);
}
.hero-arrow.left { left: 24px; }
.hero-arrow.right { right: 24px; }

.hero-dots {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 12px;
}
.hero-dot {
  width: 40px; height: 4px;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 2px;
}
.hero-dot.active { background: #c8922a; width: 60px; }

.hero-scroll {
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 5;
  color: white; opacity: 0.7;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  animation: heroScrollBounce 2s infinite;
}
@keyframes heroScrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-10px); }
}

/* ─── Section background system (image OR video) ──────────────── */
.section-bg {
  position: relative;
  background-size: cover; background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}
@media (max-width: 768px) { .section-bg { background-attachment: scroll; } }
.section-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,31,51,var(--bg-overlay-alpha, 0.85)) 0%, rgba(26,58,92,var(--bg-overlay-alpha, 0.85)) 100%);
  z-index: 2;
}
.section-bg.light::before {
  background: linear-gradient(135deg, rgba(253,248,237,var(--bg-overlay-alpha, 0.92)) 0%, rgba(255,255,255,var(--bg-overlay-alpha, 0.95)) 100%);
}
.section-bg.gold::before {
  background: linear-gradient(135deg, rgba(200,146,42,var(--bg-overlay-alpha, 0.85)) 0%, rgba(130,84,26,var(--bg-overlay-alpha, 0.85)) 100%);
}
.section-bg > *:not(.section-bg-video) { position: relative; z-index: 3; }
.section-bg.has-video { background-image: none !important; }
.section-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

/* ─── Page header (per-page hero) — image OR video ──────────── */
.page-header {
  position: relative;
  padding: 8rem 0 4rem;
  overflow: hidden;
  min-height: 360px;
  display: flex; align-items: center;
}
.page-header-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 1;
}
.page-header-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,31,51,var(--bg-overlay-alpha, 0.85)) 0%, rgba(26,58,92,var(--bg-overlay-alpha, 0.7)) 100%);
  z-index: 2;
}
.page-header-bg.has-video { background-image: none !important; }
.page-header-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
.page-header > *:not(.page-header-bg) { position: relative; z-index: 3; }

/* ─── Cards (SPA variants) ─────────────────────────────────── */
.media-card {
  position: relative;
  border-radius: 1.25rem; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s;
  background: white;
}
.media-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(26,58,92,0.4);
}
.media-card-image {
  aspect-ratio: 16/10;
  background-size: cover; background-position: center;
  transition: transform 0.6s ease;
  background-color: #e5e5e5;
}
.media-card:hover .media-card-image { transform: scale(1.06); }

.program-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 1.5rem; overflow: hidden;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.program-card:hover { transform: translateY(-12px) scale(1.02); }
.program-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.7s ease;
  background-color: #1a3a5c;
}
.program-card:hover .program-card-bg { transform: scale(1.1); }
.program-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(15,31,51,0.4) 40%, rgba(15,31,51,0.95) 100%);
}
.program-card-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2rem;
  color: white;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 1rem; overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  background: #e5e5e5;
}
.gallery-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
}
.gallery-item-image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.6s ease;
}
.gallery-item:hover .gallery-item-image { transform: scale(1.1); }
.gallery-item-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-category-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  color: white;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 2;
}

/* Text gradient — used on hero last-word */
.text-gradient {
  background: linear-gradient(135deg,#c8922a 0%,#f0c050 50%,#c8922a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── SPA Nav overrides — bring back the original nav design ─── */
.nav-classic {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  transition: all 0.5s;
}
.nav-classic.nav-transparent {
  background: transparent !important;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: transparent;
}
.nav-classic.nav-transparent .nav-link {
  color: white !important;
}
.nav-classic.nav-transparent .nav-link:hover {
  color: #f0c050 !important;
}
.nav-classic.nav-transparent .logo-text {
  color: white !important;
}
.nav-classic.nav-transparent .menu-toggle {
  color: white !important;
}
.nav-classic.nav-scrolled {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.nav-classic.nav-scrolled .nav-link {
  color: #1a3a5c;
}
.nav-classic.nav-scrolled .nav-link:hover {
  color: #c8922a;
}
.nav-classic.nav-scrolled .logo-text {
  color: #1a3a5c;
}
.nav-classic .nav-link {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.3s;
  text-decoration: none;
  border-radius: 0;        /* No pill — original SPA style */
  background: transparent;  /* No pill — original SPA style */
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION CHOREOGRAPHY — multi-directional, staggered entrance system
   ═══════════════════════════════════════════════════════════════════
   Each section of the home page reveals as it enters the viewport, with:
     - Multi-directional entry — different elements come from different
       sides (left for text columns, right for images, up for grid cards,
       zoom for emphasis moments). This gives the page a feeling of
       being "assembled" rather than fading in flat.
     - Staggered timing — cards in a grid arrive sequentially (90ms apart)
       so the eye can follow them, not just see a popcorn flash.
     - Dramatic distance + slow duration — 80-100px of travel over 900ms
       so the motion is actually felt, not just glimpsed. Earlier versions
       used 40px / 700ms and the animation was nearly invisible.
     - Proper hand-off — the elements that are already on screen at page
       load reveal after a small 200ms delay (the hero finishes first,
       then the rest cascade). No pop-in.
   ═══════════════════════════════════════════════════════════════════ */

/* Base state for any element marked [data-reveal] — hidden, primed to move.
   This rule only applies once <html> has the .js class (added by layout.js),
   so no-JS visitors see content normally. */
html.js [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Direction-specific starting transforms — these are the "fly from" positions.
   Dramatic enough to be felt: 80-100px on the axes, 0.85 scale on zoom. */
html.js [data-reveal="up"]    { transform: translate3d(0, 80px, 0); }
html.js [data-reveal="down"]  { transform: translate3d(0, -80px, 0); }
html.js [data-reveal="left"]  { transform: translate3d(-100px, 0, 0); }
html.js [data-reveal="right"] { transform: translate3d(100px, 0, 0); }
html.js [data-reveal="zoom"]  { transform: scale(0.85); }
html.js [data-reveal="fade"]  { transform: none; }

/* Combined direction + scale variants — for moments that need both. */
html.js [data-reveal="up-zoom"]   { transform: translate3d(0, 60px, 0) scale(0.92); }
html.js [data-reveal="left-zoom"] { transform: translate3d(-80px, 0, 0) scale(0.92); }

/* Revealed state — everything snaps back to its natural place. */
html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Explicit stagger delays — applied via data-stagger="N" on individual
   elements. Each step is 90ms (the sweet spot — fast enough to feel like
   one orchestrated motion, slow enough that each item registers). */
html.js [data-stagger="1"]  { transition-delay:  90ms; }
html.js [data-stagger="2"]  { transition-delay: 180ms; }
html.js [data-stagger="3"]  { transition-delay: 270ms; }
html.js [data-stagger="4"]  { transition-delay: 360ms; }
html.js [data-stagger="5"]  { transition-delay: 450ms; }
html.js [data-stagger="6"]  { transition-delay: 540ms; }
html.js [data-stagger="7"]  { transition-delay: 630ms; }
html.js [data-stagger="8"]  { transition-delay: 720ms; }
html.js [data-stagger="9"]  { transition-delay: 810ms; }
html.js [data-stagger="10"] { transition-delay: 900ms; }
html.js [data-stagger="11"] { transition-delay: 990ms; }
html.js [data-stagger="12"] { transition-delay: 1080ms; }

/* Auto-stagger for grids — when a parent has [data-reveal-group], every
   direct child with [data-reveal] gets a delay based on its DOM position.
   Used by dynamic content (cards rendered from API data) where assigning
   data-stagger="N" manually isn't practical. */
html.js [data-reveal-group] > [data-reveal]:nth-child(1)  { transition-delay:    0ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(2)  { transition-delay:  100ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(3)  { transition-delay:  200ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(4)  { transition-delay:  300ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(5)  { transition-delay:  400ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(6)  { transition-delay:  500ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(7)  { transition-delay:  600ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(8)  { transition-delay:  700ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(9)  { transition-delay:  800ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(10) { transition-delay:  900ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(11) { transition-delay: 1000ms; }
html.js [data-reveal-group] > [data-reveal]:nth-child(12) { transition-delay: 1100ms; }

/* Reduced motion — disable all reveal effects for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM 2026 — restoration layer
   Brings back three pieces the SPA had that didn't make it into the MPA:
     1. .btn-secondary — the glass-effect button used on the hero next
        to the gold Donate button ("Enroll Your School").
     2. Nav 2026 effects — sliding gold underline on hover/active,
        refined scrolled-nav with blur+saturate, gold accent border.
     3. Hero refinements — gold-gradient hero dots that expand to 56px
        and glow when active; glass hero arrows that fill gold on hover.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── (1) Secondary button — glass on dark backgrounds ─────────── */
.btn-secondary {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  transition:
    transform var(--dur-base) var(--ease-spring),
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-2px);
  color: white;
}
.btn-secondary:active {
  transform: translateY(0);
  transition-duration: var(--dur-fast);
}

/* ─── (2) Nav link — sliding gold underline on hover/active ─────
   The SPA's nav used a 2px-tall gold gradient bar that animates in
   width from the center of each link. Same effect, applied to the
   .nav-link class our MPA nav already uses. */
.nav-link {
  position: relative;
  transition: color var(--dur-base, 260ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #c8922a, #eebf4d);
  transform: translateX(-50%);
  transition: width var(--dur-base, 260ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  border-radius: 2px;
  pointer-events: none;
}
.nav-link:hover::after,
.nav-link.is-active::after,
.nav-link.active::after {
  width: calc(100% - 24px);
}
/* On transparent nav (over hero), use a lighter gold so it pops against navy */
.nav-classic.nav-transparent .nav-link:hover {
  color: #f0c050 !important;
}

/* Refined scrolled-nav — frosted glass, gold accent bottom border */
.nav-classic.nav-scrolled {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 8px 24px -8px rgba(15,31,51,0.08);
  border-bottom: 1px solid rgba(200,146,42,0.08);
}

/* ─── (3) Hero dots — gold gradient, expand when active ───────── */
.hero-dot {
  width: 32px;
  height: 3px;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: all var(--dur-base, 260ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  border-radius: 999px;
  border: none;
  padding: 0;
}
.hero-dot:hover {
  background: rgba(255,255,255,0.5);
}
.hero-dot.active {
  background: linear-gradient(90deg, #c8922a, #eebf4d);
  width: 56px;
  box-shadow: 0 0 16px rgba(200,146,42,0.6);
}

/* ─── (3) Hero arrows — glass, fill gold on hover ──────────────── */
.hero-arrow {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  transition: all var(--dur-base, 260ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.hero-arrow:hover {
  background: rgba(200,146,42,0.85);
  border-color: rgba(200,146,42,1);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 24px rgba(200,146,42,0.4);
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — restored SPA features
   The footer adds: full bg image/video support (data-bg-section="footer"),
   a 10% decorative overlay on top of that, a multi-email contact list,
   a social icons row, a newsletter signup band, and an Admin link.
   These styles layer on top of the base .site-footer rules.
   ═══════════════════════════════════════════════════════════════════ */

/* When the footer has a section-bg image set, the inherited section-bg::before
   overlay would compete with the .site-footer base navy color. We give the
   overlay a navy tint via --bg-overlay-alpha (which hydrateFooter sets from
   the admin's saved overlay_opacity). Without an admin-set bg, the original
   --navy-950 background shows through unchanged. */
.site-footer.section-bg {
  background-attachment: scroll;       /* fixed-attachment makes no sense in a short footer */
  background-color: var(--navy-950);   /* fallback if bg image fails to load */
}

/* The .section-bg::before overlay paints a navy gradient over the bg image.
   We tint slightly darker than the standard so footer text stays readable. */
.site-footer.section-bg::before {
  background: linear-gradient(135deg,
    rgba(7, 15, 29, var(--bg-overlay-alpha, 0.92)) 0%,
    rgba(15, 31, 51, var(--bg-overlay-alpha, 0.94)) 100%);
}

/* Re-apply the gold top-border line that .site-footer normally has, since
   .section-bg::before consumed our base ::before. We use ::after for this. */
.site-footer.section-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-300) 50%, var(--gold-500) 100%);
  z-index: 4;   /* above the overlay so it always shows */
  pointer-events: none;
}

/* Decorative overlay — soft texture on top of the bg, faded to 10%.
   z-index 1 so it sits on top of the bg image but under the ::before navy. */
.site-footer-overlay {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.10;
  z-index: 1;
  pointer-events: none;
}

/* All content goes above the overlays (z-index 3+ — the section-bg system
   already does this for direct children, but we make it explicit). */
.site-footer.section-bg > .container {
  position: relative;
  z-index: 5;
}

/* Multi-email contact list — already targets .site-footer ul li a, so the
   existing styles do most of the work. We just add the small-eyebrow label
   above each email address. */
.footer-email-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.125rem;
}
/* When an email <li> has a label, vertically align the icon to the top */
#footerContact a {
  align-items: flex-start;
}
#footerContact a svg {
  margin-top: 0.2em;
}

/* Social icons row — rounded buttons in navy, gold on hover */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--navy-200);
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-spring);
}
.footer-social-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.footer-social-icon:hover {
  background: var(--gold-500);
  border-color: var(--gold-400);
  color: white;
  transform: translateY(-2px);
}

/* Newsletter signup band — sits between the column grid and the bottom row,
   separated by a thin divider line above. */
.site-footer-newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin: 1rem 0 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 700px) {
  .site-footer-newsletter { grid-template-columns: 1fr; gap: 1rem; }
}
.site-footer-newsletter-form {
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 480px) {
  .site-footer-newsletter-form { flex-direction: column; }
}
.site-footer-newsletter-form input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: white;
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  outline: none;
}
.site-footer-newsletter-form input:focus {
  border-color: var(--gold-400);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(200, 146, 42, 0.18);
}
.site-footer-newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.site-footer-newsletter-msg {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--navy-200);
  min-height: 1.2em;
}
.site-footer-newsletter-msg.is-success { color: var(--gold-300); }
.site-footer-newsletter-msg.is-error   { color: #f87171; }

/* Admin link — small, muted, gold on hover */
.site-footer-admin-link {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.site-footer-admin-link:hover {
  color: var(--gold-400);
  border-bottom-color: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════════
   DONATION FORM — Paystack-powered mobile money + card flow
   ═══════════════════════════════════════════════════════════════════ */

/* Amount-chip selector — preset amount buttons (GHS 50, 100, 200, ...) */
.donate-chip-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
}
.donate-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem;
  background: white;
  border: 2px solid var(--rule, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.donate-chip:hover {
  border-color: var(--gold-400);
  background: var(--gold-50);
  transform: translateY(-2px);
}
.donate-chip.is-active {
  border-color: var(--gold-500);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: white;
  box-shadow: 0 4px 14px rgba(200,146,42,0.3);
}
.donate-chip-currency {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.donate-chip-amount {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  margin-top: 0.25rem;
}

/* Trust row below the donate submit button — security signals */
.donate-trust-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule, #e5e7eb);
}
.donate-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-soft, #64748b);
}
.donate-trust-item svg {
  color: var(--gold-600);
  flex-shrink: 0;
}

/* Thank-you page — receipt box (the table-like summary block) */
.receipt-box {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--gold-50, #fdf8ed);
  border: 1px solid var(--gold-100, #faedca);
  border-radius: 12px;
  text-align: left;
}
.receipt-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  border-bottom: 1px dashed var(--gold-200, #f4d989);
}
.receipt-row:last-child { border-bottom: none; }
.receipt-row span:first-child {
  color: var(--text-soft, #64748b);
  font-weight: 500;
}
.receipt-row span:last-child {
  font-weight: 600;
  color: var(--navy-900);
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
}

/* Spinner — used on /donate (loading) and /donate/thank-you (verifying) */
@keyframes spin { to { transform: rotate(360deg); } }

/* Inline form-error message */
.form-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 1rem 0;
  font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE HERO ENTRANCE — auto-animate every page's hero block
   Every page (about, contact, sponsor, etc.) has the same .page-hero
   structure with .eyebrow, .headline, .lead in order. Rather than
   tagging each one manually with [data-reveal], we animate them via
   pure CSS keyframes that fire on page load. This means every page
   feels alive the moment you land on it, without any JS observation
   needed (so it works regardless of viewport or scroll position).
   ═══════════════════════════════════════════════════════════════════ */
@keyframes pageHeroEnter {
  0%   { opacity: 0; transform: translate3d(0, 30px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

html.js .page-hero .page-hero-content > * {
  opacity: 0;
  animation: pageHeroEnter 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Cascade: eyebrow → headline → lead → buttons → any extras */
html.js .page-hero .page-hero-content > *:nth-child(1) { animation-delay: 100ms; }
html.js .page-hero .page-hero-content > *:nth-child(2) { animation-delay: 250ms; }
html.js .page-hero .page-hero-content > *:nth-child(3) { animation-delay: 400ms; }
html.js .page-hero .page-hero-content > *:nth-child(4) { animation-delay: 550ms; }
html.js .page-hero .page-hero-content > *:nth-child(5) { animation-delay: 700ms; }
html.js .page-hero .page-hero-content > *:nth-child(6) { animation-delay: 850ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.js .page-hero .page-hero-content > * {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ─── Sibling pages: section heading staggering ─────────────────
   For sections that have the .section-header-center or similar wrapper
   with eyebrow/headline/lead inside, give the children a subtle internal
   stagger so the heading components feel composed rather than monolithic.
   This applies when the wrapper itself has .reveal or [data-reveal]. */
html.js .reveal .eyebrow,
html.js .reveal .headline,
html.js .reveal .lead,
html.js [data-reveal] .eyebrow,
html.js [data-reveal] .headline,
html.js [data-reveal] .lead {
  /* Inherit the parent's reveal — no separate transform.
     Just sit inside the parent's slide-up animation, no special treatment. */
}

/* ═══════════════════════════════════════════════════════════════════
   BATCH A — Mobile responsive overrides for inline-styled grids.
   
   Several inner pages use inline style="grid-template-columns:..."
   for their two-column layouts (founder story, contact, programme detail
   rows) and multi-column grids (districts, roadmap). Because inline
   styles outrank stylesheet rules, only `!important` can override them.
   
   Without these rules, all of the affected grids stay in their desktop
   column layout on mobile — text gets squeezed into narrow vertical
   strips next to the visual, overflows the viewport, and gets clipped
   on the right.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── About-page grids: base (desktop) column definitions ─────────
   These columns used to live in inline style="" attributes on the
   markup, which made them impossible to override with media queries
   (inline styles beat stylesheet rules). They now live here so the
   responsive collapses below can take over cleanly at narrow widths. */
#aboutFounderGrid { grid-template-columns: 1.1fr 1fr; }
#districtsGrid    { grid-template-columns: repeat(4, 1fr); }

/* ─── Two-column layouts: collapse to single column at ≤900px ────── */
/* 900px chosen (not 768) because these 2-col layouts already feel
   cramped at tablet portrait — the side-by-side photo+text needs
   more breathing room than typical 50/50 splits. */
@media (max-width: 900px) {
  #aboutFounderGrid,
  #contactGrid,
  .program-row {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* For .program-row, programmes 2 and 4 have TEXT-FIRST in source order
     (text in column 1, image in column 2). When collapsed on mobile, we
     want the visual to appear ABOVE the text for visual consistency
     across all four programmes. The text block always has
     data-content-block, the visual never does, so:
       - visual (no data-content-block) → order: 1
       - text  (has data-content-block) → order: 2
     Programmes 1 and 3 already have image-first source order, so
     setting order:1 on the visual leaves them unchanged. */
  .program-row > div:not([data-content-block]) { order: 1; }
  .program-row > div[data-content-block]       { order: 2; }

  /* Same logic for aboutFounderGrid: the photo (id="founderPhoto") should
     appear above the founder story text on mobile. The text block has
     data-content-block="about_founder_story". */
  #aboutFounderGrid > #founderPhoto              { order: 1; }
  #aboutFounderGrid > div[data-content-block]    { order: 2; }
}

/* ─── Multi-column tile grids ─────────────────────────────────────── */

/* Districts grid (4 cols desktop) — 2 cols at tablet, 1 col on phone */
@media (max-width: 900px) {
  #districtsGrid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  #districtsGrid { grid-template-columns: 1fr !important; }
}

/* Roadmap grid (5 cols desktop) — 5 is too cramped even at 1024px so
   collapse earlier than the other grids. */
@media (max-width: 1024px) {
  #roadmapGrid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  #roadmapGrid { grid-template-columns: 1fr !important; }
}

/* ─── Smaller gap on very narrow viewports ────────────────────────── */
@media (max-width: 480px) {
  .program-row,
  #aboutFounderGrid,
  #contactGrid {
    gap: 2rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE STICKY DONATE BAR
   The desktop nav has a gold Donate pill, but it is hidden on mobile,
   leaving phone users (most of our traffic) with no always-visible way
   to give. This bar — injected once into <body> by layout.js — docks to
   the bottom of the viewport on mobile only. Hidden ≥769px (desktop nav
   pill covers that case). Sits above the back-to-top button via z-index,
   and we lift the back-to-top button up on mobile so they never overlap.
   ═══════════════════════════════════════════════════════════════════ */
#mobileDonateBar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 45;                 /* above back-to-top (40), below toast/modals */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1rem;
  padding-bottom: calc(0.95rem + env(safe-area-inset-bottom, 0px)); /* iPhone home bar */
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-600) 100%);
  color: white;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 -4px 24px rgba(200,146,42,0.40);
  transition: filter var(--dur-base) var(--ease-out);
}
#mobileDonateBar:hover,
#mobileDonateBar:active { color: white; filter: brightness(1.05); }
#mobileDonateBar svg { flex-shrink: 0; }

/* Show only on mobile; the desktop nav pill handles larger screens. */
@media (min-width: 769px) {
  #mobileDonateBar { display: none; }
}

/* On mobile, raise the back-to-top button so it clears the donate bar. */
@media (max-width: 768px) {
  .back-to-top { bottom: calc(1.5rem + 56px); }
}

/* ═══════════════════════════════════════════════════════════════════
   NAV LOGO SWAP
   The nav is transparent (white text/logo) over the dark homepage hero,
   and solid (navy text/logo) once scrolled or on inner pages. We ship
   both icon images and show whichever matches the nav state — mirroring
   how .logo-text already swaps color.
   ═══════════════════════════════════════════════════════════════════ */
.nav-logo-navy, .nav-logo-white { display: block; }
/* Default (solid nav, e.g. inner pages or scrolled): navy logo. */
.nav-logo-white { display: none; }
/* Transparent nav over the hero: show white, hide navy. */
.nav-classic.nav-transparent .nav-logo-navy { display: none; }
.nav-classic.nav-transparent .nav-logo-white { display: block; }
/* When scrolled, force back to navy even if transparent class lingers. */
.nav-classic.nav-scrolled .nav-logo-navy { display: block; }
.nav-classic.nav-scrolled .nav-logo-white { display: none; }