/* ============================================================
   KCM — Direction B design system
   Palette   paper #F1F0ED · ink #15161A · accent #E8471B
   Type      Helvetica Neue / Inter grotesque + mono labels
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#F1F0ED; --paper2:#E7E5E1; --card:#FFFFFF; --dark:#111214;
  --ink:#15161A; --mid:#5C5E63; --dim:#8E9096;
  --acc:#E8471B; --acc2:#C93C14;
  --line:rgba(21,22,26,.14); --line2:rgba(21,22,26,.07);
  --sans:'Helvetica Neue',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --nav:72px;
  --r:6px; --r2:10px; --r3:14px;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1400px;margin:0 auto;padding:0 40px}
@media(max-width:700px){.wrap{padding:0 22px}}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.acc{color:var(--acc)}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(241,240,237,.86);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line2)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav)}
.logo{display:inline-flex;align-items:baseline;gap:8px}
.logo b{font-size:24px;font-weight:800;letter-spacing:-.05em;line-height:1;padding-right:2px}
.logo span{color:var(--dim);font-family:var(--mono);font-size:9px;letter-spacing:.2em}
.links{display:flex;gap:30px}
.links a{font-size:13px;color:var(--mid);transition:color .2s;position:relative;padding:4px 0}
.links a:hover{color:var(--ink)}
.links a.on{color:var(--ink)}
.links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--acc)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);padding:10px 19px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;transition:.2s;white-space:nowrap}
.pill:hover{background:var(--ink);color:var(--paper)}
.pill.solid{background:var(--acc);border-color:var(--acc);color:#fff}
.pill.solid:hover{background:var(--acc2);border-color:var(--acc2);color:#fff}
.pill.lite{border-color:var(--line)}
@media(max-width:1000px){.links{display:none}}

/* ---------- page header (inner pages) ---------- */
.phead{padding:calc(var(--nav) + 78px) 0 0}
.crumb{display:flex;align-items:center;gap:11px;color:var(--dim);margin-bottom:26px}
.crumb i{width:26px;height:1px;background:var(--acc);display:block;flex:none}
.phead h1{font-size:clamp(38px,5.6vw,78px);line-height:.99;letter-spacing:-.05em;font-weight:600;max-width:15ch}
.phead .sub{margin-top:26px;max-width:56ch;color:var(--mid);font-size:17.5px;line-height:1.66}
.phead .hr{margin-top:62px;border-top:1px solid var(--ink)}

/* ---------- hero (home) ---------- */
.hero{display:grid;grid-template-columns:1.02fr .98fr;min-height:100vh;align-items:stretch}
.hero .txt{display:flex;flex-direction:column;justify-content:center;padding:150px 40px 90px 0;max-width:760px;margin-left:auto;width:100%}
.hero .txt .inner{padding-left:40px}
.hero .im{position:relative;overflow:hidden;background:#111}
.hero .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tag{display:flex;align-items:center;gap:12px;color:var(--mid);margin-bottom:30px}
.tag i{width:30px;height:1px;background:var(--acc);display:block;flex:none}
h1{font-size:clamp(36px,4.7vw,68px);line-height:1.02;letter-spacing:-.045em;font-weight:600;max-width:15ch}
.lede{margin-top:28px;max-width:46ch;color:var(--mid);font-size:17.5px;line-height:1.65}
.cta{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
@media(max-width:1000px){.hero{grid-template-columns:1fr;min-height:auto}
 .hero .txt{padding:130px 0 60px;max-width:none}
 .hero .txt .inner{padding-left:0}
 .hero .im{height:62vh}}

/* ---------- rules & sections ---------- */
.rule{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;background:var(--paper2)}
.rule .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;color:var(--mid)}
section{padding:110px 0}
section.tight{padding:74px 0}
section.top0{padding-top:0}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:30px;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.shead h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.035em;font-weight:600}
@media(max-width:640px){.shead{flex-direction:column;align-items:flex-start;gap:10px}.tag{flex-wrap:wrap;row-gap:8px}}

