/* ══════════════════════════════════════════════════════════════
   RankingBite, Direction B
   Geometric sans, full-bleed alternating bands, editorial density.
   Standalone: does not load rb.css / tokens.css.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Ink & Cobalt. Cool neutrals, blue-black ground, cobalt primary. */
  --ink:#0A0D14; --ink-2:#262B36; --ink-3:#5E6675; --ink-4:#646D7C;
  /* Running body copy. Darker than --ink-3, which stays for micro-labels
     and meta. 9.4:1 on --paper, so paragraphs read at small sizes. */
  --body:#3D4552;
  --paper:#FFFFFF; --paper-2:#F2F4F8; --paper-3:#E5EAF1;
  --night:#0A0D14; --night-2:#141922; --night-line:#252D3A;
  --accent:#2455E8; --accent-2:#1B45C4; --line:#DEE4EC;
  /* Text and lines on dark bands. */
  --on-night-2:#C2C9D6; --on-night-3:#98A1B1; --on-night-4:#8A93A3;
  --night-line-2:#3F4855; --night-hover:#1B2130;

  /* Secondary hues. Each is assigned to a meaning, not used decoratively:
     indigo = identity, cobalt = language/actions, azure = distribution,
     teal = data, green = confirmed figures, amber = missing figures.
     All five clear 4.5:1 as text on --paper. */
  --h-indigo:#4B45C6; --h-cobalt:#2455E8; --h-azure:#0A6699;
  --h-teal:#0E7264;   --h-green:#1A7345;  --h-amber:#7E5200;
  --h-amber-bg:#FBF3E0; --h-amber-line:#E0BE72;
  --h-green-bg:#E9F4EE;
  /* On dark bands the same hues need lifting to stay legible. */
  --h-indigo-d:#8E88F0; --h-cobalt-d:#7C9BFF; --h-azure-d:#5AB4E6;
  --h-teal-d:#4FBFAE;   --h-green-d:#5DC489; --h-amber-d:#E0B45C;
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(1.25rem,5vw,4.5rem);
  --max:1280px;
  --r:14px; --r-lg:20px; --r-pill:100px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--ink);color:#fff}
p{text-wrap:pretty;overflow-wrap:break-word}

/* ── Type scale ── */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
.d1{font-size:clamp(2.1rem,6.2vw,4.6rem)}
.d2{font-size:clamp(1.75rem,4.6vw,3.4rem)}
.d3{font-size:clamp(1.35rem,2.8vw,2.1rem);letter-spacing:-.02em}
.d4{font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:-.015em;line-height:1.2}
.lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6;color:var(--ink-2)}
.small{font-size:1rem;line-height:1.65;color:var(--body)}
.eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);display:block}
.num{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--ink-4)}

/* ── Layout ── */
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
.band{padding:clamp(3.5rem,8vw,7.5rem) 0}
.band-tight{padding:clamp(2.5rem,5vw,4.5rem) 0}
.dark{background:var(--night);color:#fff}
.dark .lede,.dark .small{color:var(--on-night-2)}
.dark .eyebrow,.dark .num{color:var(--on-night-4)}
.dark a{color:#fff}
.dark a:hover{color:var(--accent)}
.sunk{background:var(--paper-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.dark .rule{background:var(--night-line)}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:860px){.split{grid-template-columns:minmax(0,1fr);gap:2rem}}
.stk{display:grid;gap:1.25rem}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:0 1.6rem;border-radius:var(--r-pill);font-size:.9375rem;font-weight:600;letter-spacing:-.01em;border:1.5px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.tlink{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:600;font-size:.9375rem;border-bottom:1.5px solid currentColor;border-radius:0;align-self:start}
.tlink:hover{gap:.85rem}

/* ── Header ── */
.hdr{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--max);margin:0 auto;padding:0 max(var(--gut),env(safe-area-inset-left));min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font-size:1.3rem;font-weight:800;letter-spacing:-.045em;display:inline-flex;align-items:center;min-height:48px}
.logo sup{font-size:.5em;font-weight:600;top:-.7em}
.menu-btn{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:0 .5rem;background:none;border:0;font-family:var(--font);font-size:.9375rem;font-weight:600;color:var(--ink);cursor:pointer;letter-spacing:-.01em}
.menu-btn i{display:grid;gap:4px;width:18px}
.menu-btn i span{height:1.5px;background:currentColor;display:block;transition:transform .3s var(--ease)}
.menu-btn:hover i span:first-child{transform:translateX(3px)}

/* ── Overlay nav ── */
.ovl{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;padding:0;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.ovl[data-open]{opacity:1;visibility:visible}
.ovl-in{max-width:var(--max);width:100%;margin:0 auto;padding:0 max(var(--gut),env(safe-area-inset-left));display:flex;flex-direction:column;flex:1;min-height:0}
.ovl-top{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ovl-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line);padding:clamp(1.75rem,4vw,3rem) 0}
.ovl-nav{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ovl-nav > li > a,.ovl-nav > li > .grp-btn{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;font-size:clamp(1.25rem,5vw,2.1rem);font-weight:700;letter-spacing:-.03em;line-height:1.2;padding:.55rem 0;min-height:56px;background:none;border:0;font-family:var(--font);color:var(--ink);cursor:pointer;text-align:left}
.ovl-nav > li{border-bottom:1px solid var(--line)}
.ovl-nav > li:last-child > a{color:var(--accent)}
.grp-btn em{font-family:var(--mono);font-size:.6875rem;font-style:normal;letter-spacing:.1em;color:var(--ink-4);flex-shrink:0;margin-left:auto}
/* The count is a desktop nicety, not content: at 320px it competed with the
   label and the +/- glyph for the same row. The glyph carries the affordance. */
@media(max-width:700px){.grp-btn em{display:none}}
.grp-btn svg{flex-shrink:0;width:14px;height:14px;transition:transform .3s var(--ease)}
.grp[data-open] .grp-btn svg{transform:rotate(45deg)}
.grp-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.grp[data-open] .grp-panel{grid-template-rows:1fr}
.grp-panel > div{overflow:hidden}
/* Grouped columns: each pillar is its own column with its own heading,
   so 21 services read as four short lists instead of one long flow. */
.grp-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem;padding:.75rem 0 2.25rem;margin:0;list-style:none}
.grp-cols > li{display:grid;gap:.1rem;align-content:start}
.grp-cols h4{font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:0 0 .5rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.grp-cols ul{margin:0;padding:0;list-style:none;display:grid}
.grp-cols a{display:flex;align-items:center;min-height:40px;font-size:.9375rem;color:var(--ink-2);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.grp-cols a:hover{color:var(--accent)}
.grp-flat{grid-template-columns:repeat(5,minmax(0,1fr));gap:.1rem 2.5rem}
@media(max-width:980px){.grp-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.75rem}.grp-flat{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:560px){.grp-cols,.grp-flat{grid-template-columns:minmax(0,1fr);gap:1.5rem}}
.ovl-ft{border-top:1px solid var(--line);padding:1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:end}
.ovl-ft .socials{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:.6rem}
.ovl-ft .socials a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;font-size:.9375rem;font-weight:500}
.ovl-ft .cont{text-align:right;font-size:.9375rem;color:var(--body);display:grid;gap:.2rem}
@media(max-width:640px){.ovl-ft{grid-template-columns:minmax(0,1fr)}.ovl-ft .cont{text-align:left}}
body[data-lock]{overflow:hidden}

/* ── Hero ── */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3rem);text-align:center}
.hero .d1{max-width:20ch;margin:0 auto 1.5rem}
.hero .lede{max-width:56ch;margin:0 auto}
.pill{display:inline-flex;align-items:center;gap:.55rem;min-height:38px;padding:0 .95rem;border:1px solid var(--line);border-radius:var(--r-pill);font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.75rem}
.pill b{color:var(--accent);font-weight:500}
.hero .btn-row{justify-content:center;margin-top:2rem}
.rating{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1.5rem;font-size:.875rem;color:var(--ink-3)}
.stars{color:var(--accent);letter-spacing:.1em;font-size:.9rem}

/* ── Logo marquee ── */
.mrq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.5rem 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mrq-t{display:flex;align-items:center;gap:clamp(2rem,5vw,4rem);width:max-content;animation:slide 38s linear infinite}
.mrq:hover .mrq-t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mrq-i{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:var(--ink-4);white-space:nowrap;transition:color .25s var(--ease)}
.mrq-i:hover{color:var(--ink)}
.dark .mrq-i{color:var(--on-night-3)}
.dark .mrq-i:hover{color:#fff}
.dark .mrq{border-color:var(--night-line)}
.mrq-i.todo{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);border:1px dashed var(--ink-4);border-radius:var(--r-pill);padding:.4rem .9rem}

/* ── Text marquee strip ── */
.strip{background:var(--ink);color:#fff;padding:1.1rem 0;overflow:hidden}
.strip-t{display:flex;gap:1.5rem;width:max-content;animation:slide 30s linear infinite}
.strip span{font-size:clamp(1rem,2vw,1.45rem);font-weight:700;letter-spacing:-.025em;white-space:nowrap;display:inline-flex;align-items:center;gap:1.5rem}
.strip span::after{content:"";color:var(--accent);font-size:.7em}

/* ── Service list (two-col band) ── */
.slist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.slist li{border-bottom:1px solid var(--line)}
.slist a{display:flex;align-items:baseline;gap:1rem;padding:1.05rem .25rem;min-height:60px;font-size:clamp(1.05rem,2.1vw,1.35rem);font-weight:600;letter-spacing:-.02em}
.slist a span.num{flex-shrink:0;width:2.2em}
.slist a i{margin-left:auto;font-style:normal;color:var(--ink-4);flex-shrink:0;transition:transform .25s var(--ease)}
.slist a:hover i{transform:translateX(5px);color:var(--accent)}
.dark .slist{border-color:var(--night-line)}
.dark .slist li{border-color:var(--night-line)}

/* ── Work / case grid ── */
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
@media(max-width:900px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wgrid{grid-template-columns:minmax(0,1fr)}}
.wcard{display:grid;gap:.85rem}
.wcard .shot{width:100%;border-radius:var(--r);overflow:hidden;background:var(--paper-3);aspect-ratio:4/3;border:1px solid var(--line)}
.wcard image-slot{width:100%;height:100%;display:block}
.wcard h3{font-size:1.05rem;letter-spacing:-.025em}
.wcard h3 a::after{content:"."}
.wcard p{margin:0;font-size:.9375rem;color:var(--body);line-height:1.6}
.wcard .kpi{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.dark .wcard .shot{background:var(--night-2);border-color:var(--night-line)}

/* ── Numbered cards ── */
.ncards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,minmax(0,1fr)));gap:clamp(1rem,2vw,1.5rem)}
.ncard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:grid;gap:.7rem;align-content:start}
.ncard .num{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--ink-4);font-family:var(--font)}
.ncard h3{font-size:1.0625rem;letter-spacing:-.02em}
.ncard p{margin:0;font-size:.9375rem;color:var(--body);line-height:1.6}
.dark .ncard{background:var(--night-2);border-color:var(--night-line)}
.dark .ncard p{color:var(--on-night-2)}

