/* ------------------------------------------------------------------ type */
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('../fonts/plexmono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('../fonts/plexmono-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('../fonts/plexmono-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --ink: #0a0a0b; --ink2: #151517; --graphite: #5e5b57; --ash: #9c978f; --bone: #eee9df; --signal: #3a78ff; --ember: #8ab8ff;
  --hair: rgba(238, 233, 223, .16); --hair2: rgba(238, 233, 223, .32);
  --gut: clamp(18px, 3.4vw, 64px);
  --mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --out: cubic-bezier(.16, 1, .3, 1);
  --scrim: 1;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--sans); font-size: 17px; line-height: 1.5; font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
::selection { background: var(--signal); color: var(--ink); }
a { color: inherit; }
img, svg { display: block; }
.mono { font-family: var(--mono); font-feature-settings: 'zero' 0; letter-spacing: .01em; }
.hot { color: var(--signal); }
.dim { color: var(--ash); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; background: var(--signal); color: var(--ink); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

/* ------------------------------------------------------------------ layers */
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }
.scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--scrim);
  background:
    linear-gradient(90deg, rgba(10,10,11,.9) 0%, rgba(10,10,11,.62) 26%, rgba(10,10,11,0) 52%),
    linear-gradient(0deg, rgba(10,10,11,.75) 0%, rgba(10,10,11,0) 30%),
    linear-gradient(180deg, rgba(10,10,11,.7) 0%, rgba(10,10,11,0) 16%),
    radial-gradient(ellipse at 60% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
.callouts { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leaders path { fill: none; stroke: rgba(238,233,223,.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.leaders .ring { fill: none; stroke: rgba(238,233,223,.75); stroke-width: 1; }
.leaders .dot { fill: var(--bone); }
.leaders .hot path, .leaders path.hot { stroke: rgba(58,120,255,.8); }
.leaders .ring.hot { stroke: var(--signal); }
.leaders .dot.hot { fill: var(--signal); }
.grain { position: fixed; inset: -60px; z-index: 40; pointer-events: none; opacity: .075; mix-blend-mode: overlay; background-size: 180px 180px; animation: grain .5s steps(4) infinite; will-change: transform; }
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-37px,21px) } 50% { transform: translate(23px,-43px) } 75% { transform: translate(-11px,-17px) } 100% { transform: translate(0,0) } }
main, .ftr { position: relative; z-index: 3; }
body.no-webgl #world { display: none; }
body.no-webgl { background: radial-gradient(ellipse at 70% 30%, #1a1413, var(--ink) 60%) fixed; }

/* ------------------------------------------------------------------ header */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 28px; padding: 18px var(--gut); transition: background .4s, backdrop-filter .4s; }
.hdr.solid { background: rgba(10,10,11,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.mark svg { width: 40px; height: 40px; overflow: visible; flex: none; }
/* the mark: the lines of a valley, and the point that has come down its side to rest at the bottom; the ball rolls in once as the page opens */
.mark .lg-ball { transform-box: fill-box; transform-origin: center; animation: lgIn 1.5s .25s var(--out) both; }
.mark .lg-trail { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 1.1s .3s var(--out) forwards; }
@keyframes lgIn { from { transform: translate(-20px, -35px) scale(.45); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mark .lg-ball, .mark .lg-trail { animation: none; stroke-dashoffset: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
.mark-txt { font-size: 10.5px; line-height: 1.25; text-transform: uppercase; letter-spacing: .08em; color: var(--ash); }
.nav { display: flex; gap: 30px; }
.nav a { font-size: 15px; font-weight: 500; text-decoration: none; position: relative; padding: 6px 0; color: rgba(238,233,223,.86); }
.nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--signal); transition: right .35s var(--out); }
.nav a:hover { color: var(--bone); }
.nav a:hover::after { right: 0; }
.menu { display: none; }
.mnav { display: none; }

/* ------------------------------------------------------------------ controls */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px; background: var(--signal); color: var(--ink); font: 650 16px/1 var(--sans); font-stretch: 92%; text-decoration: none; border: 0; border-radius: 2px; cursor: pointer; transition: background .2s, transform .2s var(--out), box-shadow .3s; box-shadow: 0 0 0 rgba(58,120,255,0); }
.btn:hover { background: var(--ember); transform: translateY(-1px); box-shadow: 0 10px 40px -10px rgba(58,120,255,.7); }
.btn span { transition: transform .25s var(--out); }
.btn:hover span { transform: translate(2px,-2px); }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
.lnk { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); font: 550 16px/1.2 var(--sans); text-decoration: none; padding: 8px 0; background: none; border: 0; cursor: pointer; border-bottom: 1px solid var(--signal); }
.lnk span { color: var(--signal); transition: transform .25s var(--out); }
.lnk:hover span { transform: translate(2px,-2px); }
.eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(238,233,223,.72); margin: 0 0 22px; }

/* ------------------------------------------------------------------ hud + rail */
body.on-paper .rail { opacity: 0; pointer-events: none; }
.rail { transition: opacity .4s; }
.rail { position: fixed; right: calc(var(--gut) - 6px); top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 4px; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 22px; text-decoration: none; flex-direction: row-reverse; }
.rail i { width: 14px; height: 1px; background: var(--hair2); transition: width .3s var(--out), background .3s; }
.rail span { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .3s var(--out); white-space: nowrap; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: none; }
.rail a.on i { width: 28px; background: var(--signal); }
.rail a.on span { color: var(--bone); }
.rail a.past i { background: rgba(58,120,255,.5); }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 110px var(--gut) 64px; display: grid; grid-template-rows: auto 1fr auto auto; }
.hero-title { grid-row: 3; margin: 0 0 30px; font-weight: 820; font-size: clamp(52px, min(8.4vw, 13.4vh), 168px); line-height: .86; letter-spacing: -.035em; max-width: 12ch; }
.hero-title .ln { display: block; white-space: nowrap; }
.hero-title .w { display: inline-block; font-stretch: 62%; opacity: .14; transform: translateY(.08em); transition: font-stretch 1.1s var(--out), opacity .5s, transform .9s var(--out), color .4s; }
.hero-title .w.on { font-stretch: 88%; opacity: 1; transform: none; }
.hero-title .w.hot.on { text-shadow: 0 0 40px rgba(58,120,255,.35); }
.hero-foot { grid-row: 4; display: flex; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.lede { margin: 0; max-width: 520px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: rgba(238,233,223,.86); }
.actions { display: flex; align-items: center; gap: 28px; }
.hero .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s, transform 1.1s var(--out); }
.hero .reveal.on { opacity: 1; transform: none; }
.cue { position: absolute; right: var(--gut); bottom: 22px; display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); text-decoration: none; }
.cue i { width: 1px; height: 34px; background: linear-gradient(var(--signal), transparent); animation: cue 2.2s var(--out) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0) } 50% { transform: scaleY(1) } 100% { transform: scaleY(1); opacity: 0 } }

/* ------------------------------------------------------------------ callouts */
.co { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 3px; padding: 8px 12px 9px; background: rgba(10,10,11,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--hair); font-family: var(--mono); pointer-events: none; opacity: 0; will-change: transform, opacity; white-space: nowrap; transition: border-color .2s, background .2s; }
.co.vis { pointer-events: auto; }
.co-i { grid-row: span 2; font: 500 10.5px/1.6 var(--mono); color: var(--signal); }
.co-t { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--bone); }
.co-s { font-size: 12px; color: rgba(238,233,223,.78); }
.co.plain { grid-template-columns: 1fr; background: none; border-color: transparent; padding: 0 4px; }
.co.plain .co-t { font-size: 11px; }
.co.hot { border-color: rgba(58,120,255,.55); }
.co.hot .co-t { color: var(--ember); }
.co-svc { text-decoration: none; padding: 9px 13px 10px; }
.co-svc .co-t { font: 600 15px/1.2 var(--sans); letter-spacing: -.005em; text-transform: none; font-stretch: 92%; }
.co-svc::after { content: '↗'; position: absolute; right: 10px; top: 8px; color: var(--signal); font-size: 12px; opacity: 0; transition: opacity .2s; }
.co-svc { padding-right: 30px; }
.co-svc:hover, .co-svc:focus-visible { border-color: var(--signal); background: rgba(21,21,23,.94); }
.co-svc:hover::after, .co-svc:focus-visible::after { opacity: 1; }
.co .typed { display: inline-block; overflow: hidden; vertical-align: bottom; }
.co-svc:focus-visible { opacity: 1 !important; }
.probe .co-t { color: var(--signal); }
.probe .co-s { color: var(--ash); }
body.no-webgl .svc-links, body.no-webgl .callouts .co { display: none; }
@media (hover: none) { .desk-only { display: none; } }
/* the "now" label: the one thing to read at a station */
.co.step { display: block; max-width: 330px; padding: 11px 15px 13px; white-space: normal; background: rgba(10,10,11,.95); border: 1px solid var(--signal); box-shadow: 0 0 0 1px rgba(58,120,255,.15), 0 10px 40px -10px rgba(58,120,255,.45); }
.co.step::before { content: ''; position: absolute; left: -1px; top: -1px; width: 3px; bottom: -1px; background: var(--signal); }
.s-k { display: block; font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ember); margin-bottom: 5px; }
.s-k b { font-weight: 600; color: var(--bone); }
.s-t { display: block; font: 700 19px/1.15 var(--sans); letter-spacing: -.01em; color: var(--bone); margin-bottom: 5px; }
.s-d { display: block; font: 400 14px/1.4 var(--sans); color: rgba(238,233,223,.86); }
.leaders .dock { display: none; }
/* the focal panel's content slot */
.s-x:empty { display: none; }
.s-x { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 12px; line-height: 1.45; color: rgba(238,233,223,.85); }
.s-x > div + div { margin-top: 6px; }
.x-q { color: rgba(238,233,223,.7); }
.x-a { font: 600 15px/1.35 var(--sans); color: var(--bone); }
.x-src { color: rgba(238,233,223,.62); font-size: 11.5px; }
.x-src b { color: var(--bone); font-weight: 500; }
.x-reply { font: 500 16px/1.35 var(--sans); color: var(--bone); }
.x-reply .tk { opacity: .22; transition: opacity .25s; }
.x-reply .tk.on { opacity: 1; }
.x-reply .tk.now { color: var(--ember); }
.x-dist { font-size: 11.5px; color: rgba(238,233,223,.6); }
.x-dist b { color: var(--ember); font-weight: 500; }
.x-ok { color: var(--bone); }
.x-hand { color: var(--ember); font-weight: 500; }
.x-rec { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; }
.x-rec span { color: rgba(238,233,223,.6); }
.x-rec b { font-weight: 500; color: var(--bone); text-align: right; }
.co.step { max-width: 360px; }
/* p( next | context ) */
.dist { display: block; min-width: 250px; padding: 10px 12px 11px; }
.dist-hd { display: flex; justify-content: space-between; gap: 18px; font-size: 10.5px; color: var(--ash); margin-bottom: 7px; letter-spacing: .03em; }
.dist-row { display: grid; grid-template-columns: 1fr 70px 38px; gap: 10px; align-items: center; font-size: 12px; color: rgba(238,233,223,.62); padding: 2px 0; }
.dist-row b { font-weight: 400; height: 3px; background: rgba(238,233,223,.35); display: block; transform-origin: left; }
.dist-row em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.dist-row.pick { color: var(--signal); }
.dist-row.pick b { background: var(--signal); }
.reply { display: block; padding: 10px 13px 11px; max-width: 420px; white-space: normal; }
.reply-hd { font-size: 10.5px; color: var(--ash); margin-bottom: 5px; }
.reply-q { font-size: 12px; color: var(--ash); margin-bottom: 6px; }
.reply-a { font: 500 17px/1.35 var(--sans); color: var(--bone); min-height: 1.35em; }
.reply-a .tk { opacity: .25; transition: opacity .2s, color .4s; }
.reply-a .tk.on { opacity: 1; }
.reply-a .tk.now { color: var(--signal); }
.reply-a .caret { display: inline-block; width: 9px; height: 1.05em; background: var(--signal); vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.stampco { padding: 8px 12px; border: 2px solid var(--signal); background: rgba(10,10,11,.6); color: var(--signal); font: 900 16px/1 var(--sans); font-stretch: 118%; letter-spacing: .06em; text-transform: uppercase; transform-origin: center; }
.stampco small { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .06em; color: var(--ash); margin-top: 4px; text-transform: none; }

/* process log: a timeline strip docked along the bottom */
.proc { display: grid; grid-template-columns: 170px 1fr; width: calc(100vw - 128px - 40px); max-width: 1480px; padding: 0; white-space: normal; background: rgba(10,10,11,.88); border-color: var(--hair2); }
.proc::before { content: ''; position: absolute; left: -1px; top: -1px; width: 28px; height: 2px; background: var(--signal); }
.proc-hd { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-right: 1px solid var(--hair); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.proc-hd span:nth-child(2) { color: var(--bone); font-size: 12px; }
.proc-clock { font-variant-numeric: tabular-nums; color: var(--signal); }
.proc-step { color: var(--bone); font-size: 12px; letter-spacing: .06em; }
.proc-step b { color: var(--signal); font-weight: 500; font-size: 16px; }
.proc-all { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: rgba(238,233,223,.08); }
.proc-all i { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 10px rgba(58,120,255,.7); }
.leaders .dock path { stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 5 4; animation: march .8s linear infinite; }
.leaders .dock .ring { stroke: var(--signal); stroke-width: 1.5; animation: ping 1.4s var(--out) infinite; transform-box: fill-box; transform-origin: center; }
.leaders .dock .dot { fill: var(--signal); }
@keyframes march { to { stroke-dashoffset: -18; } }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.proc-sub { display: none; }
.proc-hd .proc-sub { display: block; color: var(--ash); letter-spacing: .04em; text-transform: none; }
.proc-hd .proc-sub b { color: var(--bone); font-weight: 500; }
.proc-hd span:first-child { color: var(--bone); }
.proc-hd + .proc-sub, .proc-ft { display: none; }
.proc ol { list-style: none; margin: 0; padding: 0; display: flex; }
.proc li { color: rgba(238,233,223,.55); position: relative; flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: 34px 1fr; column-gap: 6px; align-content: start; padding: 9px 12px 10px 12px; border-right: 1px solid var(--hair); font-size: 12px; line-height: 1.35; color: rgba(238,233,223,.4); transition: color .3s, background .3s, flex-grow .5s var(--out); }
.proc li:last-child { border-right: 0; }
.proc li[hidden] { display: none; }
.proc li i { font-style: normal; font-size: 10.5px; color: var(--graphite); padding-top: 2px; }
.proc li .t { font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: -.005em; transition: font-size .3s; }
.proc li.now .t { font-size: 14px; }
.proc li.now.flash { animation: stepflash .9s var(--out); }
@keyframes stepflash { 0% { background: rgba(58,120,255,.35); } 100% { background: rgba(58,120,255,.07); } }
.proc li .d, .proc li .bar { grid-column: 2; }
.proc li .d { font-size: 12.5px; color: rgba(238,233,223,.78); margin-top: 3px; max-height: 0; overflow: hidden; opacity: 0; transition: opacity .4s; }
.proc li .bar { display: block; height: 2px; margin-top: 8px; background: rgba(238,233,223,.08); }
.proc li .bar u { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0); }
.proc li.done { color: rgba(238,233,223,.6); }
.proc li.done i { color: var(--bone); }
.proc li.done i::before { content: '✓ '; }
.proc li.done .bar u { transform: scaleX(1) !important; background: rgba(238,233,223,.35); }
.proc li.now { flex-grow: 1.4; color: var(--bone); background: rgba(58,120,255,.07); }
.proc li.now::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--signal); }
.proc li.now i { color: var(--signal); }
.proc li.now .d { max-height: 4em; opacity: 1; }
body.on-paper .proc { opacity: 0 !important; }
.reply-ctx { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--hair); font-size: 11px; color: var(--ash); }
.reply-ctx .ok { color: var(--bone); font-weight: 500; }
.reply-ctx .hand { color: var(--signal); font-weight: 500; }
.rec { display: block; min-width: 230px; padding: 9px 12px 10px; }
.rec-hd { font-size: 10.5px; color: var(--ash); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.rec-row { display: flex; justify-content: space-between; gap: 18px; font-size: 11.5px; padding: 2px 0; color: var(--ash); }
.rec-row b { font-weight: 500; color: var(--bone); }
.rec-row b.ok { color: var(--signal); }
.co.lane .co-i { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; }
.stampco.hand { font-size: 14px; font-stretch: 105%; }
.ch-now { display: none; }
/* finale */
.finale { position: relative; min-height: 150vh; padding: 0 var(--gut); display: flex; align-items: center; }
.fin-in { max-width: 640px; }
.finale .btn { margin-top: 26px; }
.fin-in { max-width: 760px; }
.fin-stats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair2); }
.fin-stats li { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }
.fin-stats li.lead { grid-column: 1 / -1; }
.fin-stats li.lead b { font-size: clamp(56px, 6vw, 96px); color: var(--signal); }
.fin-stats li.lead span { font-size: 17px; }
.fin-stats li:nth-child(2) { border-right: 1px solid var(--hair); }
.fin-stats li:nth-child(3) { padding-left: 18px; }
.fin-stats b { font: 900 clamp(40px, 4.2vw, 64px)/.9 var(--sans); font-stretch: 72%; letter-spacing: -.03em; color: var(--ember); }
.fin-stats span { font-size: 15px; line-height: 1.4; color: rgba(238,233,223,.9); }
.fin-stats cite { font: 400 11px/1.4 var(--mono); font-style: normal; color: rgba(238,233,223,.55); }
.fin-stats cite a { text-decoration: underline; text-decoration-color: rgba(238,233,223,.25); text-underline-offset: 2px; }
.fin-note { margin: 16px 0 0 !important; font-size: 11.5px !important; color: rgba(238,233,223,.6) !important; max-width: 560px; }
.finale::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.75) 55%, rgba(10,10,11,.2) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.svc-hint { margin-top: 18px !important; font-size: 12px !important; letter-spacing: .06em; color: var(--ember) !important; }
.co.outcome .co-i { color: var(--ember); }
.finale h2 { font-weight: 820; font-size: clamp(40px, 4.4vw, 76px); line-height: .94; letter-spacing: -.035em; font-stretch: 80%; margin: 0 0 18px; }
.finale p:not(.eyebrow) { font-size: clamp(16px, 1.2vw, 19px); color: rgba(238,233,223,.84); max-width: 500px; margin: 0; }
.shock { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid var(--signal); border-radius: 50%; opacity: 0; pointer-events: none; }
.shock.go { animation: shock 1.6s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes shock { 0% { transform: scale(.2); opacity: 1; border-width: 3px; } 100% { transform: scale(26); opacity: 0; border-width: .5px; } }

/* ------------------------------------------------------------------ services */
.svc-intro { min-height: 110vh; display: flex; align-items: center; padding: 0 var(--gut); }
.svc-intro-in { max-width: 640px; }
.svc-intro h2, .contact h2, .paper h2 { font-weight: 820; font-size: clamp(48px, 6.4vw, 118px); line-height: .9; letter-spacing: -.035em; font-stretch: 80%; margin: 0 0 26px; }
.svc-intro p:not(.eyebrow) { font-size: clamp(17px, 1.35vw, 21px); color: rgba(238,233,223,.84); max-width: 520px; margin: 0; }

.ch { position: relative; min-height: 175vh; padding: 0 var(--gut); display: flex; flex-direction: column; }
.ch-card { position: sticky; top: max(96px, calc(50vh - 300px)); width: min(500px, 40vw); padding: 26px 30px 28px; background: rgba(10,10,11,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--hair); opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .7s var(--out); }
.ch-card.on { opacity: 1; transform: none; }
.ch-card::before, .ch-card::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid var(--signal); }
.ch-card::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.ch-card::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.ch-hd { display: flex; align-items: baseline; gap: 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--hair); }
.ch-n { color: var(--ember); font-size: 12px; }
.ch-n i { font-style: normal; color: var(--graphite); }
.ch-fr { margin-left: auto; color: var(--bone); font-variant-numeric: tabular-nums; }
.ch h3 { font-weight: 820; font-size: clamp(32px, 3.1vw, 54px); line-height: .96; letter-spacing: -.03em; font-stretch: 82%; margin: 0 0 12px; }
.ch-st { font: 600 19px/1.3 var(--sans); color: var(--signal); margin: 0 0 12px; }
.ch-card > p:not(.ch-st) { margin: 0 0 20px; color: rgba(238,233,223,.88); font-size: 16.5px; }
.ch-card > p.ch-stat { margin: -4px 0 18px; padding: 10px 12px 11px; border-left: 2px solid var(--signal); background: rgba(58,120,255,.08); font-size: 14px; line-height: 1.45; color: rgba(238,233,223,.9); }
.ch-stat b { display: block; font: 800 30px/1 var(--sans); font-stretch: 80%; letter-spacing: -.02em; color: var(--ember); margin-bottom: 4px; }
.ch-stat cite { display: block; margin-top: 5px; font: 400 11px/1.4 var(--mono); font-style: normal; color: rgba(238,233,223,.55); }
.ch-stat cite a { text-decoration: underline; text-decoration-color: rgba(238,233,223,.25); text-underline-offset: 2px; }
.ch-stat cite a:hover { color: var(--bone); }
.ch-card > p.ch-watch-unused { margin: -6px 0 18px; padding: 9px 12px 10px; border-left: 2px solid var(--signal); background: rgba(58,120,255,.08); font-size: 14.5px; line-height: 1.45; color: var(--bone); }
.ch-watch b { display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ember); margin-bottom: 3px; }
.ch-list { list-style: none; margin: 0 0 22px; padding: 0; font-size: 12.5px; }
.ch-list li { padding: 9px 0; border-top: 1px solid var(--hair); color: rgba(238,233,223,.88); }
.ch-list li::before { content: '→'; color: var(--signal); margin-right: 12px; }

