@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;src:url(/assets/bricolage-800.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:600;font-display:swap;src:url(/assets/bricolage-600.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:400;font-display:swap;src:url(/assets/hanken-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:600;font-display:swap;src:url(/assets/hanken-600.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:800;font-display:swap;src:url(/assets/hanken-800.woff2) format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-weight:500;font-display:swap;src:url(/assets/splinemono-500.woff2) format('woff2')}

:root{
  --paper:#FDFDFB; --mist:#F5F5F9; --card:#FFFFFF;
  --ink:#12162E; --slate:#575D75;
  --lapis:#2438A0; --lapis-deep:#16204F; --lapis-soft:#E9ECFB;
  --copper:#B97C34; --copper-deep:#96652A; --copper-soft:#F7EEDF;
  --hair:#E7E6EF; --hair-2:#D9D8E6;
  --ok:#1B7F4D;
  --disp:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --maxw:1180px; --r:18px; --r-s:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(18,22,46,.05),0 12px 32px -12px rgba(18,22,46,.12);
  --shadow-lift:0 2px 4px rgba(18,22,46,.06),0 24px 48px -16px rgba(18,22,46,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:var(--body);font-size:16.5px;line-height:1.65;color:var(--ink);background:var(--paper)}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:800 11.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--lapis)}
.eyebrow::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--copper),var(--lapis))}
.skip{position:absolute;left:-9999px;top:0;background:var(--lapis);color:#fff;padding:10px 18px;z-index:99;font-weight:800;border-radius:0 0 10px 0}
.skip:focus{left:0;top:0}
:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:.3s var(--ease)}
.nav.scrolled{background:rgba(253,253,251,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand img{width:42px;height:42px}
.brand b{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand small{display:block;font:800 9px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--copper-deep);margin-top:2px}
.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-links a{font:600 14px/1 var(--body);color:var(--ink);text-decoration:none;padding:10px 14px;border-radius:999px;transition:background .2s}
.nav-links a:hover{background:var(--mist)}
.nav-cta{background:var(--ink);color:#fff!important;font-weight:800!important;padding:11px 20px!important}
.nav-cta:hover{background:var(--lapis)!important}
.menu-btn{display:none;margin-left:auto;background:var(--card);border:1px solid var(--hair);width:44px;height:44px;border-radius:12px;font-size:19px;cursor:pointer;color:var(--ink)}
.mobile-menu{position:fixed;inset:0;background:rgba(253,253,251,.97);backdrop-filter:blur(10px);z-index:49;display:none;flex-direction:column;justify-content:center;gap:4px;padding:32px;text-align:center}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--disp);font-weight:600;font-size:28px;color:var(--ink);text-decoration:none;padding:12px;border-radius:14px}
.mobile-menu a:hover{background:var(--mist)}
.mobile-menu .nav-cta{font-family:var(--body);font-size:16px;margin:16px auto 0;border-radius:999px;max-width:260px}

/* ---------- hero ---------- */
.hero{position:relative;padding:150px 0 72px;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(560px 420px at 82% 30%,rgba(36,56,160,.10),transparent 65%),
  radial-gradient(640px 480px at 74% 62%,rgba(185,124,52,.14),transparent 65%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--hair);border-radius:999px;padding:8px 16px 8px 10px;font:600 13px/1.4 var(--body);color:var(--slate);box-shadow:var(--shadow);margin-bottom:28px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(27,127,77,.15)}
.hero-badge b{color:var(--ink)}
.hero-badge .bi{white-space:nowrap}
.hero h1{font-size:clamp(44px,6.6vw,86px);margin-bottom:24px;max-width:14ch}
.hero h1 .glow{background:linear-gradient(92deg,var(--copper) 10%,var(--lapis) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:19px;color:var(--slate);max-width:50ch;margin-bottom:34px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;font:800 15.5px/1 var(--body);text-decoration:none;border:0;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:var(--shadow)}
.btn-ink:hover{background:var(--lapis);box-shadow:var(--shadow-lift)}
.btn-line{background:var(--card);color:var(--ink);border:1px solid var(--hair-2)}
.btn-line:hover{border-color:var(--ink)}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap}
.hero-stats b{display:block;font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:-.02em}
.hero-stats b em{font-style:normal;color:var(--copper-deep)}
.hero-stats span{font:600 13px/1.4 var(--body);color:var(--slate)}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art .halo{position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(circle,rgba(185,124,52,.16),rgba(36,56,160,.08) 55%,transparent 72%);filter:blur(6px)}
.hero-art img,.hero-art video{position:relative;width:min(440px,88%);height:auto;filter:drop-shadow(0 24px 48px rgba(18,22,46,.22));opacity:0;transform:translateY(18px) scale(.97);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.hero.lit .hero-art img,.hero.lit .hero-art video{opacity:1;transform:none}
/* Two things make the video's rectangle disappear.
   1. multiply: the clip's background was keyed to near-white, and multiplying
      near-white against the page leaves the page exactly as it was, while the
      bird and the gold keep their own colour. This is why no alpha channel is
      needed, which matters because Safari cannot play one.
   2. no drop-shadow: the file is opaque, so the shadow that flatters the
      cut-out still logo was drawing a shadow of the whole rectangle.
   The clip is also shown larger than the still was: the bird is a little over
   half its frame, so it has to be to read at the same size, and the gold ring
   is free to spread past the column now that there is no edge to give it away. */
.hero-art video{
  mix-blend-mode:multiply;filter:none;
  width:min(760px,164%);max-width:none}
/* The clip and the logo cross over each other in the same place, so the hero
   never jumps: the video sits on top and dissolves out as the still comes up. */
.hero-art video{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:1;
  transition:opacity .9s var(--ease)}
.hero.lit .hero-art video{opacity:1}
/* sound toggle */
.snd{position:absolute;right:6%;bottom:4%;z-index:2;display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:9px 16px 9px 13px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--hair-2);color:var(--ink);font:800 12.5px/1 var(--body);letter-spacing:.02em;
  box-shadow:var(--shadow);opacity:0;transition:opacity .5s var(--ease),background .2s,border-color .2s,transform .18s var(--ease)}
.hero.lit .snd{opacity:1}
.snd:hover{background:#fff;border-color:var(--lapis);transform:translateY(-2px)}
.snd svg{width:17px;height:17px;fill:currentColor;flex:none}
.snd .off{display:none}
.snd[aria-pressed="true"]{background:var(--lapis);border-color:var(--lapis);color:#fff}
.snd[aria-pressed="true"] .off{display:inline}
.snd[aria-pressed="true"] .on{display:none}

/* ---------- registry strip ---------- */
/* The trust's credentials — the reason a stranger believes this is real. They
   were plain label-and-value text; each is now a card carrying a verified tick. */
.registry{border-block:1px solid var(--hair);background:linear-gradient(180deg,var(--card),var(--paper))}
.registry ul{list-style:none;max-width:var(--maxw);margin:0 auto;padding:22px 24px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.registry li{position:relative;background:var(--card);border:1px solid var(--hair);border-radius:14px;
  padding:12px 15px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.registry li:hover{border-color:var(--hair-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.registry li b{display:flex;align-items:center;justify-content:space-between;gap:8px;font:800 9.5px/1.6 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.registry li b::after{content:"✓";flex:none;width:16px;height:16px;border-radius:50%;
  background:#E5F4EC;color:var(--ok);font:800 9px/16px var(--body);text-align:center;letter-spacing:0}
.registry li span{font:500 13px/1.5 var(--mono);color:var(--ink);word-break:break-all}
.registry-note{max-width:var(--maxw);margin:0 auto;padding:0 24px 18px;font-size:12.5px;line-height:1.6;color:var(--slate);text-align:center}

/* ---------- sections ---------- */
section.block{padding:104px 0}
.sec-head{max-width:660px;margin-bottom:56px}
.sec-head h2{font-size:clamp(32px,4.2vw,52px);margin:16px 0 16px}
.sec-head p{color:var(--slate);font-size:17.5px}
.tint{background:var(--mist)}

/* ---------- creed ---------- */
.creed-band{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.creed-card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:38px 40px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.creed-card::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--copper),var(--lapis))}
.creed-card .gl{font-family:var(--disp);font-weight:800;font-size:44px;letter-spacing:-.02em}
.creed-card:first-child .gl{color:var(--copper-deep)}
.creed-card:last-child .gl{color:var(--lapis)}
.creed-card h3{font-size:19px;font-weight:600;margin:6px 0 12px;color:var(--slate)}
.creed-card p{color:var(--slate);font-size:15.5px;max-width:44ch}
.creed-lede{font-family:var(--disp);font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:-.01em;max-width:26ch;margin:14px 0 40px}
.creed-lede .glow{background:linear-gradient(92deg,var(--copper),var(--lapis));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- causes ---------- */
.cause-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* The trust's whole idea is carrying light, so each card lights up: a warm glow
   blooms from behind the number and a copper-to-lapis line draws itself across
   the top. Nine identical white boxes said nothing about Alorah. */
.cause{position:relative;overflow:hidden;isolation:isolate;background:var(--card);
  border:1px solid var(--hair);border-radius:var(--r);padding:34px 30px 32px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.cause:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--hair-2)}
/* the lamp coming on */
.cause::after{content:"";position:absolute;z-index:-1;top:-55%;right:-35%;width:78%;height:130%;
  background:radial-gradient(circle at 50% 50%,rgba(185,124,52,.20),rgba(185,124,52,.05) 45%,transparent 70%);
  opacity:0;transform:scale(.7);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.cause:hover::after{opacity:1;transform:scale(1)}
/* the gradient hairline, drawn left to right */
.cause::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--copper),var(--lapis));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cause:hover::before{transform:scaleX(1)}
/* the number becomes a ghosted display numeral instead of a small mono label */
.cause .n{position:absolute;top:16px;right:20px;font-family:var(--disp);font-weight:800;
  font-size:60px;line-height:1;letter-spacing:-.04em;color:var(--lapis);opacity:.07;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cause:hover .n{opacity:.14;transform:translateY(-3px)}
.cause h3{font-family:var(--disp);font-weight:800;font-size:20px;margin:0 0 10px;letter-spacing:-.015em;
  max-width:15ch;position:relative}
.cause h3::after{content:"";display:block;width:26px;height:2px;margin-top:12px;
  background:linear-gradient(90deg,var(--copper),var(--lapis));border-radius:2px;
  transition:width .4s var(--ease)}
.cause:hover h3::after{width:46px}
.cause p{font-size:14.5px;line-height:1.7;color:var(--slate);position:relative}

/* ---------- project / live need ---------- */
.proj{background:var(--card);border:1px solid var(--hair);border-radius:calc(var(--r) + 6px);box-shadow:var(--shadow);overflow:hidden}
/* ---------- open needs: a slider ----------
   Stacking them vertically meant five open needs made the homepage enormous.
   One need per slide, swipeable on a phone (native scroll-snap — no library),
   with arrows and dots on wider screens. */
.needs{position:relative}
.needs-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.needs-track::-webkit-scrollbar{display:none}
.needs-track > .proj{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.needs-nav{display:flex;align-items:center;gap:14px;margin-top:22px}
.needs-btn{width:44px;height:44px;flex:none;border-radius:50%;background:var(--card);
  border:1px solid var(--hair-2);color:var(--ink);font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s,opacity .2s}
.needs-btn:hover:not(:disabled){border-color:var(--lapis);color:var(--lapis);background:var(--lapis-soft)}
.needs-btn:disabled{opacity:.32;cursor:default}
.needs-dots{display:flex;gap:8px;margin-left:auto}
.needs-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--hair-2);transition:background .25s var(--ease),width .25s var(--ease)}
.needs-dot.on{background:linear-gradient(90deg,var(--copper),var(--lapis));width:26px;border-radius:999px}
.needs-count{font:500 13px/1 var(--mono);color:var(--slate)}
.needs-nav.hide{display:none}
@media (max-width:600px){
  .needs-track{gap:10px}
  .needs-nav{gap:10px}
  .needs-btn{width:40px;height:40px}
}
.proj-top{display:grid;grid-template-columns:1.05fr .95fr;gap:0}
.proj-info{padding:44px 46px}
.chip{display:inline-flex;align-items:center;gap:7px;font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:8px 14px;margin-bottom:18px}
.chip-open{background:var(--copper-soft);color:var(--copper-deep)}
.chip-open::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--copper);
  animation:need-pulse 2.4s var(--ease) infinite}
/* A slow pulse, not a blink: it reads as "this need is still alive" without
   the harshness of flashing, which is distracting and an accessibility risk. */
@keyframes need-pulse{
  0%{box-shadow:0 0 0 0 rgba(185,124,52,.55);opacity:1}
  70%{box-shadow:0 0 0 8px rgba(185,124,52,0);opacity:.65}
  100%{box-shadow:0 0 0 0 rgba(185,124,52,0);opacity:1}
}
/* h1 as well as h3: the need's own page makes the title the page heading, and
   without this it fell back to the browser's default h1 size, which only
   happened to look right at desktop width. */
.proj-info h3,.proj-info h1{font-size:clamp(26px,2.8vw,34px);margin-bottom:6px}
.proj-info .loc{font:500 13px/1.6 var(--mono);color:var(--slate);margin-bottom:18px}
.proj-info>p{color:var(--slate);font-size:15.5px;margin-bottom:28px;max-width:52ch}
.ledger{border:1px solid var(--hair);border-radius:var(--r-s);overflow:hidden;margin-bottom:14px}
.ledger-row{display:grid;grid-template-columns:repeat(3,1fr)}
.ledger-row div{padding:16px 20px}
.ledger-row div+div{border-left:1px solid var(--hair)}
.ledger b{display:block;font:500 22px/1.3 var(--mono);font-variant-numeric:tabular-nums}
.ledger .short b{color:var(--copper-deep)}
.ledger span{font:800 10px/1.8 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.bar{height:8px;border-radius:999px;background:var(--mist);border:1px solid var(--hair);overflow:hidden;margin-bottom:10px}
.bar i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--copper),var(--lapis));transition:width 1.2s var(--ease)}
.due{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font:500 13px/1.7 var(--mono);color:var(--slate);margin-bottom:26px}
.due b{color:var(--ink);font-weight:500}
.proj-aside{background:linear-gradient(165deg,var(--lapis-deep),var(--lapis) 130%);color:#EDEFFA;padding:44px 42px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.proj-aside h4{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.01em}
.proj-aside p{font-size:14.5px;color:#C4CBEE;max-width:40ch}
.proj-aside .mono{font:500 12.5px/1.8 var(--mono);color:#D8DDF5}

/* ---------- photo timeline ---------- */
.ptl{border-top:1px solid var(--hair);padding:34px 46px 42px;background:var(--paper)}
/* Optional project video: click-to-play facade, iframe loads only on tap */
.ptl-video{margin:0 0 18px;border-radius:var(--r-s,14px);overflow:hidden;border:1px solid var(--hair);background:#000;max-width:720px}
.ptl-video .vwrap{position:relative;aspect-ratio:16/9}
.ptl-video .vfacade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#000;display:block}
.ptl-video .vfacade img{width:100%;height:100%;object-fit:cover;opacity:.85;display:block}
.ptl-video .vfacade:hover img{opacity:1}
.ptl-video .vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--lapis);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(18,22,46,.45)}
.ptl-video .vplay svg{width:24px;height:24px;margin-left:3px}
.ptl-video .vfacade:hover .vplay{background:var(--lapis-deep)}
.ptl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Privacy-sensitive needs: dignity note instead of the photo strip */
.ptl-note{border:1px dashed var(--hair-2);border-radius:var(--r-s,14px);background:var(--card);padding:22px 24px;max-width:720px;font:500 15px/1.7 var(--body);color:var(--slate)}
.ptl-note b{color:var(--ink)}
/* Delivered projects: same card, single info column, no funding UI */
.chip-funded{background:var(--lapis-soft);color:var(--lapis)}
.chip-done{background:#E9F6EE;color:var(--ok)}
#doneList .proj{flex:none}
#doneList .proj+.proj{margin-top:20px}
.proj.done .proj-top{grid-template-columns:1fr}
.ptl-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ptl-head h4{font-family:var(--disp);font-weight:600;font-size:19px}
.ptl-head span{font:500 12.5px/1.6 var(--mono);color:var(--slate)}
.ptl-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(240px,68vw);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.ptl-track::-webkit-scrollbar{height:8px}
.ptl-track::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:99px}
.stage{scroll-snap-align:start;border:1px solid var(--hair);border-radius:var(--r-s);overflow:hidden;background:var(--card)}
.stage figure{aspect-ratio:4/3;background:
  linear-gradient(150deg,var(--mist),#EDEDF4 60%,var(--lapis-soft));display:flex;align-items:center;justify-content:center;position:relative}
.stage figure.filled{background:none}
.stage figure .ph{font:600 12px/1.5 var(--body);color:var(--slate);text-align:center;padding:0 18px}
.stage figcaption{padding:12px 16px 14px;border-top:1px solid var(--hair)}
.stage figcaption b{display:block;font:800 11px/1.8 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--lapis)}
.stage figcaption span{font:500 12px/1.6 var(--mono);color:var(--slate)}

/* ---------- transparency ---------- */
.vault{display:flex;flex-direction:column;gap:14px}
.fy{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:26px 30px;display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}
.fy .yr{font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.01em}
.fy .yr small{display:block;font:600 12.5px/1.8 var(--body);color:var(--slate)}
.docs{display:flex;flex-wrap:wrap;gap:10px}
.doc{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--hair);border-radius:999px;padding:10px 18px;font:600 14px/1 var(--body);color:var(--ink);text-decoration:none;background:var(--paper)}
.doc .st{font:800 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.st-soon{background:var(--mist);color:var(--slate)}
.st-live{background:#E5F4EC;color:var(--ok)}
/* registrations row: three fixed cards on one line */
.docs-reg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.docs-reg .doc{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 10px;border-radius:14px;padding:13px 16px}
.docs-reg .doc>b{font:800 13.5px/1.3 var(--body)}
.docs-reg .doc .code{grid-column:1/-1;font:500 12.5px/1.4 var(--mono);color:var(--slate);letter-spacing:.02em}
.docs-reg .doc .st{flex:none;justify-self:end}
/* masked donor wall + beneficiaries */
.people{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.people-card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:24px 26px}
.people-card h3{font-size:18px;margin-bottom:2px}
.people-card .sub{font:600 12.5px/1.6 var(--body);color:var(--slate);margin-bottom:10px}
.people-card ul{list-style:none}
.people-card li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-top:1px solid var(--hair)}
.people-card li:first-child{border-top:0}
.people-card li b{font-weight:800;font-size:14.5px}
.people-card li small{display:block;font:500 12px/1.6 var(--mono);color:var(--slate)}
.people-card li .amt{font:500 14px/1.4 var(--mono);white-space:nowrap;color:var(--ink)}
.people-card li .pc{font:700 11px/1.5 var(--body);color:var(--lapis);background:var(--lapis-soft);border-radius:999px;padding:3px 10px;text-align:right}
.people-card .empty{color:var(--slate);font-size:13.5px;border-top:0;display:block}
.vault-note{margin-top:18px;background:var(--card);border:1px solid var(--hair);border-left:4px solid var(--copper);border-radius:var(--r-s);padding:18px 22px;font-size:14.5px;line-height:1.75;color:var(--slate);max-width:none}
.vault-note b{color:var(--ink)}
.vault-note a{color:var(--lapis);font-weight:600}

/* ---------- donate ---------- */
.donate-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.pay-card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);padding:36px 38px}
.pay-card h3{font-size:22px;margin-bottom:8px}
.pay-card>p{font-size:14.5px;color:var(--slate);margin-bottom:24px}
.field-row{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--hair);border-radius:var(--r-s);padding:7px 12px;margin-bottom:8px;background:var(--paper)}
/* Height comes from two stacked lines, not padding, so the line-heights are what
   bring these down to 56px. Both font sizes are deliberately left alone. */
.field-row div b{display:block;font:800 10px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.field-row div span{font:500 15.5px/1.25 var(--mono);color:var(--ink);word-break:break-all}
.copy{flex:none;background:var(--mist);border:1px solid var(--hair);border-radius:8px;padding:8px 14px;font:800 12px/1 var(--body);color:var(--ink);cursor:pointer;transition:background .2s}
.copy:hover{background:var(--lapis-soft)}
.copy.done{background:#E5F4EC;color:var(--ok);border-color:#BFE3CE}
.upi-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.pay-note{font:500 12.5px/1.8 var(--mono);color:var(--slate);margin-top:16px}

/* donor form */
.dform{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);padding:36px 38px;margin-top:20px}
.dform h3{font-size:22px;margin-bottom:8px}
.dform>p{font-size:14.5px;color:var(--slate);margin-bottom:26px;max-width:64ch}
.steps{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:12px;margin:18px 0 10px}
.steps li{counter-increment:step;position:relative;padding-left:46px;font-size:14.5px;line-height:1.6;color:var(--slate);max-width:70ch}
.steps li b{color:var(--ink)}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--lapis),var(--lapis-deep));color:#fff;font:800 15px/32px var(--body);text-align:center;box-shadow:0 2px 8px rgba(36,56,160,.28)}
.steps li+li::after{content:"";position:absolute;left:15.5px;top:-14px;height:14px;width:2px;background:var(--lapis-soft)}
.dform>p.steps-note{font-size:13px;color:var(--slate);margin-bottom:24px;max-width:70ch}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
.f label{font:800 14px/1.4 var(--body);letter-spacing:.06em;color:var(--ink)}
.f label small{font-weight:600;color:var(--slate);letter-spacing:0}
/* 16px is deliberate: below it, iOS Safari zooms the page in on every tap.
   Tighter padding keeps the box compact despite the slightly larger text
   (was 13px/15.5px = ~51px tall; now ~42px). */
.f input,.f select,.f textarea{font:500 15.5px/1.5 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--hair-2);border-radius:var(--r-s);padding:9px 12px;transition:border-color .2s,box-shadow .2s;width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--lapis);box-shadow:0 0 0 3px var(--lapis-soft)}
.f input.bad,.f textarea.bad{border-color:#C0392B;box-shadow:0 0 0 3px #F9E4E1}
.f .err{font:600 12.5px/1.5 var(--body);color:#C0392B;min-height:0;display:none}
.f .err.show{display:block}
.f input[data-mono],.f textarea[data-mono]{font-family:var(--mono)}
.dform-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.dform>p.dform-note{max-width:none;font:500 12.5px/1.8 var(--mono);color:var(--slate);margin-top:16px;text-align:justify;text-align-last:left}
.form-ok{display:none;margin-top:18px;background:#E5F4EC;border:1px solid #BFE3CE;color:var(--ok);border-radius:var(--r-s);padding:14px 18px;font:600 14px/1.6 var(--body)}
.form-ok.show{display:block}

/* ---------- csr ---------- */
.csr-band{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;background:linear-gradient(165deg,var(--lapis-deep),var(--lapis) 140%);border-radius:calc(var(--r) + 6px);padding:52px 54px;color:#EDEFFA;box-shadow:var(--shadow-lift)}
.csr-band .eyebrow{color:#C9A265}
.csr-band .eyebrow::before{background:linear-gradient(90deg,#C9A265,#8E99D8)}
.csr-band h2{font-size:clamp(28px,3.6vw,44px);margin:16px 0 16px;color:#fff}
.csr-band>div>p{color:#C4CBEE;font-size:16px;max-width:60ch;margin-bottom:26px}
.csr-points{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.csr-points li{font-size:14.5px;color:#C4CBEE;max-width:60ch}
.csr-points b{display:block;font:800 13.5px/1.7 var(--body);color:#fff}
.csr-band .btn-ink{background:#fff;color:var(--lapis-deep)}
.csr-band .btn-ink:hover{background:var(--copper-soft)}
.csr-side{background:rgba(255,255,255,.06);border:1px solid rgba(216,221,245,.18);border-radius:var(--r);padding:30px 32px;align-self:center}
.csr-side h4{font:800 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#C9A265;margin-bottom:18px}
.csr-side ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.csr-side li{font-size:14.5px;color:#EDEFFA;padding-left:18px;position:relative}
.csr-side li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:2px;background:#C9A265}

/* ---------- whatsapp fab ---------- */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:48;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(18,22,46,.28);transition:transform .2s var(--ease)}
.wa-fab:hover{transform:scale(1.08)}
@media print{.wa-fab{display:none}}

/* ---------- fcra ---------- */
.fcra-note{margin-top:20px;background:var(--copper-soft);border:1px solid #EBD9B8;border-radius:var(--r-s);padding:16px 20px;font-size:13.5px;color:var(--copper-deep);max-width:100%}

/* ---------- share a need ---------- */
/* Resting state is on-theme (paper, hairline, slate). The platform colour only
   appears on hover/focus, so a row of four buttons does not turn a need card
   into a strip of logos. */
.proj-cta{display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap;margin-top:4px}
.share{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.share-lbl{font:800 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.sh{width:40px;height:40px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--hair-2);color:var(--slate);cursor:pointer;text-decoration:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .18s var(--ease)}
.sh svg{width:17px;height:17px;fill:currentColor;pointer-events:none}
.sh:hover{transform:translateY(-2px)}
.sh-wa:hover,.sh-wa:focus-visible{background:#1D9E4B;border-color:#1D9E4B;color:#fff}
.sh-fb:hover,.sh-fb:focus-visible{background:#1877F2;border-color:#1877F2;color:#fff}
.sh-x:hover,.sh-x:focus-visible{background:#12162E;border-color:#12162E;color:#fff}
.sh-link:hover,.sh-link:focus-visible{background:var(--lapis);border-color:var(--lapis);color:#fff}
.sh-link.done{background:#E5F4EC;border-color:#BFE3CE;color:var(--ok);transform:none}

/* ---------- upi qr ---------- */
.upi-qr{margin-top:20px;display:flex;align-items:center;gap:18px;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-s);padding:16px 18px}
.upi-qr img{width:132px;height:132px;flex:none;border-radius:8px;background:#fff}
.upi-qr p{font:500 12.5px/1.7 var(--mono);color:var(--slate)}
.upi-qr p b{display:block;font:800 13.5px/1.5 var(--body);color:var(--ink);letter-spacing:0;margin-bottom:3px}

/* ---------- faqs ---------- */
.faqs{display:grid;gap:10px;max-width:900px}
.faq{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-s);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.faq[open]{border-color:var(--hair-2);box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:17px 22px;font:800 16px/1.55 var(--body);color:var(--ink);border-radius:var(--r-s)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--mist)}
.faq[open] summary{background:transparent}
/* chevron: two borders rotated, so it inherits colour and needs no image */
.faq summary::after{content:"";flex:none;margin-left:auto;margin-top:6px;width:10px;height:10px;
  border-right:2px solid var(--lapis);border-bottom:2px solid var(--lapis);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.faq .a{padding:0 22px 20px;color:var(--slate);font-size:15px;line-height:1.78;max-width:74ch}

/* ---------- need page (/need/<slug>/) ---------- */
/* Server-rendered from the database, reusing the card classes above so a need
   reads the same whether it is on the homepage or on its own page. */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 13px/1.6 var(--body);color:var(--slate);margin-bottom:22px}
.crumbs a{color:var(--lapis);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-current]{color:var(--slate)}
.need-page{padding:132px 0 0}
.need-page .proj{margin-bottom:26px}
.updates{margin-top:8px}
.upd-list{display:grid;gap:14px;max-width:900px;margin-top:22px}
.upd{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);padding:24px 26px;
  display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:start}
.upd.no-photo{grid-template-columns:1fr}
.upd img{width:132px;height:132px;object-fit:cover;border-radius:var(--r-s);border:1px solid var(--hair)}
.upd time{display:inline-block;font:500 12px/1 var(--mono);color:var(--copper-deep);background:var(--copper-soft);
  border-radius:999px;padding:6px 12px;margin-bottom:10px}
.upd h3{font-size:19px;margin-bottom:8px}
.upd p{color:var(--slate);font-size:15px;line-height:1.75;white-space:pre-line}
.upd-empty{background:var(--card);border:1px dashed var(--hair-2);border-radius:var(--r);padding:30px 26px;
  color:var(--slate);font-size:15px;max-width:900px;margin-top:22px}
/* count chip on the homepage card, next to the share row */
.upd-count{font:700 12.5px/1 var(--body);color:var(--lapis);text-decoration:none;border-bottom:1px solid var(--lapis-soft);padding-bottom:2px}
.upd-count:hover{border-bottom-color:var(--lapis)}
/* The footer's 104px lead-in is built for the homepage, where the section above
   it is white. A need page ends on the tinted updates band, so that margin
   showed as a dead white strip; here the tint runs straight into the footer. */
body.on-need footer{margin-top:0}
.need-more{margin-top:18px}
.need-more a{font:600 14px/1.6 var(--body);color:var(--lapis);text-decoration:none}
.need-more a:hover{text-decoration:underline}

/* ---------- sticky donate bar (phones and tablets) ---------- */
/* The desktop nav carries a Donate button at all times; below 1020px that nav
   collapses into the hamburger and the only way to give is to find the section.
   This is that button, put back where the thumb already is. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:47;display:none;
  background:rgba(253,253,251,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--hair);box-shadow:0 -6px 26px rgba(18,22,46,.10);
  padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .3s var(--ease)}
.dock.show{transform:none}
.dock-in{display:flex;align-items:center;gap:14px;max-width:var(--maxw);margin:0 auto}
.dock-txt{min-width:0}
.dock-txt b{display:block;font:800 14.5px/1.35 var(--body);color:var(--ink)}
.dock-txt span{display:block;font:600 12px/1.45 var(--body);color:var(--slate)}
/* min-height, not padding: .btn sets line-height 1, so padding alone left this
   at 38px on a phone — under the 44px a thumb needs. */
.dock .btn{margin-left:auto;flex:none;padding:13px 24px;font-size:14.5px;min-height:44px}
/* the WhatsApp button steps up so the bar never lands on top of it */
.wa-fab{transition:transform .2s var(--ease),bottom .3s var(--ease)}
body.dock-on .wa-fab{bottom:calc(22px + 66px)}
@media print{.dock{display:none!important}}

/* ---------- footer ---------- */
footer{background:var(--lapis-deep);color:#D8DDF5;padding:76px 0 40px;margin-top:104px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;gap:40px;margin-bottom:52px}
.foot-grid h4{font:800 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#8E99D8;margin-bottom:18px}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-grid a{color:#C4CBEE;text-decoration:none;font-size:15px}
.foot-grid a:hover{color:#fff}
.foot-brand .brand{color:#fff}
.foot-brand .brand small{color:#C9A265}
.foot-brand p{color:#AAB3E2;font-size:14.5px;max-width:34ch;margin-top:16px}
.foot-grid address{font-style:normal;color:#AAB3E2;font-size:14.5px;line-height:1.8}
.foot-reg{border-block:1px solid rgba(216,221,245,.16);padding:18px 0;display:flex;flex-wrap:wrap;gap:8px 32px;margin-bottom:26px}
.foot-reg span{font:500 12px/1.7 var(--mono);color:#AAB3E2}
.foot-reg b{font:800 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#C9A265;margin-right:8px}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#8E99D8}

/* ---------- reveal & motion ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .chip-open::before{animation:none}
  .cause::before{transform:scaleX(1)}
  .cause::after,.cause .n{transition:none}
  .cause:hover{transform:none}
  .rv,.hero-art img{opacity:1;transform:none;transition:none}
  .btn:hover,.cause:hover{transform:none}
  .bar i{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .csr-band{grid-template-columns:1fr;padding:38px 30px}
  .hero{padding-top:104px}
  .hero-grid{grid-template-columns:1fr;gap:18px}
  /* phones: compact, perfectly centred bird with the halo hugging it */
  .hero-art{order:-1;width:-moz-fit-content;width:fit-content;margin:0 auto}
  .hero-art img{width:min(240px,58vw)}
  .hero-art video{width:min(420px,100vw)}
  .snd{right:auto;left:50%;transform:translateX(-50%);bottom:-6%;padding:8px 14px 8px 11px;font-size:12px}
  .snd:hover{transform:translateX(-50%) translateY(-2px)}
  .hero-art .halo{inset:4% -10%}
  .hero-badge{margin-bottom:20px}
  .registry ul{grid-template-columns:1fr 1fr}
  .registry li:last-child{grid-column:1/-1}
  /* minmax(0,1fr), not 1fr: a bare 1fr track is minmax(auto,1fr) and refuses to
     shrink below its content's min-content width, so a long unbroken string blew
     these tracks wider than the phone and .proj clipped the overhang away. */
  .creed-band,.donate-grid,.proj-top,.people{grid-template-columns:minmax(0,1fr)}
  .cause-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fy{grid-template-columns:minmax(0,1fr)}
  .proj-aside{padding:36px}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  /* exactly where the nav's Donate button stops being visible */
  .dock{display:block}
}
@media (max-width:600px){
  .cause-grid,.fgrid{grid-template-columns:minmax(0,1fr)}
  section.block{padding:68px 0}
  .proj-info,.ptl{padding-inline:26px}
  .pay-card,.dform{padding:28px 22px}
  .hero h1{font-size:clamp(38px,11vw,54px)}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
  .hero-badge{display:block;text-align:left;line-height:1.6;padding:10px 16px}
  .hero-badge .dot{display:inline-block;margin-right:7px;vertical-align:baseline}
  .creed-card{padding:28px 24px}
  .creed-card .gl{font-size:38px}
  .docs-reg{grid-template-columns:1fr}
  .fy{padding:22px 20px}
  .ledger b{font-size:clamp(14px,4.6vw,18px)}
  .ledger-row div{padding:12px 10px}
  /* compact cause cards on phones: smaller ghost numeral, tighter copy */
  .cause-grid{gap:10px}
  .cause{padding:22px 20px 22px}
  .cause .n{font-size:42px;top:12px;right:14px}
  .cause h3{font-size:18px;margin:0 0 8px;max-width:18ch}
  .cause h3::after{margin-top:9px}
  .cause p{font-size:14px}
  .cause:hover{transform:none}
  /* footer credentials: one aligned row per registration */
  .foot-reg{display:grid;grid-template-columns:1fr;gap:9px;padding:16px 0}
  .foot-reg b{display:inline-block;min-width:84px}
  .vault-note{padding:16px 18px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-base{flex-direction:column;align-items:flex-start}
  .field-row div span{font-size:14px}
  .registry ul{grid-template-columns:1fr 1fr;gap:12px}
  .registry li span{font-size:11.5px}
  .ledger-row div{padding:12px 10px}
  .ledger b{font-size:16px}
  .ledger span{letter-spacing:.08em}
  /* QR stacks above its caption rather than squeezing both onto one line */
  .upi-qr{flex-direction:column;align-items:flex-start;gap:14px}
  .need-page{padding-top:104px}
  .upd{grid-template-columns:1fr;gap:16px;padding:22px 20px}
  .upd img{width:100%;height:auto;max-height:260px}
  .faq summary{padding:15px 18px;font-size:15px;gap:12px}
  .faq .a{padding:0 18px 18px;font-size:14.5px}
  .dock{padding-inline:14px}
  .dock .btn{padding:12px 20px;min-height:44px}
}
/* Small phones: the bar keeps the button and the promise, drops the second line
   rather than wrapping the whole bar onto two rows. */
@media (max-width:380px){
  .dock-txt span{display:none}
  .dock-txt b{font-size:13.5px}
  .dock .btn{padding:12px 18px;font-size:14px;min-height:44px}
  .share{gap:6px}
  .sh{width:37px;height:37px}
}