@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/fonts/instrument-serif-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face { font-family: 'InterLogo'; src: url('assets/fonts/inter-logo.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* Night Map palette: blue-tinted asphalt surfaces, warm ivory type, one map-pin blue. */
:root {
  --bg: #0b0c10;
  --bg-2: #0f1116;
  --surface: #15171d;
  --surface-2: #1b1e26;
  --line: rgba(235, 238, 255, .09);
  --line-strong: rgba(235, 238, 255, .18);
  --ink: #efece4;
  --muted: #a7abb8;
  --faint: #7f8493;
  --accent: #6d8cff;
  --accent-strong: #3b63ff;
  --accent-hover: #4d72ff;
  --accent-glow: rgba(109, 140, 255, .32);
  --r: 8px;
  --r-sm: 4px;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, 'Segoe UI', system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent-strong); color: #fff; }

/* Film grain on a fixed, non-interactive layer: gives the dark surfaces tooth without repainting on scroll. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

h1, h2, .price, .step-num, .stat-num, .map-headline { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.wordmark { font-family: 'InterLogo', var(--sans); font-weight: 600; font-size: 17px; letter-spacing: 4px; display: inline-flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; }
.logo-mark { flex-shrink: 0; }

/* Section headlines. The class name predates the redesign: it used to be a tiny tracked label, now it is the real serif heading. */
.label { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 44px; position: relative; padding-bottom: 18px; }
.label::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--accent); }
.label.reveal::after { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out) .2s; }
.label.reveal.in::after { transform: scaleX(1); }

/* Nav: transparent over the hero, blurred asphalt once scrolled. */
/* viewport-fit=cover lets the page run under the iPhone status bar; the bar grows by that inset so nothing
   scrolls past above it (Mark's screenshot, 2026-09-11). Zero everywhere else. */
.nav { display: flex; justify-content: space-between; align-items: center; padding: calc(22px + env(safe-area-inset-top, 0px)) 6vw 22px; position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: padding .3s var(--ease-out), background-color .3s ease, border-color .3s ease; }
.nav.scrolled { padding: calc(12px + env(safe-area-inset-top, 0px)) 6vw 12px; background: rgba(11, 12, 16, .74); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); }
#how, #pricing, #faq, #lead-form, #about, #founding, #map, #work { scroll-margin-top: calc(90px + env(safe-area-inset-top, 0px)); }
.nav-links { display: flex; gap: 30px; align-items: center; font-size: 13.5px; letter-spacing: .02em; }
.nav-links a { color: var(--muted); text-decoration: none; transition: color .15s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { color: #fff !important; background: var(--accent-strong); padding: 9px 16px; border-radius: var(--r-sm); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; transition: background-color .15s ease, box-shadow .2s ease, transform .15s ease; }
.nav-cta:hover { background: var(--accent-hover); box-shadow: 0 8px 24px var(--accent-glow); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px 8px; }
.menu-art, .menu-foot { display: none; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
.nav-toggle span + span { margin-top: 5px; }

/* Hero */
.hero { position: relative; isolation: isolate; display: flex; gap: 6vw; padding: 7vh 6vw 11vh; align-items: center; min-height: min(780px, 88svh); }
/* Extends 90px above the hero so the backdrop sits under the transparent nav instead of starting at a hard edge. */
.hero-bg { position: absolute; left: 0; right: 0; bottom: 0; top: calc(-90px - env(safe-area-inset-top, 0px)); z-index: -1; pointer-events: none; overflow: hidden; }
/* The graticule: a faint dot grid. Two masks intersect: an ellipse that fades it out toward the bottom right,
   and a vertical ramp so the grid dissolves under the nav instead of starting on a hard line. */
.hero-bg::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: calc(90px + env(safe-area-inset-top, 0px)); opacity: .6;
  background-image: radial-gradient(rgba(239, 236, 228, .18) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 32% 28%, #000 15%, transparent 72%), linear-gradient(to bottom, transparent, #000 150px);
  mask-image: radial-gradient(ellipse 75% 85% at 32% 28%, #000 15%, transparent 72%), linear-gradient(to bottom, transparent, #000 150px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Sparks: a sparse field of small blue lights scattered over the whole hero, each twinkling on its own clock. */
.hero-sparks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-sparks use { animation: twinkle 6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -1s); opacity: .55; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
/* The flashlight: the same dot grid in pin blue plus a soft light fill around the pointer. --mx/--my are set by
   main.js on fine-pointer devices only; the grid origin matches ::before so the dots line up. The radial mask is
   an eased ramp over ~260px (ten dot rows) so the lit area dissolves into the grid instead of ending on an edge,
   and the same vertical ramp as ::before keeps it from being clipped on the nav line. */
.hero-spot {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(90px + env(safe-area-inset-top, 0px)); opacity: 0; transition: opacity .45s ease;
  background-image:
    radial-gradient(rgba(150, 172, 255, 1) 1.5px, transparent 2.1px),
    radial-gradient(340px 340px at var(--mx, -999px) var(--my, -999px), rgba(59, 99, 255, .2), transparent 70%);
  background-size: 26px 26px, auto;
  -webkit-mask-image:
    radial-gradient(270px 270px at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .86) 18%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, .34) 58%, rgba(0, 0, 0, .13) 78%, rgba(0, 0, 0, .03) 92%, transparent 100%),
    linear-gradient(to bottom, transparent, #000 150px);
  mask-image:
    radial-gradient(270px 270px at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .86) 18%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, .34) 58%, rgba(0, 0, 0, .13) 78%, rgba(0, 0, 0, .03) 92%, transparent 100%),
    linear-gradient(to bottom, transparent, #000 150px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero.spot .hero-spot { opacity: 1; }
.hero-copy { flex: 1.15; min-width: 0; }
.hero h1 { font-size: clamp(46px, 6.6vw, 92px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; padding-bottom: .06em; }
.hero h1 em { color: var(--ink); }
.hero h1 strong { font-weight: 400; color: var(--accent); text-shadow: 0 0 60px rgba(59, 99, 255, .35); }   /* Instrument has no bold: colour and light carry emphasis */
.hero-sub { color: var(--muted); max-width: 46ch; margin-top: 28px; font-size: 16px; }
.kicker { font-size: 12px; letter-spacing: .28em; color: var(--accent); margin-top: 24px; }

.form-card { flex: .85; position: relative; background: var(--surface); border: 1px solid var(--line-strong); padding: 36px; min-width: 320px; border-radius: var(--r); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.form-card::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(239, 236, 228, .4), transparent); }
.form-card h2 { font-size: 28px; margin-bottom: 20px; }
.form-card input { width: 100%; border: 1px solid var(--line-strong); background: rgba(11, 12, 16, .6); color: var(--ink); padding: 13px 14px; margin-bottom: 12px; font: inherit; font-size: 15px; border-radius: var(--r-sm); transition: border-color .15s ease, box-shadow .15s ease; }
.form-card input::placeholder { color: var(--faint); }
/* The intake page (/start): a small Night Map hero (dot grid + sparks), then the lead-form card stretched
   into four numbered sections that light up as they scroll in. */
.start-hero { position: relative; isolation: isolate; overflow: hidden; padding: 9vh 6vw 6vh; }
.start-hero .hero-sparks { z-index: -1; pointer-events: none; }
/* Every page: one dot grid behind the whole page (fixed, under the content, over the page background) and a
   flashlight that follows the pointer anywhere on it. --mx/--my are set on body by start.js; the grid
   origin of both layers is the viewport, so the lit dots sit exactly on the grey ones. */
body.with-grid { isolation: isolate; }   /* so the grid's negative z-index paints above the body background, like .hero-bg inside the isolated hero */
.page-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(239, 236, 228, .18) 1px, transparent 1.6px); background-size: 26px 26px; }
.page-spot { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
  background-image: radial-gradient(rgba(150, 172, 255, 1) 1.5px, transparent 2.1px), radial-gradient(340px 340px at var(--mx, -999px) var(--my, -999px), rgba(59, 99, 255, .22), transparent 70%);
  background-size: 26px 26px, auto;
  -webkit-mask-image: radial-gradient(270px 270px at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .86) 18%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, .34) 58%, rgba(0, 0, 0, .13) 78%, rgba(0, 0, 0, .03) 92%, transparent 100%);
  mask-image: radial-gradient(270px 270px at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .86) 18%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, .34) 58%, rgba(0, 0, 0, .13) 78%, rgba(0, 0, 0, .03) 92%, transparent 100%); }
