/* The home page: a calm night sky (Josh, 10-20 9:49 PM, Direction A). Deep navy, one warm gold,
   Hanken Grotesk for everything (no serif, no italics). kalon.css still supplies the header,
   phone menu, footer and buttons; this file re-colors them for the night and lays out the page.
   Motion rules: the gold object, the stars, the gold dust and the headline's turning word are the
   only things that move on their own. The flow makes one picture at a time (a constellation when
   the call books, a whirlpool at "Lights out", a river down How it works, a voice wave at
   "Talk to it", the sunrise at the end); the three scroll moments move only with the scroll; the
   reading sections keep only the dust. */

@property --row { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root.night {
  color-scheme: dark;
  --n-0: #060914; --n-1: #080C1A; --n-2: #0D1428; --n-3: #141D38; --n-4: #1C2747;
  --fg: #F4EFE6;      /* headlines, 18.6:1 on the page */
  --fg-2: #C3C9D6;    /* body, 11.7:1 */
  --fg-3: #8F99AE;    /* captions and source lines, 6.8:1 */
  --gold: #E8C48E;    /* the one action color: buttons, links, focus, the booked moments */
  --gold-hi: #F2D6AA;
  --gold-ink: #1C1407; /* text on gold, 11:1 */
  --hair: rgba(244, 239, 230, .12);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  /* kalon.css tokens, re-colored for the night */
  --bg: var(--n-1); --surface: var(--n-2); --surface-quiet: var(--n-3);
  --text: var(--fg); --text-body: var(--fg-2); --text-muted: var(--fg-3);
  --accent: var(--gold); --on-accent: var(--gold-ink); --focus: var(--gold); --link: var(--gold);
  --action: var(--gold); --action-hover: var(--gold-hi); --teal-50: rgba(232, 196, 142, .1);
  --line: var(--hair); --border: rgba(244, 239, 230, .2);
  --hdr-bg: rgba(8, 12, 26, .78); --hdr-line: rgba(244, 239, 230, .08); --hdr-ink: var(--fg);
  --pill-bg: rgba(20, 29, 56, .9); --pill-line: rgba(244, 239, 230, .16);
  --haze: var(--n-1);
}

.night body { background: var(--n-1); color: var(--fg-2); }
.night ::selection { background: rgba(232, 196, 142, .32); color: #FFFFFF; }
.night { -webkit-tap-highlight-color: transparent; accent-color: var(--gold); caret-color: var(--gold); scrollbar-color: #2A3556 var(--n-1); }
.night h1, .night h2, .night h3 { color: var(--fg); font-weight: 500; }
.night .btn { touch-action: manipulation; transition: background-color .2s ease, border-color .2s ease, transform .16s var(--ease-out); }
.night .btn:active { transform: scale(.97); }
.night .btn:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
/* The phone menu's little town pictures belong to the town look, not the night. */
.night .places .p-pic { display: none; }
.night .places a { min-height: 112px; }

/* ---------- The sky ---------- */
.sky { position: fixed; z-index: 0; top: 0; left: 0; width: 100%; height: 100lvh; pointer-events: none; overflow: hidden; }
.sky > * { position: absolute; inset: 0; }
.sky-night { background:
  radial-gradient(90% 60% at 80% 6%, rgba(38, 58, 112, .5), rgba(38, 58, 112, 0) 70%),
  linear-gradient(180deg, #070B18 0%, #0A1023 50%, #0C1430 100%); }
/* Toward morning the sky lifts to a softer blue (never violet). Opacity is set by the page script. */
.sky-dusk { opacity: 0; will-change: opacity; background: linear-gradient(180deg, rgba(12, 20, 44, .6) 0%, #16264A 55%, #253B63 100%); }
.sky-stars { overflow: hidden; }
/* Each layer reaches a little past the top and bottom, so it can slide with the scroll. */
.star-layer { position: absolute; left: 0; top: -48px; width: 100%; height: calc(100% + 96px); display: block; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  html.moving .star-layer { animation: k-twinkle 6.5s ease-in-out infinite alternate; }
  html.moving .star-layer + .star-layer { animation-duration: 8.5s; animation-delay: -4s; }
}
@keyframes k-twinkle { from { opacity: 1; } to { opacity: .58; } }
/* The gold dust, drawn by the page script over the stars and under every word. */
.sky-dust { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.sky-dust.on { opacity: 1; }
.flow-front { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 100lvh; display: block; pointer-events: none; }
html:not(.moving) .flow-front { display: none; }
main, .night .site-foot { position: relative; z-index: 1; }

/* ---------- Shared type ---------- */
.night .when { margin: 0 0 14px; color: var(--gold); font-size: 1rem; font-weight: 500; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.night .eyebrow { margin: 0 0 .45em; color: var(--fg-3); font-size: var(--t-eyebrow); font-weight: 600; line-height: 1.15; letter-spacing: -.005em; max-width: none; }
.night h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.07; letter-spacing: -.022em; margin: 0 0 .42em; max-width: 15ch; }
.night .intro { margin: 0; color: var(--fg-2); font-size: var(--t-intro); font-weight: 500; line-height: 1.38; max-width: 36ch; }
.night .intro b { color: var(--fg); font-weight: 600; }
.night .aside { margin: 18px 0 0; color: var(--fg-2); font-size: 1.0625rem; max-width: 46ch; }
.night .small { color: var(--fg-3); font-size: 1rem; }
.night .small b { color: var(--fg-2); font-weight: 600; }
.night .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.night .text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(232, 196, 142, .6); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.night .text-link:hover { text-decoration-color: var(--gold); }
.night .src { margin: 10px 0 0; color: var(--fg-3); font-size: .9375rem; line-height: 1.45; max-width: 52ch; }
.night .fn { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 3px; padding: 0 6px; border-radius: 6px; background: rgba(232, 196, 142, .14); color: var(--gold); font-size: .8125rem; font-weight: 600; line-height: 1; text-decoration: none; vertical-align: 1px; }
.night .fn:hover { background: rgba(232, 196, 142, .26); }
.night .chip { display: inline-block; margin: 0; padding: .2em .65em; border-radius: .55em; background: var(--gold); color: var(--gold-ink); font-size: .8125em; font-weight: 600; line-height: 1.3; }
.night .ex, .night .ex-tag { margin: 0; color: var(--fg-3); font-size: .8125em; }
.night .ex-tag { padding: .12em .5em; border-radius: .5em; box-shadow: inset 0 0 0 1px var(--hair); }

/* ---------- The first screen ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: calc(100svh - var(--hdr-h) - env(safe-area-inset-top, 0px)); padding: 0 0 clamp(44px, 7vh, 88px); }
/* Clipped at the sides: on screens 1024 to 1180 wide the object sits far enough right that its halo
   reached past the edge and let the page slide sideways. */
.orb { position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow-x: clip; }
/* A soft warm light where the object sits: the first thing on screen while the object loads,
   and the halo behind it after. */
.orb::before { content: ""; position: absolute; left: var(--ox, 70%); top: var(--oy, 46%); width: min(70vh, 56vw); aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(232, 196, 142, .2), rgba(70, 92, 160, .12) 55%, rgba(8, 12, 26, 0)); opacity: calc(1 - var(--gone, 0)); }
.orb-live { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.orb-live.on { opacity: 1; }
/* Once the page moves, the flow draws these very points as they leave, so the object itself hides. */
.orb-live.handed { visibility: hidden; }
/* The finished ring as a still picture, for Reduce Motion, no JavaScript and no 3D. A background
   picture, so the moving version (which hides it) never downloads it. */
.orb-still { position: absolute; left: var(--ox, 70%); top: var(--oy, 46%); width: min(64vh, 50vw); aspect-ratio: 1; translate: -50% -50%;
  background: url(/img/night/orb-still.webp) center / contain no-repeat; }
html.moving .orb-still { display: none; }
html.moving.orb-off .orb-still { display: block; }
.status { position: absolute; z-index: 1; left: var(--ox, 70%); top: calc(var(--oy, 46%) + min(30vh, 23vw)); translate: -50% 0; display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 9px 15px; border-radius: 980px; background: rgba(8, 12, 26, .62); box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--fg); font-size: .875rem; letter-spacing: .01em; white-space: nowrap; transition: opacity .4s ease; opacity: calc(1 - var(--gone, 0) * 2.5); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
html:not(.moving) .status, html.orb-off .status { display: none; }
.hero-copy { width: var(--content); margin-inline: auto; }
.hero-copy > * { max-width: 34rem; }
.hero .eyebrow { color: var(--gold); }
.hero h1 { margin: 0 0 .32em; font-size: clamp(2.75rem, 1.5rem + 4.1vw, 5.25rem); line-height: 1.04; letter-spacing: -.034em; }
.hero-copy > h1 { max-width: 13ch; }
/* The turning word (Josh, 10-21 4:02 PM: "it twists to the next word and then just revolves around").
   The four words sit on the sides of a long box that turns over to the next one every couple of
   seconds and keeps going round; the page script poses each word. The hidden copy of the widest word
   holds its room, so the line never shifts. Reduce Motion and the still version show the whole
   sentence instead. */
.hero .turn { position: relative; display: inline-block; color: var(--gold-hi); white-space: nowrap; }
.turn-size { visibility: hidden; }
.turn-word { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.turn-word + .turn-word { opacity: 0; }
html.moving .turn-all { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.moving) .turn { display: none; }
html:not(.moving) .turn-all { color: var(--gold-hi); }
html:not(.moving) .hero-copy > h1 { max-width: 16ch; font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); }
.hero .lede { margin: 0 0 14px; color: var(--fg-2); font-size: var(--t-intro); line-height: 1.4; max-width: 30ch; }
.hero .lede b { color: var(--fg); font-weight: 600; }
.hero .price-hint { margin: 0 0 26px; color: var(--fg-3); font-size: 1rem; }
.hero .company { margin: 22px 0 0; color: var(--fg-3); font-size: .9375rem; }

/* ---------- Scroll moments: the picture holds still while the words scroll past ---------- */
.m { position: relative; overflow-x: clip; padding-block: clamp(24px, 6vh, 72px); }
.m-grid { width: var(--content); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 104px); }
.m-steps { grid-column: 1; grid-row: 1; }
.m-visual { grid-column: 2; grid-row: 1; }
.m.flip .m-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.m.flip .m-steps { grid-column: 2; }
.m.flip .m-visual { grid-column: 1; }
.m-stick { position: sticky; top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)); height: calc(100svh - var(--hdr-h) - env(safe-area-inset-top, 0px));
  display: grid; place-items: center; container-type: size; }
.m-step { display: flex; flex-direction: column; justify-content: center; min-height: 78svh; padding-block: 8svh; }
.m-step:first-child { min-height: 92svh; }
.m-step:last-child { min-height: 96svh; }
/* The calendar holds for about a screen and a quarter, not three (Josh, 10-21 11:38 AM: "probably
   like one to one and a half"). */
.m-day .m-step { min-height: 44svh; }
.m-day .m-step:first-child, .m-day .m-step:last-child { min-height: 58svh; }
.m-step > p:not(.when):not(.src):not(.pin-line):not(.aside) { margin: 0; color: var(--fg-2); font-size: 1.1875rem; line-height: 1.55; max-width: 34ch; }
.m-step .pin-line { margin: 0; color: var(--fg); font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem); font-weight: 500; line-height: 1.22; letter-spacing: -.015em; max-width: 18ch; }
.m-step .pin-num { color: var(--gold); }
.m-step h2 + p + .pin-line { margin-top: 36px; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); }
.m-step .aside { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); color: var(--fg); font-weight: 500; line-height: 1.3; max-width: 22ch; margin: 0; }

/* Moment one: a hundred calls as a hundred stars. */
.field { margin: 0; display: grid; justify-items: center; gap: clamp(20px, 4cqh, 34px); }
.dots { --dot: clamp(7px, 1.25cqh, 11px); --gap: clamp(15px, 3cqh, 28px); position: relative; display: grid; grid-template-columns: repeat(10, var(--dot)); gap: var(--gap); }
/* Each star is a dot with a soft glow (a shadow, which phones draw quickly). Going dark or coming
   back changes it in one step with a short fade of the dot itself. */
.dots i { position: relative; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--gold); box-shadow: 0 0 calc(var(--dot) * .9) rgba(232, 196, 142, .5);
  transition: background-color .3s ease, transform .4s var(--ease-out); }
.dots i.out, html:not(.moving) .dots i.x { background-color: rgba(244, 239, 230, 0); box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .34); transform: scale(.82); }
.dots i.out.back, html:not(.moving) .dots i.x.b { background-color: var(--fg); box-shadow: 0 0 calc(var(--dot) * .8) rgba(244, 239, 230, .35); transform: scale(.88); }
/* A missed call streaks away like a falling star and leaves its hollow ring behind; a call reached
   later comes back the same way as a comet and lights when it lands. The page script gives each
   star its angle (--a) and how far it goes, in dots (--k). The head and the tail are drawn apart,
   so the tail can stretch with the speed while the head stays round. */
