:root {
    --bg: #f4f2ed;        /* warm off-white */
    --bg-elev: #ffffff;
    --ink: #17171a;       /* near-black */
    --ink-2: #3a3a3f;
    --muted: #6a6a70;
    --line: #dcd8cf;
    --line-2: #c9c4b8;
    --accent: #cc4a1b;    /* considered burnt-orange accent */
    --accent-ink: #1a1a1e;
    --paper: #ebe7de;
    --chip: #e6e2d8;
    --ok: #1d6b3a;
    --bad: #a4321c;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
  .display { font-family: 'Inter Tight', sans-serif; letter-spacing: -0.025em; line-height: 0.96; font-weight: 600; }
  .serif-off { font-family: 'Inter Tight', sans-serif; }

  /* ——— Top ribbon ——— */
  .ribbon {
    position: sticky; top: 0; z-index: 20;
    background: var(--ink); color: var(--bg);
    border-bottom: 1px solid #000;
  }
  .ribbon-inner {
    max-width: 1360px; margin: 0 auto; padding: 10px 32px;
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  }
  .ribbon-inner .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--accent); margin-right:8px; vertical-align: middle; }
  .ribbon a.jump { color: var(--bg); text-decoration: none; opacity: .7; margin-left: 22px; }
  .ribbon a.jump:hover { opacity: 1; }

  /* ——— Page container ——— */
  main { max-width: 1360px; margin: 0 auto; padding: 0 32px; }

  /* ——— Section header ——— */
  .sec-head {
    display: grid; grid-template-columns: 200px 1fr; gap: 32px;
    padding: 72px 0 28px; border-bottom: 1px solid var(--line);
  }
  .sec-head .label { color: var(--muted); }
  .sec-head h2 { margin: 0; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 40px; letter-spacing: -0.02em; line-height: 1.05; }
  .sec-head p { margin: 12px 0 0; color: var(--ink-2); max-width: 760px; font-size: 16px; }

  /* ——— INTRO ——— */
  .intro {
    padding: 56px 0 8px;
    display: grid; grid-template-columns: 200px 1fr; gap: 32px;
  }
  .intro .eyebrow { color: var(--muted); }
  .intro h1 {
    margin: 0; font-family: 'Inter Tight', sans-serif; font-weight: 600;
    font-size: clamp(44px, 6.2vw, 88px); letter-spacing: -0.035em; line-height: 0.94;
  }
  .intro h1 em { font-style: normal; color: var(--accent); }
  .intro .lede { margin-top: 28px; max-width: 760px; color: var(--ink-2); font-size: 18px; line-height: 1.5; }
  .meta-row { display: flex; gap: 48px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .meta-row div .mono { color: var(--muted); display:block; margin-bottom: 6px;}
  .meta-row div strong { font-weight: 500; font-size: 15px; }

  /* ——— AUDIT ——— */
  .audit-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; padding: 40px 0 24px; }

  /* fake screenshot of current site */
  .current-shot {
    background: #fff; border: 1px solid var(--line-2); border-radius: 2px;
    overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 18px 40px -24px rgba(50,40,20,.25);
    position: relative;
  }
  .browser-bar {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: #efece4; border-bottom: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted);
  }
  .browser-bar .dots { display: flex; gap: 6px; }
  .browser-bar .dots span { width: 10px; height: 10px; border-radius: 50%; background: #d6d1c4; }
  .browser-bar .url { flex: 1; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; }

  .shot-body { padding: 0; background: #fff; min-height: 440px; position: relative; }
  .shot-nav {
    display: flex; align-items: center; gap: 14px; padding: 14px 22px;
    border-bottom: 1px solid #eee; font-size: 12.5px; color: #2a2a2a;
  }
  .shot-nav .logo-mock { width: 74px; height: 22px; background: linear-gradient(90deg,#d7d2c6 0 65%, transparent 65%); opacity: .6; border-radius: 2px; }
  .shot-nav .link { color: #2a66c9; text-decoration: underline; font-size: 12px; }
  .shot-hero { padding: 40px 30px 48px; }
  .shot-hero h1 { font-family: 'Times New Roman', serif; font-weight: 400; font-size: 42px; line-height: 1.1; margin: 0 0 16px; color: #1a1a1a; }
  .shot-hero p { font-family: 'Times New Roman', serif; font-size: 14px; line-height: 1.5; color: #444; margin: 0 0 28px; max-width: 620px; }
  .shot-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 16px; }
  .shot-tile { border: 1px solid #eee; padding: 18px; text-align: center; }
  .shot-tile .emj { font-size: 32px; }
  .shot-tile .cap { font-family: 'Times New Roman', serif; font-size: 13px; color: #222; margin-top: 8px; }
  .shot-partners { padding: 22px 30px; border-top: 1px solid #eee; background: #fafafa; font-family: 'Times New Roman', serif; font-size: 12px; color: #555; }
  .shot-partners .bar { margin-top: 8px; height: 56px; background: repeating-linear-gradient(90deg, #e5e5e5 0 60px, transparent 60px 80px); border-radius: 2px; }
  .annot-pin {
    position: absolute; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600; display: grid; place-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: default; z-index: 3;
  }

  .audit-issues { }
  .audit-issues h3 { margin: 0 0 16px; font-family: 'Inter Tight'; font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
  .issue {
    display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: start;
    padding: 18px 0; border-top: 1px solid var(--line);
  }
  .issue:last-child { border-bottom: 1px solid var(--line); }
  .issue .num {
    width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff;
    display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  }
  .issue .txt strong { display:block; font-weight: 600; font-size: 15.5px; margin-bottom: 2px; }
  .issue .txt span { color: var(--ink-2); font-size: 14px; }
  .issue .sev { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
  .issue .sev.high { color: var(--bad); }
  .issue .sev.med { color: #8a6a1a; }

  .audit-scores {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    margin-top: 8px;
  }
  .score { padding: 22px 20px; border-right: 1px solid var(--line); }
  .score:last-child { border-right: none; }
  .score .mono { color: var(--muted); }
  .score .val { font-family: 'Inter Tight'; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
  .score .bar { height: 4px; background: var(--line); margin-top: 10px; position: relative; border-radius: 2px; overflow: hidden; }
  .score .bar i { position: absolute; inset: 0; background: var(--ink); width: 0%; }
  .score.a .bar i { background: var(--bad); }

  /* ——— PRINCIPLES ——— */
  .principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 32px; }
  .pr { padding: 28px 24px; border-right: 1px solid var(--line); }
  .pr:last-child { border-right: none; }
  .pr .mono { color: var(--muted); }
  .pr h4 { margin: 10px 0 8px; font-family: 'Inter Tight'; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; line-height: 1.15; }
  .pr p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

  /* ——— REDESIGN PROTOTYPE (browser frame) ——— */
  .proto-wrap {
    margin: 48px 0 0;
    background: #d9d4c6; padding: 22px; border-radius: 6px;
    box-shadow: 0 30px 80px -30px rgba(40,30,10,.35);
  }
  .proto {
    background: var(--bg); border-radius: 4px; overflow: hidden;
    border: 1px solid var(--line-2);
  }
  .proto-browser {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: #e9e5db; border-bottom: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted);
  }
  .proto-browser .dots { display: flex; gap: 6px; }
  .proto-browser .dots span { width: 10px; height: 10px; border-radius: 50%; background: #c6c1b3; }
  .proto-browser .url { flex: 1; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; }

  /* proto nav */
  .pnav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 40px; border-bottom: 1px solid var(--line);
  }
  .pnav .brand { display: flex; align-items: center; gap: 10px; font-family: 'Inter Tight'; font-weight: 800; font-size: 24px; letter-spacing: -0.04em; text-transform: lowercase; line-height: 1; }
  .pnav .brand .mark {
    width: 22px; height: 22px; background: #ff6a00; border-radius: 50%;
    display: inline-block; flex: none;
  }
  .pnav .brand .suf { color: var(--muted); font-weight: 400; font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
  .pnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; font-size: 14px; }
  .pnav ul li a { text-decoration: none; color: var(--ink); opacity: .85; }
  .pnav .cta { background: var(--ink); color: var(--bg); padding: 10px 16px; font-size: 13px; border-radius: 2px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
  .pnav .cta::after { content: "→"; }

  /* mobile nav toggle (hamburger) — hidden on desktop */
  .nav-toggle {
    display: none; background: transparent; border: 1px solid var(--line-2);
    padding: 10px 12px; cursor: pointer; border-radius: 2px; color: var(--ink);
    align-items: center; justify-content: center;
  }
  .nav-toggle .bars { display: block; position: relative; width: 18px; height: 2px; background: currentColor; }
  .nav-toggle .bars::before, .nav-toggle .bars::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
  }
  .nav-toggle .bars::before { top: -6px; }
  .nav-toggle .bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }

  /* proto hero */
  .phero {
    display: grid; grid-template-columns: 1fr;
    padding: 64px 40px 40px; border-bottom: 1px solid var(--line);
    gap: 40px;
  }
  .phero .kicker { color: var(--muted); margin-bottom: 20px; }
  .phero h1 {
    margin: 0; font-family: 'Inter Tight', sans-serif; font-weight: 600;
    font-size: clamp(56px, 8.4vw, 140px); letter-spacing: -0.045em; line-height: 0.92;
  }
  .phero h1 .line { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0.18em; }
  .phero h1 em { font-style: normal; color: var(--accent); }
  .phero h1 .verb-slot {
    display: inline-flex; vertical-align: baseline; position: relative;
    height: 1.2em; line-height: 1.2; overflow: hidden;
    color: var(--accent); flex: 1 1 auto; min-width: 0;
  }
  .phero h1 .verb-stack {
    display: flex; flex-direction: column; align-items: flex-start;
    transition: transform .6s cubic-bezier(.6,.04,.2,1);
    will-change: transform;
  }
  .phero h1 .verb-stack > span { display: block; height: 1.2em; line-height: 1.2; font-style: italic; font-weight: 600; white-space: nowrap; }
  .proto.hero-editorial .phero h1 .verb-stack > span { font-style: normal; } /* parent already italic */
  .proto.hero-loud .phero h1 .verb-stack > span { font-style: normal; font-weight: 700; }
  .phero .sub { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; border-top: 1px solid var(--line); padding-top: 28px; }
  .phero .sub p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 560px; }
  .phero .ctas { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
  .phero .ctas a { text-decoration: none; padding: 12px 20px; font-size: 13.5px; border-radius: 2px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  .phero .ctas .primary { background: var(--ink); color: var(--bg); }
  .phero .ctas .ghost { border: 1px solid var(--line-2); color: var(--ink); }
  .phero .ctas .primary::after { content: "→"; }

  /* running stats strip */
  .pstats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-bottom: 1px solid var(--line);
  }
  .pstats div { padding: 22px 28px; border-right: 1px solid var(--line); }
  .pstats div:last-child { border-right: none; }
  .pstats .mono { color: var(--muted); }
  .pstats .v { font-family: 'Inter Tight'; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
  .pstats .d { color: var(--ink-2); font-size: 13px; margin-top: 2px; }

  /* service matrix */
  .services {
    padding: 56px 40px 24px;
    display: grid; grid-template-columns: 260px 1fr; gap: 40px;
    border-bottom: 1px solid var(--line);
  }
  .services .lead .mono { color: var(--muted); }
  .services .lead h2 { font-family: 'Inter Tight'; font-weight: 600; font-size: 36px; letter-spacing: -0.025em; line-height: 1.05; margin: 14px 0 16px; }
  .services .lead p { color: var(--ink-2); margin: 0; font-size: 14.5px; }
  .svc-list { display: flex; flex-direction: column; }
  .svc {
    display: grid; grid-template-columns: 48px 1fr 1.3fr 120px; gap: 28px;
    padding: 22px 0; border-top: 1px solid var(--line); align-items: start;
    cursor: pointer; transition: background .2s;
  }
  .svc:last-child { border-bottom: 1px solid var(--line); }
  .svc:hover { background: rgba(204,74,27,0.03); }
  .svc:hover .svc-title { color: var(--accent); }
  .svc .svc-num { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); padding-top: 4px; }
  .svc .svc-title { font-family: 'Inter Tight'; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; transition: color .2s; }
  .svc .svc-title small { display:block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; font-weight: 400; }
  .svc .svc-desc { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
  .svc .svc-arrow { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); padding-top: 4px; }
  .svc .svc-arrow span { display: inline-block; transition: transform .2s; }
  .svc:hover .svc-arrow span { transform: translateX(4px); color: var(--accent); }

  /* proof — mini case card */
  .proof {
    padding: 56px 40px; border-bottom: 1px solid var(--line);
    display: grid; grid-template-columns: 260px 1fr; gap: 40px;
  }
  .proof .lead .mono { color: var(--muted); }
  .proof .lead h2 { font-family: 'Inter Tight'; font-weight: 600; font-size: 36px; letter-spacing: -0.025em; margin: 14px 0 0; line-height: 1.05; }
  .cases { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .case {
    background: var(--bg-elev); border: 1px solid var(--line); padding: 24px;
    display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden;
  }
  .case .tag { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .case h3 { margin: 0; font-family: 'Inter Tight'; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
  .case .big {
    font-family: 'Inter Tight'; font-size: 64px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-top: 8px;
  }
  .case .big em { font-style: normal; color: var(--accent); }
  .case .cap { color: var(--ink-2); font-size: 13.5px; max-width: 380px; }
  .case .meta { margin-top: auto; display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

  /* partners logos row */
  .partners { padding: 40px 40px; border-bottom: 1px solid var(--line); }
  .partners .lab { color: var(--muted); margin-bottom: 18px; }
  .logo-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .logo {
    padding: 28px 12px; border-right: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-2); font-family: 'Inter Tight'; font-weight: 500; font-size: 15px; letter-spacing: -0.01em;
  }
  .logo:last-child { border-right: none; }
  .logo .ms-squares { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 14px; height: 14px; margin-right: 7px; }
  .logo .ms-squares i { background: currentColor; opacity: .8; }

  /* closing cta / contact band */
  .cta-band {
    padding: 72px 40px; background: var(--ink); color: var(--bg);
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end;
  }
  .cta-band h2 { margin: 0; font-family: 'Inter Tight'; font-weight: 600; font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.03em; line-height: 0.98; }
  .cta-band h2 em { font-style: normal; color: var(--accent); }
  .cta-band .meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(244,242,237,.6); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 16px;}
  .cta-band .form { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); padding: 24px; }
  .cta-band .form label { display:block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(244,242,237,.6); margin-bottom: 6px; }
  .cta-band .form input, .cta-band .form select, .cta-band .form textarea {
    width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.2);
    color: var(--bg); padding: 8px 0; font-family: 'Inter', sans-serif; font-size: 14px; outline: none; margin-bottom: 18px;
  }
  .cta-band .form textarea { min-height: 44px; resize: vertical; }
  .cta-band .form button {
    background: var(--accent); color: #fff; border: none; padding: 12px 18px; font-family: 'Inter', sans-serif;
    font-size: 13.5px; font-weight: 500; cursor: pointer; display: inline-flex; gap: 8px; align-items: center;
  }
  .cta-band .form button::after { content: "→"; }

  .proto-footer {
    padding: 32px 40px; display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  }

  /* ——— COMPARE tabs ——— */
  .compare { display: flex; gap: 10px; margin-top: 8px; }
  .compare button {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    padding: 8px 14px; background: transparent; border: 1px solid var(--line-2); cursor: pointer; color: var(--ink); border-radius: 2px;
  }
  .compare button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  /* ——— TWEAKS PANEL ——— */
  #tweaks {
    position: fixed; right: 20px; bottom: 20px; z-index: 50;
    width: 300px; background: #fff; border: 1px solid var(--line-2); border-radius: 6px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,.2);
    display: none;
    overflow: hidden;
  }
  #tweaks.on { display: block; }
  #tweaks header { padding: 12px 16px; background: var(--ink); color: var(--bg); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; display: flex; justify-content: space-between; }
  #tweaks .body { padding: 16px; }
  #tweaks .grp { margin-bottom: 18px; }
  #tweaks .grp:last-child { margin-bottom: 0; }
  #tweaks .glabel { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
  #tweaks .row { display: flex; gap: 6px; flex-wrap: wrap; }
  #tweaks .sw { border: 1px solid var(--line-2); padding: 4px 10px; font-size: 12px; cursor: pointer; background: #fff; border-radius: 2px; display: inline-flex; gap: 6px; align-items: center; }
  #tweaks .sw.on { background: var(--ink); color: #fff; border-color: var(--ink); }
  #tweaks .sw i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }

  /* dark theme applied to proto */
  .proto.theme-dark { background: #141416; color: #ededed; border-color: #2a2a2e; }
  .proto.theme-dark .proto-browser { background: #1d1d21; color: #888; border-color: #2a2a2e; }
  .proto.theme-dark .proto-browser .url { background: #232327; border-color: #2a2a2e; color: #b4b4b8; }
  .proto.theme-dark .pnav { border-color: #24242a; }
  .proto.theme-dark .pnav .brand { color: #ededed; }
  .proto.theme-dark .pnav .cta { background: var(--accent); color: #fff; }
  .proto.theme-dark .phero { border-color: #24242a; }
  .proto.theme-dark .phero .ctas .primary { background: var(--accent); color: #fff; }
  .proto.theme-dark .phero .ctas .ghost { border-color: #35353a; color: #ededed; }
  .proto.theme-dark .phero .right p { color: #b7b7bd; }
  .proto.theme-dark .pstats, .proto.theme-dark .pstats div { border-color: #24242a; }
  .proto.theme-dark .pstats .d { color: #a7a7ad; }
  .proto.theme-dark .services, .proto.theme-dark .proof, .proto.theme-dark .partners { border-color: #24242a; }
  .proto.theme-dark .svc, .proto.theme-dark .svc:last-child { border-color: #24242a; }
  .proto.theme-dark .svc:hover { background: rgba(204,74,27,0.09); }
  .proto.theme-dark .services .lead p, .proto.theme-dark .svc .svc-desc { color: #a7a7ad; }
  .proto.theme-dark .case { background: #1b1b1f; border-color: #2a2a2e; }
  .proto.theme-dark .case .meta, .proto.theme-dark .case .cap { color: #a7a7ad; border-color: #2a2a2e; }
  .proto.theme-dark .logo-row, .proto.theme-dark .logo { border-color: #24242a; color: #bfbfc5; }
  .proto.theme-dark .proto-footer { color: #7a7a80; }
  .proto.theme-dark .cta-band { background: #0b0b0d; }

  /* Hero variant — editorial (serif accent) */
  .proto.hero-editorial .phero h1 { font-family: 'Inter Tight'; font-style: italic; font-weight: 400; letter-spacing: -0.03em; }
  .proto.hero-editorial .phero h1 em { font-family: 'Inter Tight'; font-weight: 600; font-style: normal; }

  /* Hero variant — condensed loud */
  .proto.hero-loud .phero h1 { font-family: 'Inter Tight'; text-transform: uppercase; font-weight: 700; font-size: clamp(44px, 5.2vw, 78px); letter-spacing: -0.035em; line-height: 0.95; }

  /* Accent variants */
  .proto.accent-blue { --accent: #1f55c4; }
  .proto.accent-green { --accent: #1f6b44; }
  .proto.accent-violet { --accent: #5941c2; }

  /* Footer of doc */
  .docfoot { padding: 64px 0 80px; border-top: 1px solid var(--line); margin-top: 56px; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; display: flex; justify-content: space-between; }

  @media (max-width: 900px) {
    .sec-head, .intro, .audit-grid, .services, .proof, .phero, .phero .sub, .cta-band { grid-template-columns: 1fr; }
    .phero .sub { align-items: start; gap: 24px; }
    .phero .ctas { justify-content: flex-start; }
    .audit-scores, .principles, .pstats, .cases, .logo-row { grid-template-columns: 1fr 1fr; }

    /* mobile nav: wrap ul to its own row and hide by default */
    .pnav { flex-wrap: wrap; row-gap: 12px; padding: 16px 20px; }
    .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
    .pnav .cta { order: 1; font-size: 12px; padding: 8px 12px; }
    .pnav ul {
      display: none; flex-basis: 100%; order: 3;
      flex-direction: column; gap: 0;
      border-top: 1px solid var(--line);
      padding: 8px 0 4px; margin: 4px 0 0;
    }
    .pnav ul.open { display: flex; }
    .pnav ul li { border-bottom: 1px solid var(--line); }
    .pnav ul li:last-child { border-bottom: none; }
    .pnav ul li a { display: block; padding: 12px 4px; font-size: 15px; }

    /* tweaks panel — cap width so it never overflows narrow phones */
    #tweaks { width: min(300px, calc(100vw - 24px)); right: 12px; bottom: 12px; }

    /* svc rows: drop the trailing arrow col so title/desc have room */
    .svc { grid-template-columns: 40px 1fr; gap: 16px; }
    .svc .svc-desc { grid-column: 1 / -1; }
    .svc .svc-arrow { display: none; }
  }

  @media (max-width: 640px) {
    .pnav .brand .suf { display: none; }
    .pnav .cta { display: none; }

    /* tighten hero / intro type for small phones so headings don't overflow */
    .phero { padding-left: 20px; padding-right: 20px; padding-top: 40px; }
    .phero > div { min-width: 0; }
    .phero h1 { font-size: clamp(34px, 10.5vw, 56px); letter-spacing: -0.03em; overflow-wrap: anywhere; }
    .phero .kicker { overflow-wrap: anywhere; }
    .intro h1 { font-size: clamp(34px, 10vw, 60px); overflow-wrap: anywhere; }
    .pstats { grid-template-columns: 1fr 1fr; }
    .pstats div { padding: 16px 18px; }
    .cta-band { padding-left: 20px; padding-right: 20px; padding-top: 48px; padding-bottom: 48px; }
    .cta-band h2 { font-size: clamp(32px, 8vw, 56px); }
  }