/* NG Digital — lead-first homepage. Dark cinematic + electric lime. */
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bg: #0a0a0b;
  --bg-2: #101012;
  --bg-3: #16161a;
  --line: rgb(255 255 255 / 0.08);
  --line-2: rgb(255 255 255 / 0.14);
  --glass: rgb(255 255 255 / 0.035);
  --fg: #f4f4ef;
  --fg-2: #c8c8c1;
  --muted: #8d8d86;
  --lime: #c6ff3d;
  --lime-2: #deff8a;
  --lime-glow: rgb(198 255 61 / 0.45);
  --lime-soft: rgb(198 255 61 / 0.1);
  --ink: #0a0a0b;
  --danger: #ff6b5b;

  --f-display: "Schibsted Grotesk", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --nav-h: 68px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; letter-spacing: -0.035em; line-height: 1; font-weight: 800; }
p { margin: 0; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lime); color: var(--ink); padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.lime { color: var(--lime); }
.kicker { font: 600 0.78rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.lede { color: var(--fg-2); font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 56ch; }
.fineprint { color: var(--muted); font-size: 0.8rem; margin-top: 22px; }
section h2 { font-size: clamp(2.1rem, 5vw, 4rem); max-width: 18ch; }
.gallery h2 { max-width: 22ch; }
.hint-desk { display: none; }
@media (min-width: 640px) { .hint-desk { display: inline; } .hint-mob { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--glass); --btn-fg: var(--fg);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 700 0.98rem/1 var(--f-body); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn span[aria-hidden] { transition: transform .25s var(--ease); }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.btn-lime { --btn-bg: var(--lime); --btn-fg: var(--ink); border-color: var(--lime); box-shadow: 0 0 0 0 var(--lime-glow), 0 12px 40px -12px var(--lime-glow); }
.btn-lime:hover { transform: translateY(-2px); background: var(--lime-2); box-shadow: 0 0 0 6px var(--lime-soft), 0 18px 50px -14px var(--lime-glow); }
.btn-lime:active { transform: translateY(0); }
.btn-ghost:hover { border-color: var(--fg-2); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.9rem; }
.btn-lg { min-height: 58px; padding: 0 28px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .7; cursor: progress; }
.link-btn { background: none; border: 0; color: var(--muted); font-size: .88rem; cursor: pointer; padding: 10px 0 0; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--fg); }
.link-arrow { display: inline-block; margin-top: 14px; color: var(--lime); font-weight: 600; font-size: .95rem; text-decoration: none; border-bottom: 1px solid rgb(198 255 61 / .35); padding-bottom: 2px; }
.link-arrow:hover { border-color: var(--lime); }
.link-arrow.center { display: block; text-align: center; border: 0; color: var(--fg-2); font-weight: 500; }
.link-arrow.center:hover { color: var(--lime); }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgb(10 10 11 / 0.72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--line); }
.nav-inner { height: 100%; width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--f-display); }
.logo-mark { display: inline-flex; align-items: center; height: 34px; padding: 0 9px; border-radius: 10px; background: var(--lime); color: var(--ink); font-weight: 900; font-size: 1rem; letter-spacing: -0.04em; }
.logo-mark i { font-style: normal; opacity: .55; margin-left: 1px; }
.logo-word { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.03em; }
.nav-links { display: none; gap: 28px; margin-left: auto; }
.nav-links a { color: var(--fg-2); text-decoration: none; font-size: .93rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--fg); }
.nav-cta { margin-left: auto; }
@media (min-width: 900px) { .nav-links { display: flex; } .nav-cta { margin-left: 0; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: calc(var(--nav-h) + 28px) 0 64px; isolation: isolate; overflow: clip; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.orb-a { width: 620px; height: 620px; right: -160px; top: -120px; background: radial-gradient(circle, rgb(198 255 61 / .38), transparent 65%); animation: drift 18s ease-in-out infinite alternate; }
.orb-b { width: 520px; height: 520px; left: -220px; bottom: -180px; background: radial-gradient(circle, rgb(61 220 255 / .18), transparent 65%); animation: drift 22s ease-in-out infinite alternate-reverse; }
.grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 20%, transparent 75%); opacity: .6; }
@keyframes drift { to { transform: translate3d(-60px, 50px, 0) scale(1.08); } }
/* Scrolled past the hero (home.js): its ambient animations stop, so they don't compete with
   the carousel or keep the page producing frames nobody sees. */
.hero.is-away .orb, .hero.is-away .dot::after, .hero.is-away .live-dot { animation-play-state: paused; }

.hero-inner { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 28px; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--glass); font-size: .86rem; color: var(--fg-2); backdrop-filter: blur(8px); }
.pill b { color: var(--muted); font-weight: 400; }
/* The pulse is a ring scaled and faded with transform and opacity, which the compositor runs
   without repainting. (An animated box-shadow repainted the page on every frame, forever.) */
.dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lime-glow); animation: ping 2s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.5); opacity: 0; } }
.hero h1 { margin-top: 22px; font-size: clamp(2.75rem, 7.4vw, 6rem); line-height: .93; letter-spacing: -0.05em; font-weight: 850; }
.h-line { display: block; }
.h-accent { color: var(--lime); text-shadow: 0 0 60px rgb(198 255 61 / .25); }
[data-trade-headline] { display: inline-block; }
.hero-sub { margin-top: 22px; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--fg-2); max-width: 44ch; }

/* Builder form */
.builder { position: relative; padding: 22px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgb(255 255 255 / .055), rgb(255 255 255 / .02)); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .06); backdrop-filter: blur(12px); }
.field-label { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; color: var(--fg); margin-bottom: 10px; padding: 0; }
.optional { color: var(--muted); font-weight: 400; font-size: .82rem; }
.step-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--ink); font: 800 .75rem/1 var(--f-body); }
.builder input[type=text], .builder input[type=email], .builder input[type=tel], .quick-form input {
  width: 100%; height: 58px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line-2); background: rgb(0 0 0 / .45);
  font-size: 1.08rem; color: var(--fg); transition: border-color .2s, box-shadow .2s, background .2s;
}
.builder input::placeholder, .quick-form input::placeholder { color: #66665f; }
.builder input:focus, .quick-form input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 4px var(--lime-soft); background: rgb(0 0 0 / .6); }
.builder input[aria-invalid=true], .quick-form input[aria-invalid=true] { border-color: var(--danger); box-shadow: 0 0 0 4px rgb(255 107 91 / .14); }
.name-field { position: relative; }
.trades { border: 0; margin: 20px 0 20px; padding: 0; min-width: 0; }
/* The chips wait for the first letters of a name (home.js), keeping the button on the first screen. */
.builder.trades-waiting .trades { display: none; }
.builder.trades-waiting [data-next] { margin-top: 16px; }
.builder:not(.trades-waiting) .trades { animation: rise .4s var(--ease); }
.trade-list { display: flex; flex-wrap: wrap; gap: 8px; }
.trade { position: relative; }
.trade input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.trade span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(255 255 255 / .03); font-size: .9rem; font-weight: 500; color: var(--fg-2); transition: all .2s var(--ease); cursor: pointer; user-select: none; }
.trade:hover span { border-color: var(--fg-2); color: var(--fg); }
.trade input:checked + span { background: var(--lime); border-color: var(--lime); color: var(--ink); font-weight: 700; box-shadow: 0 6px 24px -8px var(--lime-glow); }
.trade input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 3px; }
.field { margin-bottom: 14px; }
.step2-title { font: 700 1.2rem/1.25 var(--f-display); letter-spacing: -0.02em; margin-bottom: 16px; }
.form-note { margin-top: 14px; font-size: .86rem; color: var(--muted); text-align: center; }
.form-note.is-err { color: var(--danger); }
.form-note.is-ok { color: var(--lime); }
.form-note a { color: var(--lime); }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.builder-step[hidden], .builder-done[hidden] { display: none; }
.builder-step.is-entering { animation: rise .45s var(--ease); }
.builder.is-done .builder-step, .builder.is-done > .form-note, .quick-form.is-done > :not([data-done]) { display: none !important; }
.builder-done { text-align: center; padding: 10px 4px; animation: rise .5s var(--ease); }
.builder-done:focus { outline: none; }
.done-check { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 1.6rem; font-weight: 900; box-shadow: 0 0 0 10px var(--lime-soft); margin-bottom: 18px; }
.done-title { font: 800 1.45rem/1.15 var(--f-display); letter-spacing: -0.03em; }
.done-copy { color: var(--fg-2); margin-top: 10px; font-size: .95rem; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero-proof { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: .88rem; }
.hero-proof strong { color: var(--fg); font-family: var(--f-display); font-size: 1.05rem; margin-right: 4px; }
.hero-text { margin-top: 14px; font-size: .92rem; color: var(--muted); text-align: center; }
.hero-text a { color: var(--lime); font-weight: 600; text-decoration: none; }
.hero-text a:hover { text-decoration: underline; }
/* The person behind NG Digital (owner.json): photo or initials. */
.proof-owner { display: inline-flex; align-items: center; gap: 10px; flex-basis: 100%; color: var(--fg-2); }
.proof-owner strong { font-size: .95rem; margin: 0; }
.owner-face { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--lime); color: var(--ink); font: 800 .95rem/1 var(--f-display); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px rgb(198 255 61 / .5); }

/* Stage + devices */
.stage { position: relative; height: 424px; perspective: 1800px; --rx: 0deg; --ry: 0deg; }
.stage-label { position: absolute; z-index: 5; top: 0; right: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgb(10 10 11 / .7); border: 1px solid var(--line-2); font: 600 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); backdrop-filter: blur(8px); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; animation: pulse-red 1.6s infinite; }
.stage.is-live .live-dot { background: var(--lime); }
@keyframes pulse-red { 50% { opacity: .35; } }
.device { position: absolute; }
.laptop { display: none; }
.phone {
  left: 50%; top: 18px; width: 180px; aspect-ratio: 9 / 19; margin-left: -90px; padding: 7px;
  border-radius: 40px; background: linear-gradient(145deg, #2a2a2f, #0f0f11 40%, #1d1d21);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 0 0 2px #050506, 0 50px 90px -30px rgb(0 0 0 / .9), 0 0 80px -20px var(--lime-glow);
  transform: rotateX(calc(var(--rx) * .6)) rotateY(calc(var(--ry) * .6)) rotateZ(-3deg);
  transition: transform .5s var(--ease);
}
.phone-notch { position: absolute; z-index: 3; top: 16px; left: 50%; width: 70px; height: 20px; margin-left: -35px; border-radius: 20px; background: #000; }
.phone-screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #000; container-type: inline-size; }
.laptop-screen { position: relative; height: calc(100% - 34px); overflow: hidden; container-type: inline-size; }

@media (min-width: 640px) {
  .stage { height: 540px; }
  .laptop { display: block; left: 0; right: 14%; top: 40px; aspect-ratio: 16 / 10.4; border-radius: 16px; background: #0c0c0e; border: 1px solid var(--line-2); overflow: hidden; box-shadow: 0 60px 120px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(0 0 0 / .6); transform: rotateX(calc(4deg + var(--rx))) rotateY(calc(10deg + var(--ry))); transform-origin: 30% 50%; transition: transform .5s var(--ease); }
  .laptop-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #151518; border-bottom: 1px solid var(--line); }
  .laptop-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a40; }
  .laptop-bar i:first-child { background: #ff5f57; } .laptop-bar i:nth-child(2) { background: #febc2e; } .laptop-bar i:nth-child(3) { background: #28c840; }
  .laptop-url { margin: 0 auto; padding: 5px 18px; border-radius: 8px; background: #0b0b0d; color: var(--muted); font: 500 .74rem/1 var(--f-mono); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .phone { left: auto; right: 0; margin-left: 0; top: auto; bottom: 0; width: 196px; transform: rotateX(calc(var(--rx) * .6)) rotateY(calc(var(--ry) * .6)) rotateZ(3deg); }
}

/* Phones and tablets: the form comes before the stage. While the visitor types, the live phone
   floats in the corner so they still see their site build itself, and slides away whenever
   it would cover the field they are typing in (home.js adds .pip-aside). */
@media (max-width: 1023px) {
  .hero-form { max-width: 560px; }
  .stage.is-pip { perspective: none; }
  .stage.is-pip .phone { position: fixed; z-index: 45; top: calc(var(--nav-h) + 8px); bottom: auto; right: 12px; left: auto; margin: 0; width: 96px; padding: 4px; border-radius: 20px; transform: rotate(3deg); animation: pip-in .45s var(--ease); box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 20px 40px -10px rgb(0 0 0 / .9), 0 0 40px -6px var(--lime-glow); transition: transform .3s var(--ease), opacity .25s; }
  .stage.is-pip.pip-aside .phone { opacity: 0; transform: translateX(130%) rotate(3deg); pointer-events: none; }
  .stage.is-pip .phone-screen { border-radius: 16px; }
  .stage.is-pip .phone-notch { top: 7px; width: 30px; height: 8px; margin-left: -15px; }
  .stage.is-pip .stage-label { display: none; }
}
@keyframes pip-in { from { opacity: 0; transform: translateY(-20px) scale(.8) rotate(3deg); } to { opacity: 1; transform: rotate(3deg); } }

/* ---------- Mock website (inside the devices) ---------- */
.mock {
  --m-bg: #0d0f12; --m-fg: #fff; --m-muted: rgb(255 255 255 / .7); --m-accent: #ff3b1f; --m-accent-fg: #fff; --m-card: rgb(255 255 255 / .06);
  --m-font: var(--f-display); --m-weight: 900; --m-case: uppercase; --m-track: -0.03em; --m-style: normal; --m-radius: 4px; --m-overlay: linear-gradient(180deg, rgb(0 0 0 / .15), rgb(0 0 0 / .78));
  --name-k: 1;
  position: relative; height: 100%; overflow: hidden; background: var(--m-bg); color: var(--m-fg); font-family: var(--f-body);
  display: flex; flex-direction: column;
}
.mock-scan { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent 0 46%, rgb(198 255 61 / .0) 46%, rgb(198 255 61 / .9) 50%, transparent 54%); background-size: 100% 220%; }
.mock.is-swapping .mock-scan { animation: scan .8s var(--ease); }
.mock.is-swapping .mock-hero-copy, .mock.is-swapping .mock-services { animation: reskin .8s var(--ease); }
@keyframes scan { 0% { opacity: 1; background-position: 0 100%; } 100% { opacity: 1; background-position: 0 -10%; } }
@keyframes reskin { 0% { opacity: 1; filter: none; } 30% { opacity: 0; filter: blur(6px); transform: translateY(6px); } 100% { opacity: 1; filter: none; transform: none; } }
.mock-nav { position: absolute; z-index: 3; inset: 0 0 auto; display: flex; align-items: center; gap: 4cqi; padding: 15cqi 6cqi 0; }
.mock-logo { display: inline-grid; place-items: center; min-width: 11cqi; height: 11cqi; padding: 0 2cqi; border-radius: var(--m-radius); background: var(--m-accent); color: var(--m-accent-fg); font: 800 4.6cqi/1 var(--m-font); letter-spacing: -0.02em; }
.mock-links { display: none; gap: 3cqi; margin-left: auto; font-size: 2.2cqi; color: var(--m-muted); }
.mock-links i { font-style: normal; }
.mock-burger { margin-left: auto; display: grid; gap: 1.6cqi; }
.mock-burger i { display: block; width: 7cqi; height: .8cqi; background: var(--m-fg); border-radius: 2px; }
.mock-hero { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; }
.mock-photo { position: absolute; inset: 0; background: #222 center / cover no-repeat; transition: opacity .5s; }
.mock-photo::after { content: ""; position: absolute; inset: 0; background: var(--m-overlay); }
.mock-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3cqi; padding: 0 6cqi 7cqi; width: 100%; }
.mock-eyebrow { font: 600 3cqi/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--m-accent); }
.mock-name { font-family: var(--m-font); font-weight: var(--m-weight); font-style: var(--m-style); text-transform: var(--m-case); letter-spacing: var(--m-track); font-size: calc(12.5cqi * var(--name-k)); line-height: .92; overflow-wrap: anywhere; color: var(--m-fg); }
.mock-tagline { font-size: 4.3cqi; line-height: 1.3; color: var(--m-muted); }
.mock-ctas { display: flex; gap: 2.5cqi; margin-top: 2cqi; flex-wrap: wrap; }
.mock-cta, .mock-cta2 { display: inline-flex; align-items: center; height: 10cqi; padding: 0 4.5cqi; border-radius: var(--m-radius); font-size: 3.5cqi; font-weight: 700; }
.mock-cta { background: var(--m-accent); color: var(--m-accent-fg); }
.mock-cta2 { border: 1px solid rgb(255 255 255 / .35); color: var(--m-fg); }
.mock-stars { display: flex; align-items: center; gap: 2cqi; padding: 4cqi 6cqi; font-size: 3.3cqi; color: var(--m-muted); border-bottom: 1px solid rgb(127 127 127 / .18); }
.mock-stars span:first-child { color: #ffc93c; letter-spacing: .1em; }
.mock-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5cqi; padding: 5cqi 6cqi; }
.mock-services span { padding: 4cqi 3cqi; border-radius: var(--m-radius); background: var(--m-card); font-size: 3.2cqi; font-weight: 600; text-align: center; line-height: 1.2; }
.mock-callbar { padding: 0 6cqi 7cqi; }
.mock-callbar span { display: flex; align-items: center; justify-content: center; height: 11cqi; border-radius: var(--m-radius); background: var(--m-fg); color: var(--m-bg); font-size: 3.8cqi; font-weight: 800; }

/* Extra themes chosen by niche rather than by chip */
.mock[data-theme=sales]   { --m-bg: #0b1220; --m-fg: #fff; --m-muted: rgb(255 255 255 / .74); --m-accent: #3d8bff; --m-accent-fg: #fff; --m-weight: 800; --m-case: none; --m-track: -0.045em; --m-radius: 10px; --m-overlay: linear-gradient(180deg, rgb(11 18 32 / .1), rgb(11 18 32 / .86)); }
.mock[data-theme=food]    { --m-bg: #1a0f0a; --m-fg: #fff4e6; --m-muted: rgb(255 244 230 / .75); --m-accent: #ffb238; --m-accent-fg: #1a0f0a; --m-card: rgb(255 178 56 / .1); --m-font: Georgia, "Times New Roman", serif; --m-weight: 700; --m-case: none; --m-style: italic; --m-track: -0.02em; --m-radius: 999px; --m-overlay: linear-gradient(180deg, rgb(26 15 10 / .1), rgb(26 15 10 / .88)); }
.mock[data-theme=general] { --m-bg: #0e0e14; --m-fg: #fff; --m-muted: rgb(255 255 255 / .72); --m-accent: #a594ff; --m-accent-fg: #0e0e14; --m-weight: 800; --m-case: none; --m-track: -0.045em; --m-radius: 12px; --m-overlay: none; }
.mock[data-theme=general] .mock-photo { background: radial-gradient(60% 50% at 70% 25%, rgb(165 148 255 / .55), transparent 70%), radial-gradient(50% 45% at 20% 60%, rgb(61 220 255 / .3), transparent 70%), linear-gradient(160deg, #1b1830, #0e0e14 60%) !important; }

/* Laptop-width layout of the same mock */
@container (min-width: 420px) {
  .mock-hero { align-items: center; }
  .mock-photo { left: 44%; }
  .mock-photo::after { background: linear-gradient(90deg, var(--m-bg) 0%, transparent 35%), linear-gradient(0deg, rgb(0 0 0 / .25), transparent 40%); }
  .mock-name { color: var(--m-ink, var(--m-fg)); }
  .mock-tagline, .mock-links { color: var(--m-ink-muted, var(--m-muted)); }
  .mock-eyebrow { color: var(--m-accent-ink, var(--m-accent)); }
  .mock-cta2 { color: var(--m-ink, var(--m-fg)); border-color: currentColor; }
  .mock-nav { padding: 3.2cqi 5cqi 0; gap: 2cqi; }
  .mock-logo { min-width: 5cqi; height: 5cqi; font-size: 2.2cqi; padding: 0 1cqi; }
  .mock-links { display: flex; font-size: 1.5cqi; gap: 3cqi; }
  .mock-burger { display: none; }
  .mock-hero-copy { padding: 6cqi 5cqi 4cqi; max-width: 52%; gap: 1.6cqi; }
  .mock-eyebrow { font-size: 1.35cqi; }
  .mock-name { font-size: calc(7cqi * var(--name-k)); }
  .mock-tagline { font-size: 1.9cqi; }
  .mock-cta, .mock-cta2 { height: 4.6cqi; font-size: 1.5cqi; padding: 0 2.4cqi; }
  .mock-stars { font-size: 1.5cqi; padding: 1.8cqi 5cqi; gap: 1cqi; }
  .mock-services { padding: 2.4cqi 5cqi; gap: 1.5cqi; }
  .mock-services span { font-size: 1.5cqi; padding: 2cqi 1cqi; }
  .mock-callbar { display: none; }
}

/* Trade themes */
.mock[data-theme=barber]  { --m-bg: #111012; --m-fg: #f4ede1; --m-muted: rgb(244 237 225 / .72); --m-accent: #d4a84b; --m-accent-fg: #111; --m-weight: 900; --m-case: uppercase; --m-track: -0.02em; --m-radius: 2px; }
.mock[data-theme=lawn]    { --m-ink: #10240f; --m-ink-muted: rgb(16 36 15 / .7); --m-accent-ink: #2f7d32; --m-bg: #f2efe2; --m-fg: #fff; --m-muted: rgb(255 255 255 / .85); --m-accent: #8bd346; --m-accent-fg: #10240f; --m-card: rgb(16 36 15 / .08); --m-weight: 800; --m-case: none; --m-track: -0.04em; --m-radius: 999px; --m-overlay: linear-gradient(180deg, rgb(10 30 10 / .1), rgb(10 30 10 / .82)); }
.mock[data-theme=lawn] .mock-stars, .mock[data-theme=lawn] .mock-services span { color: #10240f; }
.mock[data-theme=lawn] .mock-callbar span { background: #10240f; color: #f2efe2; }
.mock[data-theme=auto]    { --m-bg: #0d0f12; --m-fg: #fff; --m-accent: #ff3b1f; --m-accent-fg: #fff; --m-weight: 900; --m-case: uppercase; --m-style: italic; --m-track: -0.04em; --m-radius: 3px; }
.mock[data-theme=tattoo]  { --m-bg: #0a0a0a; --m-fg: #ece6dc; --m-muted: rgb(236 230 220 / .66); --m-accent: #c3163a; --m-accent-fg: #fff; --m-font: Georgia, "Times New Roman", serif; --m-weight: 400; --m-case: none; --m-style: italic; --m-track: -0.02em; --m-radius: 0; --m-overlay: linear-gradient(180deg, rgb(0 0 0 / .3), rgb(0 0 0 / .9)); }
.mock[data-theme=grooming]{ --m-ink: #3a2654; --m-ink-muted: rgb(58 38 84 / .72); --m-accent-ink: #e0467f; --m-bg: #fff4e8; --m-fg: #fff; --m-muted: rgb(255 255 255 / .9); --m-accent: #ff7bac; --m-accent-fg: #fff; --m-card: rgb(58 38 84 / .07); --m-weight: 800; --m-case: lowercase; --m-track: -0.05em; --m-radius: 18px; --m-overlay: linear-gradient(180deg, rgb(58 38 84 / 0), rgb(58 38 84 / .8)); }
.mock[data-theme=grooming] .mock-stars, .mock[data-theme=grooming] .mock-services span { color: #3a2654; }
.mock[data-theme=grooming] .mock-callbar span { background: #3a2654; color: #fff4e8; }
.mock[data-theme=beauty]  { --m-ink: #2b1d1a; --m-ink-muted: rgb(43 29 26 / .7); --m-accent-ink: #a4574f; --m-bg: #f6ece7; --m-fg: #fff; --m-muted: rgb(255 255 255 / .88); --m-accent: #e9b8b0; --m-accent-fg: #2b1d1a; --m-card: rgb(43 29 26 / .06); --m-font: Georgia, "Times New Roman", serif; --m-weight: 400; --m-case: none; --m-track: -0.03em; --m-radius: 999px; --m-overlay: linear-gradient(180deg, rgb(43 29 26 / .05), rgb(43 29 26 / .78)); }
.mock[data-theme=beauty] .mock-stars, .mock[data-theme=beauty] .mock-services span { color: #2b1d1a; }
.mock[data-theme=beauty] .mock-callbar span { background: #2b1d1a; color: #f6ece7; }
.mock[data-theme=cleaning]{ --m-ink: #062a33; --m-ink-muted: rgb(6 42 51 / .72); --m-accent-ink: #0391ab; --m-bg: #eaf7fa; --m-fg: #fff; --m-muted: rgb(255 255 255 / .88); --m-accent: #1ad1f0; --m-accent-fg: #062a33; --m-card: rgb(6 42 51 / .07); --m-weight: 800; --m-case: none; --m-track: -0.045em; --m-radius: 12px; --m-overlay: linear-gradient(180deg, rgb(6 42 51 / .05), rgb(6 42 51 / .82)); }
.mock[data-theme=cleaning] .mock-stars, .mock[data-theme=cleaning] .mock-services span { color: #062a33; }
.mock[data-theme=cleaning] .mock-callbar span { background: #062a33; color: #eaf7fa; }
.mock[data-theme=home]    { --m-bg: #0f1b2d; --m-fg: #fff; --m-accent: #ff8a00; --m-accent-fg: #111; --m-weight: 900; --m-case: uppercase; --m-track: -0.03em; --m-radius: 6px; --m-overlay: linear-gradient(180deg, rgb(15 27 45 / .2), rgb(15 27 45 / .88)); }
.mock-photo { background-image: url("/work/n-bodyshop.webp"); }

@media (min-width: 1024px) {
  .hero { padding-top: calc(var(--nav-h) + 48px); min-height: 100svh; }
  .hero-inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); grid-template-areas: "head stage" "form stage"; column-gap: clamp(32px, 5vw, 72px); row-gap: 30px; align-items: start; }
  .hero-head { grid-area: head; }
  .hero-form { grid-area: form; }
  .stage { grid-area: stage; height: 640px; margin-top: 10px; align-self: center; }
  .laptop { left: 0; right: 9%; top: 56px; }
  .phone { width: 226px; left: auto; right: 0; bottom: 0; }
  .hero h1 { font-size: clamp(3.1rem, 4.7vw, 4.75rem); }
  .hero-sub { max-width: 40ch; }
}

/* ---------- How ---------- */
.how { padding: 110px 0; }
.steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.step { position: relative; padding: 30px 26px 28px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg)); overflow: hidden; }
.step-big { display: block; font: 900 5.4rem/.8 var(--f-display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .22); margin-bottom: 26px; }
.step h3 { font-size: 1.6rem; letter-spacing: -0.03em; margin-bottom: 12px; }
.step p { color: var(--fg-2); }
.step-tag { display: inline-block; margin-top: 20px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); }
.step-hot { border-color: rgb(198 255 61 / .45); background: radial-gradient(120% 90% at 100% 0%, rgb(198 255 61 / .14), transparent 60%), var(--bg-2); }
.step-hot .step-big { -webkit-text-stroke-color: var(--lime); }
.step-hot .step-tag { background: var(--lime); color: var(--ink); border-color: var(--lime); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .steps::before { content: ""; position: absolute; }
}

/* ---------- Design carousel ----------
   A ring of phones in real 3D. home.js sizes the ring from the phone width and item count
   (--pw), turns it, and dims each phone by its angle (the .cp-shade layer's opacity).
   Performance rule: while the ring turns, nothing inside a phone may repaint. Each phone is
   one composited layer, painted once; only transforms and the shade's opacity change per
   frame, and both are handled by the compositor. No per-frame gradients, blend modes or
   animated shadows in here. */
.gallery { position: relative; padding: 110px 0 70px; border-top: 1px solid var(--line); overflow: clip; background: radial-gradient(70% 45% at 50% 58%, rgb(198 255 61 / .07), transparent 70%); }
.gallery-head { text-align: center; display: grid; justify-items: center; }
.gallery-head h2 { max-width: 20ch; }
.gallery-head .lede { margin-top: 18px; }
.gallery-head .kicker::after { content: ""; width: 18px; height: 1px; background: currentColor; }

.carousel { --pw: 150px; position: relative; margin-top: 18px; }
@media (min-width: 640px) { .carousel { --pw: 188px; } }
@media (min-width: 1024px) { .carousel { --pw: 226px; } }

.car-stage {
  position: relative; height: calc(var(--pw) * 2.1667 + 150px);
  perspective: calc(var(--pw) * 5.4); perspective-origin: 50% 36%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.car-stage.is-dragging { cursor: grabbing; }
.car-glow { position: absolute; left: 50%; top: 40%; width: min(760px, 120vw); height: 520px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(198 255 61 / .16), rgb(198 255 61 / .04) 55%, transparent); pointer-events: none; }
.car-floor { position: absolute; left: 50%; bottom: 34px; width: min(1100px, 150vw); height: 150px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgb(0 0 0 / .75), transparent 72%), radial-gradient(40% 30% at 50% 50%, rgb(198 255 61 / .12), transparent 70%); }
.car-floor::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .12), transparent); }

.car-ring { list-style: none; margin: 0 0 0 calc(var(--pw) / -2); padding: 0; position: absolute; left: 50%; top: 44px; width: var(--pw); height: calc(var(--pw) * 2.1667); transform-style: preserve-3d; will-change: transform; }
.car-item { position: absolute; inset: 0; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.car-item.is-culled { visibility: hidden; }

.car-phone { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: block; cursor: inherit; border-radius: calc(var(--pw) * .165); transition: transform .45s var(--ease); -webkit-tap-highlight-color: transparent; }
.cp-body {
  position: absolute; inset: 0; border-radius: inherit;
  border: calc(var(--pw) * .012) solid transparent;
  background: linear-gradient(#050506, #050506) padding-box, linear-gradient(140deg, #a3a3ab, #2a2a2f 26%, #7b7b83 50%, #1b1b1f 76%, #62626a) border-box;
  /* Kept tight on purpose: a shadow's blur enlarges each phone's layer, and a 68px blur made
     every visible phone about twice the pixels for the compositor to blend on every frame. */
  box-shadow: 0 0 0 1px rgb(0 0 0 / .7), 0 calc(var(--pw) * .035) calc(var(--pw) * .07) calc(var(--pw) * -.01) rgb(0 0 0 / .75);
  -webkit-box-reflect: below calc(var(--pw) * .06) linear-gradient(transparent 80%, rgb(255 255 255 / .1));
}
/* The phone facing the visitor: a thin lime edge, switched (not animated) as the front changes. */
.car-item.is-front .cp-body { box-shadow: 0 0 0 1px rgb(198 255 61 / .6), 0 calc(var(--pw) * .035) calc(var(--pw) * .07) calc(var(--pw) * -.01) rgb(0 0 0 / .75); }
/* Its glow is one fixed element behind the front slot, drawn once and never repainted. It fades
   out while the ring turns (home.js sets .is-turning) and back in when a phone settles. A glow
   on each phone meant re-rendering a large blur on two phones at every step. */
.car-halo {
  position: absolute; left: 50%; top: 44px; width: var(--pw); height: calc(var(--pw) * 2.1667); margin-left: calc(var(--pw) / -2);
  border-radius: calc(var(--pw) * .165); transform: scale(1.04); pointer-events: none;
  box-shadow: 0 0 calc(var(--pw) * .45) calc(var(--pw) * -.08) var(--lime-glow);
  transition: opacity .35s var(--ease); will-change: opacity;
}
.car-stage.is-turning .car-halo { opacity: 0; }
.cp-screen { position: absolute; inset: calc(var(--pw) * .032); overflow: hidden; border-radius: calc(var(--pw) * .135); background: #000; padding-top: calc(var(--pw) * .14); }
.cp-screen::before { content: "9:41"; position: absolute; top: calc(var(--pw) * .052); left: 13%; font: 600 calc(var(--pw) * .044)/1 var(--f-body); color: #fff; letter-spacing: .01em; }
.cp-screen::after { content: ""; position: absolute; top: calc(var(--pw) * .056); right: 12%; width: calc(var(--pw) * .085); height: calc(var(--pw) * .034); border-radius: 3px; background: linear-gradient(90deg, #fff 72%, rgb(255 255 255 / .35) 72%); }
.cp-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 0 0 calc(var(--pw) * .135) calc(var(--pw) * .135); }
.cp-island { position: absolute; top: calc(var(--pw) * .068); left: 50%; width: 31%; height: calc(var(--pw) * .088); transform: translateX(-50%); border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04); }
/* A fixed sheen. It used to slide with each phone's angle, which repainted every visible
   phone on every frame (the single biggest cost of the carousel). */
.cp-glare { position: absolute; inset: calc(var(--pw) * .032); border-radius: calc(var(--pw) * .135); pointer-events: none; background: linear-gradient(112deg, transparent 30%, rgb(255 255 255 / .09) 42%, rgb(255 255 255 / .02) 50%, transparent 58%); }
/* Its own layer, so the per-frame opacity from home.js never repaints the phone under it. */
.cp-shade { position: absolute; inset: 0; border-radius: inherit; background: #070708; opacity: 0; pointer-events: none; will-change: opacity; }
.carousel.is-dimming .cp-shade { transition: opacity .3s linear; }
.car-item.is-front .car-phone { cursor: pointer; }
.car-phone::after {
  content: "Open live site ↗"; position: absolute; left: 50%; bottom: 7%; transform: translate(-50%, 8px);
  padding: .55em 1em; border-radius: 999px; background: var(--lime); color: var(--ink); white-space: nowrap;
  font: 700 calc(var(--pw) * .058)/1 var(--f-body); box-shadow: 0 10px 30px -8px rgb(0 0 0 / .7);
  opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none;
}
.car-item.is-front .car-phone:hover { transform: translateY(-8px); }
.car-item.is-front .car-phone:hover::after, .car-item.is-front .car-phone:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .car-item.is-front .car-phone::after { opacity: 1; transform: translate(-50%, 0); } }
.car-phone:focus-visible { outline: none; }
.car-phone:focus-visible .cp-body { outline: 2px solid var(--lime); outline-offset: 5px; }
.car-stage.is-dragging .car-phone { transform: none !important; }

.car-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 34px); margin-top: -18px; padding-inline: var(--gutter); }
.car-nav { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); background: rgb(255 255 255 / .03); color: var(--fg); cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.car-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.car-nav:hover { border-color: var(--lime); color: var(--lime); }
.car-nav:active { transform: scale(.94); }
.car-caption { display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 0; width: min(440px, 60vw); min-height: calc(.74rem + clamp(1.3rem, 2.6vw, 1.8rem) * 2.2 + .9rem * 1.6 + 12px); text-align: center; }
.car-count { font: 600 .74rem/1 var(--f-mono); letter-spacing: .14em; color: var(--lime); }
.car-name { font: 800 clamp(1.3rem, 2.6vw, 1.8rem)/1.1 var(--f-display); letter-spacing: -0.03em; max-width: 100%; text-wrap: balance; min-height: 1.1em; }
.car-meta { color: var(--muted); font-size: .9rem; }
.car-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; padding-inline: var(--gutter); }
.car-hint { margin-top: 14px; text-align: center; color: var(--muted); font-size: .8rem; padding-inline: var(--gutter); }
.car-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; padding-inline: var(--gutter); }
.chip { flex: none; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--fg-2); font-weight: 500; font-size: .88rem; cursor: pointer; transition: all .2s var(--ease); }
.chip span { margin-left: 4px; color: var(--muted); font: 600 .72rem/1 var(--f-mono); }
.chip:hover { color: var(--fg); border-color: var(--fg-2); }
.chip.is-on { background: var(--fg); color: var(--ink); border-color: var(--fg); font-weight: 700; }
.chip.is-on span { color: rgb(10 10 11 / .55); }
.car-fine { text-align: center; }

/* Reduced motion / no 3D: a calm, scrollable row of phones that still opens the viewer. */
.carousel.is-flat .car-stage { perspective: none; height: auto; cursor: auto; touch-action: auto; }
.carousel.is-flat .car-ring { position: static; margin: 0; width: auto; height: auto; display: flex; gap: 22px; overflow-x: auto; padding: 30px max(var(--gutter), calc(50% - var(--pw) / 2)) 40px; scroll-snap-type: x mandatory; transform: none !important; transform-style: flat; }
.carousel.is-flat .car-item { position: relative; flex: none; width: var(--pw); height: calc(var(--pw) * 2.1667); transform: none !important; scroll-snap-align: center; }
.carousel.is-flat .car-floor, .carousel.is-flat .car-glow, .carousel.is-flat .car-halo { display: none; }
.carousel.is-flat .car-bar { margin-top: 0; }
.carousel.is-flat .cp-body { -webkit-box-reflect: none; }

/* ---------- Live-site viewer ---------- */
html.vw-lock { overflow: hidden; }
.viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--fg); overflow: hidden; }
.viewer::backdrop { background: rgb(5 5 6 / .86); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
.viewer[open] { animation: vw-fade .35s var(--ease); }
.viewer[open]::backdrop { animation: vw-fade .35s var(--ease); }
.viewer.is-closing, .viewer.is-closing::backdrop { opacity: 0; transition: opacity .28s var(--ease); }
@keyframes vw-fade { from { opacity: 0; } }
.vw-shell { position: relative; height: 100%; display: grid; grid-template-columns: minmax(260px, 390px) auto; justify-content: center; align-items: center; gap: clamp(40px, 6vw, 110px); padding: 28px 88px 28px 40px; }
.vw-info { display: flex; flex-direction: column; align-items: flex-start; animation: vw-info-in .6s var(--ease) .12s both; }
@keyframes vw-info-in { from { opacity: 0; transform: translateX(-18px); } }
.vw-kicker { font: 600 .74rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.vw-title { margin-top: 12px; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -0.045em; }
.vw-desc { margin-top: 16px; color: var(--fg-2); font-size: .98rem; line-height: 1.55; }
.vw-live { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .8rem; color: var(--fg-2); }
.vw-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ffb238; animation: pulse-red 1.8s infinite; }
.viewer.is-loaded .vw-dot { background: var(--lime); }
.viewer.is-blocked .vw-dot { background: var(--muted); animation: none; }
.vw-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vw-step { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); width: 100%; }
.vw-step-btn { background: none; border: 0; color: var(--fg-2); font: 600 .88rem/1 var(--f-body); cursor: pointer; padding: 8px 0; }
.vw-step-btn:hover { color: var(--lime); }
.vw-step-count { margin: 0 auto; font: 600 .74rem/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); }
.vw-fine { margin-top: 18px; color: var(--muted); font-size: .76rem; }

.vw-stage { display: grid; place-items: center; height: 100%; min-height: 0; }
.vw-device {
  position: relative; height: min(88svh, 860px); aspect-ratio: 9 / 19.5; padding: 11px; border-radius: 58px;
  border: 3px solid transparent;
  background: linear-gradient(#050506, #050506) padding-box, linear-gradient(140deg, #a8a8b0, #2a2a2f 26%, #7e7e86 50%, #1b1b1f 76%, #666670) border-box;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .8), 0 70px 140px -40px rgb(0 0 0 / .95), 0 0 140px -30px var(--lime-glow);
  transform-origin: top left;
}
.vw-key { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #55555c, #2a2a2f); }
.vw-key-a { left: -7px; top: 19%; height: 34px; } .vw-key-b { left: -7px; top: 27%; height: 62px; } .vw-key-c { right: -7px; top: 25%; height: 92px; }
.vw-screen { position: relative; height: 100%; overflow: hidden; border-radius: 47px; background: #0b0b0d; padding-top: 42px; }
.vw-screen::before { content: ""; position: absolute; inset: 0 0 auto; height: 42px; background: #000; }
.vw-status { position: absolute; z-index: 3; top: 14px; left: 14px; right: 14px; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; color: #fff; font: 600 .82rem/1 var(--f-body); pointer-events: none; }
.vw-status i { width: 24px; height: 11px; border-radius: 3px; background: linear-gradient(90deg, #fff 72%, rgb(255 255 255 / .35) 72%); }
.vw-island { position: absolute; top: 20px; left: 50%; width: 31%; height: 30px; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 3; }
.vw-screen iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; transition: opacity .45s var(--ease); }
.viewer.is-loaded .vw-screen iframe { opacity: 1; }
.vw-loading { position: absolute; inset: 42px 0 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: linear-gradient(110deg, #0e0e11 30%, #17171b 50%, #0e0e11 70%); background-size: 300% 100%; animation: vw-shimmer 1.6s linear infinite; transition: opacity .4s var(--ease); }
.viewer.is-loaded .vw-loading, .viewer.is-blocked .vw-loading { opacity: 0; pointer-events: none; }
@keyframes vw-shimmer { to { background-position: -150% 0; } }
.vw-spinner { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .1); border-top-color: var(--lime); animation: vw-spin .8s linear infinite; }
@keyframes vw-spin { to { transform: rotate(360deg); } }
.vw-loading-text { color: var(--fg-2); font-size: .86rem; text-align: center; padding: 0 22px; }
.vw-loading-text a { color: var(--lime); }
.vw-fallback { position: absolute; inset: 42px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; text-align: center; background: #0b0b0d; }
.vw-fallback[hidden] { display: none; }
.vw-shot { position: relative; margin: 0 0 8px; width: 62%; }
.vw-shot img { width: 100%; aspect-ratio: 1 / 2; object-fit: cover; object-position: top; border-radius: 14px; filter: grayscale(.25) brightness(.8); }
.vw-shot figcaption { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: rgb(10 10 11 / .85); border: 1px solid var(--line-2); font: 600 .66rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.vw-fb-title { font: 800 1.05rem/1.25 var(--f-display); letter-spacing: -0.02em; }
.vw-fb-copy { color: var(--fg-2); font-size: .85rem; line-height: 1.5; }

.vw-close { position: absolute; top: 22px; right: 22px; z-index: 5; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); background: rgb(22 22 26 / .9); color: var(--fg); cursor: pointer; transition: border-color .2s, color .2s, transform .2s var(--ease); }
.vw-close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.vw-close:hover { border-color: var(--lime); color: var(--lime); transform: rotate(90deg); }

/* Phones and small tablets: the viewer is the whole screen; the live site gets every pixel. */
@media (max-width: 860px) {
  .vw-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; justify-content: stretch; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .vw-info { display: contents; }
  .vw-kicker, .vw-title { grid-row: 1; grid-column: 1; padding-right: 60px; }
  .vw-kicker { align-self: start; margin-top: 4px; font-size: .64rem; }
  .vw-title { align-self: end; margin: 22px 0 0; font-size: 1.28rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vw-desc, .vw-live, .vw-step, .vw-fine { display: none; }
  .vw-stage { grid-row: 2; grid-column: 1; width: 100%; }
  .vw-ctas { grid-row: 3; grid-column: 1; margin: 0; display: grid; grid-template-columns: 1fr auto; }
  .vw-ctas .btn { min-height: 50px; padding: 0 16px; font-size: .92rem; }
  .vw-device { width: 100%; height: 100%; aspect-ratio: auto; padding: 0; border-radius: 22px; border-width: 1px; background: #0b0b0d; box-shadow: 0 0 0 1px var(--line-2); }
  .vw-key, .vw-island, .vw-status { display: none; }
  .vw-long { display: none; }
  .vw-screen { border-radius: 21px; padding-top: 0; }
  .vw-screen::before { display: none; }
  .vw-loading, .vw-fallback { inset: 0; }
  .vw-close { top: 10px; right: 10px; width: 46px; height: 46px; }
}
@media (max-width: 860px) and (max-height: 520px) { .vw-kicker { display: none; } }

/* ---------- Compare ---------- */
.compare { padding: 110px 0; border-top: 1px solid var(--line); }
.compare-table { margin-top: 48px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); font-size: .92rem; }
.ct-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; align-items: center; border-top: 1px solid var(--line); }
.ct-row:first-child { border-top: 0; }
.ct-row > span { padding: 16px 12px; color: var(--fg-2); }
.ct-row > span:first-child { color: var(--fg); font-weight: 600; padding-left: 20px; }
.ct-head > span { font: 700 .74rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: 20px; padding-bottom: 20px; }
.ct-us { background: var(--lime-soft); color: var(--fg) !important; font-weight: 700; box-shadow: inset 1px 0 0 rgb(198 255 61 / .35), inset -1px 0 0 rgb(198 255 61 / .35); }
.ct-head .ct-us { color: var(--lime) !important; }
@media (max-width: 560px) { .compare-table { font-size: .8rem; } .ct-row > span { padding: 13px 7px; } .ct-row > span:first-child { padding-left: 12px; } }

/* ---------- Pricing ---------- */
.pricing { padding: 110px 0; border-top: 1px solid var(--line); }
.pricing-grid { display: grid; gap: 44px; align-items: center; }
.pricing-copy .lede { margin-top: 20px; }
.price-card { position: relative; padding: 32px 26px 26px; border-radius: var(--r-lg); border: 1px solid transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(160deg, var(--lime), rgb(198 255 61 / .06) 45%, var(--line-2)) border-box; box-shadow: 0 50px 100px -50px var(--lime-glow); }
.price-badge { display: inline-block; font: 600 .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--lime); }
.price { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 24px; }
.price-num { font: 900 clamp(4rem, 9vw, 5.6rem)/.85 var(--f-display); letter-spacing: -0.06em; }
.price-unit { color: var(--muted); font-weight: 500; }
.price-list { list-style: none; margin: 0 0 28px; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.price-list li { display: flex; gap: 12px; color: var(--fg-2); }
.price-list li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime-soft); color: var(--lime); font-size: .75rem; font-weight: 900; }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: 1fr minmax(0, 460px); gap: 80px; } }
/* What it costs after launch, from the service terms. */
.after { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); max-width: 560px; }
.after-title { font: 600 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.after-list { margin: 18px 0 0; display: grid; gap: 16px; }
.after-list div { display: grid; gap: 4px; }
.after-list dt { font-weight: 700; color: var(--fg); }
.after-list dd { margin: 0; color: var(--fg-2); font-size: .95rem; }
@media (min-width: 640px) { .after-list div { grid-template-columns: 130px 1fr; gap: 16px; } }

/* ---------- Who you'll work with (owner.json) ---------- */
.meet { padding: 110px 0; border-top: 1px solid var(--line); }
.meet-card { display: grid; gap: 32px; align-items: center; }
.meet-photo { width: 180px; height: 180px; border-radius: var(--r-lg); object-fit: cover; background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -40px var(--lime-glow); }
.meet-initials { display: grid; place-items: center; background: var(--lime); color: var(--ink); font: 900 4rem/1 var(--f-display); letter-spacing: -0.05em; }
.meet-town { margin-top: 12px; font: 600 .82rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.meet-bio { margin-top: 20px; }
.meet-reply { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--fg-2); font-size: .95rem; }
.meet-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (min-width: 760px) { .meet-card { grid-template-columns: 240px 1fr; gap: 56px; } .meet-photo { width: 240px; height: 240px; } }

/* ---------- FAQ ---------- */
.faq { padding: 110px 0; border-top: 1px solid var(--line); }
.faq-grid { display: grid; gap: 40px; }
.faq-grid .lede { margin-top: 18px; }
.faq-grid .lede a { color: var(--lime); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 700 1.14rem/1.3 var(--f-display); letter-spacing: -0.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); font: 400 1.2rem/1 var(--f-body); transition: transform .3s var(--ease), background .3s; }
.faq-list details[open] summary::after { transform: rotate(45deg); background: var(--lime); color: var(--ink); border-color: var(--lime); }
.faq-list details p { padding: 0 0 22px; color: var(--fg-2); max-width: 62ch; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 80px; } }

/* ---------- Final CTA ---------- */
.final { position: relative; padding: 140px 0 130px; overflow: hidden; border-top: 1px solid var(--line); text-align: center; isolation: isolate; }
.final-glow { position: absolute; z-index: -1; left: 50%; top: 100%; width: 1100px; height: 700px; margin-left: -550px; margin-top: -350px; border-radius: 50%; background: radial-gradient(closest-side, rgb(198 255 61 / .35), transparent); filter: blur(30px); }
.final h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); max-width: 14ch; margin-inline: auto; line-height: .95; }
.final .lede { margin: 22px auto 0; }
.quick-form { position: relative; margin: 40px auto 0; max-width: 720px; display: grid; gap: 10px; }
.quick-form .form-note { grid-column: 1 / -1; }
.quick-form .builder-done { grid-column: 1 / -1; }
@media (min-width: 760px) { .quick-form { grid-template-columns: 1fr 1fr auto; } }

/* ---------- Footer ---------- */
.footer { padding: 46px 0 110px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.footer-inner { display: grid; gap: 18px; }
.footer nav { display: flex; gap: 20px; }
.footer nav a { text-decoration: none; color: var(--fg-2); }
.footer nav a:hover { color: var(--lime); }
@media (min-width: 900px) { .footer { padding-bottom: 46px; } .footer-inner { grid-template-columns: auto 1fr auto auto; align-items: center; gap: 30px; } }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: rgb(22 22 26 / .88); border: 1px solid var(--line-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px -20px rgb(0 0 0 / .9); font-size: .92rem; color: var(--fg-2); transform: translateY(140%); transition: transform .4s var(--ease); }
.sticky-cta strong { color: var(--fg); }
.sticky-cta.is-on { transform: none; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .steps .reveal:nth-child(2) { transition-delay: .1s; }
.js .steps .reveal:nth-child(3) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
}