/* ==========================================================================
   Jaco Oskam – Business Controller · v2
   Corporate redesign: full-bleed hero, pill-knoppen met pijlicoon,
   oneindige logoslider, genummerd expertise-accordion, gradient CTA-kaart.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design system
   -------------------------------------------------------------------------- */
:root {
	--zwart: #111827;
	--donkergrijs: #1e2d3d;
	--grijs-60: #4b5563;
	--lichtgrijs: #f1f4f8;
	--vlak: #f8f9fb;
	--wit: #ffffff;
	--accent-blauw: #FFBE00;
	--accent-blauw-licht: #FFD54F;
	--accent-gradient: #FFBE00;
	--navy: #0f2044;
	--navy-licht: #1a3260;

	--font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-head: 'DM Sans', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

	--container: 1600px;
	--radius: 0px;
	--radius-groot: 0px;
	--navbar-h: 88px;
	--sectie: clamp(5.5rem, 10vw, 10rem);
	--schaduw: none;
	--overgang: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-h) + 12px); }

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--zwart);
	background: var(--wit);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a { color: var(--accent-blauw); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 0.5em;
	color: var(--zwart);
	letter-spacing: -0.015em;
}

:focus-visible {
	outline: 3px solid var(--accent-blauw);
	outline-offset: 3px;
	border-radius: 4px;
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}
.container--smal { max-width: 820px; }

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px; width: 1px; overflow: hidden;
}

.sectie-titel { font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
.sectie-sub { color: var(--grijs-60); max-width: 30rem; font-size: 1.05rem; }

.hero-eyebrow {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-blauw);
	margin: 0 0 1rem;
}

/* --------------------------------------------------------------------------
   3. Knoppen: witte pill + blauw cirkel-pijlicoon (huisstijl)
   -------------------------------------------------------------------------- */
@keyframes shootArrow {
	0%   { transform: translateX(0);     opacity: 1; }
	45%  { transform: translateX(160%);  opacity: 0; }
	50%  { transform: translateX(-160%); opacity: 0; }
	100% { transform: translateX(0);     opacity: 1; }
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	background: var(--wit);
	color: var(--zwart) !important;
	text-decoration: none !important;
	border-radius: 0;
	padding: 0.32rem 1.5rem 0.32rem 0.32rem; /* compact: zelfde hoogte als header-knop */
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: none;
	transition: transform var(--overgang), box-shadow var(--overgang), background var(--overgang), color var(--overgang);
}
.btn:hover {
	transform: none;
	box-shadow: none;
}

.btn-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 0;
	background: var(--accent-blauw);
	color: var(--zwart);
	overflow: hidden;
	flex: none;
}
.btn-pijl { display: inline-block; font-size: 1.05rem; line-height: 1; }
.btn:hover .btn-pijl { animation: shootArrow 0.6s ease forwards; }

/* Varianten */
.btn--donker { background: var(--zwart); color: var(--wit) !important; }
.btn--donker .btn-label { color: var(--wit) !important; }
.btn--donker .btn-icoon { background: rgba(255,255,255,0.15); color: var(--wit) !important; }
.btn--wit { background: var(--wit); color: var(--zwart) !important; box-shadow: none; }
.btn--kaart { background: var(--wit); color: var(--zwart) !important; box-shadow: none; }
.btn--kaart .btn-icoon { background: var(--zwart); }

.btn--nav { box-shadow: none; }
#navbar.scrolled .btn--nav { background: var(--zwart); color: var(--wit) !important; }

.tekst-link {
	font-family: var(--font-head);
	font-weight: 500;
	color: inherit;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.tekst-link:hover { color: var(--accent-blauw); text-decoration: none; }

/* --------------------------------------------------------------------------
   4. Navbar
   -------------------------------------------------------------------------- */
.navbar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--navbar-h);
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.97);
	transition: background var(--overgang), box-shadow var(--overgang), height var(--overgang);
}

.navbar-inner {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.nav-rechts { display: flex; align-items: center; gap: 2.25rem; }

.nav-wordmark {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.45rem;
	letter-spacing: 0.28em;
	color: var(--wit);
	text-decoration: none !important;
	transition: color var(--overgang);
}
.nav-wordmark--klein { font-size: 1.1rem; }
.nav-wordmark--footer { font-size: 1.6rem; display: block; margin-bottom: 1rem; }
.nav-logo img { max-height: 44px; width: auto; transition: filter var(--overgang); }
/* Logo altijd normaal — geen wit-filter */
.navbar .nav-logo img { filter: none !important; }

.nav-menu, .mobile-menu, .footer-menu { list-style: none; margin: 0; padding: 0; }
.nav-menu { display: flex; gap: 2.25rem; }
.nav-menu > li { position: relative; }

/* Chevron bij items met submenu */
.nav-menu li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--overgang);
	vertical-align: 2px;
}
.nav-menu li.menu-item-has-children:hover > a::after,
.nav-menu li.menu-item-has-children:focus-within > a::after {
	transform: rotate(225deg) translateY(-1px);
}

/* Uitklappaneel */
.nav-menu .sub-menu {
	list-style: none;
	margin: 0;
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	min-width: 280px;
	background: var(--wit);
	border-radius: 0;
	box-shadow: none;
	padding: 0.6rem;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	z-index: 60;
}
/* Onzichtbare brug zodat de hover niet wegvalt tussen link en paneel */
.nav-menu .sub-menu::before {
	content: "";
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.nav-menu .sub-menu li a {
	display: block;
	padding: 0.75rem 0.95rem;
	border-radius: 0;
	color: var(--zwart) !important;
	font-weight: 600;
	font-size: 0.94rem;
	transition: background var(--overgang), color var(--overgang);
}
.nav-menu .sub-menu li a:hover {
	background: var(--vlak);
	color: var(--accent-blauw) !important;
	opacity: 1;
}

/* !important: standaard WP-linkkleuren overschrijven */
.nav-menu li a {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--navy) !important;
	text-decoration: none !important;
	transition: color var(--overgang), opacity var(--overgang);
}
.nav-menu li a:hover { color: var(--accent-blauw) !important; opacity: 1; }
.nav-menu li.current-menu-item > a,
.nav-menu li.current_page_item > a { color: var(--accent-blauw) !important; }

#navbar.scrolled {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	box-shadow: none;
	height: 72px;
}
#navbar.scrolled .nav-wordmark { color: var(--zwart); }
#navbar.scrolled .nav-menu li a { color: var(--zwart) !important; }
#navbar.scrolled .nav-menu li a:hover { color: var(--accent-blauw) !important; opacity: 1; }
#navbar.scrolled .nav-menu li.current-menu-item > a,
#navbar.scrolled .nav-menu li.current_page_item > a { color: var(--accent-blauw) !important; }

/* In het witte uitklappaneel zijn links altijd donker — óók de actieve pagina.
   Bewust hogere specificiteit dan de algemene navbar-kleuren hierboven. */
.nav-menu .sub-menu li a,
#navbar .nav-menu .sub-menu li a,
#navbar.scrolled .nav-menu .sub-menu li a {
	color: var(--zwart) !important;
	opacity: 1;
}
/* Actieve subpagina: permanent de hover-stijl, dus goed zichtbaar */
.nav-menu .sub-menu li a:hover,
.nav-menu .sub-menu li.current-menu-item > a,
.nav-menu .sub-menu li.current_page_item > a,
#navbar .nav-menu .sub-menu li.current-menu-item > a,
#navbar .nav-menu .sub-menu li.current_page_item > a,
#navbar.scrolled .nav-menu .sub-menu li.current-menu-item > a,
#navbar.scrolled .nav-menu .sub-menu li.current_page_item > a {
	background: var(--vlak);
	color: var(--accent-blauw) !important;
}

/* Rechthoekig transparant "Menu"-blokje (tablet + mobiel). */
.nav-menuknop {
	display: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 0;
	padding: 0.55rem 1.2rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wit);
	cursor: pointer;
	transition: color var(--overgang), border-color var(--overgang), background var(--overgang);
}
.nav-menuknop:hover { background: rgba(255, 255, 255, 0.1); }
#navbar.scrolled .nav-menuknop {
	color: var(--zwart);
	border-color: rgba(17, 17, 17, 0.35);
}
#navbar.scrolled .nav-menuknop:hover { background: rgba(17, 17, 17, 0.06); }

/* --------------------------------------------------------------------------
   5. Off-canvas mobiel menu
   -------------------------------------------------------------------------- */
.mobile-sidebar {
	position: fixed;
	top: 0; left: -100%;
	width: min(360px, 88vw);
	height: 100dvh;
	background: var(--zwart);
	z-index: 200;
	display: flex;
	flex-direction: column;
	transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-sidebar.open { left: 0; }

.mobile-overlay {
	position: fixed; inset: 0;
	background: rgba(17, 17, 17, 0.55);
	z-index: 150;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.mobile-overlay.visible { opacity: 1; }

.mobile-sidebar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.6rem 1.9rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-sidebar-logo img {
	max-height: 34px;
	width: auto;
	filter: brightness(0) invert(1); /* zwart logo wit tonen op het donkere paneel */
}
.nav-close { background: none; border: 0; color: var(--wit); font-size: 2rem; line-height: 1; cursor: pointer; }

.mobile-menu { padding: 1.25rem 0; }
/* Opties faden gefaseerd in zodra het menu vanaf links opent */
.mobile-menu li {
	opacity: 0;
	transform: translateX(-16px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-sidebar.open .mobile-menu li { opacity: 1; transform: none; }
.mobile-sidebar.open .mobile-menu li:nth-child(1) { transition-delay: 0.12s; }
.mobile-sidebar.open .mobile-menu li:nth-child(2) { transition-delay: 0.18s; }
.mobile-sidebar.open .mobile-menu li:nth-child(3) { transition-delay: 0.24s; }
.mobile-sidebar.open .mobile-menu li:nth-child(4) { transition-delay: 0.30s; }
.mobile-sidebar.open .mobile-menu li:nth-child(5) { transition-delay: 0.36s; }
.mobile-sidebar.open .mobile-menu li:nth-child(6) { transition-delay: 0.42s; }
.mobile-sidebar.open .mobile-menu li:nth-child(7) { transition-delay: 0.48s; }
.mobile-sidebar.open .mobile-menu li:nth-child(8) { transition-delay: 0.54s; }
.mobile-sidebar.open .mobile-sidebar-cta {
	opacity: 1; transform: none; transition-delay: 0.6s;
}
.mobile-sidebar-cta {
	opacity: 0;
	transform: translateX(-16px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-menu li a {
	display: block;
	padding: 0.95rem 1.9rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.25rem;
	text-align: left;
	color: var(--wit) !important;
	text-decoration: none !important;
	transition: color var(--overgang), background var(--overgang);
}
.mobile-menu li a:hover,
.mobile-menu li.current-menu-item > a { color: var(--accent-blauw-licht) !important; background: rgba(255, 255, 255, 0.04); }
.mobile-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0.4rem; }
.mobile-menu .sub-menu li a {
	padding: 0.55rem 1.9rem 0.55rem 3rem;
	font-size: 1rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8) !important;
}

.mobile-sidebar-cta { margin: auto 1.9rem 2rem; }
.mobile-sidebar-cta .btn { width: 100%; justify-content: flex-start; }

/* --------------------------------------------------------------------------
   6. Hero: full-bleed foto
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--zwart);
	background-color: var(--lichtgrijs);
	overflow: hidden;
}

.hero-overlay { display: none; }

.hero-inner {
	position: relative;
	z-index: 3;
	width: 100%;
	padding-top: calc(var(--navbar-h) + 2rem);
	padding-bottom: 5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: end;
}

.hero-foto-kolom {
	position: relative;
}
.hero-foto-kolom img,
.hero-foto-kolom-placeholder {
	display: block;
	width: 100%;
	height: clamp(400px, 60vh, 650px);
	object-fit: cover;
	object-position: center top;
}
.hero-foto-kolom-placeholder {
	background: var(--donkergrijs);
	height: clamp(400px, 60vh, 650px);
}

.hero-titel {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(3rem, 6vw, 6rem);
	line-height: 1.0;
	letter-spacing: -0.03em;
	color: var(--navy);
	margin: 0 0 1.2rem;
	text-transform: uppercase;
}

.hero-titel::before {
	content: '';
	display: block;
	width: 44px;
	height: 4px;
	background: var(--accent-blauw);
	margin-bottom: 1rem;
}

.hero-sub {
	font-size: clamp(0.95rem, 1.4vw, 1.05rem);
	font-weight: 400;
	line-height: 1.75;
	color: var(--grijs-60);
	max-width: 28rem;
	margin: 0 0 2rem;
}

.hero-onder {
	position: absolute; /* onderbalk gepind: trekt de content niet meer omhoog */
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	padding-bottom: 2.5rem;
}

.hero-scroll {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none !important;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}
.hero-muis {
	width: 26px; height: 42px;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 0;
	display: inline-flex;
	justify-content: center;
	padding-top: 7px;
}
.hero-muis-wiel {
	width: 3px; height: 8px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.9);
	animation: muisWiel 1.8s ease-in-out infinite;
}
@keyframes muisWiel {
	0%, 100% { transform: translateY(0); opacity: 1; }
	60%       { transform: translateY(9px); opacity: 0; }
}

.hero-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-tag {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.76rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;
	padding: 0.6rem 1.3rem;
	backdrop-filter: blur(4px);
	transition: background var(--overgang), border-color var(--overgang);
}
.hero-tag:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); }

/* --------------------------------------------------------------------------
   7. Oneindige logoslider (logo's uit CPT Ervaring)
   -------------------------------------------------------------------------- */
.logos {
	background: var(--wit);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
	position: relative;
}
/* Zachte fade aan beide randen */
.logos::before, .logos::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: clamp(60px, 10vw, 180px);
	z-index: 2;
	pointer-events: none;
}
.logos::before { left: 0; background: linear-gradient(90deg, var(--wit), transparent); }
.logos::after { right: 0; background: linear-gradient(270deg, var(--wit), transparent); }

.logos-track {
	display: inline-flex;
	align-items: center;
	gap: clamp(3.5rem, 7vw, 7rem);
	animation: logosLoop 24s linear infinite;
	animation-delay: -12s; /* start halverwege de loop: slider oogt direct gevuld */
	will-change: transform;
}
.logos:hover .logos-track { animation-play-state: paused; }

@keyframes logosLoop {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.logos-item { flex: none; }
.logos-item img {
	max-height: 52px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter var(--overgang), opacity var(--overgang);
}
.logos-item img:hover { filter: grayscale(0); opacity: 1; }

.logos-leeg { color: var(--grijs-60); font-size: 0.95rem; margin: 0; }

/* --------------------------------------------------------------------------
   8. Over + statistieken
   -------------------------------------------------------------------------- */
.over { background: var(--wit); padding-block: clamp(3rem, 6vw, 5rem) var(--sectie); }

.over-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: stretch; /* foto strekt mee met de teksthoogte */
}
.over-grid--zonder-media { grid-template-columns: 1fr; }
.over-grid--zonder-media .over-groot { max-width: 62rem; }
.over-media { height: 100%; min-height: 260px; }
.over-media img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* exact even hoog als de tekst ernaast */
	border-radius: var(--radius-groot);
	box-shadow: var(--schaduw);
}
.over-groot { align-self: center; }

.over-groot {
	font-size: clamp(1.6rem, 3.2vw, 2.6rem);
	font-weight: 300;
	line-height: 1.42;
	letter-spacing: -0.015em;
	color: var(--donkergrijs);
	margin: 0;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
	margin-top: clamp(4rem, 8vw, 7rem);
}
.stat { text-align: center; }
.stat-getal {
	display: block;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(3rem, 6vw, 4.6rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--navy);
	margin-bottom: 0.7rem;
}
.stat-label { color: var(--grijs-60); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   9. Mijn Expertise: accordion + gradient CTA-kaart
   -------------------------------------------------------------------------- */
.expertise { background: var(--vlak); padding-block: var(--sectie); }

.expertise-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(3rem, 7vw, 7rem);
	align-items: start;
}

.expertise-sticky { position: sticky; top: calc(var(--navbar-h) + 1.5rem); }

/* Blauwe gradient-kaart met uitstekend portret */
.cta-kaart {
	position: relative;
	max-width: 580px; /* kaart blijft compact binnen de bredere sectie */
	margin-top: clamp(3rem, 5vw, 4.5rem);
	background: var(--accent-blauw);
	border-radius: var(--radius-groot);
	padding: clamp(1.5rem, 2.2vw, 2rem); /* minder hoge padding */
	color: var(--wit);
	box-shadow: none;
}
.cta-kaart-tekst { max-width: 60%; position: relative; z-index: 2; }
.cta-kaart-kop { color: var(--wit); font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: 0.55em; }
.cta-kaart-sub { color: rgba(255, 255, 255, 0.9); font-size: 0.96rem; line-height: 1.65; margin: 0 0 1.6rem; }

.cta-kaart-portret {
	position: absolute;
	right: clamp(0.5rem, 2vw, 1.75rem);
	bottom: 0;
	height: 112%;           /* steekt subtiel boven de kaart uit */
	width: auto;
	max-width: 42%;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 18px 30px rgba(13, 42, 110, 0.35));
	pointer-events: none;
}

/* Genummerd accordion (referentie-ontwerp) */
.accordion { border-top: 1px solid rgba(17, 17, 17, 0.12); }
.accordion-item { border-bottom: 1px solid rgba(17, 17, 17, 0.12); }

.accordion-header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	background: none;
	border: 0;
	padding: clamp(1.75rem, 3vw, 2.4rem) 0.25rem;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-head);
}
.accordion-index {
	font-weight: 500;
	font-size: 0.95rem;
	color: rgba(17, 17, 17, 0.35);
	min-width: 2.2rem;
	transition: color var(--overgang);
}
.accordion-titel {
	flex: 1;
	font-weight: 700;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	letter-spacing: -0.015em;
	color: var(--zwart);
	transition: color var(--overgang);
}
.accordion-item.open .accordion-titel,
.accordion-item.open .accordion-index { color: var(--accent-blauw); }
.accordion-header:hover .accordion-titel { color: var(--accent-blauw); }

/* Plus-icoon dat naar een kruisje draait */
.accordion-icoon { position: relative; width: 18px; height: 18px; flex: none; }
.accordion-icoon::before, .accordion-icoon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: rgba(17, 17, 17, 0.45);
	transition: transform var(--overgang), background var(--overgang);
}
.accordion-icoon::before { width: 100%; height: 2px; }
.accordion-icoon::after { width: 2px; height: 100%; }
.accordion-item.open .accordion-icoon::before,
.accordion-item.open .accordion-icoon::after { background: var(--accent-blauw); }
.accordion-item.open .accordion-icoon { transform: rotate(45deg); }
.accordion-icoon { transition: transform var(--overgang); }

.accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-body p {
	margin: 0;
	padding: 0 3rem 2.2rem calc(2.2rem + clamp(1.25rem, 3vw, 2.5rem));
	color: var(--grijs-60);
	max-width: 42rem;
	line-height: 1.8;
}

/* --------------------------------------------------------------------------
   10. Ervaring-slider
   -------------------------------------------------------------------------- */
.ervaring { background: var(--wit); padding-block: var(--sectie); }

.ervaring-grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: clamp(3rem, 7vw, 7rem);
	align-items: start;
}
.ervaring-sticky { position: sticky; top: calc(var(--navbar-h) + 1.5rem); }

.slider-nav { display: flex; gap: 0.85rem; margin-top: 2rem; }
.slider-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px; height: 54px;
	border-radius: 50%;
	border: 1px solid rgba(17, 17, 17, 0.2);
	background: var(--wit);
	color: var(--zwart);
	padding: 0;
	cursor: pointer;
	transition: background var(--overgang), color var(--overgang), border-color var(--overgang);
}
.slider-btn svg { width: 22px; height: 22px; display: block; }
.slider-btn:hover { background: var(--zwart); color: var(--wit); border-color: var(--zwart); }
.slider-btn:disabled { opacity: 0.3; cursor: default; }
.slider-btn:disabled:hover { background: var(--wit); color: var(--zwart); border-color: rgba(17,17,17,0.2); }

