/*
 * Foundation-CSS (fase 4A).
 *
 * Dit bestand herbruikt de bestaande, goedgekeurde merktokens uit de
 * huidige static build (spotlezz.vercel.app/style.css: --primary-blue,
 * --vuur, --text-dark, --light-grey, --border-color, Poppins/Montserrat).
 * Er wordt hier bewust GEEN visueel herontwerp gedaan — alleen de schaal
 * die nodig is om header, footer, breadcrumb, next-hop bar, statenblok en
 * de full-bleed hero (WORDPRESS-BUILD-PLAN §5.1) correct en responsive te
 * laten renderen. Sectie-specifieke styling (diensten-grid, klantcase-
 * kaarten, FAQ-accordion, ...) hoort bij de content-fasen 4B/4C.
 */

:root {
	--spotlezz-blue: #1a8fe3;
	--spotlezz-orange: #ff9100;
	--spotlezz-ink: #1f2937;
	--spotlezz-light: #f9fafb;
	--spotlezz-border: #e5e7eb;
	--spotlezz-white: #ffffff;
	--spotlezz-font-body: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
	--spotlezz-font-heading: 'Montserrat', 'Poppins', sans-serif;
	--spotlezz-max-width: 1280px;
}

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

html {
	overflow-x: hidden;
}

body {
	margin: 0;
	overflow-x: hidden;
	max-width: 100vw;
	font-family: var(--spotlezz-font-body);
	color: var(--spotlezz-ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--spotlezz-font-heading);
	line-height: 1.2;
	margin: 0 0 .5em;
	/* Lange, aan-elkaar-geschreven Nederlandse samenstellingen (bv.
	   "Showroomschoonmaak", "Kinderopvangschoonmaak") hebben geen spatie
	   om op te breken — zonder dit liep zo'n woord op mobiel over de rand
	   van zijn container heen i.p.v. te wrappen. */
	overflow-wrap: break-word;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---------- skip-link (regel 3: exact één) ---------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--spotlezz-ink);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
	border-radius: 0 0 6px 0;
}
.skip-link:focus {
	left: 0;
}

