/* ==========================================================
   Nuvo Labs — global styles
   Brand: primary #00704A · secondary #19C45B · accent #D8FF00
          frost #F3F8F4 · dark #242826
   ========================================================== */

:root {
  --primary: #00704a;
  --secondary: #19c45b;
  --accent: #d8ff00;
  --frost: #f3f8f4;
  --dark: #242826;

  /* derived from the dark neutral for depth */
  --ink: #0d100e;          /* page background */
  --ink-2: #151917;        /* raised surface */
  --line: rgba(243, 248, 244, 0.1);
  --line-strong: rgba(243, 248, 244, 0.18);
  --muted: rgba(243, 248, 244, 0.62);
  --dim: rgba(243, 248, 244, 0.42);

  --logo-lime: var(--accent); /* logo uses the brand lime, #D8FF00 */

  --font-display: "Chonburi", Georgia, serif;
  --font-body: "Domine", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-logo: "Poppins", "Montserrat", Arial, sans-serif;

  --radius: 20px;
  --radius-sm: 12px;
  /* fluid layout: the side margin grows with the screen, and content widens up to 1680px,
     so wide monitors aren't left with empty bands on both sides */
  --gutter: clamp(16px, 5vw, 96px);
  --max: 1680px;
  --side: max(var(--gutter), calc((100% - var(--max)) / 2));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

/* clip on html too: otherwise body's clip is handed to the viewport and phones can still pan sideways */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--frost);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }

.container { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
}
.display { font-size: clamp(40px, 5.6vw, 88px); letter-spacing: -0.02em; line-height: 1.02; }
.h1 { font-size: clamp(36px, 5vw, 76px); letter-spacing: -0.02em; line-height: 1.04; }
.h2 { font-size: clamp(30px, 3.8vw, 54px); }
.h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; }
.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); max-width: 56ch; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.grad {
  background: linear-gradient(100deg, var(--secondary) 0%, var(--accent) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  animation: blink 2.4s infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--accent);
  --fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-weight: 600;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.55), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px -10px rgba(216, 255, 0, 0.6); }
.btn:hover::after { opacity: 1; }
.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-ghost {
  --bg: rgba(243, 248, 244, 0.06);
  --fg: var(--frost);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { box-shadow: 0 12px 40px -14px rgba(25, 196, 91, 0.5); border-color: var(--secondary); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14px; }
.nav .btn-sm { height: 52px; padding: 0 28px; font-size: 16px; }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 16px 0 auto;
  z-index: 50;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
  padding: 0 10px 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(13, 16, 14, 0.55);
  backdrop-filter: blur(18px) saturate(1.4);
  transition: background 0.4s;
}
.site-header.scrolled .nav { background: rgba(13, 16, 14, 0.85); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--logo-lime); }
.logo-mark { width: 38px; height: 38px; flex: none; }
.logo-word { font-family: var(--font-logo); font-weight: 800; font-size: 15px; line-height: 0.95; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.25s, background 0.25s;
}
.nav-links a:hover { color: var(--frost); background: rgba(243, 248, 244, 0.06); }
.nav-links a[aria-current="page"] { color: var(--frost); background: rgba(243, 248, 244, 0.08); }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before {
  position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--frost);
  transition: transform 0.35s var(--ease);
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { content: ""; left: 0; right: 0; top: -6px; }
.nav-open .nav-toggle span { transform: rotate(45deg); }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(-90deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 140px 0 72px;
  overflow: hidden;
}
.hero.short { min-height: 78svh; }
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,16,14,0.85) 0%, rgba(13,16,14,0.45) 40%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1024px) { .hero::before { background: linear-gradient(0deg, rgba(13,16,14,0.88) 0%, rgba(13,16,14,0.5) 45%, rgba(13,16,14,0.1) 75%); } }
.hero::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; pointer-events: none; }
.hero .container a, .hero .container button, .hero .container .form-wrap, .hero .container .glass { pointer-events: auto; }
.hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; align-items: end; gap: 48px; }
.hero h1 { margin: 22px 0 26px; }
.hero.short h1 { max-width: 13ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-side {
  display: grid; gap: 14px;
  justify-self: end;
  max-width: 300px;
}
.hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
.hint i { width: 22px; height: 34px; border: 1px solid var(--line-strong); border-radius: 12px; position: relative; }
.hint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); animation: scrolldot 1.8s infinite; }
@keyframes scrolldot { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }

.glass {
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(243,248,244,0.07), rgba(243,248,244,0.02));
  backdrop-filter: blur(16px);
  border-radius: var(--radius);
}
.hud { padding: 18px 20px; font-size: 14px; }
.hud .hud-top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.hud .live { color: var(--secondary); display: inline-flex; gap: 6px; align-items: center; }
.hud .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 10px var(--secondary); animation: blink 1.2s infinite; }
.wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.wave b { flex: 1; background: var(--accent); border-radius: 2px; height: 20%; animation: wv 1.1s ease-in-out infinite; }
.wave b:nth-child(odd) { background: var(--secondary); }
@keyframes wv { 50% { height: 100%; } }

/* ---------- sections ---------- */
section { position: relative; }
.section { padding: clamp(90px, 12vw, 160px) 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 60px; flex-wrap: wrap; }
.section-head .lead { margin: 0; }
.section-head h2 { margin-top: 18px; max-width: 16ch; }

