/* ==========================================================================
   Ealan V3: dark cinematic.
   Obsidian ground, one morphing glass object (morph3d.js, fixed canvas behind the
   content, drawn as the page background), oversized Inter, hairlines, black space.
   Magenta for actions, Ealan Green for keywords. Sharp corners, except the liquid-glass
   layer (floating header capsule, mobile menu, modals: section 23).

   Token names are V2's (so v3-form.css works unchanged) but the values are inverted:
   --paper is the dark ground, --ink the light type.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	--paper: #0f0d1e; /* Obsidian: page ground (also the 3D backdrop colour) */
	--paper-2: #16132b; /* raised: cards, inputs */
	--paper-3: #1f1b3a;
	--ink: #f4f1ea; /* headings, key text */
	--ink-2: rgba(244, 241, 234, 0.8);
	--ink-3: rgba(244, 241, 234, 0.58);
	--line: rgba(244, 241, 234, 0.13);
	--line-strong: rgba(244, 241, 234, 0.3);
	--accent: #e8438c; /* Magenta: fills (buttons, bars, markers) */
	--accent-deep: #f173ab; /* lighter Magenta for small accent text on Obsidian (AA) */
	--on-accent: #0f0d1e;
	--cta: #45bf8b; /* Ealan Green (primary palette): CTA fills and interactive states. Magenta stays on small details only (board, 2026-09-30) */
	--on-cta: #0f0d1e;
	--key: #45bf8b; /* Ealan Green: highlighted keywords */
	--logo-top: #fff; /* logo mark: original white-ended gradient on dark grounds */
	--logo-mid: #9cddc1;
	--err: #ff7a70;

	--font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--nav-top: 14px; /* gap above the floating header capsule */
	--nav-h: 60px;
	--header-h: calc(var(--nav-top) + var(--nav-h)); /* space the capsule takes at the top */
	--gutter: clamp(16px, 4vw, 64px);
	--max: 1520px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-io: cubic-bezier(0.65, 0, 0.35, 1);

	color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-snap-type: y proximity;
	overflow-x: clip;
	background: var(--paper);
}

html.has-pager {
	scroll-snap-type: none;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink-2);
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	line-height: 1.6;
	/* clip, not hidden: hidden would make body a scroll container and break every
	   position: sticky pinned screen (see V2 notes in HANDOFF.md). */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

::selection {
	background: var(--accent);
	color: var(--on-accent);
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--cta);
	color: var(--on-accent);
}

.skip-link:focus {
	top: 12px;
}

.hp {
	position: absolute;
	left: -9999px;
}

/* ---------- 3. Type ---------- */
h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.v3-display {
	font-size: clamp(3rem, min(1rem + 7.6vw, 14.5vh), 11rem);
	line-height: 0.9;
	letter-spacing: -0.045em;
}

h2,
.v3-h2 {
	font-size: clamp(2.2rem, min(1rem + 4.4vw, 9.5vh), 6rem);
	line-height: 0.94;
	letter-spacing: -0.035em;
}

h3,
.v3-h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.75rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-weight: 700;
}

/* Editorial keyword: italic Inter in Ealan Green, one word per heading. */
.v3-em {
	font-style: italic;
	font-weight: 700;
	color: inherit;
}

.mono,
.v3-label {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
}

.v3-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink-3);
}

.v3-label__num {
	color: var(--accent-deep);
}

.v3-label__num::after {
	content: "";
	display: inline-block;
	width: 32px;
	height: 1px;
	margin-left: 10px;
	vertical-align: middle;
	background: var(--line-strong);
}

.v3-lead {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 46ch;
}

/* ---------- 4. Buttons, chips ---------- */
.v3-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 26px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	border: 1px solid var(--ink);
	transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}

.v3-btn .icon {
	width: 18px;
	height: 18px;
	transition: transform 200ms var(--ease);
}

.v3-btn:hover .icon {
	transform: translate(2px, 2px);
}

.v3-btn--primary {
	background: var(--cta);
	border-color: var(--cta);
	color: var(--on-cta);
}

.v3-btn--primary:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--on-accent);
}

.v3-btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-strong);
}

.v3-btn--ghost:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.v3-btn--small {
	min-height: 40px;
	padding: 0 16px;
	font-size: 0.875rem;
}

.v3-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 2px;
	transition: border-color 200ms var(--ease), color 200ms var(--ease);
}

.v3-link:hover {
	border-color: var(--cta);
}

.v3-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	font-size: 0.875rem;
	color: var(--ink);
	background: transparent;
	transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

.v3-chip[aria-pressed="true"],
.v3-chip.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.v3-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.icon {
	width: 20px;
	height: 20px;
	flex: none;
}

/* ---------- 5. Screens ---------- */
.v3-wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Screens are transparent: the 3D canvas (fixed, z 0) is the page background. */
.v3-screen {
	position: relative;
	z-index: 1;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: calc(var(--header-h) + clamp(16px, 4vh, 48px));
	padding-bottom: clamp(20px, 4vh, 48px);
	scroll-snap-align: start;
}

.v3-screen > .v3-wrap {
	position: relative;
}

/* ---------- 6. Proof and Loop stages (no longer pinned: one screen, the visitor picks) ---------- */
.v3-pin {
	width: 100%;
}

/* Same tight vertical rhythm they had when pinned, so each fits one screen. */
@media (min-width: 1024px) and (min-height: 620px) {
	.v3-proof.v3-screen,
	.v3-loop.v3-screen {
		padding-top: calc(var(--header-h) + clamp(12px, 3vh, 40px));
		padding-bottom: clamp(12px, 3vh, 40px);
	}
}

/* ---------- 7. 3D layer, slots, CSS glass fallback ---------- */
.v3-morph {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.v3-morph canvas {
	width: 100% !important;
	height: 100% !important;
}

/* A slot is an empty box the 3D object is fitted into (centre + min(width, height)). */
.v3-slot {
	position: relative;
	container-type: size;
	pointer-events: none;
}

/* Without the 3D (no WebGL, reduced motion, before it loads): a CSS glass orb. */
.v3-orb {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(100cqw, 100cqh);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 20%),
		radial-gradient(circle at 72% 74%, rgba(232, 67, 140, 0.55), rgba(232, 67, 140, 0) 46%),
		radial-gradient(circle at 24% 78%, rgba(69, 191, 139, 0.45), rgba(69, 191, 139, 0) 44%),
		radial-gradient(circle at 50% 50%, rgba(244, 241, 234, 0.03) 40%, rgba(244, 241, 234, 0.1) 72%, rgba(244, 241, 234, 0.32) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.12),
		inset -18px -24px 60px rgba(232, 67, 140, 0.18),
		0 0 120px rgba(232, 67, 140, 0.16);
	transition: opacity 900ms var(--ease);
}

