/*
Theme Name: Directory Starter
Description: Neutral, SEO-first starter theme for the thuisbatterijinstallateur.nl directory. Structural only; set branding via the CSS variables below. Pairs with the Directory Core mu-plugin (installateur CPT).
Version: 0.3.0
*/

/* tokens.css is enqueued separately (filemtime cache-bust) in functions.php */

/* ---------------------------------------------------------------
   Compat aliases — old component CSS below still uses these names.
   Drop the aliases (and the rules that use them) once every template
   has been migrated to the token names directly.
   --------------------------------------------------------------- */
:root {
	--brand: var(--blue-700);
	--brand-dark: var(--blue-900);
	--text: var(--ink);
	--muted: var(--ink-3);
	--bg-soft: var(--surface-2);
	--border: var(--line);
	--font: var(--font-body);
}

html, body { overflow-x: clip; }
body { line-height: 1.55; }
img { max-width: 100%; height: auto; }

/* ============================================================
   CHROME — container, header, breadcrumb bar, buttons, footer
   ============================================================ */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- Header ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
.site-header .wrap {
	height: 68px;
	display: flex;
	align-items: center;
	gap: 28px;
	padding-top: 0;
	padding-bottom: 0;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}
.site-logo:hover { text-decoration: none; }
.site-logo__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.site-logo__svg { display: block; }
.site-logo__word {
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: -.01em;
	line-height: 1.05;
	white-space: nowrap;
}
.site-logo__word .lg-a { font-weight: 600; color: var(--ink); }
.site-logo__word .lg-b { font-weight: 800; color: var(--blue-700); margin-left: 1px; }

.site-nav,
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
	list-style: none;
	padding: 0;
}
.site-nav__list { margin-left: 0; }
.site-nav a {
	position: relative;
	padding: 8px 10px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
	display: inline-block;
	white-space: nowrap;
}
.site-nav__list { flex-wrap: nowrap; }
.site-nav a:hover { text-decoration: none; color: var(--ink); }
.site-nav a[aria-current="page"],
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	color: var(--accent);
}

/* Nav-dropdowns (steden-first): Steden ▾ / Provincies ▾ */
.nav-item-dd { position: relative; }
.nav-dd-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink-2); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.nav-dd-toggle:hover { color: var(--ink); }
.nav-dd-chev { transition: transform .18s ease; }
.site-nav .nav-dd { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px; margin: 0; padding: 7px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(16,27,51,.14); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; }
.site-nav .nav-item-dd:hover .nav-dd, .site-nav .nav-item-dd:focus-within .nav-dd, .site-nav .nav-item-dd.is-open .nav-dd { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav .nav-item-dd:hover .nav-dd-chev, .site-nav .nav-item-dd.is-open .nav-dd-chev { transform: rotate(180deg); }
.site-nav .nav-dd a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.site-nav .nav-dd a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.site-nav .nav-dd__all { margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--line); }
.site-nav .nav-dd__all a { color: var(--accent); font-weight: 600; }

.site-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.theme-toggle {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	background: var(--surface-2);
	border-radius: var(--radius);
	color: var(--ink-2);
	cursor: pointer;
	font-size: 15px;
	font-family: inherit;
}
.theme-toggle:hover { border-color: var(--line-strong); }

