/* =================================================================
 * Leima's Sole — Pitch Deck Stylesheet
 * Mobile-first. Scroll-snap navigation. Brand-driven.
 * ================================================================= */

/* ---------- Brand tokens ---------- */
:root {
  --coral:    #E84A1F;
  --coral-2:  #D63E16;
  --navy:     #3B5BA5;
  --navy-2:   #2D4682;
  --cream:    #F2EEE5;
  --cream-2:  #EAE4D6;
  --ink:      #1F1F1F;
  --ink-soft: #4A4A4A;
  --ink-mute: #8A8A8A;

  --card-accent-bg:    rgba(59, 91, 165, 0.08);
  --card-accent-border: rgba(59, 91, 165, 0.25);
  --slide-tint:        rgba(234, 228, 214, 0.4);

  /* Theme-aware overlays. In light mode these are near-black with very
     low alpha — subtle hairlines and fills over cream surfaces. In dark
     mode (overridden below) they flip to near-white so they stay visible
     against the dark background. Previously these were hardcoded as
     rgba(31,31,31,...) throughout the file, which made borders and the
     slider track go invisible in dark mode. */
  --hairline:        rgba(31, 31, 31, 0.08);
  --hairline-strong: rgba(31, 31, 31, 0.18);

  --serif: "Playfair Display", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --slide-pad-block: clamp(2.5rem, 6vw, 5rem);
  --slide-pad-inline: clamp(1.5rem, 5vw, 5rem);

  --max-width: 76rem;
  --radius: 18px;
  --radius-lg: 28px;

  --t-fast: 220ms;
  --t-base: 460ms;
  --t-slow: 800ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Dark mode — flip the color tokens only; layout/typography tokens
   stay shared. Shape gradients and a few hardcoded rgba surfaces are
   overridden lower in the file. */
:root[data-theme="dark"] {
  --coral:    #FF7A55;
  --coral-2:  #E66B49;
  --navy:     #7A9DE6;
  --navy-2:   #5C7DC8;
  --cream:    #14151A;
  --cream-2:  #1F2026;
  --ink:      #ECE7DA;
  --ink-soft: #BCB8AC;
  --ink-mute: #7E7D78;

  --card-accent-bg:    rgba(122, 157, 230, 0.12);
  --card-accent-border: rgba(122, 157, 230, 0.35);
  --slide-tint:        rgba(31, 32, 38, 0.55);

  --hairline:        rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.22);
}

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding: 0;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  background: var(--cream);
  color: var(--ink);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  background: var(--cream);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
a:hover, a:focus-visible { border-bottom-color: currentColor; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- Deck container ---------- */
.deck { width: 100%; }

/* ---------- Slide ---------- */
.slide {
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--slide-pad-block) var(--slide-pad-inline);
  position: relative;
  overflow: hidden;
  background: transparent;
  z-index: 1; /* sit above the fixed .shapes layer */
}

.slide__inner {
  width: 100%;
  max-width: var(--max-width);
  position: relative;
  z-index: 2;
}

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

.slide__inner--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

@media (min-width: 880px) {
  .slide__inner--split {
    grid-template-columns: 1fr 1fr;
  }
  .slide__inner--split-reverse > .split__media { order: 1; }
  .slide__inner--split-reverse > .split__text { order: 2; }
}

.split__text > * + * { margin-top: 1.25rem; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 24px 60px -24px rgba(31,31,31,0.25);
}
.split__media { position: relative; }

/* ---------- Typography ---------- */
.kicker {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 1.25rem;
}

.display-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 3.2vw + 1.5rem, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.display-heading em {
  color: var(--coral);
  font-style: italic;
}
.display-heading--center { text-align: center; }
.display-heading--xl { font-size: clamp(3rem, 6vw + 1rem, 7rem); }

.body-text {
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.lede {
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 2rem;
  max-width: 50ch;
}

.footnote {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 2rem;
  max-width: 70ch;
}
.footnote--center { margin-left: auto; margin-right: auto; text-align: center; }
.footnote a { color: var(--ink-soft); border-bottom-color: rgba(74,74,74,0.3); }

.placeholder {
  background: rgba(232, 74, 31, 0.08);
  border-bottom: 1px dashed var(--coral);
  padding: 0 0.25em;
  color: var(--coral);
  font-style: italic;
}

/* ---------- Floating shapes (ambient background) ---------- */
.shapes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
}
.shape--lg { width: clamp(380px, 42vw, 620px); height: clamp(380px, 42vw, 620px); }
.shape--md { width: clamp(260px, 28vw, 420px); height: clamp(260px, 28vw, 420px); }
.shape--sm { width: clamp(180px, 18vw, 280px); height: clamp(180px, 18vw, 280px); }

