/* Shared base, carried over from the Foundation + Plan landing page so the
   two sites stay one system. Edit tokens here; page components live in
   components.css. */

/* ===== tokens, base, bands, bar, buttons, dock, hero ===== */
/* Layout: single editorial column on a warm bone ground; sticky CTA rail top and
   (on phones) bottom; one full-bleed diagram band that scrolls sideways if narrow. */
:root{
  --bg:#F7F7F2;
  --surface:#FFFFFF;
  --surface-2:#E9EDD6;
  --fg:#191C14;
  --muted:#5E6554;
  --accent:#5A642B;
  --accent-ink:#474F22;
  --line:#DCDFD1;
  --shadow:0 1px 2px rgba(25,28,20,.06), 0 8px 24px rgba(25,28,20,.05);

  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --ui:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  --maxw:1080px;
  --read:62ch;

  --leaf-1:#8FB469;
  --leaf-2:#5B7B3A;
  --leaf-3:#CBDDAA;
  --leaf-glow:#FFFFFF;
  --leaf-op:.52;
  --btn-ink:#FFFFFF;
  --panel-bg:#1C2016;
  --panel-fg:#F0F2E9;
  --panel-accent:#A9B95B;
  --panel-muted:#B9C2A8;
  --warn:#D7A363;
  --dot:rgba(25,28,20,.055);
  --grain:.055;
  --bar-bg:rgba(252,252,249,.93);
  --bar-ink:#191C14;
  --bar-muted:#5E6554;
  --bar-accent:#5A642B;
  --bar-line:rgba(25,28,20,.12);
  --warn-ink:#8A5A1E;
  --warn-bg:rgba(215,163,99,.10);
  --warn-line:rgba(215,163,99,.42);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#13150F;
    --surface:#1B1E16;
    --surface-2:#232719;
    --fg:#F1F2EA;
    --muted:#A3AA94;
    --accent:#B8C578;
    --accent-ink:#C7D194;
    --line:#2D3225;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
    --leaf-1:#55763A;
    --leaf-2:#2F4524;
    --leaf-3:#789A52;
    --leaf-glow:#243018;
    --leaf-op:.46;
    --btn-ink:#13150F;
    --panel-bg:#262B1C;
    --panel-fg:#F0F2E9;
    --panel-accent:#A9B95B;
    --panel-muted:#B9C2A8;
    --warn:#D7A363;
    --dot:rgba(240,242,233,.05);
    --grain:.04;
    --warn-ink:#D7A363;
    --warn-bg:rgba(215,163,99,.09);
    --warn-line:rgba(215,163,99,.30);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#13150F;
  --surface:#1B1E16;
  --surface-2:#232719;
  --fg:#F1F2EA;
  --muted:#A3AA94;
  --accent:#B8C578;
  --accent-ink:#C7D194;
  --line:#2D3225;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
  --leaf-1:#55763A;
  --leaf-2:#2F4524;
  --leaf-3:#789A52;
  --leaf-glow:#243018;
  --leaf-op:.46;
  --btn-ink:#13150F;
  --panel-bg:#262B1C;
  --panel-fg:#F0F2E9;
  --panel-accent:#A9B95B;
  --panel-muted:#B9C2A8;
  --warn:#D7A363;
  --dot:rgba(240,242,233,.05);
  --grain:.04;
  --warn-ink:#D7A363;
  --warn-bg:rgba(215,163,99,.09);
  --warn-line:rgba(215,163,99,.30);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.02em;line-height:1.05}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}

/* ---------- section bands & texture ---------- */
.band-soft{
  overflow-x:clip;
  background:var(--surface-2);
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:24px 24px;
  border-block:1px solid var(--line);
}
.band-ink{position:relative;background:var(--panel-bg);color:var(--panel-fg);overflow-x:clip}
.band-ink::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band-ink > *{position:relative;z-index:1}
.band-ink .kicker{color:var(--panel-accent)}
.band-ink h2,.band-ink h3,.band-ink h4{color:var(--panel-fg)}
.band-ink .sub{color:var(--panel-muted)}
.band-ink .btn{background:var(--panel-accent);color:#13150F;border-color:transparent}

/* ---------- sticky CTA rail ---------- */
.bar{
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:50;
  background:var(--bar-bg);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--bar-line);
}
.bar .mark span{color:var(--bar-muted)}
.bar .mark span em{color:var(--bar-accent)}
.bar .btn{background:var(--bar-accent);color:#fff}
.bar-in{
  max-width:var(--maxw);margin-inline:auto;padding:12px 20px;
  display:flex;align-items:center;gap:16px;justify-content:space-between;
}
.mark{display:flex;align-items:center;gap:11px;min-width:0}
.logo{height:26px;width:auto;display:block;flex:none}
footer .logo{filter:none}
:root[data-theme="dark"] footer .logo{filter:brightness(1.75) saturate(1.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer .logo{filter:brightness(1.75) saturate(1.05)}}
.mark span{font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mark span em{font-style:normal;color:var(--accent);font-weight:700;padding:0 2px}
@media (max-width:900px){.mark span{display:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ui);font-weight:600;font-size:15px;letter-spacing:-.01em;
  background:var(--accent);color:var(--btn-ink);
  border:1px solid transparent;border-radius:999px;
  padding:11px 20px;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--surface);color:var(--accent-ink);border:1.5px solid var(--accent)}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.sm{padding:8px 15px;font-size:14px}
.bar-right{display:flex;align-items:center;gap:10px}
.theme-tog{
  width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--bar-line);
  background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--bar-muted);
  transition:color .2s ease,border-color .2s ease;
}
.theme-tog:hover{color:var(--bar-accent);border-color:var(--bar-accent)}
.theme-tog svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* bottom bar, phones only */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
}
.dock .btn{width:100%}
@media (max-width:700px){
  .dock{display:block}
  body{padding-bottom:84px}
  .bar .btn{display:none}
}

