:root{
  /* Foundation: navy + warm canvas. ONE accent — client round-3 spec. */
  --ink:#052A31; --ink-2:#0A3A43; --ink-line:#164752;
  --canvas:#F6F3EA; --canvas-2:#EFEADB; --white:#fff;
  --body:#142D31; --muted:#5f7476; --muted-d:#a9c4c6; --line-l:#e2dccb;
  --r:16px; --maxw:1180px;

  /* ---- ACCENT (version A — client-specified Signal Orange) ----
     Used ONLY for: donate buttons, primary CTAs, important links,
     statistics, nav hover. Never decorative. */
  --accent:#F97316; --accent-d:#B94F05; --accent-br:#FB8F3E; --accent-on:#052A31;
  --accent-soft:#FDEDE1;
  /* accent used as TEXT. Bright #F97316 is only 2.53:1 on the canvas and
     fails WCAG AA, so text uses a darker shade of the same hue (4.52:1).
     Dark sections override this back to the bright accent (5.42:1 on navy). */
  --accent-ink:#B94F05;

  /* The logo's cyan/lime/red/gold are retired as UI accents (round-2 doc:
     ONE highlight colour). The old token names are kept but ALIASED to the
     accent, so any component still referencing them resolves to the single
     accent automatically, and follows the ember/orange switch for free.
     The logo itself is an image and is unaffected. */
  --cyan:var(--accent);   --cyan-br:var(--accent-br);
  --lime:var(--accent);   --lime-br:var(--accent-br);
  --red:var(--accent);    --red-deep:var(--accent-d);
  --gold:var(--accent);   --gold-deep:var(--accent-d);
}
/* ---- ACCENT (version B — "Ember", derived from the logo:
        sits between logo gold #E0B23C and logo red #D8342B) ---- */
body.accent-ember{
  --accent:#E07A1F; --accent-d:#8F4A0D; --accent-br:#EE9440; --accent-on:#052A31;
  --accent-soft:#FBEEDF;
  --accent-ink:#8F4A0D;
}
.dark,.endcta,footer,header.nav,.ovl,.hero,.phero{--accent-ink:var(--accent)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--body);font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif;line-height:1.06;letter-spacing:-.02em;margin:0;font-weight:600}
a{color:var(--accent-ink);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
/* ===== ONE BUTTON STYLE (round-3: every primary button looks the same) =====
   All legacy variant names are aliased onto two treatments so existing
   templates render in the new system without being rewritten:
     primary   = solid accent  (.btn-red, .btn-cyan, .btn-accent)
     secondary = outline       (.btn-ghost-l on dark, .btn-ghost-d on light) */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-weight:700;
  font-size:14px;letter-spacing:.045em;text-transform:uppercase;padding:16px 28px;border-radius:3px;
  cursor:pointer;border:2px solid transparent;transition:background .2s,color .2s,border-color .2s;line-height:1}
.btn::after{content:"→";font-size:15px;transition:transform .2s}
.btn:hover::after{transform:translateX(4px)}
.btn-red,.btn-cyan,.btn-accent{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
.btn-red:hover,.btn-cyan:hover,.btn-accent:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff}
.btn-ghost-l{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost-l:hover{border-color:var(--accent);color:var(--accent-br);background:transparent}
.btn-ghost-d{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost-d:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.btn-sm{padding:12px 20px;font-size:12.5px}
.eyebrow{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--accent-ink)}
.reveal{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease}
.reveal.in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none}}

/* ===== NAV — reference-site pattern: logo · DONATE · MENU. No link list. ===== */
header.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ink) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--ink-line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:88px;gap:20px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:60px;width:auto;max-width:none;flex-shrink:0}
@media(max-width:640px){.brand img{height:46px}.nav .wrap{height:72px}}
.nav-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.menu-btn{display:inline-flex;align-items:center;gap:11px;background:transparent;border:0;cursor:pointer;
  color:#fff;font-family:"Space Grotesk";font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:10px 2px}
.menu-btn:hover{color:var(--accent-br)}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:4px;width:22px}
.menu-btn .bars i{display:block;height:2px;background:currentColor;border-radius:2px;transition:.25s}
.menu-btn:hover .bars i:nth-child(2){transform:translateX(5px)}
@media(max-width:640px){.menu-btn span.t{display:none}}

/* full-screen overlay menu */
.ovl{position:fixed;inset:0;z-index:200;background:var(--ink);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;overflow-y:auto}
.ovl.open{opacity:1;visibility:visible}
.ovl-top{display:flex;align-items:center;justify-content:space-between;height:88px;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
@media(max-width:640px){.ovl-top{height:72px}}
.ovl-top img{height:60px;width:auto;max-width:none}
@media(max-width:640px){.ovl-top img{height:46px}}
.ovl-x{background:transparent;border:0;color:#fff;font-size:15px;font-family:"Space Grotesk";font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.ovl-x:hover{color:var(--accent-br)}
.ovl-body{max-width:var(--maxw);margin:0 auto;padding:clamp(20px,5vh,60px) clamp(20px,4vw,44px) 80px;
  display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(30px,6vw,80px)}
@media(max-width:860px){.ovl-body{grid-template-columns:1fr;gap:36px}}
.ovl-links{display:flex;flex-direction:column}
.ovl-links a{color:#fff;font-family:"Space Grotesk";font-weight:700;letter-spacing:-.02em;
  font-size:clamp(30px,5.4vw,58px);line-height:1.12;padding:7px 0;transition:color .2s,transform .25s;transform-origin:left center}
.ovl-links a:hover{color:var(--accent);transform:translateX(12px)}
.ovl-side h4{color:var(--accent-ink);font-family:"Space Grotesk";font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px}
.ovl-side a,.ovl-side p{display:block;color:#cfe0df;font-size:15.5px;margin:0 0 9px}
.ovl-side a:hover{color:var(--accent-br)}
.ovl-side .btn{margin-top:18px}

/* ===== HERO — full-bleed, video-ready, ONE message + ONE primary action ===== */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
/* looping hero video (drops in once client footage is cut); poster image shows until it can play */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .9s ease}
.hero-video.ready{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-video{display:none!important}}
/* rotating slides — each holds its own poster + video */
.hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease;pointer-events:none}
.hslide.on{opacity:1}
.hslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hslide .hero-video{z-index:1}
/* slow drift keeps a locked-off camera from feeling like a still */
.hslide.on img,.hslide.on .hero-video{animation:kbdrift 9s ease-out both}
@media(prefers-reduced-motion:reduce){.hslide.on img,.hslide.on .hero-video{animation:none}}
@keyframes kbdrift{0%{transform:scale(1.0)}100%{transform:scale(1.06)}}
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  /* left wash keeps the headline legible across EVERY frame of the video loop,
     not just the frames that happen to be dark behind it */
  linear-gradient(100deg,rgba(4,18,21,.80) 0%,rgba(4,18,21,.55) 34%,rgba(4,18,21,.10) 62%,transparent 100%),
  linear-gradient(0deg,rgba(4,18,21,.90) 0%,rgba(4,18,21,.45) 38%,rgba(4,18,21,.14) 68%,rgba(4,18,21,.40) 100%)}
.hero-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.4;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:3px 3px}
.hero .wrap{position:relative;z-index:3;width:100%;padding-top:120px;padding-bottom:clamp(64px,9vh,110px)}
.hero-inner{max-width:min(720px,94%)}
/* all copy blocks share one grid cell so the block is as tall as the tallest
   and the CTAs never jump between slides */
.hero-copy{display:grid}
/* Staggered, NOT cross-faded: the outgoing statement clears first, then the
   incoming one rises in. Overlapping them ghosted two headlines on top of
   each other. */
.hero-copy>.hcopy{grid-area:1/1;opacity:0;transform:translateY(26px);visibility:hidden;
  transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.hero-copy>.hcopy.on{opacity:1;transform:none;visibility:visible;
  transition:opacity .55s ease .3s,transform .7s cubic-bezier(.2,.7,.2,1) .3s,visibility 0s .3s}
@media(prefers-reduced-motion:reduce){.hero-copy>.hcopy{transition:opacity .3s ease,visibility .3s;transform:none}}
.hero h1,.hero .as-h1{font-size:clamp(42px,7.4vw,92px);font-weight:700;color:#fff;letter-spacing:-.035em;
  line-height:1.02;text-shadow:0 2px 34px rgba(0,0,0,.4);font-family:"Space Grotesk",sans-serif;margin:0}
/* progress bars — also the manual control */
.hero-prog{position:absolute;z-index:4;right:clamp(20px,4vw,44px);bottom:clamp(26px,4vh,44px);
  display:flex;gap:10px;align-items:center}
@media(max-width:760px){.hero-prog{right:auto;left:clamp(20px,4vw,44px);bottom:14px}}
.hero-bars{display:flex;gap:10px;align-items:center}
.hero-prog .hp-bar{width:54px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.32);position:relative;overflow:hidden;transition:background .3s}
.hero-prog .hp-bar:hover{background:rgba(255,255,255,.55)}
.hero-prog .hp-bar i{position:absolute;inset:0;display:block;background:var(--accent);
  transform:scaleX(0);transform-origin:left center}
