/*
Theme Name: PTC Gent
Theme URI: https://ptc.digimotions.be
Template: digimotions-parent
Author: Digi-Motions
Author URI: https://digi-motions.be
Description: Child theme voor Psychotherapeutisch Centrum regio Gent (PTC Gent). Bevat het volledige "Geworteld"-design en de ACF-gestuurde, klant-bewerkbare content. Bouwt voort op het Digi-Motions Parent theme.
Version: 1.0.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ptcgent
*/

/* =====================================================================
   PTC Gent · "Geworteld" — design tokens & base
   ===================================================================== */

/* Vastgezette elementen stapelen: eerst de header, daaronder de balk "op deze
   pagina". Alles wat verder meescrollt moet onder die stapel blijven, anders
   verdwijnt de bovenkant erachter. Eén plek om die hoogtes te beheren. */
:root {
	/* Nagemeten hoogte van de kop, op elke schermbreedte 105px. Stond die te
	   laag, dan schoof de "op deze pagina"-balk er een paar pixels achter. */
	--header-h:   105px;
	--toc-h:      0px;
	--sticky-gap: 24px;
	/* Ruimte die de beheerbalk van WordPress inneemt; nul voor bezoekers. */
	--admin-h:    0px;
	/*
	 * Lucht boven de eerste rij van een pagina - de broodkruimel en de titel.
	 * Elke hero rekent hiermee, zodat die aanloop overal even ruim is en op
	 * één plek te verzetten valt.
	 */
	--hero-top:   64px;
}
@media (max-width: 720px) { :root { --hero-top: 38px; } }
/*
 * Voor wie ingelogd is duwt de beheerbalk alles omlaag. Alles wat vastplakt
 * rekent daarom met --admin-h erbij.
 */
body.admin-bar { --admin-h: 32px; }
/* Onder 783px zet WordPress de balk zelf op absolute: hij scrollt dan mee weg.
   Wat aan de viewport hangt hoeft er dus niet meer voor te corrigeren; doet het
   dat wel, dan blijft het die 46px te laag hangen zodra er gescrold is. */
@media screen and (max-width: 782px) { body.admin-bar { --admin-h: 0px; } }
/* Let op: --sticky-top hoort op body, niet op :root. Een custom property met
   var() erin wordt uitgerekend op het element waar hij staat, dus op :root zou
   de --toc-h hieronder er niet meer in meegenomen worden. */
body:has(.toc-bar) { --toc-h: 66px; }
/*
 * De schuifbalk op het opleidingsaanbod plakt op dezelfde plek als een
 * inhoudsopgave. Ze krimpt zodra ze vastplakt (112px), maar op het moment dat
 * de browser de sprong berekent is ze nog niet gekrompen. We rekenen dus met
 * de volle hoogte: nagemeten 150px op een breed scherm, 144px smaller. Liever
 * wat lucht te veel na het krimpen dan een titel die achter de balk zit.
 */
body:has(.oa-schuif) { --toc-h: 150px; }
body { --sticky-top: calc(var(--header-h) + var(--admin-h) + var(--toc-h) + var(--sticky-gap)); }
/*
 * Alles waar een link naartoe kan springen, moet onder de vaste balken
 * uitkomen. Naast de secties zijn dat de lege ankerpunten (.anker, bij "Lees
 * meer" bovenaan een pijler) en de luiken van het opleidingsaanbod: die zijn
 * geen section en sprongen dus tot achter de kop.
 */
section[id], article[id], .prog-item[id], .anker[id], .oa-luik[id] { scroll-margin-top: var(--sticky-top); }
/* Onder 1240px staat de inhoudsopgave niet meer vast (zie verderop), dus telt
   ze niet mee. De schuifbalk van het opleidingsaanbod blijft wel plakken. */
@media (max-width: 1240px) {
	body:has(.toc-bar) { --toc-h: 0px; }
}
/* Onder 560px plakt ook de schuifbalk niet meer. */
@media (max-width: 560px) {
	body:has(.oa-schuif) { --toc-h: 0px; }
}

:root {
	--ink:        #353330;
	--ink-soft:   #5b574f;
	--ink-faint:  #888888;
	--paper:      #ffffff;
	--paper-2:    #edf5f5;
	--paper-3:    #dfe9e9;
	--line:       #dde6e6;
	--line-soft:  #eef3f3;

	--petrol:     #084e7d;
	--petrol-d:   #063a5d;
	--sage:       #96b1b0;
	--sage-soft:  #bcd0cf;
	--sage-pale:  #edf5f5;

	--clay:       #d9636a;
	--clay-d:     #bd4951;
	--clay-soft:  #f0c4c6;
	--ochre:      #d9636a;

	/* Standaardkleur voor ALLE kopteksten (het niet-accentgedeelte).
	   Het accent binnen een titel blijft --clay. */
	--heading:    #45504e;

	--serif: 'Newsreader', Georgia, serif;
	--sans: 'Inter', system-ui, sans-serif;

	--max: 1400px;
	--gutter: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16.5px;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4, h5 {
	font-family: var(--serif);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.012em;
	line-height: 1.08;
	margin: 0;
	color: var(--heading);
}
/* Cursief is in een koptekst een kleuraccent, maar in lopende tekst gewoon
   nadruk: daar houdt het de tekstkleur. */
em { font-style: italic; font-weight: 400; }
h1 em, h2 em, h3 em, h4 em, h5 em { color: var(--clay); }
/* Een cursieve letter steekt rechts buiten haar kader. Zonder deze marge
   raakt bijvoorbeeld de j van "wij" het vraagteken dat erop volgt. */
h1 em, h2 em, h3 em, h4 em, h5 em { padding-right: 0.055em; }
::selection { background: var(--sage-pale); color: var(--petrol-d); }
*:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }

body::before {
	content: '';
	position: fixed; inset: 0;
	background:
		radial-gradient(circle at 15% 18%, rgba(168, 111, 74, 0.04), transparent 45%),
		radial-gradient(circle at 85% 75%, rgba(46, 90, 90, 0.05), transparent 50%);
	pointer-events: none;
	z-index: 0;
}
main, header, footer { position: relative; z-index: 1; }

/* ─── Layout ─── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 720px) { .wrap { padding: 0 24px; } }

section { padding: 110px 0; }
@media (max-width: 720px) { section { padding: 70px 0; } }

/* Afwisselende sectie-achtergronden. ptc_beurt() kent deze classes
   automatisch toe, zodat twee opeenvolgende secties nooit dezelfde
   achtergrond krijgen - ongeacht welke secties aan- of uitstaan. */
.sec-plain { background: var(--paper); }
.sec-tint  { background: var(--paper-2); }

/*
 * --vlak is de kleur van een blok binnen een sectie: een kaart, een kader, een
 * knop-achtig vak. Het is altijd de tegenkleur van de sectie zelf, zodat zo'n
 * blok zich aftekent. Wisselt de sectie van achtergrond, dan wisselt het blok
 * vanzelf mee - dat is precies wat er misging toen de secities gingen
 * afwisselen en de kaarten hun eigen vaste kleur bleven houden.
 *
 * Gebruik in een blok dus altijd background: var(--vlak), nooit een vaste
 * kleur. Een sectie die haar achtergrond zelf zet (niet via sec-plain of
 * sec-tint) zet --vlak er hieronder bij.
 *
 * Zit een blok binnen een ander blok - een kader in een kaart - dan gebruikt
 * dat --vlak-in: de kleur van de sectie zelf, en dus opnieuw het verschil.
 */
:root      { --vlak: var(--paper-2); --vlak-in: var(--paper); }
.sec-plain { --vlak: var(--paper-2); --vlak-in: var(--paper); }
.sec-tint  { --vlak: var(--paper);   --vlak-in: var(--paper-2); }

/* ─── Header ─── */
header.site {
	padding: 24px 0;
	border-bottom: 1px solid var(--line-soft);
	background: var(--paper);
	position: sticky; top: 0; z-index: 50;
}
header.site .row { display: flex; align-items: center; gap: 30px; }
header.site .brand-mark .txt { display: none; }
header.site .brand-mark .custom-logo,
header.site .brand-mark img { width: 52px; height: 52px; }
.brand-mark {
	display: flex; align-items: center; gap: 14px;
	margin-right: auto;
	text-decoration: none; color: inherit;
}
.brand-mark svg { width: 40px; height: 40px; flex-shrink: 0; }
.brand-mark img { width: 52px; height: 52px; flex-shrink: 0; object-fit: contain; }
.brand-mark .txt { line-height: 1; }
.brand-mark .name {
	font-family: var(--serif);
	font-size: 22px;
	color: var(--petrol-d);
	letter-spacing: -0.01em;
}
.brand-mark .sub {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-faint);
	margin-top: 4px;
	font-weight: 500;
}
nav.main { display: flex; gap: 8px; align-items: center; }
nav.main ul.menu { display: flex; gap: 8px; align-items: center; list-style: none; margin: 0; padding: 0; }
nav.main li { list-style: none; margin: 0; }
nav.main a {
	padding: 10px 14px;
	font-size: 16px;
	color: var(--ink);
	border-radius: 999px;
	transition: color 0.15s;
	font-weight: 400;
	display: inline-flex; align-items: center; gap: 7px;
}
nav.main a:hover { background: transparent; color: var(--clay); }

/* ─── Actieve pagina in de navigatie ───
   Het item zelf krijgt de accentkleur met een streepje eronder; staat de
   pagina in een dropdown, dan licht ook het bovenliggende item op. */
nav.main > ul > li.current-menu-item > a,
nav.main > ul > li.current_page_item > a,
nav.main > ul > li.current-menu-ancestor > a,
nav.main > ul > li.current-menu-parent > a,
nav.main > ul > li.current_page_ancestor > a,
nav.main > ul > li.current_page_parent > a {
	color: var(--clay-d);
	font-weight: 500;
	position: relative;
}
nav.main > ul > li.current-menu-item > a::before,
nav.main > ul > li.current_page_item > a::before,
nav.main > ul > li.current-menu-ancestor > a::before,
nav.main > ul > li.current-menu-parent > a::before,
nav.main > ul > li.current_page_ancestor > a::before,
nav.main > ul > li.current_page_parent > a::before {
	content: '';
	position: absolute;
	left: 14px; right: 14px; bottom: 2px;
	height: 2px;
	background: var(--clay);
	border-radius: 2px;
}
/* Pijltje van een actieve dropdown niet meedoen aan het streepje. */
nav.main > ul > li.current-menu-ancestor > a::after,
nav.main > ul > li.current-menu-parent > a::after { opacity: 0.9; }

/* Het actieve item binnen de dropdown zelf. */
nav.main .sub-menu li.current-menu-item > a,
nav.main .sub-menu li.current_page_item > a {
	background: var(--sage-pale);
	color: var(--clay-d);
	font-weight: 500;
}
nav.main .menu-item-has-children > a::after,
nav.main a.has-sub::after {
	content: ''; width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px); opacity: 0.65;
	display: inline-block; margin-left: 7px;
}
.nav-item, nav.main .menu-item-has-children { position: relative; display: inline-flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; }
/* De afstand tussen de onderkant van een navigatie-item en de onderkant
   van de header. Het paneel hangt daar precies onder, zodat de scheidingslijn
   van de header er niet doorheen loopt. */
header.site { --nav-drop-gap: 30px; }
.nav-drop, nav.main .sub-menu {
	position: absolute;
	top: calc(100% + var(--nav-drop-gap));
	/* -8px is de eigen binnenmarge van het paneel: zo begint de tekst van een
	   submenu-item exact onder de tekst van het bovenliggende item. */
	left: -8px;
	background: var(--paper); border: 1px solid var(--line);
	border-radius: 10px; box-shadow: 0 20px 44px -20px rgba(31,64,64,0.3);
	padding: 8px; width: max-content; min-width: 180px; max-width: 320px;
	display: flex; flex-direction: column; gap: 2px;
	list-style: none; margin: 0;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
	z-index: 60;
}
/* Onzichtbare brug over de tussenruimte, anders valt het paneel dicht zodra
   de muis er naartoe beweegt. Bewust op het menu-item en niet op het paneel:
   een brug ter breedte van het paneel ligt over de naburige menu-items heen
   en maakt die onbereikbaar. */
.nav-drop::before {
	content: '';
	position: absolute;
	left: 0; right: 0;
	top: calc((var(--nav-drop-gap) + 14px) * -1);
	height: calc(var(--nav-drop-gap) + 14px);
}
nav.main > ul > li.menu-item-has-children::after {
	content: '';
	position: absolute;
	left: -10px; right: -10px;
	top: 100%;
	height: calc(var(--nav-drop-gap) + 6px);
	display: none;
}
nav.main > ul > li.menu-item-has-children:hover::after,
nav.main > ul > li.menu-item-has-children.is-open::after { display: block; }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop,
nav.main .menu-item-has-children:hover > .sub-menu,
nav.main .menu-item-has-children:focus-within > .sub-menu,
nav.main .menu-item-has-children.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
/* display:block, anders is de link zo breed als zijn tekst en beslaat de
   markering bij hover of op de actieve pagina niet de hele paneelbreedte. */
.nav-drop a, nav.main .sub-menu a {
	display: block;
	width: 100%;
	font-size: 15px;
	padding: 9px 14px;
	border-radius: 6px;
	color: var(--ink);
	white-space: nowrap;
}
/* De lijstitems zelf mogen de breedte van het paneel volgen. */
nav.main .sub-menu > li { display: block; width: 100%; }
.nav-drop a:hover, nav.main .sub-menu a:hover { background: var(--sage-pale); color: var(--petrol-d); }

.doctena {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px;
	background: #0E4E7D;
	color: var(--paper);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	/* Anders valt "Maak afspraak" over twee regels en wordt de hele kop hoger
	   dan de --header-h waar alle sticky-modules mee rekenen. */
	white-space: nowrap;
	transition: background 0.15s;
}
.doctena:hover { background: #0a3b60; }
/* Vanaf hier past de balk niet meer naast het logo en de afspraakknop; het
   paneel achter de hamburger neemt dan ook het aanbod over. Nagemeten: met
   "Voor bedrijven" erbij heeft de rij ruim 1200px nodig. */
@media (max-width: 1240px) { nav.main { display: none; } }

/* Mobile sticky CTA bar */
.mobile-cta {
	display: none;
	position: fixed; bottom: 0; left: 0; right: 0;
	background: var(--petrol);
	padding: 12px;
	gap: 10px;
	z-index: 60;
	box-shadow: 0 -10px 30px -8px rgba(31, 64, 64, 0.4);
}
.mobile-cta a {
	flex: 1; text-align: center;
	padding: 12px;
	border-radius: 4px;
	font-weight: 500;
	font-size: 14px;
	background: var(--clay);
	color: var(--paper);
}
.mobile-cta a.secondary { background: transparent; border: 1px solid var(--paper); color: var(--paper); }
@media (max-width: 700px) {
	.mobile-cta { display: flex; }
	/*
	 * Ruimte onder de pagina voor de vaste balk. Met alleen "body" verloor deze
	 * regel het van de body-reset die WordPress zelf inline meestuurt (die komt
	 * later in de head), en verdween de laatste alinea achter de knoppen.
	 * Nagemeten: de balk is 73px hoog.
	 */
	html body { padding-bottom: 88px; }
}

/* ─── Eyebrow ─── */
.eyebrow {
	display: inline-block;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--clay-d);
}
.eyebrow .nr { display: none; margin-right: 8px; font-size: 14px; }
.eyebrow-icon { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow-icon img, .eyebrow-icon svg { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }

/* ─── Promise strip ─── */
.promise-strip {
	background: var(--paper-2);
	--vlak: var(--paper);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 24px 0;
}
.promise-strip .row {
	display: flex; justify-content: space-between; align-items: center;
	gap: 30px; flex-wrap: wrap;
	font-size: 14px;
	color: var(--ink-soft);
}
.promise-strip .item { display: flex; align-items: baseline; gap: 12px; }
.promise-strip .key {
	font-family: var(--serif);
	font-size: 22px;
	font-style: italic;
	color: var(--petrol);
	line-height: 1;
}
.promise-strip .lbl { font-size: 13px; }

/* ─── Buttons ─── */
.btn-primary {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 28px;
	background: var(--clay);
	color: var(--paper);
	border-radius: 4px;
	font-size: 15px;
	font-weight: 500;
	transition: background 0.18s;
}
.btn-primary:hover { background: var(--clay-d); }
.btn-secondary {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 28px;
	border: 1px solid var(--petrol);
	color: var(--petrol-d);
	border-radius: 4px;
	font-size: 15px;
	font-weight: 500;
	transition: all 0.18s;
}
.btn-secondary:hover { background: var(--petrol); color: var(--paper); }
.btn-text {
	color: var(--petrol-d);
	font-size: 15px;
	font-weight: 500;
	border-bottom: 1px solid var(--petrol-d);
	padding-bottom: 3px;
	display: inline-flex; align-items: center; gap: 6px;
}
.btn-text:hover { color: var(--clay); border-color: var(--clay); }
.btn-large { padding: 18px 32px; font-size: 16px; }

/* ─── Crumb ─── */
.crumb {
	display: flex; gap: 10px; flex-wrap: wrap;
	font-size: 13px;
	color: var(--ink-faint);
	padding: 16px 0 8px;
}
.crumb a { color: var(--ink-faint); }
.crumb a:hover { color: var(--petrol-d); }
.crumb .sep { color: var(--line); }
.crumb .here { color: var(--petrol-d); font-weight: 500; }

/* ─── Footer ─── */
footer.site {
	background: var(--petrol);
	color: rgba(244, 237, 225, 0.75);
	padding: 70px 0 30px;
}
footer.site .top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 900px) { footer.site .top { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 580px) { footer.site .top { grid-template-columns: 1fr; } }
footer.site .brand-block .name { color: var(--paper); }
footer.site .brand-block .sub { color: rgba(244,237,225,0.55); }
footer.site .brand-block p { font-size: 14px; color: rgba(244,237,225,0.65); line-height: 1.6; max-width: 340px; margin-top: 16px; }
footer.site h3 {
	font-family: var(--sans);
	color: var(--paper);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 14px;
	font-weight: 600;
}
footer.site ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
/* Het ondernemingsnummer is geen contactgegeven om op te klikken; het staat er
   omdat het wettelijk moet, dus mag het een toon zachter. */
footer.site .footer-btw { margin-top: 6px; font-size: 12.5px; color: rgba(244, 237, 225, 0.5); }
footer.site a:hover { color: var(--paper); }
footer.site .bottom {
	padding-top: 24px;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
	font-size: 12px;
	color: rgba(244,237,225,0.55);
}
footer.site .bottom a { color: var(--paper); }
/* Copyright en de wettelijke pagina's staan op één regel; op een smal scherm
   mogen ze breken zonder dat de scheidingstekens vooraan belanden. */
footer.site .bottom-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
footer.site .bottom-rechts .sep { color: rgba(244, 237, 225, 0.3); }
footer.site .bottom-rechts a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(244, 237, 225, 0.35); }
footer.site .bottom-rechts a:hover { text-decoration-color: var(--paper); }

