/*
Theme Name: Titan Fulfilment
Theme URI: https://titanfulfilment.nl/
Author: SiteJob
Author URI: https://sitejob.nl/
Description: Maatwerkthema voor Titan Fulfilment. Bold B2B-logistiek, Nova-vriendelijke content, SEO/GEO-first. Homepage, blog- en kennisbanksjabloon met een gedeelde blokkenbibliotheek. Geen Elementor, zelf-gehoste fonts, licht en donker thema.
Version: 1.12.0
Requires at least: 6.6
Tested up to: 7.1.2
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: titan-fulfilment
Tags: custom-logo, custom-menu, featured-images, block-patterns, editor-style, wide-blocks, accessibility-ready, translation-ready
*/

/* ==========================================================================
   1. Tokens
   De merkkleuren staan vast (brief/01-brand.md). Daarbovenop een laag
   betekenis-tokens (--bg, --surface, --text): componenten gebruiken alleen die,
   zodat een donkere sectie of het donkere thema niets anders vraagt dan een
   andere set waarden.
   ========================================================================== */

:root {
	/* Merk — vast */
	--brand:        #7A3BF0;
	--brand-deep:   #5B21D6;
	--brand-light:  #A77AFF;
	--indigo-night: #180A4A;
	--indigo-deep:  #0F0730;

	/* Neutralen met paarse zweem — bewust geen pure grijzen */
	--ink:        #141225;
	--ink-soft:   #4B4860;
	--paper:      #FBFAFF;
	--white:      #FFFFFF;
	--mist:       #F3EFFE;
	--line-soft:  #E4E0F0;
	--line-hard:  #CFC7E6;

	/* Status */
	--ok:     #16A06A;
	--warn:   #C7791A;
	--danger: #C7402B;

	/* Betekenis-tokens — licht thema */
	--bg:            var(--paper);
	--surface:       var(--white);
	--surface-alt:   var(--mist);
	--surface-sink:  #F6F3FD;
	--text:          var(--ink);
	--text-soft:     var(--ink-soft);
	--text-faint:    #6E6A82;
	--line:          var(--line-soft);
	--line-strong:   var(--line-hard);
	--accent:        var(--brand);
	--accent-deep:   var(--brand-deep);
	--accent-wash:   rgba(122, 59, 240, 0.08);
	--on-accent:     #FFFFFF;
	--star:          #F0A93B;

	/* Vorm */
	--radius-xl: 28px;
	--radius-lg: 20px;
	--radius:    14px;
	--radius-sm: 9px;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 8px -2px rgba(24, 10, 74, 0.10);
	--shadow:    0 18px 40px -24px rgba(24, 10, 74, 0.32);
	--shadow-lg: 0 40px 80px -40px rgba(90, 33, 214, 0.45);

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

	/* Type */
	--f-display: "Sora", "Gilroy", system-ui, -apple-system, sans-serif;
	--f-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

	--t-hero:  clamp(2.35rem, 1.35rem + 3.6vw, 4.15rem);
	--t-h1:    clamp(2.05rem, 1.35rem + 2.6vw, 3.3rem);
	--t-h2:    clamp(1.65rem, 1.2rem + 1.7vw, 2.5rem);
	--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;

	--ease: cubic-bezier(0.23, 1, 0.32, 1);
	/* Doorlopende logoband: tijd per logo, zodat korte en lange rijen even snel lopen. */
	--dur-logo-stap: 3.2s;
	/* Doorlopende reviewrij: tijd per review, lang genoeg om een review mee te lezen. */
	--dur-review-stap: 8s;
	/* Scrollscènes: easeOutSine (easings.net). Een doos die wordt neergezet, remt
	   af en staat stil zonder naveren. Bij scrollgestuurde beweging volgt deze curve
	   de duim; een sterkere ease-out (quint) was al klaar voordat je het zag. */
	--ease-scene: cubic-bezier(0.61, 1, 0.88, 1);

	color-scheme: light;
}

/* Donker is een expliciete bezoekerskeuze; de standaard blijft altijd licht. */
:root[data-theme="dark"] {
	color-scheme: dark;
	--bg:           var(--indigo-deep);
	--surface:      #1A0B50;
	--surface-alt:  #241461;
	--surface-sink: #150937;
	--text:         #ECE9FA;
	--text-soft:    #B8B2D4;
	--text-faint:   #8E88A8;
	--line:         #2E1F69;
	--line-strong:  #43318A;
	--accent:       var(--brand-light);
	--accent-deep:  #B18CFF;
	--accent-wash:  rgba(157, 107, 255, 0.14);
	--on-accent:    #12063A;
	--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);
}

/*
 * Donkere secties (cijferbanner, harde CTA, footer) draaien dezelfde tokens om
 * binnen hun eigen stuk pagina. Componenten hoeven daardoor geen "op donker"-
 * variant te kennen: ze lezen gewoon --surface en --text.
 */
.on-dark,
.tone-dark,
.section-numbers,
.site-footer {
	--surface:     rgba(255, 255, 255, 0.06);
	--surface-alt: rgba(255, 255, 255, 0.10);
	--text:        #F4F1FF;
	--text-soft:   #BEB6E4;
	--text-faint:  #9A92C4;
	--line:        rgba(255, 255, 255, 0.14);
	--line-strong: rgba(255, 255, 255, 0.26);
	--accent:      #C4A6FF;
	--accent-deep: #D9C6FF;
	--accent-wash: rgba(255, 255, 255, 0.08);
	--on-accent:   var(--indigo-night);
	color: var(--text);
}

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

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

html {
	/* clip in plaats van hidden: hidden zou position:sticky uitschakelen. */
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: 1.65;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
canvas { max-width: 100%; height: auto; }

img { display: block; }

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

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }
h4 { font-size: 1.05rem; letter-spacing: -0.01em; }

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

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

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

strong, b { font-weight: 600; }

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

blockquote { margin: 0; }

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

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

/* Toetsenbordfocus moet altijd te zien zijn — ook op een donkere sectie. */
:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}
.tone-dark :focus-visible,
.section-numbers :focus-visible,
.site-footer :focus-visible { outline-color: #FFFFFF; }

.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: fixed;
	top: 8px; left: 8px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--accent);
	color: var(--on-accent);
	border-radius: var(--radius-sm);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-150%);
	transition: transform 0.18s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

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

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

.text-accent { color: var(--accent); }

/* Nog aan te leveren materiaal — zichtbaar, maar niet schreeuwerig. */
.is-placeholder {
	background: rgba(199, 121, 26, 0.10);
	box-shadow: inset 0 -1px 0 rgba(199, 121, 26, 0.55);
	border-radius: 3px;
	padding: 0 0.25em;
	color: inherit;
}

/* ==========================================================================
   3. Knoppen en kleine bouwstenen
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.85em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--f-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center; /* een knoptekst over twee regels blijft gecentreerd */
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background-color 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.button .icon { width: 1.1em; height: 1.1em; flex: none; }
@media (hover: hover) and (pointer: fine) {
	.button:hover { transform: translateY(-2px); }
}
.button:active { transform: translateY(0); }

.button-primary {
	background: var(--brand);
	color: #FFFFFF;
	box-shadow: 0 12px 24px -14px rgba(90, 33, 214, 0.9);
}
.button-primary:hover { background: var(--brand-deep); color: #FFFFFF; box-shadow: 0 18px 32px -16px rgba(90, 33, 214, 0.95); }

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

.button-white { background: #FFFFFF; color: var(--indigo-night); }
.button-white:hover { background: #FFFFFF; color: var(--brand-deep); }

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

.button-small { padding: 0.62em 1.1em; font-size: 0.875rem; }
.button-large { padding: 1.02em 1.9em; font-size: 1.02rem; }

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--accent);
	text-decoration: none;
}
.arrow-link .icon { width: 1.05em; height: 1.05em; transition: transform 0.18s var(--ease); }
@media (hover: hover) and (pointer: fine) {
	.arrow-link:hover .icon { transform: translateX(4px); }
}
.arrow-link:hover { text-decoration: underline; }

/*
 * Kicker boven een kop. Bewust geen mono-kapitalen: die vallen in elke sectie
 * op dezelfde manier op en gaan de pagina dan overheersen. Een streepje en een
 * gewoon woord in de merkkleur doet hetzelfde werk, rustiger.
 */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0 0 0.9em;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--accent);
}
.eyebrow-dot {
	width: 22px; height: 2px;
	border-radius: 2px;
	background: currentColor;
	flex: none;
}
.eyebrow-term {
	padding: 0.1em 0.6em;
	border-radius: var(--radius-sm);
	background: var(--accent-wash);
	font-weight: 500;
}

.mini-label {
	margin: 0 0 0.4em;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text-faint);
}

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

.icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }

/* ==========================================================================
   4. Sitehoofd
   ========================================================================== */

.topbar {
	background: var(--indigo-night);
	color: #D9D2F5;
	font-size: var(--t-small);
}
.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 42px;
	padding-block: 6px;
}
.topbar-claim {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
}
.topbar-claim .icon { width: 18px; height: 18px; color: var(--brand-light); flex: none; }
.topbar-contact { display: flex; gap: 20px; margin: 0; }
.topbar-contact a {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: #EFEBFF;
	text-decoration: none;
	font-weight: 500;
}
.topbar-contact a:hover { color: #FFFFFF; text-decoration: underline; }
.topbar-contact .icon { width: 16px; height: 16px; color: var(--brand-light); }
/* Taalwissel van de vertaalplugin in de bovenbalk: zelfde toon als telefoon en e-mail. */
.topbar-contact .sitejob-taalwissel { display: inline-flex; align-items: center; gap: 2px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.topbar .sitejob-taalwissel a.button,
.topbar-contact > a.button[hreflang] {
	min-height: 0;
	padding: 0.2em 0.5em;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	box-shadow: none;
	color: #EFEBFF;
	font-size: inherit;
	font-weight: 600;
	letter-spacing: 0.04em;
	transform: none;
}
.topbar .sitejob-taalwissel a.button:hover,
.topbar-contact > a.button[hreflang]:hover { color: #FFFFFF; text-decoration: underline; background: none; }

.site-header {
	/* De witte homepage-navigatie geldt overal, ook boven donkere content. */
	color-scheme: light;
	--surface: #FFFFFF;
	--text: var(--ink);
	--text-soft: var(--ink-soft);
	--accent: var(--brand-deep);
	--accent-deep: var(--brand-deep);
	--on-accent: #FFFFFF;
	--accent-wash: rgba(122, 59, 240, 0.08);
	--line: var(--line-soft);
	--shadow: 0 18px 40px -24px rgba(24, 10, 74, 0.32);
	position: sticky;
	top: 0;
	z-index: 90;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), background-color 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: 20px;
	min-height: 84px;
}

.brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex: none;
}
.site-logo {
	/* Volledige lockup; in de witte navigatie blijft het logo in kleur. */
	width: clamp(164px, 15vw, 210px);
	height: auto;
}
.site-logo.is-light { opacity: 1; }
.site-header .site-logo.is-light { display: none; }
.brand.has-custom-logo img,
.has-custom-logo .custom-logo { max-height: 52px; width: auto; }

/* Volledige lockup als terugval bij een artikel zonder beeld. */
.logo-mark {
	display: block;
	height: auto;
}

.header-panel {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	flex: 1;
	justify-content: flex-end;
}

.main-nav .menu {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.4vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-nav .menu li { margin: 0; position: relative; }
.main-nav a {
	display: block;
	padding: 0.55em 0.2em;
	color: var(--text-soft);
	font-size: 0.94rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--accent); }

/* Tweede niveau: verschijnt bij hover, bij toetsenbordfocus en via de pijlknop (aanraakscherm). */
.main-nav .menu-item-has-children { display: flex; align-items: center; }
.submenu-toggle {
	display: inline-grid;
	place-items: center;
	width: 24px; height: 32px;
	margin-left: -2px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--text-soft);
	cursor: pointer;
}
.submenu-toggle .icon { width: 14px; height: 14px; transition: transform 0.16s var(--ease); }
.main-nav li:hover > .submenu-toggle,
.submenu-toggle[aria-expanded="true"] { color: var(--accent); }
.main-nav li:hover > .submenu-toggle .icon,
.main-nav li:focus-within > .submenu-toggle .icon,
.submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.main-nav .sub-menu {
	position: absolute;
	top: 100%; left: -14px;
	min-width: 220px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu,
.main-nav .submenu-toggle[aria-expanded="true"] + .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav li.submenu-dicht > .sub-menu { opacity: 0; visibility: hidden; transform: translateY(6px); }
.main-nav .sub-menu a { padding: 0.5em 0.75em; border-radius: var(--radius-sm); }
.main-nav .sub-menu a:hover { background: var(--accent-wash); }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 40px; height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--text-soft);
	cursor: pointer;
	transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle-icon { display: none; grid-area: 1 / 1; }
.theme-toggle-icon .icon { width: 19px; height: 19px; }
: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; }

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

/* Net boven het hamburgermenu is de rij krap: het Nederlandse menu raakte bij 1025 px
   het logo, het Duitse (Dienstleistungen, Wissensdatenbank) tot ongeveer 1180 px. */
@media (min-width: 1025px) and (max-width: 1239px) {
	/* Bovenbalk: alleen het e-mailicoon, zodat claim, telefoon en taalwissel op één regel passen. */
	.topbar-contact a[href^="mailto"] span { display: none; }
	.header-inner { gap: 14px; }
	.site-logo { width: 150px; }
	.header-panel { gap: 12px; }
	.main-nav .menu { gap: 2px; }
	.main-nav a { font-size: 0.875rem; padding-inline: 0.35em; }
	.header-actions { gap: 8px; }
	.header-actions .button-small { padding-inline: 0.95em; }
}
@media (min-width: 1025px) and (max-width: 1119px) {
	.site-logo { width: 136px; }
	.main-nav a { font-size: 0.8125rem; padding-inline: 0.25em; }
}

