/* ---- tokens.css ---- */
/* Design tokens: brand colours (locked), roles, type, motion. */
@font-face { font-family: 'Bricolage'; src: url('/v5/fonts/bricolage-latin-var.woff2') format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/v5/fonts/instrument-serif-italic-latin.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
  /* brand (permanent) */
  --paper: #FAFAF7; --mint: #EAF4EC; --forest: #1E7A46; --navy: #1F3A5F; --orange: #F08A2B; --sky: #3BA9DA;
  /* roles */
  --dusk-900: #0B1726; --dusk-800: #10213A; --dusk-700: #172C49;
  --forest-900: #0E3F23; --forest-700: #16613A; --mint-2: #D9EBDD; --mint-ink: #2C6B45;
  --ink: var(--navy); --ink-soft: #4A5F7A; --line: rgba(31, 58, 95, .14); --line-light: rgba(250, 250, 247, .16);
  --on-dark: #F4F6F2; --on-dark-soft: rgba(244, 246, 242, .72);
  --orange-ink: #1A1206; --orange-hi: #F59A44;
  --beam: rgba(255, 244, 214, .22);
  /* type */
  --f-display: 'Bricolage', 'Figtree', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-hero: clamp(50px, 6.5vw, 116px);
  --fs-display: clamp(44px, 6.4vw, 108px);
  --fs-title: clamp(28px, 3vw, 46px);
  --fs-body: 18px; --fs-small: 14.5px;
  /* layout */
  --gutter: clamp(16px, 4vw, 64px); --max: 1360px; --radius: 22px; --radius-lg: 34px;
  --bar-h: 76px;
  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Names the live stylesheets and the chat panel (css/chat.css) still use, mapped onto the v5 system. */
:root { --white: #FAFAF7; --mint-deep: #D7EBDC; --green: #1E7A46; --green-deep: #155E35; --navy-deep: #14284A; --orange-lift: #F59A44;
  --display: var(--f-display); --text: var(--f-body); --r-card: 22px; --r-big: 34px; --spring: var(--ease-spring); --out: var(--ease-out); }

/* ---- base.css ---- */
/* Base: reset, ground colours, shared layout helpers. Home only (inner pages keep the live base and get pages.css). */
.v5-home *, .v5-home *::before, .v5-home *::after { box-sizing: border-box; }
html.v5 { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 12px); }
.v5-home { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
/* resets carry zero specificity (:where), so every component's own margin / padding / size always wins */
:where(.v5-home) img { max-width: 100%; height: auto; display: block; }
:where(.v5-home) a { color: inherit; }
:where(.v5-home) :is(p, h1, h2, h3, ol, ul, figure, blockquote) { margin: 0; }
:where(.v5-home) :is(ol, ul) { padding: 0; list-style: none; }
.v5-home .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.v5-home section { position: relative; }
.v5 .vh, .v5-home .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v5 .nw { white-space: nowrap; }
.v5-home .skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; }
.v5-home .skip:focus { top: 12px; }
.v5-home :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.v5-home ::selection { background: var(--forest); color: #fff; }

/* top scroll progress (2 px, sky blue: a small accent) */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--sky); transform-origin: 0 50%; transform: scaleX(0); }

/* grounds: each section owns its colour; edges overlap by a soft radius like stacked boards */
[data-ground="dusk"] { background: var(--dusk-900); color: var(--on-dark); }
[data-ground="mint"] { background: var(--mint); }
[data-ground="forest"] { background: var(--forest-900); color: var(--on-dark); }
[data-ground="paper"] { background: var(--paper); }

/* fine film grain on the dark grounds (a tiny tiled noise image, no blend mode: cheap), under the content */
[data-ground="dusk"]:not(.hero), [data-ground="forest"] { isolation: isolate; }
[data-ground="dusk"]:not(.hero)::after, [data-ground="forest"]::after, .cmpx::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  opacity: .08; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* every link / button / question gets a soft hover change (components with their own motion override this) */
:where(.v5-home, [data-v5]) :where(a, button, summary) { transition-property: color, background-color, text-decoration-color, opacity, box-shadow;
  transition-duration: .25s; transition-timing-function: var(--ease-out); }
:where(.v5-home, [data-v5]) :where(.foot a, .map a, .cities__line a, .crumbs a, .post-body a):hover { color: var(--sky); }
/* Phones / tablets: the flashlight surfaces light up under the finger or with the drifting light (js/motion/touchlight.js) */
@media (hover: none) {
  .qa.is-tlit::before, .map.is-tlit::after, .deck__stack.is-tlit .say[data-k="0"]::after, .reel__open.is-tlit .reel__ph::after { opacity: 1; }
  :is(.v5-home,[data-v5]) main :is(.btn-book, .btn-call, .btn-ghost, .btn-dark):active { transform: scale(.97); transition-duration: .12s; }
}

/* ---- type.css ---- */
/* Type: Bricolage display with a serif-italic accent word, Figtree text. */
.v5-home .display, .v5-home .hero__h, .v5-home .title-xl { font-family: var(--f-display); font-weight: 760; font-stretch: 84%;
  font-variation-settings: 'opsz' 96; letter-spacing: -.026em; line-height: 1; text-wrap: balance; }
.v5-home .display { font-size: var(--fs-display); }
.v5-home .title-xl { font-size: var(--fs-title); line-height: 1; letter-spacing: -.025em; }
.v5-home em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-stretch: normal; }
.v5-home .display em, .v5-home .hero__h em { font-size: 1.04em; line-height: .9; }
.v5-home .lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--ink-soft); max-width: 40ch; text-wrap: pretty; }
[data-ground="dusk"] .lede, [data-ground="forest"] .lede { color: var(--on-dark-soft); }
.v5-home .eyebrow { font: 600 13px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; }
.v5-home .eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--sky); display: inline-block; }

/* split-text line masks: tall enough for italic ascenders/descenders; the mask is removed once the line has risen,
   so no letter is ever left clipped (js/motion/reveals.js adds .is-in) */
.ln { display: block; overflow: hidden; padding: .12em .06em .16em; margin: -.12em -.06em -.16em; }
.is-in .ln { overflow: visible; }
.ln-i { display: block; will-change: transform; }

/* links */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--forest);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--ease-out); padding-bottom: 2px; }
.link-arrow::after { content: '→'; transition: transform .35s var(--ease-out); }
.link-arrow:hover { background-size: 100% 2px; }
.link-arrow:hover::after { transform: translateX(4px); }
.link-book { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link-bracket { font: 600 16px/1 var(--f-body); letter-spacing: .04em; text-decoration: none; color: var(--forest); }
.link-bracket:hover { color: var(--navy); }

/* authored icons (one stroke family, replaces unicode glyphs) */
.ico-star { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; fill: currentColor; }
.ico-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- buttons.css ---- */
/* Buttons: orange only on Call/Book. Hover = fill shift + lift, never glow. */
:is(.v5-home,[data-v5]) .btn { --b: var(--orange); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 0; font: 700 16px/1 var(--f-body); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  transition: transform .35s var(--ease-out), background-color .25s, color .25s, box-shadow .35s var(--ease-out); white-space: nowrap; }
:is(.v5-home,[data-v5]) .btn svg { width: 18px; height: 18px; fill: currentColor; }
:is(.v5-home,[data-v5]) .btn-book, :is(.v5-home,[data-v5]) .btn-call { background: var(--orange); color: var(--orange-ink); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -12px rgba(240,138,43,.7); }
:is(.v5-home,[data-v5]) .btn-book:hover, :is(.v5-home,[data-v5]) .btn-call:hover { background: var(--orange-hi); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 16px 30px -14px rgba(240,138,43,.8); }
:is(.v5-home,[data-v5]) .btn-book:active, :is(.v5-home,[data-v5]) .btn-call:active { transform: translateY(0) scale(.98); }
:is(.v5-home,[data-v5]) .btn-ghost { background: rgba(250,250,247,.08); color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(250,250,247,.45); backdrop-filter: blur(6px); }
:is(.v5-home,[data-v5]) .btn-ghost:hover { background: rgba(250,250,247,.16); transform: translateY(-2px); }
:is(.v5-home,[data-v5]) .btn-dark { background: var(--navy); color: #fff; }
:is(.v5-home,[data-v5]) .btn-dark:hover { background: var(--dusk-700); transform: translateY(-2px); }
:is(.v5-home,[data-v5]) .btn-xl { min-height: 58px; padding: 0 30px; font-size: 17.5px; }
:is(.v5-home,[data-v5]) .btn-block { width: 100%; }

/* ---- header.css ---- */
/* Header: the live markup as a floating glass pill. Dark glass over dusk sections, light glass over light ones
   (js/ui/header.js sets .on-dark from the section under the bar). Same on every page. */
:is(.v5-home,[data-v5]) .bar { position: fixed; z-index: 100; top: 12px; left: 50%; transform: translateX(-50%); width: min(calc(100% - 24px), 1400px);
  height: 64px; margin: 0; padding: 0 8px 0 10px; display: flex; align-items: center; gap: 6px; border-radius: 999px;
  background: rgba(250,250,247,.82); color: var(--navy); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(31,58,95,.08), 0 18px 40px -24px rgba(11,23,38,.45); transition: background-color .4s, color .4s, box-shadow .4s, top .4s var(--ease-out); }
:is(.v5-home,[data-v5]) .bar.on-dark { background: #101D31; color: var(--on-dark); box-shadow: 0 0 0 1px rgba(250,250,247,.12), 0 18px 40px -24px rgba(0,0,0,.6); }
:is(.v5-home,[data-v5]) .bar.is-hidden { top: -90px; }
:is(.v5-home,[data-v5]) .bar-logo { flex: none; display: grid; place-items: center; width: 64px; height: 48px; border-radius: 999px; background: #fff; margin-right: 6px; }
:is(.v5-home,[data-v5]) .bar-logo img { width: 52px; height: auto; display: block; }
:is(.v5-home,[data-v5]) .nav-menu { position: relative; margin-left: 0; }
:is(.v5-home,[data-v5]) .bar .nav-sum:hover { background: rgba(127,140,160,.16); }
:is(.v5-home,[data-v5]) .nav-sum { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px;
  border-radius: 999px; font: 700 15.5px/1 var(--f-body); color: inherit; background: transparent; transition: background-color .25s; }
:is(.v5-home,[data-v5]) .nav-sum::-webkit-details-marker { display: none; }
:is(.v5-home,[data-v5]) .nav-sum svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
:is(.v5-home,[data-v5]) .nav-menu[open] .nav-sum svg { transform: rotate(180deg); }
:is(.v5-home,[data-v5]) .nav-sum:hover, :is(.v5-home,[data-v5]) .nav-menu[open] .nav-sum { background: rgba(127,140,160,.16); }
:is(.v5-home,[data-v5]) .nav-panel { position: absolute; top: calc(100% + 12px); left: -70px; width: min(560px, calc(100vw - 32px)); padding: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 26px; background: var(--paper); color: var(--navy);
  box-shadow: 0 0 0 1px rgba(31,58,95,.08), 0 30px 60px -20px rgba(11,23,38,.45); animation: navIn .35s var(--ease-out); }
@keyframes navIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
:is(.v5-home,[data-v5]) .nav-panel > a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 12px; border-radius: 14px;
  font: 650 15px/1.2 var(--f-body); text-decoration: none; color: var(--navy); transition: background-color .2s; }
:is(.v5-home,[data-v5]) .nav-panel > a small { flex-basis: 100%; padding-left: 38px; margin-top: -4px; font-weight: 500; font-size: 12.5px; color: var(--ink-soft); }
:is(.v5-home,[data-v5]) .nav-panel > a:hover { background: var(--mint); }
:is(.v5-home,[data-v5]) .np-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--mint); color: var(--forest); flex: none; }
:is(.v5-home,[data-v5]) .np-ico svg { width: 17px; height: 17px; }
:is(.v5-home,[data-v5]) .np-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
:is(.v5-home,[data-v5]) .np-foot a { font: 650 14px/1 var(--f-body); color: var(--forest); text-decoration: none; padding: 10px 12px; border-radius: 999px; background: var(--mint); }
:is(.v5-home,[data-v5]) .bar-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
:is(.v5-home,[data-v5]) .bar-nav a { font: 600 15.5px/1 var(--f-body); color: inherit; text-decoration: none; padding: 14px 13px; border-radius: 999px; opacity: .86; transition: opacity .2s, background-color .2s; }
:is(.v5-home,[data-v5]) .bar-nav a:hover { opacity: 1; background: rgba(127,140,160,.16); }
:is(.v5-home,[data-v5]) .bar-nav .nav-cmp { box-shadow: inset 0 0 0 1.5px currentColor; opacity: 1; margin-right: 4px; }
:is(.v5-home,[data-v5]) .bar .btn { min-height: 48px; padding: 0 20px; font-size: 15.5px; }
:is(.v5-home,[data-v5]) .bar-call svg { width: 16px; height: 16px; }
@media (max-width: 1180px) { :is(.v5-home,[data-v5]) .bar-nav a:not(.nav-cmp) { display: none; } }
@media (max-width: 860px) {
  :is(.v5-home,[data-v5]) .bar { top: 8px; height: 58px; width: calc(100% - 16px); }
  :is(.v5-home,[data-v5]) .bar-nav, :is(.v5-home,[data-v5]) .bar-book { display: none; }
  :is(.v5-home,[data-v5]) .nav-menu { margin-right: auto; }
  :is(.v5-home,[data-v5]) .bar-call { width: 46px; min-height: 46px; padding: 0; }
  :is(.v5-home,[data-v5]) .bar-call svg { width: 22px; height: 22px; flex: none; }
  :is(.v5-home,[data-v5]) .bar-call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :is(.v5-home,[data-v5]) .nav-panel { position: fixed; top: 74px; left: 8px; right: 8px; width: auto; grid-template-columns: 1fr; max-height: calc(100svh - 90px); overflow: auto; }
}

/* phone action bar (live markup): appears after the hero */
:is(.v5-home,[data-v5]) .mbar { display: none; }
@media (max-width: 860px) {
  :is(.v5-home,[data-v5]) .mbar { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; position: fixed; z-index: 90; left: 8px; right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom)); padding: 8px; border-radius: 999px; background: rgba(11,23,38,.72);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: translateY(140%); transition: transform .5s var(--ease-out); }
  :is(.v5-home,[data-v5]) .mbar.show { transform: none; }
  :is(.v5-home,[data-v5]) .mbar .btn { min-height: 50px; }
  :is(.v5-home,[data-v5]) .mbar .btn-call { background: var(--navy); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(250,250,247,.35); }
}
/* the live pages.css paints every <details> mint (FAQ cards); the Services menu is a <details> too */
:is(.v5-home,[data-v5]) .bar details.nav-menu { background: transparent; border: 0; padding: 0; box-shadow: none; width: auto; }