body.spot .page-spot { opacity: 1; }
/* The star field (start.js builds it): sits in the same fixed layer, above the grid, drifting up slowly with the scroll. */
.page-stars { position: absolute; left: 0; top: 0; overflow: visible; transform: translate(var(--px, 0px), calc(var(--sy, 0px) + var(--py, 0px))); will-change: transform; }
.page-stars .shoot g { transform-box: fill-box; }
.page-stars .star { transform-box: fill-box; transform-origin: center; transform: scale(var(--s, 1)); animation: twinkle var(--t, 6s) ease-in-out infinite; animation-delay: calc(var(--d, 0) * -1s); }
.page-stars .dust { opacity: var(--o, .4); animation-name: dust-twinkle; }
.page-stars .spark { opacity: .6; animation-name: spark-twinkle; }
.page-stars .bright { opacity: .9; animation-name: breathe; }
@keyframes dust-twinkle { 0%, 100% { opacity: calc(var(--o, .4) * .3); } 50% { opacity: var(--o, .4); } }
@keyframes spark-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(calc(var(--s, 1) * .82)); } 50% { opacity: 1; transform: scale(calc(var(--s, 1) * 1.12)); } }
.start-hero .kicker { margin: 0 0 18px; }
.start-hero h1 { font-size: clamp(46px, 7vw, 96px); line-height: 1.02; letter-spacing: -0.02em; max-width: 12ch; }
.start-hero h1 em { color: var(--accent); text-shadow: 0 0 60px rgba(59, 99, 255, .35); }
.start-hero .intake-intro { margin: 26px 0 0; }
.intake-band { padding-top: 0; }
.intake .form-card { max-width: 780px; flex: none; }
.intake-intro { color: var(--muted); font-size: 16px; max-width: 60ch; }
.intake-step { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.intake-step + .intake-step { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 22px; }
.intake-step legend { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; padding: 0; }
.intake-step .step-no { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--accent); }
.intake-step .step-title { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--ink); }
.intake-step.reveal-step { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s var(--ease-out); }
.intake-step.reveal-step.in { opacity: 1; transform: none; }
/* Homepage motion, re-pointed at the start hero: word-by-word headline, entrance stagger, the flashlight layer. */
.start-hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.55em); animation: word-in .7s var(--ease-out) forwards; animation-delay: calc(var(--wi) * 65ms); }
.hero-enter .start-hero .kicker { animation: fade-up .6s var(--ease-out) .1s both; }
.hero-enter .start-hero .intake-intro { animation: fade-up .6s var(--ease-out) .6s both; }
.hero-enter .intake .form-card { animation: fade-up .7s var(--ease-out) .85s both; }
.intake .form-card button { transition: background-color .15s ease, transform .15s ease-out, box-shadow .2s ease; }
.intake .form-card h2.sent-title { font-size: clamp(56px, 6vw, 84px); }
.intake .field { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.intake .field input, .intake .field textarea { margin: 6px 0 0; font-weight: 400; letter-spacing: 0; text-transform: none; }
.form-card textarea { width: 100%; border: 1px solid var(--line-strong); background: rgba(11, 12, 16, .6); color: var(--ink); padding: 13px 14px; font: inherit; font-size: 15px; line-height: 1.5; border-radius: var(--r-sm); resize: vertical; transition: border-color .15s ease, box-shadow .15s ease; }
.form-card textarea::placeholder { color: var(--faint); }
.form-card textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 140, 255, .18); }
.intake-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.intake .field-hint { margin: -6px 0 18px; }
.intake .form-card button { margin-top: 8px; }
.intake-success h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1; outline: none; }
.intake-success .intake-intro { margin: 14px 0 0; }
@media (max-width: 640px) { .intake-grid { grid-template-columns: 1fr; gap: 0; } }
.form-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 140, 255, .18); }
.field-hint { font-size: 12.5px; color: var(--faint); margin: -4px 0 12px; }
.form-card button { width: 100%; background: var(--accent-strong); color: #fff; border: 0; padding: 15px; font-size: 13px; letter-spacing: .12em; font-weight: 600; cursor: pointer; font-family: var(--sans); border-radius: var(--r-sm); }
.form-card button:hover { background: var(--accent-hover); }
.form-card button:disabled { opacity: 0.6; cursor: wait; pointer-events: none; }
.reassure { text-align: center; color: var(--faint); font-size: 12.5px; margin-top: 12px; }
.form-note { font-size: 13px; margin-top: 10px; color: #ff8a8a; }
.hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }

/* Sent. The fields blur out, the card locks its height, a bar of blue light sweeps across it and lights
   the dot grid in its wake, "Sent." develops out of the blur behind it, then one line. main.js adds .out
   to the card, then .sent, then .play on the success box one frame after it is shown; --sweep-w is the
   card's width so the light travels edge to edge with a transform. */
.form-card { --card-px: 36px; --card-py: 36px; }
.form-card.out > h2, .form-card.out > form { opacity: 0; filter: blur(6px); transform: translateY(6px); transition: opacity .3s ease, filter .3s ease, transform .3s ease; }
.form-card.sent { display: flex; flex-direction: column; overflow: hidden; }
.form-card.sent > h2, .form-card.sent > form { display: none; }
.form-success { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.form-success[hidden] { display: none; }
.sent-dots, .sent-edge, .sent-sweep { position: absolute; top: calc(-1 * var(--card-py)); bottom: calc(-1 * var(--card-py)); left: calc(-1 * var(--card-px)); right: calc(-1 * var(--card-px)); pointer-events: none; opacity: 0; }
.sent-dots { background-image: radial-gradient(rgba(150, 172, 255, .6) 1px, transparent 1.6px); background-size: 22px 22px; background-position: 11px 11px;
  -webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 48% 100%), radial-gradient(ellipse 85% 95% at 50% 50%, #000 25%, transparent 80%);
  mask-image: linear-gradient(90deg, #000 0 40%, transparent 48% 100%), radial-gradient(ellipse 85% 95% at 50% 50%, #000 25%, transparent 80%);
  -webkit-mask-size: 250% 100%, 100% 100%; mask-size: 250% 100%, 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0, 0 0; mask-position: 100% 0, 0 0; -webkit-mask-composite: source-in; mask-composite: intersect; }
.sent-edge { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--accent), 0 0 70px rgba(59, 99, 255, .35); }
.sent-sweep { right: auto; width: 2px; background: #c9d4ff; box-shadow: 0 0 16px 4px rgba(150, 172, 255, .65), 0 0 60px 14px rgba(59, 99, 255, .3); }
.sent-dots.hot { background-image: radial-gradient(#dfe6ff 1.2px, transparent 1.9px); -webkit-mask-image: linear-gradient(90deg, transparent 0 30%, #000 38% 40%, transparent 44% 100%), radial-gradient(ellipse 85% 95% at 50% 50%, #000 25%, transparent 80%); mask-image: linear-gradient(90deg, transparent 0 30%, #000 38% 40%, transparent 44% 100%), radial-gradient(ellipse 85% 95% at 50% 50%, #000 25%, transparent 80%); }
.form-card h2.sent-title { font-size: clamp(60px, 5.6vw, 80px); line-height: 1; letter-spacing: -0.02em; margin: 0; outline: none; opacity: 0; filter: blur(10px); }
.sent-line { color: var(--muted); font-size: 15px; margin-top: 16px; opacity: 0; }
.form-success.play .sent-dots { animation: sent-light .8s cubic-bezier(.65, 0, .35, 1) .15s forwards, sent-settle 1.2s ease 1.05s forwards; }
.form-success.play .sent-dots.hot { animation: sent-light .8s cubic-bezier(.65, 0, .35, 1) .15s forwards, sent-out .5s ease .9s forwards; }
.form-success.play .sent-sweep { animation: sent-sweep .8s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
.form-success.play .sent-title { animation: sent-develop .6s var(--ease-out) .3s forwards; }
.form-success.play .sent-line { animation: fade-up .6s var(--ease-out) .85s forwards; }
.form-success.play .sent-edge { animation: sent-edge 1.1s ease-out .85s forwards; }
@keyframes sent-light { 0% { opacity: 1; -webkit-mask-position: 100% 0, 0 0; mask-position: 100% 0, 0 0; } 100% { opacity: 1; -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } }
@keyframes sent-settle { to { opacity: .38; } }
@keyframes sent-out { to { opacity: 0; } }
@keyframes sent-sweep { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(var(--sweep-w, 560px)); opacity: 0; } }
@keyframes sent-develop { to { opacity: 1; filter: blur(0); } }
@keyframes sent-edge { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }

/* Deal strip: the four terms in one line under the hero, each led by a small pin-blue dot. */
.deal-strip { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 0; padding: 17px 6vw; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.deal-strip span { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding: 0 30px; }
.deal-strip span::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-right: 12px; vertical-align: 2px; box-shadow: 0 0 10px rgba(109, 140, 255, .6); }

/* Bands */
.band { padding: 96px 6vw; }
.band-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Map section */
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
.map-headline { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.015em; max-width: 14ch; }
.map-headline em { color: var(--accent); }
.map-points { list-style: none; margin-top: 30px; }
.map-points li { position: relative; padding-left: 32px; margin-top: 16px; color: var(--muted); font-size: 15px; max-width: 52ch; }
.map-points strong { color: var(--ink); font-weight: 600; }
.map-points li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%236d8cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }

/* The map figure: a stylised local pack. A search, a night map with three pins, three results, yours on top. */
.map-fig { margin: 0; }
.pack { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.pack-search { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.pack-search svg { width: 16px; height: 16px; flex: none; color: var(--faint); }
.pack-search em { font-style: normal; color: var(--faint); margin-left: auto; font-size: 12px; letter-spacing: .04em; }
.pack-map { position: relative; background: #101218; border-bottom: 1px solid var(--line); }
.pack-map svg { display: block; width: 100%; height: auto; }
.road { fill: none; stroke: rgba(235, 238, 255, .09); stroke-width: 1.6; stroke-linecap: round; }
.road-main { stroke: rgba(235, 238, 255, .16); stroke-width: 3.5; }
.water { fill: none; stroke: rgba(59, 99, 255, .16); stroke-width: 30; stroke-linecap: round; }
.park { fill: rgba(239, 236, 228, .045); }
.pin-shape { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.pin-num { font-family: var(--serif); font-size: 17px; fill: var(--ink); text-anchor: middle; }
.pin-1 .pin-shape { fill: var(--accent-strong); stroke: none; filter: drop-shadow(0 10px 18px rgba(59, 99, 255, .45)); }
.pin-1 .pin-num { fill: #fff; }
.pin-pulse { fill: none; stroke: var(--accent); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.8); opacity: 0; } }
.pack-results { list-style: none; }
.pack-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.pack-row:last-child { border-bottom: 0; }
.pack-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 16px; color: var(--muted); border: 1px solid var(--line-strong); }
.pack-row strong { display: block; font-weight: 600; font-size: 14.5px; color: var(--muted); line-height: 1.3; }
.pack-row small { display: block; font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.pack-row small b { font-weight: 400; color: var(--accent); letter-spacing: .08em; }
.pack-call { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-strong); padding: 6px 11px; border-radius: 999px; }
.pack-row.is-you { background: rgba(59, 99, 255, .07); }
.pack-row.is-you .pack-rank { background: var(--accent-strong); border-color: transparent; color: #fff; }
.pack-row.is-you strong { color: var(--ink); }
.pack-row.is-you .pack-call { background: var(--accent-strong); border-color: transparent; color: #fff; }
.map-fig figcaption { margin-top: 14px; font-size: 13px; color: var(--faint); }

.map-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; margin-top: 72px; }
.stat { border-top: 1px solid var(--line-strong); padding-top: 24px; }
.stat-num { font-family: var(--serif); font-size: clamp(40px, 4vw, 56px); line-height: 1; color: var(--ink); }
.stat-num em { color: var(--accent); }
.stat p { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 26ch; }

/* How it works: the headline, then a route across the full width with three stops. The line draws left to
   right as the section enters and the stops light up in turn. Below 820px it becomes a vertical route. */
.how-grid .label { margin-bottom: 56px; }
.route { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding-top: 40px; }
.route-line { position: absolute; left: 5px; right: 5px; top: 5px; height: 1px; background: var(--line-strong); }
.route-line::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out) .1s; }
.route.drawn .route-line::after { transform: scaleX(1); }
.step { position: relative; }
.step::before { content: ''; position: absolute; left: 0; top: -40px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; transition-delay: var(--stop-delay, .15s); }
.route.drawn .step::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(109, 140, 255, .18); }
.route .step:nth-child(3)::before { --stop-delay: .55s; }
.route .step:nth-child(4)::before { --stop-delay: .95s; }
.step-num { font-size: 44px; line-height: 1; color: var(--faint); }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; margin-top: 18px; }
.step p { color: var(--muted); font-size: 15px; margin-top: 8px; max-width: 34ch; }

/* Concept builds: three lit screens in a row, each a browser window. */
.work-intro { color: var(--muted); font-size: 16px; max-width: 56ch; margin: -16px 0 40px; }
.work-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.work-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 0; cursor: pointer; --rx: 0deg; --ry: 0deg; }
.work-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex: none; }
.dots { display: flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); }
.browser-url { font-size: 11px; color: var(--faint); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shot { position: relative; overflow: hidden; aspect-ratio: 4 / 3; flex: none; border-bottom: 1px solid var(--line); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .7s var(--ease-out); }
.work-card:hover .shot img { transform: scale(1.035); }
.work-view { position: absolute; right: 16px; bottom: 16px; background: var(--accent-strong); color: #fff; font-size: 12px; letter-spacing: .06em; padding: 9px 13px; border-radius: var(--r-sm); box-shadow: 0 10px 26px var(--accent-glow); opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .35s var(--ease-out); }
.work-card:hover .work-view, .work-card:focus-visible .work-view { opacity: 1; transform: none; }
.work-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 3px; }
.work-card-body h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.1; }
.work-card-body p { color: var(--muted); font-size: 13.5px; }