html.has-3d .v3-orb {
	opacity: 0;
}

/* ---------- 8. Header: floating liquid-glass capsule, always visible ---------- */
.v3-header {
	position: fixed;
	top: var(--nav-top);
	left: 0;
	right: 0;
	z-index: 100;
	padding-inline: var(--gutter);
	color: var(--ink);
	pointer-events: none; /* only the capsule and the menu catch clicks */
}

/* Scroll edge effect: content fades as it scrolls under the floating capsule. */
.v3-header::before {
	content: "";
	position: fixed;
	inset: 0 0 auto;
	height: calc(var(--header-h) + 28px);
	background: linear-gradient(180deg, rgba(15, 13, 30, 0.78), rgba(15, 13, 30, 0));
	pointer-events: none;
	z-index: -1;
}

.v3-header__bar,
.v3-menu {
	max-width: 1240px;
	margin-inline: auto;
	pointer-events: auto;
}

.v3-header__bar {
	height: var(--nav-h);
	display: flex;
	align-items: center;
	gap: 24px;
	padding-inline: 22px 8px;
	border-radius: 999px;
}

.v3-header__logo {
	display: flex;
	align-items: center;
	flex: none;
}

.v3-header__logo .ealan-logo {
	display: block;
	height: 38px;
	width: auto;
}

/* Baseline beside the logo, behind a hairline (board debrief, 2026-10-04). */
.v3-header__baseline {
	flex: none;
	max-width: 13em;
	margin-left: -8px;
	padding-left: 16px;
	border-left: 1px solid var(--line-strong);
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.2;
	color: var(--ink);
}

.v3-header__baseline strong {
	font-weight: 700;
}

.v3-header__nav {
	display: flex;
	gap: clamp(2px, 0.6vw, 10px);
	margin-inline: auto;
	font-size: 0.9375rem;
	font-weight: 500;
}

.v3-header__nav a {
	position: relative;
	padding: 9px 16px;
	border-radius: 999px;
	color: var(--ink-2);
	transition: color 200ms var(--ease), background 300ms var(--ease), box-shadow 300ms var(--ease);
}

.v3-header__nav a:hover {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.06);
}

/* Current section: a monochrome selection fill, like a tab bar (no glass on glass). */
.v3-header__nav a.is-current {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.12);
}

.v3-header__tools {
	display: flex;
	align-items: center;
	gap: 12px;
}

.v3-header__lang {
	min-width: 44px;
	min-height: 44px;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	color: var(--ink-2);
	transition: color 200ms var(--ease), background 200ms var(--ease);
}

.v3-header__lang:hover {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.08);
}

.v3-header__cta {
	min-height: 44px;
	border-radius: 999px;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.v3-header__cta-short,
.v3-header__menu {
	display: none;
}

.v3-header__menu {
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 50%;
}

.v3-header__menu .icon--close,
.v3-header__menu[aria-expanded="true"] .icon--open {
	display: none;
}

.v3-header__menu[aria-expanded="true"] .icon--close {
	display: block;
}

/* Kept for v3.js (it still sets the scale) but not drawn: a coloured line on the capsule
   reads as an outline, which Liquid Glass does not have. The page rail shows position. */
.v3-header__progress {
	display: none;
}

.v3-menu {
	margin-top: 10px;
	border-radius: 28px;
	padding: 16px 24px 20px;
}

.v3-menu nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--ink);
}

.v3-menu a {
	padding-block: 8px;
}

.v3-menu[hidden] {
	display: none;
}

@media (max-width: 1100px) {
	.v3-header__nav {
		display: none;
	}

	.v3-header__tools {
		margin-left: auto;
	}

	.v3-header__menu {
		display: inline-grid;
	}
}

.v3-menu__lang {
	display: none;
}

@media (max-width: 640px) {
	.v3-header__cta-full {
		display: none;
	}

	.v3-header__cta-short {
		display: inline;
	}

	/* The baseline stays beside the logo on phones: it takes the room left of the tools. */
	.v3-header__tools {
		flex: none;
	}

	.v3-header__baseline {
		flex: 0 1 auto;
		min-width: 0;
		margin-left: 0;
		padding-left: 10px;
		font-size: 0.75rem;
		line-height: 1.15;
		text-wrap: balance;
	}
}

/* Phones: the language switch moves into the menu panel, its room goes to the baseline. */
@media (max-width: 479px) {
	.v3-header__lang {
		display: none;
	}

	.v3-menu nav .v3-menu__lang {
		display: flex;
		align-items: center;
		min-height: 44px;
		margin-top: 8px;
		padding-top: 12px;
		border-top: 1px solid var(--line);
		font-family: var(--font-body);
		font-size: 0.9375rem;
		font-weight: 500;
		color: var(--ink-2);
	}
}

/* No room left beside the logo for even one word per line. */
@media (max-width: 339px) {
	.v3-header__baseline {
		display: none;
	}
}

/* ---------- 9. Reveals (CSS transitions; v3.js adds .v3-anim and .is-in) ---------- */
.v3-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}

.v3-word > span {
	display: inline-block;
}

.v3-anim [data-v3-split] .v3-word > span {
	transform: translateY(108%);
	transition: transform 900ms var(--ease);
	transition-delay: calc(var(--w, 0) * 45ms);
}

.v3-anim [data-v3-split].is-in .v3-word > span {
	transform: none;
}

.v3-anim [data-v3-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 800ms var(--ease) 200ms, transform 800ms var(--ease) 200ms;
}

.v3-anim [data-v3-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* ---------- 10. 00 Hero: object centre, headline around it ---------- */
.v3-hero {
	justify-content: stretch;
	padding-bottom: clamp(16px, 3vh, 36px);
}

.v3-hero__slot {
	/* Centre of the screen, over the inner corners of both headline blocks: the glass sits
	   in front of the headline (the 3D draws the text behind it, refracted). */
	position: absolute;
	left: 50%;
	top: calc(50% + var(--header-h) / 3);
	width: min(64svh, 44vw);
	height: min(64svh, 44vw);
	transform: translate(-50%, -50%);
}

.v3-hero__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 2vh, 24px);
}

/* Eyebrow a step up from the screen labels: it states what Ealan is (board, 2026-09-30). */
.v3-hero__kicker {
	font-size: clamp(0.9375rem, 0.8rem + 0.35vw, 1.125rem);
	letter-spacing: 0.08em;
	color: var(--ink-2);
}

.v3-hero__title {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2vh;
	padding-block: clamp(4px, 1.5vh, 20px);
}

.v3-hero__line {
	display: block;
	max-width: 7.2ch;
}

