/* ============ TOKENS ============ */
:root{
  --ink:#1F2937;          /* primary black — body & headings */
  --ink2:#6B7280;         /* secondary black — labels & descriptions */
  --paper:#F9FAFB;        /* off-white page/section background */
  --white:#FFFFFF;        /* cards & text on blue/red */
  --crimson:#E33145;      /* red */
  --crimson-deep:#C11F32;
  --forest:#3E77B5;       /* blue */
  --forest-deep:#1E3A5F;  /* deep blue for dark sections */
  --brass:#E33145;        /* accent (red) */
  --brass-bright:#E33145;
  --mist:#E5E7EB;         /* hairlines */
  --mist-dark:rgba(255,255,255,.18);
  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --max:1240px;
  --pad:clamp(20px,5vw,64px);
  /* interactive glow tokens */
  --glow-line:rgba(96,168,224,.95);     /* cool blue hover ring for cards */
  --glow-soft:rgba(96,168,224,.55);     /* cool blue hover halo for cards */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--crimson);color:var(--paper)}

/* Type scale */
.eyebrow{
  font-family:var(--sans);
  font-variation-settings:'wdth' 118;
  font-weight:700;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--crimson);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";display:inline-block;width:34px;height:2px;background:var(--crimson)}
.on-dark .eyebrow{color:var(--brass-bright)}
.on-dark .eyebrow::before{background:var(--brass-bright)}
h1,h2,h3{font-family:var(--sans);font-variation-settings:'wdth' 112;line-height:1.02;letter-spacing:-.015em}
h2{font-size:clamp(34px,4.6vw,60px);font-weight:800;margin:18px 0 22px}
h3{font-size:clamp(21px,2.2vw,27px);font-weight:750;line-height:1.15}
.lede{font-family:var(--serif);font-size:clamp(18px,1.6vw,21px);line-height:1.65;max-width:62ch}
.prose{font-family:var(--serif);font-size:clamp(17px,1.35vw,19px);line-height:1.72}
.prose p+p{margin-top:1.1em}

/* ============ HEADER ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--mist);
  transition:transform .35s ease;
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:28px;height:72px;
}
.brand-wrap{position:relative;margin-right:auto;display:flex;align-items:center;gap:12px}
.brand-caret-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.brand-caret-btn:focus-visible{outline:3px solid var(--brass);outline-offset:4px;border-radius:6px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;
  background:none;border:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.brand img{height:42px;width:42px;object-fit:contain;border-radius:6px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.brand:hover img{transform:rotate(360deg)}
.brand-wrap:has(.brand-caret-btn:hover) .brand img{transform:rotate(360deg)}
.brand span{font-weight:800;font-variation-settings:'wdth' 116;font-size:15px;letter-spacing:.02em;line-height:1.1}
.brand:focus-visible{outline:3px solid var(--brass);outline-offset:4px;border-radius:6px}
.brand-caret{flex:0 0 auto;width:7px;height:7px;margin-left:1px;
  border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);
  transform:translateY(-2px) rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.brand-wrap.open .brand-caret{transform:translateY(1px) rotate(-135deg)}

/* ---- Brand menu: what the initials actually mean ---- */
.brand-menu{
  position:absolute;top:calc(100% + 10px);left:0;width:max-content;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--mist);border-radius:12px;
  box-shadow:0 24px 48px -22px rgba(30,33,29,.45);padding:6px;z-index:120;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top left;
  transition:opacity .2s ease, transform .28s cubic-bezier(.2,.7,.2,1), visibility .2s;
}
.brand-wrap.open .brand-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.bm-links{display:flex;flex-direction:column;gap:1px}
.bm-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:650;
  padding:9px 10px;border-radius:8px;transition:background .18s, color .18s, padding-left .18s}
.bm-links a:hover,.bm-links a:focus-visible{background:color-mix(in srgb,var(--crimson) 8%, transparent);color:var(--crimson);padding-left:14px;outline:none}
.bm-links a .bm-arrow{color:var(--ink2);font-size:13px;transition:transform .18s}
.bm-links a:hover .bm-arrow{color:var(--crimson);transform:translateX(3px)}

/* ---- PillNav (reactbits-style) ---- */
nav.links{display:flex;gap:7px;align-items:center}
nav.links a{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:9px 17px;border-radius:999px;overflow:hidden;isolation:isolate;
  text-decoration:none;font-weight:650;font-size:13.5px;letter-spacing:.01em;
  color:var(--ink);background:#fff;border:1.5px solid var(--mist);
  transition:color .35s ease,border-color .35s ease,box-shadow .35s ease,transform .2s ease;
}
/* Circular fill. It must LAND CENTRED on the pill: a circle rising from the
   bottom has its widest point above the pill, so the bottom corners never fill
   (wider pills failed worst). Centred with diameter 1.5x the width, the radius
   always exceeds the pill's half-diagonal, so coverage is total at any width. */