@media (max-width: 1024px) {
	.site-nav { display: none !important; }
	.site-header__actions { display: none !important; }
	.nav-toggle { display: inline-flex; margin-left: auto; }
}

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 17px;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	border: none;
}
.btn:hover { text-decoration: none; }
.btn-primary {
	background: var(--cta);
	color: #fff;
	border: 1px solid transparent;
}
.btn-primary:hover { background: var(--cta-hover); color: #fff; }
.btn-secondary {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line-strong);
	padding: 9px 15px;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Breadcrumb bar ---- */
.breadcrumbs {
	display: block;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	font-size: 13px;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
	/* Full-bleed: achtergrondbalk over de hele breedte, tekst uitgelijnd op de
	   content-kolom (main.wrap). html krijgt overflow-x:clip zodat 100vw geen
	   horizontale scrollbar geeft. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 11px calc(50vw - 50%);
}
.breadcrumbs a { color: var(--ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: none; }
.breadcrumbs .sep { margin: 0 6px; color: var(--line-strong); }
.breadcrumbs [aria-current] { color: var(--ink-2); font-weight: 600; }

/* ---- Footer ---- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 48px; }
.site-footer .footer-cols {
	display: grid;
	grid-template-columns: 1.8fr 1.6fr 1fr 1fr;
	gap: 40px;
	padding: 48px 24px 30px;
	align-items: start;
}
/* Provincies: compacte 2-koloms lijst zodat de kolom niet loodrecht uit de pas loopt. */
.footer-list--dense { display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px 22px; }
@media (max-width: 900px) {
	.site-footer .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.site-footer .footer-cols { grid-template-columns: 1fr; }
}
.footer-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.footer-brand .site-logo__word { font-size: 15px; }
.footer-col p { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 34ch; }
.footer-col h3 {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0 0 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col li { margin: 0; }
.footer-col a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.footer-col a:hover { color: var(--accent); text-decoration: none; }
.footer-col--brand { max-width: 40ch; }
.footer-parent { margin-top: 14px !important; font-size: 13px; color: var(--ink-3); }
.footer-parent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.footer-parent a:hover { color: var(--accent); }
/* "Alle installateurs / Zoek op merk" onder de provincie-lijst, met scheidingsregel. */
.footer-list--rule { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.footer-entity { line-height: 1.6; }
.footer-entity__sep { color: var(--line); margin: 0 2px; }

.footer-bottom { border-top: 1px solid var(--line); }
.footer-bottom .wrap {
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
.footer-bottom nav { display: flex; gap: 16px; }
.footer-bottom a { color: var(--ink-3); text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); text-decoration: none; }

/* ============================================================
   HUB — installateur registry (list-rows), filterbar, sort/chips,
   accu-meter, quote CTA. README §Installateur-item / §Accu-meter /
   §Filterbalk / §Sorteer + chips / §CTA-blok. Phase 2.
   ============================================================ */

/* Hub-hero: alle directory-hubs (archief + provincie/plaats/merk) delen dezelfde
   immersief-blauwe kop als de contentpagina's. Full-bleed achtergrond, tekst
   uitgelijnd op de content-kolom (zelfde truc als .breadcrumbs). */
.page-head {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(1000px 480px at 85% -10%, rgba(46,125,87,.26), transparent 60%),
		radial-gradient(850px 560px at 6% 115%, rgba(30,98,199,.5), transparent 55%),
		linear-gradient(158deg, var(--blue-900) 0%, var(--blue-800) 48%, var(--blue-700) 100%);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 26px calc(50vw - 50%) 28px;
	margin-bottom: 20px;
}

/* Koptekst van een lijstpagina (hub, plaats, provincie, merk) in twee kolommen.
   De keuzevraag stond onder de tekst en kostte daar 168px, waardoor de nummer 1
   van de lijst op een laptop onder de fold viel. Naast de tekst is die hoogte
   gratis: het hero-blok is nu zo hoog als de langste van de twee kolommen.
   Onder 1100px stapelt het weer, want dan blijft er geen 380px voor de kaarten
   over zonder de kop te knijpen. */
@media (min-width: 1100px) {
	.page-head--lijst { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 40px; align-items: center; }
	.page-head--lijst .keuzevraag { margin-top: 0; }
	/* Eén kolom kaarten in plaats van twee: in 380px naast elkaar zouden de
	   labels op vier regels breken. */
	.page-head--lijst .keuzevraag__opties { grid-template-columns: minmax(0, 1fr); max-width: none; gap: 12px; }
	.page-head--lijst .keuzevraag__note { margin-top: 10px; }
}
.page-head__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #ffd9be; margin-bottom: 10px; }
.page-head h1 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 1.45rem + 1.7vw, 2.6rem); letter-spacing: -.02em; line-height: 1.08; color: #fff; }
.page-head p { margin: 0; color: #d5e1f7; font-size: 16px; line-height: 1.6; }
.page-head p strong { color: #fff; }

/* Versheidslabel onder de intro — los element, geen zin in de alinea. Zie
   dirstarter_versheid_badge(). Bewust een pill en geen platte regel: hij moet als
   los signaal leesbaar zijn naast de intro, niet als staartje eraan. */
.xvers {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 14px 0 0; padding: 6px 12px 6px 10px;
	border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
	background: rgba(255,255,255,.08);
	color: #d5e1f7; font-size: 13.5px; line-height: 1.3;
}
.xvers strong { color: #fff; font-weight: 600; }
.xvers__ic { width: 15px; height: 15px; flex: 0 0 15px; color: #9fc3ff; }
@media (max-width: 620px) {
	.xvers { margin-top: 12px; padding: 5px 10px 5px 9px; font-size: 12.5px; }
}

/* ---- Koptekst van een lijstpagina op een telefoon ----
   Gemeten op 375px: de naam van de nummer 1 stond op y=1127, ver onder de fold
   (zichtbaar tot ±660 in Safari). De hero bestaat uit zes gestapelde blokken die
   elk 50 tot 130px kosten, dus één ingreep haalt het niet. Deze set haalt er 388
   weg zonder inhoud te schrappen — alleen de statistiekbalk verhuist en de intro
   wordt ingekort tot twee regels (de volledige tekst blijft in de HTML staan).

   Bewust NIET gedaan: de sorteerknoppen achter de filterknop stoppen. Dat scheelt
   nog 78px, maar sorteren op "meeste reviews" is precies het gedrag dat je wil
   uitlokken en dan kost het een extra tik. */
@media (max-width: 620px) {
	.page-head--lijst .page-head__eyebrow { display: none; }
	.page-head--lijst h1 { font-size: 26px; line-height: 1.12; }
	/* Alleen de intro-alinea in de tekstkolom. `.page-head p` zou ook de regel
	   "Gratis en vrijblijvend..." onder de keuzevraag klemmen, want dat is ook een
	   <p> in de hero. */
	.page-head--lijst .page-head__tekst > p {
		display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
		-webkit-box-orient: vertical; overflow: hidden; font-size: 15px;
	}
	.page-head--lijst .page-head__tekst .xstats { display: none; }
	.page-head--lijst .keuzevraag__sub { display: none; }
	.page-head--lijst .keuzevraag__vraag { font-size: 15.5px; margin-bottom: 9px; }
	.page-head--lijst .keuzevraag__opties { gap: 9px; }
	.page-head--lijst .keuzevraag__optie { padding: 13px 14px; }
	.page-head--lijst .keuzevraag__label { font-size: 15px; line-height: 1.25; }
	.page-head--lijst .keuzevraag__note { margin-top: 9px; font-size: 12.5px; }
	.breadcrumbs { padding-top: 9px; padding-bottom: 9px; font-size: 12.5px; }
}
/* De verhuisde statistiekbalk: eigen blauwe band onder de lijst, want de cijfers
   zijn wit en de pagina is daar licht. Boven 620px is de kopie in de hero de
   zichtbare en staat deze uit. */
.xstats-mobiel { display: none; }
@media (max-width: 620px) {
	.xstats-mobiel {
		display: block;
		margin: 26px calc(50% - 50vw) 0;
		padding: 22px calc(50vw - 50%) 24px;
		background: linear-gradient(158deg, var(--blue-900) 0%, var(--blue-800) 60%, var(--blue-700) 100%);
	}
	.xstats-mobiel .xstats { padding: 0; margin: 0; max-width: none; }
}
.lfacts__zuster { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---- Filter bar ---- */
/* ── Twee kolommen: filters in een zijbalk, de lijst ernaast ────────────────────────────
   Reden voor de zijbalk: als de filterbalk over de volle breedte boven de lijst staat, kost
   die ~250px hoogte en duwt hij de nummer 1 onder de fold. In een zijbalk staat de lijst
   direct onder de hero.
   Onder 1000px klapt hij terug naar één kolom met de filters bovenaan; op een telefoon is een
   zijbalk van 280px geen zijbalk meer. */
.dir-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 20px; }
.dir-layout__side { position: sticky; top: 16px; padding-right: 28px; border-right: 1px solid var(--line); }
.dir-layout__main { min-width: 0; }
/* De lijstrij is ontworpen voor de volle paginabreedte. In de twee-koloms layout is de rij
   ~772px, en daarvan namen de score- en knoppenkolom samen met de gaps 376px — bijna de helft.
   Gevolg: de beschrijving werd na twee regels afgekapt, de badges liepen over meerdere regels en
   de rij werd 330px hoog. Binnen de layout dus een compacter rechterdeel, zodat de tekst ruimte
   krijgt. */
/* ALLES hieronder alleen boven de 1000px, want daaronder is de layout één kolom en geldt
   de oorspronkelijke, gestapelde rij-opmaak. Zonder deze media query bleven mijn
   drie-koloms-overrides ook op mobiel staan: de tekstkolom kneep dan dicht tot één letter
   per regel en de knoppen liepen buiten het scherm. */
@media (min-width: 1001px) {
	.dir-layout__main .registry-row { grid-template-columns: minmax(0, 1fr) 100px 172px; gap: 18px; }
	/* De uitgelichte rij heeft extra zijpadding voor de accentrand. In de smallere kolom kostte dat
	   64px tekstbreedte (372 tegen 436), waardoor de naamregel én de verificatie-badges over twee
	   regels liepen en de rij 473px hoog werd tegen 293px voor de rest. */
	.dir-layout__main .registry-row--pro { padding-left: 12px; padding-right: 12px; }
	/* En de logotegel iets kleiner: bij 76px bleef er te weinig over voor de naamregel en de
	   verificatie-badges, die dan alsnog over twee regels liepen. */
	.dir-layout__main .registry-row--pro .logo-tile { width: 60px; height: 60px; }

	/* Drie dingen die de rij in de smallere kolom onrustig maakten.

	   1. De rij stond op align-items:center, dus de score (66px) en de knoppen (93px) zweefden
	      midden in een tekstblok van 340px. Boven uitlijnen zet ze naast de naam, waar ze horen.
	   2. De verificatie-badges kwamen 11px tekort voor één regel (126+164+109 plus twee gaps van
	      8px = 415 in 404px), waardoor "Gratis offerte" als wees op een derde regel eindigde. Iets
	      krappere pillen en een kleinere gap lossen dat op.
	   3. De Uitgelicht-vlag pakte een eigen volle regel met marge eronder. */
	/* De tekstkolom bovenaan, maar de score en de knoppen verticaal gecentreerd: die twee zijn
	   compact en horen optisch in het midden van de rij te staan, niet tegen de bovenrand. */
	.dir-layout__main .registry-row { align-items: start; }
	.dir-layout__main .registry-row__scorecol,
	.dir-layout__main .registry-row__ctas { align-self: center; }
	.dir-layout__main .registry-row .verify-tags { gap: 6px; }
	.dir-layout__main .registry-row .verify-tags > * { padding-left: 9px; padding-right: 9px; }
	.dir-layout__main .registry-row--pro .pro-flag { margin-bottom: 4px; }

	.dir-layout__main .registry-row__scorecol .rtbi { width: 96px; }
	.dir-layout__main .registry-row__ctas .btn { padding-left: 12px; padding-right: 12px; }

	/* De lijst en de toolbar zijn full-bleed gebouwd voor de oude layout van één kolom: met
	   `margin: … calc(50% - 50vw)` en een even grote padding liepen ze van rand tot rand. Binnen
	   de twee-koloms layout liep de witte lijstband daardoor ONDER de zijbalk door over de hele
	   viewport — dat was wat er niet uitlijnde. In de kolom halen we het full-bleed er weer af. */
	.dir-layout__main .registry,
	.dir-layout__main .toolbar,
	.dir-layout__main .filterbar {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 22px;
		padding-right: 22px;
		border-radius: var(--radius-lg);
	}
	.dir-layout__main .toolbar { padding-top: 12px; padding-bottom: 12px; }
}

/* Tussenbreedtes (laptops rond 1024): een zijbalk van 288px laat te weinig over voor de
   lijst — de bedrijfsnaam brak dan over twee regels en de beschrijving werd hard afgekapt.
   Smaller maken in plaats van de kolommen laten knellen. */
/* Ondergrens van 1001px erbij: onder de 1000px is de layout één kolom en moet de rij zijn
   oorspronkelijke gestapelde opmaak houden. Zonder die ondergrens golden deze drie-koloms-
   waarden ook op een telefoon. */
@media (min-width: 1001px) and (max-width: 1240px) {
	.dir-layout { grid-template-columns: 212px minmax(0, 1fr); gap: 20px; }
	.dir-layout__side { padding-right: 22px; }
	/* De lijstrij stapelt pas onder 900px VENSTERbreedte, maar in deze layout is de KOLOM
	   smal terwijl het venster breed is. De score- en knoppenkolom worden daarom hier al
	   smaller, zodat de bedrijfsnaam op één regel blijft en de beschrijving niet direct
	   wordt afgekapt. */
	.dir-layout__main .registry-row { grid-template-columns: minmax(0, 1fr) 108px 176px; gap: 16px; }
	.dir-layout__main .registry-row__scorecol .rtbi { width: 104px; }
}
@media (max-width: 1000px) {
	.dir-layout { grid-template-columns: 1fr; gap: 0; }
	.dir-layout__side { position: static; padding-right: 0; border-right: 0; }
}

/* Filterblok met een checkbox als schakelaar: mobiel standaard ingeklapt, desktop altijd open.
   Bewust geen <details>: de inhoud daarvan is met CSS niet zichtbaar te maken als het element
   dicht staat, dus desktop zou dan JS nodig hebben. */
.filterblok__vink { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filterblok__knop { display: none; }
@media (max-width: 1000px) {
	.filterblok__vink:not(:checked) ~ .filterbar { display: none; }
	.filterblok__vink:focus-visible ~ .filterblok__knop { outline: 2px solid var(--brand); outline-offset: 2px; }
	.filterblok__knop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		cursor: pointer;
		list-style: none;
		padding: 13px 16px;
		margin-bottom: 12px;
		border: 1px solid var(--line-strong);
		border-radius: var(--radius-lg);
		background: var(--surface-2);
		font-weight: 700;
		font-size: 14.5px;
	}
	.filterblok__pijl {
		width: 9px; height: 9px; flex: none;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .15s;
	}
	.filterblok__vink:checked ~ .filterblok__knop .filterblok__pijl { transform: rotate(-135deg); }
}

/* Zijbalk-variant van het filterformulier: geen full-bleed band, wel een kaart, en de velden
   onder elkaar in plaats van naast elkaar. */
.filterbar.filterbar--sidebar {
	max-width: none;
	/* Vlak, zonder kaart. Een kaart met rand en padding duwde de labels 19px naar binnen,
	   waardoor niets in de linkerkolom meer uitlijnde met de hero-tekst erboven (gemeten:
	   hero op 147px, label op 166px). Nu staan hero, filterlabels en de scheidingslijn op
	   dezelfde lijn; de lijst rechts is de enige kaart-achtige kolom. */
	margin: 0;
	/* De scheidingslijn zit op .dir-layout__side en niet hier: de sorteerkeuze staat
	   boven dit formulier, en met de lijn op het formulier begon hij pas halverwege
	   de kolom. */
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}
.filterbar.filterbar--sidebar .filterbar__fields { display: block; }
.filterbar.filterbar--sidebar .filterbar__fields > .field { margin-bottom: 14px; }
.filterbar.filterbar--sidebar .filterbar__fields > .field:last-child { margin-bottom: 0; }
.filterbar.filterbar--sidebar .filterbar__fields > .field select,
.filterbar.filterbar--sidebar .field input[type="search"] { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
/* Het "Meer filters"-paneel is in de zijbalk één kolom in plaats van drie. */
.filterbar.filterbar--sidebar .morefilters__panel { grid-template-columns: 1fr; }
.filterbar.filterbar--sidebar .filterbar__footer { flex-direction: column; align-items: flex-start; gap: 8px; }

/* ── Keuzevraag boven de fold ───────────────────────────────────────────────────────────
   Twee klikbare antwoorden in plaats van één knop. Staat in de blauwe hero, dus lichte tekst
   op een half-transparante kaart. */
.keuzevraag { margin: 22px 0 0; }
.keuzevraag__vraag { margin: 0 0 12px; font-weight: 700; color: #fff; font-size: 17px; }
.keuzevraag__opties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 660px; }
/* Massief wit op het blauw in plaats van half-transparant: de twee antwoorden moeten het
   opvallendste element van de hero zijn, want een klik hier is het hele doel van het blok. */
.keuzevraag__optie {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 2px solid #fff;
	border-radius: var(--radius-lg);
	padding: 16px 18px;
	text-decoration: none;
	box-shadow: 0 10px 24px -18px rgba(6, 20, 48, .8);
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.keuzevraag__optie:hover,
.keuzevraag__optie:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -16px rgba(6, 20, 48, .85);
	/* --cta en niet --amber: dit is de hoverrand van een CTA-kaart, dus hij hoort
	   mee te kleuren met de knoppen. Met --amber (dof goud) viel hij uit de toon
	   zodra het oranje feller werd. */
	border-color: var(--cta, #EA6A0A);
}
.keuzevraag__tekst { flex: 1; min-width: 0; }
.keuzevraag__label { display: block; color: var(--ink, #101b33); font-weight: 800; font-size: 15.5px; line-height: 1.25; }
.keuzevraag__sub { display: block; color: var(--ink-2, #5b6b86); font-size: 13px; margin-top: 3px; line-height: 1.3; }
/* Pijl-affordance: maakt van een tekstblok zichtbaar een knop. */
.keuzevraag__pijl {
	flex: none;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--cta, #EA6A0A);
	position: relative;
}
.keuzevraag__pijl::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 7px; height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translate(-60%, -50%) rotate(45deg);
}
.keuzevraag__note { margin: 12px 0 0; color: #c3d4f0; font-size: 13px; }
@media (max-width: 560px) {
	.keuzevraag__opties { grid-template-columns: 1fr; }
}

.filterbar {
	background: var(--surface-2);
	max-width: none;
	margin: 16px calc(50% - 50vw) 0;
	padding: 18px calc(50vw - 50%);
}
.filterbar__fields { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: end; }
.filterbar__fields > .field select { min-width: 190px; }
.hub-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-2); padding: 28px 24px; margin: 20px 0; }
.hub-empty p { margin: 0 0 14px; color: var(--ink-2); }
.hub-empty p:last-child { margin-bottom: 0; }
/* Chips in de lege staat: zelfde chip-opmaak als in de toolbar, alleen de rij eromheen
   heeft hier eigen lucht nodig (in de toolbar regelt de flex-layout dat). */
.hub-empty .toolbar__chips { margin: 0 0 16px; }
.filterbar .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.filterbar .field__label,
.filterbar label { color: var(--ink-2); font-weight: 600; }
.filterbar select {
	padding: 8px 10px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	background: var(--surface);
	color: var(--ink);
	min-width: 160px;
}
.filterbar .field--search { flex: 1 1 240px; min-width: 220px; }
/* Merk logo-picker (native <details>-popover i.p.v. dropdown). */
.filterbar .field--merk { position: relative; }
.merk-dd { position: relative; }
.merk-dd summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 190px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; }
.merk-dd summary::-webkit-details-marker { display: none; }
.merk-dd[open] summary { border-color: var(--blue-600); }
.merk-dd summary svg { transition: transform .15s; color: var(--ink-3); }
.merk-dd[open] summary svg { transform: rotate(180deg); }
.merk-dd__panel { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; left: auto; width: min(440px, 88vw); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(16,27,51,.4); padding: 14px; }
.merk-dd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 320px; overflow-y: auto; }
.merk-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; background: var(--surface); }
.merk-pick:hover { border-color: var(--blue-600); background: #fff; }
.merk-pick.is-active { border-color: var(--blue-600); background: var(--blue-050); box-shadow: inset 0 0 0 1px var(--blue-600); }
.merk-pick__logo { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.merk-pick__logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 3px; }
.merk-pick__mono { font-weight: 800; color: var(--blue-700); font-size: 15px; }
.merk-pick__name { font-weight: 600; color: var(--ink); font-size: 13.5px; overflow-wrap: anywhere; }
.merk-dd__all { display: inline-block; margin-top: 12px; color: var(--blue-700); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.merk-dd__all:hover { text-decoration: underline; }
/* Sidebar: paneel inline onder de knop. Absoluut rechts verankerd aan de smalle knop schoof het 440px
   brede paneel links buiten de sidebar, waardoor de eerste kolom werd afgeknipt. */
.filterbar--sidebar .merk-dd summary { display: flex; width: 100%; box-sizing: border-box; }
.filterbar--sidebar .merk-dd__panel { position: static; width: auto; margin-top: 6px; box-shadow: none; padding: 10px; }
.filterbar--sidebar .merk-dd__grid { grid-template-columns: 1fr; }
/* "Meer filters": secundaire filters op een eigen rij, ingeklapt. */
.filterbar .morefilters { flex: 1 0 100%; }
.morefilters > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--ink-2); font-weight: 600; }
.morefilters > summary::-webkit-details-marker { display: none; }
.morefilters > summary svg { transition: transform .15s; color: var(--ink-3); }
.morefilters[open] > summary svg { transform: rotate(180deg); }
/* Paneel in drie groepen (Vertrouwen, Jouw situatie, Bedrijf). Was een flex-rij met losse
   velden; met elf filters is een grid met kopjes leesbaarder. Onder 900px stapelt het. */
.morefilters__panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; margin-top: 14px; align-items: start; }
.fgroup { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fgroup__title { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .01em; color: var(--ink); margin: 0 0 2px; }
.fcheck { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.fcheck input { flex: none; width: 16px; height: 16px; accent-color: var(--blue-700); cursor: pointer; }
.fcheck__label { flex: 1; min-width: 0; line-height: 1.35; }
.fcheck__n { flex: none; font-size: 12px; font-weight: 700; color: var(--blue-700); background: var(--blue-050); border-radius: 999px; padding: 1px 7px; }
/* .filterbar select zet min-width:160px; in een grid-kolom mag dat de kolom niet uitrekken. */
.morefilters__panel .field select { width: 100%; min-width: 0; max-width: 100%; }
.morefilters__note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.search-input { position: relative; display: flex; }
.search-input input[type="search"] {
	width: 100%;
	padding: 9px 44px 9px 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	background: var(--surface);
	color: var(--ink);
	-webkit-appearance: none;
	appearance: none;
}
.search-input input[type="search"]:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.search-input__btn {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--brand);
	cursor: pointer;
	border-radius: 0 var(--radius) var(--radius) 0;
}
.search-input__btn:hover { color: var(--brand-dark); }
.filterbar .field--checkbox { justify-content: flex-end; }
.filterbar .checkbox { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-2); font-size: 13.5px; cursor: pointer; }
.filterbar__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 13px;
}
.filterbar__count { color: var(--ink-2); font-weight: 600; }
.filterbar__clear { color: var(--ink-3); text-decoration: underline; }
.filterbar__clear:hover { color: var(--accent); }
@media (max-width: 900px) {
	.morefilters__panel { grid-template-columns: 1fr; gap: 20px; }
}

/* Segmented control — used both as radio+label (filter bar, keyboard/no-JS friendly)
   and as plain links (sort bar). Active state: checked radio or .is-active link. */
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.segmented__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segmented__btn {
	padding: 8px 13px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	border-right: 1px solid var(--line-strong);
}
.segmented__btn:last-child { border-right: none; }
.segmented__btn:hover { background: var(--surface-2); text-decoration: none; }
.segmented__input:checked + .segmented__btn,
.segmented__btn.is-active {
	background: var(--blue-700);
	color: #fff;
}
.segmented__input:focus-visible + .segmented__btn { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Gestapelde segmented control: in een sidebar van 248px passen drie knoppen niet
   naast elkaar, dus onder elkaar met de scheidingslijn horizontaal. */
.segmented--stapel { display: flex; flex-direction: column; width: 100%; }
.segmented--stapel .segmented__btn { border-right: 0; border-bottom: 1px solid var(--line-strong); text-align: center; white-space: normal; }
.segmented--stapel .segmented__btn:last-child { border-bottom: 0; }

/* Sorteerkeuze in de sidebar. Zat boven de lijst en kostte daar 88px hoogte;
   hier is die ruimte gratis. Op mobiel staat hij boven de filterknop, waar de
   oude strip ook stond, en dan wél naast elkaar (de breedte is er). */
.sorteerblok { margin: 0 0 18px; }
.sorteerblok__label { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 8px; }
@media (max-width: 1000px) {
	.sorteerblok { margin-bottom: 12px; }
	.sorteerblok .segmented--stapel { flex-direction: row; width: auto; }
	.sorteerblok .segmented--stapel .segmented__btn { border-bottom: 0; border-right: 1px solid var(--line-strong); white-space: nowrap; }
	.sorteerblok .segmented--stapel .segmented__btn:last-child { border-right: 0; }
}

/* ---- Chips toolbar (above the registry; rendert alleen met actieve filters) ---- */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }
.toolbar__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-2);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	padding: 5px 10px;
	text-decoration: none;
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip__x { font-size: 14px; line-height: 1; }

/* ---- Registry (list-rows, not a card grid) ---- */
.registry {
	background: var(--surface);
	max-width: none;
	margin: 18px calc(50% - 50vw) 0;
	padding: 4px calc(50vw - 50%);
}
.registry-row {
	display: grid;
	grid-template-columns: 1fr 132px 196px;
	gap: 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
	align-items: center;
}
.registry-row__scorecol { display: flex; justify-content: center; }
.registry-row__scorecol .rtbi { width: 120px; }
.registry-row:last-child { border-bottom: none; }

/* ---- Kopgroep en staart (21-09-2026) ----
   De listing toont sinds de crawl-ingreep vijftig rijen per pagina in plaats van tien.
   Zonder onderscheid verdwijnt de kopgroep in de massa, terwijl dat is waar de pagina
   voor bedoeld is. De eerste tien houden de volle rij, de rest wordt compacter.
   Alleen op pagina 1 van een listing, zie dirstarter_registry_loop(). */
.registry--rest { margin-top: 0; }
.registry-row--top .registry-row__rank { color: var(--blue-700); }

/* De kop tussen beide groepen. Geen kader en geen streep: de sectiestijl van deze site
   werkt met volle banden en witruimte, niet met dozen. Boven de kopgroep staat bewust
   GEEN kop, zie dirstarter_registry_loop(). */
.registry-break { margin: 34px 0 2px; }
.registry-break h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0; }
.registry-break p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }

/* De staart is een naslaglijst, geen etalage: kleinere naam, minder lucht, en de
   verkooptekst eruit. De score, plaats en keurmerken blijven staan, want daarop kiest
   iemand die doorleest. */
.registry--rest .registry-row { padding: 13px 0; }
.registry--rest .registry-row__name { font-size: 17px; }
.registry--rest .registry-row__scorecol .rtbi { width: 96px; }
.registry--rest .logo-tile { width: 52px; height: 52px; }
.registry--rest .registry-row__ctas .btn { padding: 9px 14px; font-size: 14px; }
.registry--rest .registry-row__badges { margin-top: 6px; }
.registry-row__left { display: flex; gap: 16px; min-width: 0; }
.registry-row__logo-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.registry-row__rank { font-weight: 700; color: var(--ink); margin-right: 2px; }

.logo-tile {
	width: 56px;
	height: 56px;
	border-radius: var(--radius);
	border: 1px solid var(--line-strong);
	background: var(--blue-050);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.logo-tile img { width: 100%; height: 100%; object-fit: contain; padding: 7px; box-sizing: border-box; }
.logo-tile__mono { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--blue-800); }

/* Het logo is een tweede klikvlak naar het profiel (zie dirstarter_row). De hover
   maakt dat zichtbaar — zonder aanwijzing blijft het een plaatje waar je tegenaan
   klikt, en dat was precies de dead click die we wegnemen. */
.logo-tile-link { display: block; text-decoration: none; }
.logo-tile-link .logo-tile { transition: border-color .15s ease, box-shadow .15s ease; }
.logo-tile-link:hover .logo-tile,
.logo-tile-link:focus-visible .logo-tile { border-color: var(--blue-700); box-shadow: 0 0 0 3px rgba(21,83,176,.12); }

.registry-row__info { min-width: 0; flex: 1; }
.registry-row__name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.registry-row__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.registry-row__name a { color: var(--ink); text-decoration: none; }
.registry-row__name a:hover { color: var(--accent); text-decoration: none; }

.pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 3px 8px; }
.pill--featured { color: var(--blue-800); background: var(--blue-100); }

.registry-row__meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
/* Trustoo-stijl feature-badges (reactietijd, certificeringen). */
.registry-row__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.feature-badge { font-size: 12.5px; font-weight: 600; color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); border-radius: 999px; padding: 4px 10px; }
/* Trustoo-stijl info-regel (werkgebied, telefoon). */
/* Korte omschrijving, trustoo-stijl geclampt op 2 regels + Lees meer. */
.registry-row__pitch { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.registry-row__more { display: inline-block; margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.registry-row__more:hover { text-decoration: underline; }
.registry-row__facts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.registry-row__facts .fact { display: inline-flex; align-items: center; gap: 6px; }
.registry-row__facts a { color: inherit; text-decoration: none; }
.registry-row__facts a:hover { text-decoration: underline; }
.registry-row__facts svg { width: 15px; height: 15px; flex: none; opacity: .65; }

.verify-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.verify-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--green-ink);
	background: var(--green-tint);
	border: 1px solid var(--green);
	border-radius: 999px;
	padding: 4px 9px;
}
.verify-tag .check-icon { color: var(--green); flex-shrink: 0; }

/* TBI-score prominent onder de naam (belangrijkste beslissignaal, hoog in de rij). */
.registry-row__scoreline { margin: 12px 0 2px; display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.registry-row__scoreline .rtbi { width: auto; text-align: left; }
.registry-row__scoreline .rtbi__num { font-size: 30px; }
.registry-row__scoreline .rmeter { width: 200px; max-width: 62vw; margin-top: 7px; }
.registry-row__score { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.registry-row__score-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); margin-top: 4px; }
.registry-row__reviews { display: block; font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.registry-row__ctas { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.registry-row__ctas .btn { width: 100%; justify-content: center; }

/* ---- Aanbevolen partner (betaald / Pro voordeel) ---- */
.pro-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1;
	color: #fff;
	background: var(--cta);
	padding: 6px 12px;
	border-radius: 999px;
	width: fit-content;
}
.pro-flag .star-icon { color: #fff; flex: none; }
.pro-flag--lg { font-size: 14px; padding: 8px 15px; }
/* Vertrouwensbadges. Twee varianten sinds 17-09-2026, zie dirstarter_claim_badge()
   en dirstarter_kvk_badge() voor waarom ze uit elkaar zijn getrokken.
   --claim blauw (merkkleur): er zit iemand achter dit profiel. Staat in de lijst
     én op het profiel, want dit is het onderscheidende signaal.
   --kvk groen: door ons nagekeken in het Handelsregister. Alleen op het profiel. */
.vbadge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1;
	padding: 5px 11px;
	border-radius: 999px;
	width: fit-content;
	border: 1px solid transparent;
}
.vbadge--claim {
	color: var(--blue-800, #12326e);
	background: var(--blue-050, #eef3fc);
	border-color: color-mix(in srgb, var(--brand, #1553b0) 35%, transparent);
}
.vbadge--claim .shield-icon { color: var(--brand, #1553b0); flex: none; }
.vbadge--kvk {
	color: var(--green-ink);
	background: var(--green-tint);
	border-color: color-mix(in srgb, var(--green) 40%, transparent);
}
.vbadge--kvk .shield-icon { color: var(--green); flex: none; }
.profile-header__name-line .vbadge { font-size: 13.5px; padding: 7px 13px; }
/* Tooltip: uitleg wat "Geverifieerd" betekent (hover + toetsenbord-focus). */
.vbadge { position: relative; cursor: help; }
.vbadge__tip {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 0;
	width: max-content;
	max-width: 262px;
	background: var(--ink);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: normal;
	padding: 10px 13px;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(16, 27, 51, .22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index: 40;
	pointer-events: none;
}
.vbadge__tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 18px;
	border: 6px solid transparent;
	border-top-color: var(--ink);
}
.vbadge:hover .vbadge__tip,
.vbadge:focus .vbadge__tip,
.vbadge:focus-visible .vbadge__tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* In de lijstrij: tooltip OMLAAG openen (blijft binnen de eigen rij i.p.v. de
   rij erboven af te dekken); pijl wijst omhoog naar de badge. */
.registry-row .vbadge__tip {
	bottom: auto;
	top: calc(100% + 9px);
	transform: translateY(-4px);
	max-width: 240px;
}
.registry-row .vbadge__tip::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--ink);
}
/* Gehighlighte Pro-rij in de lijst: valt duidelijk op bovenaan. */
.registry-row--pro {
	background: color-mix(in srgb, var(--cta) 7%, var(--surface));
	border-left: 4px solid var(--cta);
	border-radius: 12px;
	padding-left: 20px;
	padding-right: 20px;
	margin: 4px 0;
}
.registry-row--pro .pro-flag { grid-column: 1 / -1; margin-bottom: 10px; }

@media (max-width: 620px) {
	.registry-row { grid-template-columns: 1fr; }
	.registry-row__score { align-items: flex-start; text-align: left; margin-top: 16px; }
	.registry-row__scorecol { justify-content: flex-start; margin-top: 14px; }
	.registry-row__scorecol .rtbi { width: 100%; text-align: left; }
	.registry-row__scorecol .rtbi__lab { justify-content: flex-start; }
	/* Scorecol staat mobiel links → tooltip links ankeren (anders clipt 'ie links). */
	.registry-row__scorecol .rtbi__tip { right: auto; left: 0; }
	.registry-row__scorecol .rtbi__tip::after { right: auto; left: 11px; }
	.registry-row__scorecol .rmeter { max-width: 240px; margin-top: 9px; }
	.registry-row__ctas { flex-direction: row; margin-top: 12px; }
	/* Logo boven de info i.p.v. ernaast: eerder sprong de info-kolom in (naast
	   het logo) terwijl score + knoppen vol-breed stonden → scheve uitlijning.
	   Nu één links-uitgelijnde kolom: logo → naam → badges → tekst → feiten →
	   score → knoppen. */
	.registry-row__left { flex-direction: column; gap: 12px; }
	.registry-row__logo-col { align-items: flex-start; }
	.logo-tile { width: 64px; height: 64px; }
	.registry-row__name { font-size: 19px; overflow-wrap: break-word; }
}

/* ---- Accu-meter (README §Accu-meter — exact CSS, container display added) ---- */
.gauge { display: inline-flex; align-items: center; }
.gauge__cell{ position:relative; width:82px; height:15px;
  border:1.5px solid var(--line-strong); border-radius:3px;
  background:var(--surface-2); overflow:hidden; }
.gauge__cell::before{ content:""; position:absolute; inset:0 auto 0 0;
  width:var(--fill); background:var(--green); }
.gauge__cell::after{ content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,transparent 0,
  transparent calc(20% - 1px),var(--line) calc(20% - 1px),var(--line) 20%); }
.gauge__nub{ display:inline-block; width:3px; height:8px;
  background:var(--line-strong); border-radius:0 1px 1px 0; margin-left:3px; }

/* Gauge size modifiers (README: "Profielheader-variant: 96px breed, 17px hoog.
   Review-embed-variant: flexibel/60px."). Default .gauge__cell above = row (82x15). */
.gauge--profile .gauge__cell { width: 96px; height: 17px; }
.gauge--source .gauge__cell { width: 100%; min-width: 60px; height: 13px; }
.gauge--source { flex: 1; }

/* ---- Full-width quote CTA (README §CTA-blok) ---- */
.quote-cta { background: var(--blue-900); margin-top: 40px; }
.quote-cta__inner { padding: 56px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.quote-cta__title { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: #fff; margin: 0; }
.quote-cta__sub { color: rgba(255, 255, 255, .78); font-size: 15px; margin: 0; max-width: 52ch; }
.quote-cta__btn { background: var(--cta); color: #fff; box-shadow: 0 16px 40px -18px rgba(6,20,55,.6); }
.quote-cta__btn:hover { background: var(--cta-hover); color: #fff; }

/* ============================================================
   Legacy component CSS (pre-token-migration).
   Still driven by the compat aliases above — untouched in Phase 1.
   .dir-grid/.dir-card stay in use by front-page.php (provincie tiles)
   and the [dir_merken] shortcode; not the installateur registry above.
   Migrate + restyle these in later phases (profile).
   ============================================================ */

/* Card grid */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.dir-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dir-card h2 { margin: 0; font-size: 1.1rem; }
.dir-card h2 a { text-decoration: none; color: var(--text); }
.dir-card .meta { color: var(--muted); font-size: .9rem; }
.dir-card .rating { font-weight: 600; }
.dir-card .badge { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 12%, transparent); padding: 2px 8px; border-radius: 999px; }
.dir-card__logo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 6px; vertical-align: middle; }
.dir-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dir-card h2 { display: flex; align-items: center; gap: 2px; }
/* Merken zonder installateur: minder nadruk, de pagina zelf legt uit dat de lijst nog groeit. */
.dir-card--leeg { opacity: .6; }

.cta { display: inline-block; background: var(--brand); color: #fff; text-decoration: none; padding: 11px 20px; border-radius: 8px; font-weight: 700; }
.cta:hover { background: var(--brand-dark); }
/* Paginering: sinds 21-09-2026 staat de hele reeks paginanummers erin (zie
   dirstarter_paginatie). Elf tot vijftien nummers passen niet op één regel op mobiel,
   dus wrap is hier geen sierregel maar de reden dat het werkt. */
.pagination { margin: 28px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; }
.pagination .page-numbers:hover { border-color: var(--blue-700); color: var(--blue-700); }
.pagination .page-numbers.current { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; background: none; }

/* "Kort geleden bijgewerkt": links naar profielen die echt zijn gewijzigd, op de
   pagina's die Google wél ophaalt. Bewust een compacte lijst en geen volle rijen —
   het blok is er voor de doorloop, niet om de listing te herhalen. */
.bijgewerkt { margin-top: 32px; }
.bijgewerkt h2 { font-size: 1.4rem; margin: 0 0 12px; }
.bijgewerkt__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 20px; }
.bijgewerkt__lijst li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.bijgewerkt__lijst a { font-weight: 600; text-decoration: none; }
.bijgewerkt__lijst a:hover { text-decoration: underline; }
.bijgewerkt__plaats { color: var(--ink-2); font-size: 13px; }
.bijgewerkt__lijst time { margin-left: auto; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.page-body { max-width: 70ch; }
.page-body p { color: var(--text); }
.hub-content { margin-top: 24px; max-width: 70ch; }
.hub-content h2 { font-size: 1.4rem; margin: 0 0 10px; }
.hub-content h3 { font-size: 1.1rem; margin: 22px 0 6px; }
.hub-content p { color: var(--text); }
.faq { margin-top: 32px; max-width: 70ch; }
.faq h2 { font-size: 1.4rem; margin: 0 0 12px; }
/* FAQ staat open: vraag als H3, antwoord er direct onder. Stond eerder in een
   details/summary, waardoor het antwoord dichtgeklapt begon; onze eigen contentregel
   schrijft open H3 plus alinea voor en dat leest ook beter voor een samenvatting. */
.faq-item { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 0 0 8px; }
.faq-item .faq-q { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; line-height: 1.4; color: var(--ink); margin: 0; }
.faq-item .faq-a { margin-top: 6px; color: var(--ink-2); }
.faq-item .faq-a p { margin: 0 0 8px; }
.faq-item .faq-a p:last-child { margin-bottom: 0; }

/* ============================================================
   PROFILE — single-installateur.php (README §Bedrijfsprofiel).
   Header (identity + score + CTA card), info-strip, tabs, reviews
   aggregate, verification checklist, offerte band, claim strip. Phase 3.
   ============================================================ */

.profile-header {
	background: linear-gradient(180deg, var(--surface), var(--bg));
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.profile-header__grid {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	align-items: start;
	padding: 34px 24px 30px;
}
@media (max-width: 900px) {
	.profile-header__grid { grid-template-columns: 1fr; }
}

.profile-header__top { display: flex; gap: 18px; align-items: flex-start; }
.profile-logo {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line-strong);
	background: var(--blue-050);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.profile-logo img { width: 100%; height: 100%; object-fit: contain; padding: 9px; box-sizing: border-box; }
.profile-logo__mono { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--blue-800); }

.profile-header__left { min-width: 0; }
.profile-header__text { min-width: 0; flex: 1; }
.profile-header__name-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.profile-header__name-line > h1 { flex: 1 1 100%; }

.profile-header h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); letter-spacing: -.02em; margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.profile-header__meta { font-size: 15.5px; color: var(--ink-2); margin: 0 0 16px; }

.profile-score { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-score__gauge-group { display: flex; align-items: center; gap: 9px; }
.profile-score__num { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); }
.profile-score__reviews { font-size: 13.5px; color: var(--ink-3); }

/* ---- Info strip ---- */
.profile-info-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 20px;
	background: var(--blue-050);
	border-radius: 12px;
	padding: 4px 8px;
}
.profile-info-strip__item {
	flex: 1;
	min-width: 130px;
	padding: 10px 20px;
	border-left: 1px solid var(--line);
}
.profile-info-strip__item:first-child { border-left: none; }
.profile-info-strip__label { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.profile-info-strip__value { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.profile-info-strip__value a { color: var(--ink); text-decoration: none; }
.profile-info-strip__value a:hover { color: var(--accent); text-decoration: none; }

/* ---- CTA card (header right column) ---- */
.profile-cta-card {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow);
	padding: 20px;
}
.profile-cta-card__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0 0 4px; }
.profile-cta-card__sub { font-size: 13px; color: var(--ink-3); margin: 0 0 16px; }
.profile-cta-card .btn { width: 100%; justify-content: center; }
.profile-cta-card .btn-primary { margin-bottom: 10px; }

/* ---- Tabs (README §Interacties: role=tab / aria-selected, underline in --accent) ---- */
/* Profiel: sticky spring-nav + gestapelde secties (i.p.v. tabs) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.profile-jumpnav {
	position: sticky;
	top: 68px;
	z-index: 20;
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	margin: 28px 0 0;
}
.profile-jumpnav a {
	padding: 13px 18px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15.5px;
	color: var(--ink-3);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.profile-jumpnav a:hover { color: var(--ink); text-decoration: none; }
.profile-jumpnav a.is-active { color: var(--ink); border-bottom-color: var(--accent); }
/* Elke sectie = witte kaart op de blauwe pagina-achtergrond, zodat de secties
   duidelijk als aparte blokken leesbaar zijn. */
.profile-section { scroll-margin-top: 128px; padding: 30px 0; }
.profile-section h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0 0 12px; color: var(--ink); letter-spacing: -.01em; }
.profile-section h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 28px 0 12px; color: var(--ink); }
.profile-section p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 12px; max-width: 68ch; }
#offerte { scroll-margin-top: 128px; }

/* Mobiele profiel-polish. NA de basis-regels hierboven zodat deze winnen bij
   gelijke specificiteit (media queries verhogen specificiteit niet). */
@media (max-width: 560px) {
	/* Logo boven de tekst i.p.v. ernaast: de smalle rechterkolom perste naam +
	   badges samen. Gestapeld krijgt de tekst de volle breedte. */
	.profile-header__top { flex-direction: column; align-items: flex-start; gap: 14px; }
	.profile-header__grid { gap: 20px; padding: 22px 20px 20px; }
	/* Sprong-nav: 2-rij wrap overlapte de sectiekoppen + oogde los. Nu één
	   compacte, horizontaal scrollbare rij. */
	.profile-jumpnav { flex-wrap: nowrap; overflow-x: auto; gap: 0; margin-top: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.profile-jumpnav::-webkit-scrollbar { display: none; }
	.profile-jumpnav a { padding: 12px 14px; font-size: 14.5px; white-space: nowrap; }
	/* Kop niet meer onder de sticky nav (site-header 68 + nav ~48); strakkere
	   verticale ritmiek. */
	.profile-section { scroll-margin-top: 120px; padding: 22px 0; }
	#offerte { scroll-margin-top: 120px; }
}

/* ============================================================
   SECTIE-RITME — full-width achtergrond-banden (GEEN kaders/radius).
   Sommige secties krijgen een witte band, rand-tot-rand, op de blauwe
   pagina-achtergrond. Ze vloeien in elkaar over (geen afgebakende
   blokken); het kleurverschil scheidt de secties. Hero, why-band,
   trust-strip en de donkere quote-cta houden hun eigen behandeling.
   Techniek: full-bleed (breekt uit de content-kolom), tekst blijft
   uitgelijnd op de kolom via horizontale padding.
   ============================================================ */
#overzicht.profile-section,
#verificatie.profile-section,
.home .province-section,
.home .info-section,
.post-type-archive-installateur .steps-section,
.tax-provincie .steps-section,
.tax-plaats .steps-section {
	background: var(--surface);
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}
/* Profiel-banden hebben geen eigen verticale padding — hier zetten. */
#overzicht.profile-section,
#verificatie.profile-section {
	padding-top: 36px;
	padding-bottom: 36px;
}

/* Profiel-slots (hide-when-empty): badges, galerij, losse reviews */
.profile-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.profile-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface); }
.profile-badge--top { background: color-mix(in srgb, var(--cta) 12%, transparent); border-color: color-mix(in srgb, var(--cta) 30%, transparent); color: var(--cta); }
.profile-badge--cert { background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green); }
.profile-badge--cert .check-icon { color: var(--green); }

