/* CritterLabs — Manifesto design language (ported from B-series PDF).
   Same class names as before; pages inherit automatically. */

:root{
  --navy:#080C14;
  --surface:#0E1320;
  --surface-2:#0A0F1C;
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.14);
  --text:#F0F4FA;
  --text-dim:#B7BECC;
  --muted:#6B7585;
  --gold:#F5C842;
  --gold-dim:#c9a238;
  --blue:#3B8BFF;
  --blue-deep:#1E5FCC;
  --blue-hover:#2A6EE8;
  --green:#4ADE80;
  --red:#F87171;
  --mf-rule:rgba(245,200,66,.18);
  --mf-rule-dim:rgba(255,255,255,.08);
  --radius:4px;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --stencil:'Special Elite',monospace;
  --hand:'Caveat',cursive;
  --display:'Caveat',cursive;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--navy);color:var(--text);font-family:var(--mono);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:24px 24px;
  background-position:-1px -1px;
  min-height:100vh;
  padding:32px 32px 120px;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* density */
body[data-density="compact"]{font-size:13px}
body[data-density="spacious"]{font-size:15px}
body[data-theme="mono"]{--gold:#E8EAF0;--gold-dim:#9aa0b0}
body[data-theme="lab"]{--gold:#9BF7B2;--gold-dim:#4ADE80;--blue:#93C5FD}

/* =========================================================
   ROOT FRAME — every page lives inside this manifesto card
   ========================================================= */
#root{max-width:1200px;margin:0 auto;position:relative}
#root > div:first-child{
  position:relative;
  background:var(--navy);
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:5px 5px 0 rgba(0,0,0,.45), 11px 11px 0 rgba(59,139,255,.06);
  overflow:hidden;
}
.wf-sticker{
  position:absolute;top:-14px;left:20px;z-index:5;
  background:var(--navy);padding:2px 12px;
  font-family:var(--hand);font-size:17px;font-weight:700;color:var(--gold);
  border:1px solid var(--border);border-radius:3px;
}

/* Generic page container replaces the old .container */
.container{max-width:none;margin:0;padding:0 40px}

/* =========================================================
   TOPBAR / NAV
   ========================================================= */
.topbar{
  position:relative;background:rgba(8,12,20,.7);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--mf-rule-dim);
}
.topbar-inner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
  padding:18px 28px !important;height:auto !important;
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{display:block;height:56px !important;width:auto;max-width:280px}

.nav-links{
  display:flex;gap:26px;align-items:center;justify-content:center;
  font-family:var(--stencil);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
}
.nav-links a{
  padding:4px 0;color:var(--text-dim);position:relative;border-radius:0;background:transparent;
  transition:color .15s;
}
.nav-links a:hover{color:var(--gold);background:transparent}
.nav-links a.active{color:var(--gold)}
.nav-links a.active::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--gold);
}
.nav-cta{
  font-family:var(--hand) !important;font-size:22px !important;font-weight:700 !important;
  color:#fff !important;background:var(--blue-deep) !important;
  padding:6px 16px 4px !important;border-radius:3px !important;border:none !important;
  letter-spacing:0 !important;text-transform:none !important;
  transform:rotate(-1deg);display:inline-block;
  box-shadow:0 0 0 1px rgba(30,95,217,.4), 0 4px 18px rgba(30,95,217,.45);
  transition:transform .15s,background .15s,box-shadow .15s;
}
.nav-cta:hover{
  background:var(--blue-hover) !important;transform:rotate(-1deg) translateY(-1px);
  box-shadow:0 0 0 1px rgba(30,95,217,.55), 0 6px 22px rgba(30,95,217,.55);
}

/* nav dropdown */
.nav-dropdown{position:relative;display:inline-block}
.svc-mega{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);
  width:min(760px,92vw);z-index:90;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.55), 5px 5px 0 rgba(0,0,0,.35);
  animation:mega-fade .18s ease-out;
}
@keyframes mega-fade{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.svc-mega::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--surface);border-left:1px solid var(--border);border-top:1px solid var(--border)}
.svc-mega-inner{padding:22px}
.svc-mega-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:0 4px 14px;border-bottom:1px dashed var(--mf-rule-dim);margin-bottom:14px;
  font-family:var(--stencil);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.svc-mega-head a{color:var(--gold);font-family:var(--stencil)}
.svc-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.svc-mega-item{
  display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;
  padding:12px 14px;border-radius:3px;color:var(--text);transition:background .15s;
}
.svc-mega-item:hover{background:rgba(245,200,66,.05)}
.svc-mega-item .num{font-family:var(--stencil);font-size:11px;letter-spacing:.22em;color:var(--gold);opacity:.8}
.svc-mega-item .t{font-family:var(--hand);font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1}

/* breadcrumb */
.breadcrumb{
  padding:16px 40px;border-bottom:1px dashed var(--mf-rule-dim);
  display:flex;align-items:center;gap:10px;
  font-family:var(--stencil);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
.breadcrumb a{color:var(--text-dim);text-decoration:none}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .cur{color:var(--gold)}
.breadcrumb span{color:var(--muted);opacity:.5}

/* nav caret appended to expandable items */
.nav-caret{
  display:inline-block;margin-left:6px;font-size:9px;opacity:.5;
  transition:transform .15s, opacity .15s;transform:translateY(-1px);
}
.nav-dropdown:hover > a .nav-caret{opacity:1;transform:translateY(0) rotate(180deg)}
.nav-dropdown > a{position:relative}

/* =========================================================
   TYPE / UTILITIES
   ========================================================= */
.h-display{font-family:var(--hand);font-weight:700;letter-spacing:-.01em;line-height:1}
.caps{font-family:var(--stencil);text-transform:uppercase;letter-spacing:.28em;font-size:11px;color:var(--muted)}
.gold{color:var(--gold)}
.blue{color:var(--blue)}
.muted{color:var(--muted)}
.dim{color:var(--text-dim)}
.strike{position:relative;display:inline-block;color:var(--muted)}
.strike::after{content:'';position:absolute;left:-4px;right:-4px;top:52%;height:5px;background:var(--gold);transform:rotate(-3deg)}

/* eyebrow (section/hero labels) — stenciled, diamond-prefixed */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--stencil);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:24px;
}
.eyebrow::before{content:'◆'}
.eyebrow.plain::before{display:none}

/* status dot */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 1.8s ease-out infinite;vertical-align:middle}
.dot.amber{background:var(--gold);box-shadow:0 0 0 0 rgba(245,200,66,.6)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes spec-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* =========================================================
   BUTTONS — hand-drawn, rotated, gold & blue
   ========================================================= */
.btn{
  display:inline-block;
  font-family:var(--hand);font-size:24px;font-weight:700;letter-spacing:0;
  padding:10px 32px 10px 32px;border-radius:3px;border:none;text-transform:none;
  white-space:nowrap;overflow:visible;
  width:auto;text-align:center;line-height:1.2;
  transition:transform .15s,background .15s,box-shadow .15s;
  cursor:pointer;
}
.btn .arrow{display:inline;margin-left:10px;transition:transform .15s}
.btn-primary{background:var(--gold);color:var(--navy);transform:rotate(-1deg)}
.btn-primary:hover{background:#FFD85C;transform:rotate(-1deg) translateY(-2px)}
.btn-ghost{
  background:var(--blue-deep);color:#fff;
  border:1px solid rgba(30,95,217,.4);transform:rotate(.6deg);
  box-shadow:0 0 0 1px rgba(30,95,217,.3), 0 4px 16px rgba(30,95,217,.35);
}
.btn-ghost:hover{background:var(--blue-hover);transform:rotate(.6deg) translateY(-1px);box-shadow:0 0 0 1px rgba(30,95,217,.5), 0 6px 20px rgba(30,95,217,.45)}
.btn:hover .arrow{transform:translateX(3px)}

/* big CTA pill */
.big-btn{
  display:inline-block;font-family:var(--hand);font-weight:700;font-size:34px;
  color:var(--navy);background:var(--gold);padding:10px 32px 8px;border-radius:3px;
  transform:rotate(-1deg);text-decoration:none;
}
.big-btn:hover{background:#FFD85C}

/* =========================================================
   PILLS
   ========================================================= */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border:1px solid var(--border);border-radius:999px;
  white-space:nowrap;
  font-family:var(--stencil);font-size:9px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--text-dim);background:rgba(8,12,20,.7);
}
.pill.live{border-color:rgba(74,222,128,.35);color:var(--green)}
.pill.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(74,222,128,.7);animation:spec-pulse 1.5s ease-in-out infinite}
.pill.gold{border-color:rgba(245,200,66,.4);color:var(--gold)}
.pill.blue{border-color:rgba(59,139,255,.4);color:var(--blue)}
.pill.blue::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px rgba(59,139,255,.7)}
.pill.green{border-color:rgba(74,222,128,.35);color:var(--green)}