.shape--coral {
  background: radial-gradient(circle at 35% 35%, rgba(232, 74, 31, 0.55), rgba(232, 74, 31, 0) 70%);
}
.shape--navy {
  background: radial-gradient(circle at 35% 35%, rgba(59, 91, 165, 0.45), rgba(59, 91, 165, 0) 70%);
}
.shape--cream {
  background: radial-gradient(circle at 35% 35%, rgba(255, 218, 175, 0.6), rgba(255, 218, 175, 0) 70%);
}

/* Each shape gets its own slow drift animation. Different durations
   and delays produce a parallax-ish floating effect. */
.shape:nth-child(1) { animation: drift-a 28s ease-in-out infinite; }
.shape:nth-child(2) { animation: drift-b 34s ease-in-out infinite; animation-delay: -8s; }
.shape:nth-child(3) { animation: drift-c 40s ease-in-out infinite; animation-delay: -14s; }
.shape:nth-child(4) { animation: drift-a 24s ease-in-out infinite; animation-delay: -4s; }
.shape:nth-child(5) { animation: drift-b 32s ease-in-out infinite; animation-delay: -18s; }

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, -40px) scale(1.08); }
  66%      { transform: translate(-30px, 50px) scale(0.94); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-50px, 30px) scale(0.96); }
  66%      { transform: translate(40px, -60px) scale(1.1); }
}
@keyframes drift-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(70px, -50px) scale(1.06); }
}

/* ---------- Squiggles ---------- */
.squiggle { position: absolute; pointer-events: none; }
.squiggle--hero {
  /* Hidden. Earlier iterations (centered behind the wordmark, then
     anchored as a corner signature) both interfered with the address
     line's legibility on web and print. The cover holds together
     without it; the wordmark + cream backdrop are enough. */
  display: none;
}
.squiggle--accent { width: 80px; height: 80px; }
.squiggle--top-right { top: -10px; right: -10px; }
.squiggle--closing {
  width: clamp(280px, 60vw, 600px);
  height: auto;
  position: static;
  margin: 0 auto 2rem;
  display: block;
  opacity: 0.9;
}

/* =================================================================
 * SLIDE 0 — HOOK
 * ================================================================= */
.slide--hook {
  text-align: center;
}
.hook-heading {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(3rem, 9vw + 1rem, 9.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 auto;
  color: var(--ink);
  max-width: 12ch;
}
.hook-heading br { display: inline; }
.hook-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.2vw + 0.95rem, 1.6rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 28ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.hook-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  opacity: 0.85;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  border: 0;
  padding: 0.5rem;
}
.hook-scroll:hover, .hook-scroll:focus-visible {
  opacity: 1;
  transform: translateY(2px);
  border-bottom: 0;
}
.hook-scroll svg { animation: hook-bounce 1.8s ease-in-out infinite; }
@keyframes hook-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* =================================================================
 * SLIDE 1 — TITLE
 * ================================================================= */
.slide--title {
  text-align: center;
}
.slide--title .slide__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  position: relative;
}

.title-meta {
  position: absolute;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--coral);
}
.title-meta--top-left { top: 0; left: 0; }
.title-meta--top-right { top: 0; right: 0; }

.wordmark {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--serif);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wordmark__line {
  display: block;
  font-size: clamp(4rem, 13vw + 1rem, 11rem);
}
.wordmark__line--top { color: var(--coral); }
.wordmark__line--bottom {
  color: var(--navy);
  margin-top: -0.15em;
  margin-left: 0.25em;
}

.title-tagline {
  position: relative;
  z-index: 2;
  margin: 2rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1vw + 0.85rem, 1.4rem);
  color: var(--ink-soft);
  max-width: 30ch;
}

.title-contact {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.75rem;
}
.title-contact__sep { color: var(--ink-mute); }
.title-contact a { color: var(--ink-soft); }
.title-contact a:hover { color: var(--coral); }

/* =================================================================
 * DEDICATION (optional)
 * ================================================================= */
