/* ------------------------------------------------------------------
   Extra binnenpagina-blokken: sectiekop/intro, USP-strook,
   team uitgelicht en stappenplan.

   Blijft binnen de bestaande stijl van de site:
     navy   #1D2B5B  (koppen, knoppen, navy kaarten)
     muted  #8489A8  (bodytekst, kleine labels boven een titel)
     lijn   rgba(29,43,91,.14)
     Roboto, koppen in kapitalen met letter-spacing .04em

   Geen gouden accenten: goud komt in het thema enkel voor op de vaste
   "Waardebepaling"-tab, niet in de inhoud.

   Alles is gescopeerd onder .vk-* zodat het niets anders raakt.
   ------------------------------------------------------------------ */

.vk-intro,
.vk-usps,
.vk-team,
.vk-stappen {
	--vk-navy: #1D2B5B;
	--vk-goud: #D9A61E;
	--vk-goud-dk: #b98a0c;
	--vk-muted: #8489A8;
	--vk-lijn: rgba(29, 43, 91, 0.14);
	--vk-tint: #EEF0F7;
}

/* ---------------------------------- klein label boven een titel ----
   muted grijs, zoals .team-grd-item-des label en .contact-info-dsc-tp span
   elders op de site, met een navy streepje ervoor */
.vk-label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vk-muted);
	margin-bottom: 12px;
}

/* streepje in het navy van de site, zelfde maat als het streepje op de
   knoppen en bij de opsommingen */
.vk-label::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--vk-navy);
	flex: none;
}

.vk-label--center {
	justify-content: center;
}

/* ------------------------------------------- sectiekop / intro ---- */
.vk-intro {
	margin: 6px 0 10px;
}

/* met kerncijferkaart: tekst links, kaart rechts */
.vk-intro--metkaart {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 56px;
	align-items: center;
}

.vk-intro--gecentreerd {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ------------------------------------------------- tekstgroottes ----
   Het thema zet h2 op 48px in kapitalen. Dat is voor deze pagina te zwaar,
   dus de koppen binnen deze blokken staan een stap kleiner. De leestekst
   blijft op de 14px van het thema. */
.vk-intro__titel {
	font-size: 36px;
	line-height: 1.15;
	margin-bottom: 18px;
}

.vk-intro--gecentreerd .vk-intro__titel {
	font-size: 26px;
	line-height: 1.25;
}

.vk-intro__lead p {
	color: var(--vk-muted);
	margin-bottom: 14px;
}

.vk-intro__lead p:last-child {
	margin-bottom: 0;
}

.vk-intro--metkaart .vk-intro__lead {
	max-width: 520px;
}

.vk-intro__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 32px;
}

.vk-intro--gecentreerd .vk-intro__knoppen {
	justify-content: center;
}

/* knoppen in de taal van .block-cta .button: kapitalen met het streepje van
   22px, maar binnen de knop i.p.v. erbuiten. De rechterpadding is ruimer om
   plaats te maken voor dat streepje. */
.vk-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 57px;
	padding: 16px 56px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	background: var(--vk-goud);
	color: #fff;
	border: 2px solid var(--vk-goud);
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.vk-btn::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 2px;
	background: #fff;
}

.vk-btn:hover,
.vk-btn:focus {
	background: var(--vk-goud-dk);
	border-color: var(--vk-goud-dk);
	color: #fff;
}

/* tweede knop in het navy van de site */
.vk-btn--omlijnd {
	background: transparent;
	color: var(--vk-navy);
	border-color: var(--vk-navy);
}

.vk-btn--omlijnd::after {
	background: var(--vk-navy);
}

/* omlijnde knop wordt navy bij hover, dus streepje mee naar wit */
.vk-btn--omlijnd:hover::after,
.vk-btn--omlijnd:focus::after {
	background: #fff;
}

.vk-btn--omlijnd:hover,
.vk-btn--omlijnd:focus {
	background: var(--vk-navy);
	color: #fff;
}

/* kerncijfers in een navy kaart, zoals de navy contactkaarten:
   witte cijfers, muted witte omschrijving */
.vk-intro .vk-cijfers {
	list-style: none;
	margin: 0;
	padding: 28px 30px;
	background: var(--vk-navy);
}

.vk-intro .vk-cijfers li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 16px 0;
	margin: 0;
	position: static;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	line-height: 1.3;
}

.vk-intro .vk-cijfers li:first-child {
	padding-top: 0;
}

.vk-intro .vk-cijfers li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* het thema tekent een streepje voor elke ul li: hier niet */
.vk-intro .vk-cijfers li::before,
.vk-intro .vk-cijfers li::after {
	content: none;
	display: none;
}