.hero-prog .hp-bar.on i{animation:progfill var(--hold,7s) linear forwards}
.hero-prog.paused .hp-bar.on i{animation-play-state:paused}
@keyframes progfill{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.hero-prog .hp-bar.on i{animation:none;transform:scaleX(1)}}
.hero h1 em{font-style:normal;color:#fff}
.hero .lede{font-size:clamp(17px,1.9vw,21px);color:#e4efee;max-width:46ch;margin:22px 0 34px;line-height:1.5;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero .ctas .btn{white-space:nowrap}
.hero .tag{display:none}
.hero-dots{position:absolute;z-index:4;right:clamp(20px,4vw,44px);bottom:104px;display:flex;gap:9px;align-items:center}
@media(max-width:760px){.hero-dots{bottom:auto;top:14px;right:14px}}
.hero-dots .dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.42);cursor:pointer;transition:.3s}
.hero-dots .dot.on{background:var(--cyan-br);width:22px;border-radius:5px}
.hero-play{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(4,20,23,.5);color:#fff;cursor:pointer;font-size:11px;display:grid;place-items:center;margin-left:8px}
.hero-play:hover{border-color:var(--cyan-br);color:var(--cyan-br)}
/* proof dock */
.dock{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(0,182,203,.24);background:linear-gradient(0deg,rgba(4,20,23,.86),rgba(4,20,23,.32));backdrop-filter:blur(6px)}
.dock .row{max-width:var(--maxw);margin:0 auto;padding:16px clamp(20px,4vw,44px);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:720px){.dock .row{grid-template-columns:1fr 1fr;gap:10px;padding:13px 20px}}
.dock .d .n{font-family:"Space Grotesk";font-weight:700;font-size:clamp(22px,2.4vw,30px);color:var(--gold);line-height:1}
.dock .d .l{color:#cfe0df;font-size:12.5px;font-family:"Space Grotesk";font-weight:500;margin-top:3px}

/* ===== MEDIA MARQUEE ===== */
.marquee{background:var(--ink-2);border-bottom:1px solid var(--ink-line);padding:18px 0;overflow:hidden}
.marquee .lbl{color:var(--muted-d);font-family:"Space Grotesk";font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:center;margin-bottom:12px}
.mq-track{display:flex;gap:14px;width:max-content;animation:scroll 34s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
@keyframes scroll{to{transform:translateX(-50%)}}
.mq{display:inline-flex;align-items:center;gap:8px;color:#e7f2f2;font-family:"Space Grotesk";font-weight:600;font-size:14px;border:1px solid var(--ink-line);border-radius:999px;padding:9px 18px;white-space:nowrap;transition:.2s}
.mq:hover{border-color:var(--cyan);color:var(--cyan-br)}
.mq b{color:var(--gold);font-weight:700}

/* ===== SECTION SCAFFOLD ===== */
section{position:relative}
.pad{padding:clamp(60px,8vw,108px) 0}
.light{background:var(--canvas);color:var(--body)}
.light .eyebrow{color:var(--gold-deep)}.light .eyebrow::before{background:var(--gold-deep)}
.dark{background:var(--ink);color:#e7f2f2}
.sec-head{max-width:62ch}
.sec-head h2{font-size:clamp(30px,4.4vw,50px);margin:14px 0 0;font-weight:700}
.dark .sec-head h2{color:#fff}
.sec-head p{font-size:19px;margin:14px 0 0}
.light .sec-head p{color:var(--muted)}.dark .sec-head p{color:var(--muted-d)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ===== MISSION (4 verbs) ===== */
.mission .big-verbs{display:flex;flex-wrap:wrap;gap:6px 24px;font-family:"Space Grotesk";font-weight:700;font-size:clamp(30px,5.4vw,60px);letter-spacing:-.02em;line-height:1.05;margin-bottom:26px}
.mission .big-verbs span:nth-child(1){color:var(--cyan)}
.mission .big-verbs span:nth-child(2){color:var(--lime-br);filter:saturate(1.1) brightness(.92)}
.mission .big-verbs span:nth-child(3){color:var(--gold-deep)}
.mission .big-verbs span:nth-child(4){color:var(--red)}
.mission p.m{font-size:clamp(18px,2.2vw,23px);color:var(--body);max-width:60ch;line-height:1.5}
.mission .mstmt{font-family:"Space Grotesk";font-weight:600;font-size:clamp(23px,3.4vw,40px);letter-spacing:-.02em;line-height:1.24;color:var(--ink);max-width:22ch;margin:18px 0 0}
@media(min-width:760px){.mission .mstmt{max-width:18em}}
.mission .mstmt .c1{color:var(--cyan)}
.mission .mstmt .c2{color:var(--lime-br);filter:saturate(1.1) brightness(.92)}
.mission .mstmt .c3{color:var(--gold-deep)}
.values{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.values span{font-family:"Space Grotesk";font-weight:600;font-size:13.5px;background:#fff;border:1px solid var(--line-l);border-radius:999px;padding:8px 16px;color:var(--body)}
.values span i{font-style:normal;color:var(--cyan)}

/* ===== IMPACT ===== */
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
@media(max-width:820px){.impact-grid{grid-template-columns:1fr 1fr}}
.stat{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r);padding:26px 24px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.stat .n{font-family:"Space Grotesk";font-weight:700;font-size:clamp(34px,4vw,50px);color:var(--gold);line-height:1}
.stat .l{color:#fff;font-family:"Space Grotesk";font-weight:600;font-size:15px;margin-top:8px}
.stat .def{color:var(--muted-d);font-size:12.5px;margin-top:8px;line-height:1.4}
.asof{color:var(--muted-d);font-size:13px;margin-top:22px;font-family:"Space Grotesk"}

/* ===== TIMELINE (signature) ===== */
.tl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.tl-rail{display:flex;gap:6px;margin:34px 0 26px;position:relative;flex-wrap:wrap}
.tl-rail button{font-family:"Space Grotesk";font-weight:700;font-size:15px;color:var(--muted-d);background:transparent;border:1px solid var(--ink-line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.25s}
.tl-rail button:hover{color:#fff;border-color:var(--cyan)}
.tl-rail button.on{color:#042227;background:var(--cyan);border-color:var(--cyan)}
.tl-stage{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);align-items:center;min-height:360px}
@media(max-width:860px){.tl-stage{grid-template-columns:1fr}}
.tl-photo{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--ink-line);background:var(--ink-2)}
.tl-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.tl-photo img.on{opacity:1}
.tl-photo .yr{position:absolute;left:16px;bottom:12px;font-family:"Space Grotesk";font-weight:700;font-size:clamp(40px,7vw,72px);color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.6);z-index:2;line-height:1}
.tl-photo .ph-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,20,23,.7),transparent 45%);z-index:1}
.tl-body{min-height:200px}
.tl-body .mile{font-family:"Space Grotesk";font-weight:700;color:var(--gold);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.tl-body h3{font-size:clamp(24px,3vw,34px);color:#fff;margin:10px 0 12px}
.tl-body p{color:var(--muted-d);font-size:16.5px;margin:0 0 16px}
.tl-body .tags{display:flex;flex-wrap:wrap;gap:8px}
.tl-body .tags span{font-family:"Space Grotesk";font-weight:600;font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid var(--ink-line);color:#cfe0df}
.tl-body .tags span.c{color:var(--cyan-br);border-color:color-mix(in srgb,var(--cyan) 45%,var(--ink-line))}
.tl-body .tags span.g{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--ink-line))}

/* ===== PROGRAMS ===== */
.paths{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:40px}
.path{grid-column:span 2;background:#fff;border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.path:nth-child(1),.path:nth-child(2){grid-column:span 3}
@media(max-width:900px){.path,.path:nth-child(1),.path:nth-child(2){grid-column:span 6}}
.path:hover{transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(0,60,70,.42);border-color:color-mix(in srgb,var(--cyan) 40%,var(--line-l))}
.path .glow{position:absolute;inset:0;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--cyan) 16%,transparent),transparent 70%);pointer-events:none;z-index:1}
.path:hover .glow{opacity:1}
.path .ph{aspect-ratio:16/9;overflow:hidden;position:relative}
.path .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.path:hover .ph img{transform:scale(1.06)}
.path .ph .cat{position:absolute;top:14px;left:14px;z-index:2;font-family:"Space Grotesk";font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#042227;background:var(--lime-br);padding:5px 12px;border-radius:999px}
.path .body{padding:24px;position:relative;z-index:2}
.path h3{font-size:22px;color:var(--body)}
.path p{color:var(--muted);font-size:15px;margin:8px 0 14px}
.path .progs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.path .progs span{font-size:12.5px;font-family:"Space Grotesk";font-weight:500;background:var(--canvas-2);border:1px solid var(--line-l);border-radius:8px;padding:5px 11px;color:var(--body)}
.path .tier{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--body);border-top:1px dashed var(--line-l);padding-top:14px}
.path .tier b{font-family:"Space Grotesk";font-weight:700;color:var(--gold-deep);font-size:16px}
.path .tier .go{margin-left:auto;font-family:"Space Grotesk";font-weight:600;color:var(--cyan);font-size:14px}

/* ===== LEADERSHIP ===== */
.lead-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,56px);align-items:center}
@media(max-width:860px){.lead-grid{grid-template-columns:1fr}}
.lead-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead-photos figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--ink-line);background:var(--ink-2);position:relative}
.lead-photos img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.lead-photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(0deg,rgba(4,20,23,.92),transparent);z-index:2}
.lead-photos .nm{font-family:"Space Grotesk";font-weight:700;color:#fff;font-size:15px}
.lead-photos .role{color:var(--gold);font-size:12px;font-family:"Space Grotesk";font-weight:600}
.lead-photos figure.wide{grid-column:1/-1}
.lead-photos figure.wide img{aspect-ratio:16/9;object-position:center 30%}
.lead-body .pull{font-family:"Space Grotesk";font-weight:600;font-size:clamp(20px,2.6vw,26px);color:#fff;line-height:1.3;border-left:3px solid var(--gold);padding-left:20px;margin:0 0 20px}
.lead-body p{color:var(--muted-d);font-size:16.5px}

/* ===== GET INVOLVED ===== */
/* minmax(0,...) + min-width:0 stop a grid item's min-content size (a textarea's
   intrinsic `cols` width, for one) from forcing the track wider than the
   container. That was pushing the Contact page 8px past the viewport on phones. */
.give-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,52px);align-items:start}
.give-grid>*{min-width:0}
@media(max-width:860px){.give-grid{grid-template-columns:minmax(0,1fr)}}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
@media(max-width:520px){.tiers{grid-template-columns:1fr}}
.tier-card{background:#fff;border:1px solid var(--line-l);border-radius:14px;padding:20px;transition:.25s;cursor:pointer}
.tier-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.tier-card .amt{font-family:"Space Grotesk";font-weight:700;font-size:26px;color:var(--accent-d)}
.tier-card .out{color:var(--body);font-size:14.5px;margin-top:4px}
.give-side{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r);padding:26px}
.give-side h3{font-size:20px;color:var(--body);margin-bottom:6px}
.give-side .ways{display:grid;gap:10px;margin:14px 0}
.give-side .way{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-l);border-radius:12px;transition:.2s}
.give-side .way:hover{border-color:var(--cyan);background:var(--canvas)}
.give-side .way .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:var(--canvas-2)}
.give-side .way b{font-family:"Space Grotesk";font-weight:600;color:var(--body);font-size:15px}
.give-side .way span{color:var(--muted);font-size:13px}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.badge{font-family:"Space Grotesk";font-weight:600;font-size:12.5px;background:var(--canvas);border:1px solid var(--line-l);border-radius:10px;padding:9px 13px;display:flex;gap:7px;color:var(--body)}
.badge .c{color:var(--accent)}

