/*
 * 4BetterResults.be — stijl bovenop Kadence.
 *
 * Opbouw:
 *   1. Tokens          de merkkleuren, letters en maten als CSS-variabelen
 *   2. Basis           typografie en links
 *   3. Header          de drie rijen, de slogan en het tweede menu
 *   4. Hoofdmenu       de drie dienstenkaarten
 *   5. CTA-balk        de knoppen onderaan de header
 *   6. Mobiele header
 *   7. Footer
 *   8. Bouwstenen      klassen die de blokpatronen gebruiken
 *
 * De kleuren staan hier én in inc/kadence-defaults.php. Wijzig je er een,
 * wijzig hem op beide plaatsen.
 */

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

:root {
	--fbr-teal: #2b6257;
	--fbr-teal-deep: #1e4a42;
	--fbr-teal-darkest: #16342c;
	--fbr-teal-muted: #4a6b63;
	--fbr-sage: #7d9a8e;
	--fbr-sage-pale: #e7ede9;
	--fbr-bronze: #a8853f;
	--fbr-bronze-dark: #7a5f24;
	--fbr-gold: #d6b979;
	--fbr-gold-pale: #f0dcb4;
	--fbr-bone: #ece8dd;
	--fbr-paper: #f5f2ea;
	--fbr-sand: #ded4c0;
	--fbr-terracotta: #b0603f;

	/* De reeks voor grafieken: van diep teal naar goud, zeven stappen die ook
	   naast elkaar nog uit elkaar te houden zijn. Inline SVG erft deze
	   eigenschappen, dus de taartpunten en de blokjes in de legende halen hun
	   kleur uit dezelfde bron. */
	--fbr-grafiek-1: #1e4a42;
	--fbr-grafiek-2: #2b6257;
	--fbr-grafiek-3: #4b8075;
	--fbr-grafiek-4: #7d9a8e;
	--fbr-grafiek-5: #a8853f;
	--fbr-grafiek-6: #c9a35c;
	--fbr-grafiek-7: #d9cbae;

	--fbr-font-head: "Bricolage Grotesque", Figtree, system-ui, sans-serif;
	--fbr-font-body: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
	--fbr-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Zijafstand van de header-, sectie- en footerrijen. */
	--fbr-gutter: 54px;

	/* De buitenste breedte. Header, secties en footer houden zich hieraan, zodat
	   alles op elke schermbreedte op dezelfde lijn begint en eindigt. */
	--fbr-max: 1600px;

	/* Het kleine label dat overal terugkomt: "01 — 1 OP 1", "WAT WE DOEN". */
	--fbr-label-size: 11.5px;
	--fbr-label-tracking: 0.12em;
}

@media (max-width: 1024px) {
	:root {
		--fbr-gutter: 28px;
	}
}

@media (max-width: 767px) {
	:root {
		--fbr-gutter: 20px;
	}
}

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

body {
	background: var(--fbr-bone);
	font-family: var(--fbr-font-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--fbr-font-head);
	font-weight: 500;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Het monolabel. De blokpatronen gebruiken dezelfde klasse. */
.fbr-label {
	display: block;
	margin-bottom: 0;
	font-family: var(--fbr-font-mono);
	font-size: var(--fbr-label-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	color: var(--fbr-bronze-dark);
}

/* Een woord in de kop dat in teal cursief staat, zoals "sterke keuzes". */
.fbr-accent {
	font-style: italic;
	color: var(--fbr-teal);
}

/* ============================================================
 * 3. Header
 * ============================================================ */

.site-header-row-container-inner > .site-container {
	max-width: var(--fbr-max);
	margin-inline: auto;
	padding-inline: var(--fbr-gutter);
}

/* -- Bovenste rij: slogan en tweede menu -- */

.site-top-header-wrap .site-header-row-container-inner {
	background: var(--fbr-teal-darkest);
	color: rgba(236, 232, 221, 0.88);
}

.site-top-header-inner-wrap {
	min-height: 0;
	padding-block: 10px;
}

.fbr-header-tagline__text {
	font-family: var(--fbr-font-mono);
	font-size: var(--fbr-label-size);
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(236, 232, 221, 0.88);
}

/* De kleuren van dit menu komen uit inc/kadence-defaults.php, zodat ze in de
   Customizer aanpasbaar blijven. Hier alleen wat Kadence niet kan.

   Let op de lange selectors hieronder: Kadence kleurt menulinks met
   .secondary-navigation .secondary-menu-container > ul > li.menu-item > a.
   Een kortere selector verliest het daarvan, hoe laat hij ook in het bestand
   staat. Daarom schrijven we die keten mee en hangen we er onze klasse aan. */

.site-top-header-wrap .secondary-navigation .secondary-menu-container > ul > li.menu-item > a {
	text-decoration: none;
	transition: color 0.18s;
}

/* Een menu-item met de CSS-klasse is-gold staat altijd in goud —
   in het ontwerp is dat de taalwissel "English". */
.site-top-header-wrap .secondary-navigation .secondary-menu-container > ul > li.menu-item.is-gold > a {
	color: var(--fbr-gold);
}

/* -- Middelste rij: logo en hoofdmenu -- */

.site-main-header-wrap .site-header-row-container-inner {
	background: var(--fbr-bone);
	border-bottom: 1px solid rgba(30, 74, 66, 0.18);
}

.site-main-header-inner-wrap {
	min-height: 0;
	gap: 40px;
	align-items: stretch;
}

.site-main-header-wrap .site-header-section-left {
	padding-block: 20px;
}

/* -- Onderste rij: tekst en CTA-knoppen -- */

.site-bottom-header-wrap .site-header-row-container-inner {
	background: var(--fbr-paper);
	border-bottom: 1px solid rgba(30, 74, 66, 0.18);
}

.site-bottom-header-inner-wrap {
	min-height: 0;
	padding-block: 12px;
}

.site-bottom-header-wrap .header-html {
	font-family: var(--fbr-font-body);
	font-size: 13.5px;
	line-height: 1.4;
	color: rgba(30, 74, 66, 0.85);
}

.site-bottom-header-wrap .header-html p {
	margin: 0;
}

/* ============================================================
 * 4. Hoofdmenu — de drie dienstenkaarten
 * ============================================================ */

/* Zelfde verhaal als bij het tweede menu: Kadence kleurt en vult menulinks op
   met .main-navigation .primary-menu-container > ul > li.menu-item > a. Om
   daarvan te winnen schrijven we die keten mee en hangen we .fbr-nav-card
   eraan. Korter opschrijven werkt niet, ook al staat het later in het bestand. */

.fbr-nav-kaarten .site-main-header-wrap .main-navigation .primary-menu-container > ul {
	display: flex;
	align-items: stretch;
	gap: 12px;
	padding-block: 14px;
}

.fbr-nav-kaarten .site-main-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.fbr-nav-kaarten .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card > a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
	padding: 16px 18px;
	background: var(--fbr-paper);
	color: var(--fbr-teal-deep);
	border: 1px solid rgba(30, 74, 66, 0.22);
	border-top: 3px solid var(--fbr-teal);
	text-decoration: none;
	transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}

.fbr-nav-kaarten .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card > a:hover,
.fbr-nav-kaarten .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card > a:focus-visible {
	background: var(--fbr-teal);
	color: var(--fbr-paper);
	border-color: var(--fbr-teal);
	border-top-color: var(--fbr-bronze);
	transform: translateY(-2px);
}

.fbr-nav-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.fbr-nav-card__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.fbr-nav-card__title {
	font-family: var(--fbr-font-head);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.01em;
}

.fbr-nav-card__arrow {
	flex: none;
	font-family: var(--fbr-font-body);
	font-size: 15px;
	line-height: 1;
}

.fbr-nav-card__eyebrow {
	font-family: var(--fbr-font-mono);
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	color: var(--fbr-bronze-dark);
	transition: color 0.18s;
}

.fbr-nav-card > a:hover .fbr-nav-card__eyebrow,
.fbr-nav-card > a:focus-visible .fbr-nav-card__eyebrow {
	color: var(--fbr-gold-pale);
}

/* De titel volgt de kleur van de kaart, ook als Kadence de link anders kleurt. */
.fbr-nav-card__title,
.fbr-nav-card__arrow {
	color: inherit;
}

/* De ruitjes: het stijgende motief uit het logo. */
.fbr-nav-card__dots {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 13px;
}

.fbr-nav-card__dot {
	display: block;
	width: 9px;
	height: 9px;
	background: var(--fbr-teal);
	transform: rotate(45deg);
	animation: fbr-drift 5.5s ease-in-out infinite;
	animation-delay: var(--fbr-dot-delay, 0s);
}

.fbr-nav-card__dot:nth-child(2) {
	margin-bottom: 4px;
	background: var(--fbr-bronze);
}

.fbr-nav-card__dot:nth-child(3) {
	margin-bottom: 8px;
}

.fbr-nav-card > a:hover .fbr-nav-card__dot,
.fbr-nav-card > a:focus-visible .fbr-nav-card__dot {
	background: var(--fbr-gold);
}

/* De opvallende kaart: standaard de derde, of het item met de klasse
   is-feature. Die laatste staat hier lager en wint dus. */
.fbr-nav-kaarten .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card--feature > a,
.fbr-nav-kaarten .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card.is-feature > a {
	background: var(--fbr-teal);
	color: var(--fbr-paper);
	border-color: var(--fbr-teal);
	border-top-color: var(--fbr-gold);
}

.fbr-nav-kaarten .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card--feature > a:hover,
.fbr-nav-kaarten .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card--feature > a:focus-visible,
.fbr-nav-kaarten .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card.is-feature > a:hover,
.fbr-nav-kaarten .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card.is-feature > a:focus-visible {
	background: var(--fbr-teal-deep);
	border-color: var(--fbr-teal-deep);
	color: var(--fbr-paper);
}

.fbr-nav-kaarten .fbr-nav-card--feature .fbr-nav-card__eyebrow,
.fbr-nav-kaarten .fbr-nav-card.is-feature .fbr-nav-card__eyebrow {
	color: var(--fbr-gold-pale);
}

.fbr-nav-kaarten .fbr-nav-card--feature .fbr-nav-card__dot,
.fbr-nav-kaarten .fbr-nav-card.is-feature .fbr-nav-card__dot {
	background: var(--fbr-gold);
}

/* ---- Hetzelfde menu, maar als gewone menulinks ----
 *
 * De kaarten hierboven zijn mooi maar lezen niet meteen als navigatie. Dit is
 * de tweede stand van de keuze in de Customizer (Menu's → Uiterlijk van het
 * hoofdmenu): dezelfde menu-items, zonder kader, zonder vlak, met een gouden
 * streep bij hover. De ruitjes en het pijltje horen bij de kaart en gaan hier
 * weg; het kleine label blijft, want daar staat in wat voor soort traject het
 * is. Zie fbr_nav_stijl() in inc/nav-cards.php. */

/* nowrap is hier het punt: met wrap breekt flexbox de derde link naar een
   eigen regel zodra de drie titels samen te breed worden, in plaats van ze te
   laten krimpen. Naast elkaar met een titel over twee regels leest beter dan
   twee boven elkaar. */
.fbr-nav-menu .site-main-header-wrap .main-navigation .primary-menu-container > ul {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 34px;
	padding-block: 12px;
}

@media (max-width: 1200px) {
	.fbr-nav-menu .site-main-header-wrap .main-navigation .primary-menu-container > ul {
		gap: 22px;
	}
}

.fbr-nav-menu .site-main-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

.fbr-nav-menu .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card > a,
.fbr-nav-menu .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card--feature > a,
.fbr-nav-menu .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card.is-feature > a {
	display: block;
	height: auto;
	gap: 0;
	padding: 4px 0 6px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--fbr-teal-deep);
	text-decoration: none;
	transform: none;
	transition: color 0.18s, border-color 0.18s;
}

