html{color-scheme:dark}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: one pinned full-screen stage; a particle field carries the story while a single card changes underneath it. Single dark look, taken from the ArtifexAI pitch decks. */
:root{
  --ink:#0f1216; --ink2:#161a20; --paper:#F4F5F2; --teal:#25C1B4; --mint:#4BEBB7; --terra:#E2683F; --mute:#7d8494; --line:#2e3540;
  --display:'Poppins','Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,56px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--display);font-size:16px;line-height:1.5;overflow-x:hidden}
.scene{position:relative;height:945vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.brand{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);z-index:3}
.brand b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;text-transform:none;color:var(--paper)}
.brand b i{font-style:normal;color:var(--teal)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 18px}
h1{font-weight:500;font-size:clamp(34px,6.2vw,68px);line-height:1.04;letter-spacing:-.03em;margin:0 0 20px;text-wrap:balance}
h1 em{font-style:normal;color:var(--mint)}
/* the hero: one column on one spacing scale (--u): the headline, its line, the two buttons, then the honours under a hairline.
   A phone or a tall screen hangs it under the brand with the map below; a wide screen centres it in the height beside the map. */
.hero{--u:8px;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(12vh + env(safe-area-inset-top,0px));max-width:680px;z-index:2;transition:opacity .5s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1)}
.hero.off{opacity:0;transform:translateY(-18px);pointer-events:none}
.hero h1{margin:0 0 calc(var(--u)*2.5)}
.hero p.sub{font-size:clamp(15px,.4vw + 12px,20px);line-height:1.5;color:color-mix(in srgb,var(--paper) 66%,transparent);max-width:30em;margin:0}
.hero .cta{margin-top:calc(var(--u)*4)}
/* the honours: a hairline, then two aligned columns, the standing in mono and the prize in the body face */
.honour{list-style:none;margin:calc(var(--u)*5) 0 0;padding:calc(var(--u)*2.5) 0 0;border-top:1px solid var(--line);max-width:440px;display:grid;gap:calc(var(--u)*1.25)}
.honour li{display:grid;grid-template-columns:6.6rem minmax(0,1fr);column-gap:16px;align-items:baseline}
.honour b,.honour a{font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.honour span{font-size:13px;line-height:1.45;color:color-mix(in srgb,var(--paper) 62%,transparent);text-wrap:pretty}
.honour li.more a{grid-column:2;justify-self:start;color:var(--mint);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--mint) 40%,transparent);transition:border-color .15s linear}
.honour li.more a::after{content:" \2192";content:" \2192" / ""}
.honour li.more a:hover{border-color:var(--mint)}
.honour a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* a phone: a tighter scale, and each honour runs on as one line of text so the column clears the map below it */
@media (max-width:560px){
  .hero{--u:7px;top:calc(clamp(72px,9.5vh,96px) + env(safe-area-inset-top,0px))}
  .honour li{display:block;font-size:12.5px;line-height:1.45}
  .honour b{margin-right:8px;font-size:10px}
  .honour span{font-size:12.5px}
  .honour li.more a{font-size:10px}
}
@media (min-width:561px){
  .hero{--u:clamp(6px,1.05vh,11px);top:calc(14vh + env(safe-area-inset-top,0px))}
  .hero h1{font-size:clamp(34px,6.2vw,60px);max-width:12.4em}
}
/* wide screens: the column fills the height between the brand and the foot, and the headline (--h1) grows with the screen;
   at full height it breaks to four lines (10.6em), a shorter screen keeps it to three, and the column is as wide as the headline */
