/* ==========================================================================
   Godfident Giving — single-page site
   Design system: "The Break" (dark, high-contrast, gold accents, Montserrat)
   ========================================================================== */

:root {
  --gold: #c4a55f;
  --gold-deep: #b08f45;
  --white: #ffffff;
  --charcoal: #374151;
  --bg: #0d0d0d;
  --surface: #181818;
  --surface-2: #232323;
  --muted: #cfcfcf;
  --dim: #9a9a9a;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: #374151;
  --gold-gradient: linear-gradient(120deg, #c29644 0%, #cfab5a 14%, #ebd585 38%, #faf5b6 50%, #dead52 66%, #b57f34 84%, #dead52 100%);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 30px;
  --space-xs: 12px;
  --space-sm: 20px;
  --space-md: 40px;
  --space-lg: 60px;
  --space-xl: 76px; /* section rhythm, reduced from the design system's 106px */
  --container: 1180px;
  --nav-h: 76px;
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--white);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Fine grain over the whole page — kills the flat-paint look without reading as an element.
   SVG fractal noise, tiled, held at very low opacity. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

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

section { scroll-margin-top: var(--nav-h); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typography ---------- */

h1, h2, h3 { font-weight: 800; letter-spacing: 0; }

.display {
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.08;
  font-weight: 800;
}

.headline-lg {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.14;
  font-weight: 800;
}

.headline-lg em, .display em { font-weight: 800; }

.headline-md { font-size: 22px; line-height: 26px; font-weight: 700; }
.headline-sm { font-size: 20px; line-height: 24px; font-weight: 700; }

.eyebrow {
  position: relative;
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

/* short gold rule that draws itself beneath each section label */
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 44px;
  height: 2px;
  background-image: var(--gold-gradient);
  background-size: 200% auto;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.22, 0.7, 0.2, 1) 0.25s;
}

/* held back until its section reveals, then draws left to right */
.reveal:not(.in) .eyebrow::after { transform: scaleX(0); }

/* centred section heads get a centred rule */
.section-head.centered .eyebrow::after {
  left: 50%;
  margin-left: -22px;
  transform-origin: center;
}

/* the hero label stays clean */
.hero .eyebrow::after { display: none; }

.lead { font-size: 18px; line-height: 28px; color: var(--muted); }

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

.gold-gradient-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-pill);
  padding: 0 26px;
  height: 48px;
  cursor: pointer;
  border: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

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

.btn-primary {
  position: relative;
  overflow: hidden;
  /* metallic gradient stretched wide: near-solid gold at rest, highlight sweeps in on hover */
  background-image: var(--gold-gradient);
  background-size: 500% auto;
  background-position: 5% center;
  color: #0d0d0d;
  transition: background-position 0.55s ease, transform 0.18s ease, box-shadow 0.3s ease;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 55%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}

.btn-primary:hover {
  background-position: 55% center;
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(196, 165, 95, 0.35);
}

.btn-primary:hover::after {
  animation: btn-sheen 0.8s ease;
}

@keyframes btn-sheen {
  from { left: -80%; opacity: 1; }
  to { left: 130%; opacity: 1; }
}

.btn-secondary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* metallic gold flood that sweeps in from the left on hover */
.btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--gold-gradient);
  background-size: 250% auto;
  background-position: 20% center;
  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
  color: #0d0d0d;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(196, 165, 95, 0.3);
}

.btn-secondary:hover::before { transform: translateX(0); }

.btn-lg { height: 54px; padding: 0 34px; font-size: 15px; }

.btn-text-short { display: none; }

@media (max-width: 640px) {
  .btn-text-full { display: none; }
  .btn-text-short { display: inline; }
}

.btn-tertiary {
  background: none;
  border: none;
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  transition: color 0.18s ease;
}

.btn-tertiary:hover { color: var(--gold); }

.text-link {
  color: var(--gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.18s ease;
}

.text-link:hover { gap: 10px; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(13, 13, 13, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.nav.scrolled {
  border-bottom-color: var(--border);
  background: rgba(13, 13, 13, 0.92);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.nav-logo img, .nav-logo svg { height: 44px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}

.nav-links a:not(.btn) {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.18s ease;
  position: relative;
  padding: 6px 0;
}

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn).active { color: var(--white); }

.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--gold);
  transition: width 0.22s ease;
}

.nav-links a:not(.btn).active::after,
.nav-links a:not(.btn):hover::after { width: 100%; }

.nav .btn { height: 40px; padding: 0 22px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 102;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  margin: 6px auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: calc(var(--nav-h) + 96px) 0 96px;
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(196, 165, 95, 0.16), transparent 65%),
    radial-gradient(ellipse 45% 35% at 82% 18%, rgba(196, 165, 95, 0.06), transparent 70%),
    radial-gradient(ellipse 55% 45% at 12% 70%, rgba(255, 255, 255, 0.09), transparent 72%),
    radial-gradient(ellipse 40% 35% at 88% 78%, rgba(255, 255, 255, 0.075), transparent 70%);
  pointer-events: none;
}

