/*
Theme Name: The High Value Club
Theme URI: https://thehighvalueclub.nl/
Author: SiteJob
Author URI: https://sitejob.nl/
Description: Maatwerkthema voor The High Value Club. 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: the-high-value-club
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 — The High Value Club.
	 *
	 * --brand is de exacte kleur uit het logo (#8D7534). Die kleur is een
	 * middentoon: op wit haalt hij 4,1:1 en op zwart 4,3:1, dus voor tekst is
	 * hij in beide thema's te krap. Daarom staat hij hier als merkkleur voor
	 * vlakken, lijnen en het beeldmerk, en pakt --accent per thema de variant
	 * die wél leesbaar is: dieper in licht, lichter in donker.
	 */
	--brand:       #8D7534;
	--brand-deep:  #6F5C28;
	--brand-light: #B99B52;
	--night:       #1B1A18;
	--night-deep:  #131313;
	--night-warm:  #2D2620;

	/* Neutralen — warm, met een zweem van het goud. Een koel grijs naast dit
	   merk oogt meteen goedkoop. */
	--ink:       #1A1815;
	--ink-soft:  #4A4438;
	--paper:     #F7F4EE;
	--white:     #FFFDF9;
	--mist:      #EFE9DD;
	--line-soft: #E0D8C8;
	--line-hard: #C6B99C;

	/* Status */
	--ok:     #3F7A46;
	--warn:   #A9691C;
	--danger: #A93B2B;

	/* Betekenis-tokens — licht thema */
	--bg:           var(--paper);
	--surface:      var(--white);
	--surface-alt:  var(--mist);
	--surface-sink: #EDE7DA;
	--text:         var(--ink);
	--text-soft:    var(--ink-soft);
	--text-faint:   #6E6656;
	--line:         var(--line-soft);
	--line-strong:  var(--line-hard);
	--accent:       var(--brand-deep);
	--accent-deep:  #57471E;
	--accent-wash:  rgba(141, 117, 52, 0.10);
	--on-accent:    #FFFDF9;
	--star:         var(--brand);

	/* Vorm — bijna hoekig. Het beeldmerk is een zeshoek en de club is strak;
	   ronde hoeken van 20px maken er een zorgverzekeraar van. */
	--radius-xl:   6px;
	--radius-lg:   4px;
	--radius:      3px;
	--radius-sm:   2px;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 8px -2px rgba(26, 24, 21, 0.10);
	--shadow:    0 18px 40px -24px rgba(26, 24, 21, 0.30);
	--shadow-lg: 0 40px 80px -40px rgba(26, 24, 21, 0.45);

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

	/*
	 * Type — zelf gehost, zie assets/fonts/fonts.css.
	 *
	 * Archivo staat waar Manier Bold stond op de huidige site, Figtree waar
	 * Panton Heavy stond. Die twee zijn daar trial-versies; deze twee mogen
	 * gewoon op een productiesite staan.
	 *
	 * Archivo heeft een breedte-as, en die as doet hier het werk. Het beeldmerk
	 * is een smal verticaal schild; koppen staan daarom op --w-smal. Labels
	 * staan er precies tegenover op --w-breed. Dat contrast tussen smal en
	 * breed vervangt een tweede lettertype — zie blok 16.
	 */
	--f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--f-body:    "Figtree", -apple-system, "Segoe UI", system-ui, sans-serif;
	--f-mono:    ui-monospace, "SFMono-Regular", monospace;

	--w-smal:   68%;
	--w-normaal: 88%;
	--w-breed:  118%;

	--t-hero:  clamp(3rem, 1.1rem + 7.2vw, 6.5rem);
	--t-h1:    clamp(2.3rem, 1.4rem + 3.4vw, 4rem);
	--t-h2:    clamp(1.85rem, 1.25rem + 2.3vw, 3rem);
	--t-h3:    clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
	--t-lead:  clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
	--t-body:  1rem;
	--t-small: 0.875rem;
	--t-micro: 0.78rem;

	/*
	 * Eén reeks, geen tweede ernaast. --ease is de standaard; --ease-zet is
	 * dezelfde curve met meer rem aan het eind, voor iets dat op zijn plaats
	 * valt in plaats van aan komt zweven — de cellen van de raat.
	 */
	--ease:     cubic-bezier(0.22, 0.68, 0.35, 1);
	--ease-zet: cubic-bezier(0.16, 0.84, 0.28, 1);

	color-scheme: light dark;
}

