/* ==========================================================================
   Variabelen & Thema Configuratie
   ========================================================================== */
:root {
	/* Kleurenpalet */
	--color-primary: #1f2d5b;
	--color-primary-dark: #151e3d;
	--color-white: #fff;
	--color-icon-red: #ef4444;
	--color-icon-green: #22c55e;
	--color-icon-yellow: #f59e0b;
	--color-icon-orange: #f97316;
	--color-accent-blue: #e0efff;
	--color-bg-light: #f8fafc;
	--color-text-dark: #2d3748;
	--color-text-light: #64748b;

	/* Vormgeving */
	--border-radius-soft: 20px;
	--border-radius-btn: 30px;
	--border-radius-hero: 100px;
	--box-shadow-soft: 0 10px 30px rgba(31, 45, 90, 0.08);
	--box-shadow-hover: 0 20px 40px rgba(31, 45, 90, 0.15);
	--transition-speed: all 0.4s ease-in-out;

	/* Typografie (Fonts) */
	--font-header: "Poppins", sans-serif;
	--font-body: "Source Sans Pro", sans-serif;

	/* 1. Fluid Typografie (Clamp) */
	--fs-body: clamp(1rem, 0.96rem + 0.21vw, 1.125rem);
	--fs-h6: clamp(1rem, 0.95rem + 0.23vw, 1.125rem);
	--fs-h5: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
	--fs-h4: clamp(1.5rem, 1.32rem + 0.91vw, 2rem);
	--fs-h3: clamp(1.75rem, 1.43rem + 1.59vw, 2.625rem);
	--fs-h2: clamp(2rem, 1.45rem + 2.73vw, 3.5rem);
	--fs-h1: clamp(2.25rem, 1.5rem + 3.75vw, 4.5rem);

	/* 4. Intelligente Line-Heights */
	--lh-tight: 1.1;
	--lh-medium: 1.3;
	--lh-loose: 1.6;

	/* 2. Fluid Spacing (Clamp) */
	--space-section: clamp(3rem, 6vh, 6rem);
	--space-gap: clamp(1rem, 2vw, 2rem);
	--space-flow: 1.5em;
}

/* ==========================================================================
   Reset & Basis
   ========================================================================== */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* 6. Formulierelementen en SVG resets */
:where(input, button, textarea, select) {
	font: inherit;
}

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

body {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	color: var(--color-text-dark);
	background-color: var(--color-white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
}

#main-content {
	flex: 1 0 auto; /* Zorgt dat de footer altijd onderaan de viewport blijft bij korte pagina's */
	position: relative;
	z-index: 5;
	background-color: transparent; /* Aangepast naar transparant zodat bg-circuit-line op de achtergrond zichtbaar blijft */
}

/* ==========================================================================
   Typografie Elementen
   ========================================================================== */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-family: var(--font-header);
	font-weight: 600;
	color: var(--color-primary);
	margin-block-end: 0.5em; /* Moderne logische property voor margin-bottom */

	/* Moderne Text-Rendering & Overflow */
	text-wrap: balance;
	overflow-wrap: anywhere;
}

h1,
.h1 {
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
}

h2,
.h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
}

h3,
.h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-medium);
}

h4,
.h4 {
	font-size: var(--fs-h4);
	line-height: var(--lh-medium);
}

h5,
.h5 {
	font-size: var(--fs-h5);
	line-height: var(--lh-loose);
}

h6,
.h6 {
	font-size: var(--fs-h6);
	line-height: var(--lh-loose);
}

p {
	margin-block-end: 1em;
	text-wrap: pretty;
}

a {
	text-decoration: none;
	color: var(--color-primary);
	transition: var(--transition-speed);
}

/* Overerving links in headings (moderne pseudo-class) */
:where(h1, h2, h3, h4, h5, h6) a {
	color: inherit;
	text-decoration: none;
}

:where(strong, b) {
	font-weight: 600;
	color: var(--color-primary);
}

ul {
	list-style: none;
}

/* ==========================================================================
   Layout & Utilities
   ========================================================================== */
.container {
	width: 90%;
	max-width: 1200px;
	margin-inline: auto;

	/* Moderne logische property voor margin left/right */
}

.section-padding {
	padding-block: var(--space-section);

	/* Moderne logische property voor padding top/bottom */
}

/* 5. Flow Utility (Verticale ritme controle) */
.flow > * + * {
	margin-block-start: var(--space-flow);

	/* Voorkomt geneste margin-bottoms */
}

/* Hulpklassen */
.text-center {
	text-align: center;
}

.bg-light {
	background-color: var(--color-bg-light);
}

.relative {
	position: relative;
}

.z-10 {
	z-index: 10;
}

.mt-4 {
	margin-block-start: 1.5rem;
}

.overflow-hidden {
	overflow: hidden;
}

/* Einde globale CSS  */

/* SVG Achtergrond (Circuit Line) */
.bg-circuit-line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.8;
}

.bg-circuit-line svg {
	width: 100%;
	height: 100%;
}

/* Icoon Kleuren Classes */
.badge-icon,
.star-icon {
	display: inline-block;
	vertical-align: middle;
	width: 1.1em; /* Zorgt dat het icoon meeschaalt met de font-size */
	height: 1.1em;
	flex-shrink: 0; /* Voorkomt dat iconen worden platgedrukt in flexbox-containers */
}

.icon-red {
	color: var(--color-icon-red) !important;
}

.icon-green {
	color: var(--color-icon-green) !important;
}

.icon-yellow {
	color: var(--color-icon-yellow) !important;
}

.icon-orange {
	color: var(--color-icon-orange) !important;
}

/* Section Titles */
.section-title {
	margin-bottom: 3.5rem;
	position: relative;
	z-index: 10;
	text-align: center;
}

.section-title h2 {
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	letter-spacing: -0.5px;
	background-color: var(--color-white);
	display: inline-block;
	padding: 10px 30px;
	position: relative;
	z-index: 50;
	border-radius: 8px;
}

.section-title p {
	color: var(--color-text-light);
	font-size: 1.15rem;
	max-width: 600px;
	margin: 0 auto;
}

/* Verwijder marking effect indien gewenst via een class */
.no-marking h2 {
	background-color: transparent !important;
	padding: 10px 0 !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	padding: 0.9rem 2.2rem;
	border-radius: var(--border-radius-btn);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	border: 2px solid transparent;
	transition: var(--transition-speed);
	font-family: var(--font-header);
}

.btn-primary {
	background: linear-gradient(
		135deg,
		var(--color-primary) 0%,
		var(--color-primary-dark) 100%
	);
	color: var(--color-white);
	box-shadow: 0 8px 20px rgba(31, 45, 90, 0.25);
}

.btn-primary:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 12px 25px rgba(31, 45, 90, 0.35);
	color: var(--color-white);
}

.btn-secondary {
	background-color: var(--color-accent-blue);
	color: var(--color-primary);
	box-shadow: var(--box-shadow-accent);
}

.btn-secondary:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
}

.btn-light {
	background-color: var(--color-white);
	color: var(--color-primary);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.btn-light:hover {
	background-color: var(--color-accent-blue);
	transform: translateY(-3px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.btn-outline {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--color-white);
}

.btn-outline:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--color-white);
}

.btn-lg {
	padding: 1.1rem 3rem;
	font-size: 1.15rem;
}

/* ==========================================================================
   Header & Navigation (OPGENOMEN)
   ========================================================================== */
.site-header {
	background-color: var(--color-white);
	position: fixed;
	left: 0;
	width: 100%;
	top: 0;
	z-index: 1000;
	box-shadow: none;
	transition: var(--transition-speed);
}