/* marquee */
.marquee {
  position: relative;
  border-block: 1px solid var(--line);
  padding: 26px 0;
  overflow: hidden;
  contain: paint;
  background: var(--ink); /* opaque: the strip never blends with the 3D canvas moving underneath */
}
/* edge fades as overlays (a mask-image here forced the whole strip to repaint every frame) */
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }
/* moved by main.js, which measures the real loop length so the wrap is seamless */
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-track span { flex: none; padding-right: 56px; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 30px); color: var(--dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.marquee-track span::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

/* cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-3.plans-two { grid-template-columns: repeat(2, 1fr); max-width: 980px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card {
  position: relative;
  padding: 30px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color 0.4s, transform 0.5s var(--ease);
  will-change: transform;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(25, 196, 91, 0.16), transparent 45%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.card:hover { border-color: rgba(216, 255, 0, 0.35); }
.card:hover::before { opacity: 1; }
.card .num { font-family: var(--font-mono); font-size: 12px; color: var(--dim); letter-spacing: 0.1em; }
.card h3 { margin: 70px 0 12px; }
.card p { color: var(--muted); margin: 0; font-size: 15px; }
.card .icon {
  position: absolute; top: 26px; right: 26px;
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(216, 255, 0, 0.08);
  border: 1px solid rgba(216, 255, 0, 0.2);
  color: var(--accent);
  transform: translateZ(40px);
}
.card .icon svg { width: 24px; height: 24px; }
.card .more { display: inline-flex; gap: 8px; margin-top: 24px; font-size: 14px; color: var(--accent); }

/* demo split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.call {
  padding: 26px;
  display: grid; gap: 12px;
  border-radius: 28px;
  position: relative;
}
.call-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.call-avatar { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent), var(--secondary) 45%, var(--primary)); box-shadow: 0 0 30px rgba(25,196,91,0.5); }
.call-head strong { display: block; font-size: 15px; }
.call-head small { color: var(--dim); font-family: var(--font-mono); font-size: 11px; }
.call-head .wave { margin-left: auto; width: 80px; }
.bubble {
  max-width: 82%; padding: 12px 16px; border-radius: 16px; font-size: 14px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.bubble.show { opacity: 1; transform: none; }
.bubble.caller { background: rgba(243,248,244,0.06); border: 1px solid var(--line); }
.bubble.ai { margin-left: auto; background: rgba(0, 112, 74, 0.35); border: 1px solid rgba(25, 196, 91, 0.35); }
.bubble.sys { margin: 4px auto 0; max-width: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; background: rgba(216,255,0,0.07); border: 1px dashed rgba(216,255,0,0.3); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 36px 28px 0 0; border-right: 1px solid var(--line); }
.stat + .stat { padding-left: 28px; }
.stat:last-child { border-right: 0; }
.stat .big { font-family: var(--font-display); font-size: clamp(40px, 4.4vw, 66px); letter-spacing: -0.02em; line-height: 1; }
.stat .big sup { font-size: 0.4em; color: var(--accent); vertical-align: top; margin-left: 4px; }
.stat p { color: var(--muted); font-size: 14px; margin: 12px 0 0; max-width: 24ch; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.step { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--ink-2); position: relative; overflow: hidden; }
.step::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--secondary), var(--accent)); transition: width 1.2s var(--ease); }
.step.in::after { width: 100%; }
.step .n { font-family: var(--font-display); font-size: 48px; letter-spacing: -0.02em; color: var(--accent); line-height: 1; }
.step h3 { margin: 40px 0 10px; font-size: 22px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }
.step small { display: block; margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }

/* timeline (process page) */
.timeline { position: relative; display: grid; gap: 20px; }
.timeline::before { content: ""; position: absolute; left: 31px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.timeline .progress { position: absolute; left: 31px; top: 0; width: 1px; height: var(--p, 0%); background: linear-gradient(var(--secondary), var(--accent)); box-shadow: 0 0 12px var(--accent); }
.tl-item { display: grid; grid-template-columns: 64px 1fr; gap: 28px; }
.tl-dot { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; background: var(--ink); border: 1px solid var(--line-strong); position: relative; z-index: 1; transition: all 0.5s var(--ease); }
.tl-item.in .tl-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 30px rgba(216,255,0,0.25); }
.tl-body { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--ink-2); }
.tl-body h3 { margin-bottom: 10px; }
.tl-body p { margin: 0; color: var(--muted); }
.tag { display: inline-block; margin-top: 16px; padding: 6px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: rgba(216,255,0,0.07); border: 1px solid rgba(216,255,0,0.2); }

/* services detail */
.svc { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; padding: 56px 0; border-top: 1px solid var(--line); align-items: start; }
.svc-title { position: sticky; top: 120px; }
.svc-title .num { font-family: var(--font-mono); color: var(--accent); font-size: 13px; letter-spacing: 0.1em; }
.svc-title h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 46px); }
.svc-body p { color: var(--muted); font-size: 18px; margin: 0 0 24px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--ink-2); font-size: 15px; }
.ticks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d100e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.best { margin-top: 22px; font-size: 14px; color: var(--dim); }
.best strong { color: var(--frost); font-weight: 500; }

/* industries */
.ind { display: flex; flex-direction: column; min-height: 340px; }
.ind h3 { margin: 0 0 18px; }
.ind .row { padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.ind .row b { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); font-weight: 400; margin-bottom: 4px; }
.ind .row.fix b { color: var(--accent); }
.ind .row.fix { color: var(--frost); }
.ind .badge { align-self: flex-start; margin-bottom: 60px; }

/* Plans */
.plan { display: flex; flex-direction: column; }
.plan .badge { align-self: flex-start; margin: 0 0 40px; }
.plan h3 { margin: 0 0 10px; }
.plan > p { margin-bottom: 26px; }
.plan .price { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.plan .price small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.plan .price b { font-family: var(--font-display); font-size: 30px; color: var(--frost); letter-spacing: -0.02em; }
.plan .price b span { font-size: 15px; color: var(--muted); margin-left: 2px; }
.plan .ticks { list-style: none; padding: 18px 0 0; margin: 0 0 28px; border-top: 1px solid var(--line); display: grid; gap: 10px; flex: 1; }
.plan > p { min-height: 4.8em; }
.plan .ticks li { position: relative; padding: 0 0 0 22px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 15px; color: var(--muted); }
.plan .ticks li::before { content: ""; position: absolute; left: 2px; top: 0.6em; bottom: auto; right: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.plan .btn { align-self: flex-start; }
.plan.featured { border-color: rgba(216, 255, 0, 0.45); box-shadow: 0 30px 80px -40px rgba(216, 255, 0, 0.35); }
.plan.featured .badge { color: var(--ink, #0d100e); background: var(--accent); border-color: var(--accent); }
.addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.addon { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.addon b { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--frost); }
.addon span { grid-column: 1; color: var(--muted); font-size: 15px; }
.addon em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--accent); white-space: nowrap; }
@media (max-width: 900px) { .addons { grid-template-columns: 1fr; } .addon { grid-template-columns: 1fr; } .addon em { grid-column: 1; grid-row: auto; margin-top: 6px; } }

/* faq */
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ink-2); transition: border-color 0.3s; }
.faq details[open] { border-color: rgba(216,255,0,0.3); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 24px; display: flex; justify-content: space-between; gap: 20px; font-family: var(--font-display); font-size: 19px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1; transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--muted); max-width: 70ch; }

/* cta band */
.cta {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  min-height: 520px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid var(--line);
  isolation: isolate;
}
.cta .scene { z-index: -1; }
.cta::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 48% 55% at 50% 50%, rgba(13,16,14,0.88), rgba(13,16,14,0.45) 65%, rgba(13,16,14,0.1));
  z-index: -1;
  pointer-events: none;
}
.cta-inner { padding: 80px 24px; pointer-events: none; }
.cta-inner a { pointer-events: auto; }
.cta h2 { max-width: 14ch; margin: 18px auto 20px; }
.cta .lead { margin: 0 auto 34px; }