/* =========================================================
   CARD / VIZ / GENERIC SURFACES
   ========================================================= */
.card{
  background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);
  padding:24px;position:relative;overflow:hidden;
}
.card .corner{display:none}

/* =========================================================
   SECTIONS / HEROS
   ========================================================= */
.hero{padding:80px 40px 64px;position:relative}
.hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:44px;align-items:start}
.hero h1{
  font-family:var(--hand);font-weight:700;
  font-size:clamp(48px,5.6vw,80px);line-height:1.05;letter-spacing:-.01em;
  margin:0 0 24px;color:var(--text);max-width:980px;
}
.hero h1 em, .hero h1 .gold{font-style:normal;color:var(--gold)}
.hero h1 .blue{color:var(--blue)}
/* "off-the-shelf" — switch to JetBrains Mono, gray, big, to contrast with Caveat cursive */
.hero h1 .strike{
  font-family:var(--mono);font-weight:700;
  font-size:.82em;letter-spacing:-.02em;text-transform:lowercase;
  color:var(--muted);
}
.hero h1 .strike::after{
  content:'';position:absolute;left:-8px;right:-8px;top:52%;
  height:5px;background:var(--gold);transform:rotate(-2deg);border-radius:2px;
}
.hero h1 .strike .strike-line{
  position:absolute;left:-8px;right:-8px;top:52%;
  height:5px;background:var(--gold);transform:rotate(-2deg);border-radius:2px;
  display:block;pointer-events:none;
}
.hero .lede, .hero .sub{
  font-family:var(--mono);font-size:15px;color:var(--text-dim);
  max-width:620px;line-height:1.65;margin:24px 0 32px;
}
.hero .lede b, .hero .sub b{color:var(--text);font-weight:500}
.hero .ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

.scribble{
  position:absolute;right:48px;top:80px;
  font-family:var(--hand);font-size:22px;font-weight:500;color:var(--gold);
  transform:rotate(4deg);max-width:220px;line-height:1.1;text-align:right;opacity:.9;
}

.sect-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-bottom:52px;padding-bottom:0;border-bottom:none;
}
.sect-head h2{
  font-family:var(--hand);font-weight:700;font-size:clamp(44px,5vw,64px);line-height:1.1;margin:0;color:var(--text);padding-bottom:.12em;
}
.sect-head h2 .gold{color:var(--gold)}
.sect-head .eyebrow{margin:0}
.sect-head .aside{
  font-family:var(--stencil);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);
  max-width:320px;text-align:right;line-height:1.55;
}
.sect-head .aside b{color:var(--gold);font-weight:400}

section, .section{padding:72px 40px;border-top:1px solid var(--mf-rule-dim);position:relative}
.section-plain{padding:72px 40px}

/* =========================================================
   TICKER BELT
   ========================================================= */
.belt{
  border-top:1px solid var(--mf-rule);border-bottom:1px solid var(--mf-rule);
  padding:16px 0;overflow:hidden;white-space:nowrap;background:rgba(245,200,66,.04);
  font-family:var(--stencil);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--text);
}
.belt-track{display:inline-flex;gap:44px;animation:scroll 45s linear infinite;padding-left:44px;align-items:center}
.belt-track span.glyph{color:var(--gold);font-size:10px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Quote variant — bigger, serif, with attribution */
.belt-quotes{
  padding:22px 0;
  background:linear-gradient(180deg, rgba(245,200,66,.03), rgba(30,95,217,.03));
  border-top:1px dashed var(--mf-rule);border-bottom:1px dashed var(--mf-rule);
}
.belt-quotes .belt-track{animation-duration:120s;gap:64px;padding-left:64px}
.belt-quotes .glyph{font-size:14px;opacity:.6}
.belt-quote{
  display:inline-flex;align-items:baseline;gap:18px;
  text-transform:none;letter-spacing:0;
}
.belt-quote .bq-text{
  font-family:var(--display);font-size:clamp(22px,2.4vw,30px);
  color:var(--text);font-weight:500;font-style:italic;letter-spacing:-.015em;
}
.belt-quote .bq-attr{
  font-family:var(--stencil);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap;
}

/* =========================================================
   LIVE CONSOLE (home hero side panel)
   ========================================================= */
.console{
  background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);
  position:relative;overflow:hidden;
}
.console-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--mf-rule-dim);
  font-family:var(--stencil);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);
}
.console-head .tag{color:var(--gold)}
.console-rows{padding:6px 0}
.crow{
  display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;
  padding:14px 16px;border-bottom:1px dashed var(--mf-rule-dim);
}
.crow:last-child{border-bottom:none}
.crow:hover{background:rgba(245,200,66,.04)}
.crow .n{font-family:var(--stencil);font-size:10px;color:var(--muted);letter-spacing:.2em}
.crow .name{font-family:var(--hand);font-weight:700;font-size:26px;color:var(--text);line-height:1}
.crow .sub{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:2px}
.crow .metric{font-family:var(--hand);font-size:28px;color:var(--gold);font-weight:700;text-align:right;line-height:1}
.crow .metric .lbl{display:block;font-family:var(--stencil);font-size:9px;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-weight:400;margin-top:4px}
.console-foot{
  padding:10px 16px;display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--mf-rule-dim);
  font-family:var(--stencil);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.console-foot .clock{color:var(--gold);font-family:var(--mono)}

/* =========================================================
   STATS STRIP (home) — Caveat numerals
   ========================================================= */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);margin-top:0;
  border-top:1px solid var(--mf-rule-dim);border-bottom:1px solid var(--mf-rule-dim);
  background:rgba(245,200,66,.02);
}
.stats .stat{padding:28px 24px;border-right:1px solid var(--mf-rule-dim);position:relative}
.stats .stat:last-child{border-right:none}
.stats .v{
  font-family:var(--hand);font-size:clamp(52px,5vw,72px);font-weight:700;line-height:.9;letter-spacing:-.01em;color:var(--gold);
}
.stats .stat:nth-child(2) .v, .stats .stat:nth-child(4) .v{color:var(--blue)}
.stats .v .plus{color:var(--gold)}
.stats .k{font-family:var(--stencil);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* =========================================================
   PROMISE / MANIFESTO STATEMENTS
   ========================================================= */
.promise{padding:72px 40px;border-top:1px solid var(--mf-rule-dim)}
.promise .head{font-family:var(--stencil);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:32px}
.promise .head b{color:var(--gold);font-weight:400}
.promise .ps{display:grid;grid-template-columns:auto 1fr;gap:0 36px;align-items:baseline}
.promise .ps .n{font-family:var(--stencil);font-size:14px;color:var(--gold);letter-spacing:.2em;padding:22px 0}
.promise .ps .l{
  font-family:var(--hand);font-size:44px;font-weight:700;line-height:1.1;color:var(--text);
  border-bottom:1px dashed var(--mf-rule-dim);padding:18px 0;margin:0;
}
.promise .ps .l em{font-style:normal;color:var(--gold)}
.promise .ps .l.last, .promise .ps .n.last{border-bottom:none}

/* =========================================================
   PROOF (live systems grid)
   ========================================================= */
.proof-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:52px;gap:24px;flex-wrap:wrap}
.proof-head h2{font-family:var(--hand);font-weight:700;font-size:56px;line-height:1.1;margin:0;color:var(--text);padding-bottom:.12em}
.proof-head h2 .gold{color:var(--gold)}
.proof-head .aside{font-family:var(--stencil);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);max-width:280px;text-align:right;line-height:1.55}
.proof-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}