/* Hero layout (board debrief, 2026-10-04; replaces the centred row): the tagline in three
   lines on the left, the glass on the right. One weight, no italic keyword. Phones: the
   tagline, then the glass. ?move keeps its own layout. */
.v3-hero__stage {
	flex: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: clamp(16px, 3vw, 56px);
}

.v3-hero:not(.v3-hero--move) .v3-hero__title {
	display: block;
	flex: none;
	padding-block: 0;
	font-size: clamp(2.75rem, min(0.5rem + 6.2vw, 15vh), 7.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
}

.v3-hero:not(.v3-hero--move) .v3-hero__line {
	max-width: none;
	white-space: nowrap;
}

/* The slot takes the room left of the tagline; it drops the absolute centring ?move uses. */
.v3-hero .v3-hero__slot--side {
	position: relative;
	left: auto;
	top: auto;
	justify-self: center;
	width: min(66svh, 100%);
	height: auto;
	aspect-ratio: 1;
	transform: none;
}

@media (max-width: 1023px) {
	.v3-hero__stage {
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		row-gap: clamp(12px, 3svh, 28px);
	}

	.v3-hero:not(.v3-hero--move) .v3-hero__title {
		font-size: clamp(2.5rem, 11vw, 5.5rem);
	}

	.v3-hero .v3-hero__slot--side {
		width: min(64vw, 32svh);
	}
}

.v3-hero__title .v3-em {
	font-style: normal;
	font-weight: inherit;
}

@media (max-width: 640px) {
	.v3-hero__kicker {
		font-size: 0.8125rem;
		letter-spacing: 0.05em;
	}
}

/* The 3D redraws the headline behind the glass (refracted): hide the DOM glyphs only. */
html.has-gltext [data-v3-gltext],
html.has-gltext [data-v3-gltext] * {
	color: transparent; /* never transition colour here: morph3d.js reads it right after removal */
}

.v3-hero__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2vh, 24px) clamp(24px, 5vw, 88px);
	padding-top: clamp(14px, 2.4vh, 24px);
	border-top: 1px solid var(--line);
}

.v3-hero__sub {
	max-width: 40ch;
	color: var(--ink-2);
}

/* ---------- 11. 01 Proof ---------- */
.v3-proof__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.7fr) minmax(240px, 320px);
	grid-template-areas:
		"head  head  index"
		"stage slot  index"
		"clients clients clients";
	column-gap: clamp(20px, 4vw, 64px);
	row-gap: clamp(12px, 2.5vh, 28px);
	align-items: end;
}

.v3-proof__head {
	grid-area: head;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 32px;
}

.v3-proof__title {
	font-size: clamp(1.75rem, min(1.1rem + 2.2vw, 5vh), 3rem);
}

.v3-proof__slot {
	grid-area: slot;
	align-self: stretch;
	min-height: clamp(220px, 44vh, 520px);
}

.v3-proof__stage {
	grid-area: stage;
	display: grid;
	min-height: clamp(260px, 44vh, 480px);
	align-items: end;
}

.v3-case {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(4px, 1vh, 12px);
	transition: opacity 600ms var(--ease), transform 700ms var(--ease);
}

.v3-case__brand {
	display: flex;
	gap: 16px;
	color: var(--ink);
}

.v3-case__brand span {
	color: var(--ink-3);
}

/* The pain point sits in the index on the right (desktop); in the stacked mobile list it
   heads each case instead. */
.v3-case__pain {
	display: none;
	font-weight: 600;
	color: var(--accent-deep);
}

.v3-case__metric {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(5rem, min(3rem + 11vw, 30vh), 17rem);
	line-height: 0.85;
	letter-spacing: -0.055em;
	color: var(--ink);
}

/* A metric made of words ("Full Loop") stays on one line. */
.v3-case__metric--words {
	font-size: clamp(3.5rem, min(1.5rem + 6.5vw, 19vh), 10rem);
	white-space: nowrap;
}

.v3-case__label {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.625rem);
	color: var(--ink-2);
	max-width: 30ch;
}

.v3-case__open {
	align-self: flex-start;
	margin-top: 8px;
}

@media (min-width: 1024px) and (min-height: 620px) {
	.v3-case:not(.is-current) {
		opacity: 0;
		pointer-events: none;
		transform: translateY(calc(var(--dir, 1) * 60px));
	}

	.v3-case.is-before {
		transform: translateY(calc(var(--dir, 1) * -60px));
	}
}

.v3-proof__picker {
	grid-area: index;
	align-self: center;
}

.v3-proof__index {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Each pain point is a framed button (see 25. Interactive controls). */
.v3-proof__index li {
	display: flex;
	color: var(--ink-2);
}

/* Each pain point is a button: picking it shows its result. */
.v3-proof__pick {
	display: flex;
	gap: 14px;
	align-items: center;
	width: 100%;
	padding: clamp(8px, 1.3vh, 13px) 14px clamp(8px, 1.3vh, 13px) 16px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1.3;
	text-align: left;
	text-wrap: balance;
	cursor: pointer;
}


.v3-proof__pick:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.v3-proof__index li.is-current {
	font-weight: 600;
}

.v3-proof__picker .v3-auto-toggle {
	margin-top: 12px;
}

.v3-clients {
	grid-area: clients;
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: clamp(12px, 2vh, 20px);
	border-top: 1px solid var(--line);
	overflow: hidden;
}

.v3-clients__title {
	flex: none;
	color: var(--ink-3);
}

.v3-clients__track {
	display: flex;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.v3-clients__list {
	display: flex;
	flex: none;
	gap: clamp(28px, 4vw, 56px);
	padding-right: clamp(28px, 4vw, 56px);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.125rem;
	white-space: nowrap;
	animation: v3-marquee 45s linear infinite;
}

/* Client logos: silhouettes in one grey, the same for a name shown without a logo
   (board debrief, 2026-10-04: every logo at the same grey level, no colour on hover). */
.v3-clients__list li {
	display: flex;
	align-items: center;
}

.v3-clients__logo,
.v3-clients__name {
	opacity: 0.6;
}

.v3-clients__logo {
	height: 28px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.v3-clients__name {
	color: #fff;
}

.v3-clients:hover .v3-clients__list {
	animation-play-state: paused;
}

@keyframes v3-marquee {
	to {
		transform: translateX(-100%);
	}
}

/* ---------- 12. 02 Who we are ---------- */
.v3-who__top,
.v3-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(20px, 4vw, 64px);
	margin-top: clamp(12px, 2vh, 20px);
}

.v3-who__title {
	font-size: clamp(2.6rem, min(1rem + 5.6vw, 11vh), 7.5rem);
	line-height: 0.92;
	max-width: 13ch;
}

.v3-who__slot {
	width: clamp(160px, 30vh, 340px);
	height: clamp(160px, 30vh, 340px);
	margin-right: clamp(0px, 4vw, 80px);
}

.v3-who__grid {
	margin-top: clamp(20px, 4vh, 48px);
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(28px, 6vw, 96px);
	align-items: start;
}

.v3-who__pitch {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 48ch;
}

.v3-who__hook {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	color: var(--ink);
	line-height: 1.2;
}

.v3-who__growth {
	color: var(--ink);
}

.v3-who__points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--line-strong);
}