.fbr-nav-menu .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card > a:hover,
.fbr-nav-menu .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card > a:focus-visible,
.fbr-nav-menu .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card--feature > a:hover,
.fbr-nav-menu .main-navigation .primary-menu-container > ul > li.menu-item.fbr-nav-card.is-feature > a:hover {
	background: none;
	color: var(--fbr-teal);
	border-bottom-color: var(--fbr-gold);
	transform: none;
}

/* Het huidige item krijgt de streep vast, zoals in elk gewoon menu. */
.fbr-nav-menu .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
.fbr-nav-menu .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a {
	border-bottom-color: var(--fbr-teal);
}

.fbr-nav-menu .fbr-nav-card__dots,
.fbr-nav-menu .fbr-nav-card__arrow {
	display: none;
}

.fbr-nav-menu .fbr-nav-card__top {
	display: block;
	margin-bottom: 3px;
}

.fbr-nav-menu .fbr-nav-card__bottom {
	display: block;
}

.fbr-nav-menu .fbr-nav-card__title {
	font-size: 16px;
	line-height: 1.2;
}

.fbr-nav-menu .fbr-nav-card__eyebrow,
.fbr-nav-menu .fbr-nav-card--feature .fbr-nav-card__eyebrow,
.fbr-nav-menu .fbr-nav-card.is-feature .fbr-nav-card__eyebrow {
	font-size: 9.5px;
	color: rgba(30, 74, 66, 0.55);
}

.fbr-nav-menu .fbr-nav-card > a:hover .fbr-nav-card__eyebrow,
.fbr-nav-menu .fbr-nav-card > a:focus-visible .fbr-nav-card__eyebrow {
	color: var(--fbr-bronze-dark);
}

@keyframes fbr-drift {
	0%, 100% { transform: rotate(45deg) translateY(0); }
	50% { transform: rotate(45deg) translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
	.fbr-nav-card__dot,
	.fbr-diamond {
		animation: none;
	}
}

/* ============================================================
 * 5. CTA-balk
 * ============================================================ */

.fbr-cta-menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbr-cta-menu li {
	margin: 0;
}

.fbr-cta-menu a {
	display: inline-block;
	padding: 12px 4px;
	font-family: var(--fbr-font-mono);
	font-size: var(--fbr-label-size);
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(30, 74, 66, 0.85);
	text-decoration: none;
	transition: background 0.18s, border-color 0.18s, color 0.18s;
}

/* Kadence onderstreept links in de inhoud; in een knop hoort dat niet. */
.fbr-cta-menu a:hover,
.fbr-cta-menu a:focus-visible {
	text-decoration: none;
}

/* Eerste link: volle knop. Tweede: omlijnd. Daarna: gewone link.
   Een CSS-klasse op het menu-item zet dat opzij. */
.fbr-cta-menu li:first-child a,
.fbr-cta-menu li.is-primary a {
	padding: 12px 20px;
	background: var(--fbr-teal);
	color: var(--fbr-bone);
}

.fbr-cta-menu li:first-child a:hover,
.fbr-cta-menu li.is-primary a:hover {
	background: var(--fbr-teal-deep);
}

.fbr-cta-menu li:nth-child(2) a,
.fbr-cta-menu li.is-outline a {
	padding: 12px 20px;
	background: none;
	border: 1px solid rgba(30, 74, 66, 0.4);
	color: rgba(30, 74, 66, 0.85);
}

.fbr-cta-menu li:nth-child(2) a:hover,
.fbr-cta-menu li.is-outline a:hover {
	border-color: var(--fbr-bronze);
	color: var(--fbr-bronze-dark);
}

.fbr-cta-menu li.is-plain a {
	padding: 12px 4px;
	background: none;
	border: 0;
	color: rgba(30, 74, 66, 0.85);
}

.fbr-cta-menu li.is-plain a:hover {
	color: var(--fbr-bronze-dark);
}

/* ============================================================
 * 6. Mobiele header
 * ============================================================ */

@media (max-width: 1024px) {
	/* De kaarten passen niet naast elkaar; onder elkaar wel. */
	.site-main-header-wrap .primary-menu-container > ul {
		flex-wrap: wrap;
	}

	.fbr-nav-kaarten .site-main-header-wrap .primary-menu-container > ul > li.fbr-nav-card {
		flex: 1 1 240px;
	}
}

.mobile-header-wrap .site-header-row-container-inner {
	background: var(--fbr-bone);
	border-bottom: 1px solid rgba(30, 74, 66, 0.18);
}

/* In het uitklapmenu op mobiel zijn het gewone links, geen kaarten. */
.mobile-navigation .fbr-nav-card > a {
	display: block;
	height: auto;
	padding: 14px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(30, 74, 66, 0.15);
	transform: none;
}

.mobile-navigation .fbr-nav-card__dots,
.mobile-navigation .fbr-nav-card__arrow {
	display: none;
}

.mobile-navigation .fbr-nav-card__top {
	margin-bottom: 4px;
}

/* ---- Het uitklapmenu zelf ----
 *
 * Kadence zet het paneel standaard op bijna zwart met witte links in het
 * bodylettertype; dat hoort nergens bij de rest van de site. Hier krijgt het
 * dezelfde donkere teal als de footer, met de koptekstletter en goud voor de
 * aanwijzer. */
.popup-drawer .drawer-inner {
	background: var(--fbr-teal-darkest);
	color: rgba(236, 232, 221, 0.9);
}

.popup-drawer .drawer-header {
	padding-block: 10px;
}

.popup-drawer .drawer-toggle .toggle-close-bar {
	background: var(--fbr-bone);
}

.popup-drawer .drawer-content {
	padding-inline: var(--fbr-gutter);
}

.popup-drawer .mobile-navigation ul li a {
	font-family: var(--fbr-font-head);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--fbr-bone);
}

.popup-drawer .mobile-navigation ul li a:hover,
.popup-drawer .mobile-navigation ul li a:focus-visible {
	color: var(--fbr-gold);
}

.popup-drawer .mobile-navigation ul li,
.popup-drawer .mobile-navigation .fbr-nav-card > a {
	border-bottom-color: rgba(236, 232, 221, 0.16);
}

/* De knoppen uit de CTA-balk staan ook in het paneel, onder het menu: op een
   telefoon is er in de header zelf geen plaats voor. */
.popup-drawer .fbr-header-cta {
	margin-top: 26px;
	width: 100%;
}

.popup-drawer .fbr-cta-menu {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 12px;
	width: 100%;
}

.popup-drawer .fbr-cta-menu li {
	width: 100%;
}

.popup-drawer .fbr-cta-menu a {
	display: block;
	width: 100%;
	text-align: center;
}

/* Hoog genoeg om met een duim te raken: 17px boven en onder brengt de knop op
   46. De hele reeks staat er apart bij, want elke variant hierboven zet zijn
   eigen padding met dezelfde soort selector; een kortere wint het niet. */
.popup-drawer .fbr-cta-menu li a,
.popup-drawer .fbr-cta-menu li:first-child a,
.popup-drawer .fbr-cta-menu li:nth-child(2) a,
.popup-drawer .fbr-cta-menu li.is-primary a,
.popup-drawer .fbr-cta-menu li.is-outline a,
.popup-drawer .fbr-cta-menu li.is-plain a {
	padding: 17px 20px;
}

/* Het paneel is donker; de omlijnde knop en de gewone link staan hier in
   bone en goud in plaats van in inkt, anders zijn ze onleesbaar. */
.popup-drawer .fbr-cta-menu li:nth-child(2) a,
.popup-drawer .fbr-cta-menu li.is-outline a {
	border-color: rgba(236, 232, 221, 0.45);
	color: var(--fbr-bone);
}

.popup-drawer .fbr-cta-menu li:nth-child(2) a:hover,
.popup-drawer .fbr-cta-menu li.is-outline a:hover {
	border-color: var(--fbr-gold);
	color: var(--fbr-gold);
}

.popup-drawer .fbr-cta-menu li.is-plain a,
.popup-drawer .fbr-cta-menu li:not(:first-child):not(:nth-child(2)):not(.is-primary):not(.is-outline) a {
	color: var(--fbr-gold);
}

/* ============================================================
 * 7. Footer
 * ============================================================ */

.site-footer {
	background: var(--fbr-teal-darkest);
	color: rgba(236, 232, 221, 0.88);
	font-size: 14px;
	line-height: 1.85;
}

/* De eerste kolom is breder dan de rest, zoals in het ontwerp. */
/* Kadence zet de vijf kolommen even breed neer; het ontwerp geeft de
   merkkolom meer ruimte. Display expliciet op grid, want Kadence gebruikt
   flex voor deze rij. */
.site-middle-footer-wrap .site-footer-row {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
	gap: 34px;
}

@media (max-width: 1024px) {
	.site-middle-footer-wrap .site-footer-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px 28px;
	}
}

@media (max-width: 600px) {
	.site-middle-footer-wrap .site-footer-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.site-footer .site-container {
	max-width: var(--fbr-max);
	margin-inline: auto;
	padding-inline: var(--fbr-gutter);
}

.site-middle-footer-wrap {
	padding-block: 62px 30px;
}

/* Elke footerbouwsteen zet zijn inhoud in dit omhulsel. Kadence geeft
   .footer-widget-area zelf display:flex in rijrichting en elk direct kind
   flex: 1 1 0; zonder omhulsel kwamen de kop en de lijst naast elkaar te staan
   in plaats van onder elkaar. Zie inc/footer-elements.php. */
.site-footer .fbr-footer-stack {
	min-width: 0;
}

/* ---- De merkkolom ---- */

/* De ruitjes in de footer staan stil: de footer hoort rustig te zijn. */
/* Het merkblok is een link naar de homepage.
 *
 * Met .site-footer ervoor, want .site-footer a hieronder onderstreept elke
 * link in de footer bij hover. Dat is goed voor een regel tekst, maar hier zou
 * het de naam én de slogan onderstrepen — twee regels met een streep eronder,
 * met de ruitjes erboven. De naam die goud wordt is signaal genoeg.
 *
 * color: inherit zodat de drie onderdelen hun eigen kleur houden; zonder dat
 * trekt .site-footer a ze allemaal naar bone. */

.site-footer .fbr-footer-brand__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.site-footer .fbr-footer-brand__link:hover,
.site-footer .fbr-footer-brand__link:focus-visible {
	color: inherit;
	text-decoration: none;
}

.fbr-footer-brand__link .fbr-footer-brand__name {
	transition: color 0.18s;
}

.site-footer .fbr-footer-brand__link:hover .fbr-footer-brand__name,
.site-footer .fbr-footer-brand__link:focus-visible .fbr-footer-brand__name {
	color: var(--fbr-gold);
}

.fbr-footer-brand__dots {
	display: flex;
	align-items: flex-end;
	gap: 7px;
	height: 20px;
	margin-bottom: 16px;
}

.fbr-footer-brand__dots .fbr-diamond {
	width: 11px;
	height: 11px;
	background: var(--fbr-gold);
	animation: none;
}

.fbr-footer-brand__dots .fbr-diamond:nth-child(2) {
	width: 15px;
	height: 15px;
	background: var(--fbr-bronze);
}

.fbr-footer-brand__dots .fbr-diamond:nth-child(3) {
	width: 19px;
	height: 19px;
	background: var(--fbr-sage);
}

.fbr-footer-brand__name {
	font-family: var(--fbr-font-body);
	text-transform: uppercase;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--fbr-bone);
}

