/* NT Logistics — concept site, dark
   Archivo (display + prose) · Archivo also for labels, data and captions (was IBM Plex Mono until Nov 4, 2026)
   Committed dark design: every color painted explicitly.
   --ink is the TEXT color and --paper the page. On this theme --grn-dk is
   the higher-contrast green (lighter than --grn), because contrast runs the
   other way against a dark ground. --panel is for blocks that need to sit
   apart from the page; on the light build those used --ink directly. */

:root{
  --paper:#FFFFFF;
  --sheet:#F1F5F2;
  --panel:#06231A;
  --ink:#0B1410;
  --ink-2:#3B4942;
  --mute:#5C6962;
  --faint:#67746D;
  --rule:#E2E8E4;
  --rule-2:#C6D0CA;
  --grn:#007A32;
  --grn-dk:#006027;
  --grn-soft:#E4F2EA;
  --grn-tint:#F2F9F5;
  --amber:#6F5210;
  --warn:#A8331B;
  --on-grn:#FFFFFF;
  --field:#F4F8F6;
  --track:#C8D3CC;
  --grn-bright:#006027;
  --grn-pale:#006027;
  --on-panel:#9DB0A6;
  --on-panel-2:#8B968F;
  --ph:#6F5210;
  --d:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --m:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,72px);
  --max:1320px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:dark}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--d);font-size:16px;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{font-family:var(--d);font-weight:700;margin:0;letter-spacing:-.035em;line-height:1.04;text-wrap:balance;color:var(--ink)}
::selection{background:var(--grn);color:var(--on-grn)}
:focus-visible{outline:2px solid var(--grn);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{max-width:var(--max);margin:0 auto;padding-inline:var(--pad);width:100%}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(12px,2vw,28px)}
.off-l{grid-column:1/10}
.off-r{grid-column:4/13}
@media(max-width:900px){.off-l,.off-r{grid-column:1/-1}}

.lab{font-family:var(--m);font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin:0}
.lab.g{color:var(--grn)}
.ph{font-family:var(--m);font-size:.55rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);border:1px solid currentColor;padding:1px 5px;display:inline-block;white-space:nowrap;vertical-align:middle}
.rule{border:0;border-top:1px solid var(--rule);width:100%;margin:0}

#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:90;background:var(--grn);transition:width .08s linear}