/* form */
.form { display: grid; gap: 14px; padding: 32px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(13,16,14,0.6);
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8FF00' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.field select option { background: var(--ink-2); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(25,196,91,0.15); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.check input { margin-top: 3px; accent-color: var(--secondary); width: 16px; height: 16px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-error { margin: 0; font-size: 14px; color: #ff8a7a; }
.form-error[hidden] { display: none; }
.form-success { display: none; padding: 48px 32px; text-align: center; }
.form-success .ok { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ink); box-shadow: 0 0 50px rgba(216,255,0,0.45); }
.sent .form { display: none; }
.sent .form-success { display: block; }
.contact-list { display: grid; gap: 12px; margin-top: 36px; }
.contact-list div { padding: 18px 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(21,25,23,0.7); backdrop-filter: blur(10px); }
.contact-list b { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin-bottom: 4px; }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: 72px 0 40px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-grid h4 { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid a { color: var(--muted); transition: color 0.2s; }
.footer-grid a:hover { color: var(--accent); }
/* footer wordmark: the logo mark is the N; a gooey cursor trail reveals a contour livery underneath (liquid.js) */
.liquid-word { position: relative; margin: 0; user-select: none; line-height: 0; }
.liquid-static {
  display: block; white-space: nowrap;
  font-family: var(--font-logo); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  font-size: clamp(44px, 5vw, 76px); color: var(--frost);
}
.liquid-static svg { display: inline; height: 0.7em; width: auto; vertical-align: baseline; margin-right: 0.03em; }
.liquid-word canvas, .liquid-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.liquid-word canvas { visibility: hidden; }
.liquid-word.ready .liquid-static { visibility: hidden; }
.liquid-word.moving canvas { visibility: visible; }
.liquid-word.moving .liquid-img { visibility: hidden; }
.footer-pattern { display: none; }
.footer-pattern { height: 26px; margin: 30px 0 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M3,23L23,23L23,3A20,20 0 0 0 3,23Z' fill='%23d8ff00' fill-opacity='.18'/%3E%3C/svg%3E") repeat-x; }
.footer-bottom { padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.footer-credit { margin-top: 10px; font-size: 11px; color: var(--dim); opacity: .7; }
.footer-credit a { color: inherit; text-decoration: underline; }

/* cursor glow */
.cursor-glow {
  position: fixed; left: 0; top: 0; width: 500px; height: 500px; margin: -250px 0 0 -250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,196,91,0.09), transparent 60%);
  pointer-events: none; z-index: 0;
  transition: opacity 0.4s;
}

/* reveal */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.split-words .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 0.05s); }
.split-words.in .w > span { transform: none; }

/* page loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--ink); display: grid; place-items: center; transition: opacity 0.7s var(--ease), visibility 0.7s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-bar { width: 160px; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.loader-bar::after { content: ""; display: block; height: 100%; width: 40%; background: var(--accent); animation: load 1s var(--ease) infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- story (scroll-driven, home) ---------- */
/* hero pins in place; the story's white sheet slides up over it */
.curtain { position: relative; }
.hero-pinned { position: sticky; top: 0; z-index: 0; padding-bottom: 150px; transform: scale(calc(1 - var(--cover, 0) * 0.05)); transform-origin: 50% 0; }
.hero-dim { position: absolute; inset: 0; z-index: 3; background: #000; opacity: calc(var(--cover, 0) * 0.65); pointer-events: none; }
.hero .marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }

.story { position: relative; z-index: 2; height: 860vh; }
.story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* the white sheet: slightly inset with rounded top corners while rising, full-bleed once pinned */
.story-screen {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(var(--inset, 5) * 1%) 0 round calc(var(--inset, 5) * 8px) calc(var(--inset, 5) * 8px) 0 0);
  box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.5);
}
.story-copy, .story-rail, .orbit { opacity: var(--copy, 0); }
.story-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.story-rail { position: absolute; left: var(--side); bottom: 40px; display: flex; gap: 22px; z-index: 5; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); transition: color 0.5s; }
.story-rail span { position: relative; padding-top: 12px; transition: color 0.4s; }
.story-rail span::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--line); }
.story-rail span::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--f, 0) * 100%); background: var(--accent); }
.story-rail span.on { color: var(--frost); }

/* copy sits either side of the phone */
.story-copy { position: absolute; z-index: 4; top: 50%; height: 0; width: min(330px, 25vw); transition: color 0.5s; }
.story-copy.side-l { left: var(--side); }
.story-copy.side-r { right: var(--side); width: min(300px, 22vw); }
.chapter { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(calc(-50% + 30px)); opacity: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); pointer-events: none; }
.chapter.on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.chapter.past { transform: translateY(calc(-50% - 30px)); }
.chapter h2 { font-size: clamp(30px, 3.2vw, 50px); margin: 16px 0 0; }
.chapter p { color: var(--muted); font-size: 18px; margin: 0; transition: color 0.5s; }
.chapter p + p { margin-top: 14px; }
.chapter .tap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.missed { margin-top: 28px; display: flex; align-items: baseline; gap: 14px; }
.missed b { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 6vw, 96px); line-height: 1; font-variant-numeric: tabular-nums; }
.missed small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

/* light (white screen) phase: dark text, green instead of lime for small accents */
.story.light .story-copy { color: var(--ink); }
.story.light .chapter p { color: rgba(13, 16, 14, 0.66); }
.story.light .eyebrow, .story.light .missed small { color: var(--primary); }
.story.light .eyebrow::before { background: var(--primary); box-shadow: none; }
.story.light .story-rail { color: rgba(13, 16, 14, 0.45); }
.story.light .story-rail span.on { color: var(--ink); }
.story.light .story-rail span::before { background: rgba(13, 16, 14, 0.12); }
.story.light .story-rail span::after { background: var(--primary); }

/* service buttons orbiting the AI core */
.orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; }
.orbit-chip {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 999px;
  background: rgba(13,16,14,0.8); border: 1px solid rgba(25,196,91,0.38); backdrop-filter: blur(10px);
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.orbit-chip.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) translate(calc(var(--x) * var(--k, 1)), calc(var(--y) * var(--k, 1))); }
.orbit-chip.show:hover, .orbit-chip.show:focus-visible { background: var(--secondary); color: var(--ink); border-color: var(--secondary); box-shadow: 0 10px 40px -8px rgba(25,196,91,0.6); outline: none; }
.orbit-chip i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--secondary); color: var(--ink); font-style: normal; transition: background 0.25s, color 0.25s; }
.orbit-chip:hover i, .orbit-chip:focus-visible i { background: var(--ink); color: var(--secondary); }
.orbit-chip i svg { width: 16px; height: 16px; }
.orbit-chip b { font-weight: 400; opacity: 0; width: 0; overflow: hidden; transition: opacity 0.25s, width 0.25s; }
.orbit-chip:hover b, .orbit-chip:focus-visible b { opacity: 1; width: 1em; }

