/*
Theme Name: Portal Builders
Theme URI: https://portalbuilders.innovatiemedia.nl
Author: Innovatiemedia
Author URI: https://innovatiemedia.nl
Description: Leeg startthema voor Portal Builders.
Version: 0.2.6
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portalbuilders
*/

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

html,
body {
	margin: 0;
	padding: 0;
}

:root {
	--color-dark-green: #0F170D;
	--color-dark-green-alt: #131E10;
	--color-green: #76BD61;
	--color-yellow: #FEBF17;
	--color-blue: #489FD0;
	--color-pink: #DC2959;
	--color-white: #FFFFFF;
	--color-grey: #888888;
}

body {
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.wrapper-default {
	max-width: 1400px;
	width: 90%;
	margin: 0 auto;
}

.wrapper-content {
	max-width: 750px;
	width: 90%;
	margin: 0 auto;
}

.block__title {
	font-size: 4.5em;
	line-height: 1.5em;
	margin: 0;
}

.block__title strong,
.block__slide-title strong {
	color: var(--color-blue);
	font-weight: inherit;
}

.block__subtitle {
	font-size: 1.65em;
	line-height: 1.5em;
	margin: 0;
}

.block--hero {
	position: relative;
	background-color: var(--color-dark-green);
	padding-top: 100px;
	padding-bottom: 250px;
	overflow: hidden;
}

.block--slider {
	padding: 80px 0;
	background-color: var(--color-white);
	color: var(--color-dark-green);
}

.block--slider .block__title {
	font-size: 2.5em;
	line-height: 1.2em;
	max-width: 600px;
	margin: 0 auto 2.5em;
	text-align: center;
	color: var(--color-dark-green);
}

.block__slider {
	position: relative;
	overflow: hidden;
}

.block__slider .swiper-wrapper {
	align-items: stretch;
}

.block__slider .swiper-slide {
	height: auto;
}

.block__slide {
	display: flex;
	flex-direction: column;
	padding: 2rem 2.25rem 2.5rem 2.25rem;
	background-color: var(--color-white);
	border-radius: 16px;
	height: auto;
	min-height: 100%;
	color: var(--color-dark-green);
}

.block__slide--white {
	background-color: var(--color-white);
	border: 1px solid rgba(15, 23, 13, 0.1);
}

.block__slide--green {
	background-color: var(--color-green);
	color: var(--color-white);
}

.block__slide--yellow {
	background-color: var(--color-yellow);
	color: var(--color-white);
}

.block__slide--blue {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.block__slide--pink {
	background-color: var(--color-pink);
	color: var(--color-white);
}

.block__slide--dark-green {
	background-color: var(--color-dark-green);
	color: var(--color-white);
}

.block__slide:not(.block__slide--white) .block__slide-title {
	color: inherit;
}

.block__slide:not(.block__slide--white) .block__slide-list li::before {
	background-color: var(--color-white);
}

.block__slide-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.block__slide-title {
	order: -1;
}

.block__slide-icon {
	flex-shrink: 0;
	width: 3.5em;
	height: 3.5em;
	padding: 0.7em;
	border: 3px solid var(--color-white);
	border-radius: 50%;
	opacity: 0.5;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transform: translateY(-0.5em);
}

.block__slide-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block__slide-title {
	font-size: 1.85em;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: var(--color-dark-green);
}

.block__slide-body {
	flex: 1 1 auto;
	margin-bottom: 2rem;
}

.block__slide-text {
	margin: 0;
	line-height: 1.5;
}

.block__slide-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.block__slide-list li {
	position: relative;
	padding-left: 2.25rem;
	line-height: 1.4;
}

.block__slide-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.25em;
	height: 1.25em;
	background-color: var(--color-green);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151 151'%3E%3Cpath d='M75.5 0C117.197 0 151 33.8025 151 75.5C151 117.197 117.197 151 75.5 151C33.8025 151 0 117.197 0 75.5C0 33.8025 33.8025 0 75.5 0ZM111.482 42.4873C108.162 40.0118 103.463 40.6969 100.987 44.0176L65.1094 92.1465L49.7402 77.1348C46.7771 74.2407 42.029 74.2968 39.1348 77.2598C36.2406 80.223 36.2966 84.971 39.2598 87.8652L60.7598 108.865C62.3068 110.376 64.431 111.146 66.5869 110.977C68.7426 110.807 70.7203 109.716 72.0127 107.982L113.013 52.9824C115.488 49.6616 114.803 44.9629 111.482 42.4873Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151 151'%3E%3Cpath d='M75.5 0C117.197 0 151 33.8025 151 75.5C151 117.197 117.197 151 75.5 151C33.8025 151 0 117.197 0 75.5C0 33.8025 33.8025 0 75.5 0ZM111.482 42.4873C108.162 40.0118 103.463 40.6969 100.987 44.0176L65.1094 92.1465L49.7402 77.1348C46.7771 74.2407 42.029 74.2968 39.1348 77.2598C36.2406 80.223 36.2966 84.971 39.2598 87.8652L60.7598 108.865C62.3068 110.376 64.431 111.146 66.5869 110.977C68.7426 110.807 70.7203 109.716 72.0127 107.982L113.013 52.9824C115.488 49.6616 114.803 44.9629 111.482 42.4873Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* De pijlknoppen zitten in een wrapper die over de slider ligt. De wrapper
   vangt zelf geen pointer events (zodat slepen/klikken op de slides blijft
   werken), de knoppen wél. De wrapper wordt gepositioneerd i.p.v. de knoppen. */
.block__slider-nav-wrap {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	justify-content: space-between;
	padding: 0 var(--swiper-navigation-sides-offset, 2.5em);
	pointer-events: none;
}

.block__slider .swiper-button-prev,
.block__slider .swiper-button-next {
	position: static;
	width: 58px;
	height: 58px;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-dark-green);
	cursor: pointer;
	transform: none;
	transition: transform 0.2s ease;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.block__slider .swiper-button-prev:hover,
.block__slider .swiper-button-next:hover {
	transform: scale(1.1);
}

.block__slider .swiper-button-prev::after,
.block__slider .swiper-button-next::after {
	display: none;
}

/* Niet-klikbare pijlknop semi-transparant: de prev-knop aan het begin en de
   next-knop aan het eind (wanneer er niet verder te scrollen valt). */
.block__slider .swiper-button-prev.swiper-button-disabled,
.block__slider .swiper-button-next.swiper-button-disabled {
	opacity: 0.35;
}

.block__slider-nav svg {
	display: block;
	width: 100%;
	height: 100%;
}

.block__slider-nav--next svg {
	transform: rotate(180deg);
}

/* Onder 768px: de navigatie-wrapper niet meer absoluut over de slider, maar
   als rij onder de slider — links uitgelijnd en naast elkaar, met dezelfde maat
   en spacing als .block__featured-cases-nav / .block__featured-cases-button. */
@media (max-width: 768px) {
	.block--slider .block__title {
		font-size: 2em;
		margin-bottom: 1.5em;
	}

	.block__slide-title {
		font-size: 1.5em;
	}

	.block__slider {
		padding-bottom: 10px;
	}

	.block__slider-nav-wrap {
		position: static;
		transform: none;
		width: 90%;
		max-width: 1400px;
		margin: 2em auto 0;
		padding: 0;
		justify-content: flex-start;
		gap: 0.75rem;
	}

	.block__slider .swiper-button-prev,
	.block__slider .swiper-button-next {
		width: 42px;
		height: 42px;
	}
}

/* Vanaf 2250px draait de block-slider in gecentreerde modus met
   slidesPerView: 'auto' (zie slider.js). De kaartbreedte wordt dan hier
   bepaald i.p.v. door Swiper. */
@media (min-width: 2250px) {
	.block__slider .swiper-slide {
		width: 450px;
	}
}

.block--features {
	padding: 80px 0;
	background-color: var(--color-white);
	color: var(--color-dark-green);
}

.block--features .block__title {
	font-size: 2.5em;
	line-height: 1.2em;
	max-width: 700px;
	margin: 0 auto 0.75em;
	text-align: center;
	color: var(--color-dark-green);
}

.block--features .block__subtitle {
	max-width: 720px;
	margin: 0 auto 4em;
	text-align: center;
	font-size: 1.4em;
	line-height: 1.5;
	color: var(--color-dark-green);
}

@media (max-width: 992px) {
	.block--features .block__subtitle {
		font-size: 1.25em;
	}
}

@media (max-width: 768px) {
	.block--features .block__title {
		font-size: 2em;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	.block--features .block__subtitle {
		margin: 0 auto 2.5em;
	}
}

.block__features-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
	align-items: stretch;
}

.block__features-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.block__features-item {
	display: flex;
	align-items: center;
	gap: 2rem;
	background-color: var(--color-dark-green);
	color: var(--color-white);
	border-radius: 16px;
	padding: 1.25rem 1.5rem;
}

.block__features-icon {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block__features-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block__features-text {
	margin: 0;
	line-height: 1.5;
	font-weight: 600;
}

.block__features-media {
	width: 100%;
	height: 100%;
	display: flex;
}

.block__features-image,
.block__features-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
	background-color: #000;
}

@media (max-width: 768px) {
	.block__features-columns {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

.block--feature-toggle {
	padding: 80px 0;
	background-color: var(--color-white);
	color: var(--color-dark-green);
}

.block--feature-toggle .block__title {
	font-size: 2.5em;
	line-height: 1.2em;
	max-width: 700px;
	margin: 0 auto 0.75em;
	text-align: center;
	color: var(--color-dark-green);
}

.block--feature-toggle .block__subtitle {
	max-width: 720px;
	margin: 0 auto 3em;
	text-align: center;
	font-size: 1.4em;
	line-height: 1.5;
	color: var(--color-dark-green);
}

@media (max-width: 992px) {
	.block--feature-toggle .block__subtitle {
		font-size: 1.25em;
	}
}

@media (max-width: 768px) {
	.block--feature-toggle .block__title {
		font-size: 2em;
	}
}

.block__feature-toggle {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

.block__feature-toggle-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
	background-color: transparent;
}

.block__feature-toggle-button {
	flex: 0 1 200px;
	max-width: 200px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75em 0.5em;
	border: none;
	border-bottom: 2px solid #E0E0E0;
	border-radius: 0;
	background-color: transparent;
	color: var(--color-dark-green);
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.3s cubic-bezier(0.625, 0.05, 0, 1),
		color 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (max-width: 768px) {
	.block__feature-toggle {
		gap: 4rem;
	}

	.block__feature-toggle-buttons {
		gap: 1.5rem;
	}

	.block__feature-toggle-button {
		font-size: 0.9em;
	}
}

.block__feature-toggle-button:hover {
	border-bottom-color: var(--color-dark-green);
}

.block__feature-toggle-button.is-active,
.block__feature-toggle-button.is-active:hover {
	border-bottom-color: var(--color-green);
	color: var(--color-dark-green);
}

.block__feature-toggle-button-text {
	display: inline-block;
	line-height: 1.4;
}

.block__feature-toggle-panels {
	position: relative;
}

.block__feature-toggle-panel {
	display: grid;
	grid-template-columns: 1.2fr 1.5fr 0.75fr;
	gap: 0.75em;
	align-items: stretch;
}

.block__feature-toggle-panel[hidden] {
	display: none;
}

.block__feature-toggle-text,
.block__feature-toggle-chart,
.block__feature-toggle-image {
	height: 100%;
	box-sizing: border-box;
	border-radius: 16px;
	overflow: hidden;
}

.block__feature-toggle-text,
.block__feature-toggle-chart {
	padding: 75px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.block__feature-toggle-text {
	padding: 75px 50px;
	gap: 1.5rem;
	align-items: flex-start;
	background-color: var(--color-dark-green);
	color: var(--color-white);
}

.block__feature-toggle-text .block__cta--primary {
	color: var(--color-white);
}

.block__feature-toggle-text .block__cta--primary::before {
	background-color: transparent;
	border: 1px solid var(--color-white);
}

.block__feature-toggle-title {
	font-size: 1.3em;
	line-height: 1.5;
	margin: 0;
	font-weight: 700;
	color: inherit;
}

.block__feature-toggle-title strong {
	color: var(--color-yellow);
	font-weight: inherit;
}

.block__feature-toggle-paragraph {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.6;
	color: inherit;
}

.block__feature-toggle-paragraph > * {
	margin: 0;
}

.block__feature-toggle-paragraph > * + * {
	margin-top: 0.6em;
}

.block__feature-toggle-paragraph strong,
.block__feature-toggle-paragraph b {
	font-weight: 700;
}

.block__feature-toggle-chart {
	gap: 1.5rem;
	color: var(--color-white);
}

.block__feature-toggle-chart--green {
	background-color: var(--color-green);
}

.block__feature-toggle-chart--blue {
	background-color: var(--color-blue);
}

.block__feature-toggle-chart--pink {
	background-color: var(--color-pink);
}

.block__feature-toggle-chart--yellow {
	background-color: var(--color-yellow);
}

.block__feature-toggle-chart-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.block__feature-toggle-chart-label {
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.3;
}

.block__feature-toggle-chart-meter {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1.5rem;
	align-items: center;
}

.block__feature-toggle-chart-track {
	height: 0.625rem;
	background-color: rgba(15, 23, 13, 0.2);
	border-radius: 9999px;
	overflow: hidden;
}

.block__feature-toggle-chart-fill {
	height: 100%;
	width: 0%;
	background-color: var(--color-dark-green);
	border-radius: 9999px;
}

.block__feature-toggle-chart-value {
	font-weight: 400;
	font-size: 0.95em;
	line-height: 1;
	min-width: 3ch;
	text-align: right;
}

.block__feature-toggle-image {
	display: flex;
	width: 100%;
	min-width: 0;
	background-color: var(--color-dark-green);
}

.block__feature-toggle-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1200px) {
	.block__feature-toggle-text,
	.block__feature-toggle-chart {
		padding: 2.5rem;
	}
}

@media (max-width: 768px) {
	.block__feature-toggle-panel {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.block__feature-toggle-image {
		min-height: 280px;
	}
}

/* Tussen 992px en 1200px: 6-koloms grid. Tekst en chart links onder elkaar
   (elk 4 kolommen breed), de foto rechts (2 kolommen) over de volle hoogte. */
@media (min-width: 993px) and (max-width: 1200px) {
	.block__feature-toggle-panel {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto auto;
	}

	.block__feature-toggle-text {
		grid-column: 1 / span 4;
		grid-row: 1;
	}

	.block__feature-toggle-chart {
		grid-column: 1 / span 4;
		grid-row: 2;
	}

	.block__feature-toggle-image {
		grid-column: 5 / span 2;
		grid-row: 1 / span 2;
	}
}

/* Tussen 768px en 992px: 5-koloms grid. Linkerblokken 3 kolommen breed,
   de foto rechts 2 kolommen over de volle hoogte. */
@media (min-width: 769px) and (max-width: 992px) {
	.block__feature-toggle-panel {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: auto auto;
	}

	.block__feature-toggle-text {
		grid-column: 1 / span 3;
		grid-row: 1;
	}

	.block__feature-toggle-chart {
		grid-column: 1 / span 3;
		grid-row: 2;
	}

	.block__feature-toggle-image {
		grid-column: 4 / span 2;
		grid-row: 1 / span 2;
	}
}

@media (max-width: 600px) {
	.block__feature-toggle-text,
	.block__feature-toggle-chart {
		padding: 2rem;
	}
}

/* About Toggle — variant van feature-toggle voor de about-pagina:
   links uitgelijnde header met categorie-pill, paneelmidden = roterende
   site-loader logo (niet aanpasbaar), rechts een afbeelding. */
.block--about-toggle {
	padding: 80px 0;
	background-color: var(--color-white);
	color: var(--color-dark-green);
}

.block__about-toggle-header {
	margin-bottom: 3em;
	text-align: left;
}

.block__about-toggle-category {
	display: inline-block;
	margin: 0 0 1em;
	padding: 0.7em 1.6em;
	border: 1px solid var(--color-dark-green);
	border-radius: 9999px;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1;
	color: var(--color-dark-green);
	opacity: 0.65;
}

.block__about-toggle-title {
	font-size: 2.5em;
	line-height: 1.2em;
	max-width: 700px;
	margin: 0.25em 0 0.75em;
	text-align: left;
	color: var(--color-dark-green);
}

.block__about-toggle-title strong {
	color: var(--color-blue);
	font-weight: inherit;
}

.block__about-toggle-subtitle {
	max-width: 700px;
	margin: 0;
	font-size: 1.4em;
	line-height: 1.5;
	color: var(--color-dark-green);
	opacity: 0.65;
}

.block__about-toggle {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

.block__about-toggle-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: flex-start;
	background-color: transparent;
}

.block__about-toggle-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75em 0.5em;
	border: none;
	border-bottom: 2px solid #E0E0E0;
	border-radius: 0;
	background-color: transparent;
	color: var(--color-dark-green);
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.3s cubic-bezier(0.625, 0.05, 0, 1),
		color 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

.block__about-toggle-button:hover {
	border-bottom-color: var(--color-dark-green);
}

.block__about-toggle-button.is-active,
.block__about-toggle-button.is-active:hover {
	border-bottom-color: var(--color-green);
	color: var(--color-dark-green);
}

.block__about-toggle-button--green.is-active,
.block__about-toggle-button--green.is-active:hover {
	border-bottom-color: var(--color-green);
}

.block__about-toggle-button--pink.is-active,
.block__about-toggle-button--pink.is-active:hover {
	border-bottom-color: var(--color-pink);
}

.block__about-toggle-button--yellow.is-active,
.block__about-toggle-button--yellow.is-active:hover {
	border-bottom-color: var(--color-yellow);
}

.block__about-toggle-button--blue.is-active,
.block__about-toggle-button--blue.is-active:hover {
	border-bottom-color: var(--color-blue);
}

.block__about-toggle-button-text {
	display: inline-block;
	line-height: 1.4;
}

.block__about-toggle-panels {
	position: relative;
}

.block__about-toggle-panel {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 0.75em;
	align-items: stretch;
}

.block__about-toggle-panel[hidden] {
	display: none;
}

.block__about-toggle-text,
.block__about-toggle-logo,
.block__about-toggle-image {
	height: 100%;
	box-sizing: border-box;
	border-radius: 16px;
	overflow: hidden;
}

.block__about-toggle-text {
	padding: 75px 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	align-items: flex-start;
	background-color: var(--color-dark-green);
	color: var(--color-white);
}

.block__about-toggle-text .block__cta--primary {
	color: var(--color-white);
}

.block__about-toggle-text .block__cta--primary::before {
	background-color: transparent;
	border: 1px solid var(--color-white);
}

.block__about-toggle-panel-title {
	font-size: 1.3em;
	line-height: 1.5;
	margin: 0;
	font-weight: 700;
	color: inherit;
}

.block__about-toggle-panel-title strong {
	color: var(--color-yellow);
	font-weight: inherit;
}

.block__about-toggle-paragraph {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.6;
	color: inherit;
}

.block__about-toggle-paragraph > * {
	margin: 0;
}

.block__about-toggle-paragraph > * + * {
	margin-top: 0.6em;
}

.block__about-toggle-paragraph strong,
.block__about-toggle-paragraph b {
	font-weight: 700;
}

.block__about-toggle-paragraph > div > div {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.block__about-toggle-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background-color: var(--color-green);
	color: var(--color-dark-green);
}

.block__about-toggle-logo--green {
	background-color: var(--color-green);
}

.block__about-toggle-logo--pink {
	background-color: var(--color-pink);
}

.block__about-toggle-logo--yellow {
	background-color: var(--color-yellow);
}

.block__about-toggle-logo--blue {
	background-color: var(--color-blue);
}

.block__about-toggle-logo-svg {
	width: clamp(120px, 18vmin, 220px);
	height: auto;
}

.block__about-toggle-image {
	display: flex;
	width: 100%;
	min-width: 0;
	background-color: var(--color-dark-green);
}

.block__about-toggle-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1200px) {
	.block__about-toggle-text {
		padding: 2.5rem;
	}

	.block__about-toggle-logo {
		padding: 1.5rem;
	}
}

@media (max-width: 992px) {
	.block__about-toggle-subtitle {
		font-size: 1.25em;
	}
}

/* Tussen 769px en 992px: 2-koloms layout. Linkerkolom (tekst) blijft links
   en pakt de volle hoogte; rechts erboven het logo-paneel, eronder de foto. */
@media (min-width: 769px) and (max-width: 992px) {
	.block__about-toggle-panel {
		grid-template-columns: 1.2fr 1fr;
		grid-template-rows: auto auto;
	}

	.block__about-toggle-text {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.block__about-toggle-logo {
		grid-column: 2;
		grid-row: 1;
	}

	.block__about-toggle-image {
		grid-column: 2;
		grid-row: 2;
	}
}

@media (max-width: 768px) {
	.block__about-toggle {
		gap: 4rem;
	}

	.block__about-toggle-buttons {
		gap: 1.5rem;
	}

	.block__about-toggle-button {
		font-size: 0.9em;
	}

	.block__about-toggle-title {
		font-size: 2em;
	}

	.block__about-toggle-panel {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.block__about-toggle-image,
	.block__about-toggle-logo {
		min-height: 280px;
	}

	.block__about-toggle-image {
		max-height: 500px;
	}
}

@media (max-width: 600px) {
	.block__about-toggle-text {
		padding: 2rem;
	}
}

.block--feature-tabs {
	padding: 7.5em 0;
	margin-top: 100px;
	margin-bottom: 100px;
	background-color: var(--color-dark-green);
	color: var(--color-white);
}

.block--feature-tabs .block__title {
	font-size: 2.5em;
	line-height: 1.2em;
	margin: 0 0 2.5em;
	max-width: 1150px;
	text-align: left;
	color: var(--color-white);
}

@media (max-width: 768px) {
	.block--feature-tabs {
		padding: 5em 0;
	}

	.block--feature-tabs .block__title {
		font-size: 2em;
	}
}

.block__feature-tabs {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.block__feature-tabs-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 0.75rem;
}

.block__feature-tabs-buttons > .block__feature-tabs-button {
	flex: 0 0 auto;
	white-space: nowrap;
}

.block__feature-tabs-button {
	color: var(--color-white);
	background: transparent;
	border: none;
	outline: none;
}

.block__feature-tabs-button::before {
	background-color: transparent;
	border: 1px solid var(--color-white);
}

.block__feature-tabs-button.is-active {
	color: var(--color-dark-green);
	border: none;
}

.block__feature-tabs-button.is-active::before {
	background-color: var(--color-green);
	border: none;
}

.block__feature-tabs-panels {
	position: relative;
}

.block__feature-tabs-panel {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1.25fr;
	gap: 2rem;
	align-items: stretch;
}

.block__feature-tabs-panel[hidden] {
	display: none;
}

.block__feature-tabs-text {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 50px;
	background-color: var(--color-dark-green-alt);
	border-radius: 16px;
}

.block__feature-tabs-title {
	font-size: 1.5em;
	line-height: 1.4;
	margin: 0;
	font-weight: 700;
	color: var(--color-green);
}

.block__feature-tabs-title strong {
	color: var(--color-blue);
	font-weight: inherit;
}

.block__feature-tabs-paragraph {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.6;
	color: var(--color-white);
}

.block__feature-tabs-paragraph > * {
	margin: 0;
}

.block__feature-tabs-paragraph > * + * {
	margin-top: 1em;
}

.block__feature-tabs-paragraph div + div {
	margin-top: 1em;
}

.block__feature-tabs-paragraph strong,
.block__feature-tabs-paragraph b {
	font-weight: 700;
}

.block__feature-tabs-cta {
	color: var(--color-white);
}

.block__feature-tabs-cta::before {
	background-color: transparent;
	border: 1px solid var(--color-white);
}

.block__feature-tabs-image {
	display: flex;
	width: 100%;
	min-width: 0;
}

.block__feature-tabs-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	object-fit: cover;
}

.block__feature-tabs-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 50px;
	background-color: var(--color-dark-green-alt);
	border-radius: 16px;
}

.block__feature-tabs-list-title {
	margin: 0;
	padding-right: 150px;
	font-size: 1.25em;
	font-weight: 700;
	color: var(--color-green);
}

.block__feature-tabs-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.block__feature-tabs-list-item {
	border: 1px solid var(--color-green);
	border-radius: 12px;
	overflow: hidden;
}

.block__feature-tabs-list-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background-color: transparent;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	transition: color 0.3s ease;
}

.block__feature-tabs-list-toggle:hover {
	color: var(--color-green);
}

.block__feature-tabs-list-icon {
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block__feature-tabs-list-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block__feature-tabs-list-label {
	flex: 1;
	line-height: 1.4;
}

.block__feature-tabs-list-chevron {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	display: flex;
	color: var(--color-green);
	transition: transform 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

.block__feature-tabs-list-chevron svg {
	width: 100%;
	height: 100%;
}

.block__feature-tabs-list-toggle[aria-expanded="true"] .block__feature-tabs-list-chevron {
	transform: rotate(180deg);
}

.block__feature-tabs-list-content {
	overflow: hidden;
}

.block__feature-tabs-list-content[hidden] {
	display: none;
}

.block__feature-tabs-list-content-inner {
	padding: 0 1.25rem 1.25rem calc(2.25rem + 1.5em);
	line-height: 1.6;
}

.block__feature-tabs-list-content-inner > * {
	margin: 0;
}

.block__feature-tabs-list-content-inner > * + * {
	margin-top: 0.6em;
}

/* Tussen 768px en 1250px: 6-koloms grid. 1e kolom (tekst) links en 3e kolom
   (lijst) rechts — elk 3 kolommen breed — met de 2e kolom (afbeelding) full
   width eronder. */
@media (min-width: 769px) and (max-width: 1250px) {
	.block__feature-tabs-panel {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto auto;
	}

	.block__feature-tabs-text {
		grid-column: 1 / span 3;
		grid-row: 1;
	}

	.block__feature-tabs-list {
		grid-column: 4 / span 3;
		grid-row: 1;
	}

	.block__feature-tabs-image {
		grid-column: 1 / span 6;
		grid-row: 2;
	}

	.block__feature-tabs-image img {
		height: 450px;
	}
}

@media (max-width: 768px) {
	.block__feature-tabs-panel {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.block__feature-tabs-image img {
		max-height: 500px;
	}

	.block__feature-tabs-list-title {
		padding-right: 0;
	}
}

@media (max-width: 450px) {
	.block__feature-tabs-text,
	.block__feature-tabs-list {
		padding: 30px;
	}
}

.block--logo-slider {
	padding: 7.5em 0;
	background-color: var(--color-white);
	color: var(--color-dark-green);
	overflow: hidden;
}

.block--logo-slider .block__title {
	font-size: 2.5em;
	line-height: 1.2em;
	max-width: 700px;
	margin: 0 auto 0.75em;
	text-align: center;
	color: var(--color-dark-green);
}

.block--logo-slider .block__subtitle {
	max-width: 720px;
	margin: 0 auto 5em;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.5;
	color: var(--color-dark-green);
}

.block__logo-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	margin-top: 2.5em;
}

.block__logo-slider:active {
	cursor: grabbing;
}

.block__logo-slider-collection {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
}

.block__logo-slider-list {
	display: flex;
	flex-wrap: nowrap;
	flex-shrink: 0;
	gap: 5.5rem;
	padding-right: 5.5rem;
	align-items: center;
}

.block__logo-slider-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block__logo-slider-item img {
	display: block;
	max-height: 3em;
	max-width: 6.5em;
	width: auto;
	height: auto;
	object-fit: contain;
	pointer-events: none;
	-webkit-user-drag: none;
}

@media (max-width: 768px) {
	.block__logo-slider-list {
		gap: 4.5rem;
		padding-right: 4rem;
	}

	.block--logo-slider {
		padding: 5em 0;
	}

	.block--logo-slider .block__title {
		font-size: 2em;
	}
}

.block--featured-cases {
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding: 5em 0;
	background-color: var(--color-white);
	color: var(--color-dark-green);
	overflow: hidden;
}

.block--featured-cases__title {
	font-size: 2.5em;
	line-height: 1.2em;
	margin: 0 0 0.75em;
	max-width: 450px;
	text-align: left;
	opacity: 0.65;
	color: var(--color-dark-green);
}

.block--featured-cases__subtitle {
	max-width: 650px;
	margin: 0 0 3em;
	text-align: left;
	font-size: 1.2em;
	line-height: 1.5;
	color: var(--color-dark-green);
}

.block__featured-cases {
	position: relative;
}

/* Content blok */
.block--content {
	padding: 5em 0;
	color: var(--color-dark-green);
}

.block--content__inner {
	width: 100%;
}

.block--content__category {
	display: inline-block;
	margin: 0 0 1em;
	padding: 0.7em 1.6em;
	border: 1px solid var(--color-dark-green);
	border-radius: 9999px;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1;
	color: var(--color-dark-green);
	opacity: 0.65;
}

.block--content__title {
	font-size: 2.5em;
	line-height: 1.2em;
	max-width: 700px;
	margin: 0.25em 0 0.75em;
	text-align: left;
}

.block--content__title strong {
	color: var(--color-blue);
	font-weight: inherit;
}

.block--content__text {
	margin: 0 0 1.75em;
	font-size: 1.2em;
	line-height: 1.5;
	text-align: left;
	color: rgba(15, 23, 13, 0.65); /* --color-dark-green @ 65% */
}

/* Bold in de backend = volledige opacity, maar niet vetgedrukt op de site */
.block--content__text strong,
.block--content__text b {
	font-weight: 400;
	color: var(--color-dark-green);
}

.block--content__text :last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.block--content__title {
		font-size: 2em;
	}

	.block--content__text {
		font-size: 1em;
	}
}

.block--content__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

/* Rich Content blok — vrije stapel titels, tekst en afbeeldingen */
.block--rich-content {
	padding: 4em 0;
	color: var(--color-dark-green);
}

.block--rich-content .wrapper-content {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.block--rich-content__title {
	margin: 75px 0 0;
	line-height: 1.2em;
	text-align: left;
	color: var(--color-dark-green);
}

.block--rich-content__title:first-child {
	margin-top: 0;
}

.block--rich-content__title--h2 {
	font-size: 2.25em;
	max-width: 700px;
}

.block--rich-content__title--h3 {
	font-size: 1.75em;
	max-width: 700px;
}

.block--rich-content__title--h4 {
	font-size: 1.35em;
	max-width: 700px;
}

.block--rich-content__title strong {
	color: var(--color-blue);
	font-weight: inherit;
}

.block--rich-content__text {
	font-size: 1.15em;
	line-height: 1.6;
	color: rgba(15, 23, 13, 0.75);
}

.block--rich-content__text :first-child {
	margin-top: 0;
}

.block--rich-content__text :last-child {
	margin-bottom: 0;
}

.block--rich-content__text a {
	color: var(--color-blue);
	text-decoration: underline;
}

.block--rich-content__text-cta {
	display: inline-flex;
	margin-top: 1.5em;
	text-decoration: none;
}

.block--rich-content__text-cta.block__cta--primary {
	color: var(--color-dark-green);
}

.block--rich-content__figure {
	margin: 75px 0 0;
}

.block--rich-content__figure:first-child {
	margin-top: 0;
}

.block--rich-content__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.block--rich-content__figure--wide {
	width: 100vw;
	max-width: min(1400px, 90vw);
	margin-left: 50%;
	transform: translateX(-50%);
}

.block--rich-content__caption {
	margin: 0.75em 0 0;
	font-size: 0.9em;
	color: rgba(15, 23, 13, 0.65);
	text-align: left;
}

@media (max-width: 768px) {
	.block--rich-content__title--h2 {
		font-size: 2em;
	}

	.block--rich-content__title--h3 {
		font-size: 1.4em;
	}

	.block--rich-content__title--h4 {
		font-size: 1.2em;
	}

	.block--rich-content__text {
		font-size: 1em;
	}

	.block--rich-content__figure--wide {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		transform: none;
	}
}

/* Rich Content — title-group: optionele categorie-pill boven de heading.
   De buitenmarge zit op de groep, zodat title én pill als één blok ademen. */
.block--rich-content__title-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1em;
	margin: 75px 0 0;
}

.block--rich-content__items > .block--rich-content__title-group:first-child {
	margin-top: 0;
}

.block--rich-content__title-group .block--rich-content__title {
	margin: 0;
}

/* Rich Content — Beeldmerk: brand-logo dat tijdens scroll roteert en zoomt.
   Geen continue spin-animatie zoals de site-loader; rotatie en scale worden
   door ScrollTrigger gestuurd op basis van scroll-positie. */
.block--rich-content__brand-mark {
	margin: 0 auto -50px;
	width: 100%;
	max-width: 200px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.block--rich-content__brand-mark-svg {
	width: 100%;
	height: 100%;
	max-width: none;
	display: block;
	animation: none !important;
}

.block--rich-content__brand-mark--green {
	color: var(--color-green);
}

.block--rich-content__brand-mark--dark-green {
	color: var(--color-dark-green);
}

.block--rich-content__brand-mark--blue {
	color: var(--color-blue);
}

.block--rich-content__brand-mark--white {
	color: var(--color-white);
}

.block--rich-content__brand-mark .site-loader__svg path,
.block--rich-content__brand-mark-svg path {
	fill: currentColor;
}

/* Beeldmerk alt — brede SVG (6 losse portalen) die op scroll vanuit een rij
   naar de samengestelde logo-stand animeert (zie brand-alt-scroll.js). */
.block--rich-content__brand-alt {
	width: 100%;
	max-width: 700px;
	margin: 1em auto;
	overflow: visible;
}

.block--rich-content__brand-alt-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.block--rich-content__brand-alt--green { color: var(--color-green); }
.block--rich-content__brand-alt--dark-green { color: var(--color-dark-green); }
.block--rich-content__brand-alt--blue { color: var(--color-blue); }
.block--rich-content__brand-alt--white { color: var(--color-white); }

/* Rich Content — Knoppen-blok: rij met knoppen, standaard links-uitgelijnd.
   Centreert mee wanneer de hele rich-content sectie de centered-modifier heeft. */
.block--rich-content__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	justify-content: flex-start;
	margin: 25px 0 0;
}

.block--rich-content__buttons-cta--green {
	color: var(--color-dark-green);
}

.block--rich-content__buttons-cta--green::before {
	background-color: var(--color-green);
}

.block--rich-content__buttons-cta--dark-green {
	color: var(--color-white);
}

.block--rich-content__buttons-cta--dark-green::before {
	background-color: var(--color-dark-green);
}

.block--rich-content__buttons-cta--outline {
	color: var(--color-dark-green);
}

.block--rich-content__buttons-cta--outline::before {
	background-color: transparent;
	border: 1px solid var(--color-dark-green);
}

/* Gecentreerde rich-content: alles binnen .block--rich-content__items
   middelen (tekst, titels, knoppen). Afbeeldingen / compare-kolommen worden
   bewust niet aangeraakt. */
.block--rich-content--centered .block--rich-content__items,
.block--rich-content--centered .block--rich-content__items * {
	text-align: center;
}

.block--rich-content--centered .block--rich-content__items {
	align-items: center;
}

/* Elementen met een max-width moeten ook horizontaal gecentreerd worden
   binnen het flex-column items-blok. */
.block--rich-content--centered .block--rich-content__title,
.block--rich-content--centered .block--rich-content__title-group,
.block--rich-content--centered .block--rich-content__text {
	margin-left: auto;
	margin-right: auto;
}

.block--rich-content--centered .block--rich-content__title-group {
	align-items: center;
}

.block--rich-content--centered .block--rich-content__buttons {
	justify-content: center;
}

/* Rich Content — Vergelijk blok: kolommen met gekleurd bovenblok (icoon,
   titel, intro) en daaronder een outline blok (rest van de content). Past
   binnen dezelfde wrapper-content (750px) als de overige rich-content items. */
.block--rich-content__compare {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin: 25px 0 0;
	align-items: stretch;
}

.block--rich-content__items > .block--rich-content__compare:first-child {
	margin-top: 0;
}

.block--rich-content__compare-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.block--rich-content__compare-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 2.25rem;
	border-radius: 20px;
	color: var(--color-dark-green);
}

.block--rich-content__compare-card--green {
	background-color: var(--color-green);
}

.block--rich-content__compare-card--pink {
	background-color: var(--color-pink);
}

.block--rich-content__compare-card--yellow {
	background-color: var(--color-yellow);
}

.block--rich-content__compare-card--blue {
	background-color: var(--color-blue);
}

.block--rich-content__compare-icon {
	flex-shrink: 0;
	width: 3.5em;
	height: 3.5em;
	padding: 0.7em;
	border: 2px solid var(--color-dark-green);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.block--rich-content__compare-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block--rich-content__compare-title {
	font-size: 1.5em;
	line-height: 1.3;
	margin: 0;
	font-weight: 700;
	color: inherit;
}

.block--rich-content__compare-intro {
	margin: 0;
	font-size: 1em;
	line-height: 1.5;
	color: inherit;
}

.block--rich-content__compare-body {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding: 2.25rem;
	border: 1px solid rgba(15, 23, 13, 0.25);
	border-radius: 20px;
	background-color: transparent;
	color: var(--color-dark-green);
	flex: 1;
}

.block--rich-content__compare-extended {
	font-size: 0.9rem;
	line-height: 1.4;
	color: inherit;
}

.block--rich-content__compare-extended > :first-child {
	margin-top: 0;
}

.block--rich-content__compare-extended > :last-child {
	margin-bottom: 0;
}

.block--rich-content__compare-lists {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.block--rich-content__compare-list-title {
	margin: 0 0 1.25em;
	font-size: 1em;
	font-weight: 700;
	color: inherit;
}

.block--rich-content__compare-list-items,
.block--rich-content__text ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.block--rich-content__compare-list-items li,
.block--rich-content__text ul li {
	position: relative;
	padding-left: 1.75em;
	line-height: 1.5;
	color: rgba(15, 23, 13, 0.75);
}

.block--rich-content__compare-list-items li::before,
.block--rich-content__text ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.1em;
	height: 1.1em;
	background-image: url("assets/images/list-check.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.block--rich-content__compare-cta {
	width: 100%;
}

.block--rich-content__compare-cta.block__cta--primary {
	color: var(--color-white);
}

.block--rich-content__compare-cta.block__cta--primary::before {
	background-color: var(--color-dark-green);
}

.block--rich-content__compare-closing {
	font-size: 0.9rem;
	line-height: 1.4;
	color: rgba(15, 23, 13, 0.65);
}

.block--rich-content__compare-closing > :first-child {
	margin-top: 0;
}

.block--rich-content__compare-closing > :last-child {
	margin-bottom: 0;
}

.block--rich-content__compare-closing strong,
.block--rich-content__compare-closing b {
	font-weight: 700;
	color: var(--color-dark-green);
}

@media (max-width: 768px) {
	.block--rich-content__compare {
		grid-template-columns: 1fr;
		gap: 2.75rem;
	}

	.block--rich-content__compare-card,
	.block--rich-content__compare-body {
		padding: 1.75rem;
	}

	.block--rich-content__compare-title {
		font-size: 1.3em;
	}
}

.block__featured-cases .swiper-wrapper {
	align-items: stretch;
}

.block__featured-cases .swiper-slide {
	height: auto;
}

.block__featured-cases .swiper-slide {
	width: calc(min(90vw, 1400px) / 2 - 16px);
}

.block__featured-case {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	min-height: 100%;
	color: var(--color-white);
	overflow: hidden;
}

.block__featured-case-inner {
	display: grid;
	grid-template-columns: 45% 55%;
	align-items: stretch;
	flex: 1;
	min-height: 0;
}

.block__featured-case--green {
	background-color: var(--color-green);
}

.block__featured-case--pink {
	background-color: var(--color-pink);
}

.block__featured-case--blue {
	background-color: var(--color-blue);
}

.block__featured-case--yellow {
	background-color: var(--color-yellow);
}

.block__featured-case-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
	justify-content: center;
	padding: 50px;
}

.block__featured-case-title {
	font-size: 1.35em;
	line-height: 1.4;
	margin: 0;
	font-weight: 700;
	color: inherit;
}

@media (max-width: 768px) {
	.block--featured-cases__title {
		font-size: 2em;
	}

	.block__featured-case-title {
		font-size: 1.25em;
	}
}

.block__featured-case-text {
	margin: 0;
	line-height: 1.5;
	color: inherit;
}

.block__featured-case-cta {
	margin-top: 0.5rem;
}

.block__featured-case-image {
	height: 100%;
}

.block__featured-case-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Onder 1250px: afbeelding boven, content eronder (i.p.v. naast elkaar). */
@media (max-width: 1250px) {
	.block__featured-case-inner {
		display: flex;
		flex-direction: column;
	}

	.block__featured-case-image {
		order: -1;
		height: 200px;
		flex-shrink: 0;
	}

	/* Overschrijft de inline hoogte die slider.js op de img zet
	   (anders wordt de afbeelding zo hoog als de hele kaart). */
	.block__featured-case-image img {
		height: 100% !important;
	}

	.block__featured-case-content {
		flex: 1;
	}
}

.block__featured-cases-nav {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-start;
	margin-top: 2em;
	color: var(--color-dark-green);
}

.block__featured-cases-button {
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.block__featured-cases-button:hover {
	transform: scale(1.1);
}

.block__featured-cases-button.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

.block__featured-cases-button.swiper-button-disabled:hover {
	transform: none;
}

.block__featured-cases-button svg {
	display: block;
	width: 100%;
	height: 100%;
}

.block__featured-cases-button--next svg {
	transform: rotate(180deg);
}

.block__cta--outline-dark-green {
	color: var(--color-dark-green);
}

.block__cta--outline-dark-green::before {
	background-color: transparent;
	border: 1px solid var(--color-dark-green);
}

@media (max-width: 768px) {
	.block__featured-case-content {
		padding: 1.5rem;
	}
}

.block--hero::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 25px;
	background-color: var(--color-white);
	border-radius: 25px 25px 0 0;
}

.block--hero .block__columns {
	display: flex;
	gap: 2rem;
	align-items: center;
}

.block--hero .block__column--left {
	flex: 0 1 550px;
	max-width: 550px;
}

.block--hero .block__column--right {
	flex: 1 1 0;
}

.block__column-svg {
	display: block;
	width: 75%;
	height: auto;
	margin-left: auto;
}

.block__column-svg .portal {
	transform-box: fill-box;
	transform-origin: center;
	color: var(--color-white);
}

/* Animatie A: één SVG (het beeldmerk/pinwheel, opgebouwd uit 6 portalen). Na het
   laden draait het 3× 60° en herpositioneren 3 portalen naast elkaar (klein links,
   groot midden, klein rechts); de overige 3 faden weg. De beweging zelf wordt door
   portal-a.js aangestuurd (Web Animations); hier alleen de basis-styling. */
.block__column-svg--a {
	color: var(--color-white);
}

/* Beeldmerk draait om een vast punt. Géén transform-box: fill-box hier: die zou het
   draaipunt live laten meeschuiven met de bounding box van de <g> zodra de portalen
   erin roteren (het beeldmerk lijkt dan te herschalen). portal-a.js pint het exacte
   midden in viewBox-coördinaten. */
.hero-a__mark {
	transform-box: view-box;
	transform-origin: center;
	will-change: transform;
}

/* Elk portaal transformeert (verplaatsen/schalen) om het eigen midden. will-change
   promoot ze naar een eigen laag zodat de transform-animatie soepeler loopt. */
.hero-a__portal {
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform, opacity;
}

.block--hero .block__content,
.block--hero .block__title,
.block--hero .block__subtitle {
	color: var(--color-white);
}

.block--hero .block__subtitle {
	margin: 1.25em 0 2em 0;
}

/* ---------------------------------------------------------------------------
   Hero (use case) — gecentreerd, met 3 impact-blokken
   --------------------------------------------------------------------------- */

.block--hero-use-case {
	position: relative;
	background-color: var(--color-dark-green);
	color: var(--color-white);
	padding: 100px 0 150px;
	text-align: center;
}

/* Hero (alt) — variant met eigen titel, optionele knop en vaste PNG-overlay */
.block--hero-alt {
	position: relative;
	background-color: var(--color-dark-green);
	color: var(--color-white);
	padding: 100px 0 150px;
	text-align: center;
	overflow: hidden;
}

.block--hero-alt::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 25px;
	background-color: var(--color-white);
	border-radius: 25px 25px 0 0;
	z-index: 2;
}

.block--hero-alt .block__content {
	position: relative;
	z-index: 1;
}

.block__hero-alt-title {
	font-size: 2.75em;
	line-height: 1.15;
	margin: 0;
	color: var(--color-white);
}

.block__hero-alt-title strong {
	color: var(--color-green);
	font-weight: inherit;
}

.block__hero-alt-text {
	font-size: 1.25em;
	line-height: 1.5;
	margin: 2em 0 0;
	font-weight: 400;
	color: var(--color-white);
}

.block__hero-alt-cta {
	margin: 2.5em auto 0;
}

/* Hero-alt visual: full-bleed inline SVG (zie pb_hero_alt_visual) met losse
   pinwheel-iconen die subtiel roteren, achter de tekst. Vervangt de oude
   background-image zodat de losse groepen individueel kunnen animeren. */
.block--hero-alt--has-visual .hero-visual {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--color-white);
	pointer-events: none;
	z-index: 0;
}

/* Buitenste groep: continue trage rotatie om het eigen middelpunt + een
   eenmalige "inkomen"-animatie (fade) die per icoon een afwijkende vertraging
   en snelheid heeft, zodat ze na het laden één voor één verschijnen.
   De opacity (0.15) staat per icoon zodat hover 'm individueel kan oplichten. */
.hero-visual__icon {
	transform-box: fill-box;
	transform-origin: center;
	color: var(--color-white);
	opacity: 0; /* verborgen tot de loader weg is (.is-site-loaded) */
	pointer-events: auto;
	transition: color 0.4s ease, opacity 0.4s ease;
	will-change: transform, opacity;
}

/* Onzichtbaar maar volledig hoverbaar hit-vlak: maakt de hele groep (incl. de
   lege ruimte tussen de blades) hoverbaar, niet alleen de paden. */
.hero-visual__icon-hit {
	fill: transparent;
	pointer-events: all;
}

/* Pas nadat de loader weg is: iconen krijgen hun rust-opacity en draaien
   continu. De entree (fade + zoom + van boven naar beneden) zit op de aparte
   reveal-laag zodat hij niet botst met de rotatie/hover-transform. */
.is-site-loaded .hero-visual__icon {
	opacity: 0.15;
	animation: hero-visual-spin var(--hero-visual-dur, 48s) linear infinite;
}

/* Reveal-laag: entree-animatie (zoom in + van boven naar beneden), één voor één
   met afwijkende vertraging/duur per icoon. */
.hero-visual__icon-reveal {
	transform-box: fill-box;
	transform-origin: center;
}

.is-site-loaded .hero-visual__icon-reveal {
	animation: hero-visual-in var(--hero-visual-in-dur, 0.8s) cubic-bezier(0.34, 1.4, 0.64, 1) var(--hero-visual-in-delay, 0s) backwards;
}

/* Binnenste groep: schaalt soepel bij hover (het "extra" effect). */
.hero-visual__icon-inner {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.5s ease;
}

/* Variatie per groep — afwijkende rotatiesnelheid/richting + eigen
   inkomen-vertraging en -duur zodat ze gespreid en niet synchroon verschijnen. */
.hero-visual__icon--1 { --hero-visual-dur: 42s; --hero-visual-in-delay: 0.2s;  --hero-visual-in-dur: 1.6s; }
.hero-visual__icon--2 { --hero-visual-dur: 60s; --hero-visual-in-delay: 0.5s;  --hero-visual-in-dur: 2.1s; }
.hero-visual__icon--3 { --hero-visual-dur: 52s; --hero-visual-in-delay: 0.85s; --hero-visual-in-dur: 1.4s; }
.hero-visual__icon--4 { --hero-visual-dur: 72s; --hero-visual-in-delay: 1.2s;  --hero-visual-in-dur: 2s; }
.hero-visual__icon--5 { --hero-visual-dur: 48s; --hero-visual-in-delay: 1.55s; --hero-visual-in-dur: 1.8s; }

/* Tegengestelde draairichting voor 2 en 4 — in de .is-site-loaded scope zodat
   de animation-shorthand hierboven 'm niet terugzet (alleen de spin omkeren,
   de fade-in normaal laten). */
.is-site-loaded .hero-visual__icon--2,
.is-site-loaded .hero-visual__icon--4 {
	animation-direction: reverse;
}

/* Per-icoon hover: oplichten + eigen merkkleur (i.p.v. wit) + iets opschalen. */
.hero-visual__icon:hover {
	opacity: 0.5;
}

.hero-visual__icon:hover .hero-visual__icon-inner {
	transform: scale(1.12);
}

.hero-visual__icon--1:hover { color: var(--color-pink); }
.hero-visual__icon--2:hover { color: var(--color-yellow); }
.hero-visual__icon--3:hover { color: var(--color-green); }
.hero-visual__icon--4:hover { color: var(--color-blue); }
.hero-visual__icon--5:hover { color: var(--color-pink); }

@keyframes hero-visual-spin {
	to { transform: rotate(360deg); }
}

@keyframes hero-visual-in {
	from { opacity: 0; transform: translateY(-70%) scale(0.4); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-visual__icon,
	.is-site-loaded .hero-visual__icon {
		animation: none;
		opacity: 0.15;
	}
	.hero-visual__icon-reveal,
	.is-site-loaded .hero-visual__icon-reveal {
		animation: none;
	}
	.hero-visual__icon-inner {
		transition: none;
	}
}

@media (max-width: 768px) {
	.block__hero-alt-title {
		font-size: 2.5em;
	}

	.block__hero-alt-text {
		font-size: 1.25em;
	}
}

@media (max-width: 450px) {
	.block--hero-alt {
		padding: 100px 0;
	}

	.block__hero-alt-title {
		font-size: 1.75em;
	}

	.block__hero-alt-text {
		font-size: 1.1em;
	}
}

/* Hero Pricing + CTA — groene achtergrond alleen achter de header (titel,
   tekst, toggle, note). De kolommen vallen er gedeeltelijk overheen, maar
   zitten verder op witte achtergrond. */
.block--hero-pricing {
	background-color: transparent;
	padding: 0;
	overflow: visible;
}

.block--hero-pricing::before,
.block--hero-pricing::after {
	content: none;
}

.block__hero-pricing-header {
	position: relative;
	background-color: var(--color-dark-green);
	color: var(--color-white);
	padding: 100px 0 300px;
	text-align: center;
	overflow: hidden;
}

.block--hero-pricing.block--hero-alt--has-visual .block__hero-pricing-header .hero-visual {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--color-white);
	pointer-events: none;
	z-index: 0;
}

.block__hero-pricing-header::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 25px;
	background-color: var(--color-white);
	border-radius: 25px 25px 0 0;
	z-index: 2;
}

.block--hero-pricing .block__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.block__hero-pricing-toggle {
	position: relative;
	display: inline-grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	margin: 2.5em 0 1em;
	padding: 0;
	background-color: var(--color-white);
	border: none;
	border-radius: 9999px;
	overflow: hidden;
}

.block__hero-pricing-toggle-option {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 130px;
	padding: 1em 2.5em;
	border: none;
	border-radius: 9999px;
	background: transparent;
	color: var(--color-dark-green);
	opacity: 0.35;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: color 0.3s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.block__hero-pricing-toggle-option.is-active {
	color: var(--color-white);
	opacity: 1;
}

.block__hero-pricing-toggle-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background-color: var(--color-pink);
	border-radius: 9999px;
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
	z-index: 0;
}

.block__hero-pricing-toggle[data-active-option="2"] .block__hero-pricing-toggle-thumb {
	transform: translateX(100%);
}

/* Tweede switch (gebruikerstype) onder de invoer: hergebruikt de toggle-styling,
   maar reageert op data-active-seats i.p.v. data-active-option. */
.block__hero-pricing-toggle--seats {
	margin: 0;
}
.block__hero-pricing-toggle--seats[data-active-seats="2"] .block__hero-pricing-toggle-thumb {
	transform: translateX(100%);
}
.block__hero-pricing-seats {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	margin-top: 1.25em;
}
.block__hero-pricing-seats-note {
	margin: 0;
	font-size: 0.85em;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

.block__hero-pricing-note {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
}

/* Gebruikers-invoer onder de toggle: bepaalt via de prijsstaffels welke prijs
   per kolom getoond wordt. */
.block__hero-pricing-users {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	margin-top: 1.5em;
}
.block__hero-pricing-users-label {
	font-size: 0.95em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
}
.block__hero-pricing-users-control {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.block__hero-pricing-users-step {
	width: 2.4em;
	height: 2.4em;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1em;
	line-height: 1;
	color: var(--color-white);
	background: rgba(255, 255, 255, 0.12);
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.block__hero-pricing-users-step:hover,
.block__hero-pricing-users-step:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.6);
}
.block__hero-pricing-users-input {
	width: 5.5em;
	height: 2.6em;
	text-align: center;
	font-size: 1em;
	font-weight: 700;
	color: var(--color-white);
	background: rgba(255, 255, 255, 0.1);
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
}
.block__hero-pricing-users-input:focus-visible {
	outline: none;
	border-color: rgba(255, 255, 255, 0.7);
}
/* Spinners verbergen; de +/- knoppen sturen de waarde. */
.block__hero-pricing-users-input::-webkit-outer-spin-button,
.block__hero-pricing-users-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.block__hero-pricing-users-input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
.block__hero-pricing-users-suffix {
	font-size: 0.95em;
	color: rgba(255, 255, 255, 0.85);
}

/* Pricing kolommen — getrokken omhoog zodat ze deels over de groene
   header heen vallen; rest staat op witte achtergrond. */
.block__hero-pricing-columns-wrap {
	position: relative;
	z-index: 3;
	margin-top: -120px;
	padding-bottom: 100px;
}

.block__hero-pricing-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

.block__hero-pricing-col {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 2.25rem;
	border-radius: 20px;
	text-align: left;
}

.block__hero-pricing-col-main {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.block__hero-pricing-col--white {
	background-color: var(--color-white);
	color: var(--color-dark-green);
	border: 1px solid var(--color-dark-green);
}

.block__hero-pricing-col--green {
	background-color: var(--color-green);
	color: var(--color-dark-green);
	animation: heroPricingGreenRise 0.8s cubic-bezier(0.65, 0, 0.35, 1) 1s forwards;
}

@keyframes heroPricingGreenRise {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-75px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.block__hero-pricing-col--green {
		animation: none;
		transform: translateY(-75px);
	}
}

.block__hero-pricing-col--pink {
	background-color: var(--color-pink);
	color: var(--color-white);
}

.block__hero-pricing-col--yellow {
	background-color: var(--color-yellow);
	color: var(--color-dark-green);
}

.block__hero-pricing-col--blue {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.block__hero-pricing-col-title {
	margin: 0;
	font-size: 3.5em;
	line-height: 1.1;
	font-weight: 700;
	text-transform: uppercase;
	color: inherit;
}

@media (max-width: 1450px) {
	.block__hero-pricing-col-title {
		font-size: 2.75em;
	}
}

@media (max-width: 1250px) {
	.block__hero-pricing-col-title {
		font-size: 2.25em;
	}
}

.block__hero-pricing-col-title-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.5em;
	height: 0.5em;
	vertical-align: top;
}

.block__hero-pricing-col-title-star svg {
	display: block;
	width: 100%;
	height: 100%;
}

.block__hero-pricing-col-info-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
	transform: translateY(-1px);
	cursor: help;
}

.block__hero-pricing-col-info-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.block__hero-pricing-col-info-tooltip {
	position: absolute;
	bottom: calc(100% + 1em);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: max-content;
	max-width: 240px;
	padding: 1.65em 2em;
	background-color: #ffffff;
	color: var(--color-dark-green);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 13, 0.15);
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 20;
}

.block__hero-pricing-col-info-tooltip em,
.block__hero-pricing-col-info-tooltip i {
	display: block;
	margin-top: 1em !important;
}

.block__hero-pricing-col-info-tooltip > :first-child {
	margin-top: 0;
}

.block__hero-pricing-col-info-tooltip > :last-child {
	margin-bottom: 0;
}

.block__hero-pricing-col-info-tooltip > * + * {
	margin-top: 1em;
}

.block__hero-pricing-col-info-tooltip em::before,
.block__hero-pricing-col-info-tooltip i::before {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-right: 0.5em;
	vertical-align: middle;
	transform: translateY(-0.1em);
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m323-245 157-94 157 95-42-178 138-120-182-16-71-168-71 167-182 16 138 120-42 178Zm157-24L294-157q-8 5-17 4.5t-16-5.5q-7-5-10.5-13t-1.5-18l49-212-164-143q-8-7-9.5-15.5t.5-16.5q2-8 9-13.5t17-6.5l217-19 84-200q4-9 12-13.5t16-4.5q8 0 16 4.5t12 13.5l84 200 217 19q10 1 17 6.5t9 13.5q2 8 .5 16.5T826-544L662-401l49 212q2 10-1.5 18T699-158q-7 5-16 5.5t-17-4.5L480-269Zm0-206Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m323-245 157-94 157 95-42-178 138-120-182-16-71-168-71 167-182 16 138 120-42 178Zm157-24L294-157q-8 5-17 4.5t-16-5.5q-7-5-10.5-13t-1.5-18l49-212-164-143q-8-7-9.5-15.5t.5-16.5q2-8 9-13.5t17-6.5l217-19 84-200q4-9 12-13.5t16-4.5q8 0 16 4.5t12 13.5l84 200 217 19q10 1 17 6.5t9 13.5q2 8 .5 16.5T826-544L662-401l49 212q2 10-1.5 18T699-158q-7 5-16 5.5t-17-4.5L480-269Zm0-206Z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.block__hero-pricing-col-info-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #ffffff;
}

.block__hero-pricing-col-info-icon:hover .block__hero-pricing-col-info-tooltip,
.block__hero-pricing-col-info-icon:focus-visible .block__hero-pricing-col-info-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.block__hero-pricing-col-subtext {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.5;
	opacity: 0.75;
	color: inherit;
}

.block__hero-pricing-col-subtitle {
	margin: 1em 0 0;
	font-size: 2em;
	font-weight: 400;
	color: inherit;
}

@media (max-width: 1250px) {
	.block__hero-pricing-col {
		padding: 2rem;
	}

	.block__hero-pricing-col-subtitle {
		font-size: 1.5em;
	}
}

.block--hero-pricing[data-active-option="1"] .block__hero-pricing-col-subtitle--option-2,
.block--hero-pricing[data-active-option="2"] .block__hero-pricing-col-subtitle--option-1 {
	display: none;
}

.block__hero-pricing-col-text {
	font-size: 0.75em;
	line-height: 1.5;
	color: color-mix(in srgb, currentcolor 75%, transparent);
}

.block__hero-pricing-col-text > :first-child {
	margin-top: 0;
}

.block__hero-pricing-col-text > :last-child {
	margin-bottom: 0;
}

/* Knop varianten — outline op witte kolommen, solide donker op gekleurde */
.block__hero-pricing-col-cta {
	width: 100%;
	margin-top: 2.25em;
}

.block__hero-pricing-col-cta--white {
	color: var(--color-dark-green);
}

.block__hero-pricing-col-cta--white::before {
	background-color: transparent;
	border: 1px solid var(--color-dark-green);
}

.block__hero-pricing-col-cta--green,
.block__hero-pricing-col-cta--pink,
.block__hero-pricing-col-cta--yellow,
.block__hero-pricing-col-cta--blue {
	color: var(--color-white);
}

.block__hero-pricing-col-cta--green::before,
.block__hero-pricing-col-cta--pink::before,
.block__hero-pricing-col-cta--yellow::before,
.block__hero-pricing-col-cta--blue::before {
	background-color: var(--color-dark-green);
}

/* Lijst onderin de kolom — icoon links, titel + tekst rechts */
.block__hero-pricing-col-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid currentColor;
}

.block__hero-pricing-col--white .block__hero-pricing-col-list,
.block__hero-pricing-col--green .block__hero-pricing-col-list,
.block__hero-pricing-col--yellow .block__hero-pricing-col-list {
	border-top: none;
	padding-top: 0;
	margin-top: 2.25em;
}

.block__hero-pricing-col--pink .block__hero-pricing-col-list,
.block__hero-pricing-col--blue .block__hero-pricing-col-list {
	border-top-color: rgba(255, 255, 255, 0.3);
}

.block__hero-pricing-col-list-title {
	margin: 0 0 1.25em;
	font-size: 0.95em;
	font-weight: 400;
	color: inherit;
}

.block__hero-pricing-col-list-items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.block__hero-pricing-col-list-item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.block__hero-pricing-col-list-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	transform: translateY(-2px);
}

