/* =========================================================================
   Universal NGO platform — public stylesheet
   Every colour, font, radius and spacing value below reads a CSS variable
   that Admin > Appearance writes. The :root block here is only a fallback
   for the first render before any theme is saved.
   ========================================================================= */

:root{
  --brand:#101F4E; --brand-soft:#22397E; --accent:#F0A202; --accent-dark:#C77F00;
  --sage:#41775C;  --bg:#FBF8F3; --surface:#fff; --tint:#F3EFE7;
  --ink:#1B1D23;   --muted:#5A5F6E; --line:#E4DED2; --danger:#B3261E;
  --footer-bg:#101F4E; --footer-tx:#C9D2EA; --nav-bg:#FBF8F3; --nav-tx:#1B1D23;
  --brand-rgb:16,31,78; --accent-rgb:240,162,2; --sage-rgb:65,119,92;
  --on-brand:#fff; --on-accent:#1B1D23;
  --r:14px; --rb:999px; --wrap:1200px; --pad:76px;
  --ff-display:"Fraunces",Georgia,serif;
  --ff-body:"Public Sans","Noto Sans Devanagari",system-ui,-apple-system,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,monospace;

  --sh-1:0 1px 2px rgba(var(--brand-rgb),.06),0 2px 10px rgba(var(--brand-rgb),.05);
  --sh-2:0 10px 34px rgba(var(--brand-rgb),.11);
  --sh-3:0 26px 64px rgba(var(--brand-rgb),.18);
  --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.13;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:1.22rem}
p{margin:0 0 1em}
em{font-style:normal;color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;background:var(--brand);color:#fff;padding:12px 18px;border-radius:8px;z-index:999}
.skip:focus{left:12px;top:12px}

.eyebrow{display:inline-block;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-dark);margin-bottom:.7em}
.sec--onDark .eyebrow,.phead--media .eyebrow,.imgband .eyebrow{color:var(--accent)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.95rem;
  padding:13px 26px;border:0;border-radius:var(--rb);cursor:pointer;text-align:center;
  font-family:var(--ff-body);line-height:1.2;transition:transform .16s,box-shadow .16s,background .16s;
  white-space:nowrap}
.btn:hover{background:var(--accent-dark);text-decoration:none;transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn--lg{padding:17px 34px;font-size:1.03rem}
.btn--sm{padding:9px 18px;font-size:.85rem}
.btn--block{width:100%}
.btn--brand{background:var(--brand);color:var(--on-brand)}
.btn--brand:hover{background:var(--brand-soft)}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn--ghost:hover{background:rgba(var(--brand-rgb),.07);box-shadow:inset 0 0 0 2px currentColor}

/* ---------------- topbar + nav ---------------- */
.topbar{background:var(--brand);color:rgba(255,255,255,.8);font-size:.8rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:9px 0;flex-wrap:wrap}
.topbar__l,.topbar__r{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar a{color:rgba(255,255,255,.88);display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:#fff;text-decoration:none}
.topbar__follow{opacity:.7}
.topbar__soc{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.topbar__soc:hover{background:var(--accent);color:var(--on-accent)}
.topbar__r span:not(.topbar__follow){font-family:var(--ff-mono);font-size:.7rem;opacity:.7}

.nav{position:sticky;top:0;z-index:var(--z-nav,60);background:var(--nav-bg);color:var(--nav-tx);
  border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;gap:20px;min-height:var(--nav-h)}

.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;color:inherit;min-width:0}
.brand:hover{text-decoration:none}
.brand__img{width:auto;max-width:230px;object-fit:contain;flex:0 0 auto}
.brand__mark{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:var(--brand);
  color:var(--accent);display:grid;place-items:center;font-size:1.3rem}
.brand__text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__name{font-family:var(--ff-display);font-weight:700;font-size:1.24rem;color:var(--brand);
  white-space:nowrap}
.brand__sub{font-size:.72rem;color:var(--muted);white-space:nowrap}

.nav__links{margin-left:auto;min-width:0}
.nav__links>ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__links li{position:relative}
.nav__links a{display:block;padding:10px 13px;font-size:.94rem;font-weight:500;color:var(--nav-tx);
  border-radius:8px;white-space:nowrap;transition:color .14s}
.nav__links a:hover{color:var(--brand);text-decoration:none}
.nav__links a.is-active{color:var(--brand);font-weight:600}
.nav__links a.is-active::after{content:"";display:block;height:2.5px;border-radius:2px;
  background:var(--accent);margin:6px 13px -8px}
.nav__btn{margin-left:12px;padding:13px 26px!important;font-weight:700!important;
  color:var(--on-accent)!important;display:inline-flex!important;align-items:center;gap:9px}
.nav__btn:hover{background:var(--accent-dark);color:var(--on-accent)!important}
.nav__btn::after{display:none!important}
.caret{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.subnav{position:absolute;top:100%;left:0;min-width:220px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);padding:6px;
  list-style:none;margin:6px 0 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:.16s;z-index:70}
.has-sub:hover>.subnav,.has-sub:focus-within>.subnav{opacity:1;visibility:visible;transform:none}
.subnav a{font-weight:400;font-size:.9rem;white-space:normal}

.nav__toggle{display:none;margin-left:auto;width:46px;height:44px;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;cursor:pointer;padding:12px 11px;flex:0 0 46px}
.nav__toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;margin:0 0 5px;
  transition:transform .2s,opacity .2s}
.nav__toggle span:last-child{margin:0}

/* the drawer close button only exists inside the drawer */
.nav__close{display:none}

/* ---------------- page header (title box) ---------------- */
.phead{position:relative;isolation:isolate;background:var(--brand);color:#fff;overflow:hidden}
.phead--sm{padding:48px 0}
.phead--md{padding:88px 0}
.phead--lg{padding:132px 0}
.phead--full{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:100px 0}
.phead--center{text-align:center}
.phead--center .phead__in{margin-inline:auto}
.phead__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.phead__bg img,.phead__bg video{width:100%;height:100%;object-fit:cover;object-position:center;border:0;display:block}
.phead__bg iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%, calc(100% * 16 / 9));height:max(100%, calc(100vw * 9 / 16));
  min-width:100%;min-height:100%;border:0;pointer-events:none}
.phead__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(var(--brand-rgb),calc(var(--ov,.55) + .18)) 0%,
             rgba(var(--brand-rgb),var(--ov,.55)) 48%,rgba(0,0,0,calc(var(--ov,.55) * .55)) 100%)}
.phead__in{max-width:800px}
.phead h1{margin-bottom:.35em}
.phead__sub{font-size:1.1rem;opacity:.92;max-width:64ch;margin-bottom:0}
.phead__cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.phead--center .phead__cta{justify-content:center}

