/* Purpose: Home "Drive" v2 — pinned film stage + chapters
 * (template-parts/home/drive-stage.php + assets/js/home-drive.js,
 * docs/HOME-DRIVE-SPEC.md §10).
 *
 * Without `html.js-drive` (no JS, reduced motion, Save-Data) the stage is a plain
 * stack of chapter blocks over the poster. With it: one sticky full-screen pin over
 * a runway of --runway viewport heights. The engine sets per chapter --enter /
 * --exit / --u (+ .is-on), per word --wp, per sub-part --e / --x, and the product
 * anchor --ax / --ay / --ah for the callouts. Placements differ per chapter and
 * never sit on the film's subject. */

/* ---------- base / static fallback ---------- */
.drive-stage {
	/* Matches .container's side padding (8rem on wide screens) for absolutely
	 * positioned chapter parts, which ignore the container's padding. */
	--drive-gutter: max(24px, min(8rem, 8.9vw));
	position: relative;
	isolation: isolate;
	background: #000;
	color: var(--color-text);
}
.drive-stage__pin { position: relative; }
.drive-stage__poster,
.drive-stage__poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.drive-stage__poster img { object-fit: cover; opacity: 0.55; }
.drive-stage__film,
.drive-stage__shade,
.drive-stage__grain { display: none; }
.drive-stage__chapters { position: relative; z-index: 2; }
.drive-ch {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 80vh;
	padding-block: var(--space-24);
}
.drive-ch__inner { position: relative; }

/* ---------- typography ---------- */
.drive-ch__eyebrow,
.drive-split__label,
.drive-bend__label {
	margin: 0 0 var(--space-4);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-primary);
}
.drive-ch__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	line-height: 1;
	letter-spacing: var(--tracking-tighter);
	color: var(--color-text);
}
.drive-ch__title .accent,
.drive-bend__title .accent { color: var(--color-primary); }
.drive-ch__title--xl { font-size: clamp(2.75rem, 8vw, 7.5rem); }
.drive-ch__title--lg { font-size: clamp(2.25rem, 5.4vw, 5.25rem); max-width: 18ch; }
.drive-ch__title--md { font-size: clamp(2rem, 4vw, 3.75rem); max-width: 16ch; }
.drive-ch__body {
	max-width: 42ch;
	margin: var(--space-6) 0 0;
	font-size: clamp(var(--text-md), 1.4vw, var(--text-lg));
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}
.drive-ch__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-8);
}

/* Legibility over the film: a soft black halo on every text group (colour unchanged). */
.drive-ch__eyebrow,
.drive-ch__title,
.drive-ch__body,
.drive-split,
.drive-step,
.drive-callout,
.drive-bend {
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 44px rgba(0, 0, 0, 0.75);
}

.drive-w { display: inline-block; }
.drive-w__i { display: inline-block; }

/* Partnership split */
.drive-split__name {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	letter-spacing: var(--tracking-tight);
}
.drive-split__stat { margin: var(--space-4) 0 0; line-height: 1; }
.drive-split__num {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: clamp(3rem, 6vw, 5.5rem);
	color: var(--color-primary);
}
.drive-split__suffix { margin-left: 0.3em; font-size: var(--text-lg); color: var(--color-text); }
.drive-split__caption {
	max-width: 28ch;
	margin: var(--space-3) 0 0;
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.drive-split__side--right .drive-split__caption { margin-left: auto; }
.drive-split__x { display: block; font-size: 2.5rem; color: var(--color-primary); line-height: 1; }
.drive-split__node-label {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* DNA steps */
.drive-step__figure { margin: 0; line-height: 0.9; }
.drive-step__num {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: clamp(3.5rem, 8vw, 7.5rem);
	color: var(--color-primary);
}
.drive-step__unit {
	margin-left: 0.4em;
	font-size: var(--text-md);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}
.drive-step__title { margin: var(--space-3) 0 0; font-size: clamp(var(--text-md), 1.6vw, var(--text-xl)); }

/* Product callouts */
.drive-callout {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text);
}

/* USP bends */
.drive-bend__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: clamp(1.5rem, 2.6vw, 2.5rem);
	line-height: 1.05;
}
.drive-bend__body { margin: var(--space-3) 0 0; font-size: var(--text-md); color: var(--color-text-muted); }

