/* ============================================================================
   Byrdie AI — design system (vanilla port)
   Source of truth: Claude Design project "Byrdie AI Design System"
   (tokens/*.css + components/*). Paper and ink, warm gray, teal as an accent
   only, square corners, hairlines not shadows, inversion as the only section
   transition. Display: Bricolage Grotesque · Text: Archivo · Mono: IBM Plex Mono.
   No build step. Every class here maps 1:1 to a system component (see the
   spec in docs/superpowers/specs/2026-09-12-*.md) so learn/bizplan can port it.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ---------------------------------------------------------------- tokens */
:root {
  /* Ink (near-black, faintly green) */
  --ink-1000:#000000; --ink-900:#080c0b; --ink-800:#14191a; --ink-700:#22282a;
  /* Warm gray ramp — never blue-gray */
  --gray-600:#6b6862; --gray-500:#8d8981; --gray-400:#b3aea4; --gray-300:#d5d0c6;
  --gray-200:#e8e3da; --gray-100:#f2efe9; --gray-050:#f8f6f2; --paper:#ffffff;
  /* Brand teal (sampled from the mark) — accent only, never a field */
  --teal-700:#046b6e; --teal-600:#058b8f; --teal-500:#07a9ad; --teal-400:#3ec2c5; --teal-200:#a9e5e6; --teal-050:#e6f6f6;
  /* Sand */
  --sand-500:#c8b89c; --sand-300:#e3d9c6; --sand-100:#f4efe4;
  /* Status */
  --status-live:#07a9ad; --status-beta:#c8b89c; --status-building:#6b6862;
  --danger-500:#c1392b; --warn-500:#c98a1e; --ok-500:#3f8f5f;

  /* Semantic aliases (paper) */
  --surface-page:var(--paper); --surface-raised:var(--paper); --surface-sunken:var(--gray-050);
  --surface-muted:var(--gray-100); --surface-warm:var(--sand-100); --surface-card:var(--paper); --surface-accent:var(--teal-050);
  --text-strong:var(--ink-900); --text-body:var(--ink-800); --text-muted:var(--gray-600); --text-faint:var(--gray-400);
  --text-accent:var(--teal-600);
  --line-hairline:var(--gray-200); --line-strong:var(--ink-900); --line-invert:#2b3132; --line-accent:var(--teal-500);
  --action-fill:var(--ink-900); --action-fill-hover:var(--ink-700); --action-text:var(--paper); --focus-ring:var(--teal-500);
  --glass-nav:rgba(255,255,255,.82);

  /* Type */
  --font-display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --font-text:"Archivo",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700; --w-black:800;
  --type-mega:clamp(3.75rem,13vw,13.5rem);
  --type-display-1:clamp(3rem,8.5vw,8rem);
  --type-display-2:clamp(2.25rem,5.5vw,5rem);
  --type-display-3:clamp(1.75rem,3.4vw,3rem);
  --type-lead:clamp(1.125rem,1.6vw,1.5rem);
  --type-body:1.0625rem; --type-body-sm:0.9375rem; --type-caption:0.8125rem;
  --type-label:0.75rem; --type-label-sm:0.6875rem;
  --lh-mega:0.86; --lh-display:0.94; --lh-heading:1.08; --lh-lead:1.35; --lh-body:1.55; --lh-label:1.2;
  --track-mega:-0.045em; --track-display:-0.03em; --track-heading:-0.02em; --track-label:0.14em; --track-label-wide:0.22em;

  /* Space */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:40px; --space-8:56px; --space-9:72px; --space-10:96px; --space-11:128px; --space-12:180px;
  --section-y-sm:6vh; --section-y:9vh; --section-y-lg:12vh; --section-y-xl:17vh;
  --gutter:clamp(20px,5vw,88px); --measure-max:1560px; --measure-text:62ch; --measure-lead:44ch; --grid-gap:clamp(16px,2vw,32px);

  /* Radius — square system; pills only */
  --radius-none:0px; --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px;

  /* Elevation — hairlines, not shadows */
  --shadow-focus:0 0 0 2px var(--paper),0 0 0 4px var(--focus-ring);
  --shadow-overlay:0 12px 40px rgba(8,12,11,.14),0 2px 6px rgba(8,12,11,.08);
  --scrim-bottom:linear-gradient(to top,rgba(8,12,11,.78) 0%,rgba(8,12,11,.35) 45%,transparent 100%);
  --scrim-tall:linear-gradient(to top,rgba(8,12,11,.88) 0%,rgba(8,12,11,.82) 34%,rgba(8,12,11,.62) 52%,rgba(8,12,11,.18) 78%,transparent 100%);
  --blur-nav:saturate(140%) blur(18px);

  /* Motion — clip, travel, settle. Nothing bounces. */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:160ms; --dur-base:280ms; --dur-slow:620ms; --dur-cinematic:1100ms; --stagger:60ms;
  --travel-sm:8px; --travel-lg:clamp(24px,5vh,48px);
}
@media (prefers-reduced-motion:reduce) {
  :root { --dur-fast:1ms; --dur-base:1ms; --dur-slow:1ms; --dur-cinematic:1ms; --stagger:0ms; --travel-sm:0px; --travel-lg:0px; }
}

/* Inversion scope: drop .invert on any band and every alias flips. */
.invert {
  --surface-page:var(--ink-900); --surface-raised:var(--ink-800); --surface-sunken:var(--ink-1000);
  --surface-muted:var(--ink-800); --surface-warm:var(--ink-800); --surface-card:var(--ink-800); --surface-accent:var(--teal-700);
  --text-strong:var(--paper); --text-body:var(--gray-100); --text-muted:var(--gray-400); --text-faint:var(--gray-600);
  --text-accent:var(--teal-400);
  --line-hairline:var(--line-invert); --line-strong:var(--paper);
  --action-fill:var(--paper); --action-text:var(--ink-900); --action-fill-hover:var(--gray-200);
  --glass-nav:rgba(8,12,11,.72);
  color:var(--text-body); background:var(--surface-page);
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body {
  margin:0; font-family:var(--font-text); font-size:var(--type-body); line-height:var(--lh-body);
  color:var(--text-body); background:var(--surface-page); -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--w-bold); letter-spacing:var(--track-display); line-height:var(--lh-display); margin:0; color:var(--text-strong); text-wrap:balance; }
