/*
 * VieDenta 2.0: opmaaklaag bovenop de bestaande (gebouwde) themastyling.
 *
 * Dit bestand wordt NIET door webpack gebouwd: gewone CSS, direct bewerken en uploaden.
 * Geladen via app/Hooks/Frontend.php (versie = bestandsdatum, dus geen cache legen nodig).
 *
 * Alle regels hangen onder de body-klasse .v2. Daardoor winnen ze van de bestaande component-CSS
 * (die webpack pas tijdens het laden in de <head> zet), ongeacht de laadvolgorde.
 *
 * Designbron: XD "Viedenta 2.0", artboard 1920px breed, content-container 1130px.
 *
 * Inhoud
 *   1. Tokens
 *   2. Basis: container, pagina-kaart, labels, koppen
 *   3. Knoppen en links
 *   4. Header: top-header
 *   5. Header: hoofdnavigatie
 *   6. Header: megamenu en dropdown
 *   7. Mobiel menu
 *   8. Reviewbalken (rating/feedback)
 *   9. Sectie-basis: ritme, kop, rijke tekst, grids
 *  10. Play-knop
 *  11. Hero (homepage)
 *  12. USP-balk
 *  13. Uitgelichte ervaring
 *  14. Tekst + foto/video
 *  15. Expertises
 *  16. Werkwijze
 *  17. Ervaringskaarten (reviews)
 *  18. Team
 *  19. Nieuws
 *  20. Contactblok (Gravity Forms)
 *  21. Vestigingen
 *  22. Banner (subpagina's)
 *  23. Ervaringen-overzicht (filter + tegels)
 *  24. Uitgelichte specialist
 *  25. Aanpassingen uit de specs van de ervaringen-schermen
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--v2-teal: #2c5a5f;
	--v2-teal-light: #1c676c;
	--v2-teal-dark: #05383a;
	--v2-text: #2c3c3e;
	--v2-muted: #92a9ad;
	--v2-terracotta: #c48164;
	--v2-orange: #c06244;
	--v2-tag: #e4edec;
	--v2-blush: #f6ebe7;
	--v2-surface: #f8f9f9;
	--v2-page: #fbfbfb;
	--v2-white: #fff;
	--v2-star: #e6bc17;

	--v2-gradient: linear-gradient(90deg, var(--v2-teal-light) 0%, var(--v2-teal-dark) 100%);
	--v2-gradient-vertical: linear-gradient(180deg, var(--v2-teal-light) 0%, var(--v2-teal-dark) 100%);

	--v2-font: 'Open Sans', sans-serif;
	--v2-font-quote: Georgia, 'Times New Roman', serif;

	--v2-container: 1130px;
	--v2-gutter: 20px;
	--v2-radius: 10px;
	--v2-radius-sm: 4px;
	--v2-shadow: 0 0 60px rgba(0, 0, 0, .16);
	--v2-ease: cubic-bezier(.25, .46, .45, .94);

	--v2-topbar-height: 40px;
	--v2-nav-height: 80px;
}

@media (max-width: 767px) {
	:root {
		--v2-gutter: 16px;
		--v2-nav-height: 70px;
	}
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

.v2-container {
	width: 100%;
	max-width: calc(var(--v2-container) + 2 * var(--v2-gutter));
	margin-inline: auto;
	padding-inline: var(--v2-gutter);
}

/* Afgeronde contentkaart onder de header (bestaande .wrapper-pseudo-elementen hergebruikt) */
.v2 .wrapper.wrapper--page {
	background: var(--v2-page);
}

.v2 .wrapper.wrapper--page::before {
	background: var(--v2-tag);
}

.v2 .wrapper.wrapper--page::after {
	background: var(--v2-page);
	border-radius: 30px 30px 0 0;
}

/* Subtitel boven een kop: "JULLIE ERVARINGEN ÉN VERHALEN" */
.v2-label {
	display: block;
	margin: 0 0 4px;
	font: 700 11px/1.6 var(--v2-font);
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--v2-orange);
}

.v2-h2 {
	margin: 0;
	font: 700 32px/38px var(--v2-font);
	color: var(--v2-teal);
}

/* Tag: "ALL-ON GEBIT", "NARCOSE" */
.v2-tag {
	display: inline-block;
	padding: 0 8px;
	border-radius: 2px;
	background: var(--v2-tag);
	font: 700 10px/22px var(--v2-font);
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--v2-teal);
}

.v2-icon {
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

@media (max-width: 767px) {
	.v2-h2 {
		font-size: 26px;
		line-height: 32px;
	}
}

/* ==========================================================================
   3. Knoppen en links
   ========================================================================== */

/* Primair: terracotta (design: "Call to action button", 40px hoog, hover = auto-animate 0.3s ease-out) */
.v2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 40px;
	padding: 9px 20px;
	border: 1px solid var(--v2-terracotta);
	border-radius: var(--v2-radius-sm);
	background: var(--v2-terracotta);
	font: 600 15px/20px var(--v2-font);
	color: var(--v2-white);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out;
}

.v2-btn .v2-icon--arrow {
	transition: transform .3s ease-out;
}

.v2-btn:hover,
.v2-btn:focus-visible {
	border-color: var(--v2-orange);
	background: var(--v2-orange);
	color: var(--v2-white);
	text-decoration: none;
}

.v2-btn:hover .v2-icon--arrow,
.v2-btn:focus-visible .v2-icon--arrow {
	transform: translateX(4px);
}

/* Outline wit (op donkere achtergrond): "Bel ons direct" */
.v2-btn--outline-white {
	border-color: var(--v2-white);
	background: transparent;
}

.v2-btn--outline-white:hover,
.v2-btn--outline-white:focus-visible {
	border-color: var(--v2-white);
	background: var(--v2-white);
	color: var(--v2-teal);
}

/* Outline terracotta (op lichte achtergrond): "Meer over angst & narcose" */
.v2-btn--outline {
	background: transparent;
	color: var(--v2-terracotta);
}

.v2-btn--outline:hover,
.v2-btn--outline:focus-visible {
	border: 1px solid var(--v2-orange);
	background: var(--v2-blush);
	color: var(--v2-orange);
}

.v2-btn--block {
	display: flex;
	width: 100%;
}

/* Tekstlink met pijl: "Meer informatie →", "Bekijk alle ervaringen →" */
.v2-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 13px/20px var(--v2-font);
	color: var(--v2-terracotta);
	text-decoration: none;
}

.v2-link .v2-icon--arrow {
	transition: transform .3s ease-out;
}

.v2-link:hover,
.v2-link:focus-visible {
	color: var(--v2-orange);
	text-decoration: none;
}

.v2-link:hover .v2-icon--arrow,
.v2-link:focus-visible .v2-icon--arrow,
a:hover .v2-link .v2-icon--arrow {
	transform: translateX(4px);
}

.v2 :is(.v2-btn, .v2-link, .v2-menu a, .v2-topbar a, .v2-mobile-menu a):focus-visible {
	outline: 2px solid var(--v2-orange);
	outline-offset: 2px;
}

/* Mobiel: knoppen altijd onder elkaar en op volle breedte (briefing) */
@media (max-width: 767px) {
	.v2-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.v2-buttons .v2-btn {
		width: 100%;
	}
}

/* ==========================================================================
   4. Header: top-header
   ========================================================================== */

.v2 header.header-new.v2-header {
	padding: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.v2 header.header-new.v2-header.fixed {
	padding: 0;
	background: transparent;
}

.v2-topbar {
	background: var(--v2-gradient);
	font: 400 13px/18px var(--v2-font);
	color: var(--v2-white);
}

.v2-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--v2-topbar-height);
}

.v2 .v2-topbar a {
	color: var(--v2-white);
	text-decoration: none;
}

.v2-topbar__reviews {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.v2-stars {
	display: inline-flex;
	gap: 1px;
	color: var(--v2-star);
}

.v2-topbar__fc {
	flex: none;
}

.v2 .v2-topbar__reviews:hover span:not(.v2-stars) {
	text-decoration: underline;
}

.v2-topbar__menu {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.v2 .v2-topbar__menu a:hover,
.v2 .v2-topbar__menu .is-active > a {
	text-decoration: underline;
}

/* ==========================================================================
   5. Header: hoofdnavigatie
   ========================================================================== */

.v2-nav {
	background: rgba(228, 237, 236, .81);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Fallback zonder backdrop-filter: dekkende kleur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.v2-nav {
		background: var(--v2-tag);
	}
}

.v2-nav__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 30px;
	min-height: var(--v2-nav-height);
}

.v2-nav__logo {
	flex: none;
	display: block;
	margin-right: auto;
}

.v2-nav__logo img {
	display: block;
	width: auto;
	height: 60px;
}

.v2-menu {
	display: flex;
	align-items: stretch;
	gap: 38px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.v2-menu__item {
	display: flex;
	align-items: center;
	min-height: var(--v2-nav-height);
}

.v2 .v2-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 15px/30px var(--v2-font);
	color: var(--v2-teal);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s;
}

.v2-menu__link .v2-icon--chevron {
	transition: transform .2s;
}

.v2 .v2-menu__item:hover > .v2-menu__link,
.v2 .v2-menu__item:focus-within > .v2-menu__link,
.v2 .v2-menu__item.is-active > .v2-menu__link {
	color: var(--v2-orange);
}

.v2-menu__item:hover > .v2-menu__link .v2-icon--chevron,
.v2-menu__item.is-open > .v2-menu__link .v2-icon--chevron {
	transform: rotate(180deg);
}

.v2-nav__cta {
	flex: none;
	min-width: 170px;
	margin-left: 44px; /* design: 74px tussen menu en knop (30px gap + 44px) */
}

@media (max-width: 1439px) {
	.v2-menu {
		gap: 28px;
	}

	.v2-nav__cta {
		margin-left: 0;
	}
}

/* Hamburger (alleen mobiel) */
.v2 .v2-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	min-width: 0;
	padding: 8px;
}

.v2 .v2-nav__toggle span {
	display: block;
	float: none;
	width: 100%;
	height: 3px;
	margin: 0;
	border-radius: 3px;
	background: var(--v2-teal);
}

@media (max-width: 1199px) {
	.v2-nav__menu,
	.v2-nav__cta {
		display: none;
	}

	.v2 .v2-nav__toggle {
		display: flex;
	}
}

@media (max-width: 767px) {
	.v2-nav__logo img {
		height: 44px;
	}

	.v2-topbar__nav {
		display: none; /* staat op mobiel in het mobiele menu, onder het hoofdmenu */
	}

	.v2-topbar__inner {
		justify-content: center;
	}
}

/* ==========================================================================
   6. Header: megamenu (3 niveaus) en gewone dropdown (2 niveaus)
   ========================================================================== */

/* Megamenu: paneel 880x260, rechts uitgelijnd op de container, overlapt de nav-balk (design y=95) */
.v2-mega {
	position: absolute;
	top: calc(100% - 25px);
	right: var(--v2-gutter);
	z-index: 20;
	width: 880px;
	max-width: calc(100% - 2 * var(--v2-gutter));
	min-height: 260px;
	border-radius: var(--v2-radius);
	background: var(--v2-surface);
	box-shadow: var(--v2-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s var(--v2-ease), transform .25s var(--v2-ease), visibility 0s .25s;
}

.v2-menu__item.has-mega:hover > .v2-mega,
.v2-menu__item.has-mega:focus-within > .v2-mega,
.v2-menu__item.has-mega.is-open > .v2-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.v2-menu__item.has-mega.is-closed > .v2-mega {
	opacity: 0;
	visibility: hidden;
}

/* Niveau 2: linkerkolom 300px, gradient */
.v2-mega__list {
	width: 300px;
	min-height: 260px;
	margin: 0;
	padding: 25px 0;
	border-radius: var(--v2-radius) 0 0 var(--v2-radius);
	background: var(--v2-gradient-vertical);
	list-style: none;
}

.v2 .v2-mega__link {
	display: block;
	padding: 9.5px 30px;
	font: 600 15px/25px var(--v2-font);
	color: var(--v2-white);
	text-decoration: none;
	transition: background-color .2s;
}

.v2 .v2-mega__item.is-open > .v2-mega__link,
.v2 .v2-mega__link:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--v2-white);
}

