/* SquirrelBrain — shared inner-page design system (matches the brain-gateway home) */
:root{
  --void:#030405; --bg:#050608; --bg2:#080A0D; --lift:#10151B; --panel:#0B0F12; --graphite:#161A20;
  --ink:#F5F7FA; --ink-pure:#FFFFFF; --copy:#C9D2DC; --mute:#7F8A99; --mute-deep:#54606E;
  --cyan:#39E6FF; --cyan-hot:#8FF4FF; --cyan-deep:#0C6E80;
  /* cyan-only law: neutralize the parent theme's champagne fallback (#C9A86A) */
  --sbc-champagne:var(--cyan); --wp--preset--color--champagne:var(--cyan);
  --ok:#3BE8A0; --warn:#FF6B6B;
  --line:rgba(245,247,250,.10); --line-soft:rgba(245,247,250,.055); --line-cyan:rgba(57,230,255,.22);
  --glass:rgba(5,6,8,.72);
  --ff-sans:"Space Grotesk", system-ui, -apple-system, sans-serif;
  --ff-mono:"IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1180px; --pad:clamp(20px,4vw,46px);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--copy); font-family:var(--ff-sans); line-height:1.6;
  font-size:1.0625rem; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(900px 600px at 80% -10%, rgba(57,230,255,.05), transparent 60%);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background:rgba(57,230,255,.25); color:#fff}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px}
.skip-link,.screen-reader-text{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* spam-trap field on the contact/quick-check forms (inc/forms.php sb_form_traps) — was only
   aria-hidden (invisible to screen readers, NOT to sighted visitors), so it rendered as a
   visible "Leave empty" box above the Name field. Off-screen, not display:none, so it still
   works as a honeypot. */
.sb-hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:fixed!important; left:14px; top:14px; width:auto; height:auto; clip:auto; padding:10px 16px; background:var(--cyan); color:#021014; z-index:200; border-radius:8px; font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.mono{font-family:var(--ff-mono); letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; color:var(--mute)}
.eyebrow{font-family:var(--ff-mono); letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--cyan); display:inline-flex; align-items:center; gap:9px}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--cyan); opacity:.7}

/* ---------- type ---------- */
h1,h2,h3{color:var(--ink); font-weight:600; line-height:1.04; letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.08}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem); line-height:1.2}
.lead{font-size:clamp(1.1rem,1.7vw,1.34rem); color:var(--ink); line-height:1.5; max-width:42ch}
p{max-width:68ch}
.muted{color:var(--mute)}
strong{color:var(--ink); font-weight:600}
em{color:var(--cyan); font-style:normal}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(5,6,8,.85), rgba(5,6,8,.55)); border-bottom:1px solid var(--line)}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; gap:18px; height:66px}
.brandmark{display:flex; align-items:center; gap:11px; font-weight:600; color:var(--ink); font-size:1.06rem; letter-spacing:.01em}
.brandmark .dot{width:8px; height:8px; border-radius:50%; background:var(--cyan)}
/* primary nav: desktop row + mobile hamburger drawer. Reuses parent core's toggle JS
   (it flips data-open on .sbc-nav); fully restyled here to the cyan/near-black system.
   Base rules explicitly neutralize the parent's mobile-drawer props so they can't leak
   into the 680-768 range (child loads after parent → wins on source order). */
.sbc-nav{display:flex; align-items:center; position:relative; margin-inline-start:auto}
.sb-menu{display:flex; flex-direction:row; align-items:center; gap:6px; list-style:none; margin:0; padding:0;
  position:static; max-height:none; opacity:1; pointer-events:auto; overflow:visible; background:none; border:0; box-shadow:none}
.sb-menu a{font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
  padding:9px 12px; border-radius:7px; transition:color .2s,background .2s; display:inline-flex; white-space:nowrap}