p { margin:0; }
img,video,svg { max-width:100%; display:block; }
a { color:var(--text-strong); text-decoration:none; border-bottom:1px solid var(--line-hairline); transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out); }
a:hover { color:var(--text-accent); border-color:var(--line-accent); }
a.plain,.b-nav a,.b-foot a,.b-btn,.b-index-row,.b-insight,.b-media a,.b-row-link,a.b-cell { border-bottom:0; }
button { font:inherit; color:inherit; }
:focus-visible { outline:none; box-shadow:var(--shadow-focus); }
::selection { background:var(--teal-200); color:var(--ink-900); }
.skip { position:absolute; left:-999px; top:8px; z-index:100; background:var(--ink-900); color:var(--paper); padding:10px 16px; font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; border:0; }
.skip:focus { left:16px; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; min-width:0 !important; padding:0 !important; margin:-1px !important; border:0 !important; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ------------------------------------------------------------- utilities */
.b-shell { max-width:var(--measure-max); margin-inline:auto; padding-inline:var(--gutter); }
.b-label { font-family:var(--font-mono); font-size:var(--type-label); font-weight:var(--w-medium); letter-spacing:var(--track-label); text-transform:uppercase; line-height:var(--lh-label); color:var(--text-muted); }
.b-label.wide { letter-spacing:var(--track-label-wide); }
.b-label.accent { color:var(--text-accent); }
.b-label.strong { color:var(--text-strong); }
.b-label-sm { font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); }
.b-mono { font-family:var(--font-mono); }
.b-lead { font-size:var(--type-lead); line-height:var(--lh-lead); color:var(--text-muted); max-width:var(--measure-lead); }
.b-lead.body { color:var(--text-body); }
.b-text { font-size:var(--type-body); line-height:var(--lh-body); color:var(--text-body); max-width:var(--measure-text); }
.b-small { font-size:var(--type-body-sm); color:var(--text-muted); }
.b-caption { font-size:var(--type-caption); color:var(--text-muted); }
.b-rule { height:1px; background:var(--line-hairline); border:0; margin:0; }
.b-muted { color:var(--text-muted); }
.b-strong { color:var(--text-strong); }
.b-accent { color:var(--text-accent); }
.b-center { text-align:center; }
.b-col-center { display:flex; flex-direction:column; align-items:center; text-align:center; }
.b-actions { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.b-actions.center { justify-content:center; }
.b-split { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--space-5); }
.b-stack > * + * { margin-top:var(--space-5); }
.mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .mt-5{margin-top:var(--space-5)} .mt-6{margin-top:var(--space-6)}
.mt-7{margin-top:var(--space-7)} .mt-8{margin-top:var(--space-8)} .mt-9{margin-top:var(--space-9)} .mt-10{margin-top:var(--space-10)} .mt-11{margin-top:var(--space-11)}
.mt-sec{margin-top:var(--section-y-sm)}
.max-lead{max-width:var(--measure-lead)} .max-text{max-width:var(--measure-text)} .max-46{max-width:46ch} .max-54{max-width:54ch} .max-62{max-width:62ch}
.hide-mobile { display:initial; }

/* --------------------------------------------------------------- section */
.b-section { position:relative; --sy:var(--section-y); padding-top:var(--sy); padding-bottom:var(--sy); background:var(--surface-page); }
.b-section.sm { --sy:var(--section-y-sm); }
.b-section.lg { --sy:var(--section-y-lg); }
.b-section.xl { --sy:var(--section-y-xl); }
.b-section.none { --sy:0px; }
/* Two sections in a row share one gap: the second halves its top. A tinted band
   (sunken/warm) stays symmetric and its neighbours halve the side facing it instead. */
.b-section + .b-section { padding-top:calc(var(--sy) * .5); }
.b-section.sunken, .b-section.warm { padding-top:var(--sy); }
.b-section:has(+ .b-section.sunken), .b-section:has(+ .b-section.warm),
.b-section.sunken:has(+ .b-section), .b-section.warm:has(+ .b-section) { padding-bottom:calc(var(--sy) * .5); }
.b-section.sunken { background:var(--surface-sunken); }
.b-section.warm { background:var(--surface-warm); }
.b-section.hero { padding-top:12vh; padding-bottom:7vh; }
.b-section.page-top { padding-top:10vh; }
.b-section > .b-shell { position:relative; }

/* Bridge — the join between paper and ink. */
/* --p is scroll progress (0 entering the viewport, 1 leaving it), set by js/byrdie.js.
   The fade band starts low and climbs the bridge as you scroll; the ink block widens.
   No JS or reduced motion holds the midpoint (--p:.5). */
.b-bridge { position:relative; height:14vh; overflow:hidden; background:var(--paper); --p:.5; --g0:calc(72% - var(--p) * 54%); --g1:calc(100% - var(--p) * 34%); }
.b-bridge::before { content:""; position:absolute; top:0; bottom:0; right:0; width:calc(36% + var(--p) * 18%); background:var(--ink-900); }
.b-bridge::after { content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:linear-gradient(to bottom,transparent var(--g0),var(--ink-900) var(--g1)); }
.b-bridge.left::before { right:auto; left:0; }
.b-bridge.up { background:var(--ink-900); }
.b-bridge.up::before { background:var(--paper); }
.b-bridge.up::after { background:linear-gradient(to bottom,transparent var(--g0),var(--paper) var(--g1)); }
.b-bridge.merge::before { display:none; }
.b-bridge.merge::after { background:linear-gradient(to bottom,var(--paper) calc(var(--g0) - 40%),var(--ink-900) var(--g1)); }
.b-bridge.merge.up::after { background:linear-gradient(to bottom,var(--ink-900) calc(var(--g0) - 40%),var(--paper) var(--g1)); }
.b-bridge .b-label { position:absolute; left:var(--gutter); top:50%; transform:translateY(-50%); z-index:1; color:var(--gray-600); letter-spacing:var(--track-label-wide); }
.b-bridge.up .b-label { color:var(--gray-400); }