/* Niveau 3: rechterdeel (580px), 2 kolommen */
.v2-mega__sub {
	position: absolute;
	top: 0;
	left: 300px;
	right: 0;
	display: none;
	margin: 0;
	padding: 26px 34px 26px 60px;
	list-style: none;
	columns: 2;
	column-gap: 40px;
}

.v2-mega__item.is-open > .v2-mega__sub {
	display: block;
}

.v2-mega__sub li {
	break-inside: avoid;
	border-bottom: 1px solid var(--v2-tag);
}

.v2 .v2-mega__sub a {
	display: block;
	padding: 8px 0 9px;
	font: 600 15px/25px var(--v2-font);
	color: var(--v2-teal);
	text-decoration: none;
	transition: color .2s;
}

.v2 .v2-mega__sub a:hover,
.v2 .v2-mega__sub a:focus-visible,
.v2 .v2-mega__sub .is-active > a {
	color: var(--v2-orange);
}

/* Gewone dropdown (menu-item zonder 3e niveau): zelfde stijl als de linkerkolom */
.v2-menu__item.has-children:not(.has-mega) {
	position: relative;
}

.v2-dropdown {
	position: absolute;
	top: calc(100% - 25px);
	left: -30px;
	z-index: 20;
	min-width: 260px;
	margin: 0;
	padding: 15px 0;
	border-radius: var(--v2-radius);
	background: var(--v2-gradient-vertical);
	box-shadow: var(--v2-shadow);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s var(--v2-ease), transform .25s var(--v2-ease), visibility 0s .25s;
}

.v2-menu__item:hover > .v2-dropdown,
.v2-menu__item:focus-within > .v2-dropdown,
.v2-menu__item.is-open > .v2-dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.v2-menu__item.is-closed > .v2-dropdown {
	opacity: 0;
	visibility: hidden;
}

.v2 .v2-dropdown a {
	display: block;
	padding: 7.5px 30px;
	font: 600 15px/25px var(--v2-font);
	color: var(--v2-white);
	text-decoration: none;
}

.v2 .v2-dropdown a:hover,
.v2 .v2-dropdown .is-active > a {
	background: rgba(255, 255, 255, .12);
	color: var(--v2-white);
}

/* ==========================================================================
   7. Mobiel menu (bestaande .main-sidemenu, nieuwe inhoud)
   ========================================================================== */

.v2 .main-sidemenu.v2-sidemenu {
	min-width: 0;
	width: 100%;
	max-width: 400px;
	padding: 70px 24px 30px;
	background: var(--v2-tag);
	box-shadow: var(--v2-shadow);
}

@media (min-width: 1200px) {
	.v2 .main-sidemenu.v2-sidemenu,
	.v2 .main-sidemenu-overlay.v2-sidemenu-overlay {
		display: none;
	}
}

.v2 .v2-sidemenu .CloseBtn {
	border-color: var(--v2-teal);
	color: var(--v2-teal);
	cursor: pointer;
}

.v2-mobile-menu {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.v2-mobile-menu__item {
	position: relative;
}

.v2 .v2-mobile-menu__link {
	display: block;
	padding: 10px 44px 10px 0;
	font: 600 16px/24px var(--v2-font);
	color: var(--v2-teal);
	text-decoration: none;
}

.v2 .v2-mobile-menu__item.is-active > .v2-mobile-menu__link {
	color: var(--v2-orange);
}

.v2 .v2-mobile-menu .mobile-dropdown-toggle {
	position: absolute;
	top: 2px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--v2-teal);
	cursor: pointer;
}

.v2 .v2-mobile-menu .mobile-dropdown-toggle .v2-icon--chevron {
	width: 12px;
	height: 8px;
	transition: transform .2s;
}

.v2 .v2-mobile-menu .current > .mobile-dropdown-toggle .v2-icon--chevron {
	transform: rotate(180deg);
}

.v2-mobile-menu__sub {
	display: none;
	margin: 0 0 8px;
	padding: 8px 0;
	border-radius: var(--v2-radius);
	background: var(--v2-gradient-vertical);
	list-style: none;
}

.v2-mobile-menu .current > .v2-mobile-menu__sub {
	display: block;
}

.v2 .v2-mobile-menu__sub .v2-mobile-menu__link {
	padding: 8px 44px 8px 20px;
	font-size: 15px;
	color: var(--v2-white);
}

.v2 .v2-mobile-menu__sub .mobile-dropdown-toggle {
	top: 0;
	color: var(--v2-white);
}

/* 3e niveau mobiel: licht vlak binnen het teal blok */
.v2-mobile-menu__sub .v2-mobile-menu__sub {
	margin: 0 12px 8px;
	background: var(--v2-surface);
}

.v2 .v2-mobile-menu__sub .v2-mobile-menu__sub .v2-mobile-menu__link {
	font-weight: 400;
	color: var(--v2-teal);
}

/* Secundair menu onder het hoofdmenu, iets kleiner (briefing) */
.v2-mobile-menu--secondary {
	padding-top: 16px;
	border-top: 1px solid rgba(44, 90, 95, .2);
}

.v2 .v2-mobile-menu--secondary .v2-mobile-menu__link {
	padding-block: 6px;
	font-size: 14px;
	font-weight: 400;
}

/* ==========================================================================
   8. Reviewbalken (rating/feedback): cijfer uit theme options
   ========================================================================== */

/* geen layoutwijzigingen; alleen de data komt nu uit theme options */

/* ==========================================================================
   9. Sectie-basis: ritme, kop, rijke tekst, grids
   Maten uit XD (artboard 1920): 100px tussen secties, kaarten 350 (3 kolommen, 40px gap)
   of 260 (4 kolommen, 30px gap) binnen de 1130px container.
   ========================================================================== */

.v2-section {
	padding-block: 50px;
}

.v2 .v2-subhead {
	margin: 0 0 24px;
	font: 400 15px/30px var(--v2-font);
	color: var(--v2-text);
}

/* Kop: subtitel + H2 + intro links, optionele actie (link/knop) rechts */
.v2-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 30px;
}

.v2-head__text {
	max-width: 735px;
}

.v2-head__action {
	flex: none;
}

.v2 .v2-head .v2-richtext {
	margin-top: 8px;
}

.v2 .v2-head__text > .v2-label + .v2-h2 {
	margin-top: 0;
}

/* Rijke tekst (WYSIWYG): body 15/30, quotes als pull-quote met aanhalingsteken */
.v2 .v2-richtext {
	font: 400 15px/30px var(--v2-font);
	color: var(--v2-text);
}

.v2 .v2-richtext > *:first-child {
	margin-top: 0;
}

.v2 .v2-richtext > *:last-child {
	margin-bottom: 0;
}

.v2 .v2-richtext p,
.v2 .v2-richtext ul,
.v2 .v2-richtext ol {
	margin: 0 0 20px;
	font: inherit;
	color: inherit;
}

.v2 .v2-richtext--lead {
	font-weight: 700;
	margin-bottom: 14px;
}

/* Bestaande WYSIWYG-teksten bevatten soms oude wrappers (Foundation-"cell", "banner__text" met witte tekst van de
   oude donkere banner). Op de lichte achtergrond van het nieuwe design neutraliseren we die. */
.v2 .v2-richtext .cell {
	width: auto;
	max-width: none;
	padding: 0;
	flex: none;
}

.v2 .v2-richtext .banner__text,
.v2 .v2-richtext .banner__text p {
	color: inherit;
	font: inherit;
}

.v2 .v2-richtext--small {
	font-size: 14px;
	line-height: 22px;
}

.v2 .v2-richtext--small p {
	margin-bottom: 12px;
}

.v2 .v2-richtext a:not(.v2-btn) {
	color: var(--v2-terracotta);
	text-decoration: underline;
}

.v2 .v2-richtext strong,
.v2 .v2-richtext b {
	font-weight: 700;
}

/* Quote in de tekst (briefing: via de WYSIWYG te selecteren, aanhalingsteken komt er automatisch voor) */
.v2 .v2-richtext blockquote {
	position: relative;
	margin: 26px 0;
	padding: 0 0 0 42px;
	border: 0;
	font: italic 400 18px/28px var(--v2-font-quote);
	color: var(--v2-text);
}

.v2 .v2-richtext blockquote::before {
	content: '\201C';
	position: absolute;
	top: -2px;
	left: 0;
	font: 700 44px/1 var(--v2-font-quote);
	color: var(--v2-terracotta);
}

.v2 .v2-richtext blockquote p {
	margin: 0;
	font: inherit;
}

.v2-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Grids */
.v2-grid {
	display: grid;
	gap: 40px;
}

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

@media (max-width: 1023px) {
	.v2-grid {
		gap: 24px;
	}

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

@media (max-width: 767px) {
	.v2-section {
		padding-block: 50px;
	}

	.v2-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.v2-head__action.v2-btn {
		width: 100%;
	}

	.v2 .v2-richtext {
		font-size: 15px;
		line-height: 28px;
	}
}

@media (max-width: 639px) {
	.v2-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   10. Play-knop (video opent fullscreen via GLightbox, .js-play-video)
   ========================================================================== */

.v2 .v2-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 40px;
	border-radius: 6px;
	background: var(--v2-terracotta);
	color: var(--v2-white);
	transform: translate(-50%, -50%);
	transition: background-color .3s ease-out, transform .3s ease-out;
}

.v2 .v2-play .v2-icon {
	margin-left: 2px;
}

.v2 .v2-play:hover,
.v2 .v2-play:focus-visible {
	background: var(--v2-orange);
	color: var(--v2-white);
	transform: translate(-50%, -50%) scale(1.08);
}

/* Overzichtskaarten: play-knop links onder in de foto */
.v2 .v2-play--corner {
	top: auto;
	left: 20px;
	bottom: 20px;
	transform: none;
}

.v2 .v2-play--corner:hover,
.v2 .v2-play--corner:focus-visible {
	transform: scale(1.08);
}

/* ==========================================================================
   11. Hero (homepage)
   Design: 1710x540 op een artboard van 1920 (105px marge), radius 20, groene gradient
   (91deg, #2C5A5F -> transparant) over 88% van de breedte camoufleert de smallere video.
   ========================================================================== */

/* 30px kaartrand (thema) + 10px = 40px onder de kaartrand, zoals in het design */
.v2-hero {
	margin: 10px clamp(16px, 5.5vw, 105px) 0;
}

.v2-hero__box {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 540px;
	border-radius: 20px;
	background: var(--v2-teal);
	overflow: hidden;
	isolation: isolate;
}

.v2-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.v2-hero__media .swiper,
.v2-hero__media .swiper-wrapper,
.v2-hero__media .swiper-slide {
	height: 100%;
}

.v2-hero__slide img,
.v2-hero__slide video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2-hero__box::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: 100%;
	background: linear-gradient(90deg, #2c5a5f 0%, #2c5a5f 30%, rgba(44, 90, 95, .85) 45%, rgba(44, 90, 95, .5) 62%, rgba(44, 90, 95, .18) 80%, rgba(44, 90, 95, 0) 100%);
}

.v2-hero__content {
	width: 100%;
}

.v2-hero__text {
	max-width: 470px;
	padding-block: 70px;
}

.v2 .v2-hero h1 {
	margin: 0 0 34px;
	font: 700 48px/52px var(--v2-font);
	color: var(--v2-white);
}

.v2 .v2-hero__intro {
	max-width: 400px;
	margin: 0 0 32px;
	font: 400 15px/30px var(--v2-font);
	color: var(--v2-white);
}

.v2 .v2-hero__intro p {
	margin: 0;
	font: inherit;
	color: inherit;
}

.v2-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

@media (max-width: 767px) {
	.v2-hero {
		margin-top: 24px;
	}

	.v2-hero__box {
		min-height: 480px;
		align-items: flex-end;
	}

	.v2-hero__box::before {
		width: 100%;
		background: linear-gradient(180deg, rgba(44, 90, 95, .25) 0%, rgba(44, 90, 95, .92) 70%);
	}

	.v2-hero__text {
		padding-block: 40px 30px;
	}

	.v2 .v2-hero h1 {
		font-size: 32px;
		line-height: 38px;
	}
}

/* ==========================================================================
   12. USP-balk
   ========================================================================== */

.v2-usps {
	margin-top: 10px;
}

.v2-usps__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 12px 30px;
	margin: 0;
	padding: 24px 30px;
	border-radius: var(--v2-radius);
	background: var(--v2-surface);
	list-style: none;
}

