/* WRAP HUB LA v2: site styles on top of scrollcraft.css (engine untouched).
   Language taken from the Avelon Drive template: white page, black ink, one grotesk,
   black pill buttons, rounded cards, motion only from scale, translate, blur and opacity.
   The only dark ground is the hero (and the closing band), where the studio photo lives. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-var.woff2?v=83a2ff94") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --sc-canvas: #FFFFFF;  --sc-surface: #F4F4F2;
  --sc-ink: #0A0A0B;     --sc-ink-soft: #5C5D63;
  --sc-accent: #0A0A0B;  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --night: #0A0A0B;
  --line: rgba(10, 10, 11, .12);
  --line-strong: rgba(10, 10, 11, .22);
  --soft: #F4F4F2;
  --r: 24px;
  --head: 76px;
  --bar: 0px;              /* phone action bar height, so stage UI sits above it */
  --gut: clamp(20px, 5vw, 88px);
}
@media (max-width: 860px) { :root { --bar: calc(58px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 760px) { :root { --head: 60px; --gut: 16px; } }
/* big desktop screens: scale the whole rem system so type and controls keep their weight */
@media (min-width: 1800px) { html { font-size: 112.5%; } }
@media (min-width: 2300px) { html { font-size: 125%; } }

html { background: var(--sc-canvas); }
/* anchor jumps land below the fixed/sticky header (#quote, #films...) */
[id] { scroll-margin-top: calc(var(--head) + 16px); }
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); -webkit-font-smoothing: antialiased; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--night); color: #fff; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.035em; font-weight: 600; }
p { text-wrap: pretty; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--night); color: #fff; padding: 10px 14px; border-radius: 999px; font-weight: 600; }
.skip:focus { left: 12px; }
.wide { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: -0.04em; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ buttons -- */
.pill, .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 0 22px;
  border-radius: 999px; font: 500 .98rem/1 var(--sc-font-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--night); color: #fff; border: 1px solid transparent;
  transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out); }
.pill:active, .btn:active { transform: scale(.97); }
.pill--small { min-height: 40px; padding: 0 18px; font-size: .92rem; }
.pill--ghost, .btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) {
  .pill:hover, .btn--primary:hover { background: #2A2A2E; }
  .pill--ghost:hover, .btn--ghost:hover { background: transparent; border-color: var(--sc-ink); }
}
.btn[disabled] { opacity: .55; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px 0 10px; margin: 0; border-radius: 999px;
  font: 500 .84rem/1 var(--sc-font-text); color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chip svg, .chip--light svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip--light { color: var(--sc-ink); background: var(--soft); border-color: var(--line); }

/* ------------------------------------------------------------ headers -- */
.top, .bar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--head); display: flex; align-items: center; gap: 24px; padding: 0 var(--gut);
  color: var(--sc-ink); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line); transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out); }
.bar { position: sticky; top: 0; }
.bar__in { display: contents; }
.top__mark img, .bar__mark img { display: block; width: 48px; height: auto; }
.top__mark .logo--light { display: none; }
body.on-dark .top__mark .logo--dark { display: none; }
body.on-dark .top__mark .logo--light { display: block; }
.top__nav, .bar__nav { display: flex; gap: 26px; margin: 0 auto; font-size: .95rem; }
.top__nav a, .bar__nav a { text-decoration: none; opacity: .72; transition: opacity 160ms; }
.top__nav a:hover, .bar__nav a:hover, .bar__nav a[aria-current="page"] { opacity: 1; }
.top__end, .bar__end { display: flex; align-items: center; gap: 14px; }
.top__phone, .bar__phone { font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums; }
.top .pill, .bar .btn { min-height: 42px; padding: 0 18px; }
.menu-toggle, .menu-btn { display: none; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; background: transparent; color: inherit;
  border: 1px solid currentColor; font: 500 .92rem var(--sc-font-text); cursor: pointer; opacity: .9; }
body.on-dark .top { color: #fff; background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.on-dark .top .pill { background: #fff; color: var(--night); }
.menu { position: fixed; top: calc(var(--head) + 8px); right: 12px; z-index: 49; width: min(420px, calc(100vw - 24px)); max-height: calc(100svh - var(--head) - 24px);
  overflow: auto; display: grid; padding: 10px 20px 16px; background: #fff; color: var(--sc-ink); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .35); }
.menu a { display: block; padding: 12px 0; text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
.menu a:last-child { border-bottom: 0; font-weight: 600; }
.menu[hidden] { display: none; }
@media (max-width: 980px) {
  .top__nav, .bar__nav, .top__phone, .bar__phone { display: none; }
  .top__end, .bar__end { margin-left: auto; }
  .menu-toggle, .menu-btn { display: inline-flex; }
}
@media (max-width: 380px) { .top .pill, .bar .btn { padding: 0 14px; font-size: .88rem; } }

/* --------------------------------------------------- phone action bar -- */
.actions { display: none; }
@media (max-width: 860px) {
  .actions { display: block; position: fixed; inset: auto 0 0 0; z-index: 45; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line);
    padding: 0 0 env(safe-area-inset-bottom, 0px); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .actions__row { display: grid; grid-template-columns: repeat(4, 1fr); }
  .actions__row a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; text-decoration: none; font: 500 .8rem var(--sc-font-text); color: var(--sc-ink); }
  .actions__row a.is-primary { background: var(--night); color: #fff; }
  .actions svg { width: 20px; height: 20px; }
  body { padding-bottom: var(--bar); }
}

/* =============================================================== HOME == */
/* Soft scene snapping (home.js adds .has-snap and places .snap marks at each scene's rest point). */
html.has-snap { scroll-snap-type: y proximity; }
.snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
/* The story stage: one pinned screen. Every scene element is absolute; home.js moves them. */
.home2 .stage { background: var(--night); }
/* Clip the stage from the first paint, before scrollcraft.js adds .sc-stage: the parade, the makers strip
   and the hero images are wider than a phone, and Safari otherwise widens the whole page to fit them. */
.home2 [data-sc-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.home2 #story { overflow-x: clip; }
.frame { position: absolute; inset: 0; will-change: clip-path, transform; }
.frame__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; will-change: transform; }
.frame__after { clip-path: inset(0 100% 0 0); }
.frame__edge { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff; opacity: 0;
  box-shadow: 0 0 18px 2px rgba(255, 255, 255, .55), 0 0 60px 10px rgba(255, 255, 255, .18); }
.frame__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .62), transparent 34%), linear-gradient(to top, rgba(0, 0, 0, .7), transparent 42%); }
.frame__card { position: absolute; left: var(--c2x, 0); top: var(--c2y, 0); width: var(--c2w, 0); height: var(--c2h, 0); max-width: none; object-fit: cover; opacity: 0; }

