/*
Theme Name: GeenBewijs.nl
Theme URI: https://geenbewijs.nl/
Author: SiteJob
Author URI: https://sitejob.nl/
Description: Maatwerkthema voor GeenBewijs.nl. Geen paginabouwer, zelf-gehoste fonts, licht en donker thema, SEO/GEO-first. Homepage, blog- en kennisbanksjabloon met een gedeelde blokkenbibliotheek.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: geenbewijs
Tags: custom-logo, custom-menu, featured-images, block-patterns, editor-style, wide-blocks, accessibility-ready, translation-ready
*/

/* ==========================================================================
   1. Tokens — HIER BEGIN JE PER KLANT

   Twee lagen. Onderin de merkkleuren, die per klant vastliggen. Daarboven
   betekenis-tokens (--bg, --surface, --text): componenten gebruiken alleen
   die. Zo vraagt een donkere sectie of het donkere thema niets anders dan een
   andere set waarden — geen enkele component hoeft mee te veranderen.

   De set hieronder is bewust neutraal. Vervang alleen het blok "Merk" en de
   twee donker-blokken; de rest van dit bestand kan blijven staan.
   ========================================================================== */

:root {
	/*
	 * Merk — afgeleid van geenbewijs.nl. Eén rood, en dat rood is alarm:
	 * de termijn, de belknop, de streep onder de H1. Niets anders.
	 * Zodra het rood ook decoratie wordt, betekent het niets meer.
	 */
	--brand:       #CF000F;
	--brand-deep:  #A8000B;
	--brand-light: #FF706A;
	--night:       #211A19;
	--night-deep:  #150D0C;

	/* Neutralen — warm, met een zweem van het rood erin. Geen kille grijzen:
	   die maken van een advocatenkantoor een softwarebedrijf. */
	--ink:       #211A19;
	--ink-soft:  #57504F;
	--paper:     #FEFDFC;
	--white:     #FFFFFF;
	--mist:      #F7F5F4;
	--line-soft: #E7E2E1;
	--line-hard: #DFDAD9;

	/* Status. Het groen van de bestaande site (#20C45F) haalt op wit geen
	   4.5:1 — hier een variant die dat wél doet, met dezelfde toon. */
	--ok:     #0E7A3C;
	--warn:   #8A5200;
	--danger: #B3000D;

	/* Betekenis-tokens — licht thema */
	--bg:           var(--paper);
	--surface:      var(--white);
	--surface-alt:  var(--mist);
	--surface-sink: #F2EFEE;
	--text:         var(--ink);
	--text-soft:    var(--ink-soft);
	--text-faint:   #716867;
	--line:         var(--line-soft);
	--line-strong:  var(--line-hard);
	--accent:       var(--brand);
	--accent-deep:  var(--brand-deep);
	--accent-wash:  rgba(207, 0, 15, 0.07);
	--on-accent:    #FFFFFF;
	--star:         #B07200;

	/*
	 * Vorm — alles haaks. Dat is de ene beslissing waar deze site aan te
	 * herkennen is: geen enkele afgeronde hoek. Een ingevorderd rijbewijs is
	 * een dossier, geen app. De pil is de enige uitzondering, en die gebruiken
	 * we alleen voor de spoedknop, zodat hij als enige opvalt.
	 */
	--radius-xl:   0px;
	--radius-lg:   0px;
	--radius:      0px;
	--radius-sm:   0px;
	--radius-pill: 999px;

	/* Schaduw is hier bijna niets: de scheiding komt van lijnen, niet van
	   diepte. Alleen de plakbalk mag laten zien dat hij zweeft. */
	--shadow-sm: 0 1px 0 0 var(--line-strong);
	--shadow:    0 1px 0 0 var(--line-strong);
	--shadow-lg: 0 18px 44px -28px rgba(21, 13, 12, 0.55);

	/* Ritme */
	--shell-max: 1200px;
	--gutter:    clamp(18px, 4vw, 40px);
	--section-y: clamp(56px, 8vw, 112px);
	--stack:     clamp(20px, 3vw, 32px);

	/* Type — Bebas Neue voor koppen en cijfers, DM Sans voor de rest.
	   Zie assets/fonts/fonts.css; twee bestanden, samen ±45 kB. */
	--f-display: "Bebas Neue", "Oswald", "Arial Narrow", system-ui, sans-serif;
	--f-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-mono:    ui-monospace, "SFMono-Regular", monospace;

	/*
	 * Bebas is smal en heeft geen onderkast, dus hij mag groter dan een gewone
	 * schreefloze bij dezelfde regel. De koppen staan daarom een slag hoger dan
	 * de kitwaarden, met een strakkere regelafstand (zie blok 16).
	 */
	--t-hero:  clamp(3rem, 1.6rem + 5.6vw, 6rem);
	--t-h1:    clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem);
	--t-h2:    clamp(1.9rem, 1.35rem + 2.2vw, 3.1rem);
	--t-h3:    clamp(1.2rem, 1.04rem + 0.65vw, 1.55rem);
	--t-lead:  clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
	--t-body:  1rem;
	--t-small: 0.875rem;
	--t-micro: 0.78rem;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);

	color-scheme: light;
}

/*
 * GEEN DONKER THEMA OP DEZE SITE — bewust weggelaten.
 *
 * De startkit levert licht én donker; hier staat alleen licht. Reden: dit is
 * een site waar mensen één keer komen, in paniek, meestal overdag en meestal
 * op hun telefoon. Een themawissel is dan een knop die niemand zoekt, en het
 * verdubbelt wél het aantal combinaties dat je bij elke wijziging moet nakijken.
 *
 * De opbouw eronder is niet gesloopt. De twee lagen tokens staan er nog, en
 * .tone-dark hieronder draait ze nog steeds om — dat is precies wat de donkere
 * secties (de afsluitende CTA en de voet) laat werken.
 *
 * Terugzetten kost één handeling: kopieer de twee blokken
 * `@media (prefers-color-scheme: dark)` en `:root[data-theme="dark"]` uit
 * kit/theme/__SLUG__/style.css hierheen, zet `color-scheme` hierboven weer op
 * `light dark`, en zet de themaknop terug in header.php. Zie QA-RAPPORT.md.
 */


/*
 * Een donkere sectie in een licht thema draait dezelfde tokens om. Zo hoeft
 * geen enkele component te weten of hij op een lichte of donkere ondergrond
 * staat — hij vraagt gewoon --surface en --text.
 */
.tone-dark,
.section-dark {
	/*
	 * Let op de `color` hieronder. Zonder die regel draaien de tokens wel om,
	 * maar blijft de tekst de kleur erven die hij van body meekreeg — donkere
	 * inkt op een bijna zwarte ondergrond. De koppen zijn dan onleesbaar terwijl
	 * alles wat wél een token gebruikt (--text-soft, --text-faint) klopt, en dat
	 * maakt het lastig te herkennen.
	 */
	color:         var(--text);

	--bg:          var(--night-deep);
	--surface:     rgba(255, 255, 255, 0.05);
	--surface-alt: rgba(255, 255, 255, 0.09);
	--text:        #F6F1F0;
	--text-soft:   #C9C0BE;
	--text-faint:  #9E9492;
	--line:        rgba(255, 255, 255, 0.13);
	--line-strong: rgba(255, 255, 255, 0.24);
	--accent:      var(--brand-light);
	--accent-deep: #FF9490;
	--accent-wash: rgba(255, 112, 106, 0.14);
	--on-accent:   #2A0003;
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px; /* Ankerlinks niet onder het sitehoofd laten landen. */
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; /* Vangnet: horizontaal scrollen is altijd een fout. */
}