.v2-usps__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 400 14px/20px var(--v2-font);
	color: var(--v2-text);
}

.v2-usps__item strong {
	font-weight: 700;
}

.v2-usps__item .v2-icon--check {
	color: var(--v2-terracotta);
}

.v2-usps__stars {
	display: inline-flex;
	gap: 1px;
	font-size: 11px;
	color: var(--v2-star);
}

@media (max-width: 767px) {
	.v2-usps__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		gap: 14px 16px;
		padding: 18px 16px;
	}

	.v2-usps__item {
		align-items: flex-start;
		font-size: 13px;
		line-height: 18px;
	}
}

/* ==========================================================================
   13. Uitgelichte ervaring (videokaart): kaart 1130x320, radius 20, foto 500 breed
   ========================================================================== */

.v2-featured {
	padding-bottom: 50px;
}

.v2-featured .v2-label {
	margin-top: 0;
}

.v2-featured__card {
	display: grid;
	grid-template-columns: 500px minmax(0, 1fr);
	margin-top: 22px;
	min-height: 320px;
	border: 1px solid var(--v2-tag);
	border-radius: 20px;
	background: var(--v2-white);
	overflow: hidden;
}

.v2-featured__media {
	position: relative;
	min-height: 320px;
	background: var(--v2-tag);
}

.v2-featured__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2-featured__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	padding: 30px 40px 30px 60px;
}

.v2 .v2-featured__quote {
	max-width: 550px;
	margin: 0;
	padding: 0;
	border: 0;
	font: italic 400 22px/35px var(--v2-font-quote);
	color: var(--v2-text);
}

.v2 .v2-featured__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: 0;
	font: 400 14px/22px var(--v2-font);
	color: var(--v2-text);
}

.v2 .v2-featured__meta strong {
	font-weight: 700;
}

.v2 .v2-featured__meta span::before {
	content: '\2022';
	margin-right: 8px;
}

.v2-link--underline {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.v2 .v2-featured__meta {
		flex-direction: column;
	}

	.v2 .v2-featured__meta span::before {
		display: none;
	}
}

@media (max-width: 1023px) {
	.v2-featured__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.v2-featured__media {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.v2-featured__body {
		padding: 24px;
	}

	.v2 .v2-featured__quote {
		font-size: 19px;
		line-height: 30px;
	}
}

/* ==========================================================================
   14. Tekst + foto/video (image_text): tekst 550 | foto 500x550, radius 20
   Foto links of rechts via "position"; op mobiel staat de foto boven de tekst.
   ========================================================================== */

.v2-split__inner {
	display: grid;
	grid-template-columns: 500px 550px;
	justify-content: space-between;
	gap: 80px;
	align-items: center;
}

.v2-split--reverse .v2-split__inner {
	grid-template-columns: 550px 500px;
}

.v2-split--reverse .v2-split__media {
	order: 2;
}

.v2-split--text-only .v2-split__inner {
	grid-template-columns: minmax(0, 760px);
	justify-content: start;
}

.v2-split__media {
	position: relative;
	aspect-ratio: 500 / 550;
	border-radius: 20px;
	background: var(--v2-tag);
	overflow: hidden;
}

.v2-split__media .swiper,
.v2-split__media .swiper-wrapper,
.v2-split__media .swiper-slide {
	height: 100%;
}

.v2-split__media .swiper-slide {
	position: relative;
}

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

/* Pijltjes alleen bij meerdere foto's */
.v2-split__arrows {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 4;
	display: flex;
	gap: 8px;
}

.v2-split__arrows .swiper-button-prev,
.v2-split__arrows .swiper-button-next {
	position: static;
	width: 36px;
	height: 36px;
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: var(--v2-terracotta);
	color: var(--v2-white);
}

/* Chevron getekend met CSS, onafhankelijk van een icoonfont */
.v2-split__arrows .swiper-button-prev::after,
.v2-split__arrows .swiper-button-next::after {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	border: solid currentColor;
	border-width: 2px 2px 0 0;
	font-size: 0;
}

.v2-split__arrows .swiper-button-prev::after {
	transform: translateX(2px) rotate(-135deg);
}

.v2-split__arrows .swiper-button-next::after {
	transform: translateX(-2px) rotate(45deg);
}

.v2 .v2-split__text .v2-h2 {
	margin-bottom: 18px;
}

.v2-split__text .v2-buttons {
	margin-top: 30px;
}

/* Achtergrond-varianten (oude opties "licht" en "donker") */
.v2-split--light {
	background: var(--v2-surface);
	padding-block: 60px;
}

.v2-split--round {
	border-radius: 0 0 30px 30px;
}

.v2-split--dark {
	background: var(--v2-gradient);
	padding-block: 60px;
}

.v2 .v2-split--dark :is(.v2-h2, .v2-richtext, .v2-richtext p) {
	color: var(--v2-white);
}

@media (max-width: 1023px) {
	.v2-split__inner,
	.v2-split--reverse .v2-split__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.v2-split--reverse .v2-split__media {
		order: 0;
	}

	.v2-split__media {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   15. Expertises: 3 kolommen, om en om wit blok (foto + tekst) / foto met gradient
   Wit: foto 350x290 + tekst, radius 10. Foto: 350x400, gradient transparant -> zwart 75%.
   ========================================================================== */

/* Gelijke rijhoogte alleen bij meerdere kolommen */
@media (min-width: 640px) {
	.v2-grid--equal {
		grid-auto-rows: 1fr;
	}
}

.v2 .v2-xp {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--v2-radius);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
}

.v2 .v2-xp--white {
	border: 1px solid var(--v2-tag);
	background: var(--v2-white);
}

.v2-xp__image {
	position: relative;
	aspect-ratio: 350 / 290;
	background: var(--v2-tag);
}

.v2-xp__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2 .v2-xp__label {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 3;
}

.v2-xp__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 20px 25px 22px;
}

.v2-xp__icon img {
	display: block;
	max-height: 48px;
	width: auto;
}

.v2 .v2-xp__title {
	margin: 0;
	font: 700 20px/30px var(--v2-font);
	color: var(--v2-teal);
}

.v2 .v2-xp__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin: 0;
	overflow: hidden;
	font: 400 14px/22px var(--v2-font);
	color: var(--v2-text);
}

.v2-xp__link {
	margin-top: auto;
	padding-top: 6px;
}

/* Foto over de volledige achtergrond */
.v2 .v2-xp--photo {
	justify-content: flex-end;
	min-height: 400px;
	color: var(--v2-white);
}

.v2 .v2-xp--photo .v2-xp__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	aspect-ratio: auto;
}

.v2 .v2-xp--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .75) 100%);
}

.v2 .v2-xp--photo .v2-xp__body {
	flex: none;
	padding: 25px;
}

.v2 .v2-xp--photo :is(.v2-xp__title, .v2-xp__text) {
	color: var(--v2-white);
}

/* ==========================================================================
   16. Werkwijze: 4 kaarten 260 breed (foto 260x200), altijd gelijke hoogte
   ========================================================================== */

.v2-process__steps {
	display: grid;
	gap: 30px;
}

.v2-process__steps--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.v2-step {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--v2-tag);
	border-radius: var(--v2-radius);
	background: var(--v2-white);
	overflow: hidden;
}

.v2-step__image {
	position: relative;
	aspect-ratio: 260 / 200;
	background: var(--v2-tag);
}

.v2-step__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2-step__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	padding: 18px 25px 25px;
}

.v2 .v2-step__nr {
	margin: 0;
	line-height: 1.6;
}

.v2 .v2-step__title {
	margin: 0 0 8px;
	font: 700 20px/30px var(--v2-font);
	color: var(--v2-teal);
}

@media (max-width: 1023px) {
	.v2-process__steps--4,
	.v2-process__steps--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 639px) {
	.v2-process__steps--4,
	.v2-process__steps--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   17. Ervaringskaarten (reviews): 350x400, foto met gradient of wit blok
   ========================================================================== */

.v2-reviews--gray {
	background: var(--v2-surface);
}

.v2 .v2-xcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 400px;
	border-radius: var(--v2-radius);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow .3s ease-out;
}

.v2 .v2-xcard:hover,
.v2 .v2-xcard:focus-visible {
	box-shadow: none;
}

.v2-xcard__tags {
	padding: 15px 15px 0;
}

.v2-xcard__main {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 25px 25px;
}

.v2-xcard__name {
	font: 700 15px/20px var(--v2-font);
}

/* Subtitel (of de Quote als er geen subtitel is): cursief */
.v2 :is(.v2-xcard__quote, .v2-xcard__subtitle) {
	margin: 0;
	font: italic 400 18px/28px var(--v2-font-quote);
}

/* Quote onder de subtitel: gewone tekst (design: 15px op 30px, iets meer ruimte boven) */
.v2 .v2-xcard__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 5px 0 0;
	overflow: hidden;
	font: 400 15px/30px var(--v2-font);
}

/* Sterren */
.v2 .v2-rating {
	display: flex;
	gap: 4px; /* ster zichtbaar ±13px, 19px van punt tot punt (design) */
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}

.v2 .v2-rating li {
	margin: 0;
	width: 15px;
	height: 15px;
}

.v2 .v2-rating svg {
	display: block;
	width: 100%;
	height: 100%;
}

.v2 .v2-rating__fill {
	fill: #e2bf41;
}

.v2 .v2-rating__base {
	fill: rgba(146, 169, 173, .45);
}

.v2 .v2-xcard--photo .v2-rating__base {
	fill: rgba(255, 255, 255, .4);
}

/* Weergave: foto */
.v2 .v2-xcard--photo {
	color: var(--v2-white);
}

.v2-xcard__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.v2-xcard__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.v2 .v2-xcard--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .75) 100%);
}

.v2 .v2-xcard--photo .v2-xcard__main {
	margin-top: auto;
}

/* Weergave: wit */
.v2 .v2-xcard--white {
	border: 1px solid var(--v2-tag);
	background: var(--v2-white);
	color: var(--v2-text);
}

.v2 .v2-xcard--white .v2-xcard__main {
	margin-top: 40px;
}

.v2-xcard__author {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: auto 15px 0;
	padding: 18px 10px 22px;
	border-top: 1px solid var(--v2-tag);
	color: var(--v2-text);
}

.v2-xcard__avatar {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--v2-tag);
	overflow: hidden;
}

.v2-xcard__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* ==========================================================================
   18. Team: 4 kaarten 260 breed (foto 260x225). Klikbaar = zoom on hover.
   ========================================================================== */

.v2-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

.v2 .v2-member {
	display: block;
	border: 1px solid var(--v2-tag);
	border-radius: var(--v2-radius);
	background: var(--v2-white);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: transform .3s var(--v2-ease), box-shadow .3s var(--v2-ease);
}

.v2 a.v2-member:hover,
.v2 a.v2-member:focus-visible {
	box-shadow: var(--v2-shadow);
	color: inherit;
	transform: scale(1.04);
}

.v2-member__image {
	position: relative;
	aspect-ratio: 260 / 225;
	background: var(--v2-tag);
}

.v2-member__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
}

.v2-member__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 101px;
	padding: 16px 15px 20px;
	text-align: center;
}

.v2-member__name {
	font: 700 15px/22px var(--v2-font);
	color: var(--v2-teal);
}

.v2-member__role {
	font: 400 13px/20px var(--v2-font);
	color: var(--v2-muted);
}

@media (max-width: 1023px) {
	.v2-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

/* ==========================================================================
   19. Nieuws: 3 kaarten 350 breed (foto 350x280), titel en "Meer informatie"
   ========================================================================== */

.v2 .v2-ncard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--v2-tag);
	border-radius: var(--v2-radius);
	background: var(--v2-white);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow .3s ease-out;
}

.v2 .v2-ncard:hover,
.v2 .v2-ncard:focus-visible {
	box-shadow: none;
	color: inherit;
}

.v2-ncard__image {
	position: relative;
	aspect-ratio: 350 / 280;
	background: var(--v2-tag);
}

.v2-ncard__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2 .v2-ncard__tag {
	position: absolute;
	top: 15px;
	left: 15px;
}

