/* ==========================================================================
   Coalescence Solutions — v2
   Palette derived directly from the brand mark's gradient stops:
   #492568 → #72256D → #BC2577, grey strand #4D4D4D → #666666,
   highlight #E7AEFF. Dark only, by design.
   ========================================================================== */

:root{
  /* ground */
  --bg:#07060b;
  --bg-2:#0b0912;
  --panel:#110e1b;
  --panel-2:#171324;
  --line:#221d33;
  --line-2:#332b4a;

  /* ink */
  --ink:#f3f0f8;
  --ink-2:#aaa2bf;
  --ink-3:#6f6789;

  /* brand */
  --violet-deep:#492568;
  --violet:#662d91;
  --violet-mid:#72256d;
  --magenta:#bc2577;
  --glow:#e7aeff;
  --grey-a:#4d4d4d;
  --grey-b:#666666;

  --brand-grad:linear-gradient(120deg,#492568 0%,#72256d 46%,#bc2577 100%);
  --brand-grad-soft:linear-gradient(120deg,rgba(73,37,104,.22) 0%,rgba(188,37,119,.16) 100%);

  --accent:var(--magenta);
  --accent-soft:rgba(188,37,119,.14);
  --glow-soft:rgba(231,174,255,.14);

  /* type
     Gotham is the house typeface. It is a licensed Hoefler&Co face and cannot
     be served from Google Fonts, so Montserrat carries the site today: the same
     geometric construction, tall x-height and double-storey 'a'. "Gotham" is
     listed first in both stacks, so the moment the licensed webfont is dropped
     in (see the @font-face block below) it takes over with no further change. */
  --display:"Gotham", "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Gotham", "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --container:1240px;
  --gut:24px;
  --r:14px;
  --r-sm:10px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Tells the browser to render native UI — select popups, scrollbars,
     date pickers, autofill — in dark. Without this they come back light. */
  color-scheme:dark;
}

/* ===========================================================================
   Licensed Gotham — drop-in point
   ---------------------------------------------------------------------------
   Gotham is not a Google font. If you hold a Hoefler&Co webfont licence for
   coalescence.me, put the .woff2 files in /assets/fonts/ and uncomment this
   block. Nothing else needs to change: "Gotham" already leads --display and
   --body, so it takes precedence over Montserrat the moment it loads.

@font-face{font-family:"Gotham";src:url("/assets/fonts/Gotham-Book.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("/assets/fonts/Gotham-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("/assets/fonts/Gotham-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("/assets/fonts/Gotham-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
   =========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
a{color:var(--glow);text-decoration:none;transition:color .2s var(--ease),opacity .2s var(--ease)}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{
  font-family:var(--display);margin:0;font-weight:400;
  line-height:1.05;letter-spacing:-.035em;text-wrap:balance;
}
h1{font-size:clamp(42px,7.4vw,96px);font-weight:300;letter-spacing:-.045em}
h2{font-size:clamp(30px,4.4vw,58px);font-weight:300;letter-spacing:-.04em}
h3{font-size:clamp(19px,1.7vw,23px);font-weight:500;letter-spacing:-.02em}
h4{font-size:17px;font-weight:500;letter-spacing:-.015em}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--magenta);color:#fff;padding:12px 18px;z-index:300;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ============================== atoms ============================== */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--glow);font-weight:400;display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--magenta),transparent)}
.lede{color:var(--ink-2);font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.62;max-width:66ch}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.grad-text{
  background:linear-gradient(104deg,#e7aeff 0%,#bc2577 52%,#8f2a86 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dim-line{color:var(--ink-3)}

/* pill badge */
.badge{
  display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:rgba(255,255,255,.02);backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-2);
}
.badge b{
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--brand-grad);color:#fff;padding:3px 8px;border-radius:var(--r-pill);
}
.badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 0 var(--glow-soft);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(231,174,255,.45)}70%{box-shadow:0 0 0 9px rgba(231,174,255,0)}100%{box-shadow:0 0 0 0 rgba(231,174,255,0)}}

.tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  color:var(--ink-2);background:rgba(255,255,255,.015);white-space:nowrap;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.tag:hover{border-color:rgba(231,174,255,.45);color:var(--glow)}
.tag.on{background:var(--brand-grad);border-color:transparent;color:#fff}

/* buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:15.5px;font-weight:500;letter-spacing:-.01em;
  padding:14px 26px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform .28s var(--ease-out),border-color .25s var(--ease),color .25s var(--ease),box-shadow .3s var(--ease);
}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 8px 30px -12px rgba(188,37,119,.8)}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s var(--ease);
  background:linear-gradient(120deg,#5d2f84 0%,#8f2a86 46%,#d93a90 100%);
}
.btn-primary:hover{color:#fff;box-shadow:0 14px 42px -12px rgba(188,37,119,.95)}
.btn-primary:hover::after{opacity:1}
.btn-ghost{background:rgba(255,255,255,.025);color:var(--ink);border-color:var(--line-2);backdrop-filter:blur(6px)}
.btn-ghost:hover{color:#fff;border-color:rgba(231,174,255,.5);background:rgba(231,174,255,.06)}
.btn-lg{padding:16px 30px;font-size:16.5px}
.btn-sm{padding:10px 18px;font-size:14px}

/* ============================== ambient ============================== */
.orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.orb.a{width:46vw;height:46vw;background:radial-gradient(circle,#72256d 0%,transparent 66%);top:-14vw;left:-10vw;animation:drift1 26s var(--ease) infinite alternate}
.orb.b{width:38vw;height:38vw;background:radial-gradient(circle,#bc2577 0%,transparent 66%);top:6vw;right:-12vw;animation:drift2 32s var(--ease) infinite alternate}
.orb.c{width:30vw;height:30vw;background:radial-gradient(circle,#492568 0%,transparent 68%);bottom:-14vw;left:28vw;animation:drift3 38s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(7vw,5vw,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-8vw,7vw,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(5vw,-6vw,0) scale(1.2)}}

.gridlines{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%);
}

/* Subtle film grain. No mix-blend-mode: a full-viewport blending layer forces
   the whole page into one compositing layer for no visible gain at this
   opacity, so the grain is applied as a plain low-opacity overlay instead. */
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:250;background:var(--brand-grad);transition:width .1s linear}

/* ============================== header ============================== */
/* The topbar is NOT part of the sticky element. It used to be, and collapsing
   it on scroll changed the sticky element's height mid-scroll — which Chrome's
   scroll anchoring then compensated for, which moved scrollY, which re-triggered
   the toggle. Every workaround for that (hysteresis, overflow-anchor) traded the
   flicker for the header hanging in its compact state near the top of the page.
   Leaving the topbar in normal flow removes the cause: it scrolls away like any
   other content, and the sticky header is a fixed-height bar that never resizes.
   `.stuck` now changes paint only — background, border, shadow — so there is no
   layout work on scroll at all. */
.topbar{border-bottom:1px solid var(--line);background:rgba(11,9,18,.6)}
.topbar .container{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;justify-content:space-between;padding-block:8px}
.topbar span,.topbar a{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3)}
.topbar a:hover{color:var(--glow)}

.site-header{position:sticky;top:0;z-index:200;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
/* Solid rather than translucent: a backdrop-filter across a full-width sticky
   bar is one of the more expensive things you can ask a compositor to do on
   every scroll frame, and on this near-black ground the blur is not visible
   enough to earn that cost. Small elements (.badge, .btn-ghost) still use it. */
.site-header.stuck{background:#0a0812;border-bottom:1px solid var(--line);box-shadow:0 12px 34px -24px #000}

.navbar{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:14px}
.brand{display:inline-flex;align-items:center;gap:13px;color:var(--ink)}
.brand:hover{color:var(--ink)}
/* Both halves of the identity are artwork: the gradient mark, and the supplied
   double-line wordmark. The master wordmark sets SOLUTIONS in #492568 (1.6:1 on
   this ground), so build/make-logo.js remaps that line to the highlight already
   present in the logo gradient and crops the file. Regenerate, do not hand-edit. */
/* One size, in both states. These are raster files, and animating their height
   made the browser resample them on every frame of the transition — which is
   what read as the logo looking soft and cheap while the header settled. */
.brand-mark{height:46px;width:auto;filter:drop-shadow(0 3px 14px rgba(188,37,119,.35))}
.brand-lockup{height:28px;width:auto}
.foot-brand .brand-mark{height:45px}
.foot-brand .brand-lockup{height:27px}
@media (max-width:520px){
  .brand{gap:10px}
  .brand-mark{height:38px}
  .brand-lockup{height:23px}
}

.nav{display:flex;align-items:center;gap:2px}
.nav > a{
  position:relative;font-size:14.5px;font-weight:450;color:var(--ink-2);
  padding:9px 14px;border-radius:var(--r-pill);transition:color .2s var(--ease),background .2s var(--ease);
}
.nav > a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.nav > a[aria-current="page"]{color:var(--ink)}
.nav > a[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1.5px;border-radius:2px;background:var(--brand-grad);
}
.nav-cta{margin-left:10px}

.navtoggle{display:none;background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 11px;cursor:pointer}
.navtoggle span{display:block;width:17px;height:1.6px;background:var(--ink);margin:3.4px 0;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:980px){
  .navtoggle{display:block}
  .nav{position:absolute;left:12px;right:12px;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:3px;
    background:#0d0b14;border:1px solid var(--line);border-radius:var(--r);padding:14px;
    box-shadow:0 30px 70px -30px #000;}
  .nav[hidden]{display:none}
  .nav > a{padding:12px 14px}
  .nav-cta{margin:8px 0 0}
  .topbar{display:none}
}

/* ============================== hero ============================== */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.hero .container{position:relative;z-index:3}
.hero-inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;
  padding-top:clamp(56px,10vw,120px);padding-bottom:clamp(40px,6vw,72px);
}
.hero h1{max-width:17ch}
.hero .lede{max-width:60ch;margin-inline:auto}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;justify-content:center}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg) 92%)}

/* proof strip */
.proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;padding-top:6px}
.proof li{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);display:flex;align-items:baseline;gap:7px}
.proof li b{color:var(--ink);font-weight:500;font-size:13px}
.proof li::before{content:"";align-self:center;flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--brand-grad);margin-right:2px}