/* slow-drifting smoky light blooms behind the hero content */
.hero::after {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  background:
    radial-gradient(circle 340px at 28% 38%, rgba(255, 255, 255, 0.22), transparent 70%),
    radial-gradient(circle 460px at 74% 60%, rgba(255, 255, 255, 0.12), transparent 70%),
    radial-gradient(circle 260px at 55% 20%, rgba(196, 165, 95, 0.16), transparent 70%);
  filter: blur(45px);
  animation: hero-drift 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hero-drift {
  from { transform: translate3d(-3.5%, -2%, 0) scale(1); }
  to { transform: translate3d(3.5%, 2.5%, 0) scale(1.08); }
}

/* rising gold dust motes */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-particles::before,
.hero-particles::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hero-particles::before {
  background-image:
    radial-gradient(2.6px 2.6px at 12% 85%, rgba(235, 213, 133, 0.7), transparent 60%),
    radial-gradient(2.4px 2.4px at 34% 40%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(2.6px 2.6px at 58% 68%, rgba(235, 213, 133, 0.6), transparent 60%),
    radial-gradient(2.2px 2.2px at 76% 25%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(2.4px 2.4px at 91% 55%, rgba(235, 213, 133, 0.65), transparent 60%);
  background-size: 460px 460px;
  background-repeat: repeat;
  animation: dust-rise-a 22s linear infinite;
}

.hero-particles::after {
  background-image:
    radial-gradient(3.2px 3.2px at 22% 30%, rgba(235, 213, 133, 0.45), transparent 60%),
    radial-gradient(3px 3px at 48% 78%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(3px 3px at 70% 45%, rgba(235, 213, 133, 0.4), transparent 60%),
    radial-gradient(2.6px 2.6px at 88% 82%, rgba(255, 255, 255, 0.38), transparent 60%);
  background-size: 620px 620px;
  background-repeat: repeat;
  animation: dust-rise-b 38s linear infinite;
}

@keyframes dust-rise-a {
  from { background-position: 0 0; }
  to { background-position: 26px -460px; }
}

@keyframes dust-rise-b {
  from { background-position: 0 0; }
  to { background-position: -34px -620px; }
}

.hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }

.hero h1 { margin-bottom: var(--space-sm); }

.hero .lead { max-width: 640px; margin: 0 auto var(--space-md); }

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.play-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font);
  transition: color 0.18s ease;
}

.play-btn:hover { color: var(--gold); }

.play-btn .play-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, background-color 0.18s ease;
  flex: none;
}

.play-btn:hover .play-circle { border-color: var(--gold); background: rgba(196, 165, 95, 0.1); }

.play-btn .play-circle svg { width: 14px; height: 14px; margin-left: 2px; }

/* ---------- Ask bar ---------- */

.ask-bar {
  background: var(--gold);
  color: #0d0d0d;
  padding: 14px 0;
}

.ask-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.ask-bar-inner .sep { margin: 0 18px; opacity: 0.45; }

/* ---------- Stats strip ---------- */

.stats-strip { padding: var(--space-lg) 0; border-bottom: 1px solid var(--border); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.stat { text-align: center; padding: 0 12px; position: relative; }

.stat + .stat::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: 56px;
  width: 1px;
  background: var(--border);
}

.stat .stat-value {
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.1;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
  /* keeps digit widths steady while the count-up runs */
  font-variant-numeric: tabular-nums;
}

.stat .stat-value.gold-value { color: var(--gold); }

.stat .stat-label { font-size: 13px; line-height: 18px; color: var(--dim); }

/* ---------- Section scaffolding ---------- */

.section { position: relative; padding: var(--space-xl) 0; }

/* tinted panels fade in and out at their edges so sections melt together
   instead of stacking as hard-edged bands */

/* barely-perceptible warm/cool wash, alternating section to section — reinforces
   "new chapter" without a visible line. Only palette colors (gold / cool charcoal). */
.section.tone-warm:not(.tinted) {
  background-image: radial-gradient(ellipse 85% 70% at 50% 50%, rgba(196, 165, 95, 0.03), transparent 75%);
}

.section.tone-cool:not(.tinted) {
  background-image: radial-gradient(ellipse 85% 70% at 50% 50%, rgba(55, 65, 81, 0.09), transparent 75%);
}

