/* SSF Alone — warm charity look: dark cocoa, cream, amber pills, soft rounded cards */
:root{
  /* Brand palette from the Sukh Saanjh logo: yellow #F8C400, warm black #1F1A17, red #DA251D, off-white #FDF7E5 */
  /* Warm neutrals do the work; amber is the accent, red only for small marks */
  --cocoa:#1f1a17; --cocoa-2:#2b2420; --cream:#faf6ee; --peach:#f4ecdc; --paper:#fffdf9;
  --amber:#f8c400; --amber-d:#d9a800; --amber-ink:#a8321f; --red:#da251d; --ink:#1f1a17; --muted:#665d55; --line:#e9dfcc;
  --on-dark:#e9e1d4; --green:#14a84a; --wa:#25d366; --err:#b3261e;
  --r-xl:24px; --r-lg:18px; --r-md:12px;
  --shadow-1:0 1px 2px rgba(31,26,23,.05),0 8px 24px -12px rgba(31,26,23,.18);
  --shadow-2:0 2px 4px rgba(31,26,23,.05),0 24px 48px -24px rgba(31,26,23,.32);
  /* Type: Poppins for headings, buttons and labels; Inter for reading */
  --font-head:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-hero:"Poppins",system-ui,sans-serif;
  --font-ur:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  /* Motion: one calm curve for everything that moves, one for things that cross-fade */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:.25s; --t-mid:.5s; --t-slow:.9s;
  --wrap:1240px;
  /* Hexagon geometry (the logo emblem is a hexagon; every badge, button and frame follows it) */
  --hex-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112.7'%3E%3Cpolygon points='50,9 91,32.7 91,80 50,103.7 9,80 9,32.7' fill='%23000' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Hexagon-ended bars with rounded points: two end caps plus a middle, so the corners keep their
     radius at any width. */
  --cap-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 48' preserveAspectRatio='none'%3E%3Cpath d='M15 0H13.6c-1.3 0-2.4.7-3 1.8L.9 21.3c-.9 1.7-.9 3.7 0 5.4l9.7 19.5c.6 1.1 1.7 1.8 3 1.8H15Z'/%3E%3C/svg%3E");
  --cap-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1.4c1.3 0 2.4.7 3 1.8l9.7 19.5c.9 1.7.9 3.7 0 5.4L4.4 46.2c-.6 1.1-1.7 1.8-3 1.8H0Z'/%3E%3C/svg%3E");
  --bar-mask:var(--cap-l) left/15px 100% no-repeat,linear-gradient(#000 0 0) center/calc(100% - 28px) 100% no-repeat,var(--cap-r) right/15px 100% no-repeat;
  --bar-mask-s:var(--cap-l) left/10px 100% no-repeat,linear-gradient(#000 0 0) center/calc(100% - 18px) 100% no-repeat,var(--cap-r) right/10px 100% no-repeat;
  /* Wide hexagon photo frame with softened points */
  --wide-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M12 0H88c1.6 0 3 .9 3.7 2.3l7.9 45.4c.5 1.5.5 3.1 0 4.6L91.7 97.7C91 99.1 89.6 100 88 100H12c-1.6 0-3-.9-3.7-2.3L.4 52.3c-.5-1.5-.5-3.1 0-4.6L8.3 2.3C9 .9 10.4 0 12 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  /* Fills with depth instead of flat colour */
  --g-amber:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),linear-gradient(135deg,#ffd84d 0%,#f8c400 48%,#e2a700 100%);
  --g-amber-h:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 55%),linear-gradient(135deg,#ffe066 0%,#fbcb10 48%,#eab000 100%);
  --g-cocoa:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 60%),linear-gradient(135deg,#3b322c 0%,#1f1a17 70%);
  --g-glass:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  --g-soft:linear-gradient(180deg,#fff,#f6efe2);
  --honeycomb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16.2V48.5L28 64.7 0 48.5V16.2ZM28 64.7V97M0 48.5V16.2M56 48.5V16.2' fill='none' stroke='%23f8c400' stroke-width='1.2'/%3E%3C/svg%3E");
}
/* Rounded hexagon badge: width sets the size, height follows. */
.hx{aspect-ratio:100/112.7;-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat;border-radius:0!important}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:16.5px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.015em;text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:rgba(248,196,0,.35)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.bg-dark :focus-visible,.hero :focus-visible,.phero :focus-visible,.story :focus-visible,.ripple :focus-visible,.cta :focus-visible{outline-color:var(--amber)}
main:focus{outline:0}
[hidden]{display:none!important}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:200;font-weight:700}
.skip:focus{left:12px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.h3{font-size:1.3rem}

/* Buttons: hexagon-ended bars. The shape is drawn on ::before so focus outlines are never clipped. */
/* Two stacked layers: ::before is the resting fill, ::after the hover fill that fades in (gradients cannot transition). */
.btn{--bb:var(--g-amber);--bh:var(--g-amber-h);position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;font:600 .9rem/1.2 var(--font-head);letter-spacing:.005em;padding:15px 30px;border:0;background:none;cursor:pointer;text-align:center;transition:transform var(--t-mid) var(--ease),color var(--t-fast),filter var(--t-mid) var(--ease)}
.btn::before,.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--bb);-webkit-mask:var(--bar-mask);mask:var(--bar-mask)}
.btn::after{background:var(--bh);opacity:0;transition:opacity var(--t-mid) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:14px;height:14px;flex:none}
.btn-amber{color:var(--cocoa);filter:drop-shadow(0 6px 14px rgba(200,145,0,.28))}
.btn-amber:hover{filter:drop-shadow(0 10px 20px rgba(200,145,0,.36))}
.btn-ghost{--bb:var(--g-glass);--bh:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.14));color:#fff}
.btn-line{--bb:linear-gradient(180deg,rgba(31,26,23,.07),rgba(31,26,23,.1));--bh:var(--g-cocoa);color:var(--cocoa)}
.btn-line:hover{color:#fff}
.btn .ar{width:24px;background:var(--g-cocoa);color:#fff;display:grid;place-items:center;transition:transform var(--t-mid) var(--ease);flex:none;aspect-ratio:100/112.7;-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat}
.btn:hover .ar{transform:translateX(3px)}
.btn .ar svg{width:11px;height:11px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.center-row{justify-content:center;margin-top:36px}

/* Top bar + header */



.site-header{position:sticky;top:0;z-index:90;background:var(--cream);transition:box-shadow var(--t-mid) var(--ease),background-color var(--t-mid) var(--ease)}
.admin-bar .site-header{top:32px}
.site-header.is-stuck{box-shadow:0 1px 0 rgba(31,26,23,.06),0 14px 34px -24px rgba(31,26,23,.5);background:rgba(253,247,229,.9);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.site-header .bar{display:flex;align-items:center;gap:22px;padding:14px 0;transition:padding var(--t-mid) var(--ease)}

.brand img{height:56px;width:auto}
.brand{display:block;line-height:0;flex:none}
.brand .logo{transition:transform var(--t-mid) var(--ease);transform-origin:left center}

.primary-nav{margin-left:auto;display:flex;align-items:center}
.nav-donate{display:none}
.menu{display:flex;gap:2px;align-items:center}
.menu>li{position:relative}
.menu a{position:relative;display:block;padding:10px 13px;font:500 .9rem var(--font-head);transition:color var(--t-fast)}
/* Menu hover: a short amber line that draws out from the centre under the link */
.menu>li>a::before{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--amber),#ffd84d);transform:scaleX(0);transform-origin:center;transition:transform .45s var(--ease)}
.menu>li>a:hover::before,.menu>li:focus-within>a::before,.menu>.current-menu-item>a::before,.menu>.current-menu-ancestor>a::before{transform:scaleX(1)}
.menu>li>a:hover,.menu>li:focus-within>a,.menu .current-menu-item>a,.menu .current-menu-ancestor>a{color:var(--amber-ink)}
.menu-item-has-children>a::after{content:"";display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 0 3px 8px;opacity:.6;transition:transform var(--t-mid) var(--ease)}
.menu-item-has-children:hover>a::after,.menu-item-has-children:focus-within>a::after{transform:translateY(2px) rotate(225deg)}
.menu .sub{position:absolute;left:0;top:100%;min-width:280px;background:#fff;border-radius:var(--r-md);padding:8px;box-shadow:0 24px 50px -20px rgba(31,26,23,.35);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--t-fast) var(--ease),transform var(--t-mid) var(--ease),visibility 0s linear var(--t-fast);z-index:5}
.menu li:hover>.sub,.menu li:focus-within>.sub{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-fast) var(--ease),transform var(--t-mid) var(--ease),visibility 0s}
.menu .sub a{border-radius:10px;font-weight:500;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),padding var(--t-mid) var(--ease)}
/* Dropdown hover: an amber tint with an amber edge, clearly visible on the white panel */
.menu .sub a:hover,.menu .sub a:focus-visible{background:#fff2c2;color:#7a3b12!important;box-shadow:inset 3px 0 0 var(--amber);padding-left:18px}
.menu .sub .current-menu-item>a,.menu .sub .current-menu-ancestor>a{background:#fff8e1;color:#7a3b12!important;box-shadow:inset 3px 0 0 var(--amber-d)}
/* Third level (Samajhdar Maan aur Ghrana under WELSA) sits in the same panel, indented under its parent with a guide line */
.menu .sub .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:none;min-width:0;padding:2px 0 4px;margin:0 0 2px 22px;border-left:2px solid #efe3c8;border-radius:0;transition:none}
.menu .sub .sub a{font-size:.84rem;padding:8px 12px;color:#5d534b}
.menu .sub .sub a:hover{padding-left:16px}
.menu .sub .menu-item-has-children>a::after{display:none}
.nav-toggle{display:none;margin-left:auto;background:var(--cocoa);color:#fff;border:0;width:46px;cursor:pointer;aspect-ratio:100/112.7;-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat}
.nav-toggle span[aria-hidden]{display:block;width:18px;height:2px;background:#fff;margin:5px auto;transition:transform var(--t-mid) var(--ease),opacity var(--t-fast)}
/* Logo: the original artwork; only the hexagon emblem turns. It turns 60° at a time, so between
   turns it always sits exactly as drawn. */
.logo{position:relative;display:block;line-height:0}
.logo img{display:block;height:100%;width:auto}
.logo .logo-band{width:100%;height:100%}
.logo .logo-hex{position:absolute;top:0;left:13.667%;width:18.5%;height:100%;transform-origin:49.5% 49.6%;animation:hexTurn 15s var(--ease-io) infinite}
@keyframes hexTurn{
  0%,11.7%{transform:rotate(0)}16.7%,28.3%{transform:rotate(60deg)}33.3%,45%{transform:rotate(120deg)}
  50%,61.7%{transform:rotate(180deg)}66.7%,78.3%{transform:rotate(240deg)}83.3%,95%{transform:rotate(300deg)}100%{transform:rotate(360deg)}}
.nav-toggle[aria-expanded=true] span:nth-child(2){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(3){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(4){transform:translateY(-7px) rotate(-45deg)}

/* Hero slider (home) */
.hero{position:relative;background:var(--cocoa);color:#fff;overflow:hidden;padding:52px 0 38px}
/* Honeycomb texture on dark bands (static: texture, not motion) */
.phero::before,.story::before,.ripple::before,.cta::before,.bg-dark::before{content:"";position:absolute;inset:0;background:var(--honeycomb) 0 0/56px 97px;opacity:.07;pointer-events:none;-webkit-mask:linear-gradient(115deg,transparent 30%,#000 75%);mask:linear-gradient(115deg,transparent 30%,#000 75%)}
.hero>.wrap,.phero>.wrap,.story>.wrap,.ripple>.wrap,.cta>.wrap,.bg-dark>.wrap{position:relative}
.slides{display:grid}
.slide{grid-area:1/1;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;opacity:0;visibility:hidden;transition:opacity .9s var(--ease-io),visibility 0s linear .9s}
.slide.is-on{opacity:1;visibility:visible;z-index:1;transition:opacity .9s var(--ease-io),visibility 0s}
.pill{display:inline-block;background:var(--g-glass);font-family:var(--font-head);letter-spacing:.04em;padding:8px 20px;-webkit-mask:var(--bar-mask-s);mask:var(--bar-mask-s);font-size:.74rem;font-weight:700;margin-bottom:22px;line-height:1.4}
.slide .h1,.phero h1,.phero .h1{font-family:var(--font-hero);font-weight:600;font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.08;margin-bottom:20px}
.lead{color:var(--on-dark);max-width:560px;font-size:1.02rem}
.slide .txt>*{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.slide.is-on .txt>*{opacity:1;transform:none}
.slide.is-on .txt>:nth-child(1){transition-delay:.15s}
.slide.is-on .txt>:nth-child(2){transition-delay:.22s}
.slide.is-on .txt>:nth-child(3){transition-delay:.29s}
.slide.is-on .txt>:nth-child(4){transition-delay:.36s}
/* Photos sit in a wide hexagon, echoing the emblem */
.slide .pic,.phero .pic{overflow:hidden;aspect-ratio:4/3.1;background:var(--cocoa-2);-webkit-mask:var(--wide-mask);mask:var(--wide-mask)}
.slide .pic img,.phero .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 2.4s var(--ease)}
.slide.is-on .pic img,.phero .pic.in img,.no-js .phero .pic img{transform:scale(1)}
.js .phero .pic{opacity:0;transition:opacity 1s var(--ease-io)}
.js .phero .pic.in{opacity:1}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:28px}
.hero-stat{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--on-dark);max-width:290px;line-height:1.4}
.hero-stat b{font:700 2rem/1 var(--font-hero);color:var(--amber)}
.hero-ctrl{display:flex;align-items:center;gap:18px;margin-top:34px}
.hero-pause{position:relative;isolation:isolate;width:40px;height:46px;border:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.hero-pause::before,.arrows button::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.12);-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat;transition:background var(--t-fast),transform var(--t-mid) var(--ease)}
.hero-pause svg{width:14px;height:14px}
.hero-pause .ic-play,.hero-pause[aria-pressed=true] .ic-pause{display:none}
.hero-pause[aria-pressed=true] .ic-play{display:block}
.progress{flex:1;height:3px;background:rgba(255,255,255,.14);border-radius:9px;overflow:hidden}
.progress i{display:block;height:100%;width:100%;background:var(--amber);border-radius:9px;transform:scaleX(0);transform-origin:left}
.progress.run i{animation:fill var(--dur,6500ms) linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.arrows{display:flex;gap:10px}
.arrows button{position:relative;isolation:isolate;width:46px;height:52px;border:0;background:none;color:var(--cocoa);cursor:pointer;display:grid;place-items:center;transition:transform var(--t-mid) var(--ease)}
.arrows button::before{background:var(--g-soft)}
.arrows button:hover::before{background:var(--g-amber)}
.arrows button:hover{transform:translateY(-2px)}
.arrows svg{width:16px;height:16px}
.count{font:600 .8rem var(--font-head);color:#cfc5b6;min-width:48px;text-align:right}

/* ------------------------------------------------------------------ Full-width hero slideshow */
.hero-full{padding:0!important;height:clamp(540px,calc(var(--hh,100svh) - 118px),980px);isolation:isolate}
.hero-full.h-tall{--hh:85svh}.hero-full.h-medium{--hh:70svh}
.admin-bar .hero-full{height:clamp(540px,calc(var(--hh,100svh) - 150px),980px)}
.hero-full .slides{position:absolute;inset:0;display:block}
.hero-full .slide{position:absolute;inset:0;display:block;opacity:1;visibility:hidden;z-index:0;transition:none}
.hero-full .slide.is-on{visibility:visible;z-index:2}
.hero-full .slide.is-prev{visibility:visible;z-index:1}
/* Media: photo or video filling the slide, with a slow settle while the slide shows */
.slide-media{position:absolute;inset:0;overflow:hidden;background:var(--cocoa-2);transform:scale(1.1);transition:transform 0s linear .1s,filter 1.2s var(--ease-io)}
.slide.is-on .slide-media{transform:scale(1);transition:transform 9s cubic-bezier(.2,.4,.3,1)}
.slide.is-prev .slide-media{transform:scale(1);filter:brightness(.55);transition:transform 9s cubic-bezier(.2,.4,.3,1),filter 1.2s var(--ease-io)}
.slide-media img,.slide-media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--fx,center)}
.slide-media video{opacity:0;transition:opacity .9s var(--ease-io)}
.slide.has-video .slide-media video{opacity:1}
/* Shade on the text side; strength per slideshow or per slide */
.slide{--sa:.8}.slide.s-light{--sa:.58}.slide.s-strong{--sa:.93}
.slide-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(18,14,12,var(--sa)) 0%,rgba(18,14,12,calc(var(--sa) * .7)) 38%,rgba(18,14,12,0) 78%),linear-gradient(0deg,rgba(18,14,12,.6) 0%,rgba(18,14,12,0) 32%)}
.slide.a-left .slide-shade{background:linear-gradient(90deg,rgba(18,14,12,var(--sa)) 0%,rgba(18,14,12,calc(var(--sa) * .7)) 38%,rgba(18,14,12,0) 78%),linear-gradient(0deg,rgba(18,14,12,.6) 0%,rgba(18,14,12,0) 32%)}
.slide.a-center .slide-shade{background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(18,14,12,calc(var(--sa) * .85)),rgba(18,14,12,calc(var(--sa) * .45)))}
/* Honeycomb fading in from the text side */
.slide-shade::after{content:"";position:absolute;inset:0;background:var(--honeycomb) 0 0/56px 97px;opacity:.09;-webkit-mask:linear-gradient(270deg,#000,transparent 55%);mask:linear-gradient(270deg,#000,transparent 55%)}
.slide.a-left .slide-shade::after{-webkit-mask:linear-gradient(90deg,#000,transparent 55%);mask:linear-gradient(90deg,#000,transparent 55%)}
.slide.a-center .slide-shade::after{display:none}
/* Text */
.slide-wrap{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:flex-end;padding:40px 0 96px}
.slide.a-left .slide-wrap{justify-content:flex-start}
.slide.a-center .slide-wrap{justify-content:center;text-align:center}
.slide.a-center .hero-actions{justify-content:center}
.slide.a-center .lead{margin-inline:auto}
.hero-full .txt{max-width:620px;width:100%}
.hero-full .h1{font-size:clamp(2.6rem,5.4vw,4.75rem);line-height:1.03;letter-spacing:-.028em;font-weight:600;margin-bottom:22px;text-shadow:0 2px 34px rgba(0,0,0,.3)}
.hero-full .lead{font-size:clamp(1rem,1.25vw,1.14rem);color:#f4ede1;max-width:560px;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero-full .pill{background:var(--g-amber);color:var(--cocoa)}
.hero-full .hero-stat{margin-top:28px}
.slide.a-center .hero-stat{margin-inline:auto;justify-content:center}
.hero-full .slide .txt>*{transition-duration:.8s,1s}
.hero-full .slide.is-on .txt>:nth-child(1){transition-delay:.45s}
.hero-full .slide.is-on .txt>:nth-child(2){transition-delay:.55s}
.hero-full .slide.is-on .txt>:nth-child(3){transition-delay:.65s}
.hero-full .slide.is-on .txt>:nth-child(4){transition-delay:.75s}
.hero-full .slide.is-on .txt>:nth-child(5){transition-delay:.85s}
.hero-full .slide.is-prev .txt>*{opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .6s var(--ease);transition-delay:0s}
/* Transitions (the arriving slide covers the leaving one) */
.t-hex .slide.enter{animation:hexIn 1.5s cubic-bezier(.7,0,.25,1) both}
@keyframes hexIn{from{clip-path:polygon(50% 44%,54% 47%,54% 53%,50% 56%,46% 53%,46% 47%)}to{clip-path:polygon(50% -60%,140% -5%,140% 105%,50% 160%,-40% 105%,-40% -5%)}}
.t-curtain .slide.enter{animation:curtainIn 1.3s var(--ease) both}
.t-curtain.go-back .slide.enter{animation-name:curtainBack}
@keyframes curtainIn{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes curtainBack{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.t-slide .slide.enter{animation:slideIn 1.2s var(--ease) both}
.t-slide .slide.is-prev{animation:slideOut 1.2s var(--ease) both}
.t-slide.go-back .slide.enter{animation-name:slideInBack}
.t-slide.go-back .slide.is-prev{animation-name:slideOutBack}
@keyframes slideIn{from{transform:translateX(100%)}}
@keyframes slideOut{to{transform:translateX(-30%)}}
@keyframes slideInBack{from{transform:translateX(-100%)}}
@keyframes slideOutBack{to{transform:translateX(30%)}}
.t-fade .slide.enter{animation:fadeIn 1.3s var(--ease-io) both}
@keyframes fadeIn{from{opacity:0}}
/* Controls along the bottom */
.hero-full .hero-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:5;margin:0;padding:0 0 26px;display:block}
.hero-full .hero-ctrl .wrap{display:flex;align-items:center;gap:18px}
.hero-dots{display:flex;gap:8px;flex:1;max-width:520px}
.hero-dots button{flex:1;min-width:18px;max-width:90px;padding:12px 0;background:none;border:0;cursor:pointer}
.hero-dots i{display:block;position:relative;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden;transition:background var(--t-fast)}
.hero-dots button:hover i{background:rgba(255,255,255,.55)}
.hero-dots i::after{content:"";position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left}
.hero-dots [aria-current] i::after{transform:scaleX(1)}
.hero-dots button.run i::after{animation:fill var(--dur,7000ms) linear both}
.hero-full .count{margin-left:auto}
.hero-full .arrows button::before{background:var(--g-soft)}.hero-full .arrows button:hover::before{background:var(--g-amber)}
/* Phones: text sits low over a shade rising from the bottom, whatever side is chosen for desktop */
@media(max-width:760px){
  .hero-full{height:clamp(560px,calc(100svh - 90px),760px)}
  .hero-full .slide .slide-shade{background:linear-gradient(0deg,rgba(18,14,12,calc(var(--sa) + .05)) 0%,rgba(18,14,12,calc(var(--sa) * .75)) 48%,rgba(18,14,12,.12) 100%)}
  .hero-full .slide-shade::after{display:none}
  .hero-full .slide-wrap{align-items:flex-end;justify-content:flex-start;text-align:left;padding:30px 0 92px}
  .hero-full .slide.a-center .hero-actions{justify-content:flex-start}
  .hero-full .h1{font-size:clamp(2.1rem,9vw,2.8rem)}
  .hero-full .hero-actions{gap:12px;margin-top:20px}
  .hero-full .hero-stat{display:none}
  .hero-full .count{display:none}
  .hero-full .hero-ctrl{padding-bottom:18px}
  .hero-full .arrows button{width:40px;height:46px}
}

/* Inner page header */
.phero{position:relative;background:var(--cocoa);color:#fff;padding:64px 0 72px;overflow:hidden}
.phero-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center;position:relative;z-index:1}
.phero.has-img .phero-grid{grid-template-columns:1.05fr .95fr}
.phero:not(.has-img) .txt{max-width:820px}
.phero h1{font-size:clamp(2rem,3.8vw,3.3rem)}
.phero .row{margin-top:26px}
.phero .pic{aspect-ratio:4/3.2}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:.78rem;color:#cfc5b6;margin-bottom:22px}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}
.crumbs a{text-decoration:underline;text-decoration-color:rgba(248,196,0,.6);text-underline-offset:3px}
.crumbs a:hover{color:var(--amber)}
.crumbs [aria-current]{color:#fff;font-weight:600}

/* Sections */
section{position:relative}
.sec{padding:100px 0}
.bg-cream{background:var(--cream)}
.bg-peach{background:var(--peach)}
.bg-paper{background:var(--paper)}
.bg-dark{background:var(--cocoa);color:#fff}
.bg-dark .lede,.bg-dark .lede p{color:var(--on-dark)}
.bg-dark .eyebrow{color:var(--amber)}
.bg-cream+.bg-cream,.bg-peach+.bg-peach,.bg-paper+.bg-paper{padding-top:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 .74rem/1.4 var(--font-head);color:var(--amber-ink);margin-bottom:14px;letter-spacing:.14em;text-transform:uppercase}.eyebrow::before{content:"";width:9px;aspect-ratio:100/112.7;background:var(--g-amber);-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat;flex:none}
.h2{font-size:clamp(1.85rem,3.1vw,2.7rem);line-height:1.12;letter-spacing:-.022em}
/* Divider: a red and an amber hexagon, then a hairline */
.dash{width:190px;max-width:60%;height:14px;margin:16px 0 20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'%3E%3Cpath d='M6 1 12 4.5V9.5L6 13 0 9.5V4.5Z' fill='%23da251d'/%3E%3Cpath d='M21 1 27 4.5V9.5L21 13 15 9.5V4.5Z' fill='%23f8c400'/%3E%3C/svg%3E") left center/30px 14px no-repeat,linear-gradient(var(--amber),var(--amber)) 36px center/calc(100% - 36px) 2px no-repeat}
.js .reveal .dash,.js .reveal.dash{background-size:30px 14px,0 2px;transition:background-size 1.1s var(--ease) .3s}
.js .reveal.in .dash,.js .reveal.in.dash{background-size:30px 14px,calc(100% - 36px) 2px}
.center{text-align:center}.center .dash{margin-inline:auto}
.lede{color:var(--muted);max-width:62ch;font-size:1.06rem;line-height:1.75}
.lede p:last-child{margin-bottom:0}
.center .lede{margin-inline:auto}
.shead{margin-bottom:46px}
.shead.center{max-width:760px;margin-inline:auto;margin-bottom:46px}

/* Text with photo */
.about{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about.flip .photo{order:2}
.about.noimg{grid-template-columns:1fr;max-width:860px}
.photo{position:relative}
.photo>img{border-radius:var(--r-xl);width:100%;aspect-ratio:4/3.2;object-fit:cover;background:var(--peach)}
.photo .scrib{position:absolute;left:-34px;bottom:30px;width:110px;height:140px;color:var(--amber);z-index:1}
.about.flip .photo .scrib{left:auto;right:-34px}
.about .row{margin-top:24px}

/* Text block */
.tblock{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.tblock.center{display:block;max-width:820px}
.tblock .lede{max-width:70ch;font-size:1.02rem}
.tblock .row{margin-top:24px}
.bg-dark.tsec .h2{font-family:var(--font-hero);font-weight:600}

/* Cards */
.cards{display:grid;gap:22px}
.cards.cols-2{grid-template-columns:repeat(2,1fr)}
.cards.cols-3{grid-template-columns:repeat(3,1fr)}
.cards.cols-4{grid-template-columns:repeat(4,1fr)}
.ccard{background:#fff;border-radius:var(--r-xl);padding:30px 28px;position:relative;box-shadow:0 18px 40px -32px rgba(31,26,23,.55);transition:transform .5s var(--ease),box-shadow .5s var(--ease);display:flex;flex-direction:column}
.bg-cream .ccard,.bg-paper .ccard{box-shadow:0 18px 40px -32px rgba(31,26,23,.55),inset 0 0 0 1px var(--line)}
.ccard:hover{transform:translateY(-6px)}
.ccard h3{font-size:1.16rem;margin-bottom:8px;letter-spacing:-.01em}
.ccard p{color:var(--muted);font-size:.93rem;margin-bottom:.7em}
.ccard .cb{display:flex;flex-direction:column;flex:1}
.ccard .num{font:600 2.4rem/1 var(--font-hero);color:var(--amber-ink);margin-bottom:18px;opacity:.9}
.ccard .tick,.fcard .tick{width:40px;height:40px;border-radius:50%;background:var(--amber);color:var(--cocoa);display:grid;place-items:center;margin-bottom:16px;flex:none}
.ccard .tick svg,.fcard .tick svg{width:18px;height:18px}
.ccard .more{margin-top:auto;padding-top:8px;font-weight:700;font-size:.85rem;display:inline-flex;gap:8px;align-items:center;color:var(--cocoa)}
.ccard .more svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.ccard:hover .more svg{transform:translateX(4px)}
.st-statement .ccard{padding:44px 40px;background:var(--cocoa);color:#fff}
.st-statement .ccard h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--amber);font-weight:700}
.st-statement .ccard p{font:500 clamp(1.15rem,1.8vw,1.45rem)/1.5 var(--font-hero);color:#fff}
.st-statement .ccard::after{content:"";position:absolute;right:26px;bottom:22px;width:70px;height:90px;opacity:.18;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 140' fill='none' stroke='%23f8c400' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M14 134L36 8M40 134L62 8M66 134L88 8M92 134L110 26'/%3E%3C/svg%3E") no-repeat center/contain}
.st-link .ccard{padding:14px 14px 26px}
.st-link .ccard .im{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;margin-bottom:18px}
.st-link .ccard .im img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.st-link .ccard:hover .im img{transform:scale(1.07)}
.st-link .ccard .cb{padding:0 12px}
.st-link .ccard:not(:has(.im)) .cb{padding:14px 12px 0}
.st-link .ccard h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.st-link .ccard h3 a:focus-visible{outline:0}
.st-link .ccard:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.bg-dark .ccard{background:var(--cocoa-2);color:#fff;box-shadow:none}
.bg-dark .ccard p{color:var(--on-dark)}
.cards-note{max-width:760px;margin:34px auto 0;background:#fff;border-radius:var(--r-lg);padding:20px 26px;border-left:5px solid var(--amber);font-weight:500}
.cards-note p{margin:0}

/* Pillar cards (home) */
.pillars-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:46px;flex-wrap:wrap}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:#fff;border-radius:var(--r-xl);padding:14px 14px 26px;display:flex;flex-direction:column;box-shadow:0 18px 40px -30px rgba(31,26,23,.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-10px);box-shadow:0 34px 50px -30px rgba(31,26,23,.55)}
.card .im,.pcard .im{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.3;position:relative;background:var(--cream)}
.card .im img,.pcard .im img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .im img,.pcard:hover .im img{transform:scale(1.08)}
.tag{position:absolute;left:12px;top:12px;background:var(--amber);color:var(--cocoa);font-size:.72rem;font-weight:700;padding:6px 13px;border-radius:999px}
.card .bd{padding:20px 10px 0;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.18rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.card .smg{background:var(--cream);border-radius:var(--r-md);padding:11px 14px;font-size:.8rem;line-height:1.5;margin-bottom:14px;border-left:4px solid var(--amber)}
.card .smg a{font-weight:700;text-decoration:underline;text-decoration-color:var(--amber-d);text-underline-offset:3px}
.card .row{margin-top:auto;gap:10px}
.card .btn{padding:11px 18px;font-size:.78rem}

/* Project cards */
.pcards{display:grid;gap:30px}
.pcard{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;background:#fff;border-radius:var(--r-xl);padding:16px;box-shadow:0 18px 40px -32px rgba(31,26,23,.55)}
.pcard.flip .im{order:2}
.pcard .im{aspect-ratio:4/3}
.pcard .bd{padding:18px 26px 18px 0}
.pcard.flip .bd{padding:18px 0 18px 26px}
.pcard .idx{font:600 .85rem var(--font-hero);color:var(--amber-ink);display:block;margin-bottom:8px}
.pcard h2{font-size:clamp(1.35rem,2.2vw,1.8rem)}
.pcard p{color:var(--muted)}
.pcard .row{margin-top:22px}
.pcard .btn{padding:12px 20px;font-size:.8rem}

/* Ripple */
.ripple{background:var(--cocoa);color:#fff;overflow:hidden}
.ripple .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.ripple .lede,.ripple .lede p{color:var(--on-dark)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.chips li{background:rgba(255,255,255,.09);padding:9px 16px;border-radius:999px;font-size:.82rem;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .3s,transform .3s var(--ease)}
.chips li:hover{background:var(--amber);color:var(--cocoa);transform:translateY(-3px)}
.mini{display:flex;gap:18px;align-items:center;margin:8px 0 26px}
.mini img{width:120px;height:120px;border-radius:var(--r-lg);object-fit:cover;background:var(--cocoa-2)}
.mini p{margin:0;color:var(--on-dark);font-size:.9rem}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:22px;font-size:.8rem;color:var(--on-dark)}
.legend button{font:600 .8rem var(--font-head);background:none;border:0;color:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;padding:4px 0}
.legend i{width:12px;height:12px;border-radius:50%;background:var(--c);display:inline-block}
.legend button:hover,.legend button.on{color:#fff}
.rp-wrap{position:relative;max-width:640px;margin-inline:auto;width:100%}
.rp{width:100%;height:auto;display:block;overflow:visible;font-family:var(--font-head);font-weight:700}
.rp text{fill:#2a201e;pointer-events:none}
.rp .light text{fill:#fff}
.rp-r{transform-box:view-box;transform-origin:50% 50%;opacity:0;transform:scale(.6);cursor:pointer;transition:transform 1.4s var(--ease) calc(var(--i)*.16s),opacity .9s var(--ease-io) calc(var(--i)*.16s)}
.rp.is-in .rp-r{opacity:1;transform:scale(1)}
.rp.done .rp-r{transition:transform .35s var(--ease),opacity .35s ease}
.rp.done[data-active] .rp-r{opacity:.35}
.rp.done[data-active] .rp-r.on{opacity:1;transform:scale(1.015)}
.rp-pulse{fill:none;stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke;transform-box:view-box;transform-origin:50% 50%;opacity:0;pointer-events:none}
.rp.done .rp-pulse{animation:pulse 5.4s cubic-bezier(.2,.6,.4,1) infinite}
.rp.done .rp-pulse:nth-child(2){animation-delay:1.8s}
.rp.done .rp-pulse:nth-child(3){animation-delay:3.6s}
@keyframes pulse{0%{transform:scale(.1);opacity:.85}80%{opacity:.12}100%{transform:scale(1);opacity:0}}
.rp-replay{position:absolute;right:0;top:-6px;z-index:2;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:999px;padding:9px 16px;font:700 .76rem var(--font-head);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:background .25s}
.rp-replay:hover{background:var(--amber);color:var(--cocoa)}
.rp-cap{text-align:center;margin-top:12px;min-height:1.6em;font-size:.88rem;color:var(--on-dark)}

/* How we work + stats */
.how{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.steps{display:grid;gap:16px}
.step{background:#fff;border-radius:var(--r-lg);padding:22px 26px;display:grid;grid-template-columns:46px 1fr;gap:18px;box-shadow:0 14px 34px -28px rgba(31,26,23,.6);transition:transform .45s var(--ease)}
.step:hover{transform:translateX(8px)}
.step .ic{width:46px;height:46px;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--amber-ink);font:700 1.1rem var(--font-hero)}
.step h3{font-size:1.05rem;margin-bottom:4px}
.step p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:72px;padding-top:40px;border-top:1px solid rgba(31,26,23,.12)}
.stat{display:flex;gap:14px;align-items:center}
.stat b{font:600 clamp(2.4rem,4.2vw,3.5rem)/1 var(--font-hero);color:var(--amber-ink)}
.stat>span{font-size:.8rem;font-weight:700;line-height:1.35;max-width:150px}

/* Pledges */
.pledges{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pledges.cols-1{grid-template-columns:minmax(0,520px);justify-content:center}
.pledges.cols-2{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}
.pledge{background:var(--paper);border-radius:var(--r-xl);padding:40px 30px;text-align:center;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--line)}
.bg-paper .pledge{background:#fff}
.pledge::before{content:"";position:absolute;inset:auto -30% -55% -30%;height:75%;background:radial-gradient(closest-side,rgba(248,196,0,.28),transparent);transition:transform .8s var(--ease)}
.pledge:hover::before{transform:scale(1.4) translateY(-12%)}
.pledge b{display:block;font:600 clamp(2.4rem,4vw,3.3rem)/1.1 var(--font-hero);color:var(--amber-ink);position:relative}
.pledge span{position:relative;font-weight:600;color:var(--cocoa);display:block;margin-top:10px}
.meter{position:relative;height:8px;border-radius:9px;background:rgba(31,26,23,.1);margin:20px 0 8px;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--amber);border-radius:9px}
.pledge small{position:relative;font-size:.8rem;color:var(--muted);font-weight:600}

/* Dark story band */
.story{background:var(--cocoa);color:#fff;text-align:center;padding:110px 0}
.story .qm{width:60px;height:60px;color:var(--amber);margin:0 auto 24px}
.story .eyebrow{color:var(--amber)}
.story h2{font-family:var(--font-hero);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.8rem);max-width:20ch;margin:0 auto 24px}
.story p{max-width:68ch;margin:0 auto 32px;color:var(--on-dark);font-size:1.05rem}
.story .row{justify-content:center}
.band-quote{margin:0 auto 32px;max-width:60ch}
.band-quote p{font:500 1.25rem/1.5 var(--font-hero);color:#fff;margin-bottom:8px}
.band-quote cite{font-style:normal;color:var(--amber);font-weight:700;font-size:.9rem}

/* Events */
.events{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.ev{background:#fff;border-radius:var(--r-xl);padding:14px 14px 30px;transition:transform .5s var(--ease);box-shadow:0 18px 40px -34px rgba(31,26,23,.5)}
.ev:hover{transform:translateY(-8px)}
.ev .im{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--cream)}
.ev .im img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ev:hover .im img{transform:scale(1.06)}
.ev .bd{padding:22px 16px 0}
.ev small{font-weight:700;color:var(--amber-ink);font-size:.78rem}
.ev h3,.ev .h3{font-size:1.3rem;margin:6px 0 10px}
.ev p{color:var(--muted);font-size:.92rem}
.up-h{margin-top:80px;text-align:center}
.upcoming{display:grid;gap:16px;max-width:900px;margin:30px auto 0}
.upcoming li{display:grid;grid-template-columns:90px 1fr auto;gap:24px;align-items:center;background:#fff;border-radius:var(--r-lg);padding:20px 24px}
.upcoming .date{background:var(--cocoa);color:#fff;border-radius:var(--r-md);text-align:center;padding:12px 6px}
.upcoming .date b{display:block;font:600 1.8rem/1 var(--font-hero);color:var(--amber)}
.upcoming .date span{font-size:.72rem;font-weight:700}
.upcoming h3{font-size:1.1rem;margin-bottom:4px}
.upcoming p{margin:0;color:var(--muted);font-size:.9rem}
.upcoming .place{display:flex;gap:6px;align-items:center;font-weight:600;color:var(--cocoa)}
.upcoming .place svg{width:14px;height:14px}
.up-empty{max-width:640px;margin:24px auto 0;text-align:center;background:#fff;border-radius:var(--r-xl);padding:34px;color:var(--muted)}
.up-empty .social{justify-content:center;margin-top:16px}

/* Involve + donate (home) */
.give{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ways{display:grid;gap:14px;margin-top:30px}
.way{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(31,26,23,.12)}
.way h3{font-size:1.15rem;margin:0 0 4px}
.way p{margin:0 0 8px;color:var(--muted);font-size:.92rem}
.way a{font-weight:700;font-size:.85rem;text-decoration:underline;text-decoration-color:var(--amber-d);text-underline-offset:4px}
.donate{background:var(--paper);border-radius:var(--r-xl);padding:38px;box-shadow:0 30px 60px -36px rgba(31,26,23,.55)}
.donate h3{font-size:1.6rem;text-align:center}
.donate .sub{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:22px}
.funds{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.funds button{font:700 .8rem var(--font-head);background:#fff;color:var(--cocoa);border:0;border-radius:999px;padding:11px 18px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:all .3s var(--ease)}
.funds button:hover{transform:translateY(-2px)}
.funds button[aria-checked=true]{background:var(--amber);box-shadow:none}
.fund-note{font-size:.85rem;color:var(--muted);min-height:2.7em;margin-bottom:12px}
.bank{background:#fff;border-radius:var(--r-md);padding:6px 18px;margin:0 0 18px}
.bank div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.85rem}
.bank div:last-child{border:0}
.bank dt{color:var(--muted)}
.bank dd{margin:0;font-weight:700;display:flex;gap:10px;align-items:center;word-break:break-all;text-align:right;justify-content:flex-end}
.copy{font:700 .7rem var(--font-head);background:var(--cream);color:var(--cocoa);border:0;border-radius:999px;padding:6px 12px;cursor:pointer;transition:background .2s;flex:none}
.copy:hover,.copy.ok{background:var(--amber)}
.donate .btn{width:100%;justify-content:center}
.donate small{display:block;text-align:center;margin-top:14px;color:var(--muted);font-size:.78rem;line-height:1.5}

/* Partners strip */
.partners{padding:54px 0 46px;background:var(--peach);overflow:hidden;text-align:center}
.partners .t{margin-bottom:26px}
.partners .t b{font-size:1.15rem}
.partners .t span{display:block;color:var(--muted);font-size:.88rem}
.marq-wrap{overflow:hidden}
.marq{display:flex;width:max-content;animation:marq 42s linear infinite}
.marq:hover,.partners.paused .marq,.marq-wrap:focus-within .marq{animation-play-state:paused}
.marq li{margin-right:14px;background:#fff;border-radius:999px;padding:13px 26px;font-weight:700;font-size:.88rem;white-space:nowrap;box-shadow:0 10px 24px -20px rgba(31,26,23,.6);display:flex;align-items:center}
.marq li img{height:30px;width:auto}
.marq-pause{margin-top:18px;background:none;border:0;font:600 .78rem var(--font-head);color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@keyframes marq{to{transform:translateX(-50%)}}

/* Problem / solution */
.ps{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.ps-card{border-radius:var(--r-xl);padding:40px 38px}
.ps-card h2{font-size:clamp(1.4rem,2.3vw,1.9rem);margin-bottom:22px}
.ps-card.prob{background:var(--cocoa);color:#fff}
.ps-card.sol{background:#fff;box-shadow:0 30px 60px -40px rgba(31,26,23,.6)}
.ps-card ul{display:grid;gap:14px}
.ps-card li,.checks li{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;line-height:1.55}
.ps-card .b,.checks .b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-top:-2px}
.ps-card .b svg,.checks .b svg{width:14px;height:14px}
.prob .b{background:rgba(255,255,255,.12);color:var(--amber)}
.prob li{color:var(--on-dark)}
.sol .b,.checks .b{background:var(--amber);color:var(--cocoa)}

/* Milestones */
.ms-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.timeline{position:relative;display:grid;gap:14px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:2px;background:repeating-linear-gradient(180deg,var(--amber-d) 0 7px,transparent 7px 13px)}
.timeline li{position:relative;background:#fff;border-radius:var(--r-lg);padding:20px 24px;display:grid;grid-template-columns:minmax(150px,.7fr) 1.3fr;gap:20px;box-shadow:0 14px 34px -30px rgba(31,26,23,.6)}
.timeline li::before{content:"";position:absolute;left:-31px;top:24px;width:16px;height:16px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px var(--cream)}
.bg-peach .timeline li::before{box-shadow:0 0 0 4px var(--peach)}
.timeline b{font-size:.95rem;line-height:1.4}
.timeline span{color:var(--muted);font-size:.93rem}

/* Outcomes + mission */
.oc{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.checks{display:grid;gap:16px}
.mission{background:var(--cocoa);color:#fff;border-radius:var(--r-xl);padding:46px 42px;position:relative;overflow:hidden}
.mission .eyebrow{color:var(--amber)}
.mission .m{font:500 clamp(1.15rem,1.9vw,1.5rem)/1.5 var(--font-hero);margin:0}
.mission::after{content:"";position:absolute;right:-10px;bottom:-20px;width:120px;height:150px;opacity:.16;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 140' fill='none' stroke='%23f8c400' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M14 134L36 8M40 134L62 8M66 134L88 8M92 134L110 26'/%3E%3C/svg%3E") no-repeat center/contain}

/* Alignment */
.al{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.al-n{margin-bottom:24px}
.al-n p:not(.eyebrow){font-size:1.02rem}
.al-q{margin:0;border-left:4px solid var(--amber);padding:6px 0 6px 22px}
.al-q p{font:500 1.2rem/1.5 var(--font-hero);margin-bottom:6px}
.al-q cite{font-style:normal;font-weight:700;color:var(--muted);font-size:.85rem}
.sdgs{display:grid;gap:12px}
.sdgs li{display:flex;gap:16px;align-items:center;background:#fff;border-radius:var(--r-md);padding:10px 16px 10px 10px;box-shadow:inset 0 0 0 1px var(--line);font-weight:600;line-height:1.3}
.sdgs .sq{width:52px;height:52px;border-radius:10px;background:var(--c);color:#fff;font:700 1.4rem/52px var(--font-hero);text-align:center;flex:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.sdgs small{display:block;font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:.04em}

/* Feature */
.feature{overflow:hidden}
.ft{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.ft.flip .ft-pic{order:-1}
.ft-pic{margin:0;position:relative}
.ft-pic img{border-radius:var(--r-xl);width:100%;aspect-ratio:4/3.2;object-fit:cover;background:var(--cocoa-2)}
.ft-pic::before{content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:var(--r-xl);border:2px dashed rgba(248,196,0,.45);z-index:-0;pointer-events:none}
.ft-pic img{position:relative;z-index:1}
.ft-pic figcaption{font-size:.8rem;color:var(--on-dark);margin-top:28px}
.feature .h2{font-family:var(--font-hero);font-weight:600}
.feature .row{margin-top:26px}

/* Closing */
.closing .close-card{background:#fff;border-radius:var(--r-xl);padding:60px 40px;text-align:center;position:relative;overflow:hidden;max-width:980px;margin-inline:auto;box-shadow:0 30px 60px -44px rgba(31,26,23,.6)}
.closing .close-card .h2{max-width:24ch;margin-inline:auto}
.closing .close-card .lede{margin-inline:auto;max-width:56ch}
.closing .scrib{position:absolute;left:28px;top:-18px;width:70px;height:90px;color:var(--amber);opacity:.5}
.closing .center-row{margin-top:26px}
.bg-dark.closing .close-card{background:var(--cocoa-2);color:#fff}

/* People */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.person{background:#fff;border-radius:var(--r-xl);padding:30px;display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:start;box-shadow:0 18px 40px -34px rgba(31,26,23,.55)}
.person .ph img,.person .mono{width:120px;height:120px;border-radius:50%;object-fit:cover}
.person .mono{display:grid;place-items:center;background:var(--cocoa);color:var(--amber);font:600 2.1rem var(--font-hero);box-shadow:inset 0 0 0 6px var(--cocoa-2)}
.person .role{font-size:.78rem;font-weight:700;color:var(--amber-ink);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.person h3{font-size:1.2rem;margin-bottom:12px}
.person p{color:var(--muted);font-size:.93rem}
.person details{border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.person summary{cursor:pointer;font-weight:700;font-size:.88rem;color:var(--cocoa);list-style:none;display:inline-flex;gap:8px;align-items:center}
.person summary::-webkit-details-marker{display:none}
.person summary::after{content:"+";width:22px;height:22px;border-radius:50%;background:var(--amber);display:grid;place-items:center;font-size:1rem;line-height:1}
.person details[open] summary::after{content:"–"}
.person .bio{margin-top:14px}
.person .hon{background:var(--cream);border-radius:var(--r-md);padding:14px 16px;font-size:.88rem}

/* Partner list */
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plist li{background:#fff;border-radius:var(--r-xl);padding:30px 28px;box-shadow:0 18px 40px -34px rgba(31,26,23,.55);transition:transform .45s var(--ease)}
.plist li:hover{transform:translateY(-6px)}
.pl-logo{height:64px;display:flex;align-items:center;margin-bottom:18px}
.pl-logo span{width:58px;height:58px;border-radius:16px;background:var(--peach);color:var(--amber-ink);display:grid;place-items:center;font:600 1.2rem var(--font-hero)}
.pl-logo img{max-height:56px;width:auto}
.plist h3{font-size:1.08rem}
.plist h3 a{text-decoration:underline;text-decoration-color:var(--amber-d);text-underline-offset:3px}
.plist p{color:var(--muted);font-size:.92rem;margin:0}

/* Article (event pages) */
.art{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:start}
.prose{max-width:760px;font-size:1.02rem}
.prose h2{margin-top:1.6em;font-size:1.45rem}
.prose h3{margin-top:1.3em}
.prose p,.prose li{color:#3b342f}
.prose ul{list-style:disc;padding-left:1.3em;margin:0 0 1em}
.prose ol{list-style:decimal;padding-left:1.3em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose a{text-decoration:underline;text-decoration-color:var(--amber-d);text-underline-offset:3px;font-weight:600}
.prose .row{margin-top:30px}
.prose img{border-radius:var(--r-lg)}
.facts{position:sticky;top:110px;background:var(--cocoa);color:#fff;border-radius:var(--r-xl);padding:28px}
.facts div{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.facts div:last-child{border:0}
.facts dt{font-size:.72rem;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.05em}
.facts dd{margin:4px 0 0;font-size:.92rem;color:var(--on-dark)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:30px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md)}
.gallery figcaption{font-size:.8rem;color:var(--muted);margin-top:6px}

/* Stories */
.st-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:30px}
.chips-f,.lang-t{display:flex;flex-wrap:wrap;gap:8px}
.chips-f button,.lang-t button{font:700 .8rem var(--font-head);background:#fff;color:var(--cocoa);border:0;border-radius:999px;padding:10px 18px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:background .25s}
.chips-f button[aria-pressed=true],.lang-t button[aria-pressed=true]{background:var(--cocoa);color:#fff;box-shadow:none}
.lang-t button[lang=ur]{font-family:var(--font-ur);font-size:.95rem;padding-block:6px}
.lang-t.dark{margin-top:24px}
.lang-t.dark button{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.lang-t.dark button[aria-pressed=true]{background:var(--amber);color:var(--cocoa)}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.scard{background:#fff;border-radius:var(--r-xl);overflow:hidden;box-shadow:0 18px 40px -34px rgba(31,26,23,.55);display:flex;flex-direction:column;position:relative;transition:transform .45s var(--ease)}
.scard:hover{transform:translateY(-6px)}
.scard .im{aspect-ratio:16/10;overflow:hidden}
.scard .im img{width:100%;height:100%;object-fit:cover}
.scard .bd{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.scard .tag{position:static;align-self:flex-start;margin-bottom:14px}
.scard h3{font-size:1.15rem}
.scard h3 a::after{content:"";position:absolute;inset:0}
.scard:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.scard blockquote{margin:0 0 12px;color:var(--muted);font-style:italic;border-left:3px solid var(--amber);padding-left:14px}
.scard .who{font-weight:700;font-size:.85rem;margin-bottom:12px}
.scard .more{margin-top:auto;font-weight:700;font-size:.85rem;display:inline-flex;gap:8px;align-items:center}
.scard .more svg{width:13px;height:13px}
[lang=ur]{font-family:var(--font-ur);line-height:2.1}
[lang=ur] h3,[lang=ur].h1,.ur .h1{line-height:1.9}
.ur blockquote{border-left:0;border-right:3px solid var(--amber);padding:0 14px 0 0}
.story-hero blockquote{margin:0 0 10px;font-style:italic}
.story-hero .who{color:var(--amber);font-weight:700}
.story-body{margin-inline:auto}
.story-nav{justify-content:center;margin-top:40px}

/* Forms */
.fgrid2{display:grid;grid-template-columns:1.45fr .8fr;gap:36px;align-items:start}
.fcard-wrap{background:#fff;border-radius:var(--r-xl);padding:44px;box-shadow:0 30px 60px -44px rgba(31,26,23,.6)}
.fcard-wrap .shead{margin-bottom:26px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0;border:0;margin:0;padding:0}
.fld.wide{grid-column:1/-1}
.fld label,.fld legend{font-weight:700;font-size:.85rem;padding:0}
.fld legend{margin-bottom:10px}
.req{color:var(--err)}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld input[type=number],.fld select,.fld textarea,.bank-pick{font:500 .95rem var(--font-head);color:var(--ink);background:var(--cream);border:1.5px solid transparent;border-radius:14px;padding:13px 16px;width:100%;transition:border-color .2s,background .2s}
.fld textarea{resize:vertical;min-height:110px}
.fld input:focus,.fld select:focus,.fld textarea:focus,.bank-pick:focus{outline:0;border-color:var(--amber-d);background:#fff;box-shadow:0 0 0 4px rgba(248,196,0,.25)}
.fld small{font-size:.78rem;color:var(--muted)}
.fld small.err{color:var(--err);font-weight:700}
.has-err input,.has-err select,.has-err textarea{border-color:var(--err)}
fieldset.has-err .opts{outline:2px solid var(--err);outline-offset:6px;border-radius:12px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.opt span{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--cream);font-weight:600;font-size:.85rem;box-shadow:inset 0 0 0 1.5px transparent;transition:all .2s}
.opt input:checked+span{background:var(--amber);color:var(--cocoa)}
.opt input:focus-visible+span{box-shadow:0 0 0 3px var(--cocoa)}
.opt:hover span{box-shadow:inset 0 0 0 1.5px var(--amber-d)}
.chk{display:flex;gap:12px;align-items:flex-start;font-weight:500!important;font-size:.88rem!important;line-height:1.5;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--amber-d);margin-top:2px;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.req-note{font-size:.78rem;color:var(--muted);margin:18px 0}
.f-errors{background:#fdecea;border-radius:var(--r-md);padding:16px 20px;margin-bottom:24px;color:#5f1511}
.f-errors ul{list-style:disc;padding-left:1.2em}
.f-errors a{text-decoration:underline}
.f-plan[hidden]{display:none}
.faside{background:var(--cocoa);color:#fff;border-radius:var(--r-xl);padding:34px;position:sticky;top:110px}
.faside h3{font-size:1.2rem}
.faside p{color:var(--on-dark);font-size:.92rem}
.mini-contact{display:grid;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.mini-contact li{display:flex;gap:12px;align-items:center;font-size:.9rem;font-weight:600}
.mini-contact svg{width:16px;height:16px;color:var(--amber);flex:none}
.mini-contact a:hover{color:var(--amber)}

/* Donate page */
.fundcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border:0;margin:0;padding:0}
.fcard{position:relative;cursor:pointer;display:block}
.fcard input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fc-in{display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:var(--r-xl);padding:26px;height:100%;box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .25s,transform .35s var(--ease)}
.fc-in b{font-size:1.05rem}
.fc-in span:last-child{color:var(--muted);font-size:.9rem}
.fcard .tick{background:var(--cream);color:transparent;transition:all .25s}
.fcard input:checked+.fc-in{box-shadow:inset 0 0 0 3px var(--amber-d);transform:translateY(-4px)}
.fcard input:checked+.fc-in .tick{background:var(--amber);color:var(--cocoa)}
.fcard input:focus-visible+.fc-in{outline:3px solid var(--cocoa);outline-offset:3px}
.fcard:hover .fc-in{transform:translateY(-4px)}
.bankgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.bankgrid .donate h3{text-align:left;font-size:1.25rem}
.bankgrid .donate small{text-align:left}
.apps,.manual{background:#fff;border-radius:var(--r-xl);padding:30px;margin-bottom:22px;box-shadow:0 18px 40px -34px rgba(31,26,23,.55)}
.apps h3,.manual h3{font-size:1.15rem}
.apps p{color:var(--muted);font-size:.9rem}
.apps-row{display:flex;gap:10px;flex-wrap:wrap}
.apps-row select{flex:1 1 220px}
.bank-go[aria-disabled=true]{opacity:.5;pointer-events:none}
.manual ol{counter-reset:s;display:grid;gap:12px}
.manual li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:12px;font-size:.92rem;line-height:1.55}
.manual li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--cream);color:var(--amber-ink);font:700 .9rem/32px var(--font-hero);text-align:center}

/* Contact */
.cinfo{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cinfo li{background:#fff;border-radius:var(--r-xl);padding:24px 20px;display:flex;flex-direction:column;gap:6px;box-shadow:0 18px 40px -34px rgba(31,26,23,.55);word-break:break-word}
.cinfo .ci{width:44px;height:44px;border-radius:50%;background:var(--amber);color:var(--cocoa);display:grid;place-items:center;margin-bottom:8px}
.cinfo .ci svg{width:18px;height:18px}
.cinfo .cl{font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.cinfo a,.cinfo b{font-weight:700;font-size:.95rem}
.cinfo a{text-decoration:underline;text-decoration-color:var(--amber-d);text-underline-offset:3px}
.follow{text-align:center;margin-top:40px}
.follow h3{font-size:1rem}
.follow .social{justify-content:center}
.map{margin-top:40px;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/6;background:#fff}
.map iframe{width:100%;height:100%;border:0}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start}
.faq-nav{position:sticky;top:110px}
.faq-nav ul{display:grid;gap:6px}
.faq-nav a{display:flex;justify-content:space-between;padding:12px 16px;border-radius:14px;font-weight:700;font-size:.88rem;background:#fff;transition:background .2s}
.faq-nav a:hover,.faq-nav a.on{background:var(--amber)}
.faq-nav a span{color:var(--muted);font-weight:600}
.faq-group{margin-bottom:46px}
.faq-group h2{font-size:1.4rem;margin-bottom:16px}
.qa{background:#fff;border-radius:var(--r-lg);margin-bottom:12px;box-shadow:0 14px 30px -30px rgba(31,26,23,.6)}
.qa summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 24px;cursor:pointer;font-weight:700;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{width:32px;height:32px;border-radius:50%;background:var(--cream);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease),background .3s}
.qa summary i svg{width:14px;height:14px}
.qa[open] summary i{transform:rotate(45deg);background:var(--amber)}
.qa .ans{padding:0 24px 20px;color:var(--muted)}
.qa .ans a{text-decoration:underline;text-decoration-color:var(--amber-d);text-underline-offset:3px;color:var(--cocoa);font-weight:600}
.qa .ans p:last-child{margin:0}

/* Legal */
.legal-grid{display:grid;grid-template-columns:260px 1fr;gap:60px;align-items:start}
.legal-grid.no-toc{grid-template-columns:1fr;max-width:820px}
.toc{position:sticky;top:110px;background:#fff;border-radius:var(--r-xl);padding:24px}
.toc ol{display:grid;gap:4px}
.toc a{display:block;padding:7px 10px;border-radius:10px;font-size:.85rem;font-weight:600;color:var(--muted)}
.toc a:hover,.toc a.on{background:var(--cream);color:var(--cocoa)}
.legal-body{background:#fff;border-radius:var(--r-xl);padding:44px 48px;max-width:none}
.legal-body .updated{display:inline-block;background:var(--cream);padding:8px 14px;border-radius:999px;font-size:.85rem}
.legal-body h2:first-of-type{margin-top:.8em}

/* Documents */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;max-width:900px;margin-inline:auto}
.docs li{display:flex;align-items:center;gap:16px;background:#fff;border-radius:var(--r-xl);padding:20px 22px;box-shadow:0 18px 40px -34px rgba(31,26,23,.55);flex-wrap:wrap}
.bg-paper .docs li{box-shadow:inset 0 0 0 1px var(--line)}
.docs .di{width:48px;height:48px;border-radius:14px;background:var(--peach);color:var(--amber-ink);display:grid;place-items:center;flex:none}
.docs .di svg{width:22px;height:22px}
.docs b{flex:1;min-width:140px}
.docs .btn{padding:11px 18px;font-size:.78rem}

/* Thank-you / 404 */
.thanks{min-height:58vh;display:flex;align-items:center}
.thanks .wrap{width:min(820px,100% - 48px)}
.thanks-card{background:#fff;border-radius:var(--r-xl);padding:64px 44px;text-align:center;box-shadow:0 30px 60px -44px rgba(31,26,23,.6)}
.big-ic{width:84px;height:84px;border-radius:50%;background:var(--amber);color:var(--cocoa);display:grid;place-items:center;margin:0 auto 26px}
.big-ic svg{width:36px;height:36px}
.thanks-card .h2{max-width:22ch;margin-inline:auto}
.thanks-card .lede{margin-inline:auto}

/* CTA + footer */
.cta{background:var(--cocoa);color:#fff;padding:60px 0;overflow:hidden}
.cta .wrap{display:grid;grid-template-columns:1fr 1.1fr auto;gap:40px;align-items:center}
.cta h2{font-family:var(--font-hero);font-weight:600;font-size:clamp(1.7rem,3vw,2.4rem);margin:0}
.cta p{margin:0;color:var(--on-dark);border-left:2px dashed rgba(248,196,0,.5);padding-left:30px}
.footer{background:var(--cream);padding:70px 0 0}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px}
.footer img{height:54px;width:auto;margin-bottom:14px}
.footer .logo{margin-bottom:14px}.footer .logo img{margin:0}
.footer .fh{font-size:1rem;margin-bottom:16px}
.flinks li{margin-bottom:8px;font-size:.88rem}
.footer a:hover{color:var(--amber-ink);text-decoration:underline}
.footer p{font-size:.88rem;color:var(--muted)}
.social{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.social a{width:40px;height:40px;border-radius:50%;background:var(--cocoa);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700;transition:transform .3s var(--ease),background .2s}
.social a:hover{background:var(--amber);color:var(--cocoa);transform:translateY(-4px);text-decoration:none}
.social-lg a{width:48px;height:48px;font-size:.8rem}
.footer .legal{border-top:1px solid var(--line);margin-top:50px;padding:20px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.footer .legal ul{display:flex;gap:18px;flex-wrap:wrap}


.cookie{position:fixed;left:20px;bottom:20px;z-index:96;max-width:400px;background:#fff;border-radius:var(--r-lg);padding:20px 22px;box-shadow:0 30px 60px -20px rgba(31,26,23,.5);font-size:.82rem;line-height:1.55;animation:rise .6s var(--ease)}
.cookie .row{gap:8px;margin-top:12px}
.cookie .btn{padding:10px 16px;font-size:.75rem}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}

/* ------------------------------------------------------------------ Hexagons everywhere */
/* Icon badges, numbers, avatars and dots become rounded hexagons (height follows width) */
.ccard .tick,.fcard .tick,.step .ic,.cinfo .ci,.docs .di,.big-ic,.person .ph img,.person .mono,.sdgs .sq,.pl-logo span,.qa summary i,.ps-card .b,.checks .b,.legend i,.manual li::before,.timeline li::before,.person summary::after{aspect-ratio:100/112.7;height:auto!important;border-radius:0!important;-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat;box-shadow:none}
.sdgs .sq,.manual li::before{display:grid;place-items:center;line-height:1}
.timeline li::before{width:18px;left:-32px}
.legend i{width:12px}
.person .ph img,.person .mono{width:120px}
/* Badge fills: gradients with a soft top light, never flat */
.step .ic,.ccard .tick,.cinfo .ci,.big-ic,.sol .b,.checks .b,.timeline li::before,.person summary::after,.fcard input:checked+.fc-in .tick,.qa[open] summary i{background:var(--g-amber);color:var(--cocoa)}
.person .mono,.docs .di,.pl-logo span{background:var(--g-cocoa);color:var(--amber)}
.manual li::before,.qa summary i,.fcard .tick{background:var(--g-soft);box-shadow:none}
.prob .b{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
.step .ic{font-family:var(--font-head);font-weight:600}
.qa[open] summary i{transform:rotate(60deg)}
/* Small labels: hexagon-ended */
.tag,.chips li,.opt span,.marq li,.legal-body .updated,.funds button,.chips-f button,.lang-t button,.copy{border-radius:0!important;-webkit-mask:var(--bar-mask-s);mask:var(--bar-mask-s);padding-left:18px;padding-right:18px}
.copy{padding-left:12px;padding-right:12px}
.chips li,.funds button,.chips-f button,.lang-t button,.opt span{box-shadow:none!important;background-color:rgba(31,26,23,.06)}
.chips li{background:var(--g-glass)}
.funds button[aria-checked=true],.opt input:checked+span,.chips li:hover,.faq-nav a.on,.faq-nav a:hover,.lang-t.dark button[aria-pressed=true],.copy:hover,.copy.ok{background:var(--g-amber)!important;color:var(--cocoa)}
.chips-f button[aria-pressed=true],.lang-t button[aria-pressed=true]{background:var(--g-cocoa)!important;color:#fff}
.cta,.story,.ripple,.bg-dark,.phero{background:radial-gradient(120% 140% at 85% 0%,#3a302a 0%,#1f1a17 55%,#17120f 100%)}
.funds button:focus-visible,.chips-f button:focus-visible,.lang-t button:focus-visible,.copy:focus-visible,.opt input:focus-visible+span{outline:0;background:var(--cocoa)!important;color:#fff!important}
/* Social links: hexagon on ::before so the focus ring shows */
.social a{position:relative;isolation:isolate;background:none!important;border-radius:0;width:40px;height:46px;color:#fff}
.social a::before,.social a::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--g-cocoa);-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat}
.social a::after{background:var(--g-amber);opacity:0;transition:opacity var(--t-mid) var(--ease)}
.social a{transition:transform var(--t-mid) var(--ease),color var(--t-fast)}
.social a:hover{color:var(--cocoa);transform:translateY(-3px)}
.social a:hover::after{opacity:1}
.social-lg a{width:48px;height:55px}
/* Cards: one calm hover; a hexagon mark settles into the corner */
.ccard,.card,.ev,.scard,.plist li,.person,.pcard{transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)}
/* Surfaces: a hairline plus a soft two-layer shadow reads as crafted rather than flat */
.ccard,.card,.ev,.scard,.plist li,.person,.pcard,.step,.cinfo li,.docs li,.qa,.apps,.manual,.donate,.fcard-wrap,.gift,.timeline li,.upcoming li,.close-card,.thanks-card,.legal-body,.toc,.sdgs li{box-shadow:0 0 0 1px rgba(31,26,23,.06),var(--shadow-1)!important}
.ccard:hover,.card:hover,.ev:hover,.scard:hover,.plist li:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(31,26,23,.06),var(--shadow-2)!important}
.bg-dark .ccard,.st-statement .ccard{box-shadow:0 0 0 1px rgba(255,255,255,.06)!important;background:var(--g-cocoa)}
.ps-card.prob,.mission,.faside,.facts,.upcoming .date{background:var(--g-cocoa)}
.ps-card.sol{box-shadow:0 0 0 1px rgba(31,26,23,.06),var(--shadow-2)}
.tag{background:var(--g-amber)}
.card .im img,.pcard .im img,.ev .im img,.st-link .ccard .im img,.scard .im img{transition:transform 1.4s var(--ease)}
.card:hover .im img,.pcard:hover .im img,.ev:hover .im img,.st-link .ccard:hover .im img{transform:scale(1.04)}
.step:hover{transform:translateX(4px)}
.big-ic{animation:pop .9s var(--ease) both}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.photo .scrib,.closing .scrib{animation:none}
.photo>img,.ft-pic img{-webkit-mask:var(--wide-mask);mask:var(--wide-mask);border-radius:0}
.ft-pic::before{display:none}
/* Mobile menu backdrop */
@media(max-width:1100px){.primary-nav.open{box-shadow:0 0 0 100vmax rgba(31,26,23,.45)}}

/* ------------------------------------------------------------------ Give online (WooCommerce) */
.gift{max-width:860px;margin-inline:auto;background:#fff;border-radius:var(--r-xl);padding:40px 44px;box-shadow:0 30px 60px -44px rgba(31,26,23,.6);display:grid;gap:26px}
.gift-row{gap:0}
.gift .opts{gap:10px}
.gift .opt span{padding:12px 22px;font-size:.9rem;transition:background var(--t-fast),color var(--t-fast)}
.gift .amounts .opt span{min-width:118px;text-align:center}
.gift-own{display:grid;gap:7px;max-width:320px;margin-top:14px;max-height:0;overflow:hidden;opacity:0;transition:max-height var(--t-mid) var(--ease),opacity var(--t-fast)}
.gift.is-own .gift-own,html:not(.js) .gift-own{max-height:120px;opacity:1}
.gift-own label{font-weight:700;font-size:.85rem}
.gift-own input{font:600 1.1rem var(--font-head);background:var(--cream);border:1.5px solid transparent;border-radius:14px;padding:13px 16px}
.gift-own input:focus{outline:0;border-color:var(--amber-d);background:#fff;box-shadow:0 0 0 4px rgba(248,196,0,.25)}
.gift-go{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-top:6px;border-top:1px solid var(--line)}
.gift-go .btn{padding-block:17px}
.gift-methods{margin:0;font-size:.8rem;color:var(--muted);font-weight:600}
/* WooCommerce pages in the theme's look */
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce #place_order{background:var(--amber)!important;color:var(--cocoa)!important;font:700 .9rem var(--font-head)!important;border:0!important;border-radius:0!important;-webkit-mask:var(--bar-mask);mask:var(--bar-mask);padding:16px 30px!important;transition:background var(--t-fast)}
.woocommerce .button:hover,.woocommerce #place_order:hover{background:var(--amber-d)!important}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.select2-container .select2-selection--single{font:500 .95rem var(--font-head);background:var(--cream);border:1.5px solid transparent;border-radius:14px;padding:12px 15px;min-height:48px}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{outline:0;border-color:var(--amber-d);background:#fff;box-shadow:0 0 0 4px rgba(248,196,0,.25)}
.woocommerce-checkout #payment{background:var(--paper)!important;border-radius:var(--r-xl)!important;padding:8px}
.woocommerce-checkout #payment ul.payment_methods li{padding:14px 12px;border-bottom:1px solid var(--line)}
.woocommerce-checkout #payment div.payment_box{background:#fff!important;border-radius:var(--r-md)}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce table.shop_table{border-radius:var(--r-lg);border-color:var(--line);background:#fff}
.woocommerce-info,.woocommerce-message{border-top-color:var(--amber)!important;background:#fff!important}
.pay-acc{background:var(--cream);border-radius:var(--r-md);padding:4px 16px;margin:12px 0}
.pay-acc div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.pay-acc div:last-child{border:0}
.pay-acc dt{color:var(--muted)}.pay-acc dd{margin:0;font-weight:700;display:flex;gap:8px;align-items:center;word-break:break-all}

/* ------------------------------------------------------------------ Latest from Facebook & Instagram */
.sf-grid{display:grid;grid-template-columns:minmax(0,500px) 1fr;gap:28px;align-items:start}
.sf-grid.one{grid-template-columns:1fr;max-width:1100px;margin-inline:auto}
.sf-grid.one .sf-fb{max-width:500px;margin-inline:auto;width:100%}
.sf-fb{background:#fff;border-radius:var(--r-xl);padding:10px;box-shadow:0 0 0 1px rgba(31,26,23,.06),var(--shadow-1)}
.sf-fb iframe{display:block;width:100%;max-width:500px;height:680px;border:0;border-radius:calc(var(--r-xl) - 8px);margin-inline:auto}
.sf-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.sf-item{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 0 0 1px rgba(31,26,23,.06),var(--shadow-1);display:flex;justify-content:center}
.sf-item .instagram-media{margin:0!important;min-width:0!important;width:100%!important;border:0!important;box-shadow:none!important}
.sf-item iframe{border:0;width:100%;display:block}
.sf-item .sf-post{height:560px}
.sf-item .sf-reel{height:600px;max-width:340px}
.sf-plugin{grid-column:1/-1}
.sf-follow{margin-top:34px}
.sf-follow .btn svg.si{width:16px;height:16px}
@media(max-width:960px){.sf-grid{grid-template-columns:1fr}.sf-fb{max-width:520px;margin-inline:auto;width:100%}}

/* ------------------------------------------------------------------ Form fields */
/* White fields with a clear outline on every background; amber ring on focus */
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld input[type=number],.fld input[type=date],.fld input[type=url],.fld select,.fld textarea,.bank-pick,.gift-own input,
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.select2-container .select2-selection--single{background:#fff!important;border:1.5px solid #d9cdb8!important;border-radius:12px!important;box-shadow:0 1px 2px rgba(31,26,23,.05);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.fld input:hover,.fld select:hover,.fld textarea:hover,.bank-pick:hover,.gift-own input:hover,.woocommerce form .form-row input.input-text:hover,.woocommerce form .form-row textarea:hover{border-color:#bfae92!important}
.fld input:focus,.fld select:focus,.fld textarea:focus,.bank-pick:focus,.gift-own input:focus,.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{outline:0;border-color:var(--amber-d)!important;box-shadow:0 0 0 4px rgba(248,196,0,.22)!important}
.fld input::placeholder,.fld textarea::placeholder,.gift-own input::placeholder{color:#9a8f83}
.has-err input,.has-err select,.has-err textarea{border-color:var(--err)!important}
/* Choice chips and tick boxes get an outline too */
.opt span{box-shadow:inset 0 0 0 1.5px #d9cdb8!important;background-color:#fff!important;-webkit-mask:none!important;mask:none!important;border-radius:10px!important}
.opt:hover span{box-shadow:inset 0 0 0 1.5px var(--amber-d)!important}
.opt input:checked+span{box-shadow:none!important}
.chk input{width:20px;height:20px;accent-color:var(--amber-d)}
.fc-in{box-shadow:inset 0 0 0 1.5px #d9cdb8!important;background:#fff}
.fcard input:checked+.fc-in{box-shadow:inset 0 0 0 2.5px var(--amber-d),var(--shadow-1)!important}

/* ------------------------------------------------------------------ Header, top bar, WhatsApp */
/* Nothing may widen the page sideways on phones (clip, unlike hidden, keeps the sticky header working) */
html,body{overflow-x:clip;max-width:100%}
.topbar{background:#17120f;color:#d6cdbf;font-size:.8rem;line-height:1.4}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:8px 0}
.tb-l,.tb-r{display:flex;align-items:center;gap:22px;min-width:0}
.topbar a,.topbar .tb-l>span,.topbar .tb-r>span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:color var(--t-fast)}
.topbar a:hover{color:var(--amber)}
.topbar svg{width:13px;height:13px;color:var(--amber);flex:none}
.tb-social{display:flex;gap:2px;padding-left:14px;border-left:1px solid rgba(255,255,255,.12)}
.tb-social a{width:30px;height:26px;justify-content:center;color:#d6cdbf}
.tb-social a:hover{color:var(--amber)}
.topbar .tb-social svg{width:15px;height:15px;color:currentColor}
.social a svg.si{width:17px;height:17px}
.social-lg a svg.si{width:20px;height:20px}
/* The frosted background sits on ::before: a backdrop-filter on the header itself would trap the mobile menu inside it */
.site-header{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
/* Glass header. Light frosted glass by default; over a dark hero it is tinted dark glass with white text,
   and cross-fades to the light glass once the hero has scrolled away. The two glass layers are ::before
   (light) and ::after (dark), so the change is a smooth opacity fade. */
.site-header::before,.site-header::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);transition:opacity .5s var(--ease-io),box-shadow .5s var(--ease-io)}
.site-header::before{background:linear-gradient(180deg,rgba(255,252,246,.86),rgba(250,245,236,.74));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(31,26,23,.07)}
.site-header::after{background:linear-gradient(180deg,rgba(14,11,9,.62),rgba(14,11,9,.28));box-shadow:inset 0 -1px 0 rgba(255,255,255,.1);opacity:0}
.site-header.is-stuck::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(31,26,23,.07),0 14px 34px -24px rgba(31,26,23,.45)}
.site-header.is-over::after{opacity:1}
.site-header.is-over::before{opacity:0}
/* Float over the hero: the header keeps its place in the flow but the page slides up underneath it */
.has-hero .site-header{margin-bottom:calc(-1 * var(--hh,80px))}
.has-hero .hero-full{height:clamp(560px,calc(100svh - var(--tb,40px)),1000px)}
.admin-bar.has-hero .hero-full{height:clamp(560px,calc(100svh - var(--tb,40px) - 32px),1000px)}
.has-hero .slide-wrap{padding-top:calc(var(--hh,80px) + 28px)}
.has-hero .phero{padding-top:calc(var(--hh,80px) + 56px)}
@media(min-width:1101px){
  .site-header.is-over .menu>li>a{color:rgba(255,255,255,.9)}
  .site-header.is-over .menu>li>a:hover,.site-header.is-over .menu>li:focus-within>a,.site-header.is-over .menu>.current-menu-item>a,.site-header.is-over .menu>.current-menu-ancestor>a{color:var(--amber)}
  .menu a{transition:color .4s var(--ease-io)}
  .menu .sub a{color:#2b2420!important}
}
.site-header .bar{min-height:80px;padding:10px 0;gap:30px}
.menu{gap:2px}.menu>li>a{white-space:nowrap}
.menu a{padding:10px 14px;color:#2b2420}
.head-actions{display:flex;align-items:center;gap:12px;flex:none}
.head-donate{padding:12px 24px;font-size:.88rem}
.head-donate svg{width:15px;height:15px}
@media(max-width:1180px){.site-header .bar{gap:18px}.head-donate svg{display:none}}
@media(max-width:1100px){
  .tb-hide{display:none!important}
  .head-actions{margin-left:auto}
  .site-header .bar{min-height:68px}
  .primary-nav{padding:96px 24px 32px;background:var(--cream);border-left:1px solid var(--line)}
  .primary-nav .menu>li{border-bottom:1px solid var(--line)}
  .primary-nav .menu>li>a{font-size:1.02rem;padding:14px 6px}
  .primary-nav .menu>li>a::before{left:-24px;right:auto;top:10px;bottom:10px;width:3px;height:auto;transform:scaleY(0)}
  .primary-nav .nav-donate{margin-top:24px;padding-block:16px}
}
@media(max-width:620px){
  .tb-r{display:none}
  .topbar .wrap{justify-content:center}
  .tb-l{gap:18px}
  .brand .logo{height:40px!important;width:197px!important}
}
@media(max-width:380px){.brand .logo{height:34px!important;width:167px!important}.tb-l a:nth-child(2) span{display:none}}

/* WhatsApp: a green hexagon in the corner; the label slides out on hover or focus */
.wa{position:fixed;right:22px;bottom:22px;z-index:95;display:flex;flex-direction:row-reverse;align-items:center;color:#fff;filter:drop-shadow(0 10px 18px rgba(7,94,84,.35));animation:waIn .8s var(--ease) 1.2s both}
.wa-ic{position:relative;width:56px;aspect-ratio:100/112.7;display:grid;place-items:center;flex:none;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 55%),linear-gradient(135deg,#43e283 0%,#1fb157 60%,#12904b 100%);-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat;transition:transform var(--t-mid) var(--ease)}
.wa:hover .wa-ic{transform:scale(1.06)}
/* The label rises above the button (never sideways, where it would cover the hero arrows) */
.wa-tip{position:absolute;right:0;bottom:calc(100% + 10px);font:600 .84rem var(--font-head);background:#fff;color:#0b3d22;padding:9px 14px;border-radius:10px;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(31,26,23,.4);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
.wa-tip::after{content:"";position:absolute;right:22px;top:100%;border:6px solid transparent;border-top-color:#fff}
.wa:hover .wa-tip,.wa:focus-visible .wa-tip{opacity:1;transform:none}
.wa:focus-visible{outline:0}.wa:focus-visible .wa-ic{outline:3px solid var(--cocoa)}
.wa::after{content:"";position:absolute;right:0;top:50%;width:56px;aspect-ratio:100/112.7;background:#25d366;-webkit-mask:var(--hex-mask) center/100% 100% no-repeat;mask:var(--hex-mask) center/100% 100% no-repeat;z-index:-1;opacity:0;transform:translateY(-50%);animation:waRing 2.4s var(--ease) 2.4s 3}
@keyframes waIn{from{opacity:0;transform:translateY(16px) scale(.9)}}
@keyframes waRing{0%{opacity:.5;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-50%) scale(1.55)}}
@media(max-width:620px){.wa{right:14px;bottom:14px}.wa-ic,.wa::after{width:50px}.wa-tip{display:none}}

/* Edge-to-edge bars: the top bar, header and hero run the full screen width with an even side margin,
   so the logo sits at the far left and the hero text lines up under it. Page content keeps the centred column. */
:root{--edge:clamp(16px,2.4vw,40px)}
.topbar .wrap,.site-header .wrap,.hero-full .slide-wrap,.hero-full .hero-ctrl .wrap{width:auto;max-width:none;margin-inline:var(--edge)}
/* The logo's yellow ribbon starts at the very left edge of the screen */
.site-header .wrap{margin-left:0}
/* Hero text scales with the screen height as well as its width, and long text is capped, so a slide never overflows */
.hero-full .txt{max-width:min(660px,100%)}
.hero-full .h1{font-size:clamp(2.1rem,min(4.6vw,7.2vh),4.3rem)!important;margin-bottom:clamp(12px,2.2vh,22px)}
.hero-full .lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:520px!important}
.hero-full .pill{margin-bottom:clamp(12px,2vh,22px)}
.hero-full .hero-actions{margin-top:clamp(16px,3vh,28px)}
.slide-wrap{align-items:center}

/* Hero: tighter text column, clear of the corner button */
.hero-full .h1{font-size:clamp(2.6rem,5vw,4.4rem)}
.hero-full .lead{font-size:clamp(1.05rem,1.3vw,1.22rem);max-width:480px}
.slide-wrap{padding:56px 0 112px}
.hero-full .hero-ctrl .wrap{padding-right:78px}
@media(max-width:620px){.hero-full .hero-ctrl .wrap{padding-right:64px}.hero-full .arrows{display:none}.hero-dots{max-width:none}}

/* Scroll reveal (only once JS has started, so content is never hidden without it) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-io),transform 1.1s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
.js .reveal.in{opacity:1;transform:none}

/* Compact (burger) menu below 1100px: seven links, the logo and Donate do not fit on a laptop-width bar */
@media(max-width:1100px){
  .nav-toggle{display:block}
  .primary-nav{position:fixed;inset:0 0 0 auto;width:min(360px,88vw);background:var(--cream);padding:90px 22px 30px;margin:0;transform:translateX(105%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s;box-shadow:-30px 0 60px -30px rgba(0,0,0,.4);overflow:auto;z-index:80;flex-direction:column;align-items:stretch}
  .primary-nav.open{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
  .nav-toggle{position:relative;z-index:99}
  .nav-donate{display:inline-flex;justify-content:center;margin-top:18px}
  .menu{flex-direction:column;align-items:stretch}
  .menu a{font-size:.95rem;padding:12px 14px}
  .menu .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;padding:0 0 6px 14px;min-width:0}
  .menu-item-has-children>a::after{display:none}
}
@media(max-width:620px){.head-donate{display:none}}
/* Responsive */
@media(max-width:1180px){
  .menu a{padding:10px 9px;font-size:.8rem}
  .cinfo{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1060px){
  .pillars,.cards.cols-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .cta .wrap{grid-template-columns:1fr}.cta p{border:0;padding:0}
  .plist,.st-grid,.cards.cols-3,.fundcards{grid-template-columns:repeat(2,1fr)}
  .people{grid-template-columns:1fr}
  .art{grid-template-columns:1fr 280px;gap:40px}
}
@media(max-width:960px){
  .slide,.about,.ripple .grid,.how,.give,.phero.has-img .phero-grid,.tblock,.ps,.ms-grid,.oc,.al,.ft,.pcard,.bankgrid,.fgrid2,.faq-grid,.legal-grid,.art{grid-template-columns:1fr;gap:38px}
  .slide .pic,.phero .pic{order:-1;aspect-ratio:16/10}
  .about.flip .photo,.pcard.flip .im{order:0}
  .ft.flip .ft-pic{order:0}
  .pcard .bd,.pcard.flip .bd{padding:6px 14px 18px}
  .events,.pledges{grid-template-columns:1fr}

  .sec{padding:76px 0}
  .photo .scrib{display:none}
  .faq-nav,.toc,.facts,.faside{position:static}
  .faq-nav ul{display:flex;flex-wrap:wrap}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .admin-bar .site-header{top:46px}
}
@media(max-width:782px){.admin-bar .site-header{top:0}}
@media(max-width:620px){
  .wrap{width:min(var(--wrap),100% - 32px)}

  .pillars,.fgrid,.plist,.st-grid,.cards.cols-2,.cards.cols-3,.cards.cols-4,.fields,.cinfo{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:24px 18px}
  .stat{flex-direction:column;align-items:flex-start;gap:6px}
  .stat>span{max-width:none}
  .fundcards{grid-template-columns:1fr 1fr;gap:12px}
  .fc-in{padding:18px 16px}
  .fc-in span:last-child{font-size:.8rem}
  .fcard .tick{width:30px;height:30px;margin-bottom:8px}

  .hero{padding:44px 0 34px}
  .phero{padding:44px 0 52px}
  .donate,.fcard-wrap,.legal-body,.ps-card,.mission,.close-card,.thanks-card{padding:28px 22px!important}
  .person{grid-template-columns:1fr;padding:24px}

  .upcoming li{grid-template-columns:70px 1fr}
  .upcoming li .btn{grid-column:1/-1}
  .hero-ctrl{gap:10px}
  .btn{padding:14px 20px}
  .bank dd{flex-wrap:wrap}
  .cookie{left:12px;right:12px;bottom:84px;max-width:none}
}
/* Reduced motion means "no movement", not "nothing happens": things still fade, nothing slides, zooms or sweeps. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.slide .txt>*,.hero-full .slide.is-prev .txt>*{transform:none!important}
  .js .reveal{transition:opacity .8s var(--ease-io)}
  .hero-full .slide-media,.slide.is-on .slide-media,.slide.is-prev .slide-media{transform:none!important}
  .hero-full.is-calm .slide.enter,.hero-full .slide.enter{animation:fadeIn 1s var(--ease-io) both!important}
  .hero-full .slide.is-prev{animation:none!important}
  .rp-r{transform:none!important}
  .ccard:hover,.card:hover,.ev:hover,.scard:hover,.plist li:hover,.btn:hover,.step:hover,.social a:hover{transform:none!important}
  .card:hover .im img,.pcard:hover .im img,.ev:hover .im img,.st-link .ccard:hover .im img{transform:none}
  .marq{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:10px}
  .marq li[aria-hidden]{display:none}
  .marq-pause{display:none}
  .wa{animation:none}.wa::after{display:none}
}
.no-motion *,.no-motion *::before,.no-motion *::after{animation:none!important;transition:none!important}
.no-motion .reveal,.no-motion .slide .txt>*{opacity:1!important;transform:none!important}
.no-motion .phero .pic{opacity:1!important}
.no-motion .rp-r{opacity:1;transform:none}
.no-motion .marq{flex-wrap:wrap;justify-content:center;width:auto;gap:10px}
.no-motion .marq li[aria-hidden],.no-motion .marq-pause{display:none}
@media print{.topbar,.site-header,.cta,.wa,.cookie,.footer .social,.hero-ctrl{display:none!important}.phero,.hero,.bg-dark,.story{background:#fff!important;color:#000!important}.js .reveal{opacity:1;transform:none}}