/* ==========================================================================
   Riverlight Foundation – Charity Campaign Landing Page (HTML template)
   Hopeful and warm: deep indigo, sunrise orange and sand, soft organic blob
   shapes behind big photos, a live goal bar and a donation picker.
   Change your brand in one place: edit the variables below.
   ========================================================================== */
:root {
  /* Ink & dark sections */
  --indigo: #1F2A5C;        /* headings, dark sections, main text on buttons */
  --indigo-soft: #33427F;   /* hover, secondary dark */
  --indigo-panel: #2A3670;  /* cards on indigo */
  --indigo-night: #151D45;  /* footer */
  --text: #4B5068;          /* body text */
  --sky: #D6DDF5;           /* light text on indigo */

  /* Sunrise accents */
  --sunrise: #F08A4B;       /* donate buttons, highlights */
  --sunrise-deep: #E0702F;  /* button hover, italic accent words */
  --sun: #FFC462;           /* goal bar end, accents on dark */
  --sun-soft: #FCD9BF;      /* impact box, soft blobs */
  --periwinkle: #8E9CE0;    /* fourth chart colour */

  /* Page & surfaces */
  --cream: #FFFAF3;         /* page background */
  --sand: #F7EEE2;          /* alternate sections */
  --sand-2: #EFDDC6;        /* blobs, empty bars */
  --white: #FFFFFF;
  --line: #E7D7C3;          /* borders */

  /* Donut chart colours (used by the "where your money goes" chart) */
  --c-indigo: var(--indigo);
  --c-orange: var(--sunrise);
  --c-gold: var(--sun);
  --c-periwinkle: var(--periwinkle);

  /* Type */
  --font-head: 'Lora', Georgia, serif;                 /* warm serif headings */
  --font-body: 'Source Sans 3', system-ui, sans-serif; /* body, buttons, labels */

  /* Shape & layout */
  --r-xl: 40px;             /* big cards */
  --r-lg: 28px;             /* cards */
  --r-md: 18px;             /* small cards, inputs */
  --r-sm: 12px;
  --container: 1200px;
  --header-h: 80px;
  --shadow: 0 24px 50px -28px rgba(31, 42, 92, .45);
  --shadow-sm: 0 10px 24px -16px rgba(31, 42, 92, .4);

  /* Organic blob shapes (photo crops) */
  --blob-a: 62% 38% 46% 54% / 55% 45% 55% 45%;
  --blob-b: 42% 58% 63% 37% / 48% 38% 62% 52%;
  --blob-c: 50% 50% 38% 62% / 62% 44% 56% 38%;
  --blob-d: 57% 43% 35% 65% / 45% 61% 39% 55%;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font: 18px/1.65 var(--font-body); color: var(--text); background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
figure, blockquote { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--sunrise-deep); }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--indigo); font-weight: 600; letter-spacing: -.6px; line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: 64px; letter-spacing: -1.4px; line-height: 1.05; }
h2 { font-size: 46px; letter-spacing: -1px; }
h3 { font-size: 24px; letter-spacing: -.2px; line-height: 1.25; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { position: relative; width: 100%; max-width: calc(var(--container) + 48px); margin: 0 auto; padding: 0 24px; }
.lead { font-size: 20px; line-height: 1.6; }
.ico { flex: none; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--sunrise); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Accent words: warm italic (write *words* in content.php) */
.accent { font-style: italic; font-weight: 500; color: var(--sunrise-deep); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 26px; border-radius: 999px; font: 700 17px/1.1 var(--font-body); border: 2px solid transparent; cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn--sun { background: var(--sunrise); color: var(--indigo); box-shadow: 0 12px 24px -14px rgba(224, 112, 47, .9); }
.btn--sun:hover { background: var(--sun); color: var(--indigo); }
.btn--indigo { background: var(--indigo); color: var(--white); }
.btn--indigo:hover { background: var(--indigo-soft); color: var(--white); }
.btn--ghost { border-color: rgba(31, 42, 92, .25); color: var(--indigo); background: transparent; }
.btn--ghost:hover { border-color: var(--indigo); color: var(--indigo); }
.btn--sm { padding: 11px 20px; font-size: 16px; }
.btn--lg { padding: 18px 30px; font-size: 18px; }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--indigo); border-bottom: 2px solid var(--sunrise); padding-bottom: 3px; }
.link-arrow .ico { transition: transform .2s; }
.link-arrow:hover .ico { transform: translateX(4px); }