/* ---------- concept banner ---------- */
.cbar{background:var(--panel);color:#fff}
.cbar .w{display:flex;gap:14px;align-items:center;padding-block:8px;
  font-family:var(--m);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase}
.cbar b{background:var(--grn);color:var(--on-grn);padding:3px 8px;font-weight:700}
.cbar span{color:var(--on-panel)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(8,13,10,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hd .w{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand img{height:clamp(54px,5.2vw,74px);width:auto;display:block}
.mb{display:none;font-family:var(--m);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:1px solid var(--rule-2);color:var(--ink);padding:9px 14px;cursor:pointer}
.nv{display:flex;align-items:center;gap:clamp(22px,3.2vw,44px)}
.nv a{font-family:var(--d);font-size:1.02rem;font-weight:600;letter-spacing:-.015em;text-transform:none;
  color:var(--ink);text-decoration:none;white-space:nowrap;padding-block:4px;border-bottom:2px solid transparent}
.nv a:hover{color:var(--grn)}
.nv a.on{color:var(--grn);border-bottom-color:var(--grn)}
.nv a.go{background:var(--grn);color:var(--on-grn);padding:15px 24px;font-weight:700;font-size:1.02rem;
  letter-spacing:-.015em;border-bottom:0}
.nv a.go:hover{background:var(--grn-dk);color:var(--on-grn)}
@media(max-width:1000px){
  .mb{display:block}
  .nv{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;gap:0;padding:6px var(--pad) 20px}
  .nv.open{display:flex}
  .nv a{padding:16px 0;border-bottom:1px solid var(--rule);font-size:1.05rem}
  .nv a.go{text-align:center;margin-top:14px;border-bottom:0}
}


/* ---------- sections ---------- */
.sect{padding-block:clamp(60px,11vh,130px);border-bottom:1px solid var(--rule)}
.sect.lite{background:var(--sheet)}
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(30px,5vh,54px)}
.head h2{font-size:clamp(1.7rem,3.4vw,2.8rem);max-width:22ch}
.sub{font-family:var(--d);font-weight:400;font-size:clamp(1rem,1.7vw,1.2rem);letter-spacing:-.01em;
  line-height:1.62;color:var(--ink-2);max-width:56ch;margin-top:20px}
.stack{display:flex;flex-direction:column;gap:clamp(20px,3vh,34px);align-items:flex-start}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--rule)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:-3;
  opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 62%);mask-image:linear-gradient(90deg,transparent 8%,#000 62%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:
  linear-gradient(90deg,var(--paper) 0%,var(--paper) 34%,rgba(8,13,10,.86) 52%,rgba(8,13,10,.28) 78%,rgba(8,13,10,.1) 100%)}
.hero .w{padding-block:clamp(54px,10vh,124px) clamp(50px,9vh,108px)}
.hero .inner{grid-column:1/9}
@media(max-width:1000px){
  .hero .inner{grid-column:1/-1}
  .hero>img{-webkit-mask-image:none;mask-image:none;opacity:.42}
  .hero::after{background:linear-gradient(180deg,rgba(8,13,10,.60) 0%,rgba(8,13,10,.74) 52%,rgba(8,13,10,.90) 100%)}
}
.hero h1{font-size:clamp(2.3rem,6vw,4.6rem);max-width:13ch}
.hero h2{font-size:clamp(1.9rem,4.4vw,3.3rem);max-width:16ch}

/* ---------- the fill-in-the-blank form ---------- */
.mad{font-family:var(--d);font-weight:700;letter-spacing:-.032em;line-height:1.5;
  font-size:clamp(1.25rem,2.7vw,2.2rem);color:var(--ink);max-width:26ch}
.mad .q{color:var(--ink)}
.mad input,.mad select{
  font-family:var(--d);font-weight:700;font-size:inherit;letter-spacing:-.032em;
  color:var(--grn-dk);background:var(--grn-tint);
  border:0;border-bottom:.085em dashed var(--rule-2);
  padding:.02em .22em;margin:0 .06em;border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .15s,background .15s;min-width:0;field-sizing:content}
.mad input::placeholder{color:var(--faint);opacity:1;font-weight:600}
.mad input:hover,.mad select:hover{background:var(--grn-soft)}
.mad input:focus,.mad select:focus{outline:none;background:var(--grn-soft);border-bottom:.085em solid var(--grn)}
.mad input:not(:placeholder-shown){border-bottom:.085em solid var(--grn);background:var(--grn-soft)}
.i-name{width:6.2ch}.i-co{width:8.4ch}.i-mail{width:10.5ch}
.mad select{width:auto;border-bottom:.085em solid var(--grn);background:var(--grn-soft);cursor:pointer;padding-right:1.2em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230A6F36' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .28em center;background-size:.42em auto}

/* the cue that this is fillable: a caret that blinks until they start */
.mad input.cue{animation:cue 1.15s steps(1,end) infinite}
@keyframes cue{0%,49%{box-shadow:inset -2px 0 0 0 var(--grn)}50%,100%{box-shadow:inset -2px 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.mad input.cue{animation:none;box-shadow:inset -2px 0 0 0 var(--grn)}}

.go{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;margin-top:clamp(26px,4vh,40px)}
.big-btn{display:inline-flex;align-items:center;gap:14px;background:var(--grn);color:var(--on-grn);border:0;cursor:pointer;
  font-family:var(--d);font-weight:700;font-size:clamp(.95rem,1.5vw,1.1rem);letter-spacing:-.02em;
  padding:17px 26px;text-decoration:none;transition:background .15s}
.big-btn:hover{background:var(--grn-dk);color:var(--on-grn)}
.big-btn svg{width:19px;height:19px;flex:0 0 auto}
.fine{font-family:var(--m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);line-height:1.9}
.count{font-family:var(--m);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  display:inline-flex;align-items:center;gap:9px}
.count i{width:7px;height:7px;background:var(--rule-2);display:block;transform:rotate(45deg)}
.count.done{color:var(--grn)}
.count.done i{background:var(--grn)}
.ok{display:none;font-family:var(--m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grn-dk);background:var(--grn-soft);border-left:2px solid var(--grn);padding:13px 16px;margin-top:22px;max-width:52ch;line-height:1.8}
.ok.show{display:block}

/* ---------- marquee ---------- */
.marq{overflow:hidden;border-bottom:1px solid var(--rule);background:var(--paper);padding-block:clamp(18px,2.6vh,30px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq-t{display:flex;width:max-content;animation:slide 52s linear infinite}
.marq-g{display:flex;align-items:center;flex:0 0 auto}
.marq-g span{font-family:var(--d);font-weight:800;font-size:clamp(1.1rem,2.3vw,1.95rem);letter-spacing:-.035em;
  padding-inline:clamp(14px,2vw,28px);white-space:nowrap;color:var(--ink)}
.marq-g span:nth-of-type(even){color:var(--faint)}
.marq-g i{width:5px;height:5px;background:var(--grn);flex:0 0 auto;transform:rotate(45deg)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq-t{animation:none}}

/* ---------- page head ---------- */
.phead{padding-block:clamp(40px,7vh,84px) clamp(30px,4.5vh,52px);border-bottom:1px solid var(--rule);background:var(--paper)}
.phead .inner{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.phead h1{font-size:clamp(2rem,4.6vw,3.4rem);max-width:14ch}
.phead .ph-l .lab{margin-bottom:16px}
.phead .ph-r{padding-bottom:.4em}
.phead .ph-r .sub{margin-top:0;max-width:46ch}
@media(max-width:900px){.phead .inner{grid-template-columns:1fr;gap:18px;align-items:start}.phead .ph-r{padding-bottom:0}}
.phead+.sect{padding-top:clamp(38px,6vh,72px)}

/* ---------- two pillars ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.split>div{padding:clamp(24px,3.4vw,42px);border:1px solid var(--rule);background:var(--paper)}
.split>div+div{border-left:0}
.split .tm{font-family:var(--m);font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grn);display:block;margin-bottom:14px}
.split h3{font-size:clamp(1.35rem,2.4vw,1.95rem);max-width:13ch;margin-bottom:12px}
.split>div>p{font-size:.98rem;line-height:1.7;color:var(--ink-2);max-width:38ch}
.split ul{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rule)}
.split li{border-bottom:1px solid var(--rule)}
.split li a{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:14px 0;
  text-decoration:none;font-family:var(--d);font-weight:600;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink);transition:padding-left .2s ease,color .15s}
.split li a em{font-family:var(--m);font-style:normal;font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);text-align:right}
.split li a:hover{padding-left:9px;color:var(--grn)}
@media(max-width:860px){.split{grid-template-columns:1fr}.split>div+div{border-left:1px solid var(--rule);border-top:0}}

/* ---------- data screen ---------- */
.screen{border:1px solid var(--rule-2);background:var(--paper);overflow:hidden;box-shadow:0 12px 30px -20px rgba(11,20,16,.3)}
.screen .bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--rule);background:var(--sheet);
  font-family:var(--m);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.screen .bar i{width:6px;height:6px;background:var(--grn);transform:rotate(45deg);flex:0 0 auto}
.screen .bar b{color:var(--ink);font-weight:600}
.screen .bar .rt{margin-left:auto;color:var(--grn)}
.screen table{width:100%;border-collapse:collapse;font-family:var(--m);font-size:.72rem;font-variant-numeric:tabular-nums}
.screen th{text-align:left;font-weight:500;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);padding:12px 16px;border-bottom:1px solid var(--rule-2);white-space:nowrap;background:var(--paper)}
.screen td{padding:12px 16px;border-bottom:1px solid var(--rule);color:var(--ink);white-space:nowrap}
.screen tr:last-child td{border-bottom:0}
.screen td.num{text-align:right}
.screen td .bad{color:var(--warn);font-weight:600}
.screen td .good{color:var(--grn);font-weight:600}
.scroller{overflow-x:auto}

/* ---------- bars ---------- */
.bars{display:flex;flex-direction:column;gap:2px}
.br{display:grid;grid-template-columns:minmax(120px,1fr) 2.4fr auto;gap:clamp(12px,2.4vw,26px);align-items:center;
  padding:15px 0;border-bottom:1px solid var(--rule)}
.br .n{font-family:var(--d);font-weight:600;font-size:clamp(.92rem,1.5vw,1.1rem);letter-spacing:-.02em}
.br .t{display:block;height:8px;background:var(--rule)}
.br .t i{display:block;height:100%;background:var(--grn)}
.br.dim .t i{background:var(--rule-2)}
.br .v{font-family:var(--m);font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.br.dim .n,.br.dim .v{color:var(--faint)}
@media(max-width:640px){.br{grid-template-columns:1fr auto;gap:8px 14px}.br .t{grid-column:1/-1}}

/* ---------- service index ---------- */
.index{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--rule);
  padding-block:clamp(60px,11vh,130px);background:var(--paper)}
.index .bgs{position:absolute;inset:0;z-index:-2}
.index .bgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 88%);mask-image:linear-gradient(90deg,transparent 30%,#000 88%)}
.index .bgs img.on{opacity:.5}
.index::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 40%,rgba(8,13,10,.82) 58%,rgba(8,13,10,.2) 92%)}
@media(max-width:1000px){.index .bgs{display:none}}
.ix{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.ix-row{display:grid;grid-template-columns:clamp(52px,7vw,68px) 1fr auto;gap:0 clamp(10px,2vw,26px);align-items:center;
  padding:clamp(14px,2.2vh,24px) 0;border:0;border-bottom:1px solid var(--rule);background:none;text-align:left;
  cursor:pointer;color:var(--ink);font:inherit;width:100%;transition:padding-left .22s ease}
.ix-row .ix-n{font-family:var(--m);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ix-row .ix-t{font-family:var(--d);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.9rem);letter-spacing:-.035em}
.ix-row .ix-m{font-family:var(--m);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:right}
.ix-row.on{padding-left:12px}
.ix-row.on .ix-n,.ix-row.on .ix-t{color:var(--grn)}
@media(max-width:600px){.ix-row{grid-template-columns:36px 1fr}.ix-row .ix-m{display:none}}

/* ---------- number cards ---------- */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
@media(max-width:860px){.nums{grid-template-columns:1fr}}
.nm{display:flex;flex-direction:column;gap:10px}
.nm img{width:100%;aspect-ratio:16/10;object-fit:cover}
.nm .f{font-family:var(--d);font-weight:800;font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:-.045em;line-height:1;color:var(--grn)}
.nm .c{font-family:var(--m);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);line-height:1.9}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.cd{display:flex;flex-direction:column;gap:10px;align-items:flex-start;color:var(--ink)}
.cd img{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:2px}
.cd .f{font-family:var(--d);font-weight:800;font-size:clamp(1.7rem,2.8vw,2.2rem);letter-spacing:-.045em;line-height:1;color:var(--grn)}
.cd p{font-family:var(--m);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);line-height:1.9}
.cd:hover .f{color:var(--grn-dk)}

/* ---------- two-up ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,64px);align-items:center}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:26px}}
.two img{width:100%;min-height:clamp(220px,28vw,360px);object-fit:cover}
.two .c{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.two h2{font-size:clamp(1.5rem,3vw,2.3rem);max-width:17ch}

/* ---------- facts strip ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--rule-2);margin:0}
.facts div{padding:18px 20px 18px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.facts dt{font-family:var(--m);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:0;font-family:var(--d);font-weight:700;font-size:1.1rem;letter-spacing:-.025em;color:var(--ink)}

/* ---------- closer ---------- */
.close{padding-block:clamp(60px,11vh,130px);background:var(--panel);color:#fff;
  border-top:1px solid var(--grn);border-bottom:1px solid var(--rule)}
.close .inner{grid-column:1/10}
@media(max-width:900px){.close .inner{grid-column:1/-1}}
.close .lab{color:var(--grn-pale)}
.close .est-line{font-family:var(--d);font-weight:700;font-size:clamp(1.7rem,4vw,3.1rem);letter-spacing:-.04em;
  line-height:1.14;color:#fff;margin-top:18px;max-width:20ch}
.est-out{color:var(--grn-bright)}
.close .est-line b{color:var(--grn-bright)}
.close .big-btn{background:var(--grn);color:var(--on-grn);margin-top:clamp(26px,4vh,40px)}
.close .big-btn:hover{background:var(--grn-dk);color:var(--on-grn)}
.slider{margin-top:clamp(22px,3.5vh,34px);max-width:520px}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--track);outline:none}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--grn);cursor:pointer;border:0}
.rng::-moz-range-thumb{width:20px;height:20px;background:var(--grn);cursor:pointer;border:0}
.ticks{display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--m);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-panel-2)}
.close .lab .ph{color:var(--ph)}