.slide--dedication {
  /* subtle accent if dedication slide is enabled */
  background-image: linear-gradient(180deg, transparent, var(--slide-tint));
}
.dedication-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
  color: var(--navy);
  margin: 0.5rem 0 2rem;
  letter-spacing: -0.02em;
}
.dedication-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1vw + 0.9rem, 1.4rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 36ch;
  margin: 0 auto;
}

/* =================================================================
 * SLIDE 2 — PROBLEM
 * ================================================================= */
/* =================================================================
 * SLIDE 3 — SOLUTION
 * ================================================================= */
.slide--solution {
  background-image: linear-gradient(180deg, transparent, var(--slide-tint));
}

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2.5rem 0;
}
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.pillar {
  background: var(--cream);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  border: 1px solid var(--hairline);
}
.pillar__num {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--coral);
  line-height: 1;
  opacity: 0.85;
}
.pillar__title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  /* Right padding clears the absolute-positioned .pillar__num that
     sits in the card's top-right corner. Without this, longer titles
     like "Distributed forever" wrap underneath the numeral. */
  padding-right: 2.5rem;
  color: var(--navy);
}
.pillar__text {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.solution-tagline {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.2vw + 0.9rem, 1.5rem);
  color: var(--coral);
  margin: 1rem 0 0;
}

/* =================================================================
 * SLIDE 4 — ROADMAP
 * ================================================================= */

.roadmap {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  position: relative;
}
@media (min-width: 920px) {
  .roadmap {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  .roadmap::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(to right, var(--navy) 0%, var(--navy) 75%, transparent 100%);
    opacity: 0.3;
    z-index: 0;
  }
}

.roadmap__phase {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  z-index: 1;
}
@media (min-width: 920px) {
  .roadmap__phase { flex-direction: column; gap: 1rem; }
}

.roadmap__node {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
}
.roadmap__phase--forever .roadmap__node {
  background: var(--coral);
}

.roadmap__title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.roadmap__date {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 0.5rem;
}
.roadmap__text {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}
.roadmap__text em { color: var(--coral); font-style: italic; font-weight: 500; }

/* Per-phase scroll reveal. Each phase fades + slides in as it enters
   view; later phases inherit a staggered delay so the four nodes don't
   pop in at exactly the same instant when the whole slide enters view.
   The .is-visible class is set by the per-phase IntersectionObserver
   in script.js. No-JS fallback: phases visible by default. */
html.js-ready .roadmap__phase {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.js-ready .roadmap__phase.is-visible {
  opacity: 1;
  transform: none;
}
html.js-ready .roadmap__phase:nth-child(2).is-visible { transition-delay: 0.08s; }
html.js-ready .roadmap__phase:nth-child(3).is-visible { transition-delay: 0.16s; }
html.js-ready .roadmap__phase:nth-child(4).is-visible { transition-delay: 0.24s; }

/* Phase 4 trailing line: visual echo of "forever" — a fading run of
   shorter copies of the phase 4 text, each dimmer than the last. */
.roadmap__forever-echo {
  display: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0.5rem 0 0;
}
.roadmap__forever-echo span {
  display: block;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.roadmap__phase--forever.is-visible .roadmap__forever-echo span:nth-child(1) {
  opacity: 0.7; transition-delay: 0.5s;
}
.roadmap__phase--forever.is-visible .roadmap__forever-echo span:nth-child(2) {
  opacity: 0.45; transition-delay: 0.9s;
}
.roadmap__phase--forever.is-visible .roadmap__forever-echo span:nth-child(3) {
  opacity: 0.22; transition-delay: 1.3s;
}
@media (min-width: 920px) {
  .roadmap__forever-echo { display: block; }
}

/* =================================================================
 * SLIDE 5 — SERVICE OVERVIEW
 * ================================================================= */
.slide--service {
  background-image: linear-gradient(180deg, transparent, var(--slide-tint));
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2.5rem 0 0;
}
@media (min-width: 720px) {
  .service-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.product-card { text-align: center; }
.product-card__media {
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(31,31,31,0.18);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-card__season {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 0.5rem;
}
.product-card__title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.product-card__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* =================================================================
 * SLIDE 6 — FINANCIAL ENGINE
 * ================================================================= */

.finance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem 0;
  align-items: start;
}
@media (min-width: 920px) {
  .finance-grid { grid-template-columns: 1fr 1.2fr; gap: 3rem; }
}

.finance-pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.finance-pillars li {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 1rem;
  border-left: 3px solid var(--coral);
}
.finance-pillars strong {
  color: var(--ink);
  font-weight: 600;
}

.finance-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 480px) {
  .finance-cards { grid-template-columns: 1fr 1fr; }
}

.finance-card {
  background: var(--cream-2);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--hairline);
}
.finance-card--accent {
  background: var(--card-accent-bg);
  color: var(--ink);
  border: 1px solid var(--card-accent-border);
  box-shadow: inset 4px 0 0 var(--navy);
}
.finance-card--accent dt { color: var(--ink-mute); }
.finance-card--accent dd { color: var(--ink); }

.finance-card__year {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--coral);
}
.finance-card--accent .finance-card__year { color: var(--navy); }