@media (max-width: 1024px) {
	.topbar-claim { display: none; }
	.topbar-inner { justify-content: center; }
	.menu-button { display: grid; place-items: center; }

	.header-panel {
		position: absolute;
		top: 100%; left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 16px var(--gutter) 24px;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
		clip-path: inset(0 0 100% 0);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.18s var(--ease);
	}
	.header-panel.open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
	.main-nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
	.main-nav a { padding: 0.8em 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
	/* Mobiel klapt een submenu uit via de pijlknop; dicht is de standaard, anders wordt het
	   menu een lange lijst. Het hoofditem zelf blijft een gewone link. */
	.main-nav .menu-item-has-children { display: block; }
	.main-nav .menu-item-has-children > a { padding-right: 52px; }
	.submenu-toggle {
		position: absolute;
		top: 3px; right: 0;
		width: 44px; height: 44px;
		margin: 0;
	}
	.submenu-toggle .icon { width: 18px; height: 18px; }
	.main-nav li:hover > .submenu-toggle .icon,
	.main-nav li:focus-within > .submenu-toggle .icon { transform: none; }
	.main-nav li > .submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
	.main-nav .sub-menu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 14px;
	}
	.main-nav .submenu-toggle[aria-expanded="true"] + .sub-menu { display: block; }
	.header-actions { justify-content: space-between; padding-top: 10px; }
	.header-actions .button { flex: 1; }
}

@media (max-width: 620px) {
	/* Het telefoonnummer blijft staan — dat is op mobiel juist de snelste route. */
	.topbar-contact a[href^="mailto"] span { display: none; }
	.topbar-contact { gap: 20px; }
	.topbar-inner { justify-content: center; }
}

/* De score en de sterren zijn het signaal; de toelichting mag op smal wijken. */
@media (max-width: 560px) {
	.rating-detail { display: none; }
}

/* ==========================================================================
   5. Hero
   Wit als grond, paars als accent. De aura geeft diepte zonder dat de hele
   sectie paars wordt — dat zou de rest van de pagina platslaan.
   ========================================================================== */

.hero {
	position: relative;
	padding-top: clamp(40px, 6vw, 84px);
	padding-bottom: clamp(32px, 5vw, 64px);
	background: var(--bg);
	overflow: clip;
}
.hero-aura {
	position: absolute;
	inset: -30% -10% auto auto;
	width: min(760px, 90vw);
	aspect-ratio: 1;
	background: radial-gradient(circle at 60% 40%, rgba(122, 59, 240, 0.22), rgba(122, 59, 240, 0) 62%);
	pointer-events: none;
	z-index: 0;
}
.hero-inner,
.hero-stats { position: relative; z-index: 1; }

.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0 0 1.2em;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-soft);
}
.hero-eyebrow .eyebrow-dot { background: var(--accent); }

.hero h1 {
	font-size: var(--t-hero);
	font-weight: 800;
	margin: 0 0 0.5em;
	max-width: 15ch;
}
.hero-lead {
	max-width: 52ch;
	margin: 0 0 2em;
	font-size: var(--t-lead);
	color: var(--text-soft);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2em; }

.hero-proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 3vw, 32px);
	padding-top: 1.6em;
	border-top: 1px solid var(--line);
}
.hero-usps { display: grid; gap: 0.45em; margin: 0; padding: 0; list-style: none; }
.hero-usps li {
	position: relative;
	margin: 0;
	padding-left: 1.4em;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.hero-usps li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.72em;
	width: 12px; height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

.hero-stats { margin-top: clamp(36px, 5vw, 64px); }

/* Getekend hero-beeld: een dashboard in plaats van een stockfoto. */
.hero-visual {
	position: relative;
	min-height: 320px;
	padding-block: 34px;
	padding-bottom: clamp(130px, 15vw, 190px);
}

/*
 * De foto draagt de sectie, het dashboard ligt erover. Zo zie je in één blik
 * wie het doet én waarmee — en niet alleen een schermafdruk.
 */
/*
 * De groepsfoto staat op een lichte achtergrond, dus hij hoeft geen kader: op
 * het papieren vlak lijkt het alsof het team in de hero staat. In het donkere
 * thema krijgt hij wel een lichte drager, anders zweeft een wit vlak op donker.
 */
/*
 * De groepsfoto is op een lichte achtergrond geschoten. Blenden met het papier
 * gaf een vaag grijs vlak; een bewuste witte lijst is eerlijker en rustiger.
 */
.hero-photo {
	position: relative;
	margin: 0;
	width: 100%;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: var(--shadow-lg);
}
.hero-photo img {
	width: 100%;
	aspect-ratio: 1600 / 1141;
	object-fit: cover;
	display: block;
}
/* Geen donkere sluier over de foto: die maakte het beeld dof en dat is precies
   waar het om gaat — de mensen moeten helder in beeld staan. */

/*
 * Het paneel hangt rechtsonder half onder de foto door. Eerder lag het over de
 * paarse doos heen, en juist die doos is het merkmoment in dit beeld.
 */
/* Het paneel hangt onder de foto, niet eroverheen — anders staat het halve
   team erachter. */
.mock-panel {
	position: absolute;
	left: -3%;
	right: 44%;
	bottom: 0;
	transform: translateY(76%);
	padding: clamp(14px, 1.7vw, 20px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
}
.mock-panel::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(140deg, rgba(122, 59, 240, 0.55), rgba(122, 59, 240, 0) 45%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.mock-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.mock-head strong { color: var(--text); font-weight: 600; }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(22, 160, 106, 0.16); }
.mock-live {
	margin-left: auto;
	color: var(--text-faint);
	font-size: var(--t-micro);
}
.mock-figure { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mock-head { margin-bottom: 12px; }
/* In het smalle hero-paneel passen alleen het cijfer en twee orderregels. */
.hero-visual .mock-rows li:nth-child(n+3) { display: none; }
.hero-visual .mock-chart { display: none; }
.hero-visual .mock-figure { margin-bottom: 14px; }
.mock-figure-value {
	font-family: var(--f-display);
	font-size: clamp(2.2rem, 3.4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}
.mock-figure-label { font-size: var(--t-small); color: var(--text-soft); }

.mock-chart {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	align-items: end;
	gap: 8px;
	height: 62px;
	margin-bottom: 14px;
	padding: 14px;
	border-radius: var(--radius);
	background: var(--surface-sink);
}
.mock-chart span {
	height: var(--h);
	border-radius: 5px 5px 3px 3px;
	background: linear-gradient(180deg, var(--brand-light), var(--brand));
	opacity: 0.85;
}
.mock-chart span:nth-child(6) { opacity: 1; box-shadow: 0 6px 16px -6px rgba(122, 59, 240, 0.8); }

.mock-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mock-rows li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	font-size: var(--t-small);
}
.mock-sku { font-family: var(--f-mono); color: var(--text-soft); }
.mock-status {
	color: var(--text-faint);
	font-size: var(--t-micro);
	font-weight: 500;
}
.mock-status.is-done { color: var(--ok); }
.mock-status.is-progress { color: var(--accent); }

.mock-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
	font-size: var(--t-small);
}
.mock-chip span { display: flex; flex-direction: column; line-height: 1.25; color: var(--text-soft); }
.mock-chip strong { color: var(--text); font-family: var(--f-display); font-size: 0.98rem; }
.mock-chip-2 { right: 0; top: 6%; }

@media (max-width: 980px) {
	.hero-inner { grid-template-columns: 1fr; }
	.hero h1 { max-width: 18ch; }
	/* De foto blijft ook op mobiel staan — juist daar telt het gezicht. */
	.hero-visual { padding-bottom: 60px; }
	.mock-panel { left: 0; right: 30%; transform: translateY(66%); }
	.mock-chip-2 { display: none; }
}

/* ==========================================================================
   6. Cijferrij en sterrenscore
   ========================================================================== */

.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: clamp(12px, 1.6vw, 20px);
	margin: 0;
	padding: 0;
}
.stat {
	padding: clamp(18px, 2vw, 26px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.stat-value {
	margin: 0 0 0.15em;
	font-family: var(--f-display);
	font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
	line-height: 1;
}
.stat-label {
	margin: 0;
	font-size: var(--t-small);
	color: var(--text-soft);
	font-weight: 500;
}
.stat-note {
	display: block;
	margin-top: 0.5em;
	font-size: var(--t-micro);
	color: var(--text-faint);
	font-weight: 400;
}

.stat-row.tone-dark .stat {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}
.stat-row.tone-dark .stat-value { color: #FFFFFF; }

.stat-row.is-compact { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.stat-row.is-compact .stat { padding: 12px 16px; border-radius: var(--radius); }
.stat-row.is-compact .stat-value { font-size: 1.5rem; }
.stat-row.is-compact .stat-label { font-size: var(--t-micro); }

.rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	color: var(--text);
}
a.rating-badge:hover { border-color: var(--accent); }
.rating-stars { display: inline-flex; gap: 2px; }
.star { position: relative; display: inline-flex; color: var(--line-strong); }
.star .icon { width: 17px; height: 17px; stroke-width: 1.4; }
.star.is-full,
.star.is-half { color: var(--star); }
.star.is-full .icon { fill: var(--star); }
.star-fill {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
	display: inline-flex;
	color: var(--star);
}
.star-fill .icon { fill: var(--star); }
.rating-meta { display: flex; align-items: baseline; gap: 8px; }
.rating-score {
	font-family: var(--f-display);
	font-size: 1.12rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.rating-detail { font-size: var(--t-micro); color: var(--text-faint); }
.rating-badge.size-small { padding: 7px 14px 7px 11px; gap: 9px; }
.rating-badge.size-small .star .icon { width: 14px; height: 14px; }
.rating-badge.size-small .rating-score { font-size: 0.98rem; }
.rating-badge.size-large { padding: 14px 24px 14px 18px; }
.rating-badge.size-large .star .icon { width: 21px; height: 21px; }
.rating-badge.size-large .rating-score { font-size: 1.4rem; }

/* ==========================================================================
   7. Vertrouwensrij
   ========================================================================== */

.section-trust { padding-block: clamp(32px, 4vw, 56px); border-block: 1px solid var(--line); background: var(--surface); }
.section-trust .shell { display: grid; gap: 22px; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.logo-row-label {
	margin: 0;
	font-size: 0.9rem;
	color: var(--text-faint);
	flex: none;
}
.logo-row-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.logo-row-list li { margin: 0; }
.logo-row-list { gap: clamp(16px, 2.6vw, 34px); align-items: center; }
.logo-chip {
	font-family: var(--f-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-faint);
}

/* ==========================================================================
   8. Diensten, cases, stappen
   ========================================================================== */

.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: clamp(16px, 2vw, 24px);
}
.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.4vw, 30px);
	border-top: 2px solid var(--line);
	transition: border-color 0.2s var(--ease);
}
.service-card::before {
	content: "";
	position: absolute;
	top: -2px; left: 0;
	width: 100%; height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.16s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.service-card:hover::before { transform: scaleX(1); }
}
.service-title { margin: 0; font-size: 1.28rem; }
.service-text { margin: 0; color: var(--text-soft); font-size: 0.96rem; flex: 1; }
.service-review { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }

.numbers-inner { position: relative; }
.section-numbers {
	position: relative;
	background:
		radial-gradient(circle at 82% 12%, rgba(122, 59, 240, 0.42), transparent 55%),
		linear-gradient(160deg, var(--indigo-night), var(--indigo-deep));
	overflow: clip;
}
.section-numbers > * { position: relative; }
.numbers-footnote {
	margin: clamp(24px, 3vw, 36px) auto 0;
	max-width: 60ch;
	font-size: var(--t-small);
	color: var(--text-soft);
	text-align: center;
}

.case-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin-bottom: clamp(28px, 4vw, 44px);
}
.case-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(22px, 2.4vw, 30px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	position: relative;
	overflow: hidden;
}
.case-card::after {
	content: "";
	position: absolute;
	inset: auto -30% -60% auto;
	width: 220px; height: 220px;
	background: radial-gradient(circle, var(--accent-wash), transparent 70%);
	pointer-events: none;
}
.case-sector {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--text-faint);
}
.case-metric { display: flex; flex-direction: column; margin: 0; }
.case-metric-value {
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.4rem + 1.8vw, 2.7rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
	line-height: 1.05;
}
.case-metric-label { font-size: var(--t-small); color: var(--text-soft); }
.case-title { margin: 6px 0 0; font-size: 1.1rem; }
.case-text { margin: 0; color: var(--text-soft); font-size: 0.94rem; flex: 1; }

.step-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: clamp(18px, 2.4vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.step {
	position: relative;
	margin: 0;
	padding-top: 28px;
	border-top: 2px solid var(--line);
}
.step::before {
	content: "";
	position: absolute;
	top: -2px; left: 0;
	width: 42px; height: 2px;
	background: var(--accent);
}
.step-number {
	display: block;
	margin-bottom: 4px;
	font-family: var(--f-display);
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--accent);
	opacity: 0.28;
}
.step-title { margin: 0 0 0.4em; font-size: 1.12rem; }
.step-text { margin: 0; color: var(--text-soft); font-size: 0.95rem; }

/* ==========================================================================
   9. Reviews
   ========================================================================== */

.review { margin: 0; display: grid; gap: 12px; }
.review-stars { display: inline-flex; gap: 2px; }
.review-quote { margin: 0; }
.review-quote p { margin: 0; color: var(--text); }
.review-source { display: flex; align-items: center; gap: 10px; }
.review-avatar {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	flex: none;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--brand), var(--brand-deep));
	color: #FFFFFF;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.95rem;
}
.review-who { display: flex; flex-direction: column; line-height: 1.3; }
.review-who strong { font-size: 0.92rem; }
.review-who span { font-size: var(--t-micro); color: var(--text-faint); }

