/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://tomusborne.com
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the new block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS and is translated into over 25 languages by our amazing community of users. A few of our many features include microdata integration, 9 widget areas, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover) and navigation color presets. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.0.2.1624259470
Updated: 2021-06-21 07:11:10

*/

/* -------------------------------------------------------------------------
   Tekstpagina's die van de live site zijn overgezet
   Deze pagina's hebben geen Elementor-opbouw maar gewone inhoud. Zonder deze
   regels loopt de tekst van rand tot rand over het scherm.
   ------------------------------------------------------------------------- */
.vts-tekstpagina{
	max-width: 880px;
	margin: 0 auto;
	padding: 64px 22px 96px;
	color: #1D3557;
	font-size: 16.5px;
	line-height: 1.75;
}
.vts-tekstpagina h1{
	margin: 0 0 28px;
	font-size: 44px;
	line-height: 1.12;
	font-weight: 800;
	color: #0F1E31;
	text-wrap: balance;
}
.vts-tekstpagina h2{
	margin: 48px 0 14px;
	font-size: 28px;
	line-height: 1.22;
	font-weight: 700;
	color: #0F1E31;
}
.vts-tekstpagina h3{
	margin: 34px 0 10px;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
	color: #0F1E31;
}
.vts-tekstpagina p{ margin: 0 0 18px; }
.vts-tekstpagina ul,
.vts-tekstpagina ol{ margin: 0 0 20px; padding-left: 24px; }
.vts-tekstpagina li{ margin-bottom: 7px; }
.vts-tekstpagina a{ color: #22A56E; }
.vts-tekstpagina img{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 26px 0;
	border-radius: 10px;
}
.vts-tekstpagina > *:first-child{ margin-top: 0; }

@media (max-width: 767px){
	.vts-tekstpagina{ padding: 40px 18px 64px; font-size: 16px; }
	.vts-tekstpagina h1{ font-size: 31px; margin-bottom: 20px; }
	.vts-tekstpagina h2{ font-size: 23px; margin-top: 36px; }
	.vts-tekstpagina h3{ font-size: 19px; margin-top: 26px; }
}

/* Tabellen uit de overgezette pagina's. Op een telefoon zijn ze breder dan
   het scherm; daar mogen ze binnen hun eigen kader horizontaal schuiven. */
.vts-tekstpagina table{
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: .96em;
}
.vts-tekstpagina th,
.vts-tekstpagina td{
	padding: 10px 14px;
	border: 1px solid #E1E8EF;
	text-align: left;
	vertical-align: top;
}
.vts-tekstpagina thead th{ background: #F3F7FA; font-weight: 700; }
.vts-tekstpagina tbody tr:nth-child(even){ background: #FAFCFD; }

@media (max-width: 767px){
	.vts-tekstpagina table{
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.vts-tekstpagina td,
	.vts-tekstpagina th{ padding: 9px 11px; }
}

/* ------------------------------------------------------------------
   Paginakop voor de tekstpagina's

   De header van de site is doorzichtig en gaat ervan uit dat er iets
   donkers achter staat. Zonder kop valt het witte menu weg tegen een
   witte pagina. Deze kop is dezelfde als die van /projecten/: een
   donkere strook van 128px achter de header, met daaronder een lichte
   band waarin de titel staat. De maten komen een op een uit dat
   Elementor-sjabloon.
   ------------------------------------------------------------------ */
.vts-paginakop {
	position: relative;
	margin-top: -120px;
	padding: 178px 20px 50px;
	background: rgba(168, 206, 220, .2);
	border-radius: 0 0 0 15px;
}
/* de donkere strook achter de header */
.vts-paginakop::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(100% - 1750px);
	width: 100%;
	max-width: 1750px;
	height: 128px;
	background: #0F1E31;
	border-radius: 0 0 0 69px;
	pointer-events: none;
}
.vts-paginakop-binnen {
	max-width: 1280px;
	margin: 0 auto;
}
.vts-paginakop h1 {
	margin: 0;
	font-family: 'Mulish', sans-serif;
	font-size: 60px;
	line-height: 1.08;
	font-weight: 700;
	color: #1D3557;
	text-align: center;
	text-wrap: balance;
}
/* de kop staat er al, dus de tekst eronder hoeft minder lucht */
.vts-paginakop + .vts-tekstpagina { padding-top: 56px; }

@media (max-width: 1750px) {
	.vts-paginakop::before { max-width: 1550px; left: calc(100% - 1550px); }
}
@media (max-width: 1550px) {
	.vts-paginakop::before { max-width: none; left: 0; right: 0; width: auto; }
}
@media (max-width: 1024px) {
	.vts-paginakop h1 { font-size: 46px; }
}
@media (max-width: 767px) {
	.vts-paginakop { padding: 158px 20px 30px; border-radius: 0 0 0 10px; }
	.vts-paginakop::before { border-radius: 0 0 0 34px; }
	.vts-paginakop h1 { font-size: 33px; line-height: 1.15; }
	.vts-paginakop + .vts-tekstpagina { padding-top: 40px; }
}

/* ------------------------------------------------------------------
   Tekst-met-beeld rijen om en om

   Elke rij staat in de data als [tekstkolom, fotokolom], dus met de foto
   rechts. De regels hieronder zetten de foto van de oneven rijen links,
   zodat de kanten elkaar afwisselen.

   Het tellen gebeurt met "of .vts-beeldrij", zodat alleen de rijen
   meetellen die op die pagina daadwerkelijk in de pagina staan. Dat is
   nodig omdat JetEngine op de landingspagina's per pagina andere blokken
   weglaat: een vaste kant per blok in het sjabloon klopt dan voor de ene
   pagina wel en voor de andere niet.

   Alleen op desktop; op tablet en mobiel staan de kolommen onder elkaar.
   ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	/* De klasse vts-beeldrij staat op de sectie (daarmee wordt geteld), de
	   klasse vts-beeldrij-rij op de rij zelf. Meestal is dat dezelfde
	   container, maar bij de cta-blokken zit de rij er nog een niveau in.

	   .e-con.e-flex erbij: Elementor's eigen regel voor .e-con-inner weegt
	   even zwaar en staat later in de reeks, dus die wint anders. */
	.e-con.e-flex.vts-beeldrij-rij > .e-con-inner,
	.e-con-full.e-flex.vts-beeldrij-rij { flex-direction: row-reverse; }
	.vts-beeldrij:nth-child(even of .vts-beeldrij) .e-con.e-flex.vts-beeldrij-rij > .e-con-inner,
	.e-con.e-flex.vts-beeldrij-rij:nth-child(even of .vts-beeldrij) > .e-con-inner,
	.vts-beeldrij:nth-child(even of .vts-beeldrij) .e-con-full.e-flex.vts-beeldrij-rij,
	.e-con-full.e-flex.vts-beeldrij-rij:nth-child(even of .vts-beeldrij) { flex-direction: row; }

	/* Het samenstelblok is geen container met twee kolommen maar een eigen
	   raster in een html-widget. Die telt wel mee in de afwisseling, dus
	   verplaatsen we hier zijn beeldkolom. */
	.vts-beeldrij .vts-grid { grid-template-columns: 1fr 1.05fr; }
	.vts-beeldrij .vts-media { order: 0; }
	.vts-beeldrij:nth-child(even of .vts-beeldrij) .vts-grid { grid-template-columns: 1.05fr 1fr; }
	.vts-beeldrij:nth-child(even of .vts-beeldrij) .vts-media { order: 2; }

	/* Het V-watermerk in deze rijen staat in de data rechts (x=744, bij foto
	   links). Als de zigzag de rij spiegelt (foto rechts) valt de V anders
	   achter de foto; deze regels zetten hem dan links, gespiegeld. */
	.vts-beeldrij:nth-child(even of .vts-beeldrij) .e-con.e-flex.vts-beeldrij-rij::before,
	.e-con.e-flex.vts-beeldrij-rij:nth-child(even of .vts-beeldrij)::before,
	.vts-beeldrij:nth-child(even of .vts-beeldrij) .e-con-full.e-flex.vts-beeldrij-rij::before,
	.e-con-full.e-flex.vts-beeldrij-rij:nth-child(even of .vts-beeldrij)::before { background-position-x: 0; }

	/* Het subsidieblok volgt de zigzag niet: de doorsnede-afbeelding staat
	   altijd links, zoals in het klantdesign. */
	.e-con.e-flex.vts-beeldrij-rij.vts-subsidieblok,
	.e-con-full.e-flex.vts-beeldrij-rij.vts-subsidieblok { flex-direction: row-reverse !important; }
	.vts-beeldrij-rij.vts-subsidieblok::before { background-position-x: -60px !important; }
}

/* ============ offertewizard (schuifpui / deur / dakkapel) ============ */

/* kopband: lichte band met de donkere balk achter het doorzichtige menu */
.vts-offerte-kopband { background: #EEF5F8; height: 189px; border-bottom-left-radius: 20px; }
.vts-offerte-kopband-donker { background: #0F1E31; height: 129px; margin-left: max(0px, calc(50vw - 755px)); border-bottom-left-radius: 75px 60px; }
@media (max-width: 1024px) {
	.vts-offerte-kopband { height: 130px; }
	.vts-offerte-kopband-donker { margin-left: 0; height: 110px; border-bottom-left-radius: 40px 30px; }
}

/* stappenlijst in de donkere kolom */
.vts-wiz-stappen { list-style: none; margin: 0; padding: 0; }
.vts-wiz-stappen li { display: flex; align-items: center; gap: 14px; color: #80AFC1; font-size: 16px; margin: 0 0 27px; }
.vts-wiz-stappen li span { width: 28.5px; height: 28.5px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(168,206,220,.4); font-size: 14px; }
.vts-wiz-stappen li.actief { color: #fff; font-weight: 600; }
.vts-wiz-stappen li.actief span, .vts-wiz-stappen li.gedaan span { background: #A8CEDC; border-color: #A8CEDC; color: #0F1E31; font-weight: 700; }
.vts-wiz-lijn { border: 0; border-top: 1px solid rgba(168,206,220,.25); margin: 18px 0 27px; }

/* voortgang boven het formulier */
.vts-wiz-voortgang { margin-bottom: 26px; }
.vts-wiz-staplabel { display: block; font-size: 13px; letter-spacing: .5em; text-transform: uppercase; color: #80AFC1; margin-bottom: 12px; }
.vts-wiz-balk { height: 4px; border-radius: 2px; background: #D7E6EC; overflow: hidden; }
.vts-wiz-balk i { display: block; height: 100%; background: #22A56E; border-radius: 2px; transition: width .25s; }

/* de keuzevragen als pills */
.vts-wizard-form .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 18px; }
.vts-wizard-form .elementor-field-subgroup .elementor-field-option { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(15,30,49,.06); border-radius: 100px; height: 40px; padding: 0 20px; width: auto; }
/* Elementor zet op inline-subgroepen padding-inline-end: 10px op de optie; rechts hoort evenveel lucht als links */
.vts-wizard-form .elementor-field-subgroup .elementor-field-option { padding-inline-end: 20px !important; padding-right: 20px !important; }
.vts-wizard-form .elementor-field-option label { margin: 0; font-weight: 600; font-size: 16px; line-height: 1; color: #0F1E31; cursor: pointer; letter-spacing: 0; text-transform: none; }
.vts-wizard-form .elementor-field-option input { width: 17px; height: 17px; accent-color: #22A56E; margin: 0; flex: none; }
/* de losse adviescheckbox is geen pill en heeft geen groepslabel */
.vts-wizard-form .elementor-field-group-advies > label { display: none; }
.vts-wizard-form .elementor-field-group-advies .elementor-field-option { background: none; border: 0; padding: 0; height: auto; }
.vts-wizard-form .elementor-field-group-advies .elementor-field-option label { font-weight: 400; }

/* faq-categoriefilter (/veelgestelde-vragen/) */
.vts-faq-filter { display: flex; gap: 24px; justify-content: space-between; border-bottom: 1px solid #D8E2EA; overflow-x: auto; scrollbar-width: none; }
/* vraaggroepen: kolommen strak tegen beide randen (Elementor-defaultpadding uit) */
.vts-faq-rij, .vts-faq-kolom { padding: 0 !important; }
.vts-faq-kolom { width: calc(50% - 8px) !important; }
@media (max-width: 1024px) { .vts-faq-kolom { width: 100% !important; } }
.vts-faq-filter::-webkit-scrollbar { display: none; }
.vts-faq-filter button { background: none; border: 0; padding: 4px 2px 15px; font-family: Mulish, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; color: #8AA3B5; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.vts-faq-filter button:hover { color: #0F1E31; }
.vts-faq-filter button.actief { color: #0F1E31; border-bottom-color: #0F1E31; }

/* contactkaarten */
.vts-contactkaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .vts-contactkaarten { grid-template-columns: 1fr; } }
.vts-contactkaart { background: #DCEAF0; border-radius: 15px 15px 75px 15px; padding: 40px 45px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.vts-contactkaart-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #0F1E31; }
.vts-contactkaart-kop svg { flex: none; }
.vts-contactkaart-kop h3 { margin: 0; font-size: 20px; font-weight: 700; color: #0F1E31; }
.vts-contactkaart p { margin: 0 0 22px; font-size: 16px; line-height: 27px; color: #1D3557; }
a.vts-contactkaart-actie, .vts-contactkaart a.vts-contactkaart-actie { margin-top: auto; font-weight: 700; font-size: 18px; color: #0F1E31; text-decoration: none; }
a.vts-contactkaart-actie:hover, .vts-contactkaart a.vts-contactkaart-actie:hover { color: #22A56E; }
.vts-contactkaart-sub { margin-top: 10px; font-size: 14px; line-height: 20px; color: #1D3557; }

/* ============ projectdetail v2 (Figma 'Project vervolg') ============ */

/* fotoband: banner + detailfoto, stekend onder de lichte kopband uit */
.vts-projectband { display: flex; gap: 20px; margin-bottom: -90px; }
.elementor .vts-projectband img { object-fit: cover; height: 430px; border-radius: 15px; min-width: 0; flex: 1 1 62%; width: 62%; }
.elementor .vts-projectband img:last-child:not(:only-child) { flex: 1 1 38%; width: 38%; border-radius: 15px 15px 75px 15px; }
.elementor .vts-projectband img:only-child { flex: 1 1 100%; width: 100%; border-radius: 15px 15px 75px 15px; }
/* tablet: naast elkaar, lager */
@media (max-width: 1024px) {
	.vts-projectband { margin-bottom: -70px; }
	.elementor .vts-projectband img,
	.elementor .vts-projectband img:last-child:not(:only-child),
	.elementor .vts-projectband img:only-child { height: 320px; }
}
/* mobiel: onder elkaar, volle breedte */
@media (max-width: 767px) {
	.vts-projectband { flex-direction: column; gap: 16px; margin-bottom: -60px; }
	.elementor .vts-projectband img,
	.elementor .vts-projectband img:last-child:not(:only-child),
	.elementor .vts-projectband img:only-child { flex: 0 0 auto; width: 100%; height: 240px; }
}

/* gecentreerde intro (categorie-kicker + h1 + tekst) */
.vts-project-kicker { font-family: Mulish, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 3.9px; text-transform: uppercase; color: #80AFC1; line-height: 16px; }
.e-con.vts-project-intro { text-align: center; font-family: Mulish, sans-serif; }
.vts-project-intro .e-con-inner { max-width: 780px; }
.vts-project-intro .vts-project-kicker { margin-bottom: 16px; }
.vts-project-intro .vts-projectveld--content_boven_de_vouw h1 { font-family: Mulish, sans-serif; font-size: 50px; line-height: 55px; font-weight: 700; color: #0F1E31; margin: 0 0 22px; }
.vts-project-intro .vts-projectveld--content_boven_de_vouw p { font-family: Mulish, sans-serif; font-size: 16px; line-height: 27px; color: #1D3557; max-width: none; margin: 0 0 14px; }
@media (max-width: 768px) { .vts-project-intro .vts-projectveld--content_boven_de_vouw h1 { font-size: 34px; line-height: 40px; } }
.vts-project-intro .vts-projectveld--content_boven_de_vouw a { color: #80AFC1; }

/* impressiegalerij: rijen van breed + smal; het geheel rond op 75px,
   elke foto zelf op 15px */
.vts-impressie { display: flex; flex-wrap: wrap; gap: 20px; border-radius: 75px; overflow: hidden; }
.elementor .vts-impressie img { object-fit: cover; height: 400px; border-radius: 15px; min-width: 0; }
.vts-impressie img:nth-child(odd) { width: calc(57% - 10px); }
.vts-impressie img:nth-child(even) { width: calc(43% - 10px); }
.vts-impressie img:last-child:nth-child(odd):not(:first-child) { width: 100%; }
@media (max-width: 768px) {
	.vts-impressie img, .vts-impressie img:nth-child(odd), .vts-impressie img:nth-child(even) { width: 100%; height: 240px; }
}

/* carousel met andere projecten */
.vts-projectcarousel-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.vts-projectcarousel-titel { font-size: 40px; line-height: 46px; font-weight: 700; color: #0F1E31; margin: 12px 0 0; }
.vts-projectcarousel-titel span { color: #A8CEDC; }
.vts-projectcarousel-pijlen { display: flex; gap: 10px; flex: none; }
.vts-projectcarousel-pijlen button { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(15, 30, 49, .25); background: none; color: #0F1E31; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.vts-projectcarousel-pijlen button:hover { background: #0F1E31; border-color: #0F1E31; color: #fff; }
.vts-projectcarousel-pijlen button[data-richting="terug"] svg { transform: scaleX(-1); }
.vts-projectcarousel-baan { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vts-projectcarousel-baan::-webkit-scrollbar { display: none; }
.vts-projectkaart { position: relative; flex: 0 0 calc(33.333% - 16px); scroll-snap-align: start; border-radius: 15px 15px 15px 75px; overflow: hidden; display: block; }
.vts-projectkaart img { width: 100%; height: 340px; object-fit: cover; display: block; transition: transform .3s; }
.vts-projectkaart:hover img { transform: scale(1.04); }
.vts-projectkaart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 30, 49, 0) 40%, rgba(15, 30, 49, .82) 100%); }
.vts-projectkaart-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 26px 26px 34px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.vts-projectkaart-badge { border: 1px solid rgba(255, 255, 255, .55); border-radius: 100px; padding: 3px 13px; font-size: 12px; font-weight: 600; color: #fff; text-transform: lowercase; }
.vts-projectkaart-titel { font-size: 20px; line-height: 26px; font-weight: 700; color: #fff; }
.vts-projectkaart-sub { font-size: 13px; color: rgba(255, 255, 255, .75); }
.vts-projectcarousel-balk { height: 4px; border-radius: 2px; background: #D7E6EC; margin-top: 30px; overflow: hidden; }
.vts-projectcarousel-balk i { display: block; height: 100%; border-radius: 2px; background: #5C7A96; transition: width .2s; }
@media (max-width: 1024px) { .vts-projectkaart { flex-basis: calc(50% - 12px); } }
@media (max-width: 640px) {
	.vts-projectkaart { flex-basis: 86%; }
	.vts-projectcarousel-titel { font-size: 30px; line-height: 36px; }
}

/* ============ projectdetail (single-projecten) ============ */
.vts-projectveld--content_boven_de_vouw h1 { font-size: 50px; line-height: 55px; font-weight: 700; color: #0F1E31; margin: 0 0 18px; }
.vts-projectveld--content_boven_de_vouw p { font-size: 16px; line-height: 25px; color: #1D3557; max-width: 640px; margin: 0; }
@media (max-width: 768px) {
	.vts-projectveld--content_boven_de_vouw h1 { font-size: 34px; line-height: 40px; }
}
.vts-projectveld--tekstveld_1 h2 { font-size: 40px; line-height: 46px; font-weight: 700; color: #0F1E31; margin: 0 0 22px; }
.vts-projectveld--tekstveld_1 p { font-size: 16px; line-height: 25px; color: #1D3557; margin: 0 0 12px; }
.vts-projectbeeld { position: relative; padding: 0 0 26px 26px; }
.vts-projectbeeld::before { content: ""; position: absolute; left: 0; bottom: 0; top: 90px; right: 90px; background: #D8E9EF; border-radius: 15px 15px 15px 75px; }
.vts-projectbeeld img { position: relative; width: 100%; height: auto; aspect-ratio: 627 / 508; object-fit: cover; border-radius: 15px 75px 15px 15px; }
@media (max-width: 768px) { .vts-projectbeeld { padding: 0 0 18px 18px; } .vts-projectbeeld::before { top: 60px; right: 60px; } }
.vts-projectgalerij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vts-projectgalerij img { width: 100%; height: 280px; object-fit: cover; border-radius: 15px; }
.vts-projectgalerij img:first-child { border-radius: 15px 15px 15px 75px; }
@media (max-width: 1024px) { .vts-projectgalerij { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vts-projectgalerij { grid-template-columns: 1fr; } .vts-projectgalerij img { height: 220px; } }

/* ============ showcase-carousel ([vts_showcase]) ============ */
.vts-showcase { position: relative; }
.vts-showcase-baan { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px calc(50% - 21%); scrollbar-width: none; }
.vts-showcase-baan::-webkit-scrollbar { display: none; }
.vts-showcase-item { flex: 0 0 42%; min-width: 0; scroll-snap-align: center; cursor: pointer; }
.vts-showcase-item img { width: 100%; height: auto; border-radius: 15px; display: block; }
.vts-showcase-pijl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; border-radius: 50%; box-shadow: 0 6px 18px rgba(15, 30, 49, .22); }
.vts-showcase-pijl svg { display: block; }
.vts-showcase-pijl--terug { left: 3%; }
.vts-showcase-pijl--terug svg { transform: scaleX(-1); }
.vts-showcase-pijl--verder { right: 3%; }
.vts-showcase-pijl:hover svg circle { fill: #0F1E31; }
@media (max-width: 768px) {
	.vts-showcase-baan { gap: 16px; padding: 6px calc(50% - 37%); }
	.vts-showcase-item { flex-basis: 74%; }
	.vts-showcase-pijl svg { width: 36px; height: 36px; }
	.vts-showcase-pijl--terug { left: 8px; }
	.vts-showcase-pijl--verder { right: 8px; }
}
.vts-showcase-kop { font-size: 40px; line-height: 46px; font-weight: 700; color: #ACD0DD; margin: 0 0 34px; text-align: center; }
.vts-showcase-kop span { color: #1D3557; }
@media (max-width: 768px) { .vts-showcase-kop { font-size: 30px; line-height: 36px; } }

/* showcase-verfraaiing: lichte band, signatuurhoek en diepte op het actieve
   beeld, vervagende randen en voortgangsstippen */
.vts-showcase { background: #EEF5F8; border-radius: 15px 75px 15px 15px; padding: 50px 0 28px; overflow: hidden; }
.vts-showcase-kop { margin-bottom: 20px; }
.vts-showcase-baan { padding: 18px calc(50% - 21%) 58px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.vts-showcase-item img { transition: border-radius .35s ease, box-shadow .35s ease; }
.vts-showcase-item.actief img { border-radius: 15px 75px 15px 15px; box-shadow: 0 20px 42px rgba(15, 30, 49, .16); }
.vts-showcase-pijl { box-shadow: 0 8px 22px rgba(15, 30, 49, .28); }
.vts-showcase-stippen { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -26px 20px 0; position: relative; z-index: 2; }
.vts-showcase-stip { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: rgba(15, 30, 49, .18); cursor: pointer; transition: width .3s ease, background .3s ease; }
.vts-showcase-stip:hover { background: rgba(15, 30, 49, .4); }
.vts-showcase-stip.actief { width: 26px; background: #22A56E; }
@media (max-width: 768px) {
	.vts-showcase { border-radius: 15px 40px 15px 15px; padding: 32px 0 20px; }
	.vts-showcase-baan { padding: 12px calc(50% - 37%) 42px; }
	.vts-showcase-stippen { margin-top: -16px; }
}

/* ============ klantervaringen: reviewkaarten (live-look) ============ */
.vts-reviews-band { background: #F5F8FA; padding: 70px 20px 90px; }
.vts-reviews { columns: 3; column-gap: 30px; max-width: 1240px; margin: 0 auto; }
.vts-reviewkaart { break-inside: avoid; background: #fff; border-radius: 15px; box-shadow: 0 12px 34px rgba(15,30,49,.07); padding: 28px 30px 24px; margin: 0 0 30px; font-family: 'Mulish', sans-serif; }
.vts-review-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vts-sterren { color: #F6B93B; font-size: 17px; letter-spacing: 3px; line-height: 1; }
.vts-review-badge { background: #EEF2F5; color: #5B6B7E; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 5px 14px; white-space: nowrap; }
.vts-review-naam { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 12px 0 0; font-size: 20px; line-height: 1.25; font-weight: 700; color: #0F1E31; }
.vts-review-naam .vts-review-g { flex: none; margin-top: 3px; }
.vts-review-quote { display: block; margin: 18px 0 12px; }
.vts-reviewkaart p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; color: #33475C; }
.vts-reviewkaart p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .vts-reviews { columns: 2; } }
@media (max-width: 700px) { .vts-reviews-band { padding: 40px 16px 60px; } .vts-reviews { columns: 1; } }

/* ============ werkwijze: intro + tijdlijn (/werkwijze/) ============ */
.vts-werkwijze { max-width: 960px; }
.vts-werkwijze-intro { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.vts-werkwijze-intro h2 { margin: 0 0 18px; font-size: 40px; line-height: 46px; color: #0F1E31; text-wrap: balance; }
.vts-werkwijze-intro p { margin: 0; font-size: 16px; line-height: 27px; color: #1D3557; }
.vts-tekstpagina .vts-tijdlijn { list-style: none; margin: 0 auto; padding: 0 0 0 84px; max-width: 700px; position: relative; }
.vts-tijdlijn::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 3px; background: #22A56E; border-radius: 2px; }
.vts-tekstpagina .vts-tijdlijn-stap { position: relative; margin: 0 0 56px; padding-top: 6px; }
.vts-tekstpagina .vts-tijdlijn-stap:last-child { margin-bottom: 0; }
.vts-tijdlijn-nr { position: absolute; left: -84px; top: 0; width: 45px; height: 45px; border-radius: 50%; background: #0F1E31; color: #fff; font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px #fff; }
.vts-werkwijze .vts-tijdlijn h3 { margin: 0 0 10px; font-size: 22px; line-height: 28px; color: #0F1E31; }
.vts-werkwijze .vts-tijdlijn p { margin: 0; font-size: 16px; line-height: 27px; color: #1D3557; }
.vts-tijdlijn-cta { text-align: center; margin: 56px 0 0; }
.vts-knop { display: inline-flex; align-items: center; gap: 10px; background: #22A56E; color: #fff !important; border-radius: 100px; padding: 14px 30px; font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 16px; text-decoration: none; transition: background .15s; }
.vts-knop:hover { background: #0F1E31; }
@media (max-width: 767px) {
	.vts-werkwijze-intro { margin-bottom: 40px; }
	.vts-werkwijze-intro h2 { font-size: 30px; line-height: 36px; }
	.vts-tekstpagina .vts-tijdlijn { padding-left: 62px; }
	.vts-tijdlijn::before { left: 16px; }
	.vts-tijdlijn-nr { left: -62px; width: 36px; height: 36px; font-size: 14px; }
	.vts-tekstpagina .vts-tijdlijn-stap { margin-bottom: 40px; }
}

/* ============ winactie (/winactie/, Elementor canvas) ============ */
/* Elementors svg-regel (.elementor-widget-image a img[src$=".svg"]{width:100%}) weegt zwaarder dan een kale klasse */
.elementor-widget-image.vts-win-logo a img[src$=".svg"], .elementor-widget-image.vts-win-logo img { width: 230px !important; max-width: 70vw !important; height: auto; }
/* de aangeleverde deurcompositie (een transparante png), stekend onder het lichte vlak uit */
.vts-win-deuren { position: relative; margin: 6px 0 0; }
.vts-win-deuren img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto -40px; }
.vts-win-links { position: relative; }
.vts-win-links::before { content: ""; position: absolute; left: -40px; right: 10px; top: -30px; bottom: 110px; background: #E3EDF2; border-radius: 30px; z-index: -1; }
@media (max-width: 1024px) {
	.vts-win-links::before { left: -16px; right: -16px; bottom: 70px; }
	.vts-win-deuren img { margin-bottom: -20px; }
}
	.vts-win-deur--midden { margin-bottom: -30px; }
}
	.vts-win-deur--midden { margin-bottom: -20px; }
}