/* Brand fonts, served from this site (2026-10-02). They used to come from
   fonts.googleapis.com, which put a render-blocking request to another host in
   front of every first paint. These are the same variable woff2 files Google
   serves (SIL Open Font License), weights 400 to 700. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/work-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/work-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   SpineHope shared theme.
   Design system: "SpineHope - Design System & UI" (Figma), captured
   2026-08-25. Tokens below are extracted from that file, not from the
   2021 brand doc. See ../../design/TOKENS.md.
   Palette: Sunny / Grass / Carbon / Magnolia / Forest
   Fonts: Fredoka (display), Work Sans (body), both Google Fonts.
   ============================================================ */

:root {
  /* ---- Brand core (Figma: Brand/*) ---- */
  --magnolia: #FDF9F1;
  --sunny:    #FFD100;
  --grass:    #A7C434;
  --carbon:   #28201C;
  --forest:   #455115;
  --white:    #FFFFFF;

  /* ---- Grass ramp (Primary/Grass/*) ---- */
  --grass-50: #F5F6EB; --grass-100:#ECF0D5; --grass-200:#DEE8B6;
  --grass-300:#CFDE92; --grass-400:#BDD267; --grass-500:#A7C434;
  --grass-600:#859B2B; --grass-700:#657422; --grass-800:#47511A;
  --grass-900:#2D3113; --grass-950:#1F200F;

  /* ---- Sunny ramp (Primary/Sunny/*) ---- */
  --sunny-50: #FBF7E7; --sunny-100:#FCF3CC; --sunny-200:#FCECA4;
  --sunny-300:#FDE577; --sunny-400:#FEDC41; --sunny-500:#FFD100;
  --sunny-600:#D1A400; --sunny-700:#A37A00; --sunny-800:#775603;
  --sunny-900:#4E3604; --sunny-950:#342304;

  /* ---- Neutral ramp (Primary/Neutral/*) ---- */
  /* Numbered exactly as Figma's Primary/Neutral variables (checked against
     design/2026-08-28-duplicate/variables.json, 2026-09-11). The old ramp was
     shifted one or two steps, so every var(--neutral-N, #fallback) rendered
     the wrong step. 150 and 500 are legacy names, kept so old page CSS holds. */
  --neutral-0:  #FFFFFF; --neutral-50: #FDF9F1; --neutral-100:#FDF9F1;
  --neutral-200:#F1EDE5; --neutral-300:#E5E1D8; --neutral-400:#D0C4B8;
  --neutral-600:#5C534D; --neutral-700:#3D342F; --neutral-800:#28201C;
  --neutral-900:#171211;
  --neutral-150:#E5E1D8; --neutral-500:#3D342F;

  /* ---- Forest ramp (Primary/Forest/*) ---- */
  --forest-400:#747D50; --forest-500:#455115; --forest-600:#384113;
  --forest-700:#2D3211; --forest-900:#18190D;

  /* ---- Secondary + semantic (Brand/*, Semantic/*) ---- */
  --mustard:#E68A00; --strawberry:#FE5C38; --wine:#6A2729;
  --steam:#ACCFEF;  --bay:#323E8F;        --blush:#E15F97;
  --jelly:#681A72;  --licorice:#1A1A1A;
  --success:#22C55E; --error:#EF4444; --warning:#F97316; --info:#3B82F6;
  /* Form error text on Magnolia: the brandbook has no error colour, and
     #EF4444 fails AA on the cream panels, so every status line uses this. */
  --error-text:#B42318;

  /* ---- Shadows (Effects/Shadows/*) ---- */
  --shadow-xs: 0 1px 2px 0 rgba(10,13,18,0.05);
  --shadow-sm: 0 1px 2px -1px rgba(10,13,18,0.10), 0 1px 3px 0 rgba(10,13,18,0.10);
  --shadow-md: 0 2px 4px -2px rgba(10,13,18,0.06), 0 4px 6px -1px rgba(10,13,18,0.10);
  --shadow-lg: 0 2px 2px -1px rgba(10,13,18,0.04), 0 4px 6px -2px rgba(10,13,18,0.03), 0 12px 16px -4px rgba(10,13,18,0.08);
  --shadow-xl: 0 3px 3px -2px rgba(10,13,18,0.04), 0 8px 8px -4px rgba(10,13,18,0.03), 0 20px 24px -4px rgba(10,13,18,0.08);
  --shadow-2xl:0 4px 4px -2px rgba(10,13,18,0.04), 0 24px 48px -12px rgba(10,13,18,0.18);

  /* ---- Radius (StyleGuide - Border Radius) ---- */
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:8px;
  --radius-xl:12px; --radius-2xl:16px; --radius-3xl:24px; --radius-full:9999px;

  /* ---- Spacing, 4px grid (StyleGuide - Spacing) ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;

  /* ---- Layout ---- */
  --ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --container: 1200px;
  --container-sm: 860px;

  /* ---- Legacy aliases. Older page CSS still references these names;
          each now resolves to its design system equivalent. ---- */
  --lemon: var(--sunny);
  --lemon-rgb: 255, 209, 0;
  --lime: var(--grass);
  --lime-rgb: 167, 196, 52;
  --black: var(--carbon);
  --teal: var(--forest);
  --teal-dark: var(--forest-600);
  --teal-tint: var(--grass-100);
  --warm: var(--magnolia);
  --warm-alt: var(--neutral-150);
  --charcoal: var(--neutral-600);
  /* Tertiary text. The design token is #837B76, which is 4.15:1 on white and
     3.95:1 on Magnolia: under the 4.5:1 that body-size text needs. #6F6762 is
     the nearest tone that passes on white, Magnolia, #F1EDE5 and Sunny-100. */
  --charcoal-soft: #6F6762;
  --border: var(--neutral-150);
  --shadow-soft: var(--shadow-sm);
  --shadow-lift: var(--shadow-xl);
  --radius: var(--radius-xl);
  --radius-lg: var(--radius-3xl);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scroll-padding-top: 120px; }

body {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--warm);
  color: var(--charcoal);
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fredoka', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--carbon);
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 600; line-height: 1.1; }
h2 { font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 600; line-height: 1.09; }
h3 { font-size: clamp(1.5rem, 3vw, 3rem); font-weight: 600; line-height: 1.13; }
h4 { font-size: 1.1rem; }

p { color: var(--charcoal-soft); }
a { color: inherit; text-decoration: none; transition: color var(--ease); }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; font-family: inherit; }
hr { border: 0; height: 1px; background: var(--border); margin: 48px 0; }

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

/* ---- BUTTONS ----
   Figma component set "Button": pill radius, 56px regular / 42px small,
   Work Sans 600, 1px darker-shade border, states shift the ramp step. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.6;
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
  white-space: nowrap;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { min-height: 42px; padding: 8px 20px; font-size: 1rem; }

.btn-primary {
  background: var(--sunny-500);
  border-color: var(--sunny-600);
  color: var(--carbon);
}
.btn-primary:hover  { background: var(--sunny-600); border-color: var(--sunny-700); }
.btn-primary:active { background: var(--sunny-700); border-color: var(--sunny-800); }
.btn-primary[disabled], .btn-primary.is-disabled {
  background: var(--sunny-300); border-color: var(--sunny-700);
  color: #6F6762; cursor: not-allowed;
}

.btn-secondary {
  background: var(--white);
  border-color: var(--neutral-150);
  color: var(--carbon);
}
.btn-secondary:hover  { background: var(--magnolia); }
.btn-secondary:active { background: #F1EDE5; }

/* Kept so existing markup keeps working; both now read from the new ramp. */
.btn-teal {
  background: var(--forest-500);
  border-color: var(--forest-600);
  color: var(--white);
}
.btn-teal:hover { background: var(--forest-600); border-color: var(--forest-700); }
.btn-outline {
  background: var(--white);
  color: var(--carbon);
  border-color: var(--neutral-150);
}
.btn-outline:hover { background: var(--magnolia); }
.btn-link {
  color: var(--forest-500);
  font-weight: 600;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
}
.btn-link:hover { color: var(--forest-600); }

/* Skip link: first Tab stop on every page, visible only while focused. */
.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 10000;
  background: var(--carbon, #28201C); color: #fff; padding: 12px 20px; border-radius: 9999px;
  font: 600 16px/1 'Work Sans', system-ui, sans-serif; text-decoration: none;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--sunny, #FFD100); outline-offset: 2px; }
main:focus { outline: none; }

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--grass-600);
}

/* Figma specs the 20px label at desktop. Below that it is the Small size,
   and long CTA labels wrap rather than forcing the column wider than the
   viewport (body has overflow-x:hidden, so an overflow here goes unseen). */
@media (max-width: 720px) {
  .btn {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 1rem;
    white-space: normal;
    text-align: center;
  }
}

/* ---- NAV ----
   Figma "Navbar Container" (3237:16889): the bar is a floating white pill
   inside 24px of page padding, not a full-bleed band. Two CTAs, an outline
   "Ways to Give" and a Sunny "Monthly Donation", each with the arrow-right
   icon.
   Width follows the 09-24 Figma Navbar Container: the bar sits 24px from
   each edge (1464px on the 1512 canvas). It was 80px gutters, from an older
   prototype (Astra design check, 2026-09-24). */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--sp-6, 24px);
  transition: padding var(--ease);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  max-width: 1622px; margin: 0 auto;
  background: #fff;
  border-radius: 9999px;
  padding: 12px 24px;
  box-shadow: 0 1px 2px rgba(10,13,18,.04);
  transition: box-shadow var(--ease);
}
.nav.scrolled .nav-inner { box-shadow: var(--shadow-lg, 0 8px 24px rgba(10,13,18,.10)); }

/* Figma's Navbar "Transparent" theme: while the bar is pinned over a dark
   hero it is a translucent carbon pill with light links, swapping to the
   white Default theme once the hero has scrolled past. Only dark/photo
   heroes opt in; over a light hero the white pill stays. */