/* ---------- self-assessment ---------- */
.asx{border:1px solid var(--rule-2);background:var(--paper);padding:clamp(20px,3.2vw,38px);
  display:flex;flex-direction:column;gap:26px;box-shadow:0 12px 30px -22px rgba(11,20,16,.3)}
.asq{display:flex;flex-direction:column;gap:12px}
.asq .qn{display:flex;gap:12px;align-items:baseline}
.asq .qn b{font-family:var(--m);font-size:.6rem;font-weight:600;letter-spacing:.14em;color:var(--grn);flex:0 0 auto}
.asq .qn span{font-family:var(--d);font-weight:600;font-size:clamp(1rem,1.7vw,1.18rem);letter-spacing:-.022em;line-height:1.4}
.opts{display:flex;flex-wrap:wrap;gap:8px;padding-left:30px}
.opts button{font-family:var(--m);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  background:var(--paper);color:var(--ink-2);border:1px solid var(--rule-2);padding:10px 15px;transition:.14s}
.opts button:hover{border-color:var(--grn);color:var(--grn-dk);background:var(--grn-tint)}
.opts button[aria-pressed="true"]{background:var(--grn);border-color:var(--grn);color:var(--on-grn);font-weight:700}
.asout{border-top:1px solid var(--rule);padding-top:24px;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,3vw,38px);align-items:center}
.asout .sc{font-family:var(--d);font-weight:800;font-size:clamp(3rem,7vw,4.6rem);letter-spacing:-.055em;line-height:.9;color:var(--grn)}
.asout .sc small{display:block;font-family:var(--m);font-size:.56rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-top:10px}
.asout .rd h4{font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.03em;margin:0 0 9px}
.asout .rd p{font-size:.98rem;line-height:1.7;color:var(--ink-2);max-width:52ch}
@media(max-width:640px){.asout{grid-template-columns:1fr}.opts{padding-left:0}}

/* ---------- door ---------- */
.door{border:1px solid var(--rule-2);background:var(--grn-tint);padding:clamp(20px,3.2vw,36px);
  display:flex;gap:clamp(18px,3vw,40px);align-items:center;justify-content:space-between;flex-wrap:wrap}
.door h3{font-size:clamp(1.2rem,2.2vw,1.7rem);max-width:22ch}
.door p{font-size:.95rem;line-height:1.7;color:var(--ink-2);margin-top:10px;max-width:46ch}

/* ---------- case study ---------- */
.cs{max-width:66ch}
.cs h2{font-size:clamp(1.35rem,2.6vw,2rem);margin:clamp(34px,5vh,54px) 0 14px}
.cs p{font-size:1.03rem;line-height:1.75;color:var(--ink-2);margin-bottom:16px}
.cs p b{color:var(--ink);font-weight:600}
.cs ul{margin:0 0 16px;padding-left:20px;color:var(--ink-2);font-size:1.03rem;line-height:1.75}
.cs li{margin-bottom:8px}
.pull{border-left:3px solid var(--grn);padding:2px 0 2px 22px;margin:clamp(28px,4vh,42px) 0}
.pull q{display:block;font-family:var(--d);font-weight:700;font-size:clamp(1.25rem,2.5vw,1.85rem);
  letter-spacing:-.032em;line-height:1.24;quotes:none;color:var(--ink)}
.pull cite{display:block;font-style:normal;font-family:var(--m);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-top:14px}
.ba{width:100%;border-collapse:collapse;font-family:var(--m);font-size:.76rem;font-variant-numeric:tabular-nums;margin:8px 0 14px}
.ba th{text-align:left;font-weight:500;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);padding:11px 14px 11px 0;border-bottom:1px solid var(--rule-2)}
.ba td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);white-space:nowrap;color:var(--ink)}
.ba td:first-child{white-space:normal;color:var(--ink-2)}
.ba td.d{color:var(--grn);font-weight:600}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.tl li{display:grid;grid-template-columns:clamp(78px,11vw,128px) 1fr;gap:clamp(14px,2.5vw,30px);
  padding:18px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.tl .wk{font-family:var(--m);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grn)}
.tl .ev{font-family:var(--d);font-weight:600;font-size:clamp(.98rem,1.6vw,1.15rem);letter-spacing:-.022em;color:var(--ink)}
.tl .ev small{display:block;font-family:var(--m);font-weight:400;font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);margin-top:5px;line-height:1.8}

/* ---------- insights ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3.6vh,36px)}
.chips button{font-family:var(--m);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  background:var(--paper);color:var(--ink-2);border:1px solid var(--rule-2);padding:9px 15px;transition:.14s}
.chips button:hover{border-color:var(--grn);color:var(--grn-dk);background:var(--grn-tint)}
.chips button[aria-pressed="true"]{background:var(--grn);border-color:var(--grn);color:var(--on-grn);font-weight:700}
.feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.feed li{border-bottom:1px solid var(--rule)}
.feed a{display:grid;grid-template-columns:clamp(96px,12vw,146px) 1fr auto;gap:clamp(14px,2.4vw,30px);
  align-items:baseline;padding:20px 0;text-decoration:none;color:var(--ink);transition:padding-left .2s ease}
.feed a:hover{padding-left:9px}
.feed a:hover .ti{color:var(--grn)}
.feed .kd{font-family:var(--m);font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grn)}
.feed .ti{font-family:var(--d);font-weight:600;font-size:clamp(1rem,1.8vw,1.28rem);letter-spacing:-.025em;line-height:1.32}
.feed .dt{font-family:var(--m);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
@media(max-width:700px){.feed a{grid-template-columns:1fr;gap:8px}.feed .dt{display:none}}

/* ---------- people ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(16px,2.4vw,30px)}
.pr{display:flex;flex-direction:column;gap:8px}
.pr .av{aspect-ratio:1;background:var(--sheet);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  font-family:var(--d);font-weight:800;font-size:2rem;letter-spacing:-.045em;color:var(--grn-dk)}
.pr .nm2{font-family:var(--d);font-weight:700;font-size:1.05rem;letter-spacing:-.025em}
.pr .rl{font-family:var(--m);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grn)}

/* ---------- requirements ---------- */
.req{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);max-width:56ch}
.req li{display:flex;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--rule);
  font-size:.98rem;color:var(--ink-2);line-height:1.65}
.req li i{width:6px;height:6px;background:var(--grn);flex:0 0 auto;position:relative;top:-2px;transform:rotate(45deg)}

