/* CarSX Garage | warm dyno cell: charcoal walls, 2700K LED bars, CarSX red. Desktop-first, max-width cascade: 991 / 767 / 479. */

:root {
  /* Locked dark theme in the CarSX logo colours: off-black, off-white and CarSX red (no pure black or white).
     The 3D cell keeps its warm 2700K LED light; the interface around it is red, white and black. */
  --bg: oklch(0.15 0.005 25);
  --bg-2: oklch(0.19 0.006 25);
  --bg-3: oklch(0.235 0.007 25);
  --bg-gl: #0f0d0d; /* --bg as hex, for three.js clear colours */
  --line: oklch(0.93 0.004 25 / 0.12);
  --line-2: oklch(0.93 0.004 25 / 0.24);
  --ink: oklch(0.965 0.004 25);
  --ink-2: oklch(0.84 0.006 25);
  --ink-3: oklch(0.7 0.008 25);
  /* red for text and thin lines (5:1 on --bg), deeper logo red for fills under off-white text (4.6:1) */
  --accent: oklch(0.665 0.19 25);
  --red: oklch(0.575 0.205 26);
  --red-2: oklch(0.5 0.18 26);
  --accent-ink: var(--ink);
  --heat: oklch(0.74 0.16 50);

  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(1rem, 3.2vw, 3rem);
  --frame: clamp(10px, 1.2vw, 18px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);

  /* z-index scale */
  --z-canvas: 0;
  --z-content: 2;
  --z-hud: 10;
  --z-nav: 20;
  --z-loader: 100;

  --logo-x: var(--red);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ol, ul { margin: 0; padding: 0; list-style: none; }

.mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.label { color: var(--accent); }
.display {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 4.5rem); margin-top: 1rem; overflow-wrap: break-word; } /* a word too long for its column wraps instead of being clipped */

::selection { background: var(--red); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Buttons: chamfered corner, chevron glyph ---------- */
.btn {
  --cut: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.75rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--solid { background: var(--red); color: var(--ink); }
.btn--solid:hover { background: var(--ink); color: var(--bg); }
.btn--ghost { background: oklch(0.850 0.007 25 / 0.08); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: oklch(0.850 0.007 25 / 0.16); }
.btn--lg { min-height: 52px; padding-inline: 1.6rem; }
.btn__chev { transition: transform 200ms var(--ease-out); }
.btn:hover .btn__chev { transform: translateX(3px); }

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 700ms var(--ease-out), visibility 700ms;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { width: min(360px, 80vw); }
.loader__car { display: block; width: 58%; height: auto; margin: 0 auto 1.6rem; animation: loader-car 900ms var(--ease-out) both; }
@keyframes loader-car { from { opacity: 0; transform: translateX(-14px); } }
.loader__pct { text-align: right; color: var(--ink); margin-bottom: 0.6rem; }
.loader__cells { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; }
.loader__cells i { aspect-ratio: 1; background: var(--line-2); transition: background-color 160ms; }
.loader__cells i.on { background: var(--ink); }
.loader__log { margin-top: 0.9rem; color: var(--ink-3); line-height: 1.8; }
.loader__log li.on { color: var(--ink); }

/* ---------- Canvas + frame ---------- */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  touch-action: pan-y;
}
.frame {
  position: fixed;
  inset: var(--frame);
  z-index: var(--z-hud);
  pointer-events: none;
  border: 1px solid var(--line);
}
.frame__c { position: absolute; width: 14px; height: 14px; border-color: var(--line-2); border-style: solid; }
.frame__c--tl { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.frame__c--tr { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.frame__c--bl { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.frame__c--br { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: var(--frame);
  left: var(--frame);
  right: var(--frame);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem calc(var(--gutter) - var(--frame));
}
/* scrim so copy scrolling up under the nav fades out instead of colliding with the links */
.nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--frame));
  left: calc(-1 * var(--frame));
  right: calc(-1 * var(--frame));
  height: calc(100% + var(--frame) + 2.5rem);
  background: linear-gradient(to bottom, color-mix(in oklch, var(--bg) 94%, transparent) 0%, color-mix(in oklch, var(--bg) 70%, transparent) 55%, transparent 100%);
  pointer-events: none;
}
.nav__logo svg { width: 132px; height: 21.4px; color: var(--ink); }
.nav__links { display: flex; gap: clamp(1rem, 2vw, 2.25rem); margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--ink-2); padding: 0.5rem 0; transition: color 200ms; }
.nav__links a:hover { color: var(--ink); }
.nav__links a { position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); }
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }

/* ---------- Chapter rail ---------- */
.rail {
  position: fixed;
  left: calc(var(--frame) + 1.1rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-hud);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.rail a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  text-decoration: none;
  color: var(--ink-3);
  font-size: 0.64rem;
  transition: color 250ms;
}
.rail a::before { content: ""; width: 5px; height: 5px; background: currentColor; opacity: 0.4; transition: opacity 250ms, background-color 250ms; }
.rail a.is-active { color: var(--ink); }
.rail a.is-active::before { opacity: 1; background: var(--accent); }
.rail a:hover { color: var(--ink-2); }
.rail a:hover::before { opacity: 0.8; }

/* ---------- Bottom HUD ---------- */
.hud {
  position: fixed;
  left: var(--frame);
  right: var(--frame);
  bottom: var(--frame);
  z-index: var(--z-hud);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.64rem;
  pointer-events: none;
}
.hud b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.hud__tele { display: flex; gap: 1.4rem; align-items: center; }
.hud__gear { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-2); color: var(--accent); }
.hud__scroll { display: flex; align-items: center; gap: 0.8rem; }
.hud__line { position: relative; width: 64px; height: 1px; background: var(--line-2); overflow: hidden; }
.hud__line i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.hud__right { text-align: right; }

/* ---------- Shared section scaffolding ---------- */
main { position: relative; z-index: var(--z-content); }
section { position: relative; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }

/* ---------- Hero ---------- */
.hero {
  /* the drive through the city (hero-drive.js) runs while this tall section scrolls past; its copy stays pinned on top */
  position: relative;
  height: 400vh;
  height: 400svh;
}
.hero__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: calc(var(--frame) + 6rem) calc(var(--gutter) + 7rem) calc(var(--frame) + 4.5rem) calc(var(--gutter) + 7.5rem);
  background: linear-gradient(180deg, transparent 55%, oklch(0.145 0.005 25 / 0.75));
}
.hero__meta { display: flex; justify-content: space-between; color: var(--ink-3); }
.hero__title {
  align-self: end;
  /* wide enough for the longest word, PERFORMANȚĂ. (about 13.2ch in this face) */
  max-width: 14ch;
  /* sized to stay clear of the car, which the ignition shot frames in the right half */
  font-size: clamp(2.2rem, 0.4rem + 3.8vw, 4.7rem);
  letter-spacing: -0.03em;
}
.hero__title .line { overflow: clip; padding-bottom: 0.04em; }
.hero__foot { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-top: 2rem; }
.hero__lede { max-width: 44ch; color: var(--ink-2); }
.hero__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero__specs {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--frame) + 8.5rem);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--ink-3);
}
.hero__specs div { display: grid; }
.hero__specs b { font-family: var(--font-display); font-stretch: 125%; font-size: 2.2rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; margin-top: 0.3rem; }
.hero__specs div:last-child b { color: var(--accent); }
.hero__specs i { font-style: normal; }
.hero__arrow { width: 48px; height: 1px; background: var(--line-2); position: relative; }
.hero__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--ink-3); border-right: 1px solid var(--ink-3); transform: rotate(45deg); }

