/* By Damian — Hero: the scroll story.
   One tall section (.hero) with a sticky stage (.stage) that stays on screen
   while scrolling drives a timeline (assets/js/hero.js). Colors come from tokens.css. */

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

/* No CSS smooth scrolling: it fights the scroll-driven timeline. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Top bar: brand + "Let's talk" (fixed for the whole journey) ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 3vw, 32px) 14px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.talk {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.talk:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ---------- The journey ---------- */
.hero {
  position: relative;
  height: var(--hero-len, 260vh);
}
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
@supports (height: 100svh) {
  .hero { height: var(--hero-len-s, 260svh); }
  .stage { height: 100svh; }
}

/* Screen 1 — the promise: the headline alone, filling the screen. */
.hero__title {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 1320px);
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: 50% 0;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: clamp(2.4rem, min(8.6vw, 14vh), 10rem);
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  text-align: center;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
}
/* Words (and letters) are wrapped by hero.js so the headline can be typed in. */
.hero__title .w { display: inline-block; }

/* Text cursor for the opening (positioned by hero.js). */
.caret {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 3px;
  height: 1em;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
}
.caret.is-blinking { animation: caret-blink 0.9s steps(1, end) infinite; }
@keyframes caret-blink { 50% { visibility: hidden; } }

/* Sonar ring fired from the headline when it's complete. */
.phrase-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.phrase-wave i {
  position: absolute;
  left: -45vmax;
  top: -45vmax;
  width: 90vmax;
  height: 90vmax;
  border: 3px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}

/* ---------- Opening: the missed call (plays once on load, ~2.5 s) ----------
   While html.intro is set, only the graphite and the call card are visible. */
/* Until hero.js has set every starting state (html.js-ready), nothing of the
   story may show — only the graphite and the opening call. If the scripts never
   arrive, the safety net in index.html switches to the static version instead. */
html:not(.is-static):not(.js-ready) .stage > :not(.call) { visibility: hidden; }

.call { display: none; }
.intro .call,
.intro-call .call { display: block; }
.intro .hero__title,
.intro .scrollhint,
.intro .topbar { visibility: hidden; }

.call {
  --missed: #FF453A; /* iOS missed-call red */
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(420px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
}
@media (min-width: 1024px) {
  .call { width: min(660px, 46vw); }
}

/* Sonar: thick yellow rings, one after another, behind the glass card. */
.call__waves {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.call__waves i {
  position: absolute;
  left: -300px;
  top: -300px;
  width: 600px;
  height: 600px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}

/* Lock-screen notification, iPhone style: frosted glass. */
.call__card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 16px 16px;
  border-radius: 26px;
  opacity: 0; /* faded in by hero.js */
  text-align: left;
}
/* The card's glass is its own layer, so it can stretch and dissolve while the text stays.
   Mostly opaque (like a dark-mode iPhone notification): the yellow rings behind it never
   bleed through as a smudge. */
.call__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(50, 50, 48, 0.94);
  border: 1px solid rgba(237, 235, 230, 0.13);
  box-shadow: inset 0 1px 0 rgba(237, 235, 230, 0.08), 0 30px 60px -28px rgba(0, 0, 0, 0.8);
}
.call__icon,
.call__body { position: relative; }
.call__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
}
.call__icon svg { width: 24px; height: 24px; }
.call__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 1.08rem;
  line-height: 1.25;
}
.call__head b { font-weight: 600; }
.call__head span { color: rgba(237, 235, 230, 0.6); font-size: 0.85rem; }
.call__text {
  display: grid;
  margin-top: 2px;
  font-size: 1.08rem;
  line-height: 1.3;
}
/* Both messages share one cell so they can cross-fade. */
.call__text > span { grid-area: 1 / 1; }
.call__missed { opacity: 0; color: var(--missed); font-weight: 600; }

@media (min-width: 1024px) {
  .call__waves i { left: -400px; top: -400px; width: 800px; height: 800px; border-width: 4px; }
  .call__card { gap: 20px; padding: 24px 28px 24px 24px; border-radius: 36px; }
  .call__icon { width: 68px; height: 68px; border-radius: 16px; }
  .call__icon svg { width: 36px; height: 36px; }
  .call__head, .call__text { font-size: 1.45rem; }
  .call__head span { font-size: 1.15rem; }
}