.v3-who__points li {
	padding: clamp(14px, 2.4vh, 24px) clamp(12px, 1.5vw, 24px) clamp(14px, 2.4vh, 24px) 0;
	border-bottom: 1px solid var(--line);
}

.v3-who__points li:nth-child(odd) {
	border-right: 1px solid var(--line);
}

.v3-who__points li:nth-child(even) {
	padding-left: clamp(12px, 1.5vw, 24px);
}

.v3-who__points .mono {
	color: var(--accent-deep);
}

.v3-who__points h3 {
	margin: 6px 0;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
}

.v3-who__points p {
	font-size: 0.9375rem;
	color: var(--ink-3);
}

/* ---------- 13. 03 What we do: challenges + discipline index ---------- */
.v3-what__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(24px, 5vw, 88px);
	align-items: stretch;
}

.v3-what__intro {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 2vh, 20px);
}

.v3-what__intro h2 {
	font-size: clamp(2.2rem, min(1rem + 4vw, 9vh), 5.5rem);
}

.v3-what__count {
	color: var(--ink-3);
}

.v3-what__slot {
	flex: 1 1 auto;
	height: clamp(120px, 20vh, 260px); /* definite base: container units need it */
}

.v3-what__row {
	margin-top: 0;
	justify-content: flex-start;
	gap: 16px;
}

.v3-what__row .v3-auto-toggle {
	flex: none;
}

/* Short desktop screens: a smaller object keeps 03 on one screen. */
@media (min-width: 1024px) and (min-height: 620px) and (max-height: 820px) {
	.v3-what__slot {
		height: clamp(80px, 11vh, 120px);
	}
}

/* Discipline index: big names on hairlines; summary swaps to skills on hover / when lit. */
.v3-disc {
	align-self: center;
	border-top: 1px solid var(--line-strong);
	counter-reset: disc;
}

.v3-disc__row {
	position: relative;
	display: grid;
	grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 0.95fr);
	grid-template-areas: "num name info";
	align-items: center;
	gap: clamp(10px, 1.5vw, 24px);
	padding: clamp(8px, 1.5vh, 16px) 0 clamp(8px, 1.5vh, 16px) 14px;
	border-bottom: 1px solid var(--line);
	outline-offset: -2px;
	transition: opacity 350ms var(--ease), background 350ms var(--ease), box-shadow 350ms var(--ease);
}

.v3-disc__num {
	grid-area: num;
	color: var(--ink-3);
}

.v3-disc__name {
	grid-area: name;
	font-size: clamp(1.3rem, min(0.6rem + 2vw, 4.4vh), 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	transition: color 300ms var(--ease), transform 350ms var(--ease);
}

.v3-disc__summary,
.v3-disc__skills {
	grid-area: info;
	font-size: 0.875rem;
	line-height: 1.45;
	transition: opacity 300ms var(--ease);
}

.v3-disc__summary {
	color: var(--ink-3);
}

.v3-disc__skills {
	color: var(--ink-2);
	opacity: 0;
}

.v3-disc__row:hover,
.v3-disc__row:focus-visible,
.v3-disc__row.is-lit {
	background: linear-gradient(90deg, color-mix(in srgb, var(--cta) 10%, transparent), transparent 70%);
}

.v3-disc__row:hover .v3-disc__name,
.v3-disc__row:focus-visible .v3-disc__name,
.v3-disc__row.is-lit .v3-disc__name {
	transform: translateX(8px);
}

.v3-disc__row:hover .v3-disc__summary,
.v3-disc__row:focus-visible .v3-disc__summary,
.v3-disc__row.is-lit .v3-disc__summary {
	opacity: 0;
}

.v3-disc__row:hover .v3-disc__skills,
.v3-disc__row:focus-visible .v3-disc__skills,
.v3-disc__row.is-lit .v3-disc__skills {
	opacity: 1;
}

.v3-disc__row.is-lit,
.v3-disc__row.is-preview {
	box-shadow: inset 3px 0 0 var(--cta);
}

.v3-disc__row.is-lit .v3-disc__num {
	color: var(--cta);
}

.v3-disc__row.is-dim {
	opacity: 0.28;
}

/* ---------- 14. 04 The Full Loop ---------- */
.v3-loop__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 72px);
	align-items: center;
}

.v3-loop__stage {
	position: relative;
	display: grid;
	place-items: center;
	height: calc(100svh - var(--header-h) - clamp(24px, 6vh, 80px));
	max-height: 100%;
}

.v3-loop__slot {
	grid-area: 1 / 1;
	width: min(100%, 62svh);
	aspect-ratio: 1;
}

/* Giant outlined step number behind the object. */
.v3-loop__big {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.v3-loop__big span {
	grid-area: 1 / 1;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: min(58svh, 36vw);
	line-height: 0.8;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(244, 241, 234, 0.14);
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 600ms var(--ease), transform 900ms var(--ease);
}

.v3-loop__big span.is-current {
	opacity: 1;
	transform: none;
}

.v3-loop__content {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.8vh, 18px);
}

.v3-loop__content h2 {
	font-size: clamp(2rem, min(1rem + 3.2vw, 7.5vh), 4.5rem);
}

.v3-loop__intro {
	color: var(--ink-3);
}

.v3-loop__steps {
	display: grid;
	grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
	gap: 8px;
}

.v3-loop__node {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 10px 12px 12px;
	text-align: left;
	font-size: 0.875rem;
	color: var(--ink-2);
}

.v3-loop__node .mono {
	font-size: 0.6875rem;
}

.v3-loop__node.is-active {
	font-weight: 600;
}

.v3-loop__node.is-active .mono {
	color: var(--cta);
}

.v3-loop__panels {
	display: grid;
	margin-top: clamp(8px, 2vh, 24px);
}

.v3-loop__panel {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	animation: v3-panel-in 600ms var(--ease);
}

@keyframes v3-panel-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

.v3-loop__panel .v3-h2 {
	font-size: clamp(2.2rem, min(1.2rem + 3vw, 8vh), 4.5rem);
}

.v3-loop__pitfalls {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin-top: clamp(4px, 1.5vh, 16px);
	color: var(--ink-3);
	font-size: 0.6875rem;
}