@media (prefers-reduced-motion: no-preference) {
  html.moving .dots i.x::before, html.moving .dots i.x::after { content: ""; position: absolute; pointer-events: none; opacity: 0;
    --d: calc(var(--k, 4) * (var(--dot) + var(--gap))); }
  html.moving .dots i.x::after { inset: 0; border-radius: 50%; background: #FFF3DE; box-shadow: 0 0 calc(var(--dot) * 1.1) rgba(242, 214, 170, .85); }
  html.moving .dots i.x::before { right: 50%; top: calc(50% - .75px); width: calc(var(--dot) * 7); height: 1.5px; transform-origin: 100% 50%;
    background: linear-gradient(90deg, rgba(242, 214, 170, 0), rgba(255, 238, 210, .9)); }
  html.moving .dots i.x.out::after { animation: k-fall-head 1.15s cubic-bezier(.5, 0, .9, .45) both; }
  html.moving .dots i.x.out::before { animation: k-fall-tail 1.15s cubic-bezier(.5, 0, .9, .45) both; }
  html.moving .dots i.x.out.back::after { animation: k-home-head 1.3s cubic-bezier(.15, .55, .3, 1) both; }
  html.moving .dots i.x.out.back::before { animation: k-home-tail 1.3s cubic-bezier(.15, .55, .3, 1) both; }
  html.moving .dots i.out.back { transition-delay: 1.05s; }
}
@keyframes k-fall-head {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(1); }
  10% { opacity: 1; } 65% { opacity: .9; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.55); } }