/* ---------- live: pinned stage ---------- */
.js-drive .drive-stage {
	height: calc((var(--runway) + 1) * 100vh);
	height: calc((var(--runway) + 1) * 100svh);
}
.js-drive .drive-stage__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	/* Matches the series stage: dvh so the pin fills the live viewport. The
	   runway above stays svh to keep the scroll length fixed. (user, 2026-09-16) */
	height: 100dvh;
	overflow: hidden;
}
.js-drive .drive-stage__poster img { opacity: 1; }
.js-drive .drive-stage.is-live .drive-stage__poster { display: none; }
.js-drive .drive-stage__film {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}
.js-drive .drive-stage__shade {
	--end: 0;
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.55) 100%),
		radial-gradient(125% 95% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%);
}
/* The film fades to black at the very end of the runway (hand-off to the page). */
.js-drive .drive-stage__shade::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--end);
}
.js-drive .drive-stage__grain {
	display: block;
	position: absolute;
	inset: -50%;
	z-index: 1;
	width: 200%;
	height: 200%;
	opacity: 0.06;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: drive-grain 0.9s steps(6) infinite;
}
@keyframes drive-grain {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-6%, 4%); }
	40% { transform: translate(5%, -7%); }
	60% { transform: translate(-3%, 8%); }
	80% { transform: translate(7%, 2%); }
	100% { transform: translate(0, 0); }
}