/* veil behind the floating bar: the colour of the section under it, with a soft blur that fades out downward, so
   content passing under the bar dissolves instead of showing as cut lines (js/ui/header.js) */
@property --veil { syntax: '<color>'; inherits: false; initial-value: #FAFAF7; }
.veil { position: fixed; z-index: 99; top: 0; left: 0; right: 0; height: calc(var(--bar-h) + 40px); pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, var(--veil) 0%, var(--veil) 62%, color-mix(in srgb, var(--veil) 0%, transparent) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent); mask-image: linear-gradient(180deg, #000 68%, transparent);
  transition: opacity .35s, --veil .45s; }
.veil.is-on { opacity: 1; }
@media (max-width: 860px) { .veil { height: 96px; } }

/* ---- footer.css ---- */
/* Footer (live markup) on dusk, with a giant AttiCali wordmark rising at the very bottom. */
:is(.v5-home,[data-v5]) .foot { position: relative; overflow: hidden; background: var(--dusk-900); color: var(--on-dark-soft);
  padding: clamp(72px, 9vw, 130px) 0 0; font: 400 16px/1.6 var(--f-body); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -34px; z-index: 2; }
:is(.v5-home,[data-v5]) .foot .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
:is(.v5-home,[data-v5]) .foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1fr; gap: clamp(28px, 4vw, 64px); }
:is(.v5-home,[data-v5]) .foot-h { font: 700 13px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark); margin: 0 0 16px; }
:is(.v5-home,[data-v5]) .foot p { margin: 0; }
:is(.v5-home,[data-v5]) .foot a { color: var(--on-dark); text-decoration-color: rgba(250,250,247,.3); text-underline-offset: 3px; }
:is(.v5-home,[data-v5]) .foot a:hover { text-decoration-color: var(--sky); }
:is(.v5-home,[data-v5]) .foot-logo { display: inline-grid; place-items: center; width: 92px; height: 72px; border-radius: 20px; background: #fff; margin-bottom: 18px; }
:is(.v5-home,[data-v5]) .foot-logo img { width: 74px; height: auto; }
:is(.v5-home,[data-v5]) .foot-legal { margin-top: 48px !important; padding-top: 22px; border-top: 1px solid var(--line-light); font-size: 14px; color: var(--on-dark-soft); }
:is(.v5-home,[data-v5]) .foot-copy { margin-top: 10px !important; border: 0; padding-top: 0; }
:is(.v5-home,[data-v5]) .foot-links { display: inline; }
.foot__mark { position: relative; margin-top: 30px; padding-bottom: clamp(18px, 2vw, 30px); overflow: hidden; pointer-events: none; user-select: none; }
.foot__mark span { display: block; text-align: center; font: 800 clamp(96px, 20vw, 300px)/.8 var(--f-display); font-stretch: 92%; letter-spacing: -.045em;
  color: rgba(143,211,176,.34); }
@media (max-width: 960px) { :is(.v5-home,[data-v5]) .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { :is(.v5-home,[data-v5]) .foot-grid { grid-template-columns: 1fr; } :is(.v5-home,[data-v5]) .foot { padding-bottom: 76px; } .foot__mark { display: none; } }

/* ---- chat.css ---- */
/* Rascal's "Questions?" launcher (built by the live js/chat/loader.js; the panel keeps its own css/chat.css). */
:is(.v5-home,[data-v5]) .ask { position: fixed; right: 18px; bottom: 18px; z-index: 95; opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .4s, transform .5s var(--ease-out); }
:is(.v5-home,[data-v5]) .ask.show { opacity: 1; pointer-events: auto; transform: none; }
:is(.v5-home,[data-v5]) .ask-btn { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 20px 0 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--navy); color: #fff; font: 700 16px/1 var(--f-body); box-shadow: 0 14px 34px -14px rgba(11,23,38,.7); transition: transform .4s var(--ease-spring); }
:is(.v5-home,[data-v5]) .ask-btn:hover { transform: translateY(-3px) rotate(-1deg); }
:is(.v5-home,[data-v5]) .ask-btn img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--mint); box-shadow: 0 0 0 3px var(--forest); }
:is(.v5-home,[data-v5]) .ac-nudge { position: absolute; right: 0; bottom: calc(100% + 12px); border: 0; border-radius: 16px 16px 4px 16px; padding: 11px 15px; cursor: pointer;
  background: var(--forest); color: #fff; font: 700 15px/1.2 var(--f-body); white-space: nowrap; box-shadow: 0 10px 26px -10px rgba(11,23,38,.5);
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 90% 100%; transition: opacity .3s, transform .45s var(--ease-spring); pointer-events: none; }
:is(.v5-home,[data-v5]) .ask.nudge .ac-nudge { display: none; }   /* v6: the speech nudge covered content; the pill stays */
@media (max-width: 860px) {
  :is(.v5-home,[data-v5]) .ask { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  :is(.v5-home,[data-v5]) .ask-btn { width: 46px; height: 46px; padding: 0; }
  :is(.v5-home,[data-v5]) .ask-btn img { width: 46px; height: 46px; }
  :is(.v5-home,[data-v5]) .ask { right: 10px; }
  :is(.v5-home,[data-v5]) .ask-btn span { display: none; }
  :is(.v5-home,[data-v5]) .ac-nudge { display: none; }
}
:is(.v5-home,[data-v5]) .ask.show.is-tucked { opacity: 0; pointer-events: none; transform: translateY(16px) scale(.9); }
@media (max-width: 860px) {
  :is(.v5-home,[data-v5]) .ask-btn, :is(.v5-home,[data-v5]) .ask-btn img { width: 42px; height: 42px; }
  :is(.v5-home,[data-v5]) .ask { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

.mbar__ask { display: none; }
@media (max-width: 860px) {
  :is(.v5-home,[data-v5]) .mbar { grid-template-columns: auto 1fr 2fr; }
  .mbar__ask { display: block; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--mint); box-shadow: 0 0 0 2px var(--forest); }
  .mbar__ask img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  body:has(.mbar.show) .ask:not(.is-open) { opacity: 0 !important; pointer-events: none !important; }
}

/* ---- hero.css ---- */
/* Hero: three painted depth planes (sky / house / foreground) + warm flashlight beam, headline in the sky. */
.hero { min-height: max(100svh, 700px); overflow: clip; isolation: isolate; display: flex; align-items: flex-start; }
.hero__scene { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0E1A31 0%, #14254A 50%, #1A2D55 100%); }
.hero__plane { position: absolute; left: 0; right: 0; bottom: 0; display: block; will-change: transform; }
.hero__plane img { width: 100%; height: auto; }
.hero__sky img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%); mask-image: linear-gradient(180deg, transparent 0, #000 26%); }
.hero__sky::before { display: none; content: ''; position: absolute; left: 0; right: 0; bottom: 99%; height: 60vh; background: linear-gradient(180deg, rgba(15,27,51,0), #1A2A4E); }
.hero__beam { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .9;
  background: radial-gradient(ellipse 22% 30% at var(--bx, 66%) var(--by, 52%), rgba(255,236,190,.34), rgba(255,236,190,.08) 55%, transparent 72%); }
.hero__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,23,38,.86) 0%, rgba(11,23,38,.58) 34%, rgba(11,23,38,0) 62%),
              linear-gradient(180deg, rgba(11,23,38,.55) 0%, rgba(11,23,38,0) 30%, rgba(11,23,38,0) 78%, rgba(11,23,38,.9) 100%); }
.hero__copy { position: relative; z-index: 3; pointer-events: none; padding-top: clamp(118px, 17vh, 170px); padding-bottom: 90px; }
.hero__eyebrow { color: var(--on-dark-soft); margin-bottom: 22px; }
.hero__h { font-size: clamp(50px, 6.5vw, 116px); max-width: none; color: #fff; font-variant-ligatures: no-common-ligatures; letter-spacing: -.018em; text-shadow: 0 2px 30px rgba(11,23,38,.35); }
.hero__h em { color: #CFE8D6; }
.hero__lede { margin-top: 46px; max-width: 34ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--on-dark-soft); text-wrap: pretty; }
.hero__lede strong { color: #fff; font-weight: 700; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; max-width: 780px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px; border-radius: 999px; font: 600 14.5px/1 var(--f-body);
  color: var(--on-dark); background: rgba(11,23,38,.62); box-shadow: inset 0 0 0 1px rgba(250,250,247,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.chip a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.chip strong { color: #fff; font-weight: 800; }
.chip__star { color: #F7C948; font-size: 15px; }
.chip--rate { background: rgba(30,122,70,.55); box-shadow: inset 0 0 0 1px rgba(234,244,236,.3); }
.chip--rate a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero__note { margin-top: 16px; font-size: 15.5px; font-weight: 600; color: var(--on-dark); display: inline-flex; align-items: center; gap: 8px; }
.hero__note::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(59,169,218,.22); }
.hero__rascal { position: absolute; z-index: 2; left: calc(50% + 90px); bottom: 8%; width: clamp(150px, 15vw, 230px); padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transform-origin: 50% 100%; }
.hero__rascal:focus-visible { outline: 3px solid var(--sky); outline-offset: 6px; border-radius: 30px; }
.hero__bob { display: block; transform-origin: 50% 100%; animation: rascalBob 4.6s var(--ease-io) infinite alternate; }
.hero__rascal img { width: 100%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.4)); transform-origin: 50% 100%; }
@keyframes rascalBob { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-12px) rotate(1.5deg); } }
.hero__bubble { position: absolute; z-index: 4; left: calc(50% + 90px + clamp(150px, 15vw, 230px) * .62); bottom: calc(8% + clamp(150px, 15vw, 230px) * 1.02);
  max-width: 250px; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--paper); color: var(--navy); font: 700 16px/1.25 var(--f-body);
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.55); opacity: 0; transform: translateY(8px) scale(.92); transform-origin: 0 100%; pointer-events: none;
  transition: opacity .25s, transform .45s var(--ease-spring); }