@keyframes k-fall-tail {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scaleX(.05); }
  12% { opacity: .9; } 70% { opacity: .75; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scaleX(1); } }
@keyframes k-home-head {
  0% { opacity: 0; transform: rotate(calc(var(--a) + 180deg)) translateX(calc(var(--d) * -1)) scale(.6); }
  18% { opacity: 1; } 88% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--a) + 180deg)) translateX(0) scale(1); } }
@keyframes k-home-tail {
  0% { opacity: 0; transform: rotate(calc(var(--a) + 180deg)) translateX(calc(var(--d) * -1)) scaleX(1); }
  18% { opacity: .85; } 80% { opacity: .6; }
  100% { opacity: 0; transform: rotate(calc(var(--a) + 180deg)) translateX(0) scaleX(.1); } }
/* The phone rings: two ripples run out through the stars. */
.dots::after { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(242, 214, 170, .6); opacity: 0; transform: scale(.1); }
@media (prefers-reduced-motion: no-preference) {
  .dots.ringing::after { will-change: transform, opacity; animation: k-wave 1.25s var(--ease-out) 2 both; }
}
@keyframes k-wave { from { opacity: .95; transform: scale(.1); } to { opacity: 0; transform: scale(1); } }
.field-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; color: var(--fg-3); font-size: .9375rem; }
.field-key span { display: inline-flex; align-items: center; gap: 8px; }
.field-key span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.field-key .k-lit::before { background: var(--gold); }
.field-key .k-out::before { box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .45); }
.field-key .k-back::before { background: var(--fg); }