@media (min-width:561px) and (min-aspect-ratio:20/23){
  .hero{--h1:clamp(34px,min(4.2vw,6.8vh),92px);--hw:10.6;max-width:max(560px,calc(var(--h1)*var(--hw)));top:calc(64px + env(safe-area-inset-top,0px));bottom:6vh;display:flex;flex-direction:column;justify-content:center;justify-content:safe center}
  .hero h1{font-size:var(--h1);max-width:calc(var(--hw)*1em)}
}
@media (min-width:561px) and (min-aspect-ratio:20/23) and (max-height:840px){
  .hero{--h1:clamp(28px,min(3.7vw,6.2vh),56px);--hw:12.4;bottom:3vh}
}
/* laptop widths: main.js brings the map's west coast in under the column, so the honours keep narrower */
@media (min-width:561px) and (max-width:1359px) and (min-aspect-ratio:20/23){.honour{max-width:400px}}
/* a phone on its side: no room under the buttons, so the honours give way (as on a short phone) */
@media (min-width:561px) and (min-aspect-ratio:20/23) and (max-height:500px){.honour{display:none}}
/* big tall screens: the honours grow a step with the headline */
@media (min-width:1700px) and (min-height:960px) and (min-aspect-ratio:20/23){.honour{max-width:480px}.honour li{grid-template-columns:7.2rem minmax(0,1fr)}.honour b,.honour a{font-size:11px}.honour span{font-size:14px}}
.hint{position:absolute;left:var(--gutter);bottom:calc(28px + env(safe-area-inset-bottom,0px));font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);z-index:2;transition:opacity .4s}
.hint.off{opacity:0}
.hint::after{content:"";display:inline-block;width:38px;height:1px;background:var(--mute);margin-left:12px;vertical-align:middle}
.office{position:absolute;left:0;top:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);white-space:nowrap;opacity:0;pointer-events:none;z-index:2;will-change:transform,opacity}
.office small{display:block;font-size:10px;letter-spacing:.08em;color:var(--mute);text-transform:none;margin-top:2px}
/* the offices step: each name sits in the corner of its office's box, and brightens while the home being followed is on file there */
.office.box{text-align:left;white-space:normal;color:color-mix(in srgb,var(--paper) 62%,transparent);transition:color .4s}
.office.box small{transition:color .4s}
.office.box.on{color:var(--paper)}
.office.box.on small{color:color-mix(in srgb,var(--paper) 62%,transparent)}
#offices-scene.bare .office small{display:none}
.cards{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(34px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;align-items:end;z-index:3;pointer-events:none}
.card{grid-area:1/1;width:min(540px,100%);background:color-mix(in srgb,var(--ink2) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;padding:18px 22px 20px;opacity:0;transform:translateY(14px);transition:opacity .35s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1)}
.card.on{opacity:1;transform:none}
.card h2{font-weight:500;font-size:clamp(18px,2.2vw,22px);line-height:1.2;letter-spacing:-.015em;margin:0 0 6px;text-wrap:balance}
.card p{margin:0;font-size:14px;color:color-mix(in srgb,var(--paper) 62%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--mute);transition:color .3s,border-color .3s,background .3s}
.chip.f.lit{color:var(--teal);border-color:var(--teal)}
.chip.o.lit{color:var(--terra);border-color:var(--terra)}
.chip.s.lit{color:var(--mint);border-color:var(--mint)}
.answer{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--paper);opacity:0;transition:opacity .5s}
.answer.on{opacity:1}
.answer b{font-weight:600;font-size:22px;letter-spacing:-.02em;margin-right:8px}
.answer span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:block;margin-top:4px}
/* the step rail down the right edge, like a scroll bar: seven segments, each filling as you scroll through it, the current one named */
.steps{position:absolute;right:calc(var(--gutter) - 12px);top:50%;transform:translateY(-50%);height:min(44vh,360px);z-index:3;transition:opacity .4s}
@media (max-width:560px),(max-height:560px){.steps.early{opacity:0;pointer-events:none}}
.steps ol{display:grid;grid-template-rows:repeat(7,minmax(0,1fr));gap:6px;height:100%;margin:0;padding:0;list-style:none}
.steps li{position:relative}
.steps button{display:block;height:100%;padding:0 12px;margin:0;background:none;border:0;cursor:pointer}
.steps i{display:block;width:2px;height:100%;border-radius:1px;background:color-mix(in srgb,var(--paper) 40%,transparent);overflow:hidden}
.steps i b{display:block;width:100%;height:100%;background:var(--paper);transform-origin:50% 0;transform:scaleY(0)}
.steps li.on i b{background:var(--teal)}
.steps span{position:absolute;right:22px;top:-5px;padding:3px 7px;border-radius:4px;background:color-mix(in srgb,var(--ink) 88%,transparent);white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);opacity:0;transform:translateX(4px);transition:opacity .3s,transform .3s;pointer-events:none}
.steps.naming li.on span{opacity:.85;transform:none}
.steps button:hover span,.steps button:focus-visible span{opacity:.6;transform:none}
.steps li.on button:hover span{opacity:1}
.steps button:hover i,.steps button:focus-visible i{background:color-mix(in srgb,var(--paper) 60%,transparent)}
.steps button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:4px}
.close{padding-block:clamp(72px,14vh,160px);padding-inline:var(--gutter);border-top:1px solid var(--line)}
.close h2{font-weight:500;font-size:clamp(26px,4vw,46px);line-height:1.12;letter-spacing:-.025em;max-width:22ch;margin:0 0 28px;text-wrap:balance}
.close h2 em{font-style:normal;color:var(--teal)}
.close p{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);max-width:70ch;margin:0}
@media (max-width:560px){
  .brand span{display:none}
  .office{font-size:9px}
  .office small{display:none}
  .stage .office.stl small{display:block;white-space:normal;max-width:72vw}
  .card{padding:14px 16px 16px}
  .steps{right:-8px;height:36vh}
  .steps span{display:none}
}
@media (prefers-reduced-motion:reduce){.hero,.card,.hint{transition:none}}

.sec{padding-block:clamp(64px,11vh,128px);padding-inline:var(--gutter);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.sec>*{min-width:0}
.sec .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 16px}
.sec h2{font-weight:500;font-size:clamp(26px,3.4vw,42px);line-height:1.1;letter-spacing:-.025em;margin:0 0 16px;text-wrap:balance}
.sec .lede{font-size:16px;color:color-mix(in srgb,var(--paper) 66%,transparent);max-width:44ch;margin:0}
.src{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:18px 0 0;line-height:1.7}
.ledger{display:grid;gap:0;margin:0;padding:0;list-style:none}
.ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ledger b{font-weight:500;font-size:17px}
.ledger span{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;color:var(--paper)}
.ledger small{grid-column:1/-1;font-size:13px;color:var(--mute)}
.versus{margin-top:28px;display:grid;gap:14px}
.bar{display:grid;gap:6px}
.bar .lab{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.bar .lab b{font-weight:500;color:var(--paper);font-variant-numeric:tabular-nums}
.bar i{display:block;height:10px;border-radius:2px;background:var(--line)}
.bar.a i{width:100%;background:color-mix(in srgb,var(--paper) 38%,transparent)}
.bar.b i{width:7.9%;background:var(--mint)}
.facts{display:grid;gap:0;margin:0 0 30px;padding:0;list-style:none}
.facts li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);padding-top:3px}
.qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qs div{background:var(--ink);padding:18px 18px 20px}
.qs em{font-style:normal;display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:8px}
.qs p{margin:0;font-size:15px;line-height:1.4}
.keeps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px;margin:0;padding:0;list-style:none}
.keeps b{display:block;font-weight:500;font-size:17px;margin-bottom:4px}
.keeps span{font-size:14px;color:color-mix(in srgb,var(--paper) 62%,transparent)}
blockquote{margin:36px 0 0;padding:0;font-size:clamp(20px,2.4vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
blockquote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:400}
.levels{padding-block:clamp(48px,8vh,96px);padding-inline:var(--gutter);border-top:1px solid var(--line)}
.levels .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 22px}
.levels ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(20px,4vw,56px);margin:0;padding:0;list-style:none}
.levels em{font-style:normal;display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.levels b{display:block;font-weight:500;font-size:17px;margin-bottom:6px}
.levels span{font-size:14px;color:color-mix(in srgb,var(--paper) 62%,transparent)}
@media (max-width:820px){.sec{grid-template-columns:minmax(0,1fr)}.levels ul{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.qs,.keeps{grid-template-columns:minmax(0,1fr)}.facts li{grid-template-columns:minmax(0,1fr);gap:4px}}

.nw{white-space:nowrap}
.rot{display:inline-block;min-width:4.6em;transition:opacity .3s cubic-bezier(.445,.05,.55,.95),filter .3s cubic-bezier(.445,.05,.55,.95),transform .3s cubic-bezier(.445,.05,.55,.95)}
.rot.out{opacity:0;filter:blur(8px);transform:translateY(-.12em)}
.card.on{pointer-events:auto}
.tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.tabs button{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--mute);cursor:pointer;transition:background .15s linear,color .15s linear,border-color .15s linear}
.tabs button:hover{color:var(--paper);border-color:var(--mute)}
.tabs button.on{background:var(--paper);border-color:var(--paper);color:var(--ink)}
/* while the questions take turns, a line fills under the one on show; it goes once the visitor picks one */
.tabs button{position:relative}
.tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1.5px;border-radius:1px;background:color-mix(in srgb,var(--ink) 60%,transparent);transform-origin:0 50%;transform:scaleX(var(--qp,0))}
.tabs.manual button.on::after{display:none}
.tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.chip.lit{color:var(--paper);border-color:var(--mute)}
.answer em{font-style:normal}
.wide{padding-block:clamp(64px,11vh,128px);padding-inline:var(--gutter);border-top:1px solid var(--line)}
.wide .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 16px}
.wide h2{font-weight:500;font-size:clamp(26px,3.6vw,46px);line-height:1.1;letter-spacing:-.025em;margin:0 0 16px;max-width:24ch;text-wrap:balance}
.wide h2 em{font-style:normal;color:var(--mint)}
.wide .lede{font-size:16px;color:color-mix(in srgb,var(--paper) 66%,transparent);max-width:56ch;margin:0 0 40px}
.ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ex>div{background:var(--ink);padding:24px 22px 26px;min-width:0}
.ex h3,.qg h3{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin:0 0 18px}
.ex dl{margin:0;display:grid;gap:16px}
.ex dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ex dd{margin:5px 0 0;font-size:15px;line-height:1.4;color:color-mix(in srgb,var(--paper) 74%,transparent)}
.ex dd.rec{color:var(--mint);font-weight:500;font-size:17px}
.wide .versus{max-width:720px;margin-top:40px}
.qg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px clamp(24px,4vw,64px)}
.qg>div{min-width:0}
.qg h3{color:var(--teal);padding-bottom:12px;border-bottom:1px solid var(--line)}
.qg ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.qg li{font-size:15px;line-height:1.4}
.close p.contact{font-family:var(--display);font-size:18px;letter-spacing:0;text-transform:none;margin:0 0 36px;color:var(--paper);user-select:all}
@media (max-width:820px){.ex{grid-template-columns:minmax(0,1fr)}.qg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.qg{grid-template-columns:minmax(0,1fr)}.rot{min-width:0}.nw{white-space:normal}}