.exp-slider { overflow: hidden; }
.exp-track {
	display: flex;
	gap: 1.75rem;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.exp-card {
	flex: 0 0 min(440px, 88%);
	background: var(--vlak);
	border: 1px solid rgba(17, 17, 17, 0.06);
	border-radius: var(--radius-groot);
	padding: 2.4rem;
}

.exp-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.6rem;
}
.exp-logo img {
	max-height: 40px; width: auto;
	filter: grayscale(1); opacity: 0.85;
	transition: filter var(--overgang), opacity var(--overgang);
}
.exp-card:hover .exp-logo img { filter: grayscale(0); opacity: 1; }

.exp-date {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--accent-blauw);
	background: rgba(59, 130, 246, 0.1);
	border-radius: 0;
	padding: 0.35rem 0.95rem;
	white-space: nowrap;
}

.exp-titel { font-size: 1.35rem; margin-bottom: 0.25rem; }
.exp-rol { font-weight: 600; color: var(--grijs-60); margin: 0 0 1.1rem; font-size: 0.95rem; }

.exp-content { color: var(--grijs-60); font-size: 0.95rem; }
.exp-content ul { margin: 0; padding-left: 1.2rem; }
.exp-content li { margin-bottom: 0.45rem; }
.exp-content li::marker { color: var(--accent-blauw); }

.exp-leeg { color: var(--grijs-60); }

/* Resultaten (vinkjes) met dun lijntje erboven */
.exp-vinkjes {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid rgba(17, 17, 17, 0.1);
	display: grid;
	gap: 0.7rem;
}
.exp-vinkjes li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.94rem;
	color: var(--donkergrijs);
	line-height: 1.55;
}
.exp-vinkjes .vinkje {
	width: 17px; height: 17px;
	flex: none;
	margin-top: 0.22em;
	color: var(--accent-blauw);
}

/* --------------------------------------------------------------------------
   11. Aanpak
   -------------------------------------------------------------------------- */
.aanpak { background: var(--vlak); padding-block: var(--sectie); }

.aanpak-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	margin-top: 3.5rem;
}
.aanpak-item { border-top: 1px solid rgba(17, 17, 17, 0.15); padding-top: 1.75rem; }
.aanpak-index {
	display: block;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--accent-blauw);
	margin-bottom: 1.4rem;
}
.aanpak-item h3 { font-size: 1.4rem; }
.aanpak-item p { color: var(--grijs-60); margin: 0; }

/* --------------------------------------------------------------------------
   12. Subpagina's: hero's, Cases, blog, inhoud
   -------------------------------------------------------------------------- */
.page-hero { background: var(--vlak); padding: calc(var(--navbar-h) + 5.5rem) 0 5rem; }
.page-hero--klein { padding-bottom: 3.5rem; }
.page-title { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 0.35em; }
.page-title--wit { color: var(--wit); }

.cases-archief, .blog-archief { padding-block: var(--sectie); }

.cases-grid, .blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 2.5rem;
}

.case-card, .blog-card {
	background: var(--wit);
	border: 1px solid rgba(17, 17, 17, 0.07);
	border-radius: var(--radius-groot);
	overflow: hidden;
	transition: transform var(--overgang), box-shadow var(--overgang), border-color var(--overgang);
}
.case-card:hover, .blog-card:hover {
	transform: translateY(-6px);
	box-shadow: none;
	border-color: rgba(59, 130, 246, 0.35);
}
.case-card-link, .blog-card-link { display: block; color: inherit; text-decoration: none !important; }

.case-card-media, .blog-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--vlak); }
.case-card-media img, .blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.case-card:hover .case-card-media img { transform: scale(1.04); }
.case-card-placeholder { width: 100%; height: 100%; background: var(--accent-blauw); opacity: 0.18; }

.case-card-body, .blog-card-body { padding: 1.9rem 2rem 2.1rem; }
.case-card-title, .blog-card-title { font-size: 1.35rem; margin-bottom: 0.5rem; transition: color var(--overgang); }
.case-card:hover .case-card-title, .blog-card:hover .blog-card-title { color: var(--accent-blauw); }
.case-card-excerpt, .blog-card-excerpt { color: var(--grijs-60); font-size: 0.95rem; }
.case-card-excerpt p, .blog-card-excerpt p { margin: 0 0 1rem; }

.case-card-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--accent-blauw);
}
.case-card:hover .case-card-more .cta-arrow { animation: shootArrow 0.6s ease forwards; }
.cta-arrow { display: inline-block; }

.blog-card-date {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.78rem;
	color: var(--accent-blauw);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.blog-card-title { margin-top: 0.55rem; }

/* Case single */
.case-hero { position: relative; background: var(--navy); }
.case-hero-media { position: absolute; inset: 0; overflow: hidden; }
.case-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.case-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,16,0.85), rgba(10,12,16,0.35)); }
.case-hero-inner { position: relative; z-index: 2; padding: calc(var(--navbar-h) + 8rem) 0 7rem; }
.case-hero .hero-eyebrow { color: #93c5fd; }

.case-single, .blog-single, .pagina { padding-block: var(--sectie); }
.blog-single, .pagina { padding-top: 4rem; }

.case-single-footer, .blog-single-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 4rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--lichtgrijs);
}

.blog-single-media { border-radius: var(--radius-groot); overflow: hidden; margin-bottom: 3rem; box-shadow: var(--schaduw); }

.entry-content { font-size: 1.12rem; line-height: 1.85; }
.entry-content p { margin-block: 1.25em; }
.entry-content h2 { font-size: 1.8rem; margin-top: 2em; }
.entry-content h3 { font-size: 1.4rem; margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; }
.entry-content li::marker { color: var(--accent-blauw); }
.entry-content blockquote {
	margin: 2em 0;
	padding: 0.5em 0 0.5em 1.6em;
	border-left: 3px solid var(--accent-blauw);
	color: var(--grijs-60);
	font-weight: 300;
	font-size: 1.2em;
}
.entry-content img { border-radius: var(--radius-groot); }

.paginering { margin-top: 4rem; }
.paginering .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.paginering .page-numbers {
	font-family: var(--font-head);
	font-weight: 500;
	padding: 0.6rem 1.05rem;
	border-radius: 0;
	background: var(--vlak);
	color: var(--zwart);
	text-decoration: none !important;
}
.paginering .page-numbers.current,
.paginering .page-numbers:hover { background: var(--accent-blauw); color: var(--wit); }

/* --------------------------------------------------------------------------
   12b. In gesprek met Jaco: tekst links, staande reel-video rechts
   -------------------------------------------------------------------------- */
.video-sectie { background: var(--wit); padding-block: var(--sectie); }
.video-sectie .container { max-width: 1400px; } /* sectie iets naar binnen */
.video-sectie--leeg { padding-block: 3rem; background: var(--vlak); }

.video-reel-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: clamp(3rem, 7vw, 8rem);
	align-items: center;
}
.video-reel-tekst .sectie-sub--breed { max-width: 38rem; margin-bottom: 2.2rem; }

.video-reel { margin: 0; justify-self: end; width: 100%; max-width: 420px; }
.video-frame {
	position: relative;
	border-radius: var(--radius-groot);
	overflow: hidden;
	background: var(--zwart);
	box-shadow: none;
}
.video-frame--staand { aspect-ratio: 9 / 16; } /* YouTube short / reel-formaat */
.video-frame iframe, .video-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.video-label {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.92rem;
	color: var(--grijs-60);
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   12c. CTA-paneel (eind-CTA op de homepage + CTA-sectie uit de bouwer)
   -------------------------------------------------------------------------- */
.cta-eind, .sectie-cta { padding-block: var(--sectie); background: var(--wit); }

.cta-paneel {
	position: relative;
	border-radius: var(--radius-groot);
	overflow: hidden;
	background: var(--navy);
	background-size: cover;
	background-position: center;
	color: var(--wit);
	padding: clamp(3.5rem, 8vw, 7rem) clamp(1.75rem, 6vw, 6rem);
}
.cta-paneel-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 32, 68, 0.9) 0%, rgba(15, 32, 68, 0.55) 55%, rgba(15, 32, 68, 0.22) 100%);
}
.cta-paneel:not(.cta-paneel--foto) .cta-paneel-overlay {
	background: radial-gradient(900px 500px at 85% 15%, rgba(59, 130, 246, 0.28), transparent 60%);
}
.cta-paneel-binnen {
	position: relative;
	z-index: 2;
	display: grid;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}
.cta-paneel-binnen--met-foto { grid-template-columns: 1.15fr 0.85fr; }
.cta-paneel-media img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: none;
}
.cta-paneel-inhoud { position: relative; z-index: 2; max-width: 640px; }
.cta-paneel-kop {
	color: var(--wit);
	font-size: clamp(2.2rem, 4.5vw, 3.6rem);
	letter-spacing: -0.02em;
	margin-bottom: 0.5em;
}
.cta-paneel-tekst {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.08rem;
	line-height: 1.8;
	margin: 0 0 2.2rem;
	max-width: 34rem;
}
.cta-paneel-knoppen { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Omlijnde knop (secundair, in CTA-panelen) */
.btn-omlijnd {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 0;
	padding: 0.72rem 1.6rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--zwart) !important;
	text-decoration: none !important;
	transition: background var(--overgang), border-color var(--overgang);
}
.btn-omlijnd:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--zwart); }

/* Variant voor lichte achtergronden (bijv. het Gerelateerd-blok) */
.btn-omlijnd--donker {
	border-color: rgba(17, 17, 17, 0.3);
	color: var(--zwart) !important;
}
.btn-omlijnd--donker:hover { background: rgba(17, 17, 17, 0.06); border-color: var(--zwart); }

/* --------------------------------------------------------------------------
   13. Footer: vier kolommen (Diensten · Ontdek · Info · Merk/contact)
   -------------------------------------------------------------------------- */
.site-footer { background: var(--zwart); color: rgba(255, 255, 255, 0.72); padding: var(--sectie) 0 2.25rem; }

.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1.4fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-col h4 {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}
.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: 0.9rem; }
.footer-menu li a {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--wit) !important;
	text-decoration: none !important;
	transition: color var(--overgang);
}
.footer-menu li a:hover { color: var(--accent-blauw-licht) !important; }

/* Merk-kolom */
.footer-logo-img img {
	max-height: 46px;
	width: auto;
	margin-bottom: 1.4rem;
	filter: brightness(0) invert(1); /* één (zwart) logo: in de footer wit gefilterd */
}
.footer-tagline { max-width: 22rem; margin: 0 0 1.75rem; line-height: 1.7; }

.footer-contact { list-style: none; margin: 0 0 1.9rem; padding: 0; display: grid; gap: 0.9rem; }
.footer-contact li { display: flex; align-items: center; gap: 0.85rem; }
.footer-contact a { color: var(--wit) !important; text-decoration: none !important; font-weight: 500; }
.footer-contact a:hover { color: var(--accent-blauw-licht) !important; }
.footer-contact-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--wit);
	flex: none;
}
.footer-contact-icoon svg { width: 17px; height: 17px; }

.footer-onderaan-brand { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--accent-blauw);
	color: var(--wit) !important;
	transition: background var(--overgang), transform var(--overgang);
}
.footer-linkedin svg { width: 20px; height: 20px; }
.footer-linkedin:hover { background: var(--accent-blauw-licht); }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.9rem;
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.45);
}
.footer-bottom-links { display: flex; gap: 1.75rem; }
.footer-bottom-links a { color: rgba(255, 255, 255, 0.6) !important; text-decoration: none !important; }
.footer-bottom-links a:hover { color: var(--wit) !important; }

/* --------------------------------------------------------------------------
   14. WordPress-verplichte klassen
   -------------------------------------------------------------------------- */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--grijs-60); }
.sticky {}
.gallery-caption {}
.bypostauthor {}

/* --------------------------------------------------------------------------
   15. Responsiveness
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.expertise-grid, .ervaring-grid { grid-template-columns: 1fr; }
	.expertise-sticky, .ervaring-sticky { position: static; }
	.over-grid { grid-template-columns: 1fr; }
	.over-media { max-width: 480px; }
	.cta-kaart { max-width: 640px; }
}

@media (max-width: 900px) {

	.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 1.5rem; }
	.stat { text-align: left; } /* links uitgelijnd op mobiel */
	.aanpak-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
	.video-grid--2, .video-grid--3 { grid-template-columns: 1fr; }
	.exp-card { flex-basis: 92%; padding: 1.9rem; }
	.accordion-body p { padding-left: 0.25rem; padding-right: 0.5rem; }
}

/* Menuknop en off-canvas menu: alleen op tablet en mobiel (<= 1024px).
   Op desktop hard verborgen (!important) zodat er nooit een los blokje
   naast de CTA kan verschijnen. */
@media (min-width: 1025px) {
	.nav-menuknop { display: none !important; }
}
@media (max-width: 1024px) {
	.nav-desktop, .navbar .btn--nav { display: none; }
	.nav-menuknop { display: inline-block; line-height: 1; }
}

@media (max-width: 620px) {
	.hero-onder { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
	.hero-tags { order: -1; }

	.cta-kaart-tekst { max-width: 100%; }
	.cta-kaart-portret { display: none; } /* portret verbergen op smalle schermen */
	.footer-grid { grid-template-columns: 1fr; }
	.case-single-footer { flex-direction: column; align-items: flex-start; }
	.stats-grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   16. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.logos-track { animation: none; }
}

/* --------------------------------------------------------------------------
   16. Subhero: foto-header op elke subpagina (navbar start transparant)
   -------------------------------------------------------------------------- */
.subhero {
	position: relative;
	background-color: var(--navy);
	background-size: cover;
	background-position: center;
	color: var(--wit);
	display: flex;
	align-items: flex-end;
	min-height: min(42svh, 420px); /* compactere paginaheaders */
}
.subhero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(15, 32, 68, 0.55) 0%, rgba(15, 32, 68, 0.18) 40%, rgba(15, 32, 68, 0.75) 100%);
}
.subhero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: calc(var(--navbar-h) + 2.5rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}
.hero-eyebrow--wit { color: rgba(255, 255, 255, 0.85); }
.subhero .page-title { margin-bottom: 0; max-width: 20em; }

/* Breadcrumbs */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.85rem;
	margin-bottom: 1.1rem;
}
.breadcrumbs a {
	color: rgba(255, 255, 255, 0.68) !important;
	text-decoration: none !important;
	transition: color var(--overgang);
}
.breadcrumbs a:hover { color: var(--wit) !important; }
.breadcrumbs span[aria-current] { color: rgba(255, 255, 255, 0.95); }
.breadcrumbs-sep { color: rgba(255, 255, 255, 0.35); }
.subhero-sub {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.05rem;
	line-height: 1.75;
	max-width: 36rem;
	margin: 1rem 0 0;
}

/* --------------------------------------------------------------------------
   17. Sectie-bouwer: front-end van de rijen
   -------------------------------------------------------------------------- */
.sectie-blok { padding-block: var(--sectie); }
/* Gestapelde secties houden ruimte boven de koptekst, iets compacter dan een volle sectie */
.sectie-blok + .sectie-blok { padding-top: clamp(4rem, 8vw, 7rem); }
.sectie-titel--blok { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }

/* Tekst met media */
.stm { background: var(--wit); }
.stm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}
.stm--media-links .stm-tekst { order: 2; }
.stm--media-links .stm-media { order: 1; }
.stm-media img {
	width: 100%;
	height: 100%;
	max-height: 560px;
	object-fit: cover;
	border-radius: var(--radius-groot);
	box-shadow: var(--schaduw);
}
.stm-body { color: var(--grijs-60); line-height: 1.8; margin-bottom: 1.9rem; }
.stm-body p { margin-block: 1em; }
.stm-body p:first-child { margin-top: 0; }

/* USP-sectie */
.sectie-usp { background: var(--vlak); }
.sectie-usp .aanpak-grid { margin-top: 3rem; }
.usp-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* USP-icoon (leeg = nummer) */
.usp-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius);
	background: var(--wit);
	box-shadow: var(--schaduw);
	margin-bottom: 1.4rem;
}
.usp-icoon img { max-width: 30px; max-height: 30px; object-fit: contain; }

/* Tekstsectie: label + kop links, subtekst + knop rechts (iets lager) */
.sectie-tekst { background: var(--wit); }
.tekst-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.tekst-duo-links .sectie-titel--blok { margin-bottom: 0; max-width: 14em; }
.tekst-duo-rechts { padding-top: clamp(1.5rem, 4vw, 3.5rem); } /* subtekst iets naar onder */
.tekst-duo-body { color: var(--grijs-60); line-height: 1.85; font-size: 1.08rem; margin-bottom: 1.9rem; }
.tekst-duo-body p { margin-block: 1em; }
.tekst-duo-body p:first-child { margin-top: 0; }

/* Quote / testimonial */
.sectie-quote { background: var(--vlak); }
.quote-inner { max-width: 980px; }
.quote-teken {
	display: block;
	font-family: var(--font-head);
	font-size: 5rem;
	line-height: 0.5;
	color: var(--accent-blauw);
	margin-bottom: 1.6rem;
}
.quote-citaat {
	margin: 0 0 2.2rem;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(1.9rem, 3.8vw, 3rem);
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--zwart);
}
.quote-bron { display: flex; align-items: center; gap: 1.1rem; }
.quote-portret img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.quote-persoon { display: flex; flex-direction: column; line-height: 1.4; }
.quote-persoon strong { font-family: var(--font-head); font-size: 1.02rem; }
.quote-persoon span { color: var(--grijs-60); font-size: 0.92rem; }

/* Testimonial-carousel (meerdere quotes in dezelfde sectie) */
.testimonial-slider { overflow: hidden; }
.testimonial-track {
	display: flex;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.testimonial-slide { flex: 0 0 100%; min-width: 0; }
.testimonial-slider--single .testimonial-slide { padding: 0; }

.testimonial-nav {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-top: 2.4rem;
}
.testimonial-nav .slider-btn { width: 46px; height: 46px; }
.testimonial-nav .slider-btn svg { width: 18px; height: 18px; }
.testimonial-dots { display: flex; gap: 0.55rem; }
.testimonial-dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(17, 17, 17, 0.18);
	cursor: pointer;
	transition: background var(--overgang), transform var(--overgang);
}
.testimonial-dot:hover { background: rgba(17, 17, 17, 0.35); }
.testimonial-dot.actief { background: var(--accent-blauw); transform: scale(1.15); }

/* FAQ */
.sectie-faq { background: var(--wit); }
.faq-grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.accordion--faq .accordion-titel--faq { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.accordion--faq .accordion-header { padding-block: clamp(1.4rem, 2.4vw, 1.9rem); }

/* Accordion: link naar dienstpagina */
.accordion-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 3rem 2.2rem calc(2.2rem + clamp(1.25rem, 3vw, 2.5rem));
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--accent-blauw) !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent;
	transition: gap var(--overgang);
}
.accordion-link:hover { gap: 0.8rem; }
.accordion-body p { padding-bottom: 1.4rem; }

/* Case-navigatie onder de secties */
.case-single-nav { padding-bottom: var(--sectie); }
.case-single-nav .case-single-footer { margin-top: 0; }

@media (max-width: 1024px) {
	.video-reel-grid { grid-template-columns: 1fr; }
	.video-reel { justify-self: start; }
	.usp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
	.cta-paneel-binnen--met-foto { grid-template-columns: 1fr; }
	.cta-paneel-media { order: -1; }
	.cta-paneel-media img { max-height: 280px; }
	.faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.stm-grid { grid-template-columns: 1fr; }
	.tekst-duo { grid-template-columns: 1fr; }
	.tekst-duo-rechts { padding-top: 0; }
	.stm--media-links .stm-tekst { order: 1; }
	.stm--media-links .stm-media { order: 2; }
	.usp-grid--4 { grid-template-columns: 1fr; }
	.subhero { min-height: 36svh; }
}

