/* =========================================================
   Essence Pillar — hoofdstylesheet
   Design tokens staan in style.css (:root).
   ========================================================= */

/* ---------------------------------------------------------
   Paginatransitie-overlay (Barba, zwarte fade)
   --------------------------------------------------------- */
.transition {
	z-index: 100;
	pointer-events: none;
	position: fixed;
	inset: 0;
	overflow: clip;
}

.transition__dark {
	opacity: 0;
	background-color: var(--c-black);
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	will-change: opacity;
}

/* ---------------------------------------------------------
   Dynamische achtergrondcanvas (scroll-bg.js)
   --------------------------------------------------------- */
.bg-canvas {
	position: fixed;
	inset: 0;
	z-index: -2;
	background-color: var(--bg);
	/* Geen CSS-transitie: scroll-bg.js zet de kleur per frame,
	   de vloeiendheid komt uit de scrollpositie. */
	pointer-events: none;
}

/* Vaste pagina-achtergrondfoto (de hero). De opacity is scroll-gestuurd
   (scroll-bg.js): de foto met groene overlay is bovenaan de achtergrond en
   vloeit tijdens het scrollen over naar de beige canvaskleur, precies zoals
   elk ander blok de achtergrond wisselt. Ligt boven de canvas (-1 > -2) en
   achter de content. */
.bg-photo {
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: var(--bg-photo-opacity, 0);
	pointer-events: none;
	will-change: opacity;
	transform: translateZ(0);
	backface-visibility: hidden;
}

.bg-photo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Groene wash over de foto (voorheen .hero__mask). */
.bg-photo__mask {
	position: absolute;
	inset: 0;
	background: var(--c-green);
	opacity: 0.5;
}

/* Donkere band bovenaan zodat de lichte navigatie leesbaar blijft
   (voorheen .hero__gradient-top). Leeft alleen nog in de meeschuivende
   .hero-enter-backdrop tijdens paginatransities; buiten transities doet
   .nav::after dit werk (vast aan de nav, ook boven de stapelkaarten). */
.bg-photo__top {
	position: absolute;
	inset: 0 0 auto;
	height: 28%;
	background: linear-gradient(to bottom, rgba(22, 30, 27, 0.7), rgba(22, 30, 27, 0));
}

/* Tijdelijke hero-achtergrond tijdens een paginatransitie: dezelfde opbouw als
   .bg-photo, maar absoluut in de inkomende (of vertrekkende) container, zodat de
   foto met de slide meebeweegt in plaats van als vaste laag stil te staan.
   transitions.js voegt deze toe in beforeEnter en haalt hem in afterEnter weg,
   zodra de vaste .bg-photo-laag dezelfde foto toont (naadloze wissel, geen pop).
   De binnenelementen hergebruiken .bg-photo__img/__mask/__top. */
