/* ============================================================
   Small Efforts Trust — self-hosted Poppins.
   Google's <link> was dropped on the way into WordPress: it costs
   two extra connections and sends visitor IPs to a third party.
   Latin subset only, four weights, 31 KB for the set.
   ============================================================ */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/poppins-700.woff2") format("woff2")}

/* ============================================================
   SMALL EFFORTS TRUST — Design tokens
   Palette: hybrid — peacesanctuary.org's restraint + neutrals,
   with green as the single accent. Gold reserved for money actions.
   Every foreground/background pair verified WCAG AA.
   ============================================================ */
:root{
  /* Palette from akhuwat.org, restricted to green / white / black.
     akhuwat's own #009368 is only 3.91:1 on white — fine for the large
     stat numbers, not for text — so --green is a deeper, AA-safe tone. */
  --green:#007A56;        /* text, links, buttons   5.36:1 both ways */
  --green-bright:#009368; /* akhuwat green — LARGE display numbers only */
  --green-dk:#00683F;     /* dark bands, header     white 6.88:1     */
  --mint:#6FDBB0;         /* accent on dark imagery 10.56:1          */
  --ink:#000000;          /* pure black — all body copy   21:1       */
  --body:#000000;
  --muted:#3A3A3A;
  --line:#DDDDDD;
  --white:#FFFFFF;
  /* no tinted grounds — sections are white or dark green */
  --t0:#FFFFFF; --t1:#FFFFFF; --t2:#FFFFFF; --t3:#FFFFFF; --t4:#FFFFFF;
  --deep:#00683F; --accent:#007A56; --cream:#FFFFFF;
  --gold:var(--accent); --gold-dk:var(--accent); --bright:var(--green-bright);

  --ease-rise:cubic-bezier(.6,0,.47,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --dur:1.2s; --rise:100px;
  --r-pill:999px; --r-card:10px; --r-img:10px; --r-btn:5px;

  /* 4px spacing scale — every margin/padding/gap should come from this */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* one vertical rhythm for every section */
  --section:clamp(72px,7.5vw,112px);
  /* optical tracking: large type needs negative, small caps need positive */
  --tr-xl:-.022em;   /* 40px+  */
  --tr-lg:-.018em;   /* 28-39  */
  --tr-md:-.012em;   /* 20-27  */
  --tr-cap:.12em;    /* uppercase labels */
  --wrap:1600px; --content:1300px; --text:680px; --gut:30px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0;background:var(--t0);color:var(--body);
  font:400 19px/1.65 "Poppins",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:"Poppins",system-ui,sans-serif;color:var(--ink);margin:0;font-weight:600;
  letter-spacing:normal}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.content{max-width:var(--content);margin-inline:auto}
.measure{max-width:var(--text)}

/* ---------- typographic scale (reference: small, tracked, uppercase) ---------- */
.eyebrow{font:800 13px/1.6 "Poppins",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin:0 0 18px}
.eyebrow.on-dark{color:var(--mint)}
h2.sec{font-size:28px;line-height:1.25;letter-spacing:normal;font-weight:600}
h2.big{font-size:clamp(31px,3.5vw,48px);line-height:1.12;letter-spacing:normal;font-weight:700;}
h3.card{font-size:21px;line-height:1.3;letter-spacing:.01em}
.lede{font-size:21px;line-height:1.65;color:var(--body);font-weight:400}
.small{font-size:17.5px;line-height:1.7}
.tiny{font-size:15.5px;line-height:1.6;color:var(--muted)}
section{position:relative;padding:clamp(72px,9vw,132px) 0}
.sec-tint{background:#fff}
.sec-dark{background:var(--deep);color:#D2DFD7}
.sec-dark h2,.sec-dark h3{color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font:700 16px/1 "Poppins",system-ui,sans-serif;
  letter-spacing:normal;text-decoration:none;padding:16px 28px;border:1.5px solid transparent;
  border-radius:var(--r-btn);transition:background .25s var(--ease-out),color .25s var(--ease-out),
  border-color .25s var(--ease-out),transform .25s var(--ease-out);cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--accent);color:#fff}          /* primary — 5.07:1 ✓ */
.btn-gold:hover{background:#166F46}
.btn-green{background:var(--deep);color:#fff}
.btn-green:hover{background:var(--accent)}
.btn-ghost{border-color:#CFD8CE;color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost-dk{border-color:rgba(255,255,255,.32);color:#fff}
.btn-ghost-dk:hover{border-color:var(--mint);color:var(--mint)}
.arrow::after{content:"→";font-size:16px;line-height:1}

/* ---------- utility bar + header ---------- */
.util{background:var(--deep);color:#D2DFD7;font-size:13.5px;letter-spacing:.04em}
.util .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:space-between;padding-block:10px}
.util span{display:inline-flex;align-items:center;gap:8px}
.util .dot{width:5px;height:5px;border-radius:50%;background:var(--bright);flex:none}
.util a{color:var(--t4);text-decoration:none}
.util a:hover{color:var(--mint)}

header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:box-shadow .35s ease}
header.scrolled{box-shadow:0 1px 24px rgba(14,59,46,.09)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand .mark{width:42px;height:42px;border-radius:12px;background:var(--deep);display:grid;place-items:center;flex:none}
.brand .wm{font-family:"Poppins",system-ui,sans-serif;line-height:1.05}
.brand .wm b{display:block;font-size:19px;font-weight:500;color:var(--ink);letter-spacing:.01em}
.brand .wm i{display:block;font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.3em;color:var(--accent);margin-top:3px}
nav.main{display:flex;align-items:center;gap:30px}
nav.main a{font:500 14px/1 "Poppins",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:.25s}
nav.main a:hover{color:var(--accent);border-color:var(--accent)}
.hdr-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}

/* ---------- hero: copy + two vertical image rails ---------- */
.hero{--hero-pt:clamp(44px,5vw,76px);--hero-pb:clamp(52px,6vw,88px);
  background:linear-gradient(180deg,#fff 0%,var(--t1) 55%,var(--t2) 100%);
  padding:var(--hero-pt) 0 var(--hero-pb);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4.5vw,76px);
  align-items:center;max-width:var(--content);margin-inline:auto}
.badge{display:inline-flex;align-items:center;gap:10px;background:var(--t3);border:1px solid #CBDCD2;
  color:var(--deep);font:700 15px/1.4 "Poppins",system-ui,sans-serif;letter-spacing:normal;
  padding:10px 20px 10px 15px;border-radius:var(--r-pill);margin-bottom:28px}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--bright);flex:none}
.hero h1{font-size:clamp(37px,5vw,66px);line-height:1.06;font-weight:700;letter-spacing:normal;
  color:var(--ink);max-width:17ch}
.hero h1 em{display:block;font-style:normal;font-weight:600;color:var(--accent);}
.hero .sub{font-size:19.5px;line-height:1.68;color:var(--body);font-weight:450;max-width:50ch;margin:26px 0 34px}
.hero .sub b{color:var(--ink);font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-note{display:flex;gap:11px;align-items:flex-start;margin:26px 0 0;
  font-size:15px;line-height:1.62;color:var(--muted);max-width:48ch}
.hero-note svg{flex:none;margin-top:3px;color:var(--accent)}
.hero-note b{color:var(--ink);font-weight:600}

.rail{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:clamp(480px,76vh,780px)}
.rail .col{overflow:hidden;position:relative}
/* The track is taken OUT OF FLOW so its (very tall) content can't inflate the
   hero's grid row — the rail's height is then driven purely by min-height. */
.rail .track{position:absolute;top:0;left:0;right:0;
  animation:marquee 52s linear infinite;will-change:transform}
/* Columns are staggered by animation phase, not by a top margin, so both
   still sit flush against the header above and the section below. */
.rail .col.rev .track{animation-direction:reverse;animation-delay:-19s}

/* Desktop: the rail bleeds past the hero's own vertical padding so it touches
   the header above and the trust strip below. align-self:stretch makes the
   outer box equal the row height; the negative margins then cancel the padding,
   so the border box spans the full section. */
@media (min-width:901px){
  .rail{align-self:stretch;height:auto;min-height:clamp(560px,84vh,900px);
    margin-top:calc(var(--hero-pt) * -1);margin-bottom:calc(var(--hero-pb) * -1)}
}
.rail figure{margin:0 0 20px;border-radius:var(--r-img);overflow:hidden;background:var(--t3);position:relative}
.rail figure::after{content:"";position:absolute;inset:0;border-radius:var(--r-img);
  box-shadow:inset 0 0 0 1px rgba(20,26,23,.07)}
.rail img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
.rail:hover .track,.rail:focus-within .track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.rail .track{animation:none}}

/* ---------- trust strip ---------- */
.trust{background:var(--t3);border-bottom:1px solid var(--line);padding:0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.trust div{background:var(--t3);padding:26px 22px;text-align:center}
.trust b{display:block;font-family:"Poppins",system-ui,sans-serif;font-size:19px;color:var(--deep);letter-spacing:.03em;font-weight:500}
.trust em{display:block;font-style:normal;font-size:12.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-top:7px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15)}
.stats > div{background:var(--deep);padding:40px 26px}
.stats .n{font-family:"Poppins",system-ui,sans-serif;font-size:clamp(34px,4vw,52px);font-weight:300;color:#fff;line-height:1;letter-spacing:normal}
.stats .n small{font-size:.5em;color:var(--mint);margin-left:4px;font-weight:400}
.stats .l{font-size:13.5px;text-transform:uppercase;letter-spacing:.13em;color:#BDCFC3;margin-top:14px}
.stats .s{font-size:15.5px;color:#D2DFD7;margin-top:9px;line-height:1.6;font-weight:300}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);align-items:center}
.curtain{overflow:hidden;display:flex;align-items:flex-end;aspect-ratio:4/5;background:var(--t3);border-radius:var(--r-card)}
.curtain img{width:100%;height:100%;object-fit:cover;object-position:center}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.vm div{background:var(--cream);border-radius:var(--r-card);border-left:3px solid var(--accent);padding:26px 24px}
.vm h4{font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin-bottom:12px;font-weight:500}
.vm p{margin:0;font-size:17.5px;line-height:1.7;color:var(--ink);font-weight:300;font-style:italic}

/* ---------- programmes ---------- */
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.prog article{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:30px 26px 26px;display:flex;flex-direction:column;
  transition:border-color .35s var(--ease-out),transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.prog article:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 14px 40px rgba(14,59,46,.08)}
.prog .ico{width:46px;height:46px;border-radius:13px;background:var(--t3);display:grid;place-items:center;margin-bottom:20px;color:var(--accent)}
.prog h3{margin-bottom:11px}
.prog p{font-size:17px;line-height:1.7;margin:0 0 20px;color:var(--body)}
.prog .amt{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-family:"Poppins",system-ui,sans-serif;font-size:21px;color:var(--deep);letter-spacing:.01em}
.prog .amt em{display:block;font-style:normal;font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-top:5px;font-family:"Poppins",system-ui,sans-serif}
.prog article.feature{grid-column:span 2;background:var(--deep);border-color:var(--deep)}
.prog article.feature h3,.prog article.feature .amt{color:#fff}
.prog article.feature p{color:#D2DFD7}
.prog article.feature .ico{background:rgba(255,255,255,.12);color:var(--mint)}
.prog article.feature .amt{border-top-color:rgba(255,255,255,.2)}
.prog article.feature .amt em{color:#BDCFC3}
.prog article.feature:hover{transform:translateY(-4px);border-color:var(--bright)}

/* ---------- expenditure chart ---------- */
.chart{display:grid;gap:15px;margin-top:8px}
.row{display:grid;grid-template-columns:210px 1fr 118px;gap:20px;align-items:center}
.row .nm{font-size:16px;color:var(--ink)}
.row .track{height:26px;background:var(--t3);border-radius:var(--r-pill);position:relative;overflow:hidden}
.row .bar{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);border-radius:var(--r-pill);transition:width 1.5s var(--ease-rise)}
.row.admin .bar{background:var(--muted)}
.row .val{font-family:"Poppins",system-ui,sans-serif;font-size:17.5px;color:var(--deep);text-align:right;letter-spacing:.01em}
.ratio{display:grid;grid-template-columns:96fr 4fr;gap:3px;margin-bottom:34px}
.ratio div{padding:20px 22px;border-radius:12px}
.ratio .p{background:var(--deep);color:#fff}
.ratio .a{background:var(--t4);color:var(--deep)}
.ratio b{display:block;font-family:"Poppins",system-ui,sans-serif;font-size:27px;font-weight:300;line-height:1}
.ratio em{display:block;font-style:normal;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-top:8px;opacity:.82}

/* ---------- projects ---------- */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);display:flex;flex-direction:column;overflow:hidden}
.pcard .curtain{aspect-ratio:16/11}
.pcard .body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1}
.pcard .tag{display:inline-flex;align-self:flex-start;font:800 11.5px/1 "Poppins",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);background:var(--t3);border-radius:var(--r-pill);padding:8px 13px;margin-bottom:16px}
.pcard h3{margin-bottom:10px}
.pcard p{font-size:17px;line-height:1.7;margin:0 0 20px}
.pcard .meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:22px}
.pcard .meta div b{display:block;font-family:"Poppins",system-ui,sans-serif;font-size:19px;color:var(--deep);font-weight:400}
.pcard .meta div em{font-style:normal;font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}

/* ---------- reports ---------- */
.reports{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rep{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px;text-decoration:none;display:block;
  transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}
.rep:hover{border-color:var(--accent);transform:translateY(-3px)}
.rep .yr{font-family:"Poppins",system-ui,sans-serif;font-size:30px;color:var(--deep);font-weight:300;line-height:1}
.rep .ty{font-size:15px;color:var(--body);margin-top:11px}
.rep .dl{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:var(--accent);margin-top:18px;display:flex;align-items:center;gap:7px}

/* ---------- footer ---------- */
footer{background:var(--deep);color:#C6D7CB;padding:clamp(64px,7vw,96px) 0 0}
footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:22px;font-weight:500}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(30px,4vw,60px)}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fgrid a{color:#C6D7CB;text-decoration:none;font-size:16px;transition:color .25s}
.fgrid a:hover{color:var(--mint)}
.fgrid p{font-size:16px;line-height:1.8;margin:0 0 16px}
.fbrand .wm b{color:#fff;font-size:20px}
.fbrand .wm i{color:var(--mint)}
.fbrand .mark{background:rgba(255,255,255,.1)}
.fbot{margin-top:clamp(46px,5vw,70px);border-top:1px solid rgba(255,255,255,.14);padding:26px 0;
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:14.5px}
.fbot a{color:#C6D7CB;text-decoration:none}.fbot a:hover{color:var(--mint)}

/* ---------- scroll reveal — visible by DEFAULT; JS opts in ---------- */
/* This is the fix for the reference site's blank-page failure mode.      */
.is-armed .reveal{opacity:0;transform:translate3d(0,var(--rise),0);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.is-armed .reveal.in{opacity:1;transform:none}
.is-armed .reveal.d1{transition-delay:.12s}
.is-armed .reveal.d2{transition-delay:.24s}
.is-armed .reveal.d3{transition-delay:.36s}
.is-armed .reveal.d4{transition-delay:.48s}
/* the signature curtain: image height 25% → 100%, bottom-anchored */
.is-armed .curtain img{height:25%;transition:height 1.6s var(--ease-rise)}
.is-armed .curtain.in img{height:100%}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .is-armed .reveal,.is-armed .curtain img{opacity:1!important;transform:none!important;height:100%!important;transition:none!important}
  .row .bar{transition:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .prog{grid-template-columns:repeat(2,1fr)} .prog article.feature{grid-column:span 2}
  .reports{grid-template-columns:repeat(2,1fr)}
  .projects{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  nav.main{display:none} .burger{display:block}
  .split{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .rail{height:420px;gap:14px}
  .rail figure{margin-bottom:14px;border-radius:15px}
  .fgrid{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr;gap:7px} .row .val{text-align:left}
  .curtain{aspect-ratio:3/2}
}
@media (max-width:600px){
  .brand .wm b{font-size:17px;white-space:nowrap}
  .brand .mark{width:36px;height:36px}
  .hdr-cta .btn{padding:14px 18px;font-size:12px;letter-spacing:.08em}
  header .wrap{gap:10px;padding-block:12px}
  .util .wrap{justify-content:flex-start;row-gap:4px}
  .hero h1{font-size:clamp(31px,8.4vw,42px)}
  .hero .sub{font-size:17.5px;line-height:1.68}
  .rail{height:340px}
}
@media (max-width:767px){
  /* the reference disables all motion on mobile — correct call, kept */
  .is-armed .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .is-armed .curtain img{height:100%!important;transition:none!important}
  :root{--gut:20px}
  .stats{grid-template-columns:1fr} .prog{grid-template-columns:1fr}
  .prog article.feature{grid-column:span 1}
  .reports{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr}
  .vm{grid-template-columns:1fr}
  .ratio{grid-template-columns:1fr}
}
.curtain{position:relative}
.curtain::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px rgba(26,26,20,.07)}
.drawer{position:fixed;inset:0;z-index:80;background:var(--deep);display:flex;flex-direction:column;
  padding:26px var(--gut) 40px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-out),visibility .32s}
.drawer.open{opacity:1;visibility:visible;transform:none}
.drawer .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:44px}
.drawer .close{background:none;border:0;color:#fff;font-size:30px;line-height:1;padding:8px 12px;cursor:pointer}
.drawer nav{display:grid;gap:4px}
.drawer nav a{font-family:"Poppins",system-ui,sans-serif;font-size:30px;font-weight:300;color:#fff;
  text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.drawer nav a:hover,.drawer nav a:focus-visible{color:var(--mint)}
.drawer .btn{margin-top:36px;justify-content:center}
.drawer .contact{margin-top:auto;padding-top:30px;font-size:14px;color:#BDCFC3;line-height:1.8}
.drawer .contact a{color:#BDCFC3;text-decoration:none}
body.locked{overflow:hidden}
@media (min-width:901px){.drawer{display:none}}
.cl{display:inline-block}   /* heading clause: breaks only at clause boundaries */
h3.card{text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.note{background:#FFF8E7;border:1px solid #E8D9B0;color:#5A4519;padding:12px 20px;font-size:13.5px;text-align:center;letter-spacing:.02em}

/* ============================================================
   INNER PAGES — project detail, projects hub, about, contact
   ============================================================ */

/* ---------- page banner ---------- */
.page-hero{position:relative;background:var(--deep);overflow:hidden}
.page-hero .bg{position:absolute;inset:0}
.page-hero .bg img{width:100%;height:100%;object-fit:cover}
.page-hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,46,30,.94) 0%,rgba(10,46,30,.82) 44%,rgba(10,46,30,.55) 100%),
             linear-gradient(180deg,rgba(10,46,30,.5) 0%,rgba(10,46,30,.45) 50%,rgba(10,46,30,.88) 100%)}
.page-hero .wrap{position:relative;z-index:2;padding-block:clamp(56px,7vw,104px)}
.page-hero h1{color:#fff;font-size:clamp(32px,4.4vw,58px);line-height:1.08;font-weight:700;
  letter-spacing:normal;max-width:19ch}
.page-hero .lead{color:#DCE8E0;font-size:19.5px;line-height:1.66;max-width:62ch;margin:22px 0 0;font-weight:450}
.crumb{display:flex;gap:10px;align-items:center;font-size:14px;color:#A7C3B2;margin-bottom:20px;flex-wrap:wrap}
.crumb a{color:#A7C3B2;text-decoration:none}.crumb a:hover{color:var(--mint)}
.crumb span{opacity:.55}
.chip{display:inline-flex;font:800 11.5px/1 "Poppins",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.1em;color:var(--deep);background:var(--mint);border-radius:var(--r-pill);padding:9px 14px}

/* ---------- prose ---------- */
.prose{max-width:var(--text)}
.prose p{margin:0 0 22px;font-size:19px;line-height:1.75;color:var(--body)}
.prose h2{font-size:29px;line-height:1.2;letter-spacing:normal;margin:44px 0 18px;font-weight:600}
.prose h2:first-child{margin-top:0}
.prose ul{margin:0 0 24px;padding-left:0;list-style:none;display:grid;gap:13px}
.prose li{position:relative;padding-left:30px;font-size:18.5px;line-height:1.65;color:var(--body)}
.prose li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.prose strong{color:var(--ink);font-weight:700}

/* ---------- project stats ---------- */
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin:0}
.pstats div{background:#fff;padding:28px 24px}
.pstats b{display:block;font-family:"Poppins",system-ui,sans-serif;font-size:clamp(26px,2.6vw,34px);
  font-weight:600;color:var(--deep);line-height:1.05;letter-spacing:normal}
.pstats em{display:block;font-style:normal;font:800 11.5px/1.5 "Poppins",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:12px}

/* ---------- donate band ---------- */
.give{background:var(--deep);border-radius:var(--r-card);padding:clamp(34px,4vw,54px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:center}
.give h2{color:#fff;font-size:clamp(26px,2.7vw,36px);line-height:1.14;letter-spacing:normal;font-weight:700}
.give p{color:#C4D6CB;font-size:17px;line-height:1.66;margin:16px 0 0}
.give .amounts{display:grid;gap:12px}
.give .amt{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);border-radius:14px;
  padding:17px 22px;color:#fff;text-align:left;cursor:pointer;font-family:inherit;
  transition:border-color .22s var(--ease-out),background .22s var(--ease-out)}
.give .amt:hover,.give .amt.on{border-color:var(--mint);background:rgba(167,232,198,.14)}
.give .amt b{font-family:"Poppins",system-ui,sans-serif;font-size:21px;font-weight:600;white-space:nowrap}
.give .amt span{font-size:14.5px;color:#BCD0C3;line-height:1.45}
.give .btn{width:100%;justify-content:center;margin-top:6px}
.give .fine{font-size:13.5px;color:#9DB6A7;margin-top:14px;line-height:1.55}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery figure{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--t3);
  position:relative;aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease-out)}
.gallery figure:hover img{transform:scale(1.035)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 15px;color:#fff;
  font-size:14px;line-height:1.45;background:linear-gradient(180deg,transparent,rgba(10,46,30,.85))}

/* ---------- FAQ (native details — no JS) ---------- */
.faq{max-width:900px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:"Poppins",system-ui,sans-serif;font-size:20px;font-weight:600;color:var(--ink);
  letter-spacing:normal;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:32px;width:12px;height:12px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .28s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--accent)}
.faq .ans{padding:0 40px 26px 0}
.faq .ans p{margin:0 0 14px;font-size:17px;line-height:1.72;color:var(--body)}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- projects hub ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:38px}
.filters button{font:700 14px/1 "Poppins",system-ui,sans-serif;padding:11px 19px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.filters button:hover{border-color:var(--accent);color:var(--accent)}
.filters button.on{background:var(--deep);border-color:var(--deep);color:#fff}
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.plist article{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.plist article:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 16px 44px rgba(10,46,30,.09)}
.plist .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--t3)}
.plist .thumb img{width:100%;height:100%;object-fit:cover}
.plist .body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1}
.plist h3{font-size:21px;line-height:1.28;margin:14px 0 10px}
.plist p{font-size:17px;line-height:1.66;margin:0 0 22px;color:var(--body)}
.plist .foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.plist .foot b{font-family:"Poppins",system-ui,sans-serif;font-size:19px;color:var(--deep);font-weight:600}
.plist .foot span{font:800 11.5px/1 "Poppins",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent)}

/* ---------- related ---------- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related a{display:block;padding:26px 24px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);text-decoration:none;transition:border-color .25s,transform .25s}
.related a:hover{border-color:var(--accent);transform:translateY(-3px)}
.related em{display:block;font-style:normal;font:800 11.5px/1 "Poppins",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:12px}
.related b{display:block;font-family:"Poppins",system-ui,sans-serif;font-size:20px;font-weight:600;
  color:var(--ink);line-height:1.3;letter-spacing:normal}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,5vw,74px);align-items:start}
.cinfo{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden}
.cinfo div{background:#fff;padding:26px 26px}
.cinfo em{display:block;font-style:normal;font:800 11.5px/1 "Poppins",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:11px}
.cinfo b{display:block;font-size:17.5px;line-height:1.6;color:var(--ink);font-weight:600}
.cinfo a{color:var(--accent);text-decoration:none;font-weight:600}
.cinfo a:hover{text-decoration:underline}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(28px,3.4vw,40px)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:20px}
.field label{display:block;font:800 11.5px/1 "Poppins",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;font:450 17px/1.5 "Poppins",system-ui,sans-serif;
  color:var(--ink);background:var(--t1);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:-2px}
.form .btn{width:100%;justify-content:center}
.form .note-sm{font-size:14px;color:var(--muted);margin:16px 0 0;line-height:1.55}
.map{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;height:380px}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .pstats{grid-template-columns:repeat(2,1fr)}
  .plist,.related,.gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .give{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .page-hero .bg::after{background:linear-gradient(180deg,rgba(10,46,30,.72),rgba(10,46,30,.93))}
}
@media (max-width:767px){
  .pstats,.plist,.related,.gallery{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
  .prose p,.prose li{font-size:17px}
}

/* ---------- project page: content + sticky donation-request form (light) ---------- */
.pbody{display:grid;grid-template-columns:minmax(0,1fr) 396px;gap:clamp(34px,4.4vw,66px);align-items:start}
.pside{position:sticky;top:100px}
.dform{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px 22px 22px;box-shadow:0 16px 44px rgba(10,46,30,.09)}
.dform h2{color:var(--ink);font-size:23px;line-height:1.24;letter-spacing:normal;font-weight:700;margin-bottom:8px}
.dform .intro{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 16px}
.dform label{display:block;font:800 11px/1 "Poppins",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);margin-bottom:8px}
.dform .f{margin-bottom:13px}
.dform input,.dform select,.dform textarea{width:100%;font:450 16px/1.45 "Poppins",system-ui,sans-serif;
  color:var(--ink);background:var(--t1);border:1.5px solid var(--line);
  border-radius:12px;padding:13px 14px;-webkit-appearance:none;appearance:none}
.dform textarea{min-height:62px;resize:vertical}
.dform input::placeholder,.dform textarea::placeholder{color:#8C948E}
.dform select{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7E4F' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.dform input:focus,.dform select:focus,.dform textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.dform .amtwrap{display:flex;align-items:stretch;border:1.5px solid var(--line);
  border-radius:12px;overflow:hidden;background:var(--t1)}
.dform .amtwrap span{display:flex;align-items:center;padding:0 14px;font:700 14px "Poppins",system-ui,sans-serif;
  color:var(--accent);border-right:1.5px solid var(--line)}
.dform .amtwrap input{border:0;border-radius:0;background:none}
.dform .hint{font-size:13px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.dform .btn{width:100%;justify-content:center;margin-top:6px}
.dform .btn-mint{background:var(--accent);color:#fff;font-weight:700}
.dform .btn-mint:hover{background:#166F46}
.dform .fine{font-size:12px;color:var(--muted);margin:11px 0 0;line-height:1.5}
.dform .ok{display:none;background:var(--t3);border:1.5px solid var(--accent);
  border-radius:12px;padding:20px;color:var(--body);font-size:15px;line-height:1.6}
.dform .ok b{display:block;color:var(--accent);font-family:"Poppins",system-ui,sans-serif;font-size:19px;
  font-weight:600;margin-bottom:8px}
.dform.sent form{display:none}
.dform.sent .ok{display:block}

@media (max-width:1080px){
  .pbody{grid-template-columns:1fr}
  .pside{position:static;order:-1;max-width:560px}
}

/* ---------- closing donation CTA (sits directly above the footer) ---------- */
.endcta{position:relative;padding:0;overflow:hidden;background:#000}
.endcta .bg{position:absolute;inset:0}
.endcta .bg img{width:100%;height:100%;object-fit:cover;opacity:.20}
.endcta .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.74),rgba(0,0,0,.92))}
.endcta .in{position:relative;z-index:2;text-align:center;max-width:820px;margin-inline:auto;
  padding-block:clamp(64px,7.5vw,108px)}
.endcta h2{color:#fff;font-size:clamp(30px,3.6vw,50px);line-height:1.12;
  letter-spacing:normal;font-weight:700;}
.endcta p{color:rgba(255,255,255,.82);font-size:19px;line-height:1.66;margin:22px auto 34px;max-width:56ch}
.endcta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.endcta .marks{display:flex;gap:10px 28px;justify-content:center;flex-wrap:wrap;
  margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.endcta .marks span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;
  letter-spacing:.02em;color:rgba(255,255,255,.72)}
.endcta .marks i{width:5px;height:5px;border-radius:50%;background:var(--green-bright);flex:none}
@media (max-width:600px){
  .endcta .row .btn{width:100%;justify-content:center}
}


/* ---------- donate modal ---------- */
dialog.dlg{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%}
dialog.dlg::backdrop{background:rgba(10,26,19,.62);backdrop-filter:blur(3px)}
.dlg .box{background:#fff;border-radius:var(--r-card);padding:30px 30px 28px;
  box-shadow:0 30px 80px rgba(10,46,30,.4);max-height:88vh;overflow:auto}
.dlg h2{color:#000;font-size:26px;line-height:1.2;letter-spacing:normal;font-weight:700;margin:0 0 8px}
.dlg .lede2{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 0 22px}
.dlg .x{position:absolute;top:14px;right:14px;background:#EFEFEF;border:0;color:#000;
  width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer}
.dlg .x:hover{background:#E0E0E0}
.dlg .wrapr{position:relative}
.dlg label{display:block;font:700 12px/1 "Poppins",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);margin-bottom:8px}
.dlg .f{margin-bottom:15px}
.dlg input,.dlg select,.dlg textarea{width:100%;font:400 16px/1.45 "Poppins",system-ui,sans-serif;
  color:#000;background:#FAFAFA;border:1.5px solid var(--line);
  border-radius:12px;padding:13px 14px;-webkit-appearance:none;appearance:none}
.dlg textarea{min-height:84px;resize:vertical}
.dlg input::placeholder,.dlg textarea::placeholder{color:#8C948E}
.dlg select option{color:#141A17;background:#fff}
.dlg input:focus,.dlg select:focus,.dlg textarea:focus{outline:2px solid var(--green);outline-offset:-1px}
.dlg .amtwrap{display:flex;border:1.5px solid var(--line);border-radius:12px;
  overflow:hidden;background:#FAFAFA}
.dlg .amtwrap span{display:flex;align-items:center;padding:0 14px;font:700 14px "Poppins",system-ui,sans-serif;
  color:var(--green);border-right:1.5px solid var(--line)}
.dlg .amtwrap input{border:0;border-radius:0;background:none}
.dlg .btn{width:100%;justify-content:center;margin-top:6px;background:var(--green);color:#fff;font-weight:700}
.dlg .btn:hover{background:#00683F}
.dlg .fine{font-size:13px;color:var(--muted);margin:13px 0 0;line-height:1.55}
.dlg .done{text-align:center;padding:8px 0 4px}
.dlg .done .tick{width:56px;height:56px;border-radius:50%;background:#E6F4EE;
  display:grid;place-items:center;margin:0 auto 18px;color:var(--green)}
.dlg .done h2{margin-bottom:12px;color:#000}
.dlg .done p{color:var(--muted);font-size:15.5px;line-height:1.65;margin:0 0 18px}
.dlg .copy{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  background:#F4F4F4;border-radius:12px;padding:13px 16px;margin-bottom:16px}
.dlg .copy code{font:600 14.5px/1 "Poppins",system-ui,sans-serif;color:#000}
.dlg .copy button{background:var(--green);color:#fff;border:0;border-radius:999px;
  padding:8px 14px;font:700 12.5px/1 "Poppins",system-ui,sans-serif;cursor:pointer}

/* ============================================================
   HOMEPAGE — hero, stat card, programs, mission & reports.
   Layout and proportions follow akhuwat.org; palette restricted
   to green / white / black. No tinted grounds anywhere.
   ============================================================ */

/* ---------- hero ---------- */
.ahero{position:relative;padding:0;overflow:hidden;background:#0E1A15;
  min-height:clamp(580px,72vh,780px);display:flex;align-items:center}
.ahero .bg{position:absolute;inset:0}
/* Muted YouTube background. youtube-nocookie avoids setting tracking cookies
   before a visitor has done anything. The poster image sits underneath and
   shows while the video loads, if it is blocked, or under reduced-motion. */
.ahero .vid{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;
  transition:opacity 1s ease}
.ahero .vid.ready{opacity:1}
.ahero .vid iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0}
@media (prefers-reduced-motion:reduce){.ahero .vid{display:none}}
.ahero .bg img{width:100%;height:100%;object-fit:cover}
.ahero .bg{z-index:0}
.ahero .vid{z-index:1}
/* Black veil painted ABOVE the video (the old scrim sat on .bg, underneath it,
   so the video was never actually darkened). Heavier at the top for the
   headline, lighter at the bottom so the footage still reads behind the
   stats card that overlaps there. */
.ahero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.32) 55%,rgba(0,0,0,.16) 100%),
             rgba(0,0,0,.30)}
.ahero .bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.10)}
.ahero .wrap{position:relative;z-index:3;width:100%;padding-block:clamp(60px,7vw,96px)}
.ahero .kicker{font-size:clamp(17px,1.6vw,22px);font-weight:600;color:#fff;margin:0 0 14px}
.ahero .kicker b{color:var(--mint);font-weight:600}
.ahero .rule{width:64px;height:3px;background:var(--mint);border:0;margin:0 0 26px}
/* 31ch holds the longest clause ("Clean water, educational expenditure,")
   on one line while still forcing the headline to three. */
.ahero h1{color:#fff;font-size:clamp(31px,3.6vw,48px);line-height:1.16;font-weight:600;
  margin:0;max-width:31ch}
/* The standfirst was removed from the hero and it carried the only spacing
   between the headline and the button, which then sat flush against the last
   line. The gap belongs to the button, so it survives further copy changes. */
.ahero .btn{gap:11px;margin-top:clamp(var(--s5),2.8vw,40px)}
.ahero .btn svg{flex:none}

/* ---------- stat card, overlapping the hero ---------- */
.astats-wrap{background:#fff;padding:0}
.astats{--stat-h:210px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 18px 50px rgba(0,0,0,.10);position:relative;z-index:3;
  min-height:var(--stat-h);margin-top:calc(var(--stat-h) / -2);
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.astats > div{padding:30px 18px;text-align:center;border-right:1px solid var(--line)}
.astats > div:last-child{border-right:0}
.astats b{display:block;font-size:clamp(32px,3.4vw,50px);font-weight:700;
  color:var(--green-bright);line-height:1.15;white-space:nowrap}
.astats .r{width:44px;height:3px;background:var(--green);margin:14px auto 12px;border-radius:2px}
.astats em{display:block;font-style:normal;font-size:15.5px;font-weight:600;color:#000;
  line-height:1.4;white-space:nowrap}

/* ---------- programmes ---------- */
.apr{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.apr article{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}
.apr article:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.10)}
.apr .pic{aspect-ratio:4/3;overflow:hidden;background:#EFEFEF}
.apr .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.apr article:hover .pic img{transform:scale(1.04)}
.apr .body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.apr h3{font-size:22px;font-weight:600;color:#000;line-height:1.3;margin:0 0 12px}
.apr h3 a{color:inherit;text-decoration:none}
.apr h3 a:hover{color:var(--green)}
.apr p{font-size:17px;line-height:1.55;color:#000;margin:0 0 22px}
.apr .foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.apr .foot b{font-size:21px;font-weight:700;color:var(--green)}
.apr .foot span{font-size:15px;font-weight:600;color:#000}
.apr .more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:16px;font-weight:600;color:var(--green);text-decoration:none}
.apr .more:hover{text-decoration:underline}

/* ---------- mission & audit timeline (white) ---------- */
/* The band above is white too, so the separation is a hairline, not a fill —
   the palette is green / white / black only, no tinted panels. */
.amission{background:#fff;color:#000;padding:var(--section) 0;
  border-top:1px solid var(--line)}

/* The statement carries the section, so it gets display scale. The measure is
   in em, not px, so it holds the same ~22 characters at every clamp step and
   the three clauses keep one line each. */
.amission .stmt{max-width:11.6em;font-size:clamp(32px,4.2vw,56px)}
.amission .eyebrow{color:var(--green);margin-bottom:var(--s4)}
.amission h2{color:#000;font-size:1em;font-weight:700;line-height:1.1;margin:0}

.audit{margin-top:clamp(56px,7vw,96px)}
.audit-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap;margin-bottom:clamp(40px,4.5vw,64px)}
.audit-head h3{color:#000;font-size:clamp(19px,1.6vw,23px);font-weight:700;margin:0}
.audit-head p{color:var(--muted);font-size:16px;line-height:1.6;margin:0;max-width:46ch}

/* Audit timeline. The claim is not "here are five PDFs", it is "there has been
   an independent audit every year since 2021 with no gap" — so the years sit on
   one continuous line as a chain. The line is drawn per item and the segments
   meet, which keeps it locked to the node row at any type size. */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.tl a{display:block;text-align:center;text-decoration:none;color:#000}
.tl b{display:block;font-size:clamp(26px,2.4vw,32px);font-weight:700;color:var(--green);
  line-height:1.1;letter-spacing:var(--tr-lg)}

.tl .node{display:block;position:relative;height:30px;margin:var(--s4) 0}
.tl .node::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:2px;margin-top:-1px;background:var(--line)}
.tl li:first-child .node::before{left:50%}
.tl li:last-child .node::before{right:50%}
.tl .node i{position:absolute;left:50%;top:50%;width:13px;height:13px;
  margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 6px #fff;
  transition:transform .2s var(--ease-out),background .2s var(--ease-out)}

.tl .dl{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;
  color:var(--green)}
.tl .dl svg{flex:none;transition:transform .2s var(--ease-out)}
.tl small{display:block;font-size:13px;color:var(--muted);margin-top:var(--s1)}

.tl a:hover .node i{transform:scale(1.5);background:var(--green-dk)}
.tl a:hover .dl{text-decoration:underline}
.tl a:hover .dl svg{transform:translateY(2px)}
.tl a:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:var(--r-btn)}

@media (max-width:1080px){
  .astats{grid-template-columns:repeat(2,1fr);--stat-h:300px;
    min-height:var(--stat-h);margin-top:calc(var(--stat-h) / -2)}
  .astats em{white-space:normal}
  .astats > div:nth-child(2){border-right:0}
  .astats > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .apr{grid-template-columns:repeat(2,1fr)}
  .tl b{font-size:24px}
  .tl .dl{font-size:14px}
}
@media (max-width:720px){
  .astats{grid-template-columns:1fr;min-height:0;margin-top:-40px}
  .astats em{white-space:normal}
  .astats > div{border-right:0;border-bottom:1px solid var(--line)}
  .astats > div:last-child{border-bottom:0}
  .apr{grid-template-columns:1fr}
  /* the chain turns on its side: one spine down the left, years stacked */
  .amission .stmt{max-width:none}
  .audit-head{display:block}
  .audit-head p{margin-top:var(--s3)}
  .amission h2 .cl{display:inline}
  .tl{grid-template-columns:1fr}
  .tl a{display:grid;grid-template-columns:30px 1fr auto;align-items:center;
    gap:var(--s4);text-align:left}
  .tl .node{order:1;height:auto;min-height:66px;margin:0;align-self:stretch}
  .tl .node::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;
    margin:0 0 0 -1px}
  .tl li:first-child .node::before{left:50%;top:50%}
  .tl li:last-child .node::before{bottom:50%}
  .tl b{order:2;font-size:26px}
  .tl .dl{order:3;justify-self:end}
  .tl small{display:none}
}


/* ---------- how would you like to give: bank transfer or cheque ---------- */
.methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.methods button{font:600 14.5px/1.2 "Poppins",system-ui,sans-serif;padding:12px 10px;
  border-radius:var(--r-btn);border:1.5px solid var(--line);background:#fff;color:#000;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:border-color .2s,background .2s,color .2s}
.methods button:hover{border-color:var(--green)}
.methods button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.methods button svg{flex:none}

.mpanel{display:none;margin:13px 0 4px;border:1.5px solid var(--line);
  border-radius:var(--r-card);padding:14px;background:#FAFAFA}
.mpanel.on{display:block}
.mpanel h4{font:700 12px/1.3 "Poppins",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.08em;color:var(--green);margin:0 0 11px}
.mpanel p{font-size:15px;line-height:1.55;color:#000;margin:0 0 12px}
.mpanel p:last-child{margin-bottom:0}
.mpanel a{color:var(--green);font-weight:600;text-decoration:none}
.mpanel a:hover{text-decoration:underline}

.bankrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;
  padding:7px 0;border-bottom:1px solid var(--line)}
.bankrow:last-of-type{border-bottom:0;padding-bottom:0}
.bankrow .k{grid-column:1/-1;font:600 10.5px/1.3 "Poppins",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bankrow .v{font:600 14px/1.3 "Poppins",system-ui,sans-serif;color:#000;
  font-variant-numeric:tabular-nums;text-align:left;white-space:nowrap;
  overflow-x:auto;scrollbar-width:none}
.bankrow .v::-webkit-scrollbar{display:none}
.bankrow .cp{border:0;background:var(--green);color:#fff;border-radius:999px;
  padding:6px 11px;font:700 11px/1 "Poppins",system-ui,sans-serif;cursor:pointer;flex:none}
.bankrow .cp:hover{background:#00683F}

.upl{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.upl label{margin-bottom:9px}
.upl input[type=file]{width:100%;font:400 13px/1.3 "Poppins",system-ui,sans-serif;color:#000;
  background:#fff;border:1.5px dashed var(--line);border-radius:10px;padding:9px}
.upl input[type=file]::file-selector-button{font:700 13px/1 "Poppins",system-ui,sans-serif;
  border:0;background:var(--green);color:#fff;border-radius:999px;padding:9px 14px;
  margin-right:12px;cursor:pointer}
.upl .hint{font-size:12px;color:var(--muted);margin:7px 0 0;line-height:1.45}


/* ---------- donation form: two steps ---------- */
.steps{display:flex;gap:6px;margin-bottom:12px}
.steps i{flex:1;height:4px;border-radius:999px;background:var(--line);transition:background .3s}
.steps i.on{background:var(--green)}
.stepno{display:block;font:700 11px/1 "Poppins",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);margin-bottom:13px}
.step{display:none}
.step.on{display:block}
.navrow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:4px}
.navrow .btn{margin-top:0}
.btn-back{background:#fff;border:1.5px solid var(--line);color:#000;font-weight:600;
  padding:16px 18px;border-radius:var(--r-btn);cursor:pointer;
  font:600 15px/1 "Poppins",system-ui,sans-serif;transition:border-color .2s}
.btn-back:hover{border-color:var(--green);color:var(--green)}

/* where are you donating from — nested inside the bank panel */
.methods.sub{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.methods.sub button{font-size:14px;padding:11px 8px}
.acct{display:none}
.acct.on{display:block}

.accthead{font:600 13px/1.4 "Poppins",system-ui,sans-serif;color:#000;margin:0 0 4px}
.accthead span{color:var(--muted);font-weight:500}

/* On step 2 the intro has done its job — reclaim the space so the whole
   form still fits one screen. */
.dform.at2 .intro{display:none}
.dform.at2 h2{margin-bottom:12px}
.upl .hint{display:none}

/* ---------- Is this Zakat? (required radio pair) ---------- */
.methods.zk{grid-template-columns:1fr 1fr;gap:10px}
.opt{position:relative;display:block;margin:0}
.opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.opt span{display:flex;align-items:center;justify-content:center;gap:8px;
  font:600 14.5px/1.2 "Poppins",system-ui,sans-serif;padding:12px 10px;
  border-radius:var(--r-btn);border:1.5px solid var(--line);background:#fff;color:#000;
  transition:border-color .2s,background .2s,color .2s}
.opt span:hover{border-color:var(--green)}
.opt input:checked + span{background:var(--green);border-color:var(--green);color:#fff}
.opt input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}
.zkhint{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.5}


/* ============================================================
   TYPOGRAPHIC & SPACING PASS
   Audited against the live pages, then corrected systematically.
   Kept as one block so the reasoning stays legible; fold into the
   component rules when the stylesheet is next consolidated.
   ============================================================ */

/* --- 1. Optical tracking -------------------------------------------------
   Every heading was rendering at `letter-spacing: normal` because the
   akhuwat repalette stripped negatives globally. Poppins at 28px+ reads
   loose without it. Tracking now scales with size, the way it should. */
.ahero h1, h2.big, .astats b, .page-hero h1, .amission h2, .h2cta h2{letter-spacing:var(--tr-xl)}
.prose h2, .tl b, .pstats b, h2.sec{letter-spacing:var(--tr-lg)}
.apr h3, .pcard h3, .plist h3, .related b, .faq summary, .dform h2,
.h2card h3, .door h3, h3.card, .trust b, .regions b, .apr .foot b,
.astats em, .cinfo b{letter-spacing:var(--tr-md)}
.eyebrow, .pstats em, .dform label, .field label, .mpanel h4,
.bankrow .k, .stepno, .util, .fbot, footer h4{letter-spacing:var(--tr-cap)}

/* --- 2. Line-height: display and single-line elements were far too loose */
.ahero .kicker{line-height:1.35}
.apr .foot b, .astats b, .pstats b{line-height:1.15}
.fgrid a{line-height:1.5}
.prose p{line-height:1.68}
.ahero h1, .page-hero h1{line-height:1.12}
h2.big, .amission h2{line-height:1.16}

/* --- 3. One vertical rhythm ---------------------------------------------
   Sections were running at 129px on inner pages and 96px on the homepage
   mission band — two rhythms on one site. Now a single token. */
section{padding:var(--section) 0}
.amission{padding:var(--section) 0}
.ahero, .astats-wrap, .endcta, .page-hero{padding:0}
.page-hero .wrap{padding-block:clamp(56px,6vw,88px)}

/* --- 4. Consistent gaps (were 16 / 18 / 28 with no scale) */
.apr, .plist, .projects, .related, .gallery, .doors{gap:var(--s5)}
.h2cards{gap:var(--s5)}

/* --- 5. Consistent card padding (was an asymmetric 26/26/28) */
.apr .body, .plist .body, .pcard .body{padding:var(--s5) var(--s5) var(--s6)}
.rep, .door{padding:var(--s5)}

/* --- 6. Heading-to-content spacing, from the scale */
.eyebrow{margin:0 0 var(--s3)}
.prose h2{margin:var(--s7) 0 var(--s4)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 var(--s5)}
.prose ul{margin:0 0 var(--s5)}
.prose li{line-height:1.6}
.lede{margin-top:var(--s4)}

/* --- 7. Measure: prose was running 80 characters, past comfortable.
   --text is now 680px, about 68 characters at 19px. */
.prose{max-width:var(--text)}
.page-hero .lead{max-width:62ch}


/* --- Band adjacency rule -------------------------------------------------
   Only green, white and black are in play, so no two stacked full-width
   bands may share a colour. The footer owns the green; emphasis bands
   directly above it (mission, closing CTA) are black.
   NOTE: --green (#007A56) is only 3.92:1 on black — on a black band use
   --green-bright (5.37:1) or --mint (12.44:1) for anything text-sized. */
.amission{background:#fff}                     /* white, so the green footer reads */
.endcta{background:#000}                       /* black, directly above the footer */


/* ============================================================
   WordPress integration
   The admin bar is position:fixed at the top for logged-in users
   and would sit on top of our own fixed header.
   ============================================================ */
body.admin-bar header.site{top:32px}
@media screen and (max-width:782px){body.admin-bar header.site{top:46px}}
.wp-block-image img{max-width:100%;height:auto}

/* The mailto route is now an option offered after the request is already
   stored, not the delivery mechanism, so it reads as a secondary link. */
.mailalt{display:inline-block;margin-top:14px;font-size:14.5px;font-weight:600;
  color:var(--green);text-decoration:underline;text-underline-offset:3px}
.mailalt:hover{color:var(--green-dk)}