/* Give a Turkey - design system v4
   Layout inspired by anthonynolan.org: clean, serious, story-first.
   Brand kept: Puimek display font, brand colors, hand-drawn illustrations. */

:root {
  /* Brand palette (orange theme, from Joseph's palette: vivid orange, cream, dark olive, green) */
  --red: #E04F17;
  --red-dark: #8A2D0A;
  --red-mid: #B33D0E;
  --red-accent: #F0631F;
  --off-white: #FFF9EC;
  --cream: #FFEED0;
  --white: #FFFFFF;
  --paper: #FFFCF5;
  --trust-bg: #DE4A11;
  --hero-end: #E85D1A;
  --cta-top: #A8340F;
  --sun: #FFC42E;
  --joy-red: #E63946;
  --joy-green: #2FA84F;
  --gray-text: #6B655A;
  --gray-dark: #4A463C;
  --gray-ink: #3E3A2F;

  /* Illustration palette (brand art, warmed to orange theme) */
  --ill-red: #E04F17;
  --ill-green: #679817;
  --ill-gold: #D27E26;
  --ill-brown: #C98F4E;
  --ill-brown-deep: #A9742A;
  --ill-bg: #FAEECF;

  /* Gradients */
  --grad-hero: #C8380D;
  --grad-band: #DE4A11;
  --grad-cta: #A8340F;
  --grad-meter: linear-gradient(90deg, #E04F17 0%, #F0631F 100%);
  /* was referenced four times but never defined, so any element using it
     painted transparent (the donate step numbers were invisible white). */
  --grad-joy: linear-gradient(135deg, #E04F17 0%, #B33D0E 100%);

  /* Type */
  --font-display: 'Puimek', cursive;
  --font-body: 'Poppins', Arial, sans-serif;

  /* Rhythm */
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 10px rgba(31, 26, 26, 0.07);
  --shadow: 0 8px 28px rgba(31, 26, 26, 0.10);
  --shadow-lg: 0 18px 50px rgba(31, 26, 26, 0.16);
}

@font-face {
  font-family: 'Puimek';
  src: url('../fonts/puimek-regular.woff2') format('woff2'),
       url('../fonts/puimek-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--gray-ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--red-dark);
}

h1 { font-size: 3rem; letter-spacing: 0.3px; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.1rem; }

img { max-width: 100%; height: auto; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--white);
  background: var(--red);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.btn:hover { background: var(--red-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow); }

.btn-gold { background: var(--ill-gold); color: var(--gray-ink); }
.btn-gold:hover { background: #E0A93A; color: var(--gray-ink); }

.btn-outline { background: transparent; color: var(--red); border: 2px solid var(--red); box-shadow: none; }
.btn-outline:hover { background: var(--red); color: var(--white); }

.btn-white { background: var(--white); color: var(--red-dark); }
.btn-white:hover { background: var(--off-white); color: var(--red-dark); }

.btn-big { font-size: 1.3rem; padding: 16px 40px; }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--white);
  border-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(27, 27, 27, 0.06);
}

.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

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

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

.brand-text {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--red-dark);
  line-height: 1;
}

.brand-text small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ill-green);
}

.main-nav ul { display: flex; list-style: none; gap: 2px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.main-nav a {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--gray-dark);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.main-nav a:hover { color: var(--red); background: var(--off-white); }
.main-nav a.active { color: var(--red-dark); font-weight: 700; }

.nav-donate a {
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  padding: 10px 22px;
  box-shadow: var(--shadow-sm);
}

.nav-donate a:hover { background: var(--red-dark); color: var(--white); }

/* ---------- Hero ---------- */
.hero {
  background: var(--grad-hero);
  color: var(--white);
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -12%;
  width: 55%;
  height: 180%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-copy h1 { color: var(--white); margin-bottom: 16px; }

.hero-copy .tagline {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ill-gold);
  margin-bottom: 14px;
}

.hero-copy p { font-size: 1.08rem; color: rgba(255, 255, 255, 0.93); max-width: 32em; margin-bottom: 26px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-art img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 40px;
  padding: 8px 18px;
  margin-bottom: 20px;
}

/* ---------- Trust strip ---------- */


.trust-strip strong { color: var(--ill-gold); }

/* ---------- Sections ---------- */
.section { padding: 46px 24px; }

.section-inner { max-width: 1180px; margin: 0 auto; }

.section-head { text-align: center; max-width: 740px; margin: 0 auto 28px; }

/* Kicker / eyebrow label. The base styling lives on the bare class so a kicker
   inside a plain .reveal block (story, statement, split sections) renders as the
   small uppercase label above its heading. Previously only .section-head and
   .impact-copy scoped it, so those other kickers fell back to body text and sat
   inline on the heading's baseline. */
.kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 10px;
}

.section-head .kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 10px;
}

.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--gray-text); font-size: 1.06rem; }

.accent { position: relative; display: inline-block; padding-bottom: 12px; }
.accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--grad-band);
}

.section-head .accent::after { left: 50%; transform: translateX(-50%); }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid rgba(48, 48, 48, 0.08);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.card h3 { margin-bottom: 7px; }
.card p { color: var(--gray-text); font-size: 0.99rem; }
.card .card-link { font-weight: 600; margin-top: 10px; display: inline-block; }

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--off-white);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 16px;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ---------- Stats / impact band ---------- */
.stats {
  background: var(--grad-band);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: center;
}

.stat .num {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--white);
  display: block;
  line-height: 1.1;
}

.stat .label { color: rgba(255, 255, 255, 0.88); font-weight: 500; font-size: 0.95rem; }

/* ---------- Meter ---------- */
.meter-card {
  max-width: 840px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(48, 48, 48, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px 22px;
}

.meter-card h3 { text-align: center; margin-bottom: 6px; }

.meter-sub { text-align: center; color: var(--gray-text); margin-bottom: 18px; font-size: 1rem; }
.meter-sub strong { color: var(--red); }

.meter-track {
  background: var(--off-white);
  border-radius: 30px;
  height: 28px;
  padding: 4px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 0%;
  background: var(--grad-meter);
  border-radius: 30px;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.meter-numbers {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gray-ink);
}

.meter-numbers .raised { color: var(--red); font-size: 1.5rem; }

/* ---------- Countdown ---------- */
.countdown { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

.countdown .unit {
  background: var(--off-white);
  border-radius: var(--radius-sm);
  min-width: 88px;
  padding: 14px 10px 10px;
  text-align: center;
}

.countdown .unit .n {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--red);
  display: block;
  line-height: 1;
}

.countdown .unit .l {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gray-text);
}

/* ---------- Story blocks ---------- */
.story-block { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }

.story-block h2 { margin-bottom: 12px; }
.story-block p { color: var(--gray-text); margin-bottom: 10px; font-size: 1.04rem; }

.story-art { display: flex; }
.story-art img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Hand-drawn speech bubble. No side bar. */
.pull-quote {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.38;
  color: #7B2C0E;
  background: #FFF6E6;
  border: 2.5px solid rgba(123, 44, 14, 0.20);
  border-radius: 28px 22px 30px 20px;
  padding: 26px 28px 20px 60px;
  margin: 20px 0 30px;
  box-shadow: 5px 6px 0 rgba(224, 79, 23, 0.12);
}
.pull-quote::before {
  content: "\201C";
  position: absolute;
  left: 18px;
  top: 8px;
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
  color: rgba(217, 84, 30, 0.55);
}
.pull-quote::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -12px;
  width: 22px;
  height: 22px;
  background: #FFF6E6;
  border-right: 2.5px solid rgba(123, 44, 14, 0.20);
  border-bottom: 2.5px solid rgba(123, 44, 14, 0.20);
  box-shadow: 3px 3px 0 rgba(224, 79, 23, 0.12);
  transform: rotate(45deg);
  border-radius: 0 0 6px 0;
}
.pull-quote span { color: var(--red); }
.pull-quote .quote-by {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gray-text);
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* Steps: open numbered flow, no card boxes */
.step {
  position: relative;
  background: none;
  border: none;
  border-top: 3px dashed rgba(123, 44, 14, 0.22);
  border-radius: 0;
  padding: 16px 14px 0 0;
  box-shadow: none;
  transition: none;
}

.step:hover { transform: none; box-shadow: none; }
.step:hover .step-num { color: #B8451A; }

.step .step-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--red);
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  display: block;
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

.step h3 { margin-bottom: 8px; }
.step p { color: var(--gray-text); font-size: 0.95rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--grad-cta);
  color: var(--white);
  text-align: center;
  padding: 42px 24px;
}

.cta-band h2 { color: var(--white); margin-bottom: 10px; }
.cta-band p { color: rgba(255, 255, 255, 0.9); max-width: 34em; margin: 0 auto 18px; font-size: 1.05rem; }

/* ---------- FAQ ---------- */
.faq-item {
  background: var(--white);
  border: 1px solid rgba(48, 48, 48, 0.08);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq-q {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--red-dark);
  padding: 18px 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.faq-q .chev { transition: transform 0.25s ease; color: var(--red); }

.faq-item.open .chev { transform: rotate(180deg); }

.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-a p { padding: 0 22px 16px; color: var(--gray-text); }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--red-dark);
  margin-bottom: 6px;
}

.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(48, 48, 48, 0.18);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  /* 1rem, not 0.98rem: below 16px iOS Safari auto-zooms the page when a
     donor taps a field, which wrecks the donation form on iPhone. */
  font-size: 1rem;
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(224, 79, 23, 0.16);
}

.form-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(48, 48, 48, 0.08);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}

/* ---------- Donation picker ---------- */
.donation-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }

.donation-picker button {
  font-family: var(--font-display);
  font-size: 1.3rem;
  padding: 14px 8px;
  border: 1.5px solid rgba(48, 48, 48, 0.18);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  color: var(--gray-ink);
  transition: all 0.15s ease;
}

.donation-picker button:hover { border-color: var(--red); color: var(--red); }

.donation-picker button.selected { background: var(--red); border-color: var(--red); color: var(--white); }

/* Donate page: simplified full-width centered form */
.donate-layout { max-width: 780px; margin: 0 auto; }
.donate-head { text-align: center; margin-bottom: 18px; }
.donate-head h2 { font-size: 2.2rem; margin-bottom: 8px; }
.donate-head p { color: var(--gray-text); max-width: 560px; margin: 0 auto; }
.donate-card { padding: 24px 26px; }
#paypal-button-container, #paypal-subscribe-container { width: 100%; }
.donate-card .card-hint { text-align: center; }
.form-step { padding: 16px 0; border-bottom: 1px dashed rgba(224, 79, 23, 0.25); }
.form-step:last-of-type { border-bottom: 0; padding-bottom: 0; }
.step-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-band); color: var(--white); font-weight: 700; font-size: 1rem; flex: none; }
.step-heading h3 { margin: 0; font-size: 1.25rem; }
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.donate-info { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.donate-info .card { padding: 20px; }
.donate-info .card h3 { margin-bottom: 10px; }
.donate-info .card img { width: 100%; border-radius: 12px; margin-bottom: 14px; }
.meal-showcase { max-width: 620px; margin: 24px auto 0; text-align: center; }
.meal-showcase img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.meal-caption { font-size: 0.92rem; color: var(--gray-text); margin-top: 10px; }

/* Home how-it-works: photo left, steps 2x2 right */
.how-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 26px; align-items: center; }
.how-grid .meal-showcase { margin: 0; max-width: none; }
.how-grid .meal-showcase img { max-height: 560px; object-fit: cover; }
.steps-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; }
  .how-grid .meal-showcase { max-width: 620px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .donate-card { padding: 22px 18px; }
  .field-grid-2 { grid-template-columns: 1fr; }
  .donate-info { grid-template-columns: 1fr; }
}