/* --------------------------------------------------------------------------
   18. Sectie-bouwer: Resultaten / cijfers
   -------------------------------------------------------------------------- */
.sectie-resultaten { background: var(--wit); }
.resultaten-paneel {
	background: var(--navy);
	border-radius: var(--radius-groot);
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 5vw, 4rem);
	position: relative;
	overflow: hidden;
}
.resultaten-paneel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: none;
	pointer-events: none;
}
.resultaten-kop { position: relative; z-index: 2; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); max-width: 40rem; }
.resultaten-titel { color: var(--wit); font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 0.5em; }
.resultaten-sub { color: rgba(255, 255, 255, 0.72); font-size: 1.02rem; margin: 0; }

.resultaten-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}
.resultaten-grid--1 { grid-template-columns: 1fr; max-width: 20rem; }
.resultaten-grid--2 { grid-template-columns: repeat(2, 1fr); }
.resultaten-grid--3 { grid-template-columns: repeat(3, 1fr); }

.resultaten-item {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	padding-left: 1.5rem;
}
.resultaten-item:first-child { border-left: 0; padding-left: 0; }
.resultaten-getal {
	display: block;
	font-family: var(--font-cijfers, var(--font-head));
	font-weight: 700;
	font-size: clamp(2.2rem, 4.5vw, 3.2rem);
	line-height: 1;
	color: var(--wit);
	margin-bottom: 0.6rem;
	font-variant-numeric: tabular-nums;
}
.resultaten-label { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; }

@media (max-width: 760px) {
	.resultaten-grid, .resultaten-grid--1, .resultaten-grid--2, .resultaten-grid--3 { grid-template-columns: repeat(2, 1fr); max-width: none; }
	.resultaten-item:nth-child(odd) { border-left: 0; padding-left: 0; }
	.resultaten-item:nth-child(n+3) { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

/* --------------------------------------------------------------------------
   19. Sectie-bouwer: Logo's (uit Ervaring) — tekst links, oneindige
   marquee-slider rechts.
   -------------------------------------------------------------------------- */
.sectie-logos { padding-block: var(--sectie); overflow: hidden; }
.sectie-logos--donker { background: var(--zwart); }
.sectie-logos--licht { background: var(--vlak); }

.logos-blok-inner {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.logos-blok-titel {
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	line-height: 1.15;
	margin: 0 0 0.5rem;
}
.sectie-logos--donker .logos-blok-titel { color: var(--wit); }

.logos-blok-subtekst {
	font-size: 0.98rem;
	margin: 0;
}
.sectie-logos--donker .logos-blok-subtekst { color: rgba(255, 255, 255, 0.6); }
.sectie-logos--licht .logos-blok-subtekst { color: var(--grijs-60); }

/* Oneindige marquee (zelfde mechanisme als de homepage-logoslider) */
.logos-blok-marquee { position: relative; overflow: hidden; }
.logos-blok-marquee::before, .logos-blok-marquee::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: clamp(40px, 8vw, 100px);
	z-index: 2;
	pointer-events: none;
}
.sectie-logos--donker .logos-blok-marquee::before { left: 0; background: linear-gradient(90deg, var(--zwart), transparent); }
.sectie-logos--donker .logos-blok-marquee::after { right: 0; background: linear-gradient(270deg, var(--zwart), transparent); }
.sectie-logos--licht .logos-blok-marquee::before { left: 0; background: linear-gradient(90deg, var(--vlak), transparent); }
.sectie-logos--licht .logos-blok-marquee::after { right: 0; background: linear-gradient(270deg, var(--vlak), transparent); }

.logos-blok-track {
	display: inline-flex;
	align-items: center;
	gap: clamp(2.5rem, 5vw, 4rem);
	animation: logosLoop 24s linear infinite;
	animation-delay: -12s; /* start halverwege: oogt direct gevuld */
	will-change: transform;
}
.logos-blok-marquee:hover .logos-blok-track { animation-play-state: paused; }

.logos-blok-item { flex: none; }
.logos-blok-item img {
	max-height: 38px;
	width: auto;
	filter: grayscale(1) brightness(1.6);
	opacity: 0.7;
	transition: filter var(--overgang), opacity var(--overgang);
}
.sectie-logos--licht .logos-blok-item img { filter: grayscale(1); opacity: 0.55; }
.logos-blok-item img:hover { filter: grayscale(0) brightness(1); opacity: 1; }

@media (max-width: 900px) {
	.logos-blok-inner { grid-template-columns: 1fr; text-align: left; }
}

/* --------------------------------------------------------------------------
   20. Sectie-bouwer & automatisch: Gerelateerd / "Lees ook"
   -------------------------------------------------------------------------- */
.sectie-gerelateerd { background: var(--vlak); }
.gerelateerd-kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}
.gerelateerd-kop .sectie-titel--blok { margin: 0; }
.gerelateerd-alles-link { white-space: nowrap; }
.gerelateerd-grid { margin-top: 0; }

/* Op single.php / single-cases.php staat "Lees ook" na een witte sectie:
   iets minder padding boven, zodat het niet als een aparte pagina aanvoelt. */
.blog-single + .sectie-gerelateerd,
.case-single + .sectie-gerelateerd,
.case-single-nav + .sectie-gerelateerd { padding-top: clamp(3rem, 6vw, 5rem); }

/* --------------------------------------------------------------------------
   21. Subtiele scroll-animaties (progressive enhancement via JS)
   -------------------------------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-zichtbaar { opacity: 1; transform: none; }

/* Cascade-vertraging voor herhaalde kaarten binnen een grid */
.reveal-item { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-item.is-zichtbaar { opacity: 1; transform: none; }
.reveal-item:nth-child(1) { transition-delay: 0s; }
.reveal-item:nth-child(2) { transition-delay: 0.08s; }
.reveal-item:nth-child(3) { transition-delay: 0.16s; }
.reveal-item:nth-child(4) { transition-delay: 0.24s; }
.reveal-item:nth-child(5) { transition-delay: 0.32s; }
.reveal-item:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal-item { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   22. Contactpagina (page-contact.php)
   -------------------------------------------------------------------------- */
.contact-sectie { padding-block: var(--sectie); background: var(--wit); }

.contact-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(3rem, 7vw, 7rem);
	align-items: start;
}

.contact-info-titel { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 0.6em; }
.contact-info-sub { color: var(--grijs-60); line-height: 1.8; margin: 0 0 2.5rem; max-width: 30rem; }

.contact-lijst { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1.4rem; }
.contact-lijst-item {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
}
.contact-lijst-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--vlak);
	color: var(--accent-blauw);
	flex: none;
	margin-top: 2px;
}
.contact-lijst-icoon svg { width: 19px; height: 19px; }
.contact-lijst-label {
	display: block;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grijs-60);
	margin-bottom: 0.2rem;
}
.contact-lijst-item a {
	color: var(--zwart);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--overgang);
}
.contact-lijst-item a:hover { color: var(--accent-blauw); }

.contact-belofte {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: var(--vlak);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
}
.contact-belofte-icoon { width: 22px; height: 22px; flex: none; color: var(--accent-blauw); }
.contact-belofte p { margin: 0; font-size: 0.95rem; color: var(--donkergrijs); font-weight: 500; }

/* Formulier-paneel */
.contact-formulier {
	background: var(--vlak);
	border-radius: var(--radius-groot);
	padding: clamp(1.75rem, 4vw, 2.75rem);
}

/* --------------------------------------------------------------------------
   23. Contact Form 7 — thema-styling
   -------------------------------------------------------------------------- */

/* Labels */
.contact-formulier .wpcf7 label,
.contact-formulier .wpcf7-form-control-wrap label {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	color: var(--donkergrijs);
	margin-bottom: 0.4rem;
}

/* Tekst-invoervelden, textarea en select */
.contact-formulier .wpcf7 input[type="text"],
.contact-formulier .wpcf7 input[type="email"],
.contact-formulier .wpcf7 input[type="tel"],
.contact-formulier .wpcf7 input[type="url"],
.contact-formulier .wpcf7 input[type="number"],
.contact-formulier .wpcf7 textarea,
.contact-formulier .wpcf7 select {
	display: block;
	width: 100%;
	padding: 0.85rem 1.1rem;
	border: 1.5px solid rgba(17, 17, 17, 0.14);
	border-radius: 0;
	background: var(--wit);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--zwart);
	line-height: 1.6;
	transition: border-color var(--overgang), box-shadow var(--overgang);
	-webkit-appearance: none;
	appearance: none;
	margin-bottom: 0; /* consistente spacing via wrapper-margin hieronder */
}

/* CF7: compact formulier-layout.
   De <form> wordt een flex-kolom; .cf7-rij divs plaatsen velden naast elkaar.
   Geen display:none — CF7-<p>-wrappers krijgen margin/padding 0 zodat
   ze geen extra ruimte toevoegen maar de velden erin WEL zichtbaar blijven. */

.contact-formulier .wpcf7 form {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

/* CF7 stopt elk veld in een <p> met een <span.wpcf7-form-control-wrap>.
   Beide mogen geen eigen spacing toevoegen — de gap op <form> regelt alles. */
.contact-formulier .wpcf7 form > p {
	margin: 0;
	padding: 0;
}
.contact-formulier .wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin: 0;
	padding: 0;
}
/* <br> die CF7 soms tussen velden injecteert verbergen */
.contact-formulier .wpcf7 form br { display: none; }

/* .cf7-rij: grid met velden naast elkaar.
   Werkt ook als CF7/wpautop de div in een <p> heeft gestopt:
   de selectors targeten de rij direct, ongeacht de parent. */
.cf7-rij,
.contact-formulier .cf7-rij,
.contact-formulier .wpcf7 .cf7-rij,
p > .cf7-rij,
.contact-formulier p > .cf7-rij {
	display: grid !important;
	gap: 11px !important;
	align-items: start;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

/* Parent <p> die de rij bevat mag zelf geen ruimte innemen */
.contact-formulier .wpcf7 p:has(.cf7-rij) {
	margin: 0 !important;
	padding: 0 !important;
}

.contact-formulier .wpcf7 .cf7-rij .wpcf7-form-control-wrap,
.cf7-rij .wpcf7-form-control-wrap { margin: 0 !important; }

.cf7-rij--4060 { grid-template-columns: 2fr 3fr !important; }
.cf7-rij--6040 { grid-template-columns: 3fr 2fr !important; }
.cf7-rij--5050 { grid-template-columns: 1fr 1fr !important; }

/* Submit-knop */
.contact-formulier .wpcf7 input[type="submit"] { margin-top: 4px; }

@media (max-width: 600px) {
	.cf7-rij--4060,
	.cf7-rij--6040,
	.cf7-rij--5050 { grid-template-columns: 1fr !important; }
}

/* Dropdown: custom pijltje (SVG, past bij de site-stijl) */
.contact-formulier .wpcf7 select {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23111111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 18px 18px;
	cursor: pointer;
}
.contact-formulier .wpcf7 input:focus,
.contact-formulier .wpcf7 textarea:focus,
.contact-formulier .wpcf7 select:focus {
	border-color: var(--accent-blauw);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
	outline: none;
}
.contact-formulier .wpcf7 textarea { min-height: 148px; resize: vertical; }

/* Placeholder */
.contact-formulier .wpcf7 ::placeholder { color: rgba(17, 17, 17, 0.35); }

/* Submit-knop: pill-stijl, identiek aan de rest van de site */
.contact-formulier .wpcf7 input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	background: var(--zwart);
	color: var(--wit);
	border: 0;
	border-radius: 0;
	padding: 0.75rem 1.9rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--overgang), transform var(--overgang), box-shadow var(--overgang);
	box-shadow: none;
	width: 100%;
	justify-content: center;
	margin-top: 0.5rem;
}
.contact-formulier .wpcf7 input[type="submit"]:hover {
	background: var(--donkergrijs);
	transform: none;
	box-shadow: none;
}
.contact-formulier .wpcf7 input[type="submit"]:active { transform: none; }

/* Loading-state tijdens verzenden */
.contact-formulier .wpcf7 .wpcf7-spinner {
	display: inline-block;
	margin-left: 0.75rem;
	vertical-align: middle;
}

/* Validatiefouten (rood randje + bericht) */
.contact-formulier .wpcf7 .wpcf7-not-valid {
	border-color: #e53e3e !important;
	box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1) !important;
}
.contact-formulier .wpcf7 .wpcf7-not-valid-tip {
	display: block;
	font-size: 0.82rem;
	color: #e53e3e;
	margin-top: -0.9rem;
	margin-bottom: 1rem;
}

/* Succes- en foutmeldingen */
.contact-formulier .wpcf7 .wpcf7-response-output {
	border-radius: 0;
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 500;
	margin-top: 1rem;
	border: 0 !important;
}
.contact-formulier .wpcf7 .wpcf7-mail-sent-ok {
	background: rgba(21, 122, 85, 0.1);
	color: #157a55;
}
.contact-formulier .wpcf7 .wpcf7-mail-sent-ng,
.contact-formulier .wpcf7 .wpcf7-aborted,
.contact-formulier .wpcf7 .wpcf7-validation-errors {
	background: rgba(229, 62, 62, 0.08);
	color: #c53030;
}
.contact-formulier .wpcf7 .wpcf7-spam-blocked {
	background: rgba(255, 152, 0, 0.1);
	color: #c07a1e;
}

/* Twee-koloms rij binnen het CF7-formulier (bijv. naam + achternaam) */
.contact-formulier .cf7-rij {
	display: grid;
	gap: 0.85rem;
}
.contact-formulier .cf7-rij--twee {
	grid-template-columns: 2fr 3fr; /* 40 / 60 */
}
.contact-formulier .cf7-rij .wpcf7-form-control-wrap { margin-bottom: 0; }
/* De rij zelf krijgt de standaard veld-spacing eronder */
/* .cf7-rij wordt nu volledig binnen .wpcf7 form geregeld (zie hierboven) */

/* Mobiel */
@media (max-width: 860px) {
	.contact-grid { grid-template-columns: 1fr; }
	.contact-formulier .cf7-rij--twee { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   24. Swipe page transition
   Één donkere balk veegt van links naar rechts over het scherm.
   -------------------------------------------------------------------------- */
#swipe-balk {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background: var(--navy);

	/* Start: volledig links buiten beeld */
	transform: translateX(-100%);
	/* Geen transitie in rust-staat */
}

#swipe-balk.swipe--aktief {
	pointer-events: all;
}

/* Startpositie: links buiten beeld, geen animatie */
#swipe-balk.swipe--links {
	transform: translateX(-100%);
	transition: none;
}

/* Midden: balk dekt het volledige scherm — veegt van links naar midden */
#swipe-balk.swipe--midden {
	transform: translateX(0%);
	transition: transform 0.52s cubic-bezier(0.77, 0, 0.18, 1);
}

/* Weg: balk veegt verder naar rechts buiten beeld */
#swipe-balk.swipe--weg {
	transform: translateX(100%);
	transition: transform 0.52s cubic-bezier(0.77, 0, 0.18, 1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	#swipe-balk { display: none !important; }
}

/* ---- Strakke stijl overrides ---- */
.btn,
.btn--nav,
.btn-omlijnd,
.btn-omlijnd--donker,
.contact-formulier .wpcf7 input[type="submit"],
.nav-menuknop {
	border-radius: 0 !important;
}

/* Gele knoppen: zwarte tekst voor leesbaarheid */
.btn,
.btn--primary,
input[type="submit"] {
	color: var(--zwart) !important;
}

/* Kaarten: geen ronde hoeken */
.case-card,
.blog-card,
.contact-formulier,
.contact-formulier .contact-formulier,
.resultaten-paneel,
.cta-paneel,
.sectie-logos,
.quote-inner,
.exp-card,
.aanpak-item,
.accordion-item {
	border-radius: 0 !important;
}

/* Velden in contactformulier: licht vierkant */
.contact-formulier .wpcf7 input[type="text"],
.contact-formulier .wpcf7 input[type="email"],
.contact-formulier .wpcf7 input[type="tel"],
.contact-formulier .wpcf7 textarea,
.contact-formulier .wpcf7 select {
	border-radius: 0 !important;
}

/* Geen gradient op accent-elementen */
.hero-eyebrow,
.sectie-resultaten .resultaten-getal {
	color: var(--accent-blauw);
}

/* --------------------------------------------------------------------------
   Hero Van Wezel-stijl: navbar op lichte hero moet donker zijn
   -------------------------------------------------------------------------- */

/* Navbar op de nieuwe lichte hero: direct donker tonen (niet transparant) */
.hero ~ * { /* zorgt dat de hero zelf de navbar aanstuurt */ }
body:has(.hero) #navbar {
	background: var(--navy);
}


/* Hero-tags op lichte achtergrond: navy rand + navy tekst */
.hero-tag {
	color: var(--navy) !important;
	border-color: rgba(15, 32, 68, 0.3) !important;
}
.hero-tag:hover {
	background: rgba(15, 32, 68, 0.07) !important;
	border-color: var(--navy) !important;
}

/* Mobiel: foto onder de tekst */
@media (max-width: 900px) {
	.hero-inner {
		grid-template-columns: 1fr;
		align-items: start;
		padding-bottom: 0;
	}
	.hero-foto-kolom,
	.hero-foto-kolom img,
	.hero-foto-kolom-placeholder {
		height: clamp(260px, 45vw, 420px);
		width: 100%;
	}
	.hero-titel { font-size: clamp(2.4rem, 9vw, 4rem); }
}

/* ==========================================================================
   REDESIGN v3.2 — Ruime, abstracte stijl
   ========================================================================== */

/* --------------------------------------------------------------------------
   Globale ruimte & typografie
   -------------------------------------------------------------------------- */
:root {
	--sectie: clamp(6rem, 10vw, 10rem); /* meer lucht tussen secties */
}

/* Gedeeld patroon: grote kop links, subtekst rechts iets lager */
.sectie-kop-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 4rem;
	align-items: end;
	margin-bottom: clamp(3.5rem, 6vw, 6rem);
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(15, 32, 68, 0.1);
}
.sectie-titel-xl {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(3rem, 6vw, 5.5rem);
	line-height: 1.0;
	letter-spacing: -0.03em;
	color: var(--navy);
	text-transform: uppercase;
	margin: 0;
}
.sectie-sub-rechts {
	color: var(--grijs-60);
	font-size: clamp(0.95rem, 1.3vw, 1.05rem);
	line-height: 1.8;
	margin: 0;
	padding-top: 1rem; /* iets lager dan de titel */
	max-width: 32rem;
}