/* Moment two: one call on a phone, ring to booked. Sized from the space it holds still in. */
.phone { --ph: min(640px, 90cqh); position: relative; height: var(--ph); aspect-ratio: 300 / 620; font-size: calc(var(--ph) / 40);
  padding: .55em; border-radius: 2.9em; background: linear-gradient(155deg, #212B4A, #0B1021 58%);
  box-shadow: 0 0 0 1px rgba(244, 239, 230, .14), inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 90px -40px rgba(0, 0, 0, .9); }
.phone::after { content: ""; position: absolute; z-index: -1; inset: 18% -30%; border-radius: 50%; opacity: .35; transition: opacity .8s ease; will-change: opacity;
  background: radial-gradient(closest-side, rgba(232, 196, 142, .55), rgba(232, 196, 142, 0)); }
.phone.booked::after, html:not(.moving) .phone::after { opacity: .9; }
.ph-screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 1em 1.05em 1.1em; border-radius: 2.4em; background: #0A0F1E; color: var(--fg); }
.ph-screen::before { content: ""; position: absolute; top: .55em; left: 50%; width: 5.4em; height: 1.55em; translate: -50% 0; border-radius: 1em; background: #000; }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: .05em .7em 0; font-size: .875em; font-weight: 600; }
.ph-dots { display: flex; gap: .22em; }
.ph-dots i { width: .32em; height: .32em; border-radius: 50%; background: var(--fg); }
.ph-call { display: flex; align-items: center; gap: .75em; margin: 1.6em 0 1.1em; padding-bottom: 1em; box-shadow: inset 0 -1px 0 var(--hair); }
.ph-avatar { position: relative; flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: rgba(232, 196, 142, .16); color: var(--gold); }
.ph-avatar svg { width: 1.2em; height: 1.2em; }
.ph-who { min-width: 0; }
.ph-name { margin: 0; font-size: 1.0625em; font-weight: 600; line-height: 1.2; }
.ph-sub { margin: .15em 0 0; color: var(--fg-3); font-size: .8125em; white-space: nowrap; }
.ph-time { font-variant-numeric: tabular-nums; }
.ph-calling { display: none; }
.ph-bubbles { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5em; }
.ph-bubbles .b, .card-talk .b { max-width: 84%; margin: 0; padding: .55em .8em; border-radius: 1.05em; font-size: .9375em; line-height: 1.35; }
.night .b.caller { align-self: flex-end; border-bottom-right-radius: .35em; background: var(--gold); color: var(--gold-ink); }
.night .b.ai { align-self: flex-start; border-bottom-left-radius: .35em; background: var(--n-4); color: var(--fg); }
.ph-booked { display: flex; align-items: center; gap: .8em; margin-top: auto; padding: .9em 1em; border-radius: 1.2em; background: rgba(232, 196, 142, .1); box-shadow: inset 0 0 0 1px rgba(232, 196, 142, .45); }
.ph-booked .chip { font-size: .75em; }
.ph-when { margin: .35em 0 0; font-size: 1.0625em; font-weight: 600; }
.ph-what { margin: .1em 0 0; color: var(--fg-2); font-size: .875em; }
.ph-check { flex: none; width: 2.8em; height: 2.8em; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ph-check .c { stroke-dasharray: 132; stroke-dashoffset: 0; }
.ph-check .t { stroke-dasharray: 30; stroke-dashoffset: 0; }
.phone .ex { margin-top: .8em; text-align: center; font-size: .75em; }

/* The moving version starts from "calling" and the scroll plays the rest. */
html.moving .phone .ph-calling { display: inline; }
html.moving .phone .ph-answered { display: none; }
html.moving .phone.answered .ph-calling { display: none; }
html.moving .phone.answered .ph-answered { display: inline; }
html.moving .phone:not(.answered) .ph-avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(232, 196, 142, .7); animation: k-pulse 1.6s var(--ease-out) infinite; }
@keyframes k-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
html.moving .ph-bubbles .b { opacity: 0; transform: translateY(.7em) scale(.97); transition: opacity .4s ease, transform .55s var(--ease-out); }
html.moving .ph-bubbles .b.on { opacity: 1; transform: none; }
html.moving .ph-booked { opacity: 0; transform: translateY(1em) scale(.98); transition: opacity .5s ease, transform .7s var(--ease-out); }
html.moving .phone.booked .ph-booked { opacity: 1; transform: none; }
html.moving .ph-check .c { stroke-dashoffset: 132; }
html.moving .ph-check .t { stroke-dashoffset: 30; }

/* Moment three: one salon's day, written into its calendar. */
.book { --bk: min(600px, 88cqh); position: relative; width: min(100%, calc(var(--bk) * .74)); font-size: calc(var(--bk) / 36); }
.cal { overflow: clip; padding: 1.15em 1.15em 1em; border-radius: 1.6em; background: rgba(13, 20, 40, .9);
  box-shadow: 0 0 0 1px var(--hair), 0 40px 90px -50px rgba(0, 0, 0, .95); transition: background-color .8s ease; }
.cal-head { display: flex; align-items: center; gap: .8em; margin-bottom: .9em; }
.cal-head .ex-tag { margin-left: auto; }
.cal-day { color: var(--fg); font-size: 1.3em; font-weight: 600; letter-spacing: -.01em; }
.cal-body { --row: min(2.6em, calc((100cqh - 5em) / 10)); position: relative; display: grid; grid-template-columns: 3.6em minmax(0, 1fr); }
.cal-hours { margin: 0; padding: 0; list-style: none; }
.cal-hours li { height: var(--row); max-width: none; margin: 0; padding-top: .15em; color: var(--fg-3); font-size: .8125em; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(244, 239, 230, .07); }
.cal-events { position: relative; margin: 0; padding: 0; list-style: none; background: repeating-linear-gradient(180deg, rgba(244, 239, 230, .07) 0 1px, transparent 1px var(--row)); }
.cal-events > li { position: absolute; left: .2em; right: 0; top: calc(var(--at) * var(--row) + .18em); height: calc(var(--len) * var(--row) - .36em); max-width: none; margin: 0; }
.ev { display: flex; align-items: center; gap: .55em; padding: 0 .75em; overflow: hidden; border-radius: .75em;
  background: var(--n-4); box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .06);
  transition: transform .8s var(--ease-out), opacity .6s ease, background-color .6s ease, box-shadow .6s ease; }
.ev b { min-width: 0; color: var(--fg); font-size: .875em; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev span { flex: none; color: var(--fg-3); font-size: .8125em; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-kalon { flex-direction: column; align-items: flex-start; justify-content: center; gap: .15em; background: rgba(232, 196, 142, .14); box-shadow: inset 0 0 0 1px rgba(232, 196, 142, .55); }
.ev-kalon span { color: var(--gold); }
.ev .tag { position: absolute; right: .55em; top: 50%; translate: 0 -50%; padding: .2em .55em; border-radius: .5em; background: var(--gold); color: var(--gold-ink);
  font-size: .75em; font-style: normal; font-weight: 600; opacity: 0; transform: scale(.9); transition: opacity .45s ease, transform .6s var(--ease-out); }
.ev-open { display: grid; place-items: center; border-radius: .75em; box-shadow: inset 0 0 0 1.5px rgba(232, 196, 142, .6); color: var(--gold); font-size: .8125em; font-weight: 600;
  background: repeating-linear-gradient(135deg, rgba(232, 196, 142, .07) 0 .5em, transparent .5em 1em); opacity: 0; transition: opacity .6s ease .25s; }
.card { position: absolute; z-index: 2; right: -9%; bottom: 7%; width: 64%; margin: 0; padding: 1em 1.05em 1.05em; border-radius: 1.25em; background: #121A33; color: var(--fg);
  box-shadow: 0 0 0 1px rgba(244, 239, 230, .12), 0 30px 60px -24px rgba(0, 0, 0, .85), 0 8px 20px -10px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(1.2em) scale(.97); transition: opacity .45s ease, transform .7s var(--ease-out); pointer-events: none; }
.card p { max-width: none; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin: 0 0 .6em; }
.card-when { margin: 0; font-size: 1.125em; font-weight: 600; }
.card-when s { color: var(--fg-3); font-weight: 400; margin-right: .3em; text-decoration-thickness: 1.5px; }
.card-what { margin: .15em 0 0; color: var(--fg-2); font-size: .9375em; }
.card-note { margin: .55em 0 0; color: var(--gold); font-size: .875em; font-weight: 500; }
.card-talk { display: flex; flex-direction: column; gap: .5em; }
.card-talk .ex { margin-top: .2em; }
.book .chip { font-size: .75em; }

/* The day's states, added by the scroll (or all at once in the still version). */
.book.s-moved .ev-move, html:not(.moving) .ev-move { opacity: 0; transform: translateX(60%); }
.book.s-moved .ev-open, html:not(.moving) .ev-open { opacity: 1; }
.book.s-late .ev-late .tag, html:not(.moving) .ev-late .tag { opacity: 1; transform: none; }
.book.s-late .ev-late { transform: translateY(.3em); }
.book.s-here .ev-kalon .tag, html:not(.moving) .ev-kalon .tag { opacity: 1; transform: none; }
.book.s-here .ev-kalon { background: rgba(232, 196, 142, .24); box-shadow: inset 0 0 0 1px var(--gold), 0 0 2.2em -0.6em rgba(232, 196, 142, .65); }
.book.c-moved .card-moved, .book.c-talk .card-talk { opacity: 1; transform: none; }

/* The still version: the day already happened, so the three cards sit under the calendar. */
html:not(.moving) .book .card { position: relative; right: auto; bottom: auto; width: auto; margin-top: .8em; opacity: 1; transform: none; }

/* The running-late text, the way it lands on the stylist's phone. */
.sms { margin-top: 28px; max-width: 26rem; padding: 14px 16px 15px; border-radius: 20px; background: rgba(28, 39, 71, .82); box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .1); }
.sms-head { display: flex; justify-content: space-between; margin: 0 0 4px; color: var(--fg-3); font-size: .875rem; }
.sms-head span:first-child { color: var(--fg); font-weight: 600; }
.sms-body { margin: 0; color: var(--fg); font-size: 1rem; line-height: 1.45; }

/* ---------- After closing: the words on the night sky, and the booking card rising in ---------- */
.close-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 104px); align-items: end; }
.close .pin-line { margin: 36px 0 0; color: var(--fg); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); font-weight: 500; line-height: 1.22; letter-spacing: -.015em; max-width: 18ch; }
.close .pin-num { color: var(--gold); }
.close .card.close-card { position: relative; right: auto; bottom: auto; width: min(100%, 21rem); font-size: 1.0625rem; opacity: 1; transform: none; }
.close-card .chip { font-size: .75em; }
html.moving .close .card.close-card { opacity: 0; transform: translateY(1.2em) scale(.97); }
html.moving .close.lit .card.close-card { opacity: 1; transform: none; transition-delay: .25s; }
html.moving .close-words > * { text-shadow: 0 0 3px rgba(8, 12, 26, .9), 0 0 14px rgba(8, 12, 26, .95); }
@media (max-width: 900px) {
  .close-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; align-items: start; }
}