/* ------------------------------------------------------------------ paper (approach) */
.paper { position: relative; background: var(--bone); color: var(--ink); z-index: 3; overflow: clip; }
.paper::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(10,10,11,.045) 31px 32px); }
.paper-in { position: relative; max-width: 1480px; margin: 0 auto; padding: 120px var(--gut) 130px; }
.form-hd { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 60px; align-items: end; padding-bottom: 50px; border-bottom: 2px solid var(--ink); }
.form-id { grid-column: 1 / -1; display: flex; gap: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--ink); width: max-content; }
.form-id span { padding: 7px 12px; border-right: 1px solid var(--ink); }
.form-id span:first-child { background: var(--ink); color: var(--bone); }
.form-id span:last-child { border-right: 0; color: #6d6861; }
.paper h2 { font-stretch: 80%; margin: 0; }
.paper h2 span { color: var(--signal); }
.form-hd p { margin: 0; font-size: clamp(17px, 1.35vw, 21px); max-width: 520px; color: #36332f; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 40px 150px 1fr 230px; gap: 30px; align-items: start; padding: 38px 0; border-bottom: 1px solid rgba(10,10,11,.25); }
.tick { width: 28px; height: 28px; border: 1.5px solid var(--ink); margin-top: 12px; }
.tick svg { width: 100%; height: 100%; }
.tick path { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: square; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s .35s var(--out); }
.step.in .tick path { stroke-dashoffset: 0; }
.step-n { font: 900 88px/.8 var(--sans); font-stretch: 62%; letter-spacing: -.04em; color: var(--ink); }
.step h3 { font-weight: 800; font-size: clamp(26px, 2.4vw, 40px); line-height: 1; letter-spacing: -.025em; font-stretch: 86%; margin: 4px 0 12px; }
.step p { margin: 0; max-width: 560px; color: #36332f; }
.step-note { font-size: 13px; line-height: 1.6; color: #6d6861; margin: 8px 0 0; border-left: 1px solid rgba(10,10,11,.3); padding-left: 14px; }

/* ------------------------------------------------------------------ contact */
.contact { min-height: 115vh; display: flex; align-items: center; padding: 120px var(--gut) 90px; }
.contact-in { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 60px; align-items: center; }
.ct-copy { max-width: 560px; }
.contact h2 { font-size: clamp(46px, 5.6vw, 100px); }
.ct-copy p:not(.eyebrow) { font-size: clamp(17px, 1.3vw, 20px); color: rgba(238,233,223,.84); max-width: 480px; margin: 0; }
.prompt { position: relative; background: rgba(10,10,11,.84); border: 1px solid var(--hair2); padding: 0 28px 26px; }
.prompt::before { content: ''; position: absolute; left: -1px; top: -1px; width: 40px; height: 2px; background: var(--signal); }
.prompt-hd { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); padding: 15px 0; margin-bottom: 8px; border-bottom: 1px solid var(--hair); }
.p-n b { color: var(--signal); font-weight: 500; }
.prompt .row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.prompt label { display: block; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); padding-top: 18px; }
.prompt input, .prompt select, .prompt textarea { display: block; width: 100%; margin-top: 10px; background: transparent; border: 0; border-bottom: 1px solid var(--hair2); color: var(--bone); font: 400 16px/1.4 var(--mono); padding: 8px 0 10px; caret-color: var(--signal); border-radius: 0; transition: border-color .2s; text-transform: none; letter-spacing: 0; }
.prompt select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--signal) 50%), linear-gradient(135deg, var(--signal) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.prompt select option { background: var(--ink2); color: var(--bone); }
.prompt textarea { resize: vertical; min-height: 110px; }
.prompt input:focus, .prompt select:focus, .prompt textarea:focus { outline: none; border-color: var(--signal); }
.prompt input::placeholder, .prompt textarea::placeholder { color: var(--graphite); }
.prompt input:user-invalid, .prompt textarea:user-invalid { border-color: var(--ember); }
.submit-row { display: flex; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.note { font-size: 11px; color: var(--ash); max-width: 280px; margin: 0; line-height: 1.5; }
.result { margin-top: 24px; border-top: 1px solid var(--hair); padding-top: 18px; }
.result:focus { outline: none; }
.res-hd { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); margin: 0 0 10px; }
.result pre { white-space: pre-wrap; font-size: 12.5px; color: rgba(238,233,223,.84); background: rgba(21,21,23,.9); padding: 14px 16px; margin: 0 0 14px; max-height: 220px; overflow: auto; }
.res-actions { display: flex; gap: 26px; }

/* ------------------------------------------------------------------ footer */
.ftr { display: flex; gap: 30px; justify-content: space-between; flex-wrap: wrap; padding: 26px var(--gut) 60px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(238,233,223,.7); border-top: 1px solid var(--hair); background: var(--ink); }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--signal); }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 1100px) {
  .step { grid-template-columns: 34px 100px 1fr; }
  .step-note { grid-column: 3; }
  .step-n { font-size: 64px; }
  .contact-in { grid-template-columns: 1fr; }
}
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  body { font-size: 16px; }
  .desk-only { display: none; }
  .nav, .mark-txt, .rail { display: none; }
  .mark { gap: 10px; min-width: 0; }
  .mark-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu { padding: 0 12px; }
  .menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hdr { gap: 10px; }
  .hdr > .btn-sm { min-height: 42px; padding: 0 14px; font-size: 14px; gap: 8px; }
  .hdr { padding: 14px var(--gut); }
  .menu { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; background: rgba(10,10,11,.7); border: 1px solid var(--hair2); color: var(--bone); font: 500 14px/1 var(--sans); border-radius: 2px; cursor: pointer; }
  .menu i { width: 16px; height: 7px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  .mnav:not([hidden]) { display: flex; flex-direction: column; position: absolute; top: 64px; left: var(--gut); right: var(--gut); background: rgba(10,10,11,.96); border: 1px solid var(--hair2); padding: 8px 20px; }
  .mnav a { padding: 15px 0; border-bottom: 1px solid var(--hair); text-decoration: none; font-size: 18px; font-weight: 600; }
  .mnav a:last-child { border: 0; color: var(--signal); }
  .hero { padding-top: 92px; padding-bottom: 40px; grid-template-rows: auto 1fr auto auto auto; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-title { font-size: clamp(40px, 12.4vw, 92px); max-width: none; }
  .hero-title .ln { white-space: normal; }
  .hero-foot { gap: 26px; }
  .actions { flex-wrap: wrap; gap: 18px; }
  .svc-links { grid-row: 5; position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 34px; }
  .svc-links .co { position: static; opacity: 1; transform: none !important; pointer-events: auto; white-space: normal; }
  .svc-links .co-t { font-size: 14px; }
  .cue { display: none; }
  .scrim { background: linear-gradient(0deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.55) 45%, rgba(10,10,11,.35) 100%); }
  .ch { min-height: 118vh; justify-content: flex-end; padding-top: 240px; padding-bottom: 14px; }
  .ch-card { width: 100%; top: auto; bottom: 14px; padding: 16px 18px 18px; background: rgba(10,10,11,.96); order: 2; }
  .ch-hd { padding-bottom: 10px; margin-bottom: 12px; gap: 10px; font-size: 10px; }
  .ch h3 { font-size: 30px; margin-bottom: 8px; }
  .ch-st { font-size: 16px; margin-bottom: 8px; }
  .ch-card > p:not(.ch-st) { font-size: 14.5px; margin-bottom: 12px; line-height: 1.45; }
  .ch-list { display: none; }
  .ch-card > p.ch-stat { font-size: 13px; margin-bottom: 10px; }
  .ch-stat b { font-size: 24px; }
  .fin-stats { grid-template-columns: 1fr; }
  .fin-stats li:nth-child(2) { border-right: 0; }
  .fin-stats li:nth-child(3) { padding-left: 0; }
  .ch-list li { padding: 6px 0; }
  .ch-now { display: block; font-size: 11px; line-height: 1.45; margin: 0 0 10px; padding: 7px 10px; border-left: 2px solid var(--signal); background: rgba(58,120,255,.07); color: rgba(238,233,223,.8); }
  .ch-now b { color: var(--signal); font-weight: 500; display: block; }
  .finale { min-height: 120vh; align-items: flex-end; padding-bottom: 80px; }
  .svc-intro { min-height: 90vh; }
  .form-hd { grid-template-columns: 1fr; }
  .form-id { width: auto; flex-wrap: wrap; }
  .form-id span:last-child { display: none; }
  .step { grid-template-columns: 30px 1fr; gap: 14px 18px; padding: 30px 0; }
  .step-n { grid-column: 2; font-size: 54px; }
  .step > div, .step-note { grid-column: 2; }
  .prompt { padding: 0 18px 22px; }
  .prompt .row { grid-template-columns: 1fr; gap: 0; }
  .contact { padding-top: 100px; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .grain { animation: none; }
  .ch-card { opacity: 1; transform: none; }
}
html.reduced-motion { scroll-behavior: auto; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001s !important; transition-delay: 0s !important; }
.reduced-motion .ch-card { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ round 9: fast jumps, call request */
.veil { position: fixed; inset: 0; z-index: 25; background: var(--ink, #0a0a0b); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.veil.on { opacity: 1; }
.svc-hint a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.prompt label em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--graphite, #8a857c); }

/* ------------------------------------------------------------------ round 11: hierarchy, deliverables, identity */
/* identity */
.mark-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mark-name { font: 750 16px/1 var(--sans); font-stretch: 92%; letter-spacing: -.01em; color: var(--bone); }
.mark-txt { font-size: 10.5px; }

/* hero: a quiet area behind the words; the floating labels step back */
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) {
  .hero::before { content: ''; position: absolute; left: 0; bottom: 0; width: min(1150px, 78vw); height: 78%; pointer-events: none; z-index: -1;
    background: radial-gradient(ellipse 70% 70% at 22% 82%, rgba(10,10,11,.82) 0%, rgba(10,10,11,.55) 45%, rgba(10,10,11,0) 75%); }
}
/* the six services: the page's first list of what we do, so they arrive with some ceremony */
.co-svc { background: rgba(10,10,11,.95); border-color: rgba(58,120,255,.42); overflow: hidden; box-shadow: 0 10px 30px -12px rgba(0,0,0,.8); }
.co-svc .co-t { font-size: 15px; color: var(--bone); }
.co-svc .co-s { font-size: 12px; color: rgba(238,233,223,.84); }
.co-svc .co-i { color: var(--signal); text-shadow: 0 0 10px rgba(58,120,255,.6); }
.co-svc:hover { opacity: 1 !important; }
.co-svc.lit { animation: svcIn .75s cubic-bezier(.2,.8,.2,1) both; }
.co-svc.from-r.lit { animation-name: svcInR; }
@keyframes svcIn  { 0% { clip-path: inset(0 100% 0 0); box-shadow: 0 0 0 1px rgba(58,120,255,1), 0 0 44px 4px rgba(58,120,255,.75); } 55% { clip-path: inset(0 0 0 0); box-shadow: 0 0 0 1px rgba(58,120,255,1), 0 0 36px 2px rgba(58,120,255,.6); } 100% { clip-path: inset(0 0 0 0); box-shadow: 0 0 0 1px rgba(58,120,255,.15), 0 10px 30px -12px rgba(0,0,0,.8); } }
@keyframes svcInR { 0% { clip-path: inset(0 0 0 100%); box-shadow: 0 0 0 1px rgba(58,120,255,1), 0 0 44px 4px rgba(58,120,255,.75); } 55% { clip-path: inset(0 0 0 0); box-shadow: 0 0 0 1px rgba(58,120,255,1), 0 0 36px 2px rgba(58,120,255,.6); } 100% { clip-path: inset(0 0 0 0); box-shadow: 0 0 0 1px rgba(58,120,255,.15), 0 10px 30px -12px rgba(0,0,0,.8); } }
.co-svc::before { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(58,120,255,.5), rgba(138,184,255,.35), transparent); }
.co-svc.lit::before { animation: svcSweep .95s .2s ease-out both; }
.co-svc.from-r.lit::before { animation-name: svcSweepR; }
@keyframes svcSweep  { 0% { left: -45%; opacity: 1; } 100% { left: 110%; opacity: 1; } }
@keyframes svcSweepR { 0% { left: 110%; opacity: 1; } 100% { left: -45%; opacity: 1; } }
.co-svc.lit .co-s { animation: svcType .7s steps(22, end) .38s both; }
@keyframes svcType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.co-svc.lit .co-i { animation: svcNum .9s ease-out both; }
@keyframes svcNum { 0% { color: #fff; text-shadow: 0 0 18px rgba(138,184,255,1), 0 0 4px #fff; } 100% { color: var(--signal); text-shadow: 0 0 10px rgba(58,120,255,.6); } }

/* service cards: the deliverable leads, research supports */
.ch-card > p.ch-get { margin: 0 0 18px; padding: 12px 14px 13px; background: rgba(238,233,223,.06); border: 1px solid rgba(238,233,223,.13); font-size: 16px; line-height: 1.42; color: var(--bone); }
.ch-get span { display: block; font: 600 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ember); margin-bottom: 8px; }
.ch-card > p.ch-stat { margin: 0 0 20px; padding: 1px 0 1px 12px; border-left: 2px solid rgba(58,120,255,.5); background: none; font-size: 13px; line-height: 1.45; color: rgba(238,233,223,.7); }
.ch-stat b { display: inline; font: 700 14px/1.45 var(--sans); font-stretch: 92%; letter-spacing: 0; color: var(--ember); margin: 0 3px 0 0; }
.ch-stat cite { font-size: 10.5px; }

/* how we work: example, how to start, questions */
.example { margin-top: 70px; padding: 34px 36px; border: 2px solid var(--ink); background: rgba(255,255,255,.32); }
.ex-k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6d6861; margin: 0 0 10px; }
.ex-t, .start h3, .faq h3 { font-weight: 800; font-size: clamp(26px, 2.4vw, 40px); line-height: 1; letter-spacing: -.025em; font-stretch: 86%; margin: 0 0 24px; }
.ex-flow { display: grid; grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1.25fr); gap: 20px; align-items: center; }
.ex-lbl { font: 650 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--signal); margin: 0 0 12px; }
.ex-mail { background: #fff; border: 1px solid rgba(10,10,11,.18); padding: 18px 20px 12px; box-shadow: 0 14px 30px -20px rgba(10,10,11,.45); }
.ex-mail p { margin: 0 0 9px; font-size: 15.5px; line-height: 1.45; color: #36332f; }
.ex-mail p.mono { font-size: 12.5px; color: #6d6861; }
.ex-mail b { display: inline-block; min-width: 64px; color: var(--ink); font-weight: 600; }
.ex-arrow { font: 800 40px/1 var(--sans); color: var(--signal); text-align: center; }
.ex-list { list-style: none; margin: 0; padding: 0; }
.ex-list li { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(10,10,11,.18); font-size: 15.5px; line-height: 1.4; color: #36332f; }
.ex-list li:first-child { border-top: 0; padding-top: 0; }
.ex-list b { font: 600 12px/1.7 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.start-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 80px; }
.start-steps { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: s; }
.start-steps li { counter-increment: s; position: relative; padding: 15px 0 15px 46px; border-top: 1px solid rgba(10,10,11,.2); color: #36332f; font-size: 16.5px; }
.start-steps li:last-child { border-bottom: 1px solid rgba(10,10,11,.2); }
.start-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 600 13px/1.5 var(--mono); color: var(--signal); }
.start-steps b { color: var(--ink); }
.faq details { border-top: 1px solid rgba(10,10,11,.2); }
.faq details:last-child { border-bottom: 1px solid rgba(10,10,11,.2); }
.faq summary { cursor: pointer; list-style: none; padding: 17px 36px 17px 0; font: 650 18px/1.3 var(--sans); color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 13px; font: 500 26px/1 var(--sans); color: var(--signal); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: -4px 0 18px; color: #36332f; max-width: 540px; }

/* contact: a solid panel, readable labels, clear next step */
.ct-next { margin-top: 18px !important; font-size: 15.5px !important; color: rgba(238,233,223,.78) !important; }
.ct-next b { color: var(--bone); font-weight: 650; }
.prompt { background: #111113; border-color: rgba(238,233,223,.18); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.prompt-hd { font-size: 12px; }
.prompt label { font: 600 14px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(238,233,223,.92); padding-top: 20px; }
.prompt input, .prompt select, .prompt textarea { margin-top: 8px; padding: 11px 12px; background: rgba(238,233,223,.05); border: 1px solid rgba(238,233,223,.2); border-radius: 2px; font: 400 16px/1.4 var(--sans); }
.prompt select { padding-right: 34px; }
.prompt input:focus, .prompt select:focus, .prompt textarea:focus { border-color: var(--signal); background: rgba(58,120,255,.06); }
.note a { color: var(--bone); text-decoration: underline; text-underline-offset: 2px; }

/* footer: identity, navigation, company information */
.ftr { display: block; padding: 70px var(--gut) 40px; font-size: 15px; letter-spacing: 0; text-transform: none; color: rgba(238,233,223,.78); border-top: 1px solid var(--hair2); background: #0a0a0b; }
.ftr-in { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: 40px; }
.ftr p { margin: 0 0 7px; }
.ftr-name { font: 800 28px/1.05 var(--sans); font-stretch: 88%; letter-spacing: -.02em; color: var(--bone); margin-bottom: 10px !important; }
.ftr-nav { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.ftr-legal { font-size: 13.5px; color: rgba(238,233,223,.62); }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--signal); }
.ftr-note { margin: 50px 0 0 !important; padding-top: 20px; border-top: 1px solid var(--hair); font: 400 11.5px/1.5 var(--mono); color: rgba(238,233,223,.5); }

/* Policy drafts stay within the single page and read like ordinary text. */
.policies { margin-top: 32px; }
.policy { border-top: 1px solid var(--hair2); }
.policy:last-child { border-bottom: 1px solid var(--hair2); }
.policy summary { padding: 20px 0; cursor: pointer; color: var(--bone); font: 650 20px/1.4 var(--sans); scroll-margin-top: 12px; }
.policy summary::marker { color: var(--ember); }
.policy summary span { margin-left: 12px; color: var(--ash); font-size: 14px; font-weight: 400; }
.policy-copy { max-width: 70ch; padding: 4px 0 32px; color: var(--bone); font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.policy-copy h3 { margin: 32px 0 10px; font: 650 21px/1.3 var(--sans); }
.policy-copy p { margin: 0 0 16px; }
.policy-copy ul { list-style: disc; margin: 0 0 20px; padding-left: 24px; }
.policy-copy li { margin: 0 0 10px; }
.policy-copy .policy-status { color: var(--ember); }
.ftr .policy-copy a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.ftr .policy-copy a:hover { color: var(--bone); }

@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .svc-links .co-s { display: none; }
  .svc-links .co { padding: 11px 12px; }
  .svc-links .co-t { font-size: 13.5px; }
  .ch-card > p.ch-get { font-size: 14.5px; padding: 10px 12px; margin-bottom: 12px; }
  .ch-card > p.ch-stat { font-size: 12.5px; margin-bottom: 12px; }
  .example { padding: 22px 18px; margin-top: 50px; }
  .ex-flow { grid-template-columns: 1fr; gap: 14px; }
  .ex-arrow { transform: rotate(90deg); }
  .ex-list li { grid-template-columns: 1fr; gap: 2px; }
  .start-faq { grid-template-columns: 1fr; gap: 44px; margin-top: 54px; }
  .ftr-in { grid-template-columns: 1fr; gap: 30px; }
}

/* over the cream plate the translucent header washes out: go nearly solid */
body.on-paper .hdr.solid { background: rgba(10,10,11,.95); }
.hdr > .btn-sm { white-space: nowrap; }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) { .hdr > .btn-sm span { display: none; } }

/* ------------------------------------------------------------------ round 12: clean transitions, private AI */
.ch-card:not(.on) { pointer-events: none; }
.ch-card > p.ch-note { margin: -10px 0 18px; font-size: 13px; color: rgba(238,233,223,.7); }
.svc-private { margin: 30px 0 26px; padding: 18px 20px 16px; max-width: 520px; border: 1px solid rgba(58,120,255,.55); background: rgba(10,10,11,.78); position: relative; }
.svc-private::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--signal); }
.sp-k { margin: 0 0 8px !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ember) !important; }
.svc-private h3 { margin: 0 0 8px; font: 750 22px/1.15 var(--sans); font-stretch: 90%; letter-spacing: -.01em; color: var(--bone); }
.svc-private p:not(.sp-k) { font-size: 16px !important; margin: 0 0 10px !important; }
.finale .actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.finale .actions .btn { margin-top: 0; }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) { .ch-card > p.ch-note { margin: -4px 0 10px; font-size: 12px; } }

/* phones: the six services are a static index, so they cascade in after the intro */
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .svc-links .co { animation: svcIn .7s cubic-bezier(.2,.8,.2,1) both; }
  .svc-links .co:nth-of-type(1) { animation-delay: 2.2s; } .svc-links .co:nth-of-type(2) { animation-delay: 2.32s; }
  .svc-links .co:nth-of-type(3) { animation-delay: 2.44s; } .svc-links .co:nth-of-type(4) { animation-delay: 2.56s; }
  .svc-links .co:nth-of-type(5) { animation-delay: 2.68s; } .svc-links .co:nth-of-type(6) { animation-delay: 2.8s; }
}

