/* ============ Tokens: two deliberate themes ============ */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --bg: #0B0B0C;
    --card: #101011;
    --card-2: #141416;
    --card-3: #17171a;
    --line: #222226;
    --line-2: #3a3a40;
    --ink: #F4F1EA;
    --ink-2: #cfccc3;
    --muted: #A9A69E;
    --lime: #c6ff3d;          /* raw accent for surfaces, glows, chips */
    --acc: #c6ff3d;           /* accent when used as TEXT (AA-safe per theme) */
    --chip-bg: rgba(255,255,255,0.02);
    --nav-bg: rgba(11,11,12,0.8);
    --foot-bg: #0a0a0b;
    --shadow: 0 30px 70px -28px rgba(0,0,0,0.72);
    --glow: rgba(198,255,61,0.14);
    --grain-o: 0.05;
    --radius: 20px;
    --maxw: 1200px;
    --cardw: clamp(216px, 24vw, 300px);
    --serif: 'Instrument Serif', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, sans-serif;
  }
  html.light {
    --bg: #f5f1ea;
    --card: #fbf8f1;
    --card-2: #efe9dd;
    --card-3: #e9e2d3;
    --line: #d9d2c4;
    --line-2: #c6bcaa;
    --ink: #141414;
    --ink-2: #453f34;
    --muted: #6b6257;
    --acc: #556b00;           /* darkened lime — 5.3:1 on cream */
    --chip-bg: rgba(20,20,20,0.03);
    --nav-bg: rgba(245,241,234,0.82);
    --foot-bg: #efe9df;
    --shadow: 0 26px 54px -26px rgba(72,60,38,0.30);
    --glow: rgba(173,224,42,0.22);
    --grain-o: 0.035;
  }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg); color: var(--ink);
    font-family: var(--sans); font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; }
  ::selection { background: var(--lime); color: #0B0B0C; }
  :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
  .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  .skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 300;
    background: var(--lime); color: #0B0B0C; font-weight: 600;
    padding: 10px 18px; border-radius: 999px; transition: top .2s ease;
  }
  .skip-link:focus { top: 12px; }

  h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
  em, .it { font-style: italic; }
  h1 em, h2 em { color: var(--acc); }

  .tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted);
  }
  .tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); flex: none; }

  /* Film grain — tiny inline SVG, static texture */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 180; pointer-events: none;
    opacity: var(--grain-o);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ============ Buttons ============ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 28px; border-radius: 999px;
    font-weight: 600; font-size: 15.5px; line-height: 1;
    transition: box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  }
  .btn-lime { background: var(--lime); color: #0B0B0C; }
  .btn-lime:hover { box-shadow: 0 12px 34px -8px rgba(198,255,61,0.45); }
  .btn-ghost { border: 1px solid var(--line-2); color: var(--ink); }
  .btn-ghost:hover { border-color: var(--acc); color: var(--acc); }
  .btn-sm { padding: 11px 20px; font-size: 14px; }
  .mag { will-change: transform; }
  .mag-release { transition: transform .55s cubic-bezier(.16,.8,.26,1.15), box-shadow .18s ease, border-color .18s ease, color .18s ease; }

  /* ============ Nav ============ */
  .top {
    position: sticky; top: 0; z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .top .inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; }
  .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
  /* The mark image already carries its own black tile + rounded corners,
     so the container is just a sizing box — no padding, no second background. */
  .logo-mark {
    width: 34px; height: 34px; border-radius: 9px; flex: none; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0;
  }
  .logo-mark .nx-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.light .logo-mark { box-shadow: 0 0 0 1px rgba(20,20,20,.14); }
  .foot-brand .logo-mark { width: 44px; height: 44px; border-radius: 12px; }
  .nav-links { display: flex; gap: 26px; font-size: 14.5px; font-weight: 500; color: var(--muted); }
  .nav-links a { padding: 4px 2px; transition: color .15s ease; }
  .nav-links a:hover { color: var(--ink); }
  .nav-right { display: flex; align-items: center; gap: 12px; }
  .theme-toggle {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line-2); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
  }
  .theme-toggle:hover { border-color: var(--acc); color: var(--acc); }
  .theme-toggle svg { width: 17px; height: 17px; }
  .theme-toggle .i-moon { display: none; }
  html.light .theme-toggle .i-sun { display: none; }
  html.light .theme-toggle .i-moon { display: block; }
  @media (max-width: 860px) { .nav-links { display: none; } }
  @media (max-width: 460px) { .nav-right .btn { display: none; } }

  /* ============ Hero ============ */
  .hero { position: relative; padding: 88px 0 30px; }
  .hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(900px 480px at 82% -10%, var(--glow), transparent 62%),
      radial-gradient(700px 420px at -10% 30%, rgba(198,255,61,0.05), transparent 60%);
  }
  .hero .wrap { position: relative; z-index: 1; }
  .hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .orb { position: absolute; border-radius: 50%; filter: blur(72px); will-change: transform; }
  .orb.o1 { width: 440px; height: 440px; right: -120px; top: -80px; background: radial-gradient(circle, rgba(198,255,61,0.26), transparent 70%); }
  .orb.o2 { width: 300px; height: 300px; left: -110px; bottom: -40px; background: radial-gradient(circle, rgba(198,255,61,0.16), transparent 70%); }
  .hero-ghost {
    position: absolute; right: -3%; top: 4%;
    font-family: var(--serif); font-style: italic;
    font-size: clamp(130px, 21vw, 300px); line-height: 1; letter-spacing: -0.02em;
    color: transparent; -webkit-text-stroke: 1px var(--line-2);
    opacity: .32; user-select: none; will-change: transform;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--muted); font-weight: 500;
    border: 1px solid var(--line); background: var(--chip-bg);
    padding: 7px 14px; border-radius: 999px;
  }
  .hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px var(--glow); }
  .hero-cert {
    display: inline-flex; align-items: center; gap: 8px; margin-left: 10px;
    font-size: 13px; font-weight: 600; color: var(--ink);
    border: 1px solid var(--line); background: var(--chip-bg);
    padding: 7px 14px; border-radius: 999px; text-decoration: none;
    transition: border-color .18s ease;
  }
  .hero-cert:hover, .hero-cert:focus-visible { border-color: var(--lime); }
  .hero-cert .hc-g {
    display: inline-grid; place-items: center; width: 20px; height: 20px;
    border-radius: 50%; background: #fff;
  }
  .hero-cert .hc-check { color: var(--lime); }
  @media (max-width: 640px) { .hero-cert { margin-left: 0; margin-top: 8px; } }
  h1 {
    font-size: clamp(46px, 7vw, 92px);
    line-height: 1.02; letter-spacing: -0.025em;
    margin: 26px 0 24px; max-width: 15ch;
  }
  /* Per-word masked reveal (only when .split is applied by JS) */
  .split .wrd { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
  .split .wrd-i { display: inline-block; transform: translateY(115%); transition: transform .85s cubic-bezier(.19,.66,.22,1); will-change: transform; }
  .hero-go .split .wrd-i { transform: none; }
  html.anim .rise { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.25,1); }
  html.anim.hero-go .rise { opacity: 1; transform: none; }
  html.anim .rise.r2 { transition-delay: .55s; }
  html.anim .rise.r3 { transition-delay: .68s; }
  html.anim .rise.r4 { transition-delay: .8s; }
  /* --- Hero guarantee ---------------------------------------------------
     The headline names the problem; this removes the risk before the reader
     has to scroll. Lime rule so it reads as a promise, not another sentence. */
  .hero-guarantee {
    display: block; max-width: 600px; margin: 0 0 22px;
    padding: 14px 0 14px 18px; border-left: 3px solid var(--lime);
  }
  .hero-guarantee-main {
    display: block; font-family: var(--serif);
    font-size: clamp(25px, 2.7vw, 34px); line-height: 1.12;
    letter-spacing: -0.01em; color: var(--ink);
  }
  .hero-guarantee-fine {
    display: block; margin-top: 7px;
    font-size: 13.5px; line-height: 1.5; color: var(--muted);
  }
  @media (max-width: 700px) { .hero-guarantee { padding-left: 14px; margin-bottom: 20px; } }

  .hero-sub { font-size: clamp(16.5px, 1.35vw, 19px); color: var(--muted); max-width: 600px; margin-bottom: 32px; }
  .hero-sub strong { color: var(--ink); font-weight: 600; }
  .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }
  /* --- Hero: two columns on desktop -------------------------------------
     Single-column left-aligned text left ~598px of the fold empty on a 1280px
     screen. The right column carries a real client build instead of nothing. */
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; }
  .hero-copy { min-width: 0; }
  .hero-proof {
    display: block; position: relative; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--card);
    padding: 14px 14px 16px; box-shadow: 0 28px 60px -30px rgba(0,0,0,.85);
    transform: rotate(-1.4deg); transition: transform .35s cubic-bezier(.2,.65,.25,1), border-color .25s ease;
  }
  .hero-proof:hover { transform: rotate(0deg) translateY(-4px); border-color: var(--line-2); }
  .hero-proof:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
  .hero-proof-shot { display: block; border-radius: calc(var(--radius) - 6px); overflow: hidden; aspect-ratio: 16 / 10; }
  .hero-proof-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
  .hero-proof-meta { display: block; margin-top: 13px; }
  .hero-proof-name { display: block; font-weight: 600; font-size: 15px; color: var(--ink); }
  .hero-proof-loc { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
  .hero-proof-cta { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--acc); }
  @media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-proof { max-width: 420px; transform: none; }
  }
  @media (max-width: 700px) { .hero-proof { display: none; } }
  .dm-line { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
  .dm-line a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--lime); padding-bottom: 1px; }
  .dm-line a:hover { color: var(--acc); }

  /* ============ Sections ============ */
  section { padding: 96px 0; }
  .sec-head { max-width: 720px; margin-bottom: 48px; }
  .sec-head h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; margin: 18px 0 16px; }
  .sec-head p { color: var(--muted); font-size: 17px; max-width: 560px; }

  /* ============ 3D Portfolio Wheel ============ */
  #work { padding: 40px 0 84px; position: relative; }
  #work .sec-head { margin-bottom: 28px; }

  /* Base (no-JS) layout: honest static grid */
  .wheel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  @media (min-width: 900px) { html:not(.js) .wheel { grid-template-columns: repeat(4, 1fr); } }
  .w-card { position: relative; }
  .w-btn {
    display: block; width: 100%; text-align: left;
    background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    overflow: hidden; padding: 0; box-shadow: var(--shadow);
  }
  .w-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--card-3); }
  .w-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; -webkit-user-drag: none; }
  .w-cap { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-top: 1px solid var(--line); }
  .w-cap-txt { min-width: 0; flex: 1; }
  .w-name { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
  .w-loc { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
  .w-open {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--line-2); color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
  }
  .w-btn:hover .w-open { background: var(--lime); border-color: var(--lime); color: #0B0B0C; }

  /* JS + desktop: coverflow (fractional-index model, painted from JS) */
  @media (min-width: 700px) {
    .js .stage {
      position: relative;
      height: calc(var(--cardw) * 1.25 + 130px);
      perspective: calc(var(--cardw) * 3);
      touch-action: pan-y; user-select: none; -webkit-user-select: none;
      cursor: grab;
    }
    .js .stage.dragging { cursor: grabbing; }
    .js .stage::after {  /* floor shadow grounds the fan */
      content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
      width: min(70%, 680px); height: 56px; border-radius: 50%;
      background: radial-gradient(ellipse at center, var(--floor, rgba(0,0,0,0.5)), transparent 70%);
      pointer-events: none;
    }
    .js .wheel {
      position: absolute; inset: 0; display: block;
      transform-style: preserve-3d;
    }
    .js .w-card {
      position: absolute; left: 50%; top: 12px;
      width: var(--cardw);
      will-change: transform, opacity;
    }
    .js .w-card::after {  /* lime glow on the front card only */
      content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
      box-shadow: 0 0 0 1.5px var(--lime), 0 22px 70px -14px rgba(198,255,61,0.35);
      opacity: max(0, calc(var(--w, 0) * 2 - 1));
    }
  }
  html { --floor: rgba(0,0,0,0.5); }
  html.light { --floor: rgba(80,66,40,0.28); }

  /* JS + mobile (<700px): swipeable coverflow */
  @media (max-width: 699.98px) {
    .js .stage { position: relative; }
    .js .wheel {
      display: flex; gap: 16px; overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 10px calc(50vw - 39vw) 26px;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    .js .wheel::-webkit-scrollbar { display: none; }
    .js .w-card { flex: 0 0 78vw; max-width: 330px; scroll-snap-align: center; }
    .js .w-btn { will-change: transform; }
    .js .w-card { opacity: calc(.55 + .45 * var(--w, 1)); }
  }

  .wheel-ui { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; position: relative; z-index: 2; }
  .warr {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    border: 1px solid var(--line-2); color: var(--ink); font-size: 18px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
  }
  .warr:hover { border-color: var(--lime); background: var(--lime); color: #0B0B0C; }
  .wheel-hint { font-size: 13px; color: var(--muted); text-align: center; max-width: 42ch; }
  @media (max-width: 699.98px) { .wheel-hint .desk-only { display: none; } }

  /* ============ Project detail dialog ============ */
  .proj-dialog { border: none; padding: 0; background: transparent; color: var(--ink); max-width: min(980px, 94vw); width: 100%; margin: auto; }
  .proj-dialog::backdrop { background: rgba(5,5,6,0.66); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  html.light .proj-dialog::backdrop { background: rgba(30,25,15,0.45); }
  .proj-dialog[open] { animation: dlgIn .32s cubic-bezier(.2,.7,.3,1); }
  @keyframes dlgIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
  .dlg-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--card-2); border: 1px solid var(--line-2); color: var(--ink);
    font-size: 17px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
  }
  .dlg-close:hover { background: var(--lime); border-color: var(--lime); color: #0B0B0C; }
  .dlg-item { display: none; }
  .dlg-item.on {
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    background: var(--card); border: 1px solid var(--line-2); border-radius: 22px;
    overflow: hidden; box-shadow: var(--shadow); position: relative;
  }
  .dlg-media {
    background: var(--card-3); display: flex; align-items: center; justify-content: center;
    padding: 26px; max-height: 78vh;
  }
  .dlg-media img {
    max-height: calc(78vh - 52px); width: auto; max-width: 100%;
    object-fit: contain; border-radius: 10px; box-shadow: 0 18px 50px -18px rgba(0,0,0,0.55);
  }
  .dlg-body { padding: 40px 34px 32px; display: flex; flex-direction: column; gap: 12px; }
  .dlg-body h3 { font-size: clamp(28px, 3vw, 38px); line-height: 1.08; }
  .dlg-loc { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .dlg-desc { font-size: 15px; color: var(--ink-2); max-width: 46ch; }
  .work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .work-tags span {
    font-size: 12px; color: var(--muted); border: 1px solid var(--line);
    padding: 4px 11px; border-radius: 999px; background: var(--chip-bg);
  }
  .dlg-cta { margin-top: auto; padding-top: 18px; }
  @media (max-width: 760px) {
    .dlg-item.on { grid-template-columns: 1fr; max-height: 88vh; overflow: auto; }
    .dlg-media { padding: 16px; max-height: none; }
    .dlg-media img { max-height: 46vh; }
    .dlg-body { padding: 22px 22px 24px; }
  }
  /* No-JS: reveal dialog content as a plain readable block */
  html:not(.js) .proj-dialog { display: block; position: static; max-width: var(--maxw); margin: 0 auto; padding: 0 24px 64px; }
  html:not(.js) .dlg-item { display: block; border-top: 1px solid var(--line); padding: 24px 0; }
  html:not(.js) .dlg-close { display: none; }

  /* ============ Revenue leak calculator ============ */
  #leak { border-top: 1px solid var(--line); position: relative; overflow: hidden; }
  #leak::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(720px 400px at 88% 4%, var(--glow), transparent 62%);
  }
  #leak .wrap { position: relative; z-index: 1; }
  .leak-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: stretch; }
  .leak-inputs {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 30px 28px; display: flex; flex-direction: column; gap: 24px;
  }
  .leak-field { display: grid; gap: 12px; }
  .leak-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
  .leak-lab label { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
  .leak-val { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--acc); white-space: nowrap; }
  .leak-run { align-self: flex-start; margin-top: 2px; }
  .leak-result {
    background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 34px 30px; display: flex; flex-direction: column; justify-content: center;
  }
  .leak-state { display: none; }
  .leak-state.on { display: block; animation: qstep .3s ease; }
  .leak-work { font-size: 14px; color: var(--muted); max-width: 52ch; margin-bottom: 16px; }
  .leak-big { font-family: var(--serif); font-size: clamp(50px, 5.6vw, 78px); line-height: 1; color: var(--acc); }
  .leak-big small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
  .leak-cta { margin-top: 24px; }
  @media (max-width: 900px) { .leak-grid { grid-template-columns: 1fr; max-width: 620px; } }

  /* ============ Services ============ */
  #services { border-top: 1px solid var(--line); }
  /* 2x2 — a 4th service on a 3-wide grid strands one card alone on row two. */
  .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .svc {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 30px 28px 28px; position: relative; overflow: hidden;
    transition: border-color .2s ease;
  }
  .svc:hover { border-color: var(--line-2); }
  .svc .num {
    font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--acc);
    letter-spacing: 0.04em; margin-bottom: 22px;
  }
  .svc h3 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.12; margin-bottom: 12px; }
  .svc h3 em { color: var(--acc); }
  .svc > p { font-size: 14.5px; color: var(--muted); margin-bottom: 20px; }
  .svc ul { margin-top: auto; display: grid; gap: 10px; }
  .svc li { font-size: 14px; color: var(--ink-2); padding-left: 22px; position: relative; }
  .svc li::before { content: "◆"; position: absolute; left: 0; top: 0; font-size: 10px; color: var(--acc); }
  @media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; max-width: 560px; } }
  .svc-more { margin-top: 26px; font-size: 14.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
  .svc-more a { color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color .15s ease, border-color .15s ease; }
  .svc-more a:hover { color: var(--acc); border-bottom-color: var(--acc); }
  .svc-more a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }

  /* ============ Process ============ */
  #process { border-top: 1px solid var(--line); }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .step { border-top: 1px solid var(--line); padding-top: 24px; }
  .step .n { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 4vw, 54px); color: var(--acc); line-height: 1; }
  .step h3 { font-size: 24px; margin: 14px 0 10px; }
  .step p { font-size: 14.5px; color: var(--muted); max-width: 40ch; }
  @media (max-width: 800px) { .steps { grid-template-columns: 1fr; max-width: 560px; } }

  /* ============ FAQ ============ */
  #faq { border-top: 1px solid var(--line); }
  .faq-wrap { max-width: 780px; }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 22px 4px; font-family: var(--serif); font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.01em;
    transition: color .15s ease;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { color: var(--acc); }
  .faq-item summary .plus { font-family: var(--sans); font-size: 20px; font-weight: 400; color: var(--muted); flex: none; transition: transform .2s ease, color .2s ease; }
  .faq-item[open] summary .plus { transform: rotate(45deg); color: var(--acc); }
  .faq-item .a { padding: 0 4px 24px; color: var(--muted); font-size: 15.5px; max-width: 64ch; }
  .faq-item .a a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--lime); }
  .faq-item .a a:hover { color: var(--acc); }

  /* ============ Final CTA ============ */
  #book { border-top: 1px solid var(--line); position: relative; overflow: hidden; padding: 120px 0; }
  #book::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(760px 420px at 50% 115%, var(--glow), transparent 65%);
  }
  .book-inner { position: relative; text-align: center; max-width: 760px; margin: 0 auto; }
  .book-inner h2 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.05; margin: 20px 0 18px; }
  .book-inner p { color: var(--muted); font-size: 17px; max-width: 46ch; margin: 0 auto 34px; }
  .book-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 22px; }
  .book-alt { font-size: 14px; color: var(--muted); }
  .book-alt a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--lime); padding-bottom: 1px; }
  .book-alt a:hover { color: var(--acc); }

  /* ============ Footer ============ */
  footer { border-top: 1px solid var(--line); padding: 56px 0 118px; background: var(--foot-bg); } /* bottom room for the floating menu pill */
  .foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; }
  .foot-brand .big { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; margin-top: 18px; }
  .foot-brand .big .it { color: var(--acc); }
  .foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
  /* h3, not h4: jumping h2 -> h4 skips a level for anyone navigating by
   heading in a screen reader. Same visual weight, correct outline. */