/* ── Quad grid ── */
.quad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.quad > div{padding:clamp(1.4rem,3vw,2.2rem);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:.6rem;align-content:start}
.quad > div:nth-child(2n){border-right:0}
.quad > div:nth-last-child(-n+2){border-bottom:0}
.quad h3{font-size:1.0625rem;letter-spacing:-.02em}
.quad p{margin:0;font-size:.9375rem;color:var(--body);line-height:1.6}
@media(max-width:640px){.quad{grid-template-columns:minmax(0,1fr)}.quad > div{border-right:0}.quad > div:nth-last-child(2){border-bottom:1px solid var(--line)}}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,minmax(0,1fr)));gap:clamp(1.25rem,3vw,2.5rem);border-top:1px solid var(--line);padding-top:2rem}
.stats > div{display:grid;gap:.4rem}
.stats b{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.stats span{font-size:.875rem;color:var(--body);line-height:1.5}
.dark .stats{border-color:var(--night-line)}

/* ── Accordion (details = always in DOM) ── */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:center;gap:1rem;padding:1.2rem .25rem;min-height:64px;cursor:pointer;list-style:none;font-size:clamp(1rem,1.9vw,1.2rem);font-weight:600;letter-spacing:-.02em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";margin-left:auto;width:11px;height:11px;flex-shrink:0;border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.acc details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.acc summary:hover{color:var(--accent)}
.acc .body{padding:0 .25rem 1.5rem;max-width:72ch}
.acc .body p{margin:0 0 .85rem;font-size:1rem;color:var(--body);line-height:1.7}
.acc .body p:last-child{margin:0}
.acc .body ul{margin:.5rem 0 0;padding-left:1.1rem;font-size:1rem;color:var(--body);line-height:1.7}
.dark .acc,.dark .acc details{border-color:var(--night-line)}
.dark .acc .body p,.dark .acc .body ul{color:var(--on-night-2)}

/* ── Testimonial ── */
.quote{max-width:66ch;margin:0 auto;text-align:center;display:grid;gap:1.5rem;justify-items:center}
.quote blockquote{margin:0;font-size:clamp(1.1rem,2.3vw,1.55rem);font-weight:500;letter-spacing:-.02em;line-height:1.45}
.quote .who{display:grid;gap:.15rem;font-size:.9375rem;color:var(--body)}
.quote .who b{color:var(--ink);font-size:.9375rem}
.avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--paper-3);border:1px solid var(--line)}
.avatar image-slot{width:100%;height:100%;display:block}

/* ── Markets ── */
/* Verticals: pinned to 4 columns so 8 items fill 2 rows exactly. auto-fit
   resolved to 5 and left two dead cells. Edge borders are cleared per row so
   the grid reads as one framed block rather than a table with a ragged end. */
