/* Layout concept: a campaign broadsheet — bright poster-green hero stage, then alternating
   dark field / light field bands on a 1180px measure, each opened by a lime rule and a
   two-digit index. All type, colour and copy come from the site record below. */
:root{
  --ink:#03140A; --field:#07220F; --raise:#0D3119; --edge:#144723;
  --line:rgba(205,234,43,.22); --hair:rgba(240,248,240,.12);
  --fg:#F0F7F0; --muted:#9FC2A8;
  --lime:#CDEA2B; --limefill:#CDEA2B; --on-lime:#06230E; --emerald:#45C978;
  --g1:#15A044; --g2:#0D7B33; --g3:#0A5A27; --glow:#31C765;
  --shadow:0 30px 70px -34px rgba(0,0,0,.9);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --script:"Newsreader",Georgia,"Times New Roman",serif;
  --ts:1; --wide:1180px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ink:#F4F7F1; --field:#FFFFFF; --raise:#EAF1E6; --edge:#D8E5D3;
    --line:rgba(82,112,10,.32); --hair:rgba(6,35,14,.13);
    --fg:#06230E; --muted:#4A6552; --emerald:#15713C; --lime:#3C5406;
    --shadow:0 26px 56px -34px rgba(6,35,14,.4);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ink:#F4F7F1; --field:#FFFFFF; --raise:#EAF1E6; --edge:#D8E5D3;
  --line:rgba(82,112,10,.32); --hair:rgba(6,35,14,.13);
  --fg:#06230E; --muted:#4A6552; --emerald:#15713C; --lime:#3C5406;
  --shadow:0 26px 56px -34px rgba(6,35,14,.4);
  color-scheme:light;
}
.limefill{background:var(--limefill); color:var(--on-lime)}

*{box-sizing:border-box}
body{margin:0; background:var(--ink); color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.66; letter-spacing:-.003em; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--lime); outline-offset:3px}
::selection{background:var(--lime); color:var(--on-lime)}

h1,h2,h3{font-family:var(--display); font-weight:800; margin:0; line-height:.9; letter-spacing:-.005em; text-wrap:balance; text-transform:uppercase}
h1{font-size:clamp(calc(3.1rem*var(--ts)),calc(8.6vw*var(--ts)),calc(6.4rem*var(--ts))); font-weight:900}
h2{font-size:clamp(calc(2.4rem*var(--ts)),calc(5.6vw*var(--ts)),calc(4.1rem*var(--ts)))}
h3{font-size:clamp(calc(1.5rem*var(--ts)),calc(2.8vw*var(--ts)),calc(2.05rem*var(--ts))); font-weight:700; line-height:.95}
p{margin:0}
.wrap{width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:22px}
.section{padding-block:clamp(66px,9vw,124px)}
.fieldbg{background:var(--field); border-block:1px solid var(--hair)}
.idx{display:flex; align-items:baseline; gap:14px; margin-bottom:20px; font-family:var(--body); font-weight:800; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--lime)}
.idx::after{content:""; height:1px; flex:1; background:var(--line); align-self:center}
.lede{font-size:clamp(1.03rem,1.7vw,1.2rem); color:var(--muted); max-width:60ch; line-height:1.72}

