/* ============================================================
   One Kidney Wonder — Carter's Fundraiser
   Rebuilt 1:1 from the 14 approved mockups.
   ============================================================ */

:root{
  --coral:#d8502c;
  --coral-deep:#c8431f;
  --coral-soft:#e2704f;
  --gold:#e8a93c;
  --butter:#f2cf6e;
  --butter-deep:#e9bd4e;
  --navy:#1f2d4a;
  --navy-deep:#182238;
  --ink:#2e3644;
  --body:#5c544b;
  --cream:#faf3e8;
  --cream2:#fdf9f1;
  --card:#fffdf8;
  --line:#eadfcd;
  --wash-peach:rgba(242,182,140,.28);
  --wash-yellow:rgba(245,207,110,.30);
  --shadow:0 10px 30px rgba(90,60,30,.10);
  --shadow-lg:0 18px 50px rgba(90,60,30,.16);
  --oswald:"Oswald",sans-serif;
  --script:"Dancing Script",cursive;
  --hand:"Caveat",cursive;
  --sans:"Nunito Sans",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--body);
  background:var(--cream);
  overflow-x:hidden;
  line-height:1.55;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;background:none;border:none}
section{position:relative}
[id]{scroll-margin-top:86px}

.sec-inner{max-width:1240px;margin:0 auto;padding:0 40px;position:relative;z-index:3}
.sec{padding:66px 0 0}

/* ---------- typography helpers ---------- */
.display-ink,.display-mixed,.display-stack{
  font-family:var(--oswald);font-weight:600;color:var(--ink);
  text-transform:uppercase;line-height:1.04;letter-spacing:.5px;
}
.display-ink{font-size:clamp(36px,4.6vw,62px)}
.display-ink.md{font-size:clamp(26px,2.6vw,36px)}
.display-mixed{font-size:clamp(34px,4.2vw,56px)}
.display-stack{display:flex;flex-direction:column;font-size:clamp(40px,5vw,68px)}
.display-stack .coral,.display-mixed .coral{color:var(--coral)}
.display-thin{font-family:var(--oswald);font-weight:400;font-size:clamp(30px,3.4vw,46px);text-transform:uppercase;color:var(--ink);letter-spacing:2px}
.coral{color:var(--coral)}
.gold{color:var(--gold)}
.ink{color:var(--ink)}