nav.links a::before{
  content:"";position:absolute;left:50%;top:50%;
  width:150%;aspect-ratio:1/1;border-radius:50%;
  background:var(--crimson);z-index:-1;
  transform:translate(-50%,45%) scale(0);  /* collapsed, below the pill */
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
nav.links a .pill-label{position:relative;z-index:1;transition:transform .4s cubic-bezier(.2,.7,.2,1);will-change:transform}
nav.links a .pill-label--hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:translateY(125%);color:#fff}
nav.links a:hover,nav.links a:focus-visible{border-color:var(--crimson);transform:translateY(-1px);box-shadow:0 0 0 1.5px var(--glow-line),0 0 18px 2px var(--glow-soft)}
nav.links a:hover::before,nav.links a:focus-visible::before{transform:translate(-50%,-50%) scale(1)}
nav.links a:hover .pill-label,nav.links a:focus-visible .pill-label{transform:translateY(-125%)}
nav.links a:hover .pill-label--hover,nav.links a:focus-visible .pill-label--hover{transform:translateY(0)}
.btn{
  display:inline-block;text-decoration:none;font-family:var(--sans);
  font-weight:750;font-variation-settings:'wdth' 112;letter-spacing:.03em;
  background:var(--crimson);color:var(--paper);
  padding:13px 26px;border:none;border-radius:4px;cursor:pointer;font-size:15px;
  transition:background .2s, transform .18s, box-shadow .3s ease;
}
.btn:hover{background:var(--crimson-deep);transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--glow-line),0 0 20px 3px var(--glow-soft)}
.btn:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.on-dark .btn.ghost{color:var(--paper);border-color:var(--paper)}
.on-dark .btn.ghost:hover{background:var(--paper);color:var(--forest-deep)}
.menu-toggle{display:none;background:none;border:1.5px solid var(--ink);border-radius:4px;padding:8px 10px;cursor:pointer;font-weight:700;font-size:13px;letter-spacing:.08em}

/* ---- Selectable boxes: pop outward + colored border glow on hover ---- */
.pop-glow{transition:transform .22s ease, box-shadow .3s ease, border-color .3s ease}
.pop-glow:hover{transform:translateY(-5px);box-shadow:0 0 0 1.5px var(--glow-line),0 0 24px 3px var(--glow-soft),0 26px 44px -26px rgba(30,33,29,.5)}

/* ============ HERO ============ */
.hero{
  min-height:100svh;
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  max-width:var(--max);margin:0 auto;padding:120px var(--pad) 60px;
  perspective:1200px;
}
.hero-copy h1{
  font-size:clamp(44px,6.2vw,88px);font-weight:850;
  text-wrap:balance;
}
.hero-copy h1 em{font-style:normal;color:var(--crimson)}
.hero-kicker{
  font-weight:700;font-variation-settings:'wdth' 120;font-size:13px;
  letter-spacing:.24em;text-transform:uppercase;margin-bottom:22px;
  display:flex;align-items:center;gap:14px;color:var(--forest);
}
.hero-kicker::before{content:"";width:44px;height:2px;background:var(--forest)}
.hero-copy .lede{margin:26px 0 34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-scene{position:relative;height:min(72vh,640px);transform-style:preserve-3d}
.hero-card{
  position:absolute;border-radius:8px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(30,33,29,.35);
  will-change:transform;
}
.hero-card img{width:100%;height:100%;object-fit:cover}
.hc1{width:62%;height:64%;top:4%;right:6%;z-index:3}
.hc2{width:44%;height:46%;bottom:2%;left:0;z-index:4;border:6px solid var(--paper)}
.hc3{width:38%;height:38%;top:0;left:8%;z-index:2;opacity:.95}
.hero-chip{
  position:absolute;z-index:5;bottom:16%;right:0;
  background:var(--forest);color:var(--paper);
  padding:16px 20px;border-radius:6px;max-width:230px;
  font-size:13.5px;line-height:1.45;font-weight:600;
  box-shadow:0 24px 40px -18px rgba(21,43,30,.5);
  will-change:transform;
}
.hero-chip strong{display:block;font-size:26px;font-variation-settings:'wdth' 116;font-weight:850;color:var(--brass-bright);letter-spacing:-.01em}
.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--forest);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-hint::after{content:"";width:2px;height:38px;background:linear-gradient(var(--forest),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}100%{opacity:0}}