/* ---------- Labels & chips ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--sunrise-deep); font: 700 15px/1.2 var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; }
.eyebrow--pill { padding: 9px 16px; border-radius: 999px; background: var(--white); color: var(--indigo); letter-spacing: .4px; text-transform: none; font-size: 15px; box-shadow: var(--shadow-sm); }
.eyebrow--pill .ico { color: var(--sunrise); }
.eyebrow--light { color: var(--sun); }
.chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--white); color: var(--indigo); font: 700 15px/1.2 var(--font-body); box-shadow: var(--shadow-sm); }
.chip .ico { color: var(--sunrise); }
.chip--small { padding: 7px 13px; font-size: 13.5px; }
.chip--sun { background: var(--sunrise); color: var(--indigo); box-shadow: none; }
.small-note { margin: 22px 0 0; text-align: center; font-size: 14.5px; color: #7B7F93; }

/* Section heading block */
.intro { max-width: 660px; margin-bottom: 44px; }
.intro--center { margin-left: auto; margin-right: auto; text-align: center; }
.intro .lead { margin: 0; }

/* ---------- Sections ---------- */
.section { position: relative; padding: 110px 0; overflow: clip; }
.section--tight { padding: 80px 0; }
.section--sand { background: var(--sand); }
.section--page { padding: 70px 0 110px; }

/* ---------- Blob photos ---------- */
.blob { position: relative; aspect-ratio: 1 / 1; }
.blob__back, .blob__photo { position: absolute; inset: 0; }
.blob__back { transform: translate(5%, 5%) rotate(-8deg) scale(1.02); background: var(--sun-soft); }
.blob__photo { overflow: hidden; background: var(--sand-2); }
.blob__photo img { width: 100%; height: 100%; object-fit: cover; }
.blob--a .blob__photo { border-radius: var(--blob-a); }
.blob--a .blob__back { border-radius: var(--blob-c); }
.blob--b .blob__photo { border-radius: var(--blob-b); }
.blob--b .blob__back { border-radius: var(--blob-d); }
.blob--c .blob__photo { border-radius: var(--blob-c); }
.blob--c .blob__back { border-radius: var(--blob-a); }
.blob--d .blob__photo { border-radius: var(--blob-d); }
.blob--d .blob__back { border-radius: var(--blob-b); }
.blob--sun .blob__back { background: var(--sunrise); opacity: .9; }
.blob--sand .blob__back { background: var(--sand-2); }
.blob--sky .blob__back { background: var(--sky); }
.blob--indigo .blob__back { background: var(--indigo); }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 60; background: rgba(255, 250, 243, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(231, 215, 195, .8); }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--indigo); --sand: var(--cream); }
.logo:hover { color: var(--indigo); }
.logo__mark { display: inline-flex; color: var(--indigo); }
.logo__text { display: flex; flex-direction: column; font: 600 23px/1 var(--font-head); letter-spacing: -.4px; }
.logo__text small { margin-top: 4px; font: 700 11px/1 var(--font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--sunrise-deep); }
.nav { display: flex; gap: 4px; }
.nav a { position: relative; padding: 8px 12px; color: var(--indigo); font-weight: 600; font-size: 16px; }
.nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--sunrise); transform: scaleX(0); transition: transform .2s; }
.nav a:hover { color: var(--indigo); }
.nav a:hover::after { transform: scaleX(1); }
.header__actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--sand-2); color: var(--indigo); cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle .is-close, .menu-open .menu-toggle .is-open { display: none; }
.menu-open .menu-toggle .is-close { display: block; }
.mobile-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 12px 0 24px; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.mobile-nav .container { display: flex; flex-direction: column; }
.mobile-nav a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--indigo); font: 600 21px/1.3 var(--font-head); }
.mobile-nav .btn { margin-top: 18px; }