/* ---------------- section shell ---------------- */
.sec{position:relative;isolation:isolate;background-size:cover;background-position:center}
.sec--pad-none{padding:0}
.sec--pad-sm{padding:calc(var(--pad) * .45) 0}
.sec--pad-md{padding:var(--pad) 0}
.sec--pad-lg{padding:calc(var(--pad) * 1.5) 0}
.sec--center{text-align:center}
.sec--center .sec__head,.sec--center .prose{margin-inline:auto}
.sec--onDark{color:#fff}
.sec--onDark h1,.sec--onDark h2,.sec--onDark h3{color:#fff}
.sec--onDark a:not(.btn){color:var(--accent)}
.sec__scrim{position:absolute;inset:0;z-index:-1;background:rgba(var(--brand-rgb),var(--ov,.55))}
.sec__inner{position:relative}
.sec__head{max-width:74ch;margin-bottom:36px}
.sec__title{margin-bottom:.3em}
.sec__sub{font-size:1.06rem;color:var(--muted);margin:0}
.sec--onDark .sec__sub{color:rgba(255,255,255,.85)}
.sec__cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.sec--center .sec__cta{justify-content:center}

.prose{max-width:72ch}
.prose>*:last-child{margin-bottom:0}
.prose h2,.prose h3{margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1em}
.prose li{margin-bottom:.45em}
.prose blockquote{margin:1.6em 0;padding:2px 0 2px 22px;border-left:3px solid var(--accent);
  font-family:var(--ff-display);font-size:1.24rem;line-height:1.4}
.prose img{border-radius:var(--r);margin:1.4em 0}
.prose--center{text-align:center}

/* ---------------- grids & cards ---------------- */
.grid{display:grid;gap:26px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s;color:inherit}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--sh-2);text-decoration:none}
.card__media{aspect-ratio:16/10;background:var(--tint);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card--link:hover .card__media img{transform:scale(1.05)}
.card__body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.card__body h3{margin-bottom:.4em}
.card__body p{color:var(--muted);font-size:.95rem;margin-bottom:0}
.card__icon{font-size:1.7rem;display:block;margin-bottom:10px}
.card__more{margin-top:14px;font-weight:700;font-size:.88rem;color:var(--brand)}

/* ---------------- image + text split ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split--rev .split__media{order:2}
.split__media img,.split__media video,.split__media iframe{width:100%;border-radius:var(--r);
  box-shadow:var(--sh-2);aspect-ratio:4/3;object-fit:cover;border:0}
.split__cap{font-size:.82rem;color:var(--muted);margin-top:10px;font-family:var(--ff-mono)}
.split__body .sec__head{margin-bottom:20px}
.ticklist{list-style:none;padding:0;margin:20px 0 0}
.ticklist li{position:relative;padding-left:34px;margin-bottom:14px}
.ticklist li::before{content:"";position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:50%;
  background:rgba(var(--sage-rgb),.16);box-shadow:inset 0 0 0 2px var(--sage)}
.ticklist li::after{content:"";position:absolute;left:7px;top:11px;width:8px;height:4px;
  border-left:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(-45deg)}
.ticklist b{display:block}
.ticklist span{color:var(--muted);font-size:.94rem}

/* ---------------- gallery ---------------- */
.gal{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.gal--3col{grid-template-columns:repeat(3,1fr)}
.gal--2col{grid-template-columns:repeat(2,1fr)}
.gal__i{margin:0;position:relative;border-radius:var(--r);overflow:hidden;cursor:zoom-in;
  background:var(--tint);aspect-ratio:1;box-shadow:var(--sh-1)}
.gal--masonry .gal__i:nth-child(6n+1){grid-row:span 2;aspect-ratio:1/2}
.gal--masonry .gal__i:nth-child(6n+4){grid-column:span 2;aspect-ratio:2/1}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal__i:hover img{transform:scale(1.06)}
.gal__i figcaption{position:absolute;inset:auto 0 0;padding:26px 14px 12px;color:#fff;font-size:.85rem;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);opacity:0;transition:.2s}
.gal__i:hover figcaption,.gal__i:focus figcaption{opacity:1}

/* ---------------- full-bleed image band ---------------- */
.imgband{position:relative;isolation:isolate;color:#fff;overflow:hidden;text-align:center}
.imgband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.imgband__scrim{position:absolute;inset:0;z-index:-1;background:rgba(var(--brand-rgb),var(--ov,.55))}
.imgband__in{max-width:820px;margin-inline:auto}
.imgband h2{color:#fff}
.imgband .sec__cta{justify-content:center}

/* ---------------- stats ---------------- */
.statstrip{background:var(--accent)}
.statstrip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat{padding:6px}
.stat__n{font-family:var(--ff-display);font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--brand);display:inline-block}
.stat__s{font-family:var(--ff-display);font-size:clamp(2rem,4vw,3rem);color:var(--brand)}
.stat__l{display:block;margin-top:8px;font-size:.86rem;font-weight:600;color:rgba(var(--brand-rgb),.78)}

/* ---------------- myths ---------------- */
.myths{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.myth{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh-1)}
.myth p{margin:0 0 .5em}
.myth__x{color:var(--danger);font-weight:600;text-decoration:line-through;text-decoration-color:rgba(var(--brand-rgb),.25)}
.myth__x span,.myth__y span{margin-right:9px;text-decoration:none;display:inline-block}
.myth__y{color:var(--sage);font-weight:700;font-size:1.05rem}
.myth__d{color:var(--muted);font-size:.93rem;margin-bottom:0}

/* ---------------- timeline ---------------- */
.tl{list-style:none;margin:0;padding:0;max-width:760px;position:relative}
.tl::before{content:"";position:absolute;left:78px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl li{display:grid;grid-template-columns:78px 1fr;gap:28px;padding-bottom:30px;position:relative}
.tl__y{font-family:var(--ff-mono);font-size:.85rem;color:var(--accent-dark);padding-top:3px;text-align:right}
.tl li>div{position:relative}
.tl li>div::before{content:"";position:absolute;left:-35px;top:8px;width:12px;height:12px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.tl h3{margin-bottom:.25em}
.tl p{color:var(--muted);font-size:.95rem;margin:0}

/* ---------------- quotes / logos / video ---------------- */
.quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh-1)}
.quote blockquote{margin:0 0 18px;font-family:var(--ff-display);font-size:1.1rem;line-height:1.45}
.quote figcaption{display:flex;align-items:center;gap:12px}
.quote figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.quote figcaption b{display:block;font-size:.92rem}
.quote figcaption small{color:var(--muted);font-size:.8rem}
.logos{display:flex;flex-wrap:wrap;gap:34px;align-items:center;justify-content:center}
.logos img{max-height:54px;width:auto;filter:grayscale(1);opacity:.65;transition:.2s}
.logos img:hover{filter:none;opacity:1}
.vidbox{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:16/9;background:#000}
.vidbox iframe,.vidbox video{width:100%;height:100%;border:0}

/* ---------------- cases ---------------- */
.case{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-1);display:flex;flex-direction:column}
.case__media{display:block;aspect-ratio:4/3;background:var(--tint);overflow:hidden}
.case__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.case__media:hover img{transform:scale(1.05)}
.case__b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.case__b h3{margin:8px 0 .3em;font-size:1.1rem}
.case__b h3 a{color:inherit}
.case__meta{font-family:var(--ff-mono);font-size:.75rem;color:var(--muted);margin-bottom:.7em}
.case__b>p{color:var(--muted);font-size:.93rem}
.case__nums{font-size:.86rem;color:var(--muted);margin:.6em 0 1em}
.case__nums b{color:var(--brand);font-size:1.02rem}
.case__b .btn{margin-top:auto}
.pill{display:inline-block;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--rb);background:var(--tint);color:var(--muted)}
.pill--urgent{background:#FDF1D8;color:#8A5B00}
.pill--critical{background:#FBE4E1;color:var(--danger)}
.bar{height:8px;border-radius:var(--rb);background:var(--tint);overflow:hidden;margin-top:auto}
.bar span{display:block;height:100%;border-radius:var(--rb);background:var(--sage);transition:width 1s ease-out}

/* ---------------- donation chits ---------------- */
.chits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px}
.sec--center .chits{margin-inline:auto}
.chit{position:relative;display:flex;flex-direction:column;gap:5px;cursor:pointer;
  background:var(--surface);border:2px dashed var(--line);border-radius:var(--r);padding:18px 20px;
  transition:.16s}
.chit:hover{border-color:var(--accent);transform:translateY(-2px)}
.chit input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.chit:has(input:checked){border-style:solid;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}
.chit__a{font-family:var(--ff-display);font-size:1.5rem;font-weight:700;color:var(--brand);line-height:1}
.chit__t{font-size:.85rem;color:var(--muted);line-height:1.4}
.chit--custom{border-style:solid;grid-column:span 3}
.chit__in{margin-top:6px;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;background:var(--bg)}
.chits .btn{grid-column:1/-1}

/* ---------------- FAQ ---------------- */
.faq{max-width:820px;border-top:1px solid var(--line)}
.sec--center .faq{margin-inline:auto;text-align:left}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:none;border:0;padding:20px 0;font:600 1.03rem/1.4 var(--ff-body);color:inherit;
  text-align:left;cursor:pointer}
.faq__q span{flex:0 0 20px;height:20px;position:relative}
.faq__q span::before,.faq__q span::after{content:"";position:absolute;background:var(--accent);
  border-radius:2px;transition:.2s}
.faq__q span::before{inset:9px 0 9px 0;height:2px}
.faq__q span::after{inset:0 9px 0 9px;width:2px}
.faq__q[aria-expanded="true"] span::after{transform:rotate(90deg);opacity:0}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__a .prose{padding:0 0 22px;color:var(--muted);font-size:.97rem}

/* ---------------- documents ---------------- */
.docs{list-style:none;margin:0;padding:0;max-width:900px}
.doc{display:flex;align-items:center;gap:16px;padding:16px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;flex-wrap:wrap}
.doc__ic{flex:0 0 46px;height:46px;border-radius:10px;background:rgba(var(--brand-rgb),.07);
  color:var(--brand);display:grid;place-items:center;font:700 .68rem/1 var(--ff-mono);letter-spacing:.06em}
.doc__n{flex:1 1 240px;min-width:0}
.doc__n b{display:block;font-size:.98rem}
.doc__n small{color:var(--muted);font-size:.83rem}
.doc__act{display:flex;gap:8px;flex-wrap:wrap}

/* ---------------- CTA band ---------------- */
.ctaband{background:var(--brand);color:#fff}
.ctaband__in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ctaband h2{color:#fff;margin-bottom:.3em}
.ctaband p{opacity:.85;margin:0;max-width:56ch}

/* ---------------- forms ---------------- */
.f{margin-bottom:16px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f label{display:block;font-weight:600;font-size:.87rem;margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:.97rem;background:var(--surface);color:inherit}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}
.f small{display:block;color:var(--muted);font-size:.79rem;margin-top:5px}
.cform{max-width:680px;background:var(--surface);padding:28px;border:1px solid var(--line);border-radius:var(--r)}
.sec--center .cform{margin-inline:auto;text-align:left}
.note{padding:14px 18px;border-radius:10px;background:rgba(var(--sage-rgb),.12);
  border:1px solid rgba(var(--sage-rgb),.3);font-size:.92rem;margin-bottom:20px}
.note--bad{background:#FBE4E1;border-color:#F0BDB6;color:#7A1E16}

/* ---------------- footer ---------------- */
.foot{background:var(--footer-bg);color:var(--footer-tx);padding:64px 0 0;margin-top:0}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.foot h4{color:#fff;font-family:var(--ff-body);font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:16px}
.foot a{color:var(--footer-tx)}
.foot a:hover{color:var(--accent)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px;font-size:.92rem}
.foot__regs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.foot__regs span{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.06em;padding:5px 10px;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--rb)}
.foot__bar{margin-top:48px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;opacity:.75}

/* ---------------- modal (pdf + lightbox) ---------------- */
.modal{position:fixed;inset:0;z-index:var(--z-modal,400);display:none;place-items:center;padding:24px;
  background:rgba(10,14,30,.82);backdrop-filter:blur(3px)}
.modal.is-open{display:grid}
.modal__box{background:var(--surface);border-radius:var(--r);width:min(1000px,100%);
  height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-3)}
.modal__top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--line)}
.modal__top b{font-size:.98rem}
.modal__x{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted);padding:0 6px}
.modal iframe,.modal embed{flex:1;width:100%;border:0}
.modal--img .modal__box{background:transparent;box-shadow:none;height:auto;align-items:center}
.modal--img img{max-height:86vh;width:auto;border-radius:var(--r);box-shadow:var(--sh-3)}

/* ---------------- chat ---------------- */
.chat{position:fixed;bottom:22px;z-index:var(--z-chat,150);font-family:var(--ff-body)}
.chat--right{right:22px}
.chat--left{left:22px}
.chat__btn{display:flex;align-items:center;gap:10px;background:var(--chat-btn,var(--brand));color:var(--chat-btn-tx,#fff);
  border:0;border-radius:var(--rb);padding:13px 22px 13px 16px;font:700 .93rem/1 var(--ff-body);
  cursor:pointer;box-shadow:var(--sh-2)}
.chat__btn{position:relative;padding-left:16px;border:1px solid #fff}
.chat__icons{width:19px;height:19px;flex:0 0 19px;display:grid;place-items:center}
.chat__icons svg{display:block}
/* a slow halo so the button is noticed without nagging */
.chat__ping{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55);animation:chatPing 3.6s ease-out infinite}
@keyframes chatPing{
  0%   {box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}
  70%  {box-shadow:0 0 0 14px rgba(var(--accent-rgb),0)}
  100% {box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}
.chat.is-open .chat__ping,.chat__btn:hover .chat__ping{animation:none}
@media (prefers-reduced-motion:reduce){ .chat__ping{animation:none} }
.chat__win{border:1px solid #fff;box-shadow:var(--sh-3),0 0 0 1px rgba(var(--brand-rgb),.08)}
.chat__win{position:absolute;bottom:0;width:min(370px,calc(100vw - 44px));max-height:76vh;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-3);
  display:none;flex-direction:column;overflow:hidden}
.chat--right .chat__win{right:0}
.chat--left  .chat__win{left:0}
.chat__win.is-open{display:flex}
.chat__head{background:var(--chat-head,var(--brand));color:var(--chat-head-tx,#fff);padding:15px 18px;display:flex;justify-content:space-between;align-items:center}
.chat__head b{font-size:.96rem}
.chat__head small{display:block;opacity:.7;font-size:.75rem}
.chat__x{background:none;border:0;color:currentColor;font-size:1.4rem;cursor:pointer;line-height:1}
.chat__body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--chat-bg,var(--bg))}
.bubble{max-width:88%;padding:11px 15px;border-radius:15px;font-size:.9rem;line-height:1.5;
  animation:bubbleIn .22s ease-out}
.bubble--bot{background:var(--chat-bot,var(--surface));color:var(--chat-bot-tx,var(--ink));border:1px solid var(--line);border-top-left-radius:4px;align-self:flex-start}
.bubble--user{background:var(--chat-me,var(--brand));color:var(--chat-me-tx,#fff);border-top-right-radius:4px;align-self:flex-end}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px;background:var(--chat-bg,var(--bg))}
.chips:not(:empty){padding:0 18px 16px}
.chip{background:var(--chat-bot,var(--surface));border:1px solid var(--chat-chip,var(--brand));color:var(--chat-chip,var(--brand));border-radius:var(--rb);
  padding:9px 15px;font:600 .84rem/1.3 var(--ff-body);cursor:pointer;text-align:left}
.chip:hover{background:var(--chat-chip,var(--brand));color:#fff}
.chat__form{padding:0 18px 18px;background:var(--chat-bg,var(--bg));display:none}
.chat__form.is-open{display:block}
.chat__form .field{margin-bottom:9px}
.chat__form .input{padding:11px 13px;font-size:.9rem}

/* ---------------- sticky mobile donate ---------------- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky,140);display:none;gap:10px;padding:10px 14px;
  background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(var(--brand-rgb),.1)}
.stickybar .btn{flex:1}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .nav__links a{padding:10px 9px;font-size:.9rem}
  .nav__btn{margin-left:6px;padding:12px 18px!important}
  .brand__name{font-size:1.08rem}
}
@media (max-width:960px){
  .nav__toggle{display:block}
  .nav__inner{gap:12px;min-height:66px}
  .brand__img{max-height:44px}
  .brand__name{font-size:1.05rem}
  .brand__sub{font-size:.66rem}

  /* The drawer has to sit above the chat bubble (150) and the sticky donate
     bar (140), otherwise taps land on those instead of the menu links. Layer
     numbers come from Appearance so they can be re-tuned without a deploy. */
  .nav__links{position:fixed;inset:0 0 0 auto;width:min(330px,88vw);
    background:var(--drawer-bg,var(--surface));color:var(--drawer-tx,var(--ink));
    box-shadow:var(--sh-3);padding:76px 20px 32px;transform:translateX(102%);
    transition:transform .26s ease;overflow-y:auto;margin:0;
    z-index:var(--z-drawer,320);opacity:1;backdrop-filter:none}
  .nav__links a{color:var(--drawer-tx,var(--ink))}
  .nav__links.is-open{transform:none}
  .nav__links>ul{flex-direction:column;align-items:stretch;gap:0}
  .nav__links li{border-bottom:1px solid var(--line)}
  .nav__links li:last-child{border-bottom:0}
  .nav__links a{padding:15px 8px;font-size:1rem;border-radius:0}
  .nav__links a.is-active::after{display:none}
  .nav__links a.is-active{color:var(--brand);background:rgba(var(--brand-rgb),.05)}
  .subnav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--line);border-radius:0;margin:0 0 8px 10px;padding:0 0 0 8px}
  .nav__btn{margin:16px 0 0;width:100%;justify-content:center}

  /* the close button lives in the drawer, never on the desktop bar */
  .nav__close{display:flex;position:absolute;top:16px;right:16px;width:44px;height:44px;
    align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--line);
    border-radius:11px;cursor:pointer;color:var(--ink)}
  .nav__close:hover{border-color:var(--accent);color:var(--brand)}
  body.nav-open::after{content:"";position:fixed;inset:0;
    background:rgba(0,0,0,var(--drawer-dim,.42));z-index:var(--z-drawer-dim,310)}
  /* nothing floats over an open drawer */
  body.nav-open .chat,body.nav-open .stickybar{display:none!important}

  .topbar .wrap{justify-content:center;gap:12px;padding:7px 0}
  .topbar__l{gap:14px;font-size:.75rem}

  .split,.grid--3,.grid--2,.myths{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .statstrip__grid{grid-template-columns:repeat(2,1fr)}
  .chits{grid-template-columns:repeat(2,1fr)}
  .chit--custom{grid-column:span 2}
  .stickybar{display:flex}
  .foot{padding-bottom:70px}
  .chat{bottom:76px}
  .hero{padding:70px 0 96px}
}
@media (max-width:640px){
  body{font-size:16px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal--masonry .gal__i:nth-child(6n+1),.gal--masonry .gal__i:nth-child(6n+4){grid-row:auto;grid-column:auto;aspect-ratio:1}
  .f2{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:30px}
  .topbar__r{display:none}
  .phead--md{padding:60px 0}
  .phead--lg{padding:80px 0}
  .tl::before{left:52px}
  .tl li{grid-template-columns:52px 1fr;gap:20px}
  .tl li>div::before{left:-27px}
}
@media (max-width:420px){
  .chits,.statstrip__grid{grid-template-columns:1fr}
  .chit--custom{grid-column:span 1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  .nav,.topbar,.foot,.chat,.stickybar,.sec__cta,.btn{display:none!important}
  body{background:#fff;font-size:12pt}
  .sec{padding:12pt 0}
}

/* =========================================================================
   Compatibility layer — the purpose-built templates (donate, blog, contact,
   transparency, thank-you) still use these older class names. They map onto
   the same theme variables, so re-skinning still works everywhere.
   ========================================================================= */
.section{padding:var(--pad) 0;position:relative}
.section--tight{padding:calc(var(--pad) * .55) 0}
.section--chalk{background:var(--tint)}
.section--ink{background:var(--brand);color:#fff}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.pagehead{background:var(--brand);color:#fff;padding:74px 0 66px}
.pagehead h1{color:#fff;margin-bottom:.3em}
.pagehead .lead{opacity:.9;font-size:1.08rem;max-width:64ch;margin:0}
.crumbs{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.08em;opacity:.7;margin-bottom:16px}
.crumbs a{color:var(--accent)}
.lead{font-size:1.1rem;color:var(--muted);max-width:66ch}
.narrow{max-width:760px}
.center,.mx-auto{text-align:center;margin-inline:auto}
.row{display:flex;gap:14px;flex-wrap:wrap}

.hero{position:relative;isolation:isolate;color:#fff;display:flex;align-items:center;
  min-height:100vh;min-height:100svh;padding:90px 0;background:var(--brand);overflow:hidden}
.hero--full{min-height:100vh;min-height:100svh}
.hero--lg{min-height:78vh;min-height:78svh}
.hero--md{min-height:60vh;min-height:60svh}
.hero--sm{min-height:44vh;min-height:44svh}
.hero--center{text-align:center}
.hero--center .hero__inner{margin-inline:auto}
.hero--center .hero__actions{justify-content:center}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img,.hero__media video{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(var(--vzoom,1));
  width:100%;height:100%;object-fit:cover;object-position:center;border:0;display:block}
/* An iframe cannot object-fit and a YouTube player letterboxes its own frame,
   so we oversize the box on both axes AND scale it up. Between the two there is
   never a strip of background down the sides or across the top. The scale comes
   from Appearance → Hero video zoom, so it can be tuned per clip. */
.hero__media iframe{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(var(--vzoom,1.3));
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  border:0;pointer-events:none}
@supports (height:100dvh){
  .hero__media iframe{min-width:177.78dvh}
}
.hero--bare .hero__scrim{opacity:.55}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(var(--ov-rgb,var(--brand-rgb)), calc(var(--ov,.58) + .22)) 0%,
    rgba(var(--ov-rgb,var(--brand-rgb)), var(--ov,.58)) 55%,
    rgba(0,0,0, calc(var(--ov,.58) * .55)) 100%)}
.hero__inner{max-width:820px;position:relative}
.hero h1{color:#fff}
.hero__lead{font-size:1.12rem;opacity:.92;max-width:62ch}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 14px}
.hero__note{font-family:var(--ff-mono);font-size:.76rem;opacity:.7}

.formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;box-shadow:var(--sh-1)}
.field{margin-bottom:18px}
.field>label{display:block;font-weight:600;font-size:.88rem;margin-bottom:8px}
.field .hint{color:var(--muted);font-size:.8rem;margin-top:6px}
.input,.select,.textarea,.formcard input:not([type=radio]):not([type=checkbox]),
.formcard select,.formcard textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:.97rem;background:var(--surface);color:inherit}
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}

.chit__face{display:flex;flex-direction:column;gap:5px}
.chit__amt{font-family:var(--ff-display);font-size:1.45rem;font-weight:700;color:var(--brand);line-height:1}
.chit__what{font-size:.84rem;color:var(--muted);line-height:1.4}

.callout{padding:15px 18px;border-radius:10px;font-size:.93rem;border:1px solid var(--line);background:var(--tint)}
.callout--gold{background:rgba(var(--accent-rgb),.13);border-color:rgba(var(--accent-rgb),.4)}
.callout--sage{background:rgba(var(--sage-rgb),.12);border-color:rgba(var(--sage-rgb),.3)}
.alert{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:.93rem}
.alert--ok{background:rgba(var(--sage-rgb),.13);border:1px solid rgba(var(--sage-rgb),.35)}
.alert--err{background:#FBE4E1;border:1px solid #F0BDB6;color:#7A1E16}

.card__title{font-family:var(--ff-display);font-size:1.15rem;margin:0 0 .35em}
.card__text,.card__meta{color:var(--muted);font-size:.93rem}
.card__meta{font-family:var(--ff-mono);font-size:.74rem}
.card__foot{padding:0 22px 22px;margin-top:auto}

.progress{margin:14px 0}
.progress__bar{height:8px;border-radius:var(--rb);background:var(--tint);overflow:hidden}
.progress__bar>span{display:block;height:100%;background:var(--sage);border-radius:var(--rb)}
.progress__row{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);margin-top:7px}

.doclist{list-style:none;margin:0;padding:0}
.doc__icon{flex:0 0 46px;height:46px;border-radius:10px;background:rgba(var(--brand-rgb),.07);
  color:var(--brand);display:grid;place-items:center;font:700 .68rem/1 var(--ff-mono)}
.doc__main{flex:1 1 240px;min-width:0}
.doc__title{display:block;font-weight:600}
.doc__meta{color:var(--muted);font-size:.82rem}
.doc__actions{display:flex;gap:8px;flex-wrap:wrap}

.faq__item{border-bottom:1px solid var(--line)}
.mythbust{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.myth__false{color:var(--danger);font-weight:600}
.myth__true{color:var(--sage);font-weight:700}
.timeline{list-style:none;margin:0;padding:0;max-width:760px}
.timeline__item{display:grid;grid-template-columns:78px 1fr;gap:26px;padding-bottom:28px}
.timeline__year{font-family:var(--ff-mono);font-size:.85rem;color:var(--accent-dark)}
.stat__value{font-family:var(--ff-display);font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--brand)}
.stat__label{display:block;margin-top:8px;font-size:.86rem;font-weight:600;color:rgba(var(--brand-rgb),.78)}
.cta-band{background:var(--brand);color:#fff;padding:var(--pad) 0}
.cta-band h2{color:#fff}
.btn--outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.btn--outline-light:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px #fff}
.btn--xs{padding:6px 13px;font-size:.78rem}
.modal__scrim{position:absolute;inset:0}
.modal__panel{background:var(--surface);border-radius:var(--r);width:min(1000px,100%);
  height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;position:relative}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal__close{background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--muted)}
@media (max-width:960px){.mythbust{grid-template-columns:1fr}.pagehead{padding:56px 0 50px}}

/* =========================================================================
   Refinements — CTA bands, timelines, FAQ, inline amount grids
   ========================================================================= */

/* ---- call-to-action band: rounded, padded, never edge-to-edge text ---- */
.ctaband{border-radius:0}
.ctaband .ctaband__in{padding:clamp(28px,4vw,46px) clamp(24px,4vw,46px)}
.sec.ctaband{padding:0;background:transparent}
.sec.ctaband .sec__inner{padding:0}
.sec.ctaband .ctaband__in{background:var(--brand);color:#fff;border-radius:var(--r);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.sec.ctaband{padding:calc(var(--pad) * .7) 0}
.sec.ctaband h2{margin-bottom:.35em;max-width:22ch}
.sec.ctaband p{margin:0;opacity:.85;max-width:58ch;font-size:1rem}
.sec.ctaband .sec__cta{margin:0;flex:0 0 auto}
.sec.ctaband .btn--ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.sec.ctaband .btn--ghost:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px #fff}

/* legacy .cta-band used by the shipped templates */
.cta-band{border-radius:var(--r);padding:clamp(30px,4vw,52px) clamp(24px,4vw,48px);text-align:center}
.cta-band h2{max-width:26ch;margin-inline:auto}
.cta-band p{max-width:60ch;margin-inline:auto;opacity:.88}
.cta-band .hero__actions{margin-top:24px}

/* ---- timeline: the year sits in its own column, everything else in the
       second one. Without this the heading and the paragraph land in
       different grid cells and the text collapses to a thin ribbon. ---- */
.timeline{position:relative;max-width:760px}
.timeline__item{display:grid;grid-template-columns:74px minmax(0,1fr);gap:24px;
  padding-bottom:26px;align-items:start}
.timeline__item>*{grid-column:2;margin:0}
.timeline__item>.timeline__year{grid-column:1;grid-row:1 / span 99;text-align:right;
  font-family:var(--ff-mono);font-size:.82rem;color:var(--accent-dark);padding-top:4px}
.timeline__item h3{margin:0 0 .3em;font-size:1.05rem}
.timeline__item p{color:var(--muted);font-size:.95rem;margin:0}
.tl li>div>*{margin:0}
.tl li h3{margin-bottom:.3em}

/* ---- FAQ: centre the heading but keep the questions readable on the left -- */
.sec--center .faq,.faq{margin-inline:auto}
.faq__q{text-align:left}
.faq--center .faq__i{text-align:left}

/* ---- amount grid used inside a page block ---- */
.amtgrid--inline{max-width:780px}
.sec--center .amtgrid--inline{margin-inline:auto}
.amt__go{grid-column:1/-1;margin-top:4px}
@media (max-width:640px){ .amtgrid--inline .amt--own{grid-column:span 3} }

/* ---- figures in the shipped templates ---- */
.figure img{width:100%;border-radius:var(--r);box-shadow:var(--sh-2);object-fit:cover}
.figure figcaption{font-size:.82rem;color:var(--muted);margin-top:10px;font-family:var(--ff-mono)}

/* ---------------- contact form: reason picker + captcha ---------------- */
.cform{background:transparent;border:0;padding:0;max-width:none}
.cform__reason{margin-bottom:20px}
.cform__legend{display:block;font-weight:600;font-size:.83rem;margin-bottom:9px}
.pickers{display:flex;flex-wrap:wrap;gap:8px}
.picker{position:relative;cursor:pointer}
.picker input{position:absolute;opacity:0;pointer-events:none}
.picker span{display:inline-block;padding:9px 15px;border:1.5px solid var(--line);border-radius:var(--rb);
  background:var(--bg);font-size:.85rem;font-weight:600;color:var(--muted);transition:.14s;white-space:nowrap}
.picker:hover span{border-color:var(--accent);color:var(--ink)}
.picker input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.picker input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

.captcha{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin:6px 0 20px}
.captcha>label{display:block;font-weight:600;font-size:.88rem;margin-bottom:9px}
.captcha b{font-family:var(--ff-mono);background:var(--surface);padding:3px 9px;border-radius:6px;
  border:1px solid var(--line);font-size:.95rem}
.captcha__row{display:flex;gap:8px;align-items:center}
.captcha__in{max-width:150px}
.captcha__new{flex:0 0 42px;height:42px;border:1px solid var(--line);background:var(--surface);
  border-radius:10px;cursor:pointer;font-size:1.05rem;color:var(--muted);line-height:1}
.captcha__new:hover{border-color:var(--accent);color:var(--ink)}
.captcha small{display:block;color:var(--muted);font-size:.77rem;margin-top:9px}
.cform .field{margin-bottom:14px}
.cform .f2{gap:14px}

/* ---------------- contact form: reason picker + captcha ---------------- */
.cform{background:transparent;border:0;padding:0;max-width:none}
.cform__reason{margin-bottom:20px}
.cform__legend{display:block;font-weight:600;font-size:.83rem;margin-bottom:9px}
.pickers{display:flex;flex-wrap:wrap;gap:8px}
.picker{position:relative;cursor:pointer}
.picker input{position:absolute;opacity:0;pointer-events:none}
.picker span{display:inline-block;padding:9px 15px;border:1.5px solid var(--line);border-radius:var(--rb);
  background:var(--bg);font-size:.85rem;font-weight:600;color:var(--muted);transition:.14s;white-space:nowrap}
.picker:hover span{border-color:var(--accent);color:var(--ink)}
.picker input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.picker input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

.captcha{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin:6px 0 20px}
.captcha>label{display:block;font-weight:600;font-size:.88rem;margin-bottom:9px}
.captcha b{font-family:var(--ff-mono);background:var(--surface);padding:3px 9px;border-radius:6px;
  border:1px solid var(--line);font-size:.95rem}
.captcha__row{display:flex;gap:8px;align-items:center}
.captcha__in{max-width:150px}
.captcha__new{flex:0 0 42px;height:42px;border:1px solid var(--line);background:var(--surface);
  border-radius:10px;cursor:pointer;font-size:1.05rem;color:var(--muted);line-height:1}
.captcha__new:hover{border-color:var(--accent);color:var(--ink)}
.captcha small{display:block;color:var(--muted);font-size:.77rem;margin-top:9px}
.cform .field{margin-bottom:14px}
.cform .f2{gap:14px}

/* ---------------- contact form: reason picker + captcha ---------------- */
.cform{background:transparent;border:0;padding:0;max-width:none}
.cform__reason{margin-bottom:20px}
.cform__legend{display:block;font-weight:600;font-size:.83rem;margin-bottom:9px}
.pickers{display:flex;flex-wrap:wrap;gap:8px}
.picker{position:relative;cursor:pointer}
.picker input{position:absolute;opacity:0;pointer-events:none}
.picker span{display:inline-block;padding:9px 15px;border:1.5px solid var(--line);border-radius:var(--rb);
  background:var(--bg);font-size:.85rem;font-weight:600;color:var(--muted);transition:.14s;white-space:nowrap}
.picker:hover span{border-color:var(--accent);color:var(--ink)}
.picker input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.picker input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

.captcha{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin:6px 0 20px}
.captcha>label{display:block;font-weight:600;font-size:.88rem;margin-bottom:9px}
.captcha b{font-family:var(--ff-mono);background:var(--surface);padding:3px 9px;border-radius:6px;
  border:1px solid var(--line);font-size:.95rem}
.captcha__row{display:flex;gap:8px;align-items:center}
.captcha__in{max-width:150px}
.captcha__new{flex:0 0 42px;height:42px;border:1px solid var(--line);background:var(--surface);
  border-radius:10px;cursor:pointer;font-size:1.05rem;color:var(--muted);line-height:1}
.captcha__new:hover{border-color:var(--accent);color:var(--ink)}
.captcha small{display:block;color:var(--muted);font-size:.77rem;margin-top:9px}
.cform .field{margin-bottom:14px}
.cform .f2{gap:14px}

/* ---------------- contact form: reason picker + captcha ---------------- */
.cform{background:transparent;border:0;padding:0;max-width:none}
.cform__reason{margin-bottom:20px}
.cform__legend{display:block;font-weight:600;font-size:.83rem;margin-bottom:9px}
.pickers{display:flex;flex-wrap:wrap;gap:8px}
.picker{position:relative;cursor:pointer}
.picker input{position:absolute;opacity:0;pointer-events:none}
.picker span{display:inline-block;padding:9px 15px;border:1.5px solid var(--line);border-radius:var(--rb);
  background:var(--bg);font-size:.85rem;font-weight:600;color:var(--muted);transition:.14s;white-space:nowrap}
.picker:hover span{border-color:var(--accent);color:var(--ink)}
.picker input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.picker input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

.captcha{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin:6px 0 20px}
.captcha>label{display:block;font-weight:600;font-size:.88rem;margin-bottom:9px}
.captcha b{font-family:var(--ff-mono);background:var(--surface);padding:3px 9px;border-radius:6px;
  border:1px solid var(--line);font-size:.95rem}
.captcha__row{display:flex;gap:8px;align-items:center}
.captcha__in{max-width:150px}
.captcha__new{flex:0 0 42px;height:42px;border:1px solid var(--line);background:var(--surface);
  border-radius:10px;cursor:pointer;font-size:1.05rem;color:var(--muted);line-height:1}
.captcha__new:hover{border-color:var(--accent);color:var(--ink)}
.captcha small{display:block;color:var(--muted);font-size:.77rem;margin-top:9px}
.cform .field{margin-bottom:14px}
.cform .f2{gap:14px}

/* =========================================================================
   Donation page — "the giving slip"

   The form is drawn as the artifact this NGO actually hands over: a
   perforated receipt. The amount block tears away from the details block,
   the figures are set in the display face like a ledger, and the running
   total sits on the stub with the 80G stamp. One idea, carried through.
   ========================================================================= */
.give{padding-top:calc(var(--pad) * .7)}
.give__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(268px,.55fr);
  gap:clamp(18px,2.2vw,34px);align-items:start}

/* ---- the slip ---- */
.slip{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 2px);
  box-shadow:var(--sh-2);overflow:hidden;position:relative}

.slip__case{display:flex;gap:14px;align-items:center;padding:16px 18px;
  background:var(--brand);color:#fff}
.slip__case img{width:58px;height:58px;object-fit:cover;border-radius:9px;flex:0 0 58px}
.slip__caseLabel{display:block;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.slip__case b{display:block;font-size:.98rem;line-height:1.3}
.slip__case small{display:block;font-size:.79rem;opacity:.78;margin-top:3px}
.slip__case a{color:var(--accent)}

/* tabs read as index tabs on a file, not pills */
.slip__tabs{display:flex;border-bottom:1px solid var(--line);background:var(--tint)}
.slip__tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  padding:15px 12px;font:600 .88rem/1.3 var(--ff-body);color:var(--muted);transition:.15s}
.slip__tab:hover{color:var(--ink)}
.slip__tab.is-on{color:var(--brand);border-bottom-color:var(--accent);background:var(--surface)}

.slip__pane{display:block}
.slip__pane[hidden]{display:none}
.slip__sec{padding:clamp(20px,2.6vw,30px)}

/* the ruled label that heads each block of the slip */
.slip__rule{display:flex;align-items:center;gap:12px;font-family:var(--ff-mono);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.slip__rule::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- the perforation: this is the signature ---- */
.perf{position:relative;height:20px;margin:0 -1px;
  background-image:radial-gradient(circle at 5px 50%, var(--bg) 4px, transparent 4.5px);
  background-size:14px 20px;background-repeat:repeat-x;
  border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.perf::before,.perf::after{content:"";position:absolute;top:50%;width:14px;height:14px;
  border-radius:50%;background:var(--bg);transform:translateY(-50%);border:1px solid var(--line)}
.perf::before{left:-8px}
.perf::after{right:-8px}

/* ---- amount tiles ---- */
.amts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.amt{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--bg);border:1.5px solid var(--line);border-radius:calc(var(--r) - 4px);
  min-height:58px;transition:border-color .14s,background .14s,transform .12s,box-shadow .14s}
.amt:hover{border-color:var(--accent);background:var(--surface);transform:translateY(-1px)}
.amt input{position:absolute;opacity:0;pointer-events:none}
.amt__n{font-family:var(--ff-display);font-size:1.26rem;font-weight:700;color:var(--brand);
  line-height:1;white-space:nowrap;letter-spacing:-.01em}
.amt__n i{font-style:normal;font-size:.78em;opacity:.55;margin-right:1px}
.amt:has(input:checked){border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.amt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.amt--own{border-style:dashed}
.amt--own:focus-within{border-style:solid;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.amt__in{width:100%;height:100%;min-height:58px;border:0;background:transparent;text-align:center;
  font:700 1.12rem/1 var(--ff-display);color:var(--brand);padding:0 8px}
.amt__in:focus{outline:0}
.amt__in::-webkit-outer-spin-button,.amt__in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amt__in{-moz-appearance:textfield}

/* one live line instead of six static captions */
.buys{min-height:1.5em;margin:14px 0 0;font-size:.88rem;color:var(--muted);
  padding-left:14px;border-left:2px solid var(--accent)}
.buys:empty{border-left-color:transparent}

/* ---- fields ---- */
.ff{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin:0}
.fld--wide{grid-column:1/-1}
.fld label{display:block;font-weight:600;font-size:.82rem;margin-bottom:6px}
.fld label em{font-style:normal;font-weight:400;color:var(--muted);font-size:.94em}
.fld input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;background:var(--bg);color:inherit}
.fld input:focus{outline:0;border-color:var(--brand);background:var(--surface);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.11)}

.wish{margin:16px 0 4px}
.wish summary{cursor:pointer;font-size:.86rem;font-weight:600;color:var(--brand);padding:6px 0;
  list-style:none;display:flex;align-items:center;gap:8px}
.wish summary::-webkit-details-marker{display:none}
.wish summary::before{content:"+";font-family:var(--ff-mono);line-height:1}
.wish[open] summary::before{content:"–"}
.wish textarea{width:100%;margin-top:8px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:.94rem;background:var(--bg);resize:vertical}

.formerr{background:#FBE4E1;border:1px solid #F0BDB6;color:#7A1E16;padding:12px 15px;
  border-radius:10px;font-size:.9rem;margin:16px 0 0}
.slip__sec .btn--block{margin-top:18px}
.secureline{display:flex;gap:7px;align-items:center;justify-content:center;font-size:.78rem;
  color:var(--muted);margin:12px 0 0}
.secureline svg{color:var(--sage);flex:0 0 13px}

/* ---- bank ledger ---- */
.ledger{margin:0}
.ledger>div{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px dashed var(--line)}
.ledger>div:last-child{border-bottom:0}
.ledger dt{margin:0;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ledger dd{margin:0;display:flex;align-items:center;gap:10px}
.ledger dd span{font-family:var(--ff-mono);font-size:.88rem;font-weight:500;word-break:break-all;text-align:right}
.copy{background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer;
  padding:4px 9px;font:600 .68rem/1 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto}
.copy:hover{border-color:var(--brand);color:var(--brand)}
.copy.is-done{background:var(--sage);border-color:var(--sage);color:#fff}
.qr{margin:20px 0 0;text-align:center;background:var(--tint);border-radius:var(--r);padding:18px}
.qr img{width:100%;max-width:180px;margin:0 auto;background:#fff;padding:9px;border-radius:9px}
.qr figcaption{font-size:.78rem;color:var(--muted);margin-top:10px}
.banknote{font-size:.84rem;color:var(--muted);margin:18px 0}

/* ---- the stub ---- */
.stub{position:sticky;top:100px}
.stub__card{background:var(--brand);color:#fff;border-radius:calc(var(--r) + 2px);
  padding:clamp(22px,2.4vw,28px);position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.stub__card::after{content:"";position:absolute;inset:auto 0 0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--sage))}
.stub__label{display:block;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.62}
.stub__amt{font-family:var(--ff-display);font-size:clamp(2.2rem,4vw,2.9rem);line-height:1;
  margin:8px 0 6px;letter-spacing:-.02em}
.stub__buys{font-size:.86rem;opacity:.82;margin:0 0 20px;min-height:2.4em;line-height:1.5}

/* rubber stamp — tilted, outlined, deliberately imperfect */
.stub__stamp{position:absolute;top:18px;right:-6px;transform:rotate(-11deg);
  border:2px solid rgba(var(--accent-rgb),.55);border-radius:8px;padding:6px 12px;text-align:center;
  color:var(--accent);opacity:.9}
.stub__stamp span{display:block;font-family:var(--ff-display);font-size:1.16rem;font-weight:700;line-height:1}
.stub__stamp small{display:block;font-family:var(--ff-mono);font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.85;margin-top:2px}

.stub__list{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.stub__list li{position:relative;padding-left:20px;font-size:.85rem;opacity:.86;margin-bottom:10px;line-height:1.5}
.stub__list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.stub__list b{font-weight:600;opacity:1}
.stub__regs{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16)}
.stub__regs span{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.04em;
  padding:4px 8px;border:1px solid rgba(255,255,255,.22);border-radius:5px;opacity:.75}
.stub__regs b{font-weight:600}
.stub__help{font-size:.82rem;color:var(--muted);margin:16px 0 0;text-align:center;line-height:1.6}

/* ---- mobile pay bar ---- */
.paybar{position:fixed;left:0;right:0;bottom:0;z-index:140;display:none;align-items:center;gap:12px;
  padding:10px 14px;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(var(--brand-rgb),.12)}
.paybar span{display:flex;flex-direction:column;line-height:1.15}
.paybar small{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.paybar b{font-family:var(--ff-display);font-size:1.2rem;color:var(--brand)}
.paybar .btn{flex:1}
.paybar.is-hidden{display:none !important}

@media (max-width:980px){
  .give__grid{grid-template-columns:1fr}
  .stub{position:static;order:-1}
  .stub__card{display:grid;grid-template-columns:1fr auto;gap:0 18px;align-items:start}
  .stub__label,.stub__amt,.stub__buys{grid-column:1}
  .stub__buys{margin-bottom:14px}
  .stub__stamp{position:static;grid-column:2;grid-row:1/span 3;justify-self:end;align-self:center;transform:rotate(-8deg)}
  .stub__list,.stub__regs{grid-column:1/-1}
  .paybar{display:flex}
  .foot{padding-bottom:76px}
  .chat{bottom:80px}
}
@media (max-width:600px){
  .ff{grid-template-columns:1fr}
  .amts{gap:8px}
  .amt{min-height:54px}
  .amt__n,.amt__in{font-size:1.08rem}
  .amt--own{grid-column:span 3}
  .stub__list{display:none}
}

/* =========================================================================
   Donation page
   ========================================================================= */
.give{padding-top:34px;padding-bottom:56px;background:var(--bg)}

/* ---- banner ---- */
.ghero{position:relative;isolation:isolate;background:var(--brand);color:#fff;
  padding:clamp(48px,6vw,84px) 0;overflow:hidden}
.ghero__img{position:absolute;inset:0 0 0 auto;width:58%;height:100%;object-fit:cover;
  object-position:center;z-index:-2}
.ghero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgb(var(--brand-rgb)) 0%,
    rgb(var(--brand-rgb)) 38%,
    rgba(var(--brand-rgb),calc(var(--ov,.62) + .25)) 56%,
    rgba(var(--brand-rgb),calc(var(--ov,.62) * .45)) 100%)}
.ghero__in{max-width:620px}
.ghero__eyebrow{display:block;font-size:.76rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.ghero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.3rem);margin:0 0 .38em;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;line-height:1.08}
.ghero__heart{color:var(--accent);flex:0 0 auto}
.ghero__sub{font-size:1.06rem;opacity:.9;margin:0 0 28px;max-width:48ch}
.ghero__note{display:inline-flex;align-items:center;gap:13px;margin:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);
  border-radius:12px;padding:14px 22px 14px 17px;font-size:.94rem;line-height:1.5}
.ghero__note svg{color:var(--accent);flex:0 0 18px}

/* ---- layout ---- */
.give__grid{display:grid;grid-template-columns:minmax(0,1.52fr) minmax(300px,.48fr);
  gap:24px;align-items:start;margin-bottom:24px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,2.6vw,34px);box-shadow:0 1px 3px rgba(var(--brand-rgb),.05)}
.gside{display:flex;flex-direction:column;gap:24px;position:sticky;top:96px}
.gcard__h{display:flex;align-items:center;gap:13px;font-size:1.2rem;margin:0 0 22px}
.gcard__h svg{color:var(--brand);flex:0 0 auto}

/* ---- numbered steps ---- */
.gstep{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.gstep:not(:first-child){margin-top:36px}
.gstep__n{flex:0 0 38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font:700 1rem/1 var(--ff-body)}
.gstep h2{margin:0;font-size:1.35rem}

/* ---- amount tiles ---- */
.amts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.amt{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:12px;
  min-height:66px;transition:border-color .14s,box-shadow .14s,background .14s}
.amt:hover{border-color:var(--accent)}
.amt input{position:absolute;opacity:0;pointer-events:none}
.amt__n{font-family:var(--ff-display);font-size:1.42rem;font-weight:700;color:var(--brand);
  line-height:1;letter-spacing:-.01em}
.amt:has(input:checked){border-color:var(--accent);background:rgba(var(--accent-rgb),.07);
  box-shadow:0 0 0 1px var(--accent)}
.amt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}

.own{display:flex;align-items:stretch;margin-top:14px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--surface);overflow:hidden;
  transition:border-color .14s,box-shadow .14s}
.own:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.own__ic{flex:0 0 52px;display:grid;place-items:center;background:var(--tint);
  font-family:var(--ff-display);font-size:1.05rem;color:var(--muted);
  border-right:1px solid var(--line)}
.own input{flex:1;min-width:0;border:0;background:none;padding:19px 18px;font:inherit;
  font-size:.98rem;color:inherit}
.own input:focus{outline:0}
.own input::-webkit-outer-spin-button,.own input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.own input{-moz-appearance:textfield}

.buys{min-height:1.4em;margin:14px 0 0;font-size:.88rem;color:var(--muted);
  padding-left:13px;border-left:2px solid var(--accent)}
.buys:empty{border-left-color:transparent}

/* ---- fields ---- */
.ff{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fld{margin:0}
.fld--wide{grid-column:1/-1}
.fld label{display:block;font-weight:500;font-size:.84rem;margin-bottom:8px;color:var(--ink)}
.fld label b{color:#D6453C;font-weight:500}
.fld label em{font-style:normal;color:var(--muted)}
.ic{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:12px;
  background:var(--surface);overflow:hidden;transition:border-color .14s,box-shadow .14s}
.ic:focus-within{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.ic>svg{flex:0 0 50px;width:50px;height:auto;padding:0 16px;box-sizing:border-box;
  color:var(--muted);border-right:1px solid var(--line);align-self:stretch}
.ic input{flex:1;min-width:0;border:0;background:none;padding:16px 16px;font:inherit;
  font-size:.95rem;color:inherit}
.ic input:focus{outline:0}
.ic input::placeholder{color:#9AA0B0}
.fld__hint{display:block;font-size:.78rem;color:var(--muted);margin-top:8px}

/* ---- optional message ---- */
.wish{margin:22px 0 0;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.wish summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:13px;
  padding:17px 18px;font-size:.94rem;font-weight:500;color:var(--brand)}
.wish summary::-webkit-details-marker{display:none}
.wish summary svg{color:var(--brand);flex:0 0 17px}
.wish summary em{font-style:normal;color:var(--muted)}
.wish summary span{flex:1}
.wish summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);
  transition:transform .2s;flex:0 0 auto}
.wish[open] summary::after{transform:rotate(225deg) translateY(1px)}
.wish textarea{width:100%;border:0;border-top:1px solid var(--line);background:none;
  padding:16px 18px;font:inherit;font-size:.94rem;resize:vertical}
.wish textarea:focus{outline:0}

/* ---- 80G opt-in ---- */
.g80g{display:flex;align-items:flex-start;gap:13px;margin:18px 0 0;padding:16px 18px;
  border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface);
  transition:border-color .14s,background .14s}
.g80g:hover{border-color:var(--sage)}
.g80g input{position:absolute;opacity:0;pointer-events:none}
.g80g>svg{color:#C8CDD8;flex:0 0 20px;margin-top:1px;transition:color .14s}
.g80g b{display:block;font-size:.94rem;font-weight:600}
.g80g small{display:block;color:var(--muted);font-size:.84rem;margin-top:3px;line-height:1.5}
.g80g:has(input:checked){border-color:var(--sage);background:rgba(var(--sage-rgb),.06)}
.g80g:has(input:checked)>svg{color:var(--sage)}
.g80g:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}

.formerr{background:#FBE4E1;border:1px solid #F0BDB6;color:#7A1E16;padding:13px 16px;
  border-radius:12px;font-size:.9rem;margin:18px 0 0}

/* ---- the button ---- */
.gbtn{display:flex;align-items:center;gap:14px;width:100%;margin-top:24px;
  background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--rb);
  padding:20px 28px;font:700 1.08rem/1.2 var(--ff-body);cursor:pointer;
  transition:background .16s,box-shadow .16s}
.gbtn>span{flex:1;text-align:center}
.gbtn:hover{background:var(--accent-dark);box-shadow:0 6px 20px rgba(var(--accent-rgb),.35)}
.gbtn:disabled{opacity:.6;cursor:wait}
.gbtn__arrow{transition:transform .18s;flex:0 0 auto}
.gbtn:hover .gbtn__arrow{transform:translateX(4px)}
.gsafe{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.84rem;
  color:var(--muted);margin:16px 0 0}
.gsafe svg{color:#B4BAC7}

/* ---- bank card: label above value, like a passbook ---- */
.brows{margin:0}
.brows>div{padding:0 0 15px}
.brows>div:last-child{padding-bottom:0}
.brows dt{margin:0 0 3px;font-size:.83rem;color:var(--muted);font-weight:500}
.brows dd{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.brows dd span{font-size:.95rem;font-weight:500;color:var(--ink);word-break:break-all}
.copy{background:none;border:0;cursor:pointer;padding:2px 4px;font:600 .68rem/1 var(--ff-body);
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);flex:0 0 auto;opacity:0;
  transition:opacity .14s,color .14s}
.brows>div:hover .copy,.copy:focus-visible{opacity:1}
.copy:hover{color:var(--brand)}
.copy.is-done{opacity:1;color:var(--sage)}
.gqr{margin:18px 0 0;text-align:center;padding-top:22px;border-top:1px dashed var(--line)}
.gqr figcaption{font-size:.86rem;color:var(--muted);margin-bottom:16px}
.gqr img{width:100%;max-width:172px;margin:0 auto;background:#fff;padding:8px;
  border:1px solid var(--line);border-radius:8px}
.gapps{font-size:.79rem;color:var(--muted);text-align:center;margin:16px 0 0;line-height:1.5}

/* ---- trust list ---- */
.glist{list-style:none;margin:0;padding:0}
.glist li{position:relative;padding-left:34px;margin-bottom:20px}
.glist li:last-child{margin-bottom:0}
.glist li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:50%;background:var(--sage)}
.glist li::after{content:"";position:absolute;left:7px;top:8px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.glist b{display:block;font-size:.95rem;font-weight:600}
.glist span{display:block;color:var(--muted);font-size:.86rem;margin-top:3px;line-height:1.5}
.gregs{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line)}
.gregs span{font-family:var(--ff-mono);font-size:.65rem;padding:5px 9px;
  border:1px solid var(--line);border-radius:5px;color:var(--muted)}

/* ---- trust strip ---- */
.gtrust{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.gtrust__i{display:flex;align-items:center;gap:16px;padding:26px clamp(18px,2vw,28px);
  border-right:1px solid var(--line)}
.gtrust__i:last-child{border-right:0}
.gtrust__ic{flex:0 0 52px;height:52px;border-radius:50%;background:rgba(var(--accent-rgb),.13);
  color:var(--brand);display:grid;place-items:center}
.gtrust b{display:block;font-size:.95rem;font-weight:600}
.gtrust small{display:block;color:var(--muted);font-size:.82rem;margin-top:4px;line-height:1.45}

/* ---- mobile pay bar ---- */
.paybar{position:fixed;left:0;right:0;bottom:0;z-index:140;display:none;align-items:center;
  gap:12px;padding:10px 14px;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(var(--brand-rgb),.12)}
.paybar span{display:flex;flex-direction:column;line-height:1.15}
.paybar small{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.paybar b{font-family:var(--ff-display);font-size:1.22rem;color:var(--brand)}
.paybar .btn{flex:1}

@media (max-width:1080px){
  .give__grid{grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:20px}
}
@media (max-width:980px){
  .give__grid{grid-template-columns:1fr}
  .gside{position:static}
  .gtrust{grid-template-columns:repeat(2,1fr)}
  .gtrust__i:nth-child(2n){border-right:0}
  .gtrust__i:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .paybar{display:flex}
  .foot{padding-bottom:76px}
  .chat{bottom:80px}
  .ghero__img{width:100%;opacity:.4}
  .ghero__scrim{background:linear-gradient(180deg,
    rgba(var(--brand-rgb),.92) 0%,rgba(var(--brand-rgb),.82) 100%)}
}
@media (max-width:640px){
  .ghero{padding:40px 0}
  .ghero h1{font-size:1.95rem;gap:12px}
  .ghero__heart{width:26px;height:26px}
  .ghero__sub{font-size:.98rem;margin-bottom:22px}
  .ghero__note{padding:13px 16px;font-size:.87rem;align-items:flex-start;display:flex}
  .ff{grid-template-columns:1fr;gap:16px}
  .amts{gap:10px}
  .amt{min-height:58px}
  .amt__n{font-size:1.2rem}
  .gstep__n{flex:0 0 32px;height:32px;font-size:.9rem}
  .gstep h2{font-size:1.15rem}
  .gtrust{grid-template-columns:1fr}
  .gtrust__i{border-right:0;border-bottom:1px solid var(--line);padding:20px}
  .gtrust__i:last-child{border-bottom:0}
  .copy{opacity:1}
}

/* =======================================================================
   Donor accounts, receipts, thank-you, header sign-in, contact page.
   Everything below is mobile-first: the phone layout is the real design,
   the desktop rules only widen it.
   ===================================================================== */

/* ---------------- sign in / sign up in the header ---------------- */
.nav__acct{display:inline-flex;align-items:center;gap:8px;margin-left:10px}
.nav__acct .btn--sm{white-space:nowrap}
.acctchip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 7px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-size:.87rem;font-weight:600;color:var(--ink)}
.acctchip:hover{border-color:var(--accent);text-decoration:none}
.acctchip__av{width:27px;height:27px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:0 0 27px}

/* ---------------- auth screens ---------------- */
.authwrap{padding:34px 0 70px;background:var(--tint)}
.authcard{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-2);max-width:960px;margin-inline:auto}
.authcard--single{grid-template-columns:1fr;max-width:520px}
.authcard__side{background:var(--brand);color:#fff;padding:38px 34px}
.authcard__side h1{color:#fff;font-size:1.7rem;margin:8px 0 20px}
.authcard__side .eyebrow{color:var(--accent)}
.authcard__pts{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.authcard__pts li{display:grid;gap:3px;padding-left:22px;position:relative;font-size:.92rem}
.authcard__pts li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.authcard__pts b{font-size:.96rem}
.authcard__pts span{opacity:.82;line-height:1.5}
.authcard__fine{font-size:.78rem;opacity:.72;margin-top:24px;line-height:1.6}
.authcard__main{padding:38px 34px}
.authcard__main h2{font-size:1.45rem;margin:0 0 6px}
.authcard__lead{color:var(--muted);font-size:.94rem;margin:0 0 22px}
.authform .field{margin-bottom:16px}
.authform .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.otpbox{text-align:center;letter-spacing:.5em;font-family:var(--ff-mono);font-size:1.3rem;font-weight:600;padding:14px}
.linkbtn{background:none;border:0;color:var(--brand);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
.alert{border-radius:11px;padding:13px 16px;font-size:.92rem;margin-bottom:18px;line-height:1.5}
.alert--ok{background:#EAF6EE;border:1px solid #A9D8BB;color:#1E5B34}
.alert--err{background:#FDF0EF;border:1px solid #E7B4AF;color:#8A2B22}
.alert--warn{background:#FFF7E6;border:1px solid #E9C87A;color:#7A5410}

/* ---------------- account dashboard ---------------- */
.acc{padding:26px 0 64px;background:var(--tint);min-height:60vh}
.acc__top{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.acc__h1{font-size:1.75rem;margin:6px 0 4px}
.acc__lead{color:var(--muted);font-size:.94rem;margin:0}
.acc__who{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:8px 18px 8px 8px}
.acc__who small{display:block;color:var(--muted);font-size:.78rem;font-family:var(--ff-mono)}
.acc__avatar{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:700;flex:0 0 38px}
.acc__tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:22px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.acc__tabs::-webkit-scrollbar{display:none}
.acc__tabs a{padding:12px 15px;font-size:.92rem;font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:2.5px solid transparent}
.acc__tabs a:hover{color:var(--brand);text-decoration:none}
.acc__tabs a.is-active{color:var(--brand);border-bottom-color:var(--accent)}
.acc__tabs .acc__out{margin-left:auto;color:var(--danger)}

.acc__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.acc__stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.acc__stat span{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.acc__stat b{display:block;font-family:var(--ff-display);font-size:1.5rem;color:var(--brand);line-height:1.15;margin-top:4px}
.acc__stat small{display:block;color:var(--muted);font-size:.75rem;font-family:var(--ff-mono)}

.acc__filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:20px}
.accf{display:flex;flex-direction:column;gap:6px;min-width:130px}
.accf--grow{flex:1 1 240px}
.accf--sm{width:110px;min-width:100px}
.accf--btn{flex-direction:row;gap:8px;align-items:center}
.accf label{font-size:.78rem;font-weight:600;color:var(--muted)}

.acc__tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:auto}
.acc__table{width:100%;border-collapse:collapse;font-size:.93rem}
.acc__table th{text-align:left;padding:13px 16px;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);background:var(--tint);border-bottom:1px solid var(--line);white-space:nowrap}
.acc__table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.acc__table tr:last-child td{border-bottom:0}
.ta-r{text-align:right}
.mono{font-family:var(--ff-mono);font-size:.86rem}
.acc__cards{display:none;list-style:none;margin:0;padding:0;gap:12px}
.acc__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px}
.acc__cardtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.acc__amt{font-family:var(--ff-display);font-size:1.45rem;font-weight:700;color:var(--brand);line-height:1}
.acc__date{color:var(--muted);font-size:.82rem}
.acc__for{margin:8px 0 2px;font-size:.92rem}
.acc__rno{color:var(--muted);margin:0 0 13px}
.acc__empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:44px 24px;text-align:center}
.acc__empty h3{margin:0 0 8px}
.acc__empty p{color:var(--muted);max-width:44ch;margin:0 auto 20px}
.acc__grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.acc__panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.acc__panel h3{margin:0 0 18px;font-size:1.15rem}
.pill--warn{background:#FFF3DA;color:#7A5410;border-radius:999px;padding:2px 8px;font-size:.7rem;font-weight:700}

/* ---------------- thank-you ---------------- */
.tyx{padding:34px 0 70px;background:var(--tint)}
.tyx .wrap{max-width:760px}
.tyx__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:38px 32px;box-shadow:var(--sh-2);text-align:center}
.tyx__tick{width:66px;height:66px;border-radius:50%;background:#EAF6EE;color:#2E8B57;
  display:grid;place-items:center;margin:0 auto 18px}
.tyx__card h1{font-size:1.85rem;margin:0 0 10px}
.tyx__lead{color:var(--muted);max-width:52ch;margin:0 auto 24px;font-size:1rem}
.tyx__rows{display:grid;gap:0;text-align:left;border:1px solid var(--line);border-radius:12px;margin:0 0 22px;overflow:hidden}
.tyx__rows>div{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}
.tyx__rows>div:last-child{border-bottom:0}
.tyx__rows dt{color:var(--muted);font-size:.88rem;margin:0}
.tyx__rows dd{margin:0;font-weight:600;font-size:.92rem;text-align:right}
.tyx__fine{color:var(--muted);font-size:.82rem;margin:12px 0 0}
.tyx__acct{margin-top:30px;padding-top:26px;border-top:1px dashed var(--line)}
.tyx__acct h3{margin:0 0 8px;font-size:1.15rem}
.tyx__acct p{color:var(--muted);font-size:.93rem;max-width:48ch;margin:0 auto 18px}
.tyx__acctbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tyx__next{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.tyx__next p{margin:0 0 18px;font-size:.95rem}
.tyx__wish{margin:0 0 18px;border-left:3px solid var(--accent);padding:10px 16px;background:var(--tint);
  font-family:var(--ff-display);font-size:1.1rem;color:var(--brand)}
.tyx__wish cite{display:block;font-family:var(--ff-body);font-size:.8rem;color:var(--muted);font-style:normal;margin-top:8px}

/* ---------------- contact page, rebuilt ---------------- */
.cx{padding:0 0 60px;background:var(--tint)}
.cx__quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:-34px 0 26px;position:relative;z-index:2}
.cx__q{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh-1)}
.cx__q:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.cx__q{transition:.18s}
.cx__qic{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(var(--brand-rgb),.08);color:var(--brand)}
.cx__q b{display:block;font-size:.95rem;color:var(--ink)}
.cx__q small{display:block;color:var(--muted);font-size:.82rem;word-break:break-word}
.cx__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:22px;align-items:start}
.cx__panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh-1)}
.cx__panel h2{font-size:1.35rem;margin:0 0 6px}
.cx__panel .sub{color:var(--muted);font-size:.93rem;margin:0 0 22px}
.cx__side{display:grid;gap:16px}
.cx__box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.cx__box h3{font-size:1.05rem;margin:0 0 10px}
.cx__box p{font-size:.92rem;color:var(--muted);margin:0 0 12px;line-height:1.6}
.cx__rows{display:grid;gap:2px;margin:0 0 14px}
.cx__row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.cx__row:last-child{border-bottom:0}
.cx__row b{flex:0 0 78px;color:var(--muted);font-weight:600;font-size:.82rem}
.cx__hours{font-family:var(--ff-mono);font-size:.8rem;color:var(--muted)}
.cx__map{border:0;width:100%;height:260px;border-radius:var(--r);display:block}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .authcard{grid-template-columns:1fr}
  .authcard__side{padding:26px 22px}
  .authcard__side h1{font-size:1.4rem;margin-bottom:14px}
  .authcard__pts{gap:11px}
  .acc__grid2{grid-template-columns:1fr}
  .cx__grid{grid-template-columns:1fr}
  .cx__quick{grid-template-columns:1fr;margin-top:-22px}
}
@media (max-width:768px){
  .nav__acct{margin:14px 0 0;width:100%;flex-direction:column;align-items:stretch}
  .nav__acct .btn{width:100%;justify-content:center}
}
@media (max-width:640px){
  .authwrap{padding:0 0 40px}
  .authcard{border-radius:14px}
  .authcard__main{padding:26px 20px 30px}
  .authcard__side{padding:24px 20px}
  .authform .f2{grid-template-columns:1fr;gap:0}
  .acc{padding-top:16px}
  .acc__top{align-items:flex-start;flex-direction:column;gap:12px}
  .acc__h1{font-size:1.45rem}
  .acc__stats{grid-template-columns:1fr 1fr;gap:10px}
  .acc__stats .acc__stat:last-child{grid-column:span 2}
  .acc__filters{padding:14px;gap:10px}
  .accf,.accf--sm{width:100%;min-width:0}
  .accf--sm{width:calc(50% - 5px)}
  .accf--btn{width:100%}
  .accf--btn .btn{flex:1}
  .acc__tablewrap{display:none}
  .acc__cards{display:grid}
  .acc__panel{padding:20px 18px}
  .tyx{padding-top:0}
  .tyx__card{padding:30px 20px}
  .tyx__card h1{font-size:1.5rem}
  .tyx__next{padding:20px 18px}
  .tyx__acctbtns .btn{width:100%}
  .cx__panel,.cx__box{padding:20px 18px}
}

/* footer social row + nav socials in the drawer + test banner */
.foot__soc{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;list-style:none;padding:0}
.foot__soc li{margin:0}
.foot__soc a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);font-size:.82rem;line-height:1}
.foot__soc a:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent);text-decoration:none}
.nav__soc{display:none}
.testbanner{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky,140);
  background:#7A5410;color:#fff;font-size:.78rem;text-align:center;padding:7px 12px;
  font-family:var(--ff-mono);letter-spacing:.02em}
