/*
Theme Name: Titan Fulfilment
Theme URI: https://titanfulfilment.nl/
Author: SiteJob
Author URI: https://sitejob.nl/
Description: Maatwerkthema voor Titan Fulfilment. Bold B2B-logistiek, Nova-vriendelijke content, SEO/GEO-first. Homepage, blog- en kennisbanksjabloon met een gedeelde blokkenbibliotheek. Geen Elementor, zelf-gehoste fonts, licht en donker thema.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: titan-fulfilment
Tags: custom-logo, custom-menu, featured-images, block-patterns, editor-style, wide-blocks, accessibility-ready, translation-ready
*/

/* ==========================================================================
   1. Tokens
   De merkkleuren staan vast (brief/01-brand.md). Daarbovenop een laag
   betekenis-tokens (--bg, --surface, --text): componenten gebruiken alleen die,
   zodat een donkere sectie of het donkere thema niets anders vraagt dan een
   andere set waarden.
   ========================================================================== */

:root {
	/* Merk — vast */
	--brand:        #7A3BF0;
	--brand-deep:   #5B21D6;
	--brand-light:  #9D6BFF;
	--indigo-night: #180A4A;
	--indigo-deep:  #0F0730;

	/* Neutralen met paarse zweem — bewust geen pure grijzen */
	--ink:        #141225;
	--ink-soft:   #4B4860;
	--paper:      #FBFAFF;
	--white:      #FFFFFF;
	--mist:       #F3EFFE;
	--line-soft:  #E4E0F0;
	--line-hard:  #CFC7E6;

	/* Status */
	--ok:     #16A06A;
	--warn:   #C7791A;
	--danger: #C7402B;

	/* Betekenis-tokens — licht thema */
	--bg:            var(--paper);
	--surface:       var(--white);
	--surface-alt:   var(--mist);
	--surface-sink:  #F6F3FD;
	--text:          var(--ink);
	--text-soft:     var(--ink-soft);
	--text-faint:    #6E6A82;
	--line:          var(--line-soft);
	--line-strong:   var(--line-hard);
	--accent:        var(--brand);
	--accent-deep:   var(--brand-deep);
	--accent-wash:   rgba(122, 59, 240, 0.08);
	--on-accent:     #FFFFFF;
	--star:          #F0A93B;

	/* Vorm */
	--radius-xl: 28px;
	--radius-lg: 20px;
	--radius:    14px;
	--radius-sm: 9px;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 8px -2px rgba(24, 10, 74, 0.10);
	--shadow:    0 18px 40px -24px rgba(24, 10, 74, 0.32);
	--shadow-lg: 0 40px 80px -40px rgba(90, 33, 214, 0.45);

	/* Ritme */
	--shell-max: 1200px;
	--gutter:    clamp(18px, 4vw, 40px);
	--section-y: clamp(56px, 8vw, 112px);
	--stack:     clamp(20px, 3vw, 32px);

	/* Type */
	--f-display: "Sora", "Gilroy", system-ui, -apple-system, sans-serif;
	--f-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

	--t-hero:  clamp(2.35rem, 1.35rem + 3.6vw, 4.15rem);
	--t-h1:    clamp(2.05rem, 1.35rem + 2.6vw, 3.3rem);
	--t-h2:    clamp(1.65rem, 1.2rem + 1.7vw, 2.5rem);
	--t-h3:    clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
	--t-lead:  clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
	--t-body:  1rem;
	--t-small: 0.875rem;
	--t-micro: 0.78rem;

	--ease: cubic-bezier(0.22, 0.68, 0.35, 1);

	color-scheme: light dark;
}

/* Donker thema — rollen omgedraaid, accent opgehelderd zodat het leesbaar blijft. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:           var(--indigo-deep);
		--surface:      #1A0B50;
		--surface-alt:  #241461;
		--surface-sink: #150937;
		--text:         #ECE9FA;
		--text-soft:    #B8B2D4;
		--text-faint:   #8E88A8;
		--line:         #2E1F69;
		--line-strong:  #43318A;
		--accent:       var(--brand-light);
		--accent-deep:  #B18CFF;
		--accent-wash:  rgba(157, 107, 255, 0.14);
		--on-accent:    #12063A;
		--shadow-sm:    0 2px 8px -2px rgba(0, 0, 0, 0.5);
		--shadow:       0 18px 40px -24px rgba(0, 0, 0, 0.7);
		--shadow-lg:    0 40px 80px -40px rgba(0, 0, 0, 0.8);
	}
}

:root[data-theme="dark"] {
	--bg:           var(--indigo-deep);
	--surface:      #1A0B50;
	--surface-alt:  #241461;
	--surface-sink: #150937;
	--text:         #ECE9FA;
	--text-soft:    #B8B2D4;
	--text-faint:   #8E88A8;
	--line:         #2E1F69;
	--line-strong:  #43318A;
	--accent:       var(--brand-light);
	--accent-deep:  #B18CFF;
	--accent-wash:  rgba(157, 107, 255, 0.14);
	--on-accent:    #12063A;
	--shadow-sm:    0 2px 8px -2px rgba(0, 0, 0, 0.5);
	--shadow:       0 18px 40px -24px rgba(0, 0, 0, 0.7);
	--shadow-lg:    0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

/*
 * Donkere secties (cijferbanner, harde CTA, footer) draaien dezelfde tokens om
 * binnen hun eigen stuk pagina. Componenten hoeven daardoor geen "op donker"-
 * variant te kennen: ze lezen gewoon --surface en --text.
 */
.on-dark,
.tone-dark,
.section-numbers,
.site-footer {
	--surface:     rgba(255, 255, 255, 0.06);
	--surface-alt: rgba(255, 255, 255, 0.10);
	--text:        #F4F1FF;
	--text-soft:   #BEB6E4;
	--text-faint:  #9A92C4;
	--line:        rgba(255, 255, 255, 0.14);
	--line-strong: rgba(255, 255, 255, 0.26);
	--accent:      #C4A6FF;
	--accent-deep: #D9C6FF;
	--accent-wash: rgba(255, 255, 255, 0.08);
	--on-accent:   var(--indigo-night);
	color: var(--text);
}

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

*,
*::before,
*::after { box-sizing: border-box; }