/* ---------- Goal bar ---------- */
.goal__raised { margin: 0 0 12px; font-size: 17px; color: var(--text); }
.goal__raised strong { margin-right: 6px; font: 600 38px/1 var(--font-head); color: var(--indigo); letter-spacing: -.8px; }
.goal__bar { position: relative; height: 14px; border-radius: 999px; background: var(--sand-2); overflow: hidden; }
.goal__bar span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 999px; background: linear-gradient(90deg, var(--sunrise), var(--sun)); animation: grow 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.goal__bar--light { background: rgba(255, 255, 255, .2); }
@keyframes grow { from { width: 0; } }
.goal__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 14px; font-size: 16px; }
.goal__stats li { display: inline-flex; align-items: center; gap: 7px; }
.goal__stats .ico { color: var(--sunrise-deep); }
.goal__stats strong { color: var(--indigo); }
.goal__pct { margin-left: auto; padding: 4px 11px; border-radius: 999px; background: var(--sun-soft); color: var(--indigo); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 70px 0 100px; background: radial-gradient(circle at 82% 18%, rgba(255, 196, 98, .55), transparent 38%), radial-gradient(circle at 60% 90%, rgba(240, 138, 75, .18), transparent 40%), var(--sand); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hero h1 { margin: 6px 0 22px; }
.hero .lead { max-width: 560px; margin-bottom: 30px; }
.hero__card { max-width: 580px; padding: 28px; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
.hero__card .actions { margin-top: 24px; }
.hero__media { position: relative; padding: 20px 30px 60px 10px; }
.hero__blob { width: 100%; aspect-ratio: 1 / 1.04; }
.hero__inset { position: absolute; left: -14px; bottom: 6px; width: 38%; border: 0; }
.hero__inset .blob__photo { border: 6px solid var(--sand); }
.hero__chip { position: absolute; right: 4px; top: 40px; max-width: 250px; white-space: normal; }

/* ---------- Problem & solution ---------- */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.why__media { position: relative; padding: 0 70px 80px 0; }
.why__a { width: 100%; aspect-ratio: 1 / .92; }
.why__b { position: absolute; right: 0; bottom: 0; width: 46%; }
.why__b .blob__photo { border: 6px solid var(--cream); }
.why__stat { position: absolute; left: 6%; bottom: 10px; display: flex; flex-direction: column; max-width: 210px; margin: 0; padding: 18px 20px; border-radius: var(--r-md); background: var(--indigo); color: var(--sky); font-size: 14.5px; line-height: 1.4; box-shadow: var(--shadow); }
.why__stat strong { font: 600 36px/1 var(--font-head); color: var(--sun); margin-bottom: 6px; }
.why__body .intro { margin-bottom: 30px; }
.why__pair { display: grid; gap: 16px; margin-bottom: 30px; }
.why__item { position: relative; padding: 24px 26px 22px 80px; border-radius: var(--r-lg); background: var(--sand); }
.why__item--sol { background: var(--white); box-shadow: inset 0 0 0 2px var(--sun-soft); }
.why__item h3 { margin-bottom: 6px; font-size: 22px; }
.why__item p { margin: 0; }
.why__num { position: absolute; left: 24px; top: 24px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--blob-a); background: var(--sand-2); color: var(--indigo); font: 600 italic 16px/1 var(--font-head); }
.why__item--sol .why__num { background: var(--sunrise); }

/* ---------- Donation picker ---------- */
.donate { background: radial-gradient(circle at 12% 100%, rgba(240, 138, 75, .35), transparent 40%), radial-gradient(circle at 95% 0%, rgba(142, 156, 224, .3), transparent 40%), var(--indigo); color: var(--sky); }
.donate h2 { color: var(--white); }
.donate .accent, .match .accent { color: var(--sun); }
.donate .eyebrow { color: var(--sun); }
.donate__grid { display: grid; grid-template-columns: 1fr 520px; gap: 80px; align-items: center; }
.donate__side .intro { margin-bottom: 26px; }
.donate__points { display: grid; gap: 12px; margin-bottom: 40px; }
.donate__points li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--white); }
.donate__points .ico { padding: 5px; width: 28px; height: 28px; border-radius: 50%; background: var(--sunrise); color: var(--indigo); }
.donate__blob { width: 78%; max-width: 420px; aspect-ratio: 1.15 / 1; }
.give { position: relative; padding: 34px; border-radius: var(--r-xl); background: var(--cream); color: var(--text); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.give__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.give__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 26px/1.1 var(--font-head); color: var(--indigo); }
.give__title .ico { color: var(--sunrise-deep); }
.give__match { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--indigo); color: var(--sun); font-size: 14px; font-weight: 700; }
.give__freq { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; margin-bottom: 18px; border-radius: 999px; background: var(--sand-2); }
.give__freq label, .amount { position: relative; cursor: pointer; }
.give__freq input, .amount input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.give__freq span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-radius: 999px; font-weight: 700; color: var(--indigo); transition: background .2s, color .2s; }
.give__freq input:checked + span { background: var(--indigo); color: var(--white); box-shadow: var(--shadow-sm); }
.give__freq input:checked + span .ico { color: var(--sun); }
.give__freq input:focus-visible + span, .amount input:focus-visible + span { outline: 3px solid var(--sunrise); outline-offset: 2px; }
.give__amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.amount:not(.amount--other) span { display: flex; align-items: center; justify-content: center; height: 62px; border-radius: var(--r-md); background: var(--white); border: 2px solid var(--line); font: 600 22px/1 var(--font-head); color: var(--indigo); transition: border-color .2s, background .2s, transform .2s; }
.amount:not(.amount--other):hover span { border-color: var(--sunrise); }
.amount input:checked + span { background: var(--sunrise); border-color: var(--sunrise); transform: translateY(-2px); box-shadow: 0 12px 20px -14px rgba(224, 112, 47, .9); }
.amount--other { grid-column: 1 / -1; display: flex; align-items: center; height: 58px; border-radius: var(--r-md); background: var(--white); border: 2px solid var(--line); transition: border-color .2s; }
.amount--other:focus-within, .amount--other.is-active { border-color: var(--sunrise); box-shadow: 0 0 0 3px rgba(240, 138, 75, .2); }
.amount__cur { padding: 0 4px 0 18px; font: 600 20px/1 var(--font-head); color: var(--indigo); }
.amount--other input { flex: 1; min-width: 0; height: 100%; padding: 0 16px 0 4px; border: 0; background: transparent; font: 600 19px/1 var(--font-body); color: var(--indigo); -moz-appearance: textfield; }
.amount--other input::-webkit-outer-spin-button, .amount--other input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount--other input:focus { outline: none; }
.amount--other input::placeholder { color: #8D90A2; font-weight: 500; }
.give__impact { display: flex; align-items: center; gap: 14px; min-height: 88px; margin-bottom: 18px; padding: 16px 18px; border-radius: var(--r-md); background: var(--sun-soft); }
.give__impact p { margin: 0; color: var(--indigo); font-weight: 600; line-height: 1.45; }
.give__impact-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--blob-c); background: var(--white); color: var(--sunrise-deep); }
.give__impact.is-updated p { animation: pop .35s ease; }
@keyframes pop { from { opacity: .2; transform: translateY(4px); } }
.give__error { margin: -6px 0 14px; color: #B4412A; font-weight: 600; font-size: 15px; }
.give__secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; font-size: 15px; }
.give__secure .ico { color: var(--sunrise-deep); }
.give__note { margin: 10px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: #8D90A2; }

/* ---------- Impact numbers ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { position: relative; display: flex; flex-direction: column; padding: 30px 26px 28px; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.stat::before { content: ''; position: absolute; right: -26px; top: -26px; width: 96px; height: 96px; border-radius: var(--blob-b); background: var(--sun-soft); }
.stat:nth-child(2)::before { background: var(--sky); border-radius: var(--blob-c); }
.stat:nth-child(3)::before { background: var(--sand-2); border-radius: var(--blob-d); }
.stat:nth-child(4)::before { background: var(--sun); opacity: .55; }
.stat strong { position: relative; font: 600 58px/1 var(--font-head); color: var(--indigo); letter-spacing: -1.5px; margin-bottom: 12px; }
.stat__label { font-weight: 700; color: var(--indigo); font-size: 18px; }
.stat__note { font-size: 15.5px; }

/* ---------- Where the money goes ---------- */
.money { background: var(--sand); }
.money__grid { display: grid; grid-template-columns: 460px 1fr; gap: 90px; align-items: center; }
.money__chart { position: relative; padding: 30px; }
.money__chart::before { content: ''; position: absolute; inset: 0; border-radius: var(--blob-d); background: var(--sand-2); transform: rotate(10deg); }
.donut { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--donut); box-shadow: var(--shadow); }
.donut__hole { position: absolute; inset: 21%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; border-radius: 50%; background: var(--cream); text-align: center; }
.donut__hole strong { font: 600 64px/1 var(--font-head); color: var(--indigo); letter-spacing: -2px; }
.donut__hole span { max-width: 170px; margin-top: 8px; font-size: 15.5px; line-height: 1.35; }
.money__body .intro { margin-bottom: 30px; }
.legend { display: grid; gap: 10px; }
.legend__item { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--r-md); background: var(--cream); }
.legend__swatch { width: 16px; height: 16px; border-radius: 50%; }
.legend__body strong { display: block; color: var(--indigo); font-size: 18px; }
.legend__body span { font-size: 15.5px; }
.legend__pct { font: 600 30px/1 var(--font-head); color: var(--indigo); }
.money__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.money__cost { margin: 0; font-size: 16px; }
.money__cost strong { color: var(--indigo); font: 600 21px/1.2 var(--font-head); }