.section.tinted.tone-warm {
  background:
    linear-gradient(
      180deg,
      rgba(17, 17, 17, 0) 0,
      var(--surface) 90px,
      var(--surface) calc(100% - 90px),
      rgba(17, 17, 17, 0) 100%
    ),
    radial-gradient(ellipse 85% 70% at 50% 50%, rgba(196, 165, 95, 0.03), transparent 75%);
}

.section.tinted.tone-cool {
  background:
    linear-gradient(
      180deg,
      rgba(17, 17, 17, 0) 0,
      var(--surface) 90px,
      var(--surface) calc(100% - 90px),
      rgba(17, 17, 17, 0) 100%
    ),
    radial-gradient(ellipse 85% 70% at 50% 50%, rgba(55, 65, 81, 0.09), transparent 75%);
}

/* faint gold hairline marking each section boundary — draws in left-to-right
   as it scrolls into view, reusing the same reveal mechanism as the eyebrow rules */
.seam {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: min(70%, 640px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 165, 95, 0.4), transparent);
  pointer-events: none;
}

.seam.reveal {
  opacity: 1;
  transform: translateX(-50%) scaleX(0);
  transition: transform 1s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.seam.reveal.in { transform: translateX(-50%) scaleX(1); }

/* soft corner bloom, alternating side to side down the page.
   Pure radial gradients fade to nothing well inside the box, so nothing
   can bleed into the neighbouring section. */
.section-glow::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 0;
  width: 58%;
  height: 62%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06), transparent 68%);
}

.section-glow.glow-gold::before {
  background: radial-gradient(ellipse at center, rgba(196, 165, 95, 0.07), transparent 68%);
}

.section-glow.glow-r::before { left: auto; right: 0; }

/* dual-bloom variant: a second, gold-tinted bloom on the opposite corner —
   same corner-glow family as the rest of the page, but a fuller two-tone
   moment for the section right after the hero */
.section-glow.glow-dual::after {
  content: "";
  position: absolute;
  top: 8%;
  right: 0;
  width: 50%;
  height: 55%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(196, 165, 95, 0.08), transparent 68%);
}

.section-glow > .container { position: relative; z-index: 1; }

/* edge-anchored gold glow — same recipe as Mission/Founder's atmosphere::before:
   the gradient's center sits right at the top edge (not floating mid-box), so
   the visible slice reads as a harder band of light right at the top that
   fades smoothly down into the page toward black. */
.corner-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 20% -5%, rgba(196, 165, 95, 0.2), transparent 65%);
}

.corner-glow.corner-glow-r::before {
  background: radial-gradient(ellipse 78% 65% at 85% -5%, rgba(196, 165, 95, 0.22), transparent 68%);
}

.corner-glow > .container { position: relative; z-index: 1; }

.section-head { max-width: 720px; margin-bottom: var(--space-lg); }

.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

.section-head h2 { margin-bottom: var(--space-sm); }

/* ---------- Letter + Mission ---------- */

.letter-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: start;
}

.letter-body p { color: var(--muted); margin-bottom: 18px; }

.letter-body .letter-callout {
  color: var(--white);
  font-weight: 600;
  font-style: italic;
  border-left: 3px solid var(--gold);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: #2a2a2a;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 26px 0;
}

.letter-sig { margin-top: 16px; }

.letter-sig .sig-img { width: 190px; height: auto; margin-bottom: 12px; }

.letter-sig .sig-name { font-weight: 700; }

.mission-panel h2 { margin-bottom: var(--space-sm); }

.mission-panel > p { color: var(--muted); margin-bottom: var(--space-md); }

.mission-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: var(--space-md);
}

.info-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
}

.info-card h4 {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 700;
}

.info-card p { font-size: 14px; line-height: 22px; color: var(--muted); }

.need-numbers {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}

.need-numbers h4 {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}

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

.need-item { text-align: center; }

.need-item .need-value {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 800;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}

.need-item .need-label { font-size: 12px; line-height: 17px; color: var(--dim); }

/* ---------- Problem ---------- */

.problem-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: start;
}

.problem-copy h2 { margin-bottom: var(--space-sm); }

.problem-copy h2 em { font-style: italic; font-weight: 800; color: var(--gold); }

.problem-copy p { color: var(--muted); margin-bottom: 18px; }

.scripture {
  margin-top: var(--space-md);
  padding: 26px 28px;
  border: 1px solid rgba(196, 165, 95, 0.35);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  font-size: 18px;
  line-height: 28px;
  font-style: italic;
  color: var(--white);
}

.scripture .ref { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--gold); font-weight: 600; }

.problem-points { display: flex; flex-direction: column; gap: 20px; }