/* ============================== app mock ============================== */
.mock{
  position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%);
  box-shadow:0 50px 120px -50px rgba(188,37,119,.4),0 0 0 1px rgba(255,255,255,.02) inset;
}
.mock-bar{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block}
.mock-bar b{margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:400}
.mock-body{padding:0;display:grid;grid-template-columns:186px 1fr}
@media (max-width:720px){.mock-body{grid-template-columns:1fr}.mock-side{display:none}}
.mock-side{border-right:1px solid var(--line);padding:16px 14px;display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.2)}
.mock-side em{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-style:normal;margin:8px 0 3px}
.mock-side a{font-size:13.5px;color:var(--ink-2);padding:7px 10px;border-radius:8px}
.mock-side a.on{background:var(--brand-grad-soft);color:var(--ink);border:1px solid rgba(188,37,119,.28)}
.mock-main{padding:20px 22px;display:flex;flex-direction:column;gap:16px;min-height:270px}
.mock-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mock-kpi{min-width:0;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 11px;background:rgba(255,255,255,.015)}
.mock-kpi b{display:block;font-family:var(--display);font-size:clamp(15px,1.35vw,23px);font-weight:500;
  letter-spacing:-.032em;white-space:nowrap}
.mock-kpi span{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.spark{width:100%;height:58px;display:block}
.mock-lines{display:flex;flex-direction:column;gap:9px}
.mock-line{height:9px;border-radius:5px;background:linear-gradient(90deg,var(--line-2),transparent)}
.mock-line.w1{width:78%}.mock-line.w2{width:58%}.mock-line.w3{width:88%}.mock-line.w4{width:42%}

/* ============================== sections ============================== */
.section{position:relative;padding:clamp(64px,9vw,132px) 0}
.section.alt{background:linear-gradient(180deg,transparent,var(--bg-2) 18%,var(--bg-2) 82%,transparent)}
.section.tight{padding:clamp(44px,6vw,76px) 0}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}

.sec-head{display:flex;flex-direction:column;gap:17px;margin-bottom:clamp(34px,5vw,58px);max-width:72ch}
.sec-head.center{align-items:center;text-align:center;max-width:none;margin-inline:auto}
.sec-head.center .lede{margin-inline:auto}
.sec-head.row{max-width:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.sec-head.row > div{display:flex;flex-direction:column;gap:17px;max-width:66ch}

/* ============================== grids/cards ============================== */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(295px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}

.card{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
  padding:26px 24px;display:flex;flex-direction:column;gap:13px;overflow:hidden;isolation:isolate;
  transition:border-color .3s var(--ease),transform .4s var(--ease-out),background .3s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(188,37,119,.14),transparent 62%);
}
.card:hover{border-color:rgba(231,174,255,.3);transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card h3{font-size:20px}
.card p{color:var(--ink-2);font-size:15.2px}
.card .ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--brand-grad-soft);border:1px solid rgba(188,37,119,.24);color:var(--glow);
}
.card .ico svg{width:20px;height:20px}
.card .more{
  margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px;transition:color .25s var(--ease),gap .25s var(--ease);
}
/* Any inline icon must be bounded — an unsized SVG expands to fill its box. */
.more svg{width:14px;height:14px;flex:0 0 auto}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.card .ico svg{width:20px;height:20px;flex:0 0 auto}
a.card:hover .more{color:var(--glow);gap:13px}
.card .idx{position:absolute;top:20px;right:22px;font-family:var(--mono);font-size:11px;color:var(--line-2)}

