/* ── letterwerk: eigen gehoste letters ─────────────────────────── */
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	src: url("/letterwerk/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	src: url("/letterwerk/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	src: url("/letterwerk/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	src: url("/letterwerk/poppins-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	src: url("/letterwerk/poppins-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	src: url("/letterwerk/poppins-latin-600-normal.woff2") format("woff2");
}

/* ── tokens ─────────────────────────────────────────────────────── */
:root {
	--tone-pillar: #54dd00;
	--tone-pop: #434694;
	--tone-key-active: #373b79;
	--tone-ground: #131415;
	--tone-layer: #1d1f21;
	--tone-copy: #FFFFFF;
	--tone-soft-text: #c0c0c0;
	--tone-rule: #2c2f32;
	--tone-rule-bold: #454a4e;
	--tone-grad-1: #8789c8;
	--tone-blend-b: #565ead;
	--tone-rg-banner: #8c1c13;

	--sp-step-0: 4px;
	--sp-step-1: 8px;
	--sp-step-2: 12px;
	--sp-step-3: 16px;
	--sp-step-4: 24px;
	--sp-step-5: 40px;
	--sp-step-6: 64px;
	--sp-step-7: 96px;

	--crn-pill: 9999px;
	--crn-orb: 50%;
	--crn-step-0: 0;
	--crn-step-1: 0;
	--crn-step-2: 4px;
	--crn-step-3: 12px;
	--crn-step-4: 24px;
	--crn-step-5: 32px;
	--crn-step-6: 40px;
	--crn-step-7: 48px;

	--ff-display: "Poppins", "Trebuchet MS", sans-serif;
	--ff-text: "Inter", "Segoe UI", sans-serif;

	--sz-xxl: clamp(28px, 3.5vw, 48px);
	--sz-xl-2: clamp(24px, 2.6vw, 36px);
	--sz-sub: clamp(21px, 1.9vw, 26px);
	--sz-md-2: 21px;
	--sz-sm-2: 18px;
	--sz-h6: 16px;
	--sz-copy: 19px;
	--sz-petite: 16px;
	--sz-micro: 14px;

	--lh-dense: 1.2;
	--lh-even: 1.7;
	--lh-open: 2;

	--wt-normal: 400;
	--wt-semi: 500;
	--wt-black: 600;

	--trk-snug: -0.01em;
	--trk-normal: 0;
	--trk-open: 0.02em;

	--dep-step-0: 0 1px 0 rgba(0, 0, 0, 0.10);
	--dep-step-1: 0 1px 0 rgba(0, 0, 0, 0.10);
	--dep-step-2: 0 2px 8px rgba(0, 0, 0, 0.07);
	--dep-step-3: 0 6px 16px rgba(0, 0, 0, 0.10);
	--dep-step-4: 0 12px 32px rgba(0, 0, 0, 0.14);
	--dep-step-5: 0 18px 44px rgba(0, 0, 0, 0.18);
	--dep-step-6: 0 24px 56px rgba(0, 0, 0, 0.22);
	--dep-step-7: 0 32px 72px rgba(0, 0, 0, 0.26);

	--spd-brisk: 158ms;
	--spd-mid: 330ms;
	--spd-gentle: 504ms;
	--crv-land: cubic-bezier(0.23, 0.94, 0.54, 0.97);
	--crv-launch: cubic-bezier(0.46, 0.03, 0.77, 0.06);
	--crv-smooth: cubic-bezier(0.67, 0.07, 0.38, 0.97);
	--crv-pop: cubic-bezier(0.24, 1.3, 0.57, 1.3);

	--wrp-page: 1140px;
	--wrp-inner: 1140px;
	--wrp-slim: 570px;
	--wrp-padding-desktop: 48px;
	--wrp-pad-md: 24px;
	--wrp-edge-narrow: 16px;

	--rl-slim: 1px;
	--rl-medium: 2px;
	--rl-wide: 4px;

	--hd-h-lg: 62px;
	--hd-size-mobile: 56px;

	--sec-y: 44px;
}

@media (max-width: 900px) {
	:root {
		--wrp-padding-desktop: 24px;
		--sec-y: 36px;
	}
}

@media (max-width: 600px) {
	:root {
		--sz-md-2: 19px;
		--sz-sm-2: 17px;
		--sz-h6: 15px;
		--sz-copy: 18px;
		--sz-petite: 15px;
		--sz-micro: 13px;
		--wrp-padding-desktop: 16px;
	}
}

/* ── reset + base ───────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--tone-ground);
	color: var(--tone-copy);
	display: flex;
	flex-direction: column;
	font-family: var(--ff-text);
	font-size: var(--sz-copy);
	font-weight: var(--wt-normal);
	letter-spacing: var(--trk-normal);
	line-height: var(--lh-open);
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
}

h1,
h2 {
	font-family: var(--ff-display);
	font-weight: var(--wt-black);
	letter-spacing: var(--trk-snug);
	line-height: var(--lh-dense);
}

h1 {
	font-size: var(--sz-xxl);
}

h2 {
	font-size: var(--sz-xl-2);
}

h3,
h4 {
	font-family: var(--ff-text);
	font-weight: var(--wt-black);
	line-height: var(--lh-dense);
}

h3 {
	font-size: var(--sz-sub);
}

h4 {
	font-size: var(--sz-md-2);
}

p {
	margin: 0;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
}

a {
	color: inherit;
}

button,
input,
textarea {
	font: inherit;
}

table {
	border-collapse: collapse;
	width: 100%;
}

.hoofddeel {
	background: var(--tone-ground);
	color: var(--tone-copy);
	display: block;
	flex: 1 0 auto;
}

.hoofddeel:has(> .pignon-flux) {
	display: flex;
	flex-direction: column;
}

.skip-hop {
	background: var(--tone-pillar);
	border-radius: var(--crn-step-2);
	color: var(--tone-ground);
	font-size: var(--sz-petite);
	font-weight: var(--wt-black);
	left: var(--sp-step-2);
	padding: var(--sp-step-1) var(--sp-step-3);
	position: absolute;
	text-decoration: none;
	top: -200px;
	z-index: 120;
}

.skip-hop:focus {
	top: var(--sp-step-2);
}

.sr-only {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ── beweging: onthullen (slide), aanzet (rise) ─────────────────── */
[data-appear] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--spd-mid) var(--crv-land), transform var(--spd-mid) var(--crv-land);
}