.mkt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.mkt span,.mkt a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:78px;padding:1rem .75rem;font-size:1rem;font-weight:600;letter-spacing:-.02em;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .2s var(--ease),color .2s var(--ease)}
.mkt span:nth-child(4n),.mkt a:nth-child(4n){border-right:0}
.mkt span:nth-last-child(-n+4),.mkt a:nth-last-child(-n+4){border-bottom:0}
.mkt a:hover{background:var(--paper-2);color:var(--accent)}
.dark .mkt,.dark .mkt span,.dark .mkt a{border-color:var(--night-line)}
.dark .mkt{background:var(--night-2)}
.dark .mkt a:hover{background:var(--night-hover)}
@media(max-width:900px){
  .mkt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mkt span,.mkt a{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .mkt span:nth-child(2n),.mkt a:nth-child(2n){border-right:0}
  .mkt span:nth-last-child(-n+2),.mkt a:nth-last-child(-n+2){border-bottom:0}
  .dark .mkt span,.dark .mkt a{border-color:var(--night-line)}
}
@media(max-width:420px){.mkt span,.mkt a{min-height:64px;font-size:.9375rem}}

/* ── Lead form ── */
.lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.lead > div{padding:clamp(1.6rem,4vw,2.75rem)}
.lead-l{border-right:1px solid var(--line);display:grid;gap:1.25rem;align-content:start}
.lead-r{background:var(--paper-2)}
.fields{display:grid;gap:.85rem}
.fields label{display:grid;gap:.35rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.fields input,.fields select,.fields textarea{font-family:var(--font);font-size:16px;min-height:48px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%}
.fields textarea{min-height:96px;resize:vertical}
.fields .btn{width:100%;background:var(--accent);border-color:var(--accent)}
.fields .btn:hover{background:var(--ink);border-color:var(--ink)}
@media(max-width:800px){.lead{grid-template-columns:minmax(0,1fr)}.lead-l{border-right:0;border-bottom:1px solid var(--line)}}

/* ── Team ── */
.team{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
/* width:100% is load-bearing: aspect-ratio only reserves space when the inline
   size is definite. Without it the figure collapses to ~0 until the lazy image
   loads, then snaps to full size, which is a large layout shift. */
.team .shot{width:100%;max-width:400px;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--paper-3);border:1px solid var(--line);margin:0}
.team .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
@media(max-width:900px){.team{grid-template-columns:minmax(0,1fr);gap:1.5rem}.team .shot{max-width:340px;margin-inline:auto}}

/* ── Footer ── */
.ft{background:var(--night);color:#fff;padding:clamp(3rem,6vw,5rem) 0 calc(2rem + env(safe-area-inset-bottom))}
.ft-cta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--night-line)}
.ft-cta .d2{max-width:20ch}
@media(max-width:800px){.ft-cta{grid-template-columns:minmax(0,1fr)}}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem;padding:clamp(2rem,4vw,3rem) 0}
.ft-grid h4{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-4);font-weight:400;margin-bottom:.9rem}
.ft-grid ul{margin:0;padding:0;list-style:none}
.ft-grid a{display:inline-flex;align-items:center;min-height:40px;font-size:.9375rem;color:var(--on-night-2)}
.ft-grid a:hover{color:#fff}
@media(max-width:800px){.ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:480px){.ft-grid{grid-template-columns:minmax(0,1fr)}}
.ft-btm{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;padding-top:1.5rem;border-top:1px solid var(--night-line);font-size:.8125rem;color:var(--on-night-4)}

/* ── Placeholder token: never ship fabricated data ── */
.ph{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-3);border:1px dashed var(--ink-4);border-radius:6px;padding:.25rem .55rem;vertical-align:middle}
.dark .ph{background:var(--night-2);border-color:var(--night-line-2);color:var(--on-night-3)}

/* ── Motion / short viewport ── */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.mrq{overflow-x:auto}.mrq-t{width:auto}}
@media(max-height:520px){.hdr{position:static}}
@media(max-width:380px){:root{--gut:1rem}}

/* ══════════ INNER PAGE COMPONENTS ══════════ */

/* Page head */
.phead{padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)}
.phead .d1{max-width:24ch;margin:1.25rem 0 1.5rem}
.phead .lede{max-width:60ch}
.phead .btn-row{margin-top:2rem}
.crumb{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.crumb a{display:inline-flex;align-items:center;min-height:36px;color:var(--ink-4)}
.crumb a:hover{color:var(--accent)}
.crumb li[aria-hidden]{opacity:.5}

/* Head grid: copy left, fact panel right */
.hgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:900px){.hgrid{grid-template-columns:minmax(0,1fr);gap:2rem}}
.facts{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.facts h4{font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);padding:1rem 1.25rem;border-bottom:1px solid var(--line);background:var(--paper-2);margin:0}
.facts dl{margin:0;padding:.35rem 1.25rem 1rem}
.facts dl > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line)}
.facts dl > div:last-child{border-bottom:0}
.facts dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.facts dd{margin:0;font-size:.9375rem;text-align:right;font-weight:500}

/* Body + index rail */
.railed{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:900px){.railed{grid-template-columns:minmax(0,1fr);gap:1.5rem}}
.rail{position:sticky;top:100px}
@media(max-width:900px){.rail{position:static;border:1px solid var(--line);border-radius:var(--r);padding:1.25rem}}
.rail h4{font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:0 0 .75rem}
.rail ol{margin:0;padding:0;list-style:none;counter-reset:r;display:grid}
.rail a{display:flex;gap:.6rem;align-items:baseline;min-height:40px;font-size:.9375rem;color:var(--body);line-height:1.4;padding:.25rem 0}
.rail a::before{counter-increment:r;content:counter(r,decimal-leading-zero);font-family:var(--mono);font-size:.6875rem;color:var(--ink-4);flex-shrink:0}
.rail a:hover{color:var(--accent)}
.blocks{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.blk{display:grid;gap:1rem}
.blk h2{font-size:clamp(1.35rem,2.8vw,2rem);letter-spacing:-.025em}
.blk > p{margin:0;color:var(--body);max-width:68ch;font-size:1.0625rem;line-height:1.7}
.blk .answer{font-size:clamp(1.05rem,1.7vw,1.2rem);line-height:1.5;color:var(--ink);font-weight:500;max-width:56ch;letter-spacing:-.015em}

/* Callout definition */
.callout{border-left:2.5px solid var(--accent);padding:.35rem 0 .35rem 1.5rem;margin:0}
.callout p{margin:0;font-size:clamp(1.05rem,1.9vw,1.3rem);font-weight:500;letter-spacing:-.02em;line-height:1.45}
.callout cite{display:block;margin-top:.75rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-style:normal}

/* Ticks / plain lists */
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:.75rem}
.ticks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;font-size:1rem;color:var(--body);line-height:1.65}
.ticks li::before{content:"";width:14px;height:14px;margin-top:.35rem;border-radius:4px;border:1.5px solid var(--accent);background:rgba(225,68,42,.1)}
.ticks strong{color:var(--ink);font-weight:600}