html {
	/* clip in plaats van hidden: hidden zou position:sticky uitschakelen. */
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: 1.65;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
canvas { max-width: 100%; height: auto; }

img { display: block; }

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-wrap: balance;
	margin: 0 0 0.5em;
	color: var(--text);
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }
h4 { font-size: 1.05rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li + li { margin-top: 0.35em; }

strong, b { font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

blockquote { margin: 0; }

code, kbd, pre { font-family: var(--f-mono); font-size: 0.9em; }

::selection { background: var(--accent); color: var(--on-accent); }

/* Toetsenbordfocus moet altijd te zien zijn — ook op een donkere sectie. */
:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}
.tone-dark :focus-visible,
.section-numbers :focus-visible,
.site-footer :focus-visible { outline-color: #FFFFFF; }

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: 8px; left: 8px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--accent);
	color: var(--on-accent);
	border-radius: var(--radius-sm);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-150%);
	transition: transform 0.18s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.shell {
	width: 100%;
	max-width: calc(var(--shell-max) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.text-accent { color: var(--accent); }

/* Nog aan te leveren materiaal — zichtbaar, maar niet schreeuwerig. */
.is-placeholder {
	background: rgba(199, 121, 26, 0.10);
	box-shadow: inset 0 -1px 0 rgba(199, 121, 26, 0.55);
	border-radius: 3px;
	padding: 0 0.25em;
	color: inherit;
}

/* ==========================================================================
   3. Knoppen en kleine bouwstenen
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.85em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--f-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background-color 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.button .icon { width: 1.1em; height: 1.1em; flex: none; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

.button-primary {
	background: var(--brand);
	color: #FFFFFF;
	box-shadow: 0 12px 24px -14px rgba(90, 33, 214, 0.9);
}
.button-primary:hover { background: var(--brand-deep); color: #FFFFFF; box-shadow: 0 18px 32px -16px rgba(90, 33, 214, 0.95); }

.button-ghost {
	background: var(--surface);
	color: var(--text);
	border-color: var(--line-strong);
}
.button-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

.button-white { background: #FFFFFF; color: var(--indigo-night); }
.button-white:hover { background: #FFFFFF; color: var(--brand-deep); }

.button-outline-light {
	background: transparent;
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.45);
}
.button-outline-light:hover { border-color: #FFFFFF; color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }

.button-small { padding: 0.62em 1.1em; font-size: 0.875rem; }
.button-large { padding: 1.02em 1.9em; font-size: 1.02rem; }

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--accent);
	text-decoration: none;
}
.arrow-link .icon { width: 1.05em; height: 1.05em; transition: transform 0.18s var(--ease); }
.arrow-link:hover .icon { transform: translateX(4px); }
.arrow-link:hover { text-decoration: underline; }

/*
 * Kicker boven een kop. Bewust geen mono-kapitalen: die vallen in elke sectie
 * op dezelfde manier op en gaan de pagina dan overheersen. Een streepje en een
 * gewoon woord in de merkkleur doet hetzelfde werk, rustiger.
 */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0 0 0.9em;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--accent);
}
.eyebrow-dot {
	width: 22px; height: 2px;
	border-radius: 2px;
	background: currentColor;
	flex: none;
}
.eyebrow-term {
	padding: 0.1em 0.6em;
	border-radius: var(--radius-sm);
	background: var(--accent-wash);
	font-weight: 500;
}

.mini-label {
	margin: 0 0 0.4em;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text-faint);
}

.section-heading { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 52px); }
.section-heading.is-center { margin-inline: auto; text-align: center; }
.section-heading.is-center .eyebrow { justify-content: center; }
.section-title { margin: 0 0 0.45em; }
.section-text { margin: 0; color: var(--text-soft); font-size: var(--t-lead); }

.icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }

/* ==========================================================================
   4. Sitehoofd
   ========================================================================== */

.topbar {
	background: var(--indigo-night);
	color: #D9D2F5;
	font-size: var(--t-small);
}
.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 42px;
	padding-block: 6px;
}
.topbar-claim {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
}
.topbar-claim .icon { width: 18px; height: 18px; color: var(--brand-light); flex: none; }
.topbar-contact { display: flex; gap: 20px; margin: 0; }
.topbar-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: #EFEBFF;
	text-decoration: none;
	font-weight: 500;
}
.topbar-contact a:hover { color: #FFFFFF; text-decoration: underline; }
.topbar-contact .icon { width: 16px; height: 16px; color: var(--brand-light); }

.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-header.scrolled {
	border-bottom-color: var(--line);
	box-shadow: var(--shadow-sm);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 84px;
}

.brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex: none;
}
.site-logo {
	/* Het logo is een brede lockup (3,3:1); de hoogte van de balk volgt daaruit. */
	width: clamp(164px, 15vw, 210px);
	height: auto;
}
/*
 * Wit op de donkere voet. brightness(0) maakt alles zwart, invert(1) daarna
 * wit — zo blijft de vorm intact terwijl de donkerblauwe payoff leesbaar wordt.
 * Tussenoplossing tot Titan een echte lichte variant aanlevert.
 */
.site-logo.is-light { filter: brightness(0) invert(1); opacity: 0.95; }
.brand.has-custom-logo img,
.has-custom-logo .custom-logo { max-height: 52px; width: auto; }

/* Het beeldmerk zonder woordmerk, als rustig vlak bij een artikel zonder beeld. */
.logo-mark { display: block; }

.header-panel {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	flex: 1;
	justify-content: flex-end;
}

.main-nav .menu {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.4vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-nav .menu li { margin: 0; position: relative; }
.main-nav a {
	display: block;
	padding: 0.55em 0.2em;
	color: var(--text-soft);
	font-size: 0.94rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--accent); }

/* Tweede niveau: verschijnt bij hover én bij toetsenbordfocus. */
.main-nav .sub-menu {
	position: absolute;
	top: 100%; left: -14px;
	min-width: 220px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .sub-menu a { padding: 0.5em 0.75em; border-radius: var(--radius-sm); }
.main-nav .sub-menu a:hover { background: var(--accent-wash); }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 40px; height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--text-soft);
	cursor: pointer;
	transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle-icon { display: none; grid-area: 1 / 1; }
.theme-toggle-icon .icon { width: 19px; height: 19px; }
:root[data-theme="dark"] .theme-toggle-icon.is-sun { display: block; }
:root[data-theme="light"] .theme-toggle-icon.is-moon { display: block; }
:root:not([data-theme]) .theme-toggle-icon.is-moon { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .theme-toggle-icon.is-moon { display: none; }
	:root:not([data-theme]) .theme-toggle-icon.is-sun { display: block; }
}

