/* ============================================================
   CYBERLABS — design tokens
   The logo is a continuous hue arc: mint → teal → azure → navy
   → indigo → violet → magenta. That arc is the site's structure.
   Cool end = things we build. Warm end = demand we create.
   ============================================================ */
:root{
  --mint:#37F3C0; --teal:#28C0B0; --aqua:#19B0C6; --azure:#079DE0;
  --ocean:#1B7ACD; --navy:#22469D; --indigo:#5350A6; --violet:#973C96; --magenta:#EB008B;
  --arc: linear-gradient(90deg,#37F3C0 0%,#28C0B0 14%,#079DE0 30%,#1B7ACD 44%,#22469D 58%,#5350A6 71%,#973C96 85%,#EB008B 100%);
  --arc-v: linear-gradient(180deg,#37F3C0 0%,#28C0B0 14%,#079DE0 30%,#1B7ACD 44%,#22469D 58%,#5350A6 71%,#973C96 85%,#EB008B 100%);

  --bg:#04070E; --bg-2:#080E1C; --fg:#E9F1F8; --fg-dim:#8FA4BD;
  --line:rgba(126,178,220,.15); --panel:rgba(255,255,255,.035);
  --accent:var(--mint);

  --focus:#37F3C0;
  --shell: min(1320px, 92vw);
  --rail: 68px;
  --display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.light{
  --focus:#123C8C;
  --bg:#EDF2F8; --bg-2:#E2EAF4; --fg:#071021; --fg-dim:#4A5F7C;
  --line:rgba(9,38,78,.14); --panel:rgba(255,255,255,.72);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:#04070E; color:#E9F1F8;
  font-family:var(--body); font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}

h1,h2,h3,h4{font-family:var(--display); font-weight:800; margin:0; letter-spacing:-.032em; line-height:.98}
h1{font-size:clamp(2.9rem,7.4vw,6.5rem); line-height:.9; letter-spacing:-.042em}
h2{font-size:clamp(2rem,4.3vw,3.5rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem); letter-spacing:-.022em}
p{margin:0 0 1em; max-width:66ch}
.lede{font-size:clamp(1.06rem,1.5vw,1.3rem); line-height:1.55; color:var(--fg-dim); max-width:56ch}
.tiny{font-size:.8rem; line-height:1.5; color:var(--fg-dim)}
.arc-text{background:var(--arc); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- layout shells ---------- */
.band{background:var(--bg); color:var(--fg); position:relative; padding:clamp(76px,9vw,132px) 0}
.shell{width:var(--shell); margin-inline:auto; padding-left:0}
@media (min-width:1080px){ .shell{margin-left:calc(var(--rail) + max(28px,(100vw - var(--rail) - var(--shell))/2)); margin-right:0} }

.head-row{display:grid; grid-template-columns:1fr; gap:22px; margin-bottom:clamp(38px,5vw,64px)}
@media (min-width:900px){ .head-row{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:end; gap:48px} }
.section-tag{display:flex; align-items:center; gap:10px; font-size:.82rem; letter-spacing:.01em; color:var(--fg-dim); margin-bottom:18px}
.section-tag .pip{width:9px; height:9px; border-radius:50%; flex:none}

/* ---------- spectrum rail ---------- */
.rail{position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:60; display:none; pointer-events:none}
@media (min-width:1080px){ .rail{display:block} }
.rail-track{position:absolute; left:31px; top:104px; bottom:104px; width:2px; background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
.rail-fill{position:absolute; left:0; top:0; width:100%; height:0; background:var(--arc-v); background-size:100% 100vh}
.rail-dot{position:absolute; left:26px; top:104px; width:12px; height:12px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 5px rgba(55,243,192,.14), 0 0 22px 3px currentColor; color:var(--mint); transition:background .5s, color .5s}
.rail-label{position:absolute; left:34px; transform-origin:0 0; transform:rotate(90deg) translateY(-50%);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--fg-dim); white-space:nowrap; transition:top .35s}
.rail-marks{position:absolute; left:27px; top:104px; bottom:104px; width:10px}
.rail-mark{position:absolute; left:2px; width:6px; height:1px; background:rgba(255,255,255,.22)}
.light .rail-track{background:linear-gradient(180deg,rgba(9,38,78,.2),rgba(9,38,78,.08))}
.light .rail-mark{background:rgba(9,38,78,.25)}

.topbar{position:fixed; left:0; top:0; height:2px; width:100%; z-index:70; background:var(--arc); transform-origin:0 50%; transform:scaleX(0)}
@media (min-width:1080px){ .topbar{display:none} }

/* ---------- nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:65; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:14px clamp(16px,3vw,30px); transition:background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent}
.nav.stuck{background:rgba(4,7,14,.72); backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:rgba(126,178,220,.13)}
.nav.stuck.on-light{background:rgba(237,242,248,.8); border-bottom-color:rgba(9,38,78,.12)}
.nav.on-light{color:#071021}
.brand{display:flex; align-items:center; gap:11px}
.brand img{height:34px; width:auto}
.brand .wm{font-family:var(--display); font-weight:800; font-size:1.16rem; letter-spacing:-.03em}
.nav-links{display:none; gap:6px; align-items:center}
@media (min-width:860px){ .nav-links{display:flex} }
.nav-links a{padding:8px 13px; border-radius:999px; font-size:.93rem; color:inherit; opacity:.78; transition:opacity .2s, background .2s}
.nav-links a:hover{opacity:1; background:rgba(255,255,255,.07)}
.nav.on-light .nav-links a:hover{background:rgba(9,38,78,.07)}

.nav-right{display:flex; align-items:center; gap:10px}
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:inherit; cursor:pointer; flex:none}
@media (min-width:860px){ .nav-toggle{display:none} }
.nav-toggle i{position:relative; display:block; width:16px; height:1.5px; background:currentColor; transition:background .2s}
.nav-toggle i::before,.nav-toggle i::after{content:""; position:absolute; left:0; width:16px; height:1.5px;
  background:currentColor; transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.nav-toggle i::before{top:-5px} .nav-toggle i::after{top:5px}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}
.nav-menu{position:fixed; left:0; right:0; top:0; z-index:64; padding:76px 20px 24px; display:grid; gap:0;
  background:rgba(4,7,14,.97); backdrop-filter:blur(18px); border-bottom:1px solid rgba(126,178,220,.15);
  transform:translateY(-102%); visibility:hidden; transition:transform .42s cubic-bezier(.2,.8,.2,1), visibility .42s}
.nav-menu.open{transform:none; visibility:visible}
@media (min-width:860px){ .nav-menu{display:none} }
.nav-menu a{padding:14px 4px; border-bottom:1px solid rgba(126,178,220,.12); color:#E9F1F8;
  font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:-.026em}
.nav-menu a:last-child{border-bottom:0; font-family:var(--body); font-weight:500; font-size:.95rem; color:#8FA4BD; padding-top:18px}
@media (prefers-reduced-motion:reduce){ .nav-menu{transition:none} }

.btn{display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:999px; border:0; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:.98rem; letter-spacing:-.01em; background:var(--arc); background-size:220% 100%;
  color:#03060D; transition:background-position .5s cubic-bezier(.2,.7,.3,1), transform .18s}
.btn:hover{background-position:100% 0; transform:translateY(-1px)}
.btn.sm{padding:10px 18px; font-size:.9rem}
.btn-ghost{display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:inherit; font-weight:600; font-size:.98rem; transition:border-color .25s, background .25s}
.btn-ghost:hover{border-color:currentColor; background:var(--panel)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:#04070E}
#glhero{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.1s ease .1s}
.hero.ready #glhero{opacity:1}
.hero-scrim{position:absolute; inset:0; z-index:2; pointer-events:none; background:
  linear-gradient(180deg,rgba(4,7,14,.55) 0%,rgba(4,7,14,0) 22%),
  linear-gradient(100deg,rgba(4,7,14,.94) 0%,rgba(4,7,14,.86) 26%,rgba(4,7,14,.42) 50%,rgba(4,7,14,0) 70%),
  linear-gradient(0deg,rgba(4,7,14,.72) 0%,rgba(4,7,14,0) 26%)}
@media (max-width:900px){ .hero-scrim{background:
  linear-gradient(180deg,rgba(4,7,14,.86) 0%,rgba(4,7,14,.22) 11%,rgba(4,7,14,.20) 29%,rgba(4,7,14,.84) 43%,rgba(4,7,14,.96) 60%,rgba(4,7,14,.97) 100%)} }
.hero-fallback{position:absolute; inset:0; background:
  radial-gradient(60% 55% at 26% 34%,rgba(55,243,192,.22),transparent 65%),
  radial-gradient(55% 50% at 74% 62%,rgba(235,0,139,.2),transparent 65%),#04070E}
.hero-inner{position:relative; z-index:3; width:var(--shell); margin-inline:auto; padding:120px 0 clamp(70px,10vh,120px)}
@media (min-width:1080px){ .hero-inner{margin-left:calc(var(--rail) + max(28px,(100vw - var(--rail) - var(--shell))/2)); margin-right:0} }
.hero h1{max-width:14ch; text-shadow:0 8px 60px rgba(4,7,14,.65)}
.hero .line{display:block; overflow:hidden}
.hero .line > span{display:block; transform:translateY(102%)}
.hero.ready .line > span{transform:none; transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hero.ready .line:nth-child(2) > span{transition-delay:.09s}
.hero.ready .line:nth-child(3) > span{transition-delay:.18s}
.hero-sub{margin-top:26px; max-width:46ch; font-size:clamp(1.02rem,1.35vw,1.2rem); color:#B9CBDF; opacity:0; transform:translateY(14px)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; opacity:0; transform:translateY(14px)}
.hero.ready .hero-sub,.hero.ready .hero-cta{opacity:1; transform:none; transition:opacity .8s ease .42s, transform .8s cubic-bezier(.2,.8,.2,1) .42s}
.hero.ready .hero-cta{transition-delay:.52s}
.hero-meta{position:absolute; left:0; right:0; bottom:22px; z-index:3; display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; width:var(--shell); margin-inline:auto; font-size:.8rem; color:#7E93AC}
@media (min-width:1080px){ .hero-meta{margin-left:calc(var(--rail) + max(28px,(100vw - var(--rail) - var(--shell))/2)); margin-right:0; width:calc(100vw - var(--rail) - 2*max(28px,(100vw - var(--rail) - var(--shell))/2))} }
.drag-hint{display:inline-flex; align-items:center; gap:9px}
.drag-hint i{width:22px; height:22px; border:1px solid rgba(255,255,255,.28); border-radius:50%; position:relative; flex:none}
.drag-hint i::after{content:""; position:absolute; inset:6px; border-radius:50%; background:var(--mint); animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.hero-stats{display:flex; gap:26px; flex-wrap:wrap}
.hero-stats b{font-family:var(--display); font-size:1.5rem; color:#E9F1F8; display:block; letter-spacing:-.03em}
@media (max-width:900px){
  .hero{flex-direction:column; justify-content:flex-start; align-items:stretch; min-height:100svh}
  .hero-inner{padding:clamp(238px,38svh,330px) 0 0}
  .hero-meta{position:static; flex-direction:column; align-items:flex-start; gap:20px; margin:30px auto 0; padding-bottom:38px}
  .hero-stats{gap:22px 26px}
  .hero-stats b{font-size:1.22rem}
  .hero h1{max-width:none}
}

/* ---------- loader ---------- */
.loader{position:fixed; inset:0; z-index:200; background:#04070E; display:grid; place-items:center; transition:opacity .6s ease, visibility .6s}
.loader.done{opacity:0; visibility:hidden}
.loader img{width:min(210px,44vw); animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55; transform:scale(.985)}50%{opacity:1; transform:scale(1)}}
.loader .bar{position:absolute; bottom:0; left:0; height:2px; width:100%; background:var(--arc); transform-origin:0 50%; transform:scaleX(.05); animation:load 1.5s ease-out forwards}
@keyframes load{to{transform:scaleX(1)}}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line); background:#060B16; overflow:hidden; padding:15px 0; position:relative}
.ticker-run{display:flex; gap:0; width:max-content; animation:run 46s linear infinite}
.ticker:hover .ticker-run{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}
.ticker span{display:inline-flex; align-items:center; gap:12px; padding:0 26px; font-family:var(--display); font-weight:700;
  font-size:clamp(1rem,1.6vw,1.35rem); letter-spacing:-.02em; color:#9DB2C9; white-space:nowrap}
.ticker span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c,var(--mint)); flex:none}

/* ---------- services ---------- */
.svc{display:grid; grid-template-columns:1fr; gap:34px}
@media (min-width:1000px){ .svc{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:56px; align-items:start} }
.track-title{display:flex; align-items:baseline; gap:12px; font-family:var(--display); font-weight:700; font-size:1.02rem;
  color:var(--fg-dim); margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.track-title:not(:first-child){margin-top:34px}
.track-title em{font-style:normal; font-size:.8rem; font-weight:500; font-family:var(--body); opacity:.72}
.svc-item{width:100%; text-align:left; background:none; border:0; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:15px; padding:15px 6px 15px 4px; border-bottom:1px solid var(--line); transition:padding-left .3s, color .25s}
.svc-item .dot{width:11px; height:11px; border-radius:50%; background:var(--c); transition:box-shadow .3s, transform .3s}
.svc-item .nm{font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,2.3vw,1.7rem); letter-spacing:-.028em; transition:color .25s}
.svc-item .pv{font-size:.82rem; color:var(--fg-dim); font-family:var(--mono); white-space:nowrap}
.svc-item:hover{padding-left:14px}
.svc-item[aria-selected="true"]{padding-left:14px}
.svc-item[aria-selected="true"] .dot{transform:scale(1.45); box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent)}
.svc-item[aria-selected="true"] .nm{color:color-mix(in srgb,var(--c) 76%,#fff)}

.svc-panel{position:relative; scroll-margin-top:84px; border:1px solid var(--line); border-radius:20px; padding:clamp(22px,3vw,34px);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); overflow:hidden}
.svc-panel::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c,var(--mint)); transition:background .4s}
.svc-panel .glow{position:absolute; width:340px; height:340px; right:-110px; top:-120px; border-radius:50%; filter:blur(70px);
  background:var(--c,var(--mint)); opacity:.16; transition:background .5s; pointer-events:none}