.finance-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
}
.finance-card dt {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.finance-card dd {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =================================================================
 * SLIDE 7 — FOUNDER
 * ================================================================= */
.slide--founder {
  background-image: linear-gradient(180deg, transparent, var(--slide-tint));
}
.founder-photo {
  aspect-ratio: 3 / 4;
  object-position: center top;
}
.founder-role {
  font-family: var(--serif);
  font-style: italic;
  color: var(--coral);
  font-size: 1.1rem;
  margin: -1rem 0 1.5rem;
}

.pull-quote {
  margin: 2rem 0;
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 4px solid var(--coral);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.2vw + 1rem, 1.6rem);
  line-height: 1.4;
  color: var(--navy);
  quotes: "\201C" "\201D";
}
.pull-quote::before { content: open-quote; }
.pull-quote::after { content: close-quote; }

/* =================================================================
 * SLIDE 8 — BOARD
 * ================================================================= */

.board-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0 0;
}
@media (min-width: 560px) {
  .board-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (min-width: 880px) {
  .board-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.board-card {
  text-align: center;
}
.board-card__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--cream-2);
  margin: 0 auto 1rem;
  overflow: hidden;
  border: 3px solid var(--cream);
  box-shadow: 0 8px 24px -8px rgba(31,31,31,0.2);
}
.board-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.board-card__photo--placeholder {
  background: linear-gradient(135deg, var(--cream-2) 0%, rgba(59,91,165,0.12) 100%);
  position: relative;
}
.board-card__photo--placeholder::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  border: 2px dashed var(--ink-mute);
  border-radius: 50%;
  opacity: 0.4;
}
.board-card__name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--ink);
}
.board-card__role {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 0.4rem;
}
.board-card__bio {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

/* =================================================================
 * SLIDE 9 — GROWTH POTENTIAL
 * ================================================================= */
.slide--growth {
  background-image: linear-gradient(180deg, transparent, var(--slide-tint));
}

.growth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2.5rem 0 0;
}
@media (min-width: 720px) {
  .growth-grid { grid-template-columns: 1fr 1fr; }
}

.growth-card { text-align: center; }
.growth-card__media {
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  margin-bottom: 1.5rem;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(31,31,31,0.18);
}
.growth-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.growth-card__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--navy);
}
.growth-card__text {
  margin: 0;
  color: var(--ink-soft);
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}

/* =================================================================
 * SLIDE 10 — HOW TO GIVE
 * ================================================================= */

.give-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2.5rem 0 0;
}
@media (min-width: 720px) {
  .give-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}
@media (min-width: 1024px) {
  .give-grid { grid-template-columns: repeat(4, 1fr); }
}

.give-card {
  background: var(--cream-2);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Positioning context for the stretched-link overlay below — a click
     anywhere on a card with a CTA follows that card's link. */
  position: relative;
}
.give-icon {
  width: 36px; height: 36px;
  color: var(--coral);
  margin-bottom: 1rem;
}
.give-card__title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--navy);
}
.give-card__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}
.give-card__text strong { color: var(--ink); font-weight: 600; }

/* Stretched-link pattern (Bootstrap-style): the CTA anchor's ::after overlay
   covers the whole card so the entire card is the click target, while the <a>
   itself stays a real, keyboard-focusable link. Cards without a CTA (e.g. the
   By Check card) have no .give-card__cta and so remain non-interactive. */
.give-card--link { cursor: pointer; }
.give-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Anchored to .give-card (position: relative) — stretches over the full card. */
}
/* Visible keyboard-focus ring on the card when its CTA link is focused, since
   the focusable text is small and the click target is now the whole card. */