.fbr-footer-brand__tagline {
	margin: 14px 0 0;
	max-width: 24ch;
}

/* ---- De linkkolommen ---- */

.fbr-footer-col__title {
	margin-bottom: 12px;
	font-family: var(--fbr-font-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	color: var(--fbr-bone);
}

.fbr-footer-menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbr-footer-menu li {
	margin: 0;
}

/* Een item zonder link, bijvoorbeeld een adresregel. */
.fbr-footer-menu__text {
	color: rgba(236, 232, 221, 0.85);
}

.site-footer .widget-title,
.site-footer .widgettitle {
	font-family: var(--fbr-font-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	color: var(--fbr-gold);
	margin-bottom: 18px;
}

/* Kadence onderstreept elke link (link-style-standard). In een footer die
   vrijwel alleen uit links bestaat wordt dat een streepjespatroon; hier dus
   pas een streep als je erover gaat. text-underline-offset houdt hem los van
   de staarten van de letters. */
.site-footer a {
	color: var(--fbr-bone);
	text-decoration: none;
	transition: color 0.18s;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--fbr-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer li {
	margin-bottom: 0;
}

.site-bottom-footer-wrap .site-container {
	border-top: 1px solid rgba(236, 232, 221, 0.22);
	padding-block: 20px;
}

.site-bottom-footer-wrap,
.site-bottom-footer-wrap a {
	font-family: var(--fbr-font-mono);
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(236, 232, 221, 0.6);
}

.site-bottom-footer-wrap .footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.site-bottom-footer-wrap .footer-navigation li {
	margin: 0;
}

/* ============================================================
 * 8. Secties
 *
 * Het stramien van de pagina's. Zet .fbr-section op een groepsblok dat op
 * "Volledige breedte" staat, plus één kleurklasse:
 *
 *   .fbr-section--paper   licht papier
 *   .fbr-section--bone    bone (de standaard achtergrond)
 *   .fbr-section--teal    teal, lichte tekst
 *   .fbr-section--gold    goud, donkere tekst
 *   .fbr-section--sand    zand
 *
 * De inhoud blijft binnen de contentbreedte van Kadence, de kleur loopt door
 * tot de schermrand.
 * ============================================================ */

.fbr-section {
	padding-block: 96px;
	padding-inline: var(--fbr-gutter);
}

/* Kadence zet padding-left en padding-right op nul voor élk blok dat op
   volledige breedte staat, met .entry-content .alignfull. Die selector is
   specifieker dan .fbr-section, dus zonder deze regel zou de zijmarge hierboven
   niets doen en zou de tekst tegen de schermrand plakken. */
.entry-content div.fbr-section {
	padding-inline: var(--fbr-gutter);

	/* Kadence zet ook een marge onder elk blok. Tussen twee gekleurde secties
	   levert dat een streep achtergrondkleur op; de banden moeten tegen elkaar
	   aan sluiten. */
	margin-block: 0;
}

/* De inhoud binnen een sectie krijgt dezelfde bovengrens als de header, zodat
   alles op elke schermbreedte op één lijn staat.

   WordPress hangt in dit thema een eigen binnenlaag in elk groepsblok
   (wp-block-group__inner-container) en haalt de is-layout-klassen van de
   buitenkant weg. Daarom staan beide vormen hieronder. */
.fbr-section > .wp-block-group__inner-container,
.fbr-section.is-layout-constrained > * {
	max-width: calc(var(--fbr-max) - 2 * var(--fbr-gutter));
	margin-inline: auto;
}

.fbr-section--tight {
	padding-block: 22px;
}

.fbr-section--paper { background: var(--fbr-paper); }
.fbr-section--bone { background: var(--fbr-bone); }
.fbr-section--sand { background: var(--fbr-sand); }

.fbr-section--teal {
	background: var(--fbr-teal);
	color: var(--fbr-bone);
}

.fbr-section--gold {
	background: var(--fbr-gold);
	color: var(--fbr-teal-darkest);
}

/* Koppen en labels moeten meekleuren met de sectie. */
.fbr-section--teal h1, .fbr-section--teal h2, .fbr-section--teal h3,
.fbr-section--teal h4, .fbr-section--teal h5, .fbr-section--teal h6 {
	color: var(--fbr-bone);
}

.fbr-section--teal .fbr-label {
	color: var(--fbr-gold);
}

/* Het logo van een programma, boven de kop van een sectie.
 *
 * Op een lichte sectie staat het logo in het teal van de site. Op de groene
 * sectie zou het wegvallen, en daar helpt het filter: brightness(0) maakt elke
 * zichtbare pixel zwart, invert(1) maakt er wit van. De doorzichtige delen —
 * de schaakstukken in de letters — blijven doorzichtig, dus daar schijnt het
 * groen van de sectie door. Precies de omkering die het logo zelf ook bedoelt:
 * lichte letters met gekleurde stukken erin. */

.fbr-merklogo {
	margin: 0 0 24px;
	max-width: 250px;
}

.fbr-merklogo img {
	display: block;
	width: 100%;
	height: auto;
}

.fbr-section--teal .fbr-merklogo img {
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

/* Het cursieve accent in een kop is standaard teal — op een teal sectie dus
   onzichtbaar. Daar neemt het dezelfde goudtint als het labeltje erboven. */
.fbr-section--teal .fbr-accent {
	color: var(--fbr-gold);
}

.fbr-section--teal a {
	color: var(--fbr-gold);
}

.fbr-section--gold h1, .fbr-section--gold h2, .fbr-section--gold h3,
.fbr-section--gold h4, .fbr-section--gold h5, .fbr-section--gold h6 {
	color: var(--fbr-teal-darkest);
}

.fbr-section--gold .fbr-label {
	color: var(--fbr-teal);
}

/* De inleidende zin onder een kop. */
.fbr-section h1,
.fbr-section h2 {
	margin-top: 18px;
}

.fbr-lead {
	font-size: 20px;
	line-height: 1.72;
	max-width: 48ch;
}

/* ---- Lopende tekst ----
 *
 * Voor lange pagina's: artikels, pillar pages, juridische teksten. Een regel
 * van zo'n 68 tekens leest het prettigst; breder wordt vermoeiend.
 */

.fbr-prose p,
.fbr-prose ul,
.fbr-prose ol,
.fbr-prose h2,
.fbr-prose h3,
.fbr-prose h4 {
	max-width: 68ch;
}

.fbr-prose h2 {
	margin-top: 64px;
}

.fbr-prose h3 {
	margin-top: 44px;
	font-size: 23px;
}

.fbr-prose p,
.fbr-prose li {
	font-size: 17.5px;
	line-height: 1.78;
}

.fbr-prose li + li {
	margin-top: 12px;
}

/* Een tabel is zo breed als haar inhoud. Op een telefoon past die nooit, en
   omdat de pagina zelf niet horizontaal schuift verdwenen de rechterkolommen
   gewoon buiten beeld — onleesbaar, zonder enige manier om erbij te komen.
   Daarom schuift de tabel zelf horizontaal. De blogartikels gebruiken geen
   fbr-prose, dus dit hangt aan .entry-content: daar vallen beide onder. */
.entry-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry-content .wp-block-table table {
	min-width: 100%;
}

.fbr-prose .wp-block-table {
	max-width: 68ch;
}

.fbr-prose .wp-block-table th,
.fbr-prose .wp-block-table td {
	padding: 10px 14px;
	border: 1px solid rgba(30, 74, 66, 0.2);
	font-size: 16px;
}

/* Onder de 720px is er geen enkele kolomverdeling die nog leesbaar is; de
   tabel krijgt daarom een vaste minimumbreedte en schuift. */
@media (max-width: 720px) {
	.entry-content .wp-block-table table {
		min-width: 460px;
	}

	.entry-content .wp-block-table th,
	.entry-content .wp-block-table td {
		padding: 9px 11px;
		font-size: 15px;
	}
}

.fbr-prose .wp-block-table th {
	background: rgba(30, 74, 66, 0.06);
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
}

/* ---- Hero ---- */

/* Kadence laat beide kolommen meegroeien. Een flex-basis alleen volstaat dan
   niet: de overgebleven ruimte wordt daarna alsnog gelijk verdeeld, waardoor
   de rechterkolom veel te smal blijft. Daarom hier ook flex-grow uitzetten. */
.fbr-hero .wp-block-columns {
	align-items: flex-start;
}

.fbr-hero .wp-block-column:first-child {
	flex: 0 0 56%;
}

.fbr-hero .wp-block-column:last-child {
	flex: 0 0 calc(44% - 34px);
	min-width: 0;
}

@media (max-width: 900px) {
	.fbr-hero .wp-block-column:first-child,
	.fbr-hero .wp-block-column:last-child {
		flex: 1 1 100%;
	}
}

/* Het vierkant dat schuin uit de hoek steekt. */
.fbr-hero {
	position: relative;
	overflow: hidden;
}

.fbr-hero::before {
	content: "";
	position: absolute;
	right: -90px;
	top: -120px;
	width: 420px;
	height: 420px;
	background: var(--fbr-bone);
	transform: rotate(45deg);
	pointer-events: none;
}

.fbr-hero > * {
	position: relative;
}

/* ---- Plaats voor een foto ----
 *
 * Een gestreept vlak met een gekleurd vierkant dat er schuin achter uitsteekt,
 * en het bijschrift in een blokje linksonder. Zo staat het in het ontwerp, en
 * zo blijft de plek herkenbaar tot de echte foto er is.
 *
 * Gebruik:
 *   <div class="fbr-figure fbr-reveal">
 *     <span class="fbr-figure__block"></span>
 *     <div class="fbr-figure__frame"><span class="fbr-figure__note">FOTO — …</span></div>
 *   </div>
 *
 * Staat er een echte <img> in het frame, dan vult die het vlak.
 */

.fbr-figure {
	position: relative;
	padding: 18px 0 0 18px;
}

.fbr-figure__block {
	position: absolute;
	left: 0;
	top: 0;
	width: 74%;
	height: 74%;
	background: var(--fbr-teal);
	display: block;
}

.fbr-figure__frame {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 430px;
	padding: 20px;
	background: repeating-linear-gradient(
		135deg,
		rgba(30, 74, 66, 0.1) 0 9px,
		rgba(30, 74, 66, 0.035) 9px 18px
	);
	outline: 1px solid rgba(30, 74, 66, 0.2);
	overflow: hidden;
}

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

.fbr-figure__note {
	position: relative;
	background: var(--fbr-bone);
	padding: 7px 10px;
	font-family: var(--fbr-font-mono);
	font-size: 11px;
	line-height: 1.5;
	color: rgba(30, 74, 66, 0.85);
}

/* Op een donkere sectie draait het streepje om. */
.fbr-section--teal .fbr-figure__frame {
	background: repeating-linear-gradient(
		135deg,
		rgba(236, 232, 221, 0.16) 0 9px,
		rgba(236, 232, 221, 0.05) 9px 18px
	);
	outline-color: rgba(236, 232, 221, 0.25);
}

.fbr-section--teal .fbr-figure__block {
	background: var(--fbr-teal-deep);
}

/* Het hele beeld tonen in plaats van het bij te snijden.
 *
 * .fbr-figure__frame heeft een minimumhoogte en snijdt met object-fit:cover
 * bij. Dat is goed voor een foto — een stukje muur of lucht erbij of eraf
 * merkt niemand — maar niet voor een beeld met tekst erin: dan valt het begin
 * en het eind van elke regel buiten het kader. Deze variant laat het beeld zijn
 * eigen verhouding houden en maakt het kader even hoog als het beeld. */

.fbr-figure--vol .fbr-figure__frame {
	display: block;
	min-height: 0;
	padding: 0;
}

.fbr-figure--vol .fbr-figure__frame img {
	position: static;
	width: 100%;
	height: auto;
	object-fit: fill;
}

/* Een kleiner vlak, voor naast een tekstkolom. */
.fbr-figure--sm .fbr-figure__frame {
	min-height: 300px;
}

/* De eenvoudige variant: één alinea met de klasse fbr-photo krijgt hetzelfde
   uiterlijk, zonder dat er markup omheen hoeft. Handig op pagina's waar de
   plaatshouder gewoon een tekstblok is.

   z-index 0 maakt hier een eigen stapelcontext, zodat het vierkant op -1 wel
   achter het vlak valt maar niet achter de achtergrond van de sectie. */
.fbr-photo {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: flex-end;
	min-height: 430px;
	margin: 18px 0 0 18px;
	padding: 20px;
	background: repeating-linear-gradient(
		135deg,
		rgba(30, 74, 66, 0.1) 0 9px,
		rgba(30, 74, 66, 0.035) 9px 18px
	);
	outline: 1px solid rgba(30, 74, 66, 0.2);
	border: 0;
	font-family: var(--fbr-font-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: rgba(30, 74, 66, 0.85);
}

.fbr-photo::before {
	content: "";
	position: absolute;
	left: -18px;
	top: -18px;
	z-index: -1;
	width: 74%;
	height: 74%;
	background: var(--fbr-teal);
}

.fbr-section--sand .fbr-photo::before,
.fbr-section--paper .fbr-photo::before {
	background: var(--fbr-sage);
}

/* ---- Het cijfervlak naast de foto ---- */

.fbr-statpanel {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 18px 0 0 18px;
	padding: 22px 24px;
	background: var(--fbr-teal-deep);
	color: var(--fbr-bone);
}

.fbr-statpanel__figure {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.fbr-statpanel__number {
	font-family: var(--fbr-font-head);
	font-size: 56px;
	font-weight: 500;
	line-height: 0.86;
	letter-spacing: -0.02em;
	color: var(--fbr-gold);
}

.fbr-statpanel__number sup {
	font-size: 32px;
	line-height: 1;
	vertical-align: super;
}

.fbr-statpanel__unit {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-left: 14px;
	border-left: 1px solid rgba(214, 185, 121, 0.55);
	font-family: var(--fbr-font-mono);
	font-size: 10.5px;
	line-height: 1.25;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fbr-gold-pale);
}

.fbr-statpanel p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(236, 232, 221, 0.9);
}

@media (max-width: 860px) {
	.fbr-statpanel {
		flex-wrap: wrap;
	}
}

/* ---- Het cijferblok "20+ jaar ervaring" ---- */

.fbr-badge {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 2px solid var(--fbr-teal);
}

.fbr-badge__number {
	font-family: var(--fbr-font-head);
	font-size: 56px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fbr-teal);
}

.fbr-badge__number span {
	color: var(--fbr-bronze);
}

.fbr-badge__text {
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	line-height: 1.5;
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	color: var(--fbr-bronze-dark);
}

/* ---- Kaarten: diensten, pillars ---- */

.fbr-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 30px 28px 32px;
	background: var(--fbr-bone);
	border: 1px solid rgba(30, 74, 66, 0.2);
	border-top: 3px solid var(--fbr-teal);
	transition: transform 0.2s ease, border-top-color 0.2s ease, box-shadow 0.2s ease;
}

/* De kaarten komen omhoog als je erover gaat, net als in het ontwerp. */
.fbr-card:hover {
	transform: translateY(-4px);
	border-top-color: var(--fbr-bronze);
	box-shadow: 0 10px 24px rgba(30, 74, 66, 0.1);
}

/* Op een telefoon is de kaart maar 335 pixels breed. Dertig pixels wit aan elke
   kant zou een derde van de regel opeten; daar wint de tekst het van de lucht. */
@media (max-width: 767px) {
	.fbr-card {
		padding: 26px 22px 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fbr-card {
		transition: none;
	}

	.fbr-card:hover {
		transform: none;
	}
}

.fbr-card h3 {
	margin: 0;
}

.fbr-card p {
	margin: 0;
}

/* Een groepsblok zet zijn inhoud in een eigen .wp-block-group__inner-container.
   De kaart is dus wel een flexkolom, maar met één kind — en dan heeft een
   margin-top:auto op een alinea daarbinnen geen vrije ruimte om op te nemen.
   Deze regel geeft de binnenlaag dezelfde kolom en laat die de kaart vullen.

   En dáár hoort ook de gap. Dezelfde val, tweede helft: de `gap: 16px` op de
   kaart hierboven gold tussen de kinderen van de kaart, en dat is er maar één
   — deze binnenlaag. Tussen de kop en de alinea erin viel dus niets. Omdat
   Kadence met .single-content p bovendien élke alineamarge op nul zet, raakten
   kop en tekst elkaar letterlijk. Dat was op tien pagina's te zien, 68 keer in
   totaal, en het is wat een pagina "te vol" doet aanvoelen zonder dat je er de
   vinger op legt. */
.fbr-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 16px;
}

/* .entry-content ervoor om dezelfde reden als bij .fbr-getuigenis__wie: zonder
   die extra klasse wint Kadence met .single-content p en blijft margin-top op
   nul staan. Samen met de regel hierboven stond "Lees meer" bij de drie
   dienstenkaarten op de homepage op drie verschillende hoogtes. */
.entry-content .fbr-card__more {
	margin-top: auto;
	padding-top: 20px;
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fbr-teal);
}

.fbr-card__meta {
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	line-height: 1.85;
	letter-spacing: 0.04em;
	color: var(--fbr-bronze-dark);
}


/* ---- Het artikeloverzicht ----
 *
 * Eén queryblok dat de artikels zelf ophaalt, zodat een nieuw artikel vanzelf
 * in het overzicht verschijnt zonder dat er iemand een kaart bij moet zetten.
 * De opmaak volgt .fbr-card hierboven; de opbouw niet, want een queryblok zet
 * zijn resultaten in een <ul> met <li>'s in plaats van in groepsblokken.
 */

.fbr-artikels .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1100px) {
	.fbr-artikels .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.fbr-artikels .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}