.profile-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px; }
.profile-gallery__item { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.profile-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 620px) { .profile-gallery { grid-template-columns: repeat(2, 1fr); } }

.review-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.review-list .review-card { flex: 1 1 auto; max-width: none; }
.review-list .review-card__text { display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .review-list { grid-template-columns: 1fr; } }

/* Specs grid (Overzicht) */
.profile-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: 0 0 8px;
}
@media (max-width: 560px) { .profile-specs { grid-template-columns: 1fr; } }
.profile-specs__item { background: var(--surface); padding: 14px 18px; }
.profile-specs__label { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.profile-specs__value { font-size: 15px; font-weight: 600; color: var(--ink); }

/* Reviews aggregate (README §Review-embeds) */
.profile-reviews-aggregate {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.profile-reviews-aggregate__score { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--ink); line-height: 1; }
.profile-reviews-aggregate__count { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.profile-reviews-aggregate__gauge { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.profile-reviews-note { font-size: 14px; color: var(--ink-3); margin: 0; }

/* Multi-bron review-blokken (Google + Trustpilot/Trustoo etc.) */
.review-sources { display: flex; flex-wrap: wrap; gap: 12px; margin: 2px 0 6px; }
.review-source {
	display: flex;
	flex-direction: column;
	gap: 7px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	padding: 12px 16px;
	min-width: 148px;
}
.review-source__head { display: flex; align-items: center; gap: 8px; }
.review-source__head .src-logo, .review-source__head .star-icon { flex: none; }
.review-source__platform { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-2); }
.review-source__row { display: flex; align-items: center; gap: 8px; }
.review-source__rating { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.review-source__count { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
a.review-source--link { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.review-source--link:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(16,27,51,.08); transform: translateY(-1px); }

/* Verification checklist (README §Verificatie-blok) */
.verify-checklist { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.verify-checklist__row { display: flex; align-items: flex-start; gap: 13px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.verify-checklist__row:last-child { border-bottom: none; }
.verify-checklist__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	background: var(--green-tint);
	border: 1px solid var(--green);
	color: var(--green-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.verify-checklist__title { font-weight: 600; font-size: 15px; color: var(--ink); }
.verify-checklist__detail { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }

/* Vergelijkbare installateurs — dirstarter_related_installers() reuses
   .registry / dirstarter_row() for the list; the wrapping <section>/<h2> it
   prints (functions.php) still needs the profile's heading typography. */
.related { background: var(--surface); max-width: none; margin: 32px calc(50% - 50vw) 0; padding: 8px calc(50vw - 50%) 12px; }
.related h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; margin: 0 0 16px; color: var(--ink); }

/* Offerte-band. Stond eerst binnen de contentkolom, waardoor er witte randen naast het
   blauw bleven staan en een smal formulier midden in een breed vlak hing. Nu loopt de
   band van rand tot rand (zelfde truc als .related) en staat de uitleg naast het
   formulier in plaats van erboven. */
.profile-offerte {
	background: var(--blue-900);
	margin: 44px calc(50% - 50vw) 0;
	padding: 0 calc(50vw - 50%);
	max-width: none;
}
.profile-offerte__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 60px 24px;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 48px;
	align-items: start;
	text-align: left;
}
.profile-offerte__text { padding-top: 6px; }
.profile-offerte__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.65rem, 1.3rem + 1.1vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; margin: 0; }
.profile-offerte__sub { color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.6; margin: 12px 0 0; max-width: 46ch; }
.profile-offerte__points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.profile-offerte__points li { position: relative; padding-left: 30px; color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.5; }
/* Vinkje als achtergrond-SVG: geen extra markup per punt nodig. */
.profile-offerte__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ff0b6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.profile-offerte__form { min-width: 0; }
.profile-offerte .quote-form { max-width: none; }
.profile-offerte__note { color: rgba(255, 255, 255, .6); font-size: 13px; font-style: italic; margin: 14px 0 0; }

@media (max-width: 900px) {
	.profile-offerte__inner { grid-template-columns: 1fr; gap: 28px; padding: 48px 20px; }
	.profile-offerte__points { gap: 10px; }
}

/* Subtle claim strip — deliberately NOT a competing H2/CTA band */
.claim-strip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 24px;
	border-top: 1px solid var(--line);
	text-align: center;
}
.claim-strip__label { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0; }
.claim-strip .dirclaim-notice { font-size: 13px; color: var(--green-ink); margin: 0; }
.claim-strip .dirclaim-claim-form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; margin: 0 auto; }
.claim-strip .dirclaim-claim-form p { margin: 0; text-align: left; }
.claim-strip .dirclaim-claim-form label { font-size: 12px; color: var(--ink-3); }
.claim-strip .dirclaim-claim-form input[type="email"],
.claim-strip .dirclaim-claim-form input[type="text"] {
	width: 100%;
	margin-top: 3px;
	padding: 7px 9px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: 13px;
	background: var(--surface);
	color: var(--ink);
}
.claim-strip .dirclaim-hint { font-size: 11.5px; color: var(--ink-3); }
.claim-strip .dirclaim-claim-form button {
	padding: 8px 14px;
	border: 1px solid var(--line-strong);
	background: transparent;
	color: var(--ink);
	border-radius: var(--radius);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.claim-strip .dirclaim-claim-form button:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   HOME — front-page.php (README §Home). Hero + stat strip + provincie-card,
   keurmerken-strip, zo-werkt-het, merken, prijsindicatie + kennis. Phase 4.
   No 3-equal-column stat-card cliché, no gradient-hero-with-big-text: the
   hero stays two-column with a hairline stat STRIP, not stat cards.
   ============================================================ */

.hero {
	background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.hero__grid {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 64px 24px 56px;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 56px;
	align-items: start;
}
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 11px;
	border: 1px solid var(--line-strong);
	border-radius: 100px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-2);
	letter-spacing: .01em;
	margin-bottom: 22px;
}
.hero__badge-dot { width: 7px; height: 7px; background: var(--green); border-radius: 1px; flex-shrink: 0; }
.hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	line-height: 1.03;
	letter-spacing: -.02em;
	margin: 0 0 20px;
	max-width: 16ch;
	color: var(--ink);
}
.hero__lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 0 0 30px; max-width: 52ch; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.hero__ctas .btn { padding: 14px 22px; font-size: 16px; }

.stat-strip { display: flex; flex-wrap: wrap; gap: 0 8px; }
.stat-strip__item { flex: 1 1 auto; padding: 2px 24px 2px 0; }
.stat-strip__item:last-child { border-right: none; }
.stat-strip__num { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); }
.stat-strip__num--accent { color: var(--green-ink); }
.stat-strip__label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; margin-top: 2px; }