/* Concept popup */
.mockup-dialog { width: min(1400px, 92vw); height: 92vh; max-width: none; max-height: none; padding: 0; margin: auto; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; box-shadow: 0 60px 160px rgba(0, 0, 0, .7); }
.mockup-dialog[open] { display: flex; flex-direction: column; animation: dialog-in .32s var(--ease-out); }
.mockup-dialog::backdrop { background: rgba(6, 7, 10, .72); backdrop-filter: blur(6px); }
.mockup-dialog[open]::backdrop { animation: backdrop-in .3s ease; }
@keyframes dialog-in { from { opacity: 0; transform: scale(.97) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.mockup-chrome { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex-shrink: 0; }
.mockup-url { flex: 1; text-align: center; font-size: 12px; color: var(--faint); letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mockup-close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 6px 14px; transition: color .15s ease; }
.mockup-close:hover { color: var(--ink); }
.mockup-cta { background: var(--accent-strong); color: #fff; border: 0; font-size: 12px; letter-spacing: .04em; font-weight: 600; padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background-color .15s ease, box-shadow .2s ease; }
.mockup-cta:hover { background: var(--accent-hover); box-shadow: 0 8px 22px var(--accent-glow); }
.mockup-cta .cta-short { display: none; }
.mockup-body { position: relative; flex: 1; min-height: 0; background: var(--bg); }
.mockup-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.mockup-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--faint); background: var(--bg); }
.mockup-loading[hidden] { display: none; }
.mockup-loading a { color: var(--accent); }
body.dialog-open { overflow: hidden; }

/* Privacy popup */
.privacy-dialog { width: min(620px, calc(100vw - 32px)); max-height: 90dvh; padding: 0; margin: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; box-shadow: 0 60px 160px rgba(0, 0, 0, .7); }
.privacy-dialog[open] { display: flex; flex-direction: column; animation: dialog-in .32s var(--ease-out); }
.privacy-dialog::backdrop { background: rgba(6, 7, 10, .72); backdrop-filter: blur(6px); }
.privacy-dialog[open]::backdrop { animation: backdrop-in .3s ease; }
.privacy-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 26px 34px 0; flex-shrink: 0; }
.privacy-label { font-size: 12px; letter-spacing: .24em; color: var(--faint); position: relative; padding-bottom: 10px; }
.privacy-label::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--accent); }
.privacy-close { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; margin: -6px -4px 0 0; transition: color .15s ease; }
.privacy-close:hover { color: var(--ink); }
.privacy-body { padding: 18px 34px 34px; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.privacy-headline { font-size: clamp(23px, 3vw, 28px); line-height: 1.3; letter-spacing: -0.01em; max-width: 24ch; text-wrap: balance; }
.privacy-headline em { color: var(--accent); }
.privacy-list { margin-top: 22px; }
.privacy-item { border-top: 1px solid var(--line); padding: 12px 0; }
.privacy-item dt { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.privacy-item dd { color: var(--muted); font-size: 14px; margin-top: 5px; max-width: 58ch; }
.privacy-contact { border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: 14px; }
.privacy-contact .text-link { margin-top: 0; }

/* Pricing: three cards of the same build. Each opens with a glyph on the graticule: the browser-window mark,
   then the mark with a lit map pin, then the pin broadcasting. The middle card carries the blue. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease; }
.tier::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(239, 236, 228, .35), transparent); }
.tier:hover { transform: translateY(-4px); border-color: rgba(235, 238, 255, .26); box-shadow: 0 40px 90px rgba(0, 0, 0, .55); }
.tier-art { position: relative; height: 118px; display: grid; place-items: center; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.tier-art::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(239, 236, 228, .16) 1px, transparent 1.6px); background-size: 22px 22px; background-position: 11px 11px; -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 100%, #000 10%, transparent 80%); mask-image: radial-gradient(ellipse 70% 100% at 50% 100%, #000 10%, transparent 80%); }
.tier-art svg { position: relative; width: 64px; height: 64px; overflow: visible; }
.glyph-window { fill: var(--surface-2); stroke: rgba(239, 236, 228, .7); stroke-width: 1.2; }
.glyph-bar { stroke: rgba(239, 236, 228, .45); stroke-width: 1.2; }
.glyph-dot { fill: rgba(239, 236, 228, .6); }
.glyph-pin { fill: var(--accent-strong); filter: drop-shadow(0 8px 14px rgba(59, 99, 255, .5)); }
.glyph-pin-core { fill: #fff; }
.glyph-ring { fill: none; stroke: var(--accent); stroke-width: 1; }
.tier-body { display: flex; flex-direction: column; flex: 1; padding: 24px 28px 28px; }
.tier h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; }
.tier .price { font-size: 56px; line-height: 1; margin: 14px 0 4px; }
.tier .price span { font-size: 16px; color: var(--faint); font-family: var(--sans); margin-left: 4px; }
.tier ul { list-style: none; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; line-height: 2.1; }
.tier ul li { position: relative; padding-left: 24px; }
.tier ul li::before { content: ''; position: absolute; left: 0; top: .85em; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%236d8cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; opacity: .8; }
.tier-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; line-height: 1.55; }
.tier-cta { margin-top: auto; padding-top: 22px; }
.tier-cta .text-link { margin-top: 0; }
.tier-badge { position: absolute; top: 14px; right: 14px; z-index: 1; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--accent); background: rgba(11, 12, 16, .6); border: 1px solid rgba(109, 140, 255, .45); padding: 5px 9px; border-radius: 999px; }
.tier-featured { border-color: rgba(109, 140, 255, .4); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 70px rgba(59, 99, 255, .16); }
.tier-featured::before { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.tier-featured .tier-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(240px 140px at 50% 110%, rgba(59, 99, 255, .28), transparent 70%); }
.tier-featured .price { color: var(--accent); text-shadow: 0 0 40px rgba(59, 99, 255, .35); }
.tier-featured ul { color: #c9ccd6; }
.tier-featured:hover { border-color: rgba(109, 140, 255, .6); box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 90px rgba(59, 99, 255, .22); }

/* About: one person on the left, the founding offer as a lit card on the right. Stacks below 820px. */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 6vw; align-items: center; }
.about-copy .label { margin-bottom: 28px; }
.about-lede { font-family: var(--serif); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -0.015em; max-width: 20ch; }
.about-lede em { color: var(--accent); }
.about-text { color: var(--muted); font-size: 16px; max-width: 50ch; margin-top: 16px; }
.about-lede + .about-text { margin-top: 24px; }
.founding { position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 34px 36px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.founding::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(239, 236, 228, .35), transparent); }
.founding h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -0.015em; }
.founding p { color: var(--muted); font-size: 15px; margin-top: 16px; }
.text-link { display: inline-block; color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(109, 140, 255, .45); padding-bottom: 2px; font-size: 15px; margin-top: 20px; transition: color .15s ease, border-color .15s ease; }
.text-link:hover { border-color: var(--accent); }