/* ---------- Stories ---------- */
#stories { background: var(--cream); }
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; align-items: start; }
.story { position: relative; }
.story--2 { margin-top: 60px; }
.story__blob { width: 84%; margin: 0 auto; aspect-ratio: 1 / 1.05; }
.story__tag { position: absolute; left: 0; top: 24px; z-index: 2; }
.story blockquote { position: relative; margin: -46px 0 0; padding: 30px 28px 6px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--white); box-shadow: 0 -1px 0 var(--line); }
.story blockquote .ico { color: var(--sunrise); margin-bottom: 10px; }
.story blockquote p { margin: 0; font: italic 500 19px/1.55 var(--font-head); color: var(--indigo); }
.story figcaption { display: grid; gap: 4px; padding: 16px 28px 26px; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--white); font-size: 15px; line-height: 1.45; box-shadow: var(--shadow-sm); }
.story figcaption strong { color: var(--indigo); font-size: 18px; }
.story__role { display: flex; align-items: flex-start; gap: 6px; }
.story__role .ico { margin-top: 2px; color: var(--sunrise-deep); }

/* ---------- Milestones ---------- */
#milestones { background: var(--sand); }
.miles__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.miles__head .intro { margin-bottom: 0; }
.miles__photos { display: flex; align-items: flex-end; gap: 22px; flex: none; }
.miles__photos .blob:first-child { width: 220px; }
.miles__photos .blob:last-child { width: 160px; margin-bottom: 30px; }
.miles { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.miles::before { content: ''; position: absolute; left: 4%; right: 4%; top: 70px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--sand-2), var(--indigo) 30%, var(--indigo) 70%, var(--sunrise)); }
.mile { position: relative; display: flex; flex-direction: column; }
.mile__year { font: italic 600 34px/40px var(--font-head); color: var(--indigo); margin-bottom: 12px; }
.mile__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 20px; border-radius: 50%; background: var(--indigo); color: var(--sun); box-shadow: 0 0 0 6px var(--sand); }
.mile__body { flex: 1; padding: 22px; border-radius: var(--r-lg); background: var(--cream); }
.mile__body h3 { font-size: 21px; margin-bottom: 8px; }
.mile__body p { font-size: 16px; line-height: 1.55; }
.mile__total { margin: 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 15px; }
.mile__total strong { font: 600 22px/1 var(--font-head); color: var(--indigo); margin-left: 4px; }
.mile--now .mile__year { color: var(--sunrise-deep); }
.mile--now .mile__dot { background: var(--sunrise); color: var(--indigo); animation: ring 2.2s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 6px var(--sand), 0 0 0 6px rgba(240, 138, 75, .5); } 100% { box-shadow: 0 0 0 6px var(--sand), 0 0 0 22px rgba(240, 138, 75, 0); } }
.mile--now .mile__body { background: var(--white); box-shadow: inset 0 0 0 2px var(--sunrise), var(--shadow); }
.mile--now .chip { margin-bottom: 12px; }