/* Donker thema — rollen omgedraaid, accent opgehelderd zodat het leesbaar blijft. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:           var(--night-deep);
		--surface:      var(--night);
		--surface-alt:  var(--night-warm);
		--surface-sink: #0E0E0E;
		--text:         #F2EFE9;
		--text-soft:    #C3BCAE;
		--text-faint:   #8D8579;
		--line:         #2E2A24;
		--line-strong:  #453E33;
		--accent:       var(--brand-light);
		--accent-deep:  #D3B778;
		--accent-wash:  rgba(185, 155, 82, 0.14);
		--on-accent:    #12100C;
		--shadow-sm:    0 2px 8px -2px rgba(0, 0, 0, 0.5);
		--shadow:       0 18px 40px -24px rgba(0, 0, 0, 0.7);
		--shadow-lg:    0 40px 80px -40px rgba(0, 0, 0, 0.8);
	}
}

/* Zelfde set, maar dan omdat de bezoeker donker koos in plaats van het systeem. */
:root[data-theme="dark"] {
	--bg:           var(--night-deep);
	--surface:      var(--night);
	--surface-alt:  var(--night-warm);
	--surface-sink: #0E0E0E;
	--text:         #F2EFE9;
	--text-soft:    #C3BCAE;
	--text-faint:   #8D8579;
	--line:         #2E2A24;
	--line-strong:  #453E33;
	--accent:       var(--brand-light);
	--accent-deep:  #D3B778;
	--accent-wash:  rgba(185, 155, 82, 0.14);
	--on-accent:    #12100C;
	--shadow-sm:    0 2px 8px -2px rgba(0, 0, 0, 0.5);
	--shadow:       0 18px 40px -24px rgba(0, 0, 0, 0.7);
	--shadow-lg:    0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

/*
 * 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, 253, 249, 0.05);
	--surface-alt: rgba(255, 253, 249, 0.09);
	--text:        #F2EFE9;
	--text-soft:   #C3BCAE;
	--text-faint:  #8D8579;
	--line:        rgba(255, 253, 249, 0.13);
	--line-strong: rgba(255, 253, 249, 0.24);
	--accent:      var(--brand-light);
	--accent-wash: rgba(185, 155, 82, 0.14);
	--on-accent:   #12100C;
}

/* ==========================================================================
   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;
	/*
	 * Vangnet: horizontaal scrollen is altijd een fout.
	 *
	 * Maar let op wélke van de twee hier staat. `overflow-x: hidden` maakt de
	 * body een scrollcontainer, en daarmee werkt `position: sticky` nergens op
	 * de pagina meer — de meelopende zijkolom bleef gewoon staan en niemand kon
	 * zien waarom. `clip` knipt hetzelfde weg zonder scrollcontainer te worden.
	 * De @supports houdt het oude gedrag voor browsers die clip niet kennen.
	 *
	 * VERBETERING VOOR DE KIT.
	 */
	overflow-x: hidden;
}

@supports (overflow-x: clip) {
	body { overflow-x: clip; }
}

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: 0; 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;
	/* transform in plaats van top: dezelfde beweging, maar zonder layout. */
	transform: translateY(-100%);
	transition: transform 0.15s var(--ease);
}
.skip-link:focus-visible { transform: translateY(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;
}

/*
 * Een review die nog ingevuld moet worden, staat er zonder sterren (zie
 * template-parts/blocks/review.php) en met een stippellijn eromheen. Zo leest
 * hij als een lege plek en niet als een halve beoordeling.
 */
.review.is-onbevestigd {
	border-style: dashed;
	border-color: var(--warn);
}

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

/*
 * Verplaatsing bij hover staat achter een aanwijzer-check.
 *
 * Op een touchscreen blijft :hover na een tik hangen tot je ergens anders tikt.
 * Een kaart die dan 2px omhoog blijft staan leest als een fout in de pagina.
 * Kleur- en schaduwwissels laten we ongated: die vallen niet op als ze blijven
 * plakken. VERBETERING VOOR DE KIT.
 */
@media (hover: hover) and (pointer: fine) {
	.button:hover { transform: translateY(-1px); }
	.button:active { transform: translateY(0); }
	.arrow-link:hover .icon { transform: translateX(3px); }
	.service-card:hover,
	.case-card:hover,
	.product-card:hover,
	.card:hover { transform: translateY(-2px); }
}

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

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

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	color: var(--text-soft);
	cursor: pointer;
	transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--text); }
.theme-toggle-icon { display: none; }
:root[data-theme="dark"] .theme-toggle-icon.is-sun { display: block; }
:root[data-theme="light"] .theme-toggle-icon.is-moon { display: block; }
:root:not([data-theme]) .theme-toggle-icon.is-moon { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .theme-toggle-icon.is-moon { display: none; }
	:root:not([data-theme]) .theme-toggle-icon.is-sun { display: block; }
}

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

/*
 * De sterren in een review kregen geen eigen kleur en erfden daardoor de
 * tekstkleur: witte sterren op een donkere kaart. .rating-stars had die regel
 * wel. Hoort terug naar de kit.
 */
.review-stars { display: inline-flex; gap: 2px; color: var(--star); }
.review-stars .icon { width: 1em; height: 1em; }

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

/*
 * Eén linkermarge voor de hele pagina.
 *
 * Hier stond `max-width: 62ch` op een element dat óók .shell heeft, en die
 * centreert. De kop kwam daardoor op een andere marge te staan dan de tekst
 * eronder (die op 800px stond) en dan de CTA (die op de volle 1200px stond) —
 * drie linkerkanten op één pagina. De leesbreedte hoort de regellengte te
 * begrenzen, niet de kolom te verschuiven, dus hij staat nu op de kinderen.
 *
 * VERBETERING VOOR DE KIT.
 */