/* ===== FOOTER ===== */
footer{background:var(--ink);color:var(--muted-d);padding:56px 0 30px;font-size:14.5px;border-top:1px solid var(--ink-line)}
/* Rev 4 item 5: footer rebuilt to the four specified blocks. Explore and Act were both
   removed as duplicating the overlay menu. */
.f-grid{display:grid;grid-template-columns:1.8fr 1.15fr .75fr 1.4fr;gap:30px;margin-bottom:30px}
.f-act{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.f-act .btn{margin:0;white-space:nowrap}
.f-social a{display:block}
@media(max-width:980px){.f-grid{grid-template-columns:1.4fr 1fr 1fr}.f-grid .about{grid-column:1/-1}}
@media(max-width:720px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}
footer h4{color:#fff;font-family:"Space Grotesk";font-size:14px;margin:0 0 12px;letter-spacing:.02em}
footer a{color:var(--muted-d);display:block;padding:4px 0}footer a:hover{color:var(--cyan-br)}
footer .about img{height:58px;width:auto;max-width:none;margin-bottom:16px}
footer .contact b{color:#fff}
.news-in{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.news-in input{flex:1;min-width:150px;background:var(--ink-2);border:1px solid var(--ink-line);border-radius:10px;padding:11px 14px;color:#fff;font-family:"Inter";font-size:14px}
.news-in input::placeholder{color:#7f9698}
.fnote{border-top:1px solid var(--ink-line);padding-top:18px;font-size:12.5px;color:#7f9698;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.fnote a{display:inline;padding:0;color:var(--gold);font-weight:700}.fnote a:hover{text-decoration:underline}

/* mobile bar + sheet */
/* mobile action bar + slide-out sheet removed 2026-08-22 — replaced by the
   full-screen overlay menu (.ovl), which works at every breakpoint. */
.x{align-self:flex-end;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:9px;width:42px;height:42px;font-size:20px;cursor:pointer}
/* ============ Inner pages (added for multi-page build) ============ */
.phero{background:var(--ink);color:#fff;padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,58px);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 70% at 86% 8%,rgba(0,182,203,.15),transparent 60%)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(32px,5vw,54px);color:#fff;font-weight:700;margin:10px 0 0}
.phero p{color:var(--muted-d);font-size:19px;max-width:62ch;margin:14px 0 0}
.phero .crumb{color:var(--muted-d);font-size:13px;font-family:"Space Grotesk"}
.phero .crumb a{color:var(--cyan-br)}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
@media(max-width:900px){.cardgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cardgrid{grid-template-columns:1fr}}
.card2{background:#fff;border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;color:inherit;text-decoration:none}
.dark .card2{background:var(--ink-2);border-color:var(--ink-line)}
.card2:hover{transform:translateY(-5px);box-shadow:0 26px 54px -30px rgba(0,60,70,.4)}
.card2 .ph{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--ink-2)}
.card2 .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card2:hover .ph img{transform:scale(1.05)}
.card2 .cat{position:absolute;top:12px;left:12px;font-family:"Space Grotesk";font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#042227;background:var(--lime-br);padding:5px 11px;border-radius:999px}
.card2 .yrb{position:absolute;top:12px;right:12px;font-family:"Space Grotesk";font-weight:700;font-size:13px;color:#fff;background:rgba(4,20,23,.72);padding:5px 11px;border-radius:999px}
.card2 .b{padding:22px;display:flex;flex-direction:column;flex:1}
.card2 h3{font-size:20px;color:var(--body);margin:0 0 6px;font-family:"Space Grotesk";font-weight:600}
.dark .card2 h3{color:#fff}
.card2 p{color:var(--muted);font-size:14.5px;margin:0 0 12px;flex:1}
.dark .card2 p{color:var(--muted-d)}
.card2 .tier{font-family:"Space Grotesk";font-weight:700;color:var(--gold-deep);font-size:15px}
.dark .card2 .tier{color:var(--accent-ink)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.filters button{font-family:"Space Grotesk";font-weight:600;font-size:13.5px;color:var(--muted);background:#fff;border:1px solid var(--line-l);border-radius:999px;padding:8px 16px;cursor:pointer;transition:.2s}
.dark .filters button{color:var(--muted-d);background:var(--ink-2);border-color:var(--ink-line)}
.filters button.on{color:#042227;background:var(--cyan);border-color:var(--cyan)}
.ev-meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:16px;color:var(--muted-d);font-size:15px;font-family:"Space Grotesk"}
.ev-meta b{color:#fff}
.egal{columns:3;column-gap:14px;margin-top:16px}
@media(max-width:820px){.egal{columns:2}}
@media(max-width:520px){.egal{columns:1}}
.egal a{display:block;margin:0 0 14px;border-radius:12px;overflow:hidden;break-inside:avoid;cursor:zoom-in}
.egal img{width:100%;display:block;transition:transform .4s}
.egal a:hover img{transform:scale(1.04)}
.egal .vid{position:relative}
.egal .vid::after{content:"\25B6";position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#fff;background:rgba(4,20,23,.4)}
.tierlist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media(max-width:700px){.tierlist{grid-template-columns:1fr}}
.tierlist .t{background:#fff;border:1px solid var(--line-l);border-radius:12px;padding:18px}
.dark .tierlist .t{background:var(--ink-2);border-color:var(--ink-line)}
.tierlist .t .a{font-family:"Space Grotesk";font-weight:700;font-size:24px;color:var(--accent-ink)}
.tierlist .t .n{font-family:"Space Grotesk";font-weight:600;font-size:14px;color:var(--body);margin-top:2px}
.dark .tierlist .t .n{color:#fff}
.tierlist .t .d{color:var(--muted);font-size:13px;margin-top:4px}
.dark .tierlist .t .d{color:var(--muted-d)}
.lbx{position:fixed;inset:0;z-index:200;background:rgba(4,16,19,.94);display:none;align-items:center;justify-content:center;padding:24px}
.lbx.open{display:flex}
.lbx img,.lbx iframe{max-width:94vw;max-height:90vh;border-radius:8px;border:0}
.lbx .x{position:absolute;top:16px;right:24px;color:#fff;font-size:36px;cursor:pointer;background:none;border:0;line-height:1}
.prose{max-width:70ch;font-size:17px;line-height:1.7}
.prose p{margin:0 0 16px}
.dark .prose,.dark .prose p{color:var(--muted-d)}
.backlink{display:inline-flex;gap:8px;color:var(--cyan);font-family:"Space Grotesk";font-weight:600;font-size:14px;margin-bottom:8px}
.split2{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(24px,4vw,48px);align-items:start}
@media(max-width:860px){.split2{grid-template-columns:1fr}}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:820px){.areas{grid-template-columns:1fr}}
.area{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r);padding:24px}
.area .ic{font-size:22px}.area h3{color:#fff;font-size:18px;margin:8px 0 6px;font-family:"Space Grotesk"}
.area p{color:var(--muted-d);font-size:14.5px;margin:0}

/* hero image on inner pages + news video embeds */
.phero{background-size:cover;background-position:center;padding:clamp(48px,7vw,84px) 0 clamp(40px,6vw,64px)}
.phero::before{background:linear-gradient(180deg,rgba(5,26,29,.86),rgba(5,26,29,.72) 55%,rgba(5,26,29,.9)),radial-gradient(58% 70% at 86% 8%,rgba(0,182,203,.1),transparent 60%)}
.newsgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px}
@media(max-width:760px){.newsgrid{grid-template-columns:1fr}}
.vembed{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line-l)}
.vembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.newsitem .cap{margin-top:12px}
.newsitem .cap .o{font-family:"Space Grotesk";font-weight:700;color:var(--gold-deep);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.newsitem .cap h3{font-size:19px;color:var(--body);margin:4px 0 0;font-family:"Space Grotesk";font-weight:600}
.newsitem a.watch{font-family:"Space Grotesk";font-weight:600;color:var(--cyan);font-size:14px}

/* ===== PROGRAMS PAGE ===== */
.progcat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(22px,4vw,52px);align-items:center;margin-bottom:34px}
.progcat--rev .progcat-media{order:2}
.progcat-media{border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.5)}
.progcat-media img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:center top}
.progcat-body h2{font-family:"Space Grotesk";font-weight:700;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;line-height:1.08;margin:10px 0 12px}
.progcat-body p{font-size:clamp(16px,1.7vw,18px);line-height:1.55;margin:0;max-width:46ch}
@media(max-width:820px){.progcat{grid-template-columns:1fr;gap:20px}.progcat--rev .progcat-media{order:0}}

.progfeat{border-top:1px solid var(--ink-line);padding-top:28px;margin-top:28px;max-width:960px}
.progfeat h3{font-family:"Space Grotesk";font-weight:700;font-size:clamp(20px,2.4vw,27px);letter-spacing:-.01em;color:#fff;margin:0 0 10px}
.progfeat p{color:var(--muted-d);line-height:1.6;margin:0 0 12px;max-width:70ch}
.support-label{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:18px 0 2px}

.progpills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.progpills span{font-family:"Space Grotesk";font-weight:600;font-size:14.5px;background:#fff;border:1px solid var(--line-l);border-radius:999px;padding:10px 20px;color:var(--body)}
.progpills--d span{background:var(--ink-2);border-color:var(--ink-line);color:#eaf4f4}
.pquote{font-family:"Space Grotesk";font-style:italic;font-weight:500;font-size:clamp(18px,2.4vw,26px);letter-spacing:-.01em;color:var(--ink);margin:22px 0 0;padding-left:16px;border-left:3px solid var(--cyan)}
.pquote--d{color:#eaf4f4;border-left-color:var(--cyan-br)}

/* ===== HERO DOCK → PROGRAM PATHWAYS ===== */
.dock .row.paths-row{display:flex;flex-wrap:wrap;gap:9px 10px;align-items:center;justify-content:center}
.dock-lead{color:var(--gold);font-family:"Space Grotesk";font-weight:600;font-size:11px;letter-spacing:.15em;text-transform:uppercase;margin-right:4px}
.dock .dp{display:inline-flex;align-items:center;gap:8px;color:#dceaea;font-family:"Space Grotesk";font-weight:600;font-size:13.5px;border:1px solid rgba(0,182,203,.32);border-radius:999px;padding:8px 15px;background:rgba(4,20,23,.4);transition:transform .18s,border-color .18s,color .18s;white-space:nowrap}
.dock .dp:hover{border-color:var(--cyan-br);color:#fff;transform:translateY(-2px)}
.dock .dp .di{font-size:15px;line-height:1}
@media(max-width:720px){.dock-lead{width:100%;text-align:center;margin:0 0 2px}.dock .dp{font-size:12.5px;padding:7px 12px}}

/* ===== HOMEPAGE DUAL CTA (Give / Get Involved) ===== */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.dual{grid-template-columns:1fr}}
.dcard{display:block;position:relative;overflow:hidden;border-radius:var(--r);padding:32px 30px;text-decoration:none;border:1px solid var(--line-l);background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.dcard:hover{transform:translateY(-4px);box-shadow:0 26px 60px -34px rgba(5,26,29,.5);border-color:transparent}
.dcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px}
.dcard-give::before{background:var(--red)}
.dcard-help::before{background:var(--cyan)}
.dcard .ic{font-size:34px;line-height:1;margin-bottom:12px}
.dcard h3{font-family:"Space Grotesk";font-weight:700;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.dcard p{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 16px}
.dcard .go{font-family:"Space Grotesk";font-weight:700;font-size:15px}
.dcard-give .go{color:var(--red)}
.dcard-help .go{color:var(--cyan-deep,#0392a4)}
.dcard .mini-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dcard .mini-trust span{font-family:"Space Grotesk";font-weight:600;font-size:11.5px;letter-spacing:.02em;color:var(--muted);background:var(--canvas-2);border:1px solid var(--line-l);border-radius:999px;padding:5px 11px}

/* ===== GET INVOLVED — HELP CARDS ===== */
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
@media(max-width:820px){.help-grid{grid-template-columns:1fr}}
.help-card{background:#fff;border:1px solid var(--line-l);border-radius:var(--r);padding:30px 28px;transition:transform .2s,box-shadow .2s}
.help-card:hover{transform:translateY(-4px);box-shadow:0 24px 56px -34px rgba(5,26,29,.5)}
.help-card .ic{font-size:34px;line-height:1;margin-bottom:12px}
.help-card h3{font-family:"Space Grotesk";font-weight:700;font-size:22px;color:var(--ink);margin:0 0 8px}
.help-card p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 18px}

/* ===== VOLUNTEER GALLERY (dark) ===== */
.vol-egal{margin-top:8px}
.vol-egal img{border-radius:12px}

/* ===== ABOUT — FOUNDER'S LETTER ===== */
.letter{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(28px,5vw,60px);align-items:start}
@media(max-width:860px){.letter{grid-template-columns:1fr;gap:28px}}
.letter-body .prose p{color:var(--body);line-height:1.72;margin:0 0 14px}
.letter-sign{margin-top:20px;font-family:"Space Grotesk";font-weight:600;color:var(--ink);line-height:1.5}
.letter-sign b{font-size:18px}
.letter-sign span{display:block;color:var(--muted);font-size:13px;font-weight:500;margin-top:3px}
.letter-photo{position:sticky;top:100px}
@media(max-width:860px){.letter-photo{position:static;max-width:360px}}
.letter-photo img{width:100%;border-radius:var(--r);box-shadow:0 26px 64px -32px rgba(5,26,29,.55)}
.letter-photo .cap{margin-top:14px}
.letter-photo .cap b{font-family:"Space Grotesk";color:var(--ink);display:block;font-size:16px}
.letter-photo .cap span{color:var(--muted);font-size:14px}

/* ==========================================================================
   ROUND 2 + 3 RE-SKIN — homepage components
   Principle: every section answers ONE question and offers ONE action.
   ========================================================================== */

/* More air. Whitespace is the value signal on the reference sites. */
.pad{padding:clamp(78px,11vw,150px) 0}
.sec-head{max-width:min(560px,100%)}
.sec-head h2{font-size:clamp(32px,5vw,58px);letter-spacing:-.03em}
.sec-head p{font-size:19px;max-width:52ch}
.light .eyebrow{color:var(--accent-d)}.light .eyebrow::before{background:var(--accent-d)}
.sec-cta{margin-top:clamp(34px,4vw,52px);display:flex;flex-wrap:wrap;gap:14px}
.pad.dark .sec-cta,.contact-close .sec-cta{justify-content:inherit}

/* 3 — MISSION PREVIEW ---------------------------------------------------- */
.mpv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,86px);align-items:center}
@media(max-width:880px){.mpv{grid-template-columns:1fr;gap:34px}}
.mpv h2{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.03em;color:var(--ink);margin:16px 0 0}
.mpv p{font-size:clamp(17px,1.9vw,20px);color:var(--muted);max-width:46ch;margin:20px 0 0;line-height:1.6}
.mpv-fig{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px}
.mpv-fig img{width:100%;height:100%;object-fit:cover;object-position:center 15%}

/* 4 — PROGRAMS PREVIEW --------------------------------------------------- */
.prog3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(38px,5vw,58px)}
@media(max-width:880px){.prog3{grid-template-columns:1fr}}
.p3{display:block;background:transparent;color:inherit}
.p3 .ph{aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--canvas-2)}
.p3 .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.p3:hover .ph img{transform:scale(1.05)}
.p3 h3{font-size:clamp(21px,2.2vw,26px);color:var(--ink);margin:20px 0 0;letter-spacing:-.02em}
.p3 p{color:var(--muted);font-size:16px;margin:10px 0 0;max-width:34ch;line-height:1.6}
.dark .p3 h3{color:#fff}.dark .p3 p{color:var(--muted-d)}

/* 5 — IMPACT AT A GLANCE ------------------------------------------------- */
.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(38px,5vw,60px)}
@media(max-width:780px){.glance{grid-template-columns:1fr;gap:34px}}
.gl{border-top:3px solid var(--accent);padding-top:22px}
.gl .n{font-family:"Space Grotesk";font-weight:700;font-size:clamp(52px,7.4vw,86px);color:var(--accent-ink);line-height:.95;letter-spacing:-.04em}
.gl .l{font-family:"Space Grotesk";font-weight:600;font-size:17px;color:#fff;margin-top:12px}
.light .gl .l{color:var(--ink)}
.glance-note{color:var(--muted-d);font-size:13.5px;margin-top:30px;font-family:"Space Grotesk"}
.light .glance-note{color:var(--muted)}

/* 6 — FEATURED EVENT ----------------------------------------------------- */
.fev{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:880px){.fev{grid-template-columns:1fr;gap:30px}}
.fev-fig{aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--ink-2)}
.fev-fig img{width:100%;height:100%;object-fit:cover}
.fev h2{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.03em;color:#fff;margin:16px 0 0}
.light .fev h2{color:var(--ink)}
.fev .meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:20px 0 0;font-family:"Space Grotesk";font-weight:600;font-size:14.5px;color:var(--accent)}
.fev p{font-size:17.5px;color:var(--muted-d);margin:18px 0 0;max-width:44ch;line-height:1.6}
.light .fev p{color:var(--muted)}

/* 7 — GET INVOLVED (4 clear actions) ------------------------------------- */
/* Rev 4 item 3: the Get Involved strip is 3 items since "Donor" was removed. */
.inv4{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(38px,5vw,58px);background:var(--line-l)}
.dark .inv4{background:var(--ink-line)}
@media(max-width:900px){.inv4{grid-template-columns:1fr}}
@media(max-width:560px){.inv4{grid-template-columns:1fr}}
.iv{background:var(--canvas);padding:clamp(26px,3vw,38px) clamp(20px,2.2vw,30px);transition:background .25s}
.dark .iv{background:var(--ink)}
.iv:hover{background:var(--accent-soft)}
.dark .iv:hover{background:var(--ink-2)}
.iv h3{font-size:21px;color:var(--ink);letter-spacing:-.01em}
.dark .iv h3{color:#fff}
.iv p{color:var(--muted);font-size:15.5px;margin:10px 0 0;line-height:1.6}
.dark .iv p{color:var(--muted-d)}
.iv .num{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--accent-ink);display:block;margin-bottom:16px}

/* 8 — LATEST NEWS (max 3) ------------------------------------------------ */
.news3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(38px,5vw,58px)}
@media(max-width:880px){.news3{grid-template-columns:1fr}}
.n3 .ph{aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--canvas-2)}
.n3 .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.n3:hover .ph img{transform:scale(1.05)}
.n3 .out{font-family:"Space Grotesk";font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin-top:18px;display:block}
.n3 h3{font-size:19.5px;color:var(--ink);margin:9px 0 0;letter-spacing:-.01em;line-height:1.3}
.dark .n3 h3{color:#fff}

/* 9 — CLOSING DONATE CTA ------------------------------------------------- */
.endcta{position:relative;overflow:hidden;background:var(--ink);text-align:center}
.endcta .bg{position:absolute;inset:0;z-index:0;opacity:.28}
/* Rev 4 item 4: the closing CTA renders far wider than the source ratio, so
   "cover" with centre positioning was cropping the child's head off the top.
   The source was re-cropped with headroom AND the focal point moved up. */
.endcta .bg img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* Anchored to the top, not a percentage. The band renders about 3:1 from a 16:9
   source, so ~41% of the height is discarded whatever we do. Anchoring to the top
   guarantees the child's head survives regardless of how short the band gets. */
.endcta .wrap{position:relative;z-index:2}
.endcta h2{font-size:clamp(34px,5.6vw,66px);color:#fff;letter-spacing:-.035em;max-width:17ch;margin:0 auto;line-height:1.05}
.endcta p{color:#d7e6e5;font-size:clamp(17px,1.9vw,20px);max-width:48ch;margin:24px auto 0;line-height:1.6}
.endcta .btn{margin-top:36px}
.endcta .trust{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;margin-top:34px;
  font-family:"Space Grotesk";font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#9db6b6}

/* ---- accent sweep: retire the old multi-color UI accents ---------------- */
.stat::before{background:var(--accent)}
.stat .n{color:var(--accent)}
.dock .d .n{color:var(--accent)}
.tl-rail button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tl-rail button:hover{border-color:var(--accent)}
.tl-body .mile{color:var(--accent)}
.mission .mstmt .c1,.mission .mstmt .c2,.mission .mstmt .c3{color:var(--accent)}
.values span i{color:var(--accent)}
.anno b{color:var(--accent)}
.hero-dots .dot.on{background:var(--accent)}
.hero-play:hover{border-color:var(--accent);color:var(--accent-br)}

/* ==========================================================================
   ABOUT (round 2): mission triad, vision, shortened journey, leadership
   ========================================================================== */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l);margin-top:clamp(38px,5vw,56px)}
@media(max-width:820px){.triad{grid-template-columns:1fr}}
.td{background:var(--canvas);padding:clamp(26px,3vw,36px) clamp(20px,2.2vw,30px)}
.td .num{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--accent-ink);display:block;margin-bottom:16px}
.td h3{font-size:21px;color:var(--ink);letter-spacing:-.01em}
.td p{color:var(--muted);font-size:16px;margin:10px 0 0;line-height:1.6}

/* holds the full mission statement now, not a one-line vision, so it needs a
   readable measure rather than the narrow pull-quote width */
.vision{margin:clamp(44px,6vw,72px) 0 0;padding:0 0 0 clamp(20px,3vw,34px);border-left:3px solid var(--accent);
  font-family:"Space Grotesk";font-weight:600;font-size:clamp(19px,2.1vw,26px);line-height:1.38;
  letter-spacing:-.015em;color:var(--ink);max-width:min(62ch,100%)}
.vision cite{display:block;font-family:"Space Grotesk";font-weight:700;font-style:normal;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}

/* shortened journey */
.miles{list-style:none;margin:clamp(38px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px)}
@media(max-width:940px){.miles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.miles{grid-template-columns:1fr}}
.mile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--canvas-2)}
.mile .yr{display:block;font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.2em;
  color:var(--accent-ink);margin:18px 0 8px}
.mile h3{font-size:20px;color:var(--ink);letter-spacing:-.01em}
.mile p{color:var(--muted);font-size:15.5px;margin:9px 0 0;line-height:1.6}

/* leadership */
.leaders{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,52px);margin-top:clamp(38px,5vw,56px)}
@media(max-width:760px){.leaders{grid-template-columns:1fr}}
.ld .ph{aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--ink-2)}
.ld .ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.ld .role{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-ink);margin-top:20px}
.ld h3{font-size:clamp(22px,2.4vw,28px);color:#fff;margin:8px 0 0;letter-spacing:-.02em}
.ld .bio{color:var(--muted-d);font-size:16px;margin-top:12px;line-height:1.65}
.ld .bio p{margin:0 0 10px}

/* ==========================================================================
   DONATE (round 2): amounts that are clearly clickable, frequency up front
   ========================================================================== */
.giveform{margin:0}
.giveform fieldset{border:0;padding:0;margin:0 0 26px}
.giveform legend{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-ink);padding:0;margin-bottom:14px}

/* one-time / monthly */
.freq{display:block}
.freq label{display:inline-flex;cursor:pointer}
.freq input{position:absolute;opacity:0;width:0;height:0}
.freq span{display:inline-block;font-family:"Space Grotesk";font-weight:700;font-size:14px;letter-spacing:.03em;
  padding:12px 24px;border:2px solid var(--line-l);color:var(--muted);background:#fff;transition:.2s}
.freq label:first-of-type span{border-radius:3px 0 0 3px}
.freq label:last-of-type span{border-radius:0 3px 3px 0;border-left-width:0}
.freq input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.freq input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* amount options */
.amt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.amt-grid{grid-template-columns:1fr}}
.amt-opt{display:block;cursor:pointer}
.amt-opt input{position:absolute;opacity:0;width:0;height:0}
.amt-opt .box{display:flex;align-items:center;justify-content:center;height:100%;background:#fff;
  border:2px solid var(--line-l);border-radius:3px;padding:22px 20px;
  transition:border-color .2s,background .2s,transform .15s}
.amt-opt:hover .box{border-color:var(--accent);transform:translateY(-2px)}
.amt-opt input:checked+.box{border-color:var(--accent);background:var(--accent-soft)}
.amt-opt input:focus-visible+.box{outline:2px solid var(--accent);outline-offset:2px}
.amt-opt .n{display:block;font-family:"Space Grotesk";font-weight:700;font-size:28px;letter-spacing:-.02em;color:var(--ink);text-align:center}
.amt-opt input:checked+.box .n{color:var(--accent-ink)}
.amt-opt .o{display:block;color:var(--muted);font-size:14px;margin-top:6px;line-height:1.45}
.amt-any .n{font-size:20px}
.amt-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.amt-grid{grid-template-columns:1fr 1fr}}

.give-go{margin-top:4px}
.give-note{color:var(--muted);font-size:13.5px;margin-top:14px;max-width:52ch;line-height:1.6}
.give-note b{color:var(--ink)}

/* sponsor tiers are real links now, so they must look and behave like it */
.tierlist a.t{display:block;text-decoration:none;color:inherit;transition:border-color .2s,transform .15s,background .2s}
.tierlist a.t:hover{border-color:var(--accent);transform:translateY(-3px)}
.tierlist a.t .go{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink)}
.tierlist a.t .go::after{content:"→";transition:transform .2s}
.tierlist a.t:hover .go::after{transform:translateX(4px)}

/* Get Involved: the "what happens next" steps */
.steps{list-style:none;margin:clamp(34px,4vw,50px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:22px}}
.steps li{display:flex;gap:16px;align-items:flex-start}
.steps .s{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-on);font-family:"Space Grotesk";font-weight:700;font-size:15px}
.steps b{display:block;font-family:"Space Grotesk";font-size:17px;color:var(--ink);letter-spacing:-.01em}
.steps p{margin:6px 0 0;color:var(--muted);font-size:15.5px;line-height:1.6}
/* Get Involved reuses the homepage's 4-up action grid, but its cards carry buttons */
.iv .btn{margin-top:16px}

/* Events: date + location stated on every card (round 2) */
.evmeta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;
  font-family:"Space Grotesk";font-weight:600;font-size:13px;color:var(--accent-ink)}
.card2 .tier{color:var(--accent)}
.card2 .tier::after{content:" →"}

/* News: labels + a compact archive list instead of a wall of embeds */
.newsitem .o{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink)}
.newslist{list-style:none;margin:clamp(34px,4vw,50px) 0 0;padding:0;border-top:1px solid var(--ink-line)}
.newslist li{border-bottom:1px solid var(--ink-line)}
.newslist a{display:grid;grid-template-columns:130px 1fr auto;gap:20px;align-items:baseline;
  padding:20px 4px;color:#fff;transition:background .2s,padding .2s}
@media(max-width:760px){.newslist a{grid-template-columns:1fr;gap:6px;padding:18px 4px}}
.newslist a:hover{background:rgba(255,255,255,.04);padding-left:14px}
.newslist .lbl{font-family:"Space Grotesk";font-weight:700;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink)}
.newslist .ttl{font-family:"Space Grotesk";font-weight:600;font-size:18px;letter-spacing:-.01em}
.newslist .src{color:var(--muted-d);font-size:14px;white-space:nowrap}

/* form controls must never exceed their column */
.abfc-form{max-width:100%}
.abfc-form input,.abfc-form textarea,.abfc-form select{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.news-in{max-width:100%}
.news-in input{min-width:0}
@media(max-width:420px){.news-in{flex-direction:column;align-items:stretch}.news-in .btn{justify-content:center}}

/* long addresses must never push a card wider than its column on a phone */
.give-side .way span,.ovl-side a{overflow-wrap:anywhere}

/* Very narrow phones (320px, e.g. iPhone SE 1st gen): the logo + Donate + Menu
   trio overflowed the header. Tighten all three rather than dropping any. */
@media(max-width:380px){
  .nav .wrap{gap:10px;height:64px}
  .brand img{height:38px}
  .nav-right{gap:8px}
  .nav-right .btn{padding:11px 13px;font-size:11.5px;letter-spacing:.04em}
  .nav-right .btn::after{display:none}   /* arrow is decorative; space is not */
  .ovl-top{height:64px}
  .ovl-top img{height:38px}
}

/* WCAG 2.2.2 pause control for the auto-advancing hero */
.hero-pause{width:26px;height:26px;padding:0;border:1.5px solid rgba(255,255,255,.5);border-radius:50%;
  background:rgba(4,20,23,.45);cursor:pointer;position:relative;margin-right:4px;flex:0 0 auto}
.hero-pause:hover,.hero-pause:focus-visible{border-color:var(--accent);background:rgba(4,20,23,.7)}
.hero-pause::before,.hero-pause::after{content:"";position:absolute;top:7px;width:3px;height:11px;background:#fff;border-radius:1px}
.hero-pause::before{left:8px}.hero-pause::after{right:8px}
.hero-pause.is-paused::before{left:9px;width:0;height:0;top:6px;background:transparent;
  border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;border-radius:0}
.hero-pause.is-paused::after{display:none}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:var(--accent-on);
  font-family:"Space Grotesk";font-weight:700;font-size:14px;padding:14px 20px;border-radius:0 0 3px 0}
.skip:focus{left:0}

/* generic page + long-form legal copy */
.phero--plain{background:var(--ink);min-height:auto;padding:clamp(70px,9vw,120px) 0 clamp(40px,5vw,64px)}
.longform{max-width:68ch}
.longform h2{font-size:clamp(22px,2.6vw,30px);color:var(--ink);margin:38px 0 12px;letter-spacing:-.02em}
.longform h3{font-size:19px;color:var(--ink);margin:26px 0 8px}
.longform p,.longform li{color:var(--body);font-size:17px;line-height:1.7}
.longform ul{padding-left:20px;margin:10px 0}
.longform li{margin-bottom:7px}
.longform a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

/* Get Involved: client asked for the four action buttons to sit on one line.
   The cards keep their own column but the buttons align to a shared baseline
   at the foot of each card, so they read as a single row. */
.inv4--btns .iv{display:flex;flex-direction:column}
.inv4--btns .iv p{flex:1 1 auto}
.inv4--btns .iv .btn{align-self:flex-start;margin-top:18px}
@media(max-width:900px){.inv4--btns{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.inv4--btns .iv{padding:22px 14px}.inv4--btns .iv .btn{padding:11px 12px;font-size:11px}}
@media(max-width:620px){.inv4--btns{grid-template-columns:1fr 1fr}}

/* About: opening statement + the five core values */
.lede-lg{font-size:clamp(19px,2.2vw,24px);line-height:1.55;color:var(--ink);max-width:60ch;margin:0}
.values5{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-l);margin-top:clamp(34px,4vw,52px)}
@media(max-width:1000px){.values5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.values5{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.values5{grid-template-columns:1fr}}
.cv{background:var(--canvas-2);padding:clamp(22px,2.4vw,30px) clamp(16px,1.8vw,22px)}
.cv .num{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--accent-ink);display:block;margin-bottom:14px}
.cv h3{font-size:18px;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.cv p{color:var(--muted);font-size:14.5px;margin:9px 0 0;line-height:1.6}

/* ---- Rev 4: About page, journey chapters + closing collage ---------------- */
.chapter{margin-top:clamp(38px,5vw,60px)}
.chapter:first-of-type{margin-top:clamp(26px,3.4vw,38px)}
.ch-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--line-l)}
.ch-label{font-family:"Space Grotesk";font-weight:700;font-size:clamp(15px,1.8vw,19px);
  letter-spacing:.02em;color:var(--ink)}
.ch-years{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink)}
.ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,38px)}
.ch-grid--one{grid-template-columns:1fr;max-width:560px}
@media(max-width:760px){.ch-grid{grid-template-columns:1fr}}
.ch-grid .mile{margin:0}
.ch-grid .mile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;
  background:var(--canvas-2);display:block}
.ch-grid .mile .yr{display:block;margin-top:16px;font-family:"Space Grotesk";font-weight:700;
  font-size:12px;letter-spacing:.16em;color:var(--accent-ink)}
.ch-grid .mile h3{font-size:clamp(19px,2.1vw,24px);margin:7px 0 0;color:var(--ink);
  letter-spacing:-.02em}
.ch-grid .mile p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:9px 0 0;max-width:44ch}

.collage-band{background:var(--ink)}
.collage{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
@media(max-width:900px){.collage{grid-template-columns:repeat(2,1fr)}}
.collage figure{margin:0;position:relative;overflow:hidden}
.collage img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.collage figure:hover img{transform:scale(1.05)}
.collage figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;
  font-family:"Space Grotesk";font-weight:600;font-size:13px;color:#fff;
  background:linear-gradient(0deg,rgba(4,20,23,.82),transparent)}

/* ---- Rev 4: Programs page ------------------------------------------------ */
.phero-sub{color:#d7e6e5;font-size:clamp(16px,2vw,20px);max-width:46ch;margin:14px 0 0;line-height:1.55}
.prog-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(24px,3vw,34px)}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-l);
  border:1px solid var(--line-l);margin-top:clamp(30px,4vw,44px)}