/* resolved call log (final chapter, right side) */
.log { display: grid; gap: 8px; margin-bottom: 26px; }
.log div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; font-size: 13px; background: rgba(0,112,74,0.28); border: 1px solid rgba(25,196,91,0.35); }
.log div span:last-child { font-family: var(--font-mono); font-size: 11px; color: var(--accent); align-self: center; white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat { padding-bottom: 32px; }
  .hero-grid, .split, .svc { grid-template-columns: 1fr; }
  .hero-side { justify-self: start; }
  .svc-title { position: static; }
}
@media (max-width: 900px) {
  /* headline above the phone, detail below it */
  .story-copy, .story-copy.side-l, .story-copy.side-r { width: calc(100% - 48px); left: 24px !important; right: auto !important; }
  .story-copy.side-l { top: 108px; }
  .story-copy.side-r { top: auto; bottom: 120px; }
  .story-copy.side-l .chapter { transform: translateY(20px); }
  .story-copy.side-r .chapter { top: auto; bottom: 0; transform: translateY(20px); }
  .story-copy .chapter.on { transform: none; }
  .story-copy .chapter.past { transform: translateY(-20px); }
  .chapter h2 { font-size: 28px; margin-top: 10px; }
  .chapter p { font-size: 15px; }
  .missed { margin-top: 8px; }
  .missed b { font-size: 48px; }
  .log { display: none; }
  /* narrow screens: the chips still ring the core, but on a zig-zag (main.js sets --x/--y from the
     stage size) so every pill is the same size and none share a row. The paragraph that only repeated
     the chips is dropped to give them the room. */
  .orbit { top: 45.8%; } /* the 3D scene is lifted a little on portrait screens (story.js) */
  .orbit-chip { font-size: 12.5px; padding: 7px 14px 7px 7px; gap: 8px; }
  .orbit-chip i { width: 26px; height: 26px; }
  .orbit-chip i svg { width: 14px; height: 14px; }
  .orbit-chip b { display: none; }
  .orbit-chip i { flex: none; }
  .story-copy.side-r .chapter:has(.tap) { display: none; }
  .story-rail { bottom: 24px; gap: 12px; font-size: 9px; }
}
@media (max-width: 639.98px) {
  /* phones: the same six-point ring as desktop. Labels wrap to two lines so a left and a right pill
     fit on one row with the core showing between them (main.js places them from the stage size). */
  .orbit-chip { width: 142px; white-space: normal; text-wrap: balance; line-height: 1.15; font-size: 12px; padding: 7px 10px 7px 7px; border-radius: 24px; }
}
@media (max-width: 640px) {
  .container { width: calc(100% - 32px); }
  .grid-3, .grid-3.plans-two, .grid-2, .steps, .form .row2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr; }
  .card h3 { margin-top: 56px; }
  .tl-item { grid-template-columns: 48px 1fr; gap: 16px; }
  .tl-dot { width: 48px; height: 48px; font-size: 18px; }
  .timeline::before, .timeline .progress { left: 23px; }
}
/* ==========================================================
   Minimal layer (Lando-inspired): two tones, big type, scroll-authored reveals,
   liquid-glass header. Loaded last so it refines everything above.
   ========================================================== */

/* content stays visible if scripts fail; hidden start states only apply once JS is running */
.reveal { opacity: 1; transform: none; }
.js .reveal:not(.in) { opacity: 0; transform: translateY(28px); }

/* browser surfaces carry the palette too */
html { scrollbar-color: rgba(216, 255, 0, 0.55) var(--ink); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: rgba(216, 255, 0, 0.45); border-radius: 10px; border: 2px solid var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
input, textarea { caret-color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* accent words: weight of colour, not gradients */
h1 em, h2 em, h3 em, .statement-text em { font-style: normal; color: var(--accent); }
.cursor-glow { display: none; }

/* page background crossfades between the dark and cream sections */
body { transition: background-color 0.8s var(--ease), color 0.8s var(--ease); }
body[data-bg="light"] { background: var(--frost); }

/* topographic contour lines behind everything (an echo of the blob) */
/* exact per-section backdrop, painted by main.js under the contour lines */
.tone-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.topo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; color: rgba(243, 248, 244, 0.07); transition: color 0.8s var(--ease); }
body[data-bg="light"] .topo { color: rgba(13, 16, 14, 0.09); }
/* Services: headphones that travel down the page behind the content */
.travel-3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.travel-3d.ready { opacity: 1; }
.travel-3d.behind { z-index: -1; }
/* a narrower headline leaves the right side of the hero clear for the headphones */
body[data-travel] .page-hero h1 { font-size: clamp(44px, 6.2vw, 100px); }
@media (max-width: 760px) { body[data-travel] .page-hero { padding-top: 46svh; } }.topo path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- liquid-glass header ---------- */
.site-header { inset: 14px 0 auto; }
.nav {
  position: relative;
  isolation: isolate;
  height: 62px;
  padding: 0 8px 0 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  /* no hard top highlight: just a faint hairline and a soft glow from the inside edge */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 0 16px rgba(255, 255, 255, 0.09),
    inset 0 0 4px rgba(255, 255, 255, 0.06),
    0 18px 40px -18px rgba(0, 0, 0, 0.55);
  backdrop-filter: none;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.5s var(--ease);
}
/* glass layer: refracts whatever is behind the bar (Chromium applies the SVG map), then frosts it.
   Browsers without url() backdrop filters ignore the second declaration and keep the frosted first one.
   It lives on a pseudo-element because a backdrop filter on .nav itself would hide the page from it. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(12px) saturate(1.9);
  backdrop-filter: blur(12px) saturate(1.9);
}
/* clear liquid glass (map generated per element in main.js): no frost, just a refracting rim */
.glass-live::before { -webkit-backdrop-filter: var(--glass) saturate(1.5) brightness(1.06); backdrop-filter: var(--glass) saturate(1.5) brightness(1.06); }
.nav.glass-live { background: rgba(255, 255, 255, 0.02); }
.site-header[data-theme="light"] .nav.glass-live { background: rgba(255, 255, 255, 0.14); }

/* "Explore services": the same clear glass, button-sized */
.btn-ghost {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 14px 30px -14px rgba(0, 0, 0, 0.6);
}
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
}
.btn-ghost:hover { border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(216, 255, 0, 0.45), 0 14px 34px -12px rgba(216, 255, 0, 0.35); }
.site-header.scrolled .nav { background: rgba(255, 255, 255, 0.07); }
.nav-links a { color: rgba(243, 248, 244, 0.72); }
.nav-links a:hover { background: rgba(255, 255, 255, 0.1); }
.nav-links a[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: var(--frost); }
/* over cream sections and the white phone screen the glass goes light */
.site-header[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.38);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(13, 16, 14, 0.06),
    inset 0 0 0 1px rgba(13, 16, 14, 0.08),
    inset 0 0 22px rgba(255, 255, 255, 0.5),
    0 18px 40px -20px rgba(13, 16, 14, 0.35);
}
.site-header[data-theme="light"] .nav-links a { color: rgba(13, 16, 14, 0.66); }
.site-header[data-theme="light"] .nav-links a:hover,
.site-header[data-theme="light"] .nav-links a[aria-current="page"] { color: var(--ink); background: rgba(13, 16, 14, 0.07); }
.site-header[data-theme="light"] .logo-word { color: var(--ink); }
.site-header[data-theme="light"] .nav-toggle { border-color: rgba(13, 16, 14, 0.2); }
.site-header[data-theme="light"] .nav-toggle span,
.site-header[data-theme="light"] .nav-toggle span::before { background: var(--ink); }