.sb-menu a:hover,.sb-menu a[aria-current]{color:var(--ink); background:rgba(255,255,255,.04)}
.sb-menu .sb-menu__cta{color:#021014; background:linear-gradient(180deg,var(--cyan-hot),var(--cyan)); font-weight:600}
.sb-menu .sb-menu__cta:hover{color:#000; background:linear-gradient(180deg,var(--cyan-hot),var(--cyan))}
.sb-region{display:none}   /* region pages live on the brain home + footer; surfaced only in the mobile drawer */
.sbc-nav__toggle{display:none; background:none; border:0; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; padding:0}
.sbc-nav__bars,.sbc-nav__bars::before,.sbc-nav__bars::after{content:""; display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s var(--ease),opacity .2s}
.sbc-nav__bars{position:relative}
.sbc-nav__bars::before{position:absolute; top:-7px} .sbc-nav__bars::after{position:absolute; top:7px}
[aria-expanded="true"] .sbc-nav__bars{background:transparent}
[aria-expanded="true"] .sbc-nav__bars::before{transform:translateY(7px) rotate(45deg)}
[aria-expanded="true"] .sbc-nav__bars::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; padding:12px 18px; border-radius:8px; border:1px solid var(--line); color:var(--copy);
  background:rgba(8,10,13,.5); cursor:pointer; transition:.2s var(--ease)}
.btn:hover{border-color:var(--line-cyan); color:var(--ink)}
.btn.primary{color:#021014; background:linear-gradient(180deg,var(--cyan-hot),var(--cyan)); border-color:transparent; font-weight:500;
  box-shadow:0 4px 16px rgba(57,230,255,.16)}
.btn.primary:hover{box-shadow:0 8px 28px rgba(57,230,255,.3); color:#000}
.btn.ghost{background:transparent}
.btn.lg{padding:15px 24px; font-size:.82rem}

/* ---------- layout ---------- */
section{padding-block:clamp(3.2rem,7vw,6rem)}
.section-tight{padding-block:clamp(2.4rem,5vw,4rem)}
.page-hero{padding-block:clamp(4.5rem,10vw,8rem) clamp(2.5rem,5vw,4rem)}
.page-hero h1{max-width:18ch; margin-top:18px}
.page-hero .lead{margin-top:24px}
.divider{height:1px; background:var(--line); border:0}
.cols{display:grid; gap:clamp(20px,3vw,40px)}
.cols.two{grid-template-columns:1fr 1fr}
.cols.three{grid-template-columns:repeat(3,1fr)}
.cols.side{grid-template-columns:.8fr 1.2fr}
.stack-lg > * + *{margin-top:18px}

/* ---------- cards ---------- */
.card{border:1px solid var(--line); border-radius:14px; padding:clamp(20px,2.4vw,30px); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  transition:border-color .25s,transform .25s,background .25s; position:relative; overflow:hidden}
.card:hover{border-color:var(--line-cyan); background:linear-gradient(180deg, rgba(57,230,255,.04), rgba(255,255,255,0)); transform:translateY(-3px)}
.card .knum{font-family:var(--ff-mono); font-size:.72rem; color:var(--cyan); letter-spacing:.14em}
.card h3{margin:14px 0 8px}
.card p{color:var(--mute); font-size:.97rem}
.card .more{margin-top:16px; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); opacity:0; transform:translateX(-4px); transition:.25s}
.card:hover .more{opacity:1; transform:none}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}

/* spec / meta list */
.spec{display:grid; grid-template-columns:auto 1fr; gap:6px 22px; font-size:.95rem}
.spec dt{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-deep); padding-top:3px}
.spec dd{color:var(--copy)}

/* pill / tag */
.tag{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--copy);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; display:inline-block}
.tags{display:flex; flex-wrap:wrap; gap:8px}

/* real product screenshot, framed to match the card system — used for genuine proof
   (Vectorizer, Connect, Acorn tools, the brain gateway itself), never decorative clip art */