.menu-button {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	cursor: pointer;
}
.menu-bars { display: grid; gap: 5px; justify-items: center; }
.menu-bars span {
	display: block;
	width: 20px; height: 2px;
	border-radius: 2px;
	background: var(--text);
	transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.menu-button[aria-expanded="true"] .menu-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-bars span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .menu-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
	.topbar-claim { display: none; }
	.topbar-inner { justify-content: center; }
	.menu-button { display: grid; place-items: center; }

	.header-panel {
		position: absolute;
		top: 100%; left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 16px var(--gutter) 24px;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
		clip-path: inset(0 0 100% 0);
		opacity: 0;
		pointer-events: none;
		transition: clip-path 0.24s var(--ease), opacity 0.18s var(--ease);
	}
	.header-panel.open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
	.main-nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
	.main-nav a { padding: 0.8em 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
	.main-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 14px;
	}
	.header-actions { justify-content: space-between; padding-top: 10px; }
	.header-actions .button { flex: 1; }
}

@media (max-width: 620px) {
	/* Het telefoonnummer blijft staan — dat is op mobiel juist de snelste route. */
	.topbar-contact a[href^="mailto"] span { display: none; }
	.topbar-contact { gap: 20px; }
	.topbar-inner { justify-content: center; }
}

/* De score en de sterren zijn het signaal; de toelichting mag op smal wijken. */
@media (max-width: 560px) {
	.rating-detail { display: none; }
}

/* ==========================================================================
   5. Hero
   Wit als grond, paars als accent. De aura geeft diepte zonder dat de hele
   sectie paars wordt — dat zou de rest van de pagina platslaan.
   ========================================================================== */

.hero {
	position: relative;
	padding-top: clamp(40px, 6vw, 84px);
	padding-bottom: clamp(32px, 5vw, 64px);
	background: var(--bg);
	overflow: clip;
}
.hero-aura {
	position: absolute;
	inset: -30% -10% auto auto;
	width: min(760px, 90vw);
	aspect-ratio: 1;
	background: radial-gradient(circle at 60% 40%, rgba(122, 59, 240, 0.22), rgba(122, 59, 240, 0) 62%);
	pointer-events: none;
	z-index: 0;
}
.hero-inner,
.hero-stats { position: relative; z-index: 1; }

.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0 0 1.2em;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-soft);
}
.hero-eyebrow .eyebrow-dot { background: var(--accent); }

.hero h1 {
	font-size: var(--t-hero);
	font-weight: 800;
	margin: 0 0 0.5em;
	max-width: 15ch;
}
.hero-lead {
	max-width: 52ch;
	margin: 0 0 2em;
	font-size: var(--t-lead);
	color: var(--text-soft);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2em; }