.block__hero-pricing-col-list-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block__hero-pricing-col-list-content {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	min-width: 0;
}

.block__hero-pricing-col-list-item-title {
	font-size: 1em;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.block__hero-pricing-col-list-item-text {
	font-size: 0.95em;
	line-height: 1.4;
	opacity: 0.8;
	color: inherit;
}

.block__hero-pricing-col-cta-subtext {
	margin: 0.75em 0 0;
	font-size: 0.75em;
	line-height: 1.5;
	color: color-mix(in srgb, currentcolor 75%, transparent);
	text-align: center;
}

.block__hero-pricing-col-cta-subtext > :first-child {
	margin-top: 0;
}

.block__hero-pricing-col-cta-subtext > :last-child {
	margin-bottom: 0;
}

@media (max-width: 1150px) {
	.block__hero-pricing-header {
		padding-bottom: 250px;
	}

	.block--grid {
		padding: 2.5em 0;
	}

	.block__hero-pricing-columns {
		grid-template-columns: 1fr 1fr;
	}

	/* Derde kolom over volledige breedte onderaan: main-content links, lijst
	   rechts, met een grijze verticale divider tussen de twee. Hoogte volgt
	   natuurlijk de content. */
	.block__hero-pricing-col:nth-child(3) {
		grid-column: 1 / -1;
		display: flex;
		flex-direction: row;
		gap: 2.25rem;
		align-items: stretch;
	}

	.block__hero-pricing-col:nth-child(3) > .block__hero-pricing-col-main {
		flex: 1 1 0;
		min-width: 0;
	}

	.block__hero-pricing-col:nth-child(3) > .block__hero-pricing-col-list {
		flex: 1 1 0;
		min-width: 0;
		margin-top: 0;
		padding: 0 0 0 2.25rem;
		border: none;
		border-left: 1px solid rgba(0, 0, 0, 0.15);
	}

	/* Geen verspringing/animatie naar boven voor de groene kolom — die staat
	   op deze breedte gewoon op zijn eigen rij. */
	.block__hero-pricing-col--green {
		animation: none;
		transform: none;
	}
}

@media (max-width: 1150px) and (prefers-reduced-motion: reduce) {
	.block__hero-pricing-col--green {
		transform: none;
	}
}

@media (max-width: 768px) {
	.block__hero-pricing-columns {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.block__hero-pricing-col {
		padding: 1.75rem;
	}

	/* Derde kolom valt op mobiel terug naar één-koloms stack, zonder divider. */
	.block__hero-pricing-col:nth-child(3) {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.block__hero-pricing-col:nth-child(3) > .block__hero-pricing-col-list {
		padding: 0;
		border-left: none;
		margin-top: 2.25em;
	}

	.block__hero-pricing-toggle-option {
		min-width: 110px;
		padding: 0.7em 1.2em;
	}

	.block__hero-pricing-header {
		padding: 80px 0 140px;
	}

	.block__hero-pricing-columns-wrap {
		margin-top: -80px;
		padding-bottom: 80px;
	}
}

@media (max-width: 450px) {
	.block__hero-pricing-toggle-option {
		min-width: 0;
		font-size: 0.9em;
	}

	.block__hero-pricing-header {
		padding: 80px 0 120px;
	}

	.block__hero-pricing-columns-wrap {
		margin-top: -70px;
		padding-bottom: 60px;
	}
}

.block--hero-use-case::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 25px;
	background-color: var(--color-white);
	border-radius: 25px 25px 0 0;
}

.block--hero-use-case .block__content {
	position: relative;
	z-index: 1;
}

.block__hero-uc-title {
	font-size: 2.75em;
	line-height: 1.15;
	margin: 0 auto;
	max-width: 900px;
	color: var(--color-white);
}

.block__hero-uc-text {
	font-size: 1.25em;
	line-height: 1.5;
	margin: 2em 0 0;
	font-weight: 400;
	color: var(--color-white);
}

.block__hero-uc-subtitle {
	font-size: 1.35em;
	line-height: 1.4;
	margin: 3.5em auto 1.5em;
	font-weight: 600;
	color: var(--color-white);
}

.block__hero-uc-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	max-width: 1000px;
	margin: 0 auto;
}

.block__hero-uc-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem 1.5rem;
	border: 2px solid var(--color-green);
	border-radius: 20px;
}