/* ---------- footer ---------- */
.ft{padding-block:52px 28px;background:var(--sheet)}
.ft .w{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.ft img{height:26px;width:auto}
.ft .col{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.ft .col a{font-family:var(--m);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.ft .col a:hover{color:var(--grn)}
.ft .lg{grid-column:1/-1;border-top:1px solid var(--rule-2);padding-top:20px;margin-top:12px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--m);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
@media(max-width:860px){.ft .w{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft .w{grid-template-columns:1fr}}

/* ---------- sticky mobile CTA ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(8,13,10,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--rule-2);padding:11px var(--pad);display:none}
.sticky a{display:flex;justify-content:center;background:var(--grn);color:var(--on-grn);
  font-family:var(--d);font-weight:700;font-size:.98rem;padding:15px;text-decoration:none}
@media(max-width:1000px){.sticky{display:block}body{padding-bottom:74px}}

/* --- refinements --- */
/* hold the photo to the right so the headline and subhead sit on clean white */
.hero>img{opacity:.95;object-position:center right;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 78%);mask-image:linear-gradient(90deg,transparent 30%,#000 78%)}
.hero::after{background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 46%,rgba(8,13,10,.9) 60%,rgba(8,13,10,.35) 82%,rgba(8,13,10,.12) 100%)}
.hero .inner{grid-column:1/8}
.hero h1{max-width:11ch}
.hero .sub-hero{font-family:var(--d);font-weight:500;font-size:clamp(1rem,1.9vw,1.35rem);letter-spacing:-.015em;
  line-height:1.55;color:var(--ink-2);max-width:34ch;margin-top:20px}
@media(max-width:1100px){.hero .inner{grid-column:1/-1}}

/* keep the header on one line */
.hd .w{padding-block:12px}
.nv{gap:clamp(20px,2.8vw,40px);flex-wrap:nowrap}
.brand img{height:clamp(54px,5.2vw,74px)}
@media(max-width:1000px){.nv{flex-wrap:wrap}.nv a{font-size:1.05rem}}

/* the blanks read as blanks at every size */
.mad{line-height:1.55}
.mad input,.mad select{background:var(--field);border-bottom-width:.075em;color:var(--ink)}
.mad input::placeholder{color:var(--faint)}
/* the mobile CTA offset was leaking onto desktop and dropping the button a line */
@media(min-width:1001px){.nv a.go{margin-top:0;align-self:center}}

/* the two pillar panels have to start their lists on the same line */
.split{align-items:stretch}
.split>div{display:flex;flex-direction:column}
.split>div>p{min-height:calc(3 * 1.7em)}
.split ul{margin-top:auto;padding-top:22px}
@media(max-width:860px){.split>div>p{min-height:0}.split ul{margin-top:22px;padding-top:0}}

/* running prose inside sections */
.body{font-size:1rem;line-height:1.72;color:var(--ink-2);max-width:52ch}
.two .c .body{max-width:50ch}
/* service blocks: copy left, what it answers right */
.svc p{font-size:1rem;line-height:1.72;color:var(--ink-2);max-width:50ch}

/* --- conversion pass: second door, trust line, assessment payoff --- */
.trust{font-family:var(--m);font-size:.6rem;letter-spacing:.09em;line-height:1.95;color:var(--mute);
  max-width:52ch;margin-top:16px;padding-left:13px;border-left:2px solid var(--rule-2)}
.fine{font-family:var(--m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);line-height:1.9}

.alt{margin-top:clamp(28px,4.5vh,44px);padding-top:22px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;max-width:56ch}
.alt>span{font-family:var(--d);font-weight:500;font-size:1rem;color:var(--ink-2)}
.alt a{font-family:var(--d);font-weight:700;font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.02em;
  color:var(--grn-dk);text-decoration:none;font-variant-numeric:tabular-nums;border-bottom:2px solid var(--grn-soft)}
.alt a:hover{border-bottom-color:var(--grn)}
.alt .hrs{flex:1 0 100%;font-family:var(--m);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}

.asnote{font-size:.92rem;line-height:1.7;color:var(--ink-2);max-width:52ch;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--rule)}
.asacts{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:20px}
.ghost-btn{font-family:var(--d);font-weight:600;font-size:.92rem;letter-spacing:-.01em;cursor:pointer;
  background:transparent;color:var(--ink-2);border:1px solid var(--rule-2);padding:15px 20px;transition:.15s}
.ghost-btn:hover{border-color:var(--grn);color:var(--grn-dk);background:var(--grn-tint)}
.asout .sc{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;white-space:nowrap}
.asout .sc small{white-space:normal}

/* contact */
.ccard{border:1px solid var(--rule-2);background:var(--paper);padding:clamp(22px,3.4vw,38px);
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ccard .big-btn{margin-top:auto}
.ccard h3{font-size:clamp(1.15rem,2.1vw,1.55rem)}
.ccard p{font-size:.98rem;line-height:1.7;color:var(--ink-2);max-width:40ch}
.ccard .big-num{font-family:var(--d);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.035em;
  color:var(--grn-dk);text-decoration:none;font-variant-numeric:tabular-nums}
.ccard .mail{font-family:var(--m);font-size:.8rem;letter-spacing:.06em;color:var(--grn-dk);text-decoration:none;word-break:break-all}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,2vw,22px)}

/* article */
.art{max-width:64ch}
.art p{font-size:1.05rem;line-height:1.8;color:var(--ink-2);margin-bottom:18px}
.art p.lede{font-size:1.2rem;line-height:1.7;color:var(--ink)}
.art h2{font-size:clamp(1.3rem,2.4vw,1.85rem);margin:clamp(34px,5vh,52px) 0 14px}
.art ol,.art ul{margin:0 0 18px;padding-left:22px;color:var(--ink-2);font-size:1.05rem;line-height:1.8}
.art li{margin-bottom:10px}
.art li b{color:var(--ink)}
.byline{font-family:var(--m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:clamp(26px,4vh,40px)}
.feed .dek{grid-column:2;font-size:.92rem;line-height:1.6;color:var(--mute);margin-top:6px;max-width:62ch}
.feed a{align-items:start}
@media(max-width:700px){.feed .dek{grid-column:1}}

/* newsletter signup that can actually take an address */
.sub-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sub-form input{font-family:var(--m);font-size:.82rem;padding:15px 14px;min-width:min(260px,100%);
  border:1px solid var(--rule-2);background:var(--paper);color:var(--ink)}
.sub-form input:focus{outline:none;border-color:var(--grn)}
@media print{.hd,.cbar,.sticky,.ft,.asacts,.marq{display:none!important}}
.ci{font-family:var(--m);font-size:.85rem;padding:14px;border:1px solid var(--rule-2);background:var(--paper);
  color:var(--ink);width:100%;resize:vertical}
.ci:focus{outline:none;border-color:var(--grn)}
.opts .ci{max-width:100%}

/* --- readable notes replace the grey mono small print --- */
.note{font-family:var(--d);font-weight:400;font-size:.92rem;line-height:1.65;color:var(--mute);
  max-width:54ch;margin-top:14px;letter-spacing:0;text-transform:none}
.note .ph{margin-left:4px}
.go .note{margin-top:0}
.screen-cap{font-family:var(--d);font-weight:400;font-size:.92rem;line-height:1.6;color:var(--mute);
  margin-top:14px;max-width:44ch}

/* --- hero becomes two columns: the argument left, the instrument right --- */
.hero .inner{grid-column:1/7}
.hero-screen{grid-column:7/13;align-self:center;padding-top:8px}
.hero>img{-webkit-mask-image:linear-gradient(90deg,transparent 42%,#000 96%);
  mask-image:linear-gradient(90deg,transparent 42%,#000 96%);opacity:.5}
.hero::after{background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 48%,rgba(8,13,10,.94) 66%,rgba(8,13,10,.82) 100%)}
.hero-screen .screen{box-shadow:0 26px 60px -26px rgba(11,20,16,.38)}
.hero-screen .screen table{font-size:.68rem}
.hero-screen .screen th,.hero-screen .screen td{padding:10px 14px}
.hero .alt{max-width:46ch}
@media(max-width:1100px){
  .hero .inner{grid-column:1/-1}
  .hero-screen{grid-column:1/-1;margin-top:clamp(30px,5vh,48px);padding-top:0}
  .hero>img{-webkit-mask-image:none;mask-image:none;opacity:.42}
  .hero::after{background:linear-gradient(180deg,rgba(8,13,10,.60) 0%,rgba(8,13,10,.74) 52%,rgba(8,13,10,.90) 100%)}
}
/* the trucks have to stay visible behind the instrument, or it reads as software */
.hero>img{-webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 62%);
  mask-image:linear-gradient(90deg,transparent 34%,#000 62%);opacity:1}
.hero::after{background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 44%,rgba(8,13,10,.72) 58%,rgba(8,13,10,.3) 76%,rgba(8,13,10,.18) 100%)}
.hero-screen{align-self:end;padding-top:0;padding-bottom:clamp(4px,2vh,18px)}
.hero-screen .screen{background:rgba(8,13,10,.97);backdrop-filter:blur(4px)}
.hero-screen .screen-cap{color:var(--ink-2);text-shadow:0 1px 0 rgba(8,13,10,.9)}
@media(max-width:1100px){
  .hero>img{-webkit-mask-image:none;mask-image:none;opacity:.42}
  .hero::after{background:linear-gradient(180deg,rgba(8,13,10,.60) 0%,rgba(8,13,10,.74) 52%,rgba(8,13,10,.90) 100%)}
  .hero-screen{align-self:auto;padding-bottom:0}
}

/* ---------- where next: every page ends with two choices, never more ---------- */
.nextup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px)}
@media(max-width:820px){.nextup{grid-template-columns:1fr}}
.nx{display:flex;flex-direction:column;gap:8px;padding:clamp(22px,3vw,34px);
  border:1px solid var(--rule-2);background:var(--paper);text-decoration:none;color:var(--ink);
  transition:border-color .15s,transform .15s,box-shadow .15s}
.nx:hover{border-color:var(--grn);transform:translateY(-2px);box-shadow:0 16px 34px -22px rgba(11,20,16,.35)}
.nx-k{font-family:var(--m);font-size:.58rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grn)}
.nx-t{font-family:var(--d);font-weight:700;font-size:clamp(1.15rem,2.1vw,1.6rem);letter-spacing:-.03em;line-height:1.15;max-width:20ch}
.nx-s{font-size:.95rem;line-height:1.6;color:var(--ink-2);max-width:40ch}
.nx::after{content:"→";font-family:var(--d);font-weight:700;font-size:1.2rem;color:var(--grn);margin-top:6px}
.nx-go{background:var(--grn-tint);border-color:var(--grn)}
.nx-go .nx-t{color:var(--ink)}

/* ---------- results self-selector ---------- */
.pick{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,26px)}
.pick-row{display:flex;flex-direction:column;gap:11px}
.pick-row .q{font-family:var(--d);font-weight:700;font-size:clamp(1.05rem,1.9vw,1.3rem);letter-spacing:-.025em}
.pick-opts{display:flex;flex-wrap:wrap;gap:9px}
.pick-opts button{font-family:var(--d);font-weight:600;font-size:.98rem;letter-spacing:-.01em;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule-2);padding:13px 20px;transition:.14s}
.pick-opts button:hover{border-color:var(--grn);color:var(--grn-dk);background:var(--grn-tint)}
.pick-opts button[aria-pressed="true"]{background:var(--grn);border-color:var(--grn);color:#fff}
.pick-note{font-family:var(--d);font-size:1rem;line-height:1.6;color:var(--ink-2);
  padding-top:18px;border-top:1px solid var(--rule)}
.pick-note b{color:var(--ink);font-weight:600}

.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,26px)}
@media(max-width:980px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.rgrid{grid-template-columns:1fr}}
.rcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);background:var(--paper);transition:.15s}
.rcard:hover{border-color:var(--grn);transform:translateY(-2px);box-shadow:0 16px 34px -24px rgba(11,20,16,.35)}
.rcard img{width:100%;aspect-ratio:16/10;object-fit:cover}
.rcard .in{padding:20px;display:flex;flex-direction:column;gap:7px;flex:1}
.rcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px}
.rcard .tag2{font-family:var(--m);font-size:.55rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);border:1px solid var(--rule-2);padding:3px 7px}
.rcard .f{font-family:var(--d);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.045em;
  line-height:1;color:var(--grn)}