/* ============ SECTIONS ============ */
section{position:relative}
.wrap{max-width:var(--max);margin:0 auto;padding:clamp(72px,9vw,130px) var(--pad)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.tilt-in{opacity:0;transform:perspective(900px) rotateX(9deg) translateY(46px);transform-origin:center bottom;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.tilt-in.seen{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}
.frame{border-radius:8px;overflow:hidden;box-shadow:0 28px 56px -24px rgba(30,33,29,.4)}
.frame img{width:100%;height:100%;object-fit:cover}

/* Track record band */
.record{background:var(--ink);color:var(--paper)}
.record .wrap{padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(56px,6vw,84px)}
.record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px)}
.record-item{border-top:2px solid var(--brass);padding-top:18px}
.record-item .num{font-size:clamp(40px,4.5vw,64px);font-weight:850;font-variation-settings:'wdth' 116;letter-spacing:-.02em;line-height:1;color:var(--brass-bright)}
.record-item .lab{margin-top:10px;font-size:14px;font-weight:600;letter-spacing:.02em;color:color-mix(in srgb,var(--paper) 78%, transparent)}
.record-note{margin-top:34px;font-size:13px;color:color-mix(in srgb,var(--paper) 55%, transparent);font-family:var(--serif);font-style:italic}

/* Video */
.video-shell{position:relative;perspective:1100px}
.video-frame{
  position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 40px 80px -30px rgba(30,33,29,.5);
  transform-style:preserve-3d;will-change:transform;
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Poster is a plain link to YouTube — looks like a player, can't be blocked */
.video-poster{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(135deg,var(--forest-deep),var(--crimson-deep));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.video-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease}
.video-poster::after{content:"";position:absolute;inset:0;background:rgba(20,24,28,.28);transition:background .3s ease}
.video-poster:hover img,.video-poster:focus-visible img{transform:scale(1.04);filter:brightness(1.05)}
.video-poster:hover::after,.video-poster:focus-visible::after{background:rgba(20,24,28,.14)}
.video-poster:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.video-play{
  position:relative;z-index:1;flex:0 0 auto;
  width:76px;height:76px;border-radius:50%;
  background:var(--crimson);box-shadow:0 12px 34px -8px rgba(0,0,0,.6);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease;
}
.video-play::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-42%,-50%);
  border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff;
}
.video-poster:hover .video-play,.video-poster:focus-visible .video-play{transform:scale(1.09);background:var(--crimson-deep)}