.vk-cijfers__num {
	flex: none;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--vk-goud);
}

.vk-cijfers__lab {
	font-size: 13.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.65);
	text-align: right;
}

/* -------------------------------------------------- usp-strook ----
   volle breedte, zoals de USP-band van de site zelf. .default-page-con
   heeft zijpadding, dus even uit de container stappen; de voorouder
   .innerpage-con-wrap heeft overflow:hidden, dus dat geeft geen
   horizontale scrollbar. */
.vk-usps-band {
	--vk-navy: #1D2B5B;
	--vk-goud: #D9A61E;
	--vk-muted: #8489A8;
	--vk-lijn: rgba(29, 43, 91, 0.14);
	--vk-tint: #EEF0F7;
	width: 100vw;
	/* let op: de margin-left hoort bij de full-bleed-truc, niet aanpassen */
	margin: 54px 0 54px 50%;
	transform: translateX(-50%);
	padding: 0;
}

ul.vk-usps {
	list-style: none;
	margin: 0;
	padding: 38px 60px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--vk-tint);
}

/* ul.-prefix zodat dit `.default-page-con ul li` van het thema haalt */
ul.vk-usps li {
	position: static;
	margin: 0;
	padding: 4px 34px;
	border-left: 1px solid var(--vk-lijn);
}

ul.vk-usps li:first-child {
	border-left: 0;
	padding-left: 0;
}

/* laatste kolom tegen de rand uitlijnen i.p.v. eroverheen */
ul.vk-usps li:last-child {
	padding-right: 0;
}

ul.vk-usps li::before,
ul.vk-usps li::after {
	content: none;
	display: none;
}

.vk-usps strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vk-navy);
	margin-bottom: 6px;
}

.vk-usps span {
	display: block;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--vk-muted);
}

/* het anker mag niet onder de vaste header vallen */
#stappenplan {
	scroll-margin-top: 120px;
}

/* ------------------------------------------------------- team ---- */
.vk-team {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 50px;
	align-items: center;
	margin: 10px 0 20px;
}

.vk-team--fotorechts .vk-team__foto {
	order: 2;
}

.vk-team__foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
}

.vk-team__titel {
	font-size: 30px;
	line-height: 1.2;
	margin-bottom: 16px;
}

.vk-team__tekst p {
	color: var(--vk-muted);
	margin-bottom: 14px;
}

.vk-namen {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* het thema zet op elke ul li een streepje van 22px en padding: hier niet */
.vk-team .vk-namen li {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--vk-navy);
	background: var(--vk-tint);
	padding: 8px 16px;
	border-radius: 20px;
	line-height: 1.3;
	position: static;
}

.vk-team .vk-namen li::before,
.vk-team .vk-namen li::after {
	content: none;
	display: none;
}

/* -------------------------------------------------- stappenplan --- */
.vk-stappen {
	padding: 20px 0 10px;
}

.vk-stappen__kop {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 56px;
}

.vk-stappen__kop h2 {
	font-size: 30px;
	line-height: 1.2;
	margin-bottom: 16px;
}

.vk-stappen__kop p {
	color: var(--vk-muted);
	margin: 0;
}

/* Het thema geeft elke `ol` 40px padding-left en zet via een CSS-counter een
   paars nummer voor ELKE `ol li` -- ook voor de bullets binnen de kaarten,
   waardoor de nummering doorliep (1, 5, 10...). Beide hier uitzetten. */
.vk-stappen .vk-tijdlijn {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	counter-reset: none;
}

.vk-stappen .vk-tijdlijn li {
	counter-increment: none;
	padding: 0;
	line-height: inherit;
}

.vk-stappen .vk-tijdlijn > li::before,
.vk-stappen .vk-tijdlijn > li::after {
	content: none;
	display: none;
}

/* gestippelde middenlijn */
.vk-tijdlijn::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 6px;
	bottom: 6px;
	width: 2px;
	transform: translateX(-50%);
	background-image: linear-gradient(var(--vk-navy) 55%, transparent 0);
	background-size: 2px 12px;
	background-repeat: repeat-y;
	opacity: 0.3;
}

.vk-stap {
	display: grid;
	grid-template-columns: 1fr 76px 1fr;
	align-items: start;
	margin-bottom: 34px;
}

.vk-stap__bol {
	grid-column: 2;
	display: flex;
	justify-content: center;
	padding-top: 4px;
	position: relative;
	z-index: 2;
}

/* navy bol met witte ring, zodat hij netjes uit de stippellijn punt */
.vk-stap__bol span {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--vk-navy);
	border: 3px solid var(--vk-goud);
	box-shadow: 0 0 0 4px #fff;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.02em;
}