/* ---------- hero ---------- */
.hero-copy { max-width: 720px; }
/* sketch copy of the hero text, revealed by the cursor trail (headphones.js) */
.hero-sketch { position: absolute; margin: 0; max-width: none; pointer-events: none; z-index: 1; clip-path: url(#hero-sketch-clip); }
.hero-sketch, .hero-sketch * { transform: none !important; opacity: 1 !important; transition: none !important; animation: none !important; filter: none !important; }
/* under the trail the headline's two colours swap: white words go lime, lime words go white */
.hero-sketch h1 { color: var(--accent); }
.hero-sketch h1 em { color: var(--frost); }
.hero-copy .lead { margin: 0; }

/* ---------- story copy without kickers ---------- */
.chapter h2 { margin-top: 0; }
.story.light .chapter h2 em { color: var(--primary); }
.chapter .tap { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--accent); }
.story-rail { font-family: var(--font-body); letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
/* services finale sits on white too */
.story.light .chapter .tap { color: var(--primary); }
.story.light .log div { background: rgba(0, 112, 74, 0.07); border-color: rgba(0, 112, 74, 0.22); color: var(--ink); }
.story.light .log div span:last-child { color: var(--primary); }
.story.light .orbit-chip { box-shadow: 0 14px 30px -14px rgba(13, 16, 14, 0.45); }

/* ---------- statement: words light up with scroll ---------- */
.statement { padding: clamp(140px, 22vh, 240px) 0; }
.statement-text {
  margin: 0 auto;
  max-width: 1080px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.3vw, 66px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.statement-text .sw { transition: opacity 0.25s linear; }

/* pinned: words light up, then the text moves left and the calculator slides in from the right */
.statement-pin { padding: 0; height: 320vh; --m: 0; }
.statement-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.statement-pin .statement-text {
  width: min(1080px, 90vw);
  transform: translateX(calc(var(--m) * -24vw)) scale(calc(1 - var(--m) * 0.42));
  will-change: transform;
}
.loss-calc {
  position: absolute; right: 5vw; top: 50%;
  width: min(520px, 40vw);
  transform: translate(calc((1 - var(--m)) * 110%), -50%);
  opacity: var(--m);
  padding-top: 18px; border-top: 3px solid var(--fg, #F3F8F4);
}
.loss-kicker { margin: 0 0 18px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.loss-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 16px;
  padding: 16px 0; border-bottom: 1px solid rgba(243, 248, 244, 0.14); cursor: pointer;
}
.loss-row span { opacity: 0.7; }
.loss-row output { font-family: var(--font-display); font-size: 26px; }
.loss-row input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.loss-result { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 0 8px; }
.loss-result span { opacity: 0.7; }
.loss-result strong { font-family: var(--font-display); font-size: clamp(44px, 5vw, 76px); line-height: 1; color: var(--accent); }
.loss-note { margin: 8px 0 22px; font-size: 15px; opacity: 0.75; }
.loss-note b { color: var(--accent); font-weight: 400; }
@media (max-width: 900px) {
  .statement-pin { height: auto; padding: clamp(100px, 16vh, 180px) 0; }
  .statement-stage { position: static; height: auto; flex-direction: column; gap: 64px; padding: 0 6vw; }
  .statement-pin .statement-text { transform: none; width: 100%; }
  .loss-calc { position: static; width: 100%; transform: none; opacity: 1; }
  /* unpinned, the calculator is still on screen when the page tone flips to cream: keep its own dark ground */
  .statement-pin { background: var(--ink); color: var(--frost); }
  .loss-result { flex-wrap: wrap; }
}

/* ---------- demo ---------- */
.demo { padding: clamp(80px, 12vh, 140px) 0 clamp(120px, 18vh, 200px); }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.demo-copy h2 { margin-bottom: 28px; max-width: 12ch; }
.demo-copy .lead { margin-bottom: 30px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 16px; color: var(--accent);
  padding-bottom: 6px; border-bottom: 1px solid currentColor;
}
.link-arrow span { transition: transform 0.35s var(--ease); }
.link-arrow:hover span { transform: translateX(6px); }
.call {
  padding: 28px;
  display: grid; gap: 12px;
  border-radius: 28px;
  background: #151917;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.call-head small { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }
.bubble.sys { font-family: var(--font-body); letter-spacing: 0.02em; text-transform: none; font-size: 12px; }
/* the card wipes open from the bottom edge as it arrives */
.wipe { transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.js .wipe:not(.in) { clip-path: inset(100% 0 0 0 round 28px); transform: translateY(40px); }
.js .wipe.in { clip-path: inset(0 0 0 0 round 28px); }

/* ---------- process (cream) ---------- */
.process { padding: clamp(120px, 18vh, 200px) 0; color: var(--ink); }
.mega { font-size: clamp(48px, 7vw, 96px); line-height: 1; letter-spacing: -0.02em; margin-bottom: clamp(48px, 8vh, 90px); }
.process .mega em { color: var(--primary); }
.rows { list-style: none; margin: 0 0 56px; padding: 0; }
.row {
  position: relative;
  display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: baseline;
  padding: 34px 0;
}
/* rule draws across, then the row's text rises in */
.row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(13, 16, 14, 0.2);
  transform-origin: 0 50%;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.row:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(13, 16, 14, 0.2); }
.row > * { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
.js .row:not(.in)::before { transform: scaleX(0); }
.js .row:not(.in) > * { opacity: 0; transform: translateY(18px); }
.row-n { font-size: 15px; color: rgba(13, 16, 14, 0.5); font-variant-numeric: tabular-nums; }
.row h3 { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; }
.row p { margin: 0; font-size: 17px; color: rgba(13, 16, 14, 0.7); max-width: 46ch; }
.process .link-arrow { color: var(--primary); }

/* ---------- plans (cream): two ruled tiers, the math, who it's for ---------- */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.tier { display: grid; gap: 24px; justify-items: start; padding-top: 28px; border-top: 2px solid var(--ink); }
.tier > * { width: 100%; }
.tier > .btn, .tier > .link-arrow { width: auto; }
.tier h3 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.02; margin: -10px 0 0; }
.tier p, .tier-lead { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(13, 16, 14, 0.7); max-width: 46ch; }
.tier .spec-big b { font-size: clamp(64px, 7vw, 112px); }
.tiers.math { margin-top: clamp(110px, 16vh, 180px); align-items: center; }
.tiers.math .mega { margin-bottom: 28px; }
.tiers.math .spec-big { margin-bottom: 18px; }
.tiers.math .spec-big b { font-size: clamp(80px, 9vw, 150px); }
.tiers.math .spec-big span { white-space: nowrap; }
.row-n:is(:empty) { display: none; }

/* ---------- contact (dark): big type, ruled notes, underline fields ---------- */
.contact-sec { padding-bottom: clamp(120px, 18vh, 200px); }
.contact-sec .mega em { color: var(--accent); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-rules { list-style: none; margin: 40px 0 0; padding: 0; }
.contact-rules li { padding: 22px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; line-height: 1.55; }
.contact-rules li:last-child { border-bottom: 1px solid var(--line); }
.contact-rules b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--frost); margin-bottom: 6px; }
.contact-sec .form { padding: 0; gap: 26px; }
.contact-sec .form .row2 { gap: 26px 40px; }
.contact-sec .field input, .contact-sec .field select, .contact-sec .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding-left: 0; box-shadow: none;
}
.contact-sec .field select { background-position: right 0 center; }
.contact-sec .field input:focus, .contact-sec .field select:focus, .contact-sec .field textarea:focus { border-color: var(--accent); box-shadow: none; }
.contact-sec .field textarea { min-height: 90px; }
@media (max-width: 860px) {
  .tiers, .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- socials: giant handle with reels drifting over it ---------- */
.socials { position: relative; height: 220vh; }
.socials-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.socials-handle { position: relative; z-index: 1; margin: 0; text-align: center; line-height: 0.86; pointer-events: none; }
.sh-small { display: block; font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 20px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.sh-big { display: block; font-size: clamp(56px, 11.5vw, 190px); letter-spacing: -0.03em; white-space: nowrap; }
.sh-big em { color: var(--accent); }
.reels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.reel {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(clamp(130px, 13vw, 210px) * var(--s)); aspect-ratio: 9 / 16;
  border-radius: 18px; overflow: hidden; background: #1a1f1c; pointer-events: auto;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8);
  /* drift up past the handle at different speeds (depth) as the section scrolls */
  transform: translateY(calc((0.5 - var(--sp, 0.5)) * 70vh * var(--s))) rotate(var(--r));
  transition: box-shadow 0.4s var(--ease);
}
.reel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.reel:hover img { transform: scale(1.05); }
.reel:hover { box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8), 0 0 0 2px var(--accent); }
.social-links { position: absolute; z-index: 3; bottom: 6vh; left: 0; right: 0; display: flex; justify-content: center; gap: clamp(16px, 4vw, 56px); list-style: none; margin: 0; padding: 0; }
.social-links a { font-size: clamp(16px, 1.3vw, 19px); color: var(--frost); padding-bottom: 4px; border-bottom: 1px solid rgba(243, 248, 244, 0.3); transition: color 0.3s, border-color 0.3s; }
.social-links a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 820px) {
  .socials { height: auto; }
  .socials-stage { position: relative; height: auto; padding: 110px 0 72px; display: block; }
  /* the handle is sized to the screen width so it never runs off the edge */
  .sh-big { font-size: min(calc((100vw - 40px) / 7.6), 100px); }
  /* reels: a swipeable row that snaps, the next one peeking in */
  .reels { position: relative; inset: auto; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; padding: 36px 16px 8px; scrollbar-width: none; pointer-events: auto; }
  .reels::-webkit-scrollbar { display: none; }
  .reel { position: relative; left: auto; top: auto; flex: 0 0 min(44vw, 240px); width: auto; transform: none; scroll-snap-align: center; }
  .social-links { position: static; margin-top: 36px; }
}

/* ---------- process page ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.facts div { padding: 26px 24px 0 0; display: grid; gap: 10px; }
.facts div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts b { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 5.2vw, 84px); line-height: 0.9; letter-spacing: -0.03em; color: var(--frost); }
.facts div:nth-child(2) b { color: var(--accent); }
.facts span { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

/* journey: vertical scroll drives a sideways track */
.journey { position: relative; height: 380vh; }
.journey-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 100%); padding-top: 120px; }
.journey-top { width: 100%; max-width: none; margin: 0; padding-inline: var(--side); }
.journey-top { display: flex; align-items: flex-end; gap: 40px; }
.journey-title { margin: 0; font-size: clamp(40px, 5vw, 76px); line-height: 1; white-space: nowrap; }
.journey-bar { flex: 1; height: 2px; margin-bottom: 14px; background: var(--line); }
.journey-bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--hp, 0)); }
.journey-track { display: flex; align-items: center; gap: 0; padding-left: var(--side); transform: translateX(calc(var(--hx, 0) * -1px)); will-change: transform; }
.step-panel {
  flex: none; width: min(62vw, 760px); padding: 0 clamp(32px, 5vw, 80px) 0 0; margin-right: clamp(32px, 5vw, 80px);
  border-right: 1px solid var(--line); display: grid; align-content: center; gap: 0;
  opacity: calc(0.55 + var(--on, 0) * 0.45); transition: opacity 0.4s;
}
.sp-when { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.sp-n { font-family: var(--font-display); font-size: clamp(130px, 17vw, 260px); line-height: 0.85; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(243, 248, 244, 0.35); margin: 10px 0 18px; }
.step-panel h3 { margin: 0 0 18px; font-size: clamp(36px, 4vw, 64px); line-height: 1; }
.step-panel p { margin: 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--muted); }
.sp-tag { justify-self: start; margin-top: 26px; padding: 9px 16px; border-radius: 999px; font-size: 13px; background: rgba(243, 248, 244, 0.07); color: var(--frost); }