/* checks — bullet + a single wrapped child. Raw text nodes inside a flex
   container each become their own flex item, which is what made the bold
   lead-ins wrap onto their own ragged column. Markup always wraps in <span>. */
.checks{display:flex;flex-direction:column;gap:13px}
.checks li{display:flex;gap:13px;color:var(--ink-2);font-size:15.6px;line-height:1.6}
.checks li > span{flex:1 1 auto;min-width:0}
.checks li strong{color:var(--ink);font-weight:500}
.checks li::before{
  content:"";flex:0 0 auto;width:6px;height:6px;margin-top:10px;border-radius:2px;
  background:var(--brand-grad);box-shadow:0 0 0 3px rgba(188,37,119,.12);
}

/* deflist — term/description pairs as a spec table rather than a bullet list */
.deflist{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.004));
}
.deflist > div{
  display:grid;grid-template-columns:minmax(0,196px) minmax(0,1fr);gap:8px 22px;
  padding:17px 22px;border-bottom:1px solid var(--line);align-items:baseline;
  transition:background .25s var(--ease);
}
.deflist > div:last-child{border-bottom:none}
.deflist > div:hover{background:rgba(231,174,255,.035)}
.deflist dt{
  font-family:var(--display);font-size:15.5px;font-weight:500;letter-spacing:-.015em;
  color:var(--ink);display:flex;align-items:baseline;gap:10px;
}
.deflist dt::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:2px;transform:translateY(-2px);
  background:var(--brand-grad);box-shadow:0 0 0 3px rgba(188,37,119,.12);
}
.deflist dd{margin:0;color:var(--ink-2);font-size:15.2px;line-height:1.6}
@media (max-width:640px){
  .deflist > div{grid-template-columns:1fr;gap:5px;padding:15px 18px}
  .deflist dd{padding-left:16px}
}

/* ============================== stats ============================== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.stat{
  position:relative;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006));
}
.stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--brand-grad)}
.stat b{
  display:block;font-family:var(--display);font-size:clamp(34px,4.4vw,50px);font-weight:300;
  letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;
}
.stat b em{font-style:normal;background:linear-gradient(104deg,#e7aeff,#bc2577);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Direct child only. A bare `.stat span` also matched the counter span inside
   <b>, shrinking the number to label size and pushing the suffix to its own
   line — which is exactly how "16 / +" happened. */
.stat > span{display:block;margin-top:9px;font-size:14px;color:var(--ink-2)}
.stat b span{font-size:inherit;display:inline;margin:0;color:inherit}

/* ============================== marquee ============================== */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:scroll-x 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--ink-3);white-space:nowrap;display:flex;align-items:center;gap:44px}
.marquee span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--violet-mid)}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ============================== steps ============================== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px;counter-reset:s}
.step{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent);display:flex;flex-direction:column;gap:11px}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  background:linear-gradient(104deg,#e7aeff,#bc2577);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.step p{color:var(--ink-2);font-size:14.8px}

/* ============================== split feature ============================== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:920px){.split{grid-template-columns:1fr}}
.split.rev > *:first-child{order:2}
@media (max-width:920px){.split.rev > *:first-child{order:0}}

/* ============================== quote ============================== */
.quote{
  position:relative;border:1px solid var(--line);border-radius:var(--r);padding:34px 36px;
  background:linear-gradient(135deg,rgba(114,37,109,.14),rgba(255,255,255,.01));
  display:flex;flex-direction:column;gap:20px;overflow:hidden;
}
.quote::before{content:"\201C";position:absolute;top:-24px;right:22px;font-family:var(--display);font-size:150px;color:rgba(231,174,255,.07);line-height:1}
.quote p{font-family:var(--display);font-size:clamp(19px,2.2vw,26px);font-weight:300;line-height:1.42;letter-spacing:-.025em;color:var(--ink)}
.quote footer{display:flex;align-items:center;gap:13px}
.quote .av{width:40px;height:40px;border-radius:50%;background:var(--brand-grad);display:grid;place-items:center;font-family:var(--display);font-weight:500;color:#fff;font-size:15px;flex:0 0 auto}
.quote cite{font-style:normal;font-weight:500;font-size:15px;color:var(--ink);display:block}
.quote small{color:var(--ink-3);font-size:13px}

/* testimonial carousel — slides share one grid cell so the container keeps
   the height of the tallest and nothing jumps when it advances */
.tcar{display:flex;flex-direction:column;gap:16px}
.tcar-stage{display:grid}
.tcar-stage .quote{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(8px);transition:opacity .55s var(--ease),transform .55s var(--ease-out),visibility .55s}
.tcar-stage .quote.on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.tdots{display:flex;gap:8px;justify-content:center;align-items:center}
.tdots button{
  width:8px;height:8px;padding:0;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--line-2);transition:width .3s var(--ease),background .3s var(--ease);
}
.tdots button:hover{background:var(--ink-3)}
.tdots button[aria-selected="true"]{width:26px;background:var(--brand-grad)}
@media (prefers-reduced-motion: reduce){
  .tcar-stage .quote{transition:none;transform:none}
}

/* ============================== table ============================== */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.012)}
table{border-collapse:collapse;width:100%;min-width:620px}
thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;font-weight:400;padding:15px 18px;border-bottom:1px solid var(--line)}
tbody td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .2s var(--ease)}
tbody tr:hover{background:rgba(231,174,255,.03)}
tbody td strong{color:var(--ink);font-weight:500}