@media(max-width:900px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pillars{grid-template-columns:1fr}}
.pl{background:var(--canvas-2);padding:clamp(22px,2.6vw,30px)}
.pl .num{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.16em;
  color:var(--accent-ink);display:block}
.pl h3{font-size:clamp(17px,1.9vw,20px);margin:10px 0 0;color:var(--ink);letter-spacing:-.015em}
.pl p{color:var(--muted);font-size:15px;line-height:1.6;margin:9px 0 0}

.cat{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(26px,4vw,56px);align-items:center}
@media(max-width:860px){.cat{grid-template-columns:1fr}}
.cat--flip .cat-media{order:2}
@media(max-width:860px){.cat--flip .cat-media{order:0}}
.cat-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;
  background:var(--canvas-2)}
.cat-body .eyebrow{margin-bottom:18px}
.cat-list{margin:0}
.cat-list dt{font-family:"Space Grotesk";font-weight:700;font-size:clamp(18px,2vw,22px);
  color:var(--ink);letter-spacing:-.02em;margin-top:22px}
.cat-list dt:first-of-type{margin-top:0}
.cat-list dd{margin:8px 0 0;color:var(--muted);font-size:15.5px;line-height:1.62;max-width:52ch}
.catsec.dark .cat-list dt{color:#fff}
.catsec.dark .cat-list dd{color:var(--muted-d)}

/* ---- Rev 4: Events page -------------------------------------------------- */
.ev4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(30px,4vw,44px)}
@media(max-width:1000px){.ev4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ev4{grid-template-columns:1fr}}
.ev .ph{aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--canvas-2)}
.ev .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ev h3{font-size:clamp(18px,2vw,21px);margin:16px 0 0;color:var(--ink);letter-spacing:-.02em}
.ev-date{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);margin-top:7px}
.ev p{color:var(--muted);font-size:15px;line-height:1.6;margin:10px 0 0}
.ev-btns{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}