/* The closing moment: the hero's dot grid and a few of its sparks return. Dark, no glow, not a theme flip. */
.band-flash { position: relative; isolation: isolate; overflow: hidden; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; padding: 116px 6vw; }
.band-flash::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .7;
  background-image: radial-gradient(rgba(239, 236, 228, .2) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 100%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 90% at 50% 100%, #000 10%, transparent 75%);
}
.flash-sparks { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.flash-sparks use { animation: twinkle 6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -1s); opacity: .55; }
.band-flash h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -0.02em; }
.band-flash p { color: var(--muted); font-size: 16px; margin-top: 14px; }
.button-flash { display: inline-block; background: var(--accent-strong); color: #fff; padding: 16px 34px; font-size: 13px; letter-spacing: .12em; font-weight: 600; text-decoration: none; margin-top: 32px; border-radius: var(--r-sm); }
.button-flash:hover { background: var(--accent-hover); }

/* FAQ */
.faq-list { max-width: 820px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 20px 0; font-family: var(--serif); font-size: 21px; line-height: 1.25; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--accent); font-family: var(--sans); font-size: 22px; line-height: 1.1; flex: none; }
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list details p { color: var(--muted); font-size: 15px; padding: 0 0 22px; max-width: 58ch; }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.band-flash a:focus-visible { outline-color: var(--ink); }