/* ---------- The calm sections ---------- */
.sec { position: relative; padding-block: var(--sp-section); }
.sec .inner { width: var(--content); margin-inline: auto; }
.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }

/* "Built around your business." (one part for each turning word) and "What Kalon does today.":
   short parts side by side, read like any calm section. */
.built h2, .today h2 { margin-bottom: clamp(32px, 4vw, 52px); }
.fit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px clamp(20px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.today .fit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fit li { max-width: none; margin: 0; padding-top: 22px; box-shadow: inset 0 1px 0 var(--hair); }
.fit h3 { margin: 0 0 10px; font-size: var(--t-eyebrow); line-height: 1.15; letter-spacing: -.01em; }
.built .fit h3 { color: var(--gold-hi); }
.fit p { margin: 0; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.5; }
.today .ask { margin: clamp(36px, 4vw, 52px) 0 0; color: var(--fg-2); font-size: var(--t-intro); font-weight: 500; line-height: 1.38; max-width: 40ch; }
.today .ask b { color: var(--fg); font-weight: 600; }

.watch .aside { color: var(--fg-3); font-size: 1rem; }
/* The whirlpool turns behind these words, so each letter gets a soft shade of the night sky
   around it and stays easy to read. */
html.moving .watch .sec-head > *, html.moving .watch .ours p { text-shadow: 0 0 3px rgba(8, 12, 26, .9), 0 0 14px rgba(8, 12, 26, .95); }
.ours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.ours-label { grid-column: 1 / -1; margin: 0 0 18px; color: var(--fg-3); font-size: .9375rem; max-width: none; }
.ours .pin { padding-top: 24px; box-shadow: inset 0 1px 0 var(--hair); }
.ours .pin-line { margin: 0; color: var(--fg); font-size: 1.125rem; line-height: 1.45; max-width: 26ch; }
.ours .pin-num { display: block; margin-bottom: 12px; color: var(--gold); font-size: clamp(2.75rem, 2rem + 2.6vw, 4.25rem); font-weight: 500; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
/* A thin path through the four steps; where the browser can, it fills with gold as you scroll. */
.steps::before, .steps::after { content: ""; position: absolute; top: 6px; left: 6px; right: 0; height: 1px; background: var(--hair); }
.steps::after { background: var(--gold); transform-origin: 0 50%; }
.steps li { position: relative; max-width: none; margin: 0; padding-top: 36px; }
.steps li::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--n-1); box-shadow: inset 0 0 0 1.5px var(--gold); }
.steps h3 { margin: 0 0 8px; font-size: var(--t-eyebrow); line-height: 1.15; }
.steps p { margin: 0; color: var(--fg-2); font-size: 1.0625rem; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps { view-timeline: --k-path block; }
    .steps::after { animation: k-fill linear both; animation-timeline: --k-path; animation-range: entry 70% cover 55%; }
  }
}
@keyframes k-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.more { margin: 40px 0 0; }
/* How it works: the river runs behind these words (night/main.js), from past the left edge near the top down to
   past the right edge near the bottom, so the part is taller than the screen, and each letter gets a soft shade
   of the night sky around it. If the flow can't run, the part keeps its usual height. */
