/* De Subsidie Club — component-stijlen (naast theme.json-tokens). */

/*
 * BREAKPOINT-SYSTEEM — één grens op de WordPress-standaard 782px.
 *   Mobiel  = @media (max-width: 781px)
 *   Desktop = @media (min-width: 782px)
 * Gebruik nergens meer 767px. (Enige fijnere breakpoint: 380px voor de
 * testimonial-cijfers.) De globale mobiele fundamenten (gutter, typografie,
 * tikdoelen) staan gebundeld onderaan in één max-width:781px-blok.
 */

:root {
	--dsc-gutter: 20px;    /* zijmarge van sectiecontainers op mobiel */
	--dsc-fs-body: 14px;   /* leestekst op mobiel (schaal van de hoe-sectie) */
	--dsc-fs-label: 12px;  /* minimale mono-labels op mobiel */
	--dsc-on-ink-soft: #d9d2c6;  /* tekst op donkere (ink) achtergrond */
	--dsc-on-ink-muted: #a89f90; /* gedempte tekst en labels op ink */
}

/* Vangnet tegen horizontale overflow; clip (niet hidden) zodat sticky blijft werken. */
html,
body {
	overflow-x: clip;
}

/* Handgeschreven accent-font (self-hosted) voor naam-labels */
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/caveat-600.woff2') format('woff2');
}

/* ---------- Hero ---------- */
.dsc-hero {
	position: relative;
	background: var(--wp--preset--color--paper-soft);
	border-radius: 20px;
	overflow: hidden;
	margin-top: 24px;
}

/* Lichte korrel over het hero-kader (achter tekst/foto) → papierachtige diepte. */
.dsc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.13;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 140px 140px;
}

.dsc-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	align-items: end;
}

.dsc-hero__text {
	align-self: center;
	padding: 64px 24px 64px 56px;
}

.dsc-hero__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
	white-space: nowrap;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 16px;
}

.dsc-hero__title {
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.dsc-hero__title .accent {
	color: var(--wp--preset--color--orange);
	position: relative;
	display: inline-block;
}

/* Handgetekende onderstreping onder "in 1 uur" — SVG inline in .accent, erft de
   oranje kleur via currentColor. Scherp: geen scale/filter/px-hoogte. */
.hero-underline {
	position: absolute;
	left: -3%;
	width: 106%;
	height: auto;
	bottom: -0.28em;
	pointer-events: none;
}

.dsc-hero__nobreak {
	white-space: nowrap;
}

/* Desktop toont de desktop-varianten; mobiel wisselt (zie mobiele hero-blok). */
.dsc-hero__eyebrow-mob,
.dsc-hero__alt-mob,
.dsc-hero__proof-mob,
.dsc-hero__logo {
	display: none;
}

/* Visueel verborgen, wél voor schermlezers (aria-live-regio rekentool). */
.dsc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Mobiel: koppen gebalanceerd afbreken, alinea's netjes (voorkomt lelijke wezen). */
@media (max-width: 781px) {
	h1,
	h2,
	h3 {
		text-wrap: balance;
	}
	p {
		text-wrap: pretty;
	}
}

.dsc-hero__sub {
	font-size: 20px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
	margin: 20px 0 0;
	max-width: 42ch;
}

.dsc-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
	margin-top: 32px;
}

.dsc-hero__buttons {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/* Knop + sub-regel als kolommetje (zoals rekenaar/prijs) */
.dsc-hero__cta-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
}

/* Gedeelde primaire knop — één stijl op de hele pagina (hero, navbar, rekenaar). */
.dsc-btn {
	box-sizing: border-box; /* zodat width:100% (mobiel) mét padding binnen de kaart blijft */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 17px;
	line-height: 1;
	padding: 15px 30px;
	border: 0;
	border-radius: 9999px;
	cursor: pointer;
	transition: background .2s;
}

.dsc-btn:hover,
.dsc-btn:active {
	background: var(--wp--preset--color--orange-deep);
}

.dsc-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/* Regeltje onder een CTA-knop (rekenaar, prijs), gecentreerd onder de knop */
.dsc-cta-sub {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 9.5px;
	color: var(--wp--preset--color--ink);
	text-align: center;
	margin: 8px 0 0;
}

/* Secundaire actie: kale tekstknop in ink-soft */
.dsc-hero__cta-alt {
	display: inline-block;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	padding: 8px 10px;
	/* uitlijnen op het midden van de knop ernaast */
	margin-top: 8px;
	transition: color .2s;
}

.dsc-hero__cta-alt:hover {
	color: var(--wp--preset--color--ink);
}

.dsc-hero__proof {
	font-size: 15px;
	color: var(--wp--preset--color--ink-muted);
}

.dsc-hero__proof strong {
	color: var(--wp--preset--color--ink);
}

.dsc-hero__media {
	align-self: end;
	justify-self: end;
	padding-right: 30px;
	display: flex;
	justify-content: flex-end;
}

.dsc-hero__photo {
	position: relative;
}

.dsc-hero__photo img {
	display: block;
	width: auto;
	height: auto;
	max-height: 440px;
	filter: drop-shadow(13px 8px 12px rgba(33, 27, 21, 0.30));
}

.dsc-hero__name {
	position: absolute;
	display: flex;
	align-items: flex-start;
	gap: 2px;
	font-family: 'Caveat', ui-sans-serif, cursive;
	font-weight: 600;
	font-size: 29px;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	opacity: 0.4;
	pointer-events: none;
}

.dsc-hero__arrow {
	width: 34px;
	height: 37px;
	color: var(--wp--preset--color--orange);
	flex: none;
}

.dsc-hero__arrow--flip {
	transform: scaleX(-1);
}

.dsc-hero__name--wesley {
	top: -6px;
	left: 3%;
}

.dsc-hero__name--wesley .dsc-hero__name-text {
	margin-top: -13px;
}

.dsc-hero__name--lucas {
	top: -18px;
	right: 4%;
}

.dsc-hero__name--lucas .dsc-hero__name-text {
	margin-top: -7px;
	margin-left: -6px;
}

.dsc-hero__name--lucas .dsc-hero__arrow {
	position: relative;
	left: -6px;
}

@media (max-width: 781px) {
	/* Hero reikt onder de zwevende pill; full-bleed met ronde onderhoeken. */
	.dsc-home-main {
		margin-top: 0; /* nav is nu een zwevende knop; geen pull meer */
	}
	.dsc-hero {
		margin: 0; /* full-bleed zodat de brede H1 op één regel past */
		border-radius: 0 0 24px 24px;
	}
	.dsc-hero__inner {
		grid-template-columns: 1fr;
	}
	/* Inhoud links; 16px zijruimte zodat H1 en eyebrow op 360px op één regel passen. */
	.dsc-hero__text {
		padding: calc(env(safe-area-inset-top) + 104px) 12px 0;
		text-align: center;
	}
	.dsc-hero__eyebrow {
		white-space: nowrap; /* alle drie de delen op één regel */
	}
	.dsc-hero__eyebrow-desk {
		display: inline;
	}
	.dsc-hero__eyebrow-mob {
		display: none;
	}
	.dsc-hero__sub {
		font-size: 18px;
		line-height: 1.5;
		max-width: none;
	}
	/* Proof direct vóór de CTA (social proof), knoppen eronder gestapeld. */
	.dsc-hero__actions {
		align-items: stretch;
		gap: 20px;
		margin-top: 24px;
	}
	.dsc-hero__proof {
		order: -1;
		text-align: center;
	}
	.dsc-hero__proof-desk {
		display: none;
	}
	.dsc-hero__proof-mob {
		display: inline;
		white-space: nowrap; /* "★★★★★ 4,9/5 · 90+ ondernemers" op één regel (≥360px) */
	}
	.dsc-hero__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.dsc-hero__cta-wrap {
		width: auto;
		align-items: center;
	}
	.dsc-hero__cta {
		width: 100%;
		min-height: 52px;
		white-space: nowrap;
	}
	.dsc-hero__cta-alt {
		text-align: center;
		align-self: center;
		justify-content: center;
		margin-top: 0;
	}
	.dsc-hero__alt-desk {
		display: none;
	}
	.dsc-hero__alt-mob {
		display: inline;
	}
	/* Foto vol breed, onderaan verankerd; ruimte erboven voor de namen. */
	.dsc-hero__media {
		max-width: none;
		margin: 0;
		padding-right: 0;
		justify-content: center;
		justify-self: center; /* was 'end' (desktop) → foto stond rechts */
	}
	.dsc-hero__photo {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto; /* fotokader om de foto, gecentreerd */
	}
	.dsc-hero__photo img {
		max-width: 100%;
		max-height: 300px; /* een stuk kleiner */
		width: auto;
		height: auto;
		display: block;
	}
	/* Namen ~70% en binnen de foto-container. */
	.dsc-hero__name {
		font-size: 20px;
	}
	.dsc-hero__arrow {
		width: 24px;
		height: 26px;
	}
	.dsc-hero__name--wesley {
		top: -6px;
		left: 2%;
	}
	.dsc-hero__name--lucas {
		top: -14px;
		right: 2%;
	}
}

/* Desktop: vak reikt omhoog tot achter de (zwevende) navbar */
@media (min-width: 782px) {
	.dsc-home-main {
		margin-top: -96px;
	}
	/* Alleen het kader groeit mee; zijmarge = bovenmarge (13px). Inhoud blijft vast. */
	.dsc-hero {
		max-width: none;
		width: calc(100% - 26px);
		margin-inline: auto;
		/* Geen vaste hoogte / geen 100vh: kader groeit met de viewport binnen grenzen. */
		min-height: clamp(560px, 78vh, 820px);
	}
	.dsc-hero__inner {
		box-sizing: border-box;
		min-height: inherit;
		/* Navbar-vrije zone: main is 96px omhoog getrokken, dit duwt de inhoud weer terug. */
		padding-top: 96px;
	}
	/* Kop op vaste grootte zodat de inhoud niet meegroeit met het kader */
	.dsc-hero__title {
		font-size: 56px;
	}
	/* Inhoud verticaal gecentreerd in de linkerkolom, onder de navbar-zone. */
	.dsc-hero__text {
		align-self: center;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	/* Foto onderaan verankerd; hoogte schaalt mee met het kader, nooit bijgesneden. */
	.dsc-hero__media {
		align-self: end;
	}
	.dsc-hero__photo img {
		max-height: none;
		height: clamp(360px, 53vh, 610px);
		width: auto;
	}
}

/* Robuust tegen WP's constrained-layout cap (standaard contentSize 720px):
   forceer de desktopbreedtes van de main-kinderen met hogere specificiteit
   (.dsc-home-main > …), ongeacht de volgorde waarin WP de layout-CSS uitvoert.
   Zonder dit perkte de cap soms hero + secties in tot 720px. */
@media (min-width: 782px) {
	.dsc-home-main > .dsc-hero {
		max-width: none;
	}
	.dsc-home-main > .dsc-hoe {
		max-width: 880px;
	}
	.dsc-home-main > .dsc-rekenaar {
		max-width: 1000px;
	}
	.dsc-home-main > .dsc-tst,
	.dsc-home-main > .dsc-prijs,
	.dsc-home-main > .dsc-team,
	.dsc-home-main > .dsc-faq {
		max-width: none;
	}
}

/* ---------- Hoe het werkt ---------- */
.dsc-hoe {
	--bol: 36px;
	--gap-x: 20px;       /* marker → tekst; bol-linkerrand(0) + bol + gap = 56px tekststart */
	--gap-steps: 40px;   /* ruimte tussen stappen */
	max-width: 880px;    /* kaderloze sectie: zelfde kolom als case, team en FAQ */
	margin: 67px auto 96px;
}

.dsc-hoe__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 14px;
}

.dsc-hoe__title {
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 0 0 40px;
}

.dsc-hoe__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap-steps);
}

.dsc-hoe__item {
	display: flex;
	gap: var(--gap-x);
	align-items: stretch;
}

.dsc-hoe__marker {
	position: relative;
	flex: none;
	width: var(--bol);
}

/* Verticale lijn: van bol-midden naar de volgende bol; overbrugt de tussenruimte */
.dsc-hoe__item:not(:last-child) .dsc-hoe__marker::after {
	content: "";
	position: absolute;
	top: calc(var(--bol) / 2);
	bottom: calc(-1 * var(--gap-steps));
	left: 50%;
	transform: translateX(-50%);
	width: 1.5px;
	background: var(--wp--preset--color--line);
}

.dsc-hoe__bol {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bol);
	height: var(--bol);
	border-radius: 50%;
	background: var(--wp--preset--color--paper);
	border: 1.5px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
}

.dsc-hoe__bol--fill {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--paper);
}

.dsc-hoe__step-title {
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -0.015em;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.dsc-hoe__step-text {
	max-width: 624px;   /* leesbreedte gelijk aan de oude 680px-kolom */
	font-size: 18px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-muted);
	margin: 8px 0 0;
}

.dsc-hoe__annotation {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	color: var(--wp--preset--color--ink-soft);
	margin: 10px 0 0;
}

.dsc-hoe__link-wrap {
	margin: 10px 0 0;
}

.dsc-hoe__link {
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--line);
	text-underline-offset: 3px;
}

.dsc-hoe__link:hover {
	text-decoration-color: var(--wp--preset--color--ink);
}

@media (max-width: 781px) {
	.dsc-hoe {
		--bol: 32px;
		--gap-x: 16px;   /* 32 + 16 = 48px tekststart */
		--gap-steps: 32px;
		margin: 45px auto 64px;
		padding: 0 24px;
	}
}

/* ---------- Rekenaar ---------- */
.dsc-rekenaar {
	background: var(--wp--preset--color--paper-soft);
	border-radius: 8px;
	padding: 48px;
	max-width: 1000px;
	margin: 96px auto;
}

.dsc-rekenaar__head {
	margin-bottom: 28px;
}

.dsc-rekenaar__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 12px;
}

.dsc-rekenaar__title {
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

/* Twee kolommen: links vraag + schuif, rechts uitkomst + knop. Op mobiel
   worden de wrappers display:contents zodat de items via order herschikken
   naar: vraag, bedrag, schuif, knop. */
.dsc-rekenaar__cols {
	display: grid;
	grid-template-columns: 55fr 45fr;
}

.dsc-rekenaar__colL {
	padding-right: 32px;
}

.dsc-rekenaar__colR {
	padding-left: 32px;
	border-left: 1px solid var(--wp--preset--color--line);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.dsc-rekenaar__slidewrap {
	margin-top: 20px;
}

.dsc-rekenaar__label {
	display: block;
	font-size: 17px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
}

.dsc-rekenaar__hint {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
	margin: 4px 0 0;
}

/* Huidige waarde (FTE-label) — stabiel (tekst-update, beweegt niet mee → geen flikker) */
.dsc-rekenaar__current {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 24px; /* grote tekst zodat Orange op Paper Soft ≥ 3:1 haalt */
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 0 0 8px;
}

.dsc-rekenaar__current span {
	color: var(--wp--preset--color--orange);
}

/* Schuif — track is de positioneringscontext voor de maat-as */
.dsc-rekenaar__track {
	--thumb: 24px;
	position: relative;
}

.dsc-rekenaar__slider {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 9999px;
	background: var(--wp--preset--color--line);
	margin: 0;
	cursor: pointer;
}

.dsc-rekenaar__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--thumb);
	height: var(--thumb);
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	border: 3px solid var(--wp--preset--color--paper-soft);
	box-shadow: 0 1px 4px rgba(33, 27, 21, 0.25);
}

.dsc-rekenaar__slider::-moz-range-thumb {
	width: var(--thumb);
	height: var(--thumb);
	border: 3px solid var(--wp--preset--color--paper-soft);
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	box-shadow: 0 1px 4px rgba(33, 27, 21, 0.25);
}

.dsc-rekenaar__slider:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 6px;
}

/* As: alleen 0,5 links en 25 rechts, geen streepjes */
.dsc-rekenaar__axis {
	position: relative;
	height: 16px;
	margin-top: 10px;
}

.dsc-rekenaar__mark {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--preset--color--ink-soft);
	white-space: nowrap;
}

/* Uitkomst */
.dsc-rekenaar__result-label {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 8px;
}

.dsc-rekenaar__amount {
	font-size: clamp(36px, 5vw, 48px);
	line-height: 1;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--wp--preset--color--orange);
	margin: 0;
}

.dsc-rekenaar__waiting {
	font-size: 17px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
	margin: 14px 0 0;
}

.dsc-rekenaar__disclaimer {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 20px 0 0;
}

/* Knop-blok onder het bedrag (in de rechterkolom) */
.dsc-rekenaar__rbottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
}

.dsc-rekenaar__cta {
	margin-top: 32px;
}

.dsc-rekenaar__foot-note {
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
	margin: 10px 0 0;
}

