/* ---------- Hero ---------- */
.hero__title { margin: 0; overflow-wrap: break-word; hyphens: auto; }
.hero__title--long { font-size: var(--fs-h1-long); }
.hero__title-sub { display: block; margin-top: 0.75rem; color: var(--color-text-soft); font-size: 0.5em; font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; }
@media (min-width: 64em) { .hero__title-sub { color: var(--color-text-faint); } }
.hero__slogan { margin-bottom: 1.5rem; }
.hero__text { margin: 0 0 3rem; }
.hero__text p, .hero__intro p { margin-bottom: 1rem; }
.hero__text p:last-child, .hero__intro p:last-child { margin-bottom: 0; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.hero__phone { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-heading); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.hero__phone .icon { width: 1.125rem; height: 1.125rem; color: var(--color-brand); }
.hero__phone:hover { color: var(--color-action); }
.hero--stacked .hero__intro { max-width: 62.5rem; margin: 2rem 0 3rem; }
.hero--stacked .hero__intro:last-child { margin-bottom: 0; }
.hero--stacked .hero__title + .hero__actions { margin-top: 2rem; }
.hero--split .hero__col { min-width: 0; }
@media (max-width: 1119px) { .hero--split .hero__text { margin-bottom: 1.875rem; } }

/* ---------- Beeldenband met overgang (fade) ---------- */
.fade-section { position: relative; z-index: 2; }
.fade__stage { position: relative; overflow: hidden; aspect-ratio: 100 / 42.85; background: var(--color-bg); }
.fade__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; }
.fade--ready .fade__slide { transition: opacity 0.8s var(--ease), visibility 0.8s; }
.fade__slide:first-child { opacity: 1; visibility: visible; }
.js .fade__slide:first-child:not(.is-active) { opacity: 0; visibility: hidden; }
.fade__slide.is-active { opacity: 1; visibility: visible; }
.fade__slide img { width: 100%; height: 100%; object-fit: cover; }
.fade__bar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2rem; margin-top: 2rem; }
.fade__bar .dots { margin: 0; }
@media (max-width: 767px) {
	.fade__stage { aspect-ratio: 4 / 3; }
	.fade__bar { flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
}

/* ---------- Kernpunten (kaarten met kader) ---------- */
.fade-section + .usp { margin-top: -14rem; padding-top: 21.875rem; }
.usp__grid { display: grid; gap: var(--col-gap); padding-bottom: 5rem; border-bottom: 1px solid var(--color-divider); }
.usp__head { max-width: 46rem; margin-bottom: 3rem; }
.usp__box { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2rem; border: 2px solid var(--color-line); }
.usp__icon { flex: none; width: 2.5rem; height: 2.5rem; color: var(--color-brand); }
.usp__title { margin: 0; font-size: var(--fs-h3); }
.usp__text { margin: 0; font-size: var(--fs-small); }
@media (min-width: 48em) { .usp__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .usp__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1119px) { .usp__box { padding: 1rem; } }
@media (max-width: 1023px) { .fade-section + .usp { margin-top: 0; padding-top: var(--section-y-md); } .usp__grid { padding-bottom: 4.375rem; } }
@media (max-width: 767px) { .fade-section + .usp { padding-top: var(--section-y-sm); } .usp__grid { padding-bottom: 3.125rem; } }
.usp + .section--join .section__body { padding-top: 0; }

/* ---------- Koppen van sectie ---------- */
.section__head { margin-bottom: 4rem; }
.section__head--split { display: grid; gap: 2rem; }
@media (min-width: 70em) { .section__head--split { grid-template-columns: 1fr 1fr; column-gap: 7rem; align-items: end; } }
.section__head--center { max-width: 43.75rem; margin-inline: auto; text-align: center; }
.section__head--center .section__intro { max-width: 31.9375rem; margin-inline: auto; }
.section__head--center { margin-bottom: 4.6875rem; }
.section__title { margin: 0; }
.section__side-action { margin-top: 1.75rem; }
.section__intro { margin: 0; }
@media (max-width: 1119px) { .section__head { margin-bottom: 2rem; } }
@media (max-width: 767px) { .section__head--center { margin-bottom: 1.875rem; } }
.section__actions { margin-top: 4rem; }
.section--center .section__actions { display: flex; justify-content: center; }
@media (max-width: 1119px) { .section__actions { margin-top: 2rem; } }

/* ---------- Diensten ---------- */
.services-grid { display: grid; gap: 4rem; }
@media (min-width: 48em) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .services-grid { gap: 2.5rem; } }