.v2-ncard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-height: 150px;
	padding: 20px 25px 25px;
}

.v2 .v2-ncard__title {
	margin: 0;
	font: 700 20px/30px var(--v2-font);
	color: var(--v2-teal);
}

.v2-ncard__body .v2-link {
	margin-top: auto;
}

/* ==========================================================================
   20. Contactblok: tekst + formulier 550 | foto 500, radius 20
   ========================================================================== */

.v2-contact__inner {
	display: grid;
	grid-template-columns: 550px 500px;
	justify-content: space-between;
	gap: 80px;
	align-items: stretch;
}

.v2-contact--no-image .v2-contact__inner {
	grid-template-columns: minmax(0, 760px);
	justify-content: start;
}

/* In de HTML staat de foto vóór het formulier (zie registered-block.twig); "order" bepaalt de plek */
.v2-contact__main {
	order: 1;
	min-width: 0;
}

.v2-contact__media {
	order: 2; /* standaard: foto rechts */
}

.v2-contact--image-left .v2-contact__inner {
	grid-template-columns: 500px 550px;
}

.v2-contact--image-left .v2-contact__media {
	order: 0; /* foto links */
}

.v2 .v2-contact__text {
	margin: 12px 0 26px;
}

.v2 .v2-contact__text a {
	font-weight: 700;
	color: var(--v2-terracotta);
	text-decoration: underline;
}

.v2-contact__media {
	position: relative;
	min-height: 420px;
	border-radius: 20px;
	background: var(--v2-tag);
	overflow: hidden;
}

.v2-contact__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gravity Forms (legacy "gravity-theme", styling uit gform.scss in app.css). De selectors hieronder zijn bewust
   zo specifiek dat ze die regels overschrijven; de !important's zijn nodig omdat de labels daar ook !important hebben. */
.v2 .v2-contact .gform_wrapper {
	margin: 0;
}

.v2 .v2-contact .gform_wrapper .gform_body .gfield {
	margin-bottom: 18px;
}

.v2 .v2-contact .gform_wrapper .gform_body .gfield .gfield_label {
	margin: 0 0 6px;
	font: 700 13px/20px var(--v2-font);
	color: var(--v2-text);
}

.v2 .v2-contact .gfield_label.gform-field-label {
	margin-bottom: 6px !important;
	font-size: 13px !important;
}

.v2 .v2-contact .gform_wrapper .gform_body .gfield .gfield_label .gfield_required {
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--v2-text);
}

.v2 .v2-contact .gform_wrapper .gform_body .gfield :is(input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='url'], input[type='date'], select, textarea) {
	width: 100%;
	height: 40px;
	min-height: 0;
	padding: 0 14px;
	border: 1px solid var(--v2-tag);
	border-radius: var(--v2-radius-sm);
	background-color: var(--v2-surface);
	box-shadow: none;
	font: 400 14px/20px var(--v2-font);
	color: var(--v2-text);
}

.v2 .v2-contact .gform_wrapper .gform_body .gfield textarea[rows] {
	height: 150px;
	padding: 12px 14px;
}

.v2 .v2-contact .gform_wrapper .gform_body .gfield :is(input, textarea)::placeholder {
	color: var(--v2-muted);
	opacity: 1;
}

.v2 .v2-contact .gform_wrapper .gform_body .gfield :is(input, select, textarea):focus {
	border-color: var(--v2-teal);
	outline: 0;
	background-color: var(--v2-white);
	box-shadow: 0 0 0 3px rgba(44, 90, 95, .15);
}

.v2 .v2-contact .gform_wrapper .gform_footer {
	justify-content: flex-start !important;
	margin-top: 12px !important;
}

/* Verzendknop: <button class="button"> met label + pictogram; zelfde look als .v2-btn */
.v2 .v2-contact .gform_wrapper .gform_footer :is(button, .button, input[type='submit']) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	min-width: 170px;
	min-height: 40px;
	margin: 0;
	padding: 9px 24px;
	border: 1px solid var(--v2-terracotta);
	border-radius: var(--v2-radius-sm);
	background: var(--v2-terracotta);
	box-shadow: none;
	font: 600 15px/20px var(--v2-font);
	color: var(--v2-white);
	cursor: pointer;
	transition: background-color .3s ease-out, border-color .3s ease-out;
}

.v2 .v2-contact .gform_wrapper .gform_footer :is(button, .button, input[type='submit']):hover,
.v2 .v2-contact .gform_wrapper .gform_footer :is(button, .button, input[type='submit']):focus-visible {
	border-color: var(--v2-orange);
	background: var(--v2-orange);
}

.v2 .v2-contact .gform_wrapper .gform_footer .button i {
	font-size: 11px;
	transition: transform .3s ease-out;
}

.v2 .v2-contact .gform_wrapper .gform_footer .button:hover i {
	transform: translateX(4px);
}

/* De Customizer ("Extra CSS", staat in de database) bevat opmaak met "#gform_1.vd-form ... !important":
   grijze velden in alle statussen en een verzendknop over de volle breedte. Het design wil lichte velden
   en een compacte knop links. Zelfde scope als die regels (formulier 1), met meer specificiteit. */
.v2 .v2-contact .v2-contact__form #gform_1.vd-form :is(input:not([type='submit']):not([type='button']), textarea, select) {
	background-color: var(--v2-surface) !important;
}

.v2 .v2-contact .v2-contact__form #gform_1.vd-form .gform_footer :is(button, input[type='submit'], .gform_button) {
	display: inline-flex !important;
	width: auto !important;
}

@media (max-width: 1023px) {
	.v2-contact__inner,
	.v2-contact--image-left .v2-contact__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	/* mobiel: eerst het formulier, daarna de foto */
	.v2-contact--image-left .v2-contact__media,
	.v2-contact__media {
		order: 2;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 767px) {
	.v2 .v2-contact .gform_wrapper .gform_footer :is(button, .button, input[type='submit']),
	.v2 .v2-contact .v2-contact__form #gform_1.vd-form .gform_footer :is(button, input[type='submit'], .gform_button) {
		width: 100% !important;
	}
}

/* ==========================================================================
   21. Vestigingen: 2 kaarten (foto 550x297, radius 10), plaats, klinieknaam en adres
   ========================================================================== */

.v2-locations__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.v2-loc__image {
	position: relative;
	display: block;
	aspect-ratio: 550 / 297;
	border-radius: var(--v2-radius);
	background: var(--v2-tag);
	overflow: hidden;
}

.v2-loc__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--v2-ease);
}

a.v2-loc__image:hover img {
	transform: scale(1.04);
}

.v2 .v2-loc__title {
	margin: 20px 0 8px;
	font: 700 20px/30px var(--v2-font);
	color: var(--v2-teal);
}

.v2 .v2-loc__name,
.v2 .v2-loc__address {
	margin: 0;
	font: 400 14px/24px var(--v2-font);
	font-style: normal;
	color: var(--v2-text);
}

@media (max-width: 767px) {
	.v2-locations__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   22. Banner (hero van subpagina's): 1710x430, gradient over de foto, breadcrumbs erboven
   ========================================================================== */

.v2-banner {
	margin: 10px clamp(16px, 5.5vw, 105px) 0;
}

/* Breadcrumbs staan boven de banner; dan is er geen extra ruimte nodig */
.v2 .breadcrumbs {
	margin: 0;
	padding: 14px 0 10px;
	font-size: 12px;
	line-height: 20px;
}

.v2 .breadcrumbs .grid-container {
	width: 100%;
	max-width: calc(var(--v2-container) + 2 * var(--v2-gutter));
	margin-inline: auto;
	padding-inline: var(--v2-gutter);
}

.v2 .breadcrumbs + .v2-banner {
	margin-top: 0;
}

.v2-banner__box {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 430px;
	border-radius: 20px;
	background: var(--v2-teal);
	overflow: hidden;
	isolation: isolate;
}

.v2-banner__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.v2-banner__media :is(picture, img) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2-banner__box::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: 100%;
	background: linear-gradient(90deg, #2c5a5f 0%, #2c5a5f 30%, rgba(44, 90, 95, .85) 45%, rgba(44, 90, 95, .5) 62%, rgba(44, 90, 95, .18) 80%, rgba(44, 90, 95, 0) 100%);
}

.v2-banner__content {
	width: 100%;
}

.v2-banner__text {
	max-width: 500px;
	padding-block: 50px;
}

.v2 .v2-banner__label {
	display: block;
	margin: 0 0 6px;
	font: 700 11px/1.6 var(--v2-font);
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--v2-muted);
}

.v2 .v2-banner h1 {
	margin: 0 0 24px;
	font: 700 48px/52px var(--v2-font);
	color: var(--v2-white);
}

.v2 .v2-banner__intro {
	margin: 0 0 30px;
	font: 400 15px/30px var(--v2-font);
	color: var(--v2-white);
}

.v2 .v2-banner__intro > *:last-child {
	margin-bottom: 0;
}

.v2 .v2-banner__intro p {
	margin: 0 0 14px;
	font: inherit;
	color: inherit;
}

.v2 .v2-banner__extra {
	margin-top: 22px;
	font: 400 14px/24px var(--v2-font);
	color: rgba(255, 255, 255, .85);
}

.v2 .v2-banner__extra p {
	margin: 0;
	font: inherit;
	color: inherit;
}

@media (max-width: 767px) {
	.v2-banner {
		margin-top: 24px;
	}

	.v2-banner__box {
		min-height: 380px;
		align-items: flex-end;
	}

	.v2-banner__box::before {
		width: 100%;
		background: linear-gradient(180deg, rgba(44, 90, 95, .35) 0%, rgba(44, 90, 95, .94) 65%);
	}

	.v2-banner__text {
		padding-block: 40px 30px;
	}

	.v2 .v2-banner h1 {
		font-size: 32px;
		line-height: 38px;
	}

	.v2-banner--no-image-mobile .v2-banner__media {
		display: none;
	}

	.v2-banner--no-image-mobile .v2-banner__box::before {
		background: var(--v2-gradient-vertical);
	}
}

/* ==========================================================================
   23. Ervaringen-overzicht: filter (pills met aantal) en tegels 350 breed, 3 per rij
   ========================================================================== */

.v2-overview .v2-label {
	margin-top: 0;
}

.v2-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 10px;
	margin: 22px 0 38px;
}

.v2 .v2-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 22px;
	border: 1px solid var(--v2-tag);
	border-radius: 30px;
	background: var(--v2-white);
	font: 600 13px/20px var(--v2-font);
	color: var(--v2-teal);
	cursor: pointer;
	transition: background-color .25s ease-out, border-color .25s ease-out, color .25s ease-out;
}

.v2 .v2-pill:hover,
.v2 .v2-pill:focus-visible {
	border-color: var(--v2-teal);
}

.v2 .v2-pill.is-active {
	border-color: var(--v2-teal);
	background: var(--v2-teal);
	color: var(--v2-white);
}

.v2-pill__count {
	font-weight: 400;
	opacity: .6;
}

.v2-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 50px 40px;
}

.v2-tile {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--v2-tag);
	border-radius: var(--v2-radius);
	background: var(--v2-white);
	overflow: hidden;
}

.v2-tile[hidden] {
	display: none;
}

@media (min-width: 1024px) {
	.v2-tile {
		min-height: 500px; /* design: alle tegels 350x500 */
	}
}

.v2-tile__media {
	position: relative;
	flex: none;
	aspect-ratio: 350 / 200;
	background: var(--v2-tag);
}

.v2-tile__image {
	position: absolute;
	inset: 0;
	display: block;
}

.v2-tile__image :is(picture, img) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.v2-tile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 24px 30px 30px;
}

.v2 .v2-tile__quote {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	margin: 0;
	overflow: hidden;
	font: italic 400 18px/28px var(--v2-font-quote);
	color: var(--v2-text);
}

.v2 .v2-tile__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	margin: 0;
	overflow: hidden;
	font: 400 15px/26px var(--v2-font);
	color: var(--v2-text);
}

.v2-tile__name {
	font: 700 15px/24px var(--v2-font);
	color: var(--v2-text);
}

.v2-tile__link {
	margin-top: auto;
}

@media (max-width: 1023px) {
	.v2-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 24px;
	}
}

@media (max-width: 639px) {
	.v2-tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.v2-filter {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--v2-gutter));
		padding-inline: var(--v2-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.v2 .v2-pill {
		flex: none;
	}
}