/* WordPress Admin Bar Fix: Voorkomt dat de header achter de beheerbalk valt */
body.admin-bar {
	margin-top: 0 !important;
} /* We regelen de marge via de header positionering */
body.admin-bar .site-header {
	top: 32px;
}

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

	#main-content {
		/* Compensatie voor de fixed header op mobiel om overlap van de eerste sectie te voorkomen */
		padding-top: 0;
	}
}

.site-header.is-scrolled {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.site-header.is-scrolling-down {
	transform: translateY(-100%);
}

.site-header.is-scrolling-up {
	transform: translateY(0);
}

.top-utility-bar {
	background-color: transparent;
	padding: 0.4rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	transition: var(--transition-speed);
	max-height: 60px;
	overflow: hidden;
	opacity: 1;
}

.site-header.is-scrolled .top-utility-bar {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: none;
	opacity: 0;
}

/* 1. Hero Sectie (Exact 60vh) */
.contact-hero-minimal {
	height: 60vh;
	min-height: 500px;
	padding-top: 100px;
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	border-bottom-left-radius: var(--border-radius-hero);
	border-bottom-right-radius: var(--border-radius-hero);
}

.contact-hero-minimal .hero-content {
	max-width: 800px;
	z-index: 2;
}

.contact-hero-minimal h1 {
	font-size: 4rem;
	margin-bottom: 1.5rem;
	color: var(--color-white);
}

.contact-hero-minimal p {
	font-size: 1.25rem;
	opacity: 0.9;
	line-height: 1.6;
}

.utility-content {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	max-width: 1200px;
	margin: 0 auto;
	width: 90%;
}

.util-btn {
	padding: 0.35rem 1.2rem;
	border-radius: 30px;
	font-size: 0.8rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-header);
	transition: var(--transition-speed);
	min-height: 32px; /* Ensure button always has height */
	text-decoration: none;
}

/* ===================
   CHAT KNOP
   =================== */
.chat-btn {
	background-color: #f0fdf4;
	color: var(--color-primary);
}

.chat-btn .icon-green {
	color: var(--color-icon-green) !important;
	flex-shrink: 0; /* Prevent icon from squishing */
}

.chat-btn:hover {
	background-color: var(--color-icon-green);
	color: var(--color-white);
}

.chat-btn:hover .icon-green {
	color: var(--color-white) !important;
}

/* ===================
   TELEFOON KNOP
   =================== */
.phone-btn {
	background-color: #fef2f2;
	color: var(--color-primary);
}

.phone-btn .icon-red {
	color: var(--color-icon-red) !important;
	flex-shrink: 0;
}

.phone-btn:hover {
	background-color: var(--color-icon-red);
	color: var(--color-white);
}

.phone-btn:hover .icon-red {
	color: var(--color-white) !important;
}

.header-main {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 1.2rem 0;
	position: relative;
	transition: var(--transition-speed);
}

.site-header.is-scrolled .header-main {
	padding: 0.8rem 0;
}

.logo {
	position: absolute;
	top: -1.5rem;
	left: 0;
	z-index: 1100;
	transform: translateY(0);
	transition: var(--transition-speed);
}

.site-header.is-scrolled .logo {
	top: 50%;
	transform: translateY(-50%);
	bottom: auto;
}

.logo img {
	height: 80px;
	width: auto;
	display: block;
	transition: var(--transition-speed);
}

.site-header.is-scrolled .logo img {
	height: 40px;
}

.main-nav ul {
	display: flex;
	gap: 2.5rem;
}

.main-nav a {
	color: var(--color-primary);
	font-weight: 600;
	font-size: 0.95rem;
	position: relative;
	padding: 0.2rem 0;
	font-family: var(--font-header);
}

.main-nav a::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--color-primary);
	transition: var(--transition-speed);
}

.main-nav a:hover::after {
	width: 100%;
}

/* Active Nav Link */
.main-nav a.active {
	color: var(--color-primary) !important;
	font-weight: 700;
}

.main-nav a.active::after {
	width: 100%;
}

.mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	width: 30px;
	z-index: 1200;
}

.mobile-menu-toggle span {
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--color-primary);
	transition: var(--transition-speed);
	border-radius: 2px;
}

/* ==========================================================================
   Mobiele Weergave (Breakpoint op 768px)
   ========================================================================== */
@media (max-width: 768px) {
	/* 1. Laat de hamburgerknop zien op mobiel */
	.mobile-menu-toggle {
		display: flex;
	}

	/* 2. Maak van de navigatie een zijbalk die buiten beeld staat */
	.main-nav {
		position: fixed;
		top: 0;
		right: -100%;

		/* Dit duwt het menu rechts buiten het scherm */
		width: 250px;
		height: 100vh;
		background-color: var(--color-white, #fff);
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
		transition: right 0.4s ease-in-out;

		/* Zorgt voor de vloeiende slide animatie */

		/* Z-index: Moet onder de toggle knop (1200) maar boven de logo/rest (1100) */
		z-index: 1150;
		padding-top: 100px;

		/* Ruimte vrijhouden bovenaan voor de sluitknop */
	}

	/* Zet de linkjes netjes onder elkaar in plaats van naast elkaar */
	.main-nav ul {
		flex-direction: column;
		align-items: flex-start;
		padding: 0 2rem;
		gap: 1.5rem;
	}

	/* =========================================
       De Actieve Status (Getriggerd door JavaScript)
       ========================================= */

	/* Laat het menu in beeld schuiven als .is-open wordt toegevoegd */
	.main-nav.is-open {
		right: 0;
	}

	/* Animeer de 3 hamburgerlijntjes in een "X" */
	.mobile-menu-toggle.is-open span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.mobile-menu-toggle.is-open span:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-toggle.is-open span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
}

/* ==========================================================================
   Hero & Heritage Badge
   ========================================================================== */
.hero-wrapper {
	position: relative;
	margin-bottom: 0; /* Remove gap to next section for a seamless full-width look */
	z-index: 10;
	background-color: transparent;
}

.hero {
	background: linear-gradient(
		160deg,
		var(--color-primary) 0%,
		var(--color-primary-dark) 100%
	);
	color: var(--color-white);
	padding: 120px 0 100px 0; /* Adjusted for fixed header and vertical centering */
	min-height: 100vh; /* Cover the whole page height */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-bottom-left-radius: var(--border-radius-hero);
	border-bottom-right-radius: var(--border-radius-hero);
	position: relative;
	z-index: 1;
	box-shadow: none;
}

.hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
		circle at 20% 30%,
		rgba(224, 239, 255, 0.05) 0%,
		transparent 50%
	);
	pointer-events: none;
}

.hero .container {
	max-width: none; /* Remove boxed content width restriction */
	width: 100%;
}

.hero h1 {
	color: var(--color-white);
	font-size: 3.8rem;
	max-width: 950px;
	margin: 0 auto 1.8rem auto;
	line-height: 1.15;
	letter-spacing: -1px;
}

.hero p {
	font-size: 1.3rem;
	color: rgba(255, 255, 255, 0.9);
	max-width: 800px;
	margin: 0 auto 2.8rem auto;
	line-height: 1.6;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
}

.usp-overlay {
	position: absolute;
	bottom: -30px;
	left: 0;
	width: 100%;
	z-index: 10;
	pointer-events: none;
}

.usp-grid-modern {
	display: flex;
	justify-content: space-between;
	max-width: 850px;
	margin: 0 auto;
	pointer-events: auto;
}

.usp-card-modern {
	background: var(--color-white);
	padding: 1rem 2rem;
	border-radius: var(--border-radius-btn);
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: var(--box-shadow-soft);
	color: var(--color-primary);
	font-weight: 600;
	font-family: var(--font-header);
	font-size: 0.95rem;
}

.usp-card-modern.bg-light-blue {
	background-color: var(--color-accent-blue);
}

.heritage-badge {
	position: absolute;
	bottom: -75px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	background: var(--color-white);
	border-radius: 50%;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 20px 40px rgba(31, 45, 90, 0.15);
	border: 1px solid rgba(31, 45, 90, 0.05);
	transition: var(--transition-speed);
}

.heritage-badge:hover {
	transform: translateX(-50%) translateY(-5px);
	box-shadow: 0 25px 50px rgba(31, 45, 90, 0.2);
}

.heritage-badge svg {
	border-radius: 50%;
}

/* ==========================================================================
   Cards & Grids
   ========================================================================== */
.card {
	background: var(--color-white);
	border-radius: var(--border-radius-soft);
	padding: 2.5rem;
	box-shadow: var(--box-shadow-soft);
	transition: var(--transition-speed);
	border: 1px solid rgba(224, 239, 255, 0.3);
	position: relative;
	z-index: 10;
}

.hover-lift:hover {
	transform: translateY(-12px);
	box-shadow: var(--box-shadow-hover);
	border-color: var(--color-accent-blue);
}

.split-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2.5rem;
}

.target-card {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.target-card .btn {
	margin-top: auto;
}

.target-card .card-icon {
	font-size: 3.5rem;
	margin-bottom: 1.5rem;
	background: linear-gradient(
		135deg,
		var(--color-accent-blue) 0%,
		#f1f8ff 100%
	);
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24px;
	margin: 0 auto 1.5rem auto;
	color: var(--color-primary);
	box-shadow: 0 10px 20px rgba(224, 239, 255, 0.4);
}

/* Recognition & About */

.image-placeholder {
	background-color: var(--color-accent-blue);
	height: 450px;
	border-radius: var(--border-radius-soft);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.image-placeholder i {
	font-size: 5rem;
	margin-bottom: 1rem;
	color: var(--color-primary);
	opacity: 0.2;
}

.image-placeholder p {
	font-family: var(--font-header);
	font-weight: 600;
	color: var(--color-primary);
}

.shadow-lg {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.about-us {
	position: relative;
}

.watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 25vw;
	font-weight: 800;
	font-family: var(--font-header);
	color: var(--color-accent-blue);
	opacity: 0.25;
	z-index: 1;
	pointer-events: none;
}

/* Partner Marquee */
.partner-section {
	padding: 4rem 0;
	overflow: hidden;
}

.marquee-container {
	width: 100%;
	overflow: hidden;
	position: relative;
	mask-image: linear-gradient(
		to right,
		transparent,
		black 10%,
		black 90%,
		transparent
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		black 10%,
		black 90%,
		transparent
	);
}

.marquee-content {
	display: flex;
	width: max-content;
	align-items: center;
	animation: scroll-left 40s linear infinite;
}

.marquee-content img {
	height: 60px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: var(--transition-speed);
	margin-right: 6rem;
}

.marquee-content img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

@keyframes scroll-left {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.text-link-all-projects {
	font-family: var(--font-header);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.1rem;
}

.text-link-all-projects:hover {
	color: var(--color-icon-red);
	gap: 1.2rem;
}

/* Reviews */
.reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}

.review-card .stars {
	margin-bottom: 1rem;
	font-size: 1.1rem;
	display: flex;
	gap: 4px;
}

.review-card .star-icon {
	width: 1em; /* Specifieke schaling voor sterren binnen de reviews */
	height: 1em;
}

.review-card p {
	font-style: italic;
	color: var(--color-text-dark);
	margin-bottom: 1.5rem;
	font-size: 1.05rem;
}

.review-card strong {
	color: var(--color-primary);
	font-family: var(--font-header);
}

/* Final CTA */
.final-cta {
	padding-bottom: 6rem;
}

.cta-box {
	max-width: 800px;
	margin: 0 auto;
	padding: 4rem 3rem;
	text-align: center;
	border-top: 4px solid var(--color-accent-blue);
}

.cta-box h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.cta-buttons {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.cta-trust-badges {
	display: flex;
	justify-content: center;
	gap: 3rem;
	flex-wrap: wrap;
	margin-top: 2rem;
	font-weight: 600;
	color: var(--color-primary);
	font-family: var(--font-header);
}

.cta-trust-badges span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: linear-gradient(
		160deg,
		var(--color-primary) 0%,
		var(--color-primary-dark) 100%
	);
	color: var(--color-white);
	border-top-left-radius: var(--border-radius-hero);
	border-top-right-radius: var(--border-radius-hero);
	padding-top: 5rem;
	position: relative;
	overflow: hidden;
	z-index: 10;
}

.site-footer::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
		circle at 80% 20%,
		rgba(224, 239, 255, 0.03) 0%,
		transparent 50%
	);
	pointer-events: none;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1.2fr 1.5fr;
	gap: 3rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
	z-index: 10;
}

.footer-logo {
	margin-bottom: 1.5rem;
}

.footer-logo img {
	max-width: 220px;
	height: auto;
	display: block;
}

.footer-info .h3 {
	color: var(--color-white);
	margin-bottom: 1rem;
	font-size: 1.8rem;
}

.footer-info .h3 span {
	color: var(--color-accent-blue);
	font-weight: 300;
}

.footer-info p {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 2rem;
	max-width: 350px;
}

.contact-methods {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	align-items: flex-start;
}

.contact-method {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	transition: var(--transition-speed);
}

.contact-method span {
	transition: var(--transition-speed);
}

.icon-pill {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-speed);
	flex-shrink: 0;
}

/* Initial Pill Backgrounds */
.phone-pill {
	background-color: #fef2f2;
}

.mail-pill {
	background-color: #fff7ed;
}

.chat-pill {
	background-color: #f0fdf4;
}

/* Hover State Logic */
.contact-method:hover span {
	color: #f1f5f9; /* Subtle off-white */
}

.contact-method:hover .icon-pill {
	background-color: var(--color-white) !important;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	transition: var(--transition-speed);
}

.contact-method:hover .icon-red,
.contact-method:hover .icon-orange,
.contact-method:hover .icon-green {
	color: var(--color-primary) !important;
	transition: var(--transition-speed);
}

.footer-links .h4,
.footer-hours .h4,
.footer-address .h4 {
	color: var(--color-white);
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
}

.footer-links li {
	margin-bottom: 0.8rem;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
	color: var(--color-white);
}

.footer-address p {
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
	margin-bottom: 1.2rem;
}

.footer-address strong {
	color: var(--color-white);
	font-weight: 600;
	font-family: var(--font-header);
}

.hours-list li {
	display: flex;
	justify-content: space-between;
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.7);
}

/* Openingstijden Plugin */
.lz-openingstijden__status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.lz-openingstijden__indicator {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	background-color: var(--color-icon-red);
	border-radius: 50%;
	transition: background-color var(--transition-speed);
}

.lz-openingstijden__status-text {
	color: rgba(255, 255, 255, 0.7);
	transition: color var(--transition-speed);
}

.lz-openingstijden--geopend .lz-openingstijden__indicator {
	background-color: var(--color-icon-green);
}

.lz-openingstijden--geopend .lz-openingstijden__status-text {
	color: var(--color-icon-green);
}

.footer-authority-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 3rem;
	flex-wrap: wrap;
	gap: 2rem;
}

.authority-title .h4 {
	color: var(--color-white);
	margin: 0;
}

.authority-logos-horizontal {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.cert-box {
	background: var(--color-white);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	height: 60px;
	min-width: 120px;
	width: auto;
	padding: 10px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
	flex: 0 0 auto;
	overflow: hidden;
}

.cert-box img {
	max-width: 100%;
	max-height: 40px; /* Hoogte van cert-box minus padding */
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.footer-bottom {
	background-color: #151e3d;
	padding: 1.5rem 0;
	margin-top: 3rem;
}

.footer-bottom .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.9rem;
}

.footer-bottom p {
	margin-bottom: 0;
}

.footer-link {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: var(--transition-speed);
}

.footer-link:hover {
	color: #f5f5f5; /* Off-white */
}

.legal-links {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	margin-bottom: 0;
}

.legal-links a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}