/* =========================================================
   LANES (6-up / 3-up cards on home)
   ========================================================= */
.lanes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--mf-rule-dim);border-left:1px solid var(--mf-rule-dim);margin-top:24px;
}
.lane{
  padding:28px 24px;border-right:1px solid var(--mf-rule-dim);border-bottom:1px solid var(--mf-rule-dim);
  position:relative;cursor:pointer;transition:background .2s;text-decoration:none;color:inherit;
}
.lane:hover{background:rgba(245,200,66,.04)}
.lane .ln-num{font-family:var(--stencil);font-size:11px;letter-spacing:.25em;color:var(--gold)}
.lane h3{font-family:var(--hand);font-weight:700;font-size:32px;margin:4px 0 6px;color:var(--text);line-height:1}
.lane p{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin:0 0 14px;line-height:1.5}
.lane .ln-arrow{font-family:var(--hand);font-size:22px;color:var(--blue);opacity:.8;transition:opacity .2s,transform .2s,color .2s}
.lane:hover .ln-arrow{opacity:1;color:var(--blue-hover);transform:translateX(4px)}

/* =========================================================
   SERVICES OVERVIEW GRID (existing .svc / .svc-grid selectors)
   ========================================================= */
.services{padding:72px 40px;border-top:1px solid var(--mf-rule-dim)}
.svc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;
  background:transparent;border:none;border-radius:0;overflow:visible;
}
.svc{
  background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);
  padding:26px 24px 22px;position:relative;overflow:hidden;
  transition:border-color .2s, background .2s;min-height:auto;display:flex;flex-direction:column;
  text-decoration:none;color:var(--text);
}
.svc:hover{border-color:var(--mf-rule);background:rgba(245,200,66,.02)}
.svc .num{font-family:var(--stencil);font-size:11px;letter-spacing:.3em;color:var(--gold);margin-bottom:6px}
.svc h3{font-family:var(--hand);font-weight:700;font-size:36px;line-height:1;margin:2px 0 10px;color:var(--text);letter-spacing:-.01em}
.svc p{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin:0 0 16px;line-height:1.6;flex:1}
.svc .tags{display:flex;gap:6px;flex-wrap:wrap}
.svc .tags .pill{font-family:var(--mono);font-size:9px;letter-spacing:.18em;padding:3px 8px;border-radius:2px;background:transparent;white-space:nowrap}
.svc-link{cursor:pointer}
.svc-deliverables{margin-top:16px;padding-top:14px;border-top:1px dashed var(--mf-rule-dim)}
.svc-deliv-head{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.svc-deliverables ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.svc-deliverables li{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);letter-spacing:.01em;line-height:1.45;display:flex;gap:8px;align-items:flex-start}
.svc-deliv-mark{color:var(--gold);font-weight:700;flex-shrink:0}
.svc-explore{
  margin-top:18px;padding-top:14px;border-top:1px dashed var(--mf-rule-dim);
  font-family:var(--hand);font-size:20px;color:var(--blue);
  display:flex;gap:10px;align-items:center;white-space:nowrap;
}
.svc-explore span:first-child{flex:1}
.svc-link:hover .svc-explore{color:var(--blue-hover)}

/* =========================================================
   CASES / WORK
   ========================================================= */