.scrollhint {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scrollhint__line {
  position: relative;
  width: 1px;
  height: 44px;
  background: var(--line);
  overflow: hidden;
}
.scrollhint__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(-100%);
  animation: hint-fill 2.4s var(--ease) infinite;
}
@keyframes hint-fill {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Screen 2 — make it yours. Top position is set by hero.js so the
   shrunken headline + this block sit together as one centered group. */
.maker {
  position: absolute;
  left: 50%;
  top: var(--maker-top, 55%);
  width: min(720px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: clamp(28px, 5vh, 48px);
  text-align: center;
}

.maker__support {
  color: var(--muted);
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  text-wrap: balance;
}

.namebox {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 14px;
}
.namebox__label {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 500;
  color: var(--ink);
}
.namebox__label b { font-weight: 600; color: var(--accent); }

/* A contained field (not a line across the screen) + the yellow button beside it. */
.namebox__row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: min(100%, 640px);
}
.namebox__field {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(237, 235, 230, 0.14);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
/* A subtle yellow glow while typing (stronger for a moment on each keystroke). */
.namebox__field:focus-within {
  border-color: rgba(255, 195, 0, 0.5);
  box-shadow: 0 0 0 4px rgba(255, 195, 0, 0.08), 0 0 36px -10px rgba(255, 195, 0, 0.4);
}
.namebox.is-typing .namebox__field {
  box-shadow: 0 0 0 4px rgba(255, 195, 0, 0.12), 0 0 44px -8px rgba(255, 195, 0, 0.55);
}
.namebox__input {
  width: 100%;
  height: 62px;
  padding: 0 70px 0 20px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.15rem, 1.9vw, 1.5rem) * var(--fit, 1));
  letter-spacing: var(--display-tracking);
  text-align: left;
  caret-color: var(--accent);
  -webkit-appearance: none;
  appearance: none;
}
.namebox__input::placeholder { color: var(--muted); opacity: 0.6; }
.namebox__input:focus,
.namebox__input:focus-visible { outline: none; }

/* Inside the field, small; only while there's text. */
.namebox__count {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}
.namebox.has-text .namebox__count { opacity: 1; }