.nav.over-hero .nav-inner { background: rgba(40, 32, 28, 0.45); box-shadow: inset 0 0 0 1px rgba(253, 249, 241, 0.14); backdrop-filter: blur(6px); }
.nav.over-hero .nav-links > a { color: var(--neutral-50, #FDF9F1); }
.nav.over-hero .nav-links > a:hover { color: var(--grass-400, #BDD267); }
.nav.over-hero .nav-toggle svg { color: var(--neutral-50, #FDF9F1); }
/* Figma Navbar, Transparent theme: white wordmark with the Sunny figure. */
.nav.over-hero .nav-logo img { content: url("/assets/logo/v2/spinehope-logo-whiteyellow.svg"); }
.nav.over-hero .btn-outline { background: #fff; border-color: var(--neutral-200, #F1EDE5); color: var(--carbon, #28201C); }
.nav.over-hero .btn-outline:hover { background: var(--magnolia, #FDF9F1); }
/* Art 10-07: on the yellow-hero pages (About, Programs, Partnerships, Volunteers)
   the yellow Monthly Donation button vanished into the hero. While the nav sits
   over that hero it takes the Carbon button those heroes already use. */
body[data-hero="sunny"] .nav.over-hero .nav-cta .btn-primary { background: var(--carbon, #28201C); border-color: var(--carbon, #28201C); color: var(--neutral-50, #FDF9F1); }
body[data-hero="sunny"] .nav.over-hero .nav-cta .btn-primary:hover { background: #3D332E; border-color: #3D332E; }
.nav-logo img { height: 56px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 16px; }
.nav-links > a {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 18px; line-height: 1.6; font-weight: 400;
  color: var(--carbon, #28201C);
  padding: 8px 12px;
  white-space: nowrap;
}
.nav-links > a:hover { color: var(--grass-600, #859B2B); }
.nav-cta { display: flex; align-items: center; gap: 6px; }
.nav-cta .btn { font-size: 16px; line-height: 1.6; padding: 8px 20px; min-height: 0; white-space: nowrap; }
.nav-links > a { border-radius: 9999px; transition: background var(--ease), color var(--ease); }
.nav-links > a[aria-current="page"] { background: var(--neutral-200, #F1EDE5); }
.nav.over-hero .nav-links > a[aria-current="page"] { background: rgba(253, 249, 241, 0.16); }
.nav-cta .btn svg { width: 16px; height: 16px; flex: none; }
.nav-toggle { display: none; background: none; border: 0; padding: 6px; }
.nav-toggle svg { width: 26px; height: 26px; color: var(--carbon, #28201C); }

/* Five links since 2026-09-19 (Stories added): the full bar needs ~1180px,
   so the compact sizes start earlier and the menu button takes over below
   1100. */
@media (max-width: 1280px) {
  .nav-links { gap: 4px; }
  .nav-links > a { font-size: 16px; padding: 8px 10px; }
  .nav-cta .btn { font-size: 15px; padding: 8px 16px; }
}
@media (max-width: 1100px) {
  .nav { padding: 12px; }
  .nav-inner { border-radius: 24px; position: relative; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  /* Open menu: one white sheet. Links and buttons sit in normal flow under
     the logo row (they used to be two absolute panels at the same top, so
     the buttons covered the first links). */
  .nav-open .nav-inner { flex-wrap: wrap; background: #fff; border-radius: 24px; box-shadow: 0 12px 24px rgba(10,13,18,.10); }
  .nav-open .nav-links,
  .nav-open .nav-cta {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; flex: 0 0 100%;
    position: static; background: none; box-shadow: none;
  }
  .nav-open .nav-links { padding: 8px 8px 4px; }
  .nav-open .nav-cta { padding: 0 8px 8px; }
  .nav-open .nav-links > a { padding: 12px 0; border-bottom: 1px solid var(--neutral-200, #F1EDE5); border-radius: 0; }
  .nav-open .nav-cta .btn { margin-top: 10px; justify-content: center; }
  /* Over a dark hero the closed bar is dark with light marks; open, the
     sheet is white, so everything goes back to dark on light. */
  .nav.nav-open.over-hero .nav-inner { background: #fff; backdrop-filter: none; box-shadow: 0 12px 24px rgba(10,13,18,.10); }
  .nav.nav-open.over-hero .nav-logo img { content: url("/assets/logo/v2/spinehope-logo-blackyellow.svg"); }
  .nav.nav-open.over-hero .nav-toggle svg { color: var(--carbon, #28201C); }
  .nav.nav-open.over-hero .nav-links > a { color: var(--carbon, #28201C); }
  .nav.nav-open.over-hero .nav-links > a:hover { color: var(--forest, #455115); }
  .nav.nav-open.over-hero .nav-cta .btn-outline { background: var(--white, #fff); border-color: var(--neutral-150, #E5E1D8); color: var(--carbon, #28201C); }
}

/* ---- SECTIONS ---- */
section { padding: 96px 0; }
@media (max-width: 768px) { section { padding: 72px 0; } }

.section-warm { background: var(--warm); }
.section-warm-alt { background: var(--warm-alt); }
.section-white { background: var(--white); }
.section-teal { background: var(--teal); color: var(--white); }
.section-teal h1, .section-teal h2, .section-teal h3 { color: var(--white); }
.section-teal p { color: rgba(255,255,255,0.88); }
.section-black { background: var(--black); color: var(--white); }
.section-black h1, .section-black h2, .section-black h3 { color: var(--white); }
.section-black p { color: rgba(255,255,255,0.82); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.section-teal .eyebrow, .section-black .eyebrow { color: var(--lime); }

.section-header { text-align: center; margin-bottom: 56px; }
.section-header p { max-width: 680px; margin: 16px auto 0; font-size: 1.08rem; }

/* ---- HERO ---- */
.hero {
  position: relative;
  padding: 180px 0 120px;
  background: var(--warm);
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; right: -10%; top: 0; width: 55%; height: 100%;
  background: radial-gradient(circle at 60% 40%, rgba(var(--lime-rgb), 0.18) 0%, transparent 55%);
  pointer-events: none;
}
.hero-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: center;
  position: relative; z-index: 1;
}
.hero h1 { margin-bottom: 20px; max-width: 14ch; }
.hero .sub {
  font-size: 1.15rem; line-height: 1.65;
  color: var(--charcoal-soft);
  margin-bottom: 18px;
  max-width: 48ch;
}
.hero .body { margin-bottom: 36px; max-width: 46ch; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--teal-tint);
  box-shadow: var(--shadow-lift);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual-caption {
  position: absolute; left: 20px; bottom: 20px; right: 20px;
  background: rgba(35,31,32,0.82);
  color: var(--white);
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  backdrop-filter: blur(6px);
}
@media (max-width: 900px) {
  .hero { padding: 140px 0 80px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { aspect-ratio: 4/3; order: -1; }
}

/* ---- CARDS ---- */
.card-grid {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--teal-tint); }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 0.98rem; }
.card-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--teal-tint);
  color: var(--teal);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.card-icon svg { width: 24px; height: 24px; }
.card-lime .card-icon { background: rgba(var(--lime-rgb), 0.22); color: var(--black); }
.card-lemon .card-icon { background: rgba(var(--lemon-rgb), 0.30); color: var(--black); }

.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px;
  color: var(--teal);
  font-weight: 600;
  font-size: 0.95rem;
}
.card-link:hover { color: var(--teal-dark); }
.card-link::after { content: '→'; transition: transform var(--ease); }
.card-link:hover::after { transform: translateX(4px); }

/* ---- STATS ---- */
.stat-row {
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 48px;
}
.stat { text-align: center; }
.stat-value {
  font-family: 'Fredoka','Work Sans',sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 8px;
}
.section-teal .stat-value, .section-black .stat-value { color: var(--lime); }
.stat-label { font-size: 0.92rem; color: var(--charcoal-soft); letter-spacing: 0.02em; }
.section-teal .stat-label, .section-black .stat-label { color: rgba(255,255,255,0.8); }

/* ---- CALLOUT TAGLINE ---- */
.tagline-callout {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 32px;
  background: rgba(var(--lime-rgb), 0.18);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--lime-rgb), 0.38);
}
.tagline-callout p {
  font-family: 'Fredoka','Work Sans',sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--black);
  line-height: 1.35;
}

/* ---- FOOTER ----
   Figma "Footer" (3237:17048). Sunny ground, with the newsletter band folded
   INTO the footer on a Sunny/100 card. It used to be a separate black section
   every page had to include by hand. */
footer {
  background: var(--sunny, #FFD100);
  color: var(--carbon, #28201C);
  padding: 48px;
  display: flex; flex-direction: column; gap: 48px;
}
footer .container { max-width: var(--container); margin: 0 auto; width: 100%; padding: 0; }

.newsletter-band {
  background: var(--sunny-100, #FCF3CC);
  border: 5px solid var(--sunny-100, #FCF3CC);
  border-radius: var(--r-3xl, 24px);
  padding: 24px 28px;
  display: flex; align-items: flex-end; justify-content: center; gap: 24px;
  overflow: clip;
}
.newsletter-band > div:first-child { flex: 1 1 0; min-width: 0; }
.newsletter-band h2 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 40px; line-height: 1.15; letter-spacing: -0.5px; font-weight: 500;
  color: var(--carbon, #28201C); margin: 0 0 12px;
}
.newsletter-band > div:first-child > p {
  font-size: 20px; line-height: 1.6; margin: 0; color: var(--neutral-600, #5C534D);
}
.newsletter-form { display: flex; flex-direction: column; gap: 8px; }
.newsletter-fields { display: flex; align-items: center; gap: 8px; }
.newsletter-fields input {
  width: 240px; max-width: 100%;
  background: #fff;
  border: 1px solid var(--neutral-400, #D0C4B8);
  border-radius: 9999px;
  padding: 16px 20px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 14px; line-height: 1.6;
  color: var(--carbon, #28201C);
}
.newsletter-fields input::placeholder { color: var(--neutral-600, #5C534D); }
.newsletter-fields input:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }
.newsletter-submit { font-size: 16px; padding: 12px 16px; }
.newsletter-consent { display: flex; gap: 10px; align-items: flex-start; max-width: 560px; font-size: 13px; line-height: 1.5; color: var(--carbon, #28201C); }
.newsletter-consent input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.newsletter-consent a { text-decoration: underline; }
.d-everyorg { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.d-everyorg-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter-note { font-size: 14px; line-height: 1.6; opacity: .85; color: var(--neutral-600, #5C534D); text-align: center; margin: 0; }
.newsletter-success strong { font-family: 'Fredoka', system-ui, sans-serif; font-size: 20px; }
.newsletter-success p { font-size: 14px; opacity: .85; margin: 4px 0 0; }

.footer-grid {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}
.footer-brand { width: 340px; max-width: 100%; flex: 0 1 340px; display: flex; flex-direction: column; gap: 24px; }
.footer-brand img { height: 76px; width: auto; display: block; }
.footer-brand p { font-size: 18px; line-height: 1.6; opacity: .6; color: #000; margin: 0; max-width: none; }
.footer-links { display: flex; gap: 40px; flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-end; }
.footer-links > div { display: flex; flex-direction: column; gap: 16px; width: auto; min-width: 130px; }
.footer-links > div:last-child { min-width: 175px; }
footer h4 {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 14px; line-height: 1.4; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: #000; margin: 0;
}
footer ul { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
/* 60% black as a color, not opacity: opacity on both the li and its link
   multiplied to 36% and failed contrast on Sunny. */
footer ul li, footer ul a { font-size: 18px; line-height: 1.6; color: rgba(0,0,0,.6); }
footer ul a:hover { color: #000; }
.footer-divider { height: 1px; width: 100%; background: #000; opacity: .3; }
.footer-legal {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 14px; line-height: 1.6; color: #000;
}
.footer-legal-links { display: flex; gap: 16px; font-size: 16px; }

@media (max-width: 1080px) {
  .newsletter-band { flex-direction: column; align-items: stretch; }
  .newsletter-fields { flex-wrap: wrap; }
  .newsletter-fields input { width: 100%; }
  .newsletter-submit { width: 100%; }
}
@media (max-width: 900px) {
  footer { padding: 40px 20px; gap: 32px; }
  .newsletter-band h2 { font-size: 30px; }
  .newsletter-band > div:first-child > p { font-size: 17px; }
  .footer-grid { gap: 32px; }
  .footer-brand { width: 100%; }
  .footer-links { gap: 28px; }
  .footer-links > div, .footer-links > div:last-child { width: 45%; min-width: 140px; }
  footer ul li, footer ul a, .footer-brand p { font-size: 16px; }
}


/* ============================================================
   DESIGN-SYSTEM SECTIONS
   The page layer of the Figma Website designs, shared by every
   rebuilt page. Section rhythm is 96px block / 104px inline at
   the 1512 artboard; the inline padding collapses on smaller
   viewports because 104px of gutter on a phone is most of the
   screen.
   ============================================================ */
.d-sec {
  padding: 96px 104px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 48px;
}
.d-sec > * { width: 100%; }
/* A button placed directly in a section is a button, not a full-width bar. */
.d-sec > .btn, .d-sec > .d-btn-dark, .d-sec > .d-btn-light { width: auto; }
.d-sec--white    { background: #fff; }
.d-sec--magnolia { background: var(--magnolia, #FDF9F1); }
.d-sec--carbon   { background: var(--carbon, #28201C); }
.d-sec--grass    { background: var(--grass, #A7C434); }
.d-sec--center   { align-items: center; text-align: center; }

/* The hero and the closing CTA are the two rounded slabs in the
   designs: 32px on the outer corners only. */
/* The nav is fixed and overlays the hero, so the hero carries the nav's
   height on top of the design's 96px. In Figma the navbar sits in the
   page flow above the header, so its 96px is measured from below it. */
.d-hero { border-radius: 0 0 32px 32px; overflow: clip; gap: 24px; padding-top: 200px; }
.d-cta  { border-radius: 32px 32px 0 0; gap: 40px; }

.d-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 12px;
  border-radius: 2px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--neutral-900, #171211);
  width: auto; flex: none;
}
.d-badge--sunny { background: var(--sunny, #FFD100); }
.d-badge--grass { background: var(--grass, #A7C434); }

.d-h1, .d-h2, .d-h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  color: var(--carbon, #28201C);
  margin: 0;
}
.d-h1 { font-size: clamp(38px, 5.3vw, 80px); line-height: 1.1;  letter-spacing: -1px; }
.d-h2 { font-size: clamp(32px, 4.2vw, 64px); line-height: 1.1;  letter-spacing: -0.75px; }
.d-h3 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; line-height: 1.12; letter-spacing: -0.5px; }
/* Figma text styles by name (More Better master, 2026-09-24). Use these to
   match a frame's style exactly; .d-h1/.d-h2/.d-h3 stay for existing markup. */
.ty-h2 { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(36px, 4.3vw, 64px); font-weight: 600; line-height: 1.1; letter-spacing: -0.75px; color: var(--carbon, #28201C); margin: 0; }
.ty-h3 { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; line-height: 1.12; letter-spacing: -0.5px; color: var(--carbon, #28201C); margin: 0; }
.ty-h4 { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(28px, 2.9vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -0.5px; color: var(--carbon, #28201C); margin: 0; }
.ty-h5 { font-family: 'Fredoka', system-ui, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.25; color: var(--carbon, #28201C); margin: 0; }
.ty-h6 { font-family: 'Fredoka', system-ui, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.5px; color: var(--carbon, #28201C); margin: 0; }
.ty-label { font-family: 'Work Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; }

.d-lede {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 20px; line-height: 1.6; font-weight: 600;
  color: var(--neutral-600, #5C534D);
  max-width: 1000px; margin: 0;
}
.d-body { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); max-width: 1000px; margin: 0; }
.d-prose { display: flex; flex-direction: column; gap: 24px; max-width: 1000px; }
.d-prose p { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

/* Hero on carbon: Sunny headline, Magnolia lede. */
.d-hero .d-h1 { color: var(--sunny, #FFD100); }
.d-hero .d-lede { color: var(--magnolia, #FDF9F1); }
/* CTA on grass: darkest greens, per the Figma fills. */
.d-cta .d-h2 { color: var(--grass-900, #2D3113); }
.d-cta .d-lede { color: var(--grass-950, #1F200F); text-align: center; max-width: none; }

.d-headline { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.d-sec--center .d-headline { align-items: center; }

.d-cards { display: flex; gap: 40px; align-items: stretch; }
.d-card {
  flex: 1 1 0; min-width: 0;
  background: var(--magnolia, #FDF9F1);
  border: 3px solid var(--neutral-200, #F1EDE5);
  border-radius: 24px;
  padding: 40px;
  display: flex; flex-direction: column; gap: 32px;
}
.d-card .d-h3 { margin-bottom: 0; }
.d-card-head { display: flex; flex-direction: column; gap: 12px; }
.d-card-note { font-size: 16px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

/* Role list: a bold term, then its description. */
.d-deflist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.d-deflist li { font-size: 16px; line-height: 1.6; color: var(--carbon, #28201C); }
.d-deflist b { font-weight: 700; }
.d-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.d-bullets li { font-size: 16px; line-height: 1.6; color: var(--carbon, #28201C); }
.d-bullets li::before { content: "\2022"; margin-right: 8px; }

.d-btn-dark {
  background: var(--carbon, #28201C);
  border: 1px solid var(--neutral-700, #3D342F);
  color: var(--magnolia, #FDF9F1);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 500; font-size: 16px; line-height: 1.6;
  padding: 12px 16px; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: 8px; width: auto;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
}
.d-btn-dark:hover { background: var(--neutral-700, #3D342F); }
.d-btn-dark svg { width: 20px; height: 20px; flex: none; }

.d-closing { gap: 24px; padding-top: 64px; }
.d-closing p { margin: 0; }
.d-closing .d-closing-lead { font-size: 20px; font-weight: 600; color: var(--carbon, #28201C); }
.d-closing .d-closing-sub  { font-size: 18px; color: var(--neutral-600, #5C534D); }

@media (max-width: 1100px) {
  .d-sec { padding: 72px 40px; gap: 40px; }
  .d-hero { padding-top: 168px; }
  .d-cards { flex-direction: column; }
}
@media (max-width: 640px) {
  .d-sec { padding: 56px 20px; gap: 32px; }
  .d-hero { padding-top: 132px; }
  .d-card { padding: 28px; gap: 24px; }
  .d-lede, .d-body, .d-prose p { font-size: 17px; }
  .d-hero { border-radius: 0 0 24px 24px; }
  .d-cta  { border-radius: 24px 24px 0 0; }
}


/* ---- /about specifics (Figma 3237:16077) ---- */
.d-pillars { display: flex; gap: 40px; align-items: flex-start; }
.d-pillar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.d-pillar-art { width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.d-pillar-art img { width: 144px; height: 144px; }
.d-pillar-title { font-family: 'Work Sans', system-ui, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.6; color: var(--carbon, #28201C); margin: 0; }
.d-pillar-body { font-size: 16px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

.d-split { display: flex; gap: 80px; align-items: flex-start; width: 100%; }
.d-split-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.d-split-aside { flex: 0 0 480px; max-width: 100%; margin: 0; }
.d-photo-plate {
  width: 100%; aspect-ratio: 4 / 5;
  background: var(--neutral-200, #F1EDE5);
  border: 3px solid var(--neutral-300, #E5E1D8);
  border-radius: 24px;
}
.d-split-aside figcaption {
  margin-top: 16px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--neutral-600, #5C534D); text-align: center;
}
.d-founder { display: flex; flex-direction: column; gap: 16px; }
.d-founder-name { font-family: 'Work Sans', system-ui, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.6; color: var(--carbon, #28201C); margin: 0; }
.d-founder-bio { font-size: 18px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

.d-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
.d-person { display: flex; flex-direction: column; gap: 12px; }
.d-person-photo {
  width: 100%; aspect-ratio: 365 / 320;
  background: var(--neutral-200, #F1EDE5);
  border: 3px solid var(--neutral-300, #E5E1D8);
  border-radius: 24px;
  margin-bottom: 12px;
}
.d-person-name { font-family: 'Fredoka', system-ui, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--carbon, #28201C); margin: 0; }
.d-person-role { font-family: 'Work Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grass-600, #859B2B); margin: 0; }
.d-person-bio { font-size: 16px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

.d-cta-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; justify-content: center; }
.d-btn-light {
  background: #fff;
  border: 1px solid var(--neutral-300, #E5E1D8);
  color: var(--carbon, #28201C);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 500; font-size: 16px; line-height: 1.6;
  padding: 12px 16px; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06);
}
.d-btn-light:hover { background: var(--magnolia, #FDF9F1); }
.d-btn-light svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 1100px) {
  .d-pillars { flex-wrap: wrap; gap: 32px; }
  .d-pillar { flex: 1 1 40%; }
  .d-split { flex-direction: column; gap: 40px; }
  .d-split-aside { flex: 1 1 auto; width: 100%; max-width: 480px; }
  .d-people { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .d-pillar { flex: 1 1 100%; }
  .d-pillar-art { width: 180px; height: 180px; }
  .d-pillar-art img { width: 116px; height: 116px; }
  .d-people { grid-template-columns: 1fr; }
  .d-founder-bio { font-size: 16px; }
}


/* ---- /programs specifics (Figma 3237:16458) ---- */
.d-progcards { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.d-progcard {
  flex: 1 1 340px; max-width: 380px; height: 475px;
  position: relative; overflow: clip;
  border: 1px solid var(--neutral-200, #F1EDE5);
  border-radius: 16px;
  display: block; color: #fff;
}
.d-progcard-media { position: absolute; inset: 0; }
.d-progcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-progcard-media--plate { background: var(--carbon, #28201C); }
.d-progcard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.78) 100%);
}
.d-progcard-body {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 0 32px 24px; display: flex; flex-direction: column; gap: 12px;
}
.d-progcard-body h3 { font-family: 'Fredoka', system-ui, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.25; color: #fff; margin: 0; }
.d-progcard-body p { font-size: 18px; line-height: 1.6; color: #fff; margin: 0; }
.d-progcard:hover .d-progcard-media img { transform: scale(1.03); }
.d-progcards--home .d-progcard-body p,
.d-progcards--home .d-progcard-cta {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--ease), opacity var(--ease), margin var(--ease);
}
.d-progcards--home .d-progcard:hover .d-progcard-body p,
.d-progcards--home .d-progcard:focus-within .d-progcard-body p { max-height: 180px; opacity: 1; }
.d-progcards--home .d-progcard:hover .d-progcard-cta,
.d-progcards--home .d-progcard:focus-within .d-progcard-cta { max-height: 60px; opacity: 1; }
.d-progcard-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--neutral-0, #FFFFFF); color: var(--carbon, #28201C);
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px;
  padding: 8px 20px; border-radius: 9999px;
}
.d-progcard-cta svg { width: 16px; height: 16px; flex: none; }
/* /programs: Figma anchors the title and body bottom-left, not centred. */
.d-progcards:not(.d-progcards--home) .d-progcard-body { text-align: left; align-items: flex-start; }
.d-progcard-media img { transition: transform var(--ease); }

.d-split--even .d-split-main { flex: 1 1 0; }
.d-split--reverse { flex-direction: row-reverse; }
.d-plate {
  flex: 1 1 0; align-self: stretch; min-height: 480px;
  background: var(--neutral-200, #F1EDE5);
  border: 3px solid var(--neutral-300, #E5E1D8);
  border-radius: 24px;
}
.d-plate--wide { min-width: 0; }

.d-sitecards { flex: 1 1 0; display: flex; gap: 24px; }
.d-sitecard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; color: inherit; }
.d-sitecard-media { border-radius: 16px; overflow: clip; aspect-ratio: 258 / 200; background: var(--neutral-200, #F1EDE5); }
.d-sitecard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-sitecard h3 { font-family: 'Fredoka', system-ui, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.25; color: var(--carbon, #28201C); margin: 8px 0 0; }
.d-sitecard p { font-size: 18px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

.d-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.d-btn-lg { font-size: 16px; padding: 12px 16px; display: inline-flex; align-items: center; gap: 8px; }
.d-btn-lg svg { width: 20px; height: 20px; flex: none; }
.d-finetext { font-size: 14px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

.d-steps { display: flex; gap: 24px; align-items: flex-start; width: 100%; }
.d-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.d-step-art { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.d-step-art img { width: 100px; height: 100px; object-fit: contain; }
.d-step-title { font-family: 'Work Sans', system-ui, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.6; color: var(--carbon, #28201C); margin: 0; }
.d-step-body { font-size: 16px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

.d-crosslink { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; width: 100%; }
.d-crosslink h2 { margin: 0 0 12px; }

@media (max-width: 1100px) {
  .d-split--reverse { flex-direction: column; }
  .d-plate { min-height: 320px; width: 100%; }
  .d-steps { flex-wrap: wrap; }
  .d-step { flex: 1 1 40%; }
}
@media (max-width: 640px) {
  .d-progcard { height: 420px; max-width: none; }
  .d-sitecards { flex-direction: column; }
  .d-step { flex: 1 1 100%; }
  .d-progcard-body h3, .d-sitecard h3 { font-size: 24px; }
}


/* ---- /give specifics (Figma 2504:1727) ---- */
.d-give-hero { padding-bottom: 40px; }
.d-give-hero-copy { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.d-give-hero-note { font-size: 16px; line-height: 1.6; color: var(--magnolia, #FDF9F1); opacity: .6; margin: 0; }

.d-give { padding: 28px 56px; background: #fff; }
.d-give:nth-of-type(even) { background: var(--magnolia, #FDF9F1); }
.d-give-card {
  position: relative;
  display: flex; align-items: center; gap: 64px;
  padding: 56px; border-radius: 24px;
  max-width: var(--container); margin: 0 auto;
}
.d-give-card--sunny   { background: var(--sunny, #FFD100); }
.d-give-card--neutral { background: var(--neutral-200, #F1EDE5); }
.d-give-badge { position: absolute; top: -14px; right: -14px; z-index: 2; }
.d-give-content { flex: 0 0 476px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.d-give-head { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.d-give-title { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(32px, 4vw, 48px); font-weight: 600; line-height: 1.12; letter-spacing: -.5px; color: #211E1B; margin: 0; }
.d-give-sub { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

.d-chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.amt-btn, .amt-static {
  min-width: 110px; height: 110px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px;
  background: #fff;
  border: 1px solid var(--neutral-300, #E5E1D8);
  border-radius: 16px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 28px; font-weight: 500; line-height: 1.25;
  color: var(--carbon, #28201C);
  cursor: pointer;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06);
  transition: background var(--ease), border-color var(--ease);
}
.amt-static { cursor: default; min-width: 0; padding: 12px 32px; }
.amt-btn:hover { border-color: var(--grass, #A7C434); }
.amt-btn.active { background: var(--grass, #A7C434); border-color: var(--grass, #A7C434); }
.custom-amt {
  width: 100%; padding: 14px 20px;
  border: 1px solid var(--neutral-300, #E5E1D8); border-radius: 9999px;
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 16px;
  background: #fff; color: var(--carbon, #28201C);
}
.d-give-fields { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.d-give-fields input {
  width: 100%; padding: 14px 20px;
  border: 1px solid var(--neutral-300, #E5E1D8); border-radius: 9999px;
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.6;
  background: #fff; color: var(--carbon, #28201C);
}
.d-give-fields input::placeholder { color: var(--neutral-600, #5C534D); }
.d-give-ctas { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.d-give-ctas .d-btn-dark { width: 100%; justify-content: center; border: 1px solid var(--neutral-700, #3D342F); cursor: pointer; }
.d-give-learn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 16px; font-weight: 600;
  color: var(--carbon, #28201C); padding: 8px 20px;
}
.d-give-learn svg { width: 16px; height: 16px; }
.d-give-details { font-size: 18px; line-height: 1.6; color: #171211; text-align: center; margin: 0; max-width: 432px; }
.d-give-plate {
  position: relative;
  flex: 0 0 377px; max-width: 100%; align-self: center;
  height: 387px; min-height: 0;
  background: var(--neutral-300, #E5E1D8);
  border-radius: 16px;
}

@media (max-width: 1100px) {
  .d-give { padding: 20px 24px; }
  .d-give-card { flex-direction: column; gap: 32px; padding: 40px 28px; }
  .d-give-badge { position: static; align-self: center; }
  .d-give-content { flex: 1 1 auto; width: 100%; }
  .d-give-plate { flex: 0 0 auto; width: 100%; max-width: 377px; height: 300px; }
}
@media (max-width: 640px) {
  .d-give { padding: 12px; }
  .d-give-card { padding: 28px 20px; border-radius: 20px; }
  .amt-btn, .amt-static { min-width: 90px; height: 90px; font-size: 24px; }
  .d-give-sub, .d-give-details { font-size: 16px; }
}


/* ---- /give/<tier> pages (Figma 2722:9339 and siblings) ---- */
.d-tier-hero { gap: 24px; }
.d-crumb { display: flex; gap: 8px; align-items: center; font-size: 14px; line-height: 1.6; color: var(--neutral-200, #F1EDE5); }
.d-crumb a { color: var(--neutral-200, #F1EDE5); }
.d-crumb a:hover { color: var(--sunny, #FFD100); }
.d-crumb b { color: #fff; font-weight: 600; }
.d-tier-hero-grid { display: flex; gap: 96px; align-items: center; width: 100%; }
.d-tier-hero-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.d-tier-title { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(38px, 4.4vw, 64px); font-weight: 600; line-height: 1.1; letter-spacing: -.75px; color: var(--sunny, #FFD100); margin: 0; }
.d-tier-lede { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(20px, 2vw, 28px); font-weight: 500; line-height: 1.25; color: var(--sunny-100, #FCF3CC); margin: 0; }
.d-tier-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.d-tier-bullets li { font-size: 18px; line-height: 1.6; color: #FBF7E7; }
.d-tier-card {
  flex: 0 0 auto; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: var(--magnolia, #FDF9F1);
  border: 3px solid var(--neutral-200, #F1EDE5);
  border-radius: 24px;
  padding: 64px 44px;
  box-shadow: 0 5px 2.5px rgba(10,13,18,.04), 0 32px 64px rgba(10,13,18,.14);
}
.d-tier-commit { font-family: 'Fredoka', system-ui, sans-serif; font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: -.5px; color: var(--carbon, #28201C); margin: 0; }
.d-tier-card .d-btn-dark { width: 100%; max-width: 476px; justify-content: center; }
.d-tier-fine { font-size: 14px; line-height: 1.6; color: var(--neutral-600, #5C534D); text-align: center; margin: 0; max-width: 355px; }

.d-support-head { display: flex; gap: 80px; align-items: flex-end; width: 100%; flex-wrap: wrap; }
.d-support-head > div { flex: 0 1 674px; }
.d-support-lede { font-family: 'Fredoka', system-ui, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.25; color: var(--carbon, #28201C); opacity: .7; margin: 16px 0 0; }
.d-support-note { flex: 1 1 380px; font-size: 18px; line-height: 1.6; color: var(--neutral-700, #3D342F); margin: 0; }

.d-levels {
  display: flex; gap: 32px; align-items: stretch; width: 100%;
  background: var(--sunny-50, #FBF7E7);
  border-radius: 16px; padding: 32px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.d-level {
  flex: 0 0 755px; max-width: 100%;
  display: flex; gap: 20px; align-items: center; padding: 14px;
  scroll-snap-align: start;
}
.d-level + .d-level { border-left: 1px solid rgba(0,0,0,.15); }
.d-level-plate {
  flex: 0 0 400px; max-width: 45%; align-self: center;
  aspect-ratio: 400 / 264; min-height: 0;
  background: var(--neutral-200, #F1EDE5); border-radius: 12px;
}
@media (max-width: 860px) {
  .d-level { flex: 0 0 88%; }
  .d-level-plate { flex: 0 0 40%; }
}
.d-level-info { flex: 1 1 0; min-width: 0; align-items: center; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.d-level-amount { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(28px, 2.6vw, 48px); font-weight: 600; line-height: 1.12; letter-spacing: -.5px; color: #28201C; margin: 0; }
.d-level-body { font-size: 16px; line-height: 1.6; color: #28201C; opacity: .8; margin: 0; }

.d-why {
  width: 100%;
  background: var(--magnolia, #FDF9F1);
  border-radius: 16px;
  padding: 48px;
  display: flex; flex-direction: column; gap: 24px; align-items: center;
}
.d-why-head { text-align: center; }
.d-why .d-step-title, .d-why .d-step-body { color: var(--grass-900, #2D3113); }
.d-why .d-step-art { width: 142px; height: 142px; }
.d-why .d-step-art img { width: 142px; height: 142px; object-fit: contain; }
@media (max-width: 640px) { .d-why { padding: 28px 20px; } }

.d-patients-sec .d-headline { align-items: flex-start; gap: 20px; }
.d-patients { display: flex; gap: 20px; width: 100%; }
.d-patient { flex: 1 1 0; min-width: 0; margin: 0; background: var(--neutral-200, #F1EDE5); border: 5px solid transparent; border-radius: 16px; padding: 7px; display: flex; flex-direction: column; gap: 12px; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease); }
/* Figma puts the tier-page photos straight on white, with no card frame. */
.d-patients-sec .d-patient { background: transparent; border-color: transparent; border-radius: 0; padding: 0; }

.d-patient-photo { border-radius: 8px; overflow: hidden; }
.d-patient img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; }
.d-patient figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.d-patient-name { font-family: 'Fredoka', system-ui, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.25; color: var(--neutral-900, #171211); }
.d-patient-place { font-family: 'Work Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--carbon, #28201C); }
/* Art's one-line statement on the Stories of Hope Faces grid (2026-09-17). */
.d-patient-quote { font-family: 'Work Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.45; color: var(--neutral-700, #3D342F); margin-top: 6px; max-width: 30ch; }

/* ---- Faces cards, Isabel's "story-card" and "t-card" (2026-09-19) ----
   Copied from spinehope-proposals.netlify.app/spinehope-stories and
   /spinehope-homepage.html: Neutral 200 card with a 4px ring; on hover the
   card turns a Grass 400 to 600 gradient, the ring thickens to Grass 400 and
   lifts, the photo gains a 3px Grass 500 edge and zooms 3%. Same timings as
   hers: .32s colour, .38s ring, .45s zoom, all on (.22, 1, .36, 1). The ring
   runs through her #sh-tcard-wavy filter (SH_WAVY_DEFS, on each page that
   shows these cards) for the hand-drawn edge. */
.d-patients--grid .d-patient,
.d-fcard {
  position: relative;
  background: var(--neutral-200, #F1EDE5);
  border: 4px solid var(--neutral-200, #F1EDE5);
  border-radius: 16px; padding: 12px; gap: 12px;
  transition: background .32s cubic-bezier(.22,1,.36,1), border-color .32s cubic-bezier(.22,1,.36,1);
}
.d-patients--grid .d-patient::after,
.d-fcard::after {
  /* The ring reaches 5px past the card and runs through #sh-pcard-wavy, so the
     card's outer edge reads hand-drawn as in the frame (a ring flush with the
     card hid its own wobble behind the card's straight edge). */
  content: ""; position: absolute; inset: -5px; border-radius: 22px;
  border: 8px solid var(--neutral-200, #F1EDE5);
  pointer-events: none; filter: url(#sh-pcard-wavy);
  transition: inset .38s cubic-bezier(.22,1,.36,1), border-color .32s cubic-bezier(.22,1,.36,1), border-width .32s cubic-bezier(.22,1,.36,1), border-radius .38s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1);
}
.d-patients--grid .d-patient:hover,
.d-fcard.is-active {
  background: linear-gradient(to bottom, var(--grass-400, #BDD267), var(--grass-600, #859B2B));
  border-color: var(--grass-400, #BDD267);
}
.d-patients--grid .d-patient:hover::after,
.d-fcard.is-active::after {
  inset: -5px; border-radius: 22px;
  border: 8px solid var(--grass-400, #BDD267);
  box-shadow: 0 232px 65px rgba(48,43,30,0), 0 149px 59px rgba(48,43,30,.01), 0 84px 50px rgba(48,43,30,.05), 0 37px 37px rgba(48,43,30,.09), 0 9px 20px rgba(48,43,30,.1);
}
.d-patients--grid .d-patient-photo,
.d-fcard-photo { border: 3px solid transparent; border-radius: 8px; overflow: hidden; transition: border-color .32s cubic-bezier(.22,1,.36,1); }
.d-patients--grid .d-patient:hover .d-patient-photo,
.d-fcard.is-active .d-fcard-photo { border-color: var(--grass-500, #A7C434); }
.d-patients--grid .d-patient-photo img,
.d-fcard-photo img { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.d-patients--grid .d-patient:hover .d-patient-photo img,
.d-fcard.is-active .d-fcard-photo img { transform: scale(1.03); }

/* Grid: her 400 x 275 landscape photo, copy set left. */
.d-patients--grid .d-patient-photo { aspect-ratio: 400 / 275; }
.d-patients--grid .d-patient-photo img { height: 100%; aspect-ratio: auto; border-radius: 5px; }
.d-patients--grid .d-patient figcaption { align-items: flex-start; text-align: left; }
.d-patients--grid .d-patient-quote { font-size: 18px; line-height: 1.6; color: var(--carbon, #28201C); margin-top: 8px; max-width: none; }

/* Homepage carousel. Her cards are 248 x 338 at rest and 336 x 430 for the
   card in focus (the one nearest the centre while it drifts, or the one under
   the pointer). The viewport is fixed at the tall height, so the growing card
   never moves the page. */
.d-faces { --fw: 248px; --fh: 338px; --fw-on: 336px; --fh-on: 430px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.d-faces-viewport {
  width: 100%; height: calc(var(--fh-on) + 56px);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.d-faces-viewport::-webkit-scrollbar { display: none; }
.d-faces.is-live .d-faces-viewport { scroll-snap-type: none; }
/* Extra room below for the lit card's lift shadow. */
.d-faces-track { list-style: none; margin: 0; padding: 8px 4px 40px; height: 100%; display: flex; align-items: center; gap: 20px; width: max-content; }
.d-fcard {
  flex: none; width: var(--fw); height: var(--fh);
  display: flex; flex-direction: column; text-align: center; scroll-snap-align: center;
  transition: background .32s cubic-bezier(.22,1,.36,1), border-color .32s cubic-bezier(.22,1,.36,1), width .38s cubic-bezier(.22,1,.36,1), height .38s cubic-bezier(.22,1,.36,1);
}
.d-fcard.is-active { width: var(--fw-on); height: var(--fh-on); }
.d-faces.is-instant .d-fcard,
.d-faces.is-instant .d-fcard::after,
.d-faces.is-instant .d-fcard * { transition: none !important; }
.d-fcard-photo { flex: 1; min-height: 0; position: relative; }
.d-fcard-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.d-fcard-row { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; }
.d-fcard.is-active .d-fcard-row { justify-content: space-between; text-align: left; }
.d-fcard-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.d-fcard-name { font-family: 'Fredoka', system-ui, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.25; color: var(--neutral-900, #171211); }
.d-fcard-place { font-family: 'Work Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; color: var(--carbon, #28201C); }
/* Her round arrow: hidden at rest, springs in on the card in focus. It is the
   card's one link, so a keyboard user tabbing onto it also brings the card
   into focus. At rest it sits out of the row, invisible but still
   reachable by Tab. */
.d-fcard-go {
  position: absolute; right: 12px; bottom: 18px;
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 9999px;
  background: var(--magnolia, #FDF9F1); border: 1px solid var(--neutral-200, #F1EDE5); color: var(--carbon, #28201C);
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
  opacity: 0; transform: scale(.7) translateX(4px);
  transition: opacity .28s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1);
}
.d-fcard-go svg { width: 20px; height: 20px; }
.d-fcard.is-active .d-fcard-go { position: static; opacity: 1; transform: none; }
.d-fcard-go:focus-visible { opacity: 1; transform: none; outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }
/* Without JavaScript the strip is a plain swipe row and hover lights a card. */
.d-faces:not(.is-live) .d-fcard:hover { background: linear-gradient(to bottom, var(--grass-400, #BDD267), var(--grass-600, #859B2B)); border-color: var(--grass-400, #BDD267); }
.d-faces-controls { display: flex; align-items: center; gap: 12px; }
.d-faces-controls[hidden] { display: none; }
.d-faces-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 9999px; padding: 0;
  background: #fff; border: 1px solid var(--neutral-300, #E5E1D8); color: var(--carbon, #28201C);
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06);
  transition: background var(--ease), border-color var(--ease);
}
.d-faces-btn:hover { background: var(--magnolia, #FDF9F1); border-color: var(--grass-500, #A7C434); }
.d-faces-btn:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }
.d-faces-btn svg { width: 20px; height: 20px; }
.d-faces-btn .i-play { display: none; }
.d-faces-btn[aria-pressed="true"] .i-play { display: block; }
.d-faces-btn[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 640px) {
  /* Figma phone frame (faces-row 3777:8126): every card is 296 wide, a rest
     card 338 tall, the lit card about 350; name 28px, tag 14px with 2px
     tracking. The next card peeks in at 375. */
  .d-faces { --fw: 296px; --fh: 338px; --fw-on: 296px; --fh-on: 350px; }
  .d-fcard-name { font-size: 28px; }
  .d-fcard-place { font-size: 14px; letter-spacing: 2px; }
}

@media (max-width: 1100px) {
  .d-tier-hero-grid { flex-direction: column; gap: 40px; align-items: stretch; }
  .d-tier-card { padding: 40px 28px; }
  .d-level + .d-level { border-left: 0; border-top: 1px solid rgba(0,0,0,.15); padding-top: 28px; }
  .d-patients { flex-wrap: wrap; }
  .d-patient { flex: 1 1 45%; }
}
@media (max-width: 640px) {
  .d-levels { padding: 20px; gap: 20px; }
  .d-level { flex-direction: column; align-items: stretch; }
  .d-level-plate { min-height: 160px; }
  .d-patient { flex: 1 1 100%; }
  .d-tier-commit { font-size: 30px; }
}


/* The two checkout tiers put a live form in the hero card. */
.d-tier-card.donate-form { gap: 16px; }
.d-tier-card .d-chips { justify-content: center; }
.d-tier-card .d-give-fields { width: 100%; max-width: 476px; }
.d-tier-card .custom-amt { max-width: 476px; }
.d-tier-card .give-submit { border: 0; cursor: pointer; }
.d-level-cta {
  margin-top: 4px; font-size: 13px; padding: 8px 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* The label is longer than a 240px column, so let it wrap instead of
     spilling the pill over the divider. */
  max-width: 100%; white-space: normal; text-align: center; line-height: 1.3;
}
.d-level-cta svg { width: 14px; height: 14px; flex: none; }


.d-give-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
.d-give-tab {
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 16px; font-weight: 600;
  padding: 10px 20px; border-radius: 9999px;
  color: var(--neutral-50, #FDF9F1); background: transparent;
  transition: background var(--ease), color var(--ease);
}
.d-give-tab:hover { background: rgba(253, 249, 241, 0.14); }
.d-give-tab.is-active { background: var(--sunny, #FFD100); color: var(--carbon, #28201C); }
@media (max-width: 640px) { .d-give-tab { font-size: 14px; padding: 8px 14px; } }

.d-stats-band { gap: 40px; align-items: center; }
.d-stats-sub { max-width: 586px; margin: 8px auto 0; color: var(--grass-900, #2D3113); text-align: center; }
.d-stats-cta { align-self: center; }

/* ---- Homepage (Figma 2361:2545) ----
   The design's hero is a full-bleed VIDEO PLAYER with its own control bar.
   The Rob Mack PSA cutdown does not exist yet, so this is a still of a real
   patient with the same crop and scrim. When the cut lands, .home-hero-media
   becomes the <video> and the control bar goes in beside it; nothing else on
   the page has to move. */
.home-hero { position: relative; height: min(92vh, 900px); overflow: clip; border-radius: 0 0 32px 32px; }
.home-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.home-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.55) 100%); }

.home-hero-strip { padding: 0 40px; margin-top: -76px; position: relative; z-index: 2; }
.home-hero-card {
  max-width: 1360px; margin: 0 auto;
  background: var(--sunny, #FFD100);
  border-radius: 24px;
  padding: 24px 40px;
  display: flex; align-items: center; justify-content: center; gap: 40px;
  box-shadow: 0 20px 24px -4px rgba(10,13,18,.08);
}
.home-hero-text { display: flex; flex-direction: column; gap: 12px; color: var(--neutral-900, #171211); }
.home-hero-text h1 { margin: 0; max-width: 772px; }
.home-hero-text p { font-size: 20px; line-height: 1.6; margin: 0; color: inherit; }
.home-hero-ctas { display: flex; gap: 16px; align-items: center; flex: none; }

.d-headline--center { align-items: center; text-align: center; }
/* strip sizing lives with the strip rules above (2026-09-12) */

.d-stats {
  width: 100%;
  background: var(--grass-400, #BDD267);
  border-radius: 24px;
  padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  box-shadow: 0 20px 24px -4px rgba(10,13,18,.08), 0 3px 3px -1.5px rgba(10,13,18,.04);
}
.d-stats-grid { display: flex; gap: 0; width: 100%; flex-wrap: wrap; justify-content: center; }
.d-stat { flex: 1 1 180px; padding: 8px 24px; text-align: center; color: var(--grass-900, #2D3113); }
.d-stat-num { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(32px, 3.4vw, 48px); font-weight: 600; line-height: 1.12; letter-spacing: -.5px; margin: 0; color: var(--grass-900, #2D3113); }
.d-stat-label { font-family: 'Work Sans', system-ui, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.6; margin: 4px 0 0; color: var(--grass-900, #2D3113); }

.d-give-split { display: flex; gap: 56px; align-items: flex-start; width: 100%; }
.d-give-split > .d-headline { flex: 0 1 436px; }
.d-tierrows { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.d-tierrow {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--neutral-200, #F1EDE5);
  border-radius: 24px; padding: 28px 32px; color: inherit;
  transition: transform var(--ease), box-shadow var(--ease);
}
.d-tierrow--sunny { background: var(--sunny, #FFD100); }
.d-tierrow:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(10,13,18,.10); }
.d-tierrow-title { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -.5px; color: #211E1B; margin: 0; }
.d-tierrow-sub { font-size: 18px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 6px 0 0; }
.d-tierrow-cta { flex: none; }

@media (max-width: 1100px) {
  .home-hero-strip { padding: 0 24px; }
  .home-hero-card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px; }
  .d-give-split { flex-direction: column; gap: 32px; }
  .d-give-split > .d-headline { flex: 1 1 auto; }
  .d-tierrow { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .home-hero { height: 58vh; border-radius: 0 0 24px 24px; }
  .home-hero-strip { padding: 0 12px; margin-top: -48px; }
  .home-hero-text p { font-size: 17px; }
  .home-hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .home-hero-ctas > a { justify-content: center; }
  .d-stat { flex: 1 1 45%; }
  .d-stat-label { font-size: 16px; }
}


/* ---- /stories-of-hope (Figma 2796:16924) ---- */
.stories-hero { position: relative; padding: 200px 24px 40px; overflow: clip; border-radius: 0 0 32px 32px; }
.stories-hero .home-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stories-hero .home-hero-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.stories-hero-card {
  position: relative; z-index: 1;
  max-width: var(--container); margin: 0 auto;
  background: var(--carbon, #28201C);
  border-radius: 32px; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  box-shadow: 0 4px 6px -1px rgba(10,13,18,.1), 0 2px 4px -2px rgba(10,13,18,.06);
}
.stories-hero-title { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(34px, 4.4vw, 64px); font-weight: 600; line-height: 1.1; letter-spacing: -.75px; color: var(--magnolia, #FDF9F1); margin: 0; max-width: 1056px; }
.stories-hero-sub { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; line-height: 1.25; letter-spacing: -.5px; color: var(--neutral-300, #E5E1D8); margin: 0; max-width: 1056px; }

.featured-story {
  width: 100%;
  background: var(--grass, #A7C434);
  border-radius: 24px; padding: 40px;
  display: flex; align-items: center; gap: 56px;
  box-shadow: 0 20px 12px rgba(10,13,18,.08), 0 3px 1.5px rgba(10,13,18,.04);
}
.featured-story-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.featured-story-lede { font-family: 'Fredoka', system-ui, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--carbon, #28201C); margin: 0; }
.featured-story-body { font-size: 16px; line-height: 1.6; color: var(--grass-900, #2D3113); margin: 0; }
.featured-story-copy .d-btn-dark { margin-top: 8px; }
.featured-story-media { flex: 0 1 607px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.featured-story-media img { width: 100%; height: 504px; object-fit: cover; border-radius: 24px; display: block; }
.featured-story-media figcaption { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(20px, 2vw, 28px); font-weight: 500; line-height: 1.25; color: #455115; text-align: center; }

.d-patients--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.d-patients--grid .d-patient { flex: none; }

@media (max-width: 1100px) {
  .featured-story { flex-direction: column; gap: 32px; padding: 28px; }
  .featured-story-media { flex: 1 1 auto; width: 100%; }
  .featured-story-media img { height: 380px; }
  .d-patients--grid { grid-template-columns: repeat(2, 1fr); }
}
/* Phone patient card (Figma testimonial-card-V1, 3817:29777): the photo is
   275px tall at any card width, so it reads close to square at 375. */
@media (max-width: 720px) {
  .d-patients--grid .d-patient-photo { aspect-ratio: auto; height: 275px; }
  /* Keeps the longest one-line tagline on one line at 375, as in the frame. */
  .d-patients--grid .d-patient-quote { letter-spacing: -0.25px; }
}
@media (max-width: 640px) {
  .stories-hero { padding: 140px 12px 24px; border-radius: 0 0 24px 24px; }
  .stories-hero-card { padding: 28px 20px; border-radius: 24px; }
  .featured-story-media img { height: 260px; }
  .d-patients--grid { grid-template-columns: 1fr; }
}

/* ---- UTIL ---- */
.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; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }

/* ---- FACES GRID ---- */
.faces-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}
@media (max-width: 900px) { .faces-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 640px) { .faces-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.face {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--teal-tint);
  box-shadow: var(--shadow-soft);
  transition: transform var(--ease), box-shadow var(--ease);
}
.face:hover, .face:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-caption {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  background: rgba(35,31,32,0.82);
  color: var(--white);
  padding: 8px 12px;
  border-radius: 999px;
  font-family: 'Fredoka','Work Sans',sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ---- ANIMATIONS ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

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


/* ============================================================
 * Per-image object-position overrides
 *
 * Source images are 16:9 (1376x768) but are placed in 4:5 hero/story
 * containers and 4:3 grid tiles. Default object-position: 50% 50% crops
 * the subject off-center because every subject sits in the 22-38% of
 * source width. These rules pan the crop per image so the child's face
 * sits near the visual center of whatever container they land in.
 *
 * Computed from: P = (1.78/container_aspect * src_x - target_F) / (1.78/container_aspect - 1)
 * Tuned for 4:5 container with target_F = 45% (slightly left-of-center).
 * Same values also improve 4:3 grid framing.
 * ============================================================ */
.hero-visual img[src*="hero-01-srilanka-suharshi"],
.story-band-visual img[src*="hero-01-srilanka-suharshi"],
.face img[src*="hero-01-srilanka-suharshi"]           { object-position: 20% 50%; }

.hero-visual img[src*="hero-02-guyana-rahsaan"],
.story-band-visual img[src*="hero-02-guyana-rahsaan"],
.face img[src*="hero-02-guyana-rahsaan"]              { object-position: 5% 45%; }

.hero-visual img[src*="hero-03-guyana-samathra"],
.story-band-visual img[src*="hero-03-guyana-samathra"],
.face img[src*="hero-03-guyana-samathra"]             { object-position: 20% 50%; }

.hero-visual img[src*="hero-04-ecuador-claudia"],
.story-band-visual img[src*="hero-04-ecuador-claudia"],
.face img[src*="hero-04-ecuador-claudia"]           { object-position: 20% 45%; }

.hero-visual img[src*="hero-05-guyana-dave"],
.story-band-visual img[src*="hero-05-guyana-dave"],
.face img[src*="hero-05-guyana-dave"]                 { object-position: 20% 50%; }

.hero-visual img[src*="hero-06-philippines-lj"],
.story-band-visual img[src*="hero-06-philippines-lj"],
.face img[src*="hero-06-philippines-lj"]              { object-position: 25% 50%; }

.hero-visual img[src*="hero-07-guyana-isaiah"],
.story-band-visual img[src*="hero-07-guyana-isaiah"],
.face img[src*="hero-07-guyana-isaiah"]               { object-position: 30% 45%; }

.hero-visual img[src*="hero-08-costarica-jostin"],
.story-band-visual img[src*="hero-08-costarica-jostin"],
.face img[src*="hero-08-costarica-jostin"]            { object-position: 25% 45%; }

.hero-visual img[src*="hero-09-ecuador-henry"],
.story-band-visual img[src*="hero-09-ecuador-henry"],
.face img[src*="hero-09-ecuador-henry"]         { object-position: 30% 50%; }

.hero-visual img[src*="hero-10-nigeria-prisca"],
.story-band-visual img[src*="hero-10-nigeria-prisca"],
.face img[src*="hero-10-nigeria-prisca"]              { object-position: 20% 50%; }

.hero-visual img[src*="hero-11-ukraine-dana"],
.story-band-visual img[src*="hero-11-ukraine-dana"],
.face img[src*="hero-11-ukraine-dana"]                { object-position: 30% 45%; }

.hero-visual img[src*="hero-12-nicaragua-monica"],
.story-band-visual img[src*="hero-12-nicaragua-monica"],
.face img[src*="hero-12-nicaragua-monica"]            { object-position: 20% 50%; }


/* ============================================================
   2026-09-10: /about, /programs, /volunteers rebuilt to More
   Better's live HTML pages. Values come from her CSS at the 1512
   artboard; widths collapse below 1100 and 640 like the rest of
   the design layer.
   ============================================================ */

/* Light hero: copy beside a picture, 144px top in her file plus the
   height of our fixed nav. */
.d-lhero {
  display: flex; align-items: center; gap: 48px;
  padding: 176px 112px 40px;
  border-radius: 0 0 32px 32px; overflow: clip;
}
.d-lhero--sunny { background: var(--sunny, #FFD100); min-height: 683px; }
.d-lhero--white { background: #fff; gap: 56px; }
.d-lhero-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.d-lhero--white .d-lhero-copy { flex: 0 1 660px; }
.d-lhero-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(38px, 4.3vw, 64px); line-height: 1.1; letter-spacing: -.75px;
  color: var(--carbon, #28201C); margin: 0;
}
.d-lhero--sunny .d-lhero-title { color: #342304; max-width: 560px; }
.d-lhero-sub {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: clamp(20px, 1.9vw, 28px); line-height: 1.25;
  color: var(--carbon, #28201C); margin: 0;
}
.d-lhero-art { flex: 0 1 821px; min-width: 0; aspect-ratio: 821 / 539; border-radius: 16px; overflow: hidden; }
.d-lhero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.d-crumb--dark, .d-crumb--dark a { color: #5C534D; }
.d-crumb--dark a:hover { color: var(--carbon, #28201C); text-decoration: underline; }
.d-crumb--dark span { color: #D0C4B8; }
.d-crumb--dark b { color: var(--carbon, #28201C); }

/* Three real portraits on a Sunny disc: stands in for her AI collage. */
.d-collage { flex: 1 1 0; min-width: 0; position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin-left: auto; }
.d-collage::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: var(--sunny, #FFD100); }
.d-collage img {
  position: absolute; width: 42%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: 6px solid #fff; border-radius: 14px;
  box-shadow: 0 12px 24px rgba(10,13,18,.14);
}
.d-collage img:nth-child(1) { top: 2%;  left: 29%; transform: rotate(-3deg); }
.d-collage img:nth-child(2) { top: 40%; left: 0;   transform: rotate(4deg); }
.d-collage img:nth-child(3) { top: 46%; right: 0;  transform: rotate(-5deg); }

/* Photo grid on carbon, as in her volunteers hero. */
.d-pgrid {
  flex: 1 1 0; min-width: 0; align-self: stretch;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: center;
  background: var(--carbon, #28201C); padding: 24px; border-radius: 16px;
}
.d-pgrid img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }

/* Tight sections: the boxed bands sit 40px apart, 64px from the edge. */
.d-sec--tight { padding: 40px 64px; }

/* Founder story card. */
.d-feature {
  display: flex; gap: 56px; align-items: center;
  background: var(--magnolia, #FDF9F1); border-radius: 24px;
  padding: 40px 40px 40px 56px;
}
.d-feature-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.d-feature-copy .d-h3 { max-width: 492px; }
.d-feature-lede { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--carbon, #28201C); max-width: 540px; margin: 0; }
.d-feature-who { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 20px; color: var(--carbon, #28201C); margin: 8px 0 0; }
.d-feature-body { font-size: 16px; line-height: 1.6; color: var(--grass-900, #2D3113); margin: 0; }
.d-feature-media { flex: 0 1 607px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.d-feature-photo { height: 420px; border: 4px solid #F1EDE5; border-radius: 24px; overflow: hidden; }
.d-feature-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-feature-media figcaption { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.25; color: var(--forest, #455115); text-align: center; }

/* Team cards with Read More. */
#team .d-headline h2 { font-size: clamp(38px, 5vw, 64px); }
.d-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; width: 100%; text-align: left; align-items: start; }
.d-tcard {
  display: flex; flex-direction: column; gap: 12px; padding: 12px;
  border: 4px solid #F1EDE5; background: #F1EDE5;
  border-radius: 16px; transition: background .2s ease, border-color .2s ease;
}
.d-tcard.is-open { background: #E5E1D8; border-color: #E5E1D8; }
.d-tcard-photo {
  height: 275px; border-radius: 8px; overflow: hidden;
  background: var(--sunny, #FFD100);
  display: flex; align-items: center; justify-content: center;
}
.d-tcard:nth-child(even) .d-tcard-photo { background: var(--grass, #A7C434); }
.d-tcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.d-tcard-initials { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 88px; letter-spacing: -1px; color: var(--carbon, #28201C); }
.d-tcard-id { display: flex; flex-direction: column; gap: 4px; }
.d-tcard-name { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; color: #171211; margin: 0; }
.d-tcard-role { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; color: var(--carbon, #28201C); margin: 0; }
.d-tcard-desc { font-size: 18px; line-height: 1.6; color: var(--carbon, #28201C); margin: 0; }
.d-tcard-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 9999px; background: transparent; border: 0;
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px;
  color: var(--carbon, #28201C); cursor: pointer;
}
.d-tcard-btn:hover { background: rgba(0,0,0,.05); }
.d-tcard-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.d-tcard-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* "Explore ways to give": the five communities as cards. */
.d-givex { gap: 64px; align-items: center; }
.d-givex-head { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; width: 100%; }
.d-givex-title { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: clamp(30px, 2.9vw, 44px); line-height: 1.15; color: var(--carbon, #28201C); margin: 0 0 12px; }
.d-givex-sub { font-size: 20px; line-height: 1.6; color: #5C534D; margin: 0; }
.d-gcards { display: flex; gap: 24px; align-items: stretch; width: 100%; }
.d-gcard {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px;
  padding: 24px 16px; border-radius: 8px;
  background: #F1EDE5; color: inherit;
  transition: transform var(--ease), box-shadow var(--ease);
}
.d-gcard--sunny { background: var(--sunny, #FFD100); }
.d-gcard:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(10,13,18,.10); }
.d-gcard-img { aspect-ratio: 233.6 / 185; height: auto; width: 100%; border-radius: 16px; overflow: hidden; flex-shrink: 0; }
.d-gcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-gcard-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.d-gcard-info h3 { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; color: #211E1B; margin: 0; }
.d-gcard-info p { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; color: #5C534D; margin: 0; }
.d-gcard-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 9999px;
  background: var(--carbon, #28201C); border: 1px solid #3D342F;
  color: var(--magnolia, #FDF9F1);
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.4;
}
.d-gcard-cta svg { width: 16px; height: 16px; flex: none; }

/* Copy beside site cards or a photo. */
.d-outreach { display: flex; align-items: center; gap: 64px; width: 100%; }
.d-outreach-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.d-outreach-side { flex: 1 1 0; min-width: 0; display: flex; gap: 24px; }
.d-site {
  flex: 1 1 0; min-width: 0; background: #fff; color: inherit;
  border: 1px solid #E5E1D8; border-radius: 24px;
  box-shadow: 0 4px 3px rgba(10,13,18,.1), 0 2px 2px rgba(10,13,18,.06);
  padding: 20px; display: flex; flex-direction: column; gap: 20px;
}
.d-site img { width: 100%; height: 200px; border-radius: 16px; object-fit: cover; display: block; }
.d-site-text { display: flex; flex-direction: column; gap: 8px; }
.d-site h3 { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.25; color: var(--carbon, #28201C); margin: 0; }
.d-site p { font-size: 18px; line-height: 1.6; color: #5C534D; margin: 0; }
.d-outreach-photo { flex: 1 1 0; min-width: 0; height: 480px; border: 4px solid #F1EDE5; border-radius: 32px; overflow: hidden; }
.d-outreach-photo--tall { height: 600px; }
.d-outreach-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Boxed bands: magnolia steps, carbon volunteer ask, grass CTA. */
.d-box { width: 100%; border-radius: 16px; padding: 48px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.d-box .d-h3 { max-width: 640px; }
.d-box > p { margin: 0; max-width: 600px; }
.d-box--magnolia { background: var(--magnolia, #FDF9F1); }
.d-box--carbon { background: var(--carbon, #28201C); padding: 56px; gap: 20px; }
.d-box--carbon .d-h3 { color: #fff; }
.d-box--carbon > p { font-size: 18px; line-height: 1.6; color: #FBF7E7; }
.d-box--grass { background: var(--grass, #A7C434); }
.d-box--grass > p { font-weight: 600; font-size: 20px; line-height: 1.6; color: var(--grass-950, #1F200F); }
.d-box .d-steps { gap: 16px; }
.d-step-art--lg { width: 142px; height: 142px; }
.d-step-art--lg img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.d-box--magnolia .d-step-title, .d-box--magnolia .d-step-body { color: var(--grass-900, #2D3113); }
.d-box--magnolia .d-step-body { max-width: 240px; }

/* Questions: call card + FAQ. */
.d-info { display: flex; gap: 80px; align-items: flex-start; width: 100%; text-align: left; }
.d-info-col { flex: 0 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.d-callcard {
  background: #fff; border: 3px solid var(--magnolia, #FDF9F1); border-radius: 24px;
  padding: 40px 24px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
  box-shadow: 0 1px 2px -1px rgba(10,13,18,.1), 0 1px 3px rgba(10,13,18,.1);
}
.d-callcard-avatar { width: 107px; height: 107px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.d-callcard-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.d-callcard-txt { display: flex; flex-direction: column; gap: 8px; }
.d-callcard h3 { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: -.5px; color: var(--carbon, #28201C); margin: 0; }
.d-callcard p { font-size: 18px; line-height: 1.6; color: rgba(40,32,28,.75); margin: 0; }
.d-callcard p a { text-decoration: underline; }
.d-callcard-btns { display: flex; gap: 16px; width: 100%; flex-wrap: wrap; }
.d-callcard-btns .btn { flex: 1 1 0; justify-content: center; }
.d-faqs { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.d-faq {
  background: #fff; border: 3px solid #fff; border-radius: 12px; padding: 28px 20px;
  box-shadow: 0 1px 2px -1px rgba(10,13,18,.1), 0 1px 3px rgba(10,13,18,.1);
}
.d-faq[open] { border-color: var(--magnolia, #FDF9F1); }
.d-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none;
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.4;
  color: var(--carbon, #28201C);
}
.d-faq summary::-webkit-details-marker { display: none; }
.d-faq summary::after {
  content: "+"; flex: none; width: 32px; height: 32px; border-radius: 16px;
  background: var(--sunny, #FFD100); color: var(--carbon, #28201C);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
}
.d-faq[open] summary::after { content: "\2212"; }
.d-faq-a { margin-top: 12px; }
.d-faq-a p { font-size: 18px; line-height: 1.6; color: rgba(40,32,28,.78); margin: 0; }
.d-faq-a a { text-decoration: underline; }

/* Volunteer pathways. */
.d-paths { display: flex; gap: 40px; align-items: stretch; width: 100%; text-align: left; }
.d-path {
  flex: 1 1 0; min-width: 0;
  background: var(--magnolia, #FDF9F1); border: 5px solid var(--magnolia, #FDF9F1); border-radius: 24px;
  padding: 40px 28px; display: flex; flex-direction: column; gap: 48px;
}
.d-path-head { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 1100px) {
  .d-lhero { flex-direction: column; align-items: stretch; padding: 168px 40px 40px; gap: 40px; }
  .d-lhero--sunny { min-height: 0; }
  .d-lhero--white .d-lhero-copy { flex: none; }
  .d-lhero-art { flex: none; width: 100%; }
  .d-collage { flex: none; width: 100%; max-width: 520px; margin: 0 auto; }
  .d-pgrid { flex: none; width: 100%; }
  .d-sec--tight { padding: 32px 24px; }
  .d-feature { flex-direction: column; align-items: stretch; padding: 32px; gap: 32px; }
  .d-feature-media { flex: none; width: 100%; }
  .d-feature-photo { height: 340px; }
  .d-team { grid-template-columns: repeat(2, 1fr); }
  .d-gcards { flex-wrap: wrap; }
  .d-gcard { flex: 1 1 calc(50% - 12px); }
  .d-outreach { flex-direction: column; align-items: stretch; gap: 40px; }
  .d-outreach-photo, .d-outreach-photo--tall { flex: none; width: 100%; height: 380px; }
  .d-info { flex-direction: column; gap: 40px; }
  .d-info-col { flex: none; width: 100%; }
  .d-paths { flex-direction: column; }
  .d-box .d-steps { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .d-lhero { padding: 132px 20px 32px; border-radius: 0 0 24px 24px; }
  .d-pgrid { gap: 8px; padding: 12px; }
  .d-sec--tight { padding: 24px 16px; }
  .d-feature { padding: 24px 20px; }
  .d-feature-photo { height: 240px; }
  .d-feature-media figcaption { font-size: 22px; }
  .d-team { grid-template-columns: 1fr; }
  .d-tcard-photo { height: 240px; }
  .d-gcard { flex: 1 1 100%; }
  .d-outreach-side { flex-direction: column; }
  .d-outreach-photo, .d-outreach-photo--tall { height: 260px; }
  .d-box, .d-box--carbon { padding: 32px 20px; }
  .d-path { padding: 28px 20px; gap: 32px; }
  .d-givex-sub { font-size: 17px; }
  .d-faq { padding: 22px 16px; }
}

/* About "From chaos to confidence": sticky headline, four stacked cards. */
.d-impact-sec { padding: 80px 64px; }
.d-impact { display: flex; gap: 64px; align-items: flex-start; width: 100%; }
.d-impact-head { position: sticky; top: 124px; flex: 0 0 509px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.d-impact-head .d-h3 { color: var(--grass-900, #2D3113); }
.d-impact-head p { font-size: 18px; line-height: 1.6; color: #22250E; margin: 0; }
.d-isteps { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.d-istep { display: flex; align-items: center; gap: 44px; background: var(--magnolia, #FDF9F1); border: 1px solid var(--magnolia, #FDF9F1); border-radius: 16px; padding: 48px; }
.d-istep-icon { width: 142px; height: 142px; flex: none; display: flex; align-items: center; justify-content: center; }
.d-istep-icon img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.d-istep-text { display: flex; flex-direction: column; gap: 10px; }
.d-istep-text h3 { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.4; color: #2D3113; margin: 0; }
.d-istep-text p { font-size: 16px; line-height: 1.6; color: #2D3113; margin: 0; }
.d-givex { padding-left: 44px; padding-right: 44px; }
@media (max-width: 1100px) {
  .d-impact-sec { padding: 64px 40px; }
  .d-impact { flex-direction: column; gap: 32px; }
  .d-impact-head { position: static; flex: none; width: 100%; }
  .d-givex { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 640px) {
  .d-impact-sec { padding: 48px 20px; }
  .d-istep { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 24px; }
  .d-istep-icon { width: 96px; height: 96px; }
  .d-givex { padding-left: 20px; padding-right: 20px; }
}

/* Art's photos in the former placeholder plates (2026-09-23). The image
   covers its box and never stretches. The /give plate keeps overflow visible
   because its badge hangs off the corner, so the image carries the radius. */
.d-give-plate--photo > img,
.d-level-plate--photo > img,
.d-phero-art--photo > img,
.d-plate--photo > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: inherit;
}
.d-level-plate--photo, .d-plate--photo { position: relative; overflow: hidden; }
.d-phero-art--photo { background: var(--neutral-300, #E5E1D8); }
.d-phero-art--photo::before { display: none; }
@media (max-width: 1100px) {
  .d-give-plate--photo .d-give-badge { position: relative; z-index: 2; display: inline-block; margin: 14px; }
}

/* ---- Hand-drawn edge (More Better "wavy" ring), sitewide ----
   The footer partial carries the #sh-wavy SVG filter on every page. Add
   .wavy-edge to any card, badge or panel with a solid background: the ring
   repeats the element's background colour and runs through the filter.
   Set --wavy-color when the ring should differ from the background. */
.wavy-edge { position: relative; isolation: isolate; }
.wavy-edge::after {
  /* Overlaps the element's edge by 2px so the displaced ring never shows a
     gap (a -4px ring read as a broken double outline on borderless panels).
     Bordered cards set their own ring offset in page CSS. */
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  border: 4px solid var(--wavy-color, currentColor);
  pointer-events: none; filter: url(#sh-wavy); z-index: -1;
}

/* ---- Shared footer (tools/site_chrome.py; Figma Footer 2379:3714) ----
   Newsletter in one row (name, email, Subscribe) on a Sunny-100 card with
   the hand-drawn ring; SMS opt-in is a checkbox that reveals the phone field
   (the client asked for SMS, the design has no phone field in the row). */
.site-footer .sf-inner { max-width: 1416px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 48px; }
.sf-news { display: flex; align-items: flex-end; gap: 24px; background: var(--sunny-100, #FCF3CC); border-radius: 24px; padding: 24px 28px; }
.sf-news-head { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; color: var(--carbon, #28201C); }
.sf-news-head p { font-size: 20px; line-height: 1.6; color: var(--carbon, #28201C); opacity: .85; margin: 0; }
.sf-news-form { display: flex; flex-direction: column; gap: 8px; flex: none; }
.sf-news-row { display: flex; gap: 8px; align-items: center; }
.sf-news-row input, .sf-news-phone input {
  width: 287px; height: 56px; padding: 16px 20px; border-radius: 9999px;
  border: 1px solid var(--neutral-400, #D0C4B8); background: #fff;
  font: 400 14px/1.6 'Work Sans', system-ui, sans-serif; color: var(--carbon, #28201C);
}
.sf-news-row input::placeholder, .sf-news-phone input::placeholder { color: var(--neutral-600, #5C534D); }
.sf-news-row input:focus-visible, .sf-news-phone input:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }
.sf-news-submit { font-size: 16px; padding: 12px 16px; min-height: 56px; }
.sf-news-sms { display: flex; gap: 8px; align-items: flex-start; max-width: 590px; font-size: 13px; line-height: 1.5; color: var(--neutral-600, #5C534D); cursor: pointer; }
.sf-news-sms a { text-decoration: underline; }
.sf-news-sms input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--carbon, #28201C); }
.sf-news-phone { display: flex; flex-direction: column; gap: 6px; }
.sf-news-phone p { font-size: 12px; line-height: 1.5; color: var(--neutral-600, #5C534D); max-width: 590px; margin: 0; }
.sf-news-phone a { text-decoration: underline; }
.sf-news-note { font-size: 14px; line-height: 1.6; color: var(--neutral-600, #5C534D); opacity: .85; margin: 0; }
.sf-news-done { flex: 1 1 0; display: flex; gap: 20px; align-items: center; justify-content: center; }
.sf-news-done[hidden], .sf-news-form[hidden], .sf-news-phone[hidden] { display: none; }
.sf-news-done:focus { outline: none; }
.sf-news-check { width: 44px; height: 44px; border-radius: 100px; background: var(--sunny, #FFD100); display: inline-flex; align-items: center; justify-content: center; }
.sf-news-done strong { display: block; font: 600 24px/1.2 'Fredoka', system-ui, sans-serif; color: var(--carbon, #28201C); }
.sf-news-done span:not(.sf-news-check) { display: block; font-size: 14px; color: var(--carbon, #28201C); opacity: .7; }
.sf-main { display: flex; justify-content: space-between; gap: 56px; }
.sf-brand { width: 380px; flex: none; display: flex; flex-direction: column; gap: 24px; }
.sf-brand img { width: 100%; height: auto; }
.sf-brand p { font-size: 18px; line-height: 1.6; color: rgba(0,0,0,.6); margin: 0; }
/* Figma "Frame 191": email and city sit 10px under the description, 10px apart (29px lines). */
.sf-brand p.sf-brand-contact { line-height: 39px; margin-top: -19px; }
.sf-brand-contact a { color: inherit; }
.sf-brand-contact a:hover { text-decoration: underline; }
/* Figma footer-links (2379:3783): starts 56px after the 380px brand column, 980 wide, four 209px columns. */
.sf-links { width: 980px; max-width: 100%; display: flex; gap: 48px; }
.sf-links > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sf-links .ty-label { color: #000; margin: 0; }
.sf-links ul { gap: 16px; }
.sf-divider { width: 100%; height: 6px; display: block; }
.sf-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #000; }
.sf-bottom p { font-size: 14px; line-height: 1.6; color: #000; margin: 0; }
.sf-legal { display: flex; gap: 16px; font-size: 16px; }
.sf-legal a:hover { text-decoration: underline; }
@media (max-width: 1280px) {
  .sf-news { flex-direction: column; align-items: stretch; }
  .sf-news-row input { width: auto; flex: 1 1 0; min-width: 0; }
  .sf-main { flex-direction: column; }
  .sf-links { width: 100%; }
}
@media (max-width: 720px) {
  /* Figma mobile "Newsletter and footer" (3947:31131): 24px gutters, 40px
     top and bottom, 32px between blocks. */
  .site-footer { padding: 40px 24px; }
  .site-footer .sf-inner { gap: 32px; }
  .sf-news { padding: 24px; border-radius: 24px; gap: 24px; }
  .sf-news-head { gap: 8px; }
  .sf-news-head .ty-h4 { font-size: 32px; line-height: 1.2; letter-spacing: -0.5px; }
  .sf-news-head p { font-size: 16px; line-height: 1.5; }
  .sf-news-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .sf-news-row input, .sf-news-phone input { width: 100%; }
  .sf-news-submit { width: 100%; }
  .sf-news-note { text-align: center; }
  .sf-main { gap: 40px; }
  .sf-brand { width: 100%; gap: 20px; }
  .sf-brand img { width: 100%; max-width: 341px; }
  .sf-links { flex-wrap: wrap; gap: 40px 24px; }
  .sf-links > div { flex: 0 0 calc(50% - 12px); }
  .sf-links a { font-size: 18px; }
  .sf-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sf-legal { flex-wrap: wrap; gap: 10px 16px; font-size: 16px; }
}

/* ---- Face-safe crops (local YuNet audit, 2026-09-24) ----
   Positions chosen so every head stays in frame at 390-2560px. These photos
   are shared across pages; !important beats inline object-position. */
img[src*="card-anchors"] { object-position: 40% 48% !important; }

/* ---- Phone foundations (Figma mobile frames, 375 wide; added 2026-10-02) ----
   Mobile text styles in the design file ("Typography/Mobile/..."):
     H3  Fredoka 600 36/1.2  -0.5px     H4  Fredoka 500 32/1.2  -0.5px
     H5  Fredoka 500 28/1.25            H7  Fredoka 500 22/1.3
     Body Large 18/1.6   Body 16/1.6   Body Small 14/1.6
     Label Work Sans 600 14/1.4, 2px tracking, uppercase
   Gutters are 24px. The nav is a full pill, 24px from each side and 40px from
   the top of the page (node 3947:31292); once the page scrolls it tucks up. */
@media (max-width: 720px) {
  .nav { padding: 40px 24px 0; }
  .nav.scrolled, .nav.nav-open { padding-top: 12px; }
  .nav-inner { border-radius: 1000px; padding: 12px 24px; min-height: 44px; }
  .nav-open .nav-inner { border-radius: 24px; }
  .nav-logo img { height: 58px; }
  .ty-h2, .ty-h3, .d-h3 { font-size: 36px; line-height: 1.2; letter-spacing: -0.5px; }
  .ty-h4 { font-size: 32px; line-height: 1.2; letter-spacing: -0.5px; }
  .ty-h5 { font-size: 28px; line-height: 1.25; }
}

/* Card scrollers (phones): add data-scroller to the row; site-chrome.js adds
   the dots. A page stylesheet sets the row's own display, gap and card width. */
[data-scroller] { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
[data-scroller]::-webkit-scrollbar { display: none; }
[data-scroller]:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 4px; }
.sc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.sc-dots i { width: 8px; height: 8px; border-radius: 9999px; background: var(--neutral-300, #E5E1D8); transition: width var(--ease), background var(--ease); }
.sc-dots i.is-on { width: 24px; background: var(--sc-dot, var(--grass, #A7C434)); }
@media (prefers-reduced-motion: reduce) { .sc-dots i { transition: none; } }

/* Checkout return notice ("Thank you" / "No payment was taken"). A floating
   card just under the nav pill; the page scripts set --sh-nav-bottom. */
.sh-return-note {
  position: fixed; left: 50%; top: calc(var(--sh-nav-bottom, 96px) + 12px); transform: translateX(-50%);
  z-index: 9999; display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 14px 16px 14px 22px; border-radius: 18px;
  background: #fff; color: #28201C; border: 1px solid rgba(40, 32, 28, .12);
  font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; text-align: left;
  box-shadow: 0 10px 32px rgba(40, 32, 28, .24);
}
.sh-return-note.is-ok { background: #FFD100; }
.sh-return-note button {
  flex: none; min-height: 40px; padding: 6px 16px; border-radius: 999px;
  background: transparent; border: 1px solid currentColor; color: inherit; font: inherit; cursor: pointer;
}
.sh-return-note button:hover { background: rgba(40, 32, 28, .08); }
@media (max-width: 720px) { .sh-return-note { width: calc(100vw - 32px); padding: 14px 14px 14px 18px; font-size: 15px; } }

/* Narrow phones (320 to 374px): a smaller logo so it keeps its shape inside the pill. */
@media (max-width: 374px) {
  .nav-logo { flex: none; }
  .nav-logo img { height: 46px; max-width: none; }
}

/* Smallest phones (320 to 359px). Long button labels get smaller type; a
   label that still does not fit wraps inside its button instead of spilling
   past it. Small paired buttons stay on one line. */
@media (max-width: 359px) {
  .btn-primary:not(.btn-sm):not(.vp-btn-sm):not(.gt-seg-cta), .d-btn-dark, .d-btn-light {
    font-size: 16px !important; white-space: normal !important; text-align: center;
  }
  .btn-sm, .vp-btn-sm { font-size: 14px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .gt-call-btns .btn, .pg-bookcall-btns .btn, .pg-bookcall-btns .d-btn-dark { white-space: nowrap !important; }
  .gt-seg-cta { font-size: 14px !important; padding-left: 8px !important; padding-right: 8px !important; }
}