/* ==========================================================================
   24. Uitgelichte specialist: kaart 1130x463, tekst links, foto 400 breed rechts (radius 20)
   ========================================================================== */

.v2-specialist__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	min-height: 463px;
	margin-top: 8px;
	border-radius: 20px;
	background: var(--v2-gradient);
	overflow: hidden;
}

.v2-specialist__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 50px 40px 50px 60px;
	color: var(--v2-white);
}

.v2 .v2-specialist__name {
	margin: 0 0 4px;
	font: 600 28px/38px var(--v2-font);
	color: var(--v2-white);
}

.v2 .v2-specialist__role {
	margin: 0 0 16px;
	font: 400 15px/32px var(--v2-font);
	color: var(--v2-tag);
}

.v2-specialist__tags {
	margin-bottom: 22px;
}

.v2 .v2-specialist__tags .v2-tag {
	background: rgba(255, 255, 255, .16);
	color: var(--v2-white);
}

.v2 .v2-specialist__quote,
.v2 .v2-specialist__info {
	max-width: 610px;
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	font: italic 400 18px/28px var(--v2-font-quote);
	color: var(--v2-white);
}

.v2 .v2-specialist__info {
	font-style: normal;
	font-family: var(--v2-font);
	font-size: 15px;
	line-height: 26px;
}

.v2-specialist__photo {
	position: relative;
	min-height: 463px;
}

.v2-specialist__photo :is(picture, img) {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 15%;
}

@media (max-width: 767px) {
	.v2-specialist__buttons {
		align-self: stretch;
	}
}

@media (max-width: 1023px) {
	.v2-specialist__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.v2-specialist__photo {
		order: -1;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.v2-specialist__body {
		padding: 30px 24px 34px;
	}
}

/* ==========================================================================
   25. Aanpassingen uit de specs van de ervaringen-schermen
   ========================================================================== */

/* USP-balk: achtergrond #EEF0F1 (specs scherm 3) */
.v2-usps__list {
	background: #eef0f1;
}

/* Quote in de tekst: 50px inspringen, aanhalingsteken Georgia italic 60px */
.v2 .v2-richtext blockquote {
	padding-left: 50px;
}

.v2 .v2-richtext blockquote::before {
	top: 6px;
	font: italic 400 60px/28px var(--v2-font-quote);
}

/* ==========================================================================
   26. Blogoverzicht: kop, filter (pills met aantal), kaarten 550x560 in 2 kolommen, paginering
   ========================================================================== */

.v2-bloglist {
	padding-top: 20px;
}

.v2 .v2-blog__title {
	margin: 0 0 12px;
	font: 700 48px/60px var(--v2-font);
	color: var(--v2-teal);
}

.v2 .v2-blog__intro {
	max-width: var(--v2-container);
	margin: 0 0 30px;
	font: 700 15px/32px var(--v2-font);
	color: var(--v2-text);
}

.v2 .v2-blog__intro p {
	margin: 0 0 12px;
	font: inherit;
	color: inherit;
}

.v2 a.v2-pill {
	text-decoration: none;
}

.v2-blogs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 30px;
}

.v2-blogcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 560px;
	border: 1px solid var(--v2-tag);
	border-radius: 8px;
	background: var(--v2-white);
	overflow: hidden;
	transition: background-color .3s ease-out;
}

/* hover: lichtroze kaart (design) */
.v2-blogcard:hover,
.v2-blogcard:focus-within {
	background: var(--v2-blush);
}

.v2-blogcard__media {
	position: relative;
	flex: none;
	aspect-ratio: 550 / 300;
	background: var(--v2-tag);
}

.v2-blogcard__media :is(picture, img) {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2 .v2-blogcard__tag {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 1;
}

.v2-blogcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 28px 30px 30px;
}

.v2 .v2-blogcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin: 0;
	font: 400 12px/20px var(--v2-font);
	color: var(--v2-text);
}

.v2-blogcard__meta span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.v2 .v2-blogcard__title {
	margin: 0;
	font: 700 20px/30px var(--v2-font);
	color: var(--v2-teal);
}

.v2 .v2-blogcard__title a {
	color: inherit;
	text-decoration: none;
}

/* hele kaart klikbaar via de titel */
.v2-blogcard__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

.v2 .v2-blogcard__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 0;
	overflow: hidden;
	font: 400 14px/24px var(--v2-font);
	color: var(--v2-text);
}

.v2-blogcard__more {
	margin-top: auto;
}

.v2-blogcard:hover .v2-icon--arrow {
	transform: translateX(4px);
}

/* Variant zonder foto: teal lijn bovenaan, categorie bij de meta */
.v2-blogcard--plain {
	min-height: 0;
}

.v2-blogcard--plain::before {
	content: '';
	position: absolute;
	top: 0;
	left: 30px;
	right: 30px;
	height: 5px;
	border-radius: 0 0 5px 5px;
	background: var(--v2-teal);
}

.v2-blogcard--plain .v2-blogcard__body {
	padding-top: 38px;
}

.v2-blog__empty {
	padding: 40px 0;
	font: 400 15px/30px var(--v2-font);
	color: var(--v2-text);
}

/* Paginering: 1 2 3 ... 15 links, vorige/volgende rechts */
.v2-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 30px;
	margin-top: 50px;
	padding-top: 24px;
	border-top: 1px solid var(--v2-tag);
	font: 600 13px/20px var(--v2-font);
}

.v2-pagination__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.v2-pagination__pages li {
	margin: 0;
}

.v2 .v2-pagination .page-numbers {
	color: var(--v2-terracotta);
	text-decoration: none;
}

.v2 .v2-pagination .page-numbers.current {
	font-weight: 700;
	color: var(--v2-teal);
}

.v2 .v2-pagination .page-numbers.dots {
	color: var(--v2-muted);
}

.v2-pagination__nav {
	display: flex;
	gap: 26px;
}

.v2 .v2-pagination a {
	color: var(--v2-terracotta);
	text-decoration: none;
	transition: color .2s;
}

.v2 .v2-pagination a:hover,
.v2 .v2-pagination a:focus-visible {
	color: var(--v2-orange);
}

.v2-blog__results.is-loading {
	opacity: .45;
	pointer-events: none;
	transition: opacity .2s;
}

@media (max-width: 767px) {
	.v2 .v2-blog__title {
		font-size: 34px;
		line-height: 42px;
	}

	.v2-blogs {
		grid-template-columns: minmax(0, 1fr);
	}

	.v2-blogcard {
		min-height: 0;
	}

	.v2-pagination {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   27. Blogdetail: tekstkolom 750 | inhoudsopgave 290 (meelopend), titel 45/50
   ========================================================================== */

.v2-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

html:has(.v2-article) {
	scroll-behavior: smooth;
}

.v2-article {
	padding-top: 24px;
}

.v2-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 750px) 290px;
	justify-content: space-between;
	align-items: start;
	gap: 0 60px;
}

.v2 .v2-article__title {
	margin: 0 0 26px;
	font: 700 45px/50px var(--v2-font);
	color: var(--v2-teal);
}

.v2 .v2-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	margin: 0 0 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--v2-tag);
	font: 400 12px/20px var(--v2-font);
	color: var(--v2-text);
}

.v2-article__meta span:not(.v2-tag) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.v2 .v2-article__intro {
	margin: 0 0 34px;
	font: 700 15px/32px var(--v2-font);
	color: var(--v2-text);
}

.v2 .v2-article__intro p {
	margin: 0 0 16px;
	font: inherit;
	color: inherit;
}

.v2-figure {
	margin: 0 0 50px;
}

.v2-figure :is(picture, img) {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.v2 .v2-figure figcaption,
.v2 .v2-figure__caption {
	margin: 12px 0 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--v2-tag);
	font: italic 400 13px/30px var(--v2-font);
	color: var(--v2-text);
}

.v2-block {
	margin-bottom: 50px;
	scroll-margin-top: 140px;
}

.v2 .v2-block__title {
	margin: 0 0 16px;
	font: 700 30px/40px var(--v2-font);
	color: var(--v2-teal);
}

.v2 h3.v2-block__title {
	font-size: 24px;
	line-height: 34px;
}

.v2 h4.v2-block__title {
	font-size: 20px;
	line-height: 30px;
}

.v2 .v2-block__intro {
	margin: 0 0 18px;
	font: 400 15px/30px var(--v2-font);
	color: var(--v2-text);
}

.v2-block__buttons {
	margin-top: 26px;
}

/* koppen die de redactie in de tekst zelf heeft gezet */
.v2 .v2-article .v2-richtext :is(h2, h3, h4, h5) {
	margin: 32px 0 12px;
	font-family: var(--v2-font);
	font-weight: 700;
	color: var(--v2-teal);
}

.v2 .v2-article .v2-richtext h2 {
	font-size: 28px;
	line-height: 38px;
}

.v2 .v2-article .v2-richtext h3 {
	font-size: 22px;
	line-height: 32px;
}

.v2 .v2-article .v2-richtext :is(h4, h5) {
	font-size: 18px;
	line-height: 28px;
}

.v2 .v2-article .v2-richtext > :first-child {
	margin-top: 0;
}

/* lijsten in rijke tekst */
.v2 .v2-richtext ul,
.v2 .v2-richtext ol {
	padding-left: 22px;
}

.v2 .v2-richtext ul {
	list-style: disc;
}

.v2 .v2-richtext ol {
	list-style: decimal;
}

.v2 .v2-richtext li {
	margin: 0 0 6px;
}

/* Tabel: teal kop, om en om gekleurde rijen */
.v2-table-wrap {
	margin: 10px 0 12px;
	border-radius: 8px;
	overflow-x: auto;
}

.v2 .v2-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font: 400 14px/22px var(--v2-font);
	color: var(--v2-text);
}

.v2 .v2-table :is(thead, tbody) {
	border: 0;
	background: transparent;
}

.v2 .v2-table thead th {
	padding: 14px 24px;
	background: var(--v2-teal);
	font: 700 13px/20px var(--v2-font);
	text-align: left;
	color: var(--v2-white);
}

.v2 .v2-table tbody td {
	padding: 14px 24px;
	border: 0;
	border-bottom: 1px solid var(--v2-tag);
	background: var(--v2-white);
}

.v2 .v2-table tbody tr:nth-child(even) td {
	background: #eef3f3;
}

.v2 .v2-table tbody td:first-child {
	font-weight: 700;
}

/* Accordeon (<details>): open item lichtroze, cirkel met pijltje */
.v2-faq {
	margin: 10px 0 26px;
}

.v2-faq__item {
	border-bottom: 1px solid var(--v2-tag);
}

.v2-faq__item[open] {
	border-bottom-color: transparent;
	border-radius: 8px;
	background: var(--v2-blush);
}

.v2-faq__question {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 16px;
	font: 700 15px/24px var(--v2-font);
	color: var(--v2-text);
	list-style: none;
	cursor: pointer;
}

.v2-faq__question::-webkit-details-marker {
	display: none;
}

.v2-faq__question:focus-visible {
	outline: 2px solid var(--v2-orange);
	outline-offset: 2px;
}

.v2-faq__icon {
	position: relative;
	flex: none;
	order: -1;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--v2-teal);
	transition: background-color .2s;
}

.v2-faq__icon::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 7px;
	width: 6px;
	height: 6px;
	border: solid var(--v2-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform .2s, top .2s;
}

.v2-faq__item[open] .v2-faq__icon {
	background: var(--v2-terracotta);
}

.v2-faq__item[open] .v2-faq__icon::before {
	top: 9px;
	transform: rotate(225deg);
}

.v2 .v2-faq__answer {
	padding: 0 16px 18px 52px;
	font-size: 14px;
	line-height: 26px;
}

/* Slider (zonder bibliotheek): scroll-snap, pijltjes en onderschrift "2/3 tekst" */
.v2-slider {
	margin: 0 0 50px;
}

.v2-slider__viewport {
	border-radius: 8px;
	overflow: hidden;
}

.v2-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

.v2-slide {
	position: relative;
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

.v2-slide :is(picture, img) {
	display: block;
	width: 100%;
	height: auto;
}

.v2-slider__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--v2-tag);
}

.v2-slider__arrows {
	display: flex;
	gap: 6px;
}