@media (max-width: 760px) {
	.sectie-kop-split { grid-template-columns: 1fr; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   Diensten-lijst (vervangt de accordion)
   -------------------------------------------------------------------------- */
.diensten-lijst { display: flex; flex-direction: column; }

.dienst-rij {
	display: grid;
	grid-template-columns: 3.5rem 1fr 2fr 2rem;
	gap: 1.5rem;
	align-items: center;
	padding: 2rem 0;
	border-bottom: 1px solid rgba(15, 32, 68, 0.1);
	text-decoration: none !important;
	color: var(--zwart) !important;
	transition: background var(--overgang);
}
.dienst-rij:first-child { border-top: 1px solid rgba(15, 32, 68, 0.1); }
.dienst-rij:hover { background: rgba(255, 190, 0, 0.05); }
.dienst-rij:hover .dienst-pijl { transform: translateX(4px); }

.dienst-nr {
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--accent-blauw);
	letter-spacing: 0.05em;
}
.dienst-titel {
	font-family: var(--font-head);
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	font-weight: 700;
	color: var(--navy);
}
.dienst-omschrijving {
	font-size: 0.92rem;
	color: var(--grijs-60);
	line-height: 1.6;
}
.dienst-pijl {
	font-size: 1.2rem;
	color: var(--navy);
	transition: transform var(--overgang);
	justify-self: end;
}

@media (max-width: 760px) {
	.dienst-rij {
		grid-template-columns: 2.5rem 1fr;
		grid-template-rows: auto auto;
	}
	.dienst-omschrijving { grid-column: 2; }
	.dienst-pijl { display: none; }
}

/* --------------------------------------------------------------------------
   Ervaring-lijst (vervangt de slider)
   -------------------------------------------------------------------------- */
.ervaring-lijst { display: flex; flex-direction: column; }

.ervaring-rij {
	display: grid;
	grid-template-columns: 2.5rem 120px 1fr auto;
	gap: 2rem;
	align-items: center;
	padding: 1.75rem 0;
	border-bottom: 1px solid rgba(15, 32, 68, 0.08);
}
.ervaring-rij:first-child { border-top: 1px solid rgba(15, 32, 68, 0.08); }

.ervaring-nr {
	font-family: var(--font-head);
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(15, 32, 68, 0.3);
	letter-spacing: 0.05em;
}
.ervaring-logo-wrap img {
	max-height: 32px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.6;
}
.ervaring-naam-tekst {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--navy);
}
.ervaring-info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.ervaring-organisatie {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--navy);
}
.ervaring-rol {
	font-size: 0.88rem;
	color: var(--grijs-60);
}
.ervaring-periode {
	font-family: var(--font-head);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--grijs-60);
	white-space: nowrap;
}

@media (max-width: 760px) {
	.ervaring-rij { grid-template-columns: 2rem 1fr; }
	.ervaring-logo-wrap { display: none; }
	.ervaring-periode { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Video-sectie: liggend formaat, ruimer
   -------------------------------------------------------------------------- */
.video-reel-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(3rem, 6vw, 7rem);
	align-items: center;
}
.video-kop-split { margin-bottom: 2rem; display: block; }
.video-frame--liggend {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9; /* liggend: geen mega-hoge video meer */
	overflow: hidden;
}
.video-frame--liggend iframe,
.video-frame--liggend video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

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

/* --------------------------------------------------------------------------
   CTA-paneel: abstracte foto half buiten het kader
   -------------------------------------------------------------------------- */
.cta-paneel {
	background: var(--navy);
	display: grid;
	grid-template-columns: 1fr 0.75fr;
	align-items: center;
	overflow: visible; /* foto mag erbuiten steken */
	position: relative;
	min-height: 420px;
}
.cta-paneel .cta-paneel-inhoud {
	padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
	position: relative;
	z-index: 2;
}
.cta-paneel-foto-abstract {
	position: relative;
	align-self: stretch;
	overflow: visible;
}
.cta-paneel-foto-abstract img {
	display: block;
	width: 100%;
	height: calc(100% + 4rem); /* steekt 4rem buiten het paneel */
	object-fit: cover;
	object-position: center;
	margin-top: -2rem; /* naar boven steken */
	position: relative;
	z-index: 3;
}

@media (max-width: 860px) {
	.cta-paneel { grid-template-columns: 1fr; }
	.cta-paneel-foto-abstract { display: none; }
}

/* --------------------------------------------------------------------------
   Aanpak-sectie: ruimer, nummer groter
   -------------------------------------------------------------------------- */
.aanpak-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}
.aanpak-item {
	padding: 3rem 2.5rem 3rem 0;
	border-right: 1px solid rgba(15, 32, 68, 0.1);
	padding-right: 3rem;
}
.aanpak-item:last-child { border-right: 0; padding-right: 0; }
.aanpak-item:not(:first-child) { padding-left: 3rem; }
.aanpak-index {
	display: block;
	font-family: var(--font-head);
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--accent-blauw);
	line-height: 1;
	margin-bottom: 1rem;
}
.aanpak-item h3 {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 0.75rem;
}
.aanpak-item p {
	font-size: 0.95rem;
	color: var(--grijs-60);
	line-height: 1.75;
}

@media (max-width: 760px) {
	.aanpak-grid { grid-template-columns: 1fr; }
	.aanpak-item { border-right: 0; border-bottom: 1px solid rgba(15, 32, 68, 0.1); padding: 2.5rem 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Sectie-achtergronden: afwisselend licht/wit voor ritme
   -------------------------------------------------------------------------- */
.ervaring { background: var(--vlak); }
.expertise { background: var(--wit); }
.aanpak { background: var(--lichtgrijs); }

/* ==========================================================================
   REDESIGN — Definitieve versie (v3.5.0)
   Alle eerdere iteraties vervangen door één schone bron.
   ========================================================================== */

/* ---- Navbar: altijd wit, altijd donkere tekst ---- */
.navbar,
#navbar,
#navbar.scrolled,
body:has(.hero) #navbar,
body:has(.hero) #navbar.scrolled {
	background: rgba(255,255,255,0.97) !important;
	backdrop-filter: blur(10px) !important;
}
.nav-logo img,
body:has(.hero) #navbar .nav-logo img,
#navbar.scrolled .nav-logo img {
	filter: none !important;
}
.nav-menu li a {
	color: var(--navy) !important;
}
.nav-menu li a:hover {
	color: var(--accent-blauw) !important;
	opacity: 1 !important;
}
.navbar:not(.scrolled) .nav-logo img { filter: none !important; }

/* ---- Navbar lijn ---- */
.navbar { border-bottom: 0 !important; }
.navbar-lijn {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	height: 1px;
	background: rgba(15, 32, 68, 0.1);
}

/* ---- Hero ---- */
.hero {
	background: var(--wit) !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: auto !important;
	overflow: visible !important;
}
.hero-overlay { display: none !important; }
.hero-boven {
	padding-top: calc(var(--navbar-h) + 3.5rem);
	padding-bottom: 3rem;
}
.hero-boven-rij {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 3rem !important;
	align-items: center !important;
}
.hero-boven-links,
.hero-boven-rechts {
	display: flex;
	flex-direction: column;
}
.hero-boven-rechts {
	justify-content: center;
}
.hero-boven-rechts .hero-sub {
	margin-bottom: 1.75rem !important;
}
/* Alleen de eyebrow in de homepage-hero verbergen, niet die in secties */
.hero .hero-eyebrow { display: none !important; }
.hero-titel {
	font-family: var(--font-head) !important;
	font-weight: 700 !important;
	font-size: clamp(2.4rem, 4.2vw, 3.8rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.03em !important;
	color: var(--navy) !important;
	text-transform: uppercase !important;
	margin: 0 !important;
}
.hero-titel::before { display: none !important; }
.hero-sub {
	font-size: 1.05rem !important;
	color: var(--grijs-60) !important;
	line-height: 1.8 !important;
	margin: 0 0 1.75rem !important;
	max-width: none !important;
}
.hero-acties {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 1.2rem !important;
}
.hero-link-sub {
	font-family: var(--font-head);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
}
.hero-link-sub:hover { color: var(--accent-blauw); }

/* Hero foto: 90% breed, gelijke marges rondom */
.hero-foto-wrap {
	width: 90%;
	margin: 0 auto;
}
.hero-foto-groot {
	display: block;
	width: 100%;
	height: clamp(320px, 50vw, 640px);
	object-fit: cover;
	object-position: center 20%;
}
.hero-foto-placeholder {
	background: var(--lichtgrijs);
	height: clamp(320px, 50vw, 640px);
}

/* ---- Logo-slider ---- */
.logos {
	background: var(--wit) !important;
	border-top: 1px solid rgba(15,32,68,0.06) !important;
	border-bottom: 1px solid rgba(15,32,68,0.06) !important;
	padding: 2.5rem 0 !important;
}
.logos-item img {
	filter: grayscale(1) !important;
	opacity: 0.4 !important;
	max-height: 28px !important;
}

/* ---- Intro-tekst (stats + grote tekst) ---- */
.intro-tekst {
	background: var(--wit);
	padding: clamp(5rem, 9vw, 9rem) 0;
	border-top: 0;
}
.intro-tekst-inner {
	display: grid !important;
	grid-template-columns: 1.3fr 1fr !important;
	gap: clamp(3rem, 7vw, 8rem) !important;
	align-items: center !important;
}
.intro-groot {
	font-family: var(--font-head);
	font-size: clamp(1.35rem, 2.2vw, 1.9rem);
	font-weight: 400;
	line-height: 1.55;
	color: var(--navy);
	margin: 0;
	letter-spacing: -0.01em;
}

/* Statistieken: 2x2 grid, GEEN borders */
.intro-stats {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 !important;
	border: 0 !important;
}
.intro-stat {
	display: block !important;
	padding: 2rem !important;
	border: 0 !important;
}
.intro-stat:nth-child(odd) {
	padding-left: 0 !important;
}
.intro-stat-getal {
	display: block !important;
	font-family: var(--font-head) !important;
	font-size: clamp(2.8rem, 5vw, 4.5rem) !important;
	font-weight: 800 !important;
	color: var(--navy) !important;
	line-height: 1 !important;
	margin-bottom: 0.5rem !important;
	letter-spacing: -0.03em !important;
}
.intro-stat-label {
	display: block !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	color: var(--grijs-60) !important;
}

/* ---- Diensten ---- */
.expertise {
	background: var(--wit) !important;
	padding-top: clamp(5rem, 9vw, 9rem) !important;
	padding-bottom: 0 !important;
}
/* Koptekst: zelfde inspringing als .container, ruimte eronder */
.expertise > .container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.expertise .sectie-kop-split {
	max-width: var(--container, 1280px);
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.25rem, 4vw, 3rem) !important;
	padding-right: clamp(1.25rem, 4vw, 3rem) !important;
	margin-bottom: clamp(3rem, 5vw, 5rem) !important;
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Diensten-blokken: rand-aan-rand, top+bottom border, verticale scheiding */
.diensten-blokken {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	border: 0 !important;
	border-top: 1px solid rgba(15,32,68,0.1) !important;
	border-bottom: 1px solid rgba(15,32,68,0.1) !important;
	width: 100%;
}
.dienst-blok {
	display: flex !important;
	flex-direction: column !important;
	min-height: 460px !important;
	padding: 3.5rem 2.5rem !important;
	justify-content: flex-end !important;
	position: relative !important;
	overflow: hidden !important;
	background-color: var(--vlak) !important;
	text-decoration: none !important;
	color: var(--zwart) !important;
	border: 0 !important;
	transition: background-color 0.5s ease !important;
}
/* border-right via JS-lijnen, niet via CSS */
.dienst-blok::before { display: none !important; } /* geen pseudo-lijnen */

.dienst-blok-foto-overlay {
	position: absolute;
	inset: 0;
	background-image: var(--dienst-foto, none);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.5s ease, transform 0.6s ease;
	z-index: 0;
}
.dienst-blok-foto-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,32,68,0.88) 0%, rgba(15,32,68,0.4) 60%, transparent 100%);
}
.dienst-blok-inhoud {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.dienst-blok-nr {
	display: block;
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 700;
	color: var(--accent-blauw);
	letter-spacing: 0.08em;
	margin-bottom: auto; /* duwt rest naar beneden */
}
.dienst-blok-titel {
	font-family: var(--font-head);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.25;
	margin-bottom: 0.75rem;
}
.dienst-blok-omschrijving {
	font-size: 0.88rem;
	color: var(--grijs-60);
	line-height: 1.65;
	margin-bottom: 1.75rem;
}
.dienst-blok-pijl {
	font-size: 1.1rem;
	color: var(--navy);
	align-self: flex-start;
	transition: transform 0.3s ease, color 0.3s ease;
}

/* Eerste kaart standaard actief */
.dienst-blok:nth-child(3) .dienst-blok-foto-overlay { opacity: 1 !important; transform: scale(1) !important; }

/* Hover: activeer dit blok, zet eerste kaart terug als een ander gehoverd wordt */
.diensten-blokken:has(.dienst-blok:not(:nth-child(3)):hover) .dienst-blok:nth-child(3) .dienst-blok-foto-overlay { opacity: 0 !important; }
.dienst-blok:hover .dienst-blok-foto-overlay { opacity: 1 !important; transform: scale(1) !important; }
/* Kaart 3: altijd navy achtergrond + witte tekst (foto is standaard actief) */
.dienst-blok:nth-child(3) { background-color: var(--navy) !important; }
.dienst-blok:nth-child(3) .dienst-blok-titel,
.dienst-blok:nth-child(3) .dienst-blok-pijl { color: var(--wit) !important; }
.dienst-blok:nth-child(3) .dienst-blok-nr { color: var(--accent-blauw) !important; }
.dienst-blok:nth-child(3) .dienst-blok-omschrijving { color: rgba(255,255,255,0.72) !important; }

/* Als een ander blok gehoverd wordt: reset eerste kaart naar normaal */
.diensten-blokken:has(.dienst-blok:not(:nth-child(3)):hover) .dienst-blok:nth-child(3) { background-color: var(--vlak) !important; }
.diensten-blokken:has(.dienst-blok:not(:nth-child(3)):hover) .dienst-blok:nth-child(3) .dienst-blok-titel,
.diensten-blokken:has(.dienst-blok:not(:nth-child(3)):hover) .dienst-blok:nth-child(3) .dienst-blok-pijl { color: var(--navy) !important; }
.diensten-blokken:has(.dienst-blok:not(:nth-child(3)):hover) .dienst-blok:nth-child(3) .dienst-blok-nr { color: var(--accent-blauw) !important; }
.diensten-blokken:has(.dienst-blok:not(:nth-child(3)):hover) .dienst-blok:nth-child(3) .dienst-blok-omschrijving { color: var(--grijs-60) !important; }

/* Hover: activeer gehoverd blok */
.dienst-blok:hover { background-color: var(--navy) !important; }
.dienst-blok:hover .dienst-blok-titel,
.dienst-blok:hover .dienst-blok-pijl { color: var(--wit) !important; }
.dienst-blok:hover .dienst-blok-nr { color: var(--accent-blauw) !important; }
.dienst-blok:hover .dienst-blok-omschrijving { color: rgba(255,255,255,0.72) !important; }
.dienst-blok:hover .dienst-blok-pijl { transform: translateX(6px) !important; }

/* ---- Verticale grid-lijnen (JS plaatst .grid-lijn via main.js) ---- */
.grid-lijn {
	position: absolute !important;
	width: 1px !important;
	background: rgba(15, 32, 68, 0.1) !important;
	pointer-events: none !important;
	z-index: 0 !important;
	transform: translateZ(0); /* voorkomt subpixel-aliasing */
	will-change: transform;
}

/* ---- Video-sectie ---- */
.video-sectie {
	background: var(--vlak) !important;
	padding: clamp(5rem, 9vw, 9rem) 0 !important;
}
.video-sectie-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	text-align: left !important;
}
.video-koptekst {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 4rem;
	align-items: end;
	margin-bottom: clamp(3rem, 5vw, 4rem);
	padding-bottom: 0;
	border-bottom: 0;
}
.video-titel {
	font-family: var(--font-head);
	font-size: clamp(2.4rem, 4.5vw, 4rem);
	font-weight: 800;
	color: var(--navy);
	letter-spacing: -0.03em;
	line-height: 1.0;
	margin: 0;
	text-transform: uppercase;
}
.video-sub {
	color: var(--grijs-60);
	line-height: 1.8;
	margin: 0;
	padding-top: 1rem; /* iets lager dan de koptekst, zoals bij diensten */
	font-size: 1.05rem;
}
.video-frame-wrap { width: 100%; margin: 0 auto; }
.video-frame--liggend {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--donkergrijs);
}
.video-frame--liggend iframe,
.video-frame--liggend video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.video-label {
	display: block;
	margin-top: 1rem;
	font-size: 0.82rem;
	color: var(--grijs-60);
	text-align: center;
	font-style: normal;
}

/* ---- Ervaring ---- */
.ervaring {
	background: var(--vlak) !important;
	padding: clamp(5rem, 9vw, 9rem) 0;
}
.ervaring-lijst { display: flex; flex-direction: column; }
.ervaring-rij {
	display: grid;
	grid-template-columns: 2.5rem 120px 1fr auto;
	gap: 2rem;
	align-items: center;
	padding: 1.5rem 0;
	border-bottom: 1px solid rgba(15, 32, 68, 0.08);
}
.ervaring-rij:first-child { border-top: 1px solid rgba(15, 32, 68, 0.08); }
.ervaring-nr {
	font-family: var(--font-head);
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(15, 32, 68, 0.3);
	letter-spacing: 0.05em;
}
.ervaring-logo-wrap img { max-height: 32px; width: auto; filter: grayscale(1); opacity: 0.6; }
.ervaring-naam-tekst { font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.ervaring-info { display: flex; flex-direction: column; gap: 0.2rem; }
.ervaring-organisatie { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--navy); }
.ervaring-rol { font-size: 0.88rem; color: var(--grijs-60); }
.ervaring-periode { font-family: var(--font-head); font-size: 0.82rem; font-weight: 500; color: var(--grijs-60); white-space: nowrap; }

/* ---- Aanpak ---- */
.aanpak {
	background: var(--wit) !important;
	padding: clamp(5rem, 9vw, 9rem) 0;
}
.sectie-kop-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 4rem;
	align-items: end;
	margin-bottom: clamp(3rem, 5vw, 5rem);
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.sectie-titel-xl {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(2.4rem, 4.5vw, 4rem);
	line-height: 1.0;
	letter-spacing: -0.03em;
	color: var(--navy);
	text-transform: uppercase;
	margin: 0;
}
.sectie-sub-rechts {
	color: var(--grijs-60);
	font-size: clamp(0.95rem, 1.3vw, 1.05rem);
	line-height: 1.8;
	margin: 0;
	padding-top: 1rem;
	max-width: none;
}
.aanpak-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}
.aanpak-item {
	padding: 3rem 3rem 3rem 0;
	border-right: 1px solid rgba(15, 32, 68, 0.1);
}
.aanpak-item:last-child { border-right: 0; }
.aanpak-item:not(:first-child) { padding-left: 3rem; }
.aanpak-index {
	display: block;
	font-family: var(--font-head);
	font-size: 2.5rem;
	font-weight: 800;
	color: rgba(15, 32, 68, 0.12);
	line-height: 1;
	margin-bottom: 1rem;
}
.aanpak-item h3 { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: 0.75rem; }
.aanpak-item p { font-size: 0.95rem; color: var(--grijs-60); line-height: 1.75; }

/* ---- CTA ---- */
.cta-eind {
	background: var(--wit) !important;
	padding: 0 !important;
}
.cta-foto-balk {
	width: 100%;
	height: clamp(280px, 35vw, 480px);
	overflow: hidden;
}
.cta-foto-balk img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
.cta-inhoud-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
	padding-top: clamp(3.5rem, 6vw, 6rem) !important;
	padding-bottom: clamp(3.5rem, 6vw, 6rem) !important;
}
.cta-kop {
	font-family: var(--font-head);
	font-size: clamp(2.4rem, 4.5vw, 4rem);
	font-weight: 800;
	color: var(--navy);
	letter-spacing: -0.03em;
	line-height: 1.0;
	margin: 0;
	text-transform: uppercase;
}
.cta-tekst { color: var(--grijs-60); font-size: 1.05rem; line-height: 1.8; margin: 0 0 2.5rem; }
.cta-knoppen { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1.2rem; }
.cta-sub-link { font-family: var(--font-head); font-size: 0.88rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.cta-sub-link:hover { color: var(--accent-blauw); }
.cta-paneel { display: none !important; }

/* ---- Sectie-eyebrow ---- */
.sectie-eyebrow {
	font-family: var(--font-head);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--accent-blauw);
	display: block;
	margin-bottom: 1rem;
}