.namebox__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  border: 0;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 1rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.namebox__go span { transition: transform 0.3s var(--ease); }
.namebox__go:hover { background: #FFD23F; }
.namebox__go:hover span { transform: translateX(3px); }
.namebox__go:active { transform: scale(0.98); }

/* Screen 2 — the blueprint peeking from the bottom, very faint: a preview of screen 3.
   Same width as the site it announces; only its top edge shows. hero.js fades it in and out. */
.peek {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1000px, 72vw);
  height: clamp(70px, 15vh, 140px);
  transform: translateX(-50%);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.4) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.4) 100%);
}
.peek__grid {
  position: absolute;
  inset: 0 -12vw;
  background-image:
    linear-gradient(to right, rgba(138, 138, 133, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(138, 138, 133, 0.1) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
}
.peek__win {
  position: absolute;
  inset: 28px 0 -40px;
  border: 1px solid rgba(255, 195, 0, 0.22);
  border-radius: 14px;
}
.peek__win i { position: absolute; display: block; border: 1px solid rgba(255, 195, 0, 0.14); border-radius: 6px; }
.peek__bar { left: 0; right: 0; top: 30px; height: 0; border-width: 1px 0 0 !important; border-radius: 0 !important; }
.peek__nav { left: 4%; right: 4%; top: 46px; height: 26px; }
.peek__hero { left: 4%; width: 52%; top: 90px; height: 120px; }
.peek__img { right: 4%; width: 34%; top: 90px; height: 160px; }

/* ---------- Screen 3 — it gets built ----------
   Default CSS = the finished site (that's what reduced motion shows).
   hero.js sets the "not built yet" starting states and scrubs them with the scroll. */
.build {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Faint blueprint paper. */
.bp-grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image:
    linear-gradient(to right, rgba(138, 138, 133, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(138, 138, 133, 0.1) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center center;
}

/* The client's palette, shared by their website (screen 3) and their phone (screens 4–5).
   Set by hero.js per business type; defaults = plumbing blue, matching "Mike's Plumbing". */
.hero {
  --c-page: #F5F8FF;
  --c-ink: #0E1B33;
  --c-soft: #55617A;
  --c-line: #DCE3EF;
  --c-bar: #E4E8EF;
  --c-primary: #1F6FEB;
  --c-on: #FFFFFF;
  --c-tint: #DDE9FF;
  --c-accent: #FFB547;
  --c-star: #F5A524;
  --c-shadow: rgba(14, 27, 51, 0.32);
}

/* The client's website. It is THEIR site, in their palette.
   Inner sizes use cqw (1% of the site's width), so one design scales phone → desktop. */
.site {
  --bar-h: 3.8cqw;
  position: absolute;
  left: 50%;
  top: 53%;
  width: min(1000px, 72vw, calc((100vh - 230px) * 1.6));
  aspect-ratio: 16 / 10;
  transform: translate(-50%, -50%);
  container-type: inline-size;
  border-radius: 14px;
  color: var(--c-ink);
  font-family: var(--font-body);
}
@supports (height: 100svh) {
  .site { width: min(1000px, 72vw, calc((100svh - 230px) * 1.6)); }
}

.site__shadow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 60px 110px -40px rgba(0, 0, 0, 0.9), 0 18px 36px -18px rgba(0, 0, 0, 0.6);
}
.site__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.site__barbg {
  position: absolute;
  inset: 0 0 auto;
  height: var(--bar-h);
  background: var(--c-bar);
}
.site__pagebg {
  position: absolute;
  inset: var(--bar-h) 0 0;
  background: var(--c-page);
}

.site__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Browser bar */
.site__bar {
  position: relative;
  flex: none;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site__dots {
  position: absolute;
  left: 1.6cqw;
  display: flex;
  gap: 0.7cqw;
}
.site__dots i {
  width: 0.95cqw;
  height: 0.95cqw;
  border-radius: 50%;
  background: rgba(14, 27, 51, 0.18);
}
.site__url {
  min-width: 30%;
  padding: 0.45cqw 1.6cqw;
  border-radius: 999px;
  background: var(--c-page);
  color: var(--c-soft);
  font-size: 1.2cqw;
  line-height: 1.3;
  text-align: center;
}

/* Typed text: the invisible ghost reserves the final layout; the typed copy sits on top. */
.tw { position: relative; display: inline-block; }
.site__sub.tw { display: block; }
.tw .ghost,
.site__h .ghost { visibility: hidden; }
.tw .typed { position: absolute; inset: 0; }
.tw.is-typing .typed::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.95em;
  margin-left: 0.04em;
  background: currentColor;
  vertical-align: -0.12em;
}

/* Nav */
.site__nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6cqw 4.5cqw;
  border-bottom: 1px solid var(--c-line);
}
.site__brand {
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: calc(1.7cqw * var(--nfit, 1));
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 3cqw;
  height: 3cqw;
  border-radius: 0.8cqw;
  background: var(--c-primary);
  color: var(--c-on);
  font-size: 1.6cqw;
}
.site__links {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  color: var(--c-ink);
  font-size: 1.3cqw;
  font-weight: 500;
  white-space: nowrap;
}
.site__links b { color: var(--c-soft); font-weight: 400; }
.site__burger { display: none; flex-direction: column; gap: 1.4cqw; }
.site__burger i {
  width: 6cqw;
  height: 0.9cqw;
  border-radius: 1cqw;
  background: var(--c-ink);
  opacity: 0.55;
}

/* Hero of the client's site */
.site__hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 5cqw;
  padding: 2.2cqw 4.5cqw 3cqw;
}
.site__copy {
  display: grid;
  justify-items: start;
  gap: 1.5cqw;
}
.site__rating {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  color: var(--c-soft);
  font-size: 1.2cqw;
  line-height: 1;
}
.site__rating b { color: var(--c-ink); font-weight: 700; }
.site__stars { display: flex; gap: 0.25cqw; }
.site__stars i {
  width: 1.45cqw;
  height: 1.45cqw;
  background: var(--c-star);
  clip-path: polygon(50% 0%, 61.5% 35%, 98% 35.5%, 68.5% 57.5%, 79.5% 92%, 50% 71%, 20.5% 92%, 31.5% 57.5%, 2% 35.5%, 38.5% 35%);
}
.site__h {
  position: relative;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: calc(3.4cqw * var(--hfit, 1));
  line-height: 1.03;
  letter-spacing: -0.02em;
}
/* The heading "assembles": each word is its own piece, moved by hero.js. */
.site__h .assembled { position: absolute; inset: 0; }
.site__h .aw { display: inline-block; }
.site__sub {
  color: var(--c-soft);
  font-size: 1.45cqw;
  line-height: 1.45;
}
.site__ctas {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  margin-top: 0.3cqw;
}
.site__btn {
  display: inline-flex;
  padding: 1.15cqw 2.4cqw;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-on);
  font-size: 1.4cqw;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 0.9cqw 1.8cqw -0.9cqw var(--c-shadow);
}
.site__call {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 1.05cqw 2cqw;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: #FFFFFF;
  font-size: 1.35cqw;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.site__call svg { width: 1.3cqw; height: 1.3cqw; color: var(--c-primary); }

/* Mini booking widget */
.site__book {
  display: grid;
  gap: 0.9cqw;
  margin-top: 0.8cqw;
  padding: 1.3cqw 1.5cqw;
  border-radius: 1.2cqw;
  border: 1px solid var(--c-line);
  background: #FFFFFF;
  box-shadow: 0 1.4cqw 2.8cqw -1.6cqw var(--c-shadow);
}
.site__booktitle { font-size: 1.25cqw; font-weight: 600; line-height: 1.2; }
.site__booktitle span { margin-left: 0.6cqw; color: var(--c-soft); font-weight: 400; }
.site__slots { display: flex; gap: 0.7cqw; }
.site__slots span {
  padding: 0.7cqw 1.1cqw;
  border-radius: 0.8cqw;
  border: 1px solid var(--c-line);
  font-size: 1.15cqw;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.site__slots .is-on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on); }