.hero-copy { position: absolute; left: var(--gut); top: calc(var(--head) + 6vh); width: min(36rem, calc(100% - 2 * var(--gut))); color: #fff; }
.hero-copy h1 { font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; margin: 18px 0 16px; max-width: 15ch; }
.hero-copy__sub { font-size: clamp(1rem, .94rem + .3vw, 1.18rem); line-height: 1.5; color: rgba(255, 255, 255, .8); margin: 0; max-width: 36ch; }
.hero-copy__cue { margin: 28px 0 0; font: 500 .8rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.mega { position: absolute; left: var(--gut); right: var(--gut); bottom: 3.5vh; margin: 0; display: flex; flex-wrap: wrap; gap: 0 .22em;
  font: 600 clamp(3.2rem, 10.4vw, 12.5rem)/.86 var(--sc-font-display); letter-spacing: -0.06em; white-space: nowrap; pointer-events: none; }
.mega__a { color: #8A8A8F; }
.mega__b { color: #fff; }

.say { position: absolute; margin: 0; color: var(--sc-ink); opacity: 0; }
.say .reveal-words { margin: 0; font-weight: 500; letter-spacing: -0.03em; line-height: 1.18; }
.reveal-words .w { display: inline-block; will-change: opacity, filter; }
.say--side { left: calc(var(--c2x) + var(--c2w) + clamp(32px, 5vw, 96px)); right: var(--gut); top: calc(var(--c2y) + 1vh); }
.say--side .reveal-words { font-size: clamp(1.5rem, .95rem + 1.6vw, 2.6rem); max-width: 22ch; margin-bottom: 28px; }
.say--center { left: 50%; top: calc(var(--head) + 7vh); width: min(54rem, calc(100% - 2 * var(--gut))); translate: -50% 0; text-align: center; }
.say--center .reveal-words { font-size: clamp(1.5rem, .95rem + 1.7vw, 2.7rem); }

.makers { position: absolute; left: 0; right: 0; bottom: calc(var(--bar) + 5vh); overflow: hidden; opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.makers__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.makers span { padding: 0 clamp(28px, 4vw, 64px); font: 600 clamp(1.4rem, 1rem + 1.3vw, 2.3rem)/1.2 var(--sc-font-display); letter-spacing: -0.04em; color: #A3A4A8; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* The wrap bay: a line in the middle of the screen. Left of it is factory paint, right of it is film. */
.station { position: absolute; left: 50%; top: 46vh; bottom: calc(var(--bar) + 6vh); translate: -50% 0; z-index: 3; opacity: 0; pointer-events: none;
  display: grid; grid-template-columns: 1fr 2px 1fr; gap: 14px; align-items: start; width: 280px; }
.station i { align-self: stretch; background: var(--sc-ink); border-radius: 2px; }
.station span { font: 600 .74rem/1 var(--sc-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.station span:first-child { text-align: right; }
.station span:first-child::after { content: " ←"; }
.station span:last-child { color: var(--sc-ink); }
.station span:last-child::before { content: "→ "; }

/* Hidden and off-screen until home.js places it, so it neither flashes on the first screen nor shifts the layout. */
.parade { position: absolute; left: 0; top: 70vh; display: flex; align-items: flex-end; gap: 4vw; will-change: transform; opacity: 0; transform: translateX(-200vw); }
.pcar { position: relative; flex: none; width: calc(var(--bw) * var(--k, .1) * 1px); aspect-ratio: var(--bw) / var(--bh); }
.pcar::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -5%; height: 14%; background: radial-gradient(closest-side, rgba(0, 0, 0, .3), transparent); }
.pcar img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pcar__a { clip-path: inset(0 0 0 100%); }

.feature { position: absolute; left: 4vw; right: 4vw; top: calc(var(--head) + 8px); bottom: 180px; border-radius: var(--r); overflow: hidden; background: #E7E7E5; opacity: 0; }
.feature__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity 180ms var(--sc-ease-out); }
.feature__after { clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--sc-ease-in-out), opacity 180ms var(--sc-ease-out); }
.feature__after.is-instant { transition: opacity 180ms var(--sc-ease-out); }
.feature.is-swap .feature__img { opacity: 0; }
.flyer { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; opacity: 0; pointer-events: none; z-index: 2; will-change: transform; }

.spec { position: absolute; left: max(16px, 4vw); right: max(16px, 4vw); bottom: calc(var(--bar) + 18px); z-index: 4; opacity: 0;
  display: grid; grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1.1fr) auto auto auto; align-items: center; gap: clamp(14px, 2vw, 32px);
  padding: 14px; background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -24px rgba(0, 0, 0, .3); }
.spec :where(p) { margin: 0; }
.spec__nav { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--sc-ink); font: 400 1.5rem/1 var(--sc-font-text); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .spec__nav:hover { background: var(--night); color: #fff; } }
.spec__name { margin: 0; font-size: clamp(1.25rem, 1rem + .7vw, 1.7rem); line-height: 1.1; }
.spec__line { color: var(--sc-ink-soft); font-size: .92rem; margin-top: 4px; }
.spec__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.spec__more { font-size: .84rem; color: var(--sc-ink-soft); }
.spec__label { font: 600 .68rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 6px; }
.spec__filmname { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.spec__code, .spec__plus, .spec__count { color: var(--sc-ink-soft); font-size: .85rem; font-variant-numeric: tabular-nums; }
.spec__where { display: grid; gap: 6px; justify-items: start; }
.spec__cta { display: grid; grid-template-columns: auto auto; column-gap: 18px; align-items: center; }
.spec__cta > p { grid-column: 1; }
.spec__cta .pill { grid-column: 2; grid-row: 1 / span 3; }
.spec__price { font-weight: 600; font-size: 1.1rem; }
.toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--soft); }
.toggle button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--sc-ink-soft); font: 500 .86rem var(--sc-font-text); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--night); color: #fff; }
.illus-note { position: absolute; right: calc(4vw + 14px); top: calc(var(--head) + 22px); z-index: 3; margin: 0; padding: 6px 12px; border-radius: 999px; opacity: 0;
  background: rgba(255, 255, 255, .88); font-size: .78rem; color: var(--sc-ink-soft); }

/* -------------------------------------------------- below the story -- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.h-xl { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.045em; margin: 0 0 clamp(28px, 4vw, 48px); max-width: 17ch; }
.h-xxl { font-size: clamp(2.6rem, 1.3rem + 5.4vw, 6.4rem); line-height: .96; letter-spacing: -0.055em; margin: 0 0 28px; }
.kicker { font: 600 .74rem/1 var(--sc-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 14px; }
.why, .fan-sec, .biz, .svc, .rev { padding-block: clamp(72px, 10vw, 140px) 0; }

.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.why__item { margin: 0; }
.why__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.why__item figcaption { padding: 18px 4px 0; color: var(--sc-ink-soft); line-height: 1.55; max-width: 46ch; }
.why__item b { color: var(--sc-ink); font-weight: 600; }
.facts3 { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.facts3 li { padding: 24px 24px 0 0; display: grid; gap: 6px; }
.facts3 b { font-weight: 600; font-size: 1.05rem; }
.facts3 span { color: var(--sc-ink-soft); }

.fan-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  background: var(--soft); border-radius: 32px; padding: clamp(24px, 5vw, 64px); width: calc(100% - 2 * var(--gut)); max-width: calc(1280px - 2 * var(--gut)); margin-inline: auto; }
.fan-copy > p { color: var(--sc-ink-soft); line-height: 1.55; max-width: 44ch; margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 18px; }
.tab { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--sc-ink); font: 500 .92rem var(--sc-font-text); cursor: pointer; }
.tab[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.picked { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; background: #fff; border-radius: 20px; }
.picked i { flex: none; width: 46px; height: 46px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.picked > div { min-width: 0; }
.picked :where(p) { margin: 0; }
.picked__name { font-weight: 600; line-height: 1.25; }
.picked__code { color: var(--sc-ink-soft); font-size: .86rem; margin-top: 2px; }
.picked .pill { margin-left: auto; }

/* The fan deck opens into a half-circle shield. --open (0..1) comes from home.js. */
.fan { --open: 1; position: relative; width: 100%; aspect-ratio: 2 / 1.1; margin-bottom: 4%; }
.fan__set { position: absolute; inset: 0; }
.fan__set[hidden] { display: none; }
.blade { --a: calc((-80deg + 160deg * var(--i) / (var(--n) - 1)) * var(--open));
  position: absolute; left: 44.5%; bottom: 0; width: 11%; height: 90%; padding: 0; border: 2px solid #fff; border-radius: 999px 999px 10px 10px;
  background: var(--chip); transform-origin: 50% calc(100% - 8px); transform: rotate(var(--a)); cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55); transition: transform 380ms var(--sc-ease-out); }
.blade span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.blade[aria-pressed="true"] { transform: rotate(var(--a)) translateY(-7%); box-shadow: 0 0 0 3px var(--night), 0 16px 30px -12px rgba(0, 0, 0, .6); z-index: 2; }
@media (hover: hover) and (pointer: fine) { .blade:hover { transform: rotate(var(--a)) translateY(-4%); } .blade[aria-pressed="true"]:hover { transform: rotate(var(--a)) translateY(-7%); } }
.fan::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 13%; aspect-ratio: 1; translate: -50% 50%; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px -12px rgba(0, 0, 0, .4); z-index: 3; }
.fan.is-dealt .fan__set:not([hidden]) .blade { animation: deal 700ms var(--sc-ease-out) backwards; animation-delay: calc(var(--i) * 28ms); }
@keyframes deal { from { transform: rotate(0deg); } }

.biz__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.biz__img { margin: 0; }
.biz__img img { display: block; width: 100%; border-radius: var(--r); }
.biz__img figcaption { padding-top: 10px; font-size: .82rem; color: var(--sc-ink-soft); }
.biz__copy p { color: var(--sc-ink-soft); line-height: 1.6; margin: 0 0 26px; max-width: 42ch; }

.liveries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
.liveries figure { margin: 0; }
.liveries img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }
.liveries figcaption { padding-top: 10px; font-size: .88rem; color: var(--sc-ink-soft); line-height: 1.4; }
.liveries b { display: block; color: var(--sc-ink); font-weight: 600; letter-spacing: .02em; }
.liveries__note { margin-top: 12px; font-size: .82rem; color: var(--sc-ink-soft); }
@media (max-width: 760px) { .liveries { grid-template-columns: 1fr; } }
.svc__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); }
.svc__list, .menu-list { list-style: none; margin: 0; padding: 0; }
.svc__list li { border-top: 1px solid var(--line); }
.svc__list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; text-decoration: none; }
.svc__list strong { font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; }
.svc__list em { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc__list span { grid-column: 1 / -1; color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .svc__list a:hover strong { text-decoration: underline; text-underline-offset: 4px; } }

.rev__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.rev__card { margin: 0; padding: 28px; background: var(--soft); border-radius: var(--r); display: grid; align-content: space-between; gap: 18px; }
.rev__card blockquote { margin: 0; font-size: 1.06rem; line-height: 1.55; }
.rev__card figcaption { color: var(--sc-ink-soft); font-size: .88rem; }
.rev p { color: var(--sc-ink-soft); }

.close2 { margin: clamp(72px, 10vw, 140px) max(10px, 1.5vw) 0; border-radius: 32px; background: var(--night); color: #fff; padding-block: clamp(64px, 9vw, 128px); }
.close2 .pill { background: #fff; color: var(--night); }
.close2 .pill--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.steps3 { list-style: none; counter-reset: s; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 900px; }
.steps3 li { counter-increment: s; padding: 18px 18px 20px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; color: rgba(255, 255, 255, .86); line-height: 1.4; }
.steps3 li::before { content: "0" counter(s); display: block; margin-bottom: 10px; font-size: .8rem; letter-spacing: .12em; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.close2__nap, .close2__areas { color: rgba(255, 255, 255, .66); font-size: .92rem; line-height: 1.6; margin: 18px 0 0; max-width: 70ch; }
.close2__nap { margin-top: 30px; }
.close2 .film-chip { color: #fff; margin: 0 0 22px; }
.close2 .film-chip i { border-color: rgba(255, 255, 255, .4); }

/* ---------------------------------------------------- home: phones -- */
@media (max-width: 760px) {
  .hero-copy { top: calc(var(--head) + 3vh); }
  .hero-copy h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); margin: 14px 0 12px; }
  .hero-copy__sub { font-size: .98rem; }
  .hero-copy__cue { margin-top: 16px; }
  .mega { flex-direction: column; font-size: 19vw; bottom: calc(var(--bar) + 3vh); }
  .say--side { left: var(--gut); right: var(--gut); top: calc(var(--c2y) + var(--c2h) + 22px); }
  .say--side .reveal-words { font-size: clamp(1.2rem, 5.2vw, 1.5rem); margin-bottom: 18px; }
  .say--center { top: calc(var(--head) + 4vh); }
  .say--center .reveal-words { font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
  .makers { bottom: calc(var(--bar) + 3vh); }
  .station { top: 50vh; width: 230px; }
  .parade { gap: 9vw; }
  .spec { left: 10px; right: 10px; bottom: calc(var(--bar) + 10px); padding: 12px; gap: 10px 8px;
    grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-areas: "prev main next" "film film film" "cta cta cta"; }
  .spec__nav { width: 40px; height: 40px; font-size: 1.3rem; }
  .spec__nav[data-dir="-1"] { grid-area: prev; }
  .spec__nav[data-dir="1"] { grid-area: next; }
  .spec__main { grid-area: main; text-align: center; }
  .spec__row { justify-content: center; margin-top: 8px; }
  .spec__more { display: none; }
  .spec__film { grid-area: film; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; padding-top: 10px; border-top: 1px solid var(--line); }
  .spec__film .spec__label { margin: 0; align-self: center; }
  .spec__filmname { font-size: .9rem; }
  .spec__where { display: none; }
  .spec__cta { grid-area: cta; display: flex; align-items: center; gap: 10px; }
  .spec__cta .spec__label { display: none; }
  .spec__cta .pill { margin-left: auto; min-height: 42px; }
  .spec__price { font-size: 1rem; }
  .spec__line { font-size: .84rem; }
  .illus-note { right: 20px; top: calc(var(--head) + 12px); font-size: .72rem; }
  .why__grid, .svc__cols, .biz__grid { grid-template-columns: 1fr; }
  .facts3 { grid-template-columns: 1fr; }
  .facts3 li { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .fan-wrap { grid-template-columns: 1fr; border-radius: 26px; }
  .fan-wrap { width: calc(100% - 20px); }
  .picked { flex-wrap: wrap; }
  .picked .pill { width: 100%; margin: 4px 0 0; }
  .rev__grid { grid-template-columns: 1fr; }
  .steps3 { grid-template-columns: 1fr; }
  .close2 { border-radius: 26px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hero-copy__sub, .hero-copy__cue { display: none; }
  .spec__line { display: none; }
  .spec { gap: 8px; }
  .spec__film { padding-top: 8px; }
  .say--side .reveal-words { font-size: 1.12rem; }
}

/* phones turned sideways (short and wide): no bottom bar, compact story */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --head: 56px; --bar: 0px; }
  .actions { display: none; }
  body { padding-bottom: 0; }
  .top .pill { min-height: 36px; }
  .hero-copy { top: calc(var(--head) + 10px); }
  .hero-copy h1 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin: 8px 0 0; max-width: 22ch; }
  .hero-copy__sub, .hero-copy__cue { display: none; }
  .mega { font-size: clamp(3rem, 9vw, 6rem); bottom: 10px; }
  .say--side .reveal-words { font-size: clamp(1rem, 2.3vw, 1.25rem); margin-bottom: 12px; }
  .makers { display: none; }
  .say--center { top: calc(var(--head) + 8px); }
  .say--center .reveal-words { font-size: clamp(1rem, 2.4vw, 1.3rem); }
  .station { top: 58vh; }
  .spec { bottom: 8px; padding: 8px 10px; gap: 10px; }
  .spec__line, .spec__more, .spec__where, .spec__count, .spec__cta .spec__label { display: none; }
  .spec__name { font-size: 1.05rem; }
  .spec__row { margin-top: 4px; }
  .toggle button { min-height: 30px; }
  .illus-note { top: calc(var(--head) + 6px); font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .makers__track { animation: none; }
  .blade, .feature__after, .pill, .btn { transition: none; }
  .fan.is-dealt .fan__set:not([hidden]) .blade { animation: none; }
  /* Scenes cut instead of move (home.js snaps every progress); soften the cuts. */
  .stage :is(.frame, .frame__card, .hero-copy, .mega, .say, .makers, .station, .parade, .pcar, .feature, .flyer, .spec, .illus-note) { transition: opacity 320ms var(--sc-ease-out); }
}

/* ======================================================== INNER PAGES == */
.page { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.crumbs { font-size: .85rem; color: var(--sc-ink-soft); padding-top: var(--sc-6); }
.crumbs a { color: var(--sc-ink-soft); }
.lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding-block: var(--sc-6) var(--sc-8); }
.lead h1 { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 4rem); line-height: 1; margin: 0 0 var(--sc-5); max-width: 18ch; }
.lead__answer { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 58ch; }
.lead__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: var(--sc-5) 0; padding: var(--sc-4) 0; border-block: 1px solid var(--line); }
.lead__price b { font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lead__price span { color: var(--sc-ink-soft); }
.lead figure { margin: 0; }
.lead figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.flag { display: inline-block; margin-top: 8px; font-size: .78rem; color: var(--sc-ink-soft); }
@media (max-width: 860px) { .lead { grid-template-columns: 1fr; align-items: start; } }

.cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 5vw, 80px); padding-block: var(--sc-8); border-top: 1px solid var(--line); }
.prose { max-width: 66ch; }
.prose h2 { font-size: var(--sc-t-xl); line-height: 1.1; margin: var(--sc-8) 0 var(--sc-3); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--sc-ink-soft); line-height: var(--sc-leading-body); margin: 0 0 var(--sc-4); }
.prose ul { padding-left: 1.1em; color: var(--sc-ink-soft); line-height: 1.7; }
.aside { display: grid; gap: var(--sc-6); align-content: start; }
.aside > div { background: var(--soft); border-radius: 20px; padding: 20px 22px; }
.aside h3 { font: 600 .74rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 var(--sc-3); }
.aside p { margin: 0; line-height: 1.55; }
.aside ul { list-style: none; padding: 0; margin: 0; }
.aside li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.aside li:last-child { border-bottom: 0; }
.aside li a { text-decoration: none; display: flex; justify-content: space-between; gap: 12px; }
.area-svc { list-style: none; padding: 0 !important; margin: 0 0 var(--sc-4); }
.area-svc li { border-top: 1px solid var(--line); }
.area-svc a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--sc-ink); }
.area-svc a span:last-child { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.area-svc small { display: block; color: var(--sc-ink-soft); font-size: .9rem; margin-top: 2px; }
@media (hover: hover) and (pointer: fine) { .area-svc a:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; } }
.guide__note { font-size: .88rem; color: var(--sc-ink-soft); margin-top: 10px; }
.guide .table-wrap { margin: 8px 0 0; }
.guide table.prices { min-width: 0; }
.guide .prices td.num { white-space: normal; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 11px; height: 6px; border-left: 2px solid var(--sc-ink); border-bottom: 2px solid var(--sc-ink); transform: rotate(-45deg); }
@media (max-width: 860px) { .cols { grid-template-columns: minmax(0, 1fr); } }