#prog{position:fixed; top:0; left:0; height:3px; width:0; background:var(--limefill); z-index:70}
nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:60; background:color-mix(in srgb,var(--ink) 88%,transparent); backdrop-filter:blur(16px); border-bottom:1px solid var(--hair)}
.navin{display:flex; align-items:center; gap:20px; padding-block:13px}
.mark{text-decoration:none; flex:none; display:flex; align-items:center; gap:11px}
.markbadge{width:38px; height:38px; display:grid; place-items:center; flex:none; font-family:var(--display); font-weight:900; font-size:1.35rem; letter-spacing:.02em}
.mark b{display:block; font-family:var(--display); font-weight:800; font-size:1.18rem; letter-spacing:-.01em; text-transform:uppercase; line-height:1.1}
.mark small{display:block; font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--lime); margin-top:2px}
.navlinks{display:flex; gap:28px; margin-left:auto; align-items:center}
.navlinks a{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding-block:5px; border-bottom:2px solid transparent; transition:color .2s,border-color .2s}
.navlinks a:hover,.navlinks a.on{color:var(--fg); border-color:var(--lime)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; font-family:var(--body); font-weight:800; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; padding:15px 25px; border:1px solid transparent; text-decoration:none; transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s, color .2s, border-color .2s}
.btn-fill{background:var(--limefill); color:var(--on-lime)}
.btn-fill:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px color-mix(in srgb,var(--limefill) 70%,transparent)}
.btn-line{border-color:var(--line); color:var(--fg); background:transparent}
.btn-line:hover{border-color:var(--lime); color:var(--lime); transform:translateY(-2px)}
.btn-sm{padding:12px 18px; font-size:.67rem}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid var(--hair); color:var(--fg); padding:10px 13px; cursor:pointer; font:inherit; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700}

/* hero stage */
.stage{position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; min-height:clamp(540px,78vh,740px); color:#fff;
  background:radial-gradient(58% 64% at 76% 20%, var(--glow) 0%, transparent 60%), radial-gradient(50% 60% at 6% 92%, #0A4D22 0%, transparent 64%), linear-gradient(142deg,var(--g1) 0%,var(--g2) 48%,var(--g3) 100%)}
.stage::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(3,38,16,.82) 0%, rgba(3,38,16,.62) 34%, rgba(3,38,16,0) 66%)}
.slides{position:relative; z-index:2; flex:1; display:grid}
.slide{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .85s ease, visibility .85s; display:flex; align-items:center}
.slide.on{opacity:1; visibility:visible}
.slide-in{width:100%; padding-block:clamp(40px,6vw,74px)}
.slide-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(26px,5vw,58px); align-items:center}
.media{position:relative; display:flex; justify-content:center}
.media img{width:100%; max-width:430px; border:5px solid rgba(255,255,255,.92); box-shadow:0 40px 80px -34px rgba(0,0,0,.72)}
.media .photo{aspect-ratio:1/1.18; object-fit:cover; object-position:50% 22%}
.slide.on .media{animation:drift 12s ease-out forwards}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.045)}}