body.nav-open .testbanner{display:none}
@media (max-width:960px){
  .nav__soc{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
  .nav__soc a{font-size:.82rem;padding:8px 14px;border:1px solid var(--line);border-radius:999px;
    color:var(--drawer-tx,var(--ink))}
  .foot__soc a{font-size:.86rem;padding:9px 15px}
}

/* ---------------- chat: typing dots, free-text bar, roomier bubbles ------- */
.bubble__p{display:block}
.bubble__p+.bubble__p{margin-top:8px}
.bubble--typing{display:flex;gap:5px;align-items:center;padding:14px 16px!important;width:max-content}
.bubble--typing i{width:6px;height:6px;border-radius:50%;background:var(--chat-dot,var(--accent));
  display:block;animation:cdot 1.1s infinite ease-in-out}
.bubble--typing i:nth-child(2){animation-delay:.16s}
.bubble--typing i:nth-child(3){animation-delay:.32s}
@keyframes cdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.bubble--typing i{animation:none;opacity:.6}}
.chip--go{display:inline-flex;align-items:center;text-decoration:none}
.chat__ask{display:flex;gap:8px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);
  background:var(--chat-bg,var(--bg))}
.chat__ask.is-dim{opacity:.45;pointer-events:none}
.chat__ask.is-busy .chat__asksend{opacity:.5;pointer-events:none}
.chat__askin{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:999px;
  font:inherit;font-size:.9rem;background:var(--surface);color:var(--ink)}