.gal4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,24px);
  margin-top:clamp(30px,4vw,44px)}
@media(max-width:1000px){.gal4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gal4{grid-template-columns:1fr}}
.gc{display:block;width:100%;text-align:left;padding:0;border:0;background:transparent;
  cursor:pointer;font:inherit;color:inherit}
.gc .ph{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--ink-2)}
.gc .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gc:hover .ph img,.gc:focus-visible .ph img{transform:scale(1.05)}
.gc-body{display:block;margin-top:13px}
.gc-title{display:block;font-family:"Space Grotesk";font-weight:700;
  font-size:clamp(16px,1.8vw,19px);color:var(--ink);letter-spacing:-.015em}
.gc-count{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.gc:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}

.gv{position:relative;display:flex;align-items:center;justify-content:center}
.gv-img{max-width:92vw;max-height:84vh;display:block;border-radius:4px}
.gv-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border:0;border-radius:50%;background:rgba(4,20,23,.62);color:#fff;font-size:30px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gv-nav:hover{background:rgba(4,20,23,.85)}
.gv-prev{left:-6px}.gv-next{right:-6px}
@media(max-width:700px){.gv-prev{left:2px}.gv-next{right:2px}}
.gv-count{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);
  font-family:"Space Grotesk";font-weight:600;font-size:13px;color:#cfe0df;white-space:nowrap}