.resource-header-inner { max-width: var(--shell-max); }
.resource-title { margin-bottom: 0.35em; max-width: 26ch; }
.resource-intro { font-size: var(--t-lead); color: var(--text-soft); max-width: 62ch; }

/* 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;
}
/* Zelfde reden: de leeskolom wordt 800px breed, maar hij blijft links staan in
   plaats van dat de hele shell naar het midden krimpt. */
.resource-body.is-single-column { grid-template-columns: minmax(0, 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 -------------------------------------- */

/*
 * De zijkolom loopt mee met de tekst. Twee dingen moeten daarvoor kloppen:
 * `sticky` op de binnenkant én een buitenkant die de volle rijhoogte krijgt.
 * `.resource-body` staat op `align-items: start`, en daardoor was de zijkolom
 * precies zo hoog als zijn inhoud — sticky had dan geen enkele ruimte om in te
 * bewegen en scrollde gewoon mee de pagina uit.
 *
 * VERBETERING VOOR DE KIT.
 */
.resource-aside { align-self: stretch; }
.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); }

/*
 * In het donkere thema is de paginakleur bijna dezelfde zwarttint als deze
 * kaart, en dan verdwijnt het blok. Een tint lichter maakt er weer een kaart
 * van. De hairline hierboven doet in het lichte thema hetzelfde werk.
 */
:root[data-theme="dark"] .cta-section.tone-dark { background: var(--night); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cta-section.tone-dark { background: var(--night); }
}

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

/*
 * Een sjabloon dat zelf al weet wat er moet bewegen noteert `data-anim-op`.
 * Die nul hangt aan .js-anim, en die klasse wordt in de <head> gezet — zie
 * hvc_anim_klasse() in inc/assets.php. Twee dingen worden daarmee opgelost:
 * zonder JavaScript komt de klasse er nooit en blijft alles gewoon zichtbaar,
 * en mét JavaScript staat de nul er vóór het eerste verfje, zodat de hero niet
 * eerst verschijnt om daarna alsnog weg te duiken.
 *
 * VERBETERING VOOR DE KIT — dit hoort bij het onthullingssysteem in blok 14.
 */
.js-anim [data-anim-op] { 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; }
[data-anim="zet"].is-in  { animation-name: anim-zet; animation-timing-function: var(--ease-zet); animation-duration: 0.5s; }

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

/*
 * "zet" is de enige van de vier die een eigen richting per element kent: het
 * element komt van --dx/--dy vandaan en valt op zijn plaats. Bedoeld voor een
 * groep die zich sluit — losse stukken die één vlak worden. Zonder --dx/--dy
 * blijft er een simpele schaal over, dus het is veilig als terugval.
 *
 * VERBETERING VOOR DE KIT — dit hoort bij de andere drie in blok 14.
 */
@keyframes anim-zet {
	from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.86); }
	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; }
	.js-anim [data-anim-op] { opacity: 1; }
	.reading-progress { display: none; }
	.button:hover,
	.card:hover,
	.service-card:hover,
	.case-card:hover,
	.dienst:hover,
	.vestiging:hover,
	.product-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 — De raat

   Het beeldmerk van The High Value Club is geen zeshoek maar een schild:
   geschuinde bovenhoeken, rechte zijkanten, een punt naar beneden. Die vorm is
   hier het bouwblok van de hele site — van 9px als opsommingsteken tot 330px
   als beelddrager.

   Eén regel houdt het systeem overeind:

       Een cel bevat beeld of het merk. Nooit lopende tekst.

   Tekst in een schuine vorm loopt altijd tegen de kanten aan, en dat is precies
   waarom de meeste zeshoek-sites goedkoop ogen. Hier dragen de cellen het
   beeld en staat de tekst er vrij naast of onder. Geen van beide zit in een
   kaartje met een randje.

     16.1  De cel en de raat
     16.2  Typografie — smal tegenover breed
     16.3  Sitehoofd
     16.4  Hero
     16.5  Herkenning
     16.6  Diensten
     16.7  Methode
     16.8  Ervaringen
     16.9  De club
     16.10 Vestigingen
     16.11 Artikelen
     16.12 Slot
     16.13 Beweging
   ========================================================================== */

/* ---- 16.1 De cel en de raat --------------------------------------------- */