.js-drive .drive-stage__chapters {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.js-drive .drive-ch {
	--enter: 0;
	--exit: 0;
	--u: 0;
	position: absolute;
	inset: 0;
	min-height: 0;
	padding: 0;
	opacity: calc(var(--enter) * (1 - var(--exit)));
	visibility: hidden;
}
.js-drive .drive-ch.is-on { visibility: visible; }
.js-drive .drive-ch.is-on a,
.js-drive .drive-ch.is-on button { pointer-events: auto; }
.js-drive .drive-ch__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
}
/* Soft local shade behind a text group, positioned per chapter. */
.js-drive .drive-ch::before {
	content: '';
	position: absolute;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

.js-drive .drive-part { transform: translate3d(0, calc((1 - var(--enter)) * 22px), 0); }
.js-drive [data-sub] { opacity: calc(var(--e, 0) * (1 - var(--x, 0))); }
.js-drive [data-words='rise'] .drive-w {
	overflow: hidden;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
	vertical-align: top;
}
.js-drive [data-words='rise'] .drive-w__i { transform: translate3d(0, calc((1 - var(--wp, 1)) * 110%), 0); }
.js-drive [data-words='light'] .drive-w__i { opacity: var(--wp, 1); }

/* Hero — left third, lower; slides off left as the orbit brings the car to centre. */
.js-drive .drive-ch--hero .drive-ch__inner {
	justify-content: flex-end;
	padding-bottom: 22vh; /* lifted 2026-09-16: CTAs sat on the bottom edge; the car's tail now reads between the CTAs and the headline */
}
.js-drive .drive-ch--hero .drive-ch__inner > * { max-width: 46rem; }
/* The orbit opens on the car's silhouette from ~33% of the viewport width. Size the
 * headline from the room between the container's left edge and the car: "Power
 * that" measures ~3.66em. The eyebrow wraps inside the same room. */
@media (min-aspect-ratio: 1/1) {
	.js-drive .drive-ch--hero {
		--hero-left: calc(max(0px, (100vw - var(--container-2xl)) / 2) + min(8rem, 8.9vw));
		--hero-room: calc(33vw - var(--hero-left) - 12px);
	}
	/* Bound by the room left of the car AND by height, so the whole stack fits between
	   the header and the fold on short laptop windows (user, 2026-09-21).
	   The pin starts under the 95px header, so at page top its last 95px sit below the
	   fold: the bottom pad carries that plus a margin M = max(2rem, 30svh - 9rem).
	   Stack = ~204px (eyebrow, body, CTAs, gaps) + 4 lines; top must clear 127px. */
	.js-drive .drive-ch--hero h1 { font-size: clamp(2.5rem, min(calc(var(--hero-room) / 3.66), calc((70svh - 200px) / 4)), 6.25rem); }
	.js-drive .drive-ch--hero .drive-ch__inner { padding-bottom: calc(var(--header-h-full, 95px) + max(2rem, calc(30svh - 9rem))); }
	.js-drive .drive-ch--hero .drive-ch__body { max-width: 34rem; }
	/* One line: it sits above the car's roofline, so it needn't fit the room. */
	.js-drive .drive-ch--hero .drive-ch__eyebrow { max-width: none; white-space: nowrap; }
	/* "Zero / compromise." on lines three and four: the accent wraps to its narrowest
	   width so the stack stays in the room left of the car. (user, 2026-09-21) */
	.js-drive .drive-ch--hero .drive-ch__title .accent { display: inline-block; width: min-content; }
}
.js-drive .drive-ch--hero .drive-ch__inner { transform: translate3d(calc(var(--exit) * -6vw), 0, 0); }
.js-drive .drive-ch--hero::before { left: -18vw; bottom: -20vh; width: 80vw; height: 95vh; }

/* Promise — top band, centred; words light up one by one. */
/* Copy sits at the BOTTOM on every width, not just phones — it was landing
   across the car's tail on desktop. (user, 2026-09-17) */
.js-drive .drive-ch--promise .drive-ch__inner {
	justify-content: flex-end;
	align-items: center;
	padding-bottom: 11vh;
	text-align: center;
	transform: translate3d(0, calc(var(--exit) * -4vh), 0);
}
.js-drive .drive-ch--promise .drive-ch__title,
.js-drive .drive-ch--promise .drive-ch__body { margin-inline: auto; }
.js-drive .drive-ch--promise::before { left: 10vw; top: -20vh; width: 80vw; height: 85vh; }

/* Partnership — names slide in from opposite sides and meet at ×. */
.js-drive .drive-ch--split .drive-ch__inner {
	justify-content: space-between;
	padding-block: 13vh 11vh;
}
.js-drive .drive-ch--split .drive-ch__head { margin-inline: auto; text-align: center; }
.js-drive .drive-ch--split .drive-ch__title { margin-inline: auto; }
.drive-split {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: var(--space-8);
	margin-top: var(--space-12);
}
.drive-split__side--left { grid-column: 1; grid-row: 1; }
.drive-split__side--right { grid-column: 3; grid-row: 1; text-align: right; }
.drive-split__node { grid-column: 2; grid-row: 1; align-self: center; text-align: center; }
.js-drive .drive-split__side--left { transform: translate3d(calc((1 - var(--enter)) * -10vw), 0, 0); }
.js-drive .drive-split__side--right { transform: translate3d(calc((1 - var(--enter)) * 10vw), 0, 0); }
.js-drive .drive-split__node { transform: scale(calc(0.6 + 0.4 * var(--enter))); }
.js-drive .drive-ch--split::before { left: 0; bottom: -25vh; width: 100vw; height: 75vh; }

/* DNA — three figures stepping diagonally with the descent. */
.js-drive .drive-ch--steps .drive-ch__inner {
	position: relative;
	justify-content: flex-start;
	padding-top: 13vh;
}
.js-drive .drive-step {
	position: absolute;
	transform: translate3d(0, calc((1 - var(--e, 0)) * 6vh), 0);
}
.js-drive .drive-step--1 { left: var(--drive-gutter); top: 40%; }
.js-drive .drive-step--2 { right: var(--drive-gutter); top: 50%; text-align: right; }
.js-drive .drive-step--3 { left: calc(var(--drive-gutter) + 14%); top: 64%; }
.js-drive .drive-ch--steps::before { left: -10vw; top: -15vh; width: 120vw; height: 130vh; opacity: 0.8; }

/* Product — heading left, the real unit right of centre, callouts drawn from it. */
.js-drive .drive-ch--product .drive-ch__inner { justify-content: center; }
.js-drive .drive-ch--product .drive-ch__head { max-width: 34rem; }
.js-drive .drive-ch--product::before { left: -20vw; top: 5vh; width: 75vw; height: 90vh; }
.js-drive .drive-callout {
	--ax: 60vw;
	--ay: 50vh;
	--ah: 40vh;
	position: absolute;
	padding-left: 3.5rem;
	white-space: nowrap;
}
.js-drive .drive-callout::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 2.75rem;
	height: 1px;
	background: var(--color-primary);
	transform: scaleX(var(--e, 0));
	transform-origin: left center;
}
.js-drive .drive-callout::after {
	content: '';
	position: absolute;
	left: -3px;
	top: calc(50% - 3px);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 10px rgba(255, 0, 18, 0.9);
}
/* Each callout's dot sits on a point of the PedalBox: home-drive.js sets --ax1/--ay1
 * (A: the module's top edge) and --ax2/--ay2 (B: the module's LED) in canvas px
 * from the composite's film coordinates. Without the composite the fallbacks below
 * put them beside the film's own connector. A hangs below the module on a vertical
 * leader from its bottom edge (the chapter headline owns the left, the plug the
 * right); B reads rightwards from the LED. */