.cases{
  display:flex;flex-direction:column;gap:16px;background:transparent;border:none;border-radius:0;overflow:visible;
}
.case{
  background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);
  padding:28px;display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start;
  position:relative;overflow:hidden;transition:border-color .2s;
}
.case::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);opacity:.6}
.case:hover{border-color:var(--mf-rule)}
.case-link{cursor:pointer;transition:border-color .2s,transform .2s}
.case-link:hover{border-color:var(--gold);transform:translateY(-2px)}
.case-features{margin:14px 0;padding:14px 0 0;border-top:1px dashed var(--mf-rule-dim)}
.case-feat-head{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.case-features ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.case-features li{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.case-feat-mark{color:var(--gold);font-weight:700;flex-shrink:0}
@media (max-width:860px){.case-features ul{grid-template-columns:1fr}}
.case .case-head{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
.case h3{font-family:var(--hand);font-weight:700;font-size:44px;line-height:1;margin:0 0 10px;letter-spacing:-.01em;color:var(--text)}
.case p{font-family:var(--mono);color:var(--text-dim);font-size:13px;margin:0 0 14px;line-height:1.7;max-width:580px}
.case p b{color:var(--text);font-weight:500}
.case .terminal-line{
  font-family:var(--mono);font-size:12px;color:var(--gold);margin-top:10px;
  padding:10px 14px;background:rgba(245,200,66,.06);border-left:2px solid var(--gold);border-radius:0 2px 2px 0;
}
.case .stack{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.case-side{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.case-side .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-stat{background:var(--surface-2);border:1px solid var(--mf-rule-dim);border-radius:3px;padding:14px 16px}
.mini-stat .v{font-family:var(--hand);font-size:32px;font-weight:700;letter-spacing:-.01em;line-height:1;color:var(--gold)}
.mini-stat .k{font-family:var(--stencil);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.viz{background:
  repeating-linear-gradient(90deg,rgba(245,200,66,.04) 0 1px,transparent 1px 24px),
  repeating-linear-gradient(0deg,rgba(59,139,255,.04) 0 1px,transparent 1px 24px),
  linear-gradient(135deg,rgba(245,200,66,.08),rgba(30,95,217,.05) 60%,var(--surface));
  border:1px solid var(--mf-rule-dim);border-radius:3px;height:150px;position:relative;overflow:hidden}
.viz svg{position:absolute;inset:0;width:100%;height:100%}

/* =========================================================
   PROCESS RAIL (services/how we work)
   ========================================================= */
.process{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:transparent;border:none;border-radius:0;overflow:visible;margin-top:32px;position:relative;
}
.process::before{
  content:'';position:absolute;left:0;right:0;top:32px;height:1px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px);opacity:.4;
}
.pstep{background:transparent;padding:0 20px 0 0;position:relative}
.pstep::before{
  content:'';display:block;width:64px;height:64px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--gold);margin-bottom:20px;position:relative;z-index:1;
}
.pstep .n{
  position:absolute;top:0;left:0;width:64px;height:64px;display:grid;place-items:center;
  font-family:var(--hand);font-weight:700;font-size:28px;color:var(--gold);margin:0;letter-spacing:0;z-index:2;
}
.pstep h4{font-family:var(--hand);font-weight:700;font-size:30px;line-height:1;margin:0 0 8px;color:var(--text)}
.pstep p{font-family:var(--mono);color:var(--text-dim);font-size:12px;margin:0;line-height:1.55;max-width:90%}

/* =========================================================
   PRICING
   ========================================================= */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;align-items:stretch}
.price{
  background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);
  padding:28px 24px 24px;position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.price.featured{
  background:linear-gradient(180deg,rgba(245,200,66,.08),rgba(245,200,66,.02));
  border:1px solid rgba(245,200,66,.4);
  box-shadow:0 0 0 1px rgba(245,200,66,.1), 0 12px 40px rgba(245,200,66,.08);
  transform:translateY(-8px);
}
.price .flag{
  position:absolute;top:-1px;left:auto;right:-1px;background:var(--gold);color:var(--navy);
  font-family:var(--stencil);font-size:9px;letter-spacing:.25em;text-transform:uppercase;
  padding:5px 12px;border-bottom-left-radius:4px;font-weight:700;border-radius:0 0 0 4px;
}
.price .k{font-family:var(--stencil);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.price.featured .k{color:var(--gold)}
.price .big{font-family:var(--hand);font-weight:700;font-size:54px;line-height:1;letter-spacing:-.01em;color:var(--text);margin-bottom:4px}
.price.featured .big{color:var(--gold)}
.price .sub{font-family:var(--mono);color:var(--text-dim);font-size:11px;margin-bottom:20px;line-height:1.5}
.price ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.price li{
  padding:0 0 0 18px;border:none;font-family:var(--mono);font-size:12px;color:var(--text);
  display:block;line-height:1.4;position:relative;
}
.price li::before{content:'◆';color:var(--gold);font-size:9px;position:absolute;left:0;top:4px;font-family:var(--mono)}

/* =========================================================
   FORM
   ========================================================= */
.form-wrap{
  background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);
  padding:28px;position:relative;overflow:hidden;
}
.form-wrap::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.field.full{grid-column:1 / -1}
.field label{
  font-family:var(--stencil);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);
}
.field label b{color:var(--gold);font-weight:400}
.field input, .field select, .field textarea{
  background:var(--navy);border:1px solid var(--mf-rule-dim);border-radius:3px;
  color:var(--text);font-family:var(--mono);font-size:13px;padding:12px 14px;outline:none;
  transition:border-color .15s,background .15s;width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--gold);background:#0B0F1A}
.field textarea{min-height:100px;resize:vertical}
.field input::placeholder, .field textarea::placeholder{color:var(--muted)}

/* =========================================================
   FOOTER
   ========================================================= */
/* =========================================================
   FOOTER — wireframe mini
   ========================================================= */
.footer-mini{
  padding:26px 40px;border-top:1px solid var(--mf-rule-dim);
  font-family:var(--stencil);font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;
}
.footer-mini-inner{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
/* -- Footer Bronny image + pieces --- */
.fm-left{display:flex;align-items:center;gap:14px}
.fm-left img{height:40px;width:40px;object-fit:cover;border-radius:50%;border:1px solid var(--border-strong);display:block}
.fm-dog{height:38px!important;width:38px!important;object-fit:cover;border-radius:50%;border:none!important;box-shadow:none;flex-shrink:0;display:block}
.fm-copy{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.fm-sep{color:var(--mf-rule);opacity:.8;font-size:14px;line-height:1}
.fm-mid{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.fm-gold{color:var(--gold)}
.fm-links{display:flex;gap:22px}
.fm-links a{color:var(--muted);text-decoration:none;transition:color .15s}
.fm-links a:hover{color:var(--gold)}

/* legacy fallback for any old markup */
.footer, .footer-full{
  padding:28px 40px;border-top:1px solid var(--mf-rule-dim);
  font-family:var(--stencil);font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;
  margin-top:0;
}
.footer-inner, .footer-legal{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.footer a, .footer-full a{color:var(--muted);text-decoration:none}
.footer a:hover, .footer-full a:hover{color:var(--gold)}

/* =========================================================
   DOG ONLINE — signature moment
   ========================================================= */
.dog-online{
  padding:80px 40px 48px;border-top:1px solid var(--mf-rule-dim);position:relative;overflow:hidden;
  background:radial-gradient(ellipse 800px 460px at 50% 40%, rgba(245,200,66,.10), transparent 70%);
}
.dog-online::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(245,200,66,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,200,66,.08) 1px, transparent 1px);
  background-size:48px 48px;opacity:.25;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 75%);
}
.dog-online-inner{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.dog-online-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--stencil);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  padding:6px 14px;border:1px solid var(--mf-rule);border-radius:999px;background:rgba(245,200,66,.04);
  margin-bottom:28px;
}
.dog-online-eyebrow .glyph{color:var(--gold)}
.dog-online-eyebrow .dot-live{
  width:8px;height:8px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 10px rgba(74,222,128,.8), 0 0 0 3px rgba(74,222,128,.18);
  animation:dog-pulse 1.6s ease-in-out infinite;
}
@keyframes dog-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
.dog-online-img{
  display:block;width:min(520px,72vw);height:auto;
  filter:drop-shadow(0 0 60px rgba(245,200,66,.28)) drop-shadow(0 0 120px rgba(245,200,66,.15)) drop-shadow(0 30px 60px rgba(0,0,0,.55));
  animation:dog-breathe 6s ease-in-out infinite;
}
@keyframes dog-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.012)}}
.dog-online-caption{margin-top:24px;max-width:640px}
.dog-online-caption h2{
  font-family:var(--hand);font-weight:700;font-size:clamp(48px,5.6vw,72px);letter-spacing:-.01em;line-height:1;margin:0 0 14px;
}
.dog-online-caption h2 .gold{color:var(--gold)}
.dog-online-caption p{font-family:var(--mono);font-size:13px;color:var(--text-dim);max-width:520px;margin:0 auto;line-height:1.65}

/* =========================================================
   QUOTE / TESTIMONIAL FRAME
   ========================================================= */
.quote-frame{
  padding:96px 40px;text-align:center;position:relative;
  background:radial-gradient(ellipse 600px 300px at 50% 50%, rgba(245,200,66,.05), transparent 70%);
  border-top:1px solid var(--mf-rule-dim);
}
.quote-frame::before{
  content:'"';position:absolute;left:50%;top:30px;transform:translateX(-50%);
  font-family:var(--hand);font-size:120px;color:var(--gold);opacity:.3;line-height:1;
}
.quote-frame blockquote{
  font-family:var(--hand);font-weight:700;font-size:clamp(40px,4.8vw,62px);line-height:1.08;
  max-width:900px;margin:0 auto 24px;color:var(--text);
}
.quote-frame blockquote em{font-style:normal;color:var(--gold)}
.quote-frame cite{font-family:var(--stencil);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-style:normal}

/* =========================================================
   CTA BAND / CTA FRAME
   ========================================================= */
.cta-frame{padding:72px 40px;text-align:center;border-top:1px solid var(--mf-rule)}
.cta-frame .stencil{display:block;margin-bottom:20px;font-family:var(--stencil);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.cta-frame h2{font-family:var(--hand);font-weight:700;font-size:clamp(54px,6vw,80px);line-height:1;margin:0 auto 16px;color:var(--text);max-width:860px}
.cta-frame h2 em{font-style:normal;color:var(--gold)}
.cta-frame p{font-family:var(--mono);font-size:13px;color:var(--text-dim);max-width:540px;margin:0 auto 28px;line-height:1.6}
.cta-frame .kicker{font-family:var(--hand);color:var(--gold);font-size:22px;margin-top:22px;display:block;transform:rotate(1deg)}

.cta-band{
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  padding:30px 34px;border:1px solid rgba(245,200,66,.4);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(245,200,66,.08),rgba(245,200,66,.02));
  margin:24px 0;
}
.cta-band h3{font-family:var(--hand);font-weight:700;font-size:36px;line-height:1;margin:0;color:var(--text)}
.cta-band h3 .gold{color:var(--gold)}
.cta-band p{font-family:var(--mono);font-size:13px;color:var(--text-dim);margin:6px 0 0;line-height:1.5}

/* =========================================================
   DETAIL PAGES (service/work)
   ========================================================= */
.svc-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start;padding:72px 40px 48px}
.svc-viz{
  border:1px solid var(--mf-rule-dim);border-radius:var(--radius);background:var(--surface);overflow:hidden;position:sticky;top:24px;
}
.svc-viz-head{
  display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--mf-rule-dim);
  font-family:var(--stencil);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);
}
.svc-viz-head .tag{color:var(--gold);margin-right:6px}
.svc-viz-head .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;animation:pulse 2s infinite}
.svc-viz-body{padding:18px;min-height:280px;display:flex;align-items:center;justify-content:center}