.hero-proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 3vw, 32px);
	padding-top: 1.6em;
	border-top: 1px solid var(--line);
}
.hero-usps { display: grid; gap: 0.45em; margin: 0; padding: 0; list-style: none; }
.hero-usps li {
	position: relative;
	margin: 0;
	padding-left: 1.4em;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.hero-usps li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.72em;
	width: 12px; height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

.hero-stats { margin-top: clamp(36px, 5vw, 64px); }

/* Getekend hero-beeld: een dashboard in plaats van een stockfoto. */
.hero-visual {
	position: relative;
	min-height: 320px;
	padding-block: 34px;
	padding-bottom: clamp(130px, 15vw, 190px);
}

/*
 * De foto draagt de sectie, het dashboard ligt erover. Zo zie je in één blik
 * wie het doet én waarmee — en niet alleen een schermafdruk.
 */
/*
 * De groepsfoto staat op een lichte achtergrond, dus hij hoeft geen kader: op
 * het papieren vlak lijkt het alsof het team in de hero staat. In het donkere
 * thema krijgt hij wel een lichte drager, anders zweeft een wit vlak op donker.
 */
/*
 * De groepsfoto is op een lichte achtergrond geschoten. Blenden met het papier
 * gaf een vaag grijs vlak; een bewuste witte lijst is eerlijker en rustiger.
 */
.hero-photo {
	position: relative;
	margin: 0;
	width: 100%;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: var(--shadow-lg);
}
.hero-photo img {
	width: 100%;
	aspect-ratio: 1600 / 1141;
	object-fit: cover;
	display: block;
}
/* Geen donkere sluier over de foto: die maakte het beeld dof en dat is precies
   waar het om gaat — de mensen moeten helder in beeld staan. */

/*
 * Het paneel hangt rechtsonder half onder de foto door. Eerder lag het over de
 * paarse doos heen, en juist die doos is het merkmoment in dit beeld.
 */
/* Het paneel hangt onder de foto, niet eroverheen — anders staat het halve
   team erachter. */
.mock-panel {
	position: absolute;
	left: -3%;
	right: 44%;
	bottom: 0;
	transform: translateY(76%);
	padding: clamp(14px, 1.7vw, 20px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
}
.mock-panel::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(140deg, rgba(122, 59, 240, 0.55), rgba(122, 59, 240, 0) 45%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.mock-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.mock-head strong { color: var(--text); font-weight: 600; }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(22, 160, 106, 0.16); }
.mock-live {
	margin-left: auto;
	color: var(--text-faint);
	font-size: var(--t-micro);
}
.mock-figure { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mock-head { margin-bottom: 12px; }
/* In het smalle hero-paneel passen alleen het cijfer en twee orderregels. */
.hero-visual .mock-rows li:nth-child(n+3) { display: none; }
.hero-visual .mock-chart { display: none; }
.hero-visual .mock-figure { margin-bottom: 14px; }
.mock-figure-value {
	font-family: var(--f-display);
	font-size: clamp(2.2rem, 3.4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}
.mock-figure-label { font-size: var(--t-small); color: var(--text-soft); }

.mock-chart {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	align-items: end;
	gap: 8px;
	height: 62px;
	margin-bottom: 14px;
	padding: 14px;
	border-radius: var(--radius);
	background: var(--surface-sink);
}
.mock-chart span {
	height: var(--h);
	border-radius: 5px 5px 3px 3px;
	background: linear-gradient(180deg, var(--brand-light), var(--brand));
	opacity: 0.85;
}
.mock-chart span:nth-child(6) { opacity: 1; box-shadow: 0 6px 16px -6px rgba(122, 59, 240, 0.8); }

.mock-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mock-rows li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	font-size: var(--t-small);
}
.mock-sku { font-family: var(--f-mono); color: var(--text-soft); }
.mock-status {
	color: var(--text-faint);
	font-size: var(--t-micro);
	font-weight: 500;
}
.mock-status.is-done { color: var(--ok); }
.mock-status.is-progress { color: var(--accent); }

.mock-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
	font-size: var(--t-small);
}
.mock-chip span { display: flex; flex-direction: column; line-height: 1.25; color: var(--text-soft); }
.mock-chip strong { color: var(--text); font-family: var(--f-display); font-size: 0.98rem; }
.mock-chip-2 { right: 0; top: 6%; }

@media (max-width: 980px) {
	.hero-inner { grid-template-columns: 1fr; }
	.hero h1 { max-width: 18ch; }
	/* De foto blijft ook op mobiel staan — juist daar telt het gezicht. */
	.hero-visual { padding-bottom: 60px; }
	.mock-panel { left: 0; right: 30%; transform: translateY(66%); }
	.mock-chip-2 { display: none; }
}

/* ==========================================================================
   6. Cijferrij en sterrenscore
   ========================================================================== */

.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: clamp(12px, 1.6vw, 20px);
	margin: 0;
	padding: 0;
}
.stat {
	padding: clamp(18px, 2vw, 26px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.stat-value {
	margin: 0 0 0.15em;
	font-family: var(--f-display);
	font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
	line-height: 1;
}
.stat-label {
	margin: 0;
	font-size: var(--t-small);
	color: var(--text-soft);
	font-weight: 500;
}
.stat-note {
	display: block;
	margin-top: 0.5em;
	font-size: var(--t-micro);
	color: var(--text-faint);
	font-weight: 400;
}

.stat-row.tone-dark .stat {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}
.stat-row.tone-dark .stat-value { color: #FFFFFF; }

.stat-row.is-compact { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.stat-row.is-compact .stat { padding: 12px 16px; border-radius: var(--radius); }
.stat-row.is-compact .stat-value { font-size: 1.5rem; }
.stat-row.is-compact .stat-label { font-size: var(--t-micro); }

.rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	color: var(--text);
}
a.rating-badge:hover { border-color: var(--accent); }
.rating-stars { display: inline-flex; gap: 2px; }
.star { position: relative; display: inline-flex; color: var(--line-strong); }
.star .icon { width: 17px; height: 17px; stroke-width: 1.4; }
.star.is-full,
.star.is-half { color: var(--star); }
.star.is-full .icon { fill: var(--star); }
.star-fill {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
	display: inline-flex;
	color: var(--star);
}
.star-fill .icon { fill: var(--star); }
.rating-meta { display: flex; align-items: baseline; gap: 8px; }
.rating-score {
	font-family: var(--f-display);
	font-size: 1.12rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.rating-detail { font-size: var(--t-micro); color: var(--text-faint); }
.rating-badge.size-small { padding: 7px 14px 7px 11px; gap: 9px; }
.rating-badge.size-small .star .icon { width: 14px; height: 14px; }
.rating-badge.size-small .rating-score { font-size: 0.98rem; }
.rating-badge.size-large { padding: 14px 24px 14px 18px; }
.rating-badge.size-large .star .icon { width: 21px; height: 21px; }
.rating-badge.size-large .rating-score { font-size: 1.4rem; }

/* ==========================================================================
   7. Vertrouwensrij
   ========================================================================== */

.section-trust { padding-block: clamp(32px, 4vw, 56px); border-block: 1px solid var(--line); background: var(--surface); }
.section-trust .shell { display: grid; gap: 22px; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.logo-row-label {
	margin: 0;
	font-size: 0.9rem;
	color: var(--text-faint);
	flex: none;
}
.logo-row-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.logo-row-list li { margin: 0; }
.logo-row-list { gap: clamp(16px, 2.6vw, 34px); align-items: center; }
.logo-chip {
	font-family: var(--f-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-faint);
	transition: color 0.16s var(--ease);
}
.logo-chip:hover { color: var(--text); }

/* ==========================================================================
   8. Diensten, cases, stappen
   ========================================================================== */

.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: clamp(16px, 2vw, 24px);
}
.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.4vw, 30px);
	border-top: 2px solid var(--line);
	transition: border-color 0.2s var(--ease);
}
.service-card::before {
	content: "";
	position: absolute;
	top: -2px; left: 0;
	width: 0; height: 2px;
	background: var(--accent);
	transition: width 0.3s var(--ease);
}
.service-card:hover::before { width: 100%; }
.service-title { margin: 0; font-size: 1.28rem; }
.service-text { margin: 0; color: var(--text-soft); font-size: 0.96rem; flex: 1; }
.service-review { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }

.numbers-inner { position: relative; }
.section-numbers {
	position: relative;
	background:
		radial-gradient(circle at 82% 12%, rgba(122, 59, 240, 0.42), transparent 55%),
		linear-gradient(160deg, var(--indigo-night), var(--indigo-deep));
	overflow: clip;
}
.section-numbers > * { position: relative; }
.numbers-footnote {
	margin: clamp(24px, 3vw, 36px) auto 0;
	max-width: 60ch;
	font-size: var(--t-small);
	color: var(--text-soft);
	text-align: center;
}

.case-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin-bottom: clamp(28px, 4vw, 44px);
}
.case-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(22px, 2.4vw, 30px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	position: relative;
	overflow: hidden;
}
.case-card::after {
	content: "";
	position: absolute;
	inset: auto -30% -60% auto;
	width: 220px; height: 220px;
	background: radial-gradient(circle, var(--accent-wash), transparent 70%);
	pointer-events: none;
}
.case-sector {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--text-faint);
}
.case-metric { display: flex; flex-direction: column; margin: 0; }
.case-metric-value {
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.4rem + 1.8vw, 2.7rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
	line-height: 1.05;
}
.case-metric-label { font-size: var(--t-small); color: var(--text-soft); }
.case-title { margin: 6px 0 0; font-size: 1.1rem; }
.case-text { margin: 0; color: var(--text-soft); font-size: 0.94rem; flex: 1; }

.step-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: clamp(18px, 2.4vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.step {
	position: relative;
	margin: 0;
	padding-top: 28px;
	border-top: 2px solid var(--line);
}
.step::before {
	content: "";
	position: absolute;
	top: -2px; left: 0;
	width: 42px; height: 2px;
	background: var(--accent);
}
.step-number {
	display: block;
	margin-bottom: 4px;
	font-family: var(--f-display);
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--accent);
	opacity: 0.28;
}
.step-title { margin: 0 0 0.4em; font-size: 1.12rem; }
.step-text { margin: 0; color: var(--text-soft); font-size: 0.95rem; }

/* ==========================================================================
   9. Reviews
   ========================================================================== */

.review { margin: 0; display: grid; gap: 12px; }
.review-stars { display: inline-flex; gap: 2px; }
.review-quote { margin: 0; }
.review-quote p { margin: 0; color: var(--text); }
.review-source { display: flex; align-items: center; gap: 10px; }
.review-avatar {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	flex: none;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--brand), var(--brand-deep));
	color: #FFFFFF;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.95rem;
}
.review-who { display: flex; flex-direction: column; line-height: 1.3; }
.review-who strong { font-size: 0.92rem; }
.review-who span { font-size: var(--t-micro); color: var(--text-faint); }