/* ============================== FAQ ============================== */
.faq{display:flex;flex-direction:column;gap:10px}
details.qa{border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.014);overflow:hidden;transition:border-color .25s var(--ease)}
details.qa[open]{border-color:rgba(231,174,255,.26)}
details.qa summary{
  cursor:pointer;list-style:none;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--display);font-size:17px;font-weight:450;letter-spacing:-.02em;color:var(--ink);
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
details.qa[open] summary::after{transform:rotate(-135deg) translateY(-3px);border-color:var(--glow)}
details.qa .qa-body{padding:0 22px 20px;color:var(--ink-2);font-size:15.4px;max-width:78ch}

/* ============================== CTA ============================== */
.cta{
  position:relative;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);overflow:hidden;
  padding:clamp(34px,5.5vw,64px);display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(73,37,104,.34) 0%,rgba(188,37,119,.2) 100%),var(--panel);
}
.cta::after{content:"";position:absolute;width:42%;aspect-ratio:1;right:-8%;top:-40%;border-radius:50%;
  background:radial-gradient(circle,rgba(231,174,255,.2),transparent 68%);filter:blur(42px);pointer-events:none}
.cta > div{display:flex;flex-direction:column;gap:13px;max-width:56ch;position:relative;z-index:1}
.cta h2{font-size:clamp(26px,3.4vw,42px)}
.cta .row{position:relative;z-index:1}

