/* ============ Tokens ============ */
:root{
  --ink:#040506;
  --ink-80:#0a0c11;
  --ink-60:#11141b;
  --ink-40:#1a1d27;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --bone:#f5f3ee;
  --mist:#b9bcc7;
  --mist-2:#6f7689;
  --leaf:#A8F341;
  --leaf-deep:#6CB822;
  --leaf-glow:rgba(168,243,65,.35);
  --sun:#f0c25f;
  --coral:#e26a5b;
  --display:'Red Hat Display', system-ui, sans-serif;
  --body:'Manrope', system-ui, sans-serif;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --pad-x:clamp(24px, 5vw, 80px);
  --pad-section:clamp(64px, 11vh, 160px);
}

@media (max-width:560px){
  :root{
    --pad-x:28px;
    --pad-section:72px;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.02em}
::selection{background:var(--leaf);color:var(--ink)}


/* Paw-print trail — a sequence of paws appears walking across a section */
.pawtrail{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.pawtrail svg{
  position:absolute;width:100%;height:100%;
  color:var(--leaf);
}
.pawtrail .paw{
  opacity:0;
  animation:pawWalk 14s linear infinite;
  transform-origin:center;
}
.pawtrail .paw:nth-child(1){animation-delay:0s}
.pawtrail .paw:nth-child(2){animation-delay:.4s}
.pawtrail .paw:nth-child(3){animation-delay:.8s}
.pawtrail .paw:nth-child(4){animation-delay:1.2s}
.pawtrail .paw:nth-child(5){animation-delay:1.6s}
.pawtrail .paw:nth-child(6){animation-delay:2.0s}
.pawtrail .paw:nth-child(7){animation-delay:2.4s}
.pawtrail .paw:nth-child(8){animation-delay:2.8s}
.pawtrail .paw:nth-child(9){animation-delay:3.2s}
.pawtrail .paw:nth-child(10){animation-delay:3.6s}
@keyframes pawWalk{
  0%, 100%{opacity:0}
  5%{opacity:.35;transform:scale(1)}
  25%{opacity:.22}
  60%{opacity:0;transform:scale(.95)}
}
@media (prefers-reduced-motion:reduce){
  .pawtrail .paw{animation:none;opacity:.15}
}

/* Atmospheric parallax — drifting topographic ridges + ambient orbs.
   Apply via .atmos as the first child of any dark section. */
.atmos{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.atmos svg{position:absolute;left:0;top:0;width:200%;height:100%;opacity:.32}
.atmos .topo path{
  fill:none;stroke:rgba(168,243,65,.16);stroke-width:.6;
  animation:topoDrift 60s linear infinite;
}
.atmos .topo path:nth-child(2){stroke:rgba(168,243,65,.10);animation-duration:80s;animation-direction:reverse}
.atmos .topo path:nth-child(3){stroke:rgba(185,255,166,.10);animation-duration:100s}
.atmos .topo path:nth-child(4){stroke:rgba(168,243,65,.13);animation-duration:90s;animation-direction:reverse}
@keyframes topoDrift{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.atmos .orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle, rgba(168,243,65,.34) 0%, rgba(168,243,65,.10) 35%, transparent 65%);
  filter:blur(40px);
  animation:orbDrift 22s ease-in-out infinite alternate, orbBreathe 7s ease-in-out infinite;
}
.atmos .orb-1{width:560px;height:560px;top:-100px;left:-120px;animation-delay:0s}
.atmos .orb-2{width:420px;height:420px;bottom:-80px;right:-100px;animation-duration:28s;background:radial-gradient(circle, rgba(42,122,59,.36) 0%, rgba(42,122,59,.10) 35%, transparent 65%)}
.atmos .orb-3{width:320px;height:320px;top:35%;left:55%;animation-duration:36s;background:radial-gradient(circle, rgba(185,255,166,.22) 0%, transparent 60%)}
@keyframes orbBreathe{
  0%,100%{opacity:.85}
  50%    {opacity:1}
}
@keyframes orbDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(60px,40px) scale(1.10)}
  100%{transform:translate(-50px,-30px) scale(.92)}
}
@media (prefers-reduced-motion:reduce){
  .atmos svg, .atmos .orb{animation:none !important}
}

/* ===========================================================
   CARD-LIFT effect — sections that follow a full-screen video
   sit raised above it with rounded top corners and a strong
   visible shadow + hairline highlight, so they read as a card
   being lifted up over the footage as you scroll. Plus a
   scroll-into-view transform for diversity in the scroll journey.
   =========================================================== */
.section-lift{
  position:relative;z-index:2;
  margin-top:-32px;
  border-radius:40px 40px 0 0;
  /* Single hairline highlight at the top edge — no heavy shadow */
  box-shadow:0 -1px 0 rgba(255,255,255,.06);
  /* Pre-state for scroll-reveal */
  transform:translateY(32px) scale(.995);
  transform-origin:50% 0;
  opacity:.95;
  transition:transform .8s cubic-bezier(.22,.9,.3,1),
             opacity .8s cubic-bezier(.22,.9,.3,1);
}
.section-lift.is-revealed{
  transform:translateY(0) scale(1);
  opacity:1;
}
/* Sections that follow a video get a slightly bigger lift signature */
.section-lift.lifts-strong{
  margin-top:-48px;
  border-radius:56px 56px 0 0;
  box-shadow:
    0 -8px 24px -4px rgba(0,0,0,.30),
    0 -1px 0 rgba(255,255,255,.08);
}
@media (max-width:720px){
  .section-lift{margin-top:-24px;border-radius:24px 24px 0 0}
  .section-lift.lifts-strong{margin-top:-32px;border-radius:32px 32px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .section-lift{transform:none;opacity:1;transition:none}
}

/* Extra bottom padding on video sections so their content (chips,
   buttons, captions) sits well above the lift overlap from the
   section below. */
.hp-promise{padding-bottom:calc(var(--pad-section) + 64px)}
.founder-quote{padding-bottom:calc(var(--pad-section) + 64px)}
.watch-change{padding-bottom:calc(var(--pad-section) + 64px)}

/* ===========================================================
   WATCH THE CHANGE YOU MAKE — full-bleed video section showing
   the audience (families, classrooms, lounges, field stations).
   =========================================================== */
.watch-change{
  position:relative;height:100vh;
  padding:var(--pad-section) 0;
  background:#000;text-align:center;color:var(--bone);
  overflow:hidden;isolation:isolate;
  display:grid;place-items:center;
}
.watch-change .wc-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(1.15) contrast(1.05);
}
.watch-change .wc-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 50%, rgba(2,7,24,.25) 0%, rgba(2,7,24,.12) 50%, rgba(2,7,24,0) 80%),
    linear-gradient(180deg, rgba(2,7,24,.2) 0%, transparent 18%, transparent 82%, rgba(2,7,24,.22) 100%),
    radial-gradient(28% 22% at 14% 22%, rgba(168,243,65,.05), transparent 70%),
    radial-gradient(28% 22% at 86% 78%, rgba(42,122,59,.06), transparent 70%);
}
.watch-change .wrap{
  position:relative;z-index:2;
  display:grid;gap:clamp(18px,2.4vw,28px);
  justify-items:center;text-align:center;
}
.watch-change .eyebrow{margin:0 auto}
.watch-change .wc-headline{
  font-family:var(--display);font-weight:900;
  font-size:clamp(56px,9vw,140px);
  line-height:.92;letter-spacing:-.04em;
  max-width:16ch;margin:0 auto;color:var(--bone);
}
.watch-change .wc-headline em{
  font-style:italic;font-weight:500;
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
}
.watch-change .wc-supporting{
  max-width:58ch;margin:0 auto;
  font-size:clamp(15px,1.4vw,19px);line-height:1.55;color:var(--bone);opacity:.95;
}
.watch-change .wc-actions{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:14px;
}
@media (max-width:720px){
  .watch-change .wc-headline{font-size:clamp(44px,11vw,68px);max-width:14ch}
}

/* ===========================================================
   PIN-STACK — wraps a full-screen video section with the
   content section that follows it. The video sticks to the
   top of the viewport while the next section scrolls up over
   it like a card being lifted into place.
   =========================================================== */
.pin-stack{position:relative}
.pin-stack > .is-pinned-bg{
  position:sticky;top:0;z-index:1;
  /* Keep the existing 100vh height — sticky honours it */
}
.pin-stack > .section-lift{
  /* Disable the static negative-margin overlap inside a pin-stack —
     the sticky parent already provides the visual overlap as the
     user scrolls past the video. */
  margin-top:0 !important;
  position:relative;z-index:2;
}
@media (prefers-reduced-motion:reduce){
  .pin-stack > .is-pinned-bg{position:relative}
}

/* Section-level z-index plumbing so .atmos and .bg-cartograph sit
   strictly behind every text / card / video layer. Each section is
   its own stacking context (isolation:isolate) so the cartograph
   can never bleed into an adjacent section.
   .biomes is intentionally excluded from overflow:hidden because it
   houses a position:sticky pin — overflow on a sticky parent breaks
   the stick behavior and produces a tall black gap. */
.proof, .watch-section, .promise, .biomes, .anchor, .convert, .hp-promise{position:relative;isolation:isolate}
.anchor, .promise, .convert, .hp-promise{overflow:hidden}

/* ===========================================================
   100% PROMISE section — full-bleed video, big "100%" number,
   trust statement headline, supporting copy, verification chips.
   =========================================================== */
.hp-promise{
  position:relative;height:100vh;
  padding:var(--pad-section) 0;
  background:#000;
  text-align:center;
  color:var(--bone);
  overflow:hidden;isolation:isolate;
  display:grid;place-items:center;
}
.hp-promise .hp-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;
  filter:saturate(1.18) contrast(1.06);
}
.hp-promise .hp-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* Centred dark "stage" — pools dark behind the text in the middle
       of the section, fades to transparent at the corners so the video
       shows full colour at the edges. Replaces the heavy global scrim. */
    radial-gradient(70% 55% at 50% 50%, rgba(2,7,24,.25) 0%, rgba(2,7,24,.12) 50%, rgba(2,7,24,0) 80%),
    /* Subtle ink edge framing so the section reads as bounded */
    linear-gradient(180deg, rgba(2,7,24,.22) 0%, transparent 18%, transparent 82%, rgba(2,7,24,.22) 100%),
    /* Two on-brand green ambient hints, low opacity, off-centre */
    radial-gradient(28% 22% at 12% 22%, rgba(168,243,65,.05), transparent 70%),
    radial-gradient(28% 22% at 88% 78%, rgba(42,122,59,.06), transparent 70%);
}
.hp-promise .wrap{
  position:relative;z-index:2;
  display:grid;gap:clamp(16px,2vw,28px);
  justify-items:center;align-items:center;
  text-align:center;
}
.hp-promise .eyebrow{margin:0 auto 8px}
.hp-promise .hp-pct{
  font-family:var(--display);font-weight:900;
  font-size:clamp(96px,15vw,210px);
  line-height:.9;letter-spacing:-.04em;
  color:var(--bone);
  text-shadow:0 0 80px rgba(168,243,65,.25);
  display:flex;align-items:baseline;justify-content:center;gap:8px;
  margin:0;
}
.hp-promise .hp-pct em{
  font-style:italic;font-weight:500;
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
}
.hp-promise .hp-headline{
  font-family:var(--display);font-weight:900;
  font-size:clamp(28px,3.8vw,52px);
  line-height:1.1;letter-spacing:-.025em;
  max-width:26ch;margin:0 auto;
  color:var(--bone);
  text-shadow:none;
}
.hp-promise .hp-headline em{
  font-style:italic;font-weight:500;
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
}
.hp-promise .hp-supporting{
  max-width:62ch;margin:0 auto;
  font-size:clamp(15px,1.3vw,18px);line-height:1.55;
  color:var(--bone);
  opacity:.92;
  text-shadow:none;
}
.hp-promise .hp-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px;
}
.hp-promise .hp-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:4px;
  background:rgba(2,7,24,.55);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.30);
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.06em;color:var(--bone);
}
.hp-promise .hp-tick{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--leaf);color:var(--ink);
  font-size:10px;font-weight:900;
  box-shadow:0 0 8px var(--leaf-glow);
}
@media (max-width:720px){
  .hp-promise .hp-pct{font-size:clamp(64px,16vw,128px)}
  .hp-promise .hp-headline{font-size:clamp(22px,5.5vw,30px);max-width:20ch}
  .hp-promise .hp-chips{gap:6px}
  .hp-promise .hp-chip{font-size:10px;padding:7px 12px}
}
.proof > .wrap, .watch-section > .wrap, .promise > .wrap{position:relative;z-index:2}
.anchor > .wrap, .convert > .reveal-stagger, .convert > .pawtrail{position:relative;z-index:2}

/* ===========================================================
   Cartographic background illustration
   Elegant explorer-style line art used as depth-of-field on the
   plain-background sections (anchor, promise, convert). Sits
   strictly behind every text and content layer, never crosses
   section bounds (overflow + clip-path safety), and parallaxes
   subtly on scroll via --scroll-y.
   =========================================================== */
.bg-cartograph{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;             /* behind everything in the section */
  overflow:hidden;
  clip-path:inset(0);                        /* hard clip so parallax can't bleed */
  opacity:1;
}
.bg-cartograph svg{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:hidden;                           /* SVG content also clipped */
  /* Parallax lives on the SVG, contained by the overflow-hidden wrapper */
  transform:translateY(calc(var(--scroll-y, 0) * -0.06px));
  will-change:transform;
}
.bg-cartograph .bg-lat{
  stroke:rgba(168,243,65,.18);stroke-width:.6;
  stroke-dasharray:3 14;fill:none;
}
.bg-cartograph .bg-trail{
  stroke:rgba(168,243,65,.45);stroke-width:1.2;
  stroke-linecap:round;fill:none;
  /* Stroke-draw entrance — site.js measures the path length and
     sets --tl (total length) inline so this animation can run with
     a real value rather than a guess. */
  transition:stroke-dashoffset 2.2s cubic-bezier(.22,.9,.3,1);
}
.bg-cartograph .bg-trail.tr-pending{
  stroke-dasharray:var(--tl, 2000);
  stroke-dashoffset:var(--tl, 2000);
}
.bg-cartograph .bg-trail.tr-drawn{
  stroke-dashoffset:0;
}
.bg-cartograph .bg-trail-soft{
  stroke:rgba(168,243,65,.30);stroke-width:.8;
  stroke-dasharray:2 9;stroke-linecap:round;fill:none;
}
@media (prefers-reduced-motion:reduce){
  .bg-cartograph .bg-trail{ transition:none }
  .bg-cartograph .bg-trail.tr-pending{ stroke-dasharray:none;stroke-dashoffset:0 }
}
.bg-cartograph .bg-compass{
  fill:none;
}
.bg-cartograph .bg-compass .bg-compass-ring{
  stroke:rgba(168,243,65,.34);stroke-width:.8;
}
.bg-cartograph .bg-compass .bg-compass-tick{
  stroke:rgba(168,243,65,.26);stroke-width:.55;
}
.bg-cartograph .bg-compass .bg-compass-arrow{
  fill:rgba(168,243,65,.26);
  stroke:rgba(168,243,65,.55);stroke-width:.65;
  stroke-linejoin:round;
}
.bg-cartograph .bg-compass-label{
  fill:rgba(168,243,65,.75);stroke:none;
  font-family:'Red Hat Display',system-ui,sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.12em;
}
.bg-cartograph .bg-track{
  fill:rgba(168,243,65,.60);
  stroke:rgba(168,243,65,.45);stroke-width:.45;
}
.bg-cartograph .bg-coord-text{
  fill:rgba(168,243,65,.65);stroke:none;
  font-family:'Red Hat Display',system-ui,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;
}
.bg-cartograph .bg-marker{
  fill:none;stroke:rgba(168,243,65,.55);stroke-width:.7;
}
.bg-cartograph .bg-marker .bg-marker-dot{
  fill:rgba(168,243,65,.75);stroke:none;
}
/* Mirrored composition for variety in adjacent sections */
.bg-cartograph.is-mirror svg{transform:scaleX(-1)}
.bg-cartograph.is-mirror .bg-compass-label{transform:scaleX(-1);transform-origin:center}
@media (max-width:720px){
  .bg-cartograph{opacity:.55}
  .bg-cartograph .bg-compass-label, .bg-cartograph .bg-coord-text{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bg-cartograph{transform:none}
}


/* Ambient mouse-follow green glow (background atmosphere) */
.ambient-glow{
  position:fixed;top:50%;left:50%;
  width:820px;height:820px;
  pointer-events:none;z-index:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(168,243,65,.30) 0%, rgba(168,243,65,.14) 30%, rgba(168,243,65,.06) 55%, transparent 70%);
  filter:blur(50px);
  transform:translate(-50%, -50%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity 1.2s;
  will-change:transform, filter;
  animation:glowBreathe 7s ease-in-out infinite alternate;
}
.ambient-glow.is-on{opacity:1}
@keyframes glowBreathe{
  0%{filter:blur(50px) saturate(1);transform:translate(-50%,-50%) scale(1)}
  50%{filter:blur(60px) saturate(1.2);transform:translate(-50%,-50%) scale(1.12)}
  100%{filter:blur(48px) saturate(1.05);transform:translate(-50%,-50%) scale(.96)}
}
/* On mobile or reduced-motion: auto-drift the glow gently instead of mouse-follow */
@media (max-width:880px){
  .ambient-glow{
    width:520px;height:520px;
    opacity:.85;
    animation:glowDrift 18s ease-in-out infinite alternate, glowBreathe 7s ease-in-out infinite alternate;
  }
}
@keyframes glowDrift{
  0%{top:30%;left:25%}
  50%{top:60%;left:75%}
  100%{top:45%;left:20%}
}
@media (prefers-reduced-motion:reduce){
  .ambient-glow{animation:none;opacity:.5}
}

/* Skip to content (keyboard / screen reader users) */
.skip-link{
  position:absolute;left:12px;top:-100px;z-index:100;
  background:var(--leaf);color:var(--ink);padding:12px 18px;border-radius:999px;
  font-weight:700;font-size:14px;
  transition:top .25s;
}
.skip-link:focus{top:12px;outline:2px solid var(--bone);outline-offset:3px}

/* ============ Layout helpers ============ */
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad-x);position:relative}
.wrap-narrow{max-width:980px;margin:0 auto;padding:0 var(--pad-x)}
.section{padding:var(--pad-section) 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--body);font-size:15px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mist);font-weight:500;
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:0 0 8px;
  background:var(--leaf);box-shadow:0 0 0 0 var(--leaf-glow);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(168,243,65,.45)}
  70%{box-shadow:0 0 0 14px rgba(168,243,65,0)}
  100%{box-shadow:0 0 0 0 rgba(168,243,65,0)}
}

/* ============ Buttons (refined, type-led) ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  border-radius:4px;
  font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.02em;
  text-transform:none;
  transition:background .2s, color .2s, box-shadow .25s;
  position:relative;
}
.btn-primary{
  background:var(--leaf);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.btn-primary:hover{
  background:#B9F764;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 1px rgba(168,243,65,.25);
}
.btn-ghost{
  background:transparent;
  color:var(--bone);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}
.btn .arrow{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.1,1);font-size:1.05em;line-height:1}
.btn:hover .arrow{transform:translateX(4px)}

/* Compact / quiet variant — for in-flow links acting as buttons */
.btn-quiet{
  padding:0;background:none;box-shadow:none;color:var(--bone);
  font-weight:600;font-size:14px;letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.2);
  border-radius:0;
  padding-bottom:4px;
}
.btn-quiet:hover{color:var(--leaf);border-bottom-color:var(--leaf)}

/* Compact header button (sat tighter inside the bar) */
.header-cta .btn{padding:10px 16px;font-size:13px}

/* ============ Header / Nav ============ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad-x);
  transition:background .35s, backdrop-filter .35s, padding .35s, border-color .35s;
  background:rgba(2,7,24,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.header.scrolled{
  background:rgba(2,7,24,.82);
  border-bottom-color:var(--line);
  padding:12px var(--pad-x);
}
.brand{
  font-family:var(--display);font-weight:900;font-size:22px;
  letter-spacing:-.02em;display:flex;align-items:center;gap:10px;color:var(--bone);
}
.brand-mark{
  width:26px;height:26px;border-radius:6px;position:relative;
  background:radial-gradient(60% 60% at 30% 30%, var(--leaf), var(--leaf-deep));
  box-shadow:0 6px 18px -6px var(--leaf-glow);
}
.brand-mark::after{
  content:"";position:absolute;inset:0;border-radius:6px;
  background:radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.7), transparent 60%);
}
.nav{display:none;gap:30px;align-items:center;position:relative}
.nav a{font-size:14px;color:var(--mist);transition:color .2s}
.nav a:hover{color:var(--bone)}
.nav a[aria-current="page"]{color:var(--leaf)}

/* === Dropdown nav (enhanced via JS) =========================
   The flat <nav class="nav"> markup in every page is a no-JS
   fallback. site.js replaces it with grouped dropdowns and adds
   the .nav-enhanced class. Styling below only kicks in once
   enhancement has happened, so legacy links remain unstyled-as-
   before for crawlers and no-JS users. */
.nav-enhanced{ gap:8px }
.nav-group{ position:relative;display:inline-flex }
.nav-trigger{
  appearance:none;border:0;background:none;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:600;
  color:var(--mist);padding:8px 14px;border-radius:99px;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .2s, background .2s;
  letter-spacing:0;
}
.nav-trigger .nav-chev{
  font-size:10px;color:var(--mist-2);
  transition:transform .25s ease, color .2s;
  display:inline-block;line-height:1;margin-top:1px;
}
.nav-trigger:hover{ color:var(--bone);background:rgba(255,255,255,.04) }
.nav-trigger:hover .nav-chev{ color:var(--leaf) }
.nav-trigger:focus-visible{
  outline:2px solid var(--leaf);outline-offset:2px;color:var(--bone);
}
.nav-group.is-open .nav-trigger{
  color:var(--bone);background:rgba(168,243,65,.08);
}
.nav-group.is-open .nav-trigger .nav-chev{
  transform:rotate(180deg);color:var(--leaf);
}
.nav-trigger.is-active-section{ color:var(--leaf) }
.nav-trigger.is-active-section .nav-chev{ color:var(--leaf) }

.nav-menu{
  position:absolute;top:calc(100% + 12px);left:0;z-index:50;
  min-width:240px;
  padding:10px 8px;border-radius:14px;
  background:rgba(7,13,35,.94);
  border:1px solid rgba(168,243,65,.22);
  box-shadow:0 24px 60px -16px rgba(0,0,0,.65),
             0 8px 20px -6px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;gap:2px;
  /* Tiny leaf glow on the top edge so it reads as cinematic */
  position:absolute;
}
.nav-menu::before{
  content:"";position:absolute;left:18px;right:18px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,243,65,.6),transparent);
}
.nav-menu[hidden]{ display:none }
.nav-menu a{
  display:flex;align-items:center;padding:9px 14px;
  border-radius:9px;font-size:13.5px;color:var(--bone);
  letter-spacing:-.002em;text-decoration:none;
  transition:background .15s, color .15s;
}
.nav-menu a:hover,
.nav-menu a:focus-visible{
  background:rgba(168,243,65,.10);color:var(--leaf);outline:0;
}
.nav-menu a[aria-current="page"]{
  background:rgba(168,243,65,.14);color:var(--leaf);
}
.nav-menu a[aria-current="page"]::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--leaf);box-shadow:0 0 6px var(--leaf-glow);
  margin-right:8px;flex:0 0 5px;
}
/* Right-edge groups (last 1-2) should align the menu to the right
   so it never spills off screen. */
.nav-group:nth-last-of-type(-n+2) .nav-menu{ left:auto;right:0 }
@media (max-width:1180px){
  .nav-enhanced{ gap:4px }
  .nav-trigger{ padding:8px 10px }
}
.header-cta{display:flex;gap:12px;align-items:center}
.header-cta .btn-ghost{display:none}

/* Small "NGO sign-in ↗" utility link injected by site.js into
   every page's header-cta cluster. Discreet, muted text by
   default; leaf on hover. Sits to the left of the Channel and
   Support buttons so partner NGOs can find it without it
   dominating the header. Hidden under 980px — the drawer
   picks it up there. */
.header-cta .header-ngo-link{
  display:none;align-items:center;gap:6px;
  font-family:var(--display);font-weight:700;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mist-2);text-decoration:none;
  padding:8px 14px;border-radius:99px;
  border:1px solid transparent;
  transition:color .2s ease, border-color .2s ease, background .25s ease, transform .2s ease;
}
.header-cta .header-ngo-link .hnl-arr{
  display:inline-block;font-size:11px;color:var(--leaf);
  transition:transform .25s cubic-bezier(.22,.9,.3,1);
}
.header-cta .header-ngo-link:hover,
.header-cta .header-ngo-link:focus-visible{
  color:var(--bone);
  border-color:rgba(168,243,65,.32);
  background:rgba(168,243,65,.06);
  outline:0;
}
.header-cta .header-ngo-link:hover .hnl-arr,
.header-cta .header-ngo-link:focus-visible .hnl-arr{
  transform:translate(2px,-2px);
}
@media (min-width:980px){
  .header-cta .header-ngo-link{display:inline-flex}
}

/* Drawer entry — sits at the bottom of the mobile drawer so
   touch users can also reach the portal. */
.drawer .drawer-ngo-link{
  margin-top:28px;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid rgba(168,243,65,.28);
  border-radius:14px;
  background:rgba(168,243,65,.06);
  font-family:var(--display);font-weight:800;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.drawer .drawer-ngo-link:hover,
.drawer .drawer-ngo-link:focus-visible{
  background:rgba(168,243,65,.14);
  border-color:var(--leaf);
  transform:translateY(-1px);
  outline:0;
}
.drawer .drawer-ngo-link span:last-child{color:var(--leaf);font-size:14px}
.menu-btn{display:flex;gap:5px;flex-direction:column;width:30px;padding:6px}
.menu-btn span{height:1.5px;background:var(--bone);border-radius:2px;transition:.25s}
.menu-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (min-width:1024px){
  .nav{display:flex}
  .header-cta .btn-ghost{display:inline-flex}
  .menu-btn{display:none}
}
@media (max-width:560px){
  .header-cta .btn{padding:8px 14px;font-size:12px}
  .brand img{height:28px !important}
}
.drawer{
  position:fixed;inset:0;background:var(--ink);z-index:40;
  padding:90px var(--pad-x) 40px;
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.7,0,.2,1);
  overflow-y:auto;
}
.drawer.open{transform:translateY(0)}
.drawer::before{
  content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 30% at 25% 25%, rgba(168,243,65,.08), transparent 65%),
    radial-gradient(40% 30% at 75% 75%, rgba(42,122,59,.10), transparent 65%);
  filter:blur(60px);
}
.drawer-eyebrow{
  font-family:var(--body);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mist);font-weight:600;
  display:block;margin-bottom:24px;
  opacity:0;transform:translateX(-12px);transition:opacity .4s, transform .4s;transition-delay:.05s;
}
.drawer.open .drawer-eyebrow{opacity:1;transform:translateX(0)}
.drawer-nav{display:flex;flex-direction:column;gap:0}
.drawer-nav a{
  display:flex;align-items:center;gap:18px;
  font-family:var(--display);font-size:clamp(20px,5vw,26px);font-weight:700;
  padding:18px 0;border-bottom:1px solid var(--line);
  letter-spacing:-.015em;line-height:1.05;color:var(--bone);
  opacity:0;transform:translateX(-20px);
  transition:opacity .5s, transform .5s cubic-bezier(.7,0,.2,1), color .25s, padding-left .25s;
}
.drawer.open .drawer-nav a{opacity:1;transform:translateX(0)}
.drawer.open .drawer-nav a:nth-child(1){transition-delay:.08s}
.drawer.open .drawer-nav a:nth-child(2){transition-delay:.14s}
.drawer.open .drawer-nav a:nth-child(3){transition-delay:.20s}
.drawer.open .drawer-nav a:nth-child(4){transition-delay:.26s}
.drawer.open .drawer-nav a:nth-child(5){transition-delay:.32s}
.drawer.open .drawer-nav a:nth-child(6){transition-delay:.38s}
.drawer.open .drawer-nav a:nth-child(7){transition-delay:.44s}
.drawer-nav a:hover, .drawer-nav a:focus-visible{color:var(--leaf);padding-left:8px}
.drawer-nav a:last-of-type{border-bottom:0}
.drawer-icon{
  width:32px;height:32px;color:var(--leaf);flex:0 0 32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:rgba(168,243,65,.06);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.2);
  transition:background .25s, box-shadow .25s;
}
.drawer-nav a:hover .drawer-icon{background:rgba(168,243,65,.14);box-shadow:inset 0 0 0 1px rgba(168,243,65,.45)}
.drawer-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.drawer-arrow{margin-left:auto;font-size:18px;color:var(--mist-2);transition:color .25s, transform .25s}
.drawer-nav a:hover .drawer-arrow{color:var(--leaf);transform:translateX(3px)}
.drawer .btn{
  margin-top:32px;width:100%;justify-content:center;font-size:14px;padding:18px 22px;
  opacity:0;transform:translateY(12px);transition:opacity .5s .55s, transform .5s .55s;
}
.drawer.open .btn{opacity:1;transform:translateY(0)}
.drawer-footer{
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--body);font-size:12px;color:var(--mist-2);
  letter-spacing:.02em;display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(8px);transition:opacity .5s .65s, transform .5s .65s;
}
.drawer.open .drawer-footer{opacity:1;transform:translateY(0)}
.drawer-footer .dot{width:6px;height:6px;border-radius:50%;background:var(--leaf);box-shadow:0 0 6px var(--leaf-glow)}

/* =================================================
   STAGE 1 — LAND: Cinematic full-bleed hero
   ================================================= */
.hero-stage{
  position:relative;height:100vh;background:var(--ink);
}
.hero-pin{
  position:relative;height:100vh;width:100%;
  display:grid;place-items:end stretch;overflow:hidden;background:#000;
}
.hero-frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  border-radius:0;
  overflow:hidden;background:#000;
}
@media (min-width:1024px){
  /* Subtle inset only on desktop, becomes full-bleed as you scroll */
  .hero-frame{
    inset:var(--frame-inset,0);
    border-radius:var(--frame-r,0px);
  }
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:slowZoom 30s ease-in-out infinite alternate;
  will-change:transform;
}