.legal-links a:hover {
	color: var(--color-white);
}

/* ==========================================================================
   Responsive / Mobile Tweaks
   ========================================================================== */
@media (max-width: 1024px) {
	.about-image {
		order: 2;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.hero h1 {
		font-size: 2.8rem;
	}

	.usp-grid-modern {
		max-width: 100%;
		padding: 0 1rem;
	}
}

@media (max-width: 768px) {
	:root {
		--container-padding: 30px;
		--section-spacing: 4rem;
	}

	.top-utility-bar {
		display: none;
	}

	.header-main {
		padding: 1rem 0;
		justify-content: space-between;
	}

	.logo {
		position: relative;
		top: 0;
	}

	.site-header.is-scrolled .logo {
		top: 0;
		transform: none;
		bottom: auto;
	}

	.logo img {
		height: 50px;
	}

	.site-header.is-scrolled .logo img {
		height: 45px;
	}

	.mobile-menu-toggle {
		display: flex;
	}

	.main-nav {
		position: fixed;
		top: 0;
		right: -100%;
		width: 80%;
		height: 100vh;
		background-color: var(--color-white);
		padding: 6rem 2rem;
		box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
		transition: 0.4s ease;
		z-index: 1150;
	}

	.main-nav.active {
		right: 0;
	}

	.main-nav ul {
		flex-direction: column;
		gap: 2rem;
	}

	.main-nav a {
		font-size: 1.2rem;
	}

	.mobile-menu-toggle.active span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.mobile-menu-toggle.active span:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-toggle.active span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.hero {
		padding: 5rem 0 7rem 0;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
	}

	.hero h1 {
		font-size: 2.2rem;
	}

	.hero-buttons {
		flex-direction: column;
		align-items: center;
	}

	.btn {
		width: 100%;
		max-width: 280px;
	}

	.usp-overlay {
		display: none;
	}

	.heritage-badge {
		bottom: -50px;
		width: 100px;
		height: 100px;
		padding: 4px;
	}

	.section-padding {
		padding: 4rem 0;
	}

	.section-title h2 {
		font-size: 2rem;
	}

	.cta-box {
		padding: 2.5rem 1rem;
	}

	.cta-box h2 {
		font-size: 1.7rem;
	}

	.cta-buttons {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 0.6rem;
	}

	.cta-buttons .btn {
		flex: 1 1 50%;
		max-width: none;
		padding: 0.8rem 0.4rem;
		font-size: 0.85rem;
	}

	.cta-buttons .btn span {
		white-space: normal;
		line-height: 1.2;
	}

	.cta-buttons .badge-icon {
		width: 14px !important;
		height: 14px !important;
		margin-inline: 4px !important;
	}

	.cta-trust-badges {
		gap: 0.8rem;
		font-size: 0.8rem;
		margin-top: 1.5rem;
	}

	.footer-info,
	.footer-links,
	.footer-address,
	.footer-hours {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-info p {
		text-align: center;
	}

	.contact-methods {
		align-items: flex-start;
	}

	.footer-links ul {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.hours-list {
		width: 100%;
		max-width: 300px;
	}

	.footer-authority-row {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.authority-logos-horizontal {
		justify-content: center;
	}

	.footer-bottom .container {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.legal-links {
		flex-direction: column;
		gap: 0.5rem;
		margin-top: 1rem;
	}
}

.channels-grid {
	display: grid;

	/* Responsive grid dat automatisch schaalt op basis van beschikbare ruimte */
	grid-template-columns: repeat(
		auto-fit,
		minmax(clamp(260px, 22vw, 360px), 1fr)
	);
	gap: var(--space-gap);
}

.channel-card {
	background-color: var(--color-white);
	border-radius: var(--border-radius-soft);
	box-shadow: var(--box-shadow-soft);
	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: var(--transition-speed);
}

.channel-icon-circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block-end: 1.75rem;
	transition: var(--transition-speed);
}

.channel-icon-img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	display: block;
}

.channel-card--red .channel-icon-circle {
	background-color: rgba(239, 68, 68, 0.08);
}

.channel-card--green .channel-icon-circle {
	background-color: rgba(34, 197, 94, 0.08);
}

.channel-card--orange .channel-icon-circle {
	background-color: rgba(249, 115, 22, 0.08);
}

.channel-card:hover .channel-icon-circle {
	transform: scale(1.05);
}

.channel-card h3 {
	font-size: var(--fs-h4);
	color: var(--color-primary);
	margin-block-end: 0.5em;
}

.channel-card p {
	color: var(--color-text-light);
	margin-block-end: 2rem;
	text-wrap: pretty;
	max-width: 40ch;
}

.channel-card .btn {
	margin-block-start: auto;
}

/* ==========================================================================
   Component: Klik-om-te-laden Kaart met Screenshot
   ========================================================================== */
.map-wrapper {
	height: 500px;
	position: relative;
	background-color: var(--color-bg-light);
}

.map-placeholder-bg {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* De overlay over de screenshot */
.map-overlay {
	position: absolute;
	inset: 0; /* Modern shorthand voor top/left/right/bottom: 0 */
	background: rgba(
		21,
		30,
		61,
		0.25
	); /* Jouw primary donkerblauwe kleur met transparantie */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: var(--transition-speed);
}

/* Subtiele donkerdere overlay als je over de kaart beweegt */
.map-placeholder-bg:hover .map-overlay {
	background: rgba(21, 30, 61, 0.35);
}

/* Live iframe styling zodra deze geïnjecteerd is */
.map-wrapper iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Map modal overlay */
.map-modal-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(21, 30, 61, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1rem;
}

.map-modal-dialog {
	position: relative;
	width: min(90vw, 960px);
	aspect-ratio: 16 / 9;
	border-radius: var(--border-radius-soft);
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.map-modal-dialog iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.map-modal-close {
	position: absolute;
	top: 0.625rem;
	right: 0.75rem;
	z-index: 1;
	background-color: var(--color-primary);
	color: var(--color-white);
	border: none;
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-speed);
}

.map-modal-close:hover {
	background-color: var(--color-primary-dark);
}

/* ==========================================================================
   Component: Proces / Stappen-grid
   ========================================================================== */
.process-grid {
	display: grid;

	/* Responsive layout: switcht automatisch naar 1 kolom op mobiel, max 3 kolommen op desktop */
	grid-template-columns: repeat(
		auto-fit,
		minmax(clamp(250px, 25vw, 350px), 1fr)
	);
	gap: var(--space-gap);

	/* Initialiseer de CSS teller voor de stappen */
	counter-reset: process-counter;
}

.process-step {
	position: relative;
	padding-inline: 1rem;
}

/* De automatische stapnummering via CSS counters */
.step-number {
	counter-increment: process-counter;
	width: 56px;
	height: 56px;
	background-color: var(--color-primary);
	color: var(--color-white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.25rem;
	font-family: var(--font-header);
	margin-inline: auto;
	margin-block-end: 1.5rem;
	box-shadow: var(--box-shadow-soft);
	position: relative;
	z-index: 2; /* Zorgt dat de bol over de verbindingslijn heen valt */
}

/* Injecteer het dynamische nummer in de bol */
.step-number::before {
	content: counter(process-counter);
}

/* De verbindingslijn tussen de stappen (Alleen zichtbaar op schermen groter dan mobiel) */
@media (min-width: 768px) {
	.process-step::after {
		content: "";
		position: absolute;

		/* Positioneer de lijn exact op de helft van de nummer-bol */
		top: 28px;

		/* Laat de lijn lopen van het midden van deze kaart naar de volgende kaart */
		left: calc(50% + 28px);
		width: calc(100% - 56px);
		height: 2px;
		background-color: var(--color-accent-blue);
		z-index: 1;
		transition: var(--transition-speed);
	}

	/* Verberg de verbindingslijn bij de allerlaatste stap */
	.process-step:last-child::after {
		display: none;
	}
}

.process-step h3 {
	font-size: var(--fs-h5); /* Gekoppeld aan jouw fluid h5 clamp */
	color: var(--color-primary);
	margin-block-end: 0.5em;
}

.process-step p {
	color: var(--color-text-light);
	font-size: var(--fs-body);
	text-wrap: pretty;
	max-width: 35ch; /* Optimale breedte voor leesbaarheid in kolommen */
	margin-inline: auto;
}

.faq-grid-2col {
	display: grid;

	/* Schakelt automatisch tussen 1 kolom op mobiel en 2 kolommen op desktop */
	grid-template-columns: repeat(
		auto-fit,
		minmax(clamp(300px, 40vw, 550px), 1fr)
	);
	gap: var(--space-gap);
	align-items: start;
	text-align: left;
}

.diensten-hero {
	min-height: 75vh;

	/* Gebruik padding-block in plaats van harde viewporthoogte voor betere tekst-veiligheid */
	padding-block: calc(var(--space-section) * 1.5);
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom-left-radius: var(--border-radius-hero);
	border-bottom-right-radius: var(--border-radius-hero);
}

/* Geforceerde kleur-overerving voor de titel op de donkere achtergrond */
.diensten-hero h1 {
	color: var(--color-white);
	margin-block-end: 1rem;
}

/* Schone styling voor de introductietekst */
.hero-lead {
	font-size: clamp(
		1.125rem,
		1.08rem + 0.2vw,
		1.25rem
	); /* Subtiele fluid lead font-size */
	line-height: var(--lh-loose);
	color: rgba(
		255,
		255,
		255,
		0.9
	); /* Licht transparant wit voor premium contrast */
	max-width: 80ch; /* Houdt de tekstregels perfect leesbaar (nooit te breed) */
	margin-inline: auto; /* Centreert de paragraaf netjes */
	text-wrap: pretty;
}

.hero-segment-buttons {
	display: flex;
	gap: var(--space-gap); /* Gekoppeld aan jouw fluid gap */
	justify-content: center;
	flex-wrap: wrap;
}

/* Zorg dat outline knoppen binnen de hero goed leesbaar zijn op het donkerblauw */
.diensten-hero .btn-outline {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.diensten-hero .btn-outline:hover {
	background-color: var(--color-white);
	color: var(--color-primary);
	border-color: var(--color-white);
}

.services-grid {
	display: grid;

	/* Volledig fluid grid dat automatisch schaalt van 1 naar 3 kolommen */
	grid-template-columns: repeat(
		auto-fit,
		minmax(clamp(280px, 25vw, 360px), 1fr)
	);
	gap: var(--space-gap);
	grid-auto-rows: auto auto auto;

	/* Gekoppeld aan jouw globale transitie-snelheid voor het soepel in- en uitklappen */
	transition: max-height var(--transition-speed);
	overflow: hidden;
	position: relative;
}

/* Geklapte status (toon ongeveer één rij kaarten) */

/* Geklapte status (toon 6 kaarten / 2 rijen op desktop) */
.services-grid.collapsed {
	max-height: 520px;
}

@media (max-width: 768px) {
	.services-grid.collapsed {
		max-height: 820px; /* Toont 3 kaarten op mobiel */
	}
}

/* Specifieke layout voor Zakelijk en Particulier secties */
#zakelijk .services-grid.collapsed,
#particulier .services-grid.collapsed {
	max-height: 400px; /* Desktop: 1 rij volledig zichtbaar (ong. 340px hoog), lichte start fade */
}

@media (max-width: 768px) {
	#zakelijk .services-grid.collapsed,
	#particulier .services-grid.collapsed {
		max-height: 850px; /* Mobiel: 2 kaarten volledig zichtbaar, 3e begint te faden */
	}

	#zakelijk .grid-fade-overlay,
	#particulier .grid-fade-overlay {
		height: 250px; /* Fade-out exact over de 3e/4e kaart op mobiel */
	}
}

/* Uitgeklapte status (schakelt soepel over via de transitie) */
.services-grid.expanded {
	max-height: 3500px; /* Veilige hoge waarde voor de transitie-afhandeling */
}

/* De visuele verloop-overlay (Fade-out) */
.grid-fade-overlay {
	position: absolute;
	inset-inline: 0;
	left: 0;
	right: 0;
	width: 100%;
	bottom: 0;
	height: 180px; /* Hoogte van het verloop voor een zachte overgang */

	/* Verloop naar wit als standaard achtergrond */
	background: linear-gradient(
		to top,
		var(--color-white) 40%,
		rgba(255, 255, 255, 0)
	);
	pointer-events: none; /* Zorgt ervoor dat de overlay nooit muisklikken blokkeert */

	/* STAPELING EN TRANSITIE FIX: */
	z-index: 15; /* Hoger dan de kaarten */
	opacity: 1;
	transition: opacity var(--transition-speed);
}

@media (max-width: 768px) {
	.grid-fade-overlay {
		height: 300px; /* Iets minder agressieve fade-out op mobiel zodat knop meer ruimte heeft */
	}
}

/* Pas het verloop aan wanneer het grid op de lichtgrijze achtergrond (.bg-light) staat */
.bg-light .grid-fade-overlay {
	background: linear-gradient(
		to top,
		var(--color-bg-light) 40%,
		rgba(248, 250, 252, 0)
	);
}

/* Verberg de fade-out overlay volledig en soepel zodra het grid opengeklapt is */
.services-grid.expanded .grid-fade-overlay {
	opacity: 0;
}

/* De Knop Container (Gegarandeerd bovenop de Fade) */
.expand-btn-container {
	display: flex;
	justify-content: center;
	margin-block-start: 1rem; /* Zorgt voor marge tussen grid/fade en de knop */
	padding-bottom: 2rem; /* Geeft de knop extra ademruimte eronder */

	/* POSITIONERING EN STAPELING FIX: */
	position: relative;
	z-index: 20;
}

/* Verberg de knop-container wanneer de class hide-on-expand actief is */
.services-grid.expanded + .expand-btn-container.hide-on-expand {
	display: none;
}

/* De daadwerkelijke toggle-knop */
.grid-toggle-btn {
	position: relative;
	z-index: 25;
	pointer-events: auto; /* Garandeert absolute klikbaarheid in de Pinegrow preview */
	box-shadow: var(
		--box-shadow-soft
	); /* Geeft de knop extra contrast bovenop de fade-waas */
}

/* Kaart Styling binnen het Grid */
.services-grid .service-card {
	padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 2vw, 2rem);
	text-align: center;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 0;
	justify-items: center;
	background-color: var(--color-white);
	border-radius: var(--border-radius-soft);
	box-shadow: var(--box-shadow-soft);

	/* Zorg dat de .hover-lift uit jouw globale CSS de juiste snelheid hanteert */
	transition: var(--transition-speed);
}

.services-grid .service-item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 0;
}

/* Icoon wrappers (Vervangers voor FontAwesome i-tags) */
.service-icon-wrapper {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block-end: 1.5rem;
	transition: var(
		--transition-speed
	); /* Subtiele schaling bij hover volgt dezelfde snelheid */
}

.service-icon-img {
	width: 48px;
	height: 48px;
	object-fit: contain; /* Voorkomt dat geüploade iconen met afwijkende maten vervormen */
	display: block;
}

/* Kleur-modifiers gekoppeld aan jouw root-variabelen */
.service-icon--red {
	color: var(--color-icon-red);
}

.service-icon--orange {
	color: var(--color-icon-orange);
}

.service-icon--green {
	color: var(--color-icon-green);
}

/* Subtiele extra actie bij hover op de kaart */
.service-card:hover .service-icon-wrapper {
	transform: scale(1.05);
}

.services-grid h3 {
	font-size: var(--fs-h5); /* Jouw fluid h5 clamp */
	color: var(--color-primary);
	margin-block-end: 0.75rem;
	line-height: var(--lh-tight);
	text-wrap: balance; /* Voorkomt lelijke afgebroken woorden in titels */
}

.services-grid p {
	font-size: var(--fs-body);
	color: var(--color-text-light);
	line-height: var(--lh-loose);
	text-wrap: pretty; /* Garandeert een strakke verdeling van de lopende tekst */
	margin-block-end: 0;
}

.traject-grid {
	display: grid;

	/* Responsive layout: switcht automatisch van 1 naar 2 kolommen op mobiel en tablet */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-gap);

	/* Initialiseer de CSS teller voor de traject-stappen */
	counter-reset: traject-counter;
	position: relative;
}