/* ---------- hero backdrop: out-of-focus foliage ---------- */
.hero-shell{position:relative;z-index:0;overflow:hidden;contain:paint}
.foliage{
  position:absolute;z-index:0;pointer-events:none;
  top:0;right:0;
  width:min(38%,540px);height:94%;
  opacity:var(--leaf-op);
  filter:blur(38px) saturate(1.05);
  background:
    radial-gradient(38% 34% at 76% 10%, var(--leaf-glow) 0%, transparent 68%),
    radial-gradient(30% 27% at 59% 25%, var(--leaf-3) 0%, transparent 71%),
    radial-gradient(27% 31% at 90% 36%, var(--leaf-1) 0%, transparent 69%),
    radial-gradient(35% 28% at 68% 55%, var(--leaf-2) 0%, transparent 73%),
    radial-gradient(23% 22% at 97% 70%, var(--leaf-1) 0%, transparent 70%),
    radial-gradient(28% 25% at 55% 80%, var(--leaf-3) 0%, transparent 75%),
    radial-gradient(24% 20% at 83% 90%, var(--leaf-2) 0%, transparent 72%),
    radial-gradient(72% 72% at 86% 44%, var(--leaf-2) 0%, transparent 78%);
}
/* bokeh specks, lightly blurred so the plane reads as depth of field */
.foliage::after{
  content:"";position:absolute;inset:0;
  filter:blur(10px);opacity:.5;
  background:
    radial-gradient(5% 4% at 72% 20%, var(--leaf-glow) 0%, transparent 60%),
    radial-gradient(4% 3% at 88% 31%, var(--leaf-glow) 0%, transparent 60%),
    radial-gradient(6% 5% at 64% 47%, var(--leaf-3) 0%, transparent 62%),
    radial-gradient(3% 3% at 93% 55%, var(--leaf-glow) 0%, transparent 60%),
    radial-gradient(5% 4% at 78% 74%, var(--leaf-3) 0%, transparent 62%);
}
@media (max-width:760px){
  .foliage{top:0;right:0;width:86%;height:72%;opacity:calc(var(--leaf-op) * .64);filter:blur(30px)}
}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;padding-block:clamp(44px,7vw,86px) clamp(28px,4vw,44px)}
.eyebrow{
  font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:20px;
}
h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;max-width:19ch}
h1 .alt{color:var(--accent)}
.lede{font-size:clamp(1.08rem,2.2vw,1.3rem);color:var(--muted);max-width:60ch;margin-top:22px}
.promise{
  font-family:var(--ui);font-weight:600;font-size:clamp(1rem,2vw,1.12rem);
  color:var(--fg);margin-top:14px;letter-spacing:-.01em;
}
.promise b{color:var(--accent);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;align-items:center}
.hero-note{font-family:var(--ui);font-size:13px;color:var(--muted)}


/* ===== proof stats + marquee ===== */
/* ---------- proof ---------- */
.proof{padding-block:clamp(46px,6.5vw,80px)}
/* each piece appears at its own point in the scroll, not on a timer */
.proof.rv .rv-i{opacity:0;transform:translateY(18px)}
.proof.rv .rv-i.on{
  opacity:1;transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.proof-head h2{font-size:clamp(1.9rem,4.2vw,2.6rem);font-weight:800;max-width:21ch}
.proof-head .sub{color:var(--muted);margin-top:16px;max-width:64ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
@media (max-width:860px){.stats{grid-template-columns:1fr}}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;display:flex;flex-direction:column;gap:11px;
}
.stat-k{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stat b{
  font-family:var(--display);font-weight:800;font-size:clamp(2.5rem,5.6vw,3.3rem);
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.stat b em{font-style:normal;color:var(--accent)}
.stat .rule{height:2px;width:38px;background:var(--accent);border-radius:2px;opacity:.45}
.stat p{color:var(--muted);font-size:15.5px;line-height:1.55}
/* ---------- testimonials marquee ---------- */
.tm-wrap{margin-top:clamp(40px,5.5vw,60px)}
.tm-wrap[hidden]{display:none}
.tm-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.tm-head .kicker{margin-bottom:0}
.tm{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:18px;
  overflow:hidden;padding-block:6px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.tm-track{
  display:flex;gap:18px;width:max-content;padding-inline:9px;
  animation:tmScroll var(--tm-dur,90s) linear infinite;
}
.tm:hover .tm-track,.tm.hold .tm-track,.tm.off .tm-track{animation-play-state:paused}
@keyframes tmScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tm-card{
  flex:none;width:clamp(290px,30vw,390px);margin:0;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:24px 24px 20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:18px;
}
.tm-card blockquote{
  margin:0;font-family:var(--body);font-size:16.5px;line-height:1.55;color:var(--fg);flex:1;
}
.tm-card blockquote::before{
  content:"\201C";display:block;font-family:var(--display);font-weight:800;font-size:40px;
  line-height:.7;height:18px;color:var(--accent);opacity:.55;margin-bottom:6px;
}
.tm-who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.tm-av{
  width:42px;height:42px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--surface-2);display:grid;place-items:center;color:var(--accent);
}
.tm-av img{width:100%;height:100%;object-fit:cover;display:block}
.tm-av svg{width:24px;height:24px;opacity:.7}
.tm-id{display:flex;flex-direction:column;gap:2px;min-width:0;font-family:var(--ui)}
.tm-id b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.tm-id span{font-size:12.5px;color:var(--muted);line-height:1.35}
@media (max-width:640px){
  .tm-card{width:min(82vw,330px);padding:20px 20px 18px}
  .tm-card blockquote{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .tm{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}
  .tm-track{animation:none;padding-inline:max(20px,calc(50vw - 560px))}
  .tm-card{scroll-snap-align:start}
  .tm-card[data-clone]{display:none}
}

/* ===== sections ===== */
/* ---------- sections ---------- */
section{scroll-margin-top:84px}
.sec{padding-block:clamp(40px,6vw,68px)}
.kicker{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.sec h2{font-size:clamp(1.9rem,4.4vw,2.7rem);font-weight:800;max-width:20ch}
.sec .sub{color:var(--muted);margin-top:14px;max-width:var(--read)}

/* ===== scroll-pinned stepper (shared with the landing page) ===== */
/* deliverables */
.deliver{position:relative}
.d-track{position:relative;height:632vh}
.d-stick{
  position:sticky;top:0;height:100vh;box-sizing:border-box;padding-top:68px;
  display:flex;align-items:center;overflow:hidden;
}
.d-grid{
  width:100%;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.35fr);
  gap:clamp(30px,4.6vw,62px);align-items:center;
}
.d-left h2{font-size:clamp(1.8rem,3.9vw,2.6rem);font-weight:800;max-width:15ch}
.d-left .sub{margin-top:14px;max-width:44ch;font-size:16px}
.d-meta{display:flex;align-items:center;gap:13px;margin-top:22px}
.d-meta b{font-family:var(--display);font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:var(--panel-fg)}
.d-meta span{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--panel-muted);line-height:1.35}
.d-left .btn{margin-top:18px}
.d-tally{
  margin-top:20px;padding-top:17px;border-top:1px solid rgba(240,242,233,.16);
  font-family:var(--ui);font-size:14px;line-height:1.5;color:var(--panel-muted);max-width:40ch;
}
.d-tally b{color:var(--panel-accent);font-weight:700}

/* progress readout */
.d-prog{display:flex;align-items:center;gap:12px;margin-top:20px}
.d-prog-n{
  font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.08em;
  color:var(--panel-accent);font-variant-numeric:tabular-nums;flex:none;
}
.d-prog-rail{flex:1;height:3px;border-radius:999px;background:rgba(240,242,233,.14);overflow:hidden}
.d-prog-rail i{
  display:block;height:100%;width:0;border-radius:999px;background:var(--panel-accent);
  transition:width .45s cubic-bezier(.3,.8,.3,1);
}

/* step stack */
.d-steps{display:flex;flex-direction:column;gap:2px;min-width:0}
.d-step{
  position:relative;border-top:1px solid rgba(240,242,233,.11);
  transition:border-color .3s ease;
}
.d-step:last-child{border-bottom:1px solid rgba(240,242,233,.11)}
.d-step.on{border-color:rgba(169,185,91,.4)}

.d-shead{
  display:flex;align-items:center;gap:14px;width:100%;
  background:none;border:0;padding:13px 2px;cursor:pointer;text-align:left;
  font-family:var(--ui);color:inherit;
}
.d-shead:focus-visible{outline:2px solid var(--panel-accent);outline-offset:3px;border-radius:6px}
.d-sn{
  flex:none;font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.05em;
  color:var(--panel-accent);opacity:.5;font-variant-numeric:tabular-nums;
  transition:opacity .3s ease;
}
.d-step.on .d-sn,.d-step.done .d-sn{opacity:1}
.d-st{
  font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.25;
  color:var(--panel-muted);transition:color .3s ease;min-width:0;
}
.d-step.on .d-st{color:var(--panel-fg)}
.d-step.done .d-st{color:var(--panel-fg);opacity:.72}
.d-shead:hover .d-st{color:var(--panel-fg)}
.d-sgrp{
  margin-left:auto;flex:none;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--panel-muted);opacity:.55;
  transition:opacity .3s ease,color .3s ease;
}
.d-step.on .d-sgrp{color:var(--panel-accent);opacity:1}

/* expanding body */
.d-sbody{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .52s cubic-bezier(.22,.75,.28,1);
}
.d-step.on .d-sbody{grid-template-rows:1fr}
.d-sinner{overflow:hidden;min-height:0}
.d-spad{padding:2px 0 20px}
.d-sq{
  font-family:var(--body);font-size:15.5px;line-height:1.5;color:var(--panel-muted);
  max-width:52ch;margin-bottom:14px;
}
.d-sw{
  display:flex;gap:9px;align-items:baseline;margin-top:12px;
  font-family:var(--ui);font-size:13.5px;line-height:1.45;color:var(--panel-muted);
}
.d-sw i{
  flex:none;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--warn);padding-top:.25em;
}

/* the visual */
.d-viz{
  height:var(--viz-h);border-radius:14px;
  --viz-h:clamp(120px,20vh,205px);
  background:rgba(240,242,233,.035);border:1px solid rgba(240,242,233,.09);
  overflow:hidden;
}
.d-viz svg{display:block;width:100%;height:100%}
/* short viewports: shed the least load-bearing pieces, in order (eight rows now) */
@media (max-height:940px){.d-sq{font-size:15px;margin-bottom:10px}.d-shead{padding:11px 2px}.d-spad{padding-bottom:16px}}
@media (max-height:860px){.d-sw{display:none}}
@media (max-height:790px){
  .d-shead{padding:8px 2px}.d-spad{padding-bottom:12px}
  .d-viz{--viz-h:clamp(104px,17vh,205px)}
  .d-step.is-plan .d-viz{--viz-h:clamp(114px,19vh,232px)}
}

/* ---- shared viz animation primitives ---- */
.d-viz .vz-f{opacity:0;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.75,.3,1)}
.d-viz .vz-up{transform:translateY(14px)}
.d-viz .vz-sc{transform:scale(.72);transform-box:fill-box;transform-origin:center}
.d-step.on .d-viz .vz-f{opacity:1;transform:none}
.d-viz .vz-out{opacity:.5;transition:opacity .6s ease .35s}
.d-step.on .d-viz .vz-out{opacity:0}
.d-viz .vz-draw{stroke-dasharray:620;stroke-dashoffset:620;transition:stroke-dashoffset .85s cubic-bezier(.3,.7,.3,1)}
.d-step.on .d-viz .vz-draw{stroke-dashoffset:0}
.d-viz .vz-grow{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;transition:transform .6s cubic-bezier(.25,.8,.3,1)}
.d-step.on .d-viz .vz-grow{transform:none}
.d-viz .vz-wipe{transform:scaleX(0);transform-box:fill-box;transform-origin:left;transition:transform .7s cubic-bezier(.25,.8,.3,1)}
.d-step.on .d-viz .vz-wipe{transform:none}
.d-viz text{font-family:var(--ui);fill:var(--panel-muted)}
.d-viz .vz-lbl{font-size:11px;font-weight:600;letter-spacing:.02em}
.d-viz .vz-cap{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:var(--panel-accent)}
.d-viz .vz-hi{fill:var(--panel-fg);font-weight:700}
.d-viz .vz-stroke{stroke:rgba(240,242,233,.26);fill:none}
.d-viz .vz-acc{stroke:var(--panel-accent);fill:none}
.d-viz .vz-fill{fill:rgba(240,242,233,.13)}
.d-viz .vz-accfill{fill:var(--panel-accent)}