.v2 .v2-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--v2-terracotta);
	color: var(--v2-white);
	cursor: pointer;
	transition: background-color .2s;
}

.v2 .v2-slider__btn:hover,
.v2 .v2-slider__btn:focus-visible {
	background: var(--v2-orange);
}

.v2-slider__btn[data-v2-prev] .v2-icon {
	transform: rotate(180deg);
}

.v2 .v2-slider__caption {
	margin: 0;
	font: italic 400 13px/20px var(--v2-font);
	color: var(--v2-text);
}

/* CTA-blok: teal kaart met tekst, knop en een foto die iets uitsteekt */
.v2-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 10px 0 50px;
	padding: 40px;
	border-radius: 10px;
	background: var(--v2-gradient);
	color: var(--v2-white);
}

.v2-cta--image {
	grid-template-columns: minmax(0, 1fr) 210px;
	align-items: center;
	gap: 30px;
}

.v2 .v2-cta__title {
	margin: 0 0 14px;
	font: 600 26px/36px var(--v2-font);
	color: var(--v2-white);
}

.v2 .v2-cta__lead {
	margin: 0 0 22px;
	font: 400 15px/26px var(--v2-font);
	color: rgba(255, 255, 255, .9);
}

.v2-cta__media {
	align-self: stretch;
	margin: -22px -16px -22px 0;
	border-radius: 10px;
	box-shadow: var(--v2-shadow);
	overflow: hidden;
}

.v2-cta__media :is(picture, img) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Inhoudsopgave (290 breed, verloopt 143deg) en deelknoppen */
.v2-article__aside {
	position: sticky;
	top: 130px;
	align-self: start;
}

.v2-toc {
	padding: 24px 40px 36px;
	border-radius: 10px;
	background: linear-gradient(143deg, #1c676c 0%, #05383a 100%);
	color: var(--v2-white);
}

.v2 .v2-toc__title {
	margin: 0 0 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
	font: 700 20px/30px var(--v2-font);
	color: var(--v2-white);
}

.v2-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.v2-toc__list li {
	position: relative;
	margin: 0 0 18px;
	font: 600 15px/24px var(--v2-font);
}

.v2-toc__list li:last-child {
	margin-bottom: 0;
}

.v2 .v2-toc__list a {
	color: var(--v2-white);
	text-decoration: none;
	transition: color .2s;
}

.v2 .v2-toc__list a:hover,
.v2 .v2-toc__list a:focus-visible {
	color: var(--v2-tag);
}

/* actief hoofdstuk: gedempt met een klein pijltje ervoor (design) */
.v2 .v2-toc__list .is-active a {
	color: #a0bbc1;
}

.v2-toc__list .is-active::before {
	content: '\203A';
	position: absolute;
	left: -16px;
	top: 0;
	color: #a0bbc1;
}

.v2-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	border: 1px solid var(--v2-tag);
	border-radius: 50px;
	background: var(--v2-white);
}

.v2 .v2-share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1.5px solid var(--v2-terracotta);
	border-radius: 50%;
	font-size: 11px;
	color: var(--v2-terracotta);
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.v2 .v2-share a:hover,
.v2 .v2-share a:focus-visible {
	background: var(--v2-terracotta);
	color: var(--v2-white);
}

.v2-share--aside {
	margin-top: 35px;
}

.v2-share--inline {
	display: none;
}

.v2-toc-toggle {
	display: none;
}

@media (max-width: 1023px) {
	.v2-article__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.v2 .v2-article__title {
		font-size: 32px;
		line-height: 38px;
	}

	.v2-article__aside {
		position: static;
	}

	.v2-share--aside {
		display: none;
	}

	.v2-share--inline {
		display: flex;
		margin: 0 0 34px;
	}

	/* inhoudsopgave: zwevende knop aan de rand, opent een paneel */
	.v2-toc-toggle {
		position: fixed;
		top: 150px;
		right: 0;
		z-index: 60;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 0;
		border-radius: 10px 0 0 10px;
		background: var(--v2-teal);
		box-shadow: -2px 2px 14px rgba(0, 0, 0, .2);
		color: var(--v2-white);
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s;
	}

	.v2-toc-toggle.is-shown {
		opacity: 1;
		pointer-events: auto;
	}

	.v2-toc {
		position: fixed;
		top: 90px;
		right: 16px;
		left: 16px;
		z-index: 61;
		max-height: calc(100vh - 140px);
		padding: 22px 28px 28px;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .25s, transform .25s, visibility 0s .25s;
		box-shadow: var(--v2-shadow);
	}

	.v2-toc.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.v2-cta--image {
		grid-template-columns: minmax(0, 1fr);
	}

	.v2-cta__media {
		margin: 0;
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 767px) {
	.v2 .v2-block__title {
		font-size: 26px;
		line-height: 34px;
	}

	.v2-cta {
		padding: 28px 24px;
	}

	.v2 .v2-faq__answer {
		padding-left: 16px;
	}
}

/* ==========================================================================
   28. Aanbevolen blogs: lichte band met 2 kaarten
   ========================================================================== */

.v2-related {
	padding-block: 30px 50px;
}

.v2-related__band {
	margin-inline: clamp(16px, 5.5vw, 105px);
	padding: 60px 0;
	border-radius: 30px;
	background: #eef0f1;
}

/* ==========================================================================
   29. Videomodal (blogslider): iframe uit het veld "oEmbed"
   ========================================================================== */

.v2-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(5, 56, 58, .86);
}

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

.v2-modal__box {
	position: relative;
	width: min(100%, 1100px);
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	background: #000;
	overflow: hidden;
}

.v2-modal__box iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.v2 .v2-modal__close {
	position: absolute;
	top: 14px;
	right: 18px;
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	font-size: 26px;
	line-height: 40px;
	color: var(--v2-white);
	cursor: pointer;
}

/* ==========================================================================
   30. Team als slider (meer dan 4 teamleden): 4 tegels zichtbaar, pijltjes en swipen
   ========================================================================== */

.v2-team__grid--slider {
	display: flex;
	margin: -12px;
	padding: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-padding-inline: 12px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.v2-team__grid--slider::-webkit-scrollbar {
	display: none;
}

.v2-team__grid--slider > .v2-member {
	flex: 0 0 calc((100% - 90px) / 4);
	scroll-snap-align: start;
}

.v2-teamslider__nav {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 22px;
}

.v2 .v2-teamslider__nav .v2-slider__btn:disabled {
	background: var(--v2-tag);
	color: var(--v2-muted);
	cursor: default;
}

@media (max-width: 1023px) {
	.v2-team__grid--slider {
		gap: 20px;
	}

	.v2-team__grid--slider > .v2-member {
		flex-basis: calc((100% - 20px) / 2);
	}
}

/* ==========================================================================
   31. Oude blokken in de kleuren van het nieuwe design
   ========================================================================== */

/* Contactblok met adressen (/contact/): hetzelfde formulier als in het nieuwe contactblok (kopie van sectie 20, voor .contact-block) */
/* Gravity Forms (legacy "gravity-theme", styling uit gform.scss in app.css). De selectors hieronder zijn bewust
   zo specifiek dat ze die regels overschrijven; de !important's zijn nodig omdat de labels daar ook !important hebben. */
.v2 .contact-block .gform_wrapper {
	margin: 0;
}

.v2 .contact-block .gform_wrapper .gform_body .gfield {
	margin-bottom: 18px;
}

.v2 .contact-block .gform_wrapper .gform_body .gfield .gfield_label {
	margin: 0 0 6px;
	font: 700 13px/20px var(--v2-font);
	color: var(--v2-text);
}

.v2 .contact-block .gfield_label.gform-field-label {
	margin-bottom: 6px !important;
	font-size: 13px !important;
}

.v2 .contact-block .gform_wrapper .gform_body .gfield .gfield_label .gfield_required {
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--v2-text);
}

.v2 .contact-block .gform_wrapper .gform_body .gfield :is(input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='url'], input[type='date'], select, textarea) {
	width: 100%;
	height: 40px;
	min-height: 0;
	padding: 0 14px;
	border: 1px solid var(--v2-tag);
	border-radius: var(--v2-radius-sm);
	background-color: var(--v2-surface);
	box-shadow: none;
	font: 400 14px/20px var(--v2-font);
	color: var(--v2-text);
}

.v2 .contact-block .gform_wrapper .gform_body .gfield textarea[rows] {
	height: 150px;
	padding: 12px 14px;
}

.v2 .contact-block .gform_wrapper .gform_body .gfield :is(input, textarea)::placeholder {
	color: var(--v2-muted);
	opacity: 1;
}

.v2 .contact-block .gform_wrapper .gform_body .gfield :is(input, select, textarea):focus {
	border-color: var(--v2-teal);
	outline: 0;
	background-color: var(--v2-white);
	box-shadow: 0 0 0 3px rgba(44, 90, 95, .15);
}

.v2 .contact-block .gform_wrapper .gform_footer {
	justify-content: flex-start !important;
	margin-top: 12px !important;
}

/* Verzendknop: <button class="button"> met label + pictogram; zelfde look als .v2-btn */
.v2 .contact-block .gform_wrapper .gform_footer :is(button, .button, input[type='submit']) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	min-width: 170px;
	min-height: 40px;
	margin: 0;
	padding: 9px 24px;
	border: 1px solid var(--v2-terracotta);
	border-radius: var(--v2-radius-sm);
	background: var(--v2-terracotta);
	box-shadow: none;
	font: 600 15px/20px var(--v2-font);
	color: var(--v2-white);
	cursor: pointer;
	transition: background-color .3s ease-out, border-color .3s ease-out;
}

.v2 .contact-block .gform_wrapper .gform_footer :is(button, .button, input[type='submit']):hover,
.v2 .contact-block .gform_wrapper .gform_footer :is(button, .button, input[type='submit']):focus-visible {
	border-color: var(--v2-orange);
	background: var(--v2-orange);
}

.v2 .contact-block .gform_wrapper .gform_footer .button i {
	font-size: 11px;
	transition: transform .3s ease-out;
}

.v2 .contact-block .gform_wrapper .gform_footer .button:hover i {
	transform: translateX(4px);
}

/* De Customizer ("Extra CSS", staat in de database) bevat opmaak met "#gform_1.vd-form ... !important":
   grijze velden in alle statussen en een verzendknop over de volle breedte. Het design wil lichte velden
   en een compacte knop links. Zelfde scope als die regels (formulier 1), met meer specificiteit. */
.v2 .contact-block .contact-block__form #gform_1.vd-form :is(input:not([type='submit']):not([type='button']), textarea, select) {
	background-color: var(--v2-surface) !important;
}

.v2 .contact-block .contact-block__form #gform_1.vd-form .gform_footer :is(button, input[type='submit'], .gform_button) {
	display: inline-flex !important;
	width: auto !important;
}

@media (max-width: 767px) {
	.v2 .contact-block .gform_wrapper .gform_footer :is(button, .button, input[type='submit']),
	.v2 .contact-block .contact-block__form #gform_1.vd-form .gform_footer :is(button, input[type='submit'], .gform_button) {
		width: 100% !important;
	}
}

.v2 .contact-block .contact-block__text h2 {
	margin-bottom: 16px;
	font: 700 30px/40px var(--v2-font);
	color: var(--v2-teal);
}

/* Groene band ("Landelijk vastgestelde kosten"): het oude grijsgroen (#86a1a5) gaf wit op grijs, te weinig contrast.
   Nu dezelfde teal verloop als de andere donkere vlakken. */
.v2 .quality--green .quality__bg {
	background: var(--v2-gradient);
	color: var(--v2-white);
}

.v2 .quality--green .quality__subtitle {
	color: var(--v2-tag);
}

.v2 .quality--green :is(h2, p, li) {
	color: var(--v2-white);
}

.v2 .quality--green a:not(.button):not(.v2-btn) {
	color: var(--v2-white);
	text-decoration: underline;
}

/* ==========================================================================
   32. Feedbackronde 1 (november 2026)
   ========================================================================== */

