/* ==========================================================================
   GreenHygiene — stijl van de custom Bricks-elementen
   ========================================================================== */

.gh-section--compact {
	padding-block: clamp(3.2rem, 3.5vw, 5.6rem);
}

.gh-section--none {
	padding-block: 0;
}

.gh-actions--center {
	justify-content: center;
}

/* --------------------------------------------------------------- Hero --- */

/* De hero is een afgeronde kaart in de pagina, niet rand-tot-rand. */
/* Hero over de volle breedte: de achtergrond loopt van rand tot rand,
   de tekst blijft binnen de container uitgelijnd met de rest van de pagina. */
.gh-hero {
	position: relative;
	overflow: hidden;
	padding-block: 0;
	background: var(--gh-forest);
}

.gh-hero > .gh-container {
	position: relative;
	z-index: 1;
	padding-block: clamp(3.2rem, 5vw, 7.2rem);
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

/* Achtergrondfoto vult de herokaart; de sluier houdt de tekst leesbaar. */
.gh-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

.gh-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
}

.gh-hero__bg--strong::after {
	background: linear-gradient(100deg, rgba(5, 46, 38, 0.95) 0%, rgba(9, 68, 56, 0.82) 42%, rgba(9, 68, 56, 0.3) 100%);
}

.gh-hero__bg--medium::after {
	background: linear-gradient(100deg, rgba(5, 46, 38, 0.88) 0%, rgba(9, 68, 56, 0.6) 45%, rgba(9, 68, 56, 0.12) 100%);
}

.gh-hero__bg--light::after {
	background: linear-gradient(100deg, rgba(5, 46, 38, 0.78) 0%, rgba(9, 68, 56, 0.4) 50%, rgba(9, 68, 56, 0.02) 100%);
}

/* Inhoud boven de foto. */
.gh-hero > .gh-container > *:not(.gh-hero__bg) {
	position: relative;
	z-index: 1;
}

/* De achtergrondkleur hoort bij de sectie, niet bij de container: anders zou hij
   over de foto heen liggen en die onzichtbaar maken. */
.gh-hero.gh-bg--gradient {
	background: radial-gradient(120% 130% at 15% 0%, var(--gh-forest-light) 0%, var(--gh-forest) 45%, var(--gh-forest-dark) 100%);
}

.gh-hero.gh-bg--cream {
	background: var(--gh-cream);
}

.gh-hero.gh-bg--mint {
	background: var(--gh-mint-soft);
}

.gh-hero.gh-bg--white {
	background: var(--gh-white);
}

.gh-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(3.2rem, 5vw, 7.2rem);
	align-items: center;
}

.gh-hero__grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 83.2rem;
}

.gh-hero .gh-header {
	margin-bottom: var(--gh-space-4);
}

.gh-hero__subtitle {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-xl);
	font-weight: 600;
	color: var(--gh-white);
	margin-bottom: var(--gh-space-4);
}

.gh-bg--white .gh-hero__subtitle,
.gh-bg--cream .gh-hero__subtitle,
.gh-bg--mint .gh-hero__subtitle {
	color: var(--gh-text-strong);
}

.gh-hero__closing {
	font-weight: 600;
	color: var(--gh-white);
}

.gh-bg--white .gh-hero__closing,
.gh-bg--cream .gh-hero__closing,
.gh-bg--mint .gh-hero__closing {
	color: var(--gh-text-strong);
}

.gh-hero__usps {
	margin-top: var(--gh-space-5);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--gh-space-3) var(--gh-space-5);
}

.gh-hero__note {
	margin-top: var(--gh-space-4);
	font-size: var(--gh-text-sm);
	color: var(--gh-on-dark-muted);
}

.gh-bg--white .gh-hero__note,
.gh-bg--cream .gh-hero__note,
.gh-bg--mint .gh-hero__note {
	color: var(--gh-text-muted);
}

.gh-hero__media {
	position: relative;
}

.gh-hero__figure {
	margin: 0;
	border-radius: var(--gh-radius-xl);
	overflow: hidden;
	box-shadow: var(--gh-shadow-lg);
	background: var(--gh-mint-soft);
	aspect-ratio: 4 / 3;
}

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

.gh-hero__badge {
	position: absolute;
	left: -1.6rem;
	bottom: -2rem;
	background: var(--gh-white);
	color: var(--gh-text-strong);
	border-radius: var(--gh-radius-lg);
	padding: var(--gh-space-4) var(--gh-space-5);
	box-shadow: var(--gh-shadow-lg);
	display: grid;
	gap: 0.24rem;
	max-width: 24rem;
}

.gh-hero__badge-value {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-2xl);
	font-weight: 800;
	line-height: 1;
}

.gh-hero__badge-label {
	font-size: var(--gh-text-xs);
	color: var(--gh-text-muted);
	line-height: 1.35;
}

@media (max-width: 900px) {
	.gh-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.gh-hero__media {
		order: -1;
	}

	.gh-hero__badge {
		left: auto;
		right: 1.6rem;
		bottom: -1.6rem;
	}
}

/* ---------------------------------------------------------- Voordelen --- */

.gh-usp-grid__items {
	display: grid;
	gap: var(--gh-space-5);
}

/* Het gekozen aantal kolommen is leidend; auto-fit koos anders zelf een aantal
   dat bij een brede container niet klopte met de instelling. */
.gh-usp-grid__items--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gh-usp-grid__items--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gh-usp-grid__items--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.gh-usp-grid__items--3,
	.gh-usp-grid__items--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.gh-usp-grid__items--2,
	.gh-usp-grid__items--3,
	.gh-usp-grid__items--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Doorlopende band: de rij staat er twee keer in en schuift precies één reeks
   op, waarna de animatie onzichtbaar terugspringt. */
.gh-marquee {
	--gh-marquee-gap: var(--gh-space-5);
	--gh-marquee-duur: 30s;

	overflow: hidden;

	/* De kaarten vervagen aan beide randen, zodat ze niet hard afgekapt lijken. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.gh-marquee__track {
	display: flex;
	width: max-content;
	gap: var(--gh-marquee-gap);
	animation: gh-marquee var(--gh-marquee-duur) linear infinite;
	will-change: transform;
}

.gh-marquee--right .gh-marquee__track {
	animation-direction: reverse;
}

.gh-marquee__group {
	display: flex;
	gap: var(--gh-marquee-gap);
}

.gh-marquee .gh-usp {
	/* Een vaste breedte houdt beide reeksen even lang; anders loopt de sprong
	   aan het eind van de animatie niet gelijk. */
	flex: 0 0 clamp(26rem, 26vw, 34rem);
}

/* Even stilzetten zodat je rustig kunt lezen. */
.gh-marquee:hover .gh-marquee__track,
.gh-marquee:focus-within .gh-marquee__track {
	animation-play-state: paused;
}

@keyframes gh-marquee {
	to {
		transform: translateX(calc(-50% - (var(--gh-marquee-gap) / 2)));
	}
}

/* Op een smal scherm zou een brede vervaging bijna de halve kaart opslokken. */
@media (max-width: 640px) {
	.gh-marquee {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 2.4rem, #000 calc(100% - 2.4rem), transparent);
		mask-image: linear-gradient(to right, transparent, #000 2.4rem, #000 calc(100% - 2.4rem), transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gh-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.gh-marquee__track {
		animation: none;
	}

	/* Zonder beweging heeft de tweede reeks geen functie meer. */
	.gh-marquee__group[aria-hidden="true"] {
		display: none;
	}
}

.gh-usp {
	display: grid;
	gap: var(--gh-space-2);
	align-content: start;
}

/* Pictogram en titel naast elkaar. Het pictogram houdt zijn maat, zodat titels
   van verschillende lengte op dezelfde lijn beginnen. */
.gh-usp__head {
	display: flex;
	align-items: center;
	gap: var(--gh-space-3);
}

/* Geen hovertoestand: op een voordeelkaart valt niets te klikken, dus een
   kleurende rand of een liftje wekt de indruk van iets dat er niet is. */
.gh-usp-grid__items--card .gh-usp {
	background: var(--gh-surface);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-lg);
	padding: var(--gh-space-5);
	box-shadow: var(--gh-shadow-sm);
}

.gh-bg--forest .gh-usp-grid__items--card .gh-usp,
.gh-bg--gradient .gh-usp-grid__items--card .gh-usp {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--gh-line-dark);
	box-shadow: none;
}

.gh-usp__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	border-radius: var(--gh-radius);
	background: var(--gh-mint);
	color: var(--gh-text-strong);
}

.gh-usp__icon .gh-icon {
	width: 2.24rem;
	height: 2.24rem;
}

.gh-usp__title {
	font-size: var(--gh-text-xl);
	margin: 0;
}

.gh-usp__text {
	color: var(--gh-text-muted);
	margin: 0;
}

.gh-bg--forest .gh-usp__text,
.gh-bg--gradient .gh-usp__text {
	color: var(--gh-on-dark-muted);
}

/* -------------------------------------------------------- Inbegrepen --- */

.gh-include__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(3.2rem, 5vw, 6.4rem);
	align-items: start;
}

.gh-include__intro .gh-header {
	margin-bottom: var(--gh-space-4);
}

.gh-include__highlight {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-lg);
	font-weight: 700;
	color: var(--gh-text-strong);
	margin-bottom: var(--gh-space-3);
}

.gh-include__statements {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gh-space-1);
	color: var(--gh-text-muted);
	font-weight: 500;
}