/* ============ PIGGY BANK / THE VAULT ============ */
.vault{background:radial-gradient(1200px 700px at 50% 20%, #1F4530 0%, var(--forest-deep) 62%);color:var(--paper)}
.vault .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,90px);align-items:center}
.pig-stage{
  position:relative;perspective:1000px;display:flex;justify-content:center;
}
.pig-wrap{transform-style:preserve-3d;will-change:transform;width:min(100%,520px)}
.pig-wrap svg{width:100%;height:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.45))}
.pig-plinth{
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:70%;height:22px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.5), transparent);
}
.coin-fly{position:absolute;pointer-events:none;z-index:6}
.vault-meter{margin-top:34px}
.meter-row{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.meter-row .raised{font-size:clamp(34px,3.6vw,52px);font-variation-settings:'wdth' 116;font-weight:850;color:var(--brass-bright);letter-spacing:-.01em}
.meter-row .goal{font-size:15px;color:var(--mist-dark);color:rgba(243,239,230,.7)}
.meter-bar{height:10px;background:rgba(243,239,230,.14);border-radius:99px;margin-top:12px;overflow:hidden}
.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--brass),var(--brass-bright));border-radius:99px;transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.meter-cap{margin-top:10px;font-size:13.5px;color:rgba(243,239,230,.65)}
.impact-box{
  margin-top:38px;background:rgba(243,239,230,.06);border:1px solid rgba(243,239,230,.16);
  border-radius:10px;padding:26px;
}
.impact-box h3{margin-bottom:6px}
.impact-sub{font-size:14px;color:rgba(243,239,230,.7);margin-bottom:20px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.chip{
  background:transparent;color:var(--paper);border:1.5px solid rgba(243,239,230,.4);
  border-radius:99px;padding:10px 20px;font-family:var(--sans);font-weight:700;font-size:15px;
  cursor:pointer;transition:all .18s;
}
.chip:hover{border-color:var(--glow-line);color:#fff;transform:translateY(-3px);box-shadow:0 0 0 1.5px var(--glow-line),0 0 20px 3px var(--glow-soft)}
.chip.active{background:var(--brass-bright);color:var(--forest-deep);border-color:var(--brass-bright)}
.chip:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
input[type=range]{width:100%;accent-color:var(--brass-bright);margin:6px 0 16px}
.impact-line{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.55}
.impact-line strong{color:var(--brass-bright)}
.impact-cta{margin-top:22px}

/* How it works steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);margin-top:48px}
.step{
  border:1px solid var(--mist);border-radius:10px;padding:30px 26px;background:#FBF8F1;
  transition:transform .25s ease, box-shadow .25s ease;
}
.step:hover{transform:translateY(-6px);box-shadow:0 24px 44px -24px rgba(30,33,29,.35)}
.step .glyph{width:52px;height:52px;margin-bottom:20px}
.step h3{margin-bottom:10px}
.step p{font-size:15.5px;color:color-mix(in srgb,var(--ink) 82%, transparent)}
.hiw-diagram{margin-top:56px}
.hiw-diagram img{border-radius:10px;box-shadow:0 24px 48px -24px rgba(30,33,29,.35)}

/* ============ STORIES ============ */
.stories{background:var(--paper)}
.story{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);
  align-items:start;padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--mist);
}
.story:first-of-type{border-top:none;padding-top:24px}
.story.flip{grid-template-columns:1.1fr .9fr}
.story.flip .story-media{order:2}
.story-media{position:sticky;top:104px;perspective:900px}
.story-media .frame{transform-style:preserve-3d;will-change:transform}
.story-media .frame+.frame{margin-top:18px;width:78%;margin-left:auto}
.story.flip .story-media .frame+.frame{margin-left:0;margin-right:auto}
.story-head{display:flex;align-items:baseline;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.story-head h3{font-size:clamp(30px,3.4vw,44px);font-weight:850;font-variation-settings:'wdth' 114}
.story-tag{
  font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  color:var(--crimson);border:1.5px solid var(--crimson);border-radius:99px;padding:5px 14px;
}
blockquote{
  margin-top:26px;padding-left:22px;border-left:3px solid var(--brass);
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.5vw,20px);line-height:1.6;
  color:color-mix(in srgb,var(--ink) 88%, transparent);
}
blockquote footer{margin-top:10px;font-style:normal;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}

/* ============ PROGRAMS RAIL ============ */
.programs{background:var(--forest-deep);color:var(--paper);overflow:hidden}
.rail-head{max-width:var(--max);margin:0 auto;padding:clamp(72px,8vw,110px) var(--pad) 10px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.rail-hint{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:rgba(243,239,230,.55)}
.rail{
  display:flex;gap:clamp(18px,2vw,28px);
  overflow-x:auto;padding:44px var(--pad) clamp(80px,9vw,120px);
  scroll-snap-type:x mandatory;perspective:900px;
  scrollbar-width:thin;scrollbar-color:var(--brass) transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--brass);border-radius:99px}
.pcard{
  flex:0 0 min(78vw,340px);scroll-snap-align:center;
  background:#1B3626;border:1px solid rgba(243,239,230,.12);border-radius:12px;overflow:hidden;
  will-change:transform;transform-style:preserve-3d;
}
.pcard{transition:box-shadow .3s ease, border-color .3s ease}
.pcard:hover{border-color:var(--glow-line);box-shadow:0 0 0 1.5px var(--glow-line),0 0 26px 4px var(--glow-soft),0 26px 44px -26px rgba(0,0,0,.55)}
.pcard img{height:210px;width:100%;object-fit:cover}
.pcard .pc-body{padding:22px 22px 26px}
.pcard h3{font-size:19px;margin-bottom:8px;color:var(--paper)}
.pcard .since{font-size:11.5px;font-weight:750;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:12px}
.pcard p{font-size:14.5px;line-height:1.6;color:rgba(243,239,230,.78)}

