/* ══ tokens ═════════════════════════════════════════════
   Repalette: silver / black / grey. Every blue value below
   was retuned in place, so the sections further down the
   page inherit the new scheme without being rewritten.
   ═════════════════════════════════════════════════════ */
:root{
  --bg:#050607;
  --panel:#0A0C0E;
  --panel-2:#101317;
  --line:#1A1D21;
  --line-2:#2C3136;
  --cy:#C9CED4;          /* was blue — now the silver accent */
  --cy-fill:#D8DDE2;     /* button fill; pairs with dark type */
  --cy-lt:#EDF0F3;       /* highlight */
  --cy-dim:rgba(255,255,255,.07);
  --text:#F2F5F8;
  --muted:#7A8188;

  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --ink:#07080A;         /* type that sits on a silver fill */
  --pad:clamp(22px,5vw,72px);
  --max:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);
     -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
body.nav-open{overflow:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:8px;z-index:99;
      background:var(--cy-fill);color:var(--ink);padding:10px 16px;font-weight:600}
.skip:focus{left:12px}

/* ══ shared ═════════════════════════════════════════════ */
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
     text-transform:uppercase;color:var(--cy);margin-bottom:14px}

h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.05}
h1{font-weight:800;font-size:clamp(38px,6.1vw,80px);text-transform:uppercase;
   line-height:.98;letter-spacing:-.028em}
h2{font-weight:800;font-size:clamp(26px,3.4vw,42px);text-transform:uppercase}

/* accent word — kept for the inner pages */
.cy{color:var(--cy);text-shadow:0 0 34px rgba(201,206,212,.28)}

/* brushed chrome, sampled off the logo. One line only —
   the gradient maps to the element box, so a span that
   wraps renders line one near-white and line two dark. */
.metal{
  background:linear-gradient(178deg,#FFFFFF 4%,#E4E8EC 24%,#9BA2A9 52%,
                             #F4F6F8 66%,#7C838A 88%,#B9BFC6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
}

.btn{
  display:inline-block;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(180deg,#F2F5F8 0%,#C2C8CE 100%);
  color:var(--ink);font-weight:500;line-height:1;
  padding:17px 34px;border:1px solid rgba(255,255,255,.2);
  transition:background .18s,box-shadow .18s,transform .18s;
}
.btn:hover{background:linear-gradient(180deg,#fff 0%,#D6DBE0 100%);
           box-shadow:0 12px 34px -18px rgba(226,232,238,.55);transform:translateY(-1px)}
.btn-ghost{background:none;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--cy-dim);border-color:rgba(255,255,255,.32);
                 box-shadow:none;color:var(--text)}
.btn-sm{padding:11px 18px;font-size:11px}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ══ masthead ═══════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);
  transition:background .25s,border-color .25s,padding .25s;
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(5,6,7,.9);backdrop-filter:blur(10px);
           border-bottom-color:var(--line);padding:10px var(--pad)}

.logo{display:block;line-height:0}
.logo img{
  height:clamp(42px,4.4vw,58px);width:auto;display:block;
  filter:drop-shadow(0 0 18px rgba(201,206,212,.14));
  transition:height .25s;
}
.nav.stuck .logo img{height:clamp(36px,3.6vw,46px)}
.logo-foot img{height:44px;filter:none;opacity:.85}

/* three lines — a real 52px target, always visible */
.burger{
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  width:56px;height:52px;padding:0 8px;
  border:1px solid var(--line-2);
  background:rgba(10,12,14,.5);
  backdrop-filter:blur(6px);cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.burger span{
  display:block;width:100%;height:2px;background:var(--text);
  transition:width .3s var(--ease),background .25s var(--ease);
}
.burger span:nth-child(2){width:70%}
.burger:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05)}
.burger:hover span{background:#fff}
.burger:hover span:nth-child(2){width:100%}

/* ══ drawer ═════════════════════════════════════════════ */
.scrim{
  position:fixed;inset:0;z-index:60;
  background:rgba(3,4,5,.72);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.scrim.on{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:min(440px,88vw);
  background:linear-gradient(200deg,#0D0F12 0%,#07080A 100%);
  border-left:1px solid var(--line-2);
  transform:translateX(101%);
  transition:transform .52s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:16px clamp(24px,3vw,40px) clamp(30px,4vh,44px);
}
.drawer.on{transform:translateX(0)}

.drawer-top{display:flex;justify-content:flex-end;margin-bottom:clamp(14px,2.6vh,26px)}
.drawer-close{
  width:44px;height:44px;border:1px solid var(--line-2);background:none;
  display:grid;place-items:center;color:var(--muted);cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.drawer-close:hover{color:#fff;border-color:rgba(255,255,255,.3)}

.drawer-nav{display:flex;flex-direction:column}

/* every top-level row shares one shape, button or link */
.dn-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:15px 0;text-align:left;
  border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;
  color:inherit;font:inherit;
}
.dn-top b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2.8vw,24px);letter-spacing:-.015em;
  text-transform:uppercase;color:var(--text);line-height:1.1;
  transition:color .2s var(--ease),transform .3s var(--ease);
}
.dn-top small{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.dn-top:hover b{color:#fff;transform:translateX(6px)}
.dn-chev{width:13px;height:13px;flex:none;color:var(--muted);
         transition:transform .35s var(--ease),color .2s var(--ease)}
.dn-top[aria-expanded="true"] .dn-chev{transform:rotate(180deg);color:var(--text)}

/* 0fr -> 1fr animates to the content's real height, no magic max-height */
.dn-sub{display:grid;grid-template-rows:0fr;
        transition:grid-template-rows .42s var(--ease)}
.dn-group.open .dn-sub{grid-template-rows:1fr}
.dn-sub > div{overflow:hidden}
.dn-sub a{
  display:block;padding:12px 0 12px 18px;
  border-bottom:1px solid var(--line);
  box-shadow:inset 2px 0 0 -1px var(--line-2);
}
.dn-sub a:last-child{border-bottom:0}
.dn-sub b{
  display:block;font-family:var(--display);font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.01em;color:#D7DCE2;
  transition:color .2s var(--ease),transform .3s var(--ease);
}
.dn-sub small{
  display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.dn-sub a:hover b{color:#fff;transform:translateX(5px)}

/* staggered entrance, now that rows are mixed elements */
.drawer-nav > *{opacity:0;transform:translateY(10px)}
.drawer.on .drawer-nav > *{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.drawer.on .drawer-nav > *:nth-child(1){transition-delay:.14s}
.drawer.on .drawer-nav > *:nth-child(2){transition-delay:.2s}
.drawer.on .drawer-nav > *:nth-child(3){transition-delay:.26s}
.drawer.on .drawer-nav > *:nth-child(4){transition-delay:.32s}

.drawer-foot{margin-top:auto;padding-top:clamp(18px,2.8vh,30px)}
.drawer-foot .btn{display:block;text-align:center;padding:16px}
.drawer-contact{
  margin-top:16px;display:flex;flex-direction:column;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted);
}
.drawer-contact a:hover{color:#fff}

/* ══ hero ═══════════════════════════════════════════════
   Left-aligned editorial column, vertically centred. The
   board is not a backdrop — it holds the right half of the
   composition, so the overlay only darkens the left.
   ═════════════════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
      text-align:left;padding:120px var(--pad) 30px;overflow:hidden}

/* two layers: #board is etched once, #signal carries the pulses */
#board,#signal{position:absolute;inset:0;width:100%;height:100%;display:block}
#board{z-index:0}
#signal{z-index:1}

.hero-fade{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    /* weighted left so type stays clean and the right half breathes */
    linear-gradient(90deg,rgba(5,6,7,.95) 0%,rgba(5,6,7,.9) 26%,
                    rgba(5,6,7,.6) 48%,rgba(5,6,7,.15) 72%,transparent 92%),
    linear-gradient(180deg,rgba(5,6,7,.92) 0%,transparent 22%,
                    transparent 66%,var(--bg) 100%);
}

.hero-in{position:relative;z-index:3;flex:1;width:100%;max-width:var(--max);
         margin:0 auto;display:flex;flex-direction:column;
         align-items:flex-start;justify-content:center;padding:104px 0 64px}

/* the one hairline that separates claim from proof */
.hero-rule{display:block;width:56px;height:2px;margin:34px 0 0;
           background:linear-gradient(90deg,#F2F5F8,rgba(201,206,212,.15))}

/* terminal readout eyebrow */
.term-eyebrow{
  font-family:var(--mono);font-size:13px;
  letter-spacing:.42em;color:var(--muted);margin-bottom:13px;
  min-height:1.5em;white-space:pre-wrap;text-align:left;line-height:1.9;
  text-transform:uppercase;
}
.term-eyebrow .tk-key{color:var(--line-2)}
.term-eyebrow .tk-caret{
  display:inline-block;width:7px;background:var(--cy);
  margin-left:2px;animation:caret 1s step-end infinite;
}
@keyframes caret{50%{opacity:0}}

.hero h1{font-weight:400;font-size:clamp(31px,4.35vw,57px);line-height:1.14;
         letter-spacing:-.012em;max-width:none}

.lede{max-width:510px;margin:26px 0 42px;color:#B4BBC2;font-weight:400;
      font-size:clamp(16px,1.35vw,18px);line-height:1.8}

.hero .actions{justify-content:flex-start;gap:28px}
.hero .actions .btn{padding:16px 40px}

.trust{position:relative;z-index:3;list-style:none;width:100%;
       border-top:1px solid var(--line);padding-top:20px;margin:0;
       display:flex;align-items:center;flex-wrap:wrap;
       font-family:var(--mono);font-size:11px;letter-spacing:.14em;
       text-transform:uppercase;color:var(--steel,#8A9199)}
.trust li{display:flex;align-items:center;gap:13px;
          padding:6px clamp(22px,3.4vw,52px) 6px 0}
.trust li + li{border-left:1px solid var(--line);
               padding-left:clamp(22px,3.4vw,52px)}
.trust-ico{width:32px;height:32px;flex:none;display:grid;place-items:center;
           border:1px solid var(--line-2);border-radius:50%;color:var(--cy)}
.trust-ico svg{width:15px;height:15px;stroke-linecap:round;stroke-linejoin:round}
.actions{justify-content:center}

/* a guaranteed 64px between the CTAs and the bar costs height, so
   shorter windows trade some of the top offset back */
@media(max-height:900px) and (min-width:721px){
  .hero{padding-top:96px;padding-bottom:24px}
  .hero-in{padding:26px 0 48px}
  .lede{margin-bottom:34px}
}
@media(max-height:760px) and (min-width:721px){
  .hero{padding-top:84px}
  .hero-in{padding:12px 0 40px}
  .lede{margin:22px 0 26px}
  .hero-rule{margin-top:26px}
}
@media(max-width:720px){
  .hero-in{padding:20px 0 36px}
}

/* ══ sections ═══════════════════════════════════════════ */
.sec{max-width:var(--max);margin:0 auto;padding:clamp(80px,10vw,140px) var(--pad)}
.head{max-width:60ch;margin-bottom:72px}
.sub{color:var(--muted);margin-top:14px;font-size:16px}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);
         gap:clamp(32px,5vw,72px)}
.pillar{padding:0;display:flex;flex-direction:column}
.pillar > header{padding-bottom:24px;border-bottom:1px solid var(--line-2);
                 margin-bottom:8px}
.pillar h3{font-size:22px;font-weight:800;text-transform:uppercase;
           margin-bottom:8px}
.pillar-line{color:var(--muted);font-size:14px;font-style:italic}
.pillar dl > div{padding:22px 0;border-bottom:1px solid var(--line)}
.pillar dl > div:last-child{border-bottom:0}
.pillar dt{font-family:var(--display);font-weight:700;font-size:15px;
           margin-bottom:7px;display:flex;align-items:center;gap:9px}
.pillar dt::before{content:"";width:5px;height:5px;flex:none;
                   border:1px solid var(--cy);border-radius:50%}
.pillar dd{color:var(--muted);font-size:14px;line-height:1.65;padding-left:14px}

/* ══ why — argument left, evidence right ════════════════
   The tower is a halftone plate, not a photo: it belongs to
   the same dot/grid vocabulary as the hero board.
   ═════════════════════════════════════════════════════ */
.sec-why{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
         max-width:none;background:transparent;
         padding-top:clamp(48px,5vw,76px);padding-bottom:clamp(48px,5vw,76px)}
.sec-why h2{font-size:clamp(24px,2.9vw,36px);line-height:1.1}
.why-grid{max-width:var(--max);margin:0 auto;
          display:grid;grid-template-columns:1.15fr .85fr;
          gap:clamp(32px,5vw,68px);align-items:start}

.why-lede{margin-top:16px;max-width:50ch;color:#B4BBC2;
          font-size:clamp(14.5px,1.1vw,15.5px);line-height:1.6}

.why-label{margin-top:30px;padding-bottom:10px;border-bottom:1px solid var(--line-2);
           font-family:var(--mono);font-size:11px;letter-spacing:.22em;
           text-transform:uppercase;color:var(--muted)}

.diff{list-style:none;margin-top:0}
.diff li{padding:15px 0;border-top:1px solid var(--line)}
.diff li:first-child{border-top:0}
.diff h4{font-family:var(--display);font-weight:700;font-size:15px;
         margin-bottom:4px}
.diff p{color:var(--muted);font-size:13.5px;line-height:1.55;max-width:46ch}

/* the plate */
.why-visual{margin:0;display:flex;flex-direction:column;
            border:1px solid var(--line-2);
            background:linear-gradient(180deg,#0E1114 0%,#08090B 100%)}
.tower{position:relative;overflow:hidden;aspect-ratio:1/.84;
       border-bottom:1px solid var(--line)}
.tower img,.tower canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 20%;
  /* let the dots dissolve into the panel instead of ending on a seam */
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
}
.tower canvas{z-index:1;opacity:0;transition:opacity .3s ease}
/* once the particle field is live the source image steps aside,
   but stays in the DOM so its alt text survives */
.tower.live canvas{opacity:1}
.tower.live img{opacity:0}

/* it builds from the ground up as it enters view */
.why-visual .tower img,.why-visual .tower canvas{
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.5s cubic-bezier(.22,1,.36,1) .12s,opacity .3s ease}
.why-visual.in .tower img,.why-visual.in .tower canvas{clip-path:inset(0 0 0 0)}

.field{padding:20px 22px 22px}
.field .tag{margin-bottom:9px}
.field-body{color:#B4BBC2;font-size:13.5px;line-height:1.6}
.field-sig{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
           font-weight:600;font-size:13px;color:var(--text)}

@media(max-width:980px){
  .why-visual{max-width:460px}
  .tower{aspect-ratio:1/.82}
}
@media(prefers-reduced-motion:reduce){
  .why-visual .tower img,.why-visual .tower canvas{clip-path:none}
}

/* ══ process ════════════════════════════════════════════ */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
       gap:clamp(28px,4vw,56px)}
.steps li{padding:28px 0 0;border-top:1px solid var(--line-2)}
.n{font-family:var(--mono);font-size:12px;letter-spacing:.18em;
   color:var(--cy);display:block;margin-bottom:22px}
.steps h3{font-size:17px;font-weight:800;text-transform:uppercase;
          margin-bottom:10px}
.steps p{color:var(--muted);font-size:14px;line-height:1.65}

/* ══ clients — a logo wall that drives one quote ═══════════
   The testimonials run long, so hovering a mark swaps a single
   panel rather than stuffing a quote into a grid cell.
   ═════════════════════════════════════════════════════════ */
.sec-clients{padding:clamp(52px,5.5vw,80px) 0 clamp(56px,6vw,88px);
             overflow:hidden;border-top:1px solid var(--line)}
.clients-head{max-width:var(--max);margin:0 auto;padding:0 var(--pad);text-align:center}
.clients-head h2{font-size:clamp(24px,3vw,38px);line-height:1.1;letter-spacing:-.02em}

.room{position:relative;margin-top:clamp(26px,3.4vw,44px);
      padding:clamp(40px,5vw,72px) var(--pad) clamp(30px,4vw,52px)}
#room{position:absolute;inset:0;width:100%;height:100%;display:block;
      pointer-events:none;z-index:0}

.clients{
  position:relative;z-index:1;list-style:none;margin:0 auto;padding:0;
  max-width:1120px;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.client{
  width:100%;background:rgba(5,6,7,.88);border:0;cursor:pointer;
  display:grid;place-items:center;
  padding:clamp(20px,2.4vw,30px) clamp(10px,1.4vw,20px);
  transition:background .35s var(--ease);
}
.client img{
  box-sizing:border-box;
  width:100%;max-width:152px;height:auto;display:block;
  /* The chip. Seven of these marks are dark navy or pure black with no
     light version in them to recover — measured ink luminance runs 0–47
     out of 255 against a page at #080B14. A light surface is the only
     thing that makes them legible without altering the logos. */
  background:#F1F3F5;border-radius:10px;padding:12px 14px;
  opacity:.9;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),
             filter .45s var(--ease),background-color .45s var(--ease);
}
.clients.in .client img{transform:none}
.clients.in .client:nth-child(1) img{transition-delay:.05s}
.clients.in .client:nth-child(2) img{transition-delay:.11s}
.clients.in .client:nth-child(3) img{transition-delay:.17s}
.clients.in .client:nth-child(4) img{transition-delay:.23s}
.clients.in .client:nth-child(5) img{transition-delay:.29s}
.clients.in .client:nth-child(6) img{transition-delay:.35s}

.client:hover,.client:focus-visible,.client.on{background:rgba(255,255,255,.04)}
.client:hover img,.client:focus-visible img,.client.on img{
  opacity:1;background:#FFF;
  filter:drop-shadow(0 0 16px rgba(226,232,238,.3))}

/* one panel, swapped on hover — min-height stops the page jumping
   as quotes of different lengths cycle through */
.quote{
  position:relative;z-index:1;margin:clamp(30px,4vw,52px) auto 0;
  max-width:74ch;text-align:center;min-height:250px;
  opacity:1;transition:opacity .22s ease;
}
.quote.swap{opacity:0}
.quote blockquote{
  margin:0;color:#C3CAD1;font-size:clamp(15px,1.35vw,18px);
  line-height:1.75;font-style:italic;
}
.quote figcaption{
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line);
  display:inline-flex;flex-direction:column;gap:5px;
}
.quote b{font-family:var(--display);font-weight:700;font-size:14.5px;
         letter-spacing:.01em;color:var(--text)}
.quote span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
            text-transform:uppercase;color:var(--muted)}

@media(max-width:1024px){
  .clients{grid-template-columns:repeat(3,1fr)}
  .client img{max-width:150px}
  .quote{min-height:300px}
}
@media(max-width:560px){
  .clients{grid-template-columns:repeat(2,1fr)}
  .client img{max-width:130px;opacity:.9}
  .quote{min-height:360px}
  .quote blockquote{font-size:14.5px;line-height:1.7}
}
@media(prefers-reduced-motion:reduce){
  .client img{transform:none}
  .quote{transition:none}
}

/* ══ cta ════════════════════════════════════════════════ */
.cta{border-top:1px solid var(--line);
     background:radial-gradient(70% 130% at 50% 100%,rgba(201,206,212,.07),transparent 66%),var(--bg)}
.cta-in{max-width:var(--max);margin:0 auto;
        padding:clamp(72px,9vw,116px) var(--pad);text-align:center}
.cta h2{font-size:clamp(26px,3.6vw,46px)}
.cta-sub{color:var(--muted);max-width:56ch;margin:18px auto 34px}
.cta .actions{justify-content:center}

/* ══ subpages ══════════════════════════════════════════════
   .phero / .cap-grid / .crumb / .eyebrow / .psub were used by
   infrastructure, ai and msp but never defined anywhere — this
   is the missing layer, built on the homepage's system.
   ═════════════════════════════════════════════════════════ */
.subpage .nav{background:rgba(5,6,7,.9);backdrop-filter:blur(10px);
              border-bottom-color:var(--line)}

.phero{
  position:relative;overflow:hidden;
  padding:clamp(140px,14vw,190px) var(--pad) clamp(56px,6.5vw,92px);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 80% at 12% 0%,rgba(255,255,255,.05),transparent 62%),
    linear-gradient(180deg,#0A0C0E 0%,var(--bg) 100%);
}
/* faint engineering grid, so the page reads as part of the board world */
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 70% at 20% 30%,#000,transparent 75%);
  mask-image:radial-gradient(90% 70% at 20% 30%,#000,transparent 75%);
}
.phero-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto}

.crumb{
  display:inline-block;margin-bottom:26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
  transition:color .2s var(--ease);
}
.crumb:hover{color:var(--text)}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--steel,#8A9199);margin-bottom:16px;
}

.phero h1{
  font-weight:400;font-size:clamp(32px,4.6vw,60px);
  line-height:1.12;letter-spacing:-.02em;text-transform:uppercase;
  max-width:16ch;
}
.phero .hero-rule{margin:30px 0 0}
.phero .lede{margin:26px 0 36px}
.phero .actions{justify-content:flex-start}

/* capability cards — .cap itself is styled in theme.css */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);
          gap:clamp(16px,2vw,26px)}
/* the AI page carries eight capabilities, so it runs four up */
.cap-grid-4{grid-template-columns:repeat(4,1fr)}
.cap h3{letter-spacing:-.01em}
.cap h3::after{content:"";display:block;width:24px;height:1px;
               background:var(--line-2);margin:12px 0 14px}

/* the evidence panel these pages share with the homepage */
.psub{color:#B4BBC2;font-size:clamp(15px,1.2vw,17px);line-height:1.7;
      max-width:56ch;margin-top:18px}
.proof{
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,#0E1114 0%,#08090B 100%);
  padding:30px 28px;position:relative;
}
.proof::before,.proof::after{
  content:"";position:absolute;width:9px;height:9px;background:var(--cy);
  box-shadow:0 0 12px rgba(201,206,212,.5);
}
.proof::before{top:-1px;left:-1px}
.proof::after{bottom:-1px;right:-1px}
.proof-body{color:#B4BBC2;font-size:14.5px;line-height:1.7}
.proof-sig{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
           font-weight:600;font-size:14px;color:var(--text)}

/* current page, marked in the drawer */
.drawer-nav a[aria-current="page"] b{color:#fff}
.drawer-nav a[aria-current="page"] small{color:var(--cy)}
.dn-sub a[aria-current="page"]{box-shadow:inset 3px 0 0 -1px var(--cy)}

@media(max-width:1180px){
  .cap-grid-4{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .cap-grid,.cap-grid-4{grid-template-columns:repeat(2,1fr)}
  .phero h1{max-width:100%}
}
@media(max-width:620px){
  .cap-grid,.cap-grid-4{grid-template-columns:1fr}
  .phero{padding-top:clamp(120px,26vw,150px)}
  .phero h1{font-size:clamp(28px,7.6vw,36px)}
}

/* ══ infrastructure — city flythrough ══════════════════════
   The stage sticks while the wrapper scrolls past it, so the
   description rises over the city instead of the city simply
   scrolling away. Same display face as the homepage hero.
   ═════════════════════════════════════════════════════════ */
.city-wrap{position:relative;height:180svh}
.city-stage{position:sticky;top:0;height:100svh;overflow:hidden;
            display:flex;align-items:center;
            padding:0 var(--pad)}
#cityCv,#netCv,#sphereCv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.city-stage::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* a pool shaped around the headline instead of dimming half the
       frame — the city keeps its left side */
    radial-gradient(48% 40% at 27% 45%,rgba(5,6,7,.95) 0%,
                    rgba(5,6,7,.78) 42%,transparent 76%),
    linear-gradient(90deg,rgba(5,6,7,.55) 0%,rgba(5,6,7,.12) 26%,transparent 46%),
    linear-gradient(180deg,rgba(5,6,7,.8) 0%,transparent 16%,
                    transparent 68%,var(--bg) 100%);
}
.city-in{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
         will-change:opacity,transform}
.city-in h1{
  font-weight:400;font-size:clamp(31px,4.35vw,57px);line-height:1.14;
  letter-spacing:-.012em;text-transform:uppercase;color:var(--text);
  max-width:none;margin:0;
}
.city-cue{
  display:inline-flex;align-items:center;gap:12px;margin-top:clamp(28px,4vh,46px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);
}
.city-cue i{font-style:normal}
.city-cue svg{color:#C8CDD3}
.city-dot{animation:cityDot 2.4s ease-in-out infinite}
@keyframes cityDot{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.25;transform:translateY(7px)}}

/* the description rides up over the sticky stage */
.phero-after{position:relative;z-index:3;background:var(--bg);
             padding-top:clamp(70px,8vw,110px)}
.phero-after::before{opacity:.35}
/* the headline lives up in the city, so this label is the section's
   title — it needs to carry that weight */
.phero-after .eyebrow{
  font-size:clamp(19px,2.3vw,30px);letter-spacing:.2em;
  color:#E3E8ED;margin-bottom:22px;
}
.phero-after .hero-rule{margin:0 0 6px;width:72px}

@media(prefers-reduced-motion:reduce){
  .city-wrap{height:100svh}
  .city-dot{animation:none}
}
@media(max-width:720px){
  .city-wrap{height:150svh}
  .city-stage::after{background:
    linear-gradient(180deg,rgba(5,6,7,.8) 0%,rgba(5,6,7,.3) 34%,
                    rgba(5,6,7,.75) 78%,var(--bg) 100%)}
}

/* ══ capability index ══════════════════════════════════════
   Rows, not cards. Five items in a three-up grid always orphans
   two; a row list reads complete at any count, and it suits the
   lattice plate behind it.
   ═════════════════════════════════════════════════════════ */
.sec-index{padding:clamp(64px,7vw,110px) 0;position:relative;overflow:hidden;
           border-top:1px solid var(--line)}
.index-head{max-width:var(--max);margin:0 auto clamp(34px,4.4vw,60px);padding:0 var(--pad)}
.index-head h2{font-size:clamp(26px,3.4vw,44px);line-height:1.1;letter-spacing:-.022em}
.index-head .sub{max-width:62ch;margin-top:14px}

.index-stage{position:relative;padding:clamp(20px,3vw,40px) var(--pad)}
#latticeCv{position:absolute;inset:0;width:100%;height:100%;display:block;
           pointer-events:none;z-index:0}

/* the lattice keeps the edges and gets out of the way of the copy */
#latticeCv{-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.22) 24%,
             rgba(0,0,0,.14) 68%,rgba(0,0,0,.75) 100%);
           mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.22) 24%,
             rgba(0,0,0,.14) 68%,rgba(0,0,0,.75) 100%)}