.gh-include__list {
	background: var(--gh-surface);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-lg);
	padding: var(--gh-space-6);
	box-shadow: var(--gh-shadow-sm);
}

.gh-include__list--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.gh-include__list--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

@media (max-width: 860px) {
	.gh-include__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------ Stappen --- */

.gh-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gh-space-5);
	counter-reset: gh-step;
}

@media (max-width: 900px) {
	.gh-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.gh-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gh-step {
	position: relative;
	display: grid;
	gap: var(--gh-space-2);
	align-content: start;
	padding: var(--gh-space-5);
	background: var(--gh-surface);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-lg);
}

/* Nummer en titel naast elkaar. Het cijfer blijft even breed, zodat titels van
   verschillende lengte netjes op dezelfde lijn beginnen. */
.gh-step__head {
	display: flex;
	align-items: center;
	gap: var(--gh-space-3);
}

.gh-bg--cream .gh-step {
	background: var(--gh-white);
}

.gh-step__number {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-forest);
	color: var(--gh-white);
	font-family: var(--gh-font-heading);
	font-weight: 800;
	font-size: var(--gh-text-lg);
}

.gh-step__title {
	font-size: var(--gh-text-xl);
	margin: 0;
}

.gh-step__text {
	color: var(--gh-text-muted);
	margin: 0;
}

/* --------------------------------------------------------- Prijskaart --- */

.gh-price__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2.4rem, 4vw, 4.8rem);
	align-items: start;
}

.gh-price__layout--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 64rem;
	margin-inline: auto;
}

.gh-price__card {
	background: var(--gh-white);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-xl);
	padding: clamp(2.8rem, 3vw, 4.4rem);
	box-shadow: var(--gh-shadow);
}

.gh-price__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.8rem;
	padding-bottom: var(--gh-space-4);
	border-bottom: 1px solid var(--gh-line);
	margin-bottom: var(--gh-space-4);
}

.gh-price__prefix {
	font-size: var(--gh-text-lg);
	color: var(--gh-text-muted);
}

.gh-price__value {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-4xl);
	font-weight: 800;
	line-height: 1;
	color: var(--gh-text-strong);
	letter-spacing: -0.03em;
}

.gh-price__suffix {
	font-size: var(--gh-text-base);
	color: var(--gh-text-muted);
	flex-basis: 100%;
}

.gh-price__intro {
	font-weight: 600;
	color: var(--gh-text-strong);
	margin-bottom: var(--gh-space-3);
}

.gh-price__list {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.gh-price__footnote {
	margin-top: var(--gh-space-4);
	font-size: var(--gh-text-sm);
	color: var(--gh-text-muted);
}

.gh-price__side {
	background: var(--gh-forest);
	color: var(--gh-on-dark);
	border-radius: var(--gh-radius-xl);
	padding: clamp(2.8rem, 3vw, 4rem);
}

.gh-price__side h3 {
	color: var(--gh-white);
	margin-top: 0;
	margin-bottom: var(--gh-space-3);
}

.gh-price__side-text {
	color: var(--gh-on-dark-muted);
}

.gh-price__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gh-space-2);
	margin-top: var(--gh-space-5);
}

.gh-price__tags .gh-badge {
	background: rgba(255, 255, 255, 0.1);
	color: var(--gh-white);
}

.gh-price__tags .gh-icon {
	width: 1.6rem;
	height: 1.6rem;
	color: var(--gh-mint);
}

@media (max-width: 860px) {
	.gh-price__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------- Calculator --- */

.gh-calc {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(1.6rem, 2.5vw, 3.2rem);
	align-items: start;
}

/* De linkerkolom: invoer en offerteformulier wisselen elkaar af. */
.gh-calc__col {
	display: grid;
	gap: var(--gh-space-4);
	align-content: start;
}

.gh-calc__panel {
	background: var(--gh-white);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-xl);
	padding: clamp(2.4rem, 2.6vw, 3.6rem);
	box-shadow: var(--gh-shadow-sm);
}

.gh-calc__result {
	position: sticky;
	top: 2.4rem;
	color: var(--gh-on-dark);
	border: 0;
	background: radial-gradient(120% 120% at 100% 0%, var(--gh-forest-light) 0%, var(--gh-forest) 42%, var(--gh-forest-dark) 100%);
	box-shadow: var(--gh-shadow-lg);
}

.gh-calc__panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gh-space-3);
	margin-bottom: var(--gh-space-5);
}

.gh-calc__panel-title {
	margin: 0;
	font-size: var(--gh-text-xl);
	color: var(--gh-text-strong);
}

/* Stap-label (let op: .gh-step is al in gebruik door het stappenplan) */
.gh-calc__step {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1.2rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-mint);
	color: var(--gh-text-strong);
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gh-calc__step--light {
	background: rgba(255, 255, 255, 0.14);
	color: var(--gh-mint);
}

/* --- Invoergroepen ------------------------------------------------------- */

.gh-fieldset {
	display: grid;
	gap: var(--gh-space-4);
	padding-top: var(--gh-space-5);
	margin-top: var(--gh-space-5);
	border-top: 1px solid var(--gh-line);
}

.gh-fieldset:first-of-type {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.gh-fieldset__title {
	margin: 0;
	font-size: var(--gh-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gh-text-muted);
}

.gh-field--number {
	display: grid;
	gap: var(--gh-space-2);
}

.gh-field__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gh-space-4);
}

.gh-field__text {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

.gh-field__label {
	font-size: var(--gh-text-base);
	font-weight: 600;
	color: var(--gh-text-strong);
	line-height: 1.25;
}

.gh-field__hint {
	font-size: var(--gh-text-xs);
	color: var(--gh-text-muted);
	line-height: 1.35;
}

/* --- Stepper ------------------------------------------------------------- */

.gh-stepper {
	display: inline-flex;
	align-items: center;
	flex: none;
	background: var(--gh-cream);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-pill);
	/* Ruimer dan het lijkt: de knoppen zijn rond en de pil ook, dus bij een
	   kleine padding raken ze de rand aan de zijkanten bijna. */
	--gh-stepper-btn: 3.2rem;

	padding: 0.6rem;
	gap: 0.4rem;
}

.gh-stepper__btn {
	flex: none;
	width: var(--gh-stepper-btn);
	height: var(--gh-stepper-btn);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--gh-white);
	color: var(--gh-text-strong);
	font-size: var(--gh-text-lg);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--gh-shadow-sm);
	transition: background-color var(--gh-transition), color var(--gh-transition), transform var(--gh-transition);
}

.gh-stepper__btn:hover {
	background: var(--gh-hover);
	color: var(--gh-hover-ink);
}

.gh-stepper__btn:active {
	transform: scale(0.94);
}

.gh-stepper__input {
	width: 5.6rem;
	padding: 0;
	/* Even hoog als de knoppen, anders rekt de regelhoogte de pil op. */
	height: var(--gh-stepper-btn);
	line-height: var(--gh-stepper-btn);
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-lg);
	font-weight: 800;
	color: var(--gh-text-strong);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

.gh-stepper__input:focus {
	outline: none;
}

.gh-stepper:focus-within {
	border-color: var(--gh-leaf);
	box-shadow: 0 0 0 3px rgba(47, 163, 107, 0.18);
}

.gh-stepper__input::-webkit-outer-spin-button,
.gh-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- Schuifregelaar ------------------------------------------------------ */

.gh-range {
	/* Baan- en knophoogte staan hier zodat de centrering meerekent. */
	--gh-range-track: 0.6rem;
	--gh-range-thumb: 2.2rem;

	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: var(--gh-range-track);
	border-radius: var(--gh-radius-pill);
	/* De gevulde balk loopt mee met de waarde (--gh-range-fill zet de JS). */
	background: linear-gradient(
		to right,
		var(--gh-leaf) 0,
		var(--gh-leaf) var(--gh-range-fill, 10%),
		var(--gh-sand) var(--gh-range-fill, 10%),
		var(--gh-sand) 100%
	);
	cursor: pointer;
}

/* De browser tekent zijn eigen track over het verloop heen; die zetten we uit
   zodat de achtergrond van het element zelf de balk vormt. */
.gh-range::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	height: 100%;
	background: transparent;
	border: 0;
	border-radius: var(--gh-radius-pill);
}

.gh-range::-moz-range-track {
	height: 100%;
	background: transparent;
	border: 0;
	border-radius: var(--gh-radius-pill);
}

/* Firefox kan het gevulde deel zelf tekenen. */
.gh-range::-moz-range-progress {
	height: 100%;
	background: var(--gh-leaf);
	border-radius: var(--gh-radius-pill);
}

.gh-range:focus-visible {
	outline: 3px solid var(--gh-leaf);
	outline-offset: 3px;
}

.gh-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	box-sizing: border-box;
	width: var(--gh-range-thumb);
	height: var(--gh-range-thumb);
	border-radius: 50%;
	background: var(--gh-leaf);
	border: 3px solid var(--gh-white);
	box-shadow: var(--gh-shadow-sm);
	cursor: grab;
	/* Zonder deze correctie hangt de knop onder de baan: WebKit centreert
	   niet meer zodra de baan op appearance: none staat. */
	margin-top: calc( ( var(--gh-range-track) - var(--gh-range-thumb) ) / 2 );
}

.gh-range::-moz-range-thumb {
	box-sizing: border-box;
	width: var(--gh-range-thumb);
	height: var(--gh-range-thumb);
	border-radius: 50%;
	background: var(--gh-leaf);
	border: 3px solid var(--gh-white);
	box-shadow: var(--gh-shadow-sm);
	cursor: grab;
}