.foot-col h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
  .foot-col a { display: block; font-size: 14.5px; color: var(--ink-2); padding: 4px 0; }
  .foot-col a:hover { color: var(--acc); }
  .foot-certs { border-top: 1px solid var(--line); padding: 22px 0; display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
  .foot-certs .fc-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .28em; font-size: 10.5px; color: var(--lime); align-self: center; margin-right: 8px; }
  .foot-certs a { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; min-width: 200px; transition: border-color .18s ease, transform .18s ease; }
  .foot-certs a:hover, .foot-certs a:focus-visible { border-color: var(--lime); transform: translateY(-2px); }
  .foot-certs .fc-brand { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
  .foot-certs .fc-name { font-size: 13.5px; color: var(--ink); font-weight: 600; }
  .foot-certs .fc-verify { font-size: 11px; color: var(--lime); }
  .foot-certs a:hover .fc-verify::after { content: " →"; }
  @media (max-width: 640px) { .foot-certs a { min-width: 100%; } }
  .foot-bottom { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }

  /* ============ Floating liquid menu ============ */
    /* Bottom-RIGHT, not bottom-centre. Fixed at the centre this pill sat
     permanently on top of the reading column: at the mobile fold it covered
     the @getnexis link in the hero, so tapping the link hit the menu instead.
     Anchored right it clears body text, and opened (280px) it still fits
     inside a 375px screen. */
.fmenu {
    position: fixed; right: 20px; bottom: 18px;
    z-index: 240; width: 150px; height: 48px; border-radius: 72px;
    background: var(--lime); overflow: hidden;
    box-shadow: 0 16px 44px -10px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .3s ease, visibility 0s linear .3s, transform .3s cubic-bezier(.2,.65,.25,1),
                width .8s cubic-bezier(.22,1,.36,1), height .8s cubic-bezier(.22,1,.36,1), border-radius .8s cubic-bezier(.22,1,.36,1);
  }

  /* Held back while the hero is on screen. Fixed to the viewport it sat on top
     of the fold — 62% of the @getnexis link was under it and the link's own
     centre wasn't tappable. It appears as soon as the page moves. */
  .fmenu.ready { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  html:not(.js) .fmenu { display: none; }
  .fmenu.open { width: 280px; height: 260px; border-radius: 32px; }
  .fmenu-liquid {  /* dark circle rising from below = the liquid morph */
    position: absolute; left: 50%; bottom: -200%; transform: translateX(-50%);
    width: 200%; height: 200%; border-radius: 50%;
    background: #0B0B0C; pointer-events: none;
    transition: bottom .8s cubic-bezier(.22,1,.36,1);
  }
  .fmenu.open .fmenu-liquid { bottom: -20%; transition-delay: .1s; }
  .fmenu-bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 48px; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: #141414; font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
    transition: color .4s ease;
  }
  .fmenu.open .fmenu-bar { color: #F4F1EA; transition-delay: .2s; }
  .fmenu-ham { position: relative; width: 18px; height: 12px; flex: none; }
  .fmenu-ham span {
    position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: transform .8s cubic-bezier(.22,1,.36,1);
  }
  .fmenu-ham span:nth-child(1) { top: 2px; }
  .fmenu-ham span:nth-child(2) { top: 8px; }
  .fmenu.open .fmenu-ham span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
  .fmenu.open .fmenu-ham span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
  .fmenu-items {
    position: absolute; left: 0; right: 0; top: 0; bottom: 44px; z-index: 1;
    padding: 24px 30px 0;
    visibility: hidden; opacity: 0;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .fmenu.open .fmenu-items { visibility: visible; opacity: 1; transition: opacity .45s ease .22s, visibility 0s; }
  .fmenu-items ul { display: flex; flex-direction: column; gap: 3px; }
  .fmenu-items a {
    display: inline-block; color: #F4F1EA; font-weight: 600; font-size: 17px;
    line-height: 1; padding: 7px 0;
  }
  .fmenu-items a:hover { color: var(--lime); }
  .fmenu-items a:focus-visible { outline-color: var(--lime); }
  /* Letter-flip: each char stacked twice in a 1em clipped box */
  .flip-vis { display: inline-flex; overflow: hidden; height: 1em; }
  .flip-sp { width: .3em; flex: none; }
  .flip-c { display: inline-block; height: 1em; overflow: hidden; }
  .flip-col { display: block; transition: transform .8s cubic-bezier(.22,1,.36,1); }
  .flip-col span { display: block; height: 1em; line-height: 1; }
  a.flip.hov .flip-col { transform: translateY(-50%); }

  /* ============ Qualifier gate before booking ============ */
  body.modal-lock { overflow: hidden; }
  .qual-dialog { border: none; padding: 0; background: transparent; color: var(--ink); max-width: min(960px, 94vw); width: 100%; margin: auto; }
  .qual-dialog::backdrop { background: rgba(5,5,6,0.66); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  html.light .qual-dialog::backdrop { background: rgba(30,25,15,0.45); }
  .qual-dialog[open] { animation: dlgIn .32s cubic-bezier(.2,.7,.3,1); }
  .qual-grid {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    background: var(--card); border: 1px solid var(--line-2); border-radius: 22px;
    overflow: hidden; box-shadow: var(--shadow); position: relative;
    max-height: min(760px, calc(100vh - 40px)) ;
  }
  .qual-left {
    background: var(--card-2); border-right: 1px solid var(--line);
    padding: 38px 32px 30px; display: flex; flex-direction: column; gap: 14px;
    overflow: hidden;
  }
  /* Dark mode gets a real image behind this panel instead of a flat fill: a
     black room lit only by screens, which is the look the brand already runs
     on. Layered as two backgrounds rather than a positioned pseudo-element so
     the text needs no z-index, and the scrim is opaque at the top where the
     headline sits and thins out over the glow at the bottom.
     Light mode deliberately keeps the flat panel. A near-black photograph
     dropped into a cream dialog reads as a different website mid-scroll. */
  html:not(.light) .qual-left {
    background-image:
      linear-gradient(180deg,
        rgba(20,20,22,1) 0%, rgba(20,20,22,1) 46%,
        rgba(20,20,22,0.86) 66%, rgba(20,20,22,0.70) 84%, rgba(20,20,22,0.62) 100%),
      url("/assets/qual-glow.webp");
    /* The source is cropped to the glow band alone, so it is laid in as a
       bottom-anchored strip at full panel width. `cover` was wrong here: the
       panel and the photo are nearly the same aspect, so cover scaled by
       height and the bottom anchor did nothing, parking the glow in the middle
       of the panel where it read as a bright smudge behind the text. */
    background-size: 100% auto, 100% auto;
    background-position: center top, center bottom;
    background-repeat: no-repeat, no-repeat;
  }
  .qual-left h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
  .qual-left > p { font-size: 14.5px; color: var(--muted); }
  .qual-meta { display: grid; gap: 10px; margin-top: auto; padding-top: 18px; }
  .qual-meta li { font-size: 13.5px; color: var(--ink-2); padding-left: 22px; position: relative; line-height: 1.45; }
  .qual-meta li::before {
    content: ""; position: absolute; left: 0; top: 10px;
    width: 12px; height: 1px; background: var(--acc); opacity: .8;
  }
  .qual-right { padding: 32px 32px 26px; display: flex; flex-direction: column; overflow-y: auto; min-height: 480px; }
  .qual-right form { display: flex; flex-direction: column; flex: 1; }
  .q-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-right: 44px; }
  .q-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
  .q-fill { height: 100%; width: 100%; border-radius: 999px; background: var(--lime); transform-origin: left; transform: scaleX(.1667); transition: transform .35s cubic-bezier(.22,1,.36,1); }
  .q-count { font-size: 12.5px; color: var(--muted); font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
  .q-step { display: none; }
  .q-step.on { display: block; animation: qstep .3s ease; }
  @keyframes qstep { from { opacity: 0; transform: translateY(8px); } }
  .q-q { display: block; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 18px; }
  .q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .q-opt {
    text-align: left; font-size: 14.5px; font-weight: 500; line-height: 1.3;
    padding: 14px 16px; border-radius: 12px;
    border: 1px solid var(--line-2); background: var(--chip-bg); color: var(--ink);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
  }
  .q-opt:hover { border-color: var(--lime); }
  .q-opt[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #0B0B0C; font-weight: 600; }

  /* Step 1 carries two groups. The three services are the product and get the
     weight; "All three" and "Not sure yet" are exits and stay quiet. Splitting
     them also fixes the grid: five items in two columns left one orphan cell
     hanging in the last row. Three rows plus a pair fills exactly. */
  .q-opts-lead { grid-template-columns: 1fr; gap: 8px; }
  .q-opt-lead {
    position: relative; display: grid; gap: 3px; overflow: hidden;
    padding: 15px 18px 15px 22px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
    transition: border-color .22s cubic-bezier(.16,1,.3,1), background .22s cubic-bezier(.16,1,.3,1), transform .16s ease;
  }
  html.light .q-opt-lead {
    background: linear-gradient(180deg, rgba(20,20,20,0.035), rgba(20,20,20,0.008));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  }
  /* The rail is the whole hover story: it grows from the top edge, so the eye
     is pulled down the row rather than at a box that merely changed colour. */
  .q-opt-lead::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--lime); transform: scaleY(0); transform-origin: 50% 0;
    transition: transform .3s cubic-bezier(.16,1,.3,1);
  }
  .q-opt-lead:hover, .q-opt-lead:focus-visible { border-color: var(--line-2); transform: translateX(1px); }
  .q-opt-lead:hover::before, .q-opt-lead:focus-visible::before, .q-opt-lead[aria-pressed="true"]::before { transform: scaleY(1); }
  .q-opt-n { font-family: var(--serif); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.2; letter-spacing: -0.005em; }
  .q-opt-d { font-size: 12.8px; line-height: 1.45; color: var(--muted); font-weight: 400; }
  /* Selected is a tint plus the rail, never a solid lime fill: these rows carry
     a description line, and muted grey on flat lime fails contrast outright. */
  .q-opt-lead[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(198,255,61,0.15), rgba(198,255,61,0.05));
    border-color: rgba(198,255,61,0.5); color: var(--ink); font-weight: 500;
  }
  html.light .q-opt-lead[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(85,107,0,0.13), rgba(85,107,0,0.05));
    border-color: rgba(85,107,0,0.42);
  }
  .q-opt-lead[aria-pressed="true"] .q-opt-n { color: var(--acc); }
  .q-opt-lead[aria-pressed="true"] .q-opt-d { color: var(--ink-2); }

  .q-opts-alt { margin-top: 8px; }
  .q-opts-alt .q-opt { font-size: 13.5px; padding: 12px 15px; color: var(--ink-2); }
  .q-opts-alt .q-opt:hover { color: var(--ink); }
  .q-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
  .q-field {
    width: 100%; margin-bottom: 12px; padding: 13px 15px; border-radius: 12px;
    border: 1px solid var(--line-2); background: var(--chip-bg); color: var(--ink);
    font: inherit; font-size: 14.5px;
  }
  .q-field::placeholder { color: var(--muted); }
  .q-field:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
  textarea.q-field { min-height: 130px; resize: vertical; }
  .q-budget { display: grid; gap: 16px; }
  .q-amount { font-family: var(--serif); font-size: clamp(34px, 4vw, 46px); line-height: 1; }
  .q-amount small { display: block; font-family: var(--sans); font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-top: 7px; }
  .q-slider-row { position: relative; padding-top: 36px; }
  input[type="range"].q-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
    background: var(--line); cursor: pointer; border: none; display: block;
  }
  .q-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--lime); border: 2px solid #0B0B0C; box-shadow: 0 2px 10px rgba(0,0,0,.35); cursor: grab;
  }
  .q-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--lime); border: 2px solid #0B0B0C; cursor: grab; }
  .q-slider-meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
  .q-tip {
    position: absolute; top: 4px; transform: translateX(-50%);
    background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600;
    padding: 3px 9px; border-radius: 7px; opacity: 0; transition: opacity .15s ease;
    pointer-events: none; white-space: nowrap;
  }
  .q-tip.show { opacity: 1; }
  .q-custom-toggle { font-size: 13.5px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; padding: 2px 0; text-align: left; justify-self: start; }
  .q-custom-toggle:hover { color: var(--acc); }
  .q-custom-row { display: flex; align-items: center; gap: 8px; }
  .q-custom-row[hidden] { display: none; }
  .q-custom-row .cur { font-weight: 600; color: var(--muted); }
  .q-custom-row .q-field { margin-bottom: 0; }
  .q-hint { font-size: 12.5px; color: var(--muted); }
  .q-err { min-height: 18px; margin-top: 10px; font-size: 13px; color: #ff9d8f; }
  html.light .q-err { color: #a03a2e; }
  .q-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; }
  .q-success h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 10px; }
  .q-success > p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; max-width: 52ch; }
  .q-calbox { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card-3); }
  .q-calbox iframe { display: block; width: 100%; height: 460px; border: 0; }
  .q-after { margin-top: 12px; font-size: 13px; color: var(--muted); }
  .q-after a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--lime); padding-bottom: 1px; }
  .q-after a:hover { color: var(--acc); }
  @media (max-width: 760px) {
    .qual-grid { grid-template-columns: 1fr; max-height: calc(100vh - 24px); }
    .qual-left { display: none; }
    .qual-right { padding: 26px 20px 22px; min-height: 0; }
    .q-progress { padding-right: 40px; }
    .q-opts { grid-template-columns: 1fr; }
    .q-calbox iframe { height: 420px; }
  }

  /* ============ Cursor accent ring (pointer:fine only, JS-gated) ============
     The native OS pointer is NEVER hidden. The ring is purely a decorative
     trailing accent: pointer-events none, thin outline, low opacity, and
     layered under the nav/menus (and under the top-layer dialogs) so it can
     never obscure a close button, form field, or anything clickable. */
  .cursor-ring {
    position: fixed; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border-radius: 50%; border: 1px solid var(--acc);
    pointer-events: none; z-index: 90; opacity: 0;
    will-change: transform; transition: opacity .25s ease;
  }
  html.cur-on .cursor-ring { opacity: .4; }

  /* ============ Reveal on scroll (JS-gated, motion-safe) ============ */
  .js .reveal { opacity: 0; transform: translateY(24px) scale(.985); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.25,1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: .08s; }
  .js .reveal.d2 { transition-delay: .16s; }
  .js .reveal.d3 { transition-delay: .24s; }

  /* ============ Reduced motion: kill ALL of it ============ */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .split .wrd-i { transform: none !important; transition: none !important; }
    html.anim .rise { opacity: 1; transform: none; transition: none; }
    .proj-dialog[open] { animation: none; }
    .orb, .hero-ghost, [data-px] { transform: none !important; }
    .btn, .svc, .warr, .theme-toggle, .w-open, .dlg-close, .faq-item summary .plus, .mag-release { transition: none; }
    .skip-link { transition: none; }
    .fmenu, .fmenu-liquid, .fmenu-bar, .fmenu-ham span, .fmenu-items, .flip-col { transition: none !important; }
    .qual-dialog[open] { animation: none; }
    .q-step.on { animation: none; }
    .q-fill, .q-tip, .q-opt { transition: none; }
    .leak-state.on { animation: none; }
  }

  @media (max-width: 640px) {
    section { padding: 72px 0; }
    .hero { padding: 56px 0 24px; }
    .hero-ctas .btn { width: 100%; }
    #book { padding: 88px 0; }
  }

