:root{
  --bg:#FCFFFF;--card:#FFFFFF;--fg:#0D2E28;--muted:#49635C;--primary:#008169;--primary-2:#006652;
  --border:#C7DED7;--tint:#F2F8F6;--sup:#008169;--support:#D9F5EB;--caution:#FFDDD7;--coral:#F87468;
  --dark:#172E28;--mint:#8FC0B4;--on-dark:#FCFFFF;
  --grotesk:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root[data-palette="ledger"]{--bg:#F7F1E8;--card:#FFFAF2;--fg:#172B49;--muted:#5F6470;--primary:#345C8C;--primary-2:#264670;--border:#CABDA9;--tint:#EEE5D8;--sup:#287C6B;--support:#DCEBE4;--caution:#F1D8CF;--coral:#D7654E;--dark:#172B49;--mint:#C9D3E3;--on-dark:#FFFAF2}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.55;padding-inline:clamp(16px,4vw,48px);padding-block:0;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;position:relative}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1,h2{font-family:var(--grotesk);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,5.4vw,68px)}
h2{font-size:clamp(30px,3.8vw,48px)}
p{margin:0}
.m-sup{stroke:var(--sup)}.m-mid{stroke:var(--muted)}.m-cau{stroke:var(--coral)}.m-dot{fill:var(--fg)}

.pill{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;font-family:var(--sans);font-weight:600;font-size:14px;text-decoration:none;border:1px solid transparent;cursor:default;background:var(--primary);color:var(--on-dark);white-space:nowrap;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.pill::before{content:none;display:none}

:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

nav.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:32px;height:32px}
.brand .wm{font-family:var(--grotesk);font-weight:500;font-size:23px;letter-spacing:-.01em;line-height:1}
.brand .wm small{display:block;font-family:var(--sans);font-weight:400;font-size:10.5px;color:var(--muted);margin-top:3px}
nav.top .right{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600}
nav.top .right a.signin{text-decoration:none;color:var(--muted)}
nav.top .right a.signin:hover{color:var(--fg)}
@media (max-width:560px){.brand .wm small,nav.top .right a.signin{display:none}}

.thread{position:absolute;left:50%;top:0;width:2px;height:0;background:var(--border);transform:translateX(-50%);pointer-events:none;z-index:0}
.thread::before{content:"";position:absolute;left:50%;top:0;width:10px;height:10px;border-radius:50%;background:var(--primary);transform:translate(-50%,-50%)}
.thread::after{content:"";position:absolute;left:50%;bottom:0;width:6px;height:6px;border-radius:50%;background:var(--primary);transform:translate(-50%,50%);opacity:.6}
@media (max-width:860px){.thread{display:none}}

.hero{position:relative;min-height:72vh;display:grid;grid-template-columns:1fr 1fr;align-items:end;padding-block:clamp(120px,22vh,260px) clamp(72px,10vh,120px)}
@media (max-width:860px){.hero{grid-template-columns:1fr;min-height:0;padding-top:96px}}
.hero .copy{grid-column:2;padding-left:clamp(24px,5vw,72px);max-width:560px}
@media (max-width:860px){.hero .copy{grid-column:1;padding-left:0}}
.hero .copy>*{animation:rise .9s var(--ease) both}
.hero .copy>:nth-child(1){animation-delay:.9s}.hero .copy>:nth-child(2){animation-delay:1.05s}.hero .copy>:nth-child(3){animation-delay:1.25s}.hero .copy>:nth-child(4){animation-delay:1.45s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero h1{margin:16px 0 22px}
.hero .sub{font-size:17px;color:var(--muted);max-width:44ch;line-height:1.55}
.hero .cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px}
.fine{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

section{position:relative;padding-block:clamp(96px,14vw,180px)}
.reveal{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.pre{opacity:0;transform:translateY(18px)}

.statement{background:var(--dark);color:var(--on-dark);border-radius:16px;padding:clamp(40px,7vw,96px);display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative;overflow:hidden}
@media (max-width:860px){.statement{grid-template-columns:1fr}}
.statement h2{color:var(--on-dark);position:relative;z-index:1;max-width:14ch}
.statement .body{position:relative;z-index:1;display:grid;gap:18px;font-size:16px;line-height:1.6;color:color-mix(in srgb,var(--on-dark) 78%,transparent);max-width:38ch;padding-right:clamp(0px,6vw,80px)}
.statement .body b{color:var(--on-dark);font-weight:600}
.field{position:absolute;right:-60px;top:-10%;bottom:-10%;width:30%;background-image:radial-gradient(var(--mint) 1.4px,transparent 1.8px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 42% 70% at 62% 50%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 42% 70% at 62% 50%,#000 15%,transparent 72%);opacity:.7;animation:drift 60s linear infinite}
@keyframes drift{from{background-position:0 0}to{background-position:0 -280px}}

.map{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:860px){.map{grid-template-columns:1fr}}
.map svg{width:100%;height:auto;display:block;overflow:visible}
.map .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted)}
.map .obs{fill:var(--border);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.map .fd{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.map .fd.s{fill:var(--sup)}.map .fd.c{fill:var(--coral)}.map .fd.m{fill:var(--muted)}
.map .ln{fill:none;stroke-width:1.4;stroke-dasharray:var(--len);opacity:0}
.map .ln.s{stroke:var(--sup)}.map .ln.c{stroke:var(--coral)}.map .ln.m{stroke:var(--muted)}.map .ln.o{stroke:var(--border)}
.map .dec{fill:var(--fg);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.map .ring{fill:none;stroke:var(--sup);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.map.go .obs{animation:pop .6s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
.map.go .ln{animation:draw 1.1s var(--ease) both;animation-delay:calc(.5s + var(--i) * 40ms)}
.map.go .fd{animation:pop .7s var(--ease) both;animation-delay:calc(1.1s + var(--i) * 90ms)}
.map.go .dec{animation:pop .7s var(--ease) both;animation-delay:2.2s}
.map.go .ring{animation:ring 1.6s var(--ease) both;animation-delay:2.4s}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:var(--len);opacity:0}30%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes ring{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(2.6)}}
.map.live .ln{animation:none;opacity:1;stroke-dasharray:none}
.map.live .obs,.map.live .fd,.map.live .dec{animation:none;opacity:1;transform:none}
.map.live .ln.s{animation:shimS 7s ease-in-out infinite alternate}
.map.live .ln.c{animation:shimC 8s ease-in-out infinite alternate}
.map.live .ln.m{animation:shimM 9s ease-in-out infinite alternate}
.map.live .ln.o{animation:shimO 6s ease-in-out infinite alternate}
.map.live .ln:nth-child(3n){animation-delay:-2s}.map.live .ln:nth-child(3n+1){animation-delay:-4s}
.map.live .fd.s{animation:shimSF 7s ease-in-out infinite alternate}
.map.live .fd.c{animation:shimCF 8s ease-in-out infinite alternate}
.map.live .ring{animation:ring 3.6s var(--ease) infinite}
@keyframes shimS{from{stroke:var(--sup)}to{stroke:color-mix(in srgb,var(--sup) 55%,var(--mint))}}
@keyframes shimC{from{stroke:var(--coral)}to{stroke:color-mix(in srgb,var(--coral) 60%,#F5C6A0)}}
@keyframes shimSF{from{fill:var(--sup)}to{fill:color-mix(in srgb,var(--sup) 55%,var(--mint))}}
@keyframes shimCF{from{fill:var(--coral)}to{fill:color-mix(in srgb,var(--coral) 60%,#F5C6A0)}}
@keyframes shimM{from{stroke:var(--muted)}to{stroke:color-mix(in srgb,var(--muted) 60%,var(--mint))}}
@keyframes shimO{from{stroke:var(--border)}to{stroke:color-mix(in srgb,var(--border) 60%,var(--sup))}}
.map .pt{opacity:0;transition:opacity .6s}
.map.live .pt{opacity:1}
.map .pt.s{fill:var(--sup)}.map .pt.c{fill:var(--coral)}.map .pt.m{fill:var(--muted)}.map .pt.o{fill:var(--mint)}
.map .text h2{margin:14px 0 20px}
.map .text p{font-size:16px;color:var(--muted);line-height:1.6;max-width:40ch}
.map .text p b{color:var(--fg);font-weight:600}
.map .src{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center}
.map .src i{display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid var(--border);font-style:normal;font-size:9.5px;line-height:16px;text-align:center;background:var(--card)}

.close{text-align:center;display:grid;justify-items:center;gap:26px}
.close h2{max-width:16ch}
.close .cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}

footer{padding-block:28px 40px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);border-top:1px solid var(--border)}
footer .disc{max-width:78ch;line-height:1.6}
footer nav{display:flex;gap:18px}
footer nav a{text-decoration:none}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal.pre{opacity:1;transform:none}
  .map .obs,.map .fd,.map .dec,.map .ln{opacity:1;transform:none;stroke-dashoffset:0}
  .thread{height:100%!important}
}
.pill:disabled{opacity:1}
.map .text .illustration{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--muted)}

nav.top .right .availability{color:var(--muted);font-size:12px}
a.pill{cursor:pointer}
@media(max-width:560px){nav.top .right{flex-direction:column;align-items:flex-end;gap:8px;font-size:12px}nav.top .right .pill{font-size:12px;padding:10px 16px}}