.point-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  background: var(--surface-2);
}

.point-card h4 {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}

.point-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.point-head h4 { margin-bottom: 0; }

.point-icon { width: 22px; height: 22px; color: var(--gold); flex: none; }

.point-card p { font-size: 15px; line-height: 23px; color: var(--muted); }

/* ---------- Rhythm ---------- */

.rhythm-banner {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 12px;
  margin-bottom: 96px;
}

/* tighter above the banner, roomier below it, so the loop arrow has breathing space */
#model .section-head { margin-bottom: 28px; }

#model .section-head .lead { font-weight: 700; color: var(--white); }

.rhythm-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

.rhythm-loop {
  position: absolute;
  top: -90px;
  left: 0;
  z-index: 0;
  display: none;
  pointer-events: none;
  overflow: visible;
}

.rhythm-loop > path {
  fill: none;
  stroke: rgba(196, 165, 95, 0.88);
  stroke-width: 2.5;
}

.rhythm-loop marker path { fill: #c4a55f; stroke: none; }

#rhythmLoopPath {
  stroke-dasharray: 7 9;
  animation: loop-flow 2.2s linear infinite;
}

@keyframes loop-flow {
  to { stroke-dashoffset: -64; }
}

/* one-time bright pulse the moment the section first scrolls into view —
   the ambient flow above is easy to miss at a glance, this gives every
   visitor one unmissable "watch this" moment before settling back down */
.rhythm-loop.intro-play {
  animation: loop-intro-glow 2.4s ease-out 1;
}

@keyframes loop-intro-glow {
  0% {
    filter:
      drop-shadow(0 0 3px rgba(255, 255, 255, 0.85))
      drop-shadow(0 0 10px rgba(196, 165, 95, 0.95));
  }
  100% { filter: drop-shadow(0 0 0 rgba(196, 165, 95, 0)); }
}

.rhythm-grid, .rhythm-aside { position: relative; z-index: 1; }

.rhythm-repeat {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 14px;
}

.rhythm-repeat svg { width: 20px; height: 20px; flex: none; }

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

.rhythm-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  background: var(--surface);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.rhythm-step:hover { border-color: rgba(196, 165, 95, 0.5); transform: translateY(-3px); }

.rhythm-step .step-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.rhythm-step h4 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.rhythm-step p { font-size: 14px; line-height: 22px; color: var(--muted); }

.rhythm-aside {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  border: 1px solid rgba(196, 165, 95, 0.4);
  border-radius: var(--radius-md);
  /* opaque base so the loop arrow passes behind this card */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), var(--bg);
  padding: 30px 26px;
}

.rhythm-aside h4 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 10px;
}

.rhythm-aside .aside-title { font-size: 22px; line-height: 27px; font-weight: 800; margin-bottom: 14px; }

.rhythm-aside p { font-size: 14px; line-height: 22px; color: var(--muted); margin-bottom: 12px; }

.rhythm-aside p strong { color: var(--white); }

/* ---------- Gift builds / funds ---------- */

.funds-top {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: start;
  margin-bottom: var(--space-lg);
}

.funds-goal {
  border: 1px solid rgba(196, 165, 95, 0.4);
  border-radius: var(--radius-md);
  padding: 32px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
}

.funds-goal .eyebrow { margin-bottom: 18px; }

.funds-goal .goal-amount { font-size: clamp(34px, 3.4vw, 46px); line-height: 1.25; font-weight: 800; margin-bottom: 14px; }

.funds-goal p { font-size: 15px; line-height: 23px; color: var(--muted); margin-bottom: 20px; }

.funds-label {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dim);
  margin-bottom: 26px;
}

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

.fund-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 26px 24px;
}

.fund-item .fund-pct { font-size: 26px; font-weight: 800; color: var(--gold); margin-bottom: 10px; }

.fund-item .fund-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}

/* bars sweep from zero to their share when the grid reveals, staggered left to right */
.fund-item .fund-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold-gradient);
  border-radius: 2px;
  transition: width 1.1s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.funds-grid.in .fund-item .fund-bar i { width: var(--w, 0); }

.fund-item:nth-child(1) .fund-bar i { transition-delay: 0.35s; }
.fund-item:nth-child(2) .fund-bar i { transition-delay: 0.47s; }
.fund-item:nth-child(3) .fund-bar i { transition-delay: 0.59s; }
.fund-item:nth-child(4) .fund-bar i { transition-delay: 0.71s; }
.fund-item:nth-child(5) .fund-bar i { transition-delay: 0.83s; }
.fund-item:nth-child(6) .fund-bar i { transition-delay: 0.95s; }

.fund-item h4 {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}