.live-url{
  display:inline-flex;align-items:center;gap:10px;padding:10px 14px;
  border:1px solid var(--gold);border-radius:3px;background:rgba(245,200,66,.06);color:var(--gold);
  font-family:var(--mono);font-size:13px;
}
.live-url .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.live-url:hover{background:rgba(245,200,66,.12)}

/* metric strip */
.metric-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--mf-rule-dim);border-bottom:1px solid var(--mf-rule-dim);
  background:rgba(245,200,66,.02);
}
.metric-cell{padding:28px 22px;border-right:1px solid var(--mf-rule-dim)}
.metric-cell:last-child{border-right:none}
.metric-cell .v{font-family:var(--hand);font-weight:700;font-size:clamp(48px,4.5vw,68px);line-height:.9;letter-spacing:-.01em;color:var(--gold)}
.metric-cell:nth-child(2) .v, .metric-cell:nth-child(4) .v{color:var(--blue)}
.metric-cell .k{font-family:var(--stencil);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* prose */
.svc-problem{padding:72px 40px;background:rgba(255,255,255,.01);border-top:1px solid var(--mf-rule-dim);border-bottom:1px solid var(--mf-rule-dim)}
.prose{max-width:780px}
.prose p{font-family:var(--mono);color:var(--text-dim);font-size:15px;line-height:1.75;margin:0 0 18px}
.prose p:first-of-type{font-size:17px;color:var(--text);font-weight:400}
.prose-wide{max-width:820px}

/* arch rows */
.arch-grid{border-top:1px solid var(--mf-rule-dim);margin-top:30px}
.arch-row{display:grid;grid-template-columns:180px 1fr 200px;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--mf-rule-dim)}
.arch-row .arch-layer{font-family:var(--stencil);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.arch-row .arch-name{font-family:var(--hand);font-weight:700;font-size:28px;line-height:1;letter-spacing:-.01em;margin-bottom:6px;color:var(--text)}
.arch-row .arch-note{font-family:var(--mono);color:var(--text-dim);font-size:13px;line-height:1.65}
.arch-row .arch-count{display:flex;align-items:center;gap:10px;justify-content:flex-end;font-family:var(--mono);font-size:13px}
.arch-row .arch-count .from{color:var(--text-dim)}
.arch-row .arch-count .arrow{color:var(--gold)}
.arch-row .arch-count .to{color:var(--gold);font-weight:600}
.arch-row.arch-2 .arch-layer{color:var(--blue)}
.arch-row.arch-3 .arch-layer{color:var(--green)}

/* bullet grid */
.bullet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--mf-rule-dim);margin-top:30px}
.bullet{
  display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:22px 0;border-bottom:1px solid var(--mf-rule-dim);
  font-family:var(--mono);color:var(--text-dim);font-size:14px;line-height:1.65;
}
.bullet:nth-child(odd){padding-right:28px}
.bullet:nth-child(even){padding-left:28px;border-left:1px solid var(--mf-rule-dim)}
.bullet-n{font-family:var(--stencil);font-size:11px;letter-spacing:.25em;color:var(--gold);padding-top:3px}

/* detail key/value rows */
.detail-rows{border-top:1px solid var(--mf-rule-dim);margin-top:30px}
.drow{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:22px 0;border-bottom:1px solid var(--mf-rule-dim)}
.drow-k{font-family:var(--hand);font-weight:700;font-size:24px;line-height:1;color:var(--gold)}
.drow-v{font-family:var(--mono);color:var(--text-dim);font-size:14px;line-height:1.7}
.drow-v b{color:var(--text);font-weight:500}

/* usecase cards */
.usecase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.uc{background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);padding:24px}
.uc-n{font-family:var(--stencil);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.uc h4{font-family:var(--hand);font-weight:700;font-size:26px;line-height:1;margin:0 0 10px;color:var(--text);letter-spacing:-.01em}
.uc p{font-family:var(--mono);color:var(--text-dim);font-size:13px;line-height:1.65;margin:0}

/* ledger (pricing) */
.ledger{border-top:1px solid var(--mf-rule-dim);margin-top:30px}
.ledger-row{display:grid;grid-template-columns:200px 1fr 2fr;gap:28px;align-items:start;padding:26px 0;border-bottom:1px solid var(--mf-rule-dim)}
.ledger-range{font-family:var(--hand);font-weight:700;font-size:28px;color:var(--gold);line-height:1}
.ledger-title{font-family:var(--hand);font-weight:700;font-size:22px;line-height:1;letter-spacing:-.01em;color:var(--text)}
.ledger-desc{font-family:var(--mono);color:var(--text-dim);font-size:13px;line-height:1.65}

/* FAQ */
.faq{border-top:1px solid var(--mf-rule-dim);margin-top:30px}
.faq-row{border-bottom:1px solid var(--mf-rule-dim)}
.faq-row summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:24px}
.faq-row summary::-webkit-details-marker{display:none}
.faq-q{font-family:var(--hand);font-weight:700;font-size:28px;line-height:1.1;letter-spacing:-.01em;color:var(--text)}
.faq-toggle{font-family:var(--mono);font-size:18px;color:var(--gold);width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--mf-rule-dim);border-radius:50%;transition:transform .2s;flex-shrink:0}
.faq-row[open] .faq-toggle{transform:rotate(45deg)}
.faq-row p{font-family:var(--mono);color:var(--text-dim);font-size:13px;line-height:1.7;margin:0 0 22px;max-width:760px}

/* timeline */
.timeline{border-left:1px solid var(--mf-rule-dim);margin-top:24px;padding-left:0}
.tl-row{display:grid;grid-template-columns:100px 24px 1fr;gap:16px;align-items:start;padding:18px 0 24px;position:relative}
.tl-year{font-family:var(--stencil);font-size:11px;color:var(--gold);letter-spacing:.2em;padding-top:4px}
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--gold);margin-left:-5px;margin-top:6px;box-shadow:0 0 0 4px var(--navy), 0 0 0 5px var(--mf-rule-dim)}
.tl-title{font-family:var(--hand);font-weight:700;font-size:24px;line-height:1;letter-spacing:-.01em;margin-bottom:8px;color:var(--text)}
.tl-body p{font-family:var(--mono);color:var(--text-dim);font-size:13px;line-height:1.65;margin:0;max-width:640px}

/* story grid */
.story-grid{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start}
.story-eyebrow{padding-top:10px}

/* facts */
.facts-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;margin-top:30px}
.facts{border-top:1px solid var(--mf-rule-dim)}
.fact-row{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--mf-rule-dim)}
.fact-k{font-family:var(--stencil);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.fact-v{font-family:var(--mono);color:var(--text);font-size:14px}
.stack-card{background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);padding:24px}

/* team */
.team-grid{display:grid;grid-template-columns:360px 1fr;gap:28px;margin-top:30px;align-items:start}
.team-card{background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden}
.team-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);opacity:.7}
.team-photo{display:grid;place-items:center;padding:18px;background:rgba(245,200,66,.04);border:1px dashed var(--mf-rule-dim);border-radius:var(--radius);margin-bottom:18px}
.team-photo img{width:100%;max-width:240px;height:auto;display:block;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}
.team-role{font-family:var(--stencil);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.team-name{font-family:var(--hand);font-weight:700;font-size:48px;line-height:1;margin:0 0 14px;color:var(--text);letter-spacing:-.01em}
.team-bio{font-family:var(--mono);font-size:12.5px;color:var(--text-dim);line-height:1.7;margin:0 0 12px}
.team-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px dashed var(--mf-rule-dim)}
.team-card-copy{padding:28px;background:transparent;border:1px dashed var(--mf-rule-dim)}
.team-card-copy::before{display:none}
@media (max-width:860px){.team-grid{grid-template-columns:1fr}}