img,
picture,
video,
svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-deep); }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li + li { margin-top: 0.35em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--stack) 0; }

code, pre, kbd { font-family: var(--f-mono); font-size: 0.9em; }

pre {
	background: var(--surface-sink);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1em 1.1em;
	overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6em 0.8em; border-bottom: 1px solid var(--line); }

input, select, textarea, button { font: inherit; color: inherit; }

/* ==========================================================================
   3. Toegankelijkheid
   ========================================================================== */

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

.skip-link {
	position: absolute;
	top: -100px; left: var(--gutter);
	z-index: 999;
	background: var(--accent);
	color: var(--on-accent);
	padding: 0.7em 1.2em;
	border-radius: 0 0 var(--radius) var(--radius);
	font-weight: 600;
	text-decoration: none;
	transition: top 0.15s var(--ease);
}
.skip-link:focus-visible { top: 0; }

/*
 * Toetsenbordfocus moet altijd te zien zijn — ook op een donkere sectie.
 * Twee ringen: de accentkleur, met een lichte rand eromheen zodat hij op elke
 * ondergrond loskomt.
 */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg) 80%, transparent);
}
:focus:not(:focus-visible) { outline: none; }

/* Nog aan te leveren materiaal — zichtbaar, maar niet schreeuwerig. */
.is-placeholder {
	background: color-mix(in srgb, var(--warn) 14%, transparent);
	border-bottom: 1px dashed var(--warn);
	border-radius: 3px;
	padding: 0 0.25em;
	color: inherit;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.shell {
	width: min(100% - (var(--gutter) * 2), var(--shell-max));
	margin-inline: auto;
}

.section { padding-block: var(--section-y); }
.section + .section { padding-top: 0; }

.section-dark {
	background: var(--night-deep);
	color: var(--text);
	padding-block: var(--section-y);
}

.section-heading { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-heading.is-center { margin-inline: auto; text-align: center; }
.section-title { margin: 0 0 0.4em; }
.section-text { color: var(--text-soft); font-size: var(--t-lead); margin: 0; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 0 0.9em;
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.eyebrow-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
}
.eyebrow-term {
	color: var(--accent);
	border-left: 1px solid var(--line-strong);
	padding-left: 0.6em;
}

.mini-label {
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 0 0 0.5em;
}

/* ==========================================================================
   5. Knoppen en links
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: var(--t-small);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.16s var(--ease), background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }

.button-primary { background: var(--accent); color: var(--on-accent); }
.button-primary:hover { background: var(--accent-deep); color: var(--on-accent); }

.button-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.button-ghost:hover { background: var(--surface-alt); color: var(--text); }

.button-white { background: var(--white); color: var(--night-deep); }
.button-white:hover { background: var(--mist); color: var(--night-deep); }

.button-outline-light { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.35); }
.button-outline-light:hover { background: rgba(255, 255, 255, 0.10); color: #FFFFFF; }

.button-small { padding: 0.65em 1.15em; font-size: var(--t-micro); }

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 600;
	font-size: var(--t-small);
	text-decoration: none;
}
.arrow-link .icon { width: 1.1em; height: 1.1em; transition: transform 0.16s var(--ease); }
.arrow-link:hover .icon { transform: translateX(3px); }

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* ==========================================================================
   6. Sitehoofd
   ========================================================================== */

.topbar {
	background: var(--night-deep);
	color: #E6E6F0;
	font-size: var(--t-micro);
}
.topbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em 1.5em;
	padding-block: 0.65em;
}
.topbar p { margin: 0; }
.topbar-contact { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; }
.topbar a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: inherit;
	text-decoration: none;
}
.topbar a:hover { color: var(--brand-light); }

@media (max-width: 700px) {
	.topbar-claim { display: none; } /* Op smal telt alleen het contact. */
	.topbar-inner { justify-content: center; }
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.site-header.scrolled {
	border-bottom-color: var(--line);
	box-shadow: var(--shadow-sm);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--stack);
	padding-block: 0.9em;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-logo { width: auto; max-height: 46px; }
.site-logo.is-wordmark {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: -0.02em;
	color: var(--text);
}
.brand-footer .site-logo.is-wordmark { color: #FFFFFF; }
/*
 * Tussenoplossing zolang er geen wit-op-transparant logo is: hetzelfde bestand
 * wit maken. Zodra de klant een lichte variant levert, vervang je dit door dat
 * bestand in plaats van door een filter.
 */
.site-logo.is-light { filter: brightness(0) invert(1); }

.header-panel {
	display: flex;
	align-items: center;
	gap: var(--stack);
	flex: 1;
	justify-content: flex-end;
}

.main-nav .menu {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav .menu li { margin: 0; position: relative; }
.main-nav a {
	color: var(--text);
	text-decoration: none;
	font-size: var(--t-small);
	font-weight: 500;
	padding-block: 0.4em;
	display: inline-block;
}
.main-nav a:hover,
.main-nav .current-menu-item > a { color: var(--accent); }

/* Tweede niveau: verschijnt bij hover én bij toetsenbordfocus. */
.main-nav .sub-menu {
	position: absolute;
	top: 100%; left: -14px;
	min-width: 230px;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 0.5em;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.main-nav .sub-menu a { display: block; padding: 0.5em 0.8em; border-radius: var(--radius-sm); }
.main-nav .sub-menu a:hover { background: var(--surface-alt); }

.header-actions { display: flex; align-items: center; gap: 0.75em; }

/* De themaknop staat niet in header.php van deze site — zie de toelichting bij
   de tokens in blok 1. De opmaak ervan is hier dus ook weg. */

.menu-button {
	display: none;
	width: 44px; height: 44px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.menu-bars { display: grid; gap: 4px; width: 20px; }
.menu-bars span {
	height: 2px;
	background: var(--text);
	border-radius: 2px;
	transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
[aria-expanded="true"] .menu-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menu-bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .menu-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/*
 * Breekpunt op 1024: de navigatie en de knoppen passen daaronder niet meer
 * naast elkaar. Let op dat de burger verschijnt op exact dezelfde breedte
 * waarop de balk verdwijnt — anders is het menu op een tussenmaat onbereikbaar.
 */
@media (max-width: 1024px) {
	.menu-button { display: inline-flex; }

	.header-panel {
		position: absolute;
		top: 100%; left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 1.2em;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
		padding: 1.4em var(--gutter) 1.8em;
		display: none;
	}
	.header-panel.open { display: flex; }

	.main-nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
	.main-nav .menu > li + li { border-top: 1px solid var(--line); }
	.main-nav a { padding-block: 0.8em; font-size: 1rem; }

	.main-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0.6em 0.9em;
		background: transparent;
	}

	.header-actions { justify-content: space-between; }
	.header-actions .button { flex: 1; }

	body.menu-open { overflow: hidden; }
}

/* ==========================================================================
   7. Hero en homepagesecties
   ========================================================================== */

.hero { padding-block: clamp(40px, 6vw, 88px) var(--section-y); }
.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
}
.hero-title { font-size: var(--t-hero); margin-bottom: 0.35em; }
.hero-lead {
	font-size: var(--t-lead);
	color: var(--text-soft);
	max-width: 54ch;
	margin-bottom: 1.6em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75em; }
.hero-rating { margin-top: 1.6em; }

.usp-list {
	list-style: none;
	margin: 1.6em 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.4em;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.usp-list li { display: flex; align-items: center; gap: 0.45em; margin: 0; }
.usp-list .icon { color: var(--ok); width: 1em; height: 1em; }

/*
 * PER KLANT: het herobeeld. Zolang er niets is, blijft dit vlak leeg in plaats
 * van gevuld met een stockfoto — een lege plek is eerlijker dan geleend beeld.
 */
.hero-media {
	min-height: clamp(220px, 34vw, 420px);
	border-radius: var(--radius-xl);
	background: var(--surface-alt);
	border: 1px dashed var(--line-strong);
}

@media (max-width: 900px) {
	.hero-inner { grid-template-columns: 1fr; }
	.hero-media { display: none; }
}

.service-grid,
.case-grid,
.card-grid,
.review-grid {
	display: grid;
	gap: clamp(16px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.service-card,
.case-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(22px, 2.6vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.service-card:hover,
.case-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.service-title { margin: 0; }
.service-text { color: var(--text-soft); margin: 0; }
.service-card .arrow-link { margin-top: auto; padding-top: 0.6em; }

.case-sector {
	font-size: var(--t-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 0;
}
.case-metric { display: flex; flex-direction: column; gap: 0.1em; margin: 0.2em 0 0.4em; }
.case-metric-value {
	font-family: var(--f-display);
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
}
.case-metric-label { font-size: var(--t-small); color: var(--text-soft); }
.case-title { margin: 0; }
.case-text { color: var(--text-soft); margin: 0; }

.step-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(16px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	counter-reset: step;
}
.step {
	margin: 0;
	padding-top: 1.1em;
	border-top: 2px solid var(--line-strong);
	position: relative;
}
.step-number {
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	font-weight: 700;
	color: var(--accent);
	display: block;
	margin-bottom: 0.5em;
}
.step-title { margin: 0 0 0.3em; font-size: var(--t-h3); }
.step-text { color: var(--text-soft); margin: 0; font-size: var(--t-small); }

/* ==========================================================================
   8. Cijfers, sterren, reviews, woordmerken
   ========================================================================== */

.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: clamp(16px, 2.4vw, 32px);
	margin: 0;
}
.stat { margin: 0; }
.stat-value {
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0 0 0.25em;
}
.stat-label {
	margin: 0;
	font-size: var(--t-small);
	color: var(--text-soft);
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}
.stat-note { font-size: var(--t-micro); color: var(--text-faint); }
.stat-row.is-compact .stat-value { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }

.rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	text-decoration: none;
	color: inherit;
}
.rating-stars { display: inline-flex; gap: 2px; color: var(--star); }
.star { display: inline-flex; width: 1.05em; height: 1.05em; position: relative; }
.star .icon { width: 100%; height: 100%; stroke-width: 1.2; }
.star.is-full .icon { fill: currentColor; }
.star.is-half .star-fill {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
}
.star.is-half .star-fill .icon { fill: currentColor; width: 1.05em; }
.rating-meta { display: flex; flex-direction: column; line-height: 1.25; }
.rating-score { font-family: var(--f-display); font-size: 1rem; }
.rating-detail { font-size: var(--t-micro); color: var(--text-faint); }
.rating-badge.size-small .star { width: 0.9em; height: 0.9em; }
.rating-badge.size-large .star { width: 1.3em; height: 1.3em; }
.rating-badge.size-large .rating-score { font-size: 1.3rem; }

.review {
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(22px, 2.6vw, 34px);
	display: flex;
	flex-direction: column;
	gap: 0.9em;
	position: relative;
}
.review.size-feature { grid-column: span 2; }
@media (max-width: 760px) { .review.size-feature { grid-column: auto; } }

.review-mark {
	position: absolute;
	top: clamp(14px, 2vw, 22px);
	right: clamp(14px, 2vw, 22px);
	color: var(--accent-wash);
}
.review-mark .icon { width: 46px; height: 46px; fill: currentColor; stroke: none; }
.review-quote { margin: 0; border: 0; padding: 0; font-size: var(--t-lead); }
.review.size-feature .review-quote { font-family: var(--f-display); font-weight: 600; }
.review-source { display: flex; align-items: center; gap: 0.7em; margin-top: auto; }
.review-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--accent-wash);
	color: var(--accent);
	font-family: var(--f-display);
	font-weight: 700;
	flex: none;
}
.review-who { display: flex; flex-direction: column; font-size: var(--t-small); line-height: 1.35; }
.review-who span { color: var(--text-faint); font-size: var(--t-micro); }

.logo-row { display: flex; flex-direction: column; gap: 1em; align-items: center; }
.logo-row-label {
	font-size: var(--t-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 0;
}
.logo-row-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6em 0.9em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.logo-chip {
	margin: 0;
	padding: 0.5em 1em;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--t-small);
	font-weight: 500;
	color: var(--text-soft);
}

/* ==========================================================================
   9. Persoon
   ========================================================================== */

.person { display: flex; align-items: center; gap: 0.9em; }
.person-photo { flex: none; }
.person-photo img,
.person-photo-empty {
	width: 56px; height: 56px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.person-photo-empty { background: var(--surface-alt); border: 1px dashed var(--line-strong); }
.person-body { display: flex; flex-direction: column; font-size: var(--t-small); line-height: 1.4; }
.person-role,
.person-note { color: var(--text-faint); font-size: var(--t-micro); }
.person-phone { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; margin-top: 0.2em; }

/* ==========================================================================
   10. Kaarten en overzichten
   ========================================================================== */

.archive-header { padding-block: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 36px); }
.archive-header-inner { max-width: 68ch; }
.archive-title { margin-bottom: 0.3em; }
.archive-intro { font-size: var(--t-lead); color: var(--text-soft); }
.archive-body { padding-bottom: var(--section-y); }

.breadcrumbs { margin-bottom: 1.2em; font-size: var(--t-micro); }
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.55em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: 0.55em; }
.breadcrumbs li + li::before {
	content: "/";
	color: var(--text-faint);
	opacity: 0.7;
}
.breadcrumbs a { color: var(--text-faint); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text-soft); }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color 0.16s var(--ease), transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.card:hover {
	border-color: var(--line-strong);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

/* Eén klikvlak over de hele kaart, maar met de titel als toegankelijke naam. */
.card-link { position: absolute; inset: 0; z-index: 2; }
.card-link:focus-visible { outline-offset: -3px; }

.card-media { aspect-ratio: 16 / 10; background: var(--surface-alt); }
.card-image { width: 100%; height: 100%; object-fit: cover; }
.card-image.is-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.45;
}
.card-body { padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 0.5em; flex: 1; }
.card-type {
	font-size: var(--t-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 0;
}
.card-title { margin: 0; font-size: 1.1rem; }
.card-text { color: var(--text-soft); font-size: var(--t-small); margin: 0; }
.card-meta {
	margin: auto 0 0;
	padding-top: 0.6em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.8em;
	font-size: var(--t-micro);
	color: var(--text-faint);
}

.empty-state {
	text-align: center;
	padding: clamp(40px, 6vw, 80px) var(--gutter);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	color: var(--text-soft);
}

.pagination { margin-top: clamp(28px, 4vw, 48px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4em; justify-content: center; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 0.55em 0.8em;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: var(--t-small);
	color: var(--text);
}
.pagination .page-numbers:hover { border-color: var(--line-strong); }
.pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
}

.error-search { margin-top: 1.4em; max-width: 420px; }
.search-form { display: flex; gap: 0.5em; }
.search-form label { flex: 1; }
.search-field {
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--surface);
}
.search-submit {
	padding: 0.75em 1.3em;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
	cursor: pointer;
}

.product-grid {
	display: grid;
	gap: clamp(16px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	margin-bottom: var(--section-y);
}
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.product-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.product-link { position: absolute; inset: 0; z-index: 2; }
.product-link:focus-visible { outline-offset: -3px; }
.product-media { aspect-ratio: 4 / 3; background: var(--surface-alt); }
.product-image { width: 100%; height: 100%; object-fit: cover; }
.product-image.is-fallback { display: flex; align-items: center; justify-content: center; opacity: 0.4; }
.product-body { padding: clamp(14px, 1.8vw, 20px); display: flex; flex-direction: column; gap: 0.4em; }
.product-title { margin: 0; font-size: 1.05rem; }
.product-text { margin: 0; font-size: var(--t-small); color: var(--text-soft); }
.product-cat-text { max-width: 68ch; margin-top: clamp(24px, 3vw, 44px); padding-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--line); }

/* ==========================================================================
   11. Artikel
   ========================================================================== */

.resource-header { padding-block: clamp(28px, 4vw, 56px) clamp(18px, 2.4vw, 30px); }
.resource-header-inner { max-width: 62ch; }
.resource-title { margin-bottom: 0.35em; }
.resource-intro { font-size: var(--t-lead); color: var(--text-soft); }

/* Het posttype geeft het artikel een eigen accentnuance zonder eigen sjabloon. */
.resource[data-variant="kennisbank"] { --accent: var(--accent-deep); }

.banner {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
	background: var(--surface-alt);
}
.banner-image { width: 100%; aspect-ratio: 1360 / 420; object-fit: cover; }
.banner.is-fallback {
	aspect-ratio: 1360 / 420;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
}
.banner-mark { opacity: 0.35; }
.banner-label {
	position: absolute;
	left: 14px; bottom: 14px;
	background: color-mix(in srgb, var(--night-deep) 78%, transparent);
	color: #FFFFFF;
	font-size: var(--t-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35em 0.8em;
	border-radius: var(--radius-pill);
}

.resource-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(28px, 4vw, 64px);
	padding-block: clamp(28px, 4vw, 56px);
	align-items: start;
}
.resource-body.is-single-column { grid-template-columns: minmax(0, 1fr); max-width: 800px; }

@media (max-width: 1024px) {
	.resource-body { grid-template-columns: minmax(0, 1fr); }
	.resource-aside { display: none; } /* Op smal doet de sticky balk dit werk. */
}

/* ---- Inhoudsopgave ------------------------------------------------------ */

.toc {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-sink);
	padding: 0.9em 1.1em;
	margin-bottom: 2em;
}
.toc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: var(--t-small);
}
.toc summary::-webkit-details-marker { display: none; }
.toc-count { font-size: var(--t-micro); color: var(--text-faint); font-weight: 400; }
.toc-list {
	margin: 0.9em 0 0;
	padding-left: 1.2em;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	font-size: var(--t-small);
}
.toc-list li { margin: 0; }
.toc-list a { color: var(--text-soft); text-decoration: none; }
.toc-list a:hover { color: var(--accent); }
.toc-list a.is-current { color: var(--accent); font-weight: 600; }

/* ---- Lopende tekst ------------------------------------------------------ */

.entry-content { font-size: 1.0625rem; }
.entry-content > * { max-width: 68ch; }
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure,
.entry-content > .wp-block-table { max-width: none; }

.entry-content h2 {
	margin-top: 1.9em;
	scroll-margin-top: 100px; /* Ankerlink vanuit de inhoudsopgave. */
}
.entry-content h3 { margin-top: 1.6em; }
.entry-content p,
.entry-content ul,
.entry-content ol { margin-bottom: 1.15em; }
.entry-content img { border-radius: var(--radius); }
.entry-content figcaption { font-size: var(--t-micro); color: var(--text-faint); margin-top: 0.5em; }
.entry-content blockquote {
	margin: 1.6em 0;
	padding-left: 1.2em;
	border-left: 3px solid var(--accent);
	font-family: var(--f-display);
	font-weight: 600;
	font-size: var(--t-lead);
}
.entry-content a { font-weight: 500; }

.resource-sources { margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.resource-sources h2 { font-size: var(--t-h3); margin-top: 0; }
.resource-sources ol { font-size: var(--t-small); color: var(--text-soft); }

/* ---- Meelopende CTA in de zijkolom -------------------------------------- */

.aside-inner { position: sticky; top: 104px; }

/* ---- Sticky balk op smallere schermen ----------------------------------- */

.sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 90;
	background: var(--surface);
	border-top: 1px solid var(--line);
	box-shadow: 0 -12px 30px -22px rgba(0, 0, 0, 0.5);
	transform: translateY(110%);
	transition: transform 0.24s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta-inner {
	display: flex;
	align-items: center;
	gap: 1em;
	padding-block: 0.75em;
}
.sticky-cta-text { display: flex; flex-direction: column; margin: 0; font-size: var(--t-small); line-height: 1.3; }
.sticky-cta-text span { color: var(--text-faint); font-size: var(--t-micro); }
.sticky-cta .button { margin-left: auto; white-space: nowrap; }
.sticky-cta-close {
	background: transparent;
	border: 0;
	color: var(--text-faint);
	cursor: pointer;
	padding: 0.4em;
	display: inline-flex;
}
@media (min-width: 1025px) { .sticky-cta { display: none; } }

/* ---- FAQ ---------------------------------------------------------------- */

.resource-faq,
.faq-section { padding-block: clamp(24px, 3vw, 44px); }
.faq-accordion { display: flex; flex-direction: column; gap: 0.6em; max-width: 68ch; }
.faq-item {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
}
.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1em 1.2em;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	font-family: var(--f-mono);
	color: var(--accent);
	font-size: 1.2em;
	line-height: 1;
	flex: none;
}
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 1.2em 1.2em; color: var(--text-soft); }
.faq-answer > *:last-child { margin-bottom: 0; }

/* ---- Auteur ------------------------------------------------------------- */

.byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8em 1.6em;
	margin-top: 1.4em;
	padding-top: 1.2em;
	border-top: 1px solid var(--line);
	font-size: var(--t-small);
}
.byline-author { display: flex; align-items: center; gap: 0.7em; text-decoration: none; color: inherit; }
.byline-photo { flex: none; }
.byline-name,
.byline-detail { display: flex; flex-direction: column; line-height: 1.3; }
.byline small { font-size: var(--t-micro); color: var(--text-faint); }

.author-avatar-image {
	width: var(--avatar-size, 48px);
	height: var(--avatar-size, 48px);
	border-radius: 50%;
	object-fit: cover;
}
/* Zelf getekende auteursfoto — geen verzoek naar Gravatar. */
.author-avatar-image.is-initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-wash);
	color: var(--accent);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: calc(var(--avatar-size, 48px) * 0.36);
}

.author-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(16px, 2.4vw, 28px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(22px, 2.6vw, 32px);
	margin-block: clamp(24px, 3vw, 44px);
}
.author-card-name { font-size: var(--t-h3); margin: 0 0 0.15em; }
.author-card-role { color: var(--accent); font-size: var(--t-small); margin: 0 0 0.6em; }
.author-card-bio { color: var(--text-soft); font-size: var(--t-small); }
.author-card-links { display: flex; flex-wrap: wrap; gap: 1.2em; margin-top: 0.8em; }
.author-card-socials {
	list-style: none;
	margin: 0.9em 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}