/* ---------- Build ---------- */
.build { height: 420vh; }
.build__inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 30rem) 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 2rem;
  padding: calc(var(--frame) + 6rem) var(--gutter) calc(var(--frame) + 5rem) calc(var(--gutter) + 7.5rem);
  background: linear-gradient(90deg, oklch(0.145 0.005 25 / 0.85) 0%, oklch(0.145 0.005 25 / 0.4) 38%, transparent 60%);
}
.build__head { grid-column: 1; }
.build__steps { grid-column: 1; align-self: center; display: grid; gap: 0.4rem; margin-top: 2rem; }
.step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  opacity: 0.38;
  transition: opacity 400ms var(--ease-out);
}
.step h3 { font-family: var(--font-display); font-stretch: 112%; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
.step p { color: var(--ink-2); margin-top: 0.4rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 500ms var(--ease-out), opacity 400ms var(--ease-out); }
.step__n { color: var(--ink-3); padding-top: 0.25rem; }
.step.is-active { opacity: 1; }
.step.is-active .step__n { color: var(--accent); }
.step.is-active p { max-height: 8rem; opacity: 1; }
.build__parts { grid-column: 2; grid-row: 3; justify-self: end; display: grid; gap: 0.4rem; text-align: right; color: var(--ink-3); }
.build__parts span { opacity: 0.3; transition: opacity 400ms, color 400ms; }
.build__parts span.on { opacity: 1; color: var(--ink-2); }

/* ---------- Engine ---------- */
/* the engine comes together in the first third, then the flight up the street to the logo takes its time */
.engine { height: 640vh; }
.engine__inner {
  position: relative;
  height: 100%;
  padding: calc(var(--frame) + 6rem) var(--gutter) calc(var(--frame) + 5rem) calc(var(--gutter) + 7.5rem);
  background: radial-gradient(ellipse at 15% 20%, oklch(0.145 0.005 25 / 0.8), transparent 55%);
}
.engine__head { max-width: 34rem; }
.engine__lede { color: var(--ink-2); margin-top: 1.25rem; max-width: 46ch; }
.callouts { position: absolute; inset: 0; pointer-events: none; }
.callout {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.8rem 0.55rem 1.4rem;
  background: oklch(0.145 0.005 25 / 0.72);
  border: 1px solid var(--line-2);
  font-size: 0.85rem;
  opacity: 0;
  will-change: transform, opacity;
}
.callout::before { content: ""; position: absolute; left: 0.55rem; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--accent); }
.callout b { font-family: var(--font-display); font-stretch: 112%; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.02em; }
.callout span { color: var(--ink-3); font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; }
.engine__stats {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--frame) + 5rem);
  display: flex;
  gap: 2.5rem;
}
.engine__stats dt { color: var(--ink-3); }
.engine__stats dd { margin: 0.35rem 0 0; color: var(--ink); font-size: 0.9rem; }
/* the sea under Procesul and Inima (own WebGL view, heart.js): a fixed layer under the sections, clipped by script to
   the stretch of page they cover; the sections' sticky panels take the drag and the ripples for it */
.sea { position: fixed; inset: 0; z-index: 0; pointer-events: none; visibility: hidden; }
.heart__layer { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 50%; will-change: transform; }
#heartGl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* (no text selection: a drag that starts beside the copy would otherwise paint the headings as selected) */
.build > .sticky, .engine > .sticky { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.build > .sticky.is-grabbing, .engine > .sticky.is-grabbing { cursor: grabbing; }
.build__inner { pointer-events: none; }
.engine__inner { z-index: 1; pointer-events: none; }
.heart__ui { position: absolute; z-index: 2; top: calc(var(--frame) + 6rem); right: var(--gutter); display: grid; justify-items: end; gap: 0.55rem; pointer-events: auto; }
.heart__hint { color: var(--ink-3); }
.heart__short { display: none; }
.city__zoom button[data-heart="in"], .city__zoom button[data-heart="out"] { padding: 0; font-size: 1.05rem; }

/* ---------- Dyno ---------- */
/* the door opens, the car rolls in onto the dyno and is strapped down, then the full run (dyno-scene.js) */
.dyno { height: 640vh; }
.dyno__inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 28rem) 1fr;
  grid-template-rows: auto 1fr;
  gap: 2rem;
  padding: calc(var(--frame) + 6rem) var(--gutter) calc(var(--frame) + 4.5rem) calc(var(--gutter) + 7.5rem);
  background: linear-gradient(0deg, oklch(0.145 0.005 25 / 0.92) 0%, oklch(0.145 0.005 25 / 0.5) 34%, transparent 52%);
}
.dyno__head p { color: var(--ink-2); margin-top: 1.25rem; max-width: 42ch; }
.dyno__panel {
  grid-column: 1 / -1;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 22rem) 1fr;
  gap: 2rem;
  align-items: end;
  position: relative;
}
.readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.readout { padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 0.4rem; }
.readout span { grid-column: 1 / -1; color: var(--ink-3); font-size: 0.62rem; }
.readout b { font-family: var(--font-display); font-stretch: 112%; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; text-transform: none; }
.readout i { font-style: normal; color: var(--ink-3); }
.readout--big { grid-column: 1 / -1; }
.readout--big b { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.25rem); }
.chart { position: relative; height: clamp(220px, 34vh, 360px); }
/* on large screens the cell monitor in the 3D scene carries the graph; the canvas stays rendered as its source */
.dyno .chart { opacity: 0; pointer-events: none; }
.chart canvas { width: 100%; height: 100%; }
.chart__legend { position: absolute; top: 0; right: 0; display: flex; gap: 1.2rem; color: var(--ink-3); font-size: 0.62rem; }
.lg { display: inline-flex; align-items: center; gap: 0.45rem; }
.lg::before { content: ""; width: 16px; height: 2px; background: currentColor; }
.lg--hp::before { background: var(--ink); }
.lg--nm::before { background: var(--red); }
.lg--stock::before { background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 7px); }
.tach { position: absolute; left: 0; right: 0; bottom: -1.2rem; height: 2px; background: var(--line); }
.tach i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--ink-2) 0 72%, var(--accent) 86%, var(--red) 96%); }