/* related */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.related-card{
  background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);padding:22px;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:10px;
  transition:border-color .18s,background .18s,transform .18s;
}
.related-card:hover{border-color:var(--mf-rule);background:rgba(245,200,66,.03);transform:translateY(-2px)}
.related-num{font-family:var(--stencil);font-size:10px;letter-spacing:.25em;color:var(--gold);opacity:.9}
.related-title{font-family:var(--hand);font-weight:700;font-size:26px;line-height:1;letter-spacing:-.01em}
.related-sub{font-family:var(--mono);color:var(--text-dim);font-size:12px;line-height:1.6;flex:1}

/* 404 */
.notfound{max-width:720px;margin:0 auto;text-align:center;padding:80px 40px}
.nf-code{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px}
.nf-code span{font-family:var(--hand);font-weight:700;font-size:clamp(140px,20vw,240px);line-height:.9;color:var(--gold);letter-spacing:-.04em}
.nf-dog{width:clamp(80px,14vw,160px);height:auto;filter:drop-shadow(0 0 40px rgba(245,200,66,.3));animation:dog-breathe 6s ease-in-out infinite}
.nf-terminal{margin-top:40px;border:1px solid var(--mf-rule-dim);border-radius:var(--radius);background:var(--surface);text-align:left;max-width:640px;margin-left:auto;margin-right:auto}
.nf-term-head{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--mf-rule-dim);font-family:var(--stencil);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.nf-term-head .tag{color:var(--gold);margin-right:6px}
.nf-term-head .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;animation:pulse 2s infinite}
.nf-term-body{padding:18px;font-family:var(--mono);font-size:13px;line-height:1.8;color:var(--text)}
.nf-term-body div{margin-bottom:6px}
.nf-term-body .k{color:var(--gold)}

/* brand kit */
.brand-kit{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin-top:24px}
.swatch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.sw{aspect-ratio:1;border:1px solid var(--mf-rule-dim);border-radius:3px;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;font-family:var(--mono)}
.sw b{font-family:var(--hand);font-size:22px;font-weight:700;display:block;margin-bottom:2px;letter-spacing:0}
.sw span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;opacity:.85}
.sw.gold{background:var(--gold);color:var(--navy)}
.sw.blue{background:var(--blue-deep);color:#fff}
.sw.navy{background:var(--navy);color:var(--text);border-color:var(--border-strong)}
.sw.text-{background:var(--text);color:var(--navy)}
.sw.muted{background:var(--muted);color:#fff}
.logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.lb{border:1px solid var(--mf-rule-dim);border-radius:3px;padding:24px;display:grid;place-items:center;min-height:130px;position:relative;background:var(--surface)}
.lb.onlight{background:var(--text);color:var(--navy)}
.lb.ongold{background:var(--gold);color:var(--navy)}
.lb .cap{position:absolute;bottom:8px;left:10px;font-family:var(--stencil);font-size:9px;color:var(--muted);letter-spacing:.22em;text-transform:uppercase}
.lb.onlight .cap,.lb.ongold .cap{color:rgba(8,12,20,.6)}

/* =========================================================
   TWEAKS PANEL
   ========================================================= */
.tweaks-panel{
  position:fixed;bottom:20px;right:20px;z-index:100;
  background:var(--surface);border:1px solid var(--gold);border-radius:var(--radius);
  padding:16px;width:280px;font-family:var(--mono);font-size:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.6), 5px 5px 0 rgba(0,0,0,.45);
  display:none;
}
.tweaks-panel.open{display:block}
.tweaks-panel h4{font-family:var(--stencil);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;display:flex;justify-content:space-between}
.tweaks-panel .close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0}
.tweak-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.tweak-row .lbl{font-family:var(--stencil);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.tweak-seg{display:flex;gap:0;border:1px solid var(--mf-rule-dim);border-radius:2px;overflow:hidden}
.tweak-seg button{flex:1;padding:7px 6px;background:transparent;border:none;color:var(--text-dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.tweak-seg button.on{background:var(--gold);color:var(--navy);font-weight:700}
.tweak-seg-wrap{flex-wrap:wrap;border:none;gap:4px}
.tweak-seg-wrap button{flex:0 0 auto;border:1px solid var(--mf-rule-dim);border-radius:2px;padding:5px 8px;font-size:10px}

/* =========================================================
   MEDIA QUERIES
   ========================================================= */
@media (max-width:980px){
  body{padding:16px 10px 24px}
  .container{padding:0 24px}
  .topbar-inner{grid-template-columns:auto auto;gap:14px}
  .nav-links{display:none}
  .nav-burger{display:flex !important}
  .hero{padding:48px 24px 40px}
  .hero-grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .lanes{grid-template-columns:1fr}
  .case{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .brand-kit{grid-template-columns:1fr}
  .footer-mini-inner{flex-direction:column;text-align:center}
  .svc-hero{grid-template-columns:1fr;padding:48px 24px}
  .metric-strip{grid-template-columns:1fr 1fr}
  .metric-cell:nth-child(2){border-right:none}
  .metric-cell:nth-child(1),.metric-cell:nth-child(2){border-bottom:1px solid var(--mf-rule-dim)}
  .arch-row{grid-template-columns:1fr}
  .bullet-grid{grid-template-columns:1fr}
  .bullet:nth-child(even){padding-left:0;border-left:none}
  .bullet:nth-child(odd){padding-right:0}
  .drow{grid-template-columns:1fr;gap:8px}
  .usecase-grid{grid-template-columns:1fr}
  .ledger-row{grid-template-columns:1fr;gap:8px}
  .story-grid{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:flex-start}
  .svc-mega{width:94vw}
  .svc-mega-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}
  .promise .ps .l{font-size:30px}
  .quote-frame blockquote{font-size:34px}
  .hero-note{transform:none;margin-top:28px}
  .sys-grid{grid-template-columns:1fr!important}
  .lanes-grid{grid-template-columns:1fr!important}
  .promise-list li .l{font-size:28px!important}
  .start-cta h2{font-size:44px!important}
}

/* =========================================================
   MANIFESTO HOME — new section classes (home.jsx v2)
   ========================================================= */

/* -- Hero handwritten note (right of H1) ------------------------------ */
.hero-note{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding-top:60px}

/* Handwritten sticky — "We Keep our Word" (PDF-faithful, ~half the size of the old conviction card) */
.hero-scribble{
  position:relative;display:inline-flex;flex-direction:column;line-height:.95;
  font-family:var(--hand);color:var(--blue);
  transform:rotate(-4deg);transform-origin:top right;
  padding:6px 2px 6px 18px;
  text-align:left;
}
.hero-scribble::before{
  /* loose pencil underline under "We Keep" */
  content:'';position:absolute;left:14px;right:4px;bottom:36%;
  height:2px;background:var(--blue);opacity:.45;
  border-radius:2px;transform:rotate(-1.5deg);
}
.hero-scribble::after{
  /* little arrow pointing to the headline */
  content:'↙';position:absolute;left:-10px;bottom:-6px;
  font-family:var(--hand);font-size:22px;color:var(--blue);opacity:.7;
  transform:rotate(8deg);
}
.hero-scribble .line1{font-size:40px;font-weight:700;letter-spacing:-.01em}
.hero-scribble .line2{font-size:40px;font-weight:700;letter-spacing:-.01em;margin-top:-8px;margin-left:10px}

/* -- Hero live-conviction card (compact, replaces old sticky note) ---- */
.conviction-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--mf-rule-dim);
  border-radius:var(--radius);
  padding:14px 16px 12px;
  width:260px;
  box-shadow:5px 5px 0 rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.3);
  transform:rotate(-1.2deg);
  font-family:var(--mono);
  overflow:hidden;
}
.conviction-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
}
.cc-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:8px;border-bottom:1px dashed var(--mf-rule-dim);margin-bottom:10px;
  font-family:var(--stencil);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
}
.cc-live{display:inline-flex;align-items:center;gap:6px;color:var(--green)}
.cc-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px rgba(74,222,128,.7);animation:spec-pulse 1.5s ease-in-out infinite;
}
.cc-tag{color:var(--muted)}
.cc-body{display:flex;flex-direction:column;gap:2px;padding:2px 0 10px}
.cc-title{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-dim);text-transform:uppercase}
.cc-metric{
  font-family:var(--hand);font-weight:700;font-size:44px;line-height:1;color:var(--gold);
  text-shadow:0 0 24px rgba(245,200,66,.3);letter-spacing:-.01em;margin:2px 0;
}
.cc-metric.blue{color:var(--blue);text-shadow:0 0 24px rgba(59,139,255,.3)}
.cc-sub{font-family:var(--stencil);font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.cc-foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding-top:8px;border-top:1px dashed var(--mf-rule-dim);
  font-family:var(--stencil);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.cc-idx{color:var(--gold)}
.cc-note{font-family:var(--hand);font-size:14px;color:var(--gold);text-transform:none;letter-spacing:0;line-height:1.1;text-align:right;max-width:140px}

/* legacy sticky note — keep rules harmless in case anything else uses it */
.note-paper,.note-line,.note-scribble{display:none}

/* -- Hero Live Systems card (manifesto-styled, 4 items) --------------- */.live-systems-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--mf-rule);
  border-radius:var(--radius);
  padding:14px 16px 12px;
  width:340px;max-width:100%;
  box-shadow:6px 6px 0 rgba(0,0,0,.45), 0 14px 40px rgba(0,0,0,.35);
  transform:rotate(-1deg);
  font-family:var(--mono);
  overflow:hidden;
}
.live-systems-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
}
/* tape corner */
.live-systems-card::after{
  content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:72px;height:18px;background:rgba(245,200,66,.2);
  border:1px dashed rgba(245,200,66,.5);
}
.lsc-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:10px;border-bottom:1px dashed var(--mf-rule-dim);margin-bottom:8px;
  font-family:var(--stencil);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  padding-top:4px;
}
.lsc-live{display:inline-flex;align-items:center;gap:6px;color:var(--green)}
.lsc-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px rgba(74,222,128,.7);animation:spec-pulse 1.5s ease-in-out infinite;
}
.lsc-clock{color:var(--muted);font-family:var(--mono);letter-spacing:.1em}
.lsc-rows{display:flex;flex-direction:column}
.lsc-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 2px;border-bottom:1px dashed var(--mf-rule-dim);
  text-decoration:none;color:inherit;transition:background .15s;
}
.lsc-row:last-child{border-bottom:none}
.lsc-row:hover{background:rgba(245,200,66,.04)}
.lsc-row-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.lsc-pulse{
  width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0;
  transition:background .3s, box-shadow .3s;
}
.lsc-pulse.on{background:var(--green);box-shadow:0 0 8px rgba(74,222,128,.9)}
.lsc-meta{min-width:0}
.lsc-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);line-height:1.1;font-weight:700;
}
.lsc-sub{
  font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;letter-spacing:.02em;
}
.lsc-metric{
  font-family:var(--mono);font-weight:700;font-size:24px;line-height:1;color:var(--gold);
  letter-spacing:-.01em;flex-shrink:0;text-align:right;
  text-shadow:0 0 18px rgba(245,200,66,.3);
}
.lsc-metric.blue{color:var(--blue);text-shadow:0 0 18px rgba(59,139,255,.3)}
.lsc-metric.green{color:var(--green);text-shadow:0 0 18px rgba(34,197,94,.3)}
.lsc-metric.status{font-size:14px;letter-spacing:.04em}
.lsc-metric-unit{font-size:13px;font-weight:500;color:var(--muted);margin-left:3px;letter-spacing:0;text-shadow:none}
.lsc-foot{
  padding-top:10px;margin-top:6px;border-top:1px dashed var(--mf-rule-dim);
  text-align:right;
}
.lsc-scribble{
  font-family:var(--hand);font-size:15px;color:var(--blue);line-height:1.1;
  display:inline-block;transform:rotate(-1deg);
}