html.moving:not(.orb-off):not(.flow-off) #how { min-height: 170vh; min-height: 170svh; }
html.moving #how .inner > * { text-shadow: 0 0 3px rgba(8, 12, 26, .9), 0 0 14px rgba(8, 12, 26, .95); }
.night .arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--gold); font-size: var(--t-button); font-weight: 500; text-decoration: none; }
.night .arrow::after { content: ""; width: 7px; height: 7px; border-right: 1.75px solid currentColor; border-top: 1.75px solid currentColor; rotate: 45deg; }
.night .arrow:hover { text-decoration: underline; text-underline-offset: 5px; }

.price-band { padding-top: clamp(40px, 5vw, 64px); box-shadow: inset 0 1px 0 var(--hair); }
.price-band .sec-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.price-band h2 { max-width: 12ch; }
#pricing { padding-top: 0; }
.calc-plain { margin: 0; color: var(--fg-2); font-size: 1.125rem; max-width: 46ch; }
/* Pricing's hundred calls, beside the heading (Josh, 10-24 4:24 PM): the river comes apart into them, and the
   share of your calls Kalon answers lights up in gold. The flow draws them in this box's room (night/main.js);
   without it, plain dots say the same thing: a faint ring for each call, gold for the ones Kalon answers. */
.price-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; align-items: center; margin-bottom: clamp(28px, 3.5vw, 44px); }
.price-top .sec-head { min-width: 0; margin-bottom: 0; }
.calls-wrap { display: grid; gap: 10px; justify-items: center; min-width: 0; }
.calls { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); width: 100%; max-width: 380px; aspect-ratio: 1; }
.calls i { place-self: center; width: 52%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(184, 204, 247, .4); }
.calls i.on { background: var(--gold); box-shadow: 0 0 10px rgba(232, 196, 142, .5); }
html.flow-on .calls i { visibility: hidden; }
.each { margin: 0; color: var(--fg-3); font-size: .9375rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Pick your plan: their calls and how many Kalon answers, or a monthly budget; the plan follows.
   The page script (kalon.js) fills in the numbers. */
.calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 3vw, 44px); padding: clamp(20px, 3vw, 40px);
  border-radius: 28px; background: rgba(13, 20, 40, .82); box-shadow: inset 0 0 0 1px var(--hair); }
.calc-in { display: grid; gap: 28px; align-content: start; min-width: 0; }
.calc-tabs { justify-self: start; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 26px; background: var(--n-3); }
.calc-tab { min-height: 44px; padding: 0 18px; border: 0; border-radius: 980px; background: transparent; color: var(--fg-2); font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; touch-action: manipulation; }
.calc-tab[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }
.calc-fields { display: grid; gap: 28px; }
.calc-field { display: grid; gap: 8px; min-width: 0; }
.calc-field label { color: var(--fg); font-size: 1.125rem; font-weight: 500; }
.calc-val { color: var(--gold-hi); font-size: 1.5rem; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* One slider look in every browser: a thin track with a gold fill up to a light thumb. The page
   script sets --p (0 to 1); the fill math keeps it centered under the 28px thumb. */
.calc input[type="range"] { --p: .5; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 36px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) calc(14px + (100% - 28px) * var(--p)), rgba(244, 239, 230, .16) 0); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: var(--fg); box-shadow: 0 0 0 5px rgba(232, 196, 142, .22), 0 2px 10px rgba(0, 0, 0, .45); }
.calc input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(244, 239, 230, .16); }
.calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--gold); }
.calc input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 5px rgba(232, 196, 142, .22); }
.calc-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.calc-quick button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 980px; background: transparent; box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .24);
  color: var(--fg); font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer; touch-action: manipulation; }