.faq { padding-block: var(--sc-8); border-top: 1px solid var(--line); }
.faq h2 { font-size: var(--sc-t-2xl); line-height: 1.02; margin: 0 0 var(--sc-6); }
.faq details { border-bottom: 1px solid var(--line); max-width: 900px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; font-weight: 500; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font: 300 1.6rem/1 var(--sc-font-text); transition: transform 160ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--sc-ink-soft); max-width: 70ch; line-height: var(--sc-leading-body); }

.band { margin-block: var(--sc-8); padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: var(--night); color: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.band__title { font: 600 var(--sc-t-2xl)/1.02 var(--sc-font-display); letter-spacing: -0.035em; margin: 0 0 8px !important; color: #fff !important; }
.band p { margin: 0; color: rgba(255, 255, 255, .7); }
.band .btn--primary { background: #fff; color: var(--night); }
.band .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .34); }
@media (max-width: 860px) { .band { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; }
table.prices { width: 100%; border-collapse: collapse; min-width: 560px; }
.prices th, .prices td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prices th { font: 600 .74rem/1.2 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); background: var(--soft); }
.prices td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.prices tr:last-child td { border-bottom: 0; }

.ba--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ba--pair figcaption { grid-column: 1 / -1; }
.ba__half { position: relative; }
.gallery .ba__half img { display: block; aspect-ratio: 16 / 10; border-radius: 16px; }
.ba__half span { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9);
  font: 600 .7rem/1 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; }