@media (prefers-reduced-motion:reduce){
  .d-sbody{transition:none}
  .d-viz .vz-f,.d-viz .vz-out,.d-viz .vz-draw,.d-viz .vz-grow,.d-viz .vz-wipe,
  .d-outcome span,.d-prog-rail i{transition:none}
  .d-viz .vz-f{opacity:1;transform:none}
  .d-viz .vz-out{opacity:0}
  .d-viz .vz-draw{stroke-dashoffset:0}
  .d-viz .vz-grow,.d-viz .vz-wipe{transform:none}
  .d-outcome span{opacity:1;transform:none}
}

/* ---- stacked / no-pin layout ---- */
@media (max-width:980px){
  .d-track{height:auto}
  .d-stick{position:static;height:auto;display:block;overflow:visible}
  .d-grid{grid-template-columns:1fr;gap:30px;align-items:start}
  .deliver{padding-block:clamp(52px,7vw,88px)}
  .d-viz{--viz-h:190px}
  .d-step.is-plan .d-viz{--viz-h:210px}
  .d-sq{font-size:15.5px;margin-bottom:14px}
  .d-shead{padding:13px 2px}
  .d-sw{display:flex}
}
@media (max-width:620px){
  .d-shead{gap:11px}
  .d-st{font-size:15.5px}
  .d-sgrp{display:none}
  .d-viz{--viz-h:150px}
  .d-step.is-plan .d-viz{--viz-h:172px}
  .d-step.is-plan .d-st{font-size:17px}
}