/* Donate form validation: red outline per field + inline error + top banner */
.form-error-summary {
  display: none;
  background: #FDECEA;
  border: 1px solid #E57373;
  color: #8E0000;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 0.95rem;
}
.form-error-summary.show { display: block; }
.field-error-box { border-color: #C62828 !important; background: #FFF5F5 !important; }
.field-error-text { color: #C62828; font-size: 0.85rem; font-weight: 600; margin-top: 6px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--red-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 38px 24px 22px;
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
}

.footer-inner h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ill-gold);
  margin-bottom: 14px;
}

.footer-inner a { color: rgba(255, 255, 255, 0.8); }
.footer-inner a:hover { color: var(--ill-gold); }

.footer-inner ul { list-style: none; }
.footer-inner li { margin-bottom: 7px; font-size: 0.95rem; }

.footer-about p { font-size: 0.96rem; margin-bottom: 10px; color: rgba(255, 255, 255, 0.75); }

/* Tap target: was 24px tall, and the bare "X" link only 10px wide. Padding
grows the hit box to a proper size; the negative margin keeps the row
visually aligned with the heading above it. */
.socials { margin-left: -8px; }
.socials a {
  display: inline-block;
  margin-right: 0;
  padding: 11px 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ill-gold);
}

.footer-bottom {
  max-width: 1180px;
  margin: 28px auto 0;
  padding-top: 22px;
  border-top: 2px dashed rgba(255, 255, 255, 0.25);
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

.footer-bottom .charity-badge {
  display: inline-block;
  background: var(--ill-gold);
  color: var(--gray-ink);
  font-weight: 700;
  border-radius: 30px;
  padding: 5px 18px;
  margin-bottom: 10px;
}

.footer-bottom a { color: rgba(255, 255, 255, 0.75); }

/* ---------- Scroll reveal ---------- */
/* Content is visible by default. Only hide it for the reveal effect when JS
   is running, so a JS failure or a crawler never sees a blank page. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero { padding: 60px 24px; }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }
  .grid-3, .grid-4, .steps { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .story-block { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .grid-3, .grid-4, .steps, .donation-picker { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ---------- Mobile hamburger nav ---------- */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle-bar {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--red-dark);
  border-radius: 2px;
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; margin-left: auto; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid rgba(48, 48, 48, 0.1);
    box-shadow: var(--shadow);
    padding: 10px 16px 18px;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; justify-content: flex-start; }
  .main-nav a { padding: 13px 14px; border-radius: var(--radius-sm); font-size: 1rem; }
  .nav-donate a { text-align: center; margin-top: 8px; }
}

/* ---------- Donate form message ---------- */
.donate-msg { font-size: 0.9rem; color: #C62828; margin-top: 10px; min-height: 1.2em; text-align: center; font-weight: 600; }

/* ---------- Donate form hints ---------- */
.addr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card-hint { font-size: 0.8rem; color: var(--gray-text); margin-top: 6px; }
@media (max-width: 560px) { .addr-row { grid-template-columns: 1fr; } }

/* ---------- Rebuild fixes ---------- */
/* Active "Donate" nav button must keep white text on red (not red-on-red) */
.nav-donate a.active,
.nav-donate a.active:hover { color: var(--white); }

.hidden { display: none !important; }

/* Form labels clearer */
.field label { font-weight: 600; color: var(--gray-ink); display: block; margin-bottom: 6px; }
.req { color: var(--red); margin-left: 2px; }

/* Prominent success banner */
.donate-success {
  display: none;
  background: #E7F6EC;
  border: 2px solid #2E7D32;
  border-radius: var(--radius);
  padding: 30px 22px;
  text-align: center;
  margin-top: 6px;
}
.donate-success.open { display: block; }
.donate-success .check { font-size: 2.6rem; line-height: 1; color: #2E7D32; }
.donate-success h3 { color: #1B5E20; margin: 12px 0 8px; font-size: 1.5rem; }
.donate-success p { color: #2E7D32; margin: 0; }

/* Amount field with $ prefix */
.amount-input { position: relative; }
.amount-input .amount-currency { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--gray-ink); font-weight: 600; pointer-events: none; }
.amount-input input { width: 100%; padding-left: 38px; }

/* Fix: hero paragraph rule (white) must not override meter-sub text (gray) on white card */
.meter-card .meter-sub { color: var(--gray-text); }
.meter-card .meter-sub strong { color: var(--red); }

/* ---------- Donor type / business / anonymous ---------- */
.donor-type { display: flex; gap: 8px; }
.donor-type-btn {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--red);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 1rem;
}
.donor-type-btn:hover { background: var(--off-white); }
.donor-type-btn.selected { background: var(--red); color: var(--white); }

.business-fields {
  background: var(--off-white);
  border: 1px dashed var(--red-mid, #B33D0E);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.field.checkbox .check-label { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; margin: 0; }
.field.checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--red); }

/* ---------- v2026 redesign additions ---------- */

/* Photo-led hero */
.hero-photo .hero-copy h1 { font-size: 2.7rem; }
.hero-note { font-family: var(--font-display); font-size: 1.25rem; color: var(--ill-gold); margin-top: 14px; }

/* Impact bar: copy + meter side by side */
.impact-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.impact-copy .kicker { font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 2.4px; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 10px; }
.impact-copy h2 { margin-bottom: 10px; }
.impact-copy p { color: var(--gray-text); font-size: 1.06rem; margin-bottom: 16px; }
.impact-bar .meter-card { margin: 0; max-width: none; }
@media (max-width: 900px) { .impact-bar { grid-template-columns: 1fr; gap: 30px; } }

/* Testimonial */
.pull-quote { font-style: normal; }

/* Testimonial wall: open quotes, no nested boxes */
.quote-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
.quote {
  position: relative;
  margin: 0;
  padding: 6px 34px 6px 0;
  border: none;
  background: none;
}
.quote + .quote { padding-left: 34px; border-left: 1px solid rgba(123, 44, 14, 0.16); }
.quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.7;
  color: rgba(217, 84, 30, 0.45);
  margin-bottom: 6px;
}
/* One voice treatment for all three quotes. The middle one used to be
   larger and a different brown (.quote-feature), which read as an
   unfinished/mistaken set rather than emphasis. */
.quote-text {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.45;
  color: #4A2418;
  margin: 0;
}
.quote-by {
  display: block;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-top: 12px;
}
@media (max-width: 860px) {
  .quote-wall { grid-template-columns: 1fr; gap: 26px; }
  .quote { padding: 0 0 0 22px; border-left: 3px solid rgba(217, 84, 30, 0.4); }
  .quote + .quote { padding-left: 22px; border-left: 3px solid rgba(217, 84, 30, 0.4); }
}
.quote-note { font-size: 0.85rem; color: var(--gray-text); margin-top: 6px; }

/* School strip - feature band */
#schools {
  position: relative;
}
#schools::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #FBE7C8 0%, #F8DFB6 100%);
  z-index: -1;
}
#schools .section-head h2 { color: #7B2C0E; }
#schools .section-head .kicker { color: #A8340F; }
#schools .section-head p { color: #3E3A2F; font-weight: 600; font-size: 1.12rem; }
.school-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.school-card { background: var(--white); border: 2.5px solid rgba(123,44,14,0.16); border-radius: var(--radius); overflow: hidden; box-shadow: 7px 9px 0 rgba(168,52,15,0.14); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.school-card:hover { transform: translateY(-6px); box-shadow: 9px 13px 0 rgba(168,52,15,0.20); }
.school-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.school-card h3 { font-size: 1.15rem; margin: 14px 18px 2px; color: #7B2C0E; }
.school-card p { font-size: 0.9rem; color: var(--gray-text); margin: 0 18px 16px; }
@media (max-width: 900px) { .school-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .school-strip { grid-template-columns: 1fr; } }

/* Primary giving card */
.card-primary { border: 2px solid var(--red); box-shadow: var(--shadow); }
.card-primary .btn { margin-top: 14px; }

/* Donation picker with impact notes */
.donation-picker button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; }
.pick-note { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.85; }

/* Collapsed receipt details */
.receipt-details { margin-top: 14px; border-top: 1px dashed rgba(224,79,23,0.25); padding-top: 12px; }
.receipt-details > summary { cursor: pointer; font-family: var(--font-display); font-size: 1.15rem; color: var(--red-dark); list-style: none; }
.receipt-details > summary::-webkit-details-marker { display: none; }
.receipt-details > summary::before { content: "+ "; color: var(--red); font-weight: 700; }
.receipt-details[open] > summary::before { content: "- "; }

/* Donate page trust row + alt line */
.donate-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; margin-top: 22px; }
.donate-trust span { font-size: 0.85rem; font-weight: 600; color: var(--gray-text); }
.donate-trust span::before { content: "\2713 "; color: var(--ill-green); font-weight: 700; }
.donate-alt { text-align: center; font-size: 0.9rem; color: var(--gray-text); margin-top: 14px; }
.donate-top { padding-top: 48px; }

/* Impact page blocks */
.impact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 900px) { .impact-split { grid-template-columns: 1fr; } }
.impact-split img { border-radius: var(--radius); box-shadow: var(--shadow); }
.money-list { list-style: none; }
.money-list li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed rgba(224,79,23,0.2); }
.money-list .amt { font-family: var(--font-display); font-size: 1.5rem; color: var(--red); min-width: 92px; }
.money-list .what { color: var(--gray-text); }

/* Sticky mobile donate bar */
.sticky-donate { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; padding: 10px 16px; background: rgba(255,255,255,0.97); border-top: 1px solid rgba(48,48,48,0.12); box-shadow: 0 -6px 20px rgba(31,26,26,0.10); }
.sticky-donate .btn { display: block; width: 100%; text-align: center; }
@media (max-width: 860px) { .sticky-donate { display: block; } body { padding-bottom: 74px; } }

/* Picker tiles: equal height regardless of impact note length */
.donation-picker button { min-height: 78px; justify-content: center; }

/* Trust row: space after the check glyph */
.donate-trust span::before { content: "\2713\A0"; }

/* ============================================================
   PLAYFUL HAND-DRAWN LAYER (v2026 art direction)
   Whimsy stays. No hard straight horizontal lines. Rounded,
   paint-stroke edges, gentle motion. Photos are the content;
   the frame is hand-drawn.
   ============================================================ */

:root {
  --radius: 30px;
  --radius-sm: 18px;
  --radius-pill: 999px;
  --wobble-a: 26px 20px 30px 18px;
  --wobble-b: 20px 30px 18px 26px;
  --wobble-c: 34px 16px 28px 22px;
}

/* Warm paper background instead of stark white */


/* Display headings: brush font, slight tilt, marker underline */
h1, h2, h3, h4 { font-family: var(--font-display); }
h1 { line-height: 1.08; }
h2 { line-height: 1.12; }

/* Kill the hard rule under accents: use a hand-drawn stroke instead */
.accent::after {
  height: 8px;
  width: 92px;
  border-radius: var(--radius-pill);
  background: var(--grad-band);
  transform: rotate(-1.2deg);
}
.section-head .accent::after { left: 50%; transform: translateX(-50%) rotate(-1.2deg); }

/* Sections: no straight dividers. Soft rounded bands and blobs. */
.alt-section { background: var(--cream); } /* painted section divider instead of a straight line */
.wave-divider { display: block; width: 100%; height: 46px; margin-bottom: -1px; }
.wave-divider path { fill: var(--cream); }