.review.size-small { gap: 8px; }
.review.size-small .review-quote p { font-size: 0.92rem; color: var(--text-soft); font-style: italic; }
.review.size-small .star .icon { width: 13px; height: 13px; }
/* In de kleine variant zegt een initialenrondje niets; de naam doet het werk. */
.review.size-small .review-avatar { display: none; }
.review.size-small .review-who strong { font-size: 0.88rem; }

.section-quote { background: var(--surface-alt); }
.quote-inner { display: grid; place-items: center; }
.review.size-feature {
	position: relative;
	max-width: 46ch;
	justify-items: center;
	text-align: center;
	gap: 20px;
}
.review.size-feature .review-mark { color: var(--accent); opacity: 0.28; }
.review.size-feature .review-mark .icon { width: 54px; height: 54px; fill: currentColor; stroke: none; }
.review.size-feature .review-quote p {
	font-family: var(--f-display);
	font-size: clamp(1.35rem, 1rem + 1.7vw, 2.1rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.review.size-feature .star .icon { width: 20px; height: 20px; }

/* ==========================================================================
   10. CTA-blokken
   ========================================================================== */

.cta { --cta-radius: var(--radius-xl); }

.cta-section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 48px);
	padding: clamp(28px, 4vw, 56px);
	border-radius: var(--cta-radius);
}
.cta-section.tone-dark {
	background:
		radial-gradient(circle at 88% 6%, rgba(122, 59, 240, 0.5), transparent 55%),
		linear-gradient(150deg, var(--indigo-night), var(--indigo-deep));
	box-shadow: var(--shadow-lg);
}
.cta-section.tone-soft { background: var(--surface-alt); }
.cta-section.tone-light { background: var(--surface); border: 1px solid var(--line); }
.cta-section .cta-body { flex: 1 1 min(460px, 100%); }
.cta-section .cta-title { margin: 0 0 0.4em; font-size: var(--t-h2); }
.cta-section .cta-text { margin: 0; color: var(--text-soft); max-width: 52ch; }
.cta-section .cta-actions { display: grid; gap: 12px; justify-items: start; }
.cta-section .cta-rating { margin-top: 1.5em; }

.cta-inline {
	display: grid;
	gap: 16px;
	margin-block: clamp(28px, 4vw, 44px);
	padding: clamp(20px, 2.4vw, 28px);
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	background: var(--surface-alt);
}
.cta-inline.tone-light { background: var(--surface); }
.cta-inline .cta-title { margin: 0 0 0.35em; font-family: var(--f-display); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; }
.cta-inline .cta-text { margin: 0; font-size: 0.95rem; color: var(--text-soft); }
.cta-inline .cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cta-inline .eyebrow { margin-bottom: 0.7em; }

.cta-aside { display: grid; gap: 14px; }
.cta-aside .cta-title { margin: 0 0 0.35em; font-family: var(--f-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; }
.cta-aside .cta-text { margin: 0; font-size: 0.9rem; color: var(--text-soft); }
.cta-aside .cta-actions { display: grid; gap: 10px; }
.cta-aside .button { width: 100%; }

.cta-phone {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.cta-phone .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.cta-phone a { font-weight: 600; }
.tone-dark .cta-phone a { color: #FFFFFF; }

.section-final-cta { padding-block: clamp(48px, 6vw, 96px); }
.resource-final-cta { padding-block: clamp(40px, 5vw, 72px); }

/* ==========================================================================
   11. Artikel: blog en kennisbank
   Eén sjabloon, twee varianten. Het verschil is een accentnuance en het label,
   zodat een lezer ziet in welk deel van de site hij zit zonder dat het twee
   verschillende ontwerpen worden.
   ========================================================================== */

.resource[data-variant="kennisbank"] {
	--accent: var(--brand-deep);
	--accent-wash: rgba(91, 33, 214, 0.10);
}
:root[data-theme="dark"] .resource[data-variant="kennisbank"] { --accent: #B18CFF; }

.breadcrumbs { margin-bottom: 1.4em; font-size: var(--t-small); }
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.6em; margin: 0; }
.breadcrumbs li + li::before {
	content: "";
	width: 5px; height: 5px;
	border-top: 1.5px solid var(--line-strong);
	border-right: 1.5px solid var(--line-strong);
	transform: rotate(45deg);
	flex: none;
}
.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); font-weight: 500; }

.resource-header { padding-top: clamp(28px, 4vw, 52px); }
.resource-header-inner { max-width: 900px; }
.resource-title { margin: 0 0 0.5em; font-size: var(--t-h1); font-weight: 800; }
.resource-intro {
	margin: 0 0 1.6em;
	font-size: var(--t-lead);
	color: var(--text-soft);
	max-width: 62ch;
}

.byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(14px, 2.5vw, 30px);
	padding: 16px 0;
	border-block: 1px solid var(--line);
}
.byline-author { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.byline-photo img,
.byline-photo .avatar {
	width: 48px; height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--surface);
	box-shadow: 0 0 0 1px var(--line);
}
.byline-name,
.byline-detail { display: flex; flex-direction: column; line-height: 1.35; font-size: 0.92rem; }
.byline-name small,
.byline-detail small {
	font-size: 0.78rem;
	color: var(--text-faint);
}
.byline-author:hover .byline-name strong { color: var(--accent); }

.resource-banner { margin-top: clamp(24px, 3vw, 36px); }
.banner {
	position: relative;
	margin: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--surface-alt);
}
.banner-image { width: 100%; aspect-ratio: 1360 / 420; object-fit: cover; }
/*
 * Terugvalfoto: de bron heeft bewust wat lucht boven de hoofden, zodat de
 * banner smal kan blijven zonder gezichten af te snijden.
 */
.banner.has-photo .banner-image { aspect-ratio: 1300 / 500; object-position: center 22%; }
.banner.is-fallback.has-photo { display: block; aspect-ratio: auto; }
/* Op een smal scherm wordt een brede banner een strook waarin een hoofd wegvalt. */
@media (max-width: 700px) {
	.banner-image,
	.banner.has-photo .banner-image { aspect-ratio: 4 / 3; }
}
.banner.has-photo .banner-label {
	left: 20px; bottom: 16px;
	padding: 0.35em 0.85em;
	border-radius: var(--radius-pill);
	background: rgba(15, 7, 48, 0.72);
	color: #FFFFFF;
	backdrop-filter: blur(6px);
}
.banner.is-fallback {
	display: grid;
	place-items: center;
	aspect-ratio: 1360 / 320;
	background:
		radial-gradient(circle at 78% 30%, rgba(122, 59, 240, 0.35), transparent 55%),
		linear-gradient(140deg, var(--indigo-night), var(--indigo-deep));
	border-color: transparent;
}
.banner-grid { display: none; }
.banner-mark { position: relative; }
.banner-mark .logo-mark { width: clamp(140px, 18vw, 190px); opacity: 1; }
.banner-label {
	position: absolute;
	left: 22px; bottom: 18px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.82rem;
	font-weight: 500;
}

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

/* Inhoudsopgave */
.toc {
	margin-bottom: clamp(28px, 3vw, 40px);
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.toc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	list-style: none;
	font-family: var(--f-display);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after {
	content: "";
	width: 9px; height: 9px;
	border-right: 2px solid var(--text-faint);
	border-bottom: 2px solid var(--text-faint);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s var(--ease);
	flex: none;
	margin-left: auto;
}
.toc[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.toc-count {
	font-family: var(--f-body);
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--text-faint);
}
.toc-list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
	display: grid;
	gap: 2px;
}
.toc-list li { margin: 0; counter-increment: toc; }
.toc-list a {
	display: flex;
	gap: 0.75em;
	padding: 0.42em 0.5em;
	border-radius: var(--radius-sm);
	color: var(--text-soft);
	font-size: 0.94rem;
	text-decoration: none;
}
.toc-list a::before {
	content: counter(toc) ".";
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--accent);
	flex: none;
	min-width: 1.1em;
}
.toc-list a:hover { background: var(--accent-wash); color: var(--accent); }

/* Lopende tekst */
.entry-content { font-size: 1.05rem; }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 {
	margin-top: 1.9em;
	margin-bottom: 0.5em;
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
	scroll-margin-top: 110px;
}
.entry-content h3 {
	margin-top: 1.6em;
	margin-bottom: 0.45em;
	scroll-margin-top: 110px;
}
.entry-content p { color: var(--text-soft); }
.entry-content strong { color: var(--text); }
.entry-content ul,
.entry-content ol { color: var(--text-soft); padding-left: 1.25em; }
.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul li { position: relative; padding-left: 1.6em; }
.entry-content ul li::before {
	content: "";
	position: absolute;
	left: 0.35em; top: 0.72em;
	width: 7px; height: 7px;
	border-radius: 2px;
	background: var(--accent);
	transform: rotate(45deg);
}
.entry-content a { font-weight: 500; }
.entry-content img,
.entry-content figure { border-radius: var(--radius-lg); overflow: hidden; }

/* Geïmporteerde pagina's (titan_legacy_sections): per kop een sectie, de afbeelding klein ernaast. */
.legacy-section { padding-block: clamp(20px, 3vw, 32px); border-top: 1px solid var(--line); }
.legacy-section:first-child { border-top: 0; padding-top: 0; }
.legacy-section > :first-child,
.legacy-text > :first-child { margin-top: 0; }
.legacy-section > :last-child,
.legacy-text > :last-child { margin-bottom: 0; }
.legacy-section.has-image {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
	gap: clamp(20px, 4vw, 40px);
	align-items: center;
}
.legacy-image { margin: 0; display: grid; gap: 12px; justify-items: center; border-radius: 0; overflow: visible; }
.legacy-image img {
	width: auto;
	max-width: 100%;
	max-height: 220px;
	object-fit: contain;
	border-radius: var(--radius-lg);
}
.legacy-section.has-images { grid-template-columns: minmax(0, 1fr); }
.legacy-section.has-images .legacy-image { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); justify-items: start; }
.legacy-section.has-images .legacy-image img { max-height: 120px; }
@media (max-width: 620px) {
	.legacy-section.has-image { grid-template-columns: minmax(0, 1fr); }
	.legacy-image { justify-items: start; }
	.legacy-image img { max-height: 180px; }
}
.entry-content figcaption {
	margin-top: 0.6em;
	font-size: var(--t-small);
	color: var(--text-faint);
	text-align: center;
}
.entry-content blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--accent);
	font-family: var(--f-display);
	font-size: 1.18rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--text);
}
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	display: block;
	overflow-x: auto;
}
.entry-content th,
.entry-content td { padding: 0.7em 0.9em; border-bottom: 1px solid var(--line); text-align: left; }
.entry-content th { font-weight: 600; color: var(--text); }
.entry-content pre {
	padding: 18px;
	border-radius: var(--radius);
	background: var(--surface-sink);
	overflow-x: auto;
}

.resource-sources { margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid var(--line); }
.resource-sources h2 { font-size: 1.1rem; }
.resource-sources ol { font-size: 0.92rem; color: var(--text-soft); }

/* Meelopende CTA in de zijkolom.
   De kolom moet zich uitrekken: met align-items:start op het raster is de
   zijkolom precies zo hoog als de kaart zelf, en dan heeft sticky geen ruimte
   om mee te lopen. */
.resource-aside { min-width: 0; align-self: stretch; }
.aside-inner {
	position: sticky;
	top: 104px;
	padding: clamp(20px, 2vw, 26px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

@media (max-width: 1024px) {
	.resource-body { grid-template-columns: minmax(0, 1fr); }
	.resource-main { max-width: none; }
	.resource-aside { display: none; }
}

/* Sticky balk op smallere schermen */
.sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 80;
	padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--surface) 94%, transparent);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--line);
	box-shadow: 0 -10px 30px -20px rgba(24, 10, 74, 0.6);
	transform: translateY(110%);
	transition: transform 0.24s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta[hidden] { display: none; }
.sticky-cta-inner { display: flex; align-items: center; gap: 14px; }
.sticky-cta-text { display: flex; flex-direction: column; margin: 0; line-height: 1.3; flex: 1; min-width: 0; }
.sticky-cta-text strong { font-size: 0.94rem; }
.sticky-cta-text span { font-size: var(--t-micro); color: var(--text-faint); }
.sticky-cta-close {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	flex: none;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
}
.sticky-cta-close:hover { color: var(--text); border-color: var(--line-strong); }
.sticky-cta-close .icon { width: 15px; height: 15px; }
@media (min-width: 1025px) {
	/* Op desktop doet de zijkolom dit werk al; twee keer dezelfde vraag leidt af. */
	.sticky-cta { display: none; }
}

/* FAQ */
.resource-faq { padding-block: clamp(24px, 3vw, 40px); }
.faq-section { max-width: 860px; }
.faq-accordion { display: grid; gap: 10px; }
.faq-item {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
	transition: border-color 0.16s var(--ease);
}
.faq-item[open] { border-color: var(--accent); }
.faq-item > summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: -0.01em;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
	content: "";
	width: 14px; height: 14px;
	margin-left: auto;
	flex: none;
	background:
		linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat,
		linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
	transition: transform 0.2s var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(90deg); background-size: 100% 2px, 0 100%; }
.faq-answer { padding: 0 22px 20px; color: var(--text-soft); font-size: 0.98rem; }
.faq-answer > *:first-child { margin-top: 0; }