.shot{border:1px solid var(--line-cyan); border-radius:14px; overflow:hidden; background:var(--panel);
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.shot img{width:100%; height:auto; display:block}
.shot figcaption{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-top:1px solid var(--line); font-family:var(--ff-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.shot figcaption a{color:var(--cyan); white-space:nowrap}
.shot figcaption a:hover{color:var(--cyan-hot)}
/* the /ai/ fleet architecture diagram — a real cyan-line SVG, not decoration */
.fleet-diagram{margin-top:34px; padding:18px clamp(10px,2vw,22px); border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.015)}
.fleet-diagram svg{width:100%; height:auto; display:block}

/* pairs a shot with text side-by-side; stacks on mobile */
.media-pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:center}
.media-pair.rev{grid-template-columns:1fr 1fr}
.media-pair.rev .shot{order:2}
@media (max-width:820px){ .media-pair,.media-pair.rev{grid-template-columns:1fr} .media-pair.rev .shot{order:0} }

/* callout — the AI-native / Claude story block */
.callout{border:1px solid var(--line-cyan); border-radius:16px; padding:clamp(24px,3vw,40px);
  background:radial-gradient(120% 140% at 100% 0%, rgba(57,230,255,.07), transparent 55%), rgba(8,12,16,.5)}

/* ---------- motion: the parent core reveals [data-sbc-reveal] on scroll; these add the
   brand heartbeat (echoes the brain's 2.6s two-beat across every inner page) + a gentle stagger ---------- */
/* one greeting beat on load, then rest — not an infinite tic (Rams). The brain's
   recurring pulse now lives on something structural per page (the feature card). */
.brandmark .dot{animation:sb-beat-once 2.6s var(--ease) 1; will-change:transform}
/* gentle cascade so a grid/row of revealed items doesn't pop in all at once */
.card-grid > [data-sbc-reveal]:nth-child(2),.cols.three > [data-sbc-reveal]:nth-child(2){transition-delay:.07s}
.card-grid > [data-sbc-reveal]:nth-child(3),.cols.three > [data-sbc-reveal]:nth-child(3){transition-delay:.14s}
.card-grid > [data-sbc-reveal]:nth-child(4){transition-delay:.21s}
.card-grid > [data-sbc-reveal]:nth-child(5){transition-delay:.28s}
.card-grid > [data-sbc-reveal]:nth-child(6){transition-delay:.35s}
/* the brain's glow travels inward — a soft cyan echo behind every inner-page hero (Pharrell/Ive: carry the light through the door) */
.page-hero{position:relative; isolation:isolate}
.page-hero::before{content:""; position:absolute; z-index:-1; left:-6%; top:-18%; width:58%; aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, rgba(57,230,255,.13), transparent 62%); filter:blur(10px)}
/* the deploy ✓ arrives on the brain's 2.6s heartbeat — ONE beat, then rests (Ive's signature recurrence; fires on scroll-in via the parent reveal) */
.sb-deploybeat{transform-origin:center}
.sb-proofterm.is-in .sb-deploybeat{animation:sb-beat-once 2.6s var(--ease) 1}
@keyframes sb-beat-once{ 0%{transform:scale(1)} 6%{transform:scale(1.28)} 12%{transform:scale(1)} 19%{transform:scale(1.14)} 26%,100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce){ .brandmark .dot{animation:none} .sb-proofterm.is-in .sb-deploybeat{animation:none} }

/* ============================================================
   THE SIGNATURE TRAVELS INWARD (panel P0, 7/8 convergence)
   The brain doesn't die at the click. Its fissure-texture, its
   glow, and a single heartbeat recur on every inner page —
   once, on scroll — and a lead item breaks the uniform grid.
   ============================================================ */
