/* JESKEL Group /work, deck v8. Page layout, CSS 3D stage and the sample mockups.
   v8 (2026-10-10, the story screen's start button): "Start the walk-through" is components/button-dawn,
   vendored as button-dawn.v1.*, and pressing it raises the sheet instead of jumping (deck.v8.js). The
   page's own .story-go rules are gone with it, and the stop-marker hover rule is scoped to the five
   stops: as `.story a:hover::before` it also reached the new button's OWN ::before (the words' shade,
   an inset:0 layer) and scaled it 15% past the capsule, which painted a grey plate on the paper.
   v7 (2026-10-09, the Midnight Atlas stage hero; v6 was its first cut and never deployed): the hero's old showpiece sizing and caption are gone (the
   showpiece is the stage's Website item, sized by the stage: hero.vN.css), the masthead glint runs only
   while it crosses the glass, and the lower page's scroll-driven fades hold while their band is away.
   The review round: the hero-off hold names the two loops it is for, not every element of the sheet. */

:root {
  --ink: #060B18;
  --ink2: #0A1122;
  --panel: #0C1428;
  --panel2: #101A33;
  --line: rgba(146, 166, 205, .16);
  --line2: rgba(146, 166, 205, .28);
  --text: #E8EDF7;
  --muted: #9AA8C4;
  --amber: #F5A83C;
  --amber-hot: #FFC46B;
  --amber-deep: #E08A1E;
  --cyan: #5FE1FF;
  --steel: #8FA6D6;
  --link: #8DB6FF;
  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Geist", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --masthead-h: 64px;
  --maxw: 1280px;
  --pad: clamp(20px, 3.4vw, 48px);
  --copy-w: min(31rem, 38vw);
  --copy-r: calc((100vw - min(100vw, var(--maxw))) / 2 + var(--pad) + var(--copy-w));
  /* WHAT THE TYPE COSTS, measured in a browser rather than by adding up the stylesheet (which
     counts every unicode-range subset and lands two to four times over): this page fetches 139.3 KB
     of font against the old stack's 97.8 KB. Archivo without its width axis would be 85.4 KB, so
     the wide headings cost 54 KB. Kept, because the wide setting is the whole reason this face
     reads as chosen rather than defaulted, and because self-hosting one static 112% instance
     removes the axis entirely. That is on the pre-launch list with the rest of the self-hosting.
     The new faces load from Google with display=swap, so the page paints in system-ui and swaps:
     measured CLS 0.034 on a phone, up from 0.001. Metric-matched @font-face fallbacks were tried
     and made it WORSE (0.052, twice), because they change the first-paint face to Arial and Arial
     breaks lines in different places than Geist does. The fix is self-hosting these three faces
     with a preload, which is already on the pre-launch list. */
  /* the work-order ticket reads its type from its own trio, declared in form.v1.css at zero
     specificity so a host page can override it. That file is shared and is not edited here. */
  --form-font-display: "Archivo", system-ui, sans-serif;
  --form-font-body: "Geist", system-ui, sans-serif;
  --form-font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --form-panel: #0C1428;
  --form-scroll-offset: 88px;
  /* nav-capsule is its own stylesheet with its own defaults. These hand it THIS page's palette.
     Seven of the eight already equalled the component's defaults byte for byte, so most of this
     block is a no-op today -- and that is precisely the point, because the eighth did not:
     --nav-font-mono fell back to ui-monospace and the dock labels quietly lost Geist Mono. A
     component whose defaults happen to match the host's values is a component nobody notices they
     have stopped theming. --nav-dock-h is not here because 62px IS the component's default. */
  --nav-text: var(--text);
  --nav-muted: var(--muted);
  --nav-amber: var(--amber);
  --nav-amber-hot: var(--amber-hot);
  --nav-line: var(--line2);
  --nav-ink: var(--ink);
  --nav-font-mono: var(--f-mono);
  --form-link: #8DB6FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-padding-top: 88px; scroll-padding-bottom: 24px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-top: var(--masthead-h);
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(245, 168, 60, .35); }
a { color: var(--link); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
/* Archivo carries a width axis, used here and on the brand lockup and nowhere else: headings
   stand slightly wide, which is what makes the page read as typeset rather than defaulted.
   Everything measured in fixed em (the mockup panels, the map, the run log) is body or mono and is
   untouched by it. */
h1, h2, h3 { font-family: var(--f-display); font-stretch: 112%; line-height: 1.1; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.14em; }
.js-only { display: none !important; }
html.js .js-only { display: revert !important; }
html.js .ctrl.js-only, html.js .ask.js-only { display: flex !important; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- skip link, nav ---------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber); color: var(--ink); padding: 12px 18px; border-radius: 0 0 10px 0;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 5px; }