.js-drive .drive-ch--product { --ax1: 62vw; --ay1: 64vh; --ax2: 70vw; --ay2: 54vh; }
.js-drive .drive-callout { transform: translateY(-50%); }
.js-drive .drive-callout--a {
	left: var(--ax1);
	/* leader 2.75rem, then 0.75rem of air before the text */
	top: calc(var(--ay1) + 3.5rem);
	padding-left: 0;
	transform: none;
}
.js-drive .drive-callout--a::before {
	left: 0;
	top: -3.5rem;
	width: 1px;
	height: 2.75rem;
	transform: scaleY(var(--e, 0));
	transform-origin: top center;
}
.js-drive .drive-callout--a::after { left: -3px; top: calc(-3.5rem - 3px); }
.js-drive .drive-callout--b { left: var(--ax2); top: var(--ay2); }

/* USPs — on the outside of the road's bends, alternating sides (top view). */
.js-drive .drive-ch--bends .drive-ch__inner { position: relative; justify-content: flex-start; }
/* The heading sits low right, on the road the car has already driven past; the car
 * starts top centre and leaves up the curve. */
.js-drive .drive-ch--bends .drive-ch__head {
	position: absolute;
	right: var(--drive-gutter);
	bottom: 11vh;
	width: min(44%, 36rem);
	text-align: right;
}
.js-drive .drive-ch--bends .drive-ch__title { margin-left: auto; }
@media (max-aspect-ratio: 1/1) {
	.js-drive .drive-ch--bends .drive-ch__head {
		left: var(--drive-gutter);
		right: var(--drive-gutter);
		bottom: 11svh;
		width: auto;
		text-align: left;
	}
	.js-drive .drive-ch--bends .drive-ch__title { margin-left: 0; }
}
.js-drive .drive-bend { position: absolute; max-width: 24rem; }
.js-drive .drive-bend--left { left: var(--drive-gutter); transform: translate3d(calc((1 - var(--e, 0)) * -8vw), 0, 0); }
.js-drive .drive-bend--right { right: var(--drive-gutter); text-align: right; transform: translate3d(calc((1 - var(--e, 0)) * 8vw), 0, 0); }
.js-drive .drive-bend:nth-of-type(2) { top: 36%; }
.js-drive .drive-bend:nth-of-type(3) { top: 50%; }
.js-drive .drive-bend:nth-of-type(4) { top: 64%; }