/* ---------- Stages ---------- */
.stages { min-height: 100vh; min-height: 100svh; background: var(--bg); }
.stages__inner {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: grid;
  grid-template-columns: 1fr minmax(0, 30rem);
  grid-template-rows: auto 1fr;
  gap: 2rem;
  padding: calc(var(--frame) + 6rem) var(--gutter) calc(var(--frame) + 5rem) calc(var(--gutter) + 7.5rem);
  background: linear-gradient(270deg, oklch(0.145 0.005 25 / 0.9) 0%, oklch(0.145 0.005 25 / 0.5) 35%, transparent 55%);
}
.stages__hint { color: var(--ink-3); margin-top: 1rem; }
/* the dyno-cell photo, static: a viewport-high backdrop that stays put while the section scrolls past */
.stages__photo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  overflow: clip;
  pointer-events: none;
  container-type: size;
}
.stages__photo > img {
  position: absolute;
  left: 50%;
  top: 50%;
  /* covers the screen with as little zoom as it can, nudged left so the car sits toward the copy and away from the specs
     panel (wide enough that the nudge still reaches the right edge) */
  width: max(112cqw, 100cqh * 1920 / 1072);
  max-width: none;
  height: auto;
  aspect-ratio: 1920 / 1072;
  translate: var(--fx, -54%) -50%;
}
/* a shade that keeps the copy readable (the heading block sits over the car's roof) */
.stages__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 22% at 26% 28%, oklch(0.145 0.005 25 / 0.6), transparent),
    linear-gradient(180deg, oklch(0.145 0.005 25 / 0.6) 0%, transparent 30%),
    linear-gradient(0deg, oklch(0.145 0.005 25 / 0.55) 0%, transparent 22%),
    linear-gradient(270deg, oklch(0.145 0.005 25 / 0.7) 0%, oklch(0.145 0.005 25 / 0.35) 32%, transparent 52%);
}
.spec { grid-column: 2; grid-row: 1 / -1; align-self: center; cursor: default; }
.spec__tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-2); }
.spec__tabs button {
  min-height: 46px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.spec__tabs button:first-child { border-left: 0; }
.spec__tabs button:hover { color: var(--ink); background: oklch(0.850 0.007 25 / 0.06); }
.spec__tabs button:active { transform: scale(0.97); }
.spec__tabs button[aria-selected="true"] { background: var(--red); color: var(--ink); }
.spec__body { padding: 1.5rem 0 0; }
.spec__desc { color: var(--ink-2); min-height: 4.7em; }
.spec__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 1.5rem; }
.metric { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 0.4rem; }
.metric span { grid-column: 1 / -1; color: var(--ink-3); font-size: 0.62rem; }
.metric b { font-family: var(--font-display); font-stretch: 125%; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.9rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; text-transform: none; line-height: 1.05; }
.metric i { font-style: normal; color: var(--ink-3); }
.bar { grid-column: 1 / -1; height: 2px; background: var(--line); margin-top: 0.6rem; position: relative; }
.bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0.5); transition: transform 700ms var(--ease-out); }
.spec__parts { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.spec__parts li { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4rem 0.6rem; border: 1px solid var(--line-2); color: var(--ink-2); }
.spec__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line-2); color: var(--ink-3); }
.spec__foot b { font-family: var(--font-display); font-stretch: 125%; font-size: 1.5rem; color: var(--accent); letter-spacing: -0.01em; text-transform: none; }