@media (min-width: 1024px) {
	.traject-grid {
		/* Forceer exact 4 kolommen naast elkaar op desktop breakpoints */
		grid-template-columns: repeat(4, 1fr);
	}
}

.traject-step {
	position: relative;
}

/* De stap-cirkels met automatische nummering */
.step-circle {
	counter-increment: traject-counter;
	width: 80px;
	height: 80px;
	background-color: var(--color-white);
	border: 4px solid var(--color-primary);
	color: var(--color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.75rem;
	font-family: var(--font-header);
	margin-inline: auto;
	margin-block-end: 1.5rem;
	position: relative;
	z-index: 3; /* Zorgt dat de cirkel ALTIJD over de verbindingslijn heen valt */
	transition: var(
		--transition-speed
	); /* Gekoppeld aan jouw globale transitie */
}

/* Injecteer het dynamische nummer via CSS */
.step-circle::before {
	content: counter(traject-counter);
}

/* Prachtige vloeiende hover-interactie op de cirkel */
.traject-step:hover .step-circle {
	background-color: var(--color-primary);
	color: var(--color-white);
	transform: scale(1.08);
}

/* Intelligente, modulaire verbindingslijn (Alleen zichtbaar op grote schermen waar kolommen naast elkaar staan) */
@media (min-width: 1024px) {
	.traject-step::after {
		content: "";
		position: absolute;

		/* Positioneer de lijn exact horizontaal in het midden van de 80px cirkel (40px vanaf top) */
		top: 40px;

		/* Laat de lijn lopen vanaf het hart van de huidige cirkel naar de volgende stap */
		left: 50%;
		width: 100%;
		height: 2px;
		background-color: var(--color-accent-blue);
		z-index: 1;
		transition: var(--transition-speed);
	}

	/* Verberg de verbindingslijn bij de allerlaatste stap van het traject */
	.traject-step:last-child::after {
		display: none;
	}
}

.traject-step h3 {
	font-size: var(--fs-h5); /* Gekoppeld aan jouw fluid typography clamp */
	color: var(--color-primary);
	margin-block-end: 0.5em;
	line-height: var(--lh-tight);
}

.traject-step p {
	color: var(--color-text-light);
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	text-wrap: pretty;
	max-width: 32ch; /* Beperkt regelbreedte voor rustige typografie in kolommen */
	margin-inline: auto;
	margin-block-end: 0;
}

.info-faq-grid {
	display: grid;

	/* Mobiel-eerst benadering: standaard 1 kolom, schakelt op desktop naar asymmetrisch grid */
	grid-template-columns: 1fr;
	gap: var(--space-gap);
	align-items: flex-start;
}

@media (min-width: 1024px) {
	.info-faq-grid {
		grid-template-columns: 1fr 1.2fr;
		gap: 4rem; /* Ruime ademruimte tussen de twee hoofdblokken op desktop */
	}
}

/* Linkerkolom Content */
.info-column h2 {
	font-size: var(--fs-h2); /* Jouw fluid h2 clamp */
	color: var(--color-primary);
	margin-block-end: 1rem;
}

.info-column p {
	font-size: var(--fs-body);
	color: var(--color-text-dark);
	line-height: var(--lh-loose);
	text-wrap: pretty;
}

/* Rechterkolom FAQ Lijst */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.faq-item {
	background-color: var(--color-white);
	border-radius: var(--border-radius-soft);
	box-shadow: var(--box-shadow-soft);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.faq-item:last-child {
	border-block-end: none;
	padding-block-end: 0;
}

.faq-header {
	display: flex;
	align-items: flex-start; /* Uitlijning bovenin bij langere vragen */
	gap: 1rem;
}

.faq-icon-wrapper {
	flex-shrink: 0; /* Voorkomt vervorming van het icoon */
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block-start: 0.15em; /* Lichte optische correctie met de regelhoogte van h3 */
}

.faq-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.faq-header h3 {
	font-size: var(--fs-h4);
	color: var(--color-primary);
	margin-block-end: 0;
	line-height: var(--lh-medium);
}

.faq-body p {
	color: var(--color-text-light);
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	margin-block-end: 0;
	text-wrap: pretty;

	/* Lijn het antwoord netjes uit met de tekst van de vraag, in plaats van onder het icoon */
	padding-inline-start: calc(28px + 1rem);
}

/* ===== FAQ Accordion ===== */

.faq-accordion-ready .faq-item {
	gap: 0;
	transition: box-shadow var(--transition-speed);
}

.faq-accordion-ready .faq-item:hover {
	box-shadow: var(--box-shadow-hover);
}

.faq-accordion-ready .faq-header {
	cursor: pointer;
	justify-content: space-between;
	user-select: none;
}

.faq-accordion-ready .faq-header::after {
	content: "";
	flex-shrink: 0;
	align-self: center;
	width: 20px;
	height: 20px;
	background-color: var(--color-primary);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	transition: transform var(--transition-speed);
}

.faq-accordion-ready .faq-item.is-open .faq-header::after {
	transform: rotate(180deg);
}

.faq-accordion-ready .faq-header:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: 8px;
}

.faq-accordion-ready .faq-body {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion-ready .faq-item.is-open .faq-body {
	grid-template-rows: 1fr;
}

.faq-accordion-ready .faq-body-inner {
	min-height: 0;
	overflow: hidden;
	padding-block-start: 0.75rem;
}

.global-cta-section {
	width: 100%;
	background-color: var(--color-primary);
	position: relative;
	overflow: hidden;
	padding-block: var(--space-section); /* Geïntegreerd met fluid spacing */
}

.cta-container {
	max-width: 1200px; /* Huisstijl container breedte */
	margin-inline: auto;
}

.cta-content {
	display: flex;
	flex-direction: column; /* Mobiel-eerst */
	align-items: center;
	gap: 2.5rem;
	text-align: center;
}

/* Tekst Segment */
.cta-text {
	width: 100%;
}

.cta-text h2 {
	color: var(--color-white);
	font-size: var(--fs-h2); /* Fluid h2 clamp */
	line-height: var(--lh-tight);
	margin-block-end: 1rem;
	text-wrap: balance;
}

.cta-text p {
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	max-width: 65ch;
	margin-inline: auto;
	margin-block-end: 0;
	text-wrap: pretty;
}

/* Knoppen / Actie Segment */
.cta-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
}

/* Secundaire Tekstlink */
.cta-link {
	color: var(--color-white);
	font-family: var(--font-header);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	opacity: 0.85;
	transition: var(--transition-speed);
}

.cta-link svg {
	width: 14px;
	height: 14px;
	transition: var(--transition-speed);
}

.cta-link:hover {
	opacity: 1;
	color: var(--color-accent-blue);
}

.cta-link:hover svg {
	transform: translateX(4px); /* Pijl schuift subtiel opzij */
}

/* De Hoofdknop: Wit naar Lichtblauw on Hover */
.global-cta-section .btn-accent {
	background-color: var(--color-white);
	color: var(--color-primary);
	padding: 1rem 2.25rem;
	border-radius: var(--border-radius-btn); /* Knoppen-radius (30px) */
	text-decoration: none;
	font-family: var(--font-header);
	font-weight: 600;
	font-size: 1.05rem;
	white-space: nowrap;
	box-shadow: 0 10px 25px rgba(21, 30, 61, 0.25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%; /* Volledige breedte op mobiel */
	transition: var(--transition-speed); /* Global transition speed */
}

.global-cta-section .btn-accent svg {
	width: 18px;
	height: 18px;
}

.global-cta-section .btn-accent:hover {
	background-color: var(
		--color-accent-blue
	); /* Verandert soepel naar lichtblauw */
	color: var(--color-primary-dark);
}

/* Achtergrond Circuit-Line SVG (Zacht wit-transparant contrast) */
.cta-bg-elements {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.12;
	color: var(--color-white);
}

/* ==========================================================================
   Media Queries (Groot scherm opschaling naar horizontale lay-out)
   ========================================================================== */
@media (min-width: 1024px) {
	.cta-content {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		gap: 4rem;
	}

	.cta-text {
		flex: 1.2;
	}

	.cta-text p {
		margin-inline: 0; /* Reset centrering */
	}

	.cta-actions {
		flex: 0.8;
		align-items: flex-end;
		width: auto;
	}

	.global-cta-section .btn-accent {
		width: auto; /* Knop krimpt weer naar natuurlijke grootte op desktop */
	}
}

.mission-vision {
	/* Geforceerd transparant/geen achtergrondkleur om blauwe overerving te stoppen */
	background: none !important;
	background-color: transparent !important;
}

.mv-grid-staggered {
	display: grid;
	grid-template-columns: 1fr; /* Mobiel standaard 1 kolom */
	gap: var(--space-gap); /* Gekoppeld aan jouw fluid gap */
	position: relative;
}

.mv-block-item {
	position: relative;
}

.mv-block-item .card {
	padding: 3rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden; /* Zorgt dat het absolute icoon binnen de card blijft */
	transition: var(
		--transition-speed
	); /* Gekoppeld aan jouw global transition speed */
	background-color: var(--color-white); /* Kaarten zelf blijven wit/normaal */
}

.mv-label {
	display: inline-block;
	font-family: var(--font-header);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 2px;
	color: var(--color-text-light);
	margin-bottom: 1rem;
}

.mv-icon-bg {
	position: absolute;
	bottom: -15px;
	right: -15px;
	width: 6rem; /* Matcht met de oorspronkelijke font-size: 6rem */
	height: 6rem;
	opacity: 0.05;
	transform: rotate(-15deg);
	pointer-events: none;
}

.mv-icon-bg img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==========================================================================
   Responsive opschaling naar jouw originele staggered desktop layout
   ========================================================================== */
@media (min-width: 992px) {
	.mv-grid-staggered {
		grid-template-columns: 1fr 1fr;
		gap: 4rem; /* Jouw originele desktop gap */
	}

	.mission-block {
		align-self: flex-start;
	}

	.vision-block {
		align-self: flex-end;
		margin-top: 6rem; /* Jouw originele staggered desktop margin */
	}
}

.timeline-v3 {
	position: relative;
	max-width: 900px;
	margin: 4rem auto;

	/* Mobiel-eerst: minder padding aan de linkerkant */
	padding-inline-start: 2.5rem;
}

@media (min-width: 768px) {
	.timeline-v3 {
		padding-inline-start: 60px; /* Originele ademruimte op grotere schermen */
	}
}

/* De verticale verloopas */
.timeline-axis-gradient {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(
		to bottom,
		var(--color-primary) 0%,
		var(--color-icon-red) 30%,
		var(--color-icon-green) 60%,
		var(--color-icon-yellow) 100%
	);
	border-radius: 4px;
}

.timeline-v3-entry {
	position: relative;
	margin-block-end: 4rem;
}

.timeline-v3-entry:last-child {
	margin-block-end: 0;
}

/* De visuele jaarmarker op de as */
.timeline-v3-marker {
	position: absolute;

	/* Mobiel-eerst: positionering strak op de naar links verschoven as */
	left: calc(-2.5rem - 9px);
	top: 12px;
	width: 22px;
	height: 22px;
	background-color: var(--color-white);
	border: 4px solid var(--color-primary);
	border-radius: 50%;
	z-index: 5;
	box-shadow: 0 0 15px rgba(31, 45, 90, 0.2);
	transition: var(--transition-speed);
}

@media (min-width: 768px) {
	.timeline-v3-marker {
		left: -69px; /* Originele desktop-positie */
		top: 40px;
	}
}

.timeline-v3-date {
	font-family: var(--font-header);
	font-weight: 800;
	font-size: 2rem;
	color: var(--color-primary);
	margin-block-end: 0.8rem;
	line-height: var(--lh-tight);
}

/* Content Kaart */
.timeline-v3-content {
	display: flex;
	flex-direction: column; /* Mobiel-eerst: stapel thumbnail boven tekst */
	gap: 1.5rem;
	padding: 2rem !important;
	background-color: var(--color-white);
	border-radius: var(--border-radius-soft);
	box-shadow: var(--box-shadow-soft);
	transition: var(--transition-speed);
}

@media (min-width: 576px) {
	.timeline-v3-content {
		flex-direction: row; /* Horizontale flow vanaf grotere telefoons/tablets */
		align-items: center;
		gap: 2.5rem;
	}
}

/* Thumbnail wrapper */
.timeline-v3-thumb {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	background-color: var(--color-accent-blue);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	border: 2px solid rgba(31, 45, 90, 0.05);
}

/* Gecorrigeerde Image Styling in plaats van FontAwesome */
.timeline-v3-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Zorgt dat geüploade foto's altijd prachtig vullen */
}

/* Tekst label over de afbeelding heen */
.timeline-v3-thumb span {
	position: relative;
	z-index: 2;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-primary);
	text-transform: uppercase;
	background-color: rgba(
		255,
		255,
		255,
		0.85
	); /* Semi-transparante achtergrond voor leesbaarheid over foto's */
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	margin-block-start: auto; /* Duwt het label strak naar de onderkant */
	margin-block-end: 0.5rem;
}