/* ---------- statement ---------- */
.stmt .grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.stmt p.big{font-size:clamp(22px,2.85vw,38px);line-height:1.32;letter-spacing:-.03em;max-width:24ch;font-weight:500}
.stmt p.small{font-size:16px;line-height:1.72;color:var(--mid);max-width:46ch;margin-bottom:22px}
@media(max-width:900px){.stmt .grid{grid-template-columns:1fr;gap:36px}}

/* ---------- index rows ---------- */
.idx{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:78px 1.15fr 1.5fr 190px;gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .35s cubic-bezier(.2,.7,.3,1)}
.row:hover{padding-left:14px}
.row .no{color:var(--acc);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em}
.row h3{font-size:clamp(19px,2vw,26px);letter-spacing:-.03em;font-weight:600}
.row p{color:var(--mid);font-size:14.5px;line-height:1.65;max-width:44ch}
.row .th{width:190px;height:112px;overflow:hidden;background:#ddd;justify-self:end}
.row .th img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35);transition:.5s}
.row:hover .th img{filter:none;transform:scale(1.05)}
@media(max-width:1000px){.row{grid-template-columns:56px 1fr;gap:14px}.row .th{display:none}.row p{grid-column:2}}

/* ---------- full bleed ---------- */
.bleed{position:relative;height:78vh;min-height:460px;overflow:hidden}
.bleed.short{height:52vh;min-height:340px}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.92)}
.bleed .cap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 0 46px;color:#fff;
  background:linear-gradient(to top,rgba(10,10,12,.9) 0%,rgba(10,10,12,.62) 34%,rgba(10,10,12,.1) 72%,transparent 100%)}
.bleed .cap > .wrap{width:100%}
.bleed .cap q{quotes:none;display:block;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.03em;line-height:1.25;max-width:22ch;font-weight:500}
.bleed .cap span{display:block;margin-top:16px;opacity:.72}

/* ---------- figures ---------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.fig{padding:40px 30px 44px;border-right:1px solid var(--line)}
.fig:last-child{border-right:none}
.fig b{display:block;font-size:clamp(38px,4.6vw,60px);font-weight:600;letter-spacing:-.05em;line-height:1}
.fig b i{font-style:normal;font-size:.36em;color:var(--acc);letter-spacing:0;margin-left:4px}
.fig p{margin-top:14px;color:var(--mid);font-size:14px;line-height:1.55;max-width:22ch}
@media(max-width:900px){.figs{grid-template-columns:1fr 1fr}.fig{border-bottom:1px solid var(--line)}.fig:nth-child(2n){border-right:none}}

/* ---------- split ---------- */
.qs{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.qs.rev .im{order:2}
.qs .im{aspect-ratio:4/5;overflow:hidden;background:#ddd}
.qs .im.wide{aspect-ratio:4/3}
.qs .im img{width:100%;height:100%;object-fit:cover}
.qs h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.04em;line-height:1.06;margin-bottom:22px;font-weight:600}
.qs .sub{color:var(--mid);font-size:16px;line-height:1.7;margin-bottom:30px;max-width:44ch}
@media(max-width:900px){.qs{grid-template-columns:1fr;gap:36px}.qs.rev .im{order:0}}

/* ---------- checks ---------- */
ul.checks{list-style:none;border-top:1px solid var(--line)}
ul.checks li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;align-items:flex-start;line-height:1.55}
ul.checks li s{text-decoration:none;color:var(--acc);font-family:var(--mono);font-size:10px;padding-top:4px;flex:none}

/* ---------- spec table ---------- */
.spec{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.spec th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:400;padding:16px 20px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;width:230px}
.spec td{padding:16px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.62;color:var(--ink)}
.spec tr:hover td,.spec tr:hover th{background:rgba(21,22,26,.02)}
@media(max-width:700px){.spec th{display:block;width:auto;padding-bottom:6px;border-bottom:none}.spec td{display:block;padding-top:0}}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.tile{padding:36px 30px 42px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tile:nth-child(3n){border-right:none}
.tile .n{color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.17em}
.tile h4{font-size:19px;letter-spacing:-.025em;margin:24px 0 11px;font-weight:600}
.tile p{color:var(--mid);font-size:14px;line-height:1.66}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}.tile:nth-child(3n){border-right:1px solid var(--line)}.tile:nth-child(2n){border-right:none}}
@media(max-width:600px){.tiles{grid-template-columns:1fr}.tile{border-right:none!important;padding:30px 0 34px}}