.gv-nav:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---- Rev 4: News & Media ------------------------------------------------- */
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.8vw,32px);
  margin-top:clamp(30px,4vw,44px)}
@media(max-width:900px){.feat3{grid-template-columns:1fr}}
.fs{display:flex;flex-direction:column}
.fs-media{aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:var(--ink);
  display:flex;align-items:center;justify-content:center}
.fs-media img{width:100%;height:100%;object-fit:cover;display:block}
.fs-media--none{background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%)}
.fs-outlet{font-family:"Space Grotesk";font-weight:700;font-size:clamp(20px,2.6vw,28px);
  color:rgba(255,255,255,.5);letter-spacing:-.02em}
.fs-body{padding-top:18px;display:flex;flex-direction:column;flex:1}
.fs-src{font-family:"Space Grotesk";font-weight:700;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink)}
.fs h3{font-size:clamp(20px,2.2vw,25px);margin:9px 0 0;color:var(--ink);letter-spacing:-.02em}
.fs p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:10px 0 0;flex:1}
.fs .btn{align-self:flex-start;margin-top:18px}

.rec-group{font-size:clamp(17px,2vw,21px);color:var(--ink);margin:clamp(30px,3.6vw,42px) 0 0;
  letter-spacing:-.02em}
.rec-note{color:var(--muted);font-size:15px;margin:7px 0 0}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;
  margin-top:18px}