/* ============ NEWS ============ */
.news-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,44px);align-items:center;
  border:1.5px solid var(--ink);border-radius:12px;padding:clamp(26px,3.5vw,44px);
  text-decoration:none;transition:transform .2s ease, box-shadow .2s ease;background:#FBF8F1;
}
.news-card:hover{transform:translateY(-5px);box-shadow:0 0 0 1.5px var(--glow-line),0 0 24px 3px var(--glow-soft),0 30px 50px -28px rgba(30,33,29,.45)}
.news-mark{
  font-variation-settings:'wdth' 125;font-weight:900;font-size:13px;letter-spacing:.2em;
  writing-mode:vertical-rl;transform:rotate(180deg);color:var(--crimson);text-transform:uppercase;
}
.news-card h3{font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(22px,2.6vw,32px);line-height:1.25}
.news-card .src{margin-top:12px;font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--forest);text-transform:uppercase}
.news-arrow{font-size:30px;font-weight:800;color:var(--crimson)}

/* ============ DONATE ============ */
.donate{background:var(--crimson);color:var(--paper)}
.donate .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,100px)}
.donate h2{color:var(--paper)}
.donate .eyebrow{color:var(--brass-bright)}
.donate .eyebrow::before{background:var(--brass-bright)}
.give-card{background:rgba(21,43,30,.16);border:1px solid rgba(243,239,230,.22);border-radius:12px;padding:30px;margin-top:26px}
.give-card h3{margin-bottom:8px}
.give-card p{font-size:15px;line-height:1.6;color:rgba(243,239,230,.85)}
.give-card .btn{margin-top:18px;background:var(--paper);color:var(--crimson-deep)}
.give-card .btn:hover{background:#fff}
.give-card a.mail{font-weight:750;text-decoration:underline;text-underline-offset:3px}
/* The contact email is a 239px unbreakable token. A grid track never shrinks
   below its content's min-content width, so it was forcing the whole donate
   section to 375px wide on a 320px phone. Let the track shrink, let it wrap. */
.donate .wrap > *{min-width:0}
.give-card a.mail,.give-card p,.contact-btn{overflow-wrap:anywhere}
.fineprint{font-size:13px;line-height:1.65;color:rgba(243,239,230,.75);font-family:var(--serif)}
.fineprint p+p{margin-top:.9em}

/* ============ FOOTER ============ */
footer.site{background:var(--ink);color:var(--paper)}
footer.site .wrap{padding-top:64px;padding-bottom:44px;display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:40px}
footer.site h4{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:16px}
footer.site a{color:rgba(243,239,230,.85);text-decoration:none;display:block;padding:4px 0;font-size:15px}
footer.site a:hover{color:var(--brass-bright)}
.foot-brand{display:flex;gap:14px;align-items:flex-start}
.foot-brand img{width:48px;height:48px;object-fit:contain;border-radius:6px}
.foot-brand p{font-size:14px;line-height:1.6;color:rgba(243,239,230,.7);max-width:38ch;margin-top:10px}
.legal{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 40px;font-size:12.5px;color:rgba(243,239,230,.5);line-height:1.7;border-top:1px solid rgba(243,239,230,.12);padding-top:24px}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .nav-inner{gap:16px}
  .hero{grid-template-columns:1fr;padding-top:110px;min-height:auto}
  .hero-scene{height:min(56vh,440px);margin-top:10px}
  .vault .wrap{grid-template-columns:1fr}
  .donate .wrap{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .story,.story.flip{grid-template-columns:1fr}
  .story.flip .story-media{order:0}
  .story-media{position:static}
  .steps{grid-template-columns:1fr}
  .record-grid{grid-template-columns:1fr;gap:32px}
  footer.site .wrap{grid-template-columns:1fr;gap:34px}
  nav.links{
    display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:8px;
    background:var(--paper);border-bottom:1px solid var(--mist);padding:14px var(--pad) 20px;
  }
  nav.links.open{display:flex}
  nav.links a{width:100%;padding:13px 18px;font-size:15px}
  .menu-toggle{display:block}
  .news-card{grid-template-columns:1fr}
  .news-mark{writing-mode:horizontal-tb;transform:none}
}
/* ============ PHONES (<=600px) ============
   The site only ever had one breakpoint (980px), so phones were getting the
   tablet layout at half the width. This is the pass that actually fits it. */
@media(max-width:600px){
  :root{--pad:18px}
  body{overflow-x:clip} /* belt and braces against sideways scroll */

  /* Header: brand + MENU + Donate all had to fit 375px. They didn't. */
  .nav-inner{gap:10px}
  .brand{gap:9px}
  .brand-wrap{gap:9px}
  .brand img{height:34px;width:34px}
  .brand span{font-size:12.5px}
  .brand-caret{width:6px;height:6px;margin-left:0}
  .nav-inner > .btn{padding:10px 13px;font-size:12.5px;letter-spacing:.02em}
  .menu-toggle{padding:8px 9px;font-size:11.5px;letter-spacing:.06em}
  .brand-menu{width:min(320px,calc(100vw - 36px));padding:15px}
  .bm-links a{padding:12px 10px} /* comfortable tap targets */

  /* Vertical rhythm: 72px of section padding is a lot of dead space on a phone */
  .wrap{padding:clamp(54px,11vw,72px) var(--pad)}
  .rail-head{padding:clamp(54px,11vw,72px) var(--pad) 6px}
  .rail{padding:28px var(--pad) clamp(56px,11vw,80px)}

  /* Type */
  .hero-copy h1{font-size:clamp(33px,8.6vw,44px)}
  h2{font-size:clamp(25px,7vw,34px)}
  h3{font-size:clamp(19px,5vw,22px)}
  .lede,.prose{font-size:16.5px}
  .hero-scene{height:min(46vh,340px)}
  .hero-ctas{gap:10px}
  .hero-ctas .btn{flex:1 1 100%;text-align:center} /* full-width CTAs beat cramped side-by-side */

  /* Cards & boxes: reclaim horizontal room */
  .impact-box{padding:18px}
  .chips{gap:8px;margin-bottom:16px}
  .chip{padding:9px 15px;font-size:14px}
  .give-card{padding:22px}
  .step{padding:24px 20px}
  .vault-left .give-card{padding:24px}
  .video-frame{border-radius:8px}
  .video-play{width:60px;height:60px}
  .video-play::before{border-width:11px 0 11px 17px}

  /* Easier to drag with a thumb */
  input[type=range]{height:44px}

  /* Touch targets: aim for ~44px so these aren't a coin-flip to hit */
  .chip{min-height:44px;padding:0 15px}
  .menu-toggle{min-height:44px}
  .brand{min-height:44px}
  .nav-inner > .btn{min-height:44px;display:inline-flex;align-items:center}
  footer.site a{display:inline-block;padding:10px 0}
}

/* Small phones (iPhone SE and friends): the header ran 39px past the screen */
@media(max-width:400px){
  .nav-inner > .btn .nav-now{display:none} /* "Donate Now" -> "Donate" */
  .nav-inner{gap:8px}
  .brand{gap:8px}
  .brand-wrap{gap:8px}
  .brand img{height:30px;width:30px}
  .brand span{font-size:11.5px}
  .nav-inner > .btn{padding:10px 12px;font-size:12px}
  .menu-toggle{padding:8px;font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tilt-in{opacity:1;transform:none;transition:none}
  .scroll-hint::after{animation:none}
  *{transition-duration:.01ms !important}
}

/* ============ HERO: photos sharp and prominent on load ============ */
.hc1{width:66%;height:68%;top:2%;right:4%}
.hc2{width:47%;height:48%;bottom:0;left:0}
.hc3{width:40%;height:40%;top:0;left:6%;opacity:1}
.hero-card{box-shadow:0 34px 64px -22px rgba(30,33,29,.42)}


/* ============ HERO v2: full-bleed photo background ============ */
.hero{position:relative;display:flex;align-items:center;grid-template-columns:none;
  max-width:none;margin:0;padding:130px var(--pad) 90px;min-height:100svh;overflow:hidden;perspective:none}
.hero-bg{position:absolute;inset:0;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:4px;background:var(--ink)}
.hb{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.06)}
.hb1{grid-column:1;grid-row:1/3}
.hb2{grid-column:2;grid-row:1}
.hb3{grid-column:2;grid-row:2}
.hero-veil{position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(243,239,230,.96) 30%, rgba(243,239,230,.78) 52%, rgba(243,239,230,.28) 78%, rgba(243,239,230,.1) 100%),
    linear-gradient(0deg, rgba(30,33,29,.22), rgba(30,33,29,0) 38%)}
