:root{
  --paper:#F9F7F2;
  --panel:#EFEEEA;
  --panel-2:#E1E4E1;
  --teal:#0B4650;
  --teal-mid:#3E6A72;
  --yellow:#E6FF2B;
  --grey:#898A8D;
  --pale:#A8C2C5;
  --s0:#F9F7F2;
  --s1:#F1F0EB;
  --s2:#E8EBE8;
  --s3:#DDE2E0;
  --s4:#0B4650;
  --rule:rgba(137,138,141,.42);
  --rule-2:rgba(137,138,141,.68);
  --pad:clamp(20px,4.5vw,60px);
  --railw:230px;
  --barh:54px;
  --display:"Jost",system-ui,sans-serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--teal);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:500;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-mid)}

/* the marker pen: the only thing yellow ever does */
.hl,.hero h1 em{
  font-style:normal;color:var(--teal);
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;
  background-size:100% .90em;
  background-position:0 .33em;
  padding:0 .13em;margin:0 -.03em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

.skip{position:fixed;top:-60px;left:14px;z-index:100;background:var(--teal);color:var(--paper);
  padding:9px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- nav rail ---------- */
.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--railw);
  display:none;flex-direction:column;justify-content:center;
  padding-left:var(--pad);z-index:40;
}
@media(min-width:1180px){ .rail{display:flex} body{padding-left:var(--railw)} }
.rail::before{content:"";position:absolute;left:var(--pad);top:14%;bottom:14%;width:1px;background:var(--rule)}
.rail-fill{position:absolute;left:var(--pad);top:14%;width:1px;height:0;background:var(--teal);z-index:1}
.rail-h{display:block;margin-bottom:13px;padding-left:24px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal-mid)}
.rail-item{
  position:relative;padding:7px 0 7px 24px;margin:1px 0;display:flex;align-items:baseline;gap:9px;
  opacity:.9;text-decoration:none;
  transition:opacity .2s ease,transform .2s ease;
}
/* the rung: extends and darkens as you point at it */
.rail-item::before{
  content:"";position:absolute;left:0;top:50%;margin-top:-.5px;width:10px;height:1px;background:var(--rule-2);
  transition:width .2s ease,background .2s ease;
}
/* the arrow only appears on the rung you are pointing at */
.rail-item::after{
  content:"→";font-family:var(--display);font-size:13px;line-height:1;color:var(--teal);
  opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease;
}
.rail-t{font-family:var(--display);font-size:16.5px;color:var(--teal-mid);transition:color .2s}
.rail-item:hover,.rail-item:focus-visible{opacity:1;transform:translateX(4px)}
.rail-item:hover::before,.rail-item:focus-visible::before{width:19px;background:var(--teal)}
.rail-item:hover .rail-t,.rail-item:focus-visible .rail-t{color:var(--teal)}
.rail-item:hover::after,.rail-item:focus-visible::after{opacity:1;transform:none}
.rail-item:focus-visible{outline:none}
.rail-item:focus-visible .rail-t{text-decoration:underline;text-underline-offset:4px}
/* the page you are on: filled rung, no arrow, no lift */
.rail-item.on{opacity:1}
.rail-item.on::before{width:19px;height:3px;margin-top:-1.5px;background:var(--teal)}
.rail-item.on .rail-t{color:var(--teal)}
.rail-item.on::after{content:none}
.rail-item.on:hover{transform:none}
.rail-stage{margin-top:30px;padding:16px 0 0 24px;border-top:1px solid var(--rule);display:grid;gap:7px}
.rail-stage[hidden]{display:none}
/* the assessment page shows the result itself; the rail copy is noise there */
body[data-page="assessment"] .rail-stage{display:none}
.rs-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-mid)}
.rs-read{display:flex;align-items:baseline;gap:9px}
.rs-read b{font-family:var(--display);font-size:30px;font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--teal)}
.rs-read i{font-style:normal;font-family:var(--display);font-size:15px;color:var(--teal-mid)}
.rs-bar{display:flex;gap:3px;margin-top:2px}
.rs-bar i{width:15px;height:4px;background:var(--rule);transition:background .35s ease}
.rs-bar i.on{background:var(--teal)}

.prog{position:fixed;top:0;left:0;height:2px;background:var(--teal);width:0;z-index:60}
@media(min-width:1180px){.prog{display:none}}

/* ---------- shell ---------- */
.bar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:10px 14px;flex-wrap:wrap;padding:10px var(--pad) 0;background:rgba(249,247,242,.94);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--rule);
}
.bar-nav{order:3;flex-basis:100%;display:flex;gap:2px;overflow-x:auto;margin-top:9px;border-top:1px solid var(--rule)}
.bar-nav a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;color:var(--teal-mid);padding:11px 13px;transition:color .2s,background .2s;
}
.bar-nav a:first-child{padding-left:0}
.bar-nav a:hover,.bar-nav a:focus-visible{color:var(--teal);background:var(--panel)}
.bar-nav a.on{color:var(--teal);box-shadow:inset 0 -2px 0 var(--teal)}
@media(min-width:900px){
  .bar{flex-wrap:nowrap;height:var(--barh);padding:0 var(--pad)}
  .bar-nav{order:0;flex-basis:auto;margin:0 auto 0 26px;border-top:0}
  .bar-nav a{padding:6px 13px}
  .bar-nav a:first-child{padding-left:13px}
}
@media(min-width:1180px){.bar-nav{display:none}}
.bar-n{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
/* the mark, drawn exactly like the favicon: initials over a marker stroke */
.bar-mk{position:relative;flex:none;width:27px;height:27px;background:var(--teal);color:var(--paper);
  display:flex;align-items:center;justify-content:center;padding-bottom:5px;
  transition:background .2s,color .2s;
  font-family:var(--display);font-size:12.5px;font-weight:500;letter-spacing:.04em;line-height:1}
.bar-mk::after{content:"";position:absolute;left:5px;bottom:5px;width:17px;height:2px;
  background:var(--yellow);transition:background .2s}
.bar-n:hover .bar-mk,.bar-n:focus-visible .bar-mk{background:var(--yellow);color:var(--teal)}
.bar-n:hover .bar-mk::after,.bar-n:focus-visible .bar-mk::after{background:var(--teal)}
.bar-nm{font-family:var(--display);font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--teal);white-space:nowrap}
.bar-ti{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-mid);
  white-space:nowrap;padding-left:11px;border-left:1px solid var(--rule)}