/* Hero nature carousel — fast cinematic crossfade */
.hero-carousel{position:absolute;inset:0;z-index:1;overflow:hidden;background:#000}
.hero-carousel::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  /* Softer base overlay + gentle vignette so text reads without darkening the video */
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 35%, rgba(0,0,0,.07) 100%),
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.05) 60%, rgba(2,7,24,.14) 100%);
}
.hero-carousel .hcv{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  transform:scale(1.18);
  transition:opacity 1.1s cubic-bezier(.7,0,.2,1), transform 5s linear;
  will-change:opacity, transform;
  filter:saturate(1.08) contrast(1.08) brightness(.98);
}
.hero-carousel .hcv.is-active{
  opacity:1;
  transform:scale(1.04);
  animation:heroPan 6s ease-in-out forwards;
}
@keyframes heroPan{
  0%{transform:scale(1.18) translate(0,0)}
  100%{transform:scale(1.04) translate(-1.5%, -1%)}
}
.hero-carousel-progress{
  position:absolute;bottom:clamp(20px,3vh,40px);left:50%;transform:translateX(-50%);z-index:5;
  display:flex;gap:10px;
}
.hero-carousel-progress span{
  width:32px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.25);
  position:relative;overflow:hidden;
  transition:background .3s;
}
.hero-carousel-progress span.is-active{background:rgba(255,255,255,.18)}
.hero-carousel-progress span.is-active::after{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:100%;background:var(--leaf);
  transform-origin:left center;transform:scaleX(0);
  animation:carouselFill 3s linear forwards;
  box-shadow:0 0 6px var(--leaf-glow);
}
@keyframes carouselFill{
  to{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .hero-carousel .hcv{transition:none}
  .hero-carousel .hcv.is-active{animation:none}
  .hero-carousel-progress span.is-active::after{animation:none;transform:scaleX(1)}
}

.hero-img-fallback{
  position:absolute;inset:0;
  background:url('https://www.saveelephant.org/wp-content/uploads/2025/08/Lek_with_FaaMaiHerd.jpg') center/cover no-repeat;
  filter:saturate(.92) contrast(1.08);
  animation:slowZoom 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes slowZoom{
  0%{transform:scale(1.04) translate(0,0)}
  100%{transform:scale(1.14) translate(-1.5%,-1%)}
}
.hero-overlay{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 55%, rgba(2,7,24,.37) 100%),
    radial-gradient(70% 90% at 50% 45%, rgba(0,0,0,0) 0%, rgba(2,7,24,.22) 100%),
    radial-gradient(50% 60% at 80% 90%, rgba(168,243,65,.04), transparent 60%);
}
.hero-grain{z-index:2}
.hero-card-copy{z-index:3}
.hero-stats{z-index:3}
.hero-fullscreen-copy{z-index:4}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
}
.hero-card-copy{
  position:absolute;
  left:50%;top:40%;
  transform:translate(-50%, -50%);
  width:calc(100% - clamp(48px, 10vw, 160px));
  max-width:1080px;
  z-index:3;color:var(--bone);
  opacity:var(--card-copy-op,1);transition:opacity .3s;
  display:grid;gap:clamp(18px,2.4vw,28px);
  text-align:center;
  justify-items:center;
}
@media (max-width:880px){
  .hero-card-copy{
    top:42%;
    width:calc(100% - 48px);
    gap:14px;
  }
  .hero-card-copy h1{font-size:clamp(38px,9vw,60px);max-width:16ch}
  .hero-card-copy p{font-size:14px;max-width:42ch}
  .hero-actions{margin-top:4px}
}
.hero-card-copy .eyebrow{margin-bottom:0}
.hero-card-copy h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(48px,8vw,128px);
  line-height:.9;letter-spacing:-.045em;
  max-width:18ch;margin:0 auto;
  text-shadow:none;
}
.hero-card-copy h1 em{font-style:italic;font-weight:500;color:var(--leaf);font-family:var(--display)}
.hero-card-copy p{
  max-width:54ch;color:var(--bone);
  font-size:clamp(15px,1.4vw,19px);line-height:1.55;
  text-shadow:none;
  margin:0 auto;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:6px}
@media (max-width:560px){
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1 1 auto;justify-content:center;min-width:140px}
}

.hero-fullscreen-copy{
  position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--pad-x);
  z-index:4;pointer-events:none;text-align:center;
  opacity:var(--fs-op,0);transform:translateY(var(--fs-y,20px));
  transition:opacity .35s, transform .35s;
}
.hero-fullscreen-copy > div{pointer-events:auto;max-width:1080px}
.hero-fullscreen-copy h2{
  font-family:var(--display);font-weight:900;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(56px,12vw,200px);
}
.hero-fullscreen-copy h2 em{
  font-style:italic;font-weight:500;
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
}
@keyframes shine{0%{background-position:0 0}100%{background-position:200% 0}}
.hero-fullscreen-copy p{
  margin-top:28px;color:var(--bone);font-size:clamp(15px,1.4vw,20px);max-width:48ch;margin-left:auto;margin-right:auto;
  text-shadow:none;
  line-height:1.5;
}

/* Hero stats eyebrow — "What we've done so far" label above the strip.
   Squared 4px corners to match the rest of the site. */
.hero-stats-eyebrow{
  position:absolute;left:50%;
  bottom:calc(clamp(36px,4.5vh,64px) + 250px);
  transform:translateX(-50%);
  z-index:3;
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 28px;border-radius:4px;
  background:rgba(2,7,24,.75);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.55),
             0 18px 50px -16px rgba(168,243,65,.45),
             0 0 36px rgba(168,243,65,.15);
  font-family:var(--display);font-weight:800;font-size:14px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--bone);
  white-space:nowrap;
  opacity:0;
  animation:hseIn .9s cubic-bezier(.22,.9,.3,1) .15s forwards;
}
.hero-stats-eyebrow .hse-dot{
  width:10px;height:10px;border-radius:50%;background:var(--leaf);
  box-shadow:0 0 10px var(--leaf-glow), 0 0 24px rgba(168,243,65,.55);
  animation:hseDot 1.6s ease-in-out infinite;
  flex:0 0 auto;
}
.hero-stats-eyebrow .hse-text{position:relative;color:var(--leaf)}
@keyframes hseIn{
  from{opacity:0;transform:translate(-50%,16px)}
  to  {opacity:1;transform:translate(-50%,0)}
}
@keyframes hseDot{
  0%,100%{opacity:.5;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.2)}
}
@media (max-width:880px){
  .hero-stats-eyebrow{font-size:11px;letter-spacing:.22em;padding:10px 18px;bottom:calc(clamp(28px,4vh,52px) + 340px)}
  .hero-stats-eyebrow .hse-dot{width:8px;height:8px}
}
@media (prefers-reduced-motion:reduce){
  .hero-stats-eyebrow{animation:none;opacity:1;transform:translateX(-50%)}
  .hero-stats-eyebrow .hse-dot{animation:none}
}

/* Hero stats overlay — 4 across the bottom of the hero, sits clear of the
   headline / buttons stack above. On narrow screens drops to 2x2. */
.hero-stats{
  position:absolute;
  left:50%;
  bottom:clamp(36px,4.5vh,64px);
  transform:translateX(-50%);
  width:calc(100% - clamp(96px, 16vw, 260px));
  max-width:1080px;
  z-index:3;color:var(--bone);
  display:grid;grid-template-columns:repeat(4, 1fr);gap:12px;
  opacity:var(--card-copy-op,1);transition:opacity .3s;
}
.hstat{
  padding:20px 22px 22px;border-radius:8px;
  background:rgba(2,7,24,.52);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  display:grid;grid-template-columns:36px 1fr;gap:6px 14px;align-items:start;
  /* Staggered entrance — each card rises and fades in on load */
  opacity:0;transform:translateY(20px) scale(.96);
  animation:hstatIn .9s cubic-bezier(.22,.9,.3,1) forwards;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.hstat:nth-child(1){animation-delay:.25s}
.hstat:nth-child(2){animation-delay:.40s}
.hstat:nth-child(3){animation-delay:.55s}
.hstat:nth-child(4){animation-delay:.70s}
@keyframes hstatIn{
  0%   {opacity:0; transform:translateY(20px) scale(.96)}
  100% {opacity:1; transform:translateY(0) scale(1)}
}
.hstat:hover{
  transform:translateY(-4px) scale(1);
  background:rgba(2,7,24,.62);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.35), 0 16px 40px -16px rgba(168,243,65,.45);
}
@media (prefers-reduced-motion:reduce){
  .hstat{animation:none;opacity:1;transform:none}
}
.hstat .hicon{
  grid-row:1 / span 3;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--leaf);
  background:rgba(168,243,65,.10);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.30);
  position:relative;
  margin-top:6px;
}
.hstat .hicon svg{width:22px;height:22px;filter:drop-shadow(0 2px 6px rgba(168,243,65,.35))}
.hstat .hicon::after{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(168,243,65,.4);
  animation:iconPulse 2.8s ease-out infinite;
}
.hstat:nth-child(2) .hicon::after{animation-delay:.5s}
.hstat:nth-child(3) .hicon::after{animation-delay:1s}
.hstat:nth-child(4) .hicon::after{animation-delay:1.5s}
.hstat .hnum{
  font-family:var(--display);font-weight:900;font-size:clamp(36px,4vw,56px);
  line-height:1;letter-spacing:-.04em;
  color:var(--leaf);
  text-shadow:0 2px 24px rgba(168,243,65,.45), 0 0 60px rgba(168,243,65,.25);
  display:flex;align-items:baseline;gap:4px;
  animation:hnumBreathe 4.5s ease-in-out infinite;
}
.hstat:nth-child(2) .hnum{animation-delay:.6s}
.hstat:nth-child(3) .hnum{animation-delay:1.2s}
.hstat:nth-child(4) .hnum{animation-delay:1.8s}
@keyframes hnumBreathe{
  0%,100%{text-shadow:0 2px 24px rgba(168,243,65,.45), 0 0 60px rgba(168,243,65,.25)}
  50%{text-shadow:0 2px 30px rgba(168,243,65,.75), 0 0 90px rgba(168,243,65,.5)}
}
@media (prefers-reduced-motion:reduce){
  .hstat .hnum{animation:none}
}
.hstat .hnum em{font-style:normal;font-weight:600;color:var(--leaf);opacity:.8;font-size:.55em}
.hstat .htitle{
  font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.6vw,22px);
  line-height:1.15;letter-spacing:-.01em;
  color:var(--bone);
  margin:6px 0 0;
}
.hstat .hlbl{
  margin-top:6px;font-size:12.5px;color:var(--mist);
  letter-spacing:.01em;line-height:1.45;font-weight:400;
}
@media (max-width:1100px){
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:10px;max-width:780px}
}
@media (max-width:880px){
  .hero-stats{
    position:absolute;left:28px;right:28px;top:auto;
    bottom:clamp(28px,4vh,52px);
    max-width:none;
    grid-template-columns:repeat(2,1fr);gap:8px;
    transform:none;
  }
  .hstat{padding:14px 14px 16px;grid-template-columns:30px 1fr;gap:4px 10px}
  .hstat .hicon{width:30px;height:30px;margin-top:4px}
  .hstat .hnum{font-size:clamp(26px,5vw,34px)}
  .hstat .htitle{font-size:14px;margin-top:4px}
  .hstat .hlbl{font-size:11px;letter-spacing:0;line-height:1.35}
}
@media (max-width:560px){
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:8px}
}

.scroll-cue{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);
  opacity:var(--cue-op,1);transition:opacity .3s;
}
.scroll-cue .bar{width:1px;height:44px;background:linear-gradient(180deg, transparent, var(--mist));position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:var(--leaf);animation:slide 2s linear infinite}
@keyframes slide{0%{transform:translateY(0)}100%{transform:translateY(300%)}}

/* =================================================
   LIVE TICKER — sequel.co-style chip strip
   ================================================= */
.ticker{
  position:relative;background:var(--ink-80);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-rail{display:flex;gap:18px;flex:0 0 auto;animation:tickerScroll 80s linear infinite;will-change:transform}
@keyframes tickerScroll{to{transform:translateX(-50%)}}
.ticker:hover .ticker-rail{animation-play-state:paused}
.tchip{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:9px 16px 9px 12px;border-radius:6px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-2);
  font-family:var(--body);font-size:13px;color:var(--bone);font-weight:500;
  white-space:nowrap;letter-spacing:-.005em;
}
@media (max-width:560px){
  .tchip{padding:7px 12px 7px 10px;font-size:11.5px;gap:8px}
  .tchip .tlabel{font-size:9.5px}
  .tchip .tmeta{font-size:11px}
}
.tchip .tdot{
  width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:0 0 8px;
  box-shadow:0 0 0 0 var(--leaf-glow);
  animation:pulse 2.4s ease-out infinite;
}
.tchip .tlabel{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--leaf);margin-right:2px;
}
.tchip strong{color:var(--bone);font-weight:700}
.tchip .tmeta{color:var(--mist-2);margin-left:4px;font-size:12px}
.tchip.is-live{background:rgba(168,243,65,.08);box-shadow:inset 0 0 0 1px rgba(168,243,65,.25)}
.tchip.is-premiere{background:rgba(240,194,95,.06);box-shadow:inset 0 0 0 1px rgba(240,194,95,.2)}
.tchip.is-premiere .tdot{background:var(--sun);animation:none;box-shadow:0 0 12px rgba(240,194,95,.5)}
.tchip.is-premiere .tlabel{color:var(--sun)}

/* =================================================
   STAGE 2 — ANCHOR: cinematic mission typography
   ================================================= */
.anchor{
  position:relative;padding:clamp(100px,18vh,200px) clamp(28px,6vw,120px);text-align:center;
  background:var(--ink);overflow:hidden;
}
.anchor::before{
  content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 32% at 28% 38%, rgba(168,243,65,.34), transparent 62%),
    radial-gradient(48% 38% at 78% 58%, rgba(42,122,59,.38), transparent 62%),
    radial-gradient(28% 22% at 50% 80%, rgba(126,225,136,.20), transparent 70%);
  filter:blur(70px);
  animation:drift 22s ease-in-out infinite alternate, glowBreathe 9s ease-in-out infinite;
}
@keyframes drift{
  0%  {transform:translate(0,0) scale(1)}
  50% {transform:translate(-3%,2%) scale(1.05)}
  100%{transform:translate(3%,-2%) scale(.97)}
}
@keyframes glowBreathe{
  0%,100%{opacity:.82}
  50%    {opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .anchor::before, .globe-section::before, .promise::before, .convert::before{animation:none}
}
.anchor .wrap{position:relative;z-index:2}
.anchor .eyebrow{margin-bottom:36px}
.anchor h2{
  font-family:var(--display);font-weight:900;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(48px,7.5vw,120px);
  max-width:16ch;margin:0 auto;
}
.anchor h2 em{
  font-style:italic;font-weight:500;
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
}
.anchor p{
  margin-top:32px;max-width:60ch;margin-left:auto;margin-right:auto;
  color:var(--mist);font-size:clamp(17px,1.5vw,21px);
}

/* =================================================
   STAGE 2.5 — LIVE STATS STRIP
   ================================================= */
.impact{
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-80) 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.impact .wrap{position:relative;z-index:2}
.impact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;
  padding:48px var(--pad-x);
  max-width:1080px;margin:0 auto;
}
@media (min-width:720px){
  .impact-grid{grid-template-columns:repeat(4,1fr);gap:20px}
}
.stat-icon{
  position:relative;
  width:40px;height:40px;color:var(--leaf);
  margin-bottom:18px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:rgba(168,243,65,.06);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.18);
}
.stat-icon svg{width:26px;height:26px;filter:drop-shadow(0 2px 8px rgba(168,243,65,.35))}
.stat-icon::after{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(168,243,65,.35);
  animation:iconPulse 3s ease-out infinite;
}
.impact .reveal-stagger > *:nth-child(2) .stat-icon::after{animation-delay:.4s}
.impact .reveal-stagger > *:nth-child(3) .stat-icon::after{animation-delay:.8s}
.impact .reveal-stagger > *:nth-child(4) .stat-icon::after{animation-delay:1.2s}
.stat-num{
  font-family:var(--display);font-weight:900;font-size:clamp(30px,3.6vw,52px);
  line-height:1;letter-spacing:-.04em;
  background:linear-gradient(180deg, var(--bone) 0%, #8c91a3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;overflow:hidden;text-overflow:clip;
}
.stat-label{color:var(--mist);margin-top:12px;font-size:14px;max-width:28ch;line-height:1.45}
.stat-bar{height:2px;background:var(--line);margin-top:24px;position:relative;overflow:hidden;border-radius:99px}
.stat-bar::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg, var(--leaf-deep), var(--leaf));
  transform:translateX(-100%);
  animation:barFill 2.6s 1.2s cubic-bezier(.7,0,.2,1) forwards;
  box-shadow:0 0 16px var(--leaf-glow);
}
@keyframes barFill{to{transform:translateX(0)}}

/* =================================================
   PROOF SECTION — three concrete case wins
   ================================================= */
.proof{
  position:relative;padding:var(--pad-section) 0;
  background:var(--ink);
}
.proof .s-head{margin-bottom:40px}

/* === Section heads with side panel — unified pattern === */
.proof .s-head .row,
.broll-section .s-head .row{align-items:flex-start;gap:48px;flex-wrap:wrap}
.proof .s-head .row .row-left,
.broll-section .s-head .row .row-left{
  flex:1 1 480px;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
}
.proof .s-head .row .row-left h2,
.broll-section .s-head .row .row-left h2{margin:0}
.proof .s-head .row .row-left p,
.broll-section .s-head .row .row-left p{
  margin:0;font-size:21px;line-height:1.45;
  max-width:46ch;color:var(--mist);
}
.proof .s-head .row .row-left .btn,
.proof .s-head .row .row-left .btn-quiet,
.broll-section .s-head .row .row-left .btn,
.broll-section .s-head .row .row-left .btn-quiet{margin-top:6px}
/* bigger H2s for these sections */
.proof .s-head h2,
.broll-section .s-head h2{font-size:clamp(48px,6vw,88px) !important}
.proof .s-head .row .row-side,
.broll-section .s-head .row .row-side{
  flex:1 1 360px;max-width:440px;
  display:flex;flex-direction:column;align-items:flex-end;gap:18px;
}

/* === Projects section — matching head + panel === */
.hscroll-pin .hscroll-head{align-items:flex-start;flex-wrap:wrap}
.hscroll-pin .hscroll-head-text{flex:1 1 480px;min-width:0;gap:22px}
.hscroll-pin .hscroll-head h2{font-size:clamp(48px,6vw,88px) !important;margin:0}
.hscroll-pin .hscroll-head-text p{font-size:21px !important;line-height:1.45;max-width:46ch;margin:0}
.hscroll-pin .hscroll-head-text .btn-ghost{margin-top:6px;align-self:flex-start}
.hscroll-pin .hscroll-head-side{
  flex:1 1 360px;max-width:440px;
  display:flex;flex-direction:column;align-items:flex-end;gap:18px;
}
.projects-panel{
  position:relative;width:100%;
  padding:22px 24px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(168,243,65,.06),rgba(168,243,65,.015));
  border:1px solid rgba(168,243,65,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;
}
.projects-panel::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--leaf),rgba(168,243,65,.15));
}
.projects-panel .pp-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:14px;
}
.projects-panel .pp-title{
  font-family:var(--body);font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);display:inline-flex;align-items:center;gap:8px;
}
.projects-panel .pp-title::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--leaf);box-shadow:0 0 0 0 var(--leaf-glow);
  animation:pulse 2.4s ease-out infinite;
}
.projects-panel .pp-live{
  font-family:var(--display);font-weight:800;
  font-size:10px;letter-spacing:.22em;
  color:var(--leaf);text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  border:1px solid rgba(168,243,65,.4);
  background:rgba(168,243,65,.08);
}
.projects-panel .pp-feature{
  display:block;text-decoration:none;color:inherit;
  padding:14px 14px 14px 16px;border-radius:12px;
  background:rgba(2,7,24,.42);
  border:1px solid rgba(168,243,65,.18);
  margin-bottom:14px;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.projects-panel .pp-feature:hover{border-color:rgba(168,243,65,.5);transform:translateY(-1px);background:rgba(2,7,24,.55)}
.projects-panel .pp-feature .pp-label{
  font-family:var(--body);font-weight:600;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:#ff8a5b;margin-bottom:6px;
  display:flex;align-items:center;gap:6px;
}
.projects-panel .pp-feature .pp-name{
  font-family:var(--display);font-weight:700;
  font-size:17px;letter-spacing:-.005em;color:var(--bone);
  line-height:1.2;margin-bottom:6px;
}
.projects-panel .pp-feature .pp-bar{
  position:relative;height:5px;border-radius:999px;
  background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:8px;
}
.projects-panel .pp-feature .pp-fill{
  position:absolute;left:0;top:0;bottom:0;width:28%;
  background:linear-gradient(90deg, var(--leaf), #B9F764);
  border-radius:999px;
}
.projects-panel .pp-feature .pp-meta{
  font-size:12px;color:var(--mist);letter-spacing:.02em;
  display:flex;justify-content:space-between;
}
.projects-panel .pp-feature .pp-meta b{color:var(--leaf);font-weight:700}
.projects-panel .pp-divider{
  height:1px;border:0;margin:4px -4px 14px;
  background-image:linear-gradient(90deg, rgba(168,243,65,.04), rgba(168,243,65,.22) 50%, rgba(168,243,65,.04));
}
.projects-panel .pp-list{display:flex;flex-direction:column;gap:12px}
.projects-panel .pp-row{display:flex;align-items:center;gap:14px;font-family:var(--body)}
.projects-panel .pp-icon{
  flex:0 0 34px;width:34px;height:34px;border-radius:9px;
  border:1px solid rgba(168,243,65,.32);
  background:rgba(2,7,24,.4);
  display:flex;align-items:center;justify-content:center;
  color:var(--leaf);
}
.projects-panel .pp-icon svg{width:18px;height:18px}
.projects-panel .pp-num{
  font-family:var(--display);font-weight:800;
  font-size:20px;letter-spacing:-.01em;color:var(--bone);
  min-width:60px;line-height:1;
}
.projects-panel .pp-num em{
  font-style:normal;font-weight:600;color:var(--leaf);
  font-size:.62em;margin-left:2px;letter-spacing:.04em;
}
.projects-panel .pp-text{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.35;color:var(--mist)}

@media (max-width:880px){
  .proof .s-head .row,
  .broll-section .s-head .row{align-items:stretch;gap:32px}
  .proof .s-head .row .row-left,
  .proof .s-head .row .row-side,
  .broll-section .s-head .row .row-left,
  .broll-section .s-head .row .row-side{flex:1 1 100%;max-width:none}
  .proof .s-head .row .row-side,
  .broll-section .s-head .row .row-side{align-items:flex-start}
  .hscroll-pin .hscroll-head{gap:32px}
  .hscroll-pin .hscroll-head-text,
  .hscroll-pin .hscroll-head-side{flex:1 1 100%;max-width:none}
  .hscroll-pin .hscroll-head-side{align-items:flex-start}
}
.impacts-panel{
  position:relative;width:100%;
  padding:22px 24px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(168,243,65,.06),rgba(168,243,65,.015));
  border:1px solid rgba(168,243,65,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;
}
.impacts-panel::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--leaf),rgba(168,243,65,.15));
}
.impacts-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:16px;padding-bottom:14px;
  border-bottom:1px dashed rgba(168,243,65,.22);
}
.impacts-title{
  font-family:var(--body);font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);
}
.impacts-title b{color:var(--leaf);font-weight:600;margin-right:6px}
.impacts-year{
  font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.18em;color:rgba(168,243,65,.85);
}
.impacts-list{display:flex;flex-direction:column;gap:14px}
.impact-row{
  display:flex;align-items:center;gap:14px;
  font-family:var(--body);
}
.impact-icon{
  flex:0 0 38px;width:38px;height:38px;
  border-radius:10px;
  border:1px solid rgba(168,243,65,.32);
  background:rgba(2,7,24,.4);
  display:flex;align-items:center;justify-content:center;
  color:var(--leaf);
}
.impact-icon svg{width:20px;height:20px}
.impact-num{
  font-family:var(--display);font-weight:800;
  font-size:24px;letter-spacing:-.01em;
  color:var(--bone);min-width:96px;line-height:1;
}
.impact-num em{
  font-style:normal;font-weight:600;color:var(--leaf);
  font-size:.7em;margin-left:2px;letter-spacing:.04em;
}
.impact-label{
  flex:1 1 auto;min-width:0;
  font-size:13px;line-height:1.35;color:var(--mist);
}
@media (max-width:880px){
  .proof .s-head .row{align-items:stretch}
  .proof .s-head .row > h2,
  .proof .s-head .row .row-side{flex:1 1 100%;max-width:none}
  .proof .s-head .row .row-side{align-items:flex-start}
}

/* === Stories from the field: now on the channel side panel === */
.broll-section .s-head .row{align-items:flex-start;gap:48px;flex-wrap:wrap}
.broll-section .s-head .row > h2{flex:1 1 480px;min-width:0}
.broll-section .s-head .row .row-side{
  flex:1 1 360px;max-width:440px;
  display:flex;flex-direction:column;align-items:flex-end;gap:18px;
}
.stories-panel{
  position:relative;width:100%;
  padding:22px 24px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(168,243,65,.06),rgba(168,243,65,.015));
  border:1px solid rgba(168,243,65,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;
}
.stories-panel::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--leaf),rgba(168,243,65,.15));
}
.stories-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:14px;
}
.stories-title{
  font-family:var(--body);font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);display:inline-flex;align-items:center;gap:8px;
}
.stories-title::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:#ff5b5b;box-shadow:0 0 0 0 rgba(255,91,91,.6);
  animation:liveBlip 1.6s ease-out infinite;
}
@keyframes liveBlip{
  0%   {box-shadow:0 0 0 0 rgba(255,91,91,.55)}
  100% {box-shadow:0 0 0 10px rgba(255,91,91,0)}
}
.stories-live{
  font-family:var(--display);font-weight:800;
  font-size:10px;letter-spacing:.22em;
  color:#ff5b5b;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  border:1px solid rgba(255,91,91,.5);
  background:rgba(255,91,91,.08);
}
.top-story{
  display:block;text-decoration:none;color:inherit;
  padding:14px 14px 14px 16px;border-radius:12px;
  background:rgba(2,7,24,.42);
  border:1px solid rgba(168,243,65,.18);
  margin-bottom:14px;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.top-story:hover{border-color:rgba(168,243,65,.5);transform:translateY(-1px);background:rgba(2,7,24,.55)}
.top-story .ts-label{
  font-family:var(--body);font-weight:600;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(168,243,65,.85);margin-bottom:6px;
  display:flex;align-items:center;gap:6px;
}
.top-story .ts-title{
  font-family:var(--display);font-weight:700;
  font-size:17px;letter-spacing:-.005em;color:var(--bone);
  line-height:1.2;margin-bottom:4px;
}
.top-story .ts-meta{
  font-size:12px;color:var(--mist);letter-spacing:.02em;
}
.top-story .ts-meta b{color:var(--leaf);font-weight:600}
.stories-divider{
  height:1px;background:rgba(168,243,65,.18);
  margin:4px -4px 14px;border:0;
  background-image:linear-gradient(90deg, rgba(168,243,65,.04), rgba(168,243,65,.22) 50%, rgba(168,243,65,.04));
}
.stories-list{display:flex;flex-direction:column;gap:12px}
.story-row{
  display:flex;align-items:center;gap:14px;
  font-family:var(--body);
}
.story-icon{
  flex:0 0 34px;width:34px;height:34px;
  border-radius:9px;
  border:1px solid rgba(168,243,65,.32);
  background:rgba(2,7,24,.4);
  display:flex;align-items:center;justify-content:center;
  color:var(--leaf);
}
.story-icon svg{width:18px;height:18px}
.story-num{
  font-family:var(--display);font-weight:800;
  font-size:20px;letter-spacing:-.01em;
  color:var(--bone);min-width:78px;line-height:1;
}
.story-num em{
  font-style:normal;font-weight:600;color:var(--leaf);
  font-size:.62em;margin-left:2px;letter-spacing:.04em;
}
.story-label{
  flex:1 1 auto;min-width:0;
  font-size:12.5px;line-height:1.35;color:var(--mist);
}
@media (max-width:880px){
  .broll-section .s-head .row{align-items:stretch}
  .broll-section .s-head .row > h2,
  .broll-section .s-head .row .row-side{flex:1 1 100%;max-width:none}
  .broll-section .s-head .row .row-side{align-items:flex-start}
}
.proof-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:880px){.proof-grid{grid-template-columns:repeat(3,1fr);gap:22px}}
.pcard{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  min-height:480px;display:flex;flex-direction:column;justify-content:space-between;
  padding:24px;isolation:isolate;
  background:var(--ink-60);
  transition:transform .6s cubic-bezier(.22,.9,.3,1), box-shadow .5s;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  will-change:transform;
}
.pcard:hover{
  transform:translateY(-12px) scale(1.015);
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,.85),
    0 30px 60px -20px rgba(168,243,65,.30),
    inset 0 0 0 1px rgba(168,243,65,.55);
}
.pcard .pbg{
  position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  filter:saturate(.95) brightness(.55);
  transition:filter .5s, transform 1s cubic-bezier(.2,.7,.1,1);
}
.pcard .pvideo{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:saturate(.95) brightness(.55);
  transition:filter .5s, transform 1s cubic-bezier(.2,.7,.1,1);
}
.pcard:hover .pbg, .pcard:hover .pvideo{filter:saturate(1.1) brightness(.72);transform:scale(1.08)}

/* Internal hover animations — number shimmer, tag glow, link slide */
.pcard .pnum{transition:transform .5s cubic-bezier(.22,.9,.3,1), text-shadow .5s}
.pcard:hover .pnum{
  transform:translateX(2px) scale(1.04);
  text-shadow:0 0 32px rgba(168,243,65,.6), 0 4px 14px rgba(168,243,65,.35);
}
.pcard .ptag{transition:box-shadow .35s, transform .35s, background .35s}
.pcard:hover .ptag{
  background:rgba(2,7,24,.65);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.55),
             0 10px 30px -8px rgba(168,243,65,.40);
  transform:translateY(-1px);
}
.pcard .plink{
  position:relative;transition:color .3s, letter-spacing .35s;
}
.pcard:hover .plink{color:#D3FA9E;letter-spacing:.06em}
.pcard .plink::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:linear-gradient(90deg, var(--leaf), #D3FA9E);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.9,.3,1);
}
.pcard:hover .plink::after{transform:scaleX(1)}

/* Ambient continuous breathing on each card's stat number (gentle glow pulse) */
.pcard .pnum{animation:pcardBreathe 6s ease-in-out infinite}
.pcard:nth-child(2) .pnum{animation-delay:-2s}
.pcard:nth-child(3) .pnum{animation-delay:-4s}
@keyframes pcardBreathe{
  0%,100%{filter:drop-shadow(0 0 12px rgba(168,243,65,.18))}
  50%   {filter:drop-shadow(0 0 28px rgba(168,243,65,.45))}
}

/* Cards themselves drift gently — soft up-down float, each on its
   own offset so the row breathes out of phase. Suspended in place. */
.pcard{animation:pcardFloat 9s ease-in-out infinite}
.pcard:nth-child(2){animation-delay:-3s;animation-duration:8s}
.pcard:nth-child(3){animation-delay:-6s;animation-duration:10s}
@keyframes pcardFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-8px)}
}
/* Hover overrides the float — explicit lift takes priority */
.pcard:hover{
  animation-play-state:paused;
}