.brand nav{display:flex;gap:22px}
.brand a{color:var(--mute);text-decoration:none;transition:color .15s linear}
.brand a:hover,.brand a:focus-visible{color:var(--paper)}
.door{font-family:var(--display);font-weight:500;font-size:clamp(19px,2.2vw,26px);letter-spacing:-.015em;margin:56px 0 10px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:24px}
.wide h2+.door{margin-top:32px}
.door+.lede{margin-bottom:32px}
@media (max-width:1000px){.levels ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.brand nav{gap:12px;font-size:10px;letter-spacing:.08em}.levels ul{grid-template-columns:minmax(0,1fr)}}
.partners .pl{font-size:clamp(18px,2vw,24px);line-height:1.35;max-width:36ch;margin:0;font-weight:500;letter-spacing:-.015em}
.partners a{color:var(--mint);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;display:block;margin-top:14px;font-size:16px;font-weight:400}
.partners a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---- sections below the scene: each one moves ---- */
.js [data-r]{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .7s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1),filter .8s cubic-bezier(.19,1,.22,1)}
.js [data-r].in{opacity:1;transform:none;filter:none}
.kk{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 16px}
.hh{font-weight:500;font-size:clamp(26px,3.6vw,46px);line-height:1.1;letter-spacing:-.025em;margin:0 0 16px;max-width:22ch;text-wrap:balance}
.hh em{font-style:normal;color:var(--mint)}
.ll{font-size:16px;color:color-mix(in srgb,var(--paper) 66%,transparent);max-width:54ch;margin:0}
.open{padding-block:clamp(64px,11vh,130px);padding-inline:var(--gutter)}
.panel{margin-inline:var(--gutter);margin-block:clamp(12px,2vw,24px);padding:clamp(28px,5.5vw,76px);background:var(--ink2);border:1px solid var(--line);border-radius:clamp(16px,2vw,28px);overflow:hidden}
.center{text-align:center}.center .hh,.center .ll{margin-inline:auto}
/* marquee with one proof line */
.mq{position:relative;padding-block:clamp(34px,6vh,64px);overflow:hidden;border-top:1px solid var(--line)}
.mq-track{display:flex;gap:56px;width:max-content;animation:mq 60s linear infinite;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.mq-wrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 30%,transparent 38%,transparent 62%,#000 70%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 30%,transparent 38%,transparent 62%,#000 70%,#000 86%,transparent)}
.mq-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font-size:13px;color:var(--paper);text-align:center;width:min(22%,300px);line-height:1.35}
.mq-pill b{font-weight:600;color:var(--mint)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (max-width:760px){.mq-wrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}.mq-pill{position:static;transform:none;width:auto;padding-inline:var(--gutter);margin-top:18px}}
/* the study and the record */
.vs{margin-top:clamp(28px,4vw,48px);background:var(--ink);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,36px);text-align:left}
.vs-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:clamp(18px,3vw,30px)}
.vs-tabs button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--mute);cursor:pointer;transition:background .15s linear,color .15s linear,border-color .15s linear}
.vs-tabs button:hover{color:var(--paper)}
.vs-tabs button[aria-selected="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.vs-tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.vs-dec{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
.vs-dec span{color:var(--paper);letter-spacing:.06em}
.vs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,4vw,56px);transition:opacity .2s cubic-bezier(.445,.05,.55,.95)}
.vs-grid.sw{opacity:0}
.vs-col{min-width:0}
.vs-col .lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.vs-col b{display:block;font-weight:500;font-size:clamp(34px,6vw,76px);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.vs-col p{margin:12px 0 0;font-size:clamp(15px,1.5vw,18px);line-height:1.35;max-width:28ch}
.vs-col.old b,.vs-col.old p{color:color-mix(in srgb,var(--paper) 42%,transparent)}
.vs-col.old{border:1px dashed var(--line);border-radius:10px;padding:clamp(14px,2vw,24px);position:relative}
.vs-col.old::after{content:"True the day it was written";position:absolute;right:12px;bottom:10px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);opacity:.8}
.vs-col.new{padding:clamp(14px,2vw,24px)}
.vs-col.new b{color:var(--mint)}
.cost{max-width:760px;margin:clamp(28px,4vw,48px) auto 0;display:grid;gap:14px;text-align:left}
.cost .lab{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.cost .lab b{font-weight:500;color:var(--paper);font-variant-numeric:tabular-nums}
.cost i{display:block;height:10px;border-radius:2px;transform-origin:left;transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
.cost .a i{background:color-mix(in srgb,var(--paper) 38%,transparent)}
.cost .b i{width:7.9%;background:var(--mint)}
.js .cost i{transform:scaleX(0)}.js .cost.in i{transform:none}.js .cost.in .b i{transition-delay:.5s}
.fine{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:18px 0 0;line-height:1.7}
/* questions: cards scroll, the list stays */
.acc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,88px);margin-top:clamp(32px,5vw,64px);align-items:start}
.acc-cards{display:grid;gap:clamp(14px,2vw,24px);min-width:0}
.qc{position:relative;border-radius:18px;overflow:hidden;background:var(--ink2);border:1px solid var(--line);min-height:min(58vh,440px);display:flex;flex-direction:column;justify-content:flex-end;transition:border-color .3s,opacity .3s}
.qc canvas{position:absolute;inset:0;width:100%;height:100%}
.qc h3{position:relative;margin:0;padding:22px;font-weight:500;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;background:linear-gradient(0deg,color-mix(in srgb,var(--ink2) 92%,transparent),transparent)}
.qc .inq{position:relative;display:none;padding:0 22px 14px;background:color-mix(in srgb,var(--ink2) 92%,transparent)}
/* an office's questions, as a numbered list: a mint numeral in its own narrow column, the question beside it,
   and a hairline between rows that starts where the questions start (the pinned list copies the card's list) */