@media(max-width:900px){.bar-ti{display:none}}
.btn{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--rule-2);border-radius:0;padding:8px 15px;
  transition:background .2s,color .2s,border-color .2s;white-space:nowrap;display:inline-block;color:var(--teal);
}
.btn:hover,.btn:focus-visible{background:var(--teal);color:var(--paper);border-color:var(--teal)}
.btn.acc{background:var(--teal);color:var(--paper);border-color:var(--teal)}
.btn.acc:hover,.btn.acc:focus-visible{background:var(--yellow);color:var(--teal);border-color:var(--yellow)}
.btn.cv{display:inline-flex;align-items:center;gap:7px}
.btn.cv svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.btn.cv .cv-stem{transition:transform .3s cubic-bezier(.2,.75,.3,1)}
.btn.cv:hover .cv-stem,.btn.cv:focus-visible .cv-stem{transform:translateY(2.4px)}

section{padding:clamp(60px,8vw,110px) var(--pad);border-bottom:1px solid var(--rule);scroll-margin-top:112px}
@media(min-width:900px){section{scroll-margin-top:76px}}
.wrap{max-width:1000px}
.shead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,52px)}
.shead h2{font-size:clamp(27px,3.4vw,41px);color:var(--teal)}
.shead .note{flex-basis:100%;margin-top:2px}

/* ---------- hero ---------- */
.hero{padding-top:clamp(48px,7vw,86px);border-bottom:1px solid var(--rule-2);counter-reset:cd}
.hero h1{font-size:clamp(36px,6.1vw,72px);max-width:15ch;letter-spacing:-.03em;line-height:1.06;font-weight:400}
.hero-sub{margin-top:30px;max-width:55ch;font-size:clamp(16.5px,1.5vw,19px);color:var(--teal-mid)}
.hero-sub a{color:var(--teal);text-underline-offset:3px}
.hero-sub + .hero-sub{margin-top:14px;font-size:clamp(15.5px,1.35vw,17.5px)}
.hero-meta{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-mid)}
.hero-meta a{color:var(--teal)}
.creds{list-style:none;margin:34px 0 0;padding:0;overflow:hidden;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));column-gap:46px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cd{position:relative;padding:18px 0 20px;counter-increment:cd}
.cd::after{content:"";position:absolute;right:-23px;top:0;bottom:0;width:1px;background:var(--rule)}
.cd::before{content:counter(cd,decimal-leading-zero);display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--teal-mid)}
@media(max-width:640px){
  .creds{column-gap:0}
  .cd::after{display:none}
  .cd + .cd{border-top:1px solid var(--rule)}
}
.cd b{display:block;font-family:var(--display);font-size:17.5px;font-weight:500;color:var(--teal);letter-spacing:-.015em}
.cd span{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-mid);line-height:1.5}
.hero-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4.5vw,60px)}
@media(min-width:980px){.hero-grid{grid-template-columns:1.4fr .6fr;align-items:start}}
.hero-fig{margin:0;max-width:352px;position:relative}
.hero-fig::before{content:"";position:absolute;left:-13px;top:13px;right:13px;bottom:-13px;
  border:1px solid var(--teal);z-index:0}
.hero-fig img{position:relative;z-index:1;width:100%;height:auto;display:block;border:0}
.hero-fig figcaption{position:relative;z-index:1;background:var(--teal);color:var(--pale);
  padding:14px 16px 17px;margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}

/* ---------- method ---------- */
.mgrid{display:grid;gap:clamp(26px,4vw,56px);grid-template-columns:1fr}
@media(min-width:900px){.mgrid{grid-template-columns:.85fr 1.15fr}}
.mlead{font-family:var(--display);font-size:clamp(22px,2.7vw,31px);line-height:1.24;max-width:22ch;letter-spacing:-.025em;color:var(--teal)}
.mbody{display:grid;gap:16px;max-width:58ch;color:var(--teal-mid)}
.pull{background:var(--panel);border-left:3px solid var(--teal);padding:20px 22px;margin-top:10px}
.pull p{font-family:var(--display);font-size:20px;line-height:1.4;color:var(--teal);letter-spacing:-.02em}

/* ================= THE LADDER ================= */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stage-lead{max-width:62ch;color:var(--teal-mid);margin-bottom:clamp(30px,4vw,46px)}
.stage-lead em{font-style:normal;box-shadow:inset 0 -.42em 0 var(--yellow);padding:0 .1em}
.ladder{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,54px)}
@media(min-width:1000px){.ladder{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,4vw,56px)}}

/* the questions */
.quiz{margin:0}
.qs{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:q}
.q{border-top:1px solid var(--rule)}
.q:last-child{border-bottom:1px solid var(--rule)}
.q fieldset{border:0;margin:0;padding:18px 0 20px}
.q legend{display:block;width:100%;padding:0}
.q-n{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-mid);margin-bottom:9px}
.q-t{display:block;font-family:var(--display);font-size:clamp(18px,1.9vw,21px);line-height:1.28;letter-spacing:-.02em;color:var(--teal);max-width:34ch}
.q-h{margin-top:8px;font-size:14px;line-height:1.5;color:var(--teal-mid);max-width:44ch}
.q-a{display:flex;gap:9px;margin-top:15px}
.ans{position:relative}
.ans input{position:absolute;opacity:0;width:0;height:0}
.ans span{
  display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--rule-2);padding:9px 20px;color:var(--teal);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.ans span:hover{border-color:var(--teal);background:var(--panel)}
.ans input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px}
.ans input:checked + span{background:var(--teal);color:var(--paper);border-color:var(--teal)}
.q.done .q-t{color:var(--teal-mid)}
.quiz-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.prog-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-mid)}
.prog-t b{font-weight:400;color:var(--teal)}
.back{margin-top:2px}
.reset{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;border-bottom:1px solid var(--rule-2);padding:2px 0;color:var(--teal-mid);cursor:pointer;
}
.reset:hover{color:var(--teal);border-color:var(--teal)}
.reset[hidden]{display:none}

/* the answer */
@media(min-width:1000px){.stages{position:sticky;top:82px;align-self:start;height:max-content}}
.res-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:0;border-bottom:2px solid var(--teal)}
.res-live{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-mid)}
.res-live[hidden]{display:none}

.res-empty{padding:30px clamp(20px,2.6vw,30px) 34px;background:var(--panel);display:grid;gap:12px;justify-items:start}
.res-empty[hidden]{display:none}
.res-dash{font-family:var(--display);font-size:44px;line-height:.8;color:var(--rule-2)}
.res-empty-t{font-size:15.5px;line-height:1.55;color:var(--teal-mid);max-width:40ch}
.res-empty-s{font-size:14px;color:var(--teal-mid)}