/* ============================== forms ============================== */
.form{display:grid;gap:17px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea,.field select{
  font-family:var(--body);font-size:15.5px;color:var(--ink);background:rgba(255,255,255,.022);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px 15px;width:100%;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(231,174,255,.55);background:rgba(231,174,255,.04);outline:none}

/* Native select popups are drawn by the OS, not by the page. Without an
   opaque background the option list falls back to white — and our near-white
   text then disappears on it. Set both explicitly. */
.field select{
  background-color:#12101b;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23aaa2bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.field select:focus{background-color:#171324}
.field select option,
.field select optgroup{background-color:#12101b;color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field ::placeholder{color:var(--ink-3)}
.formnote{font-size:13.5px;color:var(--ink-3)}

/* ============================== article ============================== */
.prose{max-width:74ch;display:flex;flex-direction:column;gap:20px}
.prose h2{font-size:clamp(24px,2.9vw,34px);margin-top:22px}
.prose h3{font-size:20px;margin-top:10px}
.prose p,.prose li{color:var(--ink-2);font-size:16.8px;line-height:1.74}
.prose strong{color:var(--ink);font-weight:500}
.prose ul{display:flex;flex-direction:column;gap:11px;padding-left:22px;list-style:disc}
.prose li::marker{color:var(--violet-mid)}
.prose blockquote{margin:6px 0;padding:18px 24px;border-left:2px solid var(--magenta);background:rgba(188,37,119,.07);border-radius:0 var(--r-sm) var(--r-sm) 0}
.prose blockquote p{color:var(--ink);font-size:17.5px}
.prose .keyfact{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;background:linear-gradient(135deg,rgba(114,37,109,.15),transparent)}
.prose .keyfact b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--glow);margin-bottom:7px}
.artmeta{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.05em}

/* article cards */
a.post{text-decoration:none}
a.post h3{transition:color .25s var(--ease)}
a.post:hover h3{color:var(--glow)}

/* ============================== page head ============================== */
/* The inner page head carries its own treatment rather than the hero's canvas:
   two strand curves in the brand gradient, a spotlight behind the heading and a
   fade into the body. Heavier than it was, deliberately - these pages open on
   this and nothing else. */
.pagehead{position:relative;overflow:hidden;isolation:isolate;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 90% 120% at 12% -10%, rgba(114,37,109,.30), transparent 62%),
    radial-gradient(ellipse 70% 100% at 92% 8%, rgba(188,37,119,.20), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.pagehead .container{position:relative;z-index:4;
  padding-top:clamp(56px,8.4vw,112px);padding-bottom:clamp(50px,6.6vw,88px);
  display:flex;flex-direction:column;gap:17px}

/* The mark itself, blown up and faded into the right of the head. Masked on its
   left edge so it never competes with the heading or the lede, and cropped by
   the section's overflow so it reads as a decal rather than a placed image.
   Same file the header uses, so it is already cached. */
.ph-decal{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  right:-3%;top:50%;transform:translateY(-50%) rotate(-7deg);
  /* sized against the head itself, so it crops the same way on a short head
     (Contact) and a tall one (a service page with a three-line lede) */
  height:124%;width:auto;max-width:none;
  opacity:.23;filter:saturate(1.15);
  mask-image:linear-gradient(103deg,transparent 2%,#000 34%);
  -webkit-mask-image:linear-gradient(103deg,transparent 2%,#000 34%);
}
@media (max-width:900px){
  .ph-decal{opacity:.1;height:104%;right:-16%}
}

/* the strands */
.ph-strands{position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;opacity:.95}
.ph-strands path{fill:none;stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(188,37,119,.5))}
.ph-s1{stroke:url(#phA);stroke-width:1.7;stroke-dasharray:520 1300;animation:phflow 19s linear infinite}
.ph-s2{stroke:url(#phB);stroke-width:1.5;stroke-dasharray:460 1340;animation:phflow2 26s linear infinite}
.ph-s3{stroke:url(#phC);stroke-width:1;stroke-dasharray:240 1560;animation:phflow 34s linear infinite}
@keyframes phflow{from{stroke-dashoffset:1820}to{stroke-dashoffset:0}}
@keyframes phflow2{from{stroke-dashoffset:0}to{stroke-dashoffset:1800}}

/* spotlight sitting behind the heading, and the fade out of the section */
.ph-spot{position:absolute;z-index:2;pointer-events:none;
  left:-6%;top:12%;width:62%;height:96%;
  background:radial-gradient(ellipse at 30% 50%, rgba(231,174,255,.13), transparent 66%);
  filter:blur(26px)}
.ph-fade{position:absolute;z-index:3;pointer-events:none;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,transparent,var(--bg) 94%)}

/* the head sits directly under the sticky header, so lift the type a little */
.pagehead h1{font-size:clamp(44px,7.8vw,92px)}
.pagehead .lede{max-width:64ch}

@media (max-width:620px){
  .ph-strands{opacity:.6}
  .ph-spot{width:100%;left:-20%}
}

/* The strands read as decoration, so they stop with everything else. */
@media (prefers-reduced-motion:reduce){
  .ph-s1,.ph-s2,.ph-s3{animation:none}
}

.crumbs{display:flex;flex-wrap:wrap;gap:9px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--glow)}

/* ============================== footer ============================== */
.site-footer{position:relative;border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(52px,7vw,84px) 0 28px;overflow:hidden}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--magenta),transparent);opacity:.5}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:38px 28px}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}}
.foot-brand{display:flex;flex-direction:column;gap:16px;max-width:40ch}
.foot-brand p{color:var(--ink-2);font-size:14.8px}
.foot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:15px}
.foot-col li{margin-bottom:10px}
.foot-col a{font-size:14.8px;color:var(--ink-2)}
.foot-col a:hover{color:var(--glow)}
.foot-addr{font-size:14.6px;color:var(--ink-2);line-height:1.68}
.foot-addr strong{display:block;color:var(--ink);font-weight:500;font-size:14.6px;margin-bottom:2px}
.soon{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  background:var(--brand-grad);color:#fff;border-radius:var(--r-pill);padding:2px 8px;margin-left:7px;white-space:nowrap}

/* topbar "soon" marker */
.tb-soon{font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--glow);opacity:.75;margin-left:4px}

/* ---------------------------- office list (contact) ----------------------
   The badge previously sat inside an <h3> and rode the text baseline, which
   left it visually low against a 20px heading. The row is now a flex line with
   the badge centred on the name and its own smaller optical baseline. */