.fund-item p { font-size: 14px; line-height: 21px; color: var(--muted); }

/* ---------- Photo marquee ---------- */

.photo-marquee {
  overflow: hidden;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: marquee 48s linear infinite;
  padding: 14px 0;
}

.photo-marquee.reverse .marquee-track { animation-direction: reverse; }

.marquee-track:hover { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.photo-tile {
  width: 240px;
  height: 160px;
  flex: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-2);
  filter: grayscale(1);
  transition: filter 0.35s ease;
}

.photo-tile:hover { filter: grayscale(0); }

/* ---------- Return ---------- */

.return-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: var(--space-lg);
}

.return-stat {
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 38px 24px 32px;
  background: var(--surface-2);
}

.return-stat .rs-value {
  font-size: clamp(36px, 3.8vw, 52px);
  line-height: 1.2;
  font-weight: 800;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}

.return-stat .rs-label { font-size: 15px; font-weight: 600; margin-bottom: 6px; }

.return-stat .rs-sub { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.impact-table { width: 100%; border-collapse: collapse; min-width: 640px; }

.impact-table caption {
  caption-side: top;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.impact-table th, .impact-table td {
  padding: 16px 22px;
  text-align: left;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
}

.impact-table thead th {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  background: var(--surface);
}

.impact-table tbody tr:last-child th,
.impact-table tbody tr:last-child td { border-bottom: none; }

/* rows cascade in as the table arrives */
.impact-table tbody tr {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.table-wrap.in .impact-table tbody tr { opacity: 1; transform: none; }

.impact-table tbody tr:nth-child(1) { transition-delay: 0.12s; }
.impact-table tbody tr:nth-child(2) { transition-delay: 0.22s; }
.impact-table tbody tr:nth-child(3) { transition-delay: 0.32s; }
.impact-table tbody tr:nth-child(4) { transition-delay: 0.42s; }
.impact-table tbody tr:nth-child(5) { transition-delay: 0.52s; }

.impact-table tbody th { font-weight: 600; color: var(--white); }

.impact-table tbody td { color: var(--muted); font-variant-numeric: tabular-nums; }

.impact-table tbody td:last-child { color: var(--gold); font-weight: 700; }

.center-cta { text-align: center; }

/* ---------- Sustainability flow ---------- */

.flow-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-bottom: var(--space-lg);
}

/* the engine: a light pulse travels step 1 → step 5 and repeats */
.flow-track {
  position: absolute;
  top: 16px;
  left: 39px;
  right: 39px;
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  z-index: 0;
}

.flow-track span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(196, 165, 95, 0.95), transparent);
  animation: flow-pulse 4.4s linear infinite;
}

@keyframes flow-pulse {
  from { transform: translateX(-100%); }
  to { transform: translateX(455%); }
}

.flow-step { position: relative; z-index: 1; padding: 0 22px; }

/* each dot catches the light as the pulse reaches it */
.flow-step .flow-dot { animation: flow-dot 4.4s ease-in-out infinite; }

.flow-step:nth-child(1) .flow-dot { animation-delay: 0.15s; }
.flow-step:nth-child(2) .flow-dot { animation-delay: 0.95s; }
.flow-step:nth-child(3) .flow-dot { animation-delay: 1.75s; }
.flow-step:nth-child(4) .flow-dot { animation-delay: 2.55s; }
.flow-step:nth-child(5) .flow-dot { animation-delay: 3.35s; }

@keyframes flow-dot {
  0%, 14%, 100% {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 rgba(196, 165, 95, 0);
  }
  5% {
    border-color: rgba(196, 165, 95, 0.95);
    box-shadow: 0 0 18px rgba(196, 165, 95, 0.4);
  }
}

.flow-step + .flow-step { border-left: 1px solid var(--border); }

.flow-step .flow-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.55);
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.flow-step h4 {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
  min-height: 34px;
}

.flow-step p { font-size: 13.5px; line-height: 21px; color: var(--muted); }

/* ---------- Trajectory ---------- */

.trajectory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: var(--space-lg);
}

.trajectory-col {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 30px 26px;
}

.trajectory-col.highlight {
  border: 1.5px solid rgba(196, 165, 95, 0.6);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), var(--surface-2) 55%);
  animation: highlight-pulse 2.2s ease-in-out infinite;
}

/* gold "heartbeat" — this is the present-tense column, so it reads as live/active.
   Wider swing (dim trough, bright peak) and a layered glow for more punch. */