.review.size-small { gap: 8px; }
.review.size-small .review-quote p { font-size: 0.92rem; color: var(--text-soft); font-style: italic; }
.review.size-small .star .icon { width: 13px; height: 13px; }
/* In de kleine variant zegt een initialenrondje niets; de naam doet het werk. */
.review.size-small .review-avatar { display: none; }
.review.size-small .review-who strong { font-size: 0.88rem; }

.section-quote { background: var(--surface-alt); }
.quote-inner { display: grid; place-items: center; }
.review.size-feature {
	position: relative;
	max-width: 46ch;
	justify-items: center;
	text-align: center;
	gap: 20px;
}
.review.size-feature .review-mark { color: var(--accent); opacity: 0.28; }
.review.size-feature .review-mark .icon { width: 54px; height: 54px; fill: currentColor; stroke: none; }
.review.size-feature .review-quote p {
	font-family: var(--f-display);
	font-size: clamp(1.35rem, 1rem + 1.7vw, 2.1rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.review.size-feature .star .icon { width: 20px; height: 20px; }

/* ==========================================================================
   10. CTA-blokken
   ========================================================================== */

.cta { --cta-radius: var(--radius-xl); }

.cta-section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 48px);
	padding: clamp(28px, 4vw, 56px);
	border-radius: var(--cta-radius);
}
.cta-section.tone-dark {
	background:
		radial-gradient(circle at 88% 6%, rgba(122, 59, 240, 0.5), transparent 55%),
		linear-gradient(150deg, var(--indigo-night), var(--indigo-deep));
	box-shadow: var(--shadow-lg);
}
.cta-section.tone-soft { background: var(--surface-alt); }
.cta-section.tone-light { background: var(--surface); border: 1px solid var(--line); }
.cta-section .cta-body { flex: 1 1 min(460px, 100%); }
.cta-section .cta-title { margin: 0 0 0.4em; font-size: var(--t-h2); }
.cta-section .cta-text { margin: 0; color: var(--text-soft); max-width: 52ch; }
.cta-section .cta-actions { display: grid; gap: 12px; justify-items: start; }
.cta-section .cta-rating { margin-top: 1.5em; }

.cta-inline {
	display: grid;
	gap: 16px;
	margin-block: clamp(28px, 4vw, 44px);
	padding: clamp(20px, 2.4vw, 28px);
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	background: var(--surface-alt);
}
.cta-inline.tone-light { background: var(--surface); }
.cta-inline .cta-title { margin: 0 0 0.35em; font-family: var(--f-display); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; }
.cta-inline .cta-text { margin: 0; font-size: 0.95rem; color: var(--text-soft); }
.cta-inline .cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cta-inline .eyebrow { margin-bottom: 0.7em; }

.cta-aside { display: grid; gap: 14px; }
.cta-aside .cta-title { margin: 0 0 0.35em; font-family: var(--f-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; }
.cta-aside .cta-text { margin: 0; font-size: 0.9rem; color: var(--text-soft); }
.cta-aside .cta-actions { display: grid; gap: 10px; }
.cta-aside .button { width: 100%; }

.cta-phone {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.cta-phone .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.cta-phone a { font-weight: 600; }
.tone-dark .cta-phone a { color: #FFFFFF; }

.section-final-cta { padding-block: clamp(48px, 6vw, 96px); }
.resource-final-cta { padding-block: clamp(40px, 5vw, 72px); }

/* ==========================================================================
   11. Artikel: blog en kennisbank
   Eén sjabloon, twee varianten. Het verschil is een accentnuance en het label,
   zodat een lezer ziet in welk deel van de site hij zit zonder dat het twee
   verschillende ontwerpen worden.
   ========================================================================== */

.resource[data-variant="kennisbank"] {
	--accent: var(--brand-deep);
	--accent-wash: rgba(91, 33, 214, 0.10);
}
:root[data-theme="dark"] .resource[data-variant="kennisbank"] { --accent: #B18CFF; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .resource[data-variant="kennisbank"] { --accent: #B18CFF; }
}

.breadcrumbs { margin-bottom: 1.4em; font-size: var(--t-small); }
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.6em; margin: 0; }
.breadcrumbs li + li::before {
	content: "";
	width: 5px; height: 5px;
	border-top: 1.5px solid var(--line-strong);
	border-right: 1.5px solid var(--line-strong);
	transform: rotate(45deg);
	flex: none;
}
.breadcrumbs a { color: var(--text-faint); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text-soft); font-weight: 500; }

.resource-header { padding-top: clamp(28px, 4vw, 52px); }
.resource-header-inner { max-width: 900px; }
.resource-title { margin: 0 0 0.5em; font-size: var(--t-h1); font-weight: 800; }
.resource-intro {
	margin: 0 0 1.6em;
	font-size: var(--t-lead);
	color: var(--text-soft);
	max-width: 62ch;
}

.byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(14px, 2.5vw, 30px);
	padding: 16px 0;
	border-block: 1px solid var(--line);
}
.byline-author { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.byline-photo img,
.byline-photo .avatar {
	width: 48px; height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--surface);
	box-shadow: 0 0 0 1px var(--line);
}
.byline-name,
.byline-detail { display: flex; flex-direction: column; line-height: 1.35; font-size: 0.92rem; }
.byline-name small,
.byline-detail small {
	font-size: 0.78rem;
	color: var(--text-faint);
}
.byline-author:hover .byline-name strong { color: var(--accent); }

.resource-banner { margin-top: clamp(24px, 3vw, 36px); }
.banner {
	position: relative;
	margin: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--surface-alt);
}
.banner-image { width: 100%; aspect-ratio: 1360 / 420; object-fit: cover; }
.banner.is-fallback {
	display: grid;
	place-items: center;
	aspect-ratio: 1360 / 320;
	background:
		radial-gradient(circle at 78% 30%, rgba(122, 59, 240, 0.35), transparent 55%),
		linear-gradient(140deg, var(--indigo-night), var(--indigo-deep));
	border-color: transparent;
}
.banner-grid { display: none; }
.banner-mark { position: relative; }
.banner-mark .logo-mark { width: clamp(56px, 8vw, 84px); height: auto; opacity: 0.9; }
.banner-label {
	position: absolute;
	left: 22px; bottom: 18px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.82rem;
	font-weight: 500;
}