/* ---------- Services (horizontal) ---------- */
.services { height: 400vh; }
.services .sticky { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: calc(var(--frame) + 6rem) 0 calc(var(--frame) + 4.5rem); }
.services__head { padding: 0 var(--gutter) 0 calc(var(--gutter) + 7.5rem); }
/* city map behind the cards (own WebGL view); the canvas and its address tag tilt together with the pointer */
.city__layer { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 50%; will-change: transform; }
#cityGl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
#cityGl.is-grabbing { cursor: grabbing; }
.services__head, .services__viewport { position: relative; z-index: 1; pointer-events: none; }
/* the map controls sit low in the open part of the city and slide with it (see city.js); passing cards cover them */
.city__ui { position: absolute; z-index: 1; left: calc(var(--gutter) + 7.5rem); bottom: calc(var(--frame) + 4.75rem); will-change: transform; }
.svc { pointer-events: auto; }
.city__tag {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  translate: -50% -100%;
  padding-bottom: 0.5rem;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease-out), scale 300ms var(--ease-out);
}
.city__tag.is-on { opacity: 1; pointer-events: auto; }
.city__tag.is-hot { scale: 1.08; }
.city__tag span { color: var(--accent); }
.city__tag b { font-weight: 500; }
.city__tag:hover b, .city__tag:focus-visible b { color: var(--accent); }
#cityGl.is-hq { cursor: pointer; }
/* the company card, opened from the workshop in the city */
.hqdlg__title { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); margin-top: 1.6rem; }
.hqdlg__lede { color: var(--ink-2); margin-top: 0.9rem; max-width: 52ch; line-height: 1.5; }
.hqdlg__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2rem; margin: 1.6rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.hqdlg__facts dt { color: var(--ink-3); font-size: 0.64rem; }
.hqdlg__facts dd { margin: 0.4rem 0 0; color: var(--ink); line-height: 1.45; }
.hqdlg__facts dd span { display: block; color: var(--ink-3); }
.hqdlg__wide { grid-column: 1 / -1; }
.hqdlg__contact { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.hqdlg__contact li { display: grid; gap: 0.3rem; min-width: 0; }
.hqdlg__contact span { color: var(--ink-3); font-size: 0.64rem; }
.hqdlg__contact a {
  justify-self: start;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 650;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
  padding-bottom: 2px;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition: background-size 260ms var(--ease-out);
}
.hqdlg__contact a:hover, .hqdlg__contact a:focus-visible { background-size: 100% 1px; }
.hqdlg__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.city__ui { display: grid; justify-items: start; gap: 0.55rem; pointer-events: auto; }
.city__hint { color: var(--ink-3); }
.city__zoom { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.city__zoom button {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.8rem;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: oklch(0.15 0.005 25 / 0.82);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: color 200ms, border-color 200ms, background-color 200ms;
}
.city__zoom button[data-city="in"], .city__zoom button[data-city="out"] { padding: 0; font-size: 1.05rem; }
.city__zoom button:hover, .city__zoom button:focus-visible { color: var(--ink); border-color: var(--red); background: oklch(0.32 0.1 26 / 0.88); }
.city__zoom button:active { scale: 0.96; }
.services__viewport {
  overflow: clip;
  align-self: center;
  margin-top: 2rem;
  /* cards fade out before they slide under the chapter rail */
  mask-image: linear-gradient(90deg, transparent calc(var(--gutter) + 5.5rem), #000 calc(var(--gutter) + 9rem));
}
.services__track { display: flex; gap: 1.5rem; padding: 0 34vw 0 54vw; width: max-content; will-change: transform; } /* the city is open on the left at the start and on the right at the end */
.svc {
  width: clamp(18rem, 27vw, 26rem);
  min-height: 24rem;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: oklch(0.185 0.006 25 / 0.78);
  border-top: 2px solid var(--accent);
}
.svc__n { font-size: 3.5rem; color: oklch(0.665 0.19 25 / 0.25); line-height: 1; }
.svc h3 { font-family: var(--font-display); font-stretch: 112%; font-size: 1.35rem; font-weight: 700; text-transform: uppercase; margin-top: 2.5rem; }
.svc p { color: var(--ink-2); margin-top: 0.8rem; }
.svc ul { margin-top: auto; padding-top: 1.5rem; display: grid; gap: 0.45rem; color: var(--ink-3); font-size: 0.66rem; }
.svc li::before { content: "> "; color: var(--accent); }
.svc--cta { background: oklch(0.230 0.007 25 / 0.92); border-top-color: var(--ink); }
.svc--cta .btn { margin-top: auto; align-self: flex-start; }
.svc { transition: transform 280ms var(--ease-out), background-color 280ms var(--ease-out), border-color 280ms var(--ease-out); }
.svc__n { transition: color 280ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { transform: translateY(-6px); background: oklch(0.210 0.007 25 / 0.88); }
  .svc:hover .svc__n { color: oklch(0.665 0.19 25 / 0.7); }
  .svc--cta:hover { background: oklch(0.260 0.007 25 / 0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .svc:hover { transform: none; }
}

/* ---------- Drumul: the four steps on a night-train strip (own WebGL view), the booking form scrolls in over it ---------- */
/* one sticky stage holds the canvas, the step copy, the hotspots and their card; an empty track gives it scroll length */
.journey__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#journeyGl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.journey__stage::before {
  /* keeps the copy readable over the cabins */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, oklch(0.15 0.005 25 / 0.82) 0%, oklch(0.15 0.005 25 / 0.5) 26%, transparent 50%);
}
.journey__track { height: 530vh; height: 530svh; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.journey__copy { position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(var(--gutter) + 7.5rem); width: min(34rem, 40vw); pointer-events: none; }
.journey__intro, .jstep { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; will-change: opacity, transform; }
.journey__hint { color: var(--ink-3); margin-top: 1.6rem; }
.journey__steps { list-style: none; margin: 0; padding: 0; }
.jstep { visibility: hidden; opacity: 0; }
.jstep__n { color: var(--accent); }
.jstep__t { font-size: clamp(2rem, 1.1rem + 2.2vw, 3.4rem); margin-top: 0.9rem; overflow-wrap: break-word; }
.jstep p { color: var(--ink-2); margin-top: 1.3rem; max-width: 36ch; font-size: clamp(1.02rem, 0.94rem + 0.32vw, 1.22rem); line-height: 1.5; }
.journey__spots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.jspot {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem 0.5rem 0.55rem;
  translate: 0 -50%;
  border: 1px solid var(--line-2);
  background: oklch(0.15 0.005 25 / 0.84);
  color: var(--ink);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity;
  transition: border-color 200ms, background-color 200ms;
}
.jspot:not(.is-shown) { pointer-events: none; }
.jspot.is-flip { flex-direction: row-reverse; padding: 0.5rem 0.55rem 0.5rem 0.85rem; }
.jspot__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }
.jspot__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent); animation: jspot-pulse 1.8s var(--ease-out) infinite; }
@keyframes jspot-pulse { from { transform: scale(0.45); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.jspot[aria-expanded="true"], .jspot:focus-visible { border-color: var(--red); background: oklch(0.32 0.1 26 / 0.9); }
.jspot:active { scale: 0.97; }
.jcard {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: min(21rem, calc(100vw - 2 * var(--gutter)));
  padding: 0 1.25rem 1.35rem;
  background: linear-gradient(180deg, oklch(0.205 0.008 25 / 0.97), oklch(0.165 0.006 25 / 0.98));
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 70px -30px oklch(0.05 0.01 25 / 0.9);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  animation: jcard-in 280ms var(--ease-out);
}
.jcard[hidden] { display: none; }
@keyframes jcard-in { from { opacity: 0; translate: 0 10px; } }
.jcard__bar { display: flex; justify-content: space-between; align-items: center; height: 2.75rem; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.jcard__x { display: grid; background: none; border: 0; font: inherit; place-items: center; width: 2rem; height: 2rem; margin-right: -0.5rem; color: var(--ink-2); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.jcard__x:hover, .jcard__x:focus-visible { color: var(--ink); }
.jcard__t { font-size: 1.4rem; margin-top: 1.1rem; }
.jcard__p { color: var(--ink-2); margin-top: 0.65rem; line-height: 1.5; font-size: 0.95rem; }
.jcard__a {
  display: inline-block;
  margin-top: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1px no-repeat;
}
.jcard__a::after { content: " >"; color: var(--accent); }
.jcard__a:hover, .jcard__a:focus-visible { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .jspot__dot::after, .jcard { animation: none; }
}

/* ---------- Book ---------- */
/* scrolls in over the drag strip at the end of the journey; its scrim fades in from above instead of starting on a hard edge */
.journey .book { position: relative; z-index: 5; background: none; }
.journey .book::before {
  content: "";
  position: absolute;
  inset: -40vh 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, oklch(0.145 0.005 25 / 0.9) 0%, oklch(0.145 0.005 25 / 0.62) 40%, oklch(0.145 0.005 25 / 0.2) 75%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40vh);
  mask-image: linear-gradient(180deg, transparent, #000 40vh);
}
.book {
  padding: 8rem var(--gutter) 9rem calc(var(--gutter) + 7.5rem);
  /* scrim keeps the copy readable over the white car */
  background: linear-gradient(90deg, oklch(0.145 0.005 25 / 0.86) 0%, oklch(0.145 0.005 25 / 0.6) 40%, transparent 70%);
}
.book__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38rem); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
.book__title { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 5rem); }
.book__head p { color: var(--ink-2); margin-top: 1.5rem; max-width: 40ch; }
.book__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 2rem; max-width: 34rem; margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-2); }
.book__contact div { min-width: 0; }
.book__addr { grid-column: 1 / -1; }
.book__contact dt { color: var(--ink-3); font-size: 0.64rem; }
.book__contact dd { margin: 0.35rem 0 0; font-family: var(--font-display); font-stretch: 110%; font-weight: 650; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); overflow-wrap: anywhere; }
.book__contact a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition: background-size 260ms var(--ease-out);
}
.book__contact a:hover, .book__contact a:focus-visible { background-size: 100% 1px; }