/* every slide enters with its own transition, set by data-fx */
.slide.on[data-fx="zoom"] .media img{animation:fxZoom .95s cubic-bezier(.17,.84,.3,1) both}
@keyframes fxZoom{from{opacity:0; transform:translateY(26px) scale(.93)}to{opacity:1; transform:none}}
.slide.on[data-fx="slide"] .media img{animation:fxSlide .9s cubic-bezier(.2,.8,.3,1) both}
@keyframes fxSlide{from{opacity:0; transform:translateX(16%)}to{opacity:1; transform:none}}
.slide.on[data-fx="slide"] .slide-copy{animation:fxSlideCopy .9s cubic-bezier(.2,.8,.3,1) both}
@keyframes fxSlideCopy{from{opacity:.25; transform:translateX(-7%)}to{opacity:1; transform:none}}
.slide.on[data-fx="wipe"] .media img{animation:fxWipe 1.05s cubic-bezier(.2,.8,.3,1) both}
@keyframes fxWipe{from{clip-path:inset(0 0 100% 0); transform:scale(1.04)}to{clip-path:inset(0 0 0 0); transform:none}}
.slide.on[data-fx="blur"] .media img{animation:fxBlur 1s ease both}
@keyframes fxBlur{from{opacity:0; filter:blur(20px) saturate(1.5); transform:scale(1.08)}to{opacity:1; filter:none; transform:none}}
.slide[data-fx="tilt"] .media{perspective:1400px}
.slide.on[data-fx="tilt"] .media img{animation:fxTilt 1s cubic-bezier(.2,.8,.3,1) both; transform-origin:left center}
@keyframes fxTilt{from{opacity:0; transform:rotateY(32deg) translateX(10%)}to{opacity:1; transform:none}}
.kicker{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:20px; font-family:var(--body); font-size:.66rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.84)}
.kicker .pill{padding:4px 10px; border:1px solid rgba(255,255,255,.46); color:#fff}
.kicker .yr{padding:4px 11px; font-weight:900; letter-spacing:.09em}
.stage h1{color:#fff; text-shadow:0 2px 24px rgba(4,40,16,.3)}
.slide h1 span{display:block; overflow:hidden}
.slide h1 i{display:block; font-style:normal; transform:translateY(105%)}
.slide.on h1 i{animation:rise .85s cubic-bezier(.16,.84,.26,1) forwards}
.slide.on h1 span:nth-child(2) i{animation-delay:.08s}
.slide.on h1 span:nth-child(3) i{animation-delay:.16s}
@keyframes rise{to{transform:translateY(0)}}
.slide h1 em{font-family:var(--script); font-style:italic; font-weight:400; text-transform:none; letter-spacing:-.015em; color:var(--limefill)}
.slide .sub{margin-top:22px; font-size:clamp(1rem,1.6vw,1.16rem); color:rgba(255,255,255,.9); max-width:44ch; line-height:1.68; opacity:0}
.slide.on .sub{animation:soft .8s .32s cubic-bezier(.2,.8,.3,1) forwards}
.slide .acts{display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; opacity:0}
.slide.on .acts{animation:soft .8s .44s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes soft{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.stage .btn-line{border-color:rgba(255,255,255,.55); color:#fff}
.stage .btn-line:hover{border-color:var(--limefill); color:var(--limefill)}
.stage-ui{position:relative; z-index:3; border-top:1px solid rgba(255,255,255,.22); background:rgba(4,44,18,.26); backdrop-filter:blur(6px)}
.stage-ui .wrap{display:flex; align-items:center; gap:18px; padding-block:14px}
.dots{display:flex; gap:10px; flex:1; min-width:0}
.dot{position:relative; height:3px; flex:1; max-width:120px; background:rgba(255,255,255,.28); border:0; padding:0; cursor:pointer; overflow:hidden}
.dot i{position:absolute; inset:0 auto 0 0; width:0; background:var(--limefill); display:block}
.dot-lab{font-family:var(--body); font-size:.62rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.8); flex:none; font-variant-numeric:tabular-nums}
.arrows{display:flex; gap:8px; flex:none}
.arrows button{width:42px; height:42px; border:1px solid var(--hair); background:transparent; color:var(--fg); cursor:pointer; font-size:1rem; line-height:1; transition:border-color .2s,background .2s,transform .2s,color .2s}
.arrows button:hover{border-color:var(--lime); color:var(--lime); transform:translateY(-2px)}
.stage-ui .arrows button{border-color:rgba(255,255,255,.42); color:#fff}
.stage-ui .arrows button:hover{border-color:var(--limefill); color:var(--limefill); background:rgba(255,255,255,.08)}

.ticker{background:var(--limefill); color:var(--on-lime); overflow:hidden}
.tick-track{display:flex; width:max-content; animation:slide 34s linear infinite}
.tick-track span{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(calc(1.05rem*var(--ts)),calc(2.2vw*var(--ts)),calc(1.5rem*var(--ts))); letter-spacing:.03em; padding:11px 0; white-space:nowrap; display:flex; align-items:center; gap:28px}
.tick-track span::after{content:"✦"; font-size:.62em; opacity:.6; padding-inline:28px}
@keyframes slide{to{transform:translateX(-50%)}}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair)}
.stat{background:var(--ink); padding:28px 22px}
.stat b{display:block; font-family:var(--display); font-weight:900; font-size:clamp(calc(2.9rem*var(--ts)),calc(5.6vw*var(--ts)),calc(4.2rem*var(--ts))); line-height:.85; color:var(--lime); font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:12px; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); line-height:1.55}

.about{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,70px); align-items:start}
.frame{position:relative; border:1px solid var(--line); padding:12px; background:var(--raise); margin:0}
.frame img{width:100%; aspect-ratio:1/1.05; object-fit:cover}
.frame figcaption{position:absolute; left:12px; right:12px; bottom:12px; padding:14px 16px; background:var(--limefill); color:var(--on-lime)}
.frame figcaption b{display:block; font-family:var(--display); font-weight:900; font-size:1.35rem; text-transform:uppercase; letter-spacing:.01em; line-height:1.05}
.frame figcaption span{display:block; margin-top:3px; font-size:.65rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.8}
.creds{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:30px}
.cred{background:var(--ink); padding:19px 18px; transition:background .25s}
.cred:hover{background:var(--raise)}
.cred b{display:block; font-family:var(--display); font-weight:700; font-size:1.08rem; text-transform:uppercase; letter-spacing:.015em; line-height:1.15}
.cred span{display:block; margin-top:6px; font-size:.82rem; color:var(--muted); line-height:1.5}
.quote{font-family:var(--script); font-style:italic; font-weight:400; font-size:clamp(1.3rem,2.5vw,1.85rem); line-height:1.32; letter-spacing:-.01em; border-left:3px solid var(--lime); padding-left:22px; margin-top:30px}

.pshell{display:grid; grid-template-columns:290px 1fr; gap:clamp(24px,3.6vw,52px); margin-top:44px; align-items:start}
.prail{display:flex; flex-direction:column; gap:2px; position:sticky; top:92px}
.ptab{display:flex; gap:14px; align-items:center; text-align:left; width:100%; cursor:pointer; background:transparent; border:0; border-left:2px solid var(--hair); color:var(--muted); font-family:var(--display); font-weight:700; font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; line-height:1.15; padding:15px 14px; transition:all .25s cubic-bezier(.2,.8,.3,1)}
.ptab b{font-weight:900; font-size:.95rem; color:var(--lime); flex:none; width:20px; font-variant-numeric:tabular-nums}
.ptab:hover{color:var(--fg); background:var(--raise)}
.ptab[aria-selected="true"]{color:var(--on-lime); background:var(--limefill); border-left-color:var(--limefill)}
.ptab[aria-selected="true"] b{color:var(--on-lime)}
.ppanel{min-width:0}
.ppanel[hidden]{display:none}
.pin{animation:fade .5s cubic-bezier(.2,.8,.3,1)}
@keyframes fade{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.phead{display:grid; grid-template-columns:1fr 200px; gap:26px; align-items:center}
.pnum{font-family:var(--display); font-weight:900; font-size:clamp(calc(4.2rem*var(--ts)),calc(9.5vw*var(--ts)),calc(7rem*var(--ts))); line-height:.78; letter-spacing:.01em; color:transparent; -webkit-text-stroke:1.6px var(--lime); display:block; margin-bottom:12px}
.pshot{aspect-ratio:1/1; overflow:hidden; border:1px solid var(--line)}
.pshot img{width:100%; height:100%; object-fit:cover}
.pgroup{border-top:1px solid var(--hair); padding-top:18px; margin-top:22px}
.pgroup h4{margin:0 0 13px; font-family:var(--body); font-weight:800; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--lime)}
ul.ticks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
ul.ticks li{display:flex; gap:13px; font-size:.97rem; line-height:1.6; color:var(--muted)}
ul.ticks li::before{content:""; flex:none; width:7px; height:7px; margin-top:.56em; background:var(--lime)}
ul.ticks li b{color:var(--fg); font-weight:700}
.pkick{margin-top:28px; padding:22px 24px; border:1px solid var(--line); background:var(--raise); font-family:var(--script); font-style:italic; font-weight:400; font-size:clamp(1.15rem,2.2vw,1.55rem); line-height:1.35; letter-spacing:-.01em}

.railhead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:38px}
.rail{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; margin-top:20px; cursor:grab}
.rail.drag{cursor:grabbing; scroll-snap-type:none}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-thumb{background:var(--line)}
.shot{flex:0 0 min(340px,78vw); scroll-snap-align:start; position:relative; overflow:hidden; border:1px solid var(--hair); background:var(--raise); padding:0; margin:0; cursor:zoom-in}
.shot img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.shot:hover img{transform:scale(1.07)}
.shot figcaption{position:absolute; inset:auto 0 0 0; padding:30px 16px 14px; text-align:left; background:linear-gradient(transparent,rgba(3,20,10,.92)); color:#F0F7F0; font-size:.78rem; font-weight:600; line-height:1.4}
.recs{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:40px}
.rec{background:var(--ink); padding:22px 20px; transition:background .25s}
.rec:hover{background:var(--raise)}
.rec b{display:block; font-family:var(--display); font-weight:800; font-size:1.14rem; text-transform:uppercase; letter-spacing:.015em; margin-bottom:7px}
.rec span{font-size:.85rem; color:var(--muted); line-height:1.55}

#lb{position:fixed; inset:0; z-index:90; background:rgba(2,10,5,.95); display:flex; align-items:center; justify-content:center; padding:24px}
#lb[hidden]{display:none}
#lb img{max-width:min(94vw,1000px); max-height:78vh; object-fit:contain}
#lb .cap{position:absolute; left:0; right:0; bottom:26px; text-align:center; color:#CFE0D2; font-size:.84rem; padding-inline:22px}
#lb button{position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff; width:46px; height:46px; cursor:pointer; font-size:1.15rem; line-height:1}
#lb .x{top:20px; right:20px}
#lb .prev{left:14px; top:50%; transform:translateY(-50%)}
#lb .next{right:14px; top:50%; transform:translateY(-50%)}

.pledge{display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center; border:1px solid var(--line); padding:clamp(24px,4vw,44px); background:var(--raise); margin-top:44px; min-height:220px}
.pledge-stack{display:grid; min-width:0}
.pq{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .6s, visibility .6s}
.pq.on{opacity:1; visibility:visible}
.pq p{font-family:var(--display); font-weight:800; font-size:clamp(calc(1.8rem*var(--ts)),calc(4vw*var(--ts)),calc(3rem*var(--ts))); line-height:.98; text-transform:uppercase; letter-spacing:.005em}
.pq small{display:block; margin-top:16px; font-family:var(--body); font-size:.7rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--lime)}
.vcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:40px}
.vcard{background:var(--field); padding:22px 20px}
.vcard b{display:block; font-family:var(--display); font-weight:800; font-size:1.12rem; letter-spacing:.015em; text-transform:uppercase; color:var(--lime); margin-bottom:8px}
.vcard span{font-size:.86rem; color:var(--muted); line-height:1.6}
.share{display:grid; grid-template-columns:290px 1fr; gap:clamp(22px,4vw,44px); align-items:center; margin-top:46px; padding:clamp(20px,3vw,32px); border:1px solid var(--line)}
.share img{width:100%; box-shadow:var(--shadow)}
.bigline{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(calc(2.3rem*var(--ts)),calc(6.2vw*var(--ts)),calc(4.6rem*var(--ts))); line-height:.92; letter-spacing:.005em; margin-top:46px}
.bigline em{font-family:var(--script); font-style:italic; font-weight:400; text-transform:none; letter-spacing:-.01em; color:var(--lime)}

/* ---------- slogan band ---------- */
.sloganbar{background:var(--field); border-bottom:1px solid var(--hair)}
.sloganbar .wrap{padding-block:clamp(28px,4.4vw,52px); text-align:center}
.sloganbar p{font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:.95; letter-spacing:.01em;
  font-size:clamp(calc(1.55rem*var(--ts)),calc(4.6vw*var(--ts)),calc(3.2rem*var(--ts)))}
.sloganbar em{display:block; margin-top:12px; font-family:var(--script); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.01em; color:var(--lime); font-size:.64em; line-height:1.15}

/* ---------- ward coordinators ---------- */
.wards{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:40px}
.ward{background:var(--ink); padding:20px; display:grid; gap:11px; align-content:start; transition:background .25s}
.ward:hover{background:var(--raise)}
.wnum{font-family:var(--display); font-weight:900; font-size:1.05rem; letter-spacing:.04em; background:var(--limefill); color:var(--on-lime); width:42px; height:28px; display:grid; place-items:center}
.wmain b{display:block; font-family:var(--display); font-weight:800; font-size:1.32rem; text-transform:uppercase; letter-spacing:.015em; line-height:1.05}
.wmain .wward{display:block; margin-top:3px; font-size:.63rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--muted)}
a.wtel{font-weight:700; font-size:1.08rem; letter-spacing:.03em; color:var(--lime); text-decoration:none; font-variant-numeric:tabular-nums}
a.wtel:hover{text-decoration:underline}
.wacts{display:flex; gap:7px; flex-wrap:wrap}
.wbtn{display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 15px; border:1px solid var(--hair); background:transparent; color:var(--fg); font:inherit; font-size:.67rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; text-decoration:none; transition:border-color .2s,color .2s,background .2s}
.wbtn:hover{border-color:var(--lime); color:var(--lime)}
.wbtn.ok{border-color:var(--limefill); background:var(--limefill); color:var(--on-lime)}