/* ─── Vision/quote (dark) ─── */
.vision {
	background: linear-gradient(155deg, #35696b 0%, #234f51 100%);
	/* Donkere sectie: een blok erin licht juist op in plaats van af te steken. */
	--vlak: rgba(255, 255, 255, 0.09);
	color: #f3efe6;
	padding: 140px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.vision::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 20% 30%, rgba(196, 150, 90, 0.15), transparent 50%),
		radial-gradient(ellipse at 80% 70%, rgba(150, 177, 176, 0.18), transparent 50%);
}
.vision .wrap { position: relative; }
.vision .eyebrow { color: var(--ochre); }
.vision blockquote {
	margin: 30px auto 0;
	max-width: 880px;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.25;
	color: #f3efe6;
	font-weight: 300;
}
.vision blockquote em { color: #ecb6a3; font-style: italic; }
.vision .signed {
	margin-top: 40px;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(244, 237, 225, 0.6);
}

/* ─── Closing CTA ─── */
/* Getint, want het blok Ons team erboven staat op wit. */
.closing { background: var(--paper-2); --vlak: var(--paper); padding: 130px 0 150px; text-align: center; }
.closing h2 { font-size: clamp(44px, 6vw, 76px); line-height: 1.0; margin: 24px 0 28px; }
.closing .body { max-width: 540px; margin: 0 auto 40px; font-size: 18px; color: var(--ink-soft); line-height: 1.65; }
.closing .actions { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.closing .signed { margin-top: 48px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-soft); }

/* ─── Forms ─── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.field label .req { color: var(--clay); }
.field input, .field textarea, .field select {
	font: inherit; font-size: 15px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: white;
	color: var(--ink);
	min-height: 44px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
	outline: none;
	border-color: var(--petrol);
	box-shadow: 0 0 0 3px rgba(46, 90, 90, 0.12);
}
.field textarea { min-height: 110px; resize: vertical; }
.field .help { font-size: 12px; color: var(--ink-faint); }
.radios { display: flex; gap: 8px; flex-wrap: wrap; }
.radios label {
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	font-size: 13.5px;
	color: var(--ink);
	transition: all 0.15s;
	background: white;
}
.radios input { display: none; }
.radios label:has(input:checked) { background: var(--sage-pale); border-color: var(--sage); color: var(--petrol-d); font-weight: 500; }

/* ─── Reveal ─── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Footer socials + nieuwsbrief ─── */
.footer-news {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 20px;
	padding: 12px 20px;
	background: var(--clay);
	color: var(--paper);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.15s;
}
.footer-news:hover { background: var(--clay-d); }
.footer-socials { display: flex; gap: 10px; margin-top: 14px; }
.footer-socials a {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 50%;
	color: var(--paper);
	transition: all 0.15s;
}
.footer-socials a:hover { background: rgba(255,255,255,0.14); border-color: var(--paper); }
.footer-socials svg { width: 16px; height: 16px; fill: currentColor; }

/* =====================================================================
   HOME
   ===================================================================== */
.hero { padding: 60px 0 90px; }
/* De beeldkolom blijft overal onder de helft van de sectiebreedte. */
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: stretch; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }
.hero h1 { font-size: clamp(44px, 5vw, 76px); line-height: 1.02; font-weight: 400; margin: 20px 0 28px; letter-spacing: -0.02em; }
.hero h1 em { color: var(--clay); font-style: italic; }
.hero .greeting { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--clay); margin-bottom: 4px; }
.hero .lead { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 620px; margin-bottom: 40px; }
.hero .lead strong { color: var(--ink); font-weight: 500; }
.hero .actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-visual {
	height: 100%; min-height: 480px; align-self: stretch;
	border-radius: 4px;
	background-color: #b29977;
	background-size: cover; background-position: center;
	overflow: hidden; position: relative;
	box-shadow: 0 40px 80px -40px rgba(42, 38, 32, 0.4);
}
.hero-visual::before {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 30% 35%, rgba(255, 240, 215, 0.3), transparent 50%),
		radial-gradient(ellipse at 70% 75%, rgba(46, 90, 90, 0.15), transparent 50%);
}

.voor-wie .head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; }
@media (max-width: 800px) { .voor-wie .head { grid-template-columns: 1fr; gap: 16px; } }
.voor-wie .head h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.0; margin-top: 16px; }
.voor-wie .head p { color: var(--ink-soft); font-size: 17px; max-width: 480px; line-height: 1.65; }
.vw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .vw-grid { grid-template-columns: 1fr; } }
.vw-card {
	background: var(--vlak);
	border: 1px solid var(--line);
	border-radius: 4px;
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	transition: all 0.25s ease;
	overflow: hidden;
}
.vw-card:hover { transform: translateY(-3px); border-color: var(--sage); box-shadow: 0 24px 60px -30px rgba(46, 90, 90, 0.25); }
.vw-card .visual { aspect-ratio: 5/3; position: relative; overflow: hidden; background-color: #ACBEA1; background-size: cover; background-position: center; }
.vw-card .visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.18), transparent 45%); }
.vw-card .visual .num {
	position: absolute; top: 22px; left: 24px;
	font-family: var(--serif); font-style: italic; font-size: 32px;
	color: #fff; line-height: 1; z-index: 1;
	text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
/* Wit icoon linksboven over de foto. */
.vw-card .visual .card-icon {
	position: absolute; top: 20px; left: 22px;
	width: 40px; height: 40px;
	object-fit: contain;
	z-index: 1;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}
.vw-card .body { padding: 30px 32px 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.vw-card h3 { font-size: 28px; line-height: 1.1; color: var(--petrol-d); }
.vw-card .for-who,
.vw-breed .for-who { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.vw-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; flex: 1; }
.vw-card .more,
.vw-breed .more { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--clay-d); font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.vw-card .more .arr,
.vw-breed .more .arr { transition: transform 0.2s; }
.vw-card:hover .more .arr,
.vw-breed:hover .more .arr { transform: translateX(4px); color: var(--clay); }

.wat-doen { background: var(--paper-2); --vlak: var(--paper); }
.wat-doen .grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: stretch; }
@media (max-width: 900px) { .wat-doen .grid { grid-template-columns: 1fr; gap: 40px; } .wat-doen-visual { min-height: 340px; } }
.wat-doen-visual {
	height: 100%; align-self: stretch;
	background-size: cover; background-position: center;
	background-color: #6d8888;
	border-radius: 4px; position: relative; overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(31, 64, 64, 0.4);
}
.wat-doen h2 { font-size: clamp(38px, 4.8vw, 56px); line-height: 1.0; margin: 16px 0 22px; }
.wat-doen .lead { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.45; color: var(--petrol-d); margin-bottom: 22px; }
.wat-doen p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; }
.wat-doen .vlinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; grid-auto-rows: 1fr; }
@media (max-width: 900px) { .wat-doen .vlinks { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; } }
@media (max-width: 520px) { .wat-doen .vlinks { grid-template-columns: 1fr; } }
.wat-doen .vlinks > div { background: #fff; border: 1px solid var(--line-soft); border-top: 3px solid var(--clay); border-radius: 4px; padding: 22px 22px 24px; }
.wat-doen .vlinks h3 { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--petrol-d); margin-bottom: 6px; line-height: 1.3; letter-spacing: 0.01em; }
.wat-doen .vlinks p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

.spec .head { text-align: center; max-width: 720px; margin: 0 auto 70px; }
.spec .head h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; margin: 16px 0 16px; }
.spec .head p { color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.spec-list { display: flex; flex-direction: column; }
.spec-row {
	display: grid; grid-template-columns: 60px 1.5fr 2fr auto;
	gap: 36px; align-items: baseline;
	padding: 36px 0;
	border-top: 1px solid var(--line);
	color: inherit; text-decoration: none;
}
.spec-row:last-child { border-bottom: 1px solid var(--line); }
/*
 * Bij het zweven schuift de inhoud op, niet het kader. Met padding-left op de
 * rij zelf werden de kolommen smaller: de tekst brak dan over een regel meer,
 * de rij werd hoger en de rijen eronder sprongen mee. Erger nog, bij de
 * onderste regel viel de muis daardoor soms net buiten de rij, waarna alles
 * terugsprong en opnieuw begon - dat trillen.
 */
.spec-row > * { transition: transform 0.25s ease; }
.spec-row:hover > * { transform: translateX(16px); }
.spec-row .nr { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ochre); }
/* De rij lijnt op de baseline uit; een blok-afbeelding komt daardoor te hoog
   te staan. De em-basis is gelijk aan de titelgrootte, zodat de correctie
   meeschaalt met de responsieve koptekst. */
.spec-row .nr img {
	width: 40px; height: 40px;
	object-fit: contain;
	display: block;
	position: relative;
	font-size: clamp(26px, 3vw, 36px);
	top: 0.34em;
}
.spec-row h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.spec-row p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; max-width: 460px; }
.spec-row .arr { font-size: 22px; color: var(--petrol); transition: transform 0.25s ease, color 0.2s; }
/* De pijl schuift iets verder dan de rest, zodat hij blijft "wijzen". */
.spec-row:hover .arr { transform: translateX(24px); color: var(--clay); }
@media (max-width: 800px) {
	.spec-row { grid-template-columns: auto 1fr; gap: 20px; }
	.spec-row p { grid-column: 1 / -1; }
	.spec-row .arr { display: none; }
}

.hulp .head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: end; margin-bottom: 60px; }
@media (max-width: 800px) { .hulp .head { grid-template-columns: 1fr; gap: 16px; } }
.hulp .head h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.0; margin-top: 16px; }
.hulp .head p { color: var(--ink-soft); font-size: 17px; max-width: 480px; line-height: 1.65; }
.hulp-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 900px) { .hulp-groups { grid-template-columns: 1fr; gap: 30px; } }
.hulp-group h3 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay-d); margin: 0 0 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hulp-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.hulp-group li a {
	display: block;
	padding: 18px 0;
	border-bottom: 1px solid var(--line-soft);
	font-family: var(--serif);
	font-style: italic;
	font-size: 18px;
	color: var(--ink);
	line-height: 1.4;
	transition: color 0.18s, padding-left 0.18s;
}
.hulp-group li a:hover { color: var(--clay-d); padding-left: 8px; }
.hulp-group li a::before { content: '"'; opacity: 0.5; }
.hulp-group li a::after { content: '"'; opacity: 0.5; }

.reviews { background: var(--paper-2); --vlak: var(--paper); }
.reviews .head { text-align: center; margin-bottom: 50px; }
.reviews .head h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; margin-top: 16px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 36px; }
@media (max-width: 800px) { .reviews-grid { grid-template-columns: 1fr; } }
.review { background: var(--paper); border-radius: 4px; padding: 32px 34px; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line-soft); }
.review .stars { color: var(--ochre); font-size: 14px; letter-spacing: 2px; }
.review blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.45; color: var(--petrol-d); flex: 1; }
.review footer { border-top: 1px solid var(--line-soft); padding-top: 14px; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); }
.review footer .who { color: var(--ink); font-weight: 500; }
.reviews .source-line { text-align: center; font-size: 14px; color: var(--ink-soft); }
.reviews .source-line strong { color: var(--petrol-d); font-weight: 500; }

.team-intro .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: stretch; }
@media (max-width: 800px) { .team-intro .grid { grid-template-columns: 1fr; gap: 40px; } }
.team-intro h2 { font-size: clamp(38px, 4.8vw, 56px); line-height: 1.0; margin: 16px 0 22px; }
.team-intro .lead { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--petrol-d); line-height: 1.45; margin-bottom: 22px; }
.team-intro p { font-size: 17px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 18px; }
/* Werkt als kolomachtergrond: volgt de hoogte van de tekstkolom ernaast
   in plaats van een eigen beeldverhouding op te leggen. */
.team-visual {
	height: 100%;
	align-self: stretch;
	/* Lage ondergrens: enkel om te voorkomen dat het beeld verdwijnt
	   wanneer er nauwelijks tekst staat. Normaal bepaalt de tekst de hoogte. */
	min-height: 260px;
	border-radius: 4px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: var(--sage);
	box-shadow: 0 30px 60px -30px rgba(31, 64, 64, 0.35);
}
@media (max-width: 800px) {
	.team-visual { height: auto; min-height: 0; aspect-ratio: 3/2; }
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-hero { padding: var(--hero-top) 0 0; }
.contact-hero h1 { font-size: clamp(46px, 5.8vw, 68px); line-height: 1.05; margin: 18px 0 22px; letter-spacing: -0.02em; font-style: italic; }
.contact-hero h1 em { color: var(--petrol); }
.contact-hero .lead { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 640px; }
.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin: 40px 0 100px; align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 30px; } }
/* Blijft wit: dit vak leunt op zijn schaduw, niet op een kleurverschil, en de
   invulvelden erin moeten juist wel oplichten tegen het vak. */