@media (prefers-reduced-motion:reduce){
  .pcard, .pcard .pnum{animation:none;transition:none}
  .pcard:hover{transform:none}
}

/* Dramatic scroll-in entrance for proof cards — rise with slight rotate,
   staggered between siblings. Triggered when .proof-grid gets .in. */
.proof-grid.reveal-stagger > .pcard{
  opacity:0;transform:translateY(60px) rotateX(8deg) scale(.96);
  transform-origin:50% 100%;
  transition:opacity 1s cubic-bezier(.22,.9,.3,1),
             transform 1.1s cubic-bezier(.22,.9,.3,1);
}
.proof-grid.reveal-stagger.in > .pcard{
  opacity:1;transform:translateY(0) rotateX(0) scale(1);
}
.proof-grid.reveal-stagger.in > .pcard:nth-child(1){transition-delay:.05s}
.proof-grid.reveal-stagger.in > .pcard:nth-child(2){transition-delay:.18s}
.proof-grid.reveal-stagger.in > .pcard:nth-child(3){transition-delay:.31s}
.pcard::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(2,7,24,.05) 0%, rgba(2,7,24,.02) 40%, rgba(2,7,24,.11) 100%);
}
.pcard .ptag{
  display:inline-flex;align-items:center;gap:8px;align-self:start;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);font-weight:600;
  padding:5px 10px;border-radius:3px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.pcard .ptag .pdot{width:6px;height:6px;border-radius:50%;background:var(--leaf);box-shadow:0 0 6px var(--leaf-glow)}
.pcard .picon-tr{
  position:absolute;top:18px;right:18px;z-index:3;
  width:56px;height:56px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--leaf);background:rgba(2,7,24,.55);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.4);
}
.pcard .picon-tr svg{width:32px;height:32px;filter:drop-shadow(0 2px 8px rgba(168,243,65,.4))}
.pcard .picon-tr::after{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(168,243,65,.4);
  animation:iconPulse 3s ease-out infinite;
}
.pcard:nth-child(2) .picon-tr::after{animation-delay:.6s}
.pcard:nth-child(3) .picon-tr::after{animation-delay:1.2s}
.pcard .pbody{display:grid;gap:10px}
.pcard .pnum{
  font-family:var(--display);font-weight:900;font-size:clamp(46px,5.5vw,72px);
  line-height:.9;letter-spacing:-.04em;color:var(--bone);
}
.pcard .pnum em{font-style:italic;font-weight:500;color:var(--leaf)}
.pcard .pcaption{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.15;color:var(--bone);letter-spacing:-.015em;max-width:22ch}
.pcard .pdesc{color:var(--mist);font-size:14px;line-height:1.5;max-width:36ch}
.pcard .plink{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--bone);
  padding:0 0 4px 0;border-bottom:1px solid rgba(255,255,255,.25);align-self:start;
  transition:color .25s, border-color .25s;
}
.pcard .plink:hover{color:var(--leaf);border-bottom-color:var(--leaf)}

/* =================================================
   STAGE 3 — DISCOVER: Pinned pillars
   ================================================= */
.pillars{position:relative;background:var(--ink-80)}
.pillars-head{padding:var(--pad-section) 0 30px;text-align:center}
.pillars-head h2{font-size:clamp(36px,4.5vw,68px);max-width:24ch;margin:18px auto 0}
.pillars-head h2 em{font-style:italic;font-weight:500;color:var(--leaf)}
.pillars-head p{max-width:62ch;margin:22px auto 0;color:var(--mist);font-size:18px}

.pillars-grid{
  position:relative;
  display:grid;grid-template-columns:1fr;gap:0;
}
@media (min-width:960px){
  .pillars-grid{grid-template-columns:1fr 1fr;align-items:start}
}
.pillars-media{
  position:relative;height:60vh;order:-1;
}
@media (min-width:960px){
  .pillars-media{position:sticky;top:0;height:100vh;order:0}
}
.pillars-media .frame{
  position:absolute;inset:clamp(20px,4vw,60px);
  border-radius:var(--r-lg);overflow:hidden;background:var(--ink);
  box-shadow:0 60px 100px -40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06);
}
.pillars-media .slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.1,1), transform 6s ease-out;
  transform:scale(1.04);
}
.pillars-media .slide.active{opacity:1;transform:scale(1)}
.pillars-media .slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(2,7,24,.26) 100%);
}
.pillars-media .badge{
  position:absolute;left:24px;bottom:24px;z-index:2;color:var(--bone);font-size:14px;
  display:flex;gap:10px;align-items:center;
  padding:8px 12px;border-radius:3px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.pillars-media .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf)}

.pillars-text{display:flex;flex-direction:column}
.pillar{
  padding:clamp(80px,12vh,140px) clamp(24px,5vw,80px);
  min-height:90vh;display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.pillar .picon{
  width:44px;height:44px;color:var(--leaf);
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:rgba(168,243,65,.06);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.18);
  margin-bottom:18px;
}
.pillar .picon svg{width:30px;height:30px;filter:drop-shadow(0 2px 8px rgba(168,243,65,.35))}
@keyframes iconDraw{to{stroke-dashoffset:0}}
/* Looping pulse on the second stroke for active pillar */
.pillar.in .picon::after{
  content:"";position:absolute;width:44px;height:44px;border-radius:6px;
  box-shadow:0 0 0 0 rgba(168,243,65,.35);
  animation:iconPulse 2.8s ease-out infinite;
  pointer-events:none;
}
.pillar .picon{position:relative}
@keyframes iconPulse{
  0%{box-shadow:0 0 0 0 rgba(168,243,65,.4)}
  70%{box-shadow:0 0 0 10px rgba(168,243,65,0)}
  100%{box-shadow:0 0 0 0 rgba(168,243,65,0)}
}
.pillar .num{font-family:var(--display);font-weight:900;color:var(--leaf);font-size:14px;letter-spacing:.2em}
.pillar h3{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.4vw,52px);max-width:18ch;letter-spacing:-.02em;line-height:1.02}
.pillar h3 em{font-style:italic;font-weight:500;color:var(--leaf)}
.pillar p{color:var(--mist);font-size:18px;max-width:48ch;line-height:1.6}
.pillar ul{list-style:none;display:grid;gap:10px;color:var(--bone);font-size:15px;margin-top:8px}
.pillar ul li{padding-left:22px;position:relative}
.pillar ul li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--leaf);box-shadow:0 0 12px var(--leaf-glow)}
.pillar .cta{margin-top:6px;align-self:flex-start}

/* =================================================
   BIOME SCROLLYTELLING — pinned cinematic parallax
   ================================================= */
.biomes{position:relative;height:400vh;background:#000}
.biomes-pin{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:grid;place-items:center}
.biome-layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s cubic-bezier(.7,0,.2,1), transform 6s linear;
  transform:scale(1.06);
  filter:saturate(.95) contrast(1.05);
  z-index:1;
}
.biome-layer.is-active{opacity:1;transform:scale(1)}
.biomes-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,7,24,.06) 0%, rgba(2,7,24,0) 25%, rgba(2,7,24,0) 55%, rgba(2,7,24,.37) 100%),
    radial-gradient(70% 90% at 50% 45%, rgba(0,0,0,0) 0%, rgba(2,7,24,.16) 100%);
}
.biomes-grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
}
.biomes-copy-wrap{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  padding:0 var(--pad-x);
  pointer-events:none;
}
.biome-text{
  position:absolute;max-width:1080px;text-align:center;
  padding-left:var(--pad-x);padding-right:var(--pad-x);
  opacity:0;transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.2,.7,.1,1), transform .9s cubic-bezier(.2,.7,.1,1);
  pointer-events:none;
}
@media (max-width:720px){
  .biome-text{text-align:left;align-self:end;padding-bottom:80px}
  .biomes-copy-wrap{place-items:end stretch}
}
.biome-text.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.biome-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);font-weight:600;
  padding:8px 14px;border-radius:3px;
  background:rgba(2,7,24,.45);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.biome-eyebrow .bnum{color:var(--leaf);font-family:var(--display);font-weight:800;letter-spacing:0}
.biome-eyebrow .bdot{width:6px;height:6px;border-radius:50%;background:var(--leaf);box-shadow:0 0 8px var(--leaf-glow);animation:pulse 2.4s ease-out infinite}
.biome-text h2{
  font-family:var(--display);font-weight:900;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(42px,7vw,108px);margin-top:24px;
  text-shadow:none;
  color:var(--bone);
}
.biome-text h2 em{
  font-style:italic;font-weight:500;
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
}
.biome-text p{
  margin:22px auto 0;max-width:54ch;color:var(--bone);
  font-size:clamp(15px,1.3vw,18px);line-height:1.55;
  text-shadow:none;
}
.biome-text .b-stat{
  display:inline-block;margin-top:32px;padding:12px 18px;border-radius:4px;
  font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.01em;
  background:rgba(2,7,24,.5);backdrop-filter:blur(10px);
  color:var(--bone);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.3);
}
.biome-text .b-stat strong{color:var(--leaf)}

.biomes-progress{
  position:absolute;right:clamp(20px,3vw,40px);top:50%;transform:translateY(-50%);
  z-index:5;display:flex;flex-direction:column;gap:18px;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.16em;
}
.bchip{
  display:flex;align-items:center;gap:10px;color:var(--mist);
  opacity:.5;transition:opacity .4s, color .4s;
}
.bchip::before{
  content:"";display:inline-block;width:24px;height:1px;background:var(--mist);
  transition:background .4s, width .4s;
}
.bchip.is-active{opacity:1;color:var(--bone)}
.bchip.is-active::before{background:var(--leaf);width:40px;box-shadow:0 0 6px var(--leaf-glow)}
.bchip span{white-space:nowrap}
@media (max-width:720px){
  .biomes-progress{right:14px;gap:12px;font-size:10px}
  .bchip::before{width:14px}
  .bchip.is-active::before{width:24px}
  .bchip span{display:none}
}

/* =================================================
   STAGE 4 — BREATHE: full-bleed quote moment
   ================================================= */
.breathe{
  position:relative;min-height:80vh;display:flex;align-items:center;
  background:#000;
  isolation:isolate;overflow:hidden;
}
.breathe .breathe-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;
  filter:saturate(1.05) contrast(1.05);
}
.breathe-poster{
  position:absolute;inset:0;z-index:-3;
  background:url('https://fwi.or.id/wp-content/uploads/2023/08/DJI_0692-1.jpg') center/cover no-repeat;
  filter:saturate(1.05) contrast(1.05);
  animation:slowZoom 30s ease-in-out infinite alternate;
}
.breathe::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,7,24,.22), rgba(2,7,24,.35)),
    radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,0) 30%, rgba(2,7,24,.22) 100%);
}
.breathe blockquote{
  font-family:var(--display);font-weight:500;font-style:italic;font-size:clamp(28px,4vw,58px);
  line-height:1.15;letter-spacing:-.02em;max-width:24ch;
  text-shadow:none;
}
.breathe cite{
  display:flex;align-items:center;gap:14px;
  font-style:normal;font-family:var(--body);font-weight:600;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone);margin-top:32px;
}
.breathe cite::before{
  content:"";display:inline-block;width:36px;height:1px;background:var(--leaf);
  box-shadow:0 0 8px var(--leaf-glow);
}

/* =================================================
   STAGE 5 — TRUST: Projects bento + testimonials
   ================================================= */
.s-head{display:grid;gap:24px;margin-bottom:60px}
.s-head h2{font-size:clamp(36px,4.5vw,68px);font-weight:800;max-width:20ch;letter-spacing:-.025em}
.s-head h2 em{font-style:italic;font-weight:500;color:var(--leaf)}
.s-head p{max-width:60ch;color:var(--mist);font-size:18px}
.s-head .row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px}

.proj-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:720px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.proj-grid{grid-template-columns:repeat(3,1fr);gap:24px}}

/* =================================================
   HORIZONTAL SCROLL — magnesia.cz pattern
   Section pins for ~5 viewport-heights and the inner track
   translates left as the user scrolls down. Re-uses the
   project-card markup verbatim — adds a wrapping container.
   ================================================= */
/* Projects section — clean responsive grid (no horizontal scroll mechanic) */
.hscroll-stage{
  position:relative;background:var(--ink);
  padding:clamp(48px,7vh,96px) 0 var(--pad-section);
}
.hscroll-pin{position:relative;display:block}
.hscroll-pin .hscroll-head{
  padding:0 var(--pad-x);
  margin-bottom:48px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap;
  max-width:1080px;margin-left:auto;margin-right:auto;
}
.hscroll-pin .hscroll-head-text{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hscroll-pin .hscroll-head-text .eyebrow{margin-bottom:0}
.hscroll-pin .hscroll-head h2{margin:0;font-size:clamp(48px,6vw,88px);font-weight:800;letter-spacing:-.025em;line-height:1}
.hscroll-pin .hscroll-head h2 em{font-style:italic;font-weight:500;color:var(--leaf)}
.hscroll-pin .hscroll-head-text p{color:var(--mist);margin:0;max-width:46ch;font-size:21px;line-height:1.45}
.hscroll-pin .hscroll-head-text .btn-ghost{margin-top:6px;align-self:flex-start}
.hscroll-pin .hscroll-head-side{
  flex:1 1 360px;max-width:440px;
  display:flex;flex-direction:column;align-items:flex-end;gap:18px;
}
@media (max-width:880px){
  .hscroll-pin .hscroll-head{gap:32px}
  .hscroll-pin .hscroll-head-text,
  .hscroll-pin .hscroll-head-side{flex:1 1 100%;max-width:none}
  .hscroll-pin .hscroll-head-side{align-items:flex-start}
}

/* ===== Near-me geolocate strip (cartograph theme) ===== */
.nearme{
  position:relative;
  margin:8px auto 38px;
  max-width:calc(1080px - var(--pad-x) * 2);
  width:calc(100% - var(--pad-x) * 2);
  padding:18px 22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(168,243,65,.05), rgba(168,243,65,.015));
  border:1px solid rgba(168,243,65,.18);
  border-radius:16px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:var(--body);
}
.nearme::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--leaf),rgba(168,243,65,.2));
}
.nearme-ring{
  position:relative;width:44px;height:44px;flex:0 0 44px;
  border:1px solid rgba(168,243,65,.55);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.nearme-ring::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px dashed rgba(168,243,65,.4);
  animation:nearmeSpin 18s linear infinite;
}
.nearme-ring svg{width:22px;height:22px;color:var(--leaf);position:relative;z-index:1}
@keyframes nearmeSpin{to{transform:rotate(360deg)}}
.nearme-label{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:600;
  display:flex;flex-direction:column;gap:4px;
}
.nearme-label b{
  font-family:var(--display);font-weight:700;
  font-size:16px;letter-spacing:.04em;text-transform:none;color:var(--bone);
}
.nearme-coords{
  font-family:var(--display);font-weight:700;
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(168,243,65,.9);
  padding:8px 14px;border-radius:10px;
  background:rgba(2,7,24,.4);
  border:1px solid rgba(168,243,65,.22);
}
.nearme-coords .nm-sep{color:rgba(255,255,255,.35);margin:0 6px}
.nearme-nearest{
  flex:1 1 240px;min-width:0;
  font-size:14px;color:var(--mist);
}
.nearme-nearest b{color:var(--bone);font-weight:600}
.nearme-nearest .nm-dist{color:var(--leaf);font-weight:600}
.nearme-btn{
  appearance:none;border:1px solid rgba(168,243,65,.45);
  background:rgba(168,243,65,.08);color:var(--bone);
  font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.nearme-btn:hover{background:rgba(168,243,65,.15);border-color:var(--leaf);transform:translateY(-1px)}
.nearme-btn svg{width:14px;height:14px}
.nm-idle, .nm-granted{
  display:flex;align-items:center;gap:14px;
  flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap;
  min-width:0;
}
.nm-granted{gap:18px}
.nearme[data-state="idle"] .nm-granted,
.nearme[data-state="loading"] .nm-granted,
.nearme[data-state="error"] .nm-granted{display:none !important}
.nearme[data-state="granted"] .nm-idle{display:none !important}
.nearme[data-state="loading"] .nearme-btn{opacity:.7;pointer-events:none}
.nearme[data-state="error"] .nearme-btn{border-color:rgba(255,180,90,.5);background:rgba(255,180,90,.08)}
.nearme-status{
  font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.5);
  font-family:var(--body);
}
.nearme[data-state="error"] .nearme-status{color:rgba(255,180,90,.85)}
/* highlight ring on the nearest card */
.proj-card.is-nearest{
  outline:1px solid rgba(168,243,65,.55);
  outline-offset:6px;
}
.proj-card.is-nearest .coord-stamp{color:var(--leaf)}
@media (max-width:760px){
  .nearme{flex-direction:column;align-items:flex-start;padding:16px 18px}
  .nearme-coords{font-size:12px;padding:6px 10px}
}
.hscroll-pin .hscroll-row{
  padding:0 var(--pad-x);
  max-width:1080px;margin:0 auto;
}
.hscroll-track{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  transform:none !important;
}
@media (min-width:720px){
  .hscroll-track{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  .hscroll-track{grid-template-columns:repeat(3,1fr)}
}
.hscroll-track .proj-card,
.hscroll-track .proj-card.is-featured{
  width:100%;aspect-ratio:4/5;height:auto;min-height:0;
}
.hscroll-progress, .hscroll-hint{display:none}
.proj-card.is-featured .meta h3{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.025em;line-height:1}
.proj-card.is-featured .featured-flag{
  position:absolute;top:18px;left:18px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--ink);padding:6px 12px;border-radius:3px;
  background:var(--leaf);
  box-shadow:0 8px 20px -8px var(--leaf-glow);
}
.proj-card.is-featured .featured-flag svg{width:12px;height:12px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.proj-card.is-featured .founder{
  display:flex;align-items:center;gap:12px;margin-top:6px;
}
.proj-card.is-featured .founder-avatar{
  width:42px;height:42px;border-radius:50%;
  background-size:cover;background-position:center;flex:0 0 42px;
  box-shadow:0 0 0 2px rgba(168,243,65,.4), 0 6px 18px -6px rgba(0,0,0,.6);
}
.proj-card.is-featured .founder-meta{font-family:var(--body);font-size:13px;color:var(--bone);line-height:1.3}
.proj-card.is-featured .founder-meta strong{display:block;color:var(--bone);font-weight:700;font-size:14px;letter-spacing:-.005em}
.proj-card.is-featured .founder-meta span{color:var(--mist);font-size:12px}
.proj-card.is-featured .quote-pull{
  font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(15px,1.4vw,18px);
  line-height:1.4;color:var(--bone);max-width:36ch;margin-top:14px;
  border-left:2px solid var(--leaf);padding-left:14px;
  text-shadow:none;
}
.proj-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/5;background:var(--ink-60);
  transition:transform .5s cubic-bezier(.2,.7,.1,1.2), box-shadow .4s;
  isolation:isolate;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
}
.proj-card:hover{box-shadow:0 40px 80px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(168,243,65,.35)}
.proj-card .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s cubic-bezier(.2,.7,.1,1);filter:saturate(.95) brightness(.78)}
/* Static project images are the source of truth — the .img-video
   layer is hidden so the local image isn't overridden by the Pexels
   video clip on top. */
.proj-card .img-video{display:none}
.proj-card:hover .img,
.proj-card:hover .img-video{transform:scale(1.06);filter:saturate(1) brightness(.85)}
.proj-card .shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,7,24,0) 18%, rgba(2,7,24,.07) 50%, rgba(2,7,24,.11) 80%, rgba(2,7,24,.12) 100%)}
.proj-card .spotlight{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(168,243,65,.22), transparent 60%);mix-blend-mode:screen}
.proj-card:hover .spotlight{opacity:1}
.proj-card .meta{
  position:absolute;inset:0;
  padding:24px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  z-index:2;pointer-events:none;
}
.proj-card .meta > *{pointer-events:auto}

/* ===========================================================
   GLANCE-ABLE CARD REDESIGN — strip duplicate / decorative
   clutter and leave: single status tag · big title · NGO
   caption · clear CTA. The hover expand panel still carries
   the full detail for users who want more.
   =========================================================== */
.proj-card .biome,           /* "Asian elephant · Sanctuary care" tag */
.proj-card .qstats,          /* dual numeric stats row */
.proj-card .miniglobe,       /* corner globe icon */
.proj-card .status-stripe,   /* top decorative stripe */
.proj-card.is-featured .featured-flag,  /* "Featured project" ribbon */
.proj-card.is-featured .founder,        /* founder portrait + name */
.proj-card.is-featured .quote-pull,     /* pull quote */
.proj-card.is-featured .progress{       /* progress bar — featured-only */
  display:none !important;
}

/* Anchor the status tag to the TOP-LEFT of the card as a frosted chip.
   Because .meta now spans the full card height (inset:0), top:0 here
   sits at the top edge of the card itself. */
.proj-card .meta .tag{
  position:absolute;top:18px;left:18px;right:auto;z-index:3;
  display:inline-flex;align-items:center;gap:11px;
  padding:9px 14px;border-radius:6px;
  background:rgba(2,7,24,.45);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  font-family:var(--display);color:var(--bone);
  max-width:calc(100% - 36px);
  transition:box-shadow .3s, transform .3s, background .3s;
}
.proj-card:hover .meta .tag{
  background:rgba(2,7,24,.60);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.45),
             0 10px 30px -8px rgba(168,243,65,.35);
  transform:translateY(-1px);
}
.proj-card.is-urgent:hover .meta .tag{
  box-shadow:inset 0 0 0 1px rgba(226,106,91,.45),
             0 10px 30px -8px rgba(226,106,91,.40);
}
.proj-card .meta .tag .dot{
  width:7px;height:7px;border-radius:50%;background:var(--leaf);
  box-shadow:0 0 8px var(--leaf-glow);
  flex:0 0 7px;
  animation:pinPulse 2.6s ease-out infinite;
}
/* Two-line stack: status on top, location below */
.proj-card .meta .tag .tag-text{
  display:flex;flex-direction:column;align-items:flex-start;
  line-height:1.08;
}
.proj-card .meta .tag .tag-status{
  font-weight:800;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone);
}
.proj-card .meta .tag .tag-location{
  font-weight:600;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mist);
  margin-top:3px;opacity:.85;
  white-space:normal;
}
.proj-card.is-urgent .meta .tag{
  box-shadow:inset 0 0 0 1px rgba(226,106,91,.50),
             0 8px 24px -8px rgba(226,106,91,.35);
}
.proj-card.is-urgent .meta .tag .dot{
  background:var(--coral);
  box-shadow:0 0 10px rgba(226,106,91,.6), 0 0 20px rgba(226,106,91,.35);
}

/* Title — large, two-line max, dominant */
.proj-card .meta h3{
  margin:0 0 2px;
  font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.05;letter-spacing:-.02em;color:var(--bone);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
/* NGO caption — small muted line under the title */
.proj-card .meta .ngo{
  margin:0;
  font-size:11.5px;letter-spacing:.18em;
  color:var(--mist);font-weight:700;text-transform:uppercase;
}
/* Lat/Lon coordinate lozenge — small inline pill placed ABOVE the
   main text of any card. Cartograph-themed: leaf-green crosshair
   icon, frosted dark backdrop, hairline leaf border. Reused on
   project cards, broll cards (Stories from the field) and pcards
   (Real numbers, real wins). */
.coord-stamp{
  align-self:flex-start;justify-self:start;
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 11px;border-radius:999px;
  background:rgba(2,7,24,.55);
  border:1px solid rgba(168,243,65,.32);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(168,243,65,.92);line-height:1;
  pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  margin-bottom:10px;
  width:fit-content;
}
.coord-stamp .cs-lat,
.coord-stamp .cs-lon{display:inline-flex;align-items:center}
.coord-stamp .cs-sep{
  width:1px;height:9px;background:rgba(168,243,65,.35);display:inline-block;
}
.coord-stamp::before{
  content:"";width:11px;height:11px;flex:0 0 11px;
  border-radius:50%;
  background:
    radial-gradient(circle, var(--leaf) 0 1.5px, transparent 2px),
    linear-gradient(to right, transparent calc(50% - .5px), rgba(168,243,65,.65) calc(50% - .5px), rgba(168,243,65,.65) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(168,243,65,.65) calc(50% - .5px), rgba(168,243,65,.65) calc(50% + .5px), transparent calc(50% + .5px));
  border:1px solid rgba(168,243,65,.45);
  box-sizing:border-box;
}
/* Slightly tighter for narrower contexts */
.btile .coord-stamp,
.pcard .coord-stamp{font-size:10px;padding:4px 10px;margin-bottom:8px}

/* CTA — clear, leaf-green underline, slides on hover */
.proj-card .meta .cta{
  margin-top:14px;
  font-family:var(--display);font-weight:700;font-size:13px;
  color:var(--leaf);letter-spacing:.04em;
  border-bottom:1px solid rgba(168,243,65,.35);
  padding-bottom:4px;width:fit-content;
  transition:color .25s, border-color .25s, transform .25s;
}
.proj-card:hover .meta .cta{
  color:#D3FA9E;border-bottom-color:var(--leaf);
  transform:translateX(4px);
}

/* Hover-expand panel — slides up from the bottom on hover */
.proj-card .expand-panel{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:24px 22px 22px;
  background:linear-gradient(180deg, rgba(2,7,24,.0) 0%, rgba(2,7,24,.26) 18%, rgba(2,7,24,.29) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.2,.7,.1,1);
  pointer-events:none;
}
.proj-card:hover .expand-panel{
  transform:translateY(0);
  pointer-events:auto;
}
.proj-card .ep-eyebrow{
  font-family:var(--body);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--leaf);font-weight:700;margin-bottom:8px;
  display:flex;align-items:center;gap:8px;
}
.proj-card .ep-eyebrow::before{
  content:"";display:inline-block;width:24px;height:1px;
  background:var(--leaf);box-shadow:0 0 6px var(--leaf-glow);
}
.proj-card .ep-title{
  font-family:var(--display);font-weight:800;font-size:18px;
  letter-spacing:-.015em;line-height:1.15;color:var(--bone);margin-bottom:8px;
}
.proj-card .ep-desc{
  font-size:13px;line-height:1.5;color:var(--mist);margin-bottom:12px;
}
.proj-card .ep-list{
  list-style:none;display:grid;gap:6px;margin-bottom:14px;
  font-size:12.5px;color:var(--bone);
}
.proj-card .ep-list li{
  padding-left:18px;position:relative;
}
.proj-card .ep-list li::before{
  content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--leaf);box-shadow:0 0 6px var(--leaf-glow);
}
.proj-card .ep-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:4px;
  background:var(--leaf);color:var(--ink);font-weight:700;font-size:12.5px;
  transition:background .2s, transform .2s;
}
.proj-card .ep-cta:hover{background:#B9F764;transform:translateX(2px)}
.proj-card:hover .meta{opacity:0;transition:opacity .3s}
@media (max-width:880px), (hover:none) and (pointer:coarse){
  /* On touch or small screens, show extra content always (no hover state) */
  .proj-card .expand-panel{display:none}
}
.proj-card .tag{
  display:inline-flex;align-items:center;gap:8px;align-self:start;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);font-weight:600;
  padding:5px 10px;border-radius:3px;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.proj-card .tag .dot{width:6px;height:6px;border-radius:50%;background:var(--leaf);box-shadow:0 0 8px var(--leaf-glow)}
.proj-card .picon-tr{display:none}
.proj-card:hover .picon-tr{
  background:rgba(168,243,65,.22);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.65), 0 16px 40px -12px rgba(0,0,0,.6);
  transform:rotate(-3deg) scale(1.05);
}
.proj-card .picon-tr svg{width:46px;height:46px}
/* Origami / low-poly animal icon — geometric polygons in leaf-green gradient */
.proj-card .picon-tr.is-origami{
  width:88px;height:88px;border-radius:10px;padding:0;
  background:linear-gradient(140deg, rgba(2,7,24,.85), rgba(7,13,35,.95));
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.45), 0 14px 36px -14px rgba(0,0,0,.55);
  overflow:visible;
}
.proj-card .picon-tr.is-origami svg{
  width:62px;height:62px;
  filter:drop-shadow(0 6px 16px rgba(168,243,65,.35));
}
.proj-card:hover .picon-tr.is-origami{
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.75), 0 20px 50px -14px var(--leaf-glow);
  transform:rotate(-3deg) scale(1.08);
}
.proj-card .picon-tr.is-origami::after{
  content:"";position:absolute;inset:-4px;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(168,243,65,.4);
  animation:iconPulse 3s ease-out infinite;
}
.proj-card:nth-child(2) .picon-tr.is-origami::after{animation-delay:.5s}
.proj-card:nth-child(3) .picon-tr.is-origami::after{animation-delay:1s}
.proj-card:nth-child(4) .picon-tr.is-origami::after{animation-delay:1.5s}
.proj-card:nth-child(5) .picon-tr.is-origami::after{animation-delay:2s}
.proj-card:nth-child(6) .picon-tr.is-origami::after{animation-delay:2.5s}
@media (max-width:560px){
  .proj-card .picon-tr.is-origami{width:68px;height:68px}
  .proj-card .picon-tr.is-origami svg{width:48px;height:48px}
}
@media (max-width:560px){
  .proj-card .picon-tr{width:60px;height:60px;top:14px;right:14px}
  .proj-card .picon-tr svg{width:36px;height:36px}
  .proj-card .picon-tr.is-photo{width:64px;height:64px}
}
.proj-card .picon-tr svg path,
.proj-card .picon-tr svg circle,
.proj-card .picon-tr svg line,
.proj-card .picon-tr svg polyline{
  stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.proj-card.in .picon-tr svg path,
.proj-card.in .picon-tr svg circle,
.proj-card.in .picon-tr svg polyline{
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:iconDraw 1.4s .25s cubic-bezier(.7,0,.2,1) forwards;
}
.proj-card .picon-tr::after{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(168,243,65,.4);
  animation:iconPulse 3s ease-out infinite;
}
.proj-card h3{font-size:24px;line-height:1.05;font-weight:800;letter-spacing:-.02em}
.proj-card .ngo{font-size:13px;color:var(--mist);margin-top:2px}
.proj-card .progress{display:flex;align-items:center;gap:12px;margin-top:6px;font-size:13px;color:var(--bone);font-weight:600}
.proj-card .progress-bar{flex:1;height:4px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden;position:relative}
.proj-card .progress-bar .fill{display:block;height:100%;background:linear-gradient(90deg, var(--leaf-deep), var(--leaf));width:var(--p,0%);transform:translateX(-100%);animation:barFill 2s .4s cubic-bezier(.7,0,.2,1) forwards;box-shadow:0 0 12px var(--leaf-glow)}
.proj-card .cta{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--bone);align-self:start;
  padding:0 0 4px 0;border-bottom:1px solid rgba(255,255,255,.25);
  transition:color .25s, border-color .25s;
}
.proj-card .cta:hover{color:var(--leaf);border-bottom-color:var(--leaf)}