.v3-loop__pitfalls span::before {
	content: "×  ";
	color: var(--accent-deep);
}

/* ---------- 15. 05 How we work ---------- */
.v3-team__title,
.v3-tech__title {
	max-width: 16ch;
}

.v3-top__slot {
	width: clamp(140px, 26vh, 300px);
	height: clamp(140px, 26vh, 300px);
	margin-right: clamp(0px, 4vw, 80px);
}

.v3-flow {
	margin-top: clamp(24px, 5vh, 64px);
	display: grid;
	grid-template-columns: 0.8fr 1.1fr 1.5fr 0.9fr;
}

.v3-flow__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(16px, 3vh, 28px) clamp(14px, 2vw, 28px) clamp(16px, 3vh, 28px) 0;
	border-top: 1px solid var(--line-strong);
}

.v3-flow__step + .v3-flow__step {
	padding-left: clamp(14px, 2vw, 28px);
	border-left: 1px solid var(--line);
}

.v3-flow__step::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--ink-3);
}

.v3-flow__step + .v3-flow__step::before {
	left: -6px;
}

.v3-flow__step--key::before,
.v3-flow__step--end::before {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(232, 67, 140, 0.2);
}

.v3-flow__step .mono {
	color: var(--ink-3);
}

.v3-flow__step > p:not(.v3-chips) {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	color: var(--ink);
	line-height: 1.25;
}

.v3-flow__step .v3-chip {
	min-height: 30px;
	font-size: 0.8125rem;
	padding: 0 10px;
}

.v3-team__principles {
	margin-top: clamp(16px, 3vh, 32px);
	color: var(--ink-3);
}

/* ---------- 16. 06 Technology & AI ---------- */
.v3-tech__grid {
	margin-top: clamp(24px, 5vh, 56px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line-strong);
}

.v3-tech__grid li {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(16px, 3vh, 28px) 24px clamp(16px, 3vh, 28px) 0;
	border-bottom: 1px solid var(--line);
}

.v3-tech__grid li:not(:nth-child(3n + 1)) {
	padding-left: 24px;
	border-left: 1px solid var(--line);
}

.v3-tech__grid .mono {
	color: var(--ink-3);
}

.v3-tech__grid li.is-live .mono::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 10px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(232, 67, 140, 0.22);
	vertical-align: middle;
}

.v3-tech__grid p {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.625rem);
	line-height: 1.15;
	color: var(--ink);
}

.v3-tech__partners {
	margin-top: clamp(18px, 3.5vh, 36px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
}

.v3-tech__partners .mono {
	color: var(--ink-3);
}

.v3-tech__partners a,
.v3-tech__partners span:not(.mono) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink);
}

.v3-tech__partners a .icon {
	width: 14px;
	height: 14px;
	opacity: 0.6;
}

.v3-tech__partners a:hover {
	color: var(--accent-deep);
}

/* Partner logos: white silhouettes in the client-strip grey; a link brightens on hover
   (no colour). The files share one canvas height, so one height sizes them all. */
.v3-tech__logo {
	display: block;
	width: auto;
	height: clamp(32px, 4.4vh, 40px);
	filter: brightness(0) invert(1);
	opacity: 0.6;
	transition: opacity 200ms var(--ease);
}

/* An uploaded logo with its own background is shown as uploaded, never as a silhouette. */
.v3-tech__logo--asis {
	filter: none;
	opacity: 1;
	border-radius: 4px;
}

.v3-tech__partners a:hover .v3-tech__logo,
.v3-tech__partners a:focus-visible .v3-tech__logo {
	opacity: 1;
}

/* ---------- 17. 07 Culture ---------- */
.v3-culture__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(28px, 6vw, 96px);
	align-items: end;
}

.v3-culture__grid h2 {
	margin-block: 14px 18px;
	font-size: clamp(2.4rem, min(1rem + 5vw, 10vh), 6.5rem);
	line-height: 0.92;
}

.v3-values {
	margin-top: clamp(16px, 3.5vh, 36px);
	border-top: 1px solid var(--line-strong);
}

.v3-values li {
	padding: clamp(6px, 1.4vh, 14px) 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, min(0.8rem + 2.6vw, 5.6vh), 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ink);
	transition: padding 300ms var(--ease), color 300ms var(--ease);
}

.v3-values li:hover {
	padding-left: 16px;
	color: var(--accent-deep);
}

.v3-culture__team {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Team photo: a real frame for the picture, a dashed one while it is missing. */
.v3-team-photo {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 56vh;
	margin: 0;
	background: var(--paper-2);
	border: 1px solid var(--line);
	overflow: hidden;
}

.v3-team-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v3-team-photo--empty {
	border: 1px dashed var(--line-strong);
	color: var(--ink-3);
}

.v3-culture__join {
	align-self: flex-start;
	margin-top: 8px;
}

/* ---------- 17b. Leadership ---------- */
.v3-leadership__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(28px, 6vw, 96px);
	align-items: end;
}

.v3-leadership__intro {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(20px, 5vh, 56px);
}

.v3-leadership__intro h2 {
	font-size: clamp(2.2rem, min(0.8rem + 3.6vw, 8.5vh), 5rem);
	line-height: 1;
	text-wrap: balance;
}

.v3-leadership__team {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.v3-leaders {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 1.2vw, 20px);
}

.v3-leader {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	text-align: left;
}

/* Portraits are cropped to the same shot scale (4:5 files): the frame only sizes them. */
.v3-leader__photo {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	margin-bottom: 6px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
	color: var(--ink);
	overflow: hidden;
}

.v3-leader__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v3-leader__name {
	font-weight: 600;
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	color: var(--ink);
	line-height: 1.3;
}

.v3-leader__role {
	font-size: 0.6875rem;
	color: var(--ink-3);
}

/* Short desktop screens: the portraits give way so the screen still fits. */
@media (min-width: 1024px) and (max-height: 820px) {
	.v3-leadership__team {
		max-width: calc((100svh - var(--header-h) - 190px) * 2.5);
		margin-left: auto;
	}
}

/* ---------- 18. 08 Contact (layout in v3-form.css) ---------- */
.v3-contact__slot {
	flex: 1 1 auto;
	height: clamp(100px, 18vh, 240px);
	max-height: 280px;
}

/* ---------- 19. Footer: signature over the ring ---------- */
.v3-footer {
	justify-content: stretch;
	overflow: hidden;
}

.v3-footer__slot {
	position: absolute;
	left: 50%;
	top: 46%;
	width: min(76svh, 56vw);
	height: min(76svh, 56vw);
	transform: translate(-50%, -50%);
}

.v3-footer__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 4vh, 40px);
}

.v3-footer__regions {
	align-self: center;
}

.v3-footer__giant {
	/* Block, not flex: the word-split spans must flow as inline text. Auto margins centre it
	   in the flex column. */
	margin: auto;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.75rem, min(1rem + 7vw, 14vh), 10rem);
	line-height: 0.9;
	letter-spacing: -0.045em;
	color: var(--ink);
	max-width: 13ch;
	text-wrap: balance;
}

.v3-footer__dot {
	color: var(--accent);
}

.v3-footer__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 32px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 0.875rem;
}

.v3-footer__contact {
	display: flex;
	gap: 24px;
}

.v3-footer__email {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--accent-deep);
}

.v3-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.v3-footer__legal a:hover,
.v3-footer__legal button:hover {
	color: var(--accent-deep);
}

.v3-footer__copy {
	color: var(--ink-3);
}

/* ---------- 20. Page rail ---------- */
.v3-rail {
	display: none;
}

@media (min-width: 1024px) and (min-height: 620px) {
	.v3-rail {
		position: fixed;
		right: clamp(10px, 1.1vw, 20px);
		top: 50%;
		transform: translateY(-50%);
		z-index: 90;
		display: flex;
		flex-direction: column;
		gap: 8px;
		color: var(--ink-3);
	}

	.v3-rail__tick {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		min-height: 22px;
		padding-left: 10px;
	}

	.v3-rail__tick::after {
		content: "";
		width: 10px;
		height: 1px;
		background: currentColor;
		transition: width 300ms var(--ease);
	}

	.v3-rail__num {
		font-size: 0.6875rem;
		opacity: 0;
		transition: opacity 300ms var(--ease);
	}

	/* Numbers on hover only: the current screen is the lit Magenta tick (a visible
	   number would sit over content near the right edge). */
	.v3-rail__tick:hover .v3-rail__num {
		opacity: 1;
	}

	.v3-rail__tick.is-current {
		color: var(--ink);
	}

	.v3-rail__tick.is-current::after {
		width: 24px;
		height: 2px;
		background: var(--accent);
	}
}

/* ---------- 21. Modals ---------- */
.v3-modal {
	--glass-tint: rgba(15, 13, 30, 0.62);
	--glass-blur: 28px;
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100svh - 48px);
	padding: 0;
	border: 0;
	border-radius: 28px;
	color: var(--ink-2);
	overflow: hidden;
}

/* The dialog itself stays still (its glass rim and lens do not scroll away); the inner scrolls. */
.v3-modal[open] {
	display: flex;
	flex-direction: column;
}

.v3-modal[open] {
	animation: v3-glass-in 420ms var(--ease);
}

@keyframes v3-glass-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.97);
	}
}

.v3-modal::backdrop {
	background: rgba(8, 7, 16, 0.35); /* HIG dimming layer */
}

.v3-modal__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(24px, 4vw, 48px);
}

.v3-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--ink);
	background: rgba(255, 255, 255, 0.08);
	transition: background 200ms var(--ease);
}

.v3-modal__close:hover {
	background: rgba(255, 255, 255, 0.16);
}

.v3-modal .v3-chip {
	border-radius: 999px;
}

/* Case modal: the advertiser's logo stands for its name (white, readable on the dark glass). */
.v3-modal__brand {
	display: flex;
	line-height: 1;
}

.v3-modal__logo {
	width: auto;
	height: clamp(44px, 8vh, 76px);
	max-width: min(100%, 320px);
	object-fit: contain;
	object-position: left center;
	filter: brightness(0) invert(1);
}

.v3-modal__kpis {
	display: flex;
	gap: 40px;
	padding-block: 16px;
	border-block: 1px solid var(--line);
}

.v3-modal__kpis p {
	display: flex;
	flex-direction: column;
}

.v3-modal__kpis strong {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 2.5rem;
	color: var(--ink);
	line-height: 1;
}

.v3-modal__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ---------- 23. Liquid glass (header capsule, mobile menu, modals) ----------
   Follows Apple's HIG (Materials > Liquid Glass, Color > Liquid Glass color):
   - only on the floating functional layer (navigation, menu, popovers), never on content;
   - no colour of its own and no drawn outline: it takes its colour from what is behind it,
     its edge comes from the lens (v3-glass.js, Chromium) and a faint specular light;
   - "regular" variant: blur + luminosity lift so text stays legible; larger surfaces
     (modals) are more opaque;
   - colour only on the primary action's background (header CTA);
   - reduce transparency / increase contrast are honoured. */
.v3-glass,
.v3-modal {
	isolation: isolate;
	background: var(--glass-tint, rgba(15, 13, 30, 0.34));
	-webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(1.6) brightness(1.12);
	backdrop-filter: var(--glass-refract,) blur(var(--glass-blur, 16px)) saturate(1.6) brightness(1.12);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.16),
		inset 0 -1px 1px rgba(255, 255, 255, 0.05),
		0 12px 36px -10px rgba(0, 0, 0, 0.5);
}

.v3-glass {
	position: relative;
}

/* Specular light: a soft sheen falling from the top edge, no line. */
.v3-glass::after,
.v3-modal::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 42%);
	pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
	.v3-glass,
	.v3-modal {
		background: var(--paper-2);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-contrast: more) {
	.v3-glass,
	.v3-modal {
		--glass-tint: rgba(15, 13, 30, 0.86);
		box-shadow: inset 0 0 0 1px var(--line-strong);
	}
}

/* ---------- 22. Consent banner (V1 markup, V3 skin) ---------- */
.consent-banner {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 150;
	width: min(400px, calc(100vw - 32px));
	padding: 18px;
	background: var(--paper-2);
	border: 1px solid var(--line-strong);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	font-size: 0.875rem;
	color: var(--ink-2);
}

.consent-banner__title {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink);
	margin-bottom: 6px;
}

.consent-banner__details {
	margin-top: 10px;
}

.consent-banner__details summary {
	cursor: pointer;
	text-decoration: underline;
}

.consent-banner__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}

.consent-banner__option {
	display: flex;
	gap: 8px;
	align-items: center;
}

.consent-banner__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 14px;
}

.consent-banner .btn {
	min-height: 44px;
	padding: 0 14px;
	font-weight: 600;
	border: 1px solid var(--line-strong);
	color: var(--ink);
}

.consent-banner .btn--primary {
	background: var(--cta);
	border-color: var(--cta);
	color: var(--on-cta);
}