.resource-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
	padding-block: clamp(32px, 5vw, 56px);
}
.resource-body.is-single-column { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.resource-main { min-width: 0; max-width: 72ch; }

/* Inhoudsopgave */
.toc {
	margin-bottom: clamp(28px, 3vw, 40px);
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.toc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	list-style: none;
	font-family: var(--f-display);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after {
	content: "";
	width: 9px; height: 9px;
	border-right: 2px solid var(--text-faint);
	border-bottom: 2px solid var(--text-faint);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s var(--ease);
	flex: none;
	margin-left: auto;
}
.toc[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.toc-count {
	font-family: var(--f-body);
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--text-faint);
}
.toc-list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
	display: grid;
	gap: 2px;
}
.toc-list li { margin: 0; counter-increment: toc; }
.toc-list a {
	display: flex;
	gap: 0.75em;
	padding: 0.42em 0.5em;
	border-radius: var(--radius-sm);
	color: var(--text-soft);
	font-size: 0.94rem;
	text-decoration: none;
}
.toc-list a::before {
	content: counter(toc) ".";
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--accent);
	flex: none;
	min-width: 1.1em;
}
.toc-list a:hover { background: var(--accent-wash); color: var(--accent); }

/* Lopende tekst */
.entry-content { font-size: 1.05rem; }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 {
	margin-top: 1.9em;
	margin-bottom: 0.5em;
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
	scroll-margin-top: 110px;
}
.entry-content h3 {
	margin-top: 1.6em;
	margin-bottom: 0.45em;
	scroll-margin-top: 110px;
}
.entry-content p { color: var(--text-soft); }
.entry-content strong { color: var(--text); }
.entry-content ul,
.entry-content ol { color: var(--text-soft); padding-left: 1.25em; }
.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul li { position: relative; padding-left: 1.6em; }
.entry-content ul li::before {
	content: "";
	position: absolute;
	left: 0.35em; top: 0.72em;
	width: 7px; height: 7px;
	border-radius: 2px;
	background: var(--accent);
	transform: rotate(45deg);
}
.entry-content a { font-weight: 500; }
.entry-content img,
.entry-content figure { border-radius: var(--radius-lg); overflow: hidden; }
.entry-content figcaption {
	margin-top: 0.6em;
	font-size: var(--t-small);
	color: var(--text-faint);
	text-align: center;
}
.entry-content blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--accent);
	font-family: var(--f-display);
	font-size: 1.18rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--text);
}
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	display: block;
	overflow-x: auto;
}
.entry-content th,
.entry-content td { padding: 0.7em 0.9em; border-bottom: 1px solid var(--line); text-align: left; }
.entry-content th { font-weight: 600; color: var(--text); }
.entry-content pre {
	padding: 18px;
	border-radius: var(--radius);
	background: var(--surface-sink);
	overflow-x: auto;
}

.resource-sources { margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid var(--line); }
.resource-sources h2 { font-size: 1.1rem; }
.resource-sources ol { font-size: 0.92rem; color: var(--text-soft); }

/* Meelopende CTA in de zijkolom.
   De kolom moet zich uitrekken: met align-items:start op het raster is de
   zijkolom precies zo hoog als de kaart zelf, en dan heeft sticky geen ruimte
   om mee te lopen. */
.resource-aside { min-width: 0; align-self: stretch; }
.aside-inner {
	position: sticky;
	top: 104px;
	padding: clamp(20px, 2vw, 26px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

@media (max-width: 1024px) {
	.resource-body { grid-template-columns: minmax(0, 1fr); }
	.resource-main { max-width: none; }
	.resource-aside { display: none; }
}

/* Sticky balk op smallere schermen */
.sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 80;
	padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--surface) 94%, transparent);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--line);
	box-shadow: 0 -10px 30px -20px rgba(24, 10, 74, 0.6);
	transform: translateY(110%);
	transition: transform 0.24s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta[hidden] { display: none; }
.sticky-cta-inner { display: flex; align-items: center; gap: 14px; }
.sticky-cta-text { display: flex; flex-direction: column; margin: 0; line-height: 1.3; flex: 1; min-width: 0; }
.sticky-cta-text strong { font-size: 0.94rem; }
.sticky-cta-text span { font-size: var(--t-micro); color: var(--text-faint); }
.sticky-cta-close {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	flex: none;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
}
.sticky-cta-close:hover { color: var(--text); border-color: var(--line-strong); }
.sticky-cta-close .icon { width: 15px; height: 15px; }
@media (min-width: 1025px) {
	/* Op desktop doet de zijkolom dit werk al; twee keer dezelfde vraag leidt af. */
	.sticky-cta { display: none; }
}

/* FAQ */
.resource-faq { padding-block: clamp(24px, 3vw, 40px); }
.faq-section { max-width: 860px; }
.faq-accordion { display: grid; gap: 10px; }
.faq-item {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
	transition: border-color 0.16s var(--ease);
}
.faq-item[open] { border-color: var(--accent); }
.faq-item > summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: -0.01em;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
	content: "";
	width: 14px; height: 14px;
	margin-left: auto;
	flex: none;
	background:
		linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat,
		linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
	transition: transform 0.2s var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(90deg); background-size: 100% 2px, 0 100%; }
.faq-answer { padding: 0 22px 20px; color: var(--text-soft); font-size: 0.98rem; }
.faq-answer > *:first-child { margin-top: 0; }

/* Auteurskaart */
.resource-author { padding-bottom: clamp(24px, 3vw, 40px); }
.author-card {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 3vw, 32px);
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface-alt);
}
.author-card-photo { flex: none; }
.author-card-photo img,
.author-card-photo .avatar {
	width: 112px; height: 112px;
	border-radius: var(--radius-lg);
	object-fit: cover;
	border: 3px solid var(--surface);
	box-shadow: var(--shadow-sm);
}
.author-card-body { flex: 1 1 min(360px, 100%); }
.author-card-name { margin: 0 0 0.15em; font-size: 1.35rem; }
.author-card-role { margin: 0 0 0.8em; font-size: 0.92rem; color: var(--accent); font-weight: 600; }
.author-card-bio { margin: 0 0 1.1em; color: var(--text-soft); font-size: 0.98rem; max-width: 60ch; }
.author-card-links { display: flex; flex-wrap: wrap; gap: 20px; }
.author-card-links .icon { width: 16px; height: 16px; }
.author-card-recent { margin-top: 1.6em; padding-top: 1.2em; border-top: 1px solid var(--line-strong); }
.author-card-recent ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.author-card-recent li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.author-card-recent a { font-size: 0.95rem; font-weight: 500; text-decoration: none; }
.author-card-recent a:hover { text-decoration: underline; }
.author-card-recent span {
	font-size: 0.8rem;
	color: var(--text-faint);
}