.hero__bubble.is-on { opacity: 1; transform: none; }
.hero__bubble:empty { visibility: hidden; }
/* WebGL hero: the canvas takes over from the CSS planes once its first frame is drawn */
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s var(--ease-out); }
.hero__gl.is-on { opacity: 1; }
.hero--gl .hero__beam { opacity: 0 !important; }
.hero__cue { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(250,250,247,.45); }
.hero__cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: #fff; animation: cue 1.8s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* intro failsafe: hidden until the motion script plays them in; shown anyway after 2.4 s if it never runs */
.hero [data-intro], .hero .ln-i { animation: introFallback .6s var(--ease-out) 2.4s both; }
@keyframes introFallback { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero.is-played [data-intro], .hero.is-played .ln-i { animation: none; }

@media (max-width: 1100px) { .hero__rascal { left: auto; right: 4%; bottom: 8%; } .hero__bubble { left: auto; right: calc(4% + clamp(150px, 15vw, 230px) * .7); bottom: calc(8% + clamp(150px, 15vw, 230px) * 1.02); border-radius: 18px 18px 4px 18px; transform-origin: 100% 100%; } }
@media (max-width: 600px) {
  .hero { min-height: 0; }
  .hero__copy { padding-top: 96px; padding-bottom: min(122vw, 520px); }
  .hero__h { font-size: clamp(42px, 12.4vw, 56px); }
  .hero__lede { font-size: 17.5px; margin-top: 26px; }
  .hero__ctas .btn { width: 100%; }
  .hero__shade { background: linear-gradient(180deg, rgba(11,23,38,.88) 0%, rgba(11,23,38,.72) 46%, rgba(11,23,38,0) 70%, rgba(11,23,38,.6) 100%); }
  .hero__plane { bottom: 0; }
  .hero__rascal { width: 104px; right: 6%; bottom: 26%; }
  .hero__bubble { right: calc(6% + 78px); bottom: calc(26% + 96px); max-width: 210px; font-size: 14.5px; padding: 10px 13px; }
  .hero__cue { display: none; }
  .hero__note { display: none; }
  .hero__facts { gap: 6px; margin-top: 20px; }
  .hero__facts .chip { min-height: 32px; padding: 0 9px; font-size: 12.5px; gap: 5px; }
}
.hero__copy > * { pointer-events: auto; }
/* Phones: the PC's picture, fitted to a tall screen. Headline in the night sky, then the whole lit cutaway house fills the
   width (the painting's phone crop at its own 2x density, never stretched), then the promise and buttons on the dusk
   ground below it. The scene box ends where the house ends, so the WebGL light (finger + drift) covers exactly the house. */
@media (max-width: 600px) {
  .hero { --hh: 137.37vw; --ht: 144px; }
  .hero__scene { bottom: auto; height: calc(var(--ht) + var(--hh)); overflow: clip; }
  .hero__copy { padding-bottom: 46px; }
  .hero__lede { margin-top: calc(var(--hh) - 24.8vw + 4px); position: relative; }
  .hero__shade { background: linear-gradient(180deg, rgba(11,23,38,.8) 0%, rgba(11,23,38,.42) 24%, rgba(11,23,38,0) 36%, rgba(11,23,38,0) 80%, rgba(11,23,38,.75) 93%, var(--dusk-900) 100%); }
  .hero__rascal { top: calc(var(--ht) + var(--hh) * .6); bottom: auto; right: 5%; width: 96px; }
  .hero__bubble { top: calc(var(--ht) + var(--hh) * .6 - 64px); bottom: auto; right: calc(5% + 70px); }
}

/* ---- how.css ---- */
/* How it works: four steps hanging from one line that draws with the scroll. */
.how { padding: 0 0 clamp(100px, 10vw, 150px); margin-top: -1px; }
.how__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; }
.how__h { font: 760 var(--fs-title)/1 var(--f-display); font-stretch: 84%; letter-spacing: -.025em; color: #fff; }
.how__sub { color: var(--on-dark-soft); font-size: 18px; }
.how__rail { position: relative; margin-top: 48px; }
.how__line { position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: rgba(250,250,247,.14); }
.how__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), #8FD3B0); transform-origin: 0 50%; transform: scaleX(0); }
.how__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 40px); counter-reset: s; }
.how__step { position: relative; display: grid; gap: 10px; align-content: start; }
.how__n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--f-body); color: var(--dusk-900);
  background: var(--paper); box-shadow: 0 0 0 6px var(--dusk-900); margin-bottom: 10px; }