/* Scroll thread — one per page, first child of <body> after the skip link. */
.b-thread { position:fixed; left:50%; top:0; height:100vh; width:1px; transform:translateX(-50%); pointer-events:none; z-index:5; mix-blend-mode:difference; }
.b-thread i { position:absolute; left:0; top:2vh; height:96vh; width:1px; background:#3a3a3a; }
.b-thread b { position:absolute; left:0; top:2vh; height:96vh; width:1px; background:#fff; transform:scaleY(0); transform-origin:top; transition:transform 120ms linear; }
.b-thread s { position:absolute; left:50%; top:calc(2vh - 2px); width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#fff; transition:transform 120ms linear; text-decoration:none; }
@media (max-width:760px) { .b-thread { display:none; } }

/* ------------------------------------------------------------------- nav */
.b-nav { position:sticky; top:0; z-index:40; -webkit-backdrop-filter:var(--blur-nav); backdrop-filter:var(--blur-nav); background:var(--glass-nav); border-bottom:1px solid var(--line-hairline); }
.b-nav .b-shell { height:72px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
.b-lockup { display:inline-flex; align-items:center; gap:9px; color:var(--text-strong); }
.b-lockup img { width:26px; height:27px; object-fit:contain; }
.invert .b-lockup img, .b-nav.invert .b-lockup img { filter:invert(1); }
.b-lockup span { font-family:var(--font-display); font-weight:var(--w-bold); font-size:16px; letter-spacing:-0.02em; text-transform:uppercase; line-height:1; }
.b-lockup span i { font-style:normal; color:var(--text-faint); }
.b-nav nav { display:flex; align-items:center; gap:var(--space-6); margin-left:auto; }
.b-nav nav a { font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.b-nav nav a:hover, .b-nav nav a[aria-current="page"] { color:var(--text-strong); }
.b-nav nav a.b-btn { color:var(--action-text); }
.b-nav-toggle { display:none; appearance:none; background:none; border:0; padding:8px; margin:-8px; cursor:pointer; width:40px; height:40px; flex-direction:column; justify-content:center; gap:5px; }
.b-nav-toggle span { display:block; height:1px; background:var(--text-strong); transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast); }
@media (max-width:1100px) {
  .b-nav nav { position:fixed; inset:72px 0 0 0; background:var(--surface-page); flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0; padding:var(--space-6) var(--gutter); margin:0; display:none; border-top:1px solid var(--line-hairline); overflow:auto; }
  .b-nav.open nav { display:flex; }
  .b-nav nav a { font-size:var(--type-body); letter-spacing:var(--track-label); padding:var(--space-4) 0; border-top:1px solid var(--line-hairline); width:100%; }
  .b-nav nav a:first-child { border-top:0; }
  .b-nav nav a.b-btn { margin-top:var(--space-5); width:auto; border-top:0; font-size:var(--type-body-sm); }
  .b-nav-toggle { display:flex; }
  .b-nav.open .b-nav-toggle span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .b-nav.open .b-nav-toggle span:nth-child(2) { opacity:0; }
  .b-nav.open .b-nav-toggle span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
}

/* ---------------------------------------------------------------- footer */
.b-foot { border-top:1px solid var(--line-hairline); padding-top:var(--space-10); padding-bottom:var(--space-7); }
.b-foot-grid { display:grid; grid-template-columns:minmax(220px,1.4fr) repeat(auto-fit,minmax(140px,1fr)); gap:var(--space-9) var(--space-8); align-items:start; }
.b-foot-tag { margin-top:var(--space-4); font-size:var(--type-body-sm); color:var(--text-muted); max-width:32ch; }
.b-foot-col { display:flex; flex-direction:column; gap:var(--space-3); }
.b-foot-col h5 { margin:0 0 var(--space-1); font-family:var(--font-mono); font-size:var(--type-label-sm); font-weight:var(--w-medium); letter-spacing:var(--track-label-wide); text-transform:uppercase; color:var(--text-muted); }
.b-foot-col a { font-size:var(--type-body-sm); color:var(--text-body); }
.b-foot-col a:hover { color:var(--text-accent); }
.b-foot-bottom { margin-top:var(--space-10); padding-top:var(--space-5); border-top:1px solid var(--line-hairline); display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); }

/* --------------------------------------------------------------- buttons */
.b-btn { font-family:var(--font-text); font-weight:var(--w-medium); font-size:var(--type-body-sm); letter-spacing:0.01em; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:12px 22px; border:1px solid var(--action-fill); background:var(--action-fill); color:var(--action-text); border-radius:var(--radius-none); cursor:pointer; white-space:nowrap; text-decoration:none; transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out); }
.b-btn:hover { background:var(--action-fill-hover); border-color:var(--action-fill-hover); color:var(--action-text); }
.b-btn.secondary { background:transparent; color:var(--text-strong); border-color:var(--line-strong); }
.b-btn.secondary:hover { background:var(--action-fill); color:var(--action-text); border-color:var(--action-fill); }
.b-btn.ghost { background:transparent; color:var(--text-strong); border-color:transparent; padding-left:0; padding-right:0; }
.b-btn.ghost:hover { background:transparent; color:var(--text-accent); border-color:transparent; }
.b-btn.accent { background:var(--teal-500); border-color:var(--teal-500); color:var(--paper); }
.b-btn.accent:hover { background:var(--teal-600); border-color:var(--teal-600); }
.b-btn.pill { border-radius:var(--radius-pill); }
.b-btn.sm { font-size:var(--type-caption); padding:8px 16px; }
.b-btn.lg { font-size:var(--type-body); padding:17px 32px; }
.b-btn.full { width:100%; }
.b-btn[disabled], .b-btn.disabled { opacity:.38; pointer-events:none; }
.b-btn .ar { font-size:.9em; display:inline-block; transition:transform var(--dur-base) var(--ease-out); }
.b-btn:hover .ar { transform:translate(3px,-3px); }
.b-btn:hover .ar.down { transform:translateY(3px); }
.b-btn:hover .ar.left { transform:translateX(-3px); }
.b-btn.on { background:var(--action-fill); color:var(--action-text); border-color:var(--action-fill); }

/* ------------------------------------------------------- tags · status */
.b-tag { display:inline-flex; align-items:center; line-height:1.1; white-space:nowrap; font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; padding:6px 13px; border-radius:var(--radius-pill); background:transparent; color:var(--text-muted); border:1px solid var(--line-hairline); }
.b-tag.sm { font-size:var(--type-label-sm); padding:4px 9px; }
.b-tag.solid { background:var(--ink-900); color:var(--paper); border-color:var(--ink-900); }
.invert .b-tag.solid { background:var(--paper); color:var(--ink-900); border-color:var(--paper); }
.b-tag.accent { background:var(--surface-accent); color:var(--text-accent); border-color:var(--line-accent); }
.b-tag.sand { background:var(--sand-100); color:var(--gray-600); border-color:var(--sand-300); }
.b-tags { display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }
.b-status { display:inline-flex; align-items:center; gap:var(--space-2); white-space:nowrap; font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); }
.b-status::after { content:"●"; color:var(--status-live); font-size:.9em; }
.b-status[data-status="beta"]::after { content:"○"; color:var(--status-beta); }
.b-status[data-status="building"]::after, .b-status[data-status="experiment"]::after { content:"→"; color:var(--status-building); }
.b-status[data-status="past"]::after { content:"→"; color:var(--status-building); }
.b-status[data-status="live-now"]::after { content:"●"; color:var(--danger-500); }

/* -------------------------------------------------- statement · reveal */
/* Margin reset lives in :where() so the .mt-* utilities can set a top margin. */
:where(.b-statement) { margin:0; }
.b-statement { font-family:var(--font-display); font-weight:var(--w-bold); color:var(--text-strong); text-transform:uppercase; text-wrap:balance; font-size:var(--type-display-1); line-height:var(--lh-display); letter-spacing:var(--track-display); }
.b-statement.mega { font-size:var(--type-mega); line-height:var(--lh-mega); letter-spacing:var(--track-mega); }
.b-statement.s2 { font-size:var(--type-display-2); }
.b-statement.s3 { font-size:var(--type-display-3); line-height:var(--lh-heading); letter-spacing:var(--track-heading); }
.b-statement.sentence { text-transform:none; }
.b-statement.muted { color:var(--text-muted); }
.b-statement.accent { color:var(--text-accent); }
.b-statement.center { text-align:center; }
.b-line { display:block; overflow:hidden; padding-top:.14em; margin-top:-.14em; }
.b-line > span { display:block; }
@keyframes byrdieClipUp { from { transform:translateY(105%); } to { transform:translateY(0); } }
@keyframes byrdieWordUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes byrdieUncover { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes byrdieFadeUp { from { opacity:0; transform:translateY(var(--travel-sm)); } to { opacity:1; transform:none; } }
@keyframes byrdieRiseUp { from { opacity:0; transform:translateY(var(--travel-lg)); } to { opacity:1; transform:none; } }
/* JS-only: hidden until .in is set by the observer; no-JS renders visible. */
.js [data-reveal] .b-line > span { transform:translateY(105%); }
.js [data-reveal].in .b-line > span { animation:byrdieClipUp var(--dur-slow) var(--ease-out) both; }
.js [data-reveal].in .b-line:nth-child(2) > span { animation-delay:calc(var(--stagger) * 1); }
.js [data-reveal].in .b-line:nth-child(3) > span { animation-delay:calc(var(--stagger) * 2); }
.js [data-reveal].in .b-line:nth-child(4) > span { animation-delay:calc(var(--stagger) * 3); }
.js [data-reveal="fade"] { opacity:0; transform:translateY(var(--travel-sm)); }
.js [data-reveal="fade"].in { animation:byrdieFadeUp var(--dur-slow) var(--ease-out) both; }
.js [data-reveal="rise"] { opacity:0; transform:translateY(var(--travel-lg)); }
.js [data-reveal="rise"].in { animation:byrdieRiseUp var(--dur-cinematic) var(--ease-out) both; animation-delay:calc(var(--stagger) * 2 * var(--d,0)); }
.js [data-reveal="media"] .b-media-well { clip-path:inset(0 0 100% 0); }
.js [data-reveal="media"].in .b-media-well { animation:byrdieUncover var(--dur-cinematic) var(--ease-out) both; }
.b-cycle { display:inline-block; overflow:hidden; vertical-align:bottom; padding-top:.14em; margin-top:-.14em; }
.b-cycle > span { display:inline-block; animation:byrdieWordUp var(--dur-slow) var(--ease-out) both; }
.b-cycle.accent > span { color:var(--text-accent); }

/* ------------------------------------------------------------- media */
.b-media { margin:0; width:100%; }
.b-media-well { position:relative; overflow:hidden; background:var(--surface-muted); aspect-ratio:16 / 9; }
.b-media[data-ratio="21/9"] .b-media-well { aspect-ratio:21 / 9; }
.b-media[data-ratio="16/10"] .b-media-well { aspect-ratio:16 / 10; }
.b-media[data-ratio="4/3"] .b-media-well { aspect-ratio:4 / 3; }
.b-media[data-ratio="3/2"] .b-media-well { aspect-ratio:3 / 2; }
.b-media[data-ratio="4/5"] .b-media-well { aspect-ratio:4 / 5; }
.b-media[data-ratio="3/4"] .b-media-well { aspect-ratio:3 / 4; }
.b-media[data-ratio="1/1"] .b-media-well { aspect-ratio:1 / 1; }
.b-media[data-ratio="9/16"] .b-media-well { aspect-ratio:9 / 16; }
.b-media img, .b-media video, .b-media iframe { width:100%; height:100%; object-fit:cover; display:block; border:0; }
.b-media img { transition:transform var(--dur-cinematic) var(--ease-out); }
.b-media.interactive:hover img { transform:scale(1.03); }
.b-media .placeholder { position:absolute; inset:0; display:grid; place-items:center; border:1px solid var(--line-hairline); font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); text-align:center; padding:var(--space-5); }
.b-media .scrim { position:absolute; inset:0; background:var(--scrim-bottom); pointer-events:none; }
.b-media .scrim.tall { background:var(--scrim-tall); }
.b-media figcaption { margin-top:var(--space-3); font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); }
.b-media .overlay { position:absolute; left:0; right:0; bottom:0; padding:var(--space-8) var(--gutter); color:var(--paper); }
.b-media .overlay .b-label { color:var(--paper); }
.b-media .overlay .b-statement { color:var(--paper); }
.b-play { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.b-play span { width:56px; height:56px; border-radius:var(--radius-pill); background:rgba(8,12,11,.72); color:var(--paper); display:grid; place-items:center; font-size:15px; }
.b-play.lg span { width:82px; height:82px; font-size:22px; }
.b-duration { position:absolute; right:8px; bottom:8px; background:var(--ink-900); color:var(--paper); font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); padding:3px 7px; }