.bus-wrap{position:relative;z-index:1;max-width:var(--max);margin:0 auto;
          padding-top:104px}
#busCv{position:absolute;inset:0;width:100%;height:100%;display:block;
       pointer-events:none;z-index:0}

.cap-bus{position:relative;z-index:1;list-style:none;margin:0;padding:0;
         display:grid;grid-template-columns:repeat(5,1fr);
         gap:clamp(14px,2vw,28px)}

/* each column rises as the trunk reaches it */
.bus-col{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(.34s + var(--i) * .13s);
}
.bus-wrap.built .bus-col{opacity:1;transform:none}

.bus-col .cap-n{display:block;font-family:var(--mono);font-size:11.5px;
                letter-spacing:.2em;color:var(--muted);margin-bottom:12px;
                transition:color .3s var(--ease)}
.bus-col h3{margin:0 0 10px;font-size:clamp(15px,1.35vw,18px);font-weight:800;
            text-transform:uppercase;letter-spacing:-.005em;line-height:1.2;
            color:var(--text)}
.bus-col p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65;
           transition:color .3s var(--ease)}
.bus-col:hover .cap-n{color:var(--cy)}
.bus-col:hover p{color:#B4BBC2}

/* below five-up the trunk stops making sense, so the rule goes vertical */
@media(max-width:900px){
  #busCv{display:none}
  .bus-wrap{padding-top:0}
  .cap-bus{grid-template-columns:repeat(2,1fr);gap:0}
  .bus-col{padding:22px 0 24px;border-top:1px solid var(--line-2);
           opacity:1;transform:none}
  .bus-col:nth-child(odd){padding-right:clamp(16px,3vw,34px)}
  .bus-col:nth-child(even){padding-left:clamp(16px,3vw,34px);
                           border-left:1px solid var(--line)}
}
@media(max-width:560px){
  .cap-bus{grid-template-columns:1fr}
  .bus-col:nth-child(even){padding-left:0;border-left:0}
  .bus-col:nth-child(odd){padding-right:0}
}

/* ══ AI page ═══════════════════════════════════════════════
   Hero carries the ribbed tunnel; the copy sits on a scrim so
   the metal never fights the type.
   ═════════════════════════════════════════════════════════ */
.phero-ai{padding-top:clamp(150px,15vw,210px);padding-bottom:clamp(70px,8vw,110px)}
.phero-ai::before{opacity:.22}          /* quiet the engineering grid under it */
#tunnel{position:absolute;inset:0;width:100%;height:100%;display:block;
        pointer-events:none;z-index:0;
        -webkit-mask-image:radial-gradient(72% 88% at 72% 50%,#000 30%,transparent 82%);
        mask-image:radial-gradient(72% 88% at 72% 50%,#000 30%,transparent 82%)}
.phero-ai .phero-in{z-index:2}
.phero-ai::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 4%,rgba(5,6,7,.88) 34%,
             rgba(5,6,7,.35) 62%,transparent 88%);
}

/* ── 01 the position ── */
.sec-brief{max-width:none;background:transparent;
           border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brief-grid{max-width:var(--max);margin:0 auto;
            display:grid;grid-template-columns:1.25fr .75fr;
            gap:clamp(32px,5vw,72px);align-items:start}
.brief-tag{margin-top:38px}
.brief-lead{font-family:var(--display);font-weight:400;
            font-size:clamp(21px,2.4vw,30px);line-height:1.3;
            letter-spacing:-.015em;color:var(--text);max-width:22ch}
.brief-body{color:#B4BBC2;font-size:clamp(15px,1.2vw,16.5px);
            line-height:1.75;max-width:60ch}
.brief-list{list-style:none;margin:0;padding:0}
.brief-list li{
  position:relative;padding:14px 0 14px 26px;max-width:62ch;
  border-bottom:1px solid var(--line);
  color:#B4BBC2;font-size:14.5px;line-height:1.65;
}
.brief-list li:last-child{border-bottom:0}
.brief-list li::before{
  content:"";position:absolute;left:0;top:22px;width:7px;height:1px;
  background:var(--cy);box-shadow:0 0 8px rgba(201,206,212,.6);
}

@media(max-width:900px){
  .brief-grid{grid-template-columns:1fr}
  #tunnel{-webkit-mask-image:radial-gradient(90% 70% at 50% 26%,#000 25%,transparent 78%);
          mask-image:radial-gradient(90% 70% at 50% 26%,#000 25%,transparent 78%)}
  .phero-ai::after{background:linear-gradient(180deg,rgba(5,6,7,.55) 0%,rgba(5,6,7,.9) 46%,var(--bg) 100%)}
}

/* ══ footer ═════════════════════════════════════════════ */
.foot{border-top:1px solid var(--line)}
.foot-in{max-width:var(--max);margin:0 auto;padding:34px var(--pad);
         display:flex;align-items:center;justify-content:space-between;
         flex-wrap:wrap;gap:18px}
.foot-links{display:flex;flex-wrap:wrap;gap:14px 26px;
            font-family:var(--mono);font-size:11px;
            letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot-links a:hover{color:var(--cy)}
.foot-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
           text-transform:uppercase;color:var(--muted)}

/* ══ responsive ═════════════════════════════════════════ */
@media(max-width:980px){
  /* not enough width for a left column plus open board — even the fade out */
  .hero-fade{background:
    linear-gradient(90deg,rgba(5,6,7,.94) 0%,rgba(5,6,7,.82) 46%,rgba(5,6,7,.5) 100%),
    linear-gradient(180deg,rgba(5,6,7,.92) 0%,transparent 22%,
                    transparent 66%,var(--bg) 100%)}
  .pillars,.steps{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .pillars,.steps{grid-template-columns:1fr}
  .hero{padding:130px var(--pad) 90px}
  .term-eyebrow{letter-spacing:.28em;font-size:11.5px;margin-bottom:26px}
  .hero h1{max-width:100%;font-size:clamp(25px,7.4vw,32px);line-height:1.1}
  /* the chrome gradient maps to the element box, so a wrapped span
     bands badly. At phone sizes the gradient reads as flat anyway. */
  .metal{background:none;-webkit-text-fill-color:#D6DBE0;
         color:#D6DBE0;filter:none}
  .lede{margin:26px 0 34px}
  .hero .actions{width:100%;gap:12px}
  .hero .actions .btn{flex:1 1 100%;text-align:center;padding:16px 20px}
  .trust{font-size:9.5px;letter-spacing:.1em;padding-top:16px}
  .trust li{padding:5px 14px 5px 0;gap:9px}
  .trust li + li{border-left:0;padding-left:0}
  .trust-ico{width:26px;height:26px}
  .trust-ico svg{width:13px;height:13px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}

/* ══ intro overlay ══════════════════════════════════════════
   Full-screen video that holds the viewport until the user
   scrolls, then lifts to reveal the site.
   ═════════════════════════════════════════════════════════ */
.intro{
  position:fixed;inset:0;z-index:100;
  background:#000;overflow:hidden;
  opacity:1;transition:opacity .8s ease;
}
.intro-video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(52vw,620px);height:auto;max-height:70vh;
  object-fit:contain;
}
.intro-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.6) 100%);
}

.intro-cue{
  position:absolute;left:50%;bottom:40px;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(242,246,250,.7);
  animation:cueFloat 2.4s ease-in-out infinite;
}
.intro-cue svg{color:#C8CDD3}
.intro-cue-dot{animation:cueDot 2.4s ease-in-out infinite}
@keyframes cueFloat{50%{transform:translate(-50%,7px)}}
@keyframes cueDot{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.3;transform:translateY(8px)}}

/* once dismissed, take it out of the layout entirely */
.intro.gone{opacity:0;pointer-events:none}

/* lock scroll while the intro is up */
body.intro-lock{overflow:hidden;height:100vh}

@media(prefers-reduced-motion:reduce){
  .intro-cue,.intro-cue-dot{animation:none}
}

@media(max-width:720px){
  .intro-video{width:82vw}
}

/* ══ calm reveal ════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(24px);
        transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ══ pillars — three cards fed by one trunk ═════════════════
   Full-bleed so the perspective grid runs edge to edge. The
   connector is drawn on canvas from the measured card
   positions, so it stays aligned at any width.
   ═════════════════════════════════════════════════════════ */
.sec-pillars{padding:clamp(40px,4.2vw,64px) 0 clamp(40px,4.2vw,64px);overflow:hidden}

.pillars-head{max-width:var(--max);margin:0 auto;padding:0 var(--pad);text-align:center}
.pillars-head .tag{margin-bottom:18px}
.pillars-head h2{font-size:clamp(26px,3.4vw,44px);line-height:1.1;letter-spacing:-.022em}
.pillars-head .sub{max-width:46ch;margin:14px auto 0;color:#98A0A8;font-size:clamp(14px,1.15vw,16px);line-height:1.65}

.stage{position:relative;margin-top:clamp(14px,1.8vw,24px);
       padding:clamp(78px,8vw,124px) var(--pad) 0}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#grid{z-index:0}
#link{z-index:3}   /* above the cards, or the outline pulse is hidden behind them */

.routes{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
        display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}

.route{
  display:flex;flex-direction:column;
  padding:26px 26px 24px;
  background:linear-gradient(180deg,#121519 0%,#08090B 100%);
  border:1px solid var(--line-2);
  position:relative;overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
/* the trunk lands here — a lit contact on the top edge */
.route::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:52px;height:2px;background:var(--cy);
  box-shadow:0 0 14px rgba(201,206,212,.65);opacity:.8;
}
.route:hover{border-color:rgba(255,255,255,.34);transform:translateY(-3px);
             box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}

.route-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
         color:var(--muted);display:block;margin-bottom:14px}
.route h3{font-size:clamp(17px,1.6vw,21px);font-weight:800;text-transform:uppercase;
          letter-spacing:-.01em;margin-bottom:12px}
.route h3::after{content:"";display:block;width:24px;height:1px;
                 background:var(--line-2);margin-top:12px}
.route-line{color:var(--text);font-size:14.5px;line-height:1.55;margin-bottom:12px}
.route-body{color:var(--muted);font-size:13.5px;line-height:1.65;margin-bottom:24px}
.route-go{
  margin-top:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.route-go i{font-style:normal;color:var(--cy);transition:transform .25s}
.route:hover .route-go i{transform:translateX(5px)}

@media(max-width:900px){
  .routes{grid-template-columns:1fr;max-width:520px}
  .stage{padding-top:clamp(110px,26vw,170px)}
  /* stacked cards: the trunk only reaches the first one */
  .route + .route::before{display:none}
}


.bot-launch:hover{background:linear-gradient(180deg,#fff 0%,#D6DBE0 100%);
                  box-shadow:0 8px 36px rgba(226,232,238,.18);transform:translateY(-2px)}
.bot-launch-ico{font-style:normal;font-weight:600}
.bot-launch.hidden{opacity:0;pointer-events:none;transform:translateY(10px)}

.bot{
  position:fixed;right:22px;bottom:22px;z-index:81;
  width:min(400px,calc(100vw - 32px));
  background:#000;border:1px solid #22262B;border-radius:10px;overflow:hidden;
  font-family:var(--mono);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transform:translateY(16px) scale(.98);
  transition:opacity .3s ease,transform .3s ease;
}
.bot.open{opacity:1;pointer-events:auto;transform:none}

.bot-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;
         background:#0a0c0e;border-bottom:1px solid #22262B}
.bot-dot{width:11px;height:11px;border-radius:50%}
.bot-dot-r{background:#ff5f57}.bot-dot-y{background:#febc2e}.bot-dot-g{background:#28c840}
.bot-title{margin-left:8px;font-size:11.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.bot-status{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:#3ecf6a}
.bot-status span{width:7px;height:7px;border-radius:50%;background:#3ecf6a;box-shadow:0 0 8px #3ecf6a}
.bot-close{background:none;border:none;color:var(--muted);font-size:20px;line-height:1;
           cursor:pointer;padding:0 2px;margin-left:6px}
.bot-close:hover{color:var(--text)}

.bot-log{padding:16px 16px 8px;height:320px;overflow-y:auto;font-size:13px;line-height:1.7}
.bot-sys{color:var(--muted)}
.bot-sys-2{margin-bottom:12px}
.bot-line{margin-bottom:12px}
.bot-tag-ims{color:#9BE0B4}
.bot-tag-you{color:#A8B2BC}
.bot-body{color:#D9DFE5}

.bot-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.bot-chips button{
  background:transparent;border:1px solid #22262B;color:#A8B2BC;
  font-family:var(--mono);font-size:11px;padding:6px 11px;border-radius:20px;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.bot-chips button:hover{border-color:var(--cy);color:var(--text)}

.bot-input{display:flex;align-items:center;gap:8px;padding:12px 14px;
           border-top:1px solid #22262B;background:#05080e}
.bot-prompt{color:#9BE0B4;font-size:13px}
.bot-input input{
  flex:1;background:transparent;border:none;outline:none;color:#D9DFE5;
  font-family:var(--mono);font-size:13px;
}
.bot-input input::placeholder{color:#4A5058}
.bot-input button{
  background:var(--cy-fill);border:1px solid rgba(255,255,255,.2);color:var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 13px;border-radius:6px;cursor:pointer;
}
.bot-input button:hover{background:#fff}

@media(max-width:720px){
  .bot{right:16px;bottom:16px;left:16px;width:auto}
  .bot-launch{right:16px;bottom:16px}
}
/* ── infrastructure: terrain layer ── */
.sec-brief{position:relative;overflow:hidden}
.brief-grid{grid-template-columns:1fr .85fr;position:relative;z-index:2}
#terrainCv{position:absolute;inset:0;width:100%;height:100%;
           z-index:1;pointer-events:none;opacity:.55}
@media(max-width:900px){
  .brief-grid{grid-template-columns:1fr}
  #terrainCv{opacity:.22}
}

/* ── capabilities field ── */
.cap-field{position:relative;overflow:hidden;
           border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#fieldCv{position:absolute;inset:0;width:100%;height:100%;z-index:1;
         pointer-events:none;opacity:.5}
.cap-field-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
              padding:clamp(70px,8vw,110px) var(--pad);
              display:grid;grid-template-columns:.8fr 1.2fr;
              gap:clamp(36px,5vw,80px);align-items:center}
.cap-field-copy h2{margin-top:14px}
.cap-field-copy .sub{max-width:38ch;margin-top:18px}

.cap-cluster{list-style:none;margin:0;padding:0;
             display:grid;grid-template-columns:repeat(6,1fr);
             gap:clamp(14px,1.6vw,22px)}
.cap-box{position:relative;padding:26px 24px 28px;
         border:1px solid var(--line-2);
         background:linear-gradient(180deg,rgba(14,17,20,.82) 0%,rgba(8,9,11,.88) 100%);
         backdrop-filter:blur(2px)}
.cap-box:nth-child(-n+2){grid-column:span 3}
.cap-box:nth-child(n+3){grid-column:span 2}
.cap-box::before{content:"";position:absolute;inset:-3px;pointer-events:none;
  background-image:linear-gradient(var(--cy),var(--cy)),linear-gradient(var(--cy),var(--cy)),
                   linear-gradient(var(--cy),var(--cy)),linear-gradient(var(--cy),var(--cy));
  background-size:7px 7px;background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom;
  filter:drop-shadow(0 0 6px rgba(201,206,212,.45))}
.cap-box .cap-n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;
                color:var(--muted);display:block}
.cap-box h3{margin:12px 0 0;font-size:clamp(14px,1.1vw,16px);line-height:1.3}
.cap-box h3::after{content:"";display:block;width:22px;height:1px;
                   background:var(--line-2);margin:13px 0 14px}
.cap-box p{color:#B4BBC2;font-size:14px;line-height:1.65;margin:0}

@media(max-width:1000px){
  .cap-field-in{grid-template-columns:1fr}
  .cap-cluster{grid-template-columns:repeat(2,1fr)}
  .cap-box:nth-child(-n+2),.cap-box:nth-child(n+3){grid-column:span 1}
  #fieldCv{opacity:.28}
}
@media(max-width:620px){
  .cap-cluster{grid-template-columns:1fr}
}
/* ── services, by phase ── */
.phase{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
       border-top:1px solid var(--line)}
.phase:first-of-type{border-top:0}
.phase-head{padding:clamp(38px,4vw,58px) 0 clamp(20px,2.2vw,30px)}
.phase-name{font-family:var(--display);font-weight:800;
            font-size:clamp(30px,4.4vw,58px);line-height:1;
            letter-spacing:-.02em;text-transform:uppercase;margin:0}
.phase-line{font-family:var(--mono);font-size:12px;letter-spacing:.09em;
            text-transform:uppercase;color:var(--muted);margin:14px 0 0}
.phase-body{display:grid;grid-template-columns:.9fr 1.1fr;
            gap:clamp(28px,4vw,64px);align-items:start;
            padding-bottom:clamp(44px,5vw,72px)}

.phase-list{list-style:none;margin:0;padding:0;
            border-top:1px solid var(--line)}
.phase-item{display:flex;align-items:baseline;gap:16px;width:100%;
            padding:18px 4px;background:none;border:0;cursor:pointer;
            border-bottom:1px solid var(--line);text-align:left;
            color:var(--muted);transition:color .18s,padding-left .18s}
.phase-item i{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
              font-style:normal;color:var(--muted);transition:color .18s}
.phase-item span{font-family:var(--display);font-weight:700;
                 font-size:clamp(15px,1.5vw,20px);line-height:1.25}
.phase-item:hover,.phase-item:focus-visible{color:var(--text);padding-left:10px}
.phase-item.on{color:var(--text);padding-left:10px}
.phase-item.on i{color:var(--cy)}
.phase-item.on::after{content:"";position:absolute}

.phase-panel{display:grid;position:relative;padding:26px 0 26px 30px}
.phase-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
                     background:var(--line-2)}
.phase-panel::after{content:"";position:absolute;left:-1px;width:3px;
                    top:0;height:0;
                    background:linear-gradient(180deg,transparent,var(--cy),transparent);
                    box-shadow:0 0 12px rgba(201,206,212,.7);
                    opacity:0}
.phase-panel.lit::after{animation:phaseRun .62s cubic-bezier(.22,.7,.3,1) forwards}
@keyframes phaseRun{
  0%  {height:0;top:0;opacity:0}
  18% {opacity:1}
  100%{height:100%;top:0;opacity:0}
}

.phase-desc{grid-area:1/1;opacity:0;visibility:hidden;
            transform:translateY(8px);
            transition:opacity .3s ease,transform .3s cubic-bezier(.22,.7,.3,1)}
.phase-desc.on{opacity:1;visibility:visible;transform:none}
.phase-desc p{color:#C6CDD4;font-size:clamp(15px,1.3vw,17.5px);
              line-height:1.72;margin:0;max-width:46ch}
.phase-desc::after{content:"";position:absolute;left:30px;bottom:2px;height:1px;
                   width:0;background:var(--line-2);transition:width .5s .12s ease}
.phase-desc.on::after{width:clamp(60px,14%,120px)}

@media(max-width:900px){
  .phase-body{grid-template-columns:1fr;gap:26px}
  .phase-panel{padding:24px 0 22px}
  .phase-panel::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .phase-desc::after{left:0}
}
/* ── services headline ── */
.svc-head{position:relative;overflow:hidden;text-align:center;
          padding:clamp(72px,9vw,130px) var(--pad) clamp(56px,7vw,96px)}
#svcCv{position:absolute;inset:0;width:100%;height:100%;
       z-index:1;pointer-events:none;opacity:.6}
.svc-head-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto}
.svc-head-in h2{margin:16px auto 0}
.svc-head-in .sub{max-width:52ch;margin:20px auto 0}
#services{padding-top:0}
.svc-head{padding-top:clamp(40px,4.5vw,64px)}

/* ── process ── */
.proc{max-width:var(--max);margin:0 auto;
      padding:clamp(30px,3.4vw,52px) var(--pad) clamp(56px,6vw,88px)}
.proc-head h2{max-width:22ch;margin:14px 0 0}
.proc-head .sub{max-width:44ch;margin:18px 0 0}

.proc-steps{list-style:none;margin:clamp(46px,5vw,74px) 0 0;padding:0;
            display:grid;grid-template-columns:repeat(4,1fr);
            gap:clamp(18px,2.4vw,38px);
            border-top:1px solid var(--line-2)}
.proc-steps li{position:relative;transform:none;opacity:1;
               padding:44px 0 0}
.proc-steps .n{position:absolute;top:-14px;left:0;
               display:grid;place-items:center;
               width:30px;height:28px;
               font-family:var(--mono);font-size:11px;letter-spacing:.06em;
               color:var(--text);background:var(--bg);
               border:1px solid var(--line-2)}
.proc-steps li::before{content:"";position:absolute;top:14px;left:14px;
                       width:1px;height:30px;background:var(--line-2)}
.proc-steps h3{margin:0;font-size:clamp(14px,1.2vw,17px);
               text-transform:uppercase;letter-spacing:.01em}
.proc-steps p{color:#B4BBC2;font-size:14.5px;line-height:1.7;
              margin:12px 0 0;max-width:32ch}

@media(max-width:900px){
  .proc-steps{grid-template-columns:repeat(2,1fr);row-gap:44px}
}
@media(max-width:620px){
  .proc-steps{grid-template-columns:1fr}
}
.proc{position:relative;overflow:hidden}
#procCv{position:absolute;inset:0;width:100%;height:100%;
        z-index:1;pointer-events:none;opacity:.85}
.proc-head,.proc-steps{position:relative;z-index:2}
@media(max-width:900px){#procCv{opacity:.4}}

/* ══ AI page — the network ═══════════════════════════════ */
.ai-sec{position:relative;overflow:hidden;
        border-top:1px solid var(--line)}
.node-cv{position:absolute;inset:0;width:100%;height:100%;
         z-index:1;pointer-events:none}
.ai-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
       padding:clamp(56px,6.5vw,96px) var(--pad)}
.ai-sub{color:var(--muted);font-size:clamp(15px,1.2vw,17px);
        line-height:1.7;max-width:52ch;margin:16px 0 0}

/* credibility — three nodes on one bus */
.cred{list-style:none;margin:clamp(30px,3.5vw,48px) 0 0;padding:0;
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:clamp(26px,3.4vw,54px);
      border-top:1px solid var(--line-2)}
.cred li{position:relative;padding:38px 0 0}
.cred li::before{content:"";position:absolute;top:-5px;left:0;
                 width:9px;height:9px;border-radius:50%;
                 background:var(--cy);box-shadow:0 0 14px rgba(201,206,212,.65)}
.cred li::after{content:"";position:absolute;top:4px;left:4px;
                width:1px;height:22px;background:var(--line-2)}
.cred h3{font-family:var(--display);font-weight:800;
         font-size:clamp(15px,1.35vw,19px);line-height:1.25;margin:0}
.cred p{color:#B4BBC2;font-size:14.5px;line-height:1.7;margin:12px 0 0;max-width:34ch}

/* capabilities — each phase is a layer, items branch off a spine */
.layer{display:grid;grid-template-columns:.62fr 1.38fr;
       gap:clamp(26px,4vw,72px);align-items:start;
       padding:clamp(38px,4.4vw,64px) 0;
       border-top:1px solid var(--line)}
.layer:first-of-type{margin-top:clamp(24px,3vw,40px)}
.layer-head h2{font-size:clamp(24px,3.2vw,40px);line-height:1;
               text-transform:uppercase;letter-spacing:-.02em;margin:0}
.layer-head p{color:var(--cy);font-family:var(--mono);font-size:12px;
              letter-spacing:.08em;text-transform:uppercase;
              line-height:1.6;margin:16px 0 0;max-width:26ch}

.layer-nodes{list-style:none;margin:0;padding:0 0 0 30px;
             position:relative;border-left:1px solid var(--line-2)}
.layer-nodes li{position:relative;padding:0 0 26px}
.layer-nodes li:last-child{padding-bottom:0}
.layer-nodes li::before{content:"";position:absolute;left:-35px;top:7px;
                        width:11px;height:11px;
                        border:1px solid var(--cy);border-radius:50%;
                        background:var(--bg);
                        box-shadow:0 0 10px rgba(201,206,212,.4)}
.layer-nodes li::after{content:"";position:absolute;left:-24px;top:12px;
                       width:20px;height:1px;background:var(--line-2)}
.layer-nodes h3{font-family:var(--display);font-weight:700;
                font-size:clamp(15px,1.35vw,18px);margin:0;line-height:1.3}
.layer-nodes p{color:#B4BBC2;font-size:14.5px;line-height:1.72;
               margin:10px 0 0;max-width:56ch}

/* proof — one statement, centred in the field */
.ai-proof .ai-in{text-align:center;padding-top:clamp(64px,7.5vw,110px);
                 padding-bottom:clamp(64px,7.5vw,110px)}
.proof-lead{font-family:var(--display);font-weight:800;
            font-size:clamp(21px,2.9vw,38px);line-height:1.15;
            text-transform:uppercase;letter-spacing:-.02em;
            max-width:20ch;margin:6px auto 0}
.proof-copy{color:#C6CDD4;font-size:clamp(15px,1.3vw,17.5px);
            line-height:1.75;max-width:62ch;margin:26px auto 0}

/* process — four nodes, signal running through */
.flow-title{font-size:clamp(22px,2.8vw,36px);max-width:20ch;margin:8px 0 0}
.flow{list-style:none;margin:clamp(46px,5vw,72px) 0 0;padding:0;
      display:grid;grid-template-columns:repeat(4,1fr);
      gap:clamp(20px,2.6vw,40px)}
.flow li{position:relative;padding:46px 0 0}
.flow li::before{content:"";position:absolute;top:13px;left:0;right:0;
                 height:1px;background:var(--line-2)}
.flow li:last-child::before{right:auto;width:26px}
.flow-n{position:absolute;top:0;left:0;
        display:grid;place-items:center;width:28px;height:28px;
        border:1px solid var(--cy);border-radius:50%;background:var(--bg);
        font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
        color:var(--cy);box-shadow:0 0 12px rgba(201,206,212,.35)}
.flow h3{font-family:var(--display);font-weight:800;
         font-size:clamp(14px,1.2vw,17px);text-transform:uppercase;margin:0}
.flow p{color:#B4BBC2;font-size:14px;line-height:1.7;margin:12px 0 0;max-width:32ch}

@media(max-width:900px){
  .cred{grid-template-columns:1fr;gap:0}
  .cred li{padding:30px 0 26px;border-bottom:1px solid var(--line)}
  .cred li:last-child{border-bottom:0}
  .layer{grid-template-columns:1fr;gap:28px}
  .flow{grid-template-columns:repeat(2,1fr);row-gap:44px}
}
@media(max-width:620px){
  .flow{grid-template-columns:1fr}
  .layer-nodes{padding-left:24px}
  .layer-nodes li::before{left:-29px}
  .layer-nodes li::after{width:14px;left:-18px}
}

#radialCv{position:absolute;inset:0;width:100%;height:100%;
          z-index:1;pointer-events:none;opacity:.7;
          -webkit-mask-image:radial-gradient(58% 58% at 50% 50%,rgba(0,0,0,.25) 0%,#000 62%,#000 100%);
          mask-image:radial-gradient(58% 58% at 50% 50%,rgba(0,0,0,.25) 0%,#000 62%,#000 100%)}
@media(max-width:900px){#radialCv{opacity:.4}}

#meshCv{position:absolute;inset:0;width:100%;height:100%;
        z-index:1;pointer-events:none;opacity:.62}
@media(max-width:900px){#meshCv{opacity:.35}}

/* ── AI capabilities — the flow map ── */
.flowmap{position:relative;display:grid;
         grid-template-columns:minmax(190px,.66fr) minmax(120px,.5fr) minmax(340px,1.5fr);
         gap:0;align-items:stretch;
         margin-top:clamp(26px,3vw,40px)}
#flowCv{position:absolute;inset:0;width:100%;height:100%;
        z-index:1;pointer-events:none}

.fm-src{grid-column:1;position:relative;z-index:2;
        display:flex;flex-direction:column;justify-content:space-around;
        padding:8px 0}
.fm-phase{display:block;width:100%;text-align:left;
          background:none;border:0;padding:0 0 0 2px;cursor:pointer;
          color:inherit;font:inherit}
.fm-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
      color:var(--muted);display:block;margin-bottom:6px;transition:color .25s}
.fm-phase h2{font-size:clamp(21px,2.4vw,32px);line-height:1;
             text-transform:uppercase;letter-spacing:-.02em;margin:0;
             color:#8D959D;transition:color .25s}
.fm-phase h2::after{content:"";display:block;width:24px;height:1px;
                    background:var(--line-2);margin:11px 0 9px;
                    transition:width .3s,background .25s}
.fm-phase p{color:var(--muted);font-size:13px;line-height:1.55;
            margin:0;max-width:22ch;transition:color .25s}
.fm-phase.on .fm-n{color:var(--cy)}
.fm-phase.on h2{color:var(--text)}
.fm-phase.on h2::after{width:42px;background:var(--cy)}
.fm-phase.on p{color:#B4BBC2}

.fm-out{grid-column:3;position:relative;z-index:2;
        display:grid;grid-template-columns:repeat(2,1fr);
        gap:clamp(8px,1vw,13px);align-content:center}
.fm-node{position:relative;padding:13px 14px 14px 16px;
         border:1px solid transparent;
         opacity:.4;transition:opacity .3s,border-color .3s,background .3s}
.fm-node::before{content:"";position:absolute;left:-5px;top:18px;
                 width:8px;height:8px;border-radius:50%;
                 background:var(--bg);border:1px solid var(--line-2);
                 transition:border-color .3s,box-shadow .3s}
.fm-node.on{opacity:1;border-color:var(--line-2);
            background:linear-gradient(180deg,rgba(14,17,20,.55),rgba(8,9,11,.7))}
.fm-node.on::before{border-color:var(--cy);
                    box-shadow:0 0 12px rgba(201,206,212,.7)}
.fm-id{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
       color:var(--muted);display:block;margin-bottom:5px}
.fm-node h3{font-family:var(--display);font-weight:700;
            font-size:clamp(12.5px,1vw,14.5px);text-transform:uppercase;
            letter-spacing:.01em;margin:0;line-height:1.25}
.fm-node p{color:#A9B1B9;font-size:12.5px;line-height:1.55;
           margin:7px 0 0}

.fm-cue{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
        text-transform:uppercase;color:var(--muted);
        text-align:center;margin:clamp(18px,2.2vw,30px) 0 0}

@media(max-width:1100px){
  .flowmap{grid-template-columns:minmax(170px,.6fr) 80px minmax(300px,1.5fr)}
  .fm-out{grid-template-columns:1fr}
}
@media(max-width:960px){
  .flowmap{grid-template-columns:1fr;gap:30px}
  #flowCv,.fm-cue{display:none}
  .fm-src{grid-column:1;padding:0}
  .fm-phase{padding:20px 0;border-bottom:1px solid var(--line);cursor:default}
  .fm-phase h2,.fm-n{color:var(--text)}
  .fm-phase p{color:#B4BBC2;max-width:none}
  .fm-out{grid-column:1;grid-template-columns:1fr}
  .fm-node{opacity:1;border-color:var(--line-2);padding-left:16px}
  .fm-node::before{display:none}
}

/* ── AI process — the band ── */
.flowband{position:relative;margin-top:clamp(40px,4.6vw,68px)}
#bandCv{position:absolute;left:0;right:0;top:0;height:150px;
        width:100%;z-index:1;pointer-events:none}

.flow{position:relative;z-index:2;list-style:none;margin:0;padding:0;
      display:grid;grid-template-columns:repeat(4,1fr);
      gap:clamp(20px,2.6vw,44px)}
.flow li{position:relative;padding:150px 0 0}
.flow li::before{content:none}

.flow-n{position:absolute;top:36px;left:0;
        display:grid;place-items:center;width:42px;height:42px;
        border:1px solid rgba(226,232,238,.85);border-radius:50%;
        background:var(--bg);
        font-family:var(--mono);font-size:11px;letter-spacing:.08em;
        color:var(--text);
        box-shadow:0 0 22px rgba(201,206,212,.28)}
/* the stem from badge down to the label */
.flow li::after{content:"";position:absolute;top:78px;left:21px;
                width:1px;height:52px;
                background:linear-gradient(180deg,rgba(226,232,238,.55),rgba(226,232,238,.12))}
.flow h3{font-family:var(--display);font-weight:800;
         font-size:clamp(16px,1.6vw,22px);text-transform:uppercase;
         letter-spacing:.02em;margin:0;color:var(--text)}
.flow h3::after{content:"";display:block;width:22px;height:1px;
                background:var(--line-2);margin:12px 0 0}
.flow p{color:#A9B1B9;font-size:13.5px;line-height:1.7;
        margin:16px 0 0;max-width:30ch}

@media(max-width:900px){
  #bandCv{height:110px}
  .flow{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .flow li{padding-top:112px}
  .flow li:nth-child(n+3){padding-top:0}
  .flow li:nth-child(n+3) .flow-n{position:relative;top:0;margin-bottom:16px}
  .flow li:nth-child(n+3)::after{display:none}
}
@media(max-width:620px){
  .flow{grid-template-columns:1fr}
  .flow li{padding-top:0}
  .flow li:first-child{padding-top:112px}
  .flow li:not(:first-child) .flow-n{position:relative;top:0;margin-bottom:16px}
  .flow li:not(:first-child)::after{display:none}
}

/* ══ MSP page ════════════════════════════════════════════ */
.msp-sec{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.msp-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
        padding:clamp(56px,6.5vw,92px) var(--pad)}
#orbitCv,#ringCv{position:absolute;inset:0;width:100%;height:100%;
                 z-index:1;pointer-events:none}

/* credibility — three arcs of the same system */
.orbit-list{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;
            display:grid;grid-template-columns:repeat(3,1fr);
            gap:clamp(24px,3.2vw,52px)}
.orbit-list li{position:relative;padding:30px 0 0;
               border-top:1px solid var(--line-2)}
.orbit-list li::before{content:"";position:absolute;top:-4px;left:0;
                       width:7px;height:7px;border-radius:50%;
                       background:var(--cy);
                       box-shadow:0 0 14px rgba(201,206,212,.6)}
.orbit-list h3{font-family:var(--display);font-weight:800;
               font-size:clamp(16px,1.5vw,21px);line-height:1.2;margin:0;
               text-transform:uppercase;letter-spacing:-.01em}
.orbit-list p{color:#B4BBC2;font-size:14.5px;line-height:1.7;
              margin:12px 0 0;max-width:34ch}

/* partners — no canvas, just the marks */
.partners{border-top:1px solid var(--line);background:var(--bg)}
.partners .msp-in{padding-top:clamp(34px,4vw,52px);
                  padding-bottom:clamp(34px,4vw,52px)}
.partners .tag{text-align:center;margin-bottom:clamp(22px,2.6vw,34px)}
.partner-row{list-style:none;margin:0;padding:0;
             display:grid;grid-template-columns:repeat(7,1fr);
             gap:clamp(16px,2.4vw,40px);align-items:center}
.partner-row li{display:grid;place-items:center}
.partner-row img{width:100%;max-width:112px;height:auto;display:block;
                 opacity:.55;transition:opacity .3s}
.partner-row li:hover img{opacity:1}

/* testimonial — the page's loudest moment */
.quote-sec .msp-in{padding-top:clamp(70px,8vw,120px);
                   padding-bottom:clamp(70px,8vw,120px)}
.big-quote{margin:0;max-width:74ch;margin-inline:auto;text-align:center}
.big-quote blockquote{margin:0;font-family:var(--display);font-weight:400;
                      font-size:clamp(19px,2.3vw,31px);line-height:1.4;
                      letter-spacing:-.015em;color:var(--text)}
.big-quote blockquote::before{content:"\201C"}
.big-quote blockquote::after{content:"\201D"}
.big-quote figcaption{margin-top:30px;padding-top:20px;
                      border-top:1px solid var(--line-2);
                      display:inline-flex;flex-direction:column;gap:6px}
.big-quote b{font-family:var(--display);font-weight:700;font-size:15px;
             color:var(--text)}
.big-quote span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
                text-transform:uppercase;color:var(--muted)}

@media(max-width:900px){
  .orbit-list{grid-template-columns:1fr;gap:0}
  .orbit-list li{padding:26px 0 24px;border-top:1px solid var(--line)}
  .partner-row{grid-template-columns:repeat(4,1fr);gap:26px}
  .partner-row img{max-width:96px}
}
@media(max-width:560px){
  .partner-row{grid-template-columns:repeat(2,1fr)}
}
/* ── MSP coverage ── */
#quadCv,#stepCv{position:absolute;inset:0;width:100%;height:100%;
                z-index:1;pointer-events:none}
.cover-sec h2,.plans-sec h2{font-size:clamp(24px,3vw,38px);margin:8px 0 0}
.cover-grid{display:grid;grid-template-columns:repeat(2,1fr);
            gap:clamp(20px,2.6vw,40px);margin-top:clamp(32px,3.8vw,52px)}
.cover{position:relative;padding:26px 26px 28px;
       border:1px solid var(--line-2);
       background:linear-gradient(180deg,rgba(14,17,20,.7),rgba(8,9,11,.82))}
.cover h3{font-family:var(--display);font-weight:800;
          font-size:clamp(16px,1.5vw,21px);text-transform:uppercase;
          letter-spacing:-.01em;margin:0}
.cover h3::after{content:"";display:block;width:24px;height:1px;
                 background:var(--cy);margin:13px 0 0}
.cover p{color:#B4BBC2;font-size:14.5px;line-height:1.7;margin:15px 0 0}

/* ── MSP plans — no canvas, this is a price list ── */
.plans-sec{position:relative;border-top:1px solid var(--line);background:var(--bg)}
.plans-sub{color:var(--muted);font-size:clamp(15px,1.2vw,17px);
           line-height:1.7;max-width:48ch;margin:14px 0 0}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);
       gap:clamp(16px,2vw,28px);margin-top:clamp(34px,4vw,56px);
       align-items:start}
.tier{position:relative;padding:30px 26px 32px;
      border:1px solid var(--line-2);background:var(--panel)}
.tier-rec{border-color:rgba(226,232,238,.5);
          background:linear-gradient(180deg,#12161A 0%,#0A0C0E 100%);
          box-shadow:0 0 44px -18px rgba(201,206,212,.4)}
.tier-flag{position:absolute;top:-10px;left:26px;
           font-family:var(--mono);font-size:10px;letter-spacing:.18em;
           text-transform:uppercase;color:var(--ink);
           background:var(--cy-fill);padding:4px 10px}
.tier h3{font-family:var(--display);font-weight:800;
         font-size:clamp(18px,1.8vw,24px);text-transform:uppercase;
         letter-spacing:-.01em;margin:0}
.tier-price{font-family:var(--display);font-weight:800;
            font-size:clamp(28px,3.2vw,42px);line-height:1;
            color:var(--text);margin:16px 0 0;letter-spacing:-.02em}
.tier-price span{display:block;font-family:var(--mono);font-weight:400;
                 font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
                 color:var(--muted);margin-top:9px}
.tier-for{color:var(--cy);font-size:13.5px;line-height:1.55;
          margin:18px 0 0;font-style:italic}
.tier-body{color:#B4BBC2;font-size:14px;line-height:1.68;margin:14px 0 0}
.tier-list{list-style:none;margin:20px 0 0;padding:18px 0 0;
           border-top:1px solid var(--line)}
.tier-list li{position:relative;padding:8px 0 8px 20px;
              color:#B4BBC2;font-size:13.5px;line-height:1.55}
.tier-list li::before{content:"";position:absolute;left:0;top:15px;
                      width:6px;height:1px;background:var(--cy)}
.tier-inherit{color:var(--muted);font-family:var(--mono);font-size:11px;
              letter-spacing:.08em;text-transform:uppercase;padding-left:0}
.tier-inherit::before{display:none}

.tier-foot{margin-top:clamp(26px,3vw,42px);padding-top:24px;
           border-top:1px solid var(--line)}
.tier-foot-lead{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
                text-transform:uppercase;color:var(--cy)}
.tier-foot-body{color:#B4BBC2;font-size:14px;line-height:1.7;margin:10px 0 0}
.tier-foot-note{color:var(--muted);font-size:12.5px;line-height:1.7;margin:12px 0 0}

/* ── MSP process ── */
.msp-steps{list-style:none;margin:clamp(34px,4vw,54px) 0 0;padding:0;
           display:grid;grid-template-columns:repeat(3,1fr);
           gap:clamp(20px,2.6vw,44px)}
.msp-steps li{position:relative;padding:0 0 0 58px}
.ms-n{position:absolute;left:0;top:-2px;
      display:grid;place-items:center;width:40px;height:40px;
      border:1px solid var(--line-2);border-radius:50%;background:var(--bg);
      font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--cy)}
.msp-steps h3{font-family:var(--display);font-weight:800;
              font-size:clamp(15px,1.4vw,19px);text-transform:uppercase;
              margin:0;line-height:1.2}
.msp-steps p{color:#B4BBC2;font-size:14px;line-height:1.7;margin:12px 0 0}

@media(max-width:900px){
  .cover-grid{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr;gap:20px}
  .msp-steps{grid-template-columns:1fr;gap:28px}
}

#process .msp-in{padding-top:clamp(44px,5vw,70px);
                 padding-bottom:clamp(44px,5vw,70px)}


#stepCv{-webkit-mask-image:radial-gradient(72% 62% at 50% 50%,rgba(0,0,0,.15) 0%,rgba(0,0,0,.6) 42%,#000 78%);
        mask-image:radial-gradient(72% 62% at 50% 50%,rgba(0,0,0,.15) 0%,rgba(0,0,0,.6) 42%,#000 78%)}

.msp-sec#process .msp-in{padding-top:clamp(50px,5.5vw,78px);
                         padding-bottom:clamp(50px,5.5vw,78px);
                         text-align:center}
.msp-sec#process .tag{margin-bottom:12px}
.msp-sec#process h2{max-width:24ch;margin-inline:auto}
.msp-sec#process .msp-steps{margin-top:clamp(38px,4.4vw,60px)}
.msp-sec#process .msp-steps li{padding:56px 0 0;text-align:center}
.msp-sec#process .ms-n{left:50%;top:0;transform:translateX(-50%)}
.msp-sec#process .msp-steps p{max-width:32ch;margin-inline:auto}

/* ══ partners page ═══════════════════════════════════════ */
.phead{position:relative;overflow:hidden;
       padding:clamp(150px,15vw,210px) var(--pad) clamp(56px,6.5vw,92px);
       border-bottom:1px solid var(--line)}
#torusCv{position:absolute;inset:0;width:100%;height:100%;
         z-index:0;pointer-events:none;opacity:.8}
.phead-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto}
.phead h1{font-family:var(--display);font-weight:900;
          font-size:clamp(52px,11vw,150px);line-height:.88;
          letter-spacing:-.045em;text-transform:uppercase;
          margin:18px 0 0;max-width:none}
.phead-lede{color:#B4BBC2;font-size:clamp(15px,1.25vw,17.5px);
            line-height:1.75;max-width:56ch;margin:30px 0 0}

/* the stream */
.pstream{position:relative;border-bottom:1px solid var(--line);
         background:var(--bg)}
.pstream-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.pcols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
       background:var(--line);
       height:clamp(460px,58vh,660px);overflow:hidden;
       -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
       mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.pcol{position:relative;overflow:hidden;background:rgba(5,6,7,.9)}
.ptrack{display:flex;flex-direction:column;will-change:transform}
.ptrack span{display:grid;place-items:center;
             padding:clamp(24px,2.9vw,40px) clamp(10px,1.2vw,18px);
             border-bottom:1px solid var(--line)}
.ptrack img{width:100%;max-width:172px;height:auto;display:block;
            opacity:.85;transition:opacity .3s var(--ease),filter .3s var(--ease)}
.ptrack span:hover img{opacity:1;filter:drop-shadow(0 0 18px rgba(226,232,238,.35))}

@media(max-width:900px){
  /* two columns; the third wraps to a second row rather than
     being hidden, so no partner disappears on a phone */
  .pcols{grid-template-columns:repeat(2,1fr);height:440px}
}
@media(max-width:620px){
  .pcols{grid-template-columns:1fr;height:380px}
}
@media(prefers-reduced-motion:reduce){
  .pcols{height:auto;mask-image:none;-webkit-mask-image:none}
  .ptrack{transform:none!important}
}

/* ══ about page ══════════════════════════════════════════ */
.abt-head{position:relative;overflow:hidden;
          padding:clamp(150px,15vw,210px) var(--pad) clamp(56px,6.5vw,92px);
          border-bottom:1px solid var(--line)}
#ringsCv{position:absolute;inset:0;width:100%;height:100%;
         z-index:0;pointer-events:none;opacity:.85;
         -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 62%);
         mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 62%)}
.abt-head-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto}
.abt-head h1{font-family:var(--display);font-weight:900;
             font-size:clamp(46px,9vw,120px);line-height:.9;
             letter-spacing:-.04em;text-transform:uppercase;margin:18px 0 0}
.abt-lede{color:#B4BBC2;font-size:clamp(15px,1.3vw,18px);
          line-height:1.75;max-width:54ch;margin:30px 0 0}

.abt-sec{position:relative;border-top:1px solid var(--line)}
.abt-sec:first-of-type{border-top:0}
.abt-in{max-width:var(--max);margin:0 auto;
        padding:clamp(52px,6vw,88px) var(--pad)}
.abt-sec h2{font-size:clamp(24px,3vw,38px);margin:8px 0 0}

/* principles */
.prin{list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:clamp(24px,3.2vw,54px)}
.prin li{position:relative;padding:34px 0 0;border-top:1px solid var(--line-2)}
.prin-n{position:absolute;top:-11px;left:0;
        font-family:var(--mono);font-size:11px;letter-spacing:.16em;
        color:var(--cy);background:var(--bg);padding-right:12px}
.prin h3{font-family:var(--display);font-weight:800;
         font-size:clamp(19px,2.2vw,28px);text-transform:uppercase;
         letter-spacing:-.015em;margin:0}
.prin p{color:#B4BBC2;font-size:14.5px;line-height:1.72;
        margin:16px 0 0;max-width:36ch}

/* founder */
.founder .abt-in{display:grid;grid-template-columns:1.1fr .9fr;
                 gap:clamp(32px,4.5vw,76px);align-items:start}
.founder-quote{margin:0}
.founder-quote blockquote{margin:0;font-family:var(--display);font-weight:400;
                          font-size:clamp(19px,2.2vw,29px);line-height:1.38;
                          letter-spacing:-.015em;color:var(--text)}
.founder-quote blockquote::before{content:"\201C"}
.founder-quote blockquote::after{content:"\201D"}
.founder-quote figcaption{margin-top:26px;padding-top:18px;
                          border-top:1px solid var(--line-2);
                          display:inline-flex;flex-direction:column;gap:5px}
.founder-quote b{font-family:var(--display);font-weight:700;font-size:15px}
.founder-quote span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
                    text-transform:uppercase;color:var(--muted)}
.founder-body p{color:#B4BBC2;font-size:14.5px;line-height:1.78;margin:0 0 16px}
.founder-body p:last-child{margin-bottom:0}

/* figures */
.fig-row{list-style:none;margin:clamp(26px,3vw,42px) 0 0;padding:0;
         display:grid;grid-template-columns:repeat(4,1fr);
         gap:clamp(18px,2.4vw,40px)}
.fig-row li{padding:22px 0 0;border-top:1px solid var(--line-2)}
.fig-row b{display:block;font-family:var(--display);font-weight:900;
           font-size:clamp(34px,4.6vw,62px);line-height:1;
           letter-spacing:-.035em;color:var(--text)}
.fig-row span{display:block;margin-top:12px;
              font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
              text-transform:uppercase;color:var(--muted);line-height:1.6}
.fig-note{color:#B4BBC2;font-size:14.5px;line-height:1.75;
          max-width:62ch;margin:clamp(28px,3.2vw,44px) 0 0}

/* scope */
.scope-grid{display:grid;grid-template-columns:repeat(3,1fr);
            gap:clamp(24px,3.2vw,56px);margin-top:clamp(32px,3.8vw,52px)}
.scope-col h3{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
              text-transform:uppercase;color:var(--cy);
              padding-bottom:14px;border-bottom:1px solid var(--line-2);margin:0}
.scope-list{list-style:none;margin:0;padding:0}
.scope-list li{padding:13px 0;border-bottom:1px solid var(--line);
               color:#B4BBC2;font-size:14.5px;line-height:1.5}
.scope-list li:last-child{border-bottom:0}

@media(max-width:900px){
  .prin{grid-template-columns:1fr;gap:0}
  .prin li{padding:30px 0 26px}
  .founder .abt-in{grid-template-columns:1fr;gap:34px}
  .fig-row{grid-template-columns:repeat(2,1fr);row-gap:30px}
  .scope-grid{grid-template-columns:1fr;gap:30px}
}

/* ══ contact page ════════════════════════════════════════ */
.ct-head{position:relative;overflow:hidden;
         padding:clamp(150px,15vw,200px) var(--pad) clamp(48px,5.5vw,76px);
         border-bottom:1px solid var(--line)}
#ctCv{position:absolute;inset:0;width:100%;height:100%;
      z-index:0;pointer-events:none;opacity:.8;
      -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 36%,#000 64%);
      mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 36%,#000 64%)}
.ct-head-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto}
.ct-head h1{font-family:var(--display);font-weight:900;
            font-size:clamp(46px,9vw,118px);line-height:.9;
            letter-spacing:-.04em;text-transform:uppercase;margin:18px 0 0}
.ct-lede{color:#B4BBC2;font-size:clamp(15px,1.3vw,18px);
         line-height:1.75;max-width:54ch;margin:28px 0 0}

.ct-sec{position:relative;border-top:1px solid var(--line)}
.ct-sec:first-of-type{border-top:0}
.ct-in{max-width:var(--max);margin:0 auto;
       padding:clamp(48px,5.5vw,82px) var(--pad)}

/* the three ways in */
.ways{list-style:none;margin:0;padding:0;
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:clamp(24px,3.2vw,54px)}
.ways li{position:relative;padding:32px 0 0;border-top:1px solid var(--line-2)}
.way-n{position:absolute;top:-10px;left:0;
       font-family:var(--mono);font-size:11px;letter-spacing:.16em;
       color:var(--cy);background:var(--bg);padding-right:12px}
.ways h2{font-family:var(--display);font-weight:800;
         font-size:clamp(19px,2.1vw,26px);text-transform:uppercase;
         letter-spacing:-.015em;margin:0}
.way-note{color:var(--muted);font-size:13.5px;line-height:1.6;margin:12px 0 20px}
.way-link{display:block;font-family:var(--display);font-weight:700;
          font-size:clamp(16px,1.5vw,20px);color:var(--text);
          padding:9px 0;border-bottom:1px solid var(--line);
          transition:color .2s var(--ease),padding-left .2s var(--ease)}
.way-link:hover{color:#fff;padding-left:8px}
.way-addr{color:#B4BBC2;font-size:15px;line-height:1.7;margin:0;
          padding:9px 0;border-bottom:1px solid var(--line)}
.way-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
         text-transform:uppercase;color:var(--muted);
         line-height:1.7;margin:16px 0 0}

/* the form */
.form-grid{display:grid;grid-template-columns:.85fr 1.15fr;
           gap:clamp(32px,4.5vw,80px);align-items:start}
.form-copy h2{font-size:clamp(22px,2.7vw,34px);margin:8px 0 0}
.form-sub{color:#B4BBC2;font-size:14.5px;line-height:1.75;
          margin:18px 0 0;max-width:38ch}

.ct-form{display:grid;grid-template-columns:repeat(2,1fr);
         gap:clamp(14px,1.8vw,22px)}
.field{display:flex;flex-direction:column;gap:9px}
.field-wide{grid-column:1 / -1}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
             text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  background:var(--panel);border:1px solid var(--line-2);
  color:var(--text);font-family:var(--body);font-size:15px;
  padding:13px 14px;width:100%;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.field textarea{resize:vertical;line-height:1.65;min-height:130px}
.field select{appearance:none;cursor:pointer;
              background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                               linear-gradient(135deg,var(--muted) 50%,transparent 50%);
              background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
              background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cy);background:#0E1114}

.form-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
              margin-top:6px}
.ct-form button{cursor:pointer;font-family:var(--mono)}
.form-note{font-size:13.5px;color:var(--muted)}
.form-note a{color:var(--text);border-bottom:1px solid var(--line-2)}
.form-note a:hover{color:#fff}

@media(max-width:900px){
  .ways{grid-template-columns:1fr;gap:0}
  .ways li{padding:28px 0 26px}
  .form-grid{grid-template-columns:1fr;gap:32px}
  .ct-form{grid-template-columns:1fr}
}

/* ── MSP partner rail ── */
.partners .msp-in{padding-bottom:clamp(22px,2.6vw,34px)}
.prail{position:relative;overflow:hidden;
       padding-bottom:clamp(34px,4vw,52px);
       -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
       mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.prail-track{display:flex;align-items:center;
             gap:clamp(38px,5vw,84px);width:max-content;
             will-change:transform}
.prail-track span{flex:none;display:grid;place-items:center}
.prail-track img{width:clamp(88px,9vw,124px);height:auto;display:block;
                 opacity:.5;transition:opacity .3s var(--ease),filter .3s var(--ease)}
.prail-track span:hover img{opacity:1;
                            filter:drop-shadow(0 0 16px rgba(226,232,238,.35))}
@media(prefers-reduced-motion:reduce){
  .prail{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
  .prail-track{transform:none!important}
}

.cover{transition:border-color .3s var(--ease),background .3s var(--ease),
                 transform .3s var(--ease),box-shadow .3s var(--ease)}
.cover::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  opacity:0;transition:opacity .3s var(--ease);
  background-image:linear-gradient(var(--cy),var(--cy)),linear-gradient(var(--cy),var(--cy)),
                   linear-gradient(var(--cy),var(--cy)),linear-gradient(var(--cy),var(--cy));
  background-size:8px 8px;background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom;
  filter:drop-shadow(0 0 8px rgba(201,206,212,.6))}
.cover:hover{border-color:rgba(226,232,238,.42);
             background:linear-gradient(180deg,rgba(20,24,28,.85),rgba(10,12,15,.9));
             transform:translateY(-3px);
             box-shadow:0 26px 60px -34px rgba(0,0,0,.95),
                        0 0 44px -22px rgba(201,206,212,.5)}
.cover:hover::after{opacity:1}
.cover:hover h3::after{width:44px;transition:width .3s var(--ease)}

@media(max-width:960px){
  /* rebuild the flow map as one ordered column so each phase
     sits directly above the services that belong to it */
  .flowmap{display:grid;grid-template-columns:1fr;gap:0}
  .fm-src,.fm-out{display:contents}

  .fm-phase{grid-column:1;padding:34px 0 18px;border-top:1px solid var(--line-2);
            cursor:default;text-align:left}
  .fm-phase:first-of-type{border-top:0;padding-top:8px}
  .fm-phase h2{color:var(--text);font-size:clamp(23px,7vw,30px)}
  .fm-phase h2::after{width:38px;background:var(--cy)}
  .fm-n{color:var(--cy)}
  .fm-phase p{color:#B4BBC2;max-width:none}

  .fm-node{grid-column:1;opacity:1;padding:16px 0 18px 18px;
           border:0;border-left:1px solid var(--line-2);background:none;
           margin-left:2px}
  .fm-node::before{display:none}
  .fm-node::after{content:"";position:absolute;left:-4px;top:22px;
                  width:7px;height:7px;border-radius:50%;
                  background:var(--cy);box-shadow:0 0 10px rgba(201,206,212,.6)}
  .fm-node h3{font-size:14.5px}
  .fm-node p{font-size:13.5px;margin-top:8px}

  /* the interleave — phase, then its services, in source order */
  .fm-phase:nth-of-type(1){order:1}
  .fm-node:nth-of-type(1){order:2}
  .fm-node:nth-of-type(2){order:3}
  .fm-phase:nth-of-type(2){order:4}
  .fm-node:nth-of-type(3){order:5}
  .fm-node:nth-of-type(4){order:6}
  .fm-node:nth-of-type(5){order:7}
  .fm-phase:nth-of-type(3){order:8}
  .fm-node:nth-of-type(6){order:9}
  .fm-node:nth-of-type(7){order:10}
  .fm-node:nth-of-type(8){order:11}
}
@media(max-width:760px){
  .prail{-webkit-mask-image:none;mask-image:none;
         padding-bottom:clamp(26px,4vw,40px)}
  .prail-track{gap:34px}
  .prail-track img{width:84px}
}
/* ══ hero — photo fills the frame, nobody cropped ══════════
   REPLACES the previous hero block at the end of styles.css.
   Delete that one first, then paste this at the very end.

   Elements: .hero-photo (new) + .hero-fade (reused as the
   scrim). No canvases, no .hero-edge, no .hero-rule.
   ═════════════════════════════════════════════════════════ */

/* The photo is 1710x920 = 1.86:1. Whenever the hero is
   proportionally TALLER than that, object-fit:cover has to crop
   the SIDES — which is what kept cutting people off. Capping the
   height at 53.8vw (= 100 / 1.86) guarantees the hero is always
   at least as wide-proportioned as the photo, so the only crop is
   ceiling and floor. Nobody loses an arm. */
.hero{
  height:min(100svh,53.8vw);
  min-height:600px;
  padding:0 var(--pad) 26px;
}

/* full bleed — fills the hero edge to edge */
.hero-photo{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-photo img{
  width:100%;height:100%;display:block;
  object-fit:cover;
  object-position:50% 31%;   /* bias the crop to keep bodies, drop floor */
  /* raising contrast while dropping brightness crushes the neon
     faster than it crushes faces — no retouched file needed */
  filter:grayscale(1) contrast(1.16) brightness(.78);
}

/* the scrim. The left column used to be a flat 90deg wash at .95
   all the way up, which buried whoever stood on the far left. Now
   the heavy darkening is a pool anchored at bottom-left, under the
   copy — the upper left releases so he stays visible. */
.hero-fade{
  z-index:1;
  background:
    /* 1. the pool the headline sits in */
    radial-gradient(88% 62% at 6% 92%,rgba(5,6,7,.95) 0%,
      rgba(5,6,7,.86) 26%,rgba(5,6,7,.5) 56%,rgba(5,6,7,.14) 78%,transparent 92%),
    /* 2. a light left weight, so the edge still reads as grounded */
    linear-gradient(90deg,rgba(5,6,7,.5) 0%,rgba(5,6,7,.26) 22%,
      rgba(5,6,7,.08) 44%,transparent 62%),
    /* 3. corners */
    radial-gradient(118% 96% at 58% 42%,transparent 34%,
      rgba(5,6,7,.24) 64%,rgba(5,6,7,.64) 88%,rgba(5,6,7,.86) 100%),
    /* 4. top under the nav, bottom sink */
    linear-gradient(180deg,rgba(5,6,7,.8) 0%,rgba(5,6,7,.24) 13%,
      transparent 28%,transparent 56%,rgba(5,6,7,.66) 86%,rgba(5,6,7,.9) 100%);
}

/* copy drops to the bottom of the frame */
.hero-in{
  z-index:2;
  justify-content:flex-end;
  padding:0 0 clamp(30px,5vh,56px);
}

.term-eyebrow{font-size:12.5px;margin-bottom:20px;min-height:0}

.hero h1{
  font-weight:800;
  font-size:clamp(31px,3.7vw,50px);
  line-height:1.06;
  letter-spacing:-.02em;
  max-width:19ch;
  margin-bottom:clamp(24px,3.5vh,36px);
  text-shadow:0 4px 40px rgba(5,6,7,.95);
}

.hero-rule{display:none}        /* safety net if the span is left in the markup */

.hero .actions{gap:14px;justify-content:flex-start}
.hero .actions .btn{padding:18px 34px}
.hero .btn-ghost{background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.22);backdrop-filter:blur(3px)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.34)}

.trust{z-index:2;max-width:var(--max);margin:0 auto;
  border-top-color:rgba(255,255,255,.12);color:#9AA1A9}
.trust li + li{border-left-color:rgba(255,255,255,.10)}
.trust-ico{border-color:rgba(255,255,255,.22)}

/* the ratio cap replaces the original height-based padding rules */
@media(max-height:900px) and (min-width:721px){
  .hero{padding:0 var(--pad) 24px}
  .hero-in{padding:0 0 clamp(24px,4vh,44px)}
}
@media(max-height:760px) and (min-width:721px){
  .hero{padding:0 var(--pad) 20px}
  .hero-in{padding:0 0 22px}
  .hero h1{font-size:clamp(29px,3.3vw,42px);margin-bottom:22px}
}

@media(max-width:1100px){
  /* the ratio cap would leave the hero too short to hold the copy */
  .hero{height:auto;min-height:100svh}
  .hero-photo img{object-position:52% 30%}
}
@media(max-width:720px){
  .hero{padding:0 var(--pad) 22px}
  .hero-in{padding:0 0 24px}
  .hero-photo img{object-position:56% 26%}
  .term-eyebrow{font-size:11px;margin-bottom:14px}
  .hero h1{font-size:clamp(27px,7.4vw,36px);max-width:16ch;line-height:1.1}
  .hero .actions{gap:10px}
}

/* ══ new homepage copy — supporting styles ═════════════════
   Paste at the end of styles.css, AFTER the hero block.
   ═════════════════════════════════════════════════════════ */

/* "Real people. Real work. Real results." — sits between the
   h2 and the lede, so it reads as a second headline rather
   than body copy */
.why-kicker{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--cy);
  margin-top:14px;
}
/* it used to introduce a paragraph; now it closes the headline,
   so the gap below it belongs to the section, not the sentence */
.why-copy .why-label{margin-top:clamp(26px,3.2vw,42px)}

/* ══ our roots / values ════════════════════════════════════
   Copy and photo share the top row; three icon boxes run
   beneath. Spacing is deliberately tight — the previous build
   spread this over ~1,400px and the photo fell below the fold.
   ═════════════════════════════════════════════════════════ */
.sec-roots{
  position:relative;overflow:hidden;
  max-width:none;border-top:1px solid var(--line);
  padding-top:clamp(48px,5.2vw,76px);
  padding-bottom:clamp(48px,5.2vw,76px);
}

/* the landscape — same wireframe instrument as the Infrastructure
   page, run slower and masked so it lives under the values row
   rather than behind the headline */
#rootsCv{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:0;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 34%,
    rgba(0,0,0,.55) 56%,#000 76%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 34%,
    rgba(0,0,0,.55) 56%,#000 76%,#000 100%);
}

.roots-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto}

.roots-grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,4vw,60px);
  align-items:center;
}
.sec-roots h2{font-size:clamp(23px,2.8vw,36px);line-height:1.1;margin-top:12px}
.roots-lede{color:#B4BBC2;font-size:15px;line-height:1.72;
            margin-top:16px;max-width:52ch}

/* the plate — a real frame, with the lit corner marks the
   .proof panel already uses, so the photo belongs to the page */
.roots-visual{
  margin:0;position:relative;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,#0E1114 0%,#08090B 100%);
  padding:9px;
}
.roots-visual img{
  width:100%;height:auto;display:block;
  filter:grayscale(1) contrast(1.04) brightness(.95);
}
.roots-visual::before,.roots-visual::after{
  content:"";position:absolute;width:9px;height:9px;
  background:var(--cy);box-shadow:0 0 12px rgba(201,206,212,.5);z-index:2;
}
.roots-visual::before{top:-1px;left:-1px}
.roots-visual::after{bottom:-1px;right:-1px}

/* ── the three values ── */
.values{
  list-style:none;margin:clamp(34px,4vw,54px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-2);
}
.values li{
  padding:clamp(26px,3vw,36px) clamp(16px,2.2vw,34px) 2px;
  text-align:center;
}
.values li + li{border-left:1px solid var(--line)}

.v-ico{
  display:grid;place-items:center;
  width:46px;height:46px;margin:0 auto 16px;
  border:1px solid var(--line-2);border-radius:50%;
  color:var(--cy);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.v-ico svg{width:21px;height:21px;display:block}
.values li:hover .v-ico{
  border-color:rgba(255,255,255,.34);
  box-shadow:0 0 22px -6px rgba(201,206,212,.55);
}

.values h3{
  font-family:var(--display);font-weight:800;
  font-size:clamp(16px,1.6vw,21px);
  text-transform:uppercase;letter-spacing:-.01em;
  margin:0;line-height:1.2;color:var(--text);
}
.values p{color:var(--muted);font-size:13.5px;line-height:1.65;
          margin:12px auto 0;max-width:30ch}

@media(max-width:900px){
  #rootsCv{opacity:.32}
  .roots-grid{grid-template-columns:1fr;gap:28px}
  .roots-visual{max-width:480px}
  .values{grid-template-columns:1fr}
  .values li{text-align:left;display:grid;
             grid-template-columns:46px 1fr;column-gap:18px;
             padding:22px 0 20px;border-bottom:1px solid var(--line)}
  .values li + li{border-left:0}
  .values li:last-child{border-bottom:0}
  .v-ico{margin:0;grid-row:1 / 3}
  .values h3{align-self:center}
  .values p{margin:6px 0 0;max-width:none;grid-column:2}
}

/* ── chatbot removed: neutralise anything a stale partial leaves ── */
.bot,.bot-launch{display:none!important}

/* ══ new homepage copy — supporting styles ═════════════════
   Paste at the end of styles.css, AFTER the hero block.
   ═════════════════════════════════════════════════════════ */

/* "Real people. Real work. Real results." — sits between the
   h2 and the lede, so it reads as a second headline rather
   than body copy */
.why-kicker{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--cy);
  margin-top:14px;
}
/* it used to introduce a paragraph; now it closes the headline,
   so the gap below it belongs to the section, not the sentence */
.why-copy .why-label{margin-top:clamp(26px,3.2vw,42px)}

/* ══ our roots / values ════════════════════════════════════
   Copy and photo share the top row; three icon boxes run
   beneath. Spacing is deliberately tight — the previous build
   spread this over ~1,400px and the photo fell below the fold.
   ═════════════════════════════════════════════════════════ */
.sec-roots{
  position:relative;overflow:hidden;
  max-width:none;border-top:1px solid var(--line);
  padding-top:clamp(48px,5.2vw,76px);
  padding-bottom:clamp(48px,5.2vw,76px);
}

/* the landscape — same wireframe instrument as the Infrastructure
   page, run slower and masked so it lives under the values row
   rather than behind the headline */
#rootsCv{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:0;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 34%,
    rgba(0,0,0,.55) 56%,#000 76%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 34%,
    rgba(0,0,0,.55) 56%,#000 76%,#000 100%);
}

.roots-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto}

.roots-grid{
  display:grid;
  grid-template-columns:1.22fr .78fr;
  gap:clamp(28px,4vw,60px);
  align-items:center;
}
.sec-roots h2{font-size:clamp(23px,2.8vw,36px);line-height:1.1;margin-top:12px}
.roots-lede{color:#B4BBC2;font-size:15px;line-height:1.72;
            margin-top:16px;max-width:52ch}

/* ── the slider ──
   Controls live BELOW the frame, not on top of the photo. On the
   image they read as hover chrome on a single picture; in their
   own strip they read as a gallery. */
.roots-slider{
  margin:0 0 0 auto;
  width:100%;max-width:430px;
}

/* the frame — same corner marks as .proof, so the plate belongs
   to the page rather than sitting on it */
.rs-frame{
  position:relative;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,#0E1114 0%,#08090B 100%);
  padding:9px;
}
.rs-frame::before,.rs-frame::after{
  content:"";position:absolute;width:9px;height:9px;
  background:var(--cy);box-shadow:0 0 12px rgba(201,206,212,.5);z-index:3;
}
.rs-frame::before{top:-1px;left:-1px}
.rs-frame::after{bottom:-1px;right:-1px}

/* slides stack in one box, so the panel never jumps height when
   photos have different proportions */
.rs-stage{position:relative;aspect-ratio:4 / 3;overflow:hidden}
.rs-slide{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04) brightness(.95);
  opacity:0;transition:opacity .5s var(--ease);
}
.rs-slide.on{opacity:1}

/* ── the control strip ── */
.rs-ctl{
  display:flex;align-items:center;gap:12px;
  margin-top:14px;
}

.rs-arw{
  flex:none;
  width:34px;height:34px;display:grid;place-items:center;
  background:none;border:1px solid var(--line-2);
  color:var(--muted);cursor:pointer;
  transition:color .22s var(--ease),border-color .22s var(--ease),
             background .22s var(--ease);
}
.rs-arw svg{width:16px;height:16px}
.rs-arw:hover{color:var(--text);border-color:rgba(255,255,255,.34);
              background:rgba(255,255,255,.04)}

/* segmented indicator — the site's hairline vocabulary, not dots */
.rs-bar{flex:1;display:flex;gap:5px;min-width:0}
.rs-seg{
  flex:1;height:2px;padding:0;border:0;cursor:pointer;
  background:var(--line-2);
  transition:background .3s var(--ease);
}
.rs-seg:hover{background:rgba(255,255,255,.34)}
.rs-seg.on{background:var(--cy);box-shadow:0 0 10px rgba(201,206,212,.55)}

.rs-count{
  flex:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--muted);
}

/* ── the three values ── */
.values{
  list-style:none;margin:clamp(34px,4vw,54px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-2);
}
.values li{
  padding:clamp(26px,3vw,36px) clamp(16px,2.2vw,34px) 2px;
  text-align:center;
}
.values li + li{border-left:1px solid var(--line)}

.v-ico{
  display:grid;place-items:center;
  width:46px;height:46px;margin:0 auto 16px;
  border:1px solid var(--line-2);border-radius:50%;
  color:var(--cy);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.v-ico svg{width:21px;height:21px;display:block}
.values li:hover .v-ico{
  border-color:rgba(255,255,255,.34);
  box-shadow:0 0 22px -6px rgba(201,206,212,.55);
}

.values h3{
  font-family:var(--display);font-weight:800;
  font-size:clamp(16px,1.6vw,21px);
  text-transform:uppercase;letter-spacing:-.01em;
  margin:0;line-height:1.2;color:var(--text);
}
.values p{color:var(--muted);font-size:13.5px;line-height:1.65;
          margin:12px auto 0;max-width:30ch}

@media(max-width:900px){
  #rootsCv{opacity:.32}
  .roots-grid{grid-template-columns:1fr;gap:28px}
  .roots-slider{margin:0;max-width:480px}
  .values{grid-template-columns:1fr}
  .values li{text-align:left;display:grid;
             grid-template-columns:46px 1fr;column-gap:18px;
             padding:22px 0 20px;border-bottom:1px solid var(--line)}
  .values li + li{border-left:0}
  .values li:last-child{border-bottom:0}
  .v-ico{margin:0;grid-row:1 / 3}
  .values h3{align-self:center}
  .values p{margin:6px 0 0;max-width:none;grid-column:2}
}

/* ── chatbot removed: neutralise anything a stale partial leaves ── */
.bot,.bot-launch{display:none!important}
/* ══ consulting page ═══════════════════════════════════════
   The page borrows the AI page's section grammar (.ai-sec,
   .cred, .layer, .ai-proof) so it reads as a sibling rather
   than a new system. Only the field canvases and a handful of
   local adjustments are new.

   Paste at the end of styles.css.
   ═════════════════════════════════════════════════════════ */

/* the hero field */
#routeCv{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;
}

/* just enough to seat the headline — a full wash also dims the
   field it is meant to sit on */
#routeWrap .city-stage::after{
  background:
    radial-gradient(44% 40% at 24% 48%,rgba(5,6,7,.9) 0%,
                    rgba(5,6,7,.6) 44%,transparent 76%),
    linear-gradient(180deg,rgba(5,6,7,.8) 0%,transparent 16%,
                    transparent 76%,var(--bg) 100%);
}
#routeWrap .crumb{margin-bottom:18px}
#routeWrap .city-in h1{max-width:19ch}

/* the same instrument, played quietly under later sections */
/* The field used to be confined to the right, which is why it read
   as a texture in the corner rather than the section's background.
   Now it runs the full width and the mask only opens a hole where
   the headline sits. */
.dot-cv{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(62% 58% at 20% 30%,transparent 0%,
    rgba(0,0,0,.35) 48%,rgba(0,0,0,.8) 72%,#000 92%);
          mask-image:radial-gradient(62% 58% at 20% 30%,transparent 0%,
    rgba(0,0,0,.35) 48%,rgba(0,0,0,.8) 72%,#000 92%);
}
.ai-sec .ai-in{position:relative;z-index:2}

/* ── process: a receding floor, CSS only ──
   No canvas here on purpose. The section needed its own look
   anyway, and a perspective grid gets there with two divs and a
   keyframe — nothing to load, nothing to cache, nothing to break.
   The plane is rotated back on the X axis and the horizontal rules
   drift toward the viewer, so it reads as ground running away to a
   horizon. */
#process{position:relative;overflow:hidden}

/* the floor is deliberately wider than its section for the
   perspective; the section clips it so it can't unlock
   horizontal page scroll on a phone */
#process,.ai-sec:has(.proc-floor){overflow:hidden}
.proc-floor{
  position:absolute;left:-30%;right:-30%;bottom:-12%;height:74%;
  z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(226,232,238,.20) 0 1px,transparent 1px 104px),
    repeating-linear-gradient(0deg, rgba(226,232,238,.16) 0 1px,transparent 1px 104px);
  transform:perspective(440px) rotateX(74deg);
  transform-origin:50% 100%;
  animation:procDrift 11s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 34%,#000 68%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 34%,#000 68%);
}
@keyframes procDrift{ to{ background-position:0 104px, 0 104px; } }

/* the light where the plane meets the horizon */
.proc-haze{
  position:absolute;left:0;right:0;bottom:34%;height:42%;
  z-index:0;pointer-events:none;
  background:radial-gradient(58% 100% at 50% 100%,
    rgba(226,232,238,.11) 0%,rgba(226,232,238,.03) 44%,transparent 76%);
}

@media(prefers-reduced-motion:reduce){
  .proc-floor{animation:none}
}

/* the panels sit ON the field, so they need to be opaque enough to
   hold their copy — translucent cards over a live field vibrate */
.msp-steps.steps-4 li{
  background:linear-gradient(180deg,rgba(13,16,19,.94) 0%,rgba(7,8,10,.97) 100%);
}

/* the second opening line sits tight under the first */
.psub-tight{margin-top:14px;color:var(--muted)}

/* credibility runs two nodes, not three */
#credibility .cred{grid-template-columns:repeat(2,1fr);max-width:64ch}
#credibility .cred p{max-width:42ch}

/* ── process: four bordered steps ──
   Loose columns drifted out of alignment because each step's
   height was set by its own copy. Panels give them a shared
   edge, so the row reads as one object. */
.msp-steps.steps-4{
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,22px);
}
.msp-steps.steps-4 li{
  position:relative;
  padding:26px 24px 28px;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(14,17,20,.72) 0%,rgba(8,9,11,.86) 100%);
  backdrop-filter:blur(2px);
  transition:border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
.msp-steps.steps-4 li:hover{
  border-color:rgba(255,255,255,.28);
  transform:translateY(-3px);
  box-shadow:0 24px 54px -30px rgba(0,0,0,.95);
}
/* the number sits on the top edge, the way .prin-n does */
.msp-steps.steps-4 .ms-n{
  position:absolute;top:-14px;left:24px;
  width:auto;height:auto;border-radius:0;border:0;
  background:var(--bg);padding:0 9px;
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--cy);
}
.msp-steps.steps-4 h3{font-size:clamp(15px,1.4vw,19px);margin-top:6px}
.msp-steps.steps-4 h3::after{
  content:"";display:block;width:22px;height:1px;
  background:var(--line-2);margin:13px 0 0;
}
.msp-steps.steps-4 p{margin-top:14px}

/* ── capabilities: the flow map ── */
.fm-title{font-size:clamp(22px,2.7vw,34px);margin:10px 0 0;max-width:22ch}
#capabilities .flowmap{margin-top:clamp(30px,3.6vw,52px)}
/* the consulting descriptions run longer than the AI page's */
#capabilities .fm-node p{font-size:13px;line-height:1.6}
#capabilities .fm-node h3{font-size:clamp(13px,1.05vw,15px)}

#process .flow-title{max-width:24ch;margin:8px 0 0}
#process .ai-sub{margin-top:16px}

@media(max-width:980px){
  .msp-steps.steps-4{grid-template-columns:repeat(2,1fr);row-gap:30px}
}

/* the AI page's mobile interleave is written for eight nodes across
   three phases; this page runs nine, so the order is restated */
@media(max-width:960px){
  #capabilities .fm-phase:nth-of-type(1){order:1}
  #capabilities .fm-node:nth-of-type(1){order:2}
  #capabilities .fm-node:nth-of-type(2){order:3}
  #capabilities .fm-node:nth-of-type(3){order:4}
  #capabilities .fm-phase:nth-of-type(2){order:5}
  #capabilities .fm-node:nth-of-type(4){order:6}
  #capabilities .fm-node:nth-of-type(5){order:7}
  #capabilities .fm-node:nth-of-type(6){order:8}
  #capabilities .fm-phase:nth-of-type(3){order:9}
  #capabilities .fm-node:nth-of-type(7){order:10}
  #capabilities .fm-node:nth-of-type(8){order:11}
  #capabilities .fm-node:nth-of-type(9){order:12}
}
@media(max-width:900px){
  #routeWrap .city-stage::after{
    background:linear-gradient(180deg,rgba(5,6,7,.9) 0%,rgba(5,6,7,.68) 32%,
                               rgba(5,6,7,.8) 74%,var(--bg) 100%)}
  #routeWrap .city-in h1{max-width:100%}
  #credibility .cred{grid-template-columns:1fr}
  .dot-cv{-webkit-mask-image:none;mask-image:none;opacity:.5}
}
@media(max-width:620px){
  .msp-steps.steps-4{grid-template-columns:1fr}
}