.rcard .fn{font-size:.86rem;line-height:1.5;color:var(--mute)}
.rcard .hl{font-family:var(--d);font-weight:600;font-size:1.02rem;letter-spacing:-.02em;line-height:1.3;margin-top:4px}
.rcard .go2{margin-top:auto;padding-top:14px;font-family:var(--m);font-size:.58rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grn)}
.rcard[hidden]{display:none}
.rcard.match{border-color:var(--grn);box-shadow:0 0 0 1px var(--grn)}

/* ---------- hero savings stepper ---------- */
.step-card{margin-top:clamp(30px,5vh,50px);border:1px solid var(--rule-2);background:var(--paper);
  padding:clamp(20px,2.8vw,30px);max-width:34rem;box-shadow:0 18px 44px -30px rgba(11,20,16,.4)}
.step-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.step-n{font-family:var(--m);font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grn);white-space:nowrap}
.step-bar{flex:1;height:3px;background:var(--rule);display:block}
.step-bar i{display:block;height:100%;background:var(--grn);transition:width .3s ease}
.step-q{font-family:var(--d);font-weight:700;font-size:clamp(1.1rem,2vw,1.45rem);letter-spacing:-.025em;
  line-height:1.3;margin-bottom:16px}
.step-opts{display:flex;flex-wrap:wrap;gap:9px}
.step-opts button{font-family:var(--d);font-weight:600;font-size:.96rem;letter-spacing:-.01em;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule-2);padding:13px 18px;transition:.13s}
.step-opts button:hover{border-color:var(--grn);background:var(--grn);color:#fff}
.step-back{margin-top:16px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.step-back:hover{color:var(--grn)}
.step-card.done .step-q{font-weight:400;font-size:1rem;color:var(--ink-2);margin-bottom:0}

/* the panel swaps from sample data to their answer */
.out-card .out-body{padding:clamp(20px,2.6vw,28px)}
.out-num{font-family:var(--d);font-weight:800;font-size:clamp(2.2rem,4.4vw,3.2rem);letter-spacing:-.05em;
  line-height:1;color:var(--grn)}
.out-sub{font-family:var(--m);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:9px}
.out-t{font-size:clamp(1.05rem,1.9vw,1.35rem);letter-spacing:-.03em;margin:18px 0 8px}
.out-b{font-size:.95rem;line-height:1.65;color:var(--ink-2);max-width:42ch}
.out-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.out-acts .big-btn{padding:14px 20px;font-size:.96rem}
.out-acts .ghost-btn{padding:14px 18px;font-size:.9rem}
@media(max-width:1100px){.step-card{max-width:none}}

/* ---------- hero without the sample table: photo holds the right, the number lands on it ---------- */
.hero .inner{grid-column:1/8}
.hero-screen{grid-column:8/13;align-self:center}
.hero>img{-webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 56%);
  mask-image:linear-gradient(90deg,transparent 26%,#000 56%);opacity:1}
.hero::after{background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 38%,rgba(8,13,10,.6) 54%,rgba(8,13,10,.12) 74%,rgba(8,13,10,.06) 100%)}
.step-card{max-width:38rem}
@media(max-width:1100px){
  .hero .inner,.hero-screen{grid-column:1/-1}
  .hero-screen{margin-top:clamp(24px,4vh,40px)}
  .hero>img{-webkit-mask-image:none;mask-image:none;opacity:.42}
  .hero::after{background:linear-gradient(180deg,rgba(8,13,10,.60) 0%,rgba(8,13,10,.74) 52%,rgba(8,13,10,.90) 100%)}
}

/* ---------- data tables stop scrolling sideways on a phone ---------- */
@media(max-width:640px){
  .screen table{font-size:.66rem}
  .screen th,.screen td{padding:9px 10px}
  /* keep the customer, what it costs, and how bad it is. Drop the rest. */
  .screen th:nth-child(2),.screen td:nth-child(2),
  .screen th:nth-child(4),.screen td:nth-child(4),
  .screen th:nth-child(5),.screen td:nth-child(5){display:none}
  .screen td:first-child{white-space:normal;min-width:0;width:48%}
  .screen th{font-size:.5rem;letter-spacing:.08em}
  .scroller{overflow-x:visible}
  .ba th:nth-child(2),.ba td:nth-child(2){display:none}
  .ba td:first-child{min-width:8rem}
}

/* the question card hands over to a matched case study once they finish */
.case-cta{display:flex;flex-direction:column;gap:5px;margin-top:18px;padding:18px 20px;
  background:var(--grn-tint);border:1px solid var(--grn);text-decoration:none;color:var(--ink);transition:.15s}
.case-cta:hover{background:var(--grn-soft);transform:translateY(-1px)}
.cc-k{font-family:var(--m);font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grn-dk)}
.cc-t{font-family:var(--d);font-weight:700;font-size:clamp(1rem,1.8vw,1.2rem);letter-spacing:-.025em}
.case-cta::after{content:"→";font-family:var(--d);font-weight:700;color:var(--grn);margin-top:4px}

/* ---------- a plain, obvious form where data actually gets sent ---------- */
.realform{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px);
  border:1px solid var(--rule-2);background:var(--paper);padding:clamp(22px,3.2vw,36px)}
.ff{display:flex;flex-direction:column;gap:7px}
.ff-wide{grid-column:1/-1}
.ff label{font-family:var(--m);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.ff label .opt{color:var(--faint);font-weight:400}
.ff input,.ff select,.ff textarea{font-family:var(--d);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-2);padding:14px;width:100%;resize:vertical;border-radius:0}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:var(--grn);box-shadow:0 0 0 3px var(--grn-tint)}
.ff textarea::placeholder{color:var(--faint)}
.ff-go{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px 24px;
  padding-top:6px;border-top:1px solid var(--rule)}