.gh-range__scale {
	display: flex;
	justify-content: space-between;
	font-size: var(--gh-text-xs);
	color: var(--gh-text-muted);
}

/* --- Ja/nee-opties ------------------------------------------------------- */

.gh-option {
	display: flex;
	align-items: flex-start;
	gap: var(--gh-space-3);
	padding: var(--gh-space-3) var(--gh-space-4);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius);
	cursor: pointer;
	transition: border-color var(--gh-transition), background-color var(--gh-transition);
}

.gh-option:hover {
	border-color: var(--gh-hover);
}

.gh-option:has(.gh-toggle:checked) {
	background: var(--gh-mint-soft);
	border-color: var(--gh-mint);
}

.gh-option:focus-within {
	border-color: var(--gh-leaf);
	box-shadow: 0 0 0 3px rgba(47, 163, 107, 0.18);
}

.gh-option__text {
	display: grid;
	gap: 0.2rem;
}

.gh-option__label {
	font-size: var(--gh-text-base);
	font-weight: 600;
	color: var(--gh-text-strong);
	line-height: 1.25;
}

.gh-option__hint {
	font-size: var(--gh-text-xs);
	color: var(--gh-text-muted);
	line-height: 1.35;
}

.gh-toggle {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	/* Track (24px) gelijk laten vallen met de labelregel (~22px hoog). */
	margin-top: -0.1rem;
	width: 4.4rem;
	height: 2.4rem;
	border-radius: var(--gh-radius-pill);
	background: #cfd8d4;
	position: relative;
	cursor: pointer;
	transition: background-color var(--gh-transition);
}

.gh-toggle::after {
	content: '';
	position: absolute;
	top: 0.2rem;
	left: 0.3rem;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--gh-white);
	box-shadow: var(--gh-shadow-sm);
	transition: transform var(--gh-transition);
}

.gh-toggle:checked {
	background: var(--gh-leaf);
}

.gh-toggle:checked::after {
	transform: translateX(2rem);
}

/* --- Resultaat ----------------------------------------------------------- */

.gh-calc__headline {
	display: grid;
	gap: 0.3rem;
	padding-bottom: var(--gh-space-5);
	margin-bottom: var(--gh-space-5);
	border-bottom: 1px solid var(--gh-line-dark);
}

.gh-calc__amount {
	font-family: var(--gh-font-heading);
	font-size: clamp(3.6rem, 3.2vw, 4.8rem);
	font-weight: 800;
	line-height: 1;
	color: var(--gh-white);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.gh-calc__period {
	color: var(--gh-mint);
	font-weight: 600;
}

.gh-calc__per-employee {
	font-size: var(--gh-text-sm);
	color: var(--gh-on-dark-muted);
	margin: 0;
}

.gh-calc__lines {
	margin: 0 0 var(--gh-space-5);
	display: grid;
	gap: 0.6rem;
	font-size: var(--gh-text-sm);
}

.gh-calc__line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--gh-space-4);
}

.gh-calc__line dt {
	color: var(--gh-on-dark);
}

.gh-calc__line dd {
	margin: 0;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.gh-calc__qty {
	display: block;
	color: var(--gh-on-dark-muted);
	font-size: var(--gh-text-xs);
}

.gh-calc__line--free dd {
	color: var(--gh-mint);
	font-weight: 700;
}

.gh-calc__line--total {
	border-top: 1px solid var(--gh-line-dark);
	margin-top: 0.4rem;
	padding-top: 0.8rem;
	font-weight: 700;
}

.gh-calc__line--total dt {
	font-weight: 700;
	color: var(--gh-white);
}

/* Inklapbare specificatie van de eenmalige kosten */
.gh-calc__details {
	border: 1px solid var(--gh-line-dark);
	border-radius: var(--gh-radius);
	margin-bottom: var(--gh-space-4);
}

.gh-calc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gh-space-4);
	padding: var(--gh-space-3) var(--gh-space-4);
	cursor: pointer;
	list-style: none;
	border-radius: var(--gh-radius);
}

.gh-calc__summary::-webkit-details-marker {
	display: none;
}

.gh-calc__summary:hover {
	background: rgba(255, 255, 255, 0.05);
}

.gh-calc__summary-text {
	display: grid;
	gap: 0.1rem;
}

.gh-calc__summary-label {
	font-size: var(--gh-text-sm);
	font-weight: 600;
	color: var(--gh-white);
}

.gh-calc__summary-hint {
	font-size: var(--gh-text-xs);
	color: var(--gh-mint);
}

.gh-calc__summary-hint::after {
	content: ' ▾';
}

.gh-calc__details[open] .gh-calc__summary-hint::after {
	content: ' ▴';
}

.gh-calc__summary-value {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-lg);
	font-weight: 800;
	color: var(--gh-white);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.gh-calc__lines--oneoff {
	margin: 0;
	padding: 0 var(--gh-space-4) var(--gh-space-4);
}

/* Wat je er gratis bij krijgt */
.gh-perks {
	list-style: none;
	margin: 0 0 var(--gh-space-5);
	padding: 0;
	display: grid;
	gap: var(--gh-space-2);
}

.gh-perk {
	display: flex;
	align-items: flex-start;
	gap: var(--gh-space-3);
	padding: var(--gh-space-3) var(--gh-space-4);
	border-radius: var(--gh-radius);
	background: rgba(255, 255, 255, 0.08);
	font-size: var(--gh-text-sm);
	color: var(--gh-on-dark-muted);
	line-height: 1.4;
}

.gh-perk .gh-icon {
	color: var(--gh-mint);
	width: 2rem;
	height: 2rem;
	margin-top: 0.1rem;
}

.gh-perk strong {
	color: var(--gh-white);
}

.gh-calc__cta {
	margin-top: var(--gh-space-2);
}

.gh-calc__disclaimer {
	margin-top: var(--gh-space-4);
	margin-bottom: 0;
	font-size: var(--gh-text-xs);
	color: var(--gh-on-dark-muted);
	line-height: 1.5;
	max-width: none;
}

/* Staat het formulier open, dan is de knop in het resultaatpaneel overbodig. */
.gh-calc--form-open .gh-calc__cta {
	display: none;
}

@media (max-width: 900px) {
	.gh-calc {
		grid-template-columns: minmax(0, 1fr);
	}

	.gh-calc__result {
		position: static;
	}
}

/* Op smalle schermen krijgt het label de volle breedte en staat de stepper eronder. */
@media (max-width: 520px) {
	.gh-field__head {
		flex-direction: column;
		align-items: stretch;
		gap: var(--gh-space-3);
	}

	.gh-stepper {
		justify-content: space-between;
	}

	.gh-stepper__input {
		flex: 1;
	}

	.gh-field__hint {
		max-width: 40ch;
	}
}

/* --- Offerteformulier ---------------------------------------------------- */

.gh-form__intro h3 {
	margin-top: 0;
	margin-bottom: var(--gh-space-2);
}

.gh-form__intro p {
	color: var(--gh-text-muted);
	margin-bottom: var(--gh-space-5);
	font-size: var(--gh-text-sm);
}

.gh-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gh-space-4);
	margin-bottom: var(--gh-space-4);
}

@media (max-width: 620px) {
	.gh-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gh-form .gh-field__input {
	width: 100%;
	padding: 1.2rem 1.6rem;
	font-family: inherit;
	font-size: var(--gh-text-base);
	color: var(--gh-text);
	background: var(--gh-white);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius);
	transition: border-color var(--gh-transition), box-shadow var(--gh-transition);
}

.gh-form .gh-field {
	display: grid;
	gap: var(--gh-space-2);
}

.gh-form .gh-field__input:focus {
	outline: none;
	border-color: var(--gh-leaf);
	box-shadow: 0 0 0 3px rgba(47, 163, 107, 0.18);
}

.gh-form textarea.gh-field__input {
	resize: vertical;
}

/* Ook binnen .gh-form winnen van de grid-regel op .gh-field. */
.gh-field--consent,
.gh-form .gh-field--consent {
	display: flex;
	align-items: flex-start;
	gap: var(--gh-space-3);
	margin-top: var(--gh-space-4);
	font-size: var(--gh-text-sm);
	color: var(--gh-text-muted);
}

.gh-field--consent input {
	margin-top: 0.25rem;
	width: 1.84rem;
	height: 1.84rem;
	accent-color: var(--gh-leaf);
	flex: none;
}

.gh-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gh-space-4);
	margin-top: var(--gh-space-5);
}

.gh-form__status {
	font-size: var(--gh-text-sm);
	color: var(--gh-text-muted);
}

.gh-form__status--error {
	color: var(--gh-error);
	font-weight: 600;
}

.gh-form__success {
	display: flex;
	align-items: flex-start;
	gap: var(--gh-space-3);
	background: var(--gh-success-bg);
	border-radius: var(--gh-radius);
	padding: var(--gh-space-5);
	color: var(--gh-text-strong);
	font-weight: 500;
}

.gh-form__success .gh-icon {
	color: var(--gh-success);
	width: 2.4rem;
	height: 2.4rem;
}

.gh-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------- Bomen ---- */

.gh-trees {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2.4rem, 4vw, 4rem);
	align-items: start;
}

.gh-trees__calc {
	background: var(--gh-white);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-xl);
	padding: clamp(2.4rem, 3vw, 3.6rem);
	box-shadow: var(--gh-shadow);
}

/* --- Jouw staffel: de kern van het antwoord --- */