.author-card-socials li { margin: 0; }
.author-card-socials a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.8em;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--t-micro);
	font-weight: 500;
	text-decoration: none;
	color: var(--text-soft);
}
.author-card-socials a:hover { border-color: var(--accent); color: var(--accent); }
.author-card-socials .icon { width: 1em; height: 1em; }
.author-card-recent { margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.author-card-recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; }
.author-card-recent li { margin: 0; display: flex; flex-direction: column; font-size: var(--t-small); }
.author-card-recent span { font-size: var(--t-micro); color: var(--text-faint); }

@media (max-width: 620px) {
	.author-card { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12. CTA-blok
   ========================================================================== */

.cta { display: flex; gap: clamp(20px, 3vw, 48px); }
.cta-body { flex: 1; min-width: 0; }
.cta-title { margin: 0 0 0.4em; }
.cta-text { color: var(--text-soft); margin: 0; max-width: 56ch; }
.cta-actions { display: flex; flex-direction: column; gap: 0.7em; align-items: flex-start; flex: none; }
.cta-phone {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--t-micro);
	color: var(--text-faint);
	margin: 0.2em 0 0;
}
.cta-rating,
.cta-person { margin-top: 1.2em; }

.cta-section {
	align-items: center;
	background: var(--night-deep);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	padding: clamp(28px, 4vw, 56px);
}
.cta-section.tone-light { background: var(--surface); }
.cta-section.tone-soft { background: var(--surface-alt); }

/* De donkerthema-correctie die hier stond, hoort bij een donker thema dat deze
   site niet heeft: de pagina is altijd licht, dus de donkere CTA-kaart steekt
   er vanzelf al tegen af. */

.cta-inline {
	flex-direction: column;
	gap: 1em;
	border-left: 3px solid var(--accent);
	background: var(--surface-alt);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: clamp(18px, 2.2vw, 26px);
	margin-block: 2em;
	max-width: 68ch;
}
.cta-inline .cta-title { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 700; }
.cta-inline .cta-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }

.cta-aside {
	flex-direction: column;
	gap: 1.2em;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 2.4vw, 28px);
}
.cta-aside .cta-title { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; }
.cta-aside .cta-actions { align-items: stretch; width: 100%; }
.cta-aside .button { width: 100%; }