/* ===== section rail ===== */
/* section rail */
.rail{
  position:fixed;top:50%;transform:translateY(-50%);
  right:calc((100vw - 1080px)/2 - 46px);   /* JS refines this to account for the scrollbar */
  z-index:45;display:none;padding:6px 8px;
}
@media (min-width:1200px){.rail{display:block}}
.rail ol{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
/* spans the dots and the words, so moving between them never drops the hover.
   Inert until the rail is hovered, so it never swallows clicks on the page. */
.rail-hit{position:absolute;top:-12px;bottom:-12px;left:0;width:100%;pointer-events:none}
.rail:hover .rail-hit,.rail.open .rail-hit{pointer-events:auto}
.rail li{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.rail a{position:relative;display:block;padding:6px 7px;margin-right:-7px;line-height:0;border-radius:8px}

/* dots — each one coloured for whatever band it is actually sitting over */
.rail-dot{
  display:block;width:9px;height:9px;border-radius:50%;
  background:rgba(25,28,20,.2);
  transition:background .25s ease,transform .25s ease,opacity .25s ease;
}
.rail li.dk .rail-dot{background:rgba(240,242,233,.26)}
.rail a:hover .rail-dot{background:var(--muted)}
.rail li.dk a:hover .rail-dot{background:rgba(240,242,233,.6)}
.rail li.done .rail-dot{background:var(--accent);opacity:.45}
.rail li.dk.done .rail-dot{background:var(--panel-accent);opacity:.5}
.rail li.on .rail-dot{background:var(--accent);opacity:1;transform:scale(1.4)}
.rail li.dk.on .rail-dot{background:var(--panel-accent);opacity:1}

/* labels — words only, no container; a faint halo of the page colour keeps
   them legible when they fall over copy rather than over the margin */
.rail-lbl{
  position:absolute;right:22px;top:50%;margin-top:-6px;
  font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.012em;
  line-height:1.1;white-space:nowrap;
  color:var(--muted);
  text-shadow:0 0 6px var(--bg),0 0 10px var(--bg),0 0 2px var(--bg);
  opacity:0;visibility:hidden;transform:translateX(5px);cursor:pointer;
  transition:opacity .18s ease,transform .18s ease,visibility .18s,color .25s ease;
}
.rail a:hover .rail-lbl{color:var(--fg)}
.rail li.dk a:hover .rail-lbl{color:var(--panel-fg)}
.rail li.dk .rail-lbl{
  color:var(--panel-muted);
  text-shadow:0 0 6px var(--panel-bg),0 0 10px var(--panel-bg),0 0 2px var(--panel-bg);
}
.rail.lbl-out .rail-lbl{right:auto;left:22px;transform:translateX(-5px)}
.rail:hover .rail-lbl,.rail.open .rail-lbl{opacity:1;visibility:visible;transform:none}
.rail li.on .rail-lbl{color:var(--accent-ink);font-weight:700}
.rail li.dk.on .rail-lbl{color:var(--panel-accent)}
.rail li:nth-child(1) .rail-lbl{transition-delay:.02s}
.rail li:nth-child(2) .rail-lbl{transition-delay:.04s}
.rail li:nth-child(3) .rail-lbl{transition-delay:.06s}
.rail li:nth-child(4) .rail-lbl{transition-delay:.08s}
.rail li:nth-child(5) .rail-lbl{transition-delay:.10s}
.rail li:nth-child(6) .rail-lbl{transition-delay:.12s}
.rail li:nth-child(7) .rail-lbl{transition-delay:.14s}

/* sub-progress through the pinned What-you-get section */
.rail-sub{display:flex;flex-direction:column;gap:3px;margin:2px 4px 3px 0;align-self:flex-end}
.rail-sub i{display:block;width:2px;height:6px;border-radius:1px;background:rgba(25,28,20,.18);transition:background .25s ease}
.rail li.dk .rail-sub i{background:rgba(240,242,233,.22)}
.rail-sub i.on{background:var(--accent);opacity:.8}
.rail li.dk .rail-sub i.on{background:var(--panel-accent);opacity:.9}
@media (prefers-reduced-motion:reduce){
  .rail,.rail-dot,.rail-lbl,.rail-sub i{transition:none}
}

/* ===== footer ===== */
/* footer */
footer{border-top:1px solid var(--line);padding-block:40px 56px;margin-top:20px}
.foot-grid{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.contact{display:flex;flex-direction:column;gap:9px;font-family:var(--ui);font-size:15px}
.contact-h{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 3px;
}
.contact .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.contact .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:56px}
.copy{font-family:var(--ui);font-size:12px;font-weight:600;background:var(--surface-2);border:1px solid var(--accent);border-radius:7px;padding:4px 10px;cursor:pointer;color:var(--accent-ink)}
.copy:hover{background:var(--accent);color:var(--surface)}
.fine{font-family:var(--ui);font-size:12.5px;color:var(--muted);margin-top:24px;max-width:60ch}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ===== Site components (multi-page) ===== */
html,body{margin:0}

/* ---------- header nav ---------- */
.bar-in{gap:22px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;font-family:var(--ui)}
.nav > a,.nav-dd > button{
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--bar-ink);text-decoration:none;
  padding:8px 11px;border-radius:9px;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:background .15s ease,color .15s ease;
}
.nav > a:hover,.nav-dd > button:hover,.nav-dd.open > button{background:var(--surface-2)}
.nav > a[aria-current="page"],.nav-dd.cur > button{color:var(--accent-ink)}
.nav > a[aria-current="page"]::after{content:"";display:block;height:2px;border-radius:2px;background:var(--accent);position:absolute}
.nav > a{position:relative}
.nav > a[aria-current="page"]::after{left:11px;right:11px;bottom:2px}
.nav-dd{position:relative}
.nav-dd > button svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s ease}
.nav-dd.open > button svg{transform:rotate(180deg)}
.nav-menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px);min-width:250px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:8px;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav-dd.open .nav-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-menu a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none}
.nav-menu a:hover{background:var(--surface-2)}
.nav-menu b{display:block;font-size:14px;font-weight:700;color:var(--fg)}
.nav-menu span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.nav-offer{color:var(--accent-ink)!important}
.nav-offer em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--surface-2);color:var(--accent-ink);border-radius:999px;padding:2px 7px;margin-left:4px}
.burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--bar-line);background:none;cursor:pointer;place-items:center;color:var(--bar-ink)}
.burger svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@media (max-width:1020px){
  .nav{display:none}
  .burger{display:grid}
  .bar-right{margin-left:auto}
}
/* mobile panel */
.mnav{
  position:fixed;inset:0;z-index:80;background:var(--bg);padding:16px 20px 28px;
  display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.mnav.open{opacity:1;visibility:visible;transform:none}
.mnav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mnav a.ml{font-family:var(--display);font-weight:800;font-size:1.65rem;letter-spacing:-.02em;text-decoration:none;padding:11px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.mnav a.ml small{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0}
.mnav .btn{margin-top:22px;width:100%}
.mnav-sub{font-family:var(--ui);font-size:13px;color:var(--muted);margin-top:18px}
body.locked{overflow:hidden}

/* ---------- page hero ---------- */
.phero{position:relative;z-index:1;padding-block:clamp(40px,6vw,76px) clamp(26px,4vw,40px)}
.phero h1{font-size:clamp(2.2rem,5.4vw,3.7rem);max-width:20ch}
.crumbs{font-family:var(--ui);font-size:13px;color:var(--muted);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs i{font-style:normal;opacity:.6}

/* ---------- reveal on scroll ---------- */
.rv-up{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv-up.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv-up{opacity:1;transform:none;transition:none}}
.no-js .rv-up{opacity:1;transform:none}

/* ---------- client names marquee ---------- */
.names{position:relative;overflow:hidden;padding-block:20px;border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.names-track{display:flex;gap:46px;width:max-content;animation:tmScroll var(--nm-dur,70s) linear infinite}
.names:hover .names-track{animation-play-state:paused}
.names a{font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,2vw,1.3rem);letter-spacing:-.02em;
  color:var(--muted);text-decoration:none;white-space:nowrap;opacity:.78;transition:color .2s ease,opacity .2s ease}
.names a:hover{color:var(--accent-ink);opacity:1}
.names-lbl{font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
@media (prefers-reduced-motion:reduce){.names-track{animation:none;flex-wrap:wrap;width:auto;gap:14px 30px}}

/* ---------- home: stats row (reuses .stat from base) ---------- */
.stats-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.stats-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stats-4{grid-template-columns:1fr}}

/* ---------- two ways to work ---------- */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
@media (max-width:860px){.offers{grid-template-columns:1fr}}
.offer{
  position:relative;display:flex;flex-direction:column;gap:14px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 28px 26px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,border-color .25s ease;
}
.offer:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.offer-k{font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.offer h3{font-size:clamp(1.5rem,2.8vw,1.9rem);font-weight:800}
.offer-meta{display:flex;gap:10px;flex-wrap:wrap}
.offer-meta span{font-family:var(--ui);font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--accent-ink);border-radius:999px;padding:4px 11px}
.offer p{color:var(--muted);font-size:16px}
.offer ul{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:8px;font-family:var(--ui);font-size:14.5px}
.offer li{display:flex;gap:10px;align-items:baseline}
.offer li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-2px)}
.offer-go{margin-top:auto;padding-top:10px;font-family:var(--ui);font-weight:700;font-size:15px;color:var(--accent-ink);display:flex;align-items:center;gap:8px}
.offer-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s ease}
.offer:hover .offer-go svg{transform:translateX(4px)}
.offer.feature{background:var(--panel-bg);border-color:var(--panel-bg);color:var(--panel-fg)}
.offer.feature h3{color:var(--panel-fg)}
.offer.feature p{color:var(--panel-muted)}
.offer.feature .offer-k,.offer.feature .offer-go{color:var(--panel-accent)}
.offer.feature .offer-meta span{background:rgba(240,242,233,.09);color:var(--panel-fg)}
.offer.feature li::before{background:var(--panel-accent)}
.offer.feature:hover{border-color:var(--panel-accent)}

