/* ==========================================================================
   Ealan V3: dark cinematic.
   Obsidian ground, one morphing glass object (morph3d.js, fixed canvas behind the
   content, drawn as the page background), oversized Montserrat, 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;
	--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: "Montserrat", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;

	--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(--accent);
	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 Montserrat in Ealan Green, one word per heading. */
.v3-em {
	font-style: italic;
	font-weight: 700;
	color: var(--key);
}

.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(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.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(--accent);
}

.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. Pinned screens (proof, loop): sticky stage, one viewport per step ---------- */
.v3-pin {
	width: 100%;
}

@media (min-width: 1024px) and (min-height: 620px) {
	.v3-screen[data-v3-pin],
	.v3-screen[data-loop-pin] {
		display: block;
		min-height: 0;
		height: calc(var(--pin-steps, var(--loop-steps, 1)) * 100svh);
		padding: 0;
	}

	.v3-pin {
		position: sticky;
		top: 0;
		height: 100svh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		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;
}

.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;
	}
}

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

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

/* ---------- 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);
}

.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;
}

.v3-hero__line--b {
	align-self: flex-end;
	text-align: right;
}

/* 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: grid;
	grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 0.9fr);
	align-items: end;
	gap: clamp(20px, 3vw, 56px);
	padding-top: clamp(14px, 2.4vh, 24px);
	border-top: 1px solid var(--line);
}

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

.v3-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
}

.v3-hero__stats {
	display: flex;
	justify-content: flex-end;
	gap: clamp(24px, 3.5vw, 56px);
	margin: 0;
}

.v3-hero__stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
}

.v3-hero__stat dt {
	font-size: 0.875rem;
	color: var(--ink-3);
}

.v3-hero__stat dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
	color: var(--ink);
	line-height: 1;
}


/* ---------- 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__head .v3-label {
	flex-basis: 100%;
}

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

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

.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);
}

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

.v3-case__open {
	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__index {
	grid-area: index;
	align-self: center;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}

.v3-proof__index li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	line-height: 1.3;
	text-wrap: balance;
	padding: clamp(8px, 1.4vh, 14px) 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink-3);
	cursor: pointer;
	transition: color 300ms var(--ease), padding 300ms var(--ease);
}

.v3-proof__index li.is-current {
	color: var(--ink);
	padding-left: 12px;
	box-shadow: inset 3px 0 0 var(--accent);
	font-weight: 600;
}

.v3-proof__index::after {
	content: attr(data-hint);
	padding-top: 12px;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.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;
	color: var(--ink-2);
	white-space: nowrap;
	animation: v3-marquee 45s linear infinite;
}

/* Client logos: white silhouettes on Obsidian, colour on hover. */
.v3-clients__list li {
	display: flex;
	align-items: center;
}

.v3-clients__logo {
	height: 28px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.6;
	transition: filter 300ms var(--ease), opacity 300ms var(--ease);
}

.v3-clients__list li:hover .v3-clients__logo {
	filter: none;
	opacity: 1;
}

.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(--key);
}

.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 */
}

/* Challenge chips read as buttons: pointer cursor, lift on hover. */
.v3-what__challenges {
	position: relative;
}

.v3-what__challenges .v3-chip {
	cursor: pointer;
	transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

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

/* Attract loop (v3.js): the demo pointer and the chip it "taps". */
.v3-tap {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	color: var(--ink);
	pointer-events: none;
	opacity: 0;
	transition: transform 650ms var(--ease-io), opacity 300ms var(--ease);
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

.v3-tap svg {
	display: block;
	transform-origin: 20% 10%;
}

.is-attracting .v3-tap {
	opacity: 1;
}

.v3-tap.is-tapping svg {
	animation: v3-tap 600ms var(--ease);
}

.v3-tap::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	border: 2px solid var(--accent);
	opacity: 0;
}

.v3-tap.is-tapping::before {
	animation: v3-ripple 700ms var(--ease) 120ms;
}

@keyframes v3-tap {
	0%,
	100% {
		transform: scale(1);
	}
	40% {
		transform: scale(0.82);
	}
}

@keyframes v3-ripple {
	0% {
		opacity: 0.9;
		transform: scale(0.6);
	}
	100% {
		opacity: 0;
		transform: scale(4);
	}
}

.v3-what__challenges .v3-chip.is-hint {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

.is-touched .v3-tap,
.is-static-hint .v3-tap {
	display: none;
}

.is-static-hint:not(.is-touched) .v3-chip:first-of-type {
	border-color: var(--accent);
}

/* 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, rgba(232, 67, 140, 0.1), 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(--accent);
}

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

.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));
	margin-top: clamp(4px, 1.5vh, 16px);
	border-top: 1px solid var(--line);
}

.v3-loop__node {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 10px 8px 6px 0;
	text-align: left;
	font-size: 0.875rem;
	color: var(--ink-3);
	transition: color 300ms var(--ease);
}

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

.v3-loop__node:hover,
.v3-loop__node.is-active {
	color: var(--ink);
}

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

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

.v3-loop__progress {
	height: 2px;
	background: var(--line);
	margin-top: -1px;
}

.v3-loop__progress span {
	display: block;
	height: 100%;
	width: calc((var(--step, 0) + 1) / var(--n, 5) * 100%);
	background: linear-gradient(90deg, var(--accent), var(--key));
	transition: width 700ms var(--ease);
}

.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);
}

/* ---------- 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;
}

.v3-culture__slot {
	width: 100%;
	height: clamp(140px, 24vh, 300px);
}

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

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

.v3-leader__photo {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	max-height: 22vh;
	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;
	color: var(--ink);
	line-height: 1.3;
}

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

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

/* ---------- 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;
}

.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(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

/* ---------- 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 {
		grid-template-columns: 1fr;
	}

	.v3-hero__bottom {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.v3-hero__stats {
		justify-content: flex-start;
	}

	.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" "clients";
	}

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

	.v3-proof__index {
		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__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;
	}
}

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

/* ---------- 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 */
}