@media (max-width: 860px) {
	.cta-section { flex-direction: column; align-items: stretch; }
	.cta-section .cta-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ==========================================================================
   13. Sitevoet
   ========================================================================== */

.site-footer {
	background: var(--night-deep);
	color: #C3C3D2;
	margin-top: var(--section-y);
	padding-top: clamp(32px, 4vw, 56px);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; }
.site-footer h2 { color: #FFFFFF; }

.footer-proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
	padding-bottom: clamp(28px, 3.5vw, 44px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-proof .stat-row { flex: 1; min-width: 260px; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: clamp(24px, 3vw, 48px);
	padding-block: clamp(32px, 4vw, 56px);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-pitch { font-size: var(--t-small); margin: 1em 0 1.4em; max-width: 40ch; }
.footer-heading {
	font-size: var(--t-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1em;
}
.footer-column .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55em; }
.footer-column li { margin: 0; font-size: var(--t-small); }

.footer-contact address { font-style: normal; display: flex; flex-direction: column; gap: 0.65em; font-size: var(--t-small); }
.footer-contact a,
.footer-address { display: flex; align-items: flex-start; gap: 0.5em; }
.footer-contact .icon { margin-top: 0.15em; }
.footer-legal-numbers { font-size: var(--t-micro); color: #8B8B9C; margin-top: 1.1em; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em 1.5em;
	padding-block: 1.2em;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--t-micro);
	color: #8B8B9C;
}
.footer-legal .menu { display: flex; flex-wrap: wrap; gap: 0.6em 1.2em; list-style: none; margin: 0; padding: 0; }
.footer-legal li { margin: 0; }

/* ==========================================================================
   14. Beweging

   Alles hieronder is versiering. Het staat als laatste zodat het als eerste
   sneuvelt wanneer iets moet wijken, en het gaat volledig uit bij
   prefers-reduced-motion.
   ========================================================================== */

[data-anim] { opacity: 0; }
[data-anim].is-in {
	opacity: 1;
	animation-delay: var(--anim-delay, 0ms);
	animation-duration: 0.6s;
	animation-timing-function: var(--ease);
	animation-fill-mode: both;
}
[data-anim="up"].is-in   { animation-name: anim-up; }
[data-anim="rise"].is-in { animation-name: anim-rise; }
[data-anim="mask"].is-in { animation-name: anim-mask; }

@keyframes anim-up   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes anim-rise { from { opacity: 0; transform: translateY(24px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes anim-mask {
	from { opacity: 0; clip-path: inset(0 0 100% 0); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.reading-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 200;
	pointer-events: none;
}
.reading-progress span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--accent);
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
}

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

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

	[data-anim] { opacity: 1; }
	.reading-progress { display: none; }
	.button:hover,
	.card:hover,
	.service-card:hover,
	.case-card:hover { transform: none; }
}

/* ==========================================================================
   15. Print
   ========================================================================== */

@media print {
	.topbar,
	.site-header,
	.site-footer,
	.sticky-cta,
	.resource-aside,
	.cta,
	.reading-progress,
	.section-related { display: none !important; }

	body { background: #FFFFFF; color: #000000; }
	.entry-content > * { max-width: none; }

	/*
	 * De onthul-animatie zet elementen op opacity 0 tot de waarnemer ze in beeld
	 * ziet komen. Bij printen gebeurt dat nooit, en dan komt de halve pagina
	 * blanco uit de printer. Hier dus altijd zichtbaar.
	 */
	[data-anim] { opacity: 1 !important; animation: none !important; }
	a::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}

/* ==========================================================================
   16. Vormgeving per klant

   Hier komt wat deze site van elke andere onderscheidt: het herobeeld, de
   sectieovergangen, de eigenzinnige details. Alles hierboven is het skelet en
   blijft in principe staan; dit blok schrijf je per opdracht opnieuw.

   Twee regels die ook hier gelden:
   - kleur komt uit de tokens in blok 1, nooit hardcoded;
   - geen effect zonder terugval bij prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1  Typografie: waar Bebas wél en waar Bebas níet

   Bebas Neue heeft geen onderkast en maar één gewicht. Dat is prachtig voor
   koppen en cijfers en ongeschikt voor alles wat je moet lézen. De kit vraagt
   op een paar plekken --f-display waar dat hier fout uitpakt; die zetten we
   hieronder terug op de tekstfont.

   En overal waar de kit font-weight 700 of 800 op een Bebas-kop zet: dat moet
   400 worden. Anders trekt de browser de letters zelf vet, en dat zie je.
   -------------------------------------------------------------------------- */

h1, h2 {
	font-weight: 400;
	letter-spacing: 0.005em;
}
h1 { line-height: 0.94; }
h2 { line-height: 0.98; }

/* Vanaf H3 leest het als tekst, dus zet het ook als tekst. */
h3, h4 {
	font-family: var(--f-body);
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.28;
}

/* Bebas is goed voor cijfers — daar mag het gewicht ook naar 400. */
.stat-value,
.case-metric-value,
.rating-score {
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* Lopende tekst in een citaat of een CTA is geen kop. */
.entry-content blockquote,
.review-quote,
.review.size-feature .review-quote,
.cta-inline .cta-title,
.cta-aside .cta-title {
	font-family: var(--f-body);
	font-weight: 500;
	letter-spacing: -0.005em;
}
.cta-inline .cta-title,
.cta-aside .cta-title { font-weight: 700; }

.site-logo.is-wordmark {
	font-weight: 400;
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   16.2  De termijnbalk

   Het ene detail dat mensen van deze site onthouden: tien segmenten, één per
   dag van de termijn uit art. 164 lid 4 WVW. Hij staat in de hero als los
   element, en komt als CSS-streep terug boven de inhoudsopgave en boven de
   voet — zonder dat daar markup voor nodig is.

   Het is nadrukkelijk géén aftelklok: we weten niet op welke dag deze bezoeker
   zit, dus doen we ook niet alsof. Wat hij wél doet is de termijn een lengte
   geven, en dat is precies wat er in een tekstregel verloren gaat.
   -------------------------------------------------------------------------- */

.termijnbalk {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 3px;
	margin: 1.2em 0;
}
.termijnbalk-segment {
	height: 10px;
	background: var(--accent);
	/*
	 * Van vol naar bijna leeg over tien segmenten. Niet omdat er dagen voorbij
	 * zijn, maar omdat het aflopen van een termijn er zo uitziet.
	 */
	opacity: calc(1.05 - (var(--i) * 0.075));
}

/* Dezelfde maatverdeling, maar dan als streep zonder markup. */
.rule-termijn,
.toc::before,
.site-footer::before {
	content: "";
	display: block;
	height: 6px;
	background: repeating-linear-gradient(
		to right,
		var(--accent) 0 calc(10% - 3px),
		transparent calc(10% - 3px) 10%
	);
}
.toc::before { margin-bottom: 1em; }
.site-footer::before { opacity: 0.85; }

@media (prefers-reduced-motion: no-preference) {
	.termijnbalk-segment {
		animation: termijn-in 0.5s var(--ease) backwards;
		animation-delay: calc(var(--i) * 45ms);
	}
	@keyframes termijn-in {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
	.termijnbalk-segment { transform-origin: left; }
}

/* --------------------------------------------------------------------------
   16.3  Vorm: alles haaks, één uitzondering

   De bestaande site heeft border-radius: 0 op alles. Dat is de sterkste
   vormbeslissing die er al lag en de enige die dit merk meteen herkenbaar
   maakt. De tokens in blok 1 zetten hem overal op nul; hier zetten we de twee
   plekken recht waar de kit de pil rechtstreeks aanroept.

   De uitzondering is de spoedknop in de kop. Juist omdat verder niets rond is,
   springt hij eruit zonder groter of harder te hoeven worden.
   -------------------------------------------------------------------------- */

.button { border-radius: 0; }
.is-placeholder { border-radius: 0; }

.button:hover,
.button:active { transform: none; }
.button-primary:hover { background: var(--accent-deep); }
.button-ghost:hover { border-color: var(--text); }

.header-actions .button-primary {
	border-radius: var(--radius-pill);
	padding-inline: 1.5em;
}

/* --------------------------------------------------------------------------
   16.4  Eyebrow: een streepje in plaats van een stip

   De kit zet een rond stipje voor elke eyebrow. Rond past hier niet, en een
   stip zegt niets. Een korte rode maatstreep wél: hij herhaalt de termijnbalk
   op de kleinst mogelijke schaal.
   -------------------------------------------------------------------------- */

.eyebrow {
	letter-spacing: 0.1em;
	color: var(--text-soft);
}
.eyebrow-dot {
	width: 22px;
	height: 3px;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   16.5  Spoedbalk

   De bovenbalk is de bereikbaarheidsregel, en op deze site is dat de
   belangrijkste regel die er staat. Het nummer krijgt daarom Bebas op
   leesgrootte en het woord "spoed" ervoor in het rood — geen rode band, want
   dan is rood weer decoratie.
   -------------------------------------------------------------------------- */

.topbar {
	background: var(--night-deep);
	color: #E9E2E1;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.topbar-contact a:first-child span {
	font-family: var(--f-display);
	font-size: 1.1rem;
	letter-spacing: 0.03em;
}
.topbar-contact a:first-child::before {
	content: "Spoed";
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-light);
}
.topbar a:hover { color: var(--brand-light); }

/* --------------------------------------------------------------------------
   16.6  Hero

   Twee kolommen: links de situatie, rechts de termijn. De tweede regel van de
   kop staat in het rood, en dat is een van de drie taken die rood op deze site
   heeft — de andere twee zijn de intakeknop en de termijnbalk.
   -------------------------------------------------------------------------- */

.home .hero {
	padding-block: clamp(36px, 5vw, 72px) var(--section-y);
	border-bottom: 1px solid var(--line);
}
.home .hero-inner {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	align-items: start;
	gap: clamp(28px, 5vw, 64px);
}
.hero-title {
	margin-bottom: 0.4em;
	text-wrap: balance;
}
.hero-title-sub {
	display: block;
	font-size: 0.62em;
	color: var(--accent);
	margin-top: 0.1em;
}
.hero-lead { max-width: 46ch; }
.usp-list .icon { color: var(--accent); }

/* Het paneel met de termijn. Een kader, geen kaart: één lijn, geen schaduw. */
.deadline-panel {
	border: 1px solid var(--line-strong);
	border-top: 4px solid var(--accent);
	background: var(--surface-alt);
	padding: clamp(20px, 2.4vw, 28px);
}
.deadline-panel-kicker {
	margin: 0;
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.deadline-panel-value {
	display: flex;
	align-items: baseline;
	gap: 0.25em;
	margin: 0.15em 0 0;
	font-family: var(--f-display);
	line-height: 0.85;
}
.deadline-panel-number {
	font-size: clamp(4.5rem, 3rem + 6vw, 7.5rem);
	letter-spacing: 0.01em;
}
.deadline-panel-unit {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	color: var(--text-soft);
}
.deadline-panel-note {
	margin: 0;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.deadline-panel-source {
	margin: 0.9em 0 0;
	padding-top: 0.8em;
	border-top: 1px solid var(--line);
	font-size: var(--t-micro);
	color: var(--text-faint);
}

@media (max-width: 900px) {
	.home .hero-inner { grid-template-columns: 1fr; }
	/* Op mobiel is de termijn belangrijker dan de USP-lijst, maar de kop moet
	   eerst — dus laten we de volgorde staan en maken we het paneel breed. */
	.deadline-panel { margin-top: 0.5em; }
}

/* --------------------------------------------------------------------------
   16.7  De termijn uitgeschreven
   -------------------------------------------------------------------------- */

.deadline-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(18px, 2.4vw, 32px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.deadline-phase {
	margin: 0;
	padding-top: 1em;
	border-top: 3px solid var(--accent);
}
.deadline-phase-span {
	margin: 0 0 0.5em;
	font-family: var(--f-display);
	font-size: 1.35rem;
	letter-spacing: 0.03em;
	line-height: 1;
	color: var(--accent);
}
.deadline-phase-title { margin: 0 0 0.35em; font-size: var(--t-h3); }
.deadline-phase-text { margin: 0; font-size: var(--t-small); color: var(--text-soft); }

/* Laatste fase valt buiten de termijn: grijs in plaats van rood. */
.deadline-phase:last-child { border-top-color: var(--line-strong); }
.deadline-phase:last-child .deadline-phase-span { color: var(--text-faint); }

/* --------------------------------------------------------------------------
   16.8  Diensten als dossierregels

   Geen raster met icoontegels maar een lijst met haarlijnen. De bezoeker zoekt
   zijn eigen geval op, en dat gaat sneller in een lijst dan in een raster.
   -------------------------------------------------------------------------- */

.service-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}
.service-row {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) auto;
	align-items: baseline;
	gap: clamp(12px, 2vw, 32px);
	margin: 0;
	padding: clamp(18px, 2.2vw, 26px) 0;
	border-bottom: 1px solid var(--line);
	transition: padding-left 0.18s var(--ease), background-color 0.18s var(--ease);
}
.service-row:hover {
	background: var(--accent-wash);
	padding-left: 0.7em;
}
.service-row-title {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
	line-height: 1;
	letter-spacing: 0.01em;
}
.service-row-title a {
	color: inherit;
	text-decoration: none;
}
/*
 * Eén klikvlak over de hele regel, met de titel als toegankelijke naam. De
 * pijl en de tekst zijn dus geen tweede link naar dezelfde plek — dat zou een
 * schermlezer twee keer hetzelfde laten voorlezen.
 */
.service-row-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.service-row { position: relative; }
.service-row-title a:focus-visible { outline: none; }
.service-row:has(a:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
.service-row-text { margin: 0; font-size: var(--t-small); color: var(--text-soft); }
.service-row-arrow { color: var(--accent); display: inline-flex; }
.service-row-arrow .icon { transition: transform 0.18s var(--ease); }
.service-row:hover .service-row-arrow .icon { transform: translateX(4px); }

@media (max-width: 760px) {
	.service-row {
		grid-template-columns: 1fr auto;
		row-gap: 0.4em;
	}
	.service-row-text { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   16.9  Stappen, cijfers, zaken

   De kit zet het stapnummer in de monofont. Die hebben we niet meer, en dat is
   maar goed ook: Bebas doet dit beter en het scheelt een fontbestand.
   -------------------------------------------------------------------------- */

.step-number {
	font-family: var(--f-display);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1;
	color: var(--text-faint);
	margin-bottom: 0.35em;
}
.step { border-top-width: 3px; border-top-color: var(--accent); }

.stat-value { letter-spacing: 0.01em; }
.case-card:hover { transform: none; border-color: var(--accent); }

/* --------------------------------------------------------------------------
   16.10  Artikelen: de rode maatstreep onder de kop

   Op elk artikel, elke kennisbankpagina en elke dienstpagina sluit de H1 af met
   dezelfde streep. Eén detail dat de bespoke-laag en de principe-laag aan
   elkaar knoopt zonder dat er iets aan de structuur verandert.
   -------------------------------------------------------------------------- */

.entry-title::after,
.page-title::after,
.archive-title::after {
	content: "";
	display: block;
	width: 88px;
	height: 4px;
	margin-top: 0.5em;
	background: var(--accent);
}

.shell-narrow {
	width: min(100% - (var(--gutter) * 2), 860px);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   16.11  Wat er niet mag verdwijnen

   De focusring moet zichtbaar blijven op de rode knop en op de donkere
   secties. Op --accent geeft de standaardring te weinig verschil, dus daar
   zetten we hem in de tekstkleur van de knop met een ring eromheen.
   -------------------------------------------------------------------------- */

.button-primary:focus-visible {
	outline-color: var(--on-accent);
	box-shadow: 0 0 0 5px var(--accent-deep);
}
.tone-dark :focus-visible,
.section-dark :focus-visible,
.topbar :focus-visible,
.site-footer :focus-visible {
	outline-color: #FFFFFF;
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	.termijnbalk-segment,
	.service-row,
	.service-row-arrow .icon {
		animation: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   16.12  Staging-melding

   deploy/seed.php zet boven elke juridische pagina een regel die zegt dat de
   tekst nog niet door de advocaat is vastgesteld. Die regel moet je niet over
   het hoofd kunnen zien — een melding die je wegkijkt, haalt niemand ooit weg.

   Deze opmaak mag mee naar productie: zodra de teksten zijn vastgesteld en de
   regels eruit zijn, doet hij niets meer.
   -------------------------------------------------------------------------- */

.seed-controle {
	border: 2px solid var(--warn);
	background: color-mix(in srgb, var(--warn) 12%, transparent);
	padding: 0.8em 1em;
	font-size: var(--t-small);
	color: var(--text);
}

/* --------------------------------------------------------------------------
   16.13  De beeldlaag

   Beeld op deze site laat een situatie zien, geen persoon. Iemand langs de weg
   met een telefoon aan zijn oor, handen op een keukentafel bij een brief, twee
   mensen aan tafel. Dat is waar de bezoeker vandaan komt.

   Vormregel: geen afronding, geen kader, geen schaduw. Het beeld staat er als
   een afdruk in een dossier — recht, en met een lijn eronder.

   Herkomst en de grens tussen sfeerbeeld en portret staan in
   assets/images/HERKOMST.md. Kort: een gezicht met een naam eronder verzinnen
   we niet, een moment langs de weg wel.
   -------------------------------------------------------------------------- */

.hero-band,
.deadline-figure,
.people-figure { position: relative; margin: 0; }

.hero-band img,
.deadline-figure img,
.people-figure img,
.entry-content img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/*
 * De band onder de hero loopt van rand tot rand, ook al zit hij in een sectie
 * met een marge. 100vw met een negatieve inspring werkt hier zonder scrollbar-
 * sprong, want de body kan niet horizontaal scrollen.
 */
.hero-band {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: clamp(32px, 4vw, 56px);
	/*
	 * `clip` en niet `hidden`, en dat verschil is hier niet cosmetisch.
	 *
	 * `overflow: hidden` maakt van dit vlak een scroll-container. De parallax
	 * op het beeld en de maatverdeling onderin hangen aan `animation-timeline:
	 * view()`, en die kijkt naar de dichtstbijzijnde scroll-container — dus
	 * naar dit vlak, dat zelf nooit scrolt. Beide animaties bevriezen dan
	 * halverwege: ze staan er, ze zien er zelfs plausibel uit, en ze bewegen
	 * nooit.
	 *
	 * `overflow: clip` knipt net zo goed af maar maakt géén scroll-container,
	 * dus valt de tijdlijn terug op het document. Zie blok 16.17.
	 */
	overflow: clip;
}
.hero-band img {
	height: clamp(190px, 26vw, 380px);
	object-fit: cover;
	object-position: center 42%;
	/* In donker thema is de foto zelf al donker; in licht thema mag hij een
	   fractie terug zodat de tekst erboven het zwaarst blijft. */
	filter: saturate(0.92);
}
.hero-band-rule {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	gap: 4px;
}
.hero-band-rule .termijnbalk-segment { height: 6px; }

/* De brief bij de termijnsectie: breed en laag, boven de vier fasen. */
.deadline-figure {
	margin-bottom: clamp(28px, 3.5vw, 44px);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.deadline-figure img {
	height: clamp(180px, 22vw, 300px);
	object-fit: cover;
	object-position: center 62%;
}

/* --------------------------------------------------------------------------
   16.14  Wie je spreekt

   Twee kolommen: het beeld links, de tekst rechts. De naam eronder is een
   placeholder en blijft dat tot de advocaat bekend is — vandaar ook de
   verantwoordingsregel onder de kaart. Die regel is geen kleine lettertjes:
   als er beeld van mensen op een advocatensite staat, hoort de bezoeker te
   kunnen weten wie hij ziet.
   -------------------------------------------------------------------------- */

.people-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}
.people-figure img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 55%;
}
.people-copy .section-heading { margin-bottom: clamp(18px, 2vw, 26px); }
.people-copy .person { margin-bottom: 1.2em; }
.people-note {
	font-size: var(--t-micro);
	color: var(--text-faint);
	border-left: 3px solid var(--line-strong);
	padding-left: 0.9em;
	margin: 0 0 1.4em;
	max-width: 46ch;
}

@media (max-width: 900px) {
	.people-inner { grid-template-columns: 1fr; }
}

/* Beeld in een artikel: zelfde regel, haaks en met een lijn eronder. */
.entry-content figure { margin-block: 1.8em; }
.entry-content figure img { border-bottom: 3px solid var(--accent); }

/* Een review die nog ingevuld moet worden, staat er zonder sterren en met een
   stippellijn: zichtbaar een lege plek, geen halve beoordeling. */
.review.is-onbevestigd {
	border-style: dashed;
	border-color: var(--warn);
}

/* --------------------------------------------------------------------------
   16.15  De laatste ronde hoeken

   De tokens in blok 1 zetten elke --radius op nul, maar op een handvol plekken
   roept de kit 50% of --radius-pill rechtstreeks aan: de themaknop, de
   avatars, het zoekveld, de socialknoppen. Op een site waar verder niets rond
   is, valt precies die handvol op als een restje van een ander ontwerp.

   Eén uitzondering blijft staan: de intakeknop in de kop (blok 16.3). Juist
   omdat niets anders rond is, springt die eruit zonder groter te worden.
   -------------------------------------------------------------------------- */

.theme-toggle,
.review-avatar,
.person-photo img,
.person-photo-empty,
.author-avatar-image,
.author-card-socials a,
.search-field,
.search-submit,
.logo-chip { border-radius: 0; }

/* --------------------------------------------------------------------------
   16.16  De beeldband bijstellen

   Twee dingen die pas op het scherm bleken. De uitsnede sneed het hoofd van de
   man er half af — bij een band van 3,8:1 uit een 16:9-bron gaat er veel
   verticaal weg, dus de uitsnede moet hoger aangrijpen. En de termijnbalk
   onderin viel weg tegen de foto: op een egale ondergrond werkt een verloop
   van vol naar bijna niets, op een foto niet.
   -------------------------------------------------------------------------- */

.hero-band img { object-position: center 30%; }

.hero-band-rule {
	inset: auto 0 0 0;
	gap: 4px;
	padding: 5px;
	background: var(--night-deep);
}
.hero-band-rule .termijnbalk-segment {
	height: 7px;
	/* Ondergrens op 0,45 in plaats van 0,25: op een foto moet ook het laatste
	   segment nog te zien zijn, anders lijkt de balk gewoon te stoppen. */
	opacity: calc(1.05 - (var(--i) * 0.055));
}

/* --------------------------------------------------------------------------
   16.17  Beweging op scroll

   Eén beweging, in twee richtingen. Alles wat een lijn of een balk is, vult
   zich van links naar rechts — dat is de termijnbalk, doorgetrokken naar de
   rest van de pagina. Alles wat een foto is, komt van onderaf in beeld. Verder
   niets: geen zweven, geen inzoomen, geen elementen die van opzij komen
   binnenvliegen.

   Dat het van links naar rechts gaat is geen willekeur. Op deze site loopt er
   een klok, en een balk die volloopt is precies wat dat betekent.

   Technisch: dit zijn CSS scroll-driven animaties (`animation-timeline: view()`),
   geen JavaScript. Dus geen scroll-listener, geen werk op de hoofddraad, en
   geen halve pagina die blanco blijft als een waarnemer niet afgaat. Browsers
   die het niet kennen, tonen alles gewoon staand — dat is de terugval, en die
   is prima.

   Twee schillen eromheen:
   - `prefers-reduced-motion: no-preference` — wie beweging uitzet, krijgt niets;
   - `@supports (animation-timeline: view())` — anders geen enkele regel actief.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {

		/* ---- De wissen ------------------------------------------------- */

		@keyframes veeg-rechts {
			from { clip-path: inset(0 100% 0 0); }
			to   { clip-path: inset(0 0 0 0); }
		}
		@keyframes veeg-omhoog {
			from { clip-path: inset(0 0 100% 0); }
			to   { clip-path: inset(0 0 0 0); }
		}

		/*
		 * Lijnen en balken: van links naar rechts.
		 *
		 * De maatverdelingen boven de inhoudsopgave en boven de voet lopen vol
		 * terwijl je ze passeert. Ze staan er als pseudo-element, en die kunnen
		 * hun eigen tijdlijn hebben — de streep hoeft dus geen eigen markup.
		 */
		.rule-termijn,
		.toc::before,
		.site-footer::before,
		.hero-band-rule {
			animation: veeg-rechts linear both;
			animation-timeline: view();
			animation-range: entry 15% cover 45%;
		}

		/*
		 * De dienstenlijst en de vier termijnfasen: elke regel tekent zichzelf,
		 * inclusief zijn haarlijn. Elk element krijgt zijn eigen tijdlijn, dus
		 * de trapsgewijze volgorde komt vanzelf uit de plek op de pagina — geen
		 * teller, geen vertraging die je moet bijhouden.
		 */
		.service-row,
		.deadline-phase {
			animation: veeg-rechts linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 38%;
		}

		/* Foto's: van onderaf, met dezelfde harde rand. */
		.deadline-figure img,
		.people-figure img {
			animation: veeg-omhoog linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 42%;
		}

		/* ---- De beeldband: de weg schuift onder je door ------------------ */

		/*
		 * Het beeld staat 30% hoger dan de band en verschuift terwijl je
		 * scrolt. Alleen hier, en alleen hier omdat het over een weg gaat:
		 * parallax op een tekstblok is decoratie, parallax op een weg is de weg.
		 *
		 * De hoogte gaat alléén binnen dit @supports-blok omhoog, dus zonder
		 * ondersteuning verschuift er niets en verspringt er ook niets.
		 */
		@keyframes weg-schuift {
			from { transform: translateY(-20%); }
			to   { transform: translateY(0); }
		}

		.hero-band img {
			height: calc(clamp(190px, 26vw, 380px) * 1.3);
			will-change: transform;
			animation: weg-schuift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}

		/* ---- De kop, bij het laden -------------------------------------- */

		/*
		 * De rode regel staat boven de vouw, dus die heeft geen scroll nodig.
		 * Hij wist zich in nadat de eerste regel staat — in die volgorde, want
		 * de vraag komt vóór het antwoord.
		 */
		.hero-title-sub {
			animation: veeg-rechts 0.7s var(--ease) 0.15s both;
		}
	}
}