.chat__askin:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}
.chat__asksend{flex:0 0 40px;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:var(--chat-chip,var(--brand));color:#fff;display:grid;place-items:center}

/* contact form on a phone: bigger taps, no squeeze, full-width controls */
@media (max-width:640px){
  .cform .f2{grid-template-columns:1fr;gap:0}
  .cform .field{margin-bottom:15px}
  .cform .input,.cform .textarea{padding:14px 15px;font-size:1rem;border-radius:12px}
  .pickers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .picker span{display:block;text-align:center;padding:12px 10px;font-size:.85rem;line-height:1.3;border-radius:12px}
  .captcha{padding:16px}
  .captcha__in{max-width:none;flex:1}
  .captcha__row{gap:10px}
  .cx__quick{gap:10px}
  .cx__q{padding:14px 16px}
  .cx__row{flex-direction:column;gap:3px}
  .cx__row b{flex:none}
  .cx__map{height:220px}
}

/* case detail: the photo gets its own clean band, never buried under a scrim */
.casehero{margin:0;padding:0 0 6px;background:var(--tint)}
.casehero img{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:var(--r);
  box-shadow:var(--sh-2)}
.casehero figcaption{color:var(--muted);font-size:.85rem;margin-top:10px;font-family:var(--ff-mono)}
@media (max-width:640px){
  .casehero img{max-height:290px;border-radius:12px}
  .casehero figcaption{font-size:.78rem}
}

/* =======================================================================
   THE HAMBURGER FIX.
   .nav is position:sticky with a z-index, which makes it a stacking context.
   Everything inside it — including the drawer — is therefore trapped at the
   header's own level no matter how high the drawer's own z-index goes. The
   dimming layer lives on <body>, outside that context, so it was sitting on
   top of the drawer and swallowing every tap. Links looked dead because the
   click never reached them.

   The cure is to lift the whole header above the dimmer while the menu is
   open, so the drawer inside it comes along with it.
   ===================================================================== */
body.nav-open .nav{z-index:var(--z-drawer,320)}
body.nav-open .nav__links{pointer-events:auto}
.nav__links a{position:relative;z-index:1}

/* sign in / create account tabs on the auth card */
.authtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px}
.authtabs a{padding:11px 16px;font-size:.93rem;font-weight:600;color:var(--muted);border-bottom:2.5px solid transparent}
.authtabs a:hover{color:var(--brand);text-decoration:none}
.authtabs a.is-active{color:var(--brand);border-bottom-color:var(--accent)}