/* -------------------------------------------------------- index row */
.b-index-row { display:block; width:100%; text-align:left; appearance:none; background:none; border:0; border-top:1px solid var(--line-hairline); padding:var(--space-7) 0 var(--space-8); color:inherit; text-decoration:none; }
.b-index-row > * { transition:transform var(--dur-base) var(--ease-out); }
.b-index-row.link { cursor:pointer; }
.b-index-row.link:hover > * { transform:translateX(var(--space-4)); }
.b-index-row .head { display:flex; width:100%; justify-content:space-between; align-items:baseline; gap:var(--space-5); margin-bottom:var(--space-5); font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; }
.b-index-row .head .t { color:var(--text-strong); }
.b-index-row .head .t i { font-style:normal; color:var(--text-muted); }
.b-index-row .head .n { color:var(--text-muted); }
.b-index-row .st { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--type-display-2); line-height:var(--lh-display); letter-spacing:var(--track-display); color:var(--text-strong); max-width:18ch; text-wrap:balance; }
.b-index-row .meta { margin-top:var(--space-4); font-size:var(--type-body-sm); color:var(--text-muted); max-width:var(--measure-lead); }
.b-index-row .body { margin-top:var(--space-7); }
.b-index-row.compact { padding:var(--space-5) 0; }
.b-index-row.compact .head { margin-bottom:0; }
.b-index-list { border-bottom:1px solid var(--line-hairline); }

/* ------------------------------------------------------- insight row */
.b-insight { display:grid; grid-template-columns:1fr auto; gap:var(--space-6); align-items:center; width:100%; text-align:left; appearance:none; background:none; border:0; border-top:1px solid var(--line-hairline); padding:var(--space-6) 0; cursor:pointer; color:inherit; text-decoration:none; }
.b-insight .txt { display:flex; flex-direction:column; gap:var(--space-3); transition:transform var(--dur-base) var(--ease-out); }
.b-insight:hover .txt { transform:translateX(var(--space-3)); }
.b-insight .ti { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--type-display-3); line-height:var(--lh-heading); letter-spacing:var(--track-heading); color:var(--text-strong); transition:color var(--dur-base) var(--ease-out); }
.b-insight:hover .ti { color:var(--text-accent); }
.b-insight .sf { font-size:var(--type-body-sm); color:var(--text-muted); max-width:54ch; }
.b-insight .th { width:112px; height:74px; overflow:hidden; background:var(--surface-muted); flex:0 0 auto; display:grid; place-items:center; font-family:var(--font-mono); font-size:9px; letter-spacing:var(--track-label); color:var(--text-muted); }
.b-insight .th img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.b-insight:hover .th img { transform:scale(1.06); }
.b-insight-list { border-bottom:1px solid var(--line-hairline); }