.qc .inq,.acc-list .inq{--num:36px;counter-reset:q;list-style:none;margin:0}
.qc .inq li,.acc-list .inq li{counter-increment:q;display:grid;grid-template-columns:var(--num) minmax(0,1fr);align-items:baseline;padding:14px 0;font-size:16.5px;line-height:1.45;letter-spacing:-.005em;color:color-mix(in srgb,var(--paper) 86%,transparent);text-wrap:balance}
.qc .inq li+li,.acc-list .inq li+li{background:linear-gradient(var(--line),var(--line)) var(--num) 0/calc(100% - var(--num)) 1px no-repeat}
.qc .inq li::before,.acc-list .inq li::before{content:counter(q,decimal-leading-zero);content:counter(q,decimal-leading-zero) / "";font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mint);font-variant-numeric:tabular-nums}
.js .acc.live .qc{opacity:.45}.js .acc.live .qc.on{opacity:1;border-color:var(--mute)}
.acc-list{position:sticky;top:calc(14vh + env(safe-area-inset-top,0px));min-width:0}
.acc-list .item{border-top:1px solid var(--line)}
.acc-list .item:last-child{border-bottom:1px solid var(--line)}
.acc-list button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 2px;background:none;border:0;color:var(--mute);font-family:var(--display);font-size:clamp(17px,1.7vw,21px);font-weight:500;letter-spacing:-.015em;text-align:left;cursor:pointer;transition:color .2s}
.acc-list button::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s}
.acc-list .item.on button{color:var(--paper)}
.acc-list .item.on button::after{transform:rotate(135deg)}
.acc-list button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.acc-list .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.25,.46,.45,.94)}
.acc-list .item.on .body{grid-template-rows:1fr}
.acc-list .body>div{overflow:hidden;display:grid;margin-right:-6px;padding-right:6px}
.acc-list .inq{padding:0 0 0 2px;margin-top:-6px}
/* as an office opens, its questions settle in one after another; as it closes they stay put until the row has folded away.
   The rows give a little on a short screen so the pinned list still fits */
