/* =====================================================================================================================
   OBSIDIAN home page (site/css/home.css). The film first, then the business.
   Film: a tall section whose stage sticks while the scroll scrubs the footage (home-film.js), then scrolls away.
   Reduced motion (html.film-still / .no-motion): the stage turns into five still panels, one per chapter.
   ===================================================================================================================== */

/* ---------- the film ---------- */
.film {
  --film-len: 8.8; /* the chapters' scroll length in stage heights (home-film.js sets the exact height) */
  --edge: max(var(--pad), calc((100vw - var(--max)) / 2));
  --ui: 0px; /* on phones: the part of the stage hidden under the browser's bar */
  position: relative; height: calc((var(--film-len) + 1) * 100vh); background: var(--bg);
}
@supports (height: 100lvh) {
  .film { height: calc((var(--film-len) + 1) * 100lvh); --ui: calc(100lvh - 100svh); }
}
.film-stage { --out: 0; position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; isolation: isolate; background: var(--bg); }
.film-poster, .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-poster { object-fit: cover; }
.film-poster.is-under { visibility: hidden; }
/* leaving: the picture sinks back into the dark like a screen switching off */
.film-canvas { transform: scale(calc(1 - var(--out) * 0.07)); border-radius: calc(var(--out) * 34px); transform-origin: 50% 40%; }
.film-shade { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent 38%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.3) 10%, transparent 22%); } /* the lit ceiling strips stay behind the nav */
.film-shade::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: calc(var(--out) * 0.55); }
.film-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: calc(1 - var(--out) * 1.2); }
.film-ui button, .film-ui a, .film-ui select, .film-ui label { pointer-events: auto; }

/* the chip: live context, top left */
.film-chip { position: absolute; top: calc(var(--hdr-h) + 14px); left: var(--edge); display: flex; align-items: center; gap: 10px; padding: 9px 15px 9px 13px; border-radius: 999px;
  font: 500 12.5px/1 var(--mono); color: rgba(243, 245, 247, 0.7); background: rgba(10, 12, 14, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.film-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 12px var(--ice); animation: pulse 2.2s ease-in-out infinite; }
.film-chip b { font-weight: 500; color: var(--ink); }
/* the studio is closed right now (same Mon–Sat 8–6 clock as /studio/): the light rests dim */
.film-chip.is-closed i { background: rgba(243, 245, 247, 0.45); box-shadow: none; animation: none; }

/* the opening: the studio starts dark (html.film-dark, set before first paint) until home-film.js switches its lights on
   (.film.is-lit). The ice outline and the chip's light are dim until then, and flicker on with the ceiling (.slam).
   If the script never runs, they come on by themselves after a few seconds. */
html.film-dark:not(.film-still) .film:not(.is-lit) .ch[data-ch="0"] .ch-head em { -webkit-text-stroke-color: rgba(139, 233, 255, 0.4); text-shadow: none; animation: wake-em 0.01s 4s forwards; }
html.film-dark:not(.film-still) .film:not(.is-lit) .film-chip i { background: rgba(243, 245, 247, 0.3); box-shadow: none; animation: wake-dot 0.01s 4s forwards; }
@keyframes wake-em { to { -webkit-text-stroke-color: var(--ice); } }
@keyframes wake-dot { to { background: var(--ice); } }
.film.slam .ch[data-ch="0"] .ch-head em { animation: tube-on 0.6s linear; }
.film.slam .film-chip i { animation: tube-on 0.6s linear, pulse 2.2s 0.6s ease-in-out infinite; }
.film.slam .film-chip.is-closed i { animation: tube-on 0.6s linear; }
@keyframes tube-on { 0% { opacity: 0.35; } 12% { opacity: 1; } 22% { opacity: 0.3; } 36% { opacity: 1; } 50% { opacity: 0.65; } 64%, 100% { opacity: 1; } }

/* the chapter rail, right; a soft shade behind it keeps the labels readable over the lit bottle shelf */
.film-rail { position: absolute; right: var(--edge); top: 50%; transform: translateY(-50%); }
.film-rail::before { content: ""; position: absolute; z-index: -1; inset: -48px -40px -48px -70px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(4, 5, 6, 0.62), rgba(4, 5, 6, 0.3) 60%, transparent); }
.film-rail ol { list-style: none; display: grid; }
.film-rail button { display: flex; align-items: center; justify-content: flex-end; gap: 12px; width: 100%; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 11.5px/1 var(--mono); letter-spacing: 0.04em; color: rgba(243, 245, 247, 0.58); transition: color 0.3s; text-shadow: 0 0 3px rgba(4, 5, 6, 0.95), 0 1px 10px rgba(4, 5, 6, 0.9); }
.film-rail button span { margin-right: -4px; }
.film-rail button::after { content: ""; flex: none; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: width 0.35s var(--ease), background 0.3s, box-shadow 0.3s; }
.film-rail button:hover { color: var(--ink); }
.film-rail button.done { color: rgba(243, 245, 247, 0.72); }
.film-rail button.on { color: var(--ink); }
.film-rail button.on::after { width: 34px; background: var(--ice); box-shadow: 0 0 10px var(--ice); }

