/* Lowtide Garage. Night palette, one sodium-orange accent, Saira italic display over Geist. */
@font-face {
  font-family: "Saira";
  src: url("/concepts/lowtide-garage/fonts/saira-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/concepts/lowtide-garage/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --base: #08090b;
  --graphite: #111317;
  --gunmetal: #1a1d22;
  --line: #2a2e35;
  --steel: #70747c;
  --ink: #f2f1ee;
  --muted: #a3a5aa;
  --accent: #f5843a;
  --accent-hi: #ff9b58;
  --disp: "Saira", "Arial Narrow", system-ui, sans-serif;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --chamfer: 14px;
  --pad: clamp(20px, 4vw, 64px);
  --head: 68px;
  /* reduced motion runs every CSS animation 2.5x slower, never stops it */
  --slow: 1;

  --cx-ink: var(--ink);
  --cx-paper: #15171b;
  --cx-accent: var(--accent);
  --cx-on-accent: #120a04;
  --cx-phone: #000;
  --cx-in: #262a31;
  --cx-in-ink: var(--ink);
  --cx-font: var(--body);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --slow: 2.5; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--base); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--head); }
body { margin: 0; background: var(--base); color: var(--ink); font: 400 16px/1.55 var(--body); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--base); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }

/* Type */
.display { font-family: var(--disp); font-style: italic; font-weight: 800; font-stretch: 78%; letter-spacing: -.01em; line-height: .92; text-transform: uppercase; }
.h2 { font-size: clamp(2.6rem, 5.4vw, 5.2rem); }
.h-xl { font-size: clamp(3.2rem, 8vw, 7.6rem); }
.readout { font: 500 12px/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--muted); }
.accent-text { color: var(--accent); }
.big { font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.45; color: #dddcd8; max-width: 34ch; }
.narrow { max-width: 40ch; }
.note { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* Wordmark: steel letters with an orange tide line along the bottom. */
.tide {
  font-family: var(--disp); font-style: italic; font-weight: 900; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: -.02em; line-height: .8;
  background:
    linear-gradient(180deg, transparent 0 var(--tide, 76%), var(--accent) var(--tide, 76%)),
    linear-gradient(176deg, #5f636b 0%, #c3c7ce 36%, #464a51 52%, #82868e 76%, #2d3036 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons: square, one machined corner. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  font: italic 800 17px/1 var(--disp); font-stretch: 90%; letter-spacing: .04em; text-transform: uppercase;
  transition: transform .14s var(--ease), background-color .2s, color .2s, box-shadow .2s;
}
.btn svg { width: 19px; height: 19px; fill: currentColor; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-main { background: var(--accent); color: #120a04; clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }
.btn-ghost { color: var(--ink); background: rgb(8 9 11 / .4); box-shadow: inset 0 0 0 1px rgb(242 241 238 / .35); backdrop-filter: blur(6px); }
@media (hover: hover) {
  .btn-main:hover { background: var(--accent-hi); }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
}

/* Header */
.top {
  position: sticky; top: 0; z-index: 40; height: var(--head);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--pad);
  transition: background-color .3s, box-shadow .3s;
}
.top.scrolled { background: rgb(8 9 11 / .86); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgb(242 241 238 / .08); }
.mark { display: inline-flex; flex-direction: column; text-decoration: none; margin-right: auto; }
.mark-word { font-size: 30px; --tide: 72%; }
.mark-sub { margin-top: 4px; font: 600 9px/1 var(--body); letter-spacing: .62em; text-transform: uppercase; color: #9a9ea6; }
.nav { display: flex; gap: 28px; }
.nav a { font: italic 700 15px/1 var(--disp); font-stretch: 90%; letter-spacing: .06em; text-transform: uppercase; color: #cfcecb; text-decoration: none; padding: 14px 0; }
.nav a:hover { color: var(--ink); }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 14px/1 var(--body); font-variant-numeric: tabular-nums; text-decoration: none; }
.nav-phone svg { width: 16px; height: 16px; fill: var(--accent); }
.nav-book { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* Hero: the photo in two layers in real perspective. The car is the photo clipped to its own outline (CAR in
   gen/convert.py), so it sits in front of the wordmark while the plate behind has the car painted out. */
.hero { position: relative; height: calc(100svh - 34px); min-height: 620px; margin-top: calc(var(--head) * -1); overflow: clip; isolation: isolate; background: #060708; }
.stage {
  --w: max(112vw, calc(100svh * 1.62)); --p: 1400;
  position: absolute; width: var(--w); aspect-ratio: 1600 / 1067;
  left: calc(var(--w) * .085); bottom: -5svh;
  perspective: calc(var(--p) * 1px);
}
.cam, .rig, .hl { position: absolute; inset: 0; transform-style: preserve-3d; }
.rig {
  --s: 0; --rx: 0deg; --ry: 0deg; --px: 0%; --drift: 0deg;
  transform: translate3d(var(--px), calc(var(--s) * -4%), calc(var(--s) * 160px)) rotateX(calc(var(--rx) + var(--s) * 6deg)) rotateY(calc(var(--ry) + var(--drift)));
}
/* Each layer sits --d px behind the car and is scaled back up by (p + d) / p, so at rest the stack lines up. */
.hl { transform: translateZ(calc(var(--d) * -1px)) scale(calc((var(--p) + var(--d)) / var(--p))); }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The stage starts right of the hero edge on wide screens: fade the plate in so no seam shows. */
.hl:first-child .fill { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%); mask-image: linear-gradient(90deg, transparent, #000 9%); }
.car { --car: polygon(27.3% 76.2%, 27.3% 74.7%, 28.3% 63%, 29.8% 60.1%, 31.9% 55.7%, 41% 51.8%, 48.8% 49.6%, 56% 44.4%, 61.2% 42%, 67.1% 41.1%, 74.2% 41.4%, 80.1% 43%, 85.3% 46.3%, 87.2% 49.1%, 93.75% 53.5%, 95.2% 56.6%, 96% 69.3%, 95.05% 72.8%, 70.3% 78.1%, 60.5% 80.1%, 27.3% 77.1%); }
.car > .fill, .sweep-mask { clip-path: var(--car); }
.sweep-mask { position: absolute; inset: 0; overflow: hidden; }
.hero-word { position: absolute; left: 9%; top: 31.5%; font-size: calc(var(--w) * .138); pointer-events: none; user-select: none; white-space: nowrap; }
.hero-word-in { display: block; --tide: 78%; }
.hero-sub { display: block; margin-top: .3em; padding-left: .5em; font: 600 .075em/1 var(--body); letter-spacing: .7em; text-transform: uppercase; color: #8d9199; }
.sweep { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / .22) 48%, rgb(255 226 200 / .1) 52%, transparent 60%); transform: translateX(-100%); }
.headlight { position: absolute; left: 30.1%; top: 60.2%; width: 7%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgb(255 248 236 / .95) 0 6%, rgb(255 214 170 / .4) 18%, rgb(245 132 58 / .1) 42%, transparent 70%); mix-blend-mode: screen; opacity: 0; }
.headlight.r { left: 55.4%; top: 60.6%; width: 6%; }
.lamp-pool { position: absolute; left: 22%; top: 79%; width: 46%; height: 12%; background: radial-gradient(60% 50% at 55% 50%, rgb(255 170 90 / .45), rgb(245 132 58 / .12) 55%, transparent 75%); mix-blend-mode: screen; opacity: .3; filter: blur(8px); }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(6 7 8 / .9) 0%, rgb(6 7 8 / .5) 32%, transparent 56%),
    linear-gradient(0deg, rgb(6 7 8 / .95) 0%, transparent 34%),
    linear-gradient(180deg, rgb(6 7 8 / .65) 0%, transparent 20%);
}
.hero-copy { position: absolute; left: var(--pad); bottom: clamp(36px, 8svh, 84px); max-width: 620px; }
.hero-copy h1 { font-size: clamp(2.4rem, 4.2vw, 4.5rem); text-wrap: balance; }
.hero-lead { margin-top: 18px; max-width: 30rem; font-size: clamp(1rem, 1.15vw, 1.15rem); color: #cfcecb; }
.ctas { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-cap { position: absolute; right: var(--pad); top: calc(var(--head) + 10px); color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .cx-js .cam { animation: cam-in 2.4s var(--ease) backwards; }
  .cx-js .hero-word-in, .cx-js .hero-sub { animation: rise 1.3s var(--ease) .25s both; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-js .cam { animation: cam-in 6s var(--ease) backwards; }
  .cx-js .hero-word-in, .cx-js .hero-sub { animation: fade 3s ease .25s both; }
}
.cx-js .headlight { animation: headlight-on calc(1.4s * var(--slow)) linear calc(.7s * var(--slow)) both; }
.cx-js .lamp-pool { animation: pool-on calc(1.4s * var(--slow)) linear calc(.7s * var(--slow)) both; }
.cx-js .sweep { animation: sweep calc(1.6s * var(--slow)) var(--ease-io) calc(1.3s * var(--slow)) both; }
.cx-js .hero-copy > * { animation: copy-in calc(.9s * var(--slow)) var(--ease) both; }
.cx-js .hero-copy > :nth-child(2) { animation-delay: .12s; }
.cx-js .hero-copy > :nth-child(n+3) { animation-delay: .22s; }
@keyframes cam-in { from { transform: translate3d(-1.5%, 1%, 150px) rotateY(-8deg) rotateX(1.5deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(18%) skewX(-6deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes headlight-on { 0%, 8% { opacity: 0; } 10% { opacity: .9; } 16% { opacity: .1; } 22%, 100% { opacity: 1; } }
@keyframes pool-on { 0%, 20% { opacity: .3; } to { opacity: 1; } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes copy-in { from { opacity: 0; transform: translateY(24px); } }

/* Intro + marquee */
.sec { padding: clamp(80px, 11vw, 150px) 0; }
.intro { padding-bottom: 0; }
.intro-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
.intro .big { margin-top: 32px; }
.facts { border-left: 1px solid var(--line); padding-left: 32px; display: grid; gap: 40px; }
.num { font: italic 900 clamp(5rem, 9vw, 8.5rem)/.8 var(--disp); font-stretch: 112%; letter-spacing: -.02em; margin-top: 10px; }
.num.accent { color: var(--accent); }
.num small { font-size: .26em; font-stretch: 90%; margin-left: .2em; letter-spacing: .02em; text-transform: uppercase; }
.fact-note { margin-top: 10px; color: var(--muted); }
.marquee { margin-top: clamp(72px, 9vw, 120px); border-block: 1px solid var(--line); padding: 30px 0; overflow: hidden; }
.marquee-run { display: flex; width: max-content; will-change: transform; }
.marquee-run span { font: italic 800 clamp(2.4rem, 5vw, 4.4rem)/1 var(--disp); font-stretch: 78%; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px #6f737b; white-space: nowrap; padding-right: .5em; }
.marquee-run span::after { content: "/"; color: var(--accent); -webkit-text-stroke: 0; padding-left: .5em; }

/* Service explorer: pinned on desktop, the scroll steps through the five services. */
.svc { position: relative; background: linear-gradient(180deg, var(--base), var(--graphite) 22%); }
.svc-pin { padding: 120px 0; }
.svc-grid { display: grid; grid-template-columns: minmax(300px, .9fr) 1.4fr; gap: 56px; align-items: center; }
.svc-tabs { display: grid; gap: 6px; margin-top: 26px; }
.svc-tab {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 2px 0; text-align: left; cursor: pointer;
  background: none; border: 0; color: #6f737b; font: italic 800 clamp(2rem, 3.7vw, 3.6rem)/.95 var(--disp); font-stretch: 78%; text-transform: uppercase;
  transition: color .3s;
}
.svc-tab i { flex: none; width: 22px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.svc-tab[aria-selected="true"] { color: var(--ink); }
.svc-tab[aria-selected="true"] i { transform: scaleX(1); }
.svc-tab:hover { color: #c9c8c4; }
.svc-hint { margin-top: 26px; max-width: 34ch; }
.svc-main, .svc-side { position: relative; min-width: 0; }
.svc-frame { position: relative; aspect-ratio: 16 / 9; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); background: var(--gunmetal); }
.svc-img { position: absolute; inset: 0; opacity: 0; clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); transition: clip-path calc(.7s * var(--slow)) var(--ease-io), opacity 0s linear calc(.7s * var(--slow)); }
.svc-img[data-active="true"] { z-index: 1; opacity: 1; clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); transition: clip-path calc(.7s * var(--slow)) var(--ease-io), opacity 0s; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform calc(1.4s * var(--slow)) var(--ease); }
.svc-img[data-active="true"] img { transform: none; }
.svc-eq { background: radial-gradient(120% 90% at 50% 100%, #2a1a10, #0d0e11 70%); }
.svc-eq svg { width: 100%; height: 100%; }
.svc-cap { position: absolute; z-index: 2; left: 8%; top: 10px; color: #d5d4d0; }
.svc-panels { position: relative; margin: -56px 0 0 4%; max-width: 560px; z-index: 3; }
.svc-panel { background: var(--gunmetal); padding: 30px 32px 32px; position: relative; }
.svc-panel::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; background: var(--accent); }
.svc-panel > p:first-child { color: #dcdbd7; }
.prices { margin: 20px 0 16px; border-top: 1px solid var(--line); }
.prices li { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.prices b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.svc-panel .btn { margin-top: 18px; }
@media (min-width: 900px) {
  .svc { height: 300vh; }
  .svc-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: var(--head) 0 0; }
}

/* Featured build: the bay photo opens from a slanted slot to full bleed as you scroll. */
.feature { position: relative; height: 180vh; }
.feature-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.feature-win { position: absolute; inset: 0; clip-path: polygon(var(--a, 18%) var(--t, 14%), var(--b, 86%) var(--t, 14%), var(--c, 82%) var(--u, 86%), var(--e, 14%) var(--u, 86%)); }
.feature-win img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.18)); }
.feature-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(6 7 8 / .9), transparent 46%), linear-gradient(90deg, rgb(6 7 8 / .5), transparent 50%); opacity: var(--o, 0); }
.feature-copy { position: absolute; left: 0; right: 0; bottom: clamp(40px, 9vh, 90px); }
.feature-copy h2 { margin-top: 14px; max-width: 14ch; }
.spec { position: absolute; right: var(--pad); top: calc(var(--head) + 6vh); width: min(380px, 40vw); background: rgb(17 19 23 / .88); backdrop-filter: blur(8px); padding: 26px 28px; display: grid; gap: 16px; opacity: var(--so, 0); transform: translateX(calc((1 - var(--so, 0)) * 40px)); }
.spec::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; background: var(--accent); }
.spec dt { color: var(--accent); }
.spec dd { margin-top: 3px; }
.feature-cap { position: absolute; left: var(--pad); top: calc(var(--head) + 14px); color: #d5d4d0; }

/* Showroom: the builds stand on a dark polished floor; scrolling walks you past them. */
.show { position: relative; height: 280vh; background: radial-gradient(80% 50% at 50% 70%, #16181d, var(--base) 70%); }
.show-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(var(--head) + 3vh); }
.show-pin > .wrap { width: 100%; }
.show-stage { position: relative; flex: 1; perspective: 1100px; perspective-origin: 50% 40%; }
.car-card {
  position: absolute; left: 50%; top: 42%; width: min(640px, 62vw); aspect-ratio: 800 / 483;
  translate: -50% -50%; transform-style: preserve-3d; will-change: transform;
  -webkit-box-reflect: below 6px linear-gradient(transparent 62%, rgb(255 255 255 / .22));
}
.car-card img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 30px 60px -20px #000; }
.floor-line { position: absolute; left: 50%; top: calc(42% + min(320px, 31vw) * .604 + 10px); width: min(640px, 62vw); height: 2px; translate: -50% 0; background: var(--accent); box-shadow: 0 0 24px var(--accent); }
.show-read { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 32px; padding-bottom: 5vh; }
.show-kind { margin-top: 12px; color: #8d9199; }
.show-name { font-size: clamp(2.4rem, 4.4vw, 4rem); margin-top: 4px; }
.show-spec { margin-top: 8px; color: var(--muted); }
.show-bars { display: flex; gap: 6px; }
.show-bars i { width: 30px; height: 3px; background: var(--line); transition: background-color .3s; }
.show-bars i.on { background: var(--accent); }
.show-note { grid-column: 1 / -1; }
.show-note .cx-gen { font: inherit; letter-spacing: inherit; }

/* Trust */
.trust { position: relative; overflow: clip; padding: clamp(90px, 12vw, 160px) 0; }
.trust-bg { position: absolute; inset: -12% 0; }
.trust-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.trust::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--base), rgb(8 9 11 / .35) 30%, rgb(8 9 11 / .5) 70%, var(--base)); }
.trust .wrap { position: relative; z-index: 1; }
.slabs { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; max-width: 980px; margin-left: auto; }
.slab { position: relative; background: rgb(17 19 23 / .92); padding: 28px 28px 30px; }
.slab:nth-child(even) { translate: 0 70px; }
.slab::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; background: var(--accent); }
.slab-big { font-size: clamp(2.4rem, 3.6vw, 3.4rem); color: var(--accent); margin-bottom: 12px; }
.slab p:last-child { color: #d0cfcb; }
.trust-cap { margin-top: 110px; color: var(--muted); }
.trust-row { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px 36px; color: #cfcecb; }
.trust-row li { display: flex; align-items: center; gap: 10px; }
.trust-row li::before { content: ""; width: 8px; height: 8px; background: var(--accent); transform: skewX(-12deg); }

/* FlowWays features */
.fw { background: var(--graphite); }
.fw .big { margin-top: 22px; }
.fw-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; align-items: start; }
.fw-card, .panel { background: var(--gunmetal); padding: 26px 24px 28px; position: relative; }
.fw-card h3, .panel h3 { font-size: 30px; margin: 14px 0 20px; }
.fw-card > p:last-child { margin-top: 20px; color: #cfcecb; font-size: 15px; }
.tag { display: inline-block; font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding: 6px 9px; box-shadow: inset 0 0 0 1px rgb(245 132 58 / .5); }
.fw-side { display: grid; gap: 28px; }
.panel h3 { margin-bottom: 12px; }
.panel > p { color: #cfcecb; font-size: 15px; }
.asks { margin: 16px 0 20px; display: grid; gap: 8px; }
.asks li { font-size: 14px; padding: 9px 12px; background: #23262c; border-left: 2px solid var(--accent); }
.slots { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slots a { display: grid; place-items: center; min-height: 46px; font: 600 14px/1 var(--body); font-variant-numeric: tabular-nums; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, color .2s; }
.slots a:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }

/* Reviews */
.revs { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.rev { padding: 34px 0; border-top: 1px solid var(--line); }
.rev blockquote { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.45; }
.rev blockquote::before { content: ""; display: block; width: 34px; height: 22px; margin-bottom: 18px; background: var(--accent); clip-path: polygon(30% 0, 48% 0, 30% 100%, 12% 100%, 30% 0, 82% 0, 100% 0, 82% 100%, 64% 100%, 82% 0); }
.rev figcaption { margin-top: 18px; font: italic 800 20px/1 var(--disp); font-stretch: 85%; text-transform: uppercase; }
.rev small { display: block; margin-top: 8px; font: 500 12px/1.3 var(--body); letter-spacing: .1em; color: var(--muted); }

/* FAQ */
.faq-sec { padding-top: 0; }
.faq-grid { display: grid; grid-template-columns: .8fr 1.4fr; gap: 56px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 18px; align-items: center; min-height: 64px; cursor: pointer; list-style: none; font: italic 700 clamp(1.3rem, 1.8vw, 1.6rem)/1.1 var(--disp); font-stretch: 85%; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details p { padding: 0 0 22px; color: #cfcecb; max-width: 60ch; }

/* Visit */
.visit { background: var(--base); border-top: 1px solid var(--line); }
.visit-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.visit .big { margin-top: 22px; }
.bignum { display: block; margin-top: 30px; font-size: clamp(2.8rem, 6.4vw, 6rem); font-weight: 900; font-stretch: 100%; text-decoration: none; white-space: nowrap; }
.bignum:hover { color: var(--accent); }
.visit-cols { margin-top: 44px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; }
.visit-cols p + p, .visit-cols .hours { margin-top: 10px; }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.map { background: var(--graphite); }
.map svg { display: block; width: 100%; height: auto; }
.map figcaption { padding: 12px 16px; }

/* Footer */
.foot { padding: 90px 0 48px; border-top: 1px solid var(--line); }
.foot-word { font-size: clamp(5rem, 19vw, 17rem); --tide: 74%; opacity: .2; }
.foot-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; color: #cfcecb; }
.foot-grid a { text-decoration-color: var(--accent); text-underline-offset: 3px; }
.fw-line { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; }
.fw-line a { color: var(--muted); }
.fw-line a:hover { color: var(--ink); }
.actionbar { display: none; }

/* Tablet and phone */
@media (max-width: 1080px) {
  .nav { display: none; }
  .fw-grid { grid-template-columns: 1fr 1fr; }
  .fw-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .svc-grid, .intro-grid, .faq-grid, .visit-grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-pin { padding: 90px 0; }
  .svc-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 22px calc(var(--pad) * -1) 0; padding: 0 var(--pad) 6px; scrollbar-width: none; }
  .svc-tab { flex: none; font-size: 1.25rem; min-height: 44px; padding: 0 14px; box-shadow: inset 0 0 0 1px var(--line); }
  .svc-tab[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
  .svc-tab i { display: none; }
  .svc-hint { display: none; }
  .svc-panels { margin: -28px 0 0; }
}
@media (max-width: 760px) {
  :root { --head: 60px; }
  .nav-phone { display: none; }
  .nav-book { padding: 0 14px; font-size: 14px; }
  .mark-word { font-size: 26px; }
  .hero { height: calc(100svh - 52px); }
  .stage { --w: 268vw; left: calc(var(--w) * -.305); bottom: auto; top: calc(var(--head) - 1svh); }
  .hero-word { left: 32.6%; top: 27%; font-size: calc(var(--w) * .068); }
  .hero-sub { font-size: .1em; letter-spacing: .5em; }
  .shade { background: linear-gradient(180deg, rgb(6 7 8 / .7) 0%, transparent 14%), linear-gradient(0deg, rgb(6 7 8 / 1) 0%, rgb(6 7 8 / .88) 27%, transparent 42%); }
  .hero-copy { left: var(--pad); right: var(--pad); bottom: 92px; }
  .hero-copy h1 { font-size: clamp(2.1rem, 9.6vw, 2.7rem); }
  .hero-lead { margin-top: 12px; font-size: .95rem; }
  .hero-copy .ctas, .hero-copy .note { display: none; }
  .hero-cap { left: var(--pad); right: auto; }
  .facts { border-left: 0; padding-left: 0; grid-template-columns: 1fr 1fr; gap: 20px; }
  .num { font-size: 3.4rem; }
  .show-stage { flex: 0 0 44vh; }
  .show-read { margin-top: auto; }
  .feature { height: 160vh; }
  .show { height: 240vh; }
  .spec { left: var(--pad); right: var(--pad); width: auto; top: auto; bottom: 40px; padding: 18px 20px; gap: 10px; }
  .feature-copy { top: calc(var(--head) + 6vh); bottom: auto; }
  .car-card { width: 78vw; top: 38%; }
  .floor-line { width: 78vw; top: calc(38% + 39vw * .604 + 10px); }
  .show-read { grid-template-columns: 1fr; }
  .slabs { grid-template-columns: 1fr; }
  .slab:nth-child(even) { translate: none; }
  .trust-cap { margin-top: 40px; }
  .fw-grid, .fw-side { grid-template-columns: 1fr; }
  .revs { grid-template-columns: 1fr; }
  .visit-cols { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot { padding-bottom: 110px; }
  .actionbar {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 9px 80px calc(9px + env(safe-area-inset-bottom)) 12px; background: rgb(8 9 11 / .92); backdrop-filter: blur(10px); box-shadow: 0 -1px 0 rgb(242 241 238 / .08);
  }
  .actionbar .btn { min-height: 50px; padding: 0 12px; }
}