/* ---------- bank accounts ---------- */
.acctwrap{display:grid; gap:20px; margin-top:40px}
.acctgrp{border:1px solid var(--line)}
.accthead{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:18px 20px; border-bottom:1px solid var(--hair); background:var(--raise)}
.accthead b{font-family:var(--display); font-weight:800; font-size:1.35rem; text-transform:uppercase; letter-spacing:.015em; line-height:1.05}
.accthead span{font-size:.66rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--lime)}
.accts{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:1px; background:var(--hair)}
.acct{background:var(--field); padding:18px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.acct .cur{font-family:var(--display); font-weight:900; font-size:1.1rem; letter-spacing:.05em; background:var(--limefill); color:var(--on-lime); padding:3px 10px; flex:none}
.acct .num{flex:1; min-width:132px; font-size:1.12rem; font-weight:700; letter-spacing:.07em; font-variant-numeric:tabular-nums}

.join{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,60px); align-items:start}
form{display:grid; gap:15px; margin-top:28px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:15px}
.f{display:grid; gap:8px}
label{font-size:.65rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--muted)}
input,select,textarea{font:inherit; font-size:.95rem; color:var(--fg); background:var(--field); border:1px solid var(--hair); padding:14px; width:100%; transition:border-color .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--lime)}
textarea{resize:vertical; min-height:96px}
.help{font-size:.79rem; color:var(--muted); line-height:1.6}
.err{color:#FF9A86; font-size:.79rem; display:none}
.err.on{display:block}
#done{display:none; border:1px solid var(--lime); padding:22px; margin-top:18px}
#done.on{display:block; animation:fade .4s}
#done b{display:block; font-family:var(--display); font-weight:800; font-size:1.3rem; text-transform:uppercase; letter-spacing:.015em; margin-bottom:9px}
#summary{white-space:pre-wrap; font-size:.85rem; color:var(--muted); margin:13px 0; line-height:1.65}
.contact{border:1px solid var(--hair); background:var(--field); padding:26px}
.cline{display:flex; gap:14px; padding-block:14px; border-bottom:1px solid var(--hair); align-items:baseline}
.cline:last-of-type{border-bottom:0}
.cline b{flex:none; width:92px; font-size:.64rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--lime)}
.cline span{font-size:.94rem; word-break:break-word}
.ph{color:var(--muted); border-bottom:1px dashed var(--muted)}
.note{margin-top:18px; font-size:.78rem; color:var(--muted); line-height:1.6; border-left:2px solid var(--emerald); padding-left:13px}