/* ---- Mobiel ---- */
@media (max-width: 900px) {
	.diensten-blokken { grid-template-columns: 1fr 1fr !important; }
	.dienst-blok:nth-child(2) { border-right: 0 !important; }
	.dienst-blok:nth-child(1),
	.dienst-blok:nth-child(2) { border-bottom: 1px solid rgba(15,32,68,0.1) !important; }
}
@media (max-width: 760px) {
	.hero-boven-rij { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
	.hero-foto-wrap { width: 100%; }
	.intro-tekst-inner { grid-template-columns: 1fr !important; }
	.intro-stats { grid-template-columns: repeat(4, 1fr) !important; }
	.diensten-blokken { grid-template-columns: 1fr !important; }
	.dienst-blok { border-right: 0 !important; border-bottom: 1px solid rgba(15,32,68,0.1) !important; }
	.sectie-kop-split { grid-template-columns: 1fr; }
	.aanpak-grid { grid-template-columns: 1fr; }
	.aanpak-item { border-right: 0; border-bottom: 1px solid rgba(15,32,68,0.1); padding: 2.5rem 0; padding-left: 0; }
	.video-frame-wrap { width: 100%; }
	.cta-inhoud-wrap { grid-template-columns: 1fr; gap: 2rem; }
	.ervaring-rij { grid-template-columns: 2rem 1fr; }
	.ervaring-logo-wrap { display: none; }
}
@media (max-width: 560px) {
	.diensten-blokken { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Ervaring-kaarten (v3.6.1)
   ========================================================================== */

.ervaring { padding-bottom: clamp(5rem, 9vw, 9rem); }

.ervaring-kaarten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid rgba(15,32,68,0.1);
}

.ervaring-kaart {
	position: relative;
	min-height: 520px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-right: 1px solid rgba(15,32,68,0.1);
	border-bottom: 1px solid rgba(15,32,68,0.1);
	background: var(--vlak);
	overflow: hidden;
	transition: background 0.4s ease;
}
.ervaring-kaart:nth-child(3n) { border-right: 0; }

/* Achtergrondafbeelding via CSS custom property */
.ervaring-kaart--foto {
	background-image: var(--erv-foto);
	background-size: cover;
	background-position: center;
}

/* Gradient overlay: onderaan donker voor leesbaarheid */
.ervaring-kaart-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(15, 32, 68, 0.92) 0%,
		rgba(15, 32, 68, 0.55) 45%,
		rgba(15, 32, 68, 0.15) 75%,
		transparent 100%
	);
	z-index: 0;
}
/* Kaart zonder foto: subtielere overlay */
.ervaring-kaart:not(.ervaring-kaart--foto) .ervaring-kaart-overlay {
	background: none;
}

.ervaring-kaart-inhoud {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2.5rem;
}

/* Periode bovenin */
.ervaring-kaart-top {
	flex: 1;
	display: flex;
	align-items: flex-start;
}
.ervaring-kaart-periode {
	font-family: var(--font-head);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-blauw);
	background: rgba(255, 190, 0, 0.12);
	padding: 0.35rem 0.75rem;
	display: inline-block;
}
/* Kaart zonder foto: donkere periode-badge */
.ervaring-kaart:not(.ervaring-kaart--foto) .ervaring-kaart-periode {
	color: var(--accent-blauw);
	background: rgba(255, 190, 0, 0.1);
}

/* Naam + rol + punten onderin */
.ervaring-kaart-bottom { }

.ervaring-kaart-naam {
	font-family: var(--font-head);
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 0.5rem;
	color: var(--wit);
}
.ervaring-kaart:not(.ervaring-kaart--foto) .ervaring-kaart-naam {
	color: var(--navy);
}

.ervaring-kaart-rol {
	font-size: 0.9rem;
	color: rgba(255,255,255,0.72);
	margin: 0 0 1.25rem;
	line-height: 1.5;
}
.ervaring-kaart:not(.ervaring-kaart--foto) .ervaring-kaart-rol {
	color: var(--grijs-60);
}

.ervaring-kaart-punten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	border-top: 1px solid rgba(255,255,255,0.15);
	padding-top: 1.1rem;
}
.ervaring-kaart:not(.ervaring-kaart--foto) .ervaring-kaart-punten {
	border-top-color: rgba(15,32,68,0.1);
}
.ervaring-kaart-punten li {
	font-size: 0.85rem;
	color: rgba(255,255,255,0.78);
	padding-left: 1.1rem;
	position: relative;
}
.ervaring-kaart-punten li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--accent-blauw);
	font-weight: 700;
}
.ervaring-kaart:not(.ervaring-kaart--foto) .ervaring-kaart-punten li {
	color: var(--grijs-60);
}

/* Breed-kaart variant: elke 4e kaart over 2 kolommen */
.ervaring-kaart:nth-child(4n) {
	grid-column: span 2;
}

/* Mobiel */
@media (max-width: 900px) {
	.ervaring-kaarten { grid-template-columns: 1fr 1fr; }
	.ervaring-kaart:nth-child(3n) { border-right: 1px solid rgba(15,32,68,0.1); }
	.ervaring-kaart:nth-child(2n) { border-right: 0; }
	.ervaring-kaart:nth-child(4n) { grid-column: span 1; }
}
@media (max-width: 560px) {
	.ervaring-kaarten { grid-template-columns: 1fr; }
	.ervaring-kaart { border-right: 0 !important; min-height: 380px; }
	.ervaring-kaart:nth-child(4n) { grid-column: span 1; }
}

/* ==========================================================================
   Cases-slider (v3.6.3)
   ========================================================================== */
.cases-slider-sectie {
	background: var(--wit);
	padding: clamp(5rem, 9vw, 9rem) 0;
}
.cases-slider-sectie .sectie-kop-split {
	margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

/* Wrap: positie-anker voor de knoppen */
.cases-slider-wrap {
	width: 90%;
	margin: 0 auto;
	position: relative;
}

/* Overflow-laag: knipt slides af */
.cases-slider-overflow {
	overflow: hidden;
}

/* Track */
.cases-slider-track {
	display: flex;
	gap: 2rem;
	transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
	will-change: transform;
}

/* Slide */
.cases-slide {
	flex-shrink: 0;
	width: 100%;
	min-width: 100%;
	height: clamp(480px, 65vh, 720px);
	background-color: var(--navy);
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.cases-slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,32,68,0.88) 0%, rgba(15,32,68,0.45) 45%, transparent 100%);
}
.cases-slide-inhoud {
	position: relative;
	z-index: 2;
	padding: clamp(2rem, 4vw, 4rem);
	max-width: 50rem;
}
.cases-slide-type {
	display: inline-block;
	font-family: var(--font-head);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-blauw);
	background: rgba(255,190,0,0.12);
	padding: 0.3rem 0.7rem;
	margin-bottom: 1rem;
}
.cases-slide-titel {
	font-family: var(--font-head);
	font-size: clamp(1.8rem, 3.5vw, 3rem);
	font-weight: 800;
	color: var(--wit);
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin: 0 0 1rem;
}
.cases-slide-excerpt {
	font-size: 1rem;
	color: rgba(255,255,255,0.75);
	line-height: 1.75;
	margin: 0 0 1.75rem;
	max-width: 38rem;
}
.cases-slide-link {
	font-family: var(--font-head);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--wit);
	text-decoration: none;
}
.cases-slide-link:hover { color: var(--accent-blauw); }

/* Knoppen: absoluut rechtsonder in de wrap, OVER de slide heen */
.cases-slider-btn {
	position: absolute;
	bottom: clamp(1.5rem, 3vw, 2.5rem);
	width: 52px;
	height: 52px;
	background: var(--wit);
	border: 0;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	transition: background var(--overgang);
}
.cases-slider-prev { right: calc(clamp(1.5rem, 3vw, 2.5rem) + 52px + 4px); }
.cases-slider-next { right: clamp(1.5rem, 3vw, 2.5rem); }
.cases-slider-btn:hover { background: var(--accent-blauw); }
.cases-slider-btn svg { width: 20px; height: 20px; color: var(--navy); }

@media (max-width: 760px) {
	.cases-slider-wrap { width: 100%; }
	.cases-slide { height: clamp(360px, 75vw, 520px); }
}

/* ==========================================================================
   Footer redesign (v3.7.6)
   ========================================================================== */
.site-footer {
	background: var(--navy) !important;
	color: rgba(255,255,255,0.65);
}

/* Bovenbalk: logo+tagline links, contact rechts */
.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 3rem;
	padding-top: clamp(4rem, 7vw, 7rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-top-links {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.footer-logo-img--wit img,
.footer-logo-wrap img { filter: brightness(0) invert(1); max-height: 36px; width: auto; }
.nav-wordmark--footer {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	color: var(--wit);
	text-decoration: none;
}
.footer-tagline {
	font-size: 0.9rem;
	color: rgba(255,255,255,0.5);
	margin: 0;
	max-width: 28rem;
	line-height: 1.6;
}
.footer-top-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.6rem;
}
.footer-contact-link {
	font-family: var(--font-head);
	font-size: 0.9rem;
	font-weight: 500;
	color: rgba(255,255,255,0.65);
	text-decoration: none;
	transition: color var(--overgang);
}
.footer-contact-link:hover { color: var(--accent-blauw); }

/* Navigatierij */
.footer-nav-balk {
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-nav-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 2rem;
	padding-top: clamp(2.5rem, 4vw, 4rem);
	padding-bottom: clamp(2.5rem, 4vw, 4rem);
}
.footer-nav-label {
	display: block;
	font-family: var(--font-head);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	margin-bottom: 1.25rem;
}
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.footer-menu a {
	font-size: 0.92rem;
	color: rgba(255,255,255,0.72);
	text-decoration: none;
	transition: color var(--overgang);
	font-weight: 500;
}
.footer-menu a:hover { color: var(--wit); }

/* CTA-blok in de footer */
.footer-cta-col {
	display: flex;
	align-items: flex-start;
	padding-top: 2rem; /* uitlijnen met het label */
}
.footer-cta-knop {
	display: inline-block;
	background: var(--accent-blauw);
	color: var(--navy) !important;
	font-family: var(--font-head);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.85rem 1.5rem;
	border-radius: 0;
	transition: background var(--overgang);
}
.footer-cta-knop:hover { background: var(--accent-blauw-licht); }

/* Onderbalk */
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	font-size: 0.8rem;
	color: rgba(255,255,255,0.3);
}
.footer-bottom-links {
	display: flex;
	gap: 1.5rem;
}
.footer-bottom-links a {
	color: rgba(255,255,255,0.3);
	text-decoration: none;
	font-size: 0.8rem;
	transition: color var(--overgang);
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.65); }

@media (max-width: 900px) {
	.footer-nav-grid { grid-template-columns: 1fr 1fr; }
	.footer-top { flex-direction: column; }
	.footer-top-contact { align-items: flex-start; }
}
@media (max-width: 560px) {
	.footer-nav-grid { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; gap: 1rem; align-items: flex-start; }
}

/* Footer e-mail knop: identiek aan .btn */
.footer-email-knop {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	background: var(--accent-blauw);
	color: var(--zwart) !important;
	text-decoration: none !important;
	padding: 0.6rem 1.4rem 0.6rem 0.6rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	transition: background var(--overgang);
	border-radius: 0;
	width: auto;
}
.footer-email-knop:hover { background: var(--accent-blauw-licht); }
.footer-email-knop .btn-icoon {
	width: 32px;
	height: 32px;
	background: rgba(0,0,0,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: 0;
}
.footer-email-knop .btn-icoon svg { width: 14px; height: 14px; color: var(--zwart); }

/* Swipe-balk: zelfde kleur als footer (--zwart) */
#swipe-balk { background: var(--zwart) !important; }

/* ==========================================================================
   Subhero — nieuwe stijl (v3.8.3)
   ========================================================================== */

/* Lichte variant: geen foto, zelfde opmaak als homepage hero-boven */
.subhero--licht {
	background: var(--wit);
	padding-top: calc(var(--navbar-h) + 3.5rem);
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(15,32,68,0.07);
}
.subhero--foto {
	position: relative;
	min-height: 55vh;
	display: flex;
	align-items: flex-end;
	padding-bottom: 0;
	overflow: hidden;
}
.subhero-foto {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.subhero--foto .subhero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,32,68,0.88) 0%, rgba(15,32,68,0.45) 50%, rgba(15,32,68,0.15) 100%);
	z-index: 1;
}
.subhero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: end;
	padding-top: calc(var(--navbar-h) + 3rem);
	padding-bottom: 3.5rem;
	width: 100%;
}
.subhero--licht .subhero-inner {
	padding-top: 0;
	padding-bottom: 0;
}
.subhero-titel {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(2.4rem, 4.2vw, 3.8rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--navy);
	text-transform: uppercase;
	margin: 0;
}
.subhero-titel--wit { color: var(--wit) !important; }

.subhero-sub {
	font-size: 1.05rem;
	color: var(--grijs-60);
	line-height: 1.8;
	margin: 0;
	padding-top: 1rem;
}
.subhero-sub--wit { color: rgba(255,255,255,0.78) !important; }

/* Breadcrumbs op foto: witte kleur */
.subhero--foto .breadcrumbs a { color: rgba(255,255,255,0.65) !important; }
.subhero--foto .breadcrumbs span[aria-current] { color: rgba(255,255,255,0.9); }
.subhero--foto .breadcrumbs-sep { color: rgba(255,255,255,0.3); }
.subhero--licht .breadcrumbs { margin-bottom: 0.75rem; }
.subhero--licht .breadcrumbs a { color: var(--grijs-60) !important; }
.subhero--licht .breadcrumbs a:hover { color: var(--navy) !important; }
.subhero--licht .breadcrumbs span[aria-current] { color: var(--navy); }
.subhero--licht .breadcrumbs-sep { color: rgba(15,32,68,0.3); }

/* Eyebrow op lichte achtergrond */
.subhero--licht .sectie-eyebrow { color: var(--accent-blauw); }

@media (max-width: 760px) {
	.subhero-inner { grid-template-columns: 1fr; }
	.subhero-rechts { padding-top: 0; }
}

/* ==========================================================================
   Cases-archief — grote kaarten (v3.8.3)
   ========================================================================== */
.cases-archief { padding: clamp(4rem, 7vw, 7rem) 0; background: var(--wit); }

.cases-kaarten-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid rgba(15,32,68,0.1);
	border-left: 1px solid rgba(15,32,68,0.1);
}

.case-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 480px;
	background-color: var(--vlak);
	background-size: cover;
	background-position: center;
	text-decoration: none !important;
	border-right: 1px solid rgba(15,32,68,0.1);
	border-bottom: 1px solid rgba(15,32,68,0.1);
	overflow: hidden;
	transition: background-color 0.4s ease;
}
/* Elke 3e kaart: dubbele breedte voor ritme */
.case-kaart:nth-child(3n) { grid-column: span 2; }

.case-kaart--foto { background-color: var(--navy); }

.case-kaart-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,32,68,0.9) 0%, rgba(15,32,68,0.4) 50%, transparent 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 0;
}
.case-kaart--foto .case-kaart-overlay { opacity: 1; }

.case-kaart-inhoud {
	position: relative;
	z-index: 2;
	padding: 2.5rem;
}

.case-kaart-titel {
	font-family: var(--font-head);
	font-size: clamp(1.5rem, 2.5vw, 2.2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--navy);
	margin: 0.75rem 0 0.75rem;
}
.case-kaart--foto .case-kaart-titel { color: var(--wit); }

.case-kaart-excerpt {
	font-size: 0.95rem;
	color: var(--grijs-60);
	line-height: 1.7;
	margin: 0 0 1.5rem;
	max-width: 36rem;
}
.case-kaart--foto .case-kaart-excerpt { color: rgba(255,255,255,0.72); }

/* Hover: kleur-wisseling op kaart zonder foto */
.case-kaart:not(.case-kaart--foto):hover { background-color: var(--navy); }
.case-kaart:not(.case-kaart--foto):hover .case-kaart-overlay { opacity: 1; }
.case-kaart:not(.case-kaart--foto):hover .case-kaart-titel,
.case-kaart:not(.case-kaart--foto):hover .cases-slide-link { color: var(--wit) !important; }
.case-kaart:not(.case-kaart--foto):hover .case-kaart-excerpt { color: rgba(255,255,255,0.72) !important; }
.case-kaart:not(.case-kaart--foto):hover .cases-slide-type { opacity: 1; }

@media (max-width: 760px) {
	.cases-kaarten-grid { grid-template-columns: 1fr; }
	.case-kaart:nth-child(3n) { grid-column: span 1; }
	.case-kaart { min-height: 360px; }
}

/* ==========================================================================
   Subpagina-content: entry-content stijlen
   ========================================================================== */
.entry-content {
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--zwart);
}
.entry-content h2 {
	font-family: var(--font-head);
	font-size: clamp(1.6rem, 2.5vw, 2.2rem);
	font-weight: 800;
	color: var(--navy);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 2.5rem 0 1rem;
}
.entry-content h3 {
	font-family: var(--font-head);
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	font-weight: 700;
	color: var(--navy);
	margin: 2rem 0 0.75rem;
}
.entry-content p { margin: 0 0 1.5rem; }
.entry-content ul, .entry-content ol {
	margin: 0 0 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.entry-content li::marker { color: var(--accent-blauw); }
.entry-content a { color: var(--accent-blauw); }
.entry-content a:hover { text-decoration: underline; }
.entry-content strong { color: var(--navy); font-weight: 700; }

/* Container smal voor tekst-content */
.container--smal { max-width: 760px; }

/* Pagina-sectie padding */
.pagina, .blog-single, .case-single {
	padding: clamp(4rem, 7vw, 7rem) 0;
	background: var(--wit);
}

/* Blog-single footer */
.blog-single-footer {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(15,32,68,0.08);
}

/* Case-single nav */
.case-single-nav { padding: clamp(3rem, 5vw, 5rem) 0; background: var(--vlak); }
.case-single-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

/* Donkere knoppen: tekst altijd wit, icoon subtiel wit */
.btn--donker,
.btn--donker .btn-label,
.btn--donker span:not(.btn-icoon) {
	color: var(--wit) !important;
}
.btn--donker .btn-pijl { color: var(--wit) !important; }
.btn--donker .btn-icoon { background: rgba(255,255,255,0.15) !important; color: var(--wit) !important; }

/* Knop uitlijning: verticaal centreren */
.btn { align-items: center; }

/* USP-sectie: rand-aan-rand, 4 blokken naast elkaar */
.sectie-usp > .container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Koptekst krijgt wel normale padding */
.sectie-usp > .container > .sectie-titel,
.sectie-usp > .container > .sectie-sub {
	max-width: var(--container, 1280px);
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.25rem, 4vw, 3rem) !important;
	padding-right: clamp(1.25rem, 4vw, 3rem) !important;
}
/* Grid: vierkante blokken zoals diensten */
.sectie-usp .aanpak-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 0 !important;
	margin-top: 0 !important;
	border-top: 1px solid rgba(15,32,68,0.1);
}
.sectie-usp .aanpak-grid.usp-grid--2 { grid-template-columns: repeat(2, 1fr) !important; }
.sectie-usp .aanpak-grid.usp-grid--3 { grid-template-columns: repeat(3, 1fr) !important; }

.sectie-usp .aanpak-item {
	padding: 3rem 2.5rem !important;
	border-right: 1px solid rgba(15,32,68,0.1) !important;
	border-bottom: 0 !important;
}
.sectie-usp .aanpak-item:last-child { border-right: 0 !important; }

@media (max-width: 900px) {
	.sectie-usp .aanpak-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.sectie-usp .aanpak-item:nth-child(2n) { border-right: 0 !important; }
	.sectie-usp .aanpak-item { border-bottom: 1px solid rgba(15,32,68,0.1) !important; }
}
@media (max-width: 560px) {
	.sectie-usp .aanpak-grid { grid-template-columns: 1fr !important; }
	.sectie-usp .aanpak-item { border-right: 0 !important; }
}