[data-appear].is-in {
	opacity: 1;
	transform: translateY(0);
}

@keyframes rise_onedun {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}

	[data-appear] {
		opacity: 1;
		transform: none;
	}
}

/* ── arabesque-warm — spelersreacties (REV-07) ──────────────────── */
.arabesque-warm {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
}

.arabesque-warm-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.arabesque-warm-chain {
	display: grid;
	gap: var(--sp-step-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block-start: var(--sp-step-5);
}

.arabesque-warm-node {
	background: var(--tone-layer);
	border: var(--rl-slim) solid var(--tone-rule);
	border-radius: var(--crn-step-3);
	color: var(--tone-copy);
	padding: var(--sp-step-4);
	transition: transform var(--spd-brisk) var(--crv-land), box-shadow var(--spd-brisk) var(--crv-land);
}

.arabesque-warm-node:hover {
	box-shadow: var(--dep-step-4);
	transform: translateY(-7px);
}

.arabesque-warm-node--high {
	background: #1b1d33;
	color: var(--tone-copy);
}

.arabesque-warm-node--mid {
	background: var(--tone-layer);
	color: var(--tone-copy);
}

.arabesque-warm-node--low {
	background: #182010;
	color: var(--tone-copy);
}

.arabesque-warm-crest {
	align-items: baseline;
	display: flex;
	gap: var(--sp-step-2);
}

.arabesque-warm-score {
	background: transparent;
	color: var(--tone-grad-1);
	font-family: var(--ff-display);
	font-size: var(--sz-xl-2);
	font-weight: var(--wt-black);
	line-height: var(--lh-dense);
}

.arabesque-warm-stars {
	color: var(--tone-pillar);
	font-size: var(--sz-petite);
	letter-spacing: var(--trk-open);
}

.arabesque-warm-quote {
	border-inline-start: var(--rl-medium) solid var(--tone-rule-bold);
	margin: var(--sp-step-2) 0 0;
	padding-inline-start: var(--sp-step-3);
}

.arabesque-warm-prose {
	color: var(--tone-copy);
	font-size: var(--sz-petite);
	line-height: var(--lh-even);
}

.arabesque-warm-extra {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-step-1) var(--sp-step-3);
	margin-block-start: var(--sp-step-2);
}

.arabesque-warm-person {
	color: var(--tone-copy);
	font-size: var(--sz-petite);
	font-weight: var(--wt-black);
}

.arabesque-warm-day {
	color: var(--tone-soft-text);
	font-size: var(--sz-micro);
}