@keyframes highlight-pulse {
  0%, 100% {
    border-color: rgba(196, 165, 95, 0.28);
    box-shadow: 0 0 0 rgba(196, 165, 95, 0);
    transform: scale(1);
  }
  50% {
    border-color: rgba(235, 213, 133, 1);
    box-shadow: 0 0 22px rgba(196, 165, 95, 0.6), 0 0 50px rgba(196, 165, 95, 0.35);
    transform: scale(1.018);
  }
}

.trajectory-col h4 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 18px;
}

.trajectory-col ul { list-style: none; }

.trajectory-col li {
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
  padding: 10px 0 10px 20px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trajectory-col li:last-child { border-bottom: none; }

.trajectory-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- Skool callout ---------- */

.skool-callout {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 44px;
  align-items: center;
}

.skool-callout .skool-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.skool-callout h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin-bottom: 8px; }

.skool-callout .skool-vision { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 18px; }

.skool-callout .skool-vision span { color: var(--gold); }

.skool-callout p { font-size: 14.5px; line-height: 23px; color: var(--muted); margin-bottom: 14px; }

.skool-links { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 8px; }

/* plain inline flow instead of inline-flex here: lets the arrow wrap and stay
   glued to the last word instead of drifting off to the right of the block
   when the link text wraps onto two lines on narrow screens */
.skool-links .text-link { display: inline; }
.skool-links .text-link span { margin-left: 6px; }

.qr-box {
  text-align: center;
}

.qr-img {
  width: 176px;
  height: 176px;
  margin: 0 auto 14px;
  border-radius: var(--radius-md);
  display: block;
}

.qr-box figcaption { font-size: 13px; line-height: 19px; color: var(--dim); }

/* ---------- Leadership ---------- */

.leader-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: start;
}

.leader-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.leader-name { font-size: 26px; font-weight: 800; }

.leader-role { font-size: 14px; color: var(--gold); font-weight: 600; margin-bottom: 4px; }

.leader-tags {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
  margin: 14px 0 22px;
}

.leader-bio p { font-size: 15px; line-height: 24px; color: var(--muted); margin-bottom: 16px; }

.leader-quote {
  margin-top: 26px;
  padding: 24px 28px;
  border-left: 3px solid var(--gold);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: #2a2a2a;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  font-size: 16px;
  line-height: 26px;
  color: var(--white);
}

.accordion { display: flex; flex-direction: column; gap: 14px; }

.accordion details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color 0.22s ease, background-color 0.22s ease, transform 0.22s ease;
}

.accordion details[open] { border: 2.5px solid rgba(196, 165, 95, 0.6); }

.accordion details:not([open]):hover {
  border-color: rgba(196, 165, 95, 0.55);
  background: #202020;
  transform: translateY(-2px);
}

.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.22s ease;
}

.accordion details:not([open]) summary:hover { color: var(--gold); }

.accordion summary::-webkit-details-marker { display: none; }

.accordion summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--gold);
  transition: transform 0.25s ease;
  flex: none;
}

.accordion details[open] summary::after { transform: rotate(45deg); }

.accordion .acc-body { padding: 0 24px 24px; }

.board-member { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }

.board-member:first-child { border-top: none; padding-top: 0; }

.board-member .bm-name { font-weight: 700; font-size: 15px; }

.board-member .bm-title { font-size: 13px; color: var(--gold); line-height: 19px; margin: 3px 0; }

.board-member .bm-desc { font-size: 13.5px; color: var(--muted); line-height: 20px; }

.acc-body > p { font-size: 14px; line-height: 22px; color: var(--muted); }

.acc-body > p + p { margin-top: 12px; }

.acc-body .acc-verse { margin-top: 16px; font-style: italic; color: var(--gold); }

.acc-oversight .bm-name { color: var(--gold); }

.org-role {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dim);
  margin-bottom: 4px;
}

/* ---------- Testimonials ---------- */

.testimonial-carousel { position: relative; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(13, 13, 13, 0.85);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.carousel-arrow svg { width: 16px; height: 16px; }

.carousel-arrow:hover { background: var(--gold); color: #0d0d0d; }

.carousel-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.carousel-arrow.prev { left: -14px; }
.carousel-arrow.next { right: -14px; }

.testimonial-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 340px);
  gap: 22px;
  overflow-x: auto;
  padding: 6px 6px 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #3d3d3d transparent;
}

.testimonial-row::-webkit-scrollbar { height: 4px; }

.testimonial-row::-webkit-scrollbar-track { background: transparent; }

.testimonial-row::-webkit-scrollbar-thumb {
  background: #3d3d3d;
  border-radius: 2px;
}