/* --- RICHER CARD DIFFERENTIATION --- */
/* Status accent stripe across the top of each card (colour by status) */
.proj-card .status-stripe{
  position:absolute;top:0;left:0;right:0;height:3px;z-index:4;
  background:var(--leaf);
  box-shadow:0 0 12px var(--leaf-glow);
}
.proj-card.is-urgent .status-stripe{background:var(--coral);box-shadow:0 0 12px rgba(226,106,91,.5)}
.proj-card.is-featured .status-stripe{background:var(--sun);box-shadow:0 0 12px rgba(240,194,95,.5)}
.proj-card .status-stripe::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:30%;
  background:linear-gradient(90deg, currentColor, transparent);
  opacity:.55;
}

/* Biome / ecosystem tag — sits ABOVE the project title, distinct per card */
.proj-card .biome{
  display:inline-flex;align-items:center;gap:8px;align-self:start;
  font-family:var(--body);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--bone);
  padding:5px 10px;border-radius:3px;
  background:rgba(168,243,65,.10);box-shadow:inset 0 0 0 1px rgba(168,243,65,.35);
  backdrop-filter:blur(6px);
}
.proj-card .biome svg{width:13px;height:13px;color:var(--leaf);stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.proj-card .biome b{font-weight:700;color:var(--leaf);letter-spacing:.18em}

/* Quick-stats strip — 2 micro-data points per card */
.proj-card .qstats{
  display:flex;gap:10px;margin-top:8px;
}
.proj-card .qstats .qs{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 10px;border-radius:5px;flex:1 1 0;min-width:0;
  background:rgba(2,7,24,.55);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.proj-card .qstats .qs b{
  font-family:var(--display);font-weight:800;font-size:15px;color:var(--bone);
  letter-spacing:-.01em;line-height:1;
}
.proj-card .qstats .qs b em{font-style:normal;font-weight:500;color:var(--leaf);font-size:.85em}
.proj-card .qstats .qs span{
  font-family:var(--body);font-size:10px;color:var(--mist);letter-spacing:.06em;line-height:1.3;
  text-transform:uppercase;font-weight:500;
}

/* Mini-globe pinpoint — small globe with a pulsing dot at the project location */
.proj-card .miniglobe{
  position:absolute;left:18px;bottom:18px;z-index:3;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(2,7,24,.65);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.35), 0 8px 22px -8px rgba(0,0,0,.55);
  transition:transform .3s;
}
.proj-card:hover .miniglobe{transform:scale(1.08) rotate(8deg)}
.proj-card .miniglobe svg{width:32px;height:32px}
.proj-card .miniglobe svg circle.globe{fill:none;stroke:rgba(168,243,65,.45);stroke-width:1.4}
.proj-card .miniglobe svg path.lat{fill:none;stroke:rgba(168,243,65,.3);stroke-width:.8}
.proj-card .miniglobe svg path.lon{fill:none;stroke:rgba(168,243,65,.3);stroke-width:.8}
.proj-card .miniglobe svg circle.pin{
  fill:var(--leaf);
  filter:drop-shadow(0 0 4px var(--leaf-glow));
}
.proj-card .miniglobe svg circle.pin-ring{
  fill:none;stroke:var(--leaf);stroke-width:1;
  transform-origin:center;transform-box:fill-box;
  animation:pinRing 2.4s ease-out infinite;
}
@keyframes pinRing{
  0%{opacity:.8;r:2}
  100%{opacity:0;r:8}
}

/* Move the .meta block right when miniglobe sits in the bottom-left */
.proj-card .meta{left:78px}
.proj-card.is-featured .meta{left:24px}
.proj-card.is-featured .miniglobe{left:auto;right:18px;bottom:18px;top:auto;width:60px;height:60px}
.proj-card.is-featured .miniglobe svg{width:40px;height:40px}
@media (max-width:560px){
  .proj-card .miniglobe{width:40px;height:40px;left:14px;bottom:14px}
  .proj-card .miniglobe svg{width:26px;height:26px}
  .proj-card .meta{left:64px}
}

/* Testimonials with landscape thumbnails */
.testi-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:32px}
@media (min-width:720px){.testi-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.testi-grid{grid-template-columns:repeat(3,1fr)}}
.testi{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  min-height:340px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;
  isolation:isolate;
}
.testi .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}
.testi::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(2,7,24,.02) 0%, rgba(2,7,24,.11) 90%)}
.testi q{font-family:var(--display);font-weight:500;font-style:italic;font-size:20px;line-height:1.35;color:var(--bone);quotes:"\201C" "\201D"}
.testi q::before{content:open-quote;color:var(--leaf);margin-right:2px}
.testi q::after{content:close-quote;color:var(--leaf);margin-left:2px}
.testi .who{display:flex;align-items:center;gap:12px;color:var(--mist);font-size:13px}
.testi .who strong{display:block;color:var(--bone);font-weight:700;font-size:14px}

/* =================================================
   WORLD MAP — "Where the work happens"
   Stylised continent shapes + 24 pulsing leaf-green pins.
   Not GIS-accurate by design — it's a brand visual.
   ================================================= */
.globe-section{
  position:relative;padding:var(--pad-section) 0;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-80) 50%, var(--ink) 100%);
  overflow:hidden;
}
.globe-section::before{
  content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 52% at 18% 28%, rgba(168,243,65,.22), transparent 70%),
    radial-gradient(44% 60% at 82% 72%, rgba(42,122,59,.26), transparent 70%),
    radial-gradient(24% 22% at 50% 50%, rgba(126,225,136,.16), transparent 75%);
  filter:blur(70px);
  animation:drift 26s ease-in-out infinite alternate, glowBreathe 10s ease-in-out infinite;
}
.globe-section .wrap{position:relative;z-index:1}
.globe-wrap{
  position:relative;margin-top:40px;
  aspect-ratio:1000/500;
  background:
    radial-gradient(circle at center, rgba(168,243,65,.04) 0%, transparent 60%),
    radial-gradient(circle 1px at 50% 50%, var(--line-2) 1px, transparent 1.5px) 0 0/14px 14px;
  border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--line);
}
@media (max-width:720px){
  .globe-wrap{aspect-ratio:5/4;background-size:10px 10px}
}
.globe-svg{
  position:absolute;inset:0;width:100%;height:100%;
}
.globe-svg path{
  fill:rgba(255,255,255,.04);
  stroke:rgba(168,243,65,.18);
  stroke-width:1;
  transition:fill .4s;
}
/* Continents subtly pulse to feel "alive" — colour cycle */
.globe-svg .continent{
  animation:contPulse 6s ease-in-out infinite;
  /* Draw-in: each continent strokes itself on enter */
  stroke-dasharray:1600;
  stroke-dashoffset:1600;
  transition:stroke-dashoffset 2.4s cubic-bezier(.22,.9,.3,1);
}
.globe-wrap.is-visible .globe-svg .continent{stroke-dashoffset:0}
/* Stagger the continent stroke draws */
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(1){transition-delay:.05s}
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(2){transition-delay:.15s}
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(3){transition-delay:.25s}
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(4){transition-delay:.35s}
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(5){transition-delay:.45s}
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(6){transition-delay:.55s}
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(7){transition-delay:.65s}
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(8){transition-delay:.75s}
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(9){transition-delay:.85s}
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(10){transition-delay:.95s}
.globe-wrap.is-visible .globe-svg .continent:nth-of-type(n+11){transition-delay:1.05s}
.globe-svg .continent:nth-child(3n){animation-delay:1.5s}
.globe-svg .continent:nth-child(3n+1){animation-delay:3s}
@keyframes contPulse{
  0%,100%{fill:rgba(255,255,255,.04);stroke:rgba(168,243,65,.18)}
  50%{fill:rgba(168,243,65,.06);stroke:rgba(168,243,65,.28)}
}
/* Flowing dashed arcs that connect featured project pins */
.globe-arcs{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  width:100%;height:100%;
}
.globe-arcs path{
  fill:none;stroke:var(--leaf);stroke-width:.7;
  stroke-dasharray:3 8;stroke-linecap:round;
  opacity:0;filter:drop-shadow(0 0 4px rgba(168,243,65,.4));
  animation:arcFlow 14s linear infinite;
  transition:opacity .8s ease;
}
.globe-wrap.is-visible .globe-arcs path{opacity:.55;transition-delay:1.4s}
.globe-wrap.is-visible .globe-arcs path:nth-child(2){opacity:.4;transition-delay:1.6s}
.globe-wrap.is-visible .globe-arcs path:nth-child(3){opacity:.45;transition-delay:1.8s}
.globe-wrap.is-visible .globe-arcs path:nth-child(4){opacity:.5;transition-delay:2s}
.globe-arcs path:nth-child(2){stroke:#D3FA9E;animation-duration:18s;animation-direction:reverse}
.globe-arcs path:nth-child(3){stroke:var(--sun);stroke-dasharray:2 14;animation-duration:22s}
.globe-arcs path:nth-child(4){stroke:var(--leaf);stroke-dasharray:4 10;animation-duration:16s;animation-direction:reverse}
@keyframes arcFlow{to{stroke-dashoffset:-200}}
@media (prefers-reduced-motion:reduce){
  .globe-svg .continent{animation:none;stroke-dashoffset:0}
  .globe-arcs path{animation:none;opacity:.5}
  .donation-ping{display:none}
  .pin{opacity:1 !important;transform:translate(-50%,-50%) scale(1) !important}
}
.globe-svg .lat-line{
  fill:none;stroke:rgba(168,243,65,.08);stroke-width:.5;stroke-dasharray:2 6;
  opacity:0;transition:opacity 1s ease .2s;
}
.globe-wrap.is-visible .globe-svg .lat-line{opacity:1}

/* Tactical digital scan — sweeps left→right across the map every 7s.
   Bright leading edge with a soft tail trailing behind. Pairs with a
   horizontal-line flicker overlay and a "SCANNING" status indicator. */
.globe-scan{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  overflow:hidden;border-radius:var(--r-lg);
  opacity:0;transition:opacity 1s ease 1.5s;
}
.globe-wrap.is-visible .globe-scan{opacity:1}
.globe-scan-line{
  position:absolute;top:0;bottom:0;left:0;width:2px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(168,243,65,.45) 8%,
    rgba(180,255,170,1) 50%,
    rgba(168,243,65,.45) 92%,
    transparent 100%);
  box-shadow:0 0 14px rgba(168,243,65,.9), 0 0 32px rgba(168,243,65,.5);
  animation:scanSweep 7s linear infinite;
  will-change:transform;
}
.globe-scan-tail{
  position:absolute;top:0;bottom:0;left:-22%;width:22%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(168,243,65,0) 30%,
    rgba(168,243,65,.05) 60%,
    rgba(168,243,65,.14) 92%,
    rgba(140,235,160,.22) 100%);
  filter:blur(1px);
  animation:scanSweepTail 7s linear infinite;
  will-change:transform;
}
@keyframes scanSweep{
  0%   {transform:translateX(0)}
  98%  {transform:translateX(calc(100cqw - 2px))}
  100% {transform:translateX(calc(100cqw - 2px));opacity:0}
}
@keyframes scanSweepTail{
  0%   {transform:translateX(0);opacity:1}
  98%  {transform:translateX(100cqw);opacity:1}
  100% {transform:translateX(100cqw);opacity:0}
}
.globe-wrap{container-type:inline-size}

/* Subtle horizontal data flicker — like reading lines on a scanner */
.globe-scan-flicker{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:var(--r-lg);overflow:hidden;
  opacity:0;transition:opacity 1.2s ease 1.8s;
  background:repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 6px,
    rgba(168,243,65,.025) 6px,
    rgba(168,243,65,.025) 7px
  );
  mix-blend-mode:screen;
}
.globe-wrap.is-visible .globe-scan-flicker{opacity:1;animation:scanFlicker 4.5s ease-in-out infinite}
@keyframes scanFlicker{
  0%,100%{opacity:.55}
  35%{opacity:.8}
  70%{opacity:.4}
}

/* Status chip — bottom right corner of the map */
.globe-scan-status{
  position:absolute;right:14px;bottom:14px;z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:4px;
  background:rgba(2,7,24,.7);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.35);
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.18em;color:var(--leaf);
  opacity:0;transition:opacity 1s ease 2.2s;
}
.globe-wrap.is-visible .globe-scan-status{opacity:1}
.globe-scan-status .gs-dot{
  width:7px;height:7px;border-radius:50%;background:var(--leaf);
  box-shadow:0 0 8px var(--leaf-glow);
  animation:scanDot 1.4s ease-in-out infinite;
}
.globe-scan-status .gs-sep{opacity:.45}
.globe-scan-status .gs-val{color:var(--bone);font-weight:600}
@keyframes scanDot{
  0%,100%{opacity:.4;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.1)}
}
@media (prefers-reduced-motion:reduce){
  .globe-scan-line, .globe-scan-tail{animation:none;display:none}
  .globe-scan-flicker{animation:none;opacity:.4}
  .globe-scan-status .gs-dot{animation:none}
}

/* Donation pings — green expanding rings spawned by JS at random
   pin coordinates. Each lives ~1.8s then is removed from the DOM. */
.donation-ping{
  position:absolute;width:10px;height:10px;border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:1;
  border:1px solid rgba(168,243,65,.85);
  box-shadow:0 0 14px rgba(168,243,65,.5);
  animation:donationPing 1.8s cubic-bezier(.22,.9,.3,1) forwards;
}
@keyframes donationPing{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:1;border-width:2px}
  100%{transform:translate(-50%,-50%) scale(7);opacity:0;border-width:.5px}
}
.pin{
  position:absolute;transform:translate(-50%,-50%) scale(.2);z-index:2;
  opacity:0;
  transition:opacity .6s ease, transform .7s cubic-bezier(.34,1.56,.5,1);
}
.globe-wrap.is-visible .pin{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}
/* Stagger pin drops — feels like satellites landing one by one */
.globe-wrap.is-visible .pin:nth-of-type(1){transition-delay:1.3s}
.globe-wrap.is-visible .pin:nth-of-type(2){transition-delay:1.4s}
.globe-wrap.is-visible .pin:nth-of-type(3){transition-delay:1.5s}
.globe-wrap.is-visible .pin:nth-of-type(4){transition-delay:1.6s}
.globe-wrap.is-visible .pin:nth-of-type(5){transition-delay:1.7s}
.globe-wrap.is-visible .pin:nth-of-type(6){transition-delay:1.8s}
.globe-wrap.is-visible .pin:nth-of-type(7){transition-delay:1.9s}
.globe-wrap.is-visible .pin:nth-of-type(8){transition-delay:2.0s}
.globe-wrap.is-visible .pin:nth-of-type(9){transition-delay:2.1s}
.globe-wrap.is-visible .pin:nth-of-type(10){transition-delay:2.2s}
.globe-wrap.is-visible .pin:nth-of-type(n+11){transition-delay:2.3s}
.globe-wrap.is-visible .pin:nth-of-type(n+15){transition-delay:2.4s}
.globe-wrap.is-visible .pin:nth-of-type(n+19){transition-delay:2.5s}
.pin-dot{
  width:10px;height:10px;border-radius:50%;background:var(--leaf);
  box-shadow:0 0 0 0 var(--leaf-glow), 0 0 12px var(--leaf-glow);
  animation:pinPulse 2.6s ease-out infinite;
  display:block;
}
@media (max-width:720px){
  .pin-dot{width:7px;height:7px}
  .pin.is-featured .pin-dot{width:10px;height:10px}
  .pin-label{font-size:10px;padding:3px 7px;left:14px}
  .pin{display:none}
  .pin.is-featured, .pin.is-urgent{display:block}
}
.pin.is-urgent .pin-dot{background:var(--coral);box-shadow:0 0 0 0 rgba(226,106,91,.45), 0 0 12px rgba(226,106,91,.5);animation-name:pinPulseUrgent}
.pin.is-featured .pin-dot{width:14px;height:14px;background:var(--sun);box-shadow:0 0 0 0 rgba(240,194,95,.45), 0 0 18px rgba(240,194,95,.5);animation-name:pinPulseFeatured}
@keyframes pinPulse{
  0%{box-shadow:0 0 0 0 rgba(168,243,65,.5), 0 0 12px var(--leaf-glow)}
  70%{box-shadow:0 0 0 14px rgba(168,243,65,0), 0 0 12px var(--leaf-glow)}
  100%{box-shadow:0 0 0 0 rgba(168,243,65,0), 0 0 12px var(--leaf-glow)}
}
@keyframes pinPulseUrgent{
  0%{box-shadow:0 0 0 0 rgba(226,106,91,.5), 0 0 12px rgba(226,106,91,.5)}
  70%{box-shadow:0 0 0 14px rgba(226,106,91,0), 0 0 12px rgba(226,106,91,.5)}
  100%{box-shadow:0 0 0 0 rgba(226,106,91,0), 0 0 12px rgba(226,106,91,.5)}
}
@keyframes pinPulseFeatured{
  0%{box-shadow:0 0 0 0 rgba(240,194,95,.5), 0 0 18px rgba(240,194,95,.5)}
  70%{box-shadow:0 0 0 18px rgba(240,194,95,0), 0 0 18px rgba(240,194,95,.5)}
  100%{box-shadow:0 0 0 0 rgba(240,194,95,0), 0 0 18px rgba(240,194,95,.5)}
}
.pin-label{
  position:absolute;left:18px;top:-6px;white-space:nowrap;
  font-family:var(--body);font-size:11px;letter-spacing:.06em;color:var(--bone);
  padding:5px 10px;border-radius:3px;background:rgba(2,7,24,.85);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  opacity:0;transform:translateX(-6px);transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.pin:hover .pin-label, .pin.is-featured .pin-label{opacity:1;transform:translateX(0)}
.pin.is-featured .pin-label{background:rgba(240,194,95,.15);color:var(--bone);box-shadow:inset 0 0 0 1px rgba(240,194,95,.4)}

/* Make pins clickable and slightly bigger for the popup interaction */
.pin{cursor:pointer;pointer-events:auto;padding:8px}
.pin:hover .pin-dot{transform:scale(1.15)}
.pin .pin-dot{transition:transform .2s}

/* Map popup overlay — centred inside the .globe-wrap */
.map-popup{
  position:absolute;z-index:10;
  width:min(380px, 90vw);
  background:rgba(2,7,24,.96);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.4), 0 30px 70px -20px rgba(0,0,0,.7);
  border-radius:10px;overflow:hidden;
  opacity:0;
  /* JS sets transform to translate(-50%,-50%) for centring on open */
  transform:translate(-50%, calc(-50% + 8px)) scale(.96);
  transition:opacity .3s cubic-bezier(.2,.7,.1,1), transform .3s cubic-bezier(.2,.7,.1,1.2);
  pointer-events:none;
}
.map-popup.is-open{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}
/* A dim layer behind the popup so the rest of the map recedes */
.globe-wrap::after{
  content:"";position:absolute;inset:0;z-index:9;pointer-events:none;
  background:rgba(2,7,24,0);transition:background .3s;
}
.globe-wrap.popup-open::after{background:rgba(2,7,24,.55);pointer-events:auto}
.map-popup .mp-img{
  width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;
  position:relative;
}
.map-popup .mp-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(2,7,24,.1) 100%);
}
.map-popup .mp-status{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--body);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  padding:4px 10px;border-radius:3px;color:var(--bone);
  background:rgba(2,7,24,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.map-popup.is-urgent .mp-status{color:var(--coral);box-shadow:inset 0 0 0 1px rgba(226,106,91,.5);background:rgba(226,106,91,.18)}
.map-popup.is-featured .mp-status{color:var(--sun);box-shadow:inset 0 0 0 1px rgba(240,194,95,.5);background:rgba(240,194,95,.18)}
.map-popup .mp-close{
  position:absolute;top:8px;right:8px;z-index:3;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(2,7,24,.85);color:var(--bone);font-size:14px;font-weight:700;
  cursor:pointer;border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  transition:background .2s;
}
.map-popup .mp-close:hover{background:rgba(168,243,65,.25)}
.map-popup .mp-body{padding:16px 18px 18px}
.map-popup .mp-location{
  display:flex;align-items:center;gap:8px;
  font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--leaf);font-weight:600;margin-bottom:6px;
}
.map-popup .mp-location svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none}
.map-popup h3{
  font-family:var(--display);font-weight:800;font-size:18px;line-height:1.2;
  letter-spacing:-.015em;color:var(--bone);margin-bottom:4px;
}
.map-popup .mp-ngo{font-size:12px;color:var(--mist);margin-bottom:10px}
.map-popup p{color:var(--mist);font-size:13px;line-height:1.5;margin-bottom:14px}
.map-popup .mp-stat{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding:8px 10px;border-radius:6px;background:rgba(168,243,65,.06);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.18);
}
.map-popup .mp-stat strong{font-family:var(--display);color:var(--leaf);font-weight:800;font-size:18px;letter-spacing:-.02em}
.map-popup .mp-stat span{color:var(--mist);font-size:11.5px;line-height:1.3}
.map-popup .mp-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--leaf);color:var(--ink);font-weight:700;font-size:13px;
  padding:10px 16px;border-radius:4px;letter-spacing:.01em;
  transition:background .2s, transform .2s;
}
.map-popup .mp-cta:hover{background:#B9F764;transform:translateX(2px)}
.map-popup .mp-cta .arrow{transition:transform .2s}
.map-popup .mp-cta:hover .arrow{transform:translateX(3px)}

/* Map summary strip — counts by category */
.map-summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px;
}
@media (max-width:560px){.map-summary{grid-template-columns:repeat(2,1fr);gap:8px}}
.map-summary .ms{
  padding:18px 18px;border-radius:8px;background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 0 1px var(--line-2);
  display:grid;grid-template-columns:1fr 60px;align-items:center;column-gap:16px;row-gap:4px;
}
.map-summary .ms b{
  grid-column:1;grid-row:1;
  font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-.02em;color:var(--bone);line-height:1;
}
.map-summary .ms span{
  grid-column:1;grid-row:2;
  font-size:12px;color:var(--mist);letter-spacing:.06em;
}
.map-summary .ms .ms-icon{
  grid-column:2;grid-row:1 / span 2;
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;color:var(--leaf);
  background:rgba(168,243,65,.10);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.30);
}
.map-summary .ms .ms-icon svg{width:32px;height:32px;display:block}
.map-summary .ms.is-feature b{color:var(--sun)}
.map-summary .ms.is-feature .ms-icon{
  color:var(--sun);background:rgba(240,194,95,.10);
  box-shadow:inset 0 0 0 1px rgba(240,194,95,.30);
}
.map-summary .ms.is-active b{color:var(--leaf)}
.map-summary .ms.is-urgent b{color:var(--coral)}
.map-summary .ms.is-urgent .ms-icon{
  color:var(--coral);background:rgba(226,106,91,.10);
  box-shadow:inset 0 0 0 1px rgba(226,106,91,.30);
}

.globe-legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:40px;
}
.globe-legend > div{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:800;font-size:17px;
  letter-spacing:-.005em;color:var(--bone);
  padding:16px 24px;border-radius:8px;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:transform .2s;
}
.globe-legend > div:hover{transform:translateY(-1px)}
.globe-legend .glg-dot{
  width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  position:relative;
}
.globe-legend .glg-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid currentColor;opacity:.4;
}
.globe-legend .glg-active{background:var(--leaf);color:var(--leaf);box-shadow:0 0 12px var(--leaf-glow)}
.globe-legend .glg-urgent{background:var(--coral);color:var(--coral);box-shadow:0 0 12px rgba(226,106,91,.55)}
.globe-legend .glg-feature{background:var(--sun);color:var(--sun);box-shadow:0 0 12px rgba(240,194,95,.55)}
.globe-legend > div:has(.glg-active){box-shadow:inset 0 0 0 1px rgba(168,243,65,.30);background:rgba(168,243,65,.06)}
.globe-legend > div:has(.glg-urgent){box-shadow:inset 0 0 0 1px rgba(226,106,91,.30);background:rgba(226,106,91,.06)}
.globe-legend > div:has(.glg-feature){box-shadow:inset 0 0 0 1px rgba(240,194,95,.30);background:rgba(240,194,95,.06)}

/* =================================================
   B-ROLL BURST — asymmetric video bento
   ================================================= */
.broll-section{position:relative}
.broll{display:grid;grid-template-columns:1fr;grid-auto-rows:240px;gap:16px;margin-top:40px}
@media (min-width:720px){.broll{grid-template-columns:1fr 1fr;grid-auto-rows:280px;gap:18px}}
@media (min-width:1100px){
  .broll{
    grid-template-columns:1.7fr 1fr 1fr;
    grid-template-rows:280px 280px;
    gap:20px;
  }
  .broll .b1{grid-column:1;grid-row:1 / span 2}
  .broll .b2{grid-column:2 / span 2;grid-row:1}
  .broll .b3{grid-column:2;grid-row:2}
  .broll .b4{grid-column:3;grid-row:2}
}
.btile{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink-60);isolation:isolate;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .5s cubic-bezier(.2,.7,.1,1.2), box-shadow .4s;
}
.btile:hover{transform:translateY(-3px);box-shadow:0 40px 80px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(168,243,65,.3)}
.btile video, .btile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.78);transition:filter .5s, transform 1s}
.btile:hover video, .btile:hover img{filter:saturate(1.05) brightness(.85);transform:scale(1.04)}
.btile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,7,24,0) 35%, rgba(2,7,24,.09) 75%, rgba(2,7,24,.11) 100%);pointer-events:none}
/* B-roll cards now mirror the project-card pattern:
   top-inset two-line chip + clear "Watch on the channel" CTA */
.btile{position:relative}
.btile .b-tag{
  position:absolute;top:0;left:0;z-index:3;
  display:inline-flex;align-items:center;gap:11px;
  padding:9px 14px;border-radius:6px;
  background:rgba(2,7,24,.45);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  font-family:var(--display);color:var(--bone);
  max-width:calc(100% - 40px);
  transition:box-shadow .3s, transform .3s, background .3s;
}
.btile:hover .b-tag{
  background:rgba(2,7,24,.60);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.45),
             0 10px 30px -8px rgba(168,243,65,.35);
  transform:translateY(-1px);
}
.btile .b-tag .dot{
  width:7px;height:7px;border-radius:50%;background:var(--leaf);
  box-shadow:0 0 8px var(--leaf-glow);flex:0 0 7px;
  animation:pinPulse 2.6s ease-out infinite;
}
.btile .b-tag .tag-text{
  display:flex;flex-direction:column;align-items:flex-start;line-height:1.08;
}
.btile .b-tag .tag-status{
  font-weight:800;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone);
}
.btile .b-tag .tag-location{
  font-weight:600;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mist);
  margin-top:3px;opacity:.85;
}
/* Meta wrapper spans the full card so the absolutely-positioned chip
   anchors to the TOP-LEFT and the title/CTA flex to the BOTTOM */
.btile .b-meta{
  position:absolute;inset:0;
  padding:22px 24px;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  pointer-events:none;
}
.btile .b-meta > *{pointer-events:auto}
.btile h3{
  font-family:var(--display);font-weight:800;
  font-size:clamp(20px,1.8vw,26px);line-height:1.05;letter-spacing:-.02em;
  max-width:20ch;margin:0;
}
.btile .b-sub{color:var(--mist);font-size:13.5px;max-width:34ch;margin:0}
.btile .b-cta{
  margin-top:10px;
  font-family:var(--display);font-weight:700;font-size:13px;
  color:var(--leaf);letter-spacing:.04em;
  border-bottom:1px solid rgba(168,243,65,.35);
  padding-bottom:4px;width:fit-content;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .25s, border-color .25s, transform .25s;
}
.btile .b-cta .arrow{
  display:inline-flex;transition:transform .25s;
}
.btile:hover .b-cta{
  color:#D3FA9E;border-bottom-color:var(--leaf);
}
.btile:hover .b-cta .arrow{transform:translateX(4px)}