/* Illustrated service image: colored shapes + the business icon. */
.site__img {
  position: relative;
  aspect-ratio: 1 / 0.86;
  border-radius: 1.8cqw;
  background: var(--c-tint);
  overflow: hidden;
  box-shadow: 0 2.2cqw 4.4cqw -2.6cqw var(--c-shadow);
}
.ill { position: absolute; display: block; }
.ill--sun {
  left: 27%;
  top: 16%;
  width: 50%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
}
.site__icon { display: grid; place-items: center; width: 44%; color: var(--c-on); }
.site__icon svg { width: 100%; height: auto; stroke-width: 1.5; }
.ill--dot {
  left: 11%;
  top: 13%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-accent);
}
.ill--ring {
  right: 7%;
  bottom: 11%;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.1cqw solid var(--c-accent);
}
.ill--dots {
  right: 7%;
  top: 8%;
  width: 26%;
  height: 22%;
  background-image: radial-gradient(var(--c-primary) 22%, transparent 25%);
  background-size: 1.6cqw 1.6cqw;
  opacity: 0.35;
}
.ill--card {
  left: 7%;
  bottom: 9%;
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.2cqw 1.4cqw;
  border-radius: 1.2cqw;
  background: #FFFFFF;
  box-shadow: 0 1.4cqw 2.8cqw -1.4cqw var(--c-shadow);
}
.ill__check {
  display: grid;
  place-items: center;
  width: 2.8cqw;
  height: 2.8cqw;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-on);
}
.ill__check svg { width: 60%; height: 60%; }
.ill__lines { display: grid; gap: 0.6cqw; }
.ill__lines i { display: block; width: 9cqw; height: 0.7cqw; border-radius: 1cqw; background: var(--c-line); }
.ill__lines i + i { width: 6cqw; }

/* Chat widget */
.site__chat {
  position: absolute;
  right: 2.4cqw;
  bottom: 2.4cqw;
  display: flex;
  align-items: flex-end;
  gap: 1cqw;
  transform-origin: 100% 100%;
}
.site__bubble {
  padding: 1cqw 1.5cqw;
  border-radius: 1.4cqw 1.4cqw 0.3cqw 1.4cqw;
  background: var(--c-primary);
  color: var(--c-on);
  font-size: 1.25cqw;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 1.2cqw 2.4cqw -1.2cqw var(--c-shadow);
}
.site__launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45cqw;
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 50%;
  background: var(--c-primary);
  border: 0.35cqw solid #FFFFFF;
  box-shadow: 0 1.2cqw 2.4cqw -1.2cqw var(--c-shadow);
}
.site__launcher i {
  width: 0.55cqw;
  height: 0.55cqw;
  border-radius: 50%;
  background: var(--c-on);
}

/* The designer (me): a cursor that drags pieces into place, and the selection box
   it leaves for an instant after dropping one. Yellow = my brand, outside the client's site. */