.fbr-artikels .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 30px 28px 32px;
	background: var(--fbr-paper);
	border: 1px solid rgba(30, 74, 66, 0.2);
	border-top: 3px solid var(--fbr-teal);
	transition: transform 0.2s ease, border-top-color 0.2s ease, box-shadow 0.2s ease;
}

.fbr-artikels .wp-block-post-template > li:hover {
	transform: translateY(-4px);
	border-top-color: var(--fbr-bronze);
	box-shadow: 0 10px 24px rgba(30, 74, 66, 0.1);
}

@media (max-width: 767px) {
	.fbr-artikels .wp-block-post-template > li {
		padding: 26px 22px 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fbr-artikels .wp-block-post-template > li,
	.fbr-artikels .wp-block-post-template > li:hover {
		transform: none;
		transition: none;
	}
}

/* De rubriek boven de titel, in dezelfde monoletter als elk ander label. */
.fbr-artikels .wp-block-post-terms {
	font-family: var(--fbr-font-mono);
	font-size: var(--fbr-label-size);
	line-height: 1;
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	color: var(--fbr-bronze-dark);
}

.fbr-artikels .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.entry-content .fbr-artikels .wp-block-post-title {
	margin: 0;
	font-size: 21px;
	line-height: 1.2;
}

.fbr-artikels .wp-block-post-title a {
	color: var(--fbr-teal-deep);
	text-decoration: none;
}

.fbr-artikels .wp-block-post-title a:hover {
	color: var(--fbr-bronze-dark);
}

.entry-content .fbr-artikels .wp-block-post-excerpt {
	margin: 0;
}

.fbr-artikels .wp-block-post-excerpt__excerpt {
	font-size: 16px;
	line-height: 1.68;
}

/* "Lees verder" onderaan de kaart, op één lijn met de andere kaarten — net als
   .fbr-card__more. De marge moet hier wél kunnen werken, vandaar auto boven. */
.fbr-artikels .wp-block-post-excerpt__more-text {
	margin: 14px 0 0;
}

.fbr-artikels .wp-block-post-excerpt__more-link,
.entry-content .fbr-artikels .wp-block-read-more {
	display: block;
	margin-top: auto;
	padding-top: 20px;
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fbr-teal);
}