@media (max-width: 900px) {
	.arabesque-warm-chain {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── armoire-grave — kruimelpad (BREAD-06) ──────────────────────── */
.armoire-grave {
	background: var(--tone-layer);
	color: var(--tone-copy);
	padding-block: var(--sp-step-2);
}

.armoire-grave-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-step-1);
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.armoire-grave-route {
	background: var(--tone-layer);
	border-radius: var(--crn-step-2);
	color: var(--tone-soft-text);
	font-size: var(--sz-petite);
	padding: 2px var(--sp-step-0);
	text-decoration: none;
	transition: background var(--spd-brisk) var(--crv-land), color var(--spd-brisk) var(--crv-land);
}

.armoire-grave-route:hover {
	background: var(--tone-rule);
	color: var(--tone-copy);
}

.armoire-grave-split {
	color: var(--tone-grad-1);
	font-size: var(--sz-petite);
}

.armoire-grave-here {
	background: var(--tone-layer);
	color: var(--tone-copy);
	font-size: var(--sz-petite);
}

/* ── chevet-signal — voettekst (FOOT-10) + 18+ regel (RG-07) ────── */
.chevet-signal {
	background: var(--tone-ground);
	color: var(--tone-copy);
	flex-shrink: 0;
	padding-block: var(--sec-y);
	position: relative;
}

.chevet-signal-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.chevet-signal-rgband {
	background: var(--tone-ground);
	border-block-end: var(--rl-slim) solid var(--tone-rule);
	color: var(--tone-copy);
	display: block;
	padding-block-end: var(--sp-step-4);
	text-align: center;
}

.chevet-signal-rgmark {
	align-items: center;
	background: var(--tone-rg-banner);
	border-radius: var(--crn-step-2);
	color: var(--tone-copy);
	display: inline-flex;
	font-family: var(--ff-display);
	font-size: var(--sz-petite);
	font-weight: var(--wt-black);
	justify-content: center;
	letter-spacing: var(--trk-open);
	margin-inline-end: var(--sp-step-2);
	min-height: 28px;
	padding-inline: var(--sp-step-1);
}

.chevet-signal-rgline {
	background: var(--tone-ground);
	color: var(--tone-copy);
	font-size: var(--sz-petite);
	line-height: var(--lh-even);
}

.chevet-signal-rgroute {
	background: var(--tone-ground);
	color: var(--tone-pillar);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.chevet-signal-rgroute:hover {
	background: var(--tone-ground);
	color: var(--tone-copy);
}

.chevet-signal-crown {
	align-items: center;
	border-block-end: var(--rl-slim) solid var(--tone-rule);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-step-4);
	justify-content: space-between;
	padding-block: var(--sp-step-4);
}

.chevet-signal-emblem {
	display: inline-block;
	line-height: 0;
}

.chevet-signal-emblem img {
	height: 46px;
	width: auto;
}

.chevet-signal-slogan {
	color: var(--tone-soft-text);
	font-size: var(--sz-petite);
	max-width: var(--wrp-slim);
}

.chevet-signal-grid {
	border-block-end: var(--rl-slim) solid var(--tone-rule);
	display: grid;
	gap: var(--sp-step-4);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding-block: var(--sp-step-5);
}

.chevet-signal-side {
	display: block;
}

.chevet-signal-hdr {
	color: var(--tone-copy);
	font-family: var(--ff-text);
	font-size: var(--sz-h6);
	font-weight: var(--wt-black);
	letter-spacing: var(--trk-open);
	margin: 0 0 var(--sp-step-2);
	text-transform: uppercase;
}

.chevet-signal-chain {
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.chevet-signal-node {
	line-height: var(--lh-even);
}

.chevet-signal-route {
	background: var(--tone-ground);
	border-radius: var(--crn-step-2);
	color: var(--tone-soft-text);
	font-size: var(--sz-petite);
	text-decoration: none;
	transition: background var(--spd-brisk) var(--crv-land), color var(--spd-brisk) var(--crv-land);
}

.chevet-signal-route:hover {
	background: var(--tone-rule);
	color: var(--tone-copy);
}

.chevet-signal-notice {
	border-block-end: var(--rl-slim) solid var(--tone-rule);
	color: var(--tone-soft-text);
	font-size: var(--sz-micro);
	line-height: var(--lh-even);
	padding-block: var(--sp-step-3);
}

.chevet-signal-band {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-step-2) var(--sp-step-4);
	justify-content: space-between;
	padding-block: var(--sp-step-3);
}

.chevet-signal-mark {
	background: var(--tone-ground);
	color: var(--tone-soft-text);
	font-size: var(--sz-micro);
}

.chevet-signal-perm {
	background: var(--tone-ground);
	color: var(--tone-soft-text);
	font-size: var(--sz-micro);
}

@media (max-width: 900px) {
	.chevet-signal-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.chevet-signal-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── classeur-true — oproepblok (CTA-04) ────────────────────────── */
.classeur-true {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
	text-align: center;
}

.classeur-true-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.classeur-true-nameline {
	color: var(--tone-copy);
	font-size: var(--sz-md-2);
	font-weight: var(--wt-black);
}

.classeur-true-prose {
	color: var(--tone-soft-text);
	line-height: var(--lh-open);
	margin-block: var(--sp-step-3);
}

.classeur-true-pitchwrap {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-1);
	margin-block-start: var(--sp-step-3);
}

.classeur-true-terms {
	color: var(--tone-soft-text);
	font-size: var(--sz-micro);
	max-width: var(--wrp-slim);
}

/* ── crochet-clean — auteursregel (BYLINE-01) ───────────────────── */
.crochet-clean {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
}

.crochet-clean-inner {
	align-items: center;
	display: flex;
	gap: var(--sp-step-2);
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.crochet-clean-shot {
	border-radius: var(--crn-orb);
	display: block;
	flex-shrink: 0;
	height: 48px;
	overflow: hidden;
	width: 48px;
}

.crochet-clean-shot img {
	height: 48px;
	object-fit: cover;
	object-position: center top;
	width: 48px;
}

.crochet-clean-meat {
	display: block;
}

.crochet-clean-credit {
	background: var(--tone-ground);
	color: var(--tone-soft-text);
	font-size: var(--sz-petite);
}

.crochet-clean-person {
	background: var(--tone-ground);
	color: var(--tone-pillar);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.crochet-clean-person:hover {
	background: var(--tone-ground);
	color: var(--tone-copy);
}

.crochet-clean-job {
	color: var(--tone-soft-text);
	font-size: var(--sz-micro);
	font-style: italic;
	margin-block-start: var(--sp-step-0);
}

.crochet-clean-extra {
	color: var(--tone-soft-text);
	font-size: var(--sz-micro);
	margin-block-start: var(--sp-step-0);
}

.crochet-clean-day {
	background: var(--tone-ground);
	color: var(--tone-soft-text);
}

.crochet-clean-dot {
	background: var(--tone-ground);
	color: var(--tone-soft-text);
}

/* ── encart-fast — kaartenreeks (GRID-12) ───────────────────────── */
.encart-fast {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
}

.encart-fast-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.encart-fast-chain {
	display: block;
	margin-block-start: var(--sp-step-5);
}

.encart-fast-node {
	border-block-end: var(--rl-slim) solid var(--tone-rule);
	display: flex;
	gap: var(--sp-step-4);
	padding-block: var(--sp-step-4);
	transition: transform var(--spd-brisk) var(--crv-land);
}

.encart-fast-node:hover {
	transform: translateY(-7px);
}

.encart-fast-initial {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: var(--tone-pop);
	border-radius: var(--crn-step-3);
	color: var(--tone-copy);
	display: flex;
	flex-shrink: 0;
	font-family: var(--ff-display);
	font-size: var(--sz-xxl);
	font-weight: var(--wt-black);
	justify-content: center;
	line-height: var(--lh-dense);
	width: 120px;
}

.encart-fast-meat {
	display: block;
}

.encart-fast-nameline {
	color: var(--tone-copy);
	font-size: var(--sz-md-2);
	font-weight: var(--wt-black);
}

.encart-fast-prose {
	color: var(--tone-soft-text);
	line-height: var(--lh-even);
	margin-block-start: var(--sp-step-1);
}

.encart-fast-route {
	background: var(--tone-ground);
	color: var(--tone-pillar);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.encart-fast-route:hover {
	background: var(--tone-ground);
	color: var(--tone-copy);
}

@media (max-width: 600px) {
	.encart-fast-node {
		flex-direction: column;
	}

	.encart-fast-initial {
		width: 80px;
	}
}

/* ── fiche-alt — eerste scherm (HERO-09) ────────────────────────── */
.fiche-alt {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
}

.fiche-alt-inner {
	display: grid;
	gap: var(--sp-step-6);
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-block: var(--sp-step-5);
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.fiche-alt-meat {
	animation: rise_onedun var(--spd-gentle) var(--crv-land) both;
	display: block;
}

.fiche-alt-under {
	color: var(--tone-soft-text);
	line-height: var(--lh-even);
	margin-block-start: var(--sp-step-3);
	max-width: var(--wrp-slim);
}

.fiche-alt-pitchwrap {
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-1);
	margin-block-start: var(--sp-step-4);
}

.fiche-alt-terms {
	color: var(--tone-soft-text);
	font-size: var(--sz-micro);
	max-width: var(--wrp-slim);
}

.fiche-alt-facets {
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fiche-alt-facet {
	align-items: center;
	background: var(--tone-layer);
	border: var(--rl-slim) solid var(--tone-rule);
	border-radius: var(--crn-step-3);
	color: var(--tone-copy);
	display: flex;
	gap: var(--sp-step-3);
	padding: var(--sp-step-3);
	transition: transform var(--spd-brisk) var(--crv-land), box-shadow var(--spd-brisk) var(--crv-land);
}

.fiche-alt-facet:hover {
	box-shadow: var(--dep-step-3);
	transform: translateY(-7px);
}

.fiche-alt-tally {
	background: var(--tone-layer);
	color: var(--tone-grad-1);
	flex-shrink: 0;
	font-family: var(--ff-display);
	font-size: var(--sz-sub);
	font-weight: var(--wt-black);
	line-height: var(--lh-dense);
}

.fiche-alt-nameline {
	color: var(--tone-copy);
	font-size: var(--sz-petite);
	font-weight: var(--wt-black);
	line-height: var(--lh-dense);
}

@media (max-width: 900px) {
	.fiche-alt-inner {
		gap: var(--sp-step-5);
		grid-template-columns: minmax(0, 1fr);
		padding-block: var(--sp-step-4);
	}
}

/* ── filigree-classic — veelgestelde vragen (FAQ-04) ────────────── */
.filigree-classic {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
}

.filigree-classic-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.filigree-classic-chain {
	display: block;
	margin-block-start: var(--sp-step-5);
}

.filigree-classic-node {
	border-block-end: var(--rl-slim) solid var(--tone-rule);
}

.filigree-classic-ask {
	align-items: start;
	cursor: pointer;
	display: grid;
	gap: var(--sp-step-2);
	grid-template-columns: 60px minmax(0, 1fr) 24px;
	list-style: none;
	padding-block: var(--sp-step-3);
}

.filigree-classic-ask::-webkit-details-marker {
	display: none;
}

.filigree-classic-ask::after {
	border-inline-end: var(--rl-medium) solid var(--tone-grad-1);
	border-block-end: var(--rl-medium) solid var(--tone-grad-1);
	content: "";
	height: 10px;
	margin-block-start: 6px;
	transform: rotate(45deg);
	transition: transform var(--spd-brisk) var(--crv-smooth);
	width: 10px;
}

.filigree-classic-node[open] > .filigree-classic-ask::after {
	transform: rotate(-135deg);
}

.filigree-classic-tally {
	background: var(--tone-ground);
	color: var(--tone-grad-1);
	font-family: var(--ff-display);
	font-size: var(--sz-sub);
	font-weight: var(--wt-black);
	line-height: var(--lh-dense);
}

.filigree-classic-nameline {
	color: var(--tone-copy);
	font-size: var(--sz-sm-2);
	font-weight: var(--wt-black);
	line-height: var(--lh-even);
}

.filigree-classic-reply {
	display: grid;
	gap: var(--sp-step-2);
	grid-template-columns: 60px minmax(0, 1fr);
	overflow: hidden;
	padding-block-end: var(--sp-step-3);
	transition: height var(--spd-mid) var(--crv-smooth);
}

.filigree-classic-reply::before {
	content: "";
	display: block;
}

.filigree-classic-prose {
	color: var(--tone-soft-text);
	line-height: var(--lh-even);
}

@media (max-width: 600px) {
	.filigree-classic-ask {
		grid-template-columns: 36px minmax(0, 1fr) 20px;
	}

	.filigree-classic-reply {
		grid-template-columns: 36px minmax(0, 1fr);
	}
}

/* ── fresque-deep — juridische tekst (LEGAL-04) ─────────────────── */
.fresque-deep {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
}

.fresque-deep-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.fresque-deep-slab {
	background: var(--tone-layer);
	border: var(--rl-slim) solid var(--tone-rule);
	border-radius: var(--crn-step-4);
	box-shadow: var(--dep-step-2);
	color: var(--tone-copy);
	padding: var(--sp-step-5);
	position: relative;
}

.fresque-deep-stamp {
	background: var(--tone-layer);
	color: var(--tone-soft-text);
	display: block;
	font-size: var(--sz-micro);
	margin-block-end: var(--sp-step-3);
	text-align: end;
}

.fresque-deep-lead {
	color: var(--tone-copy);
	line-height: var(--lh-even);
}

.fresque-deep-part {
	margin-block-start: var(--sp-step-5);
}

.fresque-deep-hdr {
	color: var(--tone-copy);
	font-size: var(--sz-sub);
	margin-block-end: var(--sp-step-2);
}

.fresque-deep-part p {
	background: var(--tone-layer);
	color: var(--tone-soft-text);
	line-height: var(--lh-even);
	margin-block-start: var(--sp-step-2);
}

.fresque-deep-route {
	background: var(--tone-layer);
	color: var(--tone-pillar);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fresque-deep-route:hover {
	background: var(--tone-layer);
	color: var(--tone-copy);
}

.fresque-deep-chain {
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-2);
	list-style: disc;
	margin: 0;
	padding-inline-start: var(--sp-step-4);
}

.fresque-deep-node {
	color: var(--tone-soft-text);
	line-height: var(--lh-even);
}

.fresque-deep-caveat {
	background: var(--tone-layer);
	border-block-start: var(--rl-slim) solid var(--tone-rule);
	color: var(--tone-soft-text);
	font-size: var(--sz-petite);
	line-height: var(--lh-even);
	margin-block-start: var(--sp-step-5);
	padding-block-start: var(--sp-step-3);
}

@media (max-width: 600px) {
	.fresque-deep-slab {
		padding: var(--sp-step-4);
	}
}

/* ── linteau-opus — paginakop (PHEAD-07) ────────────────────────── */
.linteau-opus {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
}

.linteau-opus-inner {
	display: grid;
	gap: var(--sp-step-4);
	grid-template-columns: 120px minmax(0, 1fr);
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.linteau-opus-tally {
	align-self: start;
	background: var(--tone-ground);
	color: var(--tone-grad-1);
	font-family: var(--ff-display);
	font-size: calc(var(--sz-xxl) * 1.4);
	font-weight: var(--wt-black);
	line-height: var(--lh-dense);
}

.linteau-opus-meat {
	display: block;
}

.linteau-opus-under {
	color: var(--tone-soft-text);
	font-size: var(--sz-sm-2);
	font-style: italic;
	line-height: var(--lh-even);
	margin-block-start: var(--sp-step-2);
}

@media (max-width: 600px) {
	.linteau-opus-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-step-2);
	}
}

/* ── medaillon-cool — kop van de site (HEAD-CENTER) ─────────────── */
.medaillon-cool {
	background: var(--tone-ground);
	color: var(--tone-copy);
	position: relative;
	z-index: 60;
}

.medaillon-cool-crest {
	align-items: center;
	background: var(--tone-ground);
	display: flex;
	min-height: 62px;
}

.medaillon-cool-inner {
	align-items: center;
	display: flex;
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	position: relative;
	width: 100%;
}

.medaillon-cool-crest > .medaillon-cool-inner {
	justify-content: center;
	min-height: 62px;
}

.medaillon-cool-menu-opener {
	align-items: center;
	background: var(--tone-layer);
	border: var(--rl-slim) solid var(--tone-rule-bold);
	border-radius: var(--crn-step-2);
	color: var(--tone-copy);
	cursor: pointer;
	display: none;
	height: 44px;
	inset-inline-start: var(--wrp-padding-desktop);
	justify-content: center;
	position: absolute;
	width: 44px;
}

.medaillon-cool-lines {
	background: var(--tone-copy);
	display: block;
	height: 2px;
	position: relative;
	width: 20px;
}

.medaillon-cool-lines::before {
	background: var(--tone-copy);
	content: "";
	height: 2px;
	inset-block-start: -6px;
	inset-inline-start: 0;
	position: absolute;
	width: 20px;
}

.medaillon-cool-emblem {
	background: var(--tone-layer);
	border: var(--rl-slim) solid var(--tone-rule);
	border-radius: var(--crn-step-2);
	color: var(--tone-copy);
	display: inline-block;
	line-height: 0;
	padding: 4px 10px;
}

.medaillon-cool-emblem img {
	height: 52px;
	width: auto;
}

.medaillon-cool-band {
	background: var(--tone-ground);
	border-block-start: var(--rl-slim) solid var(--tone-rule);
	display: flex;
}

.medaillon-cool-band > .medaillon-cool-inner {
	justify-content: center;
	min-height: 44px;
}

.medaillon-cool-links {
	max-width: 100%;
}

.medaillon-cool-chain {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--sp-step-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.medaillon-cool-node {
	flex-shrink: 0;
}

.medaillon-cool-node[hidden] {
	display: none;
}

.medaillon-cool-route {
	background: var(--tone-ground);
	border-block-start: var(--rl-medium) solid transparent;
	color: var(--tone-copy);
	display: block;
	font-size: 16px;
	font-weight: 600;
	padding-block: var(--sp-step-2);
	text-decoration: none;
	transition: color var(--spd-brisk) var(--crv-land);
	white-space: nowrap;
}

.medaillon-cool-route:hover {
	background: var(--tone-ground);
	color: var(--tone-pillar);
}

.medaillon-cool-route[aria-current="page"] {
	border-block-start-color: var(--tone-pillar);
	color: var(--tone-pillar);
}

.medaillon-cool-nodemore {
	flex-shrink: 0;
	position: relative;
}

.medaillon-cool-nodemore[hidden] {
	display: none;
}

.medaillon-cool-more {
	background: var(--tone-ground);
	border: 0;
	border-block-start: var(--rl-medium) solid transparent;
	color: var(--tone-copy);
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	min-height: 44px;
	padding-block: var(--sp-step-2);
	white-space: nowrap;
}

.medaillon-cool-more:hover {
	background: var(--tone-ground);
	color: var(--tone-pillar);
}

.medaillon-cool-stack {
	background: var(--tone-layer);
	border: var(--rl-slim) solid var(--tone-rule-bold);
	border-radius: var(--crn-step-2);
	box-shadow: var(--dep-step-4);
	display: none;
	inset-block-start: 100%;
	inset-inline-end: 0;
	list-style: none;
	margin: 0;
	max-height: 60vh;
	min-width: 220px;
	overflow-y: auto;
	padding: var(--sp-step-1);
	position: absolute;
	z-index: 70;
}

.medaillon-cool-stack.is-open {
	display: block;
}

.medaillon-cool-stack .medaillon-cool-route {
	background: var(--tone-layer);
	border-block-start: 0;
	padding: var(--sp-step-1) var(--sp-step-2);
	white-space: nowrap;
}

.medaillon-cool-stack .medaillon-cool-route:hover {
	background: var(--tone-layer);
	color: var(--tone-pillar);
}

.medaillon-cool-pane {
	background: var(--tone-ground);
	border-block-start: var(--rl-slim) solid var(--tone-rule);
	display: none;
}

.medaillon-cool-pane.is-open {
	display: block;
}

.medaillon-cool-panelinks {
	display: block;
}

.medaillon-cool-panechain {
	list-style: none;
	margin: 0;
	max-height: 62vh;
	overflow-y: auto;
	padding: 0;
}

.medaillon-cool-panenode {
	display: block;
}

.medaillon-cool-paneroute {
	background: var(--tone-ground);
	border-block-end: var(--rl-slim) solid var(--tone-rule);
	color: var(--tone-copy);
	display: block;
	font-size: var(--sz-petite);
	font-weight: 600;
	min-height: 48px;
	padding: var(--sp-step-2) var(--wrp-padding-desktop);
	text-decoration: none;
}

.medaillon-cool-paneroute:hover {
	background: var(--tone-layer);
	color: var(--tone-pillar);
}

.medaillon-cool-paneroute[aria-current="page"] {
	background: var(--tone-layer);
	color: var(--tone-pillar);
}

.medaillon-cool.is-shrunk .medaillon-cool-emblem img {
	height: 42px;
	transition: height var(--spd-brisk) var(--crv-land);
}

@media (max-width: 900px) {
	.medaillon-cool-menu-opener {
		display: inline-flex;
	}

	.medaillon-cool-band {
		display: none;
	}
}

/* ── paroi-noble — cookiemelding (COOK-09) ──────────────────────── */
.paroi-noble {
	inset-block-end: var(--sp-step-4);
	inset-inline-end: auto;
	inset-inline-start: var(--sp-step-4);
	max-width: min(420px, calc(100vw - 2 * var(--sp-step-4)));
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transform: translateX(-130%);
	transition: transform var(--spd-mid) var(--crv-smooth), opacity var(--spd-brisk) var(--crv-land), visibility var(--spd-mid);
	visibility: hidden;
	z-index: 90;
}

.paroi-noble.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
	visibility: visible;
}

.paroi-noble-slab {
	background: var(--tone-layer);
	border-inline-start: var(--rl-wide) solid var(--tone-pillar);
	border-end-end-radius: var(--crn-step-2);
	border-start-end-radius: var(--crn-step-2);
	box-shadow: var(--dep-step-4);
	color: var(--tone-copy);
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-2);
	padding: var(--sp-step-4);
}

.paroi-noble-line {
	background: var(--tone-layer);
	color: var(--tone-copy);
	font-size: var(--sz-petite);
	line-height: var(--lh-even);
}

.paroi-noble-acts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-step-2);
	justify-content: flex-start;
}

.paroi-noble-agree {
	background: var(--tone-pillar);
	border: 0;
	border-radius: var(--crn-step-2);
	color: var(--tone-ground);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	font-family: var(--ff-display);
	font-size: var(--sz-micro);
	font-weight: var(--wt-black);
	letter-spacing: var(--trk-open);
	min-height: 40px;
	padding-inline: var(--sp-step-3);
}

.paroi-noble-agree:hover {
	background: var(--tone-copy);
	color: var(--tone-ground);
}

.paroi-noble-deny {
	background: var(--tone-ground);
	border: var(--rl-slim) solid var(--tone-rule-bold);
	border-radius: var(--crn-step-2);
	color: var(--tone-copy);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	font-family: var(--ff-display);
	font-size: var(--sz-micro);
	font-weight: var(--wt-black);
	letter-spacing: var(--trk-open);
	min-height: 40px;
	padding-inline: var(--sp-step-3);
}

.paroi-noble-deny:hover {
	background: var(--tone-rule);
	color: var(--tone-copy);
}

@media (max-width: 700px) {
	.paroi-noble {
		inset-inline: var(--sp-step-2);
		max-width: none;
	}

	.paroi-noble-agree,
	.paroi-noble-deny {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ── perron-brace — voorwaardenstrook + anker ───────────────────── */
.perron-brace {
	align-items: center;
	background: var(--tone-layer);
	border-block: var(--rl-slim) solid var(--tone-rule);
	color: var(--tone-soft-text);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-step-2);
	justify-content: center;
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding: var(--sp-step-2) var(--wrp-padding-desktop);
	scroll-margin-top: var(--sp-step-5);
	width: 100%;
}

.perron-mark {
	align-items: center;
	background: var(--tone-rg-banner);
	border-radius: var(--crn-step-2);
	color: var(--tone-copy);
	display: inline-flex;
	font-family: var(--ff-display);
	font-size: var(--sz-micro);
	font-weight: var(--wt-black);
	justify-content: center;
	min-height: 26px;
	padding-inline: var(--sp-step-1);
}

.perron-note {
	background: var(--tone-layer);
	color: var(--tone-soft-text);
	font-size: var(--sz-micro);
	line-height: var(--lh-even);
	text-align: center;
}

/* ── pignon-flux — foutblok (ERR-07) ────────────────────────────── */
.pignon-flux {
	background-color: var(--tone-ground);
	background-image: linear-gradient(rgba(135, 137, 200, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(135, 137, 200, 0.09) 1px, transparent 1px);
	background-size: 40px 40px;
	color: var(--tone-copy);
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--sp-step-7);
}

.pignon-flux-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	text-align: center;
	width: 100%;
}

.pignon-flux-tally {
	background: transparent;
	color: var(--tone-grad-1);
	display: block;
	font-family: var(--ff-display);
	font-size: clamp(64px, 16vw, 132px);
	font-weight: var(--wt-black);
	line-height: var(--lh-dense);
}

.pignon-flux-nameline {
	color: var(--tone-copy);
	margin-block-start: var(--sp-step-3);
	margin-inline: auto;
	max-width: var(--wrp-slim);
}

.pignon-flux-prose {
	color: var(--tone-soft-text);
	line-height: var(--lh-even);
	margin-block-start: var(--sp-step-3);
	margin-inline: auto;
	max-width: var(--wrp-slim);
}

.pignon-flux-return {
	align-items: center;
	background: var(--tone-pop);
	border-radius: var(--crn-step-2);
	color: var(--tone-copy);
	display: inline-flex;
	font-family: var(--ff-display);
	font-weight: var(--wt-black);
	margin-block-start: var(--sp-step-4);
	min-height: 48px;
	padding-inline: var(--sp-step-5);
	text-decoration: none;
	transition: transform var(--spd-brisk) var(--crv-land), background var(--spd-brisk) var(--crv-land);
}

.pignon-flux-return:hover {
	background: var(--tone-key-active);
	color: var(--tone-copy);
	transform: translateY(-7px);
}

/* ── plaque-grand — lopende tekst (PROSE-06, gecentreerd) ───────── */
.plaque-grand {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
	text-align: center;
}

.plaque-grand-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.plaque-grand h2 {
	color: var(--tone-copy);
	font-size: var(--sz-sub);
	font-weight: var(--wt-normal);
	margin-block-start: var(--sp-step-5);
	margin-block-end: var(--sp-step-2);
}

.plaque-grand-sub {
	color: var(--tone-copy);
	font-size: var(--sz-md-2);
	margin-block-start: var(--sp-step-4);
}

.plaque-grand p {
	background: var(--tone-ground);
	color: var(--tone-soft-text);
	line-height: var(--lh-open);
	margin-block-start: var(--sp-step-2);
}

.plaque-grand-route {
	background: var(--tone-ground);
	color: var(--tone-pillar);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: background var(--spd-brisk) var(--crv-land), color var(--spd-brisk) var(--crv-land);
}

.plaque-grand-route:hover {
	background: var(--tone-pillar);
	color: var(--tone-ground);
}

.plaque-grand-chain {
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-1);
	list-style: none;
	margin: var(--sp-step-2) 0 0;
	padding: 0;
}