/* ---------- 23. Responsive stacking (the desktop gate covers phones in the demo) ---------- */
@media (max-width: 1023px) {
	.v3-who__grid,
	.v3-what__grid,
	.v3-loop__grid,
	.v3-culture__grid,
	.v3-leadership__grid {
		grid-template-columns: 1fr;
	}

	.v3-hero__slot {
		width: min(72vw, 46svh);
		height: min(72vw, 46svh);
	}

	.v3-hero__line {
		max-width: none;
	}

	.v3-disc__row {
		grid-template-columns: 2.6em minmax(0, 1fr);
		grid-template-areas: "num name" ". info";
	}

	.v3-disc__skills {
		display: none;
	}

	.v3-flow {
		grid-template-columns: 1fr 1fr;
		row-gap: 24px;
	}

	.v3-tech__grid {
		grid-template-columns: 1fr 1fr;
	}

	.v3-tech__grid li,
	.v3-tech__grid li:not(:nth-child(3n + 1)) {
		padding: 18px 12px;
		border-left: 0;
	}

	.v3-loop__stage {
		height: auto;
	}

	.v3-loop__slot {
		width: min(78vw, 420px);
	}
}

@media (max-width: 1023px), (max-height: 619px) {
	.v3-proof__inner {
		grid-template-columns: 1fr;
		grid-template-areas: "head" "slot" "stage" "dots" "clients";
	}

	.v3-proof__slot {
		min-height: 200px;
	}

	.v3-proof__picker {
		display: none;
	}

	.v3-proof__stage {
		display: flex;
		flex-direction: column;
		gap: 40px;
		min-height: 0;
	}

	.v3-case {
		padding-bottom: 32px;
		border-bottom: 1px solid var(--line);
	}

	.v3-case__metric {
		font-size: clamp(4rem, 22vw, 7rem);
	}

	.v3-case__metric--words {
		white-space: normal;
	}

	.v3-case__pain {
		display: block;
	}
}

@media (max-width: 640px) {
	.v3-who__top,
	.v3-top {
		grid-template-columns: 1fr;
	}

	.v3-who__points,
	.v3-flow,
	.v3-tech__grid {
		grid-template-columns: 1fr;
	}

	.v3-who__points li,
	.v3-who__points li:nth-child(even) {
		padding-left: 0;
		border-right: 0;
	}

	.v3-flow__step + .v3-flow__step {
		padding-left: 0;
		border-left: 0;
	}

	.v3-flow__step + .v3-flow__step::before {
		left: 0;
	}

	.v3-loop__node-name {
		display: none;
	}

	:root {
		--nav-top: 10px;
		--nav-h: 56px;
	}

	.v3-header {
		padding-inline: 10px;
	}

	.v3-header__bar {
		gap: 8px;
		padding-inline: 16px 6px;
	}

	.v3-header__tools {
		gap: 2px;
	}

	.v3-header__cta {
		padding: 0 12px;
	}
}

/* Small phones: a tighter capsule, so the baseline beside the logo keeps to two or three lines. */
@media (max-width: 400px) {
	.v3-header {
		padding-inline: 8px;
	}

	.v3-header__bar {
		gap: 6px;
		padding-inline: 12px 6px;
	}

	.v3-header__baseline {
		padding-left: 8px;
	}

	.v3-header__tools {
		gap: 0;
	}

	.v3-header__cta {
		padding: 0 10px;
	}
}

/* French is longer: under 360px it would take four lines. */
@media (max-width: 359px) {
	:lang(fr) .v3-header__baseline {
		display: none;
	}
}

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

/* ---------- 25. Interactive controls + autoplay (board, 2026-09-30) ----------
   One look for everything the visitor can click to move from one thing to the next: a
   rounded frame (hairlines elsewhere are never rounded), an arrow or number, a lift on
   hover, Ealan Green when current. Autoplay lists (v3.js autoPlay()) fill a green bar
   under the current item; the bar ending moves to the next one. */
.v3-proof__index li,
.v3-loop__node,
.v3-what__challenges .v3-chip {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	background: color-mix(in srgb, var(--paper-2) 72%, transparent);
	cursor: pointer;
	transition: border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}

.v3-what__challenges .v3-chip {
	border-radius: 999px;
	padding-inline: 16px;
	color: var(--ink);
}

.v3-proof__index li:hover,
.v3-loop__node:hover,
.v3-what__challenges .v3-chip:hover {
	border-color: var(--ink);
	color: var(--ink);
	transform: translateY(-2px);
}

.v3-proof__index li.is-current,
.v3-loop__node.is-active,
.v3-what__challenges .v3-chip.is-hint,
.v3-what__challenges .v3-chip[aria-pressed="true"] {
	border-color: var(--cta);
	background: color-mix(in srgb, var(--cta) 16%, var(--paper));
	color: var(--ink);
}

.v3-proof__pick .icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-left: auto;
	opacity: 0.55;
	transition: transform 200ms var(--ease), opacity 200ms var(--ease), color 200ms var(--ease);
}

.v3-proof__index li:hover .icon {
	opacity: 1;
	transform: translateX(3px);
}

.v3-proof__index li.is-current .icon {
	opacity: 1;
	color: var(--cta);
}

.v3-auto-bar {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--cta);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

.is-auto:not(.is-paused) .is-auto-current > .v3-auto-bar {
	display: block;
	animation: v3-auto-fill var(--auto-ms, 5s) linear forwards;
}

.is-auto.is-held .v3-auto-bar {
	animation-play-state: paused;
}

@keyframes v3-auto-fill {
	to {
		transform: scaleX(1);
	}
}

.v3-auto-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: clamp(4px, 1.5vh, 16px);
}

.v3-auto-hint {
	color: var(--ink-3);
}

.v3-auto-hint::after {
	content: " \2192";
}

/* Pause / Play for the autoplay (WCAG 2.2.2); shown by v3.js only when autoplay runs. */
.v3-auto-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--ink-3);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.v3-auto-toggle[hidden] {
	display: none;
}

.v3-auto-toggle::before {
	content: "";
	box-sizing: border-box;
	width: 8px;
	height: 9px;
	border-inline: 3px solid currentColor;
}

.v3-auto-toggle.is-paused::before {
	width: 0;
	height: 0;
	border: 0;
	border-left: 8px solid currentColor;
	border-block: 5px solid transparent;
}

.v3-auto-toggle:hover {
	color: var(--ink);
	border-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
	.v3-proof__index li,
	.v3-loop__node,
	.v3-what__challenges .v3-chip {
		transition: none;
	}

	.v3-proof__index li:hover,
	.v3-loop__node:hover,
	.v3-what__challenges .v3-chip:hover {
		transform: none;
	}
}

/* ---------- Hero variant ?move: one-word headline "Move." ----------
   The whole word on one line across the full width, vertically centred, the glass in front
   of "ov" (the 3D redraws the word behind it, refracted; data-v3-gltext); the dot in Magenta.
   Only active with ?move (template-parts/v3-hero.php). */