.testimonial-row::-webkit-scrollbar-thumb:hover { background: #555; }

.testimonial-card {
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}

.testimonial-card .tq-mark {
  font-size: 52px;
  line-height: 0.6;
  font-weight: 800;
  color: var(--gold);
  font-family: Georgia, serif;
  margin-bottom: 20px;
}

.testimonial-card blockquote {
  font-size: 15px;
  line-height: 24px;
  font-style: italic;
  color: var(--white);
  flex: 1;
  margin-bottom: 24px;
}

.testimonial-card .tq-name { font-weight: 700; font-size: 15px; }

.testimonial-card .tq-title { font-size: 13px; color: var(--dim); line-height: 19px; }

/* ---------- Final CTA ---------- */

.final-cta {
  position: relative;
  text-align: center;
  padding: var(--space-xl) 0;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(196, 165, 95, 0.14), transparent 65%);
  pointer-events: none;
}

.final-cta .container { position: relative; max-width: 820px; }

.final-cta h2 { margin-bottom: var(--space-sm); }

.final-cta .lead { margin-bottom: var(--space-sm); }

.final-verse { font-style: italic; color: var(--gold); font-size: 17px; margin-bottom: var(--space-md); }

.trust-line {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.trust-line .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

.final-cta .fine-print { margin-top: var(--space-md); font-size: 13.5px; color: var(--dim); }

.final-cta .fine-print a { display: inline-flex; margin-top: 10px; }

/* ---------- Contact ---------- */

/* hero-style atmosphere, bookending the page — kept a touch brighter than the
   hero's for a little more contrast against the panel below it */
#contact > .container { position: relative; z-index: 1; }

.contact-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.contact-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 115%, rgba(196, 165, 95, 0.2), transparent 65%),
    radial-gradient(ellipse 45% 35% at 14% 20%, rgba(196, 165, 95, 0.09), transparent 70%),
    radial-gradient(ellipse 55% 45% at 86% 25%, rgba(255, 255, 255, 0.11), transparent 72%);
}

.contact-atmosphere::after {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(circle 340px at 25% 62%, rgba(255, 255, 255, 0.25), transparent 70%),
    radial-gradient(circle 420px at 78% 38%, rgba(255, 255, 255, 0.15), transparent 70%),
    radial-gradient(circle 260px at 55% 88%, rgba(196, 165, 95, 0.2), transparent 70%);
  filter: blur(45px);
  animation: hero-drift 14s ease-in-out infinite alternate;
}

/* ---------- Leadership & Stewardship ---------- */

/* same hero/contact atmosphere language, recomposed for this layout:
   blooms weighted toward the top and the leader bio column rather than
   centered, so the effect reads as its own moment, not a repeat */
.founder-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.founder-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% -5%, rgba(196, 165, 95, 0.18), transparent 65%),
    radial-gradient(ellipse 50% 40% at 95% 30%, rgba(255, 255, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 55% 45% at 30% 105%, rgba(255, 255, 255, 0.1), transparent 72%);
}

.founder-atmosphere::after {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(circle 300px at 18% 30%, rgba(196, 165, 95, 0.24), transparent 70%),
    radial-gradient(circle 380px at 85% 70%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(circle 240px at 45% 90%, rgba(255, 255, 255, 0.14), transparent 70%);
  filter: blur(48px);
  animation: hero-drift 16s ease-in-out infinite alternate;
}

/* ---------- Mission / Letter ---------- */

/* same full hero/contact/founder atmosphere language — same intensity,
   blooms recomposed for the letter + mission-panel columns here */
.mission-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.mission-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% -5%, rgba(196, 165, 95, 0.28), transparent 65%),
    radial-gradient(ellipse 50% 40% at 5% 35%, rgba(255, 255, 255, 0.19), transparent 70%),
    radial-gradient(ellipse 55% 45% at 70% 105%, rgba(255, 255, 255, 0.16), transparent 72%);
}

.mission-atmosphere::after {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(circle 300px at 82% 30%, rgba(196, 165, 95, 0.36), transparent 70%),
    radial-gradient(circle 380px at 15% 70%, rgba(255, 255, 255, 0.24), transparent 70%),
    radial-gradient(circle 240px at 55% 90%, rgba(255, 255, 255, 0.21), transparent 70%);
  filter: blur(48px);
  animation: hero-drift 16s ease-in-out infinite alternate;
}

.contact-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: #1c1c1c;
  padding: 56px;
  max-width: 900px;
  margin: 0 auto;
}

.contact-panel .field input,
.contact-panel .field textarea { background: #121212; }

.contact-panel .chip-option span { background: #141414; }

.contact-panel h2 { margin-bottom: 12px; }

.contact-panel > p { color: var(--muted); margin-bottom: var(--space-md); max-width: 640px; }

.form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}

.field input, .field textarea {
  width: 100%;
  height: 48px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--white);
  font-family: var(--font);
  font-size: 15px;
  padding: 0 20px;
  transition: border-color 0.18s ease;
}