.block__hero-uc-stat-title {
	font-size: 2.5em;
	line-height: 1.1;
	font-weight: 400;
	color: var(--color-green);
}

.block__hero-uc-stat-title--large {
	font-size: 2em;
}

.block__hero-uc-stat-title--medium {
	font-size: 1.65em;
}

.block__hero-uc-stat-title--small {
	font-size: 1.35em;
}

.block__hero-uc-stat-title strong {
	color: inherit;
	font-weight: 700;
}

.block__hero-uc-stat-subtitle {
	font-size: 0.9em;
	line-height: 1.4;
	font-weight: 600;
	color: var(--color-green);
}

@media (max-width: 768px) {
	.block__hero-uc-title {
		font-size: 2.5em;
	}

	.block__hero-uc-text {
		font-size: 1.25em;
	}

	.block__hero-uc-subtitle {
		font-size: 1.35em;
	}

	.block__hero-uc-stats {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.block__hero-uc-stat {
		padding: 2rem 1.5rem;
	}

	.block__hero-uc-stat-title--large {
		font-size: 2em;
	}

	.block__hero-uc-stat-title--medium {
		font-size: 1.5em;
	}

	.block__hero-uc-stat-title--small {
		font-size: 1.15em;
	}
}

@media (max-width: 450px) {
	.block--hero-use-case {
		padding: 100px 0;
	}

	.block__hero-uc-title {
		font-size: 1.75em;
	}

	.block__hero-uc-text {
		font-size: 1.1em;
	}

	.block__hero-uc-subtitle {
		font-size: 1.15em;
	}

	.block--rich-content__title--h2 {
		font-size: 1.5em;
	}

	.block--rich-content__title-group,
	.block--rich-content__figure {
		margin: 50px 0 0;
	}
}

/* Onder 1250px: kleinere hero-typografie, minder padding onderaan en een
   smallere linkerkolom. Staat bewust ná alle hero-basisregels hierboven,
   anders winnen die door de cascade. */
@media (max-width: 1250px) {
	.block__title {
		font-size: 3.5em;
		line-height: 1.35em;
	}

	.block__subtitle {
		font-size: 1.5em;
		line-height: 1.45em;
	}

	.block--hero {
		padding-bottom: 150px;
	}

	.block--hero .block__column--left {
		flex: 0 1 500px;
		max-width: 500px;
	}
}

/* Tussen 992px en 1250px: smallere case-slides. De slider draait met
   slidesPerView:'auto', dus Swiper neemt deze CSS-breedte over (geen inline JS). */
@media (min-width: 993px) and (max-width: 1250px) {
	.block__featured-cases .swiper-slide {
		width: 400px;
	}
}

/* Onder 992px: hero-typografie nog kleiner en linkerkolom op halve viewport. */
@media (max-width: 992px) {
	.block__title {
		font-size: 2.75em;
		line-height: 1.3em;
	}

	.block__subtitle {
		font-size: 1.25em;
		line-height: 1.4em;
	}

	.block--hero .block__column--left {
		flex: 0 1 50vw;
		max-width: 50vw;
	}
}

/* Onder 768px: hero-kolommen onder elkaar (rechter boven, linker onder),
   beide volledige breedte. */
@media (max-width: 768px) {
	.block--hero .block__columns {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 5rem;
	}

	.block--hero .block__column--left,
	.block--hero .block__column--right {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.block__column-svg {
		width: 50%;
		margin-right: auto;
	}

	.block__featured-cases .swiper-slide {
		width: calc(90vw - 32px);
	}
}

/* Onder 500px: nog compactere hero. */
@media (max-width: 500px) {
	.block__title {
		font-size: 2.5em;
	}

	.block--hero {
		padding-bottom: 100px;
	}
}

.block__cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.block__cta {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9em 2em;
	border-radius: 9999px;
	font-size: 1em;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

/* Als het component een <button> is (popup-trigger, submit, close) heeft het
   standaard browser-randje/achtergrond niets te zoeken: de vulling/outline komt
   altijd van ::before. */
button.block__cta {
	background: none;
	border: none;
}

.block__cta::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 9999px;
	transition: inset 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.block__cta:hover::before {
	inset: 0.125em;
}

.block__cta__text {
	position: relative;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	line-height: 1.3;
}

.block__cta__text span {
	display: inline-block;
	position: relative;
	text-shadow: 0 1.3em currentColor;
	transform: translateY(0) rotate(0.001deg);
	transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.block__cta:hover .block__cta__text span {
	transform: translateY(-1.3em) rotate(0.001deg);
}

.block__cta--primary {
	color: var(--color-dark-green);
}

.block__cta--primary::before {
	background-color: var(--color-green);
}

.block__cta--secondary {
	color: var(--color-green);
}

.block__cta--secondary::before {
	background-color: transparent;
	border: 1px solid var(--color-green);
}

.site-nav .block__cta--primary::before,
.site-header__ctas .block__cta--primary::before {
	background-color: var(--color-yellow);
}

.site-nav .block__cta--secondary,
.site-header__ctas .block__cta--secondary {
	color: var(--color-yellow);
}

.site-nav .block__cta--secondary::before,
.site-header__ctas .block__cta--secondary::before {
	background-color: transparent;
	border: 1px solid var(--color-yellow);
}

/* Mobiel: kleinere knoppen voor alle .block__cta's in de site. Staat bewust ná
   de basisdefinitie hierboven, anders wint de basisregel door de cascade. */
@media (max-width: 768px) {
	.block__cta {
		font-size: 0.9em;
		padding: 0.75em 1.5em;
	}
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.block__cta,
.block__button {
	font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Contact Intake — 2 koloms blok: links titel/tekst/knop, rechts groene
   afgeronde kaart met een Gravity Forms formulier. */
.block--contact-intake {
	padding: 5em 0;
	background-color: var(--color-white);
	color: var(--color-dark-green);
}

.block__contact-intake {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10rem;
	align-items: center;
}

.block__contact-intake-text {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

.block__contact-intake-title {
	font-size: 2rem;
	line-height: 1.2em;
	margin: 0;
	max-width: 520px;
	color: var(--color-dark-green);
}

.block__contact-intake-title strong {
	color: var(--color-blue);
	font-weight: inherit;
}

.block__contact-intake-paragraph {
	margin: 0;
	max-width: 520px;
	font-size: 1.15em;
	line-height: 1.6;
	color: rgba(15, 23, 13, 0.75);
}

.block__contact-intake-card {
	background-color: var(--color-green);
	border-radius: 24px;
	padding: 3rem;
	color: var(--color-white);
}

.block__contact-intake-form-empty {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.85;
}

/* Gravity Forms styling binnen de groene kaart */
.block__contact-intake-card .gform_wrapper {
	margin: 0;
}

.block__contact-intake-card .gform_fields,
.block__contact-intake-card .gform_legacy_markup_wrapper ul.gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.block__contact-intake-card .gfield {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	max-width: none;
	width: auto;
	float: none;
	clear: none;
	list-style: none;
}

.block__contact-intake-card .gfield.gfield--width-half:nth-of-type(1) {
	grid-column: 1 / span 1;
}

.block__contact-intake-card .gfield.gfield--width-half:nth-of-type(2) {
	grid-column: 2 / span 1;
}

.block__contact-intake-card .gfield_label {
	display: block;
	margin: 0 0 0.25em 0;
	color: var(--color-white);
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.3;
}

.block__contact-intake-card .gfield_required {
	display: none;
}

.block__contact-intake-card .ginput_container input[type="text"],
.block__contact-intake-card .ginput_container input[type="email"],
.block__contact-intake-card .ginput_container input[type="tel"],
.block__contact-intake-card .ginput_container textarea {
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 18px;
	padding: 0 1.5rem;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-white);
	transition: border-color 0.2s, background-color 0.2s;
}

.block__contact-intake-card .ginput_container input[type="text"],
.block__contact-intake-card .ginput_container input[type="email"],
.block__contact-intake-card .ginput_container input[type="tel"] {
	height: 50px;
}

.block__contact-intake-card .ginput_container textarea {
	padding: 1rem 1.5rem;
}

.block__contact-intake-card .gform_legacy_markup_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
	padding: 0 1em;
}

body .gform_legacy_markup_wrapper ul li.gfield {
	margin-top: 0 !important;
	padding: 0 !important;
}

body .gform_legacy_markup_wrapper .gform_footer,
body .gform_legacy_markup_wrapper .gform_footer.top_label,
body .gform_legacy_markup_wrapper .gform_footer.left_label,
body .gform_legacy_markup_wrapper .gform_footer.right_label {
	margin: 2.5rem 0 0;
	padding: 0;
}

.block__contact-intake-card .ginput_container input::placeholder,
.block__contact-intake-card .ginput_container textarea::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.block__contact-intake-card .ginput_container input:focus,
.block__contact-intake-card .ginput_container textarea:focus {
	outline: none;
	border-color: var(--color-dark-green);
	background-color: rgba(0, 0, 0, 0.22);
}

.block__contact-intake-card .ginput_container input::placeholder,
.block__contact-intake-card .ginput_container textarea::placeholder {
	font-weight: 400;
}

.block__contact-intake-card .ginput_container textarea {
	min-height: 140px;
	resize: vertical;
}

.block__contact-intake-card .gform_footer,
.block__contact-intake-card .gform-footer {
	display: flex;
	margin: 1.5rem 0 0;
	padding: 0;
	width: 100%;
}

.block__contact-intake-card .gform_footer .block__cta.gform_button {
	width: 100%;
	background: none;
	border: none;
	color: var(--color-white);
	cursor: pointer;
}

.block__contact-intake-card .gform_footer .block__cta.gform_button::before {
	background-color: var(--color-dark-green);
}

.block__contact-intake-card .gfield_validation_message,
.block__contact-intake-card .validation_message {
	color: var(--color-white);
	background-color: rgba(220, 41, 89, 0.85);
	padding: 0.5em 0.75em;
	border-radius: 8px;
	margin-top: 0.35rem;
	font-size: 0.9em;
}

.block__contact-intake-card .gform_confirmation_message {
	color: var(--color-white);
	font-size: 1.15em;
	line-height: 1.5;
}

.block__contact-intake-card .gform_confirmation_message strong,
.block__contact-intake-card .gform_confirmation_message b {
	font-size: 2.25em;
}

@media (min-width: 993px) and (max-width: 1250px) {
	.block__contact-intake {
		grid-template-columns: 0.75fr 1fr;
		gap: 5rem;
	}
}

@media (max-width: 992px) {
	.block__contact-intake {
		grid-template-columns: 1fr;
		gap: 5rem;
	}

	.block__contact-intake-text {
		max-width: 700px;
	}

	.block__contact-intake-title,
	.block__contact-intake-paragraph {
		max-width: none;
	}
}

@media (max-width: 600px) {
	.block__contact-intake-card {
		padding: 2rem 1.5rem;
	}

	.block__contact-intake-card .gform_fields {
		grid-template-columns: 1fr;
	}

	.block__contact-intake-card .gfield.gfield--width-half,
	.block__contact-intake-card .gfield--width-half {
		grid-column: span 1;
	}

	.block__contact-intake-title {
		font-size: 2em;
	}
}

@media (max-width: 450px) {
	.block__contact-intake-card .gfield.gfield--width-half:nth-of-type(1),
	.block__contact-intake-card .gfield.gfield--width-half:nth-of-type(2) {
		grid-column: 1 / -1;
	}
}

/* Popup / modal (o.a. hero-alt knop met Gravity Forms formulier).
   Witte dialog met afgeronde hoeken (max 650px) boven een gedimde pagina.
   Het formulier hergebruikt de groene .block__contact-intake-card styling
   zodat de inputs identiek zijn aan de contactpagina. */
.pb-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.pb-modal[hidden] {
	display: none;
}

.pb-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 23, 13, 0.7);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: pb-modal-fade 0.25s ease;
}

.pb-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 500px;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	background-color: var(--color-white);
	color: var(--color-dark-green);
	border-radius: 24px;
	padding: 2.5rem;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
	animation: pb-modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pb-modal__title {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--color-dark-green);
}

.pb-modal__subtitle {
	margin: 0 0 2.25rem;
	font-size: 1.05em;
	line-height: 1.5;
	color: rgba(15, 23, 13, 0.7);
}

/* In de witte popup is de "kaart" puur een wrapper: geen groene achtergrond,
   geen padding. De inputs krijgen daarom donkere tekst/randen i.p.v. de
   wit-op-groen styling van de contactpagina. */
.pb-modal__form.block__contact-intake-card {
	padding: 0;
	background: none;
	background-color: transparent;
	color: var(--color-dark-green);
}

.pb-modal__form .gfield_label {
	color: var(--color-dark-green);
}

.pb-modal__form .ginput_container input[type="text"],
.pb-modal__form .ginput_container input[type="email"],
.pb-modal__form .ginput_container input[type="tel"],
.pb-modal__form .ginput_container textarea {
	background-color: rgba(15, 23, 13, 0.04);
	border: 1px solid rgba(15, 23, 13, 0.15);
	color: var(--color-dark-green);
}

.pb-modal__form .ginput_container input::placeholder,
.pb-modal__form .ginput_container textarea::placeholder {
	color: rgba(15, 23, 13, 0.5);
}

.pb-modal__form .ginput_container input:focus,
.pb-modal__form .ginput_container textarea:focus {
	border-color: var(--color-green);
	background-color: rgba(15, 23, 13, 0.06);
}

.pb-modal__form .gform_confirmation_message {
	color: var(--color-dark-green);
}

/* Verzendknop: zelfde .block__cta--primary component als overal op de site,
   in de standaard groene variant (groene vulling, donkergroene tekst). */
.pb-modal__form .gform_footer .block__cta.gform_button {
	width: auto;
	color: var(--color-dark-green);
}

.pb-modal__form .gform_footer .block__cta.gform_button::before {
	background-color: var(--color-green);
}

/* "Close"-knop: hetzelfde .block__cta component, outline (secondary) variant
   in donkere kleuren. Staat naast "Versturen" in de formulier-footer. */
.pb-modal .pb-modal__close.block__cta--secondary {
	color: var(--color-dark-green);
	background: none;
	border: none;
}

.pb-modal .pb-modal__close.block__cta--secondary::before {
	background-color: transparent;
	border: 1px solid var(--color-dark-green);
}

/* Footer: "Versturen" en "Close" naast elkaar. */
.pb-modal__form .gform_footer {
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: flex-start;
}

.pb-modal__form .gform_footer .pb-modal__close {
	width: auto;
	flex: 0 0 auto;
}

/* Losse fallback-Close (bevestigingsstaat zonder footer): gecentreerd onderaan,
   en verborgen zodra de footer-variant aanwezig is. */
.pb-modal__close--standalone {
	display: flex;
	width: -moz-fit-content;
	width: fit-content;
	margin: 1.5rem auto 0;
}

.pb-modal__dialog:has(.gform_footer .pb-modal__close) .pb-modal__close--standalone {
	display: none;
}

body.pb-modal-open {
	overflow: hidden;
}

@keyframes pb-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes pb-modal-pop {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
	.pb-modal {
		padding: 1rem;
	}

	.pb-modal__dialog {
		padding: 1.5rem;
		border-radius: 18px;
	}

	.pb-modal__title {
		font-size: 1.4rem;
	}
}

.site-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-dark-green);
	color: var(--color-white);
	opacity: 1;
	transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.site-loader.is-loaded {
	opacity: 0;
	pointer-events: none;
}

.site-loader__inner {
	animation: site-loader-enter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes site-loader-enter {
	from { opacity: 0; transform: scale(0.4); }
	to   { opacity: 1; transform: scale(1); }
}

.site-loader__svg {
	display: block;
	width: clamp(90px, 13vmin, 150px);
	height: auto;
	animation: site-loader-spin 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	transform-origin: center;
}

/* Each tick (1/6 of the cycle) animates 60deg with easing, then briefly holds
 * before the next tick. Move portion is 75% of the tick, hold is 25%. */
@keyframes site-loader-spin {
	0%     { transform: rotate(0deg); }
	12.5%  { transform: rotate(60deg); }
	16.67% { transform: rotate(60deg); }
	29.17% { transform: rotate(120deg); }
	33.33% { transform: rotate(120deg); }
	45.83% { transform: rotate(180deg); }
	50%    { transform: rotate(180deg); }
	62.5%  { transform: rotate(240deg); }
	66.67% { transform: rotate(240deg); }
	79.17% { transform: rotate(300deg); }
	83.33% { transform: rotate(300deg); }
	95.83% { transform: rotate(360deg); }
	100%   { transform: rotate(360deg); }
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--color-dark-green);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1rem 2.5rem;
}

.site-header__logo img {
	display: block;
	max-height: 60px;
	width: auto;
}

.site-header__logo-text {
	font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-weight: 700;
	color: var(--color-white);
	text-decoration: none;
}

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.site-nav__list > li + li {
	margin-left: 3.5rem;
}

.site-nav__list > li:last-child {
	margin-left: 1em;
}

.site-nav__list a {
	color: var(--color-white);
	text-decoration: none;
	font-weight: 600;
}

.site-nav__list a.block__cta--primary {
	color: var(--color-dark-green);
}

.site-nav__list a:not(.block__cta) {
	position: relative;
	transition: color 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.site-nav__list a:not(.block__cta)::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 2px;
	background-color: var(--color-yellow);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.site-nav__list a:not(.block__cta):hover {
	color: var(--color-yellow);
}

.site-nav__list a:not(.block__cta):hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.site-nav__list li.current-menu-item a:not(.block__cta)::after,
.site-nav__list li.current-menu-parent a:not(.block__cta)::after,
.site-nav__list li.current-menu-ancestor a:not(.block__cta)::after {
	background-color: var(--color-white);
	transform: scaleX(1);
	transform-origin: left center;
}

.site-nav__toggle {
	display: none;
}

.site-header__ctas {
	display: none;
}

@media (max-width: 1500px) {
	.site-nav__list > li + li {
		margin-left: 1.5rem;
	}
}

@media (max-width: 1299px) {
	.site-header__ctas {
		display: flex;
		gap: 0.75rem;
		margin-left: auto;
		opacity: 1;
		transition: opacity 0.35s ease;
	}

	.site-header.is-menu-open .site-header__ctas {
		opacity: 0;
		pointer-events: none;
	}
}

@media (max-width: 991px) {
	.site-header__ctas {
		display: none;
	}
}

@media (max-width: 1299px) {
	body.is-menu-open {
		overflow: hidden;
	}

	.site-nav__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 6px;
		width: 44px;
		height: 44px;
		padding: 0;
		background: none;
		border: none;
		cursor: pointer;
		position: relative;
		z-index: 102;
	}

	.site-nav__toggle-bar {
		display: block;
		width: 28px;
		height: 2px;
		background-color: var(--color-white);
		transition:
			transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
			opacity 0.2s ease;
	}

	.site-header.is-menu-open .site-nav__toggle-bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.site-header.is-menu-open .site-nav__toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.site-header.is-menu-open .site-nav__toggle-bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.site-nav {
		position: fixed;
		inset: 0;
		background-color: var(--color-dark-green);
		padding: 6rem 2.5rem 2.5rem;
		z-index: 101;
		display: flex;
		flex-direction: column;
		clip-path: circle(0% at calc(100% - 3.25rem) 2.5rem);
		transition: clip-path 0.7s cubic-bezier(0.83, 0, 0.17, 1);
		pointer-events: none;
		overflow-y: auto;
	}

	.site-header.is-menu-open .site-nav {
		clip-path: circle(160% at calc(100% - 3.25rem) 2.5rem);
		pointer-events: auto;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		flex: 1;
		width: 100%;
		gap: 1.25rem;
	}

	.site-nav__list > li {
		margin-left: 0 !important;
		opacity: 0;
		transform: translateY(20px);
		transition:
			opacity 0.45s ease,
			transform 0.55s cubic-bezier(0.34, 1.32, 0.64, 1);
	}

	.site-header.is-menu-open .site-nav__list > li {
		opacity: 1;
		transform: translateY(0);
	}

	.site-header.is-menu-open .site-nav__list > li:nth-child(1) { transition-delay: 0.25s; }
	.site-header.is-menu-open .site-nav__list > li:nth-child(2) { transition-delay: 0.30s; }
	.site-header.is-menu-open .site-nav__list > li:nth-child(3) { transition-delay: 0.35s; }
	.site-header.is-menu-open .site-nav__list > li:nth-child(4) { transition-delay: 0.40s; }
	.site-header.is-menu-open .site-nav__list > li:nth-child(5) { transition-delay: 0.45s; }
	.site-header.is-menu-open .site-nav__list > li:nth-child(6) { transition-delay: 0.50s; }
	.site-header.is-menu-open .site-nav__list > li:nth-child(7) { transition-delay: 0.55s; }
	.site-header.is-menu-open .site-nav__list > li:nth-child(8) { transition-delay: 0.60s; }

	.site-nav__list > li:has(.block__cta) {
		width: 100%;
	}

	.site-nav__list > li:has(.block__cta--primary) {
		margin-top: auto;
		padding-top: 2rem;
	}

	.site-nav__list .block__cta {
		display: flex;
		width: 100%;
		padding: 1.1em 2em;
		font-size: 1.05em;
	}

	.site-nav__list a:not(.block__cta) {
		display: inline-block;
		font-size: 1.75rem;
		line-height: 1.2;
	}

	.site-nav__list a:not(.block__cta)::after {
		bottom: -0.25em;
	}
}

.block--featured-partners {
	padding: 7.5em 0;
	background-color: var(--color-white);
	color: var(--color-dark-green);
	overflow: hidden;
}

.block--featured-partners__title {
	font-size: 2.5em;
	line-height: 1.2em;
	max-width: 700px;
	margin: 0 auto 1.5em;
	text-align: center;
	color: var(--color-dark-green);
}

.block__featured-partners-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 7rem;
}