/* ------------------------------------------------------------------ services intro: the ideas board */
.svc-intro { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: clamp(30px, 4vw, 70px); align-items: center; }
.svc-board { min-width: 0; }
.board-hd { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(58,120,255,.4); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(238,233,223,.7); }
.board-hd span:first-child { color: var(--bone); font-size: 13px; }
.blane { display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: center; gap: 14px; padding: 7px 0; opacity: 0; transform: translateX(40px); transition: opacity .6s, transform .8s var(--out); transition-delay: calc(var(--k) * 110ms + 150ms); }
.svc-board.in .blane { opacity: 1; transform: none; }
.lane-k { display: flex; align-items: baseline; gap: 8px; text-decoration: none; font: 600 14px/1.2 var(--sans); color: var(--bone); padding: 8px 10px; background: rgba(10,10,11,.92); border: 1px solid rgba(58,120,255,.35); border-left: 2px solid var(--signal); }
.lane-k b { font: 500 11px/1 var(--mono); color: var(--signal); }
.lane-k:hover { border-color: var(--signal); }
.lane-v { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 88%, transparent); }
.lane-t { display: flex; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; flex: none; animation: lane var(--dur, 50s) linear infinite; }
.blane:nth-child(odd) .lane-t { animation-direction: reverse; }
@keyframes lane { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.lane-t li { flex: none; white-space: nowrap; padding: 8px 12px; font: 400 13.5px/1.2 var(--sans); color: rgba(238,233,223,.9); background: rgba(16,16,18,.9); border: 1px solid rgba(238,233,223,.14); }
.lane-t li.hot { color: var(--bone); border-color: rgba(58,120,255,.6); background: rgba(22,34,64,.92); box-shadow: 0 0 18px -6px rgba(58,120,255,.7); }
.lane-t li.hot::before { content: '●'; color: var(--signal); font-size: 8px; margin-right: 8px; vertical-align: 2px; }
@media (max-width: 1100px) { .blane { grid-template-columns: 140px minmax(0, 1fr); } .lane-k { font-size: 13px; } }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .svc-intro { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 60px; padding-bottom: 60px; }
  .blane { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px 0; }
  .lane-k { justify-self: start; font-size: 13px; padding: 6px 9px; }
  .lane-t li { font-size: 13px; padding: 7px 10px; }
  .board-hd span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lane-t { animation: none; flex-wrap: wrap; row-gap: 8px; flex: 1; }
  .lane-t[aria-hidden] { display: none; }
  .lane-v { -webkit-mask-image: none; mask-image: none; }
}
.svc-intro p.board-hd { font-size: 12px; max-width: none; color: rgba(238,233,223,.7); }
.svc-intro p.board-hd span:first-child { font-size: 13px; }
@media (min-width: 1101px) { .blane { grid-template-columns: 214px minmax(0, 1fr); } .lane-k { white-space: nowrap; } }
@media (min-width: 1101px) {
  .blane { padding: 8px 0; grid-template-columns: 232px minmax(0, 1fr); }
  .lane-k { font-size: 15px; padding: 10px 12px; }
  .lane-t li { font-size: 14.5px; padding: 10px 14px; }
}