/* the form reads as a workshop job sheet: numbered rows on hairlines, a red underline that draws in on focus */
.form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
  padding: 0 clamp(1.25rem, 2.4vw, 2rem) clamp(1.5rem, 2.4vw, 2rem);
  background: linear-gradient(180deg, oklch(0.205 0.008 25 / 0.94), oklch(0.165 0.006 25 / 0.95));
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -40px oklch(0.05 0.01 25 / 0.85), inset 0 1px 0 oklch(0.95 0.004 25 / 0.06);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.form::before { content: ""; position: absolute; left: 0; top: 0; width: 4.5rem; height: 2px; background: var(--red); }
.form__bar { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.form__bar span:first-child { color: var(--ink); }
.field { display: grid; gap: 0.1rem; min-width: 0; padding-top: 1.15rem; }
.field--wide { grid-column: 1 / -1; }
.field label, .goals legend { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); transition: color 200ms; }
.field__n { font-style: normal; color: var(--ink-3); transition: color 200ms; }
.field__opt { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.field input, .field textarea {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0 0.7rem;
  font: inherit;
  font-size: 1.08rem;
  color: var(--ink);
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  transition: border-color 200ms, background-size 320ms var(--ease-out);
}
.field textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover, .field textarea:hover { border-bottom-color: oklch(0.93 0.004 25 / 0.42); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; background-size: 100% 2px; }
.field:focus-within > label { color: var(--ink); }
.field:focus-within > label .field__n { color: var(--accent); }
.field input[aria-invalid="true"] { border-bottom-color: var(--accent); background-size: 100% 2px; }
.field__err { font-size: 0.8rem; color: var(--accent); }
.field__err:not(:empty) { padding-top: 0.4rem; }
.field__hint { padding-top: 0.45rem; color: var(--ink-3); font-size: 0.62rem; letter-spacing: 0.03em; text-transform: none; }
.goals { min-width: 0; margin: 0; padding: 1.4rem 0 0.2rem; border: 0; }
.goals legend { float: left; width: 100%; padding: 0; margin-bottom: 0.85rem; }
.goals__grid { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.goals label { position: relative; min-width: 0; cursor: pointer; }
.goals input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.goals span {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: oklch(0.93 0.004 25 / 0.03);
  border: 1px solid var(--line-2);
  transition: background-color 200ms var(--ease-out), color 200ms, border-color 200ms, transform 160ms var(--ease-out);
}
.goals span::before { content: ""; flex: none; width: 9px; height: 9px; border: 1px solid var(--ink-3); transform: rotate(45deg); transition: background-color 200ms, border-color 200ms; }
.goals label:active span { transform: scale(0.97); }
.goals input:checked + span { color: var(--ink); background: oklch(0.575 0.205 26 / 0.16); border-color: var(--red); }
.goals input:checked + span::before { background: var(--red); border-color: var(--red); }
.goals input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .goals label:hover span { color: var(--ink); border-color: oklch(0.93 0.004 25 / 0.42); }
}
.form__send { grid-column: 1 / -1; justify-content: center; width: 100%; margin-top: 1.7rem; }
.form__note { grid-column: 1 / -1; min-height: 1em; margin-top: 0.9rem; color: var(--ink-2); letter-spacing: 0.02em; text-transform: none; }
.form__note:not(:empty)::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 0.6rem; background: var(--red); transform: rotate(45deg); }
.form__note.is-error { color: var(--accent); }
.form__note a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--accent); white-space: nowrap; }
/* while the request is on its way: the button holds still and says so */
.form.is-sending .form__send { cursor: progress; background: var(--red-2); }
.form.is-sending .form__send .btn__chev { animation: form-send 900ms var(--ease-out) infinite; }
@keyframes form-send { 50% { transform: translateX(4px); opacity: 0.4; } }
/* the spam trap stays out of sight and out of the grid */
.form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  z-index: var(--z-content);
  padding: 5rem var(--gutter) calc(var(--frame) + 4.5rem) calc(var(--gutter) + 7.5rem);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.footer__logo { width: min(100%, 420px); height: auto; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 4rem; }
.footer__cols span { color: var(--ink-3); }
.footer__cols p { margin-top: 0.6rem; color: var(--ink-2); line-height: 1.8; text-transform: none; letter-spacing: 0.02em; font-size: 0.8rem; }
.footer__cols a { margin-right: 1rem; text-decoration: none; }
.footer__cols a:hover { color: var(--ink); }
.footer__base { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.62rem; }
.footer__credit { margin-top: 1.25rem; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: none; overflow-wrap: anywhere; }
.footer__credit a { color: var(--ink-3); text-decoration: none; transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.footer__credit a:hover, .footer__credit a:focus-visible { color: var(--ink); }
.footer__credit span { white-space: nowrap; }

/* the 3D cell pulls back (zooms out, dims) while a solid panel slides over it: done in WebGL (camera zoom + finish pass), see main.js */

/* ---------- Solid sections: opaque editorial panels that slide over the 3D cell ---------- */
/* the panel's colour lives on its own card so the slide-over is a transform on a plain layer (no repaint per frame) */
.solid.has-card { background: none; }
.solid__bg, .solid__cap {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  background: var(--bg);
  transform-origin: 50% 0;
  will-change: transform;
  pointer-events: none;
}
.solid__bg { top: 40px; bottom: 0; }
.solid__cap { top: 0; height: 41px; border-radius: 40px 40px 0 0; }
.solid {
  position: relative;
  transform-origin: 50% 0;
  box-shadow: 0 -40px 80px oklch(0.08 0.005 25 / 0.7);
  z-index: var(--z-content);
  background: var(--bg);
  padding: clamp(6rem, 11vw, 10rem) var(--gutter) clamp(6rem, 11vw, 10rem) calc(var(--gutter) + 7.5rem);
  overflow: clip;
  isolation: isolate;
}
.solid::before {
  /* the LED bar glow that bleeds over every panel, like the workshop wall */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46vh;
  background: radial-gradient(60% 100% at 50% 0%, oklch(0.62 0.2 26 / 0.13), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.solid .h2 { max-width: 16ch; }
.solid header p { color: var(--ink-2); margin-top: 1.4rem; max-width: 52ch; }

/* photo frames: graded, slow ken-burns on reveal, a styled placeholder until the file exists */
.ph { position: relative; margin: 0; overflow: hidden; background: var(--bg-2); border-radius: 4px; }
.ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transform-origin: 50% 60%; filter: saturate(1.04) contrast(1.04); will-change: transform; }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, oklch(0.12 0.005 25 / 0.65)); pointer-events: none; }
.ph figcaption { position: absolute; left: 1rem; bottom: 0.9rem; z-index: 1; color: var(--ink-2); font-size: 0.62rem; }
.ph--missing { background: radial-gradient(70% 60% at 50% 30%, oklch(0.4 0.12 26 / 0.55), transparent 70%), linear-gradient(160deg, var(--bg-3), var(--bg)); }
.ph--missing img { opacity: 0; }
.ph--missing::before { content: "Fotografie în curând"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.garage__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.garage__head { grid-column: 1 / span 5; }
.ph--hero { grid-column: 6 / span 7; aspect-ratio: 16 / 10; }
.garage__stats { grid-column: 1 / span 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; margin: 3rem 0 0; }
.garage__stats div { border-top: 1px solid var(--line-2); padding-top: 1rem; }
.garage__stats dt { color: var(--ink-3); }
.garage__stats dd { margin: 0.5rem 0 0; font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem); color: var(--ink); }
.ph--tall { aspect-ratio: 4 / 5; }
.garage__grid .ph--tall:nth-of-type(2) { grid-column: 6 / span 3; margin-top: -6rem; }
.garage__grid .ph--tall:nth-of-type(3) { grid-column: 9 / span 4; margin-top: 4rem; }

.sheet__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.ph--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.sheet__head { grid-column: 1 / span 5; margin-top: 3rem; }
.sheet__list { grid-column: 7 / span 6; margin-top: 3rem; counter-reset: sh; }
.sheet__list li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--line); }
.sheet__list span { color: var(--ink-3); }
.sheet__list b { color: var(--ink); font-weight: 500; letter-spacing: 0.04em; }
.sheet__list li:last-child b { color: var(--accent); }
.sheet__strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin-top: 3rem; }
.sheet__strip .ph { aspect-ratio: 4 / 5; }
.sheet__strip .ph:nth-child(2) { transform: translateY(3rem); }

.results__inner { max-width: 78rem; }
.results__filter { display: flex; flex-wrap: wrap; gap: 0; margin-top: 2.5rem; border: 1px solid var(--line-2); width: fit-content; }
.results__filter button { min-height: 44px; padding: 0 1.2rem; font: inherit; letter-spacing: inherit; color: var(--ink-2); background: transparent; border: 0; cursor: pointer; transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.results__filter button + button { border-left: 1px solid var(--line-2); }
.results__filter button[aria-selected="true"] { background: var(--red); color: var(--ink); }
.results__filter button:hover:not([aria-selected="true"]) { color: var(--ink); background: oklch(0.9 0.007 25 / 0.06); }
.results__list { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.res { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0.35rem 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.res h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; }
.res__stage { color: var(--accent); align-self: center; }
.res__nums { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; }
.res__nums b { font-family: var(--font-display); font-stretch: 125%; font-size: 1.35rem; font-weight: 700; }
.res__nums b:first-child { color: var(--ink-3); font-weight: 500; }
.res__bar { position: relative; height: 3px; background: var(--line); overflow: hidden; }
.res__bar i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, var(--ink-3), var(--accent)); transform: scaleX(var(--g, 0)); transition: transform 900ms var(--ease-out); }
.res__gain { grid-column: 2; grid-row: 1; justify-self: end; color: var(--ink-2); }
.results__note { margin-top: 2rem; color: var(--ink-3); }

.projects__list { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.proj { position: relative; display: flex; flex-direction: column; min-height: 17rem; padding: 1.6rem; background: var(--bg-2); border-top: 2px solid var(--line-2); transition: transform 280ms var(--ease-out), border-color 280ms var(--ease-out), background-color 280ms var(--ease-out); }
.proj__y { color: var(--ink-3); }
.proj h3 { margin-top: 1.6rem; font-family: var(--font-display); font-stretch: 112%; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; }
.proj p { margin-top: 0.7rem; color: var(--ink-2); }
.proj dl { margin: auto 0 0; padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1.2rem 1.6rem; }
.proj dt { color: var(--ink-3); }
.proj dd { margin: 0.3rem 0 0; color: var(--ink); font-size: 0.86rem; }
.proj--lead { grid-column: span 2; background: linear-gradient(135deg, oklch(0.3 0.09 26 / 0.6), var(--bg-2) 60%); border-top-color: var(--red); }
.proj--lead h3 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); }
.proj--lead dd { color: var(--accent); font-size: 1.2rem; }
.proj--next { border-top-color: var(--accent); background: repeating-linear-gradient(135deg, oklch(0.575 0.205 26 / 0.07) 0 12px, transparent 12px 24px), var(--bg-2); }
.proj--next dd { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .proj:hover { transform: translateY(-6px); border-top-color: var(--accent); background: var(--bg-3); }
}

/* ---------- Păreri: CRT monitor wall in its own WebGL view, popup per review ---------- */
.voices { height: 220vh; }
.voices__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#voicesGl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 50%; will-change: transform; }
.voices__head { position: absolute; left: calc(var(--gutter) + 7.5rem); top: calc(var(--frame) + 6.5rem); max-width: 30rem; pointer-events: none; }
.voices__pick { position: absolute; right: var(--gutter); bottom: calc(var(--frame) + 4.5rem); display: grid; justify-items: end; gap: 0.8rem; max-width: min(46rem, calc(100% - 2 * var(--gutter))); }
.voices__hint { color: var(--ink-2); transition: opacity 650ms var(--ease-out); }
.voices__head, .voices__pick { will-change: transform; }
.voices__head { transition: opacity 650ms var(--ease-out); }
/* a monitor in focus: the copy and the other reviews step back */
.voices.is-focus .voices__head { opacity: 0.55; }
.voices.is-focus .voices__hint { opacity: 0.6; }
.voices.is-focus .voices__list button:not(.is-focus) { opacity: 0.6; }
.voices__list button.is-focus { color: var(--ink); background: oklch(0.575 0.205 26 / 0.16); border-color: var(--red); }
.voices__list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.voices__list button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.7rem 0.95rem;
  font: inherit;
  color: var(--ink-2);
  background: oklch(0.15 0.005 25 / 0.74);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), border-color 200ms, color 200ms, opacity 600ms var(--ease-out), transform 160ms var(--ease-out);
}
.voices__list i { font-style: normal; color: var(--accent); }
.voices__list span { color: var(--ink); }
.voices__list small { font-size: inherit; color: var(--ink-3); }
.voices__list button:focus-visible { color: var(--ink); background: oklch(0.575 0.205 26 / 0.16); border-color: var(--red); }
.voices__list button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .voices__list button:hover { color: var(--ink); background: oklch(0.575 0.205 26 / 0.16); border-color: var(--red); }
}

.vdlg { width: min(44rem, calc(100% - 2 * var(--gutter))); max-height: calc(100svh - 3rem); margin: auto; padding: 0; color: var(--ink); background: transparent; border: 0; overflow: visible; }
.vdlg::backdrop { background: oklch(0.1 0.005 25 / 0.74); backdrop-filter: blur(6px); }
.vdlg__inner {
  position: relative;
  max-height: calc(100svh - 3rem);
  overflow-y: auto;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: linear-gradient(180deg, oklch(0.215 0.008 25), oklch(0.17 0.006 25));
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 120px -40px oklch(0.02 0.01 25 / 0.9);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.vdlg__inner::before { content: ""; position: absolute; left: 0; top: 0; width: 4.5rem; height: 2px; background: var(--red); }
.vdlg__inner.is-swap { opacity: 0; transform: translateY(6px); }
.vdlg__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.vdlg__x { display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; color: var(--ink); background: transparent; border: 1px solid var(--line-2); cursor: pointer; transition: background-color 200ms, border-color 200ms, transform 160ms var(--ease-out); }
.vdlg__x:active { transform: scale(0.95); }
.vdlg__quote { margin: 1.8rem 0 0; }
.vdlg__quote p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); line-height: 1.3; }
.vdlg__quote p::before { content: "\201E"; color: var(--accent); }
.vdlg__quote p::after { content: "\201D"; color: var(--accent); }
.vdlg__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin-top: 1.6rem; }
.vdlg__who b { font-family: var(--font-display); font-stretch: 115%; font-weight: 800; font-size: 1.2rem; text-transform: uppercase; }
.vdlg__who span { color: var(--ink-3); }
.vdlg__who .vdlg__gain { color: var(--accent); }
.vdlg__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.vdlg__nav button { min-height: 44px; padding: 0.6rem 1rem; font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line-2); cursor: pointer; transition: background-color 200ms, border-color 200ms, transform 160ms var(--ease-out); }
.vdlg__nav button:active { transform: scale(0.97); }
.vdlg__nav button:focus-visible, .vdlg__x:focus-visible { border-color: var(--red); }
.vdlg__src { color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  .vdlg__x:hover { background: var(--red); border-color: var(--red); }
  .vdlg__nav button:hover { background: oklch(0.575 0.205 26 / 0.16); border-color: var(--red); }
}
.vdlg[open] .vdlg__inner { animation: vdlg-in 260ms var(--ease-out); }
.vdlg[open]::backdrop { animation: vdlg-fade 260ms var(--ease-out); }
@keyframes vdlg-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes vdlg-fade { from { opacity: 0; } }