/* ---------- Matching gift band ---------- */
.match { position: relative; padding: 100px 0; color: var(--sky); overflow: clip; background: var(--indigo); }
.match__bg { position: absolute; inset: 0; }
.match__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.match__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 29, 69, .95) 0%, rgba(31, 42, 92, .84) 55%, rgba(31, 42, 92, .45) 100%); }
.match__inner { display: grid; grid-template-columns: auto 1fr 380px; gap: 50px; align-items: center; }
.match__badge { display: grid; place-items: center; width: 168px; height: 168px; margin: 0; border-radius: var(--blob-a); background: var(--sunrise); box-shadow: 0 0 0 12px rgba(240, 138, 75, .25); }
.match__badge span { font: italic 600 74px/1 var(--font-head); color: var(--indigo); }
.match h2 { color: var(--white); font-size: 42px; }
.match__body p:last-child { margin: 0; font-size: 19px; max-width: 520px; }
.match__side { padding: 28px; border-radius: var(--r-lg); background: rgba(21, 29, 69, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(214, 221, 245, .2); }
.match__used { margin: 0 0 12px; font-size: 16px; }
.match__used strong { font: 600 30px/1 var(--font-head); color: var(--white); margin-right: 4px; }
.match__side .btn { margin-top: 22px; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: start; }
.faq-side .intro { margin-bottom: 30px; }
.ask { padding: 28px; border-radius: var(--r-lg); background: var(--sand); }
.ask p { margin: 0 0 18px; }
.ask strong { display: block; font: 600 22px/1.2 var(--font-head); color: var(--indigo); margin-bottom: 4px; }
.faq { display: grid; gap: 12px; }
.faq__item { border-radius: var(--r-md); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.faq__item[open] { box-shadow: inset 0 0 0 2px var(--sun-soft), var(--shadow-sm); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; cursor: pointer; list-style: none; font: 600 20px/1.35 var(--font-head); color: var(--indigo); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__toggle { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sand); color: var(--indigo); transition: transform .25s, background .25s; }
.faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--sunrise); }
.faq__item p { margin: 0; padding: 0 24px 24px; }