/* ---------- Realisaties ---------- */
.project-grid { display: grid; gap: 4rem; }
@media (min-width: 48em) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70em) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .project-grid { gap: 2.5rem; } }
[data-filter-grid] [hidden] { display: none; }
[data-filter-grid] { transition: min-height 320ms var(--ease); }
[data-filter-grid].is-filter-out .card { opacity: 0; transform: translateY(6px); transition: opacity 140ms var(--ease), transform 140ms var(--ease); }
[data-filter-grid].is-filter-in .card:not([hidden]) { animation: filter-in 360ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@media (prefers-reduced-motion: reduce) { [data-filter-grid] { transition: none; } }
@keyframes filter-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Tekst met beeld ---------- */
.split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 70em) {
	.split--has-image { grid-template-columns: 1fr 1fr; column-gap: 7.5rem; }
	.split--image-left .split__media { order: -1; }
}
.split__media { margin: 0; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split--wide .split__media img { aspect-ratio: 4 / 3; }
.single-ddbr_dienst .split { align-items: center; }
.single-ddbr_dienst .split__media img { aspect-ratio: 1; }
.split__media figcaption { margin-top: 0.75rem; font-size: var(--fs-small); }
.split__title { margin-bottom: 1.25rem; }
.split .prose h3 { margin: 2.25rem 0 0.75rem; }
.split .prose ul { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.split .prose ul li { position: relative; padding: 0.625rem 0 0.625rem 2.25rem; border-top: 1px solid var(--color-line); color: var(--color-heading); font-weight: 500; }
.split .prose ul li:last-child { border-bottom: 1px solid var(--color-line); }
.split .prose ul li::before { content: ""; position: absolute; top: 0.875rem; left: 0; width: 1.125rem; height: 1.125rem; background: var(--color-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.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 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 70em) { body:not(.single-ddbr_dienst) .split--has-image .split__media { position: sticky; top: 7rem; align-self: start; } }
.prose { max-width: 42rem; }
.split--has-image .prose { max-width: none; }
.prose a { font-weight: 600; }
.prose > :last-child { margin-bottom: 0; }
.split__link { margin-top: 3rem; }
@media (max-width: 1119px) { .split__link { margin-top: 1.875rem; } }

/* ---------- Mozaïek ---------- */
.mosaic { display: grid; gap: 2rem; }
.mosaic__action { margin-top: 2.5rem; }
.mosaic__item { position: relative; margin: 0; overflow: hidden; }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform var(--dur-image) var(--ease); }
@media (min-width: 48em) {
	.mosaic--5 { grid-template-columns: 2.12fr 1fr 1fr; grid-template-rows: auto auto; }
	.mosaic--5 .mosaic__item:first-child { grid-row: span 2; }
	.mosaic--5 .mosaic__item:first-child img { position: absolute; inset: 0; aspect-ratio: auto; }
	.mosaic--2, .mosaic--3, .mosaic--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) { .mosaic { gap: 1rem; grid-template-columns: 1fr 1fr; } .mosaic__item:first-child { grid-column: span 2; } .mosaic__item:first-child img { position: static; aspect-ratio: 4 / 3; } }


/* ---------- Stappen ---------- */
.steps { display: grid; gap: var(--col-gap); counter-reset: step; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2rem; border: 2px solid var(--color-line); background: var(--color-surface); counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); color: var(--color-brand); font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; line-height: 1; }
.step__label { margin: 0; color: var(--color-action); font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.step__title { margin: 0; font-size: var(--fs-h3); }
.step__text { margin: 0; }
.step .step__link { flex: none; margin-top: 0.25rem; }

/* ---------- Prijsafspraken, citaat, kort antwoord ---------- */
.price { display: grid; gap: 2rem; padding: 3rem; border: 2px solid var(--color-line); background: var(--color-surface); }
@media (min-width: 70em) { .price { grid-template-columns: 1fr 1.4fr; gap: 5rem; } }
@media (max-width: 767px) { .price { padding: 1.5rem; } }
.price .prose > :last-child { margin-bottom: 0; }
.price__action .duo__link { flex: none; }
.price__action { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-top: 2rem; }
.quote { max-width: 56rem; margin: 0; padding: 2rem 2.5rem; border: 2px solid var(--color-line); border-left: 4px solid var(--color-brand); }
.quote__text { margin: 0 0 0.75rem; color: var(--color-heading); font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.quote__caption { margin: 0; font-size: var(--fs-small); }
.answer { padding-block: 3rem; border-bottom: 1px solid var(--color-divider); }
.answer__text { max-width: 62.5rem; margin: 0; color: var(--color-heading); font-size: 1.25rem; font-weight: 500; line-height: 1.5; }

/* ---------- Veelgestelde vragen ---------- */
.faq { display: grid; gap: 1rem; max-width: 62.5rem; }
.faq__item { border: 2px solid var(--color-line); background: var(--color-surface); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--touch-min); padding: 1.25rem 1.5rem; color: var(--color-heading); font-weight: 600; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--color-brand); transition: transform var(--dur) var(--ease); }
.faq__item[open] .faq__q .icon { transform: rotate(45deg); }
.faq__a { padding: 0 1.5rem 1.5rem; }
.faq__a > :last-child { margin-bottom: 0; }

/* ---------- Reviews ---------- */
.review { margin: 0; scroll-margin-top: 7rem; }
.review__text { margin: 0 0 1rem; color: var(--color-heading); }
.review__name { margin: 0; font-size: var(--fs-small); font-weight: 600; display: flex; flex-direction: column; gap: 0.125rem; }
.review__role { font-weight: 400; color: var(--color-text); }
.review__stars { display: flex; gap: 0.125rem; margin: 0; }
.reviews__star { width: 1.125rem; height: 1.125rem; fill: currentColor; stroke: none; color: #e0a31a; flex: none; }
.reviews__score { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0; color: var(--color-heading); font-size: var(--fs-small); }
.reviews__grid { align-items: stretch; }
.reviews__grid .review { background: var(--color-surface); height: 100%; gap: 1rem; }
.reviews__grid .review__text { font-size: 1rem; line-height: 1.6; }
.reviews__grid .review__text, .reviews__grid .review__more { margin: 0; }
.review__more { color: var(--color-action, var(--color-brand)); font-weight: 600; font-size: var(--fs-small); }
.reviews__grid .review__name { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--color-line); width: 100%; }
.reviews__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.5rem; }
.reviews__actions .reviews__score { margin: 0; }
.hero__score a { color: inherit; text-decoration: none; }
.hero__score a:hover { text-decoration: underline; }
.hero__score { display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0; color: var(--color-heading); font-size: var(--fs-small); }
.grid-cards { display: grid; gap: var(--col-gap); }
@media (min-width: 48em) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Artikel ---------- */
.article__summary { max-width: 56rem; margin: 0 0 3rem; padding: 2rem; border: 2px solid var(--color-line); border-left: 4px solid var(--color-brand); color: var(--color-heading); font-size: 1.125rem; font-weight: 500; }
.article__body { max-width: 50rem; }
.article__body h2 { margin-top: 3rem; font-size: var(--fs-h3); }