.give-card--link:focus-within {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* =================================================================
 * SLIDE 11 — IN SUMMARY (closing summary before Thank You)
 * ================================================================= */
.slide--summary {
  background-image: linear-gradient(180deg, transparent, var(--slide-tint));
  text-align: center;
}
.slide--summary .kicker { text-align: center; }
.lede--center {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* =================================================================
 * SLIDE 12 — THANK YOU
 * ================================================================= */
.slide--thanks {
  text-align: center;
}
.thanks-wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 1vw + 1rem, 1.7rem);
  color: var(--navy);
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.thanks-tagline {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1vw + 0.95rem, 1.4rem);
  color: var(--coral);
  margin: 0 0 2.5rem;
  font-style: italic;
}
.thanks-contact {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.thanks-contact a:hover { color: var(--coral); }

/* ---- Contact form (Netlify) ---- */
.contact-form {
  max-width: 34rem;
  margin: 2.5rem auto 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-form__heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem);
  color: var(--navy);
  margin: 0 0 0.25rem;
  text-align: center;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 560px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact-field__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact-field__input {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.contact-field__input::placeholder { color: var(--ink-mute); }
.contact-field__input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(232, 74, 31, 0.18);
}
textarea.contact-field__input {
  resize: vertical;
  min-height: 6.5rem;
  line-height: 1.5;
}
.contact-form__submit {
  align-self: center;
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--coral);
  border: none;
  border-radius: 999px;
  padding: 0.8rem 2.25rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.contact-form__submit:hover { background: var(--coral-2); }
.contact-form__submit:active { transform: translateY(1px); }
.contact-form__submit:disabled { opacity: 0.6; cursor: default; }
.contact-form__status {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--navy);
}
.contact-form__status--error { color: var(--coral); }

/* =================================================================
 * UI CHROME — progress bar, counter, dot nav
 * ================================================================= */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hairline);
  z-index: 100;
}
.progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--coral), var(--navy));
  transition: width 120ms linear;
}

.counter {
  position: fixed;
  bottom: clamp(1rem, 2vw, 2rem);
  right: clamp(1rem, 2vw, 2rem);
  z-index: 100;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  background: rgba(242,238,229,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.4rem 0.85rem;
  border-radius: 100px;
  border: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
.counter__sep { color: var(--ink-mute); margin: 0 0.25rem; }

.dot-nav {
  position: fixed;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem 0.5rem;
}
@media (min-width: 880px) {
  .dot-nav { display: flex; }
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hairline-strong);
  border: 0;
  display: block;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.dot:hover { background: var(--coral); transform: scale(1.4); }
.dot.is-current {
  background: var(--coral);
  transform: scale(1.5);
}

/* =================================================================
 * Hover & interaction states (desktop / pointer-fine devices)
 * ================================================================= */
@media (hover: hover) and (pointer: fine) {

  /* --- Pillar cards (Solution) --- */
  .pillar {
    transition: transform var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
  }
  .pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px -28px rgba(31,31,31,0.28);
    border-color: rgba(232, 74, 31, 0.18);
  }
  .pillar__num {
    transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
  }
  .pillar:hover .pillar__num {
    transform: scale(1.1) rotate(-4deg);
  }

  /* --- Product cards (Service) --- */
  .product-card__media {
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  }
  .product-card:hover .product-card__media {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px -24px rgba(31,31,31,0.25);
  }
  .product-card__media img {
    transition: transform var(--t-slow) var(--ease);
  }
  .product-card:hover .product-card__media img {
    transform: scale(1.05) rotate(-2deg);
  }

  /* --- Finance cards --- */
  .finance-card {
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  }
  .finance-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px -24px rgba(31,31,31,0.22);
  }

  /* --- Board cards --- */
  .board-card__photo {
    transition: transform var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
  }
  .board-card__photo img {
    transition: transform var(--t-slow) var(--ease);
  }
  .board-card:hover .board-card__photo {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 16px 40px -12px rgba(31,31,31,0.3);
    border-color: var(--coral);
  }
  .board-card:hover .board-card__photo img {
    transform: scale(1.08);
  }
  .board-card__name {
    transition: color var(--t-fast) var(--ease);
  }
  .board-card:hover .board-card__name {
    color: var(--coral);
  }

  /* --- Growth cards --- */
  .growth-card__media {
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  }
  .growth-card:hover .growth-card__media {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px -24px rgba(31,31,31,0.25);
  }
  .growth-card__media img {
    transition: transform var(--t-slow) var(--ease);
  }
  .growth-card:hover .growth-card__media img {
    transform: scale(1.06);
  }

  /* --- Give cards --- */
  .give-card {
    transition: transform var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                background var(--t-base) var(--ease);
  }
  .give-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px -24px rgba(31,31,31,0.28);
    background: var(--cream);
  }
  .give-icon {
    transition: transform var(--t-base) var(--ease), color var(--t-fast) var(--ease);
  }
  .give-card:hover .give-icon {
    transform: rotate(-8deg) scale(1.1);
  }

  /* --- Roadmap nodes --- */
  .roadmap__node {
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  }
  .roadmap__phase:hover .roadmap__node {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 12px 24px -8px rgba(59, 91, 165, 0.4);
  }
  .roadmap__phase--forever:hover .roadmap__node {
    box-shadow: 0 12px 24px -8px rgba(232, 74, 31, 0.45);
  }

  /* --- Wordmark on title slide --- */
  .wordmark {
    transition: transform var(--t-base) var(--ease);
  }
  .wordmark:hover {
    transform: rotate(-1deg) scale(1.02);
  }

  /* --- Contact links --- */
  .title-contact a, .thanks-contact a {
    position: relative;
    transition: color var(--t-fast) var(--ease);
  }
  .title-contact a::after, .thanks-contact a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -2px;
    height: 1px;
    background: var(--coral);
    transition: right var(--t-base) var(--ease);
  }
  .title-contact a:hover::after, .thanks-contact a:hover::after {
    right: 0;
  }
  .title-contact a:hover, .thanks-contact a:hover {
    color: var(--coral);
    border-bottom-color: transparent;
  }
}