/* the brain's branching fissure, reused as a faint cyan texture echo */
:root{ --fissure:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%2339E6FF' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M100 4 C92 40 108 70 100 104 C94 140 104 168 100 196'/%3E%3Cpath d='M100 30 C120 40 134 56 150 60'/%3E%3Cpath d='M100 46 C82 54 66 66 50 70'/%3E%3Cpath d='M100 78 C124 86 138 104 158 110'/%3E%3Cpath d='M100 96 C78 104 62 120 44 128'/%3E%3Cpath d='M150 60 C160 66 166 76 168 86'/%3E%3Cpath d='M50 70 C40 78 36 90 34 100'/%3E%3Cpath d='M158 110 C166 118 170 128 170 140'/%3E%3Cpath d='M44 128 C36 136 32 146 32 158'/%3E%3Cpath d='M100 130 C116 140 126 158 138 168'/%3E%3Cpath d='M100 150 C86 158 76 172 68 182'/%3E%3C/svg%3E"); }

/* faint fissure watermark behind every page hero — the room reads
   as cut from the same tissue as the brain (one per page, automatic). */
.page-hero::after{ content:""; position:absolute; z-index:-1; right:-3%; top:-10%;
  width:min(46vw,540px); aspect-ratio:1; pointer-events:none; opacity:.2;
  background:var(--fissure) center/contain no-repeat; mask:radial-gradient(circle at 70% 30%, #000 30%, transparent 72%); -webkit-mask:radial-gradient(circle at 70% 30%, #000 30%, transparent 72%) }
@media (max-width:680px){ .page-hero::after{ width:62vw; right:-12%; opacity:.22 } } /* keep a legible fragment on mobile, not a smudge (Mauer/Branson) */
/* above-the-fold paints instantly — heroes never reveal-fade (panel P2) */
.page-hero [data-sbc-reveal]{ opacity:1; transform:none }

/* feature lead card — breaks the uniform card grid: spans the row,
   carries a real cyan glow, a corner fissure, and ONE heartbeat. */
.card-grid > .card.feature{ grid-column:1 / -1; border-color:var(--line-cyan);
  background:radial-gradient(120% 170% at 2% 0%, rgba(57,230,255,.10), transparent 50%), linear-gradient(180deg, rgba(57,230,255,.035), rgba(255,255,255,0));
  box-shadow:0 0 0 1px rgba(57,230,255,.10), 0 26px 64px -34px rgba(57,230,255,.55); padding:clamp(26px,3vw,40px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease) }
/* the protagonist ANSWERS touch — a soft inward 'give' + a deepening glow, the brain's
   dent-on-press gesture carried inward (Ive P0). Overrides the generic .card:hover lift. */
@media (hover:hover){
  .card.feature:hover, .card.feature:focus-within{
    transform:translateY(1px) scale(.997);
    box-shadow:0 0 0 1px rgba(57,230,255,.18), 0 30px 78px -34px rgba(57,230,255,.72);
    background:radial-gradient(120% 170% at 2% 0%, rgba(57,230,255,.16), transparent 50%), linear-gradient(180deg, rgba(57,230,255,.05), rgba(255,255,255,0)) }
}
@media (prefers-reduced-motion:reduce){ .card.feature{ transition:none } .card.feature:hover, .card.feature:focus-within{ transform:none } }
.card.feature h3{ font-size:clamp(1.35rem,2.3vw,1.85rem); margin-top:12px }
.card.feature > p{ color:var(--copy); font-size:1.02rem; max-width:62ch }
.card.feature .knum{ font-size:.74rem; display:inline-flex; align-items:center }

/* the heartbeat node — beats ONCE when the feature card scrolls in
   (the brain's two-beat, recurring on something structural; then rests). */
.sb-pulse{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 0 rgba(57,230,255,.5); margin-left:11px; transform-origin:center; flex:0 0 auto }
.card.feature.is-in .sb-pulse{ animation:sb-pulsebeat 2.6s var(--ease) 1 }
@keyframes sb-pulsebeat{
  0%{ box-shadow:0 0 0 0 rgba(57,230,255,.5); transform:scale(1) }
  8%{ transform:scale(1.55) }
  16%{ transform:scale(1) }
  23%{ transform:scale(1.3) }
  30%{ transform:scale(1) }
  100%{ box-shadow:0 0 0 15px rgba(57,230,255,0); transform:scale(1) }
}

/* the named-fleet proof as a SET PIECE (panel P1, 7/8): air, larger type,
   a 1-2-3 numbered cadence — the fundable chorus, no longer filler weight. */
.fleet{ gap:clamp(28px,3.4vw,52px); position:relative }
/* the brain's fissure runs DOWN the set piece as a spine — the three agents read as
   three branches off one vein (Mauer P0: the org chart IS the fissure). One per surface. */
.fleet::before{ content:""; position:absolute; z-index:0; top:-7%; bottom:-3%; left:50%; transform:translateX(-50%);
  width:min(34%,340px); background:var(--fissure) center/cover no-repeat; opacity:.1; pointer-events:none;
  mask:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); -webkit-mask:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent) }
@media (max-width:880px){ .fleet::before{ width:60%; opacity:.08 } }
.fleet .agent{ position:relative; z-index:1; padding-top:20px; border-top:1px solid var(--line-cyan) }
.fleet .agent .anum{ font-family:var(--ff-mono); font-size:.96rem; letter-spacing:.16em; color:var(--cyan); opacity:.85 }
.fleet .agent .aname{ font-size:clamp(1.2rem,1.8vw,1.55rem); margin:14px 0 12px; display:flex; flex-wrap:wrap; align-items:baseline; gap:11px; line-height:1.1 }
.fleet .agent .arole{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-weight:400 }
.fleet .agent p{ color:var(--mute) }
/* the count CRESCENDOS — 03 (SquirrelBrain · build) is the punchline: it built this very
   page, so it lands a hair stronger than 01/02 (Pharrell P2: give the cadence a drop). */
.fleet .agent:last-child{ border-top-color:var(--cyan) }
.fleet .agent:last-child p{ color:var(--copy) }

/* the two FOUNDERS — same house language as the fleet, but initials-in-a-cyan-ring so
   the humans read distinctly from the numbered agents (Branson: 2 humans steer 3 agents). */
.humans .cols.two{ gap:clamp(22px,3vw,40px) }
.human{ display:flex; gap:18px; align-items:flex-start }
.human-ring{ flex:0 0 auto; width:56px; height:56px; border-radius:50%; border:1px solid var(--line-cyan);
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.06em; color:var(--cyan);
  background:radial-gradient(circle at 50% 28%, rgba(57,230,255,.14), transparent 70%) }
.human .hname{ font-size:clamp(1.12rem,1.6vw,1.38rem); display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:9px; line-height:1.15 }
.human .hrole{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--mute); font-weight:400 }
.human p{ font-size:.97rem }