.sel {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  border: 1.5px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.sel i {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #FFFFFF;
  border: 1.5px solid var(--accent);
}
.sel i:nth-child(1) { left: -4.5px; top: -4.5px; }
.sel i:nth-child(2) { right: -4.5px; top: -4.5px; }
.sel i:nth-child(3) { left: -4.5px; bottom: -4.5px; }
.sel i:nth-child(4) { right: -4.5px; bottom: -4.5px; }
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transform-origin: 4px 3px;
}
.cursor svg {
  width: 24px;
  height: 24px;
  fill: var(--bg);
  stroke: #FFFFFF;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}
.cursor span {
  margin: 20px 0 0 -4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

/* Honesty: it's a mockup. */
.site__label {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 18px);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

/* Phone layout of the same site (the site itself is narrow): lighter, one column. */
@container (max-width: 520px) {
  .site__frame,
  .site__content { --bar-h: 10cqw; }
  .site__dots { left: 4cqw; gap: 1.8cqw; }
  .site__dots i { width: 2.4cqw; height: 2.4cqw; }
  .site__url { min-width: 48%; padding: 1.2cqw 3.6cqw; font-size: 3.3cqw; }
  .site__nav { padding: 3.6cqw 5cqw; }
  .site__brand { gap: 2.6cqw; font-size: calc(4.4cqw * var(--nfit, 1)); }
  .site__logo { width: 8cqw; height: 8cqw; border-radius: 2.2cqw; font-size: 4.2cqw; }
  /* Phones get a menu icon instead of the text links, like a real mobile site. */
  .site__links { display: none; }
  .site__burger { display: flex; }
  .site__hero { grid-template-columns: 1fr; align-items: start; gap: 5cqw; padding: 5cqw 5cqw 17cqw; }
  .site__copy { gap: 3.2cqw; }
  .site__rating { gap: 2cqw; font-size: 3.3cqw; }
  .site__stars { gap: 0.6cqw; }
  .site__stars i { width: 3.9cqw; height: 3.9cqw; }
  .site__h { font-size: calc(7.6cqw * var(--hfit, 1)); }
  .site__sub { font-size: 3.7cqw; }
  .site__ctas { gap: 2.4cqw; margin-top: 0; }
  .site__btn { padding: 2.8cqw 5cqw; font-size: 3.7cqw; }
  .site__call { gap: 1.4cqw; padding: 2.6cqw 4cqw; font-size: 3.5cqw; }
  .site__call svg { width: 3.4cqw; height: 3.4cqw; }
  .site__book { width: 100%; gap: 2.4cqw; margin-top: 0; padding: 3.2cqw 3.6cqw; border-radius: 3cqw; }
  .site__booktitle { font-size: 3.4cqw; }
  .site__slots { gap: 1.6cqw; }
  .site__slots span { padding: 1.8cqw 2.2cqw; border-radius: 2cqw; font-size: 3.1cqw; }
  .site__img { aspect-ratio: 2.3 / 1; border-radius: 4cqw; }
  .ill--sun { left: 38%; top: 13%; width: 30%; }
  .ill--dot { left: 10%; top: 16%; width: 7%; }
  .ill--ring { right: 7%; bottom: 14%; width: 13%; border-width: 2.4cqw; }
  .ill--dots { right: 5%; top: 10%; width: 20%; height: 32%; background-size: 3.6cqw 3.6cqw; }
  .ill--card { left: 6%; bottom: 12%; gap: 2.2cqw; padding: 2.4cqw 3cqw; border-radius: 2.6cqw; }
  .ill__check { width: 6cqw; height: 6cqw; }
  .ill__lines { gap: 1.4cqw; }
  .ill__lines i { width: 15cqw; height: 1.6cqw; }
  .ill__lines i + i { width: 10cqw; }
  .site__chat { right: 4cqw; bottom: 4cqw; gap: 2.4cqw; }
  .site__bubble { padding: 2.4cqw 3.4cqw; border-radius: 3.4cqw 3.4cqw 0.8cqw 3.4cqw; font-size: 3.4cqw; }
  .site__launcher { width: 10cqw; height: 10cqw; gap: 1cqw; border-width: 0.8cqw; }
  .site__launcher i { width: 1.3cqw; height: 1.3cqw; }
  /* No designer cursor on phones: lighter. */
  .cursor,
  .sel { display: none; }
}

/* Blueprint overlay: drawn by hero.js on top of the site, in site pixels. */
.bp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bp .ln {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linecap: butt; /* round caps would leave dots on lines not drawn yet */
  stroke-linejoin: round;
}
.bp .dim line,
.bp .dim path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
}
.bp .dim .arrow { fill: var(--muted); stroke: none; }
.bp .tag rect { fill: var(--bg); }
.bp .tag text {
  fill: var(--muted);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* ---------- Screen 4 — the client's phone, a 3D object in CSS ----------
   Sizes: --pw (width), --ph (height), --pt (thickness), --pr (corner radius).
   hero.js turns it (rotateX/Y) and passes the angle as --ry so reflections move with it. */
.scene {
  --cy: 50%; /* vertical center of the phone */
  --pw: min(290px, calc((100vh - 230px) * 0.487));
  --ph: calc(var(--pw) / 0.487);
  --pt: calc(var(--pw) * 0.105);
  --pr: calc(var(--pw) * 0.17);
  position: absolute;
  inset: 0;
  perspective: 1700px;
  perspective-origin: 50% 42%;
  pointer-events: none;
}
@supports (height: 100svh) {
  .scene { --pw: min(290px, calc((100svh - 230px) * 0.487)); }
}

.phone3d {
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: var(--pw);
  height: var(--ph);
  margin: calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2);
  transform-style: preserve-3d;
}
.phone3d > * { position: absolute; }

/* The metal body: thin plates stacked through the thickness. Seen at an angle, their edges
   form the rounded frame. Lighter in the middle = a rounded, polished edge.
   One plate near the front carries the subtle yellow line. */
.phone3d__plates,
.phone3d__plates i {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.phone3d__plates i {
  border-radius: var(--pr);
  background: #2A2A29;
  transform: translateZ(calc(var(--pt) * (var(--k) - 0.5)));
}
.phone3d__plates i:nth-child(1)  { --k: 0.02; background: #1C1C1B; }
.phone3d__plates i:nth-child(2)  { --k: 0.12; background: #2B2B29; }
.phone3d__plates i:nth-child(3)  { --k: 0.23; background: #3A3A37; }
.phone3d__plates i:nth-child(4)  { --k: 0.34; background: #4A4A46; }
.phone3d__plates i:nth-child(5)  { --k: 0.45; background: #55554F; }
.phone3d__plates i:nth-child(6)  { --k: 0.56; background: #4E4E49; }
.phone3d__plates i:nth-child(7)  { --k: 0.67; background: #3F3F3B; }
.phone3d__plates i:nth-child(8)  { --k: 0.78; background: #2F2F2D; }
.phone3d__plates i:nth-child(9)  { --k: 0.88; background: #8C6B0E; } /* the yellow edge */
.phone3d__plates i:nth-child(10) { --k: 0.97; background: #1E1E1D; }

/* Flat side rails (where the buttons live), with a reflection band that slides as it turns. */
.phone3d__rail {
  top: var(--pr);
  bottom: var(--pr);
  left: 50%;
  width: var(--pt);
  margin-left: calc(var(--pt) / -2);
  /* Two layers: a glint band that slides along the rail with the turn (it never leaves the
     rail: it moves through the background, not as a separate piece), over the metal. */
  background:
    linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, 0.3) 50%, transparent 58%)
      0 calc(50% - var(--ry, 0) * 1.2%) / 100% 300% no-repeat,
    linear-gradient(90deg, #1E1E1D, #55554F 48%, #8C6B0E 88%, #1E1E1D);
  transform-style: preserve-3d;
}
.phone3d__rail--l { transform: rotateY(-90deg) translateZ(calc(var(--pw) / 2)); }
.phone3d__rail--r { transform: rotateY(90deg) translateZ(calc(var(--pw) / 2)); }
.phone3d__key {
  position: absolute;
  left: 16%;
  right: 16%;
  border-radius: 3px;
  background: linear-gradient(90deg, #2A2A28, #6A6A64 50%, #2A2A28);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: translateZ(2px);
}
.phone3d__key--action { top: 6%; height: 6%; }
.phone3d__key--up     { top: 16%; height: 11%; }
.phone3d__key--down   { top: 30%; height: 11%; }
.phone3d__key--power  { top: 20%; height: 16%; }

.phone3d__back {
  inset: 0;
  border-radius: var(--pr);
  background: #262625;
  transform: translateZ(calc(var(--pt) / -2)) rotateY(180deg);
  backface-visibility: hidden;
}
.phone3d__cams {
  position: absolute;
  top: 5%;
  left: 7%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 24%;
  background: #1A1A19;
  box-shadow: inset 0 0 0 1px rgba(237, 235, 230, 0.12);
}
.phone3d__cams i {
  position: absolute;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0B0B0B;
  box-shadow: inset 0 0 0 3px #2E2E2C;
}
.phone3d__cams i:nth-child(1) { left: 8%; top: 8%; }
.phone3d__cams i:nth-child(2) { left: 8%; bottom: 8%; }
.phone3d__cams i:nth-child(3) { right: 8%; top: 31%; }

/* Front: black glass bezel + the screen. */
.phone3d__front {
  inset: 0;
  padding: calc(var(--pw) * 0.034);
  border-radius: var(--pr);
  background: #0A0A0A;
  box-shadow: inset 0 0 0 1px rgba(237, 235, 230, 0.16);
  transform: translateZ(calc(var(--pt) / 2));
  backface-visibility: hidden;
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--pr) - var(--pw) * 0.034);
  background: var(--c-primary);
  container-type: inline-size;
}
.screen__site { position: absolute; inset: 0; }
/* Dynamic Island: a black pill floating below the top edge, centered. hero.js widens it
   when the first notification lands ("New booking"), then shrinks it back. */
.island {
  position: absolute;
  top: 3.4cqw;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 27cqw;
  height: 7.6cqw;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  overflow: hidden;
}
.island__lens {
  position: absolute;
  top: 50%;
  right: 2.3cqw;
  width: 2.8cqw;
  height: 2.8cqw;
  margin-top: -1.4cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #34405E, #090A12 62%);
}
.island__live {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  padding-left: 1.5cqw;
  white-space: nowrap;
  opacity: 0;
}
.island__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 7.8cqw;
  height: 7.8cqw;
  border-radius: 50%;
  background: #30D158;
  color: #FFFFFF;
}
.island__icon svg { width: 55%; height: 55%; }
.island__text {
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 4.1cqw;
  font-weight: 600;
}

/* Notifications: they fly in from outside and land on the lock screen.
   Their own layer, drawn over the phone and given the phone's exact pose by hero.js, so a
   card coming from far away never slips "behind the glass". Sized from the phone width.
   --slot = place in the stack. */
.ntfs {
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: var(--pw);
  height: var(--ph);
  margin: calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2);
  transform-style: preserve-3d;
  pointer-events: none;
  --top: calc(var(--ph) * 0.43);
  --step: calc(var(--pw) * 0.215);
}
.ntf {
  position: absolute;
  left: 6%;
  right: 6%;
  top: calc(var(--top) + var(--slot, 0) * var(--step));
  height: calc(var(--pw) * 0.195);
  display: flex;
  align-items: center;
  gap: calc(var(--pw) * 0.032);
  padding: 0 calc(var(--pw) * 0.038);
  border-radius: calc(var(--pw) * 0.065);
  background: rgba(250, 250, 248, 0.9);
  box-shadow: 0 calc(var(--pw) * 0.05) calc(var(--pw) * 0.09) calc(var(--pw) * -0.03) rgba(0, 0, 0, 0.5);
  color: #141414;
  font-family: var(--font-body);
  font-size: calc(var(--pw) * 0.039);
  line-height: 1.25;
  text-align: left;
  transform: translateZ(4px);
}
.ntf__app {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--pw) * 0.11);
  height: calc(var(--pw) * 0.11);
  border-radius: 24%;
  background: var(--c-primary);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: calc(var(--pw) * 0.055);
}
.ntf__body { flex: 1; min-width: 0; }
.ntf__head { display: flex; justify-content: space-between; gap: 6px; }
.ntf__head b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ntf__head span { flex: none; color: #808080; }
.ntf__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #2A2A2A;
}
/* The yellow dot (my spark): "new". */
.ntf__dot {
  position: absolute;
  top: calc(var(--pw) * 0.022);
  left: calc(var(--pw) * 0.022);
  width: calc(var(--pw) * 0.03);
  height: calc(var(--pw) * 0.03);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(250, 250, 248, 0.95);
}
/* Reduced motion: only the three newest show. */
.ntf[style*="--slot: 3"] { display: none; }

/* Screen 5: the "+N more" pill under the grouped stack, counting up fast. */
.ntf-more {
  position: absolute;
  left: 50%;
  top: calc(var(--top) + var(--step) * 1.55);
  translate: -50% 0;
  padding: calc(var(--pw) * 0.022) calc(var(--pw) * 0.05);
  border-radius: 999px;
  background: rgba(250, 250, 248, 0.9);
  box-shadow: 0 calc(var(--pw) * 0.03) calc(var(--pw) * 0.06) calc(var(--pw) * -0.02) rgba(0, 0, 0, 0.45);
  color: #141414;
  font-family: var(--font-body);
  font-size: calc(var(--pw) * 0.042);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}
.ntf-more b { font-weight: 700; }

/* Screen 5: the color the screen turns into as the camera goes through the glass —
   the background of the next section (#about). */
.screen__dive {
  position: absolute;
  inset: 0;
  background: var(--next-bg);
  opacity: 0;
}

/* The light that follows the mouse (desktop only; hero.js adds .has-pointer). */
.spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 40%), rgba(237, 235, 230, 0.07), transparent 70%);
  transition: opacity 0.8s var(--ease);
}
.has-pointer .spot { opacity: 1; }
/* Glass glare that slides as the phone turns. */
.screen__glare {
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.05) 52%, transparent 60%);
  transform: translateX(calc(var(--ry, 0) * -0.9%));
  pointer-events: none;
}

/* The website, at phone size, before the screen locks. */
.site.site--mini {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  transform: none;
  border-radius: 0;
  overflow: hidden;
}
.site--mini .site__content { padding-top: 11cqw; } /* clears the camera island */
.site--mini .site__frame,
.site--mini .site__content { --bar-h: 10cqw; }

/* Lock screen in the client's palette (the wallpaper is theirs, not mine). */
.lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FFFFFF;
  font-family: var(--font-body);
  text-align: center;
  background:
    radial-gradient(70% 50% at 88% 88%, color-mix(in srgb, var(--c-tint) 45%, transparent), transparent 70%),
    var(--c-primary);
}
.lock__status {
  position: absolute;
  top: 4.4cqw;
  right: 8cqw;
  display: flex;
  gap: 1.6cqw;
  align-items: center;
}
.lock__status svg { height: 3.4cqw; width: auto; }
.lock__date {
  margin-top: 19cqw;
  font-size: 5cqw;
  font-weight: 600;
  opacity: 0.9;
}
.lock__time {
  font-size: 24cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.lock__biz {
  display: flex;
  align-items: center;
  gap: 2cqw;
  max-width: 86%;
  margin-top: 4cqw;
  padding: 1.6cqw 4cqw 1.6cqw 1.8cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 4cqw;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lock__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 6cqw;
  height: 6cqw;
  border-radius: 1.6cqw;
  background: #FFFFFF;
  color: var(--c-primary);
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: 3.4cqw;
}
.lock__bottom {
  position: absolute;
  left: 11cqw;
  right: 11cqw;
  bottom: 9cqw;
  display: flex;
  justify-content: space-between;
}
.lock__btn {
  display: grid;
  place-items: center;
  width: 13cqw;
  height: 13cqw;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
}
.lock__btn svg { width: 46%; height: 46%; }
.lock__home {
  position: absolute;
  bottom: 2.4cqw;
  left: 50%;
  width: 36cqw;
  height: 1.4cqw;
  margin-left: -18cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}

/* Product-shot shadow under the phone. */
/* A faint reflection of the lit screen on the "floor" under the phone. */
.phone-reflection {
  position: absolute;
  left: 50%;
  top: calc(var(--cy) + var(--ph) / 2 + 6px);
  width: calc(var(--pw) * 0.94);
  height: calc(var(--ph) * 0.24);
  margin-left: calc(var(--pw) * -0.47);
  border-radius: 0 0 var(--pr) var(--pr);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-primary) 45%, transparent), transparent 85%);
  opacity: 0.32;
  filter: blur(3px);
  transform: perspective(600px) rotateX(58deg);
  transform-origin: 50% 0;
}