/* =================================================================
 * Scroll-in animations
 * Only applied when JS is running (.js-ready set on <html>).
 * Without JS, content is visible by default — never blank.
 * ================================================================= */
.js-ready .slide__inner > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.js-ready .slide.is-visible .slide__inner > * {
  opacity: 1;
  transform: translateY(0);
}
.js-ready .slide.is-visible .slide__inner > *:nth-child(2) { transition-delay: 80ms; }
.js-ready .slide.is-visible .slide__inner > *:nth-child(3) { transition-delay: 160ms; }
.js-ready .slide.is-visible .slide__inner > *:nth-child(4) { transition-delay: 240ms; }
.js-ready .slide.is-visible .slide__inner > *:nth-child(5) { transition-delay: 320ms; }
.js-ready .slide.is-visible .slide__inner > *:nth-child(6) { transition-delay: 400ms; }

/* Safety net: if for any reason a slide hasn't been observed and the
   .is-visible class hasn't fired within ~1.5s of page load, reveal it
   anyway. The opening keyframe matches the animated reveal. */
@keyframes deck-reveal {
  to { opacity: 1; transform: translateY(0); }
}
.js-ready.deck-loaded .slide:not(.is-visible) .slide__inner > * {
  animation: deck-reveal 600ms var(--ease) forwards;
}

/* =================================================================
 * Reduced motion
 * ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .slide__inner > * { opacity: 1; transform: none; }
  .shape { animation: none !important; }
  .hook-scroll svg { animation: none !important; }
}

/* =================================================================
 * Print stylesheet (PDF export)
 * ================================================================= */