.block__featured-partners-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.block__featured-partners-link {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

a.block__featured-partners-link:hover {
	opacity: 0.7;
	transform: translateY(-2px);
}

.block__featured-partners-link img {
	display: block;
	max-height: 4.5em;
	max-width: 11em;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 768px) {
	.block--featured-partners {
		padding: 5em 0;
	}

	.block--featured-partners__title {
		font-size: 2em;
	}

	/* Kleinere tussenruimte + kleinere logo's zodat de partners zo lang
	   mogelijk naast elkaar blijven staan (pas stapelen vanaf 450px). */
	.block__featured-partners-list {
		gap: 2rem;
	}

	.block__featured-partners-link img {
		max-height: 3em;
		max-width: 7em;
	}

	.site-header__logo img {
		max-height: 50px;
	}
}

@media (max-width: 450px) {
	.block__featured-partners-list {
		flex-direction: column;
		gap: 3rem;
	}

	.block__featured-partners-link img {
		max-height: 5em;
		max-width: 10em;
	}
}

/* ---------------------------------------------------------------------------
   Site footer
   --------------------------------------------------------------------------- */

.site-footer {
	background-color: var(--color-dark-green);
	color: var(--color-white);
	border-radius: 25px 25px 0 0;
	padding: 5em 0 3.5em;
	margin-top: 5em;
}

.site-footer__columns {
	display: flex;
	flex-wrap: wrap;
	gap: 10em;
}

.site-footer__col {
	flex: 0 0 auto;
	padding-top: 1em;
}

.site-footer__col--brand {
	padding-top: 0;
}

.site-footer__col--contact {
	text-align: left;
	margin-left: auto;
}

/* Kleinere kolom-gap zodat de 3 footer-kolommen tot 992px op één rij passen
   (anders wrapt Contact & Support al rond ~1056px naar beneden). */
@media (max-width: 1200px) {
	.site-footer__columns {
		gap: 4em;
	}
}

.site-footer__logo,
.site-footer__logo a,
.site-footer__logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

/* Custom-logo-link wordt een flex-rij met de brand-SVG vóór de img, beide
   verticaal gecentreerd. Op hover van de link roteert de SVG eenmalig 60°
   via een CSS-transition; bij mouseleave glijdt hij weer terug naar 0°. */
.custom-logo-link {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.custom-logo-brand {
	flex-shrink: 0;
	/* Vaste pixel-afmetingen i.p.v. height: 100% + aspect-ratio: Safari kon
	   die combinatie binnen deze flex-context (align-items: center, geen
	   definite cross-axis) niet resolven en rendert de SVG dan op 0×0. We
	   matchen de img max-height per context (header / mobile / footer). */
	width: 60px;
	height: 60px;
	color: var(--color-white);
	transform-origin: center;
	transform: rotate(0deg);
	/* Geen transition in de rust-staat — bij mouseleave snapt hij dus
	   meteen terug naar 0°. De transition wordt alleen tijdens hover
	   geactiveerd zodat de heen-animatie wél smooth is. */
	/* Override de continue site-loader-spin animatie die via de gedeelde
	   .site-loader__svg class meekomt — de brand-SVG moet stil staan en
	   alleen op hover roteren. */
	animation: none !important;
}

.site-footer__logo .custom-logo-brand {
	width: 58px;
	height: 58px;
}

@media (max-width: 768px) {
	.custom-logo-brand {
		width: 50px;
		height: 50px;
	}
}

.custom-logo-brand path {
	fill: currentColor;
}

.custom-logo-link:hover .custom-logo-brand,
.custom-logo-link:focus-visible .custom-logo-brand {
	transform: rotate(60deg);
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
	.custom-logo-link:hover .custom-logo-brand,
	.custom-logo-link:focus-visible .custom-logo-brand {
		transform: none;
		transition: none;
	}
}

.site-footer__logo img,
.site-footer__logo .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 58px;
	max-width: 280px;
}

.site-footer__logo-text {
	font-size: 1.75em;
	font-weight: 700;
	color: var(--color-white);
	text-decoration: none;
}

.site-footer__subtitle {
	margin: 1.75em 0 2em 0;
	font-size: 1em;
	font-weight: 400;
	color: var(--color-white);
}

.site-footer__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.site-footer__social {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	transition: opacity 0.25s ease;
}

.site-footer__social:hover {
	opacity: 0.6;
}

.site-footer__social svg {
	width: 1.5em;
	height: 1.5em;
	display: block;
}

.site-footer__heading {
	margin: 0 0 1.5em;
	font-size: 1.25em;
	font-weight: 700;
	color: var(--color-white);
}

.site-footer__menu,
.site-footer__legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 0.85em;
}