:root {
	/*
	 * Het schild, symmetrisch gemaakt.
	 *
	 * Het logo heeft bovenaan een schuine kant en onderaan een punt — boven en
	 * onder dus verschillend. Zo'n vorm sluit niet aan op zijn buurman. De cel
	 * hieronder heeft boven én onder een punt van 16%. Dezelfde geometrie,
	 * alleen sluitend, en pas dan ontstaat er een raat.
	 */
	--schild:   polygon(50% 0%, 100% 16%, 100% 84%, 50% 100%, 0% 84%, 0% 16%);
	--cel-hoog: 1.5;   /* hoogte = breedte × deze factor */
	--cel-punt: 0.16;  /* dezelfde 16%, als getal — nodig voor de nesting */
	--cel-gat:  5px;
	--cel-b:    clamp(76px, 8.4vw, 122px);

	/*
	 * Het waas over de hero. Dit is de enige plek in dit bestand met een kleur
	 * die niet uit een token komt, en dat kan niet anders: een verloop heeft
	 * doorzichtige tussenstops nodig en --night-deep kent geen alfa. Het zijn
	 * exact de waarden van --night-deep (#131313).
	 */
	--waas-vol:  rgba(19, 19, 19, 0.92);
	--waas-half: rgba(19, 19, 19, 0.34);
	--waas-weg:  rgba(19, 19, 19, 0);

	/*
	 * De ondergrond van een donkere sectie. In het lichte thema is dat het
	 * diepste zwart, want dan is het contrast met de pagina eromheen het punt.
	 * Staat het hele thema al donker, dan gaat hij juist een tint omhoog —
	 * anders valt het verschil tussen een donkere sectie en de gewone pagina
	 * volledig weg en is het ritme van de homepage verdwenen.
	 */
	--sectie-donker: var(--night-deep);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --sectie-donker: var(--night); }
}
:root[data-theme="dark"] { --sectie-donker: var(--night); }

.section-dark,
.slot { background: var(--sectie-donker); }

.cel {
	/*
	 * display:block is hier niet optioneel. De cel is een <span>, en een inline
	 * element negeert breedte en hoogte. In een raatrij valt dat niet op — daar
	 * is hij flexitem en wordt hij vanzelf geblokkeerd — maar overal waar hij in
	 * een link of een figure staat wordt hij anders 0×0 en verdwijnt het beeld
	 * zonder dat er iets van kapot lijkt.
	 */
	display: block;
	position: relative;
	flex: none;
	inline-size: var(--cel-b);
	block-size: calc(var(--cel-b) * var(--cel-hoog));
	clip-path: var(--schild);
	background: var(--cel-naad, transparent);
}

/*
 * De binnenkant zit --cel-rand kleiner dan de cel zelf. Staat er een naadkleur
 * op de cel, dan blijft daar een gouden haarlijn van over rondom het schild.
 * Een border kan hier niet: clip-path knipt die gewoon weg.
 */
.cel-in {
	position: absolute;
	inset: var(--cel-rand, 0);
	display: block;
	clip-path: var(--schild);
	overflow: hidden;
	background: var(--night);
}

.cel-in img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Beeld — de standaardcel. */
.cel--beeld { --cel-naad: transparent; --cel-rand: 0; }

/*
 * Lijn — leeg vlak met een gouden haarlijn. Dit is bewust het meest
 * voorkomende celtype in de hero: de raat moet structuur zijn, geen
 * fotogalerij. Twintig foto's naast elkaar is een collage, geen merk.
 */
.cel--lijn { --cel-naad: var(--brand); --cel-rand: 1.2px; }
.cel--lijn .cel-in { background: var(--night-deep); }

/* Vol — één massieve gouden cel per scherm, niet meer. Die ene bepaalt waar
   het oog begint. */
.cel--vol { --cel-naad: none; --cel-rand: 0; }
.cel--vol .cel-in { background: var(--brand); }

/* Merk — het beeldmerk in een cel. */
.cel--merk { --cel-naad: var(--brand); --cel-rand: 1.2px; }
.cel--merk .cel-in {
	background: var(--night-warm);
	display: grid;
	place-items: center;
}
.cel--merk img {
	inline-size: 34%;
	block-size: auto;
	object-fit: contain;
}

.raat {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.raat-rij {
	display: flex;
	gap: var(--cel-gat);
	justify-content: center;
}

/*
 * De volgende rij schuift omhoog tot in de inkeping van de rij erboven — dat
 * is precies de punthoogte. De halve gat-correctie houdt de naad overal even
 * breed; zonder die correctie lopen de schuine kanten dichter op elkaar dan de
 * rechte.
 */
.raat-rij + .raat-rij {
	margin-block-start: calc(
		var(--cel-b) * var(--cel-hoog) * var(--cel-punt) * -1 + var(--cel-gat) * 0.5
	);
}

/*
 * Twee rijen met evenveel cellen moeten een halve cel verspringen, anders
 * staan de punten op elkaar in plaats van in de inkeping. Padding in plaats
 * van transform: bij justify-content:center verschuift de inhoud dan precies
 * de helft, en de rij blijft gewoon meedoen in de hoogteberekening.
 */
.raat-rij.is-half { padding-inline-start: calc(var(--cel-b) + var(--cel-gat)); }

/*
 * Een klikbare cel. De cel is meestal een tweede link naar dezelfde plek als
 * de kop eronder; die krijgt daarom aria-hidden en tabindex="-1" in het
 * sjabloon, zodat een schermlezer de bestemming één keer hoort in plaats van
 * twee keer.
 */
.cel-link {
	display: block;
	inline-size: max-content;
	border-radius: 0;
}

/* ---- 16.2 Typografie — smal tegenover breed ----------------------------- */

/*
 * Koppen krijgen de verhouding van het schild: hoog en smal. Labels staan er
 * precies tegenover — breed en gespatieerd. Die twee uitersten van één
 * breedte-as vervangen hier een tweede lettertype. Zie assets/fonts/fonts.css.
 */
h1, h2 {
	font-stretch: var(--w-smal);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.005em;
}

h3, h4 {
	font-stretch: var(--w-normaal);
	font-weight: 650;
	letter-spacing: -0.002em;
}

.eyebrow {
	font-family: var(--f-display);
	font-stretch: var(--w-breed);
	font-weight: 600;
	font-size: var(--t-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Het stipje voor een eyebrow is elders een rondje. Hier is het het merk. */
.eyebrow-dot {
	inline-size: 7px;
	block-size: 10px;
	border-radius: 0;
	background: var(--accent);
	clip-path: var(--schild);
}

/* Caps alleen waar de tekst een label of een leus is, nooit op een hele zin. */
.kop-caps {
	text-transform: uppercase;
	letter-spacing: 0.002em;
	line-height: 0.9;
	font-weight: 800;
}

/* ---- 16.3 Sitehoofd ------------------------------------------------------ */

/*
 * Het sitehoofd staat in beide thema's donker. Reden: er is maar één logo, en
 * dat is de variant voor een donkere ondergrond. In het lichte thema zou het
 * woordmerk anders wegvallen. Zodra de klant een lichte variant aanlevert kan
 * dit blok weg — zie AANLEVERLIJST.md §5.
 */
.site-header {
	background: var(--night-deep);
	border-block-end: 1px solid rgba(185, 155, 82, 0.2);
	color: #F2EFE9;

	/*
	 * Let op: --surface is hier dekkend, anders dan in .tone-dark. Het
	 * uitklapmenu op telefoon gebruikt dit token als eigen ondergrond, en met
	 * 5% wit schemerde de hele pagina er gewoon doorheen — je las het menu
	 * dwars door de voettekst. Een doorzichtige surface werkt alleen als er een
	 * vlak achter zit, en een paneel dat over de pagina klapt heeft dat niet.
	 */
	--surface:     var(--night);
	--surface-alt: var(--night-warm);
	--text:        #F2EFE9;
	--text-soft:   #C3BCAE;
	--text-faint:  #8D8579;
	--line:        rgba(255, 253, 249, 0.13);
	--line-strong: rgba(255, 253, 249, 0.24);
	--accent:      var(--brand-light);
	--accent-wash: rgba(185, 155, 82, 0.14);
	--on-accent:   #12100C;
}

/* Het paneel schildert ook zelf, voor het geval iemand later aan de tokens
   hierboven komt. Het klapt over de pagina heen en moet dus dekken. */
.header-panel { background: var(--night-deep); }

/* ---- 16.4 Hero ----------------------------------------------------------- */

.home-hero {
	position: relative;
	display: grid;
	align-items: center;
	overflow: hidden;
	background: var(--night-deep);
	min-block-size: min(92vh, 810px);
	padding-block: clamp(72px, 9vw, 116px);
}

/*
 * De raat hangt buiten de hero. Dat is het punt: hij loopt aan drie kanten
 * door, zodat hij leest als een stuk van iets groters in plaats van als een
 * plaatje dat toevallig rechts staat.
 */
.home-hero-raat {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: clamp(-240px, -11vw, -70px);
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
	--cel-b: clamp(84px, 9.6vw, 138px);
}

/* Waas, zodat de kop leesbaar blijft over de cellen heen. */
.home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		97deg,
		var(--waas-vol) 0%,
		var(--waas-vol) 44%,
		var(--waas-half) 68%,
		var(--waas-weg) 95%
	);
}

.home-hero-inner {
	position: relative;
	z-index: 2;
}

/*
 * De maatbeperking hoort op de kinderen, niet op .home-hero-inner zelf. Die
 * heeft ook de klasse .shell, en die centreert — een max-inline-size erop
 * schuift de hele kolom naar het midden van het scherm in plaats van hem links
 * te houden.
 */
.home-hero-title { max-inline-size: 40rem; }
.home-hero .usp-list { max-inline-size: 46rem; }

.home-hero-title {
	font-size: var(--t-hero);
	font-stretch: var(--w-smal);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.88;
	letter-spacing: -0.012em;
	text-wrap: balance;
	margin-block: 0.2em 0.34em;
}

.home-hero-lead {
	font-size: var(--t-lead);
	color: var(--text-soft);
	max-inline-size: 34rem;
}

.home-hero .hero-actions { margin-block-start: clamp(26px, 3.5vw, 40px); }

.home-hero .usp-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px clamp(18px, 2.6vw, 34px);
	margin-block-start: clamp(28px, 4vw, 46px);
	padding: 0;
	list-style: none;
}
.home-hero .usp-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--t-small);
	color: var(--text-soft);
}