/* Compare table */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:520px}
table.cmp caption{text-align:left;padding:1rem 1.25rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);border-bottom:1px solid var(--line);background:var(--paper-2)}
table.cmp th,table.cmp td{padding:.9rem 1.25rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp thead th{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
table.cmp tbody th{font-weight:600;width:26%}
table.cmp td{color:var(--body)}
table.cmp td:last-child{color:var(--ink);font-weight:500}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
@media(max-width:640px){
  table.cmp{min-width:0;display:block;width:100%}
  table.cmp caption,table.cmp tbody{display:block;width:100%}
  table.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  table.cmp tbody th,table.cmp tbody td{display:block;padding:.6rem 1.1rem;border-bottom:0;width:auto}
  table.cmp tbody th{width:auto;padding-top:1.1rem;font-size:1rem}
  table.cmp tbody td::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:.2rem}
  table.cmp tbody tr{display:block;border-bottom:1px solid var(--line)}
  table.cmp tbody tr:last-child{border-bottom:0}
}

/* Fit: yes / no */
.fit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.fit > div{border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;display:grid;gap:1rem;align-content:start}
.fit > div.no{background:var(--paper-2)}
.fit h3{font-size:1rem;letter-spacing:-.015em}
.fit ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem}
.fit li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;font-size:1rem;color:var(--body);line-height:1.6}
.fit li::before{content:"";width:12px;height:12px;margin-top:.35rem;border-radius:3px;border:1.5px solid var(--accent);background:rgba(225,68,42,.12)}
.fit > div.no li::before{border-color:var(--ink-4);background:transparent}
@media(max-width:640px){.fit{grid-template-columns:minmax(0,1fr)}}

/* Steps */
.steps{margin:0;padding:0;list-style:none;counter-reset:s;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);font-size:.8125rem;color:var(--ink-4)}
.steps h3{font-size:1.0625rem;letter-spacing:-.02em;margin-bottom:.15rem}
.steps .when{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.6rem}
.steps p{margin:0;font-size:1rem;color:var(--body);line-height:1.65;max-width:64ch}
.steps .chips{margin-top:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{display:inline-flex;align-items:center;min-height:30px;padding:0 .7rem;border:1px solid var(--line);border-radius:var(--r-pill);font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dark .chip{border-color:var(--night-line);color:var(--on-night-3)}

/* Deliverables */
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.dgrid > div{border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;display:grid;gap:.5rem;align-content:start}
.dgrid .num{font-family:var(--mono);font-size:.6875rem;color:var(--accent);letter-spacing:.1em}
.dgrid h3{font-size:1rem;letter-spacing:-.015em}
.dgrid p{margin:0;font-size:.9375rem;color:var(--body);line-height:1.6}
@media(max-width:700px){.dgrid{grid-template-columns:minmax(0,1fr)}}

/* Card grid: services / industries / posts */
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media(max-width:900px){.cgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:600px){.cgrid{grid-template-columns:minmax(0,1fr)}}
/* Two-up variant for sample bands. Was an inline style, which bypassed every
   media query and stayed 2-column at 320px. */
.cgrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:520px){.cgrid-2{grid-template-columns:minmax(0,1fr)}}
.ccard{border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;display:grid;gap:.6rem;align-content:start;background:var(--paper);transition:border-color .25s var(--ease),transform .25s var(--ease)}
.ccard:has(a:hover),.ccard:has(a:focus-visible){border-color:var(--ink);transform:translateY(-3px)}
.ccard .num{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--accent)}
.ccard h3{font-size:1.0625rem;letter-spacing:-.02em}
.ccard h3 a{display:block}
.ccard p{margin:0;font-size:.9375rem;color:var(--body);line-height:1.6}
.dark .ccard{background:var(--night-2);border-color:var(--night-line)}
.dark .ccard:has(a:hover){border-color:#fff}

/* Pricing */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
@media(max-width:900px){.pgrid{grid-template-columns:minmax(0,1fr)}}
.pcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;display:grid;gap:1.1rem;align-content:start;background:var(--paper)}
.pcard.hi{border-color:var(--ink);border-width:2px;background:var(--paper)}
.pcard .tier{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pcard .amt{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:700;letter-spacing:-.035em;line-height:1}
.pcard .amt small{font-size:.8125rem;font-weight:500;color:var(--ink-3);letter-spacing:0}
.pcard > p{margin:0;font-size:1rem;color:var(--body);line-height:1.6}
.pcard .btn{width:100%}

/* Long-form prose */
.prose{max-width:70ch}
.prose > *{margin:0 0 1.15rem}
.prose h2{font-size:clamp(1.3rem,2.6vw,1.85rem);letter-spacing:-.025em;margin:2.5rem 0 1rem}
.prose h3{font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.02em;margin:2rem 0 .75rem}
.prose h4{font-size:1.0625rem;letter-spacing:-.015em;margin:1.5rem 0 .5rem}
.prose p,.prose li{font-size:1.0625rem;line-height:1.7;color:var(--ink-2)}
.prose ul,.prose ol{padding-left:1.4rem;display:grid;gap:.5rem}
.prose ul ul,.prose ol ol{margin:.5rem 0 0}
.prose blockquote{margin:2rem 0;padding:.25rem 0 .25rem 1.5rem;border-left:2.5px solid var(--accent)}
.prose blockquote p{font-size:clamp(1.1rem,2vw,1.3rem);font-weight:500;letter-spacing:-.02em;line-height:1.5;color:var(--ink)}
.prose blockquote cite{display:block;margin-top:.6rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-style:normal}
.prose pre{background:var(--night);color:#E8E8E8;padding:1.25rem;border-radius:var(--r);overflow-x:auto;font-family:var(--mono);font-size:.875rem;line-height:1.6}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--paper-3);padding:.15em .4em;border-radius:4px}
.prose pre code{background:none;padding:0}
.prose figure{margin:2rem 0}
.prose figure image-slot{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--paper-3);border:1px solid var(--line)}
.prose figcaption{margin-top:.6rem;font-size:.9375rem;color:var(--body);line-height:1.55}
.prose a{border-bottom:1.5px solid var(--accent);font-weight:500}
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem;margin:1.75rem 0}
.prose th,.prose td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* Post meta */
.pmeta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;font-size:.9375rem;color:var(--body);padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:1.5rem}
.pmeta b{color:var(--ink);font-weight:600}

/* Blog grid */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
@media(max-width:900px){.bgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:600px){.bgrid{grid-template-columns:minmax(0,1fr)}}
.bcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;background:var(--paper);transition:border-color .25s var(--ease)}
.bcard:has(a:hover){border-color:var(--ink)}
.bcard .shot{width:100%;aspect-ratio:16/9;background:var(--paper-3);border-bottom:1px solid var(--line);overflow:hidden}
.bcard image-slot{width:100%;height:100%;display:block}
.bcard .bbody{padding:1.35rem;display:grid;gap:.55rem;align-content:start;flex:1}
.bcard h3{font-size:1.0625rem;letter-spacing:-.02em;line-height:1.3}
.bcard p{margin:0;font-size:.9375rem;color:var(--body);line-height:1.6}
.bcard .num{margin-top:auto;padding-top:.5rem}
.bcard.feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.bcard.feat .shot{aspect-ratio:auto;height:100%;border-bottom:0;border-right:1px solid var(--line)}
.bcard.feat .bbody{padding:clamp(1.5rem,3vw,2.5rem)}
.bcard.feat h3{font-size:clamp(1.25rem,2.4vw,1.7rem)}
.bcard.feat p{font-size:1rem}
@media(max-width:900px){.bcard.feat{grid-template-columns:minmax(0,1fr)}.bcard.feat .shot{aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line)}}