.gh-trees__band {
	display: grid;
	gap: 0.4rem;
	margin-top: var(--gh-space-5);
	padding: var(--gh-space-4) var(--gh-space-5);
	background: var(--gh-forest);
	border-radius: var(--gh-radius-lg);
	color: var(--gh-white);
}

.gh-trees__band-chip {
	justify-self: start;
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gh-mint);
}

.gh-trees__band-name {
	font-size: var(--gh-text-sm);
	color: var(--gh-on-dark-muted);
}

.gh-trees__band-rate {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-lg);
	font-weight: 800;
	color: var(--gh-white);
	line-height: 1.25;
}

/* --- Uitkomst --- */

.gh-trees__results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gh-space-3);
	margin-top: var(--gh-space-4);
}

.gh-trees__result {
	display: grid;
	gap: 0.2rem;
	padding: var(--gh-space-4) var(--gh-space-3);
	background: var(--gh-mint-soft);
	border-radius: var(--gh-radius);
	text-align: center;
	align-content: start;
}

.gh-trees__result--lead {
	background: var(--gh-mint);
	position: relative;
}

.gh-trees__icon {
	justify-self: center;
	width: 2rem;
	height: 2rem;
	color: var(--gh-forest-light);
	margin-bottom: 0.2rem;
}

.gh-trees__value {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-3xl);
	font-weight: 800;
	line-height: 1;
	color: var(--gh-text-strong);
	font-variant-numeric: tabular-nums;
}

.gh-trees__result:not(.gh-trees__result--lead) .gh-trees__value {
	font-size: var(--gh-text-2xl);
}

.gh-trees__label {
	font-size: var(--gh-text-xs);
	color: var(--gh-text-muted);
	line-height: 1.3;
}

/* --- Wat levert groei op --- */

.gh-trees__next {
	margin: var(--gh-space-4) 0 0;
	padding: var(--gh-space-3) var(--gh-space-4);
	background: var(--gh-cream);
	border-radius: var(--gh-radius);
	font-size: var(--gh-text-sm);
	color: var(--gh-text-muted);
	max-width: none;
}

.gh-trees__next strong {
	color: var(--gh-text-strong);
}

/* --- Staffeltabel --- */

.gh-trees__table-title {
	font-size: var(--gh-text-xl);
	margin-top: 0;
	margin-bottom: var(--gh-space-4);
}

.gh-trees__table {
	width: 100%;
	/* 'separate' in plaats van 'collapse': anders negeert de tabelrand de
	   ronde hoeken. De rijlijnen staan toch al op de cellen zelf. */
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--gh-text-sm);
	background: var(--gh-white);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-lg);
	overflow: hidden;
	box-shadow: var(--gh-shadow-sm);
}

.gh-trees__table th,
.gh-trees__table td {
	padding: 0.9rem 1.6rem;
	text-align: left;
	border-bottom: 1px solid var(--gh-line);
}

.gh-trees__table thead th {
	background: var(--gh-forest);
	color: var(--gh-white);
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gh-trees__table tbody th {
	font-weight: 600;
	color: var(--gh-text-strong);
	/* Niet vastzetten: "501 – 1.000 werknemers" maakte de tabel anders breder
	   dan een telefoonscherm, met een horizontale schuifbalk op de hele pagina. */
	white-space: normal;
	text-wrap: balance;
}

/* Vangnet: mocht de inhoud toch te breed worden, dan schuift de tabel zelf
   in plaats van de pagina. */
.gh-trees__table-wrap {
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 520px) {
	.gh-trees__table th,
	.gh-trees__table td {
		padding: 0.8rem 1rem;
		font-size: var(--gh-text-xs);
	}

	.gh-trees__row-chip {
		display: block;
		margin: 0.3rem 0 0;
	}
}

.gh-trees__table tbody td {
	color: var(--gh-text-muted);
	font-variant-numeric: tabular-nums;
}

.gh-trees__table tbody tr:last-child th,
.gh-trees__table tbody tr:last-child td {
	border-bottom: 0;
}

.gh-trees__table tbody tr {
	transition: background-color var(--gh-transition);
}

/* De regel waar je in valt springt eruit, met een label erbij. */
.gh-trees__row-chip {
	display: none;
	margin-inline-start: var(--gh-space-2);
	padding: 0.2rem 0.7rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-forest);
	color: var(--gh-white);
	font-family: var(--gh-font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 0.1em;
}

.gh-trees__table tbody tr.is-active {
	background: var(--gh-mint);
	box-shadow: inset 4px 0 0 var(--gh-leaf);
}

.gh-trees__table tbody tr.is-active th,
.gh-trees__table tbody tr.is-active td {
	color: var(--gh-forest-dark);
	font-weight: 700;
}

.gh-trees__table tbody tr.is-active .gh-trees__row-chip {
	display: inline-block;
}

@media (max-width: 900px) {
	.gh-trees {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) {
	.gh-trees__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gh-trees__result--lead {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------- CTA ---- */

.gh-cta__inner {
	text-align: center;
}

.gh-cta__points {
	list-style: none;
	margin: 0 0 var(--gh-space-5);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gh-space-2) var(--gh-space-5);
	color: var(--gh-mint);
	font-weight: 500;
}

.gh-cta__signature {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-2xl);
	font-weight: 800;
	color: var(--gh-white);
	margin: 0;
	margin-inline: auto;
}

.gh-cta__signature-sub {
	color: var(--gh-mint);
	font-weight: 600;
	margin-inline: auto;
}

/* ------------------------------------------------------- Header/footer --- */

/* Navigatiebalk over de volle breedte. */
/* Meelopende navigatie. Sticky moet op de wrapper van Bricks staan: de sectie
   zelf is precies zo hoog als de balk, dus daar zou het geen effect hebben. */
#brx-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.gh-site-header {
	background: var(--gh-white);
	border-bottom: 1px solid var(--gh-line);
	padding-block: var(--gh-space-3);
	position: relative;
	z-index: 20;
}

/* Ankerlinks (#prijs) niet onder de meelopende balk laten eindigen. */
.gh-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 9rem;
}

/* De inhoud blijft binnen de container, in lijn met de rest van de pagina. */
.gh-site-header .gh-site-header__inner {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding-block: 0;
}

.gh-site-header__inner {
	display: flex;
	/* Bricks-containers staan standaard op flex-direction: column. */
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--gh-space-4);
	/* Niet afbreken: het menu krimpt liever dan dat de knop naar regel twee springt. */
	flex-wrap: nowrap;
}

.gh-site-header__logo {
	flex: none;
}

.gh-site-header__logo img {
	height: 44px;
	width: auto;
	display: block;
}

.gh-site-header__nav {
	/* Vult de ruimte tussen logo en knop en mag krimpen. */
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.gh-site-header__nav .bricks-nav-menu {
	/* Liever compacte items dan een menu dat over twee regels valt. */
	flex-wrap: nowrap;
	justify-content: center;
}

.gh-site-header__nav .bricks-nav-menu > li > a {
	font-family: var(--gh-font-heading);
	font-weight: 600;
	color: var(--gh-forest);
	padding-inline: 0.9rem;
	white-space: nowrap;
}

.gh-site-header__nav .bricks-nav-menu > li > a:hover,
.gh-site-header__nav .bricks-nav-menu > li.current-menu-item > a {
	color: var(--gh-leaf);
}

.gh-site-header__cta {
	flex: none;
}

/* De headerknop komt uit een Bricks-element, dus het ronde pijltje maken we hier.
   Ook de kopie in het uitklapmenu krijgt hem, anders mist die het pijltje. */
.gh-site-header__cta::after,
.gh-mobile-cta::after {
	content: '';
	width: 3rem;
	height: 3rem;
	flex: none;
	border-radius: 50%;
	background-color: var(--gh-ink-btn);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.5rem;
	transition: transform var(--gh-transition);
}

.gh-site-header__cta:hover::after {
	transform: translateX(2px);
}

/* Zodra Bricks de menuknop toont (onder 992px) verhuist de actieknop naar
   het uitklapmenu; in de balk blijven dan alleen logo en menuknop over. */
@media (max-width: 991px) {
	.gh-site-header__inner {
		flex-wrap: nowrap;
		gap: var(--gh-space-3);
	}

	.gh-site-header__nav {
		flex: 0 0 auto;
		order: 3;
		margin-inline-start: auto;
	}

	.gh-site-header__cta {
		display: none;
	}
}

/* ---------------------------------------------------------- Mobiel menu ---
   Bricks levert het uitklappaneel zonder achtergrond, waardoor je door het
   menu heen de pagina zag. Hier krijgt het een eigen, rustige vormgeving. */

#brx-header .bricks-mobile-menu-wrapper {
	display: flex;
	flex-direction: column;
	box-shadow: var(--gh-shadow-lg);

	/* Even veel ruimte boven als de header zelf heeft. Het logo in het paneel
	   komt daardoor precies op de plek te staan van het logo in de balk, dus
	   bij het openklappen verspringt er niets. */
	padding-block: 1.2rem var(--gh-space-6);
}

/* Bricks tekent het vlak met een ::before in #23282d, niet met een
   achtergrond op het paneel zelf. Die moet je dus hier overschrijven. */
#brx-header .brxe-nav-menu .bricks-mobile-menu-wrapper::before,
#brx-header .bricks-mobile-menu-wrapper::before {
	background-color: var(--gh-white);
}

#brx-header .bricks-mobile-menu {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0;
	margin: 0;
}