.hero-enter-backdrop {
	position: absolute;
	inset: 0 0 auto 0;
	height: 100svh;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

main[data-barba="container"] {
	position: relative;
	z-index: 1;
}

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

.section {
	position: relative;
	padding-block: clamp(4rem, 9vw, 8.5rem);
}

.section--marge-klein { padding-block: clamp(2rem, 4.5vw, 4rem); }
.section--marge-geen { padding-block: 0; }

.section--quote { padding-block: clamp(5rem, 12vw, 11rem); }

/* Tekstvlakken (semi-transparant, afgerond) */
.tekstbox {
	border-radius: 16px;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.tekstbox--wit { background: rgba(255, 255, 255, 0.7); }
.tekstbox--beige { background: rgba(247, 243, 237, 0.7); }

.rich-text > *:last-child { margin-bottom: 0; }
.rich-text ul { padding-left: 1.4em; }
.rich-text li { margin-bottom: 0.35em; }

/* =========================================================
   OSMO NAVIGATIE (huisstijl Essence Pillar)
   ========================================================= */
:root {
	/* Fallback zonder JS; nav.js meet de echte hoogte (navbalk + dropdown),
	   want de fotokaarten schalen mee met de schermbreedte (Figma: 400px). */
	--nav-bg-height: calc(212px + 2em + 3em + 2.5em + 63px);
	--color-dark: var(--c-text);
	--bg-rgb: 247, 243, 237;
}

.nav {
	z-index: 90;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transition: color var(--duration-fast) var(--cubic-default);
}

/* Ingelogd: de vaste navigatie hangt onder de WordPress-adminbalk. */
body.admin-bar .nav { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .nav { top: 46px; }
}

/* Navigatie kleurt donker op lichte canvas-secties (scroll-bg.js). */
body.header-dark .nav { color: var(--color-dark); }

/* Zodra de header donker kleurt (voorbij de hero) krijgt hij een lichte
   tint van de live canvaskleur + blur, zodat menu en logo leesbaar blijven
   over foto's en tekst die eronderdoor scrollen. */
.nav::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(var(--bg-rgb), 0);
	transition: background var(--duration-fast) ease, backdrop-filter var(--duration-fast) ease, opacity var(--duration-fast) ease;
	pointer-events: none;
}

body.header-dark .nav::before {
	background: rgba(var(--bg-rgb), 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Donkere leesbaarheidsband bovenaan zolang de header licht is: over de
   herofoto, maar ook over de stapelkaarten die schermvullend over de foto
   schuiven. Zit aan de nav vast zodat hij overal meedoet waar de header
   licht is; de vaste fotolaag heeft daarom zelf geen band meer (alleen de
   transitie-backdrop nog, want tijdens een transitie gaat deze band uit). */
.nav::after {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 28vh;
	height: 28svh;
	background: linear-gradient(to bottom, rgba(22, 30, 27, 0.7), rgba(22, 30, 27, 0));
	opacity: 0;
	transition: opacity var(--duration-fast) ease;
	pointer-events: none;
	z-index: -1;
}

body:not(.header-dark) .nav::after {
	opacity: 1;
}

/* Tijdens een Barba-paginatransitie de header-scrim (kleur + blur) in één keer
   laten uitvetten. Anders blijft het achtergrondje van de vorige pagina hangen
   terwijl de nieuwe pagina al binnenschuift. Na de transitie (is-transitioning
   weg) bepaalt header-dark weer of de scrim voor de nieuwe pagina terugkomt.
   backdrop-filter gaat hier hard uit (niet alleen opacity): de blur elke frame
   herrekenen over de bewegende slide is duur en gaf zichtbaar gehakkel bovenin. */
html.is-transitioning .nav::before,
html.is-transitioning .nav::after {
	opacity: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Headerkleur schakelt INSTANT tijdens een paginatransitie (geen 0.3s fade):
   transitions.js zet de kleur exact om op het moment dat de nieuwe pagina de
   bovenrand bereikt. Een cross-fade zou de header een moment verkeerd
   contrasteren (wit-op-beige of donker-op-foto) -> dat leest als gehakkel. */
html.is-transitioning .nav {
	transition: none;
	/* Tijdens de transitie leest transitions.js via elementFromPoint de echte
	   achtergrond achter de nav (om de headerkleur live juist te houden). De nav
	   mag dat zicht niet blokkeren; links zijn tijdens de transitie toch vergrendeld.
	   pointer-events erft, dus dit geldt ook voor de nav-kinderen. */
	pointer-events: none;
}

.nav-inner {
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-top: 1.25em;
	padding-bottom: 1.25em;
	display: flex;
	position: relative;
	gap: 2em;
}

.nav-container {
	z-index: 1;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 3em;
	padding-right: 3em;
	position: relative;
}

.nav-logo {
	width: 15em;
	max-width: 42vw;
	display: block;
	color: inherit;
}

.nav-logo svg {
	--fill-0: currentColor;
	--stroke-0: currentColor;
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.site-footer__logo svg,
.site-footer__logo img {
	--fill-0: currentColor;
	--stroke-0: currentColor;
	width: 100%;
	height: auto;
	display: block;
}

/* Logo's uit de thema opties: licht op de hero, donker op lichte secties
   en bij een open menu of dropdown. */
.nav-logo__img {
	width: 100%;
	height: auto;
	display: block;
}

.nav-logo__img--donker { display: none; }

body.header-dark .nav-logo__img--licht { display: none; }
body.header-dark .nav-logo__img--donker { display: block; }

.nav-end {
	grid-column-gap: 0.75em;
	grid-row-gap: 0.75em;
	justify-content: flex-end;
	align-items: center;
	display: flex;
}

.nav-center {
	margin-left: auto;
}

.nav-center__list {
	justify-content: flex-end;
	align-items: center;
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: flex;
}

.nav-link {
	grid-column-gap: 0.375em;
	grid-row-gap: 0.375em;
	background-color: transparent;
	border-radius: 0.25em;
	justify-content: center;
	align-items: center;
	padding: 0.75em 1em;
	display: flex;
	color: inherit;
}

.nav-link__label {
	font-family: var(--font-body);
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	position: relative;
	white-space: nowrap;
}

.nav-link__caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nav-link__dropdown-icon {
	width: 0.75em;
	transition: transform var(--duration-normal) var(--cubic-default);
}

/* Op aanraakschermen krijgt de caret een royaal raakvlak (los van het
   label, dat direct navigeert) */
@media screen and (max-width: 991px) {
	.nav-link__caret {
		padding: 0.9em;
		margin: -0.9em;
	}
}

.nav-dropdown {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	width: 100%;
	padding-top: 2.5em;
	padding-bottom: 63px;
	position: fixed;
	left: 0;
	right: 0;
	transition: all var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default);
}

.nav-bg {
	background-color: #fff;
	border-bottom-right-radius: 0.75em;
	border-bottom-left-radius: 0.75em;
	width: 100%;
	height: 0;
	position: absolute;
	inset: 0% 0% auto;
	transition: height var(--duration-normal) var(--cubic-default);
}

.nav-dropdown__content {
	grid-column-gap: 1.25em;
	grid-row-gap: 1.25em;
	width: 100%;
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: flex;
}

.nav-dropdown__content-li {
	flex: 1;
}

.nav-dropdown__link {
	color: #fff;
	background-color: var(--c-grey);
	flex-flow: column;
	flex: 1;
	justify-content: flex-end;
	align-items: stretch;
	aspect-ratio: 311 / 212;
	padding: 1.25em;
	display: flex;
	position: relative;
	overflow: hidden;
}

.nav-dropdown__link.is--static {
	color: var(--c-text);
	transition: background-color 0.2s cubic-bezier(0.625, 0.05, 0, 1);
}

.nav-dropdown__link-inner {
	z-index: 1;
	justify-content: space-between;
	align-items: center;
	display: flex;
	position: relative;
}

.nav-dropdown__link-label {
	font-family: var(--font-head);
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.15;
	transition: transform 0.2s cubic-bezier(0.625, 0.05, 0, 1);
}

.icon {
	width: 100%;
	height: 100%;
}

.nav-dropdown__link-bg {
	position: absolute;
	inset: 0;
}

.nav-dropdown__img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Groene gradient-mask over de dropdownfoto's (Figma) */
.nav-dropdown__img-overlay {
	z-index: 1;
	opacity: 0.5;
	background-image: linear-gradient(#426d62, #1f3b33);
	transition: opacity 0.2s cubic-bezier(0.625, 0.05, 0, 1);
	position: absolute;
	inset: 0;
}

.page-bg {
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.3);
	width: 100%;
	height: 100vh;
	position: absolute;
	inset: 0% 0% auto;
	transition: opacity var(--duration-fast) var(--cubic-default);
}

.menu-button {
	grid-column-gap: 0.25em;
	grid-row-gap: 0.25em;
	background-color: currentColor;
	border-radius: 0.25em;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 3em;
	height: 3em;
	padding: 0.75em;
	display: none;
}

.menu-button__line {
	background-color: var(--c-green);
	width: 100%;
	height: 1px;
}

/* Taalwisselaar */
.nav-lang {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.nav-lang__item {
	display: block;
	line-height: 0;
	opacity: 0.55;
	transition: opacity var(--duration-fast) var(--cubic-default);
}

.nav-lang__item img {
	width: 28px;
	height: 20px;
	border-radius: 2px;
	display: block;
}

.nav-lang__item.is--active,
.nav-lang__item:hover,
.nav-lang__item:focus-visible {
	opacity: 1;
}

.sm--only { display: none; }

/* Tijdens een paginatransitie kort vergrendeld: doorbreekt de :hover-keten
   zodat het paneel niet boven de nieuwe pagina blijft hangen. */
.nav--lock .nav-dropdown {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.nav--lock .nav-bg {
	height: 0 !important;
}

/* ———— Dropdown tonen (alleen desktop: op touch blijft hover/focus plakken
   en zou het paneel na een paginawissel spontaan openklappen) ———— */
@media screen and (min-width: 992px) {
	[data-dropdown-toggle]:hover + .nav-dropdown,
	[data-dropdown-toggle]:focus-visible + .nav-dropdown,
	.nav-dropdown:hover,
	.nav-dropdown:focus-within {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* ———— Status wanneer dropdown open is ———— */
	:is(
		body:has([data-dropdown-toggle]:hover),
		body:has([data-dropdown-toggle]:focus-visible),
		body:has([data-dropdown-toggle]:focus-within),
		body:has(.nav-dropdown:hover),
		body:has(.nav-dropdown:focus-within)
	) {
		.nav-bg {
			height: var(--nav-bg-height);
		}
		.page-bg {
			opacity: 1;
		}
		.nav {
			color: var(--color-dark);
		}
		.nav-logo__img--licht {
			display: none;
		}
		.nav-logo__img--donker {
			display: block;
		}
	}
}

/* Geen eigen color-transition op de toggle: de kleurwissel bij het scrollen
   loopt via .nav (die color animeert) en wordt geerfd, net als bij de gewone
   nav-links. Een tweede transition hier zou compounden met die van .nav,
   waardoor de dropdown-kop zichtbaar later verkleurt dan de rest. De
   hover-goud-overgang zit daarom op de hover/focus-regel hieronder. */
[data-dropdown-toggle] {
	transition: background-color var(--duration-fast) var(--cubic-default);
}

/* ———— Desktop hover en focus ———— */
@media screen and (min-width: 992px) {
	[data-dropdown-toggle]:hover .nav-link__dropdown-icon,
	[data-dropdown-toggle]:focus .nav-link__dropdown-icon,
	[data-dropdown-toggle]:focus-within .nav-link__dropdown-icon,
	[data-dropdown-toggle]:has(+ .nav-dropdown:hover) .nav-link__dropdown-icon,
	[data-dropdown-toggle]:has(+ .nav-dropdown:focus-within) .nav-link__dropdown-icon {
		transform: rotate(180deg);
	}
	[data-dropdown-toggle]:hover,
	[data-dropdown-toggle]:focus,
	[data-dropdown-toggle]:focus-within,
	[data-dropdown-toggle]:has(+ .nav-dropdown:hover),
	[data-dropdown-toggle]:has(+ .nav-dropdown:focus-within) {
		color: var(--c-gold);
		transition: color var(--duration-fast) var(--cubic-default);
	}
}

/* ———— Dropdown content list items ———— */
.nav-dropdown__content-li {
	transition: all var(--duration-normal) var(--cubic-default);
	transition-delay: 0.18s;
	opacity: 0;
	transform: translate(4em, 0px);
}

.nav-dropdown__content-li:nth-child(2) { transition-delay: 0.24s; }
.nav-dropdown__content-li:nth-child(3) { transition-delay: 0.3s; }
.nav-dropdown__content-li:nth-child(4) { transition-delay: 0.36s; }
.nav-dropdown__content-li:nth-child(5) { transition-delay: 0.44s; }

@media screen and (min-width: 992px) {
	body:has([data-dropdown-toggle]:hover) [data-dropdown-toggle]:hover + .nav-dropdown .nav-dropdown__content-li,
	body:has([data-dropdown-toggle]:focus-visible) .nav-dropdown__content-li,
	body:has([data-dropdown-toggle]:focus-within) .nav-dropdown__content-li,
	body:has(.nav-dropdown:hover) .nav-dropdown__content-li,
	body:has(.nav-dropdown:focus-within) .nav-dropdown__content-li {
		opacity: 1;
		transform: translate(0em, 0px);
	}
}

/* ———— Dropdown links + afbeeldingen ———— */
.nav-dropdown__link:hover .nav-dropdown__img-overlay,
.nav-dropdown__link:focus-visible .nav-dropdown__img-overlay {
	opacity: 0.25;
}

.nav-dropdown__link:hover .nav-dropdown__img,
.nav-dropdown__link:focus-visible .nav-dropdown__img {
	transform: scale(1.1);
}

.nav-dropdown__link.is--static:hover,
.nav-dropdown__link.is--static:focus-visible {
	background: #d7d1cd;
}

/* ———— Nav links onderstreping ———— */
a.nav-link .nav-link__label::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transition: transform var(--duration-normal) var(--cubic-default);
	transform: scale(0, 1);
	transform-origin: right center;
}

a.nav-link:hover .nav-link__label::after,
a.nav-link:focus-visible .nav-link__label::after,
a.nav-link[aria-current] .nav-link__label::after {
	transform: scale(1, 1);
	transform-origin: left center;
}

/* Actief menu-item in de actiekleur (goud); label, dropdown-caret en de
   onderstreping (via currentColor) kleuren mee. aria-current="page" is de
   exacte pagina, "true" een dropdown-kop waarvan een onderliggende pagina
   actief is. */
.nav-link[aria-current] {
	color: var(--c-gold);
}

/* =========================================================
   OSMO BUTTON 097 (huisstijl: goud, dot, sweep naar wit)
   ========================================================= */
:root {
	--button-097-color: #fff;
	--button-097-color-background: var(--c-gold);
	--button-097-hover-color: var(--c-green);
	--button-097-hover-color-background: #fff;
	--button-097-color-focus: var(--c-gold);
	--button-097-border-radius: 100em;
	--button-097-dot-border-radius: 100em;
	--button-097-padding-right: 0.85em;
	--button-097-padding-left: 1.15em;
	--button-097-gap: 0.5em;
	--button-097-dot-size: 0.55em;
	--button-097-focus-inset: -0.125em;
	--button-097-ease-hover: cubic-bezier(0.32, 0.72, 0, 1);
	--button-097-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button-097 {
	-webkit-user-select: none;
	user-select: none;
	background-color: transparent;
	outline-style: none;
	padding: 0;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	display: inline-grid;
	position: relative;
	--button-097-padding: 0.78em calc(var(--button-097-padding-right) + var(--button-097-gap) + var(--button-097-dot-size)) 0.78em var(--button-097-padding-left);
	--button-097-offset: calc((var(--button-097-padding-right) + var(--button-097-gap) + var(--button-097-dot-size) - var(--button-097-padding-left)) / 2);
	-webkit-tap-highlight-color: transparent;
}

.button-097::after {
	content: '';
	display: block;
	position: absolute;
	inset: var(--button-097-focus-inset);
	border-radius: var(--button-097-border-radius);
	transition: box-shadow 0.3s var(--button-097-ease-focus);
	pointer-events: none;
	z-index: 1;
}

.button-097:is(:focus-visible)::after {
	box-shadow: 0 0 0 0.125em var(--button-097-color-focus);
}

.button-097__hover {
	color: var(--button-097-hover-color);
	z-index: 1;
	/* Geen permanente will-change: clip-path -> zie .button-097__text; anders
	   staat ook de groene hovertekst op een gepromote laag en wordt onscherp. */
	grid-area: 1 / 1;
	place-self: center;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	display: grid;
	clip-path: inset(calc(50% - var(--button-097-dot-size) * 0.5) var(--button-097-padding-right) calc(50% - var(--button-097-dot-size) * 0.5) calc(100% - (var(--button-097-dot-size) + var(--button-097-padding-right))) round var(--button-097-dot-border-radius));
	transition: clip-path 0.55s var(--button-097-ease-hover);
}

.button-097__bg {
	border-radius: var(--button-097-border-radius);
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	padding: 0;
}

.button-097__bg.is--hover {
	background-color: var(--button-097-hover-color-background);
}

.button-097__bg.is--default {
	background-color: var(--button-097-color-background);
	width: calc(100% - 1px);
	height: calc(100% - 1px);
}

.button-097__inner {
	width: 100%;
	height: 100%;
	padding: var(--button-097-padding);
	grid-area: 1 / 1;
	justify-content: center;
	align-items: center;
	display: flex;
}

.button-097__text {
	/* Bewust GEEN will-change: transform. Dat promoot de tekst permanent naar een
	   eigen GPU-laag, die op sommige Chromium-builds/DPR's (o.a. Comet van
	   Perplexity) op een niet-integer schaal rasterizeert -> extreem onscherpe
	   buttontekst. De translate-hoveranimatie werkt zonder de hint prima. */
	transition: translate 0.55s var(--button-097-ease-hover);
	white-space: nowrap;
}

.button-097__default {
	width: 100%;
	height: 100%;
	color: var(--button-097-color);
	grid-area: 1 / 1;
	display: grid;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.button-097:is(:hover, :focus-visible) .button-097__hover,
	[data-hover]:is(:hover, :focus-visible) .button-097 .button-097__hover {
		clip-path: inset(0% 0% 0% 0% round var(--button-097-border-radius));
		transition-delay: 0.05s;
	}

	.button-097:is(:hover, :focus-visible) .button-097__text,
	[data-hover]:is(:hover, :focus-visible) .button-097 .button-097__text {
		translate: var(--button-097-offset) 0 0;
		transition-delay: 0.05s;
	}
}

/* Op een wit tekstvlak zou de witte hoverstaat wegvallen tegen de container;
   een heel subtiele schaduw (via de ::after-ring, die buiten de clip-path
   van de hoverlaag valt) houdt de knop zichtbaar afgetekend. */
@media (hover: hover) and (pointer: fine) {
	.tekstbox--wit .button-097:hover::after {
		box-shadow: 0 2px 10px rgba(22, 30, 27, 0.07);
	}
}

/* =========================================================
   BLOK: HERO
   ========================================================= */
.section--hero {
	/* Altijd schermvullend, met een ondergrens en een plafond van 1400px.
	   De foto zit niet in dit blok maar in de vaste .bg-photo laag erachter;
	   deze sectie houdt alleen de tekst en reserveert het scherm ervoor. */
	min-height: clamp(640px, 100svh, 1400px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(7rem, 16vh, 10rem) clamp(5rem, 12vh, 8rem);
	color: #fff;
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.6rem;
	max-width: 1040px;
}

.hero__subtitel {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.7;
	margin: 0;
}

.hero__titel {
	color: #fff;
	max-width: 980px;
	margin: 0;
}

.hero__tekst {
	max-width: 40em;
	margin: 0;
}

/* WYSIWYG-velden: binnenste paragrafen strak houden */
.hero__tekst p,
.cta__tekst p,
.spec__intro p,
.tab-description p {
	margin: 0 0 0.7em;
}

.hero__tekst p:last-child,
.cta__tekst p:last-child,
.spec__intro p:last-child,
.tab-description p:last-child {
	margin-bottom: 0;
}

.hero__microtekst {
	font-size: 12px;
	line-height: 1.65;
	margin: 0;
	opacity: 0.9;
}

/* Tekst-hero (zonder afbeelding): compact, op de canvaskleur, groene titel */
.section--hero.hero--tekst {
	min-height: 0;
	color: inherit;
	padding-block: clamp(9rem, 18vh, 11rem) clamp(2.5rem, 5vw, 4rem);
}

.hero--tekst .hero__titel {
	color: var(--c-green);
}

.hero--tekst .hero__subtitel {
	color: var(--c-text);
}

/* Tekst-hero links uitgelijnd: compacte paginatitel (Tarief, Contact) */
.hero--tekst.hero--links {
	padding-block: clamp(8rem, 16vh, 10rem) clamp(1.5rem, 3vw, 2.5rem);
}

.hero--tekst.hero--links .hero__inner {
	align-items: flex-start;
	text-align: left;
	max-width: calc(var(--container-max) + 2 * var(--gutter));
}

.hero--tekst.hero--links .hero__titel {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.3;
}

/* 404: tekst-hero die de hele viewport vult tot aan de footer */
.section--404 {
	min-height: calc(100svh - 220px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(9rem, 18vh, 11rem) clamp(4rem, 8vw, 6rem);
}

.fout404__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

/* =========================================================
   BLOK: WELKOM (tekst met twee foto's, parallax)
   ========================================================= */
.section--welkom {
	padding-top: clamp(7rem, 24vw, 22.5rem);
}

.welkom__grid {
	display: grid;
	grid-template-columns: minmax(0, 48fr) minmax(0, 46fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.welkom__box {
	position: relative;
	z-index: 2;
}

.welkom__titel { margin-bottom: 0.7em; }
.welkom__knop { margin-top: 1.6em; }

/* Het fotocluster is in het design 678px breed en schuift 77px over de
   witte kaart heen (portret x632, kaartrand x709 bij 1440). */
.welkom__fotos {
	position: relative;
	min-height: 700px;
	margin-left: clamp(-140px, -9.5vw, 0px);
	z-index: 1;
}

.welkom__foto {
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	position: absolute;
	box-shadow: 0 18px 50px rgba(22, 30, 27, 0.12);
	transform: translateY(var(--py, 0));
	will-change: transform;
}

.welkom__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Maatvoering uit Figma: portret 378x412 links-boven (start boven het
   tekstvlak), handenfoto 480x313 rechtsonder tegen de containerrand. */
.welkom__foto--groot {
	width: 55.8%;
	aspect-ratio: 378 / 412;
	left: 0;
	top: -24%;
	z-index: 1;
}

.welkom__foto--klein {
	width: 70.8%;
	aspect-ratio: 480 / 313;
	right: 0;
	/* Design: 29px onder de portretonderkant, niet tegen de sectiebodem */
	top: 39%;
}

/* =========================================================
   SUBTIELE PARALLAX BINNEN HET KADER
   Het kader staat stil; het beeld erin schuift licht mee met
   de scroll (--py komt uit reveals.js) en is iets opgeschaald
   zodat er nooit randen zichtbaar worden.
   ========================================================= */
.tekst-media__foto[data-parallax] img {
	transform: translateY(var(--py, 0)) scale(1.2);
	will-change: transform;
}

.tab-visual__inner[data-parallax] .tab-image {
	transform: translateY(var(--py, 0)) scale(1.18);
	will-change: transform;
}

/* =========================================================
   BLOK: QUOTE
   ========================================================= */
.quote__inner {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.quote__tekst {
	font-family: var(--font-head);
	font-style: italic;
	font-size: clamp(24px, 2.8vw, 36px);
	line-height: 1.25;
	color: var(--c-red);
	margin: 0 0 0.9em;
}

.quote__bron {
	font-style: normal;
	font-size: 20px;
}

.quote__bron::before { content: '\2013\00a0'; }
.quote__bron::after { content: '\00a0\2013'; }

/* =========================================================
   BLOK: TEKST MET FOTO (voor wie / over Femke)
   ========================================================= */
.tekst-media__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
}

.tekst-media__foto {
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	grid-row: 1;
	box-shadow: 0 18px 50px rgba(22, 30, 27, 0.1);
}

.tekst-media__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tekst-media__box {
	grid-row: 1;
	z-index: 1;
}

/* Foto links (Over Femke): foto kolom 1-7 met de designverhouding 580x813,
   tekstvlak overlapt vanaf kolom 6 tot en met 12 */
.tekst-media__grid--foto-links .tekst-media__foto { grid-column: 1 / 7; aspect-ratio: 580 / 813; }
.tekst-media__grid--foto-links .tekst-media__box { grid-column: 6 / 12; }

/* Foto rechts (met evt. zwevende titels): foto kolom 4-10, tekst 1-7 */
.tekst-media__grid--foto-rechts .tekst-media__foto { grid-column: 4 / 10; }
.tekst-media__grid--foto-rechts .tekst-media__box { grid-column: 1 / 7; }

.tekst-media__foto img { height: 100%; }

.tekst-media__titels {
	grid-row: 1;
	grid-column: 7 / 13;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 2.35em;
	justify-self: start;
	align-self: start;
	margin-top: calc(30% + 10px);
	margin-left: 5%;
	text-align: left;
	pointer-events: none;
}

.tekst-media__zwevende-titel {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(26px, 3vw, 44px);
	line-height: 1;
	color: var(--c-gold);
	/* Elke titel op één regel; ze mogen voorbij de foto uitlopen (design). */
	white-space: nowrap;
}

/* Als link (naar de specialisatiepagina): wel klikbaar ondanks de
   pointer-events: none van de container, met een subtiele onderstreping */
a.tekst-media__zwevende-titel {
	pointer-events: auto;
	text-decoration: none;
	transition: color var(--duration-fast) ease;
}

a.tekst-media__zwevende-titel:hover,
a.tekst-media__zwevende-titel:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* Met zwevende titels ernaast (Figma "Voor wie"): bredere foto vanaf kolom 4,
   het tekstvlak start 51% (van de gridbreedte) onder de fotobovenrand en de
   titels zweven over de foto heen. Maatvoering uit het 1440-ontwerp. */
.tekst-media__grid--foto-rechts:has(.tekst-media__titels) { align-items: start; }
.tekst-media__grid--foto-rechts:has(.tekst-media__titels) .tekst-media__foto {
	grid-column: 4 / 11;
	aspect-ratio: 677 / 442;
}
.tekst-media__grid--foto-rechts:has(.tekst-media__titels) .tekst-media__box {
	margin-top: 51%;
}

.tekst-media__titel { margin-bottom: 0.6em; }
.tekst-media__knop { margin-top: 1.5em; }

/* =========================================================
   BLOK: SPECIALISATIES (Osmo tabs, huisstijl)
   ========================================================= */
/* De kop staat binnen de linkerkolom van het tab-systeem, zodat de foto
   rechts op kophoogte begint (Figma). */
.spec__head {
	max-width: 620px;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.spec__titel { margin-bottom: 0.5em; }

.spec__intro {
	font-size: 24px;
	line-height: 1.45;
	margin: 0;
}

.tab-layout__wrap {
	z-index: 1;
	grid-row-gap: 3em;
	flex-flow: wrap;
	display: flex;
	position: relative;
	align-items: stretch;
}

.tab-layout__col {
	width: 50%;
	padding-right: 1.5em;
}

.tab-layout__col:last-child {
	padding-right: 0;
	padding-left: 0.5em;
}

.tab-content__wrap {
	width: 100%;
	max-width: 36em;
	height: 100%;
}

/* flex-start, niet space-between: tabs.js reserveert via reserveerHoogte() een
   min-height gelijk aan het langste detail. Bij space-between werd die extra
   ruimte als gaten tussen de items verdeeld, waardoor er boven item 2 en verder
   te veel witruimte ontstond zodra een kortere tab actief was. Met flex-start
   stapelen de items netjes vanaf boven en valt de reserveringsruimte onderaan. */
.tab-content__bottom {
	flex-flow: column;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding-left: 0;
	display: flex;
}

.tab-content__item {
	color: var(--c-text);
	width: 100%;
	padding-top: 0.85em;
	padding-bottom: 0.85em;
	text-decoration: none;
	transition: opacity 0.25s;
	position: relative;
}

.tab-content__item:first-child {
	border-top: 1px solid rgba(22, 30, 27, 0.2);
}

.tab-content__item-main {
	grid-column-gap: 1.5em;
	grid-row-gap: 1.5em;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	display: flex;
}

.content-item__nr {
	color: var(--c-gold);
	background-color: transparent;
	border: 1px solid var(--c-gold);
	border-radius: 100em;
	justify-content: center;
	align-items: center;
	width: 2.0625em;
	height: 2.0625em;
	padding: 0.5em;
	flex: none;
	transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.3s, color 0.3s;
	display: flex;
}

.tab-content__item.active .content-item__nr,
.tab-content__item:hover .content-item__nr {
	background-color: var(--c-gold);
	color: #fff;
}

.content-item__heading {
	margin: 0;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.15;
}

.tab-content__item-detail {
	width: 100%;
	height: 0;
	padding-left: 3.6em;
	overflow: hidden;
}

.tab-description {
	margin-bottom: 0;
	font-size: 20px;
	line-height: 1.7;
}

.tab-description__spacer {
	padding-top: 0.75em;
}

.tab-content__item-bottom {
	background-color: rgba(22, 30, 27, 0.2);
	width: 100%;
	height: 1px;
	transition: background-color 0.2s;
	position: absolute;
	inset: auto 0% 0%;
}

.tab-progress {
	transform-origin: 0%;
	transform-style: preserve-3d;
	background-color: var(--c-gold);
	width: 100%;
	height: 1px;
	transform: scale3d(0, 1, 1);
}

/* De foto volgt exact de hoogte van de contentkolom links (de lijst
   reserveert via tabs.js de hoogte van het langste detail, zodat het blok
   nooit van hoogte verandert bij het wisselen van tab). */
.tab-visual__wrap {
	height: 100%;
	min-height: 420px;
	width: 100%;
	position: relative;
}

.tab-visual__item {
	visibility: hidden;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
}

.tab-visual__item.active {
	visibility: visible;
}

.tab-visual__inner {
	border-radius: 8px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.tab-image {
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: relative;
}

/* =========================================================
   BLOK: STAPPEN (genummerde witte kaarten)
   ========================================================= */
.stappen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.stap {
	background: #fff;
	border-radius: 8px;
	padding: 37px 30px 32px;
}

.stap__kop {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 28px;
}

.stap__nummer {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 100em;
	background: rgba(184, 135, 79, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	color: var(--c-text);
}

.stap__titel {
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.15;
	margin: 0;
}

.stap__tekst p { margin: 0 0 1em; }
.stap__tekst > *:last-child { margin-bottom: 0; }

@media screen and (max-width: 991px) {
	.stappen { grid-template-columns: 1fr; }
}

/* =========================================================
   BLOK: TITEL + TEKST RIJEN (smalle titel links, tekst rechts)
   ========================================================= */
.titel-tekst-rijen {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.titel-tekst {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.titel-tekst__titel {
	grid-column: 1 / 4;
	font-size: clamp(22px, 2vw, 26px);
	line-height: 1.16;
	margin: 0;
}

.titel-tekst__tussenkop {
	font-size: clamp(27px, 3.2vw, 40px);
	line-height: 1.1;
	margin: 0.4em 0 0;
}

.titel-tekst__tekst {
	grid-column: 4 / 13;
}

.titel-tekst__tekst > *:last-child { margin-bottom: 0; }

.rich-text a {
	color: var(--c-gold);
	text-decoration: none;
}

.rich-text a:hover,
.rich-text a:focus-visible {
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
	.titel-tekst { display: block; }
	.titel-tekst__titel { margin-bottom: 0.8rem; }
	.titel-tekst-rijen { gap: 2rem; }
}

/* =========================================================
   BLOK: TWEE KOLOMMEN (asymmetrisch, kolom 2 haalt in)
   ========================================================= */
.kolommen__titel {
	margin-bottom: 1.9rem;
}

.kolommen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}

/* Kolom 2 krijgt zijn inhaal-offset via --ky uit reveals.js; zonder JS of
   met reduced motion staan de kolommen gewoon gelijk. */
.kolommen__col--tweede {
	transform: translateY(var(--ky, 0px));
	will-change: transform;
}

.kolommen__col h3 {
	margin: 0 0 0.65em;
}

.kolommen__col h4 {
	font-size: clamp(22px, 2.4vw, 30px);
	color: var(--c-green);
	margin: 1.1em 0 0.55em;
}

.kolommen__col > h3:first-child,
.kolommen__col > h4:first-child {
	margin-top: 0;
}

/* =========================================================
   BARBA: sluier op de inkomende pagina
   Tijdens de paginatransitie schuift de nieuwe pagina als egaal
   gekleurd vlak binnen; de secties worden pas zichtbaar (en de
   reveals starten pas) nadat de transitie klaar is.
   ========================================================= */
.section {
	transition: opacity 0.4s ease;
}

main[data-barba="container"].is-entering .section {
	opacity: 0 !important;
	/* Direct onzichtbaar bij het inschuiven; alleen het onthullen fadet. */
	transition: none;
}

/* =========================================================
   BLOK: STAPELKAARTEN (Osmo stacking cards)
   ========================================================= */
.section--stapelkaarten {
	padding-block: 0;
	/* Als een kaart tijdens het stapel-effect omlaag schuift, toont de
	   vrijgekomen ruimte deze kleur in plaats van de witte paginacanvas
	   (zichtbaar op mobiel, waar 100svh kleiner is dan het scherm). */
	background: var(--c-green);
}

.stapel {
	display: flex;
	flex-flow: column;
	width: 100%;
}

.stapel__item {
	color: #fff;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100svh;
	margin-top: -1em;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	padding: 6rem var(--gutter);
}

.stapel__item:first-child {
	/* Steekt iets boven de sectie uit, over de hero heen: de uitsparingen
	   naast de ronde bovenhoeken tonen dan de herofoto in plaats van de
	   groene sectieachtergrond. */
	margin-top: -20px;
}

.stapel__media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Extra hoogte als bewegingsruimte voor de tegenparallax van de foto */
.stapel__img {
	position: absolute;
	left: 0;
	top: -10%;
	width: 100%;
	height: 120%;
	object-fit: cover;
	will-change: transform;
}

.stapel__mask {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(66, 109, 98, 0.6), rgba(31, 59, 51, 0.6));
}

.stapel__inner {
	position: relative;
	z-index: 1;
	max-width: 580px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.stapel__titel {
	color: #fff;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.15;
	margin: 0;
}

.stapel__tekst p {
	margin: 0 0 0.7em;
}

.stapel__tekst p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   BLOK: CTA
   ========================================================= */
.cta__inner {
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.cta__tekst {
	font-size: 24px;
	line-height: 1.45;
	margin: 0;
	max-width: 38em;
}

/* =========================================================
   BLOK: FAQ (accordeon)
   ========================================================= */
.faq__titel {
	max-width: 980px;
	margin: 0 auto 1.9rem;
}

.faq {
	max-width: 980px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq__item {
	background: var(--c-beige);
	border-radius: 8px;
}

.faq__vraag {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.25rem;
	padding: 23px 30px;
	text-align: left;
	font-family: var(--font-body);
	font-size: clamp(19px, 1.8vw, 24px);
	line-height: 1.42;
	color: var(--c-text);
}

.faq__icoon {
	flex: none;
	width: 33px;
	height: 33px;
	border: 1px solid var(--c-gold);
	border-radius: 100em;
	color: var(--c-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	transform: rotate(90deg);
	transition: transform 0.6s var(--cubic-default), background-color 0.3s ease, color 0.3s ease;
}

.faq__item.is--open .faq__icoon {
	transform: rotate(-90deg);
	background: var(--c-gold);
	color: #fff;
}

/* Openklappen met de huis-easing via de grid-rows-truc */
.faq__antwoord {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.6s var(--cubic-default);
}

.faq__item.is--open .faq__antwoord {
	grid-template-rows: 1fr;
}

.faq__antwoord-inner {
	overflow: hidden;
	min-height: 0;
}

.faq__antwoord-tekst {
	padding: 2px 30px 28px;
}

@media (prefers-reduced-motion: reduce) {
	.faq__antwoord,
	.faq__icoon {
		transition: none;
	}
}

/* =========================================================
   BLOK: FORMULIER (Gravity Forms in huisstijl)
   ========================================================= */
.formulier {
	max-width: 780px;
	margin-inline: auto;
}

.formulier__titel {
	margin-bottom: 1.9rem;
}

/* Bij validatiefouten scrolt GF naar het formulier; houd ruimte voor de
   vaste header zodat de foutsamenvatting niet achter de nav verdwijnt. */
.gform_wrapper {
	scroll-margin-top: 110px;
}

/* Fieldsets (checkbox/radio/consent-velden) nooit als kader tonen; sommige
   browsers tekenen anders hun standaard rand en inspringing. */
.gform_wrapper fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	background: none;
}

/* Veldstyling: wit vlak, rand #9eaba6, goud bij focus (Figma states) */
.gform_wrapper .gfield {
	margin-bottom: 30px;
}

.gform_wrapper .gfield_label {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--c-text);
	margin-bottom: 10px;
	display: inline-block;
}

/* Vereist-indicator als sober sterretje in de tekstkleur (Figma: "Field label*") */
.gform_wrapper .gfield_required {
	color: var(--c-text) !important;
	font-size: inherit !important;
	padding-left: 1px;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea {
	width: 100%;
	background: #fff;
	border: 1px solid #9eaba6;
	border-radius: 8px;
	height: 60px;
	padding: 0 20px;
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 1.7;
	color: var(--c-text);
	outline: none;
	transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.gform_wrapper textarea {
	height: auto;
	min-height: 180px;
	padding: 12px 20px;
	resize: vertical;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--c-text);
	opacity: 0.4;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper textarea:focus {
	border-color: var(--c-gold);
	box-shadow: 0 0 0 1px var(--c-gold);
}

/* Mobiel: Gravity Forms zet onder 641px zelf 15px/8px op de velden (wint op
   specificiteit van de basisregels hierboven); hier terug naar de huisstijl,
   iets compacter dan desktop: ±50px hoog in plaats van 60px. */
@media (max-width: 640px) {
	/* :not-keten spiegelt de GF-selector (basic.min.css) om die te verslaan */
	.gform_wrapper.gravity-theme .gfield input:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]) {
		font-size: 18px;
		line-height: 1.7;
		height: 50px;
		padding: 0 16px;
		min-height: 0;
	}

	.gform_wrapper.gravity-theme .gfield textarea {
		font-size: 18px;
		line-height: 1.7;
		height: auto;
		padding: 10px 16px;
	}
}

/* Formulierbeschrijving (intro boven de velden) */
.gform_wrapper .gform_description {
	display: block;
	font-size: 20px;
	line-height: 1.7;
	color: var(--c-text);
	margin-bottom: 34px;
}

/* Keuzevelden: radio's en checkboxlijsten in huisstijl */
.gform_wrapper .ginput_container_consent,
.gform_wrapper .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
}

.gform_wrapper .gfield_radio .gchoice:last-child,
.gform_wrapper .gfield_checkbox .gchoice:last-child {
	margin-bottom: 0;
}

.gform_wrapper .gfield_radio .gchoice label,
.gform_wrapper .gfield_checkbox .gchoice label {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--c-text);
	cursor: pointer;
}

/* Radio: 18px cirkel, rand #9eaba6, gouden dot bij selectie */
.gform_wrapper input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	background: #fff;
	border: 1px solid #9eaba6;
	border-radius: 100em;
	cursor: pointer;
	position: relative;
	transition: border-color var(--duration-fast) ease;
}

.gform_wrapper input[type="radio"]:checked {
	border-color: var(--c-gold);
}

.gform_wrapper input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 100em;
	background: var(--c-gold);
}

.gform_wrapper input[type="radio"]:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

.gform_wrapper input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	background: #fff;
	border: 1px solid #9eaba6;
	border-radius: 2px;
	cursor: pointer;
	position: relative;
	transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.gform_wrapper input[type="checkbox"]:checked {
	background: var(--c-gold);
	border-color: var(--c-gold);
}

.gform_wrapper input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.gform_wrapper input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

/* =========================================================
   Keuzekaarten: radio's en checkboxen als klikbare vlakken
   (FitCheck). De voorwaardenregel (.veld-voorwaarden) houdt
   de kleine checkboxstijl hierboven.
   ========================================================= */
.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) .gchoice {
	position: relative;
	align-items: center;
	gap: 14px;
	margin-bottom: 0;
	padding: 13px 18px;
	background: #fff;
	border: 1px solid #9eaba6;
	border-radius: 8px;
	transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

/* Hele kaart klikbaar: het label krijgt een onzichtbaar klikvlak over de kaart */
.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) .gchoice label::after {
	content: '';
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) .gchoice:hover {
	border-color: rgba(184, 135, 79, 0.6);
}

.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) .gchoice:has(input:checked) {
	border-color: var(--c-gold);
	background: #fbf6ef;
	box-shadow: inset 0 0 0 1px var(--c-gold);
}

.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) .gchoice:has(input:focus-visible) {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

/* Radiogroep naast elkaar (wrapt vanzelf), checkboxlijst onder elkaar */
.gform_wrapper .gfield--type-radio:not(.veld-voorwaarden) .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.gform_wrapper .gfield--type-radio:not(.veld-voorwaarden) .gchoice {
	flex: 1 1 220px;
}

.gform_wrapper .gfield--type-checkbox:not(.veld-voorwaarden) .gfield_checkbox {
	display: grid;
	gap: 12px;
}

/* Grotere indicatoren binnen de kaarten */
.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) input[type="radio"],
.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
}

.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) input[type="radio"]:checked::after {
	inset: 4px;
}

.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) input[type="checkbox"] {
	border-radius: 5px;
}

.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) input[type="checkbox"]:checked::after {
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
}

/* Binnen de kaart focust de kaart zelf, niet het bolletje */
.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) input[type="radio"]:focus-visible,
.gform_wrapper .gfield--type-choice:not(.veld-voorwaarden) input[type="checkbox"]:focus-visible {
	outline: none;
}

/* Max-2: zodra er twee vinkjes staan, gaan de overige opties op slot
   (form-validation.js zet .is--capped en disabled) */
.gform_wrapper .gchoice.is--capped {
	opacity: 0.45;
}

.gform_wrapper .gchoice.is--capped,
.gform_wrapper .gchoice.is--capped label,
.gform_wrapper .gchoice.is--capped label::after,
.gform_wrapper .gchoice.is--capped input {
	cursor: default;
}

.gform_wrapper .gchoice.is--capped:hover {
	border-color: #9eaba6;
}

/* Voorwaardenregel: kleine, maar leesbare tekst met gouden links */
.gform_wrapper .gfield_consent_label,
.gform_wrapper .veld-voorwaarden .gchoice label {
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: var(--c-text) !important;
	font-weight: 400 !important;
	cursor: pointer;
}

.gform_wrapper .veld-voorwaarden .gchoice {
	gap: 9px;
	margin-bottom: 0;
}

.gform_wrapper .veld-voorwaarden input[type="checkbox"] {
	margin-top: 2px;
}

.gform_wrapper .gfield_consent_label a,
.gform_wrapper .gchoice label a {
	color: var(--c-gold);
}

/* Validatie: rustige foutstaat in het quote-rood (wint van gravity-theme) */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error [aria-invalid="true"] {
	border-color: var(--c-red) !important;
}

/* Labels en legends behouden de tekstkleur in de foutstaat; gravity-theme
   kleurt ze anders hard rood. Alleen de melding zelf is rood. */
.gform_wrapper.gravity-theme .gfield_error label,
.gform_wrapper.gravity-theme .gfield_error legend {
	color: var(--c-text) !important;
}

/* Keuzekaarten in een foutveld: rand in gedempt rood */
.gform_wrapper .gfield_error.gfield--type-choice:not(.veld-voorwaarden) .gchoice {
	border-color: rgba(114, 5, 5, 0.45);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-red) !important;
	background: none !important;
	border: 0 !important;
	padding: 6px 0 0;
	margin: 0;
}

.gform_wrapper .gform_validation_errors {
	background: rgba(114, 5, 5, 0.06);
	border: 1px solid rgba(114, 5, 5, 0.25);
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 24px;
	box-shadow: none;
}

.gform_wrapper .gform_validation_errors > h2 {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--c-red);
	margin: 0;
}

.gform_wrapper .gform_validation_errors ol,
.gform_wrapper .gform_required_legend {
	display: none;
}

.gform_wrapper .gform_footer {
	margin-top: 34px;
	padding: 0;
}

/* button-097 als <button> (submit) */
button.button-097 {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
	/* De footer is grijs, maar loopt bovenaan vloeiend over vanuit de LIVE
	   canvaskleur (--bg-rgb, per frame gezet door scroll-bg.js). Zo is de rand
	   tussen pagina en footer altijd naadloos, ook op korte pagina's waar de
	   scroll-canvas het grijs niet helemaal haalt (dan zou je anders een harde
	   lijn zien). Op pagina's die al grijs eindigen is de overloop grijs->grijs
	   en dus onzichtbaar. */
	background-color: var(--c-grey);
	background-image: linear-gradient(
		to bottom,
		rgb(var(--bg-rgb, 247, 243, 237)) 0,
		var(--c-grey) clamp(140px, 22vh, 260px)
	);
	padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
	position: relative;
	z-index: 1;
	color: var(--c-text);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.site-footer__logo {
	display: block;
	width: min(224px, 60%);
	margin-bottom: 1.75rem;
	color: var(--c-text);
}

.site-footer__text {
	margin: 0 0 1.5rem;
}

.site-footer__form {
	background: #fff;
	border-radius: 8px;
	padding: 0.5rem;
	margin-bottom: 1.5rem;
}

/* De disclaimer staat in het design in een wit afgerond vlak. */
.site-footer__disclaimer {
	font-size: 12px;
	line-height: 1.65;
	margin: 0;
	background: #fff;
	border-radius: 8px;
	padding: 0.9em 1.1em;
}

.site-footer__col-title {
	font-family: var(--font-head);
	font-size: 26px;
	line-height: 1.15;
	color: var(--c-green);
	margin: 0 0 1.1rem;
}

.site-footer__col .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__col .menu li {
	margin: 0;
}

.site-footer__col .menu a {
	line-height: 1.7;
	display: inline-block;
	padding-block: 0.1em;
}

.site-footer__col .menu a:hover,
.site-footer__col .menu a:focus-visible {
	color: var(--c-gold);
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.site-footer__copyright,
.site-footer__credits {
	font-size: 12px;
	margin: 0;
}

.site-footer__credits { opacity: 0.4; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media screen and (max-width: 991px) {
	.nav-inner { padding-top: 1em; padding-bottom: 1em; }
	.nav-container { padding-left: 1.25em; padding-right: 1.25em; }
	.nav-logo { width: 11em; flex-shrink: 0; }
	.nav-end { flex-shrink: 0; }

	.welkom__grid { grid-template-columns: 1fr; }
	.welkom__fotos { min-height: 0; height: auto; margin-left: 0; display: grid; grid-template-columns: 7fr 5fr; gap: 1rem; align-items: start; }
	.welkom__foto { position: static; }
	.welkom__foto--groot { width: 100%; top: auto; }
	.welkom__foto--klein { width: 100%; margin-top: 3rem; }

	.tab-layout__col { width: 100%; padding: 0; }
	.tab-layout__col:last-child { padding-left: 0; }
	.tab-content__wrap { max-width: none; }
	.tab-visual__wrap { height: auto; aspect-ratio: 3 / 2; margin-top: 2em; }

	.tekst-media__zwevende-titel { font-size: clamp(24px, 3.5vw, 36px); white-space: normal; }

	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__intro { grid-column: 1 / -1; }
}

/* Vanaf 991px en smaller: burger-navigatie (het volledige menu met zes
   items plus vlaggen past niet naast het logo op tabletbreedtes). */
@media screen and (max-width: 991px) {
	.nav-logo { z-index: 1; position: relative; }
	.nav-end { z-index: 2; position: relative; }

	.nav-center {
		z-index: 0;
		opacity: 0;
		visibility: hidden;
		height: 100dvh;
		position: absolute;
		top: 0;
		left: -1.25em;
		right: -1.25em;
		transform: translate(0, 1em);
	}

	.nav-center__list {
		flex-flow: column;
		justify-content: flex-start;
		align-items: stretch;
		height: 100%;
		padding-top: 7em;
		overflow: hidden scroll;
	}

	.nav-link {
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0.9em 1.25em;
	}

	.nav-link__label { font-size: 1.35em; letter-spacing: 1px; }

	.nav-dropdown {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		padding-top: 0;
		padding-bottom: 0;
		position: relative;
		inset: auto;
	}

	.nav-bg {
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
		height: 0;
	}

	.nav-dropdown__overflow {
		grid-template-rows: 0fr;
		width: 100%;
		display: grid;
		position: relative;
		overflow: hidden;
	}

	.nav-dropdown__overflow-inner {
		flex-flow: column;
		width: 100%;
		height: 1000000%;
		display: flex;
		position: relative;
		overflow: hidden;
	}

	.nav-dropdown__content {
		grid-gap: 0.75em;
		grid-template-columns: repeat(2, 1fr);
		padding-top: 1em;
		padding-bottom: 1em;
		display: grid;
	}

	.nav-dropdown__link {
		aspect-ratio: 1;
		height: auto;
		padding: 1em;
	}

	.nav-dropdown__link-label { font-size: 1.1em; }

	.menu-button { display: flex; }

	.sm--hide { display: none; }
	.sm--only { display: block; }
	.nav-center__lang { padding: 1.5em 1.25em; }

	:root {
		--nav-bg-height: 100dvh;
	}

	.nav-dropdown__overflow {
		transition: grid-template-rows var(--duration-normal) var(--cubic-default);
	}

	.nav-center {
		transition: all var(--duration-normal) var(--cubic-default), opacity var(--duration-fast) var(--cubic-default);
	}

	.menu-button__line {
		transition: all var(--duration-normal) var(--cubic-default);
	}

	/* ———— Status wanneer het mobiele menu open is ———— */
	:is([data-menu-status="open"]) {
		color: var(--color-dark);
	}
	[data-menu-status="open"] .menu-button__line:nth-of-type(1) {
		transform: translate(0px, 0.125em) rotate(135deg);
		background-color: #fff;
	}
	[data-menu-status="open"] .menu-button__line:nth-of-type(2) {
		transform: translate(0px, -0.175em) rotate(-135deg);
		background-color: #fff;
	}
	[data-menu-status="open"] .menu-button {
		background-color: var(--c-green);
	}
	[data-menu-status="open"] .nav-bg {
		height: var(--nav-bg-height);
	}
	[data-menu-status="open"] .page-bg {
		opacity: 1;
	}
	[data-menu-status="open"] .nav-center {
		opacity: 1;
		visibility: visible;
		transform: translate(0px, 0em);
		transition-delay: 0.1s;
	}

	/* Menu-items komen met een stagger van boven naar onder binnen. Alleen
	   de zichtbare rij (label of taalwisselaar) animeert, niet het hele li:
	   bij Specialisaties bevat dat li ook het ingeklapte accordeon met
	   fotokaarten en dat rendert merkbaar zwaarder, waardoor dat item
	   anders uit de pas fadet. De vertraging geldt alleen bij openen; bij
	   sluiten verdwijnt alles tegelijk met het paneel. */
	.nav-center__list > li > .nav-link,
	.nav-center__list > li .nav-lang {
		opacity: 0;
		transform: translate(0, 0.6em);
		transition: opacity var(--duration-normal) var(--cubic-default), transform var(--duration-normal) var(--cubic-default);
	}

	[data-menu-status="open"] .nav-center__list > li > .nav-link,
	[data-menu-status="open"] .nav-center__list > li .nav-lang {
		opacity: 1;
		transform: translate(0, 0);
	}

	[data-menu-status="open"] .nav-center__list > li:nth-child(1) > .nav-link { transition-delay: 0.18s; }
	[data-menu-status="open"] .nav-center__list > li:nth-child(2) > .nav-link { transition-delay: 0.24s; }
	[data-menu-status="open"] .nav-center__list > li:nth-child(3) > .nav-link { transition-delay: 0.3s; }
	[data-menu-status="open"] .nav-center__list > li:nth-child(4) > .nav-link { transition-delay: 0.36s; }
	[data-menu-status="open"] .nav-center__list > li:nth-child(5) > .nav-link { transition-delay: 0.42s; }
	[data-menu-status="open"] .nav-center__list > li:nth-child(6) > .nav-link { transition-delay: 0.48s; }
	[data-menu-status="open"] .nav-center__list > li:nth-child(7) .nav-lang { transition-delay: 0.54s; }
	[data-menu-status="open"] .nav-center__list > li:nth-child(n+8) > .nav-link,
	[data-menu-status="open"] .nav-center__list > li:nth-child(n+8) .nav-lang { transition-delay: 0.6s; }
	[data-menu-status="open"] .nav-logo__img--licht {
		display: none;
	}
	[data-menu-status="open"] .nav-logo__img--donker {
		display: block;
	}

	[data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__overflow {
		grid-template-rows: 1fr;
	}
	[data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__content-li {
		opacity: 1;
		transform: translate(0em, 0px);
	}
	[data-dropdown-toggle="open"] .nav-link__dropdown-icon {
		transform: rotate(180deg);
	}

	/* Contrast van de burger-lijntjes op lichte secties */
	body.header-dark .menu-button__line { background-color: var(--c-beige); }
}

@media screen and (max-width: 767px) {
	/* Blokken */
	.kolommen { grid-template-columns: 1fr; gap: 0.5rem; }
	.kolommen__col--tweede { transform: none; }

	.tekst-media__grid { display: flex; flex-direction: column; gap: 0; }
	.tekst-media__foto { width: 100%; }
	.tekst-media__box { width: calc(100% - 2rem); margin: -3rem auto 0; }
	/* Wint van de desktopregel met :has (margin-top 51%) */
	.tekst-media__grid--foto-rechts:has(.tekst-media__titels) .tekst-media__box { margin-top: -3rem; }
	.tekst-media__titels {
		position: static;
		margin-top: 3.5rem;
		align-self: flex-start;
		pointer-events: auto;
	}

	.site-footer__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

@media screen and (max-width: 479px) {
	body { font-size: 18px; }

	.nav-logo { width: 9em; }
	.nav-end { grid-column-gap: 0.5em; }
	.menu-button { width: 2.5em; height: 2.5em; }

	.nav-dropdown__content { grid-template-columns: 1fr; }
	.nav-dropdown__link { aspect-ratio: 16 / 10; }

	.welkom__fotos { grid-template-columns: 1fr; }
	.welkom__foto--klein { margin-top: 0; }

	.spec__intro,
	.cta__tekst,
	.tab-description { font-size: 18px; }

	.tab-content__item { padding-top: 1.25em; padding-bottom: 1.25em; }
	.tab-content__item-main { grid-column-gap: 1em; }
	.tab-content__item-detail { padding-left: 3em; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.nav-dropdown,
	.nav-dropdown__content-li,
	.nav-bg,
	.nav-center,
	.nav-center__list > li > .nav-link,
	.nav-center__list > li .nav-lang,
	.welkom__foto {
		transition: none;
	}
	.welkom__foto { transform: none; }
	.tekst-media__foto[data-parallax] img,
	.tab-visual__inner[data-parallax] .tab-image {
		transform: none;
	}
}