/* ---------- Final call to action ---------- */
.cta { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; padding: 64px; border-radius: var(--r-xl); background: radial-gradient(circle at 90% 10%, rgba(255, 196, 98, .6), transparent 45%), var(--sand); overflow: hidden; }
.cta h2 { margin-bottom: 16px; }
.cta .lead { margin-bottom: 26px; }
.cta .goal { margin-bottom: 28px; padding: 22px; border-radius: var(--r-md); background: var(--white); }
.cta__media .blob { max-width: 440px; margin-left: auto; }

/* ---------- Footer ---------- */
.footer { padding: 80px 0 30px; background: var(--indigo-night); color: var(--sky); font-size: 16px; }
.footer a { color: var(--sky); }
.footer a:hover { color: var(--sun); }
.footer .logo, .footer .logo:hover { color: var(--white); --sand: var(--indigo-night); }
.footer .logo__mark { color: var(--white); }
.footer .logo__text small { color: var(--sun); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 50px; padding-bottom: 50px; }
.footer__brand p { margin: 20px 0 22px; max-width: 320px; }
.footer__brand .btn, .footer__brand .btn:hover { color: var(--indigo); }
.footer__title { margin-bottom: 16px; color: var(--white); font: 600 19px/1.2 var(--font-head); }
.footer__list { display: grid; gap: 10px; }
.footer__list--contact li, .footer__list--contact a { display: flex; align-items: center; gap: 10px; }
.footer__list--contact .ico { color: var(--sun); }
.footer__transparency { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 22px 0; border-top: 1px solid rgba(214, 221, 245, .16); font-size: 15px; }
.footer__transparency .ico { margin-top: 2px; padding: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--sunrise); color: var(--indigo); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(214, 221, 245, .16); font-size: 14.5px; color: #A9B2D8; }
.footer__bottom p { margin: 0; }