/* Hero photo (README hero rework): real image, not a text-over-gradient
   treatment — rounded per brief spec (12px), object-fit cover, ratio close
   to the source crop (1600x1067) to avoid heavy cropping. width/height
   attributes on the <img> + aspect-ratio here both guard against CLS. */
.hero__media { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; padding: 44px 24px 40px; gap: 32px; }
	.hero__title { max-width: none; }
	.stat-strip { flex-wrap: wrap; }
	.stat-strip__item { flex: 1 1 50%; }
	.hero__media { aspect-ratio: 16 / 9; order: -1; }
}
@media (max-width: 480px) {
	.hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---- Kies je provincie (moved out of the hero into its own full-width
   band below it) ---- */
.province-section { max-width: var(--maxw); margin: 0 auto; padding: 52px 24px; }
.province-section__head { margin-bottom: 20px; }
.province-section__head h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.province-section__head p { font-size: 14.5px; color: var(--ink-3); margin: 0; }
.province-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.province-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.province-item:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); text-decoration: none; }
.province-item__count { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.province-section__footer { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.province-section__footer:hover { text-decoration: underline; }

/* ---- Keurmerken-strip (README §Keurmerken-strip) ---- */
.trust-strip { background: var(--surface-2); max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.trust-strip__grid {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 22px 24px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px 28px;
}
.trust-strip__item { background: transparent; padding: 6px 4px; display: flex; align-items: center; gap: 11px; }
.trust-strip__icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	background: var(--green-tint);
	border: 1px solid var(--green);
	color: var(--green-ink);
	display: flex;
	align-items: center;
	justify-content: center;
}
.trust-strip__text { min-width: 0; }
.trust-strip__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.1; }
.trust-strip__sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.2; }
@media (max-width: 900px) { .trust-strip__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-strip__grid { grid-template-columns: 1fr; } }

/* ---- Zo werkt het (README §Zo werkt het) ---- */
.steps-section { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px; }
.steps-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 14px;
}
.steps-section__head h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.steps-section__note { font-size: 14px; color: var(--ink-3); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.step { background: var(--surface); padding: 26px 24px; }
.step__num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--accent);
	border: 1.5px solid var(--accent);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	margin-bottom: 16px;
}
.step__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.step__text { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; } }
.steps-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .steps-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps-grid--4 { grid-template-columns: 1fr; } }
.steps-section__cta { margin-top: 24px; text-align: center; }

/* ---- Reviews-sectie + carousel ---- */
.reviews-section { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px; }
.reviews-section__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.reviews-section__intro h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
.reviews-section__intro p { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.reviews-section__intro strong { color: var(--ink); font-weight: 700; }
.reviews-section__score { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.reviews-section__score-label { font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.reviews-section__score-num { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--ink); }
.reviews-carousel { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
.reviews-carousel::-webkit-scrollbar { height: 8px; }
.reviews-carousel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.review-card { flex: 0 0 360px; max-width: 360px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 26px; box-shadow: 0 1px 2px rgba(16,27,51,.04), 0 10px 26px rgba(16,27,51,.05); }
.review-card__mark { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: .5; color: var(--ink); }
.stars { display: inline-flex; gap: 3px; font-size: 18px; line-height: 1; }
.stars__s { color: var(--line-strong); }
.stars__s.is-on { color: var(--blue-600); }
/* Grootte-varianten voor de sterren die de accu-meter vervangen. */
.stars--row { font-size: 15px; gap: 2px; }
.stars--source { font-size: 15px; gap: 2px; }
.stars--profile { font-size: 22px; gap: 4px; }
.review-card__title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; line-height: 1.35; color: var(--ink); margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.review-card__text { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review-card__foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.review-card__avatar { flex: 0 0 auto; line-height: 0; }
.review-card__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-card__author { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
a.review-card__author:hover { color: var(--blue-700); text-decoration: underline; }
.review-card__meta { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .review-card { flex-basis: 84vw; max-width: 84vw; padding: 22px; } }

/* ---- Merken (README §Merken) ---- */
.brands-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.brands-section__inner { max-width: var(--maxw); margin: 0 auto; padding: 44px 24px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: center; }
.brands-section__text h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; margin: 0 0 12px; color: var(--ink); }
.brands-section__text p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 40ch; }
.brands-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.brand-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.brand-link:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.brand-link__name { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.brand-link__arrow { font-size: 13px; color: var(--ink-3); font-weight: 600; }
@media (max-width: 900px) { .brands-section__inner { grid-template-columns: 1fr; } .brands-section__text p { max-width: none; } }
@media (max-width: 560px) { .brands-grid { grid-template-columns: 1fr; } }

/* ---- Prijsindicatie + kennis-teasers (README §Prijsindicatie / §Kennis-teasers) ---- */
.info-section { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.info-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.info-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.info-card__head { padding: 20px 24px 8px; }
.info-card__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0; color: var(--ink); }
.info-card__head p { font-size: 14px; color: var(--ink-3); margin: 6px 0 0; }
.info-card__link {
	display: block;
	padding: 14px 24px;
	border-top: 1px solid var(--line);
	font-weight: 600;
	font-size: 14px;
	color: var(--accent);
	text-decoration: none;
}
.info-card__link:hover { text-decoration: none; }

.price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); }
.price-row__cap { font-weight: 600; font-size: 15px; color: var(--ink); }
.price-row__use { font-size: 13px; color: var(--ink-3); }
.price-row__amount { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); white-space: nowrap; }

.kennis-teaser { display: block; padding: 15px 24px; border-top: 1px solid var(--line); text-decoration: none; }
.kennis-teaser:hover { text-decoration: none; background: var(--surface-2); }
.kennis-teaser__title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.kennis-teaser__sub { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }

/* ---- Top-beoordeelde installateurs marquee (front-page.php) ----
   Auto-scrolling row of the top ~10 by google_rating DESC, real data only.
   The chip list is rendered twice in the markup and this just slides the
   whole track -50% for a seamless loop; pauses on hover/focus so it can be
   read, and prefers-reduced-motion turns it into a plain scrollable row
   with the (aria-hidden) duplicate removed. */
.toprated-section { max-width: var(--maxw); margin: 0 auto; padding: 52px 0 56px; }
.toprated-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding: 0 24px; }
.toprated-section__head h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.toprated-section__note { font-size: 14px; color: var(--ink-3); }

.toprated-marquee { overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.toprated-track {
  display: flex;
  gap: 14px;
  margin-right: 14px;
}
.toprated-viewport {
  display: flex;
  width: max-content;
  animation: toprated-scroll 42s linear infinite;
}
.toprated-marquee:hover .toprated-viewport,
.toprated-marquee:focus-within .toprated-viewport { animation-play-state: paused; }
@keyframes toprated-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.toprated-chip {
	flex: 0 0 auto;
	width: 244px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.toprated-chip:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.toprated-chip__logo {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--blue-050);
	display: flex;
	align-items: center;
	justify-content: center;
}
.toprated-chip__logo img { width: 100%; height: 100%; object-fit: cover; }
.toprated-chip__mono { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--blue-800); }
.toprated-chip__body { min-width: 0; flex: 1; }
.toprated-chip__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toprated-chip__city { display: block; font-size: 12px; color: var(--ink-3); }
.toprated-chip__score { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.toprated-chip__score span { font-size: 12.5px; font-weight: 700; color: var(--ink); }

/* ---- Waarom via ons (front-page.php, real photo band) ---- */
.why-band { background: var(--surface-2); max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.why-band__inner { max-width: var(--maxw); margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; }
.why-band__media { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 9; }
.why-band__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.why-band__text h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; margin: 0 0 12px; color: var(--ink); }
.why-band__text p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; max-width: 48ch; }
@media (max-width: 900px) {
	.why-band__inner { grid-template-columns: 1fr; }
	.why-band__media { order: -1; }
}

/* ---- Scroll-reveal (front-page.php sections) ----
   theme.js only ARMS elements (adds .reveal--armed right before observing),
   so with JS disabled or IntersectionObserver unsupported, .reveal content
   simply stays at its normal opacity/position — never permanently hidden. */
.reveal.reveal--armed { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.reveal--armed.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.toprated-viewport { animation: none; }
	.toprated-marquee { overflow-x: auto; }
	.toprated-track[aria-hidden="true"] { display: none; }
	.reveal.reveal--armed { transition: none; }
}

/* ============================================================
   CONTENT TEMPLATES — page.php / 404.php / archive.php / single.php.
   README §page.php / §404 / §Nieuws-archief / §Post (blog-single). Phase 5.
   Shared building block: .prose (readable ~66ch column, font-display
   headings) — used by page.php's page-body and single.php's article body.
   ============================================================ */

/* Prose-variant (generieke pagina's via page.php): geen blauwe hero maar de
   lichte prose-kop. Neutraliseert de hub-hero-styling van base .page-head. */
.page-head--prose { position: static; overflow: visible; color: var(--ink); background: none; margin-left: 0; margin-right: 0; padding: 32px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.page-head--prose .page-head__eyebrow { color: var(--blue-700); }
.page-head--prose h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 1.45rem + 1.1vw, 2.2rem); letter-spacing: -.01em; color: var(--ink); }
.page-head--prose p { font-size: 15.5px; color: var(--ink-2); max-width: 62ch; margin-top: 8px; }
.page-head--prose p strong { color: var(--ink); }

.prose { max-width: 66ch; padding: 28px 0 56px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.prose h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 24px;
	letter-spacing: -.01em;
	color: var(--ink);
	margin: 36px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); margin: 28px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose ul,
.prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); }
.prose blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--line-strong);
	font-size: 17px;
	font-style: italic;
	color: var(--ink);
}
.prose img { border-radius: var(--radius); margin: 8px 0; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }

/* ---- 404 ---- */
.error-404 { max-width: 62ch; padding: 56px 0 64px; text-align: left; }
.error-404__eyebrow { font-size: 13px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; }
.error-404__code {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(4rem, 3rem + 4vw, 6.5rem);
	line-height: 1;
	color: var(--blue-100);
	-webkit-text-stroke: 1.5px var(--blue-700);
	margin: 0 0 6px;
}
.error-404__title { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); margin: 0 0 10px; }
.error-404__text { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 28px; max-width: 52ch; }
.error-404__search { max-width: 420px; margin-bottom: 40px; }
.error-404__search .search-form { display: flex; gap: 8px; }
.error-404__search .search-field {
	flex: 1;
	padding: 10px 13px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: 14px;
	background: var(--surface);
	color: var(--ink);
}
.error-404__search .search-submit {
	padding: 10px 17px;
	border: none;
	border-radius: var(--radius);
	background: var(--cta);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.error-404__search .search-submit:hover { background: var(--cta-hover); }
.error-404__links h2 { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); margin: 0 0 12px; }
.error-404__links ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.error-404__links li { border-bottom: 1px solid var(--line); }
.error-404__links a { display: block; padding: 12px 2px; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.error-404__links a:hover { color: var(--accent); text-decoration: none; }

/* ---- Nieuws-archief (archive.php) ---- */
.news-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; padding-bottom: 56px; }
@media (max-width: 900px) { .news-layout { grid-template-columns: 1fr; } }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }

.news-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.news-card__thumb { display: block; aspect-ratio: 16 / 10; background: var(--blue-050); position: relative; }
.news-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-card__thumb-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--blue-800); }
.news-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.news-card__meta { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.news-card__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0; letter-spacing: -.005em; }
.news-card__title a { color: var(--ink); text-decoration: none; }
.news-card__title a:hover { color: var(--accent); text-decoration: none; }
.news-card__excerpt { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; flex: 1; }
.news-card__link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: 4px; }
.news-card__link:hover { text-decoration: none; }

.news-empty { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 40px 32px; margin-top: 20px; }
.news-empty__title { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); margin: 0 0 8px; }
.news-empty p:last-child { font-size: 14.5px; color: var(--ink-2); margin: 0; max-width: 52ch; }

.news-rail__box { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; margin-top: 20px; }
.news-rail__head { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); margin: 0; padding: 16px 18px 12px; }
.news-rail__list { list-style: none; margin: 0; padding: 0; }
.news-rail__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); text-decoration: none; }
.news-rail__link:hover { color: var(--accent); text-decoration: none; }
.news-rail__count { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.news-rail__empty { font-size: 13.5px; color: var(--ink-3); padding: 0 18px 16px; margin: 0; }

/* ---- Blog-single (single.php) ---- */
.article { max-width: 66ch; padding-top: 24px; }
.article__head { padding-bottom: 4px; }
.article__category { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--blue-800); background: var(--blue-100); border-radius: 999px; padding: 4px 10px; text-decoration: none; margin-bottom: 12px; }
.article__category:hover { text-decoration: none; }
.article__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.3rem); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); margin: 0 0 12px; }
.article__byline { font-size: 13.5px; color: var(--ink-3); margin: 0; }
.article__thumb { margin: 24px 0 4px; border-radius: var(--radius-lg); overflow: hidden; }
.article__thumb img { display: block; width: 100%; height: auto; }
.article__body { padding-top: 8px; }

.article__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 32px; padding: 0; }

.article__author { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--line); margin-top: 8px; max-width: 66ch; }
.article__author img { border-radius: 999px; flex-shrink: 0; }
.article__author-name { font-weight: 600; font-size: 14px; color: var(--ink); margin: 0 0 2px; }
.article__author-bio { font-size: 13.5px; color: var(--ink-2); margin: 0; max-width: 54ch; }

.related-posts { margin: 44px 0 56px; }
.related-posts h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px; }

/* ============================================================
   CLAIM / LOGIN / DASHBOARD — mu-plugins/directory-claim.php output
   (README §Dashboard (ingelogd)). Phase 6. The mu-plugin only adds a couple
   of wrapper classes (dirclaim-login, dirclaim-dashboard) and .btn classes on
   its own buttons — every selector below styles markup that already existed.
   ============================================================ */

.dirclaim-notice {
	background: var(--green-tint);
	border: 1px solid var(--green);
	color: var(--green-ink);
	border-radius: var(--radius);
	padding: 12px 16px;
	font-size: 14px;
	margin: 0 0 20px;
	max-width: 66ch;
}