/* ---------- Galerie: own WebGL view, photos at depth ---------- */
.solid--bare { padding: 0; }
.galerie { height: 420vh; }
.galerie__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#galleryGl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.galerie__head { position: absolute; left: calc(var(--gutter) + 7.5rem); bottom: calc(var(--frame) + 5rem); pointer-events: none; }
.galerie__hint { color: var(--ink-3); margin-top: 1rem; }

/* service cards: photo bleeds to the card edges and drifts with the horizontal scroll */
/* Canvas UI cloth (only where HTML-in-Canvas runs): the card becomes a bare wrapper, its look moves onto the fabric */
.svc--cloth { position: relative; padding: 0; background: none; border: 0; }
.svc__source { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* the engine sizes this canvas 48px past every edge so the folds have room; the global canvas max-width would crush it */
.svc__cloth { position: absolute; pointer-events: none; max-width: none; }
.svc__fabric { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; padding: 1.75rem; background: oklch(0.185 0.006 25 / 0.96); border-top: 2px solid var(--accent); transition: background-color 280ms var(--ease-out); }
.svc--cta .svc__fabric { background: oklch(0.230 0.007 25 / 0.97); border-top-color: var(--ink); }
.svc--cloth:hover { background: none; }
@media (hover: hover) and (pointer: fine) {
  .svc--cloth:hover .svc__fabric { background: oklch(0.210 0.007 25 / 0.97); }
}
.svc__img { margin: -1.75rem -1.75rem 1.4rem; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.svc__img + .svc__n { margin-top: 0; }
.sheet__strip--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet__strip--two .ph { aspect-ratio: 16 / 11; }
.sheet__strip--two .ph:nth-child(2) { transform: translateY(3rem); }

/* hold-to-rev: press-and-hold control on the dyno panel */
.rev {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 56px;
  padding: 0.5rem 1.2rem 0.5rem 0.55rem;
  color: var(--ink);
  background: oklch(0.2 0.005 25 / 0.82);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform 160ms var(--ease-out), border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.rev:active, .rev.is-on { transform: scale(0.97); border-color: var(--accent); background: oklch(0.27 0.07 26 / 0.9); }
/* on wide screens the button stands by the car: centred in the open right-hand part of the panel, under the car the
   dyno camera frames there, clear of the readouts on the left and the HUD bar below */
.dyno .rev { position: absolute; left: calc(24rem + (100% - 24rem) / 2); bottom: 0; translate: -50% 0; }
.dyno .rev__hint { position: absolute; left: calc(24rem + (100% - 24rem) / 2); bottom: calc(56px + 0.8rem); translate: -50% 0; margin: 0; white-space: nowrap; font-size: 0.62rem; }
.rev__ring { position: relative; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--rev, 0) * 1turn), oklch(0.9 0.007 25 / 0.12) 0); display: grid; place-items: center; }
.rev__ring::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); }
.rev.is-on .rev__ring { box-shadow: 0 0 22px oklch(0.62 0.2 26 / calc(var(--rev, 0) * 0.9)); }
.rev__hint { grid-column: 1 / -1; color: var(--ink-3); margin-top: -0.4rem; }