/* Auteurskaart */
.resource-author { padding-bottom: clamp(24px, 3vw, 40px); }
.author-card {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 3vw, 32px);
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface-alt);
}
.author-card-photo { flex: none; }
.author-card-photo img,
.author-card-photo .avatar {
	width: 112px; height: 112px;
	border-radius: var(--radius-lg);
	object-fit: cover;
	border: 3px solid var(--surface);
	box-shadow: var(--shadow-sm);
}
.author-card-body { flex: 1 1 min(360px, 100%); }
.author-card-name { margin: 0 0 0.15em; font-size: 1.35rem; }
.author-card-role { margin: 0 0 0.8em; font-size: 0.92rem; color: var(--accent); font-weight: 600; }
.author-card-bio { margin: 0 0 1.1em; color: var(--text-soft); font-size: 0.98rem; max-width: 60ch; }
.author-card-links { display: flex; flex-wrap: wrap; gap: 20px; }
.author-card-links .icon { width: 16px; height: 16px; }
.author-card-recent { margin-top: 1.6em; padding-top: 1.2em; border-top: 1px solid var(--line-strong); }
.author-card-recent ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.author-card-recent li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.author-card-recent a { font-size: 0.95rem; font-weight: 500; text-decoration: none; }
.author-card-recent a:hover { text-decoration: underline; }
.author-card-recent span {
	font-size: 0.8rem;
	color: var(--text-faint);
}

/* ==========================================================================
   12. Overzichten en kaarten
   ========================================================================== */

.archive-header { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(20px, 3vw, 32px); }
.archive-header-inner { max-width: 780px; }
.archive-title { margin: 0 0 0.45em; font-size: var(--t-h1); font-weight: 800; }
.archive-intro { margin: 0; font-size: var(--t-lead); color: var(--text-soft); }
.archive-header .author-card { margin-top: 1.8em; }
.archive-body { padding-bottom: clamp(40px, 5vw, 72px); }

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: clamp(16px, 2vw, 26px);
}
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	overflow: hidden;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
}
/* 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: -4px; }
.card-media { position: relative; }
.card-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-image.is-fallback {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(circle at 70% 30%, rgba(122, 59, 240, 0.35), transparent 55%),
		linear-gradient(140deg, var(--indigo-night), var(--indigo-deep));
}
.card-image.is-fallback .logo-mark { width: clamp(130px, 45%, 170px); opacity: 1; }
.card-type {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--accent);
}
.card-body { display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2vw, 24px); flex: 1; }
.card-type { margin: 0; }
.card-title { margin: 2px 0 0; font-size: 1.12rem; }
.card:hover .card-title { color: var(--accent); }
.card-text { margin: 0; font-size: 0.92rem; color: var(--text-soft); flex: 1; }
.card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: var(--t-micro);
	color: var(--text-faint);
}
.card-author { font-weight: 600; color: var(--text-soft); }
.card-reading { margin-left: auto; }

.section-related { background: var(--surface-alt); }

.pagination { margin-top: clamp(32px, 4vw, 48px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px; height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text-soft);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.empty-state {
	padding: clamp(32px, 5vw, 64px);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-xl);
	text-align: center;
	color: var(--text-soft);
}
.empty-state p { margin-bottom: 1.5em; }

.search-form { display: flex; gap: 10px; max-width: 460px; }
.search-form label { flex: 1; }
.search-field,
.entry-content input[type="text"],
.entry-content input[type="email"] {
	width: 100%;
	padding: 0.8em 1.1em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--text);
	font-family: inherit;
	font-size: 0.95rem;
}
.search-field:focus-visible { border-color: var(--accent); }
.search-submit {
	padding: 0.8em 1.4em;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
}
.error-search { margin-top: 2em; }

/* ==========================================================================
   13. Footer
   ========================================================================== */