/* ---------- method stepper (3 steps) ---------- */
.method .d-track{height:330vh}
.method .d-viz{--viz-h:clamp(150px,26vh,250px)}
@media (max-width:980px){.method .d-viz{--viz-h:200px}}
.d-bul{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:6px;font-family:var(--ui);font-size:14px;color:var(--panel-muted)}
.d-bul li{display:flex;gap:9px;align-items:baseline}
.d-bul li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--panel-accent);transform:translateY(-2px)}

/* ---------- featured work ---------- */
.work{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
@media (max-width:1000px){.work{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.work{grid-template-columns:1fr}}

/* case cards (home + index) */
.case-card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;min-height:250px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,border-color .25s ease,opacity .3s ease;
}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.cc-ind{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cc-m{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.35rem);letter-spacing:-.04em;line-height:1;color:var(--accent-ink);margin-top:22px;font-variant-numeric:tabular-nums}
.cc-ml{font-family:var(--ui);font-size:13px;color:var(--muted);margin-top:7px;line-height:1.35}
.cc-name{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.cc-name svg{width:16px;height:16px;flex:none;stroke:var(--accent);fill:none;stroke-width:2;transition:transform .2s ease}
.case-card:hover .cc-name svg{transform:translateX(4px)}

/* filter chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.chip{
  font-family:var(--ui);font-size:14px;font-weight:600;border-radius:999px;padding:8px 15px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--fg);transition:all .18s ease;
}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--btn-ink)}
.chip b{font-weight:700;opacity:.6;margin-left:4px;font-variant-numeric:tabular-nums}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media (max-width:960px){.case-grid{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.case-grid{grid-template-columns:1fr}}
.case-card.hide{display:none}
.case-card.pop{animation:cardIn .42s cubic-bezier(.2,.7,.3,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.case-card.pop{animation:none}}

/* ---------- case study page ---------- */
.case-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,60px);align-items:end}
@media (max-width:860px){.case-top{grid-template-columns:1fr}}
.case-big{
  background:var(--panel-bg);color:var(--panel-fg);border-radius:18px;padding:26px 26px 22px;position:relative;overflow:hidden;
}
.case-big b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,3.8rem);letter-spacing:-.045em;line-height:.95;color:var(--panel-fg)}
.case-big span{display:block;font-family:var(--ui);font-size:14px;color:var(--panel-muted);margin-top:10px}
.case-big i{display:block;font-style:normal;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--panel-accent);margin-bottom:14px}
.case-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.case-facts span{font-family:var(--ui);font-size:13px;font-weight:600;background:var(--surface-2);color:var(--accent-ink);border-radius:999px;padding:5px 12px}

.story{position:relative;max-width:820px;margin-top:10px;padding-left:46px}
.story::before{content:"";position:absolute;left:14px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px}
.story-fill{position:absolute;left:14px;top:10px;width:2px;height:0;background:var(--accent);border-radius:2px;transition:height .2s linear}
.st{position:relative;padding-block:22px}
.st::before{
  content:"";position:absolute;left:-39px;top:30px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line);transition:border-color .3s ease,background .3s ease,transform .3s ease;
}
.st.lit::before{border-color:var(--accent);background:var(--accent);transform:scale(1.1)}
.st-k{font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.st p{font-size:clamp(1.1rem,2vw,1.28rem);line-height:1.55;max-width:58ch}
.st.res p{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(1.25rem,2.5vw,1.55rem);line-height:1.35}

.miles{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;margin-top:30px}
.miles::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.mile{position:relative;padding-top:30px}
.mile::before{content:"";position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.mile:last-child::before{background:var(--accent)}
.mile b{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.mile span{display:block;font-family:var(--ui);font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.4}
@media (max-width:700px){
  .miles{grid-auto-flow:row;grid-auto-columns:auto;padding-left:28px}
  .miles::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .mile{padding-top:0;padding-bottom:14px}
  .mile::before{left:-28px;top:4px}
}
.case-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.case-nav a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--surface);transition:border-color .2s ease}
.case-nav a:hover{border-color:var(--accent)}
.case-nav small{display:block;font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.case-nav b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem;margin-top:4px}
.case-nav a.nx{text-align:right}

/* ---------- pull quote ---------- */
.pull{max-width:900px}
.pull blockquote{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.3;font-size:clamp(1.3rem,2.9vw,1.95rem)}
.pull blockquote::before{content:"\201C";display:block;font-size:3.4em;line-height:.6;height:.42em;color:var(--accent);opacity:.6}
.pull figcaption{margin-top:20px;font-family:var(--ui);font-size:14.5px;color:var(--muted)}
.pull figcaption b{color:var(--fg);font-weight:700}
.band-ink .pull figcaption{color:var(--panel-muted)}
.band-ink .pull figcaption b{color:var(--panel-fg)}
.band-ink .pull blockquote::before{color:var(--panel-accent)}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
@media (max-width:900px){.people{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.people{grid-template-columns:1fr}}
.people.row6{grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:1000px){.people.row6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.people.row6{grid-template-columns:1fr 1fr}}
.person{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit}
.ph{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--surface-2)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04);transition:filter .45s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.person:hover .ph img,.person:focus-visible .ph img{filter:none;transform:scale(1.035)}
.ph-init{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:2rem;color:var(--accent-ink);letter-spacing:-.02em}
.p-name{font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;margin-top:13px}
.p-role{font-family:var(--ui);font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.35}
.p-more{font-family:var(--ui);font-size:13px;font-weight:700;color:var(--accent-ink);margin-top:8px;display:inline-flex;align-items:center;gap:6px}
.p-more svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}