.how__step b { font: 700 21px/1.2 var(--f-body); color: #fff; }
.how__step > span:last-child { color: var(--on-dark-soft); font-size: 16.5px; line-height: 1.5; max-width: 30ch; }
@media (max-width: 860px) {
  .v5-home .how__steps { grid-template-columns: 1fr; gap: 26px; padding-left: 64px; }
  .how__line { left: 23px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .how__fill { transform-origin: 50% 0; transform: scaleY(0); width: 100%; height: 100%; }
  .how__n { position: absolute; left: -64px; top: -4px; margin: 0; }
}

/* ---- bands.css ---- */
/* Two moving bands in opposite directions; speed follows scroll velocity (js/motion/bands.js).
   Razor-sharp text: the words are never rotated, scaled or 3D-transformed and never masked; only the band BACKGROUNDS are
   slanted (a skewed pseudo-element), and the JS moves each track by whole device pixels. overflow-x: clip cuts the
   track at the screen edges while the slanted background may still reach past the band's top and bottom. */
.bands { position: relative; z-index: 3; margin: -46px 0 -20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.band { --slant: -1.1deg; position: relative; min-width: 0; isolation: isolate; overflow-x: clip; overflow-y: visible; padding: 17px 0; white-space: nowrap; }
.band::before { content: ''; position: absolute; inset: 0 -3%; z-index: -1; background: var(--band-bg); transform: skewY(var(--slant)); }
.band--mint { --band-bg: var(--mint); color: var(--forest); }
.band--navy { --band-bg: var(--navy); color: #fff; }
.band__track { display: inline-flex; align-items: center; gap: 26px; padding-left: 26px; font: 760 clamp(24px, 2.6vw, 38px)/1 var(--f-display); font-stretch: 82%;
  letter-spacing: -.02em; text-transform: uppercase; -webkit-font-smoothing: antialiased; }
.band__track i { width: 14px; height: 14px; flex: none; background: currentColor; opacity: .55; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@media (max-width: 600px) { .band { --slant: -2.2deg; padding: 15px 0; } }

/* ---- fix.css ---- */
/* "Everything we fix": sticky dusk panel with the painted house + flashlight beam; giant service rows beside it. */
.fix { padding: clamp(110px, 12vw, 190px) 0 clamp(80px, 9vw, 140px); overflow: clip; }
.fix__head { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 24px 60px; margin-bottom: clamp(40px, 5vw, 80px); }
.fix__head .display, .fix__head .lede { position: relative; z-index: 1; }
.fix__head .lede { justify-self: end; }
.fix__grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.fix__stage { position: sticky; top: max(calc(var(--bar-h) + 24px), calc(50svh - 30vw + 30px)); }
.fix__panel { position: relative; aspect-ratio: 5 / 4; max-height: calc(100svh - var(--bar-h) - 48px); width: 100%; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 70% 10%, #1C3556 0%, var(--dusk-900) 62%); box-shadow: 0 40px 80px -40px rgba(11,23,38,.55); }
.fix__mesh { position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(45deg, rgba(250,250,247,.045) 0 1px, transparent 1px 26px), repeating-linear-gradient(-45deg, rgba(250,250,247,.045) 0 1px, transparent 1px 26px); }
.fix__house { position: absolute; left: -6%; right: -9%; bottom: -1%; transform: scale(var(--z, 1)); transform-origin: var(--x) var(--y);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%); mask-image: linear-gradient(180deg, #000 78%, transparent 99%); }
.fix__h { width: 100%; height: auto; display: block; }
.fix__h--dim { filter: brightness(.42) saturate(.55) contrast(1.05); }
.fix__h--lit { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 42%, transparent 100%);
  mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 42%, transparent 100%); }
.fix__cone { position: absolute; left: 0; right: 0; bottom: 0; top: -80%; pointer-events: none; mix-blend-mode: screen; filter: blur(10px);
  background: linear-gradient(200deg, rgba(255,244,214,.05), rgba(255,236,190,.28)); clip-path: var(--cone, polygon(0 0, 0 0, 0 0)); }
.fix__house::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(calc(var(--rx) * 1.25) calc(var(--ry) * 1.25) at var(--x) var(--y), rgba(255,226,160,.34), rgba(255,226,160,.08) 55%, transparent 75%); }
.fix__pin { position: absolute; left: var(--x); top: calc(var(--y) - var(--ry) * .55); transform: translate(-50%, -100%) scale(calc(1 / var(--z, 1))); display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--paper); color: var(--navy); font: 700 14px/1 var(--f-body); white-space: nowrap;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.fix__pin-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(59,169,218,.25); }
.fix__photos { position: absolute; left: 24px; top: 24px; width: clamp(180px, 16vw, 230px); aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 4px var(--paper), 0 24px 40px -16px rgba(0,0,0,.7); transform: rotate(-2deg); background: var(--dusk-800); z-index: 2; }
.fix__ph { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .5s var(--ease-out), transform .9s var(--ease-out); }
.fix__ph.is-on { opacity: 1; transform: none; }
/* only the active photo and its neighbours are displayed, so the other seven never download early */
.fix__ph:not(.is-on):not(.is-near) img { display: none; }
.fix__ph img { width: 100%; height: 100%; object-fit: cover; }
.fix__count { position: absolute; right: 24px; top: 20px; font: 600 14px/1 var(--f-body); letter-spacing: .1em; color: var(--on-dark-soft); }
.fix__count-i { color: #fff; font-weight: 800; }

.fix__list { counter-reset: r; }
.fix__row { position: relative; padding: clamp(26px, 5.4vh, 54px) 0; border-top: 1px solid var(--line); min-height: 30vh;
  display: grid; grid-template-columns: 1fr; align-content: center; transition: opacity .45s var(--ease-out); }
.fix__row:last-child { border-bottom: 1px solid var(--line); }
.fix__n { grid-row: 1 / span 2; font: 600 14px/1 var(--f-body); letter-spacing: .06em; color: var(--forest); padding-top: .9em; }
.fix__name { font: 760 clamp(34px, 3.7vw, 62px)/1.04 var(--f-display); font-stretch: 80%; letter-spacing: -.03em; }
.fix__name a { text-decoration: none; background: linear-gradient(var(--forest), var(--forest)) 0 92% / 0 4px no-repeat; transition: background-size .5s var(--ease-out); }
.fix__name a:hover { background-size: 100% 4px; }
.fix__where { grid-column: 1; margin-top: 24px; font: 600 13px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mint-ink); }
.fix__line, .fix__acts, .fix__inline { grid-column: 1; }
.fix__line { margin-top: 14px; max-width: 44ch; color: var(--ink-soft); }
.fix__acts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; font-size: 16px; }
.fix__inline { display: none; }
.fix__unsure { margin-top: 40px; padding: 28px; border-radius: var(--radius); background: var(--mint); display: grid; gap: 18px; justify-items: start; }
/* with motion: the row at the reading line is full value, the others step back (the beam logic) */
.fix.is-live .fix__row:not(.is-on) .fix__name { opacity: .35; transition: opacity .45s var(--ease-out); }

.fix__mini { display: none; }

/* Phones + tablets: nothing sticky. Each service card is its own little dusk scene: a dark cutaway of the house whose
   room for that service gets lit by a sweeping flashlight when the card lands in view (js/motion/fix-mini.js).
   .is-armed = waiting in the dark; .is-lit = the sweep has played. Without .is-armed (no JS, reduced motion) it's lit. */
@media (max-width: 900px) {
  .fix__head { grid-template-columns: 1fr; }
  .fix__head .lede { justify-self: start; }
  .fix__grid { display: block; margin-inline: 8px; padding: 12px 10px 18px; border-radius: 30px; max-width: none;
    background: radial-gradient(120% 50% at 70% 0%, #1C3556 0%, var(--dusk-900) 66%); box-shadow: 0 40px 80px -40px rgba(11,23,38,.55); }
  .fix__stage { display: none; }
  .fix__col { padding: 0; }
  .fix__list { display: grid; gap: 12px; }
  .fix__row { min-height: 0; padding: 8px 8px 20px; border: 0 !important; border-radius: 24px; background: var(--paper); align-content: start; }
  .fix__row > :not(.fix__mini) { margin-inline: 10px; }
  .fix__name { margin-top: 16px; font-size: clamp(28px, 7.6vw, 38px); line-height: 1; }
  .fix__where { margin-top: 10px; line-height: 1.45; }
  .fix__line { font-size: 16px; }
  .fix__acts { font-size: 15px; flex-direction: column; gap: 10px; }
  .fix__unsure { margin: 24px var(--gutter) 0; }

  .fix__mini { --lx: 30%; display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 17px; overflow: hidden; isolation: isolate;
    background: radial-gradient(110% 90% at 72% 0%, #1C3556 0%, var(--dusk-900) 70%); }
  .fix__mini::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background: repeating-linear-gradient(45deg, rgba(250,250,247,.05) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, rgba(250,250,247,.05) 0 1px, transparent 1px 22px); }
  /* the house's empty left quarter is cropped off: 128% wide, shifted left, sitting on the bottom edge */
  .fix__mh { position: absolute; width: 128%; left: -28%; bottom: -1%; }
  .fix__mh::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: var(--glow, 1);
    background: radial-gradient(calc(var(--rx) * 1.3) calc(var(--ry) * 1.3) at var(--x) var(--y), rgba(255,226,160,.4), rgba(255,226,160,.1) 55%, transparent 75%); }
  .fix__mcone { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; filter: blur(7px); opacity: var(--beam, .7);
    background: linear-gradient(205deg, rgba(255,244,214,.06), rgba(255,236,190,.34)); clip-path: var(--cone, polygon(0 0, 0 0, 0 0)); }
  .fix__mpin { position: absolute; left: var(--x); top: calc(var(--y) - var(--ry) * .5); z-index: 2; transform: translate(-50%, -100%);
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 8px; border-radius: 999px; background: var(--paper); color: var(--navy);
    font: 700 12.5px/1 var(--f-body); white-space: nowrap; box-shadow: 0 10px 22px -8px rgba(0,0,0,.6); }
  .fix__mini[data-mini="attic"] .fix__mpin, .fix__mini[data-mini="roof"] .fix__mpin, .fix__mini[data-mini="ducts"] .fix__mpin { transform: translate(-16%, -100%); }
  .fix__mini[data-mini="ducts"] .fix__mpin { left: calc(var(--x) - 4%); }
  .fix__mini[data-mini="outside"] .fix__mpin, .fix__mini[data-mini="garage"] .fix__mpin { transform: translate(calc(-100% + 26px), -100%); }
  .fix__mini[data-mini="whole"] .fix__mpin { top: 6%; left: auto; right: 4%; transform: none; }
  .fix__mini[data-mini="crawl"] .fix__mpin { top: calc(var(--y) - var(--ry) * .2); }
  /* the real job photo, pinned like a polaroid in the dark sky corner */
  .fix__mini .fix__h--dim { filter: brightness(.3) saturate(.5) contrast(1.08); }
  .fix__inline { position: absolute; z-index: 3; display: block; left: 4%; top: 7%; width: 38%; aspect-ratio: 4 / 3; margin: 0; border-radius: 9px; overflow: hidden;
    box-shadow: 0 0 0 3px var(--paper), 0 16px 26px -10px rgba(0,0,0,.75); transform: rotate(-3deg); background: var(--dusk-800); }
  .fix__inline img { width: 100%; height: 100%; object-fit: cover; }

  /* armed: the room is dark, label + photo wait; JS drives --x/--y/--rx/--ry/--cone during the sweep */
  .fix__mini.is-armed:not(.is-lit) .fix__mpin { opacity: 0; translate: 0 8px; scale: .9; }
  .fix__mini.is-armed:not(.is-lit) .fix__inline { opacity: 0; translate: 0 -14px; rotate: -5deg; }
  .fix__mini.is-armed .fix__mpin { transition: opacity .4s var(--ease-out) .85s, translate .5s var(--ease-spring) .85s, scale .5s var(--ease-spring) .85s; }
  .fix__mini.is-armed .fix__inline { transition: opacity .45s var(--ease-out) 1.15s, translate .6s var(--ease-spring) 1.15s, rotate .6s var(--ease-spring) 1.15s; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .fix__list { grid-template-columns: 1fr 1fr; }
}

.fix__pin.is-right { transform: translate(calc(-100% + 30px), -100%) scale(calc(1 / var(--z, 1))); }
.fix__pin { transition: opacity .35s var(--ease-out), translate .5s var(--ease-out); }
.fix__pin.is-swap { opacity: 0; translate: 0 6px; transition-duration: .18s; }

/* Phones + tablets with room for it (.is-phone, js/motion/fix-phone.js): the PC scene on a tall screen. The lit house
   panel is pinned under the header, the service text is pinned under it and swaps per scroll step while the beam
   travels; ticks show the position. The track length (--fix-track) is the ::after spacer, so both stay stuck over it. */
@media (max-width: 900px) {
  .fix.is-phone { --pw: min(calc(100vw - 36px), 46svh); --ptop: 74px; }
  .fix.is-phone .fix__grid::after { content: ''; display: block; height: var(--fix-track, 500svh); }
  .fix.is-phone .fix__pinbox { position: sticky; top: var(--ptop); }
  .fix.is-phone .fix__stage { display: block; position: static; }
  .fix.is-phone .fix__panel { width: var(--pw); margin-inline: auto; aspect-ratio: 1; max-height: none; border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(250,250,247,.08), 0 30px 60px -30px rgba(0,0,0,.6); }
  /* the house fills the width (its empty left yard cropped off); the photo + counter sit in the night sky above it */
  .fix.is-phone .fix__house { left: -34%; right: auto; width: 140%; }
  .fix.is-phone .fix__photos { left: 12px; top: 12px; width: 34%; border-radius: 10px; box-shadow: 0 0 0 3px var(--paper), 0 16px 26px -12px rgba(0,0,0,.7); }
  .fix.is-phone .fix__pin { padding: 6px 11px 6px 8px; font-size: 12.5px; gap: 7px; }
  .fix.is-phone .fix__count { right: 14px; top: 14px; font-size: 12.5px; }
  .fix.is-phone .fix__col { margin-top: 10px; }
  .fix.is-phone .fix__list { display: grid; gap: 0; }
  .fix.is-phone .fix__row { grid-area: 1 / 1; align-self: start; padding: 18px 18px 16px; border-radius: 22px; background: var(--paper);
    opacity: 0; visibility: hidden; translate: 0 18px; transition: opacity .14s linear, translate .3s var(--ease-out), visibility 0s linear .14s; }
  .fix.is-phone .fix__row.is-on { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .4s var(--ease-out) .16s, translate .6s var(--ease-out) .16s, visibility 0s; }   /* the old text is gone first: no ghost overlap */
  .fix.is-phone .fix__row > :not(.fix__mini) { margin-inline: 0; }
  .fix.is-phone .fix__mini { display: none; }
  .fix.is-phone .fix__name { margin-top: 0; font-size: clamp(30px, 8.4vw, 40px); }
  .fix.is-phone .fix__where { margin-top: 10px; }
  .fix.is-phone .fix__line { margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
  .fix.is-phone .fix__acts { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 15px; }
  .fix.is-phone .fix__ticks { display: flex; justify-content: center; gap: 4px; margin: -4px 0 2px; }
  .fix.is-phone .fix__tick { width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
  .fix.is-phone .fix__tick span { display: block; width: 18px; height: 4px; border-radius: 4px; background: rgba(250,250,247,.22); font-size: 0; color: transparent;
    transition: width .45s var(--ease-out), background-color .35s; }
  .fix.is-phone .fix__tick.is-past span { background: rgba(143,211,176,.6); }
  .fix.is-phone .fix__tick.is-on span { width: 30px; background: var(--sky); }
  .fix__grid + .fix__unsure { margin: 28px var(--gutter) 0; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .fix.is-phone .fix__list { grid-template-columns: 1fr; max-width: var(--pw); margin-inline: auto; }
}

/* short phone screens (Safari with toolbars): compact service text so the lit house still fits above it (Isaac 2026-10-27) */
@media (max-width: 1100px) {
  .fix.is-phone.is-short .fix__list { max-width: calc(100vw - 36px); }
  .fix.is-phone.is-short .fix__row { padding: 14px 16px 12px; }
  .fix.is-phone.is-short .fix__name { font-size: clamp(26px, 7.2vw, 34px); }
  .fix.is-phone.is-short .fix__where { margin-top: 6px; }
  .fix.is-phone.is-short .fix__line { margin-top: 6px; font-size: 14.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fix.is-phone.is-short .fix__acts { margin-top: 8px; font-size: 14.5px; }
  .fix.is-phone.is-short .fix__acts > :nth-child(n+2) { display: none; }
}

/* phone services scene: native stop points, one per service (Isaac 2026-10-28; js/motion/fix-phone.js) */
html.fix-snap { scroll-snap-type: y proximity; }
.fix.is-phone .fix__grid { position: relative; }
.fix__snaps { position: absolute; inset: 0; pointer-events: none; }
.fix__snaps i { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; }
@media (prefers-reduced-motion: reduce) { html.fix-snap { scroll-snap-type: none; } }

/* ---- stay.css ---- */
/* Rascal scene: the approved ad in a titanium iPhone + "How a stay gets cancelled." kinetic steps + stamp. */
.stay { height: 250vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -30px; z-index: 1;
  background: radial-gradient(80% 60% at 25% 45%, #18325A 0%, var(--dusk-900) 70%); }
.stay__pin { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; overflow: clip; }
.stay__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 110px); align-items: center; }
.stay__phone { position: relative; display: grid; justify-items: center; perspective: 1400px; }
.stay__glow { position: absolute; width: 130%; aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -55%); z-index: -1;
  background: radial-gradient(closest-side, rgba(255,236,190,.2), rgba(59,169,218,.08) 55%, transparent); }
.stay__h { color: #fff; max-width: 9ch; }
.stay__h em { color: #CFE8D6; }
.stay__steps { margin-top: clamp(48px, 7vh, 72px); display: grid; gap: clamp(16px, 2.6vh, 28px); }
.stay__step { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: var(--on-dark-soft);
  opacity: .55; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.stay__step b { color: #fff; font-family: var(--f-display); font-weight: 700; font-stretch: 86%; font-size: 1.32em; letter-spacing: -.015em; display: block; }
.stay__step > span:last-child { grid-column: 2; max-width: 38ch; }
.stay__n { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--f-body); color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(250,250,247,.35); }
.stay__step.is-on { opacity: 1; }
.stay__step.is-on .stay__n { background: var(--sky); color: var(--dusk-900); box-shadow: none; }
.stay__copy { position: relative; }
.stay__stamp { position: relative; display: inline-block; margin: 30px 0 0 64px; padding: 0; border: 0; color: #CFE8D6; text-shadow: 0 0 40px rgba(207,232,214,.25);
  font: 800 clamp(40px, 4.8vw, 76px)/1 var(--f-display); font-stretch: 78%; letter-spacing: .02em; text-transform: uppercase; transform: rotate(-8deg) scale(2.2);
  opacity: 0; transition: opacity .12s, transform .26s cubic-bezier(.34, 1.9, .64, 1); }
.stay.is-cancelled .stay__stamp { opacity: 1; transform: rotate(-8deg) scale(1); }

/* iPhone (live markup) */
.iphone { --w: clamp(240px, 21vw, 310px); position: relative; width: var(--w); margin: 0; border-radius: calc(var(--w) * .17); padding: calc(var(--w) * .035);
  background: linear-gradient(145deg, #d9dbde 0%, #8d9196 18%, #f2f3f4 34%, #7c8086 52%, #c9ccd0 70%, #6f7378 88%, #b7babe 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 0 0 4px #3a3d41, 0 50px 90px -30px rgba(0,0,0,.7);
  transform: rotateY(-12deg) rotateX(4deg) rotateZ(1.5deg); will-change: transform; }
.iphone-screen { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: calc(var(--w) * .135); overflow: hidden; background: #05070a; box-shadow: 0 0 0 calc(var(--w) * .012) #0b0d10; }
.iphone-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.iphone-island { position: absolute; top: calc(var(--w) * .035); left: 50%; width: calc(var(--w) * .3); height: calc(var(--w) * .088); transform: translateX(-50%); background: #000; border-radius: 999px; z-index: 2; }
.iphone-btn { position: absolute; width: 4px; background: linear-gradient(90deg, #6f7378, #c9ccd0); border-radius: 2px; }
.ib-action { left: -3px; top: 17%; height: 5%; } .ib-vol1 { left: -3px; top: 25%; height: 9%; } .ib-vol2 { left: -3px; top: 36%; height: 9%; } .ib-power { right: -3px; top: 28%; height: 13%; }
.hv-cc { position: absolute; left: 8%; right: 8%; top: 17%; z-index: 3; margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(10,24,40,.88); color: #fff; font: 700 14px/1.3 var(--f-body); text-align: center; white-space: pre-line; pointer-events: none; }
.hv-cc[hidden] { display: none; }
.hv-sound { position: absolute; left: 50%; bottom: calc(var(--w) * .07); transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--navy); font: 800 15px/1 var(--f-body); cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--ease-spring); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.hv-sound svg { width: 22px; height: 22px; fill: currentColor; }
.hv-sound .i-on { display: none; } .hv-sound[aria-pressed="true"] .i-on { display: block; } .hv-sound[aria-pressed="true"] .i-off { display: none; }
.hv-sound.is-on, .hv-sound.hv-chosen { left: auto; right: calc(var(--w) * .06); transform: none; padding: 0; width: 44px; justify-content: center; }
.hv-sound.is-on .hv-label, .hv-sound.hv-chosen .hv-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hv-pulse { position: absolute; inset: -4px; border-radius: inherit; border: 3px solid var(--sky); pointer-events: none; animation: hvPulse 1.8s ease-out infinite; }
@keyframes hvPulse { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.25, 1.6); } }
.hv-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: var(--navy); display: grid; place-items: center; cursor: pointer; z-index: 3; }
.hv-play[hidden] { display: none; }
.hv-play svg { width: 32px; height: 32px; fill: currentColor; margin-left: 4px; }
.hv-pause { position: absolute; top: calc(var(--w) * .05); right: calc(var(--w) * .06); z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #fff; color: var(--navy); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.hv-pause svg { width: 20px; height: 20px; fill: currentColor; }
.hv-pause .i-play { display: none; } .hv-pause.is-paused .i-play { display: block; } .hv-pause.is-paused .i-pause { display: none; }
.hv-transcript { margin-top: 26px; width: min(100%, 420px); text-align: center; color: var(--navy); }
.hv-transcript summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; list-style: none;
  background: rgba(250,250,247,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(250,250,247,.3); font: 700 15px/1 var(--f-body); }
.hv-transcript summary::-webkit-details-marker { display: none; }
.hv-transcript summary svg { width: 18px; height: 18px; }
.hv-tx { margin-top: 10px; padding: 16px 18px; border-radius: 16px; background: var(--paper); text-align: left; font-size: 15.5px; }
.hv-tx p { margin: 0 0 8px; line-height: 1.45; } .hv-tx p:last-child { margin: 0; }

@media (max-width: 900px) {
  .stay { height: auto; padding: 90px 0 110px; }
  .stay__pin { position: static; height: auto; display: block; }
  .stay__grid { grid-template-columns: 1fr; }
  .stay__copy { order: -1; }
  .stay__step { opacity: 1; }
  .stay__stamp { position: relative; display: inline-block; right: auto; bottom: auto; margin-top: 26px; }
  .iphone { --w: min(270px, 70vw); transform: rotateY(-8deg) rotateX(3deg) rotateZ(1deg); }
}
/* phones with motion (.is-steps, js/motion/stay.js): steps wait dimmed and light up one by one at the reading line */
@media (max-width: 900px) {
  .stay.is-steps .stay__step { opacity: .38; transform: translateX(-6px); }
  .stay.is-steps .stay__step.is-on { opacity: 1; transform: none; }
}

/* ---- mesh.css ---- */
/* Why mesh, not foam: diamond mesh weaves across the mint ground; dime/pencil/gap drawing; two tilted proof photos. */
.mesh { padding: clamp(110px, 12vw, 180px) 0; overflow: clip; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -30px; z-index: 2; }
.mesh__wire { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(30,122,70,.13); pointer-events: none; }
.mesh__wire path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mesh__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.mesh__copy { display: grid; gap: 22px; justify-items: start; }
.mesh__copy .display { max-width: 8.5ch; }
.mesh__copy > p:not(.lede):not(.src) { max-width: 46ch; }
.mesh__copy .lede { color: var(--navy); font-weight: 500; }
.gap-scale { width: 100%; max-width: 560px; padding: 26px 28px 22px; border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 30px 50px -36px rgba(11,23,38,.45); }
.gap-scale svg { width: 100%; height: auto; display: block; }
.gs-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; text-align: center; }
.gs-labels b { display: block; font-size: 15px; }
.gs-labels span { font-size: 13px; color: var(--ink-soft); }
.gap-scale figcaption { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); }
.gs-gap-ring { transform-origin: 83px 13px; animation: gapRing 2.4s var(--ease-out) infinite; }
@keyframes gapRing { 0% { transform: scale(1); opacity: 1; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
.mesh .src { font-size: 14px; color: var(--ink-soft); }
.mesh .src a { color: inherit; }
.mesh__photos { position: relative; min-height: 700px; }
.mesh__ph { position: absolute; width: min(380px, 100%); border-radius: 18px; overflow: hidden; background: var(--paper); padding: 10px 10px 0;
  box-shadow: 0 40px 60px -34px rgba(11,23,38,.55), 0 0 0 1px var(--line); will-change: transform; }
.mesh__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.mesh__ph figcaption { padding: 12px 6px 14px; font: 650 14.5px/1.3 var(--f-body); }
.mesh__ph--1 { top: 0; left: 0; transform: rotate(-4deg); }
.mesh__ph--2 { right: 0; bottom: 0; transform: rotate(3.5deg); }
@media (max-width: 900px) {
  .mesh__grid { grid-template-columns: 1fr; }
  .mesh__photos { min-height: 0; display: grid; gap: 18px; }
  .mesh__ph { position: relative; inset: auto; width: 100%; }
  .mesh__ph--1 { transform: rotate(-1.5deg); } .mesh__ph--2 { transform: rotate(1.5deg); }
}
@media (max-width: 900px) { .mesh__ph { max-width: 320px; justify-self: center; } }
@media (max-width: 600px) { .gs-labels span { font-size: 12px; line-height: 1.3; hyphens: none; text-wrap: balance; } .gap-scale { padding: 22px 16px 18px; } }

/* ---- proof.css ---- */
/* Real jobs. Real photos: the before/after stage. A dusk card holds the job tabs + captions and the photo frame.
   The frame is never wider than the photos' sharp size (--nat / --dpr, set from the screen by js/ui/compare.js). */
.proof { padding: clamp(100px, 10vw, 150px) 0 clamp(80px, 8vw, 120px); }
.proof__head { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 20px 60px; margin-bottom: clamp(36px, 4vw, 64px); }
.proof__head .lede { justify-self: end; }
.cmpx { position: relative; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, calc(var(--nat) / var(--dpr, 2))); align-items: center; gap: clamp(28px, 4vw, 70px);
  padding: clamp(26px, 3.4vw, 54px); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; color: var(--on-dark);
  background: radial-gradient(70% 90% at 75% 30%, #1E3A60 0%, var(--dusk-900) 72%); box-shadow: 0 60px 100px -60px rgba(11,23,38,.7); }
.cmpx::before { content: ''; position: absolute; z-index: -1; right: 8%; top: 50%; width: 60%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,226,160,.20), rgba(255,226,160,0)); pointer-events: none; }
.cmpx__side { display: grid; gap: 22px; align-content: center; justify-items: start; }
.cmpx__kick { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1.45 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-soft); }
.fx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(59,169,218,.22); }
.cmpx__tabs { display: inline-flex; padding: 5px; border-radius: 999px; background: rgba(250,250,247,.07); box-shadow: inset 0 0 0 1px rgba(250,250,247,.14); }
.cmpx__tab { min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--on-dark-soft); cursor: pointer;
  font: 700 16px/1 var(--f-body); transition: background-color .35s var(--ease-out), color .25s; }
.cmpx__tab:hover { color: #fff; }
.cmpx__tab.is-on { background: var(--paper); color: var(--navy); }
.cmpx__caps { display: grid; gap: 14px; justify-items: start; animation: capsIn .5s var(--ease-out); }
.cmpx__caps[hidden] { display: none; }
@keyframes capsIn { from { opacity: 0; transform: translateY(8px); } }
.cmpx__cap { font: 600 clamp(18px, 1.5vw, 22px)/1.35 var(--f-body); color: #fff; max-width: 30ch; }
.cmpx__cap b { color: #8FD3B0; font-weight: 800; }
.cmpx .link-arrow { color: #fff; margin-top: 4px; }

.cmpx__frame { --p: 1; position: relative; width: 100%; max-width: calc(var(--nat) / var(--dpr, 2)); aspect-ratio: 4 / 3; justify-self: end; border-radius: 22px;
  overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 6px rgba(250,250,247,.95), 0 50px 80px -40px rgba(0,0,0,.75); }
.cmpx__job { position: absolute; inset: 0; }
.cmpx__job[hidden] { display: none; }
.cmpx__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.cmpx__img--before { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.cmpx__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s var(--ease-out); pointer-events: none; }
.cmpx__gl.is-on { opacity: 1; }
.cmpx__tag { position: absolute; top: 14px; z-index: 2; padding: 7px 12px; border-radius: 999px; font: 700 12.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(11,23,38,.66); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .3s; pointer-events: none; }
.cmpx__tag--b { left: 14px; opacity: calc(.25 + var(--p) * .75); }
.cmpx__tag--a { right: 14px; background: rgba(30,122,70,.85); opacity: calc(1 - var(--p) * .75); }
.cmpx__handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--p) * 100%); width: 2px; margin-left: -1px; background: #fff; outline: none;
  box-shadow: 0 0 18px 6px rgba(255,236,190,.45); }
.is-gl .cmpx__handle { background: transparent; box-shadow: none; }
.cmpx__knob { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--navy); box-shadow: 0 10px 28px -6px rgba(0,0,0,.55); transition: transform .35s var(--ease-spring); }
.cmpx__knob svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cmpx__frame:hover .cmpx__knob, .cmpx__handle:focus-visible .cmpx__knob { transform: scale(1.1); }
.cmpx__handle:focus-visible .cmpx__knob { outline: 3px solid var(--sky); outline-offset: 3px; }
.cmpx__hint { position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(11,23,38,.66); color: #fff; font: 600 13px/1 var(--f-body); pointer-events: none; transition: opacity .4s; }
.cmpx__frame:active .cmpx__hint { opacity: 0; }

@media (max-width: 900px) {
  .proof__head { grid-template-columns: 1fr; }
  .proof__head .lede { justify-self: start; }
  .cmpx { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 16px 28px; margin-inline: -8px; border-radius: 30px; justify-items: center; }
  .cmpx__side { justify-items: center; text-align: center; }
  .cmpx__caps { justify-items: center; }
  .cmpx__side { display: contents; }
  .cmpx__kick { grid-row: 1; }
  .cmpx__tabs { grid-row: 2; }
  .cmpx__frame { justify-self: center; grid-row: 3; margin: 6px 0; }
  .cmpx__caps { grid-row: 4; text-align: center; }
  .cmpx__cap { font-size: 17px; }
}
.is-wiping .cmpx__hint { opacity: 0; }

/* ---- reel.css ---- */
/* Finished-jobs reel (dusk) + the full-screen job story. Card photos are shown at 480 px at most (sharp on 2x screens). */
.reel { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -30px; z-index: 2; padding: clamp(90px, 9vw, 140px) 0 clamp(90px, 9vw, 130px);
  background: radial-gradient(70% 60% at 80% 20%, #18325A 0%, var(--dusk-900) 70%); }
.reel__head { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 18px 60px; margin-bottom: clamp(30px, 4vw, 56px); }
.reel__head .display { color: #fff; }
.reel__head .display em { color: #CFE8D6; }
.reel__head .lede { justify-self: end; }
.reel__view { outline: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); }
.v5-home .reel__track { display: flex; gap: clamp(18px, 2.2vw, 34px); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.reel__card { --d: 0; --a: 0; width: min(480px, 80vw); flex: none; transform: perspective(1400px) rotateY(calc(var(--d) * -12deg)) scale(calc(1 - var(--a) * .07));
  opacity: calc(1 - var(--a) * .4); transform-origin: 50% 60%; }
.reel__open, .reel__all { display: grid; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; text-decoration: none; font: inherit; }
.reel__ph { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--dusk-800);
  box-shadow: 0 0 0 1px rgba(250,250,247,.1), 0 40px 70px -40px rgba(0,0,0,.8); }
.reel__ph img { width: 100%; height: 100%; object-fit: cover; transition: filter .6s var(--ease-out); }
.reel__ph::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(40% 60% at var(--lx, 50%) var(--ly, 40%), rgba(255,236,190,.32), transparent 70%); mix-blend-mode: screen; }
.reel__open:hover .reel__ph::after, .reel__open:focus-visible .reel__ph::after { opacity: 1; }
.reel__open:hover .reel__ph img { filter: brightness(1.06) saturate(1.05); }
.reel__note { position: absolute; left: 12px; bottom: 12px; padding: 7px 11px; border-radius: 999px; background: rgba(11,23,38,.7); color: #fff;
  font: 600 12.5px/1 var(--f-body); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.reel__meta { margin-top: 8px; font: 600 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: #8FD3B0; }
.reel__n { color: var(--on-dark-soft); margin-right: 4px; }
.reel__city { font: 760 clamp(40px, 4vw, 64px)/1 var(--f-display); font-stretch: 78%; letter-spacing: -.035em; color: #fff; }
.reel__what { color: var(--on-dark-soft); font-size: 16.5px; line-height: 1.5; max-width: 44ch; }
.reel__go { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; }
.reel__go span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(250,250,247,.1); transition: transform .45s var(--ease-out), background-color .3s; }
.reel__open:hover .reel__go span, .reel__all:hover .reel__go span { transform: translateX(6px); background: var(--forest); }
.reel__card--end { width: min(360px, 70vw); align-self: center; }
.reel__all { padding: 40px 30px; border-radius: 22px; box-shadow: inset 0 0 0 1.5px rgba(250,250,247,.22); min-height: 260px; align-content: center; }
.reel__all .reel__city { font-size: clamp(34px, 3vw, 46px); }
.reel__foot { margin-top: 34px; }
.reel__bar { display: block; height: 2px; background: rgba(250,250,247,.14); }
.reel__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), #8FD3B0); transform-origin: 0 50%; transform: scaleX(0); }

/* desktop: pinned, the scroll drives the reel (js/ui/reel.js sets the height) */
.reel.is-scrub { padding: 0; }
.reel.is-scrub .reel__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; overflow: hidden;
  padding-top: calc(var(--bar-h) + clamp(28px, 5vh, 60px)); }
.reel.is-scrub .reel__head { margin-bottom: clamp(18px, 3vh, 40px); }
.reel.is-scrub .reel__head .display { font-size: clamp(44px, min(5.4vw, 8.5vh), 96px); }
/* the whole scene fits one screen: card width follows the screen height too */
.reel.is-scrub .reel__card { width: min(480px, calc((100svh - var(--bar-h) - 420px) * 1.333)); }
.reel.is-scrub .reel__card--end { width: min(360px, 26vw); }
.reel.is-scrub .reel__what { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel:not(.is-scrub) .reel__foot { display: none; }
.reel:not(.is-scrub) .reel__view { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 6px; }
.reel:not(.is-scrub) .reel__view::-webkit-scrollbar { display: none; }
.reel:not(.is-scrub) .reel__card { scroll-snap-align: start; transform: none; opacity: 1; }
@media (max-width: 900px) {
  .reel__head { grid-template-columns: 1fr; }
  .reel__head .lede { justify-self: start; }
  .reel__city { font-size: clamp(36px, 10vw, 46px); }
}

/* the story view */
html.is-locked { overflow: hidden; }
.sd { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--on-dark); overflow: auto; overscroll-behavior: contain; }
.sd::backdrop { background: rgba(7,14,24,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sd[open] { animation: sdIn .45s var(--ease-out); }
@keyframes sdIn { from { opacity: 0; } }
.sd__in { position: relative; min-height: 100%; display: grid; align-content: center; padding: clamp(80px, 8vw, 110px) var(--gutter) clamp(90px, 8vw, 110px); }
.sd__body { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 560px); justify-content: center; gap: clamp(30px, 5vw, 80px); align-items: start; }
.sd__photos { display: grid; gap: 14px; }
.sd__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.8); }
.sd__fig figcaption { margin-top: 8px; font: 600 14px/1.35 var(--f-body); color: var(--on-dark-soft); }
.sd__note { margin-top: 16px; font-size: 14.5px; color: var(--on-dark-soft); }
.sd__note b { color: #fff; }
.sd__text { position: sticky; top: 90px; display: grid; gap: 16px; justify-items: start; }
.sd__kick { font: 600 13px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: #8FD3B0; }
.sd__title { margin: 0; font: 760 clamp(38px, 4vw, 64px)/.98 var(--f-display); font-stretch: 82%; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.sd__title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: #CFE8D6; letter-spacing: -.01em; }
.sd__h { margin: 12px 0 0; font: 700 13px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.sd__text p { margin: 0; font-size: 17.5px; line-height: 1.55; color: var(--on-dark); max-width: 52ch; }
.sd__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.sd__tags li { padding: 9px 13px; border-radius: 999px; background: rgba(250,250,247,.09); box-shadow: inset 0 0 0 1px rgba(250,250,247,.16); font: 600 14px/1.2 var(--f-body); }
.sd__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sd__acts .btn-dark { background: var(--paper); color: var(--navy); }
.sd__bar { position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; }
.sd__btn { width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(250,250,247,.12); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(250,250,247,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color .2s, transform .3s var(--ease-out); }
.sd__btn:hover { background: rgba(250,250,247,.22); transform: translateY(-2px); }
.sd__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sd__close { background: var(--paper); color: var(--navy); }
.sd__close:hover { background: #fff; }
@media (max-width: 900px) {
  .sd__body { grid-template-columns: 1fr; }
  .sd__text { position: static; }
  .sd__in { padding-top: 84px; }
  .sd__media { max-width: 480px; }
  .sd__fig img { max-width: 320px; }
}
::view-transition-group(job-photo) { animation-duration: .55s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
/* phones (.is-swipe, js/ui/reel.js): the swipe position sets --d / --a, so the centre card comes forward like on the PC */
.reel.is-swipe:not(.is-scrub) .reel__card { transform: perspective(1400px) rotateY(calc(var(--d) * -10deg)) scale(calc(1 - var(--a) * .06)); opacity: calc(1 - var(--a) * .35); }
.reel.is-swipe:not(.is-scrub) .reel__foot { display: block; margin-top: 22px; }

/* ---- reviews.css ---- */
/* Neighbors said it best (paper): odometer score + count-up on the left, a deck of the four real quotes on the right.
   Only the top card shows its words; the cards behind are blank, tilted sheets, so text never sits on text. */
.reviews { padding: clamp(100px, 11vw, 170px) 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -30px; z-index: 2; overflow: clip; }
.reviews__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.reviews__score { display: grid; gap: 26px; justify-items: start; }
.score { display: grid; gap: 10px; }
.odo { display: inline-flex; font: 800 clamp(130px, 16vw, 250px)/1 var(--f-display); font-stretch: 78%; letter-spacing: -.02em; color: var(--forest); }
.odo__d { display: inline-block; height: 1em; overflow: clip; }
.odo__s { display: flex; flex-direction: column; will-change: transform; }
.odo__s span { height: 1em; line-height: 1; display: block; }
.odo__p { display: inline-block; }
.score__meta { font-size: 17px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.score__meta a { color: var(--navy); font-weight: 700; }
.stars { color: #E9A21B; font-size: 20px; display: inline-flex; gap: 3px; }

.deck { display: grid; gap: 26px; justify-items: center; }
.deck__stack { display: grid; width: min(100%, 520px); touch-action: pan-y; }
.say { --k: 0; grid-area: 1 / 1; position: relative; display: grid; gap: 22px; align-content: space-between; min-height: 330px; padding: clamp(26px, 3vw, 40px);
  border-radius: 28px; background: var(--navy); color: #fff; box-shadow: 0 40px 70px -40px rgba(11,23,38,.65); cursor: grab; user-select: none;
  transition: transform .6s var(--ease-out), opacity .5s, background-color .5s; will-change: transform; }
.say[data-k="0"] { z-index: 4; }
.say[data-k="1"] { z-index: 3; transform: translate(14px, 16px) rotate(2.5deg) scale(.97); background: var(--forest); }
.say[data-k="2"] { z-index: 2; transform: translate(-12px, 30px) rotate(-3deg) scale(.94); background: #2A4B73; }
.say[data-k="3"] { z-index: 1; transform: translate(4px, 42px) rotate(1deg) scale(.91); background: var(--mint-2); }
.say:not([data-k="0"]) > * { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }   /* back cards: text truly hidden */
.say[data-k="0"] > * { opacity: 1; visibility: visible; transition: opacity .45s .12s, visibility 0s; }
.say.is-drag { transition: none; cursor: grabbing; }
.say.is-out { transform: translateX(calc(var(--out, 1) * 120%)) rotate(calc(var(--out, 1) * 14deg)) !important; opacity: 0; transition: transform .45s var(--ease-io), opacity .4s; }
.say blockquote { margin: 0; }
.say p { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: #fff; }
.say blockquote p::before { content: '“'; display: block; font: 400 76px/.5 var(--f-serif); font-style: italic; color: #8FD3B0; margin-bottom: 14px; height: 30px; }
.say figcaption { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--on-dark-soft); }
.say__ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--forest); font-weight: 800; flex: none; }
.deck__nav { display: flex; align-items: center; gap: 18px; margin-top: 30px; }
.deck__count { font: 600 14px/1 var(--f-body); letter-spacing: .08em; color: var(--ink-soft); }
.deck__i { color: var(--navy); font-weight: 800; }
.deck__next { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 12px 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--paper); color: var(--navy); font: 700 16px/1 var(--f-body); box-shadow: inset 0 0 0 1.5px rgba(31,58,95,.25); transition: background-color .25s, transform .35s var(--ease-out); }
.deck__next svg { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--navy); color: #fff; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.deck__next:hover { background: var(--mint); transform: translateY(-2px); }
@media (max-width: 900px) {
  .reviews__grid { grid-template-columns: 1fr; }
  .say { min-height: 360px; }
}
.say[data-k="0"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(280px 220px at var(--mx, 50%) var(--my, 40%), rgba(255,226,160,.16), transparent 70%); }
.deck__stack:hover .say[data-k="0"]::after { opacity: 1; }

/* ---- choose.css ---- */
/* Before you choose (mint): copy + refer card on the left; the checklist drawn as a written quote on paper on the right.
   Each line's check draws with the scroll (--k from js/motion/sheet.js); the flashlight follows the pointer on it. */
.choose { padding: clamp(100px, 10vw, 160px) 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -30px; z-index: 2; overflow: clip; }
.choose__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.choose__copy { display: grid; gap: 26px; justify-items: start; }
.choose__h { font-size: clamp(42px, 5vw, 84px); max-width: 12ch; }
.choose__h em { color: var(--forest); }
.choose__note { font: 600 clamp(18px, 1.4vw, 21px)/1.45 var(--f-body); color: var(--navy); max-width: 36ch; }
.refer { position: relative; overflow: hidden; display: grid; gap: 14px; justify-items: start; margin-top: 18px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg);
  width: min(100%, 520px); background: linear-gradient(140deg, rgba(30,122,70,.96), rgba(17,80,44,.96)); color: #fff; box-shadow: 0 40px 70px -40px rgba(14,63,35,.7); }
.refer__h { margin: 0; font: 760 clamp(28px, 2.6vw, 40px)/1 var(--f-display); font-stretch: 84%; letter-spacing: -.025em; }
.refer p { color: rgba(255,255,255,.88); }

.sheet { --mx: 70%; --my: 30%; position: relative; padding: clamp(28px, 3.4vw, 50px) clamp(24px, 3.4vw, 52px); border-radius: 10px; background: #fff; color: var(--navy);
  box-shadow: 0 1px 0 rgba(31,58,95,.08), 0 50px 90px -50px rgba(11,23,38,.55), 0 18px 30px -24px rgba(11,23,38,.3); transform: rotate(1.4deg); }
.sheet::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px 220px at var(--mx) var(--my), rgba(255,226,160,.22), transparent 70%); }
.sheet::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -12px; height: 24px; z-index: -1; border-radius: 0 0 10px 10px; background: #F1F5EF; transform: rotate(-2deg); }
.sheet__head, .sheet__foot { display: flex; align-items: center; gap: 14px; }
.sheet__head { padding-bottom: 22px; border-bottom: 2px solid var(--navy); }
.sheet__head img { width: 44px; height: 44px; object-fit: contain; }
.sheet__t { display: grid; gap: 3px; }
.sheet__t b { font: 760 22px/1 var(--f-display); font-stretch: 84%; letter-spacing: -.02em; }
.sheet__t span { font: 600 12.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--forest); }
.sheet__rule { display: block; height: 9px; flex: 1; border-radius: 5px; background: var(--mint-2); }
.sheet__rule--s { flex: .45; }
.sheet__foot { margin-top: 24px; padding-top: 20px; border-top: 1.5px dashed rgba(31,58,95,.25); }
.sheet__lines { display: grid; }
.sheet__line { --k: 1; display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; padding: 17px 0; border-bottom: 1px solid var(--line);
  font: 600 clamp(16.5px, 1.25vw, 18.5px)/1.4 var(--f-body); }
.sheet__line span { padding-top: 4px; opacity: calc(.7 + var(--k) * .3); }
.sheet__tick { width: 34px; height: 34px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sheet__tick circle { stroke: var(--mint-2); stroke-width: 2; fill: rgba(234,244,236,.6); }
.sheet__tick path { stroke: var(--forest); stroke-width: 2.8; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); }
.sheet__line.is-done .sheet__tick circle { fill: var(--mint); stroke: var(--forest); transition: fill .4s, stroke .4s; }
@media (max-width: 900px) {
  .choose__grid { grid-template-columns: 1fr; }
  .sheet { transform: none; }
  .refer { margin-top: 6px; }
}

/* ---- book.css ---- */
/* Book: forest flood with the blurred dusk sky behind a frosted form; Rascal sits on the form. */
.book { padding: clamp(110px, 12vw, 180px) 0 clamp(120px, 12vw, 190px); overflow: clip; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -30px; z-index: 2; isolation: isolate; }
.book__sky { position: absolute; inset: 0; z-index: -1; }
.book__sky img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.2); transform: scale(1.15); opacity: .55; }
.book__sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(14,63,35,.96) 0%, rgba(14,63,35,.86) 45%, rgba(14,63,35,.55) 100%); }
.book__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 6vw, 110px); align-items: start; }
.book__copy { display: grid; gap: 26px; justify-items: start; }
.book__copy .display { color: #fff; max-width: 9ch; }
.book__copy .display em { color: #CFE8D6; }
.hours { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.fx-live { width: 9px; height: 9px; border-radius: 50%; background: rgba(250,250,247,.4); }
.fx-live.is-open { background: #63D49A; box-shadow: 0 0 0 0 rgba(99,212,154,.6); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { to { box-shadow: 0 0 0 10px rgba(99,212,154,0); } }
.offers { display: grid; gap: 10px; }
.tickets { display: flex; flex-wrap: wrap; gap: 14px; }
.ticket { display: flex; min-height: 132px; border-radius: 18px; overflow: hidden; background: var(--paper); color: var(--navy); box-shadow: 0 24px 40px -26px rgba(0,0,0,.6);
  transition: transform .5s var(--ease-spring); }
.ticket:hover { transform: translateY(-4px) rotate(-1deg); }
.ticket__main { padding: 18px 20px; display: grid; align-content: center; gap: 6px; max-width: 230px; }
.ticket__big { font: 800 clamp(34px, 3.2vw, 46px)/.9 var(--f-display); font-stretch: 80%; letter-spacing: -.03em; color: var(--forest); }
.ticket__what { font-size: 15px; line-height: 1.35; }
.ticket__stub { position: relative; width: 46px; display: grid; place-items: center; border-left: 2px dashed rgba(31,58,95,.25); background: var(--mint); }
.ticket__stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--forest); }
.ticket--2 { background: var(--mint); } .ticket--2 .ticket__stub { background: var(--paper); }
.fine { font-size: 14px; color: rgba(255,255,255,.75); }
.book__call { color: rgba(255,255,255,.85); }
.book__call a { color: #fff; font-weight: 700; }
.form-wrap { position: relative; }
.book__rascal { position: absolute; width: clamp(84px, 9vw, 120px); height: auto; right: 34px; top: 0; transform: translateY(-78%); z-index: 2; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.book__bubble { position: absolute; right: clamp(120px, 12vw, 170px); top: -64px; z-index: 2; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--paper); color: var(--navy); font: 700 15px/1.2 var(--f-body);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); transform-origin: 100% 100%; }
.book .form { position: relative; display: grid; gap: 16px; padding: clamp(24px, 3vw, 38px); border-radius: 28px; background: rgba(250,250,247,.93); color: var(--navy);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 50px 90px -40px rgba(0,0,0,.6); }
.book .f-row { display: grid; gap: 7px; border: 0; padding: 0; margin: 0; min-width: 0; }
.book .f-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.book label, .book legend { font: 700 15px/1.2 var(--f-body); padding: 0; }
.book .req { color: var(--forest); }
.book .opt { font-weight: 500; color: var(--ink-soft); }
.book input:not([type=radio]):not([type=checkbox]), .book textarea { width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 14px; border: 1.5px solid rgba(31,58,95,.22); background: #fff;
  font: 500 17px/1.3 var(--f-body); color: var(--navy); transition: border-color .2s, box-shadow .2s; }
.book textarea { min-height: 96px; resize: vertical; }
.book input:focus, .book textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 4px rgba(30,122,70,.16); }
.book [aria-invalid="true"] { border-color: #C0392B !important; }
.book .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.book .chips label { position: relative; cursor: pointer; }
.book .chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.book .chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--mint); font: 650 15px/1 var(--f-body); transition: background-color .2s, color .2s; }
.book .chips input:checked + span { background: var(--navy); color: #fff; }
.book .chips input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.book .f-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 15px; }
.book .f-consent input { width: 22px; height: 22px; accent-color: var(--forest); margin: 0; flex: none; }
.book .f-confirm { text-align: center; font-size: 14.5px; font-weight: 600; margin-top: -4px; }
.book .f-msg { font-weight: 700; font-size: 15px; }
.book .f-msg:empty { display: none; }
.book .f-msg.err { color: #B03A2E; }
.book .f-msg.ok { color: var(--forest); padding: 12px 14px; border-radius: 12px; background: var(--mint); }
@media (max-width: 900px) {
  .book__grid { grid-template-columns: 1fr; }
  .form-wrap { margin-top: 70px; }
  .book .f-two { grid-template-columns: 1fr; }
  .book__bubble { right: 110px; top: -58px; font-size: 14px; }
  .book__rascal { right: 18px; }
}
/* spam trap: off-screen, only bots fill it; Turnstile slot takes space only when live (never in this preview) */
.book .f-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ac-turnstile { display: none; }
.ac-turnstile.is-on { display: block; min-height: 65px; }
.v5 .btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---- faq.css ---- */
/* Questions, answered (paper): sticky heading + Rascal chat card; numbered question rows with the flashlight hover. */
.faq { padding: clamp(110px, 12vw, 170px) 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -30px; z-index: 2; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.faq__side { position: sticky; top: calc(var(--bar-h) + 40px); display: grid; gap: 34px; justify-items: start; }
.ask-card { display: flex; align-items: center; gap: 16px; padding: 12px 22px 12px 12px; border: 0; border-radius: 999px; cursor: pointer; background: var(--navy); color: #fff;
  font: 700 17px/1.2 var(--f-body); text-align: left; box-shadow: 0 24px 40px -24px rgba(11,23,38,.7); transition: transform .4s var(--ease-spring), background-color .25s; }
.ask-card img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; background: var(--mint); box-shadow: 0 0 0 3px var(--forest); }
.ask-card__go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(250,250,247,.14); transition: transform .4s var(--ease-out); }
.ask-card:hover { transform: translateY(-3px) rotate(-1deg); background: var(--dusk-700); }
.ask-card:hover .ask-card__go { transform: translateX(4px); }
/* questions as big rows on hairlines (no box per row); the flashlight follows the pointer along the row */
.faq__list { border-top: 1.5px solid var(--navy); }
.qa { --mx: 50%; --my: 50%; position: relative; border-bottom: 1px solid var(--line); }
.qa::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(300px 140px at var(--mx) var(--my), rgba(255,226,160,.3), transparent 70%); }
.qa:hover::before { opacity: 1; }
.qa summary { position: relative; list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: 30px 4px; font: 760 clamp(24px, 2.3vw, 36px)/1.1 var(--f-display); font-stretch: 86%; letter-spacing: -.02em; transition: color .3s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover, .qa[open] summary { color: var(--forest); }
.qa summary i { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(31,58,95,.3); transition: background-color .3s, box-shadow .3s, transform .5s var(--ease-out); }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; background: var(--navy); border-radius: 2px; }
.qa summary i::after { transform: rotate(90deg); transition: transform .4s var(--ease-out); }
.qa[open] summary i { background: var(--forest); box-shadow: none; transform: rotate(180deg); }
.qa[open] summary i::before { background: #fff; }
.qa[open] summary i::after { transform: rotate(0); background: #fff; }
.qa__a { position: relative; padding: 0 80px 30px 4px; color: var(--ink-soft); font-size: 18.5px; max-width: 62ch; animation: qaIn .45s var(--ease-out); }
.qa__a a { color: var(--forest); font-weight: 700; }
@keyframes qaIn { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__side { position: static; gap: 22px; }
  .qa summary { gap: 14px; padding: 22px 2px; font-size: 22px; }
  .qa summary i { width: 42px; height: 42px; }
  .qa__a { padding: 0 2px 24px; }
}

/* ---- cities.css ---- */
/* We come to you (dusk): copy + city checker on the left, the living service-area map on the right. */
.cities { padding: clamp(100px, 10vw, 150px) 0 clamp(120px, 11vw, 170px); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -30px; z-index: 2;
  background: radial-gradient(60% 70% at 75% 55%, #16304F 0%, var(--dusk-900) 70%); }
.cities__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.cities__copy { display: grid; gap: 26px; }
.cities__h { color: #fff; font-size: clamp(42px, 5vw, 84px); max-width: 12ch; }
.cities__h em { color: #CFE8D6; }
.cities__line { color: var(--on-dark-soft); max-width: 52ch; }
.cities__line a { color: #fff; font-weight: 700; }
.city-check { display: grid; gap: 10px; padding: 22px; border-radius: var(--radius); background: rgba(250,250,247,.07); box-shadow: inset 0 0 0 1px rgba(250,250,247,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; max-width: 520px; }
.city-check label { font-weight: 700; }
.city-check__row { display: flex; gap: 10px; }
.city-check input { flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(250,250,247,.25); font: 500 17px var(--f-body);
  color: var(--navy); background: var(--paper); }
.city-check input:focus { outline: none; border-color: #8FD3B0; box-shadow: 0 0 0 4px rgba(143,211,176,.25); }
.v5-home .btn-light { background: var(--mint); color: var(--navy); min-height: 52px; }
.v5-home .btn-light:hover { background: #fff; transform: translateY(-2px); }
.city-check__out { font-weight: 600; min-height: 1.4em; color: var(--on-dark); }
.city-check__out a { color: #8FD3B0; }

.map { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: #0F2036; box-shadow: 0 0 0 1px rgba(250,250,247,.1), 0 60px 100px -60px rgba(0,0,0,.8); }
.map__svg { display: block; width: 100%; height: auto; max-height: min(80svh, 760px); }
.map__land { fill: #17304C; }
.map__water { fill: #0A1626; }
.map__shore { fill: none; stroke: rgba(143,211,176,.55); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.map__sea { fill: rgba(250,250,247,.22); font: italic 400 34px var(--f-serif); letter-spacing: .02em; }
.map__city { cursor: pointer; }
.map__dot { fill: #8FD3B0; transition: fill .25s, r .3s var(--ease-spring); }
.map__city--page .map__dot { fill: #fff; stroke: var(--forest); stroke-width: 3; }
.map__ring { fill: none; stroke: rgba(143,211,176,.7); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.map__label { fill: #fff; font: 700 22px var(--f-body); paint-order: stroke; stroke: rgba(10,22,38,.9); stroke-width: 6px; stroke-linejoin: round; pointer-events: none; }
.map__city.is-hot .map__dot { fill: var(--sky); r: 10; }
.map a:focus-visible { outline: none; }
.map a:focus-visible .map__dot { stroke: var(--sky); stroke-width: 5; }
.map__read { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 20px; font-weight: 600; color: var(--on-dark); background: rgba(10,22,38,.85);
  border-top: 1px solid rgba(250,250,247,.1); min-height: 58px; }
.map__read a { color: #8FD3B0; font-weight: 700; }
.map__pin { width: 10px; height: 10px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(59,169,218,.25); }

/* entrance: the shore draws, dots ripple out from San Jose, page cities pulse */
.map:not(.is-in) .map__shore { stroke-dashoffset: 1; }
.map:not(.is-in) .map__dot, .map:not(.is-in) .map__label { opacity: 0; }
.map.is-in .map__shore { transition: stroke-dashoffset 2.4s var(--ease-io); }
.map.is-in .map__dot { animation: dotIn .6s var(--ease-spring) both; animation-delay: calc(.6s + var(--t)); transform-box: fill-box; transform-origin: center; }
.map.is-in .map__label { animation: labIn .5s var(--ease-out) both; animation-delay: calc(.4s + var(--t) * .5); }
.map.is-in .map__ring { animation: ring 2.8s var(--ease-out) infinite; animation-delay: calc(1.2s + var(--t)); }
.map.is-still .map__dot, .map.is-still .map__label { animation: none; opacity: 1; }
@keyframes dotIn { from { opacity: 0; transform: scale(0); } }
@keyframes labIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes ring { 0% { opacity: .9; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(2.6); } }
@media (max-width: 900px) {
  .cities__grid { grid-template-columns: 1fr; }
  .map { margin-inline: -6px; border-radius: 26px; }
  .map__label { font-size: 34px; stroke-width: 8px; }
  .map__city--page:not(.map__city--big) .map__label { display: none; }
  .map__city--page .map__dot { r: 10; }
  .map__dot { r: 7; }
  .map__sea { font-size: 46px; }
}
.map::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px 260px at var(--mx, 60%) var(--my, 55%), rgba(255,226,160,.14), transparent 70%); }
.map:hover::after { opacity: 1; }

/* ---- pages.css ---- */
/* Inner pages theme (services, cities, San Jose guides, projects, blog, legal): the live markup and copy, restyled to
   match the v5 home. Loaded after the live style.css + pages.css, so it only overrides; [data-v5] = an inner page. */
[data-v5] { background: var(--paper); font-family: var(--f-body); }

/* type: Bricolage display in sentence case instead of the old all-caps */
[data-v5] :is(.p-h1, .p-h2, .display, .h2, h3, .jd-h, .cmp-h, .story-h, .refer-h, .rel b, .hub-grid b, .post-body h2, .topic-h3, .t-big, .fa-cap) {
  font-family: var(--f-display); text-transform: none; font-weight: 760; font-stretch: 84%; font-variation-settings: 'opsz' 96; letter-spacing: -.03em; }
[data-v5] .p-h1 { line-height: .92; letter-spacing: -.035em; }
[data-v5] .p-h1 .l:last-child { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -.01em; color: #CFE8D6; }
[data-v5] .p-h2 { line-height: .95; color: var(--navy); }
[data-v5] .p-sec-navy .p-h2, [data-v5] .p-sec-green .p-h2 { color: #fff; }
[data-v5] h3 { letter-spacing: -.02em; }
[data-v5] .post-body h2 { color: var(--navy); }

/* hero: the dusk ground with the painted house, like the home page */
[data-v5] .p-hero { background: radial-gradient(90% 120% at 80% 0%, #1C3556 0%, var(--dusk-900) 70%) !important; color: var(--on-dark); padding-top: calc(var(--bar-h) + 60px); }
[data-v5] .p-hero-bg img { opacity: .5; filter: saturate(1.1); }
[data-v5] .p-hero .p-lede { color: var(--on-dark-soft); }
[data-v5] .p-hero .crumbs, [data-v5] .p-hero .crumbs a { color: var(--on-dark-soft); }
[data-v5] .p-card { border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 5px var(--paper), 0 40px 70px -30px rgba(0,0,0,.6); }

/* sections: boards stacked with soft rounded tops, each on its own ground */
[data-v5] .p-sec { position: relative; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -30px; padding-top: calc(clamp(56px, 6vw, 96px) + 30px); }
[data-v5] .p-sec-navy { background: var(--dusk-900); }
[data-v5] .p-sec-mint { background: var(--mint); }
[data-v5] .p-sec-white { background: var(--paper); }
[data-v5] main > section:first-child + .p-sec { margin-top: -30px; }

/* cards, chips and photos: one radius family, lift on hover */
[data-v5] :is(.st, .sign, .mat, .rel a, .hub-grid a, .c-stat, .post-fig, .ph, .near li, .svc-links a) { border-radius: 20px; }
[data-v5] :is(.rel a, .hub-grid a, .svc-links a) { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
[data-v5] :is(.rel a, .hub-grid a, .svc-links a):hover { transform: translateY(-4px); box-shadow: 0 26px 40px -28px rgba(11,23,38,.55); }
[data-v5] :is(.ph, .post-fig) img { border-radius: 14px; }

/* photos from the live markup never shown larger than their sharp size */
[data-v5] :is(.ph, .post-fig, .p-card, .proj-fig, .c-photo) img { max-width: 100%; }

/* blog article: reading column + progress in sky blue */
[data-v5] .post-body { font-size: 18.5px; line-height: 1.65; }
[data-v5] .post-body a { color: var(--forest); }
/* photos whose best original is under 1400 px: never wider than half (2x screens) / a third (3x phones) of it */
[data-v5] img[data-v5-cap] { max-width: min(100%, calc(var(--cap) / 2)); }
@media (max-width: 600px) { [data-v5] img[data-v5-cap] { max-width: min(100%, calc(var(--cap) / 3)); } }
[data-v5] .p-card:has(img[data-v5-cap]) { max-width: 480px; }
[data-v5] .post-fig:has(img[data-v5-cap]) { max-width: 480px; margin-inline: auto; }

/* closing "Book your free inspection" band: forest flood board, white heading */
[data-v5] .p-close { position: relative; background: var(--forest-900); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: -30px; padding: clamp(80px, 9vw, 130px) 0 clamp(100px, 10vw, 150px); overflow: hidden; }
[data-v5] .p-close::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(60% 90% at 90% 10%, rgba(30,122,70,.8), transparent 70%); }
[data-v5] .p-close .wrap { position: relative; }
[data-v5] .p-close .p-h2 { color: #fff; }
[data-v5] .p-close .p-h2 .l:last-child, [data-v5] .p-close .p-h2 em { color: #CFE8D6; }

/* ---- reduced.css ---- */
/* prefers-reduced-motion: nothing moves on its own, every scene is shown in its final, readable state. */
@media (prefers-reduced-motion: reduce) {
  .v5-home *, .v5-home *::before, .v5-home *::after { animation: none !important; transition-duration: .01ms !important; }
  .hero [data-intro], .hero .ln-i { opacity: 1 !important; transform: none !important; }
  .fix.is-live .fix__row { opacity: 1; }
  .stay { height: auto; padding: 110px 0; } .stay__pin { position: static; height: auto; }
  .stay__step { opacity: 1; } .stay__stamp { opacity: .92; transform: rotate(-9deg); }
  .ba { height: auto; } .ba__pin { position: static; height: auto; padding-block: 40px; }
  .ba__frame { --p: .5 !important; }
  .strip { height: auto; } .strip__pin { position: static; height: auto; }
  .strip__scroller { overflow-x: auto; } .strip__track { transform: none !important; }
  .band__track { transform: none !important; }
}