.wl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--yellow);color:var(--teal);display:inline-block;padding:5px 10px 6px;line-height:1.25;vertical-align:top}
.res-warn{display:grid;justify-items:start;gap:11px;margin-top:18px;padding:18px 20px;background:var(--panel-2);border-left:3px solid var(--teal)}
.res-warn[hidden]{display:none}
.res-warn-t{font-size:15px;line-height:1.55;color:var(--teal);max-width:52ch}

/* stages descend from paper to deep teal, one rung at a time */
.stages{display:grid;gap:0}
.stage{
  padding:clamp(26px,3vw,34px) clamp(20px,2.6vw,30px);
  box-shadow:inset 3px 0 0 transparent;
}
.stage[data-s="0"]{background:var(--s0);box-shadow:inset 3px 0 0 var(--rule-2)}
.stage[data-s="1"]{background:var(--s1)}
.stage[data-s="2"]{background:var(--s2)}
.stage[data-s="3"]{background:var(--s3)}
.stage[data-s="4"]{background:var(--s4)}
.stages.js .stage{display:none}
.stages.js .stage.on{display:block;box-shadow:inset 3px 0 0 var(--teal);animation:rung .45s ease both}
@keyframes rung{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stage-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.stage-n{font-family:var(--display);font-size:clamp(30px,3.6vw,44px);color:var(--teal);letter-spacing:-.04em;font-weight:500}
.stage h3{font-size:clamp(24px,2.9vw,34px);color:var(--teal)}
.stage dl{margin:20px 0 0;display:grid;gap:14px}
.stage dl>div{display:grid;gap:4px 22px;grid-template-columns:1fr}
@media(min-width:680px) and (max-width:999px){.stage dl>div{grid-template-columns:150px 1fr}}
@media(min-width:1240px){.stage dl>div{grid-template-columns:140px 1fr}}
.stage dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-mid);padding-top:5px}
.stage dd{margin:0;color:var(--teal-mid);font-size:15.5px;max-width:56ch}
.stage dl>div:last-child dt,.stage dl>div:last-child dd{color:var(--teal)}

/* the deep end inverts */
.stage[data-s="4"]{color:var(--pale)}
.stage[data-s="4"] h3,.stage[data-s="4"] .stage-n{color:var(--paper)}
.stages.js .stage[data-s="4"].on{box-shadow:inset 3px 0 0 var(--yellow)}
.stages.js .stage[data-s="4"].on .stage-n{color:var(--yellow)}
.stage[data-s="4"] dt{color:var(--pale)}
.stage[data-s="4"] dd{color:#C4D2D4}
.stage[data-s="4"] dl>div:last-child dt,.stage[data-s="4"] dl>div:last-child dd{color:var(--paper);opacity:1}

.res-cta{display:grid;gap:11px;justify-items:start;margin-top:20px}
.res-cta[hidden]{display:none}
.res-cta-t{font-size:14.5px;line-height:1.5;color:var(--teal-mid);max-width:44ch}

/* folded away: a second 00-04 row directly under the scale reads as the same
   figure twice. One line by default, the tabs on request. */
.browse{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.browse > summary{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal-mid);cursor:pointer;list-style:none;padding:4px 0}
.browse > summary::-webkit-details-marker{display:none}
.browse > summary::before{content:"▸ ";color:var(--teal)}
.browse[open] > summary::before{content:"▾ "}
.browse > summary:hover{color:var(--teal)}
.browse[open]{display:grid;gap:10px;justify-items:start}
.browse[open] > summary{justify-self:start}
.tabs{display:none;gap:0;border:1px solid var(--rule-2);width:max-content;max-width:100%;overflow-x:auto}
.tabs.on{display:flex}
.tabs button{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;background:transparent;color:var(--teal-mid);
  border:0;border-right:1px solid var(--rule);padding:9px 14px;cursor:pointer;white-space:nowrap;flex:none;
  transition:background .2s,color .2s;
}
.tabs button:last-child{border-right:0}
.tabs button:hover{background:var(--panel)}
.tabs button[aria-selected="true"]{background:var(--teal);color:var(--paper)}
@media(max-width:700px){
  .browse{justify-items:stretch}
  .tabs{width:100%}
  .tabs button{flex:1;padding:10px 6px;text-align:center}
  .tab-t{display:none}
}

.waterline{margin:clamp(36px,4.5vw,56px) 0 0;padding:26px clamp(20px,2.6vw,30px) 28px;border-top:2px solid var(--teal);background:var(--paper)}
.waterline h3{font-size:clamp(21px,2.5vw,29px);color:var(--teal);margin-top:14px;max-width:24ch;line-height:1.2}
.waterline p{margin-top:12px;max-width:56ch;color:var(--teal-mid);font-size:15.5px}
.waterline .kick{margin-top:14px;font-family:var(--display);font-size:19px;color:var(--teal);letter-spacing:-.02em}

/* ---------- work ---------- */
.case{padding-top:clamp(36px,4.6vw,58px);margin-top:clamp(36px,4.6vw,58px);border-top:1px solid var(--rule)}
.case.first{border-top:0;margin-top:0;padding-top:0}
.case-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-mid);margin-bottom:12px}
.case h3{font-size:clamp(26px,3.2vw,37px);color:var(--teal)}
.case-role{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--teal-mid);margin-top:9px}
.case-t{font-family:var(--display);font-size:clamp(18px,2vw,22px);color:var(--teal);margin-top:14px;letter-spacing:-.02em}
.case-i{max-width:62ch;color:var(--teal-mid);margin-top:14px;font-size:16px}
.case-i + .case-i{margin-top:12px}
.case-i b{font-weight:500;color:var(--teal)}
.facts{display:flex;flex-wrap:wrap;align-items:flex-start;margin-top:24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fact{padding:14px 22px 14px 0;margin-right:22px;border-right:1px solid var(--rule)}
.fact:last-child{border-right:0;margin-right:0;padding-right:0}
.fact b{display:block;font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--teal)}
.fact span{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-mid)}
/* stage-move tags stay teal so yellow does not become wallpaper */
.fact.move b{display:inline-block;background:var(--teal);color:var(--paper);padding:3px 10px 4px;font-size:17px;line-height:1.3;vertical-align:top}