.fbr-artikels .wp-block-post-date {
	font-family: var(--fbr-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: rgba(30, 74, 66, 0.55);
}

/* ---- De drie korte kolommen: wat we doen / voor wie / hoe ---- */

.fbr-trio .wp-block-column {
	padding-top: 18px;
	border-top: 2px solid var(--fbr-teal);
}

/* ---- Expertisegebieden ----
 *
 * In het ontwerp zijn dit gewone woorden onder een streep, geen knopjes.
 */

.fbr-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 30px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(30, 74, 66, 0.22);
	list-style: none;
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	line-height: 1.9;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.fbr-tags li {
	margin: 0;
}

/* ---- Genummerde uitspraken ---- */

.fbr-quotes {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbr-quote {
	display: flex;
	gap: 26px;
	align-items: flex-start;
	margin: 0;
	padding: 26px 0;
	border-top: 1px solid rgba(30, 74, 66, 0.22);
	transition: background 0.18s;
}

.fbr-quote:last-child {
	border-bottom: 1px solid rgba(30, 74, 66, 0.22);
}

.fbr-quote:hover {
	background: var(--fbr-sage-pale);
}

.fbr-quote__number {
	flex: none;
	width: 26px;
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	line-height: 2;
	color: var(--fbr-bronze-dark);
}

.fbr-quote__text {
	margin: 0;
	font-family: var(--fbr-font-head);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.34;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

/* De sectie zelf: smalle kolom links, uitspraken rechts.
 *
 * De blokken blijven gewoon onder elkaar in de editor staan; het raster zet ze
 * hier naast elkaar. Zo hoeft er niets in kolomblokken en blijft alles los
 * bewerkbaar. */
.fbr-quotes-section > .wp-block-group__inner-container,
.fbr-quotes-section.is-layout-constrained {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 0 58px;
	align-items: start;
}

.fbr-quotes-section .fbr-label,
.fbr-quotes-section h2,
.fbr-quotes-section .fbr-motif,
.fbr-quotes-section .fbr-tags {
	grid-column: 1;
}

.fbr-quotes-section .fbr-motif {
	margin-top: 30px;
}

.fbr-quotes-section .fbr-quotes {
	grid-column: 2;
	grid-row: 1 / span 20;
}

@media (max-width: 900px) {
	.fbr-quotes-section > .wp-block-group__inner-container,
	.fbr-quotes-section.is-layout-constrained {
		grid-template-columns: 1fr;
	}

	.fbr-quotes-section .fbr-quotes {
		grid-column: 1;
		grid-row: auto;
		margin-top: 30px;
	}

	.fbr-quote__text {
		font-size: 21px;
	}
}

/* ---- Een band met cijfers over de volle breedte ---- */

.fbr-statband {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbr-statband li {
	margin: 0;
}

.fbr-statband b {
	display: block;
	font-family: var(--fbr-font-head);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--fbr-gold);
}

.fbr-statband span {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(236, 232, 221, 0.88);
}

/* ---- Cijfers ---- */

.fbr-stat {
	padding-top: 16px;
	border-top: 1px solid rgba(236, 232, 221, 0.3);
}

.fbr-stat__number {
	font-family: var(--fbr-font-head);
	font-size: 46px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
}

.fbr-stat__number span {
	color: var(--fbr-gold);
}

.fbr-stat p {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(236, 232, 221, 0.9);
}

/* ---- Rijtje met opleiding en ervaring ---- */

.fbr-creds {
	display: grid;
	gap: 0;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.fbr-creds li {
	padding: 14px 0;
	border-top: 1px solid rgba(30, 74, 66, 0.25);
}

.fbr-creds strong {
	display: block;
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	color: var(--fbr-teal);
}

.fbr-creds span {
	display: block;
	margin-top: 5px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--fbr-teal-deep);
}

/* ---- De afsluitende oproep ---- */

.fbr-cta-panel {
	align-items: center;
	gap: 48px;
}

.fbr-cta-panel .wp-block-column:last-child {
	flex-basis: 320px;
	flex-grow: 0;
}

/* ---- Een kop met citaat, zoals "Wat klanten zeggen" ---- */

.fbr-quote-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: 28px 26px 30px;
	background: var(--fbr-paper);
	border-left: 3px solid var(--fbr-bronze);
}

.fbr-quote-card__said {
	font-family: var(--fbr-font-head);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.32;
	margin: 0;
	text-wrap: pretty;
}

.fbr-quote-card p:last-child {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--fbr-teal-muted);
}

/* ---- Genummerde stappen ---- */

.fbr-steps {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fbr-step;
}

/* Het nummer hangt links in de marge, buiten de flow.
 *
 * Dit stond eerst als raster met twee kolommen. Dat gaat mis zodra een li meer
 * dan één kind heeft, en dat is hier de regel: "<strong>Analyse.</strong> We
 * brengen je bedrijf..." levert twee items op, met ::before erbij drie. Het
 * derde viel dan naar de volgende rij, in de kolom van 64 pixels — de
 * omschrijving kwam woord per woord onder elkaar te staan terwijl de rest van
 * de regel leeg bleef. Absoluut plaatsen maakt het ongevoelig voor hoeveel
 * kinderen een li heeft, en voor wat er later nog in wordt gezet. */
.fbr-steps li {
	position: relative;
	display: block;
	margin: 0;
	padding: 18px 0 18px 84px;
	border-top: 1px solid rgba(30, 74, 66, 0.22);
	counter-increment: fbr-step;
}

@media (max-width: 600px) {
	.fbr-steps li {
		padding-left: 44px;
	}
}

.fbr-steps li:last-child {
	border-bottom: 1px solid rgba(30, 74, 66, 0.22);
}

.fbr-steps li::before {
	content: "0" counter(fbr-step);
	position: absolute;
	left: 0;
	top: 18px;
	font-family: var(--fbr-font-mono);
	font-size: 12px;
	/* Dezelfde regelhoogte als de tekst, zodat het nummer op de eerste regel
	   uitkomt in plaats van erboven te zweven. */
	line-height: inherit;
	letter-spacing: 0.1em;
	color: var(--fbr-teal);
}

/* ---- Wat er in een traject zit: aantal + omschrijving ---- */

.fbr-includes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 0 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Zelfde aanpak als bij .fbr-steps hierboven: het getal hangt buiten de flow.
   Met een raster van twee kolommen hangt het ervan af hoeveel kinderen een li
   heeft — twee gaat goed, drie valt terug naar een tweede rij in de smalle
   kolom. De CSS hieronder stijlt strong en span alsof het directe kinderen
   zijn, dus die drie-kinderen-vorm is uitdrukkelijk voorzien. */
.fbr-includes li {
	position: relative;
	display: block;
	margin: 0;
	padding: 16px 0 16px 78px;
	border-top: 1px solid rgba(30, 74, 66, 0.22);
}

.fbr-includes b {
	position: absolute;
	left: 0;
	top: 16px;
	font-family: var(--fbr-font-head);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--fbr-teal);
}

.fbr-includes strong {
	display: block;
	font-weight: 500;
	font-size: 15.5px;
	line-height: 1.35;
}

.fbr-includes span {
	display: block;
	margin-top: 4px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--fbr-teal-muted);
}

/* Op goud heeft de gedempte tekstkleur te weinig contrast. */
.fbr-section--gold .fbr-includes span,
.fbr-section--gold .fbr-quote-card p:last-child {
	color: rgba(22, 52, 44, 0.8);
}

/* Op een donkere sectie meekleuren. */
.fbr-section--teal .fbr-includes li {
	border-top-color: rgba(236, 232, 221, 0.28);
}

.fbr-section--teal .fbr-includes b {
	color: var(--fbr-gold);
}

.fbr-section--teal .fbr-includes span {
	color: rgba(236, 232, 221, 0.82);
}

/* ---- Cijfers op een lichte achtergrond ---- */

.fbr-stat--light {
	border-top-color: rgba(30, 74, 66, 0.3);
}

.fbr-stat--light .fbr-stat__number {
	color: var(--fbr-teal);
}

.fbr-stat--light .fbr-stat__number span {
	color: var(--fbr-bronze);
}

.fbr-stat--light p {
	color: var(--fbr-teal-muted);
}

/* ---- Veelgestelde vragen ---- */

.fbr-faq {
	border-top: 1px solid rgba(30, 74, 66, 0.22);
}

.fbr-faq details {
	border-bottom: 1px solid rgba(30, 74, 66, 0.22);
}

.fbr-faq summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--fbr-font-head);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

/* Het standaard driehoekje van de browser weg, beide varianten. */
.fbr-faq summary::-webkit-details-marker {
	display: none;
}

.fbr-faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--fbr-font-body);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--fbr-teal);
	transition: transform 0.18s;
}

.fbr-faq details[open] summary::after {
	transform: rotate(45deg);
}

.fbr-faq details > p {
	margin: 0;
	padding: 4px 0 26px;
	max-width: 76ch;
	color: var(--fbr-teal-muted);
}

/* ---- Formulieren (Fluent Forms) ----
 *
 * Fluent Forms brengt zijn eigen opmaak mee. Deze regels zetten die om naar
 * de stijl van het ontwerp: bone invoervelden met een dunne rand, monolabels
 * en de volle teal knop.
 *
 * Zet het formulier in een groepsblok met de klasse fbr-form om het kader
 * eromheen te krijgen.
 */

.fbr-form {
	padding: 32px 30px;
	background: var(--fbr-paper);
	border: 1px solid rgba(30, 74, 66, 0.22);
}

.fbr-form > * + * {
	margin-top: 18px;
}

.fluentform .ff-el-group {
	margin-bottom: 18px;
}

.fluentform .ff-el-input--label label {
	font-family: var(--fbr-font-body);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1;
	color: rgba(30, 74, 66, 0.85);
	margin-bottom: 8px;
}

.fluentform .ff-el-form-control {
	padding: 13px 14px;
	background: var(--fbr-bone);
	border: 1px solid rgba(30, 74, 66, 0.3);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--fbr-font-body);
	font-size: 15.5px;
	color: var(--fbr-teal-deep);
	transition: border-color 0.18s;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--fbr-teal);
	outline: 2px solid rgba(43, 98, 87, 0.25);
	outline-offset: 1px;
}

.fluentform .ff-el-form-control::placeholder {
	color: rgba(30, 74, 66, 0.45);
}

.fluentform textarea.ff-el-form-control {
	resize: vertical;
	min-height: 120px;
}

.fluentform .ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit {
	padding: 15px 24px;
	background: var(--fbr-teal);
	color: var(--fbr-bone);
	border: 1px solid var(--fbr-teal);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--fbr-font-mono);
	font-size: var(--fbr-label-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background 0.18s, border-color 0.18s;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn.ff-btn-submit:hover {
	background: var(--fbr-teal-deep);
	border-color: var(--fbr-teal-deep);
}

/* ---- De verstuurknop afpakken van Fluent Forms ----
 *
 * Fluent Forms drukt onderaan de pagina nog een eigen regel af, per formulier
 * en met het formulier-id erin:
 *
 *   form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style) {
 *     background-color: var(--fluentform-primary); color: #ffffff }
 *
 * Die staat ná deze stylesheet in het document én weegt zwaarder dan
 * `.fluentform .ff-btn-submit` hierboven (0,3,1 tegen 0,2,0). Gevolg: de knop
 * kwam er fel blauw uit (#1a7efb, de standaardkleur van de plugin), hoe vaak
 * je de regel hierboven ook nakeek. Twee dingen samen trekken dat recht:
 *
 * 1. De variabele zelf naar het huispalet zetten. Die staat op :root, maar
 *    custom properties erven per element — zet je ze op de omhullende div,
 *    dan rekent de regel van de plugin vanzelf met onze kleur. Zo klopt
 *    meteen alles wat Fluent Forms ermee kleurt, niet alleen de knop.
 * 2. De kleurregel hieronder even precies maken als die van de plugin, plus
 *    één klasse. Lichter werkt niet: bij gelijk gewicht wint wie het laatst
 *    in het document staat, en dat is de plugin. Vandaar `form.frm-fluent-form`
 *    en de `:not()` erbij — niet uit koketterie, maar om op (0,4,1) te komen.
 *
 * Let op: `.fluentform` is de omhullende div, niet het formulier zelf. Dat is
 * `form.frm-fluent-form.fluent_form_4`. Een selector als `form.fluentform`
 * raakt dus niets.
 */

.fluentform {
	--fluentform-primary: var(--fbr-teal);
	--fluentform-primary-hover: var(--fbr-teal-deep);
}

.fluentform form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--fbr-teal);
	border-color: var(--fbr-teal);
	color: var(--fbr-bone);
}

.fluentform form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: var(--fbr-teal-deep);
	border-color: var(--fbr-teal-deep);
}