/* ---------------------------------------------------- capability block */
.b-cap { display:flex; flex-direction:column; gap:var(--space-4); border-top:1px solid var(--line-hairline); padding-top:var(--space-5); }
.b-cap.strong { border-top-color:var(--line-strong); }
.b-cap .ix { font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); color:var(--text-muted); }
.b-cap .ix.accent { color:var(--text-accent); }
.b-cap h3 { font-family:var(--font-display); font-weight:var(--w-semibold); font-size:var(--type-display-3); line-height:var(--lh-heading); letter-spacing:var(--track-heading); color:var(--text-strong); margin:0; }
.b-cap h3.caps { text-transform:uppercase; font-weight:var(--w-bold); }
.b-cap p { font-size:var(--type-body-sm); line-height:var(--lh-body); color:var(--text-muted); max-width:42ch; }
.b-cap ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.b-cap > .b-btn { align-self:flex-start; }
.b-cap ul li { font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-body); }

/* ----------------------------------------------------------------- grids */
.b-grid { display:grid; gap:var(--space-7) var(--grid-gap); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.b-grid.g2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.b-grid.g3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.b-grid.g4 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
/* Fixed column counts for sets that must not orphan (six modules → 3 + 3). */
.b-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.b-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:700px) { .b-grid.cols-2 { grid-template-columns:1fr; } }
@media (max-width:900px) { .b-grid.cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .b-grid.cols-3 { grid-template-columns:1fr; } }
.b-grid.tight { gap:var(--grid-gap); }
.b-grid.wide { gap:var(--space-9) var(--space-11); }
.b-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-9) var(--space-11); align-items:start; }
.b-two.wide-left { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.b-two.wide-right { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); }
.b-two.tight { gap:var(--grid-gap); }
@media (max-width:860px) { .b-two, .b-two.wide-left, .b-two.wide-right { grid-template-columns:minmax(0,1fr); gap:var(--space-8); } .b-flow .node small { white-space:normal; } }
/* Bordered cell grid (client walls, pillar grids) */
.b-cells { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--line-hairline); border-left:1px solid var(--line-hairline); }
.b-cells.wide { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.b-cells.logos { grid-template-columns:repeat(8,minmax(0,1fr)); }
@media (max-width:1100px) { .b-cells.logos { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:560px) { .b-cells.logos .b-cell { padding:var(--space-5) var(--space-3); } .b-cells.logos .b-cell img { max-width:100%; max-height:26px; } .b-cells.logos .wm { font-size:var(--type-label-sm); } }
.b-cell { border-right:1px solid var(--line-hairline); border-bottom:1px solid var(--line-hairline); padding:var(--space-7) var(--space-4); display:grid; place-items:center; text-align:center; color:inherit; }
.b-cell .wm { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--type-body-sm); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); }
.b-cell img { max-height:34px; width:auto; max-width:120px; object-fit:contain; opacity:.72; filter:grayscale(1); transition:opacity var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out); }
.b-cell:hover img { opacity:1; filter:none; }
.invert .b-cell img { filter:grayscale(1) invert(1); }
.b-cell.pillar { display:flex; flex-direction:column; align-items:stretch; text-align:left; gap:var(--space-5); padding:var(--space-6) var(--space-6) var(--space-7); place-items:initial; }
.b-cell.pillar .n { font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); color:var(--text-muted); }
.b-cell.pillar h3 { font-family:var(--font-display); font-weight:var(--w-bold); font-size:clamp(1.5rem,2vw,2rem); line-height:var(--lh-heading); letter-spacing:var(--track-heading); margin:0; overflow-wrap:anywhere; }
.b-cell.pillar .line { font-family:var(--font-display); font-weight:var(--w-semibold); font-size:var(--type-body); color:var(--text-strong); }
.b-cell.pillar p { font-size:var(--type-body-sm); line-height:var(--lh-body); color:var(--text-muted); flex:1; }
/* Stats */
.b-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-7) var(--grid-gap); border-top:1px solid var(--line-strong); padding-top:var(--space-6); }
.b-stats .n { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--type-display-2); line-height:1; letter-spacing:var(--track-display); color:var(--text-strong); }
.b-stats .b-label { margin-top:var(--space-3); }
/* Numbered list rows (how we do it) */
.b-numlist > div { display:flex; gap:var(--space-5); border-top:1px solid var(--line-hairline); padding:var(--space-4) 0; align-items:baseline; }
.b-numlist > div .n { font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); color:var(--text-accent); flex:0 0 24px; }
.b-numlist > div span:last-child { font-size:var(--type-body); color:var(--text-body); }
/* Dash list */
.b-dashes { display:flex; flex-direction:column; gap:var(--space-4); }
.b-dashes > div { display:flex; gap:var(--space-4); border-top:1px solid var(--line-hairline); padding-top:var(--space-3); font-size:var(--type-body); color:var(--text-body); }
.b-dashes > div::before { content:"—"; color:var(--text-accent); flex:0 0 auto; }
/* Key/value facts */
.b-facts > div { display:flex; justify-content:space-between; gap:var(--space-4); border-top:1px solid var(--line-hairline); padding-top:var(--space-3); margin-top:var(--space-3); }
.b-facts > div:first-child { margin-top:0; }
.b-facts .k { font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); }
.b-facts .v { font-size:var(--type-body-sm); color:var(--text-body); text-align:right; }

/* ----------------------------------------------------------------- quote */
.b-quote { margin:0; display:flex; flex-direction:column; gap:var(--space-6); }
.b-quote .q { font-family:var(--font-display); font-size:3rem; line-height:.6; color:var(--text-faint); }
.b-quote blockquote { margin:0; font-family:var(--font-display); font-weight:var(--w-medium); font-size:var(--type-display-3); line-height:var(--lh-heading); letter-spacing:var(--track-heading); color:var(--text-strong); max-width:34ch; }
.b-quote figcaption { display:flex; align-items:center; gap:var(--space-3); font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); }
.b-quote figcaption .av { width:40px; height:40px; border-radius:var(--radius-pill); overflow:hidden; background:var(--surface-muted); flex:0 0 auto; }
.b-quote figcaption .av img { width:100%; height:100%; object-fit:cover; }