.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(6, 11, 24, .86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); height: var(--masthead-h); display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--text); text-decoration: none; flex: none; }
.mark { display: block; width: 34px; height: 34px; flex: none; fill: url(#jg-mark-g); overflow: visible; filter: drop-shadow(0 1px 8px rgba(245, 168, 60, .22)); }
.brand-name { font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: 16px; letter-spacing: .1em; line-height: 1.15; }
.brand-name small { display: block; font-family: var(--f-mono); font-weight: 400; font-size: 9.5px; letter-spacing: .34em; color: var(--muted); }
.masthead-call { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 500; min-height: 44px; padding: 0 4px; }
.masthead-call .i { color: var(--amber); }
.masthead-call-m { display: none; }
.motion-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); background: transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.motion-btn:hover { color: var(--text); border-color: var(--muted); }
.motion-btn[aria-pressed="true"] { color: var(--amber); border-color: rgba(245, 168, 60, .5); }
html:not(.js) .motion-btn { display: none; }
.masthead-call, .motion-btn { white-space: nowrap; }
@media (max-width: 1159px) {
  /* the Menu is gone, so the bar itself carries the second Pause control from here down.
     Everything below this width is assumed to be a finger, so every control in the bar
     clears the 44 px touch floor from here rather than only on a phone. */
  .masthead-motion { margin-left: auto; min-height: 44px; }
  .masthead .btn-sm { min-height: 44px; }
}
@media (max-width: 860px) {
  .masthead-in { gap: 10px; }
  .masthead .brand-name small { display: none; }
}
@media (max-width: 640px) {
  /* the number shortens to Call and the Pause pill drops to its icon, both still 44 px */
  .masthead-call-t { display: none; }
  .masthead-call-m { display: inline; }
  .masthead-call { padding: 0 10px; border: 1px solid var(--line2); border-radius: 10px; min-height: 44px; }
  .masthead .brand-name { font-size: 14px; }
  .masthead .mark { width: 32px; height: 32px; }
  .masthead-motion { min-width: 44px; padding: 6px 10px; justify-content: center; }
  .masthead-motion .i { font-size: 17px; }
  .masthead-motion [data-motion-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 480px) {
  .masthead .brand-name { display: none; }
  .masthead .brand { min-width: 44px; justify-content: center; }
}
@media (max-width: 359px) {
  .masthead-in { gap: 7px; }
  .masthead-call-m { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the word goes but the target does not: icon only, still 44 x 44 */
  .masthead-call { min-width: 44px; padding: 0 9px; justify-content: center; }
}

/* Which bar is on -- the rail above 1160px, the dock below it -- is nav-capsule.v1.css's business
   now, along with the dock's scroll clearance. All that is left here is the header's own gap in the
   band where the rail is tight, which is the page's furniture and not the component's to set. */
@media (min-width: 1160px) and (max-width: 1319px) {
  .masthead-in { gap: 16px; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 11px; border: 1px solid transparent;
  font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn .i { font-size: 18px; }
.btn-amber { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-amber:hover { background: #FFB95A; }
.btn-amber:hover .i { transform: translateX(3px); }
.btn-amber .i { transition: transform .15s ease; }
.btn-ghost { color: var(--text); border-color: var(--line2); background: rgba(10, 17, 34, .6); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-ghost .i { color: var(--amber); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14.5px; border-radius: 9px; }
@media (max-width: 400px) { .masthead .btn-sm { padding: 8px 11px; font-size: 13.5px; } }

.chip-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 15px;
  border-radius: 999px; border: 1px solid var(--line2); background: rgba(12, 20, 40, .7);
  color: var(--text); font-size: 14.5px; font-weight: 500; cursor: pointer;
}
.chip-btn:hover { border-color: var(--muted); }
.chip-btn[aria-pressed="true"] { border-color: var(--amber); background: rgba(245, 168, 60, .14); }
.chip-btn .i { color: var(--amber); }

/* ---------- type helpers ---------- */

.eyebrow {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--amber); opacity: .7; flex: none; }
.clockline {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 13.5px; color: var(--muted); line-height: 1.45;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 17, 34, .75);
  margin-bottom: 20px;
}
.clockline .i { color: var(--amber); }
.clockline time { color: var(--amber-hot); font-weight: 500; }
.def {
  margin-top: 16px; font-size: 18.5px; line-height: 1.5; color: var(--text);
  padding-left: 14px; border-left: 2px solid var(--amber);
}

/* ---------- the shared 3D stage (desktop, JS on, motion on) ---------- */

.show { position: relative; }
.stage {
  display: none;
  position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; z-index: 1;
  pointer-events: none; overflow: hidden;
  perspective: 1500px;
  perspective-origin: calc(50% + var(--copy-r) / 2) calc(50% + 34px);
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--copy-r) - 10px), #000 calc(var(--copy-r) + 90px));
  mask-image: linear-gradient(90deg, transparent calc(var(--copy-r) - 10px), #000 calc(var(--copy-r) + 90px));
}
html.w3d .stage { display: block; }
.cam { position: absolute; left: calc(50% + var(--copy-r) / 2); top: calc(50% + 34px); width: 0; height: 0; transform-style: preserve-3d; }
.world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; font-size: clamp(10.5px, 1.07vw, 16px); }
.floor {
  position: absolute; left: -70em; top: -70em; width: 140em; height: 140em;
  transform: translateY(19em) rotateX(90deg);
  background-image:
    linear-gradient(rgba(143, 166, 214, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 166, 214, .16) 1px, transparent 1px);
  background-size: 2.75em 2.75em;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, rgba(0, 0, 0, .6) 28%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0, rgba(0, 0, 0, .6) 28%, transparent 62%);
}
/* THE STORY CLOCK. It used to be a bare time floating over the scene, and a reader had no way to
   know what it was the time OF. It now says what it is, and carries the same five stops the hero
   lists, so the list in the hero and the clock in the scene are visibly one thing. */
.clock {
  position: absolute; left: calc(var(--copy-r) + 56px); top: calc(var(--masthead-h) + 22px);
  display: grid; row-gap: 4px; width: max-content;
  font-family: var(--f-mono); color: var(--muted); font-size: 13px;
  padding: 9px 16px 11px 14px; border-radius: 12px;
  background: rgba(10, 17, 34, .78); border: 1px solid var(--line2);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .8);
}
.clock-k { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.clock-now { display: inline-flex; align-items: baseline; gap: 8px; }
.clock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); align-self: center; box-shadow: 0 0 10px var(--amber); }
.clock-t { font-family: var(--f-display); font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.clock-ap { color: var(--amber-hot); font-weight: 500; }
.clock-d { color: var(--text); }
.clock-l { font-size: 12px; letter-spacing: .04em; }
.clock-l em { font-style: normal; color: var(--amber); border: 1px solid rgba(245, 168, 60, .45); border-radius: 5px; padding: 0 5px; margin-left: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.clock-pips { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.clock-pips i { width: 18px; height: 4px; border-radius: 2px; background: rgba(146, 166, 205, .26); }
.clock-pips i.on { background: var(--amber); box-shadow: 0 0 8px rgba(245, 168, 60, .7); }
.clock-pips i.done { background: rgba(245, 168, 60, .5); }
.clock-n { font-weight: 400; font-size: 11.5px; letter-spacing: .04em; color: var(--muted); margin-left: 6px; }
/* Four rows made the clock 120px tall where the old one was 71, and on a window under about 840px
   that put it on top of the set's EXAMPLE tag and the top of the browser panel, with the tag ghosting
   through it. Two columns bring it back to the old height without dropping a word. */
@media (max-height: 840px) {
  .clock { grid-template-columns: auto auto; column-gap: 18px; row-gap: 4px; align-items: center; }
  .clock-k { grid-column: 1; grid-row: 1; }
  .clock-pips { grid-column: 2; grid-row: 1; margin-top: 0; justify-self: end; }
  .clock-now { grid-column: 1; grid-row: 2; }
  .clock-l { grid-column: 2; grid-row: 2; justify-self: end; }
}
/* under about 740px even two rows reach the set's EXAMPLE tag (the tag sits a fixed number of em
   above the middle of the stage, so it climbs as the window gets shorter). One row: the time and the
   stop. The label and the business name are what goes; the hero has just said both. */
@media (max-height: 740px) {
  .clock { top: calc(var(--masthead-h) + 10px); padding: 7px 14px 8px 12px; }
  .clock-k, .clock-l { display: none; }
  .clock-now { grid-column: 1; grid-row: 1; }
  .clock-pips { grid-column: 2; grid-row: 1; }
}

/* ---------- the sheet: two light screens over the scene ---------- */
/* [SHEET BASELINE: START] The two light screens of the sheet: the hero and the introduction to the
   example. Chosen from three independent designs by four judges working from screenshots (a shop
   owner, an art director, a first-time visitor, the engineer who ships it), then refined against
   their defect list. Every selector is under .sheet, .hero, .story or .hem, so nothing here reaches
   the scene or the chapters; a redesign replaces everything between this marker and END. */
/* "Dusk to dawn": ivory hero, sand story, then the dark scene. Nothing moves. */
.sheet { position: relative; z-index: 3; display: flow-root; color: #14213D; }
/* ink under the translucent masthead, as at the top of the page */
.sheet::before { content: ""; display: block; position: sticky; z-index: 4; top: 0; height: var(--masthead-h); margin-top: calc(-1 * var(--masthead-h)); background: #060B18; pointer-events: none; }
.hero, .story { position: relative; min-height: calc(100vh - var(--masthead-h)); min-height: calc(100svh - var(--masthead-h)); }
.sheet a:focus-visible { outline-color: #A1520B; }

/* screen 1: the hero, on ivory */
.hero { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: radial-gradient(44% 58% at 72% 48%, #F8B25E2B, transparent 72%), linear-gradient(#FFFDF9, #FCF7EF); }
.hero-top { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); column-gap: clamp(24px, 4vw, 60px); align-items: center; padding-top: clamp(16px, 3.4vh, 44px); padding-bottom: clamp(10px, 2vh, 24px); }
.hero .eyebrow, .story .eyebrow { color: #A1520B; font-weight: 500; }
.hero .eyebrow::before, .story .eyebrow::before { background: #A1520B; opacity: 1; }
.hero-copy h1 { font-size: clamp(30px, min(3.1vw, 5vh), 43px); font-weight: 700; margin: 16px 0 18px; line-height: 1.06; color: #10192E; letter-spacing: -.018em; }
.hero-sub { font-size: clamp(16px, min(1.3vw, 2.15vh), 18.5px); line-height: 1.55; color: #3E4A63; max-width: 34em; margin: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3vh, 28px); }
.hero .btn-amber { box-shadow: 0 10px 22px -12px #A1520BA6; }
.hero .btn-ghost { color: #10192E; border-color: #10192E33; background: #fff; }
.hero .btn-ghost:hover { border-color: #10192E; }
.hero .btn-ghost .i { color: #A1520B; }
.hero-note { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: clamp(14px, 2.4vh, 22px) 0 0; padding: 0; font-family: var(--f-mono); font-size: 13.5px; color: #4E5B75; }
.hero-note li { display: inline-flex; align-items: center; gap: 9px; }
.hero-note li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #C9741B; }
/* "See one evening" is components/button-clock, the night clock (vendored as button-clock.v2.*): the
   page places it and hands it the house mono face; everything else about it is the component's */
.hero-next { justify-self: center; margin-bottom: clamp(10px, 2vh, 22px); }
/* its loops hold while it is off screen (deck.vN.js: .clock-off on the clock itself, so switching it restyles the
   clock and not the page), as they do once the hero's cover has cleared (scene-curtain.v2); not in its go
   state, which races to morning as the page glides away */
.hero-next.clock-off:not([data-button-clock-go]) *, .hero-next.clock-off:not([data-button-clock-go]) *::before,
.hero-next.clock-off:not([data-button-clock-go]) *::after { animation-play-state: paused !important; }
:root { --button-clock-font-mono: var(--f-mono); }
/* the story screen's start button is components/button-dawn (vendored as button-dawn.v1.*): the page
   hands it the two faces and the focus ring that sits on this paper. Everything else is the
   component's own dawn, declared at :where(:root), so these win without !important. */
:root {
  --button-dawn-font-display: var(--f-display);
  --button-dawn-font-mono: var(--f-mono);
  --button-dawn-focus: #A1520B;
}

/* the hero's background loop lives in .hero-bg, behind everything else in the hero */
.hero > .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero > :not(.hero-bg, [data-scene-curtain-hem]) { position: relative; z-index: 1; }

/* the hero's right-hand column holds the stage (hero.vN.css sizes it from this column: 100cqw) */
.hero-show { min-width: 0; display: grid; justify-items: center; container-type: inline-size; }
/* lit for dark; on ivory, softer warm shadows */
.hero .hx::before { inset: 4% -4% -6% 2%; background: radial-gradient(50% 44% at 60% 72%, #F2662B2E, transparent 70%), radial-gradient(56% 46% at 34% 30%, #466ED21C, transparent 72%); filter: blur(2em); }
.hero .hx .b { box-shadow: 0 0 0 1px #0E27471F, 0 .5em 1em -.5em #0E274738, 0 2.4em 4.4em -1.6em #4A2E1066; }
.hero .hx .p { box-shadow: 0 0 0 1px #0E27474C, -.4em 1.4em 2.4em -1em #4A2E1073, 0 .3em .6em -.2em #0E274740; }
.hero .hx .k { box-shadow: 0 0 0 1px #0E27471A, 0 1em 2.2em -.6em #4A2E1061; }

/* screen 2: one night, on sand paper */
.story { display: grid; align-content: center; background: linear-gradient(#F6F0E6, #F2EADC); border-top: 1px solid #A1520B29; }
.story-in { display: grid; row-gap: clamp(28px, 5.6vh, 60px); padding-top: clamp(24px, 4.4vh, 52px); padding-bottom: clamp(24px, 4.4vh, 52px); }
.story-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
.story-h { font-size: clamp(32px, min(3.6vw, 6.6vh), 56px); font-weight: 700; line-height: 1.03; letter-spacing: -.024em; margin: 16px 0 0; color: #10192E; }
.story-p { font-size: clamp(16.5px, min(1.25vw, 2.4vh), 18px); line-height: 1.55; color: #33405A; max-width: 30em; margin: 0 0 .2em; }

/* the night: each stop draws its stretch of sky, --a to --b */
.story-line { --ty: 70px; list-style: none; margin: 0; padding: 0; counter-reset: stop; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr) repeat(2, minmax(0, 1fr)); position: relative; }
.story-line li { position: relative; --a: #F2A649; --b: #D9675E; }
.story-line li:nth-child(2) { --a: #D9675E; --b: #5B4A9B; }
.story-line li:nth-child(3) { --a: #5B4A9B; --b: #252E6B; }
.story-line li:nth-child(5) { --a: #E08850; --b: #8FB0DE; }
.story-line li:nth-child(6) { --a: #5E86C6; --b: #8FB0DE; }
.story-line li::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--ty) - 4px); height: 8px; background: linear-gradient(90deg, var(--a), var(--b)); }
.story-line li:first-child::before { border-radius: 4px 0 0 4px; }
.story-line li:last-child::before { border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #8FB0DE, #5E86C6); }
.story .story-gap::before { top: calc(var(--ty) - 3px); height: 6px; background: linear-gradient(90deg, #252E6B, #141A44 45%, #3D3F7A 70%, #E08850); mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 14px); }
.story-line a { position: relative; display: grid; grid-template-rows: calc(var(--ty) - 22px) 40px auto auto; padding-right: clamp(10px, 1.4vw, 26px); color: inherit; text-decoration: none; counter-increment: stop; }
.story-line a::before { content: ""; position: absolute; left: 0; top: calc(var(--ty) - 12px); width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; background: #FFFDF8; border: 6px solid var(--a); box-shadow: 0 0 0 4px #F5EEE3, 0 3px 8px #10192E33; }
.story .st-t { grid-row: 1; align-self: end; display: grid; }
.story .st-t small { font: 500 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #A1520B; margin-bottom: 3px; }
.story-line time { font-family: var(--f-display); font-stretch: 108%; font-size: clamp(23px, min(2vw, 3.6vh), 29px); font-weight: 700; line-height: 1; color: #10192E; font-variant-numeric: tabular-nums; }
.story-line time i { font: 500 13px var(--f-mono); color: #4E5B75; }
.story .st-n { grid-row: 3; display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-stretch: 108%; font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; line-height: 1.2; color: #10192E; }
.story .st-n::before { content: counter(stop, decimal-leading-zero); font: 500 12.5px var(--f-mono); color: #8A5A2B; }
.story .st-n .i { font-size: 17px; color: #A1520B; }
.story .st-d { grid-row: 4; margin-top: 6px; font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.45; color: #2F3B54; max-width: 16em; }
.story a:hover .st-n span { text-decoration: underline 2px #A1520B; text-underline-offset: 4px; }
.story a:hover .st-n .i { transform: translateX(3px); }
/* THE STOP MARKER, AND ONLY THE STOP MARKER. Written as `.story a:hover::before` this reached every
   link in the screen, including the start button, whose own ::before is an inset:0 layer (the words'
   shade). Scaling that 15% pushed it past the capsule and painted a grey plate on the paper, which
   read as a rendering fault. A host rule that names a pseudo-element must name the element too. */
.story-line a:hover::before { transform: scale(1.15); }
.story-line a:focus-visible { outline-offset: 6px; border-radius: 6px; }
.story-gap { display: grid; grid-template-rows: calc(var(--ty) - 22px) 40px auto; justify-items: center; text-align: center; padding-right: 12px; font-family: var(--f-mono); }
.story .gap-k { grid-row: 1; align-self: end; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #3C3F70; }
.story-gap svg { width: 15px; height: 15px; fill: #3C3F70; }
.story .gap-d { grid-row: 3; max-width: 10em; font: 15px/1.35 var(--f-body); color: #4E5B75; }

/* the start, and the clock as it will look on the scene */
.story-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: clamp(20px, 3.4vh, 34px); border-top: 1px solid #10192E1A; }
/* the start button is components/button-dawn and brings its own face, focus ring and forced-colours
   fallback; this column only places it. The 12px leaves room for the halo it lifts on. */
.story-start { order: -1; display: grid; justify-items: start; gap: 12px; }
.story-start p { margin: 0; font-size: 15px; color: #4E5B75; }
.story-clock, .story-stamp { display: flex; align-items: center; gap: 18px; }
.story-clock { display: none; }
.story-foot p { margin: 0; max-width: 21em; font-size: 15px; line-height: 1.45; color: #33405A; }
.story-dial, .story-cl { flex: none; font-family: var(--f-mono); color: #9AA8C4; background: #0C1428; border: 1px solid #22304F; border-radius: 12px; box-shadow: 0 14px 30px -18px #0C1428CC; }
.story-dial { display: grid; grid-template-columns: auto auto; gap: 5px 18px; align-items: center; padding: 9px 16px 10px 14px; font-size: 12px; }
.story .sd-k { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.story .sd-k, .story-cl .i { color: #F5A83C; }
.story .sd-now { display: inline-flex; align-items: baseline; gap: 7px; color: #E8EDF7; }
.story .sd-now i { width: 8px; height: 8px; border-radius: 50%; background: #F5A83C; align-self: center; box-shadow: 0 0 8px #F5A83C; }
.story-dial b { font-family: var(--f-display); font-size: 24px; line-height: 1; color: #fff; }
.story-dial em { font-style: normal; color: #FFC46B; }
.story .sd-pips { display: flex; gap: 5px; justify-self: end; }
.story .sd-pips i { width: 16px; height: 4px; border-radius: 2px; background: #92A6CD4C; }
.story .sd-pips i.on { background: #F5A83C; }
.story-dial small { justify-self: end; font-size: 11.5px; color: #B4C0D8; }
.story-cl { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 10px; font-size: 14px; }
.story-cl time { color: #FFC46B; font-weight: 500; }
@media (min-width: 1024px) {
  html.js:not(.still) .story-clock { display: flex; }
  html.js:not(.still) .story-stamp { display: none; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .story-line { --ty: 62px; }
  .story-h { margin-top: 12px; }
}

/* THE HERO IS A CURTAIN OVER THE STORY, the way the sheet is a curtain over the scene: the story
   waits under the hero and the hero scrolls up off it. That is components/scene-curtain, vendored as
   scene-curtain.v2.* (the sheet is the curtain, the hero its cover, the story its stage), and it
   glides the page when "See one evening" is pressed. These are its tokens, in the sheet's colours. */
.sheet {
  --scene-curtain-top: var(--masthead-h);
  --scene-curtain-shadow: 0 30px 56px -18px rgba(74, 46, 16, .45);
  --scene-curtain-tab: #FCF7EF;
  --scene-curtain-tab-mark: #A1520B;
  --scene-curtain-tab-line: #10192E2E;
  --scene-curtain-tab-shadow: 0 12px 20px -10px rgba(74, 46, 16, .55);
}

.sheet .hem::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #F2A649, #D9675E 20%, #5B4A9B 38%, #252E6B 50%, #141A44 60%, #E08850 76%, #5E86C6); }
.sheet .hem::after { width: 104px; height: 24px; margin-left: -52px; border: 1px solid #10192E29; border-top: 0; border-radius: 0 0 14px 14px; background: linear-gradient(90deg, #F2A649, #5B4A9B 50%, #5E86C6) center 10px / 34px 3px no-repeat, #F2EADC; box-shadow: 0 14px 24px -10px #000000BF; }
@media print { .sheet::before { display: none; } }

/* 1024 to 1159 wide: the phone dock is on (the rail needs 1160) while both screens are still laid out
   for a desktop, so the dock sits over the bottom 72px of each. Each screen keeps its last line clear
   of it, and the hero gives up its second phone link, which the masthead shows in this range. */
@media (min-width: 1024px) and (max-width: 1159px) {
  .hero-next { margin-bottom: calc(var(--nav-dock-h, 62px) + 22px); }
  .hero-call { display: none; }
  .story-in { padding-bottom: calc(var(--nav-dock-h, 62px) + 34px); }
}
@media (min-width: 1024px) and (max-height: 660px) {
  .hero-note { display: none; }
}

/* tablet and phone */
@media (max-width: 1023px) {
  .hero-top { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-top: 24px; padding-bottom: 12px; }
  .hero-copy h1 { font-size: clamp(32px, 8.2vw, 50px); }
  .hero-sub { font-size: 17px; }
  .story-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .story-in { padding-top: 40px; padding-bottom: 104px; row-gap: 34px; }
  .story-h { font-size: clamp(32px, 7vw, 46px); }
  .story-line { grid-template-columns: minmax(0, 1fr); }
  .story-line li::before { left: 9px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; background: linear-gradient(var(--a), var(--b)); }
  .story-line li:first-child::before { top: 12px; border-radius: 3px 3px 0 0; }
  .story-line li:last-child::before { bottom: auto; height: 22px; border-radius: 0 0 3px 3px; background: #5E86C6; }
  .story .story-gap::before { top: 0; height: auto; width: 4px; left: 10px; background: linear-gradient(#252E6B, #141A44 45%, #3D3F7A 70%, #E08850); mask: repeating-linear-gradient(#000 0 6px, transparent 6px 11px); }
  .story-line a { grid-template-rows: auto; padding: 0 0 26px 44px; }
  .story-line a::before { top: 2px; }
  .story .st-t { grid-row: auto; display: flex; align-items: baseline; gap: 10px; }
  .story .st-t small { order: 2; margin: 0; }
  .story-line time { font-size: 26px; }
  .story .st-n { grid-row: auto; margin-top: 8px; font-size: 19px; }
  .story .st-d { grid-row: auto; max-width: 30em; }
  .story-gap { grid-template-rows: auto; justify-items: start; text-align: left; row-gap: 2px; padding: 0 0 26px 44px; }
  .story .gap-k, .story .gap-d { grid-row: auto; max-width: none; }
  .story-foot { flex-direction: column; align-items: stretch; }
  .story-start { order: 0; }
}
@media (max-width: 640px) {
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-top { padding-top: 18px; }
  .hero-copy h1 { margin: 12px 0 14px; }
  .hero-call { display: none; }
  .hero-cta { margin-top: 20px; }
  .hero-note { margin-top: 16px; gap: 6px 18px; }
  .story .eyebrow { font-size: 11.5px; letter-spacing: .1em; white-space: nowrap; }
  .story-h { font-size: 35px; }
  .story-in { padding-top: 32px; padding-bottom: 112px; row-gap: 30px; }
  .story-stamp { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* stretch is what makes the start button full width on a phone: the component fills a column that
     stretches it and keeps 16px clear of the screen's edges on its own */
  .story-start { justify-items: stretch; }
  .story-foot p { font-size: 14.5px; }
}
/* "The rest of this page is one example" is 322px on one line; below 360 wide it would run 42px past its
   column and scroll the whole page sideways (it did, from 2026-10-06 until this) */
@media (max-width: 359px) {
  .story .eyebrow { white-space: normal; }
}
/* [SHEET BASELINE: END] */
/* [SHEET BASELINE: PAUSE] */

/* ---------- the hero showpiece: start ---------- */
/* An example website for the made-up heating company the rest of the page follows, drawn in CSS and
   inline SVG like every other screen here. It is a self-contained fragment: every selector is under
   .hx, every length is in em, and the stage sets what 1em is (hero.vN.css: it is the stage's Website
   item), so the whole picture scales as one object and nothing in it can reach the page around it. scripts/check-components.mjs holds it to
   that. It was chosen from three independent designs by a three-judge panel working from
   screenshots, then refined against the judges' defect list. */
.hx{position:relative;width:46em;height:33em;font-family:var(--f-body),system-ui,sans-serif;color:#0E2747;line-height:1.2;text-align:left;white-space:nowrap}
.hx *{box-sizing:border-box;margin:0;padding:0;font-style:normal}
.hx svg{display:block}
.hx small{display:block;font-size:inherit;font-weight:400}
.hx::before{content:"";position:absolute;inset:8% -2% -4% 6%;background:radial-gradient(50% 42% at 62% 70%,rgba(242,102,43,.34),transparent 70%),radial-gradient(60% 50% at 30% 30%,rgba(64,110,220,.3),transparent 72%);filter:blur(1.5em)}
.hx .b{position:absolute;left:.3em;top:.9em;width:39em;height:28.2em;border-radius:.8em;background:#fff;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px rgba(205,220,255,.6),0 0 0 .3em rgba(160,185,240,.12),0 2.2em 4em -1em rgba(0,0,0,.7)}
.hx .bc{height:2em;display:flex;align-items:center;gap:.4em;padding:0 .9em;background:#dfe6f3;border-bottom:1px solid #cbd5e8}
.hx .bc i{width:.55em;height:.55em;border-radius:50%;background:#aab6d0}
.hx .u{margin:0 auto;display:flex;align-items:center;gap:.5em;width:22em;justify-content:center;height:2.1em;border-radius:1.05em;background:#fff;color:#44557a;font:500 .62em var(--f-mono),monospace;transform:translateX(-2em)}
.hx .u svg{width:1em;height:1em;fill:#1fa866}
.hx .n{height:3.2em;display:flex;align-items:center;gap:1.15em;padding:0 1.1em 0 1.3em}
.hx .lg{flex:none;width:1.9em;height:1.9em;border-radius:.5em;background:linear-gradient(160deg,#ff8a4a,#F2662B);display:grid;place-items:center;margin-right:-.7em;box-shadow:0 .2em .5em rgba(242,102,43,.4)}
.hx .lg svg{width:1.35em;height:1.35em;fill:#fff}
.hx .nm{font:700 .84em/1 var(--f-display),sans-serif;font-stretch:112%;letter-spacing:-.01em;margin-right:auto}
.hx .nm b,.hx .nl b{color:#F2662B}
.hx .nm small{font:600 .56em var(--f-mono),monospace;letter-spacing:.2em;text-transform:uppercase;color:#F2662B;margin-bottom:.3em}
.hx .nl{font-size:.66em;font-weight:500;color:#44557a}
.hx .nt{font:600 .64em var(--f-mono),monospace;letter-spacing:-.02em}
.hx .nb{font-size:.66em;font-weight:600;color:#fff;background:#0E2747;padding:.65em 1em;border-radius:2em}
.hx .s{position:relative;height:16.6em;overflow:hidden;background:radial-gradient(58% 44% at 67% 66%,rgba(255,196,120,.98),rgba(242,102,43,.5) 40%,transparent 72%),linear-gradient(180deg,#0c2452 0,#14346a 20%,#27468a 36%,#5a4690 47%,#b25378 55%,#F2662B 63%,#ffb061 69%)}
.hx .art{position:absolute;inset:0;width:100%;height:100%}
.hx .gl{filter:blur(.6em);opacity:.9}
.hx .s::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,30,72,.9) 0,rgba(11,30,72,.74) 32%,rgba(11,30,72,.3) 48%,transparent 60%)}
.hx .sn{position:absolute;inset:0;z-index:2;-webkit-mask-image:linear-gradient(90deg,transparent 54%,#000 68%);mask-image:linear-gradient(90deg,transparent 54%,#000 68%);background-image:radial-gradient(circle,#fff 0 .07em,transparent .09em),radial-gradient(circle,rgba(255,255,255,.8) 0 .045em,transparent .065em),radial-gradient(circle,rgba(255,255,255,.55) 0 .1em,transparent .15em),radial-gradient(circle,rgba(255,255,255,.7) 0 .04em,transparent .06em);background-size:5.3em 4.7em,3.1em 3.7em,8.9em 7.3em,2.3em 2.9em;background-position:.6em 1em,2em 2.4em,4em .5em,1.2em .3em;animation:hx-snow 14s linear infinite}
.hx .t{position:absolute;z-index:3;left:1.7em;top:0;bottom:0;width:20em;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#fff}
.hx .ey{font:500 .56em var(--f-mono),monospace;letter-spacing:.16em;text-transform:uppercase;color:#ffb785;padding:.5em .9em;border:1px solid rgba(255,183,133,.45);border-radius:2em;background:rgba(242,102,43,.12)}
.hx .h{display:block;margin-top:.55em;font:700 1.8em/1.06 var(--f-display),sans-serif;font-stretch:112%;letter-spacing:-.025em}
.hx .h em{color:#ffb061}
.hx .sub{margin-top:.9em;width:21em;white-space:normal;font-size:.72em;line-height:1.45;color:#d3dcf2}
.hx .sub b{color:#fff}
.hx .ct{display:flex;gap:.6em;margin-top:1.1em;align-items:center}
.hx .c1,.hx .go{font-weight:700;color:#fff;background:linear-gradient(180deg,#ff8444,#ee5d20);border-radius:.75em;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 .45em .9em -.35em rgba(120,40,0,.75)}
.hx .c1{font-size:.8em;padding:.8em 1.4em}
.hx .c2{font-size:.8em;font-weight:600;padding:.8em 1.2em;border-radius:.75em;border:1px solid rgba(255,255,255,.7);background:rgba(11,30,72,.45)}
.hx .v{height:6.4em;display:grid;grid-template-columns:repeat(3,9.5em);gap:.6em;padding:.9em 1.3em;background:#eef2f9}
.hx .sv{display:grid;grid-template-columns:2.2em 1fr;column-gap:.55em;align-content:center;padding:0 .6em;background:#fff;border:1px solid #d3dcec;border-radius:.7em;box-shadow:0 .2em .6em rgba(14,39,71,.08)}
.hx .sv svg{grid-row:1/3;align-self:center;width:2.2em;height:2.2em;padding:.45em;border-radius:.6em;background:#fff1ea;fill:none;stroke:#F2662B;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hx .sv b{font:700 .74em var(--f-display),sans-serif;font-stretch:108%;align-self:end}
.hx .sv small{font-size:.54em;line-height:1.3;color:#62718f;margin-top:.2em}
.hx .p{position:absolute;z-index:2;right:.3em;bottom:.3em;width:12.2em;height:25.4em;padding:.42em;border-radius:2.1em;background:linear-gradient(145deg,#4a5b86,#141d38 30%,#060b18);box-shadow:0 0 0 1px rgba(190,205,245,.5),-.5em 1.6em 2.4em -1em rgba(0,0,0,.75),0 0 4em rgba(242,102,43,.2)}
.hx .ps{height:100%;border-radius:1.7em;overflow:hidden;background:#f4f6fb;display:flex;flex-direction:column}
.hx .ph{padding:.55em 1em 1em;color:#fff;background:linear-gradient(180deg,#0a1c40,#12325B 60%,#1c4580)}
.hx .st{display:flex;justify-content:center;position:relative;height:1.1em}
.hx .st b{position:absolute;left:.3em;top:.1em;font:600 .56em var(--f-mono),monospace}
.hx .st i{width:3.4em;height:.95em;border-radius:1em;background:#060b18}
.hx .st svg{position:absolute;right:.2em;top:.3em;width:1.5em;height:.5em;fill:#fff}
.hx .pl{display:flex;align-items:center;gap:.6em;margin-top:.9em;font:700 .54em var(--f-display),sans-serif;font-stretch:108%}
.hx .pl .lg{margin:0}
.hx .pt{display:block;margin-top:.45em;font:700 1.25em var(--f-display),sans-serif;font-stretch:112%;letter-spacing:-.02em}
.hx .nx{display:inline-flex;align-items:center;gap:.7em;margin-top:.9em;padding:.55em 1em;border-radius:2em;background:rgba(255,255,255,.12);font:500 .5em var(--f-mono),monospace;letter-spacing:.04em}
.hx .nx i{width:.8em;height:.8em;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 .3em rgba(61,220,132,.25)}
.hx .pb{flex:1;display:flex;flex-direction:column;padding:.8em .8em .7em}
.hx .pc{display:flex;justify-content:space-between;align-items:center;padding:.65em .75em;background:#fff;border:1px solid #e3e9f4;border-radius:.7em;box-shadow:0 .3em .8em rgba(14,39,71,.08)}
.hx .pc b{font:700 .62em var(--f-display),sans-serif;font-stretch:108%}
.hx .pc small{font-size:.45em;color:#62718f;margin-top:.3em}
.hx .pc strong,.hx .k strong{font:700 1em var(--f-display),sans-serif;color:#F2662B}
.hx .lb{margin:1.6em 0 .7em;font:600 .5em var(--f-mono),monospace;letter-spacing:.14em;text-transform:uppercase;color:#62718f}
.hx .dy,.hx .tm{display:grid;gap:.35em}
.hx .dy{grid-template-columns:repeat(4,1fr)}
.hx .dy span{padding:.45em 0 .5em;text-align:center;font:700 .86em var(--f-display),sans-serif;background:#fff;border:1px solid #e3e9f4;border-radius:.6em}
.hx .dy small{font:500 .56em var(--f-body),sans-serif;color:#62718f;margin-bottom:.2em}
.hx .tm{grid-template-columns:repeat(3,1fr)}
.hx .tm span{padding:.95em 0;text-align:center;font-size:.56em;font-weight:600;background:#fff;border:1px solid #e3e9f4;border-radius:.9em}
.hx .dy .on,.hx .tm .on{background:#0E2747;border-color:#0E2747;color:#fff}
.hx .dy .on small{color:#ffb785}
.hx .go{margin-top:auto;text-align:center;font-size:.7em;padding:1em 0}
.hx .or{margin-top:.9em;text-align:center;font-size:.52em;font-weight:500;color:#44557a}
.hx .k{position:absolute;z-index:5;left:7.2em;bottom:.7em;display:flex;align-items:center;gap:.7em;padding:.7em 1.1em .7em .75em;border-radius:.95em;background:#fff;box-shadow:0 0 0 1px rgba(14,39,71,.1),0 1.2em 2.6em -.4em rgba(0,0,0,.65);animation:hx-float 7s ease-in-out infinite}
.hx .k b{display:block;font:700 .76em var(--f-display),sans-serif;font-stretch:108%}
.hx .k small{font-size:.58em;color:#62718f;margin-top:.25em}
.hx .k strong{font-size:1.1em;margin-left:.3em;padding-left:.8em;border-left:1px solid #dbe2f0;line-height:1.7}
.hx .ok{width:1.9em;height:1.9em;border-radius:50%;background:#1fa866;display:grid;place-items:center}
.hx .ok svg{width:1.1em;height:1.1em;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes hx-snow{to{background-position:.6em 5.7em,2em 9.8em,4em 7.8em,1.2em 6.1em}}
@keyframes hx-float{50%{transform:translateY(-.2em)}}
html.still .hx .sn,html.still .hx .k{animation:none}
@media (prefers-reduced-motion:reduce){.hx .sn,.hx .k{animation:none}}
/* ---------- the hero showpiece: end ---------- */

/* [SHEET BASELINE: RESUME] */
/* [SHEET BASELINE: END] */

/* deck.vN.js sets html.hero-off whenever the sheet is off screen: its loops have nobody to run for. It names
   the two loops it is for, the Website showpiece's snow and its floating card, and not every element of the
   sheet: html.hero-off .sheet * made the browser restyle the WHOLE PAGE (every element under html, 4,749
   with the pseudo-elements) the moment it switched, 2.6 s on a 4x-throttled phone jumping from the hero to
   #prices (2026-10-09 review). Everything else in the sheet holds by itself: the stage's items with the
   stage (.is-stopped, and an item not on stage is not drawn), the orbit with its engine (.is-paused), the
   night clock with its .clock-off and the curtain, and the story has no loops. */
html.hero-off .hx :is(.sn, .k) { animation-play-state: paused !important; }

/* the hem: the bottom edge of the sheet, with the tab you would pull a blind by. It hangs BELOW the
   sheet, so it is out of sight until the sheet starts to rise and then leads the edge up. */
.hem { position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
.hem::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 92px; height: 21px; margin-left: -46px;
  border: 1px solid rgba(16, 25, 46, .18); border-top: 0; border-radius: 0 0 13px 13px;
  background: linear-gradient(#A1520B, #A1520B) center 8px / 30px 2px no-repeat, #F3EEE4;
  box-shadow: 0 16px 26px -10px rgba(0, 0, 0, .7);
}
.sheet { box-shadow: 0 32px 64px -4px rgba(0, 0, 0, .7); }

/* ---------- chapters ---------- */

/* flow-root, so the first chapter's negative margin moves the CHAPTER up under the hero and does
   not collapse through and drag this wrapper with it. The wrapper is what the navbar's scroll spy
   and the "What we build" link measure, and it has to stay where the hero ends: if it started at
   the top of the page the capsule would light on the hero and the link would scroll to the top.
   The scroll margin lands that link where the sheet has finished leaving, plus the 24px it takes
   the tab hanging under the hem to follow it behind the masthead. */
.services { position: relative; display: flow-root; scroll-margin-top: calc(var(--masthead-h) - 88px - 24px); }
.ch { --ch-pt: 8vh; position: relative; z-index: 2; padding: var(--ch-pt) 0 5vh; min-height: 96vh; }
/* THE CURTAIN'S OTHER HALF. deck.vN.js sets the variable to the sheet's height. The chapter starts
   that far up (under the sheet), its content is sticky at the place it naturally sits, and the
   runway after it is the same length again, so the content holds still for exactly as long as the
   hero takes to scroll away and the next chapter does not move at all. With the variable unset
   (JavaScript off) all three lines are zero and this is an ordinary section. */
/* the scroll margin is for /work#websites: this section's box now starts under the hero, so an old
   link to it would open on the hero. It lands where #services does. */
.ch-first { margin-top: calc(-1 * var(--pull, 0px)); scroll-margin-top: calc(var(--masthead-h) - 88px - 24px - var(--pull, 0px)); }
.ch-first > .ch-grid { position: sticky; top: calc(var(--masthead-h) + var(--ch-pt)); }
.ch-first::after { content: ""; display: block; height: var(--pull, 0px); }
/* PAPER HAS NO SCROLL. Printed, or saved as a PDF, the first chapter stayed stacked under the hero
   and simply did not appear: hero, a blank page, then chapter 02. Zeroing the variable undoes all
   three lines above at once (a stylesheet !important beats the inline value the script sets). */
@media print {
  html { --pull: 0px !important; }
  .hem { display: none; }
}
.ch-grid { display: grid; grid-template-columns: var(--copy-w) minmax(0, 1fr); column-gap: 4vw; grid-template-rows: auto 1fr; align-items: start; }
.ch-head { grid-column: 1; grid-row: 1; }
.ch-head h2 { font-size: clamp(30px, 2.9vw, 42px); margin-top: 14px; }
.ch-body { grid-column: 1; grid-row: 2; margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; color: #C9D2E3; font-size: 16.5px; line-height: 1.56; }
.ch-body h3 { font-size: 18px; color: var(--text); margin-top: 4px; }
.ch-fig {
  grid-column: 2; grid-row: 1 / span 2; margin: 0;
  position: sticky; top: calc(var(--masthead-h) + 5vh); height: calc(90vh - var(--masthead-h));
  display: grid; place-items: center; perspective: 1600px;
}
html.w3d .ch-fig { visibility: hidden; }
.uses { list-style: none; display: grid; gap: 10px; }
.uses li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.5; }
.uses li.uses-qa { padding-left: 0; margin-top: 4px; color: var(--muted); }
.uses li.uses-qa::before { display: none; }
.uses li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px; background: var(--amber); }
.uses strong { color: var(--text); font-weight: 600; }
.qa { font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.qa strong { color: var(--text); }
.more { align-self: stretch; }
.more > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 8px 14px 8px 12px; border: 1px solid var(--line2); border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--text);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "+"; font: 500 18px/1 var(--f-mono); color: var(--amber); width: 12px; }
.more[open] > summary::before { content: "\2212"; }
.more[open] > summary { margin-bottom: 10px; }
@media (min-width: 1024px) {
  .more > summary { display: none; }
  .more { margin-top: -5px; }
}
.takes { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.takes .i { color: var(--amber); margin-top: 4px; }
.ch-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 4px; }
.note { font-size: 13.5px; color: var(--muted); }
.ref-inline { font-family: var(--f-mono); color: var(--amber); font-weight: 500; }
.ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctrl-l { font-family: var(--f-mono); font-size: 13px; color: var(--muted); margin-right: 4px; }
.ask { flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line2); border-radius: 14px; background: rgba(12, 20, 40, .72); }
.ask-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-note { font-size: 13px; color: var(--muted); }
.flow-words { list-style: none; counter-reset: fw; display: grid; gap: 10px; font-size: 15.5px; }
.flow-words li { counter-increment: fw; position: relative; padding-left: 36px; }
.flow-words li::before { content: counter(fw); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--f-mono); color: var(--amber); border: 1px solid rgba(245, 168, 60, .5); }
.flow-words li:last-child::before { color: var(--ink); background: var(--amber); border-color: var(--amber); }

.ch-process { min-height: 96vh; }
.steps { list-style: none; display: grid; gap: 4px; }
.steps li { position: relative; padding: 14px 0 14px 58px; border-top: 1px dashed var(--line2); }
.steps li:first-child { border-top: 0; }
.steps .st-n { position: absolute; left: 0; top: 15px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; color: var(--amber); border: 1px solid rgba(245, 168, 60, .45); border-radius: 8px; padding: 2px 7px; }
.steps h3 { font-size: 18px; margin: 0 0 4px; }
.steps p { font-size: 15.5px; }

/* ---------- plain bands after the showcase ---------- */

.band { position: relative; z-index: 2; background: var(--ink); padding: 64px 0; border-top: 1px solid var(--line); }
.band h2 { font-size: clamp(30px, 3.2vw, 44px); margin: 14px 0 14px; }
.lede { color: var(--muted); max-width: 60ch; font-size: 17px; }

.why-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; margin-top: 34px; align-items: start; }
/* the photo column, restored 2026-10-14 now that there is a photo of Jesse to put in it. The image
   holds column 1 across both rows; the copy and the checks share column 2. The two narrower blocks
   below each re-state this, because each one rearranges the band differently. */
.why-me { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.why-copy, .why-me > .checks { grid-column: 2; }
.why-photo {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  width: 100%; height: auto; display: block; border-radius: 14px;
  /* the same paper treatment the map card gets, so the two cards in this band match */
  border: 1px solid var(--lo-line, rgba(16, 25, 46, .12));
  box-shadow: 0 1px 0 #fff inset, 0 22px 44px -26px rgba(16, 25, 46, .35), 0 2px 6px -2px rgba(16, 25, 46, .08);
}
.why-lede { font-size: 18.5px; line-height: 1.55; }
.towns { margin-top: 14px; color: var(--muted); font-size: 15.5px; }
.checks { list-style: none; display: grid; gap: 10px; margin-top: 20px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.checks .i { color: var(--ink); background: var(--amber); border-radius: 50%; padding: 3px; width: 22px; height: 22px; stroke-width: 2.6; margin-top: 1px; }
.why-side { display: grid; gap: 16px; }
.map-card { margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 14px 14px 12px; }
/* map plotted from real coordinates (deck/design/map-build.mjs); pin pulses 3x once in view (.live), never when still */
.jg-map { display: block; width: 100%; height: auto; font-family: var(--f-mono); }
.jg-map text { fill: #9FADC8; paint-order: stroke; stroke: #080E1E; stroke-width: 2.6px; stroke-linejoin: round; }
.jg-map .tn { font-size: 9.3px; }
.jg-map .tb { font-size: 10.8px; fill: #CDD8EB; }
.jg-map .g { fill: none; stroke: #92A6CD; stroke-linecap: round; stroke-linejoin: round; }
.jg-map .rd { fill: none; stroke: #8FA6D6; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .3; stroke-width: .85; }
.jg-map .rb { stroke-opacity: .46; stroke-width: 1.4; }
.jg-map .wl { fill: none; stroke: #2F6C9E; stroke-linecap: round; stroke-linejoin: round; }
.jg-map .radar { fill: none; stroke: #F5A83C; stroke-width: 1.1; opacity: .34; transform-origin: 235.8px 106.2px; }
.jg-map .radar.r2 { opacity: .17; }
html.js:not(.still) .map-card.live .radar { animation: jgm-pulse 3.4s ease-out 3; }
html.js:not(.still) .map-card.live .radar.r2 { animation-delay: 1.7s; }
@keyframes jgm-pulse { from { transform: scale(.3); opacity: .7; } to { transform: scale(2.1); opacity: 0; } }
.map-card figcaption { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.proof { border: 1px solid rgba(245, 168, 60, .35); border-radius: 16px; background: linear-gradient(160deg, rgba(245, 168, 60, .08), var(--panel) 45%); padding: 22px; }
.proof h3 { font-size: 20px; margin-bottom: 8px; }
.proof p { color: #C9D2E3; font-size: 15.5px; }
.proof-n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.proof-n div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(6, 11, 24, .5); }
.proof-n dt { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.proof-n dd { margin: 4px 0 0; font-family: var(--f-display); font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.25; }
.proof-small { font-size: 14px !important; color: var(--muted) !important; }
@media (min-width: 1024px) {
  .why-side { display: contents; }
  .proof { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 32px; align-items: center; }
  .proof > h3, .proof > p { grid-column: 1; }
  .proof-n { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}
/* tablets and small laptops (641 to 1139): the photo holds the left column across the intro and the
   checks (ruled like a spec list), and the map and the proof each run full width underneath. The
   map is held to a readable width there rather than stretched, since it is a square-ish drawing. */
@media (min-width: 641px) and (max-width: 1139px) {
  .why-grid { grid-template-columns: minmax(170px, .42fr) minmax(0, 1fr); column-gap: clamp(18px, 2.6vw, 28px); row-gap: 24px; align-items: start; }
  .why-me, .why-side { display: contents; }
  .why-photo { grid-column: 1; grid-row: 1 / span 2; }
  .why-copy { grid-column: 2; grid-row: 1; }
  .why-copy .towns { margin-top: 10px; }
  .why-me > .checks { grid-column: 2; grid-row: 2; gap: 0; margin-top: 0; }
  .why-me > .checks li { padding: 11px 2px; border-top: 1px solid var(--line); align-items: center; }
  .why-me > .checks li:last-child { border-bottom: 1px solid var(--line); }
  .why-me > .checks .i { margin-top: 0; }
  .map-card { grid-column: 1 / -1; grid-row: 3; max-width: 520px; width: 100%; justify-self: center; }
  .proof { grid-column: 1 / -1; grid-row: 4; }
}

.price-wrap { margin-top: 30px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel); }
.price { width: 100%; border-collapse: collapse; font-size: 16px; }
.price th, .price td { text-align: left; padding: 11px 20px; border-top: 1px solid var(--line); vertical-align: top; }
.price thead th { border-top: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: rgba(6, 11, 24, .5); }
.price tbody th { font-weight: 600; color: var(--text); width: 44%; }
.price td { color: #C9D2E3; }
.price-note { margin-top: 14px; color: var(--muted); font-size: 15px; }

.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; align-items: start; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: rgba(12, 20, 40, .8); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 600; font-size: 16.5px; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 13px; font: 500 22px/1 var(--f-mono); color: var(--amber); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 18px 16px; color: #C9D2E3; font-size: 15.5px; }

.order { padding-bottom: 110px; }
.order-grid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 48px; align-items: start; }
.order-head { position: sticky; top: calc(var(--masthead-h) + 32px); }
.order-who { display: flex; gap: 14px; align-items: center; margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: 15px; color: #C9D2E3; }
.mini-photo { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #FFC46B, var(--amber-deep)); color: var(--ink); font: 700 16px var(--f-display); }
.order-route { margin-top: 14px; font-size: 14px; color: var(--muted); }
html:not(.js) .order-route { display: none; }

.foot { position: relative; z-index: 2; background: var(--ink2); border-top: 1px solid var(--line); padding: 48px 0 36px; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; }
.foot-brand p { color: var(--muted); font-size: 14.5px; max-width: 40ch; margin-top: 14px; }
.foot-contact { display: grid; gap: 6px; }
.foot-contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-height: 36px; }
.foot-contact .i { color: var(--amber); }
.foot-base { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); }

/* ---------- sets and panels (shared by the 3D stage and the in-flow figures) ---------- */

.set { position: relative; width: 46em; height: 32em; flex: none; transform-style: preserve-3d; font-family: var(--f-body); line-height: 1.3; color: #1B2438; }
.world .set { position: absolute; left: -23em; top: -16em; }
.ch-fig .set { font-size: clamp(9px, .98vw, 15px); transform: rotateY(-10deg) rotateX(4deg); }
.pn {
  position: absolute; border-radius: .9em; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 2.4em 4.6em -1.6em rgba(0, 0, 0, .72), 0 1.2em 3em -1.6em rgba(77, 141, 255, .26), inset 0 0 0 1px rgba(232, 237, 247, .14);
}
.sh {
  position: absolute; inset: -10% -40%; z-index: 8; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .13) 47%, rgba(255, 255, 255, .03) 53%, transparent 60%);
  transform: translateX(-12%);
}
.shade { position: absolute; inset: 0; z-index: 7; background: #060B18; opacity: .5; pointer-events: none; }
.ex-tag {
  position: absolute; left: .2em; top: -2.4em;
  font: 500 .72em/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); padding: .5em .75em; border: 1px solid rgba(245, 168, 60, .5); border-radius: .5em; background: rgba(6, 11, 24, .82);
}
.chrome { height: 2.1em; display: flex; align-items: center; gap: .38em; padding: 0 .8em; background: #1B2233; }
.chrome i { width: .6em; height: .6em; border-radius: 50%; background: #3A4460; }
.chrome i:first-child { background: #FF6B5E; } .chrome i:nth-child(2) { background: #FFC04D; } .chrome i:nth-child(3) { background: #3FCF72; }
.url { margin-left: .8em; flex: 1; max-width: 18em; height: 1.35em; border-radius: .7em; background: #0F1524; color: #93A1BE; font-size: .68em; display: flex; align-items: center; gap: .4em; padding: 0 .8em; }
.ph-bar { display: flex; justify-content: space-between; align-items: center; padding: .7em 1.1em .3em; font-size: .72em; font-weight: 600; }
.ph-isl { width: 4.2em; height: 1.2em; border-radius: 1em; background: #0B0F1A; }
.ph-sig { display: flex; gap: .15em; align-items: flex-end; }
.ph-sig i { width: .22em; background: currentColor; border-radius: .1em; }
.ph-sig i:nth-child(1) { height: .4em; } .ph-sig i:nth-child(2) { height: .6em; } .ph-sig i:nth-child(3) { height: .8em; }

/* beat gating: only when JS drives the story. With JS off, still, or reduced motion, every beat shows. */
.m.typing { display: none; }
html.js:not(.still) .set .b1x, html.js:not(.still) .set .b2x, html.js:not(.still) .set .b3x, html.js:not(.still) .set .b4x { transition: opacity .45s ease, transform .45s ease; }
html.js:not(.still) .set:not(.b1) .b1x,
html.js:not(.still) .set:not(.b2) .b2x,
html.js:not(.still) .set:not(.b3) .b3x,
html.js:not(.still) .set:not(.b4) .b4x { opacity: 0; }
html.js:not(.still) .set:not(.b1) .b1x:not(.pn),
html.js:not(.still) .set:not(.b2) .b2x:not(.pn),
html.js:not(.still) .set:not(.b3) .b3x:not(.pn),
html.js:not(.still) .set:not(.b4) .b4x:not(.pn) { transform: translateY(.7em); }
html.js:not(.still) .set.t1 .typing.t1, html.js:not(.still) .set.t3 .typing.t3 { display: flex; }

/* ---------- set: website (6:10 PM) ---------- */

.set[data-set="web"] .browser { left: 0; top: 3em; width: 33em; height: 25em; background: #F4F7FB; border-radius: .8em; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.set[data-set="web"] .browser[data-w="tab"] { width: 23em; }
.set[data-set="web"] .browser[data-w="phone"] { width: 15em; }
.site { container-type: inline-size; height: calc(100% - 2.1em); background: #F4F7FB; color: #12325B; overflow: hidden; }
.s-nav { display: flex; align-items: center; gap: .9em; padding: .75em 1.2em; background: #fff; border-bottom: 1px solid #E3E9F2; }
.s-logo { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: .95em; color: #12325B; line-height: 1.05; }
.s-logo b { width: 1.8em; height: 1.8em; border-radius: .5em; background: #F2662B; color: #fff; display: grid; place-items: center; }
.s-logo small { display: block; font-size: .62em; font-weight: 500; color: #5B6B85; }
.s-links { display: flex; gap: 1.1em; margin-left: auto; font-size: .7em; color: #44546E; font-weight: 500; }
.s-menu { display: none; margin-left: auto; flex-direction: column; gap: .2em; }
.s-menu i { width: 1.1em; height: .14em; background: #12325B; border-radius: .1em; }
.s-cta { font-size: .7em; font-weight: 600; background: #12325B; color: #fff; padding: .55em .9em; border-radius: .5em; white-space: nowrap; }
.s-hero { display: grid; grid-template-columns: 1.3fr .9fr; gap: 1em; padding: 1.4em 1.4em 1em; background: linear-gradient(135deg, #E3ECF8 0, #F4F7FB 65%); }
.s-kick { display: block; font-size: .6em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #E0561F; }
.s-h { display: block; font-family: var(--f-display); font-size: 1.5em; line-height: 1.08; color: #0E2747; margin: .35em 0 .45em; letter-spacing: -.02em; }
.s-p { display: block; font-size: .72em; color: #4A5A74; line-height: 1.4; }
.s-btns { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .9em; }
.s-b1 { background: #F2662B; color: #fff; font-weight: 600; font-size: .7em; padding: .7em 1em; border-radius: .55em; box-shadow: 0 .5em 1em -.4em rgba(242, 102, 43, .7); }
.s-b2 { border: 1px solid #C4D0E2; color: #12325B; font-weight: 600; font-size: .7em; padding: .65em .9em; border-radius: .55em; display: flex; gap: .35em; align-items: center; background: #fff; }
.s-art { position: relative; display: grid; place-items: center; }
.thermo { position: relative; width: 8.6em; height: 8.6em; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #fff, #E6EDF7 72%); box-shadow: 0 1em 2em -1em rgba(18, 50, 91, .5), inset 0 0 0 .45em #fff; }
.t-ring { position: absolute; inset: .75em; border-radius: 50%; background: conic-gradient(from 220deg, #F2662B 0 58%, #D8E1EE 58% 78%, transparent 78%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); }
.t-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.t-in b { font-family: var(--f-display); font-size: 2em; color: #0E2747; }
.t-in small { font-size: .55em; color: #6B7A93; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.s-van { position: absolute; bottom: -.2em; right: -.2em; font-size: .56em; background: #fff; border: 1px solid #E1E8F1; padding: .45em .65em; border-radius: .5em; color: #12325B; font-weight: 600; display: flex; gap: .4em; align-items: center; box-shadow: 0 .4em 1em -.5em rgba(0, 0, 0, .3); }
.s-van .i { color: #F2662B; }
.s-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65em; padding: .9em 1.4em 1.2em; }
.s-cards span { background: #fff; border: 1px solid #E3E9F2; border-radius: .7em; padding: .7em .75em; display: grid; gap: .15em; }
.s-cards .i { color: #F2662B; font-size: 1.1em; }
.s-cards b { font-size: .74em; color: #0E2747; }
.s-cards small { font-size: .6em; color: #5B6B85; line-height: 1.3; }
@container (max-width: 26em) {
  .s-links { display: none; }
  .s-menu { display: flex; }
  .s-hero { grid-template-columns: 1fr 7em; }
  .thermo { width: 6.4em; height: 6.4em; }
  .t-in b { font-size: 1.5em; }
  .s-van { display: none; }
}
@container (max-width: 17em) {
  .s-cta { display: none; }
  .s-hero { grid-template-columns: 1fr; padding: 1.1em 1em .8em; }
  .s-art { display: none; }
  .s-h { font-size: 1.3em; }
  .s-cards { grid-template-columns: 1fr; padding: .7em 1em; gap: .45em; }
  .s-cards span { grid-template-columns: auto 1fr; column-gap: .5em; padding: .5em .6em; }
  .s-cards .i { grid-row: span 2; }
}

.set[data-set="web"] .phone { left: 32.2em; top: 6em; width: 13.4em; height: 25em; border-radius: 2em; background: #fff; border: .42em solid #1B2233; color: #12325B; }
.bk { padding: .3em .95em; display: flex; flex-direction: column; gap: .42em; }
.bk-top { font-size: .64em; font-weight: 700; color: #E0561F; display: flex; gap: .3em; align-items: center; }
.bk-h { font-family: var(--f-display); font-size: 1.12em; color: #0E2747; }
.bk-l { font-size: .54em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6B7A93; margin-top: .25em; }
.bk-opt { font-size: .66em; border: 1px solid #DCE3EE; border-radius: .6em; padding: .55em .7em; display: flex; justify-content: space-between; color: #44546E; }
.bk-opt em { font-style: normal; font-weight: 700; color: #0E2747; }
.bk-opt.on { border-color: #F2662B; background: #FFF3EC; color: #0E2747; box-shadow: inset 0 0 0 1px #F2662B; }
.bk-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; }
.bk-days span { font-size: .54em; text-align: center; border: 1px solid #DCE3EE; border-radius: .6em; padding: .4em 0; color: #6B7A93; }
.bk-days b { display: block; font-size: 1.55em; color: #0E2747; }
.bk-days .on { background: #12325B; color: #C9D5E6; border-color: #12325B; }
.bk-days .on b { color: #fff; }
.bk-times { display: flex; gap: .3em; flex-wrap: wrap; }
.bk-times span { font-size: .58em; border: 1px solid #DCE3EE; border-radius: 2em; padding: .35em .6em; color: #44546E; }
.bk-times .on { background: #12325B; color: #fff; border-color: #12325B; }
.bk-go { margin-top: .2em; background: #F2662B; color: #fff; text-align: center; font-weight: 600; font-size: .68em; padding: .7em; border-radius: .7em; transition: opacity .3s ease; }
.bk-ok { font-size: .58em; color: #17693F; background: #E4F6EC; border-radius: .6em; padding: .5em .6em; display: flex; gap: .35em; align-items: center; font-weight: 600; }
.ph-call { position: absolute; left: .8em; right: .8em; bottom: .7em; background: #12325B; color: #fff; font-size: .64em; font-weight: 600; border-radius: .9em; padding: .7em; display: flex; justify-content: center; gap: .4em; align-items: center; }
html.js:not(.still) .set:not(.b1) .on.s1,
html.js:not(.still) .set:not(.b2) .on.s2,
html.js:not(.still) .set:not(.b3) .on.s3 { background: #fff !important; color: #44546E !important; border-color: #DCE3EE !important; box-shadow: none !important; }
html.js:not(.still) .set:not(.b2) .on.s2 b { color: #0E2747 !important; }
html.js:not(.still) .set:not(.b3) .bk-go.s3 { opacity: .4; background: #F2662B !important; color: #fff !important; }
.set[data-set="web"] .toast {
  left: 15.5em; top: -.6em; width: 19.5em; padding: .8em .9em; display: flex; gap: .7em; align-items: center;
  background: rgba(255, 255, 255, .98); border-radius: 1em; color: #12325B;
  box-shadow: 0 0 0 1px rgba(245, 168, 60, .8), 0 1.4em 2.8em -1.2em rgba(245, 168, 60, .55), 0 2em 4em -1.5em rgba(0, 0, 0, .7);
}
.tt-ic { width: 2.3em; height: 2.3em; border-radius: .7em; background: #FFF1E6; color: #E0561F; display: grid; place-items: center; flex: none; }
.tt-tx b { display: block; font-size: .8em; color: #0E2747; }
.tt-tx small { display: block; font-size: .62em; color: #5B6B85; }
.toast time { margin-left: auto; font: 500 .62em var(--f-mono); color: #C4541C; align-self: flex-start; white-space: nowrap; }

/* ---------- set: AI assistant (9:14 PM) ---------- */

.set[data-set="ai"] .ghost { left: 0; top: 2em; width: 30em; height: 21em; background: #F4F7FB; }
.g-mini .s-hero { grid-template-columns: minmax(0, 1fr); padding-right: 11em; }

.set[data-set="ai"] .chat { left: 9.5em; top: -.5em; width: 20em; height: 33em; background: #fff; border-radius: 1.3em; display: flex; flex-direction: column; color: #1B2438; }
.cw-h { display: flex; align-items: center; gap: .65em; padding: .95em 1em; background: #12325B; color: #fff; }
.av { width: 2.4em; height: 2.4em; border-radius: 50%; background: #F2662B; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 .2em rgba(255, 255, 255, .15); }
.av .i { font-size: 1.15em; }
.cw-who b { display: block; font-size: .86em; }
.cw-who small { display: flex; gap: .4em; align-items: center; font-size: .62em; color: #B9C6DA; }
.cw-who small i { width: .5em; height: .5em; border-radius: 50%; background: #3FCF72; }
.cw-x { margin-left: auto; width: .9em; height: .14em; background: #B9C6DA; border-radius: .1em; }
.cw-log { flex: 1; min-height: 0; padding: .8em .9em; display: flex; flex-direction: column; justify-content: flex-end; gap: .5em; overflow: hidden; background: #F4F6FA; }
.cw-day { align-self: center; font-size: .56em; color: #8A97AD; text-transform: uppercase; letter-spacing: .1em; }
.m { display: flex; flex-direction: column; max-width: 88%; gap: .2em; flex: none; }
.m span { font-size: .74em; line-height: 1.42; padding: .6em .8em; border-radius: 1.05em; }
.m.u { align-self: flex-end; align-items: flex-end; }
.m.u span { background: #12325B; color: #fff; border-bottom-right-radius: .3em; }
.m.a { align-self: flex-start; }
.m.a span { background: #fff; color: #1B2438; border: 1px solid #E1E7F0; border-bottom-left-radius: .3em; box-shadow: 0 .25em .7em -.35em rgba(18, 50, 91, .3); }
.m time { font-size: .52em; color: #8A97AD; font-family: var(--f-mono); }
.m.typing { flex-direction: row; gap: .28em; padding: .7em .85em; background: #fff; border: 1px solid #E1E7F0; border-radius: 1em; align-self: flex-start; }
.m.typing i { width: .42em; height: .42em; border-radius: 50%; background: #9AA8C0; animation: tdot 1s ease-in-out infinite; }
.m.typing i:nth-child(2) { animation-delay: .15s; } .m.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-.15em); } }
.m.sys { align-self: center; max-width: none; flex-direction: row; align-items: center; gap: .4em; font-size: .64em; font-weight: 600; color: #7A4A06; background: #FFF1D9; border: 1px solid #F5C77A; padding: .45em .8em; border-radius: 2em; }
.cw-quick { display: flex; gap: .35em; padding: .55em .8em 0; flex-wrap: wrap; background: #F4F6FA; }
.cw-quick span { font-size: .58em; border: 1px solid #C4D0E2; color: #12325B; border-radius: 2em; padding: .35em .65em; background: #fff; font-weight: 600; }
.cw-in { display: flex; align-items: center; gap: .5em; padding: .65em .8em .8em; background: #F4F6FA; }
.cw-in span { flex: 1; font-size: .66em; color: #8A97AD; background: #fff; border: 1px solid #DCE3EE; border-radius: 2em; padding: .6em .85em; }
.cw-in b { width: 2.1em; height: 2.1em; border-radius: 50%; background: #F2662B; color: #fff; display: grid; place-items: center; font-size: .92em; }

.set[data-set="ai"] .office { left: 31em; top: 4.5em; width: 15.5em; height: 22em; padding: .95em; color: var(--text); background: linear-gradient(170deg, rgba(24, 37, 68, .97), rgba(11, 18, 36, .97)); }
.of-h { display: flex; align-items: center; gap: .45em; font-size: .8em; margin-bottom: .6em; }
.of-h .i { color: var(--amber); }
.of-h small { margin-left: auto; font-size: .8em; color: var(--muted); }
.of-r { display: flex; gap: .55em; align-items: flex-start; padding: .5em .55em; border-radius: .6em; font-size: .7em; border: 1px solid transparent; }
.of-r i { width: .55em; height: .55em; border-radius: 50%; background: #5B6B85; margin-top: .45em; flex: none; }
.of-r i.c { background: var(--cyan); }
.of-r i.v { background: #9D8BFF; }
.of-r b { display: block; font-weight: 600; color: var(--text); }
.of-r small { display: block; font-size: .86em; color: var(--muted); }
.of-r em { margin-left: auto; font-style: normal; font-size: .76em; color: var(--ink); background: var(--amber); border-radius: .4em; padding: .1em .45em; font-weight: 700; }
.of-r.hot { border-color: rgba(245, 168, 60, .55); background: rgba(245, 168, 60, .1); }
.of-r.hot i { background: var(--amber); box-shadow: 0 0 .6em var(--amber); }
.of-r.mute { opacity: .5; }
.of-draft { margin-top: .55em; padding: .7em; border-radius: .7em; background: rgba(6, 11, 24, .6); border: 1px dashed var(--line2); }
.of-draft small { font-family: var(--f-mono); font-size: .56em; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.of-draft p { font-size: .64em; color: #D6DDEA; margin: .35em 0 .55em; line-height: 1.42; }
.of-b { display: flex; gap: .4em; }
.of-b em, .of-b span { font-size: .6em; padding: .4em .75em; border-radius: .45em; }
.of-b em { font-style: normal; background: var(--amber); color: var(--ink); font-weight: 700; }
.of-b span { border: 1px solid var(--line2); color: var(--text); }

/* ---------- set: automation (10:22 PM) ---------- */

.set[data-set="auto"] .board {
  left: 0; top: 2.5em; width: 46em; height: 27em; border-radius: 1.1em; transform-origin: 50% 100%;
  background: radial-gradient(rgba(143, 166, 214, .2) 1px, transparent 1.3px) 0 0 / 1.4em 1.4em, linear-gradient(170deg, #0D1630, #0A1122);
  box-shadow: 0 2.4em 4.6em -1.6em rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(95, 225, 255, .22);
}
.wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
/* only traveled routes: the trail draws along its path as the run goes (JS dash offset); JS off, reduced or Pause show it finished */
.wires path { fill: none; }
.wires .trail { stroke: var(--cyan); stroke-width: .17; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.wires .pulse { display: none; stroke: #FFE2A8; stroke-width: .5; stroke-linecap: round; stroke-dasharray: .03 1.2; }
.wires [data-route="yes"] { display: none; }
.set.yes .wires .trail[data-route="yes"] { display: inline; }
.set.yes .wires .trail[data-route="no"] { display: none; }
html.js:not(.still) .set:not(.yes) .wires .pulse[data-route="no"], html.js:not(.still) .set.yes .wires .pulse[data-route="yes"] { display: inline; }
.bd-tag { position: absolute; left: 1.4em; top: 1.1em; font: 500 .62em var(--f-mono); color: var(--cyan); letter-spacing: .12em; text-transform: uppercase; display: flex; gap: .45em; align-items: center; }
.nd {
  position: absolute; border-radius: .8em; padding: .7em .8em .7em 3em; color: var(--text);
  background: rgba(16, 26, 50, .97); border: 1px solid rgba(143, 166, 214, .28);
  box-shadow: 0 .8em 1.8em -1em rgba(0, 0, 0, .85); transition: border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.nd b { display: block; font-size: .78em; }
.nd small { display: block; font-size: .6em; color: var(--muted); line-height: 1.35; margin-top: .15em; }
.nd-i { position: absolute; left: .7em; top: .75em; width: 1.8em; height: 1.8em; border-radius: .55em; display: grid; place-items: center; background: rgba(95, 225, 255, .12); color: var(--cyan); font-size: .9em; }
.nd.lit { border-color: rgba(95, 225, 255, .7); box-shadow: 0 0 0 1px rgba(95, 225, 255, .25), 0 0 1.6em -.2em rgba(95, 225, 255, .5); }
.nd.ok .nd-i { background: rgba(245, 168, 60, .15); color: var(--amber); }
.nd.ok.lit { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(245, 168, 60, .4), 0 0 1.8em -.2em rgba(245, 168, 60, .6); }
.nd.dec { padding: .75em .9em; text-align: center; border-style: dashed; }
.nd.dec b { font-size: .86em; }
.n1 { left: 1em; top: 11.7em; width: 9.5em; }
.n2 { left: 12.5em; top: 11.25em; width: 12.5em; }
.n3 { left: 27.5em; top: 11.55em; width: 7em; }
.n4 { left: 36.5em; top: 4.95em; width: 8.8em; }
.n5 { left: 36.5em; top: 18.6em; width: 8.8em; }
.n6 { left: 22em; top: 18.6em; width: 11em; }
.set.yes .n5, .set.yes .n6 { opacity: .4; }
.lbl-yes, .lbl-no { position: absolute; font: 600 .56em var(--f-mono); color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; }
.lbl-yes { left: 84.5%; top: 36%; }
.lbl-no { left: 84.5%; top: 59.5%; }
.lbl-yes, .lbl-no { transition: opacity .3s ease; }
/* labels fade in as their branch is reached, and leave at once (a replay or a branch switch never leaves one hanging) */
html.js:not(.still) .set[data-set="auto"]:not(.lb-y) .lbl-yes, html.js:not(.still) .set[data-set="auto"]:not(.lb-n) .lbl-no, .set.yes .lbl-no { opacity: 0; transition: none; }
.set[data-set="auto"] .sms { left: 14em; top: -3.8em; width: 13.2em; height: 16.4em; border-radius: 1.8em; padding: 1.1em .75em; text-align: center; color: #fff; background: linear-gradient(170deg, #2C3656, #141A2D); border: .38em solid #0B0F1A; }
.sms-time { display: block; font-family: var(--f-display); font-size: 2.5em; font-weight: 500; line-height: 1; }
.sms-date { display: block; font-size: .6em; color: #B9C6DA; margin: .35em 0 .85em; }
.sms-n { text-align: left; background: rgba(255, 255, 255, .15); border-radius: .9em; padding: .55em .7em; margin-bottom: .45em; }
.sms-app { display: flex; gap: .35em; align-items: center; font-size: .5em; color: #C9D5E6; text-transform: uppercase; letter-spacing: .06em; }
.sms-n b { display: block; font-size: .68em; margin-top: .2em; }
.sms-n p { font-size: .62em; line-height: 1.38; color: #E8EDF7; }
.set.yes .only-no { display: none !important; }
.only-yes { display: none !important; }
.set.yes .only-yes { display: flex !important; }
.set[data-set="auto"] .log { left: .6em; top: 22.6em; width: 16.5em; padding: .8em .95em; color: var(--text); background: rgba(9, 15, 30, .96); border: 1px solid rgba(95, 225, 255, .28); }
.log-h { display: block; font: 500 .58em var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: .35em; }
.lg { display: flex; gap: .6em; font-size: .64em; padding: .28em 0; color: #C9D2E3; border-top: 1px solid rgba(143, 166, 214, .12); }
.lg time { font-family: var(--f-mono); color: var(--muted); flex: none; width: 5.4em; }
.lg.hot { color: var(--amber-hot); }
.lg.hot time { color: var(--amber); }

/* ---------- set: backend (7:45 AM) ---------- */

.set[data-set="back"] .db { left: 1em; top: 4em; width: 44em; height: 27em; background: linear-gradient(160deg, rgba(17, 28, 54, .98), rgba(8, 13, 28, .98)); box-shadow: 0 2.4em 4.6em -1.6em rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(143, 166, 214, .3); }
.db-h { position: absolute; left: 1.4em; top: 1.1em; font: 500 .6em var(--f-mono); color: var(--steel); letter-spacing: .12em; text-transform: uppercase; display: flex; gap: .45em; align-items: center; }
.keys { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.keys path { fill: none; stroke: rgba(95, 225, 255, .6); stroke-width: .1; stroke-dasharray: .4 .28; }
.tb { position: absolute; width: 9.4em; border-radius: .6em; background: #0E1830; border: 1px solid rgba(143, 166, 214, .38); overflow: hidden; font-family: var(--f-mono); }
.tb b { display: block; font-size: .64em; padding: .5em .75em; background: rgba(143, 166, 214, .16); color: var(--text); font-weight: 500; }
.tb span { display: flex; gap: .45em; align-items: center; font-size: .58em; color: #AAB7CF; padding: .32em .75em; border-top: 1px solid rgba(143, 166, 214, .12); }
.tb .k { width: .6em; height: .6em; border-radius: 50%; background: var(--amber); }
.tb .f { width: .6em; height: .6em; border-radius: .12em; border: 1px solid var(--cyan); }
/* the four tables run in one row along the lower half of the db, the part the lifted dashboard uncovers: equipment, customers, jobs, invoices */
.tb.t2 { left: 1.5em; top: 15.4em; }
.tb.t1 { left: 12.3em; top: 15.4em; }
.tb.t3 { left: 23.1em; top: 15.4em; }
.tb.t4 { left: 33.9em; top: 15.4em; }
.db-b { position: absolute; bottom: 1.3em; font-size: .64em; display: flex; gap: .45em; align-items: center; padding: .5em .85em; border-radius: 2em; border: 1px solid rgba(143, 166, 214, .38); color: var(--text); background: rgba(6, 11, 24, .6); }
.db-b .i { color: var(--steel); }
.db-b.b1 { left: 3%; }
.db-b.b2 { left: 33%; }
.set[data-set="back"] .dash { left: 3em; top: 1.5em; width: 38em; height: 25em; background: #F6F7FB; color: #1B2438; display: flex; transform-origin: 50% 100%; }
.ds-side { width: 3.4em; background: #12325B; display: flex; flex-direction: column; align-items: center; gap: 1em; padding-top: 1em; flex: none; }
.ds-logo { width: 2em; height: 2em; border-radius: .6em; background: #F2662B; color: #fff; display: grid; place-items: center; }
.ds-side i { width: 1.3em; height: 1.3em; border-radius: .35em; background: rgba(255, 255, 255, .18); }
.ds-side i.on { background: rgba(255, 255, 255, .75); }
.ds-main { flex: 1; padding: 1.05em 1.3em; display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.ds-top b { display: block; font-family: var(--f-display); font-size: 1.12em; color: #0E2747; }
.ds-top small { font-size: .64em; color: #6B7A93; }
.ds-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.ds-kpi span { background: #fff; border: 1px solid #E3E8F1; border-radius: .7em; padding: .55em .8em; }
.ds-kpi small { display: block; font-size: .58em; color: #6B7A93; font-weight: 500; }
.ds-kpi b { font-family: var(--f-display); font-size: 1.55em; color: #0E2747; line-height: 1.1; }
.ds-kpi .k-am { border-color: #F5C77A; background: #FFF8EC; }
.ds-kpi .k-am b { color: #B86A00; }
.ds-jobs { background: #fff; border: 1px solid #E3E8F1; border-radius: .7em; overflow: hidden; }
.jr { display: grid; grid-template-columns: 3em 1.7fr 1fr 1.4fr; gap: .5em; align-items: center; padding: .5em .8em; font-size: .62em; border-top: 1px solid #EEF1F6; color: #33415A; }
.jr i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jh { background: #F3F5F9; font-weight: 600; color: #6B7A93; border-top: 0; text-transform: uppercase; font-size: .54em; letter-spacing: .06em; }
.jr em { font-style: normal; font-weight: 600; padding: .22em .6em; border-radius: 2em; justify-self: start; font-size: .92em; white-space: nowrap; }
.st-a { background: #FFF1D9; color: #8A5200; }
.st-g { background: #E4F6EC; color: #17693F; }
.st-v { background: #ECEBFF; color: #4B3FC9; }
.ds-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.ds-chart small { font-size: .58em; color: #6B7A93; }
.bars { display: flex; gap: .35em; align-items: flex-end; height: 2.4em; }
.bars i { width: 1.1em; height: calc(var(--h) * 100%); background: #12325B; border-radius: .25em .25em 0 0; }
.bars i.nx { background: transparent; border: 1px dashed #F2662B; border-bottom: 0; }
.bars i:nth-child(1) { --h: .45; } .bars i:nth-child(2) { --h: .6; } .bars i:nth-child(3) { --h: .5; }
.bars i:nth-child(4) { --h: .75; } .bars i:nth-child(5) { --h: .65; } .bars i:nth-child(6) { --h: .8; }
.set[data-set="back"] .tech { left: 36.5em; top: 9.5em; width: 10.5em; height: 19.5em; border-radius: 1.6em; background: #fff; border: .38em solid #1B2233; color: #1B2438; padding: 0 .7em; }
.tc-h { display: block; font-family: var(--f-display); font-size: .95em; margin: .4em 0 .5em; color: #0E2747; }
.tc-j { display: grid; grid-template-columns: auto 1fr; column-gap: .5em; padding: .5em; border: 1px solid #E3E8F1; border-radius: .6em; margin-bottom: .4em; line-height: 1.25; }
.tc-j time { grid-row: span 2; font: 600 .6em var(--f-mono); color: #E0561F; }
.tc-j b { font-size: .66em; }
.tc-j small { font-size: .54em; color: #6B7A93; }
.tc-j.on { border-color: #F2662B; background: #FFF6F0; }
.tc-go { display: block; text-align: center; background: #12325B; color: #fff; font-size: .62em; font-weight: 600; padding: .65em; border-radius: .6em; margin-top: .6em; }
.lay-l { position: absolute; font: 600 .8em var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); padding: .25em .6em; border-left: 2px solid var(--steel); background: rgba(6, 11, 24, .7); }
.lay-l.l1 { right: 4%; top: -5%; }
.lay-l.l2 { left: 4%; bottom: -2%; color: var(--cyan); border-color: var(--cyan); }

/* ---------- set: integrations (7:46 AM) ---------- */

.lines2d { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.lines2d path { fill: none; stroke: rgba(95, 225, 255, .5); stroke-width: .12; stroke-dasharray: .5 .35; }
html.js .lines2d { display: none; }
.set[data-set="int"] .hub { --x: 0; --y: 0; --z: 0; }
.tile.tp1 { --x: -15.5; --y: -10.5; --z: 3; }
.tile.tp2 { --x: 15; --y: -11; --z: -3; }
.tile.tp3 { --x: 17.5; --y: 1; --z: 5; }
.tile.tp4 { --x: 12; --y: 11.5; --z: -2; }
.tile.tp5 { --x: -14; --y: 11; --z: 5; }
.tile.tp6 { --x: -18; --y: 0; --z: -4; }
.set[data-set="int"] .hub, .set[data-set="int"] .tile { left: 50%; top: 50%; transform: translate(-50%, -50%) translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)); }
/* THE GLOW IS A FILTER, NOT A SHADOW. A box-shadow with a 3em blur on this element was clipped to
   its own paint box: an amber SQUARE with hard edges around a circle, washing over the label
   inside it. drop-shadow follows the element's alpha, so the glow is round, and its outset is part
   of the layer's bounds so nothing cuts it off. 11em rather than 10em, with the label a step
   larger, because the name sits at about 13.6px on a plane the camera holds at an angle and more
   pixels is the only real answer to that. */
.hub { width: 11em; height: 11em; border-radius: 50% !important; display: grid; place-items: center; text-align: center; color: var(--text); background: radial-gradient(circle at 40% 32%, rgba(44, 60, 98, .97), rgba(10, 17, 34, .97)); box-shadow: 0 0 0 1px rgba(245, 168, 60, .55), 0 2em 4em -1.5em rgba(0, 0, 0, .8) !important; transition: box-shadow .4s ease, filter .4s ease; }
.hub.flash { box-shadow: 0 0 0 2px var(--amber), 0 2em 4em -1.5em rgba(0, 0, 0, .8) !important; filter: drop-shadow(0 0 1.1em rgba(245, 168, 60, .6)); }
html.still .hub { transition: none; }
.hub-ring { position: absolute; inset: .7em; border-radius: 50%; border: 1px dashed rgba(245, 168, 60, .5); }
.hub-in .i { font-size: 1.5em; color: var(--amber); }
.hub-in b { display: block; font-family: var(--f-display); font-size: .92em; margin-top: .2em; line-height: 1.15; }
.hub-in small { font: 500 .6em var(--f-mono); color: var(--amber-hot); }
.tile { width: 10.5em; padding: .7em .8em .7em 3em; border-radius: .9em; color: var(--text); background: linear-gradient(160deg, rgba(28, 42, 75, .97), rgba(12, 20, 40, .97)); box-shadow: 0 1.4em 3em -1.4em rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(143, 166, 214, .34) !important; }
.ti { position: absolute; left: .7em; top: .8em; width: 1.8em; height: 1.8em; border-radius: .55em; background: rgba(95, 225, 255, .12); color: var(--cyan); display: grid; place-items: center; }
.tile b { display: block; font-size: .78em; }
.tile small { display: block; font-size: .6em; color: var(--muted); }
.set[data-set="int"] .evlog { left: 50%; top: 0; width: 19em; padding: .8em .95em; color: var(--text); background: rgba(9, 15, 30, .96); transform: translate(-50%, -1.6em) translateZ(6em); box-shadow: 0 2em 4em -1.5em rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(245, 168, 60, .38); }
.ln { position: absolute; left: 50%; top: 50%; height: .16em; margin-top: -.08em; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(95, 225, 255, .1), rgba(95, 225, 255, .8)); border-radius: .1em; }
.ln i { position: absolute; top: 50%; left: 0; width: .75em; height: .75em; margin: -.375em 0 0 -.375em; border-radius: 50%; background: #BFF4FF; box-shadow: 0 0 .7em .15em var(--cyan); }
html.still .ln i, html:not(.js) .ln i { display: none; }
/* THE ORBS TRAVEL ON THE COMPOSITOR. They used to be moved by the frame loop, which goes idle a couple
   of seconds after the scroll stops, so a reader who paused on 05 watched them freeze mid-line. Each
   line carries its own length (--len) and a phase (--off, a sixth of a run apart), set once when the
   lines are made. They run only while 05 can be seen: deck.vN.js adds .orbs to the set then. */
.ln i { animation: int-orb 3.1s linear infinite; animation-delay: calc(var(--off, 0) * -3.1s); animation-play-state: paused; }
.set[data-set="int"].orbs .ln i { animation-play-state: running; }
@keyframes int-orb { from { transform: translateX(0); } to { transform: translateX(var(--len, 0em)); } }

/* ---------- set: your business (process) ---------- */

/* the visitor's own work order as a plate: frame, seal, the real reference number, three stops */
.set[data-set="you"] .yours {
  left: 4.5em; top: 3.2em; width: 37em; height: 25.6em; border-radius: 1.2em; padding: 1.25em 1.9em 1.5em;
  display: flex; flex-direction: column; color: var(--text);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(245, 168, 60, .12), transparent 60%),
    radial-gradient(circle, rgba(143, 166, 214, .09) 1px, transparent 1.3px) 0 0 / 1.1em 1.1em,
    linear-gradient(165deg, #121C36, #0A1122 70%);
  box-shadow: inset 0 0 0 1px rgba(245, 168, 60, .7), inset 0 0 0 .55em #0C1529, inset 0 0 0 calc(.55em + 1px) rgba(245, 168, 60, .22),
    0 0 4.4em -.6em rgba(245, 168, 60, .32), 0 2.4em 4.6em -1.6em rgba(0, 0, 0, .8);
}
.yr-rail { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .35em .1em .7em; border-bottom: 1px solid rgba(245, 168, 60, .22); font: 500 .64em var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.yr-k { display: flex; align-items: center; gap: .6em; color: var(--amber); }
.yr-k svg { width: 1.7em; height: 1.7em; fill: url(#jg-mark-g); }
.yr-main { display: flex; align-items: center; gap: 1.4em; padding: 1.1em 0 .9em; }
.yr-who { flex: 1; min-width: 0; }
.yr-who small { display: block; font: 500 .62em var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.yr-h { display: block; font-family: var(--f-display); font-size: 2.15em; line-height: 1.1; letter-spacing: -.01em; margin: .22em 0 .3em; padding-bottom: .22em; border-bottom: 1px solid rgba(232, 237, 247, .38); }
.yr-p { font-size: .84em; line-height: 1.4; color: #B6C1D6; max-width: 23em; }
.yr-seal { position: relative; flex: none; width: 7.4em; height: 7.4em; display: grid; place-items: center; transform: rotate(-8deg); }
.yr-seal > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.yr-seal path { fill: none; stroke: none; }
.yr-seal text { fill: var(--amber); font: 500 8.6px var(--f-mono); letter-spacing: .5px; }
.yr-seal::before, .yr-seal::after { content: ""; position: absolute; border-radius: 50%; }
.yr-seal::before { inset: 0; border: 1px solid rgba(245, 168, 60, .6); }
.yr-seal::after { inset: 19%; border: 1px dashed rgba(245, 168, 60, .45); }
.yr-seal b { width: 3em; height: 3em; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(245, 168, 60, .2), rgba(245, 168, 60, .05)); }
.yr-seal b svg { width: 1.9em; height: 1.9em; fill: url(#jg-mark-g); transform: rotate(8deg); }
.yr-ticket {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 1.1em; row-gap: .2em;
  margin: 0 -1.9em; padding: .95em 1.9em; border-top: 1px dashed rgba(143, 166, 214, .35); border-bottom: 1px dashed rgba(143, 166, 214, .35);
  background: rgba(6, 11, 24, .45); font-family: var(--f-mono);
}
.yr-ticket::before, .yr-ticket::after { content: ""; position: absolute; top: 50%; width: 1.3em; height: 1.3em; margin-top: -.65em; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(245, 168, 60, .35); }
.yr-ticket::before { left: -.65em; }
.yr-ticket::after { right: -.65em; }
.yr-ticket small { grid-column: 1 / -1; font-size: .62em; color: var(--muted); text-transform: uppercase; letter-spacing: .16em; }
.yr-ticket b { font-size: 1.55em; color: var(--amber-hot); letter-spacing: .05em; font-weight: 500; white-space: nowrap; }
.yr-ticket em { justify-self: end; font-style: normal; font-size: .66em; color: #B6C1D6; display: flex; gap: .5em; align-items: center; white-space: nowrap; }
.yr-ticket em i { width: .6em; height: .6em; border-radius: 50%; background: var(--amber); box-shadow: 0 0 .6em var(--amber); }
.yr-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: auto; padding-top: .8em; }
.yr-steps li { position: relative; display: grid; justify-items: start; row-gap: .35em; font: 500 .9em var(--f-body); color: #B6C1D6; }
.yr-steps li:not(:last-child)::after { content: ""; position: absolute; left: 2.7em; right: .7em; top: 1em; height: 1px; background: rgba(143, 166, 214, .45); }
.yr-steps li.on::after { background: linear-gradient(90deg, var(--amber), rgba(143, 166, 214, .45)); }
.yr-steps i { width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: 50%; font: 500 .8em var(--f-mono); font-style: normal; color: var(--muted); background: #0C1529; border: 1px solid rgba(143, 166, 214, .5); }
.yr-steps li.on { color: var(--text); }
.yr-steps li.on i { color: #131A2C; background: var(--amber); border-color: var(--amber); box-shadow: 0 0 1.2em -.1em rgba(245, 168, 60, .7); }

/* ---------- composed resting poses (JS off, reduced motion, paused). JS writes over these while it drives motion. ---------- */

.set[data-set="web"] .phone { transform: translateZ(5em); }
.set[data-set="web"] .toast { transform: translateZ(8em); }
.set[data-set="ai"] .ghost { transform: translateZ(-6em); }
.set[data-set="ai"] .chat { transform: translateZ(4em); }
.set[data-set="ai"] .office { transform: translateZ(1em) rotateY(-10deg); }
.set[data-set="auto"] .board { transform: rotateX(12deg); }
.set[data-set="auto"] .sms { transform: translateZ(7em); }
.set[data-set="auto"] .log { transform: translateZ(5em); }
.set[data-set="back"] .db { transform: translate3d(0, 1.5em, -10.5em); }
.set[data-set="back"] .dash { transform: translate3d(0, -6em, 4em) rotateX(24deg); }
.set[data-set="back"] .tech { transform: translateZ(8em) rotateY(-12deg); }

/* ---------- tablets and phones: one column, figures in flow ---------- */

@media (max-width: 1023px) {
  :root { --copy-w: 100%; }
  .ch { --ch-pt: 30px; min-height: 0; padding: var(--ch-pt) 0 12px; }
  .clockline { padding: 5px 10px; margin-bottom: 12px; }
  .ch-head h2 { margin-top: 10px; }
  .def { margin-top: 12px; }
  .ch-body { gap: 12px; margin-top: 14px; }
  .uses { gap: 12px; }
  .ask-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ask-row .chip-btn { justify-content: center; text-align: center; white-space: normal; line-height: 1.25; padding: 8px 10px; font-size: 14px; }
  .ask { padding: 14px; align-self: stretch; width: 100%; min-width: 0; }
  .ch-process { min-height: 0; }
  .ch-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .ch-fig { grid-column: 1; grid-row: 2; position: relative; top: auto; height: auto; margin: 12px calc(-1 * var(--pad)) 0; padding: 2.2em 0 .4em; overflow: hidden; display: block; perspective: 1100px; }
  .ch-fig .set { font-size: 10.4px; margin-left: calc(50% - 23em + var(--mx, 0em)); transform: rotateY(-8deg) rotateX(4deg); }
  .set[data-set="web"] { --mx: -4.6em; }
  .set[data-set="ai"] { --mx: -3.4em; }
  .set[data-set="auto"] { --mx: 1em; }
  .set[data-set="back"] { --mx: -1.2em; }
  .set[data-set="int"] { --mx: 0em; }
  .set[data-set="you"] { --mx: 0em; }
  .ch-body { grid-row: 3; margin-top: 18px; }
  .ch-head h2 { font-size: clamp(26px, 7vw, 36px); }
  .band { padding: 40px 0; }
  .foot { padding: 36px 0 28px; }
  .foot-base { margin-top: 20px; }
  .price-wrap { margin-top: 18px; }
  .faq-grid { margin-top: 16px; gap: 8px; }
  .band h2 { margin: 10px 0; }
  .band .lede, .order-head .lede { font-size: 16px; }
  .order-who { padding: 10px 12px; font-size: 14.5px; }
  .price-note { margin-top: 10px; }
  .why-grid { margin-top: 22px; }
  .why-lede { font-size: 16.5px; }
  .checks { gap: 8px; margin-top: 14px; }
  .checks li { font-size: 15px; }
  .proof { padding: 16px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .order-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .order-head { position: static; }
  .order-route { display: none; }
  .order-who { margin-top: 14px; }
  .faq summary { padding: 12px 44px 12px 16px; font-size: 15.5px; }
  .faq summary::after { top: 11px; }
  .def { font-size: 16px; }
  .price tr { padding: 10px 16px; }
  .price th { font-size: 15px; }
  .ctrl .ctrl-l { display: none; }
  .ctrl .chip-btn { padding: 8px 13px; font-size: 14px; }
  /* the work order plate is the one set that has to be read on a tablet or phone: its own scale (about 355 px wide at 390,
     425 px at 768), every string at 9 px or more, the seal without its ring text, and a shorter plate so the chapter does not grow */
  .ch-fig .set[data-set="you"] { font-size: min(11.5px, calc((100vw - 22px) / 38.2)); margin-top: -3.2em; margin-bottom: -9.4em; }
  .set[data-set="you"] .yours { top: 3.2em; height: 19.2em; padding: .95em 1.5em 1em; }
  .yr-rail { font-size: 1.04em; letter-spacing: .04em; padding: 0 0 .5em; }
  .yr-k { gap: .45em; }
  .yr-k svg { width: 1.45em; height: 1.45em; }
  .yr-main { gap: .9em; padding: .6em 0 .6em; }
  .yr-who small { font-size: 1.04em; letter-spacing: .1em; }
  .yr-h { font-size: 2.15em; margin: .1em 0 .2em; padding-bottom: .14em; }
  .yr-p { font-size: 1.04em; line-height: 1.3; max-width: none; }
  .yr-seal { width: 5.6em; height: 5.6em; }
  .yr-seal > svg { display: none; }
  .yr-seal::after { inset: 13%; }
  .yr-seal b { width: 3.3em; height: 3.3em; }
  .yr-seal b svg { width: 2em; height: 2em; }
  .yr-ticket { margin: 0 -1.5em; padding: .5em 1.5em .55em; column-gap: .7em; row-gap: 0; }
  .yr-ticket small { font-size: 1.04em; letter-spacing: .1em; }
  .yr-ticket b { font-size: 1.6em; letter-spacing: .01em; }
  .yr-ticket em { font-size: 1.04em; gap: .4em; }
  .yr-steps { padding-top: .55em; }
  .yr-steps li { font-size: 1.04em; display: flex; align-items: center; gap: .45em; }
  .yr-steps i { width: 2.05em; height: 2.05em; font-size: 1em; }
  .yr-steps li:not(:last-child)::after { position: static; flex: 1; margin-right: .7em; }
  .ch-fig .ex-tag { left: calc(1.6em - var(--mx, 0em)); }
  .flow-words { gap: 8px; }
  .steps li { padding: 11px 0 11px 54px; }
  .steps .st-n { top: 12px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .ch-fig .set { font-size: 7.2px; }
  .ch:not(#websites):not(#process) .ch-cta .note { display: none; }
  .ch-body { line-height: 1.52; }
  .ch-fig .set { font-size: 7.2px; }
  .def { font-size: 17px; }
  .proof-n { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
  .proof-n div { padding: 8px; }
  .proof-n dt { font-size: 10px; letter-spacing: .04em; }
  .proof-n dd { font-size: 13.5px; }
  .price thead { display: none; }
  .price, .price tbody { display: block; }
  .price tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); gap: 2px 12px; padding: 9px 14px; border-top: 1px solid var(--line); }
  .price tr:first-child { border-top: 0; }
  .price th, .price td { display: block; width: auto !important; padding: 0; border: 0; }
  .price th { grid-column: 1 / -1; font-size: 15.5px; }
  .price td { font-size: 14.5px; }
  .price td::before { content: attr(data-l); display: block; color: var(--muted); font: 11px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
  .clockline { font-size: 13px; }
  .ch-fig { padding-top: 24px; }
  .why-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 16px; }
  /* phones: the photo sits beside the opening line, then the checks run the full width under both */
  .why-me { grid-template-columns: 108px minmax(0, 1fr); gap: 14px 14px; }
  .why-copy { display: contents; }
  .why-photo { grid-column: 1; grid-row: 1; border-radius: 12px; }
  .why-lede { grid-column: 2; grid-row: 1; }
  .why-me > .checks { grid-column: 1 / -1; }
  .why-side { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .why-me .towns { display: none; }
  .map-card { padding: 10px 10px 6px; border-radius: 14px; }
  .map-card figcaption { margin-top: 4px; font-size: 13px; }
  .foot { padding: 28px 0 22px; }
  .foot-grid { gap: 14px; }
  .foot-brand p { margin-top: 10px; }
  .foot-base { margin-top: 14px; padding-top: 12px; }
  .ch-fig .set[data-set="you"] { font-size: min(9.6px, calc((100vw - 22px) / 38.2)); --mx: 1.2em; }
  .ch-process .ch-fig { padding-top: 16px; }
  .why .eyebrow { letter-spacing: .1em; }
}
/* a narrow map (small phones, the tablet column) drops its two corner boxes and the road shields, and every label it keeps
   grows so it reads at 8 px or more */
.map-card { container-type: inline-size; }
@container (max-width: 310px) {
  .jg-map .mbox, .jg-map .msh { display: none; }
  .jg-map .tn { font-size: 11px; }
  .jg-map .tb { font-size: 12px; }
  .jg-map .tbay { font-size: 10px; }
  .jg-map .tjg, .jg-map .tlake { font-size: 10px; }
  .jg-map .tjg { letter-spacing: -.3px; }
}

.world .set > .ex-tag, .world .set > .lay-l, .world .set > .lines2d, .world .set > .lbl-yes { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* ---------- forced colors ---------- */

@media (forced-colors: active) {
  /* the start button is not here: components/button-dawn draws its own outlined capsule in forced colours */
  .pn, .tile, .hub, .nd, .clock, .proof, .price-wrap, .faq details, .hx .b, .hx .p, .hx .k { border: 1px solid CanvasText; }
  .sh, .shade, .floor { display: none; }
  .hero, .story { background: Canvas; }
  .sheet { border-bottom: 2px solid CanvasText; }
  .clock-pips i.on { background: Highlight; }
  .mark { fill: CanvasText; filter: none; }
  .btn, .chip-btn, .motion-btn { border: 1px solid ButtonText; }
  .chip-btn[aria-pressed="true"], .motion-btn[aria-pressed="true"] { border: 3px solid Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* [MASTHEAD, OBSIDIAN: START] chosen 2026-10-07 from the hero examples; the same look, generalised,
   is components/nav-capsule/themes/obsidian.css */
/* masthead: a bar of polished obsidian. Lit from above with a curved reflection, two fixed
   reflected streaks, an oil-sheen hairline along the bottom edge, and section links set like
   gold-leaf lettering on a shop window. One slow glint crosses the glass now and then. */

.masthead {
  --nav-text: #FFF1D6;
  --nav-muted: #E7C27E;
  --nav-line: rgba(255, 255, 255, .12);
  --nav-ink: #050608;
  --mast-gold: #EBC27A;
  /* clip sideways only: the travelling glint must not leave the bar, but the forced-colours
     current-section outline and the focus rings are allowed past its top and bottom edges */
  overflow-x: clip; overflow-y: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background:
    /* the curved reflection of a light overhead, the way a polished dome of glass catches it */
    radial-gradient(150% 130% at 28% -82%, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05) 52%, rgba(255, 255, 255, 0) 70%),
    /* two reflected streaks, fixed in place like a window caught in the glass */
    linear-gradient(114deg, rgba(255, 255, 255, 0) 0 2.5%, rgba(255, 255, 255, .045) 2.5% 4.8%, rgba(255, 255, 255, 0) 4.8% 5.6%, rgba(255, 255, 255, .03) 5.6% 6.2%, rgba(255, 255, 255, 0) 6.2%),
    linear-gradient(114deg, rgba(255, 255, 255, 0) 0 95%, rgba(255, 255, 255, .035) 95% 97.2%, rgba(255, 255, 255, 0) 97.2%),
    /* the body: lit at the top, deepest at the bottom */
    linear-gradient(180deg, #1A1B21 0, #0D0E12 46%, #060709 78%, #030304 100%)
    #08090B;
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 2px 0 rgba(255, 255, 255, .04);
}
/* content rides above the glint */
.masthead .masthead-in { position: relative; z-index: 1; }

/* the oil-sheen edge: a 1 px iridescent hairline with a faint wash of the same colour above it */
.masthead::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  pointer-events: none;
  background: linear-gradient(90deg, #F5A83C 0, #FF7FB2 18%, #A493FF 38%, #4FCFEA 56%, #A493FF 74%, #FF7FB2 88%, #F5A83C 100%);
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, .8) 0 1px, rgba(0, 0, 0, .1) 1px, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, .8) 0 1px, rgba(0, 0, 0, .1) 1px, rgba(0, 0, 0, 0) 100%);
}

/* the one glint: a slanted band of light that crosses the glass slowly, then rests a long while */
.masthead::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 110px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .07) 40%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .07) 60%, rgba(255, 255, 255, 0));
  transform: translateX(-200px) skewX(-24deg);
}
/* It crosses in 3.6 s and rests for 20.4. As one endless 24 s animation it was a running animation for the
   whole rest too, off the glass, and the page serviced it on every frame it drew. deck.vN.js now starts one
   run every 24 s (.is-glinting, removed when it ends), so between runs no animation exists. Without
   JavaScript the endless one stays. html.still and reduced motion turn both off (below). */
html:not(.js) .masthead::after { animation: mast-glint 24s cubic-bezier(.4, 0, .3, 1) 1.6s infinite; }
.masthead.is-glinting::after { animation: mast-glint-run 3.6s cubic-bezier(.4, 0, .3, 1); }
@keyframes mast-glint {
  0% { transform: translateX(-200px) skewX(-24deg); }
  15%, 100% { transform: translateX(calc(100vw + 80px)) skewX(-24deg); }
}
@keyframes mast-glint-run {
  0% { transform: translateX(-200px) skewX(-24deg); }
  100% { transform: translateX(calc(100vw + 80px)) skewX(-24deg); }
}

/* ---------- brand ---------- */
.masthead .brand-name small { color: #9AA1B2; }

/* ---------- section links: gold-leaf capitals, the house's wide face ---------- */
.masthead .nav-bar a {
  font-family: var(--f-display); font-stretch: 106%; font-weight: 600;
  font-size: 11.5px; line-height: 23px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mast-gold);
  /* gilded: pale at the top of the capitals, deep amber at the foot, a little light thrown back */
  background: linear-gradient(180deg, #FFF0CF 0 41%, #F6D08B 46%, #E5A84E 55%, #CF8A2E 59%, #EDBE72 63% 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.masthead .nav-bar a:hover, .masthead .nav-bar a:focus-visible {
  background: linear-gradient(180deg, #FFFFFF 0 41%, #FFE7B4 47%, #FFC66C 56%, #F2A43F 60%, #FFD999 64% 100%);
  -webkit-background-clip: text; background-clip: text;
}
/* when the capsule lands, the word drops its gold and takes the capsule's own colour */
.masthead .nav-bar a.is-lit {
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--nav-paint-lit, var(--nav-text));
  text-shadow: 0 0 10px color-mix(in srgb, var(--nav-paint-lit, #FFC46B) 60%, transparent);
}
/* focus: the page's own 3 px amber ring, drawn as a pill that stands clear OUTSIDE the capsule */
.masthead .nav-bar a:focus-visible { outline: none; }
.masthead .nav-bar a::before {
  content: ""; position: absolute; top: 7px; bottom: 7px; left: -15px; right: -15px;
  border: 3px solid #F5A83C; border-radius: 999px; opacity: 0; pointer-events: none;
}
.masthead .nav-bar a:focus-visible::before { opacity: 1; }
/* a gilded rule that draws out under the word on hover */
.masthead .nav-bar a::after {
  content: ""; position: absolute; left: 0; right: .06em; bottom: 18px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(245, 168, 60, 0), #FFD58C 22%, #FFD58C 78%, rgba(245, 168, 60, 0));
  transform: scaleX(0); opacity: 0; pointer-events: none;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}
.masthead .nav-bar a:hover::after, .masthead .nav-bar a:focus-visible::after { transform: scaleX(1); opacity: 1; }
.masthead .nav-bar a.is-lit::after { opacity: 0; }
/* the rail's tightest band: five labels must still fit beside the brand at 1160 px */
@media (min-width: 1160px) and (max-width: 1239px) {
  .masthead .nav-bar a { font-size: 11px; font-stretch: 100%; letter-spacing: .04em; }
}

/* ---------- Pause motion: a small pebble of the same glass ---------- */
.masthead .motion-btn {
  color: #E9ECF2; font-weight: 500; border-color: rgba(255, 255, 255, .15);
  background:
    radial-gradient(120% 150% at 40% -60%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, 0) 80%),
    linear-gradient(180deg, #16171C, #08090B);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(0, 0, 0, .6);
  transition: color .16s ease, border-color .16s ease;
}
.masthead .motion-btn .i { color: #F5A83C; }
.masthead .motion-btn:hover { color: #fff; border-color: rgba(245, 168, 60, .55); }
.masthead .motion-btn[aria-pressed="true"] { color: #FFC46B; border-color: rgba(245, 168, 60, .6); }

/* ---------- phone ---------- */
.masthead .masthead-call { color: #F6F1E7; font-weight: 500; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.masthead .masthead-call .i {
  /* a 26 px coin that takes no more room than the bare glyph did, so the bar's fit is unchanged */
  width: 26px; height: 26px; padding: 5px; margin: 0 -1px 0 -6px; border-radius: 50%; color: #F5A83C;
  background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 65%), #0B0C0F;
  box-shadow: inset 0 0 0 1px rgba(245, 168, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .2s ease;
}
.masthead .masthead-call:hover { color: #FFD58C; }
.masthead .masthead-call:hover .i { transform: rotate(-12deg); }

/* ---------- Start a work order: the same flat amber button as the hero's, plus a glint on hover ---------- */
.masthead .btn-amber { position: relative; overflow: hidden; isolation: isolate; }
.masthead .btn-amber::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-20deg);
}
.masthead .btn-amber:hover::after, .masthead .btn-amber:focus-visible::after { animation: mast-shine .7s ease-out 1; }
@keyframes mast-shine {
  from { transform: translateX(-130%) skewX(-20deg); }
  to { transform: translateX(290%) skewX(-20deg); }
}

/* ---------- small screens: the Call chip is a pebble like Pause, with a bare handset inside ---------- */
@media (max-width: 640px) {
  .masthead .masthead-call {
    border-color: rgba(255, 255, 255, .15); border-radius: 999px;
    background: radial-gradient(120% 150% at 40% -60%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, 0) 80%), linear-gradient(180deg, #16171C, #08090B);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(0, 0, 0, .6);
    gap: 6px; padding: 0 14px 0 12px;
  }
  .masthead .masthead-call .i { width: 1em; height: 1em; padding: 0; margin: 0; background: none; box-shadow: none; border-radius: 0; }
}
@media (max-width: 359px) {
  .masthead .masthead-call { padding: 0 13px; }
}

/* ---------- forced colours: system colours only, no gilding, no glass ---------- */
@media (forced-colors: active) {
  .masthead { background: Canvas; border-bottom-color: CanvasText; }
  .masthead::before, .masthead::after, .masthead .btn-amber::after { display: none; }
  .masthead .nav-bar a, .masthead .nav-bar a:hover, .masthead .nav-bar a:focus-visible, .masthead .nav-bar a.is-lit {
    background: none; -webkit-text-fill-color: currentColor; text-shadow: none;
  }
  .masthead .motion-btn .i { color: ButtonText; }
  .masthead .masthead-call .i { color: LinkText; background: none; box-shadow: none; }
}

/* ---------- motion off: the glint rests off the glass, and the bar is complete without it ---------- */
html.still .masthead::after, html.still .masthead.is-glinting::after, html.still .masthead .btn-amber:hover::after, html.still .masthead .btn-amber:focus-visible::after { animation: none; }
html.still .masthead .nav-bar a::after, html.still .masthead .masthead-call .i { transition: none; }
html.still .masthead .masthead-call:hover .i { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .masthead::after, .masthead.is-glinting::after, .masthead .btn-amber:hover::after, .masthead .btn-amber:focus-visible::after { animation: none; }
  .masthead .nav-bar a::after, .masthead .masthead-call .i { transition: none; }
  .masthead .masthead-call:hover .i { transform: none; }
}
/* [MASTHEAD, OBSIDIAN: END] */

/* [LOW PAGE, LIGHT: START] chosen 2026-10-07: only the walkthrough stays dark */
/* LOW PAGE, LIGHT. Everything after the dark walkthrough: why, prices, faq, the work order and the
   footer, on the same ivory and sand as the hero and story screens. The walkthrough ends at night;
   the why band opens on the dawn (the story timeline's last stop is 7:46 AM). */

/* ---------- shared ---------- */

.band {
  --lo-ink: #10192E; --lo-text: #14213D; --lo-sub: #3E4A63; --lo-acc: #A1520B;
  --lo-line: rgba(16, 25, 46, .12); --lo-line2: rgba(16, 25, 46, .2);
  --lo-card: #FFFFFF;
  color: var(--lo-text);
  border-top: 1px solid rgba(161, 82, 11, .14);
}
.band h2 { color: var(--lo-ink); font-weight: 700; letter-spacing: -.022em; }
.band h3 { color: var(--lo-ink); }
.band .eyebrow { color: var(--lo-acc); font-weight: 500; }
.band .eyebrow::before { background: var(--lo-acc); opacity: 1; }
.band .lede { color: var(--lo-sub); }
/* the ticket's own links follow --form-link, so the band rule stays out of the form */
.band a:not(.form-ticket a) { color: var(--lo-ink); text-decoration-color: rgba(161, 82, 11, .7); text-decoration-thickness: 1.5px; }
.band a:not(.form-ticket a):hover { color: var(--lo-acc); }
.band :focus-visible { outline-color: var(--lo-ink); }
.band ::selection { background: rgba(245, 168, 60, .38); color: var(--lo-ink); }

/* tones alternate: ivory, sand, ivory, sand, and the footer on ivory again */
.why, .faq { background: linear-gradient(#FFFDF9, #FCF7EF); }
.prices, .order { background: linear-gradient(#F6F0E6, #F2EADC); }

/* Obsidian under the masthead. The masthead is translucent; over the hero and story it sits on the
   sheet's sticky ink strip, so it reads obsidian. Each light band carries the same strip as a fixed
   layer, clipped to the band itself (clip-path clips fixed descendants), so the strip only ever
   exists where that band is passing under the masthead. */
.band, .foot { clip-path: inset(0 0 -2px 0); }
.band::before, .foot::before {
  content: ""; position: fixed; z-index: 6; left: 0; right: 0; top: 0; height: var(--masthead-h, 64px);
  background: #060B18; pointer-events: none;
}

/* ---------- the seam: night to dawn ---------- */

/* The sky is painted into the band's own background, so the horizon cuts the sun in half: a solid
   ink lead-in (the walkthrough's own #060B18), the timeline's dusk colours, a peach haze, then the
   ivory page. Moving parts are driven by scroll, not by a clock: as the band comes up the screen the
   stars fade and the sun's glow opens. Nothing loops, so nothing runs while the band is away. */
.why {
  --sky: 230px; --lead: 52px;
  padding-top: calc(var(--sky) + 66px);
  border-top: 0;
  clip-path: inset(-120px 0 0 0); overflow-x: clip;
  scroll-margin-top: calc(76px - var(--sky));
  view-timeline: --lo-dawn block;
  background:
    linear-gradient(90deg, transparent 6%, rgba(255, 249, 236, .95) 72%, transparent 96%) 0 calc(var(--sky) - 1px) / 100% 1px no-repeat,
    radial-gradient(circle at 72% 100%, #FFFDF5 0, #FFF2CF 19px, #FFDB94 30px, #F9C26C 32px, rgba(249, 194, 108, 0) 33.5px) 0 0 / 100% var(--sky) no-repeat,
    linear-gradient(180deg, #060B18 0, #060B18 var(--lead), #0C1335 32%, #1C2360 44%, #463F7C 55%, #7C5180 64%, #C26A6A 73%, #E2864F 80%, #EF9F5E 86%, #F5BC85 93%, #FBDDBB 100%) 0 0 / 100% var(--sky) no-repeat,
    linear-gradient(#FFFDF9, #FCF7EF) 0 var(--sky) / 100% calc(100% - var(--sky)) no-repeat;
}
/* the sun's glow, centred on the disc and spilling a little warmth onto the page under it */
.why::after {
  content: ""; position: absolute; z-index: -1; left: 72%; top: var(--sky); width: 900px; height: 440px; margin: -220px 0 0 -450px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 238, 196, .62), rgba(255, 214, 150, .4) 16%, rgba(248, 180, 98, .16) 42%, rgba(245, 168, 60, .05) 66%, transparent);
}
/* the last stars, in two sets so they do not fade as one sheet */
.why > .wrap::before, .why .why-grid::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--lead) - 8px); height: 92px; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}
.why > .wrap::before {
  background:
    radial-gradient(1.1px 1.1px at 9% 50px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 14% 6px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 23% 66px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 28% 12px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 37% 26px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 51% 18px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 55% 40px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 63% 62px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 67% 28px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 86% 20px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 94% 12px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 49% 80px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 12% 78px, rgba(255,255,255,.6), transparent);
  opacity: .8;
}
.why .why-grid::before {
  background:
    radial-gradient(1.7px 1.7px at 4% 16px, rgba(255,255,255,.95), transparent),
    radial-gradient(1.7px 1.7px at 19% 34px, rgba(255,255,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 33% 44px, rgba(255,255,255,.9), transparent),
    radial-gradient(1.7px 1.7px at 42% 4px, rgba(255,255,255,.95), transparent),
    radial-gradient(1.5px 1.5px at 46% 56px, rgba(255,255,255,.85), transparent),
    radial-gradient(1.7px 1.7px at 60% 10px, rgba(255,255,255,.95), transparent),
    radial-gradient(1.5px 1.5px at 78% 6px, rgba(255,255,255,.9), transparent),
    radial-gradient(1.7px 1.7px at 82% 40px, rgba(255,255,255,.95), transparent),
    radial-gradient(1.5px 1.5px at 90% 58px, rgba(255,255,255,.85), transparent),
    radial-gradient(1.7px 1.7px at 97% 34px, rgba(255,255,255,.95), transparent),
    radial-gradient(1.5px 1.5px at 31% 76px, rgba(255,255,255,.8), transparent);
}
/* the walkthrough's pinned stage ends on a straight edge: ink rises over its last few pixels, on
   the stage side only (the chapter text on the left is never covered) */
@media (min-width: 1024px) {
  .why > .wrap::after {
    content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: -96px; height: 96px; pointer-events: none;
    background: linear-gradient(rgba(6, 11, 24, 0), rgba(6, 11, 24, .78) 55%, #060B18);
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--copy-r, 46%) - 10px), #000 calc(var(--copy-r, 46%) + 90px));
    mask-image: linear-gradient(90deg, transparent calc(var(--copy-r, 46%) - 10px), #000 calc(var(--copy-r, 46%) + 90px));
  }
}
@supports (animation-timeline: view()) {
  html:not(.still) .why::after { animation: low-glow linear both; animation-timeline: --lo-dawn; animation-range: entry 0% entry 100%; }
  html:not(.still) .why > .wrap::before { animation: low-fade-a linear both; animation-timeline: --lo-dawn; animation-range: entry 0% entry 80%; }
  html:not(.still) .why .why-grid::before { animation: low-fade-b linear both; animation-timeline: --lo-dawn; animation-range: entry 20% entry 100%; }
}
/* A scroll-driven animation is still a running animation: the page samples all three on every frame it
   draws, the hero's included, though they only change while the band comes up the screen. deck.vN.js puts
   .why-near on the band from a screen before it until a screen after it; away from it they hold (held, a
   scroll-driven animation picks the scroll up again where it is when it runs). Without JavaScript they run. */
html.js .why:not(.why-near)::after, html.js .why:not(.why-near) > .wrap::before, html.js .why:not(.why-near) .why-grid::before { animation-play-state: paused; }
@keyframes low-glow { from { opacity: .25; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes low-fade-a { from { opacity: 1; } to { opacity: 0; } }
@keyframes low-fade-b { from { opacity: 1; } to { opacity: .3; } }

/* ---------- why ---------- */

.why .why-lede { color: var(--lo-ink); }
.why .towns { color: var(--lo-sub); }
.why .checks .i { color: var(--lo-ink); background: #F5A83C; box-shadow: 0 0 0 3px rgba(245, 168, 60, .18); }
.why .checks li { color: var(--lo-text); }
@media (min-width: 641px) and (max-width: 1139px) {
  .why .why-me > .checks li, .why .why-me > .checks li:last-child { border-color: var(--lo-line); }
}

/* the map, redrawn on paper */
.map-card {
  background: var(--lo-card); border: 1px solid var(--lo-line);
  box-shadow: 0 1px 0 #fff inset, 0 22px 44px -26px rgba(16, 25, 46, .35), 0 2px 6px -2px rgba(16, 25, 46, .08);
}
.map-card figcaption { color: var(--lo-sub); }
.jg-map > g > rect:first-of-type { fill: #F6F1E7; }
.jg-map #jgm-u stop { stop-color: #F5A83C; }
.jg-map #jgm-u stop:first-child { stop-opacity: .14; }
.jg-map #jgm-g circle { fill: #8A6B45; opacity: .12; }
.jg-map #jgm-w stop:first-child { stop-color: #BFD8E8; }
.jg-map #jgm-w stop:last-child { stop-color: #D8E8F1; }
.jg-map path[fill="url(#jgm-w)"] { stroke: #6D9CBF; stroke-opacity: .9; }
.jg-map .g { stroke: #8A7A62; }
.jg-map .rd { stroke: #6B7486; stroke-opacity: .42; stroke-width: .9; }
.jg-map .rb { stroke: #6B7486; stroke-opacity: .6; stroke-width: 1.5; }
.jg-map .wl { stroke: #6D9CBF; }
.jg-map text { fill: #3E4A63; stroke: #F6F1E7; stroke-width: 3px; }
.jg-map .tb { fill: #10192E; font-weight: 600; }
.jg-map g[fill="#93A9D8"] { fill: #3E4A63; stroke: #F6F1E7; }
.jg-map text[fill="#F2F5FC"] { fill: #10192E; font-weight: 600; }
.jg-map .tjg { fill: #A1520B; font-weight: 600; }
.jg-map .tlake, .jg-map .tbay { fill: #2E5F86; stroke: #D3E4EF; }
.jg-map g[stroke="none"] > path { fill: #3E4A63; }
.jg-map .mbox rect { fill: #FFFFFF; fill-opacity: .94; stroke: #10192E; stroke-opacity: .16; }
/* the scale box was drawn flush with the frame's right edge; pull it inside to match the left box */
.jg-map .mbox:has(g) { transform: translateX(-8px); }
.jg-map .mbox text { fill: #3E4A63; stroke: none; }
.jg-map .mbox text[fill="#DDE5F3"] { fill: #10192E; }
.jg-map .mbox g rect:first-child { fill: #3E4A63; }
.jg-map .mbox g rect:nth-child(2) { stroke: #3E4A63; }
.jg-map g.msh { fill: #FFFFFF; stroke: #6B7486; stroke-opacity: .7; }
.jg-map text.msh { fill: #3E4A63; stroke: none; }
.jg-map circle[fill="#F5A83C"] { stroke: #FFFFFF; }
.jg-map circle[stroke="#F5A83C"] { stroke: #E08A1E; stroke-opacity: .7; }
.jg-map .radar { stroke: #E08A1E; }
.jg-map > rect:last-child { stroke: #10192E; stroke-opacity: .14; }

/* "This page is the sample" */
.why .proof {
  background: linear-gradient(160deg, #FFF6E8, #FFFFFF 46%); border: 1px solid rgba(161, 82, 11, .28);
  box-shadow: 0 22px 44px -28px rgba(161, 82, 11, .45);
}
.why .proof p { color: var(--lo-sub); }
.why .proof-small { color: var(--lo-sub) !important; }
/* the three boxes share two rows (subgrid), so every label starts on one line and every value
   starts on the next, whatever the labels wrap to */
.why .proof-n { grid-auto-rows: auto; }
.why .proof-n div { grid-row: span 2; grid-template-rows: subgrid; row-gap: 4px; align-content: start; }
.why .proof-n div:not(.js-only), html.js .why .proof-n div.js-only { display: grid !important; }
.why .proof-n div { background: #FFFFFF; border: 1px solid var(--lo-line); box-shadow: 0 1px 0 rgba(16, 25, 46, .04); position: relative; }
.why .proof-n div::before { content: ""; position: absolute; left: 12px; right: 12px; top: -1px; height: 2px; border-radius: 2px; background: #F5A83C; }
.why .proof-n dt { color: var(--lo-acc); letter-spacing: .06em; line-height: 1.35; }
.why .proof-n dd { color: var(--lo-ink); margin-top: 0; }

/* ---------- prices ---------- */

.prices .price-wrap {
  background: var(--lo-card); border: 1px solid var(--lo-line);
  box-shadow: 0 26px 50px -30px rgba(16, 25, 46, .4), 0 2px 6px -2px rgba(16, 25, 46, .08);
}
.prices .price th, .prices .price td, .prices .price tr { border-top-color: var(--lo-line); }
/* the header row: ink on warm paper, underlined in amber, like the heading of a printed rate card */
.prices .price thead th { background: #FBF5EA; color: var(--lo-ink); font-weight: 600; border-bottom: 2px solid #F5A83C; padding-top: 13px; padding-bottom: 12px; }
.prices .price tbody th { color: var(--lo-ink); }
.prices .price td { color: var(--lo-sub); }
.prices .price td:nth-child(2) { color: var(--lo-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.prices .price tbody tr:nth-child(even) { background: #FDFAF4; }
.prices .price tbody tr:hover { background: #FFF3E0; }
.prices .price td::before { color: #56607A; }
.prices .price-note { color: var(--lo-sub); }

/* ---------- faq ---------- */

.faq details {
  background: var(--lo-card); border: 1px solid var(--lo-line);
  box-shadow: 0 10px 24px -20px rgba(16, 25, 46, .4);
  transition: border-color .2s ease;
}
.faq details:hover { border-color: var(--lo-line2); }
.faq details[open] { border-color: rgba(161, 82, 11, .45); box-shadow: inset 3px 0 0 #F5A83C, 0 14px 30px -22px rgba(161, 82, 11, .5); }
.faq summary { color: var(--lo-ink); border-radius: 14px; }
.faq summary::after { content: "+"; color: var(--lo-acc); transition: transform .25s ease; }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq details p { color: var(--lo-sub); }
/* the focus ring goes round the whole card, on its own corners */
.faq summary:focus-visible { outline: none; }
.faq details:has(summary:focus-visible) { outline: 2px solid var(--lo-ink); outline-offset: 3px; }

/* ---------- the work order ---------- */

.order {
  --form-ink: #10192E;
  --form-amber: #A1520B;
  --form-text: #10192E;
  --form-muted: #56607A;
  --form-panel: #FFFFFF;
  --form-line: rgba(16, 25, 46, .16);
  --form-field: #FFFDF9;
  --form-field-line: #8A94A8;
  --form-error: #B42318;
  --form-focus: #10192E;
  --form-link: #8A4508;
  --form-notch: #F4EDE1;
  --form-scheme: light;
  /* the ticket's shadow is tuned for a dark page and greys the sand; the select arrow is an image */
  --form-shadow: 0 1px 0 #FFFFFF inset, 0 34px 56px -38px rgba(84, 52, 14, .4), 0 4px 12px -8px rgba(84, 52, 14, .18);
  --form-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2356607A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* the button and the tick keep the brand amber fill; text-sized amber stays the darker #A1520B */
.order .form-foot, .order .form-tick, .order .form-success-actions { --form-amber: #F5A83C; }
/* checked service chips: an amber box under the dark tick */
.order .form-chip { --form-amber: #EE9A2C; }
/* a focused field goes ink, so focus (ink) and error (red) never look alike */
.order .form-ticket :is(input, select, textarea) { --form-amber: #10192E; }
.order .order-who { background: var(--lo-card); border-color: var(--lo-line); color: var(--lo-sub); box-shadow: 0 16px 34px -26px rgba(16, 25, 46, .45); }
.order .order-who strong { color: var(--lo-ink); white-space: nowrap; }
.order .order-route { color: var(--lo-sub); }

/* ---------- footer ---------- */

.foot { background: #FFFDF9; border-top: 1px solid rgba(161, 82, 11, .18); color: #14213D; }
.foot .brand { color: #10192E; }
.foot .brand-name small { color: #56607A; }
.foot .foot-brand p { color: #3E4A63; }
.foot .foot-contact a { color: #10192E; border-radius: 8px; }
.foot .foot-contact a:hover { color: #A1520B; }
.foot .foot-contact .i { color: #A1520B; }
.foot .foot-base { border-top-color: rgba(16, 25, 46, .12); color: #56607A; }
.foot :focus-visible { outline-color: #10192E; outline-offset: 4px; border-radius: 8px; }
/* the footer closes the day: the story's dusk-to-dawn line, once more, along its top edge */
.foot > .wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #F2A649, #D9675E 20%, #5B4A9B 38%, #252E6B 50%, #141A44 60%, #E08850 76%, #5E86C6); }

/* ---------- motion off ---------- */

html.still .why::after, html.still .why > .wrap::before, html.still .why .why-grid::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .why::after, .why > .wrap::before, .why .why-grid::before { animation: none !important; }
  .faq summary::after, .faq details { transition: none; }
}

@media (max-width: 640px) {
  .why { --sky: 168px; --lead: 40px; padding-top: calc(var(--sky) + 44px); scroll-margin-top: calc(60px - var(--sky)); }
  .why::after { width: 560px; height: 300px; margin: -150px 0 0 -280px; }
  .why > .wrap::before, .why .why-grid::before { height: 70px; }
}
/* [LOW PAGE, LIGHT: END] */