/* Cards: chunky rounded, hand-cut feel, gentle lift */
.card, .step, .school-card, .meter-card, .faq-item {
  border-radius: var(--wobble-a);
  border: 2.5px solid rgba(62, 58, 47, 0.14);
  box-shadow: 6px 8px 0 rgba(224, 79, 23, 0.10);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
}
.card:nth-child(even), .step:nth-child(even), .school-card:nth-child(even) { border-radius: var(--wobble-b); }
.card:nth-child(3n), .step:nth-child(3n), .school-card:nth-child(3n) { border-radius: var(--wobble-c); }
.card:hover, .step:hover, .school-card:hover {
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: 8px 12px 0 rgba(224, 79, 23, 0.16);
}

/* Buttons: pill, paint dab shadow, squish on hover */
.btn {
  border-radius: var(--radius-pill);
  border: 2.5px solid rgba(62, 58, 47, 0.18);
  padding: 15px 36px;
  box-shadow: 4px 5px 0 rgba(62, 58, 47, 0.16);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-3px) rotate(-1deg) scale(1.02); box-shadow: 6px 8px 0 rgba(62,58,47,0.18); }
.btn:active { transform: translateY(1px) scale(0.99); box-shadow: 2px 2px 0 rgba(62,58,47,0.18); }
.btn-gold { background: var(--ill-gold); }
.btn-white { background: var(--white); }
.btn-outline { border-width: 2.5px; }

/* Header: rounded, no hard bottom rule */
.site-header { border-bottom: 0; box-shadow: 0 6px 18px rgba(31,26,26,0.06); }
.header-inner { padding-top: 14px; padding-bottom: 14px; }
.brand img {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2.5px solid rgba(62,58,47,0.14);
  background: var(--cream);
}
.brand-text small { display: none; } /* one charity mention in the header is enough; it lives in the trust strip */

/* Nav links: pill highlight */
.main-nav a { border-radius: var(--radius-pill); }
.main-nav a.active { background: var(--off-white); }
/* Donate button must stay solid red even when it is the active page */.main-nav .nav-donate a,
.main-nav .nav-donate a.active,
.main-nav .nav-donate a.active:hover { background: var(--red); color: var(--white); }
.main-nav .nav-donate a:hover { background: var(--red-dark); }
.nav-donate a { border-radius: var(--radius-pill); box-shadow: 3px 4px 0 rgba(62,58,47,0.16); }

/* Hero: rounded bottom blob edge, playful blobs floating behind art */
.hero { border-radius: 0; }
.hero-art > img:not(.mascot-hero), .story-art img, .meal-showcase img, .impact-split img {
  border-radius: var(--wobble-c);
  border: 3px solid rgba(62,58,47,0.12);
  box-shadow: 8px 10px 0 rgba(62,58,47,0.12);
}
/* The mascot is a transparent cutout: never give it a frame or shadow box */
.mascot-hero, .mascot-float { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; }
.hero-art .mascot-hero { box-shadow: none !important; }
.hero-badge { border-radius: var(--radius-pill); }

/* Trust strip: rounded band, not a flat bar */
.trust-strip { background: var(--trust-bg); color: rgba(255,255,255,0.95); text-align: center; padding: 11px 22px; font-size: 0.98rem; border-radius: 22px 30px 24px 28px; max-width: 1180px; margin: 12px auto 0; }

/* Countdown tiles */
.countdown .unit { border-radius: var(--wobble-b); border: 2.5px solid rgba(62,58,47,0.12); }

/* Steps: round number badges */
.step .step-num { border-radius: 50%; border: 2.5px solid rgba(62,58,47,0.16); }
.step-heading .step-num, .form-step .step-num { border-radius: 50%; }

/* Amount tiles: chunky rounded, squish */
.donation-picker button { border-radius: var(--wobble-b); border-width: 2.5px; box-shadow: 3px 4px 0 rgba(62,58,47,0.10); }
.donation-picker button:hover { transform: translateY(-3px) rotate(-1deg); }
.donation-picker button.selected { box-shadow: 3px 4px 0 rgba(62,58,47,0.18); }

/* Inputs: rounded, chunky */
.field input, .field textarea, .field select { border-radius: var(--radius-sm); border-width: 2.5px; }

/* Donor toggles */
.donor-type-btn { border-radius: var(--radius-pill); }

/* FAQ: rounded, chevron spin already present */
.faq-item { overflow: hidden; }
.faq-q { border-radius: 0; }

/* Footer: wavy top edge, rounded */
.site-footer { border-radius: 0; margin-top: 0; }

/* Mascot: floating Joy with a gentle bob */
.mascot { position: relative; display: inline-block; }
.mascot img { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(31,26,26,0.14)); }
.mascot-float { animation: bob 4.5s ease-in-out infinite; }
.mascot-hero { position: absolute; bottom: -16px; left: -14px; width: 132px; z-index: 2; animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }

/* Decorative floating bits (trot along gently) */
.floaty { position: absolute; pointer-events: none; opacity: 0.9; animation: drift 7s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(10px,-14px) rotate(8deg); } }

/* Reveal: keep existing; add a gentle pop */
.js .reveal.visible { animation: pop 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes pop { 0% { opacity: 0; transform: translateY(14px) scale(0.99); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* Sticky donate bar: rounded pill floating above the bottom */
.sticky-donate { background: transparent; border-top: 0; box-shadow: none; padding: 0 16px 14px; }
.sticky-donate .btn {
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 22px rgba(31,26,26,0.22);
  animation: bob 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mascot-float, .mascot-hero, .floaty, .sticky-donate .btn { animation: none !important; }
  .js .reveal.visible { animation: none; }
}

/* Hero art needs a positioning context for the floating mascot */
.hero-art { position: relative; }
@media (max-width: 960px) { .mascot-hero { width: 96px; left: -6px; bottom: -10px; } }

/* Section kickers get a little hand-drawn tilt */
.section-head .kicker { transform: rotate(-0.6deg); }

/* Soften section seams: rounded band edges instead of flat cuts */
.alt-section { background: var(--cream); }
/* Trust strip: keep it on the cream band rather than floating on white */
.trust-strip { background: var(--trust-bg); color: rgba(255,255,255,0.95); text-align: center; padding: 13px 22px; font-size: 0.98rem; border-radius: 22px 30px 24px 28px; max-width: 1180px; margin: 18px auto 0; }

/* Donate card: kill the asymmetric offset echo */
.donate-card { box-shadow: var(--shadow); }

/* Hero mascot: float in the copy column, never over the photo card */
.mascot-hero {
  position: static;
  display: block;
  width: 120px;
  margin-top: 16px;
  animation: bob 3.6s ease-in-out infinite;
}
/* Trust strip: wobbly pill, not a hard-edged bar */
.trust-strip { background: var(--trust-bg); color: rgba(255,255,255,0.95); text-align: center; padding: 13px 22px; font-size: 0.98rem; border-radius: 22px 30px 24px 28px; max-width: 1180px; margin: 18px auto 0; }

/* ---------- Why This Matters (fact band + narrative) ---------- */

.fact-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 36px; }
.fact {
  background: var(--white);
  border-radius: var(--wobble-b);
  border: 2.5px solid rgba(62,58,47,0.14);
  box-shadow: 6px 8px 0 rgba(224,79,23,0.10);
  padding: 20px 18px 16px;
  text-align: center;
}
.fact:nth-child(2) { border-radius: var(--wobble-c); }
.fact-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--red);
  display: block;
  margin-bottom: 6px;
}
.fact p { color: var(--gray-text); font-size: 0.92rem; }
.why-copy { max-width: 860px; margin: 0 auto 20px; }
.why-copy h3 { font-size: 1.7rem; margin-bottom: 12px; text-align: center; }
.why-copy p { color: var(--gray-text); font-size: 1.06rem; margin-bottom: 10px; }
/* Mission statement: centred, quoted, no side bar */
.why-emphasis {
  position: relative;
  max-width: 720px;
  margin: 30px auto 0 !important;
  padding: 30px 40px 26px;
  background: #FFF6E6;
  border: 2.5px solid rgba(123, 44, 14, 0.16);
  border-radius: 30px 24px 32px 26px;
  box-shadow: 6px 7px 0 rgba(224, 79, 23, 0.12);
  text-align: center;
}
.why-emphasis p {
  font-family: var(--font-body) !important;
  font-size: 1.18rem !important;
  line-height: 1.55 !important;
  font-weight: 600;
  color: #4A2418 !important;
  margin: 0;
}
.why-emphasis .why-emphasis-payoff {
  margin-top: 14px !important;
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  line-height: 1.28 !important;
  font-weight: 400;
  color: #7B2C0E !important;
}
.why-more {
  text-align: center;
  margin-top: 14px;
  font-size: 0.98rem;
  color: var(--gray-text);
}
.why-more a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.why-more a:hover { color: var(--red-dark); }

/* CTA band actions */
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; }
.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cite-note { max-width: 860px; margin: 0 auto 8px; font-size: 0.85rem; color: var(--gray-dark); text-align: center; font-style: italic; }
@media (max-width: 900px) { .fact-band { grid-template-columns: 1fr; } }

/* Why This Matters: breathing room so the citation line never clips */
.why-matters { background: var(--cream); }



/* ---------- Hero (final) ---------- */
.hero { padding: 46px 24px 42px; }
.hero-inner { align-items: center; gap: 36px; }
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ill-gold);
  margin-bottom: 12px;
}
.hero-copy { max-width: 34rem; }
.hero-copy h1 { font-size: 2.8rem; margin-bottom: 12px; }
.hero-copy p { margin-bottom: 20px; }
.hero-actions { margin-bottom: 10px; }
.hero-copy .hero-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.7;
  color: rgba(255,255,255,0.94);
}
/* The big gold $100 is larger than the note text. Without this it picks up the
   body's 1.7 line-height (24px x 1.7 = 40.8px) and inflates only the line it
   sits on, so the note's two lines look unevenly spaced. line-height:1 keeps
   that glyph inside the note's normal line box instead of stretching it. */