.hero-copy{position:relative;z-index:2;max-width:660px;margin:0 auto 0 max(0px, calc((100vw - var(--max)) / 2))}
.hero-chip{position:absolute;z-index:2;bottom:11%;right:var(--pad);left:auto;top:auto;max-width:240px;
  box-shadow:0 24px 40px -18px rgba(21,43,30,.6)}
@media(max-width:980px){
  .hero{padding-top:120px;min-height:92svh}
  .hero-bg{grid-template-columns:1fr;grid-template-rows:1.4fr 1fr 1fr}
  .hb1{grid-column:1;grid-row:1}.hb2{grid-column:1;grid-row:2}.hb3{grid-column:1;grid-row:3}
  .hero-veil{background:linear-gradient(180deg, rgba(243,239,230,.97) 0%, rgba(243,239,230,.9) 42%, rgba(243,239,230,.62) 68%, rgba(243,239,230,.3) 100%)}
  .hero-chip{position:relative;bottom:auto;right:auto;margin-top:26px;display:inline-block}
}
/* ============ Custom amount input ============ */
.custom-amt{margin:4px 0 18px}
.custom-amt label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(243,239,230,.7);display:block;margin-bottom:8px}
.amt-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.amt-field{display:flex;align-items:center;background:rgba(243,239,230,.08);border:1.5px solid rgba(243,239,230,.4);border-radius:8px;padding:0 14px;flex:1;min-width:170px}
.amt-field:focus-within{border-color:var(--brass-bright)}
.amt-field .dollar{font-weight:800;font-size:18px;color:var(--brass-bright);margin-right:6px}
.amt-field input{background:none;border:none;outline:none;color:var(--paper);font-family:var(--sans);font-weight:700;font-size:18px;width:100%;padding:12px 0}
.amt-field input::placeholder{color:rgba(243,239,230,.35)}
.amt-field input::-webkit-outer-spin-button,.amt-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amt-field input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* ============ 5% explainer ============ */
.explain{background:#FBF8F1;border:1px solid var(--mist);border-left:4px solid var(--brass);border-radius:10px;
  padding:28px 30px;margin-top:34px;max-width:860px}