/* bio dialog */
.bio-dlg{border:0;padding:0;border-radius:20px;max-width:760px;width:calc(100% - 32px);background:var(--surface);color:var(--fg);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.bio-dlg::backdrop{background:rgba(19,21,15,.55);backdrop-filter:blur(4px)}
.bio-in{display:grid;grid-template-columns:240px 1fr;gap:0}
.bio-in img{width:100%;height:100%;object-fit:cover;display:block;min-height:300px}
.bio-tx{padding:28px 30px 30px;max-height:min(80vh,640px);overflow:auto}
.bio-tx h3{font-size:1.7rem;font-weight:800}
.bio-tx .p-role{font-size:14px;margin-top:5px}
.bio-tx p{margin-top:14px;font-size:16px;line-height:1.6;color:var(--fg)}
.bio-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center}
.bio-x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none}
@media (max-width:640px){.bio-in{grid-template-columns:1fr}.bio-in img{max-height:300px;min-height:0;object-position:50% 25%}}

/* specialists list */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px;margin-top:28px}
@media (max-width:760px){.specs{grid-template-columns:1fr}}
.spec{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.spec .av{flex:none;width:58px;height:58px;border-radius:50%;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;font-family:var(--display);font-weight:800;color:var(--accent-ink)}
.spec .av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s ease}
.spec:hover .av img{filter:none}
.spec b{display:block;font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.015em}
.spec i{display:block;font-style:normal;font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--accent-ink);margin-top:2px}
.spec p{font-family:var(--ui);font-size:14px;line-height:1.5;color:var(--muted);margin-top:6px}

/* ---------- about: what we are not ---------- */
.vs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,52px);margin-top:34px;align-items:start}
@media (max-width:900px){.vs{grid-template-columns:1fr}}
.vs-tabs{display:flex;flex-direction:column;gap:6px}
.vs-tab{
  text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 18px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;font-family:var(--ui)
}
.vs-tab b{display:block;font-family:var(--display);font-weight:800;font-size:1.08rem;letter-spacing:-.015em}
.vs-tab span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.vs-tab:hover{border-color:var(--accent)}
.vs-tab[aria-selected="true"]{background:var(--panel-bg);border-color:var(--panel-bg);transform:translateX(6px)}
.vs-tab[aria-selected="true"] b{color:var(--panel-fg)}
.vs-tab[aria-selected="true"] span{color:var(--panel-muted)}
@media (max-width:900px){.vs-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.vs-tab{flex:none;min-width:210px}.vs-tab[aria-selected="true"]{transform:none}}
.vs-panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px}
.vs-panel h3{font-size:1.4rem;font-weight:800}
.vs-panel > p{margin-top:12px;color:var(--muted);font-size:16px}
.vs-bars{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.vs-row{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;font-family:var(--ui);font-size:13px}
@media (max-width:520px){.vs-row{grid-template-columns:1fr}}
.vs-row > span{color:var(--muted);font-weight:600}
.vs-meter{display:grid;gap:5px}
.vs-line{display:flex;align-items:center;gap:8px}
.vs-line i{font-style:normal;width:62px;flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vs-track{flex:1;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.vs-track u{display:block;height:100%;border-radius:999px;background:var(--muted);opacity:.55;width:0;transition:width .6s cubic-bezier(.25,.8,.3,1)}
.vs-line.sp i{color:var(--accent-ink)}
.vs-line.sp u{background:var(--accent);opacity:1}
.vs-note{font-family:var(--ui);font-size:12px;color:var(--muted);margin-top:18px}

/* ---------- about: career timeline ---------- */
.career{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:36px}
.career::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(240,242,233,.16)}
.career-fill{position:absolute;left:0;top:11px;height:2px;width:0;background:var(--panel-accent);transition:width 1.6s cubic-bezier(.3,.7,.3,1)}
.career.in .career-fill{width:100%}
.cr{position:relative;padding-top:34px;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.career.in .cr{opacity:1;transform:none}
.cr::before{content:"";position:absolute;top:4px;left:0;width:16px;height:16px;border-radius:50%;background:var(--panel-bg);border:2px solid var(--panel-accent)}
.cr.big::before{background:var(--panel-accent)}
.cr b{display:block;font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--panel-fg);letter-spacing:-.015em}
.cr span{display:block;font-family:var(--ui);font-size:13px;color:var(--panel-muted);margin-top:5px;line-height:1.45}
.cr small{display:block;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--panel-accent);margin-bottom:6px}
@media (max-width:900px){
  .career{grid-template-columns:1fr;gap:0;padding-left:30px}
  .career::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .career-fill{left:7px;top:0;width:2px!important;height:0;transition:height 1.6s cubic-bezier(.3,.7,.3,1)}
  .career.in .career-fill{height:100%}
  .cr{padding:0 0 18px}
  .cr::before{left:-30px;top:2px}
}
@media (prefers-reduced-motion:reduce){.cr,.career-fill{transition:none}}

/* three-up points */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media (max-width:860px){.points{grid-template-columns:1fr}}
.point{border-top:2px solid var(--accent);padding-top:16px}
.point small{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--accent)}
.point h3{font-size:1.25rem;font-weight:800;margin-top:6px}
.point p{color:var(--muted);margin-top:8px;font-size:16px}