/* ══ about — the photo band ════════════════════════════════
   Three shots between the founder and the numbers, so the page
   runs: who started it, who runs it now, what that adds up to.

   Paste at the end of styles.css.
   ═════════════════════════════════════════════════════════ */
.shots-note{
  color:#B4BBC2;font-size:15px;line-height:1.75;
  margin:16px 0 0;max-width:56ch;
}

.shot-row{
  display:grid;
  /* the middle frame is the quiet one — a meeting between two
     rooms full of people, so it gets less width */
  grid-template-columns:1.15fr .8fr 1.15fr;
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(28px,3.4vw,48px);
}

.shot{
  margin:0;position:relative;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,#0E1114 0%,#08090B 100%);
  padding:8px;
  overflow:hidden;
}
/* one plate reads as a set only if they share a baseline, so the
   frames are locked to a ratio and the photos crop into it */
.shot img{
  width:100%;height:100%;display:block;
  aspect-ratio:4 / 3;object-fit:cover;
  filter:grayscale(1) contrast(1.04) brightness(.92);
  transition:filter .4s var(--ease),transform .6s var(--ease);
}
.shot:hover img{filter:grayscale(1) contrast(1.06) brightness(1.02);
                transform:scale(1.02)}

/* the lit corner, same mark the .proof panel carries */
.shot::after{
  content:"";position:absolute;bottom:-1px;right:-1px;
  width:9px;height:9px;background:var(--cy);
  box-shadow:0 0 12px rgba(201,206,212,.5);z-index:2;
}
.shot:first-child::before{
  content:"";position:absolute;top:-1px;left:-1px;
  width:9px;height:9px;background:var(--cy);
  box-shadow:0 0 12px rgba(201,206,212,.5);z-index:2;
}