.locs{display:flex;flex-direction:column;gap:20px;margin-top:4px}
.locs li{padding-left:15px;border-left:2px solid var(--line-2)}
.locs li:first-child{border-left-color:var(--magenta)}
.loc-role{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}
.loc-name{display:flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.02em;
  line-height:1.2;color:var(--ink)}
.loc-name .badge{flex:none;position:relative;top:.5px;
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  line-height:1;padding:4px 8px 3px;border-radius:var(--r-pill);
  background:var(--brand-grad);color:#fff;white-space:nowrap}
.loc-line{font-size:14.5px;color:var(--ink-2);margin-top:3px}
.loc-map{font-size:13.5px;display:inline-block;margin-top:6px}
.hours-big{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.foot-bottom{margin-top:clamp(34px,4.5vw,54px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-bottom p,.foot-bottom a{font-size:13.2px;color:var(--ink-3)}
.foot-bottom a:hover{color:var(--glow)}

/* The approach heading is a short proposition. Capped so that a longer one
   cannot run away into hero-sized type in a half-width column. */
.claim{font-size:clamp(25px,2.9vw,38px);font-weight:300;letter-spacing:-.038em;max-width:20ch}

/* =========================== solutions pages ===========================
   The practice pages used to be seven identical three-column card grids.
   These are the components that replaced them: a spec strip, an editorial
   register, an indexed capability list, and a named-work band.
   ====================================================================== */

/* --- spec band: three sourced facts, rules between, no card chrome ------ */
.specband{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.specband > div{padding:24px 30px;border-left:1px solid var(--line)}
.specband > div:first-child{border-left:0;padding-left:0}
.specband dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;
}
.specband dd{
  margin:0;font-family:var(--display);font-size:clamp(17px,1.7vw,21px);font-weight:600;
  letter-spacing:-.022em;line-height:1.25;color:var(--ink);
}
@media (max-width:760px){
  .specband{grid-template-columns:1fr}
  .specband > div{border-left:0;border-top:1px solid var(--line);padding:19px 0}
  .specband > div:first-child{border-top:0;padding-top:4px}
}

/* The spec band reads as part of the page head, so the section that follows
   it does not need a full section gap on top. */
.specwrap + .section{padding-top:clamp(34px,4.4vw,62px)}

/* --- lead practice feature -------------------------------------------- */
.feature{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(30px,4.6vw,62px);align-items:center;
}
@media (max-width:980px){.feature{grid-template-columns:1fr}}
.feature-body{display:flex;flex-direction:column;gap:19px}
.feature-body h2{font-size:clamp(30px,3.9vw,50px);font-weight:300;letter-spacing:-.04em}
.lead-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--magenta);
  -webkit-text-fill-color:currentColor;background:none;
}
.feature-work{display:flex;flex-direction:column;gap:0;margin-top:5px}
.feature-work > div{
  padding:17px 0 17px 17px;border-top:1px solid var(--line);
  border-left:2px solid transparent;transition:border-left-color .3s var(--ease),padding-left .3s var(--ease);
}
.feature-work > div:last-child{border-bottom:1px solid var(--line)}
.feature-work > div:hover{border-left-color:var(--magenta);padding-left:21px}
.fw-place{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);
}
.fw-client{
  font-family:var(--display);font-size:18.5px;font-weight:600;letter-spacing:-.024em;
  color:var(--ink);margin-top:5px;line-height:1.2;
}
.fw-text{font-size:14.6px;color:var(--ink-2);line-height:1.58;margin-top:5px;max-width:52ch}
.feature-art{min-width:0}

/* --- practice register ------------------------------------------------- */
.plist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.prow{
  position:relative;display:grid;align-items:start;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  gap:clamp(16px,2.4vw,30px);
  padding:clamp(22px,2.8vw,32px) clamp(10px,1.6vw,22px);
  border-bottom:1px solid var(--line);color:var(--ink);
  transition:background .35s var(--ease),padding-left .35s var(--ease);
}
.prow::after{
  content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
  background:var(--brand-grad);transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .4s var(--ease-out);
}
.prow:hover{background:rgba(255,255,255,.022);padding-left:clamp(18px,2.2vw,32px);color:var(--ink)}
.prow:hover::after{transform:scaleY(1)}
.prow-n{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);
  padding-top:7px;transition:color .3s var(--ease);
}
.prow:hover .prow-n{color:var(--magenta)}
.prow-ico{
  flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  border:1px solid var(--line-2);background:var(--brand-grad-soft);color:var(--glow);
  transition:border-color .3s var(--ease);
}
.prow-ico svg{width:19px;height:19px}
.prow:hover .prow-ico{border-color:var(--magenta)}
@media (max-width:620px){.prow-ico{display:none}}
/* With the icon and arrow dropped the four-column track would leave the body
   on an `auto` column and squash it, so the grid is redeclared for two. */