/* Het merk keert terug op 9px als opsommingsteken. */
.home-hero .usp-list svg { display: none; }
.home-hero .usp-list li::before {
	content: "";
	flex: none;
	inline-size: 9px;
	block-size: 13px;
	background: var(--accent);
	clip-path: var(--schild);
}

@media (max-width: 900px) {
	.home-hero { min-block-size: 0; }
	.home-hero-raat { inset-inline-end: clamp(-320px, -30vw, -150px); }
	.home-hero::after {
		background: linear-gradient(
			92deg,
			var(--waas-vol) 0%,
			var(--waas-vol) 56%,
			var(--waas-half) 84%,
			var(--waas-weg) 100%
		);
	}
}

/*
 * Op een smal scherm past de wand niet meer naast de tekst. Hij zou er dan
 * dwars overheen liggen, en geen waas houdt een kop leesbaar boven een foto van
 * een halve schermbreedte. Hij zakt daarom onder de tekst en wordt een band die
 * aan beide kanten doorloopt — dezelfde wand, alleen aangesneden.
 *
 * Drie rijen in plaats van vijf: vijf duwt de rest van de pagina een heel
 * scherm naar beneden. De tweede rij moet zijn negatieve marge kwijt, want die
 * hoorde bij de rij die nu verborgen is en trekt de band anders half weg.
 */
@media (max-width: 760px) {
	.home-hero {
		display: flex;
		flex-direction: column;
		padding-block: clamp(40px, 9vw, 64px) 0;
	}
	.home-hero::after { display: none; }

	/* De kop leest eerst, de band komt eronder. In de opmaak staat de raat
	   vóór de tekst omdat hij op brede schermen de achtergrond is. */
	.home-hero-raat {
		order: 1;
		position: relative;
		inset: auto;
		transform: none;
		margin-block-start: clamp(30px, 7vw, 46px);
		--cel-b: clamp(66px, 17vw, 98px);
	}
	.home-hero-raat .raat-rij:first-child,
	.home-hero-raat .raat-rij:last-child { display: none; }
	.home-hero-raat .raat-rij:nth-child(2) { margin-block-start: 0; }
}

/* ---- 16.5 Herkenning ----------------------------------------------------- */

.herkenning-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(30px, 6vw, 88px);
	align-items: center;
}

.herkenning-beeld { margin: 0; }
.herkenning-beeld .cel { --cel-b: clamp(190px, 25vw, 320px); }

.herkenning-slot {
	font-family: var(--f-display);
	font-stretch: var(--w-normaal);
	font-weight: 600;
	font-size: var(--t-h3);
	line-height: 1.25;
	border-inline-start: 2px solid var(--accent);
	padding-inline-start: clamp(14px, 2vw, 22px);
	margin-block-start: clamp(20px, 3vw, 30px);
}

@media (max-width: 860px) {
	.herkenning-grid { grid-template-columns: minmax(0, 1fr); }
	.herkenning-beeld { justify-self: start; }
}

/* ---- 16.6 Diensten ------------------------------------------------------- */

.dienst-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 30px);
	align-items: start;
}

/*
 * Even diensten zakken. Dat is geen versiering: het is de verspringing van de
 * raat, teruggebracht tot iets wat naast leesbare tekst kan staan. Een echte
 * nesting zou de cellen anderhalve celhoogte uit elkaar duwen.
 */
.dienst-grid > :nth-child(even) { margin-block-start: clamp(20px, 3.6vw, 52px); }

/* Onderaan een dienstpagina staan er drie in plaats van vier. Zonder deze regel
   houden ze de vier-kolomsindeling aan en blijft rechts een gat open. */
.dienst-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dienst {
	display: grid;
	justify-items: start;
	gap: 0;
	background: none;
	border: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}
.dienst .cel { --cel-b: clamp(120px, 15.5vw, 214px); }

.dienst-naam {
	font-family: var(--f-display);
	font-stretch: var(--w-normaal);
	font-weight: 700;
	font-size: var(--t-h3);
	line-height: 1.1;
	margin-block: clamp(16px, 2vw, 22px) 0;
	text-wrap: balance;
}
.dienst-tekst {
	font-size: var(--t-small);
	color: var(--text-soft);
	margin-block-start: 0.6em;
}
.dienst-link {
	margin-block-start: 0.9em;
	font-family: var(--f-display);
	font-stretch: var(--w-breed);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.dienst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/*
 * Naast elkaar op een smal scherm: cel links, tekst rechts. Let op waar de
 * rijspanning staat — op de link, niet op de cel. De cel zit ín die link en is
 * dus geen rasteritem; stond de spanning op de cel, dan viel de alinea in de
 * linkerkolom en werd die zo breed als de tekst. De sectie loopt dan buiten het
 * scherm zonder dat er iets scheef uitziet.
 */
@media (max-width: 520px) {
	.dienst-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 6vw, 36px); }
	.dienst-grid > :nth-child(even) { margin-block-start: 0; }
	.dienst { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; }
	.dienst > .cel-link { grid-row: 1 / span 3; }
	.dienst .cel { --cel-b: 92px; }
	.dienst-naam { margin-block-start: 0; }
}