.hero-copy .hero-note strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ill-gold);
}
.hero-copy .btn-outline { color: #fff; border-color: rgba(255,255,255,0.72); }
.hero-copy .btn-outline:hover { background: #fff; color: var(--red-dark); }

.hero-art { position: relative; }
.hero-art > img:not(.mascot-hero) {
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
  object-position: 60% 62%;
  border-radius: var(--wobble-c);
  border: 3px solid rgba(255,255,255,0.20);
  box-shadow: 0 16px 38px rgba(0,0,0,0.20);
}
/* Joy sits on the photo's bottom-left corner, tight-cropped, no box, no halo */
.hero-art .mascot-hero {
  position: absolute;
  left: -26px;
  bottom: -34px;
  width: 148px;
  margin: 0;
  z-index: 3;
  border: 0; box-shadow: none; border-radius: 0; background: transparent;
  animation: bob 4s ease-in-out infinite;
  filter: drop-shadow(0 12px 18px rgba(31,26,26,0.24));
}
@media (max-width: 960px) {
  .hero { padding: 48px 20px 64px; }
  .hero-copy { max-width: none; }
  .hero-copy h1 { font-size: 2.2rem; }
  .hero-art .mascot-hero { width: 132px; left: 18px; bottom: 0; }
}
@media (max-width: 560px) {
  .hero-art .mascot-hero { width: 112px; left: 16px; bottom: 0; }
}

/* Mobile: keep the "$100" proof line visible, don't reserve space for the photo */
@media (max-width: 860px) {
  .hero-note { display: block; }
}

/* Floating donate bar: high contrast so it never blends into the orange hero */
.sticky-donate .btn {
  background: var(--white);
  color: var(--red-dark);
  border: 2.5px solid rgba(62,58,47,0.18);
}
.sticky-donate .btn:hover { background: var(--off-white); }

/* Sticky bar hidden until scrolled past the hero (no duplicate Donate up top) */
.sticky-donate { opacity: 0; transform: translateY(120%); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; }
.sticky-donate.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .sticky-donate { transition: none; } }

/* Mobile hero: tighten so the photo and $100 line arrive sooner */
@media (max-width: 960px) {
  .hero-copy p { margin-bottom: 22px; }
  .hero-actions { margin-bottom: 12px; }
  .hero-art { margin-top: 8px; }
}

/* ---------- Why This Matters: charts + sources ---------- */
.fact-chart { display: flex; justify-content: center; align-items: flex-end; min-height: 84px; margin-bottom: 10px; }
.fact-chart .dial svg { width: 132px; height: 132px; }
.fact-src {
  display: inline-block;
  margin-top: 8px;
  padding-bottom: 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fact-src:hover { color: var(--red-dark); }

.why-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: stretch; margin-bottom: 6px; }
.why-chart { display: flex; flex-direction: column; justify-content: center; }
.why-text p { color: var(--gray-text); font-size: 1.06rem; margin-bottom: 14px; }
.why-chart {
  background: var(--white);
  border: 2.5px solid rgba(62,58,47,0.14);
  border-radius: var(--wobble-b);
  box-shadow: 6px 8px 0 rgba(224,79,23,0.10);
  padding: 22px 22px 18px;
}
.why-chart-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--red-dark); margin-bottom: 14px; }
.hbar { margin-bottom: 14px; }
.hbar-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-dark); margin-bottom: 5px; line-height: 1.35; }
.hbar-track { background: #F1E3CC; border-radius: var(--radius-pill); height: 26px; overflow: hidden; }
.hbar-row { display: flex; align-items: center; gap: 10px; }
.hbar-track { flex: 1 1 auto; background: #F1E3CC; border-radius: var(--radius-pill); height: 24px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: var(--radius-pill); background: var(--grad-band); }
.hbar-fill.green { background: var(--ill-green); }
.hbar-fill.gold { background: var(--ill-gold); }
.hbar-val { flex: none; min-width: 46px; font-weight: 700; font-size: 0.82rem; color: var(--gray-dark); }
.hbar-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; }
.hbar-key li { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600; color: var(--gray-dark); }
.hbar-key .k { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.hbar-key .k.orange { background: var(--red); }
.hbar-key .k.green { background: var(--ill-green); }
.hbar-key .k.gold { background: var(--ill-gold); }
.why-chart-src { font-size: 0.74rem; color: var(--gray-text); font-style: italic; margin: 4px 0 0; }

.sources {
  max-width: 860px;
  margin: 22px auto 6px;
  background: var(--white);
  border: 2.5px solid rgba(62,58,47,0.12);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
}
.sources h4 { font-size: 1.05rem; color: var(--red-dark); margin-bottom: 10px; }
.sources ol { margin-left: 20px; }
.sources li { font-size: 0.85rem; color: var(--gray-text); margin-bottom: 6px; line-height: 1.45; }
.sources a { color: var(--red); text-decoration: underline; }

@media (max-width: 900px) {
  .why-split { grid-template-columns: 1fr; gap: 26px; }
}

/* Even stat cards: charts align to top, sources pin to the bottom */
.fact-band { align-items: stretch; }
.fact { display: flex; flex-direction: column; }
.fact .fact-chart { flex: none; }
.fact .fact-num { flex: none; }
.fact p { flex: 1 1 auto; }
.fact-src { flex: none; margin-top: auto; padding-top: 12px; }

/* ============================================================
   JOYFUL / BRIGHTER PALETTE (v2026)
   Sun-drenched warmth without losing contrast. Hero keeps enough
   depth for white text; accents and backgrounds get brighter.
   ============================================================ */
:root {
  /* Brighter accents */
  /* Fresher backgrounds */
  /* Deeper but warmer hero so white text stays legible */
}

body { background: var(--paper); }
.alt-section { background: var(--cream); }
.why-matters { background: var(--cream); }

/* Brighter trust strip + footer */
.trust-strip { background: var(--trust-bg); color: rgba(255,255,255,0.95); text-align: center; padding: 13px 22px; font-size: 0.98rem; border-radius: 22px 30px 24px 28px; max-width: 1180px; margin: 18px auto 0; }

/* Sun-ny highlights */
.hero-eyebrow { color: var(--sun); }
.hero-copy .hero-note strong { color: var(--sun); }
.section-head .kicker { color: #C63A0C; }
.footer-inner h4 { color: var(--sun); }
.footer-bottom .charity-badge { background: var(--sun); }
.socials a { color: var(--sun); }

/* Cheerful card accents */
.card-icon { background: var(--off-white); color: var(--joy-red); }
.step .step-num { background: var(--grad-joy); }
.step-heading .step-num, .form-step .step-num { background: var(--grad-joy); }

/* Brighter stat + chart colors */
.fact-num { color: var(--joy-red); }
.meter-numbers .raised { color: var(--joy-red); }
.fact:nth-child(1) { border-color: rgba(230,57,70,0.30); }
.fact:nth-child(2) { border-color: rgba(245,166,35,0.34); }
.fact:nth-child(3) { border-color: rgba(47,168,79,0.30); }
.fact-chart .dial svg { filter: saturate(1.12); }

/* Sunny buttons */
.btn-gold { background: var(--sun); color: #6B3A06; }
.btn-gold:hover { background: var(--sun-deep); color: #6B3A06; }
.pull-quote span { color: var(--joy-red); }
.accent::after { background: var(--grad-joy); }

/* Donor toggle + picker pops */
.donor-type-btn.selected { background: var(--joy-red); border-color: var(--joy-red); }
.donation-picker button.selected { background: var(--joy-red); border-color: var(--joy-red); }
.hbar-fill { background: var(--grad-joy); }
.hbar-fill.green { background: var(--joy-green); }
.hbar-fill.gold { background: var(--sun); }
.hbar-key .k.orange { background: var(--joy-red); }
.hbar-key .k.green { background: var(--joy-green); }
.hbar-key .k.gold { background: var(--sun); }

/* Links brighter */
a { color: #C63A0C; }
a:hover { color: #9C2F0A; }


/* ---------- Brightness QA fixes ---------- */
/* Eyebrow: bright cream, readable against the darker top of the hero gradient */
.hero-eyebrow { color: #FFF2D6; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.12); }
/* Nav active pill: dark text, no low-contrast red-on-peach */
.main-nav a.active { color: var(--red-dark); background: var(--off-white); }
/* Fact cards: one consistent border system, no stray green/mint */
.fact, .fact:nth-child(1), .fact:nth-child(2), .fact:nth-child(3) { border-color: rgba(62,58,47,0.14); }
/* Progress bars: single brand tone, not a warning ramp */
.hbar-fill, .hbar-fill[data-tone] { background: var(--red); }
.hbar-fill.green { background: var(--joy-green); }
.hbar-fill.gold { background: var(--sun-deep); }
/* Card 3 ratio: darken the "empty" figures so they read as present-but-unfilled */



/* Sizes per style so ridges feel hand-cut, not uniform */

/* Pull up so the drawn edge overlaps the seam and hides any hard line */

/* Rounded content bands: kill the square top where a divider meets it */
.alt-section { background: var(--cream); }
.divider + section.alt-section,

@media (max-width: 760px) {
        }


/* ---------- AUTHORITATIVE SECTION COLOURS (single source of truth) ---------- */
:root {
  --sec-hero: #C8380D;
  --sec-trust: #DE4A11;
  --sec-cream: #FFEED0;
  --sec-paper: #FFFCF5;
  --sec-cta: #A8340F;
}
body { background: var(--sec-paper); }
.hero { background: var(--sec-hero); }
.trust-strip { background: var(--sec-trust); }
.alt-section { background: var(--sec-cream); border-radius: 34px; }
.why-matters { background: var(--sec-cream); }
.cta-band { background: var(--sec-cta); }

/* Dividers: block behind = upper section colour; painted ridge = lower colour. */
.divider + section.alt-section,
@media (max-width: 760px) {
      }

/* ---------- FULL-BLEED SECTIONS (final) ---------- */
.trust-strip {
  background: var(--sec-trust);
  color: #fff;
  text-align: center;
  padding: 14px 22px;
  font-size: 0.98rem;
  border-radius: 0;
  max-width: none;
  margin: 0;
}
.alt-section, .why-matters {
  background: var(--sec-cream);
  border-radius: 0;
  max-width: none;
  margin: 0;
}
.cta-band { background: var(--sec-cta); }

/* Keep mascots clear of section dividers */
.story-block .mascot-float { max-width: 40%; }
section { position: relative; z-index: 1; }


/* ============================================================
   PAINTED MOUNTAIN DIVIDERS
   .divider background = upper section colour. .div-mtn is a solid
   block tinted to the lower colour and cut into the painted ridge
   shape by the mask. So the seam is always a painted mountain.
   ============================================================ */
.divider { display: block; line-height: 0; margin: 0; padding: 0; }
.div-mtn {
  display: block;
  width: 100%;
  height: auto;
}
.divider + section { margin-top: 0; }
.divider + section.alt-section,
.divider + section.why-matters { border-top-left-radius: 0; border-top-right-radius: 0; }
@media (max-width: 760px) { .div-mtn {
  display: block;
  width: 100%;
  height: auto;
} }

/* ============================================================
   IMPACT SECTION - COLOUR REFINEMENT (2026-09-12)
   Was washed out: faint track, pinkish red on the money number,
   three muddy oranges. Now one warm system with real contrast.
   ============================================================ */
.alt-section#impact,
#impact.alt-section {
  background: linear-gradient(180deg, #FFEED0 0%, #F9E3BB 100%);
}
#impact .impact-copy .kicker,
#impact .meter-card .kicker { color: #A8340F; }
#impact .impact-copy p { color: #5A5141; }
#impact .impact-copy .btn { box-shadow: 0 6px 0 #B93A0D; }
#impact .meter-card {
  border: 1px solid rgba(168, 52, 15, 0.20);
  box-shadow: 0 14px 34px rgba(123, 44, 14, 0.14);
}
#impact .meter-track {
  background: #F3E3C6;
  border: 1px solid rgba(168, 52, 15, 0.18);
}
#impact .meter-fill { background: linear-gradient(90deg, #B3470F 0%, #D9541E 100%); }
#impact .meter-sub { color: #5A5141; }
#impact .meter-sub strong { color: #A8340F; }
#impact .meter-numbers .raised { color: #7B2C0E; }
#impact .meter-numbers > span:last-child { color: #3E3A2F; }

/* ============================================================
   DE-BOXING PASS (2026-09-12)
   Too many nested rounded rectangles. Steps become an open
   numbered flow with dashed rules instead of white cards.
   ============================================================ */
.steps .step {
  background: none;
  border: none;
  border-top: 3px dashed rgba(123, 44, 14, 0.22);
  border-radius: 0;
  box-shadow: none;
  padding: 16px 14px 0 0;
  transition: none;
}
.steps .step:hover { transform: none; box-shadow: none; }
.steps .step .step-num {
  display: block;
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 4px;
  transition: color 0.2s ease;
}
.steps .step:hover .step-num { color: #B8451A; }

/* ============================================================
   BRAND LOGO LOCKUP (2026-09-12)
   Use the real "Give a Turkey" lockup (turkey-in-basket + brush
   text + maple leaf). Replaces the old circular icon crop.
   ============================================================ */
.brand { display: flex; align-items: center; }
.brand img {
  width: auto;
  height: 62px;
  max-width: 260px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.brand-text { display: none; }
@media (max-width: 760px) {
  .brand img { height: 48px; max-width: 200px; }
}

/* ============================================================
   IDENTITY v2 (2026-09-12)
   Goal: stop looking like a template. One signature device
   (painted brush swash), editorial left-aligned headers, far
   fewer boxes, varied section rhythm.
   ============================================================ */

/* --- Signature device: painted brush swash under key headlines --- */
.accent { padding-bottom: 16px; }
.accent::after,
.section-head .accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 208px;
  height: 15px;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M7 11 C44 3, 80 15, 120 8 S198 2, 233 10' fill='none' stroke='%23E04F17' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
  transform: rotate(-1.1deg);
  transform-origin: left center;
}
.section-head .accent::after { left: 50%; transform: translateX(-50%) rotate(-0.8deg); transform-origin: center; }

/* --- Editorial section heads (left aligned, not the centred template look) --- */
.section-head.sh-left {
  text-align: left;
  max-width: none;
  margin: 0 0 32px;
}
.section-head.sh-left .accent::after { left: 0; transform: rotate(-1.1deg); transform-origin: left center; }
.section-head.sh-left p { max-width: 46ch; }

/* Head + intro side by side so headers don't all look stacked-centred */
.section-head.sh-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: end;
  text-align: left;
  max-width: none;
  margin: 0 0 36px;
}
.section-head.sh-split .accent::after { left: 0; transform: rotate(-1.1deg); transform-origin: left center; }
.section-head.sh-split p { margin: 0 0 6px; }
@media (max-width: 820px) {
  .section-head.sh-split { grid-template-columns: 1fr; gap: 14px; }
}

/* --- Big statement (used once) --- */
.statement { max-width: 860px; margin: 0 auto 34px; text-align: center; }
.statement h2 { font-size: 2.5rem; line-height: 1.16; color: #7B2C0E; }
.statement .hl { position: relative; white-space: nowrap; color: var(--red); }
/* The highlighted phrase is kept on one line so the hand-drawn underline sits
   under it cleanly. On very narrow screens the longest phrase cannot fit, so
   let it wrap there instead of pushing the page sideways. */
@media (max-width: 430px) { .statement .hl { white-space: normal; } }
.statement .hl::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: 2px; height: 10px;
  background: rgba(255, 196, 46, 0.55); z-index: -1; border-radius: 6px; transform: rotate(-0.8deg);
}
.statement p { color: var(--gray-text); font-size: 1.16rem; margin: 16px auto 0; max-width: 62ch; }

/* --- Facts: no more white card soup, hairline columns --- */
.fact-band { gap: 0; }
.fact {
  background: none;
  border: 0;
  border-left: 1.5px solid rgba(123, 44, 14, 0.18);
  border-radius: 0;
  box-shadow: none;
  padding: 4px 30px;
  text-align: left;
}
.fact:first-child { border-left: 0; padding-left: 0; }
.fact:nth-child(2), .fact:nth-child(3) { border-radius: 0; }
.fact .fact-chart { justify-content: flex-start; }
.fact-num { text-align: left; }

/* --- School cards: photo + caption, no boxed card --- */
.school-card {
  background: none;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
  overflow: visible;
}
.school-card:hover { transform: translateY(-4px); box-shadow: none; }
.school-card img { border-radius: 18px 14px 20px 16px; box-shadow: 4px 5px 0 rgba(123,44,14,0.14); }
.school-card h3 { margin: 12px 2px 2px; }
.school-card p { margin: 0 2px 0; }

/* --- Full-bleed photo moment --- */
.moment { position: relative; margin: 0; }
.moment img { width: 100%; height: clamp(280px, 42vw, 460px); object-fit: cover; display: block; }
.moment .moment-copy {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(180deg, rgba(58,22,8,0) 0%, rgba(58,22,8,0.78) 62%);
  color: #fff; padding: 90px 24px 34px; text-align: center;
}
.moment .moment-copy h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: #fff; margin-bottom: 8px; }
.moment .moment-copy p { max-width: 60ch; margin: 0 auto; color: rgba(255,255,255,0.92); }
/* Save-On-Foods wordmark sits on the dark gradient banner. It is a dark
   green/red logo, so put it on a soft white chip to stay legible. */
.moment .sof-logo {
  display: block; width: min(240px, 60vw); height: auto; margin: 14px auto 0;
  padding: 10px 16px; border-radius: 10px; background: #fff;
  box-shadow: 0 2px 10px rgba(31,26,26,0.18);
}
/* On narrow screens the caption is taller than the photo, so the absolutely
   positioned overlay spills past the top of the image and collides with the
   section above it. Stack instead: photo, then a solid caption block. */
@media (max-width: 900px) {
  .moment { position: static; }
  .moment img { height: clamp(210px, 54vw, 320px); }
  .moment .moment-copy {
    position: static;
    padding: 22px 20px 26px;
    background: rgba(58, 22, 8, 0.95);
  }
  .moment .moment-copy p { max-width: none; }
  .moment .sof-logo { margin-top: 12px; }
}

/* --- CTA band: tighter, no straight box --- */
.cta-band { padding: 46px 24px; }

/* --- Identity v2 refinements --- */
/* Speech bubble: lighter border to match the hairline system */
.pull-quote { border-width: 1.5px; box-shadow: 4px 5px 0 rgba(224, 79, 23, 0.10); }
.pull-quote::after { border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* Donation card: quiet it down so it does not fight the hairline system */
#impact .meter-card {
  border: 1.5px solid rgba(123, 44, 14, 0.16);
  box-shadow: 6px 7px 0 rgba(224, 79, 23, 0.10);
}

/* CTA band: left-aligned editorial head, no centred kicker */
.cta-band .section-inner { text-align: center; }
.cta-band .cta-kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #FFD9A0;
  margin-bottom: 8px;
}

/* Joy float: keep clear of the quote bubble */
.story-block .mascot-float { max-width: 128px; margin-top: 18px !important; }

/* ============================================================
   DATA VIZ v2 (2026-09-12)
   Animated, "instrument panel" charts. Futuristic dashboard feel
   but locked to the site's warm palette. Progressive: markup holds
   the final values; charts.js animates them in.
   ============================================================ */

/* Panel shell for a chart group */
.viz-panel {
  background: linear-gradient(180deg, #FFFDF8 0%, #FFF6E6 100%);
  border: 1.5px solid rgba(123, 44, 14, 0.16);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 6px 7px 0 rgba(224, 79, 23, 0.10);
  padding: 22px 24px;
}
.viz-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.viz-title {
  font-family: var(--font-body); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 2.2px; text-transform: uppercase; color: #A8340F;
}
.viz-tag {
  font-family: var(--font-body); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.6px; color: #7B2C0E;
  background: rgba(255, 196, 46, 0.28);
  border-radius: 999px; padding: 3px 10px;
}

/* Animated dial */
.dial { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.dial svg { width: 118px; height: 118px; display: block; }
.dial .dial-track { fill: none; stroke: rgba(123, 44, 14, 0.14); }
.dial .dial-fill {
  fill: none; stroke: #E04F17; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(224, 79, 23, 0.35));
}
.dial .dial-fill.accent2 { stroke: #D27E26; }
.dial .dial-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.dial .dial-num {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: #7B2C0E;
}
.dial .dial-cap {
  font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.4px;
  color: var(--gray-text); margin-top: 2px;
}

/* Animated bars */
.bars { display: flex; align-items: flex-end; gap: 16px; height: 118px; padding-top: 14px; }
.bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bar-val {
  font-family: var(--font-body); font-weight: 700; font-size: 0.74rem;
  color: #7B2C0E; margin-bottom: 5px;
}
.bar-slot { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; }
.bar {
  width: 100%; border-radius: 10px 10px 4px 4px;
  transform-origin: bottom center;
  background: linear-gradient(180deg, #E85D1A 0%, #C8380D 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.18), 0 6px 14px rgba(200,56,13,0.18);
}
.bar.alt { background: linear-gradient(180deg, #E0A03A 0%, #D27E26 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.18), 0 6px 14px rgba(210,126,38,0.18); }
.bar-cap {
  font-family: var(--font-body); font-size: 0.64rem; font-weight: 600;
  color: var(--gray-text); margin-top: 6px;
}
.bar-grid { border-top: 1px dashed rgba(123, 44, 14, 0.16); margin-top: 2px; }

/* Ratio strip: segmented pills lighting up */
.ratio { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 18px 0 6px; }
.ratio i {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(123, 44, 14, 0.12);
  box-shadow: inset 0 0 0 1.5px rgba(123, 44, 14, 0.10);
}
.ratio i.on {
  background: radial-gradient(circle at 35% 30%, #F0631F 0%, #C8380D 100%);
  box-shadow: 0 0 10px rgba(224, 79, 23, 0.45), inset 0 0 0 1.5px rgba(255,255,255,0.25);
}
.chart-play .ratio i.on { animation: popDot 0.6s cubic-bezier(.34,1.56,.64,1) both; }
.ratio i:nth-child(2).on { animation-delay: .12s; }
.ratio i:nth-child(3).on { animation-delay: .24s; }
@keyframes popDot { 0% { transform: scale(0.4); opacity: 0.2; } 100% { transform: scale(1); opacity: 1; } }

/* Horizontal meters (research chart) */
.figure-track { background: rgba(123, 44, 14, 0.12); border-radius: 999px; height: 18px; overflow: hidden; }
.figure-fill {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, #B3470F 0%, #E85D1A 100%);
  box-shadow: 0 0 10px rgba(224,79,23,0.25);
}
.figure-fill.green { background: linear-gradient(90deg, #4E7C1F 0%, #679817 100%); }
.figure-fill.gold { background: linear-gradient(90deg, #C98F0E 0%, #E0A03A 100%); }

/* Sparkline sweep on panels */
.viz-panel { position: relative; overflow: hidden; }
.viz-panel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46%;
  left: -60%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.chart-play.viz-panel::after { animation: sweep 1.5s ease-out 0.15s 1 both; }
@keyframes sweep { from { left: -60%; } to { left: 120%; } }

@media (prefers-reduced-motion: reduce) {
  .viz-panel::after { display: none; }
  .chart-play .ratio i.on { animation: none; }
}

/* Dials inside the red impact stats band (white-on-red treatment) */
.stats { gap: 18px; }
.stat { display: flex; flex-direction: column; align-items: center; }
.dial-inline { margin-bottom: 8px; }
.dial-inline svg { width: 84px; height: 84px; }
.dial-inline .dial-track { stroke: rgba(255, 255, 255, 0.28); }
.dial-inline .dial-fill { stroke: #FFC42E; filter: drop-shadow(0 0 6px rgba(255, 196, 46, 0.55)); }
.dial-inline .dial-fill.accent2 { stroke: #FFD9A0; filter: drop-shadow(0 0 6px rgba(255, 216, 160, 0.5)); }
.stat .num { font-size: 2.4rem; }

/* Animated research figures */
.figure { margin-bottom: 16px; }
.figure-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.figure-label {
  font-size: 0.84rem; font-weight: 600; color: var(--gray-dark);
  line-height: 1.35; max-width: 78%;
}
.figure-val {
  font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; color: #7B2C0E;
  white-space: nowrap;
}



/* --- Chart motion is driven by js/charts.js (scroll-linked). The final
       state lives in the markup, so charts are correct without JS too. --- */
.viz-bar { transform-origin: bottom center; }
.viz-person { transform-origin: center bottom; }

/* Chart layout polish */
.fact-chart { height: 122px; align-items: center; }
.dial svg { width: 106px; height: 106px; }
.dial .dial-num { font-size: 1.3rem; }
.dial .dial-cap { font-size: 0.56rem; letter-spacing: 0.2px; }
.bars { height: 112px; }
.figure { margin-bottom: 18px; }

/* ============================================================
   DATA VIZ v3 - MODERN FLAIR (2026-09-12)
   Cleaner geometry, gradient strokes, soft gridlines, crisp
   numerals. Same warm palette.
   ============================================================ */

/* --- Dials: thinner ring, gradient stroke, tick-free clean center --- */
.dial svg { width: 112px; height: 112px; }
.dial .dial-track { stroke: rgba(123, 44, 14, 0.13); stroke-linecap: round; }
.dial .dial-fill {
  stroke: #E04F17;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 5px rgba(224, 79, 23, 0.30));
}
.dial .dial-num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.4px;
  color: #7B2C0E;
}
.dial .dial-cap {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(107, 101, 90, 0.9);
  margin-top: 3px;
}

/* --- Column chart: slim gradient bars on a baseline with gridlines --- */
.bars {
  position: relative;
  gap: 22px;
  height: 124px;
  padding: 16px 6px 0;
  border-bottom: 1.5px solid rgba(123, 44, 14, 0.18);
}
.bars::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 34%;
  border-top: 1px dashed rgba(123, 44, 14, 0.12);
  pointer-events: none;
}
.bars::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 68%;
  border-top: 1px dashed rgba(123, 44, 14, 0.12);
  pointer-events: none;
}
.bar-col { position: relative; z-index: 1; }
.bar {
  border-radius: 9px 9px 2px 2px;
  background: linear-gradient(180deg, #F0631F 0%, #C8380D 100%);
  box-shadow: 0 6px 14px rgba(200, 56, 13, 0.20);
  max-width: 46px;
  margin: 0 auto;
}
.bar.alt {
  background: linear-gradient(180deg, #E0A03A 0%, #C98F0E 100%);
  box-shadow: 0 6px 14px rgba(201, 143, 14, 0.20);
}
.bar-val {
  font-size: 0.78rem;
  letter-spacing: -0.2px;
  margin-bottom: 7px;
}
.bar-cap {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(107, 101, 90, 0.85);
  margin-top: 8px;
}

/* --- Ratio: cleaner dots with a soft ring --- */
.ratio { gap: 10px; padding: 22px 0 10px; }
.ratio i { width: 26px; height: 26px; }
.ratio i.on {
  background: radial-gradient(circle at 34% 28%, #F0631F 0%, #C8380D 100%);
  box-shadow: 0 0 0 3px rgba(224, 79, 23, 0.16), 0 0 12px rgba(224, 79, 23, 0.40);
}

/* --- Research figures: taller track, gradient fill, value chip --- */
.figure-track {
  height: 14px;
  background: rgba(123, 44, 14, 0.10);
  box-shadow: inset 0 1px 2px rgba(123, 44, 14, 0.10);
}
.figure-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, #B3470F 0%, #E85D1A 100%);
  box-shadow: 0 0 12px rgba(224, 79, 23, 0.28);
}
.figure-fill.green { background: linear-gradient(90deg, #4E7C1F 0%, #679817 100%); box-shadow: 0 0 12px rgba(103,152,23,0.28); }
.figure-fill.gold { background: linear-gradient(90deg, #C98F0E 0%, #E0A03A 100%); box-shadow: 0 0 12px rgba(224,160,58,0.28); }
.figure-val {
  font-variant-numeric: tabular-nums;
  background: rgba(255, 196, 46, 0.22);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.82rem;
}
.figure-label { font-size: 0.86rem; font-weight: 600; }

/* --- Inset dials on the red band: brighter, crisper --- */
.dial-inline svg { width: 92px; height: 92px; }
.dial-inline .dial-track { stroke: rgba(255, 255, 255, 0.22); }
.dial-inline .dial-fill {
  stroke: #FFC42E;
  filter: drop-shadow(0 0 7px rgba(255, 196, 46, 0.55));
}
.dial-inline .dial-fill.accent2 { stroke: #FFE2AE; filter: drop-shadow(0 0 7px rgba(255, 226, 174, 0.5)); }

/* Roomier stat cells */
.stat { padding: 0 6px; }

/* ============================================================
   DATA VIZ v4 - PROPER SVG CHARTS (2026-09-12)
   Crisp gradients, real axes/gridlines, pictogram. Warm palette.
   ============================================================ */
.fact-chart { height: 140px; align-items: center; margin-bottom: 12px; }
.fact-chart .dial svg { width: 132px; height: 132px; }
.dial .dial-track { stroke: rgba(123, 44, 14, 0.12); stroke-width: 16; }
.dial .dial-fill { stroke-width: 16; }
.dial .dial-num { font-size: 1.5rem; }
.dial .dial-cap { font-size: 0.62rem; letter-spacing: 0.5px; }

/* SVG column chart */
.viz-col { width: 205px; height: 140px; display: block; overflow: visible; }
.viz-grid { stroke: rgba(123, 44, 14, 0.10); stroke-width: 1; stroke-dasharray: 3 4; }
.viz-axis { stroke: rgba(123, 44, 14, 0.22); stroke-width: 1.5; }
.viz-bar { transform-box: fill-box; transform-origin: bottom; }
.viz-val { font-family: var(--font-body); font-weight: 700; font-size: 12px; fill: #7B2C0E; }
.viz-cap { font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.6px; fill: rgba(107,101,90,0.9); text-transform: uppercase; }

/* SVG pictogram */
.viz-picto { width: 176px; height: 66px; display: block; overflow: visible; }
.viz-person circle, .viz-person rect { fill: rgba(123, 44, 14, 0.14); }
.viz-person.on circle, .viz-person.on rect { fill: url(#pictoGrad); fill: #E04F17; }
.viz-person { transform-box: fill-box; }

@media (prefers-reduced-motion: reduce) {
  .viz-bar { transform: none !important; }
}

/* ============================================================
   DATA VIZ v5 - BIG + PROMINENT (2026-09-12)
   Charts scaled up to be the focal point of their sections.
   ============================================================ */

/* Homepage fact band: give charts real presence */
.fact-band { gap: 0; }
.fact { padding: 6px 30px 4px; }
.fact-chart {
  height: 210px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.fact-chart .dial svg { width: 200px; height: 200px; }
.dial .dial-track { stroke-width: 18; }
.dial .dial-fill { stroke-width: 18; }
.dial .dial-num { font-size: 2.15rem; letter-spacing: -0.8px; }
.dial .dial-cap { font-size: 0.7rem; letter-spacing: 1px; }

/* Big column chart */
.viz-col { width: 100%; max-width: 300px; height: auto; }

/* Big pictogram */
.viz-picto { width: 100%; max-width: 250px; height: auto; }

/* Larger stat headline under each chart */
.fact-num { font-size: 2.6rem; }

@media (max-width: 900px) {
  .fact-chart { height: 168px; }
  .fact-chart .dial svg { width: 156px; height: 156px; }
  .viz-col { max-width: 240px; }
  .viz-picto { width: 200px; height: 76px; }
  .fact-num { font-size: 2.1rem; }
}
/* Stacked fact band: the hairline that divides the three columns becomes a
   stray vertical line down the left of each stacked card on narrow screens.
   Drop it there and separate the stacked facts with a horizontal rule. */
@media (max-width: 900px) {
  .fact { border-left: 0; padding: 16px 0 6px; }
  .fact:first-child { padding-top: 0; }
  .fact + .fact { border-top: 1.5px solid rgba(123, 44, 14, 0.18); }
}

/* Our Impact: bigger dials on the red band */
.stats { padding: 46px 30px; gap: 24px; }
.dial-inline svg { width: 150px; height: 150px; }
.stat .num { font-size: 3rem; }
.stat .label { font-size: 1.02rem; }

/* Research figures: taller, bolder */
.figure { margin-bottom: 26px; }
.figure-track { height: 22px; }
.figure-label { font-size: 1rem; }
.figure-val { font-size: 0.95rem; padding: 3px 12px; }
.why-chart { padding: 30px 30px 26px; }
.why-chart-title { font-size: 1.25rem; margin-bottom: 20px; }

@media (max-width: 900px) {
  .dial-inline svg { width: 118px; height: 118px; }
  .stat .num { font-size: 2.4rem; }
}

/* ============================================================
   PROFESSIONAL POLISH (2026-09-12)
   Joseph: "less rounded corners, more professional."
   Tighten the radius system, drop the hand-cut asymmetric wobble,
   and swap the hard offset "sticker" shadows for soft, subtle ones.
   Palette, mascot and layout are untouched.
   ============================================================ */
:root {
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --wobble-a: 12px;
  --wobble-b: 12px;
  --wobble-c: 12px;
  --shadow-sm: 0 1px 2px rgba(31, 26, 26, 0.06), 0 1px 3px rgba(31, 26, 26, 0.05);
  --shadow: 0 2px 4px rgba(31, 26, 26, 0.06), 0 8px 20px rgba(31, 26, 26, 0.08);
  --shadow-lg: 0 6px 16px rgba(31, 26, 26, 0.10), 0 20px 44px rgba(31, 26, 26, 0.12);
}

/* Cards: small consistent radius, soft shadow, thin border */
.card, .step, .school-card, .meter-card, .faq-item {
  border-radius: 12px !important;
  border: 1px solid rgba(62, 58, 47, 0.12);
  box-shadow: 0 1px 2px rgba(31,26,26,0.05), 0 4px 12px rgba(31,26,26,0.06);
}
.card:hover, .step:hover, .school-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(31,26,26,0.07), 0 10px 24px rgba(31,26,26,0.10);
}

/* Buttons: modest radius, no offset shadow */
.btn, .btn-big, .btn-white, .btn-outline, .btn-gold, .btn-outline-light {
  border-radius: 10px !important;
  border-width: 1px;
  box-shadow: 0 1px 2px rgba(31,26,26,0.08);
}
.btn:hover { box-shadow: 0 3px 10px rgba(31,26,26,0.14); }

/* Nav + toggles: small radius, not pills */
.main-nav a, .nav-donate a, .donor-type-btn { border-radius: 8px; }
.nav-donate a { box-shadow: none; }

/* Bands + strips: nearly square */
.trust-strip, .alt-section, .why-matters, .cta-band { border-radius: 0; }
.hero, .hero-inner { border-radius: 0; }

/* Media: small radius, soft shadow */
.hero-art > img:not(.mascot-hero), .story-art img, .meal-showcase img, .impact-split img,
.school-card img {
  border-radius: 10px !important;
  border-width: 1px;
  box-shadow: 0 4px 16px rgba(31,26,26,0.10);
}
.school-card:hover { transform: translateY(-2px); }

/* Meters / tracks / fills: gentle radius */
.meter-track, .meter-fill, .meter-track .meter-fill,
.hbar-track, .hbar-fill, .figure-track, .figure-fill,
.bar, .viz-bar, .ratio i, .sticky-donate .btn {
  border-radius: 6px !important;
}
.meter-track { border-radius: 8px !important; }
.meter-fill { border-radius: 6px !important; }

/* Inputs + pickers */
.field input, .field textarea, .field select {
  border-radius: 8px; border-width: 1px;
}
.donation-picker button { border-radius: 8px !important; border-width: 1px; box-shadow: none; }
.donation-picker button.selected { box-shadow: 0 0 0 1px rgba(224,79,23,0.5); }

/* Countdown + misc boxes */
.countdown .unit { border-radius: 8px; border-width: 1px; }
.step .step-num { border-radius: 50%; }
.why-emphasis, .viz-panel, .pull-quote { border-radius: 12px; }
.pull-quote::after { border-radius: 0 0 3px 0; }
.why-chart, .sources { border-radius: 10px; border-width: 1px; box-shadow: 0 2px 8px rgba(31,26,26,0.05); }
.trust-strip, .site-footer { border-radius: 0; }

/* Kill leftover big radii */
.brand img, .logo, .hero-badge { border-radius: 8px; }
.mascot-hero, .mascot-float, .div-mtn { border-radius: 0 !important; }

/* ============================================================
   ROLL-OUT: de-box the Get Involved ways-to-help grid
   ============================================================ */
#volunteer .grid-3 { gap: 0; }
#volunteer .card {
  background: none;
  border: 0;
  border-top: 1.5px solid rgba(123, 44, 14, 0.16);
  border-radius: 0 !important;
  box-shadow: none;
  padding: 20px 26px 4px 0;
}
#volunteer .card:hover { transform: none; box-shadow: none; }
#volunteer .card h3 { margin-bottom: 8px; }
#volunteer .card .card-link { margin-top: 8px; }
#volunteer .card.card-primary { border-top-color: var(--red); }
#volunteer .card.card-primary .btn { margin-top: 4px; }
#volunteer .card .socials { margin-top: 10px !important; }
#volunteer .card .socials a { color: var(--red); }

/* Contact + FAQ: quieter card chrome */
.faq-item { border-radius: 10px !important; }

/* Editorial header spacing consistency on subpages */
.section-head.sh-left { margin-bottom: 26px; }
.section-head.sh-split { margin-bottom: 30px; }

/* ============================================================
   WAYS TO HELP: icons + roomier spacing (2026-09-12)
   ============================================================ */
.ways-grid { gap: 34px 40px; }
#volunteer .card.way {
  border-top: 1.5px solid rgba(123, 44, 14, 0.16);
  padding: 24px 6px 10px 0;
}
#volunteer .card.way .way-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(224, 79, 23, 0.10);
  color: var(--red);
}
#volunteer .card.way .way-icon svg { width: 24px; height: 24px; }
#volunteer .card.way h3 { margin-bottom: 8px; }
#volunteer .card.way p { margin-bottom: 12px; }
#volunteer .card.way .card-link { margin-top: 2px; }
#volunteer .card.way.card-primary { border-top-color: var(--red); }
#volunteer .card.way.card-primary .way-icon { background: var(--red); color: #fff; }
#volunteer .card.way.card-primary .btn { margin-top: 2px; }

@media (max-width: 900px) {
  .ways-grid { gap: 28px; }
}

/* ============================================================
   WHERE WE WORK: no school names/photos (2026-09-13)
   Privacy: we state the number of partner schools and the cities,
   never which schools. Replaces the old named school-card strip.
   ============================================================ */
.school-card, .school-strip { display: none !important; }

.school-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 22px;
}
.school-fact {
  border-left: 1.5px solid rgba(123, 44, 14, 0.16);
  padding: 6px 30px;
}
.school-fact:first-child { border-left: 0; padding-left: 0; }
.school-fact-num {
  display: block;
  font-family: var(--font-display);
  font-size: 3.1rem;
  line-height: 1;
  color: #7B2C0E;
  margin-bottom: 8px;
}
.school-fact-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-text);
}
.school-privacy {
  max-width: 70ch;
  font-size: 0.9rem;
  color: var(--gray-text);
  border-top: 1px dashed rgba(123, 44, 14, 0.18);
  padding-top: 14px;
}
.school-privacy a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 980px) {
  .school-facts { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .school-fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .school-fact-num { font-size: 2.7rem; }
}
@media (max-width: 560px) {
  .school-facts { grid-template-columns: 1fr; gap: 18px; }
  .school-fact { border-left: 0; padding: 0; }
  .school-fact-num { font-size: 2.4rem; }
}

/* ============================================================
   DESIGN ELEVATION PASS (2026-09-14)
   "dress it up even more" - richer surface, brand motifs,
   connected process, warmer depth. No libraries, no CSP change,
   everything degrades to a correct static page.
   ============================================================ */

:root {
  /* soft paper grain, inline so no extra request and CSP-safe */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --glow-warm: radial-gradient(60% 55% at 22% 18%, rgba(255, 214, 150, 0.28) 0%, rgba(255, 214, 150, 0) 70%);
}

/* --- 1. Paper grain on the warm light bands (very low opacity) --- */
.section, .alt-section, .why-matters, #schools, .section.alt-section {
  position: relative;
}
.section::before, .alt-section::before, .why-matters::before, #schools::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.section > .section-inner, .alt-section > .section-inner,
.why-matters > .section-inner, #schools > .section-inner { position: relative; z-index: 1; }

/* --- 2. Deeper, warmer hero --- */
.hero-photo {
  background-image: var(--glow-warm), linear-gradient(160deg, #C8380D 0%, #A8340F 62%, #8F2A0B 100%);
  background-blend-mode: normal;
  overflow: hidden;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.07;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; }

/* drifting snow, CSS only, hidden for reduced motion */
.hero-snow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hero-snow i {
  position: absolute;
  top: -12px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  animation: snowFall linear infinite;
}
.hero-snow i:nth-child(1) { left: 6%;  animation-duration: 11s; animation-delay: 0s;   width: 5px; height: 5px; }
.hero-snow i:nth-child(2) { left: 19%; animation-duration: 14s; animation-delay: 2.5s; }
.hero-snow i:nth-child(3) { left: 33%; animation-duration: 12s; animation-delay: 5s;   width: 4px; height: 4px; }
.hero-snow i:nth-child(4) { left: 47%; animation-duration: 16s; animation-delay: 1s; }
.hero-snow i:nth-child(5) { left: 62%; animation-duration: 13s; animation-delay: 6.5s; width: 5px; height: 5px; }
.hero-snow i:nth-child(6) { left: 74%; animation-duration: 15s; animation-delay: 3.5s; }
.hero-snow i:nth-child(7) { left: 86%; animation-duration: 12s; animation-delay: 8s;   width: 4px; height: 4px; }
.hero-snow i:nth-child(8) { left: 94%; animation-duration: 17s; animation-delay: 4.5s; }
@keyframes snowFall {
  0%   { transform: translate3d(0, -20px, 0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.7; }
  100% { transform: translate3d(14px, 92vh, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-snow { display: none; } }

/* --- 3. Brand motif accents (holly / star / snowflake) --- */
.motif {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.motif svg { display: block; width: 100%; height: auto; }
.motif.tl { top: 26px; left: 20px; width: 54px; }
.motif.tr { top: 34px; right: 24px; width: 44px; }
.motif.bl { bottom: 30px; left: 26px; width: 46px; }
.motif.br { bottom: 26px; right: 30px; width: 58px; }
.hero .motif { opacity: 0.42; }
.hero .motif.tr { width: 64px; top: 44px; right: 40px; }
.hero .motif.bl { width: 58px; bottom: 40px; left: 34px; }

/* --- 4. Connected process steps --- */
.steps { position: relative; }
.steps .step { position: relative; padding-top: 22px; }
.steps .step::before {
  content: "";
  position: absolute;
  top: 6px; left: 34px;
  right: -18px;
  height: 2px;
  background-image: linear-gradient(90deg, rgba(123,44,14,0.28) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  background-repeat: repeat-x;
}
.steps .step:last-child::before { right: -18px; }
.steps.steps-2 .step:nth-child(2n)::before { display: none; }
.steps .step .step-num {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50% !important;
  background: var(--grad-band);
  color: #fff !important;
  font-size: 1rem !important;
  font-family: var(--font-body) !important;
  font-weight: 700;
  margin-bottom: 12px;
  box-shadow: 0 3px 8px rgba(168, 52, 15, 0.28);
}
.steps .step:hover .step-num { color: #fff !important; transform: translateY(-2px) scale(1.06); }
.steps .step .step-num { transition: transform 0.2s ease; }

/* --- 5. Facts row: lift + accent on hover --- */
.school-fact { transition: transform 0.2s ease; }
.school-fact:hover { transform: translateY(-3px); }
.school-fact-num { position: relative; }
.school-fact:hover .school-fact-num { color: var(--red); }

/* --- 6. Trust strip: small shield mark --- */
.trust-strip p { display: inline-flex; align-items: center; gap: 9px; justify-content: center; }
.trust-strip svg { width: 17px; height: 17px; flex: none; }

/* --- 7. Kickline markers --- */
.kicker, .hero-eyebrow, .cta-kicker { position: relative; }

/* --- 8. Cards / ways: warmer hover --- */
#volunteer .card.way { transition: transform 0.2s ease, border-color 0.2s ease; }
#volunteer .card.way:hover { transform: translateY(-3px); border-top-color: var(--red); }
#volunteer .card.way:hover .way-icon { background: var(--red); color: #fff; }
#volunteer .card.way .way-icon { transition: background 0.2s ease, color 0.2s ease; }

/* --- 9. CTA band: depth + texture --- */
.cta-band { position: relative; overflow: hidden; background: var(--grad-cta); }
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 150px 150px;
  opacity: 0.06;
  pointer-events: none;
}
.cta-band > .section-inner { position: relative; z-index: 1; }

/* --- 10. Scroll progress bar (JS adds [data-progress]; harmless without) --- */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, #FFD9A0, #F0631F);
  z-index: 9999;
  pointer-events: none;
}

/* --- Fixes after first render of the elevation pass --- */
/* rail was floating above the circle; align it to the circle's centre */
.steps .step { border-top: 0; padding-top: 22px; }
.steps .step::before { top: 38px; left: 34px; right: -18px; height: 2px; }
.steps.steps-2 .step:nth-child(2n)::before { display: none; }
/* lift the holly clear of the hero's bottom edge */
.hero .motif.bl { bottom: 54px; left: 34px; width: 64px; }
/* quieter motifs on light backgrounds */
.motif.soft { opacity: 0.24; }
@media (max-width: 900px) {
  .steps .step::before { display: none; }
}

/* ============================================================
   NUMBERS UPGRADE (2026-09-14)
   "I think we can do a better job displaying those" - Joseph.
   Facts become statement cards: icon chip, big tabular number
   with a count-up, rule, labelled caption. The number is the
   hero of each cell instead of plain text.
   ============================================================ */
.school-facts {
  gap: 16px;
  margin-bottom: 26px;
  /* breathing room so the overlap + rotation never push the viewport.
     Without this the rotated corner of the last card causes a sideways
     scrollbar between ~980px and ~1280px, where the container has no slack. */
  padding: 8px 30px;
}
.school-fact {
  border-left: 0;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.62);
  border: 2px solid rgba(123, 44, 14, 0.13);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 5px 6px 0 rgba(123, 44, 14, 0.07);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.school-fact:first-child { padding-left: 22px; }
.school-fact:nth-child(even) { border-radius: 18px 24px 20px 22px; }
.school-fact:hover {
  transform: translateY(-5px);
  border-color: rgba(224, 79, 23, 0.35);
  box-shadow: 7px 10px 0 rgba(224, 79, 23, 0.12);
}

/* icon chip */
.school-fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grad-band);
  margin-bottom: 14px;
  box-shadow: 0 4px 10px rgba(168, 52, 15, 0.22);
}
.school-fact-icon svg { width: 22px; height: 22px; display: block; }
.school-fact:nth-child(2) .school-fact-icon { background: linear-gradient(135deg, #E8A22B, #C98F0E); }
.school-fact:nth-child(3) .school-fact-icon { background: linear-gradient(135deg, #2A7C3B, #1E5C2B); }
.school-fact:nth-child(4) .school-fact-icon { background: linear-gradient(135deg, #D27E26, #A8340F); }

/* the number itself */
.school-fact .school-fact-num {
  display: block;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.95;
  color: #7B2C0E;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
.school-fact:hover .school-fact-num { color: var(--red); }
.school-fact .school-fact-num span { display: inline-block; }

/* rule between number and caption */
.school-fact .school-fact-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gray-text);
  line-height: 1.35;
  padding-top: 12px;
  border-top: 2px dashed rgba(123, 44, 14, 0.16);
}

@media (max-width: 980px) {
  .school-facts { gap: 16px; }
  .school-fact { padding: 18px 18px 16px; }
  .school-fact .school-fact-num { font-size: 2.8rem; }
}
@media (max-width: 560px) {
  .school-facts { gap: 14px; }
  .school-fact, .school-fact:first-child { padding: 16px 16px 15px; }
  .school-fact .school-fact-num { font-size: 2.5rem; }
  .school-fact-icon { width: 36px; height: 36px; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .school-fact { transition: none; }
}

/* ============================================================
   NUMBERS: PLAYFUL TILT + OVERLAP (2026-09-14)
   Joseph: "make them slightly overlap with each other at a slight
   angle" then "not tilted enough. Remove the animation, but they
   all need to be tilted in different angles along with the words".

   So: no animation at all, stronger tilt, a different angle per
   card, AND a per-element crooked tilt on the icon, number and
   caption so nothing in the card sits square.

   IMPORTANT: the global .reveal "pop" animates transform with
   fill-mode:both, which would (a) override the tilt and (b) keep
   overriding it after it finishes, killing the hover lift too.
   So for these cards the entrance is OPACITY ONLY and the tilt
   lives in the base transform.
   ============================================================ */

/* per-card tilt + vertical offset (the playfulness) */
.school-facts .school-fact {
  --tilt: -4.2deg;
  --lift: 6px;
  margin: 0 -16px;              /* slight overlap into the neighbours */
  position: relative;
  transform: rotate(var(--tilt)) translateY(var(--lift));
  transform-origin: 50% 80%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease,
              opacity 0.5s ease;
}
/* every card leans a different amount, in alternating directions */
.school-facts .school-fact:nth-child(1) { --tilt: -6.5deg; --lift: 9px;  z-index: 1; }
.school-facts .school-fact:nth-child(2) { --tilt:  5.2deg; --lift: -6px; z-index: 2; }
.school-facts .school-fact:nth-child(3) { --tilt: -4.8deg; --lift: 11px; z-index: 3; }
.school-facts .school-fact:nth-child(4) { --tilt:  7deg;   --lift: -5px; z-index: 4; }

/* the words are crooked too: icon, number and caption each get
   their own angle, so nothing inside the card sits square */
.school-facts .school-fact-icon { transform: rotate(var(--icon-tilt, 0deg)); }
.school-facts .school-fact .school-fact-num { transform: rotate(var(--num-tilt, 0deg)); }
.school-facts .school-fact .school-fact-label { transform: rotate(var(--lab-tilt, 0deg)); }

.school-facts .school-fact:nth-child(1) { --icon-tilt:  5.5deg; --num-tilt: -4.2deg; --lab-tilt:  3deg; }
.school-facts .school-fact:nth-child(2) { --icon-tilt: -6.5deg; --num-tilt:  5deg;    --lab-tilt: -3.6deg; }
.school-facts .school-fact:nth-child(3) { --icon-tilt:  4.6deg; --num-tilt: -5.6deg; --lab-tilt:  3.4deg; }
.school-facts .school-fact:nth-child(4) { --icon-tilt: -5.2deg; --num-tilt:  4.4deg; --lab-tilt: -3.2deg; }

/* entrance is opacity only, so it never fights the tilt */
.js .school-facts .school-fact.reveal { transform: rotate(var(--tilt)) translateY(var(--lift)); opacity: 0; }
.js .school-facts .school-fact.reveal.visible { animation: none; opacity: 1; }

/* hover: straighten a touch, lift, and come to the front */
.school-facts .school-fact:hover {
  transform: rotate(calc(var(--tilt) * 0.35)) translateY(calc(var(--lift) - 8px)) scale(1.025);
  border-color: rgba(224, 79, 23, 0.38);
  box-shadow: 9px 13px 0 rgba(224, 79, 23, 0.14);
  z-index: 10;
}

/* below the 4-up breakpoint the overlap would cramp, so ease it off.
   Margins shrink faster than the breakpoints so the rotated cards never
   push past the padding and create a horizontal scrollbar. */
@media (max-width: 1280px) {
  .school-facts { padding: 8px 26px; }
  .school-facts .school-fact { margin: 0 -12px; }
}
@media (max-width: 1150px) {
  .school-facts { padding: 8px 24px; }
  .school-facts .school-fact { margin: 0 -9px; }
}
@media (max-width: 980px) {
  .school-facts { padding: 6px 22px; }
  .school-facts .school-fact { margin: 0 -7px; }
  .school-facts .school-fact:nth-child(1),
  .school-facts .school-fact:nth-child(2),
  .school-facts .school-fact:nth-child(3),
  .school-facts .school-fact:nth-child(4) { --lift: 0px; }
}
@media (max-width: 560px) {
  .school-facts { padding: 4px 4px; }
  .school-facts .school-fact { margin: 0; }
  .school-facts .school-fact:nth-child(1) { --tilt: -3.4deg; --icon-tilt: 3deg;  --num-tilt: -2.4deg; --lab-tilt: 1.7deg; }
  .school-facts .school-fact:nth-child(2) { --tilt:  2.8deg; --icon-tilt: -3.4deg; --num-tilt: 2.6deg;  --lab-tilt: -2deg; }
  .school-facts .school-fact:nth-child(3) { --tilt: -2.6deg; --icon-tilt: 2.4deg;  --num-tilt: -3deg;   --lab-tilt: 1.8deg; }
  .school-facts .school-fact:nth-child(4) { --tilt:  3.6deg; --icon-tilt: -2.8deg; --num-tilt: 2.4deg;  --lab-tilt: -1.7deg; }
}

/* no animation anywhere on these cards; tilt is the whole effect */
@media (prefers-reduced-motion: reduce) {
  .school-facts .school-fact { transition: none; }
}

/* ============================================================
   STAT INFOGRAPHICS REWORK (2026-09-14)
   Joseph picked proposal 2 for the homepage fact band and
   proposal 1 for the Our Impact cards.

   WHY: the old rings were donut gauges. 100 families, 8 schools and
   $10,000 are not fractions of a whole, so the arcs implied a
   completion that does not exist. A ring can only mean "this much of
   a whole". Now each drawing matches the kind of number it describes,
   and the only bar on the site is the one true proportion:
   raised vs goal.
   ============================================================ */

/* ---- Homepage card 1: 1 in 6 drawn as a person row ---- */
/* 6 people, 1 filled. A ring could never show a headcount. */
/* Fluid, not a fixed 288px: a fixed width forced the 3-up column wider than
   its track between roughly 900px and 1010px and created a sideways
   scrollbar. width:100% + height:auto keeps the viewBox ratio. */
.viz-people { width: 100%; max-width: 288px; height: auto; display: block; overflow: visible; }

/* ---- Homepage card 2: name the jump ---- */
.fact-delta {
  display: inline-block;
  margin: 8px 0 2px;
  padding: 3px 11px;
  border-radius: 8px;
  background: rgba(224, 79, 23, 0.10);
  border: 1px solid rgba(224, 79, 23, 0.22);
  color: #A8340F;
  font-weight: 700;
  font-size: 0.76rem;
}

/* ---- Our Impact: statement cards on the red band (proposal 1) ---- */
.stats { padding: 32px 30px; gap: 18px; }
.stat {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 12px;
  padding: 20px 20px 18px;
  align-items: flex-start;
  text-align: left;
  box-shadow: 0 2px 4px rgba(31, 26, 26, 0.06), 0 8px 20px rgba(31, 26, 26, 0.10);
}
/* a little of the facts-row playfulness, kept subtle on the red band */
.stat:nth-child(1) { transform: rotate(-2.2deg) translateY(4px); }
.stat:nth-child(2) { transform: rotate(1.8deg) translateY(-3px); }
.stat:nth-child(3) { transform: rotate(-1.5deg) translateY(5px); }

.stat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--grad-band);
  margin-bottom: 12px;
}
.stat-chip svg { width: 21px; height: 21px; display: block; }
.stat-chip.chip-gold { background: linear-gradient(135deg, #D27E26, #A9742A); }
.stat-chip.chip-deep { background: linear-gradient(135deg, #B33D0E, #8A2D0A); }

/* the number must NOT stay white on a white card */
.stats .stat .num { color: #7B2C0E; font-size: 2.9rem; }
.stats .stat .label { color: #6B655A; }

/* the one true proportion on the site */
.stat-bar { width: 100%; margin-top: 14px; }
.stat-bar-track { height: 8px; border-radius: 6px; background: rgba(123, 44, 14, 0.16); overflow: hidden; }
.stat-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--grad-meter);
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-bar-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #6B655A;
}
.stat-bar-meta .raised { color: #A8340F; }

@media (max-width: 900px) {
  .stats .stat .num { font-size: 2.5rem; }
}
@media (max-width: 560px) {
  .viz-people { max-width: 240px; }
  .stats { padding: 24px 20px; }
  .stat:nth-child(1), .stat:nth-child(2), .stat:nth-child(3) { transform: none; }
  .stats .stat .num { font-size: 2.3rem; }
}

/* ============================================================
   FIGURE REVEAL ON ARRIVAL (2026-09-14)
   Joseph: the 2.5M bars should grow up, and not be rounded at the
   bottom (that is the path change in the markup).

   Progressive enhancement, deliberately: the drawn state is the
   DEFAULT, so with no JS, or if the observer never fires, the figure
   is simply already complete. .chart-play only ADDS the animation.
   Previously the undrawn state was the default and correctness
   depended on a scroll timer, which left figures invisible if it
   did not run.
   ============================================================ */

/* bars rise out of the axis */
@keyframes gatRise { from { transform: scaleY(0.03); } }
.chart-play .viz-bar {
  animation: gatRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* person rows tick in, one by one */
@keyframes gatPop { from { opacity: 0; transform: scale(0.55); } }
.chart-play .viz-person {
  animation: gatPop 0.5s ease-out both;
}
.chart-play .viz-person:nth-child(2) { animation-delay: 0.09s; }
.chart-play .viz-person:nth-child(3) { animation-delay: 0.18s; }
.chart-play .viz-person:nth-child(4) { animation-delay: 0.27s; }
.chart-play .viz-person:nth-child(5) { animation-delay: 0.36s; }
.chart-play .viz-person:nth-child(6) { animation-delay: 0.45s; }

/* horizontal figures sweep out from the left */
@keyframes gatSweep { from { width: 0; } }
.chart-play .figure-fill {
  animation: gatSweep 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .chart-play .viz-bar,
  .chart-play .viz-person,
  .chart-play .figure-fill { animation: none !important; }
}

/* DeftForm contact embed (2026-09-14).
   The form is a third-party iframe, so nothing renders until its script
   loads. Reserve a sensible min-height so the card does not jump from
   near-empty to full size once the iframe arrives. */
.deftform { width: 100%; min-height: 460px; }
.deftform iframe { border: 0; width: 100%; display: block; }
.contact-fallback { font-size: 0.85rem; color: var(--gray-text); margin-top: 12px; }
.contact-fallback a { font-weight: 600; }