/* Hover-lijn voor alle tekstlinks, overal hetzelfde als "Bekijk alle ervaringen" op home (#5 #6 #11 #18 #19 #22 #25
   #29 #30 #36 #37 #40 #43 #44): in rust geen lijn, bij hover groeit een lijn van 1px van links naar rechts, 3px onder
   de tekst. Bij links met een pijl loopt de lijn alleen onder de tekst (pijl 9px + ruimte 8px).
   Werking: --v2-on (0 of 1) wordt geërfd. Een link, een klikbare kaart (a) of een blogkaart zet hem bij hover op 1,
   zodat ook de link ín de kaart ("Meer informatie", "Lees meer") zijn lijn tekent. De zware selector hieronder wint van
   de oude themaregels (onderstreping bij hover in footer en breadcrumbs, eigen overgang bij de paginering). */
.v2 :is(
	.v2-link,
	.v2-line,
	.v2-pagination a.page-numbers,
	.footer-new a:not(.btn):not(.v2-btn):not(.logo):not(:has(i, svg, img)),
	.copyright a,
	.breadcrumbs a,
	.v2-contact__text a,
	.contact-block__text a,
	.vd-cost-label,
	.v2-richtext a:not(.v2-btn),
	.v2-topbar__menu a,
	.v2-topbar__reviews > span:not(.v2-stars)
) {
	background-image: linear-gradient(transparent calc(100% - 1px), currentcolor calc(100% - 1px));
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: calc(var(--v2-on, 0) * (100% - var(--v2-arrow, 0px))) 100%;
	padding-bottom: 3px;
	text-decoration: none;
	transition: background-size .3s cubic-bezier(.645, .045, .355, 1), color .2s;
}

.v2 :is(
	.v2-link,
	.v2-line,
	.v2-pagination a.page-numbers,
	.footer-new a:not(.btn):not(.v2-btn):not(.logo):not(:has(i, svg, img)),
	.copyright a,
	.breadcrumbs a,
	.v2-contact__text a,
	.contact-block__text a,
	.vd-cost-label,
	.v2-richtext a:not(.v2-btn),
	.v2-topbar__menu a,
	.v2-topbar__reviews > span:not(.v2-stars)
):is(:hover, :focus-visible) {
	--v2-on: 1;
	text-decoration: none;
}

.v2 a:is(:hover, :focus-visible),
.v2 .v2-blogcard:is(:hover, :focus-within) {
	--v2-on: 1;
}

/* actief item in de bovenbalk: lijn blijft staan */
.v2 .v2-topbar__menu .is-active > a {
	--v2-on: 1;
}

.v2 :is(.v2-link, .v2-line):has(.v2-icon--arrow) {
	--v2-arrow: 17px;
}

/* In een kaart (kolom-flexbox) zou de link de volle breedte krijgen en de lijn dus ook: link zo breed als zijn tekst */
.v2 .v2-link {
	width: fit-content;
}

/* Kennisbank: de lijn hoort onder "Lees meer", niet onder de titel (de titel-link maakt de hele kaart klikbaar) */
.v2 .v2-blogcard__title a {
	background: none;
	text-decoration: none;
}

/* "Meer vragen tonen": de eigen lijn van het thema (::after) uit, de lijn hierboven neemt het over */
.v2 .faq-block__view-more::after {
	display: none;
}

/* 100px tussen de USP-balk (of de banner) en het eerste blok, net als tussen alle andere blokken (#33 #41) */
.v2 :is(.v2-usps, .v2-banner) + .v2-section {
	padding-top: 100px;
}

/* Uitgelichte specialist zonder label erboven: geen extra 8px, zodat de afstand ook hier 100px is */
.v2 .v2-specialist .v2-container > .v2-specialist__card:first-child {
	margin-top: 0;
}

/* Kaarten: kleine zoom-in bij hover in plaats van een schaduw (#9 #10 #16 #17 #20) */
.v2 :is(a.v2-xp, .v2-ncard, .v2-xcard) {
	transition: transform .35s var(--v2-ease), box-shadow .3s;
}

.v2 :is(a.v2-xp, .v2-ncard, .v2-xcard):is(:hover, :focus-visible) {
	transform: scale(1.03);
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.v2 :is(a.v2-xp, .v2-ncard, .v2-xcard):is(:hover, :focus-visible) {
		transform: none;
	}
}

/* Megamenu: bruin blokje naast het actieve item op het 2e niveau (#34) */
.v2 .v2-mega__link {
	position: relative;
}

.v2 .v2-mega__item.is-open > .v2-mega__link::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var(--v2-terracotta);
}

/* Formulier (#21 #23 #24 #26) */
.v2 :is(.v2-contact, .contact-block) .gform_wrapper .gform_body .gfield :is(input, select, textarea):focus {
	border-color: var(--v2-teal);
	box-shadow: 0 0 0 1px var(--v2-teal); /* oogt als een rand van 2px, zonder dat het veld verschuift */
}

.v2 :is(.v2-contact, .contact-block) .gform-datepicker-toggle,
.v2 :is(.v2-contact, .contact-block) .gform-datepicker-toggle *,
.v2 :is(.v2-contact, .contact-block) .gform_wrapper .ginput_container_date .gform-datepicker-toggle .gform-calendar-icon::before {
	color: var(--v2-teal);
}

.v2 :is(.v2-contact, .contact-block) .vd-cost-label {
	color: var(--v2-terracotta);
	border-bottom: 0; /* geen stippellijn: de hover-lijn neemt het over */
}

.v2 #gform_1 .gfield_description {
	display: none;
}

/* Contactblok: foto 760px hoog en onderaan gelijk met de verzendknop (#28) */
@media (min-width: 1024px) {
	.v2 .v2-contact--has-image .v2-contact__inner {
		align-items: end;
	}

	.v2 .v2-contact--has-image .v2-contact__media {
		height: 760px;
		min-height: 0;
	}
}

/* USP's op mobiel onder elkaar (#32) */
@media (max-width: 767px) {
	.v2 .v2-usps__list {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}
}

/* Iconen bij datum en leestijd in #92A9AD (#45 #46): het icoon is een masker, de kleur komt uit CSS */
.v2-meta-icon {
	display: inline-block;
	flex: none;
	width: 16px;
	height: 16px;
	background-color: var(--v2-muted);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

/* Social icons in de footer: het thema kleurt ze bij hover wit met een groen icoon, maar sprong direct om.
   Nu een vloeiende overgang met een kleine zoom-in, net als de kaarten. */
.v2 .footer-new .social a {
	transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--v2-ease);
}

.v2 .footer-new .social a:is(:hover, :focus-visible) {
	background: var(--v2-white);
	border-color: var(--v2-white);
	color: var(--v2-teal);
	transform: scale(1.08);
}

.v2 .footer-new .social a i {
	color: inherit;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.v2 .footer-new .social a:is(:hover, :focus-visible) {
		transform: none;
	}
}

/* ==========================================================================
   33. Eindcontrole mobiel en tablet (november 2026)
   ========================================================================== */

/* "9.6/10"-blokje rechtsonder stond dubbel: het blokje van het thema en de widget van Feedback Company lagen over
   elkaar. Is de widget er, dan het blokje van het thema verbergen. */
body:has(.__fbcw__sticky__sticky-widget) .rating {
	display: none;
}

/* Knoppen met een lange tekst passen op mobiel niet op één regel: tekst laten doorlopen binnen de knop */
@media (max-width: 767px) {
	.v2 .v2-btn {
		white-space: normal;
		text-align: center;
	}
}

/* Zwevende knoppen rechts (review, bellen, mailen) op mobiel kleiner: ze vielen over tekst en koppen.
   Was 46 x 176px, nu 32 x 110px. Tablet en desktop ongewijzigd. */
@media (max-width: 767px) {
	.v2 .ask {
		width: 32px;
	}

	.v2 .ask ul li a {
		width: 32px;
		height: 36px;
	}

	.v2 .ask ul li img {
		width: auto;
		max-width: 16px;
		max-height: 17px;
	}
}

/* Behandelingen-overzicht (oud blok): de pijl rechtsonder viel over de laatste regel tekst.
   !important omdat het thema de padding op mobiel ook met !important zet. */
.v2 .card-treatment:not(.card-treatment--big, .card-treatment--large) .card-treatment__text {
	padding-bottom: 72px !important;
}

/* Tablet: USP's 2 x 2 in plaats van 3 + 1 */
@media (min-width: 768px) and (max-width: 991px) {
	.v2 .v2-usps__list {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		justify-content: space-around;
		gap: 12px 30px;
	}
}

/* Tablet: footerkolommen 2 x 2 in plaats van 4 smalle kolommen (adressen braken af op elk woord) */
@media (min-width: 768px) and (max-width: 1199px) {
	.v2 .footer-new .row > [class*="col-md-3"] {
		flex: 0 0 50%;
		max-width: 50%;
		margin-left: 0;
		margin-bottom: 30px;
	}

	.v2 .footer-new .row > .col-lg-4 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* ==========================================================================
   34. Feedbackronde 2 (november 2026)
   ========================================================================== */

/* --- Formulier: meer contrast. Witte velden met een rand in gedempt huisstijl-groen (ca. 3:1), donkerdere placeholder --- */
.v2 :is(.v2-contact, .contact-block) .gform_wrapper .gform_body .gfield :is(input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='url'], input[type='date'], select, textarea) {
	border-color: #7f999d;
	background-color: var(--v2-white);
	color: var(--v2-text);
}

.v2 :is(.v2-contact, .contact-block) .gform_wrapper .gform_body .gfield :is(input, textarea)::placeholder {
	color: #6b8286;
}

/* Foto naast het formulier: niet meer uitgerekt over de hele hoogte, maar in de eigen verhouding (500 x 580),
   onderaan gelijk met de verzendknop */
@media (min-width: 1024px) {
	.v2 .v2-contact--has-image .v2-contact__media {
		height: auto;
		aspect-ratio: 50 / 58;
		align-self: end;
	}
}

/* --- USP-balk: de sterren-USP overal als vinkje + "Beoordeeld met een 9,6" + sterren erachter (zoals de andere USP's) --- */
.v2 .v2-usps__item--stars {
	align-items: center;
}

.v2 .v2-usps__item--stars .v2-icon--check {
	display: inline-block;
	flex: none;
}

.v2 .v2-usps__item--stars .v2-usps__stars {
	order: 3;
	margin-left: 2px;
}

/* --- Hero en banner met video: afgeronde hoeken ook voor de video (die liep in de hoeken net buiten de ronding) --- */
.v2 :is(.v2-hero__box, .v2-banner__box) {
	clip-path: inset(0 round 20px);
}

/* --- Kaarten: 4 naast elkaar bij 4 of meer kaarten (Behandelingen-kaarten; Werkwijze had dit al bij 4) --- */
.v2-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

.v2 .v2-grid--4 .v2-xp__body {
	padding: 18px 20px 20px;
}

.v2 .v2-grid--4 .v2-xp--photo .v2-xp__body {
	padding: 20px;
}

@media (max-width: 1199px) {
	.v2-grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.v2-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 639px) {
	.v2-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Team met minder dan 4 kaarten: de link "Bekijk het hele team" niet los rechts --- */
@media (min-width: 1024px) {
	/* 3 kaarten: kop net zo breed als de 3 kaarten, link boven de rechterkant van de derde kaart */
	.v2 .v2-team--n3 .v2-head {
		width: calc((100% - 90px) * .75 + 60px);
	}

	/* 1 of 2 kaarten: link onder de tekst */
	.v2 :is(.v2-team--n1, .v2-team--n2) .v2-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

/* --- Oude blokken in de nieuwe stijl: labels, koppen en tekst (Tekstblok, Partners, FAQ, Contact + adressen) --- */
.v2 :is(.quality, .partners, .faq-block, .contact-block) :is(.quality__subtitle, .partners__label, .faq-block__label, .contact-block__label) {
	display: block;
	margin: 0 0 4px;
	font: 700 11px/1.6 var(--v2-font);
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--v2-orange);
}

/* Op het groene tekstblok een lichtere tint van het oranje, anders valt het weg op het groen */
.v2 .quality--green .quality__subtitle {
	color: #eba98c;
}

.v2 :is(.quality, .partners__text, .contact-block__text) h2,
.v2 .faq-block .faq-block__content > :is(h1, h2, h3, h4):not(.faq-block__label) {
	margin: 0 0 16px;
	font: 700 32px/38px var(--v2-font);
}

.v2 :is(.partners__text, .contact-block__text) h2,
.v2 .faq-block .faq-block__content > :is(h1, h2, h3, h4):not(.faq-block__label) {
	color: var(--v2-teal);
}

.v2 :is(.quality, .partners__text, .contact-block__text) p,
.v2 .contact-block address {
	margin-bottom: 16px;
	font: 400 15px/30px var(--v2-font);
}

.v2 :is(.partners__text, .contact-block__text) p,
.v2 .contact-block address,
.v2 .faq-block__answer {
	color: var(--v2-text);
}

.v2 .faq-block__answer,
.v2 .faq-block__answer p {
	font: 400 15px/28px var(--v2-font);
}

.v2 .quality :is(h3, h4) {
	margin: 24px 0 6px;
	font: 700 20px/30px var(--v2-font);
	color: inherit;
}

.v2 .quality__buttons {
	margin-top: 26px;
}

/* --- Partners: kaarten in de nieuwe stijl, in een rij even hoog. Groen (standaard) of wit. --- */
.v2 .partners .grid-x > .cell {
	display: flex;
}

.v2 .partners__column {
	display: flex;
	width: 100%;
	margin-bottom: 0;
}

.v2 .card-partner {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--v2-radius);
	text-decoration: none;
	transition: transform .35s var(--v2-ease);
}