.steps-strip { padding-block: var(--sc-6) var(--sc-8); border-top: 1px solid var(--line); }
.steps-strip h2 { font-size: var(--sc-t-xl); margin: 0 0 6px; }
.steps-strip > p { color: var(--sc-ink-soft); margin: 0 0 var(--sc-5); }
.steps-strip__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.steps-strip__row--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.steps-strip .steps-strip__row--wide img { aspect-ratio: 16 / 9; }
.steps-strip figure { margin: 0; }
.steps-strip img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.steps-strip figcaption { padding-top: 8px; font-size: .86rem; color: var(--sc-ink-soft); line-height: 1.4; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; padding-bottom: var(--sc-6); }
.quotes blockquote { margin: 0; padding: 28px; background: var(--soft); border-radius: var(--r); }
.quotes p { font-size: 1.08rem; line-height: 1.55; margin: 0 0 14px; }
.quotes cite { font-style: normal; color: var(--sc-ink-soft); font-size: .9rem; }

/* ------------------------------------------------- work: build hub -- */
.hub { padding-block: var(--sc-6) var(--sc-7); }
.hub h1 { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 4rem); line-height: 1; margin: 0 0 12px; }
.hub__lead { font-size: var(--sc-t-lg); margin: 0 0 8px; }
.hub__note { color: var(--sc-ink-soft); max-width: 70ch; margin: 0 0 var(--sc-6); line-height: 1.55; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fchip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--sc-ink); font: 500 .88rem var(--sc-font-text); cursor: pointer; }
.fchip i { font-style: normal; color: var(--sc-ink-soft); margin-left: 4px; font-variant-numeric: tabular-nums; }
.fchip[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.fchip[aria-pressed="true"] i { color: rgba(255, 255, 255, .7); }
.builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 18px; margin-top: var(--sc-6); }
.builds__empty { color: var(--sc-ink-soft); }
.bcard { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.bcard[hidden] { display: none; }
.bcard__pic { position: relative; display: block; margin-bottom: 8px; }
.bcard__pic img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; transition: transform 300ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .bcard:hover .bcard__pic img { transform: scale(1.015); } .bcard:hover .bcard__model { text-decoration: underline; text-underline-offset: 3px; } }
.bcard__tag, .btag { display: inline-block; padding: 6px 10px; border-radius: 999px; font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; }
.bcard__tag { position: absolute; left: 10px; top: 10px; background: rgba(255, 255, 255, .92); color: var(--sc-ink); }
.bcard__make { font: 500 .72rem/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.bcard__model { font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; }
.bcard__work { color: var(--sc-ink-soft); font-size: .92rem; line-height: 1.4; }
@media (max-width: 980px) { .builds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .builds { grid-template-columns: 1fr; } }

/* ------------------------------------------------- work: build page -- */
.build { padding-block: var(--sc-5) var(--sc-6); }
.build__eyebrow { font: 600 .74rem/1 var(--sc-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 12px; }
.build h1 { font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3.2rem); line-height: 1.04; margin: 0 0 14px; max-width: 24ch; }
.build__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.btag { background: var(--soft); color: var(--sc-ink); }
.btag--concept { background: var(--night); color: #fff; }
.build__note { color: var(--sc-ink-soft); margin: 0 0 var(--sc-5); max-width: 70ch; }
.build__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; margin-top: var(--sc-4); }
.build__hero { margin: 0; background: var(--soft); border-radius: 20px; overflow: hidden; display: grid; place-items: center; }
.build__hero img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.spec-list { margin: 0; display: grid; border-top: 1px solid var(--line); }
.spec-list div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec-list dt { font: 600 .72rem/1.5 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.spec-list dd { margin: 0; line-height: 1.45; }
.spec__dim { color: var(--sc-ink-soft); }
.quote-box { margin-top: 20px; padding: 22px; background: var(--soft); border-radius: 20px; }
.quote-box h2 { font-size: 1.25rem; margin: 0 0 6px; }
.quote-box p { color: var(--sc-ink-soft); margin: 0 0 14px; line-height: 1.5; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.thumb { display: block; width: 96px; height: 72px; border-radius: 10px; overflow: hidden; outline-offset: 2px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb[aria-current="true"] { outline: 2px solid var(--sc-ink); }
.build__text { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--line); }
.build__text h2 { font-size: var(--sc-t-xl); margin: 0 0 12px; }
.build__text p { color: var(--sc-ink-soft); line-height: var(--sc-leading-body); margin: 0 0 12px; max-width: 62ch; }
.build__text ul { padding-left: 0; list-style: none; line-height: 1.7; color: var(--sc-ink-soft); }
.related { padding-block: var(--sc-7) 0; border-top: 1px solid var(--line); }
.related h2 { font-size: var(--sc-t-xl); margin: 0; }
@media (max-width: 860px) { .build__grid, .build__text { grid-template-columns: 1fr; } .spec-list div { grid-template-columns: 7rem 1fr; } }

/* ------------------------------------------------------------- forms -- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: 6px; font: 500 .84rem var(--sc-font-text); color: var(--sc-ink-soft); }
.form input, .form select, .form textarea { font: 400 1rem var(--sc-font-text); color: var(--sc-ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 14px; min-height: 50px; padding: 10px 14px; width: 100%; }
.form textarea { min-height: 100px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--sc-ink); outline-offset: 1px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form small { color: var(--sc-ink-soft); font-size: .8rem; line-height: 1.5; }
.form__status { min-height: 1.5em; font-weight: 500; }
.form__status.is-ok { color: #177245; } .form__status.is-err { color: #B42318; }
.film-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--sc-ink-soft); }
.film-chip i { flex: none; width: 16px; height: 16px; border-radius: 5px; display: inline-block; border: 1px solid var(--line-strong); }
.film-chip[hidden] { display: none; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

dialog.quote { width: min(720px, calc(100vw - 24px)); max-height: calc(100svh - 24px); border: 0; border-radius: 26px; background: #fff; color: var(--sc-ink);
  padding: clamp(20px, 4vw, 40px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45); }
dialog.quote::backdrop { background: rgba(10, 10, 11, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.quote .quote__title { font: 600 var(--sc-t-xl)/1.1 var(--sc-font-display); letter-spacing: -0.035em; margin: 0 0 6px; }
dialog.quote .note { color: var(--sc-ink-soft); margin: 0 0 20px; }
.dialog__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--soft); border: 0; color: var(--sc-ink); font-size: 1.5rem; cursor: pointer; }

/* ------------------------------------------------------------ footer -- */
.foot { border-top: 1px solid var(--line); margin-top: clamp(72px, 10vw, 140px); }
.foot__in { max-width: 1280px; margin: 0 auto; padding: var(--sc-8) var(--gut) var(--sc-7); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; font-size: .92rem; color: var(--sc-ink-soft); }
.foot h3 { font: 600 .74rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink); margin: 0 0 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.foot a { text-decoration: none; } .foot a:hover { text-decoration: underline; }
.foot address { font-style: normal; line-height: 1.7; }
.foot__legal { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line); font-size: .8rem; }
@media (max-width: 860px) { .foot__in { grid-template-columns: 1fr; } }

/* areas strip on service, car and guide pages */
.areas-strip { margin-block: var(--sc-8); }
.areas-strip ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0 24px; }
.areas-strip li { border-top: 1px solid var(--line); }
.areas-strip a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--sc-ink); }
.areas-strip a span:last-child { color: var(--sc-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .areas-strip a:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; } }
.areas-strip p { color: var(--sc-ink-soft); max-width: 70ch; }