.calc-quick button[aria-pressed="true"] { background: rgba(232, 196, 142, .14); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-hi); }
.calc-marks { display: flex; justify-content: space-between; color: var(--fg-3); font-size: .875rem; font-variant-numeric: tabular-nums; }
.calc .src { margin: 2px 0 0; }
.calc-out { display: grid; gap: 10px; align-content: start; min-width: 0; padding: clamp(20px, 2.4vw, 30px); border-radius: 20px; background: var(--n-1); box-shadow: inset 0 0 0 1px var(--hair); }
.calc-out p { margin: 0; max-width: none; }
.calc-lead { color: var(--fg-2); font-size: 1.0625rem; }
.calc-plan { color: var(--fg); font-weight: 500; }
.calc-price { color: var(--fg); font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc-per { color: var(--fg-2); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; }
.calc-out .btn { justify-self: start; margin-top: 12px; }

.links3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.links3 li { max-width: none; margin: 0; }
.links3 a { display: block; height: 100%; padding: 24px 0 8px; box-shadow: inset 0 1px 0 var(--hair); color: var(--fg-2); text-decoration: none; }
.links3 b { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--fg); font-size: 1.3125rem; font-weight: 600; letter-spacing: -.01em; }
.links3 b::after { content: ""; width: 7px; height: 7px; border-right: 1.75px solid var(--gold); border-top: 1.75px solid var(--gold); rotate: 45deg; transition: translate .2s var(--ease-out); }
.links3 span { display: block; font-size: 1.0625rem; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .links3 a:hover b::after { translate: 4px 0; } .links3 a:hover b { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(232, 196, 142, .6); } }
#more { padding-top: 0; }

.talk-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px 64px; }
.soon { display: grid; justify-items: center; gap: 14px; }
.soon-ring { width: clamp(120px, 14vw, 176px); aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 3deg, rgba(232, 196, 142, .85) 0 2.2deg, rgba(232, 196, 142, 0) 2.2deg 12deg);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 89%, #000 96%, transparent 97%);
  mask: radial-gradient(closest-side, transparent 88%, #000 89%, #000 96%, transparent 97%); }
.soon-label { color: var(--fg-3); font-size: .9375rem; }

.alerts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.alert-tile { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: rgba(20, 29, 56, .72); box-shadow: inset 0 0 0 1px var(--hair); }
.alert-tile h3 { margin: 0 0 10px; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.alert-tile p { margin: 0; color: var(--fg-2); font-size: 1.0625rem; }
.alert-tile p + p { margin-top: 12px; }
.alert-tile .when-starts { color: var(--fg); font-weight: 500; }
.sms-bubble { max-width: 34ch; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--n-4); color: var(--fg) !important; }
.alerts-cta { margin-top: 28px; }

/* The last screen is morning: a warm light comes up behind the last ask. */
.dawn { overflow: clip; text-align: center; padding-block: clamp(120px, 14vw, 200px) clamp(150px, 17vw, 240px); }
.dawn .inner { display: flex; flex-direction: column; align-items: center; }
.dawn h2 { margin-inline: auto; max-width: 14ch; font-size: clamp(2.375rem, 1.5rem + 3.6vw, 4.5rem); }
.dawn .intro { margin: 0 auto 14px; max-width: 34ch; }
.dawn .small { margin: 0 0 30px; }
.dawn::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: max(1500px, 160%); height: 92%; translate: -50% 50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 226, 184, .95), rgba(250, 200, 140, .62) 16%, rgba(214, 196, 190, .2) 38%, rgba(140, 172, 232, .1) 58%, rgba(120, 156, 228, 0) 82%);
  background:
    radial-gradient(closest-side in oklab, rgba(255, 226, 184, .95), rgba(250, 200, 140, .62) 16%, rgba(214, 196, 190, .2) 38%, rgba(140, 172, 232, .1) 58%, rgba(120, 156, 228, 0) 82%); }