/* CTA tile (text-only, breaks the rhythm) */
.btile.cta-tile{
  background:linear-gradient(150deg, var(--ink-60) 0%, var(--ink-80) 100%);
  display:flex;flex-direction:column;justify-content:space-between;padding:24px;
}
.btile.cta-tile::after{display:none}
.btile.cta-tile .b-num{
  font-family:var(--display);font-weight:900;font-size:clamp(48px,5vw,72px);line-height:.95;letter-spacing:-.03em;
  background:linear-gradient(180deg, var(--bone) 0%, #8c91a3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.btile.cta-tile .b-num-label{color:var(--mist);font-size:13px;margin-top:6px}
.btile.cta-tile .b-cta-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.btile.cta-tile h3{color:var(--bone);font-size:20px;max-width:14ch}
.btile.cta-tile .b-arrow{
  width:40px;height:40px;border-radius:4px;
  display:grid;place-items:center;flex:0 0 40px;
  background:var(--leaf);color:var(--ink);font-weight:700;font-size:18px;
  transition:transform .25s, background .25s;
}
.btile.cta-tile:hover .b-arrow{transform:translateX(4px);background:#B9F764}

/* =================================================
   WATCH UNIVERSE — Originals, Podcasts, Kids, News
   ================================================= */
.watch-section{position:relative;padding:var(--pad-section) 0;background:var(--ink)}
.watch-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px}
@media (min-width:720px){.watch-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1100px){.watch-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
.wtile{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:340px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:24px;isolation:isolate;
  background:var(--ink-60);
  transition:transform .5s cubic-bezier(.2,.7,.1,1.2), box-shadow .4s;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  color:var(--bone);
}
.wtile:hover{transform:translateY(-4px);box-shadow:0 50px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(168,243,65,.3)}
.wtile::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-size:cover;background-position:center;
  filter:saturate(.85) brightness(.45);
  transition:filter .5s, transform 1s cubic-bezier(.2,.7,.1,1);
}
.wtile:hover::before{filter:saturate(1) brightness(.55);transform:scale(1.05)}
.wtile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(2,7,24,.07) 0%, rgba(2,7,24,.1) 100%);
}
.wtile .wvideo{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.45);
  transition:filter .5s, transform 1s cubic-bezier(.2,.7,.1,1);
}
.wtile:hover .wvideo{filter:saturate(1) brightness(.55);transform:scale(1.05)}
/* Per-tile bg images */
.wtile.w-originals::before{background-image:url('https://images.squarespace-cdn.com/content/v1/680b6d1bd82ab7606a6e0812/2d5133be-3f2e-4e21-8f46-fef9d53de7c4/1.png?format=1500w')}
.wtile.w-podcasts::before{background-image:url('https://images.squarespace-cdn.com/content/v1/680b6d1bd82ab7606a6e0812/93dc6ac0-8b38-4ff2-af21-b036a82389fd/ecoflix_Going+Wild+with+John+and+James+-+Episode+16000+x+4000.jpg?format=1500w')}
.wtile.w-kids::before{background-image:url('https://images.squarespace-cdn.com/content/v1/680b6d1bd82ab7606a6e0812/36022021-b843-46b1-ae63-3a304e57b601/ecoflix_elephantnaturepark_6000+x+4000.jpg?format=1500w')}
.wtile.w-news::before{background-image:url('https://images.squarespace-cdn.com/content/v1/680b6d1bd82ab7606a6e0812/e2176e9c-ec3a-442e-9f54-8002f1ee3db9/ecoflix_THELASTSTAND_6000+x+4000.jpg?format=1500w')}

.wtile .wicon{
  width:44px;height:44px;color:var(--leaf);
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:rgba(168,243,65,.08);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.2);
}
.wtile .wicon svg{width:28px;height:28px;filter:drop-shadow(0 2px 8px rgba(168,243,65,.35))}
.wtile .w-eyebrow{
  font-family:var(--body);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mist);font-weight:600;
  display:flex;align-items:center;gap:8px;margin-top:14px;
}
.wtile h3{
  font-family:var(--display);font-weight:800;font-size:clamp(22px,2.2vw,30px);
  line-height:1.05;letter-spacing:-.02em;margin-top:8px;max-width:18ch;
}
.wtile h3 em{font-style:italic;font-weight:500;color:var(--leaf)}
.wtile .w-desc{color:var(--mist);font-size:14px;line-height:1.5;margin-top:10px;max-width:32ch}
.wtile .w-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--bone);
  padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.25);
  transition:color .25s, border-color .25s;
  margin-top:20px;align-self:start;
}
.wtile:hover .w-link{color:var(--leaf);border-bottom-color:var(--leaf)}
.wtile .w-link .arrow{transition:transform .25s}
.wtile:hover .w-link .arrow{transform:translateX(4px)}

/* =================================================
   STAGE 6 — SHOWCASE: featured trailer
   ================================================= */
.feature-trailer{display:block;position:relative;border-radius:var(--r-xl);overflow:hidden;background:#000;aspect-ratio:16/9;max-width:920px;width:100%;margin:0 auto;box-shadow:0 60px 100px -40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);color:inherit;text-decoration:none}
.feature-trailer .poster{
  position:absolute;inset:0;
  background:url('https://images.squarespace-cdn.com/content/v1/680b6d1bd82ab7606a6e0812/eaa71cc1-d292-4414-9d1a-baebb3020488/ecoflix_FREE_BILLY_6000+x+4000.jpg?format=2500w') center/cover no-repeat;
  filter:saturate(.92) contrast(1.05);
}
.feature-trailer .trailer-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1) contrast(1.05) brightness(.95);
}
.feature-trailer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.32) 100%), radial-gradient(60% 80% at 50% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,.16) 100%);pointer-events:none}
.feature-trailer .meta{position:absolute;left:clamp(28px,4vw,56px);right:clamp(28px,4vw,56px);bottom:clamp(28px,4vw,56px);z-index:2}
.feature-trailer .meta h3{font-size:clamp(28px,3.4vw,56px);line-height:1.02;max-width:18ch;font-weight:800;letter-spacing:-.025em}
.feature-trailer .meta h3 em{font-style:italic;font-weight:500;color:var(--leaf)}
.feature-trailer .meta p{color:var(--mist);margin-top:10px;max-width:48ch}
.feature-trailer .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.4);
  transition:transform .3s, box-shadow .3s;
}
.feature-trailer .play::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,.3);
  animation:playPulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes playPulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}
  70%{box-shadow:0 0 0 24px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.feature-trailer .play:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.6)}
.feature-trailer .play::after{
  content:"";display:block;border-style:solid;
  border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--ink);
  margin-left:5px;
}

/* =================================================
   PARTNERS marquee
   ================================================= */
.partners{padding:var(--pad-section) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-80)}
.marquee{
  position:relative;display:flex;gap:48px;overflow:hidden;margin-top:50px;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{display:flex;gap:48px;flex:0 0 auto;animation:scroll 50s linear infinite;will-change:transform}
@keyframes scroll{to{transform:translateX(-50%)}}
.partner{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  height:64px;min-width:120px;padding:0 12px;
  font-family:var(--display);font-weight:700;font-size:18px;color:var(--bone);
  white-space:nowrap;opacity:.7;
  transition:opacity .3s, color .3s, transform .3s;
  position:relative;
}
.partner img{
  height:44px;width:auto;max-width:180px;object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.95;
  transition:filter .3s, opacity .3s;
}
.partner:hover{opacity:1;color:var(--leaf);transform:translateY(-1px)}
.partner:hover img{opacity:1}

/* =================================================
   100% PROMISE — value prop + watch-the-difference loop
   ================================================= */
.promise{
  position:relative;padding:var(--pad-section) 0;overflow:hidden;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-80) 50%, var(--ink) 100%);
  isolation:isolate;
}
.promise::before{
  content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(34% 44% at 18% 28%, rgba(168,243,65,.28), transparent 62%),
    radial-gradient(34% 44% at 82% 72%, rgba(42,122,59,.32), transparent 62%),
    radial-gradient(22% 22% at 50% 50%, rgba(126,225,136,.16), transparent 70%);
  filter:blur(70px);
  animation:drift 24s ease-in-out infinite alternate, glowBreathe 8s ease-in-out infinite;
}
.promise-grid{
  display:grid;grid-template-columns:1fr;gap:48px;align-items:center;
}
@media (min-width:960px){
  .promise-grid{grid-template-columns:1.05fr 1fr;gap:80px}
}
.promise-left{display:grid;gap:24px}
.promise-100{
  font-family:var(--display);font-weight:900;
  font-size:clamp(96px,18vw,240px);line-height:.85;letter-spacing:-.05em;
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
  display:flex;align-items:baseline;gap:8px;
}
.promise-100 em{
  font-style:normal;font-weight:900;
  font-size:.42em;
  background:linear-gradient(180deg, var(--bone) 0%, #8c91a3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.02em;
  animation:none;
}
.promise-left h2{
  font-family:var(--display);font-weight:800;font-size:clamp(28px,3.5vw,44px);
  line-height:1.05;letter-spacing:-.025em;max-width:22ch;
}
.promise-left h2 em{font-style:italic;font-weight:500;color:var(--leaf)}
.promise-left p{color:var(--mist);font-size:17px;line-height:1.6;max-width:48ch}
.promise-mini{
  display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:6px;
}
.promise-mini span{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-size:12px;letter-spacing:.06em;font-weight:500;
  color:var(--mist);padding:7px 12px;border-radius:3px;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line-2);
}
.promise-mini svg{width:14px;height:14px;stroke:var(--leaf);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Right side — watch the difference / update card stack */
.promise-right{position:relative;display:grid;gap:14px}
.promise-right .eyebrow{margin-bottom:4px}
.promise-right h3{
  font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,30px);
  line-height:1.1;letter-spacing:-.02em;max-width:22ch;
}
.promise-right h3 em{font-style:italic;font-weight:500;color:var(--leaf)}
.update-stream{display:grid;gap:14px;margin-top:18px}
.update-card{
  display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;
  padding:16px;border-radius:8px;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:transform .35s cubic-bezier(.2,.7,.1,1.2), box-shadow .3s, background .3s;
}
.update-card:hover{
  transform:translateX(4px);
  background:rgba(168,243,65,.04);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.3);
}
.update-thumb{
  width:64px;height:64px;border-radius:6px;overflow:hidden;
  background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.update-body{display:grid;gap:4px;min-width:0}
.update-meta{
  font-family:var(--body);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--leaf);font-weight:600;display:flex;align-items:center;gap:8px;
}
.update-meta .ud{width:5px;height:5px;border-radius:50%;background:var(--leaf);box-shadow:0 0 6px var(--leaf-glow);animation:pulse 2.4s ease-out infinite}
.update-title{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.25;letter-spacing:-.01em;color:var(--bone)}
.update-desc{color:var(--mist);font-size:13px;line-height:1.45;margin-top:2px}
.update-cta{
  color:var(--mist-2);font-size:18px;transition:color .25s, transform .25s;align-self:center;
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
}
.update-cta .uicon{
  width:24px;height:24px;color:var(--leaf);opacity:.5;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .25s;
}
.update-cta .uicon svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.update-card:hover .update-cta{color:var(--leaf);transform:translateX(3px)}
.update-card:hover .uicon{opacity:1}

/* =================================================
   FOUNDER QUOTE — David Casselman, Ecoflix
   ================================================= */
.founder-quote{
  position:relative;padding:var(--pad-section) 0;overflow:hidden;
  background:#000;isolation:isolate;color:var(--bone);
}
.founder-quote .fq-video{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:saturate(.95) brightness(.32) contrast(1.1);
}
.founder-quote::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 70% at 30% 40%, rgba(168,243,65,.04), transparent 65%),
    linear-gradient(180deg, rgba(2,7,24,.26), rgba(2,7,24,.34));
}
.founder-quote .wrap-narrow{position:relative;z-index:1}
.fq-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--body);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--leaf);font-weight:700;margin-bottom:32px;
}
.fq-eyebrow::before{
  content:"";width:32px;height:1px;background:var(--leaf);box-shadow:0 0 6px var(--leaf-glow);
}
.fq-text{
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(28px,4.2vw,56px);line-height:1.15;letter-spacing:-.02em;
  max-width:24ch;color:var(--bone);
  text-shadow:none;
}
.fq-text em{
  font-style:italic;font-weight:500;
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
}
.fq-attribution{
  display:flex;align-items:center;gap:18px;margin-top:48px;
}
.fq-avatar{
  width:108px;height:108px;border-radius:50%;flex:0 0 108px;
  background-image:url('https://ecoflix.com/wp-content/uploads/elementor/thumbs/1_APPROVED-q46rqy56t03hkwo8el10xmpqojy75v4fwtsji6e0lk.jpg');
  background-size:cover;background-position:center top;
  box-shadow:0 0 0 2px rgba(168,243,65,.5), 0 0 0 6px rgba(168,243,65,.08), 0 14px 36px -10px rgba(0,0,0,.7);
}
.fq-meta strong{
  display:block;font-family:var(--display);font-weight:800;font-size:18px;
  letter-spacing:-.01em;color:var(--bone);
}
.fq-meta span{
  display:block;font-family:var(--body);font-size:12px;color:var(--mist);
  letter-spacing:.18em;text-transform:uppercase;margin-top:4px;font-weight:600;
}
.fq-meta a{display:inline-flex;color:var(--leaf);font-size:13px;font-weight:600;margin-top:8px;border-bottom:1px solid rgba(168,243,65,.3);padding-bottom:2px;transition:border-color .2s}
.fq-meta a:hover{border-bottom-color:var(--leaf)}
/* Coord lozenge override inside .fq-meta — the generic 'span' rule
   above would otherwise cascade into the lozenge's children */
.fq-meta .coord-stamp{display:inline-flex;margin:0 0 10px;letter-spacing:.14em}
.fq-meta .coord-stamp .cs-lat,
.fq-meta .coord-stamp .cs-lon{display:inline-flex;margin-top:0;letter-spacing:.14em;font-size:10.5px;color:rgba(168,243,65,.92)}
.fq-meta .coord-stamp .cs-sep{display:inline-block;margin-top:0;font-size:0}

/* =================================================
   TIMELINE — "How we got here" milestone spine
   ================================================= */
.timeline-section{position:relative;padding:var(--pad-section) 0;background:linear-gradient(180deg, var(--ink-80) 0%, var(--ink) 100%)}
.timeline-section .s-head{margin-bottom:80px}
.timeline{position:relative;max-width:1080px;margin:0 auto;padding:0 var(--pad-x)}
.timeline::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent);
  transform:translateX(-50%);
}
@media (max-width:880px){
  .timeline::before{left:20px}
}
.tl-item{
  position:relative;display:grid;grid-template-columns:1fr 60px 1fr;gap:0;
  margin-bottom:80px;align-items:start;
}
.tl-item:last-child{margin-bottom:0}
@media (max-width:880px){
  .tl-item{grid-template-columns:40px 1fr;gap:20px;margin-bottom:60px}
  .tl-item .tl-side{order:2;grid-column:2}
  .tl-item .tl-marker{order:1;grid-column:1;justify-self:start}
  .tl-item .tl-spacer{display:none}
}
.tl-item .tl-side{padding:0 32px;opacity:0;transform:translateY(20px);transition:opacity .8s, transform .8s cubic-bezier(.2,.7,.1,1)}
.tl-item.in .tl-side{opacity:1;transform:translateY(0)}
.tl-item:nth-child(even) .tl-side{grid-column:1;text-align:right}
.tl-item:nth-child(even) .tl-spacer{grid-column:3}
.tl-item:nth-child(odd) .tl-spacer{grid-column:1}
.tl-item:nth-child(odd) .tl-side{grid-column:3;text-align:left}
@media (max-width:880px){
  .tl-item:nth-child(even) .tl-side,
  .tl-item:nth-child(odd) .tl-side{text-align:left;grid-column:2}
}
.tl-marker{
  grid-column:2;justify-self:center;position:relative;z-index:2;
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2), 0 12px 30px -12px rgba(0,0,0,.6);
  font-family:var(--display);font-weight:800;color:var(--bone);font-size:14px;letter-spacing:-.01em;
  transition:box-shadow .4s, background .4s;
}
.tl-item.in .tl-marker{
  box-shadow:inset 0 0 0 1px var(--leaf), 0 12px 40px -10px var(--leaf-glow);
  background:radial-gradient(60% 60% at 30% 30%, var(--ink-60), var(--ink));
}
.tl-item.is-future .tl-marker{
  background:radial-gradient(60% 60% at 30% 30%, var(--leaf), var(--leaf-deep));
  color:var(--ink);
  box-shadow:0 16px 50px -10px var(--leaf-glow), inset 0 0 0 1px rgba(255,255,255,.2);
}
.tl-year{font-family:var(--display);font-weight:900;font-size:clamp(28px,3vw,42px);color:var(--bone);letter-spacing:-.025em;line-height:1}
.tl-year em{font-style:italic;font-weight:500;color:var(--leaf)}
.tl-headline{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.7vw,24px);margin-top:8px;line-height:1.15;letter-spacing:-.015em;color:var(--bone)}
.tl-body{color:var(--mist);font-size:15px;margin-top:10px;line-height:1.55;max-width:42ch}
.tl-item:nth-child(even) .tl-body{margin-left:auto}
@media (max-width:880px){
  .tl-item:nth-child(even) .tl-body{margin-left:0}
}
.tl-tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tl-item:nth-child(even) .tl-tags{justify-content:flex-end}
@media (max-width:880px){
  .tl-item:nth-child(even) .tl-tags{justify-content:flex-start}
}
.tl-tag{
  font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--mist);
  padding:5px 9px;border-radius:3px;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.tl-item.is-now .tl-tag{color:var(--leaf);box-shadow:inset 0 0 0 1px rgba(168,243,65,.3);background:rgba(168,243,65,.06)}
.tl-item.is-future .tl-tag{color:var(--sun);box-shadow:inset 0 0 0 1px rgba(240,194,95,.3);background:rgba(240,194,95,.06)}

/* =================================================
   STAGE 7 — CONVERT: Animated paths donate CTA
   ================================================= */
.convert{
  position:relative;text-align:center;
  padding:clamp(120px,18vh,200px) var(--pad-x);
  overflow:hidden;isolation:isolate;
  background:var(--ink);
}
.convert::before{
  content:"";position:absolute;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(52% 42% at 50% 50%, rgba(168,243,65,.36), transparent 62%),
    radial-gradient(30% 28% at 20% 80%, rgba(42,122,59,.22), transparent 70%),
    radial-gradient(30% 28% at 80% 20%, rgba(126,225,136,.18), transparent 70%);
  filter:blur(60px);
  animation:drift 22s ease-in-out infinite alternate, glowBreathe 7s ease-in-out infinite;
}
.convert h2{font-family:var(--display);font-weight:900;font-size:clamp(44px,7.5vw,128px);max-width:18ch;margin:0 auto;line-height:.95;letter-spacing:-.03em}
.convert h2 em{
  font-style:italic;font-weight:500;
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
}
.convert p{margin:28px auto 0;max-width:54ch;color:var(--mist);font-size:18px}
.convert .actions{margin-top:44px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;align-items:center}

/* =================================================
   FAQ
   ================================================= */
.faq-list{display:grid;gap:0;border-top:1px solid var(--line);margin-top:30px}
.faq-item{border-bottom:1px solid var(--line);padding:0}
.faq-item summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;cursor:pointer;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:focus-visible{outline:2px solid var(--leaf);outline-offset:4px;border-radius:4px}
.faq-q{display:contents}
.faq-q h3{font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:700;color:var(--bone);transition:color .25s;display:flex;align-items:center;gap:14px}
.faq-q h3 .qicon{
  width:28px;height:28px;flex:0 0 28px;
  display:flex;align-items:center;justify-content:center;
  color:var(--leaf);border-radius:5px;background:rgba(168,243,65,.06);
  box-shadow:inset 0 0 0 1px rgba(168,243,65,.18);
  transition:background .25s, transform .35s;
}
.faq-item[open] .qicon{background:rgba(168,243,65,.14);transform:rotate(8deg)}
.faq-q h3 .qicon svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.faq-item:hover summary .faq-q h3{color:var(--leaf)}
.faq-toggle{width:36px;height:36px;border-radius:50%;flex:0 0 36px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .35s, background .25s;font-weight:700}
.faq-item[open] .faq-toggle{transform:rotate(45deg);background:var(--leaf);color:var(--ink)}
.faq-a{color:var(--mist);font-size:16px;line-height:1.65;padding:0 60px 24px 0}

/* =================================================
   Footer — elegant edition.
   True black, generous breathing room, leaf-gradient horizon
   line up top, refined typography. Existing markup unchanged.
   ================================================= */
.footer{
  position:relative;
  background:#000;
  border-top:0;
  padding:110px 0 36px;
  color:var(--mist);
  font-size:14px;
  isolation:isolate;
}
/* Leaf hairline along the top — soft fade from each edge so the
   transition into the footer feels like an horizon line rather
   than a hard border. */
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(168,243,65,.10) 18%,
    rgba(168,243,65,.55) 50%,
    rgba(168,243,65,.10) 82%,
    transparent 100%);
  z-index:3;pointer-events:none;
}
/* A second, much wider luminous band that gives the horizon a
   subtle leaf bloom (no harsh shadow — just light spilling up). */
.footer::after{
  content:"";position:absolute;top:-1px;left:0;right:0;height:140px;
  background:radial-gradient(70% 100% at 50% 0%, rgba(168,243,65,.07), transparent 70%);
  pointer-events:none;z-index:2;
}
.footer .wrap{position:relative;z-index:4}

.footer-grid{
  display:grid;grid-template-columns:1fr;gap:48px;
}
@media (min-width:760px){
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:64px}
}

.footer h4{
  font-family:var(--display);font-weight:800;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bone);margin:0 0 22px;
  display:inline-flex;align-items:center;gap:10px;
  position:relative;
}
/* Tiny leaf coord-mark before each column title */
.footer h4::before{
  content:"⊕";color:var(--leaf);font-size:12px;font-weight:800;
}
.footer ul{list-style:none;display:grid;gap:14px;padding:0;margin:0}
.footer ul a{
  color:var(--mist);font-size:14px;
  font-family:var(--body);font-weight:500;
  text-decoration:none;letter-spacing:.005em;
  display:inline-flex;align-items:center;gap:8px;
  transition:color .2s ease, transform .25s cubic-bezier(.22,.9,.3,1);
}
/* Arrow appears + slides on hover */
.footer ul a::after{
  content:"→";font-family:var(--display);font-weight:800;font-size:11px;
  color:var(--leaf);
  opacity:0;transform:translateX(-6px);
  transition:opacity .2s ease, transform .25s cubic-bezier(.22,.9,.3,1);
}
.footer ul a:hover{ color:var(--bone) }
.footer ul a:hover::after{ opacity:1;transform:translateX(0) }

/* Brand column */
.footer-brand{ padding-right:24px }
.footer-brand .brand{ display:inline-block;line-height:0 }
.footer-brand .brand img{
  filter:drop-shadow(0 4px 18px rgba(168,243,65,.18));
  transition:transform .35s cubic-bezier(.22,.9,.3,1);
}
.footer-brand .brand:hover img{ transform:translateY(-2px) }
.footer-brand p{
  margin:18px 0 0;max-width:36ch;line-height:1.6;
  color:var(--mist);font-size:14.5px;
}
.footer-brand p:first-of-type{
  /* the italic tagline that follows the logo */
  margin-top:18px !important;
  font-family:var(--display) !important;
  font-style:italic !important;
  font-size:19px !important;
  color:var(--bone) !important;
  letter-spacing:-.005em;
  max-width:none;
}

/* Social — refined pill row */
.socials{
  display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;
}
.socials a{
  width:40px;height:40px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(168,243,65,.22);
  color:var(--mist);
  box-shadow:none;
  position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.22,.9,.3,1),
             background .25s ease, color .25s ease,
             border-color .25s ease;
}
.socials a::before{
  /* leaf wash that swipes in from the bottom on hover */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, transparent 0%, var(--leaf) 100%);
  transform:translateY(101%);
  transition:transform .35s cubic-bezier(.22,.9,.3,1);
}
.socials a:hover{
  color:var(--ink);
  border-color:var(--leaf);
  transform:translateY(-3px);
  box-shadow:0 8px 22px -10px rgba(168,243,65,.55);
}
.socials a:hover::before{ transform:translateY(0) }
.socials svg{position:relative;z-index:1}

/* Footer stats — kept on the homepage; lifted typography */
.footer-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin:60px 0 0;padding:32px 0 0;
  border-top:1px solid rgba(168,243,65,.14);
}
@media (max-width:720px){.footer-stats{grid-template-columns:repeat(2,1fr);gap:18px}}
.footer-stats div{
  font-family:var(--display);font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--mist-2);font-weight:700;line-height:1.4;
}
.footer-stats b{
  display:block;font-family:var(--display);
  font-size:clamp(28px,3vw,40px);color:var(--bone);
  font-weight:900;line-height:1;letter-spacing:-.025em;
  margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}

/* Footer base — copyright + legal links */
.footer-base{
  margin-top:48px;padding-top:28px;
  border-top:1px solid rgba(168,243,65,.10);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;
  font-family:var(--display);font-weight:600;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist-2);
}
.footer-base a{
  color:var(--mist-2);
  text-decoration:none;
  transition:color .2s ease;
}
.footer-base a:hover{ color:var(--leaf) }
.footer-base > div:first-child::before{
  content:"⊕ ";color:var(--leaf);font-weight:800;
}

/* =================================================
   Word-by-word reveal (split-letter style)
   ================================================= */
.reveal-words .word{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.15;padding-bottom:.08em}
.reveal-words .word-inner{
  display:inline-block;
  transform:translateY(110%) skewY(5deg);
  transition:transform 1s cubic-bezier(.7,0,.2,1);
  will-change:transform;
}
.reveal-words.in .word-inner{transform:translateY(0) skewY(0)}
.reveal-words.in .word:nth-child(1) .word-inner{transition-delay:0s}
.reveal-words.in .word:nth-child(2) .word-inner{transition-delay:.06s}
.reveal-words.in .word:nth-child(3) .word-inner{transition-delay:.12s}
.reveal-words.in .word:nth-child(4) .word-inner{transition-delay:.18s}
.reveal-words.in .word:nth-child(5) .word-inner{transition-delay:.24s}
.reveal-words.in .word:nth-child(6) .word-inner{transition-delay:.30s}
.reveal-words.in .word:nth-child(7) .word-inner{transition-delay:.36s}
.reveal-words.in .word:nth-child(8) .word-inner{transition-delay:.42s}
.reveal-words.in .word:nth-child(9) .word-inner{transition-delay:.48s}
.reveal-words.in .word:nth-child(10) .word-inner{transition-delay:.54s}

/* When .reveal-words wraps text inside <em>, the parent em's
   background-clip:text gradient gets orphaned because the actual text
   is now inside .word-inner spans. Reapply the gradient onto those
   inner spans so leaf-green emphasis words render correctly. */
.reveal-words em .word-inner{
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
}

/* =================================================
   Reveals
   ================================================= */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s, transform .9s cubic-bezier(.2,.7,.1,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .8s, transform .8s cubic-bezier(.2,.7,.1,1)}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal-stagger > *{opacity:1;transform:none}
}

/* ============ Project detail "From the field" gallery ============ */
.pd-gallery{
  padding:60px var(--pad-x);max-width:1180px;margin:0 auto;
}
.pd-gallery .pdg-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:28px;flex-wrap:wrap;gap:14px;
}
.pd-gallery h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.5vw,44px);letter-spacing:-.02em;
  margin:0;color:var(--bone);
}
.pd-gallery h2 em{font-style:italic;font-weight:500;color:var(--leaf)}
.pd-gallery .pdg-meta{
  font-family:var(--body);font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);
}
.pdg-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:repeat(2, minmax(180px, 1fr));
  gap:14px;
}
@media (max-width:880px){
  .pdg-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
}
@media (max-width:520px){
  .pdg-grid{grid-template-columns:1fr}
}
.pdg-tile{
  position:relative;overflow:hidden;border-radius:18px;
  background:var(--ink-60);
  border:1px solid rgba(255,255,255,.06);
  min-height:200px;
  transition:transform .35s cubic-bezier(.22,.9,.3,1), border-color .25s ease;
}
.pdg-tile:hover{transform:translateY(-3px);border-color:rgba(168,243,65,.45)}
.pdg-tile.is-feature{grid-column:1;grid-row:1 / span 2}
@media (max-width:880px){.pdg-tile.is-feature{grid-column:auto;grid-row:auto}}
.pdg-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1.2s cubic-bezier(.22,.9,.3,1), filter .35s ease;
  filter:saturate(.95);
}
.pdg-tile:hover .pdg-img{transform:scale(1.06);filter:saturate(1.1)}
.pdg-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(2,7,24,.1));
  pointer-events:none;
}
.pdg-cap{
  position:absolute;left:18px;right:18px;bottom:16px;z-index:2;
  font-family:var(--display);font-weight:600;font-size:13px;
  color:var(--bone);letter-spacing:.01em;line-height:1.3;
}
.pdg-cap .pdg-coord{
  display:block;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(168,243,65,.85);font-weight:700;margin-top:4px;
}

/* NGO context card (sits in side column) */
.pd-ngo-card{
  margin-top:18px;padding:20px;border-radius:16px;
  background:rgba(2,7,24,.5);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:14px;
}
.pd-ngo-card .pdng-logo{
  width:54px;height:54px;border-radius:12px;flex:0 0 54px;
  background:rgba(255,255,255,.92);background-size:contain;background-repeat:no-repeat;background-position:center;
  border:1px solid rgba(255,255,255,.1);
}
.pd-ngo-card .pdng-name{
  font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--bone);margin-bottom:2px;line-height:1.2;
}
.pd-ngo-card .pdng-link{
  font-family:var(--display);font-weight:600;font-size:12px;
  color:var(--leaf);text-decoration:none;letter-spacing:.04em;
}
.pd-ngo-card .pdng-link:hover{color:#B9F764}

/* Partner-NGO logo strip (mission / how-we-help) */
.ngo-strip{
  margin:0 auto;max-width:1180px;
  padding:60px var(--pad-x);text-align:center;
}
.ngo-strip .ngs-label{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--mist);font-weight:600;margin-bottom:24px;
}
.ngo-strip .ngs-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center;
}
@media (max-width:880px){.ngo-strip .ngs-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.ngo-strip .ngs-grid{grid-template-columns:repeat(2,1fr)}}
.ngo-strip .ngs-logo{
  height:50px;border-radius:10px;
  background:rgba(255,255,255,.92);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:saturate(.6);opacity:.78;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
  border:1px solid rgba(255,255,255,.05);
}
.ngo-strip .ngs-logo:hover{filter:saturate(1);opacity:1;transform:translateY(-2px)}