#brx-header .bricks-mobile-menu > li > a {
	display: block;

	/* Zelfde inspringing als het logo en de knop: alles begint op één lijn. */
	padding: 1.1rem var(--gh-gutter);
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-lg);

	/* Zonder dit erft de link een royale regelhoogte van Bricks en werd elk
	   item bijna negentig pixels hoog. */
	line-height: 1.4;
	font-weight: 600;
	color: var(--gh-forest);
	text-decoration: none;
	border-radius: 0;
	transition: background-color var(--gh-transition), color var(--gh-transition);
}

#brx-header .bricks-mobile-menu > li > a:hover,
#brx-header .bricks-mobile-menu > li.current-menu-item > a {
	background: var(--gh-mint-soft);
	color: var(--gh-leaf-dark);
}

/* Het logo boven in het uitklapmenu, op dezelfde lijn als het menu eronder. */
.gh-mobile-logo {
	display: flex;
	margin: 0 var(--gh-gutter) var(--gh-space-5);
}

.gh-mobile-logo img {
	height: 4.4rem;
	width: auto;
	display: block;
}

@media (min-width: 992px) {
	.gh-mobile-logo {
		display: none;
	}
}

/* De kopie van de knop onderin het uitklapmenu. */
.gh-mobile-cta {
	display: flex;
	justify-content: center;
	width: auto;
	margin: var(--gh-space-5) var(--gh-gutter) 0;
}

@media (min-width: 992px) {
	.gh-mobile-cta {
		display: none;
	}
}

.gh-site-footer {
	background: var(--gh-forest-dark);
	color: var(--gh-on-dark-muted);
	padding-block: var(--gh-space-8) var(--gh-space-5);
}

.gh-site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--gh-space-6);
	align-items: start;
}

.gh-site-footer strong {
	color: var(--gh-white);
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-lg);
	display: inline-block;
	margin-bottom: var(--gh-space-2);
}

.gh-site-footer a {
	color: var(--gh-mint);
}

.gh-site-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gh-space-2);
}

.gh-site-footer__nav a {
	color: var(--gh-on-dark-muted);
	text-decoration: none;
	font-weight: 500;
}

.gh-site-footer__nav a:hover {
	color: var(--gh-white);
}

.gh-site-footer__bottom {
	margin-top: var(--gh-space-6);
	padding-top: var(--gh-space-4);
	border-top: 1px solid var(--gh-line-dark);
	font-size: var(--gh-text-sm);
}

/* ----------------------------------------------------------- Contact ---- */

.gh-contact__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(3.2rem, 5vw, 6.4rem);
	align-items: start;
}

.gh-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--gh-space-4);
	padding-block: var(--gh-space-4);
	border-bottom: 1px solid var(--gh-line);
}

.gh-contact__item:first-child {
	padding-top: 0;
}

.gh-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	flex: none;
	border-radius: var(--gh-radius);
	background: var(--gh-mint);
	color: var(--gh-text-strong);
}

.gh-contact__icon .gh-icon {
	width: 2.1rem;
	height: 2.1rem;
}

.gh-contact__label {
	display: block;
	font-size: var(--gh-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gh-text-muted);
	margin-bottom: 0.2rem;
}

.gh-contact__value {
	display: block;
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-lg);
	font-weight: 600;
	color: var(--gh-text-strong);
	line-height: 1.4;
}

.gh-contact__value a {
	color: inherit;
	text-decoration: none;
}

.gh-contact__value a:hover {
	color: var(--gh-leaf);
	text-decoration: underline;
}

.gh-contact__note {
	margin-top: var(--gh-space-5);
	padding: var(--gh-space-4);
	border-radius: var(--gh-radius);
	background: var(--gh-mint-soft);
	color: var(--gh-text-strong);
	font-size: var(--gh-text-sm);
}

.gh-contact__form {
	background: var(--gh-white);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-xl);
	padding: clamp(2.4rem, 3vw, 4rem);
	box-shadow: var(--gh-shadow);
}

@media (max-width: 860px) {
	.gh-contact__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------- FAQ ---- */

.gh-faq__list {
	display: grid;
	gap: var(--gh-space-3);
}

.gh-faq__item {
	background: var(--gh-white);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-lg);
	padding: var(--gh-space-4) var(--gh-space-5);
	transition: border-color var(--gh-transition), box-shadow var(--gh-transition);
}

.gh-faq__item.is-open {
	border-color: var(--gh-mint);
}

.gh-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gh-space-4);
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-base);
	font-weight: 700;
	color: var(--gh-text-strong);
}

.gh-faq__question::after {
	content: '';
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	border-right: 2px solid var(--gh-leaf);
	border-bottom: 2px solid var(--gh-leaf);
	transform: rotate(45deg);
	transition: transform var(--gh-transition);
}

.gh-faq__item.is-open .gh-faq__question::after {
	transform: rotate(-135deg);
}

/* Uitschuiven zonder de hoogte te hoeven meten: een rij van 0fr naar 1fr laat
   het paneel precies tot zijn eigen hoogte groeien, en dat is wel te animeren.
   Het kind eromheen knipt de inhoud af tijdens de beweging. */
.gh-faq__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--gh-transition-slow);
}

/* Dit tussenlaagje is het rijvak zelf en heeft bewust geen eigen binnenruimte:
   die zou namelijk meetellen in de rijhoogte, waardoor er dichtgeklapt toch nog
   een streepje ruimte overbleef. De marge zit daarom op het antwoord erbinnen. */
.gh-faq__panel-inner {
	min-height: 0;
	overflow: hidden;
}

.gh-faq__item:not(.is-open) > .gh-faq__panel {
	grid-template-rows: 0fr;
}

.gh-faq__answer {
	padding-top: var(--gh-space-3);
	color: var(--gh-text-muted);
}

/* Beweging beperken: dan meteen open of dicht, zonder schuiven. */
@media (prefers-reduced-motion: reduce) {
	.gh-faq__panel,
	.gh-footer-col__panel {
		transition: none;
	}
}

/* ------------------------------------------------------------ Nieuws ---- */

.gh-posts__grid {
	display: grid;
	gap: var(--gh-space-5);
}

/* Het gekozen aantal kolommen is leidend; auto-fit paste er bij een brede
   container stiekem een vierde bij. */
.gh-posts__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gh-posts__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.gh-posts__grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.gh-posts__grid--2,
	.gh-posts__grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gh-post-card {
	display: flex;
	flex-direction: column;
	background: var(--gh-white);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-lg);
	overflow: hidden;
	box-shadow: var(--gh-shadow-sm);
	transition: transform var(--gh-transition), box-shadow var(--gh-transition),
		border-color var(--gh-transition);
}

/* De hele kaart is één doel: ga je er met de muis overheen, dan reageert de
   knop meteen mee. Anders lijkt hij pas mee te doen als je hem precies raakt. */
.gh-post-card:hover .gh-post-card__btn {
	background: var(--gh-hover);
	border-color: var(--gh-hover);
	color: var(--gh-hover-ink);
}

.gh-post-card:hover .gh-post-card__btn .gh-btn__arrow {
	background: var(--gh-forest);
	color: var(--gh-white);
}

.gh-post-card:hover {
	border-color: var(--gh-hover);
	transform: translateY(-2px);
	box-shadow: var(--gh-shadow);
}

.gh-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--gh-mint-soft);
	overflow: hidden;
}

.gh-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gh-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--gh-space-2);
	padding: var(--gh-space-5);
	flex: 1;
}

.gh-post-card__date {
	font-size: var(--gh-text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gh-text-muted);
}

.gh-post-card__title {
	font-size: var(--gh-text-xl);
	margin: 0;
}

.gh-post-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--gh-transition);
}

/* Titel kleurt mee zodra je ergens op de kaart komt, in dezelfde limoen als de
   rand en de knop. */
.gh-post-card__title a:hover,
.gh-post-card:hover .gh-post-card__title a {
	color: var(--gh-hover);
}

.gh-post-card__excerpt {
	color: var(--gh-text-muted);
	margin: 0;
}

.gh-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--gh-space-2);
	margin-top: auto;
	padding-top: var(--gh-space-3);
	font-family: var(--gh-font-heading);
	font-weight: 700;
	font-size: var(--gh-text-sm);
	color: var(--gh-leaf);
}

.gh-posts__empty {
	color: var(--gh-text-muted);
}

.gh-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gh-space-2);
	margin-top: var(--gh-space-6);
}

.gh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4rem;
	height: 4rem;
	padding-inline: var(--gh-space-3);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius);
	font-family: var(--gh-font-heading);
	font-weight: 600;
	color: var(--gh-text-strong);
	text-decoration: none;
	background: var(--gh-white);
}

.gh-pagination .page-numbers:hover {
	border-color: var(--gh-hover);
	color: var(--gh-text-strong);
}

.gh-pagination .page-numbers.current {
	background: var(--gh-forest);
	border-color: var(--gh-text-strong);
	color: var(--gh-white);
}

/* --------------------------------------------------- Artikel & 404 ------ */

.gh-article {
	margin-inline: auto;
}

/* Juridische pagina's: veel korte artikelen achter elkaar. Daar stonden de
   kopjes bijna even groot als de paginatitel, waardoor de opbouw verdween.
   Kleiner, met wat meer lucht erboven, laat de indeling weer zien. */
.gh-legal h2 {
	font-size: var(--gh-text-lg);
	margin-top: var(--gh-space-5);
}

.gh-legal h3 {
	font-size: var(--gh-text-base);
}

.gh-article__meta {
	font-size: var(--gh-text-sm);
	color: var(--gh-text-muted);
	margin-bottom: var(--gh-space-3);
}