/* ------------------------------------------------------------------ ideas you can pick */
.lane-t li { padding: 0; background: none; border: 0; box-shadow: none; }
.idea { display: inline-flex; align-items: center; white-space: nowrap; padding: 10px 14px; font: 400 14.5px/1.2 var(--sans); color: rgba(238,233,223,.92); background: rgba(16,16,18,.92); border: 1px solid rgba(238,233,223,.16); border-radius: 0; cursor: pointer;
  transition: transform .22s var(--out), border-color .2s, background .2s, color .2s, box-shadow .25s; }
.idea.hot { color: var(--bone); border-color: rgba(58,120,255,.6); background: rgba(22,34,64,.92); box-shadow: 0 0 18px -6px rgba(58,120,255,.7); }
.idea.hot::before { content: '●'; color: var(--signal); font-size: 8px; margin-right: 8px; }
.idea::after { content: '+'; display: inline-block; overflow: hidden; width: 0; margin-left: 0; opacity: 0; font: 600 16px/1 var(--mono); color: var(--signal); transition: width .2s, margin .2s, opacity .2s; }
.idea:hover, .idea:focus-visible { color: var(--bone); border-color: var(--signal); background: rgba(24,38,74,.96); box-shadow: inset 0 0 0 1px rgba(58,120,255,.55), inset 0 -10px 18px -10px rgba(58,120,255,.6); outline: none; }
.idea:hover::after, .idea:focus-visible::after { width: 10px; margin-left: 9px; opacity: 1; }
.idea.picked { color: var(--ink); background: var(--signal); border-color: var(--signal); box-shadow: 0 0 22px -4px rgba(58,120,255,.9); }
.idea.picked::before { color: var(--ink); }
.idea.picked::after { content: '✓'; width: 12px; margin-left: 9px; opacity: 1; color: var(--ink); }
.idea.picked:hover { background: var(--ember); }
.idea.pop { animation: ideaPop .38s var(--out); }
@keyframes ideaPop { 40% { transform: scale(1.1); } }
.idea.ghost { position: fixed; z-index: 60; margin: 0; pointer-events: none; }

.board-ft { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(58,120,255,.35); }
.bf-msg { flex: 1; min-width: 0; font: 400 14px/1.35 var(--sans); color: rgba(238,233,223,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-msg b { color: var(--signal); font-weight: 700; }
.has-picks .bf-msg { color: var(--bone); }
.bf-clear { background: none; border: 0; padding: 6px 2px; font: 500 14px var(--sans); color: rgba(238,233,223,.75); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bf-clear:hover { color: var(--bone); }
.bf-add { flex: none; opacity: .55; transition: opacity .3s, box-shadow .3s, background .2s; }
.has-picks .bf-add { opacity: 1; box-shadow: 0 0 0 1px rgba(58,120,255,.3), 0 0 30px -6px rgba(58,120,255,.8); animation: addPulse 2.4s ease-in-out infinite; }
@keyframes addPulse { 50% { box-shadow: 0 0 0 1px rgba(58,120,255,.5), 0 0 40px -2px rgba(58,120,255,.95); } }

.pick-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 -2px 0 2px; border-radius: 10px; background: var(--ink); color: var(--signal); font: 700 12px/1 var(--sans); }
.pick-badge[hidden] { display: none; }
.pick-badge.bump { animation: ideaPop .4s var(--out); }
.prompt textarea.flash { animation: taFlash 1.4s ease-out; }
@keyframes taFlash { 0% { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal), 0 0 34px rgba(58,120,255,.65); } 100% { box-shadow: 0 0 0 0 rgba(58,120,255,0); } }

@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .idea { font-size: 13.5px; padding: 11px 12px; min-height: 42px; }
  .board-ft { flex-wrap: wrap; gap: 10px 14px; }
  .bf-msg { flex-basis: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .has-picks .bf-add { animation: none; } }

/* ------------------------------------------------------------------ board: two rows per service; an accordion on phones */
.lane-rows { display: grid; gap: 7px; min-width: 0; }
.lane-v + .lane-v .lane-t { animation-delay: calc(var(--dur, 50s) * -0.37); }
.lane-k { align-self: stretch; align-items: center; }
.lane-tog { display: none; }
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) {
  .blane { padding: 6px 0; }
  .idea { font-size: 14px; padding: 8px 13px; }
}
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .blane { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; border-bottom: 1px solid var(--hair); }
  .blane:first-of-type { border-top: 1px solid var(--hair); }
  .lane-k { display: none; }
  .lane-tog { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 2px; background: none; border: 0; color: var(--bone); font: 600 15.5px/1.25 var(--sans); text-align: left; cursor: pointer; }
  .lane-tog b { font: 500 11px/1 var(--mono); color: var(--signal); }
  .lane-tog span { flex: 1; min-width: 0; }
  .lane-tog i { font: 400 12px/1 var(--mono); font-style: normal; color: rgba(238,233,223,.6); white-space: nowrap; }
  .blane.some .lane-tog i { color: var(--signal); }
  .lane-tog::after { content: '+'; width: 20px; text-align: center; font: 500 24px/1 var(--sans); color: var(--signal); }
  .blane.open .lane-tog::after { content: '–'; }
  .lane-rows { display: none; gap: 8px; padding: 2px 0 16px; }
  .blane.open .lane-rows { display: grid; }
  .lane-v { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .lane-t { animation: none !important; flex: 1; flex-wrap: wrap; row-gap: 8px; padding: 0; }
  .lane-t[aria-hidden] { display: none; }
  .board-hd { margin-bottom: 4px; }
}

/* narrower or shorter desktops: the board goes full width under the intro (the page stops on each) */
@media (min-width: 821px) and (min-height: 501px) and (max-width: 1099px), (min-width: 821px) and (pointer: fine) and (max-width: 1099px) {
  .svc-intro { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 110px; padding-bottom: 90px; }
}

/* ------------------------------------------------------------------ private AI: offline, and it shows */
.sp-off { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sp-off circle { fill: currentColor; stroke: none; }
.sp-off .x { stroke: var(--ember); stroke-width: 2.2; }
.svc-private { border-color: var(--signal); background: linear-gradient(135deg, rgba(22,34,64,.95), rgba(10,10,11,.94) 70%); box-shadow: 0 0 0 1px rgba(58,120,255,.25), 0 0 50px -12px rgba(58,120,255,.7); padding: 20px 22px 18px; }
.svc-private::after { content: ''; position: absolute; inset: -1px; pointer-events: none; border: 1px solid transparent;
  background: linear-gradient(90deg, transparent 30%, rgba(138,184,255,.9) 50%, transparent 70%) border-box; background-size: 250% 100%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spEdge 4.5s linear infinite; }
@keyframes spEdge { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.svc-private .sp-k { display: flex; align-items: center; gap: 8px; }
.svc-private h3 { font-size: 24px; }
.sp-list { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; }
.sp-list li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.35; color: var(--bone); }
.sp-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--signal); font-weight: 700; }

.blane.private .lane-k { background: linear-gradient(135deg, rgba(22,34,64,.98), rgba(10,10,11,.95)); border-color: var(--signal); box-shadow: 0 0 26px -8px rgba(58,120,255,.8); gap: 8px; }
.blane.private .lane-k .sp-off { margin-left: auto; color: var(--ember); }
.blane.private .idea:not(.picked) { border-color: rgba(58,120,255,.45); }
.blane.private .lane-tog .sp-off { display: none; }

.ch-card > p.ch-off { display: flex; gap: 10px; align-items: flex-start; margin: -8px 0 18px; padding: 10px 12px; border: 1px solid rgba(58,120,255,.5); background: rgba(22,34,64,.6); font-size: 13.5px; line-height: 1.45; color: rgba(238,233,223,.88); }
.ch-off .sp-off { margin-top: 1px; color: var(--ember); }
.ch-off b { color: var(--bone); }
.ch-off a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) { .ch-card > p.ch-off { font-size: 12.5px; margin: -2px 0 10px; padding: 8px 10px; } }
@media (prefers-reduced-motion: reduce) { .svc-private::after { animation: none; display: none; } }

/* ------------------------------------------------------------------ hero service labels, finished */
.co-svc { column-gap: 12px; row-gap: 2px; padding: 10px 34px 11px 11px; border: 1px solid rgba(58,120,255,.32); border-left: 3px solid var(--signal);
  background: linear-gradient(100deg, rgba(20,30,56,.97), rgba(10,10,11,.96) 62%); box-shadow: 0 14px 40px -14px rgba(0,0,0,.9), 0 0 30px -12px rgba(58,120,255,.55); }