.narrow{margin-top:30px}
.req{font-family:var(--display);font-size:clamp(19px,2.1vw,25px);max-width:47ch;margin-top:10px;line-height:1.3;letter-spacing:-.025em;color:var(--teal)}
.opts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:780px){.opts{grid-template-columns:repeat(3,1fr);gap:13px}}
.opt{
  background:var(--panel);border:1px solid transparent;padding:17px 19px;
  font-size:14.5px;color:var(--teal-mid);line-height:1.5;position:relative;
  transition:opacity .55s ease,background .55s ease,border-color .55s ease;
}
.oe{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-mid);margin-bottom:10px;transition:color .5s}
/* chosen option: a deep teal block between two pale cards */
.opt.pick{background:var(--teal);border-color:var(--teal);color:#C4D2D4}
.opt.pick::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--yellow);transition:width .5s ease .25s}
.rv.in .opt:not(.pick){opacity:1}
.rv.in .opt.pick::after{width:4px}
.opt.pick .oe,.rv.in .opt.pick .oe{color:var(--yellow)}
.why{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);max-width:64ch;display:grid;gap:8px}
.why p{color:var(--teal-mid);font-size:15.5px}

/* ---------- sectors ---------- */
.sect{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:640px){.sect{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.sect{grid-template-columns:repeat(4,1fr)}}
.sc{background:var(--panel);padding:24px 20px 28px;transition:background .25s}
.sc:hover{background:var(--panel-2)}
.sc h3{font-size:21px;margin-bottom:6px;color:var(--teal)}
.sc .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:11px}
.sc p{font-size:14px;color:var(--teal-mid);line-height:1.55}

/* ---------- engagements ---------- */
.eng{border-top:1px solid var(--rule)}
.ei{display:grid;gap:6px 34px;padding:22px 0;border-bottom:1px solid var(--rule);grid-template-columns:1fr}
@media(min-width:800px){.ei{grid-template-columns:minmax(230px,.75fr) 2fr;align-items:start}}
.ei h3{font-size:22px;color:var(--teal)}
.ei .es{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-mid);display:block;margin-top:5px}
.ei p{color:var(--teal-mid);font-size:15.5px;max-width:58ch}
.ei-b{display:grid;gap:13px}
.ei-out{color:var(--teal)!important;padding-left:15px;border-left:2px solid var(--yellow)}
.ei-out .lbl{display:block;margin-bottom:4px;font-size:10px;color:var(--teal-mid)}
.eng-lead{max-width:64ch;color:var(--teal-mid);margin-bottom:clamp(28px,3.5vw,42px)}
.eng-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
.eng-cta-t{font-size:15px;color:var(--teal-mid);max-width:44ch}

/* ---------- background ---------- */
.bgrid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:700px){.bgrid{grid-template-columns:1fr 1fr;gap:40px}}
@media(min-width:1000px){.bgrid{grid-template-columns:repeat(5,1fr);gap:30px}}
.bcol h3{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-mid);font-weight:500;margin-bottom:14px}
.bcol ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bcol li{font-size:15px;line-height:1.42;color:var(--teal-mid)}
.bcol li b{font-family:var(--display);font-weight:500;font-size:17.5px;color:var(--teal);display:block;letter-spacing:-.02em}
.mkts{gap:14px!important}
.mkts li{display:grid;gap:3px}
.mk-r{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-mid)}
.mkts b{display:block;font-family:var(--display);font-size:16.5px;font-weight:500;color:var(--teal);letter-spacing:-.015em;line-height:1.3}
@media(min-width:1000px){.coda .bgrid{grid-template-columns:1.05fr .85fr .65fr 1.45fr;gap:34px}}

/* ---------- where to go next ---------- */
.doors{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--rule)}
.door{
  display:grid;grid-template-columns:auto 1fr auto;gap:0 22px;align-items:center;
  padding:24px 16px 26px 4px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--teal);
  transition:background .25s ease,padding .25s ease;
}
.door:hover,.door:focus-visible{background:var(--panel);padding-left:16px}
.door-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--teal-mid);align-self:start;padding-top:8px}
.door-b b{display:block;font-family:var(--display);font-size:clamp(21px,2.4vw,27px);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.door-d{display:block;margin-top:9px;font-size:15.5px;line-height:1.55;color:var(--teal-mid);max-width:56ch}
.door-m{display:block;margin-top:11px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-mid)}
.door-a{align-self:center}
.door-a svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.2,.75,.3,1)}
.door:hover .door-a svg,.door:focus-visible .door-a svg{transform:translateX(5px)}
@media(max-width:620px){
  .door{grid-template-columns:auto 1fr;gap:0 16px}
  .door-a{display:none}
}

/* ---------- closing prompt ---------- */
.endcta{border-bottom:0}
.endcta .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.endcta p{font-family:var(--display);font-size:clamp(19px,2.1vw,24px);letter-spacing:-.02em;
  color:var(--teal);max-width:30ch;line-height:1.25}
.endcta .note{font-family:var(--sans);font-size:14.5px;letter-spacing:0;color:var(--teal-mid);max-width:26ch}

/* ---------- footer ---------- */
.foot{padding:clamp(34px,4.5vw,52px) var(--pad) clamp(24px,3vw,34px);border-top:1px solid var(--rule-2)}
.foot .wrap{max-width:1000px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px 40px;
  padding-bottom:clamp(20px,2.8vw,28px);border-bottom:1px solid var(--rule)}
.foot-id{display:flex;align-items:center;gap:12px;text-decoration:none}
.foot-who b{display:block;font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--teal)}
.foot-who span{display:block;margin-top:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-mid)}
.foot-reach{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.foot-reach a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--teal);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  border-bottom:1px solid var(--rule-2);padding-bottom:4px;transition:border-color .2s}
.foot-reach a:hover,.foot-reach a:focus-visible{border-color:var(--teal)}
.foot-reach svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.foot-reach .li-dot{fill:currentColor;stroke:none}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 26px;
  padding-top:clamp(16px,2.2vw,22px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-mid)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-bot a{text-decoration:none;color:var(--teal-mid);transition:color .2s}
.foot-bot a:hover,.foot-bot a:focus-visible{color:var(--teal)}

/* the rail signs off with the practice, not a coordinate */
.rail-foot{margin-top:26px;padding-left:24px;display:grid;gap:5px}
/* the rail signs off with where the work is done, read like an instrument */
.rf-a,.rf-b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--teal-mid);
  font-variant-numeric:tabular-nums;line-height:1.6}
.rf-a{color:var(--teal)}


/* ---------- book a call ---------- */
.bookgrid{display:grid;gap:clamp(30px,4vw,54px);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.bookgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.book-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px;max-width:44ch}
.book-list li{font-size:15.5px;line-height:1.55;color:var(--teal-mid);padding-left:18px;border-left:1px solid var(--rule)}
.book-list b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;color:var(--teal);margin-bottom:5px}
.book-note{margin-top:24px;font-size:14px;line-height:1.55;color:var(--teal-mid);max-width:44ch}