.timeline-v3-body h3 {
	font-size: var(--fs-h5); /* Gekoppeld aan fluid h5 clamp */
	color: var(--color-primary);
	margin-block-end: 0.6rem;
	line-height: var(--lh-tight);
}

.timeline-v3-body p {
	font-size: var(--fs-body);
	color: var(--color-text-light);
	line-height: var(--lh-loose);
	margin-block-end: 0;
	text-wrap: pretty;
}

/* Highlight Statussen (bijv. voor het 100-jarig jubileum) */
.timeline-v3-entry.highlight .timeline-v3-marker {
	border-color: var(--color-icon-yellow);
	background-color: var(--color-icon-yellow);
}

.timeline-v3-entry.highlight .timeline-v3-date {
	color: var(--color-icon-yellow);
}

/* ==========================================================================
   Component 1: Team Sectie & Layout Grid
   ========================================================================== */
.about-grid {
	display: grid;
	grid-template-columns: 1fr; /* Standaard onder elkaar op mobiel */
	gap: var(--space-gap);
	align-items: center;
}

@media (min-width: 992px) {
	.about-grid {
		grid-template-columns: 1.2fr 1fr; /* Asymmetrische verdeling op desktop */
		gap: 4rem;
	}
}

.about-text h2 {
	font-size: var(--fs-h2); /* Fluid h2 clamp */
	color: var(--color-primary);
	margin-block-end: 1rem;
}

.about-text p {
	font-size: var(--fs-body);
	color: var(--color-text-dark);
	line-height: var(--lh-loose);
	text-wrap: pretty;
}

/* Team USP Lijst */
.team-values {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.value-item {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-weight: 600;
	font-family: var(--font-header);
	color: var(--color-primary);
}

.usp-icon-wrapper {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.usp-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Grote Afbeelding Container */
.about-image .image-placeholder {
	position: relative;
	width: 100%;
	height: clamp(
		300px,
		45vh,
		500px
	); /* Voorkomt te kolossale of te lage afbeeldingen */
	border-radius: var(--border-radius-soft);
	overflow: hidden;
	background-color: var(--color-accent-blue);
}

.team-main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Onderschrift balk over de afbeelding heen */
.image-caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	background: linear-gradient(
		to top,
		rgba(21, 30, 61, 0.85) 30%,
		rgba(21, 30, 61, 0)
	);
	padding: 2rem 1.5rem 1rem 1.5rem;
	text-align: center;
}

.image-caption p {
	color: var(--color-white);
	font-family: var(--font-header);
	font-weight: 600;
	font-size: 1.1rem;
	margin: 0;
}

/* ==========================================================================
   Component 2: Kernwaarden 3-Koloms Grid
   ========================================================================== */
.values-grid-3 {
	display: grid;

	/* Schakelt automatisch van 1 naar 2 naar 3 kolommen afhankelijk van schermgrootte */
	grid-template-columns: repeat(
		auto-fit,
		minmax(clamp(260px, 25vw, 360px), 1fr)
	);
	gap: var(--space-gap);
}

.value-card {
	background-color: var(--color-white);
	border-radius: var(--border-radius-soft);
	box-shadow: var(--box-shadow-soft);
	padding: clamp(2rem, 3vw, 3rem) 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.value-icon-circle {
	width: 90px;
	height: 90px;
	background-color: var(--color-accent-blue);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	margin-block-end: 1.5rem;
	flex-shrink: 0;
	transition: var(--transition-speed); /* Gekoppeld aan jouw global speed */
}

.value-card-icon-img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	transition: var(--transition-speed);
}

/* Intelligente Hover State op basis van jouw specificaties */
.value-card:hover .value-icon-circle {
	background-color: var(--color-primary);
}

/* Indien de klant een vector/SVG met stroke-current gebruikt, kleurt deze soepel mee */
.value-card:hover .value-card-icon-img {
	filter: brightness(0) invert(1); /* Forceert het geüploade icoon naar wit bij een hover */
}

.values-grid-3 h3 {
	font-size: var(--fs-h5); /* Fluid typography clamp */
	color: var(--color-primary);
	margin-block-end: 0.75rem;
	line-height: var(--lh-tight);
}

.values-grid-3 p {
	font-size: var(--fs-body);
	color: var(--color-text-light);
	line-height: var(--lh-loose);
	margin-block-end: 0;
	text-wrap: pretty;
}

.projects-grid {
	display: grid;

	/* Intelligente fluid columns die perfect schalen op alle schermformaten */
	grid-template-columns: repeat(
		auto-fill,
		minmax(clamp(280px, 30vw, 380px), 1fr)
	);
	gap: var(--space-gap);
	grid-auto-rows: auto auto auto auto;
}

.project-card {
	background-color: var(--color-white);
	border-radius: var(--border-radius-soft);
	box-shadow: var(--box-shadow-soft);
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	row-gap: 0;
	overflow: hidden;
	transition: var(--transition-speed);
}

/* De Image Wrapper & de nieuwe Image Upload elementen */
.project-img {
	position: relative;
	width: 100%;
	height: 240px; /* Vaste, strakke hoogte voor de projectkaarten */
	background-color: var(
		--color-accent-blue
	); /* Fallback kleur mocht er geen img zijn */
	border-radius: var(--border-radius-soft);
	overflow: hidden;
}

.project-main-img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Foto behoudt altijd de juiste verhoudingen zonder vervorming */
	display: block;
}