.co-svc .co-i { align-self: center; display: grid; place-items: center; width: 30px; height: 30px; background: rgba(58,120,255,.14); border: 1px solid rgba(58,120,255,.5); font: 600 12px/1 var(--mono); color: var(--ember); text-shadow: none; }
.co-svc .co-t { font: 650 16px/1.15 var(--sans); font-stretch: 92%; letter-spacing: -.01em; text-transform: none; color: var(--bone); }
.co-svc .co-s { font: 400 12.5px/1.3 var(--mono); color: rgba(238,233,223,.8); margin-top: 2px; }
.co-svc:hover { border-color: var(--signal); background: linear-gradient(100deg, rgba(28,42,80,.98), rgba(12,12,14,.97) 62%); }
@keyframes svcIn  { 0% { clip-path: inset(0 100% 0 0); box-shadow: 0 0 0 1px rgba(58,120,255,1), 0 0 44px 4px rgba(58,120,255,.75); } 55% { clip-path: inset(0 0 0 0); box-shadow: 0 0 0 1px rgba(58,120,255,1), 0 0 36px 2px rgba(58,120,255,.6); } 100% { clip-path: inset(0 0 0 0); box-shadow: 0 14px 40px -14px rgba(0,0,0,.9), 0 0 30px -12px rgba(58,120,255,.55); } }
@keyframes svcInR { 0% { clip-path: inset(0 0 0 100%); box-shadow: 0 0 0 1px rgba(58,120,255,1), 0 0 44px 4px rgba(58,120,255,.75); } 55% { clip-path: inset(0 0 0 0); box-shadow: 0 0 0 1px rgba(58,120,255,1), 0 0 36px 2px rgba(58,120,255,.6); } 100% { clip-path: inset(0 0 0 0); box-shadow: 0 14px 40px -14px rgba(0,0,0,.9), 0 0 30px -12px rgba(58,120,255,.55); } }
.co-svc.lit .co-i { animation: svcNum2 .9s ease-out both; }
@keyframes svcNum2 { 0% { background: var(--signal); color: #fff; box-shadow: 0 0 18px rgba(138,184,255,.9); } 100% { background: rgba(58,120,255,.14); color: var(--ember); box-shadow: none; } }
.leaders .svc path { stroke: var(--signal); stroke-width: 1.4; filter: drop-shadow(0 0 3px rgba(58,120,255,.8)); }
.leaders .svc .ring { stroke: var(--signal); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.leaders .svc .dot { fill: #fff; }
.leaders .svc.lit .ring { animation: svcPing 1.1s var(--out) 2; }
@keyframes svcPing { 0% { transform: scale(1); stroke-opacity: 1; } 70% { transform: scale(3.2); stroke-opacity: 0; } 100% { transform: scale(1); stroke-opacity: 1; } }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .svc-links .co-svc { padding: 10px 12px; border-left-width: 3px; }
  .svc-links .co-svc .co-i { width: 26px; height: 26px; font-size: 11px; }
  .svc-links .co-svc .co-t { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .leaders .svc.lit .ring { animation: none; } }

/* ------------------------------------------------------------------ hero service labels: map annotations, not boxes */
.co.plain { -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: 0 0 10px #0a0a0b, 0 0 3px #0a0a0b; }
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) {
  .svc-links .co-svc { display: grid; grid-template-columns: auto auto; grid-template-areas: "i t" "s s"; justify-content: start; align-items: baseline; column-gap: 10px; row-gap: 0;
    padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; clip-path: none; }
  .svc-links .co-svc.from-r { justify-content: end; text-align: right; }
  .svc-links .co-svc.lit, .svc-links .co-svc.from-r.lit { animation: none; }
  /* a soft dark halo so the words read over the contours */
  .svc-links .co-svc::before { content: ''; position: absolute; inset: -16px -26px -14px; left: -26px; top: -16px; width: auto; z-index: -1; opacity: 1; animation: none !important;
    background: radial-gradient(closest-side, rgba(10,10,11,.92), rgba(10,10,11,.72) 55%, rgba(10,10,11,0)); }
  /* the rule the leader runs into */
  .svc-links .co-svc::after { content: ''; position: absolute; left: 0; right: 0; top: 28px; width: auto; height: 1.5px; margin: 0; opacity: 1; background: var(--signal);
    box-shadow: 0 0 8px rgba(58,120,255,.9); transform-origin: left center; font-size: 0; }
  .svc-links .co-svc.from-r::after { transform-origin: right center; }
  .svc-links .co-svc .co-i { grid-area: i; display: inline; width: auto; height: auto; padding: 0; background: none; border: 0; box-shadow: none; font: 500 12px/20px var(--mono); letter-spacing: .06em; color: var(--signal); text-shadow: none; }
  .svc-links .co-svc .co-t { grid-area: t; padding-bottom: 8px; font: 650 18px/20px var(--sans); font-stretch: 90%; letter-spacing: -.012em; color: var(--bone); transition: color .2s; }
  .svc-links .co-svc .co-s { grid-area: s; margin-top: 8px; font: 400 12.5px/1.3 var(--mono); color: rgba(238,233,223,.74); }
  .svc-links .co-svc.from-r .co-s { justify-self: end; }
  .svc-links .co-svc:hover .co-t { color: #fff; }
  .svc-links .co-svc:hover::after { box-shadow: 0 0 14px rgba(138,184,255,1); background: var(--ember); }

  /* entrance: the leader draws out of the station, the rule extends, the words follow */
  .svc-links .co-svc.lit::after { animation: ruleIn .38s .36s cubic-bezier(.3,.7,.2,1) both; }
  .svc-links .co-svc.lit .co-i { animation: idxIn .9s .5s ease-out both; }
  .svc-links .co-svc.lit .co-t { animation: titleIn .45s .52s cubic-bezier(.2,.8,.2,1) both; }
  .svc-links .co-svc.from-r.lit .co-t { animation-name: titleInR; }
  .svc-links .co-svc.lit .co-s { animation: svcType .6s steps(26, end) .72s both; }
  .svc-links .co-svc.from-r.lit .co-s { animation-name: svcTypeR; }
}
@keyframes ruleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes idxIn { 0% { opacity: 0; color: #fff; text-shadow: 0 0 14px rgba(138,184,255,1); } 25% { opacity: 1; } 100% { opacity: 1; color: var(--signal); text-shadow: none; } }
@keyframes titleIn { from { opacity: 0; transform: translateY(6px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes titleInR { from { opacity: 0; transform: translateY(6px); clip-path: inset(0 0 0 100%); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes svcTypeR { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.leaders .svc path { stroke: var(--signal); stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(58,120,255,.9)); stroke-dasharray: 1; stroke-dashoffset: 0; }
.leaders .svc.lit path { animation: leadDraw .42s cubic-bezier(.4,0,.2,1) both; }
@keyframes leadDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.leaders .svc .dot { fill: #fff; r: 2.2px; }
.leaders .svc .ring { stroke: var(--signal); stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .leaders .svc.lit path { animation: none; } }
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) {
  .svc-links .co-svc { grid-template-columns: auto 1fr; }
  .svc-links .co-svc.from-r { grid-template-columns: 1fr auto; }
  .svc-links .co-svc.from-r .co-i { justify-self: end; }
  .svc-links .co-svc::before { inset: -20px -38px -18px; left: -38px; top: -20px;
    background: radial-gradient(closest-side, rgba(10,10,11,.96), rgba(10,10,11,.88) 55%, rgba(10,10,11,.5) 80%, rgba(10,10,11,0)); }
  .svc-links .co-svc .co-s { color: rgba(238,233,223,.82); }
}

/* ------------------------------------------------------------------ board: in person, bespoke */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.idea.inperson { color: var(--bone); border-color: rgba(58,120,255,.65); background: rgba(22,34,64,.94); box-shadow: 0 0 18px -6px rgba(58,120,255,.75); }
.idea.inperson::before { content: '●'; color: var(--signal); font-size: 8px; margin-right: 8px; }
.idea.inperson.picked::before { color: var(--ink); }
.board-hd .legend { display: inline-flex; align-items: center; gap: 9px; color: var(--bone); text-transform: none; letter-spacing: .02em; font-size: 12.5px; }
.board-hd .legend i { width: 14px; height: 14px; flex: none; background: rgba(22,34,64,.94); border: 1px solid rgba(58,120,255,.7); box-shadow: 0 0 10px -2px rgba(58,120,255,.8); position: relative; }
.board-hd .legend i::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--signal); }
.bf-bespoke { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; font: 500 16.5px/1.35 var(--sans); color: var(--bone); }
.bf-bespoke b { flex: none; padding: 6px 10px; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--signal); box-shadow: 0 0 18px -4px rgba(58,120,255,.9); }
.board-ft { padding-top: 16px; }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .bf-bespoke { flex-basis: 100%; align-items: flex-start; font-size: 15px; }
  .svc-intro p.board-hd { flex-wrap: wrap; }
  .board-hd span.legend { display: inline-flex !important; }
}

/* ------------------------------------------------------------------ hero: the service index, wired to the map */
.idx-hd { display: none; }
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) {
  .hero .svc-links { position: absolute; top: clamp(104px, 15vh, 160px); right: calc(var(--gut) + 44px); width: min(340px, 27vw); display: grid; gap: 2px; z-index: 2; }
  .hero .svc-links::before { content: ''; position: absolute; inset: -40px -50px -40px -70px; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(10,10,11,.9), rgba(10,10,11,.72) 55%, rgba(10,10,11,0)); }
  .idx-hd { display: block; margin: 0 0 10px; padding: 0 0 10px 14px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(238,233,223,.62); border-bottom: 1px solid rgba(58,120,255,.35); }
  .hero .svc-links .co-svc { position: relative; left: auto; top: auto; transform: none !important; opacity: 1 !important; pointer-events: auto; will-change: auto;
    display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "i t" ". s"; column-gap: 0; row-gap: 0; justify-content: stretch; text-align: left;
    padding: 10px 14px 11px 14px; background: none; border: 0; border-left: 1px solid rgba(238,233,223,.14); box-shadow: none; clip-path: none; overflow: visible; white-space: normal;
    -webkit-backdrop-filter: none; backdrop-filter: none; animation: none !important; transition: background .6s, border-color .4s; }
  .hero .svc-links .co-svc::before { content: ''; position: absolute; inset: 0; left: 0; top: 0; width: auto; z-index: -1; opacity: 0; animation: none !important;
    background: linear-gradient(90deg, rgba(58,120,255,.2), rgba(58,120,255,.05) 60%, rgba(58,120,255,0)); transition: opacity .6s; }
  .hero .svc-links .co-svc::after { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; right: auto; width: 2px; height: auto; background: var(--signal); box-shadow: 0 0 10px rgba(58,120,255,.9);
    transform: scaleY(0); transform-origin: top center; opacity: 1; animation: none !important; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
  .hero .svc-links .co-svc .co-i { grid-area: i; display: block; width: auto; height: auto; padding: 0; background: none; border: 0; box-shadow: none; text-shadow: none;
    font: 500 12px/22px var(--mono); letter-spacing: .06em; color: rgba(238,233,223,.3); animation: none !important; transition: color .4s, text-shadow .4s; }
  .hero .svc-links .co-svc .co-t { grid-area: t; padding: 0; font: 650 17px/22px var(--sans); font-stretch: 90%; letter-spacing: -.01em; color: rgba(238,233,223,.34); animation: none !important; clip-path: none; transition: color .4s; }
  .hero .svc-links .co-svc .co-s { grid-area: s; justify-self: start; margin-top: 2px; font: 400 12.5px/1.35 var(--mono); color: rgba(238,233,223,.24); animation: none !important; clip-path: none; transition: color .5s .1s; }
  .hero .svc-links .co-svc.lit::before { opacity: 1; }
  .hero .svc-links .co-svc.lit::after { transform: scaleY(1); }
  .hero .svc-links .co-svc.lit .co-i { color: var(--signal); text-shadow: 0 0 12px rgba(58,120,255,.9); }
  .hero .svc-links .co-svc.lit .co-t { color: var(--bone); animation: idxFlash .9s ease-out both !important; }
  .hero .svc-links .co-svc.lit .co-s { color: rgba(238,233,223,.8); }
  .hero .svc-links .co-svc:hover::before, .hero .svc-links .co-svc:focus-visible::before { opacity: 1; background: linear-gradient(90deg, rgba(58,120,255,.34), rgba(58,120,255,.08) 70%, rgba(58,120,255,0)); }
  .hero .svc-links .co-svc:hover .co-t, .hero .svc-links .co-svc:focus-visible .co-t { color: #fff; }
  .hero .svc-links .co-svc:hover .co-s { color: rgba(238,233,223,.9); }
}
@keyframes idxFlash { 0% { color: #fff; text-shadow: 0 0 18px rgba(138,184,255,.95); } 100% { color: var(--bone); text-shadow: 0 0 0 rgba(138,184,255,0); } }
.leaders .idx path { fill: none; stroke: var(--signal); stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(58,120,255,.85)); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .75; transition: opacity .3s, stroke-width .3s; }
.leaders .idx.lit path { animation: leadDraw .6s cubic-bezier(.4,0,.2,1) forwards; }
.leaders .idx.hot path { opacity: 1; stroke-width: 2; }
.leaders .idx .dot { fill: #fff; }
.leaders .idx .ring { fill: none; stroke: var(--signal); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: .8; }
.leaders .idx.lit .ring { animation: svcPing 1.2s var(--out) .45s 2; }
.leaders .idx.hot .ring { animation: svcPing 1s var(--out) infinite; }
@media (prefers-reduced-motion: reduce) { .leaders .idx.lit path { animation: none; stroke-dashoffset: 0; } .leaders .idx .ring { animation: none !important; } }
/* short screens: the index keeps to titles so it clears the hero's buttons */
@media (min-width: 821px) and (min-height: 501px) and (max-height: 780px), (min-width: 821px) and (pointer: fine) and (max-height: 780px) {
  .hero .svc-links { top: 96px; width: min(300px, 26vw); }
  .hero .svc-links .co-svc { padding: 7px 12px 8px 12px; grid-template-areas: "i t"; }
  .hero .svc-links .co-svc .co-s { display: none; }
  .hero .svc-links .co-svc .co-t { font-size: 15.5px; }
  .idx-hd { margin-bottom: 6px; padding-bottom: 8px; }
}

/* ------------------------------------------------------------------ works with: every major model */
.hero { padding-bottom: 104px; }
.cue { bottom: 66px; }
.works { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; gap: 18px; padding: 0 var(--gut); z-index: 3;
  background: linear-gradient(0deg, rgba(10,10,11,.96), rgba(10,10,11,.78)); border-top: 1px solid rgba(58,120,255,.35); }
.works-k { flex: none; padding: 6px 10px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--signal); box-shadow: 0 0 16px -4px rgba(58,120,255,.9); }
.works-v { flex: 1; min-width: 0; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent); }
.works-t { flex: none; display: flex; align-items: center; margin: 0; padding: 0; list-style: none; animation: lane 70s linear infinite; }
.works:hover .works-t { animation-play-state: paused; }
.works-t li { white-space: nowrap; padding: 0 16px; font: 600 15px/1 var(--sans); font-stretch: 92%; color: var(--bone); position: relative; }
.works-t li::after { content: ''; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: rgba(58,120,255,.8); }
.works-all { flex: none; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--signal); padding: 4px 0; }
.works-all:hover { color: #fff; }

.models { margin-top: 70px; padding: 34px 36px 30px; border: 2px solid var(--ink); background: var(--ink); color: var(--bone); }
.models .ex-k { color: rgba(238,233,223,.6); }
.models .ex-t { color: var(--bone); margin-bottom: 12px; }
.models-hd p:not(.ex-k) { margin: 0 0 26px; max-width: 640px; font-size: 16.5px; color: rgba(238,233,223,.82); }
.models-g { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.9fr; gap: 30px; border-top: 1px solid rgba(238,233,223,.16); padding-top: 22px; }
.mg h4 { margin: 0 0 4px; font: 700 18px/1.2 var(--sans); font-stretch: 90%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-off { font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--signal); padding: 4px 7px; }
.mg-n { margin: 0 0 14px; font-size: 13px; line-height: 1.4; color: rgba(238,233,223,.6); }
.mg-v { margin: 12px 0 6px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ember); }
.mg-l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mg-l li { padding: 6px 10px; font: 600 14px/1.1 var(--sans); color: var(--bone); background: rgba(238,233,223,.06); border: 1px solid rgba(238,233,223,.16); }
.models-ft { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid rgba(238,233,223,.16); font-size: 15px; color: rgba(238,233,223,.85); }
@media (max-width: 1100px) { .models-g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .hero { padding-bottom: 40px; }
  .works { position: relative; grid-row: 6; margin: 30px calc(var(--gut) * -1) 0; }
  .works-all { display: none; }
  .works-t li { font-size: 14px; }
  .models { padding: 22px 18px; margin-top: 50px; }
  .models-g { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) { .works-t { animation: none; } .works-t[aria-hidden] { display: none; } }

/* models: six groups, the frontier group spans the full first row */
.models-count { margin: -4px 0 14px !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ember) !important; }
.models-g { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
.mg.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr; column-gap: 30px; align-items: start; }
.mg.wide h4, .mg.wide .mg-n { grid-column: 1; }
.mg.wide .mg-v, .mg.wide .mg-l { grid-column: 2; }
.mg.wide .mg-v { margin: 0 0 6px; }
.mg.wide .mg-l { margin-bottom: 12px; }
.mg.wide h4 { grid-row: 1; } .mg.wide .mg-n { grid-row: 2; }
@media (max-width: 1100px) { .models-g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) { .models-g { grid-template-columns: 1fr; } .mg.wide { display: block; } .mg.wide .mg-v { margin: 12px 0 6px; } }

/* models: headings only, no explainer notes */
.mg h4 { margin-bottom: 12px; }
.mg.wide h4 { margin-bottom: 0; }
.mg.wide .mg-ps { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 16px 34px; }
.mg.wide .mg-p .mg-v { margin: 0 0 7px; }
.mg.wide .mg-p .mg-l { margin: 0; }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) { .mg.wide .mg-ps { margin-top: 12px; gap: 12px 20px; } }
.mg-l li .soon { margin-left: 6px; padding: 2px 5px; font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--ember); vertical-align: 1px; }

/* ------------------------------------------------------------------ audit round: examples, calmer hero, compact catalogue */
.ch-card > p.ch-ex { margin: 0 0 18px; padding: 2px 0 2px 12px; border-left: 2px solid rgba(238,233,223,.25); font-size: 15px; line-height: 1.45; color: rgba(238,233,223,.88); }
.ch-ex span { display: block; margin-bottom: 4px; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(238,233,223,.55); }
.board-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -4px 0 12px; font: 500 15px/1.35 var(--sans); color: var(--bone); }
.board-view { flex: none; background: none; border: 1px solid rgba(58,120,255,.5); color: var(--bone); padding: 7px 12px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.board-view:hover, .board-view[aria-pressed="true"] { border-color: var(--signal); background: rgba(58,120,255,.14); }
.svc-board.static .lane-t { animation: none !important; flex: 1; flex-wrap: wrap; row-gap: 8px; padding: 0; }
.svc-board.static .lane-t[aria-hidden] { display: none; }
.svc-board.static .lane-v { overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* as a list the board is a long page: it starts at the top of the section, and the heading beside it stays in view while the list is read */
@media (min-width: 821px) {
  .svc-intro:has(.svc-board.static) { align-items: start; padding-top: 104px; padding-bottom: 60px; }
  .svc-intro:has(.svc-board.static) .svc-intro-in { position: sticky; top: 104px; }
  .svc-intro:has(.svc-board.static) .svc-hint { display: none; }
}
.models.collapsed .mg:not(.wide) .mg-l li:nth-child(n+4) { display: none; }
.models.collapsed .mg:not(.wide) .mg-l[data-more]::after { content: attr(data-more); align-self: center; padding: 0 4px; font: 500 12px/1 var(--mono); color: rgba(238,233,223,.55); }
.models-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; background: none; border: 1px solid rgba(238,233,223,.3); color: var(--bone); padding: 11px 16px; font: 600 15px/1 var(--sans); cursor: pointer; }
.models-more:hover { border-color: var(--signal); }
.models-more span { color: var(--signal); }
.models-more[hidden] { display: none; }
.measures { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: -2px 0 22px; }
.measures > span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
.measures ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.measures li { padding: 7px 11px; font: 600 14px/1 var(--sans); color: var(--bone); border: 1px solid rgba(58,120,255,.5); background: rgba(22,34,64,.6); }
.ct-who { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.who-av { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px dashed rgba(238,233,223,.4); background: rgba(238,233,223,.05); }
.ct-who p { margin: 0 !important; font-size: 15px !important; color: rgba(238,233,223,.8) !important; }
.ct-who b { color: var(--bone); font-weight: 650; }
/* hero: only the newest index line is bright; older ones settle back until hovered */
.leaders .idx.lit path { opacity: .3; transition: opacity .8s; }
.leaders .idx.now path, .leaders .idx.hot path { opacity: 1; }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .ch-card > p.ch-ex { font-size: 13.5px; margin-bottom: 10px; }
  .ch-card > p.ch-stat { display: none; }
  .svc-private .sp-list { display: none; }
  .svc-private p:not(.sp-k) { font-size: 15px !important; }
  .board-intro { flex-wrap: wrap; font-size: 14px; }
  .hdr > .btn-sm { position: relative; }
  .hdr > .btn-sm .pick-badge { position: absolute; top: -8px; right: -8px; margin: 0; box-shadow: 0 0 0 2px var(--signal); }
  .ct-more { display: none; }
  .contact h2 { font-size: clamp(38px, 11vw, 52px); margin-bottom: 16px; }
  .ct-who { margin-top: 14px; }
  .who-av { width: 38px; height: 38px; }
  .ct-who p { font-size: 13.5px !important; }
}
/* short desktop screens (laptops): the service card must clear the step strip at every stop */
@media (min-width: 821px) and (min-height: 501px) and (max-height: 800px), (min-width: 821px) and (pointer: fine) and (max-height: 800px) {
  .ch-card { top: 80px; padding: 18px 24px 18px; }
  .ch-hd { padding-bottom: 10px; margin-bottom: 12px; }
  .ch-card h3 { font-size: clamp(28px, 2.4vw, 36px); margin-bottom: 6px; }
  .ch-st { font-size: 17px; margin-bottom: 10px; }
  .ch-card > p.ch-get { padding: 9px 12px 10px; font-size: 15px; margin-bottom: 12px; }
  .ch-get span { margin-bottom: 5px; }
  .ch-card > p.ch-ex { font-size: 14px; margin-bottom: 12px; }
  .ch-card > p.ch-off { margin: -4px 0 12px; padding: 8px 10px; font-size: 13px; }
  .ch-card > p.ch-note { margin: -4px 0 12px; }
}
@media (min-width: 821px) and (min-height: 501px) and (max-height: 720px), (min-width: 821px) and (pointer: fine) and (max-height: 720px) {
  .ch-card > p.ch-stat { display: none; }
}
/* short desktop screens: the ideas board fits one stop */
@media (min-width: 821px) and (min-height: 501px) and (max-height: 800px), (min-width: 821px) and (pointer: fine) and (max-height: 800px) {
  .blane { padding: 3px 0; }
  .lane-rows { gap: 5px; }
  .idea { padding: 6px 11px; font-size: 13.5px; }
  .lane-k { padding: 7px 10px; font-size: 14px; }
  .svc-intro p.board-hd { margin-bottom: 8px; padding-bottom: 8px; }
  .board-intro { margin: -2px 0 8px; font-size: 14px; }
  .board-ft { margin-top: 8px; padding-top: 10px; }
  .bf-bespoke { font-size: 15px; }
}

/* ------------------------------------------------------------------ before → after: the old bottleneck struck out, the fix in green */
:root { --fix: #43e08c; }
.co.chg { grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: baseline; }
.co.chg .co-new { display: none; grid-column: 2; }
.co.chg .co-s { background-image: linear-gradient(rgba(238,233,223,.9), rgba(238,233,223,.9)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 1.5px; transition: color .5s, opacity .5s; }
/* in the machine: a line strikes the old way out */
.co.chg.is-fixing .co-s, .co.chg.is-fixed .co-s { color: rgba(238,233,223,.62); }
.co.chg.is-fixing .co-s { animation: strike .75s .35s cubic-bezier(.6,0,.3,1) forwards; }
.co.chg.is-fixed .co-s { background-size: 100% 1.5px; }
@keyframes strike { to { background-size: 100% 1.5px; } }
/* out of the machine: the new way, in green */
.co.chg.is-fixed .co-t { color: var(--fix); text-shadow: 0 0 12px rgba(67,224,140,.45), 0 0 3px #0a0a0b; }
.co.chg.is-fixed .co-new { display: block; color: var(--fix); font-weight: 500; text-shadow: 0 0 14px rgba(67,224,140,.35), 0 0 3px #0a0a0b; animation: fixIn .7s .1s cubic-bezier(.2,.8,.2,1) both; }
.co.chg.is-fixed .co-new::before { content: '✓ '; }
@keyframes fixIn { from { clip-path: inset(0 100% 0 0); transform: translateY(4px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.co.chg.is-fixing .co-t { color: var(--signal); }
.co.chg.is-fixing .co-t::after { content: ' · fixing'; color: rgba(238,233,223,.6); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.co.hot.chg.is-fixed { border-color: rgba(67,224,140,.55); box-shadow: 0 0 24px -8px rgba(67,224,140,.6); }
@media (prefers-reduced-motion: reduce) { .co.chg.is-fixing .co-s { animation: none; background-size: 100% 1.5px; } }

/* ------------------------------------------------------------------ every section fits one screen: big headings respect the height too */
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) {
  .svc-intro { grid-template-columns: minmax(0, clamp(360px, 34vw, 600px)) minmax(0, 1fr); }
  .svc-intro h2 { font-size: clamp(40px, min(6.4vw, 9.2vh), 118px); margin-bottom: 18px; }
  .contact h2 { font-size: clamp(38px, min(5.6vw, 9.5vh), 100px); }
  .finale h2 { font-size: clamp(34px, min(4.4vw, 7.4vh), 76px); }
  .svc-private { margin: 22px 0 18px; }
}
@media (min-width: 821px) and (min-height: 501px) and (max-height: 860px), (min-width: 821px) and (pointer: fine) and (max-height: 860px) {
  .svc-private .sp-list { display: none; }
  .svc-private h3 { font-size: 20px; }
  .svc-private p:not(.sp-k) { font-size: 15px !important; }
  .svc-intro .eyebrow { margin-bottom: 14px; }
  .svc-hint { margin-top: 0 !important; }
}
@media (min-width: 821px) and (min-height: 501px) and (max-height: 700px), (min-width: 821px) and (pointer: fine) and (max-height: 700px) {
  .svc-hint { display: none; }
  .measures { margin-bottom: 14px; }
  .fin-stats li { padding-top: 12px; padding-bottom: 12px; }
}

/* ------------------------------------------------------------------ Codex pass */
/* 1. the side navigation only catches the pointer on its own marks, and content keeps out of its gutter */
.rail a { position: relative; width: 34px; }
.rail span { position: absolute; right: 42px; top: 50%; transform: translate(6px, -50%); pointer-events: none; }
.rail a:hover span, .rail a:focus-visible span { transform: translate(0, -50%); }
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) { .svc-intro, .contact { padding-right: calc(var(--gut) + 56px); } }
/* 3. what you can pick always shows it; what's just information stays quiet */
.idea::after { width: 10px; margin-left: 9px; opacity: .55; }
.idea:hover::after, .idea:focus-visible::after { opacity: 1; }
.mg-l li { background: none; border: 0; border-bottom: 1px solid rgba(238,233,223,.14); padding: 5px 2px; font-weight: 500; color: rgba(238,233,223,.9); }
.mg-l { gap: 4px 14px; }
.measures li { border: 0; background: none; padding: 0; font-weight: 600; color: var(--bone); }
.measures li + li::before { content: '·'; margin-right: 10px; color: var(--signal); }
.measures ul { gap: 6px 10px; }
/* 4. scope line */
.ch-card > p.ch-scope { margin: -6px 0 14px; font-size: 12.5px; line-height: 1.5; letter-spacing: .01em; color: rgba(238,233,223,.62); }
@media (min-width: 821px) and (min-height: 501px) and (max-height: 800px), (min-width: 821px) and (pointer: fine) and (max-height: 800px) { .ch-card > p.ch-scope { margin: -4px 0 10px; font-size: 12px; } }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) { .ch-card > p.ch-scope { display: none; } }
/* short screens: the three figures sit in one row so "Why AI" fits one stop */
@media (min-width: 821px) and (min-height: 501px) and (max-height: 800px), (min-width: 821px) and (pointer: fine) and (max-height: 800px) {
  .fin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fin-stats li.lead { grid-column: auto; }
  .fin-stats li.lead b { font-size: clamp(40px, 4.2vw, 64px); }
  .fin-stats li.lead span { font-size: 15px; }
  .fin-stats li { padding: 14px 16px 14px 16px; border-right: 1px solid var(--hair); }
  .fin-stats li:first-child { padding-left: 0; }
  .fin-stats li:last-child { border-right: 0; }
  .fin-in { max-width: 860px; }
}
/* very short screens (small 720p laptops) */
@media (min-width: 821px) and (min-height: 501px) and (max-height: 660px), (min-width: 821px) and (pointer: fine) and (max-height: 660px) {
  .blane { padding: 2px 0; }
  .lane-rows { gap: 4px; }
  .idea { padding: 5px 10px; font-size: 13px; }
  .lane-k { padding: 6px 9px; font-size: 13.5px; }
  .svc-intro p.board-hd { margin-bottom: 6px; padding-bottom: 6px; }
  .board-intro { margin: -2px 0 6px; font-size: 13.5px; }
  .board-ft { margin-top: 6px; padding-top: 8px; }
  .bf-bespoke { font-size: 14px; }
  .svc-private { padding: 14px 16px 12px; margin: 16px 0 12px; }
  .svc-private p:not(.sp-k) { margin-bottom: 6px !important; }
}

/* ------------------------------------------------------------------ the tally: bottlenecks cleared, and a faint trail of the fixes */
.tally { display: none; }
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) {
  .tally { display: block; margin-top: 14px; padding: 12px 0 0 14px; border-top: 1px solid rgba(67,224,140,.28); opacity: 0; transition: opacity .9s; pointer-events: none; }
  .tally.on { opacity: 1; }
  .tally-n { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 500 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(238,233,223,.58); }
  .tally-n b { font: 800 26px/1 var(--sans); font-stretch: 85%; letter-spacing: -.01em; color: var(--fix); text-shadow: 0 0 16px rgba(67,224,140,.35); font-variant-numeric: tabular-nums; }
  .tally-n b.bump { animation: ideaPop .45s var(--out); }
  .tally ul { list-style: none; margin: 8px 0 0; padding: 0; }
  .tally li { font: 400 12.5px/1.55 var(--mono); color: var(--fix); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: tallyIn .7s cubic-bezier(.2,.8,.2,1) both; }
  .tally li::before { content: '✓ '; }
  .tally li:nth-child(1) { opacity: .85; } .tally li:nth-child(2) { opacity: .5; } .tally li:nth-child(3) { opacity: .32; }
  .tally li:nth-child(4) { opacity: .2; } .tally li:nth-child(5) { opacity: .1; }
  @keyframes tallyIn { from { transform: translateY(-8px); opacity: 0; } }
}
@media (min-width: 821px) and (min-height: 501px) and (max-height: 800px), (min-width: 821px) and (pointer: fine) and (max-height: 800px) { .tally li:nth-child(n+4) { display: none; } .tally-n b { font-size: 22px; } .tally { margin-top: 10px; padding-top: 8px; } }
@media (min-width: 821px) and (min-height: 501px) and (max-height: 660px), (min-width: 821px) and (pointer: fine) and (max-height: 660px) { .tally li:nth-child(n+3) { display: none; } }
/* the before → after label stacks: title, the struck-out problem, the fix */
.co.chg { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
.co.chg .co-new { grid-column: 1; }
.tally ul { transition: opacity .5s; }
.tally.tally.yield { opacity: 0; transition: opacity .25s; }

/* the side navigation steps aside over the footer */
.rail.gone { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ phones: tap targets, small labels, sideways */
@media (pointer: coarse) {
  /* source links and footer links get a finger-sized hit area without changing how they look */
  .fin-stats cite a, .ch-stat cite a, .ch-card cite a { display: inline-block; padding: 7px 0; margin: -7px 0; }
  .ftr a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .ftr-nav { row-gap: 22px; }
  .board-view { min-height: 40px; }
  .rail a { height: 30px; } /* tablets: the section marks are tapped, not hovered */
}
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .ch-hd { font-size: 11px; }
}
/* a phone on its side: the phone layout, kept to a readable width */
@media (max-height: 500px) and (pointer: coarse) and (min-width: 560px) {
  .hero { min-height: auto; padding-top: 84px; }
  .hero-title { font-size: clamp(40px, 8vw, 64px); }
  .hero .lede, .svc-intro-in, .svc-board, .ch-card, .fin, .contact-in { max-width: 600px; }
  .svc-links { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; }
  .ch { min-height: 150vh; padding-top: 120px; }
}
/* phones: lanes rise into place instead of sliding in from the right (nothing ever sits past the screen edge) */
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .blane { transform: translateY(12px); }
  .svc-board.in .blane { transform: none; }
}
/* a phone on its side: a slimmer header leaves more of the short screen for content */
@media (max-height: 500px) and (pointer: coarse) and (min-width: 560px) {
  .hdr { padding-top: 8px; padding-bottom: 8px; }
  .hdr > .btn-sm, .menu { min-height: 40px; }
}

/* ------------------------------------------------------------------ every stage welcome: from “what’s AI?” to “it almost works” */
.hero-foot { row-gap: 16px; }
.hero-for { flex-basis: 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(238,233,223,.62); animation: heroFor .9s 2.1s both; }
@keyframes heroFor { from { opacity: 0; transform: translateY(6px); } }
.hero-for span { color: var(--ember); }
.hero-for a { color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(58,120,255,.55); padding: 2px 0; transition: color .2s, border-color .2s; }
.hero-for a:hover, .hero-for a:focus-visible { color: #fff; border-color: var(--signal); }
.hero-for a + a::before { content: '·'; margin-right: 18px; color: var(--signal); display: inline-block; }

.stages { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 104px var(--gut) 64px; }
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) { .stages { padding-right: calc(var(--gut) + 56px); } }
.stages-in { width: 100%; max-width: 1500px; }
.stages-hd { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: clamp(22px, 4.2vh, 46px); }
.stages .eyebrow { grid-column: 1 / -1; margin: 0; }
.stages h2 { font-weight: 820; font-size: clamp(38px, min(4.8vw, 8.6vh), 88px); line-height: .92; letter-spacing: -.035em; font-stretch: 80%; margin: 0; }
.stages-hd > p:not(.eyebrow) { margin: 0; max-width: 540px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: rgba(238,233,223,.84); }

.stg-track { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* the line the four stages sit on, drawn in as it arrives, with a pulse travelling along it */
.stg-track::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: linear-gradient(90deg, var(--signal), rgba(58,120,255,.5) 60%, rgba(58,120,255,.12)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--out); }
.stages.in .stg-track::before { transform: none; }
.stg-track::after { content: ''; position: absolute; top: 5px; left: 0; width: 70px; height: 7px; border-radius: 4px; background: radial-gradient(closest-side, rgba(138,184,255,.95), rgba(58,120,255,0)); opacity: 0; }
.stages.in .stg-track::after { animation: stgPulse 5.5s 1.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes stgPulse { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 70px); opacity: 0; } }

.stg { position: relative; padding-top: 28px; opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .8s var(--out); transition-delay: calc(var(--k) * 140ms + 250ms); }
.stages.in .stg { opacity: 1; transform: none; }
.stg::before { content: ''; position: absolute; top: 2px; left: 0; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--signal); background: var(--ink); box-shadow: 0 0 0 4px rgba(10,10,11,.9); transition: background .3s, box-shadow .3s; }
.stg-card { height: 100%; display: flex; flex-direction: column; padding: 20px 22px 18px; background: rgba(10,10,11,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--hair); transition: border-color .3s, transform .45s var(--out), box-shadow .3s; }
.stg:hover .stg-card { border-color: var(--hair2); transform: translateY(-3px); }
.stg-k { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(238,233,223,.7); }
.stg-k b { font-weight: 500; color: var(--signal); }
/* what people actually say, as a message */
.stg-q { position: relative; margin: 0 0 16px; padding: 10px 12px; font: 400 13px/1.45 var(--mono); color: var(--ember); background: rgba(58,120,255,.08); border: 1px solid rgba(58,120,255,.22); border-radius: 2px 10px 10px 10px; }
.stg h3 { margin: 0 0 8px; font-weight: 800; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.05; letter-spacing: -.02em; font-stretch: 85%; }
.stg-p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: rgba(238,233,223,.8); }
.stg-first { margin: auto 0 14px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 11.5px; line-height: 1.45; color: var(--bone); }
.stg-first span { display: block; margin-bottom: 3px; letter-spacing: .08em; text-transform: uppercase; color: rgba(238,233,223,.5); }
.stg-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stg-pick { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 14px; background: transparent; color: var(--bone); border: 1px solid rgba(58,120,255,.6); border-radius: 2px; font: 600 14px/1 var(--sans); cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.stg-pick i { position: relative; width: 10px; height: 10px; flex: none; }
.stg-pick i::before, .stg-pick i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s var(--out); }
.stg-pick i::after { transform: translate(-50%, -50%) rotate(90deg); }
.stg-pick:hover { background: rgba(58,120,255,.14); border-color: var(--signal); }
.stg-how { font: 500 13.5px/1.2 var(--sans); color: rgba(238,233,223,.75); text-decoration: none; border-bottom: 1px solid var(--hair2); padding: 6px 0; }
.stg-how:hover, .stg-how:focus-visible { color: var(--bone); border-color: var(--signal); }
/* picked: it is in the enquiry */
.stg.picked::before { background: var(--signal); box-shadow: 0 0 0 4px rgba(10,10,11,.9), 0 0 16px rgba(58,120,255,.9); }
.stg.picked .stg-card { border-color: var(--signal); box-shadow: 0 0 34px -12px rgba(58,120,255,.8); }
.stg.picked .stg-pick { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.stg.picked .stg-pick i::before { width: 5px; transform: translate(-95%, 0) rotate(45deg); }
.stg.picked .stg-pick i::after { width: 10px; transform: translate(-35%, -40%) rotate(-50deg); }
.stg.flash .stg-card { animation: stgFlash 1.4s var(--out); }
@keyframes stgFlash { 0%, 30% { border-color: var(--signal); box-shadow: 0 0 40px -8px rgba(58,120,255,.9); } }

/* short laptop screens: the same content, tighter */
@media (min-width: 821px) and (min-height: 501px) and (max-height: 800px), (min-width: 821px) and (pointer: fine) and (max-height: 800px) {
  .stages { padding-top: 88px; padding-bottom: 32px; }
  .stages-hd { margin-bottom: 18px; }
  .stages-hd > p:not(.eyebrow) { font-size: 15.5px; }
  .stg { padding-top: 24px; }
  .stg-card { padding: 16px 18px 14px; }
  .stg-k { margin-bottom: 10px; }
  .stg-q { margin-bottom: 12px; padding: 8px 10px; font-size: 12.5px; }
  .stg-p { font-size: 14px; margin-bottom: 10px; }
  .stg-first { margin-bottom: 10px; padding-top: 8px; }
}
@media (min-width: 821px) and (min-height: 501px) and (max-height: 680px), (min-width: 821px) and (pointer: fine) and (max-height: 680px) {
  .hero-for { display: none; }
  .stages .eyebrow { display: none; }
  .stg-first { display: none; }
  .stg-p { margin-bottom: 12px; }
}
/* narrower desktops and tablets: two by two */
@media (max-width: 1180px) {
  .stg-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stg-track::before, .stg-track::after { display: none; }
  .stg { padding-top: 0; }
  .stg::before { display: none; }
  .stages-hd { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 821px) and (max-width: 1180px) and (max-height: 900px) { .stg-q { display: none; } .stg-first { display: none; } }
/* phones: one column on a line down the left */
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .hero-for { order: 3; margin: 0; font-size: 11px; gap: 8px 14px; }
  .hero-for span { flex-basis: 100%; }
  .hero-for a + a::before { margin-right: 14px; }
  .stages { min-height: auto; padding: 72px var(--gut) 56px; }
  .stages h2 { font-size: clamp(34px, 10vw, 60px); }
  .stages-hd { margin-bottom: 26px; }
  .stg-track { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-left: 26px; }
  .stg-track::before { display: block; left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--signal), rgba(58,120,255,.15)); }
  .stages.in .stg-track::before { transform: none; }
  .stg-track::after { display: none; }
  .stg::before { display: block; left: -26px; top: 20px; }
  .stg-card { padding: 16px 16px 14px; }
  .stg-first { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stg { opacity: 1; transform: none; }
  .hero-for { animation: none; }
  .stg-track::before { transform: none; }
  .stages.in .stg-track::after { animation: none; }
}
.stages h2 .hot { white-space: nowrap; }
/* buttons line up across the four cards whatever the text length */
.stg-p { flex-grow: 1; }
.stg-first { margin-top: 0; }
/* phones: the stage links become small tags (no separators left dangling at a line start), and the cards lose the secondary line */
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .hero-for { gap: 8px; }
  .hero-for a { padding: 6px 9px; border: 1px solid rgba(58,120,255,.45); background: rgba(10,10,11,.55); }
  .hero-for a + a::before { display: none; }
  .stg-first { display: none; }
}
.stages-hd > p:not(.eyebrow), .stages h2 { text-shadow: 0 0 14px #0a0a0b, 0 0 4px #0a0a0b; }

/* ------------------------------------------------------------------ audit: fallbacks and contrast */
/* scripts never ran: show every block that normally waits for them */
.fallback .hero-title .w, .fallback .hero .reveal, .fallback .ch-card, .fallback .blane, .fallback .stg, .fallback .step { opacity: 1 !important; transform: none !important; }
.fallback .hero .svc-links .co-svc .co-t, .fallback .hero .svc-links .co-svc .co-i { color: var(--bone) !important; }
.fallback .hero .svc-links .co-svc .co-s { color: rgba(238,233,223,.7) !important; }
/* small blue text on the paper plate needs a deeper blue to read (4.5:1) */
:root { --signal-ink: #2a56c6; }
.start-steps li::before, .faq summary::after { color: var(--signal-ink); }
/* placeholders and step numbers that fell under 4.5:1 */
.prompt input::placeholder, .prompt textarea::placeholder { color: rgba(238,233,223,.55); }
.proc li i { color: rgba(238,233,223,.6); }

/* ------------------------------------------------------------------ what it takes: a panel that opens beside each service card */
.ch-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px; }
.ch-moreb { display: inline-flex; align-items: center; gap: 9px; padding: 8px 0; background: none; border: 0; border-bottom: 1px solid var(--hair2); color: rgba(238,233,223,.82); font: 550 15px/1.2 var(--sans); cursor: pointer; transition: color .2s, border-color .2s; }
.ch-moreb:hover, .ch-moreb[aria-expanded="true"] { color: var(--bone); border-color: var(--signal); }
.ch-moreb i { position: relative; width: 10px; height: 10px; }
.ch-moreb i::before, .ch-moreb i::after { content: ''; position: absolute; left: 0; top: 4px; width: 10px; height: 1.5px; background: var(--signal); transition: transform .3s var(--out); }
.ch-moreb i::after { transform: rotate(90deg); }
.ch-moreb[aria-expanded="true"] i::after { transform: rotate(0deg); }
.ch-more { position: absolute; left: calc(100% + 14px); top: -1px; width: min(360px, 30vw); padding: 22px 24px 24px; background: rgba(10,10,11,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--hair2); border-left: 2px solid var(--signal); box-shadow: 0 0 40px -14px rgba(58,120,255,.7); animation: cmIn .5s var(--out) both; z-index: 2; }
@keyframes cmIn { from { opacity: 0; transform: translateX(-14px); } }
.ch-card > .ch-more .cm-k { margin: 18px 0 8px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
.ch-card > .ch-more .cm-k:first-child { margin-top: 0; }
.ch-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ch-more li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.4; color: var(--bone); }
.ch-more li::before { content: '→'; position: absolute; left: 0; color: var(--signal); }
.ch-more .cm-hold li::before { content: '◷'; font-size: 12px; top: 2px; }
.ch-card > .ch-more .cm-first { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--bone); }
/* while a panel is open, the scene's own labels step back so the two don't compete */
body.detail-open .callouts .step, body.detail-open .leaders g:not(.idx) { opacity: .1 !important; transition: opacity .3s; }
/* short laptop screens: tighter */
@media (min-width: 821px) and (min-height: 501px) and (max-height: 800px), (min-width: 821px) and (pointer: fine) and (max-height: 800px) {
  .ch-more { padding: 16px 18px 18px; } .ch-card > .ch-more .cm-k { margin: 12px 0 6px; } .ch-more li, .ch-card > .ch-more .cm-first { font-size: 13.5px; } .ch-more ul { gap: 5px; }
}
/* phones: the panel opens inside the card */
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .ch-more { position: static; width: auto; margin-top: 12px; padding: 14px 14px 16px; box-shadow: none; animation: none; }
  .ch-moreb { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .ch-more { animation: none; } }
/* the stages section reads against a calmed scene: a soft wash, feathered top and bottom, so machines don't poke out behind the cards */
.stages::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,.74) 16%, rgba(10,10,11,.8) 84%, rgba(10,10,11,0) 100%); }
.stages-in { position: relative; }
/* while "What it takes" is open, every scene label steps back, not just the step label */
body.detail-open .callouts .co:not(.co-svc) { opacity: .08 !important; transition: opacity .3s; }
/* the hero's stage line stays readable over the bright contour lines */
.hero-for { text-shadow: 0 0 10px #0a0a0b, 0 0 4px #0a0a0b, 0 0 2px #0a0a0b; }
.fin-stats b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ small flair */
/* a picked stage sends a spark to the header's call button, which catches it */
.spark { position: fixed; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(58,120,255,.9), 0 0 22px 6px rgba(58,120,255,.8); pointer-events: none; z-index: 60; }
#hdrCall.caught { animation: caught .6s var(--out); }
@keyframes caught { 0% { box-shadow: 0 0 0 0 rgba(138,184,255,.9); } 100% { box-shadow: 0 0 0 16px rgba(138,184,255,0); } }
/* the full tools list cascades in when opened */
.models.opened .mg-l li { animation: chipIn .45s var(--out) both; animation-delay: calc(var(--i, 0) * 9ms); }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px); } }
/* FAQ answers ease open */
.faq details[open] p { animation: faqIn .4s var(--out) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .models.opened .mg-l li, .faq details[open] p, #hdrCall.caught { animation: none; } }

/* ------------------------------------------------------------------ the hero at every window size */
/* the stage line wraps before it reaches the service index */
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) {
  .hero-for { max-width: calc(100% - min(340px, 27vw) - 96px); }
  /* the tally only shows when there is clear room under the index (measured in the page) */
  .tally.crowded { visibility: hidden; }
}
/* narrower desktop windows: the index drops its second lines so it stays clear of the headline and buttons */
@media (min-width: 821px) and (max-width: 1179px) {
  .hero .svc-links .co-svc .co-s { display: none; }
  .hero .svc-links { width: min(300px, 30vw); }
}
@media (min-width: 821px) and (max-width: 1179px) { .tally { display: none; } }
/* the stage line's dots trail each item, so a wrapped row never starts with one */
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) {
  .hero-for a + a::before { display: none; }
  .hero-for a:not(:last-child)::after { content: '·'; margin-left: 18px; color: var(--signal); display: inline-block; }
  .hero-for { gap: 6px 0; } .hero-for span { margin-right: 18px; } .hero-for a { margin-right: 18px; border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(58,120,255,.55); text-underline-offset: 4px; }
}
/* ------------------------------------------------------------------ every desktop window size */
/* service cards sit a little higher and tighter so the tallest never reaches the process strip along the bottom */
@media (min-width: 821px) and (min-height: 501px), (min-width: 821px) and (pointer: fine) {
  .ch-card { top: max(92px, calc(50vh - 345px)); }
  #assistants .ch-scope { display: none; } /* it repeats the "you get" line on this card */
}
@media (min-width: 821px) and (max-width: 1179px) {
  .ch-card { width: min(470px, 46vw); }
  .ch-card > p.ch-scope { display: none; }
}
/* contact keeps its two columns on narrower desktop windows, so it still fits one screen */
@media (min-width: 880px) and (max-width: 1100px) {
  .contact-in { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 34px; }
  .contact h2 { font-size: clamp(34px, 5vw, 56px); }
  .contact .ct-more { display: none; }
}