.svc-panel > *{position:relative}
.svc-panel h3{font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.035em; margin-bottom:12px}
.svc-panel .what{color:var(--fg-dim); font-size:1.02rem; margin-bottom:22px}
.svc-grid{display:grid; grid-template-columns:1fr; gap:20px; padding-top:20px; border-top:1px solid var(--line)}
@media (min-width:620px){ .svc-grid{grid-template-columns:1fr 1fr} }
.svc-grid h4{font-family:var(--body); font-weight:600; font-size:.82rem; color:var(--fg-dim); margin:0 0 9px; letter-spacing:.01em}
.svc-grid ul{margin:0; padding:0; list-style:none; display:grid; gap:7px; font-size:.94rem}
.svc-grid li{display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:start}
.svc-grid li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--c); margin-top:.6em}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:.79rem; color:var(--fg-dim); font-family:var(--mono)}
.facts{display:flex; flex-wrap:wrap; gap:26px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.facts div span{display:block; font-size:.78rem; color:var(--fg-dim); margin-bottom:3px}
.facts div b{font-family:var(--display); font-size:1.3rem; letter-spacing:-.03em}
.fade-swap{animation:swapIn .42s cubic-bezier(.2,.8,.2,1)}
@keyframes swapIn{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .fade-swap{animation:none} }

/* ---------- material lab ---------- */
.lab{margin-top:22px; border-top:1px solid var(--line); padding-top:22px}
.lab-stage{position:relative; height:clamp(230px,26vw,300px); border-radius:14px; overflow:hidden; background:#050A14; border:1px solid var(--line)}
#gllab{width:100%; height:100%; display:block; cursor:grab}
#gllab:active{cursor:grabbing}
.lab-ctrl{display:grid; gap:10px; margin-top:14px}
.lab-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.lab-row > b{font-family:var(--body); font-weight:500; font-size:.78rem; color:var(--fg-dim); width:52px; flex:none}
.seg{border:1px solid var(--line); background:transparent; border-radius:999px; padding:7px 14px; font-size:.83rem; cursor:pointer;
  color:var(--fg-dim); transition:all .22s}
.seg[aria-pressed="true"]{color:#03060D; background:var(--c,var(--mint)); border-color:transparent; font-weight:600}

/* ---------- process (light band) ---------- */
.steps{display:grid; gap:0; border-top:1px solid var(--line)}
.step{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:26px 0; border-bottom:1px solid var(--line); align-items:start}
@media (min-width:820px){ .step{grid-template-columns:64px minmax(0,300px) minmax(0,1fr); gap:34px; align-items:baseline} }
.step .no{font-family:var(--display); font-weight:800; font-size:1.9rem; letter-spacing:-.04em; line-height:1;
  background:var(--arc); background-size:520% 100%; -webkit-background-clip:text; background-clip:text; color:transparent}
.step h3{font-size:clamp(1.3rem,2.2vw,1.75rem)}
.step p{margin:0; color:var(--fg-dim); font-size:1rem}
.step .sub{display:block; margin-top:8px; font-size:.82rem; font-family:var(--mono); color:var(--fg-dim); opacity:.8}

/* ---------- projection tool ---------- */
.proj{display:grid; gap:26px; grid-template-columns:1fr}
@media (min-width:980px){ .proj{grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:44px; align-items:start} }
.controls{display:grid; gap:22px; padding:26px; border:1px solid var(--line); border-radius:18px; background:var(--panel)}
.ctrl label{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:.9rem; margin-bottom:10px}
.ctrl label b{font-family:var(--mono); font-weight:500; font-size:1rem; color:var(--fg)}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px; background:var(--arc); cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff;
  border:3px solid #071021; box-shadow:0 2px 10px rgba(0,0,0,.35); cursor:grab}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid #071021; cursor:grab}
.toggle-row{display:flex; gap:8px; flex-wrap:wrap}
.toggle{border:1px solid var(--line); background:transparent; border-radius:10px; padding:9px 14px; font-size:.88rem; cursor:pointer;
  color:var(--fg-dim); transition:all .2s}
.toggle[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg); font-weight:600}
.readout{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden}
@media (min-width:640px){ .readout{grid-template-columns:repeat(4,1fr)} }
.readout div{background:var(--bg); padding:20px 18px}
.readout span{display:block; font-size:.78rem; color:var(--fg-dim); margin-bottom:7px}
.readout b{font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.04em; line-height:1}
.model-warn{margin:14px 0 0; padding:12px 15px; border-left:2px solid var(--magenta);
  background:color-mix(in srgb,var(--magenta) 8%,transparent); border-radius:0 8px 8px 0; max-width:64ch}
.model-warn[hidden]{display:none}
.chart-wrap{margin-top:22px; border:1px solid var(--line); border-radius:18px; padding:20px 18px 12px; background:var(--panel)}
.chart-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:12px}
.legend{display:flex; gap:16px; font-size:.8rem; color:var(--fg-dim)}
.legend i{width:14px; height:3px; border-radius:2px; display:inline-block; margin-right:6px; vertical-align:middle}
svg.chart{width:100%; height:210px; display:block; overflow:visible}
.chart .grid-l{stroke:var(--line); stroke-width:1}
.chart .axis{font-family:var(--mono); font-size:9px; fill:var(--fg-dim)}

/* ---------- work ---------- */
.work{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:760px){ .work{grid-template-columns:1fr 1fr} }
.case{position:relative; border:1px solid var(--line); border-radius:18px; padding:clamp(22px,3vw,30px); overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012)); transition:border-color .3s, transform .3s}
.case:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent); transform:translateY(-3px)}
.case.wide{grid-column:1/-1}
@media (min-width:820px){
  .case.wide{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:38px; align-items:center}
  .case.wide .metrics{border-top:0; border-left:1px solid var(--line); padding:4px 0 4px 34px; margin:0;
    flex-direction:column; gap:22px; align-items:flex-start}
  .case.wide p{margin-bottom:18px}
}
.case .sector{font-size:.8rem; color:var(--fg-dim); display:flex; align-items:center; gap:9px; margin-bottom:14px}
.case .sector::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c)}
.case h3{margin-bottom:10px; font-size:clamp(1.3rem,2.3vw,1.8rem)}
.case p{color:var(--fg-dim); font-size:.98rem; margin-bottom:20px}
.metrics{display:flex; flex-wrap:wrap; gap:24px; padding-top:18px; border-top:1px solid var(--line)}
.metrics div span{display:block; font-size:.76rem; color:var(--fg-dim); margin-bottom:4px}
.metrics div b{font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.04em;
  color:color-mix(in srgb,var(--c) 74%,#fff)}
.tagline{display:flex; flex-wrap:wrap; gap:7px; margin-top:18px}

/* ---------- pricing ---------- */
.plans{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden}
@media (min-width:860px){ .plans{grid-template-columns:repeat(3,1fr)} }
.plan{background:var(--bg); padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:14px; position:relative}
.plan .chip-svg{margin-bottom:2px}
.plan h3{font-size:1.45rem}
.plan .price{font-family:var(--display); font-weight:800; font-size:2.4rem; letter-spacing:-.045em; line-height:1;
  background:var(--arc); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent}
.plan .price small{font-family:var(--body); font-size:.85rem; font-weight:500; color:var(--fg-dim); -webkit-text-fill-color:var(--fg-dim); letter-spacing:0}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.94rem; color:var(--fg-dim)}
.plan ul li{display:grid; grid-template-columns:auto 1fr; gap:10px}
.plan ul li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--c); margin-top:.62em}
.plan .fit{margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:.86rem; color:var(--fg-dim)}