.badge{display:block;background:var(--canvas);border:1px solid var(--line-l);border-radius:4px;
  padding:18px 20px;text-decoration:none;color:inherit;transition:border-color .25s,transform .25s}
a.badge:hover{border-color:var(--accent);transform:translateY(-2px)}
.b-outlet{display:block;font-family:"Space Grotesk";font-weight:700;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink)}
.b-title{display:block;font-family:"Space Grotesk";font-weight:700;font-size:16.5px;
  color:var(--ink);margin-top:8px;letter-spacing:-.015em}
.b-year{display:block;font-size:13px;color:var(--muted);margin-top:5px}

/* ---- Rev 4: Get Involved ------------------------------------------------- */
.ways3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.8vw,32px);
  margin-top:clamp(30px,4vw,44px)}
@media(max-width:900px){.ways3{grid-template-columns:1fr}}
.w3{display:flex;flex-direction:column}
.w3 .ph{aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--canvas-2)}
.w3 .ph img{width:100%;height:100%;object-fit:cover;display:block}
.w3 h3{font-size:clamp(19px,2.1vw,23px);margin:18px 0 0;color:var(--ink);letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px}
.w3-icon{font-size:22px;line-height:1}
.w3 p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:10px 0 0}
.w3-label{font-family:"Space Grotesk";font-weight:700;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin-top:18px}
.w3-list{list-style:none;margin:10px 0 0;padding:0;flex:1}
.w3-list li{position:relative;padding-left:20px;margin-bottom:7px;font-size:15px;color:var(--body)}
.w3-list li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.w3 .btn{align-self:flex-start;margin-top:20px}

.flow3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l);
  border:1px solid var(--line-l);margin-top:clamp(28px,3.6vw,40px)}
@media(max-width:760px){.flow3{grid-template-columns:1fr}}
.fl{background:var(--canvas-2);padding:clamp(22px,2.6vw,30px)}
.fl .num{font-family:"Space Grotesk";font-weight:700;font-size:12px;letter-spacing:.16em;
  color:var(--accent-ink);display:block}
.fl h3{font-size:clamp(17px,1.9vw,20px);margin:10px 0 0;color:var(--ink);letter-spacing:-.015em}
.fl p{color:var(--muted);font-size:15px;line-height:1.6;margin:9px 0 0}

/* ---- Rev 4: Contact ------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,64px);
  align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
/* No min-height: the HubSpot embed sizes its own iframe. A floor here left a gap
   under short forms. If it fails to load, the JS watchdog shows the fallback. */
.hs-form-wrap{margin-top:24px}
.hs-form-wrap iframe{width:100%;border:0;display:block}
.cinfo{margin:22px 0 0}
.cinfo dt{font-family:"Space Grotesk";font-weight:700;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-ink);margin-top:22px}
.cinfo dt:first-of-type{margin-top:0}
.cinfo dd{margin:7px 0 0;font-size:16px;color:var(--body);line-height:1.55}
.cinfo dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-l)}
.cinfo dd a:hover{border-color:var(--accent);color:var(--accent-ink)}
.collage--5{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.collage--5{grid-template-columns:repeat(2,1fr)}}

.hs-fallback{border:1px solid var(--line-l);border-left:4px solid var(--accent);
  padding:20px 22px;border-radius:4px;background:var(--canvas)}
.hs-fallback p{margin:0 0 8px;font-size:15.5px;line-height:1.6}
.hs-fallback p:last-child{margin-bottom:0}

/* ---- Rev 5: structural fixes ============================================== */


/* Item 6: restore original colour. Nothing should be desaturated. */
.collage img,.gc .ph img,.w3 .ph img,.cat-media img,.ch-grid .mile img{filter:none}

/* Items 8,9,15: buttons must be identical everywhere. One row, one baseline, equal
   size, and cards that end with their actions aligned regardless of text length. */
.ev-btns .btn,.w3 .btn,.prog-actions .btn{min-width:150px;justify-content:center}

/* Item 9: event cards are equal-height with dates on one line and buttons aligned. */
.ev{display:flex;flex-direction:column;height:100%}
.ev p{flex:1 1 auto}
.ev-btns{margin-top:auto;padding-top:16px}
.ev4{align-items:stretch}

/* Item 15: same treatment for the Get Involved cards. */
.w3{height:100%}
.w3-list{flex:1 1 auto}
.w3 .btn{margin-top:auto}

/* Rev 5 item 14: recognition cards match the Featured Stories treatment. */
.rcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(16px,2.2vw,24px);margin-top:20px}
.rcard{display:block;text-decoration:none;color:inherit}
.rc-media{display:block;position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%)}
.rc-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
a.rcard:hover .rc-media img{transform:scale(1.05)}
.rc-outlet{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 9px;
  font-family:"Space Grotesk";font-weight:700;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(4,20,23,.85),transparent)}