/* -- Promise band ------------------------------------------------------ */
.promise-band{padding:88px 40px 72px;border-top:1px solid var(--mf-rule-dim)}
.promise-list{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:1fr;border-top:1px dashed var(--mf-rule-dim)}
.promise-list li{
  display:grid;grid-template-columns:80px 1fr;gap:0 36px;align-items:baseline;
  border-bottom:1px dashed var(--mf-rule-dim);
}
.promise-list li .n{
  font-family:var(--stencil);font-size:14px;letter-spacing:.3em;color:var(--gold);
  padding:24px 0;align-self:start;
}
.promise-list li .l{
  font-family:var(--hand);font-size:52px;font-weight:700;line-height:1.05;color:var(--text);
  padding:18px 0;letter-spacing:-.01em;
}
.promise-list li:hover .l{color:var(--gold)}

/* -- Live-in-the-wild (4 systems) ------------------------------------- */
.live-band{padding:72px 40px;border-top:1px solid var(--mf-rule-dim)}
.sys-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px;
}
.sys-card{
  background:var(--surface);border:1px solid var(--mf-rule-dim);border-radius:var(--radius);
  padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:border-color .2s, background .2s, transform .15s;
}
.sys-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);opacity:.55}
.sys-card:hover{border-color:var(--mf-rule);background:rgba(245,200,66,.03)}
.sys-head{display:flex;justify-content:space-between;align-items:center}
.sys-head .n{font-family:var(--stencil);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.sys-head .live-dot{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--stencil);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--green);
}
.sys-head .live-dot .dot-live{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px rgba(74,222,128,.7);animation:dog-pulse 1.6s ease-in-out infinite;
}
.sys-name{font-family:var(--hand);font-weight:700;font-size:42px;line-height:1;letter-spacing:-.01em;color:var(--text);margin:0}
.sys-card:hover .sys-name{color:var(--gold)}
.sys-body{display:flex;flex-direction:column;gap:12px}

.sys-rows{display:flex;flex-direction:column;gap:0;border-top:1px dashed var(--mf-rule-dim)}
.sys-row{
  display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;
  padding:8px 0;border-bottom:1px dashed var(--mf-rule-dim);
  font-family:var(--mono);font-size:12px;
}
.sys-row .t{font-family:var(--stencil);font-size:10px;letter-spacing:.2em;color:var(--muted)}
.sys-row .sym{color:var(--text-dim)}
.sys-row .pct{color:var(--gold);font-family:var(--hand);font-size:22px;font-weight:700;line-height:1}

.sys-metric{padding:4px 0 0}
.sys-metric .v{font-family:var(--hand);font-weight:700;font-size:64px;line-height:.9;color:var(--gold);letter-spacing:-.01em}
.sys-metric .k{font-family:var(--stencil);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px}

.sys-spark{width:100%;height:70px;display:block}

.sys-bar{height:6px;background:var(--navy);border:1px solid var(--mf-rule-dim);border-radius:2px;overflow:hidden;margin-top:6px}
.sys-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--blue));transition:width .2s linear}

.sys-heartbeat{display:flex;gap:3px;height:32px;align-items:center;margin-top:8px}
.sys-heartbeat .tick{flex:1;height:100%;background:var(--gold);border-radius:1px;transition:opacity .2s}

.sys-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:10px;margin-top:auto;border-top:1px dashed var(--mf-rule-dim);
  font-family:var(--stencil);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.sys-foot .live{color:var(--green)}