/* ---------------- one Sign in / Sign up control, sitting after Donate ----- */
.nav__acct{order:2}
.acctmenu{position:relative}
.acctmenu>summary{list-style:none;cursor:pointer}
.acctmenu>summary::-webkit-details-marker{display:none}
.acctchip--in{gap:7px;padding:9px 14px}
.acctmenu[open]>summary .caret{transform:rotate(180deg)}
.acctchip .caret{border-top-color:currentColor;transition:transform .16s}
.acctmenu__pop{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;z-index:5;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-3);
  padding:6px;display:grid;gap:2px}
.acctmenu__pop a{display:block;padding:10px 13px;border-radius:9px;font-size:.92rem;color:var(--ink)}
.acctmenu__pop a:hover{background:var(--tint);text-decoration:none}
.acctmenu__pop b{display:block;font-size:.93rem}
.acctmenu__pop small{display:block;color:var(--muted);font-size:.78rem;margin-top:1px}
.acctmenu__out{color:var(--danger)!important;border-top:1px solid var(--line);border-radius:0;margin-top:4px}
@media (max-width:960px){
  /* in the drawer it becomes a plain pair of full-width rows, always open */
  .nav__acct{order:0;margin:18px 0 0;width:100%}
  .acctmenu>summary{display:none}
  .acctmenu__pop{position:static;min-width:0;box-shadow:none;border-color:var(--line);padding:4px}
  .acctmenu__pop a{padding:13px}
}
@media (min-width:961px){
  .nav__links{display:flex;align-items:center;gap:8px}
  .nav__links>ul{flex:0 1 auto}
}