/* ---------- topbar ---------- */
.top-bar {
	background: #eef7ff;
	color: var(--spotlezz-ink);
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 5%;
	border-bottom: 1px solid #dcebfa;
}
.top-bar .usp { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-weight: 500; }
.top-bar a { color: var(--spotlezz-ink); text-decoration: none; font-weight: 600; transition: color .2s ease; }
.top-bar a:hover { color: var(--spotlezz-blue); }
@media (max-width: 700px) {
	/* 1-op-1 van de referentie: de USP-tekst ("Innovatief en flexibel" /
	   "Jarenlange ervaring" + reviewbadge) verdwijnt op mobiel, alleen
	   telefoon/e-mail blijven staan — anders knelt alles op één regel. */
	.top-bar { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 8px 5%; font-size: 11.5px; }
	.top-bar .usp { display: none; }
	.top-bar .contact-info { flex-wrap: wrap; justify-content: center; gap: 12px; }
}
.review-badge { display: inline-flex; gap: 6px; align-items: center; }
.review-stars { color: #facc15; letter-spacing: 1px; }

/* ---------- header ---------- */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 5%;
	background: #1a8fe3;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
	position: sticky;
	top: 0;
	z-index: 100;
}
.logo a { display: block; font-family: var(--spotlezz-font-heading); font-weight: 700; font-size: 20px; color: #fff; text-decoration: none; }
.logo img { display: block; height: 26px; width: auto; }
.main-navigation { flex: 1 1 auto; display: flex; justify-content: center; }
.primary-menu { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; align-items: center; }
.primary-menu a { text-decoration: none; font-weight: 600; font-size: 14.5px; color: #fff; transition: color .2s ease; }
.primary-menu a:hover { color: var(--spotlezz-orange); }
/* 1-op-1 van de referentie: "nav a.is-current { color: var(--accent-orange) }" — de sectie waar de bezoeker nu in zit, licht op in de navbar. */
.primary-menu a.is-current { color: var(--spotlezz-orange); }

/* ---------- Diensten-dropdown (1-op-1 van .dropdown/.dropdown-content) ---------- */
.dropdown { position: relative; display: inline-block; padding: 10px 0; }
.dropbtn { display: inline-flex; align-items: center; gap: 5px; }
.icon-caret { transition: transform .3s ease; }
.dropdown:hover .icon-caret { transform: rotate(180deg); }
.dropdown-content {
	visibility: hidden; opacity: 0; position: absolute; top: 100%; left: -15px;
	background-color: var(--spotlezz-white); min-width: 240px;
	box-shadow: 0 15px 35px rgba(0,0,0,.15); z-index: 1001;
	border-top: 3px solid var(--spotlezz-orange); border-radius: 0 0 12px 12px;
	overflow: hidden; transform: translateY(10px);
	transition: visibility .3s ease, opacity .3s ease, transform .3s ease;
}
.dropdown-content a {
	color: var(--spotlezz-ink); padding: 13px 18px; text-decoration: none;
	display: block; font-size: 14px; font-weight: 500;
	border-bottom: 1px solid var(--spotlezz-border); transition: all .2s ease;
}
.dropdown-content a:last-child { border-bottom: none; }
.dropdown-content a:hover { background: var(--spotlezz-light); color: var(--spotlezz-blue); padding-left: 23px; }
.dropdown-heading {
	display: block; padding: 10px 18px 4px; font-size: 10.5px; text-transform: uppercase;
	letter-spacing: .09em; color: #9ca3af; font-weight: 700;
}
.dropdown:hover .dropdown-content { visibility: visible; opacity: 1; transform: translateY(0); }
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px;
	padding: 12px 24px; border-radius: 999px; text-decoration: none;
	transition: transform .3s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s ease, background .3s ease;
}
.btn-orange {
	background: linear-gradient(135deg, var(--spotlezz-orange), #ff6b00); color: #fff; border: none;
	box-shadow: 0 4px 15px rgba(255, 145, 0, .4);
}
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255, 145, 0, .45); color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.8); }
.btn-outline-white:hover { background: rgba(255,255,255,.15); border-color: #fff; transform: translateY(-2px); }
.btn-outline-dark { background: transparent; color: var(--spotlezz-ink); border: 1.5px solid var(--spotlezz-ink); }
.btn-outline-dark:hover { background: var(--spotlezz-ink); color: #fff; transform: translateY(-2px); }
.mobile-menu-btn {
	align-items: center; justify-content: center;
	background: var(--spotlezz-light); border: 1px solid var(--spotlezz-border); border-radius: 8px;
	width: 44px; height: 44px; padding: 0; cursor: pointer;
	color: var(--spotlezz-ink); /* explicit, not inherited-and-hoped-for: the SVG icons use currentColor */
	flex: none;
	display: none; /* alleen zichtbaar onder 900px, zie media query hieronder */
}
.mobile-menu-btn:hover { background: var(--spotlezz-border); }

/* ---------- mobiele navigatie (1-op-1 van .mobile-nav-overlay) ----------
   [hidden] verwijdert het paneel volledig uit de layout (display:none) —
   dat voorkomt de referentie's eigen gedocumenteerde bug (main.js regel
   115-121): een off-canvas paneel dat niet ook uit de flow gehaald wordt,
   maakt het hele document breder dan de viewport op een telefoon. De
   .open-klasse (toegevoegd ná het weghalen van [hidden], zie theme.js)
   triggert vervolgens de slide-in transition. */
.mobile-nav-overlay {
	position: fixed; inset: 0; z-index: 999;
	background: #111827;
	display: flex; flex-direction: column; padding: 20px 5%;
	transform: translateX(100%); opacity: 0; visibility: hidden;
	transition: transform .4s cubic-bezier(.77,0,.175,1), opacity .4s ease, visibility .4s ease;
}
.mobile-nav-overlay[hidden] { display: none; }
.mobile-nav-overlay.open { transform: translateX(0); opacity: 1; visibility: visible; }
.mobile-nav-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 28px;
}
.mobile-nav-header img { height: 28px; filter: brightness(0) invert(1); }
.close-menu-btn {
	background: transparent; border: 0; padding: 8px; cursor: pointer;
	color: #fff; transition: transform .3s ease, color .3s ease;
}
.close-menu-btn:hover { transform: scale(1.1) rotate(90deg); color: var(--spotlezz-orange); }
.mobile-nav-links { display: flex; flex-direction: column; gap: 18px; flex: 1; overflow-y: auto; padding-bottom: 20px; }
.mobile-nav-links a {
	color: #fff; font-size: 19px; font-weight: 700; text-decoration: none; display: block;
	transition: color .3s ease, transform .3s ease;
}
.mobile-nav-links a.sub-link { font-size: 15px; font-weight: 400; color: #d1d5db; padding-left: 15px; margin-top: -8px; }
.mobile-nav-links a:hover { color: var(--spotlezz-orange); transform: translateX(8px); }
.mobile-nav-links a.is-current { color: var(--spotlezz-orange); }
/* sub-link staat standaard op font-weight 400 (lichter dan de hubs)
   — bij is-current is dat te subtiel om op te vallen tussen de andere
   diensten, dus vet 'm ook op (gemeld: geen zichtbare "je staat hier"
   markering in het diensten-submenu). */
.mobile-nav-links a.sub-link.is-current { font-weight: 700; }
.mobile-nav-ctas { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); }
.mobile-nav-ctas .btn { width: 100%; justify-content: center; padding: 15px; font-size: 16px; }

@media (max-width: 900px) {
	.main-navigation, .header-ctas { display: none; }
	.mobile-menu-btn { display: flex; }
}

/* ---------- page-hero (subpagina's: pillar/case/locatie/vraag + hubs) ---------- */
.page-hero {
	position: relative;
	padding: 90px 5% 70px;
	/* 15% i.p.v. center (50%): deze hero-secties zijn breed en relatief
	   kort, dus een echte center-crop van een "medewerker aan het werk"-
	   foto sneed het hoofd bovenaan af. De referentie doet zelf hetzelfde
	   (background-position: center 20-30% op vergelijkbare foto's). */
	background: var(--spotlezz-ink) center 15% / cover no-repeat;
	color: #fff;
	min-height: 320px;
	display: flex;
	align-items: center;
}
.page-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.1) 100%);
	z-index: 0;
}
.page-hero-fallback { background-image: none !important; }
.page-hero-fallback .page-hero-overlay { background: linear-gradient(135deg, #0f172a, #1f2937); }
.page-hero-content { position: relative; z-index: 1; max-width: 700px; }
.page-hero-content .breadcrumb { padding: 0; margin-bottom: 18px; }
.page-hero-kicker { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--spotlezz-orange); font-weight: 700; margin-bottom: 10px; }
.page-hero h1 { font-size: clamp(26px, 3.6vw, 42px); margin-bottom: 0; color: #fff; }
.page-hero-intro { margin-top: 14px; font-size: 16px; line-height: 1.6; color: #e2e8f0; max-width: 60ch; }

@media (max-width: 600px) {
	.page-hero { padding: 60px 6% 50px; min-height: 240px; }
}

/* ---------- breadcrumb ---------- */
.breadcrumb { padding: 10px 5% 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; font-size: 12.5px; color: #6b7280; }
.breadcrumb a { text-decoration: none; color: #6b7280; }
.breadcrumb [aria-current] { color: var(--spotlezz-ink); font-weight: 600; }

/* Lichte variant zodra de breadcrumb op een donkere foto staat
   (bínnen .page-hero of .hero-content) i.p.v. op een witte achtergrond. */
.page-hero-content .breadcrumb ol,
.hero-content .breadcrumb ol { color: rgba(255,255,255,.75); }
.page-hero-content .breadcrumb a,
.hero-content .breadcrumb a { color: rgba(255,255,255,.85); }
.page-hero-content .breadcrumb a:hover,
.hero-content .breadcrumb a:hover { color: var(--spotlezz-orange); }
.page-hero-content .breadcrumb [aria-current],
.hero-content .breadcrumb [aria-current] { color: #fff; }
.page-hero-content .breadcrumb-sep,
.hero-content .breadcrumb-sep { color: rgba(255,255,255,.5); }
.hero-content .breadcrumb { padding: 0 0 14px; }

/* ---------- hero: full-bleed (APPROVED, §5.1) ---------- */
.hero-full-bleed {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	/* 15% i.p.v. center (50%), zelfde reden als .page-hero hierboven: op
	   een smalle/lange mobiele viewport snijdt een echte center-crop het
	   hoofd van de medewerker op de foto af. */
	background: var(--spotlezz-ink) center 15% / cover no-repeat;
	color: #fff;
	padding: 60px 5%;
	isolation: isolate;
	overflow: hidden;
}
.hero-full-bleed.hero-placeholder {
	background-image: linear-gradient(135deg, #0f172a, #1f2937);
}
.hero-overlay {
	position: absolute;
	inset: 0;
	/* Contrast-laag boven de foto zodat tekst leesbaar blijft ongeacht het
	   onderliggende beeld — 1-op-1 van .hero-overlay op spotlezz.vercel.app. */
	background: linear-gradient(135deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .15) 100%);
	z-index: 0;
}
/* min-width: 0 is nodig omdat .hero-full-bleed een flex-container is —
   zonder dit wint het default min-width:auto van een flex-item en kan
   .hero-content (en daarmee de H1/USP-pills/knoppen erin) nooit smaller
   worden dan de langste onbreekbare inhoud, wat op mobiel een horizontale
   overflow van de hele hero veroorzaakte (gemeld op de dienstpagina's). */
.hero-content { position: relative; z-index: 1; max-width: 640px; min-width: 0; width: 100%; }
.hero-content h1 span { color: var(--spotlezz-blue); }
.trust-badge {
	display: inline-flex; align-items: center; margin-bottom: 14px;
	background: rgba(255,255,255,.9); color: var(--spotlezz-ink);
	-webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
	padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
	box-shadow: 0 4px 15px rgba(0,0,0,.15);
	transition: transform .3s ease, box-shadow .3s ease;
}
.trust-badge:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.trust-badge .review-stars { color: #facc15; }
.hero-kicker { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--spotlezz-blue); font-weight: 700; margin-bottom: 8px; }
/* overflow-wrap: lange, aan-elkaar-geschreven Nederlandse samenstellingen
   ("Showroomschoonmaak") hebben geen spatie om op te breken. Zonder dit
   liet de browser zo'n woord over de rand heen lopen i.p.v. wrappen, en
   sneed .hero-full-bleed's overflow:hidden het zichtbaar af (gemeld op
   mobiel — Pixel 7-breedte, 412px). */
.hero-content h1 { font-size: clamp(33px, 5.3vw, 64px); margin-bottom: 10px; overflow-wrap: break-word; }
.hero-content h2 { font-size: clamp(18px, 2.4vw, 26px); font-weight: 600; margin-bottom: 16px; color: #fff; }
.hero-intro { max-width: 55ch; color: #e2e8f0; margin-bottom: 24px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ---------- chat-pill (1-op-1) ---------- */
.chat-widget-pill {
	position: absolute; bottom: 30px; right: 5%; z-index: 10;
	display: flex; align-items: center; gap: 14px;
	background: rgba(255,255,255,.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255,255,255,.3); padding: 8px 8px 8px 18px; border-radius: 50px;
	text-decoration: none; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.15); transition: all .3s ease;
}
.chat-widget-pill:hover { background: rgba(255,255,255,.25); transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0,0,0,.25); }
.chat-pill-text { display: flex; flex-direction: column; text-shadow: 0 2px 4px rgba(0,0,0,.3); }
.chat-pill-title { font-size: 13.5px; font-weight: 700; }
.chat-pill-subtitle { font-size: 12.5px; font-weight: 500; opacity: .9; }
.chat-pill-avatar { position: relative; width: 44px; height: 44px; flex: none; }
.chat-pill-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.online-dot { position: absolute; bottom: 1px; right: 1px; width: 11px; height: 11px; background: #00e676; border-radius: 50%; border: 2px solid #fff; }
@media (max-width: 700px) { .chat-widget-pill { display: none; } }
@media (max-width: 700px) {
	/* 1-op-1 van .hero-buttons/.hero-buttons .btn in de referentie:
	   knoppen stapelen vol-breed i.p.v. naast elkaar te blijven staan
	   en de tekst te knijpen. */
	.hero-buttons { flex-direction: column; width: 100%; gap: 12px; }
	.hero-buttons .btn { width: 100%; justify-content: center; }
}
.placeholder-note {
	/* This is the actual root cause the fase-4B preview traced the mobile
	   overflow to (the mobile-sticky-cta measurement was a downstream
	   symptom, not the source — see PREVIEW-FIXES-REPORT.md). As an
	   inline-block with no width limit, its shrink-to-fit sizing could
	   exceed the hero's available width on narrow viewports and drag the
	   whole document wider. display:block + max-width:100% removes the
	   shrink-to-fit calculation entirely; overflow-wrap covers any single
	   long word as a second line of defence. */
	position: relative; z-index: 1; margin-top: 20px; font-size: 12px;
	background: rgba(255,255,255,.15); display: block; max-width: 100%; box-sizing: border-box;
	padding: 6px 12px; border-radius: 4px; overflow-wrap: break-word;
}

@media (max-width: 600px) {
	.hero-full-bleed { min-height: 440px; padding: 40px 6%; }
}

/* ---------- statenblok (antwoordblok) ----------
   1-op-1 van de referentie's .trust-bar: één witte kaart met kolommen
   gescheiden door verticale lijnen, i.p.v. vier losse mini-kaartjes.
   De negative-margin "over de hero-foto heen schuiven"-variant is een
   losse modifier (.stat-block-overlap) — die mag alleen aanstaan op
   plekken waar met zekerheid niets anders vóór het blok staat, anders
   schuift de kaart over andere inhoud heen i.p.v. over de hero. */
.stat-block {
	display: grid;
	/* auto-fit i.p.v. een vaste repeat(4, 1fr): blokken met minder dan 4
	   items (bv. het 3-koloms case-hero-statenblok: Branche/Locatie/
	   Klant sinds) kregen anders een lege 4e kolom en werden de 3 echte
	   kolommen te smal, waardoor lange woorden zoals "Sportschool" of
	   "Amsterdam" midden in het woord afbraken. */
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0;
	max-width: 1100px;
	margin: 0 auto 24px;
	padding: 25px 40px;
	background: var(--spotlezz-white);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.stat-block-overlap {
	position: relative; z-index: 3;
	margin-top: -30px;
}
.stat {
	text-align: center; padding: 0 10px;
	border-right: 1px solid var(--spotlezz-border);
	min-width: 0; /* laat het label wrappen i.p.v. de grid-track breder te duwen dan de viewport */
}
.stat:last-child { border-right: none; }
.stat b { display: block; font-family: var(--spotlezz-font-heading); font-size: clamp(16px, 4vw, 22px); font-weight: 700; overflow-wrap: break-word; }
.stat span { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; overflow-wrap: break-word; }

@media (max-width: 700px) {
	.stat-block { grid-template-columns: repeat(2, 1fr); gap: 16px 0; padding: 20px; }
	.stat-block-overlap { margin-top: -20px; }
	.stat { border-right: none; border-bottom: 1px solid var(--spotlezz-border); padding-bottom: 12px; }
	.stat:nth-child(2n) { border-right: none; }
	.stat:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
}

/* ---------- persoonskaart ---------- */
.person-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--spotlezz-border); border-radius: 10px; background: var(--spotlezz-white); max-width: 560px; }
.person-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.person-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--spotlezz-light); border: 1px solid var(--spotlezz-border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; color: var(--spotlezz-ink); flex: none; }
.person-name { display: block; font-weight: 700; }
.person-role { display: block; font-size: 13px; color: #6b7280; margin-bottom: 4px; }
.person-linkedin { font-size: 12.5px; color: var(--spotlezz-blue); text-decoration: none; }
.person-quote { font-style: italic; margin-top: 10px; color: #374151; }

/* ---------- next-hop bar (regel 5: exact één, exact 3 routes) ---------- */
.next-hop-bar {
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	gap: 10px;
	background: var(--spotlezz-ink);
	max-width: var(--spotlezz-max-width);
	margin: 40px auto;
	padding: 14px;
	border-radius: 10px;
}
.next-hop-card {
	background: #1e293b; border-radius: 8px; padding: 16px; color: #cbd5e1; text-decoration: none; min-width: 0;
	transition: transform .3s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s ease;
}
.next-hop-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.next-hop-cta, .next-hop-card.next-hop-cta { background: linear-gradient(135deg, var(--spotlezz-orange), #ff6b00); color: #fff; box-shadow: 0 4px 15px rgba(255,145,0,.35); }
.next-hop-card.next-hop-cta:hover { box-shadow: 0 12px 28px rgba(255,145,0,.4); }
.hop-kind { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; color: inherit; opacity: .8; }
.hop-title { display: block; font-weight: 700; font-size: 14.5px; }

@media (max-width: 700px) {
	.next-hop-bar { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
.site-footer {
	position: relative; padding: 80px 5% 30px; margin-top: 40px; color: #fff;
	background-image: url('https://spotlezz.nl/wp-content/uploads/2026/01/Background-1.jpg');
	background-size: cover; background-position: center;
}
.footer-overlay { position: absolute; inset: 0; background: rgba(15,25,35,.9); z-index: 1; }
.footer-container { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; max-width: var(--spotlezz-max-width); margin: 0 auto; }
.footer-col { flex: 1; min-width: 180px; }
.footer-col:first-child { flex: 1.5; }
.footer-logo { margin-bottom: 15px; }
.footer-logo img { height: 45px; width: auto; max-width: 100%; }
.footer-desc { font-size: 14px; line-height: 1.6; color: #ccc; margin-bottom: 15px; max-width: 250px; font-weight: 300; }
.footer-col h3 { font-size: 18px; font-weight: 600; margin-bottom: 20px; color: #fff; }
.footer-nap { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 10px; }
.social-icons { display: flex; gap: 10px; margin-top: 16px; }
.social-icons a {
	display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px;
	background: rgba(255,255,255,.08); color: #fff; transition: background .3s ease;
}
.social-icons a:hover { background: var(--spotlezz-orange); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links a { color: #ccc; text-decoration: none; font-size: 14px; font-weight: 300; transition: color .3s; }
.footer-links a:hover { color: #fff; }
.footer-contact { font-size: 14px; color: #ccc; line-height: 1.6; font-weight: 300; margin-top: 20px; }
.footer-contact span { display: block; margin-bottom: 10px; }
.footer-contact-label { font-weight: 600; margin-right: 4px; }
.footer-contact a { color: #ccc; text-decoration: none; }
.footer-contact a:hover { color: #fff; }
.footer-bottom { position: relative; z-index: 2; max-width: var(--spotlezz-max-width); margin: 50px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; font-size: 13.5px; color: #ccc; font-weight: 300; }
.footer-bottom-links a { color: #ccc; text-decoration: none; transition: color .3s; }
.footer-bottom-links a:hover { color: #fff; }
@media (max-width: 700px) { .footer-bottom { flex-direction: column; text-align: center; } }

/* ---------- mobile sticky CTA ---------- */
.mobile-sticky-cta { display: none; }
@media (max-width: 700px) {
	.mobile-sticky-cta {
		display: flex; align-items: center; gap: 8px; position: fixed; bottom: 0; left: 0; width: 100%;
		background: var(--spotlezz-white); padding: 10px 5%; border-top: 1px solid var(--spotlezz-border); z-index: 500;
		box-sizing: border-box; /* the 5% padding must be counted inside the 100% width, not added on top of it */
	}
	/* Same flex min-content trap as the grid items elsewhere in this file:
	   flex items default to min-width:auto (content-based), so "Offerte
	   aanvragen" refused to shrink below its own unbroken width and pushed
	   this fixed, full-width bar past the viewport edge — which was in turn
	   dragging the whole document's scroll width wider, making every grid
	   below it lay out against a too-wide canvas. min-width:0 lets the
	   button shrink and its label wrap instead. */
	.mobile-sticky-cta .btn { flex: 1; min-width: 0; text-align: center; padding: 12px 14px; font-size: 13px; white-space: nowrap; }
}

/* ---------- generieke content-placeholder (fase 4A) ---------- */
.content-wrap { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 32px 5%; }
.content-placeholder {
	max-width: var(--spotlezz-max-width);
	margin: 0 auto;
	padding: 24px 5%;
	color: #6b7280;
	font-size: 14px;
	font-style: italic;
}

/* ================================================================
 * Homepage-secties (fase 4B) — herbruiken dezelfde tokens hierboven,
 * geen nieuwe kleuren/fonts geïntroduceerd.
 * ================================================================ */

/* ---------- antwoordblok ---------- */
.answer-block { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 8px 5% 0; }
.answer-intro { max-width: 70ch; color: #374151; font-size: 15px; }

/* ---------- diensten, twee assen ---------- */
.services-block { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 36px 5%; background: var(--spotlezz-light); border-radius: 20px; }
.services-axis-title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin: 24px 0 14px; }
.services-axis-branche { color: var(--spotlezz-blue); }
.services-axis-dienst { color: var(--spotlezz-orange); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.service-tile {
	display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--spotlezz-border); border-radius: 10px; text-decoration: none; color: var(--spotlezz-ink);
	background: var(--spotlezz-white); box-shadow: 0 4px 15px rgba(0,0,0,.04);
	transition: transform .35s cubic-bezier(.175,.885,.32,1.275), box-shadow .35s ease, border-color .35s ease;
	min-width: 0; /* see .stat comment — prevents this grid item from forcing the track (and viewport) wider */
}
.service-tile:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(26,143,227,.14); border-color: rgba(26,143,227,.4); }
.service-tile img { display: block; width: 100%; height: 110px; object-fit: cover; transition: transform .5s ease; }
.service-tile:hover img { transform: scale(1.05); }
.service-tile-label { padding: 12px; font-weight: 600; font-size: 14px; overflow-wrap: break-word; }

/* ---------- werkgebied ---------- */
.work-area-block { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 28px 5%; background: var(--spotlezz-light); border-radius: 20px; }
.location-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pill {
	display: inline-block; padding: 9px 18px; background: var(--spotlezz-white);
	border: 1px solid var(--spotlezz-border); border-radius: 999px; color: var(--spotlezz-ink);
	font-weight: 600; font-size: 13px; text-decoration: none;
	max-width: 100%; overflow-wrap: break-word;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.pill:hover { border-color: var(--spotlezz-blue); color: var(--spotlezz-blue); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(26,143,227,.12); }

/* ---------- eigen fotografie ---------- */
.photography-block { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 36px 5%; }
.photography-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 16px; }
.photography-item { min-width: 0; }
.photography-item img, .photo-placeholder-box {
	width: 100%; height: 220px; object-fit: cover; border-radius: 10px;
	background: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 8px, #f3f4f6 8px, #f3f4f6 16px);
	display: block;
}
.photography-item figcaption { margin-top: 8px; font-size: 13px; color: #6b7280; overflow-wrap: break-word; }

/* ---------- reviews ---------- */
.reviews-block { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 36px 5%; background: var(--spotlezz-light); border-radius: 20px; }
/*
 * Flex i.p.v. grid zodat een laatste, niet-volle rij gecentreerd staat in
 * plaats van links met een gat ernaast. Met drie reviews bleef er tot nu toe
 * een lege vierde kolom staan; met vijf zou er een losse kaart linksonder
 * hangen. De kaartbreedte blijft exact een kwart, dus kleur, vorm, schaduw
 * en hover-gedrag veranderen niet — alleen de verdeling over de rij.
 */
.reviews-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	align-items: flex-start;
}
.reviews-grid > .review-card {
	flex: 1 1 230px;
	max-width: calc(25% - 18px);
}
.review-card {
	background: var(--spotlezz-white);
	border-left: 4px solid var(--spotlezz-orange);
	border-radius: 4px;
	padding: 24px;
	margin: 0;
	box-shadow: 0 4px 15px rgba(0,0,0,.05);
	min-width: 0;
	align-self: start;
	transition: transform .35s cubic-bezier(.175,.885,.32,1.275), box-shadow .35s ease;
}
.review-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 32px rgba(0,0,0,.08);
}
@media (max-width: 1000px) {
	.reviews-grid > .review-card {
		max-width: calc(50% - 12px);
	}
}
@media (max-width: 700px) {
	.reviews-grid > .review-card {
		max-width: 100%;
	}
}
.review-text-wrap {
	min-width: 0;
}
.review-card p.review-text {
	font-style: italic;
	margin: 12px 0 18px;
	overflow-wrap: break-word;
}
.review-card--long .review-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden;
	max-height: 12.6em;
}
.review-card--long .review-toggle:checked ~ .review-text {
	display: block;
	max-height: none;
	overflow: visible;
}
.review-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.review-more {
	display: inline-block;
	margin: -8px 0 16px;
	color: var(--spotlezz-blue);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.review-more:hover {
	text-decoration: underline;
}
.review-more-close {
	display: none;
}
.review-toggle:checked ~ .review-more .review-more-open {
	display: none;
}
.review-toggle:checked ~ .review-more .review-more-close {
	display: inline;
}
.review-author { display: flex; align-items: center; gap: 12px; }
/* Toont het echte klantlogo (rechthoekig, contain) i.p.v. een ronde
   portretfoto — er is geen bevestigd echt portret per review, wél een
   bevestigd echt klantlogo (zie inc/site-options.php). */
.review-author img { width: 56px; height: 44px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--spotlezz-border); padding: 4px; flex: none; }
/* Fallback voor het uitzonderlijke geval dat een review-foto leeg is:
   initiaal-avatar i.p.v. een lege ruimte. */
.review-avatar {
	width: 44px; height: 44px; border-radius: 50%; flex: none;
	background: var(--spotlezz-blue); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700;
}
.review-role { display: block; font-size: 12.5px; color: #6b7280; }
.review-linkedin { display: inline-block; font-size: 12.5px; color: var(--spotlezz-blue); text-decoration: none; margin-top: 2px; }
.review-linkedin:hover { text-decoration: underline; }
.reviews-footnote { text-align: center; margin-top: 20px; font-size: 13.5px; color: #6b7280; }
.reviews-footnote a { color: var(--spotlezz-blue); }

/* ---------- branche-grid (1-op-1 uit spotlezz.vercel.app/style.css) ---------- */
.branche-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; margin-bottom: 20px; }
@media (max-width: 991px) { .branche-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .branche-grid { grid-template-columns: 1fr; } }

.branche-card {
	display: block; position: relative; border-radius: 12px; overflow: hidden;
	text-decoration: none; aspect-ratio: 16 / 10; background: #000;
	transform: translateZ(0); isolation: isolate;
}
.branche-card:focus-visible { outline: 3px solid var(--spotlezz-blue); outline-offset: 2px; }
.branche-img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .3s ease-out; object-position: bottom;
}
.branche-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.4) 0%, transparent 40%);
	transition: background .3s ease-out;
}
.branche-card:hover .branche-img { transform: scale(1.04); object-position: bottom; }
.branche-card:hover .branche-scrim { background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 45%); }
.branche-label {
	position: absolute; bottom: 24px; left: 24px; right: 24px; color: #fff;
	font-size: 18px; font-weight: 600; font-family: var(--spotlezz-font-heading);
	display: flex; align-items: center; gap: 8px; line-height: 1.2; margin: 0;
	/* Eigen compositing-laag: voorkomt een bekend Chromium-renderartefact
	   (tekst-"ghosting"/dubbele belijning) bij absoluut gepositioneerde
	   tekst bovenop een overflow:hidden + object-fit:cover afbeelding. */
	transform: translateZ(0);
	backface-visibility: hidden;
	text-rendering: optimizeLegibility;
}
.branche-arrow { transition: transform .3s ease-out; font-size: 1.2em; display: inline-flex; align-items: center; }
.branche-card:hover .branche-arrow { transform: translateX(4px); }
@media (max-width: 767px) {
	.branche-label { bottom: 16px; left: 16px; right: 16px; font-size: 16px; }
}

/* ---------- vergelijkingssectie (1-op-1 uit spotlezz.vercel.app/style.css) ---------- */
.comparison-section { padding: 60px 5%; background: var(--spotlezz-white); }
.comparison-header { text-align: center; max-width: 800px; margin: 0 auto 40px; }
.comparison-header h2 { font-size: clamp(24px, 3.5vw, 38px); font-weight: 700; margin-bottom: 16px; }
.comparison-header h2 span { color: var(--spotlezz-blue); }
.comparison-header p { font-size: 15px; color: #555; line-height: 1.7; }
.comparison-grid { display: flex; flex-wrap: wrap; gap: 40px; max-width: 1000px; margin: 0 auto; }
/* Op pillar-pagina's staat deze grid direct ná .werkwijze-steps, met een
   eigen kop ertussen (i.p.v. .comparison-header op de homepage) — zonder
   marge + kop oogden de kaarten alsof ze de stappen erboven raakten. */
.comparison-subheading { text-align: center; font-size: clamp(20px, 2.7vw, 32px); margin: 60px 0 40px; }
/* 1-op-1 van de finale .compare-card-styling op spotlezz.vercel.app
   (regels 3945-4005 van style.css) — de blauwe gradient-kaart die
   daadwerkelijk live staat, i.p.v. de eerdere witte kaart met blauwe
   rand uit een vroegere eigen benadering. */
.compare-card { flex: 1; min-width: 260px; border-radius: 32px; padding: 60px 50px; border: none; transition: all .5s cubic-bezier(.16,1,.3,1); }
.compare-card:hover { transform: translateY(-8px); }
.compare-spotlezz {
	background: linear-gradient(145deg, var(--spotlezz-blue), var(--spotlezz-blue));
	color: #fff; box-shadow: 0 30px 60px -15px rgba(26,143,227,.4);
	position: relative; overflow: hidden;
}
.compare-spotlezz::after {
	content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
	background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 60%);
	z-index: 0; pointer-events: none;
}
.compare-spotlezz h3, .compare-spotlezz .compare-list { position: relative; z-index: 1; }
.compare-spotlezz h3 { color: #fff; font-size: 32px; margin-bottom: 30px; }
.compare-others { background: #f8fafc; border: 1px solid var(--spotlezz-border); box-shadow: none; }
.compare-others h3 { font-size: 32px; font-weight: 600; color: var(--spotlezz-ink); margin-bottom: 30px; }
.compare-list { list-style: none; margin: 0; padding: 0; }
.compare-list li { font-size: 16px; font-weight: 500; overflow-wrap: break-word; padding: 20px 0; border-bottom: 1px solid var(--spotlezz-border); }
.compare-spotlezz .compare-list li { color: rgba(255,255,255,.95); border-bottom-color: rgba(255,255,255,.15); }
.compare-others .compare-list li { color: #555; font-weight: 400; }
.compare-spotlezz .compare-list li::before { content: "\2713"; color: #fff; font-weight: 700; margin-right: 10px; }
.compare-others .compare-list li::before { content: "\2014"; color: #94a3b8; font-weight: 700; margin-right: 10px; }

/* ---------- klantlogo-ticker (1-op-1) ---------- */
.clients-ticker-section { padding: 40px 0; overflow: hidden; }
.ticker-header { text-align: center; margin-bottom: 24px; padding: 0 5%; }
.ticker-header h2 { font-size: clamp(18px, 2.4vw, 24px); color: #6b7280; }
.ticker-container { display: flex; width: fit-content; animation: spotlezz-ticker 40s linear infinite; }
.clients-ticker-section:hover .ticker-container { animation-play-state: paused; }
.ticker-logo { flex-shrink: 0; width: 160px; height: 64px; margin: 0 32px; display: flex; align-items: center; justify-content: center; }
.ticker-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(100%) contrast(120%) opacity(.55); transition: filter .3s ease; }
.ticker-logo img:hover { filter: grayscale(0%) opacity(1); }
@keyframes spotlezz-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- portfolio (klantcases, 1-op-1) ---------- */
.portfolio-section { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 48px 5%; }
.portfolio-header { text-align: center; margin-bottom: 36px; }
.portfolio-header h2 { font-size: clamp(24px, 3.5vw, 36px); margin-bottom: 12px; }
.portfolio-header p { color: #6a737d; max-width: 600px; margin: 0 auto; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.portfolio-card { border-radius: 16px; overflow: hidden; background: var(--spotlezz-white); box-shadow: 0 20px 40px -12px rgba(0,0,0,.1); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; min-width: 0; }
.portfolio-card.stagger-down { margin-top: 40px; }
.portfolio-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px -15px rgba(26,143,227,.18); }
.portfolio-img { overflow: hidden; height: 200px; }
.portfolio-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.portfolio-card:hover .portfolio-img img { transform: scale(1.07); }
.portfolio-content { padding: 28px; }
.portfolio-meta { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--spotlezz-blue); margin-bottom: 8px; }
.portfolio-content h3 { font-size: 19px; margin-bottom: 10px; }
.portfolio-content p { font-size: 13.5px; color: #6a737d; margin-bottom: 16px; overflow-wrap: break-word; }
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: 1fr; } .portfolio-card.stagger-down { margin-top: 0; } }

/* ---------- kwaliteitsblok (1-op-1: .clean-kwaliteit-section) ---------- */
.clean-kwaliteit-section { padding: 60px 5%; background: var(--spotlezz-white); overflow: hidden; }
.ck-container { max-width: var(--spotlezz-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ck-title { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; line-height: 1.15; margin-bottom: 20px; letter-spacing: -.02em; }
.ck-title span { color: var(--spotlezz-blue); }
.ck-desc { font-size: 15.5px; color: #555; line-height: 1.7; margin-bottom: 32px; max-width: 95%; }
.ck-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ck-stat { border-top: 2px solid var(--spotlezz-blue); padding-top: 14px; min-width: 0; }
.ck-stat-number { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.ck-stat-text { font-size: 13.5px; color: #666; line-height: 1.5; }
.ck-right { position: relative; }
.ck-image-wrapper { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.08); }
.ck-image-wrapper img { width: 100%; height: 420px; object-fit: cover; display: block; }
.ck-badge {
	position: absolute; bottom: 24px; left: -16px; background: var(--spotlezz-white);
	padding: 18px 26px; box-shadow: 0 20px 40px rgba(0,0,0,.1); border-left: 5px solid var(--spotlezz-blue);
}
.ck-badge-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-bottom: 6px; font-weight: 600; }
.ck-badge-value { font-size: 34px; font-weight: 800; line-height: 1; }
.ck-badge-value span { font-size: 17px; color: #aaa; font-weight: 500; }
@media (max-width: 900px) {
	.ck-container { grid-template-columns: 1fr; gap: 32px; }
	.ck-image-wrapper img { height: 280px; }
	.ck-badge { left: 16px; right: 16px; bottom: -20px; text-align: center; border-left: none; border-top: 5px solid var(--spotlezz-blue); }
}

/* ---------- oprichter aan het woord (1-op-1) ---------- */
.founder-section { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 48px 5%; }
.founder-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: center; }
.founder-card { background: var(--spotlezz-white); border: 1px solid var(--spotlezz-border); border-radius: 12px; padding: 36px; box-shadow: 0 10px 30px rgba(0,0,0,.04); min-width: 0; }
.founder-card-head { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.founder-avatar-photo { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--spotlezz-light); flex: none; }
.founder-card-head .person-avatar { width: 70px; height: 70px; font-size: 24px; }
.founder-card-head h3 { font-size: 19px; margin-bottom: 4px; }
.founder-card-head p { font-size: 13.5px; color: #6b7280; font-weight: 500; margin: 0 0 4px; }
.founder-linkedin { font-size: 12.5px; color: #0a66c2; font-weight: 600; text-decoration: none; }
.founder-accent { width: 56px; height: 4px; background: var(--spotlezz-orange); margin-bottom: 18px; border-radius: 2px; }
.founder-quote { font-size: 16px; line-height: 1.6; color: #374151; font-style: italic; margin-bottom: 22px; overflow-wrap: break-word; }
.founder-photo { border-radius: 12px; overflow: hidden; height: 340px; box-shadow: 0 20px 40px rgba(0,0,0,.1); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .founder-grid { grid-template-columns: 1fr; } .founder-photo { height: 220px; } }

/* ---------- werkgebied (1-op-1 layout, zonder Maps-embed) ---------- */
.werkgebieden-section { padding: 48px 5%; background: var(--spotlezz-light); }
.werkgebied-grid { max-width: var(--spotlezz-max-width); margin: 0 auto; }
.locations-content h2 { font-size: clamp(22px, 3vw, 34px); margin-bottom: 16px; color: var(--spotlezz-blue); }
.locations-content p { font-size: 15px; color: #555; margin-bottom: 24px; line-height: 1.6; max-width: 65ch; }

/* ---------- gedeelde formuliercomponenten (1-op-1: .sp-form) ---------- */
.sp-form { display: grid; gap: 14px; }
.sp-form h3 { font-size: 18px; margin-bottom: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: grid; gap: 6px; margin: 0; }
.form-group label { font-size: 12.5px; font-weight: 700; }
.form-group label span { color: #e74c3c; }
.form-group input, .form-group textarea, .sp-form input, .sp-form textarea {
	width: 100%; padding: 12px 18px; border: 1px solid var(--spotlezz-border); border-radius: 24px;
	font-size: 13.5px; font-family: inherit; min-width: 0;
}
.sp-form textarea { border-radius: 16px; resize: vertical; min-height: 90px; }
.form-consent { display: flex; gap: 9px; align-items: flex-start; }
.form-consent input { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.form-consent label { font-size: 12px; font-weight: 400; color: #6b7280; line-height: 1.5; }
.btn-submit {
	width: 100%; padding: 14px; background: var(--spotlezz-orange); color: #fff; border: none; border-radius: 24px;
	font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .3s ease; margin-top: 4px;
}
.btn-submit:hover { background: #e68300; }
.btn-micro { padding: 8px 18px; font-size: 12.5px; border-radius: 20px; margin-top: 14px; display: inline-flex; }
@media (max-width: 576px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- contactsectie (1-op-1) ---------- */
.contact-section {
	position: relative; padding: 70px 5%; background: var(--spotlezz-ink) center / cover no-repeat; color: #fff;
}
.contact-overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to right, rgba(20,25,30,.9) 0%, rgba(20,25,30,.7) 35%, rgba(20,25,30,0) 75%);
}
.contact-container { position: relative; z-index: 2; max-width: var(--spotlezz-max-width); margin: 0 auto; display: flex; gap: 60px; align-items: center; flex-wrap: wrap; }
.contact-left { flex: 1; min-width: 280px; }
.contact-left h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 16px; line-height: 1.2; }
.contact-left > p { font-size: 15px; line-height: 1.7; opacity: .9; margin-bottom: 32px; max-width: 480px; font-weight: 300; }
.contact-profile { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.contact-profile-img { width: 100px; height: 116px; border-radius: 14px; overflow: hidden; flex: none; }
.contact-profile-img img { width: 100%; height: 100%; object-fit: cover; }
.contact-profile-info h4 { font-size: 19px; margin-bottom: 4px; }
.contact-profile-info .role { font-size: 13px; opacity: .8; margin-bottom: 14px; }
.contact-profile-info .contact-detail { font-size: 13.5px; margin-bottom: 6px; opacity: .9; }
.contact-profile-info .contact-detail a { color: #fff; text-decoration: none; }
.contact-right { flex: 1; min-width: 280px; max-width: 520px; }
.contact-form-box { background: #fff; border-radius: 16px; padding: 34px 30px; color: var(--spotlezz-ink); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
@media (max-width: 900px) { .contact-container { flex-direction: column; gap: 40px; } .contact-right { width: 100%; max-width: none; } }

/* ---------- grote checklist-banner (1-op-1: .lead-magnet-section) ---------- */
.lead-magnet-section {
	position: relative;
	padding: 20px;
	margin: 40px auto;
	max-width: 1340px;
	min-height: 444px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--spotlezz-ink) center / cover no-repeat;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(360px, .9fr);
	align-items: stretch;
	gap: 28px;
}
.lead-magnet-overlay {
	position: absolute; inset: 0;
	background: rgba(20,30,45,.82);
	z-index: 0;
}
.lead-magnet-content {
	position: relative; z-index: 2; color: #fff;
	max-width: 760px; align-self: center;
	padding: 28px 0 28px 20px;
}
.lead-magnet-content h2 {
	font-size: clamp(32px, 4vw, 54px); line-height: 1.05; margin-bottom: 16px;
}
.lead-magnet-content p {
	font-size: 16px; line-height: 1.55; margin-bottom: 22px;
	max-width: 700px; opacity: .95; font-weight: 400;
}
.lead-magnet-content .sp-form { max-width: 690px; }
.lead-magnet-content .checklist-form {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	align-items: center; gap: 8px;
}
.lead-magnet-content .form-group { margin: 0; }
.lead-magnet-content .form-group label {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.lead-magnet-content .form-group input {
	width: 100%; min-height: 48px; background: #fff; border: 0;
	border-radius: 999px; padding: 0 20px; font-size: 15px; color: var(--spotlezz-ink);
}
.lead-magnet-content .checklist-form > .form-consent {
	grid-column: 1 / -1; margin: 4px 0 0;
}
.lead-magnet-content .form-consent label { color: rgba(255,255,255,.78); font-size: 12px; }
.lead-magnet-content .form-consent label a { color: #fff; }
.lead-magnet-content .checklist-form > .btn {
	min-height: 48px; white-space: nowrap; padding-inline: 28px;
}
.lead-magnet-founder {
	position: relative; z-index: 2; min-width: 0; min-height: 0;
	border-radius: 14px; overflow: hidden; align-self: stretch;
}
.lead-magnet-founder::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(20,30,45,.18), transparent 30%);
	pointer-events: none;
}
.lead-magnet-founder img {
	width: 100%; height: 100%; min-height: 400px; object-fit: cover;
	object-position: center center; border-radius: 14px;
}
@media (max-width: 900px) {
	.lead-magnet-section { grid-template-columns: 1fr; padding: 20px; min-height: 0; }
	.lead-magnet-founder { order: -1; max-height: 360px; }
	.lead-magnet-founder img { min-height: 300px; max-height: 360px; }
	.lead-magnet-content { padding: 18px 10px 24px; }
}
@media (max-width: 700px) {
	.lead-magnet-section { padding: 12px; margin: 30px 5%; text-align: left; }
	.lead-magnet-content { padding: 18px 10px 20px; }
	.lead-magnet-content h2 { font-size: clamp(30px, 9vw, 42px); }
	.lead-magnet-content .sp-form { max-width: none; }
	.lead-magnet-content .checklist-form { grid-template-columns: 1fr; }
	.lead-magnet-content .checklist-form > .btn { width: 100%; }
	.lead-magnet-founder { max-height: 280px; }
	.lead-magnet-founder img { min-height: 240px; max-height: 280px; }
}

/* ---------- klantcases ---------- */
.cases-block { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 36px 5%; }
.cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 16px; }
.case-card {
	display: block; text-decoration: none; color: var(--spotlezz-ink); border: 1px solid var(--spotlezz-border);
	border-radius: 10px; overflow: hidden; background: var(--spotlezz-white); min-width: 0;
	box-shadow: 0 4px 15px rgba(0,0,0,.04);
	transition: transform .35s cubic-bezier(.175,.885,.32,1.275), box-shadow .35s ease, border-color .35s ease;
}
.case-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(26,143,227,.14); border-color: rgba(26,143,227,.4); }
.case-card img { display: block; width: 100%; height: 160px; object-fit: cover; transition: transform .5s ease; }
.case-card:hover img { transform: scale(1.05); }
.case-card-body { padding: 16px; }
.case-card-body h3 { font-size: 16px; margin-bottom: 6px; overflow-wrap: break-word; }
.case-card-body p { font-size: 13.5px; color: #6b7280; margin: 0; overflow-wrap: break-word; }

/* ---------- FAQ ---------- */
.faq-block { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 60px 5%; background: var(--spotlezz-light); }
/* 1-op-1 van .faq-section/.faq-container: kop+intro+CTA links (sticky),
   accordion-kaarten rechts. Alles hieronder is scoped onder .faq-block
   zodat de FAQ-hub (archive-vraag.php, eigen .faq-item-stijl) ongemoeid
   blijft. */
.faq-block .faq-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 60px; align-items: flex-start; }
.faq-block .faq-left { flex: 0 0 36%; position: sticky; top: 100px; }
.faq-block .faq-left h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 16px; }
.faq-block .faq-left p { color: #555; line-height: 1.7; margin-bottom: 24px; }
.faq-block .faq-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.faq-block .faq-item {
	background: var(--spotlezz-white); border-radius: 12px; border: 1px solid var(--spotlezz-border);
	border-left: 4px solid transparent; padding: 18px 22px;
	box-shadow: 0 4px 15px rgba(0,0,0,.03); transition: all .3s ease;
}
.faq-block .faq-item:hover { box-shadow: 0 10px 25px rgba(0,0,0,.06); transform: translateY(-2px); }
.faq-block .faq-item[open] { border-left-color: var(--spotlezz-orange); }
.faq-block .faq-item summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-weight: 600; font-size: 15.5px; list-style: none; }
.faq-block .faq-item summary::-webkit-details-marker { display: none; }
.faq-block .faq-item summary span:first-child { overflow-wrap: break-word; min-width: 0; }
.faq-block .faq-icon { position: relative; width: 16px; height: 16px; flex: none; }
.faq-block .faq-icon::before, .faq-block .faq-icon::after { content: ""; position: absolute; background: var(--spotlezz-orange); transition: transform .2s ease, opacity .2s ease; }
.faq-block .faq-icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-block .faq-icon::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-block .faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-block .faq-item p { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--spotlezz-border); color: #4b5563; font-size: 14.5px; line-height: 1.6; }
.faq-more { margin-top: 4px; }
.faq-more a { color: var(--spotlezz-blue); font-weight: 700; text-decoration: none; }

@media (max-width: 900px) {
	.faq-block .faq-container { flex-direction: column; gap: 32px; }
	.faq-block .faq-left { position: static; flex: none; text-align: center; }
}

/* ================================================================
 * Pillar-secties (fase 4C)
 * ================================================================ */

/* ---------- hub-hero (platte kop, geen foto — 1-op-1 van de referentie) ---------- */
.hub-hero { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 40px 5% 20px; }
.hub-hero h1 { font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 14px; }
.hub-hero .pillar-lead { max-width: 70ch; color: #555; line-height: 1.7; margin-bottom: 20px; }
.hub-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Locaties-hub: 1-op-1 van de referentie's .work-block/.loc-grid/.prose-block ---------- */
.work-block, .prose-block { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 32px 5%; }
.work-block h2, .prose-block h2 { font-family: var(--spotlezz-font-heading); font-size: clamp(24px, 3vw, 32px); margin-bottom: 20px; }
.work-block > p { max-width: 68ch; color: #4b5563; margin-bottom: 20px; }
.prose-block p { max-width: 68ch; margin-bottom: 16px; line-height: 1.75; color: #4b5563; font-size: 16px; }
.loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.loc-card {
	background: #fff; border: 1px solid var(--spotlezz-border); border-radius: 12px;
	padding: 26px; text-decoration: none; color: inherit;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.loc-card:hover { border-color: var(--spotlezz-orange); box-shadow: 0 10px 24px rgba(0, 0, 0, .06); }
.loc-card h3 { font-size: 19px; margin-bottom: 8px; }
.loc-card p { font-size: 14.5px; color: #6b7280; line-height: 1.6; }
.loc-card .tile-link { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--spotlezz-blue); }
.loc-card:hover .tile-link { color: var(--spotlezz-orange); }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 700px) {
	.loc-grid { grid-template-columns: 1fr; }
}

/* ---------- USP-pills (gedeeld) ---------- */
.hero-kicker-light { color: var(--spotlezz-blue); }
.usp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pill-check { border-color: var(--spotlezz-blue); color: var(--spotlezz-blue); background: #eff6ff; }
/* Op een donkere hero-foto (.pillar-hero-full e.d.) i.p.v. een witte
   sectie-achtergrond — 1-op-1 van de referentie's ks-hero-pills. */
.pill-check-light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }

/* ---------- pillar-hero-full (1-op-1 van .ks-hero) ---------- */
.pillar-hero-full .hero-content { max-width: 640px; }
.pillar-hero-full .hero-intro { max-width: 60ch; color: #e2e8f0; margin: 10px 0 20px; }
/* De (site-brede) page_hero_pillar-foto is een brede 2560×1015-panorama
   met de medewerker rechts in beeld, links vooral een donkere plant/muur.
   Op mobiel is de hero-sectie smal+lang t.o.v. die foto, dus cover laat
   maar ~20% van de breedte zien — bij center (50%) viel dat precies
   tussen de plant en de medewerker in (alleen een raam zichtbaar).
   75% x-positie schuift het zichtbare deel naar de medewerker toe. Op
   desktop is de hero juist breder dan de foto's verhouding, dus daar
   toont cover sowieso de volledige breedte en verandert dit niets. */
.pillar-hero-full { background-position: 75% 15%; }

/* ---------- tekst+foto-secties + "waarom belangrijk" (1-op-1 van .ks-text-image/.ks-importance) ---------- */
.text-blue { color: var(--spotlezz-blue); }
.ks-text-image { display: flex; gap: 60px; padding: 60px 5%; max-width: 1200px; margin: 0 auto; align-items: center; }
.ks-text-image.ks-reverse { flex-direction: row-reverse; }
.ks-ti-image { flex: 1; min-width: 0; }
.ks-ti-image img { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.1); display: block; }
.ks-ti-content { flex: 1; min-width: 0; }
.ks-ti-content h2 { font-size: clamp(24px, 3.2vw, 36px); margin-bottom: 18px; }
.ks-ti-content p { margin-bottom: 14px; color: #555; line-height: 1.7; }
.ks-checklist { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 12px; }
.ks-checklist li { font-weight: 500; color: var(--spotlezz-ink); font-size: 14.5px; }
/* offset-kader achter de foto — 1-op-1 van de checklist-pagina in de referentie */
.ks-ti-image-offset { position: relative; }
.ks-ti-image-offset::before {
	content: ''; position: absolute; top: -15px; left: -15px; right: 15px; bottom: 15px;
	background: var(--spotlezz-orange); border-radius: 12px; z-index: 0;
}
.ks-ti-image-offset img { position: relative; z-index: 1; }
/*
 * Losse beeldband tussen de tekstblokken op een dienstpagina
 * (single-pillar.php): een tekstsectie waarin alleen een foto is ingevuld.
 * Bewust begrensd in hoogte, anders wordt een liggende foto op volle breedte
 * een enorm vlak dat de pagina uit elkaar trekt. Zelfde ronding en schaduw
 * als de foto's naast de tekst, zodat het een geheel blijft.
 */
.pillar-foto-band {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 5% 50px;
}
.pillar-foto-band img {
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	object-position: center;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,.1);
	display: block;
}
@media (max-width: 700px) {
	.pillar-foto-band {
		padding: 6px 5% 32px;
	}
	.pillar-foto-band img {
		max-height: 260px;
	}
}
.checklist-form-box {
	background: var(--spotlezz-light); padding: 32px; border-radius: 16px;
	border: 1px solid var(--spotlezz-border); box-shadow: 0 10px 20px rgba(0,0,0,.03); margin-top: 20px;
}

.ks-importance { padding: 60px 5%; background: var(--spotlezz-light); }
.ks-importance-top { display: flex; gap: 40px; max-width: 1200px; margin: 0 auto 40px; align-items: center; }
.ks-importance-top h2 { flex: 1; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.25; }
.ks-importance-top p { flex: 1; color: #555; line-height: 1.7; }
.ks-importance-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.ks-box { background: var(--spotlezz-white); border: 1px solid var(--spotlezz-border); padding: 24px 20px; border-radius: 8px; font-weight: 600; color: var(--spotlezz-ink); text-align: center; }

@media (max-width: 900px) {
	.ks-importance-top, .ks-text-image { flex-direction: column; }
	.ks-text-image.ks-reverse { flex-direction: column; }
	.ks-importance-boxes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ks-importance-boxes { grid-template-columns: 1fr; }
}

/* ---------- zwevende snelofferte-popup (1-op-1 van .sticky-snelofferte op desktop) ----------
   Puur visuele CSS-toggle (via .open op de container + theme.js) — geen
   submit-laag, zie de php-commentaar bij de aanroep. */
.sticky-snelofferte {
	position: fixed; bottom: 20px; right: 20px; width: 320px; z-index: 500;
	background: var(--spotlezz-white); border-radius: 12px; border: 1px solid var(--spotlezz-border);
	box-shadow: 0 10px 40px rgba(0,0,0,.15); overflow: hidden;
}
.sticky-snelofferte-header {
	width: 100%; display: flex; justify-content: space-between; align-items: center;
	background: var(--spotlezz-light); border: none; padding: 14px 20px;
	font-weight: 700; font-size: 14px; color: var(--spotlezz-ink); cursor: pointer;
}
.sticky-snelofferte-header .icon-caret { transition: transform .3s ease; }
.sticky-snelofferte.open .sticky-snelofferte-header .icon-caret { transform: rotate(180deg); }
/* De pijl draaide altijd al (dat werkte), maar op desktop stond het
   formulier al standaard open — de pijl had dus zichtbaar niets om te
   verbergen. .open bepaalt nu op élke breedte of de body zichtbaar is,
   inclusief desktop. */
.sticky-snelofferte-body { display: none; padding: 20px; }
.sticky-snelofferte.open .sticky-snelofferte-body { display: block; }

@media (max-width: 700px) {
	/* Op mobiel botst een bottom-sheet-achtige balk met de bestaande
	   .mobile-sticky-cta (Bellen/Offerte, ook fixed onderaan) — daarom hier
	   een compact rond icoon-knopje ⌃boven⌄ die balk i.p.v. een balk die
	   zelf ook de onderkant claimt. Tikken toont de kaart erboven. Gebruikt
	   max-height/opacity i.p.v. transform: betrouwbaarder op oudere/
	   goedkopere Android-toestellen en scheelt een aparte GPU-laag voor zo'n
	   kleine widget.
	 */
	.sticky-snelofferte {
		bottom: 84px; right: 16px; left: auto; width: 56px; height: 56px;
		border-radius: 50%; border: none;
		max-height: 56px; overflow: hidden;
		transition: width .3s ease, height .3s ease, border-radius .3s ease, max-height .3s ease;
	}
	.sticky-snelofferte-header {
		background: var(--spotlezz-orange); color: #fff; width: 56px; height: 56px;
		padding: 0; justify-content: center; box-shadow: 0 6px 20px rgba(255,145,0,.4);
	}
	.sticky-snelofferte-header span { display: none; } /* tekstlabel weg, alleen het icoon blijft zichtbaar in de ronde knop */
	.sticky-snelofferte-header .icon-caret { width: 18px; height: 18px; transform: rotate(-90deg); }
	.sticky-snelofferte.open .sticky-snelofferte-header .icon-caret { transform: rotate(90deg); }
	.sticky-snelofferte.open {
		width: min(320px, calc(100vw - 32px)); height: auto; max-height: 80vh;
		border-radius: 16px; border: 1px solid var(--spotlezz-border); overflow-y: auto;
	}
	.sticky-snelofferte.open .sticky-snelofferte-header {
		width: 100%; height: auto; padding: 14px 20px; border-radius: 16px 16px 0 0;
		background: var(--spotlezz-light); color: var(--spotlezz-ink); box-shadow: none; justify-content: space-between;
	}
	.sticky-snelofferte.open .sticky-snelofferte-header span { display: inline; }
}

/* ---------- antwoordblok prijs-link ---------- */
.answer-price-link { text-align: center; margin-top: 10px; font-size: 13.5px; }
.answer-price-link a { color: var(--spotlezz-blue); font-weight: 600; }

/* ---------- checklist CTA / page wrapper ---------- */
.checklist-single {
	width: 100%;
	overflow: hidden;
}
.checklist-single > .checklist-cta-banner {
	max-width: 1200px;
	margin: 20px auto 60px;
	padding: 56px 5%;
	box-sizing: border-box;
}
.checklist-single > .checklist-cta-banner h2,
.checklist-single > .checklist-cta-banner p {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.checklist-single > .checklist-cta-banner h2 {
	margin-bottom: 16px;
}
.checklist-single > .checklist-cta-banner p {
	line-height: 1.7;
}
.checklist-single > .checklist-cta-banner .btn {
	display: inline-flex;
	margin-top: 8px;
}
.checklist-single > .checklist-cta-banner .mini {
	margin-top: 12px;
	font-size: 13px;
}
@media (max-width: 900px) {
	.ks-text-image {
		padding: 45px 5%;
		gap: 35px;
	}
	.checklist-single > .checklist-cta-banner {
		margin: 10px 5% 45px;
		padding: 45px 7%;
	}
}
@media (max-width: 600px) {
	.ks-text-image {
		padding: 35px 5%;
	}
	.checklist-single > .checklist-cta-banner {
		margin: 0 5% 35px;
		padding: 35px 7%;
	}
}

/* ---------- werkzaamheden-raster (1-op-1 van .ks-steps/.ks-step-card) ---------- */
.tasks-block { max-width: 1200px; margin: 0 auto; padding: 50px 5%; }
.tasks-block > h2 { text-align: center; font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 30px; }
.tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; margin-top: 16px; }
.task-tile {
	display: flex; align-items: center; justify-content: center; text-align: center; min-height: 90px;
	padding: 24px 16px; border: 1px solid var(--spotlezz-border);
	border-radius: 12px; background: var(--spotlezz-light); color: var(--spotlezz-ink); font-weight: 700; font-size: 15px;
	text-decoration: none; min-width: 0; overflow-wrap: break-word;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.task-tile[href] { color: var(--spotlezz-blue); }
.task-tile[href]:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(26,143,227,.12); border-color: var(--spotlezz-blue); background: var(--spotlezz-white); }
.task-tile-static { cursor: default; }

/* ---------- werkwijze + vergelijkingstabel ---------- */
.werkwijze-block { max-width: 1200px; margin: 0 auto; padding: 50px 5%; }
.werkwijze-block > h2 { text-align: center; font-size: clamp(24px, 3.2vw, 32px); }
/* 1-op-1 van .ks-hiw-cards: foto-kaarten met een donkere gradient-overlay
   en de tekst eronderop, i.p.v. platte genummerde cirkels op wit. */
.werkwijze-steps { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
.werkwijze-step {
	flex: 1 1 220px; min-width: 0; height: 350px; border-radius: 16px; overflow: hidden;
	position: relative; background-size: cover; background-position: center;
}
.werkwijze-step-content {
	position: absolute; inset: auto 0 0 0; padding: 30px 20px 20px; color: #fff;
	background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,0) 100%);
}
.werkwijze-step-num {
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 13px; margin-bottom: 10px;
}
.werkwijze-step h3 { font-size: 18px; margin-bottom: 6px; color: #fff; }
.werkwijze-step p { font-size: 13.5px; color: rgba(255,255,255,.85); overflow-wrap: break-word; line-height: 1.5; }
.werkwijze-cta { text-align: center; margin-top: 40px; }
.werkwijze-cta .mini { display: block; margin-top: 8px; color: #6b7280; font-size: 12px; }

@media (max-width: 700px) {
	.werkwijze-steps { flex-direction: column; }
	.werkwijze-step { height: 220px; }
}

/* ---------- medewerker-blok (hergebruikt .person-card) ---------- */
.medewerker-block { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 36px 5%; }

/* ================================================================
 * Case-secties (fase 4C)
 * ================================================================ */

/* ---------- hero met harde feiten, H1 = resultaatzin ---------- */
.case-hero {
	display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px;
	max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 40px 5%;
	align-items: start;
}
.case-hero-main { min-width: 0; }
.case-logo { max-height: 40px; width: auto; margin-bottom: 16px; }
.case-hero h2, .pillar-hero-content h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 16px; overflow-wrap: break-word; }
.case-hero-photo { min-width: 0; border-radius: 12px; overflow: hidden; }
.case-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 800px) {
	.case-hero { grid-template-columns: 1fr; }
}

/* ---------- klantcases-overzicht (/klantcases/) — 1-op-1 van de
   referentie's kaartenoverzicht: elke kaart linkt naar zijn eigen
   single-case.php-detailpagina. ---------- */
.klantcases-grid-section { max-width: 1200px; margin: 0 auto; padding: 44px 5% 80px; }
.klantcases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 30px; }
.klantcase-card {
	display: block; text-decoration: none; color: inherit; background: var(--spotlezz-white);
	border-radius: 12px; overflow: hidden; border: 1px solid var(--spotlezz-border);
	box-shadow: 0 4px 15px rgba(0,0,0,.05); transition: transform .3s ease, box-shadow .3s ease;
}
.klantcase-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(0,0,0,.08); }
.klantcase-card-image { height: 220px; overflow: hidden; }
.klantcase-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.klantcase-card:hover .klantcase-card-image img { transform: scale(1.05); }
/*
 * Logovariant van de kaart op /klantcases/ (archive-case.php). Een logo mag
 * niet bijgesneden worden zoals een sfeerfoto, dus: lager vlak, lichte
 * achtergrond, en het logo in zijn geheel gecentreerd. De zoom-op-hover
 * hoort bij een foto en staat hier uit.
 */
.klantcase-card-image.is-logo {
	height: 150px;
	background: var(--spotlezz-light);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px 40px;
	box-sizing: border-box;
}
/*
 * width/height 100% met object-fit: contain laat elk logo het beschikbare
 * vlak vullen zonder vervormen. Zonder dit stond elk logo op zijn eigen
 * natuurlijke formaat, waardoor een breed woordmerk (Arena Gym) de kaart
 * domineerde en een compact merk (Burgman) er klein bij stond.
 */
.klantcase-card-image.is-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.klantcase-card:hover .klantcase-card-image.is-logo img {
	transform: none;
}
@media (max-width: 700px) {
	.klantcase-card-image.is-logo {
		padding: 20px 24px;
	}
}
.klantcase-card-body { padding: 28px; }
.klantcase-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.klantcase-card-tag {
	background: var(--spotlezz-light); color: #4b5563; font-size: 11px; font-weight: 700;
	padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em;
}
.klantcase-card-body h2 { font-size: 20px; font-weight: 700; margin-bottom: 12px; font-family: var(--spotlezz-font-heading); }
.klantcase-card-body p { font-size: 14.5px; color: #555; line-height: 1.6; margin-bottom: 18px; }
.klantcase-card-link { color: var(--spotlezz-blue); font-weight: 700; font-size: 13.5px; }
.klantcase-card:hover .klantcase-card-link { color: var(--spotlezz-orange); }

.case-hero-main h2 { font-size: clamp(24px, 3vw, 34px); margin: 12px 0 20px; }

/* ---------- feitenbalk (hergebruikt .stat-block) ---------- */
.case-feitenbalk { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 0 5% 36px; }
.case-feitenbalk .stat-block { background: var(--spotlezz-light); box-shadow: none; border: 1px solid var(--spotlezz-border); }

/* ---------- STAR-structuur: genummerde kaarten i.p.v. platte grijze
   labels, zelfde bento-taal als .about-value-card (over-ons) — blauw/
   oranje afwisselend zodat de vier stappen ook visueel een volgorde
   vormen. ---------- */
.case-star {
	max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 36px 5%;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;
}
.star-block {
	min-width: 0; background: var(--spotlezz-white); border: 1px solid var(--spotlezz-border);
	border-top: 4px solid var(--spotlezz-blue); border-radius: 10px; padding: 22px;
	position: relative; transition: transform .3s ease, box-shadow .3s ease;
}
.star-block:nth-child(even) { border-top-color: var(--spotlezz-orange); }
.star-block:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.07); }
.star-block h2 {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--spotlezz-blue); font-weight: 700; margin-bottom: 10px;
}
.star-block:nth-child(even) h2 { color: var(--spotlezz-orange); }
.star-block p { font-size: 14.5px; overflow-wrap: break-word; color: #4b5563; line-height: 1.6; }

/* ---------- klantquote (hergebruikt .person-card) ---------- */
.case-quote { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 36px 5%; }
.quote-large {
	border-left: 4px solid var(--spotlezz-orange); background: var(--spotlezz-light);
	border-radius: 0 12px 12px 0; padding: 28px; margin: 0 0 20px; min-width: 0;
}
.quote-large p { font-size: 18px; overflow-wrap: break-word; font-style: italic; color: var(--spotlezz-ink); }

/* ---------- gebruikte diensten — elke tegel naar zijn eigen pillar ---------- */
.case-diensten { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 0 5% 40px; }
.case-diensten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
.dienst-tile {
	display: block; text-align: center; padding: 20px 14px; border: 1px solid var(--spotlezz-border);
	border-radius: 10px; background: var(--spotlezz-white); color: var(--spotlezz-blue); font-weight: 600; font-size: 13.5px;
	text-decoration: none; min-width: 0; overflow-wrap: break-word;
	box-shadow: 0 4px 15px rgba(0,0,0,.03);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.dienst-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(26,143,227,.12); border-color: var(--spotlezz-blue); }

/* ================================================================
 * Locatie-secties (fase 4C)
 * ================================================================ */

/* ---------- hero, kaart, NAP ---------- */
.locatie-hero {
	display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px;
	max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 56px 5%;
	align-items: start; background: var(--spotlezz-light);
}
.locatie-hero-main { min-width: 0; }
.locatie-hero h2 { font-size: clamp(24px, 3vw, 34px); }
.locatie-hero-intro { margin-top: 16px; max-width: 65ch; color: #4b5563; font-size: 15.5px; line-height: 1.7; }
.locatie-hero-intro p { margin: 0; }
.locatie-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.locatie-hero-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.locatie-kaart { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.locatie-kaart img { width: 100%; height: auto; display: block; }
.nap-block {
	background: var(--spotlezz-white); border: 1px solid var(--spotlezz-border); border-radius: 12px;
	padding: 22px; min-width: 0; box-shadow: 0 4px 15px rgba(0,0,0,.03);
}
.nap-block h2 { font-size: 16px; margin-bottom: 14px; }
.nap-block .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; display: block; margin-bottom: 10px; }
.nap-block p { font-size: 13.5px; margin: 0 0 8px; overflow-wrap: break-word; }
.nap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nap-list li { font-size: 13.5px; color: var(--spotlezz-ink); overflow-wrap: break-word; }
.nap-list li strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 600; margin-bottom: 2px; }
.nap-list a { color: inherit; text-decoration: none; }
.nap-list a:hover { color: var(--spotlezz-blue); }

@media (max-width: 800px) {
	.locatie-hero { grid-template-columns: 1fr; }
}

/* ---------- antwoordblok ---------- */
.locatie-antwoordblok { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 0 5% 36px; }

/* ---------- lokaal bewijs — "maakt of breekt de pagina" ---------- */
.locatie-bewijs { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 36px 5%; }
.locatie-bewijs-pending p,
.medewerker-block-pending p {
	max-width: 60ch; color: #6b7280; font-size: 15px; line-height: 1.7;
	background: var(--spotlezz-light); border: 1px dashed var(--spotlezz-border);
	border-radius: 10px; padding: 18px 20px;
}
.logo-grid {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 20px 0 28px;
	align-items: center;
}
.logo-grid img {
	width: 100%; height: 60px; object-fit: contain; min-width: 0;
	background: var(--spotlezz-white); border: 1px solid var(--spotlezz-border); border-radius: 10px; padding: 12px;
}
.bewijs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bewijs-split .case-card { min-width: 0; }
.bewijs-split .case-card-body { padding: 16px; }
.bewijs-split .review-card { margin: 0; }
.case-card-logo { padding: 20px 16px 0; }
.case-card-logo img { display: block; max-height: 40px; width: auto; max-width: 100%; object-fit: contain; }

/* ---------- werkgebied "Lees meer" (details/summary, geen JS) ---------- */
.werkgebied-more { margin-top: 12px; }
.werkgebied-more summary { cursor: pointer; color: var(--spotlezz-blue); font-weight: 700; font-size: 14px; list-style: none; }
.werkgebied-more summary::-webkit-details-marker { display: none; }
.werkgebied-more summary::after { content: ' \2193'; }
.werkgebied-more[open] summary::after { content: ' \2191'; }
.werkgebied-more summary:hover { color: var(--spotlezz-orange); }
.werkgebied-more .werkgebied-tekst { margin-top: 10px; }

@media (max-width: 700px) {
	.logo-grid { grid-template-columns: repeat(3, 1fr); }
	.bewijs-split { grid-template-columns: 1fr; }
}

/* ---------- diensten top-3 + wijken ---------- */
.locatie-diensten { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 0 5% 36px; }
.locatie-diensten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.locatie-diensten-grid .dienst-tile { text-align: left; display: flex; flex-direction: column; gap: 4px; }

/* ---------- werkgebied ---------- */
.locatie-werkgebied { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 0 5% 36px; }
.werkgebied-tekst { max-width: 70ch; overflow-wrap: break-word; }
.werkgebied-tekst p { margin-bottom: 12px; }

/* ---------- eigen fotografie / lokaal team / FAQ ---------- */
.locatie-fotografie { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 0 5% 36px; }

/* ---------- locatie-carrousel (hergebruikt .location-pills/.pill) ---------- */
.locatie-carrousel { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 0 5% 40px; }
.locatie-carrousel .location-pills { margin-top: 16px; }

/* ================================================================
 * FAQ-detail-secties (fase 4C)
 * ================================================================ */

.vraag-single { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 40px 5%; }

/* ---------- het korte antwoord ---------- */
.kort-antwoord-block { max-width: var(--spotlezz-max-width); margin: 28px auto 0; padding: 0 5%; }
.kort-antwoord-block .lbl { display: block; color: var(--spotlezz-blue); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 10px; }
.kort-antwoord-block p {
	font-size: 17px; line-height: 1.6; overflow-wrap: break-word;
	background: var(--spotlezz-white); border-left: 4px solid var(--spotlezz-blue); border-radius: 0 12px 12px 0;
	padding: 22px 26px; box-shadow: 0 4px 15px rgba(0,0,0,.04);
}

/* ---------- verdieping: twee rijen van drie tegels, niet één kolom ---------- */
.verdieping-block { max-width: var(--spotlezz-max-width); margin: 40px auto 0; padding: 0 5%; }
.verdieping-tekst { max-width: 70ch; overflow-wrap: break-word; margin-bottom: 20px; line-height: 1.7; color: #374151; }
.factor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.factor-tile {
	background: var(--spotlezz-white); border: 1px solid var(--spotlezz-border); border-radius: 10px;
	padding: 18px 12px; text-align: center; font-weight: 600; font-size: 13.5px; min-width: 0; overflow-wrap: break-word;
	box-shadow: 0 4px 15px rgba(0,0,0,.03); transition: transform .3s ease, box-shadow .3s ease;
}
.factor-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.06); }
.verdieping-foto { margin-top: 24px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.verdieping-foto img { width: 100%; height: auto; display: block; }

@media (max-width: 600px) {
	.factor-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- conversieblok Variant A ---------- */
.conversion-variant-a {
	margin-top: 32px; background: var(--spotlezz-white); border: 1px solid var(--spotlezz-border);
	border-radius: 12px; padding: 24px; min-width: 0;
}
.conversion-variant-a .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 12px; }
.variant-a-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.variant-a-form input, .variant-a-form select {
	width: 100%; padding: 10px 12px; border: 1px solid var(--spotlezz-border); border-radius: 6px;
	font-size: 13.5px; font-family: inherit; min-width: 0;
}
.variant-a-email { margin-bottom: 8px; }
.variant-a-submit { width: 100%; text-align: center; border: none; cursor: pointer; }

@media (max-width: 600px) {
	.variant-a-grid { grid-template-columns: 1fr; }
}

/* ---------- over ons / vacatures ---------- */
.over-ons-intro { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 36px 5% 0; text-align: center; }
.over-ons-intro .usp-pills { margin-top: 16px; }
.over-ons-verhaal { max-width: 720px; margin: 0 auto; padding: 36px 5%; }
.over-ons-verhaal p { color: #4b5563; margin-top: 8px; }
.over-ons-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
	max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 0 5% 36px;
}
.over-ons-grid p { color: #4b5563; margin-top: 8px; font-size: 14px; }
.over-ons-clients { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 0 5% 36px; text-align: center; }
.over-ons-clients .location-pills { justify-content: center; }
.client-logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; margin-top: 18px; }
.client-logo-row img { max-height: 40px; width: auto; max-width: 140px; object-fit: contain; opacity: .8; }

@media (max-width: 800px) {
	.over-ons-grid { grid-template-columns: 1fr; }
}

/* ---------- offerte-aanvragen ---------- */
.offerte-lead { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 36px 5% 0; text-align: center; }
.offerte-lead-text { max-width: 60ch; margin: 0 auto 20px; color: #4b5563; font-size: 15px; }
/* ---------- offerte-aanvragen: platte kop + kengetallen (1-op-1) ---------- */
.offerte-hero-bg { background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%); }
.offerte-hero-plain { max-width: 1000px; margin: 0 auto; padding: 50px 5% 30px; text-align: center; }
.offerte-hero-plain h1 { font-size: clamp(25px, 4vw, 48px); }
.offerte-hero-plain h1 span { color: var(--spotlezz-blue); }
.offerte-kengetallen { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 0; padding: 0; min-width: 0; }
.offerte-kengetal {
	text-align: center; padding: 0 36px; position: relative; min-width: 0;
	opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease;
}
.offerte-kengetal.in-view { opacity: 1; transform: translateY(0); }
.offerte-kengetal:nth-child(1) { transition-delay: 0s; }
.offerte-kengetal:nth-child(2) { transition-delay: .12s; }
.offerte-kengetal:nth-child(3) { transition-delay: .24s; }
.offerte-kengetal + .offerte-kengetal::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--spotlezz-border); }
.offerte-kengetal-value { font-size: clamp(20px, 4.7vw, 48px); font-weight: 700; color: var(--spotlezz-orange); line-height: 1; margin-bottom: 6px; overflow-wrap: break-word; white-space: nowrap; }
.offerte-kengetal-label { font-size: 14px; font-weight: 600; color: #4b5563; }
@media (max-width: 600px) {
	.offerte-kengetal { padding: 0 14px; }
}
@media (max-width: 420px) {
	.offerte-kengetallen { flex-wrap: wrap; }
	.offerte-kengetal { flex: 1 1 100%; padding: 6px 0; }
	.offerte-kengetal + .offerte-kengetal::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.offerte-kengetal { opacity: 1; transform: none; transition: none; }
}
.offerte-bel-cta { max-width: 1000px; margin: 0 auto; padding: 40px 5%; text-align: center; }
.offerte-bel-cta-card { background: linear-gradient(135deg, #f8f9fa 0%, #eef1f5 100%); border-radius: 16px; padding: 50px; border: 1px solid var(--spotlezz-border); }
.offerte-bel-cta-card h2 { font-size: clamp(20px, 2.7vw, 32px); margin-bottom: 12px; }
.offerte-bel-cta-card p { color: #555; margin-bottom: 24px; }

.offerte-split {
	display: flex; flex-direction: column; align-items: center; gap: 40px;
	max-width: 760px; margin: 0 auto; padding: 20px 5% 60px;
}
.offerte-form {
	background: var(--spotlezz-white); border: 1px solid var(--spotlezz-border); border-radius: 20px;
	padding: 40px; min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 4px;
	box-shadow: 0 20px 45px rgba(31,41,55,.08);
}
.offerte-form h2 { font-size: 20px; margin-bottom: 4px; }
.offerte-form label { font-size: 12.5px; font-weight: 600; color: #374151; margin-top: 14px; margin-bottom: 5px; }
.offerte-form input, .offerte-form select, .offerte-form textarea {
	width: 100%; padding: 11px 14px; border: 1px solid var(--spotlezz-border); border-radius: 8px;
	font-size: 13.5px; font-family: inherit; min-width: 0; background: #fafbfc;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.offerte-form input:focus, .offerte-form select:focus, .offerte-form textarea:focus {
	outline: none; border-color: var(--spotlezz-blue); background: var(--spotlezz-white);
	box-shadow: 0 0 0 3px rgba(26,143,227,.12);
}
.offerte-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.offerte-form .btn {
	margin-top: 22px; border: none; cursor: pointer; text-align: center; width: 100%;
	padding: 14px; font-size: 15px; box-shadow: 0 10px 25px rgba(255,145,0,.3);
}
.offerte-form-note { text-align: center; margin-top: 10px; }
.offerte-side-card {
	background: var(--spotlezz-ink); color: #fff; border-radius: 12px; padding: 24px;
	display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.offerte-side-card h2 { font-size: 17px; color: #fff; }

@media (max-width: 800px) {
	.offerte-form-row { grid-template-columns: 1fr; }
}

/* ---------- Contactpagina: 1-op-1 van de referentie's contact-layout ---------- */
.contact-layout {
	display: flex; gap: 60px; flex-wrap: wrap; align-items: stretch;
	max-width: 1400px; margin: 0 auto; padding: 44px 5%;
}
.contact-layout .contact-info { flex: 1; min-width: 300px; }
.contact-layout .contact-info h2 { color: var(--spotlezz-blue); font-family: var(--spotlezz-font-heading); font-size: clamp(20px, 3.2vw, 38px); margin-bottom: 20px; }
.contact-layout .contact-info > p { font-size: 16px; color: #555; line-height: 1.7; margin-bottom: 40px; }
.contact-layout .contact-info-cards { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card {
	display: flex; align-items: center; gap: 20px; background: var(--spotlezz-light);
	padding: 25px; border-radius: 12px; border: 1px solid var(--spotlezz-border);
	text-decoration: none; color: inherit;
}
.contact-info-icon {
	width: 50px; height: 50px; flex-shrink: 0; background: rgba(26, 143, 227, .1);
	color: var(--spotlezz-blue); display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.contact-info-icon svg { width: 22px; height: 22px; }
.contact-info-card-label { display: block; font-size: 14px; color: #777; margin-bottom: 5px; font-weight: 600; }
.contact-info-card-value { display: block; font-size: 18px; color: var(--spotlezz-ink); font-weight: 700; }
.contact-info-card:hover .contact-info-card-value { color: var(--spotlezz-blue); }

.contact-form-wrap { flex: 1.5; min-width: 300px; }
.contact-form-card {
	background: #fff; padding: 50px; border-radius: 16px; height: 100%;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .08); border: 1px solid var(--spotlezz-border);
}
.contact-form-card h3 { font-size: 28px; margin-bottom: 30px; font-family: var(--spotlezz-font-heading); }
.contact-form label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-top: 12px; margin-bottom: 4px; }
.contact-form input, .contact-form textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--spotlezz-border); border-radius: 6px;
	font-size: 13.5px; font-family: inherit; min-width: 0;
}
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form-consent {
	display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 12.5px;
	color: #6b7280; margin-top: 14px;
}
.contact-form-consent input { width: auto; margin-top: 3px; }
.contact-form .btn { margin-top: 18px; border: none; cursor: pointer; }

.contact-map-placeholder {
	max-width: none; margin: 0 0 40px; padding: 5%; height: 300px; background: #eef2f5;
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-style: normal; font-weight: 600;
}

@media (max-width: 800px) {
	.contact-form-row { grid-template-columns: 1fr; }
}

/* ---------- Over-ons: 1-op-1 van de referentie's .services-section/.service-card ---------- */
.services-section { padding: 80px 5%; max-width: 1400px; margin: 0 auto; background: #fff; }
.service-card {
	display: flex; align-items: stretch; border-radius: 8px; overflow: hidden;
	background: #fff; border: 1px solid var(--spotlezz-border); box-shadow: 0 5px 20px rgba(0, 0, 0, .03);
}
.service-content { flex: 1; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; min-width: 280px; }
.service-title { font-size: 32px; font-weight: 800; margin-bottom: 20px; font-family: var(--spotlezz-font-heading); color: var(--spotlezz-blue); }
.service-desc { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 22px; }
.service-benefits { list-style: none; margin: 0; padding: 0; }
.service-benefits li { position: relative; padding-left: 32px; margin-bottom: 15px; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--spotlezz-ink); }
.service-benefits li svg { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; color: var(--spotlezz-orange); }
.service-image { flex: 1; min-height: 380px; position: relative; overflow: hidden; }
.service-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Over-ons: Visie/Missie bento-kaarten (1-op-1 van .answer-block/.answer-card, eigen klasse zodat de bestaande FAQ-answer-block elders niet meeverandert) ---------- */
.about-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 1400px; margin: 0 auto; padding: 0 5% 80px; }
.about-value-card { background: #fff; padding: 40px 30px; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .04); border-top: 4px solid var(--spotlezz-blue); }
.about-value-card.is-orange { border-top-color: var(--spotlezz-orange); }
.about-value-card svg { width: 32px; height: 32px; color: var(--spotlezz-orange); margin-bottom: 22px; }
.about-value-card h4 { font-size: 19px; font-weight: 800; margin-bottom: 15px; font-family: var(--spotlezz-font-heading); color: var(--spotlezz-blue); }
.about-value-card p { font-size: 15px; color: #555; line-height: 1.7; margin-bottom: 12px; }
.about-value-card p:last-child { margin-bottom: 0; }

/* ---------- Over-ons: "Personal touch" oprichter-sectie — 1-op-1 van .personal-section ---------- */
.personal-section { position: relative; padding: 90px 5%; }
.personal-overlay { position: absolute; inset: 0; background: rgba(26, 143, 227, .85); }
.personal-container {
	position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 60px;
	background: #fff; padding: 50px; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}
.personal-image { flex: 0 0 320px; position: relative; }
.personal-image img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); border: 5px solid #fff; display: block; }
.personal-content { flex: 1; min-width: 0; }
.personal-subtitle { color: var(--spotlezz-orange); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin-bottom: 10px; }
.personal-content h2 { font-size: 38px; font-family: var(--spotlezz-font-heading); color: var(--spotlezz-ink); margin-bottom: 20px; line-height: 1.2; }
.personal-content h2 span { color: var(--spotlezz-blue); }
.personal-content p { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 20px; }
.personal-signature { margin-bottom: 26px; }
.personal-signature .name { font-weight: 700; font-size: 18px; color: var(--spotlezz-blue); }
.personal-signature .role { font-size: 14px; color: #777; }
@media (max-width: 1024px) {
	.personal-container { flex-direction: column; text-align: center; }
	.personal-image { width: 100%; max-width: 320px; margin: 0 auto; }
}

/* ---------- Over-ons: "Medewerker aan het woord" — 1-op-1 van de referentie's tekst+foto-split ---------- */
.medewerker-split {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1000px; margin: 0 auto 80px; padding: 0 5%;
	border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}
.medewerker-split-text { background: #fff; padding: 50px; }
.medewerker-split-text .person-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--spotlezz-light); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--spotlezz-ink); flex-shrink: 0; }
.medewerker-split-name { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; font-weight: 700; font-size: 16px; }
.medewerker-split-role { font-size: 13px; font-weight: 400; color: #6b7280; }
.medewerker-split-text blockquote { margin: 0; font-size: 18px; line-height: 1.7; font-style: italic; color: #4b5563; }
.medewerker-split-photo { background-size: cover; background-position: center; min-height: 220px; }
@media (max-width: 800px) {
	.medewerker-split { grid-template-columns: 1fr; }
}

/* ================================================================
 * Hub-templates (fase 4C): archive-pillar/case/locatie/vraag.php
 * ================================================================ */

.hub-page-header { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 40px 5% 0; }

/* ---------- FAQ-hub: zoekveld, thema-pills, thema-groepen ---------- */
.faq-search { margin: 20px 0; max-width: 420px; }
.faq-no-results { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 0 5% 20px; color: #6b7280; font-size: 14px; }
.faq-search input {
	width: 100%; padding: 12px 16px; border: 1px solid var(--spotlezz-border); border-radius: 8px;
	font-size: 14px; font-family: inherit; min-width: 0;
}
.faq-theme-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.faq-theme-group { max-width: var(--spotlezz-max-width); margin: 0 auto; padding: 28px 5%; }
.faq-theme-group h2 { font-size: 22px; margin-bottom: 16px; }
.faq-list { display: grid; gap: 10px; }
.faq-item {
	background: var(--spotlezz-white);
	border: 1px solid var(--spotlezz-border);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover, .faq-item[open] {
	border-color: rgba(26,143,227,.45);
	box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.faq-item summary {
	min-height: 58px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	padding: 17px 20px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: 15px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { overflow-wrap: break-word; min-width: 0; }
.faq-chevron {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}
.faq-chevron::before, .faq-chevron::after {
	content: '';
	position: absolute;
	top: 8px;
	left: 2px;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--spotlezz-blue);
	transition: transform .2s ease;
}
.faq-chevron::after { transform: rotate(90deg); }
.faq-item[open] .faq-chevron::after { transform: rotate(0deg); }
.faq-item > p {
	margin: 0;
	padding: 0 20px 18px;
	color: #4b5563;
	font-size: 14px;
	line-height: 1.65;
}
.faq-item-link { display: inline-block; margin: 0 20px 20px; font-size: 13px; font-weight: 600; color: var(--spotlezz-blue); }
@media (max-width: 700px) {
	.faq-theme-group { padding: 22px 5%; }
	.faq-item summary { padding: 15px 16px; font-size: 14px; }
	.faq-item > p { padding: 0 16px 16px; }
	.faq-item-link { margin-left: 16px; margin-right: 16px; }
}


/* ================================================================
 * FINAL CHECKLIST ALIGNMENT OVERRIDE
 * IMPORTANT: this override is appended to the CURRENT theme.css.
 * It does not replace or import an older stylesheet.
 * ================================================================ */
.checklist-single > .checklist-cta-banner {
	text-align: center;
}

.checklist-single > .checklist-cta-banner h2,
.checklist-single > .checklist-cta-banner p,
.checklist-single > .checklist-cta-banner .mini {
	margin-left: auto;
	margin-right: auto;
}

.checklist-single > .checklist-cta-banner .btn {
	display: inline-flex;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 700px) {
	.checklist-single > .checklist-cta-banner {
		text-align: center;
	}

	.checklist-single > .checklist-cta-banner .btn {
		width: auto;
		max-width: 100%;
	}
}

/* ================================================================
 * HOMEPAGE BRANCHE SHOWCASE
 * Final layout: separate image + text cards, wider content area,
 * no grey outer background.
 * ================================================================ */

.branche-services-block {
	max-width: 1440px;
	width: calc(100% - 80px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	background: transparent;
}

.branche-services-block > .services-axis-title {
	margin: 0 0 24px;
}

/* Space between each horizontal row */
.branche-showcase {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
	margin-top: 0;
}

/* Each row is transparent so image and text can have their own radius */
.branche-showcase-item,
.branche-showcase-item--image-right {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr);
	gap: 20px;
	min-height: 270px;
	width: 100%;
	border-radius: 0;
	overflow: visible;
	text-decoration: none;
	color: var(--spotlezz-ink);
	background: transparent;
	box-shadow: none;
	transition: none;
}

/* Reverse row */
.branche-showcase-item--image-right {
	grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
}

.branche-showcase-item--image-right .branche-showcase-media {
	order: 2;
}

.branche-showcase-item--image-right .branche-showcase-copy {
	order: 1;
}

/* Individual image card */
.branche-showcase-media {
	order: 1;
	min-width: 0;
	min-height: 270px;
	height: 270px;
	background: transparent;
	border-radius: 18px;
	overflow: hidden;
}

.branche-showcase-img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 270px;
	object-fit: cover;
	object-position: center;
	border-radius: 18px;
	transition: transform .45s ease;
}

.branche-showcase-item:hover .branche-showcase-img {
	transform: scale(1.025);
}

/* Individual text card */
.branche-showcase-copy {
	order: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	min-height: 270px;
	padding: clamp(34px, 4vw, 58px);
	border-radius: 18px;
	background: #f2f8fb;
	color: var(--spotlezz-ink);
}

/* Blue / white alternating text panels */
.branche-showcase-item:nth-child(odd) .branche-showcase-copy {
	background: var(--spotlezz-blue);
	color: #fff;
}

/* Heading */
.branche-showcase-copy h4 {
	margin: 0 0 18px;
	font-family: var(--spotlezz-font-heading);
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.05;
	font-weight: 500;
	letter-spacing: -.02em;
}

/* Real service description */
.branche-showcase-copy p {
	margin: 0;
	max-width: 760px;
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.65;
	color: inherit;
	opacity: .94;
}

/* Lees meer */
.branche-showcase-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin-top: 24px;
	font-size: 14px;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

.branche-showcase-link .branche-arrow {
	display: inline-flex;
	transition: transform .25s ease;
}

.branche-showcase-item:hover .branche-showcase-link .branche-arrow {
	transform: translateX(5px);
}

/* ================================================================
 * RESPONSIVE
 * ================================================================ */

@media (max-width: 900px) {
	.branche-services-block {
		width: calc(100% - 40px);
	}

	.branche-showcase-item,
	.branche-showcase-item--image-right {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.branche-services-block {
		width: 100%;
		padding-left: 5%;
		padding-right: 5%;
	}

	.branche-showcase {
		gap: 20px;
	}

	.branche-showcase-item,
	.branche-showcase-item--image-right {
		grid-template-columns: 1fr;
		gap: 12px;
		min-height: 0;
	}

	.branche-showcase-item--image-right .branche-showcase-media,
	.branche-showcase-item--image-right .branche-showcase-copy {
		order: initial;
	}

	.branche-showcase-media,
	.branche-showcase-img {
		min-height: 230px;
		height: 230px;
		border-radius: 16px;
	}

	.branche-showcase-copy {
		min-height: 0;
		padding: 30px 24px;
		border-radius: 16px;
	}

	.branche-showcase-copy h4 {
		font-size: 30px;
	}
}
/* Onze Projecten — client logos */
.portfolio-client-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 34px;
	background: #fff;
}

.portfolio-client-logo img {
	width: min(78%, 260px);
	height: 120px;
	object-fit: contain;
	transform: none !important;
}

.portfolio-card:hover .portfolio-client-logo img {
	transform: none !important;
}