/* ---------- Thank-you page ---------- */
.thanks { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: center; padding: 60px; border-radius: var(--r-xl); background: radial-gradient(circle at 92% 8%, rgba(255, 196, 98, .55), transparent 40%), var(--sand); }
.thanks h1 { font-size: 56px; }
.thanks { align-items: start; }
.thanks__media { position: sticky; top: calc(var(--header-h) + 40px); }
.thanks__impact { min-height: 0; }
.next { display: grid; gap: 12px; margin: 26px 0; }
.next li { display: flex; align-items: flex-start; gap: 14px; }
.next__n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--blob-b); background: var(--indigo); color: var(--sun); font: italic 600 17px/1 var(--font-head); }
.next strong { display: block; color: var(--indigo); }
.share { margin-bottom: 22px; padding: 20px 22px; border-radius: var(--r-md); background: var(--white); }
.share__title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-weight: 700; color: var(--indigo); }
.share__title .ico { color: var(--sunrise-deep); }
.share__links { display: flex; flex-wrap: wrap; gap: 10px; }
.share__link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--sand); font-weight: 700; font-size: 15px; color: var(--indigo); transition: background .2s; }
.share__link:hover { background: var(--sunrise); color: var(--indigo); }
.thanks__receipt { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; }
.thanks__receipt .ico { margin-top: 2px; color: var(--sunrise-deep); }