/* ---------- phones / portrait ---------- */
@media (max-aspect-ratio: 1/1) {
	.drive-stage { --drive-gutter: 24px; }
	.js-drive .drive-ch__inner {
		justify-content: flex-end;
		padding-bottom: 11svh;
	}
	.js-drive .drive-ch::before { left: -30vw; bottom: -10svh; top: auto; width: 160vw; height: 75svh; }
	.js-drive .drive-ch--hero .drive-ch__inner { padding-bottom: 9svh; }
	.js-drive .drive-ch--promise .drive-ch__inner { padding-top: 12svh; }
	.js-drive .drive-ch--promise::before { top: -10svh; bottom: auto; }

	.js-drive .drive-ch--split .drive-ch__inner { padding-block: 12svh 9svh; }
	.drive-split { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
	.drive-split__node { display: none; }
	.drive-split__side--right { grid-column: 2; }
	.drive-split__caption { font-size: var(--text-xs); }

	.js-drive .drive-ch--steps .drive-ch__inner { padding-top: 12svh; }
	.js-drive .drive-step,
	.js-drive .drive-step--1,
	.js-drive .drive-step--2,
	.js-drive .drive-step--3 { left: var(--drive-gutter); right: var(--drive-gutter); top: auto; bottom: 11svh; text-align: left; }

	.js-drive .drive-ch--product .drive-ch__inner { justify-content: flex-end; }
	.js-drive .drive-callout { display: none; }

	.js-drive .drive-bend,
	.js-drive .drive-bend--right,
	.js-drive .drive-bend:nth-of-type(2),
	.js-drive .drive-bend:nth-of-type(3),
	.js-drive .drive-bend:nth-of-type(4) { left: var(--drive-gutter); right: var(--drive-gutter); top: auto; bottom: 11svh; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.drive-stage__grain { animation: none; }
}

/* ---------- around the stage ---------- */
/* Header floats over the pinned film. */
body.drive-over .site-header {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
	border-bottom-color: transparent;
	backdrop-filter: none;
}
/* After the stage: the partnership keeps only its pacts, so it needn't fill a screen. */
.site-main > section.partnership--pacts-only {
	min-height: 0;
	padding-block: var(--space-16);
}

/* ---------- phones: per-chapter placement (user, 2026-09-16) ---------- */
@media (max-aspect-ratio: 1/1) {
	/* Hero: eyebrow + headline above the car, body + CTAs held in the first fold
	   at the bottom. Smaller type so the headline breaks in two lines, not three. */
	.js-drive .drive-ch--hero .drive-ch__inner {
		justify-content: flex-start;
		padding-top: 11svh;
		padding-bottom: 9svh;
	}
	.js-drive .drive-ch--hero .drive-ch__body { margin-top: auto; }
	.js-drive .drive-ch--hero .drive-ch__eyebrow { font-size: 0.625rem; letter-spacing: 0.14em; }
	.js-drive .drive-ch--hero .drive-ch__title--xl { font-size: clamp(1.9rem, 8.8vw, 2.6rem); }
	.js-drive .drive-ch--hero::before { top: -6svh; bottom: -6svh; height: 112svh; }

	/* Promise: the whole block sits at the bottom instead of the top band. */
	.js-drive .drive-ch--promise .drive-ch__inner {
		justify-content: flex-end;
		padding-top: 0;
		padding-bottom: 11svh;
	}
	.js-drive .drive-ch--promise::before { top: auto; bottom: -10svh; }

	/* Range: eyebrow + heading go to the top — the lit device in the frame sits
	   lower and was hidden behind the copy. */
	.js-drive .drive-ch--product .drive-ch__inner {
		justify-content: flex-start;
		padding-top: 11svh;
	}
	.js-drive .drive-ch--product::before { top: -10svh; bottom: auto; }
}

/* Phones: the partnership's two columns are far too cramped side by side, so they
   share one stacking area and take turns on scroll — the engineering partner first,
   then it leaves and the India partner arrives. Driven by the chapter's own --u
   progress, so it follows the scroll exactly. (user, 2026-09-16) */
@media (max-aspect-ratio: 1/1) {
	.js-drive .drive-ch--split .drive-split {
		grid-template-columns: 1fr;
		align-items: start;
	}
	.js-drive .drive-ch--split .drive-split__side {
		grid-column: 1;
		grid-row: 1;
		text-align: left;
		transition: none;
	}
	.js-drive .drive-ch--split .drive-split__side--left {
		opacity: clamp(0, calc((0.52 - var(--u, 0)) / 0.12), 1);
		transform: translate3d(calc(clamp(0, calc((var(--u, 0) - 0.40) / 0.12), 1) * -8vw), 0, 0);
	}
	.js-drive .drive-ch--split .drive-split__side--right {
		opacity: clamp(0, calc((var(--u, 0) - 0.48) / 0.12), 1);
		transform: translate3d(calc((1 - clamp(0, calc((var(--u, 0) - 0.48) / 0.12), 1)) * 8vw), 0, 0);
	}
}

/* Phones, second pass (user, 2026-09-16) */
@media (max-aspect-ratio: 1/1) {
	/* Eyebrow must hold one line — it was wrapping to two. */
	/* Both of these are width-bound, not taste-bound: the eyebrow must hold one line
	   and "Power that doesn't" must hold the first line. Size them from the container
	   so a wider phone gets more, and tighten the tracking to buy the room back. */
	.js-drive .drive-ch--hero .drive-ch__eyebrow {
		font-size: min(3.4vw, calc((100vw - 3rem) / 32));   /* measured: 1 line holds up to /29.2 */
		letter-spacing: 0.03em;
		white-space: nowrap;
	}
	/* fs_heading_with_accent emits: Plug-in<br>power.<br><span class="accent">…</span>
	   The first break is written for the desktop measure (three lines left of the car).
	   On a phone drop it so the heading reads "Plug-in power. / Zero compromise." —
	   two lines, size bound by the longer accent line. (user, 2026-09-21) */
	.js-drive .drive-ch--hero .drive-ch__title br:first-of-type { display: none; }
	.js-drive .drive-ch--hero .drive-ch__title--xl {
		font-size: min(11vw, calc((100vw - 3rem) / 7.6));
		letter-spacing: -0.015em;
	}
	/* Body + CTAs ride up to just under the car rather than sitting on the fold edge. */
	.js-drive .drive-ch--hero .drive-ch__inner { padding-bottom: 15svh; }

	/* Partnership: the right column's caption kept its right alignment while the rest
	   of the stacked column reads from the left. */
	.js-drive .drive-ch--split .drive-split__side--right .drive-split__label,
	.js-drive .drive-ch--split .drive-split__side--right .drive-split__name,
	.js-drive .drive-ch--split .drive-split__side--right .drive-split__caption {
		text-align: left;
		margin-left: 0;
		margin-right: auto;
	}
}

/* Phones, third pass (user, 2026-09-16) */
@media (max-aspect-ratio: 1/1) {
	/* Range: eyebrow + heading stay at the top, the description goes back down to
	   the bottom. Its body lives inside __head, so __head has to span the height. */
	.js-drive .drive-ch--product .drive-ch__head {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		max-width: none;
	}
	.js-drive .drive-ch--product .drive-ch__inner { padding-bottom: 11svh; }
	.js-drive .drive-ch--product .drive-ch__body { margin-top: auto; }

	/* Promise: the heading's hard breaks are written for the desktop measure and
	   left "to" stranded on its own line here — let it wrap to the phone instead. */
	.js-drive .drive-ch--promise .drive-ch__title br { display: none; }
	.js-drive .drive-ch--promise .drive-ch__title { font-size: clamp(1.5rem, 6.6vw, 2rem); }
}


/* ---------------------------------------------------------------------------
   Partnership on desktop: the chapter used to drop the statement and BOTH
   partners on screen together over a busy cabin still, which read as crowded.
   Staged on the chapter's own --u instead, the same device the phone layout
   already uses: statement alone -> DTE arrives and the statement recedes ->
   VMAX arrives -> the x ties them. (user, 2026-09-17)
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.js-drive .drive-ch--split .drive-ch__inner { padding-block: 15vh 12vh; }

	/* The statement leads, then steps back so the partners own the frame. */
	.js-drive .drive-ch--split .drive-ch__head {
		opacity: calc(1 - 0.55 * clamp(0, calc((var(--u, 0) - 0.30) / 0.16), 1));
		transform: translate3d(0, calc(clamp(0, calc((var(--u, 0) - 0.30) / 0.16), 1) * -3vh), 0);
	}

	/* Each partner rides in on its own window — never both at once. */
	.js-drive .drive-split__side--left {
		opacity: clamp(0, calc((var(--u, 0) - 0.26) / 0.12), 1);
		transform: translate3d(calc((1 - clamp(0, calc((var(--u, 0) - 0.26) / 0.12), 1)) * -6vw), 0, 0);
	}
	.js-drive .drive-split__side--right {
		opacity: clamp(0, calc((var(--u, 0) - 0.54) / 0.12), 1);
		transform: translate3d(calc((1 - clamp(0, calc((var(--u, 0) - 0.54) / 0.12), 1)) * 6vw), 0, 0);
	}
	/* The tie lands last, once both names are up. */
	.js-drive .drive-split__node {
		opacity: clamp(0, calc((var(--u, 0) - 0.72) / 0.10), 1);
		transform: scale(calc(0.86 + 0.14 * clamp(0, calc((var(--u, 0) - 0.72) / 0.10), 1)));
	}
}

/* ============================================================= */
/*  Families — "the car's nervous system" (2026-10-02)           */
/* ============================================================= */
/* Over the see-through car: the Performance Lab heading at the top, the three
   engineering families along the bottom, one per signal path, each with its real
   product photo (client shoot) and the series inside it. They arrive in turn. */
.drive-fams {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}
.drive-fam { display: flex; align-items: center; gap: var(--space-4); }
.drive-fam__media {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: clamp(3.5rem, 5vw, 5rem);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	background: rgba(10, 10, 12, 0.6);
	backdrop-filter: blur(6px);
	overflow: hidden;
}
.drive-fam__media img { width: 86%; height: 86%; object-fit: contain; }
.drive-fam--mark .drive-fam__media img { width: 62%; opacity: 0.55; }
.drive-fam__text {
	display: grid;
	gap: 0.3rem;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 44px rgba(0, 0, 0, 0.75);
}
.drive-fam__path {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-primary);
}
.drive-fam__name {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: clamp(1.25rem, 1.8vw, 1.75rem);
	line-height: 1.1;
	color: var(--color-text-strong);
}
.drive-fam__series { font-size: var(--text-sm); color: var(--color-text-muted); }
.drive-ch--families .drive-fams { margin-top: var(--space-12); }

.js-drive .drive-ch--families .drive-ch__inner {
	justify-content: space-between;
	padding-block: 13vh 8vh;
}
.js-drive .drive-ch--families .drive-fams { margin-top: 0; }
.js-drive .drive-fam { transform: translate3d(0, calc((1 - var(--e, 0)) * 3vh), 0); }
.js-drive .drive-ch--families::before { left: -10vw; top: -10vh; width: 120vw; height: 50vh; opacity: 0.8; }

@media (max-aspect-ratio: 1/1) {
	.js-drive .drive-ch--families .drive-ch__inner {
		justify-content: flex-start;
		padding-block: 11svh 9svh;
	}
	.js-drive .drive-ch--families .drive-ch__head { flex: 0 0 auto; }
	.js-drive .drive-ch--families .drive-fams {
		grid-template-columns: 1fr;
		gap: var(--space-4);
		margin-top: auto;
	}
	.drive-fam__media { width: 3rem; }
	.drive-fam__name { font-size: 1.125rem; }
	.drive-fam__series { font-size: var(--text-xs); }
}