.contact-form { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 40px 44px; box-shadow: 0 30px 60px -30px rgba(46, 90, 90, 0.15); }
@media (max-width: 700px) { .contact-form { padding: 28px; } }
.contact-form h2 { font-size: 28px; color: var(--petrol-d); margin-bottom: 6px; }
.contact-form .form-intro { color: var(--ink-soft); font-size: 14px; margin-bottom: 22px; }
.privacy-note { background: var(--sage-pale); border-radius: 4px; padding: 16px 20px; margin-bottom: 22px; font-size: 13.5px; color: var(--petrol-d); line-height: 1.55; border-left: 3px solid var(--petrol); }
.privacy-note strong { font-weight: 600; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .contact-form .row { grid-template-columns: 1fr; } }
.submit-btn { background: var(--clay); color: var(--paper); padding: 18px 32px; font-size: 16px; font-weight: 500; border: 0; border-radius: 4px; cursor: pointer; width: 100%; margin-top: 8px; min-height: 56px; transition: background 0.18s, transform 0.18s; }
.submit-btn:hover { background: var(--clay-d); transform: translateY(-1px); }
.checkbox-row { display: flex; gap: 12px; align-items: flex-start; background: var(--paper-2); padding: 14px 18px; border-radius: 4px; margin: 16px 0 8px; }
.checkbox-row input { margin-top: 4px; flex-shrink: 0; }
.checkbox-row label { font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.checkbox-row label a { color: var(--petrol-d); border-bottom: 1px solid currentColor; }
.form-legal { font-size: 12px; color: var(--ink-faint); margin-top: 14px; line-height: 1.5; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.contact-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: var(--sticky-top); }
.side-card { background: var(--vlak); border: 1px solid var(--line); border-radius: 4px; padding: 28px 30px; }
.side-card.featured { background: linear-gradient(155deg, #35696b 0%, #234f51 100%); color: var(--paper); border: 0; }
.side-card.featured h3 { color: var(--paper); margin-bottom: 8px; }
.side-card.featured p { color: rgba(244, 237, 225, 0.75); margin-bottom: 14px; }
.side-card.featured .doctena-side { width: 100%; text-align: center; padding: 14px 20px; background: var(--clay); color: var(--paper); border-radius: 4px; font-weight: 500; transition: background 0.15s; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.side-card.featured .doctena-side:hover { background: var(--clay-d); }
.side-card h3 { font-family: var(--serif); font-size: 20px; color: var(--petrol-d); margin-bottom: 10px; }
.side-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin-bottom: 12px; }
.side-card .quick { display: flex; flex-direction: column; gap: 14px; font-size: 16px; }
.side-card .quick a { color: var(--petrol-d); font-weight: 500; display: flex; align-items: center; gap: 12px; }
.side-card .quick a:hover { color: var(--clay); }
.side-card .quick a svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--clay); }
.side-card.crisis { background: #f0e0d8; border-color: #d4a890; }
.side-card.crisis h3 { color: var(--clay-d); }
/* De achtergrond komt van sec-tint/sec-plain (zie template-contact.php);
   de scheidingslijn blijft voor het geval de kleuren ooit gelijk staan. */
.locations-section { padding: 90px 0 110px; border-top: 1px solid var(--line-soft); }
.locations-section .head { margin-bottom: 40px; max-width: 720px; }
.locations-section .head h2 { font-size: clamp(34px, 4.5vw, 48px); line-height: 1.05; margin: 14px 0 14px; }
.locations-section .head h2 em { font-style: italic; }
.locations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 800px) { .locations-grid { grid-template-columns: 1fr; } }
.location { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.location .map { aspect-ratio: 16/9; line-height: 0; background: linear-gradient(135deg, var(--sage-pale), var(--sage)); position: relative; }
.location .map iframe { width: 100%; height: 100%; border: 0; display: block; }
.location .body { padding: 28px 32px; }
.location h3 { font-family: var(--serif); font-size: 24px; color: var(--petrol-d); margin-bottom: 14px; }
.location .addr { font-size: 15px; color: var(--ink); line-height: 1.55; margin-bottom: 18px; }
.location dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.location dt { color: var(--ink-faint); }
.location dd { margin: 0; color: var(--ink); }

/* =====================================================================
   PIJLERPAGINA (specialisatie: relaties, burn-out, ...)
   ===================================================================== */
.pillar-hero { padding: var(--hero-top) 0 60px; }
/* Iets meer ruimte voor de titel; de beeldkolom blijft onder de helft.
   Het beeld volgt de hoogte van de tekstkolom ernaast: een eigen
   beeldverhouding gaf naast een lange of korte tekst telkens een andere
   uitlijning, en dat viel meteen op. Zie het blok "Beeld naast tekst"
   onderaan dit bestand. */
.pillar-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 60px; align-items: stretch; }
@media (max-width: 900px) { .pillar-hero-grid { grid-template-columns: 1fr; gap: 40px; } }
/* De SEO-titels uit de Word-documenten zijn bewust lang (zoekwoord + locatie).
   Iets kleiner dan de homepagina-hero, zodat ze op twee à drie regels blijven. */
.pillar-hero h1 { font-size: clamp(34px, 3.6vw, 46px); line-height: 1.08; margin: 18px 0 26px; letter-spacing: -0.015em; }
.pillar-hero h1 em { color: var(--clay); }
.pillar-hero .lead { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 540px; margin-bottom: 28px; }
.pillar-hero-grid .reveal:first-child { display: flex; flex-direction: column; justify-content: center; }
.pillar-hero-visual {
	border-radius: 4px;
	background-color: #DAE9E7;
	background-size: cover; background-position: center;
	position: relative; overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(42, 38, 32, 0.4);
}


/* Getint, op elke schermbreedte: de balk plakt onder de witte kop en de eerste
   sectie eronder is neutraal, dus wit zou aan beide kanten samenvallen. De
   pillen erin zijn wit (--vlak) en tekenen zich daardoor af. */
.toc-bar { position: sticky; top: calc(var(--header-h) + var(--admin-h)); background: var(--paper-2); --vlak: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; z-index: 40; }
.toc-bar .wrap { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.toc-bar .label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); flex-shrink: 0; }
/*
 * Eén regel. De balk hoort even hoog te blijven als de --toc-h waarmee alle
 * sticky-modules rekenen; brak hij over twee regels, dan klopte die hoogte
 * niet meer. Past er ooit een item te veel bij, dan schuift de rij horizontaal
 * in plaats van te breken.
 */
.toc-bar .toc-links {
	display: flex;
	gap: 8px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 1px;
}
.toc-bar .toc-links::-webkit-scrollbar { display: none; }
.toc-bar a { color: var(--ink); padding: 6px 11px; border-radius: 999px; background: var(--vlak); border: 1px solid var(--line); white-space: nowrap; flex: 0 0 auto; transition: all 0.15s; }
.toc-bar a:hover { background: color-mix(in srgb, var(--vlak) 88%, var(--petrol) 12%); border-color: var(--sage); color: var(--petrol-d); }

.watis-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: stretch; }
/* Bij beeld rechts moeten de kolommen ook omgekeerd worden, anders komt de
   afbeelding in de brede kolom terecht en wordt ze groter dan de tekst. */
.watis-split.img-right { grid-template-columns: 1.2fr 0.8fr; }
.watis-split.img-right .watis-img { order: 2; }
.watis-split.img-right .watis-txt { order: 1; }
/* ─── Inhoudsblokken zonder afbeelding ───
   Gecentreerde kop, en optioneel kaarten die uit de tussenkopjes
   worden opgebouwd. Volgt de vormtaal van de fasen- en pijlerkaarten. */
.block-head { max-width: 820px; margin: 0 auto 44px; text-align: center; }
.block-head h2 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.05; margin: 14px 0 18px; }
.block-head h2 em { font-style: italic; }
.block-head .intro p,
.block-head .intro { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.block-head .intro p { margin-bottom: 12px; }

/* Gecentreerd tekstblok: kop gecentreerd, lopende tekst links uitgelijnd
   in een smalle kolom zodat het leesbaar blijft. */
.block-body { max-width: 720px; margin: 0 auto; }
.block-body p { font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 16px; }
.block-body p strong { color: var(--ink); font-weight: 600; }
.block-body ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.block-body ul li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.block-body ul li::before { content: '—'; position: absolute; left: 0; color: var(--clay); }
/*
 * De onderstreping is voor links in lopende tekst, niet voor knoppen: die
 * kregen zo een streep onder hun opschrift. Ze er achteraf weer afhalen ging
 * ook niet - de secundaire knop heeft een omlijning van 1px rondom, en
 * border-bottom: 0 liet die onderaan openstaan. Knoppen slaan de regel dus
 * gewoon over.
 */
/*
 * Een link in lopende tekst draagt de accentkleur en een onderlijning - anders
 * zie je hem niet.
 *
 * Dit stond hier eerst als een opsomming van modules, en die moest bij elke
 * nieuwe link uitgebreid worden. De links op Praktisch (de agenda, het
 * telefoonnummer, het mailadres) vielen er zo buiten en bleven zwart. Het staat
 * nu omgekeerd: wat in een alinea, definitielijst of citaat staat krijgt de
 * vorm vanzelf, ook tekst die er later bij komt.
 *
 * Opsommingen doen alleen mee binnen .block-body en .tl-body. De andere lijsten
 * in main - .hulp-group en .ov-sub - zijn navigatie en geen lopende tekst.
 * Knoppen, de Doctena-knop en de twee links met een eigen vorm blijven erbuiten.
 */
main :is(p, dd, blockquote) a:not([class*="btn-"]):not(.doctena):not(.urgent-note),
main :is(.block-body, .tl-body) li a:not([class*="btn-"]):not(.doctena),
main .gform-field-label a {
	color: var(--clay-d);
	border-bottom: 1px solid currentColor;
}

main :is(p, dd, blockquote) a:not([class*="btn-"]):not(.doctena):not(.urgent-note):hover,
main :is(.block-body, .tl-body) li a:not([class*="btn-"]):not(.doctena):hover,
main .gform-field-label a:hover { color: var(--clay); }

.block-body .callout-inline { margin-top: 26px; }

/* Kaartenraster. Kaarten in dezelfde rij zijn altijd even hoog (stretch);
   dat geldt voor elke kaartenmodule op de site. */
.block-cards { display: grid; gap: 18px; align-items: stretch; grid-auto-rows: 1fr; }
.block-cards.cols-1 { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.block-cards.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin: 0 auto; }
.block-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.block-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .block-cards.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .block-cards.cols-3 { grid-template-columns: 1fr; } .block-cards.cols-2 { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .block-cards.cols-4 { grid-template-columns: 1fr; } }

.block-card {
	background: var(--vlak);
	border: 1px solid var(--line-soft);
	border-top: 3px solid var(--clay);
	border-radius: 6px;
	padding: 28px 28px 30px;
}
/* Op een neutrale sectie krijgt de kaart de zachte tint mee via --vlak; de
   bovenrand blijft klei, daarom enkel de drie andere randen bijkleuren. */
.sec-plain .block-card {
	border-left-color: var(--line);
	border-right-color: var(--line);
	border-bottom-color: var(--line);
}
.block-card .nr {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-size: 24px;
	color: var(--clay);
	line-height: 1;
	margin-bottom: 14px;
}
.block-card h3 {
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.25;
	color: var(--petrol-d);
	margin-bottom: 12px;
}
.block-card p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 10px; }
.block-card p:last-child { margin-bottom: 0; }
.block-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.block-card ul li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.block-card ul li::before { content: '·'; position: absolute; left: 6px; color: var(--clay); font-weight: 700; }
.block-card strong { color: var(--ink); font-weight: 600; }
.card-body > *:first-child { margin-top: 0; }
.card-body > *:last-child { margin-bottom: 0; }

.block-note { margin: 34px auto 0; max-width: 820px; }
.block-note .callout-inline { margin-top: 0; }
/* Ook de variant met het beeld rechts: die zet hierboven zijn eigen kolommen
   met twee klassen, en won het daarmee van deze regel - op een telefoon bleef
   dat blok in twee kolommen staan en liep de pagina buiten het scherm. */
@media (max-width: 860px) {
	.watis-split,
	.watis-split.img-right { grid-template-columns: 1fr; gap: 32px; }
}
.watis-img {
	align-self: stretch; height: 100%; min-height: 100%; border-radius: 4px;
	background-color: #DAE9E7; background-size: cover; background-position: center;
	box-shadow: 0 30px 60px -36px rgba(42,38,32,0.4);
}
@media (max-width: 860px) { .watis-img { min-height: 280px; } }
.watis-txt h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.06; margin: 14px 0 22px; }
.watis-txt h2 em { font-style: italic; }
.watis-txt .body p { font-size: 16px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 16px; }
.watis-txt .body p strong { color: var(--ink); font-weight: 600; }
.watis-txt .body ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.watis-txt .body ul li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.watis-txt .body ul li::before { content: '—'; position: absolute; left: 0; color: var(--clay); }
.watis-txt .body ul li strong { color: var(--ink); font-weight: 600; }
/* Tussenkopjes binnen een inhoudsblok. */
.watis-txt .body h3 {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.01em;
	color: var(--petrol-d);
	margin: 26px 0 10px;
}
.watis-txt .body > h3:first-child { margin-top: 0; }
.watis-txt .body a { color: var(--clay-d); border-bottom: 1px solid currentColor; }
.watis-txt .body a:hover { color: var(--clay); }

.callout-inline { background: var(--vlak); border-left: 3px solid var(--petrol); padding: 22px 28px; border-radius: 4px; margin-top: 24px; }
/* Binnen een kaart, die zelf al op --vlak staat, gaat het kader een niveau terug. */
.block-card .callout-inline { background: var(--vlak-in); }
.callout-inline p { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--petrol-d); margin: 0; line-height: 1.45; }

.herken .head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start; margin-bottom: 0; }
@media (max-width: 800px) { .herken .head { grid-template-columns: 1fr; gap: 16px; } }
.herken .head .quotes { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.herken .head .quotes span { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--petrol-d); line-height: 1.4; }
.herken .body p { font-size: 16px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 14px; max-width: 640px; }

.aanpak-head { max-width: 820px; margin: 0 auto 44px; text-align: center; }
.aanpak-head h2 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.05; margin: 14px 0 20px; }
.aanpak-head h2 em { font-style: italic; }
.aanpak-head p { font-size: 17px; line-height: 1.75; color: var(--ink-soft); margin: 0 auto 14px; }
.aanpak-pijlers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 auto; max-width: 1040px; grid-auto-rows: 1fr; }
@media (max-width: 900px) { .aanpak-pijlers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .aanpak-pijlers { grid-template-columns: 1fr; } }
.aanpak-pijler { background: var(--vlak); border: 1px solid var(--line); border-radius: 6px; padding: 26px 26px 28px; }
.aanpak-pijler .pijler-nr { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--clay); line-height: 1; display: block; margin-bottom: 16px; }
.aanpak-pijler h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--petrol-d); margin: 0 0 8px; letter-spacing: 0.01em; }
.aanpak-pijler p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.aanpak-team { margin-top: 32px; font-size: 16px; color: var(--ink-soft); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.fasen .head { max-width: 820px; margin: 0 auto 44px; text-align: center; }
.fasen .head h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; margin: 14px 0 12px; }
.fasen .head h2 em { font-style: italic; }
.fasen .head p { font-size: 17px; color: var(--ink-soft); line-height: 1.65; margin: 0 auto; }
.fasen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; grid-auto-rows: 1fr; }
@media (max-width: 860px) { .fasen-grid { grid-template-columns: 1fr; } }
.fase { background: var(--vlak); border: 1px solid var(--line); border-top: 3px solid var(--clay); border-radius: 6px; padding: 30px 30px 32px; }
.fase .nr { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--clay); line-height: 1; display: block; margin-bottom: 12px; }
.fase h3 { font-family: var(--serif); font-size: 22px; color: var(--petrol-d); margin-bottom: 14px; }
.fase ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fase ul li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.fase ul li::before { content: '·'; position: absolute; left: 6px; color: var(--clay); font-weight: 700; }
.fasen-note { margin-top: 28px; font-size: 16px; color: var(--ink-soft); max-width: 820px; }

/* ─── Knoppen halverwege een sectie ───
   Geen banner met eigen tekst: enkel de bestaande knoppen, gecentreerd
   onderaan het gekozen inhoudsblok. */
.mid-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 52px; }
@media (max-width: 720px) { .mid-actions { margin-top: 36px; } }

/* De goedgekeurde urgentiezin is overal een link naar de contactpagina, en
   draagt dezelfde vorm als elke andere link in lopende tekst. */
.urgentie-link { color: var(--clay-d); border-bottom: 1px solid currentColor; }
.urgentie-link:hover { color: var(--clay); }

.urgent-note {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--vlak);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 15px;
	color: var(--petrol-d);
	font-weight: 500;
	transition: border-color 0.18s, background 0.18s;
}
.sec-plain .urgent-note { border-color: var(--sage-soft); }
.urgent-note::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #5fa572; flex-shrink: 0; }
/* De urgentiemelding is een link naar de contactpagina. */
a.urgent-note:hover { border-color: var(--petrol); background: color-mix(in srgb, var(--vlak) 88%, var(--petrol) 12%); }
a.urgent-note .arrow { font-size: 14px; opacity: 0.7; }

.cta-center { text-align: center; }
.cta-center .head { max-width: 780px; margin: 0 auto 14px; }
.cta-center h2 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.05; margin: 14px auto 20px; }
.cta-center h2 em { font-style: italic; }
.cta-center .lead { font-size: 17px; color: var(--ink-soft); line-height: 1.7; max-width: 620px; margin: 0 auto 28px; }
.cta-center .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.faq-section .head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.faq-section .head h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.05; margin: 14px auto 12px; }
.faq-section .head h2 em { font-style: italic; }
.pillar-faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 820px; margin: 0 auto; }
.pillar-faq-item { border-bottom: 1px solid var(--line); padding: 22px 4px; }
.pillar-faq-item summary { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; font-family: var(--serif); font-size: 22px; color: var(--petrol-d); line-height: 1.3; }
.pillar-faq-item summary::-webkit-details-marker { display: none; }
.pillar-faq-item summary .plus { font-size: 22px; color: var(--clay); transition: transform 0.2s; flex-shrink: 0; margin-left: 24px; }
.pillar-faq-item[open] summary .plus { transform: rotate(45deg); }
.pillar-faq-item .answer { padding: 14px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.65; max-width: 760px; }