.plaque-grand-node {
	color: var(--tone-soft-text);
	line-height: var(--lh-even);
}

.plaque-grand-pitchwrap {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-1);
	margin-block: var(--sp-step-5);
}

.plaque-grand-terms {
	color: var(--tone-soft-text);
	font-size: var(--sz-micro);
	max-width: var(--wrp-slim);
}

/* ── pulpit-flux — tabel (TABLE-05) ─────────────────────────────── */
.pulpit-flux {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
}

.pulpit-flux-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.pulpit-flux-scroll {
	margin-block-start: var(--sp-step-5);
	overflow-x: auto;
}

.pulpit-flux-grid {
	min-width: 620px;
}

.pulpit-flux-grid th {
	background: var(--tone-layer);
	color: var(--tone-copy);
	font-size: var(--sz-micro);
	font-weight: var(--wt-black);
	letter-spacing: var(--trk-open);
	padding: var(--sp-step-2);
	text-align: start;
	text-transform: uppercase;
}

.pulpit-flux-grid td {
	background: var(--tone-ground);
	border-block-end: var(--rl-slim) solid var(--tone-rule);
	color: var(--tone-soft-text);
	font-size: var(--sz-petite);
	line-height: var(--lh-even);
	padding: var(--sp-step-1) var(--sp-step-2);
	vertical-align: top;
}