/* Aankruisvakjes en keuzerondjes in de huiskleur. */
.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
	accent-color: var(--fbr-teal);
}

/* Meldingen na het versturen, en foutmeldingen bij een veld. */
.ff-message-success,
.fluentform .ff_submit_success {
	padding: 16px 18px;
	background: var(--fbr-sage-pale);
	border-left: 3px solid var(--fbr-teal);
	color: var(--fbr-teal-deep);
}

.fluentform .error-text,
.fluentform .text-danger {
	font-family: var(--fbr-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--fbr-terracotta);
}

/* Op een donkere sectie meekleuren. */
.fbr-section--teal .fbr-form {
	background: rgba(236, 232, 221, 0.06);
	border-color: rgba(236, 232, 221, 0.25);
}

.fbr-section--teal .fluentform .ff-el-input--label label {
	color: rgba(236, 232, 221, 0.85);
}

.fbr-section--teal .fluentform .ff-el-form-control {
	background: rgba(236, 232, 221, 0.1);
	border-color: rgba(236, 232, 221, 0.3);
	color: var(--fbr-bone);
}

/* Op een donkere sectie draait de knop om naar goud, net als elke andere
 * knop op teal (zie .fbr-section--teal .fbr-btn verderop). Teal op teal zou
 * wegvallen. De tekst wordt dan het donkerste teal, niet het wit dat de
 * plugin voorschrijft — wit op goud leest slecht. */
.fbr-section--teal .fluentform {
	--fluentform-primary: var(--fbr-gold);
	--fluentform-primary-hover: var(--fbr-gold-pale);
}

.fbr-section--teal .fluentform form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--fbr-gold);
	border-color: var(--fbr-gold);
	color: var(--fbr-teal-darkest);
}

.fbr-section--teal .fluentform form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: var(--fbr-gold-pale);
	border-color: var(--fbr-gold-pale);
	color: var(--fbr-teal-darkest);
}

.fbr-section--teal .fluentform input[type="checkbox"],
.fbr-section--teal .fluentform input[type="radio"] {
	accent-color: var(--fbr-gold);
}

/* Keuzelijstjes en hun uitleg mee lichten. */
.fbr-section--teal .fluentform .ff-el-form-check-label,
.fbr-section--teal .fluentform .ff-el-form-check-label span,
.fbr-section--teal .fluentform .ff-el-help-message {
	color: rgba(236, 232, 221, 0.85);
}

/* ---- Knoppen ---- */

.fbr-btn .wp-block-button__link {
	border-radius: 0;
	padding: 17px 24px;
	font-family: var(--fbr-font-mono);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--fbr-teal);
	color: var(--fbr-bone);
	border: 1px solid var(--fbr-teal);
	transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.fbr-btn .wp-block-button__link:hover {
	background: var(--fbr-teal-deep);
	border-color: var(--fbr-teal-deep);
	color: var(--fbr-bone);
}

.fbr-btn--outline .wp-block-button__link {
	background: none;
	color: var(--fbr-teal-deep);
	border: 1px solid rgba(30, 74, 66, 0.4);
}

.fbr-btn--outline .wp-block-button__link:hover {
	background: none;
	border-color: var(--fbr-bronze);
	color: var(--fbr-bronze-dark);
}

/* Op een donkere sectie draaien de knoppen om. */
.fbr-section--teal .fbr-btn .wp-block-button__link {
	background: var(--fbr-gold);
	color: var(--fbr-teal-darkest);
	border-color: var(--fbr-gold);
}

.fbr-section--teal .fbr-btn--outline .wp-block-button__link {
	background: none;
	color: var(--fbr-bone);
	border-color: rgba(236, 232, 221, 0.5);
}

/* ---- Mobiel ---- */

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

	.fbr-hero::before {
		display: none;
	}

	.fbr-quote {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* ============================================================
 * 9. Losse bouwstenen
 * ============================================================ */

/* ---- Het stijgende ruitmotief uit het logo ----
 *
 * Drie ruitjes die groter worden en om beurten opveren: stap na stap hoger.
 * Dit is het handtekeningmotief van het ontwerp; het staat in de hero en mag
 * verder spaarzaam gebruikt worden.
 */

.fbr-motif {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 34px;
}

/* Met het bijschrift ernaast, zoals in de hero. */
.fbr-motif__note {
	align-self: flex-end;
	margin-left: 14px;
	padding-bottom: 4px;
	font-family: var(--fbr-font-mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(30, 74, 66, 0.85);
}

/* Een grotere variant zonder beweging, voor naast een kop. */
.fbr-motif--still > span:not(.fbr-motif__note) {
	animation: none;
}

.fbr-motif--still > span:nth-child(1) { width: 12px; height: 12px; background: var(--fbr-gold); }
.fbr-motif--still > span:nth-child(2) { width: 18px; height: 18px; background: var(--fbr-sage); }
.fbr-motif--still > span:nth-child(3) { width: 24px; height: 24px; background: var(--fbr-teal); }

/* Alleen de ruitjes draaien; het bijschrift ernaast niet. */
.fbr-motif > span:not(.fbr-motif__note) {
	display: block;
	transform: rotate(45deg);
	animation: fbr-rise 4s ease-in-out infinite;
}

.fbr-motif > span:nth-child(1) {
	width: 16px;
	height: 16px;
	background: var(--fbr-gold);
}

.fbr-motif > span:nth-child(2) {
	width: 22px;
	height: 22px;
	background: var(--fbr-bronze);
	animation-delay: 0.3s;
}

.fbr-motif > span:nth-child(3) {
	width: 30px;
	height: 30px;
	background: var(--fbr-teal);
	animation-delay: 0.6s;
}

@keyframes fbr-rise {
	0%, 100% { transform: translateY(0) rotate(45deg); }
	50% { transform: translateY(-6px) rotate(45deg); }
}

/* ---- Het kleine trapje ruitjes naast een label ---- */

.fbr-dots {
	display: inline-flex;
	align-items: flex-end;
	gap: 4px;
	height: 22px;
	vertical-align: middle;
}

.fbr-dots span {
	display: block;
	width: 7px;
	height: 7px;
	background: var(--fbr-bronze);
	transform: rotate(45deg);
}

.fbr-dots span:nth-child(2) {
	margin-bottom: 7px;
	background: var(--fbr-gold);
}

.fbr-dots span:nth-child(3) {
	margin-bottom: 14px;
	background: var(--fbr-gold-pale);
}

/* Een label met het trapje ernaast. */
.fbr-label-row {
	display: flex;
	align-items: center;
	gap: 18px;
}

.fbr-label-row .fbr-label {
	display: inline-block;
}

/* ---- De onthulling van een beeld ----
 *
 * Het beeld schuift van onder naar boven open. In het ontwerp gebeurt dat bij
 * het laden; hier pas wanneer het in beeld komt, want anders speelt het zich
 * af terwijl je er nog niet naar kijkt. assets/js/4br.js zet de klas is-in.
 *
 * LET OP — geen clip-path in de ruststand. Een clip-path die het element
 * volledig wegknipt (inset(0 0 100% 0)) maakt het ook onzichtbaar voor de
 * IntersectionObserver: die rekent met het geknipte vlak, ziet dus altijd een
 * oppervlakte van nul, en meldt het element nooit als "in beeld". De klas
 * is-in werd daardoor nooit gezet en alles met fbr-reveal bleef voorgoed op
 * opacity 0 staan — leeg wit op de pagina. Het wegknippen hoort thuis in de
 * keyframes hieronder, waar het pas speelt nadat de observer heeft gevuurd.
 */

.fbr-reveal {
	opacity: 0;
	transform: scale(1.04);
}

.fbr-reveal.is-in {
	animation: fbr-reveal 1.15s cubic-bezier(0.19, 0.72, 0.2, 1) both;
}

@keyframes fbr-reveal {
	0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.04); }
	60% { opacity: 1; }
	100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
}

/* Zonder JavaScript, en voor wie minder beweging wil, gewoon tonen. */
.no-js .fbr-reveal,
.fbr-reveal.is-done {
	opacity: 1;
	clip-path: none;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fbr-reveal,
	.fbr-reveal.is-in {
		opacity: 1;
		clip-path: none;
		transform: none;
		animation: none;
	}

	.fbr-motif > span {
		animation: none;
	}
}

/* ---- Blokken die opkomen bij het scrollen ----
 *
 * De discrete tegenhanger van fbr-reveal hierboven: zestien pixels omhoog en
 * van doorzichtig naar vol, in zeven tienden van een seconde. Per blok valt
 * het nauwelijks op; over een pagina heen leest het een stuk levendiger.
 *
 * Het verbergen staat hier en niet in JavaScript, en dat is de hele truc. Het
 * script staat onderaan de pagina; zou dát de blokken verbergen, dan zie je ze
 * eerst staan en dan wegspringen. Een selector die vanaf de eerste tekening
 * geldt, heeft dat probleem niet. assets/js/4br.js zet alleen is-op.
 *
 * Alles hangt aan .fbr-beweegt op <html>. Die klasse wordt in de head gezet
 * (inc/setup.php) en alleen wanneer er een IntersectionObserver is en niemand
 * om minder beweging vraagt — en ze wordt er na drie seconden weer afgehaald
 * als het script niet is komen opdagen. Zonder die klasse valt deze hele
 * afdeling weg en staat alles er gewoon.
 *
 * De eerste sectie doet niet mee: .fbr-section ~ .fbr-section selecteert alleen
 * secties die er een vóór zich hebben. Wat boven de vouw staat moet er meteen
 * zijn, en een kop die even op doorzichtig staat telt voor Google als een kop
 * die later verschijnt.
 *
 * Een kolommenrij komt niet als geheel op maar kolom per kolom, zodat drie
 * kaarten naast elkaar na elkaar binnenkomen in plaats van als één blok.
 */

.fbr-beweegt .entry-content > .fbr-section ~ .fbr-section > .wp-block-group__inner-container > *:not(.wp-block-columns):not(.fbr-artikels),
.fbr-beweegt .entry-content > .fbr-section ~ .fbr-section > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column,
.fbr-beweegt .entry-content > .fbr-section ~ .fbr-section > .wp-block-group__inner-container > .fbr-artikels .wp-block-post-template > li {
	opacity: 0;
	transform: translateY(16px);
}

/* opacity en transform staan hier naast de animatie, niet alleen erin. De
   animatie eindigt met `both` op precies deze waarden, dus normaal verandert
   het niets — maar een blok dat al voorbij gescrold is krijgt van het script
   `animation: none` mee (animeren wat niemand ziet heeft geen zin), en dan is
   dit het enige wat het nog zichtbaar maakt. */
.fbr-beweegt .entry-content > .fbr-section ~ .fbr-section > .wp-block-group__inner-container > *.is-op,
.fbr-beweegt .entry-content > .fbr-section ~ .fbr-section > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column.is-op,
.fbr-beweegt .entry-content > .fbr-section ~ .fbr-section > .wp-block-group__inner-container > .fbr-artikels .wp-block-post-template > li.is-op {
	opacity: 1;
	transform: none;
	animation: fbr-op 0.7s cubic-bezier(0.22, 0.68, 0.26, 1) both;
}