.vk-stap__kaart {
	background: #fff;
	border: 1px solid var(--vk-lijn);
	padding: 26px 30px 24px;
	max-width: 470px;
}

/* zigzag: oneven links, even rechts */
.vk-stap:nth-child(odd) .vk-stap__kaart {
	grid-column: 1;
	grid-row: 1;
	margin-left: auto;
}

.vk-stap:nth-child(even) .vk-stap__kaart {
	grid-column: 3;
	grid-row: 1;
}

.vk-stap__kaart h3 {
	font-size: 20px;
	line-height: 1.25;
	margin-bottom: 16px;
	/* lange samenstellingen mogen afbreken i.p.v. uit de kaart lopen */
	overflow-wrap: break-word;
	hyphens: auto;
}

.vk-stap__foto {
	margin: 0 0 18px;
}

.vk-stap__foto img {
	display: block;
	width: 100%;
	/* vaste bandhoogte, zodat de kaarten in de zigzag niet te lang worden */
	height: 170px;
	object-fit: cover;
}

.vk-stappen .vk-stap__kaart ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* opsommingen met het streepje van 22px dat de site overal gebruikt */
.vk-stappen .vk-stap__kaart ul li {
	position: relative;
	padding: 0 0 0 34px;
	margin-bottom: 11px;
	font-size: 15px;
	line-height: 1.5;
	color: #232B45;
}

.vk-stappen .vk-stap__kaart ul li::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 11px;
	width: 22px;
	height: 1px;
	background: transparent;
	border-bottom: 2px solid var(--vk-muted);
	border-radius: 0;
}

.vk-stap__quote {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--vk-lijn);
	font-style: italic;
	font-size: 14px;
	color: var(--vk-navy);
}

/* De navy CTA-band van het thema staat op 48px en zou nu boven de rest
   uittorenen. Deze stylesheet wordt enkel ingeladen op pagina's met deze
   blokken, dus andere pagina's houden hun eigen grootte. */
.block-cta h3 {
	font-size: 32px;
	line-height: 1.2;
}

/* ------------------------------------------------------ responsive */
@media (max-width: 991px) {
	/* hero: kerncijferkaart onder de tekst i.p.v. ernaast */
	.vk-intro--metkaart {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.vk-intro--metkaart .vk-intro__lead {
		max-width: none;
	}

	/* usp-strook: twee kolommen, zonder verticale scheidingslijnen */
	.vk-usps-band {
		margin: 40px 0 40px 50%;
	}

	ul.vk-usps {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 30px;
		row-gap: 28px;
		padding: 32px 30px;
	}

	ul.vk-usps li,
	ul.vk-usps li:first-child,
	ul.vk-usps li:last-child {
		border-left: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.vk-team {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.vk-team--fotorechts .vk-team__foto {
		order: 0;
	}

	.vk-team__foto img {
		max-height: 320px;
	}
}

@media (max-width: 820px) {
	.vk-tijdlijn::before {
		left: 27px;
	}

	.vk-stap {
		grid-template-columns: 56px 1fr;
		column-gap: 12px;
		margin-bottom: 22px;
	}

	.vk-stap__bol {
		grid-column: 1;
		justify-content: flex-start;
	}

	.vk-stap__bol span {
		width: 44px;
		height: 44px;
		font-size: 17px;
		border-width: 2px;
	}

	.vk-stap:nth-child(odd) .vk-stap__kaart,
	.vk-stap:nth-child(even) .vk-stap__kaart {
		grid-column: 2;
		grid-row: auto;
		margin-left: 0;
		max-width: none;
	}

	.vk-stappen__kop {
		margin-bottom: 34px;
	}
}

@media (max-width: 575px) {
	ul.vk-usps {
		grid-template-columns: 1fr;
		row-gap: 24px;
		padding: 28px 22px;
	}

	.vk-intro__titel {
		font-size: 26px;
	}

	.vk-intro--gecentreerd .vk-intro__titel {
		font-size: 22px;
	}

	.vk-team__titel,
	.vk-stappen__kop h2 {
		font-size: 24px;
	}

	.block-cta h3 {
		font-size: 24px;
	}

	.vk-intro__knoppen {
		gap: 30px;
	}

	.vk-intro__knoppen .vk-btn {
		width: 100%;
	}

	.vk-intro .vk-cijfers {
		padding: 22px 20px;
	}

	.vk-cijfers__num {
		font-size: 26px;
	}

	.vk-stap__kaart {
		padding: 20px 20px 18px;
	}

	.vk-stap__kaart h3 {
		font-size: 19px;
	}
}