.gh-article .brxe-post-content > * {
	margin-bottom: var(--gh-space-4);
}

.gh-article img {
	max-width: 100%;
	height: auto;
	border-radius: var(--gh-radius-lg);
}

/* --- Samenvatting in het offerteformulier -------------------------------- */

.gh-summary {
	background: var(--gh-mint-soft);
	border: 1px solid var(--gh-mint);
	border-radius: var(--gh-radius);
	padding: var(--gh-space-4);
	margin-bottom: var(--gh-space-5);
}

.gh-summary__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gh-space-3);
	margin-bottom: var(--gh-space-3);
}

.gh-summary__title {
	margin: 0;
	font-size: var(--gh-text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gh-text-strong);
}

.gh-summary__edit {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-sm);
	font-weight: 600;
	color: var(--gh-forest-light);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.gh-summary__edit:hover {
	color: var(--gh-leaf);
}

.gh-summary__specs {
	list-style: none;
	margin: 0 0 var(--gh-space-4);
	padding: 0;
	display: grid;
	/* Zes gegevens in twee nette rijen van drie. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gh-space-2);
}

@media (max-width: 560px) {
	.gh-summary__specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gh-summary__specs li {
	display: grid;
	gap: 0.2rem;
	padding: var(--gh-space-2) var(--gh-space-3);
	background: var(--gh-white);
	border-radius: var(--gh-radius-sm);
}

.gh-summary__spec-label {
	font-size: var(--gh-text-xs);
	color: var(--gh-text-muted);
	line-height: 1.3;
	/* Vangnet voor lange woorden; labels zelf houden we kort. */
	overflow-wrap: break-word;
}

.gh-summary__spec-value {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-base);
	font-weight: 800;
	color: var(--gh-text-strong);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.gh-summary__totals {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--gh-space-4);
	padding-top: var(--gh-space-4);
	border-top: 1px solid var(--gh-mint);
}

.gh-summary__total {
	display: grid;
	gap: 0.2rem;
}

.gh-summary__amount {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-2xl);
	font-weight: 800;
	color: var(--gh-text-strong);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.gh-summary__label {
	font-size: var(--gh-text-sm);
	color: var(--gh-text-muted);
}

.gh-summary__note {
	display: flex;
	align-items: flex-start;
	gap: var(--gh-space-2);
	margin: var(--gh-space-3) 0 0;
	font-size: var(--gh-text-sm);
	color: var(--gh-text-strong);
	max-width: none;
}

.gh-summary__note .gh-icon {
	color: var(--gh-leaf);
	margin-top: 0.15em;
}

/* ------------------------------------------- Kale pagina (offerte-aanvraag) --- */

/* Voor pagina's waar header en footer uit staan: alleen een logo en een slotregel. */
.gh-bare-bar {
	padding-block: var(--gh-space-5) 0;
}

.gh-bare-bar__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--gh-space-4);
}

.gh-bare-bar__inner .brxe-logo img {
	height: 48px;
	width: auto;
	display: block;
}

.gh-bare-bar__inner a {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-sm);
	font-weight: 600;
	color: var(--gh-text-muted);
	text-decoration: none;
}

.gh-bare-bar__inner a:hover {
	color: var(--gh-text-strong);
}

/* Deze balk is altijd wit. In de builder draagt de sectie nog gh-bg--forest;
   die klasse zet lichte tekstkleuren, dus we draaien ze hier terug. Zonder dit
   staat er mintgroene tekst op wit. */
.gh-bare-foot {
	padding-block: var(--gh-space-6) var(--gh-space-7);
	background: var(--gh-white);

	--gh-text: var(--gh-ink);
	--gh-text-muted: var(--gh-muted);
	--gh-text-strong: var(--gh-forest);
}

.gh-bare-foot__inner {
	border-top: 1px solid var(--gh-line);
	padding-top: var(--gh-space-4);
	text-align: center;
	font-size: 1.4rem;
	color: #000;

	/* Een container van Bricks is een flexkolom die zijn kinderen links uitlijnt.
	   De regel kromp daardoor tot zijn eigen breedte en text-align had niets meer
	   te centreren. Het kind zelf midden zetten lost dat wel op. */
	align-items: center;
}

/* --- Pagina zonder header en footer: altijd het hele scherm vullen ---------
   Staat er weinig tussen, dan bleef er een leeg vlak onder de slotregel achter.
   De inhoud groeit nu mee, zodat de balk bovenaan en de regel onderaan tegen de
   randen van het scherm blijven staan. */
.gh-bare-page #brx-content {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* Op een telefoon krimpt de adresbalk tijdens het scrollen; dvh rekent
	   met de hoogte die op dat moment echt beschikbaar is. */
	min-height: 100dvh;
}

/* Alles tussen de balk en de slotregel vult de ruimte die overblijft. */
.gh-bare-page #brx-content > .gh-section {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gh-bare-page #brx-content > .gh-bare-bar,
.gh-bare-page #brx-content > .gh-bare-foot {
	flex: 0 0 auto;
}

.gh-bare-foot .gh-bare-foot__inner a {
	color: #000;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.gh-bare-foot .gh-bare-foot__inner a:hover {
	color: var(--gh-forest);
}

/* Logo staat op de donkergroene balk; een lichte pastille houdt het leesbaar. */
.gh-site-header__logo {
	/* Op een witte balk heeft het logo geen eigen achtergrond nodig. */
	display: inline-flex;
	align-items: center;
}


/* ------------------------------------------------------------------------
   Kleuren per context.
   Een donkere sectie zet de tekstkleuren op licht. Kaarten met een lichte
   achtergrond daarbinnen zetten ze weer terug, anders staat er wit op wit.
   ------------------------------------------------------------------------ */

.gh-bg--forest,
.gh-bg--gradient {
	--gh-text: var(--gh-on-dark);
	--gh-text-muted: var(--gh-on-dark-muted);
	--gh-text-strong: var(--gh-white);
}

.gh-bg--forest :is(
	.gh-include__list,
	.gh-step,
	.gh-price__card,
	.gh-trees__calc,
	.gh-trees__table,
	.gh-contact__form,
	.gh-faq__item,
	.gh-post-card,
	.gh-hero__badge,
	.gh-pagination .page-numbers,
	.gh-calc__panel:not(.gh-calc__result),
	.gh-summary
) {
	--gh-text: var(--gh-ink);
	--gh-text-muted: var(--gh-muted);
	--gh-text-strong: var(--gh-forest);

	color: var(--gh-text);
}

/* Vinkjes in een lichte kaart blijven bladgroen in plaats van mint. */
.gh-bg--forest :is( .gh-include__list, .gh-price__card, .gh-summary ) .gh-icon {
	color: var(--gh-leaf);
}

/* Onderdelen die altijd donker zijn, ongeacht de sectiekleur: die zetten hun
   eigen tekstkleuren, anders staat er donkergroen op donkergroen zodra de
   sectie eromheen licht is. */
.gh-calc__result,
.gh-price__side,
.gh-trees__band,
.gh-trees__table thead th,
.gh-step__number,
.gh-site-footer,
.gh-pagination .page-numbers.current,
.gh-bg--forest .gh-trees__table thead th {
	--gh-text: var(--gh-on-dark);
	--gh-text-muted: var(--gh-on-dark-muted);
	--gh-text-strong: var(--gh-white);

	color: var(--gh-text);
}

/* De actieve rij in de staffel blijft licht met donkere tekst. */
.gh-trees__table tbody tr.is-active {
	--gh-text-strong: var(--gh-forest-dark);
	--gh-text-muted: var(--gh-forest-dark);
}

/* ------------------------------------------------------------------ Slider */

.gh-slider {
	position: relative;
}

.gh-slider__track {
	display: flex;
	gap: var(--gh-space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-inline: 0;
	padding-block: var(--gh-space-2);
	/* Schuifbalk verbergen; er zijn knoppen en stipjes. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gh-slider__track::-webkit-scrollbar {
	display: none;
}

.gh-slider__track:focus-visible {
	outline: 3px solid var(--gh-leaf);
	outline-offset: 4px;
	border-radius: var(--gh-radius-lg);
}

.gh-slider__track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 100%;
}

@media (min-width: 641px) {
	.gh-slider--2 .gh-slider__track > *,
	.gh-slider--3 .gh-slider__track > *,
	.gh-slider--4 .gh-slider__track > * {
		width: calc((100% - var(--gh-space-5)) / 2);
	}
}

@media (min-width: 1025px) {
	.gh-slider--2 .gh-slider__track > * {
		width: calc((100% - var(--gh-space-5)) / 2);
	}

	.gh-slider--3 .gh-slider__track > * {
		width: calc((100% - 2 * var(--gh-space-5)) / 3);
	}

	.gh-slider--4 .gh-slider__track > * {
		width: calc((100% - 3 * var(--gh-space-5)) / 4);
	}
}

.gh-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gh-space-4);
	margin-top: var(--gh-space-5);
}

.gh-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gh-btn-height, 4.8rem);
	height: var(--gh-btn-height, 4.8rem);
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--gh-line);
	background: var(--gh-white);
	color: var(--gh-forest);
	cursor: pointer;
	transition: background-color var(--gh-transition), color var(--gh-transition),
		border-color var(--gh-transition), opacity var(--gh-transition);
}

.gh-slider__btn:hover:not(:disabled) {
	background: var(--gh-hover);
	border-color: var(--gh-hover);
	color: var(--gh-hover-ink);
}

.gh-slider__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.gh-slider__btn--prev .gh-icon {
	transform: rotate(180deg);
}

.gh-slider__dots {
	display: flex;
	align-items: center;
	gap: var(--gh-space-2);
}

/* Veel pagina's (vooral op mobiel): een teller leest prettiger dan een
   lange rij stippen. */
.gh-slider__count {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-sm);
	font-weight: 700;
	color: var(--gh-text-muted);
	font-variant-numeric: tabular-nums;
	min-width: 6rem;
	text-align: center;
}

.gh-slider__dot {
	width: 0.9rem;
	height: 0.9rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gh-line);
	cursor: pointer;
	transition: background-color var(--gh-transition), width var(--gh-transition);
}