@keyframes fbr-op {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* Een kaart is tekst, geen beeld. De uitgesproken onthulling van fbr-reveal —
   openklappen en terugschalen — hoort bij een foto; op een kaart met een kop
   en drie regels is dat te veel van het goede. Staat fbr-reveal op een kaart,
   dan krijgt die dezelfde rustige deining als de rest. Twee klassen wegen
   zwaarder dan de ene van .fbr-reveal, dus dit gaat er netjes overheen. */
.fbr-card.fbr-reveal {
	transform: translateY(16px);
}

.fbr-card.fbr-reveal.is-in {
	animation: fbr-op 0.7s cubic-bezier(0.22, 0.68, 0.26, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.fbr-card.fbr-reveal,
	.fbr-card.fbr-reveal.is-in {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* Een los ruitje, voor koppen en opsommingen in de patronen. */
.fbr-diamond {
	display: inline-block;
	width: 9px;
	height: 9px;
	background: var(--fbr-teal);
	transform: rotate(45deg);
	animation: fbr-drift 5.5s ease-in-out infinite;
}

.fbr-diamond--gold {
	background: var(--fbr-gold);
}

.fbr-diamond--bronze {
	background: var(--fbr-bronze);
}

/* De doorlopende band met expertisegebieden. */
/* De band loopt tot tegen de schermrand, wat er ook omheen staat. */
/* Hetzelfde masker als bij de logo's: de woorden vagen weg in plaats van
   middenin een letter afgekapt te worden. Dat de teal achtergrond op de sectie
   staat en niet hierop, komt goed uit — het masker raakt alleen de tekst, de
   balk zelf blijft doorlopen. Ruimer dan bij de logo's, want deze band loopt
   tot tegen de schermrand. */
.fbr-marquee {
	overflow: hidden;
	user-select: none;
	margin-inline: calc(50% - 50vw);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

@media (max-width: 700px) {
	.fbr-marquee {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
	}
}

.fbr-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	gap: 0;
	animation: fbr-marquee 38s linear infinite;
}

.fbr-marquee__group {
	display: flex;
	align-items: center;
	flex: none;
	gap: 0;
}

.fbr-marquee__item {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-right: 28px;
	font-family: var(--fbr-font-mono);
	font-size: var(--fbr-label-size);
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	white-space: nowrap;
}

.fbr-marquee__dia {
	color: var(--fbr-gold);
	font-size: 9px;
}

@keyframes fbr-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.fbr-marquee__track {
		animation: none;
	}
}

/* ---- Een getuigenis van een klant ----
 *
 * Bewust geen raster binnen de li. Een getuigenis heeft drie onderdelen —
 * foto, citaat en naam — en met grid-template-columns zou het derde onderdeel
 * naar een tweede rij vallen zodra iemand er iets aan toevoegt. Dezelfde val
 * als bij .fbr-steps. Hier staat alles gewoon onder elkaar. */

.fbr-getuigenissen {
	display: grid;
	/* min(340px, 100%) en niet gewoon 340px: een minmax houdt die ondergrens
	   ook aan als de container smaller is, en dan steekt de kaart op een
	   telefoon buiten beeld. */
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: 28px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.fbr-getuigenis {
	/* Een kolom, zodat de naam met margin-top:auto onderaan blijft hangen.
	   Naast elkaar verschillen de citaten in lengte, en zonder dit staat de
	   ene naam hoog en de andere laag. Flex en geen grid: met vaste rijen
	   zou een extra regel in het citaat buiten de kaart vallen. */
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 30px 32px 32px;
	background: var(--fbr-paper);
	border-top: 3px solid var(--fbr-teal);
}

.fbr-section--paper .fbr-getuigenis {
	background: var(--fbr-bone);
}

.fbr-getuigenis__foto {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	object-fit: cover;
	/* Niet op het midden maar wat hoger: bij een staande foto valt het midden
	   op de borst en snijdt de cirkel het voorhoofd af. */
	object-position: 50% 22%;
	margin-bottom: 20px;
}

.fbr-getuigenis__tekst {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--fbr-teal-deep);
}

.fbr-getuigenis__tekst p {
	margin: 0 0 12px;
}

.fbr-getuigenis__tekst p:last-child {
	margin-bottom: 0;
}

/* Met .entry-content ervoor, en niet gewoon .fbr-getuigenis__wie: Kadence zet
   in content.min.css een marge op élke alinea in de inhoud, met de selector
   .single-content p. Die weegt zwaarder dan een losse klasse, dus een regel van
   één klasse op een <p> in de inhoud doet hier helemaal niets — de oude
   margin-top van 20px op deze regel werd dan ook nooit toegepast. Hetzelfde
   geldt voor .fbr-meer hieronder. */
.entry-content .fbr-getuigenis__wie {
	/* auto bovenaan duwt de naam naar de onderkant van de kaart; zie hierboven.
	   De afstand tot het citaat staat daarom in padding en niet in margin. */
	margin: auto 0 0;
	padding-top: 20px;
}

.fbr-getuigenis__wie strong {
	display: block;
	font-family: var(--fbr-font-head);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--fbr-teal-deep);
}

.fbr-getuigenis__wie span {
	display: block;
	margin-top: 3px;
	font-family: var(--fbr-font-mono);
	font-size: 11px;
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	color: var(--fbr-bronze-dark);
}

/* ---- Doorverwijzing naar een volledige pagina ----
 *
 * Staat onder een greep uit een langere reeks — drie van de zeven
 * getuigenissen op de homepage bijvoorbeeld — en wijst naar het geheel.
 * Opzettelijk geen knop: een knop naast de echte knop in de slotsectie
 * maakt onduidelijk wat de bezoeker nu eigenlijk moet doen. */

.entry-content .fbr-meer {
	margin: 30px 0 0;
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fbr-meer a {
	color: var(--fbr-teal);
	text-decoration: none;
	border-bottom: 1px solid rgba(43, 98, 87, 0.35);
	padding-bottom: 2px;
}

.fbr-meer a:hover,
.fbr-meer a:focus-visible {
	color: var(--fbr-teal-deep);
	border-bottom-color: var(--fbr-teal-deep);
}

/* ---- Een video die pas laadt als je erop klikt ----
 *
 * Een gewone YouTube-insluiting haalt bij het openen van de pagina al een
 * half megabyte aan scripts binnen en zet cookies voordat iemand toestemming
 * gaf. Hier staat eerst alleen een afbeelding met een speelknop; assets/js/4br.js
 * wisselt die om voor de speler zodra er geklikt wordt, en gebruikt dan
 * youtube-nocookie.com. Tot die klik gaat er niets naar Google.
 *
 * De knop is een echte <button>, geen div met een klikafhandelaar: zo werkt
 * tab en enter vanzelf en leest voorleessoftware hem als bedienbaar. */

.fbr-video {
	margin: 0;
}

.fbr-video__kaart {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: var(--fbr-teal-darkest);
	overflow: hidden;
	cursor: pointer;
}

.fbr-video__kaart img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.19, 0.72, 0.2, 1), opacity 0.25s;
}

.fbr-video__kaart:hover img,
.fbr-video__kaart:focus-visible img {
	transform: scale(1.04);
	opacity: 0.82;
}

/* De speelknop: een teal cirkel met een driehoek erin, allebei in CSS zodat er
   geen extra bestand voor nodig is. */
.fbr-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fbr-video__play::before {
	content: "";
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--fbr-teal);
	box-shadow: 0 0 0 2px var(--fbr-bone), 0 10px 30px rgba(22, 52, 44, 0.35);
	transition: background 0.2s, transform 0.2s;
}

.fbr-video__play::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	margin-left: 6px;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	border-left: 21px solid var(--fbr-bone);
}

.fbr-video__kaart:hover .fbr-video__play::before,
.fbr-video__kaart:focus-visible .fbr-video__play::before {
	background: var(--fbr-bronze);
	transform: scale(1.06);
}

/* De speelduur, rechtsonder op het beeld — zoals je het van een videospeler
   gewend bent. Staat binnen de knop, dus bij het klikken verdwijnt hij samen
   met het stilstaande beeld. De duur staat ook in het aria-label van de knop;
   dit blokje is daarom aria-hidden, anders leest voorleessoftware het dubbel. */
.fbr-video__duur {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 3px 8px;
	background: rgba(22, 52, 44, 0.82);
	color: var(--fbr-bone);
	font-family: var(--fbr-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

.fbr-video__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* Naam, bedrijf en samenvatting in gewone tekst eronder. Een zoekmachine leest
   niets van wat er in de video gezegd wordt; dit is het enige wat telt. */
.fbr-video__bij {
	margin-top: 16px;
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--fbr-teal-deep);
}

.fbr-video__bij strong {
	display: block;
	font-family: var(--fbr-font-head);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.fbr-video__bij span {
	display: block;
	margin-top: 2px;
	font-family: var(--fbr-font-mono);
	font-size: 11px;
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	color: var(--fbr-bronze-dark);
}

.fbr-video__bij p {
	margin: 12px 0 0;
	font-size: 15.5px;
}

/* Twee video's naast elkaar, één onder de 760.
   Vast op twee en niet op auto-fit: met vier video's geeft auto-fit op een
   breed scherm drie kolommen, en dan hangt de vierde er alleen onder. */
.fbr-videos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px 30px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 760px) {
	.fbr-videos {
		grid-template-columns: minmax(0, 1fr);
	}
}

.fbr-videos > li {
	margin: 0;
}

/* ---- Een reeks lessen die naar YouTube linkt ----
 *
 * Verschil met .fbr-videos hierboven: daar speelt de video in de pagina zelf
 * af, hier gaat de bezoeker naar YouTube. De kaart is daarom een <a> en geen
 * <button>, en heeft bewust geen data-video — assets/js/4br.js luistert op dat
 * attribuut, dus zonder blijft de link gewoon een link.
 *
 * De vormgeving is die van .fbr-video__kaart: dezelfde verhouding, dezelfde
 * speelknop, dezelfde beweging bij hover. Alleen het raster verschilt. */

.fbr-lessen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 28px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

/* Vaste kolomaantallen en geen auto-fit: met elf lessen levert auto-fit op een
   breed scherm vier kolommen en blijven er drie los onderaan hangen. */
@media (max-width: 1040px) {
	.fbr-lessen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 660px) {
	.fbr-lessen {
		grid-template-columns: minmax(0, 1fr);
	}
}

.fbr-lessen > li {
	margin: 0;
}

/* De kaart is hier een link. Zonder deze regel kleurt en onderstreept het
   thema hem als gewone tekstlink — er staat weliswaar geen tekst in, maar de
   focusrand en de kleur van de rand veranderen wel mee. */
a.fbr-video__kaart {
	text-decoration: none;
	color: inherit;
}

/* Kleinere speelknop: de kaarten in dit raster zijn ongeveer een derde van de
   breedte van een .fbr-videos-kaart, en 78 pixels bedekt daar het halve beeld. */
.fbr-lessen .fbr-video__play::before {
	width: 58px;
	height: 58px;
}

.fbr-lessen .fbr-video__play::after {
	margin-left: 4px;
	border-top-width: 10px;
	border-bottom-width: 10px;
	border-left-width: 16px;
}

/* ---- Eén les op een eigen pagina ----
 *
 * De video speelt hier wél in de pagina af, dus dit is de gewone
 * .fbr-video-knop met data-video. Alleen breder, en met een bovengrens: op een
 * scherm van 1500 pixels zou een 16:9-video anders ruim 800 pixels hoog worden
 * en past de rest van de pagina er niet meer naast. */

.fbr-video--groot {
	max-width: 980px;
	margin-inline: auto;
}

/* Vorige les · terug naar het overzicht · volgende les.
   Ruimte ertussen met space-between, zodat het overzicht in het midden blijft
   staan — ook bij de eerste en de laatste les, waar een van de twee pijlen een
   lege plaatshouder is in plaats van een link. */

.entry-content .fbr-lesnav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px 28px;
	margin: 40px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid rgba(43, 98, 87, 0.22);
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	list-style: none;
}