.cal{border:1px solid var(--rule-2);background:var(--paper);padding:clamp(18px,2.2vw,24px)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px}
.cal-month{font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--teal)}
.cal-nav{background:none;border:1px solid var(--rule-2);width:40px;height:40px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--teal);transition:background .2s,color .2s,border-color .2s}
.cal-nav svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cal-nav:hover:not(:disabled){background:var(--teal);color:var(--paper);border-color:var(--teal)}
.cal-nav:disabled{opacity:.3;cursor:default}
/* minmax(0,…) or the cells' min-height becomes a min WIDTH via aspect-ratio,
   and seven of those overflow a 320px phone */
.cal-wd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding-bottom:8px}
.cal-wd span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-mid);text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-d{
  aspect-ratio:1/1;min-width:0;min-height:40px;display:flex;align-items:center;justify-content:center;position:relative;
  font-family:var(--display);font-size:15px;border:1px solid transparent;background:var(--panel);
  color:var(--teal);cursor:pointer;padding:0;
  transition:background .18s,color .18s,border-color .18s;
}
.cal-d:hover{border-color:var(--teal)}
.cal-d.off{background:transparent;color:var(--grey);cursor:default;opacity:.55}
.cal-d.off:hover{border-color:transparent}
.cal-d.pad{background:none;cursor:default}
.cal-d.today::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--teal-mid)}
.cal-d.sel{background:var(--teal);color:var(--paper);border-color:var(--teal)}
.cal-d.sel.today::after{background:var(--yellow)}
@media(pointer:coarse){.cal-nav{width:44px;height:44px}.cal-d{min-height:44px}.slot{padding:14px 6px}}
.cal-key{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-mid)}
.cal-key i{width:11px;height:11px;display:inline-block;margin-left:9px}
.cal-key i:first-child{margin-left:0}
.cal-key .k-free{background:var(--panel);border:1px solid var(--rule-2)}
.cal-key .k-off{background:transparent;border:1px dashed var(--rule-2)}

.cal-step{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);display:grid;gap:12px;justify-items:start}
.cal-step[hidden]{display:none}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:8px;width:100%}
@media(max-width:560px){.slots{grid-template-columns:repeat(3,1fr)}}
.slot{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;padding:11px 6px;text-align:center;
  border:1px solid var(--rule-2);background:var(--paper);color:var(--teal);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.slot:hover{border-color:var(--teal);background:var(--panel)}
.slot.sel{background:var(--teal);color:var(--paper);border-color:var(--teal)}
.cal-done{background:var(--panel);margin-left:calc(-1 * clamp(18px,2.2vw,24px));margin-right:calc(-1 * clamp(18px,2.2vw,24px));
  margin-bottom:calc(-1 * clamp(18px,2.2vw,24px));padding:20px clamp(18px,2.2vw,24px) 22px;border-top:2px solid var(--teal)}
.done-t{font-family:var(--display);font-size:19px;line-height:1.3;letter-spacing:-.02em;color:var(--teal);max-width:30ch}

.coda{background:var(--panel)}
.coda .shead{margin-bottom:clamp(24px,3vw,34px)}
.coda .shead h2{font-size:clamp(22px,2.4vw,28px)}
.coda .bcol li b{font-size:16.5px}
.coda .bcol li{font-size:14.5px}

/* ---------- contact ---------- */
.cta{background:var(--panel);border-bottom:0}
.cta h2{font-size:clamp(28px,4.6vw,52px);max-width:17ch;letter-spacing:-.03em;color:var(--teal);font-weight:400}
.cta-sub{margin-top:22px;max-width:47ch;color:var(--teal-mid);font-size:16.5px}
/* contact cards: the arrow says what the link will do */
.cards{display:grid;gap:12px;grid-template-columns:1fr;margin-top:34px;max-width:920px}
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.ccard{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;
  text-decoration:none;background:var(--paper);border:1px solid var(--rule-2);
  padding:17px 17px 18px;color:var(--teal);
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.ccard:hover,.ccard:focus-visible{background:var(--teal);border-color:var(--teal);color:var(--paper)}
.ccard-i{display:flex;align-items:center;justify-content:center;width:30px}
.ccard-i svg,.ccard-a svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ccard-i .li-dot{fill:currentColor;stroke:none}
.ccard-i .cvd-mark{stroke:var(--yellow);stroke-width:3.4}
.ccard b{display:block;font-family:var(--display);font-size:17.5px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.ccard-m{display:block;margin-top:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--teal-mid);word-break:break-word;transition:color .22s}
.ccard:hover .ccard-m,.ccard:focus-visible .ccard-m{color:var(--pale)}
.ccard-a{display:flex;align-items:center}
.ccard-a svg{stroke-width:1.5;transition:transform .3s cubic-bezier(.2,.75,.3,1)}
.ccard.send:hover .ccard-a svg,.ccard.send:focus-visible .ccard-a svg{transform:translateX(4px)}
.ccard.out:hover .ccard-a svg,.ccard.out:focus-visible .ccard-a svg{transform:translate(3px,-3px)}
.ccard.down:hover .ccard-a svg,.ccard.down:focus-visible .ccard-a svg{transform:translateY(3px)}
.seek{margin-top:34px;padding-top:24px;border-top:1px solid var(--rule-2);max-width:58ch}
.seek .sl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--yellow);color:var(--teal);display:inline-block;padding:5px 10px 6px;line-height:1.25;vertical-align:top}
.seek p{margin-top:13px;color:var(--teal-mid);font-size:16px}
.colo{
  margin-top:clamp(48px,7vw,80px);padding-top:20px;border-top:1px solid var(--rule-2);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-mid);
}
.colo i{font-style:normal;color:var(--teal)}
.colo a{text-decoration:none;display:inline-block;padding:9px 0}
.colo a:hover{color:var(--teal)}

/* ================= PORTFOLIO: THE MOVEMENT MAP =================
   The work is indexed by the move it made on the ladder, not by date.
   The ladder's own surface ramp (--s0..--s4) becomes the x-axis, so the
   diagnostic on the assessment page and the portfolio share one scale. */

.pf-head{padding-bottom:clamp(38px,5vw,60px);border-bottom:1px solid var(--rule-2)}
.pf-h1{font-size:clamp(31px,5vw,58px);max-width:18ch;letter-spacing:-.03em;line-height:1.07;font-weight:400;color:var(--teal)}
.pf-lead{margin-top:26px;max-width:58ch;font-size:clamp(16px,1.5vw,18.5px);color:var(--teal-mid)}
.pf-lead + .pf-lead{margin-top:13px;font-size:16px}
.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));column-gap:40px;
  margin-top:34px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden}