/* Lees meer links: vloeiende kleurovergang bij hover */
.cases-slide-link,
.case-kaart .cases-slide-link,
.hero-link-sub,
.cta-sub-link,
.tekst-link,
.footer-menu li a,
.footer-contact a,
.footer-bottom-links a {
	transition: color 0.35s ease !important;
}

/* ==========================================================================
   Subhero — Minimalistisch (optie 4)
   ========================================================================== */
.subhero--minimaal {
	background: var(--wit);
	padding-top: calc(var(--navbar-h) + 4rem);
	padding-bottom: 3.5rem;
	border-bottom: 1px solid rgba(15, 32, 68, 0.08);
}

.subhero--minimaal .subhero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: end;
	padding-top: 0;
	padding-bottom: 0;
}

/* Breadcrumbs: subtiel grijs */
.subhero--minimaal .breadcrumbs {
	margin-bottom: 1.25rem;
}
.subhero--minimaal .breadcrumbs a {
	color: var(--grijs-60) !important;
	font-size: 0.8rem;
}
.subhero--minimaal .breadcrumbs a:hover {
	color: var(--navy) !important;
}
.subhero--minimaal .breadcrumbs span[aria-current] {
	color: var(--navy);
	font-size: 0.8rem;
}
.subhero--minimaal .breadcrumbs-sep {
	color: rgba(15, 32, 68, 0.25);
}

/* Grote koptekst */
.subhero--minimaal .subhero-titel {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(2.8rem, 5.5vw, 5.5rem);
	line-height: 1.0;
	letter-spacing: -0.03em;
	color: var(--navy);
	text-transform: uppercase;
	margin: 0;
}

/* Subtekst rechts: iets lager dan de koptekst */
.subhero--minimaal .subhero-rechts {
	padding-top: 1rem;
}
.subhero--minimaal .subhero-sub {
	font-size: 1.05rem;
	color: var(--grijs-60);
	line-height: 1.8;
	margin: 0;
}

@media (max-width: 760px) {
	.subhero--minimaal .subhero-inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.subhero--minimaal .subhero-titel {
		font-size: clamp(2.4rem, 9vw, 3.5rem);
	}
}

/* USP-sectie: geen dubbele lijn — verwijder border van sectie-titel */
.sectie-usp > .container > .sectie-titel {
	border-bottom: 0 !important;
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
	margin-bottom: 0 !important;
}

/* USP-grid: geen border-top meer — titel heeft al een border-bottom
   via de secties-bouwer heading stijl. Zo geen dubbele lijn. */
.sectie-usp .aanpak-grid {
	border-top: 0 !important;
}
/* Bovenste aanpak-items: lijn erboven als vervanging */
.sectie-usp .aanpak-item:nth-child(-n+4) {
	border-top: 1px solid rgba(15,32,68,0.1) !important;
}

/* USP-grid: definitief geen dubbele lijn */
.sectie-usp .aanpak-grid {
	border-top: 0 !important;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}
/* Geen border-top op de items */
.sectie-usp .aanpak-item:nth-child(-n+4) {
	border-top: 0 !important;
}
/* Scheidingslijn onder de koptekst — één lijn */
.sectie-usp > .container > .sectie-titel {
	border-bottom: 1px solid rgba(15,32,68,0.1) !important;
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   Contactpagina — conversiegericht (v3.9.1)
   ========================================================================== */

/* Hero: navy achtergrond, voelt zwaarder en serieuzer */
.contact-hero {
	background: var(--wit);
	padding: calc(var(--navbar-h) + 4rem) 0 0;
	border-bottom: 1px solid rgba(15,32,68,0.07);
}
.contact-hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(3rem, 6vw, 6rem);
	align-items: start;
}

/* Linker kolom: tekst */
.contact-hero-tekst { padding-bottom: clamp(4rem, 7vw, 7rem); }

.contact-hero-tekst .sectie-eyebrow { color: var(--accent-blauw); }

.contact-hero-titel {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(2rem, 3.5vw, 3rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--navy);
	margin: 0.75rem 0 1.25rem;
}

.contact-hero-sub {
	font-size: 1.05rem;
	color: var(--grijs-60);
	line-height: 1.8;
	margin: 0 0 2.5rem;
}

/* Bewijslast punten */
.contact-hero-punten {
	list-style: none;
	padding: 0;
	margin: 0 0 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.contact-hero-punten li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.95rem;
	color: rgba(255,255,255,0.82);
	font-family: var(--font-head);
	font-weight: 500;
}
.contact-hero-punten svg {
	width: 20px;
	height: 20px;
	color: var(--accent-blauw);
	flex: none;
}

/* Directe contactgegevens */
.contact-hero-direct {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(15,32,68,0.08);
}
.contact-direct-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none !important;
	transition: opacity 0.3s ease;
}
.contact-direct-item:hover { opacity: 0.8; }

.contact-direct-icoon {
	width: 44px;
	height: 44px;
	background: rgba(15,32,68,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.contact-direct-icoon svg {
	width: 18px;
	height: 18px;
	color: var(--navy);
}
.contact-direct-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grijs-60);
	margin-bottom: 0.2rem;
}
.contact-direct-waarde {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--navy);
	font-family: var(--font-head);
}

/* Rechter kolom: formulier zweeft omhoog */
.contact-formulier-wrap {
	position: relative;
	top: 0;
	margin-bottom: 0;
}
.contact-formulier {
	background: var(--wit) !important;
	border-radius: 0 !important;
	padding: clamp(2rem, 4vw, 3rem) !important;
	border: 1px solid rgba(15,32,68,0.08);
}
.contact-formulier-kop {
	font-family: var(--font-head);
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--navy);
	letter-spacing: -0.02em;
	margin: 0 0 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(15,32,68,0.08);
}
.contact-formulier-hint {
	color: var(--grijs-60);
	font-style: italic;
	font-size: 0.9rem;
}

/* Formuliervelden: nieuwe stijl passend bij het redesign */
.contact-formulier .wpcf7 input[type="text"],
.contact-formulier .wpcf7 input[type="email"],
.contact-formulier .wpcf7 input[type="tel"],
.contact-formulier .wpcf7 input[type="url"],
.contact-formulier .wpcf7 input[type="number"],
.contact-formulier .wpcf7 textarea,
.contact-formulier .wpcf7 select {
	border: 0 !important;
	border-bottom: 1.5px solid rgba(15,32,68,0.15) !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0.75rem 0 !important;
	font-size: 1rem !important;
	color: var(--zwart) !important;
	transition: border-color 0.3s ease !important;
}
.contact-formulier .wpcf7 input:focus,
.contact-formulier .wpcf7 textarea:focus,
.contact-formulier .wpcf7 select:focus {
	border-bottom-color: var(--accent-blauw) !important;
	box-shadow: none !important;
	outline: none !important;
}
.contact-formulier .wpcf7 ::placeholder {
	color: rgba(15,32,68,0.3) !important;
}
.contact-formulier .wpcf7 label {
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--grijs-60) !important;
}
.contact-formulier .wpcf7 textarea {
	min-height: 120px !important;
}

/* Submit-knop: identiek aan jaco_btn() */
.contact-formulier .wpcf7 input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	background: var(--accent-blauw) !important;
	color: var(--zwart) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0.85rem 2rem !important;
	font-family: var(--font-head) !important;
	font-weight: 700 !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background var(--overgang) !important;
	width: 100% !important;
	justify-content: center !important;
	margin-top: 1rem !important;
}
.contact-formulier .wpcf7 input[type="submit"]:hover {
	background: var(--accent-blauw-licht) !important;
}

/* Mobiel */
@media (max-width: 860px) {
	.contact-hero-inner {
		grid-template-columns: 1fr;
	}
	.contact-formulier-wrap {
		top: 0;
		margin-bottom: 0;
	}
	.contact-hero-tekst { padding-bottom: 2rem; }
}

/* Contact hero: koptekst uppercase */
.contact-hero-titel {
	text-transform: uppercase !important;
	font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
}

/* Formulier: ruimte onderaan + textarea kleiner + dropdown duidelijk */
.contact-hero {
	padding-bottom: clamp(5rem, 9vw, 8rem) !important;
}
.contact-formulier .wpcf7 textarea {
	min-height: 80px !important;
	max-height: 160px !important;
}

/* Dropdown: pijl altijd zichtbaar, border zichtbaar */
.contact-formulier .wpcf7 select {
	border-bottom: 1.5px solid rgba(15,32,68,0.3) !important;
	padding-right: 2rem !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%230f2044' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.25rem center !important;
	background-size: 16px 16px !important;
	cursor: pointer !important;
}
.contact-formulier .wpcf7 select:focus {
	border-bottom-color: var(--accent-blauw) !important;
}

/* Contact hero titel: zelfde grootte als andere sectie-koppen */
.contact-hero-titel {
	font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
}

/* Logo groter in header en footer */
.nav-logo img { max-height: 62px !important; }
.footer-logo-img img,
.footer-logo-img--wit img,
.footer-logo-wrap img { max-height: 54px !important; }

/* Navbar: zelfde hoogte bij scrolled, logo niet kleiner */
#navbar.scrolled { height: var(--navbar-h) !important; }
#navbar.scrolled .nav-logo img { max-height: 62px !important; }

/* ==========================================================================
   Lijn-animatie van links naar rechts op tekst-links (v3.9.7)
   ========================================================================== */

/* Gedeeld patroon: lijn die van links naar rechts inschuift */
.hero-link-sub,
.cta-sub-link,
.cases-slide-link,
.footer-menu li a,
.footer-bottom-links a,
.footer-contact a,
.nav-menu li a,
.nav-menu .sub-menu li a {
	position: relative;
	text-decoration: none !important;
	padding-bottom: 3px; /* ruimte tussen tekst en lijn */
}

.hero-link-sub::after,
.cta-sub-link::after,
.cases-slide-link::after,
.footer-menu li a::after,
.footer-bottom-links a::after,
.footer-contact a::after,
.nav-menu li a::after,
.nav-menu .sub-menu li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1.5px;
	background: currentColor;
	transition: width 0.35s cubic-bezier(0.77, 0, 0.18, 1);
}

.hero-link-sub:hover::after,
.cta-sub-link:hover::after,
.cases-slide-link:hover::after,
.footer-menu li a:hover::after,
.footer-bottom-links a:hover::after,
.footer-contact a:hover::after,
.nav-menu li a:hover::after,
.nav-menu .sub-menu li a:hover::after {
	width: 100%;
}

/* Nav actief item: lijn altijd zichtbaar */
.nav-menu li.current-menu-item > a::after,
.nav-menu li.current_page_item > a::after {
	width: 100%;
	background: var(--accent-blauw);
}

/* Footer logo groter */
.footer-logo-img img,
.footer-logo-img--wit img,
.footer-logo-wrap img { max-height: 72px !important; }

/* Dropdown: geen lijn-animatie op de toggle en submenu-items */
.nav-menu .menu-item-has-children > a::after,
.nav-menu .sub-menu li a::after,
.dropdown-toggle::after {
	display: none !important;
}
/* Submenu-items: wel padding-bottom resetten */
.nav-menu .sub-menu li a {
	padding-bottom: 0 !important;
}

/* Dropdown-toggle: chevron wél tonen (was uitgeschakeld door lijn-fix) */
.nav-menu .menu-item-has-children > a::after {
	display: inline-block !important;
	content: "" !important;
	width: 6px !important;
	height: 6px !important;
	margin-left: 0.45rem !important;
	border-right: 1.8px solid currentColor !important;
	border-bottom: 1.8px solid currentColor !important;
	transform: rotate(45deg) translateY(-2px) !important;
	transition: transform var(--overgang) !important;
	vertical-align: 2px !important;
	background: none !important; /* geen gele lijn */
	position: static !important;
	bottom: auto !important;
	left: auto !important;
	width: 6px !important;
	height: 6px !important;
}
.nav-menu .menu-item-has-children:hover > a::after,
.nav-menu .menu-item-has-children:focus-within > a::after {
	transform: rotate(225deg) translateY(0px) !important;
}



/* Diensten-blokken: rand-aan-rand tot 1800px */
@media (max-width: 1800px) {
	.expertise > .container {
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.diensten-blokken {
		max-width: 100% !important;
	}
}

/* Diensten: blokken écht rand-aan-rand, ongeacht container */
.expertise {
	overflow: visible;
}
.expertise > .container {
	max-width: 100vw !important;
	width: 100vw !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
}
.expertise .sectie-kop-split {
	max-width: var(--container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.25rem, 4vw, 3rem) !important;
	padding-right: clamp(1.25rem, 4vw, 3rem) !important;
}
.diensten-blokken {
	width: 100vw !important;
	max-width: 100vw !important;
}

/* ==========================================================================
   Sectie-bouwer updates (v4.0.2)
   ========================================================================== */

/* ---- Sectie-padding: gehalveerd ---- */
.sectie-blok { padding-block: clamp(2.5rem, 4.5vw, 5rem) !important; }
.sectie-blok + .sectie-blok { padding-top: clamp(2rem, 4vw, 4rem) !important; }

/* ---- Kopteksten: altijd uppercase in secties ---- */
.sectie-titel,
.sectie-titel--blok,
.stm-titel-caps,
.tekst-titel-caps,
.sectie-cta-kop,
.faq-kop .sectie-titel--blok,
.sectie-usp .sectie-titel {
	text-transform: uppercase !important;
}

/* ---- STM: titel op twee regels (max-width beperkt) ---- */
.stm-tekst .sectie-titel--blok {
	max-width: 10em;
	line-height: 1.05;
}

/* ---- STM: bullet-lijst stijl ---- */
.stm-bullets {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.stm-bullets li {
	padding-left: 1.25rem;
	position: relative;
	font-size: 0.95rem;
	color: var(--grijs-60);
	line-height: 1.65;
}
.stm-bullets li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--accent-blauw);
	font-weight: 700;
}

/* ---- STM: knoppenrij ---- */
.stm-knoppen {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1.75rem;
	flex-wrap: wrap;
}
.stm-tekst-link {
	font-family: var(--font-head);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	transition: color 0.35s ease;
}
.stm-tekst-link:hover { color: var(--accent-blauw); }

/* ---- Tekst-sectie: knoppenrij ---- */
.tekst-duo-knoppen {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1.75rem;
	flex-wrap: wrap;
}

/* ---- CTA-sectie: altijd zichtbaar, nieuw panel ---- */
.sectie-cta-paneel {
	background: var(--navy);
	padding: clamp(2.5rem, 5vw, 4.5rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	position: relative;
	overflow: hidden;
}
.sectie-cta-paneel--foto {
	background-size: cover;
	background-position: center;
}
.sectie-cta-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15,32,68,0.78);
	z-index: 0;
}
.sectie-cta-kop {
	font-family: var(--font-head);
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	font-weight: 800;
	color: var(--wit);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0;
	position: relative;
	z-index: 1;
}
.sectie-cta-tekst {
	color: rgba(255,255,255,0.72);
	font-size: 1.05rem;
	line-height: 1.75;
	margin: 0;
	position: relative;
	z-index: 1;
	max-width: 36rem;
}
.sectie-cta-knoppen {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.sectie-cta-knoppen .tekst-link {
	color: rgba(255,255,255,0.75);
}
.sectie-cta-knoppen .tekst-link:hover { color: var(--wit); }

/* ---- USP: Font Awesome icoon stijl ---- */
.usp-fa-icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: rgba(255,190,0,0.1);
	margin-bottom: 1.25rem;
}
.usp-fa-icoon i {
	font-size: 1.4rem;
	color: var(--accent-blauw);
}
/* USP sectie: max 1600px, niet rand-aan-rand */
.sectie-usp > .container {
	max-width: var(--container) !important;
	padding-left: clamp(1.25rem, 4vw, 3rem) !important;
	padding-right: clamp(1.25rem, 4vw, 3rem) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
}

/* ---- Quote: fluid font-size ---- */
.quote-citaat--kort  { font-size: clamp(1.3rem, 2.5vw, 2rem); }
.quote-citaat--middel { font-size: clamp(1.1rem, 2vw, 1.6rem); }
.quote-citaat--lang  { font-size: clamp(0.95rem, 1.6vw, 1.25rem); }

/* Aanhalingsteken: groter en dichter op tekst */
.quote-teken {
	font-size: clamp(5rem, 10vw, 9rem) !important;
	line-height: 0.6 !important;
	margin-bottom: -0.5rem !important;
	display: block !important;
}

/* ---- FAQ: contact-kaartje ---- */
.faq-contact-kaartje {
	margin-top: 2rem;
	padding: 1.5rem 2rem;
	background: var(--lichtgrijs);
	border-left: 3px solid var(--accent-blauw);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.faq-contact-tekst {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1rem;
	color: var(--navy);
	margin: 0;
}

/* ==========================================================================
   Fixes v4.0.3
   ========================================================================== */

/* ---- FA icoon: fallback als icoon niet laadt — verberg lege box ---- */
.usp-fa-icoon:empty,
.usp-fa-icoon i:not([class*="fa-"]) {
	display: none;
}
/* Toon pas als FA echt geladen is */
.usp-fa-icoon {
	min-width: 0;
	min-height: 0;
}
.usp-fa-icoon:has(i.fa-solid),
.usp-fa-icoon:has(i.fa-regular),
.usp-fa-icoon:has(i.fa-brands) {
	min-width: 52px;
	min-height: 52px;
}

/* ---- FAQ contact-kaartje: donker ---- */
.faq-contact-kaartje--donker {
	background: var(--navy) !important;
	border-left: 3px solid var(--accent-blauw) !important;
	padding: 2rem 2.5rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 2rem !important;
	flex-wrap: wrap !important;
	margin-top: 2rem !important;
}
.faq-contact-koptekst {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.faq-contact-titel {
	font-family: var(--font-head) !important;
	font-weight: 800 !important;
	font-size: clamp(1.3rem, 2vw, 1.8rem) !important;
	color: var(--wit) !important;
	line-height: 1.1 !important;
	margin: 0 !important;
	text-transform: uppercase !important;
}

/* ---- Cases blok in sectie-bouwer: erft exact de homepage-slider ---- */
.sectie-cases-blok { padding-block: clamp(2.5rem, 4.5vw, 5rem) !important; }
.sectie-cases-blok-kop { padding-bottom: clamp(2rem, 4vw, 3rem); }
/* wrap, overflow, slide en knoppen komen uit de homepage-regels */

/* ==========================================================================
   Sectie-bouwer v4.0.4
   ========================================================================== */

/* ---- Eyebrow in secties: altijd zichtbaar ---- */
.sectie-blok .hero-eyebrow,
.stm-tekst .hero-eyebrow,
.tekst-duo-links .hero-eyebrow {
	display: block !important;
	font-family: var(--font-head);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--accent-blauw) !important;
	margin: 0 0 1rem;
}

/* ---- Kopteksten: altijd op twee regels ---- */
.tekst-duo-links .sectie-titel--blok,
.tekst-titel-caps {
	max-width: 11ch !important;
	line-height: 1.05 !important;
	text-wrap: balance;
}
.stm-tekst .sectie-titel--blok,
.stm-titel-caps {
	max-width: 13ch !important;
	line-height: 1.05 !important;
	text-wrap: balance;
}

/* ---- Tekst + media: afbeelding smaller ---- */
.stm-grid {
	grid-template-columns: 1.15fr 0.85fr !important;
	gap: clamp(2.5rem, 5vw, 5rem) !important;
	align-items: center;
}
.stm--media-links .stm-grid {
	grid-template-columns: 0.85fr 1.15fr !important;
}
.stm-media img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	display: block;
}
@media (max-width: 860px) {
	.stm-grid,
	.stm--media-links .stm-grid { grid-template-columns: 1fr !important; }
}