/* Titels op binnenpagina's recht, behalve waar em italic is */
.pillar-hero h1, .pillar-hero h1 em { font-style: italic; }

/* =====================================================================
   Gravity Forms — laat de formulieren aansluiten op het design
   ===================================================================== */
.gform_wrapper.gravity-theme.gravity-theme,
.gform_wrapper.gravity-theme.gravity-theme input,
.gform_wrapper.gravity-theme.gravity-theme select,
.gform_wrapper.gravity-theme.gravity-theme textarea { font-family: var(--sans); }

.gform_wrapper.gravity-theme.gravity-theme .gform_fields { row-gap: 16px; }

.gform_wrapper.gravity-theme.gravity-theme .gfield_label {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-soft);
	margin-bottom: 6px;
}
.gform_wrapper.gravity-theme.gravity-theme .gfield_required { color: var(--clay); }

.gform_wrapper.gravity-theme.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme.gravity-theme select,
.gform_wrapper.gravity-theme.gravity-theme textarea {
	/* Gravity Forms geeft velden een vaste maat mee; hier vullen ze altijd
	   de volledige breedte van hun kolom. */
	width: 100%;
	max-width: 100%;
	font-size: 15px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #fff;
	color: var(--ink);
	min-height: 44px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
/* Ook de wrappers die GF om een veld zet mogen niet smaller zijn. */
.gform_wrapper.gravity-theme.gravity-theme .ginput_container { width: 100%; }
.gform_wrapper.gravity-theme.gravity-theme .medium,
.gform_wrapper.gravity-theme.gravity-theme .large,
.gform_wrapper.gravity-theme.gravity-theme .small { width: 100%; }
.gform_wrapper.gravity-theme.gravity-theme textarea { min-height: 110px; resize: vertical; }
.gform_wrapper.gravity-theme.gravity-theme input:focus,
.gform_wrapper.gravity-theme.gravity-theme select:focus,
.gform_wrapper.gravity-theme.gravity-theme textarea:focus {
	outline: none;
	border-color: var(--petrol);
	box-shadow: 0 0 0 3px rgba(46, 90, 90, 0.12);
}
.gform_wrapper.gravity-theme.gravity-theme .gfield_description {
	font-size: 12px;
	color: var(--ink-faint);
	padding-top: 6px;
}

/* Radio's als pillen, zoals in het ontwerp */
.gform_wrapper.gravity-theme.gravity-theme .gfield_radio { display: flex; flex-wrap: wrap; gap: 8px; }
/* De keuzerondjes blijven binnen hun eigen label staan. Stonden ze los,
   dan sprong de pagina bij het aanklikken naar boven omdat de focus naar
   een element buiten beeld ging. */
.gform_wrapper.gravity-theme.gravity-theme .gfield_radio .gchoice { display: block; position: relative; }
.gform_wrapper.gravity-theme.gravity-theme .gfield_radio input[type="radio"] {
	position: absolute;
	top: 50%; left: 50%;
	width: 1px; height: 1px;
	margin: 0; padding: 0;
	opacity: 0;
	pointer-events: none;
}
.gform_wrapper.gravity-theme.gravity-theme .gfield_radio label {
	display: inline-block; margin: 0;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: 13.5px;
	color: var(--ink);
	cursor: pointer;
	transition: all 0.15s;
	max-width: none;
}
.gform_wrapper.gravity-theme.gravity-theme .gfield_radio input[type="radio"]:checked + label {
	background: var(--sage-pale);
	border-color: var(--sage);
	color: var(--petrol-d);
	font-weight: 500;
}
.gform_wrapper.gravity-theme.gravity-theme .gfield_radio input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--petrol); outline-offset: 2px;
}

/* Toestemmingsvakje */
.gform_wrapper.gravity-theme.gravity-theme .gfield--type-consent .gfield_label { display: none; }
.gform_wrapper.gravity-theme.gravity-theme .ginput_container_consent {
	display: flex; gap: 12px; align-items: flex-start;
	background: var(--paper-2);
	padding: 14px 18px;
	border-radius: 4px;
}
.gform_wrapper.gravity-theme.gravity-theme .ginput_container_consent input { margin-top: 3px; flex-shrink: 0; }
.gform_wrapper.gravity-theme.gravity-theme .ginput_container_consent label {
	font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0;
}

/* Verzendknop */
.gform_wrapper.gravity-theme.gravity-theme .gform_footer { padding: 8px 0 0; margin: 0; }
.gform_wrapper.gravity-theme.gravity-theme .gform_footer input[type="submit"] {
	width: 100%;
	min-height: 56px;
	padding: 18px 32px;
	background: var(--clay);
	color: var(--paper);
	border: 0;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.18s, transform 0.18s;
}
.gform_wrapper.gravity-theme.gravity-theme .gform_footer input[type="submit"]:hover {
	background: var(--clay-d); transform: translateY(-1px);
}

/* Validatie */
.gform_wrapper.gravity-theme.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme.gravity-theme .gfield_error textarea { border-color: var(--clay); }
.gform_wrapper.gravity-theme.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme.gravity-theme .validation_message {
	color: var(--clay-d);
	background: none;
	border: 0;
	padding: 6px 0 0;
	font-size: 12.5px;
}
.gform_wrapper.gravity-theme.gravity-theme .gform_validation_errors {
	border: 1px solid var(--clay);
	background: #fdf3f3;
	box-shadow: none;
	border-radius: 4px;
}
.gform_wrapper.gravity-theme.gravity-theme .gform_validation_errors > h2 { color: var(--clay-d); font-family: var(--sans); font-size: 14px; }

/* Bevestigingsbericht */
.gform_confirmation_message {
	background: var(--sage-pale);
	border-left: 3px solid var(--petrol);
	padding: 22px 28px;
	border-radius: 4px;
	color: var(--petrol-d);
	font-size: 16px;
	line-height: 1.6;
}

/* =====================================================================
   Informatiepagina (tekstueel, zonder beeldmateriaal)
   ===================================================================== */
/* Wit, net als elke andere hero: de feitenbalk eronder is getint en zou
   anders tegen dezelfde achtergrond aanplakken. */
.info-hero { padding: var(--hero-top) 0 70px; }
.info-hero-inner { max-width: 820px; margin: 26px auto 0; text-align: center; }
.info-hero h1 {
	font-size: clamp(34px, 4.2vw, 54px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 16px 0 22px;
}
.info-hero .lead { font-size: 18px; line-height: 1.65; color: var(--ink-soft); max-width: 680px; margin: 0 auto; }
.info-hero .crumb { justify-content: flex-start; }

/* Paneel met praktische gegevens */
.info-panel {
	max-width: 860px;
	margin: 0 auto;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--petrol);
	border-radius: 6px;
	padding: 34px 38px;
}
.info-panel dl {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(140px, auto) 1fr;
	gap: 20px 32px;
}
@media (max-width: 640px) { .info-panel { padding: 26px 24px; } .info-panel dl { grid-template-columns: 1fr; gap: 6px 0; } }
.info-panel dt {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--clay-d);
	padding-top: 4px;
}
.info-panel dd { margin: 0; }
.info-panel dd p { font-size: 15.5px; line-height: 1.65; color: var(--ink); margin: 0 0 8px; }
.info-panel dd p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .info-panel dd { padding-bottom: 16px; } }

/* Links binnen lopende tekstblokken die van nature geen link bevatten. */
.hero .lead a,
.pillar-hero .lead a,
.loc-note a {
	color: var(--clay-d);
	border-bottom: 1px solid currentColor;
	transition: color 0.15s;
}
.hero .lead a:hover,
.pillar-hero .lead a:hover,
.loc-note a:hover { color: var(--clay); }

/* Notitie onder een locatiekaart, bv. de verwijzing naar de verhuispagina. */
.loc-note {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--line-soft);
}
.loc-note p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* Verwijzing onder de adressen in de footer. */
footer.site .addr-note { margin-top: 12px; }
footer.site .addr-note a {
	color: var(--paper);
	border-bottom: 1px solid rgba(255,255,255,0.35);
	font-size: 13.5px;
}
footer.site .addr-note a:hover { border-color: var(--paper); }

/* =====================================================================
   Mobiele navigatie
   ===================================================================== */

/* ─── Hamburgerknop ─── */
/* De knop zit in een eigen vaste laag boven het paneel; .nav-toggle-plek houdt
   in de header de ruimte vrij zodat de rij niet verspringt. */
.nav-toggle-plek { width: 46px; flex-shrink: 0; margin-right: -8px; }
/*
 * De laag plakt net als de kop zelf, in plaats van vast te hangen aan de
 * viewport. Ze staat vlak achter de header, is nul hoog en trekt haar inhoud
 * er weer overheen; zo staat de knop altijd exact even hoog als de rij in de
 * kop - ook wanneer de beheerbalk de pagina eerst omlaag duwt en daarna
 * wegscrollt.
 */
.nav-toggle-laag {
	position: sticky;
	top: calc(var(--header-h) + var(--admin-h));
	height: 0;
	z-index: 80;
	pointer-events: none;
}
body.admin-bar header.site { top: var(--admin-h); }
.nav-toggle-laag > .wrap {
	/* Verschoven met top, niet met een negatieve marge: die zou samenvallen met
	   de marge van de laag zelf en dan schuift de laag mee omhoog. */
	position: relative;
	top: calc(-1 * var(--header-h));
	/* Min de randlijn onderaan de kop: --header-h is de buitenmaat, de rij met
	   het logo staat gecentreerd in wat daarbinnen overblijft. */
	height: calc(var(--header-h) - 1px);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.nav-toggle {
	pointer-events: auto;
	position: relative;
	width: 46px; height: 46px;
	margin-right: -8px;
	padding: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--petrol);
	flex-shrink: 0;
	z-index: 70;
}
.nav-toggle__bars { display: block; width: 24px; height: 16px; margin: 0 auto; position: relative; }
.nav-toggle__bars span {
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7px; }
.nav-toggle__bars span:nth-child(3) { top: 14px; }
/* Open: de balkjes vormen een kruis. */
/* Open: het kruisje staat rechtsboven in het paneel, niet meer in de kop. */
body.nav-open .nav-toggle {
	position: fixed;
	top: calc(var(--admin-h) + 18px);
	right: 18px;
	margin: 0;
	color: var(--paper);
}
body.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
body.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Achtergrondlaag ─── */
.nav-backdrop {
	position: fixed; inset: 0;
	background: rgba(31, 48, 48, 0.45);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s;
	z-index: 55;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
/* De vaste onderbalk zou dubbelop staan met de knop in het paneel. */
body.nav-open .mobile-cta { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }

/* ─── Schuivend paneel ─── */
.mobile-nav {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(88vw, 380px);
	background: linear-gradient(165deg, #0a5687 0%, var(--petrol-d) 100%);
	color: var(--paper);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s;
	z-index: 60;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: -20px 0 60px -20px rgba(6, 58, 93, 0.6);
}
body.nav-open .mobile-nav { transform: translateX(0); visibility: visible; }
.mobile-nav__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 78px 30px 40px;
}

/* Menu-items komen na elkaar binnen. */
.mobile-nav .mobile-menu { list-style: none; margin: 0; padding: 0; }
.mobile-nav .mobile-menu > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	opacity: 0;
	transform: translateX(18px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
body.nav-open .mobile-nav .mobile-menu > li { opacity: 1; transform: none; }
body.nav-open .mobile-nav .mobile-menu > li:nth-child(1) { transition-delay: 0.10s; }
body.nav-open .mobile-nav .mobile-menu > li:nth-child(2) { transition-delay: 0.16s; }
body.nav-open .mobile-nav .mobile-menu > li:nth-child(3) { transition-delay: 0.22s; }
body.nav-open .mobile-nav .mobile-menu > li:nth-child(4) { transition-delay: 0.28s; }
body.nav-open .mobile-nav .mobile-menu > li:nth-child(5) { transition-delay: 0.34s; }
body.nav-open .mobile-nav .mobile-nav__foot { opacity: 1; transform: none; transition-delay: 0.40s; }

.mobile-nav .mobile-menu > li > a {
	display: block;
	padding: 17px 0;
	font-family: var(--serif);
	font-size: 22px;
	line-height: 1.25;
	color: var(--paper);
}
.mobile-nav .mobile-menu > li > a { transition: color 0.18s ease; }
.mobile-nav .mobile-menu > li.current-menu-item > a,
.mobile-nav .mobile-menu > li.current-menu-ancestor > a,
.mobile-nav .mobile-menu > li > a:hover,
.mobile-nav .mobile-menu > li > a:focus-visible { color: #f3b3b6; }

/* Uitklapbare subniveaus */
.mobile-nav .menu-item-has-children { position: relative; }
.mobile-nav .sub-toggle {
	position: absolute;
	top: 8px; right: -8px;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	color: rgba(255, 255, 255, 0.7);
}
.mobile-nav .sub-toggle::after {
	content: '';
	width: 9px; height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.3s ease;
}
.mobile-nav .menu-item-has-children.is-open .sub-toggle::after { transform: rotate(-135deg) translate(-3px, -3px); }
/* Dichtklappen met max-height en niet met grid-template-rows: dat laatste zet
   enkel de eerste rij op 0fr, waardoor een groep met meer dan één subpagina
   toch open bleef staan. De waarde is ruim genomen: ze mag nooit krapper zijn
   dan de langste groep, anders vallen daar items van weg. */
.mobile-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.34s ease;
}
.mobile-nav .menu-item-has-children.is-open > .sub-menu { max-height: 1200px; }
.mobile-nav .sub-menu > li { min-height: 0; }
.mobile-nav .sub-menu > li:last-child > a { margin-bottom: 16px; }
.mobile-nav .sub-menu a {
	display: block;
	padding: 12px 0 12px 18px;
	font-size: 15.5px;
	color: rgba(255, 255, 255, 0.78);
	border-left: 2px solid rgba(255, 255, 255, 0.2);
	transition: color 0.18s ease, border-color 0.18s ease;
}
.mobile-nav .sub-menu li.current-menu-item a,
.mobile-nav .sub-menu a:hover,
.mobile-nav .sub-menu a:focus-visible {
	color: var(--paper);
	border-left-color: var(--clay);
}

/* Voettekst van het paneel */
.mobile-nav__foot {
	margin-top: auto;
	padding-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-nav__foot .btn-primary { justify-content: center; }
.mobile-nav__contact {
	display: flex; align-items: center; gap: 12px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
	padding: 6px 0;
}
.mobile-nav__contact svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--clay-soft); }
.mobile-nav__contact:hover { color: var(--paper); }

/* ─── Merk bovenaan het paneel ─── */
.mobile-nav__merk {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 26px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--paper);
}
.mobile-nav__merk img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.mobile-nav__merk:hover .name { color: #f3b3b6; }
.mobile-nav__merk .name { transition: color 0.18s ease; }
.mobile-nav__merk .txt { line-height: 1.15; }
.mobile-nav__merk .name { display: block; font-family: var(--serif); font-size: 18px; }
.mobile-nav__merk .sub {
	display: block;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 3px;
}
.mobile-nav .mobile-menu--extra { margin-top: 4px; }

/*
 * Het paneel bestaat op elk scherm. Op een breed scherm zit enkel het tweede
 * menu erin (wie we zijn, team, blog); wordt het scherm smaller, dan verdwijnt
 * de balk bovenaan en neemt het paneel ook het aanbod over.
 */
/* Nu de balk minder items telt is er ruimte om de langere titels op één regel
   te houden; een item dat over twee regels valt maakt de kop onrustig. */
nav.main > ul > li > a { white-space: nowrap; }

/* Puur een icoon: het woord "Menu" ernaast kostte breedte die de menubalk
   zelf nodig heeft. */
.nav-toggle { display: flex; align-items: center; justify-content: center; }
@media (max-width: 1240px) {
	/* Zonder de menubalk zou de afspraakknop midden in de kop blijven hangen;
	   samen met de hamburger hoort hij rechts. */
	header.site .doctena { margin-left: auto; }
	header.site .row { gap: 16px; }
}
@media (min-width: 1241px) {
	.mobile-nav .mobile-menu--aanbod { display: none; }
}
/* Op een telefoon staat de afspraakknop al vast onderaan het scherm; boven in
   de kop zou hij daar enkel ruimte wegnemen van het logo. */
@media (max-width: 700px) {
	header.site .doctena { display: none; }
}

/* Geen beweging voor wie dat liever niet heeft. */
@media (prefers-reduced-motion: reduce) {
	.mobile-nav, .nav-backdrop, .nav-toggle__bars span,
	.mobile-nav .mobile-menu > li, .mobile-nav__foot, .mobile-nav .sub-menu { transition: none; }
}

/* =====================================================================
   Mobiele verfijningen
   ===================================================================== */
@media (max-width: 700px) {
	/* Feitenbalk als raster in plaats van een rommelige rij. */
	.promise-strip { padding: 20px 0; }
	.promise-strip .row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px 18px;
	}
	.promise-strip .item { flex-direction: column; align-items: flex-start; gap: 2px; }
	.promise-strip .key { font-size: 20px; }
	.promise-strip .lbl { font-size: 12.5px; line-height: 1.35; }

	/* Ruimere tikdoelen in de footer. */
	footer.site ul { gap: 2px; }
	footer.site ul a { display: inline-block; padding: 7px 0; }
	footer.site .bottom { gap: 8px; }

	/* Kopteksten iets rustiger. */
	.closing h2 { font-size: clamp(32px, 9vw, 44px); }
	.info-hero h1 { font-size: clamp(28px, 8vw, 40px); }
	.pillar-hero h1 { font-size: clamp(28px, 8vw, 40px); }
	.hero h1 { font-size: clamp(32px, 9.5vw, 46px); }
}