.field textarea { height: auto; min-height: 110px; padding: 14px 20px; border-radius: 16px; resize: vertical; }

.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }

.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.3); }

.interest-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}

.chip-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }

.field-message { margin-bottom: 28px; }

.chip-option { position: relative; }

.chip-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.chip-option span {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
}

.chip-option input:checked + span {
  background: var(--gold);
  border-color: var(--gold);
  color: #0d0d0d;
  font-weight: 600;
}

.chip-option input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex-wrap: wrap; }

.form-note { font-size: 13px; color: var(--dim); margin-right: auto; }

.form-success {
  display: none;
  border: 1px solid #75e706;
  background: rgba(196, 165, 95, 0.08);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  color: var(--white);
  font-size: 15px;
  margin-top: 20px;
}

.form-success.visible { display: block; }

.form-error {
  display: none;
  border: 1px solid rgba(217, 74, 74, 0.5);
  background: rgba(217, 74, 74, 0.08);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  color: var(--white);
  font-size: 15px;
  margin-top: 20px;
}

.form-error.visible { display: block; }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--border); padding: var(--space-lg) 0 var(--space-sm); background: var(--bg); }

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 26px;
}

.footer-brand { max-width: 480px; }

.footer-brand img { height: 40px; width: auto; margin-bottom: 16px; }

/* screen fallback used only in print — see css/print.css */
.print-logo-text { display: none; }

.footer-brand p { font-size: 14px; line-height: 22px; color: var(--dim); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.footer-bottom .foot-sep { margin: 0 14px; opacity: 0.5; }

.footer-bottom a { transition: color 0.18s ease; }

.footer-bottom a:hover { color: var(--gold); }

/* ---------- Video modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal.open { display: flex; }

.modal-box {
  position: relative;
  width: min(880px, 100%);
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
}

.modal-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); }

.modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  background: none;
  border: none;
  color: var(--white);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}

.modal-close:hover { color: var(--gold); }

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .rhythm-loop path { animation: none; }
  .rhythm-loop.intro-play { animation: none; }
  .btn-primary:hover::after { animation: none; }
  .hero::after { animation: none; }
  .hero-particles::before, .hero-particles::after { animation: none; }
  .flow-track span, .flow-step .flow-dot { animation: none; }
  .fund-item .fund-bar i { transition: none; width: var(--w, 0); }
  .impact-table tbody tr { opacity: 1; transform: none; transition: none; }
  .eyebrow::after { transition: none; transform: scaleX(1); }
  .trajectory-col.highlight { animation: none; transform: none; }
  .contact-atmosphere::after { animation: none; }
  .founder-atmosphere::after { animation: none; }
  .mission-atmosphere::after { animation: none; }
  .seam.reveal { transition: none; transform: translateX(-50%) scaleX(1); }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .section { padding: 58px 0; }
  .letter-grid, .problem-grid, .leader-grid, .funds-top { grid-template-columns: 1fr; gap: 48px; }
  .rhythm-layout { grid-template-columns: 1fr; }
  .rhythm-aside { position: static; }
  .rhythm-loop { display: none !important; }
  .rhythm-repeat { display: flex; }
  .rhythm-grid { grid-template-columns: repeat(2, 1fr); }
  /* stacked layout: the horizontal rail no longer applies, but the dots
     still catch the light in sequence so the pulse idea survives on phones */
  .flow-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .flow-track { display: none; }
  .flow-step { padding: 0; }
  .flow-step + .flow-step { border-left: none; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 16px; }
  .stat + .stat::before { display: none; }
  .trajectory-grid { grid-template-columns: 1fr; }
  .skool-callout { grid-template-columns: 1fr; }
  .qr-box { text-align: left; }
  .qr-img { margin: 0 0 14px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--bg);
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 101;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a:not(.btn) { font-size: 16px; }
}

@media (max-width: 720px) {
  .section { padding: 46px 0; }
  .hero { padding: calc(var(--nav-h) + 64px) 0 64px; }
  .return-stats { grid-template-columns: 1fr; }
  .mission-cards { grid-template-columns: 1fr; }
  .rhythm-grid { grid-template-columns: 1fr; }
  .funds-grid { grid-template-columns: 1fr; }
  .flow-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-panel { padding: 32px 24px; }
  .need-grid { grid-template-columns: 1fr; gap: 24px; }
  .ask-bar-inner { flex-direction: column; gap: 4px; }
  .ask-bar-inner .sep { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .skool-callout { padding: 28px 24px; }
  .qr-box { text-align: center; }
  .qr-img { margin: 0 auto 14px; }
}