/* ======================================================================
   Owner's refresh (2026-10-28): Gia's layout, headlines and animations as
   they are; only the text face and the buttons change. Remove this block
   to get the original look back.
   ====================================================================== */
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-var.woff2?v=4aa8ee2a") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }
:root { --sc-font-text: "Instrument Sans", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* buttons: glossy white pills everywhere (owner), a hairline and shadow keep them visible on white pages */
.pill, .btn, .btn--primary, body.on-dark .top .pill, .close2 .pill, .band .btn--primary, .hero-copy .pill {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEEDF2 100%); color: #0A0A0B; border: 1px solid rgba(10, 10, 11, .14);
  font-weight: 600; letter-spacing: .005em;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(0, 0, 0, .1), 0 12px 26px -14px rgba(0, 0, 0, .4);
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out); }
body.on-dark .top .pill, .close2 .pill, .band .btn--primary { border-color: transparent; }
.pill--ghost, .btn--ghost { background: rgba(10, 10, 11, .03); color: var(--sc-ink); border: 1px solid var(--line-strong); box-shadow: none; }
.close2 .pill--ghost, .band .btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .3); }
@media (max-width: 860px) { .actions__row a.is-primary { background: #FFFFFF; color: #0A0A0B; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .14); } }
.btn--primary:not(.bar .btn)::after, .pill:not(.top .pill):not(.pill--ghost)::after {
  content: ""; width: .95em; height: .95em; margin-left: .15em; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pill:hover, .btn--primary:hover { background: #FFFFFF; transform: translateY(-1px); border-color: rgba(10, 10, 11, .3);
    box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 4px rgba(0, 0, 0, .12), 0 16px 30px -14px rgba(0, 0, 0, .45); }
  .pill:hover::after, .btn--primary:hover::after { transform: translateX(3px); }
  .pill--ghost:hover, .btn--ghost:hover { background: rgba(10, 10, 11, .06); transform: translateY(-1px); }
}

/* ======================================================================
   Luxury pass (2026-10-28): same structure, type sizes and animations.
   Warm paper instead of stark white, full-bleed "studio" bands in deep
   graphite where the dark studio photos live, hairline cards, champagne
   eyebrows, a dark footer. Remove this block to get the plain look back.
   ====================================================================== */
:root {
  --paper: #F5F3EF; --paper-2: #ECE9E3; --card: #FBFAF8;
  --sc-canvas: var(--paper); --sc-surface: var(--paper-2); --soft: var(--paper-2);
  --sc-ink: #0E0E10; --sc-ink-soft: #5E5C58;
  --night: #0B0B0C; --night-2: #141416;
  --gold: #7D6A48; --gold-lt: #CDB98F;
  --line: rgba(14, 14, 16, .1); --line-strong: rgba(14, 14, 16, .2);
  --studio: radial-gradient(120% 90% at 50% -10%, #212125 0%, #111113 45%, #0B0B0C 100%);
}
h1, h2, h3 { font-weight: 500; }
.h-xl, .h-xxl, .lead h1, .hub h1, .faq h2, .prose h2 { font-weight: 500; }
.top, .bar { background: rgba(245, 243, 239, .9); }
.menu, dialog.quote { background: var(--card); }
.actions { background: rgba(245, 243, 239, .96); }

/* eyebrows: small caps with a champagne rule */
.kicker, .eyebrow, .aside h3, .foot h3, .build__eyebrow, .spec__label, .prices th {
  color: var(--gold); letter-spacing: .18em; }
.kicker, .eyebrow { display: flex; align-items: center; gap: 12px; font: 600 .72rem/1 var(--sc-font-text); text-transform: uppercase; margin: 0 0 18px; }
.kicker::before, .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }

/* full-bleed band without extra markup: the background runs to the screen edges */
.bleed, .fan-wrap, .pair, .steps-strip, .band { border-image: linear-gradient(var(--night), var(--night)) fill 0 / 0 / 0 100vmax; }
.dark, .fan-wrap, .pair, .steps-strip, .band, .close2 { background: var(--night); color: #F2F0EB; }
:is(.fan-wrap, .pair, .steps-strip, .band, .close2) :is(.kicker, .eyebrow) { color: var(--gold-lt); }
:is(.fan-wrap, .pair, .steps-strip, .band, .close2) :is(p, figcaption, .picked__code) { color: rgba(242, 240, 235, .68); }
:is(.fan-wrap, .pair, .steps-strip, .band, .close2) :is(h2, b) { color: #F7F5F0; }
:is(.pair, .steps-strip, .band, .close2, .fan-wrap) .pill--ghost, :is(.band, .close2) .btn--ghost {
  background: rgba(255, 255, 255, .04); color: #fff; border-color: rgba(255, 255, 255, .26); }

/* --------------------------------------------------------- home bands -- */
.fan-sec { padding-top: clamp(72px, 10vw, 140px); }
.fan-wrap { width: auto; max-width: none; border-radius: 0; margin: 0; padding: clamp(64px, 8vw, 120px) var(--gut);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.fan-wrap > * { max-width: 620px; }
.fan-wrap > .fan-copy { justify-self: end; width: 100%; }
.fan-wrap > .fan { justify-self: start; }
.tab { background: transparent; color: #E9E6DF; border-color: rgba(255, 255, 255, .22); }
.tab[aria-pressed="true"] { background: #F2F0EB; border-color: #F2F0EB; color: var(--night); }
.picked { background: var(--night-2); border: 1px solid rgba(255, 255, 255, .1); }
.picked__name { color: #F7F5F0; }
.picked i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.blade { border-color: var(--night); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .9); }
.blade[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold-lt), 0 18px 34px -12px rgba(0, 0, 0, .9); }
.fan::after { background: #F2F0EB; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 24px -12px rgba(0, 0, 0, .8); }

.why__item img, .biz__img img, .liveries img { box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .55); }
.facts3 b { font-weight: 500; font-size: 1.12rem; }
.svc__list strong { font-weight: 500; }

.rev__card { background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .35); position: relative; padding-top: 58px; }
.rev__card::before { content: "\201C"; position: absolute; left: 26px; top: 14px; font: 400 3.4rem/1 Georgia, "Times New Roman", serif; color: var(--gold); opacity: .8; }
.quotes blockquote { background: var(--card); border: 1px solid var(--line); }

.close2 { margin: clamp(72px, 10vw, 140px) 0 0; border-radius: 0; position: relative; overflow: hidden; isolation: isolate;
  background: var(--night) right center / cover no-repeat; }
/* the photo comes in with the rest of the story's images (home.js adds .scene-on after load), not with the first screen */
.scene-on .close2 { background-image: url("/assets/img/studio/hero-after-1440.webp?v=14daa26c"); }
.close2::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #0B0B0C 0%, rgba(11, 11, 12, .94) 38%, rgba(11, 11, 12, .55) 100%), linear-gradient(0deg, #0B0B0C 0%, transparent 40%); }
@media (max-width: 760px) {
  .close2 { background-position: center top; background-size: 100% auto; }
  .scene-on .close2 { background-image: url("/assets/img/studio/hero-after-m-900.webp?v=bb199bf9"); }
  .close2::before { background: linear-gradient(180deg, rgba(11, 11, 12, .55) 0%, #0B0B0C 46%); }
  .fan-wrap { grid-template-columns: 1fr; padding-inline: var(--gut); }
  .fan-wrap > .fan-copy, .fan-wrap > .fan { justify-self: stretch; max-width: none; }
}
.steps3 li { border-color: rgba(255, 255, 255, .14); background: rgba(11, 11, 12, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.steps3 li::before { color: var(--gold-lt); }

/* ------------------------------------------------- inner pages: hero -- */
.page > .crumbs, .page > .lead, .page > .guide > .lead {
  background: var(--night); border-image: linear-gradient(var(--night), var(--night)) fill 0 / 0 / 0 100vmax; color: #F2F0EB; }
/* a soft studio light behind the hero photo, across the full width */
.page > .lead, .guide > .lead { position: relative; isolation: isolate; }
.page > .lead::before, .guide > .lead::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw;
  -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); translate: -50% 0;
  background: radial-gradient(55% 85% at 72% 45%, #1F1F23 0%, rgba(11, 11, 12, 0) 70%); pointer-events: none; }
.page > .crumbs { margin: 0; padding-bottom: 4px; }
.page > .crumbs, .page > .crumbs a { color: rgba(242, 240, 235, .56); }
.page > .lead, .page > .guide > .lead { padding-bottom: clamp(48px, 6vw, 88px); }
:is(.page > .lead, .guide > .lead) .lead__answer { color: rgba(242, 240, 235, .76); }
:is(.page > .lead, .guide > .lead) .lead__answer a { color: #fff; }
:is(.page > .lead, .guide > .lead) .lead__price { border-color: rgba(255, 255, 255, .14); }
:is(.page > .lead, .guide > .lead) .lead__price span, :is(.page > .lead, .guide > .lead) .flag { color: rgba(242, 240, 235, .58); }
:is(.page > .lead, .guide > .lead) .btn--ghost { background: rgba(255, 255, 255, .04); color: #fff; border-color: rgba(255, 255, 255, .26); }
:is(.page > .lead, .guide > .lead) figure img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.page > .lead + .cols, .guide > .lead + .cols { border-top: 0; }

/* --------------------------------------------- inner pages: content -- */
.aside > div { background: var(--card); border: 1px solid var(--line); }
.quote-box, .build__hero { background: var(--card); border: 1px solid var(--line); }
.prose ul.ticks { list-style: none; padding-left: 0; }
.ticks li::before { border-color: var(--gold); }
.table-wrap { background: var(--card); }
.prices th { background: var(--paper-2); }
.faq summary { font-weight: 500; }
.faq summary::after { color: var(--gold); }

.pair, .steps-strip { margin-block: var(--sc-8); padding-block: clamp(56px, 7vw, 96px); border-top: 0; }
.pair h2, .steps-strip h2 { font-size: var(--sc-t-xl); margin: 0 0 var(--sc-5); }
.pair figure { margin: 0; }
:is(.pair, .steps-strip) + :is(.faq, .areas-strip, .related) { border-top: 0; }
.pair .ba__half img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.pair figcaption { padding-top: 12px; font-size: .9rem; }
.ba__half span { background: rgba(11, 11, 12, .72); color: #F2F0EB; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .16); }
.pair + .steps-strip { margin-top: calc(-1 * var(--sc-8)); padding-top: 0; }

.band { margin-block: var(--sc-8) 0; border-radius: 0; padding: clamp(56px, 7vw, 96px) 0; background: var(--night); }
.band__title { font-weight: 500; }

/* ------------------------------------------------------------ footer -- */
.foot { background: var(--night); color: rgba(242, 240, 235, .62); border-top: 1px solid rgba(255, 255, 255, .08); }
.foot__in { color: inherit; }
.foot h3 { color: var(--gold-lt); }
.foot a:hover { color: #fff; }
.foot__legal { border-color: rgba(255, 255, 255, .1); }
main:has(> .band:last-child) + .foot, main:has(> .close2:last-child) + .foot { margin-top: 0; }

/* ------------------------------------------- home: first screen, clean -- */
/* one eyebrow, one headline, one line of copy, on a scrim so they read over any photo */
.frame__shade { background:
  linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 34%, rgba(0, 0, 0, 0) 62%),
  linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 26%),
  linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 36%); }
.hero-copy { top: calc(var(--head) + 9vh); }
.hero-copy__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 .74rem/1 var(--sc-font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); }
.hero-copy__eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; }
.hero-copy h1 { font-weight: 500; margin: 20px 0 18px; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero-copy__sub { color: rgba(255, 255, 255, .86); text-shadow: 0 1px 16px rgba(0, 0, 0, .45); }
.mega { font-size: clamp(2.8rem, 7.2vw, 8.6rem); font-weight: 500; letter-spacing: -0.05em; }
.mega__a { color: rgba(255, 255, 255, .42); }
@media (max-width: 760px) {
  .frame__shade { background:
    linear-gradient(180deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .62) 30%, rgba(0, 0, 0, 0) 52%),
    linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, 0) 34%); }
  .hero-copy { top: calc(var(--head) + 4vh); }
  .hero-copy h1 { margin: 14px 0 12px; }
  .mega { font-size: 15vw; }
}
@media (max-height: 500px) and (orientation: landscape) { .hero-copy__sub { display: none; } .hero-copy h1 { margin-top: 10px; } }

/* photos in the story are not draggable or long-press targets: a touch on them always scrolls the page */
.stage img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }