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

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 {
	/* 212px = hoogte fotokaart + paddings rondom (Figma: totaal 400px) */
	--nav-bg-height: calc(212px + 2em + 3em + 2.5em + 3em);
	--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;
	pointer-events: none;
}

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

.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__dropdown-icon {
	width: 0.75em;
	transition: transform var(--duration-normal) var(--cubic-default);
}

.nav-dropdown {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	width: 100%;
	padding-top: 2.5em;
	padding-bottom: 3em;
	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);
	border-radius: 0.25em;
	flex-flow: column;
	flex: 1;
	justify-content: flex-end;
	align-items: stretch;
	height: 212px;
	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 ———— */
[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;
	}
}

[data-dropdown-toggle] {
	transition: background-color var(--duration-fast) var(--cubic-default), 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);
	}
}

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

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="page"] .nav-link__label::after {
	transform: scale(1, 1);
	transform-origin: left center;
}

/* =========================================================
   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;
	will-change: clip-path;
	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 {
	will-change: transform;
	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 */
	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__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__mask {
	position: absolute;
	inset: 0;
	background: var(--c-green);
	opacity: 0.5;
}

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

/* Overloop naar de live canvaskleur zodat de hero naadloos in het
   scroll-achtergrondsysteem overgaat. */
.hero__gradient-bottom {
	position: absolute;
	inset: auto 0 0;
	height: 26%;
	background: linear-gradient(to bottom, rgba(247, 243, 237, 0), var(--bg));
}

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

/* 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.
   ========================================================= */
.hero__media[data-parallax] .hero__img {
	transform: translateY(var(--py, 0)) scale(1.08);
	will-change: transform;
}

.tekst-media__foto[data-parallax] img {
	transform: translateY(var(--py, 0)) scale(1.12);
	will-change: transform;
}

.tab-visual__inner[data-parallax] .tab-image {
	transform: translateY(var(--py, 0)) scale(1.1);
	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;
}

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

.tab-content__bottom {
	flex-flow: column;
	justify-content: space-between;
	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 (smalle titel links, tekst rechts)
   ========================================================= */
.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(24px, 2.4vw, 30px);
	line-height: 1.15;
	margin: 0;
}

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

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

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

/* =========================================================
   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 h4 {
	font-size: clamp(22px, 2.4vw, 30px);
	color: var(--c-text);
	margin: 1.1em 0 0.55em;
}

/* =========================================================
   BLOK: STAPELKAARTEN (Osmo stacking cards)
   ========================================================= */
.section--stapelkaarten {
	padding-block: 0;
}

.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 {
	margin-top: 0;
}

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

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
	background: var(--c-grey);
	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;
	}
	[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: 2rem;
		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,
	.welkom__foto {
		transition: none;
	}
	.welkom__foto { transform: none; }
	.hero__media[data-parallax] .hero__img,
	.tekst-media__foto[data-parallax] img,
	.tab-visual__inner[data-parallax] .tab-image {
		transform: none;
	}
}