/* Footer: wordmark, the page's own links, one quiet line. */
/* The extra room at the bottom keeps the copyright line clear of the floating controls. */
.footer { border-top: 1px solid var(--line); padding: 40px 6vw 84px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.footer-links a { color: var(--faint); font-size: 13.5px; text-decoration: none; transition: color .15s ease; }
.footer-links a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }

/* Back to top: one round arrow pinned to the bottom-right corner, built like the scrolled nav bar (asphalt
   glass, hairline, ivory). main.js shows it (.is-on) once the hero has scrolled off; it steps aside under the
   phone menu and dialogs. z-index 40 keeps it under the nav (50), the grain (100) and the cursor dot (200). */
.float-nav { position: fixed; right: 22px; bottom: 22px; z-index: 40; transition: opacity .2s ease, visibility 0s linear 0s; }
body.menu-open .float-nav, body.dialog-open .float-nav { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, .2s; }
.float-top { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--ink); background: rgba(21, 23, 29, .82); border: 1px solid var(--line-strong); border-radius: 999px; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: opacity .3s ease, transform .35s var(--ease-out), visibility 0s linear 0s, border-color .2s ease, color .2s ease; }
.float-top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.float-top:hover { color: var(--accent); border-color: rgba(109, 140, 255, .6); }
.float-top:active { transform: translateY(1px); }
.float-top:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition-delay: 0s, 0s, .3s, 0s, 0s; }