/* chapter copy: huge, one beat per line, bottom left or bottom right */
.film-chs { position: absolute; inset: 0; }
.ch { position: absolute; bottom: calc(15vh + var(--ui)); opacity: 0; }
.ch:first-child { opacity: 1; } /* before the script runs, the opening line is already up */
.ch.left { left: var(--edge); }
.ch.right { right: calc(var(--edge) + 150px); text-align: right; }
.ch-still { display: none; }
.ch-copy { max-width: min(50vw, 820px); }
.ch-n { margin-bottom: 18px; font: 500 13px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--ice); }
.ch-head { font-size: clamp(46px, 6vw, 112px); line-height: 0.88; letter-spacing: -0.02em; text-wrap: nowrap; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.35); }
.ch-head em { text-shadow: 0 0 0.24em rgba(139, 233, 255, 0.3); }
.ch-head em.gold { color: transparent; -webkit-text-stroke-color: var(--gold); text-shadow: 0 0 0.24em rgba(255, 181, 90, 0.35); }
.ch-head .beat { display: block; white-space: nowrap; }
/* the opener reads as one line on wide screens ("BRING IT DIRTY.") and as two big beats on phones */
@media (min-width: 861px) {
  .ch[data-ch="0"] .ch-head { font-size: clamp(52px, 6.8vw, 124px); }
  .ch[data-ch="0"] .ch-head .beat { display: inline; }
}
/* chapter 02 says "Scroll to wash it." while the film runs, and "Half washed." when it is a still panel */
.ch-head .st { display: none; }
:is(html.film-still, html.no-motion, html:not(.js)) .ch-head .mo { display: none; }
:is(html.film-still, html.no-motion, html:not(.js)) .ch-head .st { display: inline; }
.ch-head .w { display: inline-block; will-change: transform, opacity; }
.ch-sub { margin-top: 22px; max-width: 30em; font-size: clamp(16px, 1.25vw, 21px); line-height: 1.45; color: rgba(243, 245, 247, 0.74); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }
.ch.right .ch-sub { margin-left: auto; }
.gold-ch .ch-n { color: var(--gold); }