/* ---------- brief builder ---------- */
.brief{display:grid; gap:24px; grid-template-columns:1fr}
@media (min-width:1000px){ .brief{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:start} }
.form-card{border:1px solid var(--line); border-radius:20px; padding:clamp(22px,3vw,32px); background:var(--panel)}
.q{margin-bottom:26px}
.q > p{font-family:var(--display); font-weight:700; font-size:1.08rem; margin:0 0 4px; letter-spacing:-.02em}
.q > .hint{font-size:.84rem; color:var(--fg-dim); margin:0 0 13px}
.pickers{display:flex; flex-wrap:wrap; gap:8px}
.pick{border:1px solid var(--line); background:transparent; border-radius:999px; padding:9px 15px; font-size:.88rem; cursor:pointer;
  color:var(--fg-dim); display:inline-flex; align-items:center; gap:8px; transition:all .2s}
.pick::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c,var(--fg-dim)); opacity:.55; transition:opacity .2s}
.pick:hover{color:var(--fg); border-color:color-mix(in srgb,var(--fg) 35%,transparent)}
.pick[aria-pressed="true"]{color:var(--fg); border-color:color-mix(in srgb,var(--c) 70%,transparent);
  background:color-mix(in srgb,var(--c) 13%,transparent)}
.pick[aria-pressed="true"]::before{opacity:1}
.fields{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:560px){ .fields{grid-template-columns:1fr 1fr} }
.fields .full{grid-column:1/-1}
.field input,.field textarea{width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; font-size:.96rem; transition:border-color .2s, background .2s}
.light .field input,.light .field textarea{background:#fff}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--mint); background:rgba(255,255,255,.06)}
.field label{display:block; font-size:.8rem; color:var(--fg-dim); margin-bottom:7px}
.field textarea{resize:vertical; min-height:96px}
.brief-doc{position:sticky; top:92px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#060B16}
.light .brief-doc{background:#0A1120; color:#E9F1F8}
.doc-bar{display:flex; align-items:center; gap:9px; padding:13px 18px; border-bottom:1px solid rgba(126,178,220,.14); background:rgba(255,255,255,.03)}
.doc-bar .dots{display:flex; gap:6px}
.doc-bar .dots i{width:9px; height:9px; border-radius:50%; display:block}
.doc-bar span{font-family:var(--mono); font-size:.76rem; color:#8FA4BD; margin-left:6px}
.doc-body{padding:22px; min-height:300px; font-family:var(--mono); font-size:.83rem; line-height:1.85; color:#C6D6E8; max-height:none; white-space:pre-wrap}
.doc-body .k{color:#8FA4BD}
.doc-body .v{color:#37F3C0}
.doc-body .v.warm{color:#EB008B}
.doc-body .empty{color:#5E7align}
.doc-actions{display:flex; flex-wrap:wrap; gap:10px; padding:0 22px 22px}
.copied{font-size:.82rem; color:var(--mint); align-self:center; opacity:0; transition:opacity .3s}
.copied.on{opacity:1}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative; font-family:var(--display);
  font-weight:700; font-size:clamp(1.05rem,1.8vw,1.3rem); letter-spacing:-.022em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:13px; height:13px; margin-top:-7px;
  border-right:2px solid var(--fg-dim); border-bottom:2px solid var(--fg-dim); transform:rotate(45deg) translateY(-3px); transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{color:var(--fg-dim); padding-bottom:22px; margin:0; max-width:70ch}

/* ---------- footer ---------- */
.foot{background:#04070E; color:#E9F1F8; padding:clamp(60px,7vw,96px) 0 30px; border-top:1px solid rgba(126,178,220,.14)}
.foot-grid{display:grid; gap:34px; grid-template-columns:1fr}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr} }
.foot h4{font-family:var(--body); font-weight:600; font-size:.82rem; color:#8FA4BD; margin:0 0 14px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.93rem}
.foot ul a{color:#B9CBDF; transition:color .2s}
.foot ul a:hover{color:#fff}
.foot address{font-style:normal; font-size:.93rem; color:#B9CBDF; line-height:1.7}
.wordmark{margin-top:56px; padding-top:26px; border-top:1px solid rgba(126,178,220,.14)}
.wordmark img{width:100%; max-width:1100px; opacity:.92}
.foot-base{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; margin-top:26px; font-size:.8rem; color:#7E93AC}

/* ---------- misc ---------- */
.split-note{display:grid; gap:16px; grid-template-columns:1fr; margin-top:14px}
@media (min-width:760px){ .split-note{grid-template-columns:1fr 1fr; gap:34px} }
.rule{height:1px; background:var(--arc); opacity:.55; margin:0}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
@media (prefers-reduced-motion:reduce){
  .ticker-run{animation:none}
  .drag-hint i::after{animation:none}
  .hero .line > span{transform:none}
  .loader .bar{animation:none; transform:scaleX(1)}
}

/* =====================================================================
   MULTI-PAGE ADDITIONS
   ===================================================================== */

/* current page in the nav */
.nav-links a[aria-current="page"]{opacity:1; background:rgba(255,255,255,.09)}
.nav.on-light .nav-links a[aria-current="page"]{background:rgba(9,38,78,.09)}
.nav-menu a[aria-current="page"]{color:var(--mint)}

/* interior page hero */
.page-hero{position:relative; background:#04070E; color:#E9F1F8; padding:clamp(126px,15vh,190px) 0 clamp(56px,7vw,86px); overflow:hidden}
.page-hero::after{content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--arc); opacity:.6}
.page-hero .aura{position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(46% 60% at 84% 12%,color-mix(in srgb,var(--pc,#37F3C0) 26%,transparent),transparent 70%),
  radial-gradient(40% 55% at 6% 96%,rgba(235,0,139,.16),transparent 70%)}
.page-hero .shell{position:relative}
.page-hero h1{font-size:clamp(2.5rem,6vw,4.9rem); max-width:16ch}
.page-hero .lede{margin-top:22px; color:#A9BDD4; max-width:52ch}
.crumb{display:flex; align-items:center; gap:9px; font-size:.82rem; color:#7E93AC; margin-bottom:20px}
.crumb a{border-bottom:1px solid rgba(126,178,220,.3)}
.crumb i{width:6px; height:6px; border-radius:50%; background:var(--pc,var(--mint)); flex:none}

/* character stage */
.vector{display:grid; gap:28px; grid-template-columns:1fr}
@media (min-width:960px){ .vector{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:52px; align-items:center} }
.vector-stage{position:relative; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#050A15;
  height:clamp(360px,52vh,540px)}
.vector-stage canvas{width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y}
.vector-stage canvas:active{cursor:grabbing}
.vector-badge{position:absolute; left:16px; top:14px; z-index:2; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.7rem; color:#8FA4BD; background:rgba(4,7,14,.6); backdrop-filter:blur(8px);
  border:1px solid rgba(126,178,220,.16); border-radius:999px; padding:6px 12px}
.vector-badge b{color:var(--mint); font-weight:500}
.vector-hint{position:absolute; right:16px; bottom:14px; z-index:2; font-size:.76rem; color:#7E93AC}
.pose-ctrl{display:grid; gap:11px; margin-top:18px}
.pose-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pose-row > b{font-family:var(--body); font-weight:500; font-size:.78rem; color:var(--fg-dim); width:56px; flex:none}
.spec-list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--line)}
.spec-list li{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--line);
  font-size:.93rem; align-items:baseline}
.spec-list b{font-family:var(--mono); font-weight:500; font-size:.8rem; color:var(--fg-dim); width:104px}

/* service cards grid (home overview) */
.svc-cards{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden}
@media (min-width:640px){ .svc-cards{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .svc-cards{grid-template-columns:repeat(3,1fr)} }
.svc-card{background:var(--bg); padding:26px 24px 24px; display:block; position:relative; transition:background .3s}
.svc-card:hover{background:color-mix(in srgb,var(--c) 8%,var(--bg))}
.svc-card .top{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.svc-card .top i{width:9px; height:9px; border-radius:50%; background:var(--c); flex:none}
.svc-card .top span{font-size:.78rem; color:var(--fg-dim); font-family:var(--mono)}
.svc-card h3{font-size:1.24rem; margin-bottom:9px}
.svc-card p{font-size:.92rem; color:var(--fg-dim); margin:0}
.svc-card .go{margin-top:16px; font-size:.85rem; color:color-mix(in srgb,var(--c) 72%,#fff); display:inline-block; border-bottom:1px solid currentColor; padding-bottom:2px}

/* comparison table */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:18px}
table.cmp{width:100%; border-collapse:collapse; min-width:640px; font-size:.93rem}
table.cmp th,table.cmp td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
table.cmp thead th{font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.02em;
  background:var(--panel); position:sticky; top:0}
table.cmp tbody th{font-weight:500; color:var(--fg-dim); font-family:var(--body); width:34%}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
table.cmp .yes{color:color-mix(in srgb,var(--mint) 72%,#fff); font-weight:600}
.light table.cmp .yes{color:#0B6E5C}
table.cmp .no{color:var(--fg-dim); opacity:.78}

/* team */
.team{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:620px){ .team{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .team{grid-template-columns:repeat(4,1fr)} }
.member{border:1px solid var(--line); border-radius:16px; padding:22px; background:var(--panel)}
.member .chip-svg{margin-bottom:16px}
.member h3{font-size:1.08rem; margin-bottom:5px}
.member .role{font-size:.82rem; color:var(--fg-dim); margin-bottom:12px}
.member p{font-size:.9rem; color:var(--fg-dim); margin:0}

/* quotes */
.quotes{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:900px){ .quotes{grid-template-columns:repeat(3,1fr)} }
.quote{border:1px solid var(--line); border-radius:18px; padding:26px; background:var(--panel); display:flex; flex-direction:column}
.quote blockquote{margin:0 0 20px; font-family:var(--display); font-weight:500; font-size:1.12rem; line-height:1.4; letter-spacing:-.02em}
.quote cite{margin-top:auto; font-style:normal; font-size:.85rem; color:var(--fg-dim)}
.quote cite b{display:block; color:var(--fg); font-weight:600; font-family:var(--body)}

/* sectors */
.sectors{display:flex; flex-wrap:wrap; gap:9px}
.sector-chip{border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:.9rem; color:var(--fg-dim);
  display:inline-flex; align-items:center; gap:9px}
.sector-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c,var(--mint))}

/* long-form case study */
.study{border-top:1px solid var(--line); padding:clamp(34px,5vw,58px) 0}
.study:last-child{border-bottom:1px solid var(--line)}
.study-head{display:grid; gap:18px; grid-template-columns:1fr; margin-bottom:30px}
@media (min-width:900px){ .study-head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:44px} }
.study-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.study-cols{display:grid; gap:26px; grid-template-columns:1fr}
@media (min-width:820px){ .study-cols{grid-template-columns:repeat(3,1fr); gap:36px} }
.study-cols h4{font-family:var(--body); font-weight:600; font-size:.82rem; color:var(--fg-dim); margin:0 0 10px}
.study-cols p{font-size:.96rem; color:var(--fg-dim); margin:0}
.study-head .metrics{margin-top:24px; gap:20px 30px}

/* stat band */
.stat-band{display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line)}
@media (min-width:700px){ .stat-band{grid-template-columns:repeat(4,1fr)} }
.stat-band div{background:var(--bg); padding:30px clamp(20px,3vw,34px)}
.stat-band b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(2rem,3.6vw,2.8rem);
  letter-spacing:-.045em; line-height:1; background:var(--arc); background-size:420% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px}
.stat-band span{font-size:.9rem; color:var(--fg-dim)}

/* closing CTA */
.cta-band{background:#04070E; color:#E9F1F8; padding:clamp(64px,8vw,110px) 0; position:relative; overflow:hidden}
.cta-band .aura{position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(44% 70% at 78% 20%,rgba(235,0,139,.20),transparent 68%),
  radial-gradient(40% 66% at 12% 90%,rgba(55,243,192,.16),transparent 68%)}
.cta-band .shell{position:relative}
.cta-band h2{max-width:16ch}
.cta-band .row{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; align-items:center}
.cta-band .row .tiny{margin:0; color:#7E93AC}

/* what happens next timeline */
.next{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line)}
.next li{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); align-items:start}
.next .when{font-family:var(--mono); font-size:.78rem; color:var(--c,var(--mint)); width:96px; flex:none; padding-top:3px}
.next h3{font-size:1.06rem; margin-bottom:5px}
.next p{margin:0; font-size:.93rem; color:var(--fg-dim)}

/* two-column prose */
.prose-2{display:grid; gap:26px; grid-template-columns:1fr}
@media (min-width:820px){ .prose-2{grid-template-columns:1fr 1fr; gap:52px} }
.prose-2 h3{margin-bottom:10px; font-size:1.2rem}
.prose-2 p{color:var(--fg-dim); font-size:.98rem}

/* stack columns */
.stack-cols{display:grid; gap:26px; grid-template-columns:1fr}
@media (min-width:700px){ .stack-cols{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1050px){ .stack-cols{grid-template-columns:repeat(4,1fr)} }
.stack-cols h4{font-family:var(--body); font-weight:600; font-size:.82rem; color:var(--fg-dim); margin:0 0 12px;
  padding-bottom:10px; border-bottom:1px solid var(--line)}
.stack-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.93rem}

/* contact block */
.contact-grid{display:grid; gap:22px; grid-template-columns:1fr}
@media (min-width:760px){ .contact-grid{grid-template-columns:repeat(3,1fr)} }
.contact-card{border:1px solid var(--line); border-radius:16px; padding:24px; background:var(--panel)}
.contact-card h3{font-size:1.06rem; margin-bottom:8px}
.contact-card p,.contact-card address{font-size:.93rem; color:var(--fg-dim); font-style:normal; margin:0; line-height:1.7}
.contact-card a{border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent)}

/* =====================================================================
   ARTWORK — every image is generated SVG, no stock photography
   ===================================================================== */
.plate{position:relative; border-radius:16px; overflow:hidden; background:#070C18; border:1px solid var(--line)}
.plate::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); border-radius:inherit; pointer-events:none}
.plate .plate-svg{width:100%; height:100%; display:block; aspect-ratio:16/10}
.plate.tall .plate-svg{aspect-ratio:4/3}
.plate.wide .plate-svg{aspect-ratio:21/8}
.chip-svg{display:block; flex:none; border-radius:13px}

/* service cards get an icon chip */
.svc-card .top{align-items:center}
.svc-card .chip-svg{margin-bottom:14px}

/* service list rows */
.svc-item{grid-template-columns:auto auto 1fr auto}
.svc-item .chip-svg{border-radius:11px}
@media (max-width:560px){ .svc-item{grid-template-columns:auto 1fr; row-gap:4px}
  .svc-item .chip-svg{grid-row:span 2} .svc-item .pv{grid-column:2} }

/* track labels get a third stop */
.track-title.run em{opacity:.72}

/* ---------- niches ---------- */
.niche-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:600px){ .niche-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .niche-grid{grid-template-columns:repeat(3,1fr)} }
.niche-card{display:block; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel);
  transition:border-color .3s, transform .3s}
.niche-card:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent); transform:translateY(-3px)}
.niche-card .plate{border:0; border-radius:0}
.niche-card .plate .plate-svg{aspect-ratio:16/9}
.niche-card .txt{padding:18px 20px 22px}
.niche-card h3{font-size:1.14rem; margin-bottom:6px}
.niche-card .tag{font-size:.82rem; color:var(--fg-dim); margin-bottom:12px}
.niche-card .go{font-size:.84rem; color:color-mix(in srgb,var(--c) 72%,#fff); border-bottom:1px solid currentColor; padding-bottom:2px}

.niche-block{border-top:1px solid var(--line); padding:clamp(38px,5vw,64px) 0; scroll-margin-top:84px}
.niche-block:last-of-type{border-bottom:1px solid var(--line)}
.niche-top{display:grid; gap:26px; grid-template-columns:1fr; align-items:center; margin-bottom:32px}
@media (min-width:900px){ .niche-top{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:44px} }
.niche-block h2{font-size:clamp(1.7rem,3.2vw,2.5rem); margin-bottom:14px}
.niche-block .lede{max-width:60ch}
.econ{display:flex; flex-wrap:wrap; gap:26px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.econ div span{display:block; font-size:.76rem; color:var(--fg-dim); margin-bottom:5px}
.econ div b{font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:-.02em;
  color:color-mix(in srgb,var(--c) 74%,#fff)}
.niche-cols{display:grid; gap:30px; grid-template-columns:1fr}
@media (min-width:900px){ .niche-cols{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:48px} }
.svc-map{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line)}
.svc-map li{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); align-items:start}
.svc-map .who{display:flex; align-items:center; gap:10px; min-width:0}
.svc-map b{font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.02em;
  color:color-mix(in srgb,var(--sc) 78%,#fff); display:block; margin-bottom:4px}
.svc-map p{margin:0; font-size:.94rem; color:var(--fg-dim)}
.wins{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.94rem}
.wins li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start}
.wins li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--c); margin-top:.58em}
.compliance{margin-top:22px; padding:14px 16px; border-left:2px solid var(--c); border-radius:0 8px 8px 0;
  background:color-mix(in srgb,var(--c) 9%,transparent); font-size:.9rem; color:var(--fg-dim)}
.niche-jump{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.niche-jump a{border:1px solid var(--line); border-radius:999px; padding:8px 15px; font-size:.87rem; color:var(--fg-dim);
  display:inline-flex; align-items:center; gap:9px; transition:all .2s}
.niche-jump a::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c)}
.niche-jump a:hover{color:var(--fg); border-color:color-mix(in srgb,var(--fg) 35%,transparent)}

/* portfolio imagery */
.case .shot{margin:0 0 22px; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.case .shot .plate-svg{aspect-ratio:16/10}
.case.wide .shot{margin:0}
@media (min-width:820px){ .case.wide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .case.wide .shot{margin:0} .case.wide .metrics{border-left:0; border-top:1px solid var(--line); padding:18px 0 0; flex-direction:row} }
.study .shot{border-radius:16px; overflow:hidden; border:1px solid var(--line); margin-bottom:0}
.study .shot .plate-svg{aspect-ratio:16/10}
.study-head{align-items:center}

/* =====================================================================
   SERVICE HUB + SERVICE PAGES
   ===================================================================== */
.skip{position:absolute; left:-9999px; top:0; z-index:300; background:var(--mint); color:#04070E;
  padding:12px 18px; border-radius:0 0 10px 0; font-weight:600}
.skip:focus{left:0}

.hub-track{margin-bottom:clamp(48px,6vw,80px)}
.hub-track:last-child{margin-bottom:0}
.hub-head{display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--line)}
@media (min-width:880px){ .hub-head{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px; align-items:baseline} }
.hub-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.hub-head .lede{font-size:1rem}
.hub-grid{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:680px){ .hub-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1180px){ .hub-grid{grid-template-columns:repeat(3,1fr)} }
.hub-card{border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel);
  display:flex; flex-direction:column; transition:border-color .3s, transform .3s}
.hub-card:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent); transform:translateY(-3px)}
.hub-plate{display:block; border:0; border-radius:0}
.hub-plate .plate-svg{aspect-ratio:16/8.5}
.hub-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.hub-body h3{font-size:1.2rem; margin-bottom:8px}
.hub-body h3 a{color:inherit}
.hub-body h3 a:hover{color:color-mix(in srgb,var(--c) 76%,#fff)}
.hub-body > p{font-size:.93rem; color:var(--fg-dim); margin-bottom:14px}
ul.mini{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:6px; font-size:.86rem; color:var(--fg-dim)}
ul.mini li{display:grid; grid-template-columns:auto 1fr; gap:9px}
ul.mini li::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--c); margin-top:.62em}
.hub-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.hub-foot .pv{font-family:var(--mono); font-size:.8rem; color:var(--fg-dim)}
.hub-foot .go{font-size:.86rem; color:color-mix(in srgb,var(--c) 74%,#fff);
  border-bottom:1px solid currentColor; padding-bottom:2px}

.svc-lead{display:grid; gap:28px; grid-template-columns:1fr; align-items:center}
@media (min-width:900px){ .svc-lead{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px} }
.svc-lead .plate .plate-svg{aspect-ratio:16/10}

.incl{display:grid; gap:30px; grid-template-columns:1fr}
@media (min-width:900px){ .incl{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:52px; align-items:start} }
.incl-list{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line)}
.incl-list li{display:grid; grid-template-columns:auto 1fr; gap:14px; padding:15px 0;
  border-bottom:1px solid var(--line); font-size:1rem; align-items:start}
.incl-list li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c); margin-top:.55em}
.incl-side h3{font-family:var(--body); font-weight:600; font-size:.82rem; color:var(--fg-dim); margin:0 0 12px}

.prose-blocks{display:grid; gap:0; border-top:1px solid var(--line)}
.prose-block{display:grid; gap:14px; grid-template-columns:1fr; padding:28px 0; border-bottom:1px solid var(--line)}
@media (min-width:860px){ .prose-block{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:44px; align-items:start} }
.prose-block h2{font-size:clamp(1.25rem,2.1vw,1.65rem)}
.prose-block p{margin:0; color:var(--fg-dim); max-width:68ch}

.rel-grid{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:680px){ .rel-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ .rel-grid{grid-template-columns:repeat(4,1fr)} }
.rel-card{display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line);
  border-radius:14px; background:var(--panel); transition:border-color .25s, transform .25s}
.rel-card:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent); transform:translateY(-2px)}
.rel-card b{display:block; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.02em; margin-bottom:5px}
.rel-card span{display:block; font-size:.86rem; color:var(--fg-dim); line-height:1.5}
.sectors a.sector-chip{transition:border-color .2s, color .2s}
.sectors a.sector-chip:hover{color:var(--fg); border-color:color-mix(in srgb,var(--c) 60%,transparent)}
.stat-band b + span,.stat-band span{font-size:.88rem}

/* ---------- niche USP + richer service map ---------- */
.usp-row{margin:34px 0; padding:26px 0; border-block:1px solid var(--line)}
.usp-title,.col-title{font-family:var(--display); font-weight:700; font-size:1.06rem; letter-spacing:-.02em; margin:0 0 18px}
.usp-grid{display:grid; gap:22px; grid-template-columns:1fr}
@media (min-width:820px){ .usp-grid{grid-template-columns:repeat(3,1fr); gap:34px} }
.usp h4{font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.02em; margin:0 0 8px;
  padding-left:14px; border-left:2px solid var(--c)}
.usp p{margin:0; font-size:.94rem; color:var(--fg-dim); padding-left:14px}
.svc-map li{padding:20px 0}
.svc-map .who{display:block}
.svc-map b a{color:inherit}
.svc-map b a:hover{text-decoration:underline}
.svc-map strong{display:block; font-weight:600; font-size:.98rem; margin-bottom:6px; color:var(--fg)}
.niche-side{position:relative}
@media (min-width:900px){ .niche-side{position:sticky; top:92px} }