/* journey on the light tone */
.journey { color: var(--ink); }
.journey .journey-title em { color: var(--primary); }
.journey .journey-bar { background: rgba(13, 16, 14, 0.14); }
.journey .journey-bar i { background: var(--primary); }
.journey .step-panel { border-right-color: rgba(13, 16, 14, 0.16); }
.journey .sp-when { color: var(--primary); font-weight: 600; }
.journey .sp-n { -webkit-text-stroke-color: rgba(13, 16, 14, 0.4); }
.journey .step-panel h3 { color: var(--ink); }
.journey .step-panel p { color: rgba(13, 16, 14, 0.72); }
.journey .sp-tag { background: rgba(13, 16, 14, 0.07); color: var(--ink); }

/* monthly plan */
.plan-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.plan .rows { margin: 0; }
.plan .row { grid-template-columns: 50px minmax(0, 0.8fr) minmax(0, 1.2fr); }
.report { position: sticky; top: 120px; display: grid; gap: 24px; padding-top: 34px; }
.report-head { display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(13, 16, 14, 0.5); padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.report-note { margin: 0; font-size: 12px; color: rgba(13, 16, 14, 0.45); }

/* FAQ: big-type accordion */
.qa-section { padding: clamp(120px, 18vh, 200px) 0 0; }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 30px 0; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 38px); line-height: 1.15; transition: color 0.3s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-body); font-size: 24px; border: 1px solid var(--line); transition: transform 0.4s var(--ease), background 0.3s, color 0.3s; }
.qa summary:hover { color: var(--accent); }
.qa details[open] summary::after { transform: rotate(45deg); background: var(--accent); color: var(--ink); border-color: var(--accent); }
.qa details p { margin: 0; padding: 0 70px 34px 0; max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--muted); }
@media (max-width: 820px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  /* phones keep the sideways journey: shorter scroll, phone-sized panels, the next one peeking in */
  .journey { height: 300vh; }
  .journey-stage { height: 100svh; padding-top: 96px; }
  .journey-top { gap: 20px; }
  .journey-title { font-size: clamp(32px, 9vw, 44px); }
  .journey-track { align-items: center; }
  .step-panel { width: 78vw; padding-right: 22px; margin-right: 22px; }
  .sp-when { font-size: 12px; }
  .sp-n { font-size: clamp(96px, 30vw, 140px); margin: 6px 0 14px; }
  .step-panel h3 { font-size: clamp(26px, 7.4vw, 34px); margin-bottom: 12px; }
  .step-panel p { font-size: 15px; }
  .sp-tag { margin-top: 18px; font-size: 12px; }
  .plan-grid { grid-template-columns: 1fr; }
  .report { position: static; }
}

