body{margin:0;background:#FFFFFF;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
*{box-sizing:border-box}
::selection{background:#7EE0B4;color:#0A1A14}

/* type */
.d{font-family:'Geist',ui-sans-serif,system-ui,sans-serif;letter-spacing:-0.045em;font-feature-settings:'ss01','cv11'}
.m{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0.08em;text-transform:uppercase}

/* nav */
.nl{position:relative;padding:8px 2px;color:#3A4A42;font-weight:500;transition:color .25s}
.nl::after{content:"";position:absolute;left:2px;right:2px;bottom:2px;height:1.5px;background:#2F7A5A;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nl:hover{color:#0E1A15}
.nl:hover::after{transform:scaleX(1)}
.ul{position:relative;transition:color .25s}
.ul:hover{color:#FFFFFF}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .25s,box-shadow .35s,border-color .25s}
.btn .ar{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover .ar{transform:translateX(4px)}
.btn:hover{transform:translateY(-1px)}
.bp{background:#7EE0B4;color:#06140F;box-shadow:0 0 0 0 rgba(126,224,180,0)}
.bp:hover{background:#9BEBC6;color:#06140F;box-shadow:0 10px 30px -10px rgba(126,224,180,.6)}
a.bp:hover,a.bp:focus-visible{color:#06140F}
.bg{border:1px solid rgba(232,243,236,.2);color:#E8F3EC}
.bg:hover{border-color:rgba(232,243,236,.5);background:rgba(232,243,236,.06);color:#FFFFFF}
.lk{display:inline-flex;align-items:center;gap:8px}
.lk .ar{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lk:hover .ar{transform:translateX(4px)}

/* cards */
.lift{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .3s,background-color .3s}
.lift:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(10,26,20,.35)}
.cell{transition:background-color .3s}
.cell:hover{background:#F5F8F5}
.cell .ic{transition:transform .5s cubic-bezier(.2,.7,.2,1),background-color .3s,color .3s}
.cell:hover .ic{transform:rotate(-8deg) scale(1.06);background:#0F2A20;color:#7EE0B4}
.row{transition:background-color .3s,padding .4s cubic-bezier(.2,.7,.2,1)}
.row .nm{transition:color .3s}
.row:hover .nm{color:#2F7A5A}
.row:hover{background:#F5F8F5}

/* hero entrance */
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.in{animation:up 1s cubic-bezier(.2,.7,.2,1) both}
.in1{animation-delay:.08s}.in2{animation-delay:.18s}.in3{animation-delay:.3s}.in4{animation-delay:.42s}.in5{animation-delay:.55s}
.fin{animation:fade 1.6s ease .2s both}

/* scroll reveal (supported browsers only; finished whenever fully on screen) */
@supports (animation-timeline: view()){
  @keyframes rise{from{transform:translateY(48px)}to{transform:none}}
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}

/* live dot */
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(126,224,180,.7)}80%,100%{box-shadow:0 0 0 7px rgba(126,224,180,0)}}
.dot{width:6px;height:6px;border-radius:50%;background:#7EE0B4;animation:ping 2.4s ease-out infinite}

/* ===== 3D district scene ===== */
.stage{position:relative;width:600px;height:600px;transform:scale(1.08);perspective:2000px;perspective-origin:50% 28%;flex:none}
.bob{position:absolute;inset:0;transform-style:preserve-3d;animation:bob 8s ease-in-out infinite}
.world{position:absolute;left:125px;top:135px;width:350px;height:350px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg);animation:spin 70s linear infinite}
@keyframes spin{from{transform:rotateX(58deg) rotateZ(-38deg)}to{transform:rotateX(58deg) rotateZ(322deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.lay{position:absolute;inset:0;border-radius:16px;background:#0D2A1F}
.top{position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,#1B5A43,#0E2A20 60%,#0B231A);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:6px;box-shadow:inset 0 0 0 1px rgba(159,211,184,.35),0 0 80px rgba(126,224,180,.25)}
.p{border-radius:4px;background-color:#1D5440;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 5px)}
.p.b{background-color:#215A43;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 5px)}
.p.c{background-color:#33795A;box-shadow:inset 0 0 12px rgba(126,224,180,.25)}
.p.g{background-color:#B39A47;box-shadow:inset 0 0 14px rgba(255,220,130,.35);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 1px,transparent 1px 4px)}
.p.w{background-color:#173E4A;background-image:repeating-linear-gradient(0deg,rgba(160,220,255,.12) 0 1px,transparent 1px 6px)}
.fb{position:absolute;height:2px;transform:translateZ(1px);background:rgba(126,224,180,.45);box-shadow:0 0 8px rgba(126,224,180,.5);overflow:hidden;border-radius:2px}
.fb.v{width:2px}
.fb::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#E6FFF3,transparent);background-size:35% 100%;background-repeat:no-repeat;animation:flow 3.4s linear infinite}
.fb.v::after{background:linear-gradient(180deg,transparent,#E6FFF3,transparent);background-size:100% 35%;background-repeat:no-repeat;animation:flowv 3.4s linear infinite}
.fb.d1::after{animation-delay:-1.1s}.fb.d2::after{animation-delay:-2.2s}
@keyframes flow{from{background-position:-50% 0}to{background-position:150% 0}}
@keyframes flowv{from{background-position:0 -50%}to{background-position:0 150%}}
.nd{position:absolute;width:0;height:0;transform-style:preserve-3d}
.disc{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#7EE0B4;box-shadow:0 0 22px 8px rgba(126,224,180,.6);transform:translateZ(2px)}
.bm{position:absolute;left:-1px;top:-44px;width:2px;height:44px;transform-origin:50% 100%;background:linear-gradient(0deg,#7EE0B4,rgba(126,224,180,0))}
.bm.x{transform:rotateX(-90deg)}
.bm.y{transform:rotateZ(90deg) rotateX(-90deg)}
.cap{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#F2FFF8;transform:translateZ(44px);box-shadow:0 0 12px 3px rgba(126,224,180,.8);animation:blink 2.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
.tw{position:absolute;left:-9px;top:-128px;width:18px;height:128px;transform-origin:50% 100%;clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);background:repeating-linear-gradient(0deg,rgba(232,243,236,.95) 0 2px,rgba(232,243,236,.35) 2px 9px)}
.tw.x{transform:rotateX(-90deg)}
.tw.y{transform:rotateZ(90deg) rotateX(-90deg)}
.tcap{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#E9C46A;transform:translateZ(130px);box-shadow:0 0 18px 6px rgba(233,196,106,.55)}
.ring{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:1.5px solid #7EE0B4;opacity:0;animation:ring 4.2s ease-out infinite}
.ring.r2{animation-delay:1.4s}.ring.r3{animation-delay:2.8s}
@keyframes ring{0%{transform:translateZ(130px) scale(.1);opacity:0}12%{opacity:.95}100%{transform:translateZ(130px) scale(2.9);opacity:0}}
.hs{position:absolute;width:13px;height:13px;transform-style:preserve-3d}
.hs i{position:absolute;inset:0;background:#B9CCBF;border-radius:2px}
.hs i.t{background:#F1F6F2}
.sol{position:absolute;width:24px;height:15px;background-color:#1C3450;background-image:linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.2) 1px,transparent 1px);background-size:6px 7.5px;transform:translateZ(5px) rotateX(-25deg);border:1px solid #6E8FB0;border-radius:2px}
.orb{position:absolute;left:-75px;top:-75px;width:500px;height:500px;border-radius:50%;border:1px dashed rgba(159,211,184,.4);transform:translateZ(-34px)}
.orb2{position:absolute;left:-125px;top:-125px;width:600px;height:600px;border-radius:50%;border:1px solid rgba(159,211,184,.08);transform:translateZ(-34px)}
.sat{position:absolute;left:246px;top:-4px;width:8px;height:8px;border-radius:50%;background:#E9C46A;box-shadow:0 0 10px 2px rgba(233,196,106,.6)}
.gl{position:absolute;left:50%;top:62%;width:620px;height:280px;margin-left:-310px;border-radius:50%;background:radial-gradient(closest-side,rgba(126,224,180,.55),rgba(47,122,90,.25) 55%,rgba(47,122,90,0));filter:blur(14px);animation:glw 6s ease-in-out infinite}
@keyframes glw{0%,100%{opacity:.8}50%{opacity:1}}
.aur{animation:aur 24s linear infinite}
@keyframes aur{to{transform:rotate(360deg)}}
.tbl{position:absolute;left:-90px;top:-90px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,rgba(126,224,180,.7),rgba(126,224,180,0));transform:translateZ(3px);animation:glw 3s ease-in-out infinite}
.scn{display:flex;justify-content:center;align-items:center}
@media (max-width:1100px){.stage{transform:scale(.82);margin:-54px}}
@media (max-width:640px){.stage{transform:scale(.56);margin:-132px}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.b7{grid-column:span 7}.b5{grid-column:span 5}.b4{grid-column:span 4}.b12{grid-column:span 12}
@media (max-width:960px){.b7,.b5,.b4,.b12{grid-column:span 12}}
.bc{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:40px;min-height:260px;padding:32px;border-radius:24px;background:linear-gradient(180deg,#FFFFFF,#FBFCFA);border:1px solid rgba(14,26,21,.08);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 48px -36px rgba(10,26,20,.35);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .3s}
.bc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at 100% 0%,rgba(126,224,180,.16),transparent 60%);opacity:0;transition:opacity .5s}
.bc:hover{transform:translateY(-4px);border-color:rgba(47,122,90,.3);box-shadow:0 40px 70px -40px rgba(10,26,20,.45)}
.bc:hover::after{opacity:1}
.bc.feat{min-height:380px;background:linear-gradient(150deg,#174A37 0%,#0E2A20 55%,#0A1A14 100%);border-color:rgba(126,224,180,.18);color:#E8F3EC}
.bc.gold{min-height:0;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;background:linear-gradient(120deg,#0A1A14 0%,#12352A 60%,#2A3A1E 100%);border-color:rgba(233,196,106,.25);color:#E8F3EC}
.bglow{position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(closest-side,rgba(126,224,180,.35),rgba(126,224,180,0));pointer-events:none}
.bglow.g{background:radial-gradient(closest-side,rgba(233,196,106,.28),rgba(233,196,106,0))}
.tg{font-size:10px;font-weight:500;color:#24634A;padding:6px 10px;border-radius:999px;background:#E6F3EC;border:1px solid rgba(47,122,90,.15)}
.tgd{color:#0A1A14;background:#7EE0B4;border-color:transparent}
.tgg{color:#1A1406;background:#E9C46A;border-color:transparent}
.ix{font-size:11px;color:#8A978F}

@media (max-width:640px){.hst{column-gap:22px !important}.hst dt{font-size:24px !important}.hst dd{font-size:12px !important}}
/* district stat cards */
.sc{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;margin:0;padding:28px 28px 32px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(232,243,236,.1);transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s}
.sc::before{content:"";position:absolute;left:50%;top:-40%;width:120%;height:90%;margin-left:-60%;border-radius:50%;background:radial-gradient(closest-side,var(--g),transparent);pointer-events:none;transition:opacity .4s;opacity:.8}
.sc:hover{transform:translateY(-4px);border-color:rgba(232,243,236,.22)}
.sc:hover::before{opacity:1}
.sv{position:relative;margin:-4px -6px 18px;padding-bottom:18px;border-bottom:1px solid rgba(232,243,236,.08)}
.sn{position:relative;font-size:56px;line-height:1;font-weight:500}
.sd{position:relative;margin:0;font-size:14px;color:rgba(232,243,236,.65)}
.flow path{stroke-dasharray:4 4;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-16}}
.pr{transform-box:fill-box;transform-origin:center;animation:prng 2.6s ease-out infinite}
@keyframes prng{0%{transform:scale(.9);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.wd{transform-box:fill-box;transform-origin:center;animation:tw 3.2s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}
.lit{filter:drop-shadow(0 0 6px rgba(244,166,140,.9))}
.fib{stroke-dasharray:6 6;animation:dash 1.2s linear infinite}
@supports (animation-timeline: view()){
  .arc{animation:arcd linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
  @keyframes arcd{from{stroke-dasharray:0 314.2}to{stroke-dasharray:104.7 314.2}}
}
/* quote */
.qc{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:44px;padding:clamp(40px,7vw,96px) clamp(24px,7vw,96px);border-radius:32px;background:radial-gradient(700px circle at 100% 0%,rgba(126,224,180,.28),transparent 60%),radial-gradient(600px circle at 0% 100%,rgba(233,196,106,.16),transparent 60%),#F4F8F4;border:1px solid rgba(47,122,90,.12)}
.qa{animation:qbr 6s ease-in-out infinite}
@keyframes qbr{0%,100%{opacity:.6}50%{opacity:1}}
.qi{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;margin:0 .22em 0 .04em;border-radius:.3em;vertical-align:-0.14em;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.qc.on .qi:hover{transform:rotate(-10deg) scale(1.12)}
.mk{background-image:linear-gradient(transparent 62%,rgba(126,224,180,.45) 62%,rgba(126,224,180,.45) 92%,transparent 92%);background-repeat:no-repeat;background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mk.mg{background-image:linear-gradient(transparent 62%,rgba(233,196,106,.45) 62%,rgba(233,196,106,.45) 92%,transparent 92%)}
.mk.mc{background-image:linear-gradient(transparent 62%,rgba(244,166,140,.42) 62%,rgba(244,166,140,.42) 92%,transparent 92%)}

.hs1+.hs1{border-left:1px solid rgba(232,243,236,.1)}
@media (max-width:640px){.hstat{margin-top:-40px !important}.hs1{padding:0 12px !important}}
/* quote reveal — triggered when the card comes into view */
.qc .qw{opacity:.1;filter:blur(5px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),filter 1s cubic-bezier(.2,.7,.2,1),background-size 1.2s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--i,0) * .22s)}
.qc .mk{background-size:0% 100%;transition-delay:calc(var(--i,0) * .22s),calc(var(--i,0) * .22s),calc(var(--i,0) * .22s + .45s)}
.qc .qp{display:inline-flex;opacity:0;transform:scale(.2) rotate(-40deg);transition:opacity .5s ease,transform .8s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--i,0) * .22s - .1s)}
.qc.on .qw{opacity:1;filter:blur(0)}
.qc.on .mk{background-size:100% 100%}
.qc.on .qp{opacity:1;transform:rotate(var(--r,0deg))}
.qc figcaption{opacity:0;transform:translateY(12px);transition:opacity .8s ease 2.2s,transform .8s cubic-bezier(.2,.7,.2,1) 2.2s}
.qc.on figcaption{opacity:1;transform:none}
/* CTA */
.blob{position:absolute;border-radius:50%;filter:blur(20px);animation:drift 16s ease-in-out infinite;z-index:-1}
.blob.b2{animation-duration:20s;animation-direction:alternate-reverse}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,40px) scale(1.1)}66%{transform:translate(-40px,70px) scale(.95)}}
.sun{position:absolute;left:50%;bottom:120px;width:520px;height:260px;margin-left:-260px;border-radius:520px 520px 0 0;background:radial-gradient(ellipse at 50% 100%,rgba(233,196,106,.55),rgba(233,196,106,.12) 45%,rgba(233,196,106,0) 70%);filter:blur(6px);animation:glw 5s ease-in-out infinite;z-index:-1}
.floor-wrap{position:absolute;left:-25%;right:-25%;bottom:0;height:250px;perspective:420px;perspective-origin:50% 0%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%);mask-image:linear-gradient(to bottom,transparent,#000 50%);z-index:-1}
.floor{position:absolute;left:0;right:0;top:0;height:900px;transform-origin:50% 0;transform:rotateX(62deg);background-image:linear-gradient(rgba(126,224,180,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(126,224,180,.14) 1px,transparent 1px),repeating-linear-gradient(90deg,rgba(47,122,90,.08) 0 18px,transparent 18px 46px);background-size:100% 46px,92px 100%,100% 100%;animation:fly 2.4s linear infinite}
@keyframes fly{from{background-position:0 0,0 0,0 0}to{background-position:0 46px,0 0,0 0}}
.pt{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#7EE0B4;box-shadow:0 0 10px 2px rgba(126,224,180,.7);opacity:0;animation:rise2 10s linear infinite}
.pt:nth-child(3n){background:#E9C46A;box-shadow:0 0 10px 2px rgba(233,196,106,.7)}
@keyframes rise2{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:.8}100%{transform:translateY(-520px);opacity:0}}
.shim{background:linear-gradient(100deg,#7EE0B4 0%,#E9C46A 30%,#FFFFFF 45%,#7EE0B4 60%,#E9C46A 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 6s ease-in-out infinite}
@keyframes shim{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:sweep 3.6s ease-in-out infinite}
@keyframes sweep{0%,60%{left:-60%}100%{left:130%}}

/* shrinking header */
.hdr{transition:box-shadow .4s,background-color .4s}
.hdr .hw{transition:min-height .45s cubic-bezier(.2,.7,.2,1)}
.hdr .hlogo{transition:height .45s cubic-bezier(.2,.7,.2,1)}
.hdr.sm .hw{min-height:68px !important}
.hdr.sm .hlogo{height:52px !important}
.hdr.sm{background:rgba(255,255,255,.94) !important;box-shadow:0 12px 30px -20px rgba(10,26,20,.45) !important}
/* layout helpers */
@media (max-width:640px){article{padding:32px 24px !important}}
.wrap{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px}
@media (max-width:640px){.wrap{padding-left:16px;padding-right:16px}.hide-s{display:none}}

/* CTA rings */
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.04);opacity:1}}
.cr{position:absolute;border-radius:50%;border:1px solid rgba(126,224,180,.22);animation:breathe 6s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}