.night .site-foot { margin-top: 0; background: linear-gradient(180deg, #0A1022, var(--n-0) 160px); border-top: 0; }
/* The horizon: the footer's top edge is where the light comes up. */
.night .site-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 220, 170, 0), rgba(255, 220, 170, .7) 50%, rgba(255, 220, 170, 0)); }
.night .site-foot nav a:hover { color: var(--fg); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1080px) {
  .steps, .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps::before, .steps::after { display: none; }
}
@media (max-width: 900px) {
  /* Phones: the picture holds still in the top part of the screen and the words scroll up under it. */
  .sky-night { background: linear-gradient(180deg, #070B18 0%, #0A1023 50%, #0C1430 100%); }
  .m { --stick: 50svh; padding-block: 0; }
  .m-grid, .m.flip .m-grid { grid-template-columns: minmax(0, 1fr); }
  .m-steps, .m-visual, .m.flip .m-steps, .m.flip .m-visual { grid-column: 1; grid-row: 1; }
  .m-visual { z-index: 2; pointer-events: none; }
  .m-stick { height: var(--stick); padding-block: 10px 18px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  /* Once it holds still, a solid backing in the sky's own color hides the words scrolling up underneath. */
  .m-stick.held { background: linear-gradient(180deg, #080C1A 0%, #0A1123 calc(100% - 28px), rgba(10, 17, 35, 0)); }
  .m-steps { padding-top: calc(var(--stick) + 8px); }
  .m-step, .m-step:first-child { min-height: calc(100svh - var(--hdr-h) - var(--stick) + 4svh); justify-content: flex-start; padding-block: 20px 6svh; }
  .m-step:last-child { min-height: calc(100svh - var(--hdr-h) - var(--stick) + 22svh); }
  .m-day .m-step, .m-day .m-step:first-child { min-height: calc(100svh - var(--hdr-h) - var(--stick) - 10svh); }
  .m-day .m-step:last-child { min-height: calc(100svh - var(--hdr-h) - var(--stick) - 4svh); }
  /* A link reached with the keyboard stops below the held picture, never underneath it. */
  .m-step a { scroll-margin-top: var(--stick); }
  .m-call { --stick: 58svh; }
  .m-day { --stick: 56svh; }
  .night .m h2 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.25rem); }
  .m-step > p:not(.when):not(.src):not(.pin-line):not(.aside) { font-size: 1.0625rem; line-height: 1.5; }
  .m-step .pin-line { font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem); }
  .m-step .aside { font-size: 1.375rem; }
  .dots { --dot: clamp(7px, 2.1cqh, 10px); --gap: clamp(14px, 5cqh, 22px); }
  /* On a phone the visitor's own phone is the frame, so the call shows as a plain card. */
  .phone { height: auto; width: min(100%, 420px); max-height: 100%; aspect-ratio: auto; font-size: clamp(12.5px, 3.3cqh, 15px);
    padding: 0; border-radius: 28px; background: #0A0F1E; box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -30px rgba(0, 0, 0, .9); }
  .phone::after { inset: 12% -4%; }
  .ph-screen { height: auto; padding: 1.1em 1.1em 1em; border-radius: inherit; background: none; }
  .ph-screen::before, .ph-status { display: none; }
  .ph-call { margin: 0 0 1em; }
  .ph-booked { margin-top: 1em; }
  .book { width: min(100%, 420px); font-size: clamp(12.5px, 3.4cqh, 15px); }
  .cal-hours li { font-size: .875em; }
  .card { right: 3%; bottom: 3%; width: 68%; }
  .ours, .links3, .today .fit, .calc { grid-template-columns: minmax(0, 1fr); }
  .ours .pin { padding-block: 22px 26px; }
  .talk-band { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .soon { justify-items: start; }
  .alerts-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* The object sits above the words on a phone, small enough that the first ask clears the menu button. */
  .hero { --ox: 50%; --oy: 17svh; align-items: flex-start; min-height: 0; padding: calc(34svh + 4px) 0 44px; }
  .orb { bottom: auto; height: 40svh; }
  .orb::before { top: 17svh; width: min(88vw, 40svh); }
  .orb-still { top: 17svh; width: min(76vw, 33svh); }
  .status { top: calc(34svh - 42px); padding: 7px 13px; font-size: .8125rem; }
  .hero .eyebrow { font-size: 1.0625rem; margin-bottom: .55em; }
  .hero h1 { font-size: clamp(2.375rem, 1.6rem + 3.6vw, 3rem); max-width: 11ch; }
  .hero .lede { font-size: 1.125rem; }
  .hero .price-hint { margin-bottom: 20px; font-size: .9375rem; }
  .hero .company { margin-top: 18px; }
  .steps, .fit { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .price-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fit li { padding-block: 20px 24px; }
  .steps li { padding: 0 0 26px 34px; }
  .steps li::before { top: 9px; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 26px; bottom: 6px; width: 1px; background: var(--hair); }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hero { --oy: 14svh; padding-top: calc(28svh + 4px); }
  .orb { height: 34svh; }
  .orb::before, .orb-still { top: 14svh; }
  .status { top: calc(28svh - 40px); }
  .hero h1 { font-size: 2.25rem; }
}
/* The smallest phones (320 wide): the still headline names all four words, so it steps down a size
   to stay on three lines and keep the button on the first screen. */
@media (max-width: 360px) {
  html:not(.moving) .hero-copy > h1 { font-size: 1.875rem; }
}
/* Very short phones and phones held sideways: the moments simply stack, nothing holds still. */
@media (max-height: 560px) {
  .m-stick { position: relative; top: auto; height: auto; min-height: 360px; background: none; margin-inline: 0; padding-inline: 0; }
  .m-steps { padding-top: 0; }
  .m-grid, .m.flip .m-grid { grid-template-columns: minmax(0, 1fr); }
  .m-steps, .m-visual, .m.flip .m-steps, .m.flip .m-visual { grid-column: 1; grid-row: auto; }
  .m-step, .m-step:first-child, .m-step:last-child { min-height: 0; padding-block: 28px; }
}

/* Reduce Motion and the still version: nothing holds still or plays; everything is already there. */
html:not(.moving) .m-stick { position: relative; top: auto; height: auto; min-height: 0; padding-block: 24px; background: none; container-type: normal; }
html:not(.moving) .m-step, html:not(.moving) .m-step:first-child, html:not(.moving) .m-step:last-child { min-height: 0; padding-block: 36px; }
html:not(.moving) .m-grid { align-items: center; }
html:not(.moving) .phone { --ph: 600px; }
html:not(.moving) .book { --bk: 560px; }
html:not(.moving) .dots { --dot: 10px; --gap: 22px; }
html:not(.moving) .field { gap: 26px; }
@media (max-width: 900px) {
  html:not(.moving) .m-steps { padding-top: 0; }
  html:not(.moving) .m-grid, html:not(.moving) .m.flip .m-grid { grid-template-columns: minmax(0, 1fr); }
  html:not(.moving) .m-steps, html:not(.moving) .m-visual { grid-row: auto; }
  html:not(.moving) .m-visual { order: 2; margin-inline: 0; }
  html:not(.moving) .m-stick { margin-inline: 0; padding-inline: 0; }
  html:not(.moving) .phone { --ph: min(560px, 120vw); }
  html:not(.moving) .book { --bk: min(560px, 118vw); }
  html:not(.moving) .dots { --dot: 8px; --gap: 18px; }
}
@media (prefers-reduced-transparency: reduce) {
  :root.night { --hdr-bg: rgba(8, 12, 26, .97); }
  .alert-tile, .sms { background: var(--n-3); }
}