/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ── Header: mobile menu ─────────────────────────────────────────────────── */

/* Open state is toggled by assets/js/header.js. The panel itself is the .site-nav global class. */
.site-header.is-open .site-nav {
	display: flex;
}

html.menu-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.site-nav .nav-link {
		font-family: var(--font-primary);
		font-weight: 300;
		font-size: var(--h3-m);
		line-height: var(--lineheight-h3);
	}
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

/* Footer background image (the class tool can't store background-image). */
.elementor .site-footer {
	background-image: url(/wp-content/uploads/2026/09/footer-bg.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* .text-sm / .text-md reset text-decoration and outrank .text-link in the class order. */
.elementor .text-sm.text-link,
.elementor .text-md.text-link,
.elementor .text-lg.text-link {
	text-decoration: underline;
}

/* ── Buttons: arrow hover ────────────────────────────────────────────────── */

/* The arrow tile springs towards the top right; primary/secondary lift a hair, tertiary opens its gap. */
.elementor :is(.primary-button, .secondary-button, .tertiary-button) .e-svg-base {
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: transform;
}

.elementor :is(.primary-button, .secondary-button, .tertiary-button):is(:hover, :focus-visible) .e-svg-base {
	transform: translate(3px, -3px) scale(1.1);
}

.elementor :is(.primary-button, .secondary-button, .tertiary-button):active .e-svg-base {
	transform: translate(1px, -1px) scale(0.95);
	transition-duration: 0.12s;
}

.elementor :is(.primary-button, .secondary-button) {
	transition-property: background-color, border-color, color, transform;
	transition-duration: 0.2s, 0.2s, 0.2s, 0.35s;
	transition-timing-function: ease, ease, ease, cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor :is(.primary-button, .secondary-button):is(:hover, :focus-visible) {
	transform: translateY(-2px);
}

.elementor :is(.primary-button, .secondary-button):active {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.elementor :is(.primary-button, .secondary-button, .tertiary-button),
	.elementor :is(.primary-button, .secondary-button, .tertiary-button) .e-svg-base {
		transition: none;
		transform: none !important;
	}
}

/* ── Motion: Lenis + scroll reveal ───────────────────────────────────────── */

html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

:root {
	--reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo out */
	--reveal-duration: 1.2s;
	--reveal-distance: 32px;
	--reveal-stagger: 110ms;
}

/* Start state only exists when reveal.js is running (html.js-reveal), so nothing is ever stuck hidden. */
html.js-reveal :is(.reveal, .reveal-item):not(.is-in) {
	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
}

html.js-reveal :is(.reveal, .reveal-item):not(.is-done) {
	transition:
		opacity var(--reveal-duration) var(--reveal-ease),
		transform calc(var(--reveal-duration) * 1.1) var(--reveal-ease);
	transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
}

/* Images: soft curtain wipe while the image settles. Also applied to the project gallery items (JetEngine markup). */
html.js-reveal :is(.reveal-media, .project-gallery-full .jet-engine-gallery-grid__item):not(.is-in) {
	opacity: 0;
	clip-path: inset(0 0 99.5% 0 round 4px); /* not 100%: a fully clipped lazy image is never loaded by the browser */
}

html.js-reveal .reveal-media:not(.jet-engine-gallery-grid__item):not(.is-in) {
	transform: scale(1.05);
	transform-origin: 50% 100%;
}

html.js-reveal :is(.reveal-media, .project-gallery-full .jet-engine-gallery-grid__item).is-in:not(.is-done) {
	clip-path: inset(0 0 0 0 round 4px);
}

html.js-reveal .reveal-media:not(.jet-engine-gallery-grid__item):not(.is-done) {
	transition:
		opacity 0.7s ease-out,
		clip-path 1.5s var(--reveal-ease),
		transform 1.8s var(--reveal-ease);
	transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
}

/*
 * Gallery items: the zoom lives on the photo inside the item, never on the item itself, so a photo can not
 * grow over its neighbours. The item clips it.
 */
.elementor .project-gallery-full .jet-engine-gallery-grid__item {
	overflow: hidden;
	border-radius: var(--radius-xs);
}

html.js-reveal .project-gallery-full .jet-engine-gallery-grid__item:not(.is-done) {
	transition:
		opacity 0.7s ease-out,
		clip-path 1.5s var(--reveal-ease);
	transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
}

html.js-reveal .project-gallery-full .jet-engine-gallery-grid__item:not(.is-in) img {
	scale: 1.05;
	transform-origin: 50% 100%;
}

html.js-reveal .project-gallery-full .jet-engine-gallery-grid__item.is-in:not(.is-done) img {
	scale: 1;
	transition: scale 1.8s var(--reveal-ease);
	transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
}

/* ── Reacties slider (JetEngine listing grid, Swiper) ────────────────────── */

.reacties-slider .jet-listing-grid__slider {
	padding-block-end: 76px;
}

/* Variable-width slides: the centred card is full strength, its neighbours sit at 50%. */
.reacties-slider .jet-listing-grid__item {
	width: min(757px, 86vw);
	padding-inline: 6px;
	opacity: 0.5;
	transition: opacity 0.9s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.reacties-slider .jet-listing-grid__item.swiper-slide-active {
	opacity: 1;
}

/* Arrows: two glass tiles centred under the cards. */
.reacties-slider .jet-listing-grid__slider-icon,
.collectie-slider .jet-listing-grid__slider-icon {
	position: absolute;
	inset-block: auto 0;
	inset-inline: auto;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 35px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-xs);
	background: var(--tertiary-500-50);
	backdrop-filter: blur(5px);
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reacties-slider .jet-listing-grid__slider-icon.prev-arrow {
	inset-inline-start: calc(50% - 96px);
}

.reacties-slider .jet-listing-grid__slider-icon.next-arrow {
	inset-inline-start: calc(50% + 4px);
}

.reacties-slider .jet-listing-grid__slider-icon:hover,
.collectie-slider .jet-listing-grid__slider-icon:hover {
	background: var(--tertiary-500);
}

.reacties-slider .jet-listing-grid__slider-icon.prev-arrow:hover,
.collectie-slider .jet-listing-grid__slider-icon.prev-arrow:hover {
	transform: translateX(-3px);
}

/* JetEngine draws the same icon for both arrows and mirrors the next one with scaleX(-1); keep that
   mirror while moving, otherwise the chevron flips on hover. */
.reacties-slider .jet-listing-grid__slider-icon.next-arrow,
.collectie-slider .jet-listing-grid__slider-icon.next-arrow {
	transform: scaleX(-1);
}

.reacties-slider .jet-listing-grid__slider-icon.next-arrow:hover,
.collectie-slider .jet-listing-grid__slider-icon.next-arrow:hover {
	transform: translateX(3px) scaleX(-1);
}

.reacties-slider .jet-listing-grid__slider-icon svg,
.collectie-slider .jet-listing-grid__slider-icon svg {
	width: 12px;
	height: 12px;
}

.reacties-slider .jet-listing-grid__slider-icon svg path,
.collectie-slider .jet-listing-grid__slider-icon svg path {
	fill: currentColor;
}

.reacties-slider .jet-listing-grid__slider-icon.swiper-button-disabled,
.collectie-slider .jet-listing-grid__slider-icon.swiper-button-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* ── Aanpak cards: text by default, list on hover ────────────────────────── */

/*
 * Every card shows its short text. On hover the card grows upwards, the text fades away and the list
 * (with its dividers) rises in line by line. The list sits absolutely at the bottom so it never affects the
 * resting height. Touch devices and narrow screens simply show text and list, stacked.
 */
.elementor .aanpak-card {
	transition: min-height 0.8s var(--reveal-ease), background-color 0.5s ease;
}

.elementor .aanpak-card .e-svg-base {
	transition: transform 0.9s var(--reveal-ease);
}

@media (hover: hover) and (min-width: 1280px) {
	/* Reserve the tallest state up front so growing a card never pushes the page down. */
	.elementor .e-con:has(> .aanpak-card) {
		min-height: 403px;
	}

	.elementor .aanpak-card:is(:hover, :focus-within) {
		min-height: 403px;
		background-color: var(--white-20);
	}

	.elementor .aanpak-card:is(:hover, :focus-within) .e-svg-base {
		transform: scale(1.15);
	}

	.elementor .aanpak-card-text {
		transition: opacity 0.35s ease, transform 0.6s var(--reveal-ease);
	}

	.elementor .aanpak-card:is(:hover, :focus-within) .aanpak-card-text {
		opacity: 0;
		transform: translateY(-10px);
	}

	.elementor .aanpak-card .aanpak-card-list {
		position: absolute;
		inset-inline: 16px;
		inset-block-end: 16px;
		width: auto;
		pointer-events: none;
	}

	.elementor .aanpak-card:is(:hover, :focus-within) .aanpak-card-list {
		pointer-events: auto;
	}

	.elementor .aanpak-card-list > * {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.3s ease, transform 0.4s ease;
	}

	.elementor .aanpak-card:is(:hover, :focus-within) .aanpak-card-list > * {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.6s ease calc(var(--n, 0) * 70ms + 200ms),
			transform 0.9s var(--reveal-ease) calc(var(--n, 0) * 70ms + 200ms);
	}

	.aanpak-card-list > :nth-child(1) { --n: 0; }
	.aanpak-card-list > :nth-child(2) { --n: 1; }
	.aanpak-card-list > :nth-child(3) { --n: 2; }
	.aanpak-card-list > :nth-child(4) { --n: 3; }
	.aanpak-card-list > :nth-child(5) { --n: 4; }
}

@media (hover: none), (max-width: 1279px) {
	.elementor .aanpak-card {
		min-height: 0;
		gap: var(--gap-s);
	}

	.elementor .aanpak-card-list {
		margin-block-start: var(--gap-xs);
	}
}

/* In a column, flex-basis is a height: let stacked cards size to their content. */
@media (max-width: 767px) {
	.elementor .aanpak-card {
		flex: 0 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .aanpak-card,
	.elementor .aanpak-card .e-svg-base,
	.elementor .aanpak-card-text,
	.elementor .aanpak-card-list > * {
		transition: none !important;
	}
}

/* ── Projecten rows (JetEngine listing grid) ─────────────────────────────── */

/* Row number 01–04 comes from a counter, so the markup needs no extra node. */
.projecten-grid .jet-listing-grid__items {
	counter-reset: project;
}

.projecten-grid .jet-listing-grid__item {
	counter-increment: project;
}

.elementor .project-row-info > div:first-child::before {
	content: counter(project, decimal-leading-zero);
	/* Elementor containers use ::before for background overlays (absolute, full size): undo that here. */
	position: static;
	inset: auto;
	display: block;
	width: auto;
	height: auto;
	opacity: 1;
	background: none;
	flex: 0 0 48px;
	font-family: var(--font-secondary);
	font-weight: 500;
	font-size: var(--text-md);
	line-height: 1;
	text-transform: uppercase;
	color: var(--primary-500-50);
}

/* "Bekijk project": no underline in the rows, and its link stretches over the whole row (no nested anchors). */
.elementor .project-row .tertiary-button {
	position: static; /* e-con is position: relative, which would trap the stretched ::after inside the button */
	padding-block-end: 0;
	border-block-end-width: 0;
}

.elementor .project-row .tertiary-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1; /* above the (positioned) gallery items that come later in the DOM */
}

/* Six square thumbnails; the gallery may hold more, extra ones are not shown (and, being lazy, never loaded). */
.elementor .project-gallery .jet-engine-gallery-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 9px;
}

.elementor .project-gallery .jet-engine-gallery-grid {
	margin: 0;
}

/* JetEngine sizes items as a share of a 3-column grid; here the grid cells define the size. */
.elementor .project-gallery .jet-engine-gallery-grid__item {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.elementor .project-gallery .jet-engine-gallery-grid__item-wrap {
	display: block;
}

.elementor .project-gallery .jet-engine-gallery-grid__item:nth-child(n+7) {
	display: none;
}

.elementor .project-gallery .jet-engine-gallery-grid__item img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

@media (max-width: 1023px) {
	.elementor .project-gallery .jet-engine-gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.elementor .project-gallery .jet-engine-gallery-grid__item:nth-child(n+4) {
		display: none;
	}
}

/* ── Volgend project (listing item on the single template) ───────────────── */

/* The next project's first three photos cross-fade as a slow, slider-like background. */
.elementor .next-project-gallery,
.elementor .next-project-gallery .jet-listing-dynamic-field__content,
.elementor .next-project-gallery .jet-engine-gallery-grid {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.elementor .next-project-gallery .jet-engine-gallery-grid__item {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	opacity: 0;
	animation: next-project-fade 18s ease-in-out infinite;
}

.elementor .next-project-gallery .jet-engine-gallery-grid__item:nth-child(2) { animation-delay: 6s; }
.elementor .next-project-gallery .jet-engine-gallery-grid__item:nth-child(3) { animation-delay: 12s; }
.elementor .next-project-gallery .jet-engine-gallery-grid__item:nth-child(n+4) { display: none; }

.elementor .next-project-gallery .jet-engine-gallery-grid__item-wrap {
	display: block;
	width: 100%;
	height: 100%;
}

.elementor .next-project-gallery .jet-engine-gallery-grid__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes next-project-fade {
	0%   { opacity: 0; }
	8%   { opacity: 1; }
	33%  { opacity: 1; }
	41%  { opacity: 0; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor .next-project-gallery .jet-engine-gallery-grid__item { animation: none; opacity: 0; }
	.elementor .next-project-gallery .jet-engine-gallery-grid__item:first-child { opacity: 1; }
}

/* The "Volgend project" link stretches over its row (the row is the nearest positioned ancestor). */
.elementor .next-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.elementor .next-link .e-svg-base {
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.elementor .next-project-row:hover .next-link .e-svg-base {
	transform: translate(3px, -3px) scale(1.1);
}

/* ── Single project ──────────────────────────────────────────────────────── */

/* Breadcrumb: a dash between the items, without extra markup. */
.elementor .breadcrumbs .e-paragraph-base + .e-paragraph-base::before {
	content: "–";
	margin-inline-end: var(--gap-xs);
}

.elementor .breadcrumbs .e-paragraph-base a {
	color: inherit;
}

/* Gallery: two columns that follow each other top to bottom, each photo at its own ratio. */
.elementor .project-gallery-full .jet-engine-gallery-grid {
	display: block;
	column-count: 2;
	column-gap: 16px;
	margin: 0;
}

.elementor .project-gallery-full .jet-engine-gallery-grid__item {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 16px;
	padding: 0;
	break-inside: avoid;
}

.elementor .project-gallery-full .jet-engine-gallery-grid__item-wrap {
	display: block;
}

.elementor .project-gallery-full .jet-engine-gallery-grid__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-xs);
}

@media (max-width: 767px) {
	.elementor .project-gallery-full .jet-engine-gallery-grid {
		column-count: 1;
	}
}

/* Full-width listing grids: drop JetEngine's gutter (negative margin + item padding), it would overflow the page. */
.elementor .next-project-grid .jet-listing-grid__items {
	margin: 0;
	width: 100%;
}

.elementor .next-project-grid .jet-listing-grid__item {
	padding: 0;
}

/* The post content widget brings its own type styles; the intro block defines the type. */
.elementor .project-intro .elementor-widget-theme-post-content,
.elementor .project-intro p {
	margin: 0 0 1.5em;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.elementor .project-intro p:last-child {
	margin-block-end: 0;
}

/* ── Floating images around the CTA (single project) ─────────────────────── */

/*
 * Seven images scattered around the CTA, positions taken from the Figma frame (percentages of the section).
 * Entrance: scale 0.5 → 1 and fade in, staggered, once the section is in view (reveal.js adds .is-in).
 * Parallax: assets/js/parallax.js drifts each image via the separate `translate` property, so it never
 * fights with the entrance (`scale`). Without JavaScript the images simply stay visible.
 */
.elementor .float-cta > .float-img {
	width: calc(var(--fw) * var(--fs, 1));
	aspect-ratio: var(--far);
	left: var(--fl);
	top: var(--ft);
	transition-delay: calc(var(--fi) * 90ms);
}

.elementor .float-cta > .float-img:nth-child(1) { --fl: 81.8%; --ft: 6%;    --fw: 8.9%;  --far: 135 / 186; --fi: 0; }
.elementor .float-cta > .float-img:nth-child(2) { --fl: 9.2%;  --ft: 7.9%;  --fw: 13.6%; --far: 205 / 286; --fi: 1; }
.elementor .float-cta > .float-img:nth-child(3) { --fl: 40.8%; --ft: 13.6%; --fw: 13.4%; --far: 203 / 132; --fi: 2; }
.elementor .float-cta > .float-img:nth-child(4) { --fl: 81.8%; --ft: 58.1%; --fw: 7.7%;  --far: 117 / 162; --fi: 3; }
.elementor .float-cta > .float-img:nth-child(5) { --fl: 19.9%; --ft: 63.8%; --fw: 8%;    --far: 121 / 167; --fi: 4; }
.elementor .float-cta > .float-img:nth-child(6) { --fl: 59.7%; --ft: 79%;   --fw: 13.4%; --far: 203 / 132; --fi: 5; }
.elementor .float-cta > .float-img:nth-child(7) { --fl: 10.3%; --ft: 83.7%; --fw: 11.1%; --far: 167 / 108; --fi: 6; }

html.js-reveal .float-cta > .float-img {
	transition-property: opacity, scale;
	transition-duration: 0.9s, 1.3s;
	transition-timing-function: ease-out, var(--reveal-ease);
}

html.js-reveal .float-cta:not(.is-in) > .float-img {
	opacity: 0;
	scale: 0.5;
}

@media (max-width: 1023px) {
	.elementor .float-cta { --fs: 1.3; }
}

/* Phones: five images, kept clear of the heading and button (top and bottom bands only). */
@media (max-width: 767px) {
	.elementor .float-cta { --fs: 1; }
	.elementor .float-cta > .float-img:nth-child(3),
	.elementor .float-cta > .float-img:nth-child(4) { display: none; }
	.elementor .float-cta > .float-img:nth-child(1) { --fl: 66%; --ft: 10%; --fw: 24%; }
	.elementor .float-cta > .float-img:nth-child(2) { --fl: 4%;  --ft: 5%;  --fw: 30%; }
	.elementor .float-cta > .float-img:nth-child(5) { --fl: 6%;  --ft: 66%; --fw: 24%; }
	.elementor .float-cta > .float-img:nth-child(6) { --fl: 64%; --ft: 72%; --fw: 32%; }
	.elementor .float-cta > .float-img:nth-child(7) { --fl: 30%; --ft: 84%; --fw: 34%; }
}

@media (prefers-reduced-motion: reduce) {
	html.js-reveal .float-cta > .float-img { transition: none; }
}

/*
 * Reveal start states scale images up (1.05) and float images drift, which can poke past the viewport edge
 * before they are revealed and create a horizontal scrollbar. `clip` hides it without making the section a scroll container.
 */
.elementor .section {
	overflow-x: clip;
}

/* ── Pers rows (JetEngine listing grid on Home) ──────────────────────────── */

/* Listing grids carry a gutter (negative margin); these rows have their own spacing. */
.elementor .pers-grid .jet-listing-grid__items {
	margin: 0;
	width: 100%;
}

.elementor .pers-grid .jet-listing-grid__item {
	padding: 0;
}

/* Same stretched "Lees meer" link as the project rows: the whole row is clickable. */
.elementor .list-row .tertiary-button {
	position: static;
	padding-block-end: 0;
	border-block-end-width: 0;
}

.elementor .list-row .tertiary-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ── Pers single ─────────────────────────────────────────────────────────── */

/* Intro quote: centred, narrow; the listing-row flex-basis must not apply in this column. */
.elementor .page-intro .pers-quote {
	flex: none;
	width: min(100%, 520px);
	text-align: center;
}

/* Hero: full-bleed, breaking out of the boxed wrapper. */
.elementor .pers-hero {
	margin-inline: calc(50% - 50vw);
}

.elementor .pers-body > * + * {
	margin-block-start: 1.5em;
}

.elementor .pers-body img {
	width: 100%;
	height: auto;
}

/* "Ontdek meer artikels": two cards side by side, photo and text share the row. */

.elementor .pers-more-grid .list-row .pers-info {
	flex: 0 1 45%;
	min-width: 0;
	gap: var(--gap-l);
}

@media (max-width: 767px) {
	.elementor .pers-more-grid .list-row .pers-card-media,
	.elementor .pers-more-grid .list-row .pers-info {
		flex: none;
		width: 100%;
	}
}

.elementor .pers-more-grid .jet-listing-grid__item {
	min-width: 0;
}

.elementor .pers-more-grid .list-row {
	align-items: flex-start;
}

.elementor .pers-more-grid .list-row .pers-info {
	align-self: stretch;
}

.elementor .pers-more-grid .pers-quote {
	flex: none;
	width: 100%;
	text-align: start;
}

/* A press article without a pdf has no link: the button would be dead, so it is left out. */
.elementor .project-meta .tertiary-button:not(a) {
	display: none;
}

/* Meta row with a medium logo: on phones the logo takes the top line, date and link share the next. */
@media (max-width: 767px) {
	.elementor .project-meta:has(.pers-logo-img) {
		grid-template-columns: 1fr auto;
		row-gap: var(--gap-s);
	}

	.elementor .project-meta:has(.pers-logo-img) .pers-logo-img {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: center;
	}
}

/* Hero: the image sits scaled up inside its clipping frame; media-parallax.js slides it. */
.elementor .pers-hero {
	position: relative;
}

.elementor .pers-hero img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	scale: 1.15;
}

/* "Ontdek meer artikels": soft zoom of the photo on hover (the media wrapper clips it). */
.elementor .pers-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 1.2s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

@media (hover: hover) {
	.elementor .pers-more-grid .list-row:hover .pers-card-media img {
		scale: 1.06;
	}
}

/* ── Collectie slider (Home) ─────────────────────────────────────────────── */

/*
 * Full-bleed slider of wide product cards: the first card lines up with the boxed content, the rest runs off
 * the right edge. The two glass arrows sit at the top right, level with the section heading; the slot is pulled
 * up (see the column's local style) so they share the heading's line.
 */
.collectie-slider {
	--collectie-gutter: max(20px, calc((100vw - 1800px) / 2));
}

@media (max-width: 767px) {
	.collectie-slider {
		--collectie-gutter: 16px;
	}
}

.collectie-slider .jet-listing-grid__slider {
	padding-block-start: 69px;
	padding-inline-start: var(--collectie-gutter);
}

.elementor .collectie-slider .jet-listing-grid__items > .jet-listing-grid__item {
	width: min(620px, 86vw);
	padding: 0 16px 0 0;
}

/*
 * The slot is full width of the screen (breaking out of the boxed wrapper), and pulled up by the arrow row (35px)
 * plus the column gap, so the arrows share the heading's line. In CSS, so it can not get lost with a republish.
 */
.elementor .e-con:has(> .collectie-slider) {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	margin-block-start: calc(-35px - var(--gap-m, 32px));
}

.collectie-slider .jet-listing-grid__slider-icon {
	inset-block: 0 auto;
	inset-inline: auto;
}

.collectie-slider .jet-listing-grid__slider-icon.next-arrow {
	inset-inline-end: var(--collectie-gutter);
}

.collectie-slider .jet-listing-grid__slider-icon.prev-arrow {
	inset-inline-end: calc(var(--collectie-gutter) + 100px);
}

/* Product card: the photo zooms softly on hover, the whole card is one link (the name). */
.elementor .product-card {
	position: relative;
}

.elementor .product-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 1.2s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.elementor .product-card .e-heading-link-base::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

@media (hover: hover) {
	.elementor .product-card:hover .product-media img {
		scale: 1.06;
	}
}

/* ── Product single ──────────────────────────────────────────────────────── */

/* Gallery: photo fills the sticky half; arrows are small square tiles, like in the design. */
.elementor .product-gallery .jet-listing-dynamic-field__content,
.elementor .product-gallery .jet-engine-gallery-slider,
.elementor .product-gallery .slick-list,
.elementor .product-gallery .slick-track,
.elementor .product-gallery .jet-engine-gallery-slider__item {
	height: 100%;
}

.elementor .product-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elementor .product-slider {
	height: 100%;
}

.elementor .product-slider .jet-engine-arrow {
	top: 50%;
	width: 35px;
	height: 35px;
	margin-block-start: -17.5px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background-color 0.3s ease;
}

.elementor .product-slider .jet-engine-arrow:hover {
	background: rgba(0, 0, 0, 0.25);
}

.elementor .product-slider .jet-engine-arrow.prev-arrow {
	left: 20px;
}

.elementor .product-slider .jet-engine-arrow.next-arrow {
	right: 20px;
}

.elementor .product-slider .jet-engine-arrow svg {
	width: 10px;
	height: 10px;
}

.elementor .product-slider .jet-engine-arrow svg path {
	fill: var(--white);
}

/* "Terug": blurred pill with a white tile that holds a centred arrow, then the label (16px medium). */
.elementor .product-back {
	gap: 16px;
	border-radius: 4px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.elementor .product-back::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 2px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none' stroke='%23361111' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H1M4 1 1 4l3 3'/%3E%3C/svg%3E") center / 10px 8px no-repeat,
		var(--white);
}

/* Tabs: left aligned row, faded until selected, content flush with the column. */
.elementor .product-info .e-tabs-menu-base {
	justify-content: flex-start;
	gap: 0;
}

.elementor .product-info .e-tab-base:not(.e--selected) p {
	opacity: 0.5;
}

.elementor .product-info .e-tabs-content-area-base,
.elementor .product-info .e-tab-content-base {
	padding: 0;
}

.elementor .product-richtext p + p {
	margin-block-start: 1.5em;
}


/* The slider has adaptive height; inside the sticky half every slide must fill it and crop instead. */
.elementor .product-gallery .slick-list {
	height: 100% !important;
}

.elementor .product-gallery .slick-slide,
.elementor .product-gallery .slick-slide > div,
.elementor .product-gallery .jet-engine-gallery-slider__item,
.elementor .product-gallery .jet-engine-gallery-slider__item > img {
	height: 100%;
}

.elementor .product-gallery .e-con,
.elementor .product-gallery .jet-engine-gallery-slider .swiper-wrapper,
.elementor .product-gallery .jet-engine-gallery-slider__item,
.elementor .product-gallery .jet-engine-gallery-slider__item-wrap,
.elementor .product-gallery .jet-engine-gallery-slider__item-img {
	height: 100%;
}

/* ── Home polish ─────────────────────────────────────────────────────────── */

/*
 * Aanpak cards: while a card is still revealing, the reveal rule replaces its transition list, so hovering
 * early jumped straight to the hover state. Keep the hover transitions in the list (no delay on those).
 */
html.js-reveal .aanpak-card.reveal-item:not(.is-done) {
	transition:
		opacity var(--reveal-duration) var(--reveal-ease),
		transform calc(var(--reveal-duration) * 1.1) var(--reveal-ease),
		min-height 0.8s var(--reveal-ease),
		background-color 0.5s ease;
	transition-delay:
		calc(var(--reveal-i, 0) * var(--reveal-stagger)),
		calc(var(--reveal-i, 0) * var(--reveal-stagger)),
		0s,
		0s;
}

/* News rows: the photo zooms softly inside its frame on hover. */
.elementor .pers-grid .pers-frame img {
	display: block;
	transition: scale 1.2s var(--reveal-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

@media (hover: hover) {
	.elementor .pers-grid .list-row:hover .pers-frame img {
		scale: 1.06;
	}
}

/* Product cards: the stretched link must cover the whole card, so no positioned ancestor in between. */
.elementor .product-card .e-con {
	position: static;
}

/* Collectie arrows: straight arrows, dark on the beige tiles (as in the design). */
.collectie-slider .jet-listing-grid__slider-icon {
	color: var(--primary);
}

.collectie-slider .jet-listing-grid__slider-icon svg,
.elementor .product-slider .jet-engine-arrow svg {
	display: none;
}

.collectie-slider .jet-listing-grid__slider-icon::before,
.elementor .product-slider .jet-engine-arrow::before {
	content: "";
	flex: none;
	width: 16px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6H1M6 1 1 6l5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6H1M6 1 1 6l5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Product gallery arrows: same arrow, white on the tinted tile. */
.elementor .product-slider .jet-engine-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
}

.elementor .product-slider .jet-engine-arrow.next-arrow::before {
	transform: scaleX(-1);
}

/* Background photos with parallax (media-parallax.js): scaled up inside their clipping section. */
.elementor img.parallax-bg {
	scale: 1.15;
}

/* ── Shop overview ───────────────────────────────────────────────────────── */

/* Three columns with the design's 16px gutter and 96px between rows; listing gutters reset. */
.elementor .shop-grid .jet-listing-grid__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 96px 16px;
	width: 100%;
	margin: 0;
}

.elementor .shop-grid .jet-listing-grid__item {
	width: auto;
	max-width: none;
	padding: 0;
}

/* In the grid the photo follows the card's width (480 x 605 in the design) instead of the viewport height. */
.elementor .shop-grid .product-media {
	height: auto;
	aspect-ratio: 480 / 605;
}

@media (max-width: 1023px) {
	.elementor .shop-grid .jet-listing-grid__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 64px 16px;
	}
}

@media (max-width: 767px) {
	.elementor .shop-grid .jet-listing-grid__items {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}
}

/* Product tabs: brand hover (no grey fill, no blue tap/focus colour). */
.elementor .product-info .e-tab-base {
	-webkit-tap-highlight-color: transparent;
	background-color: transparent;
	transition: border-color 0.4s ease;
}

.elementor .product-info .e-tab-base p {
	transition: opacity 0.4s ease;
}

@media (hover: hover) {
	.elementor .product-info .e-tab-base:not(.e--selected):hover {
		background-color: transparent;
		border-block-end-color: color-mix(in srgb, var(--primary) 40%, transparent);
	}

	.elementor .product-info .e-tab-base:not(.e--selected):hover p {
		opacity: 1;
	}
}

.elementor .product-info .e-tab-base:focus,
.elementor .product-info .e-tab-base:focus-visible {
	outline: none;
}

/* Keyboard focus: same cue as the selected tab, a full-strength underline (no box). */
.elementor .product-info .e-tab-base:focus-visible {
	border-block-end-color: var(--primary);
}

/*
 * Right column of the product page: the content is capped at 656px on big screens and stays centred in the
 * half (a little closer to the photo, like the 80px / 20px padding it has at 1512px). Below ~1430px the class
 * padding applies as before.
 */
@media (min-width: 1432px) {
	.elementor .product-info {
		--product-side: calc((50vw - 656px) / 2);
		padding-inline-start: max(80px, calc(var(--product-side) + 30px));
		padding-inline-end: max(20px, calc(var(--product-side) - 30px));
	}
}

/* Product gallery arrows: the glyph is smaller than its tile (35px), as in the design. */
.elementor .product-slider .jet-engine-arrow::before {
	width: 14px;
	height: 10px;
}

/* ── Grow-on-scroll image (project detail) ───────────────────────────────── */

/*
 * One photo: small (57%, the old hero width) at the top of the page, full size once scrolled to.
 * grow.js writes --grow (0..1). Without JS or with reduced motion it is simply the full-size image.
 */
.elementor .grow-media {
	--grow: 1;
	--grow-from: 0.566;
	scale: calc(var(--grow-from) + (1 - var(--grow-from)) * var(--grow));
}

@media (max-width: 767px) {
	.elementor .grow-media {
		--grow-from: 0.78;
	}
}

html.js-reveal .elementor .grow-media {
	--grow: 0;
}

/* Grow from the top centre; wins over the curtain's start state, which uses the bottom. */
html .elementor .grow-media {
	transform-origin: 50% 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	html.js-reveal .elementor .grow-media {
		--grow: 1;
	}
}

/* Eased by the browser: the fade of a side photo follows --hover, while --near (set by the script) stays instant. */
@property --hover {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

/* ── Projecten page: carousel + filter ───────────────────────────────────── */

/*
 * The listing grid becomes one endless row (project-carousel.js positions every item with a transform).
 * Sizes follow the design (308px high on an 866px-high viewport, photos 232 or 409 wide, 38px gap).
 */
.project-carousel {
	--carousel-h: clamp(240px, 44svh, 560px);
	--carousel-gap: clamp(16px, 2.55vw, 48px);
	position: relative;
	overflow-x: clip;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	cursor: grab;
	outline: none;
}

.project-carousel.is-dragging {
	cursor: grabbing;
}

.project-carousel .jet-listing-grid,
.project-carousel .jet-listing-grid__items {
	display: block;
	position: relative;
	width: 100%;
	height: var(--carousel-h);
	margin: 0;
}

/* No flash of stacked items before the script has laid them out. */
html.js-reveal .project-carousel:not(.is-ready) .jet-listing-grid__items {
	opacity: 0;
}

.project-carousel .jet-listing-grid__items {
	transition: opacity 0.6s ease;
}

.project-carousel .jet-listing-grid__item {
	position: absolute;
	inset: 0 auto auto 0;
	width: max-content;
	margin: 0;
	padding: 0;
	opacity: calc(0.62 + 0.38 * max(var(--near, 0), var(--hover, 0)));
	transition: --hover 1.8s cubic-bezier(0.45, 0, 0.25, 1); /* leaving: slow and soft (only the part above --near is visible) */
	will-change: transform;
}

.project-carousel .carousel-card {
	display: block;
	height: var(--carousel-h);
}

.project-carousel .carousel-card a {
	display: block;
	cursor: pointer;
}

.project-carousel.is-dragging .carousel-card a {
	cursor: grabbing;
}

/* Every project is a link: the one under the pointer lights up. */
@media (hover: hover) {
	.project-carousel:not(.is-dragging) .jet-listing-grid__item:hover {
		--hover: 1;
		transition-duration: 0.6s; /* arriving: quicker */
	}
}

.project-carousel .carousel-photo {
	display: block;
	height: var(--carousel-h);
	width: auto;
	min-width: calc(var(--carousel-h) * 0.753);
	max-width: calc(var(--carousel-h) * 1.327);
	object-fit: cover;
	-webkit-user-drag: none;
}

/* Glass edges: straight bands with a blur that fades out towards the middle. */
.project-carousel::before,
.project-carousel::after {
	content: "";
	position: absolute;
	top: -47%;
	bottom: -47%;
	z-index: 3;
	width: clamp(48px, 6.5vw, 98px);
	pointer-events: none;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.project-carousel::before {
	left: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
	-webkit-mask-image: linear-gradient(to right, #000 35%, transparent);
	mask-image: linear-gradient(to right, #000 35%, transparent);
}

.project-carousel::after {
	right: 0;
	background: linear-gradient(to left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
	-webkit-mask-image: linear-gradient(to left, #000 35%, transparent);
	mask-image: linear-gradient(to left, #000 35%, transparent);
}

/* Filter: a beige pill with one white "tab" for the active category. */
.project-filter {
	display: flex;
	justify-content: center;
}

.project-filter .jet-smart-filters-radio {
	display: flex;
	justify-content: center;
}

.elementor .project-filter .jet-radio-list-wrapper {
	margin: 0;
}

.project-filter .jet-radio-list-wrapper fieldset {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 4px;
	border: 0;
	border-radius: 8px;
	background: var(--tertiary-500-50, #f1e4d3);
}

.elementor .project-filter .jet-radio-list__row {
	margin: 0 !important; /* the plugin's own rule is more specific */
	padding: 0;
}

.project-filter .jet-radio-list__item {
	display: block;
	margin: 0;
	cursor: pointer;
}

.project-filter .jet-radio-list__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.project-filter .jet-radio-list__decorator {
	display: none;
}

.project-filter .jet-radio-list__button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 10px 12px;
	border-radius: 4px;
	background: transparent;
	color: var(--primary);
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.project-filter .jet-radio-list__label {
	padding: 0;
	font-size: inherit;
	line-height: 1;
	color: inherit;
}

.project-filter .jet-radio-list__input:checked + .jet-radio-list__button {
	background: var(--white);
}

@media (hover: hover) {
	.project-filter .jet-radio-list__input:not(:checked) + .jet-radio-list__button:hover {
		background: color-mix(in srgb, var(--white) 45%, transparent);
	}
}

.project-filter .jet-radio-list__input:focus-visible + .jet-radio-list__button {
	outline: 1px solid var(--primary);
	outline-offset: 2px;
}

/* Arrows next to the tabs (same springy buttons as the other sliders); the tabs stay centred. */
.page-id-2808 .elementor .tile-arrow {
	width: 64px;
	background-color: #f1e4d3; /* same beige as the tab pill */
}

.page-id-2808 .elementor .tile-arrow:is(:hover, :focus-visible) {
	background-color: var(--white);
}

/* The glass edge of the row would blur the right-hand arrow. */
.page-id-2808 .elementor .dev-arrows {
	z-index: 5;
}

/* Zoom on hover, as on the other cards: the photo grows inside its own frame. */
.project-carousel .carousel-card a {
	overflow: hidden;
	border-radius: var(--radius-xs);
}

.project-carousel .carousel-photo {
	transition: scale 1.2s var(--reveal-ease, ease);
}

@media (hover: hover) {
	.project-carousel:not(.is-dragging) .jet-listing-grid__item:hover .carousel-photo {
		scale: 1.05;
	}
}

/* Phones: no glass edges, the photos simply run off the screen. */
@media (max-width: 767px) {
	.project-carousel::before,
	.project-carousel::after {
		display: none;
	}
}

/* ── Archief page: infinite draggable grid ───────────────────────────────── */

/*
 * The listing grid becomes an endless staggered grid of square cells (394px at 1512px wide, as in the design);
 * infinite-grid.js positions every cell. The page holds exactly one screen and does not scroll.
 */
.archive-grid {
	--archive-tile: clamp(240px, 26.04vw, 520px);
	position: absolute;
	inset: 0;
	overflow: hidden;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: grab;
	outline: none;
}

.archive-grid.is-dragging {
	cursor: grabbing;
}

.archive-grid .jet-listing-grid,
.archive-grid .jet-listing-grid__items {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
	width: 100%;
	height: 100%;
}

html.js-reveal .archive-grid:not(.is-ready) .jet-listing-grid__items {
	opacity: 0;
}

.archive-grid .jet-listing-grid__items {
	transition: opacity 0.8s ease;
}

.archive-grid .jet-listing-grid__item {
	position: absolute;
	inset: 0 auto auto 0;
	width: var(--archive-tile);
	height: var(--archive-tile);
	margin: 0;
	padding: 0;
	will-change: transform;
}

.archive-grid .archive-tile {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

/* The photo is 65.5% of its cell (258 of 394 in the design). */
.archive-grid .archive-photo {
	display: block;
	width: 65.5%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	-webkit-user-drag: none;
}

/* Glass band under the header, like the design. */
.archive-page::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 3;
	height: clamp(72px, 9vw, 130px);
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
	mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

/* Archief is a single full-screen grid: no footer, no page scroll. */
.is-archive-page .site-footer,
.is-archive-page .elementor-location-footer {
	display: none;
}

.is-archive-page {
	overflow: hidden;
}

/* ── Over page ───────────────────────────────────────────────────────────── */

/* "Dit was nooit het plan": the film still is darkened, the label sits in the middle. */
.over-video img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.over-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.over-video .over-play {
	transform: translate(-50%, -50%);
}

/* Book: the photo is a parallax background, a gradient darkens it towards the bottom. */
.over-book::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.55));
}

.elementor .over-book :is(h2, p, span, a) {
	color: var(--white);
}

.elementor .over-book .accent-1 {
	color: rgba(255, 255, 255, 0.7);
}

.over-book .tertiary-button {
	color: var(--white);
	border-color: var(--white);
}

.over-book .tertiary-button :is(svg, img) {
	filter: brightness(0) invert(1);
}

/*
 * Capabilities: stacking cards (976px wide, as in the design). Sticky does the sliding; each card sits a little
 * lower than the one before, so a strip of the earlier cards stays visible. stack.js writes --stack (how far the
 * next card covers this one) and --enter (how far this card has arrived), both 0..1; without the script both
 * keep their defaults and the cards are shown flat and complete.
 */
.elementor .cap-stack {
	max-width: 976px;
	margin-inline: auto;
}

.cap-card {
	--stack: 0;
	--enter: 1;
	--rise: 0;
	/* Starts a little lower (--cap-lift, keep in sync with LIFT in stack.js) and shrinks that to nothing on arrival. */
	--cap-lift: 22svh;
	transform: perspective(1400px) translate3d(0, calc(var(--rise) * var(--cap-lift) - 44px * var(--stack)), 0) scale(calc(1 - 0.12 * var(--stack))) rotateX(calc(6deg * var(--stack)));
	filter: blur(calc(6px * var(--stack)));
	opacity: calc(1 - var(--stack));
	border-radius: calc(12px * var(--stack));
	box-shadow: 0 -18px 40px rgba(0, 0, 0, calc(0.12 * var(--enter)));
}

/* Rest in the vertical middle of the screen (stack.js refines this to the real card height). */
.elementor .cap-stack .cap-card {
	top: max(88px, calc((100svh - 533px) / 2));
}

/*
 * After the last card the stack gets some extra room, so that card stays centred for a while before the section
 * scrolls on (a sticky card can only travel as far as its container reaches).
 */
.elementor .cap-stack::after {
	content: "";
	flex: none;
	height: max(0px, calc(32svh - 128px));
}

.cap-card :is(p) {
	margin: 0;
}

/* Content settling in while the card arrives. */
.cap-card .cap-top {
	transform: translate3d(0, calc((1 - var(--enter)) * 28px), 0);
	opacity: clamp(0, calc(var(--enter) * 2.4), 1);
}

.cap-card .cap-icon {
	transform: rotate(calc((1 - var(--enter)) * -70deg)) scale(calc(0.7 + 0.3 * var(--enter)));
}

.cap-card .cap-text {
	transform: translate3d(0, calc((1 - var(--enter)) * 44px), 0);
	opacity: clamp(0, calc(var(--enter) * 2 - 0.4), 1);
}

.cap-card .cap-item {
	--i: 0;
	transform: translate3d(calc((1 - var(--enter)) * 24px), 0, 0);
	opacity: clamp(0, calc(var(--enter) * 2.4 - 0.5 - var(--i) * 0.16), 1);
}

.cap-card .cap-item:nth-child(2) {
	--i: 1;
}

.cap-card .cap-item:nth-child(3) {
	--i: 2;
}

.cap-card .cap-item:nth-child(4) {
	--i: 3;
}

.cap-card .cap-item:nth-child(5) {
	--i: 4;
}

.cap-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* The svg widget fills shapes with currentColor; these icons are outlines. */
.cap-icon svg * {
	fill: none;
	stroke: var(--white);
}

/* Projectontwikkeling: snapping row of photos with two glass arrow tiles. */
.scroller {
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.scroller::-webkit-scrollbar {
	display: none;
}

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

.tile-arrow {
	font-size: 0;
	line-height: 0;
}

.tile-arrow::before {
	content: "";
	width: 16px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6H1M6 1 1 6l5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6H1M6 1 1 6l5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tile-arrow + .tile-arrow::before {
	transform: scaleX(-1);
}

/* The dev section's head runs full width, the arrows sit right above the row (right aligned in the box). */
.dev-arrows {
	width: min(100%, 1472px);
	margin-inline: auto;
}

/* Collectie teaser: one product per slide, glass arrows on the photo. */
.over-collectie-slider {
	--w: min(604px, 100%);
}

.over-collectie-slider .jet-listing-grid__slider {
	position: relative;
}

.elementor .over-collectie-slider .jet-listing-grid__items > .jet-listing-grid__item {
	width: 100%;
	padding: 0;
}

/*
 * The photo keeps its portrait ratio (604 x 758). When the screen is not tall enough for the full card, the whole card
 * (photo, name and price) gets narrower instead of the photo being cropped, and stays at the right of its column.
 */
.over-collectie-slider {
	width: min(100%, max(300px, calc((100svh - 270px) * 0.7968)));
	margin-inline-start: auto;
}

.over-collectie-slider .product-media {
	height: auto;
	aspect-ratio: 604 / 758;
}

@media (max-width: 1023px) {
	.over-collectie-slider {
		width: 100%;
		max-width: 604px;
		margin-inline: auto;
	}
}

.over-collectie-slider .jet-listing-grid__slider-icon {
	position: absolute;
	inset-block: auto;
	top: calc(50% - 40px);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	margin: 0;
	padding: 0;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.over-collectie-slider .jet-listing-grid__slider-icon:hover {
	background: rgba(0, 0, 0, 0.25);
}

.over-collectie-slider .jet-listing-grid__slider-icon.prev-arrow {
	inset-inline: 16px auto;
}

.over-collectie-slider .jet-listing-grid__slider-icon.next-arrow {
	inset-inline: auto 16px;
	transform: scaleX(-1);
}

.over-collectie-slider .jet-listing-grid__slider-icon svg {
	display: none;
}

.over-collectie-slider .jet-listing-grid__slider-icon::before {
	content: "";
	width: 14px;
	height: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6H1M6 1 1 6l5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6H1M6 1 1 6l5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Team: three cards, the hovered one gets the beige fill (the design shows the first card in that state). */
.elementor .team-grid .jet-listing-grid__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	margin: 0;
}

.elementor .team-grid .jet-listing-grid__item {
	width: auto;
	max-width: none;
	padding: 0;
}

.team-card {
	cursor: pointer;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	transition: background-color 0.45s var(--reveal-ease, ease);
}

.team-card .team-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 1.2s var(--reveal-ease, ease);
}

@media (hover: hover) {
	.team-card:hover {
		background-color: var(--tertiary);
	}

	.team-card:hover .team-media img {
		scale: 1.04;
	}
}

.team-card:focus-visible {
	outline: 1px solid var(--primary);
	outline-offset: 4px;
}

.team-card p {
	margin: 0;
}

/* Name and role line up with the photo's left edge and step in a little on hover. */
.elementor .team-card .team-info {
	align-items: flex-start;
	padding-inline: 0;
	text-align: left;
	transition: translate 0.6s var(--reveal-ease, ease);
}

@media (hover: hover) {
	.elementor .team-card:hover .team-info {
		translate: 12px 0;
	}
}

@media (max-width: 1023px) {
	.elementor .team-grid .jet-listing-grid__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.elementor .team-grid .jet-listing-grid__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * JetPopup limits the page to one screen height while a popup is open, which throws the scroll position back to
 * the top (the page behind has to stay where it was). Scrolling is locked by Lenis / overflow instead.
 */
body.jet-popup-prevent-scroll {
	max-height: none;
}

/*
 * Team popup (JetPopup "Teamlid popup", opened from the team card of listing item "Teamlid kaart"): a panel that
 * slides in from the left over a dimmed, blurred page. The content is built in Elementor inside the popup; the
 * `:has()` selectors only touch the popup that holds the team content.
 */
.jet-popup:has(.team-pop-content) .jet-popup__overlay {
	background: rgba(54, 17, 17, 0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.jet-popup:has(.team-pop-content) .jet-popup__container {
	width: min(100%, max(560px, 55.7vw)) !important; /* the popup's own inline width rule prints later */
	height: 100%;
	background: var(--cream);
	color: var(--primary);
}

/* The inner box is the one scroller (as in JetPopup itself); the content grows with the text and sits in the middle. */
.jet-popup:has(.team-pop-content) .jet-popup__container-inner {
	height: 100%;
	padding: 64px 67px 64px 24px;
	box-sizing: border-box;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.jet-popup:has(.team-pop-content) .jet-popup__container-content {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	padding: 0;
}

/* "Sluiten" + dark square with a cross, top right of the panel. */
.jet-popup:has(.team-pop-content) .jet-popup__close-button {
	top: 66px;
	right: 67px;
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	height: auto;
	padding: 0 0 8px;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: none;
	color: var(--primary);
	font: inherit;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
}

.jet-popup:has(.team-pop-content) .jet-popup__close-button::before {
	content: 'Sluiten';
	font-size: 16px;
}

.jet-popup:has(.team-pop-content) .jet-popup__close-button .svg-icon {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	padding: 3px;
	border-radius: 3px;
	background: var(--primary);
	color: var(--cream);
}

.jet-popup:has(.team-pop-content) .team-pop-content {
	gap: 24px;
}

/* Centred, but never cut off at the top when the content is taller than the screen. */
.jet-popup:has(.team-pop-content) .jet-popup__container-content > .elementor {
	margin-block: auto;
}

.jet-popup:has(.team-pop-content) .team-pop-photo {
	height: auto;
}

.jet-popup:has(.team-pop-content) .team-pop-bio p {
	margin: 0;
}

.jet-popup:has(.team-pop-content) .team-pop-bio p + p {
	margin-block-start: 16px;
}

@media (max-width: 767px) {
	.jet-popup:has(.team-pop-content) .jet-popup__container-inner {
		padding: 112px 16px 40px;
	}

	.jet-popup:has(.team-pop-content) .jet-popup__close-button {
		top: 28px;
		right: 16px;
	}

	.jet-popup:has(.team-pop-content) .team-pop-name {
		font-size: 32px;
	}
}

@media (max-width: 1023px) {
	.elementor .over-top {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Over intro: heading and text are two equal columns (the text starts at the middle, as in the design). */
@media (min-width: 1024px) {
	.elementor .over-top > :first-child {
		flex: 0 0 calc(50% - 8px);
		min-width: 0;
	}

	.elementor .over-top > :last-child {
		flex: 1 1 0;
		min-width: 0;
	}
}

.elementor .over-top {
	justify-content: flex-start;
}

/* ── Product request form (JetFormBuilder, form "Aanvraag product") ───────── */

/*
 * Underlined fields in two columns, as in the design. The labels are only for screen readers (the placeholders
 * show the same text); the consent line keeps its text next to the checkbox.
 */
:is(.product-jfb, .contact-jfb) form.jet-form-builder {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px 16px;
	width: 100%;
	margin: 0;
}

:is(.product-jfb, .contact-jfb) .jet-form-builder-row {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
}

:is(.product-jfb, .contact-jfb) .jet-form-builder-row:has(.jfb-half) {
	grid-column: auto;
}

:is(.product-jfb, .contact-jfb) .jet-form-builder-row .jet-form-builder__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:is(.product-jfb, .contact-jfb) :is(input.jet-form-builder__field, select.jet-form-builder__field, textarea.jet-form-builder__field):not([type="checkbox"]) {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 14px 0;
	font: inherit;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--primary);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0;
	box-shadow: none;
	outline: none;
	transition: border-color 0.3s ease;
}

:is(.product-jfb, .contact-jfb) textarea.jet-form-builder__field {
	min-height: 112px;
	resize: none;
}

:is(.product-jfb, .contact-jfb) :is(input, select, textarea).jet-form-builder__field:focus {
	border-bottom-color: var(--primary);
}

:is(.product-jfb, .contact-jfb) .jet-form-builder__field::placeholder {
	color: rgba(0, 0, 0, 0.4);
}

:is(.product-jfb, .contact-jfb) .jet-form-builder__field.is-invalid,
:is(.product-jfb, .contact-jfb) .jet-form-builder__field:invalid:focus {
	border-bottom-color: #a33a2f;
}

/* Consent: a small square checkbox and the sentence next to it. */
:is(.product-jfb, .contact-jfb) .jet-form-builder__field-label.for-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--primary);
	cursor: pointer;
}

:is(.product-jfb, .contact-jfb) input[type="checkbox"].jet-form-builder__field {
	position: static;
	flex: none;
	width: 14px;
	height: 14px;
	margin: 0;
	opacity: 1;
	clip: auto;
	accent-color: var(--primary);
}

:is(.product-jfb, .contact-jfb) .jet-form-builder__field-label a {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: inherit;
}

/* Submit: the full-width dark bar, label top left, arrow top right. */
:is(.product-jfb, .contact-jfb) .jet-form-builder__submit-wrap {
	width: 100%;
	margin: 0;
}

:is(.product-jfb, .contact-jfb) .jet-form-builder__submit {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	min-height: 76px;
	margin: 0;
	padding: 12px 16px;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--white);
	background: var(--primary);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

:is(.product-jfb, .contact-jfb) .jet-form-builder__submit::after {
	content: "\2192";
	font-size: 14px;
	line-height: 1;
}

:is(.product-jfb, .contact-jfb) .jet-form-builder__submit:hover:not(:disabled) {
	background: var(--primary-700);
}

:is(.product-jfb, .contact-jfb) .jet-form-builder__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* Messages under the form. */
:is(.product-jfb, .contact-jfb) .jet-form-builder-messages-wrap {
	grid-column: 1 / -1;
	margin: 0;
}

:is(.product-jfb, .contact-jfb) .jet-form-builder-message {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--primary);
	background: transparent;
	border: 0;
}

:is(.product-jfb, .contact-jfb) .jet-form-builder-message--error,
:is(.product-jfb, .contact-jfb) .jet-form-builder-message--validation-failed {
	color: #a33a2f;
}

:is(.product-jfb, .contact-jfb) .jet-form-builder__field-error {
	margin-top: 6px;
	font-size: 12px;
	color: #a33a2f;
}

@media (max-width: 767px) {
	:is(.product-jfb, .contact-jfb) form.jet-form-builder {
		grid-template-columns: minmax(0, 1fr);
	}

	:is(.product-jfb, .contact-jfb) .jet-form-builder-row:has(.jfb-half) {
		grid-column: 1 / -1;
	}
}

/* The consent sentence (with its links) is one inline text next to the checkbox. */
:is(.product-jfb, .contact-jfb) .jet-form-builder__field-label.for-checkbox > span {
	display: block;
	flex: 1;
	margin: 0;
	padding: 0;
}

:is(.product-jfb, .contact-jfb) .jet-form-builder__field-label.for-checkbox > span a {
	display: inline;
	margin: 0;
	padding: 0;
}

/* The section heading rises a little faster while the first card arrives, so the two keep moving together
   (stack.js writes --cap-p on the wrapper). It does not fade. */
.cap-head {
	transform: translate3d(0, calc(var(--cap-p, 0) * -56px), 0);
}

/* Projectontwikkeling: the endless row runs from screen edge to screen edge (infinite-scroller.js). */
.elementor .e-con:has(> .scroller) {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.scroller.is-ready {
	position: relative;
	overflow: hidden;
	scroll-snap-type: none;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}

.scroller.is-ready.is-dragging {
	cursor: grabbing;
}

.scroller.is-ready > * {
	position: absolute;
	top: 0;
	left: 0;
	flex: none;
	scroll-snap-align: none;
	will-change: transform;
}

/* Same arrow motion as the reacties slider: a springy nudge in the direction of the arrow. */
.elementor .dev-arrows .tile-arrow {
	transition: background-color 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.elementor .dev-arrows .tile-arrow:first-child:hover {
	transform: translateX(-3px);
}

.elementor .dev-arrows .tile-arrow:last-child:hover {
	transform: translateX(3px);
}

/* ── Contact page ──────────────────────────────────────────────────────── */

/* Request type: a small segmented control (the forms go into the tab panels). */
.elementor .contact-tabs .e-tabs-menu-base {
	display: inline-flex;
	justify-content: flex-start;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	padding: 4px;
	border-radius: 8px;
	background-color: #f1e4d3;
}

.elementor .contact-tabs .e-tab-base {
	width: auto;
	padding: 12px;
	border: 0;
	border-radius: 4px;
	background-color: transparent;
	color: var(--primary);
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.4s var(--reveal-ease, ease);
}

.elementor .contact-tabs .e-tab-base.e--selected {
	background-color: var(--white, #fff);
}

@media (hover: hover) {
	.elementor .contact-tabs .e-tab-base:not(.e--selected):hover {
		background-color: rgba(255, 255, 255, 0.5);
	}
}

.elementor .contact-tabs .e-tab-base:focus,
.elementor .contact-tabs .e-tab-base:focus-visible {
	outline: none;
}

.elementor .contact-tabs .e-tab-base:focus-visible {
	box-shadow: inset 0 0 0 1px var(--primary);
}

.elementor .contact-tabs .e-tabs-content-area-base,
.elementor .contact-tabs .e-tab-content-base {
	padding: 0;
}

/* Contact details next to the portrait. */
.elementor .contact-links .text-link {
	color: var(--primary);
}

/* ── Contact forms (JetFormBuilder: projectaanvraag, partnership, andere vraag) ─────────────────────────── */

/* Conditional fields (e.g. "Architect" for a renovation) take a grid cell just like the other fields. */
.contact-jfb .jet-form-builder__conditional {
	grid-column: 1 / -1;
	margin: 0;
}

.contact-jfb .jet-form-builder__conditional:has(.jfb-half) {
	grid-column: auto;
}

/* Fields are 16px light, as in the design. */
.contact-jfb .jet-form-builder-row :is(input, select, textarea).jet-form-builder__field:not([type="checkbox"]):not([type="file"]) {
	font-size: 16px;
	line-height: 1.5;
}

/* Dropdowns: a small chevron on the right; the placeholder option looks like a placeholder. */
.contact-jfb .jet-form-builder-row select.jet-form-builder__field:not([type="checkbox"]) {
	padding-inline-end: 24px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23361111' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") right 2px center / 12px 12px no-repeat;
}

.contact-jfb .jet-form-builder-row select.jet-form-builder__field:has(option:checked:disabled) {
	color: rgba(0, 0, 0, 0.4);
}

.contact-jfb select.jet-form-builder__field option {
	color: var(--primary);
}

/* The date range field is read-only text that opens the calendar. */
.contact-jfb input.jfb-range {
	cursor: pointer;
}

/* File upload: the label above a dashed box; the real input covers the box. */
.contact-jfb .jet-form-builder-row.field-type-media-field {
	display: block;
}

.contact-jfb .field-type-media-field .jet-form-builder__label {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 12px;
	overflow: visible;
	clip: auto;
	font-size: 14px;
	font-weight: 300;
	color: rgba(0, 0, 0, 0.75);
}

.contact-jfb .jet-form-builder-file-upload {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	width: 100%;
	max-width: none;
	margin: 0;
}

/* The (empty) list of chosen files takes no room until there are files. */
.contact-jfb .jet-form-builder-file-upload__content,
.contact-jfb .jet-form-builder-file-upload__files {
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
}

.contact-jfb .jet-form-builder-file-upload__files:not(:empty) {
	margin-bottom: 12px;
}

.contact-jfb .jet-form-builder-file-upload__fields {
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	height: 70px;
	padding: 12px;
	box-sizing: border-box;
	border: 1px dashed var(--primary);
	border-radius: 4px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: var(--primary);
	transition: background-color 0.3s ease;
}

.contact-jfb .jet-form-builder-file-upload__fields::before {
	content: "Upload bestanden";
}

.contact-jfb .jet-form-builder-file-upload__fields::after {
	content: "";
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23361111' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 11V2M4.5 5.5 8 2l3.5 3.5M2 10.5v3h12v-3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contact-jfb .jet-form-builder-file-upload__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

@media (hover: hover) {
	.contact-jfb .jet-form-builder-file-upload__fields:hover {
		background-color: rgba(54, 17, 17, 0.05);
	}
}

.contact-jfb .jet-form-builder-file-upload__message {
	margin-top: 8px;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.5);
}

/* Submit bar: 70px, softly rounded, as in the design. */
.contact-jfb .jet-form-builder__submit {
	min-height: 70px;
	padding: 12px;
	border-radius: 4px;
}

/* Calendar (Flatpickr) in the brand colours. */
.flatpickr-calendar {
	font-family: inherit;
	color: var(--primary);
	background: var(--cream);
	border-radius: 4px;
	box-shadow: 0 12px 40px rgba(54, 17, 17, 0.15);
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
	display: none;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
	color: var(--primary);
	fill: var(--primary);
}

.flatpickr-day {
	color: var(--primary);
	border-radius: 4px;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: rgba(54, 17, 17, 0.3);
}

.flatpickr-day.today {
	border-color: var(--primary);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
	color: var(--white);
	background: var(--primary);
	border-color: var(--primary);
}

.flatpickr-day.inRange,
.flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange) {
	background: var(--tertiary);
	border-color: var(--tertiary);
	box-shadow: -5px 0 0 var(--tertiary), 5px 0 0 var(--tertiary);
}

.flatpickr-day.inRange:hover {
	box-shadow: -5px 0 0 var(--tertiary), 5px 0 0 var(--tertiary);
}

/* ── Legal pages (privacybeleid, later cookiebeleid and algemene voorwaarden) ───────────────────────── */

/* Long text next to the sticky title: calm headings, comfortable line length, brand links. */
.elementor .legal-body {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.75);
}

.elementor .legal-body h2 {
	margin: 48px 0 16px;
	font-size: 28px;
	font-weight: 300;
	line-height: 1.15;
	color: var(--primary);
}

.elementor .legal-body > h2:first-child {
	margin-block-start: 0;
}

.elementor .legal-body p,
.elementor .legal-body ul {
	margin: 0 0 16px;
}

.elementor .legal-body ul {
	padding-inline-start: 20px;
	list-style: disc;
}

.elementor .legal-body li {
	margin-block-end: 12px;
}

.elementor .legal-body strong {
	font-weight: 500;
	color: var(--primary);
}

.elementor .legal-body a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Complianz cookie statement ([cmplz-document]) in the same look. */
.elementor .legal-body h3 {
	margin: 32px 0 12px;
	font-size: 22px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--primary);
}

.elementor .legal-body h4 {
	margin: 20px 0 6px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--primary);
}

.elementor .legal-body h5 {
	margin: 12px 0 2px;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
}

.elementor .legal-body em {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
}

/* List of placed cookies: one quiet row per service that opens on click. */
.elementor .legal-body .cmplz-dropdown {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.elementor .legal-body .cmplz-dropdown summary {
	display: flex;
	align-items: center;
	padding: 16px 0;
	cursor: pointer;
	list-style: none;
}

.elementor .legal-body .cmplz-dropdown summary::-webkit-details-marker {
	display: none;
}

.elementor .legal-body .cmplz-dropdown summary > div {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
}

.elementor .legal-body .cmplz-dropdown summary h3 {
	margin: 0;
	font-size: 20px;
}

.elementor .legal-body .cmplz-dropdown summary p {
	margin: 0;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.5);
}

.elementor .legal-body .cmplz-dropdown summary::after {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23361111' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: rotate 0.3s ease;
}

.elementor .legal-body .cmplz-dropdown[open] summary::after {
	rotate: 180deg;
}

.elementor .legal-body .cmplz-dropdown > div {
	padding-bottom: 16px;
	font-size: 14px;
}

.elementor .legal-body .cmplz-dropdown > div p {
	margin-bottom: 8px;
}

/* "Manage your consent": a row per category with its switch. */
.elementor .legal-body .cmplz-categories {
	margin-block: 16px;
}

.elementor .legal-body .cmplz-category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.elementor .legal-body .cmplz-category-title {
	margin-inline-end: auto;
	font-weight: 500;
	color: var(--primary);
}

.elementor .legal-body .cmplz-always-active,
.elementor .legal-body .cmplz-banner-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.elementor .legal-body .cmplz-category input[type="checkbox"] {
	accent-color: var(--primary);
}

.elementor .legal-body .cmplz-category-toggle {
	padding: 0;
	line-height: 0;
	color: var(--primary);
	background: none;
	border: 0;
	cursor: pointer;
}

.elementor .legal-body .cmplz-description {
	padding-block: 12px;
	font-size: 14px;
}

.elementor .legal-body .cmplz-description[hidden] {
	display: none;
}

.elementor .legal-body .cmplz-categories,
.elementor .legal-body .cmplz-category {
	width: 100%;
}

.elementor .legal-body .cmplz-category-toggle svg {
	width: 12px;
	height: 12px;
}

/* ── Bedankt pages ─────────────────────────────────────────────────────── */

/* One dark full screen with the brand pattern (same image as the footer), no footer below it. */
.elementor .thanks-top {
	background-image: url(/wp-content/uploads/2026/09/footer-bg.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.is-thanks-page .elementor-location-footer {
	display: none;
}

.elementor .thanks-box .e-paragraph-base {
	max-width: 36ch;
}

/* ── Home: "Verschenen in" – the logo tiles of the design, with the magazine title as text ───────── */
.elementor .elementor-element-5f2f55ed {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	max-width: 624px; /* as in the design: four 150px tiles per row */
}

.elementor .elementor-element-5f2f55ed .logo-tile {
	height: 78px;
	aspect-ratio: auto;
	text-align: center;
}

.elementor .elementor-element-5f2f55ed .logo-tile > * {
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.1;
	color: var(--primary);
}

@media (max-width: 767px) {
	.elementor .elementor-element-5f2f55ed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Pers detail: long article text ─────────────────────────────────────────────────────────────── */
.elementor .pers-body h2 {
	margin: 40px 0 12px;
	font-size: 28px;
	font-weight: 300;
	line-height: 1.15;
}

.elementor .pers-body > :first-child {
	margin-block-start: 0;
}

.elementor .pers-body ul {
	margin: 0 0 1.5em;
	padding-inline-start: 20px;
	list-style: disc;
}

.elementor .pers-body li + li {
	margin-block-start: 8px;
}

/* No pdf for this article: no dead button. */
.elementor .pers-body .tertiary-button:not(a) {
	display: none;
}

.elementor .pers-body:has(> .tertiary-button:not(a):only-child) {
	display: none;
}

/* "Ook online verschenen" on the Pers overview. */
.elementor .pers-online {
	margin-block-start: 48px;
}

.elementor .pers-online li {
	margin-block-end: 8px;
}

/* ── Projecten: H1 for search engines (the page is a slider), intro above the tabs ─────────────────── */
.elementor [data-id="pjh1sr01"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.elementor [data-id="pjintro1"] {
	max-width: 520px;
	margin-inline: auto;
	font-family: var(--font-secondary);
	font-size: var(--text-md);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: center;
	color: rgba(0, 0, 0, 0.75);
}

/* Home CTA: the title and the line below it belong together (the button keeps its own distance). */
.elementor [data-id="5f07349"] {
	margin-block-end: -20px;
}

.elementor [data-id="435ad427"] {
	text-align: center;
}

@media (max-width: 767px) {
	.elementor [data-id="5f07349"] {
		margin-block-end: -12px;
	}
}

/* Pers: the intro under the title may run a little wider than the default 344px. */
.elementor [data-id="11900381"] {
	max-width: 520px;
}

/* Pers detail, line under the title: year left, magazine in the middle, "Lees het originele artikel" right. */
.elementor .project-meta .tertiary-button:not(a) {
	display: none;
}

.elementor .project-meta > :last-child {
	justify-self: end;
}

.elementor .project-meta > :nth-child(2) {
	justify-self: center;
	text-align: center;
}

@media (max-width: 767px) {
	.elementor .project-meta {
		grid-template-columns: 1fr auto;
		row-gap: var(--gap-s);
	}

	.elementor .project-meta > :nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: start;
		text-align: start;
	}
}

/* ── Contact form refinements: checkbox group, hint under a field, calmer spacing ────────────────── */

/* A hint ("Denk aan de start van de werken…") sits right under its field and never adds row height. */
.contact-jfb .jet-form-builder-row {
	position: relative;
	align-self: start;
}

.contact-jfb .jet-form-builder-row > .jet-form-builder__desc {
	position: absolute;
	inset: 100% 0 auto auto;
	width: calc(200% + 16px); /* runs under both columns, so the hint stays on one line */
	max-width: none;
	margin: 4px 0 0;
	text-align: right;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.5);
}

.contact-jfb .jet-form-builder__desc small {
	font-size: inherit;
}

/* "Waarbij mogen we helpen?": a visible question with the options in two columns. */
.contact-jfb .field-type-checkbox-field:has(.checkradio-wrap + .checkradio-wrap) > .jet-form-builder__label {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 12px;
	overflow: visible;
	clip: auto;
	white-space: normal;
	font-size: 14px;
	font-weight: 300;
	color: rgba(0, 0, 0, 0.75);
}

.contact-jfb .jet-form-builder__fields-group.checkradio-wrap:has(.checkradio-wrap + .checkradio-wrap) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
}

.contact-jfb .jet-form-builder__fields-group .jet-form-builder__field-wrap {
	margin: 0;
}

@media (max-width: 767px) {
	.contact-jfb .jet-form-builder__fields-group.checkradio-wrap:has(.checkradio-wrap + .checkradio-wrap) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Checkboxes in the brand style: a small square with a thin border, filled with the brand colour when ticked. */
.contact-jfb input[type="checkbox"].jet-form-builder__field {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid var(--primary);
	border-radius: 3px;
	background: transparent center / 10px 10px no-repeat;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.contact-jfb input[type="checkbox"].jet-form-builder__field:checked {
	background-color: var(--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23fff7ec' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.6'/%3E%3C/svg%3E");
}

.contact-jfb input[type="checkbox"].jet-form-builder__field:focus-visible {
	outline: 1px solid var(--primary);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	/* Four request types: two by two instead of one cramped row. */
	.elementor .contact-tabs .e-tabs-menu-base {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		gap: 4px;
	}

	.elementor .contact-tabs .e-tab-base {
		text-align: center;
	}

	/* The hint simply follows its field on a phone. */
	.contact-jfb .jet-form-builder-row > .jet-form-builder__desc {
		position: static;
		width: auto;
		margin: 8px 0 0;
		text-align: left;
	}
}

/* ── Over ons: video lightbox ────────────────────────────────────────────── */

.elementor [data-id="d80b46"].has-video { cursor: pointer; }
.elementor [data-id="d80b46"].has-video:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vw;
	background: rgba(24, 8, 8, 0.92);
	animation: video-lightbox-in 0.35s ease both;
}
.video-lightbox__frame {
	width: min(100%, 1200px, calc((100vh - 8vw) * 16 / 9));
	aspect-ratio: 16 / 9;
	background: #000;
}
.video-lightbox__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-lightbox__close {
	position: absolute;
	top: 16px;
	right: 20px;
	padding: 0 8px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
}
@keyframes video-lightbox-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Project detail: editorial layout (inc/project-layout.php) ───────────── */

.pd { display: block; width: 100%; }
.pd-fig { margin: 0; overflow: hidden; border-radius: var(--radius-xs, 4px); }
.pd-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pd-h2 {
	margin: 0;
	font-family: var(--font-primary);
	font-weight: var(--fontweight-h2, 300);
	font-size: var(--h2);
	line-height: 1.2;
	color: inherit;
}
.pd-body p, .pd-caption p, .pd-lead p {
	margin: 0 0 1em;
	font-family: var(--font-secondary);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.6;
}
.pd-body p:last-child, .pd-caption p:last-child, .pd-lead p:last-child { margin-bottom: 0; }

/* Wide photos */
.pd-wide { aspect-ratio: 1472 / 1109; }
.pd-wide-2 { aspect-ratio: 1472 / 860; }
.pd-lead { max-width: 642px; margin-top: 24px; }

/* Rows share the Figma columns: 604 | gap 140 | 604 of 1472 */
.pd-story, .pd-head-row, .pd-split, .pd-pair {
	display: grid;
	grid-template-columns: 41fr 9.5fr 41fr 8.5fr;
}
.pd-block, .pd-story, .pd-split, .pd-result, .pd-masonry { margin-top: clamp(80px, 11vw, 160px); }

.pd-story { align-items: start; }
.pd-story-img { grid-column: 1; aspect-ratio: 604 / 760; }
.pd-story-text { grid-column: 3; padding-top: 123px; display: flex; flex-direction: column; gap: 32px; }

.pd-head-row { margin-bottom: 40px; align-items: start; }
.pd-head-row .pd-h2 { grid-column: 1; }
.pd-head-row .pd-caption { grid-column: 3; padding-top: 6px; }
.pd-block .pd-wide-2 { margin-top: 0; }

.pd-split { grid-template-columns: 52fr 48fr; column-gap: 0; align-items: center; }
.pd-split .pd-head { grid-column: 1; max-width: 480px; display: flex; flex-direction: column; gap: 24px; }
.pd-split-img { grid-column: 2; aspect-ratio: 724 / 940; }

.pd-pair { grid-template-columns: 960fr 24fr 488fr; align-items: end; }
.pd-pair-a { grid-column: 1; aspect-ratio: 960 / 1000; }
.pd-pair-b { grid-column: 3; aspect-ratio: 488 / 620; }

.pd-result { max-width: 714px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: 28px; }

.pd-masonry .pd-cols { display: flex; gap: 16px; align-items: flex-start; }
.pd-masonry .pd-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pd-m img { height: auto; }
.pd-m[hidden] { display: none; }
.pd-more {
	display: block;
	margin: 56px auto 0;
	padding: 0 0 2px;
	border: 0;
	border-bottom: 1px solid currentColor;
	background: none;
	color: inherit;
	font-family: var(--font-secondary);
	font-size: 0.875rem;
	cursor: pointer;
}

@media (max-width: 1024px) {
	.pd-h2 { font-size: var(--h2-t); }
}
@media (max-width: 767px) {
	.pd-h2 { font-size: var(--h2-m); }
	.pd-story, .pd-head-row, .pd-split, .pd-pair { display: flex; flex-direction: column; gap: 24px; }
	.pd-story-text { padding-top: 8px; gap: 20px; }
	.pd-head-row { margin-bottom: 24px; }
	.pd-split-img, .pd-pair-a, .pd-pair-b, .pd-story-img { width: 100%; }
	.pd-pair { gap: 16px; }
	.pd-masonry .pd-cols { flex-direction: column; }
	.pd-masonry .pd-col { display: contents; }
	.pd-block, .pd-story, .pd-split, .pd-result, .pd-masonry { margin-top: 72px; }
}

/* ── Project detail: "Meer projecten" ────────────────────────────────────── */

.pr-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.pr-all {
	display: inline-flex; align-items: center; gap: 12px;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	color: inherit; text-decoration: none;
	font-family: var(--font-secondary); font-size: 0.875rem; font-weight: 400;
}
.pr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pr-card { display: block; color: inherit; text-decoration: none; }
.pr-img { margin: 0; aspect-ratio: 724 / 520; overflow: hidden; border-radius: var(--radius-xs, 4px); }
.pr-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.pr-card:hover .pr-img img { scale: 1.04; }
.pr-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 16px; }
.pr-title { font-family: var(--font-primary); font-weight: 300; font-size: var(--h4); line-height: 1.2; }
.pr-info { font-family: var(--font-secondary); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: right; }
@media (max-width: 767px) {
	.pr-cards { grid-template-columns: 1fr; }
	.pr-title { font-size: var(--h4-m); }
}
.pr { padding: 0 20px clamp(120px, 14vw, 200px); margin-top: clamp(80px, 11vw, 160px); }

/* Leadzin under the first image: 28px (smaller on phones). */
.pd-lead p { font-size: 28px; line-height: 1.3; }
@media (max-width: 767px) { .pd-lead p { font-size: 22px; } }

/* "Meer beelden laden": the theme's default button hover/focus (pink) must not apply. */
.pd .pd-more,
.pd .pd-more:hover,
.pd .pd-more:focus,
.pd .pd-more:active {
	background: none;
	background-color: transparent;
	color: inherit;
	box-shadow: none;
	outline-offset: 4px;
}
.pd .pd-more { border-radius: 0; transition: opacity 0.3s ease; }
.pd .pd-more:hover { opacity: 0.6; }