.gh-slider__dot.is-active {
	width: 2.4rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-leaf);
}

/* Op een donkere sectie meebewegen met de achtergrond. */
.gh-bg--forest .gh-slider__btn,
.gh-bg--gradient .gh-slider__btn {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--gh-line-dark);
	color: var(--gh-white);
}

.gh-bg--forest .gh-slider__dot,
.gh-bg--gradient .gh-slider__dot {
	background: var(--gh-line-dark);
}

.gh-bg--forest .gh-slider__dot.is-active,
.gh-bg--gradient .gh-slider__dot.is-active {
	background: var(--gh-mint);
}

@media (prefers-reduced-motion: reduce) {
	.gh-slider__track {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------- Footer --- */

.gh-footer {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
	gap: clamp(3.2rem, 5vw, 6.4rem);
	align-items: start;
}

.gh-footer__intro {
	max-width: 38ch;
}

.gh-footer__intro strong {
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-lg);
	display: inline-block;
	margin-bottom: var(--gh-space-2);
}

.gh-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: var(--gh-space-6);
}

.gh-footer-col__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gh-space-3);
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-base);
	font-weight: 700;
	color: var(--gh-text-strong);
	text-align: left;
	cursor: default;
}

.gh-footer-col__chevron {
	display: none;
	width: 1rem;
	height: 1rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--gh-transition);
	flex: none;
}

/* Zelfde uitschuiftruc als bij de vragen. Het paneel gebruikte eerst het
   hidden-attribuut, maar display: none valt niet te animeren: dan klapt het
   in één keer weg. */
.gh-footer-col__panel {
	display: grid;
	grid-template-rows: 1fr;
	margin-top: var(--gh-space-3);
	transition: grid-template-rows var(--gh-transition-slow),
		margin-block-end var(--gh-transition-slow);
}

.gh-footer-col__panel > * {
	min-height: 0;
	overflow: hidden;
}

/* Alleen op smalle schermen klapt de kolom dicht; daarboven staat alles open. */
.gh-footer-col.is-dicht > .gh-footer-col__panel {
	grid-template-rows: 0fr;
	margin-block: 0;
}

.gh-footer-col__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gh-space-2);
	font-size: var(--gh-text-sm);
	color: var(--gh-text-muted);
}

.gh-footer-col__list a {
	color: var(--gh-text-muted);
	text-decoration: none;
}

.gh-footer-col__list a:hover {
	color: var(--gh-text-strong);
	text-decoration: underline;
}

.gh-footer__bottom {
	margin-top: var(--gh-space-7);
	padding-top: var(--gh-space-4);
	border-top: 1px solid var(--gh-line-dark);
	font-size: var(--gh-text-sm);
	color: var(--gh-text-muted);
}

/* Mobiel: kolommen worden inklapbare rijen met een streep ertussen. */
@media (max-width: 860px) {
	.gh-footer {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gh-space-6);
	}

	.gh-footer__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		border-top: 1px solid var(--gh-line-dark);
	}

	.gh-footer-col {
		border-bottom: 1px solid var(--gh-line-dark);
	}

	.gh-footer-col__head {
		padding-block: var(--gh-space-4);
		font-size: var(--gh-text-lg);
		cursor: pointer;
	}

	.gh-footer-col__chevron {
		display: block;
		transform: rotate(45deg);
	}

	.gh-footer-col__head[aria-expanded="true"] .gh-footer-col__chevron {
		transform: rotate(-135deg);
	}

	/* Ruimte onder de opengeklapte lijst met een marge in plaats van met
	   binnenruimte: binnenruimte hoort bij het rijvak en houdt de rij dan op
	   zestien pixels, ook als hij dicht hoort te zijn. */
	.gh-footer-col__panel {
		margin-top: 0;
		margin-bottom: var(--gh-space-4);
	}

	.gh-footer-col__list {
		font-size: var(--gh-text-base);
		gap: var(--gh-space-3);
	}
}

/* Lichte vlakjes houden altijd donkere inhoud. Zonder dit werden de iconen
   op een donkere sectie wit — en dus onzichtbaar op hun mintgroene rondje. */
.gh-usp__icon,
.gh-contact__icon,
.gh-badge {
	--gh-text: var(--gh-ink);
	--gh-text-muted: var(--gh-muted);
	--gh-text-strong: var(--gh-forest);

	color: var(--gh-forest);
}

/* Hero-afbeelding bovenaan een nieuwsartikel.
   Bricks zet deze klasse op de <img> zelf, dus geen afstammeling-selector. */
img.gh-article__hero {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--gh-radius-lg);
	display: block;
	margin-block: var(--gh-space-5) var(--gh-space-6);
}

/* --- Offertepagina ------------------------------------------------------- */

/* Deze pagina staat op wit in plaats van de crèmekleur van de rest van de site.
   Gekoppeld aan de calculator in plaats van aan een page-id, zodat het blijft
   werken als de pagina opnieuw wordt aangemaakt. */
body:has(.gh-calculator) {
	background-color: var(--gh-white);
}

/* ------------------------------------------------------- Bedanktpagina --- */

.gh-thanks__inner {
	text-align: center;
	display: grid;
	justify-items: center;
	gap: var(--gh-space-4);
}

/* De stappen mogen de volle breedte pakken; zonder dit krimpen ze tot hun
   eigen inhoud door justify-items: center. */
.gh-thanks__inner > .brxe-gh-steps {
	width: 100%;
	justify-self: stretch;
}

/* Losse tekstregels blijven wel prettig smal. */
.gh-thanks__inner > :is(h1, h2, .brxe-text, .gh-thanks__contact) {
	max-width: 62ch;
}

.gh-thanks__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 7rem;
	height: 7rem;
	border-radius: 50%;
	background: var(--gh-mint);
	color: var(--gh-forest);
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
}

.gh-thanks__inner .gh-lead {
	margin-inline: auto;
}

.gh-thanks__contact {
	color: var(--gh-text-muted);
	font-size: var(--gh-text-sm);
}

/* In de smalle bedankt-container passen geen drie stappen naast elkaar;
   onder elkaar leest het als een tijdlijn. */
.gh-thanks .gh-steps__list {
	text-align: left;
}

/* --- Viering na een verstuurde aanvraag ---------------------------------
   Alles hieronder hangt aan .is-gevierd, dat JavaScript er alleen op zet als
   het formulier zojuist echt is verstuurd. Wie de pagina rechtstreeks opent of
   ververst, ziet de gewone stille pagina. Zo staat er nooit iets onzichtbaar
   te wachten op een animatie die niet komt. */

.gh-confetti {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
}

.gh-thanks.is-gevierd .gh-thanks__mark {
	animation: gh-vink-op 0.65s cubic-bezier(0.16, 1.28, 0.42, 1) backwards;
}

/* Ring die één keer naar buiten pulseert, als een tik op het water. */
.gh-thanks.is-gevierd .gh-thanks__mark::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--gh-leaf);
	animation: gh-vink-ring 1.1s ease-out 0.32s backwards;
}

.gh-thanks__mark {
	position: relative;
}

/* De regels komen na het vinkje één voor één omhoog. */
.gh-thanks.is-gevierd .gh-thanks__inner > *:not(.gh-thanks__mark) {
	animation: gh-bedankt-op 0.55s ease-out backwards;
}

.gh-thanks.is-gevierd .gh-thanks__inner > *:nth-child(2) {
	animation-delay: 0.22s;
}

.gh-thanks.is-gevierd .gh-thanks__inner > *:nth-child(3) {
	animation-delay: 0.32s;
}

.gh-thanks.is-gevierd .gh-thanks__inner > *:nth-child(4) {
	animation-delay: 0.42s;
}

.gh-thanks.is-gevierd .gh-thanks__inner > *:nth-child(n + 5) {
	animation-delay: 0.52s;
}