/* ── spread-core — contactformulier (FORM-02) ───────────────────── */
.spread-core {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
}

.spread-core-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.spread-core-duo {
	align-items: start;
	display: grid;
	gap: var(--sp-step-5);
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.spread-core-aside {
	background: var(--tone-layer);
	border: var(--rl-slim) solid var(--tone-rule);
	border-radius: var(--crn-step-3);
	color: var(--tone-copy);
	padding: var(--sp-step-4);
}

.spread-core-hdr {
	color: var(--tone-copy);
	font-size: var(--sz-sub);
	margin-block-end: var(--sp-step-2);
}

.spread-core-prose {
	background: var(--tone-layer);
	color: var(--tone-soft-text);
	font-size: var(--sz-petite);
	line-height: var(--lh-even);
}

.spread-core-chain {
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-1);
	list-style: none;
	margin: var(--sp-step-3) 0 0;
	padding: 0;
}

.spread-core-node {
	line-height: var(--lh-even);
}

.spread-core-route {
	background: var(--tone-layer);
	color: var(--tone-pillar);
	font-size: var(--sz-petite);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.spread-core-route:hover {
	background: var(--tone-layer);
	color: var(--tone-copy);
}

.spread-core-sheet {
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-3);
}

.spread-core-box {
	display: flex;
	flex-direction: column;
	gap: var(--sp-step-0);
}