/* Custom cursor: a single ivory dot under the pointer. main.js adds .cursor-on to body on fine-pointer
   devices only. Text fields keep the native I-beam and hide the dot; open dialogs hand back the native
   cursor entirely, because the top layer paints over this fixed element. */
/* Size changes only, never scale: the scale property composes before the transform and would shrink the dot's
   position along with it, flinging it toward the top-left on click. */
.cursor-dot { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); translate: -50% -50%; opacity: 0; will-change: transform; transition: opacity .2s ease, background-color .25s ease, width .2s var(--ease-out), height .2s var(--ease-out), box-shadow .25s ease; }
body.cursor-on:not(.dialog-open) { cursor: none; }
body.cursor-on:not(.dialog-open) :where(a, button, summary, label, legend, [role="button"]) { cursor: none; }   /* labels: the UA gives them an arrow, which sat on top of the dot on /start */
body.cursor-on:not(.dialog-open, .cursor-native, .cursor-out) .cursor-dot { opacity: 1; }
body.cursor-link .cursor-dot { background: var(--accent); width: 12px; height: 12px; box-shadow: 0 0 18px rgba(109, 140, 255, .6); }
body.cursor-down .cursor-dot { width: 5px; height: 5px; }
body.cursor-link.cursor-down .cursor-dot { width: 9px; height: 9px; }