@keyframes gh-vink-op {
	from {
		opacity: 0;
		transform: scale(0.3);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes gh-vink-ring {
	from {
		opacity: 0.75;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(1.9);
	}
}

@keyframes gh-bedankt-op {
	from {
		opacity: 0;
		transform: translateY(1.6rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gh-thanks.is-gevierd .gh-thanks__mark,
	.gh-thanks.is-gevierd .gh-thanks__mark::after,
	.gh-thanks.is-gevierd .gh-thanks__inner > * {
		animation: none;
	}

	.gh-thanks.is-gevierd .gh-thanks__mark::after {
		display: none;
	}
}

/* --------------------------------------------------- Hero, mobiel dieet ---
   Op een telefoon werd de hero een volle pagina tekst. We tonen daar de kern:
   kop, één krachtige zin, drie voordelen en de primaire knop. De rest blijft
   op bredere schermen gewoon staan. */
@media (max-width: 640px) {
	/* De lange introducerende alinea. */
	.gh-hero .gh-header .gh-lead {
		display: none;
	}

	/* De afsluitende zin boven de voordelen. */
	.gh-hero__closing {
		display: none;
	}

	/* Voordeel vier en verder. */
	.gh-hero__usps li:nth-child(n + 4) {
		display: none;
	}

	/* De tweede knop; de primaire actie is genoeg. */
	.gh-hero .gh-actions .gh-btn--outline {
		display: none;
	}

	/* Strakkere verticale maten. */
	.gh-hero.gh-section {
		padding-block: var(--gh-space-6);
	}

	.gh-hero__usps {
		margin-top: var(--gh-space-4);
		gap: var(--gh-space-2);
	}

	.gh-hero .gh-actions {
		margin-top: var(--gh-space-5);
	}
}

/* ---------------------------------------------------------------- USP-balk */

.gh-topbar {
	background: var(--gh-forest);
	color: var(--gh-on-dark);
	overflow: hidden;
	/* Zachte overgang bij het inklappen tijdens scrollen. */
	max-height: 6rem;
	transition: max-height var(--gh-transition);
}

/* De punten schuiven vanzelf voorbij; de opmaak van de band zelf staat bij
   de voordelen, hier alleen de afwijkingen voor dit dunne lint. */
.gh-topbar .gh-marquee {
	--gh-marquee-gap: var(--gh-space-6);

	/* Het groene lint blijft doorlopen: alleen de tekst vervaagt aan de randen. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

/* Anders dan bij de voordelenkaarten stopt dit lint niet bij hover: de muis
   gaat hier voortdurend overheen op weg naar het menu of de pagina, en dan
   lijkt de band steeds willekeurig stil te vallen. */
.gh-topbar .gh-marquee:hover .gh-marquee__track {
	animation-play-state: running;
}

@media (max-width: 640px) {
	.gh-topbar .gh-marquee {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
		mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
	}
}

.gh-topbar__list {
	list-style: none;
	margin: 0;
	padding: 0.9rem 0;
	font-size: var(--gh-text-sm);
	font-weight: 500;
	white-space: nowrap;
}

.gh-topbar__list li {
	display: inline-flex;
	align-items: center;
	gap: var(--gh-space-2);
	flex: none;
}

.gh-topbar .gh-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--gh-mint);
}

/* Ingeklapt zodra er gescrold is: de vastgezette kop blijft slank. */
#brx-header.is-scrolled .gh-topbar {
	max-height: 0;
}

/* Zonder beweging blijft er één rij over; die zetten we netjes in het midden. */
@media (prefers-reduced-motion: reduce) {
	.gh-topbar .gh-marquee__track {
		width: 100%;
		justify-content: center;
	}
}

/* ------------------------------------------- Nieuws: kop met knop ernaast */

.gh-posts__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gh-space-5);
	margin-bottom: var(--gh-space-6);
}

.gh-posts__head .gh-header,
.gh-posts__head .gh-posts__header {
	margin-bottom: 0;
}

.gh-posts__head-action {
	flex: none;
	padding-bottom: 0.4rem;
}

@media (max-width: 640px) {
	.gh-posts__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Datum als pil, zoals op de voorbeeldsite. */
.gh-post-card__date {
	display: inline-flex;
	align-self: flex-start;
	padding: 0.5rem 1.3rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-mint);
	color: var(--gh-forest);
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-xs);
	font-weight: 700;
}

/* Kaarten in de slider even hoog. */
.gh-slider__track > .gh-post-card {
	display: flex;
	flex-direction: column;
}

/* -------------------------------------- Nieuwskaarten in FiTClub-stijl --- */

/* Alleen de kaartenrij loopt rechts door tot de schermrand; de kop en de
   knoppen blijven binnen de container. */
.gh-slider--bleed .gh-slider__track {
	margin-right: calc(50% - 50vw);
	padding-right: var(--gh-gutter);
}

/* Foto als eigen afgerond blok met de badge erop. */
.gh-post-card {
	position: relative;
	padding: var(--gh-space-3);
}

.gh-post-card__media {
	position: relative;
	display: block;
	border-radius: var(--gh-radius);
	overflow: hidden;
}

.gh-post-card__badge {
	position: absolute;
	top: var(--gh-space-3);
	right: var(--gh-space-3);
	padding: 0.45rem 1.3rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-white);
	color: var(--gh-forest);
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-xs);
	font-weight: 700;
}

/* Datum en label doen mee met de rest van de kaart: bij hover slaat alles
   tegelijk om naar limoen. De tekst erin blijft donkergroen, want limoen is
   een achtergrondkleur; als tekstkleur is die op wit niet te lezen. */
.gh-post-card:hover .gh-post-card__date,
.gh-post-card:hover .gh-post-card__badge {
	background: var(--gh-hover);
	color: var(--gh-hover-ink);
}

.gh-post-card__date,
.gh-post-card__badge {
	transition: background-color var(--gh-transition), color var(--gh-transition);
}

.gh-post-card__body {
	padding: var(--gh-space-4) var(--gh-space-3) var(--gh-space-3);
}

.gh-post-card__btn {
	align-self: flex-start;
	margin-top: auto;
}

/* Stipjes gecentreerd, pijlen rechtsonder — zoals het voorbeeld. */
.gh-slider--bleed .gh-slider__controls {
	position: relative;
	justify-content: center;
	min-height: 4.4rem;
}

.gh-slider--bleed .gh-slider__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.gh-slider--bleed .gh-slider__btn--prev {
	right: 5.6rem;
}

.gh-slider--bleed .gh-slider__btn--next {
	right: 0;
	background: var(--gh-forest);
	border-color: var(--gh-forest);
	color: var(--gh-white);
}

/* Deze knop staat standaard al donkergroen, dus zonder eigen hoverregel bleef
   alleen de rand limoen kleuren en veranderde het vlak niet mee. */
.gh-slider--bleed .gh-slider__btn--next:hover:not(:disabled) {
	background: var(--gh-hover);
	border-color: var(--gh-hover);
	color: var(--gh-hover-ink);
}

/* ------------------------------------------------ Nieuws: categorietabs --- */

.gh-posts__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gh-space-2);
}

/* Balk om de tabrij heen. De knoppen staan ernaast, niet eroverheen: lagen ze
   over de rij, dan verdween er steeds een tab half onder een knop. */
.gh-posts__tabbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gh-space-2);
	margin-bottom: var(--gh-space-6);
}

.gh-posts__tabnav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	border: 1px solid var(--gh-line);
	background: var(--gh-white);
	color: var(--gh-forest);
	cursor: pointer;
	transition: background-color var(--gh-transition), color var(--gh-transition),
		border-color var(--gh-transition);
}

.gh-posts__tabnav:hover {
	background: var(--gh-hover);
	border-color: var(--gh-hover);
	color: var(--gh-hover-ink);
}

.gh-posts__tabnav .gh-icon {
	width: 1.6rem;
	height: 1.6rem;
}

/* Hetzelfde pijltje, gespiegeld. */
.gh-posts__tabnav--prev .gh-icon {
	transform: scaleX(-1);
}

/* Past de rij gewoon, dan horen de knoppen er helemaal niet te zijn. */
.gh-posts__tabbar:not(.is-schuifbaar) .gh-posts__tabnav {
	display: none;
}

/* Kan het even niet die kant op, dan blijft de knop wel zijn plek innemen.
   Anders verspringt de rij zodra je een uiteinde bereikt. */
.gh-posts__tabnav:disabled {
	visibility: hidden;
}

/* Op een telefoon vielen de tabs over drie regels uiteen. Ze staan nu op één
   rij die je opzij schuift, met de knoppen ernaast. */
@media (max-width: 640px) {
	.gh-posts__tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		min-width: 0;

		/* Bewust geen scroll-snap. Dat legde de beginstand op de eerste
		   uitlijnpositie in plaats van op nul, waardoor de linkerpijl ook aan
		   het begin van de rij bleef staan. */

		/* De schuifbalk zelf is hier alleen ruis. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.gh-posts__tabs::-webkit-scrollbar {
		display: none;
	}

	.gh-posts__tab {
		flex: none;
	}
}

.gh-posts__tab {
	padding: 0.8rem 2rem;
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-pill);
	background: var(--gh-white);
	color: var(--gh-forest);
	font-family: var(--gh-font-heading);
	font-size: var(--gh-text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--gh-transition), color var(--gh-transition),
		border-color var(--gh-transition);
}

/* Alleen de rand kleurde mee; nu vult de tab zich helemaal, net als de knoppen
   en de nieuwskaarten. */
.gh-posts__tab:hover {
	background: var(--gh-hover);
	border-color: var(--gh-hover);
	color: var(--gh-hover-ink);
}

.gh-posts__tab.is-active {
	background: var(--gh-forest);
	border-color: var(--gh-forest);
	color: var(--gh-white);
}

/* De gekozen tab blijft donkergroen. Zou die bij hover ook limoen worden, dan
   lijkt het even alsof je iets anders hebt aangeklikt. */
.gh-posts__tab.is-active:hover {
	background: var(--gh-forest);
	border-color: var(--gh-forest);
	color: var(--gh-white);
}

.gh-posts__more-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--gh-space-6);
}

/* Slepen met de muis. */
.gh-slider__track {
	cursor: grab;
}

.gh-slider__track.is-dragging {
	cursor: grabbing;
	/* Tijdens het slepen geen snap of soepel scrollen: dat vecht met de muis. */
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

.gh-slider__track.is-dragging a {
	pointer-events: none;
}

/* Iconen in de footerkolommen. */
.gh-footer-col__list li {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.gh-footer-col__icon {
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
	color: var(--gh-mint);
}