/* ---- 16.7 Methode -------------------------------------------------------- */

/*
 * Genummerd, en dat mag hier: kennismaking → beweegscan → transformatie is een
 * echte volgorde. Je kunt stap twee niet voor stap één doen. Waar nummers geen
 * volgorde aanduiden staan ze er niet.
 */
.methode-rij {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 4vw, 60px);
}

/* De tijdlijn loopt achter de nummers door; de nummers slaan er een gat in. */
.methode-rij::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0.66em;
	block-size: 1px;
	background: var(--line-strong);
}

.methode-stap {
	display: grid;
	justify-items: start;
	background: none;
	border: 0;
	padding: 0;
}

.methode-nr {
	position: relative;
	font-family: var(--f-display);
	font-stretch: var(--w-breed);
	font-weight: 700;
	font-size: var(--t-micro);
	letter-spacing: 0.2em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	background: var(--bg);
	padding-inline-end: 14px;
	margin-block-end: clamp(20px, 3vw, 34px);
}

.methode-stap .cel { --cel-b: clamp(112px, 13.5vw, 176px); }

.methode-naam {
	font-family: var(--f-display);
	font-stretch: var(--w-normaal);
	font-weight: 700;
	font-size: var(--t-h3);
	margin-block: clamp(16px, 2vw, 22px) 0.5em;
}
.methode-tekst { font-size: var(--t-small); color: var(--text-soft); }

/* Vier kinderen in twee kolommen: hier wijzen we elk element zijn plek aan in
   plaats van het aan de automatische plaatsing over te laten, want het nummer
   staat vóór de cel in de opmaak en zou anders de kolommen omdraaien. */
@media (max-width: 760px) {
	.methode-rij { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.methode-rij::before { display: none; }
	.methode-stap { grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; }
	.methode-stap .cel { grid-column: 1; grid-row: 1 / span 3; --cel-b: 96px; }
	.methode-nr { grid-column: 2; grid-row: 1; margin-block-end: 0; padding-inline-end: 0; }
	.methode-naam { grid-column: 2; grid-row: 2; margin-block: 0.35em 0.4em; }
	.methode-tekst { grid-column: 2; grid-row: 3; }
}

/* ---- 16.8 Ervaringen ----------------------------------------------------- */

/*
 * Geen kaartjes. Een quote in een doosje met een randje is precies wat elke
 * sportschoolsite doet; hier staat hij gewoon op de pagina, met een haarlijn
 * erboven in plaats van een kader eromheen.
 */
.ervaringen-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(30px, 5vw, 76px);
	align-items: start;
}
.ervaringen-rest { display: grid; gap: clamp(22px, 3vw, 32px); }

.section-ervaringen .review {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	border-block-start: 1px solid var(--line);
	padding-block-start: clamp(18px, 2.4vw, 26px);
}
.section-ervaringen .review-mark { display: none; }

.section-ervaringen .review.size-feature {
	border-block-start-color: var(--accent);
	border-block-start-width: 2px;
}
.section-ervaringen .review.size-feature .review-quote p {
	font-family: var(--f-display);
	font-stretch: var(--w-normaal);
	font-weight: 500;
	font-size: clamp(1.35rem, 0.85rem + 1.9vw, 2.1rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.section-ervaringen .review-avatar {
	border-radius: 0;
	clip-path: var(--schild);
	inline-size: 26px;
	block-size: 39px;
	background: var(--accent);
	color: var(--on-accent);
	display: grid;
	place-items: center;
	font-family: var(--f-display);
	font-stretch: var(--w-smal);
	font-weight: 700;
}

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

/* ---- 16.9 De club -------------------------------------------------------- */

/*
 * Zes gezichten op één lijn, allemaal in dezelfde vorm. Dat is het antwoord op
 * de kop erboven: je traint bij een naam. De naam staat er dus onder, leesbaar,
 * en niet weggestopt achter een hover.
 */
.club-rij {
	align-items: start;
	list-style: none;
	padding: 0;
	margin-block-start: clamp(30px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(14px, 2vw, 26px);
}

.trainer {
	inline-size: var(--cel-b);
	background: none;
	border: 0;
	padding: 0;
	text-align: center;
}
.club-rij { --cel-b: clamp(96px, 12.5vw, 158px); }

/*
 * Naam en functie zijn <span>'s en dus inline. Op een breed scherm valt dat
 * niet op omdat de naam de regel vult, maar in een smalle kolom loopt
 * "Thomas Kriesels" gewoon door in "Mede-eigenaar en" — één alinea in plaats
 * van twee regels.
 */
.trainer-naam,
.trainer-rol { display: block; }

.trainer-naam {
	font-family: var(--f-display);
	font-stretch: var(--w-normaal);
	font-weight: 700;
	font-size: var(--t-small);
	line-height: 1.15;
	margin-block: 14px 0.35em;
}
/* De onderste punt van het schild valt weg tegen de donkere sectie — die
   foto's zijn onderin bijna zwart. Een haarlijn tekent de vorm terug. */
.trainer .cel { --cel-naad: var(--brand); --cel-rand: 1px; }

.trainer-rol {
	font-size: var(--t-micro);
	color: var(--text-soft);
	line-height: 1.35;
	text-wrap: balance;
}

@media (max-width: 560px) {
	.club-rij { --cel-b: clamp(120px, 40vw, 158px); gap: clamp(20px, 5vw, 28px) clamp(12px, 4vw, 20px); }
}

/* ---- 16.10 Vestigingen --------------------------------------------------- */

.vestiging-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 5vw, 70px);
}

.vestiging {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(18px, 3vw, 30px);
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	border-block-start: 1px solid var(--line);
	padding-block-start: clamp(20px, 2.6vw, 28px);
}
.vestiging .cel { --cel-b: clamp(112px, 14vw, 192px); }
.vestiging-body { min-inline-size: 0; }

.vestiging-naam {
	font-family: var(--f-display);
	font-stretch: var(--w-smal);
	font-weight: 700;
	font-size: var(--t-h3);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-block: 0 0.6em;
}
/* Het e-mailadres van Valkenswaard is 32 tekens zonder spatie. Op 320px past
   dat niet naast de cel en duwt het de hele pagina breder. */
.vestiging-nap {
	font-size: var(--t-small);
	color: var(--text-soft);
	font-style: normal;
	overflow-wrap: anywhere;
}
.vestiging-nap a { color: inherit; }

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

/* ---- 16.11 Artikelen ----------------------------------------------------- */

/*
 * Eigen rij in plaats van de gedeelde kaartenrij. Op deze homepage is elk beeld
 * een cel; drie rechthoekige kaarten onderaan zouden eruitzien alsof je op een
 * andere site bent beland. Het blogarchief houdt wél de gedeelde kaarten — daar
 * is de opbouw voor elke klant gelijk, zie docs/uniek-per-klant.md.
 */
.artikel-rij {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 3.4vw, 44px);
}