@media print {
  /* Pair with the page size set by the PDF generator (US Letter landscape,
     zero margins so each .slide owns its full page rectangle). */
  @page { size: letter landscape; margin: 0; }

  /* Cream backdrop matches the live site instead of stark white. Slides
     that have their own gradient tint paint on top; slides without a
     background (the title slide, the thank-you slide) keep the brand
     cream visible behind them on paper.

     Belt-and-suspenders: force color-adjust:exact on the universal
     selector so Chrome's PDF generator paints the body / slide
     background colors even at the page-margin edges. Without this,
     Chrome can skip backgrounds in "save ink" mode and the bleed
     margin renders white. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  html, body { background: var(--cream); }
  /* Per-slide cream backdrop. The body background alone is unreliable
     in Chrome's print mode at non-default page sizes — when the PDF
     page is bigger than the body content area (as in the 11.25x8.75
     bleed PDF) the extra 0.125in around the body renders white. A
     background-color on every slide guarantees cream fills the full
     slide rectangle. The slide-tint linear-gradient on .slide--X
     sits on top as background-image; cream shows through transparent
     stops.

     Note: this covers the trim area only. The bleed margin around it
     is filled separately by build_pdf.py at PDF-post-processing time —
     pymupdf draws a cream halo into the bleed margin before laying
     down the crop marks. CSS alone can't paint outside the trim area
     in Chrome's headless PDF mode (negative-margin pseudo-elements
     get clipped at the page boundary regardless of overflow:visible). */
  .slide { background-color: var(--cream) !important; }
  html { scroll-snap-type: none; }
  .progress, .counter, .dot-nav, .hook-scroll, .theme-toggle { display: none !important; }

  /* Floating ambient shapes stay. With position:fixed in screen mode,
     Chrome's PDF engine repeats them on every page automatically —
     matching the brand backdrop the live site shows. */

  /* One slide = one page. Fixed height equals the full landscape-letter
     page (zero PDF margins) so each slide's gradient tint bleeds all
     the way to the edges instead of leaving a white footer strip.
     overflow:hidden is the safety net if a slide ever does exceed the
     page; better to trim than to bleed onto a second page. */
  .slide {
    height: 8.5in;
    min-height: 8.5in;
    max-height: 8.5in;
    padding: 1cm 1.5cm 1.4cm;  /* extra bottom room for the in-slide footer */
    box-sizing: border-box;
    overflow: hidden;
    page-break-after: always;
    break-after: page;
  }

  /* In-slide footer (injected by build_pdf.py) — sits ON TOP of the
     slide's gradient tint so the tint reaches the page edge while the
     page-number readout stays legible. */
  .print-footer {
    position: absolute;
    left: 1.5cm;
    right: 1.5cm;
    bottom: 0.5cm;
    display: flex;
    justify-content: space-between;
    font-family: var(--sans);
    font-size: 8.5px;
    color: var(--ink-mute);
    pointer-events: none;
    z-index: 3;
  }
  /* The last slide must NOT request a trailing page break, or Chrome
     emits a blank final page after the Thank-You slide. */
  .slide:last-of-type {
    page-break-after: auto;
    break-after: auto;
  }

  .slide__inner > * { opacity: 1 !important; transform: none !important; }

  /* Defeat scroll-reveal animations that gate content behind a JS-set
     .is-visible class. Without these overrides the roadmap phases stay
     opacity:0 in print (the IntersectionObserver never fires because
     there is no scroll), and an entire slide renders blank. */
  .roadmap__phase,
  .roadmap__forever-echo span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .squiggle { opacity: 0.5; }

  /* Belt-and-suspenders for the contact line on the title and
     thank-you slides: stronger weight + darker color so it survives
     any decorative element behind it. */
  .title-contact, .thanks-contact {
    position: relative;
    z-index: 4;
    color: var(--ink) !important;
    font-weight: 500;
  }
  .title-contact a, .thanks-contact a { color: var(--ink) !important; }

  .finance-card--accent { background: white !important; color: var(--ink) !important; border: 1px solid var(--navy); }
  .finance-card--accent dt, .finance-card--accent dd { color: var(--ink) !important; }
}

/* =================================================================
 * Small-screen tweaks
 * ================================================================= */
@media (max-width: 480px) {
  .slide { padding: 3rem 1.25rem; }
  .title-meta--top-left, .title-meta--top-right { font-size: 0.7rem; }
  .title-contact { font-size: 0.78rem; }
  .pull-quote { padding-left: 1rem; }
}

/* =================================================================
 * Finance-slide principal simulator
 * Lives below the Year 1 / Year 10 static cards. Lets a donor poke at
 * the model: drag the slider and the derived numbers update live.
 * ================================================================= */