/* ---------- solutions: capabilities ---------- */
.caps{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,52px);margin-top:34px;align-items:start}
@media (max-width:900px){.caps{grid-template-columns:1fr}}
.cap-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cap-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:16px 4px;cursor:pointer;font-family:var(--ui);color:var(--fg)}
.cap-btn small{font-family:var(--display);font-size:12px;font-weight:800;color:var(--accent);opacity:.6;font-variant-numeric:tabular-nums}
.cap-btn b{font-family:var(--display);font-size:1.2rem;font-weight:800;letter-spacing:-.015em;color:var(--muted);transition:color .2s ease}
.cap-btn svg{margin-left:auto;width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2;opacity:0;transform:translateX(-6px);transition:all .2s ease}
.cap-btn[aria-selected="true"] b,.cap-btn:hover b{color:var(--fg)}
.cap-btn[aria-selected="true"] small{opacity:1}
.cap-btn[aria-selected="true"] svg{opacity:1;transform:none}
.cap-panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;position:sticky;top:96px}
.cap-panel[hidden]{display:none}
.cap-panel .cap-q{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.3vw,1.45rem);letter-spacing:-.015em;line-height:1.35}
.cap-panel p{margin-top:14px;color:var(--muted);font-size:16.5px}
.cap-panel .btn{margin-top:20px}
@media (max-width:900px){.cap-panel{position:static}}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;border-top:1px solid var(--line)}
@media (max-width:860px){.values{grid-template-columns:1fr}}
.value{padding:22px 22px 22px 0;border-bottom:1px solid var(--line)}
.value h3{font-size:1.1rem;font-weight:800;display:flex;gap:10px;align-items:baseline}
.value h3 small{font-family:var(--display);font-size:11px;color:var(--accent);font-weight:800}
.value p{color:var(--muted);margin-top:8px;font-size:15.5px}
.deliv{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;margin-top:6px;font-family:var(--ui);font-size:14px}
.deliv span{display:flex;gap:9px;align-items:baseline}
.deliv span::before{content:counter(dl,decimal-leading-zero);counter-increment:dl;font-family:var(--display);font-weight:800;font-size:11px;color:var(--panel-accent)}
.deliv{counter-reset:dl}
@media (max-width:520px){.deliv{grid-template-columns:1fr}}

/* ---------- videos ---------- */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
@media (max-width:900px){.vids{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.vids{grid-template-columns:1fr}}
.vid{display:flex;flex-direction:column;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.vid.hide{display:none}
.vid-th{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--panel-bg)}
.vid-th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .4s ease;filter:saturate(.85)}
.vid:hover .vid-th img{transform:scale(1.04);filter:none}
.vid-play{position:absolute;inset:0;display:grid;place-items:center}
.vid-play span{width:56px;height:56px;border-radius:50%;background:rgba(19,21,15,.72);display:grid;place-items:center;transition:transform .25s ease,background .25s ease;backdrop-filter:blur(4px)}
.vid:hover .vid-play span{transform:scale(1.1);background:var(--accent)}
.vid-play svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.vid-t{font-family:var(--display);font-weight:800;font-size:1.04rem;letter-spacing:-.015em;margin-top:12px;line-height:1.25}
.vid-k{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:12px}
.vdlg{border:0;padding:0;background:#000;width:min(1000px,calc(100% - 24px));border-radius:14px;overflow:hidden}
.vdlg::backdrop{background:rgba(10,11,8,.82)}
.vdlg .frame{aspect-ratio:16/9;width:100%}
.vdlg iframe{width:100%;height:100%;border:0;display:block}
.vdlg .bio-x{background:rgba(255,255,255,.9);color:#111;z-index:2}

/* ---------- blog ---------- */
.posts{margin-top:28px;border-top:1px solid var(--line)}
.post-row{display:grid;grid-template-columns:130px 1fr auto;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.post-row time{font-family:var(--ui);font-size:13px;color:var(--muted)}
.post-row h2{font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:800;max-width:none}
.post-row p{font-size:15.5px;color:var(--muted);margin-top:6px;max-width:64ch}
.post-row svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;transition:transform .2s ease}
.post-row:hover h2{color:var(--accent-ink)}
.post-row:hover svg{transform:translateX(4px)}
@media (max-width:640px){.post-row{grid-template-columns:1fr}.post-row svg{display:none}}
.prose{max-width:68ch;font-size:18px;line-height:1.7}
.prose p{margin-top:1.05em}
.prose h2{font-size:1.5rem;font-weight:800;margin-top:1.8em}
.prose h2 + p{margin-top:.6em}
.prose a{color:var(--accent-ink)}
.prose ul{padding-left:1.2em}
.post-meta{font-family:var(--ui);font-size:14px;color:var(--muted);margin-top:16px}
.legal h2{font-size:1.25rem}

/* ---------- meeting ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
@media (max-width:760px){.paths{grid-template-columns:1fr}}
.path{text-align:left;cursor:pointer;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:22px;font:inherit;color:inherit;transition:border-color .2s ease,background .2s ease}
.path:hover{border-color:var(--accent)}
.path[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-2)}
.path b{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.015em}
.path span{display:block;font-family:var(--ui);font-size:14px;color:var(--muted);margin-top:6px;line-height:1.45}
.meet-pane{margin-top:26px}
.meet-pane[hidden]{display:none}
.cal-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:700px}
.cal-box iframe{width:100%;height:760px;border:0;display:block}
.form{display:grid;gap:14px;max-width:640px}
.form label{display:grid;gap:6px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--muted)}
.form input,.form textarea,.form select{
  font:inherit;font-family:var(--ui);font-size:16px;color:var(--fg);background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:12px 14px;width:100%;
}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.form .two{grid-template-columns:1fr}}
.form-msg{font-family:var(--ui);font-size:14px;min-height:1.4em}
.form-msg.err{color:var(--warn-ink)}
.hp{position:absolute;left:-9999px}

/* ---------- CTA band ---------- */
.cta-band{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:860px){.cta-band{grid-template-columns:1fr}}
.cta-band h2{font-size:clamp(1.9rem,4.4vw,2.8rem);font-weight:800;max-width:18ch}
.cta-band .sub{color:var(--panel-muted);margin-top:14px;max-width:52ch}
.cta-acts{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta-acts .btn.ghost{background:transparent;color:var(--panel-fg);border-color:rgba(240,242,233,.35)}
.cta-acts .btn.ghost:hover{border-color:var(--panel-accent);background:transparent}
.cta-acts small{font-family:var(--ui);font-size:13px;color:var(--panel-muted)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:48px 40px;margin-top:0}
.sf-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
@media (max-width:900px){.sf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sf-grid{grid-template-columns:1fr}}
.sf-grid h4{font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}
.sf-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-family:var(--ui);font-size:14.5px}
.sf-grid a{text-decoration:none;color:var(--fg)}
.sf-grid a:hover{color:var(--accent-ink)}
.sf-tag{font-family:var(--ui);font-size:14px;color:var(--muted);margin-top:12px;max-width:34ch;line-height:1.5}
.sf-soc{display:flex;gap:8px;margin-top:16px}
.sf-soc a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.sf-soc a:hover{border-color:var(--accent);color:var(--accent-ink)}
.sf-soc svg{width:16px;height:16px;fill:currentColor}
.sf-off li{color:var(--muted)}
.sf-off b{color:var(--fg);font-weight:600}
.sf-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--ui);font-size:13px;color:var(--muted)}
.sf-base a{color:var(--muted)}