.acc-list .inq li{padding-block:clamp(11px,1.6vh,14px);font-size:clamp(16px,calc(12px + .3125vw),16.5px);transition:opacity .45s linear,transform .6s cubic-bezier(.19,1,.22,1)}
.acc-list .item:not(.on) .inq li{opacity:0;transform:translateY(6px);transition:opacity 0s linear .5s,transform 0s linear .5s}
.acc-list .item.on .inq li:nth-child(1){transition-delay:.08s}.acc-list .item.on .inq li:nth-child(2){transition-delay:.16s}.acc-list .item.on .inq li:nth-child(3){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.acc-list .body,.acc-list .inq li,.acc-list .item:not(.on) .inq li{transition:none}.acc-list .item:not(.on) .inq li{transform:none}}
@media (max-width:860px){.acc{grid-template-columns:minmax(0,1fr)}.acc-list{display:none}.qc .inq{display:block}.qc .inq li{padding-block:9px;font-size:16px;text-wrap:pretty}.qc{min-height:0}.qc canvas{position:relative;height:200px}.js .acc.live .qc{opacity:1}}
/* fewer people, more questions */
.tick{overflow:hidden;margin-block:clamp(28px,5vw,56px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tick div{display:flex;gap:64px;width:max-content;animation:mq 46s linear infinite;white-space:nowrap;font-size:clamp(20px,2.6vw,34px);font-weight:500;letter-spacing:-.02em}
.tick em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin-right:14px;vertical-align:middle}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);padding-inline:var(--gutter)}
.four div{min-width:0;border:1px solid var(--line);border-radius:14px;padding:20px 20px 24px;background:var(--ink2);transition:border-color .5s,background .5s,transform .5s cubic-bezier(.19,1,.22,1)}
.four em{font-style:normal;display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:26px;transition:color .5s}
.four p{margin:0;font-size:clamp(16px,1.5vw,19px);line-height:1.3;font-weight:500;letter-spacing:-.01em}
.four div.hot{border-color:var(--mint);transform:translateY(-6px)}.four div.hot em{color:var(--mint)}
@media (max-width:900px){.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.four{grid-template-columns:minmax(0,1fr)}}
/* the city keeps everything */
.wall{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.wall>*{min-width:0}
.wall canvas{position:static;inset:auto;width:100%;height:auto;aspect-ratio:4/3;display:block;border-radius:14px;background:var(--ink);border:1px solid var(--line)}
.prom{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(18px,3vw,40px)}
.prom b{display:block;font-weight:500;font-size:16px;margin-bottom:4px}
.prom span{font-size:14px;color:color-mix(in srgb,var(--paper) 62%,transparent)}
.say{margin:clamp(32px,5vw,56px) 0 0;padding:0;font-size:clamp(22px,3vw,38px);font-weight:500;letter-spacing:-.025em;line-height:1.15}
.say cite{display:block;margin-top:12px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:400}
@media (max-width:860px){.wall{grid-template-columns:minmax(0,1fr)}.prom{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.prom{grid-template-columns:minmax(0,1fr)}}
/* every level */
.lv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin-top:clamp(28px,4vw,48px)}
.lv div{min-width:0;border-top:1px solid var(--mute);padding-top:18px}
.lv em{font-style:normal;display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:38px}
.lv b{display:block;font-weight:500;font-size:clamp(18px,1.9vw,24px);line-height:1.2;letter-spacing:-.015em;margin-bottom:8px}
.lv span{font-size:14px;color:color-mix(in srgb,var(--paper) 62%,transparent)}
.js .lv div{transition-delay:calc(var(--n)*.12s)}
@media (max-width:760px){.lv{grid-template-columns:minmax(0,1fr)}.lv em{margin-bottom:14px}}
/* close */
.end{position:relative;margin-inline:var(--gutter);margin-block:clamp(12px,2vw,24px) clamp(20px,3vw,40px);border-radius:clamp(16px,2vw,28px);overflow:hidden;border:1px solid var(--line);background:var(--ink2);min-height:min(74vh,620px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,5.5vw,76px)}
.end canvas{position:absolute;inset:0;width:100%;height:100%}
.end>*:not(canvas){position:relative}
.end .hh{font-size:clamp(30px,5vw,64px);max-width:16ch;margin-bottom:22px}
.end .mail{font-size:18px;margin:0 0 26px;user-select:all}
.end .pl{font-size:15px;color:color-mix(in srgb,var(--paper) 70%,transparent);margin:0 0 26px;max-width:52ch}
.end .pl a{color:var(--mint);text-underline-offset:4px;text-decoration-thickness:1px}
@media (prefers-reduced-motion:reduce){.mq-track,.tick div{animation:none}}
.qc h3 small{display:block;margin-top:6px;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:0;line-height:1.4;color:color-mix(in srgb,var(--paper) 62%,transparent);max-width:34ch}
.lv canvas{position:static;inset:auto;width:100%;height:auto;aspect-ratio:4/3;display:block;margin-bottom:20px}
.lv em{margin-bottom:14px}
.lost{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.6vw,40px);padding-inline:var(--gutter);margin-block:clamp(28px,5vw,56px) clamp(24px,3vw,36px)}
.lost div{min-width:0;border-top:1px solid var(--terra);padding-top:16px}
.lost b{display:block;font-weight:500;font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.035em;color:var(--terra);font-variant-numeric:tabular-nums;margin-bottom:12px}
.lost p{margin:0;font-size:15px;line-height:1.4;color:color-mix(in srgb,var(--paper) 80%,transparent)}
.bridge{padding-inline:var(--gutter);margin-bottom:clamp(18px,2.4vw,28px);max-width:none;color:var(--paper);font-size:clamp(17px,1.7vw,21px)}
@media (max-width:900px){.lost{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.lost{grid-template-columns:minmax(0,1fr)}}
.lv span{display:block}
.lv ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.lv li{position:relative;padding-left:16px;font-size:14px;line-height:1.4;color:color-mix(in srgb,var(--paper) 84%,transparent)}
.lv li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--mint)}
.lv em{margin-bottom:16px;line-height:1.6}
.lv b{font-size:clamp(17px,1.65vw,21px);line-height:1.3;margin-bottom:12px}
.lv span{font-size:15px;line-height:1.5}
.lv .scale{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--paper)}
.lv .scale i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:6px}
/* scale: buttons, the trust lines, the state labels, your town */
/* buttons: pills in the mono of the labels on every page but the homepage */
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:12px 18px;border-radius:999px;background:var(--paper);color:var(--ink);border:1px solid var(--paper);transition:background .15s linear,color .15s linear,border-color .15s linear}
.btn:hover{background:transparent;color:var(--paper)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--paper)}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* the homepage's buttons (body.home): product buttons in the body face, not the mono of the labels, so they never read as one.
   48px tall, an 11px corner, solid mint with an arrow (drawn, so it is the same on every system). Every button looks the same,
   .ghost included: two styles side by side read as two kinds of thing (the owner's call). Scoped to the homepage until the
   other pages are reviewed; these come after the pills so they win there */
:root{--arrow-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E");}
.home .cta{gap:12px}
.home .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 18px 10px 22px;border:1px solid var(--mint);border-radius:11px;background:var(--mint);color:var(--ink);font:500 15px/1.25 var(--display);letter-spacing:-.005em;text-transform:none;text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 10px 26px -14px color-mix(in srgb,var(--mint) 80%,transparent);transition:background-color .15s linear,border-color .15s linear,box-shadow .2s linear}
.home .btn::after{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--arrow-r) center/contain no-repeat;mask:var(--arrow-r) center/contain no-repeat;transition:transform .25s cubic-bezier(.19,1,.22,1)}
.home .btn:hover{background:color-mix(in srgb,var(--mint) 70%,var(--paper));border-color:color-mix(in srgb,var(--mint) 70%,var(--paper));box-shadow:0 12px 30px -12px color-mix(in srgb,var(--mint) 90%,transparent)}
.home .btn:hover::after{transform:translateX(3px)}
.home .btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.home .btn,.home .btn::after{transition:none}.home .btn:hover::after,.home .btn:active{transform:none}}
.office.stl{z-index:2}
.office.stl small{max-width:none}
.end .mail a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.end .mail a:hover{border-color:var(--paper)}
.tw{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.tw>*{min-width:0}
.tw-pick{display:grid;gap:8px;margin:28px 0 0}
.tw-pick span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.tw-pick select{font:500 17px/1.2 var(--display);color:var(--paper);background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 40px 12px 14px;width:100%;max-width:360px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
.tw-pick select:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.tw-rec{margin:20px 0 0;display:grid;gap:0}
.tw-rec div{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.tw-rec dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.tw-rec dd{margin:0;font-size:15px;line-height:1.4}
.tw-q{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:24px 0 10px}
.tw-qs{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:8px}
.tw-qs li{font-size:15px;line-height:1.4;padding-left:16px;position:relative}
.tw-qs li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--paper);opacity:.6}
.tw canvas{position:static;inset:auto;width:100%;height:auto;aspect-ratio:16/10;display:block;border-radius:14px;background:var(--ink);border:1px solid var(--line)}
@media (max-width:860px){.tw{grid-template-columns:minmax(0,1fr)}.tw canvas{order:-1}}
@media (max-width:560px){.cta{margin-top:18px}.btn{padding:11px 15px;font-size:10px}.tw-rec div{grid-template-columns:minmax(0,1fr);gap:4px}}
/* on the homepage a phone stacks a pair of buttons at one full width, rather than two widths that wrap */
@media (max-width:560px){.home .cta{flex-direction:column;gap:10px}}
/* each office's page link, under its questions: a small outlined button at the right, with the homepage buttons' drawn arrow.
   The pinned list on a wide screen copies the card's link (a.more); a narrow screen shows the card's own (.qc-more) */
.acc-list .body a.more,.qc-more{align-items:center;gap:8px;min-height:40px;padding:8px 14px 8px 16px;border:1px solid color-mix(in srgb,var(--mint) 55%,transparent);border-radius:11px;color:var(--mint);font:500 14px/1.25 var(--display);letter-spacing:-.005em;text-decoration:none;transition:background-color .15s linear,border-color .15s linear,color .15s linear}
.acc-list .body a.more::after,.qc-more::after{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:var(--arrow-r) center/contain no-repeat;mask:var(--arrow-r) center/contain no-repeat;transition:transform .25s cubic-bezier(.19,1,.22,1)}
.acc-list .body a.more:hover,.qc-more:hover{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.acc-list .body a.more:hover::after,.qc-more:hover::after{transform:translateX(3px)}
.acc-list .body a.more:focus-visible,.qc-more:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.acc-list .body a.more{display:inline-flex;justify-self:end;margin:6px 0 clamp(16px,2.4vh,22px)}
.qc-more{position:relative;display:none;width:fit-content;margin:0 22px 22px auto}
@media (max-width:860px){.qc-more{display:flex}}
@media (prefers-reduced-motion:reduce){.acc-list .body a.more,.qc-more,.acc-list .body a.more::after,.qc-more::after{transition:none}.acc-list .body a.more:hover::after,.qc-more:hover::after{transform:none}}
@media (prefers-reduced-motion:reduce){.js [data-r]{filter:none}}
/* the three lenses over the map of the country: aerial photographs of where the work is, in glass */
.orb{position:absolute;left:0;top:0;z-index:3;display:block;width:0;height:0;text-decoration:none;color:var(--paper);opacity:0;pointer-events:auto;will-change:transform,opacity}
.orb::before{content:"";position:absolute;left:0;top:0;width:1px;height:var(--len,60px);transform-origin:0 0;transform:rotate(var(--ang,180deg));background:linear-gradient(rgba(244,245,242,.6),rgba(244,245,242,.08))}
.orb::after{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--paper)}
.orb-img{position:absolute;left:var(--dx);top:var(--dy);width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(244,245,242,.45),inset 0 -16px 26px rgba(15,18,22,.35),inset 0 12px 22px rgba(255,255,255,.14),0 14px 34px rgba(0,0,0,.5);animation:orbfloat 6s ease-in-out infinite;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.orb-img::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.35),rgba(255,255,255,0) 38%)}
.orb:hover .orb-img{transform:scale(1.08)}
.orb-cap{position:absolute;left:var(--dx);top:var(--dy);margin:58px 0 0 0;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:center;line-height:1.5}
.orb-cap b{display:block;font-weight:500;color:var(--paper)}
.o-state .orb-img{animation-delay:-2s}.o-fed .orb-img{animation-delay:-4s}
@keyframes orbfloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (max-width:560px){.orb-img{width:62px;height:62px;margin:-31px 0 0 -31px}.orb-cap{margin-top:34px;font-size:9px}.brand nav .wide-only{display:none}#usLabel{display:none}}
@media (prefers-reduced-motion:reduce){.orb-img{animation:none}}
.end.photo{background:var(--ink2) center/cover no-repeat}
.end.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,26,32,.25),rgba(22,26,32,.94) 70%)}
.lv a.more{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);text-decoration:none}
.orb-cap{line-height:1.55;padding:2px 8px 3px;border-radius:10px;background:color-mix(in srgb,var(--ink) 72%,transparent);box-shadow:0 0 12px 6px color-mix(in srgb,var(--ink) 72%,transparent)}
@media (max-width:560px){
  .orb-cap{white-space:normal;width:max-content;max-width:none;padding:2px 6px 3px}
  .o-state .orb-cap{width:142px}
  .o-town .orb-cap{width:128px;transform:translateX(-62%)}
  .o-fed .orb-cap{margin:0 0 0 38px;transform:translateY(-50%);text-align:left}
  .o-fed{--dx:-40px!important;--dy:-150px!important}
  .o-state{--dx:-130px!important;--dy:70px!important}
  .o-town{--dx:-14px!important;--dy:84px!important}
}
@media (max-width:560px) and (max-height:780px){
  .o-fed{--dy:-100px!important}
}
@media (max-width:560px) and (max-height:700px){
  .honour{display:none}
  .orb-img{width:54px;height:54px;margin:-27px 0 0 -27px}
  .orb-cap{margin-top:30px}
  .o-fed .orb-cap{margin:0 0 0 34px}
  .o-state{--dx:-118px!important;--dy:66px!important}
  .o-town{--dx:-10px!important;--dy:64px!important}
}
.cred{padding:clamp(44px,8vh,88px) var(--gutter);border-top:1px solid var(--line);display:grid;gap:clamp(30px,5vh,52px)}
.cred-row{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:start}
.cred-k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0;padding-top:17px}
.cred-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2.2vw,32px)}
.cred-list li{padding-top:14px;border-top:1px solid var(--line);min-width:0}
.cred-list b{display:block;font-weight:500;font-size:clamp(16px,1.45vw,19px);line-height:1.25;letter-spacing:-.01em;color:var(--paper);text-wrap:balance}
.cred-list.hon b{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em}
.cred-list span{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--mute);text-wrap:pretty}
.cred-list .more{border-top-color:transparent;padding-top:20px}
.cred-list .more a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--mint) 40%,transparent);padding-bottom:2px}
.cred-list .more a::after{content:" \2192"}
.cred-list .more a:hover{border-color:var(--mint)}
.cred-list .more a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media (max-width:860px){.cred-row{grid-template-columns:minmax(0,1fr);gap:4px}.cred-k{padding-top:0}.cred-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}}
@media (max-width:520px){.cred{gap:28px}.cred-list{grid-template-columns:minmax(0,1fr);row-gap:0}.cred-list li{padding:12px 0;border-top:0;border-bottom:1px solid var(--line)}.cred-list .more{border-bottom:0;padding-top:16px}.cred-k{padding-bottom:4px}}
/* laptop-sized wide screens: smaller lenses (main.js moves the map right and lower to leave the headline column room) */
@media (min-width:561px) and (max-width:1359px) and (min-aspect-ratio:20/23){
  .orb-img{width:84px;height:84px;margin:-42px 0 0 -42px}
  .orb-cap{margin-top:48px}
  .o-fed{--dx:70px!important;--dy:-118px!important}
}
/* short wide windows: the step rail stands in for the scroll hint */
@media (min-width:561px) and (max-height:720px) and (min-aspect-ratio:20/23){.hint{display:none}}
@media (min-width:561px) and (max-width:1359px) and (max-height:720px) and (min-aspect-ratio:20/23){.o-fed{--dx:100px!important;--dy:-78px!important}}
/* short wide windows: the office names keep to one line so the tighter ring stays legible */
@media (min-width:561px) and (max-height:720px) and (min-aspect-ratio:20/23){#offices-scene .office small{display:none}}
/* laptop widths: the town lens leans left of its pin so its caption stays on screen */
@media (min-width:561px) and (max-width:1199px) and (min-aspect-ratio:20/23){.o-town{--dx:-14px!important;--dy:-62px!important}}
/* wide screens: the Defense lens sits right of its pin so its caption clears the honours */
@media (min-width:1360px) and (min-aspect-ratio:20/23){.o-fed{--dx:64px!important;--dy:-118px!important}}
/* the narrowest phones: the headline keeps to three lines so the honours clear the lenses */
@media (max-width:380px){.hero h1{font-size:31px}.o-fed{--dy:-76px!important}}
@media (max-width:380px) and (max-height:620px){.o-fed{--dy:-34px!important}}
/* the one town: its photograph faint under the dots, its copy in the left column (a card at the foot on a tall screen), and a few places named on the map */
.stage canvas.aer{inset:auto;left:0;top:0;transform-origin:0 0;opacity:0;visibility:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent);mask-image:radial-gradient(closest-side,#000 58%,transparent);will-change:transform,opacity}
.tcopy{position:absolute;left:var(--gutter);top:50%;width:min(380px,30vw);margin-top:-150px;z-index:2;opacity:0;pointer-events:none;will-change:opacity,translate}
.tcopy .eyebrow{font-size:12px;color:var(--teal);margin:0 0 16px}
.tcopy h2{font-weight:500;font-size:clamp(24px,2.3vw,33px);line-height:1.1;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
.tcopy p{margin:0;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--paper) 62%,transparent);text-wrap:pretty}
.tcopy .tkey{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.08em;line-height:1.55;color:var(--mute)}
.tcopy .tkey i{flex:none;width:7px;height:7px;margin-top:3px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 3px color-mix(in srgb,var(--paper) 14%,transparent)}
.tcopy .tkey b{display:block;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
/* a named place: a dot on the spot, a hairline up (--dir:-1) or down (1) of --h, and the label beside its end, right (--side:0) or left (1); lengths follow the map's scale */
.pin{--k:min(1px,.1111vmin);--L:calc(var(--h,60)*var(--k));position:absolute;left:0;top:0;width:0;height:0;z-index:2;opacity:0;pointer-events:none;will-change:transform,opacity}
.pin::before{content:"";position:absolute;left:0;top:0;width:1px;height:var(--L);transform-origin:0 0;transform:scaleY(var(--dir,-1));background:linear-gradient(rgba(244,245,242,.7),rgba(244,245,242,.12))}
.pin::after{content:"";position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 20%,transparent),0 0 14px 2px color-mix(in srgb,var(--mint) 45%,transparent)}
.pin span{position:absolute;left:calc(var(--side,0)*1px);top:calc(var(--dir,-1)*var(--L));transform:translate(calc(var(--side,0)*-100%),calc((var(--dir,-1) - 1)*50%));width:max-content;max-width:var(--mw,none);padding:3px calc(var(--side,0)*10px) 3px calc((1 - var(--side,0))*10px);border-style:solid;border-color:rgba(244,245,242,.14);border-width:0 calc(var(--side,0)*1px) 0 calc((1 - var(--side,0))*1px);text-align:var(--ta,left);font-family:var(--mono);font-size:10px;letter-spacing:.08em;line-height:1.5;color:var(--mute);text-shadow:0 0 8px var(--ink),0 0 2px var(--ink)}
.pin b{display:block;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.pin.p1{--h:40;--dir:1;--side:1;--ta:right}
.pin.p2{--h:140;--dir:1;--side:1;--ta:right}
.pin.p3{--h:46;--dir:-1;--side:0}
@media (max-width:1359px) and (min-aspect-ratio:20/23){.tcopy{width:min(360px,27vw)}.pin.p1{--side:0;--ta:left;--mw:21ch}}
@media (min-width:561px) and (max-height:620px) and (min-aspect-ratio:20/23){.tcopy{margin-top:-110px}.tcopy h2{font-size:clamp(22px,2.4vw,30px)}.tcopy p{font-size:14px}.tcopy .tkey{margin-top:16px;padding-top:12px}}
@media (min-width:561px) and (max-height:460px) and (min-aspect-ratio:20/23){.tcopy .tkey{display:none}}
@media (max-width:560px),(max-aspect-ratio:20/23){
  .tcopy{top:auto;left:var(--gutter);right:var(--gutter);bottom:calc(34px + env(safe-area-inset-bottom,0px));width:auto;max-width:540px;margin:0 auto;padding:16px 18px 16px;background:color-mix(in srgb,var(--ink2) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px}
  .tcopy .eyebrow{font-size:10px;margin-bottom:8px}
  .tcopy h2{font-size:clamp(18px,5.2vw,22px);line-height:1.2;letter-spacing:-.015em;margin-bottom:6px}
  .tcopy p{font-size:14px}
  .tcopy .tkey{margin-top:12px;padding-top:10px;font-size:9px}
  .tcopy .tkey b{font-size:10px}
  .pin span{font-size:9px}.pin b{font-size:10px}
}
@media (max-width:560px) and (max-height:700px){.tcopy .tkey{display:none}}
@media (max-width:560px){.pin.p3{display:none}.pin.p1{--h:330;--dir:-1}.pin.p2{--h:190;--dir:-1}}
@media (prefers-reduced-motion:reduce){.tcopy{will-change:auto}}

/* final draft, October 2026: the lens quote, the step captions, and the new bands */
.pic{display:inline}
.orb-q{position:absolute;left:0;top:0;width:250px;margin:0;padding:10px 12px;z-index:3;opacity:0;pointer-events:none;font-size:12px;line-height:1.45;color:color-mix(in srgb,var(--paper) 86%,transparent);background:color-mix(in srgb,var(--ink) 74%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;will-change:transform,opacity}
.orb-q cite{display:block;margin-top:6px;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.stage #stLabel{white-space:normal;width:min(440px,84vw)}
.stage .office.stl small.src{font-size:9px;opacity:.75;margin-top:6px}
.stage .office.stl small.reg{font-family:var(--display);font-size:12.5px;letter-spacing:0;line-height:1.4;color:color-mix(in srgb,var(--paper) 70%,transparent);white-space:normal;max-width:44ch;margin-top:8px}
.pin{--mw:28ch}
.pin span small{display:block;margin-top:2px;font-size:inherit;color:var(--mute);text-transform:none;letter-spacing:.04em}
.ccap{margin:12px 0 0!important;font-family:var(--mono);font-size:10px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)!important}
.qnext{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--mint) 40%,transparent)}
.qnext[hidden]{display:none}
.mq .say{text-align:center;padding-inline:var(--gutter);margin-top:clamp(28px,4vw,48px);font-size:clamp(20px,2.4vw,30px)}
.what .ll{max-width:68ch}
.vb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin:clamp(24px,3vw,40px) 0 0}
.vb div{border-top:1px solid var(--line);padding-top:14px}
.vb dt{font-weight:500;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;color:var(--mint);margin:0 0 8px}
.vb dd{margin:0;font-size:14.5px;line-height:1.5;color:color-mix(in srgb,var(--paper) 66%,transparent)}
.qc-src{position:relative;margin:0 22px 20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;line-height:1.6;color:var(--mute)}
.feat-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 22px}
.feat-stats div{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;border-top:1px solid var(--line);padding-top:10px}
.feat-stats dd{order:-1}
.feat-stats dd{margin:0;font-weight:500;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;color:var(--mint)}
.feat-stats dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.first .ll{max-width:70ch}
.fs-n{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin:clamp(24px,3vw,40px) 0}
.fs-n div{border-top:1px solid var(--line);padding-top:12px}
.fs-n dt{font-weight:500;font-size:clamp(34px,4vw,52px);letter-spacing:-.03em;line-height:1;color:var(--mint);margin:0 0 8px}
.fs-n dd{margin:0;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--paper) 66%,transparent)}
.fs-l{margin:0 0 28px;display:grid;gap:14px;max-width:900px}
.fs-l div{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:18px;border-top:1px solid var(--line);padding-top:12px}
.fs-l dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.fs-l dd{margin:0;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--paper) 70%,transparent)}
.end .ll{margin:0 0 24px;max-width:56ch}
.end .cta{margin:0 0 26px}
@media (max-width:900px){.vb,.fs-n{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .orb-q{left:var(--gutter);right:var(--gutter);top:calc(76px + env(safe-area-inset-top,0px));width:auto;font-size:13px}
  .feat-stats{grid-template-columns:minmax(0,1fr)}
  .fs-l div{grid-template-columns:minmax(0,1fr);gap:4px}
  .pin{--mw:22ch}
}
@media (max-width:480px){.vb,.fs-n{grid-template-columns:minmax(0,1fr)}}
@media (min-width:561px){.orb-cap{white-space:normal;width:210px;text-align:center}.hint{left:50%;transform:translateX(-50%)}}

/* the record band: its count sits in the gap of the moving names, and the quote follows underneath */
.mq-box{position:relative}
@media (min-width:761px){.mq-wrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 26%,transparent 33%,transparent 67%,#000 74%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 26%,transparent 33%,transparent 67%,#000 74%,#000 90%,transparent)}.mq-pill{width:min(31%,430px)}}
/* up to tablet width the hero reaches the right edge, so the step rail waits until it has gone */
@media (max-width:900px){.steps.early{opacity:0;pointer-events:none}}
/* the hint sits bottom right on a wide screen, clear of the hero column */
@media (min-width:561px){.hint{left:auto;right:calc(var(--gutter) + 44px);transform:none}}

/* The Governor's words, straight after the scroll story: one quote in large type, the middle sentence in full white */
.gov{padding:clamp(80px,14vh,160px) var(--gutter);border-top:1px solid var(--line);display:flex;justify-content:center;background:radial-gradient(ellipse 60% 70% at 50% 40%,color-mix(in srgb,var(--teal) 7%,transparent),transparent 70%)}
.gov-q{margin:0;max-width:1040px;text-align:center}
.gov-q::before{content:"\201C";content:"\201C" / "";display:block;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(84px,10vw,140px);line-height:.8;height:.5em;color:var(--teal)}
.gov-q blockquote{margin:0;padding:0}
.gov-q blockquote p{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.6vw,36px);letter-spacing:-.025em;line-height:1.24;color:color-mix(in srgb,var(--paper) 62%,transparent);text-wrap:pretty}
.gov-q blockquote em{font-style:normal;color:var(--paper)}
/* the company's name in the Governor's words, in the logo's teal */
.gov-q blockquote .af{color:var(--teal)}
.gov-q figcaption{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:clamp(28px,4vw,44px)}
.gov-q figcaption b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--paper)}
.gov-q figcaption span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media (max-width:560px){.gov-q{text-align:left}.gov-q figcaption{align-items:flex-start}.gov-q::before{height:.46em}}