.site-footer {
	/* Elke sjabloon eindigt op een sectie met eigen onderruimte; nog een marge
	   erbij zou een gat van bijna tweehonderd pixels geven. */
	margin-top: 0;
	background:
		radial-gradient(circle at 12% 0%, rgba(122, 59, 240, 0.35), transparent 45%),
		linear-gradient(180deg, var(--indigo-night), var(--indigo-deep));
	color: var(--text);
}
.footer-proof {
	display: grid;
	/* Vaste verhouding: met "auto" kreeg een breed beoordelingsblok alle ruimte en
	   werden de cijferkaartjes te smal voor hun labels. */
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(16px, 3vw, 32px);
	padding-block: clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--line);
}
.footer-proof .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Zonder score (nog niet aangeleverd, live verborgen) krijgen de cijfers de hele breedte. */
.footer-proof.zonder-score { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) {
	.footer-proof { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
	.footer-proof .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer-proof .rating-badge { max-width: 100%; flex-wrap: wrap; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.08); border-color: var(--line-strong); color: #FFFFFF; }
.footer-proof .stat { min-width: 0; }
.footer-proof .stat-label { overflow-wrap: anywhere; hyphens: auto; }
.footer-proof .rating-detail { color: var(--text-soft); }

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
	padding-block: clamp(40px, 5vw, 64px);
}
.footer-pitch { margin: 1.4em 0 1.8em; color: var(--text-soft); font-size: 0.95rem; max-width: 40ch; }
.footer-heading {
	margin: 0 0 1em;
	font-family: var(--f-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #FFFFFF;
}
.footer-column .menu,
.footer-column ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-column li { margin: 0; }
.footer-column a { color: var(--text-soft); text-decoration: none; font-size: 0.94rem; }
.footer-column a:hover { color: #FFFFFF; text-decoration: underline; }

.footer-contact address { font-style: normal; display: grid; gap: 12px; }
.footer-contact address a,
.footer-address { display: flex; align-items: flex-start; gap: 0.6em; color: var(--text-soft); font-size: 0.94rem; text-decoration: none; }
.footer-contact .icon { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 2px; }
.footer-legal-numbers { margin-top: 1.4em; font-size: var(--t-micro); color: var(--text-faint); line-height: 1.8; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 20px;
	border-top: 1px solid var(--line);
	font-size: var(--t-small);
	color: var(--text-faint);
}
.footer-legal .menu { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.footer-legal li { margin: 0; }
.footer-legal a { color: var(--text-faint); text-decoration: none; }
.footer-legal a:hover { color: #FFFFFF; text-decoration: underline; }

@media (max-width: 900px) {
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: minmax(0, 1fr); }
	.footer-bottom { justify-content: flex-start; }
}

/* ==========================================================================
   14. Beweging
   Drie lagen: een intro bij het laden, onthullen bij het scrollen, en twee
   dingen die de lezer echt helpen (leesvoortgang en een meelopende
   inhoudsopgave). Alles op transform en opacity — de rest van de eigenschappen
   dwingt de browser tot hertekenen. Bij prefers-reduced-motion valt de hele
   laag weg en staat alles meteen op zijn eindpositie.
   ========================================================================== */

@keyframes titan-in {
	from { opacity: 0; transform: translate3d(0, 22px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes titan-in-right {
	from { opacity: 0; transform: translate3d(28px, 12px, 0) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

@keyframes titan-bar {
	from { transform: scaleY(0.05); }
	to   { transform: scaleY(1); }
}

/* Hoofdtekst, H1 en hoofd-CTA zijn bij de eerste verf al volledig zichtbaar. */
.hero-visual > * { animation: titan-in-right 0.35s var(--ease) both; }

.mock-chart span {
	transform-origin: bottom center;
	animation: titan-bar 0.7s var(--ease) both;
}
.mock-chart span:nth-child(1) { animation-delay: 0.45s; }
.mock-chart span:nth-child(2) { animation-delay: 0.51s; }
.mock-chart span:nth-child(3) { animation-delay: 0.57s; }
.mock-chart span:nth-child(4) { animation-delay: 0.63s; }
.mock-chart span:nth-child(5) { animation-delay: 0.69s; }
.mock-chart span:nth-child(6) { animation-delay: 0.75s; }
.mock-chart span:nth-child(7) { animation-delay: 0.81s; }

/* ---- Onthullen bij het scrollen -----------------------------------------
 * De attributen worden door JavaScript gezet, niet in de HTML: zonder script
 * staat er dus nooit iets onzichtbaar op de pagina.
 */
[data-anim] {
	opacity: 0;
	transition:
		opacity 0.35s var(--ease),
		transform 0.35s var(--ease);
	transition-delay: var(--anim-delay, 0ms);
}
[data-anim="up"]    { transform: translate3d(0, 12px, 0); }
[data-anim="rise"]  { transform: translate3d(0, 16px, 0); }
[data-anim="side"]  { transform: translate3d(-12px, 0, 0); }
[data-anim="mask"]  { transform: translate3d(0, 12px, 0); }

[data-anim].is-instant { transition: none; transition-delay: 0ms; }

[data-anim].is-in {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 -25% 0);
}

/* ---- Leesvoortgang ------------------------------------------------------- */
.reading-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 95;
	background: transparent;
	pointer-events: none;
}
.reading-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--brand), var(--brand-light));
	transform: scaleX(var(--progress, 0));
	transform-origin: left center;
	transition: transform 0.1s linear;
}

/* ---- Meelopende inhoudsopgave ------------------------------------------- */
.toc-list a.is-current {
	background: var(--accent-wash);
	color: var(--accent);
	font-weight: 600;
}

/* De header behoudt zijn hoogte: scrollen verschuift de pagina niet. */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation: none !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition: none !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
	[data-anim] { opacity: 1; transform: none; clip-path: none; }
	.reading-progress { display: none; }
	.button:hover,
	.card:hover { transform: none; }
}

/* ==========================================================================
   15. Blokeditor — de patronen uit patterns/ krijgen dezelfde vorm
   ========================================================================== */

.wp-block-group.has-titan-surface { background: var(--surface-alt); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 40px); }
.entry-content .wp-block-image img { border-radius: var(--radius-lg); }
.entry-content .wp-block-button__link { border-radius: var(--radius-pill); font-weight: 600; }
.alignwide { max-width: min(1200px, 100%); }
.alignfull { width: 100%; }

/* ==========================================================================
   16. Printen — een tarievenpagina wordt uitgeprint meegenomen naar overleg
   ========================================================================== */

@media print {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	[data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.reading-progress { display: none !important; }
	.topbar, .site-header, .sticky-cta, .resource-aside, .site-footer,
	.section-final-cta, .resource-final-cta, .cta { display: none !important; }
	body { background: #FFFFFF; color: #000000; }
	.entry-content a::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}

/* Zelf getekende auteursfoto — geen verzoek naar Gravatar. */
.author-avatar-image.is-initials {
	display: grid;
	place-items: center;
	width: var(--avatar-size, 48px);
	height: var(--avatar-size, 48px);
	border-radius: 50%;
	background: linear-gradient(140deg, var(--brand), var(--brand-deep));
	color: #FFFFFF;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: calc(var(--avatar-size, 48px) * 0.36);
	letter-spacing: 0.02em;
	flex: none;
}
.author-card-photo .author-avatar-image.is-initials { border-radius: var(--radius-lg); }

/* ==========================================================================
   17. De mensen
   Een dienst waarbij je je hele voorraad uit handen geeft, verkoopt niet op
   een dashboard alleen. Foto's uit het eigen magazijn, en één gezicht met een
   naam en een nummer eronder.
   ========================================================================== */

.section-team { background: var(--surface-alt); }

.team {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}
.team-copy .section-heading { margin-bottom: clamp(20px, 3vw, 28px); }

.team-contact {
	padding: clamp(18px, 2vw, 24px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.team-location {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin: 1.4em 0 0;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.team-location .icon { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 2px; }

/* Twee foto's die verspringen — een strak raster oogt als een stockpagina. */
.team-photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
	align-items: start;
}
.team-photos .team-photo-2 { margin-top: clamp(24px, 4vw, 52px); }
.team-photo { margin: 0; }
.team-photo img {
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow);
}
.team-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
/* Bijschrift onder de foto in plaats van eroverheen. */
.team-photo figcaption {
	padding: 10px 2px 0;
	color: var(--text-soft);
	font-size: 0.84rem;
	font-weight: 500;
}


@media (max-width: 900px) {
	.team { grid-template-columns: minmax(0, 1fr); }
	.team-photos .team-photo-2 { margin-top: 0; }
}

/* ---- Persoonskaart ------------------------------------------------------- */

.person { display: flex; align-items: center; gap: 14px; }

.person-photo {
	width: 64px; height: 64px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--surface-alt);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo.is-empty {
	display: grid;
	place-items: center;
	border: 1px dashed var(--line-strong);
	font-size: 0.68rem;
}
.person-photo.is-empty .is-placeholder { padding: 0.1em 0.35em; }

.person-body { min-width: 0; }
.person-role {
	margin: 0;
	font-size: 0.8rem;
	color: var(--text-faint);
}
.person-name {
	margin: 0 0 0.15em;
	font-family: var(--f-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}
.person-contact { margin: 0; }
.person-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
}
.person-contact a:hover { text-decoration: underline; }
.person-contact .icon { width: 15px; height: 15px; }
.person-note {
	margin: 0.5em 0 0;
	font-size: var(--t-micro);
	color: var(--text-faint);
}

.person-inline .person-photo { width: 46px; height: 46px; }
.person-inline .person-name { font-size: 0.95rem; }
.person-inline .person-contact a { font-size: 0.88rem; }

.cta-person {
	margin-top: 1.4em;
	padding-top: 1.2em;
	border-top: 1px solid var(--line);
}
.tone-dark .person-photo.is-empty { border-color: rgba(255, 255, 255, 0.35); }
.tone-dark .person-contact a { color: #FFFFFF; }

/* ==========================================================================
   18. Referentierichting september 2026 — filmische homepage
   AG e-Commerce, Bigblue, Delta en fulfilmentcrowd delen drie sterke keuzes:
   echte operatie in beeld, één grote belofte en bewijs in dezelfde viewport.
   Titan vertaalt dat naar het eigen paars en de eigen magazijnfotografie.
   ========================================================================== */

.topbar {
	background: #0D0528;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header {
	background: #FFFFFF;
	border-bottom-color: rgba(91, 33, 214, 0.12);
	backdrop-filter: saturate(150%) blur(18px);
}
.site-header.scrolled {
	background: #FFFFFF;
	border-bottom-color: rgba(91, 33, 214, 0.16);
	box-shadow: 0 18px 40px -30px rgba(24, 10, 74, 0.38);
}
.header-panel { background: #FFFFFF; }
.main-nav a,
.submenu-toggle { color: #4B4860; }
.main-nav li:hover > .submenu-toggle,
.submenu-toggle[aria-expanded="true"],
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--brand-deep); }
.theme-toggle,
.menu-button {
	border-color: rgba(91, 33, 214, 0.18);
	background: #F7F3FF;
	color: var(--brand-deep);
}
.menu-bars span { background: var(--indigo-night); }

.hero {
	position: relative;
	display: grid;
	align-content: end;
	min-height: clamp(560px, calc(100svh - 126px), 820px);
	padding: clamp(64px, 8vw, 108px) 0 0;
	background: var(--indigo-deep);
	color: #F4F1FF;
	overflow: clip;
	isolation: isolate;
}
.hero-media {
	position: absolute;
	inset: 0;
	z-index: -3;
}
.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(15, 7, 48, 0.96) 0%, rgba(15, 7, 48, 0.82) 40%, rgba(15, 7, 48, 0.18) 72%, rgba(15, 7, 48, 0.34) 100%),
		linear-gradient(0deg, rgba(15, 7, 48, 0.64) 0%, transparent 44%);
}
.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 66% center;
	filter: saturate(0.92) contrast(1.02);
}
.hero-aura {
	inset: -25% auto auto -18%;
	width: min(900px, 100vw);
	background: radial-gradient(circle, rgba(122, 59, 240, 0.4), rgba(122, 59, 240, 0) 67%);
	z-index: -1;
}
.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.55fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: end;
	width: 100%;
}
.hero-copy { max-width: 780px; }
.hero-eyebrow {
	color: #D7D0EE;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.hero-eyebrow .eyebrow-dot { background: var(--brand-light); }
.hero h1 {
	max-width: 18ch;
	margin-bottom: 0.42em;
	color: #FFFFFF;
	font-size: clamp(3rem, 2rem + 2.25vw, 4rem);
	line-height: 0.98;
	letter-spacing: -0.048em;
}
.hero .text-accent {
	display: block;
	color: #B58CFF;
}
.hero-lead {
	max-width: 58ch;
	color: #D2CBE7;
	font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
}
.hero-actions { margin-bottom: clamp(26px, 4vw, 42px); }
.hero-proof {
	gap: 18px 28px;
	padding-top: 0;
	border-top: 0;
}
.hero .rating-badge {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: none;
	color: #FFFFFF;
	backdrop-filter: blur(12px);
}
.hero-usps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}
.hero-usps li { color: #D7D0EA; }
.hero-usps li::before { background: #B58CFF; }

.hero-live-card {
	align-self: end;
	margin-bottom: clamp(6px, 2vw, 20px);
	padding: clamp(20px, 2.5vw, 30px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-xl);
	background: rgba(17, 7, 53, 0.72);
	box-shadow: 0 32px 80px -36px rgba(0, 0, 0, 0.92);
	backdrop-filter: blur(18px);
}
.hero-live-kicker,
.flow-board-label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 1em;
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.hero-live-kicker { color: #D7D0EA; }
.hero-live-kicker span,
.flow-board-label span { display: none; }
.hero-live-title {
	margin: 0 0 1.25em;
	font-family: var(--f-display);
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
	font-weight: 700;
	line-height: 1.18;
	color: #FFFFFF;
}
.hero-live-steps { margin: 0; padding: 0; list-style: none; }
.hero-live-steps li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.hero-live-steps li span {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	color: #AD99DF;
}
.hero-live-steps li strong { font-size: 0.88rem; font-weight: 500; color: #F3F0FC; }
.hero-live-foot {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 1.2em 0 0;
	padding-top: 1em;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	font-size: var(--t-small);
	color: #BEB5DC;
}
.hero-live-foot strong { color: #FFFFFF; }

.hero-stats {
	width: 100%;
	margin-top: clamp(34px, 4vw, 52px);
	padding-block: clamp(20px, 2.6vw, 30px);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(9, 4, 28, 0.34);
	backdrop-filter: blur(14px);
}
.hero-stats::before {
	content: "";
	position: absolute;
	inset: 0 calc(50% - 50vw);
	z-index: -1;
	background: inherit;
}
.hero-stats .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.hero-stats .stat {
	min-width: 0;
	padding: 6px clamp(14px, 2vw, 28px);
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.hero-stats .stat:first-child { border-left: 0; padding-left: 0; }
.hero-stats .stat-value { color: #FFFFFF; font-size: clamp(1.85rem, 1.25rem + 2vw, 3rem); }
.hero-stats .stat-label { color: #C8C0DE; }

.section-trust {
	padding-block: clamp(28px, 3.5vw, 46px);
	background: var(--surface);
}
.section-trust .shell { gap: 18px; }
.section-trust {
	border-color: #E7E2EF;
	background: #FFFFFF;
	color: #20182F;
}
.section-trust .shell { gap: 0; }
.logo-row {
	display: grid;
	grid-template-columns: clamp(120px, 14vw, 170px) minmax(0, 1fr);
	gap: 20px 28px;
	overflow: visible;
}
.logo-row + .logo-row {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid #E7E2EF;
}
.logo-row-label {
	width: auto;
	font-size: 0.78rem;
	font-weight: 600;
	color: #746D80;
}
.logo-row-list {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 14px clamp(18px, 2.2vw, 30px);
	min-width: 0;
}
.logo-chip {
	display: grid;
	place-items: center;
	width: clamp(82px, 7.4vw, 106px);
	height: 38px;
	color: #20182F;
}
.logo-chip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Logoband: zonder JavaScript en bij reduced motion een stilstaande lijst.
   site.js zet .is-running; dan loopt de band lineair en naadloos (twee gelijke helften). */
.logo-marquee { position: relative; min-width: 0; overflow: clip; --logo-gap: clamp(28px, 3.4vw, 48px); }
.logo-marquee [data-logo-copy] { display: none; }
.logo-marquee__track { display: flex; }
.logo-marquee.is-running {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-marquee.is-running [data-logo-copy] { display: grid; }
.logo-marquee.is-running ul[data-logo-copy] { display: flex; }
.logo-marquee.is-running .logo-marquee__track {
	width: max-content;
	animation: titan-logoband calc(var(--logo-count) * var(--dur-logo-stap)) linear infinite;
}
.logo-marquee.is-running .logo-row-list { flex: none; flex-wrap: nowrap; gap: var(--logo-gap); padding-inline-end: var(--logo-gap); }
.logo-marquee.is-reverse .logo-marquee__track { animation-direction: reverse; }
.logo-marquee.is-paused .logo-marquee__track,
.logo-marquee.is-offscreen .logo-marquee__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
	.logo-marquee.is-running:hover .logo-marquee__track { animation-play-state: paused; }
}
@keyframes titan-logoband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.logo-marquee .logo-marquee__track { animation: none !important; }
}
.logo-marquee-toggle {
	justify-self: end;
	margin-top: 14px;
	padding: 6px 2px;
	border: 0;
	background: none;
	font: 600 0.78rem var(--f-body);
	color: #746D80;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.logo-marquee-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-card {
	min-height: 340px;
	padding: clamp(26px, 3vw, 40px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background:
		radial-gradient(circle at 100% 0%, var(--accent-wash), transparent 45%),
		var(--surface);
	overflow: hidden;
}
.service-card::before { top: 0; height: 3px; }
.service-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: clamp(10px, 2vw, 22px);
	border: 1px solid var(--line);
	border-radius: 50%;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	color: var(--accent);
	background: var(--surface-alt);
}
.service-title { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); }

.section-flow {
	padding-top: 0;
	background: var(--bg);
}
.flow-layout {
	display: grid;
	grid-template-columns: minmax(230px, 0.58fr) minmax(0, 1.42fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.flow-intro .section-heading { margin-bottom: 22px; }
.flow-board {
	position: relative;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--radius-xl);
	background:
		radial-gradient(circle at 82% 12%, rgba(122, 59, 240, 0.48), transparent 45%),
		linear-gradient(150deg, var(--indigo-night), var(--indigo-deep));
	box-shadow: var(--shadow-lg);
	color: #F5F2FF;
	overflow: hidden;
}
.flow-board::after {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -130px;
	width: 320px;
	height: 320px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	box-shadow: 0 0 0 36px rgba(255, 255, 255, 0.025), 0 0 0 72px rgba(255, 255, 255, 0.018);
	pointer-events: none;
}
.flow-board-label { color: #CFC7E8; }
.flow-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 26px 0 20px;
	list-style: none;
}
.flow-track::before {
	content: "";
	position: absolute;
	top: 45px;
	left: 9%;
	right: 9%;
	height: 2px;
	background: linear-gradient(90deg, rgba(181, 140, 255, 0.25), #B58CFF, rgba(181, 140, 255, 0.25));
}
.flow-step { position: relative; z-index: 1; margin: 0; }
.flow-number {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 18px;
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 50%;
	background: #22105A;
	box-shadow: 0 0 0 7px rgba(181, 140, 255, 0.09);
	font-family: var(--f-mono);
	font-size: 0.68rem;
	color: #D8C5FF;
}
.flow-step strong { display: block; margin-bottom: 7px; font-size: 0.94rem; color: #FFFFFF; }
.flow-step small { display: block; color: #BEB5D7; font-size: 0.76rem; line-height: 1.55; }
.flow-board-foot {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.flow-board-foot span {
	padding: 6px 11px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.72rem;
	color: #D8D1EA;
}

@keyframes titan-hero-settle {
	from { opacity: 0.72; transform: scale(1.045); }
	to { opacity: 1; transform: scale(1); }
}
.hero-live-card { animation: none; }

@media (max-width: 1024px) {
	.header-panel {
		background: #FFFFFF;
		border-bottom-color: rgba(91, 33, 214, 0.14);
	}
	.main-nav a { border-bottom-color: rgba(91, 33, 214, 0.12); }
	.hero { min-height: auto; padding-top: clamp(56px, 8vw, 84px); }
	.hero-inner { grid-template-columns: minmax(0, 1fr); }
	.hero h1 { max-width: 14ch; }
	.hero-live-card { max-width: 560px; }
	.flow-layout { grid-template-columns: minmax(0, 1fr); }
	.flow-intro { max-width: 680px; }
}

@media (max-width: 720px) {
	.hero-media img { object-position: 68% center; }
	.hero-media::after {
		background:
			linear-gradient(90deg, rgba(15, 7, 48, 0.96), rgba(15, 7, 48, 0.72)),
			linear-gradient(0deg, rgba(15, 7, 48, 0.94), transparent 55%);
	}
	.hero h1 { max-width: 13ch; font-size: clamp(2.65rem, 11.5vw, 4rem); }
	.hero-live-card { display: none; }
	.hero-proof { align-items: flex-start; flex-direction: column; }
	.hero-usps { display: grid; }
	.hero-stats .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero-stats .stat { padding: 14px; border-left: 1px solid rgba(255, 255, 255, 0.14); border-top: 1px solid rgba(255, 255, 255, 0.14); }
	.hero-stats .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
	.hero-stats .stat:nth-child(-n+2) { border-top: 0; }
	.service-grid { grid-template-columns: minmax(0, 1fr); }
	.service-card { min-height: 0; }
	.flow-track { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 4px; }
	.flow-track::before { top: 18px; bottom: 18px; left: 23px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(181, 140, 255, 0.25), #B58CFF, rgba(181, 140, 255, 0.25)); }
	.flow-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; padding-bottom: 22px; }
	.flow-number { grid-row: span 2; margin: 0; }
	.flow-step strong { align-self: end; }
	.flow-step small { max-width: 38ch; }
	.logo-row { align-items: flex-start; flex-direction: column; }
	.logo-row-label { width: auto; }
	.logo-row-list { min-width: 0; flex-wrap: wrap; }
}

@media (max-width: 480px) {
	.hero-actions { align-items: stretch; flex-direction: column; }
	.hero-actions .button { width: 100%; }
	.hero-live-card { padding: 20px; }
	.hero-live-foot { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================================
   19. Titan Control Tower — gecombineerde referentierichting v1.2
   Filmische operatie (AG/Delta), premium product-UI (Bigblue), redactioneel
   ritme en oplossings-tabs (fulfilmentcrowd), volledig in Titans eigen systeem.
   ========================================================================== */

.button-light {
	background: #FFFFFF;
	color: var(--indigo-night);
	border-color: #FFFFFF;
	box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.75);
}
.button-light:hover {
	background: #F1EBFF;
	border-color: #F1EBFF;
	color: var(--brand-deep);
}

/* Hero: minder AG-imitatie, meer eigen verhaal tussen operatie en overzicht. */
.hero-inner {
	grid-template-columns: minmax(0, 1.24fr) minmax(330px, 0.62fr);
	align-items: center;
}
.hero { padding-top: clamp(48px, 5vw, 76px); padding-bottom: clamp(40px, 5vw, 72px); }
.hero-copy { max-width: 830px; }
.hero h1 {
	max-width: 15ch;
	font-size: clamp(3rem, 1.9rem + 2.3vw, 4.7rem);
	line-height: 0.94;
	letter-spacing: -0.058em;
}
.hero .text-accent { max-width: 15ch; }
.hero-lead { margin-bottom: 1.45em; }
.hero-actions { margin-bottom: clamp(20px, 2.6vw, 30px); }
.hero-proof { max-width: 780px; }
.hero-usps {
	display: flex;
	gap: 10px;
}
.hero-usps li {
	padding: 8px 13px 8px 30px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.07);
	font-size: 0.78rem;
	backdrop-filter: blur(10px);
}
.hero-usps li::before {
	left: 13px;
	top: calc(50% - 1px);
	width: 9px;
}

.hero-command-card {
	position: relative;
	align-self: center;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 30px;
	background: rgba(14, 6, 43, 0.78);
	box-shadow: 0 34px 90px -38px rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(24px) saturate(135%);
	overflow: hidden;
}
.hero-command-head {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(96px, 112px) minmax(0, 1fr);
	align-items: center;
	gap: 11px;
	padding: 10px 10px 18px;
}
.hero-command-logo {
	display: block;
	width: 112px;
	height: auto;
	opacity: 0.96;
	object-fit: contain;
}
.hero-command-head p { margin: 0; line-height: 1.25; }
.hero-command-head strong,
.hero-command-head small { display: block; }
.hero-command-head strong { font-size: 0.88rem; color: #FFFFFF; }
.hero-command-head small { margin-top: 3px; font-size: 0.66rem; color: #AFA6C9; }
.hero-route {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hero-route::before {
	content: "";
	position: absolute;
	top: 27px;
	left: 16%;
	right: 16%;
	height: 1px;
	background: linear-gradient(90deg, #B58CFF, rgba(181, 140, 255, 0.25));
}
.hero-route li {
	position: relative;
	z-index: 1;
	min-width: 0;
	margin: 0;
	padding: 14px 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.055);
}
.hero-route li > span {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-bottom: 20px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	background: #211057;
	font-family: var(--f-mono);
	font-size: 0.58rem;
	color: #BEB0E0;
}
.hero-route li.is-done > span,
.hero-route li.is-current > span { border-color: #B58CFF; color: #FFFFFF; }
.hero-route li.is-current { background: rgba(122, 59, 240, 0.18); border-color: rgba(181, 140, 255, 0.32); }
.hero-route strong,
.hero-route small { display: block; min-width: 0; }
.hero-route strong { font-size: 0.77rem; color: #FFFFFF; }
.hero-route small { margin-top: 3px; font-size: 0.62rem; color: #AFA6C9; }
.hero-command-foot {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 8px;
}
.hero-command-foot span {
	display: block;
	padding: 12px 14px;
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.62rem;
	color: #9F96BC;
}
.hero-command-foot strong { display: block; margin-top: 2px; font-size: 0.72rem; color: #EDE9F9; }

/* Oplossingen: redactionele tabmodule met één groot verhaal per keer. */
.section-solutions { background: var(--bg); }
.solutions-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
	gap: clamp(28px, 6vw, 88px);
	align-items: end;
	margin-bottom: clamp(32px, 5vw, 58px);
}
.solutions-intro .section-heading { margin-bottom: 0; }
.solutions-note {
	display: flex;
	align-items: center;
	margin: 0 0 4px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text-soft);
}
.solution-tabs {
	border: 1px solid var(--line);
	border-radius: 34px;
	background: var(--surface);
	box-shadow: 0 30px 80px -56px rgba(24, 10, 74, 0.55);
	overflow: hidden;
}
.solution-tablist {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-bottom: 1px solid var(--line);
}
.solution-tab {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 21px clamp(14px, 2vw, 24px);
	border-left: 1px solid var(--line);
	color: var(--text-faint);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.solution-tab:first-child { border-left: 0; }
.solution-tab::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: -1px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--accent);
	transform: scaleX(0);
	transition: transform 0.24s var(--ease);
}
.solution-tab > span { font-family: var(--f-mono); font-size: 0.62rem; color: var(--accent); }
.solution-tab:hover { color: var(--text); background: var(--accent-wash); }
.solution-tab.is-active { color: var(--text); background: var(--accent-wash); }
.solution-tab.is-active::after { transform: scaleX(1); }
.solution-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
	align-items: stretch;
	min-height: 570px;
}
.solution-tabs.is-enhanced .solution-panel[hidden] { display: none; }
.solution-tabs:not(.is-enhanced) .solution-panel + .solution-panel { border-top: 1px solid var(--line); }
.solution-visual {
	position: relative;
	min-width: 0;
	margin: 0;
	overflow: hidden;
}
.solution-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(15, 7, 48, 0.72));
	pointer-events: none;
}
.solution-visual img {
	width: 100%;
	height: 100%;
	min-height: 570px;
	object-fit: cover;
	object-position: center 36%;
	filter: contrast(1.03);
}
.solution-visual figcaption {
	position: absolute;
	left: clamp(22px, 3vw, 38px);
	right: clamp(22px, 3vw, 38px);
	bottom: clamp(20px, 3vw, 34px);
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #FFFFFF;
	font-size: 0.84rem;
	font-weight: 600;
}
.solution-visual figcaption span {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 50%;
	background: rgba(15, 7, 48, 0.32);
	font-family: var(--f-mono);
	font-size: 0.62rem;
	backdrop-filter: blur(10px);
}
.solution-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(34px, 5vw, 70px);
}
.solution-label {
	margin: 0 0 20px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--accent);
}
.solution-copy h3 { max-width: 15ch; margin-bottom: 0.65em; font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.65rem); }
.solution-copy > p:not(.solution-label) { max-width: 46ch; color: var(--text-soft); }
.solution-features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 30px;
	padding: 0;
	list-style: none;
}
.solution-features li {
	margin: 0;
	padding: 7px 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface-alt);
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--text-soft);
}

/* Control Tower: software als volwaardig beeld, niet als klein dashboardkaartje. */
.section-control {
	position: relative;
	background:
		radial-gradient(circle at 82% 12%, rgba(122, 59, 240, 0.44), transparent 34%),
		radial-gradient(circle at 12% 92%, rgba(91, 33, 214, 0.25), transparent 30%),
		linear-gradient(145deg, #180A4A, #0B0424 74%);
	overflow: hidden;
}
.section-control::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
	pointer-events: none;
}
.control-layout {
	position: relative;
	display: grid;
	grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(38px, 6vw, 86px);
	align-items: center;
}
.control-copy .section-heading { margin-bottom: 30px; }
.control-copy .section-title { max-width: 13ch; }
.control-benefits { display: grid; gap: 0; margin: 0 0 32px; padding: 0; list-style: none; }
.control-benefits li {
	display: grid;
	grid-template-columns: minmax(130px, 0.72fr) minmax(0, 1.28fr);
	gap: 18px;
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.control-benefits strong { font-size: 0.84rem; color: #FFFFFF; }
.control-benefits span { font-size: 0.76rem; color: #B9B1D1; }
.control-console {
	position: relative;
	min-width: 0;
	padding: clamp(16px, 2vw, 24px);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 34px;
	background: #F8F6FD;
	box-shadow: 0 45px 110px -38px rgba(0, 0, 0, 0.85);
	color: #181329;
	overflow: hidden;
}
.control-console-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 2px 2px 18px;
}
.console-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.console-brand img { display: block; width: 120px; height: auto; object-fit: contain; }
.console-brand strong { font-size: 0.86rem; }
.console-tabs {
	display: flex;
	gap: 4px;
	margin: 0 -24px 18px;
	padding: 0 24px 12px;
	border-bottom: 1px solid #E4DFEC;
}
.console-tabs span { padding: 7px 11px; border-radius: 9px; font-size: 0.66rem; font-weight: 600; color: #837B92; }
.console-tabs .is-active { background: #EDE5FC; color: var(--brand-deep); }
.console-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.console-summary > div {
	min-width: 0;
	padding: 16px;
	border: 1px solid #E3DDEA;
	border-radius: 17px;
	background: #FFFFFF;
}
.console-summary small,
.console-summary strong { display: block; }
.console-summary small { font-size: 0.58rem; color: #81798F; }
.console-summary strong { margin: 5px 0 14px; font-size: 0.82rem; color: #1B152C; }
.summary-line { position: relative; display: block; height: 5px; border-radius: 5px; background: #EEE9F5; overflow: hidden; }
.summary-line i { display: block; width: 86%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-deep), #A879FF); }
.summary-bars { display: flex; align-items: end; gap: 5px; height: 22px; }
.summary-bars i { width: 12%; height: 48%; border-radius: 3px 3px 1px 1px; background: #C9B2F5; }
.summary-bars i:nth-child(2) { height: 72%; }
.summary-bars i:nth-child(3) { height: 56%; }
.summary-bars i:nth-child(4) { height: 92%; background: var(--brand); }
.summary-bars i:nth-child(5) { height: 78%; }
.console-orders { padding: 16px; border: 1px solid #E3DDEA; border-radius: 17px; background: #FFFFFF; }
.console-orders-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.console-orders-head strong { font-size: 0.74rem; }
.console-orders-head span { font-size: 0.56rem; color: #7E768C; }
.console-orders ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.console-orders li {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 10px;
	border-radius: 10px;
	background: #F8F6FB;
	font-size: 0.62rem;
	color: #6F687C;
}
.console-orders code { font-size: 0.6rem; color: #3E374C; }
.console-orders li strong { font-size: 0.58rem; color: #665F72; }
.console-flow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 7px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.console-flow::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 8%;
	right: 8%;
	height: 1px;
	background: #CEB9F5;
}
.console-flow li { position: relative; z-index: 1; min-width: 0; margin: 0; text-align: center; }
.console-flow span {
	display: grid;
	place-items: center;
	width: 31px;
	height: 31px;
	margin: 0 auto 7px;
	border: 1px solid #CDB9F3;
	border-radius: 50%;
	background: #F1EAFF;
	font-family: var(--f-mono);
	font-size: 0.52rem;
	color: var(--brand-deep);
}
.console-flow strong { display: block; overflow: hidden; font-size: 0.53rem; font-weight: 600; color: #665E74; text-overflow: ellipsis; white-space: nowrap; }

/* Mensen: één groot echt teambeeld als bewijs, niet twee losse stockachtige kaarten. */
.section-team-story { background: var(--bg); }
.team-story-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
	gap: clamp(34px, 6vw, 84px);
	align-items: center;
}
.team-story-visual {
	position: relative;
	min-width: 0;
	margin: 0;
	border-radius: 36px;
	background: #FFFFFF;
	box-shadow: 0 34px 80px -48px rgba(24, 10, 74, 0.55);
	overflow: hidden;
}
.team-story-visual img { width: 100%; aspect-ratio: 1600 / 1141; object-fit: cover; }
.team-story-visual figcaption {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: calc(100% - 40px);
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius-pill);
	background: rgba(15, 7, 48, 0.72);
	backdrop-filter: blur(14px);
	font-size: 0.7rem;
	color: #DED7EE;
}
.team-story-visual figcaption strong { color: #FFFFFF; }
.team-story-copy .section-heading { margin-bottom: 28px; }
.team-story-points { display: grid; gap: 0; margin: 0 0 30px; padding: 0; list-style: none; }
.team-story-points li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 15px;
	margin: 0;
	padding: 15px 0;
	border-top: 1px solid var(--line);
}
.team-story-points > li > span { font-family: var(--f-mono); font-size: 0.65rem; color: var(--accent); }
.team-story-points p { margin: 0; font-size: 0.82rem; color: var(--text-soft); }
.team-story-points strong { display: block; margin-bottom: 3px; font-size: 0.9rem; color: var(--text); }
.team-story-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.team-phone { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.team-phone .icon { width: 18px; height: 18px; color: var(--accent); }
.team-phone span { display: flex; flex-direction: column; font-size: 0.65rem; color: var(--text-faint); }
.team-phone strong { font-size: 0.82rem; color: var(--text); }
.team-phone:hover strong { color: var(--accent); }

.section-cases { background: var(--surface-alt); }
.section-cases .case-card { box-shadow: 0 20px 48px -40px rgba(24, 10, 74, 0.55); }

@media (max-width: 1080px) {
	.hero-inner { grid-template-columns: minmax(0, 1fr); align-items: end; }
	.hero h1 { max-width: 13ch; }
	.hero-command-card { width: min(100%, 620px); }
	.control-layout { grid-template-columns: minmax(0, 1fr); }
	.control-copy { max-width: 680px; }
	.control-copy .section-title { max-width: 16ch; }
	.control-console { width: min(100%, 760px); }
	.team-story-grid { grid-template-columns: minmax(0, 1fr); }
	.team-story-copy { max-width: 720px; }
}

@media (max-width: 860px) {
	.solutions-intro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.solutions-note { max-width: 420px; }
	.solution-tablist {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}
	.solution-tab { min-width: 190px; scroll-snap-align: start; }
	.solution-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.solution-visual img { min-height: 0; aspect-ratio: 5 / 4; }
	.solution-copy { padding: clamp(30px, 7vw, 54px); }
	.solution-copy h3 { max-width: 18ch; }
}

@media (max-width: 720px) {
	.hero { padding-top: 52px; }
	.hero h1 { max-width: 11.5ch; font-size: clamp(2.65rem, 11.7vw, 4.1rem); }
	.hero .text-accent { max-width: 11.5ch; }
	.hero-command-card { border-radius: 24px; }
	.logo-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.logo-row-list { gap: 12px 18px; }
	.logo-chip { width: 90px; height: 36px; }
	.control-benefits li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
	.control-console { border-radius: 24px; }
	.console-tabs { margin-inline: -16px; padding-inline: 16px; }
	.team-story-visual { border-radius: 26px; }
}

@media (max-width: 520px) {
	.hero-usps { display: grid; width: 100%; }
	.hero-usps li { width: fit-content; }
	.hero-command-head { grid-template-columns: 104px minmax(0, 1fr); }
	.hero-command-logo { width: 104px; }
	.hero-route li { padding: 12px 8px; }
	.hero-route strong { font-size: 0.7rem; }
	.hero-route small { font-size: 0.56rem; }
	.hero-command-foot { grid-template-columns: minmax(0, 1fr); }
	.solution-tabs { border-radius: 24px; }
	.solution-tab { min-width: 172px; padding: 18px 16px; }
	.solution-copy { padding: 28px 22px 34px; }
	.solution-copy h3 { font-size: clamp(1.6rem, 8vw, 2.15rem); }
	.console-summary { grid-template-columns: minmax(0, 1fr); }
	.console-orders li { grid-template-columns: 68px minmax(0, 1fr); }
	.console-orders li > span { display: none; }
	.console-flow { grid-template-columns: repeat(5, 70px); overflow-x: auto; padding-bottom: 5px; }
	.console-flow::before { display: none; }
	.team-story-visual figcaption { position: static; width: 100%; max-width: none; border: 0; border-radius: 0; background: var(--indigo-night); }
	.team-story-actions { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-command-card,
	.solution-tab,
	.solution-tab::after { transition: none !important; }
}

/* Mobiele navigatie is zonder JavaScript bereikbaar; gesloten panelen zijn echt verborgen. */
@media (max-width: 1024px) {
 .nav-ready .header-panel:not(.open) { visibility: hidden; }
 html:not(.nav-ready) .header-inner { flex-wrap: wrap; }
 html:not(.nav-ready) .header-panel { position: static; width: 100%; clip-path: none; opacity: 1; pointer-events: auto; }
 html:not(.nav-ready) .menu-button, html:not(.nav-ready) .theme-toggle { display: none; }
}

/* Contrast op de bestaande bewijs- en procescomponenten. */
.step-number { opacity: 1; color: var(--accent); }
.review-who .is-placeholder { color: var(--text-soft); }

/* Approved inner pages — September 2026. Uses the existing light/dark tokens. */
.landing-hero { padding: 28px 0 68px; background: var(--surface-sink); border-bottom: 1px solid var(--line); }
.landing-hero .breadcrumbs { margin-bottom: 38px; }
.landing-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(32px,5vw,76px); }
.landing-hero h1, .enquiry-header h1 { font: 700 clamp(2.3rem,4.2vw,3.9rem)/1.1 var(--f-display); letter-spacing: -.055em; text-wrap: balance; margin: 20px 0 25px; }
.landing-intro { font-size: var(--t-lead); line-height: 1.8; color: var(--text-soft); max-width: 58ch; }
.landing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 30px; }
.landing-detail { margin: 28px 0 0; font-size: .8rem; color: var(--text-soft); }
.landing-detail span { padding: 0 12px; color: var(--accent); }
.landing-visual { margin: 0; position: relative; border-radius: 22px 22px 60px 22px; overflow: hidden; background: var(--indigo-night); aspect-ratio: 1.08; }
.landing-visual > img { width: 100%; height: 100%; object-fit: cover; }
.landing-visual figcaption { position: absolute; inset: auto 0 0; padding: 64px 32px 30px; color: white; background: linear-gradient(transparent,rgba(15,7,48,.96)); }
.landing-visual figcaption .mini-label { display: block; color: #E4D7FF; margin-bottom: 9px; font-size: .69rem; }
.landing-visual figcaption strong { display: block; max-width: 25ch; font: 600 1.1rem/1.5 var(--f-display); }
.work-stages { list-style: none !important; padding: 0 !important; counter-reset: work; margin-block: 30px !important; }
.work-stages li { padding: 24px 0 24px 66px; position: relative; border-top: 1px solid var(--line); margin: 0 !important; counter-increment: work; }
.work-stages li::before { content: counter(work,decimal-leading-zero); position: absolute; top: 23px; left: 0; font: 700 1.2rem/1.5 var(--f-mono); color: var(--accent); }
.work-stages h3 { margin: 0 0 10px; font-size: 1.1rem; }
.work-stages p { margin: 0; font-size: .94rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 32px; }
.detail-grid section { padding: 25px 0; border-top: 2px solid var(--accent); }
.detail-grid h3 { margin: 0 0 12px; font-size: 1.12rem; }
.detail-grid p { margin: 0; font-size: .94rem; }
.page-callout { padding: 30px; border-left: 4px solid var(--accent); background: var(--surface-alt); border-radius: 0 var(--radius) var(--radius) 0; margin-block: 40px; }
.page-callout p { font: 600 1.15rem/1.6 var(--f-display); margin: 0 0 20px; }
.entry-content .page-callout a.button, .entry-content a.button { text-decoration: none; }
.price-intro { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 32px 40px; border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); }
.price-intro p { margin: 0; }
.price-intro > p { font-size: .9rem; line-height: 1.8; color: var(--text-soft); }
.price-amount { font: 700 clamp(2.5rem,5vw,4rem)/1.3 var(--f-display); letter-spacing: -.055em; }
.price-amount span { display: inline-block; font: 400 .9rem/1.5 var(--f-body); letter-spacing: 0; margin-left: 14px; }
.cost-list section { display: flex; gap: 24px; border-top: 1px solid var(--line); padding: 26px 0; }
.cost-number { color: var(--accent); font: 700 1.15rem/1.8 var(--f-mono); }
.cost-list h3 { margin: 0 0 8px; font-size: 1.2rem; }
.cost-list p { margin: 0; }
.system-map { margin-block: 36px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-alt); }
.system-map > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.system-map > .system-hub { border: 2px solid var(--accent); }
.system-map .mini-label { font-size: .72rem; color: var(--accent); }
.system-map strong { font: 600 1.12rem/1.5 var(--f-display); }
.system-map span:not(.mini-label) { font-size: .83rem; color: var(--text-soft); }
.system-map > .system-arrow { display: block; text-align: center; color: var(--accent); font-size: 1.8rem; padding: 6px; }
.system-map > .system-caption { margin: 18px 0 0; text-align: center; font-size: .76rem; color: var(--text-soft); }
.page-integrations, .work-gallery { padding-block: 36px 64px; }
.page-integrations h2, .work-gallery h2 { font-size: var(--t-h2); margin-bottom: 28px; }
.page-integrations ul { list-style: none; padding: 24px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.page-integrations li { display: flex; align-items: center; justify-content: center; }
.page-integrations img { width: 120px; height: 60px; object-fit: contain; }
.work-gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.work-gallery figure { margin: 0; }
.work-gallery img { width: 100%; aspect-ratio: 1.2; object-fit: cover; border-radius: var(--radius); }

/* Procespagina (page-proces.php): stappen uit de pagina-inhoud, met beeld en feiten per stap. */
.proces-overzicht { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: proces; }
.proces-overzicht li { counter-increment: proces; margin: 0; }
.proces-overzicht a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: .84rem; font-weight: 500; text-decoration: none; }
.proces-overzicht a::before { content: counter(proces); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: .74rem; font-weight: 700; }
.proces-overzicht a:hover { border-color: var(--accent); }
.proces-intro { padding-block: clamp(48px, 6vw, 80px) 0; }
.proces-intro p { max-width: 44ch; font: 600 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.4 var(--f-display); color: var(--text); }
.proces-stappen { padding-block: clamp(48px, 6vw, 88px); }
.proces-lijst { display: grid; gap: clamp(64px, 8vw, 120px); margin: 0; padding: 0; list-style: none; }
.proces-stap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 88px); align-items: center; margin: 0; scroll-margin-top: 110px; }
.proces-stap:nth-child(even) .proces-stap-tekst { order: 2; }
.proces-stap-nummer { margin: 0 0 10px; color: var(--accent); font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.proces-stap h3 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); line-height: 1.12; margin-bottom: 18px; }
.proces-stap-tekst > p { max-width: 50ch; color: var(--text-soft); font-size: 1.02rem; }
.proces-feiten { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.proces-feiten li { position: relative; margin: 0; padding-left: 28px; color: var(--text); font-weight: 500; }
.proces-feiten li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 13px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.proces-logos { margin-top: 28px; }
.proces-logos ul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.proces-logos li { display: grid; place-items: center; width: 104px; height: 52px; margin: 0; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.proces-logos img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.proces-stap-beeld { margin: 0; }
.proces-stap-beeld > img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: var(--focus, 50% 20%); border-radius: 22px 22px 60px 22px; }
.proces-stap-beeld figcaption { margin-top: 12px; font-size: .82rem; color: var(--text-soft); }
.proces-stap-beeld.is-scherm .wms-visual { margin: 0; }
.proces-start { padding-block: clamp(56px, 7vw, 96px); background: var(--surface-alt); border-top: 1px solid var(--line); }
.proces-start-kop { max-width: 640px; margin-bottom: 36px; }
.proces-start-kop p { color: var(--text-soft); }
.proces-start ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.proces-start li { margin: 0; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.proces-start-nummer { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.proces-start h3 { font-size: 1.12rem; margin-bottom: 10px; }
.proces-start p { color: var(--text-soft); font-size: .92rem; }
@media (max-width: 960px) {
	.proces-start ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.proces-stap { grid-template-columns: 1fr; gap: 24px; }
	.proces-stap:nth-child(even) .proces-stap-tekst { order: 0; }
	.proces-stap-beeld { order: 2; }
	.proces-start ol { grid-template-columns: 1fr; }
	.proces-logos li { width: 88px; height: 46px; }
}
.work-gallery figcaption, .contact-photo figcaption { margin-top: 12px; font-size: .8rem; color: var(--text-soft); }
.other-services { padding-top: 35px; }
.other-services ul { display: flex; flex-wrap: wrap; gap: 14px; padding: 0; list-style: none; margin-top: 18px; }
.other-services a { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 15px 20px; font-size: .9rem; }
.other-services a:hover { background: var(--surface-alt); }
.other-services span { margin-left: 14px; color: var(--accent); }
.service-index-item { padding-block: 24px 34px; border-top: 1px solid var(--line); }
.service-index-item h3 { margin-top: 0; }
.service-index-item h3 a { text-decoration: none; }
.enquiry-header { padding-top: 28px; padding-bottom: 45px; }
.enquiry-header .eyebrow { margin-top: 38px; }
.enquiry-header .landing-intro { max-width: 62ch; }
.enquiry-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px,5vw,70px); align-items: start; padding-bottom: 100px; }
.enquiry-info h2 { font-size: 1.45rem; margin: 0 0 20px; }
.enquiry-info .work-stages { margin-bottom: 0 !important; }
.enquiry-info .work-stages li { padding-left: 46px; }
.contact-details { margin-top: 42px; padding-top: 32px; border-top: 1px solid var(--line); }
.contact-details address { font-style: normal; }
.contact-details address a, .contact-details address p { display: flex; align-items: flex-start; gap: 15px; margin: 18px 0; overflow-wrap: anywhere; }
.contact-details svg { width: 21px; height: 21px; flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.contact-details .arrow-link { font-size: .85rem; }
.contact-visit { margin-top: 18px; color: var(--text-soft); font-size: .8rem; }
.contact-photo { margin: 30px 0 0; }
.contact-photo img { width: 100%; aspect-ratio: 1.55; object-fit: cover; border-radius: var(--radius); }
.enquiry-form-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(22px,3vw,40px); box-shadow: var(--shadow); }
.enquiry-form-panel > h2 { font-size: 1.6rem; letter-spacing: -.035em; margin: 16px 0 26px; }
.enquiry-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 20px; }
.form-field { min-width: 0; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label { display: block; font-weight: 500; font-size: .85rem; margin-bottom: 8px; }
.form-field .optional { font-size: .75rem; color: var(--text-soft); font-weight: 400; }
.form-field :is(input,textarea,select) { display: block; width: 100%; min-height: 48px; padding: 12px 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: 400 1rem/1.6 var(--f-body); }
.form-field textarea { resize: vertical; }
.form-field [aria-invalid=true] { border: 2px solid var(--accent); }
.form-privacy, .form-required-note { color: var(--text-soft); font-size: .78rem; line-height: 1.8; margin: 20px 0; }
.form-privacy a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-preview-notice { padding: 15px 18px; font-size: .8rem; line-height: 1.8; background: var(--surface-alt); border-left: 3px solid var(--accent); }
.form-errors, .form-result { padding: 20px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface-alt); margin: 22px 0; scroll-margin-top: 120px; }
.form-errors h3, .form-result h3 { font-size: 1.12rem; margin: 0 0 10px; }
.form-errors ul { margin: 0; padding-left: 20px; }
.form-errors a { color: var(--text); text-decoration: underline; }
.form-errors li, .form-result p { font-size: .88rem; line-height: 1.8; }
.field-error { font-size: .8rem; margin-top: 8px; color: var(--text); }
.field-hint { font-size: .8rem; margin-top: 6px; color: var(--text-soft); }
.authors-directory { padding-block: 50px 80px; display: grid; gap: 24px; }
.directory-person { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 32px; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.directory-photo, .directory-photo img { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; }
.directory-person h2 { font-size: 1.55rem; margin: 8px 0 18px; }
.directory-person p { max-width: 70ch; color: var(--text-soft); }
.directory-person .arrow-link { margin-top: 16px; }
@media (max-width: 1024px) {
 .landing-actions { gap: 20px; }
 .landing-hero h1 { font-size: clamp(2.25rem,5vw,3.2rem); }
 .enquiry-grid { grid-template-columns: .8fr 1.2fr; gap: 30px; }
 .enquiry-fields { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
 .landing-hero { padding-bottom: 36px; }
 .landing-hero-grid { grid-template-columns: 1fr; gap: 35px; }
 .landing-hero .breadcrumbs { margin-bottom: 28px; }
 .landing-hero h1, .enquiry-header h1 { font-size: clamp(1.85rem, 8.5vw, 2.35rem); overflow-wrap: anywhere; }
 .landing-intro { font-size: 1.03rem; }
 .landing-visual { aspect-ratio: 1.35; border-bottom-right-radius: 44px; }
 .landing-visual figcaption { padding-inline: 23px; }
 .detail-grid { grid-template-columns: 1fr; }
 .work-stages li { padding-left: 48px; }
 .page-callout { padding: 24px; }
 .page-callout .button { width: 100%; }
 .price-intro { grid-template-columns: 1fr; padding: 25px; gap: 20px; margin-top: 28px; }
 .system-map { padding: 18px; }
 .system-map > div { padding: 22px 15px; }
 .work-gallery-grid { grid-template-columns: 1fr; gap: 30px; }
 .work-gallery img { aspect-ratio: 1.4; }
 .page-integrations ul { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 20px; gap: 26px 20px; }
 .other-services li, .other-services a { width: 100%; }
 .enquiry-grid { grid-template-columns: 1fr; }
 .enquiry-info { order: 2; }
 .enquiry-form-panel { order: 1; }
 .enquiry-header { padding-bottom: 30px; }
 .enquiry-header h1 { font-size: 2.4rem; }
 .enquiry-grid .enquiry-info { padding-top: 18px; }
 .directory-person { grid-template-columns: 1fr; padding: 24px; }
}
.author-profile-grid { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 38px; margin-top: 38px; align-items: start; }
.author-profile-photo, .author-profile-photo img { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; }
.author-profile .archive-title { margin-block: 16px; }
.author-profile .archive-intro { margin-block: 20px; }
.author-publications { padding-block: 55px 90px; }
.author-publications-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; }
.author-publications h2 { font-size: var(--t-h2); margin-top: 12px; }
@media (max-width: 760px) { .author-profile-grid { grid-template-columns: 1fr; gap: 22px; } }

/* Commercial pages have wide sections; the article layout is reserved for resources. */
.commercial-sections { scroll-margin-top: 115px; }
.commercial-section { padding-block: clamp(48px,6vw,88px); border-bottom: 1px solid var(--line); }
.commercial-section:nth-child(even):not(.is-process) { background: var(--surface-sink); }
.commercial-section-inner { display: grid; gap: 35px; }
.commercial-section.is-split .commercial-section-inner { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(36px,7vw,110px); align-items: start; }
.commercial-section-heading { position: relative; max-width: 760px; }
.commercial-section-heading h2 { font: 650 clamp(1.6rem,2.5vw,2.35rem)/1.22 var(--f-display); letter-spacing: -.045em; text-wrap: balance; margin: 16px 0 0; scroll-margin-top: 125px; }
.commercial-section-number { font: 700 .8rem/1.5 var(--f-mono); color: var(--accent); display: inline-flex; align-items: center; gap: 12px; }
.commercial-section-number::after { content: ''; width: 60px; height: 1px; background: currentColor; }
.commercial-section-body { min-width: 0; }
.commercial-section-body > p { max-width: 76ch; font-size: 1rem; line-height: 1.9; color: var(--text-soft); margin: 0 0 20px; }
.commercial-section-body > p:last-child { margin-bottom: 0; }
.commercial-section-body > ul { list-style: none; padding: 0; margin: 28px 0; }
.commercial-section-body > ul > li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); font-size: .93rem; line-height: 1.8; }
.commercial-section-body > ul > li::before { content: '↗'; color: var(--accent); position: absolute; left: 0; }
.commercial-section-body p > a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.commercial-section.is-process { background: var(--indigo-night); }
.commercial-section .work-stages { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; margin: 0 !important; }
.commercial-section .work-stages:has(li:last-child:nth-child(3)) { grid-template-columns: repeat(3,minmax(0,1fr)); }
.commercial-section .work-stages li { padding: 74px 25px 30px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: var(--radius); }
.commercial-section .work-stages li::before { top: 25px; left: 25px; color: var(--accent); }
.commercial-section .work-stages h3 { font-size: 1.1rem; line-height: 1.5; color: var(--text); }
.commercial-section .work-stages p { font-size: .87rem; line-height: 1.8; color: var(--text-soft); }
.commercial-section .detail-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; }
.commercial-section .detail-grid section { padding: 25px 0 0; }
.commercial-section .detail-grid h3 { line-height: 1.5; }
.commercial-section .detail-grid p { color: var(--text-soft); font-size: .9rem; line-height: 1.9; }
.commercial-callout { padding-block: 42px; }
.commercial-callout .page-callout { display: flex; gap: 40px; align-items: center; justify-content: space-between; margin: 0; padding: 34px 40px; border-left-width: 5px; }
.commercial-callout .page-callout p { max-width: 55ch; margin: 0; font-size: 1.25rem; }
.commercial-callout .page-callout a { flex-shrink: 0; }
.commercial-section .system-map { display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; align-items: stretch; gap: 15px; margin: 30px 0 0; padding: 30px; }
.commercial-section .system-map > div { justify-content: center; min-height: 230px; }
.commercial-section .system-map .system-arrow { display: flex; align-items: center; transform: rotate(-90deg); }
.commercial-section .system-caption { grid-column: 1 / -1; }
.commercial-section .cost-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 22px; }
.commercial-section .cost-list section { display: block; padding: 24px 0; border-top: 2px solid var(--accent); }
.commercial-section .cost-list h3 { font-size: 1.13rem; margin: 20px 0 12px; }
.commercial-section .cost-list p { font-size: .9rem; line-height: 1.85; color: var(--text-soft); }
.commercial-section .service-index-item { display: grid; grid-template-columns: .8fr 1fr auto; align-items: center; gap: 28px; padding: 32px 0; }
.commercial-section .service-index-item h3 { margin: 0; font-size: 1.3rem; }
.commercial-section .service-index-item p { margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.85; }
.commercial-section .service-index-item .arrow-link { font-size: .8rem; }
.landing-page .resource-faq { padding-block: 65px; margin-top: 0; }
.landing-page .faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 65px; align-items: start; }
.landing-page .faq-section .section-heading { margin: 0; text-align: left; }
.landing-page .resource-final-cta { padding-top: 55px; }
@media (max-width: 1024px) {
 .commercial-section .work-stages, .commercial-section .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .commercial-section .cost-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .commercial-section .service-index-item { grid-template-columns: 1fr 1.5fr; }
 .commercial-section .service-index-item .arrow-link { grid-column: 2; }
 .commercial-callout .page-callout { flex-direction: column; align-items: start; gap: 24px; }
 .commercial-section .system-map { padding: 22px; gap: 8px; }
 .commercial-section .system-map > div { padding: 18px 12px; }
}
@media (max-width: 760px) {
 .commercial-section.is-split .commercial-section-inner { grid-template-columns: 1fr; gap: 25px; }
 .commercial-section-heading h2 { margin-top: 12px; }
 .commercial-section .work-stages, .commercial-section .work-stages:has(li:last-child:nth-child(3)), .commercial-section .detail-grid, .commercial-section .cost-list { grid-template-columns: 1fr; }
 .commercial-section .work-stages li { padding: 25px 24px 25px 62px; }
 .commercial-section .work-stages li::before { left: 20px; font-size: 1rem; }
 .commercial-section .cost-list { gap: 0; }
 .commercial-section .cost-list section { display: flex; gap: 24px; }
 .commercial-section .cost-list h3 { margin-top: 0; }
 .commercial-section .system-map { grid-template-columns: 1fr; gap: 0; }
 .commercial-section .system-map > div { min-height: 0; padding: 24px 20px; }
 .commercial-section .system-map .system-arrow { transform: none; display: block; }
 .commercial-section .service-index-item { grid-template-columns: 1fr; gap: 18px; }
 .commercial-section .service-index-item .arrow-link { grid-column: auto; }
 .commercial-callout { padding-block: 30px; }
 .commercial-callout .page-callout { padding: 26px; }
 .commercial-callout .page-callout p { font-size: 1.1rem; }
 .commercial-callout .page-callout a { width: 100%; }
 .landing-page .faq-section { grid-template-columns: 1fr; gap: 25px; }
}

/* Toetsenbordbediening wacht niet op menu-, tab- of accordionanimaties. */
.is-keyboard { scroll-behavior: auto; }
.is-keyboard .button,
.is-keyboard .theme-toggle,
.is-keyboard .faq-item,
.is-keyboard .menu-bars span,
.is-keyboard .header-panel,
.is-keyboard .main-nav .sub-menu,
.is-keyboard .submenu-toggle .icon,
.is-keyboard .solution-tab,
.is-keyboard .solution-tab::after,
.is-keyboard .toc > summary::after,
.is-keyboard .faq-item > summary::after,
.is-keyboard .skip-link { transition: none !important; }

/* Voorbeeldbewijs blijft ook op touch herkenbaar als nog onbevestigd. */
.proof-pending {
 display: inline-block;
 align-self: start;
 width: fit-content;
 max-width: 100%;
 margin: 0;
 padding: 4px 8px;
 border: 1px solid var(--line-strong);
 border-radius: var(--radius-sm);
 background: var(--surface-alt);
 color: var(--text);
 font: 500 .72rem/1.5 var(--f-body);
}
.rating-badge.has-placeholder { flex-wrap: wrap; border-radius: var(--radius); }
.rating-badge > .proof-pending { flex-basis: 100%; }

/* ==========================================================================
   20. NOVA pakket 2 — dienstpagina (page-dienst.php) en categoriehub (page-hub.php)
   Dezelfde kop, secties, FAQ en CTA als de handgemaakte dienstpagina's; hier
   alleen de intro met knoppen, de werkwijze en de dienstkaarten van een hub.
   ========================================================================== */

.dienst-inhoud { scroll-margin-top: 115px; }
.dienst-intro { padding-block: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.dienst-intro-inner { display: grid; gap: 28px; }
.dienst-intro-tekst { max-width: 76ch; }
.dienst-intro-tekst > p { margin: 0 0 18px; font-size: 1rem; line-height: 1.9; color: var(--text-soft); }
.dienst-intro-tekst > p:first-child { max-width: 46ch; font: 600 clamp(1.25rem, 1rem + 0.9vw, 1.65rem)/1.45 var(--f-display); letter-spacing: -0.02em; color: var(--text); }
.dienst-intro-tekst > p:last-child { margin-bottom: 0; }
.dienst-intro-tekst a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.dienst-intro-tekst > ul { list-style: none; padding: 0; margin: 20px 0; }
.dienst-intro-tekst > ul > li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.8; }
.dienst-intro-tekst > ul > li::before { content: '↗'; color: var(--accent); position: absolute; left: 0; }
.dienst-acties { margin-top: 0; }
.dienst-werkwijze .work-stages:has(li:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dienst-werkwijze .work-stages p + p { margin-top: 10px; }
.dienst-werkwijze .work-stages :is(ul, ol) { margin: 10px 0 0; padding-left: 18px; font-size: .87rem; line-height: 1.8; color: var(--text-soft); }
.dienst-werkwijze .work-stages a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.hub-diensten { padding-block: clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line); background: var(--surface-sink); scroll-margin-top: 115px; }
.hub-diensten-kop { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.hub-diensten-kop h2 { font: 650 clamp(1.6rem, 2.5vw, 2.35rem)/1.22 var(--f-display); letter-spacing: -.045em; text-wrap: balance; margin: 12px 0 0; }
.hub-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.hub-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: clamp(24px, 2.6vw, 34px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background:
		radial-gradient(circle at 100% 0%, var(--accent-wash), transparent 45%),
		var(--surface);
	overflow: hidden;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hub-kaart::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 3px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.16s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.hub-kaart:hover { border-color: transparent; box-shadow: var(--shadow); }
	.hub-kaart:hover::before { transform: scaleX(1); }
	.hub-kaart:hover .hub-kaart-meer .icon { transform: translateX(4px); }
}
.hub-kaart:has(.hub-kaart-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.hub-kaart-beeld { margin: calc(clamp(24px, 2.6vw, 34px) * -1) calc(clamp(24px, 2.6vw, 34px) * -1) 8px; }
.hub-kaart-beeld img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hub-kaart .service-index { margin-bottom: 4px; }
.hub-kaart-titel { margin: 0; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.3; }
.hub-kaart-link { color: var(--text); text-decoration: none; }
.hub-kaart-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hub-kaart-link:focus-visible { outline: none; }
.hub-kaart-tekst { margin: 0; flex: 1; color: var(--text-soft); font-size: .94rem; line-height: 1.75; }
.hub-kaart-meer { margin-top: 6px; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) {
	.hub-kaart, .hub-kaart::before, .hub-kaart-meer .icon { transition: none; }
}
@media (max-width: 760px) {
	.dienst-werkwijze .work-stages:has(li:last-child:nth-child(2)) { grid-template-columns: 1fr; }
	.dienst-acties .button { width: 100%; justify-content: center; }
}

/* ==========================================================================
   21. Cijferblok — de schaal van Titan (homepage en campagnepagina)
   ========================================================================== */

.section-schaal {
	padding-block: clamp(52px, 7vw, 96px);
	background: linear-gradient(160deg, var(--brand-deep) 0%, #4A17B8 100%);
	color: #FFFFFF;
}
.schaal-kop {
	max-width: 640px;
	margin: 0 auto clamp(32px, 4.5vw, 56px);
	text-align: center;
}
.schaal-kop h2 { margin: 0; color: #FFFFFF; }
.schaal-kop p { margin: 14px 0 0; color: #E6DCFF; }
.schaal-cijfers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
}
.schaal-cijfer {
	min-width: 0;
	padding: 6px clamp(12px, 2vw, 28px);
	text-align: center;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.schaal-cijfer:first-child { border-left: 0; }
.schaal-cijfer dt {
	font-family: var(--f-display);
	font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: #FFFFFF;
}
.schaal-cijfer dd { margin: 10px 0 0; font-size: var(--t-small); font-weight: 500; color: #E6DCFF; }

@media (max-width: 759px) {
	.schaal-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.schaal-cijfer:nth-child(odd) { border-left: 0; }
	.schaal-cijfer dt { font-size: clamp(1.75rem, 8.5vw, 2.4rem); }
}