.site-footer__menu a,
.site-footer__legal-menu a {
	color: var(--color-white);
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.site-footer__menu a:hover,
.site-footer__legal-menu a:hover {
	opacity: 0.6;
}

.site-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.1em;
}

.site-footer__contact-item {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.75em;
	color: var(--color-white);
	line-height: 1.5;
}

.site-footer__contact-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	margin-top: 0.1em;
	color: var(--color-white);
}

.site-footer__contact-icon svg,
.site-footer__contact-icon img {
	width: 100%;
	height: 100%;
	display: block;
}

.site-footer__contact-icon img {
	object-fit: contain;
}

.site-footer__contact-text {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

a.site-footer__contact-text:hover {
	opacity: 0.6;
}

.site-footer__divider {
	width: 100%;
	height: 10px;
	background-color: var(--color-white);
	margin: 5em 0 2em;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.site-footer__copyright {
	margin: 0;
	font-size: 0.95em;
	color: var(--color-white);
}

.site-footer__legal {
	margin-left: auto;
}

.site-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1.5em;
	font-size: 0.95em;
}

@media (max-width: 992px) {
	.site-footer__columns {
		gap: 3.5rem 2.5rem;
	}

	/* Logo + socials full width bovenaan; Quick Links en Contact & Support
	   daaronder naast elkaar. */
	.site-footer__col--brand {
		flex: 1 1 100%;
	}

	.site-footer__col--links,
	.site-footer__col--contact {
		flex: 1 1 0;
		min-width: 0;
		margin-left: 0;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Legal-links boven, copyright eronder met meer ruimte ertussen. */
	.site-footer__legal {
		order: -1;
		margin-left: 0;
	}

	.site-footer__copyright {
		margin-top: 1.5em;
	}

	.site-footer__legal-menu {
		justify-content: flex-start;
	}
}

/* Onder 450px: Quick Links en Contact & Support onder elkaar i.p.v. naast elkaar. */
@media (max-width: 450px) {
	.site-footer__col--links,
	.site-footer__col--contact {
		flex: 1 1 100%;
	}
}

/* FAQ blok — links (1/3) titel, rechts (2/3) accordion. Zelfde toggle-pattern
   als .block__feature-tabs-list-items, maar zonder icon en in groen.
   Uitgeklapt item: solide groene achtergrond met witte tekst. */
.block--faq {
	padding: 5em 0;
	color: var(--color-dark-green);
}

.block__faq-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 7.5rem;
	align-items: start;
}

.block__faq-intro {
	min-width: 0;
}

.block__faq-title {
	margin: 0;
	font-size: 3.5em;
	line-height: 1.2;
	color: var(--color-dark-green);
}

.block__faq-title strong {
	color: var(--color-blue);
	font-weight: inherit;
}

.block__faq-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.block__faq-item {
	border: 1px solid var(--color-green);
	border-radius: 12px;
	overflow: hidden;
	background-color: transparent;
	color: var(--color-green);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.block__faq-item.is-active {
	background-color: var(--color-green);
	color: var(--color-white);
}

.block__faq-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background-color: transparent;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: 1.15em;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	transition: color 0.3s ease;
}

.block__faq-label {
	flex: 1;
	line-height: 1.4;
}

.block__faq-chevron {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	display: flex;
	color: inherit;
	transition: transform 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

.block__faq-chevron svg {
	width: 100%;
	height: 100%;
}

.block__faq-toggle[aria-expanded="true"] .block__faq-chevron {
	transform: rotate(180deg);
}

.block__faq-content {
	overflow: hidden;
}

.block__faq-content[hidden] {
	display: none;
}

.block__faq-content-inner {
	padding: 0 1.5rem 1.25rem;
	line-height: 1.6;
}

.block__faq-content-inner > * {
	margin: 0;
}

.block__faq-content-inner > * + * {
	margin-top: 0.6em;
}

@media (max-width: 900px) {
	.block__faq-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.block__faq-title {
		font-size: 2em;
	}
}

@media (max-width: 600px) {
	.block--faq {
		padding: 3em 0;
	}

	.block__faq-toggle {
		padding: 1rem 1.25rem;
	}

	.block__faq-content-inner {
		padding: 0 1.25rem 1rem;
	}
}

/* Grid blok — 4 gekleurde kaarten in een 3x2 layout:
   [ 1 ][ 2 ][ 3 ]
   [ 4    4][ 3 ]
   Kaart 3 spant 2 rijen, kaart 4 spant 2 kolommen. */
.block--grid {
	padding: 5em 0;
	color: var(--color-dark-green);
}

.block__grid-header {
	max-width: 750px;
	margin: 0 auto 3.5em;
}

.block__grid-category {
	display: inline-block;
	margin: 0 0 1em;
	padding: 0.7em 1.6em;
	border: 1px solid var(--color-dark-green);
	border-radius: 9999px;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1;
	color: var(--color-dark-green);
	opacity: 0.65;
}

.block__grid-title {
	margin: 0;
	font-size: 2.5em;
	line-height: 1.2;
	max-width: 700px;
}

.block__grid-title strong {
	color: var(--color-green);
	font-weight: inherit;
}

.block__grid-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: auto;
	gap: 0.75em;
	margin-top: 0.75em;
}

.block__grid-card {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 2.25rem;
	border-radius: 20px;
	height: 100%;
}

.block__grid-card--1 { grid-column: 1; grid-row: 1; align-self: start; }
.block__grid-card--2 { grid-column: 2; grid-row: 1; align-self: start; }
.block__grid-card--3 { grid-column: 3; grid-row: 1 / span 2; }
.block__grid-card--4 { grid-column: 1 / span 2; grid-row: 2; align-self: start; }

.block__grid-card--blue {
	background-color: var(--color-blue);
	color: var(--color-dark-green);
}

.block__grid-card--pink {
	background-color: var(--color-pink);
	color: var(--color-dark-green);
}

.block__grid-card--dark-green {
	background-color: var(--color-dark-green);
	color: var(--color-white);
}

.block__grid-card--green {
	background-color: var(--color-green);
	color: var(--color-dark-green);
}

.block__grid-card-icon {
	flex-shrink: 0;
	width: 3.5em;
	height: 3.5em;
	padding: 0.7em;
	border: 2px solid currentColor;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.block__grid-card-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block__grid-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	flex: 1;
}

.block__grid-card-title {
	margin: 0;
	font-size: 2em;
	line-height: 1.2;
	font-weight: 700;
	color: inherit;
}

.block__grid-card-text {
	margin: 0;
	font-size: 1em;
	line-height: 1.5;
	color: inherit;
}

.block__grid-card-cta {
	align-self: flex-start;
	margin-top: auto;
}

.block__grid-card-cta--yellow {
	color: var(--color-dark-green);
}

.block__grid-card-cta--yellow::before {
	background-color: var(--color-yellow);
}

@media (max-width: 992px) {
	.block__grid-cards {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}

	.block__grid-card--1 { grid-column: 1; grid-row: 1; }
	.block__grid-card--2 { grid-column: 2; grid-row: 1; }
	.block__grid-card--3 { grid-column: 1 / span 2; grid-row: 2; }
	.block__grid-card--4 { grid-column: 1 / span 2; grid-row: 3; }
}

@media (max-width: 600px) {
	.block--grid {
		padding: 3em 0;
	}

	.block__grid-title {
		font-size: 2em;
	}

	.block__grid-cards {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.block__grid-card,
	.block__grid-card--1,
	.block__grid-card--2,
	.block__grid-card--3,
	.block__grid-card--4 {
		grid-column: 1;
		grid-row: auto;
		min-height: 0;
		padding: 1.75rem;
	}
}

/* Feature Scroll blok — donkere sectie. Intro + bolletjes-indicator boven
   een horizontaal scrollende kaartenrij. De pinned section vangt verticaal
   scrollen op en vertaalt het naar horizontaal scrollen door de kaarten;
   bij het einde geeft hij de verticale scroll weer vrij. */
.block--feature-scroll {
	background-color: var(--color-dark-green);
	color: var(--color-white);
	padding: 5em 0 0;
	margin: 100px 0;
	overflow: hidden;
}

.block__feature-scroll-intro {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	text-align: left;
	margin: 0 0 3em;
	max-width: 550px;
}

.block__feature-scroll-category {
	display: inline-block;
	width: fit-content;
	margin: 0 0 1em;
	padding: 0.7em 1.6em;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 9999px;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1;
	color: var(--color-white);
	opacity: 0.75;
}

.block__feature-scroll-title {
	margin: 0;
	font-size: 2.75em;
	line-height: 1.2;
	color: var(--color-white);
}

.block__feature-scroll-title strong {
	color: var(--color-green);
	font-weight: inherit;
}

.block__feature-scroll-text {
	margin: 0.75em 0 0;
	font-size: 1.15em;
	line-height: 1.5;
	max-width: 640px;
	color: rgba(255, 255, 255, 0.75);
}

/* Pinned section — bevat de intro, dots en de horizontale track. Pakt
   gewoon de hoogte van de content; tijdens scroll-hijack blijven intro en
   dots zichtbaar boven de horizontaal scrollende kaarten. */
.block__feature-scroll-pin {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	padding: 2rem 0 150px;
}

/* ScrollTrigger genereert een wrapper .pin-spacer rond het gepinde element.
   Een margin-top hierop schuift de hele gepinde block visueel naar beneden. */
.block--feature-scroll .pin-spacer {
	margin-top: 50px;
}

/* Wrapper rond de bolletjes-rij die overflowing bolletjes verbergt — wanneer
   het aantal kaarten te breed is voor het scherm "schuift" de rij intern op
   basis van de actieve dot zonder dat de gebruiker zelf kan scrollen. */
.block__feature-scroll-dots-track {
	width: 100%;
	overflow: hidden;
}

/* Bolletjes-rij — 1 bolletje per kaart, met een doorlopende lijn erachter.
   `width: max-content` zorgt dat het flex-blok exact even breed is als alle
   bolletjes + gaps samen, zodat de absoluut gepositioneerde lijn van eerste
   tot laatste bolletje loopt. Translateert in JS naar links naarmate er
   verder gescrolld wordt. */
.block__feature-scroll-dots {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 4rem;
	width: max-content;
	max-width: none;
	transform: translateX(0);
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

.block__feature-scroll-dots-line {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	height: 1px;
	background-color: rgba(255, 255, 255, 0.2);
	pointer-events: none;
}

.block__feature-scroll-dot {
	position: relative;
	z-index: 1;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background-color: var(--color-dark-green);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.35);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.block__feature-scroll-dot:hover {
	border-color: rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.6);
}

.block__feature-scroll-dot.is-active {
	background-color: var(--color-blue);
	border-color: var(--color-blue);
	color: var(--color-dark-green);
}

.block__feature-scroll-dot-inner {
	width: 55%;
	height: 55%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block__feature-scroll-dot-logo {
	width: 100%;
	height: 100%;
	max-width: none;
	animation: none;
	transform: none;
}

.block__feature-scroll-dot-logo path {
	fill: currentColor;
}

/* Inactieve dots tonen geen logo — alleen het bolletje. */
.block__feature-scroll-dot:not(.is-active) .block__feature-scroll-dot-logo {
	display: none;
}

/* Actieve dot toont het roterende brand-logo (zelfde animatie als de
   site-loader). */
.block__feature-scroll-dot.is-active .block__feature-scroll-dot-logo {
	animation: site-loader-spin 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	transform-origin: center;
}

/* Track — bevat de horizontaal scrollende kaarten. */
.block__feature-scroll-track {
	width: 100%;
	overflow: hidden;
}

.block__feature-scroll-cards {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 1.5rem;
	/* Side-gap links volgt de .wrapper-default. De right-gap wordt door JS
	   meegerekend in de translate-afstand zodat de laatste kaart op het einde
	   visueel dezelfde marge heeft. Op een padding-right of margin-right op een
	   flex container met overflowende items wordt door Chrome/Webkit niet
	   altijd correct in scrollWidth meegeteld — vandaar de JS-route. */
	padding-left: max(5vw, calc((100vw - 1400px) / 2));
	will-change: transform;
}

/* Native scroll fallback: hier respecteert overflow-x: auto wél een margin
   op de laatste flex-child, dus die zetten we hier expliciet. */
.block__feature-scroll-track--fallback .block__feature-scroll-cards > .block__feature-scroll-card:last-child {
	margin-right: max(5vw, calc((100vw - 1400px) / 2));
}

/* Vanaf 2250px niet meer uitlijnen op de wrapper-rand, maar een vaste marge
   links/rechts van 250px (gelijk aan FEATURE_SCROLL_CENTER_EDGE in
   feature-scroll.js, dat de rechtermarge in de scroll-afstand verrekent). */
@media (min-width: 2250px) {
	.block__feature-scroll-cards {
		padding-left: 250px;
	}

	.block__feature-scroll-track--fallback .block__feature-scroll-cards > .block__feature-scroll-card:last-child {
		margin-right: 250px;
	}
}

/* Fallback (geen GSAP/ScrollTrigger): track wordt horizontaal scrollbaar. */
.block__feature-scroll-track--fallback {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.block__feature-scroll-track--fallback .block__feature-scroll-card {
	scroll-snap-align: center;
}

.block__feature-scroll-card {
	flex: 0 0 auto;
	width: 350px;
	background-color: var(--color-white);
	border: none;
	border-radius: 20px;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	color: var(--color-dark-green);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.block__feature-scroll-card.is-active {
	background-color: var(--color-blue);
	color: var(--color-dark-green);
}

.block__feature-scroll-card-title {
	margin: 0;
	font-size: 1.65em;
	line-height: 1.2;
	font-weight: 700;
	color: inherit;
}

.block__feature-scroll-card-text {
	margin: 0;
	font-size: 1em;
	line-height: 1.55;
	color: inherit;
	opacity: 0.75;
}

.block__feature-scroll-card-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.block__feature-scroll-card-item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-size: 0.95em;
	line-height: 1.45;
}

.block__feature-scroll-card-item::before {
	content: "";
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	margin-top: 0.1em;
	background-color: var(--color-dark-green);
	-webkit-mask-image: url("assets/images/list-check.svg");
	mask-image: url("assets/images/list-check.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.block__feature-scroll-card-item-text {
	flex: 1;
	color: inherit;
}

.block__feature-scroll-card-cta {
	align-self: flex-start;
	margin-top: 0.5rem;
	color: var(--color-white);
}

.block__feature-scroll-card-cta::before {
	background-color: var(--color-dark-green);
	border: none;
}

@media (max-width: 1250px) {
	.block__feature-scroll-dots {
		gap: 3rem;
	}
}

@media (max-width: 992px) {
	.block__feature-scroll-dots {
		gap: 2rem;
	}
}

@media (max-width: 768px) {
	.block--feature-scroll {
		padding: 3em 0 0;
		margin: 25px 0;
	}

	.block__feature-scroll-title {
		font-size: 2em;
	}

	.block__feature-scroll-text {
		font-size: 1em;
	}

	.block__feature-scroll-pin {
		height: auto;
		min-height: 0;
		padding-bottom: 3em;
		gap: 2.5rem;
	}

	.block__feature-scroll-intro {
		margin-bottom: 0;
	}

	/* Dots-track breekt op mobiel uit de wrapper-default zodat hij over de
	   volledige viewport-breedte loopt; symmetrische padding van 5vw houdt
	   zowel het eerste als het laatste bolletje uitgelijnd met de overige
	   wrapper-content. */
	.block__feature-scroll-dots-track {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 0 5vw;
		box-sizing: border-box;
	}

	.block__feature-scroll-card {
		padding: 2rem;
		width: 55vw;
	}
}

@media (max-width: 450px) {
	.block__feature-scroll-card {
		width: 85vw;
	}
}

/* Features (alt) blok — categorie-pill (optioneel), titel, tekst en een
   2-knops switcher tussen 2 lijsten. Rechts (1/3) een optionele afbeelding;
   zonder afbeelding spant de lijst over de volledige breedte. */
.block--features-alt {
	padding: 80px 0;
	background-color: var(--color-white);
	color: var(--color-dark-green);
}

.block__features-alt-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0 auto 5em;
	max-width: 720px;
}

.block__features-alt-category {
	display: inline-block;
	margin: 0 0 1em;
	padding: 0.7em 1.6em;
	border: 1px solid var(--color-dark-green);
	border-radius: 9999px;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1;
	color: var(--color-dark-green);
	opacity: 0.65;
}

.block__features-alt-title {
	margin: 0;
	font-size: 2.5em;
	line-height: 1.2;
	color: var(--color-dark-green);
}

.block__features-alt-title strong {
	color: var(--color-green);
	font-weight: inherit;
}

.block__features-alt-text {
	margin: 0.75em 0 0;
	font-size: 1.25em;
	line-height: 1.5;
	color: var(--color-dark-green);
}

.block__features-alt-switcher {
	position: relative;
	display: inline-grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	margin-top: 3em;
	padding: 0;
	background-color: var(--color-white);
	border: 1px solid rgba(15, 23, 13, 0.15);
	border-radius: 9999px;
	overflow: hidden;
}

.block__features-alt-switcher-option {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 130px;
	padding: 0.85em 2em;
	border: none;
	border-radius: 9999px;
	background: transparent;
	color: var(--color-dark-green);
	opacity: 0.45;
	font-family: inherit;
	font-size: 1em;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: color 0.3s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.block__features-alt-switcher-option.is-active {
	color: var(--color-white);
	opacity: 1;
}

.block__features-alt-switcher-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background-color: var(--color-green);
	border-radius: 9999px;
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
	z-index: 0;
}

.block__features-alt-switcher[data-active-option="2"] .block__features-alt-switcher-thumb {
	transform: translateX(100%);
}

.block__features-alt-columns {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2em;
	align-items: stretch;
}

.block__features-alt-columns--no-image {
	grid-template-columns: 1fr;
}

.block__features-alt-lists {
	min-width: 0;
}

.block__features-alt-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.block--features-alt[data-active-option="1"] .block__features-alt-list--option-2,
.block--features-alt[data-active-option="2"] .block__features-alt-list--option-1 {
	display: none;
}

.block__features-alt-item {
	display: flex;
	align-items: center;
	gap: 2rem;
	background-color: var(--color-dark-green);
	color: var(--color-white);
	border-radius: 16px;
	padding: 1.25rem 1.5rem;
}

.block__features-alt-icon {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block__features-alt-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block__features-alt-item-text {
	margin: 0;
	line-height: 1.5;
	font-weight: 600;
}

.block__features-alt-media {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	border-radius: 16px;
	overflow: hidden;
	background-color: #000;
}

.block__features-alt-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.block--features-alt {
		padding: 3em 0;
	}

	.block__features-alt-title {
		font-size: 2em;
	}

	.block__features-alt-text {
		font-size: 1.1em;
	}

	.block__features-alt-columns,
	.block__features-alt-columns--no-image {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* USP's blok — 3 koloms gecentreerde items met een horizontale lijn op de
   helft van de icoonhoogte. De icoontjes hebben een cirkelvormige border
   van 2px en een witte achtergrond, zodat ze de lijn visueel "doorbreken"
   in het midden van elke kolom. */
.block--usps {
	padding: 5em 0;
	color: var(--color-dark-green);
}

.block__usps-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}

.block__usps-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
	position: relative;
}

/* Twee verbindings-lijntjes: één tussen item 1 en 2 (::after op item 1)
   en één tussen item 2 en 3 (::after op item 2). Loopt op icoon-middenhoogte
   van de rechterkant van dit icoon naar de linkerkant van het volgende icoon. */
.block__usps-item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 2.25rem; /* helft van de icoon-hoogte (4.5rem) */
	left: calc(50% + 5.25rem);
	width: calc(100% - 8rem);
	height: 1px;
	background-color: var(--color-dark-green);
}

.block__usps-icon {
	width: 4.5rem;
	height: 4.5rem;
	padding: 1rem;
	border: 3px solid var(--color-dark-green);
	border-radius: 50%;
	background-color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.block__usps-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block__usps-title {
	margin: 0.5em 0 0;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}

.block__usps-text {
	margin: 0;
	font-size: 1.25em;
	line-height: 1.5;
	max-width: 330px;
	color: inherit;
	opacity: 0.65;
}

@media (max-width: 992px) {
	.block__usps-icon {
		width: 4em;
		height: 4em;
	}

	.block__usps-title {
		font-size: 1.35em;
	}
}

@media (max-width: 768px) {
	.block--usps {
		padding: 3em 0 4em;
	}

	.block__usps-grid {
		grid-template-columns: 1fr;
		gap: 3.5rem;
	}

	/* Op mobiel vallen de verbindings-lijntjes weg — items staan onder elkaar. */
	.block__usps-item:not(:last-child)::after {
		display: none;
	}
}

@media (max-width: 450px) {
	.block__usps-text {
		font-size: 1em;
	}

	.block__usps-item {
		gap: 1rem;
	}
}

/* ============================================================
   Rich Content — Beeldmerk (lijn animatie)
   Drie kaarten met animerende verbindingslijnen (ballen). Het blok is op een
   vaste ontwerpbreedte gebouwd en wordt door brand-line.js proportioneel
   geschaald naar de wrapperbreedte (zie .block--rich-content__brand-line-inner).
   Alle stijlen zijn onder de blok-root gescoped zodat de generieke klassenamen
   (kaart/pill/divider) niets buiten dit blok raken.
   ============================================================ */
.block--rich-content__brand-line {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 1.5em 0;
	-webkit-user-select: none;
	user-select: none;
}
.block--rich-content__brand-line-inner {
	display: flex;
	align-items: center;
	gap: 0;
	width: 720px; /* ontwerpbreedte; JS schaalt dit naar de container */
	transform-origin: top left;
	will-change: transform;
}

.block--rich-content__brand-line .pb-bl-card {
	flex: 1;
	min-width: 0;
	background: #e8eaed;
	border-radius: 20px;
	padding: 24px 20px 20px;
}
.block--rich-content__brand-line .pb-bl-card-title {
	font-size: 16px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 25px 0 20px;
	line-height: 1.2;
}
.block--rich-content__brand-line .pb-bl-pill {
	display: block;
	border-radius: 24px;
	padding: 10px 0;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 8px;
}
.block--rich-content__brand-line .pb-bl-pill-blue { background: #5b9bd5; }
.block--rich-content__brand-line .pb-bl-pill-dark { background: #1a1a1a; }
.block--rich-content__brand-line .pb-bl-pill-yellow { background: #f5b731; color: #1a1a1a; }
.block--rich-content__brand-line .pb-bl-pill-inline { flex: 1; margin: 0; padding: 8px 0; }

.block--rich-content__brand-line .pb-bl-divider {
	border-top: 1.5px solid #b0b3ba;
	margin: 14px 0 10px;
}
.block--rich-content__brand-line .pb-bl-status-label {
	font-size: 13px;
	font-weight: 700;
	color: #1a1a1a;
}
.block--rich-content__brand-line .pb-bl-status-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 13px;
	color: #1a1a1a;
}
.block--rich-content__brand-line .pb-bl-fact-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 7px;
}
.block--rich-content__brand-line .pb-bl-check-icon {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}
.block--rich-content__brand-line .pb-bl-check-green { background: #4caf6e; color: #fff; }
.block--rich-content__brand-line .pb-bl-check-yellow { background: #f5b731; color: #1a1a1a; }

.block--rich-content__brand-line .pb-bl-logo-row {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 14px;
}
.block--rich-content__brand-line .pb-bl-exact-logo {
	font-size: 13px;
	font-weight: 700;
	color: #d0021b;
	letter-spacing: -0.5px;
}
.block--rich-content__brand-line .pb-bl-exact-logo span {
	display: block;
	font-size: 9px;
	font-weight: 400;
	color: #d0021b;
	text-align: right;
}
.block--rich-content__brand-line .pb-bl-arrow-icon {
	font-size: 16px;
	color: #1a1a1a;
}
.block--rich-content__brand-line .pb-bl-icon-top {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}
.block--rich-content__brand-line .pb-bl-rocket-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2.5px solid #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	background: transparent;
}
.block--rich-content__brand-line .pb-bl-google-dots {
	display: flex;
	gap: 3px;
}
.block--rich-content__brand-line .pb-bl-dot-g {
	width: 13px;
	height: 13px;
	border-radius: 3px;
}

.block--rich-content__brand-line .pb-bl-connector {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 0 8px;
	flex-shrink: 0;
	width: 72px;
}
.block--rich-content__brand-line .pb-bl-track {
	position: relative;
	width: 72px;
	height: 22px;
	overflow: visible;
}