.simulator {
  margin: 2.5rem auto 0;
  max-width: 60rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: var(--radius);
  background: var(--cream-2);
  border: 1px solid var(--hairline);
}
.simulator__label {
  margin: 0 0 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.simulator__kicker {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.4vw + 0.6rem, 1.5rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.simulator__sub {
  font-size: 0.85rem;
  color: var(--ink-mute);
  font-style: italic;
}
.simulator__slider-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 38rem;
  margin: 0 auto 0.85rem;
}
.simulator__bound {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.simulator__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--coral) 0%,
    var(--coral) var(--fill, 29%),
    var(--hairline-strong) var(--fill, 29%),
    var(--hairline-strong) 100%
  );
  outline: none;
  cursor: pointer;
}
.simulator__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--coral);
  border: 3px solid var(--cream);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.simulator__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--coral);
  border: 3px solid var(--cream);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  border-color: var(--cream);
}
.simulator__slider:hover::-webkit-slider-thumb,
.simulator__slider:focus::-webkit-slider-thumb { transform: scale(1.15); }
.simulator__slider:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}
.simulator__current {
  text-align: center;
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.simulator__current strong {
  color: var(--coral);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  margin-left: 0.35rem;
}
.simulator__results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .simulator__results { grid-template-columns: 1fr 1fr; }
  /* Single-result variant: one centered card instead of the two-column
     Year 1 / Year 10 layout the original simulator used. */
  .simulator__results--single { grid-template-columns: 1fr; max-width: 24rem; margin: 0 auto; }
}
.simulator__current-sep {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin-left: 0.35rem;
}
/* Cumulative-to-date line — visually subordinate to the per-year stats
   so donors read the annual numbers first and the lifetime total as a
   supporting "look how much this builds over time" footnote. */
.simulator__cumulative {
  margin-top: 0.5rem !important;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.82rem;
  color: var(--ink-mute);
}
.simulator__cumulative strong {
  color: var(--coral);
}
.simulator__result {
  background: var(--cream);
  border-radius: calc(var(--radius) - 6px);
  padding: 1rem 1.25rem;
  border: 1px solid var(--hairline);
}
.simulator__result--accent {
  background: var(--card-accent-bg);
  border-color: var(--card-accent-border);
  box-shadow: inset 4px 0 0 var(--navy);
}
.simulator__year {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--coral);
  margin: 0 0 0.65rem;
}
.simulator__result--accent .simulator__year { color: var(--navy); }
.simulator__result p {
  margin: 0.35rem 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.simulator__result strong {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media print {
  .simulator { display: none; }
}

/* =================================================================
 * Dark mode overrides
 * Brand-color tokens flip via :root[data-theme="dark"] above. A few
 * specific layers also need targeted tweaks: ambient shape gradients,
 * inline-SVG squiggle strokes, and a couple of cream-toned surfaces.
 * ================================================================= */
:root[data-theme="dark"] .shape--coral {
  background: radial-gradient(circle at 35% 35%, rgba(255, 122, 85, 0.32), rgba(255, 122, 85, 0) 70%);
}
:root[data-theme="dark"] .shape--navy {
  background: radial-gradient(circle at 35% 35%, rgba(122, 157, 230, 0.28), rgba(122, 157, 230, 0) 70%);
}
:root[data-theme="dark"] .shape--cream {
  background: radial-gradient(circle at 35% 35%, rgba(255, 218, 175, 0.18), rgba(255, 218, 175, 0) 70%);
}

/* Inline-SVG squiggles use hardcoded #3B5BA5 in markup; flip via CSS in dark mode. */
:root[data-theme="dark"] .squiggle path {
  stroke: var(--navy);
}

/* Soft cream-tinted surfaces (like the founder block, board cards) read
   too bright on dark; the --cream-2 token already accounts for that, but
   gradient backgrounds defined directly need a touch. The .progress
   background and the .counter border are now driven by --hairline (which
   flips automatically in dark mode), so only the counter's pill backdrop
   needs an explicit dark override. */
:root[data-theme="dark"] .counter {
  background: rgba(31, 32, 38, 0.85);
}

/* =================================================================
 * Theme toggle button (top-right, near the slide counter)
 * ================================================================= */
.theme-toggle {
  position: fixed;
  top: 1.2rem;
  right: 4.5rem;
  z-index: 50;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--ink-mute);
  background: var(--cream-2);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  background: var(--coral);
  color: white;
  border-color: var(--coral);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}
.theme-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }
.theme-toggle .theme-toggle__moon { display: block; }
.theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; }

@media (max-width: 600px) {
  .theme-toggle { right: 3.5rem; width: 2rem; height: 2rem; top: 1rem; }
  .theme-toggle svg { width: 1rem; height: 1rem; }
}

@media print {
  .theme-toggle { display: none; }
}