/* ==========================================================================
   12. Overzichten en kaarten
   ========================================================================== */

.archive-header { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(20px, 3vw, 32px); }
.archive-header-inner { max-width: 780px; }
.archive-title { margin: 0 0 0.45em; font-size: var(--t-h1); font-weight: 800; }
.archive-intro { margin: 0; font-size: var(--t-lead); color: var(--text-soft); }
.archive-header .author-card { margin-top: 1.8em; }
.archive-body { padding-bottom: clamp(40px, 5vw, 72px); }

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: clamp(16px, 2vw, 26px);
}
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	overflow: hidden;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
/* Eén klikvlak over de hele kaart, maar met de titel als toegankelijke naam. */
.card-link { position: absolute; inset: 0; z-index: 2; }
.card-link:focus-visible { outline-offset: -4px; }
.card-media { position: relative; }
.card-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-image.is-fallback {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(circle at 70% 30%, rgba(122, 59, 240, 0.35), transparent 55%),
		linear-gradient(140deg, var(--indigo-night), var(--indigo-deep));
}
.card-image.is-fallback .logo-mark { width: 52px; height: auto; opacity: 0.9; }
.card-type {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--accent);
}
.card-body { display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2vw, 24px); flex: 1; }
.card-type { margin: 0; }
.card-title { margin: 2px 0 0; font-size: 1.12rem; }
.card:hover .card-title { color: var(--accent); }
.card-text { margin: 0; font-size: 0.92rem; color: var(--text-soft); flex: 1; }
.card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: var(--t-micro);
	color: var(--text-faint);
}
.card-author { font-weight: 600; color: var(--text-soft); }
.card-reading { margin-left: auto; }

.section-related { background: var(--surface-alt); }

.pagination { margin-top: clamp(32px, 4vw, 48px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px; height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text-soft);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.empty-state {
	padding: clamp(32px, 5vw, 64px);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-xl);
	text-align: center;
	color: var(--text-soft);
}
.empty-state p { margin-bottom: 1.5em; }

.search-form { display: flex; gap: 10px; max-width: 460px; }
.search-form label { flex: 1; }
.search-field,
.entry-content input[type="text"],
.entry-content input[type="email"] {
	width: 100%;
	padding: 0.8em 1.1em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--text);
	font-family: inherit;
	font-size: 0.95rem;
}
.search-field:focus-visible { border-color: var(--accent); }
.search-submit {
	padding: 0.8em 1.4em;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
}
.error-search { margin-top: 2em; }

/* ==========================================================================
   13. Footer
   ========================================================================== */