/* Shared field styling for both the claim form and the profile-edit form */
.dirclaim-claim-form,
.dirclaim-edit-form,
.dirclaim-login--out form {
	max-width: 420px;
}
.dirclaim-edit-form { max-width: 560px; }
.dirclaim-claim-form p,
.dirclaim-edit-form p,
.dirclaim-login--out form p {
	margin: 0 0 14px;
}
.dirclaim-claim-form label,
.dirclaim-edit-form label,
.dirclaim-login--out form label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-2);
	margin-bottom: 5px;
}
.dirclaim-claim-form input[type="email"],
.dirclaim-claim-form input[type="text"],
.dirclaim-edit-form input[type="text"],
.dirclaim-edit-form input[type="url"],
.dirclaim-edit-form textarea,
.dirclaim-edit-form select,
.dirclaim-login--out form input[type="text"],
.dirclaim-login--out form input[type="password"] {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: 14px;
	background: var(--surface);
	color: var(--ink);
}
.dirclaim-claim-form input:focus,
.dirclaim-edit-form input:focus,
.dirclaim-edit-form select:focus,
.dirclaim-edit-form textarea:focus,
.dirclaim-login--out form input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}
.dirclaim-hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: -4px 0 14px; }

/* Buttons the mu-plugin already marks class="btn btn-primary" pick up the
   theme's own .btn rules automatically. wp_login_form()'s core submit button
   keeps WP's own classes (button button-primary) — restyle it to match here. */
.dirclaim-login--out .login-remember { font-size: 13px; color: var(--ink-2); margin: 0 0 14px; }
.dirclaim-login--out .login-remember label { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.dirclaim-login--out .login-remember input { width: auto; }
.dirclaim-login--out .login-submit { margin: 4px 0 0; }
.dirclaim-login--out #wp-submit {
	display: inline-flex;
	align-items: center;
	padding: 10px 17px;
	border-radius: var(--radius);
	background: var(--cta);
	color: #fff;
	border: 1px solid transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.dirclaim-login--out #wp-submit:hover { background: var(--cta-hover); }

.dirclaim-login--in p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 8px; }
.dirclaim-login--in a { font-weight: 600; }

/* Upgrade-request form: a single inline button, not a full field form */
.dirclaim-upgrade-form { margin-top: 4px; }

/* Dashboard: one card per claimed profile */
.dirclaim-dashboard { max-width: 640px; padding: 8px 0 40px; }
.dirclaim-profile {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow);
	padding: 22px 24px;
	margin: 0 0 20px;
}
.dirclaim-profile h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 16px; }
.dirclaim-profile > p { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }

/* ---- Claim strip on the profile (single-installateur.php) already scopes
   its own copy of the form styles above; keep those unchanged (Phase 3). ---- */

/* ============================================================
   VOOR INSTALLATEURS — page-voor-installateurs.php (README §Dashboard/Claim,
   "gratis vs Pro"). Two cards, not three-equal-columns; Pro is marked by a
   plain 2px border (--blue-700), never an accent-bar-on-card. Phase 6.
   ============================================================ */

.pricing-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 8px 0 40px; }
@media (max-width: 720px) { .pricing-compare { grid-template-columns: 1fr; } }
/* Losse Pro-pagina: één kaart, gecentreerd en niet volle breedte. */
.pricing-compare--single { grid-template-columns: minmax(0, 460px); justify-content: center; }

.pricing-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	padding: 26px 26px 24px;
}
.pricing-card--pro { border: 2px solid var(--blue-700); }
.pricing-card__head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px; }
.pricing-card--pro .pricing-card__head { border-bottom-color: var(--line); }
.pricing-card__tier { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); margin: 0 0 8px; }
.pricing-card__price { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); margin: 0; }
.pricing-card__sub { font-size: 13.5px; color: var(--ink-3); margin: 6px 0 0; }
.pricing-card__list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pricing-card__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pricing-card__list .check-icon { color: var(--green); flex-shrink: 0; margin-top: 4px; }
.pricing-card .btn { width: 100%; justify-content: center; }

.installer-cta { margin-top: 8px; }

/* ============================================================
   Kennisbank-archief (page-kennis.php)
   ============================================================ */
.page-head__lede { font-size: 15.5px; color: var(--ink-2); max-width: 62ch; margin-top: 8px; }
.kennis-grid-section { padding: 8px 0 8px; }
.kennis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kennis-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: transform .16s ease, box-shadow .16s ease; overflow: hidden; }
.kennis-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kennis-card__link { display: flex; flex-direction: column; gap: 0; height: 100%; text-decoration: none; }
.kennis-card__thumb { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--bg-soft, #f4f7fb); overflow: hidden; }
.kennis-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kennis-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }

/* Plaats-links op de provinciepagina */
.place-links { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.place-links li { margin: 0; display: flex; }
.place-links a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	text-decoration: none;
	transition: border-color .12s ease, background .12s ease;
}
.place-links a:hover { border-color: var(--blue-600); background: #fff; text-decoration: none; }
/* Merk-variant van dezelfde kaart: logo links, naam en aantal rechts. De kaart is
   normaal een kolom; met een logo erbij wordt het een grid van twee kolommen zodat het
   logo niet boven de naam komt te staan. */
.place-links a:has( > .place-links__logo ) { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center; }
.place-links a:has( > .place-links__logo ) .place-links__logo { grid-row: 1 / span 2; }
.place-links__logo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.place-links__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.place-links__city { font-size: 15px; font-weight: 700; color: var(--blue-700); overflow-wrap: anywhere; }
.place-links a:hover .place-links__city { text-decoration: underline; }
/* nowrap: het label mag nooit mid-woord afbreken (gaf ongelijke kaarthoogtes). */
.place-links__meta { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.place-links__count { font-weight: 700; color: var(--blue-700); background: var(--blue-050); border-radius: 999px; padding: 1px 7px; font-size: 11.5px; }

/* Feiten-band + wijken-sectie (CBS-cijfers per plaats). Beide secties krijgen
   dezelfde lichte omkadering, zodat ze als één samenhangend paneel ogen i.p.v.
   drie losse blokken met eigen marges. Kop + tussenruimte op een consistent
   24px-ritme (zie .hub-content, dat de 24px top-marge tussen de secties zet). */
.lfacts,
.lwijken {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 22px 24px;
}
.lfacts h2,
.lwijken h2 { margin: 0 0 14px; }

/* Merk-feiten-sectie: hergebruikt .lfacts__grid en .place-links, alleen het
   tussenkopje boven de provincielijst is nieuw. */
.mfeiten__prov-label { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 18px 0 8px; }

.lfacts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	align-items: stretch;
	gap: 14px;
	margin: 14px 0 0;
}
/* align-items: stretch (default bij grid, hier expliciet) rekt elke kaart uit
   tot de hoogte van de rij. Het getal blijft zo altijd bovenaan uitgelijnd;
   margin-top: auto op het label duwt label (+ eventuele raw-regel) naar de
   onderkant, zodat een kaart met een langere (2-regelige) label niet de hele
   rij scheeftrekt maar zelf de extra ruimte erboven opvult. */
.lfact {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
}
.lfact__num { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--blue-700); line-height: 1.15; }
.lfact__label { font-size: 13px; color: var(--ink-3); margin-top: auto; padding-top: 3px; line-height: 1.45; }
.lfact__raw { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.lfacts__note { margin: 16px 0 0; }
.lfacts__source { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }

.lwijk-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
/* Naam krijgt de vrije ruimte (1fr) zodat een lange wijknaam niet tegen de
   balk botst; balk en percentage houden een vaste kolombreedte, zodat de
   percentages onderling netjes rechts uitlijnen. */
.lwijk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 200px) 44px; align-items: center; gap: 12px; margin: 0; }
.lwijk__naam { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; padding-right: 4px; }
.lwijk__naam a { color: var(--blue-700); }
/* Zelfstandige dorpen die het CBS als wijk rekent: klein label zodat de bezoeker ziet
   dat het geen buurt van de stad is maar een eigen kern met eigen pagina. */
.lwijk__kern { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.lwijk__bar { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); display: block; }
.lwijk__bar span { display: block; height: 100%; border-radius: 999px; background: var(--blue-600); }
.lwijk__pct { font-size: 12.5px; color: var(--ink-3); text-align: right; }

.lprov-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lprov { display: grid; grid-template-columns: minmax(0, 170px) 1fr 48px; align-items: center; gap: 12px; margin: 0; }
.lprov__naam { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.lprov__bar { height: 8px; border-radius: 999px; background: var(--blue-050); display: block; }
.lprov__bar span { display: block; height: 8px; border-radius: 999px; background: var(--blue-600); }
.lprov__pct { font-size: 12.5px; color: var(--ink-3); text-align: right; }
.lprov--zelf .lprov__naam { font-weight: 700; color: var(--blue-700); }
@media (max-width: 560px) { .lprov { grid-template-columns: minmax(0, 120px) 1fr 42px; gap: 8px; } }

@media (max-width: 560px) {
	.lfacts, .lwijken { padding: 18px 16px; }
	.lfacts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lwijk { grid-template-columns: minmax(0, 1fr) minmax(60px, 120px) 36px; gap: 8px; }
}
@media (max-width: 380px) {
	.lfacts__grid { grid-template-columns: minmax(0, 1fr); }
}
.merk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.merk-chip { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--blue-050); color: var(--blue-700); font-size: 14px; font-weight: 600; text-decoration: none; }
.merk-chip:hover { border-color: var(--blue-700); }
.profile-usps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.profile-usps li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; }
.profile-usps li svg { flex: 0 0 auto; margin-top: 3px; color: var(--green-ink); }
.feature-chips { list-style: none; margin: 14px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.feature-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.feature-chip svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--green-ink); }

/* Uitleg per kenmerk (hover + toetsenbord-focus), zelfde vorm als .vbadge__tip.
   Deze chips zijn vaktermen — zie de opmerking in single-installateur.php. */
.feature-chip { position: relative; cursor: help; }
.feature-chip__tip {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 0;
	width: max-content;
	max-width: 280px;
	background: var(--ink);
	color: #fff;
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1.45;
	padding: 10px 13px;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(16, 27, 51, .22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index: 40;
	pointer-events: none;
}
.feature-chip__tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 18px;
	border: 6px solid transparent;
	border-top-color: var(--ink);
}
.feature-chip:hover .feature-chip__tip,
.feature-chip:focus .feature-chip__tip,
.feature-chip:focus-visible .feature-chip__tip { opacity: 1; visibility: visible; transform: translateY(0); }
/* Op een telefoon is er geen hover: de chip krijgt focus bij tik (tabindex=0), dus de
   tooltip opent dan alsnog. Smaller, anders loopt hij het scherm uit. */
@media (max-width: 620px) {
	.feature-chip__tip { max-width: calc(100vw - 48px); }
}
.merk-certs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.merk-cert { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink); margin: 0; }
.merk-cert svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--green-ink); }
.merk-cert__bron { font-size: 12.5px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.merk-cert__bron:hover { color: var(--accent); }
.merk-certs__note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.mcert-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mcert-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 0; }
.mcert-item__naam { font-weight: 600; color: var(--blue-700); text-decoration: none; overflow-wrap: anywhere; }
.mcert-item__naam:hover { text-decoration: underline; }
.mcert-item__niveau { font-size: 12px; font-weight: 700; color: var(--blue-700); background: var(--blue-050); border-radius: 999px; padding: 2px 9px; }
.mcert-item__score { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--ink-2); }
@media (max-width: 560px) { .mcert-item { flex-wrap: wrap; gap: 7px; } .mcert-item__score { margin-left: 0; } }
.social-badges { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.social-badge { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); transition: background .15s, color .15s, border-color .15s; }
.social-badge:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.profile-facts { margin: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.profile-facts__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.profile-facts dt { color: var(--muted); font-size: 14.5px; }
.profile-facts dd { margin: 0; font-weight: 600; text-align: right; }
@media (max-width: 640px) { .profile-facts { grid-template-columns: 1fr; } }
.profile-map { margin: 20px 0 0; }
.profile-map__frame { width: 100%; height: 300px; display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.profile-map__cap { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.profile-map__cap a { color: var(--accent); text-decoration: none; }
.profile-map__cap a:hover { text-decoration: underline; }
@media (max-width: 640px) { .profile-map__frame { height: 220px; } }
.merk-figure { margin: 0 0 22px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); max-height: 280px; }
.merk-figure img { display: block; width: 100%; height: 100%; max-height: 280px; object-fit: cover; }
.kennis-card__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.kennis-card__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.kennis-card__more { font-size: 14px; font-weight: 600; color: var(--accent); margin-top: 2px; }

/* ============================================================
   Over ons (page-over-ons.php)
   ============================================================ */
.about-lead { padding-bottom: 8px; }
.about-section { max-width: 70ch; margin: 0 0 8px; padding: 24px 0; border-top: 1px solid var(--line); }
.about-section > h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem); color: var(--ink); letter-spacing: -.01em; margin: 0 0 14px; }
.about-section--values { max-width: none; }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.value-card { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 20px; }
.value-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.value-card__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0 0 4px; }
.value-card__text { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* ============================================================
   Contact (page-contact.php + directory-contact.php)
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; padding: 8px 0 48px; }
.contact-info { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-soft, var(--surface)); padding: 24px; }
.contact-info h2 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 16px; }
.contact-info__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.contact-info__list li { display: flex; flex-direction: column; gap: 3px; }
.contact-info__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.contact-info__text { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.contact-info__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.contact-info__company { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.contact-info__address { font-style: normal; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
/* Contact-routes (hulp per doelgroep) + formulier-paneel, in Over ons-stijl. */
.contact-routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 28px 0 8px; }
.route-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.route-card__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0; }
.route-card__text { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; flex: 1; }
.route-card__link { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: 2px; }
.route-card__link:hover { text-decoration: underline; }

.contact-layout { margin-top: 8px; }
.contact-form-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 28px; }
.contact-form-wrap h2 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 16px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-form .field__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.contact-form .field__opt { font-weight: 400; color: var(--muted); }
/* Toelichting onder een veld, bv. het bureau-scenario bij het claimformulier. */
.contact-form .field__hint { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form .btn { align-self: flex-start; }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { border-radius: var(--radius); padding: 12px 16px; font-size: 14.5px; margin: 0 0 18px; }
.form-note--ok { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 32%, transparent); }
.form-note--err { background: color-mix(in srgb, #b3261e 10%, transparent); color: #b3261e; border: 1px solid color-mix(in srgb, #b3261e 30%, transparent); }

/* Offerteformulier op het profiel: witte kaart binnen de donkere CTA-band. */
.quote-form { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; max-width: 640px; width: 100%; text-align: left; display: flex; flex-direction: column; gap: 16px; margin-top: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .2); }
.quote-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-form .field { display: flex; flex-direction: column; gap: 6px; }
.quote-form .field__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.quote-form .field__opt { font-weight: 400; color: var(--muted); }
.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="tel"],
.quote-form select,
.quote-form textarea {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.quote-form textarea { resize: vertical; min-height: 90px; }
.quote-form .btn { align-self: flex-start; }
.quote-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote-form__disclaimer { font-size: 12.5px; color: var(--muted); margin: 0; }
.profile-offerte .form-note { max-width: 640px; width: 100%; text-align: left; }

@media (max-width: 860px) {
	.kennis-grid { grid-template-columns: repeat(2, 1fr); }
	.values-grid { grid-template-columns: 1fr; }
	.contact-layout { grid-template-columns: 1fr; }
	.contact-routes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.kennis-grid { grid-template-columns: 1fr; }
	.contact-form__row { grid-template-columns: 1fr; }
	.quote-form__row { grid-template-columns: 1fr; }
	.quote-form { padding: 20px; }
}

/* ============================================================
   Kosten (page-kosten.php) — kostentabel
   ============================================================ */
.cost-section { padding: 28px 0 8px; }
.cost-section > h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); color: var(--ink); letter-spacing: -.01em; margin: 0 0 16px; }
.cost-table { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.cost-table__head,
.cost-table__row { display: grid; grid-template-columns: 1fr 2fr 1.4fr; gap: 16px; padding: 16px 20px; align-items: center; }
.cost-table__head { background: var(--surface-2); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.cost-table__row { border-top: 1px solid var(--line); }
.cost-table__cap { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.cost-table__use { font-size: 14.5px; color: var(--ink-2); }
.cost-table__price { font-weight: 700; color: var(--blue-700); font-size: 15.5px; }
.cost-note { font-size: 14px; color: var(--ink-3); margin: 14px 0 0; max-width: 70ch; }
@media (max-width: 680px) {
	.cost-table__head { display: none; }
	.cost-table__row { grid-template-columns: 1fr; gap: 4px; }
	.cost-table__price { color: var(--blue-700); }
}

/* ============================================================
   Over ons (page-over-ons.php) — verhaal/stats/split/waarden/band/contact
   ============================================================ */
.about-hero { padding: 44px 0 8px; max-width: 46rem; }
.about-hero__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--blue-700); margin-bottom: 12px; }
.about-hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.about-hero__lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 16px 0 0; }

.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin: 32px 0 8px; }
.about-stat { background: var(--surface); padding: 26px 24px; }
.about-stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); color: var(--blue-700); letter-spacing: -.02em; }
.about-stat__label { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }

.about-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding: 52px 0; border-top: 1px solid var(--line); }
.about-split--reverse .about-split__media { order: 2; }
.about-split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 3 / 2; }
.about-split__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-split__text h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); color: var(--ink); letter-spacing: -.01em; margin: 0 0 14px; }
.about-split__text p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; }
.about-split__text p:last-child { margin-bottom: 0; }