/* Team */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
@media(max-width:800px){.tgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:520px){.tgrid{grid-template-columns:minmax(0,1fr)}}
.tcard{display:grid;gap:.85rem}
.tcard .shot{width:100%;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--paper-3);border:1px solid var(--line)}
.tcard image-slot{width:100%;height:100%;display:block}
.tcard h3{font-size:1.0625rem;letter-spacing:-.02em}
.tcard .role{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.tcard p{margin:0;font-size:.9375rem;color:var(--body);line-height:1.6}

/* Metric display (case study) */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,minmax(0,1fr)));gap:1rem}
.mgrid > div{border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;display:grid;gap:.4rem;align-content:start}
.mgrid b{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;letter-spacing:-.04em;line-height:1;overflow-wrap:anywhere}
.mgrid span{font-size:.875rem;color:var(--body);line-height:1.5}
.dark .mgrid > div{border-color:var(--night-line);background:var(--night-2)}

/* Layer stack */
.stack{display:grid;gap:.4rem}
.stack a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem;padding:1.35rem 1.5rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);min-height:56px;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.stack a:hover{border-color:var(--ink);transform:translateX(4px)}
.stack .n{font-family:var(--mono);font-size:.75rem;color:var(--ink-4)}
.stack .nm{font-size:clamp(1.05rem,2vw,1.3rem);font-weight:700;letter-spacing:-.025em}
.stack .nm em{font-style:normal;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-left:.85rem}
.stack .th{font-size:.9375rem;color:var(--body);text-align:right}
.dark .stack a{background:var(--night-2);border-color:var(--night-line)}
.dark .stack a:hover{border-color:#fff}
@media(max-width:720px){.stack a{grid-template-columns:auto minmax(0,1fr)}.stack .th{grid-column:2;text-align:left;padding-top:.25rem}}

/* Layer detail */
.layer{padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line)}
.layer-hd{display:flex;gap:1rem;align-items:baseline;margin-bottom:.5rem}
.layer .theme{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1rem}
.layer .q{font-size:clamp(1.05rem,1.9vw,1.3rem);font-weight:500;letter-spacing:-.02em;max-width:48ch;margin:0 0 1.5rem}
.lg2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem)}
@media(max-width:800px){.lg2{grid-template-columns:minmax(0,1fr);gap:1.5rem}}
.lg2 h4{font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:0 0 .85rem}
.lg2 p{margin:0 0 .85rem;font-size:1rem;color:var(--body);line-height:1.7}
.lg2 ul{margin:0 0 1rem;padding:0;list-style:none;display:grid;gap:.5rem}
.lg2 ul li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;font-size:1rem;color:var(--body);line-height:1.6}
.lg2 ul li::before{content:"";width:5px;height:5px;margin-top:.6rem;border-radius:2px;background:var(--accent)}

/* Contact split */
.cwrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:860px){.cwrap{grid-template-columns:minmax(0,1fr)}}
.cinfo{display:grid;gap:1.5rem}
.cinfo > div{display:grid;gap:.3rem}
.cinfo h4{font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:0}
.cinfo p,.cinfo a{margin:0;font-size:1rem;color:var(--ink-2)}
.formbox{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.5rem);background:var(--paper-2)}
.f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.85rem}
@media(max-width:520px){.f2{grid-template-columns:minmax(0,1fr)}}

/* ── Author & reviewer bios ── */
.bios{display:grid;gap:1rem;margin-top:2.5rem}
.bio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;background:var(--paper);align-items:start}
.bio .por{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--paper-3);border:1px solid var(--line);flex-shrink:0}
.bio .por image-slot{width:100%;height:100%;display:block}
.bio .role{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.3rem}
.bio h3{font-size:1.0625rem;letter-spacing:-.02em;margin-bottom:.5rem}
.bio p{margin:0 0 .75rem;font-size:1rem;color:var(--body);line-height:1.7;max-width:62ch}
.bio p:last-child{margin-bottom:0}
.bio .creds{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.bio .links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.85rem}
.bio .links a{display:inline-flex;align-items:center;min-height:40px;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--accent)}
.bio.rev{background:var(--paper-2)}
@media(max-width:560px){.bio{grid-template-columns:minmax(0,1fr)}.bio .por{width:64px;height:64px}}

/* ══════════ MOBILE HARDENING ══════════
   Type floors and touch targets. Nothing is hidden or removed at any width. */

/* 1. Micro-label floor. 11px mono was the smallest type on the site; 12px is
   the readable floor on a phone without changing the editorial character. */
:root{--micro:.6875rem}
@media(max-width:1080px){:root{--micro:.75rem}}
.eyebrow,.num,.pill,.chip,.ph,.crumb,.facts h4,.facts dt,.rail h4,.lg2 h4,.ft-grid h4,
.fields label,.steps .when,.stack .n,.stack .nm em,.layer .theme,.bio .role,.bio .links a,
.grp-cols h4,.grp-btn em,.callout cite,.prose blockquote cite,.prose th,
table.cmp caption,table.cmp thead th,.pcard .tier,.dgrid .num,.tcard .role,.wcard .kpi,
.mrq-i.todo,.prose figcaption{font-size:var(--micro)}
@media(max-width:1080px){
  /* Never below 16px for running copy on a phone. This block previously pinned
     these to 15px, which would now undo the base-size increase. */
  .small,.steps p,.fit li,.lg2 p,.bio p,.acc .body p,.acc .body ul,.pcard > p{font-size:1rem}
  .bcard p,.ccard p,.ncard p,.quad p,.wcard p,.dgrid p,.tcard p,.stack .th,.rail a,.pmeta,.fig figcaption,.prose figcaption{font-size:.9375rem}
  .stats span,.mgrid span{font-size:.875rem}
}

/* 2. Touch targets. Applied to standalone UI links only, inline links inside
   running prose keep their natural line height so text flow is unaffected. */
@media(max-width:1080px),(pointer:coarse){
  .ft-grid a,.rail a,.crumb a,.bio .links a,.grp-cols a,.ovl-ft .socials a,
  .cinfo a,.slist a,.stack a,.tlink,.mrq-i{min-height:44px}
  .ft-grid a,.crumb a,.bio .links a,.ovl-ft .socials a{display:inline-flex;align-items:center}
  .rail a,.grp-cols a{display:flex;align-items:center}
  .mrq-i{display:inline-flex;align-items:center}
  .logo{min-height:48px}
  .ft-grid ul{display:grid}
  .crumb{gap:.25rem .6rem}
  .acc summary{min-height:56px}
  .pmeta{gap:.6rem 1.25rem}
}