.artikel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(16px, 2vw, 24px);
	align-items: center;
	border-block-start: 1px solid var(--line);
	padding-block-start: clamp(18px, 2.2vw, 24px);
}
.artikel .cel { --cel-b: clamp(64px, 7vw, 92px); }

.artikel-soort {
	display: block;
	font-family: var(--f-display);
	font-stretch: var(--w-breed);
	font-weight: 600;
	font-size: var(--t-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
}
.artikel-titel {
	font-family: var(--f-display);
	font-stretch: var(--w-normaal);
	font-weight: 700;
	font-size: var(--t-small);
	line-height: 1.22;
	margin-block: 0.5em 0.4em;
	text-wrap: balance;
}
.artikel-titel a { color: inherit; text-decoration: none; }
.artikel-titel a:hover { text-decoration: underline; }
.artikel-meta { font-size: var(--t-micro); color: var(--text-faint); margin: 0; }

@media (max-width: 820px) {
	.artikel-rij { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 16.12 Slot ---------------------------------------------------------- */

/*
 * Het scherpste dat de klant zelf schrijft staat hier: geen gratis proefles,
 * maar veertien dagen volledig meedraaien voor een echt bedrag. Dat filtert
 * precies de mensen eruit die ze niet zoeken, dus het mag groot.
 */
.slot {
	position: relative;
	overflow: hidden;
	background: var(--night-deep);
}
.slot-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(30px, 5vw, 72px);
	align-items: center;
}
.slot-kop {
	font-size: var(--t-h1);
	font-stretch: var(--w-smal);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.92;
	text-wrap: balance;
	margin-block: 0.24em 0.4em;
}
.slot-prijs {
	display: grid;
	gap: 0.2em;
	border-inline-start: 2px solid var(--accent);
	padding-inline-start: clamp(16px, 2.4vw, 24px);
}
.slot-bedrag {
	font-family: var(--f-display);
	font-stretch: var(--w-smal);
	font-weight: 800;
	font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4rem);
	line-height: 0.9;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.slot-eenheid { font-size: var(--t-small); color: var(--text-soft); }
.slot-noot { font-size: var(--t-micro); color: var(--text-faint); margin-block-start: 0.9em; }

.slot-raat {
	position: absolute;
	inset-block-end: -22%;
	inset-inline-start: -8%;
	z-index: 0;
	opacity: 0.5;
	pointer-events: none;
}

@media (max-width: 860px) {
	.slot-grid { grid-template-columns: minmax(0, 1fr); }
	.slot-raat { display: none; }
}

/* ---- 16.13 Beweging ------------------------------------------------------ */

/*
 * De hero-cellen komen elk uit hun eigen richting en vallen op hun plaats: de
 * raat sluit zich terwijl je kijkt. Zie --dx/--dy en anim-zet in blok 14. De
 * afstanden staan in de opmaak, want ze horen bij de plek van de cel.
 */
.cel-link .cel-in img { transition: transform 0.5s var(--ease); }

@media (hover: hover) and (pointer: fine) {
	.cel-link:hover .cel-in img,
	.cel-link:focus-visible .cel-in img { transform: scale(1.06); }
}

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