/* ---- Calculator v3: business-type chips, hints, payoff horizon ---- */
.leak-step{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.leak-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.leak-chip{background:transparent;border:1px solid var(--line);color:var(--ink);font:inherit;
  font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.leak-chip:hover{border-color:var(--lime)}
.leak-chip[aria-pressed=true]{background:var(--lime);color:#0d0d0d;border-color:var(--lime)}
.leak-hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.leak-lead{font-size:14px;color:var(--muted);margin-bottom:2px}
.leak-lead strong{color:var(--lime)}
.leak-horizon{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.leak-hz-lab{font-size:13px;color:var(--muted);margin-bottom:6px}
.leak-hz{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:14px}
.leak-hz span{color:var(--muted)}
.leak-hz b{font-family:var(--serif);font-weight:400;font-size:19px}
.leak-hz.peak b{color:var(--lime);font-size:26px}
.leak-caveat{margin-top:8px;font-size:12px;color:var(--muted);opacity:.85}
@media (prefers-reduced-motion:reduce){.leak-chip{transition:none}}

/* ---- Money stream behind the revenue calculator ---- */
#leak{position:relative;isolation:isolate;overflow:hidden}
#leakStream{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.85}
#leak > .wrap{position:relative;z-index:1}
/* Light theme: the additive glow reads as haze on cream, so pull it right back */
html.light #leakStream{opacity:.30}
@media (prefers-reduced-motion:reduce){#leakStream{opacity:.4}}

/* ---- One-tap Google review CTA (footer) ---- */
.foot-col a.rev-cta,.rev-cta{display:inline-flex;align-items:center;gap:.7rem;margin-top:.85rem;padding:.7rem .95rem;
  border:1px solid var(--line);border-radius:14px;text-decoration:none;background:var(--card);
  transition:border-color .25s ease,transform .25s ease,background .25s ease}
.rev-cta:hover,.rev-cta:focus-visible{border-color:var(--lime);transform:translateY(-2px)}
.rev-stars{color:#f5b301;font-size:.95rem;letter-spacing:.06em;line-height:1}
.rev-text{display:flex;flex-direction:column;gap:.15rem}
.rev-text strong{font-size:.92rem;font-weight:600;color:var(--ink)}
.rev-text small{font-size:.76rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.rev-cta{transition:none}.rev-cta:hover{transform:none}}