/* ================= Tablet ================= */
@media (max-width: 991px) {
  .rail { display: none; }
  .nav__links { display: none; }
  .hero__pin, .build__inner, .engine__inner, .dyno__inner, .stages__inner, .book, .footer { padding-left: var(--gutter); }
  .journey__copy { left: var(--gutter); width: min(30rem, 44vw); }
  .hero__pin { padding-right: var(--gutter); }
  .services__head { padding-left: var(--gutter); }
  .services__track { padding: 0 36vw 0 46vw; }
  .city__ui { left: var(--gutter); }
  .services__viewport { mask-image: none; }
  .book { background: linear-gradient(180deg, oklch(0.145 0.005 25 / 0.8), oklch(0.145 0.005 25 / 0.5) 60%, transparent); }
  .journey .book::before { background: oklch(0.145 0.005 25 / 0.8); }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .build__inner { grid-template-columns: minmax(0, 26rem) 1fr; }
  .dyno__panel { grid-template-columns: 1fr; gap: 1rem; }
  .dyno .rev, .dyno .rev__hint { position: static; translate: none; }
  .readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .readout--big { grid-column: 1 / -1; }
  .stages__inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .stages { min-height: 160vh; }
  .stages__photo > img { --fx: -50%; width: max(112cqw, 100cqh * 1920 / 1072); }
  .spec { grid-column: 1; grid-row: 3; }
  .stages__inner { background: linear-gradient(0deg, oklch(0.145 0.005 25 / 0.94) 0%, oklch(0.145 0.005 25 / 0.6) 45%, transparent 65%); }
  .book__inner { grid-template-columns: 1fr; }
  .book__contact { max-width: none; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voices__head { left: var(--gutter); }
  .engine__stats { left: var(--gutter); right: auto; }
  .solid { padding-left: var(--gutter); }
  .garage__head, .garage__stats { grid-column: 1 / -1; position: static; }
  .ph--hero { grid-column: 1 / -1; }
  .garage__grid .ph--tall:nth-of-type(2) { grid-column: 1 / span 6; margin-top: 0; }
  .garage__grid .ph--tall:nth-of-type(3) { grid-column: 7 / span 6; margin-top: 3rem; }
  .sheet__head, .sheet__list { grid-column: 1 / -1; }
  .sheet__list { margin-top: 1rem; }
  .results__list { grid-template-columns: 1fr; }
  .projects__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie__head { left: var(--gutter); }
}

/* ================= Mobile landscape ================= */
@media (max-width: 767px) {
  .hud__right, .hud__scroll { display: none; }
  .hud { grid-template-columns: 1fr; }
  .nav .btn { padding-inline: 0.9rem; }
  .hero__pin { padding-top: calc(var(--frame) + 5rem); grid-template-rows: auto 1fr auto auto auto; }
  .hero__meta span:last-child { display: none; }
  .hero__specs { position: static; margin-top: 1.5rem; order: 0; }
  .hero__specs b { font-size: 1.8rem; }
  .build__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    background: linear-gradient(0deg, oklch(0.145 0.005 25 / 0.95) 0%, oklch(0.145 0.005 25 / 0.7) 42%, transparent 62%), linear-gradient(180deg, oklch(0.145 0.005 25 / 0.8), transparent 30%);
  }
  .build__steps { grid-row: 3; align-self: end; margin-top: 0; }
  .build__parts { display: none; }
  .step { padding: 0.7rem 0; }
  .step:not(.is-active) { display: none; }
  .engine__inner { background: linear-gradient(180deg, oklch(0.145 0.005 25 / 0.9), transparent 45%); }
  .engine__lede { display: none; }
  .engine__stats { gap: 1.25rem; flex-wrap: wrap; }
  .callout { padding: 0.4rem 0.6rem 0.4rem 1.2rem; }
  .callout span { display: none; }
  .callout[data-anchor="headers"], .callout[data-anchor="turbos"] { display: none; }
  .hero__pin { grid-template-columns: minmax(0, 1fr); background: linear-gradient(180deg, transparent 12%, oklch(0.145 0.005 25 / 0.55) 26%, oklch(0.145 0.005 25 / 0.9) 50%); }
  /* the copy sits over the white car on phones: a soft shadow keeps it readable on the livery */
  .hero__title, .hero__lede { text-shadow: 0 2px 16px oklch(0.1 0.005 25 / 0.9), 0 0 2px oklch(0.1 0.005 25 / 0.6); }
  .dyno__head p { display: none; }
  .dyno__inner { background: linear-gradient(180deg, oklch(0.155 0.005 25 / 0.9) 0%, oklch(0.155 0.005 25 / 0.55) 48%, oklch(0.155 0.005 25 / 0.92) 78%); }
  .rev__hint { display: none; }
  .chart { height: 180px; }
  .dyno .chart { opacity: 1; pointer-events: auto; }
  .chart__legend { position: static; margin-top: 0.4rem; flex-wrap: wrap; }
  .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout b { font-size: 1.25rem; }
  .readout--big b { font-size: 2.4rem; }
  .svc { width: min(82vw, 22rem); min-height: 22rem; }
  .services__track { padding: 0 10vw 0 78vw; }
  /* phones: the map controls sit in the bar at the bottom, right of the readout */
  .city__ui { left: auto; right: var(--gutter); bottom: calc(var(--frame) + 0.45rem); }
  .city__hint, .city__zoom [data-city="all"] { display: none; }
  .city__zoom button { min-width: 2.1rem; height: 2.1rem; padding: 0 0.55rem; font-size: 0.58rem; }
  .city__zoom button[data-city="in"], .city__zoom button[data-city="out"] { font-size: 0.95rem; }
  .city__zoom button[data-heart="in"], .city__zoom button[data-heart="out"] { font-size: 0.95rem; }
  /* phones: the engine controls sit in the bottom bar, right of the readout */
  .heart__ui { top: auto; right: var(--gutter); bottom: calc(var(--frame) + 0.45rem); }
  .heart__hint { display: none; }
  .hqdlg__facts, .hqdlg__contact { grid-template-columns: 1fr; }
  /* phones: the cabin rides in the top half, the copy sits at the bottom over a scrim */
  .journey__stage::before { background: linear-gradient(0deg, oklch(0.15 0.005 25 / 0.92) 0%, oklch(0.15 0.005 25 / 0.7) 30%, transparent 56%); }
  .journey__copy { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(var(--frame) + 4.25rem); height: 0; }
  .journey__intro, .jstep { top: auto; bottom: 0; translate: none; }
  .jstep__t { font-size: clamp(1.6rem, 0.9rem + 4vw, 2.4rem); }
  .jstep p { margin-top: 0.9rem; }
  .journey__hint { margin-top: 1.1rem; }
  .book { padding-block: 5rem 7rem; }
  .form { grid-template-columns: 1fr; padding: 0 1.25rem 1.5rem; }
  .goals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__base { flex-direction: column; }
  .ph--wide { aspect-ratio: 16 / 10; }
  .sheet__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet__strip .ph:nth-child(2) { transform: none; }
  .sheet__strip .ph:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .projects__list { grid-template-columns: 1fr; }
  .proj--lead { grid-column: auto; }
  .voices { height: 260vh; }
  .voices__head { top: calc(var(--frame) + 5.5rem); right: var(--gutter); } /* wraps inside the screen instead of running to its edge */
  .voices__pick { left: var(--gutter); right: var(--gutter); justify-items: start; bottom: calc(var(--frame) + 4rem); }
  .voices__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .voices__list button { width: 100%; flex-wrap: wrap; row-gap: 0.1rem; }
  .voices__list small { flex-basis: 100%; }
  .sheet__strip--two { grid-template-columns: 1fr; }
  .sheet__strip--two .ph:nth-child(2) { transform: none; }
  .galerie { height: 340vh; }
  .galerie__head { bottom: calc(var(--frame) + 4rem); }
  /* phones: the photo as a band across the middle of the screen, fading into the page above and below, on the car */
  .stages__photo > img {
    --fx: -50%;
    top: 46%;
    width: max(118cqw, 64cqh * 1920 / 1072);
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  }
}

/* ================= Mobile portrait ================= */
@media (max-width: 479px) {
  .nav { padding-inline: 0.5rem; }
  /* the engine's reset button shrinks to its icon so the controls clear the readout */
  .heart__full { display: none; }
  .heart__short { display: inline; font-size: 1rem; }
  .hero__title { font-size: 9vw; font-stretch: 112%; }
  .h2 { font-size: clamp(1.75rem, 8.6vw, 2.4rem); }
  .nav__logo svg { width: 100px; height: 16.2px; }
  .nav .btn { font-size: 0.64rem; padding: 0.6rem 0.75rem; }
  .hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .hero__specs { gap: 0.75rem; }
  .hero__arrow { width: 28px; }
  .spec__tabs { grid-template-columns: repeat(2, 1fr); }
  .spec__tabs button:nth-child(3) { border-left: 0; }
  .spec__tabs button:nth-child(n+3) { border-top: 1px solid var(--line); }
  .spec__grid { gap: 1.25rem 1rem; }
  .footer__cols { grid-template-columns: 1fr; }
  .hud__tele { gap: 0.9rem; }
  .garage__stats { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .garage__grid .ph--tall:nth-of-type(2), .garage__grid .ph--tall:nth-of-type(3) { grid-column: 1 / -1; margin-top: 0; aspect-ratio: 4 / 3; }
  .sheet__list li { grid-template-columns: 1fr; gap: 0.3rem; }
  .sheet__strip { grid-template-columns: 1fr; }
  .sheet__strip .ph { aspect-ratio: 4 / 3; }
  .results__filter { width: 100%; }
  .results__filter button { flex: 1 1 0; padding: 0 0.5rem; }
  .res__nums b { font-size: 1.1rem; }
  .rev { width: 100%; justify-content: center; }
  .vdlg__src { display: none; }
  .vdlg__nav button { flex: 1 1 0; white-space: nowrap; }
  .book__contact { grid-template-columns: 1fr; }
}

/* dev inspection mode (?cam=...) */
.inspect main, .inspect .nav, .inspect .hud, .inspect .rail, .inspect .frame, .inspect .footer { display: none !important; }

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

/* no drive without motion: the hero is one screen, the car parked at the workshop */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__pin { position: relative; }
}