/* Scroll-reveal motion: .reveal is added by JS only, so content stays visible without it */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s var(--ease-out); transition-delay: var(--reveal-delay, 0s); }
.reveal.in { opacity: 1; transform: none; }

.form-card button, .button-flash { transition: background-color .15s ease, transform .15s ease-out, box-shadow .2s ease; }
.form-card button:hover { box-shadow: 0 12px 30px var(--accent-glow); }
.form-card button:active { transform: translateY(1px) !important; }
.button-flash:hover { box-shadow: 0 14px 34px var(--accent-glow); }
.work-card { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease; }
.tier.reveal, .button-flash.reveal, .work-card.reveal { transition: opacity .6s ease, transform .6s var(--ease-out); transition-delay: var(--reveal-delay, 0s); }
.work-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
/* .tilt is added by main.js while a fine pointer is over the card; the perspective transform tracks --rx/--ry. */
.work-card.tilt { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px); }

@keyframes menu-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* Hero entrance: .w spans and .hero-enter exist only when JS ran without reduced-motion */
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.55em); animation: word-in .7s var(--ease-out) forwards; animation-delay: calc(var(--wi) * 65ms); }
@keyframes word-in { to { opacity: 1; transform: none; } }
.hero-enter .hero-sub { animation: fade-up .6s var(--ease-out) .6s both; }
.hero-enter .kicker { animation: fade-up .6s var(--ease-out) .75s both; }
.hero-enter .form-card { animation: fade-up .7s var(--ease-out) .85s both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.band-flash h2.moment { clip-path: inset(0 0 100% 0); transform: translateY(14px) scale(.97); transition: clip-path .8s var(--ease-out), transform .8s var(--ease-out); }
.band-flash h2.moment.in { clip-path: inset(0 0 -12% 0); transform: none; }

@media (hover: none) {
  .work-view { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tier, .tier:hover, .work-card, .work-card:hover, .work-card.tilt { transform: none; transition: none; }
  .tier-art .pin-pulse { animation: none; }
  .work-card:hover .shot img { transform: none; }
  .nav.open .nav-links > a, .nav.open .menu-foot { animation: none; }
  .menu-art use { animation: none; }
  .nav-toggle span { transition: none; }
  .nav { transition: none; }
  .hero h1 .w, .hero-enter .hero-sub, .hero-enter .kicker, .hero-enter .form-card { animation: none; opacity: 1; transform: none; }
  /* Sent state without motion: the finished picture, no sweep. */
  .form-card.out > h2, .form-card.out > form { transition: none; }
  .form-success.play .sent-dots, .form-success.play .sent-sweep, .form-success.play .sent-title, .form-success.play .sent-line, .form-success.play .sent-edge { animation: none; }
  .form-success.play .sent-dots { opacity: .38; -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
  .form-success.play .sent-dots.hot { opacity: 0; }
  .form-success.play .sent-title { opacity: 1; filter: none; }
  .form-success.play .sent-line { opacity: 1; }
  .hero-spot { display: none; }
  .hero-sparks use, .flash-sparks use { animation: none; }
  .pin-pulse { animation: none; transform: scale(1.6); opacity: .5; }
  .cursor-dot { display: none; }
  .float-nav, .float-top { transition: none; }
  .intake-step.reveal-step { opacity: 1; transform: none; transition: none; }
  .start-hero h1 .w, .hero-enter .start-hero .kicker, .hero-enter .start-hero .intake-intro, .hero-enter .intake .form-card { animation: none; opacity: 1; transform: none; }
  .page-spot { display: none; }
  .page-stars { transform: none; }
  .page-stars .star { animation: none; }
  .route-line::after { transform: none; transition: none; }
  .step::before { background: var(--accent); border-color: var(--accent); transition: none; }
  .band-flash h2.moment { clip-path: none; transform: none; transition: none; }
  .form-card button, .button-flash { transition: background-color .15s ease; }
  .mockup-dialog[open], .mockup-dialog[open]::backdrop { animation: none; }
  .privacy-dialog[open], .privacy-dialog[open]::backdrop { animation: none; }
}

@media (max-width: 1100px) {
  .work-card-body h3 { font-size: 20px; }
}

@media (max-width: 820px) {
  /* Phone menu: the whole screen. The hero's dot grid and sparks come back, the links are serif at poster
     size with pin-blue numbers, and they rise in one after another. The bar stays put on top of the panel;
     its blur is dropped while open so the fixed panel is positioned against the viewport, not the bar. */
  .nav.open { background: var(--bg); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav .wordmark, .nav-toggle { position: relative; z-index: 2; }
  .nav-toggle { display: block; }
  .nav-links { display: none; position: fixed; inset: 0; z-index: 1; background: var(--bg); flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; padding: calc(100px + env(safe-area-inset-top, 0px)) 8vw calc(96px + env(safe-area-inset-bottom, 0px)); overflow: hidden; counter-reset: menu; }
  .nav-links::before { content: ''; position: absolute; inset: 0; opacity: .6; pointer-events: none; background-image: radial-gradient(rgba(239, 236, 228, .18) 1px, transparent 1.6px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 85% 70% at 30% 92%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 85% 70% at 30% 92%, #000 10%, transparent 75%); }
  .menu-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .menu-art use { animation: twinkle 6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -1s); opacity: .55; }
  .nav-links a { position: relative; font-family: var(--serif); font-size: clamp(42px, 12vw, 60px); line-height: 1.08; color: var(--ink); padding: 8px 0 8px 44px; letter-spacing: -0.015em; }
  .nav-links a:not(.nav-cta)::before { counter-increment: menu; content: '0' counter(menu); position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 11px; letter-spacing: .24em; color: var(--accent); font-weight: 600; }
  .nav-links a:not(.nav-cta):active { color: var(--accent); }
  .nav-links .nav-cta { font-family: var(--sans); font-size: 13px; margin-top: 30px; padding: 17px 20px; letter-spacing: .12em; width: 100%; text-align: center; line-height: 1; }
  .menu-foot { display: block; position: absolute; left: 8vw; right: 8vw; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }
  .nav.open .nav-links { display: flex; }
  .nav.open .nav-links > a { animation: menu-in .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
  .nav.open .menu-foot { animation: menu-in .6s var(--ease-out) .45s both; }
  body.menu-open { overflow: hidden; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { flex-direction: column; align-items: stretch; padding: 5vh 6vw 9vh; min-height: 0; }
  .hero-bg::before {
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 40% 20%, #000 10%, transparent 70%), linear-gradient(to bottom, transparent, #000 150px);
    mask-image: radial-gradient(ellipse 90% 60% at 40% 20%, #000 10%, transparent 70%), linear-gradient(to bottom, transparent, #000 150px);
  }
  .form-card { width: 100%; min-width: 0; padding: 28px 22px; --card-px: 22px; --card-py: 28px; }
  .kicker { font-size: 10.5px; letter-spacing: .18em; }
  .band { padding: 72px 6vw; }
  .label { margin-bottom: 32px; }
  .deal-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 16px 6vw; }
  .deal-strip span { padding: 0; font-size: 11px; white-space: normal; }
  .map-grid { grid-template-columns: 1fr; gap: 44px; }
  .map-headline { max-width: none; }
  .map-stats { grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-top: 56px; }
  .how-grid .label { margin-bottom: 32px; }
  .route { display: block; padding: 0 0 0 40px; }
  .route-line { left: 5px; right: auto; top: 34px; bottom: 34px; width: 1px; height: auto; }
  .route-line::after { transform: scaleY(0); transform-origin: top; }
  .route.drawn .route-line::after { transform: scaleY(1); }
  .step { padding: 24px 0; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: 0; }
  .step::before { left: -40px; top: 32px; }
  .step-num { font-size: 30px; }
  .step h3 { font-size: 23px; margin-top: 8px; }
  .step p { max-width: 48ch; }
  .work-cards { grid-template-columns: 1fr; }
  .shot { aspect-ratio: 3 / 2; }
  .tiers { grid-template-columns: 1fr; gap: 16px; }
  .tier-body { padding: 22px 24px 26px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .founding { padding: 26px 22px; }
  .band-flash { padding: 88px 6vw; }
  .footer-row { flex-direction: column; gap: 18px; align-items: flex-start; }
  .footer-links { gap: 8px 20px; }
  .pack-search em { display: none; }
  .mockup-dialog { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  .mockup-cta .cta-long { display: none; }
  .mockup-cta .cta-short { display: inline; }
  .privacy-head { padding: 24px 24px 0; }
  .privacy-body { padding: 14px 24px 28px; }
  .float-nav { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .float-top { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  .deal-strip { grid-template-columns: 1fr; gap: 9px; }
  .map-stats { grid-template-columns: 1fr; }
  .pack-row { grid-template-columns: 26px 1fr auto; gap: 10px; padding: 12px 14px; }
  .pack-call { padding: 5px 9px; font-size: 10.5px; }
}