.script-hero{font-family:var(--script);font-weight:700;color:var(--coral);font-size:clamp(64px,8vw,110px);line-height:.95}
.script-hero.sm-script{font-size:clamp(40px,4.6vw,64px)}
.script-over{font-family:var(--hand);font-size:clamp(28px,2.6vw,40px);color:var(--ink);letter-spacing:1px}
.script-coral{font-family:var(--script);font-weight:600;color:var(--coral)}
.script-gold{font-family:var(--script);font-weight:600;color:var(--gold)}
.script-ink{font-family:var(--script);font-weight:600;color:var(--ink)}
.script-white{font-family:var(--script);font-weight:600;color:#fff}
.script-coral.sm,.script-gold.sm{font-size:20px}
.script-coral.md,.script-gold.md,.script-ink.md{font-size:clamp(22px,2vw,28px)}
.script-coral.lg,.script-ink.lg{font-size:clamp(26px,2.6vw,36px)}
.script-coral.xl{font-size:clamp(40px,4.4vw,58px)}
.script-coral.xxl{font-size:clamp(44px,5vw,72px)}
.script-white{font-size:clamp(24px,2.4vw,32px)}
.script-white.sm{font-size:clamp(17px,1.5vw,21px)}
.script-ink .u,.script-coral .u{border-bottom:3px solid var(--coral);padding-bottom:2px}

.body{font-size:16px}
/* stacked paragraphs need a break — without this they read as one block with a
   stray line wrap. em-based so it tracks .body.sm too. */
.body + .body{margin-top:.9em}
.body.sm{font-size:14px}
.body-lg{font-size:clamp(16px,1.4vw,19px)}
.body-lg.strong{font-weight:700;color:var(--ink)}
.fine{font-size:13px;color:#8a8074}
.fine.center{text-align:center;margin:26px 0 0}
.hand{font-family:var(--hand);font-weight:600;font-size:19px;color:var(--ink)}
.hand.lg{font-size:24px;color:var(--ink)}
.hand.coral{color:var(--coral)}
.quote-caps{font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:2.5px}
.tiny-heart{color:var(--coral);font-size:26px;line-height:1}
.tiny-heart.sm{font-size:18px}
.heart-side{color:var(--coral);font-size:34px;font-weight:400}
.heart-side.sm{font-size:24px}
.heart-rule{display:block;color:var(--coral);font-size:22px;margin:6px 0}
.heart-doodle{color:var(--coral);font-size:30px;margin-left:8px}
.qq{font-family:Georgia,serif;font-size:64px;line-height:.6;color:var(--gold);display:block;margin-bottom:14px}
.qq.coral{color:var(--coral)}
.qq.sm{font-size:34px;display:inline;vertical-align:-8px;margin-right:4px}

/* ---------- icons ---------- */
.ic{width:18px;height:18px;flex:none}
.ic-lg{width:30px;height:30px;flex:none}
.ic-xl{width:46px;height:46px;flex:none}
.coral svg,svg.coral{color:var(--coral)}
svg.gold{color:var(--gold)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;
  letter-spacing:1.5px;font-size:14px;line-height:1;
  padding:16px 26px;border-radius:8px;transition:transform .25s,box-shadow .25s,background .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(150,60,20,.25)}
.btn .ic-arrow{margin-left:2px;transition:transform .25s}
.btn:hover .ic-arrow{transform:translateX(4px)}
.btn-solid{background:var(--coral);color:#fff}
.btn-solid:hover{background:var(--coral-deep)}
.btn-yellow{background:var(--butter);color:#4a3c1c}
.btn-yellow:hover{background:var(--butter-deep)}
.btn-gold{background:var(--gold);color:#fff}
.btn-line{border:2px solid var(--coral);color:var(--coral);background:transparent}
.btn-line:hover{background:var(--coral);color:#fff}
.btn-ghost{border:2px solid rgba(255,255,255,.85);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.14);box-shadow:none}
.btn-ghost.gold-line{border-color:var(--butter);color:var(--butter)}
.btn-dark{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--coral)}
.btn-white-solid{background:var(--coral);color:#fff;border:2px solid var(--coral)}
.btn-navy{background:var(--navy);color:#fff;flex-direction:column;align-items:flex-start;gap:4px}
.btn-navy small,.btn-ghost small{font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;opacity:.85}
.btn.wide{width:100%;justify-content:center}
.btn.xl{padding:20px 40px;font-size:16px}
.btn-tiny{border:1.5px solid var(--coral);color:var(--coral);padding:8px 14px;font-size:11px;border-radius:6px;letter-spacing:1px}
.btn-tiny:hover{background:var(--coral);color:#fff;box-shadow:none}
.btn-heart{font-size:16px}

/* ---------- polaroids ---------- */
.polaroid{
  background:#fff;padding:14px 14px 18px;border-radius:4px;
  box-shadow:var(--shadow-lg);position:relative;display:inline-block;
}
.polaroid img{border-radius:2px}
.polaroid figcaption{text-align:center;padding-top:10px;font-size:22px}
.polaroid.mini{padding:9px 9px 11px}
.tilt-r{transform:rotate(2.2deg)}
.tilt-l{transform:rotate(-2.4deg)}
.taped::before{
  content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:110px;height:30px;background:rgba(226,205,160,.8);border-radius:2px;
  box-shadow:0 2px 6px rgba(120,90,40,.15);
}
.polaroid.mini.taped::before{width:70px;height:20px;top:-10px}

/* ---------- washes / dots / badges ---------- */
.wash-dot{
  width:88px;height:88px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 35%,rgba(247,213,120,.75),rgba(243,192,98,.35) 70%,transparent 75%);
  color:var(--ink);
}
.wash-dot.sm{width:58px;height:58px}
.wash-dot.sm .ic{width:24px;height:24px}
.badge{
  position:absolute;width:62px;height:62px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  border:4px solid #fff;box-shadow:0 6px 16px rgba(120,50,20,.25);
}
.badge .ic{width:26px;height:26px}
.badge-coral{background:var(--coral)}
.badge-cream{background:linear-gradient(140deg,#f7dfae,#f3c987);color:var(--coral)}
.round-ic{
  width:110px;height:110px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 10px 26px rgba(150,70,30,.22);
}
.coral-ic{background:radial-gradient(circle at 35% 30%,#e2704f,#d8502c)}
.gold-ic{background:radial-gradient(circle at 35% 30%,#f0bd58,#e8a93c)}

/* ---------- bands ---------- */
.band{position:relative;color:#fff;margin-top:56px;z-index:3}
.band-red{background:linear-gradient(120deg,#d84e2b,#e0653c 55%,#d8502c)}
.band-navy{background:linear-gradient(120deg,#1e2b46,#25345a)}
.brush-top::before{
  content:"";position:absolute;left:0;right:0;top:-26px;height:28px;background:inherit;
  clip-path:polygon(0 100%,0 62%,3% 40%,7% 68%,11% 30%,16% 60%,21% 22%,26% 58%,31% 34%,36% 66%,41% 26%,46% 56%,51% 30%,56% 64%,61% 24%,66% 58%,71% 34%,76% 64%,81% 26%,86% 58%,91% 32%,95% 62%,100% 40%,100% 100%);
}
.band-inner{max-width:1240px;margin:0 auto;padding:44px 40px;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.band h3{font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:clamp(21px,2vw,27px)}
.band-heart{color:#fff;opacity:.95}
.band-heart .ic-xl{width:56px;height:56px}
.cta-band-copy{flex:1;min-width:260px}
.cta-band-btns{display:flex;gap:14px;flex-wrap:wrap}
.gold-heart{color:var(--butter)}
.coral-script{color:#f0a284}
.band-tagline{max-width:1240px;margin:0 auto;padding:0 40px 26px;color:#fff;opacity:.95}
.band-tagline .coral{color:var(--coral-soft)}

/* ============================================================
   NAV
   ============================================================ */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(250,243,232,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(90,60,30,.07);   /* just enough edge against the dark hero */
  transition:box-shadow .3s,background .3s;
}
.topnav.scrolled{box-shadow:0 4px 24px rgba(90,60,30,.12);background:rgba(250,243,232,.98)}
.nav-inner{max-width:1360px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-script{
  font-family:var(--script);font-weight:700;font-size:29px;color:var(--coral);
  white-space:nowrap;                 /* wrapped to 3 lines around 1024px */
  line-height:1.12;                   /* the bar's height should come from the type */
}
.nav-links{display:flex;list-style:none;gap:34px;margin-left:auto}
.nav-links a{white-space:nowrap}
.nav-links a{
  font-family:var(--oswald);font-weight:500;font-size:13.5px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--ink);padding-bottom:5px;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--coral);transition:width .3s;
}
.nav-links a:hover::after{width:100%}
.nav-donate{padding:13px 22px}
.nav-burger{display:none;flex-direction:column;gap:4.5px;padding:6px}
.nav-burger span{width:21px;height:2.2px;background:var(--ink);border-radius:2px;transition:.3s}
.nav-mobile{display:none;flex-direction:column;padding:6px 24px 18px}
.nav-mobile a{font-family:var(--oswald);text-transform:uppercase;letter-spacing:1.5px;color:var(--ink);padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.nav-mobile.open{display:flex}

/* hero rules live in the HERO block at the end of this file */

/* St. Jude strip */
.stjude-strip{background:var(--cream2);border-bottom:1px solid var(--line)}
.strip-inner{
  position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:24px 40px;
  display:flex;align-items:center;gap:34px;flex-wrap:wrap;
}
.strip-marks{display:flex;align-items:center;gap:22px}
.strip-ribbon{height:56px;mix-blend-mode:multiply}
.strip-stjude{height:58px;mix-blend-mode:multiply}
.strip-inner p{flex:1;min-width:280px;color:var(--ink);font-size:16.5px}
.strip-link{
  font-family:var(--oswald);font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--coral);display:inline-flex;align-items:center;gap:8px;font-size:14px;
}
.strip-link:hover .ic-arrow{transform:translateX(4px)}
.strip-link .ic-arrow{transition:transform .25s}

/* One Kid band */
.onekid-band{
  background:
    radial-gradient(60% 90% at 12% 22%,var(--wash-yellow),transparent 70%),
    radial-gradient(45% 70% at 88% 85%,var(--wash-yellow),transparent 70%),
    var(--cream);
  padding:70px 0;
}
.onekid-band .band-inner{position:relative;z-index:3;padding:0 40px;align-items:center;justify-content:space-between}
.onekid-copy{max-width:520px}
.onekid-copy .display-ink{margin-bottom:8px}
.onekid-copy .script-coral{display:block;margin-bottom:22px}
.onekid-band .polaroid{max-width:380px}
.onekid-band .polaroid figcaption{font-size:26px}

/* ============================================================
   02 · THIS IS CARTER
   ============================================================ */
.bio{background:var(--cream2)}
.bio-grid{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:0;align-items:center}
.bio-copy .script-over{margin-bottom:-6px}
.bio-copy{position:relative;z-index:4;margin-right:-80px}
/* The -80px pulls the copy column into the photo column for the magazine overlap,
   but the body paragraphs inherit that width and their lines ran 82px across the
   polaroid. Hold the prose back inside its own column; the display type still
   gets the full overlap. */
.bio-copy .body{padding-right:96px}
.bio .script-hero{font-size:clamp(76px,9.6vw,158px)}
.bio-copy .script-hero{margin-bottom:26px}
.bio-titles{
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;color:var(--ink);
  font-size:clamp(19px,1.8vw,25px);line-height:1.45;letter-spacing:1px;margin-bottom:22px;
  border-bottom:3px solid var(--coral);display:inline-block;padding-bottom:14px;
}
.bio-mainshot{justify-self:stretch;max-width:none;width:100%}
.bio-mainshot img{width:100%}
.bio-strip{display:flex;justify-content:center;gap:30px;margin:48px auto 0;flex-wrap:wrap}
.bio-strip .polaroid img{height:200px;width:auto;object-fit:cover}
.fav-head{text-align:center;margin:58px 0 34px}
.fav-head .script-coral{font-size:clamp(24px,2.4vw,34px)}
.flanked{position:relative;display:inline-block}
.flanked::before,.flanked::after{
  content:"";position:absolute;top:52%;width:34px;height:3px;background:var(--butter-deep);transform:rotate(-18deg);
}
.flanked::before{left:-52px}
.flanked::after{right:-52px;transform:rotate(18deg)}
/* The flanking dashes are designed for a CENTERED headline with air either side.
   Below 1100px the display-stack headlines fill the whole line, so the left dash
   collides with the first letter, the right one widens the page past the viewport
   (iOS Safari ignores body overflow-x and lets the reader pan into it). */
@media(max-width:1100px){
  .flanked::before,.flanked::after{display:none}
}
.fav-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;text-align:center}
.fav{padding:0 10px;position:relative}
.fav:not(:last-child)::after{content:"";position:absolute;right:-6px;top:14%;bottom:14%;width:1px;background:var(--line)}
.fav h4{
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;color:var(--coral);
  letter-spacing:1.2px;font-size:16.5px;margin:16px 0 8px;
}
.fav p{font-size:14px}
.bio-quote{
  margin-top:64px;padding:60px 40px 70px;text-align:center;color:#fff;
  background:linear-gradient(100deg,#df6844,#e5794f 40%,#dd5d38);
  clip-path:polygon(0 26px,4% 8px,9% 30px,15% 4px,21% 26px,27% 8px,33% 28px,39% 6px,45% 24px,51% 8px,57% 28px,63% 4px,69% 26px,75% 10px,81% 28px,87% 6px,93% 24px,100% 12px,100% 100%,0 100%);
}
.bio-quote .qq{display:inline-block;margin-right:12px;vertical-align:-14px}
.bio-quote .script-white{display:inline;font-size:clamp(26px,3vw,42px)}
.bio-quote .quote-caps{margin-top:22px;font-size:clamp(15px,1.4vw,19px)}

/* ============================================================
   03 · THREE WAYS
   ============================================================ */
.ways{background:var(--cream)}
.ways-head{text-align:center;max-width:900px;margin:0 auto 40px}
.ways-head .display-mixed{margin-bottom:10px}
.ways-head .heart-side{margin:0 20px;vertical-align:10px}
.ways-head .script-ink{margin-bottom:14px}
.ways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.way-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;
}
.way-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.way-photo{position:relative}
.way-photo img{width:100%;height:230px;object-fit:cover}
/* These slots range from ~1.58 aspect on desktop to ~1.09 on tablet, so `cover`
   discards up to 40% of the width. Centre-cropping sliced a face off the left edge
   of way-1 and way-3; these offsets keep every face whole from 320px to 1920px. */
.way-a img{object-position:24% 50%}
.way-c img{object-position:34% 50%}
.way-photo .badge{left:22px;bottom:-26px}
.way-body{padding:42px 30px 34px;text-align:center}
.way-body h3{font-family:var(--oswald);font-weight:600;text-transform:uppercase;color:var(--navy);font-size:23px;letter-spacing:1px}
.way-tag{color:var(--coral);font-weight:700;font-size:17px;margin:6px 0 12px}
.way-body .body{margin-bottom:24px;font-size:15px}
.miracles-copy .script-coral{color:#f0a284;font-size:clamp(20px,2vw,26px)}

/* ============================================================
   04 · HIS TEAM
   ============================================================ */
.team{background:var(--cream2);overflow:hidden;padding-top:0}
.team-photo{position:absolute;top:0;right:0;bottom:300px;width:66%;z-index:3}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.team-photo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--cream2) 0%,rgba(253,249,241,.6) 12%,transparent 34%),
             linear-gradient(0deg,var(--cream2) 0%,transparent 18%);
}
.team-grid{min-height:560px;display:flex;align-items:center;padding-top:56px;padding-bottom:40px}
.team-copy{max-width:400px;position:relative;z-index:4}
.team-copy .script-hero{margin-bottom:4px}
.team-caps{
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;color:#3d4451;
  font-size:clamp(19px,1.9vw,26px);line-height:1.4;letter-spacing:.5px;margin:10px 0;
}
.team-copy .body{margin:14px 0 20px}
.values-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;text-align:center;padding-bottom:60px;position:relative;z-index:4}
.value{position:relative;padding:0 8px}
.value:not(:last-child)::after{content:"♡";position:absolute;right:-10px;top:38px;color:var(--coral);font-size:15px}
.value h4{
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;color:var(--coral);
  letter-spacing:1px;font-size:15.5px;margin:14px 0 6px;
}
.value p{font-size:13.5px}

/* ============================================================
   05 · MOVE THE NEEDLE
   ============================================================ */
.needle{padding-top:0;overflow:hidden}
.wash-warm{
  background:
    radial-gradient(50% 60% at 6% 10%,var(--wash-peach),transparent 70%),
    radial-gradient(40% 55% at 4% 55%,var(--wash-yellow),transparent 70%),
    var(--cream);
}
.needle-photo{position:absolute;top:0;right:0;width:64%;height:640px;z-index:3}
.needle-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 21%}
.needle-photo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--cream) 0%,rgba(250,243,232,.55) 10%,transparent 30%),
             linear-gradient(0deg,var(--cream) 2%,transparent 26%);
}
.needle-grid{min-height:580px;display:flex;align-items:flex-start;padding-top:80px}
.needle-copy{max-width:400px;position:relative;z-index:4}
.needle-copy .script-hero{font-size:clamp(56px,6.4vw,92px);margin:2px 0 20px}
.needle-copy .body-lg{margin-bottom:26px;color:var(--ink)}
.needle-copy .fine{margin-top:16px;max-width:300px}
.meter-card{
  position:relative;z-index:2;background:rgba(255,253,248,.92);backdrop-filter:blur(4px);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:44px 50px;margin-top:-40px;
}
.meter-head{display:flex;align-items:center;gap:40px;flex-wrap:wrap;margin-bottom:30px}
.meter-title{
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;color:var(--ink);
  font-size:clamp(20px,1.9vw,26px);line-height:1.3;flex:1;min-width:240px;
}
.u-yellow{box-shadow:inset 0 -10px 0 rgba(242,207,110,.55)}
.meter-raised,.meter-goal{text-align:center}
.meter-raised .num,.meter-goal .num{font-family:var(--oswald);font-weight:700;font-size:clamp(34px,3.4vw,48px);display:block;line-height:1}
.meter-raised small,.meter-goal small{
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--ink);font-size:13px;
}
.meter{height:16px;background:#e9decb;border-radius:99px;position:relative}
.meter-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
  background:linear-gradient(90deg,#e0653c,var(--coral));
  transition:width 1.8s cubic-bezier(.25,.6,.25,1);
}
.meter-knob{
  position:absolute;right:-21px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;background:var(--coral);border:4px solid #fff;
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 4px 14px rgba(160,60,20,.35);
}
.meter-ticks{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--oswald);font-weight:600;font-size:13px;color:var(--ink)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:center;margin:44px 0 60px}
.stat{position:relative;padding:0 10px;display:flex;flex-direction:column;align-items:center;gap:4px}
.stat:not(:last-child)::after{content:"";position:absolute;right:-7px;top:16%;bottom:16%;width:1px;background:var(--line)}
.stat .num{font-family:var(--oswald);font-weight:700;font-size:clamp(34px,3.2vw,46px);color:var(--ink);line-height:1;margin-top:10px}
.stat small{
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--ink);font-size:13px;line-height:1.5;
}
.stat .hand{margin-top:4px;font-size:21px}
.band.slim{margin-top:0}
.slim-inner{padding:30px 40px}
.band-ribbon-svg{width:56px;height:56px;color:#fff}
.slim-inner h3{font-size:clamp(19px,1.9vw,25px)}
.slim-inner .btn{margin-left:auto}

/* ============================================================
   06 · WEAR HIS FIGHT
   ============================================================ */
.shop{
  background:
    radial-gradient(46% 44% at 5% 8%,var(--wash-peach),transparent 70%),
    radial-gradient(40% 40% at 96% 10%,var(--wash-peach),transparent 70%),
    var(--cream2);
  padding-bottom:66px;
}
.shop-head{text-align:center;margin-bottom:38px}
.shop-head .display-mixed{display:flex;align-items:baseline;justify-content:center;gap:18px;flex-wrap:wrap}
.flanked-sub{position:relative;display:inline-block;color:var(--ink);font-size:17px;margin-top:14px;padding:0 60px}
.flanked-sub::before,.flanked-sub::after{content:"⇢";position:absolute;top:0;color:var(--coral);font-size:20px}
.flanked-sub::before{left:12px;transform:scaleX(-1)}
.flanked-sub::after{right:12px}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.product{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;
  box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;
}
.product:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.product-img{border-radius:8px;overflow:hidden;background:#fdf8ef}
.product-img img{transition:transform .5s;width:100%}
.product:hover .product-img img{transform:scale(1.05)}
.swatches{display:flex;gap:9px;margin:16px 0 12px}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 2px #fff;transition:.2s}
.sw.active{border-color:var(--ink)}
.sw-yellow{background:#f2d98a}
.sw-coral{background:#e2755a}
.sw-cream{background:#f4e8cf}
.sw-white{background:#fff;box-shadow:inset 0 0 0 1px #ddd}
.sw-peach{background:#f0b39a}
.product-row{display:flex;justify-content:space-between;align-items:baseline}
.product-row h3{font-family:var(--oswald);font-weight:600;text-transform:uppercase;color:var(--ink);font-size:17.5px;letter-spacing:.5px}
.price{font-family:var(--oswald);font-weight:700;color:var(--coral);font-size:26px}
.specs{font-size:12.5px;color:#8a8074;margin:4px 0 16px}
.proceeds{
  display:flex;align-items:center;justify-content:center;gap:14px;margin:36px auto 48px;
  color:var(--ink);font-family:var(--oswald);text-transform:uppercase;letter-spacing:1px;
  font-size:15px;text-align:center;flex-wrap:wrap;
}
.proceeds img{height:34px;mix-blend-mode:multiply}
.shop-foot{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:center}
.shop-foot-copy .display-ink{margin-bottom:6px}
.shop-foot-copy .script-coral{margin-bottom:30px;display:block}
.shop-points{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.point{display:flex;flex-direction:column;gap:10px;padding-right:14px;position:relative}
.point:not(:last-child)::after{content:"";position:absolute;right:0;top:8%;bottom:8%;width:1px;background:var(--line)}
.point h5{font-family:var(--oswald);font-weight:600;text-transform:uppercase;font-size:13.5px;color:var(--ink);letter-spacing:.8px}
.point p{font-size:12.5px}
.shop-foot-photos{position:relative;display:flex;justify-content:center}
.shop-foot-photos .polaroid img{width:250px;height:220px;object-fit:cover}
.thanks-note{
  position:absolute;right:0;top:24px;background:#cd5a35;color:#fff;width:220px;padding:34px 26px;
  border-radius:4px;transform:rotate(3deg);box-shadow:var(--shadow-lg);
}
.thanks-note .script-white{font-size:29px;line-height:1.25}
.thanks-note.taped::before{background:rgba(240,222,184,.75)}
.shop-tagline{
  text-align:center;margin-top:46px;color:var(--ink);
  font-family:var(--oswald);text-transform:uppercase;letter-spacing:1.5px;font-size:15px;
}

/* ============================================================
   07 · LEAVE CARTER SOME LOVE
   ============================================================ */
.love{
  background:
    radial-gradient(42% 46% at 92% 16%,var(--wash-peach),transparent 68%),
    radial-gradient(36% 40% at 90% 78%,var(--wash-peach),transparent 70%),
    var(--cream);
  padding-bottom:60px;
}
.love-grid{display:grid;grid-template-columns:minmax(300px,420px) minmax(320px,1fr) minmax(220px,300px);gap:50px;align-items:center;margin-bottom:54px}
.love-copy .script-hero.sm-script{color:var(--coral);margin-bottom:0}
.love-copy .display-ink{border-bottom:3px solid var(--coral);display:inline-block;padding-bottom:12px;margin-bottom:6px}
.love-copy .body{margin:14px 0 18px}
.love-photo{justify-self:center}
.love-photo img{width:100%;max-width:430px}
.love-quote{position:relative;padding:20px}
.love-quote p{font-size:17.5px;color:var(--ink);font-weight:600;line-height:1.65}
.wall-head{text-align:center;margin-bottom:26px}
.wall-count{margin-top:8px;color:var(--ink);font-size:15.5px}
.wall-count .coral{font-weight:800}
.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.msg{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 20px 16px;
  box-shadow:var(--shadow);position:relative;transition:transform .3s;
}
.msg:hover{transform:translateY(-4px)}
.msg::after{content:"♡";position:absolute;top:14px;right:16px;color:var(--coral);font-size:17px}
.msg p{font-family:var(--hand);font-weight:500;font-size:19px;line-height:1.35;color:#42403c;margin-bottom:12px}
.msg-sig{font-family:var(--hand);font-weight:700;color:var(--coral);font-size:19px;display:block}
.msg small{color:#9b9184;font-size:12px;display:block;margin-top:6px}
.msg-form{
  margin-top:38px;background:linear-gradient(100deg,#fbeadb,#f9e3cd);
  border:1px solid #f0d9bf;border-radius:14px;padding:26px 30px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;box-shadow:var(--shadow);
}
.msg-form-label{display:flex;align-items:center;gap:14px;min-width:220px}
.msg-form-label h4{font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink);font-size:17px}
.field{position:relative;display:flex;flex-direction:column;gap:2px}
.field.grow{flex:1;min-width:240px}
.field textarea,.field input{
  font-family:var(--sans);font-size:14.5px;color:var(--ink);
  background:#fff;border:1px solid #e7d7bf;border-radius:8px;padding:13px 15px;resize:none;outline:none;width:100%;
}
.field textarea:focus,.field input:focus{border-color:var(--coral)}
.field small{font-size:11px;color:#9b9184;padding-left:4px}
.charcount{position:absolute;right:10px;bottom:22px;font-size:11px;color:#b0a692}

/* ============================================================
   08 · EVERY ACTION
   ============================================================ */
.action{background:var(--cream2)}
.action-head{text-align:center;max-width:860px;margin:0 auto 38px}
.flanked-sub2{position:relative;display:inline-block;margin-top:10px}
.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.action-card{
  background:linear-gradient(180deg,#fdf7ec,#fbf1e0);border:1px solid var(--line);border-radius:14px;
  padding:38px 26px 30px;text-align:center;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;
  display:flex;flex-direction:column;align-items:center;
}
.action-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.action-card h3{font-family:var(--oswald);font-weight:700;font-size:clamp(24px,2.2vw,31px);letter-spacing:.5px;margin:24px 0 0}
.action-card .script-coral,.action-card .script-gold{font-size:24px;margin:2px 0 14px}
.action-card .body{font-size:14.5px;margin-bottom:24px;flex:1}
.action-thanks{text-align:center;margin:40px 0 28px}
.action-thanks .quote-caps{font-size:clamp(17px,1.6vw,22px);margin-top:6px}
.statbar{
  display:flex;align-items:center;gap:0;background:#fdf6ea;border:1px solid var(--line);
  border-radius:14px;padding:30px 34px;position:relative;flex-wrap:wrap;
}
.statbar.tinted{background:linear-gradient(100deg,#fbeedb,#f9e6cc)}
.statbar-item{flex:1;min-width:190px;display:flex;align-items:center;gap:16px;padding:6px 20px;position:relative}
.statbar-item:not(:last-of-type)::after{content:"";position:absolute;right:0;top:12%;bottom:12%;width:1px;background:var(--line)}
.statbar-item .num{font-family:var(--oswald);font-weight:700;font-size:clamp(28px,2.6vw,38px);line-height:1;color:var(--ink);display:block}
.statbar-item .num.sm-num{font-size:clamp(22px,2vw,30px);text-transform:uppercase}
.statbar-item small{font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.2px;font-size:11.5px;color:var(--ink);line-height:1.5}
/* the taped photo sits on the bar's right corner, so the bar must reserve that
   corner — without the padding the last stat's text runs underneath the photo */
.statbar.has-polaroid{padding-right:290px}
.statbar-polaroid{position:absolute;right:-14px;bottom:-34px;z-index:3}
.statbar-polaroid img{width:230px;height:150px;object-fit:cover}
.statbar-polaroid figcaption{font-size:21px}
.statbar-note{margin-left:auto;padding:0 10px;font-size:21px;line-height:1.3;text-align:left}
.statbar.five .statbar-item{min-width:170px}

/* ============================================================
   09 · FRIENDS OF CARTER
   ============================================================ */
.friends{background:var(--cream);padding-bottom:66px}
.friends-head{display:flex;gap:60px;align-items:center;margin-bottom:34px;flex-wrap:wrap}
.friends-title .xl-word{font-size:1.24em;letter-spacing:1px}
.friends-sub{max-width:520px}
.friends-sub .body{margin-top:8px}
.friends-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.friend{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 18px 20px;
  box-shadow:var(--shadow);text-align:center;position:relative;transition:transform .3s,box-shadow .3s;
}
.friend:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.friend-photo{position:relative;margin:0 -18px 44px}
.friend-photo img{width:100%;height:190px;object-fit:cover;border-radius:12px 12px 0 0}
.friend-photo .badge{left:50%;bottom:-30px;transform:translateX(-50%)}
.friend h3{font-family:var(--oswald);font-weight:600;text-transform:uppercase;color:var(--coral);font-size:16px;letter-spacing:.8px;margin-bottom:12px}
.friend-quote{font-size:13.5px;color:var(--ink);line-height:1.6;margin-bottom:12px;text-align:left}
.friend-sig{font-family:var(--hand);font-weight:700;color:var(--coral);font-size:19px;text-align:left;line-height:1}
.friend-sig small{font-family:var(--sans);font-weight:400;color:#9b9184;font-size:12px}
.friend .corner{position:absolute;right:16px;bottom:14px}

/* ============================================================
   10 · CARTER'S JOURNEY
   ============================================================ */
.journey{background:var(--cream2);padding-bottom:0}
.journey-head-grid{display:grid;grid-template-columns:minmax(280px,420px) minmax(260px,1fr) minmax(280px,420px);gap:50px;align-items:center;padding-bottom:48px}
.journey-title .heart-side{display:inline-block;margin:10px 0}
.journey-title .script-ink{margin-top:10px}
.journey-intro .body-lg{margin-bottom:18px}
.journey-photo{justify-self:end}
.journey-photo img{width:100%;max-width:380px}
.timeline-wrap{padding:56px 0 64px;position:relative}
.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;position:relative;text-align:center}
.timeline::before{
  content:"";position:absolute;left:2%;right:2%;top:206px;border-top:3px dashed rgba(216,80,44,.55);
}
.tl-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.tl-item .polaroid{margin-bottom:26px}
.tl-item .polaroid img{width:150px;height:130px;object-fit:cover}
.tl-dot{
  width:52px;height:52px;border-radius:50%;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;border:4px solid var(--cream2);
  box-shadow:0 4px 12px rgba(160,60,20,.3);position:relative;z-index:2;margin-bottom:12px;
}
.tl-item h3{font-family:var(--oswald);font-weight:700;font-size:27px;line-height:1}
.tl-item .hand.lg{color:var(--ink)}
.tl-item .body.sm{font-size:12.5px;max-width:190px}

/* ============================================================
   11 · DONATE
   ============================================================ */
.donate{background:var(--cream)}
.donate-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:60px;align-items:start}
.donate-main .display-mixed{margin-bottom:8px}
.donate-main .script-ink{margin-bottom:12px}
.donate-main .body-lg{margin-bottom:28px}
.freq-toggle{
  display:inline-flex;background:#f7ecd9;border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:26px;
}
.freq{
  display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:9px;
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
  font-size:13.5px;color:var(--ink);transition:.25s;
}
.freq.active{background:#fff;color:var(--coral);box-shadow:var(--shadow)}
.amounts{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:26px}
.amount{
  background:#fff;border:2px solid var(--line);border-radius:12px;padding:20px 12px;
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transition:.25s;
}
.amount:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.amount.active{border-color:var(--coral);box-shadow:0 8px 22px rgba(216,80,44,.18)}
.amt{font-family:var(--oswald);font-weight:700;color:var(--coral);font-size:32px;line-height:1}
.amt.sm-amt{font-size:24px;text-transform:uppercase;letter-spacing:1px}
.amt-name{font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;color:var(--ink)}
.amount small{font-size:11.5px;color:#8a8074;line-height:1.45}
.big-heart{color:var(--coral);font-size:30px;line-height:1}
.donate-row{display:flex;gap:20px;align-items:stretch;margin-bottom:30px;flex-wrap:wrap}
.custom-amt{
  flex:1;min-width:240px;display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:10px 20px;
}
.custom-amt span{font-family:var(--oswald);font-weight:700;font-size:22px;color:var(--ink)}
.custom-amt input{border:none;outline:none;font-family:var(--oswald);font-size:22px;color:var(--ink);width:110px;background:transparent}
.custom-amt small{color:#9b9184;font-size:13px;margin-left:auto}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border-top:1px solid var(--line);padding-top:24px}
.trust{display:flex;gap:12px;align-items:flex-start;padding:0 12px 0 0;position:relative;color:var(--coral)}
.trust:not(:last-child)::after{content:"";position:absolute;right:0;top:6%;bottom:6%;width:1px;background:var(--line)}
.trust h5{font-family:var(--oswald);font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:1px;color:var(--ink)}
.trust p{font-size:12px;color:var(--body)}
.impact-panel{
  background:
    radial-gradient(60% 40% at 80% 8%,var(--wash-peach),transparent 70%),
    linear-gradient(160deg,#fbf2e2,#f9ecd6);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:40px 38px;text-align:center;
}
.impact-panel .script-coral{display:block;margin:6px 0 24px}
.impact-panel>.polaroid{margin-bottom:28px}
.impact-panel>.polaroid img{width:100%;max-width:330px}
.impact-stats{list-style:none;text-align:left;display:grid;gap:16px;margin-bottom:26px}
.impact-stats li{display:flex;align-items:center;gap:16px;color:var(--coral)}
.impact-stats strong{font-family:var(--oswald);font-size:23px;display:block;line-height:1.1}
.impact-stats small{font-size:13px;color:var(--body)}
.impact-quote{text-align:left;border-top:1px solid #eeddc2;padding-top:22px}
.impact-quote p{font-size:14.5px;color:var(--ink);line-height:1.7}
.impact-quote .msg-sig{margin-top:10px}
.reviews{
  margin:48px 0 56px;background:#fdf6ea;border:1px solid var(--line);border-radius:14px;
  padding:30px 36px;display:flex;gap:30px;align-items:center;flex-wrap:wrap;
}
.reviews-label{display:flex;align-items:center;gap:16px;min-width:280px;flex:1.2}
.reviews-label h4{font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--ink);font-size:17px}
.review{flex:1;min-width:200px;border-left:1px solid var(--line);padding-left:26px}
.review .stars{color:var(--coral);letter-spacing:3px;font-size:15px}
.review p{font-size:13.5px;color:var(--ink);margin:8px 0 6px;line-height:1.55}
.review small{color:#9b9184}

/* ============================================================
   13 · CARTER'S STORY
   ============================================================ */
.story{background:var(--cream2)}
.story-grid{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:70px;align-items:start}
.story-copy .display-stack{margin:2px 0 20px}
.story-copy .display-stack .flanked::before,.story-copy .display-stack .flanked::after{background:var(--coral);width:26px}
.story-copy .body-lg{margin-bottom:30px}
.story-quote{
  background:#fbf3e4;border:1px solid var(--line);border-radius:14px;padding:34px 34px 28px;box-shadow:var(--shadow);
}
.story-quote p{font-size:16.5px;color:var(--ink);line-height:1.7}
.story-quote .msg-sig{margin-top:12px}
.story-mainshot{position:relative;width:100%}
.story-mainshot img{width:100%}
.stamp{
  position:absolute;top:-24px;right:-24px;width:104px;height:104px;border-radius:50%;
  background:#fdf8ee;border:3px solid var(--coral);color:var(--coral);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;font-size:10.5px;letter-spacing:1.5px;
  transform:rotate(12deg);box-shadow:var(--shadow);text-align:center;padding:8px;
}
.story-strip{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;justify-content:flex-start}
.story-strip .polaroid{padding:7px 7px 8px}
/* square 96px thumbs from portrait files — anchor high so hair isn't clipped */
.story-strip .polaroid img{width:96px;height:96px;object-fit:cover;object-position:50% 12%}
.story-strip .polaroid figcaption{font-size:14px;white-space:nowrap;padding-top:6px}
.milestones{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:50px 0 56px}
.mile{display:flex;gap:12px;align-items:flex-start;position:relative;padding-right:16px}
.mile:not(:last-child)::after{content:"- - -";position:absolute;right:-6px;top:16px;color:rgba(216,80,44,.5);font-size:10px;letter-spacing:1px}
.mile-ic{
  width:46px;height:46px;flex:none;border-radius:50%;border:2px solid var(--coral);color:var(--coral);
  display:flex;align-items:center;justify-content:center;background:#fff;
}
.mile h5{font-family:var(--oswald);font-weight:600;text-transform:uppercase;font-size:12.5px;letter-spacing:.8px;color:var(--coral);margin-bottom:4px}
.mile p{font-size:12px;line-height:1.5}
.mile .tiny-heart{position:absolute;right:2px;top:44px}

/* ============================================================
   14 · BE PART OF SOMETHING BIGGER
   ============================================================ */
.bigger{background:var(--cream)}
.bigger-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start}
.bigger-copy .display-stack{margin-bottom:14px;position:relative}
.bigger-copy .display-stack .heart-side{position:absolute;right:6%;top:38%}
.bigger-copy .script-ink{margin-bottom:16px}
.bigger-copy .body-lg{margin-bottom:34px}
.involve-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.involve{
  background:#fff;border:1.5px solid #f0ddc4;border-radius:12px;padding:24px 14px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:var(--coral);
  transition:.25s;box-shadow:var(--shadow);
}
.involve:hover{transform:translateY(-5px);border-color:var(--coral);box-shadow:var(--shadow-lg)}
.involve h5{font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:14.5px;color:var(--ink)}
.involve p{font-size:12px;color:var(--body);line-height:1.5}
.bigger-side .polaroid{width:100%}
.bigger-side .polaroid img{width:100%}
.bigger-quote{
  margin-top:36px;background:
    radial-gradient(70% 60% at 20% 20%,var(--wash-peach),transparent 75%),#fbf1e0;
  border:1px solid var(--line);border-radius:14px;padding:34px 36px;box-shadow:var(--shadow);
}
.bigger-quote p{font-size:17px;color:var(--ink);line-height:1.7}
.bigger-quote .script-coral{margin-top:12px;display:block;font-size:21px}
.bigger{padding-bottom:66px}
.band-navy .btn-white-solid:hover{background:var(--coral-deep)}

/* ============================================================
   12 · CLOSING + FOOTER
   ============================================================ */
.closing{
  background:
    radial-gradient(40% 44% at 96% 30%,var(--wash-peach),transparent 70%),
    var(--cream2);
}
.closing-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:start;padding-bottom:56px}
.closing-copy .display-stack{margin-bottom:14px}
.closing-copy .script-ink{margin-bottom:14px}
.closing-copy .body{margin-bottom:34px}
.closing-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:38px}
.cstat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;position:relative;padding:0 8px}
.cstat:not(:last-child)::after{content:"";position:absolute;right:-4px;top:14%;bottom:14%;width:1px;background:var(--coral);opacity:.35}
.ring{
  width:74px;height:74px;border-radius:50%;border:2px solid var(--coral);color:var(--coral);
  display:flex;align-items:center;justify-content:center;background:#fff;
  background:radial-gradient(circle at 40% 35%,#fff,#fdf3e4);
}
.cstat .num{font-family:var(--oswald);font-weight:700;font-size:clamp(26px,2.4vw,36px);color:var(--coral);line-height:1}
.cstat small{font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.2px;font-size:11.5px;color:var(--ink);line-height:1.5}
.newsletter{
  background:linear-gradient(100deg,#fbeedb,#f9e6cc);border:1px solid #f0d9bf;border-radius:14px;
  padding:22px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:var(--shadow);
}
.news-ic{color:var(--coral)}
.news-copy .script-coral{font-size:24px;line-height:1}
.news-copy .fine{margin-top:4px}
.newsletter input{
  flex:1;min-width:180px;background:#fff;border:1px solid #e7d7bf;border-radius:8px;
  padding:14px 16px;font-size:14.5px;outline:none;color:var(--ink);
}
.newsletter input:focus{border-color:var(--coral)}
.hope-panel{
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:34px 30px;text-align:center;
}
.hope-panel>.polaroid{margin:-70px 0 24px;width:88%}
.hope-panel>.polaroid img{width:100%}
.hope-panel .quote-caps{font-size:19px}
.center{text-align:center}
.hope-panel .script-coral{display:block;margin:6px 0 24px;border-bottom:2px solid var(--coral);display:inline-block;padding-bottom:6px}
.hope-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;border-top:1px solid var(--line);padding-top:22px}
.hope{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 8px;position:relative}
.hope:not(:last-child)::after{content:"";position:absolute;right:0;top:8%;bottom:8%;width:1px;background:var(--line)}
.hope h5{font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.2px;font-size:13.5px;color:var(--ink)}
.hope p{font-size:11.5px;line-height:1.5}
.mission-band{margin-top:0}
.mission-inner{gap:40px}
.mission-copy h3{font-size:clamp(20px,2vw,27px);line-height:1.35}
.mission-lines{border-left:1.5px solid rgba(255,255,255,.5);padding-left:36px}
.mission-lines p{font-size:15.5px;line-height:1.9;font-weight:600}
.mission-btns{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
.mission-btns .btn{flex-direction:column;align-items:flex-start;gap:4px}
.mission-btns .btn .ic{position:absolute}
.mission-btns .btn{padding-left:56px;position:relative}
.mission-btns .btn .ic{left:22px;top:50%;transform:translateY(-50%);width:20px;height:20px}
.footer{position:relative;z-index:3;background:var(--navy);color:#fff;padding:26px 0}
.footer{display:flex;align-items:center;justify-content:space-between;padding:26px 60px;flex-wrap:wrap;gap:20px}
.footer .hand{color:#fff;font-size:23px}
.footer .coral{color:var(--coral-soft)}
.socials{display:flex;gap:14px}
.socials a{
  width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:.25s;
}
.socials a:hover{background:#fff;color:var(--navy)}
.socials .ic{width:20px;height:20px}

/* ============================================================
   SCROLL RIBBON THREAD
   ============================================================ */
#threadLayer{position:absolute;top:0;left:0;right:0;z-index:2;pointer-events:none;display:none;overflow:hidden}
#storyThread{position:absolute;top:0;left:0;width:100%}
#threadBase{stroke:rgba(216,80,44,.16);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
#threadProg{stroke:rgba(216,80,44,.5);stroke-width:2.4;stroke-linecap:round}
#threadTip{position:absolute;width:34px;height:auto;transform:translate(-50%,-50%);
  transition:transform .25s ease-out;filter:drop-shadow(0 3px 7px rgba(150,60,20,.4))}
body.thread-on #threadLayer{display:block}

/* ============================================================
   MOBILE BOTTOM BAR & TOAST
   ============================================================ */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1100;display:none;
  background:rgba(31,45,74,.97);backdrop-filter:blur(8px);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.mb-item{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:13.5px;
  padding:12px 6px;border-radius:9px;
}
.mb-item span{font-size:17px}
.mb-donate{background:var(--coral);margin-right:8px}
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:14px 26px;border-radius:99px;font-size:14.5px;
  opacity:0;pointer-events:none;transition:.35s;z-index:1200;box-shadow:var(--shadow-lg);
  max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.25,1)}
.rv-scale{opacity:0;transform:scale(.94) translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.65,.25,1)}
.rv.in{opacity:1;transform:none}
.rv-scale.in{opacity:1;transform:none}
.rv-scale.tilt-r.in{transform:rotate(2.2deg)}
.rv-scale.tilt-l.in{transform:rotate(-2.4deg)}
.msg.rv{transform:translateY(34px) scale(.97)}
.msg.rv.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-scale{opacity:1 !important;transform:none !important;transition:none !important}
  .rv-scale.tilt-r{transform:rotate(2.2deg)!important}
  .rv-scale.tilt-l{transform:rotate(-2.4deg)!important}
  html{scroll-behavior:auto}
  .meter-fill{transition:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1180px){
  .fav-grid,.values-grid{grid-template-columns:repeat(3,1fr);row-gap:36px}
  .fav:nth-child(3n)::after,.value:nth-child(3n)::after{display:none}
  .shop-grid,.action-grid{grid-template-columns:repeat(2,1fr)}
  .friends-grid{grid-template-columns:repeat(3,1fr);row-gap:24px}
  .wall{grid-template-columns:repeat(3,1fr)}
  .timeline{grid-template-columns:repeat(3,1fr);row-gap:50px}
  .timeline::before{display:none}
  .milestones{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .mile:nth-child(3n)::after{display:none}
  .amounts{grid-template-columns:repeat(3,1fr)}
  .involve-grid{grid-template-columns:repeat(3,1fr);row-gap:16px}
  .donate-grid,.bigger-grid,.closing-grid{grid-template-columns:1fr;gap:70px}
  .hope-panel{margin-top:40px}
  .love-grid{grid-template-columns:1fr 1fr;row-gap:40px}
  .love-quote{grid-column:1/-1;text-align:center;max-width:560px;margin:0 auto}
  .statbar-polaroid{display:none}
  .statbar.has-polaroid{padding-right:34px}
  .journey-head-grid{grid-template-columns:1fr 1fr}
  .journey-photo{grid-column:1/-1;justify-self:center}
  .shop-foot{grid-template-columns:1fr;gap:80px}
}
/* The needle photo's slot narrows to 58% of the file's width on small phones, so
   no single horizontal anchor keeps all five faces whole — these two bands stop a
   face being sliced by the left edge (the far-left child falls fully outside). */
@media(max-width:360px){ .needle-photo img{object-position:42% 21%} }
@media(min-width:361px) and (max-width:400px){ .needle-photo img{object-position:55% 21%} }
@media(min-width:401px) and (max-width:480px){ .needle-photo img{object-position:70% 21%} }
@media(max-width:880px){
  .sec{padding-top:70px}
  .sec-inner{padding:0 22px}
  /* The flanking dashes hang 52px outside the headline. At phone widths the
     headline fills the whole line, so that flourish pushed the PAGE 30px wider
     than the viewport — body{overflow-x:hidden} hides it in Chrome but iOS
     Safari ignores it and lets the reader pan sideways into dead space.
     Tuck them inside the 22px gutter instead. */
  /* min-width floors bigger than the 320px viewport widen the page itself */
  /* .reviews had NO mobile rule at all — a 4-up flex row (label + 3 quotes)
     with 36px padding + a 26px-bordered gutter per review never fit a phone;
     min-width:0 alone left the row's own padding/border floor still too wide. */
  .reviews{flex-direction:column;align-items:stretch;padding:22px 18px;gap:20px}
  .reviews-label{min-width:0}
  .review{min-width:0;border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
  /* the circular stamp hangs 24px outside its photo — too far once the photo
     is the full content width */
  .stamp{top:-14px;right:-10px;width:86px;height:86px;font-size:9.5px}
  .nav-links{display:none}

  /* ---- MOBILE NAV: minimal utility bar, floating over the dark hero ----
     The scripted wordmark is gone here: it duplicated the big ONE KIDNEY /
     Wonder masthead sitting directly beneath it. The hero masthead is now the
     single brand statement, and the bar is just menu <-> donate. */
  .brand{display:none}
  .nav-inner{padding:10px 20px;gap:12px;min-height:56px}
  .topnav,
  .topnav.scrolled{                      /* .scrolled fires at 40px — too early here */
    background:transparent;backdrop-filter:none;border-bottom:none;box-shadow:none;
  }
  .nav-burger{order:1;display:flex;padding:8px 6px}
  .nav-burger span{width:22px;background:#fff}
  .nav-donate{
    display:inline-flex;order:3;margin-left:auto;
    padding:10px 16px;font-size:12px;letter-spacing:1.2px;
  }
  .nav-donate .ic{width:15px;height:15px}

  /* past the hero (or with the drawer open) it becomes a compact solid header */
  .topnav.past-hero{
    background:rgba(250,243,232,.97);backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(90,60,30,.07);
  }
  .topnav.menu-open{           /* fully opaque so the drawer stays legible */
    background:#faf3e8;backdrop-filter:none;
    border-bottom:1px solid rgba(90,60,30,.07);
  }
  .topnav.past-hero .nav-burger span,
  .topnav.menu-open .nav-burger span{background:var(--ink)}
  .nav-burger{display:flex}
  /* hero mobile rules live in the HERO block at the end of this file */
  .bio-grid,.story-grid{grid-template-columns:1fr;gap:46px}
  .bio-mainshot{justify-self:center}
  .team-photo{position:relative;width:100%;height:400px;inset:auto}
  .team-grid{min-height:auto;padding-top:50px}
  .needle-photo{position:relative;width:100%;height:380px;order:-1}
  .needle-grid{min-height:auto;padding-top:50px}
  .meter-card{padding:30px 24px;margin-top:30px}
  .stats-grid{grid-template-columns:1fr;row-gap:34px}
  .stat:nth-child(2n)::after{display:none}
  .fav-grid,.values-grid{grid-template-columns:repeat(2,1fr)}
  .fav::after,.value::after{display:none!important}
  .shop-grid,.action-grid,.wall,.friends-grid,.amounts{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .milestones{grid-template-columns:repeat(2,1fr)}
  .mile::after{display:none!important}
  .trust-row{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .trust:nth-child(2n)::after{display:none}
  .closing-stats{grid-template-columns:1fr;row-gap:26px}
  .cstat:nth-child(2n)::after{display:none}
  .hope-grid{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .hope:nth-child(2n)::after{display:none}
  .involve-grid{grid-template-columns:repeat(2,1fr)}
  .love-grid{grid-template-columns:1fr}
  .love-photo{justify-self:start}
  .shop-points{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .point::after{display:none!important}
  .journey-head-grid{grid-template-columns:1fr}
  .journey-photo{justify-self:start}
  .mission-lines{border-left:none;padding-left:0}
  .mobile-bar{display:flex}
  body{padding-bottom:66px}
  .band-polaroid{margin:10px 0 0}
  .thanks-note{position:relative;top:auto;right:auto;margin-top:-30px;margin-left:auto}
  .footer{padding:26px 22px}
  .statbar-note{margin:10px auto 0;text-align:center}
}
@media(max-width:540px){
  .shop-grid,.action-grid,.wall,.friends-grid,.timeline,.milestones,.amounts,.involve-grid{grid-template-columns:1fr}
  .fav-grid,.values-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .hero-line1{font-size:40px}
  .hero-line2{font-size:76px}
  .bio-strip{gap:20px}
  .display-stack{font-size:34px}
  .msg-form{padding:22px 18px}
  .newsletter{padding:18px}
  .meter-head{gap:18px}
}

/* ============================================================
   REFINEMENT PASS — new components
   ============================================================ */

/* nav share */
.nav-share{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--coral);color:var(--coral);
  display:flex;align-items:center;justify-content:center;transition:.25s;flex:none;margin-left:auto;
}
.nav-links + .nav-share{margin-left:0}
.nav-links{margin-left:auto}
.nav-share:hover{background:var(--coral);color:#fff}

/* St. Jude strip credibility */
.strip-marks{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 20px;
  box-shadow:var(--shadow);
}
.strip-eyebrow{
  display:flex;align-items:center;gap:8px;font-family:var(--oswald);font-weight:600;
  text-transform:uppercase;letter-spacing:2.5px;font-size:12.5px;color:var(--coral);margin-bottom:6px;
}
.strip-eyebrow .ic{width:16px;height:16px}
.strip-text{flex:1;min-width:280px}
.strip-text p strong{color:var(--ink)}
.strip-link{flex-direction:column;align-items:flex-start;gap:4px;display:inline-flex}
.strip-link small{font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:600;color:#9b9184;font-size:12px}
.strip-link{position:relative}
.strip-link .ic-arrow{position:absolute;right:-26px;top:2px}

/* Carter's Army kicker */
.army-kicker{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.army-kicker .ic{width:24px;height:24px;color:var(--coral)}
.army-kicker span{
  font-family:var(--oswald);font-weight:700;text-transform:uppercase;letter-spacing:5px;
  font-size:15px;color:var(--coral);border-bottom:3px solid var(--butter-deep);padding-bottom:4px;
}
.army-kicker .script-coral{margin-left:6px}

/* Boutique */
.boutique{
  position:relative;z-index:3;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:26px 30px 34px;box-shadow:var(--shadow-lg);
}
.boutique-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:16px}
.boutique-bar .hand.lg{color:var(--ink)}
.scroll-btns{display:flex;gap:10px}
.scroll-btn{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--coral);color:var(--coral);
  font-size:18px;transition:.25s;background:#fff;
}
.scroll-btn:hover{background:var(--coral);color:#fff}
.shop-scroller{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 4px 18px;scrollbar-width:thin;scrollbar-color:var(--coral) transparent;
}
.shop-scroller .product{flex:0 0 340px;scroll-snap-align:start}
.shop-scroller::-webkit-scrollbar{height:6px}
.shop-scroller::-webkit-scrollbar-thumb{background:rgba(216,80,44,.4);border-radius:99px}
.product-img{position:relative}
.product-img img{aspect-ratio:4/3.2;object-fit:cover}
.quick-add{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(10px);
  display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;
  padding:11px 20px;border-radius:99px;opacity:0;transition:.3s;box-shadow:var(--shadow-lg);
}
.quick-add .ic{width:15px;height:15px;color:var(--coral-soft)}
.product:hover .quick-add{opacity:1;transform:translateX(-50%) translateY(0)}
.quick-add:hover{background:var(--coral)}

/* mini meter (finale) */
.mini-meter{margin:34px 0 38px;max-width:560px}
.mini-meter .meter{height:14px}
.mini-meter-labels{display:flex;justify-content:space-between;margin-top:12px;font-size:14.5px;color:var(--body)}
.mini-meter-labels strong{font-family:var(--oswald);font-size:19px}

/* finale choices */
.finale{padding-bottom:64px}
.finale .script-coral.xl{display:block;margin-bottom:30px}
.finale-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fc{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  border-radius:18px;padding:38px 24px 32px;transition:transform .3s,box-shadow .3s;
  box-shadow:var(--shadow-lg);position:relative;z-index:3;
}
.fc:hover{transform:translateY(-6px)}
.fc .ic-xl{width:44px;height:44px;margin-bottom:6px}
.fc-title{font-family:var(--oswald);font-weight:700;text-transform:uppercase;letter-spacing:3px;font-size:clamp(22px,2vw,28px);line-height:1}
.fc-sub{font-family:var(--hand);font-weight:600;font-size:19px;opacity:.92}
.fc-donate{background:linear-gradient(140deg,#e0653c,var(--coral));color:#fff}
.fc-donate:hover{box-shadow:0 20px 44px rgba(216,80,44,.4)}
.fc-shop{background:linear-gradient(140deg,#f5d78a,var(--butter));color:#4a3c1c}
.fc-shop:hover{box-shadow:0 20px 44px rgba(233,189,78,.45)}
.fc-share{background:#fff;border:2px solid var(--navy);color:var(--navy)}
.fc-share:hover{box-shadow:0 20px 44px rgba(31,45,74,.25)}

/* refinement responsive */
@media(max-width:1180px){
  /* the row ran out of room here and a link wrapped to two lines, which made the
     whole bar 153px tall — tighten the gaps instead */
  .nav-links{gap:18px}
  .nav-inner{gap:20px}
  .bio-copy{margin-right:0}
  .bio-copy .body{padding-right:34px}
  .finale-choices{grid-template-columns:1fr 1fr}
  .fc-share{grid-column:1/-1}
}
@media(max-width:880px){
  .nav-share{display:none}
  .bio-grid{gap:40px}
  .bio-copy .body{padding-right:0}      /* single column below here — no photo beside it */
  .strip-link .ic-arrow{display:none}
  .shop-scroller .product{flex:0 0 78vw}
  .finale-choices{grid-template-columns:1fr}
  .fc-share{grid-column:auto}
  .army-kicker span{letter-spacing:3px}
}

/* ---------- friend monogram medallions (real portraits pending) ---------- */
.friend-mono{
  position:relative;margin:0 -18px 44px;height:190px;border-radius:12px 12px 0 0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(60% 70% at 50% 32%,rgba(247,213,120,.55),transparent 72%),
    linear-gradient(160deg,#fbf1e0,#f7e6cc);
  border-bottom:1px solid var(--line);
}
.mono-ring{
  width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--coral);box-shadow:var(--shadow);
}
.mono-txt{
  font-family:var(--oswald);font-weight:700;font-size:32px;letter-spacing:2px;color:var(--coral);
}
.friend-mono .badge{left:50%;bottom:-30px;transform:translateX(-50%)}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top{
  position:fixed;right:28px;bottom:32px;z-index:1150;
  width:54px;height:54px;border-radius:50%;
  background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(150,60,20,.34);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .35s,transform .35s,visibility .35s,background .25s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--coral-deep);transform:translateY(-3px)}
.to-top .ic{width:22px;height:22px}
.to-top-heart{
  position:absolute;top:-6px;right:-4px;font-size:16px;color:var(--butter);
  text-shadow:0 1px 3px rgba(120,60,20,.4);
}
@media(max-width:880px){
  /* clear the persistent DONATE | SHOP | SHARE bar */
  .to-top{right:16px;bottom:calc(96px + env(safe-area-inset-bottom));width:48px;height:48px}
  .to-top .ic{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .to-top{transition:opacity .2s,visibility .2s;transform:none}
  .to-top.show{transform:none}
  .to-top:hover{transform:none}
}

/* longer Carter-specific CTA labels need tighter buttons in the 4-up hope grid */
.hope .btn-tiny{
  font-size:10px;letter-spacing:.4px;padding:8px 10px;line-height:1.25;
  width:100%;justify-content:center;text-align:center;margin-top:auto;
}
.hope{justify-content:flex-start}
.hope p{min-height:3.9em}
.eyebrow-heart{color:var(--coral);font-size:15px;line-height:1}

/* ============================================================
   ST. JUDE PASS — live-total card, handoff note, word stats
   ============================================================ */
.meter-live{flex:1;min-width:260px}
.meter-live-label{
  font-family:var(--oswald);font-weight:700;text-transform:uppercase;letter-spacing:2px;
  font-size:14px;color:var(--coral);margin-bottom:6px;
}
.meter-live-copy{font-size:14.5px;color:var(--body);line-height:1.6;max-width:430px}
.meter-cta{flex:none}

/* custom-amount replaced by an honest handoff line */
.amt-note{
  flex:1;min-width:240px;display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;
  font-size:13.5px;color:var(--body);line-height:1.5;
}
.amt-note .ic{color:var(--coral);flex:none}

/* stat tiles now carry words, not fabricated figures */
.num.word{
  font-family:var(--oswald);font-weight:700;text-transform:uppercase;letter-spacing:1px;
  font-size:clamp(19px,1.9vw,25px)!important;line-height:1.1;color:var(--coral);
}
.cstat .num.word{color:var(--coral)}
.statbar-item .num.word{color:var(--ink)}
.stat .num.word{color:var(--ink)}
.mini-meter-live{color:var(--coral);font-weight:700}


/* verified fundraising figures — source line under the meter */
.meter-foot{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--body);text-align:center;
}
.meter-foot strong{font-family:var(--oswald);font-weight:700;color:var(--ink);font-size:15px}
.meter-foot a{color:var(--coral);font-weight:700;border-bottom:1px solid rgba(216,80,44,.4)}
.meter-foot a:hover{border-bottom-color:var(--coral)}

/* ============================================================
   NAVY BAND — photo left, copy + three columns right
   ============================================================ */
.band-inner.miracles{
  display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:center;
  padding-top:52px;padding-bottom:52px;
}
.band-photo{
  background:#fff;padding:10px;border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.32);line-height:0;
}
.band-photo img{width:100%;height:230px;object-fit:cover;border-radius:6px}
.miracles-body{min-width:0}
.miracles-copy h3{margin-bottom:2px}
.miracles-copy .script-coral{color:#f0a284;font-size:clamp(21px,2vw,27px);margin-bottom:26px}
.miracles-hopes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(255,255,255,.18);padding-top:26px;
}
.hope-col{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  padding:0 22px;position:relative;
}
.hope-col:not(:last-child)::after{
  content:"";position:absolute;right:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.18);
}
.hope-col .ic-lg{color:var(--coral-soft)}
.hope-col h4{
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.6px;
  font-size:14.5px;color:#fff;
}
.hope-col p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.86)}

@media(max-width:1180px){
  .band-inner.miracles{grid-template-columns:280px 1fr;gap:34px}
  .hope-col{padding:0 14px}
}
@media(max-width:880px){
  .band-inner.miracles{grid-template-columns:1fr;gap:28px}
  .band-photo{max-width:420px;margin:0 auto}
  .miracles-hopes{grid-template-columns:1fr;gap:26px;row-gap:26px}
  .hope-col{padding:0}
  .hope-col:not(:last-child)::after{
    top:auto;right:auto;left:22%;width:56%;height:1px;bottom:-13px;
  }
}

/* when the bar is empty the knob would half-hang off the track — park it flush */
.meter-fill[data-fill="0.0"] .meter-knob,
.meter-fill[data-fill="0"] .meter-knob{right:-42px}

/* ============================================================
   A NOTE FROM CARTER'S MOM — personal letter / journal page
   ============================================================ */
.momnote{
  background:
    radial-gradient(46% 40% at 88% 10%,rgba(242,182,140,.22),transparent 70%),
    radial-gradient(38% 34% at 6% 78%,rgba(245,207,110,.22),transparent 72%),
    #fffaf1;
  padding:96px 0 88px;overflow:hidden;
}
.mn-grid{
  display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:76px;align-items:start;
}

/* taped polaroid */
.mn-photo{
  position:relative;background:#fff;padding:15px 15px 20px;border-radius:3px;
  box-shadow:0 20px 48px rgba(120,80,40,.20);transform:rotate(-2deg);
  margin-top:26px;
}
.mn-photo img{width:100%;border-radius:2px;display:block}
.mn-photo figcaption{
  text-align:center;padding-top:14px;font-size:23px;color:#8a7a63;
}
.mn-tape{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:132px;height:36px;background:rgba(226,205,160,.75);border-radius:2px;
  box-shadow:0 2px 7px rgba(120,90,40,.16);
}

/* the letter */
.mn-letter{max-width:660px}
.mn-eyebrow{
  font-family:var(--oswald);font-weight:700;text-transform:uppercase;letter-spacing:3px;
  font-size:13px;color:var(--coral);margin-bottom:14px;
}
.mn-title{
  font-family:var(--script);font-weight:700;color:var(--navy);
  font-size:clamp(34px,3.9vw,52px);line-height:1.12;margin-bottom:30px;
}
.mn-letter > p{
  font-size:16px;line-height:1.85;color:#5c544b;margin-bottom:17px;
}
.mn-letter > p strong{color:var(--ink);font-weight:700}
.mn-turn{
  font-family:var(--script)!important;font-weight:700;color:var(--coral)!important;
  font-size:clamp(22px,2.1vw,28px)!important;line-height:1.4!important;
  margin:26px 0 22px!important;
}

/* pull quote */
.mn-quote{
  position:relative;margin:40px 0 0;padding:0 0 0 46px;
}
.mn-q{
  font-family:Georgia,serif;font-size:62px;line-height:1;color:var(--coral);
  position:absolute;left:0;top:6px;
}
.mn-q-end{position:static;font-size:44px;vertical-align:-14px;margin-left:6px}
.mn-quote p{
  display:inline;font-family:var(--script);font-weight:700;color:var(--navy);
  font-size:clamp(26px,2.9vw,38px);line-height:1.3;
}
.mn-quote cite{
  display:block;margin-top:18px;font-style:normal;
  font-family:var(--hand);font-weight:700;font-size:22px;color:var(--coral);
}

/* floating hearts */
.mn-heart{position:absolute;color:var(--coral);opacity:.5;pointer-events:none;font-size:26px}
.mn-h1{top:88px;left:7%;transform:rotate(-12deg)}
.mn-h2{top:150px;left:11%;font-size:18px;opacity:.35}

/* closing CTA band */
.mn-cta{
  margin-top:72px;background:#fdf3e3;border:1px solid var(--line);border-radius:16px;
  padding:30px 38px;display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  box-shadow:var(--shadow);
}
.mn-cta-ring{
  width:74px;height:74px;border-radius:50%;border:2px solid var(--coral);color:var(--coral);
  display:flex;align-items:center;justify-content:center;flex:none;background:#fff;
}
.mn-cta-copy{flex:1;min-width:260px}
.mn-cta-copy h3{
  font-family:var(--oswald);font-weight:600;text-transform:uppercase;letter-spacing:1.2px;
  font-size:clamp(19px,1.9vw,24px);color:var(--ink);margin-bottom:6px;
}
.mn-cta-copy p{font-size:14.5px;line-height:1.6;color:var(--body)}
.mn-cta-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-navy-solid{background:var(--navy);color:#fff}
.btn-navy-solid:hover{background:var(--navy-deep)}

@media(max-width:1180px){
  .mn-grid{grid-template-columns:minmax(260px,340px) 1fr;gap:48px}
  .mn-heart{display:none}
}
@media(max-width:880px){
  .momnote{padding:70px 0 64px}
  .mn-grid{grid-template-columns:1fr;gap:40px}
  .mn-photo{max-width:400px;margin:0 auto}
  .mn-quote{padding-left:34px}
  .mn-cta{padding:26px 22px;gap:20px}
  .mn-cta-btns .btn{flex:1;justify-content:center}
}

/* Brooke's words strengthening the Why St. Jude section */
.mn-pull{
  border-left:3px solid var(--coral);padding:2px 0 2px 18px;margin-bottom:22px;
  font-size:15px;line-height:1.7;color:var(--ink);font-style:italic;max-width:400px;
}
.mn-pull-q{font-family:Georgia,serif;color:var(--coral);font-size:22px;line-height:0;vertical-align:-4px}
.mn-pull-cite{display:block;margin-top:8px;font-family:var(--hand);font-style:normal;font-weight:700;color:var(--coral);font-size:19px}

/* ============================================================
   WAYS TO HELP — mobile carousel (desktop grid untouched ≥769px)
   ============================================================ */
.way-step{display:none}
.ways-dots{display:none}

@media(max-width:768px){
  /* kill the 3-column grid: horizontal scroll-snap track instead */
  .ways-grid{
    display:flex;
    grid-template-columns:none;
    gap:18px;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleed past .sec-inner so cards can sit near the viewport edge */
    margin-inline:-22px;
    padding:6px 0 40px 14px;
  }
  .ways-grid::-webkit-scrollbar{display:none}
  .ways-grid::after{content:"";flex:0 0 14px}   /* trailing breathing room */

  .way-card{
    flex:0 0 82vw;max-width:360px;
    scroll-snap-align:start;scroll-margin-left:14px;
  }

  /* consistent landscape photo instead of a tall narrow crop */
  .way-photo img{height:236px}
  .way-photo .badge{width:68px;height:68px;left:20px;bottom:-30px}
  .way-photo .badge .ic{width:29px;height:29px}

  /* editorial, left-aligned card copy */
  .way-body{padding:46px 22px 26px;text-align:left}
  .way-step{
    display:block;font-family:var(--oswald);font-weight:600;text-transform:uppercase;
    letter-spacing:2.6px;font-size:11px;color:var(--coral);margin-bottom:8px;
  }
  .way-body h3{
    font-size:22px;line-height:1.15;
    /* keep headings to two lines, never four */
    overflow-wrap:normal;word-break:keep-all;hyphens:none;
  }
  .way-tag{font-size:15.5px;margin:5px 0 10px}
  .way-body .body{font-size:14.5px;line-height:1.62;margin-bottom:20px}
  .way-body .btn{width:100%;justify-content:center;font-size:12.5px;letter-spacing:1.1px;padding:15px 16px}

  /* pagination dots */
  .ways-dots{
    display:flex;justify-content:center;gap:9px;margin-top:-16px;
  }
  .wd{
    width:8px;height:8px;border-radius:50%;background:rgba(216,80,44,.28);
    transition:background .3s,transform .3s;
  }
  .wd.active{background:var(--coral);transform:scale(1.32)}

  /* clear the fixed DONATE | SHOP | SHARE bar */
  .ways{padding-bottom:34px}
}


/* narrow phones: keep the brand on one line so the fixed header can't grow
   and cover the hero title (proportions otherwise unchanged) */
@media(max-width:400px){
  .nav-inner{padding:10px 14px;gap:10px}
  .nav-donate{padding:9px 13px;font-size:11.5px}
}
@media(max-width:340px){
  .nav-donate{padding:8px 11px;font-size:11px;letter-spacing:.8px}
}

/* ============================================================
   HERO — dark, family photo right, copy left
   ============================================================ */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;min-height:86vh;
  padding:150px 0 96px;
  background:linear-gradient(100deg,#2a221c 0%,#33291f 46%,#3d3126 100%);
}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:2;pointer-events:none}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:41% 15%}
.hero-photo::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#2a221c 0%,rgba(42,34,28,.96) 10%,rgba(42,34,28,.82) 20%,rgba(42,34,28,.52) 32%,rgba(42,34,28,.24) 44%,rgba(42,34,28,.06) 56%,transparent 68%),
    linear-gradient(0deg,rgba(42,34,28,.42) 0%,transparent 26%);
}
.hero-inner{
  position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:0 40px;width:100%;
}

/* wordmark */
.hero h1{display:flex;flex-direction:column;position:relative;margin-bottom:30px}
.hero-line1{
  font-family:var(--oswald);font-weight:300;color:#fff;text-transform:uppercase;
  font-size:clamp(38px,5vw,70px);letter-spacing:6px;line-height:1;
}
.hero-line2{
  font-family:var(--script);font-weight:700;color:var(--coral-soft);
  font-size:clamp(76px,10vw,148px);line-height:.82;margin:-.06em 0 0 -.03em;
}
.hero-heart{position:absolute;left:min(53%,470px);top:34%;color:#fff;opacity:.9;font-size:30px}

/* story */
.hero-story{max-width:560px}
.hero-eyebrow{
  font-family:var(--oswald);font-weight:600;color:var(--butter);text-transform:uppercase;
  letter-spacing:3px;font-size:19px;margin-bottom:12px;
}
.hero-sub{color:#fff;font-size:clamp(23px,2.3vw,31px);font-weight:700;line-height:1.3;margin-bottom:20px;max-width:430px}
.hero-body{color:rgba(255,251,244,.9);font-size:15.5px;line-height:1.72;margin-bottom:34px;max-width:410px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-ctas .btn-yellow{max-width:300px;text-align:left;line-height:1.25}

/* ---------- hero mobile ---------- */
@media(max-width:980px){
  .hero{min-height:0;padding:88px 0 40px;flex-direction:column;align-items:stretch}
  /* wordmark → family → story → CTAs, so the photo lands in the first screen */
  .hero-inner{display:contents}
  .hero h1{order:1;padding:0 22px}
  .hero-story{order:3;padding:0 22px;margin-top:20px}
  .hero-photo{
    position:relative;order:2;width:100%;height:44vh;min-height:280px;max-height:400px;margin-top:18px;
  }
  .hero-photo img{object-position:41% 15%}
  .hero-photo::before{
    background:linear-gradient(0deg,rgba(42,34,28,.55) 0%,transparent 30%),
               linear-gradient(180deg,rgba(42,34,28,.5) 0%,transparent 22%);
  }
  .hero-heart{display:none}
  .hero h1{margin-bottom:20px}
  .hero-line1{font-size:clamp(28px,8vw,44px);letter-spacing:4px}
  .hero-line2{font-size:clamp(56px,16vw,88px)}
  .hero-story{max-width:none}
  .hero-eyebrow{font-size:16px;letter-spacing:2.6px;margin-bottom:8px}
  .hero-sub{font-size:clamp(21px,6vw,27px);margin-bottom:14px}
  .hero-body{font-size:15px;line-height:1.62;margin-bottom:24px}
  .hero-ctas{flex-direction:column;gap:12px}
  .hero-ctas .btn{width:100%;justify-content:center;min-height:56px}
  .hero-ctas .btn-yellow{max-width:none;text-align:center}
}
@media(max-width:980px) and (max-height:720px){
  .hero{padding-top:80px}
  .hero-photo{height:38vh;min-height:240px}
}
/* The mobile bar no longer sits ON a cream band above the hero — it floats over
   it — so the hero only has to clear the bar itself, not a full header. Must come
   after the max-width:980px rules above to win. */
@media(max-width:880px){
  .hero{padding-top:64px}
}
@media(max-width:880px) and (max-height:720px){
  .hero{padding-top:60px}
}

/* timeline: reserve two lines for the label so every body copy starts on the same line */
.tl-item .hand.lg{line-height:1.2;min-height:2.4em;display:flex;align-items:flex-start;justify-content:center}

/* ============================================================
   MOBILE RIBBON — its own segments, ~35% lighter than desktop
   ============================================================ */
body.thread-mobile #threadLayer{display:block}
body.thread-mobile #threadBase,
body.thread-mobile #threadProg,
body.thread-mobile #threadTip{display:none}      /* desktop path never shows on mobile */

.m-thread{
  stroke:rgba(216,80,44,.5);                      /* .32 read as invisible on a real phone */
  stroke-width:2.2;
  stroke-linecap:round;
}
@media (prefers-reduced-motion:reduce){
  body.thread-mobile #threadLayer{display:none}
}