.explain h3{margin-bottom:12px}
.explain .prose{font-size:16.5px}
.explain .prose strong{color:var(--crimson)}


/* ============ HERO v3: photos whole, large, and prominent ============ */
.hero-bg{display:block;background:transparent;gap:0}
.hb{position:absolute;height:auto;object-fit:unset;transform:none;border-radius:10px;
  box-shadow:0 30px 60px -22px rgba(30,33,29,.45)}
.hb1{width:56%;right:1.5%;top:9%;left:auto}
.hb2{width:24%;left:44%;bottom:6%;top:auto;right:auto}
.hb3{width:29%;right:2%;bottom:5%;top:auto;left:auto}
.hero-veil{background:linear-gradient(90deg, var(--paper) 0%, rgba(243,239,230,.95) 24%, rgba(243,239,230,.55) 42%, rgba(243,239,230,.1) 58%, rgba(243,239,230,0) 72%)}
.hero-copy{max-width:560px;margin-left:max(0px, calc((100vw - var(--max)) / 2));margin-right:auto}
.hero-chip{bottom:auto;top:12%;left:38%;right:auto}
@media(max-width:980px){
  .hero{display:block;min-height:auto;padding-bottom:56px}
  .hero-bg{position:relative;inset:auto;margin-top:30px}
  .hb,.hb1,.hb2,.hb3{position:static;width:100%;margin:0 0 12px;box-shadow:0 18px 36px -18px rgba(30,33,29,.4)}
  .hero-veil{display:none}
  .hero-chip{position:relative;top:auto;left:auto;margin-top:4px;display:inline-block}
  .scroll-hint{display:none}
}
/* ============ Mission photo: bigger presence ============ */
#mission .split{grid-template-columns:.8fr 1.2fr;align-items:stretch}
#mission .frame{height:100%}
#mission .frame img{height:100%;min-height:540px;object-fit:cover}
@media(max-width:980px){
  #mission .split{grid-template-columns:1fr}
  #mission .frame img{min-height:320px}
}
/* ============ Vault left column ============ */
.vault-left{display:flex;flex-direction:column;gap:34px;justify-content:center}
.vault-left .give-card h3{color:var(--paper)}


/* v4 tweaks */
.news-card{grid-template-columns:1fr auto}
.hb1{width:50%;right:2%;top:8%}
.hb2{width:23%;left:48%;bottom:6%}
.hb3{width:27%;right:2%;bottom:5%}
.hero-veil{background:linear-gradient(90deg, var(--paper) 0%, rgba(243,239,230,.97) 26%, rgba(243,239,230,.8) 44%, rgba(243,239,230,.3) 60%, rgba(243,239,230,0) 74%)}

/* Mission photo: full landscape, nobody cropped out */
#mission .split{align-items:center}
#mission .frame{height:auto}
#mission .frame img{height:auto;min-height:0;object-fit:unset;width:100%}