.pf-stat{position:relative;padding:16px 0 18px}
.pf-stat::after{content:"";position:absolute;right:-20px;top:0;bottom:0;width:1px;background:var(--rule)}
.pf-stat b{display:block;font-family:var(--display);font-size:22px;font-weight:500;color:var(--teal);
  letter-spacing:-.02em;line-height:1.15}
.pf-stat span{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal-mid);line-height:1.5}
@media(max-width:640px){
  .pf-stats{column-gap:0}
  .pf-stat::after{display:none}
  .pf-stat + .pf-stat{border-top:1px solid var(--rule)}
}

.map-lead{max-width:64ch;color:var(--teal-mid);margin-bottom:clamp(26px,3.4vw,40px)}
.map{--mapl:188px;position:relative;border:1px solid var(--rule-2);background:var(--paper)}
.map-row{display:grid;grid-template-columns:var(--mapl) repeat(5,1fr);align-items:center}

/* the axis: five stages, each a filter */
.map-axis{border-bottom:1px solid var(--rule-2)}
.map-c{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-mid);padding:0 16px}
.stg{appearance:none;background:none;border:0;border-left:1px solid var(--rule);
  padding:13px 7px 12px;cursor:pointer;display:grid;gap:5px;justify-items:center;
  color:var(--teal);font:inherit;transition:background .2s}
.stg:hover{background:var(--panel)}
.stg b{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-.03em;line-height:1}
.stg i{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-mid);text-align:center;line-height:1.3}
.stg[aria-pressed="true"]{background:var(--teal)}
.stg[aria-pressed="true"] b{color:var(--paper)}
.stg[aria-pressed="true"] i{color:var(--pale)}

/* the axis is ordinal, not categorical: a staircase says so without colour */
.map-ramp{border-bottom:1px solid var(--rule);align-items:end;height:13px}
.map-ramp i{display:block;margin:0 3px;background:var(--rule)}
.map-ramp i[data-s="0"]{height:2px}
.map-ramp i[data-s="1"]{height:3px}
.map-ramp i[data-s="2"]{height:4px}
.map-ramp i[data-s="3"]{height:5px}
.map-ramp i[data-s="4"]{height:6px}

/* where the reader sits, if the diagnostic told us */
.map-you{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--teal);z-index:2;
  pointer-events:none;left:calc(var(--mapl) + (100% - var(--mapl)) * (var(--you) * 2 + 1) / 10)}
.map-you[hidden]{display:none}
/* the chip sits clear of the axis numerals, pointing down at its column */
.map-you span{position:absolute;top:-5px;left:6px;transform:translateY(-100%);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal);background:var(--yellow);padding:3px 6px 4px;white-space:nowrap}

/* one row per piece of work; the bar is the move */
.mv{border-top:1px solid var(--rule);text-decoration:none;color:var(--teal);transition:background .2s}
.mv:first-of-type{border-top:0}
.mv:hover,.mv:focus-visible{background:var(--panel)}
.mv-l{grid-column:1;padding:11px 16px;display:grid;gap:3px;min-width:0}
.mv-t{font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--teal);
  letter-spacing:-.015em;line-height:1.25}
.mv-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-mid)}
.mv-bar,.mv-pt{grid-row:1;background:var(--teal);transition:background .25s}
.mv-bar{grid-column:calc(var(--f) + 2) / calc(var(--t) + 3);height:21px;margin:9px 3px;
  display:flex;align-items:center;justify-content:center}
.mv-bar span{font-family:var(--mono);font-size:9px;letter-spacing:.11em;color:var(--paper);white-space:nowrap}
.mv-pt{grid-column:calc(var(--t) + 2) / calc(var(--t) + 3);width:21px;height:21px;margin:9px 0;justify-self:center}
/* filtered out: the fill recedes, and the type darkens to stay readable on it */
.mv.off .mv-bar,.mv.off .mv-pt{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--rule)}
.mv.off .mv-bar span{color:var(--teal-mid)}

/* the foot sits outside the ladder, so the position marker stops at it */
.map-foot{position:relative;z-index:3;border-top:1px solid var(--rule-2);background:var(--panel);padding:13px 16px;
  display:flex;flex-wrap:wrap;gap:7px 18px;align-items:baseline}
.map-foot a{font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--teal);
  text-decoration:none;letter-spacing:-.015em;border-bottom:1px solid var(--rule-2)}
.map-foot a:hover{border-color:var(--teal)}
.map-status{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;min-height:24px}
.map-status p{font-size:14.5px;color:var(--teal-mid)}
.map-status b{font-weight:500;color:var(--teal)}

@media(max-width:760px){
  .map{--mapl:0px}
  .map-row{grid-template-columns:repeat(5,1fr)}
  .map-c,.map-ramp .sp{display:none}
  /* stacked here, so the label sits over the position marker rather than under it */
  .mv-l{grid-column:1 / -1;padding:11px 12px 0;position:relative;z-index:3}
  .mv-bar{grid-row:2;grid-column:calc(var(--f) + 1) / calc(var(--t) + 2);margin-bottom:11px}
  .mv-pt{grid-row:2;grid-column:calc(var(--t) + 1) / calc(var(--t) + 2);margin-bottom:11px}
  .map-you{left:calc((var(--you) * 2 + 1) * 10%)}
}
@media(max-width:460px){ .stg i{display:none} }

/* ---------- portfolio entries ---------- */
.pf-group + .pf-group{margin-top:clamp(46px,6vw,76px)}
.pf-gh{display:flex;align-items:baseline;gap:8px 15px;flex-wrap:wrap;padding-bottom:13px;
  border-bottom:2px solid var(--teal);margin-bottom:clamp(26px,3.4vw,42px)}
.pf-gh h3{font-family:var(--display);font-size:clamp(19px,2.1vw,24px);color:var(--teal);font-weight:500}
.pf-kind{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);border:1px solid var(--rule-2);padding:3px 8px 4px;margin-left:11px;vertical-align:3px}
.case[hidden]{display:none}
.pf-none{padding:26px 22px;background:var(--panel);border-left:3px solid var(--teal);max-width:52ch}
.pf-none[hidden]{display:none}
.pf-none p{color:var(--teal-mid);font-size:15.5px}
.case-live{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
  text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:3px}
.case-live:hover{border-color:var(--teal)}
.case-live svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.2,.75,.3,1)}
.case-live:hover svg{transform:translate(3px,-3px)}