.about-values { padding: 52px 0; border-top: 1px solid var(--line); }
.about-values__head { margin-bottom: 22px; }
.about-values__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); color: var(--ink); letter-spacing: -.01em; margin: 0 0 6px; }
.about-values__head p { font-size: 15px; color: var(--ink-3); margin: 0; }

.about-band { margin: 40px 0; background: var(--blue-900); border-radius: var(--radius-lg); }
.about-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 32px 36px; }
.about-band__text h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #fff; margin: 0 0 6px; }
.about-band__text p { font-size: 15px; color: #C3D3F0; margin: 0; max-width: 60ch; }
.about-band .btn { flex-shrink: 0; }

.about-contact { padding: 44px 0 64px; border-top: 1px solid var(--line); }
.about-contact h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); color: var(--ink); margin: 0 0 8px; }
.about-contact > p { font-size: 15.5px; color: var(--ink-2); margin: 0 0 18px; }
.about-contact > p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.about-contact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ink-2); }
.about-contact__label { display: inline-block; min-width: 72px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-right: 8px; }
.about-contact__list a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 780px) {
	.about-stats { grid-template-columns: repeat(2, 1fr); }
	.about-split { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
	.about-split--reverse .about-split__media { order: 0; }
}

/* ============================================================
   Volle-breedte content: pagina's vullen dezelfde breedte als
   header/footer (--maxw, 1180px) i.p.v. een smalle linkerkolom.
   Prose krijgt een ruime 2-koloms tekstopmaak zodat lange regels
   leesbaar blijven op de volle breedte.
   ============================================================ */
.page-body,
.prose,
.hub-content,
.faq,
.about-section,
.article,
.article__author,
.contact-form,
.page-head p,
.page-head--prose p,
.page-head__lede { max-width: none; }

/* ============================================================
   Trust-logo-strip (dirstarter_trust_logos) — branche-keurmerken
   ============================================================ */
.trust-logos { text-align: center; padding: 40px 0 8px; margin: 8px 0; }
.trust-logos__label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); margin: 0 0 10px; }
.trust-logos__intro { font-size: 15px; color: var(--ink-2); max-width: 60ch; margin: 0 auto 26px; line-height: 1.5; }
.trust-logos__row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 18px; }
.trust-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	flex: 0 1 240px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px 26px;
	box-shadow: 0 1px 2px rgba(16,27,51,.04), 0 10px 26px rgba(16,27,51,.06);
}
.trust-badge__logo { display: flex; align-items: center; justify-content: center; height: 56px; }
.trust-badge__logo img { max-height: 56px; max-width: 170px; width: auto; height: auto; }
.trust-badge__cap { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.2; display: flex; flex-direction: column; gap: 3px; }
.trust-badge__cap span { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 560px) { .trust-badge { flex-basis: 100%; flex-direction: row; justify-content: flex-start; text-align: left; gap: 18px; } .trust-badge__cap { align-items: flex-start; } }

/* "Lees ook": vaste 4-koloms rij (los van auto-fill .news-grid) */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 1000px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .related-grid { grid-template-columns: 1fr; } }

/* Claim-blok op profiel + aanmeld-sectie op /voor-installateurs/ */
.claim-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 26px; margin: 28px 0; box-shadow: 0 1px 2px rgba(16,27,51,.04), 0 10px 26px rgba(16,27,51,.05); }
.claim-card__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); margin: 0 0 6px; }
.claim-card__intro { color: var(--ink-2); font-size: 15px; margin: 0 0 16px; }
.claim-card__status { color: var(--ink-2); font-size: 15px; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Bedrijf-claimen: prominente zoekbalk die naar het register (?q=) stuurt. */
.claim-search { max-width: 620px; margin: 0 auto; padding: 4px 24px 8px; }
.claim-search .search-input input[type="search"] { padding: 14px 52px 14px 16px; font-size: 16px; }
.claim-search .search-input__btn { width: 48px; }
.claim-search__hint { color: var(--ink-3); font-size: 14px; margin: 12px 2px 0; line-height: 1.5; }
.claim-search__hint a { color: var(--brand); }
.signup-section { max-width: var(--maxw); margin: 0 auto; padding: 8px 24px 48px; }
.signup-section h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px; }
.signup-section__intro { color: var(--ink-2); font-size: 15px; max-width: 62ch; margin: 0 0 20px; }
.signup-form { max-width: 640px; }

/* CookieYes revisit-icon: default links-onder overlapt content -> rechts-onder */
.cky-btn-revisit-wrapper { left: auto !important; right: 15px !important; }