/* Forever Fund explainer: larger text, aligned with the intro block opposite */
.vault .wrap{align-items:start}
.vault-left{justify-content:flex-start;gap:40px}
.vault-left .give-card{padding:34px 34px 36px}
.vault-left .give-card h3{font-size:clamp(22px,2.1vw,27px);margin-bottom:14px}
.vault-left .give-card p{font-size:clamp(16.5px,1.35vw,19px);line-height:1.72;font-family:var(--serif);color:rgba(243,239,230,.92)}

/* ============ Section anchor offset (fixed header) ============ */
section{scroll-margin-top:84px}

/* ================= v5: blue / red / white / off-white / black rework ================= */
body{background:var(--paper);color:var(--ink)}

/* Light card surfaces -> clean white */
.news-card,.explain{background:#fff}

/* ---- HERO: keep the text clear of the photos ---- */
.hero-veil{background:linear-gradient(90deg,
  var(--paper) 0%, var(--paper) 40%,
  rgba(249,250,251,.92) 50%, rgba(249,250,251,.5) 66%,
  rgba(249,250,251,0) 80%)}
.hero-copy{max-width:560px}
.hb1{width:46%;right:2%;top:9%}
.hb2{width:22%;left:54%;bottom:7%}
.hb3{width:26%;right:2%;bottom:5%}
@media(max-width:980px){ .hero-copy{max-width:none} }

/* ---- HERO mobile: photos as a background layer, like desktop ----
   Stacked photos ate half the screen. Instead: the three photos tile the hero
   as a full-bleed background column, washed with a strong vertical veil so the
   headline keeps its contrast, text overlaid exactly as on desktop. */
@media(max-width:980px){
  .hero{display:flex;flex-direction:column;justify-content:center;min-height:88svh;padding-bottom:64px}
  .hero-bg{order:0;position:absolute;inset:0;margin:0;display:grid;
    grid-template-columns:1fr;grid-template-rows:1.35fr 1fr 1fr;gap:4px}
  .hb,.hb1,.hb2,.hb3{position:static;width:100%;height:100%;object-fit:cover;
    margin:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
  .hero-veil{display:block;position:absolute;inset:0;background:linear-gradient(180deg,
    rgba(249,250,251,.97) 0%, rgba(249,250,251,.93) 46%,
    rgba(249,250,251,.82) 72%, rgba(249,250,251,.55) 100%)}
  .hero-copy{position:relative;z-index:2;order:1}
}

/* ---- On-dark eyebrows: white text + red rule ---- */
.on-dark .eyebrow{color:#fff}
.on-dark .eyebrow::before{background:var(--crimson)}
.donate .eyebrow{color:#fff}
.donate .eyebrow::before{background:#fff}

/* ---- Glass give-cards read clean on any colour ---- */
.give-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.give-card .btn{background:var(--paper);color:var(--crimson-deep)}
.contact-btn{margin-top:16px}

/* ---- THE FUND (vault) ---- */
.vault{background:radial-gradient(1200px 720px at 50% 12%, #2C5F92 0%, var(--forest-deep) 64%)}
.vault .wrap{display:block}
.vault-top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,60px);align-items:center}
.vault .vault-explainer{margin:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.vault .vault-explainer .eyebrow{margin-bottom:8px}
.vault .vault-explainer p{font-family:var(--serif);font-size:clamp(16px,1.3vw,18px);line-height:1.72;color:rgba(255,255,255,.92)}
.vault .vault-explainer p + p{margin-top:1.3em}
.vault .hiw-diagram{margin:0}
.vault .impact-box{margin:clamp(38px,5vw,60px) auto 0;max-width:780px}
@media(max-width:980px){ .vault-top{grid-template-columns:1fr} .vault .hiw-diagram{margin-top:clamp(28px,5vw,40px)} }

/* ---- OUTREACH PROGRAMS: vertical rows of white cards ---- */
.programs{background:var(--forest-deep)}
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px);
  overflow:visible;scroll-snap-type:none;perspective:none;
  padding:44px var(--pad) clamp(72px,8vw,112px)}
.pcard{flex:initial;scroll-snap-align:none;transform:none!important;background:#fff;border:1px solid #E5E7EB}
.pcard h3{color:var(--ink)}
.pcard p{color:var(--ink2)}
.pcard .since{color:var(--crimson)}
@media(max-width:900px){ .rail{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .rail{grid-template-columns:1fr} }


/* ---- Branded flowchart card ---- */
.vault .hiw-diagram .flow-card{background:#fff;border:1px solid #E5E7EB;border-radius:14px;
  padding:clamp(14px,2.4vw,26px);max-width:560px;margin:0 auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.vault .hiw-diagram .flow-card svg{display:block;width:100%;height:auto}