/* ================= THE ASSESSMENT: ONE QUESTION AT A TIME =================
   The site's axis descends: the surface ramp runs --s0 to --s4, the nav rail
   is a dive-line, and the waterline reads "below this line". So the reading
   here is a line lowered one mark per yes, held at the first not yet. Nothing
   on this page ever goes up, which is what keeps it from becoming a score. */

/* one card, one question, one progress row — nothing else competing */
.ask{border:1px solid var(--rule-2);background:var(--paper);padding:clamp(19px,2.8vw,28px)}
.ladder[data-state="done"] .ask{display:none}
.step{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:18px;border-bottom:1px solid var(--rule)}
.step[hidden]{display:none}
.step-l{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}

/* the hold notice prints inline above the next question, never as its own screen */
.hold{background:var(--panel-2);border-left:3px solid var(--teal);padding:16px 18px;margin-bottom:22px;
  display:grid;gap:8px;justify-items:start}
.hold[hidden]{display:none}
.hold .lbl{color:var(--teal)}
.hold p{font-size:15px;line-height:1.55;color:var(--teal-mid);max-width:52ch}

/* .qs sets display:grid, which would beat the hidden attribute's UA rule */
.qs[hidden]{display:none}
.qs.js .q,.qs.js .q:last-child{display:none;border:0}
.qs.js .q.on{display:block;animation:qin .28s ease both}
/* the outgoing question leaves before the next arrives, and .ask eases between
   the two heights so the record and the footer below never jump */
.qs.js .q.on.leaving{animation:qout .18s ease both}
@keyframes qin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes qout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-7px)}}
.ask{transition:height .3s cubic-bezier(.3,.72,.3,1)}
.ask.animating{overflow:hidden}
.qs.js .q fieldset{padding:0}
/* the step label above already says which question this is */
.qs.js .q-n{display:none}
.qs.js .q-t{font-size:clamp(20px,2.3vw,25px);max-width:26ch}
.qs.js .q-t:focus-visible{outline:2px solid var(--teal);outline-offset:4px}

.q-d{margin-top:14px}
.q-d summary{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--teal-mid);cursor:pointer;padding:5px 0;list-style:none}
.q-d summary::-webkit-details-marker{display:none}
.q-d summary::before{content:"▸ ";color:var(--teal)}
.q-d[open] summary::before{content:"▾ "}
.q-d summary:hover{color:var(--teal)}
.q-d p{margin-top:7px;padding-left:14px;border-left:1px solid var(--rule);font-size:14.5px;
  line-height:1.55;color:var(--teal-mid);max-width:50ch}

.qs.js .q-a{margin-top:20px;gap:10px}
.qs.js .ans span{padding:12px 28px;font-size:12px}
.keys{margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal-mid)}
.keys[hidden]{display:none}
@media(pointer:coarse){.keys{display:none}}
.quiz-foot{flex-wrap:wrap;gap:10px 14px}

/* the record: the arithmetic stays on the page, and stays editable */
.record{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule)}
.ladder:not([data-state="done"]) .record{display:none}
.record[hidden]{display:none}
.rec{list-style:none;margin:13px 0 0;padding:0;display:grid}
.rec li{display:grid;grid-template-columns:26px 1fr auto;align-items:baseline;gap:4px 12px;
  padding:11px 0;border-top:1px solid var(--rule)}
.rec li:first-child{border-top:0}
.rec-n{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--teal-mid)}
.rec-q{font-size:14.5px;line-height:1.45;color:var(--teal-mid)}
.rec-r{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.rec-s{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal)}
.rec-c{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  background:none;border:0;border-bottom:1px solid var(--rule-2);color:var(--teal-mid);cursor:pointer;padding:0 0 2px}
.rec-c:hover{color:var(--teal);border-color:var(--teal)}
.rec-note{margin-top:15px;font-size:14px;color:var(--teal-mid)}
.rec-note[hidden]{display:none}
@media(max-width:520px){
  .rec li{grid-template-columns:26px 1fr}
  .rec-r{grid-column:2}
}

/* the instrument */
/* The scale only appears once an answer has moved it. Before that it is a
   chart with nothing to say, and a first-time reader cannot tell what it is
   for. Appearing on the first answer makes the cause obvious. */
@media(min-width:1000px){
  .ladder > .quiz{grid-column:1;grid-row:1 / span 2}
  .ladder > .stages{grid-column:2;grid-row:2}
}
@media(max-width:999px){
  .lead-mech{display:none}
  /* One thing at a time: until there is a reading, the result column is
     scaffolding around four simple questions, and that is what made the
     page feel packed. */
  .stages:not(.shown){display:none}
  .ladder{gap:24px}
  .stage-lead{margin-bottom:26px}
}
/* ONE figure for the reading: five cells, yours filled. The previous version
   drew the same number four ways — a five-row chart, a header readout, a
   marker in a gutter and a footnote. */
.stages:not(.shown) .scale,
.stages:not(.shown) .scale-f{display:none}
.scale{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid var(--rule-2)}
.scale li{padding:12px 6px 13px;text-align:center;border-left:1px solid var(--rule);background:var(--paper)}
.scale li:first-child{border-left:0}
.scale b{display:block;font-family:var(--display);font-size:clamp(16px,2vw,21px);font-weight:500;
  letter-spacing:-.03em;line-height:1;color:var(--teal-mid)}
.scale span{display:block;margin-top:5px;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-mid);line-height:1.3}
.scale li.at{background:var(--teal)}
.scale li.at b,.scale li.at span{color:var(--paper)}
/* the rung answered below the reading. NB: not ".skip" — that is the
   skip-to-content link, which is position:fixed off-screen. */
.scale li.below{box-shadow:inset 0 0 0 2px var(--teal)}
.scale-f{margin-top:11px;font-size:13.5px;line-height:1.5;color:var(--teal-mid);max-width:60ch}
@media(max-width:420px){.scale span{font-size:7.5px;letter-spacing:.06em}}

.res-priv{font-size:13.5px;line-height:1.5;color:var(--teal-mid);max-width:46ch}

/* ---------- what I can do for you: concrete, one line each ---------- */
.offer{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--rule)}
@media(min-width:860px){.offer{grid-template-columns:1fr 1fr;column-gap:48px}}
.offer li{display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:baseline;
  padding:15px 0 16px;border-bottom:1px solid var(--rule);
  font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.45;color:var(--teal)}
.offer li::before{content:"";width:8px;height:8px;background:var(--teal);align-self:center}
.offer b{font-weight:500}

/* ---------- the atlas: where the work has been ----------
   A plotting sheet, not a picture of the world: a graticule, three pins at
   their real coordinates, and the year each region started. The graticule is
   SVG (stretchable, distortion does not matter on an abstract grid) but the
   pins and labels are HTML, so the type never shrinks with the container and
   can restack on a phone. */