.ff-go .note{max-width:46ch;flex:1 1 22rem}
@media(max-width:700px){.realform{grid-template-columns:1fr}}

/* ---------- personalization ---------- */
.estbar{background:var(--panel);color:#fff}
.estbar .w{display:flex;align-items:baseline;gap:8px 16px;padding-block:10px;flex-wrap:wrap}
.eb-k{font-family:var(--m);font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grn-pale)}
.estbar b{font-family:var(--d);font-weight:800;font-size:1.05rem;letter-spacing:-.03em;color:var(--grn-bright);font-variant-numeric:tabular-nums}
.eb-s{font-family:var(--m);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-panel-2)}
.eb-go{margin-left:auto;font-family:var(--d);font-weight:600;font-size:.9rem;color:#fff;text-decoration:none;
  border-bottom:2px solid var(--grn)}
.eb-go:hover{color:var(--grn-bright)}
.eb-x{background:none;border:0;cursor:pointer;font-family:var(--m);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-panel-2);padding:0}
.eb-x:hover{color:#fff}
@media(max-width:640px){.eb-go{margin-left:0}}

.pz{display:flex;flex-direction:column;gap:7px;padding:clamp(20px,2.8vw,28px);margin-bottom:clamp(26px,4vh,40px);
  background:var(--paper);border:1px solid var(--grn);text-decoration:none;color:var(--ink);
  box-shadow:0 0 0 4px var(--grn-tint)}
.pz:hover{transform:translateY(-2px);transition:transform .15s}
.pz-k{font-family:var(--m);font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grn-dk)}
.pz-t{font-family:var(--d);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.65rem);letter-spacing:-.03em}
.pz-s{font-size:.98rem;line-height:1.6;color:var(--ink-2);max-width:56ch}
.pz::after{content:"→";font-family:var(--d);font-weight:700;color:var(--grn);font-size:1.1rem}

.pop{position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:85;
  width:min(25rem,calc(100vw - 24px));background:var(--paper);border:1px solid var(--grn);
  box-shadow:0 28px 60px -24px rgba(11,20,16,.45);padding:clamp(20px,2.6vw,26px);
  opacity:0;transform:translateY(14px);transition:opacity .28s ease,transform .28s ease}
.pop.in{opacity:1;transform:translateY(0)}
.pop-x{position:absolute;top:8px;right:10px;background:none;border:0;cursor:pointer;
  font-size:1.4rem;line-height:1;color:var(--faint);padding:4px 8px}
.pop-x:hover{color:var(--ink)}
.pop-k{font-family:var(--m);font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grn-dk)}
.pop-t{font-family:var(--d);font-weight:700;font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.03em;
  line-height:1.2;margin-top:7px}
.pop-b{font-size:.95rem;line-height:1.6;color:var(--ink-2);margin-top:9px}
.pop-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.pop-acts .big-btn{padding:13px 18px;font-size:.95rem}
.pop-alt{font-size:.9rem;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.pop-alt:hover{color:var(--grn-dk)}
@media(max-width:1000px){.pop{bottom:86px}}
@media(prefers-reduced-motion:reduce){.pop{transition:none}}

/* ---------- a form that arrives already carrying their answers ---------- */
.prefill{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:14px;
  padding:14px 18px;background:var(--grn-tint);border:1px solid var(--grn);
  font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.prefill b{color:var(--ink);font-weight:600}
.prefill button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--m);
  font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grn-dk);
  margin-left:auto;white-space:nowrap}
.prefill button:hover{color:var(--ink)}
.ff select.pre,.ff textarea.pre{background:var(--grn-tint);border-color:var(--grn)}

/* search-intent: phone-first variant for a service failure */
.alt.hot{border-top:2px solid var(--grn);background:var(--grn-soft);
  padding:20px clamp(16px,2.4vw,26px);margin-top:clamp(22px,3.5vh,34px)}
.alt.hot>span{font-weight:700;color:var(--ink)}
.alt.hot a{font-size:clamp(1.3rem,2.6vw,1.75rem);border-bottom-color:var(--grn)}
.step-card.demoted{opacity:.62;transition:opacity .3s ease}
.step-card.demoted:hover,.step-card.demoted:focus-within{opacity:1}

/* ---- keyboard focus ------------------------------------------------------
   Every interactive element had a hover state and no focus state, so anyone
   navigating by keyboard saw nothing. One ring, brand green, on all of them. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--grn-dk);
  outline-offset:3px;
}
.big-btn:focus-visible,
.nv a.go:focus-visible,
.sticky a:focus-visible{outline-color:var(--ink);outline-offset:2px}

/* skip link, visible only once it has focus */
.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--grn);color:var(--on-grn);padding:12px 20px;
  font-family:var(--d);font-weight:700;text-decoration:none}
.skip:focus{left:8px;top:8px}

/* headings should not orphan a word on the last line */
h1,h2,h3,.step-q,.est-line{text-wrap:balance}
p,li,.body,.sub,.sub-hero{text-wrap:pretty}

.sect.pale{background:var(--grn-tint);border-bottom:1px solid var(--rule)}

/* ---- dark zones ----------------------------------------------------------
   The page is light. These are the anchors that stay dark: the two bars, the
   hero, the marquee, the scrolling index, the closing panel and the footer.
   Same trick as the light band before: redeclare the tokens on the scope and
   every component inside follows, no per-component overrides. */
.hd,.cbar,.estbar,.sticky,.hero,.marq,.index,.close,.ft,.sect.dark{
  --paper:#080D0A;
  --sheet:#19231D;
  --ink:#F1F5F2;
  --ink-2:#B4C0B9;
  --mute:#8A968F;
  --faint:#8A9791;
  --rule:#202A25;
  --rule-2:#33403A;
  --grn:#16A855;
  --grn-dk:#2FD874;
  --grn-soft:#10261A;
  --grn-tint:#0D1C14;
  --amber:#D9A93E;
  --warn:#E4674A;
  --on-grn:#04150D;
  --field:#12201A;
  --track:#2A3B33;
  --grn-bright:#5CE79A;
  --grn-pale:#7FE3A8;
  --ph:#C9A24B;
  color:var(--ink);
}
.sect.dark{background:var(--paper);border-bottom:1px solid var(--rule)}
.sect.dark .asx{background:var(--field);border-color:var(--rule-2)}
.sect.dark .ci{background:var(--sheet);border-color:var(--mute);color:var(--ink)}
.sect.dark .ci::placeholder{color:var(--faint);opacity:1}
.sect.dark .opts button{background:var(--field);border-color:var(--rule-2);color:var(--ink-2)}
.ft{background:var(--paper);border-top:1px solid var(--rule)}