@media (max-width:620px){.prow{grid-template-columns:auto minmax(0,1fr)}}
.prow-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.prow-h{
  font-family:var(--display);font-size:clamp(20px,2.3vw,27px);font-weight:600;
  letter-spacing:-.032em;line-height:1.16;
}
.prow-p{color:var(--ink-2);font-size:15.4px;line-height:1.58;max-width:62ch}
.prow-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px}
.prow-tags i{
  font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
  padding:4px 9px;border-radius:var(--r-pill);border:1px solid var(--line);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.prow:hover .prow-tags i{color:var(--ink-2);border-color:var(--line-2)}
.prow-go{
  align-self:center;color:var(--ink-3);
  transition:transform .35s var(--ease-out),color .3s var(--ease);
}
.prow-go svg{width:20px;height:20px}
.prow:hover .prow-go{transform:translateX(6px);color:var(--glow)}
@media (max-width:620px){.prow-go{display:none}}

/* --- indexed capability list ------------------------------------------- */
.caplist{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(30px,4.4vw,64px);margin:0;padding:0;list-style:none;counter-reset:cap;
}
@media (max-width:860px){.caplist{grid-template-columns:1fr}}
.caplist li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  padding:clamp(22px,2.6vw,30px) 0;border-top:1px solid var(--line);
}
.caplist li:nth-child(-n+2){border-top:0}
@media (max-width:860px){.caplist li:nth-child(2){border-top:1px solid var(--line)}}
.cap-n{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--magenta);
  padding-top:6px;
}
.caplist h3{font-size:19.5px;font-weight:600;letter-spacing:-.026em;line-height:1.25;color:var(--ink)}
.caplist p{margin-top:9px;color:var(--ink-2);font-size:15.3px;line-height:1.62}

/* --- named work -------------------------------------------------------- */
.workgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:900px){.workgrid{grid-template-columns:1fr}}
.wcard{
  position:relative;padding:28px 26px;border-radius:var(--r);
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
  display:flex;flex-direction:column;gap:9px;overflow:hidden;
  transition:border-color .3s var(--ease),transform .4s var(--ease-out);
}
.wcard::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--brand-grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out);
}
.wcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.wcard:hover::before{transform:scaleX(1)}
.w-place{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);
}
.w-client{
  font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.03em;
  line-height:1.16;color:var(--ink);
}
.w-text{color:var(--ink-2);font-size:15px;line-height:1.6}

/* --- handover band ----------------------------------------------------- */
.deliver{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(28px,4.4vw,60px);align-items:start;
  padding:clamp(30px,4vw,48px);border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(73,37,104,.16),rgba(188,37,119,.07) 62%,transparent);
}
@media (max-width:860px){.deliver{grid-template-columns:1fr}}
.deliver-head{display:flex;flex-direction:column;gap:15px}
.deliver-head h2{font-size:clamp(26px,3.1vw,38px);font-weight:300;letter-spacing:-.038em}
.deliver-head .ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--glow);margin-bottom:3px;
}
.deliver-head .ico svg{width:21px;height:21px}
.deliver-list{padding-top:5px}

/* --- stack note -------------------------------------------------------- */
.stacknote{
  font-size:14.4px;line-height:1.6;color:var(--ink-3);
  border-left:2px solid var(--line-2);padding-left:15px;max-width:62ch;
}

/* ============================== reveal ============================== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}
.rv.d4{transition-delay:.28s}.rv.d5{transition-delay:.35s}.rv.d6{transition-delay:.42s}

/* page-load choreography */
.lo{opacity:0;transform:translateY(26px);animation:loIn .95s var(--ease-out) forwards}
.lo.l1{animation-delay:.05s}.lo.l2{animation-delay:.15s}.lo.l3{animation-delay:.25s}
.lo.l4{animation-delay:.35s}.lo.l5{animation-delay:.45s}.lo.l6{animation-delay:.58s}
@keyframes loIn{to{opacity:1;transform:none}}

.row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:12px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.center{text-align:center}

/* ============================== reduced motion ============================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .lo{opacity:1;transform:none;animation:none}
  .orb{animation:none}
  .marquee-track{animation:none}
}