/* ---- FAQ contact-kaartje: geen geel balkje, tekst twee regels ---- */
.faq-contact-kaartje {
	background: var(--navy) !important;
	border: 0 !important;
	border-left: 0 !important;
	padding: 2rem 2.25rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1.75rem !important;
	flex-wrap: wrap !important;
	margin-top: 2rem !important;
}
.faq-contact-koptekst { display: flex; flex-direction: column; gap: 0; }
.faq-contact-titel {
	font-family: var(--font-head) !important;
	font-weight: 800 !important;
	font-size: clamp(1.2rem, 1.8vw, 1.6rem) !important;
	color: var(--wit) !important;
	line-height: 1.12 !important;
	margin: 0 !important;
	text-transform: uppercase !important;
}

/* ---- Quote: aanhalingsteken dichterbij, tekst schuin ---- */
.quote-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 56rem;
}
.quote-teken {
	font-family: var(--font-head) !important;
	font-size: clamp(5rem, 9vw, 8rem) !important;
	line-height: 0.75 !important;
	color: var(--accent-blauw) !important;
	display: block !important;
	margin: 0 0 -0.9rem -0.1rem !important;
}
.quote-citaat {
	font-style: italic !important;
	font-family: var(--font-head);
	font-weight: 400;
	color: var(--navy);
	line-height: 1.45 !important;
	margin: 0 0 1.75rem !important;
	letter-spacing: -0.01em;
}
.quote-citaat--kort   { font-size: clamp(1.4rem, 2.6vw, 2.1rem) !important; }
.quote-citaat--middel { font-size: clamp(1.15rem, 2vw, 1.65rem) !important; }
.quote-citaat--lang   { font-size: clamp(1rem, 1.6vw, 1.3rem) !important; }

.quote-bron { display: flex; align-items: center; gap: 1rem; }
.quote-portret img {
	width: 52px; height: 52px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
.quote-persoon { display: flex; flex-direction: column; gap: 0.15rem; }
.quote-persoon strong {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--navy);
	font-size: 0.95rem;
}
.quote-persoon span { font-size: 0.85rem; color: var(--grijs-60); }

/* ---- Gerelateerde cases: kaarten zoals homepage ---- */
.ger-cases-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid rgba(15,32,68,0.1);
	border-left: 1px solid rgba(15,32,68,0.1);
}
.ger-cases-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ger-cases-grid--4 { grid-template-columns: repeat(2, 1fr); }

.ger-case-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 420px;
	background-color: var(--vlak);
	background-size: cover;
	background-position: center;
	text-decoration: none !important;
	border-right: 1px solid rgba(15,32,68,0.1);
	border-bottom: 1px solid rgba(15,32,68,0.1);
	overflow: hidden;
	transition: background-color 0.4s ease;
}
.ger-case-kaart--foto { background-color: var(--navy); }
.ger-case-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,32,68,0.9) 0%, rgba(15,32,68,0.4) 55%, transparent 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 0;
}
.ger-case-kaart--foto .ger-case-overlay { opacity: 1; }
.ger-case-inhoud { position: relative; z-index: 2; padding: 2rem; }
.ger-case-titel {
	font-family: var(--font-head);
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--navy);
	margin: 0.65rem 0 0.6rem;
}
.ger-case-kaart--foto .ger-case-titel { color: var(--wit); }
.ger-case-excerpt {
	font-size: 0.9rem;
	color: var(--grijs-60);
	line-height: 1.65;
	margin: 0 0 1.15rem;
}
.ger-case-kaart--foto .ger-case-excerpt { color: rgba(255,255,255,0.72); }

.ger-case-kaart:not(.ger-case-kaart--foto):hover { background-color: var(--navy); }
.ger-case-kaart:not(.ger-case-kaart--foto):hover .ger-case-overlay { opacity: 1; }
.ger-case-kaart:not(.ger-case-kaart--foto):hover .ger-case-titel,
.ger-case-kaart:not(.ger-case-kaart--foto):hover .cases-slide-link { color: var(--wit) !important; }
.ger-case-kaart:not(.ger-case-kaart--foto):hover .ger-case-excerpt { color: rgba(255,255,255,0.72) !important; }

.ger-cases-knop { margin-top: 2.5rem; }

@media (max-width: 860px) {
	.ger-cases-grid,
	.ger-cases-grid--2,
	.ger-cases-grid--4 { grid-template-columns: 1fr; }
	.ger-case-kaart { min-height: 340px; }
}

/* ---- Gerelateerde inzichten: genummerde lijst ---- */
.inzichten-lijst { display: flex; flex-direction: column; }
.inzicht-rij {
	display: grid;
	grid-template-columns: 3rem 1fr auto 2rem;
	gap: 1.5rem;
	align-items: center;
	padding: 1.6rem 0;
	border-bottom: 1px solid rgba(15,32,68,0.1);
	text-decoration: none !important;
	color: var(--zwart) !important;
	transition: background 0.3s ease, padding 0.3s ease;
}
.inzicht-rij:first-child { border-top: 1px solid rgba(15,32,68,0.1); }
.inzicht-rij:hover { background: rgba(255,190,0,0.05); padding-left: 1rem; }
.inzicht-rij:hover .inzicht-pijl { transform: translateX(5px); }

.inzicht-nr {
	font-family: var(--font-head);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--accent-blauw);
}
.inzicht-titel {
	font-family: var(--font-head);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	font-weight: 700;
	color: var(--navy);
	line-height: 1.3;
}
.inzicht-datum {
	font-size: 0.82rem;
	color: var(--grijs-60);
	white-space: nowrap;
}
.inzicht-pijl {
	font-size: 1.1rem;
	color: var(--navy);
	justify-self: end;
	transition: transform 0.3s ease;
}
@media (max-width: 760px) {
	.inzicht-rij { grid-template-columns: 2.5rem 1fr; }
	.inzicht-datum { grid-column: 2; font-size: 0.78rem; }
	.inzicht-pijl { display: none; }
}

/* ---- USP Font Awesome icoon: vaste maat, altijd zichtbaar ---- */
.usp-fa-icoon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 52px !important;
	height: 52px !important;
	min-width: 52px !important;
	min-height: 52px !important;
	background: rgba(255,190,0,0.12) !important;
	margin-bottom: 1.25rem !important;
}
.usp-fa-icoon i {
	font-size: 1.35rem !important;
	color: var(--accent-blauw) !important;
	line-height: 1 !important;
}

/* ==========================================================================
   Consistentie-update v4.0.5
   ========================================================================== */

/* ---- Alle sectie-kopteksten exact even groot ---- */
.sectie-titel-xl,
.sectie-blok .sectie-titel-xl,
.sectie-usp .sectie-titel-xl,
.sectie-cta-kop,
.resultaten-titel,
.logos-blok-titel {
	font-family: var(--font-head) !important;
	font-weight: 800 !important;
	font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
	line-height: 1.0 !important;
	letter-spacing: -0.03em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
}
/* Kleurvarianten per context blijven behouden */
.sectie-titel-xl { color: var(--navy) !important; }
.sectie-cta-kop  { color: var(--wit) !important; }
.sectie-logos--donker .logos-blok-titel { color: var(--wit) !important; }
.resultaten-paneel .resultaten-titel { color: var(--wit) !important; }

/* Twee-regel-beperking geldt alleen waar hij hoort */
.tekst-titel-caps { max-width: 11ch !important; text-wrap: balance; }
.stm-titel-caps   { max-width: 13ch !important; text-wrap: balance; }

/* ---- Tekst + media: 50/50 terug, afbeelding altijd vierkant ---- */
.stm-grid,
.stm--media-links .stm-grid {
	grid-template-columns: 1fr 1fr !important;
	gap: clamp(2.5rem, 5vw, 5rem) !important;
	align-items: center;
}
.stm-media {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.stm-media img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
}
@media (max-width: 860px) {
	.stm-grid,
	.stm--media-links .stm-grid { grid-template-columns: 1fr !important; }
}

/* ---- USP: kop-split zoals de aanpak-sectie ---- */
.sectie-usp .sectie-kop-split {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 2rem 4rem !important;
	align-items: end !important;
	margin-bottom: clamp(3rem, 5vw, 5rem) !important;
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.sectie-usp .sectie-sub-rechts {
	color: var(--grijs-60);
	font-size: clamp(0.95rem, 1.3vw, 1.05rem);
	line-height: 1.8;
	margin: 0;
	padding-top: 1rem;
}
@media (max-width: 760px) {
	.sectie-usp .sectie-kop-split { grid-template-columns: 1fr !important; gap: 1rem !important; }
}

/* ---- Cases-blok: identiek aan homepage-slider ---- */
.sectie-cases-blok .cases-slider-wrap {
	width: 90%;
	margin: 0 auto;
	position: relative;
}
.sectie-cases-blok .cases-slider-overflow { overflow: hidden; }
.sectie-cases-blok .cases-slider-track {
	display: flex;
	gap: 2rem;
	transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
	will-change: transform;
}
.sectie-cases-blok .cases-slide {
	flex-shrink: 0;
	width: 100%;
	min-width: 100%;
	height: clamp(480px, 65vh, 720px);
}
/* Navigatieknoppen: rechtsonder IN de kaart */
.sectie-cases-blok .cases-slider-btn {
	position: absolute;
	bottom: clamp(1.5rem, 3vw, 2.5rem);
	width: 52px;
	height: 52px;
	background: var(--wit);
	border: 0;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	transition: background var(--overgang);
}
.sectie-cases-blok .cases-slider-prev { right: calc(clamp(1.5rem, 3vw, 2.5rem) + 52px + 4px); }
.sectie-cases-blok .cases-slider-next { right: clamp(1.5rem, 3vw, 2.5rem); }
.sectie-cases-blok .cases-slider-btn:hover { background: var(--accent-blauw); }
.sectie-cases-blok .cases-slider-btn svg { width: 20px; height: 20px; color: var(--navy); }

@media (max-width: 760px) {
	.sectie-cases-blok .cases-slider-wrap { width: 100%; }
	.sectie-cases-blok .cases-slide { height: clamp(360px, 75vw, 520px); }
}

/* ==========================================================================
   Fixes v4.0.6
   ========================================================================== */

/* ---- FAQ-kaartje: normale tekst, geen caps ---- */
.faq-contact-titel {
	font-family: var(--font-body) !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	color: rgba(255, 255, 255, 0.85) !important;
	line-height: 1.6 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 0 !important;
	max-width: 22rem;
}

/* ---- Tekst + media: kleinere afbeelding, meer lucht onder de koptekst ---- */
.stm-grid,
.stm--media-links .stm-grid {
	grid-template-columns: 1fr 1fr !important;
	gap: clamp(2.5rem, 5vw, 5rem) !important;
	align-items: center !important;
}

/* Vierkant, maar begrensd zodat hij niet overheerst */
.stm-media {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	justify-self: center;
}
.stm-media img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
}

/* Ruimte onder de koptekst terug */
.stm-tekst .sectie-titel-xl,
.stm-titel-caps {
	margin-bottom: 1.5rem !important;
}
.stm-body { margin-bottom: 0; }
.stm-body p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.stm-grid,
	.stm--media-links .stm-grid { grid-template-columns: 1fr !important; }
	.stm-media { max-width: 100%; justify-self: stretch; }
}

/* ==========================================================================
   Fixes v4.0.8
   ========================================================================== */

/* ---- Tekst + media: exact 50/50, gelijke marges links en rechts ---- */
.stm-grid,
.stm--media-links .stm-grid {
	grid-template-columns: 1fr 1fr !important;
	gap: clamp(2rem, 4vw, 4rem) !important;
	align-items: center !important;
}
/* Afbeelding vult de hele kolom: rechterrand lijnt uit met de container-padding,
   net als de linkerrand van de tekst. */
.stm-media {
	width: 100% !important;
	max-width: none !important;
	justify-self: stretch !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.stm-media img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
}
@media (max-width: 860px) {
	.stm-grid,
	.stm--media-links .stm-grid { grid-template-columns: 1fr !important; }
	.stm-media { aspect-ratio: 4 / 3; }
}

/* ---- Cases-kaarten: witruimte tussen de kaarten ---- */

/* Archief /cases/ */
.cases-kaarten-grid {
	gap: 1.5rem !important;
	border-top: 0 !important;
	border-left: 0 !important;
}
.case-kaart {
	border-right: 0 !important;
	border-bottom: 0 !important;
}

/* Gerelateerde cases in de blokkenbouwer */
.ger-cases-grid,
.ger-cases-grid--2,
.ger-cases-grid--4 {
	gap: 1.5rem !important;
	border-top: 0 !important;
	border-left: 0 !important;
}
.ger-case-kaart {
	border-right: 0 !important;
	border-bottom: 0 !important;
}

@media (max-width: 760px) {
	.cases-kaarten-grid,
	.ger-cases-grid,
	.ger-cases-grid--2,
	.ger-cases-grid--4 { gap: 1rem !important; }
}

/* Tekst + media: rechthoekig i.p.v. vierkant, breedte blijft 50% */
.stm-media { aspect-ratio: 4 / 3 !important; }
@media (max-width: 860px) {
	.stm-media { aspect-ratio: 3 / 2 !important; }
}

/* ==========================================================================
   v4.1.0 — Mobiel menu, Over-sectie, Diensten-overzicht, header-knop
   ========================================================================== */

/* ---- 1. Mobiele menuknop: altijd zichtbaar (was wit op wit) ---- */
.nav-menuknop,
#navbar:not(.scrolled) .nav-menuknop {
	color: var(--navy) !important;
	border-color: rgba(15, 32, 68, 0.35) !important;
	background: transparent !important;
}
.nav-menuknop:hover,
#navbar:not(.scrolled) .nav-menuknop:hover {
	background: rgba(15, 32, 68, 0.06) !important;
	border-color: var(--navy) !important;
}
#navbar.scrolled .nav-menuknop {
	color: var(--navy) !important;
	border-color: rgba(15, 32, 68, 0.35) !important;
}

/* ---- 4. Contactknop in de header bij scrollen: kleur van de footer ---- */
#navbar.scrolled .btn--nav {
	background: var(--zwart) !important;
	color: var(--wit) !important;
}
#navbar.scrolled .btn--nav .btn-label,
#navbar.scrolled .btn--nav .btn-pijl {
	color: var(--wit) !important;
}
#navbar.scrolled .btn--nav .btn-icoon {
	background: var(--accent-blauw) !important;
}
#navbar.scrolled .btn--nav .btn-icoon .btn-pijl {
	color: var(--zwart) !important;
}

/* ---- 2. Over Jaco verwijzing op de homepage ---- */
.over-verwijzing {
	background: var(--vlak);
	padding: clamp(5rem, 9vw, 9rem) 0;
}
.over-verwijzing-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}
.over-verwijzing-media {
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.over-verwijzing-media img,
.over-verwijzing-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.over-verwijzing-placeholder { background: var(--donkergrijs); }

.over-verwijzing-titel {
	margin-bottom: 1.5rem !important;
	max-width: 12ch;
	text-wrap: balance;
}
.over-verwijzing-body {
	font-size: 1.05rem;
	color: var(--grijs-60);
	line-height: 1.8;
	margin: 0 0 2rem;
	max-width: 34rem;
}
.over-verwijzing-knoppen {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
@media (max-width: 860px) {
	.over-verwijzing-grid { grid-template-columns: 1fr; }
	.over-verwijzing-media { aspect-ratio: 4 / 3; }
	.over-verwijzing-titel { max-width: none; }
}

/* ---- 3. Diensten-overzichtspagina ---- */
.diensten-intro {
	background: var(--wit);
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
.diensten-overzicht {
	background: var(--wit);
	padding: clamp(2rem, 4vw, 3rem) 0 clamp(5rem, 9vw, 9rem);
}
.diensten-overzicht-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}
.dienst-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 380px;
	background-color: var(--vlak);
	background-size: cover;
	background-position: center;
	text-decoration: none !important;
	overflow: hidden;
	transition: background-color 0.4s ease;
}
.dienst-kaart--foto { background-color: var(--navy); }
.dienst-kaart-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,32,68,0.92) 0%, rgba(15,32,68,0.45) 55%, rgba(15,32,68,0.08) 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 0;
}
.dienst-kaart--foto .dienst-kaart-overlay { opacity: 1; }
.dienst-kaart-inhoud {
	position: relative;
	z-index: 2;
	padding: clamp(1.75rem, 3vw, 2.5rem);
}
.dienst-kaart-titel {
	font-family: var(--font-head);
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--navy);
	margin: 0 0 0.75rem;
}
.dienst-kaart--foto .dienst-kaart-titel { color: var(--wit); }
.dienst-kaart-excerpt {
	font-size: 0.95rem;
	color: var(--grijs-60);
	line-height: 1.7;
	margin: 0 0 1.25rem;
	max-width: 34rem;
}
.dienst-kaart--foto .dienst-kaart-excerpt { color: rgba(255,255,255,0.75); }
.dienst-kaart-link {
	font-family: var(--font-head);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--navy);
	transition: color 0.35s ease;
}
.dienst-kaart--foto .dienst-kaart-link { color: var(--wit); }

.dienst-kaart:not(.dienst-kaart--foto):hover { background-color: var(--navy); }
.dienst-kaart:not(.dienst-kaart--foto):hover .dienst-kaart-overlay { opacity: 1; }
.dienst-kaart:not(.dienst-kaart--foto):hover .dienst-kaart-titel,
.dienst-kaart:not(.dienst-kaart--foto):hover .dienst-kaart-link { color: var(--wit) !important; }
.dienst-kaart:not(.dienst-kaart--foto):hover .dienst-kaart-excerpt { color: rgba(255,255,255,0.75) !important; }
.dienst-kaart:hover .dienst-kaart-link { color: var(--accent-blauw) !important; }

@media (max-width: 760px) {
	.diensten-overzicht-grid { grid-template-columns: 1fr; gap: 1rem; }
	.dienst-kaart { min-height: 300px; }
}

/* ---- 5. Taxonomie-checkboxes in de sectiebouwer (admin) ---- */
.jaco-tax-lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	padding: 0.5rem 0;
}
.jaco-tax-optie {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
	cursor: pointer;
}

/* ==========================================================================
   v4.1.2 — Homepage-ruimtes gelijk aan blokkenbouwer + over-foto hoogte
   ========================================================================== */

/* ---- Homepage: dezelfde sectie-ruimte als de blokkenbouwer ---- */
.intro-tekst,
.expertise,
.video-sectie,
.ervaring,
.aanpak,
.over-verwijzing,
.cases-slider-sectie,
.cases-archief,
.diensten-intro,
.diensten-overzicht {
	padding-top: clamp(2.5rem, 4.5vw, 5rem) !important;
	padding-bottom: clamp(2.5rem, 4.5vw, 5rem) !important;
}

/* Diensten: kop erboven, blokken sluiten aan */
.expertise { padding-bottom: 0 !important; }

/* CTA onderaan: bovenmarge gelijk, geen dubbele ruimte met de footer */
.cta-eind .cta-inhoud-wrap {
	padding-top: clamp(2.5rem, 4.5vw, 5rem) !important;
	padding-bottom: clamp(2.5rem, 4.5vw, 5rem) !important;
}

/* ---- Over Jaco: foto even hoog als bij tekst+afbeelding (4:3) ---- */
.over-verwijzing-media {
	aspect-ratio: 4 / 3 !important;
}
.over-verwijzing-media img,
.over-verwijzing-placeholder {
	object-position: center 25%;
}
@media (max-width: 860px) {
	.over-verwijzing-media { aspect-ratio: 3 / 2 !important; }
}

/* Footer-menu's via wp_nav_menu: zelfde opmaak als de handmatige lijsten */
.footer-col ul.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-col .footer-menu li { margin: 0; }
.footer-col .footer-menu li.menu-item-has-children > .sub-menu { display: none; }

/* Diensten-blokken op de homepage: ruimte eronder */
.expertise { padding-bottom: clamp(2.5rem, 4.5vw, 5rem) !important; }