/* ---- hero analytics layer -----------------------------------------------
   The chart is the mountain. The ridge path is traced from the photograph's
   own silhouette and the SVG shares the image's geometry exactly (same
   viewBox as the source file, same cover/right behaviour), so the line lands
   on the ridge at any viewport. No plate, no box: it reads as part of the
   picture rather than something dropped on top. */
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  /* fade out over the copy so the line never competes with the headline */
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 52%);
  mask-image:linear-gradient(90deg,transparent 30%,#000 52%)}

.hero-fx .fx-ridge{stroke-opacity:.72;filter:drop-shadow(0 0 5px rgba(10,60,32,.55))}
.hero-fx .fx-wedge{opacity:0;animation:fxFade 1.1s 1.5s ease forwards}
.hero-fx .fx-flat{opacity:0;animation:fxFade .8s 1.35s ease forwards}
.hero-fx .fx-dots circle{opacity:0;animation:fxFade .5s ease forwards}
.hero-fx .fx-dots circle:nth-child(1){animation-delay:1.25s}
.hero-fx .fx-dots circle:nth-child(2){animation-delay:1.45s}
.hero-fx .fx-dots circle:nth-child(3){animation-delay:1.65s}

/* the line draws itself along the ridge, left to right */
.hero-fx .fx-ridge{stroke-dasharray:2400;stroke-dashoffset:2400;
  animation:fxDraw 2.6s .3s cubic-bezier(.33,.72,.42,1) forwards}

.hero-fx text{font-family:var(--m);fill:var(--grn-dk);letter-spacing:.16em;font-weight:600;
  filter:drop-shadow(0 1px 2px rgba(3,12,8,.95)) drop-shadow(0 0 7px rgba(3,12,8,.7));
  opacity:0;animation:fxFade .8s 2.1s ease forwards}
.hero-fx .fx-lab{font-size:14px;fill-opacity:.9}
.hero-fx .fx-delta{font-size:17px;font-weight:700;letter-spacing:.07em}

@keyframes fxDraw{to{stroke-dashoffset:0}}
@keyframes fxFade{to{opacity:1}}

/* The full-bleed ridge needs the right half of the photo, which on a phone is
   where the headline lives. Rather than fight that, phones get a compact strip
   of the same idea, sitting under the copy. */
.hero-fx-m{display:none}
@media(max-width:1000px){
  .hero-fx{display:none}
  .hero-fx-m{display:block;width:100%;max-width:340px;height:auto;
    margin:clamp(20px,3.4vh,30px) 0 clamp(4px,1vh,10px)}
  .hero-fx-m text{font-family:var(--m);fill:var(--grn-dk);font-weight:700;
    filter:drop-shadow(0 1px 2px rgba(3,12,8,.95))}
  .hero-fx-m .fxm-lab{font-size:9px;letter-spacing:.16em;fill-opacity:.9}
  .hero-fx-m .fxm-delta{font-size:13px;letter-spacing:.06em}
  .hero-fx-m .fxm-ridge{stroke-dasharray:420;stroke-dashoffset:420;
    animation:fxDraw 1.8s .4s cubic-bezier(.33,.72,.42,1) forwards}
  .hero-fx-m .fxm-wedge,.hero-fx-m .fxm-flat,.hero-fx-m circle{opacity:0;
    animation:fxFade .8s 1.5s ease forwards}
  .hero-fx-m text{opacity:0;animation:fxFade .8s 1.7s ease forwards}
}
@media(prefers-reduced-motion:reduce){
  .hero-fx *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
}

/* r2: tables without a before/after column keep every column on small screens */
.ba.keep th:nth-child(2),.ba.keep td:nth-child(2){display:table-cell}
/* r2: visible text link inside a next-up card */
.nx-cta{display:inline-block;margin-top:6px;font-family:var(--m);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grn)}
/* r2: result cards without a revenue tag */
.rcard .tags:empty{display:none}
.ba.keep td{white-space:normal}

/* r3: cross-link line inside a case or paper body */
.cs .rel,.rel{margin:clamp(26px,4vh,38px) 0 0;padding:14px 18px;border-left:2px solid var(--grn);background:var(--grn-tint);
  font-size:.98rem;line-height:1.6;color:var(--ink-2)}
.rel a{color:var(--grn);font-weight:600;text-decoration:none}
.rel a:hover{text-decoration:underline}
.cs a,.body a{color:var(--grn)}
/* r3: three-up photo row */
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.photos img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
@media(max-width:700px){.photos{grid-template-columns:1fr}}
.split .nx-cta{text-decoration:none}
/* r3: inline column spans collapse to full width on small screens */
@media(max-width:900px){.grid>[style*="grid-column"]{grid-column:1/-1!important}}
/* r3: two-card grid (white papers) */
.rgrid.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.rgrid.two-up{grid-template-columns:1fr}}
/* r4: ranked levers under an estimate */
.out-ins,.as-ins{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--rule);counter-reset:lv}
.out-ins li,.as-ins li{display:flex;flex-direction:column;gap:5px;padding:14px 0;border-bottom:1px solid var(--rule)}
.out-ins b,.as-ins b{font-family:var(--d);font-weight:700;font-size:1rem;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.out-ins span,.as-ins span{font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:52ch}
.out-ins a,.as-ins a{font-family:var(--m);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grn);text-decoration:none;margin-top:2px}
.out-ins a:hover,.as-ins a:hover{text-decoration:underline}
.as-ins li{counter-increment:lv;padding-left:34px;position:relative}
.as-ins li::before{content:counter(lv);position:absolute;left:0;top:14px;width:22px;height:22px;display:grid;place-items:center;
  font-family:var(--m);font-size:.66rem;font-weight:600;color:var(--on-grn);background:var(--grn)}