.rc-title{display:block;font-family:"Space Grotesk";font-weight:700;font-size:17px;
  color:var(--ink);margin-top:13px;letter-spacing:-.015em;line-height:1.25}
.rc-year{display:block;font-size:13px;color:var(--muted);margin-top:5px}
a.rcard:hover .rc-title{color:var(--accent-ink)}

/* Rev 5 items 1 + 2: footer is three blocks and social links are icons. */
.f-grid{grid-template-columns:1.9fr .9fr 1.4fr}
@media(max-width:980px){.f-grid{grid-template-columns:1.4fr 1fr}.f-grid .about{grid-column:1/-1}}
@media(max-width:600px){.f-grid{grid-template-columns:1fr}}
.social-icons{display:flex;gap:12px;margin-top:4px}
.social-icons a{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  color:#cfe0df;transition:border-color .25s,color .25s,background .25s}
.social-icons a:hover{border-color:var(--accent);color:#fff;background:var(--accent)}
.social-icons a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---- Head cropping: the actual fix ======================================
   Measured 2026-09-01: portrait photographs (ratio 0.75) inside a 4:3 box lose
   44-50% of their height. Half the picture is discarded, so SOME part of every
   person is always cut. No object-position value can solve that, which is why
   four rounds of patching them failed.

   The fix is to stop forcing a crop on photographs of people. These containers
   now honour the image's own shape, so nothing is ever cut off. CSS Grid copes
   with uneven card heights; that is what it is for. ----------------------- */
.ch-grid .mile img,
.w3 .ph img,
.cat-media img{
  aspect-ratio:auto;
  height:auto;
  width:100%;
  object-fit:contain;
  border-radius:4px;
  background:transparent;
}
.w3 .ph{aspect-ratio:auto;height:auto;background:transparent;border-radius:4px}
.ch-grid{align-items:start}
.ways3{align-items:start}
.cat{align-items:center}

/* The collage is a deliberate uniform grid, so tiles must stay the same size.
   There the whole photograph is shown inside the tile instead, on the band's own
   dark ground, so nothing is cropped and the letterboxing reads as intentional. */
.collage img{object-fit:cover;object-position:center 22%;background:var(--ink)}

/* Portrait sources in a portrait box, biased to the upper body where faces are. */
.ld .ph img{object-position:center top}

/* Item 6: nothing on the site is desaturated. */
.collage img,.gc .ph img,.w3 .ph img,.cat-media img,.ch-grid .mile img,.rc-media img{filter:none}

/* Hero bands crop by nature. Bias them upward so faces survive the band. */
/* Page hero bands. Measured 2026-09-01: the About band rendered 7.77:1 and showed
   only 16% of its image, which is why heads were being cut whatever the position.
   Sources are now cropped to banner shape, the band has real height, and the image
   is anchored to the TOP so faces survive any viewport width. */
.phero{background-position:center top !important;min-height:clamp(260px,26vw,380px);
  display:flex;flex-direction:column;justify-content:flex-end}

/* The client wants two things that pull against each other: never crop a head
   (items 3,4,5,7,20,22) AND keep card content aligned (items 9,15). Uncropped
   images have different heights, which misaligns everything below them.

   Both are satisfied by giving the image a FIXED BLOCK of space and showing the
   whole photograph inside it. Nothing is cut, and every card's text starts on the
   same line because every image block is the same height. */
.w3 .ph,
.ch-grid .mile .imgbox,
.cat-media{
  height:clamp(240px,26vw,380px);
  display:flex;align-items:center;justify-content:center;
  background:var(--canvas-2);border-radius:4px;overflow:hidden;
}
.dark .w3 .ph,.catsec.dark .cat-media{background:rgba(255,255,255,.05)}
.w3 .ph img,
.cat-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;border-radius:0;
}
/* Journey cards keep their natural shape: they sit in matched pairs per chapter,
   so uneven heights there read as editorial rather than broken. */
.ch-grid .mile img{width:100%;height:auto;object-fit:contain}

/* Rev 5 follow-up: the collage tiles were being CROPPED IN THE SOURCE FILES
   (generated with -extent, which permanently discarded the top of portrait
   photographs). The files have been regenerated at their true shape. The tiles
   stay a uniform size for the grid, and each whole photograph is shown inside
   its tile on the band's own dark ground. Nothing is cut off. */
.collage figure{background:var(--ink);display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3}
.collage img{width:100%;height:100%;object-fit:cover;object-position:center 22%;background:var(--ink)}
.collage figcaption{background:linear-gradient(0deg,rgba(4,20,23,.92),rgba(4,20,23,.55) 60%,transparent)}

/* Audit 2026-09-01: event cards and gallery covers were still cropping portrait
   sources by 28-50%. Same treatment as everywhere else people appear: a fixed
   block of space, whole photograph shown inside it, nothing cut. */
.ev .ph,.gc .ph{
  height:clamp(200px,20vw,260px);
  display:flex;align-items:center;justify-content:center;
  background:var(--canvas-2);border-radius:4px;overflow:hidden;
}
.gc .ph{background:var(--ink)}
.ev .ph img,.gc .ph img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
}
/* Featured story and recognition thumbnails are broadcast stills, already 16:9,
   so they fill correctly. Guard them anyway. */
.fs-media img,.rc-media img{object-fit:cover;object-position:center 22%;background:var(--ink)}

/* Rev 5 follow-up: WhatsApp channel block. */
.wa{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:760px){.wa{grid-template-columns:1fr;text-align:center}}
.wa-note{margin-top:16px;font-family:"Space Grotesk";font-weight:600;color:var(--accent-ink)}
.wa-qr img{width:100%;max-width:300px;height:auto;display:block;border-radius:8px;
  box-shadow:0 18px 42px -28px rgba(4,20,23,.5)}
@media(max-width:760px){.wa-qr img{margin:0 auto}}
/* Rev 5 item 21: a section head is capped at 560px, so inside a centred
   section the TEXT centred but the BOX still hugged the left edge. */
.sec-head.is-centered{margin-inline:auto;text-align:center}
.sec-head.is-centered h2,.sec-head.is-centered p{margin-inline:auto}

/* Rev 5 tail: "On the hero of Our Programs can you brighten the image, it looks dull."
   The photograph was fine; the standard hero scrim was flattening it. Lighter over the
   image, still dark under the text so the heading keeps its contrast. */
.phero--bright::before{background:linear-gradient(180deg,rgba(5,26,29,.40),rgba(5,26,29,.30) 42%,rgba(5,26,29,.84))}

/* Rev 5 tail (2026-09-02): the client asked for images to fill their frames again ("extend this image so it fits"). Sources are now cropped to frame shape at the file level; the 22% top bias keeps faces in view. */

/* Rev 5 tail (2026-09-02) ------------------------------------------------ */
/* Current page in the overlay menu: a short orange rule, white text, aria-current. */
.ovl-links a{position:relative;padding-left:0;transition:color .2s,transform .25s,padding-left .25s}
.ovl-links a[aria-current="page"]{padding-left:clamp(28px,3vw,44px)}
.ovl-links a[aria-current="page"]::before{content:"";position:absolute;left:0;top:50%;width:clamp(16px,2vw,28px);height:5px;background:var(--accent);border-radius:3px;transform:translateY(-50%)}
.ovl-links a[aria-current="page"]:hover{transform:none}
/* Programs closing band sits directly on the footer, so trim its bottom padding. */
.close-band{padding-bottom:clamp(48px,6vw,72px)}
/* About hero: wider source crop, taller band, both faces stay in view. */
.phero--tall{min-height:clamp(320px,34vw,520px)}
/* Newsletter archive + subscribe. */
.nl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(14px,2vw,22px);margin-top:30px}
.nl-card{display:block;text-decoration:none;color:inherit}
.nl-cover{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:var(--canvas-2);box-shadow:0 14px 30px -18px rgba(0,0,0,.45)}
.nl-cover img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .35s}
.nl-card:hover .nl-cover img{transform:scale(1.04)}
.nl-title{display:block;margin-top:10px;font-family:"Space Grotesk";font-weight:700;font-size:15px}
.nl-link{display:block;font-size:12.5px;color:var(--accent-ink);margin-top:2px}
.nl-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(22px,4vw,48px);align-items:start;margin-top:clamp(34px,4vw,52px);padding-top:clamp(24px,3vw,36px);border-top:1px solid rgba(5,42,49,.12)}
.nl-sub h3{font-family:"Space Grotesk";font-weight:700;font-size:clamp(20px,2.2vw,26px);margin:0 0 8px}
.nl-sub p{margin:0;max-width:44ch}
.hs-form-wrap--compact{margin-top:0}
@media(max-width:820px){.nl-sub{grid-template-columns:1fr}}

/* The contact form section and the WhatsApp section each carried a full .pad
   (150px top and bottom at desktop), stacking to 300px of empty space between the
   end of the form and the next heading. Measured total gap was 375px. Tighten the
   seam between these two only, without touching the global .pad rhythm. */
.pad--seam-b{padding-bottom:clamp(40px,5vw,64px)}
.pad--seam-t{padding-top:clamp(40px,5vw,64px)}