/* ─── Inhoudsopgave op mobiel ───
   Niet vastgezet: samen met de header en de onderbalk nam dat bijna de
   halve schermhoogte in. De links staan op één horizontaal schuifbare
   rij in plaats van over meerdere rijen te breken. */
@media (max-width: 1240px) {
	.toc-bar {
		position: static;
		border-top: 0;
		padding: 16px 0 18px;
	}
	.toc-bar .wrap {
		display: block;
		position: relative;
	}
	.toc-bar .label { display: block; margin-bottom: 10px; }
	.toc-bar .toc-links {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Rechts vervaagt de rij, zodat zichtbaar is dat er meer volgt. */
		-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
		mask-image: linear-gradient(to right, #000 88%, transparent 100%);
		padding-right: 24px;
	}
	.toc-bar .toc-links::-webkit-scrollbar { display: none; }
	.toc-bar a {
		scroll-snap-align: start;
		padding: 8px 14px;
	}
}

/* =====================================================================
   ONS VERHAAL — verhalende pagina met tijdlijn
   ===================================================================== */

/* ─── Tijdlijn (Ons verhaal) ───
   Eén doorlopende lijn met de momenten ernaast. Het jaartal staat in de
   kantlijn, groot en cursief; momenten zonder jaartal krijgen enkel een
   kleine stip, want daar loopt het verhaal gewoon door. Geen volgnummers:
   naast een jaartal is dat dubbelop. */
.tl { position: relative; max-width: 940px; margin: 0 auto; list-style: none; padding: 0; }
.tl::before {
	content: ''; position: absolute; left: 165px; top: 16px; bottom: 16px; width: 1px;
	background: linear-gradient(180deg, transparent, var(--sage-soft) 6%, var(--sage-soft) 94%, transparent);
}

.tl-moment { display: grid; grid-template-columns: 165px 1fr; gap: 52px; padding-bottom: 66px; }
.tl-moment:last-child { padding-bottom: 0; }

/* De lijn kleurt mee tijdens het scrollen; de hoogte komt uit site.js. */
.tl-voortgang {
	position: absolute; left: 165px; top: 16px;
	width: 1px; height: 0;
	background: var(--clay);
	will-change: height;
}

.tl-merk { position: relative; text-align: right; }
/* Stip op de lijn. */
.tl-merk::after {
	content: ''; position: absolute; right: -5px; top: 12px;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--paper-2); border: 1px solid var(--clay);
	transition: background-color 0.35s ease, border-color 0.35s ease;
}
.sec-plain .tl-merk::after { background: var(--paper); }
/* Een moment met een jaartal is een mijlpaal en krijgt een vol merkteken. */
.tl-moment.heeft-jaar .tl-merk::after {
	right: -7px; top: 10px;
	width: 13px; height: 13px;
	background: var(--clay); border-color: var(--clay);
}
/* Met JS: wat de lijn nog niet bereikt heeft, staat gedempt. */
.js-tijdlijn .tl-moment:not(.is-bereikt) .tl-merk::after { border-color: var(--sage-soft); }
.js-tijdlijn .tl-moment.heeft-jaar:not(.is-bereikt) .tl-merk::after { background: var(--sage-soft); border-color: var(--sage-soft); }
/* Elk moment krijgt een tijdsaanduiding. Een jaartal mag groter dan een
   woordlabel als "Vandaag", zodat dat laatste niet over twee regels breekt. */
.tl-jaar {
	display: block; padding-right: 30px;
	font-family: var(--serif); font-style: italic;
	line-height: 1.05;
	color: var(--clay);
	font-size: clamp(22px, 2.3vw, 28px);
}
.tl-jaar.is-jaartal { font-size: clamp(26px, 2.9vw, 36px); line-height: 1; }

.tl-inhoud h2 { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; color: var(--petrol-d); margin: 0 0 16px; }
.tl-inhoud h2 em { font-style: italic; color: var(--clay); }
.tl-body p { font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }
.tl-body p:last-child { margin-bottom: 0; }
.tl-body ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 9px; }
.tl-body ul li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.tl-body ul li::before { content: '—'; position: absolute; left: 0; color: var(--clay); }
.tl-body strong { color: var(--ink); font-weight: 600; }
.tl-inhoud .callout-inline { margin-top: 22px; }

@media (max-width: 820px) {
	.tl::before, .tl-voortgang { left: 5px; }
	.tl-moment { grid-template-columns: 1fr; gap: 6px; padding-left: 32px; padding-bottom: 46px; }
	.tl-merk { text-align: left; min-height: 0; }
	.tl-merk::after { right: auto; left: -32px; top: 10px; }
	.tl-moment.heeft-jaar .tl-merk::after { left: -34px; top: 8px; }
	.tl-jaar { padding-right: 0; margin-bottom: 6px; font-size: 26px; }
}

/* ─── Uitgelichte zin die op zichzelf staat ───
   Eén vorm voor de hele site: groot, cursief serif, gecentreerd, met een
   kort streepje erboven. Losse zinnen binnen een tekstblok gebruiken juist
   altijd .callout-inline. Meer smaken dan deze twee zijn er niet. */
.statement { padding: 96px 0; }
.statement-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.statement-merk { display: block; width: 44px; height: 2px; background: var(--clay); margin: 0 auto 30px; }
.statement-inner p,
.s4p-kernzin,
.verwacht-slot {
	font-family: var(--serif); font-style: italic;
	font-size: clamp(23px, 2.8vw, 34px) !important;
	line-height: 1.32 !important;
	color: var(--petrol-d) !important;
	margin: 0 auto !important;
	max-width: 800px;
	text-align: center;
}
.statement-inner p em,
.s4p-kernzin em,
.verwacht-slot em { color: var(--clay); font-style: italic; }
.statement-note { display: block; margin-top: 24px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

/* ─── Aanbodraster met interne links ─── */
.aanbod-section .block-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.aanbod-section .block-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; margin: 14px 0 12px; }
.aanbod-section .block-head h2 em { font-style: italic; }
.aanbod-section .intro p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.aanbod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; grid-auto-rows: 1fr; }
@media (max-width: 980px) { .aanbod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .aanbod-grid { grid-template-columns: 1fr; } }
.aanbod-kaart {
	position: relative;
	display: flex; flex-direction: column; gap: 10px;
	padding: 26px 54px 28px 26px;
	background: var(--vlak);
	border: 1px solid var(--line);
	border-radius: 6px;
	transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.aanbod-kaart:hover { background: color-mix(in srgb, var(--vlak) 88%, var(--petrol) 12%); border-color: var(--sage); transform: translateY(-2px); }
/* Vaste plek voor het icoon, ook wanneer een pagina er nog geen heeft:
   anders begint dat ene label hoger dan de rest van de rij. */
.aanbod-icoon { display: block; width: 40px; height: 40px; object-fit: contain; object-position: left center; }
.aanbod-icoon-leeg { display: block; width: 40px; height: 40px; position: relative; }
.aanbod-icoon-leeg::before {
	content: ''; position: absolute; left: 2px; top: 14px;
	width: 26px; height: 2px; background: var(--sage-soft);
}
.aanbod-label { font-family: var(--serif); font-size: 20px; line-height: 1.25; color: var(--petrol-d); }
.aanbod-text { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.aanbod-pijl {
	position: absolute; right: 22px; top: 28px;
	display: inline-flex; color: var(--clay);
	transition: transform 0.18s;
}
.aanbod-kaart:hover .aanbod-pijl { transform: translateX(4px); }

/* =====================================================================
   SCHOOL 4 POWER — opleidingscentrum (eigen, donkerder gezicht)
   ===================================================================== */

.s4p-hero {
	position: relative; overflow: hidden;
	padding: var(--hero-top) 0 90px;
	background: var(--petrol-d);
	/* Donkere sectie: een blok erin licht op in plaats van af te steken. */
	--vlak: rgba(255, 255, 255, 0.09);
	color: rgba(244, 237, 225, 0.8);
}
/* Zachte lichtval rechtsboven, zodat het vlak niet dof wordt. */
.s4p-hero::before {
	content: ''; position: absolute; right: -8%; top: -40%;
	width: 620px; height: 620px; border-radius: 50%;
	background: radial-gradient(circle, rgba(150, 177, 176, 0.28), transparent 68%);
	pointer-events: none;
}
.s4p-hero > .wrap { position: relative; z-index: 1; }
.s4p-crumb { color: rgba(244, 237, 225, 0.5); }
.s4p-crumb a { color: rgba(244, 237, 225, 0.6); }
.s4p-crumb a:hover { color: var(--paper); }
.s4p-crumb .sep { color: rgba(244, 237, 225, 0.28); }
.s4p-crumb .here { color: var(--paper); font-weight: 500; }
.s4p-hero .eyebrow { color: var(--sage-soft); }
/* Zelfde kolomverdeling als de pijlerhero, zodat het beeld exact even
   groot uitkomt als op de andere pagina's. */
.s4p-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 60px; align-items: stretch; margin-top: 16px; }
@media (max-width: 940px) { .s4p-hero-grid { grid-template-columns: 1fr; gap: 36px; } }
.s4p-hero h1 {
	font-size: clamp(32px, 3.6vw, 46px);
	line-height: 1.1; letter-spacing: -0.015em;
	color: var(--paper);
	margin: 16px 0 22px;
}
.s4p-hero h1 em { font-style: italic; color: var(--clay-soft); }
.s4p-hero .lead { font-size: 17.5px; line-height: 1.7; max-width: 560px; margin: 0 0 30px; }
.s4p-hero-acties { display: flex; gap: 14px; flex-wrap: wrap; }
.s4p-hero-acties .btn-secondary { border-color: rgba(244, 237, 225, 0.45); color: var(--paper); }
.s4p-hero-acties .btn-secondary:hover { background: var(--paper); color: var(--petrol-d); border-color: var(--paper); }
.s4p-hero-visual {
	border-radius: 4px;
	background-color: #0b4b76;
	background-size: cover; background-position: center;
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.65);
}


/* ─── Belofte ─── */
.s4p-belofte { padding: 90px 0 80px; }
/* De kop en de kernzin staan gecentreerd; de alinea's niet. Dit blok draagt
   sinds de nieuwe tekst twee volle alinea's, en gecentreerde lopende tekst
   leest daarvoor te moeizaam. */
.s4p-belofte-inner { max-width: 760px; margin: 0 auto; }
.s4p-belofte-inner h2 {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.08;
	margin: 0 0 26px;
	text-align: center;
}
.s4p-belofte-inner p { font-size: 17.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 18px; }
.s4p-belofte-inner .s4p-kernzin { text-align: center; }
.s4p-kernzin { margin-top: 34px !important; padding-top: 30px; border-top: 1px solid var(--line); }

/* ─── Programma ─── */
.s4p-programma .block-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.s4p-programma .block-head h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; margin: 14px 0 12px; }
.s4p-programma .block-head h2 em { font-style: italic; }
.s4p-programma .intro p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.s4p-programma .block-head { margin-bottom: 20px; }

.programma { max-width: 980px; margin: 0 auto; }
.prog-item {
	display: grid; grid-template-columns: 110px 1fr; gap: 32px;
	padding: 46px 0;
	border-top: 1px solid var(--line);
	scroll-margin-top: var(--sticky-top);
}
.prog-item:last-child { border-bottom: 1px solid var(--line); }
.prog-zij { position: relative; }
.prog-nr {
	position: sticky; top: var(--sticky-top);
	display: block;
	font-family: var(--serif); font-style: italic;
	font-size: 46px; line-height: 1;
	color: var(--clay);
	opacity: 0.75;
}
/* Onderdeel met beeld: tekst en beeld naast elkaar, om en om van kant. Het
   beeld staat eerst in de code, zodat het op mobiel bovenaan komt en de tekst
   niet als één blok begint. */
.prog-item.heeft-beeld .prog-body {
	display: grid; grid-template-columns: minmax(0, 1fr) 300px;
	gap: 34px; align-items: stretch;
}
.prog-item.heeft-beeld .prog-tekst { grid-column: 1; grid-row: 1; }
.prog-item.heeft-beeld .prog-beeld { grid-column: 2; grid-row: 1; }
.prog-item.heeft-beeld:nth-of-type(even) .prog-body { grid-template-columns: 300px minmax(0, 1fr); }
.prog-item.heeft-beeld:nth-of-type(even) .prog-tekst { grid-column: 2; }
.prog-item.heeft-beeld:nth-of-type(even) .prog-beeld { grid-column: 1; }
.prog-beeld img {
	position: sticky; top: var(--sticky-top);
	display: block; width: 100%; height: auto;
	aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: var(--radius-l, 18px);
	box-shadow: 0 18px 40px -28px rgba(16, 44, 52, 0.5);
}
@media (max-width: 860px) {
	.prog-item.heeft-beeld .prog-body,
	.prog-item.heeft-beeld:nth-of-type(even) .prog-body { grid-template-columns: 1fr; gap: 20px; }
	.prog-item.heeft-beeld .prog-beeld,
	.prog-item.heeft-beeld:nth-of-type(even) .prog-beeld { grid-column: 1; grid-row: 1; }
	.prog-item.heeft-beeld .prog-tekst,
	.prog-item.heeft-beeld:nth-of-type(even) .prog-tekst { grid-column: 1; grid-row: 2; }
	.prog-beeld img { position: static; aspect-ratio: 4 / 5; max-height: 60vh; }
}

.prog-body h2 { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--petrol-d); margin: 0 0 16px; }
.prog-body h2 em { font-style: italic; color: var(--clay); }
.prog-body p { font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }
.prog-body p:last-child { margin-bottom: 0; }
.prog-body ul {
	list-style: none; padding: 0;
	margin: 18px 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px;
}
@media (max-width: 700px) { .prog-body ul { grid-template-columns: 1fr; } }
.prog-body ul li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.prog-body ul li::before {
	content: ''; position: absolute; left: 2px; top: 0.62em;
	width: 7px; height: 7px; border-radius: 2px;
	background: var(--clay-soft); border: 1px solid var(--clay);
}
.prog-body strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
	.prog-item { grid-template-columns: 1fr; gap: 10px; padding: 36px 0; }
	.prog-nr { position: static; font-size: 32px; }
}

/* ─── Citaat ─── */
.s4p-citaat { padding: 86px 0; }
.s4p-citaat blockquote { max-width: 860px; margin: 0 auto; text-align: center; padding: 0; border: 0; }
.s4p-citaat blockquote p {
	font-family: var(--serif); font-style: italic;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.28; color: var(--petrol-d);
	margin: 0;
}
.s4p-citaat blockquote p::before { content: '\201C'; color: var(--clay); }
.s4p-citaat blockquote p::after { content: '\201D'; color: var(--clay); }
.s4p-citaat cite { display: block; margin-top: 22px; font-style: normal; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

/* ─── Aanpak ─── */
.s4p-aanpak-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .s4p-aanpak-grid { grid-template-columns: 1fr; gap: 34px; } }
.s4p-aanpak h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; margin: 14px 0 20px; }
.s4p-aanpak h2 em { font-style: italic; }
.s4p-aanpak-body p { font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }
.s4p-aanpak-body p:last-child { margin-bottom: 0; }
.werkvormen { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.werkvormen li {
	padding: 11px 18px; border-radius: 999px;
	background: var(--vlak); border: 1px solid var(--line);
	font-size: 14.5px; color: var(--petrol-d);
}

/* ─── Resultaat ─── */
.s4p-verwacht .block-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.s4p-verwacht .block-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; margin: 14px 0 0; }
.s4p-verwacht .block-head h2 em { font-style: italic; }
.verwacht-grid {
	list-style: none; padding: 0; margin: 0 auto; max-width: 980px;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) { .verwacht-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .verwacht-grid { grid-template-columns: 1fr; } }