/* ============ Mobile padding pass ============ */
@media (max-width:760px){
  /* Compare cards: shrink internal padding so content has room */
  .compare-card{padding:28px 22px 24px !important}
  .compare-card .cc-pct{font-size:clamp(64px,18vw,108px) !important}
  .compare-card .cc-label{font-size:15px}
  .compare-vs{width:54px;height:54px;font-size:15px;margin:8px auto}

  /* Impact calculator: tighter padding + full available width */
  .impact-calc{padding:22px 20px 22px !important;margin:32px auto 0 !important;max-width:none !important}
  .calc-amount{font-size:clamp(40px,14vw,64px)}
  .calc-impact{grid-template-columns:auto 1fr;padding:14px 14px}
  .calc-impact-icon{width:44px;height:44px;flex:0 0 44px}

  /* Tonight strip: stop double-subtracting pad-x — let parent .wrap padding handle it */
  .tonight-strip{width:auto !important;max-width:none !important;margin:48px 0 0 !important}
  .tonight-hero .th-body{padding:24px 22px}
  .tonight-hero .th-title{font-size:clamp(22px,5.5vw,32px) !important}

  /* Nearme strip: same fix */
  .nearme{width:auto !important;max-width:none !important;margin:8px var(--pad-x) 28px !important}

  /* Live feed and side panels: don't constrain via outer width calc */
  .live-feed{width:auto !important;max-width:none !important;margin:32px 0 0 !important;padding:18px 18px 14px}
  .impacts-panel,.stories-panel,.projects-panel{padding:18px 18px}

  /* Live giving rows: line wraps cleanly */
  .live-feed .lf-body{flex-wrap:wrap;gap:4px}
  .live-feed .lf-meta{font-size:11px;width:100%;text-align:left}

  /* Section big headings: hold the line on size */
  .pg-hero{padding:120px var(--pad-x) 48px !important}
  .pg-hero h1{font-size:clamp(40px,11vw,72px) !important}
  .pd-hero{height:auto !important;min-height:520px !important;padding:120px 0 40px}
  .pd-hero h1{font-size:clamp(40px,11vw,72px) !important}
  .pd-stats{margin-top:-24px}
  .pd-stat{padding:16px 14px}
  .pd-stat .pds-num{font-size:clamp(22px,5.5vw,28px)}
  .pd-body{padding:48px var(--pad-x)}
  .pd-side{position:static;padding:22px 20px}

  /* Mission and how-we-help hero copy */
  .mission-section{padding:48px var(--pad-x)}
  .mission-section h2{font-size:clamp(28px,7vw,40px)}
  .ways{padding:32px var(--pad-x) 80px}
  .way{padding:28px 22px}
  .way h3{font-size:clamp(22px,6vw,28px) !important}

  /* Coord stamp on small cards: keep it tidy */
  .pd-tag{font-size:10px;padding:5px 10px;letter-spacing:.14em}
  .pd-tags{gap:6px}

  /* Tighter species counter on mobile */
  .species-counter .sc-caption{font-size:clamp(22px,6vw,32px) !important;line-height:1.15}
  .species-counter .sc-sub{font-size:15px;max-width:38ch}
  .species-counter .sc-number{font-size:clamp(72px,20vw,128px) !important}

  /* Compare section padding */
  .compare-section{padding:64px var(--pad-x) 32px !important}
  .compare h3{font-size:clamp(34px,9vw,56px) !important;margin-bottom:14px}
  .compare-lede{font-size:16px;margin-bottom:36px}
  .compare-eyebrow{font-size:11px;letter-spacing:.22em;gap:8px}
  .compare-eyebrow::before,.compare-eyebrow::after{width:18px}
  .compare-foot{flex-direction:column;gap:8px;margin-top:32px}

  /* Hp-promise: keep the headline readable */
  .hp-promise{height:auto !important;min-height:90vh;padding:120px 0 80px !important}
  .hp-promise .hp-pct{font-size:clamp(56px,14vw,96px) !important}
  .hp-promise .hp-headline{font-size:clamp(20px,5.5vw,28px) !important;max-width:24ch}
  .hp-promise .hp-supporting{font-size:14.5px}
  .hp-promise .hp-chips{gap:6px;flex-wrap:wrap;justify-content:center}
  .hp-promise .hp-chip{font-size:10px;padding:6px 11px}

  /* Sticky donate bar: tighter */
  .sdb{padding:8px 14px}
  .sdb-txt{font-size:11.5px;letter-spacing:0}
  .sdb-mark{width:24px;height:24px;flex:0 0 24px;font-size:12px}
  .sdb-actions .sdb-btn{font-size:11.5px;padding:7px 12px}

  /* Hero stat cards 2x2: tighter padding + clear space below the actions */
  .hero-card-copy{padding-bottom:40px !important}
  .hero-stats{margin-top:24px !important}
  .hero-stats-eyebrow{margin-bottom:18px !important}
  .hstat{padding:14px 14px !important;gap:6px !important}
  .hnum{font-size:clamp(28px,8vw,38px) !important}
  .htitle{font-size:12px !important;letter-spacing:.02em !important}
  .hlbl{font-size:10.5px !important;line-height:1.35 !important}
  /* Header on mobile: hide channel button to free space */
  .header .header-cta .btn-ghost{display:none}
  .header .header-cta .btn-primary{padding:9px 14px;font-size:12px}

  /* Project card padding on mobile */
  .proj-card .meta{padding:18px 18px !important}
  .proj-card h3{font-size:clamp(22px,6vw,28px) !important}

  /* Watch-the-change: don't crush the headline */
  .watch-change .wc-headline{font-size:clamp(38px,11vw,56px) !important}
}

@media (max-width:480px){
  .compare-card{padding:24px 18px 22px !important}
  .compare-card .cc-pct{font-size:clamp(56px,18vw,84px) !important}
  .tonight-hero{grid-template-columns:1fr}
  .tonight-hero .th-media{min-height:200px}
  .pg-hero h1{font-size:clamp(34px,11vw,60px) !important}
  .pd-hero h1{font-size:clamp(34px,11vw,60px) !important}
  .pd-stats-inner{grid-template-columns:1fr 1fr}
  .pd-stat .pds-num{font-size:22px}
  .sdb-txt{display:none}
  .sdb-mark{display:none}
  .sdb{justify-content:flex-end}
}


/* ================= UX ENHANCEMENT BUNDLE ================= */

/* === Skip to content + focus rings === */
.skip-to-content{
  position:absolute;left:-9999px;top:8px;z-index:1000;
  background:var(--leaf);color:#020718;
  padding:10px 18px;border-radius:8px;
  font-family:var(--display);font-weight:700;font-size:13px;
  text-decoration:none;letter-spacing:.02em;
}
.skip-to-content:focus{left:24px;outline:3px solid #B9F764;outline-offset:2px}
*:focus-visible{
  outline:2px solid var(--leaf);
  outline-offset:3px;
  border-radius:4px;
}
a:focus-visible,button:focus-visible,
.btn:focus-visible,.btn-quiet:focus-visible{
  outline-offset:4px;
}

/* === Back-to-top button === */
.bttop{
  position:fixed;right:24px;bottom:24px;z-index:55;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(168,243,65,.45);
  background:rgba(2,7,24,.7);color:var(--bone);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  opacity:0;pointer-events:none;
  transform:translateY(16px);
  transition:opacity .35s ease, transform .35s ease, background .25s ease;
}
.bttop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.bttop:hover{background:rgba(168,243,65,.18);transform:translateY(-2px)}
.bttop svg{width:18px;height:18px}
.bttop::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px dashed rgba(168,243,65,.3);
  animation:bttopSpin 14s linear infinite;
}
@keyframes bttopSpin{to{transform:rotate(360deg)}}
@media (max-width:600px){
  .bttop{right:14px;bottom:80px;width:40px;height:40px}
}

/* === Cinema-band caption typography (site-wide override) ===
   Every page that received a `.cinema-band` from the imagery agent
   has its own inline CSS for the caption. The default was a medium
   italic line with the coord stamp inline beside it — too small
   over a full-bleed cinematic photo. This override forces the
   quote to be BOLD and big, with the coord stamp pushed below on
   its own line in leaf colour. High-specificity selectors so it
   wins over the per-page inline rules. */
.cinema-band .cinema-band-caption,
section.cinema-band .cinema-band-caption{
  /* Centred both axes inside the band — top/bottom + left/right.
     Was bottom-anchored at 9% which felt off-balance against the
     hero-scale type. Now: top:50% + translateY(-50%) for vertical
     centre, left/right:0 + text-align:center for horizontal. */
  position:absolute !important;
  left:0;right:0;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  z-index:3;
  text-align:center;
  padding:0 var(--pad-x);
  font-family:var(--display) !important;
  font-style:italic !important;
  font-weight:800 !important;
  /* Hero-scale size so the caption reads as a true pull-quote
     over the cinematic image — sits in the same scale band as
     every .pg-hero h1 across the site. */
  font-size:clamp(40px, 6.2vw, 92px) !important;
  line-height:1.02 !important;
  letter-spacing:-.025em !important;
  color:var(--bone) !important;
  max-width:24ch !important;
  margin:0 auto !important;
  /* Legibility comes from the section's dark gradient overlay,
     not a text-shadow. Heavy stacked shadows produced an ugly
     smear behind the type — never use them anywhere on the site. */
}
/* Strengthen the cinema-band overlay so the text reads cleanly
   without resorting to text-shadow. The :after gradient is darker
   at the bottom where the caption sits. */
.cinema-band::after,
section.cinema-band::after{
  background:linear-gradient(180deg,
    rgba(2,7,24,.14) 0%,
    rgba(2,7,24,.04) 40%,
    rgba(2,7,24,.22) 75%,
    rgba(2,7,24,.34) 100%) !important;
}
/* Cinematic background VIDEO inside .cinema-band — replaces the
   former .cinema-band-img background-image divs across every page
   that opted in. The video covers the band exactly like the photo
   did, sits behind the overlay gradient + caption, and the
   IntersectionObserver in site.js pauses it when off-screen and
   sets playbackRate from data-rate (0.75x for a contemplative
   feel). The Unsplash photo remains as `poster=` for first-paint
   and as the prefers-reduced-motion fallback below. */
.cinema-band .cinema-band-video,
section.cinema-band .cinema-band-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;pointer-events:none;
  filter:saturate(1.04) contrast(1.04);
}
@media (max-width:760px){
  .cinema-band .cinema-band-video{ /* no parallax to manage; video already loops */ }
}
@media (prefers-reduced-motion:reduce){
  /* fall back to the poster image on reduced-motion */
  .cinema-band .cinema-band-video{ display:none }
  .cinema-band[data-poster-fallback="1"]{
    background-size:cover;background-position:center;
  }
}
/* Quote glyphs flank the caption nicely when there are visible
   curly quotes in the text — pure decoration, leaf-tinted. */
.cinema-band .cinema-band-caption strong,
.cinema-band .cinema-band-caption b{
  color:var(--leaf);font-style:italic;
}
/* The coord stamp inside .cs sits on its OWN line under the quote,
   shrunk to its monospace-stamp role. No text-shadow — clean type
   on top of the dark gradient overlay. */
.cinema-band .cinema-band-caption .cs,
section.cinema-band .cinema-band-caption .cs{
  display:flex !important;
  align-items:center;justify-content:center;
  gap:10px;
  margin:18px auto 0 !important;
  font-style:normal !important;
  font-family:var(--body) !important;
  font-size:12px !important;
  letter-spacing:.26em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
  color:var(--leaf) !important;
}
.cinema-band .cinema-band-caption .cs::before{
  /* leaf dot before the coord stamp */
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--leaf);box-shadow:0 0 8px var(--leaf-glow);
  display:inline-block;flex:0 0 6px;
}
/* Pull-out word(s) inside cinema-band captions — same italic-leaf
   pattern used by every h2 em across the site. Lets us highlight
   the emotional anchor of each quote in leaf-gradient. */
.cinema-band .cinema-band-caption em,
section.cinema-band .cinema-band-caption em{
  font-style:italic !important;
  font-weight:500 !important;
  !important;
  
  !important;
  !important;
  color:var(--leaf);-webkit-text-fill-color:var(--leaf) !important;
  
}
@media (prefers-reduced-motion:reduce){
  .cinema-band .cinema-band-caption em,
  section.cinema-band .cinema-band-caption em{ animation:none }
}
/* If the page hard-codes the ⊕ inside the .cs span, hide it — our
   leaf dot replaces it for a cleaner look. */
@media (max-width:720px){
  .cinema-band .cinema-band-caption,
  section.cinema-band .cinema-band-caption{
    font-size:clamp(28px, 8vw, 44px) !important;
    /* Stay centred top/bottom + left/right on mobile too. */
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    max-width:20ch !important;
  }
  .cinema-band .cinema-band-caption .cs,
  section.cinema-band .cinema-band-caption .cs{
    font-size:10.5px !important;letter-spacing:.22em !important;
    margin-top:12px !important;
  }
}

/* === Sticky compact donate bar — RETIRED ===
   The .sdb element used to fix to the top of every page above the
   header. It made the nav cramped (the header dropdowns had to fight
   for space) and added a permanent banner the visitor couldn't
   dismiss. Hidden globally — the header itself already carries a
   leaf "Support our work" CTA, and dedicated donate prompts now
   live inside the body of the page (species-counter band,
   hp-give-band, etc). Keep the rest of the rules below intact in
   case we want to re-enable later. */
.sdb{ display:none !important }
.sdb-original-hidden-rules{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:10px 22px;
  background:rgba(2,7,24,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(168,243,65,.18);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  transform:translateY(-110%);
  transition:transform .4s cubic-bezier(.22,.9,.3,1);
}
.sdb.show{transform:translateY(0)}
.sdb.atfoot{transform:translateY(-110%)}
.sdb-left{display:flex;align-items:center;gap:14px;min-width:0}
.sdb-mark{
  width:28px;height:28px;border-radius:6px;flex:0 0 28px;
  background:linear-gradient(135deg, var(--leaf), #B9F764);
  display:flex;align-items:center;justify-content:center;
  color:#020718;font-family:var(--display);font-weight:900;font-size:14px;
}
.sdb-txt{
  font-family:var(--body);font-size:13.5px;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sdb-txt b{color:var(--leaf);font-weight:700}
.sdb-actions{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.sdb-actions .sdb-btn{
  appearance:none;border:0;cursor:pointer;text-decoration:none;
  background:var(--leaf);color:#020718;
  font-family:var(--display);font-weight:700;font-size:13px;
  padding:9px 16px;border-radius:999px;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:6px;
  transition:transform .2s ease, background .2s ease;
}
.sdb-actions .sdb-btn:hover{background:#B9F764;transform:translateY(-1px)}
.sdb-actions .sdb-ghost{
  background:transparent;color:var(--bone);
  border:1px solid rgba(255,255,255,.18);
}
.sdb-actions .sdb-ghost:hover{border-color:var(--leaf);color:var(--leaf);background:rgba(168,243,65,.05)}
@media (max-width:760px){
  .sdb{padding:8px 14px}
  .sdb-txt{font-size:12px}
  .sdb-actions .sdb-ghost{display:none}
}

/* === Chapter scroll indicator === */
.chapnav{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);
  z-index:40;
  display:flex;flex-direction:column;gap:14px;
  padding:18px 12px;border-radius:999px;
  background:rgba(2,7,24,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(168,243,65,.16);
  opacity:0;transition:opacity .4s ease;
  pointer-events:none;
}
.chapnav.show{opacity:1;pointer-events:auto}
.chapnav .chap-dot{
  position:relative;width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.18);
  cursor:pointer;border:0;padding:0;
  transition:background .25s ease, transform .25s ease;
}
.chapnav .chap-dot:hover{background:rgba(168,243,65,.6);transform:scale(1.3)}
.chapnav .chap-dot.is-active{
  background:var(--leaf);
  box-shadow:0 0 0 4px rgba(168,243,65,.18);
}
.chapnav .chap-label{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  background:rgba(2,7,24,.95);color:var(--bone);
  font-family:var(--display);font-weight:600;font-size:12px;
  padding:6px 12px;border-radius:6px;
  white-space:nowrap;
  border:1px solid rgba(168,243,65,.3);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.chapnav .chap-dot:hover .chap-label{opacity:1;transform:translateY(-50%) translateX(-4px)}
@media (max-width:880px){.chapnav{display:none}}

/* === Cookie / privacy bar === */
.cookbar{
  position:fixed;left:24px;bottom:24px;z-index:55;
  max-width:380px;
  background:rgba(2,7,24,.92);
  border:1px solid rgba(168,243,65,.25);
  border-radius:14px;
  padding:18px 20px;
  font-family:var(--body);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 48px rgba(0,0,0,.5);
  transform:translateY(140%);opacity:0;
  transition:transform .5s cubic-bezier(.22,.9,.3,1), opacity .35s ease;
}
.cookbar.show{transform:translateY(0);opacity:1}
.cookbar-text{font-size:13px;color:var(--mist);line-height:1.45;margin-bottom:12px}
.cookbar-text b{color:var(--bone);font-weight:600}
.cookbar-actions{display:flex;gap:8px}
.cookbar-actions button{
  appearance:none;cursor:pointer;flex:1;
  padding:8px 14px;border-radius:8px;
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--bone);
  transition:all .2s ease;
}
.cookbar-actions .cb-accept{background:var(--leaf);color:#020718;border-color:var(--leaf)}
.cookbar-actions .cb-accept:hover{background:#B9F764}
.cookbar-actions .cb-decline:hover{border-color:var(--bone);background:rgba(255,255,255,.04)}
@media (max-width:600px){
  .cookbar{left:14px;right:14px;bottom:14px;max-width:none}
}

/* === Image shimmer placeholder === */
.proj-card .img:not(.img-loaded)::before,
.btile .b-thumb:not(.img-loaded)::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(168,243,65,.06) 50%, rgba(255,255,255,0) 100%);
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

/* === Save project (heart) === */
.proj-card .save-btn{
  position:absolute;top:18px;right:18px;z-index:5;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(2,7,24,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--bone);
  transition:all .25s ease;
}
.proj-card .save-btn:hover{background:rgba(168,243,65,.2);border-color:rgba(168,243,65,.55);transform:scale(1.1)}
.proj-card .save-btn svg{width:16px;height:16px;transition:transform .25s ease, fill .25s ease;fill:transparent;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.proj-card .save-btn.is-saved{background:rgba(255,91,91,.18);border-color:rgba(255,91,91,.5);color:#ff8a8a}
.proj-card .save-btn.is-saved svg{fill:#ff5b5b;stroke:#ff5b5b;animation:heartBeat .55s ease}
@keyframes heartBeat{
  0%,100%{transform:scale(1)}
  30%{transform:scale(1.3)}
  60%{transform:scale(.95)}
}

/* === Saved projects ribbon === */
.saved-ribbon{
  margin:0 auto 24px;max-width:calc(1080px - var(--pad-x) * 2);
  width:calc(100% - var(--pad-x) * 2);
  padding:14px 20px;
  border-radius:14px;
  background:rgba(255,91,91,.06);
  border:1px solid rgba(255,91,91,.25);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--body);font-size:13.5px;color:var(--bone);
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
}
.saved-ribbon.show{opacity:1;transform:translateY(0)}
.saved-ribbon svg{width:18px;height:18px;color:#ff5b5b;flex:0 0 18px}
.saved-ribbon b{color:var(--bone);font-weight:700}
.saved-ribbon a{color:var(--leaf);text-decoration:underline;text-underline-offset:3px}
.saved-ribbon .sr-clear{
  margin-left:auto;cursor:pointer;background:transparent;border:0;
  color:var(--mist);font-size:12px;font-family:var(--body);
}
.saved-ribbon .sr-clear:hover{color:var(--bone)}

/* === Project filter chips === */
.proj-filters{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 auto 18px;max-width:calc(1080px - var(--pad-x) * 2);
  width:calc(100% - var(--pad-x) * 2);
}
.proj-filter-label{
  font-family:var(--body);font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mist);margin-right:6px;
}
.proj-chip{
  appearance:none;cursor:pointer;
  padding:7px 14px;border-radius:999px;
  background:rgba(2,7,24,.4);
  border:1px solid rgba(255,255,255,.1);
  color:var(--bone);font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.02em;
  transition:all .2s ease;
}
.proj-chip:hover{border-color:rgba(168,243,65,.5);background:rgba(168,243,65,.08)}
.proj-chip.active{background:var(--leaf);color:#020718;border-color:var(--leaf)}
.proj-chip .pc-count{
  display:inline-block;margin-left:6px;
  font-size:11px;opacity:.7;font-weight:500;
}
.proj-card.is-filtered-out{display:none}

/* === View toggle (grid / list) === */
.view-toggle{
  display:inline-flex;border-radius:999px;
  background:rgba(2,7,24,.4);border:1px solid rgba(255,255,255,.1);
  padding:3px;margin-left:auto;
}
.view-toggle button{
  appearance:none;cursor:pointer;border:0;background:transparent;
  color:var(--mist);padding:6px 14px;border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .2s ease;
}
.view-toggle button:hover{color:var(--bone)}
.view-toggle button.active{background:var(--leaf);color:#020718}
.view-toggle button svg{width:13px;height:13px}
.hscroll-track.view-list{
  display:flex !important;
  flex-direction:column;
  gap:10px;
}
.hscroll-track.view-list .proj-card{
  flex:0 0 auto;width:100%;min-height:auto;
  flex-direction:row;align-items:stretch;
  padding:0;overflow:hidden;
}
.hscroll-track.view-list .proj-card .img{
  flex:0 0 180px;width:180px;height:auto;min-height:140px;
  position:relative;
}
.hscroll-track.view-list .proj-card .meta{
  position:relative !important;inset:auto !important;
  flex:1 1 auto;padding:18px 22px;
  display:flex !important;flex-direction:column;justify-content:center;
}
.hscroll-track.view-list .proj-card .tag,
.hscroll-track.view-list .proj-card .coord-stamp,
.hscroll-track.view-list .proj-card .save-btn,
.hscroll-track.view-list .proj-card .img-video,
.hscroll-track.view-list .proj-card video{display:none !important}

/* === Newsletter signup === */
.newsletter{
  position:relative;
  margin:80px auto 60px;max-width:760px;
  padding:38px 36px;border-radius:22px;
  background:linear-gradient(180deg,rgba(168,243,65,.08),rgba(168,243,65,.02));
  border:1px solid rgba(168,243,65,.22);
  text-align:center;font-family:var(--body);
  overflow:hidden;
}
.newsletter::before{
  content:"";position:absolute;inset:-30%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(168,243,65,.18), transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.newsletter .nl-eyebrow{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--leaf);font-weight:600;margin-bottom:10px;
  display:inline-flex;align-items:center;gap:8px;
}
.newsletter .nl-eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--leaf);box-shadow:0 0 0 0 var(--leaf-glow);
  animation:pulse 2.4s ease-out infinite;
}
.newsletter h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(24px,3vw,36px);letter-spacing:-.01em;
  color:var(--bone);margin:0 0 8px;
}
.newsletter p{
  font-size:15px;color:var(--mist);max-width:48ch;margin:0 auto 22px;line-height:1.5;
}
.newsletter form{
  display:flex;gap:8px;max-width:520px;margin:0 auto;
}
.newsletter input[type="email"]{
  flex:1 1 auto;min-width:0;
  padding:14px 18px;border-radius:999px;
  border:1px solid rgba(168,243,65,.28);
  background:rgba(2,7,24,.5);color:var(--bone);
  font-family:var(--body);font-size:14px;
}
.newsletter input[type="email"]:focus{outline:0;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(168,243,65,.18)}
.newsletter input[type="email"]::placeholder{color:rgba(255,255,255,.35)}
.newsletter button[type="submit"]{
  appearance:none;cursor:pointer;border:0;
  background:var(--leaf);color:#020718;
  font-family:var(--display);font-weight:700;font-size:13px;
  padding:0 22px;border-radius:999px;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.newsletter button[type="submit"]:hover{background:#B9F764}
.newsletter.is-success input,
.newsletter.is-success button{display:none}
.newsletter .nl-success{
  display:none;font-size:16px;color:var(--bone);
  padding:12px 0;
}
.newsletter .nl-success svg{
  width:38px;height:38px;color:var(--leaf);
  display:block;margin:0 auto 10px;
}
.newsletter.is-success .nl-success{display:block}
.newsletter .nl-error{
  display:none;font-size:13px;color:#ff8a8a;margin-top:10px;
}
.newsletter.is-error .nl-error{display:block}

/* === Compare us vs typical charity — hero-scale, prominent === */
.compare-section{
  position:relative;padding:120px var(--pad-x) 48px !important;
  background:var(--ink);overflow:hidden;
}
.species-section .species-counter{margin:0 auto !important}
.compare-section::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 35% at 75% 50%, rgba(168,243,65,.18), transparent 70%),
    radial-gradient(35% 30% at 25% 50%, rgba(226,106,91,.10), transparent 70%);
  filter:blur(60px);
}
.compare{
  position:relative;z-index:1;
  margin:0 auto;max-width:1080px;padding:0;
  font-family:var(--body);text-align:center;
}
.compare-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--leaf);font-weight:700;margin-bottom:22px;
}
.compare-eyebrow::before,
.compare-eyebrow::after{
  content:"";width:36px;height:1px;background:rgba(168,243,65,.55);
}
.compare h3{
  font-family:var(--display);font-weight:800;
  font-size:clamp(40px,6vw,84px);
  color:var(--bone);text-align:center;margin:0 0 18px;letter-spacing:-.025em;
  line-height:1.02;
}
.compare h3 em{
  font-style:italic;font-weight:500;color:var(--leaf);
}
.compare-lede{
  max-width:62ch;margin:0 auto 56px;
  font-size:19px;color:var(--mist);line-height:1.5;
}
.compare-lede b{color:var(--bone);font-weight:600}
.compare-wrap{position:relative}
.compare-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:stretch;
}
.compare-vs{
  align-self:center;justify-self:center;
  z-index:2;
  width:70px;height:70px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, #0a1228, #060c1f);
  border:1px solid rgba(255,255,255,.12);
  font-family:var(--display);font-weight:800;font-size:18px;
  letter-spacing:.04em;color:var(--bone);
  box-shadow:0 18px 48px rgba(0,0,0,.5), 0 0 0 6px rgba(2,7,24,.6);
}
@media (max-width:900px){
  .compare-grid{grid-template-columns:1fr;gap:18px}
  .compare-vs{margin:6px auto;width:56px;height:56px;font-size:15px}
}
.compare-card{
  position:relative;
  padding:48px 42px 42px;border-radius:24px;
  background:rgba(2,7,24,.55);
  border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;
  text-align:left;
  min-height:380px;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.9,.3,1), border-color .35s ease;
}
.compare-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#ff7a5b,#ff5b5b);
}
.compare-card.is-us{
  background:linear-gradient(180deg,rgba(168,243,65,.14),rgba(168,243,65,.03));
  border-color:rgba(168,243,65,.45);
  box-shadow:0 24px 60px rgba(168,243,65,.08), inset 0 0 0 1px rgba(168,243,65,.12);
}
.compare-card.is-us::before{
  background:linear-gradient(180deg,var(--leaf),rgba(168,243,65,.3));
}
.compare-card.is-us::after{
  content:"";position:absolute;inset:-50%;z-index:-1;
  background:radial-gradient(40% 40% at 70% 30%, rgba(168,243,65,.25), transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.compare-card:hover{transform:translateY(-3px)}
.compare-card .cc-name{
  font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,180,150,.95);margin-bottom:18px;
  display:inline-flex;align-items:center;gap:10px;
}
.compare-card .cc-name::before{
  content:"";width:10px;height:10px;border-radius:50%;
  background:#ff7a5b;box-shadow:0 0 14px rgba(255,122,91,.55);
}
.compare-card.is-us .cc-name{color:var(--leaf)}
.compare-card.is-us .cc-name::before{
  background:var(--leaf);
  box-shadow:0 0 18px var(--leaf-glow);
  animation:pulse 2.4s ease-out infinite;
}
.compare-card .cc-pct{
  font-family:var(--display);font-weight:900;
  font-size:clamp(80px,11vw,148px);line-height:.86;
  color:var(--bone);font-variant-numeric:tabular-nums;
  margin-bottom:10px;letter-spacing:-.04em;
}
.compare-card.is-us .cc-pct{
  
  
  -webkit-text-fill-color:var(--leaf);
}
.compare-card .cc-pct-tail{font-size:.45em;color:var(--mist);margin-left:6px;letter-spacing:.01em;font-weight:600}
.compare-card.is-us .cc-pct-tail{color:var(--leaf);-webkit-text-fill-color:var(--leaf)}
.compare-card .cc-label{
  font-size:17px;color:var(--mist);line-height:1.5;
  margin-bottom:auto;padding-bottom:24px;max-width:42ch;
}
.compare-card .cc-bar{
  position:relative;height:10px;border-radius:999px;
  background:rgba(255,255,255,.06);margin:0 0 16px;
  overflow:hidden;
}
.compare-card .cc-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,#ff7a5b,#ff5b5b);
  border-radius:999px;
  width:61%;
  transition:width 1.4s cubic-bezier(.22,.9,.3,1);
}
.compare-card.is-us .cc-fill{
  background:linear-gradient(90deg,var(--leaf),#D3FA9E);
  width:100%;
  box-shadow:0 0 24px rgba(168,243,65,.4);
}
.compare-card .cc-actual{
  font-family:var(--display);font-weight:600;
  font-size:17px;color:var(--bone);letter-spacing:.01em;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.compare-card .cc-actual b{
  color:var(--bone);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:24px;
}
.compare-card.is-us .cc-actual b{color:var(--leaf)}
.compare-card .cc-actual span{color:var(--mist-2);font-size:14px;font-weight:500}

.compare-foot{
  margin-top:48px;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
}
.compare-foot .cf-note{
  font-size:13px;color:var(--mist-2);letter-spacing:.04em;
}
.compare-foot .cf-source{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mist-2);font-weight:600;opacity:.7;
}

/* === Founder team strip === */
.team-strip{
  margin:32px auto 0;max-width:calc(1080px - var(--pad-x) * 2);
  width:calc(100% - var(--pad-x) * 2);
  position:relative;
}
.team-strip .ts-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:18px;flex-wrap:wrap;gap:14px;
}
.team-strip .ts-head .ts-eyebrow{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mist);font-weight:600;
}
.team-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
@media (max-width:880px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}}
.team-card{
  display:flex;flex-direction:column;gap:10px;
  padding:16px;border-radius:14px;
  background:rgba(2,7,24,.5);
  border:1px solid rgba(255,255,255,.06);
  text-decoration:none;color:inherit;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.team-card:hover{border-color:rgba(168,243,65,.4);background:rgba(2,7,24,.65);transform:translateY(-2px)}
.team-avatar{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg, rgba(168,243,65,.25), rgba(168,243,65,.05));
  border:1px solid rgba(168,243,65,.35);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:18px;
  color:var(--leaf);letter-spacing:.04em;
}
.team-card .tm-name{
  font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--bone);letter-spacing:-.005em;
}
.team-card .tm-role{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--leaf);font-weight:600;
}
.team-card .tm-bio{
  font-size:12.5px;color:var(--mist);line-height:1.4;
}

/* === Press detail expander === */
.press-grid > span{cursor:pointer;position:relative}
.press-detail{
  display:none;
  margin:24px auto 0;max-width:680px;
  padding:18px 22px;border-radius:14px;
  background:rgba(2,7,24,.55);
  border:1px solid rgba(168,243,65,.2);
  text-align:left;font-family:var(--body);
  position:relative;
}
.press-detail.show{display:block;animation:pdIn .35s cubic-bezier(.22,.9,.3,1) both}
@keyframes pdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.press-detail .pd-source{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--leaf);font-weight:600;margin-bottom:8px;
}
.press-detail blockquote{
  font-family:var(--display);font-weight:500;
  font-size:18px;line-height:1.4;color:var(--bone);
  margin:0 0 8px;letter-spacing:-.005em;font-style:italic;
}
.press-detail .pd-meta{font-size:12px;color:var(--mist)}