/* 3. Container alignment at the narrow end */
@media(max-width:430px){
  .phead .d1,.hero .d1{max-width:none}
  .facts dl > div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .facts dd{text-align:left;font-weight:600}
  .stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem}
  .mgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .quad > div,.pcard,.ncard,.ccard,.bio{padding:1.25rem}
  .steps li{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .steps li::before{margin-bottom:-.25rem}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .hero .btn-row,.phead .btn-row{align-items:stretch}
}
@media(max-width:360px){
  .stats,.mgrid{grid-template-columns:minmax(0,1fr)}
}

/* 4. Safe-area insets on notched devices */
.ovl-in,.hdr-in{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}

/* 5. Short viewport: sticky furniture must not eat the screen */
@media(max-height:520px){.hdr{position:static}.rail{position:static}}

/* Nav panel "view all" links */
.grp-all{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid currentColor}
.grp-all:hover{color:var(--ink)}
/* Registered mark: decorative, but never below the legibility floor */
.logo sup{font-size:.55em;top:-.65em}
@media(max-width:1080px){.logo sup{font-size:.6em}}
.ft-grid .logo sup{font-size:.55em}

/* Inline prose links inside body copy */
.ilink{border-bottom:1.5px solid var(--accent);font-weight:600}
.ilink:hover{color:var(--accent)}

/* Work cards: the whole card is the tap target, not the 21px heading link */
.wcard{position:relative}
.wcard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.wcard:has(a:hover) .shot,.wcard:has(a:focus-visible) .shot{border-color:var(--ink)}
.wcard .shot{transition:border-color .25s var(--ease)}