/* ---------- industries 2up ---------- */
.inds{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.ind{padding:44px 40px 50px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s}
.ind:nth-child(2n){border-right:none}
.ind:hover{background:rgba(255,255,255,.5)}
.ind .n{color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.17em}
.ind h4{font-size:clamp(20px,2.1vw,27px);letter-spacing:-.03em;margin:26px 0 12px;font-weight:600}
.ind p{color:var(--mid);font-size:14.5px;line-height:1.68;max-width:40ch}
.ind .go{margin-top:20px;color:var(--acc);font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase}
@media(max-width:700px){.inds{grid-template-columns:1fr}.ind{border-right:none;padding:34px 0 38px}}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.gal figure{overflow:hidden;background:#ddd}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.05)}
.g1{grid-column:span 7;height:440px}
.g2{grid-column:span 5;height:440px}
.g3,.g4,.g5{grid-column:span 4;aspect-ratio:1}
@media(max-width:820px){.g1,.g2{grid-column:span 12;height:280px}.g3,.g4,.g5{grid-column:span 6}}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.step{border-top:2px solid var(--acc);padding-top:22px}
.step .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--acc);margin-bottom:15px}
.step h4{font-size:18px;letter-spacing:-.025em;margin-bottom:11px;font-weight:600}
.step p{color:var(--mid);font-size:14px;line-height:1.64}
@media(max-width:980px){.steps{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.f{display:flex;flex-direction:column;gap:9px}
.f.full{grid-column:span 2}
.f label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.f input,.f textarea,.f select{font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);padding:13px 14px;border-radius:0;transition:border-color .2s}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--acc)}
.f select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235C5E63' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px;padding-right:42px}
.f select:focus{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23E8471B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.f input[type=date]{cursor:pointer}
.f input[type=date]::-webkit-calendar-picker-indicator{opacity:.55}

.f textarea{min-height:150px;resize:vertical;line-height:1.6}
.drop{border:1px dashed var(--line);background:rgba(255,255,255,.5);padding:32px;text-align:center;color:var(--mid);font-size:14px}
.drop b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px;font-weight:600}
@media(max-width:760px){.form{grid-template-columns:1fr}.f.full{grid-column:span 1}}