/* =======================================================================
   Phone width guards.
   A single element wider than the screen makes the whole page scroll
   sideways and the browser zooms out to fit it — which is what made the
   contact page look squeezed. Rather than hunt one culprit, these rules
   stop anything from being able to cause it.
   ===================================================================== */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,table,pre{max-width:100%}
@media (max-width:640px){
  .wrap{padding-left:16px;padding-right:16px;width:100%;box-sizing:border-box}
  /* long unbroken strings — an email address, an IFSC, a UPI id — are the
     usual thing pushing a container past the screen edge */
  .cx__q small,.cx__row span,.cx__box p,.foot a,.topbar a{overflow-wrap:anywhere;word-break:break-word}
  .cx__grid,.cx__side,.cx__panel,.cx__box,.cx__quick{min-width:0;max-width:100%}
  .cx__panel,.cx__box{box-sizing:border-box}
  .cx__map{width:100%;height:210px}
  .cx__q{min-width:0}
  .cx__q span:last-child{min-width:0;flex:1}
  /* the form controls inside, too */
  .cform,.cform .input,.cform .textarea,.captcha{max-width:100%;box-sizing:border-box}
  .acc__filters,.accf,.acc__tablewrap,.acc__panel{max-width:100%;box-sizing:border-box}
  .authcard,.authcard__main,.authcard__side{max-width:100%;box-sizing:border-box}
}