/* Footer legal + inline footer links */
.ft-btm{align-items:center}
.ft-btm span{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}
.ft-btm a{display:inline-flex;align-items:center;min-height:44px;padding:0 .15rem;color:var(--on-night-3)}
.ft-btm a:hover{color:#fff}
.ovl-ft .cont a{display:inline-flex;align-items:center;min-height:44px}

/* Footer logo mark: em-relative sizing put it under the legibility floor */
.ft-grid .logo sup{font-size:.5em;top:-.7em}
@media(max-width:1080px){.logo sup{font-size:.62em}.ft-grid .logo sup{font-size:.58em}}

/* Footer brand: .ft-grid a was overriding .logo, shrinking the wordmark and its mark */
.ft-grid .logo{font-size:1.3rem;font-weight:800;letter-spacing:-.045em;min-height:48px;color:#fff}
.ft-grid .logo sup{font-size:.5em;top:-.7em}

/* Registered mark never below the 12px floor, whatever the logo context */
.logo sup,.ft-grid .logo sup,.ovl-top .logo sup{font-size:max(12px,.5em);top:-.7em}

/* Two-class .num overrides that outranked the type floor */
.ccard .num,.bcard .num,.dgrid .num,.stack .n,.wcard .kpi,.steps li::before,.rail a::before{font-size:var(--micro)}

/* Long-form tables: keep every cell in the DOM, wrap rather than overflow */
.prose table{table-layout:fixed;width:100%}
.prose th,.prose td{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:560px){.prose th,.prose td{padding:.6rem .5rem;font-size:.875rem}}

/* Buttons must be able to shrink and wrap inside a narrow flex row */
.btn{min-width:0;max-width:100%;text-align:center;white-space:normal;line-height:1.25;padding-top:.75rem;padding-bottom:.75rem;height:auto}
.btn-row{min-width:0}

/* Contact-column headings and standalone links */
.cinfo h4{font-size:var(--micro)}
.cinfo .ilink,.cinfo p > a{display:inline-flex;align-items:center;min-height:44px}

/* Standalone reference line in the layer detail column */
.lg2 p > .ilink{display:inline-flex;align-items:center;min-height:44px}

/* Footer is a dark band without the .dark class, so the button inversion
   never matched and both CTAs rendered near-black on near-black. */
.ft .tlink{color:#fff}
.ft .tlink:hover{color:var(--accent)}

/* Publication gate: makes an unconfirmed case study look unfinished */
.gate{border:2px dashed var(--accent);background:rgba(225,68,42,.06);border-radius:var(--r);padding:1.5rem;display:grid;gap:.75rem;margin-bottom:2rem}
.gate-hd{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.gate-hd::before{content:"!";width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;flex-shrink:0;font-size:11px}
.gate p{margin:0;font-size:1rem;color:var(--body);line-height:1.65}
.gate ul{margin:0;padding-left:1.1rem;display:grid;gap:.4rem;font-size:1rem;color:var(--body);line-height:1.6}

/* Chevron affordances drawn in CSS, not typed as arrow characters */
.slist a i{width:9px;height:9px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(-45deg);display:inline-block}
.tlink::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);flex-shrink:0;transition:transform .25s var(--ease)}
.tlink:hover::after{transform:rotate(-45deg) translate(2px,2px)}
.grp-all::after{content:"";width:6px;height:6px;margin-left:.5rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
/* Pill marker, previously a diamond glyph */
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* Strip separator, previously a star glyph */
.strip span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* Skip link: offscreen until focused, then a real visible control */
.skip{position:absolute;left:-9999px;top:0;z-index:200;display:inline-flex;align-items:center;min-height:48px;padding:0 1.25rem;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:.9375rem;font-weight:600;border:2px solid var(--accent);text-decoration:none}
.skip:focus,.skip:focus-visible{left:1rem;top:1rem;outline:3px solid var(--accent);outline-offset:3px;color:#fff}

/* ── Case covers: designed graphic tiles, one motif per engagement ── */
.cov{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper-2);display:grid;grid-template-rows:1fr auto;padding:1.1rem;isolation:isolate}
.cov::before{content:"";position:absolute;inset:0 0 64px 0;z-index:0}
.cov .mk{position:relative;z-index:2;align-self:start;justify-self:start;font-family:var(--mono);font-size:var(--micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cov .wm{position:relative;z-index:2;font-size:clamp(1.1rem,2.4vw,1.45rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.cov .sub{position:relative;z-index:2;font-family:var(--mono);font-size:var(--micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-top:.35rem}
.wcard:hover .cov::before{transform:scale(1.04)}
.cov::before{transition:transform .5s var(--ease)}

/* Dark variant for rhythm across the grid */
.cov.d{background:var(--night);border-color:var(--night-line)}
.cov.d .wm{color:#fff}
.cov.d .mk{color:#7E7E7E}
.cov.d .sub{color:#5E5E5E}

/* 01 ascending bars: growth programme */
.cov.m1::before{background:
 linear-gradient(to top,var(--accent) 22%,transparent 22%) 8% 100%/7% 34% no-repeat,
 linear-gradient(to top,var(--ink) 45%,transparent 45%) 22% 100%/7% 52% no-repeat,
 linear-gradient(to top,var(--accent) 62%,transparent 62%) 36% 100%/7% 68% no-repeat,
 linear-gradient(to top,var(--ink) 78%,transparent 78%) 50% 100%/7% 84% no-repeat,
 linear-gradient(to top,var(--accent) 92%,transparent 92%) 64% 100%/7% 96% no-repeat;
 opacity:.9}
/* 02 contested grid: competitive category */
.cov.m2::before{background:
 repeating-linear-gradient(90deg,var(--night-line) 0 1px,transparent 1px 13%),
 repeating-linear-gradient(0deg,var(--night-line) 0 1px,transparent 1px 22%);opacity:.85}
.cov.m2::after{content:"";position:absolute;z-index:1;width:26%;aspect-ratio:1;border-radius:50%;background:var(--accent);right:14%;top:26%;filter:blur(1px)}
/* 03 concentric reach: visibility build from a low base */
.cov.m3::before{background:
 radial-gradient(circle at 18% 82%,transparent 0 14%,var(--line) 14% calc(14% + 1px),transparent calc(14% + 1px) 30%,var(--line) 30% calc(30% + 1px),transparent calc(30% + 1px) 46%,var(--line) 46% calc(46% + 1px),transparent calc(46% + 1px) 64%,var(--line) 64% calc(64% + 1px),transparent calc(64% + 1px))}
.cov.m3::after{content:"";position:absolute;z-index:1;left:18%;bottom:18%;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translate(-50%,50%)}
/* 04 node graph: earned link acquisition */
.cov.m4::before{background:
 radial-gradient(circle at 22% 30%,var(--accent) 0 4px,transparent 4px),
 radial-gradient(circle at 62% 20%,#fff 0 3px,transparent 3px),
 radial-gradient(circle at 80% 46%,#fff 0 3px,transparent 3px),
 radial-gradient(circle at 44% 58%,#fff 0 3px,transparent 3px),
 radial-gradient(circle at 70% 74%,var(--accent) 0 4px,transparent 4px),
 radial-gradient(circle at 28% 76%,#fff 0 3px,transparent 3px),
 linear-gradient(148deg,transparent 49.7%,#333 49.7% 50.1%,transparent 50.1%),
 linear-gradient(28deg,transparent 49.8%,#2C2C2C 49.8% 50.1%,transparent 50.1%)}
/* 05 comparison columns: vs architecture */
.cov.m5::before{background:
 linear-gradient(var(--line),var(--line)) 0 30%/100% 1px no-repeat,
 linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat,
 linear-gradient(var(--line),var(--line)) 0 70%/100% 1px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 62% 0/1px 100% no-repeat,
 linear-gradient(var(--line),var(--line)) 34% 0/1px 100% no-repeat}
.cov.m5::after{content:"";position:absolute;z-index:1;right:12%;top:22%;width:14%;aspect-ratio:1;background:var(--accent);border-radius:3px}
/* 06 stacked spec rules: specification content */
.cov.m6::before{background:
 repeating-linear-gradient(0deg,#242424 0 1px,transparent 1px 11%);opacity:.95}
.cov.m6::after{content:"";position:absolute;z-index:1;left:12%;top:30%;width:34%;height:8px;border-radius:2px;background:var(--accent);box-shadow:0 26px 0 rgba(255,255,255,.85),0 52px 0 rgba(255,255,255,.35)}
@media(prefers-reduced-motion:reduce){.wcard:hover .cov::before{transform:none}}

/* Label band: motifs are inset above it, and a scrim guarantees legibility
   even if a future motif uses ::after (which is not inset). */
.cov > div:last-child{position:relative;z-index:2}
.cov > div:last-child::before{content:"";position:absolute;z-index:-1;left:-1.1rem;right:-1.1rem;top:-.7rem;bottom:-1.1rem;background:linear-gradient(transparent,var(--paper-2) 30%)}
.cov.d > div:last-child::before{background:linear-gradient(transparent,var(--night) 30%)}
/* Sub-label contrast: was 2.56:1 light / 3.04:1 dark */
.cov .sub{color:var(--ink-3)}
.cov.d .sub{color:#8F8F8F}
/* Keep ::after motifs clear of the band */
.cov.m3::after{bottom:auto;top:52%}
.cov.m6::after{top:20%}

.byline{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .85rem;margin-top:.35rem}
.byline b{font-size:1.0625rem;font-weight:700;letter-spacing:-.02em}
.byline span{font-family:var(--mono);font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
figure.shot{margin:0}
figure.shot figcaption{position:absolute;left:-9999px}
.tcard .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}


/* ── Mobile density ── */
@media(max-width:700px){
  .band{padding:2.75rem 0}
  .band-tight{padding:2rem 0}
  .split{gap:1.5rem}
  .stk{gap:.9rem}
  .sec-hd,.hgrid{gap:1rem}
  .acc summary{padding:.9rem .25rem}
  .acc .body{padding-bottom:1.1rem}
  .wgrid,.cgrid,.bgrid,.tgrid,.ncards{gap:.85rem}
  .hero{padding:2rem 0 1.5rem}
  .mrq{padding:1.1rem 0}
  .ft{padding:2.5rem 0 calc(1.5rem + env(safe-area-inset-bottom))}
  .ft-cta{padding-bottom:1.75rem}
  .ft-grid{padding:1.75rem 0;gap:1.25rem}
  .blk{margin-bottom:2rem}
}

/* ── Case study: evidence figures ── */
.fig{margin:1.75rem 0;display:grid;gap:.75rem}
.fig img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);display:block}
.fig figcaption{font-size:.9375rem;color:var(--body);line-height:1.6;max-width:70ch}
.srcnote{margin-top:2rem;padding:1.25rem;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);background:var(--paper-2)}
.srcnote p{margin:0;font-size:.9375rem;color:var(--ink-2);line-height:1.6}
.srcnote strong{color:var(--ink)}
@media(max-width:560px){.fig{margin:1.25rem 0}}

/* Case-study cover art: the .wcard image-slot rule no longer matches now that
   these are plain <img>. Authored 800x600, container is 4/3, so no crop. */
.wcard .shot img{width:100%;height:100%;object-fit:cover;display:block}

/* Whole-card hit areas. .wcard already had this; .ccard and .bcard did not, so
   their only tap target was an 18-25px heading link. Verified sitewide that all
   135 .ccard/.bcard instances contain exactly one <a>, so a stretched overlay
   cannot swallow a sibling link. Any future variant with a second link needs a
   different approach. */
.ccard,.bcard{position:relative}
.ccard h3 a::after,.bcard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.ccard:has(a:focus-visible),.bcard:has(a:focus-visible){border-color:var(--accent)}

/* Homepage shows three case studies; the hub shows the full set. */
.wgrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.wgrid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wgrid-3{grid-template-columns:minmax(0,1fr)}}



/* Defensive containment: long unbroken strings (URLs, emails, IDs) must wrap
   rather than force the page wide. Applies to authored and future content. */
.prose a,.prose li,.prose p,.prose td,.prose th,.bio p,.acc .body p,.small,.lede,
.facts dd,.callout p,.fig figcaption,.srcnote p{overflow-wrap:break-word}
.prose pre{overflow-x:auto;max-width:100%}
img,svg,video,iframe,table{max-width:100%}

/* ══════════ SECONDARY HUES, APPLIED BY MEANING ══════════
   Each hue carries one meaning across the whole site, so colour is a wayfinding
   signal rather than decoration. Nothing relies on colour alone: every case
   below also carries a number, a label, or a border. */

/* 1. The five layers. The stack is the site's core idea, so it gets the ramp:
      Identity through Integrity, bottom to top. Number stays as the fallback. */
.ncards .ncard:nth-child(1),.stack a:nth-last-child(1){--lh:var(--h-indigo)}
.ncards .ncard:nth-child(2),.stack a:nth-last-child(2){--lh:var(--h-cobalt)}
.ncards .ncard:nth-child(3),.stack a:nth-last-child(3){--lh:var(--h-azure)}
.ncards .ncard:nth-child(4),.stack a:nth-last-child(4){--lh:var(--h-teal)}
.ncards .ncard:nth-child(5),.stack a:nth-last-child(5){--lh:var(--h-green)}
.ncard{border-top:3px solid var(--lh,var(--line))}
.ncard .num{color:var(--lh,var(--ink-4))}
.dark .ncards .ncard:nth-child(1){--lh:var(--h-indigo-d)}
.dark .ncards .ncard:nth-child(2){--lh:var(--h-cobalt-d)}
.dark .ncards .ncard:nth-child(3){--lh:var(--h-azure-d)}
.dark .ncards .ncard:nth-child(4){--lh:var(--h-teal-d)}
.dark .ncards .ncard:nth-child(5){--lh:var(--h-green-d)}
/* .dark .ncard{border-color:--night-line} (0,2,0) outranks the bare .ncard
   rule, so the ramp colour has to be restated at matching specificity here or
   all five top borders collapse to near-invisible grey. */
.dark .ncards .ncard{border-top-color:var(--lh)}
.stack .n{color:var(--lh,var(--ink-4))}
.stack a{border-left:3px solid var(--lh,var(--line))}
.stack a:hover{border-left-color:var(--lh,var(--ink))}
.layer .theme{color:var(--lh,var(--accent))}
.layer:nth-of-type(1){--lh:var(--h-indigo)}.layer:nth-of-type(2){--lh:var(--h-cobalt)}
.layer:nth-of-type(3){--lh:var(--h-azure)}.layer:nth-of-type(4){--lh:var(--h-teal)}
.layer:nth-of-type(5){--lh:var(--h-green)}
.layer-hd .num{color:var(--lh,var(--ink-4))}

/* 2. Missing figures read amber, because amber means "not yet supplied".
      Previously grey, which made a gap look like ordinary small print. */
.ph{color:var(--h-amber);background:var(--h-amber-bg);border-color:var(--h-amber-line)}
.dark .ph{color:var(--h-amber-d);background:var(--night-2);border-color:var(--night-line-2)}

/* 3. Confirmed, client-signed figures read green. The counterpart to amber. */
.srcnote{border-left-color:var(--h-green);background:var(--h-green-bg)}
.mgrid .when{color:var(--h-green)}
.dark .mgrid .when{color:var(--h-green-d)}

/* 4. Measured data reads teal: case-study metrics and figure captions. */
.mgrid b{color:var(--ink)}
.fig figcaption::before{content:"";display:inline-block;width:20px;height:2px;background:var(--h-teal);vertical-align:middle;margin-right:.5rem}


/* ══════════ ACCENT, USED MORE ══════════
   Cobalt now marks structure, not just hover: section numbers, index rails,
   the eyebrow rule, KPI lines, active nav, and the primary CTA. Each use is a
   recurring signal a reader can learn, rather than a one-off highlight. */

/* Section eyebrows: the number leads in cobalt, the label stays quiet. */
.eyebrow{color:var(--ink-3)}
/* Every section-opening eyebrow carries the mark. Stated as an opt-OUT rather
   than a list of wrappers: enumerating parents meant each new context silently
   lost the mark (the statement band and the lead form both did). The overlay
   nav's label is the one place it does not belong. */
.eyebrow{display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);flex-shrink:0}
.ovl-ft .eyebrow{display:block}
.ovl-ft .eyebrow::before{content:none}
.dark .eyebrow{color:var(--on-night-3)}
.dark .eyebrow::before{background:var(--h-cobalt-d)}

/* Primary CTA is cobalt rather than ink, so the main action reads at a glance. */
.btn{background:var(--accent);border-color:var(--accent)}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.dark .btn,.ft .btn{background:var(--accent);border-color:var(--accent);color:#fff}
.dark .btn:hover,.ft .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.dark .btn-ghost,.ft .btn-ghost{background:transparent;color:#fff;border-color:var(--night-line-2)}
.dark .btn-ghost:hover,.ft .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* Index rail: cobalt marks position instead of a grey tick. */
.rail a{border-left:2px solid var(--line);padding-left:.7rem}
.rail a:hover{border-left-color:var(--accent);color:var(--accent)}
.rail h4{color:var(--accent)}

/* Service and content lists: cobalt numerals and chevrons. */
.slist a span.num{color:var(--accent)}
.slist a:hover{color:var(--accent)}
.dark .slist a span.num{color:var(--h-cobalt-d)}

/* KPI and metric labels. */
.wcard .kpi{color:var(--accent)}
.mgrid > div{border-top:2px solid var(--accent)}
.stats > div{border-top:2px solid var(--accent)}

/* Nav: current page and group headings. */
.ovl-nav > li > a[aria-current="page"]{color:var(--accent)}
.grp-cols h4{color:var(--accent);border-bottom-color:var(--accent)}
.grp[data-open] > .grp-btn{color:var(--accent)}

/* Pull quotes and callouts. */
.callout{border-left:3px solid var(--accent)}
.quote blockquote::before{content:"";display:block;width:32px;height:3px;background:var(--accent);margin:0 auto 1.25rem}

/* Deliverable numerals and process steps. */
.deliv-i .n,.steps .when{color:var(--accent)}
.dark .deliv-i .n,.dark .steps .when{color:var(--h-cobalt-d)}

/* Footer headings. */
.ft-grid h4{color:var(--h-cobalt-d)}

/* ── Overlay nav on phones ── */
@media(max-width:700px){
  .ovl-top{min-height:64px}
  .ovl-body{padding:1.25rem 0}
  .ovl-nav > li > a,.ovl-nav > li > .grp-btn{padding:.45rem 0;min-height:52px}
  .grp-cols{gap:1.25rem;padding:.35rem 0 1.5rem}
  .grp-cols > li{gap:0}
  .grp-cols h4{margin-bottom:.35rem;padding-bottom:.4rem}
  .grp-cols a{min-height:46px;font-size:1rem;line-height:1.25}
  .grp-flat{gap:0}
  .ovl-ft{padding-top:1.25rem}
}
@media(max-width:380px){
  .ovl-nav > li > a,.ovl-nav > li > .grp-btn{font-size:1.2rem}
  .grp-cols a{font-size:.9375rem}
}