@media (max-width: 781px) {
	.dsc-rekenaar {
		padding: 24px;
		margin: 64px auto;
	}
	/* Kolom-wrappers plat; items herschikken via order (HTML-volgorde = desktop):
	   eyebrow/H2 → vraag → FTE+schuif → lijn → uitkomst → CTA → disclaimer. */
	.dsc-rekenaar__cols {
		display: flex;
		flex-direction: column;
	}
	.dsc-rekenaar__colL,
	.dsc-rekenaar__colR {
		display: contents;
	}
	/* Horizontale scheidingslijn tussen schuif en uitkomst — zelfde Line-token en
	   dikte als de verticale lijn tussen de kolommen op desktop. */
	.dsc-rekenaar__cols::after {
		content: "";
		order: 4;
		width: 100%;
		border-top: 1px solid var(--wp--preset--color--line);
		margin: 24px 0;
	}
	.dsc-rekenaar__head {
		order: 1;
	}
	.dsc-rekenaar__control {
		order: 2;
		margin-top: 10px;
	}
	.dsc-rekenaar__slidewrap {
		order: 3;
		margin-top: 16px;
	}
	.dsc-rekenaar__rtop {
		order: 5;
	}
	/* Getal rechts uitgelijnd in een vaste doos (breed genoeg voor '24,5'): de
	   rechterkant staat vast, zodat FTE er strak naast blijft staan en het getal
	   naar links groeit. '3' staat zo op de plek van de laatste '5' in '24,5'. */
	.dsc-rekenaar__current-num {
		display: inline-block;
		min-width: 4ch;
		text-align: right;
	}
	.dsc-rekenaar__rbottom {
		order: 6;
		margin-top: 12px;
		align-items: center;
		width: auto;
	}
	/* Direct onder de schuiflabels, boven de lijn (zelfde plek als onderaan de
	   linkerkolom op desktop). Links uitgelijnd zoals de schuif erboven. */
	.dsc-rekenaar__disclaimer {
		order: 4;
		margin: 16px 0 0;
		font-size: 12px;
		line-height: 1.55;
		text-align: left;
		text-wrap: pretty;
		color: var(--wp--preset--color--ink-soft);
	}
	.dsc-rekenaar__track {
		--thumb: 28px;
	}
	/* Slider: tikgebied ≥ 44px hoog, 4px-lijn gecentreerd (visueel ~ongewijzigd). */
	.dsc-rekenaar__slider {
		height: 44px;
		background: transparent;
	}
	.dsc-rekenaar__slider::-webkit-slider-runnable-track {
		height: 4px;
		border-radius: 9999px;
		background: var(--wp--preset--color--line);
	}
	.dsc-rekenaar__slider::-moz-range-track {
		height: 4px;
		border-radius: 9999px;
		background: var(--wp--preset--color--line);
	}
	.dsc-rekenaar__slider::-webkit-slider-thumb {
		margin-top: -12px; /* 28px duim centreren op de 4px-lijn binnen 44px */
	}
	.dsc-rekenaar__cta {
		width: fit-content;
		min-width: 251px; /* zelfde breedte als de hero-knop */
		max-width: 100%;
		min-height: 48px;
		padding: 14px 24px;
	}
}

/* ---------- Testimonial (Uit de praktijk) ---------- */
.dsc-tst {
	margin: 96px 0;
}

.dsc-tst__inner {
	max-width: 880px;
	margin: 0 auto;
}

.dsc-tst__cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 40px;
	align-items: start;
}

.dsc-tst__head {
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.dsc-tst__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 12px;
}

.dsc-tst__kop {
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.dsc-tst__figure {
	margin: 0;
}

.dsc-tst__quote {
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-wrap: pretty;
	margin: 0;
}

.dsc-tst__caption {
	margin: 22px 0 0;
}

.dsc-tst__name {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.dsc-tst__role {
	display: block;
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
	margin-top: 2px;
}

/* Kleine ronde avatar: alleen op mobiel zichtbaar */
.dsc-tst__avatar {
	display: none;
}

.dsc-tst__avatar--placeholder {
	background: #ede6d6; /* Paper Deep */
}

/* Cijferregel: drie gelijke blokken, lijn boven/onder en tussen */
.dsc-tst__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch; /* vakken even hoog → getallen kunnen onderaan uitlijnen */
	margin: 26px 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.dsc-tst__stat {
	display: flex;
	flex-direction: column;
	padding: 12px 16px;
	border-left: 1px solid var(--wp--preset--color--line);
}

.dsc-tst__stat:first-child {
	border-left: 0;
	padding-left: 0;
}

.dsc-tst__stat-label {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 4px; /* minimale ruimte tot het getal */
}

/* margin-top:auto duwt het getal naar onderen → de drie getallen lijnen onderaan
   uit (ook als een label over twee regels breekt), mits de vakken even hoog zijn. */
.dsc-tst__stat-value {
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--orange);
	margin: auto 0 0;
}

.dsc-tst__caselink {
	display: inline-block;
	margin-top: 18px;
	font-size: 15px;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--line);
	text-underline-offset: 4px;
}

.dsc-tst__caselink:hover {
	text-decoration-color: var(--wp--preset--color--ink);
}

/* Foto (rechterkolom) */
.dsc-tst__media {
	align-self: center;
}

.dsc-tst__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 8px;
}

/* Placeholdervlak zolang er geen echte foto is */
.dsc-tst__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ede6d6; /* Paper Deep */
}

.dsc-tst__photo-label {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #a89f90;
}

/* Google-regel: volle breedte onder de kolommen */
.dsc-tst__google {
	margin: 40px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 14px;
	color: var(--wp--preset--color--ink-muted);
}

.dsc-tst__stars {
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.05em;
}

.dsc-tst__score {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.dsc-tst__google-link {
	color: var(--wp--preset--color--ink-muted);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--line);
	text-underline-offset: 3px;
}

.dsc-tst__google-link:hover {
	color: var(--wp--preset--color--ink);
}

@media (max-width: 781px) {
	.dsc-tst {
		margin: 64px 0;
	}
	.dsc-tst__cols {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.dsc-tst__quote {
		font-size: 21px;
	}
	/* Grote foto vervalt; kleine ronde avatar naast naam en functie */
	.dsc-tst__media {
		display: none;
	}
	.dsc-tst__caption {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.dsc-tst__avatar {
		display: block;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		object-fit: cover;
		flex: none;
	}
}

/* Zeer smal: cijfer-blokken onder elkaar met horizontale lijn ertussen */
@media (max-width: 380px) {
	.dsc-tst__stats {
		grid-template-columns: 1fr;
	}
	.dsc-tst__stat {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--line);
		padding: 10px 0;
	}
	.dsc-tst__stat:first-child {
		border-top: 0;
	}
}

/* ---------- Prijs ---------- */
/* Mobile-first (min-width 782, 1024), zoals DESIGN.md vraagt. Kop, vier beloftes met handen,
   knop en tekstlink in één kader. Het voorbeeld met maatlijnen is vervallen. */
.dsc-prijs {
	margin: 96px 0;
}

/* Eén kader om de hele sectie, zelfde box-model als de rekenaar (maar
   zonder schaduw, die blijft exclusief voor de rekenaar). */
.dsc-prijs__kader {
	box-sizing: content-box;
	max-width: 1000px;
	margin: 0 auto;
	background: var(--wp--preset--color--paper-soft);
	border-radius: 8px;
	padding: 48px;
}

.dsc-prijs__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 12px;
}

.dsc-prijs__kop {
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 0 0 32px;
}
/* In het kader bepaalt de grid-gap de ruimte onder de kop; geen dubbele marge. */
.dsc-prijs__hoofd .dsc-prijs__kop {
	margin-bottom: 0;
}

.dsc-prijs__kop-accent {
	color: var(--wp--preset--color--orange);
}

/* Layout: mobiel alles onder elkaar (kop, beloftes, knop + tekstlink). */
.dsc-prijs__blok {
	display: grid;
	gap: 32px;
}