/* ---------- misc ---------- */
.lead2{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--muted);max-width:62ch;margin-top:16px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.lnk{font-family:var(--ui);font-weight:700;font-size:15px;color:var(--accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.lnk svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s ease}
.lnk:hover svg{transform:translateX(4px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--btn-ink);padding:10px 14px;border-radius:10px;font-family:var(--ui);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.nf{text-align:left;padding-block:clamp(60px,10vw,120px)}
.nf h1{font-size:clamp(3rem,10vw,6rem)}
.foot-note{font-family:var(--ui);font-size:12.5px;color:var(--muted)}

.rail li.rail-hit{position:absolute;display:block}
.band-ink .sec .sub,.band-ink .sub,.band-ink .lead2{color:var(--panel-muted)}
.band-soft .spec .av{background:var(--surface)}
/* the header keeps its light surface in both themes (as on the landing page),
   so its links use the bar tokens rather than the theme's accent */
.nav > a[aria-current="page"],.nav-dd.cur > button,.nav-offer{color:var(--bar-accent)!important}
.nav > a[aria-current="page"]::after{background:var(--bar-accent)}
.nav > a:hover,.nav-dd > button:hover,.nav-dd.open > button{background:rgba(25,28,20,.06)}
.nav-offer em{background:rgba(90,100,43,.12);color:var(--bar-accent)}
.bar .btn{background:var(--bar-accent);color:#fff}

/* ---------- case cards v2: art band, then who, then the result ---------- */
.case-card{padding:0;min-height:0;overflow:hidden}
.cc-art{position:relative;display:block;height:150px;overflow:hidden;background:var(--surface-2);border-bottom:1px solid var(--line)}
.case-card.big .cc-art{height:210px}
.cc-art.photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) sepia(.32) hue-rotate(28deg) saturate(1.25) contrast(1.02);
  transform:scale(1.01);transition:filter .45s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.case-card:hover .cc-art.photo img,.case-card:focus-visible .cc-art.photo img{filter:none;transform:scale(1.05)}
.cc-art.logo,.cc-art.word{display:grid;place-items:center;padding:20px 28px;
  background-color:var(--surface-2);background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:18px 18px}
.cc-logo{max-width:62%;max-height:58px;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.78;transition:filter .35s ease,opacity .35s ease}
.case-card.big .cc-logo{max-height:74px}
.case-card:hover .cc-logo{filter:none;opacity:1}
:root[data-theme="dark"] .cc-logo{filter:grayscale(1) invert(1) brightness(1.6);opacity:.7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cc-logo{filter:grayscale(1) invert(1) brightness(1.6);opacity:.7}}
.cc-word{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;text-align:center;
  font-size:clamp(1.35rem,2.4vw,1.75rem);color:var(--accent-ink);text-wrap:balance;max-width:14ch}
.case-card.big .cc-word{font-size:clamp(1.6rem,3vw,2.2rem)}
.cc-badge{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:baseline;gap:8px;
  background:var(--surface);color:var(--fg);border-radius:10px;padding:7px 11px;box-shadow:0 2px 10px rgba(25,28,20,.14);
  font-family:var(--ui);font-size:12.5px;color:var(--muted);max-width:calc(100% - 28px)}
.cc-badge b{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;color:var(--accent-ink);white-space:nowrap}
.cc-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 16px;flex:1}
.case-card .cc-name{font-family:var(--display);font-weight:800;font-size:1.22rem;letter-spacing:-.02em;line-height:1.15;margin:0;padding:0;display:block}
.case-card.big .cc-name{font-size:1.45rem}
.cc-out{font-family:var(--body);font-size:16px;line-height:1.45;color:var(--muted)}
.cc-foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.cc-foot .cc-ind{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.cc-foot svg{width:16px;height:16px;flex:none;stroke:var(--accent);fill:none;stroke-width:2;transition:transform .2s ease}
.case-card:hover .cc-foot svg{transform:translateX(4px)}
.cs-h{font-size:clamp(1.5rem,3vw,2rem)!important;max-width:none!important}
#cases .chips{margin-top:20px}

/* case page */
.case-big.txt p{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.4vw,1.55rem);line-height:1.3;letter-spacing:-.015em;color:var(--panel-fg)}
.case-photo{margin:0 0 6px}
.cp-art{position:relative;display:block;height:clamp(200px,28vw,320px);border-radius:18px;overflow:hidden;background:var(--surface-2)}
.cp-art img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) sepia(.32) hue-rotate(28deg) saturate(1.25)}
.cp-art .cc-badge{display:none}

/* roster */
.roster{list-style:none;margin:28px 0 0;padding:0;columns:4 200px;column-gap:28px}
.roster li{break-inside:avoid;font-family:var(--ui);font-size:15px;font-weight:600;color:var(--fg);padding:7px 0;border-top:1px solid var(--line)}
.roster li.roster-more{color:var(--accent-ink);font-weight:800}
/* the old site's logo files are white-on-transparent; render them as one-colour marks */
.cc-logo{filter:brightness(0);opacity:.72}
.case-card:hover .cc-logo{filter:brightness(0);opacity:.95}
:root[data-theme="dark"] .cc-logo,:root[data-theme="dark"] .case-card:hover .cc-logo{filter:brightness(0) invert(1);opacity:.8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cc-logo,:root:not([data-theme="light"]) .case-card:hover .cc-logo{filter:brightness(0) invert(1);opacity:.8}}

/* ---------- case card art v3 ---------- */
.cc-badge{display:none}
.cc-art.photo img{filter:grayscale(1) contrast(1.06) brightness(1.03)}
.case-card:hover .cc-art.photo img,.case-card:focus-visible .cc-art.photo img{filter:none}
.cc-art.num{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;padding:18px 20px;
  background-color:var(--panel-bg);background-image:none;border-bottom-color:var(--panel-bg)}
.cc-art.num b{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,3.6vw,2.9rem);line-height:.95;letter-spacing:-.045em;color:var(--panel-fg);white-space:nowrap}
.case-card.big .cc-art.num b{font-size:clamp(2.6rem,4.4vw,3.6rem)}
.cc-art.num small{font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--panel-accent)}
.cc-art.mono{position:relative;display:block;overflow:hidden;background-color:var(--surface-2)}
.cc-art.mono i{position:absolute;right:-6px;bottom:-.32em;font-style:normal;font-family:var(--display);font-weight:800;
  font-size:150px;line-height:1;letter-spacing:-.06em;color:var(--accent);opacity:.16;transition:opacity .35s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.case-card.big .cc-art.mono i{font-size:200px}
.case-card:hover .cc-art.mono i{opacity:.26;transform:translateX(-6px)}
.case-card:hover .cc-art.num b{color:var(--panel-accent)}
/* homepage row of four: shorter art, tighter body */
.work .cc-art{height:128px}
.work .cc-art.num b{font-size:clamp(1.9rem,2.8vw,2.4rem)}
.work .cc-body{padding:16px 18px 14px}
.work .case-card .cc-name{font-size:1.12rem}
.work .cc-out{font-size:15px}