/* ---------- closing ---------- */
.end{padding:140px 0 130px;border-top:1px solid var(--ink)}
.end .eg{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end}
.end h2{font-size:clamp(38px,6.4vw,88px);letter-spacing:-.05em;line-height:.98;font-weight:600;max-width:12ch}
.end p{color:var(--mid);max-width:44ch;margin:28px 0 40px;font-size:17px;line-height:1.68}
.end .quick{border-top:1px solid var(--ink)}
.end .quick div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}
.end .quick span:first-child{color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;padding-top:3px}
.end .quick span:last-child{text-align:right;max-width:24ch}
@media(max-width:900px){.end .eg{grid-template-columns:1fr;gap:44px}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:52px 0 38px;background:var(--paper2)}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
.fgrid h5{color:var(--dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;margin-bottom:15px}
.fgrid a,.fgrid p{display:block;color:var(--mid);font-size:13.5px;line-height:2}
.fgrid a:hover{color:var(--ink)}
.certs{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.certs span{border:1px solid var(--line);padding:6px 11px;font-family:var(--mono);font-size:9px;letter-spacing:.13em;color:var(--mid)}
.fbot{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--dim);gap:18px;flex-wrap:wrap}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- rounding pass ---------- */
.pill{border-radius:var(--r)}
.qs .im{border-radius:var(--r3)}
.row .th{border-radius:var(--r)}
.gal figure{border-radius:var(--r2)}
.f input,.f textarea,.f select{border-radius:var(--r)}
.drop{border-radius:var(--r2)}
.certs span{border-radius:4px}
.figs,.tiles,.inds{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:rgba(255,255,255,.42)}
.figs{border-top:1px solid var(--line)}
.tiles .tile:nth-last-child(-n+3){border-bottom:none}
.inds .ind:nth-last-child(-n+2){border-bottom:none}
.fig:last-child,.tile:nth-child(3n),.ind:nth-child(2n){border-right:none}
@media(max-width:900px){.tiles .tile:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
 .tiles .tile:nth-last-child(-n+2){border-bottom:none}}
@media(max-width:700px){.inds .ind:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
 .inds .ind:last-child{border-bottom:none}}

/* ---------- component wall ---------- */
.wall{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 20px;font-size:14px;color:var(--ink);transition:.22s;white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip.mut{background:transparent;color:var(--mid)}
.wallgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
@media(max-width:900px){.wallgrid{grid-template-columns:1fr;gap:32px}}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.qc{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:34px 32px 30px;display:flex;flex-direction:column}
.qc q{quotes:none;font-size:19px;line-height:1.5;letter-spacing:-.02em;font-weight:500;margin-bottom:auto}
.qc .who{margin-top:28px;padding-top:18px;border-top:1px solid var(--line2)}
.qc .who b{display:block;font-size:14.5px;font-weight:600}
.qc .who span{display:block;color:var(--dim);font-size:13px;margin-top:3px;line-height:1.45}
@media(max-width:820px){.quotes{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:26px;align-items:baseline;font-size:17.5px;letter-spacing:-.02em;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-size:20px;font-weight:400;flex:none;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 26px;max-width:70ch;color:var(--mid);font-size:15px;line-height:1.72}
.faq .a p+p{margin-top:14px}

/* ---------- 3-step strip ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fs{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:32px 30px 36px}
.fs .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--acc);margin-bottom:18px}
.fs h4{font-size:19px;letter-spacing:-.025em;margin-bottom:11px;font-weight:600}
.fs p{color:var(--mid);font-size:14.5px;line-height:1.66}
@media(max-width:820px){.flow{grid-template-columns:1fr}}

/* ---------- industry grid (10+) ---------- */
.igrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:rgba(255,255,255,.42)}
.ig{padding:28px 24px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .22s;display:flex;flex-direction:column}
.ig:hover{background:#fff}
.ig .n{color:var(--dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.17em}
.ig h4{font-size:17px;letter-spacing:-.025em;margin:20px 0 9px;font-weight:600;line-height:1.2}
.ig p{color:var(--mid);font-size:13.5px;line-height:1.6;margin-bottom:auto}
.ig.wide{grid-column:span 2;background:rgba(232,71,27,.05)}
.ig.wide h4{color:var(--acc)}
.ig:nth-child(4n){border-right:none}
.ig:nth-last-child(-n+3){border-bottom:none}
@media(max-width:1080px){.igrid{grid-template-columns:repeat(3,1fr)}
 .ig:nth-child(4n){border-right:1px solid var(--line)}
 .ig:nth-child(3n){border-right:none}}
@media(max-width:760px){.igrid{grid-template-columns:repeat(2,1fr)}
 .ig:nth-child(3n),.ig:nth-child(4n){border-right:1px solid var(--line)}
 .ig:nth-child(2n){border-right:none}
 .ig.wide{grid-column:span 2}}
@media(max-width:460px){.igrid{grid-template-columns:1fr}
 .ig{border-right:none!important}.ig.wide{grid-column:span 1}}

/* ============ v3 — rhythm, emphasis, conversion ============ */

/* highlight for load-bearing phrases */
.hl{background:linear-gradient(transparent 58%,rgba(232,71,27,.22) 0);padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* hero proof row */
.proof{margin-top:48px;color:var(--dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;line-height:2}
.proof b{color:var(--mid);font-weight:400}

/* full-width statement — replaces the airy two-column stmt */
.stmt2{padding:128px 0 118px}
.stmt2 .k{margin-bottom:30px}
.giant{font-size:clamp(30px,4.3vw,58px);line-height:1.12;letter-spacing:-.04em;font-weight:600;max-width:21ch}
.stmt2 .cols{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:56px}
.stmt2 .cols p{color:var(--mid);font-size:16px;line-height:1.74;max-width:50ch}
@media(max-width:820px){.stmt2{padding:96px 0 86px}.stmt2 .cols{grid-template-columns:1fr;gap:22px}}

/* orange conversion strip */
.convert{background:var(--acc);color:#fff}
.convert .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:36px;padding-bottom:36px;flex-wrap:wrap}
.convert q{quotes:none;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.03em;font-weight:600;line-height:1.2}
.convert q em{font-style:normal;opacity:.72;font-weight:500}
.convert .pill{border-color:#fff;color:#fff;background:transparent}
.convert .pill:hover{background:#fff;color:var(--acc)}

/* dark closing band — the final CTA gets contrast, not more paper */
.end.dark{background:var(--dark);color:#F4F4F2;border-top:none}
.end.dark p{color:#A9AAA8}
.end.dark .quick{border-top-color:rgba(255,255,255,.9)}
.end.dark .quick div{border-bottom-color:rgba(255,255,255,.13)}
.end.dark .quick span:first-child{color:#8E9096}
.end.dark .quick a{color:#F4F4F2}
.end.dark .pill{border-color:rgba(255,255,255,.4);color:#fff}
.end.dark .pill:hover{background:#fff;color:var(--dark);border-color:#fff}
.end.dark .pill.solid{border-color:var(--acc);color:#fff}
.end.dark .pill.solid:hover{background:var(--acc2);border-color:var(--acc2)}

/* ============ termination map ============ */
.tm-stage{margin-top:26px;position:relative}
svg{display:block;width:100%;height:auto}
.ringline{fill:none;stroke:rgba(21,22,26,.07);stroke-width:1}
.spoke{stroke:rgba(21,22,26,.13);stroke-width:1;transition:stroke .25s}
.node circle{fill:var(--ink);transition:transform .28s cubic-bezier(.2,.7,.3,1),fill .2s;cursor:pointer}
.node text{fill:#F1F0ED;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;
  text-anchor:middle;pointer-events:none;transition:opacity .25s}
.node{transition:opacity .3s;will-change:transform}
.sector-label{fill:var(--dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.sector-tick{stroke:rgba(21,22,26,.2);stroke-width:1}

/* dimming: when the graph is hovered, everything fades except the active node */
.tm-stage.live .node{opacity:.38}
.tm-stage.live .node.on{opacity:1}
.tm-stage.live .node.on circle{fill:var(--acc)}
.tm-stage.live .spoke{stroke:rgba(21,22,26,.06)}
.tm-stage.live .spoke.on{stroke:var(--acc);stroke-width:1.5}

/* center readout */
.tm-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;width:250px}
.tm-hub .n{font-size:84px;font-weight:650;letter-spacing:-.055em;line-height:1;transition:opacity .15s}
.tm-hub .n em{font-style:normal;color:var(--acc);font-size:34px;vertical-align:.72em}
.tm-hub .fam{font-size:21px;font-weight:600;letter-spacing:-.03em;line-height:1.15;display:none}
.tm-hub .l{margin-top:10px;color:var(--dim);font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;line-height:1.9}
.tm-stage.live .tm-hub .n{display:none}
.tm-stage.live .tm-hub .fam{display:block}
.tm-note{margin-top:18px;color:var(--dim);font-size:13px;max-width:60ch;line-height:1.6}

/* termination map layout */
.tmhead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:6px}
.tmsub{color:var(--mid);font-size:15.5px;line-height:1.7;max-width:44ch}
.tm-stage{max-width:1080px;margin:0 auto}
.tm-fallback{display:none}
@media (hover:none),(max-width:860px){
  .tm-stage{display:none}
  .tm-fallback{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
  .tmhead{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:860px){ }