.spread-core-tag {
	color: var(--tone-soft-text);
	font-size: var(--sz-petite);
}

.spread-core-entry {
	background: var(--tone-ground);
	border: var(--rl-slim) solid var(--tone-rule-bold);
	border-radius: var(--crn-step-3);
	color: var(--tone-copy);
	min-height: 48px;
	padding: var(--sp-step-2) var(--sp-step-3);
	width: 100%;
}

.spread-core-entry:focus {
	border-color: var(--tone-pillar);
	outline: none;
}

textarea.spread-core-entry {
	min-height: 140px;
	resize: vertical;
}

.spread-core-send {
	align-items: center;
	align-self: flex-start;
	background: var(--tone-pop);
	border: 0;
	border-radius: var(--crn-step-3);
	color: var(--tone-copy);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--ff-display);
	font-weight: var(--wt-black);
	letter-spacing: var(--trk-open);
	min-height: 48px;
	padding-inline: var(--sp-step-5);
	transition: transform var(--spd-brisk) var(--crv-land), background var(--spd-brisk) var(--crv-land);
}

.spread-core-send:hover {
	background: var(--tone-key-active);
	color: var(--tone-copy);
	transform: translateY(-7px);
}

.spread-core-done {
	background: #14301c;
	border: var(--rl-slim) solid #2f7a45;
	border-radius: var(--crn-step-3);
	color: var(--tone-copy);
	display: none;
	font-size: var(--sz-petite);
	padding: var(--sp-step-3);
}