/* booking bar: car + work, then on to /book/ */
.film-book { position: absolute; left: 50%; bottom: calc(26px + var(--ui)); transform: translateX(-50%); display: flex; align-items: stretch; gap: 4px; padding: 6px; border-radius: 999px; opacity: 0;
  background: rgba(10, 12, 14, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
.film-book:not(.is-on) * { pointer-events: none; }
.film-book label { display: grid; align-content: center; gap: 3px; padding: 6px 20px 6px 20px; border-right: 1px solid var(--faint); cursor: pointer; }
.film-book label span { font: 500 10.5px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.film-book select { appearance: none; -webkit-appearance: none; min-width: 7.2em; padding: 2px 22px 2px 0; border: 0; border-radius: 4px; cursor: pointer; font: 600 15px/1.3 var(--sans); color: var(--ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238be9ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 10px 7px no-repeat; }
.film-book select option { background: #101317; color: var(--ink); }
.film-book .film-book-go { margin-left: 4px; }

/* hint and the play button */
.film-hint { position: absolute; left: 50%; bottom: calc(112px + var(--ui)); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; white-space: nowrap;
  font: 500 12.5px/1 var(--mono); color: var(--dim); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.film-hint span { color: var(--ice); display: inline-block; animation: hint-bob 1.6s var(--ease-io) infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.film-play { position: absolute; left: var(--edge); bottom: calc(26px + var(--ui)); min-width: 172px; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 22px 0 12px;
  border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; font: 600 14.5px/1 var(--sans); color: var(--ink);
  background: rgba(10, 12, 14, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); transition: box-shadow 0.3s; }
.film-play:hover { box-shadow: inset 0 0 0 1px rgba(139, 233, 255, 0.6), 0 0 30px rgba(139, 233, 255, 0.15); }
.film-play .ico { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(180deg, #c8f6ff, var(--ice)); box-shadow: 0 0 18px rgba(139, 233, 255, 0.45); }
.film-play .ico::before, .film-play .ico::after { content: ""; position: absolute; background: var(--ice-ink); }
.film-play[data-state="idle"] .ico::before, .film-play[data-state="paused"] .ico::before { left: 12px; top: 10px; width: 11px; height: 12px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.film-play[data-state="playing"] .ico::before { left: 11px; top: 10px; width: 3.5px; height: 12px; border-radius: 1px; }
.film-play[data-state="playing"] .ico::after { left: 17.5px; top: 10px; width: 3.5px; height: 12px; border-radius: 1px; }
.film-play[data-state="ended"] .ico::before { left: 9px; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: none; border: 2.5px solid var(--ice-ink); border-top-color: transparent; }
.film-play[data-state="ended"] .ico::after { left: 16px; top: 7px; width: 6px; height: 6px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.film-play .prog { position: absolute; left: 24px; right: 24px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--ice); box-shadow: 0 0 8px var(--ice); transform-origin: left; transform: scaleX(0); opacity: 0.9; }

/* over the film the header stays clear (no glass band across the picture), and the phone dock waits */
html.in-film .hdr.is-scrolled:not(.svc-open)::after { opacity: 0; }
html.in-film .hdr.is-scrolled::before { opacity: 1; }
html.in-film .dock.show { transform: translateY(170%); }

/* narrower screens: the rail folds down to lit dashes at the edge, so it never crowds a right-hand headline */
@media (max-width: 1180px) {
  .film-rail { right: max(2px, calc(var(--edge) - 30px)); }
  .film-rail::before { display: none; }
  .film-rail button { width: 44px; min-height: 44px; justify-content: center; font-size: 0; gap: 0; }
  .film-rail button span { display: none; }
  .film-rail button::after { width: 3px; height: 16px; }
  .film-rail button.on::after { width: 3px; height: 28px; }
  .ch.right { right: calc(var(--edge) + 40px); }
}
@media (max-width: 860px) {
  .film-rail { right: 2px; }
  .ch, .ch.right { left: var(--pad); right: var(--pad); text-align: left; bottom: calc(max(19vh, 178px) + var(--ui)); }
  /* the opener is the biggest type in the film: two beats, about 56 px on a phone (home-film.js shrinks a beat that
     would not fit) */
  .ch[data-ch="0"] .ch-head { font-size: clamp(44px, 15vw, 64px); }
  .ch-copy { max-width: none; }
  .ch.right .ch-sub { margin-left: 0; }
  .ch-n { margin-bottom: 14px; font-size: 12px; }
  .ch-sub { margin-top: 16px; font-size: 16.5px; }
  .film-book { left: 12px; right: 12px; transform: none; bottom: calc(14px + env(safe-area-inset-bottom) + var(--ui)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .film-book label { padding: 4px 8px 4px 16px; }
  .film-book select { min-width: 0; width: 100%; font-size: 14.5px; }
  .film-book .film-book-go { min-height: 50px; padding: 0 18px; }
  .film-play { left: var(--pad); bottom: calc(86px + env(safe-area-inset-bottom) + var(--ui)); min-height: 50px; min-width: 0; }
  .film-hint { left: var(--pad); transform: none; bottom: calc(148px + env(safe-area-inset-bottom) + var(--ui)); font-size: 11.5px; gap: 6px; }
}
@media (max-width: 380px) {
  .film-book label { padding-left: 12px; }
  .film-book .film-book-go { padding: 0 14px; }
}

/* ---------- still mode: reduced motion (or no motion scripts), the film as five panels ---------- */
html.film-still .film, html.no-motion .film, html:not(.js) .film { height: auto !important; }
html.film-still .film-stage, html.no-motion .film-stage, html:not(.js) .film-stage { position: relative; height: auto; overflow: visible; }
html.film-still :is(.film-canvas, .film-poster, .film-shade, .film-hint, .film-play, .film-chip, .film-rail),
html.no-motion :is(.film-canvas, .film-poster, .film-shade, .film-hint, .film-play, .film-chip, .film-rail),
html:not(.js) :is(.film-canvas, .film-poster, .film-shade, .film-hint, .film-play, .film-chip, .film-rail) { display: none; }
html.film-still .film-ui, html.no-motion .film-ui, html:not(.js) .film-ui { position: relative; inset: auto; opacity: 1; pointer-events: auto; }
html.film-still .film-chs, html.no-motion .film-chs, html:not(.js) .film-chs { position: relative; inset: auto; }
html.film-still .ch, html.no-motion .ch, html:not(.js) .ch {
  position: relative; inset: auto; isolation: isolate; overflow: hidden; display: grid; align-items: end; opacity: 1 !important; min-height: max(560px, 92svh);
  padding: calc(var(--hdr-h) + 48px) var(--edge) clamp(60px, 9vw, 130px); }
html.film-still .ch.right, html.no-motion .ch.right, html:not(.js) .ch.right { justify-items: end; }
html.film-still .ch-still, html.no-motion .ch-still, html:not(.js) .ch-still { display: block; position: absolute; inset: 0; z-index: -1; }
:is(html.film-still, html.no-motion, html:not(.js)) .ch-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:is(html.film-still, html.no-motion, html:not(.js)) .ch-still::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 5, 6, 0.9), rgba(4, 5, 6, 0.1) 55%, rgba(4, 5, 6, 0.45)), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55)); }
:is(html.film-still, html.no-motion, html:not(.js)) .ch-split .clean { clip-path: inset(0 50% 0 0); }
:is(html.film-still, html.no-motion, html:not(.js)) .ch-split i { position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.9), 0 0 34px 6px rgba(139, 233, 255, 0.55); }
:is(html.film-still, html.no-motion, html:not(.js)) .ch-copy { max-width: none; }
@media (max-width: 860px) {
  :is(html.film-still, html.no-motion, html:not(.js)) .ch-head { font-size: 8.2vw; }
  :is(html.film-still, html.no-motion, html:not(.js)) .ch-head .beat { white-space: normal; }
  :is(html.film-still, html.no-motion, html:not(.js)) .ch[data-ch="0"] .ch-head { font-size: min(14.5vw, 64px); }
}
:is(html.film-still, html.no-motion, html:not(.js)) .ch:last-child { padding-bottom: clamp(150px, 14vw, 210px); }
:is(html.film-still, html.no-motion, html:not(.js)) .film-book { position: relative; left: auto; right: auto; bottom: auto; transform: none; opacity: 1; width: max-content; max-width: calc(100% - 2 * var(--pad)); margin: -96px auto 60px; }
:is(html.film-still, html.no-motion, html:not(.js)) .film-book * { pointer-events: auto; }
@media (max-width: 860px) { :is(html.film-still, html.no-motion, html:not(.js)) .film-book { width: auto; max-width: none; margin: -96px 12px 60px; } }

/* ---------- the handoff: the studio's lights ---------- */
.home-open { padding-top: clamp(120px, 12vw, 190px); }
.home-open .display { font-size: clamp(32px, 6.8vw, 116px); }
/* full width, so on phones the shared headline fit can shrink "Love your car?" onto one line */
.home-open .display, .home-reviews .display { justify-self: stretch; }
.home-open .head { margin-bottom: 0; }
.open-pills { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 10px; }

/* ---------- services: four photos; the one you point at opens ---------- */
.home-svc { padding-block: clamp(80px, 8vw, 130px) clamp(70px, 7vw, 110px); }
.home-svc .head { margin-bottom: clamp(36px, 4vw, 60px); }
.deck { display: flex; gap: clamp(10px, 1vw, 16px); height: clamp(560px, 44vw, 720px); }
.deck-card { position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; min-width: 0; border-radius: var(--r-lg); background: var(--char); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px rgba(0, 0, 0, 0.45); transition: flex-grow 0.9s var(--ease), box-shadow 0.5s; }
.deck-card.is-open { flex-grow: 3.3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 90px rgba(0, 0, 0, 0.55); }
.deck-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: brightness(0.5) saturate(0.7);
  transition: transform 1.4s var(--ease), filter 0.8s; }
.deck-card.is-open > img { transform: scale(1); filter: none; }
@media (hover: hover) { .deck-card.is-open:hover > img { transform: scale(1.035); } }
.deck-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 5, 6, 0.95) 0%, rgba(4, 5, 6, 0.55) 34%, rgba(4, 5, 6, 0) 62%), linear-gradient(160deg, rgba(255, 255, 255, 0.07), transparent 28%); }
/* the open card gets its own LED strip along the top */
.deck-card::after { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 2px; border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  background: linear-gradient(90deg, transparent, #fff 18%, #fff 82%, transparent); box-shadow: var(--led); }
.deck-card.is-open::after { opacity: 1; }
.deck-n { position: absolute; top: 18px; left: 18px; padding: 8px 11px; border-radius: 999px; font: 500 12.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--ice);
  background: rgba(4, 5, 6, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.deck-side { position: absolute; left: 24px; bottom: 30px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 800 clamp(18px, 1.5vw, 24px)/1 var(--display); font-stretch: 118%; letter-spacing: 0.01em; text-transform: uppercase; transition: opacity 0.35s; }
.deck-card.is-open .deck-side { opacity: 0; }
.deck-body { position: absolute; left: 0; bottom: 0; width: clamp(360px, 32vw, 560px); max-width: 100%; display: grid; gap: 14px; justify-items: start; padding: clamp(26px, 2.6vw, 42px);
  opacity: 0; transform: translateY(18px); transition: opacity 0.3s, transform 0.7s var(--ease); }
.deck-card.is-open .deck-body { opacity: 1; transform: none; transition-delay: 0.28s; }
.deck-body .tag { color: var(--ice); }
.deck-body h3 { font-size: clamp(30px, 2.8vw, 48px); font-weight: 900; font-stretch: 125%; }
.deck-body p { max-width: 26em; color: rgba(243, 245, 247, 0.8); font-size: 17px; line-height: 1.5; }
.deck-body .link-arrow { margin-top: 4px; }
@media (hover: hover) { .deck-card:hover .link-arrow { color: var(--ice-hi); } .deck-card:hover .link-arrow i { transform: translateX(5px); background: var(--ice); color: var(--ice-ink); box-shadow: 0 0 24px var(--ice-glow); } }
.deck-card:focus-visible { outline: 2px solid var(--ice); outline-offset: 4px; }
.deck-dots { display: none; }
@media (max-width: 1080px) {
  .deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .deck-card { min-height: 480px; }
  .deck-card > img { transform: none; filter: none; }
  .deck-card::after, .deck-side { display: none; }
  .deck-body { width: 100%; opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .deck { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding: 4px var(--pad) 10px; scroll-padding-inline: var(--pad); }
  .deck::-webkit-scrollbar { display: none; }
  .deck-card { flex: 0 0 84%; min-height: 470px; scroll-snap-align: start; }
  .deck-body h3 { font-size: 30px; }
  .deck-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .deck-dots i { width: 16px; height: 3px; border-radius: 3px; background: var(--faint); transition: width 0.4s var(--ease), background 0.3s, box-shadow 0.3s; }
  .deck-dots i.on { width: 30px; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
}

/* ---------- your visit: drop-off to pick-up, in real photos; a light line runs along the top ---------- */
.home-visit { padding-top: clamp(90px, 9vw, 150px); }
.visit { --gap: clamp(14px, 1.6vw, 26px); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.visit-step { position: relative; display: grid; align-content: start; gap: 10px; padding-top: 34px; }
/* the line: one segment per step (it runs on under the gap to the next one), lit as that step switches on */
.visit-step::before, .visit-step::after { content: ""; position: absolute; top: 7px; left: 0; right: calc(-1 * var(--gap)); height: 2px; border-radius: 2px; pointer-events: none; }
.visit-step:last-child::before, .visit-step:last-child::after { right: 0; }
.visit-step::before { background: var(--faint); }
.visit-step::after { background: linear-gradient(90deg, #fff, #fff 70%, var(--ice)); box-shadow: var(--led); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.7s var(--ease); }
.visit-step.on::after { transform: scaleX(1); }
.visit-dot { position: absolute; z-index: 1; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--faint); transition: box-shadow 0.4s, background 0.4s; }
.visit-step.on .visit-dot { background: var(--ice); box-shadow: 0 0 0 4px rgba(139, 233, 255, 0.16), 0 0 18px var(--ice); }
.visit-pic { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 12px; border-radius: var(--r-lg); background: var(--char);
  box-shadow: inset 0 0 0 1px var(--line), 0 34px 70px rgba(0, 0, 0, 0.5); }
.visit-pic img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
/* gloss along the top edge, and the room's light: dark until the step switches on (opacity only) */
.visit-pic::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.1), transparent 26%), linear-gradient(to top, rgba(4, 5, 6, 0.7), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.visit-pic::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #020304; opacity: 0; pointer-events: none; }
html.js:not(.no-motion) .visit-step:not(.on) .visit-pic::after { opacity: 0.78; }
html.js:not(.no-motion) .visit-step.on .visit-pic::after { animation: studio-on 1.2s linear forwards; }
@media (hover: hover) { .visit-step:hover .visit-pic img { transform: scale(1.04); } }
.visit-n { position: absolute; z-index: 2; left: 18px; bottom: 12px; font: 900 clamp(56px, 5vw, 86px)/1 var(--display); font-stretch: 125%; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--ice); text-shadow: 0 0 0.24em rgba(139, 233, 255, 0.3); }
.visit-k { font: 500 12.5px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--ice); }
.visit-step h3 { font-size: clamp(22px, 1.75vw, 28px); font-weight: 900; font-stretch: 125%; }
.visit-step p:not(.visit-k) { max-width: 24em; color: rgba(243, 245, 247, 0.74); font-size: 17px; line-height: 1.5; }
.visit-step .link-arrow { margin-top: 8px; justify-self: start; }
/* narrower: a strip you swipe, the next step peeking in */
@media (max-width: 1080px) {
  .visit { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding: 4px var(--pad) 12px; scroll-padding-inline: var(--pad); }
  .visit::-webkit-scrollbar { display: none; }
  .visit-step { flex: 0 0 42%; scroll-snap-align: start; }
  .visit:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }
}
@media (max-width: 720px) {
  .visit-step { flex-basis: 74%; }
  .visit-step p:not(.visit-k) { font-size: 16.5px; }
}

/* ---------- after you book: the phone ---------- */
.home-after { overflow: hidden; }
.after-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.after-words .head { margin-bottom: clamp(30px, 3.4vw, 48px); }
@media (min-width: 901px) { .after-words .display { font-size: min(4.3vw, 68px); } }
.after-list { list-style: none; display: grid; border-top: 1px solid var(--line); max-width: 34em; }
.after-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.45; }
.after-list b { padding-top: 4px; font: 500 13px/1.3 var(--mono); color: var(--ice); }
.after-list a { color: var(--ice); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }
.after-phone { position: relative; display: grid; justify-items: center; gap: 0; }
.after-phone::before { content: ""; position: absolute; z-index: -1; top: 8%; left: 50%; width: 640px; height: 640px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(139, 233, 255, 0.2), rgba(139, 233, 255, 0.05) 45%, transparent 68%); }
.phone { --r: 56px; position: relative; width: min(350px, 82vw); aspect-ratio: 9 / 19.2; padding: 11px; border-radius: var(--r);
  background: linear-gradient(150deg, #3a4048 0%, #14171b 22%, #0a0b0d 55%, #23272d 80%, #08090a 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 4px #050607, 0 60px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 90px rgba(139, 233, 255, 0.12); }
.phone::before { content: ""; position: absolute; left: -3px; top: 22%; width: 3px; height: 60px; border-radius: 3px 0 0 3px; background: linear-gradient(180deg, #2a2f35, #121417); box-shadow: 0 78px 0 #1b1e22; }
.phone::after { content: ""; position: absolute; right: -3px; top: 28%; width: 3px; height: 90px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #2a2f35, #121417); }
.phone-screen { position: relative; isolation: isolate; height: 100%; overflow: hidden; border-radius: calc(var(--r) - 11px); background: #000; }
.phone-wall { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.18); filter: saturate(1.15); }
.phone-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.6)); }
/* glass glare across the screen */
.phone-screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 31%); }
.phone-island { position: absolute; z-index: 3; top: 11px; left: 50%; width: 32%; height: 30px; transform: translateX(-50%); border-radius: 20px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.phone-status { position: absolute; z-index: 2; top: 17px; left: 28px; right: 24px; display: flex; justify-content: space-between; align-items: center; font: 650 14px/1 var(--sans); }
.phone-icons { display: flex; align-items: center; gap: 5px; }
.phone-icons i:nth-child(1) { width: 17px; height: 11px; background: linear-gradient(90deg, #fff 0 3px, transparent 3px 4.5px, #fff 4.5px 7.5px, transparent 7.5px 9px, #fff 9px 12px, transparent 12px 13.5px, #fff 13.5px); clip-path: polygon(0 75%, 18% 75%, 18% 55%, 44% 55%, 44% 32%, 70% 32%, 70% 0, 100% 0, 100% 100%, 0 100%); }
.phone-icons i:nth-child(2) { width: 15px; height: 11px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: radial-gradient(circle at 50% 100%, #fff 0 18%, transparent 19% 36%, #fff 37% 52%, transparent 53% 68%, #fff 69% 85%, transparent 86%); }
.phone-icons i:nth-child(3) { width: 24px; height: 11.5px; border-radius: 3.5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); background: linear-gradient(90deg, #fff 0 70%, transparent 70%) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat; }
.phone-lock { position: absolute; z-index: 2; top: 12%; left: 0; right: 0; text-align: center; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35); }
.phone-date { font: 600 16px/1.2 var(--sans); color: rgba(255, 255, 255, 0.86); }
.phone-time { margin-top: 2px; font: 700 clamp(70px, 6.4vw, 88px)/1 var(--display); font-stretch: 100%; letter-spacing: -0.02em; color: rgba(240, 250, 255, 0.95); }
.phone-notes { position: absolute; z-index: 2; left: 10px; right: 10px; top: 41%; }
.notif.tb { width: 100%; padding: 12px 14px; gap: 11px; border-radius: 20px; background: rgba(36, 40, 45, 0.72); transform-origin: 50% 0;
  transition: transform 0.75s var(--spring), opacity 0.4s; }
html.js:not(.no-motion) .notif.tb:not(.in) { opacity: 0; transform: translateY(-46px) scale(0.94); }
.notif.tb .notif-app { width: 38px; height: 38px; border-radius: 10px; font-size: 18px; }
.notif.tb .notif-top { font-size: 13.5px; }
.notif.tb .notif-top span { font-size: 12.5px; }
.notif.tb p { font-size: 14px; line-height: 1.38; }
.tb-typing { display: none; gap: 4px; margin-top: 8px; height: 19px; align-items: center; }
.tb.is-typing .tb-typing { display: flex; }
.tb.is-typing .tb-msg { display: none; }
.tb-typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 245, 247, 0.6); animation: tb-dot 1s infinite; }
.tb-typing i:nth-child(2) { animation-delay: 0.15s; }
.tb-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tb-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.tb-msg b { font-weight: 650; color: #fff; }
.phone-bar { position: absolute; z-index: 3; left: 50%; bottom: 9px; width: 36%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.8); transform: translateX(-50%); }
/* a soft buzz when the text lands */
.phone.buzz { animation: buzz 0.42s linear; }
@keyframes buzz { 0%, 100% { translate: 0 0; } 15% { translate: -3px 0; } 30% { translate: 3px 0; } 45% { translate: -2px 0; } 60% { translate: 2px 0; } 75% { translate: -1px 0; } }
/* the try-it card floats over the bottom of the phone, so the text and the input are on screen together */
.try { position: relative; z-index: 3; width: min(420px, 100%); display: grid; gap: 16px; padding: 22px; margin-top: calc(-1 * clamp(200px, 17vw, 250px));
  background: linear-gradient(180deg, rgba(22, 26, 30, 0.78), rgba(12, 14, 17, 0.84)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); }
@media (min-width: 901px) { .try { justify-self: start; margin-left: -4%; } }
.try .tag { display: inline-flex; align-items: center; gap: 9px; color: var(--ice); }
.try .tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
.try .field input { min-height: 54px; }
.try .chips { gap: 6px; }
.try .chip { padding: 0 16px; }
@media (max-width: 720px) { .try .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .try .chip { padding: 0 6px; justify-content: center; font-size: 14.5px; } }

/* ---------- the studio: a wide band of the room; its lights switch on as you arrive ---------- */
/* The words sit on the room's floor. On wide screens they overlay the bottom of the band (both share one grid cell) and
   the floor fades into the page under them, so the section ends on the photo. On phones the headline overlaps the floor
   and the lead runs on below it. */
.home-studio { position: relative; isolation: isolate; display: grid; background: var(--bg); }
.studio-media, .studio-words { grid-area: 1 / 1; min-width: 0; }
.studio-media { position: relative; z-index: -1; overflow: hidden; aspect-ratio: 16 / 9; max-height: 94vh; min-height: 560px; width: 100%; }
.studio-media img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: 50% 30%; }
/* the room starts dark; .lit flickers the ceiling on like fluorescent tubes (opacity only) */
.studio-media::after { content: ""; position: absolute; inset: 0; background: #020304; opacity: 0.9; }
.home-studio.lit .studio-media::after { animation: studio-on 1.4s linear forwards; }
@keyframes studio-on { 0% { opacity: 0.9; } 10% { opacity: 0.12; } 17% { opacity: 0.78; } 27% { opacity: 0.06; } 35% { opacity: 0.5; } 48% { opacity: 0; } 100% { opacity: 0; } }
html.no-motion .studio-media::after, html:not(.js) .studio-media::after { opacity: 0; animation: none; }
/* the band fades into the page at the top, and the floor darkens under the words at the bottom */
.studio-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(4, 5, 6, 0) 14%, rgba(4, 5, 6, 0) 46%, rgba(4, 5, 6, 0.55) 64%, rgba(4, 5, 6, 0.9) 84%, var(--bg) 100%); }
.studio-words { position: relative; z-index: 1; align-self: end; padding: 0 var(--pad) clamp(40px, 4.6vw, 76px); }
.studio-words .head { margin-bottom: 0; }
.studio-words .display { font-size: clamp(36px, 5.4vw, 88px); text-shadow: 0 10px 50px rgba(0, 0, 0, 0.6); }
.studio-words .stack { gap: 16px; }
.studio-words .lead { color: rgba(243, 245, 247, 0.82); text-shadow: 0 2px 18px rgba(4, 5, 6, 0.8); }
@media (max-width: 720px) {
  .home-studio { display: block; }
  .studio-media { aspect-ratio: 1 / 1; min-height: 0; max-height: none; }
  .studio-media img { object-position: 36% 40%; }
  .studio-words { margin-top: -150px; padding-bottom: 0; }
}

/* ---------- our work: the studio's shots drift past ---------- */
.home-work { padding-top: clamp(60px, 6vw, 100px); padding-bottom: clamp(70px, 8vw, 130px); }
.home-work .head { margin: clamp(30px, 3.4vw, 56px) 0 0; }
.work-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; }
.work-rail { overflow: hidden; padding: 4px 0 30px; }
.work-track { display: flex; align-items: flex-start; gap: clamp(14px, 1.6vw, 22px); width: max-content; padding-inline: var(--pad); will-change: transform; }
.work-shot { position: relative; isolation: isolate; overflow: hidden; flex: none; width: clamp(300px, 36vw, 640px); aspect-ratio: 16 / 10; border-radius: var(--r-lg); background: var(--char);
  box-shadow: inset 0 0 0 1px var(--line), 0 34px 80px rgba(0, 0, 0, 0.5); transition: transform 0.6s var(--ease); }
.work-shot:nth-child(even) { margin-top: clamp(26px, 3.6vw, 64px); }
.work-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .work-shot:hover img { transform: scale(1.045); } }
.work-shot .caption { z-index: 4; }
.work-shot::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.09), transparent 26%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
html.no-motion .work-rail, html:not(.js) .work-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
html.no-motion .work-shot, html:not(.js) .work-shot { scroll-snap-align: center; }
@media (max-width: 720px) {
  .work-shot { width: 80vw; }
  .work-shot:nth-child(even) { margin-top: 22px; }
}

/* ---------- reviews: framed and waiting ---------- */
.revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.slot.rev { min-height: 330px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; text-align: left; gap: 12px; padding: 34px 32px 34px; }
.rev-q { height: 52px; margin-bottom: auto; flex: none; font: 900 128px/0.82 var(--display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px var(--ice); text-shadow: 0 0 0.2em rgba(139, 233, 255, 0.3); }
.rev-lines { display: grid; gap: 10px; width: 100%; margin: 18px 0 8px; }
.rev-lines i, .rev-photo { border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 20%, rgba(214, 249, 255, 0.13) 50%, rgba(255, 255, 255, 0.04) 80%) 0 0 / 300% 100%; animation: shimmer 2.6s linear infinite; }
.rev-lines i { height: 9px; }
.rev-lines i:nth-child(2) { width: 84%; animation-delay: 0.15s; }
.rev-lines i:nth-child(3) { width: 58%; animation-delay: 0.3s; }
.rev-photo { width: 100%; aspect-ratio: 16 / 7; margin: 18px 0 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(139, 233, 255, 0.22); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.slot.rev b { max-width: none; }
.rev-note { display: flex; justify-content: center; margin-top: clamp(26px, 3vw, 40px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .revs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revs .rev:last-child { grid-column: 1 / -1; min-height: 260px; }
}
@media (max-width: 900px) {
  .after-grid { grid-template-columns: minmax(0, 1fr); }
  .after-phone { order: 2; }
}
@media (max-width: 720px) {
  .open-pills { flex-direction: column; align-items: center; }
  .revs { grid-template-columns: minmax(0, 1fr); }
  .revs .rev:last-child { grid-column: auto; }
  .slot.rev { min-height: 290px; padding: 30px 24px; }
  .after-list li { font-size: 17px; grid-template-columns: 44px minmax(0, 1fr); }
  .after-phone::before { width: 460px; height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-hint span, .film-chip i, .rev-lines i, .rev-photo { animation: none; }
}