.site-footer {
	/* Elke sjabloon eindigt op een sectie met eigen onderruimte; nog een marge
	   erbij zou een gat van bijna tweehonderd pixels geven. */
	margin-top: 0;
	background:
		radial-gradient(circle at 12% 0%, rgba(122, 59, 240, 0.35), transparent 45%),
		linear-gradient(180deg, var(--indigo-night), var(--indigo-deep));
	color: var(--text);
}
.footer-proof {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(16px, 3vw, 32px);
	padding-block: clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--line);
}
.footer-proof .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
	.footer-proof { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
	.footer-proof .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer-proof .rating-badge { background: rgba(255, 255, 255, 0.08); border-color: var(--line-strong); color: #FFFFFF; }
.footer-proof .rating-detail { color: var(--text-soft); }

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
	padding-block: clamp(40px, 5vw, 64px);
}
.footer-pitch { margin: 1.4em 0 1.8em; color: var(--text-soft); font-size: 0.95rem; max-width: 40ch; }
.footer-heading {
	margin: 0 0 1em;
	font-family: var(--f-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #FFFFFF;
}
.footer-column .menu,
.footer-column ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-column li { margin: 0; }
.footer-column a { color: var(--text-soft); text-decoration: none; font-size: 0.94rem; }
.footer-column a:hover { color: #FFFFFF; text-decoration: underline; }

.footer-contact address { font-style: normal; display: grid; gap: 12px; }
.footer-contact address a,
.footer-address { display: flex; align-items: flex-start; gap: 0.6em; color: var(--text-soft); font-size: 0.94rem; text-decoration: none; }
.footer-contact .icon { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 2px; }
.footer-legal-numbers { margin-top: 1.4em; font-size: var(--t-micro); color: var(--text-faint); line-height: 1.8; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 20px;
	border-top: 1px solid var(--line);
	font-size: var(--t-small);
	color: var(--text-faint);
}
.footer-legal .menu { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.footer-legal li { margin: 0; }
.footer-legal a { color: var(--text-faint); text-decoration: none; }
.footer-legal a:hover { color: #FFFFFF; text-decoration: underline; }

@media (max-width: 900px) {
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: minmax(0, 1fr); }
	.footer-bottom { justify-content: flex-start; }
}

/* ==========================================================================
   14. Beweging
   Drie lagen: een intro bij het laden, onthullen bij het scrollen, en twee
   dingen die de lezer echt helpen (leesvoortgang en een meelopende
   inhoudsopgave). Alles op transform en opacity — de rest van de eigenschappen
   dwingt de browser tot hertekenen. Bij prefers-reduced-motion valt de hele
   laag weg en staat alles meteen op zijn eindpositie.
   ========================================================================== */

@keyframes titan-in {
	from { opacity: 0; transform: translate3d(0, 22px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes titan-in-right {
	from { opacity: 0; transform: translate3d(28px, 12px, 0) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

@keyframes titan-bar {
	from { transform: scaleY(0.05); }
	to   { transform: scaleY(1); }
}

/* ---- Intro bij het laden: alleen de hero, want die is direct in beeld ---- */
.hero-copy > *,
.hero-visual > * {
	animation: titan-in 0.75s var(--ease) both;
}
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.19s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.26s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.33s; }
.hero-visual > * { animation-name: titan-in-right; }
.hero-visual .mock-panel { animation-delay: 0.22s; }
.hero-visual .mock-chip-1 { animation-delay: 0.52s; }
.hero-visual .mock-chip-2 { animation-delay: 0.42s; }

.mock-chart span {
	transform-origin: bottom center;
	animation: titan-bar 0.7s var(--ease) both;
}
.mock-chart span:nth-child(1) { animation-delay: 0.45s; }
.mock-chart span:nth-child(2) { animation-delay: 0.51s; }
.mock-chart span:nth-child(3) { animation-delay: 0.57s; }
.mock-chart span:nth-child(4) { animation-delay: 0.63s; }
.mock-chart span:nth-child(5) { animation-delay: 0.69s; }
.mock-chart span:nth-child(6) { animation-delay: 0.75s; }
.mock-chart span:nth-child(7) { animation-delay: 0.81s; }

/* ---- Onthullen bij het scrollen -----------------------------------------
 * De attributen worden door JavaScript gezet, niet in de HTML: zonder script
 * staat er dus nooit iets onzichtbaar op de pagina.
 */
[data-anim] {
	opacity: 0;
	transition:
		opacity 0.65s var(--ease),
		transform 0.75s var(--ease),
		clip-path 0.85s var(--ease);
	transition-delay: var(--anim-delay, 0ms);
}
[data-anim="up"]    { transform: translate3d(0, 26px, 0); }
[data-anim="rise"]  { transform: translate3d(0, 44px, 0) scale(0.98); }
[data-anim="side"]  { transform: translate3d(-22px, 0, 0); }
[data-anim="mask"]  { clip-path: inset(0 0 105% 0); transform: translate3d(0, 14px, 0); }

[data-anim].is-in {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 -25% 0);
}

/* ---- Leesvoortgang ------------------------------------------------------- */
.reading-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 95;
	background: transparent;
	pointer-events: none;
}
.reading-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--brand), var(--brand-light));
	transform: scaleX(var(--progress, 0));
	transform-origin: left center;
	transition: transform 0.1s linear;
}

/* ---- Meelopende inhoudsopgave ------------------------------------------- */
.toc-list a.is-current {
	background: var(--accent-wash);
	color: var(--accent);
	font-weight: 600;
}

/* ---- Sitehoofd krimpt een beetje mee ------------------------------------ */
.header-inner { transition: min-height 0.24s var(--ease); }
.site-header.scrolled .header-inner { min-height: 72px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
	[data-anim] { opacity: 1; transform: none; clip-path: none; }
	.reading-progress { display: none; }
	.button:hover,
	.card:hover { transform: none; }
}

/* ==========================================================================
   15. Blokeditor — de patronen uit patterns/ krijgen dezelfde vorm
   ========================================================================== */

.wp-block-group.has-titan-surface { background: var(--surface-alt); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 40px); }
.entry-content .wp-block-image img { border-radius: var(--radius-lg); }
.entry-content .wp-block-button__link { border-radius: var(--radius-pill); font-weight: 600; }
.alignwide { max-width: min(1200px, 100%); }
.alignfull { width: 100%; }

/* ==========================================================================
   16. Printen — een tarievenpagina wordt uitgeprint meegenomen naar overleg
   ========================================================================== */

@media print {
	.topbar, .site-header, .sticky-cta, .resource-aside, .site-footer,
	.section-final-cta, .resource-final-cta, .cta { display: none !important; }
	body { background: #FFFFFF; color: #000000; }
	.entry-content a::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}

/* Zelf getekende auteursfoto — geen verzoek naar Gravatar. */
.author-avatar-image.is-initials {
	display: grid;
	place-items: center;
	width: var(--avatar-size, 48px);
	height: var(--avatar-size, 48px);
	border-radius: 50%;
	background: linear-gradient(140deg, var(--brand), var(--brand-deep));
	color: #FFFFFF;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: calc(var(--avatar-size, 48px) * 0.36);
	letter-spacing: 0.02em;
	flex: none;
}
.author-card-photo .author-avatar-image.is-initials { border-radius: var(--radius-lg); }

/* ==========================================================================
   17. De mensen
   Een dienst waarbij je je hele voorraad uit handen geeft, verkoopt niet op
   een dashboard alleen. Foto's uit het eigen magazijn, en één gezicht met een
   naam en een nummer eronder.
   ========================================================================== */

.section-team { background: var(--surface-alt); }

.team {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}
.team-copy .section-heading { margin-bottom: clamp(20px, 3vw, 28px); }

.team-contact {
	padding: clamp(18px, 2vw, 24px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.team-location {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin: 1.4em 0 0;
	font-size: var(--t-small);
	color: var(--text-soft);
}
.team-location .icon { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 2px; }

/* Twee foto's die verspringen — een strak raster oogt als een stockpagina. */
.team-photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
	align-items: start;
}
.team-photos .team-photo-2 { margin-top: clamp(24px, 4vw, 52px); }
.team-photo { margin: 0; }
.team-photo img {
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow);
}
.team-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
/* Bijschrift onder de foto in plaats van eroverheen. */
.team-photo figcaption {
	padding: 10px 2px 0;
	color: var(--text-soft);
	font-size: 0.84rem;
	font-weight: 500;
}


@media (max-width: 900px) {
	.team { grid-template-columns: minmax(0, 1fr); }
	.team-photos .team-photo-2 { margin-top: 0; }
}

/* ---- Persoonskaart ------------------------------------------------------- */

.person { display: flex; align-items: center; gap: 14px; }

.person-photo {
	width: 64px; height: 64px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--surface-alt);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo.is-empty {
	display: grid;
	place-items: center;
	border: 1px dashed var(--line-strong);
	font-size: 0.68rem;
}
.person-photo.is-empty .is-placeholder { padding: 0.1em 0.35em; }

.person-body { min-width: 0; }
.person-role {
	margin: 0;
	font-size: 0.8rem;
	color: var(--text-faint);
}
.person-name {
	margin: 0 0 0.15em;
	font-family: var(--f-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}
.person-contact { margin: 0; }
.person-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
}
.person-contact a:hover { text-decoration: underline; }
.person-contact .icon { width: 15px; height: 15px; }
.person-note {
	margin: 0.5em 0 0;
	font-size: var(--t-micro);
	color: var(--text-faint);
}

.person-inline .person-photo { width: 46px; height: 46px; }
.person-inline .person-name { font-size: 0.95rem; }
.person-inline .person-contact a { font-size: 0.88rem; }

.cta-person {
	margin-top: 1.4em;
	padding-top: 1.2em;
	border-top: 1px solid var(--line);
}
.tone-dark .person-photo.is-empty { border-color: rgba(255, 255, 255, 0.35); }
.tone-dark .person-contact a { color: #FFFFFF; }