.v2 .card-partner:is(:hover, :focus-visible) {
	transform: scale(1.03);
}

.v2 .card-partner::after {
	display: none;
}

.v2 .card-partner__image {
	flex: none;
	aspect-ratio: 550 / 260;
	overflow: hidden;
}

.v2 .card-partner__image :is(picture, img) {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
}

.v2 .card-partner__text {
	position: relative;
	inset: auto;
	flex: 1;
	border-radius: 0;
	padding: 20px 70px 22px 25px;
	background: var(--v2-gradient-vertical);
}

.v2 .card-partner__text h4 {
	font: 700 20px/30px var(--v2-font);
}

.v2 .card-partner__text .paragraph {
	max-width: none;
	padding-top: 4px;
}

.v2 .card-partner__text .paragraph p {
	margin: 0;
	font: 400 14px/22px var(--v2-font);
}

.v2 .card-partner__text::after {
	right: 22px;
	bottom: 22px;
}

.v2 .partners--white .card-partner {
	border: 1px solid var(--v2-tag);
	background: var(--v2-white);
	color: var(--v2-text);
	overflow: hidden;
}

.v2 .partners--white .card-partner__text {
	background: var(--v2-white);
	color: var(--v2-text);
}

.v2 .partners--white .card-partner__text h4 {
	color: var(--v2-teal);
}

.v2 .partners--white .card-partner__text::after {
	color: var(--v2-white);
}

/* --- Subpagina-overzicht (Behandelingen): kaarten in de nieuwe stijl, 3 naast elkaar, even hoog. Groen of wit. --- */
.v2 .v2-tcard {
	display: flex;
	flex-direction: column;
	border-radius: var(--v2-radius);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: transform .35s var(--v2-ease);
}

.v2 .v2-tcard:is(:hover, :focus-visible) {
	transform: scale(1.03);
}

.v2-tcard__image {
	position: relative;
	flex: none;
	aspect-ratio: 350 / 240;
	background: var(--v2-tag);
}

.v2-tcard__image :is(picture, img) {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v2 .v2-tcard__label {
	position: absolute;
	top: 15px;
	left: 15px;
}

.v2-tcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 20px 25px 22px;
}

.v2 .v2-tcard__title {
	margin: 0;
	font: 700 20px/30px var(--v2-font);
}

.v2 .v2-tcard__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 0;
	overflow: hidden;
	font: 400 14px/22px var(--v2-font);
}

.v2-tcard__link {
	margin-top: auto;
	padding-top: 6px;
}

.v2 .v2-tcard--white {
	border: 1px solid var(--v2-tag);
	background: var(--v2-white);
}

.v2 .v2-tcard--white .v2-tcard__title {
	color: var(--v2-teal);
}

.v2 .v2-tcard--white .v2-tcard__text {
	color: var(--v2-text);
}

.v2 .v2-tcard--green .v2-tcard__body {
	background: var(--v2-gradient-vertical);
}

.v2 .v2-tcard--green :is(.v2-tcard__title, .v2-tcard__text, .v2-tcard__link) {
	color: var(--v2-white);
}

@media (prefers-reduced-motion: reduce) {
	.v2 :is(.v2-tcard, .card-partner):is(:hover, :focus-visible) {
		transform: none;
	}
}

/* --- Breadcrumbs zonder in-beeld-animatie: die begon 100px hoger (onder de header) en bleef daar soms hangen,
   waardoor er een stukje tekst boven de hero zichtbaar was. Vangnet voor pagina's die nog met data-aos in de cache staan. --- */
.v2 .breadcrumbs[data-aos] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* --- Video in de hero: Safari negeert overflow + ronde hoeken bij video; daarom ook de video zelf afronden en een masker
   op het blok (naast de clip-path hierboven) --- */
.v2 :is(.v2-hero__box, .v2-banner__box) {
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.v2 :is(.v2-hero__media, .v2-banner__media) :is(video, iframe) {
	border-radius: 20px;
}

/* --- Partnerkaarten: "Meer informatie" (met de hover-lijn) in plaats van het pijlblokje, zoals de andere kaarten --- */
.v2 .card-partner__text {
	display: flex;
	flex-direction: column;
	padding-right: 25px;
}

.v2 .card-partner__text::after {
	display: none;
}

.v2 .card-partner__link {
	margin-top: auto;
	padding-top: 12px;
	color: var(--v2-white);
}

.v2 .partners--white .card-partner__link {
	color: var(--v2-orange);
}

/* --- Overal 100px, ook rond de oude blokken (Tekstblok, Partners, FAQ's, Downloads, Contact + adressen) en rond
   blokken met een gekleurd vlak. Zelfde systeem als de nieuwe blokken: elk blok heeft 50px boven en onder, dus 100px
   tussen twee blokken. Een gekleurd vlak telt als inhoud (de ruimte binnen het vlak blijft). --- */
.v2 :is(.quality, .partners, .faq-block, .downloads, .contact-block) {
	margin-block: 0;
	padding-block: 50px;
}

/* Tekstblok zonder kleur (standaard): geen extra binnenruimte, die zou als witruimte meetellen */
.v2 .quality:not(.quality--green, .quality--light-gray, .quality--gradient) .quality__bg {
	padding-block: 0;
}

/* FAQ's: het lichte vlak is vrijwel onzichtbaar (#fafafa op #fbfbfb), dus de binnenruimte telt als witruimte */
.v2 .faq-block .faq-block__bg:not(.faq-block__bg--white) {
	padding-block: 0;
}

/* Blokken met een licht of donker vlak over de hele breedte: 50px buiten het vlak, dan is het 100px tot het buurblok */
.v2 .v2-split:is(.v2-split--light, .v2-split--dark) {
	margin-block: 50px;
}

/* Direct na de banner of de USP-balk: 100px (zoals bij de nieuwe blokken) */
.v2 :is(.v2-usps, .v2-banner) + :is(.quality, .partners, .faq-block, .downloads, .contact-block) {
	padding-top: 100px;
}

.v2 :is(.v2-usps, .v2-banner) + .v2-split:is(.v2-split--light, .v2-split--dark) {
	margin-top: 50px;
}

/* Laatste element in een blok geen eigen ondermarge (bijv. de tarieventabel), anders wordt het meer dan 100px */
.v2 .quality__bg .cell > :last-child {
	margin-bottom: 0;
}

/* Contact + adressen: het formulier eronder had op mobiel nog 40px marge en 16px binnenruimte extra
   (uit de eigen CSS van Gravity Forms, met !important; daarom hier ook) */
.v2 .contact-block__form .vd-form:is(#gform_1, [id^="gform_"]) {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* --- FAQ's: zoekveld met ronde hoeken van 3px en een groen zoekicoon, vragen in #eef0f1, opengeklapt #f6ebe7,
   "Meer vragen tonen" als standaard knop --- */
.v2 .faq-block .faq-block__field input {
	border: 1px solid #7f999d;
	border-radius: 3px;
	background: var(--v2-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c5a5f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 16px 50% / 18px 18px;
	padding-left: 46px;
	font: 400 15px/20px var(--v2-font);
	color: var(--v2-text);
}

.v2 .faq-block .faq-block__field input::placeholder {
	color: #6b8286;
	opacity: 1;
}

.v2 .faq-block .faq-block__question {
	border: 1px solid #eef0f1 !important;
	border-radius: 5px;
	background: #eef0f1;
	transition: background-color .2s, border-color .2s;
}

.v2 .faq-block .faq-block__question:not(.faq-block__item) {
	margin-bottom: 9px;
	padding: 18px 24px;
}

.v2 .faq-block .faq-block__question:is(.active, .is-open) {
	border-color: #f6ebe7 !important;
	background: #f6ebe7;
}

.v2 .faq-block .faq-block__view-more.v2-btn {
	display: inline-flex;
	margin-top: 16px;
	padding-bottom: 9px;
	background-image: none;
	color: var(--v2-white);
	text-decoration: none;
}

/* --- Nieuwskaarten (home): datum + leestijd en introtekst zoals op de kennisbank --- */
.v2 .v2-ncard__body {
	gap: 10px;
}

.v2 .v2-ncard__text {
	margin-bottom: 4px;
}

/* --- Gravity Forms met de oude HTML-opbouw (gform_legacy_markup_wrapper, velden als ul/li): de bijbehorende
   stylesheet laadt niet, waardoor er bolletjes stonden en het anti-spamveld en de verborgen velden zichtbaar waren.
   Vangnet; liever in het formulier "oude opmaak" uitzetten. --- */
.v2 .gform_legacy_markup_wrapper :is(ul.gform_fields, ul.gform_fields ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.v2 .gform_legacy_markup_wrapper .gform_fields li {
	list-style: none;
}

.v2 .gform_wrapper :is(.gform_validation_container, .gfield--type-honeypot, .gfield--type-hidden, .gform_hidden) {
	display: none !important;
}

/* --- Gravity Forms + Multiple Columns "Modern Grid": de plugin zet de velden binnen zijn kolommen op marge 0,
   waardoor de ruimte tussen de velden ongelijk werd. Overal weer 18px, net als de velden buiten de kolommen. --- */
.v2 .gform_wrapper .gform_body :is(.gform_fields, .gfmc-col) > .gfield {
	margin: 0 0 18px !important;
}

.v2 .gform_wrapper .gform_body .gfmc-col > .gfield:last-child {
	margin-bottom: 0 !important;
}

.v2 .gform_wrapper .gform_body .gfmc-row {
	margin: 0 0 18px !important;
}

/* --- Subpagina-overzicht met categorieën (behandelingen): filterknoppen boven de kaarten, zoals op de kennisbank --- */
.v2 .v2-subpages--filter .v2-filter {
	margin-bottom: 40px;
}

.v2 [data-v2-filter] .v2-xp[hidden] {
	display: none !important;
}

/* --- FAQ: LiteSpeed laadt de scripts pas na de eerste interactie. Tot dan staat de eerste vraag (is-open) al open
   in plaats van gekleurd en dicht. Daarna regelt het script het (max-height + active); v2.js haalt is-open weg bij een klik. --- */
.v2 .faq-block .faq-block__question.is-open:not(.active) .faq-block__answer {
	max-height: none;
}

/* --- FAQ: de hele balk is klikbaar. Alleen de vraagtekst reageerde op een klik (18px hoog in een balk van 67px),
   dus een klik erboven, eronder of ernaast deed niets. De titel loopt nu met negatieve marges over de binnenruimte
   van de balk; de afmetingen en de plek van de tekst en het pijltje blijven gelijk. --- */
.v2 .faq-block .faq-block__question,
.v2 .faq-block .faq-block__question:not(.faq-block__item) {
	padding: 23px 24px 16px;
}

.v2 .faq-block .faq-block__question-title {
	margin: -23px -24px -16px;
	padding: 23px 54px 24px 24px;
}

.v2 .faq-block .faq-block__question-title::after {
	right: 29px;
}

/* het antwoord boven de titel, zodat een klik in de tekst van het antwoord hem niet dichtklapt */
.v2 .faq-block .faq-block__answer {
	position: relative;
}