.verwacht-grid li {
	display: flex; align-items: flex-start; gap: 13px;
	padding: 20px 22px;
	background: var(--vlak);
	border: 1px solid var(--line);
	border-radius: 6px;
	font-size: 15.5px; line-height: 1.5; color: var(--petrol-d);
}
.verwacht-vink { flex-shrink: 0; display: inline-flex; width: 18px; height: 18px; margin-top: 1px; color: #5fa572; }
.verwacht-vink svg { width: 18px; height: 18px; }
.verwacht-slot { margin-top: 44px !important; }

/* Een pijlerpagina zonder hero-beeld: tekst over de volle breedte in plaats
   van een leeg beeldvak ernaast. Gebruikt door de onderliggende dienstpagina's. */
.pillar-hero-grid.geen-beeld { grid-template-columns: 1fr; }
.pillar-hero-grid.geen-beeld > .reveal:first-child { max-width: 860px; }
/* Zonder beeld staat de herotekst gecentreerd; links uitgelijnd met een leeg
   halfvlak ernaast oogt onaf. De kolom is een flexbox, dus alleen text-align
   volstaat niet: de eyebrow is een flex-item en heeft align-items nodig. */
.pillar-hero-grid.geen-beeld > .reveal:first-child {
	/* Geen margin:auto — op een grid-item krimpt het blok dan tot zijn inhoud. */
	width: 100%;
	max-width: 820px;
	justify-self: center;
	text-align: center;
	align-items: center;
}
.pillar-hero-grid.geen-beeld .crumb { justify-content: center; }
.pillar-hero-grid.geen-beeld .lead { margin-left: auto; margin-right: auto; }

/* ─── Tekstrij zonder afbeelding ───
   Titel en tekstkolom krijgen exact dezelfde breedte, met een kort streepje
   ertussen. Anders staat een brede gecentreerde titel boven een smallere,
   links uitgelijnde tekst en oogt dat toevallig in plaats van bedoeld. */
.blok-tekst .block-head { max-width: 720px; margin: 0 auto 28px; }
.blok-tekst .block-head::after {
	content: ''; display: block;
	width: 44px; height: 2px;
	background: var(--clay);
	margin: 24px auto 0;
}
.blok-tekst .block-head h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 0; }

/* ─── Megamenu ───
   Een hoofditem met kleinkinderen krijgt een breed paneel met een kolom per
   pijler. Items zonder kleinkinderen houden het gewone, smalle uitklapmenu:
   een paneel over de volle breedte voor één link oogt leeg. */
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu {
	display: grid;
	/* Eén rij: elke pijler krijgt zijn eigen kolom. Met auto-fit wikkelde de
	   vierde pijler onder de eerste en bleef er een gat naast staan. */
	grid-auto-flow: column;
	grid-auto-columns: minmax(210px, 280px);
	gap: 26px 40px;
	width: max-content;
	min-width: 0;
	max-width: min(1080px, calc(100vw - 48px));
	padding: 32px 36px 34px;
	border-radius: 12px;
}
/* Tweede niveau wordt een kolomkop. */
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu > li {
	display: block;
	position: static;
	width: auto;
}
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu > li > a {
	font-family: var(--serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1.25;
	color: var(--petrol-d);
	padding: 0 0 10px;
	border-radius: 0;
	border-bottom: 1px solid var(--line);
	white-space: normal;
}
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu > li > a:hover {
	background: transparent;
	color: var(--clay);
	border-bottom-color: var(--clay);
}
/* Het uitklappijltje hoort hier niet: binnen het paneel klapt niets meer uit. */
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu a::after { display: none; }

/* De kolomkop is de pijlerpagina zelf. Zonder markering leest die als een
   opschrift in plaats van als een link, dus krijgt hij een vaste pijl. */
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu > li > a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu > li > a::after {
	content: '\2192';
	display: inline-block;
	width: auto; height: auto;
	border: 0;
	margin: 0;
	transform: none;
	opacity: 1;
	font-family: var(--sans);
	font-size: 15px;
	font-style: normal;
	color: var(--clay);
	transition: transform 0.16s;
}
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu > li > a:hover::after {
	transform: translateX(4px);
}

/* Derde niveau: gewone lijst onder de kolomkop, altijd zichtbaar. */
nav.main > ul > li:has(.sub-menu .sub-menu) .sub-menu .sub-menu {
	position: static;
	/* inherit, niet visible: met visible blijft deze lijst zichtbaar én
	   aanklikbaar terwijl het paneel eromheen dicht is. Zo'n onzichtbaar blok
	   lag over het geopende paneel van het buuritem heen. */
	opacity: 1; visibility: inherit; transform: none;
	display: flex; flex-direction: column; gap: 1px;
	background: transparent; border: 0; box-shadow: none;
	padding: 8px 0 0; margin: 0;
	width: auto; min-width: 0; max-width: none;
}
nav.main > ul > li:has(.sub-menu .sub-menu) .sub-menu .sub-menu::before { display: none; }
nav.main > ul > li:has(.sub-menu .sub-menu) .sub-menu .sub-menu a {
	font-size: 14.5px;
	line-height: 1.4;
	padding: 7px 10px;
	color: var(--ink-soft);
	white-space: normal;
}

/* Derde niveau in het mobiele paneel iets verder inspringen. */
/* ─── Mobiel: derde niveau ───
   Geen tweede accordeon. Het derde niveau hoort bij de pijler erboven en
   komt mee zodra de groep opengaat, ingesprongen en wat rustiger van toon.
   Zo blijft het één tik naar elke pagina. */
.mobile-nav .sub-menu .sub-menu {
	max-height: none;
	overflow: visible;
	transition: none;
	margin: 2px 0 10px 18px;
	border-left: 2px solid rgba(255, 255, 255, 0.14);
}
.mobile-nav .sub-menu .sub-menu a {
	padding: 9px 0 9px 16px;
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.6);
	border-left: 0;
}
.mobile-nav .sub-menu .sub-menu li.current-menu-item a { color: var(--paper); }
.mobile-nav .sub-menu .sub-menu > li:last-child > a { margin-bottom: 0; }

/* De actieve pijler als kolomkop: geen gevuld vlak, wel klei en een
   kleirand. Het gevulde vlak hoort bij de smalle dropdown. */
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu > li.current-menu-item > a,
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu > li.current_page_item > a,
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu > li.current-menu-ancestor > a,
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu > li.current_page_ancestor > a {
	background: transparent;
	color: var(--clay-d);
	border-bottom-color: var(--clay);
}

/* =====================================================================
   BLOG
   ===================================================================== */

.post-meta { font-size: 14px; color: var(--ink-faint); display: flex; gap: 10px; align-items: baseline; margin: 6px 0 0; }
.post-meta .sep { color: var(--line); }

/* ─── Artikeltekst ─── */
.post-body { padding-top: 80px; }
.post-body .block-body { max-width: 720px; }
.post-body .block-body h2 {
	font-family: var(--serif);
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.2;
	color: var(--petrol-d);
	margin: 40px 0 14px;
}
.post-body .block-body h3 {
	font-family: var(--serif);
	font-size: clamp(20px, 2.1vw, 24px);
	line-height: 1.25;
	color: var(--petrol-d);
	margin: 32px 0 12px;
}
.post-body .block-body h2:first-child,
.post-body .block-body h3:first-child { margin-top: 0; }
.post-body .block-body h4 { font-family: var(--sans); font-size: 16px; font-weight: 600; font-style: normal; color: var(--petrol-d); margin: 28px 0 10px; }
.post-body .block-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 26px 0; }
.post-body .block-body blockquote {
	margin: 28px 0;
	padding: 22px 28px;
	background: var(--sage-pale);
	border-left: 3px solid var(--petrol);
	border-radius: 4px;
}
.post-body .block-body blockquote p {
	font-family: var(--serif); font-style: italic; font-size: 19px;
	color: var(--petrol-d); line-height: 1.45; margin: 0;
}
.post-body .block-body ol { padding-left: 22px; margin: 0 0 18px; display: grid; gap: 10px; }
.post-body .block-body ol li { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }

/* ─── Filterbalk ─── */
.blog-filter .toc-links a.is-actief {
	background: var(--petrol);
	border-color: var(--petrol);
	color: var(--paper);
}
/* De thema's beantwoorden "waarover gaat het?", School 4 POWER "van wie komt
   het?". Een lijntje ertussen laat zien dat het twee soorten filters zijn. */
.blog-filter .toc-scheiding {
	width: 1px;
	align-self: stretch;
	min-height: 22px;
	background: var(--line);
	margin: 0 4px;
}
.blog-filter .toc-links a.is-s4p {
	border-style: dashed;
	border-color: var(--clay);
	color: var(--clay-d);
}
.blog-filter .toc-links a.is-s4p:hover {
	background: var(--clay);
	border-color: var(--clay);
	border-style: solid;
	color: var(--paper);
}
.blog-filter .toc-links a.is-s4p.is-actief {
	background: var(--clay-d);
	border-color: var(--clay-d);
	border-style: solid;
	color: var(--paper);
}
@media (max-width: 700px) {
	.blog-filter .toc-scheiding { display: none; }
}

/* ─── Berichtenraster ─── */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: stretch;
	grid-auto-rows: 1fr;
}
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .blog-grid { grid-template-columns: 1fr; } }

.blog-kaart {
	display: flex;
	flex-direction: column;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.18s, border-color 0.18s, background 0.18s;
}
/* Een kaart mag nooit dezelfde kleur hebben als de sectie eronder. */
.sec-tint .blog-kaart { background: var(--paper); }
.blog-kaart:hover { transform: translateY(-3px); border-color: var(--sage); }
.blog-kaart-beeld {
	display: block;
	aspect-ratio: 16 / 10;
	background-color: #dae9e7;
	background-size: cover;
	background-position: center;
}
.blog-kaart-tekst { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.blog-kaart-meta { display: flex; gap: 10px; align-items: baseline; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.blog-kaart-cat { color: var(--clay-d); font-weight: 600; }
.blog-kaart-titel {
	font-family: var(--serif); font-style: italic;
	font-size: 21px; line-height: 1.25;
	color: var(--petrol-d);
}
.blog-kaart:hover .blog-kaart-titel { color: var(--clay-d); }
.blog-kaart-lees {
	margin-top: auto; padding-top: 6px;
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 14px; color: var(--petrol-d);
}
.blog-kaart-lees svg { transition: transform 0.18s; }
.blog-kaart:hover .blog-kaart-lees svg { transform: translateX(3px); }

/* ─── Paginatie ─── */
.blog-paginatie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 46px; }
.blog-paginatie .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 14px;
	border: 1px solid var(--line); border-radius: 6px;
	font-size: 15px; color: var(--ink-soft);
	transition: border-color 0.15s, color 0.15s;
}
.blog-paginatie .page-numbers:hover { border-color: var(--sage); color: var(--petrol-d); }
.blog-paginatie .page-numbers.current { background: var(--petrol); border-color: var(--petrol); color: var(--paper); }
.blog-leeg { text-align: center; color: var(--ink-soft); font-size: 17px; }

.verwant .block-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.verwant .block-head h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.1; margin: 14px 0 0; }
/* De filterbalk scheidt de hero al van het raster; 110px eronder is te veel. */
.blog-lijst { padding-top: 56px; }
/* Ondertekening onderaan een bericht. */
.post-auteur {
	margin-top: 34px !important;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	color: var(--petrol-d);
	line-height: 1.5;
}

/* =====================================================================
   TRAININGEN (School 4 POWER)
   ===================================================================== */

/* ─── Specificatiebalk ───
   Tegels met een icoon, label en waarde. Alleen ingevulde velden komen door,
   dus er staat nooit een leeg vakje. */
.spec-balk { background: var(--paper-2); --vlak: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 0; }
.spec-raster { display: grid; gap: 22px 34px; margin: 0; }
.spec-raster.kols-1 { grid-template-columns: 1fr; max-width: 420px; }
.spec-raster.kols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.spec-raster.kols-3 { grid-template-columns: repeat(3, 1fr); }
.spec-raster.kols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .spec-raster[class*="kols-"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .spec-raster[class*="kols-"] { grid-template-columns: 1fr; } }

.spec { display: flex; align-items: flex-start; gap: 14px; }
.spec-icoon {
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	border-radius: 8px;
	background: var(--petrol);
	color: var(--paper);
}
.spec-icoon svg { width: 21px; height: 21px; }
.spec dt {
	font-family: var(--sans);
	font-size: 11px; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 3px;
}
.spec dd {
	margin: 0;
	font-family: var(--serif);
	font-size: 17px; line-height: 1.35;
	color: var(--petrol-d);
}

/* ─── Kaart in het overzicht ─── */
.training-kaart-prijs {
	font-family: var(--serif); font-style: italic;
	font-size: 17px; color: var(--clay-d);
}

/* Ons verhaal: één breed beeld tussen de tijdlijn en de kernzin. */
.verhaal-beeld figure { max-width: 980px; margin: 0 auto; }
.verhaal-beeld img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: var(--radius-l, 18px);
	box-shadow: 0 26px 60px -34px rgba(16, 44, 52, 0.55);
}
.verhaal-beeld figcaption {
	margin: 14px auto 0; max-width: 720px; text-align: center;
	font-family: var(--serif); font-style: italic;
	font-size: 16px; line-height: 1.6; color: var(--ink-soft);
}

/* "Lees ook": een rij interne links boven de CTA, geen kaartenblok. */
.lees-ook-rij {
	margin-bottom: 54px;
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: 12px 26px;
	max-width: 980px; margin: 0 auto;
	padding: 26px 30px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-l, 18px);
}
.lees-ook-label {
	font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--clay);
	flex: 0 0 auto;
}
.lees-ook-rij ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px 26px;
}
.lees-ook-rij li { margin: 0; }
.lees-ook-rij a {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 16px; line-height: 1.5; color: var(--petrol-d);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.lees-ook-rij a .arrow { color: var(--clay); transition: transform 0.2s ease; }
.lees-ook-rij a:hover { color: var(--clay-d); border-bottom-color: var(--clay); }
.lees-ook-rij a:hover .arrow { transform: translateX(3px); }
@media (max-width: 640px) {
	.lees-ook-rij { flex-direction: column; gap: 14px; padding: 22px; }
	.lees-ook-rij ul { flex-direction: column; gap: 12px; }
}

/* "Bekijk ook": klein gecentreerd rooster met vakjes onderaan de pagina. Deelt
   de vormgeving van het aanbod op Ons verhaal, zodat het één taal blijft. */
.lees-ook-kop { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.lees-ook-kop h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.1; margin: 14px 0 0; }
.lees-ook-kop h2 em { font-style: italic; }
.lees-ook-grid { max-width: 980px; margin: 0 auto; }
.lees-ook-grid.kols-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.lees-ook-grid.kols-2 { grid-template-columns: repeat(2, 1fr); }
.lees-ook-grid.kols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) {
	.lees-ook-grid.kols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.lees-ook-grid.kols-2,
	.lees-ook-grid.kols-3 { grid-template-columns: 1fr; }
}
.lees-ook .aanbod-kaart { padding: 22px 48px 24px 22px; }
.lees-ook .aanbod-label { font-size: 17px; }
.lees-ook .aanbod-text { font-size: 14.5px; line-height: 1.55; }

/* Vierde niveau in het megamenu: een subpagina die zelf nog pagina's onder zich
   heeft (Relatietraining voor koppels). Kleiner en ingesprongen, zodat het
   duidelijk onder zijn eigen kop hangt. */
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu .sub-menu .sub-menu {
	position: static;
	display: block;
	opacity: 1;
	visibility: inherit;
	pointer-events: auto;
	transform: none;
	box-shadow: none;
	background: transparent;
	border: 0;
	padding: 2px 0 6px;
	margin: 0 0 4px 14px;
	min-width: 0;
	border-left: 1px solid var(--line);
}
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu .sub-menu .sub-menu li > a {
	padding: 5px 0 5px 12px;
	font-size: 14px;
	color: var(--ink-soft);
}
nav.main > ul > li:has(.sub-menu .sub-menu) > .sub-menu .sub-menu .sub-menu li > a:hover {
	color: var(--clay-d);
	background: transparent;
}

/* Knop in een kaart: onderaan verankerd, zodat de knoppen van twee kolommen
   op dezelfde lijn staan ook wanneer de teksten verschillend lang zijn. */
.block-card { display: flex; flex-direction: column; }
.block-card .card-body { flex: 1 1 auto; }
.kaart-actie { align-self: flex-start; margin-top: 22px; }