/* -- Six lanes --------------------------------------------------------- */
.lanes-band{padding:72px 40px;border-top:1px solid var(--mf-rule-dim)}
.lanes-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:24px;
  border-top:1px solid var(--mf-rule-dim);border-left:1px solid var(--mf-rule-dim);
}
.lanes-grid .lane{
  padding:30px 26px 26px;border-right:1px solid var(--mf-rule-dim);border-bottom:1px solid var(--mf-rule-dim);
  position:relative;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;
  transition:background .2s;cursor:pointer;
}
.lanes-grid .lane:hover{background:rgba(245,200,66,.04)}
.lanes-grid .lane-n{font-family:var(--stencil);font-size:12px;letter-spacing:.3em;color:var(--gold);margin-bottom:4px}
.lanes-grid .lane h3{font-family:var(--hand);font-weight:700;font-size:34px;line-height:1;margin:0 0 8px;color:var(--text);letter-spacing:-.01em}
.lanes-grid .lane p{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin:0;line-height:1.55;flex:1}
.lanes-grid .lane .lane-more{
  margin-top:16px;padding-top:12px;border-top:1px dashed var(--mf-rule-dim);
  font-family:var(--hand);font-size:20px;color:var(--blue);transition:color .15s,transform .15s;
}
.lanes-grid .lane:hover .lane-more{color:var(--blue-hover);transform:translateX(3px)}

.lanes-footer{
  margin-top:36px;padding:28px 0 0;border-top:1px dashed var(--mf-rule-dim);
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;text-align:left;
}
.lanes-footer .quote-mark{font-family:var(--hand);font-size:100px;line-height:.7;color:var(--gold);opacity:.5}
.lanes-footer p{font-family:var(--hand);font-weight:700;font-size:36px;line-height:1.15;color:var(--text);margin:0}

/* -- Start-a-project CTA (full-bleed, replaces old inline cta-band) --- */
.start-cta{
  padding:96px 40px;border-top:1px solid var(--mf-rule-dim);text-align:center;position:relative;
  background:radial-gradient(ellipse 800px 400px at 50% 100%, rgba(245,200,66,.08), transparent 70%);
}
.start-cta-inner{display:flex;flex-direction:column;align-items:center;gap:0}
.start-cta .eyebrow{margin-bottom:22px}
.start-cta h2{
  font-family:var(--hand);font-weight:700;font-size:clamp(56px,6.5vw,88px);line-height:1.08;letter-spacing:-.01em;
  margin:0 0 36px;color:var(--text);max-width:920px;
}
.start-cta h2 em{font-style:normal;color:var(--gold)}
.start-cta p{
  font-family:var(--mono);font-size:14px;color:var(--text-dim);
  max-width:640px;margin:0 0 36px;line-height:1.75;
}
.start-cta-actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.start-cta-sub{font-family:var(--hand);font-size:22px;color:var(--gold);transform:rotate(-1.5deg);display:inline-block}
.start-cta-stencil{
  margin-top:12px;font-family:var(--stencil);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}



/* ============================================================
   BRONNY SUPERVISOR STRIP (home, between hero + ticker)
   ============================================================ */
.bronny-strip{
  position:relative;
  padding:70px 0;
  background:linear-gradient(180deg, var(--navy) 0%, rgba(12,18,34,1) 100%);
  border-top:1px solid var(--mf-rule-dim);
  border-bottom:1px solid var(--mf-rule-dim);
  overflow:hidden;
}
.bronny-strip::before{
  /* faint grid backdrop */
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(var(--mf-rule-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--mf-rule-dim) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.12;
  pointer-events:none;
}
.bronny-strip::after{
  /* soft gold corner glow */
  content:'';position:absolute;right:-120px;top:-120px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,200,66,.12) 0%, transparent 70%);
  pointer-events:none;
}
.bronny-strip-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:420px 1fr;gap:60px;align-items:center;
}
.bronny-img-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
}
.bronny-img{
  width:100%;max-width:420px;height:auto;display:block;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(245,200,66,.08));
  transform:rotate(-1deg);
}
.bronny-paw-stamp{
  position:absolute;top:10px;left:-10px;
  font-family:var(--stencil);font-size:11px;letter-spacing:.28em;
  color:var(--gold);
  padding:8px 14px;border:2px solid var(--gold);border-radius:3px;
  background:rgba(8,12,20,.7);
  transform:rotate(-8deg);
  text-transform:uppercase;
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
  z-index:2;
}
.bronny-copy{
  max-width:560px;
}
.bronny-headline{
  font-family:var(--hand);font-weight:700;
  font-size:clamp(48px, 5.5vw, 76px);
  line-height:1;letter-spacing:-.02em;
  color:var(--text);
  margin:0 0 10px;
}
.bronny-headline .gold{color:var(--gold)}
.bronny-sub{
  font-family:var(--hand);
  font-size:22px;color:var(--blue);
  margin:0 0 22px;font-weight:500;
  transform:rotate(-1deg);display:inline-block;
}
.bronny-bio{
  font-family:var(--mono);font-size:14px;line-height:1.7;
  color:var(--text-dim);margin:0 0 26px;max-width:520px;
}
.bronny-meet{
  background:transparent;border:1px solid var(--mf-rule);
  color:var(--text);font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  padding:14px 22px;cursor:pointer;border-radius:3px;
  display:inline-flex;align-items:center;gap:12px;
  transition:border-color .15s, color .15s, background .15s;
}
.bronny-meet:hover{border-color:var(--gold);color:var(--gold);background:rgba(245,200,66,.05)}
.bronny-meet .arrow{color:var(--gold);font-size:14px}

@media (max-width:900px){
  .bronny-strip-inner{grid-template-columns:1fr;gap:32px;text-align:center}
  .bronny-img-wrap{max-width:320px;margin:0 auto}
  .bronny-copy{text-align:left;margin:0 auto}
  .bronny-headline{font-size:44px}
}

/* =========================================================
   SITEMAP
   ========================================================= */
.sitemap-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:20px;
}
.sm-col{
  border:1px solid var(--mf-rule-dim);border-radius:var(--radius);
  background:var(--surface);
  padding:22px 24px 24px;
}
.sm-col-head{
  padding-bottom:14px;margin-bottom:10px;
  border-bottom:1px dashed var(--mf-rule-dim);
}
.sm-list{
  list-style:none;margin:0;padding:0;
}
.sm-row{
  display:grid;grid-template-columns:36px 1fr;gap:12px;
  padding:14px 0;
  border-bottom:1px dashed var(--mf-rule-dim);
}
.sm-row:last-child{border-bottom:none}
.sm-num{
  font-family:var(--mono);color:var(--muted);
  font-size:11px;letter-spacing:.08em;padding-top:4px;
}
.sm-body{min-width:0}
.sm-link{
  font-family:var(--display);color:var(--text);
  font-size:20px;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  line-height:1.1;
}
.sm-link:hover{color:var(--gold)}
.sm-link .arrow{font-size:13px;color:var(--muted);transition:color .15s}
.sm-link:hover .arrow{color:var(--gold)}
.sm-desc{
  color:var(--text-dim);font-size:13px;line-height:1.55;
  margin-top:6px;
}

@media (max-width:1000px){
  .sitemap-grid{grid-template-columns:1fr}
}

/* =========================================================
   MOBILE NAV / BURGER
   ========================================================= */
.nav-burger{
  display:none;
  flex-direction:column;gap:5px;justify-content:center;align-items:center;
  width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--border);border-radius:4px;
  cursor:pointer;
}
.nav-burger span{
  display:block;width:22px;height:2px;background:var(--gold);
}
.mobile-nav{
  display:flex;flex-direction:column;gap:0;
  padding:8px 24px 20px;
  border-top:1px dashed var(--mf-rule-dim);
}
.mobile-nav a{
  font-family:var(--stencil);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text);text-decoration:none;
  padding:14px 0;border-bottom:1px dashed var(--mf-rule-dim);
}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav a:hover{color:var(--gold)}
.mobile-nav .mn-cta{
  font-family:var(--hand);font-size:22px;letter-spacing:0;
  color:#fff;background:var(--blue-deep);
  padding:10px 18px 8px;border-radius:3px;text-transform:none;
  margin-top:12px;border-bottom:none;
  display:inline-block;text-align:center;
}