/* ------------------------------------------------------------ price card */
.b-price { position:relative; display:flex; flex-direction:column; gap:var(--space-5); padding:var(--space-7) var(--space-6) var(--space-6); border:1px solid var(--line-hairline); background:var(--surface-card); }
.b-price.featured { border-color:var(--ink-900); }
.b-price .flag { position:absolute; top:-11px; left:var(--space-6); background:var(--teal-500); color:var(--paper); font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); text-transform:uppercase; padding:3px 10px; }
.b-price .name { font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); }
.b-price .amt { display:block; margin-top:var(--space-2); font-family:var(--font-display); font-weight:var(--w-bold); font-size:clamp(2.25rem,4vw,3.25rem); line-height:1; letter-spacing:var(--track-display); color:var(--text-strong); }
.b-price .per { display:block; margin-top:var(--space-2); font-size:var(--type-caption); color:var(--text-muted); }
.b-price .blurb { font-size:var(--type-body-sm); color:var(--text-muted); }
.b-price ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); flex:1; }
.b-price ul li { display:flex; gap:var(--space-3); font-size:var(--type-body-sm); color:var(--text-body); line-height:1.45; }
.b-price ul li::before { content:"—"; color:var(--teal-500); flex:0 0 auto; }

/* ------------------------------------------------------------- accordion */
.b-acc > div { border-top:1px solid var(--line-hairline); }
.b-acc > div:last-child { border-bottom:1px solid var(--line-hairline); }
.b-acc button { appearance:none; background:none; border:0; width:100%; display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-5); text-align:left; padding:var(--space-5) 0; cursor:pointer; font-family:var(--font-display); font-weight:var(--w-semibold); font-size:var(--type-lead); line-height:var(--lh-heading); letter-spacing:var(--track-heading); color:var(--text-strong); }
.b-acc button::after { content:"+"; font-family:var(--font-mono); font-size:var(--type-body); color:var(--text-muted); flex:0 0 auto; transition:transform var(--dur-base) var(--ease-out); }
.b-acc button[aria-expanded="true"]::after { transform:rotate(45deg); }
.b-acc .panel { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--dur-slow) var(--ease-out),opacity var(--dur-base) var(--ease-out); }
.b-acc .panel > div { overflow:hidden; min-height:0; }
.b-acc .panel.open { grid-template-rows:1fr; opacity:1; }
.b-acc .panel p { font-size:var(--type-body-sm); color:var(--text-muted); max-width:var(--measure-text); padding-bottom:var(--space-6); }

/* --------------------------------------------------------------- callout */
.b-callout { display:flex; flex-direction:column; gap:var(--space-2); background:var(--surface-sunken); border-top:2px solid var(--line-hairline); padding:var(--space-5); color:var(--text-body); }
.b-callout.accent { background:var(--surface-accent); border-top-color:var(--line-accent); }
.b-callout.warn { background:var(--sand-100); border-top-color:var(--sand-300); }
.invert .b-callout.warn { background:var(--ink-800); border-top-color:var(--sand-500); }
.b-callout .b-label-sm { display:block; }
.b-callout div { font-size:var(--type-body-sm); line-height:var(--lh-body); max-width:var(--measure-text); }

/* ----------------------------------------------------------------- forms */
.b-field { display:flex; flex-direction:column; gap:var(--space-2); width:100%; }
.b-field > span { font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); }
.b-field input, .b-field textarea, .b-field select { font-family:var(--font-text); font-size:var(--type-body); color:var(--text-strong); background:transparent; border:1px solid var(--line-hairline); border-bottom:1px solid var(--line-strong); border-radius:0; padding:13px 14px; width:100%; outline:none; transition:border-color var(--dur-fast) var(--ease-out); }
.b-field textarea { resize:vertical; line-height:var(--lh-body); }
.b-field.underline input, .b-field.underline textarea, .b-field.underline select { border:0; border-bottom:1px solid var(--line-strong); padding:10px 0; }
.b-field select { appearance:none; padding-right:38px; cursor:pointer; }
.b-field .sel { position:relative; }
.b-field .sel::after { content:"▾"; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; font-size:.75rem; }
.b-field.underline .sel::after { right:0; }
.b-field input:focus, .b-field textarea:focus, .b-field select:focus { border-color:var(--teal-500); box-shadow:none; }
.b-field .hint { font-size:var(--type-caption); color:var(--text-muted); }
.b-field.error input, .b-field.error textarea { border-color:var(--danger-500); }
.b-check { display:flex; align-items:flex-start; gap:var(--space-3); cursor:pointer; font-size:var(--type-body-sm); color:var(--text-body); }
.b-check input { appearance:none; width:18px; height:18px; flex:0 0 auto; margin:2px 0 0; border:1px solid var(--gray-400); background:transparent; border-radius:0; cursor:pointer; transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); }
.b-check input:checked { background:var(--ink-900); border-color:var(--ink-900); }
.invert .b-check input:checked { background:var(--paper); border-color:var(--paper); }
.b-check input[type="radio"] { border-radius:var(--radius-pill); }
.b-form { display:flex; flex-direction:column; gap:var(--space-5); }
.b-form-steps { display:flex; flex-direction:column; gap:var(--space-7); }
.b-step { display:grid; grid-template-columns:32px minmax(0,1fr); gap:var(--space-4); align-items:end; }
.b-step > .n { font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); color:var(--text-accent); padding-bottom:var(--space-3); }
.b-step.top { align-items:start; }
.b-step.top > .n { padding-bottom:0; }
.b-step-indent { padding-left:calc(32px + var(--space-4)); }
@media (max-width:560px) { .b-step { grid-template-columns:1fr; gap:var(--space-2); } .b-step > .n { padding-bottom:0; } .b-step-indent { padding-left:0; } }

/* ------------------------------------------------------- chips · tabs */
.b-chips { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.b-chip { position:relative; appearance:none; cursor:pointer; background:transparent; color:var(--text-muted); border:1px solid var(--line-hairline); border-radius:var(--radius-pill); padding:6px 14px; font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out); }
.b-chip:hover { color:var(--text-strong); border-color:var(--line-strong); }
.b-chip.on, .b-chip[aria-pressed="true"] { background:var(--action-fill); color:var(--action-text); border-color:var(--action-fill); }
.b-tabs { display:flex; gap:var(--space-6); border-bottom:1px solid var(--line-hairline); flex-wrap:wrap; }
.b-tabs button { appearance:none; background:none; border:0; border-bottom:2px solid transparent; padding:0 0 var(--space-3); margin-bottom:-1px; cursor:pointer; font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; white-space:nowrap; color:var(--text-muted); transition:color var(--dur-base) var(--ease-out); }
.b-tabs button:hover { color:var(--text-strong); }
.b-tabs button[aria-selected="true"] { color:var(--text-strong); border-bottom-color:var(--line-strong); }
.b-tabpanel { padding-top:var(--space-7); }
.b-tabpanel[hidden] { display:none; }