@media(max-width:900px){
  .shot-row{grid-template-columns:1fr 1fr}
  .shot:last-child{grid-column:1 / -1}
}
@media(max-width:560px){
  .shot-row{grid-template-columns:1fr}
  .shot:last-child{grid-column:auto}
}

/* ══ drawer — a parent row that is also a page ══════════════
   Consulting is both a destination and a group. The label links
   to the page and the chevron is its own button, so the row does
   two jobs without either getting in the other's way.

   Paste at the end of styles.css.
   ═════════════════════════════════════════════════════════ */
.dn-top-split{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0;                       /* the padding moves onto the children,
                                      so each has its own real tap target */
  border-bottom:1px solid var(--line);
}

.dn-lead{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 0;
  background:none;border:0;text-align:left;cursor:pointer;
  color:inherit;font:inherit;
}
.dn-lead b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2.8vw,24px);letter-spacing:-.015em;
  text-transform:uppercase;color:var(--text);line-height:1.1;
  transition:color .2s var(--ease),transform .3s var(--ease);
}
.dn-lead small{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.dn-lead:hover b{color:#fff;transform:translateX(6px)}

/* 44px square — the chevron has to be its own target or you can't
   open the submenu without launching the page */
.dn-toggle{
  flex:none;width:44px;height:44px;
  display:grid;place-items:center;
  background:none;border:0;border-left:1px solid var(--line);
  color:var(--muted);cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.dn-toggle:hover{color:#fff;background:rgba(255,255,255,.04)}
.dn-toggle .dn-chev{transition:transform .35s var(--ease)}
.dn-toggle[aria-expanded="true"] .dn-chev{transform:rotate(180deg);color:var(--text)}

/* a group with no href keeps the whole row as one control */
.dn-lead.dn-toggle{width:auto;height:auto;border-left:0;display:flex}

.drawer-nav a.dn-lead[aria-current="page"] b{color:#fff}
.drawer-nav a.dn-lead[aria-current="page"] small{color:var(--cy)}

/* ══ in the field — the media band ═════════════════════════
   Sits between the three pillars and Why iMS: the pillars say
   what the company does, this shows it, then Why makes the
   argument. Photos and clips share one 16:9 frame so the band
   never changes shape mid-slide.

   Paste at the end of styles.css.
   ═════════════════════════════════════════════════════════ */
.sec-field{position:relative;overflow:hidden;
           max-width:none;border-top:1px solid var(--line);
           padding-top:clamp(46px,5vw,74px);
           padding-bottom:clamp(46px,5vw,74px)}
.field-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto}

/* Copy left, media right — the same arrangement as Our Roots.
   Run full width, a 16:9 frame is ~675px tall and swallows the
   page; in a column it lands near 380px. */
.field-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
.sec-field h2{font-size:clamp(23px,2.8vw,36px);line-height:1.1;margin-top:12px}
.field-note{color:#B4BBC2;font-size:15px;line-height:1.72;
            margin-top:16px;max-width:40ch}

/* the survey plane — the section's ground, edge to edge */
.field-mesh{
  position:absolute;left:0;right:0;bottom:-6%;
  width:100%;height:82%;
  display:block;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 24%,
    #000 52%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 24%,
    #000 52%,#000 78%,transparent 100%);
  opacity:.85;
}

/* ── the field log ──
   A readout, not a caption: mono labels in a fixed column so the
   values line up no matter how long they run. */
.flog{
  margin-top:clamp(26px,3.4vw,44px);
  max-width:400px;
  border-top:1px solid var(--line-2);
  opacity:0;transform:translateY(6px);
}
.flog.in{animation:flogIn .45s var(--ease) forwards}
@keyframes flogIn{to{opacity:1;transform:none}}

.flog-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0 12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text);
  border-bottom:1px solid var(--line);
}
.flog-dot{
  width:5px;height:5px;border-radius:50%;background:var(--cy);
  box-shadow:0 0 10px rgba(201,206,212,.8);
  animation:flogPulse 2.6s ease-in-out infinite;
}
@keyframes flogPulse{50%{opacity:.25}}

.flog-rows{margin:0}
.flog-rows > div{
  display:grid;grid-template-columns:88px 1fr;
  gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);
}
.flog-rows > div:last-child{border-bottom:0}
.flog-rows dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.flog-rows dd{
  margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#C6CDD4;line-height:1.5;
}

@media(prefers-reduced-motion:reduce){
  .flog{opacity:1;transform:none}
  .flog.in{animation:none}
  .flog-dot{animation:none}
}
@media(max-width:900px){
  .field-mesh{height:60%;opacity:.5}
  .flog{max-width:none}
}

.mb{margin:0 0 0 auto;position:relative;width:100%;max-width:390px}

.mb-frame{
  position:relative;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,#0E1114 0%,#08090B 100%);
  padding:9px;
}
.mb-frame::before,.mb-frame::after{
  content:"";position:absolute;width:9px;height:9px;
  background:var(--cy);box-shadow:0 0 12px rgba(201,206,212,.5);z-index:3;
}
.mb-frame::before{top:-1px;left:-1px}
.mb-frame::after{bottom:-1px;right:-1px}

/* every slide is stacked in one box — a band that resizes per
   slide reads as broken, however good the media is */
/* the clips are vertical phone footage — all four came in with
   rotation=-90. Forcing them into a landscape box cropped them to
   nothing, so the frame matches the footage and the stills were
   re-cut to the same shape. */
.mb-stage{position:relative;aspect-ratio:900 / 1124;overflow:hidden;background:#07080A}
.mb-slide{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  /* grayscale in CSS rather than baked into the files, so the
     originals stay usable elsewhere */
  filter:grayscale(1) contrast(1.05) brightness(.94);
  opacity:0;transition:opacity .5s var(--ease);
  pointer-events:none;
}
.mb-slide.on{opacity:1}

/* ── controls, outside the frame ── */
.mb-ctl{display:flex;align-items:center;gap:12px;margin-top:14px}
.mb-arw{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  background:none;border:1px solid var(--line-2);
  color:var(--muted);cursor:pointer;
  transition:color .22s var(--ease),border-color .22s var(--ease),
             background .22s var(--ease);
}
.mb-arw svg{width:16px;height:16px}
.mb-arw:hover{color:var(--text);border-color:rgba(255,255,255,.34);
              background:rgba(255,255,255,.04)}

.mb-bar{flex:1;display:flex;gap:5px;min-width:0}
.mb-seg{
  flex:1;height:2px;padding:0;border:0;cursor:pointer;
  background:var(--line-2);transition:background .3s var(--ease);
}
.mb-seg:hover{background:rgba(255,255,255,.34)}
.mb-seg.on{background:var(--cy);box-shadow:0 0 10px rgba(201,206,212,.55)}
/* a clip's segment carries a tick, so you can see which are moving */
.mb-seg[data-kind="video"]{position:relative}
.mb-seg[data-kind="video"]::after{
  content:"";position:absolute;left:50%;top:-5px;
  width:3px;height:3px;margin-left:-1.5px;
  background:var(--line-2);transition:background .3s var(--ease);
}
.mb-seg[data-kind="video"].on::after{background:var(--cy)}

.mb-count{
  flex:none;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--muted);
}

/* the sound toggle */
.mb-sound .mb-ico-on{display:none}
.mb-sound.on .mb-ico-on{display:block}
.mb-sound.on .mb-ico-off{display:none}
.mb-sound.on{color:var(--cy);border-color:rgba(201,206,212,.5)}

@media(max-width:900px){
  .field-grid{grid-template-columns:1fr;gap:26px}
  .mb{margin:0;max-width:360px}
  .field-note{max-width:none}
}
@media(max-width:720px){
  .mb-ctl{gap:9px}
}
/* ══ about — the founder photograph ════════════════════════
   The one colour image on the site, and deliberately so: it is
   a 1996 print with a date stamp burned into the corner, not
   art direction. Converting it to grayscale would fold it into
   the design and lose exactly what makes it worth showing.

   It sits under the quote rather than beside the body copy —
   the quote is his voice, the photo is him, so they pair.

   Paste at the end of styles.css.
   ═════════════════════════════════════════════════════════ */
/* Explicit placement. Left to auto-flow, the photo takes column 2
   and shunts the body copy onto row 2 column 1 — which is what left
   a narrow text column and half a page of dead space. */
.founder .abt-in{align-items:start}
.founder-quote{grid-column:1;grid-row:1}
.founder-shot{grid-column:2;grid-row:1}
.founder-body{grid-column:1 / -1;grid-row:2}

.founder-shot{
  margin:0;                 /* tops out level with the quote */
  position:relative;
  width:100%;max-width:none;
}
.founder-shot img{
  width:100%;height:auto;display:block;
  /* left in colour. The only grade is a slight desaturation so it
     sits in a monochrome page without shouting, and a hairline
     border so it reads as a print rather than a floating window. */
  filter:saturate(.88) contrast(1.02);
  border:1px solid var(--line-2);
}
.founder-shot figcaption{
  margin-top:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}

/* the corner mark the rest of the plates carry, so it still
   belongs to the page */
.founder-shot::before{
  content:"";position:absolute;top:-1px;left:-1px;
  width:9px;height:9px;background:var(--cy);
  box-shadow:0 0 12px rgba(201,206,212,.5);z-index:2;
}

/* three paragraphs across the full width — one measure that wide
   runs past 100 characters and stops being readable */
.founder-body{
  margin-top:clamp(34px,4vw,58px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,52px);
}
.founder-body p{margin:0}

@media(max-width:900px){
  .founder-quote,.founder-shot,.founder-body{grid-column:auto;grid-row:auto}
  .founder-shot{max-width:380px}
  .founder-body{grid-template-columns:1fr;gap:16px;margin-top:0}
  .founder-body p{margin:0 0 16px}
  .founder-body p:last-child{margin-bottom:0}
}
@media(max-width:1100px) and (min-width:901px){
  .founder-body{grid-template-columns:repeat(2,1fr)}
}

/* ══ hero — the photo, shifted left ════════════════════════
   object-position can't fix a left-heavy frame here. The hero's
   height is capped at 53.8vw so its ratio matches the photo's,
   which means there is no horizontal crop to reposition — the
   whole width is already on screen.

   So the image is scaled up and pushed left instead: the empty
   room on the left runs off the edge, and the scale keeps the
   right edge covered.

   The copy stays where the main hero block puts it — on the
   floor. Centring it vertically laid the headline across
   everyone's torsos.

   Paste at the VERY END of styles.css, after everything else.
   ═════════════════════════════════════════════════════════ */
.hero-photo img{
  transform:scale(1.14) translateX(-4.5%);
  transform-origin:50% 50%;
}

@media(max-width:1100px){
  /* below the cap the hero does crop horizontally, so the crop
     window does the work and the transform can ease off */
  .hero-photo img{transform:scale(1.06) translateX(-2%);object-position:56% 34%}
}
@media(max-width:720px){
  .hero-photo img{transform:none;object-position:60% 30%}
}

/* ══ contact — the draft-email note ════════════════════════
   Paste at the end of styles.css.
   ═════════════════════════════════════════════════════════ */
.ct-sent{
  flex-basis:100%;
  margin:12px 0 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  line-height:1.6;color:var(--cy);
  opacity:0;transform:translateY(4px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.ct-sent.on{opacity:1;transform:none}
.ct-sent.warn{color:#D8C48A}


/* ══ client ticker — an infinite horizontal loop ═══════════
   Two identical rows in one track. The track translates by exactly
   -50%, so the instant row one has fully exited, row two is sitting in
   precisely the pixels it vacated and the seam is invisible.

   The gap lives on the row as internal `gap` plus a matching
   `padding-right`, never on the track. If it sat between the two rows
   instead, -50% would land half a gap short and the loop would visibly
   stutter once per cycle.

   Add or remove a logo in BOTH rows or the seam breaks. */
.ticker{
  --tick-gap:26px;
  position:relative;overflow:hidden;
  padding:clamp(30px,3.2vw,48px) 0 clamp(6px,1vw,14px);
  /* feather both ends so logos don't guillotine at the viewport edge */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.ticker-track{display:flex;width:max-content;animation:tick 46s linear infinite}
.ticker-row{
  display:flex;align-items:center;gap:var(--tick-gap);
  padding:0 var(--tick-gap) 0 0;margin:0;list-style:none;
}
.ticker-row img{
  box-sizing:border-box;
  width:126px;height:auto;display:block;
  background:#F1F3F5;border-radius:8px;padding:9px 11px;
  opacity:.8;transition:opacity .3s var(--ease),background-color .3s var(--ease);
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-row img:hover{opacity:1;background:#FFF}
@keyframes tick{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (max-width:760px){
  .ticker{--tick-gap:16px}
  .ticker-row img{width:104px;padding:7px 9px}
  .ticker-track{animation-duration:34s}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .ticker{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* service bar under the hero — four categories replacing the
   trust chips, linked so the row is an entry point rather than
   a third restatement of the nav */
.trust-svc a{color:inherit;text-decoration:none;
  transition:color .25s var(--ease),opacity .25s var(--ease)}
.trust-svc a:hover,.trust-svc a:focus-visible{color:#fff}

/* ══ consulting opening — two columns, one rule ════════════
   The divider is a pseudo-element on the aside, not a border on
   the grid, so it can inset top and bottom without needing a
   third column to live in. */
.csplit{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4.5vw,68px);align-items:start;
}
.csplit-aside{position:relative;padding-left:clamp(28px,4vw,58px)}
.csplit-aside::before{
  content:"";position:absolute;left:0;top:.4em;bottom:.6em;width:1px;
  background:var(--line);
}
@media (max-width:900px){
  .csplit{grid-template-columns:1fr;gap:0}
  .csplit-aside{padding-left:0;margin-top:38px;padding-top:34px}
  .csplit-aside::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
}

/* the buttons sit directly under a paragraph here, with no
   section padding between them the way there is elsewhere */
.csplit .actions{margin-top:clamp(22px,2.6vw,34px)}
.csplit .psub + .psub{margin-top:clamp(14px,1.6vw,20px)}

/* the AI page carries two buttons in its left column, so the
   rows can wrap; keep them from colliding with the aside */
.csplit-main .actions{flex-wrap:wrap}

/* the hero photo is 1344x880 landscape in a 430-wide frame, so
   `cover` discards about 70% of the width. Centre the crop on the
   group rather than the desktop's off-centre framing. */
@media (max-width:620px){
  /* 430x727 frame against a 1344x880 photo still crops hard, but
     centring recovers the people lost off the left edge */
  .hero-photo img{object-position:50% 28%}
  /* height:auto above means this floor can drop safely — the
     section still grows if the copy needs the room */
  .hero{min-height:78svh}
}

/* mobile hero refinements — the headline lands on the brightest
   part of the photo, so it needs a darker bed under it */
@media (max-width:620px){
  .hero-photo img{object-position:50% 31%}
  /* 1926 caps at 36px with max-width:16ch, which forces four
     lines at 430px. Smaller type and a wider measure gets it to
     three without crowding the buttons. */
  .hero h1{font-size:clamp(26px,6.9vw,32px);max-width:19ch}
  .hero-fade{background:linear-gradient(180deg,
    rgba(8,11,20,.28) 0%, rgba(8,11,20,.30) 38%,
    rgba(8,11,20,.72) 66%, rgba(8,11,20,.94) 100%)}
}

/* iOS Safari drops backdrop-filter on fixed elements mid-scroll,
   so the 90% bar stops hiding what passes under it. On touch
   screens the bar goes opaque and the blur becomes optional. */
@media (max-width:900px){
  .nav.stuck{background:#050607;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* iOS extends the page behind the status bar, so a bar at top:0
   starts below the inset and leaves the page showing above it.
   Pad the bar up into that area so its background covers it. */
@media (max-width:900px){
  .nav{padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .nav.stuck{padding-top:calc(10px + env(safe-area-inset-top,0px));
             background:#050607}
}

/* hover-to-enlarge on the ticker. The track already pauses on
   hover, so the logo holds still long enough to grow into.
   z-index lifts it over its neighbours; the extra bottom padding
   on .ticker stops the scaled logo clipping against overflow:hidden.
   Gated behind hover:hover so touch devices don't get a stuck
   scaled state after a tap. */
@media (hover:hover){
  .ticker{padding-bottom:clamp(14px,1.6vw,22px)}
  .ticker-row img{
    position:relative;z-index:0;
    transform-origin:center;
    transition:opacity .3s var(--ease),background-color .3s var(--ease),
               transform .32s var(--ease);
  }
  .ticker-row img:hover{
    opacity:1;background:#FFF;
    transform:scale(1.18);
    z-index:2;
    box-shadow:0 10px 28px -10px rgba(0,0,0,.65);
  }
}