/* ---------- inner-page hero: type only, no 3D ---------- */
.page-hero { min-height: 92svh; display: flex; align-items: flex-end; padding: 170px 0 clamp(56px, 9vh, 96px); }
.page-hero h1 { max-width: 13ch; margin: 0 0 clamp(48px, 9vh, 96px); font-size: clamp(52px, 8.4vw, 132px); line-height: 0.98; }
.page-hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: end; border-top: 1px solid var(--line); padding-top: 28px; }
.page-hero-foot .lead { margin: 0; max-width: 30ch; }
.svc-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.svc-index a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--frost); transition: color 0.3s var(--ease), padding 0.35s var(--ease); }
.svc-index a span { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.svc-index a:hover { color: var(--accent); padding-left: 8px; }

/* ---------- services stage: sticky index + tall panels with live scenes ---------- */
.svc-stage { padding-bottom: clamp(60px, 10vh, 120px); }
.stage { display: grid; grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1.58fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.stage-rail { position: sticky; top: 120px; }
.stage-count { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); line-height: 1; }
.stage-now { font-size: clamp(64px, 7vw, 112px); color: var(--ink); letter-spacing: -0.03em; }
.stage-of { font-size: 20px; color: rgba(13, 16, 14, 0.4); }
.stage-bar { height: 2px; margin: 22px 0 26px; background: rgba(13, 16, 14, 0.12); overflow: hidden; }
.stage-bar i { display: block; height: 100%; width: 100%; background: var(--primary); transform-origin: 0 50%; transform: scaleX(var(--p, 0.16)); transition: transform 0.6s var(--ease); }
.stage-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stage-rail a { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 17px; color: rgba(13, 16, 14, 0.38); transition: color 0.35s var(--ease); }
.stage-rail a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: scale(0.5); transition: transform 0.35s var(--ease), background 0.35s; }
.stage-rail a:hover { color: rgba(13, 16, 14, 0.7); }
.stage-rail a.on { color: var(--ink); }
.stage-rail a.on::before { transform: scale(1); background: var(--primary); }

.panel { min-height: 92vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: 6vh 0; border-top: 1px solid rgba(13, 16, 14, 0.14); scroll-margin-top: 90px; }
.panel:first-child { border-top: 0; padding-top: 0; }
.panel-n { display: block; font-size: 14px; color: var(--primary); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.panel-copy h3 { font-size: clamp(40px, 4.3vw, 66px); line-height: 1.02; margin: 0; }
.panel-sub { margin: 10px 0 0; font-size: 15px; color: rgba(13, 16, 14, 0.5); }
.panel-copy > p.reveal:not(.panel-best) { margin: 26px 0 0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4; color: var(--ink); }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.legal { max-width: 760px; padding: 160px 0 100px; }
.legal h1 { font-size: clamp(40px, 5vw, 72px); margin: 0 0 12px; }
.legal h2 { font-size: 24px; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--muted); font-size: 17px; line-height: 1.65; }
.legal ul { padding-left: 20px; }
.panel-copy ul { list-style: none; margin: 22px 0 0; padding: 0; }
.panel-copy li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid rgba(13, 16, 14, 0.1); font-size: 15px; color: rgba(13, 16, 14, 0.75); }
.panel-copy li::before { content: ""; position: absolute; left: 0; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); }
.panel-best { margin: 18px 0 0; font-size: 14px; color: rgba(13, 16, 14, 0.6); }
.panel-best strong { color: var(--primary); font-weight: 600; margin-right: 6px; }

/* type-led spec: a giant numeral that grows with scroll, then a ruled table (after Lando's "On Track") */
.spec { display: grid; gap: clamp(20px, 3vh, 34px); align-self: center; }
.spec-big { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 18px; overflow: hidden; }
.spec-big span { flex-shrink: 0; }
.spec-big b {
  font-family: var(--font-display); font-weight: 400; color: var(--ink);
  font-size: clamp(120px, 14vw, 230px); line-height: 0.78; letter-spacing: -0.05em;
  transform-origin: 0 100%; transform: scale(calc(0.72 + var(--k, 1) * 0.28));
  will-change: transform;
}
.spec-big sup { font-size: 0.28em; vertical-align: top; position: relative; top: 0.12em; margin-left: 0.04em; letter-spacing: 0; color: var(--primary); }
.spec-big span { padding-bottom: 0.5em; font-size: 14px; line-height: 1.35; color: rgba(13, 16, 14, 0.6); text-transform: uppercase; letter-spacing: 0.04em; }
/* one shared grid (rows use subgrid) so columns size to their content and still line up */
.spec-table { font-size: 14px; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; }
.st-h, .st-r { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: 22px; align-items: baseline; padding: 11px 12px; }
.st-h { padding-top: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(13, 16, 14, 0.45); }
.st-r { border-top: 1px solid rgba(13, 16, 14, 0.14); color: rgba(13, 16, 14, 0.78); font-variant-numeric: tabular-nums; }
.st-r:last-child { border-bottom: 1px solid rgba(13, 16, 14, 0.14); }
.st-r span:first-child { color: rgba(13, 16, 14, 0.5); }
.st-r span:last-child, .st-h span:last-child { text-align: right; white-space: nowrap; }
.st-r.hit { background: var(--accent); color: var(--ink); font-weight: 600; border-color: transparent; }
.st-r.hit span:first-child { color: var(--ink); }
/* rows rule in one after another once the panel is on screen */
.js .panel .st-r { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), background 0.4s; }
.js .panel.in-view .st-r { opacity: 1; transform: none; }
.js .panel.in-view .st-r:nth-child(3) { transition-delay: 0.12s; }
.js .panel.in-view .st-r:nth-child(4) { transition-delay: 0.24s; }
.js .panel.in-view .st-r:nth-child(5) { transition-delay: 0.36s; }