/* Koppeling van een pijler naar het opleidingsaanbod: één regel met één knop,
   bewust smal zodat het de inhoud eromheen niet overstemt. */
.opleiding-link { padding-top: 46px; padding-bottom: 46px; }
.opleiding-link-rij {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 20px 34px; max-width: 980px; margin: 0 auto;
	padding: 26px 30px;
	background: var(--vlak); border: 1px solid var(--line); border-radius: var(--radius-l, 18px);
}
.opleiding-link-rij p {
	margin: 6px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink);
	max-width: 46ch;
}
.opleiding-link-rij .btn-primary { flex: 0 0 auto; }
@media (max-width: 620px) {
	.opleiding-link-rij { flex-direction: column; align-items: flex-start; padding: 22px; }
}

/* ── Opleidingsaanbod: schuifknop tussen de twee luiken ──────────────────
   Zonder JavaScript staan beide luiken onder elkaar; de klasse js-schuif
   zet pas dan het verbergen aan. */
/* De intro staat in dezelfde kolom als de titel, meteen eronder. Als losse
   sectie namen kop en tekst samen bijna een heel scherm in beslag. */
/* De h1 heeft zelf al een ondermarge; die halen we hier weg zodat titel en
   tekst als één blok lezen. */
.page-template-template-trainingen .pillar-hero h1 { margin-bottom: 0; }
.oa-intro { margin-top: 20px; max-width: 640px; }
.pillar-hero-grid.geen-beeld .oa-intro { margin-left: auto; margin-right: auto; }
.oa-intro p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 12px; }
.oa-intro p:last-child { margin-bottom: 0; }

/* De hero van deze pagina hoeft niet zo hoog: er staat geen beeld naast. */
.page-template-template-trainingen .pillar-hero { padding-bottom: 30px; }
.oa-schuif { padding: 24px 0; }
/* De tekst van het gekozen luik sluit aan op de schuifknop erboven. */
.oa-luik-kop { padding-top: 22px; padding-bottom: 30px; }
.oa-luik-kop .block-head { margin-bottom: 14px; }

.oa-schuif { position: sticky; top: calc(var(--header-h) + var(--admin-h)); z-index: 30; }
/* Centreren via de container, niet via een left/transform-truc: die rekent
   met de breedte van het bovenliggende blok en schoof mee met de opvulling. */
.oa-schuif .wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.oa-schuif-tekst {
	/* In een flexkolom krimpt een alinea tot haar inhoud en breekt de zin
	   onnodig af; stretch geeft haar de volle breedte om op te centreren. */
	align-self: stretch;
	margin: 0; text-align: center;
	font-family: var(--serif); font-weight: 500;
	font-size: clamp(20px, 2.3vw, 25px); line-height: 1.25;
	color: var(--petrol-d);
	overflow: hidden;
	transition: max-height 0.28s ease, opacity 0.2s ease, margin 0.28s ease;
	max-height: 3.2em; opacity: 1;
}
.oa-schuif-meetpunt { display: block; height: 1px; margin-bottom: -1px; }

/* Zodra de balk vastplakt blijft alleen de keuze over: de zin heeft zijn werk
   dan al gedaan en zou de pagina onnodig afdekken. */
.oa-schuif.is-vast { padding: 12px 0; box-shadow: 0 10px 24px -20px rgba(16, 44, 52, 0.55); }
.oa-schuif.is-vast .wrap { gap: 0; }
.oa-schuif.is-vast .oa-schuif-tekst { max-height: 0; opacity: 0; margin: 0; }
@media (prefers-reduced-motion: reduce) {
	.oa-schuif-tekst { transition: none; }
}
.oa-schuif-rij {
	display: inline-flex; gap: 4px; padding: 4px;
	background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
}
.oa-knop {
	appearance: none; border: 0; cursor: pointer;
	font-family: inherit; font-size: 15px; font-weight: 500;
	color: var(--ink-soft); background: transparent;
	padding: 11px 26px; border-radius: 999px;
	transition: background 0.22s ease, color 0.22s ease;
}
.oa-knop:hover { color: var(--petrol-d); }
.oa-knop.is-actief { background: var(--petrol-d); color: var(--paper); }
.oa-knop:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* Alleen wanneer het script draait wordt er iets verborgen. */
.js-schuif .oa-luik { display: none; }
.js-schuif .oa-luik.is-actief { display: block; }

/*
 * De oproep onder de luiken kleurt mee met het luik dat openstaat: elk luik
 * eindigt op een andere kleur, dus zonder dit zou de balk soms tegen dezelfde
 * achtergrond aanplakken. data-vervolg staat op het luik zelf (zie
 * template-trainingen.php) en de oproep is er een broer van.
 */
.oa-cta { background: var(--paper); }
.oa-luik.is-actief[data-vervolg="sec-tint"] ~ .oa-cta { background: var(--paper-2); }
.oa-luik.is-actief[data-vervolg="sec-plain"] ~ .oa-cta { background: var(--paper); }

@media (max-width: 560px) {
	.oa-schuif { position: static; }
	.oa-schuif-rij { display: flex; width: 100%; }
	.oa-knop { flex: 1 1 0; padding: 11px 12px; font-size: 14px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.oa-knop { transition: none; }
}

/* =====================================================================
   TEAM
   Overzicht met kaartjes, en de pagina van één collega. Alles wat de
   klant niet invult (foto, functie, gegevens) valt gewoon weg.
   ===================================================================== */
.team-lead { margin-top: 20px; max-width: 640px; }
.pillar-hero-grid.geen-beeld .team-lead { margin-left: auto; margin-right: auto; }
.team-lead p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 12px; }
.team-lead p:last-child { margin-bottom: 0; }

.teamlid-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 28px;
}

.teamlid-kaart {
	display: flex; flex-direction: column;
	background: var(--vlak);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.teamlid-kaart:hover {
	transform: translateY(-3px);
	border-color: var(--petrol);
	box-shadow: 0 26px 44px -28px rgba(31, 64, 64, 0.45);
}
.teamlid-kaart:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* Vaste beeldverhouding: zo blijven alle kaartjes even hoog, ook wanneer
   de ene foto staand en de andere liggend is aangeleverd. */
.teamlid-foto {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4 / 5;
	background-size: cover;
	background-position: center top;
	background-color: var(--sage);
}
.teamlid-initialen {
	font-family: var(--serif);
	font-size: 34px;
	letter-spacing: 0.04em;
	color: var(--petrol-d);
	opacity: 0.55;
}

.teamlid-tekst {
	display: flex; flex-direction: column; gap: 4px;
	padding: 20px 22px 22px;
	flex: 1;
}
.teamlid-naam {
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.2;
	color: var(--petrol-d);
}
.teamlid-kaart .teamlid-functie {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-soft);
	margin: 0;
}
.teamlid-lees {
	margin-top: auto;
	padding-top: 16px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--clay-d);
	display: flex; align-items: center; gap: 8px;
}
.teamlid-lees svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.teamlid-kaart:hover .teamlid-lees svg { transform: translateX(4px); }

.team-lijst { padding-top: 56px; }
.team-terug { margin-top: 40px; display: flex; justify-content: center; }

/* --- Pagina van één collega ---------------------------------------- */
.teamlid-hero { padding: var(--hero-top) 0 100px; }
.teamlid-kop {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 60px;
	align-items: start;
	margin-top: 30px;
}
/* Het portret en de gegevens blijven meelopen zolang er verhaal naast staat. */
.teamlid-zij { position: sticky; top: var(--sticky-top); }
.teamlid-portret {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	background-size: cover;
	background-position: center top;
	background-color: var(--sage);
	box-shadow: 0 30px 60px -30px rgba(31, 64, 64, 0.35);
}
.teamlid-portret .teamlid-initialen { font-size: 64px; }

/* Naam en functie staan boven de twee kolommen: op een smal scherm zou je
   anders eerst langs de hele foto en de gegevens moeten scrollen. */
.teamlid-titel { margin-top: 26px; max-width: 760px; }
.teamlid-titel h1 {
	font-size: clamp(34px, 3.6vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	font-style: italic;
	margin: 0 0 12px;
}
.teamlid-titel .teamlid-functie {
	font-family: var(--serif);
	font-style: italic;
	font-size: 21px;
	color: var(--clay-d);
	margin: 0 0 22px;
}

.teamlid-vakken {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.teamlid-vakken li {
	font-size: 13px;
	color: var(--petrol-d);
	background: var(--sage);
	border-radius: 999px;
	padding: 6px 14px;
}

.teamlid-verhaal { margin-top: -4px; }
.teamlid-verhaal p { font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 16px; }
.teamlid-verhaal p:last-child { margin-bottom: 0; }
.teamlid-verhaal h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; margin: 30px 0 12px; }
.teamlid-verhaal h3 { font-size: 19px; line-height: 1.3; margin: 26px 0 10px; }
.teamlid-verhaal ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.teamlid-verhaal ul li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.teamlid-verhaal ul li::before { content: '—'; position: absolute; left: 0; color: var(--clay); }
.teamlid-verhaal a { color: var(--clay-d); border-bottom: 1px solid currentColor; }

/* Label boven de waarde: de zijkolom is te smal voor twee kolommen, daar
   breekt een e-mailadres middenin het woord af. */
.teamlid-info {
	margin: 24px 0;
	border-top: 1px solid var(--line-soft);
}
.teamlid-info dt {
	margin: 0;
	padding: 14px 0 0;
	color: var(--ink-faint);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.teamlid-info dd {
	margin: 0;
	padding: 2px 0 13px;
	border-bottom: 1px solid var(--line-soft);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-soft);
	overflow-wrap: anywhere;
}
.teamlid-info a { color: var(--petrol-d); text-decoration: underline; text-underline-offset: 3px; }
.teamlid-info a:hover { color: var(--clay-d); }

/* Heeft iemand geen contactgegevens, dan volgt de knop meteen op het portret.
   Zonder deze marge plakt hij tegen de foto. */
.teamlid-acties { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

@media (max-width: 860px) {
	.teamlid-kop { grid-template-columns: 1fr; gap: 32px; }
	.teamlid-zij { position: static; }
	.teamlid-portret { max-width: 300px; }
	.teamlid-info { max-width: 420px; }
}
@media (max-width: 480px) {
	.teamlid-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.teamlid-tekst { padding: 16px 16px 18px; }
	.teamlid-naam { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
	.teamlid-kaart, .teamlid-lees svg { transition: none; }
	.teamlid-kaart:hover { transform: none; }
}

/* =====================================================================
   TEKSTPAGINA (privacyverklaring, cookiebeleid, ...)
   Bewust smal en rustig: dit zijn pagina's om iets op te zoeken, niet om
   door te bladeren.
   ===================================================================== */
/* Eén kolom van 720px, gecentreerd zoals bij een bericht: de kop en de tekst
   staan zo op dezelfde lijn en de pagina valt niet uit de vormtaal. */
/* Onder de titel hoort evenveel lucht als erboven; zonder die ondermarge
   begint de gekleurde band precies op de onderlijn van de kop. */
.tekst-hero { padding: var(--hero-top) 0 var(--hero-top); }
.tekst-hero .wrap > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.tekst-hero h1 {
	font-size: clamp(30px, 3.4vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	font-style: italic;
	margin: 22px auto 0;
}
.tekst-hero .lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin-top: 14px; }
.tekst-body { padding-top: 46px; }
.tekst-body .block-body { max-width: 720px; margin: 0 auto; }
.tekst-body .block-body h2 {
	font-size: clamp(20px, 2.2vw, 25px);
	line-height: 1.25;
	margin: 34px 0 10px;
}
.tekst-body .block-body h2:first-child { margin-top: 0; }
.tekst-body .block-body h3 { font-size: 18px; line-height: 1.3; margin: 26px 0 8px; }
.tekst-body .block-body p { font-size: 16px; line-height: 1.75; }
.tekst-body .block-body a { word-break: break-word; }
/* Twee knoppen naast elkaar onder een korte tekst - bedanktpagina's en 404. */
.block-body .knoprij { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* =====================================================================
   OPLEIDINGSPAGINA
   De tekst uit de editor wordt hier over drie blokken verdeeld: het
   verhaal (dat inklapt), de trainers en de praktische gegevens.
   ===================================================================== */
.hero-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
/* In de kop van een blogbericht staat de knoppenrij onder de datumregel. */
.pillar-hero .hero-knoppen { margin-top: 26px; }
/* En de rij onder het artikel zelf krijgt een lijn, zodat ze niet als
   onderdeel van de laatste alinea leest. */
.block-body > .mid-actions { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); justify-content: flex-start; }

/* ─── Inklapbaar verhaal ───
   <details> in plaats van eigen JavaScript: werkt ook zonder script, is
   toetsenbordvriendelijk, en de browser regelt zelf wat open of dicht is. */
details.lees-meer { margin-top: 30px; }
details.lees-meer > summary {
	display: inline-flex; align-items: center; gap: 9px;
	cursor: pointer;
	list-style: none;
	padding: 11px 24px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--petrol-d);
	background: var(--vlak);
	transition: background 0.18s ease, border-color 0.18s ease;
}
details.lees-meer > summary::-webkit-details-marker { display: none; }
details.lees-meer > summary::after {
	content: '';
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s ease;
}
details.lees-meer[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
details.lees-meer > summary:hover { background: var(--sage-pale); border-color: var(--sage); }
details.lees-meer > summary:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
details.lees-meer .minder,
details.lees-meer[open] .meer { display: none; }
details.lees-meer[open] .minder { display: inline; }
.lees-meer-body { padding-top: 8px; }
/* Zonder de rand erboven lijkt de uitgeklapte tekst bij de knop te horen
   in plaats van bij het verhaal. */
.lees-meer-body > *:first-child { margin-top: 22px; }

/* ─── Trainers ─── */
.trainers .block-head { margin-bottom: 40px; }
.trainer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 26px;
}
.trainer-kaart {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: 22px;
	/* Ook hier: het portret loopt tot onderaan de tekst ernaast. */
	align-items: stretch;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 22px;
}
.trainer-foto {
	display: flex; align-items: center; justify-content: center;
	height: 100%;
	min-height: 165px;
	border-radius: 3px;
	background-size: cover;
	background-position: center top;
	background-color: var(--sage);
}
.trainer-foto .teamlid-initialen { font-size: 30px; }
.trainer-naam { font-family: var(--serif); font-size: 21px; line-height: 1.2; margin: 0 0 4px; color: var(--petrol-d); }
.trainer-functie { font-size: 14px; color: var(--clay-d); margin: 0 0 12px; }
.trainer-bio { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; }
.trainer-link { font-size: 13.5px; font-weight: 500; color: var(--petrol-d); display: inline-flex; align-items: center; gap: 7px; }
.trainer-link svg { width: 14px; height: 14px; transition: transform 0.22s ease; }
.trainer-link:hover svg { transform: translateX(4px); }
.trainer-tussenkop {
	margin: 44px 0 22px;
	font-family: var(--sans);
	font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--clay-d);
}

/* ─── Praktisch ─── */
.prakt-blok .block-head { margin-bottom: 36px; }
.prakt-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
	align-items: start;
}
.prakt-kaart {
	background: var(--vlak);
	border-left: 3px solid var(--clay);
	border-radius: 3px;
	padding: 22px 24px 24px;
}
.prakt-kaart h3 {
	font-family: var(--sans);
	font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--clay-d);
	margin: 0 0 12px;
}
.prakt-inhoud p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 10px; }
.prakt-inhoud p:last-child { margin-bottom: 0; }
.prakt-inhoud ul { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 7px; }
.prakt-inhoud li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.prakt-inhoud li::before { content: '—'; position: absolute; left: 0; color: var(--clay); }
.prakt-inhoud a { color: var(--clay-d); border-bottom: 1px solid currentColor; word-break: break-word; }

/* ─── Inschrijven ─── */
.inschrijf .block-head { margin-bottom: 34px; text-align: center; }
.inschrijf-formulier {
	max-width: 720px; margin: 0 auto;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 36px 40px;
	box-shadow: 0 30px 60px -30px rgba(46, 90, 90, 0.15);
}
.inschrijf-extern { max-width: 560px; margin: 0 auto; text-align: center; }
.inschrijf-extern p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 22px; }
/* Wie nu niet inschrijft, kan zich wel op de nieuwsbrief zetten. Staat als
   laatste blok bij het inschrijven, rustiger dan de knop ernaast. */
.inschrijf-nieuws {
	margin-top: 26px;
	padding: 24px 26px;
	background: var(--vlak-in);
	border: 1px solid var(--line);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
}
.inschrijf-nieuws-tekst { flex: 1 1 320px; min-width: 0; }
.inschrijf-nieuws h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--petrol-d); margin: 0 0 6px; }
.inschrijf-nieuws p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.inschrijf-nieuws .btn-secondary { flex-shrink: 0; }