.atlas{margin:clamp(28px,3.6vw,44px) 0 0;padding:clamp(16px,2.2vw,24px);
  border:1px solid var(--rule-2);background:var(--paper)}
.atlas-plot{position:relative;padding-top:28%}
.atlas-grid{position:absolute;inset:0;width:100%;height:100%}
/* the grid is stretched, so strokes must not stretch with it. vector-effect
   is not inherited from the group, so it goes on the paths themselves. */
.atlas-grid path{vector-effect:non-scaling-stroke}
.atlas-grid .grat{fill:none;stroke:var(--rule);stroke-width:1}
.atlas-grid .prime{fill:none;stroke:var(--rule-2);stroke-width:1}

.apin{position:absolute;left:var(--x);top:var(--y)}
.apin-d{position:absolute;left:-5px;top:-5px;width:10px;height:10px;background:var(--teal)}
/* the one I am based in now keeps a ring, knocked out of the grid behind it */
.apin.now .apin-d{box-shadow:0 0 0 5px var(--paper),0 0 0 6.5px var(--teal)}
.apin-t{position:absolute;top:0;white-space:nowrap;display:grid;gap:1px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-mid)}
.apin-t b{font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.03em;color:var(--teal);line-height:1}
.apin-t em{font-style:normal}
.p1 .apin-t{left:17px;transform:translateY(-50%)}
.p2 .apin-t,.p3 .apin-t{right:17px;transform:translateY(-50%);text-align:right;justify-items:end}

/* On a phone the three labels would sit on top of each other, so they take
   the space above and below their pins instead of beside them. */
@media(max-width:760px){
  .atlas-plot{padding-top:62%}
  .apin-t{font-size:8.5px;letter-spacing:.08em}
  .apin-t b{font-size:16px}
  .p1 .apin-t{left:-4px;top:14px;transform:none}
  .p2 .apin-t{right:-4px;top:-42px;transform:none}
  .p3 .apin-t{right:-4px;top:14px;transform:none}
}
.atlas figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-mid)}

/* ---------- background: a short line and three facts ---------- */
.bio h1{font-size:clamp(30px,4.8vw,54px);max-width:19ch;letter-spacing:-.03em;line-height:1.08;
  font-weight:400;color:var(--teal)}
.bio-lead{margin-top:26px;max-width:53ch;font-size:clamp(16.5px,1.6vw,19px);color:var(--teal-mid)}
.bio-lead + .bio-lead{margin-top:14px;font-size:16px}

/* the card: the brand's printed back, set in a browser */
.card{margin-top:clamp(34px,4.5vw,56px);background:var(--teal);color:var(--pale);
  --hair:rgba(168,194,197,.3)}
/* the credentials read as an instrument panel, to match the plot above */
.readout{margin:clamp(28px,3.6vw,44px) 0 0}
.cr{display:grid;grid-template-columns:1fr;gap:6px 26px;
  padding:clamp(16px,2.2vw,22px) clamp(20px,2.8vw,28px);border-top:1px solid var(--hair)}
.cr:first-child{border-top:0}
@media(min-width:620px){.cr{grid-template-columns:120px 1fr;align-items:baseline}}
.cr dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pale)}
.cr dd{margin:0;font-family:var(--display);font-size:clamp(17px,1.9vw,21px);font-weight:500;
  letter-spacing:-.02em;color:var(--paper);line-height:1.4}

/* ---------- moving between pages ----------
   The rail is the ladder, so it holds still while the page descends past it.
   Progressive enhancement: browsers without view transitions just navigate. */
@view-transition{navigation:auto}
.rail{view-transition-name:rail}
.bar{view-transition-name:bar}
@keyframes pg-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes pg-in{from{opacity:0;transform:translateY(12px)}}
/* The two pages must not overlap. The browser blends the outgoing and incoming
   snapshots with plus-lighter by default, so two semi-transparent copies of the
   same text add together and the type looks washed out. Normal blending, and
   the incoming page waits for the outgoing one to finish. */
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){animation:pg-out .16s ease-in both}
::view-transition-new(root){animation:pg-in .26s cubic-bezier(.22,.7,.3,1) .16s both}
/* The rail and header hold still, but only the incoming copy may be painted:
   stacking both doubles the type, and the rail's active-page marker differs
   between pages, so you would see two pages marked current at once. */
::view-transition-old(rail),::view-transition-old(bar){animation:none;opacity:0}
::view-transition-new(rail),::view-transition-new(bar){animation:none;opacity:1;mix-blend-mode:normal}

.rv{opacity:0;transform:translateY(13px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media print{
  :root{--pad:0}
  body{padding-left:0;background:#fff;color:#000;font-size:11pt}
  .rail,.prog,.bar,.tabs,.quiz,.browse,.res-empty,.res-cta,.res-head,.skip,.ccard-a,.ccard-i,.cal{display:none!important}
  .map-you,.map-status,.case-live svg{display:none!important}
  .map{border:1px solid #000!important}
  .stg,.map-foot{background:#fff!important}
  .stg b,.stg i,.map-c{color:#000!important}
  .mv-bar,.mv-pt,.mv.off .mv-bar,.mv.off .mv-pt{background:#000!important}
  .mv-bar span{color:#fff!important}
  .map-ramp{display:none!important}
  .case[hidden]{display:block!important}
  .pf-none{display:none!important}
  .ccard{border:0!important;padding:2px 0!important;background:none!important;color:#000!important}
  section{padding:18pt 0;border-bottom:1px solid #ccc;break-inside:avoid}
  .stages.js .stage{display:block!important}
  .stage,.opt,.sc,.pull,.cta,.waterline{background:#fff!important;color:#000!important;box-shadow:none!important}
  .stage[data-s="4"],.stage[data-s="4"] *{background:#fff!important;color:#000!important}
  .opt.pick{border:1px solid #000!important}
  .opt.pick,.opt.pick *{color:#000!important}
  .rv{opacity:1!important;transform:none!important}
  .hero-fig{max-width:150px}
  a[href^="http"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:8pt;word-break:break-all}
  .wl,.seek .sl{background:none!important;border:1px solid #000;padding:3px 7px}
}
@media(prefers-reduced-motion:reduce){
  /* the * selector never matches view-transition pseudo-elements, so name them */
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .rv.in .opt:not(.pick){opacity:1}
  .rv.in .opt.pick::after{width:4px}
  .stages.js .stage.on{animation:none}
  .ccard-a svg,.btn.cv .cv-stem{transition:none!important;transform:none!important}
}