/* ---------- 404 page ---------- */
.lost { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.lost__media { position: relative; max-width: 460px; }
.lost__num { position: absolute; left: -10px; bottom: -10px; margin: 0; padding: 10px 26px; border-radius: 999px; background: var(--indigo); color: var(--sun); font: italic 600 64px/1 var(--font-head); box-shadow: var(--shadow); }

/* ==========================================================================
   Tablet (≤ 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  h1 { font-size: 52px; }
  h2 { font-size: 38px; }
  h3 { font-size: 23px; }
  .section { padding: 84px 0; }
  .section--tight { padding: 64px 0; }
  .nav, .header__actions > .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .menu-open .mobile-nav { display: block; }
  .hero { padding: 50px 0 80px; }
  .hero__grid, .why, .donate__grid, .money__grid, .faq-wrap, .cta, .thanks, .lost { grid-template-columns: 1fr; gap: 50px; }
  .hero__media { max-width: 560px; margin: 0 auto; width: 100%; }
  .hero__card { max-width: none; }
  .why__media { max-width: 600px; }
  .donate__grid { gap: 50px; }
  .give { max-width: 620px; }
  .donate__blob { display: none; }
  .donate__points { margin-bottom: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .money__chart { max-width: 440px; margin: 0 auto; width: 100%; }
  .stories { grid-template-columns: 1fr 1fr; }
  .story--2 { margin-top: 0; }
  .story--3 { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
  .miles__photos .blob:first-child { width: 170px; }
  .miles__photos .blob:last-child { width: 120px; }
  .miles { grid-template-columns: 1fr; gap: 18px; }
  .miles::before { left: 19px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; background: linear-gradient(180deg, var(--sand-2), var(--indigo) 30%, var(--indigo) 70%, var(--sunrise)); }
  .mile { display: grid; grid-template-columns: 38px 1fr; column-gap: 22px; }
  .mile__dot { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .mile__year { grid-column: 2; margin-bottom: 8px; font-size: 28px; line-height: 38px; }
  .mile__body { grid-column: 2; }
  .match__inner { grid-template-columns: auto 1fr; }
  .match__side { grid-column: 1 / -1; }
  .faq-wrap { gap: 40px; }
  .cta { padding: 48px; }
  .cta__media .blob { margin: 0 auto; max-width: 380px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .thanks { padding: 44px; }
  .thanks__media { position: static; max-width: 420px; width: 100%; margin: 0 auto; }
  .lost__media { margin: 0 auto; width: 100%; }
}

/* ==========================================================================
   Phone (≤ 767px)
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 17px; }
  h1 { font-size: 40px; letter-spacing: -.8px; }
  h2 { font-size: 31px; letter-spacing: -.5px; }
  h3 { font-size: 22px; }
  .lead { font-size: 18px; }
  :root { --header-h: 68px; }
  .container { padding: 0 18px; }
  .section { padding: 64px 0; }
  .section--tight { padding: 52px 0; }
  .section--page { padding: 36px 0 70px; }
  .intro { margin-bottom: 32px; }
  .btn--lg { padding: 16px 24px; font-size: 17px; }
  .logo__mark svg { width: 34px; height: 34px; }
  .logo__text { font-size: 20px; }
  .logo__text small { font-size: 10px; letter-spacing: 2.4px; }
  .eyebrow--pill { white-space: normal; line-height: 1.35; }
  .hero { padding: 32px 0 60px; }
  .hero__card { padding: 20px; }
  .hero__card .actions .btn { flex: 1 1 100%; }
  .goal__raised strong { font-size: 32px; }
  .goal__stats { gap: 8px 16px; font-size: 15px; }
  .hero__media { padding: 10px 10px 40px 10px; }
  .hero__inset { left: -4px; width: 40%; }
  .hero__chip { right: 0; top: 6px; max-width: 200px; font-size: 13.5px; padding: 8px 12px; }
  .why { gap: 40px; }
  .why__media { padding: 0 40px 70px 0; }
  .why__stat { left: 0; bottom: 0; max-width: 180px; padding: 14px 16px; font-size: 13.5px; }
  .why__stat strong { font-size: 30px; }
  .why__item { padding: 20px 20px 18px 70px; }
  .why__num { left: 18px; top: 20px; width: 36px; height: 36px; }
  .give { padding: 22px 18px; border-radius: var(--r-lg); }
  .give__title { font-size: 22px; }
  .give__amounts { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .amount:not(.amount--other) span { height: 56px; font-size: 21px; }
  .give__impact { align-items: flex-start; }
  .stats { gap: 12px; }
  .stat { padding: 22px 18px; }
  .stat strong { font-size: 40px; }
  .stat__label { font-size: 16px; }
  .stat__note { font-size: 14px; }
  .money__chart { padding: 16px; }
  .donut__hole strong { font-size: 46px; }
  .donut__hole span { font-size: 13.5px; max-width: 130px; }
  .legend__item { padding: 14px 16px; gap: 12px; }
  .legend__pct { font-size: 24px; }
  .stories { grid-template-columns: 1fr; gap: 40px; }
  .story--3 { max-width: none; }
  .story blockquote { padding: 26px 22px 4px; }
  .story figcaption { padding: 14px 22px 22px; }
  .miles__head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; gap: 26px; }
  .miles__photos { align-self: center; }
  .match { padding: 70px 0; }
  .match__bg::after { background: linear-gradient(180deg, rgba(21, 29, 69, .92), rgba(31, 42, 92, .86)); }
  .match__inner { grid-template-columns: 1fr; gap: 26px; }
  .match__badge { width: 110px; height: 110px; }
  .match__badge span { font-size: 50px; }
  .match h2 { font-size: 31px; }
  .match__side { padding: 22px; }
  .faq__item summary { padding: 18px; font-size: 18px; }
  .faq__item p { padding: 0 18px 20px; }
  .cta { padding: 30px 20px; border-radius: var(--r-lg); gap: 36px; }
  .cta .goal { padding: 18px; }
  .cta .actions .btn { flex: 1 1 100%; }
  .footer { padding: 60px 0 26px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; padding-bottom: 36px; }
  .footer__brand, .footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer__list--contact a { word-break: break-all; }
  .thanks { padding: 30px 20px; border-radius: var(--r-lg); gap: 36px; }
  .thanks h1 { font-size: 38px; }
  .thanks .actions .btn, .lost .actions .btn { flex: 1 1 100%; }
  .lost { gap: 40px; }
  .lost__num { font-size: 46px; left: 0; }
}