@media (max-width: 620px) {
	.inschrijf-nieuws { flex-direction: column; align-items: flex-start; padding: 20px; }
	.inschrijf-nieuws .btn-secondary { width: 100%; justify-content: center; }
}

.inschrijf-voorwaarden {
	max-width: 720px; margin: 26px auto 0;
	font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}
.inschrijf-voorwaarden h3 {
	font-family: var(--sans);
	font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 8px;
}
.inschrijf-voorwaarden p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.inschrijf-voorwaarden .klein { color: var(--ink-faint); }
.inschrijf-voorwaarden a { color: var(--clay-d); border-bottom: 1px solid currentColor; }

/* ─── Zwevende inschrijfknop ───
   Verdwijnt zodra het formulier zelf in beeld komt; twee keer dezelfde knop
   naast elkaar is enkel verwarrend. */
.zweef-knop {
	position: fixed;
	right: 26px; bottom: 26px;
	z-index: 45;
	display: inline-flex; align-items: center; gap: 9px;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--clay);
	color: var(--paper);
	font-size: 15px; font-weight: 500;
	box-shadow: 0 18px 40px -14px rgba(31, 64, 64, 0.55);
	transition: background 0.2s ease, opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.zweef-knop:hover { background: var(--clay-d); color: var(--paper); }
.zweef-knop:focus-visible { outline: 2px solid var(--petrol-d); outline-offset: 3px; }
.zweef-knop.is-weg { opacity: 0; visibility: hidden; transform: translateY(12px); }
.zweef-knop svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
	.trainer-kaart { grid-template-columns: 104px 1fr; gap: 18px; padding: 18px; }
}
@media (max-width: 700px) {
	/* Onderaan staat de vaste balk al; een zwevende knop daarboven is dubbel. */
	.zweef-knop { display: none; }
	.inschrijf-formulier { padding: 24px 20px; }
	.trainer-kaart { grid-template-columns: 1fr; }
	/* Onder elkaar is er geen tekstkolom meer om op uit te lijnen. */
	.trainer-foto { max-width: 190px; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
}
.mobile-cta a.alleen { flex: 1; }

@media (prefers-reduced-motion: reduce) {
	.zweef-knop, details.lees-meer > summary::after, .trainer-link svg { transition: none; }
}
.teamlid-trainer { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.teamlid-trainer h2 { margin-top: 0; }

/* Een formulier midden in een tekstpagina - de nieuwsbrief - hoeft niet zo
   breed te zijn als de tekstkolom eromheen: drie velden en een knop over de
   volle 720px oogt log. */
.tekst-body .gform_wrapper { max-width: 520px; }

/* ─── Gravity Forms 3.0 ───
   De verzendknop is sinds versie 3 een <button> in plaats van een <input>,
   waardoor de opmaak hieronder er niet meer op paste. */
.gform_wrapper.gravity-theme.gravity-theme .gform_footer button[type="submit"],
.gform_wrapper.gravity-theme.gravity-theme .gform-footer button[type="submit"] {
	width: 100%;
	min-height: 56px;
	padding: 18px 32px;
	background: var(--clay);
	color: var(--paper);
	border: 0;
	border-radius: 4px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.18s, transform 0.18s;
}
.gform_wrapper.gravity-theme.gravity-theme .gform_footer button[type="submit"]:hover,
.gform_wrapper.gravity-theme.gravity-theme .gform-footer button[type="submit"]:hover {
	background: var(--clay-d); transform: translateY(-1px);
}
.gform_wrapper.gravity-theme.gravity-theme .gform-footer { padding: 10px 0 0; margin: 0; }

/* "(Vereist)" achter elk label maakt een formulier onrustig; één sterretje
   zegt hetzelfde. */
.gform_wrapper.gravity-theme.gravity-theme .gfield_required_text { font-size: 0; }
.gform_wrapper.gravity-theme.gravity-theme .gfield_required_text::after {
	content: '*';
	font-size: 15px;
	color: var(--clay);
}

/* Tussenkop binnen een formulier (bijvoorbeeld de facturatiegegevens). */
.gform_wrapper.gravity-theme.gravity-theme .gsection {
	border-bottom: 1px solid var(--line);
	margin: 12px 0 2px;
	padding-bottom: 10px;
}
.gform_wrapper.gravity-theme.gravity-theme .gsection_title {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--clay-d);
	margin: 0;
}
.gform_wrapper.gravity-theme.gravity-theme .gsection_description {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-faint);
	margin: 8px 0 0;
	padding: 0;
}

/* Gelijke hoogtes in het praktische kader: een rij met een korte en een lange
   kaart naast elkaar oogde als een fout. */
.prakt-raster { align-items: stretch; }
.prakt-kaart { height: 100%; }

/* ─── Bedrijvenpagina: visie, professionals en afsluiter ─── */

/* Tekst naast beeld. Zonder afbeelding valt de kolom weg en loopt de tekst
   over de gewone leesbreedte, zodat het blok nooit halfleeg oogt. */
.s4p-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: stretch;
}
.s4p-split.beeld-links .s4p-split-beeld { order: -1; }
.s4p-split.geen-beeld { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.s4p-split-beeld {
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	background-color: var(--sage);
	box-shadow: 0 30px 60px -30px rgba(31, 64, 64, 0.35);
}
@media (max-width: 860px) {
	.s4p-split { grid-template-columns: 1fr; gap: 32px; }
	/* Op een smal scherm staat het beeld altijd onder de tekst: eerst waarover
	   het gaat, dan de sfeer. */
	.s4p-split.beeld-links .s4p-split-beeld { order: 0; }
}

.s4p-split-tekst,
.s4p-prof-inner,
.s4p-slot-inner { max-width: 760px; }
.s4p-slot-inner { margin: 0 auto; }
.s4p-split-tekst h2,
.s4p-prof-inner h2,
.s4p-slot-inner h2 {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.08;
	margin: 0 0 24px;
}
.s4p-split-tekst p,
.s4p-prof-inner p,
.s4p-slot-inner p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink-soft);
	margin: 0 0 18px;
}
/* Een losse regel als "Dat vormt het vertrekpunt van PTC Gent." draagt het
   verhaal; die mag zwaarder wegen dan de alinea's eromheen. */
.s4p-split-tekst p strong { color: var(--petrol-d); }

/* Het tweede niveau krijgt een eigen kader, zodat de lange tekst niet als
   één blok leest. */
/* Even breed als de twee kolommen erboven. */
.s4p-visie-sub {
	margin: 48px 0 0;
	padding: 30px 34px;
	background: var(--vlak);
	border-left: 3px solid var(--clay);
	border-radius: 3px;
}
@media (max-width: 860px) {
	.s4p-visie-sub { padding: 22px 20px; }
}
.s4p-visie-sub p {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--ink-soft);
	margin: 0 0 16px;
}
.s4p-visie-sub h3 {
	font-family: var(--serif);
	font-size: clamp(21px, 2.4vw, 26px);
	line-height: 1.2;
	color: var(--petrol-d);
	margin: 0 0 16px;
}
.s4p-visie-sub p:last-child { margin-bottom: 0; }

.s4p-split-tekst .btn-secondary { margin-top: 6px; }
/* De gedeelde kernzin-opmaak zet de marges met !important; om er hier onder
   lucht te houden moet dat dus ook. */
.s4p-slot-inner .s4p-kernzin { margin-bottom: 34px !important; }

@media (max-width: 700px) {
	.s4p-visie-sub { padding: 22px 20px; }
}

/* ─── Teampagina: de foto op ware grootte ─── */
.team-visual-knop {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	cursor: zoom-in;
	overflow: hidden;
}
.team-visual-hint {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba(7, 64, 103, 0.82);
	color: var(--paper);
	font-size: 13px;
	line-height: 1;
	backdrop-filter: blur(4px);
	transition: background .2s ease, transform .2s ease;
}
.team-visual-hint::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 1.6px solid currentColor;
	border-radius: 50%;
	box-shadow: 5px 5px 0 -4px currentColor;
	flex: none;
}
.team-visual-knop:hover .team-visual-hint,
.team-visual-knop:focus-visible .team-visual-hint {
	background: var(--petrol-d);
	transform: translateY(-2px);
}
@media (max-width: 620px) {
	.team-visual-hint { left: 10px; bottom: 10px; padding: 7px 11px; font-size: 12px; }
}

/* De laag waarin een foto volledig getoond wordt (zie site.js). */
body.vergroot-open { overflow: hidden; }
.vergroot-laag {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 5vw, 56px);
	background: rgba(12, 32, 45, 0.88);
	animation: vergroot-in .18s ease-out;
}
.vergroot-laag[hidden] { display: none; }
@keyframes vergroot-in { from { opacity: 0; } to { opacity: 1; } }
.vergroot-laag figure { margin: 0; max-width: 100%; max-height: 100%; }
.vergroot-laag img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 140px);
	width: auto;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.vergroot-laag figcaption {
	margin-top: 14px;
	text-align: center;
	color: rgba(244, 237, 225, 0.8);
	font-size: 14px;
}
.vergroot-sluit {
	position: absolute;
	top: clamp(12px, 3vw, 26px);
	right: clamp(12px, 3vw, 26px);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: var(--paper);
	cursor: pointer;
	transition: background .2s ease;
}
.vergroot-sluit:hover { background: rgba(255, 255, 255, 0.26); }
.vergroot-sluit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ─── Teampagina: blok per groep ─── */
/* De kop en de intro lopen over de volle breedte van de sectie: een smalle
   tekstkolom maakt het blok onnodig hoog zonder dat het beter leest. */
.team-groep-kop { margin: 0 0 40px; }
.team-groep-kop h2 {
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	margin: 0 0 18px;
}
.team-groep-intro p {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--ink-soft);
	margin: 0 0 14px;
}
.team-groep-intro p:last-child { margin-bottom: 0; }
/* Het tweede en volgende blok krijgen wat meer lucht boven zich dan de
   standaard sectieafstand, anders lopen de rasters visueel in elkaar. */
.team-lijst + .team-lijst { padding-top: 80px; }

/* =====================================================================
   OVERZICHTSPAGINA (Volwassenen, Jongeren & gezinnen)
   Kort en visueel: waar kan je terecht. De kaarten zijn geen link zelf,
   want er staan links in; de titel, het beeld en "Lees meer" wijzen
   allemaal naar dezelfde pagina.
   ===================================================================== */
.ov-keuzes { padding: 90px 0 110px; }
.ov-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
	align-items: stretch;
}
.ov-grid.kols-1 { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
.ov-grid.kols-2 { grid-template-columns: repeat(2, 1fr); max-width: 920px; margin: 0 auto; }
/* Vier keuzes in twee rijen van twee: vier naast elkaar wordt te smal voor een
   kaart met beeld, titel, zin én de onderliggende pagina's. */
.ov-grid.kols-4 { grid-template-columns: repeat(2, 1fr); max-width: 1040px; margin: 0 auto; }
@media (max-width: 980px) {
	.ov-grid.kols-4 { max-width: 720px; }
}
@media (max-width: 860px) {
	.ov-grid,
	.ov-grid.kols-2,
	.ov-grid.kols-4 { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

.ov-kaart {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ov-kaart:hover {
	transform: translateY(-3px);
	border-color: var(--sage);
	box-shadow: 0 26px 48px -28px rgba(31, 64, 64, 0.4);
}

.ov-beeld {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-color: var(--sage);
}
/* Het icoon zit in een wit schijfje dat half over de rand van het beeld valt,
   zodat de kaart een herkenbaar ankerpunt krijgt. */
.ov-icoon {
	position: absolute;
	left: 24px; bottom: -22px;
	width: 44px; height: 44px;
	padding: 9px;
	background: var(--paper);
	border-radius: 50%;
	box-shadow: 0 8px 20px -10px rgba(31, 64, 64, 0.5);
	object-fit: contain;
}

.ov-tekst { display: flex; flex-direction: column; flex: 1; padding: 38px 26px 26px; }
.ov-tekst h2 { font-size: 24px; line-height: 1.15; margin: 0 0 10px; }
.ov-tekst h2 a { color: var(--petrol-d); }
.ov-tekst h2 a:hover { color: var(--clay-d); }
.ov-tekst > p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; }

.ov-sub { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.ov-sub li { position: relative; padding-left: 18px; }
.ov-sub li::before { content: '—'; position: absolute; left: 0; color: var(--clay); }
.ov-sub a { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.ov-sub a:hover { color: var(--petrol-d); }

.ov-meer {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--line-soft);
	font-size: 14px; font-weight: 500;
	color: var(--clay-d);
	display: flex; align-items: center; gap: 8px;
}
.ov-meer svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.ov-kaart:hover .ov-meer svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.ov-kaart, .ov-meer svg { transition: none; }
	.ov-kaart:hover { transform: none; }
}
/* Kaart zonder foto: het icoon staat dan boven de titel in de tekst. */
.ov-kaart.geen-beeld .ov-tekst { padding-top: 28px; }
.ov-icoon-los {
	width: 44px; height: 44px;
	padding: 9px;
	margin: 0 0 14px;
	background: var(--sage-pale);
	border-radius: 50%;
	object-fit: contain;
}

/* ─── Ons verhaal: doorsteek naar het team ─── */
.verhaal-team-inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 48px;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
}
.verhaal-team-rij { display: flex; }
/* De portretten overlappen elkaar licht: samen lezen ze als één groep. */
.verhaal-team-portret {
	width: 74px; height: 74px;
	border-radius: 50%;
	background-size: cover;
	background-position: center top;
	background-color: var(--sage);
	border: 3px solid var(--paper-2);
	margin-left: -18px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.verhaal-team-portret:first-child { margin-left: 0; }
.verhaal-team-portret .teamlid-initialen { font-size: 20px; }
.verhaal-team-tekst h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; margin: 0 0 12px; }
.verhaal-team-tekst p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 22px; max-width: 520px; }

@media (max-width: 860px) {
	.verhaal-team-inner { grid-template-columns: 1fr; gap: 26px; }
	.verhaal-team-portret { width: 60px; height: 60px; }
}

/* ─── Voor wie: brede kaart voor het opleidingscentrum ─── */
.vw-breed {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	margin-top: 22px;
	background: var(--vlak);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.vw-breed:hover { transform: translateY(-3px); border-color: var(--sage); box-shadow: 0 24px 60px -30px rgba(46, 90, 90, 0.25); }
.vw-breed-beeld {
	min-height: 260px;
	background-size: cover;
	background-position: center;
	background-color: var(--sage);
}
.vw-breed-tekst {
	display: flex; flex-direction: column; gap: 14px;
	padding: 38px 40px 40px;
	justify-content: center;
}
.vw-breed-icoon { width: 44px; height: 44px; object-fit: contain; }
.vw-breed-tekst h3 { font-size: 28px; line-height: 1.1; color: var(--petrol-d); margin: 0; }
.vw-breed-tekst p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 560px; }

@media (max-width: 900px) {
	.vw-breed { grid-template-columns: 1fr; }
	.vw-breed-beeld { min-height: 0; aspect-ratio: 5/3; }
	.vw-breed-tekst { padding: 28px 26px 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.vw-breed { transition: none; }
	.vw-breed:hover { transform: none; }
}

/* =====================================================================
   BEELD NAAST TEKST — één regel voor de hele site
   Een foto die naast een tekstkolom staat, is even hoog als die kolom.
   Punt. Een eigen beeldverhouding gaf op elke pagina een andere
   uitlijning, afhankelijk van hoe lang de tekst toevallig was.

   De ondergrens is er enkel voor het geval er nauwelijks tekst staat,
   zodat het beeld dan niet tot een streepje krimpt. Zodra de kolommen
   onder elkaar vallen, krijgt het beeld weer een gewone verhouding —
   daar is er immers geen tekstkolom meer om op uit te lijnen.

   Staat hier een nieuw blok bij? Voeg de twee selectors hieronder toe
   en er hoeft verder niets geregeld te worden.
   ===================================================================== */
.pillar-hero-grid,
.s4p-hero-grid,
.s4p-split,
.watis-split,
.team-intro .grid,
.verhaal-team-inner { align-items: stretch; }

.pillar-hero-visual,
.s4p-hero-visual,
.s4p-split-beeld,
.watis-img,
.team-visual,
.vw-breed-beeld {
	align-self: stretch;
	height: 100%;
	min-height: 320px;
	aspect-ratio: auto;
	background-size: cover;
	background-position: center;
}

@media (max-width: 940px) {
	.pillar-hero-visual,
	.s4p-hero-visual,
	.s4p-split-beeld,
	.watis-img,
	.team-visual,
	.vw-breed-beeld {
		height: auto;
		min-height: 0;
		aspect-ratio: 3 / 2;
	}
}