/* Juridische pagina's: "laatst bijgewerkt"-regel */
.pagina-bijgewerkt {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(15, 32, 68, 0.1);
	font-size: 0.85rem;
	color: var(--grijs-60);
}

/* ==========================================================================
   Cookiebanner (v4.2.0)
   ========================================================================== */

.cookiebanner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--zwart);
	border-top: 3px solid var(--accent-blauw);
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1);
	max-height: 92vh;
	overflow-y: auto;
}
.cookiebanner.is-zichtbaar { transform: translateY(0); }
.cookiebanner[hidden] { display: none; }

.cookiebanner-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
}

.cookiebanner-titel {
	font-family: var(--font-head);
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	font-weight: 800;
	color: var(--wit);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0 0 0.75rem;
}
.cookiebanner-tekst {
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 1.5rem;
	max-width: 68ch;
}
.cookiebanner-tekst a {
	color: var(--accent-blauw);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cookiebanner-tekst a:hover { color: var(--accent-blauw-licht); }

/* Knoppen: accepteren en weigeren even prominent (AP-eis) */
.cookiebanner-knoppen {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}
.cookie-btn {
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.85rem 1.75rem;
	border-radius: 0;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.cookie-btn--accepteren {
	background: var(--accent-blauw);
	color: var(--zwart);
	border-color: var(--accent-blauw);
}
.cookie-btn--accepteren:hover { background: var(--accent-blauw-licht); border-color: var(--accent-blauw-licht); }

/* Weigeren: zelfde formaat en gewicht, alleen ander vlak */
.cookie-btn--weigeren {
	background: transparent;
	color: var(--wit);
	border-color: rgba(255, 255, 255, 0.5);
}
.cookie-btn--weigeren:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--wit); }

.cookie-btn--instellen {
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 4px;
	padding-inline: 0.75rem;
}
.cookie-btn--instellen:hover { color: var(--wit); }

.cookie-btn:focus-visible {
	outline: 3px solid var(--accent-blauw);
	outline-offset: 3px;
}

/* Voorkeurenpaneel */
.cookie-categorie {
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cookie-categorie:first-of-type { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.cookie-categorie-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.4rem;
}
.cookie-categorie-naam {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wit);
}
.cookie-categorie-vast {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-blauw);
}
.cookie-categorie-tekst {
	font-size: 0.88rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	max-width: 68ch;
}

/* Schakelaar */
.cookie-schakelaar {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
}
.cookie-schakelaar input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.cookie-schakelaar-vlak {
	position: relative;
	width: 44px;
	height: 24px;
	background: rgba(255, 255, 255, 0.2);
	flex: none;
	transition: background 0.3s ease;
}
.cookie-schakelaar-vlak::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: var(--wit);
	transition: transform 0.3s ease;
}
.cookie-schakelaar input:checked + .cookie-schakelaar-vlak { background: var(--accent-blauw); }
.cookie-schakelaar input:checked + .cookie-schakelaar-vlak::after {
	transform: translateX(20px);
	background: var(--zwart);
}
.cookie-schakelaar input:focus-visible + .cookie-schakelaar-vlak {
	outline: 3px solid var(--accent-blauw);
	outline-offset: 3px;
}

.cookiebanner-voorkeuren .cookiebanner-knoppen { margin-top: 1.5rem; }

/* Heropen-knop in de footer: ziet eruit als de andere links */
.cookie-heropen {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	padding-bottom: 3px;
	transition: color 0.35s ease;
}
.cookie-heropen::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1.5px;
	background: currentColor;
	transition: width 0.35s cubic-bezier(0.77, 0, 0.18, 1);
}
.cookie-heropen:hover::after { width: 100%; }

@media (max-width: 620px) {
	.cookiebanner-knoppen { flex-direction: column; align-items: stretch; }
	.cookie-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.cookiebanner { transition: none; }
	.cookie-schakelaar-vlak,
	.cookie-schakelaar-vlak::after { transition: none; }
}

/* Footer: ruimte onder de tagline */
.footer-tagline { margin-bottom: 2rem !important; }

/* Footer: creatortag */
.footer-creator {
	color: rgba(255, 255, 255, 0.4);
	white-space: nowrap;
}
.footer-creator a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	position: relative;
	padding-bottom: 3px;
	transition: color 0.35s ease;
}
.footer-creator a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width 0.35s cubic-bezier(0.77, 0, 0.18, 1);
}
.footer-creator a:hover { color: var(--accent-blauw); }
.footer-creator a:hover::after { width: 100%; }

@media (max-width: 760px) {
	.footer-creator { white-space: normal; }
}

/* Homepage-hero: zelfde maat en gewicht als de subhero op andere pagina's */
.hero-titel {
	font-size: clamp(2.8rem, 5.5vw, 5.5rem) !important;
	font-weight: 800 !important;
	line-height: 1.0 !important;
}

/* ==========================================================================
   Statistieken homepage: geschikt voor langere teksten (v4.2.3)
   ========================================================================== */

.intro-stats {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) !important;
	align-items: stretch !important;
}

/* Elke stat is een kolom met het label onderaan uitgelijnd */
.intro-stat {
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	padding: 0 !important;
	border: 0 !important;
	min-width: 0; /* laat lange woorden netjes afbreken */
}

/* Getal/tekst: kleiner en strakker zodat "BBV Specialist" past */
.intro-stat-getal {
	display: block !important;
	font-family: var(--font-head) !important;
	font-size: clamp(1.9rem, 3.2vw, 3.2rem) !important;
	font-weight: 800 !important;
	color: var(--navy) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.035em !important;
	margin: 0 0 0.85rem !important;
	text-wrap: balance;
	hyphens: none;
	overflow-wrap: break-word;
}

/* Label: altijd onderaan, dunne lijn erboven voor rust */
.intro-stat-label {
	display: block !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.11em !important;
	line-height: 1.5 !important;
	color: var(--grijs-60) !important;
	margin: 0 !important;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(15, 32, 68, 0.12);
}

@media (max-width: 1100px) {
	.intro-stat-getal { font-size: clamp(1.7rem, 3.4vw, 2.4rem) !important; }
}
@media (max-width: 760px) {
	.intro-stats { grid-template-columns: 1fr 1fr !important; gap: 1.75rem 1.25rem !important; }
	.intro-stat-getal { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
	.intro-stat-label { font-size: 0.64rem !important; }
}

/* Statistieken: geen lijn boven het label, compactere ruimte */
.intro-stat-label {
	border-top: 0 !important;
	padding-top: 0 !important;
}
.intro-stat-getal { margin-bottom: 0.5rem !important; }
.intro-stats { gap: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem) !important; }

/* Intro/statistieken-sectie: meer lucht boven en onder */
.intro-tekst {
	padding-top: clamp(4rem, 7vw, 7.5rem) !important;
	padding-bottom: clamp(4rem, 7vw, 7.5rem) !important;
}

/* Intro/statistieken-sectie: extra lucht boven en onder */
.intro-tekst {
	padding-top: clamp(4rem, 7vw, 8rem) !important;
	padding-bottom: clamp(4rem, 7vw, 8rem) !important;
}

/* ==========================================================================
   Cases: duur-label en opdrachtgeverlogo (v4.3.0)
   ========================================================================== */

/* Kaarten moeten de badges kunnen positioneren */
.case-kaart,
.dienst-kaart,
.ger-case-kaart { position: relative; }

/* Geel label linksboven, tegen de rand aan */
.case-kaart-duur {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	background: var(--accent-blauw);
	color: var(--zwart);
	font-family: var(--font-head);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.6rem 1.1rem;
	line-height: 1;
	white-space: nowrap;
}

/* Logo rechtsboven */
.case-kaart-logo {
	position: absolute;
	top: clamp(1.25rem, 2vw, 1.75rem);
	right: clamp(1.25rem, 2vw, 1.75rem);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	max-width: 40%;
	pointer-events: none;
}
.case-kaart-logo img {
	max-height: 42px;
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}
/* Op een lichte kaart zonder foto: logo iets dimmen zodat het niet schreeuwt */
.case-kaart:not(.case-kaart--foto) .case-kaart-logo img,
.dienst-kaart:not(.dienst-kaart--foto) .case-kaart-logo img {
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.4s ease, opacity 0.4s ease;
}
.case-kaart:not(.case-kaart--foto):hover .case-kaart-logo img,
.dienst-kaart:not(.dienst-kaart--foto):hover .case-kaart-logo img {
	filter: none;
	opacity: 1;
}

/* Ruimte maken zodat de titel niet onder het logo valt */
.case-kaart-inhoud,
.case-gerelateerd-grid .dienst-kaart-inhoud { padding-top: 4.5rem; }

@media (max-width: 620px) {
	.case-kaart-duur { font-size: 0.62rem; padding: 0.5rem 0.85rem; }
	.case-kaart-logo img { max-height: 32px; }
}

/* ---- Single case: hero met logo ---- */
.case-hero-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}
.case-hero-meta .sectie-eyebrow { margin-bottom: 0 !important; }
.case-hero-duur {
	background: var(--accent-blauw);
	color: var(--zwart);
	font-family: var(--font-head);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.4rem 0.85rem;
	line-height: 1;
}
.case-hero-rechts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}
.case-hero-logo {
	display: block;
	max-width: 220px;
}
.case-hero-logo img {
	width: 100%;
	height: auto;
	max-height: 72px;
	object-fit: contain;
	object-position: left center;
	display: block;
	/* Logo's zijn wit aangeleverd: op de lichte hero omkleuren naar navy */
	filter: brightness(0) saturate(100%) invert(11%) sepia(24%) saturate(2618%) hue-rotate(197deg) brightness(94%) contrast(97%);
}

/* ---- Single case: gerelateerde cases als kaarten ---- */
.case-gerelateerd {
	background: var(--wit);
	padding: clamp(2.5rem, 4.5vw, 5rem) 0;
}
.case-gerelateerd-grid {
	grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 900px) {
	.case-gerelateerd-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
	.case-gerelateerd-grid { grid-template-columns: 1fr !important; }
	.case-hero-logo { max-width: 160px; }
}

/* Label iets lager: begint waar hij nu eindigt */
.case-kaart-duur {
	top: clamp(1rem, 2vw, 1.5rem) !important;
}
/* Gerelateerde cases inhoud: ruimte voor label */
.ger-case-inhoud { padding-top: 4rem; }

/* ==========================================================================
   v4.3.2 — Meer ruimte, logo zonder filter, slider-logo wit
   ========================================================================== */

/* Meer ruimte tussen secties */
.sectie-blok { padding-block: clamp(3.5rem, 6vw, 7rem) !important; }
.sectie-blok + .sectie-blok { padding-top: clamp(3rem, 5vw, 6rem) !important; }
.cases-archief,
.diensten-overzicht,
.case-gerelateerd,
.sectie-ger-cases,
.sectie-ger-inzichten {
	padding-top: clamp(3.5rem, 6vw, 7rem) !important;
	padding-bottom: clamp(3.5rem, 6vw, 7rem) !important;
}

/* Cases-kaarten grid: meer ademruimte tussen kaarten */
.cases-kaarten-grid,
.ger-cases-grid,
.ger-cases-grid--2,
.ger-cases-grid--4,
.case-gerelateerd-grid { gap: 2rem !important; }

/* Logo op kaarten: eigen kleur, geen filter */
.case-kaart-logo img,
.ger-case-kaart .case-kaart-logo img,
.case-gerelateerd-grid .case-kaart-logo img {
	filter: none !important;
	opacity: 1 !important;
}
/* Op lichte kaarten wel dimmen */
.case-kaart:not(.case-kaart--foto) .case-kaart-logo img,
.dienst-kaart:not(.dienst-kaart--foto) .case-kaart-logo img {
	filter: grayscale(1) !important;
	opacity: 0.55 !important;
}
.case-kaart:not(.case-kaart--foto):hover .case-kaart-logo img,
.dienst-kaart:not(.dienst-kaart--foto):hover .case-kaart-logo img {
	filter: none !important;
	opacity: 1 !important;
}

/* Logo op de slider (donkere achtergrond): wit */
.case-kaart-logo--slider img,
.cases-slide .case-kaart-logo img {
	filter: brightness(0) invert(1) !important;
	opacity: 0.9 !important;
}


/* ==========================================================================
   v4.3.3 — Homepage ruimte, quote groter, case-hero logo fix, cookiebanner
   ========================================================================== */

/* ---- Homepage: meer ruimte tussen secties ---- */
.intro-tekst,
.over-verwijzing,
.cases-slider-sectie,
.video-sectie,
.aanpak,
.cta-eind {
	padding-top: clamp(5rem, 8vw, 10rem) !important;
	padding-bottom: clamp(5rem, 8vw, 10rem) !important;
}
.expertise {
	padding-top: clamp(5rem, 8vw, 10rem) !important;
	padding-bottom: clamp(5rem, 8vw, 10rem) !important;
}

/* ---- Quote: groter en breder ---- */
.sectie-quote { background: var(--vlak); }
.sectie-quote .container { max-width: 960px !important; }
.quote-inner { max-width: 100% !important; padding: clamp(2rem, 4vw, 4rem) 0; }
.quote-teken {
	font-size: clamp(6rem, 12vw, 11rem) !important;
	margin-bottom: -1.5rem !important;
}
.quote-citaat--kort   { font-size: clamp(1.6rem, 3vw, 2.6rem) !important; }
.quote-citaat--middel { font-size: clamp(1.3rem, 2.4vw, 2rem) !important; }
.quote-citaat--lang   { font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important; }

/* ---- Case-hero logo: geen filter ---- */
.case-hero-logo img {
	filter: none !important;
}

/* ==========================================================================
   Cookiebanner — nieuw design (wit, Cookiebot-stijl) v4.3.3
   ========================================================================== */

/* Verberg de oude dark-style regels */
.cookiebanner { all: unset; }

.cookiebanner {
	position: fixed !important;
	bottom: 1.5rem !important;
	left: 50% !important;
	transform: translateX(-50%) translateY(120%) !important;
	width: min(780px, calc(100vw - 2rem)) !important;
	z-index: 999999 !important;
	background: #ffffff !important;
	border: 1px solid rgba(0,0,0,0.1) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
	transition: transform 0.4s cubic-bezier(0.77,0,0.18,1), opacity 0.4s ease !important;
	opacity: 0 !important;
	overflow: hidden !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
}
.cookiebanner.is-zichtbaar {
	transform: translateX(-50%) translateY(0) !important;
	opacity: 1 !important;
}
.cookiebanner[hidden] { display: none !important; }

/* Gele accentlijn bovenaan */
.cookiebanner::before {
	content: '';
	display: block;
	height: 4px;
	background: #FFBE00;
}

/* Stap-container */
.cookiebanner-melding,
.cookiebanner-voorkeuren { padding: 1.5rem 1.75rem 1.25rem; }

/* Logo + titel + tekst in één rij */
.cookiebanner-melding {
	display: grid;
	grid-template-columns: 36px 1fr;
	grid-template-rows: auto auto;
	column-gap: 1rem;
	row-gap: 0.75rem;
}
.cookiebanner-logo {
	grid-column: 1;
	grid-row: 1 / 3;
	display: flex;
	align-items: flex-start;
	padding-top: 3px;
}
.cookiebanner-inhoud { grid-column: 2; grid-row: 1; }
.cookiebanner-acties {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
}

/* Voorkeuren: normaal layout */
.cookiebanner-voorkeuren .cookiebanner-inhoud { margin-bottom: 1rem; }
.cookiebanner-voorkeuren .cookiebanner-acties {
	margin-top: 1.25rem;
	border-top: 1px solid rgba(0,0,0,0.08);
	padding-top: 1.25rem;
}

.cookiebanner-titel {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #111827 !important;
	margin: 0 0 0.4rem !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.cookiebanner-tekst {
	font-size: 0.88rem !important;
	line-height: 1.6 !important;
	color: #6b7280 !important;
	margin: 0 !important;
}
.cookiebanner-tekst a { color: #0f2044 !important; text-decoration: underline !important; }

/* Knoppen: accepteren groot + geel, rest klein en subtiel */
.cookie-btn {
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	padding: 0.65rem 1.25rem !important;
	border-radius: 6px !important;
	border: 1.5px solid transparent !important;
	cursor: pointer !important;
	transition: background 0.2s ease, color 0.2s ease !important;
	white-space: nowrap !important;
}
/* Accepteren: prominent geel */
.cookie-btn--accepteren {
	background: #FFBE00 !important;
	color: #111827 !important;
	border-color: #FFBE00 !important;
	font-size: 0.88rem !important;
	padding: 0.7rem 1.5rem !important;
}
.cookie-btn--accepteren:hover { background: #FFD54F !important; border-color: #FFD54F !important; }

/* Instellingen: omlijnd, subtiel */
.cookie-btn--instellen {
	background: transparent !important;
	color: #4b5563 !important;
	border-color: rgba(0,0,0,0.2) !important;
}
.cookie-btn--instellen:hover { border-color: #0f2044 !important; color: #0f2044 !important; }

/* Weigeren: tekstlink-stijl, bewust minder prominent (visuele hiërarchie) */
.cookie-btn--weigeren {
	background: transparent !important;
	color: #9ca3af !important;
	border-color: transparent !important;
	padding-inline: 0.5rem !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	font-weight: 500 !important;
}
.cookie-btn--weigeren:hover { color: #4b5563 !important; }

/* Categorieën */
.cookie-categorie {
	padding: 0.85rem 0 !important;
	border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}
.cookie-categorie:last-of-type { border-bottom: 0 !important; }
.cookie-categorie-kop {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 0.25rem !important;
}
.cookie-categorie-naam {
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	color: #111827 !important;
}
.cookie-categorie-vast {
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: #FFBE00 !important;
}
.cookie-categorie-tekst {
	font-size: 0.83rem !important;
	line-height: 1.55 !important;
	color: #6b7280 !important;
	margin: 0 !important;
}

/* Schakelaar — lichte stijl */
.cookie-schakelaar-vlak {
	background: rgba(0,0,0,0.15) !important;
	border-radius: 99px !important;
}
.cookie-schakelaar-vlak::after { border-radius: 50% !important; }
.cookie-schakelaar input:checked + .cookie-schakelaar-vlak {
	background: #0f2044 !important;
}
.cookie-schakelaar input:checked + .cookie-schakelaar-vlak::after {
	background: #fff !important;
}

/* Heropen-knop in footer */
.cookie-heropen { color: inherit !important; }

@media (max-width: 600px) {
	.cookiebanner-melding {
		grid-template-columns: 1fr !important;
	}
	.cookiebanner-logo { display: none !important; }
	.cookiebanner-inhoud,
	.cookiebanner-acties { grid-column: 1 !important; }
	.cookiebanner-acties { flex-direction: column !important; align-items: stretch !important; }
	.cookie-btn { width: 100% !important; text-align: center !important; }
}

@media (prefers-reduced-motion: reduce) {
	.cookiebanner { transition: none !important; }
}

/* v4.3.4 */
.site-footer { background: var(--navy-licht) !important; }

.quote-citaat--kort   { font-size: clamp(1.9rem, 3.5vw, 3rem) !important; }
.quote-citaat--middel { font-size: clamp(1.5rem, 2.8vw, 2.4rem) !important; }
.quote-citaat--lang   { font-size: clamp(1.2rem, 2vw, 1.75rem) !important; }

.aanpak { padding-bottom: clamp(2rem, 3vw, 3.5rem) !important; }
.intro-tekst { padding-top: clamp(6rem, 10vw, 12rem) !important; }

/* v4.3.5 */
/* Footer: zelfde kleur als de scrolled header-knop (#111827) */
.site-footer { background: var(--zwart) !important; }

/* Dropdown: gelijke ruimte boven én onder elk item */
.nav-menu .sub-menu li a {
	padding: 0.6rem 0.95rem !important;
	line-height: 1.4 !important;
}
.nav-menu .sub-menu { padding: 0.4rem 0 !important; }