/* ---- Mobiele header: hamburger + uitklap-drawer (≤1024px) ---- */
.nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 0; }
.nav-toggle:hover { border-color: var(--line-strong); }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.site-header.is-open .nav-toggle__bar { background: transparent; }
.site-header.is-open .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(16,27,51,.08); padding: 10px 24px 20px; z-index: 39; }
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__list a { display: block; padding: 14px 2px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav__list a:hover { color: var(--accent); }
.mobile-nav__list .current-menu-item > a, .mobile-nav__list .current_page_item > a, .mobile-nav__list a[aria-current="page"] { color: var(--accent); }
/* Mobiel: dropdowns als accordion */
.mobile-nav .nav-dd-toggle { width: 100%; justify-content: space-between; padding: 14px 2px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-nav .nav-dd { list-style: none; margin: 0; padding: 4px 0 8px 12px; display: none; }
.mobile-nav .nav-item-dd.is-open .nav-dd { display: block; }
.mobile-nav .nav-item-dd.is-open .nav-dd-chev { transform: rotate(180deg); }
.mobile-nav .nav-dd a { font-weight: 500; font-size: 15px; padding: 11px 2px; }
.mobile-nav .nav-dd__all a { color: var(--accent); font-weight: 600; }
.mobile-nav__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mobile-nav__cta .btn { width: 100%; text-align: center; }
@media (min-width: 1025px) { .mobile-nav { display: none !important; } }

@media (max-width: 1024px) { .nav-toggle { display: inline-flex; } }


/* CookieYes preference-center: past niet op mobiel (vaste 845px) -> viewportbreedte */
@media (max-width: 900px) {
	.cky-modal .cky-preference-center,
	.cky-preference-center { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
}

/* CookieYes-knoppen in merkblauw (override plugin-inline default #1863DC) */
[data-cky-tag="accept-button"],
[data-cky-tag="detail-accept-button"] { background-color: #1553b0 !important; border-color: #1553b0 !important; color: #ffffff !important; }
[data-cky-tag="reject-button"],
[data-cky-tag="settings-button"],
[data-cky-tag="detail-reject-button"],
[data-cky-tag="detail-save-button"] { color: #1553b0 !important; border-color: #1553b0 !important; }

/* ---- Mobiele polish home + directory ----
   Aan het einde zodat deze regels winnen bij gelijke specificiteit (media
   queries verhogen specificiteit niet; latere bron-regel wint). */
@media (max-width: 560px) {
	/* Steps-header ("Zo werkt het" + note) splitste in twee smalle kolommen;
	   nu gestapeld op volle breedte. */
	.steps-section__head { flex-direction: column; align-items: flex-start; gap: 6px; }
	.steps-section__head h2 { font-size: 23px; }
	/* Reviews-sectie aggregaat: cijfer+meter stonden rechts onder een links-
	   uitgelijnd label (scheef). Alles links uitlijnen op mobiel. */
	.reviews-section__score { align-items: flex-start; }
	.reviews-section__intro h2 { font-size: 23px; }
}

/* ===== TBI-score (eigen rating) ===== */
.tbi-hero{background:linear-gradient(150deg,#12336f,var(--brand-dark,#0f2f78));color:#fff;border-radius:16px;padding:18px 20px;width:236px;text-align:center;box-shadow:0 10px 26px rgba(15,47,120,.28)}
.tbi-hero__label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a9c1ec}
.tbi-hero__num{font-size:52px;font-weight:800;line-height:1;margin:6px 0 2px}
.tbi-hero__num span{font-size:20px;font-weight:600;color:#c3d4f0}
.tbi-hero__meter{height:11px;border-radius:6px;background:rgba(255,255,255,.16);position:relative;margin:11px 2px 0;overflow:hidden}
.tbi-hero__meter i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#3bbd6d,#63d98c)}
.tbi-hero__sub{font-size:11.5px;color:#bfd0ee;margin-top:10px;line-height:1.4}
.tbi-hero__how{display:inline-block;margin-top:7px;font-size:11.5px;color:#fff;border-bottom:1px dotted #7fa1d6;text-decoration:none}
.rtbi{text-align:center;width:96px;flex:none}
.rtbi__lab{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#5b6b86);margin-bottom:5px;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.rtbi__info{position:relative;display:inline-flex;align-items:center;color:var(--muted,#5b6b86);line-height:0}
.rtbi__info:hover,.rtbi__info:focus-visible{color:var(--accent)}
.rtbi__info .info-icon{display:block}
.rtbi__tip{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:max-content;max-width:238px;background:var(--ink);color:#fff;font-family:var(--font-body);font-weight:500;font-size:12.5px;line-height:1.45;text-transform:none;letter-spacing:normal;text-align:left;padding:10px 13px;border-radius:10px;box-shadow:0 10px 28px rgba(16,27,51,.22);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:40;pointer-events:none}
.rtbi__tip strong{font-weight:700}
.rtbi__tip::after{content:'';position:absolute;bottom:100%;right:11px;border:6px solid transparent;border-bottom-color:var(--ink)}
.rtbi__info:hover .rtbi__tip,.rtbi__info:focus .rtbi__tip,.rtbi__info:focus-visible .rtbi__tip{opacity:1;visibility:visible;transform:translateY(0)}
.rtbi__num{font-size:26px;font-weight:800;color:var(--brand-dark,#0f2f78);line-height:1}
.rtbi__num span{font-size:12px;color:var(--muted,#5b6b86);font-weight:600}
.rmeter{height:5px;border-radius:3px;background:#dbe3f0;position:relative;margin-top:8px;overflow:hidden}
.rmeter i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#7bb79a}
/* N=0 (nog geen reviews): geen kaal 0,0 tonen, wel de score in de DB voor ranking. */
.rtbi__none{font-size:12.5px;font-weight:600;color:var(--muted,#5b6b86);line-height:1.3;margin-top:2px}
.tbi-hero__none{font-size:15px;font-weight:600;color:#c3d4f0;margin:10px 0 2px;line-height:1.4}
.review-sources__lead{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#5b6b86);margin:0 0 10px}
@media (max-width:640px){.tbi-hero{width:100%}}

/* Profiel-hero: TBI-score-kaart + kwalificatie-badges op één rij (badges niet
   meer wees onder de kaart, dode ruimte rechts van de kaart opgevuld). */
.profile-header__scorerow { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 4px; }
.profile-header__scorerow .profile-badges { margin-top: 0; flex: 1 1 220px; }
@media (max-width: 900px) { .profile-header__scorerow { gap: 16px; } .profile-header__scorerow .profile-badges { flex-basis: 100%; } }

/* Profiel-hero indeling B: stat-strip met TBI-score als eerste cel. Vervangt de
   grote score-kaart + losse info-strip. Meter bewust subtiel (dun, gedempt). */
.profile-statstrip { display: flex; flex-wrap: wrap; margin-top: 22px; background: var(--blue-050); border-radius: 14px; overflow: hidden; }
.profile-statstrip__item { flex: 1; min-width: 132px; padding: 15px 22px; border-left: 1px solid var(--line); }
.profile-statstrip__item:first-child { border-left: 0; }
.profile-statstrip__item--score { background: #e7eefb; min-width: 152px; }
.profile-statstrip__label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.profile-statstrip__value { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 5px; overflow-wrap: anywhere; }
.profile-statstrip__value a { color: var(--ink); text-decoration: none; }
.profile-statstrip__value a:hover { color: var(--accent); }
.profile-statstrip__score { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--blue-800); line-height: 1; margin-top: 4px; }
.profile-statstrip__score span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.profile-statstrip__how { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--brand); text-decoration: none; border-bottom: 1px dotted; }
.stat-meter { height: 5px; max-width: 104px; border-radius: 3px; background: #dbe3f0; position: relative; overflow: hidden; margin-top: 9px; }
.stat-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #7bb79a; }
@media (max-width: 600px) { .profile-statstrip__item { flex-basis: 50%; } }

/* Profiel-hero (optie B): apart TBI-score-blok + 2-koloms feiten-box. Toont de
   rijkdom van volle profielen netjes; schaalt naar weinig data (minder rijen). */
.profile-hero-stats { display: flex; gap: 16px; margin-top: 20px; align-items: stretch; flex-wrap: wrap; }
.profile-scorebox { flex: none; width: 172px; background: linear-gradient(155deg, #12336f, var(--brand-dark, #0f2f78)); color: #fff; border-radius: 14px; padding: 18px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.profile-scorebox__label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a9c1ec; }
.profile-scorebox__num { font-size: 40px; font-weight: 800; line-height: 1; margin: 6px 0 10px; }
.profile-scorebox__num span { font-size: 16px; color: #c3d4f0; font-weight: 600; }
.profile-scorebox__meter { height: 6px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; position: relative; margin: 0 4px; }
.profile-scorebox__meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #6bb392; }
.profile-scorebox__how { margin-top: 10px; font-size: 11.5px; color: #fff; text-decoration: none; border-bottom: 1px dotted #7fa1d6; display: inline-block; }
/* Zonder reviews geen cijfer: tekst i.p.v. een getal, zelfde plek en breedte zodat de
   hero-rij niet verspringt tussen profielen mét en zonder beoordeling. */
/* Hint onder een afgeknepen beschrijving op een ongeclaimd profiel. */
.profile-claim-hint { font-size: 13.5px; color: var(--muted, #5b6b86); margin: 10px 0 0; }
.profile-claim-hint a { color: var(--brand, #1553b0); }
.profile-scorebox__none { font-size: 15px; font-weight: 700; color: #c3d4f0; line-height: 1.35; margin: 10px 0 2px; }
.profile-facts-grid { flex: 1; min-width: 300px; background: var(--blue-050); border-radius: 14px; padding: 4px 22px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.profile-facts-grid__row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.profile-facts-grid dt { color: var(--ink-3); font-size: 13.5px; }
.profile-facts-grid dd { margin: 0; font-weight: 700; font-size: 14px; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.profile-facts-grid dd a { color: var(--ink); text-decoration: none; }
.profile-facts-grid dd a:hover { color: var(--accent); }
@media (max-width: 720px) { .profile-facts-grid { grid-template-columns: 1fr; } .profile-scorebox { width: 100%; } }

/* Badge-generator (/badge/) */
.badge-gen__back { margin: 0 0 8px; }
.badge-gen__form { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 20px; }
.badge-gen__form input { flex: 1; min-width: 220px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 15px; }
.badge-gen__results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.badge-gen__results a { display: block; padding: 12px 14px; background: var(--blue-050); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; }
.badge-gen__results a:hover { border-color: var(--brand); color: var(--brand); }
.badge-gen__variant { margin: 22px 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
.badge-gen__variant h3 { margin: 0 0 12px; font-size: 15px; }
.badge-gen__preview { padding: 20px; background: #f4f7fb; border-radius: 12px; display: flex; justify-content: center; }
.badge-gen__preview--dark { background: #0b224f; }
.badge-gen__label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 6px; }
.badge-gen__code { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink-2); resize: vertical; }

/* Voorbeeld-badges op /tbi-score/ */
.tbi-badge-examples { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin: 18px 0 24px; }
.tbi-badge-examples figure { margin: 0; padding: 18px; background: #f4f7fb; border-radius: 14px; }
.tbi-badge-examples figcaption { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.tbi-badge-examples__dark { background: #0b224f; }
.tbi-badge-examples__dark figcaption { color: #9db0cf; }


/* ===== Homepage redesign (immersief blauw, trustoo-stijl) ===== */
:root { --band: #E7EDF9; }   /* duidelijk zichtbare licht-blauwe band, alterneert met wit */

/* ---- Header (benadering) ---- */

/* ---- Immersief blauw hero-vlak ---- */
.xhero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(46,125,87,.28), transparent 60%),
    radial-gradient(900px 600px at 8% 108%, rgba(30,98,199,.55), transparent 55%),
    linear-gradient(158deg, var(--blue-900) 0%, var(--blue-800) 46%, var(--blue-700) 100%);
  overflow: hidden;
}
.xhero::after { /* subtiele textuur/vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 0%, transparent 60%, rgba(15,47,120,.35));
}
.xhero__in { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 62px 24px 40px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.xbadge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #eaf1ff; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; backdrop-filter: blur(4px); }
.xbadge .dot { width: 8px; height: 8px; border-radius: 50%; background: #63d98c; box-shadow: 0 0 0 4px rgba(99,217,140,.25); }
.xhero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.5rem); line-height: 1.04; letter-spacing: -.02em; margin: 18px 0 0; color: #fff; }
.xhero h1 .accent { color: #ffd9be; }
.xhero__lede { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: #d5e1f7; max-width: 33ch; }

/* Zoekbalk-centerpiece */
.xsearch { margin: 24px 0 0; background: #fff; border-radius: 14px; padding: 8px; display: flex; gap: 8px; box-shadow: 0 24px 60px -24px rgba(6,20,55,.6); }
.xsearch input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--ink); padding: 0 8px 0 14px; background: transparent; }
.xsearch input::placeholder { color: var(--ink-3); }
.xsearch button { border: 0; cursor: pointer; background: var(--cta); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 15.5px; padding: 13px 22px; border-radius: 9px; display: inline-flex; align-items: center; gap: 8px; }
.xsearch button:hover { background: var(--cta-hover); }
.xchips { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.xchips span { font-size: 13px; color: #b9c9ea; margin-right: 2px; }
.xchip { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #eaf1ff; padding: 6px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.xchip:hover { background: rgba(255,255,255,.2); }

/* Foto + zwevende rating-badge */
.xhero__media { position: relative; }
.xhero__photo { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 30px 70px -28px rgba(6,20,55,.7); border: 1px solid rgba(255,255,255,.12); }
.xhero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xrating { position: absolute; left: -22px; bottom: 26px; background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 20px 44px -18px rgba(6,20,55,.5); display: flex; align-items: center; gap: 12px; }
.xrating__num { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--ink); line-height: 1; }
.xrating__stars { color: #1E62C7; font-size: 15px; letter-spacing: 1px; }
.xrating__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.xfloat2 { position: absolute; right: -14px; top: 22px; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 16px 36px -16px rgba(6,20,55,.45); display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.xfloat2 .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--green-tint); color: var(--green-ink); display: grid; place-items: center; }

/* Stat-strip op het blauw */
.xstats { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 4px 24px 46px; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.xstat { border-left: 2px solid rgba(255,255,255,.18); padding-left: 16px; }
.xstat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; color: #fff; line-height: 1; }
.xstat span { font-size: 13.5px; color: #b9c9ea; }
.xstat.green b { color: #8ff0b6; }

/* ---- Trust-strip (icoon + tekst, subtiele kleur) ---- */
.xtrust { max-width: var(--maxw); margin: -26px auto 46px; position: relative; z-index: 2; padding: 0 24px; }
.xtrust__grid { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(4,1fr); }
.xtrust__item { display: flex; align-items: center; gap: 12px; padding: 20px 22px; }
.xtrust__item + .xtrust__item { border-left: 1px solid var(--line); }
.xtrust__ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.xtrust__ic svg { width: 20px; height: 20px; }
.ic-blue { background: var(--blue-100); color: var(--blue-700); }
.ic-green { background: var(--green-tint); color: var(--green-ink); }
.ic-amber { background: #fbecdc; color: var(--cta); }
.xtrust__t { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.xtrust__s { font-size: 12.5px; color: var(--ink-3); }

/* ---- Bewegende marquee: top-beoordeelde installateurs ---- */
.xmq { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 40px 0; overflow: hidden; }
.xmq__head { max-width: var(--maxw); margin: 0 auto 16px; padding: 0 24px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.xmq__head h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.xmq__head span { font-size: 13.5px; color: var(--ink-3); }
.xmq__viewport { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.xmq__track { display: flex; gap: 14px; width: max-content; animation: xmarquee 46s linear infinite; padding: 4px 0; }
.xmq__viewport:hover .xmq__track { animation-play-state: paused; }
@keyframes xmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.xmq__chip { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 16px; box-shadow: var(--shadow); flex: none; }
.xmq__logo { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--blue-050); display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 700; color: var(--blue-800); font-size: 14px; }
.xmq__nm { font-weight: 700; font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.xmq__loc { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.accu { display: inline-flex; align-items: center; }
.accu i { width: 8px; height: 15px; border-radius: 2px; background: var(--green); display: block; margin-right: 2px; }
.accu .nub { width: 3px; height: 7px; background: #c4cede; border-radius: 0 2px 2px 0; }
.xmq__sc { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .xmq__track { animation: none; } }

/* ---- Provincie-tegels met kleur + icoon (witte band) ---- */
.xprov { background: var(--surface); }
.xprov__in { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px; }
.xprov__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.xprov__head h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.xprov__head p { margin: 0; color: var(--ink-3); font-size: 15px; }
.xlink { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-700); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.xlink:hover { color: var(--blue-900); }
.xlink svg { width: 16px; height: 16px; }
.xprov__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.xprov__foot { margin-top: 22px; text-align: center; }
/* Secundaire provincie-sectie: kleiner/lichter dan de primaire steden-sectie (steden-first). */
.xprov--secondary .xprov__in { padding-top: 8px; }
.xprov--secondary .xprov__head h2 { font-size: 22px; }
.xprov--secondary .xtile { padding: 12px 15px; }
.xprov--secondary .xtile__pin { width: 30px; height: 30px; border-radius: 9px; }
.xprov--secondary .xtile__name { font-size: 14.5px; }
.xbrand { background: #fff; }
/* Scheidingslijn tussen de steden- en merken-sectie op de home. */
.xdivider { border-top: 1px solid var(--line); margin: 8px 0; }
/* Sectie-kleuren alterneren zodat opeenvolgende blokken niet in elkaar overlopen:
   steden (surface) → provincies (#fff) → merken (surface) → xtop (band). */
.xprov--secondary { background: #fff; }
/* Stadsvlag i.p.v. pin-icoon op de steden-tegels. */
/* Stadsvlag: alleen de vlag, geen achtergrond/box. */
.xtile__flag { flex: none; width: 38px; height: 38px; display: grid; place-items: center; }
.xtile__flag img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 3px; }
/* Merklogo op de merk-landingspagina: logo + titel als één header-rij. */
.merk-head-row { display: flex; align-items: center; gap: 18px; }
.merk-head-row__text { min-width: 0; }
.merk-hero-logo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 18px -12px rgba(16,27,51,.35); }
.merk-hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@media (max-width: 560px) { .merk-head-row { gap: 13px; } .merk-hero-logo { width: 52px; height: 52px; padding: 8px; } }
.xbrand__in { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px; }
.xbrand__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.xbrand__head h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.xbrand__head p { margin: 0; color: var(--ink-3); font-size: 15px; }
.xbrand__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.xbrand__chip { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.xbrand__chip:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(16,27,51,.3); border-color: var(--blue-600); }
.xbrand__name { font-weight: 700; color: var(--ink); font-size: 15px; }
.xbrand__count { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--blue-700); background: var(--blue-050); border-radius: 999px; padding: 3px 10px; }

/* ---- Hoogst beoordeeld (installateur-kaarten, witte gap op --bg) ---- */
.xtop { background: var(--band); border-top: 1px solid var(--line); }
.xtop__in { max-width: var(--maxw); margin: 0 auto; padding: 58px 24px; }
.xtop__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.xtop__head .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); }
.xtop__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,1.3rem+1.2vw,2.1rem); letter-spacing: -.02em; color: var(--ink); margin: 6px 0 4px; }
.xtop__head p { margin: 0; color: var(--ink-3); font-size: 14.5px; }
.xtop__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.xcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; position: relative; }
.xcard__flag { position: absolute; top: 0; right: 20px; transform: translateY(-50%); background: var(--cta); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.xcard__top { display: flex; align-items: center; gap: 13px; }
.xcard__logo { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--blue-050); display: grid; place-items: center; flex: none; overflow: hidden; }
.xcard__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.xcard__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.2; }
.xcard__loc { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.xcard__score { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--blue-050); border-radius: 12px; }
.xcard__num { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--blue-900); line-height: 1; }
.xcard__num span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.xcard__lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.xcard__meter { height: 6px; border-radius: 4px; background: #dfe7f4; overflow: hidden; margin-top: 6px; }
.xcard__meter i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg,var(--green),#63D98C); }
.xcard__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xcard__chip { font-size: 12px; font-weight: 600; color: var(--green-ink); background: var(--green-tint); border-radius: 999px; padding: 4px 10px; }
.xcard__btn { margin-top: auto; }
.xcard__btn a { display: block; text-align: center; background: #fff; border: 1px solid var(--line-strong); color: var(--ink); font-weight: 700; font-size: 14.5px; padding: 11px; border-radius: 9px; text-decoration: none; }
.xcard__btn a:hover { border-color: var(--blue-600); color: var(--blue-700); }
.xtile { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.xtile:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(16,27,51,.3); border-color: var(--blue-600); }
.xtile__pin { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(150deg, var(--blue-600), var(--blue-800)); color: #fff; display: grid; place-items: center; flex: none; }
.xtile__pin svg { width: 19px; height: 19px; }
.xtile__name { font-weight: 700; color: var(--ink); font-size: 15.5px; }
.xtile__count { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--blue-700); background: var(--blue-050); border-radius: 999px; padding: 3px 10px; }

/* ---- Reviews-carousel (echte quotes) ---- */
.xrev { background: var(--surface); border-top: 1px solid var(--line); }
.xrev__in { max-width: var(--maxw); margin: 0 auto; padding: 58px 24px; }
.xrev__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.xrev__head .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); }
.xrev__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,1.3rem+1.2vw,2.1rem); letter-spacing: -.02em; color: var(--ink); margin: 6px 0 6px; }
.xrev__agg { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.xrev__agg b { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); }
.xrev__arrows { display: flex; gap: 8px; }
.xrev__arrows button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.xrev__arrows button:hover { border-color: var(--blue-600); color: var(--blue-700); }
.xrev__arrows svg { width: 18px; height: 18px; }
.xrev__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.xrev__row { display: flex; gap: 18px; width: max-content; padding: 4px 2px 14px; animation: xmarquee 70s linear infinite; }
.xrev__viewport:hover .xrev__row { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .xrev__row { animation: none; flex-wrap: wrap; width: auto; } }
.xrevcard { flex: 0 0 340px; max-width: 340px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.xrevcard__q { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: .6; color: var(--blue-100); }
.xrevcard__stars { color: #1E62C7; letter-spacing: 2px; font-size: 15px; }
.xrevcard__body { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.xrevcard__foot { margin-top: auto; display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--line); }
.xrevcard__av { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-050); color: var(--blue-800); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; flex: none; }
.xrevcard__nm { font-weight: 700; color: var(--ink); font-size: 14px; }
.xrevcard__meta { color: var(--ink-3); font-size: 12.5px; }

/* ---- Slot-CTA-band (bookend met hero) ---- */
.xcta { position: relative; overflow: hidden; color: #fff; background:
  radial-gradient(800px 380px at 85% -20%, rgba(46,125,87,.30), transparent 60%),
  radial-gradient(700px 460px at 10% 120%, rgba(30,98,199,.5), transparent 55%),
  linear-gradient(150deg, var(--blue-900), var(--blue-700)); }
.xcta__in { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: 66px 24px; text-align: center; }
.xcta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem,1.4rem+1.8vw,2.7rem); letter-spacing: -.02em; line-height: 1.08; color: #fff; margin: 0 0 12px; }
.xcta h2 .accent { color: #ffd9be; }
.xcta p { margin: 0 auto 26px; max-width: 46ch; font-size: 17px; line-height: 1.6; color: #d5e1f7; }
.xcta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.xcta .btn-white, .xcta .btn-primary { box-shadow: 0 16px 40px -18px rgba(6,20,55,.6); }

/* ---- Keurmerken-strook ---- */
.xkeur { background: var(--band); border-top: 1px solid var(--line); }
.xkeur__in { max-width: 980px; margin: 0 auto; padding: 56px 24px; text-align: center; }
.xkeur__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); }
.xkeur h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,1.3rem+1.2vw,2.1rem); letter-spacing: -.02em; color: var(--ink); margin: 8px 0 8px; }
.xkeur p { margin: 0 auto; max-width: 56ch; color: var(--ink-2); font-size: 15.5px; }
.xkeur__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 30px; text-align: left; }
.xkeurcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 16px; }
.xkeurcard__logo { width: 76px; height: 48px; flex: none; display: grid; place-items: center; }
.xkeurcard__logo img { max-width: 100%; max-height: 48px; width: auto; object-fit: contain; }
.xkeurcard b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.xkeurcard span { font-size: 13px; color: var(--ink-3); }

/* ---- Kosten + kennis (twee kaarten) ---- */
.xinfo { background: var(--band); border-top: 1px solid var(--line); }
.xinfo__in { max-width: var(--maxw); margin: 0 auto; padding: 58px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.xinfocard { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.xinfocard__head { padding: 24px 26px 18px; }
.xinfocard__head h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px; }
.xinfocard__head p { margin: 0; color: var(--ink-3); font-size: 14.5px; }
.xprice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 26px; border-top: 1px solid var(--line); }
.xprice__kwh b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.xprice__kwh span { font-size: 13px; color: var(--ink-3); }
.xprice__amt { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); white-space: nowrap; }
.xinfo__link { display: inline-flex; align-items: center; gap: 6px; padding: 16px 26px; border-top: 1px solid var(--line); color: var(--blue-700); font-weight: 700; font-size: 15px; text-decoration: none; }
.xinfo__link:hover { color: var(--blue-900); }
.xinfo__link svg { width: 16px; height: 16px; }
.xqa { padding: 15px 26px; border-top: 1px solid var(--line); }
.xqa h3 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink); margin: 0 0 5px; }
.xqa p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* ---- Zo werkt het (3 stappen) ---- */
.xhow { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.xhow__in { max-width: var(--maxw); margin: 0 auto; padding: 58px 24px; }
.xhow__head { text-align: center; max-width: 620px; margin: 0 auto 34px; }
.xhow__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); }
.xhow__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); letter-spacing: -.02em; color: var(--ink); margin: 8px 0 8px; }
.xhow__head p { margin: 0; color: var(--ink-2); font-size: 16px; }
.xhow__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.xstep { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow); position: relative; }
.xstep__num { position: absolute; top: -16px; left: 24px; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(150deg, var(--blue-600), var(--blue-800)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; display: grid; place-items: center; box-shadow: 0 8px 18px -8px rgba(21,83,176,.7); }
.xstep__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-050); color: var(--blue-700); display: grid; place-items: center; margin: 14px 0 14px; }
.xstep__ic svg { width: 24px; height: 24px; }
.xstep h3 { font-family: var(--font-display); font-weight: 700; font-size: 18.5px; color: var(--ink); margin: 0 0 7px; }
.xstep p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.xhow__cta { text-align: center; margin-top: 32px; }

.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.btn-white { background: #fff; color: var(--blue-800); }
.xhero__ctas { margin: 18px 0 0; display: flex; gap: 12px; }

@media (max-width: 900px) {
  .xhero__in { grid-template-columns: 1fr; gap: 30px; padding: 40px 20px 30px; }
  .xhero__media { order: -1; }
  /* Drie items (plaats/provincie/merk) krijgen drie kolommen; in twee kolommen
     bleef er een wees op de tweede rij staan. Vier items (homepage-hero, hub)
     blijven 2x2, want daar levert drie kolommen juist een wees op. */
  .xstats { grid-template-columns: repeat(3,1fr); gap: 22px 14px; }
  .xstats:has( > .xstat:nth-child(4) ) { grid-template-columns: repeat(2,1fr); gap: 22px 18px; }
  .xtrust__grid { grid-template-columns: 1fr 1fr; }
  .xtrust__item:nth-child(3) { border-left: 0; }
  .xtrust__item:nth-child(odd) { border-left: 0; }
  .xprov__grid { grid-template-columns: 1fr 1fr; }
  .xrating { left: 8px; }
  .xhow__grid { grid-template-columns: 1fr; gap: 26px; }
  .xtop__grid { grid-template-columns: 1fr; }
  .xkeur__grid { grid-template-columns: 1fr; }
  .xinfo__in { grid-template-columns: 1fr; }
}

/* Homepage-banden full-bleed: main.wrap beperkt tot 1180px, dus banden uit de
   content-kolom trekken zodat de achtergrondkleuren de volle breedte vullen.
   De inner-containers (.x*__in) houden hun eigen max-width + centrering. */
.xhero, .xmq, .xprov, .xbrand, .xtop, .xhow, .xinfo, .xrev, .xkeur, .xcta {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
@media (max-width: 900px) { .xbrand__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .xbrand__grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Homepage trust-strip op smalle schermen: 2 kolommen liepen van de kaart af →
   stapel naar 1 kolom met een scheidingslijn tussen de items. */
@media (max-width: 560px) {
	.xtrust__grid { grid-template-columns: 1fr; }
	.xtrust__item { border-left: 0; }
	.xtrust__item + .xtrust__item { border-left: 0; border-top: 1px solid var(--line); }
}

/* Provincie-tegels op mobiel: kolommen mochten niet krimpen (1fr = min-content)
   → rechterkolom liep van 't scherm. minmax(0,1fr) laat ze krimpen + naam wrapt. */
@media (max-width: 560px) {
	.xprov__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.xtile { min-width: 0; gap: 10px; padding: 14px; }
	.xtile__name { min-width: 0; overflow-wrap: anywhere; font-size: 14.5px; }
	.xtile__count { flex: none; }
}
/* Home: blauwe slot-CTA sluit direct op de footer aan (footer-marge gaf --bg-strip). */
.home .site-footer { margin-top: 0; }
/* Elke pagina die eindigt op een full-bleed band (CTA/contact) sluit strak op
   de footer aan: anders geeft de footer-marge een witte strook. main.wrap en
   footer zijn broers, dus :has + adjacent selector pakt dit generiek. */
main.wrap:has(> .xcta:last-child) + .site-footer,
main.wrap:has(> .xcontact:last-child) + .site-footer,
main.wrap:has(> .xkeur:last-child) + .site-footer { margin-top: 0; }

/* Provincie-tegels op mobiel: 2 kolommen bleven te krap (namen braken lelijk).
   Nu top-5 grootste onder elkaar (1 kolom, volle breedte) + knop naar de directory. */
@media (max-width: 560px) {
	.xprov__grid { grid-template-columns: 1fr; gap: 10px; }
	.xtile { padding: 15px 18px; gap: 13px; }
	.xtile__name { overflow-wrap: normal; font-size: 15.5px; }
	.xtile:nth-child(n+6) { display: none; }
	.xprov__foot { margin-top: 16px; }
	.xprov__foot .xlink { display: flex; justify-content: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 14px; background: #fff; }
}

/* ===== Content-pagina's: immersief blauw page-hero + secties (Over ons e.a.) ===== */
.xphero { position: relative; overflow: hidden; color: #fff; background:
	radial-gradient(1000px 480px at 85% -10%, rgba(46,125,87,.26), transparent 60%),
	radial-gradient(850px 560px at 6% 115%, rgba(30,98,199,.5), transparent 55%),
	linear-gradient(158deg, var(--blue-900) 0%, var(--blue-800) 48%, var(--blue-700) 100%); }
.xphero__in { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 40px 24px 42px; }
.xphero__crumbs { font-size: 13.5px; color: #aebfe3; margin-bottom: 20px; }
.xphero__crumbs a { color: #dbe6fb; text-decoration: none; }
.xphero__crumbs a:hover { text-decoration: underline; }
.xphero__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffd9be; }
.xphero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.06; letter-spacing: -.02em; margin: 10px 0 0; color: #fff; max-width: 20ch; }
.xphero__lede { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: #d5e1f7; max-width: 62ch; }
.xphero .xstats { padding: 34px 0 0; }
/* Stat-strip in de hub-hero: uitgelijnd op de content-kolom, binnen de blauwe kop. */
.page-head .xstats { max-width: none; margin: 0; padding: 20px 0 2px; }

/* Drie kolommen op telefoonbreedte: cijfer en label moeten in ~105px passen. */
@media (max-width: 560px) {
  .xstat { padding-left: 11px; }
  .xstat b { font-size: 21px; }
  .xstat span { font-size: 12px; line-height: 1.35; display: block; }
  .xstats:has( > .xstat:nth-child(4) ) .xstat b { font-size: 26px; }
}

.xsplit { background: var(--surface); }
.xsplit.is-band { background: var(--band); }
.xsplit__in { max-width: var(--maxw); margin: 0 auto; padding: 60px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.xsplit--rev .xsplit__media { order: 2; }
.xsplit__media img { width: 100%; border-radius: 16px; box-shadow: var(--shadow); display: block; aspect-ratio: 3/2; object-fit: cover; }
.xsplit__text h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,1.3rem+1.2vw,2.1rem); letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.xsplit__text p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; }

.xvalues { background: var(--surface); }
.xvalues__in { max-width: var(--maxw); margin: 0 auto; padding: 60px 24px; }
.xvalues__head { text-align: center; margin: 0 auto 34px; max-width: 560px; }
.xvalues__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,1.3rem+1.2vw,2.1rem); letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.xvalues__head p { margin: 0; color: var(--ink-2); font-size: 16px; }
.xvalues__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.xvaluecard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow); display: flex; gap: 16px; }
.xvaluecard__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.xvaluecard__ic svg { width: 22px; height: 22px; }
.xvaluecard h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 6px; }
.xvaluecard p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.xcontact { background: var(--band); }
.xcontact__in { max-width: var(--maxw); margin: 0 auto; padding: 52px 24px; }
.xcontact h2 { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--ink); margin: 0 0 8px; }
.xcontact__in > p { color: var(--ink-2); font-size: 16px; margin: 0 0 20px; }
.xcontact a { color: var(--blue-700); }
.xcontact__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.xcontact__list li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 14.5px; color: var(--ink); }
.xcontact__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }

/* full-bleed voor de content-pagina-secties */
.xphero, .xsplit, .xvalues, .xcontact { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

@media (max-width: 760px) {
	.xsplit__in { grid-template-columns: 1fr; gap: 26px; padding: 44px 20px; }
	.xsplit--rev .xsplit__media { order: -1; }
	.xvalues__grid { grid-template-columns: 1fr; }
	.xcontact__list { grid-template-columns: 1fr; }
}

/* ===== Kennis-pagina (nieuwe stijl): artikelraster + FAQ-accordeon ===== */
.xkennis__in { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px; }
.xkennis__head { margin: 0 auto 30px; max-width: 620px; text-align: center; }
.xkennis__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,1.3rem+1.2vw,2.1rem); letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.xkennis__head p { margin: 0; color: var(--ink-2); font-size: 16px; }
.xkgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.xkcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.xkcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #c9d6ef; }
.xkcard a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.xkcard__thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-2); }
.xkcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.xkcard:hover .xkcard__thumb img { transform: scale(1.04); }
.xkcard__tag { position: absolute; left: 12px; top: 12px; z-index: 1; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(15,42,92,.72); backdrop-filter: blur(3px); padding: 5px 10px; border-radius: 999px; }
.xkcard__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.xkcard__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.28; color: var(--ink); margin: 0 0 8px; }
.xkcard__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; }
.xkcard__more { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--blue-700); }

.xfaq { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.xfaq__in { max-width: 820px; margin: 0 auto; padding: 60px 24px; }
.xfaq__head { text-align: center; margin: 0 0 28px; }
.xfaq__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,1.3rem+1.2vw,2.1rem); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.xfaq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; overflow: hidden; }
.xfaq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink); position: relative; }
.xfaq summary::-webkit-details-marker { display: none; }
.xfaq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 11px; height: 11px; border-right: 2.4px solid var(--blue-600); border-bottom: 2.4px solid var(--blue-600); transform: translateY(-65%) rotate(45deg); transition: transform .2s ease; }
.xfaq details[open] summary::after { transform: translateY(-35%) rotate(-135deg); }
.xfaq details p { margin: 0; padding: 0 20px 20px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }

.xkennis, .xfaq { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

@media (max-width: 900px) { .xkgrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .xkgrid { grid-template-columns: 1fr; } .xkennis__in { padding: 44px 20px; } }

/* ===== Kosten-pagina (nieuwe stijl): richtprijzenkaart ===== */
.xkosten { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.xkosten__in { max-width: 680px; margin: 0 auto; padding: 56px 24px; }
.xkosten__head { text-align: center; margin: 0 0 26px; }
.xkosten__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,1.3rem+1.2vw,2.1rem); letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.xkosten__head p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.xkosten .xinfocard { max-width: none; }
.xkosten .xprice:first-child { border-top: 0; }
.xkosten__note { text-align: center; color: var(--ink-3); font-size: 13.5px; line-height: 1.6; margin: 16px auto 0; max-width: 60ch; }
.xkosten { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Profiel-overzicht: tekst links, foto-carrousel rechts (als er foto's zijn) */
.profile-overview { display: block; }
.profile-overview--has-media { display: grid; grid-template-columns: 1fr 40%; gap: 32px; align-items: start; }
@media (max-width: 860px) { .profile-overview--has-media { grid-template-columns: 1fr; } }
.profile-overview__main { min-width: 0; }

.gallery-carousel { position: relative; border-radius: 16px; overflow: hidden; background: #0b224f; border: 1px solid var(--line); }
.gallery-carousel__viewport { overflow: hidden; }
.gallery-carousel__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.gallery-carousel__slide { flex: 0 0 100%; margin: 0; aspect-ratio: 4 / 3; }
.gallery-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); transition: background .15s; }
.gallery-carousel__nav:hover { background: #fff; }
.gallery-carousel__nav--prev { left: 10px; }
.gallery-carousel__nav--next { right: 10px; }
.gallery-carousel__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.gallery-carousel__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: width .2s, background .2s; }
.gallery-carousel__dot.is-active { background: #fff; width: 22px; border-radius: 4px; }

/* ---------------------------------------------------------------------------
   Offertepagina (/offerte/): het formulier IS de pagina.
   Geen hero en niets ernaast. Alles loopt op de volle wrap-breedte, gelijk aan
   de header, de breadcrumb en de rest van de site. Daaronder de trust-strip met
   echte Google-reviews (.ofrev) en de uitleg, in dezelfde kolom.
--------------------------------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.offerte-embed { padding: 34px 0 10px; }
.offerte-embed__frame {
	position: relative;
	width: 100%;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #fff;
	box-shadow: 0 10px 30px rgba(15, 47, 120, .08);
}
.offerte-embed__frame iframe {
	display: block;
	width: 100%;
	height: min(84vh, 860px);
	min-height: 640px;
	border: 0;
}
.offerte-embed__fallback { margin: 14px 0 0; font-size: 15px; }

/* Trust-strip: echte reviews met echte gezichten, bron zichtbaar per kaart. */
.ofrev { padding: 46px 0 56px; }
.ofrev__in { width: 100%; }
.ofrev__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0;
}
.ofrev__sub { margin: 8px 0 26px; color: var(--muted, #5b6b86); font-size: 15.5px; }
.ofrev__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	/* Zonder dit is elke RIJ zo hoog als zijn eigen langste kaart, waardoor rij 1
	   en rij 2 verschillen. 1fr maakt alle rijen even hoog. */
	grid-auto-rows: 1fr;
}
.ofrev__card {
	margin: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ofrev__head { display: flex; align-items: center; gap: 12px; }
.ofrev__avatar {
	width: 48px; height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 48px;
	background: var(--bg-soft, #f4f7fb);
}
/* Terugval als de reviewer geen echte foto heeft: monogram in huisstijl. */
.ofrev__avatar--mono {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--brand, #1553b0);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
}
/* Quote op gelijke hoogte houden: kaarten in een rij blijven zo even hoog. */
.ofrev__text {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ofrev { scroll-margin-top: 90px; }
.ofrev__who { display: flex; flex-direction: column; min-width: 0; }
.ofrev__name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.ofrev__when { font-size: 13px; color: var(--muted, #5b6b86); }
.ofrev__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text, #16233f); }
.ofrev__meta {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
	color: var(--muted, #5b6b86);
	border-top: 1px solid var(--line);
	padding-top: 12px;
}
.ofrev__co { font-weight: 600; color: var(--text, #16233f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofrev__src { color: var(--muted, #5b6b86); text-decoration: none; white-space: nowrap; }
.ofrev__src:hover { text-decoration: underline; }

/* Alles op /offerte/ in dezelfde kolom als het formulier: embed, reviews, tekst
   en FAQ delen één linkerrand. .page-body/.prose/.faq hebben een eigen
   leesbreedte in ch, die zetten we hier opzij ten gunste van de 80%-kolom. */
body.page-template-page-offerte .page-body,
body.page-template-page-offerte .prose,
body.page-template-page-offerte .faq {
	width: 100%;
	max-width: none;
}
/* Geen leesbreedte-cap hier: de tekst moet even breed ogen als de kaarten. */
body.page-template-page-offerte .prose p,
body.page-template-page-offerte .prose li,
body.page-template-page-offerte .faq-a { max-width: none; }

@media (max-width: 1024px) {
	.ofrev__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
	.offerte-embed { padding: 14px 0 4px; }
	.offerte-embed__frame { border-radius: 14px; }
	.offerte-embed__frame iframe { height: min(92vh, 820px); min-height: 620px; }
	.ofrev { padding: 34px 0 44px; }
	.ofrev__grid { grid-template-columns: 1fr; }
}

/* Kaarten binnen de bestaande reviews-sectie (hub, provincie, plaats, merk):
   die sectie heeft zelf al kop en witruimte, dus hier geen dubbele padding en
   een kleinere eigen kop. */
.ofrev--insection { padding: 8px 0 0; }
.ofrev--insection .ofrev__title { font-size: 1.15rem; font-weight: 600; }
.ofrev--insection .ofrev__sub { margin-bottom: 18px; }

/* Trust-pill boven de H1 op de homepage (.xproof; .xtrust was al bezet door
   de trust-strip onder de hero): echte reviewer-gezichten + bewijs + CTA.
   Wit op de blauwe hero, zodat hij als eerste opvalt. */
.xproof {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border-radius: 999px;
	padding: 8px 8px 8px 14px;
	margin: 0 0 20px;
	box-shadow: 0 8px 24px rgba(6, 24, 66, .18);
	max-width: 100%;
}
.xproof__faces { display: flex; align-items: center; flex: 0 0 auto; }
.xproof__face {
	width: 38px; height: 38px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	background: var(--bg-soft, #f4f7fb);
	margin-left: -12px;
}
.xproof__face:last-child { margin-left: 0; }
.xproof__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.25;
	color: var(--ink, #16233f);
	white-space: nowrap;
}
.xproof__text strong,
/* .page-head p strong zet strong in de hero op wit en wint op specificiteit;
   de pill is wit, dus hier expliciet terug naar donker. */
.page-head .xproof__text strong,
.xfootcta .xproof__text strong {
	display: block;
	font-weight: 700;
	color: var(--ink, #16233f);
}
.xproof__text span { color: var(--muted, #5b6b86); font-size: 13px; }
.xproof__btn {
	background: var(--cta, #EA6A0A);
	color: #fff;
	border-radius: 999px;
	padding: 11px 20px;
	font-weight: 700;
	font-size: 14.5px;
	white-space: nowrap;
}
.xproof__btn:hover { filter: brightness(1.06); color: #fff; }

@media (max-width: 560px) {
	/* Mobiel: knop onder de rij, anders wordt de pill breder dan het scherm. */
	.xproof {
		display: flex;
		flex-wrap: wrap;
		border-radius: 20px;
		padding: 12px;
		gap: 10px 12px;
	}
	.xproof__text { white-space: normal; }
	.xproof__btn { flex: 1 0 100%; text-align: center; }
}

/* Foto in de marquee-kaart: zelfde maat als het monogram-cirkeltje. */
.xrevcard__av--img { object-fit: cover; padding: 0; }

/* Slot-CTA boven de footer: donkerblauwe band met de trust-pill erin. */
.xfootcta {
	background: var(--blue-900, #0f2f78);
	color: #fff;
	margin-inline: calc(50% - 50vw);
	padding: 44px 24px;
}
.xfootcta__in {
	max-width: var(--maxw);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.xfootcta__copy h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0;
	color: #fff;
}
.xfootcta__copy p { margin: 8px 0 0; color: rgba(255,255,255,.78); font-size: 15px; max-width: 52ch; }
.xfootcta .xproof { margin: 0; }
/* De footer sluit direct op deze band aan, zonder lichte strook ertussen. */
.xfootcta + .site-footer { margin-top: 0; }

@media (max-width: 700px) {
	.xfootcta { padding: 32px 16px; }
	.xfootcta__in { gap: 20px; }
	.xfootcta .xproof { width: 100%; }
}

/* Trust-pill in de blauwe hub-hero (hub, provincie, plaats, merk): iets ruimte
   boven de cijfers, en op smalle schermen volle breedte. */
.xproof--hero { margin: 22px 0 0; }
@media (max-width: 700px) { .xproof--hero { width: 100%; } }

/* Pill als staande kaart, voor een kolom met ruimte (profielblok #offerte):
   gezichten en tekst boven elkaar, knop op volle breedte eronder. */
.xproof--stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	border-radius: 18px;
	padding: 20px;
	width: 100%;
	max-width: 380px;
}
.xproof--stack .xproof__text { white-space: normal; }
.xproof--stack .xproof__btn { width: 100%; text-align: center; padding: 14px 20px; }
.profile-offerte .xproof--stack { margin: 0; }
@media (max-width: 780px) { .xproof--stack { max-width: none; } }

/* Tabellen in lopende tekst (o.a. de cookietabel in het privacybeleid). */
.prose table, .page-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 18px 0 22px;
	font-size: 14.5px;
}
.prose th, .page-body th {
	text-align: left;
	font-weight: 700;
	color: var(--ink);
	border-bottom: 2px solid var(--line);
	padding: 10px 12px 10px 0;
}
.prose td, .page-body td {
	vertical-align: top;
	border-bottom: 1px solid var(--line);
	padding: 10px 12px 10px 0;
}
.prose tr:last-child td, .page-body tr:last-child td { border-bottom: 0; }

/* Uitgelichte (betalende) partner in de lijst: groter logo en zijn eigen USP's.
   Bewust subtiel: zelfde rij-opbouw als de rest, alleen zwaarder aangezet. */
.registry-row--pro .logo-tile { width: 76px; height: 76px; }
.registry-row__usps {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}
.registry-row__usps li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--ink-2);
}
.registry-row__usps .check-icon { color: var(--green); flex: none; }
@media (max-width: 640px) {
	.registry-row--pro .logo-tile { width: 60px; height: 60px; }
	.registry-row__usps { flex-direction: column; gap: 5px; }
}

/* Bedankpagina na een offerte-aanvraag. Rendert mogelijk binnen de funnel-iframe,
   dus bewust smal en zonder eigen sierwerk. */
.bedankt { max-width: 640px; }
.bedankt__lead { font-size: 17px; color: var(--ink-2); }

/* ---------------------------------------------------------------------------
   Model B8 (22-09-2026): verificatie is visueel geworden, niet rekenkundig.
   --------------------------------------------------------------------------- */

/* Vinkje achter een gegeven dat in een openbaar register staat. Bewust klein en in de
   ink-kleur, niet groen-met-nadruk: het is een voetnoot bij een feit, geen keurmerk van
   ons. En er is met opzet GEEN tegenhanger voor wat we niet konden nakijken. */
.vmark { position: relative; display: inline-flex; align-items: center; margin-left: 6px; color: var(--green-ink); cursor: help; vertical-align: -2px; }
.vmark__icon { flex: 0 0 auto; }
.vmark__tip {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translate(-50%, 4px);
	width: max-content;
	max-width: 240px;
	background: var(--ink);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1.45;
	padding: 9px 12px;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(16, 27, 51, .22);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index: 40;
	pointer-events: none;
}
.vmark__tip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.vmark:hover .vmark__tip,
.vmark:focus .vmark__tip,
.vmark:focus-visible .vmark__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Keurmerken: eigen blok in plaats van één regel in de feitentabel, zodat per keurmerk
   te zien is of we het hebben kunnen nakijken. */
.keurmerken { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.keurmerk { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper, #fff); font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.keurmerken__note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* Merklogo in de chip. Merken leveren sinds B8 geen punten meer; ze zijn informatie. */
.merk-chip--logo { padding-left: 8px; gap: 7px; }
.merk-chip__logo { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; background: #fff; }