/* ---------- Galerij van een realisatie ---------- */
.project-head__label { display: inline-block; margin-bottom: 1rem; font-size: var(--fs-tiny); text-decoration: none; }
.project-head .chip { margin-left: 0; }
.gallery { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery__link { display: block; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-image) var(--ease); }
@media (prefers-reduced-motion: reduce) { .gallery__link:hover img { transform: none; } }

/* ---------- Lightbox ---------- */
.lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / 92%); color: #fff; }
.lightbox::backdrop { background: rgb(0 0 0 / 92%); }
.lightbox__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 4rem 4.5rem; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto; object-fit: contain; }
.lightbox__caption { margin-top: 1rem; font-size: var(--fs-small); }
.lightbox__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid rgb(255 255 255 / 40%); border-radius: var(--radius-pill); background: rgb(0 0 0 / 40%); color: #fff; cursor: pointer; }
.lightbox__btn:hover { border-color: #fff; }
.lightbox__btn--close { top: 1rem; right: 1rem; }
.lightbox__btn--prev { top: 50%; left: 1rem; transform: translateY(-50%); }
.lightbox__btn--next { top: 50%; right: 1rem; transform: translateY(-50%); }
.lightbox__btn .icon { width: 1.25rem; height: 1.25rem; }
@media (max-width: 767px) { .lightbox__figure { padding: 4rem 1rem; } .lightbox__btn--prev, .lightbox__btn--next { top: auto; bottom: 1rem; transform: none; } }

/* ---------- Contact en formulier ---------- */
.contact { display: grid; gap: 3rem; }
@media (min-width: 64em) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: stretch; } }
.contact__card { display: flex; flex-direction: column; padding: 2.5rem; border: 2px solid var(--color-line); background: var(--color-surface); }
.contact__title { margin-bottom: 2rem; font-size: var(--fs-h3); }
.contact__cta { margin-top: auto; padding-top: 1.5rem; }
.contact__cta p { margin: 0 0 1rem; color: var(--color-heading); font-weight: 600; }
.contact__form .form__intro { margin-top: -0.75rem; }
@media (max-width: 767px) { .contact__card { padding: 1.5rem; } }
.info-list { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.info-list li { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.5rem; color: var(--color-heading); font-size: var(--fs-small); line-height: 1.5; }
.info-list li > span { display: block; }
.info-list small { display: block; margin-bottom: 0.125rem; color: var(--color-text); font-size: var(--fs-tiny); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.info-list address { font-style: normal; }
.info-list .icon { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.125rem; color: var(--color-brand); }
.info-list a { color: var(--color-heading); font-weight: 600; text-decoration: none; }
.info-list a:hover { color: var(--color-action); }
.info-list .info-list__route { display: inline-block; margin-top: 0.375rem; color: var(--color-action); font-size: var(--fs-tiny); letter-spacing: 0.04em; text-transform: uppercase; }
.info-social { display: flex; gap: 0.75rem; margin: 0 0 1.5rem; }
.info-social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-line-strong); border-radius: 50%; color: var(--color-heading); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.info-social a:hover { border-color: var(--color-brand); color: var(--color-action); }
.info-social .icon { width: 1.125rem; height: 1.125rem; }
.form { display: grid; gap: 1.5rem; }
.form__intro { max-width: 40rem; margin-bottom: 2rem; }
.form__row { display: grid; gap: 1.5rem; }
@media (min-width: 40em) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__field label { display: block; margin-bottom: 0.5rem; color: var(--color-heading); font-size: var(--fs-tiny); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.form__req { color: var(--color-error); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.875rem 0;
	border: 0;
	border-bottom: 1px solid var(--color-line);
	border-radius: 0;
	background: linear-gradient(var(--color-action), var(--color-action)) no-repeat left bottom / 0 2px border-box;
	color: var(--color-heading);
	font: inherit;
	transition: background-size 0.35s var(--ease), border-color var(--dur) var(--ease);
}
.form select { padding-right: 2.5rem; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232c33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(var(--color-action), var(--color-action)); background-repeat: no-repeat, no-repeat; background-position: right 0.25rem center, left bottom; background-size: 1.125rem, 0 2px; background-origin: padding-box, border-box; background-clip: padding-box, border-box; cursor: pointer; }
.form textarea { min-height: 9rem; resize: vertical; }
.form input:hover, .form select:hover, .form textarea:hover { border-bottom-color: var(--color-line-strong); }
.form input:focus, .form textarea:focus { background-size: 100% 2px; outline: 0; }
.form select:focus { background-size: 1.125rem, 100% 2px; outline: 0; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 0; }
.form__field--check { display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; align-items: start; }
.form__field--check input { appearance: none; width: 1.5rem; height: 1.5rem; margin: 0; border: 2px solid var(--color-line-strong); background: var(--color-surface); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.form__field--check input:checked { border-color: var(--color-action); background: var(--color-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 1rem no-repeat; }
.form__field--check label { margin: 0; font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; text-transform: none; }
.form__field--check .form__error { grid-column: 2; }
.form__error { margin: 0.5rem 0 0; color: var(--color-error); font-size: var(--fs-small); font-weight: 600; }
.has-error input, .has-error select, .has-error textarea { border-bottom-color: var(--color-error); }
.form__alert { margin-bottom: 1.5rem; padding: 1rem 1.5rem; border: 2px solid var(--color-error); background: #fdf1ef; color: var(--color-heading); }
.form__alert p { margin: 0 0 0.5rem; }
.form__alert ul { margin: 0; }
.form__alert a { color: var(--color-error); font-weight: 600; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__legal { margin: 0; font-size: var(--fs-tiny); }
.form .btn { justify-self: start; }

/* ---------- Offerteband en 404 hulpklassen ---------- */
.prose-narrow { max-width: 42rem; }
.ddbr-detail th { padding-right: 1rem; text-align: left; vertical-align: top; }
.section--center [data-slider] { text-align: left; } .section__head--center .section__intro { margin-top: 1.25rem; }

/* ---------- Twee kaarten naast elkaar ---------- */
.duo { display: grid; gap: 2.5rem; }
@media (min-width: 70em) { .duo--2 { grid-template-columns: 1fr 1fr; column-gap: 5rem; } .duo--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; } }
.duo--3 .duo__card .duo__body { align-items: center; text-align: center; padding: 4.5rem 2.25rem 2rem; border: 2px solid var(--color-line); background: var(--color-surface); }
.duo--3 .duo__title { margin-bottom: 2.25rem; }
.duo--3 .duo__body .eyebrow { display: block; margin-bottom: 0; }
.duo--3 .duo__body .eyebrow::before { display: none; }
.duo--3 .duo__body .eyebrow::after { content: ""; display: block; width: 2.5rem; height: 3px; margin: 1.125rem auto 1.25rem; background: var(--color-brand); }
.duo--3 .duo__text { font-size: 1rem; line-height: 1.6; max-width: 26rem; }
.duo--3 .duo__text p { text-wrap: balance; }
.duo--3 .duo__title { text-wrap: balance; }
.duo--3 .duo__body { justify-content: flex-start; }
.duo--3 .duo__text { width: 100%; }
.duo--3 .duo__text ul li, .duo--3 .duo__card:not(.duo__card--dark) .duo__text ul li:last-child { border: 0; padding: 0.5rem 0; color: var(--color-heading); font-weight: 400; }
.duo--3 .duo__text ul li::before { display: none; }
.duo--3 .duo__title { font-size: var(--fs-h3); line-height: 1.2; min-height: 3.6em; }
@media (max-width: 1119px) { .duo--3 .duo__title { min-height: 0; } }
.duo__card { display: flex; flex-direction: column; background: var(--color-surface); }
.duo__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-bg); }
.duo__media img { width: 100%; height: 100%; object-fit: cover; }
.duo__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 2.5rem; border: 2px solid var(--color-line); border-top: 0; }
.duo__card--noimage .duo__body { border-top: 2px solid var(--color-line); }
.duo__body .eyebrow { margin-bottom: 1rem; }
.duo__card--icon { position: relative; margin-top: 2rem; }
.duo__card--icon .duo__body { padding-top: 4.5rem; }
.duo__icon { position: absolute; top: 0; left: 50%; z-index: 1; display: grid; place-items: center; width: 5.5rem; height: 5.5rem; transform: translate(-50%, -50%); border: 2px solid var(--color-line); border-radius: 50%; background: var(--color-surface); color: var(--color-brand); }
.duo__icon .icon { width: 2.5rem; height: 2.5rem; }
.duo__card--dark .duo__icon { border-color: var(--color-dark); background: var(--color-dark); color: var(--color-on-dark-accent); }
.duo__title { margin-bottom: 1.25rem; font-size: clamp(1.4rem, 1rem + 1.2vw, 1.875rem); }
.duo__text { margin-bottom: 2rem; }
.duo__text p:last-child { margin-bottom: 0; }
.duo__text ol { margin: 0 0 0; padding: 0; list-style: none; counter-reset: duo; }
.duo__text ol li { display: flex; gap: 1rem; align-items: baseline; padding: 0.75rem 0; border-top: 1px solid var(--color-line); color: var(--color-heading); font-weight: 500; counter-increment: duo; }
.duo__text ol li:last-child { border-bottom: 1px solid var(--color-line); }
.duo__text ol li::before { content: counter(duo, decimal-leading-zero); min-width: 1.75rem; color: var(--color-brand); font-family: var(--font-eyebrow); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.1em; }
.duo__text a { font-weight: 600; }
.duo__text ul { margin: 0; padding: 0; list-style: none; }
.duo__text ul li { position: relative; padding: 0.75rem 0 0.75rem 2.25rem; border-top: 1px solid rgb(255 255 255 / 16%); }
.duo__text ul li:last-child { border-bottom: 1px solid rgb(255 255 255 / 16%); }
.duo__text ul li::before { content: ""; position: absolute; top: 1rem; left: 0; width: 1.125rem; height: 1.125rem; background: var(--color-on-dark-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.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 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.duo__card:not(.duo__card--dark) .duo__text ul li { border-top-color: var(--color-line); }
.duo__card:not(.duo__card--dark) .duo__text ul li:last-child { border-bottom-color: var(--color-line); }
.duo__card:not(.duo__card--dark) .duo__text ul li::before { background: var(--color-brand); }
.duo__action { margin-top: auto; }
/* Eerste knoppen op gelijke hoogte, ook als een kaart twee knoppen onder elkaar heeft */
/* Donkere kaart */
.duo__card--dark { background: var(--color-dark); color: var(--color-dark-text); }
.duo__card--dark .duo__body { border-color: var(--color-dark); }
.duo__card--dark .duo__title { color: #fff; }
.duo__card--dark .eyebrow { color: var(--color-on-dark-accent); }
.duo__card--dark .eyebrow::before { background: var(--color-on-dark-accent); }
.duo__card--dark .duo__text a { color: var(--color-on-dark-accent); }
.duo__card--dark .btn { background-image: linear-gradient(#fff, #fff); }
.duo__card--dark .btn:hover, .duo__card--dark .btn:focus-visible { color: var(--color-heading); }

/* Tweede actie: een uitgeschreven tekstlink met een pictogram, zoals het telefoonnummer in de hero */
.duo__action { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.5rem; }
.duo__link { display: inline-flex; flex: 1 1 11.5rem; align-items: center; gap: 0.75rem; min-width: 0; color: var(--color-heading); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.duo__link-icon { display: grid; flex: none; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid var(--color-line-strong); border-radius: 50%; color: var(--color-brand); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.duo__link-icon .icon { width: 1.125rem; height: 1.125rem; }
.duo__link-text { transition: color var(--dur) var(--ease); }
.duo__link:hover .duo__link-icon, .duo__link:focus-visible .duo__link-icon { border-color: var(--color-brand); background: rgb(73 134 213 / 12%); }
.duo__card--dark .duo__link { color: #fff; }
.duo__card--dark .duo__link-icon { border-color: rgb(255 255 255 / 32%); color: var(--color-on-dark-accent); }
.duo__card--dark .duo__link:hover, .duo__card--dark .duo__link:focus-visible { color: #fff; }
.duo__card--dark .duo__link:hover .duo__link-icon, .duo__card--dark .duo__link:focus-visible .duo__link-icon { border-color: var(--color-on-dark-accent); background: rgb(141 182 238 / 16%); }
@media (min-width: 70em) {
	.duo__body { padding: 2rem; }
	.duo__action { gap: 1rem 1.25rem; }
	.duo__action .btn { padding-inline: 1.375rem; }
}
@media (min-width: 70em) { .duo__action { min-height: 3.5rem; align-content: center; } }
/* Net onder de breedte waar knop en link naast elkaar passen, staat de link eronder: eerste knoppen toch op één lijn */
@media (min-width: 70em) and (max-width: 78.99em) { .duo__action { align-content: flex-start; min-height: calc(3.5rem + 1.25rem + 2.25rem); } }
@media (max-width: 1119px) { .duo__body { padding: 2rem; } }
@media (max-width: 767px) { .duo__body { padding: 1.5rem; } }

.section__actions--center { display: flex; justify-content: center; }

/* ---------- Over ons ---------- */
.about__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 70em) { .about__grid--two { grid-template-columns: 1fr 1fr; column-gap: 5rem; } }
.about__media { position: relative; margin: 0; overflow: hidden; background: var(--color-surface); }
.about__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--dur-image) var(--ease); }
.about__media:hover img { transform: scale(1.03); }
.about__media::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgb(35 44 51 / 88%), rgb(35 44 51 / 0%)); pointer-events: none; }
.about__media--plain::after { display: none; }
.about__badge { position: absolute; top: 1.5rem; left: 0; z-index: 1; padding: 0.75rem 1.25rem; border-left: 4px solid var(--color-brand); background: var(--color-surface); color: var(--color-heading); font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; }
.about__caption { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; padding: 2rem; color: #fff; font-size: 1.0625rem; font-weight: 500; line-height: 1.5; }
.about__caption::before { content: ""; display: block; width: 2rem; height: 2px; margin-bottom: 1rem; background: var(--color-on-dark-accent); }
.about__facts { margin: 2rem 0 0; padding: 0; list-style: none; }
.about__facts li { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 0; border-top: 1px solid var(--color-divider); color: var(--color-heading); font-weight: 500; }
.about__facts li:last-child { border-bottom: 1px solid var(--color-divider); }
.about__fact-icon { display: grid; flex: none; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--color-surface); color: var(--color-brand); }
.about__fact-icon .icon { width: 1.25rem; height: 1.25rem; }
.about__action { margin-top: 2.5rem; }
@media (max-width: 767px) { .about__caption { padding: 1.25rem; font-size: 1rem; } .about__badge { top: 1rem; } }
@media (prefers-reduced-motion: reduce) { .about__media:hover img { transform: none; } }

/* Over ons zonder foto: tekst links, feiten in een kader rechts */
.about__panel { padding: 2.5rem; border: 2px solid var(--color-line); background: var(--color-surface); }
.about__panel-title { margin: 0 0 1.25rem; color: var(--color-action); font-family: var(--font-eyebrow); font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.about__panel .about__facts { margin-top: 0; }
.about__panel .about__fact-icon { background: var(--color-bg); }
@media (max-width: 767px) { .about__panel { padding: 1.5rem; } }

/* Over ons met foto: de foto loopt links tot de schermrand en vult de hele hoogte, de tekst blijft op de lijn van de container */
.about--bleed { padding-block: 0; overflow: hidden; }
.about--bleed .about__grid { gap: 0; align-items: stretch; }
.about--bleed .about__text { padding: var(--section-y-sm) var(--gutter); }
.about--bleed .about__media img { aspect-ratio: 4 / 3; }
@media (min-width: 70em) {
	.about--bleed .about__media { min-height: 100%; }
	.about--bleed .about__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.about--bleed .about__text { padding-block: 5rem; padding-left: 5rem; padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
}
@media (min-width: 48em) and (max-width: 1119px) { .about--bleed .about__text { padding-block: var(--section-y-md); } }

/* Tekst met beeld, beeld tot de schermrand en over de hele hoogte */
.bleed-split { overflow: hidden; background: var(--color-surface); }
.bleed-split__grid { display: grid; }
.bleed-split__media { position: relative; margin: 0; overflow: hidden; }
.bleed-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-image) var(--ease); }
.bleed-split__text { padding: var(--section-y-sm) var(--gutter); }
@media (min-width: 70em) {
	.bleed-split__grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
	.bleed-split__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.bleed-split__text { align-self: center; padding-block: 5rem; }
	.bleed-split--right .bleed-split__text { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); padding-right: 5rem; }
	.bleed-split--left .bleed-split__media { order: -1; }
	.bleed-split--left .bleed-split__text { padding-left: 5rem; padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
	.bleed-split--right .bleed-split__media { order: 2; }
}
@media (min-width: 48em) and (max-width: 1119px) { .bleed-split__text { padding-block: var(--section-y-md); } }
@media (prefers-reduced-motion: reduce) { .bleed-split__media:hover img { transform: none; } }
.article .section__head { margin-bottom: 2rem; }
.project-head__meta { margin: 1.25rem 0 1.5rem; }
.form__row:has(> :only-child) { grid-template-columns: 1fr; }