/* phones: nothing a visitor has to read sits under 12px (labels were 10–11.5px) */
@media (max-width: 820px) {
  .ch-ex, .ch-get, .ch-stat cite, .ch-stat cite a, .proof cite a, .fin-note, .ftr-note, .note.mono, .hero-for, .stg-k, .works-k, .co-t, .ch-hd, .lane-tog, .bf-bespoke, .mg-v, .mg-off, .proc-hd, .s-k { font-size: 12px; }
}


/* ------------------------------------------------------------------ how we work: three drawn figures, joined by the route */
.paper-in { padding-top: 96px; padding-bottom: 110px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(22px, 2.6vw, 44px); margin-top: 52px; }
.steps > .step { display: block; padding: 0; border: 0; opacity: 0; transform: translateY(18px); transition: opacity .7s var(--out), transform .9s var(--out); }
.steps > .step.in { opacity: 1; transform: none; }
.steps > .step:nth-child(2) { transition-delay: .25s; } .steps > .step:nth-child(3) { transition-delay: .5s; }
.ill-w { position: relative; margin: 0 0 22px; border: 1px solid rgba(10,10,11,.55); background: rgba(255,255,255,.22); }
.ill-w::before, .ill-w::after { content: ''; position: absolute; width: 10px; height: 10px; border: 0 solid var(--ink); }
.ill-w::before { left: -5px; top: -5px; border-width: 1.5px 0 0 1.5px; } .ill-w::after { right: -5px; bottom: -5px; border-width: 0 1.5px 1.5px 0; }
.ill { display: block; width: 100%; height: auto; }
.ill .d { fill: none; stroke: rgba(10,10,11,.78); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--out); }
.ill .d.hot { stroke: var(--signal); stroke-width: 2.2; transition-duration: 1.2s; }
.steps > .step.in .ill .d { stroke-dashoffset: 0; }
.steps > .step.in .ill .d.hot { transition-delay: .9s; }
.ill text { font: 500 10.5px var(--mono); fill: #3d3a36; letter-spacing: .02em; }
.ill .t, .ill .cap, .ill .ok { opacity: 0; transition: opacity .6s .7s; }
.steps > .step.in .ill .t, .steps > .step.in .ill .cap, .steps > .step.in .ill .ok { opacity: 1; }
.ill .hot text, .ill text.ok { fill: var(--signal); font-weight: 600; }
.ill .cap { font-size: 9.5px; fill: #6d6861; letter-spacing: .08em; }
.ill .lens { opacity: 0; transition: opacity .4s 1.4s; }
.steps > .step.in .ill .lens { opacity: 1; animation: lens 5s 1.6s ease-in-out infinite; }
.ill .lens .d { stroke-width: 2; }
@keyframes lens { 0%, 100% { transform: translate(180px, 60px); } 45%, 55% { transform: translate(180px, 160px); } }
.ill .mod { opacity: 0; transform: translateY(-34px); transition: opacity .5s .3s, transform .8s .3s var(--out); }
.steps > .step.in .ill .mod { opacity: 1; transform: none; }
.ill .mod .fill { fill: var(--signal); }
.ill .mod text { fill: var(--bone); font-size: 12px; font-weight: 600; }
.ill .pk rect { fill: var(--signal); }
.ill .pk { opacity: 0; }
.steps > .step.in .ill .pk { opacity: 1; animation: pk 1.6s 2s linear infinite; }
@keyframes pk { from { transform: translateY(0); } to { transform: translateY(46px); } }
.ill .live { fill: var(--signal); }
.steps > .step.in .ill .live { animation: live 1.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: .25; } }
.step-hd { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 0 14px; margin-bottom: 12px; }
.step-hd .tick { margin: 0 0 6px; width: 24px; height: 24px; }
.step-n { font-size: clamp(54px, 4.6vw, 76px); }
.steps > .step h3 { margin: 0 0 4px; font-size: clamp(24px, 2vw, 34px); }
.steps > .step > p { max-width: none; font-size: 16px; line-height: 1.5; }
.step-note { margin-top: 14px; }
/* the route: the site's blue line runs under the figures as each step arrives */
.steps .route { position: absolute; left: 0; right: 0; top: -26px; height: 2px; background: rgba(10,10,11,.14); list-style: none; }
.steps .route i { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--signal); transition: width 1.2s var(--out); }
.steps .route i::after { content: ''; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(58,120,255,.18), 0 0 14px rgba(58,120,255,.8); }
.steps:has(> .step:nth-child(1).in) .route i { width: 16.6%; }
.steps:has(> .step:nth-child(2).in) .route i { width: 50%; transition-delay: .25s; }
.steps:has(> .step:nth-child(3).in) .route i { width: 100%; transition-delay: .5s; }
@media (max-width: 1100px) { .steps > .step { grid-template-columns: none; } .step-note { grid-column: auto; } }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  .steps { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
  .steps .route { display: none; }
  .steps > .step { grid-template-columns: none; padding: 0; }
  .step-n { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .steps > .step, .ill * { transition: none !important; animation: none !important; } .ill .d { stroke-dashoffset: 0; } .ill .t, .ill .cap, .ill .ok, .ill .lens, .ill .mod, .steps > .step { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ the assistant's panel, as a conversation */
.s-d:empty { display: none; }
.x-chat { display: grid; gap: 8px; font-family: var(--sans); }
.x-chat .who { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(238,233,223,.5); margin-bottom: 5px; }
.b-in { justify-self: start; max-width: 92%; padding: 9px 12px; background: rgba(238,233,223,.08); border: 1px solid rgba(238,233,223,.16); border-radius: 2px 12px 12px 12px; font: 500 15px/1.35 var(--sans); color: var(--bone); }
.b-out { justify-self: end; max-width: 92%; padding: 9px 12px; background: rgba(58,120,255,.16); border: 1px solid rgba(58,120,255,.55); border-radius: 12px 2px 12px 12px; font: 500 15px/1.35 var(--sans); color: var(--bone); }
.b-out .who { color: var(--ember); }
.b-out .tk { opacity: .18; transition: opacity .25s; } .b-out .tk.on { opacity: 1; } .b-out .tk.now { color: var(--ember); }
.x-ctx { display: flex; flex-wrap: wrap; gap: 5px; font: 500 11px/1 var(--mono); }
.x-ctx span { padding: 5px 7px; border: 1px solid rgba(138,184,255,.45); color: var(--ember); animation: chipIn .4s var(--out) both; }
.x-ctx span:nth-child(2) { animation-delay: .15s; } .x-ctx span:nth-child(3) { animation-delay: .3s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(4px); } }
.x-next { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 8px; align-items: center; font: 500 11px/1.2 var(--mono); color: rgba(238,233,223,.6); }
.x-next .k { grid-column: 1 / -1; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; color: rgba(238,233,223,.45); }
.x-next .bar { height: 5px; background: rgba(238,233,223,.1); } .x-next .bar i { display: block; height: 100%; background: rgba(238,233,223,.4); }
.x-next .pick { color: var(--ember); } .x-next .pick + .bar i { background: var(--signal); }
.x-stamp { justify-self: end; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border: 1.5px solid currentColor; color: #7dffb0; animation: chipIn .35s var(--out) both; }
.x-stamp.hand { color: var(--ember); }
.co.step.pin { width: 320px; max-width: 320px; }
/* the page places itself (js/main.js): the browser must not also shift it when something in view changes height (the ideas as a list, an answer opening) */
html, body { overflow-anchor: none; }
/* a heading's blue phrase stays on one line (never "One / team.") */
@media (min-width: 821px) { #svc-title .hot, #fin-title .hot { white-space: nowrap; } }
/* How we work: a little air under the header where the window is tall enough; and its last block has a screen to itself */
@media (min-width: 821px) and (min-height: 860px) { .paper-in { padding-top: 100px; } }
@media (min-width: 821px) { #approach .start-faq { min-height: calc(100vh - 190px); align-content: center; } }
/* the agent's call log */
.x-log .c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-log { display: grid; grid-template-columns: auto 1fr; gap: 3px 7px; align-items: baseline; font: 500 10.5px/1.3 var(--mono); color: rgba(238,233,223,.5); }
.x-log .k { color: var(--ember); white-space: nowrap; } .x-log .k.check { color: #7dffb0; } .x-log .k.in, .x-log .k.out { color: var(--bone); }
.x-log b { font-weight: 500; color: rgba(238,233,223,.85); } .x-log i { font-style: normal; } .x-log i::before { content: '⇒ '; opacity: .6; }
.x-log .c.now b { color: var(--bone); } .x-log .c.now { animation: chipIn .3s var(--out) both; }
/* the approved replies the agent may start from, and its edits to the one it takes */
.x-lib { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center; font: 500 11px/1.2 var(--mono); color: rgba(238,233,223,.6); }
.x-lib .k, .x-from { grid-column: 1 / -1; font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(238,233,223,.45); }
.x-lib .bar { height: 5px; background: rgba(238,233,223,.1); } .x-lib .bar i { display: block; height: 100%; background: rgba(238,233,223,.4); }
.x-lib .pick { color: var(--ember); } .x-lib .pick + .bar i { background: var(--signal); }
.x-from b { color: var(--ember); font-weight: 500; }
.b-out { font-size: 14px; }
.b-out .f { padding: 0 3px; border-bottom: 1px dashed rgba(138,184,255,.7); color: rgba(238,233,223,.45); font: 500 11px/1 var(--mono); }
.b-out .f.on { padding: 0; border: 0; color: var(--ember); font: inherit; }
.b-out .d { transition: opacity .3s; } .b-out .d.on { text-decoration: line-through; opacity: .4; }
.b-out .a { background: rgba(58,120,255,.34); box-shadow: 0 0 0 2px rgba(58,120,255,.34); animation: chipIn .4s var(--out) both; }
.x-ed { display: grid; grid-template-columns: auto 1fr; gap: 3px 7px; font: 500 11px/1.3 var(--mono); color: rgba(238,233,223,.62); }
.x-ed .pm { color: var(--ember); font-weight: 600; } .x-ed b { color: var(--bone); font-weight: 500; }

.proc-hd .proc-sub { white-space: nowrap; }
/* the paper section: a tighter heading so the three figures arrive on the same screen */
@media (min-width: 821px) {
  .paper .form-hd { padding-bottom: 34px; }
  .paper h2 { font-size: clamp(44px, 4.8vw, 88px); }
  .paper-in { padding-top: 84px; }
  .ill .mod text { font-size: 13px; letter-spacing: .12em; }
}
.steps > .step > p.step-note { font-size: 13px; line-height: 1.6; margin-top: 12px; }

/* ================================================================== how we work, start, questions: no longer a white plate.
   A dark section in the site's own language: the landscape faintly behind, hairline frames, bone type, the blue route. */
#approach.paper { background: linear-gradient(180deg, rgba(10,10,11,.6) 0, rgba(10,10,11,.9) 140px, rgba(10,10,11,.93) 100%); color: var(--bone); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#approach.paper::before { background: radial-gradient(ellipse 60% 40% at 80% 0%, rgba(58,120,255,.12), transparent 70%), radial-gradient(rgba(238,233,223,.07) 1px, transparent 1.4px) 0 0 / 28px 28px; }
#approach .form-id { border: 0; }
#approach .form-id span { padding: 0; border: 0; }
#approach .form-id span:first-child { background: none; color: var(--ember); letter-spacing: .14em; }
#approach h2 { color: var(--bone); }
#approach .form-hd { border-bottom: 1px solid var(--hair2); }
#approach .form-hd p, #approach .steps > .step > p, #approach .start-steps li, #approach .faq details p { color: rgba(238,233,223,.78); }
#approach .step-n, #approach .start-steps b, #approach .faq summary { color: var(--bone); }
#approach .tick { border-color: rgba(238,233,223,.55); }
#approach .step-note, #approach .ex-k { color: rgba(238,233,223,.5); border-color: var(--hair2); }
#approach .start-steps li, #approach .faq details { border-color: var(--hair2) !important; }
#approach .ill-w { background: rgba(16,16,18,.78); border-color: rgba(238,233,223,.16); box-shadow: 0 30px 60px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(238,233,223,.05); }
#approach .ill-w::before, #approach .ill-w::after { border-color: var(--signal); }
#approach .ill .d { stroke: rgba(238,233,223,.62); }
#approach .ill .d.hot { stroke: var(--signal); filter: drop-shadow(0 0 4px rgba(58,120,255,.7)); }
#approach .ill text { fill: rgba(238,233,223,.78); }
#approach .ill .cap { fill: rgba(238,233,223,.4); }
#approach .ill .hot text, #approach .ill text.ok { fill: var(--ember); }
#approach .ill .mod .fill { filter: drop-shadow(0 0 14px rgba(58,120,255,.55)); }
#approach .steps .route { background: rgba(238,233,223,.1); }
#approach .steps > .step { padding-top: 0; }
#approach .steps > .step.in .step-n { animation: stepN .9s var(--out) both; }
#approach .steps > .step:nth-child(2).in .step-n { animation-delay: .25s; } #approach .steps > .step:nth-child(3).in .step-n { animation-delay: .5s; }
@keyframes stepN { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
#approach .models { background: rgba(16,16,18,.8); border: 1px solid var(--hair2); }
#approach .example { background: rgba(16,16,18,.8); border: 1px solid var(--hair2); }
body.on-paper .hdr.solid { background: rgba(10,10,11,.92); }

/* the strategy panel: hours, value against effort, the plan */
.x-bars { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; font: 500 12px/1.2 var(--mono); color: rgba(238,233,223,.8); }
.x-bars .k, .x-plan .k { grid-column: 1 / -1; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(238,233,223,.45); }
.x-bars .bar { height: 7px; background: rgba(238,233,223,.08); } .x-bars .bar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(58,120,255,.55), var(--signal)); box-shadow: 0 0 10px rgba(58,120,255,.5); }
.x-plot { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; }
.x-plot .ax { fill: none; stroke: rgba(238,233,223,.35); stroke-width: 1; }
.x-plot .zone { fill: rgba(58,120,255,.08); stroke: rgba(58,120,255,.35); stroke-dasharray: 3 3; }
.x-plot text { font: 500 9.5px var(--mono); fill: rgba(238,233,223,.7); }
.x-plot circle { fill: rgba(238,233,223,.55); } .x-plot circle.hot { fill: var(--signal); }
.x-plot .ring { fill: none; stroke: var(--signal); stroke-width: 1.5; }
.x-plot .tag { fill: var(--ember); font-weight: 600; }
.x-plan { display: grid; grid-template-columns: 14px auto 1fr; gap: 7px 10px; align-items: baseline; font: 400 13px/1.35 var(--sans); color: rgba(238,233,223,.8); }
.x-plan b { font: 600 11px/1.3 var(--mono); letter-spacing: .04em; color: var(--bone); white-space: nowrap; }
.x-plan span:first-child, .x-plan > span:nth-child(3n+1) { color: rgba(238,233,223,.35); font-family: var(--mono); }
.x-plan > span.on { color: #7dffb0; }
.x-plot .zk { fill: rgba(138,184,255,.6); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; }

/* the handover label over the van */
.co.hand { grid-template-columns: minmax(0, 1fr); min-width: 232px; border-color: rgba(58,120,255,.55); }
.co.hand .co-t { color: var(--ember); letter-spacing: .12em; }
.co.hand .co-s { display: grid; gap: 3px; margin-top: 2px; }
.co.hand .co-s span { display: block; color: rgba(238,233,223,.5); transition: color .4s; }
.co.hand .co-s span.in { color: var(--bone); }
.co.hand .co-s b { display: block; margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--hair); font-weight: 500; color: var(--signal); }

/* the last section rests high on a desktop screen: the foot of the frame belongs to the handover, and the footer waits below it */
@media (min-width: 821px) and (min-height: 501px) {
  .contact[data-rest="top"] { align-items: flex-start; min-height: calc(100vh + 130px); padding-top: 120px; padding-bottom: 0; }
}