.v3-hero--move .v3-hero__title {
	justify-content: center;
	font-size: clamp(5rem, min(28vw, 44svh), 26rem);
	line-height: 0.8;
	letter-spacing: -0.05em;
}

.v3-hero--move .v3-hero__line {
	max-width: none;
	margin-left: -0.05em; /* optical: the M's side bearing */
	white-space: nowrap;
}

.v3-hero__dot {
	color: var(--accent);
	letter-spacing: 0; /* negative tracking would crop the dot inside its reveal mask */
}

/* 01 Outcomes on short desktop screens: the two-line pain points must still fit one screen. */
@media (min-width: 1024px) and (min-height: 620px) and (max-height: 820px) {
	.v3-proof__pick {
		padding-block: 6px;
	}

	.v3-proof__pick {
		font-size: 0.9375rem;
	}

	.v3-proof__slot,
	.v3-proof__stage {
		min-height: clamp(200px, 38vh, 420px);
	}
}

/* The carousel dots only exist on mobile (shown in section 24). */
.v3-proof__dots {
	display: none;
}

/* ==========================================================================
   24. Mobile (under 1024px). Most visitors are on phones: dedicated layouts where
   the desktop one does not translate (Outcomes carousel, Loop step chips, leader
   rows, bottom-sheet popups), 44px tap targets, 12px minimum text, no blank gaps.
   ========================================================================== */
@media (max-width: 1023px) {
	/* Screens: natural height (the full-screen minimum left blank gaps), no snapping. */
	html {
		scroll-snap-type: none;
	}

	/* (The first screen of a page, e.g. the landing or an article, keeps its header offset.) */
	.v3-screen:not(.v3-hero):not(.v3-footer):not(:first-child) {
		min-height: 0;
		padding-block: 48px;
		scroll-margin-top: var(--header-h); /* menu links land under the floating header */
	}

	/* Single-column grids must not grow to fit a sideways-scrolling row. */
	.v3-loop__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.v3-loop__content {
		min-width: 0;
	}

	/* The 3D object: smaller stops between sections; none next to the form. */
	.v3-screen:not(#top):not(#site-footer) .v3-slot {
		flex: none;
		width: min(50vw, 200px);
		height: min(50vw, 200px);
		min-height: 0;
		max-height: none;
		margin-inline: auto;
	}

	.v3-screen#contact .v3-slot {
		display: none;
	}

	/* 01 Outcomes: swipe carousel, one card per result, the next one peeking in. */
	.v3-proof__stage {
		flex-direction: row;
		align-items: stretch;
		gap: 12px;
		margin-inline: calc(-1 * var(--gutter));
		padding: 4px var(--gutter) 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.v3-proof__stage::-webkit-scrollbar {
		display: none;
	}

	.v3-case {
		flex: 0 0 84%;
		justify-content: flex-start;
		gap: 10px;
		padding: 22px 20px;
		border: 1px solid var(--line-strong);
		background: rgba(22, 19, 43, 0.72);
		scroll-snap-align: start;
	}

	.v3-case__metric {
		font-size: clamp(3.25rem, 16vw, 5.5rem);
	}

	.v3-case__metric--words {
		font-size: clamp(2.75rem, 12vw, 4.25rem);
	}

	.v3-case__open {
		margin-top: auto;
	}

	.v3-proof__dots {
		grid-area: dots;
		display: flex;
		justify-content: center;
		margin-top: -8px;
	}

	.v3-proof__dot {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
	}

	.v3-proof__dot span {
		width: 8px;
		height: 8px;
		background: var(--line-strong);
		transition: width 300ms var(--ease), background 300ms var(--ease);
	}

	.v3-proof__dot.is-current span {
		width: 24px;
		background: var(--cta);
	}

	.v3-clients {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	/* 04 Loop: the steps become a sideways row of named chips. */
	.v3-loop__steps {
		display: flex;
		gap: 8px;
		margin-inline: calc(-1 * var(--gutter));
		padding: 4px var(--gutter);
		border-top: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.v3-loop__steps::-webkit-scrollbar {
		display: none;
	}

	.v3-loop__steps li {
		flex: none;
	}

	.v3-loop__node {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 16px;
		white-space: nowrap;
	}

	.v3-loop__node .v3-loop__node-name {
		display: inline;
	}

	.v3-loop__node .mono {
		font-size: 0.75rem;
	}

	/* Leaders: compact rows (photo, name, role) instead of three narrow columns. */
	.v3-leaders {
		grid-template-columns: 1fr;
		gap: 0;
		border-top: 1px solid var(--line);
	}

	.v3-leader {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-areas: "photo name" "photo role";
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid var(--line);
	}

	.v3-leader__photo {
		grid-area: photo;
		width: 64px;
		height: 64px;
		aspect-ratio: auto;
		margin-bottom: 0;
		font-size: 1.25rem;
	}

	.v3-leader__photo img {
		object-position: 50% 20%; /* square crop of the 4:5 portrait: keep the face */
	}

	.v3-leader__name {
		grid-area: name;
		align-self: end;
	}

	.v3-leader__role {
		grid-area: role;
		align-self: start;
		font-size: 0.75rem;
	}

	/* Tap targets: 44px minimum. */
	.v3-link,
	.v3-footer__legal a,
	.v3-footer__legal button,
	.v3-footer__contact a,
	.v3-landing__legal a,
	.v3-landing__legal button,
	.v3-tech__partners a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.v3-link {
		padding-bottom: 0;
	}

	.v3-what__challenges .v3-chip,
	.v3-chip-option .v3-chip,
	.v3-auto-toggle {
		min-height: 44px;
	}

	/* Text: 12px minimum. */
	.v3-loop__pitfalls,
	.v3-landing__legal,
	.v3-auto-toggle {
		font-size: 0.75rem;
	}
}

/* Bottom sheet popups on phones (case studies, leaders). */
@media (max-width: 640px) {
	.v3-modal {
		width: 100%;
		max-width: none;
		max-height: 88svh;
		margin: auto 0 0;
		border-radius: 28px 28px 0 0;
	}

	.v3-modal[open] {
		animation: v3-sheet-in 420ms var(--ease);
	}

	.v3-modal__inner {
		padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
	}

	/* Grabber: says "this is a sheet". */
	.v3-modal__inner::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 36px;
		height: 5px;
		margin-left: -18px;
		border-radius: 3px;
		background: rgba(255, 255, 255, 0.28);
	}

	.v3-modal__kpis {
		gap: 24px;
	}

	.v3-modal__kpis strong {
		font-size: 2rem;
	}
}

@keyframes v3-sheet-in {
	from {
		opacity: 0;
		transform: translateY(48px);
	}
}