.as-ins em{font-style:normal;font-family:var(--m);font-size:.66rem;letter-spacing:.06em;color:var(--grn-dk)}
.asout{align-items:start}
/* r5: version switch in the concept bar */
.cbar .vt{margin-left:auto;display:inline-flex;border:1px solid rgba(255,255,255,.28);border-radius:999px;overflow:hidden}
.cbar .vt a{font-family:var(--m);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-panel);text-decoration:none;padding:5px 12px;white-space:nowrap}
.cbar .vt a[aria-current="true"]{background:var(--grn);color:var(--on-grn)}
.cbar .vt a:not([aria-current="true"]):hover{background:rgba(255,255,255,.12)}
@media(max-width:560px){.cbar .w>span:not(.vt){display:none}.cbar .vt{margin-left:auto}}
/* r5: fuel surcharge calculator */
.fsc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,3vw,40px);align-items:start}
@media(max-width:900px){.fsc{grid-template-columns:1fr}}
.fsc-in{border:1px solid var(--rule-2);background:var(--paper);padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:18px}
.fsc-in label{display:flex;flex-direction:column;gap:7px;font-family:var(--m);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.fsc-in input{font-family:var(--d);font-size:1.15rem;font-weight:600;color:var(--ink);padding:11px 12px;border:1px solid var(--rule-2);background:var(--paper);width:100%;box-sizing:border-box}
.fsc-in input:focus{outline:none;border-color:var(--grn);box-shadow:0 0 0 3px var(--grn-tint)}
.fsc-in .hint{font-family:var(--d);text-transform:none;letter-spacing:0;font-weight:400;font-size:.85rem;color:var(--mute)}
.fsc-in details summary{cursor:pointer;font-size:.9rem;color:var(--grn);font-weight:600}
.fsc-in details[open] summary{margin-bottom:14px}
.fsc-in .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fsc-out{display:flex;flex-direction:column;gap:14px}
.fsc-big{border:1px solid var(--rule-2);background:var(--grn-tint);padding:clamp(20px,2.6vw,30px)}
.fsc-big .k{font-family:var(--m);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grn-dk)}
.fsc-big .v{display:block;font-family:var(--d);font-weight:800;font-size:clamp(2.4rem,5.4vw,3.6rem);letter-spacing:-.05em;line-height:1;color:var(--grn);margin:8px 0 6px}
.fsc-big p{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.fsc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:560px){.fsc-grid{grid-template-columns:1fr}}
.fsc-grid div{border:1px solid var(--rule);padding:14px 16px;background:var(--paper)}
.fsc-grid span{display:block;font-family:var(--m);font-size:.56rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.fsc-grid b{display:block;font-family:var(--d);font-weight:700;font-size:1.35rem;letter-spacing:-.03em;margin-top:6px;color:var(--ink)}
.fsc-save{border-left:3px solid var(--grn);padding:4px 0 4px 18px}
.fsc-save b{font-family:var(--d);font-size:1.15rem;color:var(--ink)}
.fsc-save p{margin:6px 0 0;font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.dchart{width:100%;height:auto;display:block}
.dchart text{font-family:var(--m);font-size:10px;fill:var(--mute)}
.ftab tr.now td{background:var(--grn-tint);font-weight:700;color:var(--ink)}
@media(max-width:600px){.dchart text{font-size:24px}}

/* r6: service pages */
.cs blockquote.pq{margin:clamp(26px,4vh,40px) 0;padding:4px 0 4px 22px;border-left:3px solid var(--grn)}
.cs blockquote.pq p{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.45;color:var(--ink);font-weight:600;margin:0}
.cs blockquote.pq cite{display:block;margin-top:10px;font-style:normal;font-size:.9rem;color:var(--ink-2)}
.cs .faq h3{font-size:1.05rem;margin:22px 0 6px}
.cs .faq p{margin:0}
.cs h3{margin-top:24px}
.cs ol li{margin-bottom:8px}
.more-p{margin-top:14px}
.more-l{color:var(--grn);font-weight:600;text-decoration:none}
.more-l:hover{text-decoration:underline}

/* ---------- stat band ---------- */
.stat-band{background:#0B1410;border-bottom:1px solid #1E2E26;padding-block:clamp(48px,8vh,88px)}
.stat-band .w{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat-tile+.stat-tile{border-left:1px solid #1E2E26}
@media(max-width:700px){.stat-tile:nth-child(3){border-left:0}.stat-tile:nth-child(n+3){border-top:1px solid #1E2E26}}
@media(max-width:700px){.stat-band .w{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.stat-band .w{grid-template-columns:1fr}}
.stat-tile{background:#0B1410;padding:clamp(24px,3.6vw,40px) clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:10px}
.stat-num{font-family:var(--m);font-size:clamp(2.4rem,5.2vw,4rem);
  font-weight:600;letter-spacing:-.04em;color:#0E9648;line-height:1;
  display:flex;align-items:baseline;gap:4px}
.stat-num .sfx{font-size:.44em;font-weight:500;letter-spacing:.02em;opacity:.85;margin-bottom:.15em}
.stat-num .pfx{font-size:.54em;font-weight:500;letter-spacing:.02em;opacity:.85;align-self:flex-end;margin-bottom:.1em}
.stat-label{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-size:.95rem;font-weight:600;
  letter-spacing:-.01em;color:#F1F5F2;line-height:1.4}
.stat-note{font-family:var(--m);font-size:.56rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:#4A6055;margin-top:4px}
.stat-num[data-count]{transition:none}

/* ---------- US network map ---------- */
.nt-map-sect{background:#0D1813;border-bottom:1px solid #1E2E26;padding-block:clamp(52px,9vh,96px)}
.nt-map-sect .inner{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:860px){.nt-map-sect .inner{grid-template-columns:1fr}}
.nt-map-copy .lab{color:#0E9648}
.nt-map-copy h2{color:#F1F5F2;font-size:clamp(1.5rem,3.2vw,2.4rem);max-width:22ch;margin-top:14px}
.nt-map-copy p{color:#8FA897;font-size:.98rem;line-height:1.7;margin-top:16px;max-width:38ch}
.nt-map-offices{display:flex;flex-direction:column;gap:8px;margin-top:clamp(22px,3vh,32px)}
.nt-map-offices li{list-style:none;display:flex;align-items:center;gap:10px;
  font-family:var(--m);font-size:.64rem;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#6E8878}
.nt-map-offices li::before{content:"";width:7px;height:7px;background:#0E9648;
  border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(14,150,72,.22)}
.nt-map-wrap{position:relative}
.nt-map-svg{width:100%;height:auto;display:block}
.nt-map-svg .us-state{fill:#14211A;stroke:#0D1813;stroke-width:1.2;stroke-linejoin:round}
.nt-map-svg .us-state.hi-state{fill:#1C4A30;stroke:#0D1813}
.nt-map-lines path{fill:none;stroke:#2FBF6B;stroke-opacity:.55;stroke-width:1.6;stroke-dasharray:5 6}
.nt-map-dot{fill:#0E9648;filter:drop-shadow(0 0 5px rgba(14,150,72,.55))}
.nt-map-dot-ring{fill:none;stroke:#0E9648;stroke-width:1.4;opacity:.35;
  animation:map-pulse 2.4s ease-in-out infinite}
.nt-map-dot-ring:nth-child(2){animation-delay:.6s}
.nt-map-dot-ring:nth-child(3){animation-delay:1.2s}
@keyframes map-pulse{0%,100%{opacity:.35;r:7}50%{opacity:.08;r:13}}
@media(prefers-reduced-motion:reduce){.nt-map-dot-ring{animation:none}}
.nt-map-city{font-family:var(--m);font-size:13px;font-weight:600;letter-spacing:.08em;fill:#DCE8E0;paint-order:stroke;stroke:#0D1813;stroke-width:4px;stroke-linejoin:round}
.nt-map-city.hq{fill:#2FBF6B;font-size:14px}

/* ---------- services grid ---------- */
.svc-grid-sect{background:#F5F8F6;padding-block:clamp(60px,10vh,110px);border-bottom:1px solid #E3E8E4}
.svc-grid-sect .head .lab{color:#0E9648}
.svc-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#E3E8E4;margin-top:clamp(28px,4vh,48px)}
@media(max-width:900px){.svc-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.svc-cards{grid-template-columns:repeat(2,1fr)}}
.svc-card{background:#F5F8F6;padding:clamp(24px,3vw,36px) clamp(18px,2.4vw,28px);
  display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
  transition:background .15s}
.svc-card:hover{background:#ffffff}
.svc-card:hover .svc-icon{background:#0E9648;color:#fff}
.svc-icon{width:48px;height:48px;background:#E9F5EE;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;flex:0 0 auto}
.svc-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;color:#0E9648;transition:color .15s}
.svc-card:hover .svc-icon svg{color:#fff}
.svc-name{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(.95rem,1.5vw,1.1rem);letter-spacing:-.02em;line-height:1.2;color:#0B1410}
.svc-desc{font-size:.88rem;line-height:1.6;color:#5A6B62;flex:1}
.svc-link{font-family:var(--m);font-size:.56rem;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#0E9648;
  display:flex;align-items:center;gap:6px;margin-top:auto}
.svc-link::after{content:"→";font-family:'Archivo',sans-serif;font-size:.75rem;font-weight:700}

/* ---------- case study callout card ---------- */
.cs-callout{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  margin-bottom:clamp(28px,4vh,44px);border:1px solid var(--rule)}
@media(max-width:700px){.cs-callout{grid-template-columns:1fr}}
.cs-cell{background:var(--paper);padding:clamp(18px,2.4vw,26px)}
.cs-cell.hi{background:var(--grn-tint);border-left:3px solid var(--grn)}
.cs-metric{font-family:var(--m);font-size:clamp(1.3rem,2.6vw,2rem);
  font-weight:600;letter-spacing:-.03em;color:var(--grn-dk);line-height:1.1;margin-bottom:6px}
.cs-metric-lab{font-family:var(--m);font-size:.56rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.cs-client{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-weight:800;
  font-size:clamp(1rem,1.8vw,1.3rem);letter-spacing:-.025em;color:var(--ink);margin-bottom:4px}
.cs-client-note{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.cs-quote{font-style:italic;font-size:.95rem;line-height:1.65;color:var(--ink-2);margin-bottom:8px}
.cs-cite{font-family:var(--m);font-size:.58rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}


/* Dianne's Nov 3 review */
.lab{font-size:.74rem;font-weight:600}
.lab.g{color:var(--grn-dk)}
.lab.lab-lead{font-size:.95rem;letter-spacing:.12em}
.ix-row{padding-left:14px;transition:box-shadow .22s ease}
.ix-row.on{padding-left:14px;box-shadow:inset 3px 0 0 var(--grn)}
.ix-row .ix-m{font-size:.74rem;letter-spacing:.1em}
a.nm{text-decoration:none;color:inherit}
a.nm:hover .f{text-decoration:underline}
.cl-link{font-family:var(--d);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-2)}
.cl-link:hover{color:var(--grn);border-color:var(--grn)}
.lab{font-size:.8rem}
.split .tm{font-size:.8rem}
.svc-grid-sect .head .lab,.nt-map-copy .lab{color:var(--grn-dk)}

/* history rows that link to their news post */
.tl li.tl-l{display:block;padding:0}
.tl .tl-a{display:grid;grid-template-columns:clamp(78px,11vw,128px) 1fr;gap:clamp(14px,2.5vw,30px);padding:18px 0;align-items:baseline;color:inherit;text-decoration:none}
.tl .tl-a .wk::after{content:" \2192";opacity:0;transition:opacity .2s}
.tl .tl-a:hover .ev,.tl .tl-a:focus-visible .ev{color:var(--grn)}
.tl .tl-a:hover .wk::after,.tl .tl-a:focus-visible .wk::after{opacity:1}
/* feed with thumbnails outside the Articles page (Company: In the news) */
.feed.thumbs a{grid-template-columns:clamp(96px,12vw,146px) 1fr auto 120px;row-gap:10px}
.feed.thumbs .tn{grid-column:4;grid-row:1/span 2;width:120px;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--rule);align-self:start}
@media(max-width:700px){.feed.thumbs a{grid-template-columns:1fr}.feed.thumbs .tn{grid-column:1;grid-row:1;width:100%;max-width:none;aspect-ratio:21/9}.feed.thumbs .dek{grid-column:1}}