/* --- Vier beloftes: hand links, tekst rechts, verticaal gecentreerd. Geen lijnen. --- */
.dsc-prijs__beloftes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}
.dsc-prijs__belofte {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 10px 0;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.dsc-prijs__belofte-tekst {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	text-wrap: pretty;
}
/* De hand komt uit dezelfde bron als /prijzen (assets/handen/hand-*.svg): hier als CSS-mask,
   zodat de vorm in ink kleurt zonder een kopie van de SVG. Geen oranje. */
.dsc-prijs__hand {
	flex: none;
	width: 30px;
	height: 41px;
	background-color: var(--wp--preset--color--ink);
	-webkit-mask: var(--dsc-hand) center / contain no-repeat;
	mask: var(--dsc-hand) center / contain no-repeat;
}
.dsc-prijs__hand--1 { --dsc-hand: url('/wp-content/themes/desubsidieclub/assets/handen/hand-1.svg'); }
.dsc-prijs__hand--2 { --dsc-hand: url('/wp-content/themes/desubsidieclub/assets/handen/hand-2.svg'); }
.dsc-prijs__hand--3 { --dsc-hand: url('/wp-content/themes/desubsidieclub/assets/handen/hand-3.svg'); }
.dsc-prijs__hand--4 { --dsc-hand: url('/wp-content/themes/desubsidieclub/assets/handen/hand-4.svg'); }
/* Laatste woord + pijl samen op één regel; de pijl is mono, kleiner, ink-soft. */
.dsc-prijs__nowrap {
	white-space: nowrap;
}
.dsc-prijs__pijl {
	display: inline-block; /* valt buiten de hover-onderstreping van de tekst */
	margin-left: 0.15em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
	color: var(--wp--preset--color--ink-soft);
}
@media (hover: hover) {
	.dsc-prijs__belofte:hover .dsc-prijs__belofte-tekst {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}
.dsc-prijs__belofte:focus-visible,
.dsc-prijs__meer:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/* --- Knop + tekstlink: mobiel gecentreerd onder elkaar. --- */
.dsc-prijs__acties {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.dsc-prijs__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.dsc-prijs__cta-btn {
	flex: none;
	white-space: nowrap; /* "Doe de WBSO-check" breekt nooit af */
}
.dsc-prijs__meer {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* --- Vanaf 782: kop links, beloftes rechts; knop + tekstlink als rij eronder. --- */
@media (min-width: 782px) {
	.dsc-prijs__blok {
		grid-template-columns: 1fr 1fr;
		column-gap: 56px;
		row-gap: 40px;
		grid-template-areas:
			"hoofd  beloftes"
			"acties acties";
		grid-template-rows: auto auto;
		align-items: start;
	}
	.dsc-prijs__hoofd {
		grid-area: hoofd;
	}
	.dsc-prijs__beloftes {
		grid-area: beloftes;
		align-self: center;
		gap: 18px;
	}
	.dsc-prijs__belofte {
		gap: 16px;
		min-height: 46px;
		padding: 0;
	}
	.dsc-prijs__belofte-tekst {
		font-size: 20px;
	}
	.dsc-prijs__hand {
		width: 34px;
		height: 46px;
	}
	.dsc-prijs__acties {
		grid-area: acties;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 28px;
	}
	/* B1: het onderschrift staat gecentreerd onder de knop (de basis .dsc-prijs__cta is al
	   center; op desktop geen flex-start-override meer). De knop zelf is breder dan het
	   onderschrift, dus hij blijft op zijn plek; de link ernaast (.dsc-prijs__meer) ook. */
	.dsc-prijs__meer {
		min-height: 47px; /* op de hoogte van de knop */
	}
}

/* --- Vanaf 1024: twee gelijke kolommen; knop onderaan links, tekstlink ernaast;
   beloftes verticaal gecentreerd in het kader. --- */
@media (min-width: 1024px) {
	.dsc-prijs__blok {
		grid-template-areas:
			"hoofd  beloftes"
			"acties beloftes";
		grid-template-rows: 1fr auto;
		align-items: stretch;
	}
	.dsc-prijs__beloftes {
		align-self: center;
	}
	.dsc-prijs__acties {
		align-self: end;
	}
}

/* ---------- Wie zijn wij (team) ---------- */
.dsc-team {
	margin: 96px 0;
}

.dsc-team__inner {
	max-width: 880px;
	margin: 0 auto;
}

.dsc-team__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 12px;
}

.dsc-team__kop {
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 0 0 14px;
}

.dsc-team__sub {
	font-size: 20px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
	max-width: none;
	margin: 0;
}

.dsc-team__grid {
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.dsc-team__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
}

.dsc-team__foto--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ede6d6; /* Paper Deep */
}

.dsc-team__foto-label {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #a89f90;
}

.dsc-team__naam {
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 14px 0 0;
}

.dsc-team__label {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 10.5px;
	color: var(--wp--preset--color--orange-deep); /* < 24px → Orange Deep (4.83:1 op Paper) */
	margin: 4px 0 0;
}

.dsc-team__quote {
	font-size: 17px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 16px 0 0;
	padding-left: 12px;
	border-left: 2px solid var(--wp--preset--color--orange);
}

@media (max-width: 781px) {
	.dsc-team {
		margin: 64px 0;
	}
	/* Label op vaste hoogte van 2 regels zodat beide labels (het ene 2-regelig,
	   het andere 1-regelig) even hoog zijn → beide quotes beginnen op gelijke hoogte. */
	.dsc-team__label {
		line-height: 1.5;
		min-height: 3em;
	}
}

/* ---------- FAQ ---------- */
.dsc-faq {
	margin: 96px 0 0;
	/* 72 + 24px structurele main→footer-gap = 96px tot het footerkader */
	padding-bottom: 72px;
}

.dsc-faq__inner {
	max-width: 880px; /* kaderloze sectie */
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 40px;
	align-items: start;
}

.dsc-faq__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 12px;
}

.dsc-faq__kop {
	font-size: clamp(30px, 4vw, 40px); /* zelfde H2-maat als de andere secties */
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.dsc-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.dsc-faq__item:first-of-type {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Summary: vraag + plus/min-teken, standaard-marker verborgen */
.dsc-faq__vraag {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
}

.dsc-faq__vraag::-webkit-details-marker {
	display: none;
}

.dsc-faq__vraag:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.dsc-faq__vraag-tekst {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}

.dsc-faq__teken {
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 18px;
	line-height: 1;
	color: var(--wp--preset--color--ink-soft);
}

.dsc-faq__teken::before {
	content: "+";
}

.dsc-faq__item[open] .dsc-faq__teken::before {
	content: "−";
}

.dsc-faq__antwoord {
	max-width: 560px;
	padding: 0 34px 20px 0;
}

.dsc-faq__antwoord p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
}

.dsc-faq__antwoord p + p {
	margin-top: 10px;
}

/* Inline links in een FAQ-antwoord (markdown → link, sinds de tool/calculator):
   merkstijl i.p.v. de standaard browserblauw. Zoals .dsc-kb__inhoud a. */
.dsc-faq__antwoord p a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--orange);
	text-underline-offset: 3px;
}

.dsc-faq__link {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--line);
	text-underline-offset: 3px;
}

.dsc-faq__link:hover {
	text-decoration-color: var(--wp--preset--color--ink);
}

@media (max-width: 781px) {
	.dsc-faq {
		margin: 64px 0 0;
	}
	.dsc-faq__inner {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 0 24px;
	}
}

/* ---------- Footer ---------- */
.dsc-footer {
	box-sizing: border-box;
	width: calc(100% - 26px);
	max-width: none;
	margin: 0 auto 24px;
	padding: 72px 0 28px;
	border-radius: 20px;
	background: var(--wp--preset--color--ink);
	color: #d9d2c6;
}

.dsc-footer__inner {
	max-width: 1000px;
	margin: 0 auto;
}

/* 1. Oproep, twee kolommen (rechts de Cal-embed) */
.dsc-footer__oproep {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.dsc-footer__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	color: #a89f90;
	margin: 0 0 14px;
}

.dsc-footer__kop {
	font-size: 56px;
	line-height: 1.02;
	letter-spacing: -0.03em;
	font-weight: 500;
	color: var(--wp--preset--color--paper);
	margin: 0;
}

.dsc-footer__tekst {
	font-size: 18px;
	line-height: 1.5;
	color: #d9d2c6;
	max-width: 460px;
	margin: 18px 0 0;
}

/* De drie kwartiertje-punten met vinkje (besloten 16 okt, mockup kwartiertje.html).
   18 px desktop, 16 px mobiel; dezelfde tekst als in de WBSO-check. */
.dsc-footer__punten {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 460px;
	font-size: 18px;
	line-height: 1.45;
	color: #fcfaf1;
}
.dsc-footer__punten li {
	display: grid;
	grid-template-columns: 18px 1fr;
	column-gap: 10px;
	align-items: start;
}
.dsc-footer__punten li::before {
	content: "";
	width: 12px;
	height: 7px;
	margin: 7px 0 0 3px;
	border: solid #d8d0c2;
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg);
}

.dsc-footer__oproep-rechts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* Skeleton-agenda — rustige lege maandweergave tot de Cal.com-agenda er staat.
   Gedeeld door de footer (hierboven) en het agendakader in de WBSO-check. De skeleton
   vult het kader (zelfde hoogte als de maandweergave, dus geen layout shift) en vloeit
   op bookerReady in ~200 ms weg (cal.js zet .is-weg). */