/* ------------------------------------------------------- system flow */
.b-flow { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); font-family:var(--font-mono); text-align:left; }
.b-flow.center { align-items:center; text-align:center; }
.b-flow .node { display:flex; align-items:baseline; gap:var(--space-3); opacity:0; transform:translateY(var(--travel-sm)); transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out); }
.b-flow .node.on, .no-js .b-flow .node { opacity:1; transform:none; }
.b-flow .node b { font-weight:var(--w-medium); font-size:clamp(1rem,1.5vw,1.375rem); letter-spacing:var(--track-heading); text-transform:uppercase; color:var(--text-strong); transition:color var(--dur-base) var(--ease-out); }
.b-flow .node.hot b { color:var(--text-accent); }
.b-flow .node small { font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.b-flow .arrow { color:var(--text-faint); font-size:.9em; line-height:1; opacity:0; transition:color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); }
.b-flow .arrow.on, .no-js .b-flow .arrow { opacity:1; }
.b-flow .arrow.lit { color:var(--text-accent); transform:translateY(2px); }
.b-flow.lg { gap:var(--space-4); }
.b-flow.lg .node b { font-size:clamp(1.75rem,3.4vw,2.75rem); }
.b-flow.lg .arrow { font-size:1.1em; }
.b-flow.sm .node b { font-size:var(--type-body-sm); }
.b-flow.center .node { position:relative; justify-content:center; }
.b-flow.center .node small { position:absolute; left:100%; margin-left:var(--space-3); }

/* ------------------------------------------------------- ecosystem svg */
.b-eco { width:100%; height:auto; color:var(--text-strong); display:block; overflow:visible; }
.b-eco text { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; fill:currentColor; }
.b-eco .hub { font-size:15px; font-weight:600; }
.b-eco path { fill:none; stroke:currentColor; stroke-width:1; opacity:.28; stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset var(--dur-cinematic) var(--ease-out); }
.b-eco.on path, .no-js .b-eco path { stroke-dashoffset:0; }
.b-eco rect { fill:var(--surface-page); stroke:currentColor; stroke-width:1.5; }

/* ----------------------------------------------------------- word picker */
.b-picker { display:flex; flex-direction:column; }
.b-picker button { appearance:none; background:none; border:0; border-top:1px solid var(--line-hairline); text-align:left; cursor:pointer; padding:clamp(6px,1vh,14px) 0; font-family:var(--font-display); font-weight:var(--w-bold); font-size:clamp(2rem,6vw,5rem); line-height:1.02; letter-spacing:var(--track-display); text-transform:uppercase; color:var(--text-strong); opacity:1; transition:opacity var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out); }
.b-picker button:last-child { border-bottom:1px solid var(--line-hairline); }
.b-picker button.on { color:var(--text-accent); }
.b-picker:hover button:not(:hover), .b-picker.has-value:not(:hover) button:not(.on) { opacity:.26; }
.b-picker button:hover { transform:translateX(var(--space-4)); }

/* ----------------------------------------------------- service groups */
.b-group { border-top:1px solid var(--line-strong); }
.b-group-head { appearance:none; background:none; border:0; width:100%; text-align:left; cursor:pointer; padding:var(--space-7) 0 var(--space-5); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-5); align-items:baseline; color:inherit; }
.b-group-head .ttl { display:flex; align-items:baseline; gap:var(--space-5); }
.b-group-head .ttl .n { font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); color:var(--text-accent); }
.b-group-head .ttl h2, .b-group-head .ttl .h { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--type-display-2); line-height:var(--lh-display); letter-spacing:var(--track-display); text-transform:uppercase; color:var(--text-strong); }
.b-group-head .sub { display:block; margin-top:var(--space-3); font-size:var(--type-body); color:var(--text-muted); padding-left:calc(var(--space-5) + 26px); }
.b-group-head .cnt { font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); display:flex; gap:var(--space-4); align-items:center; padding-right:var(--space-2); }
.b-group-head .cnt i { font-style:normal; display:inline-block; transition:transform var(--dur-base) var(--ease-out); }
.b-group-head[aria-expanded="true"] .cnt i { transform:rotate(180deg); }
.b-group-body { padding-bottom:var(--space-7); padding-left:calc(var(--space-5) + 26px); }
.b-group-body[hidden] { display:none; }
.b-srow { appearance:none; background:none; border:0; border-top:1px solid var(--line-hairline); width:100%; text-align:left; cursor:pointer; padding:var(--space-5) 0; display:grid; grid-template-columns:minmax(0,22ch) minmax(0,1fr) auto; gap:var(--space-6); align-items:baseline; color:inherit; text-decoration:none; }
.b-srow > * { transition:transform var(--dur-base) var(--ease-out); }
.b-srow:hover > * { transform:translateX(var(--space-4)); }
.b-srow .nm { font-family:var(--font-display); font-weight:var(--w-semibold); font-size:var(--type-lead); line-height:var(--lh-heading); letter-spacing:var(--track-heading); color:var(--text-strong); }
.b-srow .ds { font-size:var(--type-body-sm); color:var(--text-muted); }
.b-srow .en { display:flex; gap:var(--space-3); align-items:center; color:var(--text-muted); font-size:var(--type-label); }
@media (max-width:760px) { .b-srow { grid-template-columns:1fr; gap:var(--space-2); } .b-group-body, .b-group-head .sub { padding-left:0; } .b-group-head .ttl { gap:var(--space-3); } }