.fbr-lesnav li {
	margin: 0;
}

.fbr-lesnav a {
	color: var(--fbr-teal);
	text-decoration: none;
	border-bottom: 1px solid rgba(43, 98, 87, 0.35);
	padding-bottom: 2px;
}

.fbr-lesnav a:hover,
.fbr-lesnav a:focus-visible {
	color: var(--fbr-teal-deep);
	border-bottom-color: var(--fbr-teal-deep);
}

/* De plaatshouder bij de eerste en de laatste les. */
.fbr-lesnav span {
	color: var(--fbr-bronze-dark);
	opacity: 0.55;
}

/* Op een telefoon onder elkaar: drie stukken mono-tekst naast elkaar persen
   levert één woord per regel op. */
@media (max-width: 620px) {
	.entry-content .fbr-lesnav {
		flex-direction: column;
		gap: 12px;
	}
}

/* ---- Cijfers in beeld ----
 *
 * Geen grafiekbibliotheek. De ring is één SVG waarin ook de percentages en de
 * labels staan, zodat het als één tekening leest en niet als plaatje met een
 * lijstje ernaast.
 *
 * Onder de 720 pixels wordt die tekening te klein om de labels nog te kunnen
 * lezen: daar verdwijnen ze en komt het lijstje eronder in de plaats. Dat
 * lijstje staat altijd in de opmaak — het is wat een zoekmachine leest en wat
 * een schermlezer voorleest — maar het is op een breed scherm onzichtbaar.
 *
 * De kolommen zijn gewone HTML. Daar blijft tekst tekst, en dat leest beter
 * dan letters die met de tekening meeschalen. */

.fbr-ring {
	margin: 0;
}

.fbr-ring svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.fbr-ring__pct {
	font-family: var(--fbr-font-head);
	font-size: 21px;
	font-weight: 500;
}

.fbr-ring__label {
	font-family: var(--fbr-font-body);
	font-size: 16px;
	fill: var(--fbr-teal-deep);
}

.fbr-ring__lijn {
	stroke: rgba(30, 74, 66, 0.4);
	stroke-width: 1;
}

/* Het lijstje: alleen voor voorleessoftware en zoekmachines zolang de labels
   in de tekening zichtbaar zijn. clip-path en niet display:none, want wat
   display:none is wordt ook niet voorgelezen. */
.fbr-ring__legende {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	list-style: none;
}

@media (max-width: 720px) {
	.fbr-ring__pct,
	.fbr-ring__label,
	.fbr-ring__lijn {
		display: none;
	}

	/* De tekening houdt haar verhouding van 820 bij 420, waarvan de ring maar
	   een derde van de breedte inneemt — de rest was ruimte voor de labels die
	   hier net verborgen zijn. Twee keer zo breed maken en een halve breedte
	   naar links schuiven zet de ring weer groot en gecentreerd in beeld. */
	.fbr-ring {
		overflow: hidden;
	}

	.fbr-ring svg {
		width: 200%;
		margin-left: -50%;
	}

	.fbr-ring__legende {
		position: static;
		width: auto;
		height: auto;
		margin: 22px 0 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.fbr-ring__legende li {
		display: grid;
		grid-template-columns: 14px minmax(0, 1fr) auto;
		align-items: baseline;
		gap: 0 12px;
		padding: 7px 0;
		border-bottom: 1px solid rgba(30, 74, 66, 0.14);
		font-size: 15.5px;
	}

	.fbr-ring__legende li:last-child {
		border-bottom: 0;
	}

	.fbr-ring__legende i {
		width: 12px;
		height: 12px;
		background: var(--kleur);
		transform: translateY(1px);
	}

	.fbr-ring__legende b {
		font-weight: 400;
		color: var(--fbr-teal-deep);
	}

	.fbr-ring__legende span {
		font-family: var(--fbr-font-mono);
		font-size: 13px;
		color: var(--fbr-bronze-dark);
	}
}

/* ---- Staande kolommen ---- */

.fbr-kolommenpaar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 44px 56px;
	margin: 36px 0 0;
}

.fbr-kolommen__titel {
	margin: 0 0 20px;
	font-family: var(--fbr-font-mono);
	font-size: var(--fbr-label-size);
	letter-spacing: var(--fbr-label-tracking);
	text-transform: uppercase;
	color: var(--fbr-bronze-dark);
}

.fbr-kolommen {
	display: grid;
	grid-auto-flow: column;
	/* minmax(0,1fr): zonder die nul duwt een label dat net te breed is de hele
	   reeks uit elkaar in plaats van zelf af te breken. */
	grid-auto-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbr-kolommen li {
	display: grid;
	grid-template-rows: auto 170px auto;
	gap: 8px;
	text-align: center;
}

.fbr-kolommen__waarde {
	font-family: var(--fbr-font-head);
	font-size: 19px;
	font-weight: 500;
	color: var(--fbr-teal-deep);
}

/* Het spoor is even hoog als de hoogste staaf; de staaf zelf staat eronderaan
   en krijgt zijn hoogte uit --deel, het aandeel ten opzichte van die hoogste. */
.fbr-kolommen__spoor {
	display: flex;
	align-items: flex-end;
	height: 100%;
	background: linear-gradient(to top, rgba(30, 74, 66, 0.07), rgba(30, 74, 66, 0));
}

.fbr-kolommen__staaf {
	display: block;
	width: 100%;
	height: calc(var(--deel) * 1%);
	background: var(--fbr-teal);
}

.fbr-kolommen__label {
	font-family: var(--fbr-font-mono);
	font-size: 11.5px;
	line-height: 1.4;
	letter-spacing: 0.03em;
	color: var(--fbr-teal-muted);
}

@media (max-width: 480px) {
	.fbr-kolommen li {
		grid-template-rows: auto 130px auto;
	}

	.fbr-kolommen__label {
		font-size: 10px;
	}

	.fbr-kolommen__waarde {
		font-size: 16px;
	}
}

/* Grafiek naast tekst: de tekening links, het verhaal rechts. Met —gedraaid
   staat de tekening rechts; zo wisselen twee grafieken onder elkaar van kant. */
.fbr-duo {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
}

.fbr-duo__tekst > :first-child {
	margin-top: 0;
}

@media (max-width: 900px) {
	.fbr-duo {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Op een smal scherm staat de tekst altijd eerst, ook in de gedraaide
	   variant: eerst lezen waarover het gaat, dan de cijfers. */
	.fbr-duo__tekst {
		order: -1;
	}
}

/* ---- De klantenlogo's ----
 *
 * Dit hangt aan een gewoon galerijblok met de klasse fbr-logos. Zo blijft het
 * beheerbaar: logo's toevoegen of weghalen doe je in de editor, niet in code.
 * assets/js/4br.js maakt er een doorlopende band van door de reeks één keer
 * te dupliceren; zonder JavaScript blijft het een nette galerij in een raster,
 * en dat is een prima terugval — beter dan een band die leeg blijft.
 *
 * Elk logo staat op een witte tegel van vaste maat. De bronbestanden hebben
 * allemaal een andere achtergrond (wit, zwart, gekleurd) en een andere
 * verhouding; de tegel plus object-fit trekt dat optisch gelijk. */

/* WordPress geeft een galerij met genestelde afbeeldingen zelf display:flex
   mee, met .wp-block-gallery.has-nested-images. Blijft dat staan, dan komen de
   twee rijen naast elkaar in plaats van onder elkaar. Vandaar de klassenaam
   erbij: die weegt zwaarder dan de regel van de kern.

   De band blijft binnen de tekstkolom staan, niet van schermrand tot
   schermrand: hij hoort links en rechts gelijk te lopen met de kop erboven.

   Het masker laat de logo's aan beide uiteinden wegvagen in plaats van hard af
   te snijden. Bewust een masker en geen kleurverloop: een verloop moet de
   achtergrondkleur kennen, een masker werkt op elke sectiekleur. */
.wp-block-gallery.fbr-logos.is-band,
.fbr-logos.is-band {
	display: block;
	gap: 0;
	/* De band schuift door te scrollen, niet door de hele reeks te verplaatsen.
	   Een transform-animatie geeft het element in WebKit een eigen
	   compositielaag, en die laag is bij zestig tegels ruim 21.000 pixels
	   breed — ver voorbij de textuurgrens van de grafische kaart. Safari tekent
	   dan alleen het begin en laat de rest leeg; Chrome rekt die grens veel
	   verder op, dus daar viel het niet op. Met scrollen bestaat die laag niet
	   en tekent de browser enkel wat in beeld komt.
	   assets/js/4br.js schuift scrollLeft op. */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: auto;
	/* De schuifbalk hoort hier niet, maar slepen en vegen blijft wel werken —
	   op een telefoon is dat zelfs prettiger dan wachten tot het logo voorbijkomt. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.fbr-logos.is-band::-webkit-scrollbar {
	display: none;
}

.fbr-logos__spoor {
	display: flex;
	width: max-content;
	gap: 16px;
}


/* Ook hier de selectorketen van de kern meeschrijven: die zet op elke
   genestelde afbeelding flex-grow: 1, waardoor een tegel over de hele breedte
   uitrekt in plaats van zijn vaste maat te houden. */
.wp-block-gallery.fbr-logos figure.wp-block-image,
.fbr-logos figure,
.fbr-logos .wp-block-image {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Niet op de reset van Kadence rekenen: met content-box telt de padding bij
	   de maat op en wordt elke tegel 44 pixels te breed. */
	box-sizing: border-box;
	width: 232px;
	height: 124px;
	max-width: 232px;
	margin: 0;
	padding: 20px 22px;
	background: #fff;
}

/* En op de afbeelding zelf: de kern zet daar object-fit: cover en
   width/height 100%, wat een logo zou bijsnijden. */
.wp-block-gallery.fbr-logos figure.wp-block-image img,
.fbr-logos img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	flex: none;
	object-fit: contain;
}

/* Bijschriften van de galerij horen hier niet; de naam staat in de alt-tekst. */
.fbr-logos figcaption {
	display: none;
}

@media (max-width: 700px) {
	.wp-block-gallery.fbr-logos figure.wp-block-image,
	.fbr-logos figure,
	.fbr-logos .wp-block-image {
		width: 186px;
		height: 104px;
		max-width: 186px;
		padding: 16px 18px;
	}
}


/* Een sectie die de volle breedte van het scherm mag nemen. */
.fbr-bleed {
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--fbr-gutter);
}