.spread-core-done.is-visible {
	display: block;
}

@media (max-width: 900px) {
	.spread-core-duo {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── veranda-zone — auteurskaart (AUTH-08) ──────────────────────── */
.veranda-zone {
	background: var(--tone-ground);
	color: var(--tone-copy);
	padding-block: var(--sec-y);
}

.veranda-zone-inner {
	margin-inline: auto;
	max-width: calc(var(--wrp-page) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
	width: 100%;
}

.veranda-zone-brick {
	align-items: center;
	background: var(--tone-layer);
	border: var(--rl-slim) solid var(--tone-rule);
	border-radius: var(--crn-pill);
	color: var(--tone-copy);
	display: inline-flex;
	gap: var(--sp-step-2);
	padding: var(--sp-step-1) var(--sp-step-4) var(--sp-step-1) var(--sp-step-1);
}

.veranda-zone-shot {
	border-radius: var(--crn-orb);
	display: block;
	flex-shrink: 0;
	height: 40px;
	overflow: hidden;
	width: 40px;
}

.veranda-zone-shot img {
	height: 40px;
	object-fit: cover;
	object-position: center top;
	width: 40px;
}

.veranda-zone-meat {
	display: block;
}

.veranda-zone-person {
	background: var(--tone-layer);
	color: var(--tone-copy);
	display: block;
	font-size: var(--sz-petite);
	font-weight: var(--wt-black);
	line-height: var(--lh-dense);
}

.veranda-zone-job {
	background: var(--tone-layer);
	color: var(--tone-soft-text);
	display: block;
	font-size: var(--sz-micro);
}

.veranda-zone-skills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-step-1);
	list-style: none;
	margin: var(--sp-step-4) 0 0;
	padding: 0;
}

.veranda-zone-skill {
	background: var(--tone-pop);
	border-radius: var(--crn-pill);
	color: var(--tone-copy);
	font-size: var(--sz-micro);
	padding: var(--sp-step-0) var(--sp-step-3);
}
/* ── offerknoppen: haakklassen per blok ─────────────────────────── */
.fiche-alt-pitch {
	align-self: flex-start;
	max-width: 100%;
	text-align: center;
}

.plaque-grand-pitch {
	max-width: 100%;
	text-align: center;
}

.classeur-true-pitch {
	max-width: 100%;
	text-align: center;
}

/* Offer CTA */
.crfq-act{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 30px;border:1px solid #131415;border-radius:0;
  background:#0891B2;color:#131415;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  transition:background .12s ease,color .12s ease,transform .12s ease,box-shadow .12s ease}
.crfq-act:hover{background:#0E7490;color:#FFFFFF;animation:none}
.crfq-act:hover::after{animation:none}
.crfq-act:active{background:#155E75;color:#FFFFFF}
.crfq-act:focus-visible{outline:3px solid #131415;outline-offset:3px}
.crfq-act{animation:lift_crfq 2.3s ease-in-out infinite}
@keyframes lift_crfq{0%{transform:translateY(0)}21.739%{transform:translateY(-5px)}43.478%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.crfq-act,.crfq-act::after{animation:none!important;transition:none!important}}

@media (max-width: 916px) {
  .medaillon-cool-band,
  .medaillon-cool-links,
  .medaillon-cool-chain,
  .medaillon-cool-route { display: none !important; }
  .medaillon-cool-menu-opener { display: flex !important; }
}

/* Из правила выше убран .medaillon-cool-inner — это обёртка шапки, внутри
   которой лежит и кнопка меню: с display:none она получала размер 0×0,
   и мобильное меню было недоступно. */

/* ---- картинки внутри страниц ----
   Кадры бывают квадратные и вертикальные, поэтому ограничиваем и по ширине,
   и по высоте, но не режем — картинка вписывается целиком. */
.arabesque-warm-page-figure,
.plaque-grand-page-figure {
	margin: var(--sp-step-5) auto;
	max-width: 560px;
	border-radius: var(--crn-step-3);
	overflow: hidden;
	border: var(--rl-slim) solid var(--tone-rule);
}
.arabesque-warm-page-figure img,
.plaque-grand-page-figure img {
	display: block;
	max-width: 100%;
	max-height: 56vh;
	width: auto;
	height: auto;
	margin-inline: auto;
}