.dsc-footer__cal,
.dsc-check__cal {
	position: relative;
}
.dsc-cal-skelet {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	padding: 18px;
	border-radius: 12px;
	background: var(--wp--preset--color--paper);
	transition: opacity 200ms ease;
}
.dsc-cal-skelet.is-weg {
	opacity: 0;
	pointer-events: none;
}
.dsc-cal-skelet__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dsc-cal-skelet__maand {
	width: 38%;
	height: 16px;
	border-radius: 6px;
	background: var(--wp--preset--color--line);
}
.dsc-cal-skelet__pijlen {
	display: flex;
	gap: 10px;
}
.dsc-cal-skelet__pijl {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: var(--wp--preset--color--line);
}
.dsc-cal-skelet__dagen {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
}
.dsc-cal-skelet__rooster {
	position: relative;
	flex: 1;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-auto-rows: 1fr;
	gap: 6px;
	overflow: hidden;
}
.dsc-cal-skelet__vak {
	border-radius: 8px;
	background: var(--wp--preset--color--paper-soft);
}
/* Zachte, langzame glans die over de vakjes loopt. */
.dsc-cal-skelet__rooster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent 35%,
		color-mix(in srgb, var(--wp--preset--color--paper) 65%, transparent) 50%,
		transparent 65%
	);
	background-size: 220% 100%;
	background-repeat: no-repeat;
	animation: dsc-cal-glans 2.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes dsc-cal-glans {
	0% {
		background-position: 160% 0;
	}
	100% {
		background-position: -60% 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.dsc-cal-skelet {
		transition: none;
	}
	.dsc-cal-skelet__rooster::after {
		animation: none;
	}
}

/* 2. Links */
.dsc-footer__links {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: 24px;
	margin-top: 56px;
	padding-top: 36px;
	border-top: 1px solid rgba(252, 250, 241, 0.12);
}

/* Mobiele rij (telefoon · Privacy · LinkedIn): alleen onder 600px (zie onderaan). Vanaf 600px
   verborgen zodat de vierkoloms-grid hierboven onaangeroerd blijft. */
.dsc-footer__mobielrij {
	display: none;
}

.dsc-footer__kolom--merk {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.dsc-footer__logo {
	display: inline-block;
	/* Logo verticaal gecentreerd in de kolomhoogte; mail wordt naar onder geduwd. */
	margin-top: auto;
}

.dsc-footer__logo img {
	height: 64px;
	width: auto;
	display: block;
}

.dsc-footer__mail {
	display: inline-block;
	/* Mail onderaan, op gelijke hoogte met de onderste link (Veelgestelde vragen). */
	margin-top: auto;
	font-size: 14px;
	color: #d9d2c6;
	text-decoration: none;
}

.dsc-footer__mail:hover {
	color: var(--wp--preset--color--paper);
}

.dsc-footer__label {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 10px;
	color: #a89f90;
	margin: 0 0 16px;
}

.dsc-footer__kolom-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dsc-footer__kolom-lijst a {
	font-size: 14px;
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.dsc-footer__kolom-lijst a:hover {
	text-decoration: underline;
	text-decoration-color: rgba(252, 250, 241, 0.35);
	text-underline-offset: 3px;
}

/* 3. Onderbalk */
.dsc-footer__balk {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 36px;
	padding-top: 16px;
	border-top: 1px solid rgba(252, 250, 241, 0.12);
	font-size: 12.5px;
	color: #a89f90;
}

.dsc-footer__balk-links {
	margin: 0;
}

.dsc-footer__balk-rechts {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Op desktop transparant (links tellen als directe flex-items van __balk-rechts);
   op mobiel wordt dit een eigen rij met Privacy links en Algemene voorwaarden rechts. */
.dsc-footer__legal {
	display: contents;
}

.dsc-footer__balk-rechts a {
	color: #a89f90;
	text-decoration: none;
}

.dsc-footer__balk-rechts a:hover {
	color: var(--wp--preset--color--paper);
}

.dsc-footer__linkedin {
	display: inline-flex;
	color: #a89f90;
}

.dsc-footer__linkedin:hover {
	color: var(--wp--preset--color--paper);
}

@media (max-width: 781px) {
	.dsc-footer {
		padding: 28px;
	}
	.dsc-footer__oproep {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: start;
	}
	.dsc-footer__oproep-rechts {
		align-items: stretch;
	}
	.dsc-footer__links {
		grid-template-columns: 1fr 1fr;
		gap: 32px 24px;
	}
	.dsc-footer__kolom--merk {
		grid-column: 1 / -1;
	}
	.dsc-footer__logo {
		margin-top: 0;
	}
	.dsc-footer__mail {
		margin-top: 16px;
	}
	.dsc-footer__balk {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.dsc-footer__balk-rechts {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}
	.dsc-footer__legal {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		gap: 20px;
	}
}

/* ============================================================
   GLOBALE MOBIELE FUNDAMENTEN (<782px)
   Gebundeld en als laatste zodat deze overrides winnen.
   ============================================================ */
@media (max-width: 781px) {

	/* --- Zijmarge (gutter) gelijk over alle secties --- */
	.dsc-hoe,
	.dsc-tst,
	.dsc-team,
	.dsc-prijs,
	.dsc-faq__inner {
		padding-inline: var(--dsc-gutter);
	}
	/* Kaarten: gutter als buitenmarge, 24px binnenpadding */
	.dsc-rekenaar {
		margin-inline: var(--dsc-gutter);
		padding: 24px;
	}
	.dsc-prijs__kader {
		padding: 24px;
	}
	.dsc-footer {
		padding-inline: var(--dsc-gutter);
	}

	/* --- Leestekst nooit < 16px --- */
	.dsc-faq__antwoord p,
	.dsc-tst__name,
	.dsc-tst__role,
	.dsc-tst__caselink,
	.dsc-tst__google,
	.dsc-footer__kolom-lijst a,
	.dsc-footer__mail,
	.dsc-hero__cta-alt,
	.dsc-hero__proof {
		font-size: var(--dsc-fs-body);
		line-height: 1.5;
	}

	/* --- Mono-labels nooit < 12px; strakkere tracking zodat ze niet breder worden --- */
	.dsc-cta-sub,
	.dsc-tst__stat-label,
	.dsc-team__label,
	.dsc-footer__label {
		font-size: var(--dsc-fs-label);
		letter-spacing: 0.06em;
	}

	/* --- Tikdoelen ≥ 44px voor losstaande links (padding, niet visueel) --- */
	.dsc-hero__cta-alt,
	.dsc-hoe__link,
	.dsc-tst__caselink,
	.dsc-faq__antwoord .dsc-faq__link,
	.dsc-footer__mail,
	.dsc-footer__kolom-lijst a,
	.dsc-footer__balk-rechts a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	/* Footer-linklijst: compactere gap want elke rij is nu 44px hoog */
	.dsc-footer__kolom-lijst {
		gap: 2px;
	}
	/* Links midden in een zin blijven inline (underline + offset behouden) */
	.dsc-tst__google-link {
		display: inline;
		min-height: 0;
	}
}

/* ============================================================
   NAVIGATIE MOBIEL · MENU
   ============================================================ */

/* Smooth scroll naar ankers (o.a. #kwartiertje) — alleen mobiel, met ruimte voor de nav.
   (Desktop houdt zijn oorspronkelijke, directe scrolgedrag zonder scroll-margin.) */
@media (max-width: 781px) {
	html {
		scroll-behavior: smooth;
	}
	#kwartiertje {
		scroll-margin-top: 96px;
	}
}
@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Body scroll-lock terwijl het menu open is. */
.dsc-no-scroll,
.dsc-no-scroll body {
	overflow: hidden;
}

/* Menu-knop, mail- en telefoon-icoon en menu-dialog bestaan alleen op mobiel. */
.dsc-nav-menu-btn,
.dsc-nav-phone,
.dsc-nav-mail,
.dsc-menu {
	display: none;
}

@media (max-width: 781px) {
	/* Hoogte van de vaste navbar op één plek: 8px padding boven + 44px tikdoelen + 8px
	   onder + 1px lijn = 61px, plus de safe-area op toestellen met een notch. Blokken die
	   onder de balk moeten blijven (zoals de sticky uitkomst van de calculator) lezen deze
	   variabele, zodat ze niet opnieuw een los getal hoeven vast te leggen. */
	:root {
		--dsc-nav-h: calc(env(safe-area-inset-top) + 61px);
	}
	/* --- Rechte, vaste navbar bovenaan: logo links, telefoon + hamburger rechts --- */
	header.wp-block-template-part {
		padding: 0; /* de balk is fixed en reserveert geen flow-ruimte */
	}
	.dsc-nav-desk {
		display: none;
	}
	.dsc-nav-pill {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 210; /* boven het menu (190) zodat de balk zichtbaar blijft */
		display: flex;
		align-items: center;
		gap: 4px;
		width: auto;
		max-width: none;
		margin: 0;
		padding: calc(env(safe-area-inset-top) + 8px) 12px 8px 20px;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
		border-radius: 0;
		background: var(--wp--preset--color--paper);
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	/* Balk blijft altijd zichtbaar (niet verbergen bij scrollen). */
	.dsc-nav-pill.dsc-nav-hidden {
		transform: none;
		opacity: 1;
		pointer-events: auto;
	}
	/* Logo linksboven, iets van de rand af. */
	.dsc-nav-pill .dsc-nav-logo {
		display: flex;
		align-items: center;
		padding: 0;
	}
	.dsc-nav-pill .dsc-nav-logo img {
		height: 40px;
	}
	/* Mail- en telefoon-icoon rechts, naast de hamburger (hele cluster naar rechts geduwd).
	   Het mail-icoon (A3) staat links naast de telefoon en draagt de margin-left:auto, zodat
	   mail + telefoon + hamburger samen als cluster rechts staan. */
	.dsc-nav-mail {
		margin-left: auto;
	}
	.dsc-nav-mail,
	.dsc-nav-phone {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: var(--wp--preset--color--ink);
	}
	/* Hamburger/kruis rechts, naast het telefoon-icoon. */
	.dsc-nav-menu-btn {
		position: static;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--wp--preset--color--ink);
		cursor: pointer;
	}
	.dsc-nav-pill .dsc-nav-menu-btn span {
		display: none;
	}
	/* Hamburger ↔ kruis, instant wisselen. */
	.dsc-nav-icon--close {
		display: none;
	}
	.dsc-nav-menu-btn.is-open .dsc-nav-icon--menu {
		display: none;
	}
	.dsc-nav-menu-btn.is-open .dsc-nav-icon--close {
		display: block;
	}
	/* Geen blauwe tap-flits bij het aantikken; oranje bij hover. */
	.dsc-nav-menu-btn,
	.dsc-nav-phone,
	.dsc-nav-mail {
		-webkit-tap-highlight-color: transparent;
		transition: color .2s;
	}
	.dsc-nav-menu-btn:active,
	.dsc-nav-phone:active,
	.dsc-nav-mail:active {
		color: var(--wp--preset--color--orange);
	}
	/* Hover-kleur alleen op apparaten met een muis (blijft op touch anders hangen). */
	@media (hover: hover) {
		.dsc-nav-menu-btn:hover,
		.dsc-nav-phone:hover,
		.dsc-nav-mail:hover {
			color: var(--wp--preset--color--orange);
		}
	}
	/* Iconen 2 tikjes groter (tikvlak blijft 44px). */
	.dsc-nav-phone svg,
	.dsc-nav-mail svg {
		width: 28px;
		height: 28px;
	}
	.dsc-nav-menu-btn svg {
		width: 30px;
		height: 30px;
	}

	/* --- Volledig-scherm menu --- */
	.dsc-menu {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 190; /* onder de vaste navbar (210) */
		height: 100dvh;
		overflow-y: auto;
		background: var(--wp--preset--color--paper);
		visibility: hidden; /* direct tonen/verbergen, geen slide */
	}
	.dsc-menu.is-open {
		visibility: visible;
	}
	.dsc-menu__panel {
		box-sizing: border-box;
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
		padding: calc(env(safe-area-inset-top) + 64px) var(--dsc-gutter) calc(24px + env(safe-area-inset-bottom));
	}
	.dsc-menu__top {
		display: none; /* navbar blijft zichtbaar met logo + kruis; eigen top-bar overbodig */
	}
	.dsc-menu__top .dsc-nav-logo img {
		height: 34px;
		width: auto;
		display: block;
	}
	/* Inhoud onderin, in de duimzone. */
	.dsc-menu__body {
		margin-top: auto;
		display: flex;
		flex-direction: column;
	}
	.dsc-menu__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		font-size: 23px;
		font-weight: 500;
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}
	.dsc-menu__arrow {
		color: var(--wp--preset--color--ink-soft);
	}
	/* A1: geen focusrand bij openen met muis/tik; wel bij tabben (:focus-visible) en bij
	   openen via het toetsenbord (.dsc-menu--toetsenbord, gezet in nav.js). */
	.dsc-menu__link:focus {
		outline: none;
	}
	.dsc-menu__link:focus-visible,
	.dsc-menu--toetsenbord .dsc-menu__body a[href]:focus {
		outline: 2px solid var(--wp--preset--color--ink);
		outline-offset: 3px;
	}
	.dsc-menu__cta {
		width: 100%;
		min-height: 52px;
		margin-top: 24px;
	}
	.dsc-menu__kwartiertje {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin-top: 14px;
		font-size: 16px;
		text-align: center;
		color: var(--wp--preset--color--ink-muted);
		text-decoration: underline;
		text-decoration-color: var(--wp--preset--color--line);
		text-underline-offset: 3px;
	}
	.dsc-menu__mail {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-top: 8px;
		font-size: 14px;
		color: var(--wp--preset--color--ink-soft);
		text-decoration: none;
	}

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

/* ============================================================
   MOBIEL VISUEEL SYSTEEM (<782px) — typografie, ruimte, kaarten.
   Laatste blok: deze tokens winnen van eerdere per-sectie mobiele regels.
   Desktop (>=782px) wordt hierdoor niet geraakt.
   ============================================================ */
@media (max-width: 781px) {
	:root {
		--m-h1: 40px;
		--m-h2: 32px;
		--m-number: 40px;
		--m-h3: 20px;
		--m-lead: 18px;
		--m-body: 14px;
		--m-meta: 14px;
		--m-eyebrow: 12px;
		--m-space-section: 96px;
		--m-space-block: 40px;
		--m-space-cta: 32px;
		--m-space-group: 16px;
		--m-space-tight: 12px;
		--m-space-pair: 8px;
	}

	/* ---- Eyebrows: klein mono-label, strak op de kop ---- */
	.dsc-hero__eyebrow,
	.dsc-hoe__eyebrow,
	.dsc-rekenaar__eyebrow,
	.dsc-tst__eyebrow,
	.dsc-prijs__eyebrow,
	.dsc-team__eyebrow,
	.dsc-faq__eyebrow,
	.dsc-footer__eyebrow,
	.dsc-rekenaar__result-label {
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--m-eyebrow);
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--wp--preset--color--ink-soft);
		margin: 0 0 var(--m-space-tight);
	}
	.dsc-footer__eyebrow {
		color: #a89f90; /* op donker: lichter dan ink-soft */
	}

	/* ---- H1 ---- */
	.dsc-hero__title {
		font-size: var(--m-h1);
		line-height: 1.05;
		font-weight: 500;
		letter-spacing: -0.02em;
		color: var(--wp--preset--color--ink);
		margin: 0;
	}

	/* ---- H2 (alle sectiekoppen) ---- */
	.dsc-hoe__title,
	.dsc-rekenaar__title,
	.dsc-tst__kop,
	.dsc-prijs__kop,
	.dsc-team__kop,
	.dsc-faq__kop,
	.dsc-footer__kop {
		font-size: var(--m-h2);
		line-height: 1.1;
		font-weight: 500;
		letter-spacing: -0.02em;
	}
	.dsc-hoe__title,
	.dsc-rekenaar__title,
	.dsc-tst__kop,
	.dsc-prijs__kop,
	.dsc-team__kop,
	.dsc-faq__kop {
		color: var(--wp--preset--color--ink);
	}
	/* .dsc-footer__kop houdt Paper (donkere achtergrond) */

	/* ---- H3 (staptitels, FAQ-vragen, teamnamen) ---- */
	.dsc-hoe__step-title,
	.dsc-faq__vraag-tekst,
	.dsc-team__naam {
		font-size: var(--m-h3);
		line-height: 1.3;
		font-weight: 500;
		letter-spacing: 0;
		color: var(--wp--preset--color--ink);
	}

	/* ---- Grote cijfers ---- */
	.dsc-rekenaar__amount {
		font-size: var(--m-number);
		line-height: 1;
		font-weight: 500;
	}

	/* ---- Lead (subtekst direct onder H1/H2) ---- */
	.dsc-hero__sub,
	.dsc-team__sub {
		font-size: var(--m-lead);
		line-height: 1.5;
		color: var(--wp--preset--color--ink-muted);
	}

	/* ---- Body (lopende tekst) ---- */
	.dsc-hoe__step-text,
	.dsc-faq__antwoord p,
	.dsc-team__quote,
	.dsc-rekenaar__label,
	.dsc-rekenaar__waiting,
	.dsc-hero__proof {
		font-size: var(--m-body);
		line-height: 1.55;
		color: var(--wp--preset--color--ink-muted);
	}
	.dsc-team__quote {
		color: var(--wp--preset--color--ink); /* citaat in Ink met oranje streep */
		line-height: 1.5;
	}

	/* ---- Meta (disclaimers, rollen, bronregels, microcopy) ---- */
	.dsc-tst__role,
	.dsc-tst__caselink,
	.dsc-tst__google {
		font-size: var(--m-meta);
		line-height: 1.5;
		color: var(--wp--preset--color--ink-soft);
	}

	/* ---- Ruimte in de hero (exact) ----
	   eyebrow –12– H1 –16– subtekst –32– proof –12– knop –10– microcopy –24– link –40– foto */
	.dsc-hero__sub {
		margin-top: var(--m-space-group);
	}
	.dsc-hero__actions {
		margin-top: var(--m-space-cta);
		gap: var(--m-space-tight);
		align-items: stretch;
	}
	.dsc-hero__buttons {
		gap: 24px;
	}
	.dsc-cta-sub {
		font-size: 10px;
		letter-spacing: 0.08em;
		color: var(--wp--preset--color--ink-soft);
		margin-top: 10px;
	}
	.dsc-hero__photo {
		margin-top: var(--m-space-block);
	}

	/* ---- Sectie-ritme: 96px tussen secties (marges vallen samen) ---- */
	.dsc-hoe,
	.dsc-tst,
	.dsc-team,
	.dsc-faq {
		margin-block: var(--m-space-section);
	}
	.dsc-faq {
		padding-bottom: 0;
	}
	/* koppen-blok –40– inhoud */
	.dsc-hoe__title,
	.dsc-team__kop {
		margin-bottom: 0;
	}
	.dsc-team__sub {
		margin-top: var(--m-space-group);
	}
	.dsc-team__grid {
		margin-top: var(--m-space-block);
		gap: var(--m-space-block);
	}
	/* Achternaam altijd op de tweede regel (op desktop blijft de naam op één regel). */
	.team-voornaam,
	.team-achternaam {
		display: block;
	}
	.dsc-hoe {
		--gap-steps: var(--m-space-block);
	}
	.dsc-hoe__title {
		margin-bottom: var(--m-space-block);
	}
	.dsc-prijs__kop {
		margin-bottom: var(--m-space-block);
	}

	/* ---- Kaarten: rekentool, prijs, Kwartiertje (hero staat hierboven) ---- */
	.dsc-rekenaar {
		margin: var(--m-space-section) 8px;
		padding: 40px 24px;
		border-radius: 24px;
	}
	.dsc-prijs {
		margin-block: var(--m-space-section);
		padding-inline: 0;
	}
	.dsc-prijs__kader {
		margin-inline: 8px;
		padding: 40px 24px;
		border-radius: 24px;
	}
	.dsc-footer {
		width: auto;
		margin: var(--m-space-section) 8px 24px;
		padding: 40px 24px;
		border-radius: 24px;
	}
	.dsc-footer__tekst {
		font-size: var(--m-lead);
		line-height: 1.5;
	}
	.dsc-footer__punten {
		font-size: 16px;
	}
}

/* ============================================================
   HERO + NAV MOBIEL — finale afwerking (na het tokenblok, zodat
   deze regels winnen). Alles binnen max-width:781px; desktop ongemoeid.
   ============================================================ */
@media (max-width: 781px) {
	/* Logo staat nu in de navbar; de gecentreerde hero-logo vervalt. */
	.dsc-hero__logo {
		display: none;
	}

	/* Eyebrow: alle 3 delen op één regel; ls verlaagd (0.06 → 0.03) om op 360px te passen. */
	.dsc-hero__eyebrow {
		font-size: 9px;
		letter-spacing: 0.03em;
		white-space: nowrap;
		margin-bottom: var(--m-space-tight);
	}

	/* H1: eerste regel "Jouw WBSO-aanvraag" op één regel via de nobreak-span. */
	.dsc-hero__title {
		font-size: clamp(30px, 8.7vw, 72px);
		line-height: 1.05;
		font-weight: 600; /* dikgedrukt (zwaarste geladen weight) */
	}

	/* Subtekst kleiner; regel 1 loopt even breed als de onderstreping mee (~0.465× H1). */
	.dsc-hero__sub {
		font-size: clamp(14px, 4.05vw, 33px);
		margin-top: 48px; /* afstand onderstreping → subtekst ×1,5 (32 → 48) */
	}

	/* Reviewregel: 13px, blijft op één regel; bepaalt de actie-breedte (= knopbreedte). */
	.dsc-hero__proof {
		font-size: 12px;
		white-space: nowrap;
	}
	.dsc-hero__proof-mob {
		white-space: nowrap;
	}
	/* Sterren in Ink, zoals op desktop en in de case. */
	.dsc-hero__stars {
		color: var(--wp--preset--color--ink);
	}

	/* Knop: breedte volgt de tekst, links uitgelijnd. */
	.dsc-hero__actions {
		align-items: stretch;
		width: fit-content; /* krimpt tot de breedste regel: de review (1 regel) */
		margin-inline: auto;
	}
	.dsc-hero__cta-wrap {
		align-items: center;
		width: auto;
	}
	.dsc-hero__cta {
		width: 100%; /* vult de actie-breedte = reviewbreedte */
		min-height: 48px;
		padding: 14px 24px;
		white-space: nowrap;
		/* Diepte: oranje getinte lift + zachte grondschaduw. */
		box-shadow: 0 10px 24px -8px rgba(233, 79, 42, 0.55), 0 2px 6px rgba(33, 27, 21, 0.12);
		transition: background .2s, box-shadow .2s, transform .1s;
	}
	/* Indrukken: knop zakt licht in, schaduw kleiner → tastbaar. */
	.dsc-hero__cta:active {
		transform: translateY(1px);
		box-shadow: 0 5px 14px -8px rgba(233, 79, 42, 0.5), 0 1px 3px rgba(33, 27, 21, 0.12);
	}

	/* (Korrel staat nu in de basis-CSS; geldt op alle viewports.) */
	.dsc-hero__cta-alt {
		display: none; /* kwartiertje-link weg uit de hero op mobiel */
	}
	.dsc-hero__photo {
		margin-top: 80px; /* ruimte microcopy → foto verdubbeld (40 → 80) */
	}

	/* (Onderstreping staat nu in de basis-CSS; geldt op alle viewports.) */

	/* Sectie "Van gesprek tot beschikking": staptekst iets kleiner (titels ongemoeid). */
	.dsc-hoe__step-text {
		font-size: 14px;
		line-height: 1.55;
	}
	.dsc-hoe__annotation {
		font-size: 11px; /* "98% toegekend" schaalt mee */
	}
	.dsc-hoe__link {
		font-size: 14px; /* "Zo houd je je uren bij" schaalt mee */
		align-items: flex-start; /* tekst bovenin het 44px-tikvlak → zelfde afstand als de 98%-regel */
	}
	/* "Je beschikking is binnen." op eigen regel (mobiel); "Wij blijven." eronder. */
	.dsc-hoe__title-a {
		display: block;
	}
	/* Rekenaar-kaart dezelfde randafstand als het prijskader (8px zijmarge).
	   !important omdat WP's constrained-layout 'margin: auto !important' op de
	   directe main-kinderen zet, wat anders onze marge overschrijft (kaart tegen de rand). */
	.dsc-rekenaar {
		margin-inline: 8px !important;
	}
}

/* ============================================================
   TABLET (3 oktober 2026)
   Mobiel (< 600px) en desktop (>= 1280px) blijven ongewijzigd.
   Laag 1: >= 782px  vloeiende zijmarge voor alle secties (fluid, geen knip).
   Laag 2: 600–781px tablet staand: mobiele opbouw, tabletmaten, vaste kolom.
   Laag 3: 782–1023px hero gestapeld + footer-oproep gestapeld.
   Laag 4: >= 1024px hero-foto past altijd naast de kop.
   Laag 5: touch (pointer: coarse) >= 782px: tikdoelen >= 44px.
   ============================================================ */

/* --- Laag 1: zijmarge op desktop/tablet. Op 1280+ niet bindend. --- */
@media (min-width: 782px) {
	:root {
		--dsc-gutter-d: clamp(32px, 6vw, 64px);
	}
	/* Kaderloze secties: één kolom van max 880px, nooit tegen de rand. */
	.dsc-home-main > .dsc-hoe {
		max-width: min(880px, calc(100% - 2 * var(--dsc-gutter-d)));
	}
	.dsc-tst__inner,
	.dsc-team__inner,
	.dsc-faq__inner {
		max-width: min(880px, calc(100% - 2 * var(--dsc-gutter-d)));
	}
	/* Kadersecties: kader max 1000px inhoud + 48px padding; kaderrand op de gutter. */
	.dsc-home-main > .dsc-rekenaar,
	.dsc-prijs__kader {
		max-width: min(1000px, calc(100% - 2 * var(--dsc-gutter-d) - 96px));
	}
	/* Footer: inhoud niet meer tegen de kaderrand. */
	.dsc-footer__inner {
		max-width: min(1000px, calc(100% - 2 * var(--dsc-gutter-d)));
	}
}

/* --- Laag 2: tablet staand (600–781px) --- */
@media (min-width: 600px) and (max-width: 781px) {
	:root {
		--dsc-col: min(640px, calc(100% - 80px)); /* één leeskolom, gecentreerd */
		--dsc-fs-body: 16px;
		--m-h2: 36px;
		--m-h3: 22px;
		--m-lead: 20px;
		--m-body: 16px;
		--m-meta: 15px;
		--m-number: 48px;
	}

	/* Hero: mobiele compositie op tabletmaat (plafonds i.p.v. meegroeien). */
	.dsc-hero__eyebrow {
		font-size: 12px;
		letter-spacing: 0.04em;
	}
	.dsc-hero__title {
		/* Krimpt onder ~622px zodat "Jouw WBSO-aanvraag" op 600px minstens 16px
		   van de rand blijft; vanaf ~622px weer 56px (768 en hoger onveranderd). */
		font-size: clamp(52px, 9vw, 56px);
	}
	.dsc-hero__sub {
		font-size: 20px;
	}
	.dsc-hero__proof {
		font-size: 15px;
	}
	.dsc-hero__photo img {
		max-height: 420px;
	}

	/* Kaderloze secties: zelfde kolom. */
	.dsc-hoe,
	.dsc-tst,
	.dsc-team {
		padding-inline: 0;
	}
	.dsc-home-main > .dsc-hoe {
		max-width: var(--dsc-col);
	}
	.dsc-tst__inner,
	.dsc-team__inner,
	.dsc-faq__inner {
		max-width: var(--dsc-col);
		margin-inline: auto;
		padding-inline: 0;
	}
	/* Kadersecties: kaderrand op dezelfde lijn als de tekst van kaderloze secties. */
	.dsc-home-main > .dsc-rekenaar {
		box-sizing: border-box;
		width: 100%;
		max-width: var(--dsc-col);
		margin-inline: auto !important; /* wint van de mobiele 8px !important */
		padding: 48px 40px;
	}
	.dsc-prijs__kader {
		box-sizing: border-box;
		max-width: var(--dsc-col);
		margin-inline: auto;
		padding: 48px 40px;
	}

	/* Vaste mobiele px-maten meeschalen met de tablet-tokens. */
	.dsc-hoe__step-text,
	.dsc-hoe__link {
		font-size: var(--m-body);
	}
	.dsc-hoe__annotation {
		font-size: 12px;
	}
	.dsc-rekenaar__disclaimer {
		font-size: 13px;
	}

	/* Staptitel 3 op één regel; er is ruimte genoeg. */
	.dsc-hoe__title-a {
		display: inline;
	}

	/* Team: naam weer op één regel; er is ruimte genoeg. */
	.team-voornaam,
	.team-achternaam {
		display: inline;
	}
	.dsc-team__label {
		min-height: 0;
	}

	/* Footer: zelfde binnenruimte als de kaarten. */
	.dsc-footer {
		padding: 48px 40px;
	}

	/* Menu: niet over de volle tabletbreedte uitrekken. */
	.dsc-menu__body {
		width: 100%;
		max-width: var(--dsc-col);
		margin-inline: auto;
	}
}

/* --- Laag 3: tablet staand met desktopnavigatie (782–1023px) --- */
@media (min-width: 782px) and (max-width: 1023px) {
	/* Hero gestapeld: tekst gecentreerd, foto eronder (zoals mobiel, op desktopmaat). */
	.dsc-hero {
		min-height: 0;
	}
	.dsc-hero__inner {
		grid-template-columns: 1fr;
	}
	.dsc-hero__text {
		padding: 48px var(--dsc-gutter-d) 0;
		text-align: center;
	}
	.dsc-hero__sub {
		margin: 32px auto 0; /* ruimte onder de onderstreping, zoals mobiel */
	}
	.dsc-hero__actions {
		align-items: center;
	}
	.dsc-hero__buttons {
		justify-content: center;
	}
	.dsc-hero__media {
		justify-self: center;
		padding-right: 0;
		margin-top: 56px;
	}
	.dsc-hero__photo img {
		height: min(440px, 50vw);
	}

}

/* Footer tot 1100px: agenda onder de oproep (te smal ernaast),
   merk als eigen rij boven drie linkkolommen. */
@media (min-width: 782px) and (max-width: 1099px) {
	.dsc-footer__oproep {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.dsc-footer__oproep-rechts {
		align-items: stretch;
	}
	.dsc-footer__links {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 32px;
	}
	.dsc-footer__kolom--merk {
		grid-column: 1 / -1;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.dsc-footer__logo,
	.dsc-footer__mail {
		margin-top: 0;
	}
}

/* --- Laag 4: hero-foto past altijd naast de kop (>= 1024px) ---
   Tekstkolom heeft ca. 710px nodig (kop 56px op één regel + padding);
   de foto krijgt de rest. Op 1280+ niet bindend. */
@media (min-width: 1024px) {
	.dsc-hero__photo img {
		height: min(clamp(360px, 53vh, 610px), calc(119vw - 860px));
	}
}

/* --- Laag 5: tikdoelen op touch-tablets (>= 782px) --- */
@media (min-width: 782px) and (pointer: coarse) {
	.dsc-navlink,
	.dsc-hero__cta-alt,
	.dsc-hoe__link,
	.dsc-tst__caselink,
	.dsc-faq__antwoord .dsc-faq__link,
	.dsc-footer__mail,
	.dsc-footer__kolom-lijst a,
	.dsc-footer__balk-rechts a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.dsc-footer__kolom-lijst {
		gap: 0;
	}
	.dsc-footer__linkedin {
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
	}
}

/* ============================================================
   FOOTER MOBIEL (<600px) — eigen opbouw (B2).
   Rij 1: logo links, mailadres rechts. Rij 2: telefoon links,
   Privacy + LinkedIn rechts. Daarna drie linkrijen (label met de
   links ernaast, mogen afbreken). Onderaan de onderbalk (© · KvK,
   en Algemene voorwaarden zolang die pagina bestaat).
   Vanaf 600px blijft de footer precies zoals hij was.
   Als laatste blok in het bestand, zodat deze regels winnen.
   ============================================================ */
@media (max-width: 599px) {
	/* A5: de vier vakken 2×2 — twee naast elkaar. Vak 1 het logo met contact (mail),
	   vak 2 t/m 4 de drie linkkolommen. De contactrij (telefoon · Privacy · LinkedIn)
	   staat als volle rij onder het raster. */
	.dsc-footer__links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
		row-gap: 30px;
	}

	/* Vak 1: logo met daaronder het mailadres (contact), links uitgelijnd. Eén cel (niet
	   volle breedte): de grid-column: 1/-1 uit de <782-regels wordt hier teruggezet. */
	.dsc-footer__kolom--merk {
		grid-column: auto;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 12px;
	}
	.dsc-footer__logo,
	.dsc-footer__mail {
		margin-top: 0;
	}
	.dsc-footer__logo img {
		height: 44px;
	}

	/* Vak 2 t/m 4: label boven, links eronder (gewone kolom). */
	.dsc-footer__kolom:not(.dsc-footer__kolom--merk) .dsc-footer__label {
		margin: 0 0 10px;
	}
	.dsc-footer__kolom-lijst {
		flex-direction: column;
	}

	/* Contactrij (telefoon · Privacy · LinkedIn) als volle rij onder het 2×2-raster. */
	.dsc-footer__mobielrij {
		order: 1;
		grid-column: 1 / -1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		padding-top: 20px;
		border-top: 1px solid rgba(252, 250, 241, 0.12);
	}
	.dsc-footer__mobielrij-acties {
		display: flex;
		align-items: center;
		gap: 20px;
	}
	.dsc-footer__tel,
	.dsc-footer__mobielrij-acties a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-size: var(--dsc-fs-body);
		color: var(--wp--preset--color--paper);
		text-decoration: none;
	}
	.dsc-footer__mobielrij-acties .dsc-footer__linkedin {
		min-width: 44px;
		justify-content: center;
		color: #a89f90;
	}

	/* Onderbalk: Privacy en LinkedIn staan nu in rij 2; hier blijven alleen © · KvK en
	   (zolang die pagina bestaat) Algemene voorwaarden. */
	.dsc-footer__balk .dsc-footer__legal-link--privacy,
	.dsc-footer__balk .dsc-footer__linkedin {
		display: none;
	}
}

/* ============================================================
   A2 (doorloop deel 2): logovak van de footer op mobiel.
   Tot 781 px vervalt het e-mailadres in het logovak; op de
   goedgekeurde mobiele breedtes (2×2, < 600) vult het logo het
   vak, met de gewone binnenruimte. Desktop (>= 782) blijft.
   Als laatste in het bestand zodat deze regels winnen van de
   logohoogte in het < 600-blok hierboven.
   ============================================================ */
@media (max-width: 781px) {
	.dsc-footer__kolom--merk .dsc-footer__mail {
		display: none;
	}
}
@media (max-width: 599px) {
	.dsc-footer__kolom--merk .dsc-footer__logo {
		width: 100%;
	}
	.dsc-footer__kolom--merk .dsc-footer__logo img {
		width: 100%;
		height: auto;
	}
}