/* === Donation preview modal === */
.dpm-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.dpm-backdrop.show{opacity:1;pointer-events:auto}
.dpm-modal{
  width:100%;max-width:520px;
  background:linear-gradient(180deg, #0a1228, #060c1f);
  border:1px solid rgba(168,243,65,.3);
  border-radius:22px;
  padding:36px 32px 32px;
  font-family:var(--body);
  transform:translateY(20px) scale(.98);
  transition:transform .35s cubic-bezier(.22,.9,.3,1);
  position:relative;overflow:hidden;
}
.dpm-backdrop.show .dpm-modal{transform:translateY(0) scale(1)}
.dpm-modal::before{
  content:"";position:absolute;inset:-30%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 0%, rgba(168,243,65,.25), transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.dpm-close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:transparent;color:var(--bone);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
  transition:all .2s ease;
}
.dpm-close:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.dpm-head{text-align:center;margin-bottom:24px}
.dpm-head .dpm-eyebrow{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--leaf);font-weight:600;margin-bottom:10px;
}
.dpm-head h3{
  font-family:var(--display);font-weight:700;
  font-size:26px;letter-spacing:-.01em;color:var(--bone);margin:0;
}
.dpm-amount{
  text-align:center;
  font-family:var(--display);font-weight:800;
  font-size:64px;line-height:1;color:var(--bone);
  letter-spacing:-.025em;margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.dpm-amount .dpm-curr{color:var(--leaf);font-weight:700}
.dpm-amount-label{
  text-align:center;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist);margin-bottom:22px;
}
.dpm-funds{
  padding:18px;border-radius:14px;
  background:rgba(168,243,65,.06);
  border:1px solid rgba(168,243,65,.22);
  margin-bottom:22px;
  display:flex;align-items:center;gap:14px;
}
.dpm-funds .dpm-icon{
  width:48px;height:48px;border-radius:12px;flex:0 0 48px;
  background:rgba(168,243,65,.14);
  border:1px solid rgba(168,243,65,.32);
  display:flex;align-items:center;justify-content:center;
  color:var(--leaf);
}
.dpm-funds .dpm-icon svg{width:24px;height:24px}
.dpm-funds-text{flex:1;min-width:0}
.dpm-funds-headline{
  font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--bone);margin-bottom:3px;letter-spacing:-.005em;
}
.dpm-funds-sub{font-size:12.5px;color:var(--mist);line-height:1.4}
.dpm-promise{
  font-size:12.5px;color:var(--mist);
  display:flex;align-items:flex-start;gap:8px;margin-bottom:22px;
}
.dpm-promise svg{width:16px;height:16px;color:var(--leaf);flex:0 0 16px;margin-top:1px}
.dpm-gift-toggle{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--bone);
  padding:10px 0;border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:18px;cursor:pointer;
}
.dpm-gift-toggle input{accent-color:var(--leaf)}
.dpm-gift-fields{display:none;margin-bottom:18px;animation:pdIn .3s ease both}
.dpm-gift-fields.show{display:block}
.dpm-gift-fields label{
  display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mist);margin-bottom:6px;font-weight:600;
}
.dpm-gift-fields input{
  width:100%;padding:11px 14px;border-radius:8px;
  border:1px solid rgba(168,243,65,.25);background:rgba(2,7,24,.5);
  color:var(--bone);font-family:var(--body);font-size:13.5px;margin-bottom:10px;
}
.dpm-gift-fields input:focus{outline:0;border-color:var(--leaf)}
.dpm-cta{
  display:block;width:100%;text-align:center;text-decoration:none;
  background:var(--leaf);color:#020718;
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em;
  padding:14px 22px;border-radius:999px;
  transition:background .2s ease, transform .2s ease;
}
.dpm-cta:hover{background:#B9F764;transform:translateY(-1px)}
.dpm-foot{
  margin-top:14px;text-align:center;font-size:11.5px;color:var(--mist-2);letter-spacing:.04em;
}

/* ================= CLIENT DEMO ADDITIONS ================= */

/* === 1. Live giving feed (in-page section) === */
.live-feed{
  position:relative;
  margin:48px auto 0;max-width:720px;text-align:left;
  padding:22px 24px 14px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(168,243,65,.06),rgba(168,243,65,.015));
  border:1px solid rgba(168,243,65,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}
.live-feed::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--leaf),rgba(168,243,65,.15));
}
.live-feed .lf-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px dashed rgba(168,243,65,.22);
}
.live-feed .lf-eyebrow{
  font-family:var(--body);font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);display:inline-flex;align-items:center;gap:10px;
}
.live-feed .lf-eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--leaf);box-shadow:0 0 0 0 var(--leaf-glow);
  animation:actPulse 1.8s ease-out infinite;
}
@keyframes actPulse{
  0%{box-shadow:0 0 0 0 rgba(168,243,65,.55)}
  100%{box-shadow:0 0 0 10px rgba(168,243,65,0)}
}
.live-feed .lf-count{
  font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.16em;
  color:rgba(168,243,65,.9);text-transform:uppercase;
  white-space:nowrap;
}
.live-feed .lf-count b{color:var(--bone);font-weight:800;margin-right:4px;font-variant-numeric:tabular-nums}
.live-feed .lf-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  position:relative;
}
.live-feed .lf-row{
  display:flex;align-items:center;gap:14px;
  padding:11px 6px;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-family:var(--body);
  transition:background .3s ease;
}
.live-feed .lf-row:last-child{border-bottom:0}
.live-feed .lf-row.is-new{
  animation:lfRowIn .65s cubic-bezier(.22,.9,.3,1) both;
}
.live-feed .lf-row.is-new .lf-mini-dot{
  animation:lfDotFlash 1.4s ease-out 1;
}
@keyframes lfRowIn{
  from{opacity:0;transform:translateY(-16px);background:rgba(168,243,65,.12)}
  to{opacity:1;transform:translateY(0);background:transparent}
}
@keyframes lfDotFlash{
  0%{box-shadow:0 0 0 0 rgba(168,243,65,.65), 0 0 14px rgba(168,243,65,.7)}
  100%{box-shadow:0 0 0 12px rgba(168,243,65,0), 0 0 0 rgba(168,243,65,0)}
}
.live-feed .lf-row.is-leaving{
  animation:lfRowOut .5s ease-in both;
}
@keyframes lfRowOut{
  to{opacity:0;transform:translateY(8px);max-height:0;padding-top:0;padding-bottom:0;border-bottom-width:0}
}
.live-feed .lf-mini-dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 9px;
  background:var(--leaf);
}
.live-feed .lf-body{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex:1 1 auto;min-width:0;flex-wrap:wrap;
}
.live-feed .lf-line{
  font-size:14px;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  flex:1 1 auto;
}
.live-feed .lf-line b{font-weight:700}
.live-feed .lf-line .lf-amt{color:var(--leaf);font-weight:800;font-variant-numeric:tabular-nums}
.live-feed .lf-meta{
  font-size:12px;color:var(--mist);
  letter-spacing:.02em;
  flex:0 0 auto;white-space:nowrap;
}
.live-feed .lf-meta .lf-when{color:rgba(255,255,255,.45);margin-left:4px}
.live-feed .lf-foot{
  text-align:right;margin-top:10px;
  font-size:11px;color:var(--mist-2);letter-spacing:.06em;
}
@media (max-width:560px){
  .live-feed .lf-meta{font-size:11px}
  .live-feed .lf-line{font-size:13px;white-space:normal}
}

/* === 2. "Where your money goes" interactive slider === */
.impact-calc{
  margin:56px auto 0;
  max-width:720px;
  text-align:left;
  padding:28px 30px 30px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(168,243,65,.07),rgba(168,243,65,.015));
  border:1px solid rgba(168,243,65,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
}
.impact-calc h3{max-width:none;margin:0}
.impact-calc .calc-impact-headline,
.impact-calc .calc-impact-sub{text-align:left}
.impact-calc::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--leaf),rgba(168,243,65,.15));
}
.calc-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:18px;
}
.calc-head .calc-eyebrow{
  font-family:var(--body);font-weight:600;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(168,243,65,.95);
}
.calc-head h3{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(22px,2.4vw,30px);color:var(--bone);letter-spacing:-.01em;
  flex:1 1 100%;
}
.calc-amount-row{
  display:flex;align-items:flex-end;gap:14px;
  margin-bottom:10px;
}
.calc-amount{
  font-family:var(--display);font-weight:800;
  font-size:clamp(48px,6.4vw,80px);line-height:.9;
  color:var(--bone);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.calc-amount .calc-curr{color:var(--leaf);font-weight:700}
.calc-freq{
  font-family:var(--body);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist);padding-bottom:8px;
}
.calc-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg, var(--leaf) 0%, var(--leaf) var(--p,30%), rgba(255,255,255,.08) var(--p,30%), rgba(255,255,255,.08) 100%);
  outline:none;margin:6px 0 22px;cursor:pointer;
}
.calc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;
  background:var(--leaf);
  border:3px solid #020718;
  box-shadow:0 0 0 4px rgba(168,243,65,.18), 0 4px 14px rgba(0,0,0,.5);
  cursor:grab;transition:transform .2s ease;
}
.calc-slider::-webkit-slider-thumb:active{transform:scale(1.18);cursor:grabbing}
.calc-slider::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:var(--leaf);border:3px solid #020718;
  box-shadow:0 0 0 4px rgba(168,243,65,.18);cursor:grab;
}
.calc-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.calc-preset{
  appearance:none;border:1px solid rgba(168,243,65,.28);
  background:rgba(2,7,24,.4);color:var(--bone);
  font-family:var(--display);font-weight:600;font-size:13px;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  letter-spacing:.04em;
  transition:all .2s ease;
}
.calc-preset:hover{border-color:var(--leaf);background:rgba(168,243,65,.12)}
.calc-preset.active{background:var(--leaf);color:#020718;border-color:var(--leaf)}
.calc-impact{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  padding:18px 18px;border-radius:14px;
  background:rgba(2,7,24,.45);
  border:1px solid rgba(168,243,65,.18);
  min-height:78px;
}
.calc-impact-icon{
  width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(168,243,65,.12);
  border:1px solid rgba(168,243,65,.32);
  color:var(--leaf);flex:0 0 54px;
  transition:transform .35s cubic-bezier(.22,.9,.3,1);
}
.calc-impact-icon svg{width:28px;height:28px}
.calc-impact.bump .calc-impact-icon{transform:scale(1.12) rotate(-4deg)}
.calc-impact-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.calc-impact-headline{
  font-family:var(--display);font-weight:700;
  font-size:17px;color:var(--bone);letter-spacing:-.005em;
}
.calc-impact-sub{font-size:13px;color:var(--mist);line-height:1.4}
.calc-cta-row{
  margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.calc-foot{
  margin-top:14px;font-size:12px;color:var(--mist-2);letter-spacing:.02em;
}

/* === 3. Species-lost counter === */
.species-counter{
  position:relative;
  margin:120px auto 60px;
  max-width:1080px;padding:0 var(--pad-x);
  text-align:center;font-family:var(--body);
}
.sc-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:14px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,120,120,.95);margin-bottom:24px;font-weight:700;
}
.sc-eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:#ff5b5b;box-shadow:0 0 18px rgba(255,91,91,.55);
  animation:scBlink 1.4s ease-out infinite;
}
@keyframes scBlink{
  0%,100%{opacity:1}
  50%{opacity:.35}
}
.sc-number{
  font-family:var(--display);font-weight:900;
  font-size:clamp(96px,14vw,210px);line-height:.86;
  color:var(--bone);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.55));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.sc-caption{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,4vw,56px);
  color:var(--bone);margin-top:22px;letter-spacing:-.015em;
  line-height:1.1;max-width:24ch;
  margin-left:auto;margin-right:auto;
}
.sc-caption em{
  color:var(--leaf);font-style:italic;font-weight:500;
  
  
  color:var(--leaf);-webkit-text-fill-color:var(--leaf);
  
}
.sc-sub{
  margin-top:24px;
  font-size:clamp(17px,1.8vw,22px);
  color:var(--mist);max-width:46ch;line-height:1.5;
  margin-left:auto;margin-right:auto;
}

/* === 4. Press / trusted-by strip === */
.press-strip{
  position:relative;padding:34px 0;margin:0 auto;
  max-width:1180px;
  text-align:center;font-family:var(--body);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.press-strip .press-label{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--mist);font-weight:600;margin-bottom:18px;
  display:inline-flex;align-items:center;gap:10px;
}
.press-strip .press-label::before,
.press-strip .press-label::after{
  content:"";width:24px;height:1px;background:rgba(168,243,65,.4);
}
.press-grid{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(28px,5vw,64px);flex-wrap:wrap;
  filter:saturate(.2) brightness(1.1);opacity:.78;
}
.press-grid > span{
  font-family:var(--display);font-weight:700;
  font-size:clamp(15px,1.6vw,21px);letter-spacing:-.005em;
  color:var(--bone);transition:opacity .3s ease, filter .3s ease;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
}
.press-grid > span:hover{opacity:1;filter:saturate(1) brightness(1)}
.press-grid em{font-style:italic;color:var(--mist);font-weight:500}

/* === 6. Hero sound toggle === */
.hero-sound-btn{
  position:absolute;top:24px;right:24px;z-index:6;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(2,7,24,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--bone);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.hero-sound-btn:hover{background:rgba(168,243,65,.18);border-color:rgba(168,243,65,.5);transform:scale(1.06)}
.hero-sound-btn svg{width:18px;height:18px}
.hero-sound-btn .sb-off,
.hero-sound-btn[data-on="true"] .sb-on{display:block}
.hero-sound-btn .sb-on,
.hero-sound-btn[data-on="true"] .sb-off{display:none}
.hero-sound-btn::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(168,243,65,.4);
  opacity:0;transform:scale(.6);
  transition:opacity .35s ease, transform .35s ease;
}
.hero-sound-btn[data-on="true"]::after{opacity:1;transform:scale(1);animation:soundRipple 2.4s ease-out infinite}
@keyframes soundRipple{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.6);opacity:0}
}

/* === 7. Donate-button particles === */
.btn-primary{position:relative;overflow:visible}
.btn-primary .leafburst{
  position:absolute;inset:0;pointer-events:none;
  overflow:visible;
}
.btn-primary .leaf-p{
  position:absolute;left:50%;top:50%;
  width:8px;height:8px;border-radius:50% 0 50% 50%;
  background:var(--leaf);
  opacity:0;transform:translate(-50%,-50%) rotate(0);
}
.btn-primary:hover .leaf-p{
  animation:leafFly 1.4s ease-out forwards;
}
@keyframes leafFly{
  0%{opacity:0;transform:translate(var(--lx,-50%),var(--ly,-50%)) rotate(var(--lr,0deg)) scale(.4)}
  20%{opacity:.8}
  100%{opacity:0;transform:translate(calc(-50% + var(--ldx,40px)), calc(-50% + var(--ldy,-80px))) rotate(calc(var(--lr,0deg) + 360deg)) scale(1)}
}

/* === 8. "Picks for tonight" recommendations strip === */
.tonight-strip{
  margin:60px auto 0;
  max-width:1280px;
  width:calc(100% - var(--pad-x) * 2);
  position:relative;
}
/* Special Pick of the Night — hero feature card */
.tonight-hero{
  position:relative;display:grid;grid-template-columns:1.15fr 1fr;
  gap:0;border-radius:24px;overflow:hidden;
  background:rgba(2,7,24,.55);
  border:1px solid rgba(168,243,65,.32);
  margin-bottom:18px;
  text-decoration:none;color:inherit;
  transition:border-color .3s ease, transform .35s cubic-bezier(.22,.9,.3,1);
  box-shadow:0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(168,243,65,.08), inset 0 0 0 1px rgba(168,243,65,.08);
}
.tonight-hero:hover{border-color:var(--leaf);transform:translateY(-2px)}
.tonight-hero::before{
  content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:radial-gradient(45% 50% at 30% 50%, rgba(168,243,65,.18), transparent 70%);
  filter:blur(50px);
}
.tonight-hero .th-media{
  position:relative;min-height:340px;
  background-size:cover;background-position:center;
  overflow:hidden;
}
.tonight-hero .th-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, transparent 55%, rgba(2,7,24,.38) 100%),
    linear-gradient(180deg, rgba(2,7,24,.14) 0%, transparent 50%, rgba(2,7,24,.24) 100%);
}
.tonight-hero .th-play{
  position:absolute;left:50%;top:50%;z-index:2;
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(168,243,65,.92);color:#020718;
  transform:translate(-50%,-50%);
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 0 8px rgba(168,243,65,.18);
  transition:transform .3s ease, background .3s ease;
}
.tonight-hero:hover .th-play{background:#B9F764;transform:translate(-50%,-50%) scale(1.08)}
.tonight-hero .th-play svg{width:26px;height:26px;margin-left:4px}
.tonight-hero .th-meta-overlay{
  position:absolute;left:20px;bottom:20px;z-index:2;
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  padding:6px 12px;border-radius:999px;
  background:rgba(2,7,24,.72);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tonight-hero .th-meta-overlay svg{width:12px;height:12px;color:var(--leaf)}
.tonight-hero .th-body{
  position:relative;z-index:1;
  padding:36px 36px 32px;
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
}
.tonight-hero .th-special{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-family:var(--display);font-weight:800;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:#020718;
  padding:8px 14px;border-radius:999px;
  background:linear-gradient(135deg, var(--leaf), #D3FA9E);
  box-shadow:0 8px 24px rgba(168,243,65,.35);
}
.tonight-hero .th-special::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#020718;
  animation:pulse 2.2s ease-out infinite;
}
.tonight-hero .th-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.4vw,44px);letter-spacing:-.015em;
  color:var(--bone);line-height:1.05;margin:0;
}
.tonight-hero .th-title em{font-style:italic;font-weight:500;color:var(--leaf)}
.tonight-hero .th-desc{
  font-size:15.5px;color:var(--mist);line-height:1.5;max-width:48ch;margin:0;
}
.tonight-hero .th-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
}
.tonight-hero .th-stats{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-family:var(--body);font-size:13px;color:var(--mist);
}
.tonight-hero .th-stats span{display:inline-flex;align-items:center;gap:6px}
.tonight-hero .th-stats b{color:var(--bone);font-weight:700;font-variant-numeric:tabular-nums}
.tonight-hero .th-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;
  color:#020718;background:var(--leaf);
  padding:11px 18px;border-radius:999px;text-decoration:none;
  transition:background .2s ease;
}
.tonight-hero .th-cta:hover{background:#B9F764}
@media (max-width:880px){
  .tonight-hero{grid-template-columns:1fr}
  .tonight-hero .th-media{min-height:240px}
  .tonight-hero .th-media::after{
    background:
      linear-gradient(180deg, rgba(2,7,24,.08) 0%, transparent 50%, rgba(2,7,24,.38) 100%);
  }
  .tonight-hero .th-body{padding:24px}
}
.tonight-strip .ts-header{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:18px;flex-wrap:wrap;gap:14px;
}
.tonight-strip .ts-eyebrow{
  font-family:var(--body);font-weight:600;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone);display:inline-flex;align-items:center;gap:10px;
}
.tonight-strip .ts-eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--leaf);box-shadow:0 0 0 0 var(--leaf-glow);
  animation:pulse 2.4s ease-out infinite;
}
.tonight-strip .ts-all{
  font-family:var(--display);font-weight:600;font-size:13px;
  color:var(--bone);text-decoration:none;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:6px;
  padding-bottom:2px;border-bottom:1px solid rgba(168,243,65,.4);
  transition:color .25s ease, border-color .25s ease;
}
.tonight-strip .ts-all:hover{color:var(--leaf);border-color:var(--leaf)}
.tonight-strip .ts-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
@media (max-width:760px){.tonight-strip .ts-grid{grid-template-columns:1fr}}
.tonight-strip .ts-card{
  position:relative;
  display:flex;align-items:stretch;gap:14px;
  padding:14px;border-radius:14px;
  background:rgba(2,7,24,.5);
  border:1px solid rgba(255,255,255,.06);
  text-decoration:none;color:inherit;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
  overflow:hidden;
}
.tonight-strip .ts-card:hover{
  border-color:rgba(168,243,65,.45);transform:translateY(-2px);
  background:rgba(2,7,24,.65);
}
.tonight-strip .ts-card:hover .ts-play{
  transform:scale(1) translate(-50%,-50%);opacity:1;
}
.tonight-strip .ts-thumb{
  flex:0 0 84px;width:84px;height:108px;border-radius:8px;
  background-size:cover;background-position:center;
  position:relative;overflow:hidden;
}
.tonight-strip .ts-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.06));
}
.tonight-strip .ts-play{
  position:absolute;left:50%;top:50%;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(168,243,65,.92);color:#020718;
  display:flex;align-items:center;justify-content:center;
  transform:scale(.7) translate(-72%,-72%);
  transform-origin:center;
  transition:transform .25s ease, opacity .25s ease;
  opacity:.85;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.tonight-strip .ts-play svg{width:14px;height:14px;margin-left:2px}
.tonight-strip .ts-when{
  font-family:var(--display);font-weight:700;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--leaf);
  padding:3px 8px;border-radius:999px;
  border:1px solid rgba(168,243,65,.45);
  background:rgba(168,243,65,.1);
  display:inline-flex;align-items:center;gap:6px;
}
.tonight-strip .ts-badge-new{color:var(--leaf);border-color:rgba(168,243,65,.5);background:rgba(168,243,65,.1)}
.tonight-strip .ts-badge-trend{color:#ff9a5b;border-color:rgba(255,154,91,.5);background:rgba(255,154,91,.08)}
.tonight-strip .ts-badge-pick{color:#9ec4ff;border-color:rgba(158,196,255,.5);background:rgba(158,196,255,.08)}
.tonight-strip .ts-title{
  font-family:var(--display);font-weight:700;font-size:15px;
  line-height:1.25;color:var(--bone);margin:8px 0 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tonight-strip .ts-count{
  font-family:var(--body);
  font-size:12px;color:var(--mist);letter-spacing:.02em;
}
.tonight-strip .ts-count b{color:var(--bone);font-weight:700;font-variant-numeric:tabular-nums}
.tonight-strip .ts-body{display:flex;flex-direction:column;justify-content:space-between;min-width:0;flex:1 1 auto}

/* === 9. Cursor compass === */
.cursor-compass{
  position:fixed;top:0;left:0;
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(168,243,65,.55);
  background:rgba(2,7,24,.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  pointer-events:none;z-index:30;
  opacity:0;transform:translate(-50%,-50%);
  transition:opacity .35s ease;
  display:flex;align-items:center;justify-content:center;
}
.cursor-compass.show{opacity:.85}
.cursor-compass::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px dashed rgba(168,243,65,.3);
}
.cursor-compass .cc-needle{
  width:2px;height:18px;background:linear-gradient(180deg,#ff5b5b 0 50%, var(--leaf) 50% 100%);
  transform-origin:center center;
  border-radius:2px;
}
.cursor-compass .cc-n{
  position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-weight:700;font-size:8px;
  letter-spacing:.06em;color:rgba(168,243,65,.9);
}

/* === 10. Page-visitors counter (sits under stat strip or convert CTA) === */
.live-viewers{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;border-radius:999px;
  background:rgba(168,243,65,.08);
  border:1px solid rgba(168,243,65,.28);
  font-family:var(--body);font-size:12.5px;color:var(--bone);
  letter-spacing:.02em;
}
.live-viewers .lv-dot{
  width:8px;height:8px;border-radius:50%;background:var(--leaf);
  box-shadow:0 0 0 0 rgba(168,243,65,.55);
  animation:lvBlip 1.6s ease-out infinite;
}
@keyframes lvBlip{
  0%{box-shadow:0 0 0 0 rgba(168,243,65,.55)}
  100%{box-shadow:0 0 0 9px rgba(168,243,65,0)}
}
.live-viewers b{font-weight:700;color:var(--bone);font-variant-numeric:tabular-nums}


/* ==================================================================
   GLOBE COMPONENT — 3D Three.js globe + right-rail card
   Reusable across NGO / project / mission pages.
   Markup: <section class="globe-section"><div class="wrap"><div class="globe-stage">
             <div class="globe-wrap is-3d" id="globeWrap">canvas+tooltip+pins</div>
             <aside class="globe-aside globe-aside-right"><div class="globe-card">...</div></aside></div></div></section>
   ================================================================== */

/* === 3D globe (Three.js) — replaces the flat SVG variant === */
/* Hide flat layers but keep .pin buttons in the DOM so existing popup wiring continues to work. */
#globeWrap.is-3d .globe-svg,
#globeWrap.is-3d .globe-arcs,
#globeWrap.is-3d .globe-scan,
#globeWrap.is-3d .globe-scan-flicker{ display:none !important; }
#globeWrap.is-3d .pin{
  position:absolute !important;
  left:-9999px !important; top:-9999px !important;
  width:1px;height:1px;opacity:0;pointer-events:none;
  visibility:hidden;
}
.globe-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;cursor:grab;touch-action:none;
  border-radius:var(--r-lg);
}
.globe-canvas.is-dragging{cursor:grabbing}
.globe-tooltip{
  position:absolute;pointer-events:none;
  transform:translate(14px,-50%);
  background:rgba(2,7,24,.92);
  border:1px solid rgba(168,243,65,.45);
  color:var(--bone);
  font-family:var(--body);
  font-size:12.5px;letter-spacing:.01em;
  padding:7px 11px;border-radius:8px;
  white-space:nowrap;
  opacity:0;
  transition:opacity .15s ease;
  z-index:5;
  box-shadow:0 10px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(168,243,65,.15);
}
.globe-tooltip.is-visible{opacity:1}

/* === Stage layout: hero globe + right rail card === */
.globe-stage{
  position:relative;
  display:grid;
  grid-template-columns: minmax(420px, 2.4fr) minmax(280px, 1fr);
  gap:64px;
  align-items:stretch;
  margin-top:48px;
}
.globe-stage .globe-wrap{
  margin-top:0;aspect-ratio:1/1;width:100%;align-self:center;
}
.globe-aside{display:flex;flex-direction:column;gap:20px;align-self:center}
@media (max-width:1080px){
  .globe-stage{grid-template-columns:1fr;gap:28px}
  .globe-stage .globe-wrap{aspect-ratio:1/1;max-width:640px;margin:0 auto}
}

/* Right rail — project card */
.globe-card{
  background:rgba(7,13,35,.55);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  padding:24px 22px;
  position:relative;overflow:hidden;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  min-height:300px;display:flex;flex-direction:column;
}
.globe-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%, rgba(168,243,65,.08), transparent 60%);
}
.globe-card > *{position:relative}
.gc-empty{display:flex;flex-direction:column;justify-content:center;flex:1}
.globe-card.is-active .gc-empty{display:none}
.gc-eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mist-2);margin-bottom:14px;
}
.gc-empty-title{
  font-family:var(--display);font-weight:800;font-size:22px;line-height:1.15;
  letter-spacing:-.015em;color:var(--bone);margin-bottom:12px;
}
.gc-empty-hint{font-size:13.5px;line-height:1.55;color:var(--mist)}
.gc-detail{display:flex;flex-direction:column;animation:gcFadeIn .35s ease both}
.gc-detail[hidden]{display:none}
.gc-img{
  position:relative;
  width:calc(100% + 44px);
  margin:-24px -22px 18px;
  height:170px;
  background:#0a1320 center/cover no-repeat;
  border-bottom:1px solid rgba(168,243,65,.22);
  overflow:hidden;
}
.gc-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 35%, rgba(7,13,35,.07) 78%, rgba(7,13,35,.11) 100%);
}
.gc-img::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg, rgba(168,243,65,.06), transparent 25%);
  mix-blend-mode:screen;
}
.gc-img[hidden]{display:none}
@keyframes gcFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.gc-close{
  position:absolute;top:14px;right:14px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.06);color:var(--mist);
  font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s, color .2s;border:0;
  z-index:2;
}
.gc-close:hover{background:rgba(255,255,255,.14);color:var(--bone)}
.gc-status{
  display:inline-block;align-self:flex-start;
  padding:5px 11px;border-radius:999px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  background:rgba(168,243,65,.14);color:var(--leaf);
  border:1px solid rgba(168,243,65,.3);
}
.globe-card.is-urgent .gc-status{background:rgba(226,106,91,.14);color:var(--coral);border-color:rgba(226,106,91,.3)}
.globe-card.is-featured .gc-status{background:rgba(240,194,95,.14);color:var(--sun);border-color:rgba(240,194,95,.3)}
.gc-loc{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--mist);margin-top:14px;font-weight:500;
}
.gc-loc svg{width:14px;height:14px;color:var(--leaf);flex-shrink:0}
.gc-coords{
  font-size:11px;color:var(--mist-2);letter-spacing:.04em;
  font-feature-settings:'tnum';margin-top:4px;margin-left:20px;
}
.gc-name{
  font-family:var(--display);font-weight:800;font-size:22px;line-height:1.12;
  letter-spacing:-.015em;margin-top:12px;color:var(--bone);
}
.gc-ngo{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-2);margin-top:8px;font-weight:600;
}
.gc-desc{font-size:13.5px;line-height:1.55;color:var(--mist);margin-top:14px}
.gc-stat-box{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--mist-2);letter-spacing:.16em;text-transform:uppercase;
}
.gc-stat-box strong{
  display:block;font-family:var(--body);font-weight:600;
  color:var(--bone);font-size:14px;margin-top:5px;
  letter-spacing:0;text-transform:none;line-height:1.4;
}
.gc-cta{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  margin-top:18px;padding:11px 18px;
  background:var(--leaf);color:var(--ink);
  border-radius:999px;font-weight:700;font-size:13px;
  transition:transform .2s, background .2s;
}
.gc-cta:hover{transform:translateY(-1px);background:#71dd7d}
.gc-cta .arrow{transition:transform .2s}
.gc-cta:hover .arrow{transform:translateX(3px)}

/* Hide the centred map-popup when 3D mode is active — right rail replaces it */
#globe .map-popup{display:none !important}

/* =================================================================
   Project page Location widget
   Slim banner that replaces the full globe on project pages.
   Clicking "See on the map" deep-links to /ngo-partners/?focus=…
   ================================================================= */
.pd-locator{
  padding: 28px var(--pad-x);
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-80) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pd-locator-card{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 18px 22px;
  background: rgba(7,13,35,.55);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  position: relative;
}
.pd-locator-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px; border-radius: var(--r-md) 0 0 var(--r-md);
  background: linear-gradient(180deg, var(--leaf), rgba(168,243,65,.25));
}
.pd-locator-map{
  width: 60px; height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(168,243,65,.18) 0%, transparent 65%),
    radial-gradient(circle 1px at 50% 50%, rgba(255,255,255,.18) 1px, transparent 1.5px) 0 0/7px 7px;
  position:relative;
  border: 1px solid rgba(168,243,65,.35);
  flex-shrink: 0;
}
.pd-locator-map::after{
  content:"";
  position:absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 4px rgba(168,243,65,.18), 0 0 12px var(--leaf-glow);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  animation: locatorPulse 2.4s ease-in-out infinite;
}
@keyframes locatorPulse{
  0%, 100%{ box-shadow: 0 0 0 4px rgba(168,243,65,.18), 0 0 12px var(--leaf-glow); }
  50%{ box-shadow: 0 0 0 10px rgba(168,243,65,.04), 0 0 16px rgba(168,243,65,.6); }
}
.pd-locator-text{
  min-width: 0;
}
.pd-locator-eyebrow{
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--leaf); margin-bottom: 6px; font-weight: 600;
}
.pd-locator-place{
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: var(--bone); letter-spacing: -.01em; line-height: 1.2;
}
.pd-locator-coords{
  font-size: 11.5px; color: var(--mist-2); letter-spacing: .04em;
  font-feature-settings: 'tnum'; margin-top: 4px;
}
.pd-locator-cta{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(168,243,65,.12);
  color: var(--leaf);
  border: 1px solid rgba(168,243,65,.35);
  font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.pd-locator-cta:hover{ background: rgba(168,243,65,.22); transform: translateY(-1px); }
.pd-locator-cta .arrow{ transition: transform .2s; }
.pd-locator-cta:hover .arrow{ transform: translateX(3px); }
@media (max-width: 720px){
  .pd-locator-card{
    grid-template-columns: 1fr;
    text-align: left;
    gap: 16px;
  }
  .pd-locator-cta{ justify-self: start; }
}

/* =================================================================
   Project-page Ecosystem Banner
   Reuses a smaller version of the homepage's ecosystem illustrations
   as a design accent on the relevant project page. Each project carries
   one ecosystem (rainforests / oceans / etc) — the icon makes the
   tactical "every species has a place" theme cohere across pages.
   ================================================================= */
.pd-eco-banner{
  padding:36px var(--pad-x);
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-80) 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.pd-eco-row{
  max-width:1100px;margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
}
.pd-eco-icon{
  width:96px;height:96px;
  border-radius:14px;
  border:1px solid var(--line-2);
  overflow:hidden;
  background:rgba(7,13,35,.6);
  position:relative;
  flex-shrink:0;
}
.pd-eco-icon::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35));
}
.pd-eco-icon svg{width:100%;height:100%;display:block}
.pd-eco-text{min-width:0}
.pd-eco-label{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--leaf);font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:4px;
}
.pd-eco-label::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--leaf);box-shadow:0 0 6px var(--leaf-glow);
}
.pd-eco-name{
  font-family:var(--display);font-weight:800;font-size:24px;
  color:var(--bone);letter-spacing:-.02em;line-height:1.1;
  margin-bottom:6px;
}
.pd-eco-species{
  font-size:13px;color:var(--mist);line-height:1.4;
}
.pd-eco-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 20px;border-radius:999px;
  background:rgba(168,243,65,.12);
  color:var(--leaf);
  border:1px solid rgba(168,243,65,.35);
  font-weight:700;font-size:13px;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
  transition:background .2s, transform .2s;
}
.pd-eco-cta:hover{background:rgba(168,243,65,.22);transform:translateY(-1px)}
.pd-eco-cta .arrow{transition:transform .2s}
.pd-eco-cta:hover .arrow{transform:translateX(3px)}
@media (max-width:720px){
  .pd-eco-row{grid-template-columns:auto 1fr;gap:18px}
  .pd-eco-cta{grid-column:1 / -1;justify-self:start}
}

