:root{
  --paper:#ffffff; --paper-2:#f4f7fb; --ink:#0b1626; --muted:#556275; --line:rgba(11,22,38,.1);
  --blue:#1d4ed8; --blue-2:#3b82f6; --blue-soft:#e8efff;
  --font:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --container:72rem; --pill:999px;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font);
     font-size:clamp(1rem,.97rem + .16vw,1.0625rem); line-height:1.65; -webkit-font-smoothing:antialiased}
#arm{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
main,footer{position:relative; z-index:1}
.wrap{max-width:var(--container); margin:0 auto; padding-inline:clamp(16px,4vw,32px)}

nav.top{position:fixed; top:max(14px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:100;
        display:flex; align-items:center; gap:clamp(10px,2vw,26px); padding:8px 8px 8px 20px;
        background:rgba(255,255,255,.82); backdrop-filter:blur(10px); border:1px solid var(--line);
        border-radius:var(--pill); box-shadow:0 6px 30px rgba(11,22,38,.06); white-space:nowrap; max-width:calc(100% - 24px)}
nav.top .brand{font-weight:700; letter-spacing:-.01em; color:var(--ink); text-decoration:none}
nav.top .brand b{color:var(--blue)}
nav.top a{color:var(--muted); text-decoration:none; font-size:.95rem}
nav.top a:hover, nav.top a[aria-current="page"]{color:var(--ink)}
.btn{display:inline-block; text-decoration:none; font-weight:500; border-radius:var(--pill); padding:.7rem 1.25rem;
     background:var(--blue); color:#fff !important; transition:background .2s}
.btn:hover{background:#1e40af}
.btn.ghost{background:transparent; color:var(--blue) !important; border:1px solid rgba(29,78,216,.35)}
.btn.sm{padding:.55rem 1rem; font-size:.92rem}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--blue-2); outline-offset:3px}
@media (max-width:620px){ nav.top .hide-sm{display:none} }

.hero{min-height:100svh; display:flex; align-items:center; padding-block:7rem 3rem}
.hero .copy{max-width:36rem; background:linear-gradient(90deg,rgba(255,255,255,.92) 60%,rgba(255,255,255,0))}
.eyebrow{display:inline-flex; align-items:center; gap:.6rem; font-size:.75rem; font-weight:600;
         letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin:0 0 1.4rem}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--blue); opacity:.7}
h1{font-size:clamp(2.4rem,1.4rem + 4vw,4.6rem); line-height:1.02; letter-spacing:-.035em; margin:0; font-weight:700; text-wrap:balance}
.lead{font-size:clamp(1.1rem,1.03rem + .45vw,1.3rem); color:var(--muted); margin:1.3rem 0 0; max-width:34rem}
.actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.8rem}

section.band{padding-block:clamp(3.5rem,3rem + 4vw,6.5rem)}
section.band.tint{background:rgba(244,247,251,.9); border-block:1px solid var(--line)}
h2{font-size:clamp(1.8rem,1.3rem + 2.2vw,3rem); line-height:1.08; letter-spacing:-.03em; margin:0 0 1.2rem; font-weight:700; text-wrap:balance; max-width:22ch}
.prose{max-width:42rem; display:flex; flex-direction:column; gap:1.1rem}
.prose p{margin:0; color:#233044}
.prose b{color:var(--ink); font-weight:600}
.prose code{font-family:var(--mono); font-size:.9em; color:var(--blue); background:var(--blue-soft); padding:.05em .35em; border-radius:6px}
.finding{margin:0}
.finding + .finding{margin-top:1.6rem}
.finding h3{font-size:1.15rem; letter-spacing:-.015em; margin:0 0 .35rem; font-weight:650}

.map{margin-top:2rem; background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:20px; padding:clamp(12px,2vw,22px); overflow-x:auto}
.map svg{display:block; min-width:760px; width:100%; height:auto}
.map svg text{font-family:var(--font)}
.map figcaption{font-size:.88rem; color:var(--muted); margin-top:.6rem; padding-inline:4px}

.links{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:1rem}
.links a{color:var(--blue); text-decoration:none; font-weight:500}
.links a:hover{text-decoration:underline}
.status{font-family:var(--mono); font-size:.85rem; color:var(--muted); margin-top:1rem}
.status b{color:var(--blue)}

footer{border-top:1px solid var(--line); padding-block:2rem 3rem; color:var(--muted); font-size:.9rem; background:#fff}
footer .wrap{display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between}
footer a{color:var(--muted)}
@media (max-width:900px){ #arm{opacity:.35} .hero .copy{background:none} }
/* the hero's wrap is a flex item, so it shrank to its text and centred; make it the
   same full-width column as every other section so the headline lines up with the text */
.hero-left .wrap{width:100%}

.video{margin:1.6rem 0 0; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#000; max-width:56rem}
.video video{display:block; width:100%; height:auto}
.rates{display:flex; gap:2.5rem; flex-wrap:wrap; margin:1.6rem 0 1.4rem}
.rates div{display:flex; flex-direction:column}
.rates .v{font-size:clamp(2.4rem,1.8rem + 2vw,3.4rem); font-weight:700; letter-spacing:-.04em; color:var(--blue); line-height:1; font-variant-numeric:tabular-nums}
.rates .k{font-size:.9rem; color:var(--muted); margin-top:.35rem}

/* the highlighted way out to the other projects */
nav.top .btn.projects{font-size:1rem; font-weight:600; padding:.75rem 1.35rem; background:var(--blue);
  box-shadow:0 0 0 4px rgba(59,130,246,.18), 0 8px 22px rgba(29,78,216,.28)}
nav.top .btn.projects:hover{background:#1e40af}

/* the loop figure */
.explain{margin:2rem 0 1.8rem; background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:20px;
         padding:clamp(10px,2vw,20px); overflow-x:auto}
.explain svg{display:block; min-width:780px; width:100%; height:auto}
.steps3 p b{color:var(--blue)}