/* ---------------------------------------------------------------- events */
.ev-row { border-top:1px solid var(--line-hairline); padding:var(--space-6) 0; display:grid; grid-template-columns:minmax(78px,auto) minmax(0,1fr) minmax(0,auto); gap:var(--space-6); align-items:center; }
.ev-date { display:flex; flex-direction:column; align-items:center; border:1px solid var(--line-strong); padding:var(--space-3) var(--space-4); min-width:78px; }
.ev-date .m { font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); color:var(--text-muted); text-transform:uppercase; }
.ev-date .d { font-family:var(--font-display); font-weight:var(--w-bold); font-size:30px; line-height:1; color:var(--text-strong); }
.ev-date .d.sm { font-size:15px; text-transform:uppercase; letter-spacing:.02em; padding-top:4px; }
.ev-main { display:flex; flex-direction:column; gap:var(--space-3); }
.ev-title { appearance:none; background:none; border:0; padding:0; text-align:left; cursor:pointer; font-family:var(--font-display); font-weight:var(--w-semibold); font-size:var(--type-display-3); line-height:var(--lh-heading); letter-spacing:var(--track-heading); color:var(--text-strong); text-decoration:none; transition:color var(--dur-base) var(--ease-out); }
.ev-title:hover { color:var(--text-accent); }
.ev-blurb { font-size:var(--type-body-sm); color:var(--text-muted); max-width:58ch; }
.ev-list { border-bottom:1px solid var(--line-hairline); }
.ev-empty { border-top:1px solid var(--line-hairline); padding-top:var(--space-6); font-size:var(--type-body-sm); color:var(--text-muted); }
@media (max-width:760px) { .ev-row { grid-template-columns:minmax(64px,auto) minmax(0,1fr); } .ev-row .b-btn { grid-column:2; justify-self:start; } }
.ev-rail { border:1px solid var(--line-hairline); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-5); position:sticky; top:96px; background:var(--surface-card); }
.ev-progress { height:2px; background:var(--line-hairline); }
.ev-progress b { display:block; height:2px; background:var(--teal-500); }
.ev-progress.full b { background:var(--gray-400); }
.lib-card { display:flex; flex-direction:column; gap:var(--space-4); }
.lib-card a.cover { position:relative; display:block; border:0; }
.lib-title { font-family:var(--font-display); font-weight:var(--w-semibold); font-size:var(--type-display-3); line-height:var(--lh-heading); letter-spacing:var(--track-heading); color:var(--text-strong); }
.lib-title:hover { color:var(--text-accent); }
.b-ws-row { border-top:1px solid var(--line-hairline); padding:var(--space-5) 0; display:flex; justify-content:space-between; align-items:center; gap:var(--space-5); }
.b-ws-row .n { font-size:var(--type-body); color:var(--text-strong); display:block; }
.b-transcript { margin:0; font-family:var(--font-mono); font-size:var(--type-body-sm); line-height:1.8; color:var(--text-body); white-space:pre-wrap; max-width:var(--measure-text); }
.b-qa > div { border-top:1px solid var(--line-hairline); padding:var(--space-5) 0; }
.b-qa .q { font-size:var(--type-body); font-weight:var(--w-semibold); color:var(--text-strong); }
.b-qa .a { margin-top:var(--space-2); font-size:var(--type-body-sm); line-height:var(--lh-body); color:var(--text-muted); }

/* Filtered items: display rules above outrank the UA [hidden] rule */
[data-filter-item][hidden], .ev-row[hidden], .lib-card[hidden], .b-tabpanel[hidden], .b-group-body[hidden] { display:none !important; }
.b-chip:focus-within { box-shadow:var(--shadow-focus); }
@media (max-width:760px) { .ev-hero[data-ratio] .b-media-well { aspect-ratio:4 / 5; } }
.b-media .overlay.shell { padding-inline:0; left:50%; transform:translateX(-50%); width:min(100%,var(--measure-max)); box-sizing:border-box; padding:var(--space-8) var(--gutter); }

/* ----------------------------------------------------------- closing */
.b-close h2 .b-line:last-child > span { transition:transform var(--dur-fast) var(--ease-out); }

/* ------------------------------------------------------------ responsive */
@media (max-width:760px) {
  .hide-mobile { display:none !important; }
  .b-section { padding-top:calc(var(--section-y) * .7); padding-bottom:calc(var(--section-y) * .7); }
  .b-section.hero { padding-top:10vh; padding-bottom:8vh; }
  .b-bridge { height:18vh; }
  .b-index-row .st { max-width:none; }
  .b-insight { grid-template-columns:1fr; }
  .b-insight .th { display:none; }
  .b-foot-grid { grid-template-columns:1fr 1fr; }
  .b-media .overlay { padding:var(--space-6) var(--gutter); }
}
@media (max-width:480px) { .b-foot-grid { grid-template-columns:1fr; } }
/* --------------------------------------------- service accordion (services) */
.b-sitem { scroll-margin-top:88px; }
.b-srow.acc .en i { font-style:normal; display:inline-block; font-family:var(--font-mono); font-size:var(--type-body); line-height:1; transition:transform var(--dur-base) var(--ease-out); }
.b-srow.acc[aria-expanded="true"] .en i { transform:rotate(45deg); }
.b-srow.acc[aria-expanded="true"] .nm { color:var(--text-accent); }
.b-spanel { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--dur-slow) var(--ease-out),opacity var(--dur-base) var(--ease-out); }
.b-spanel > div { overflow:hidden; min-height:0; }
.b-spanel.open { grid-template-rows:1fr; opacity:1; }
.b-spanel .in { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--space-7) var(--space-9); padding:var(--space-2) 0 var(--space-8); }
.b-spanel h4 { font-family:var(--font-mono); font-weight:var(--w-medium); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); line-height:var(--lh-label); margin:0 0 var(--space-4); }
.b-spanel p { font-size:var(--type-body); line-height:var(--lh-body); color:var(--text-body); max-width:54ch; }
.b-spanel p + p { margin-top:var(--space-4); }
.b-spanel p + h4, .b-spanel ul + h4 { margin-top:var(--space-6); }
.b-spanel ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.b-spanel li { position:relative; padding-left:var(--space-5); font-size:var(--type-body-sm); line-height:var(--lh-body); color:var(--text-muted); }
.b-spanel li::before { content:"\2014"; position:absolute; left:0; color:var(--text-accent); }
.b-spanel li b { font-weight:var(--w-medium); color:var(--text-strong); }
@media (max-width:860px) { .b-spanel .in { grid-template-columns:1fr; gap:var(--space-6); } }

/* ------------------------------------------------------ practice areas */
.b-cap .tags { flex-direction:row; flex-wrap:wrap; gap:var(--space-2) var(--space-4); }
.b-cap .tags li::before { content:"\2014\00a0"; color:var(--text-accent); }
.b-cap .b-actions { margin-top:var(--space-2); }
.b-cap.strong .b-actions .b-btn { align-self:auto; }

/* ---------------------------------------------------------- product grid */
.b-products { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line-hairline); border-left:1px solid var(--line-hairline); }
.b-products > * { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6) var(--space-5) var(--space-7); border-right:1px solid var(--line-hairline); border-bottom:1px solid var(--line-hairline); color:inherit; text-decoration:none; }
.b-products > a > * { transition:transform var(--dur-base) var(--ease-out); }
.b-products > a:hover > * { transform:translateX(var(--space-2)); }
.b-products .k { font-family:var(--font-mono); font-size:var(--type-label-sm); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted); display:flex; justify-content:space-between; gap:var(--space-3); align-items:baseline; }
.b-products h3 { font-family:var(--font-display); font-weight:var(--w-bold); font-size:clamp(1.375rem,1.8vw,1.75rem); line-height:var(--lh-heading); letter-spacing:var(--track-heading); margin:0; }
.b-products h3 i { font-style:normal; color:var(--text-faint); }
.b-products p { font-size:var(--type-body-sm); line-height:var(--lh-body); color:var(--text-muted); flex:1; }
.b-products .go { font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-strong); }
.b-products > a:hover .go { color:var(--text-accent); }
@media (max-width:1000px) { .b-products { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .b-products { grid-template-columns:1fr; } }

@media print { .b-nav, .b-thread, .b-foot { display:none; } }