/* === Project-page ecosystem icon SVG (scoped animations) === */
.pd-eco-icon .pe-svg{transform-origin:center}
.pd-eco-icon .pe-pulse{animation:pdEcoPulse 3s ease-in-out infinite}
@keyframes pdEcoPulse{0%,100%{opacity:.85}50%{opacity:1}}
.pd-eco-icon .pe-drift{animation:pdEcoDrift 11s linear infinite}
@keyframes pdEcoDrift{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.pd-eco-icon .pe-sway{transform-origin:50% 100%;animation:pdEcoSway 4s ease-in-out infinite}
@keyframes pdEcoSway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}

/* === Footer charity disclosure ============================
   Three-column block that surfaces the legal entities behind
   the Ecoflix Foundation (US 501(c)(3) + UK registered charity)
   and reinforces the 100% pass-through policy. Consolidated
   here so every page can drop the HTML and pick this styling
   up automatically — no need for per-page inline <style>. */
/* Charity disclosure block — elegant edition.
   Was a boxed card sat awkwardly between the footer grid and the
   base bar. Now: a borderless three-column row with thin leaf
   hairlines above and below, vertical hairlines between columns,
   and refined typography. Reads like an official registration
   notice — a finishing stamp on the page rather than a card. */
.footer-charity{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:48px;
  margin:56px 0 8px;
  padding:36px 0 32px;
  background:transparent;
  border:0;
  border-top:1px solid rgba(168,243,65,.12);
  border-bottom:1px solid rgba(168,243,65,.12);
  border-radius:0;
  position:relative;
}
.footer-charity::before{
  /* leaf hairline accent along the top — softer than the
     full-width border, just a fade-in glow at the midpoint */
  content:"";position:absolute;top:-1px;left:18%;right:18%;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(168,243,65,.55) 50%,
    transparent 100%);
  pointer-events:none;
}
.footer-charity .fc-col{
  min-width:0;
  position:relative;
}
/* Hairline dividers between columns on desktop */
.footer-charity .fc-col + .fc-col::before{
  content:"";position:absolute;left:-24px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(168,243,65,.18) 30%,
    rgba(168,243,65,.18) 70%,
    transparent 100%);
}
.footer-charity .fc-eyebrow{
  font-family:var(--display);font-weight:800;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--leaf);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
}
.footer-charity .fc-flag{
  font-size:13px;line-height:1;display:inline-block;
  filter:saturate(.9);
}
.footer-charity .fc-body{
  font-size:13px;line-height:1.65;color:var(--mist);
  font-family:var(--body);max-width:38ch;
}
.footer-charity .fc-body strong{
  display:block;margin-bottom:4px;
  color:var(--bone);font-weight:700;font-family:var(--display);
  font-size:14px;letter-spacing:-.005em;
}
.footer-charity .fc-body b{
  color:var(--leaf);font-weight:800;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;font-family:var(--display);
}
.footer-charity .fc-col-note .fc-eyebrow{ color:var(--bone) }
.footer-charity .fc-col-note .fc-eyebrow::before{
  content:"⊕";color:var(--leaf);font-size:13px;margin-right:1px;
}
@media (max-width:880px){
  .footer-charity{grid-template-columns:1fr;gap:28px;padding:28px 0}
  .footer-charity .fc-col + .fc-col::before{
    left:0;right:0;top:-14px;bottom:auto;
    width:auto;height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(168,243,65,.18) 50%,
      transparent 100%);
  }
}

/* === Soft card-lift utility =================================
   Reusable static card-lift pattern peppered across sub-pages.
   Takes its visual cue from the homepage's mission→hero scroll-
   driven lift but skips the choreography — just a rounded-top
   section pulled up over the previous one with a drop shadow
   and a leaf hairline catching light along the curve.

   Opt in by adding class="section-lift-soft" to any section,
   article, or div that should lift over its predecessor. The
   utility is intentionally light — drop it on every 3rd or 4th
   section, not every one. */
.section-lift-soft{
  position:relative;z-index:2;
  margin-top:-72px;
  border-radius:48px 48px 0 0;
  background:var(--ink);
  box-shadow:
    0 -22px 50px -14px rgba(0,0,0,.6),
    0 -10px 22px  -8px rgba(0,0,0,.35),
    0 -1px 0 rgba(255,255,255,.10);
  isolation:isolate;
}
.section-lift-soft::before{
  /* leaf-coloured highlight along the rounded top edge */
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.22) 20%,
    rgba(168,243,65,.5)   50%,
    rgba(255,255,255,.22) 80%,
    transparent 100%);
  border-radius:48px 48px 0 0;
  pointer-events:none;z-index:3;
}
@media (max-width:720px){
  .section-lift-soft{ margin-top:-48px;border-radius:32px 32px 0 0 }
}
@media (prefers-reduced-motion:reduce){
  .section-lift-soft{ margin-top:0 }
}

/* ============================================================
   POLISH PASS — universal micro-experiences.
   Each block is a discrete enhancement, scoped tightly so it
   can be lifted or disabled without ripple. The JS counterparts
   live in /assets/site.js.
   ============================================================ */

/* ── Scroll progress bar ───────────────────────────────────
   Thin leaf-gradient bar pinned to the top of the viewport,
   width tracking scroll progress through the document.
   Created by site.js (#scrollProgress). */
#scrollProgress{
  position:fixed;top:0;left:0;height:2px;
  width:0;z-index:120;pointer-events:none;
  background:linear-gradient(90deg, var(--leaf), #B9F764 50%, var(--leaf));
  box-shadow:0 0 8px var(--leaf-glow);
  transition:width .12s ease-out;
}
@media (prefers-reduced-motion:reduce){
  #scrollProgress{ transition:none }
}

/* ── Image blur-up loader ──────────────────────────────────
   Every <img loading="lazy"> gets a soft fade-in once
   it's actually decoded. site.js toggles .img-ready on
   the `load` event. Pure CSS — works with native lazy loading. */
img[loading="lazy"]{
  opacity:0;filter:blur(8px);
  transition:opacity .55s ease, filter .55s ease;
}
img[loading="lazy"].img-ready,
img[loading="lazy"][src][data-img-skip]{
  opacity:1;filter:blur(0);
}
@media (prefers-reduced-motion:reduce){
  img[loading="lazy"]{ opacity:1;filter:none;transition:none }
}

/* ── Better focus rings ────────────────────────────────────
   Replace the harsh default outline with a leaf-tinted halo
   for keyboard users. Pointer users don't see the ring
   (:focus-visible isolates this). */
:focus{ outline:none }
:focus-visible{
  outline:2px solid rgba(168,243,65,.7);
  outline-offset:3px;
  border-radius:6px;
}
/* Buttons and pill links get a softer glow rather than a hard ring */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.nav-trigger:focus-visible,
.nav-menu a:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(168,243,65,.45),
             0 0 0 1px var(--leaf);
}

/* ── Form input focus halo ─────────────────────────────────
   When any text input / textarea / select gets focus, the
   border lights leaf-green and a soft glow expands. */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea, select{
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus, select:focus{
  outline:none;
  border-color:var(--leaf) !important;
  box-shadow:0 0 0 4px rgba(168,243,65,.18),
             0 4px 14px -4px rgba(168,243,65,.32);
}

/* ── Coord-stamp ripple ────────────────────────────────────
   Every coord pill (`⊕ 18.93°N · 98.62°E`) gains a tiny sonar
   ripple on click. Adds delight without changing semantics.
   site.js binds the click handler. */
.coord-stamp, .pd-tag, .ngo-coord, .fc-eyebrow,
.ebngo-coord, .ebp-count, .nf-coord, .redir-coord{
  position:relative;
  cursor:default;
}
.coord-stamp.ripple-go::after,
.pd-tag.ripple-go::after,
.ngo-coord.ripple-go::after,
.fc-eyebrow.ripple-go::after,
.ebngo-coord.ripple-go::after,
.ebp-count.ripple-go::after,
.nf-coord.ripple-go::after,
.redir-coord.ripple-go::after{
  content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);
  width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%) scale(1);
  border:1.5px solid var(--leaf);background:transparent;
  pointer-events:none;
  animation:coordRipple .8s ease-out forwards;
}
@keyframes coordRipple{
  0%  { transform:translate(-50%,-50%) scale(0.5); opacity:.9 }
  100%{ transform:translate(-50%,-50%) scale(12);  opacity:0 }
}
@media (prefers-reduced-motion:reduce){
  .ripple-go::after{ animation:none }
}

/* ── Save-for-later bookmark heart ─────────────────────────
   Lives on project detail pages (/projects/<slug>/). The
   button is injected by site.js when it detects a project
   page. `.bk-on` = saved (leaf-filled heart), default = empty. */
.bk-fab{
  position:fixed;bottom:24px;right:24px;z-index:90;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(2,7,24,.85);
  border:1px solid rgba(168,243,65,.32);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  cursor:pointer;color:var(--bone);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.5);
  transition:transform .25s ease, background .25s ease,
             border-color .25s ease, color .25s ease;
}
.bk-fab:hover{
  transform:translateY(-3px) scale(1.06);
  border-color:var(--leaf);
  color:var(--leaf);
}
.bk-fab svg{width:22px;height:22px;transition:transform .35s cubic-bezier(.22,.9,.3,1), fill .25s ease, stroke .25s ease}
.bk-fab:active svg{transform:scale(.86)}
.bk-fab.bk-on{
  background:var(--leaf);color:var(--ink);border-color:var(--leaf);
  box-shadow:0 12px 28px -6px rgba(168,243,65,.55);
}
.bk-fab.bk-on svg path{ fill:var(--ink);stroke:var(--ink) }
.bk-fab .bk-pulse{
  position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--leaf);pointer-events:none;
  opacity:0;transform:scale(.8);
}
.bk-fab.bk-just-saved .bk-pulse{ animation:bkPulse 1s ease-out forwards }
@keyframes bkPulse{
  0%  { opacity:.8; transform:scale(.85) }
  100%{ opacity:0;  transform:scale(1.55) }
}
.bk-fab .bk-tip{
  position:absolute;right:64px;top:50%;transform:translateY(-50%);
  white-space:nowrap;padding:7px 12px;border-radius:99px;
  background:rgba(2,7,24,.92);border:1px solid rgba(168,243,65,.32);
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .25s ease;
}
.bk-fab:hover .bk-tip{opacity:1;transform:translateY(-50%) translateX(-4px)}
@media (max-width:560px){
  .bk-fab{ bottom:80px } /* clears any mobile sticky CTA */
}

/* Saved-count badge that appears next to "Projects" wherever
   the project listings appear (/projects/, /ngo-partners/, etc.).
   site.js stamps it onto a [data-saved-count] anchor. */
.saved-count-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 6px;
  margin-left:6px;border-radius:99px;
  background:var(--leaf);color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:10px;
  letter-spacing:0;line-height:1;
}

/* ── Logo easter egg toast ─────────────────────────────────
   Triggered by 7 rapid clicks on the header brand mark.
   Small leaf-glowing pill that fades in mid-screen for 4s. */
.ee-toast{
  position:fixed;left:50%;top:30%;transform:translate(-50%,-12px);
  z-index:200;padding:14px 22px;border-radius:99px;
  background:rgba(2,7,24,.92);
  border:1px solid var(--leaf);
  box-shadow:0 16px 40px -10px rgba(168,243,65,.5),
             0 4px 14px -4px rgba(0,0,0,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--display);font-weight:800;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--leaf);
  display:inline-flex;align-items:center;gap:10px;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.22,.9,.3,1);
}
.ee-toast.show{ opacity:1; transform:translate(-50%,0) }
.ee-toast::before{
  content:"⊕";font-size:14px;
}

/* ── Command palette (⌘K) ──────────────────────────────────
   Full-screen overlay with a single search input and
   keyboard-navigable list of every page on the site.
   site.js binds the keyboard shortcut + builds the list. */
.cp-backdrop{
  position:fixed;inset:0;z-index:300;
  background:rgba(2,7,24,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:flex-start;justify-content:center;
  padding:14vh 20px 4vh;
}
.cp-backdrop.is-open{ display:flex }
.cp-panel{
  width:min(620px, 100%);
  background:rgba(7,13,35,.96);
  border:1px solid rgba(168,243,65,.32);
  border-radius:18px;
  box-shadow:0 40px 80px -16px rgba(0,0,0,.65),
             0 10px 30px -8px rgba(0,0,0,.5);
  overflow:hidden;
  animation:cpEnter .22s cubic-bezier(.22,.9,.3,1);
}
@keyframes cpEnter{
  from{ opacity:0; transform:translateY(-8px) scale(.985) }
  to  { opacity:1; transform:translateY(0)    scale(1) }
}
.cp-search{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid rgba(168,243,65,.18);
}
.cp-search-icon{
  width:18px;height:18px;color:var(--leaf);flex:0 0 18px;
}
.cp-search input{
  flex:1 1 auto;min-width:0;
  background:transparent;border:0;outline:0;
  font-family:var(--body);font-size:16px;color:var(--bone);
  padding:6px 0;
}
.cp-search input::placeholder{ color:var(--mist-2) }
.cp-search-kbd{
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--mist-2);padding:4px 8px;border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.cp-list{
  max-height:54vh;overflow:auto;padding:8px;margin:0;list-style:none;
}
.cp-list::-webkit-scrollbar{width:8px}
.cp-list::-webkit-scrollbar-track{background:transparent}
.cp-list::-webkit-scrollbar-thumb{background:rgba(168,243,65,.18);border-radius:4px}
.cp-group{
  padding:8px 12px 4px;font-family:var(--display);font-weight:800;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mist-2);
}
.cp-item{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:10px;color:var(--bone);
  text-decoration:none;font-size:14px;cursor:pointer;
  transition:background .15s ease;
}
.cp-item .cp-glyph{
  width:24px;height:24px;border-radius:6px;flex:0 0 24px;
  display:grid;place-items:center;
  background:rgba(168,243,65,.12);
  border:1px solid rgba(168,243,65,.28);
  font-family:var(--display);font-weight:800;font-size:11px;
  color:var(--leaf);letter-spacing:-.01em;
}
.cp-item .cp-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-item .cp-text b{font-family:var(--display);font-weight:700;font-size:14px;color:var(--bone);letter-spacing:-.005em}
.cp-item .cp-text span{font-size:11.5px;color:var(--mist-2);letter-spacing:.04em}
.cp-item .cp-arrow{color:var(--mist-2);font-family:var(--display);font-weight:800;font-size:14px;opacity:0;transform:translateX(-4px);transition:opacity .2s ease, transform .25s ease}
.cp-item:hover,
.cp-item.is-active{
  background:rgba(168,243,65,.10);color:var(--bone);
}
.cp-item:hover .cp-arrow,
.cp-item.is-active .cp-arrow{ opacity:1;transform:translateX(0);color:var(--leaf) }
.cp-empty{
  padding:20px;text-align:center;font-size:13px;color:var(--mist);
}
.cp-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-top:1px solid rgba(168,243,65,.18);
  background:rgba(2,7,24,.4);
  font-family:var(--display);font-weight:600;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mist-2);
}
.cp-foot .kbd{
  display:inline-block;padding:2px 6px;border-radius:4px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:var(--bone);font-size:10px;margin:0 3px;
}
@media (max-width:560px){
  .cp-backdrop{ padding:10vh 12px 4vh }
}

/* ── Magnetic primary button effect ────────────────────────
   site.js binds mousemove on .btn-primary to translate by a
   small fraction toward the cursor. Restored on mouseleave.
   CSS is just the transition curve. */
.btn-primary{
  transition:background .2s ease, color .2s ease,
             transform .25s cubic-bezier(.22,.9,.3,1),
             box-shadow .25s ease;
}
@media (prefers-reduced-motion:reduce){
  .btn-primary{ transition:background .2s ease, color .2s ease }
}


/* === Text-over-media: feathered central shadow for legibility; dark filters removed === */
.hero-card-copy h1,.hero-card-copy p,.hero-card-copy .eyebrow,.wc-headline,.wc-supporting,.hp-pct,.hp-headline,.hp-sub,.hp-promise h2,.hp-promise p,.biome-text h2,.biome-text p,.biome-eyebrow,.tonight-hero h3,.tonight-hero .th-special,.pd-hero h1,.pd-hero p,.pd-hero .pd-sub,.nd-hero h1,.nd-hero .nd-eyebrow,.hgb-h,.hgb-eyebrow,.hgb-foot,.proj-card .meta h3,.proj-card .meta .ngo,.proj-card .meta .cta,.proj-card .expand-panel .ep-title,.proj-card .expand-panel .ep-desc,.proj-card .expand-panel .ep-eyebrow{text-shadow:0 2px 16px rgba(2,7,24,.72),0 0 46px rgba(2,7,24,.5) !important}
.hero-overlay,.hero-carousel::after,.watch-change .wc-overlay,.hp-promise .hp-overlay,.biomes-overlay,.cinema-band::after,section.cinema-band::after,.pd-hero .pd-overlay,.hero-photo::after,.hp-give-band .hgb-overlay{background:none !important}

/* Photo-hero copy legibility. The rule above strips hero scrims
   (.hero-photo::after{background:none}), but the universal .pg-hero pattern
   (used on the standalone pages — team, mission, careers, how-it-works,
   partners, distribution, teachers, gift-memberships, circle-of-giving …)
   never received the compensating feathered shadow that .hero-card-copy /
   .pd-hero / .nd-hero got. Without it, grey ledes and stat labels were hard
   to read over bright hero photos. Same feathered approach, no image darkening.
   The gradient-clipped <em> is excluded: Chrome suppresses text-shadow on
   transparent-fill text anyway, and nulling it avoids a shadow-box on any
   engine that paints it. */
.pg-hero h1,.pg-hero p.lede,.pg-hero .eyebrow,
.pg-hero .stat-strip .num,.pg-hero .stat-strip .lab{
  text-shadow:0 2px 16px rgba(2,7,24,.72),0 0 46px rgba(2,7,24,.5);
}
.pg-hero h1 em{text-shadow:none}


/* === Brighter project cards (.pcard) — user: image filter too strong ===
   Lift the brightness/saturation of the card photo+video and lean on a
   feathered text-shadow (same approach used elsewhere) so the copy over the
   now-brighter image stays legible, instead of darkening the whole image. */
.pcard .pbg,.pcard .pvideo{filter:saturate(1.06) brightness(.82)!important}
.pcard:hover .pbg,.pcard:hover .pvideo{filter:saturate(1.14) brightness(.96)!important}
.pcard .pnum,.pcard .pcaption,.pcard .pdesc,.pcard .plink,
.pcard .coord-stamp,.pcard .coord-stamp *,.pcard .ptag,.pcard .ptag *,
.pcard .peyebrow{text-shadow:0 2px 16px rgba(2,7,24,.82),0 0 42px rgba(2,7,24,.6)}

/* === Sitewide live-presence pill (injected by social-proof.js) === */
.sp-pill{position:fixed;left:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:999px;background:rgba(2,7,24,.82);border:1px solid rgba(168,243,65,.42);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--body);font-size:12.5px;color:var(--bone);letter-spacing:.01em;animation:spIn .5s ease both}
.sp-pill b{font-family:var(--display);font-weight:900;color:var(--leaf);font-variant-numeric:tabular-nums;font-size:14px}
.sp-pill .sp-dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 0 rgba(168,243,65,.55);animation:spBlip 1.6s ease-out infinite}
@keyframes spBlip{0%{box-shadow:0 0 0 0 rgba(168,243,65,.55)}100%{box-shadow:0 0 0 9px rgba(168,243,65,0)}}
@keyframes spIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:640px){.sp-pill{left:12px;bottom:12px;padding:8px 12px}.sp-pill .sp-lbl{display:none}}
@media (prefers-reduced-motion:reduce){.sp-pill,.sp-pill .sp-dot{animation:none}}

/* Donation-momentum figure shown alongside money raised */
.don-stat{font-variant-numeric:tabular-nums}

/* === NGO page — dynamic, homepage-inspired sections === */
/* Hero mission line */
.nd-hero .nd-mission{
  margin:14px 0 0;max-width:34ch;font-family:var(--display);font-weight:500;
  font-size:clamp(20px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;color:var(--bone);
  text-shadow:0 2px 16px rgba(2,7,24,.7),0 0 42px rgba(2,7,24,.5);
}
.nd-hero .nd-mission::after{content:"";display:block;width:54px;height:3px;border-radius:2px;background:var(--leaf);margin-top:16px;box-shadow:0 0 16px var(--leaf-glow)}

/* Impact stats band (only renders when an NGO highlights real numbers) */
.nd-stats-wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad-x)}
.nd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:-34px 0 8px;position:relative;z-index:3}
.nd-stat{background:rgba(7,13,35,.78);border:1px solid rgba(168,243,65,.28);border-radius:16px;padding:20px 18px;text-align:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nd-stat .ns-num{display:block;font-family:var(--display);font-weight:900;font-size:clamp(30px,3.6vw,42px);line-height:1;color:var(--leaf);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nd-stat .ns-label{display:block;margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--mist);letter-spacing:.01em}

/* "What they do" programme cards */
.nd-do{margin:34px 0 8px}
.nd-do .nd-do-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--leaf);margin-bottom:16px}
.nd-do .nd-do-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--leaf);box-shadow:0 0 8px var(--leaf-glow)}
.nd-do-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:620px){.nd-do-grid{grid-template-columns:1fr}}
.nd-do-card{position:relative;padding:20px 20px 20px 22px;border-radius:14px;background:rgba(7,13,35,.5);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:transform .3s ease,border-color .3s ease}
.nd-do-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--leaf);opacity:.65}
.nd-do-card:hover{transform:translateY(-3px);border-color:rgba(168,243,65,.4)}
.nd-do-card h3{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--bone);margin:0 0 7px}
.nd-do-card p{font-size:14px;line-height:1.55;color:var(--mist);margin:0}

/* === "Share to show your support" — awareness-first sharing === */
.share-cta{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--leaf);background:rgba(168,243,65,.12);color:var(--leaf);
  font-family:var(--display);font-weight:800;letter-spacing:.01em;
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.share-cta:hover{background:var(--leaf);color:#020718;box-shadow:0 10px 28px -10px rgba(168,243,65,.5)}
.share-cta svg{width:17px;height:17px;flex:0 0 auto}
/* share popover (desktop / no native share sheet) */
.share-pop-backdrop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(2,7,24,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:shareIn .2s ease both}
.share-pop{width:min(340px,calc(100vw - 40px));background:#0a1224;border:1px solid rgba(168,243,65,.3);
  border-radius:18px;padding:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.share-pop-head{font-family:var(--display);font-weight:800;font-size:15px;color:var(--bone);
  padding:6px 8px 12px;text-align:center}
.share-pop-item{display:block;width:100%;text-align:left;cursor:pointer;margin-top:6px;
  padding:13px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:var(--bone);font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.01em;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.share-pop-item:hover{background:rgba(168,243,65,.12);border-color:rgba(168,243,65,.4);transform:translateX(2px)}
.share-pop-item.is-ig{background:linear-gradient(90deg,rgba(131,58,180,.22),rgba(253,29,29,.18),rgba(252,176,69,.18));border-color:rgba(253,29,29,.35)}
.share-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);z-index:240;
  max-width:min(440px,calc(100vw - 32px));padding:13px 20px;border-radius:999px;
  background:var(--leaf);color:#020718;font-family:var(--display);font-weight:800;font-size:13.5px;text-align:center;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.6);opacity:0;transition:opacity .3s ease,transform .3s ease}
.share-toast.on{opacity:1;transform:translate(-50%,0)}
@keyframes shareIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.share-pop-backdrop{animation:none}.share-toast{transition:opacity .3s ease}}

/* share button inside support cards stacks full-width with a small note */
.nd-card .share-cta,.pd-card .share-cta{width:100%;justify-content:center;margin-top:10px}
.nd-share-note{font-size:12px;line-height:1.5;color:var(--mist-2);margin:10px 0 0}

/* ============================================================
   SITEWIDE IMAGERY DIRECTIVE — bright, vibrant, no dark wash.
   Every photo/video keeps its natural colour, lifted slightly.
   Legibility over imagery comes from a feathered text-shadow,
   never from a dark overlay or a dimming filter. This overrides
   any per-page / per-component filters and scrims.
   ============================================================ */
/* (1) Brighten every image / video / background-image layer */
.hero-photo,.hero-img-fallback,.hero-carousel .hcv,.hcv,.moment-img,
.cta-band-bg,.fq-bg,.lever-img,.pd-bg,.pcard .pbg,.pcard .pvideo,
.proj-card .img,.proj-card .img-video,.btile img,.btile video,
.wtile::before,.wtile .wvideo,.pillar-media img,.op-photo-strip,
.feature-trailer .trailer-video,.founder-quote .fq-video,
.cinema-band-video,.hp-video,.hp-promise .hp-video,.watch-change .wc-video,
.biome-media,.tonight-hero .th-media video,.hgb-media{
  filter:saturate(1.12) brightness(1.04) !important;
}
.pcard:hover .pbg,.pcard:hover .pvideo,.btile:hover img,.btile:hover video,
.proj-card:hover .img,.proj-card:hover .img-video,.wtile:hover::before,
.wtile:hover .wvideo{ filter:saturate(1.2) brightness(1.1) !important; }

/* (2) Remove dark overlay scrims sitting on top of imagery */
.hero-overlay,.hero-carousel::after,.hero-photo::after,.moment::after,
.cta-band-bg::after,.cta-band::after,.fq-bg::after,.founder-quote::after,
.pcard::after,.btile::after,.wtile::after,.pd-hero .pd-overlay,.pd-bg::after,
.watch-change .wc-overlay,.hp-promise .hp-overlay,.biomes-overlay,
.cinema-band::after,section.cinema-band::after,.hp-give-band .hgb-overlay,
.op-photo-strip::after,.nd-hero::after,.lever-img::after{
  background:none !important;
}

/* (3) Feathered drop-shadow on any copy set over imagery */
.btile h3,.btile .b-sub,.btile .b-cta,.btile .b-tag,.btile .b-tag *,
.btile .coord-stamp,.btile .coord-stamp *,
.moment-quote,.moment-quote b,.moment-coord,
.cinema-band-caption,.cinema-band-caption *,
.fq-text,.fq-text b,.fq-name,.fq-role,.fq-rule,
.cta-band h2,.cta-band p,.cta-band .eyebrow,
.pcard .ptag,.pcard .ptag *{
  text-shadow:0 2px 16px rgba(2,7,24,.72),0 0 46px rgba(2,7,24,.5) !important;
}
.cta-band h2 em{text-shadow:none !important}