footer{border-top:1px solid var(--hair)}
.foot{display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; padding-block:36px}
.foot p{font-size:.8rem; color:var(--muted); line-height:1.65}
.foot-links{display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start}
.foot-links a{font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); text-decoration:none}
.foot-links a:hover{color:var(--lime)}

.will-reveal{opacity:0; transform:translateY(28px)}
.revealed{opacity:1; transform:none; transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1)}


@media (max-width:920px){
  .stage::before{background:linear-gradient(180deg, rgba(3,38,16,.84) 0%, rgba(3,38,16,.56) 58%, rgba(3,38,16,.22) 100%)}
  .slide-grid{grid-template-columns:1fr; gap:30px}
  .media img{max-width:330px}
  .stage{min-height:0}
  .about{grid-template-columns:1fr}
  .pshell{grid-template-columns:1fr}
  .prail{position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:8px}
  .ptab{min-width:210px; border-left:0; border-top:2px solid var(--hair)}
  .ptab[aria-selected="true"]{border-top-color:var(--limefill)}
  .phead{grid-template-columns:1fr}
  .pshot{max-width:220px}
  .join{grid-template-columns:1fr}
  .share{grid-template-columns:1fr}
  .share img{max-width:300px}
  .pledge{grid-template-columns:1fr}
  .pledge .arrows{flex-direction:row}
  .stats{grid-template-columns:repeat(2,1fr)}
  nav{position:relative}
  .navlinks{display:none; position:absolute; top:100%; left:0; right:0; background:var(--field); border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:6px 22px 16px; z-index:60}
  .navlinks.open{display:flex}
  .navlinks a{padding-block:13px; border-bottom:1px solid var(--hair); width:100%}
  .menu-btn{display:block}
  .navcta{display:none}
}
@media (max-width:760px){
  /* a single long word must never run past the screen edge */
  .stage h1{font-size:clamp(2.2rem,10.2vw,3.5rem)}
  .slide .sub{font-size:1rem}
  .bigline{font-size:clamp(1.9rem,8.4vw,2.8rem)}
  .pq p{font-size:clamp(1.5rem,7.4vw,2.4rem)}
  .sloganbar p{font-size:clamp(1.35rem,7.2vw,2.2rem)}
}
@media (max-width:400px){
  /* the wordmark must not push the menu button off the screen */
  .navin{gap:12px}
  .mark{min-width:0}
  .mark > span{min-width:0}
  .mark b{font-size:1rem}
  .mark small{font-size:.5rem; letter-spacing:.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .markbadge{width:32px; height:32px; font-size:1.1rem}
  /* smallest phones: keep every headline inside the screen */
  .stage h1{font-size:clamp(1.9rem,9.6vw,3rem)}
  h2{font-size:clamp(1.8rem,9vw,2.4rem); overflow-wrap:anywhere}
  h3{font-size:clamp(1.25rem,5.6vw,1.6rem); overflow-wrap:anywhere}
  .wrap{padding-inline:18px}
  .wards{grid-template-columns:1fr}
  .accts{grid-template-columns:1fr}
}
@media (max-width:620px){
  .wards{grid-template-columns:1fr}
  .wbtn{min-height:46px; flex:1}
  .acct{gap:10px}
  .creds{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .media img{max-width:270px; border-width:4px}
  .dot-lab{display:none}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .slide h1 i{transform:none}
  .slide .sub,.slide .acts{opacity:1}
  .will-reveal{opacity:1; transform:none}
}

/* form status (server-backed sign-up) */
.formnote{margin-top:14px; font-size:.86rem; line-height:1.6; display:none}
.formnote.on{display:block}
.formnote.good{color:var(--lime)}
.formnote.bad{color:#FF9A86}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}