/* "This could be {name}. For real." — left of the phone on desktop, below it on phones. */
.cta {
  position: absolute;
  top: 50%;
  left: clamp(24px, 6vw, 120px);
  width: min(32vw, 440px);
  translate: 0 -50%;
  display: grid;
  justify-items: start;
  gap: 22px;
  pointer-events: auto;
}
.cta__line {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: clamp(1.6rem, 2.7vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}
.cta__line span { color: var(--accent); }
.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}
.cta__btn:hover { background: #FFD24D; }
/* Honesty: the phone, its notifications and the counter are a mockup. */
.cta__note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.phone-shadow {
  position: absolute;
  left: 50%;
  top: calc(var(--cy) + var(--ph) / 2 + 18px);
  width: calc(var(--pw) * 1.05);
  height: 26px;
  margin-left: calc(var(--pw) * -0.525);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
  filter: blur(8px);
}

/* Top bar over a light background (end of the dive and #about). */
.topbar { transition: color 0.3s var(--ease); }
.topbar.on-light { color: var(--bg); }
.topbar.on-light .talk { background: transparent; border-color: rgba(31, 31, 31, 0.25); }
.topbar.on-light .talk:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- Phone sizes ---------- */
@media (max-width: 640px) {
  /* Optical center: a touch above the true middle reads as centered on a tall screen. */
  .hero__title { top: 46%; font-size: clamp(2.2rem, min(12vw, 9vh), 4rem); line-height: 0.97; }
  .site {
    top: 54%;
    width: min(360px, calc(100vw - 44px), calc((100vh - 230px) * 0.58));
    aspect-ratio: auto;
    border-radius: 18px;
  }
  @supports (height: 100svh) {
    .site { width: min(360px, calc(100vw - 44px), calc((100svh - 230px) * 0.58)); }
  }
  /* Smaller phone, a bit higher: leaves room for the floating notifications and the CTA below. */
  .scene { --cy: 43%; --pw: min(220px, calc((100vh - 300px) * 0.487)); }
  @supports (height: 100svh) {
    .scene { --pw: min(220px, calc((100svh - 300px) * 0.487)); }
  }
  .cta {
    top: calc(var(--cy) + var(--ph) / 2 + 60px);
    left: 16px;
    right: 16px;
    width: auto;
    translate: none;
    justify-items: center;
    gap: 14px;
    text-align: center;
  }
  .cta__line { font-size: clamp(1.2rem, 5.6vw, 1.6rem); }
  .cta__btn { min-height: 44px; }
  .maker { gap: 22px; }
  .namebox__input { height: 56px; font-size: calc(clamp(1.1rem, 5vw, 1.35rem) * var(--fit, 1)); }
  /* Field and button stacked: both full width. */
  .namebox__row { flex-direction: column; }
  .namebox__go { justify-content: center; min-height: 52px; }
  .peek { width: min(360px, calc(100vw - 44px)); height: clamp(56px, 11vh, 96px); }
  .peek__hero { width: 92%; }
  .peek__img { display: none; }
  .talk { min-height: 32px; padding: 0 12px; font-size: 0.8rem; }
}

/* ---------- Static mode: reduced motion, or the animation library didn't load ----------
   No sticky stage, no timeline: everything stacked and visible. */
.is-static .hero { height: auto; }
.is-static .stage {
  position: relative;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 7vh, 64px);
  padding: 96px 16px 72px;
}
.is-static .hero__title,
.is-static .maker {
  position: static;
  transform: none;
}
.is-static .hero__title { font-size: clamp(2.2rem, 6.4vw, 6rem); }
.is-static .scrollhint,
.is-static .peek { display: none; }
.is-static .build { position: relative; inset: auto; width: 100%; }
.is-static .bp-grid,
.is-static .bp { display: none; }
.is-static .site { position: relative; left: auto; top: auto; margin: 0 auto 40px; transform: none; }
/* Static: the phone, its shadow and the CTA stacked in normal flow. */
.is-static .scene {
  position: relative;
  inset: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding-bottom: 48px;
}
.is-static .phone3d,
.is-static .phone-shadow,
.is-static .cta { position: relative; left: auto; top: auto; margin: 0; translate: none; }
.is-static .phone3d { order: 1; }
.is-static .phone-shadow { order: 2; margin-top: -24px; }
.is-static .cta { order: 3; width: min(440px, 100%); justify-items: center; text-align: center; }
.is-static .phone-reflection { display: none; }
.is-static .ntfs { top: 0; margin-top: 0; }
.is-static .site.site--mini { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .scrollhint__line::after { animation: none; transform: none; }
  .talk, .namebox__input, .namebox__field, .namebox__count, .namebox__go, .namebox__go span { transition: none; }
}