@media (max-width: 1024px) {
  .stage { grid-template-columns: 1fr; }
  .stage-rail { display: none; }
}
@media (max-width: 820px) {
  .page-hero-foot, .svc-index { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr; min-height: 0; padding: 56px 0; gap: 28px; }
  /* stacked: read the heading first, then the proof */
  .panel-copy { order: -1; }
  .panel-copy > p.reveal:not(.panel-best) { margin-top: 14px; }
}

/* ---------- finale ---------- */
.finale { padding: clamp(140px, 22vh, 240px) 0 clamp(80px, 12vh, 140px); text-align: center; }
.finale-text {
  font-size: clamp(56px, 10vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.finale-text .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.finale-text .line > span { display: inline-block; transform: translateY(var(--y, 0%)); will-change: transform; }
.finale-foot { margin: 56px auto 0; max-width: 520px; display: grid; justify-items: center; gap: 28px; }
.finale-foot p { margin: 0; color: var(--muted); font-size: 18px; }

/* story finale: calls handled, as one clean card */
.log {
  list-style: none; display: block; margin: 0 0 26px; padding: 4px 20px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(13, 16, 14, 0.06), 0 24px 48px -28px rgba(13, 16, 14, 0.4);
}
.log li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px 0; }
.log li + li { border-top: 1px solid rgba(13, 16, 14, 0.08); }
.log-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; }
.log-ic svg { width: 15px; height: 15px; }
.log-who { display: grid; line-height: 1.25; }
.log-who b { font-size: 15px; font-weight: 600; color: var(--ink); }
.log-who small { font-size: 13px; color: rgba(13, 16, 14, 0.55); }
.log-st { font-size: 13px; font-weight: 600; color: var(--primary); white-space: nowrap; }

/* demo transcript: a white card, like a real phone conversation */
.call { background: #151917; border: 1px solid var(--line); color: var(--frost); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.call-head { border-bottom-color: var(--line); }
.call-head strong { color: var(--frost); }
.call-head small { color: var(--muted); }
.bubble.caller { background: rgba(243, 248, 244, 0.06); border: 1px solid var(--line); color: var(--frost); }
.bubble.ai { background: rgba(0, 112, 74, 0.35); border: 1px solid rgba(25, 196, 91, 0.35); color: var(--frost); }
.bubble.sys { background: rgba(216, 255, 0, 0.07); border: 1px dashed rgba(216, 255, 0, 0.3); color: var(--accent); font-weight: 600; }

/* footer sits quietly under the finale */
.site-footer { margin-top: 0; }
.footer-grid h4 { font-family: var(--font-body); letter-spacing: 0.02em; text-transform: none; font-size: 14px; }

@media (max-width: 900px) {
  /* phones: the finale keeps just the button, so the call log can't sit over the ring of pills */
  .story .log { display: none; }
  .demo-grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 40px 1fr; }
  .row p { grid-column: 2; }
}

/* ---------- header: no bar. A menu button and the logo sit bare at the top-left on every screen;
   the links and the call button live in a panel that drops from the button (main.js builds .nav-menu).
   Desktops and 13"+ screens in landscape (1280px+ wide) keep the liquid-glass bar instead. ---------- */
@media (min-width: 1280px) and (orientation: landscape) {
  /* the panel dissolves so its links and button sit inline in the glass bar, as before */
  .nav-menu { display: contents; visibility: visible; }
}
@media (max-width: 1279.98px), (orientation: portrait) {
.nav, .nav.glass-live,
.site-header.scrolled .nav,
.site-header[data-theme="light"] .nav, .site-header[data-theme="light"] .nav.glass-live {
  height: 48px; padding: 0; gap: 12px; justify-content: space-between;
  background: none; box-shadow: none; border: 0; border-radius: 0;
  pointer-events: none;
}
.nav::before { display: none; }
.nav > * { pointer-events: auto; }
.js .nav > .nav-links, .js .nav > .btn { display: none; }
.logo-mark { width: 40px; height: 40px; }
.logo-word { font-size: 16px; }

.nav-toggle {
  display: block; order: 2; flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(13, 16, 14, 0.42);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: var(--frost);
  transition: transform 0.35s var(--ease), background 0.3s, opacity 0.2s;
}
.nav-toggle span { top: 23px; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; left: 0; right: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-open .nav-toggle span { transform: none; background: transparent !important; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
.site-header[data-theme="light"] .nav-toggle { background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(13, 16, 14, 0.12); }
.site-header[data-theme="light"] .nav-toggle span::after { background: var(--ink); }

.nav-menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: min(340px, calc(100vw - 32px));
  display: grid; gap: 12px; padding: 14px; border-radius: 26px;
  background: rgba(13, 16, 14, 0.94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 60px -24px rgba(0, 0, 0, 0.75);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: calc(100% - 24px) 0;
  transition: opacity 0.25s var(--ease), transform 0.4s var(--ease), visibility 0s 0.25s;
}
.nav-open .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-menu .nav-links { display: grid; gap: 2px; }
.site-header .nav-menu .nav-links a { font-size: 19px; padding: 12px 14px; border-radius: 14px; color: rgba(243, 248, 244, 0.82); }
.site-header .nav-menu .nav-links a:hover,
.site-header .nav-menu .nav-links a[aria-current="page"] { color: var(--frost); background: rgba(255, 255, 255, 0.09); }
.nav-menu .btn { display: inline-flex; width: 100%; justify-content: center; }
/* once the page scrolls, a strip in the section's own colour sits behind the logo and button,
   so content passing underneath never shows through them */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 96px; pointer-events: none;
  background: linear-gradient(var(--ink) 66%, rgba(13, 16, 14, 0));
  opacity: 0; transition: opacity 0.3s;
}
.site-header[data-theme="light"]::before { background: linear-gradient(var(--frost) 66%, rgba(243, 248, 244, 0)); }
.site-header.scrolled::before { opacity: 1; }
}

/* short phones (iPhone SE and similar): tighten the hero copy so the headphones get the room */
@media (max-width: 820px) and (max-height: 760px), (max-width: 380px) {
  .hero-pinned { padding-bottom: 100px; }
  .hero h1 { margin: 0 0 14px; }
  .hero-copy .lead { font-size: 15px; line-height: 1.5; }
  .hero-actions { margin-top: 18px; gap: 8px; }
  .hero-actions .btn { height: 46px; padding: 0 20px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  /* one iteration only: a 0.01ms loop on an infinite animation strobes instead of stopping */
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.2s !important; transition-delay: 0s !important; }
  .js .reveal:not(.in), .split-words .w > span, .js .row:not(.in) > * { transform: none; }
  .js .wipe:not(.in) { transform: none; clip-path: inset(0 0 0 0 round 28px); opacity: 0; }
  .js .row:not(.in)::before { transform: none; }
  .finale-text .line > span { transform: none !important; }
}