/* ---------- the house code's QUIET weight ----------
   A small fissure-vein in EVERY secondary card's corner so the grid never reverts to
   anonymous tiles: loud (feature glow) / medium (hero watermark) / quiet (every card).
   It brightens as the card responds — tying each tile to the brain's gesture.
   (Lee "the one thing" + Mauer + Virgil: the signature must be a SYSTEM, not a one-off.) */
:root{ --vein:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2339E6FF' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M2 2 C14 10 20 17 24 31'/%3E%3Cpath d='M24 31 C26 41 31 47 41 53'/%3E%3Cpath d='M17 13 C25 15 32 17 41 15'/%3E%3Cpath d='M22 26 C14 30 10 37 8 45'/%3E%3C/svg%3E"); }
.card:not(.feature)::before{ content:""; position:absolute; top:0; left:0; width:clamp(40px,5vw,56px); aspect-ratio:1;
  background:var(--vein) no-repeat top left/contain; opacity:.13; pointer-events:none; transition:opacity .3s var(--ease) }
.card:not(.feature):hover::before{ opacity:.3 }
@media (prefers-reduced-motion:reduce){ .card:not(.feature)::before{ transition:none } }

/* reveal safety net: content must NEVER stay invisible if the observer
   doesn't run — reduced-motion shows all instantly; a JS failsafe in
   functions.php force-reveals after load. (Dyson P0: self-contained.) */
@media (prefers-reduced-motion:reduce){ [data-sbc-reveal]{ opacity:1 !important; transform:none !important } .card.feature.is-in .sb-pulse{ animation:none } }

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); margin-top:clamp(3rem,6vw,5rem); padding-block:clamp(2.6rem,5vw,4rem) 2rem}
.site-footer .grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:26px}
.site-footer h3{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-deep); margin-bottom:14px; font-weight:400; line-height:1.2}
.site-footer a{display:block; color:var(--mute); padding:5px 0; font-size:.95rem; transition:color .2s}
.site-footer a:hover{color:var(--cyan-hot)}
.site-footer .fbrand .lead{font-size:1.05rem; color:var(--copy); max-width:34ch; margin:12px 0 0}
.site-footer .legal{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:clamp(2rem,4vw,3rem);
  padding-top:22px; border-top:1px solid var(--line-soft); color:var(--mute-deep); font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .cols.two,.cols.three,.cols.side{grid-template-columns:1fr}
  .site-footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){ /* 680→720: the desktop row gained "Workshop"; absorb the squeeze window */
  .site-header .bar{height:60px}
  .sbc-nav__toggle{display:inline-flex}                  /* the hamburger */
  .sb-menu{position:absolute; right:0; left:auto; top:calc(100% + 8px); flex-direction:column; align-items:stretch; gap:0;
    min-width:min(264px,74vw); background:rgba(5,7,10,.98); border:1px solid var(--line-cyan); border-radius:12px;
    padding:8px; max-height:0; opacity:0; pointer-events:none; overflow:hidden;
    transition:max-height .28s var(--ease),opacity .18s; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.6)}
  .sbc-nav[data-open="true"] .sb-menu{max-height:80vh; opacity:1; pointer-events:auto}
  .sb-region{display:block}                              /* full menu (regions included) in the drawer */
  .sb-menu a{font-size:.92rem; padding:13px 12px; border-radius:8px; letter-spacing:.08em}
  .sb-menu li + li a{border-top:1px solid var(--line-soft)}
  .sb-menu .sb-menu__cta{margin-top:8px; justify-content:center; text-align:center; border-top:0}
  .site-footer .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto} *{transition:none !important}
}