/* ============ 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); }
  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-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; 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; }
  .foot-col h4 { 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-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; 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;
  }
  .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: 20px; position: relative; }
  .qual-meta li::before { content: "◆"; position: absolute; left: 0; top: 2px; font-size: 9px; color: var(--acc); }
  .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; }
  .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}}