.project-info {
	padding: 2rem;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 0;
}

/* Gekleurde Tags (Pillen) */
.project-tag {
	display: inline-block;
	padding: 0.25rem 0.9rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 1rem;
	letter-spacing: 0.5px;
	align-self: start;
	justify-self: start;
}

/* Label kleurschema's gelinkt aan de huisstijlkleuren */
.tag-woningbouw {
	background-color: rgba(34, 197, 94, 0.12);
	color: var(--color-icon-green);
}

.tag-vve {
	background-color: rgba(249, 115, 22, 0.12);
	color: var(--color-icon-orange);
}

.tag-particulier {
	background-color: rgba(239, 68, 68, 0.12);
	color: var(--color-icon-red);
}

.tag-horeca {
	background-color: rgba(245, 158, 11, 0.12);
	color: var(--color-icon-yellow);
}

.tag-info {
	display: inline-block;
	padding: 0.4rem 1.2rem;
	background-color: var(--color-accent-blue);
	color: var(--color-primary);
	border-radius: var(--border-radius-btn);
	font-family: var(--font-header);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-block-end: 1.5rem;
}

.project-info h3 {
	font-size: var(--fs-h5); /* Gekoppeld aan jouw fluid typography */
	color: var(--color-primary);
	margin-bottom: 0.6rem;
	line-height: var(--lh-tight);
}

.project-info p {
	font-size: var(--fs-body);
	color: var(--color-text-light);
	line-height: var(--lh-loose);
	margin-bottom: 0;
	text-wrap: pretty;
}

/* ==========================================================================
   Filter Buttons & Wrappers
   ========================================================================== */
.filter-wrapper {
	margin-bottom: 3rem;
}

.filter-buttons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	background-color: var(--color-bg-light);
	padding: 0.6rem;
	border-radius: 50px;
	box-shadow: var(--box-shadow-soft);
}

.filter-btn {
	padding: 0.6rem 1.8rem;
	border: none;
	background: transparent;
	color: var(--color-text-light);
	font-family: var(--font-header);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	border-radius: 30px;
	transition: var(--transition-speed);
}

.filter-btn:hover {
	color: var(--color-primary);
}

.filter-btn.active {
	background-color: var(--color-primary);
	color: var(--color-white);
	box-shadow: 0 4px 15px rgba(31, 45, 90, 0.2);
}

/* ==========================================================================
   Responsive Updates
   ========================================================================== */
@media (max-width: 768px) {
	.filter-buttons {
		border-radius: var(--border-radius-soft);
		padding: 0.5rem;
		width: 100%; /* Volledige breedte op kleine schermen */
	}

	.filter-btn {
		padding: 0.5rem 1.2rem;
		font-size: 0.95rem;
		flex-grow: 1; /* Knoppen verdelen zich netjes over de breedte op mobiel */
		text-align: center;
	}
}

/* ==========================================================================
   404 Pagina
   ========================================================================== */
.error-404-section {
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-section);
}

.error-404-code {
	font-family: var(--font-header);
	font-size: clamp(7rem, 20vw, 14rem);
	font-weight: 900;
	line-height: 1;
	color: var(--color-primary);
	opacity: 0.08;
	margin: 0;
	pointer-events: none;
	user-select: none;
}

.error-404-title {
	font-family: var(--font-header);
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	color: var(--color-primary);
	margin-top: -2rem;
	margin-bottom: 1rem;
}

.error-404-text {
	color: var(--color-text-light, #6b7280);
	font-size: 1.05rem;
	max-width: 480px;
	margin-inline: auto;
	line-height: 1.7;
}