/* ─────────────────────────────────────────────────────────────
   SignToday — themastijlen.

   Huisstijlwaarden (kleuren, typografie, spacing) komen uit theme.json en
   zijn hier beschikbaar als --wp--preset--*-variabelen. Hieronder staat
   alleen wat theme.json niet kan uitdrukken: de nav, de footer, de kaart-
   en formulierchrome en de drie eigen blokken.

   Volgorde: tokens → basis → nav → paginakop → blokstijlen → kaarten →
   eigen blokken → footer.

   Uit de handoff: er is precies één schaduw in het hele ontwerp (de
   slider-handle). Alles anders werkt met randen. Voeg geen schaduwen toe.
   ───────────────────────────────────────────────────────────── */

:root {
	--st-navy: var(--wp--preset--color--navy);
	--st-navy-card: var(--wp--preset--color--navy-card);
	--st-orange: var(--wp--preset--color--orange);
	--st-orange-hover: var(--wp--preset--color--orange-hover);
	--st-green: var(--wp--preset--color--green);
	--st-green-deep: var(--wp--preset--color--green-deep);
	--st-page: var(--wp--preset--color--page);
	--st-surface: var(--wp--preset--color--surface);
	--st-border: var(--wp--preset--color--border);
	--st-border-input: var(--wp--preset--color--border-input);
	--st-border-outline: var(--wp--preset--color--border-outline);
	--st-ink: var(--wp--preset--color--ink);
	--st-ink-muted: var(--wp--preset--color--ink-muted);
	--st-ink-subtle: var(--wp--preset--color--ink-subtle);
	--st-placeholder: var(--wp--preset--color--placeholder);

	--st-mono: var(--wp--preset--font-family--mono);
	--st-stripe: var(--wp--preset--gradient--stripe);
	--st-stripe-navy: var(--wp--preset--gradient--stripe-navy);
	--st-texture: var(--wp--preset--gradient--navy-texture);

	/* Maten die de hoogte van de navigatiebalk bepalen. De mobiele
	   paneelhoogte rekent hiermee, zodat die niet losloopt als een van deze
	   waarden verandert. Onder 880px is de hamburger (46px) het hoogste
	   element in de rij, niet het logo — houd het logo dus ≤ 46px. */
	--st-nav-pad-y: 14px;
	--st-nav-burger: 46px;
	--st-nav-row: calc(var(--st-nav-pad-y) * 2 + var(--st-nav-burger) + 1px);

	--st-radius-sm: 8px;
	--st-radius: 12px;
	--st-radius-lg: 14px;
	--st-pill: 999px;
}

/* ── Basis ───────────────────────────────────────────────── */

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* De handoff leunt op `text-wrap: pretty` en een measure in ch; dat is wat de
   copy leesbaar maakt. */
h1, h2, h3, h4, p {
	text-wrap: pretty;
}

/* Kleurtransities zijn de enige beweging in het ontwerp. */
a,
button,
.wp-block-button__link,
.wp-block-post,
.is-style-card,
.st-filter__pill,
.st-form__pill,
.wp-social-link {
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* ── Navigatie ───────────────────────────────────────────── */

/* Eén markup, twee toestanden. Alles boven 880px is de desktoprij, alles
   eronder de hamburger met paneel; de media query hieronder zet ze elkaar
   uitsluitend. JS raakt de layout niet aan — die zet alleen `hidden` en
   `aria-expanded`, waar de caret- en hamburgeranimatie in CSS aan hangen. */

.st-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(11, 28, 61, 0.97);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: saturate(140%) blur(6px);
}

.st-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1160px;
	margin: 0 auto;
	padding: var(--st-nav-pad-y) 24px;
	gap: 24px;
}

/* In de balk staat het merklogo; de footer gebruikt nog het getypte
   logotype (.st-logo__name / .st-logo__sub) hieronder. */
.st-logo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
}

/* Hoogte stuurt, breedte volgt — het logo is bijna 3,5× zo breed als hoog.
   `min-width: 0` houdt hem in een flexrij bij smalle schermen meekrimpen in
   plaats van de hamburger weg te duwen. */
.st-logo__img {
	display: block;
	height: 40px;
	width: auto;
	min-width: 0;
	max-width: 100%;
}

.st-logo__name,
.st-logo__name a {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 800;
	font-size: 19px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.st-logo__sub {
	margin: 0;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1.2;
}

/* ── Desktoprij ──────────────────────────────────────────── */

.st-nav__desktop {
	display: flex;
	align-items: center;
	gap: 4px;
}

.st-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px 11px;
	border-radius: var(--st-radius-sm);
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.st-nav__link:hover,
.st-nav__link:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

/* Actieve pagina: wit + 2px groene onderstreping, 14px ingesprongen. */
.st-nav__link.is-current {
	color: #fff;
}

.st-nav__link.is-current::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--st-green);
}

/* ── Caret (desktop en mobiel dezelfde driehoek) ─────────── */

.st-nav__caret {
	display: block;
	width: 0;
	height: 0;
	border-left: 4.5px solid transparent;
	border-right: 4.5px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 160ms ease;
}

.st-nav [aria-expanded="true"] .st-nav__caret {
	transform: rotate(180deg);
}

/* ── Uitklapmenu Diensten (desktop) ──────────────────────── */

.st-nav__ddwrap {
	position: relative;
	display: flex;
	align-items: center;
}

.st-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	gap: 2px;
	min-width: 262px;
	padding: 8px;
	background: var(--st-navy);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--st-radius);
}

/* Geen `display` in de basisregel: zo blijft het `hidden`-attribuut leidend
   en hoeft er nergens !important aan te pas te komen. */
.st-nav__dropdown:not([hidden]) {
	display: flex;
}

.st-nav__dropdown-item {
	padding: 10px 12px;
	border-radius: var(--st-radius-sm);
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	text-decoration: none;
}

.st-nav__dropdown-item:hover,
.st-nav__dropdown-item:focus-visible {
	color: #fff;
	background: rgba(92, 184, 148, 0.16);
}

.st-nav__dropdown-all {
	margin-top: 4px;
	padding: 10px 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--st-green);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.st-nav__dropdown-all:hover,
.st-nav__dropdown-all:focus-visible {
	color: #fff;
}

/* ── Offerte-knop ────────────────────────────────────────── */

.st-nav__cta {
	margin-left: 10px;
	padding: 10px 18px;
	border-radius: var(--st-pill);
	background: var(--st-orange);
	color: var(--st-navy);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.st-nav__cta:hover,
.st-nav__cta:focus-visible {
	background: var(--st-orange-hover);
	color: var(--st-navy);
}

/* ── Hamburger ───────────────────────────────────────────── */

.st-nav__burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: var(--st-nav-burger);
	height: var(--st-nav-burger);
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 10px;
	cursor: pointer;
}

.st-nav__bar {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: transform 180ms ease, opacity 140ms ease;
}

.st-nav__burger[aria-expanded="true"] .st-nav__bar--1 {
	transform: translateY(7px) rotate(45deg);
}

.st-nav__burger[aria-expanded="true"] .st-nav__bar--2 {
	opacity: 0;
}

.st-nav__burger[aria-expanded="true"] .st-nav__bar--3 {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobiel paneel ───────────────────────────────────────── */

.st-nav__mobile {
	display: none;
	background: var(--st-navy);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	/* Wat er onder de balk overblijft. `dvh` houdt rekening met de
	   in- en uitschuivende browserbalk op telefoons; vh is de terugval. */
	max-height: calc(100vh - var(--st-nav-row));
	max-height: calc(100dvh - var(--st-nav-row));
	overflow-y: auto;
}

.st-nav__mobile-inner {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 20px 22px;
}

.st-nav__mlink {
	padding: 14px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.86);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.st-nav__mlink:hover,
.st-nav__mlink:focus-visible,
.st-nav__mlink.is-current {
	color: var(--st-green);
}

/* De rand zit op de groep, niet op de link: anders loopt hij door het
   uitgeklapte submenu heen. */
.st-nav__mgroup {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.st-nav__mrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.st-nav__mlink--flush {
	flex: 1;
	border-bottom: 0;
}

/* Op het label navigeer je, op de caret klap je uit — daarom een eigen
   knop van 44px, de ondergrens voor een tikdoel. */
.st-nav__mcaret {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--st-green);
	cursor: pointer;
}

.st-nav__mcaret .st-nav__caret {
	border-left-width: 5.5px;
	border-right-width: 5.5px;
	border-top-width: 6px;
}

.st-nav__msub {
	flex-direction: column;
	gap: 2px;
	padding: 2px 0 14px 14px;
	border-left: 2px solid rgba(92, 184, 148, 0.4);
}

.st-nav__msub:not([hidden]) {
	display: flex;
}

.st-nav__msublink {
	padding: 11px 12px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	text-decoration: none;
}

.st-nav__msublink:hover,
.st-nav__msublink:focus-visible {
	color: var(--st-green);
}

.st-nav__mcta {
	margin-top: 16px;
	padding: 16px 26px;
	border-radius: var(--st-pill);
	background: var(--st-orange);
	color: var(--st-navy);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.st-nav__mcta:hover,
.st-nav__mcta:focus-visible {
	background: var(--st-orange-hover);
	color: var(--st-navy);
}

/* De pagina achter het open paneel staat stil; het paneel scrollt zelf. */
body.st-nav-is-open {
	overflow: hidden;
}

/* ── De omslag op 880px ──────────────────────────────────── */

@media (max-width: 880px) {
	.st-nav__desktop {
		display: none;
	}

	.st-nav__burger {
		display: flex;
	}

	.st-nav__mobile:not([hidden]) {
		display: block;
	}
}

/* ── Stille weergave in de editor ────────────────────────── */

.st-nav--editor .st-nav__link,
.st-nav--editor .st-nav__cta {
	pointer-events: none;
}

.st-nav__editor-note {
	margin: 0;
	padding: 8px 24px 12px;
	color: rgba(255, 255, 255, 0.45);
	font-size: 12px;
}


/* ── Paginakop (navy band met kruimelpad + H1 + lead) ────── */

.st-pagehead {
	position: relative;
	overflow: hidden;
}

.st-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--st-texture);
	opacity: 0.7;
	pointer-events: none;
}

.st-pagehead > * {
	position: relative;
	z-index: 1;
}

/* theme.json zet koppen standaard navy; in de navy band moeten ze wit zijn. */
.st-pagehead :where(h1, h2, h3, h4) {
	color: #fff;
}

.st-pagehead a:not(.wp-block-button__link) {
	color: #fff;
}

.st-crumbs {
	margin: 0 0 22px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

.st-crumbs a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.st-crumbs a:hover {
	color: var(--st-green);
}

.st-crumbs [aria-current] {
	color: var(--st-green);
}

/* Navy secties krijgen dezelfde textuur. */
.is-style-navy {
	position: relative;
	overflow: hidden;
	background-color: var(--st-navy);
	color: #fff;
}

.is-style-navy::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--st-texture);
	pointer-events: none;
}

.is-style-navy > * {
	position: relative;
	z-index: 1;
}

.is-style-navy :where(h1, h2, h3, h4) {
	color: #fff;
}

.is-style-navy a:not(.wp-block-button__link) {
	color: #fff;
}

.is-style-navy a:not(.wp-block-button__link):hover {
	color: var(--st-green);
}

/* ── Tekst-blokstijlen ───────────────────────────────────── */

.is-style-eyebrow {
	font-family: var(--st-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--st-green);
	margin: 0 0 20px;
}

/* Groene pill met navy tekst — de contrastveilige combinatie. */
.is-style-eyebrow-pill {
	display: inline-block;
	background: var(--st-green);
	color: var(--st-navy);
	font-family: var(--st-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 4px;
	margin: 0 0 16px;
}

/* De measure in ch is wat de copy leesbaar houdt. Let op: een constrained
   layout centreert elk kind met een eigen max-width. Zet de lead daarom in een
   groep met flow-layout (zie het pattern page-header), dan lijnt hij links uit
   binnen de 1160px-kolom in plaats van in het midden te zweven. */
.is-style-lead {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	max-width: 52ch;
	margin: 0;
}

.is-style-navy .is-style-lead,
.st-pagehead .is-style-lead {
	color: rgba(255, 255, 255, 0.78);
}

.is-style-fineprint {
	font-size: 13px;
	color: var(--st-ink-subtle);
	margin: 0;
}

.is-style-category {
	font-family: var(--st-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-green-deep);
	margin: 0 0 8px;
}

.is-style-stat {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.1;
	color: var(--st-navy);
	margin: 0;
}

/* ── Sectiekop: kop links, knop rechts ──────────────────── */

.is-style-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: var(--wp--preset--spacing--70);
}

.is-style-section-head > * {
	min-width: 0;
}

.is-style-section-head .wp-block-buttons {
	flex-shrink: 0;
}

/* ── Knoppen ─────────────────────────────────────────────── */

.is-style-outline-navy > .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	font-weight: 500;
}

.is-style-outline-navy > .wp-block-button__link:hover,
.is-style-outline-navy > .wp-block-button__link:focus-visible {
	background: rgba(92, 184, 148, 0.12);
	border-color: var(--st-green);
	color: #fff;
}

.is-style-outline-light > .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--st-border-outline);
	color: var(--st-navy);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: normal;
	text-transform: none;
	padding: 13px 22px;
	white-space: nowrap;
}

.is-style-outline-light > .wp-block-button__link:hover,
.is-style-outline-light > .wp-block-button__link:focus-visible {
	background: transparent;
	border-color: var(--st-navy);
	color: var(--st-navy);
}

.is-style-nav-cta > .wp-block-button__link {
	padding: 10px 18px;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* ── Kaarten ─────────────────────────────────────────────── */

.is-style-card,
.is-style-card-rule,
.is-style-card-muted {
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-lg);
	background: var(--st-surface);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.is-style-card-muted {
	background: var(--st-page);
	border-radius: var(--st-radius);
}

/* De stat- en waardekaarten hebben een 3px groene bovenrand. */
.is-style-card-rule {
	background: var(--st-page);
	border-radius: 10px;
	border-top: 3px solid var(--st-green);
	padding: 14px 16px;
}

.is-style-navy-card {
	background: var(--st-navy-card);
	border-radius: var(--st-radius-lg);
	color: #fff;
}

/* Beeldplaceholder: de streepgradient met een monospace label. */
.is-style-slot {
	background: var(--st-stripe);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-lg);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow: hidden;
}

.is-style-slot p {
	margin: 0;
	font-family: var(--st-mono);
	font-size: 11px;
	line-height: 1.7;
	color: var(--st-placeholder);
	text-align: center;
}

.is-style-navy .is-style-slot,
.st-pagehead .is-style-slot {
	background: var(--st-stripe-navy);
	border-color: rgba(255, 255, 255, 0.14);
}

.is-style-navy .is-style-slot p,
.st-pagehead .is-style-slot p {
	color: rgba(255, 255, 255, 0.55);
}

/* ── Kaartgrids op de Query Loop ─────────────────────────── */

/* De grid zelf komt uit de core grid-layout (minimumColumnWidth per pattern);
   hier alleen de chrome van elk item. */
.wp-block-post-template.is-layout-grid {
	gap: 20px;
}

:where(.st-cardgrid) .wp-block-post {
	background: var(--st-surface);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

:where(.st-cardgrid) .wp-block-post:hover {
	border-color: var(--st-green);
}

:where(.st-cardgrid) .wp-block-post > figure,
:where(.st-cardgrid) .wp-block-post .wp-block-post-featured-image {
	margin: 0;
	border-radius: 0;
}

:where(.st-cardgrid) .wp-block-post .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Body van een kaart: padding en een link die onderaan uitlijnt. */
.st-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.st-card__body > * {
	margin: 0;
}

.st-card__body > * + * {
	margin-top: 6px;
}

.st-card__title {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	color: var(--st-navy);
	line-height: 1.25;
}

.st-card__text {
	font-size: 14px;
	line-height: 1.7;
	color: var(--st-ink-muted);
}

/* "Offerte aanvragen →" onderaan de dienstkaart; margin-top:auto lijnt de
   links van kaarten in dezelfde rij met elkaar uit. */
.st-card__cta {
	margin-top: auto !important;
	padding-top: 14px;
	font-size: 14px;
	font-weight: 500;
}

.st-card__cta a {
	color: var(--st-navy);
	text-decoration: none;
}

.st-card__cta a:hover {
	color: var(--st-orange);
}

.st-card__cta a::after {
	content: " →";
	color: var(--st-orange);
}

/* Compacte teaserkaart (home): titel + oranje pijl op één regel. */
.st-cardgrid--teasers .st-card__body {
	padding: 16px 18px 18px;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.st-cardgrid--teasers .st-card__body > * + * {
	margin-top: 0;
}

.st-cardgrid--teasers .st-card__title {
	font-size: 16px;
}

.st-cardgrid--teasers .st-card__arrow {
	color: var(--st-orange);
	font-size: 15px;
	font-weight: 600;
}

/* Teamkaart: vierkant portret. */
.st-cardgrid--team .wp-block-post-featured-image img {
	aspect-ratio: 1 / 1;
}

.st-cardgrid--team .st-card__role {
	font-family: var(--st-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-green-deep);
}

/* Een kaart zonder afbeelding valt terug op de streepplaceholder, zodat het
   raster niet inzakt zolang de klant nog geen beeld heeft aangeleverd. */
:where(.st-cardgrid) .wp-block-post .wp-block-post-featured-image:empty {
	display: block;
	background: var(--st-stripe);
	aspect-ratio: 3 / 2;
}

.st-cardgrid--team .wp-block-post .wp-block-post-featured-image:empty {
	aspect-ratio: 1 / 1;
}

/* ── Genummerde stappen ─────────────────────────────────── */

.st-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--st-pill);
	background: var(--st-green);
	color: var(--st-navy);
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 800;
	font-size: 15px;
	margin: 0 0 14px;
}

/* ── Logostrip ───────────────────────────────────────────── */

.st-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 4vw, 40px);
}

.st-logos__label {
	font-family: var(--st-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-ink-subtle);
	white-space: nowrap;
	margin: 0;
}

/* Namen moeten binnen de cel kunnen afbreken — geen nowrap. */
.st-logos__grid {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	align-items: center;
	gap: clamp(12px, 2.5vw, 28px);
}

.st-logos__item {
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 12px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-sm);
	background: var(--st-surface);
	font-size: 13px;
	line-height: 1.35;
	color: var(--st-ink-muted);
	text-align: center;
	margin: 0;
}

/* ── Voor/na-slider ─────────────────────────────────────── */

.st-ba__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--st-radius-lg);
	border: 1px solid var(--st-border);
	overflow: hidden;
	background: var(--st-stripe);
	touch-action: pan-y;
	/* De "voor"-laag wordt versmald; zijn beeld moet op framebreedte blijven
	   staan in plaats van mee te krimpen — vandaar cqw hieronder. */
	container-type: inline-size;
}

.st-ba__layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

/* De "voor"-laag wordt door width geclipt; geen transition, zodat hij 1:1
   met de sleep meeloopt. Hij clipt ook zijn eigen caption. */
.st-ba__layer--before {
	right: auto;
	width: var(--st-ba-split, 52%);
	border-right: 0;
	background: var(--st-stripe);
	z-index: 1;
}

/* Vaste breedte t.o.v. het frame, niet t.o.v. de geclipte laag. */
.st-ba__layer--before img {
	width: 100cqw;
	max-width: none;
}

.st-ba__slot {
	font-family: var(--st-mono);
	font-size: 11px;
	line-height: 1.7;
	color: var(--st-placeholder);
	text-align: center;
	padding: 20px;
}

.st-ba__caption {
	position: absolute;
	bottom: 14px;
	font-family: var(--st-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--st-navy);
	background: rgba(250, 249, 249, 0.85);
	padding: 6px 10px;
	border-radius: 4px;
	white-space: nowrap;
}

.st-ba__caption--before {
	left: 14px;
}

/* Ná de geclipte laag in de DOM en met z-index 2, anders verdwijnt hij
   onder de overlay. */
.st-ba__caption--after {
	right: 14px;
	max-width: 55%;
	z-index: 2;
	white-space: normal;
}

.st-ba__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--st-ba-split, 52%);
	width: 2px;
	background: var(--st-green);
	z-index: 3;
	pointer-events: none;
}

.st-ba__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: var(--st-pill);
	background: #fff;
	color: var(--st-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	/* De enige schaduw in het ontwerp. */
	box-shadow: 0 4px 14px rgba(11, 28, 61, 0.22);
}

/* Onzichtbare range over het hele frame: houdt toetsenbord en touch werkend. */
.st-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 4;
	appearance: none;
	background: transparent;
}

.st-ba__frame:focus-within .st-ba__handle {
	outline: 2px solid var(--st-green);
	outline-offset: 3px;
}

/* ── Projectfilter ───────────────────────────────────────── */

.st-filter__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--wp--preset--spacing--70);
}

.st-filter__pill {
	border: 1px solid var(--st-border-outline);
	background: transparent;
	border-radius: var(--st-pill);
	padding: 9px 16px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--st-navy);
	cursor: pointer;
}

.st-filter__pill:hover,
.st-filter__pill:focus-visible {
	border-color: var(--st-green);
}

.st-filter__pill.is-active {
	background: var(--st-navy);
	border-color: var(--st-navy);
	color: #fff;
}

.st-filter__empty {
	margin: var(--wp--preset--spacing--60) 0 0;
	color: var(--st-ink-muted);
}

/* Pills naast de sectiekop (Inspiratie). */
.st-filter--inline .st-filter__pills {
	justify-content: flex-end;
}

/* ── Contactformulier ───────────────────────────────────── */

.st-form__form {
	background: var(--st-surface);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-lg);
	padding: clamp(22px, 3vw, 34px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.st-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px;
}

.st-form__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.st-form__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--st-navy);
	padding: 0;
}

.st-form__required {
	color: var(--st-orange);
}

.st-form__input,
.st-form__textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--st-border-input);
	border-radius: var(--st-radius-sm);
	background: var(--st-page);
	font-family: inherit;
	font-size: 14px;
	color: var(--st-ink);
}

.st-form__input:focus,
.st-form__textarea:focus {
	outline: 2px solid var(--st-green);
	outline-offset: 1px;
	border-color: var(--st-green);
}

.st-form__textarea {
	resize: vertical;
	line-height: 1.6;
}

.st-form__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Onderwerpen: echte checkboxes, gestyled als pills. */
.st-form__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.st-form__pill-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.st-form__pill {
	display: inline-block;
	border: 1px solid var(--st-border-outline);
	border-radius: var(--st-pill);
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--st-navy);
	cursor: pointer;
}

.st-form__pill:hover {
	border-color: var(--st-green);
}

.st-form__pill-input:checked + .st-form__pill {
	border-color: var(--st-green);
	background: rgba(92, 184, 148, 0.12);
}

.st-form__pill-input:focus-visible + .st-form__pill {
	outline: 2px solid var(--st-green);
	outline-offset: 2px;
}

.st-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: start;
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--st-ink-muted);
}

.st-form__consent .st-form__error {
	grid-column: 1 / -1;
}

.st-form__consent input {
	margin-top: 3px;
	accent-color: var(--st-green);
}

/* Rood dat leesbaar is op #faf9f9. */
.st-form__error {
	margin: 0;
	font-size: 13px;
	color: #b3261e;
}

.st-form__error--top {
	padding: 12px 14px;
	border: 1px solid #b3261e;
	border-radius: var(--st-radius-sm);
	background: #fdf3f2;
}

.st-form__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.st-form__submit {
	border: 0;
	border-radius: var(--st-pill);
	background: var(--st-orange);
	color: var(--st-navy);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 16px 28px;
	cursor: pointer;
}

.st-form__submit:hover,
.st-form__submit:focus-visible {
	background: var(--st-orange-hover);
}

.st-form__fineprint {
	margin: 0;
	font-size: 13px;
	color: var(--st-ink-subtle);
	max-width: 46ch;
}

/* Honeypot: uit het zicht, maar niet display:none — bots slaan dat over. */
.st-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.st-form__success {
	background: var(--st-surface);
	border: 1px solid var(--st-green);
	border-radius: var(--st-radius-lg);
	padding: clamp(26px, 3.5vw, 40px);
}

.st-form__success-eyebrow {
	font-family: var(--st-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-green-deep);
	margin: 0 0 12px;
}

.st-form__success-title {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 28px);
	color: var(--st-navy);
	margin: 0 0 12px;
}

.st-form__success-body {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--st-ink-muted);
	max-width: 48ch;
	margin-right: auto;
}

/* Navy "Direct contact"-kaart naast het formulier. */
.st-contactcard {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(22px, 3vw, 30px);
}

.st-contactcard__label {
	font-family: var(--st-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-green);
	margin: 0 0 4px;
}

.st-contactcard__value {
	margin: 0;
	font-size: 15px;
	color: #fff;
}

.st-contactcard__value a {
	color: #fff;
	text-decoration: none;
}

.st-contactcard__value a:hover {
	color: var(--st-green);
}

/* ── FAQ ─────────────────────────────────────────────────── */

.st-faq__q {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	font-size: 16px;
	color: var(--st-navy);
	margin: 0 0 10px;
	line-height: 1.35;
}

.st-faq__a {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--st-ink-muted);
}

/* ── Footer ──────────────────────────────────────────────── */

.st-footer {
	position: relative;
	overflow: hidden;
}

/* Groene haarlijn die naar de randen uitdooft. */
.st-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(92, 184, 148, 0.55), transparent);
}

.st-footer__cols {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

.st-logo--footer .st-logo__name,
.st-logo--footer .st-logo__name a {
	font-size: 24px;
	letter-spacing: 0.01em;
}

/* De groene punt achter het logotype is decoratie, geen tekst. */
.st-logo--footer .st-logo__name::after {
	content: ".";
	color: var(--st-green);
}

.st-footer__blurb {
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.7;
}

.st-footer__head {
	margin: 0 0 26px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.is-style-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.is-style-footer-links a {
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

.is-style-footer-links a:hover {
	color: var(--st-green);
}

.st-footer__contact > p {
	margin: 0 0 6px;
}

.st-footer__contact a {
	color: #fff;
	text-decoration: none;
}

.st-footer__contact a:hover {
	color: var(--st-green);
}

.st-footer__placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
}

.is-style-navy-circles .wp-social-link {
	background: var(--st-navy-card);
	width: 40px;
	height: 40px;
	border-radius: var(--st-pill);
}

.is-style-navy-circles .wp-social-link:hover {
	background: var(--st-green);
	color: var(--st-navy);
	transform: none;
}

.is-style-navy-circles .wp-social-link:hover svg {
	fill: var(--st-navy);
}

.st-footer__bar {
	max-width: 1160px;
	margin: clamp(36px, 5vw, 60px) auto 0;
	padding: clamp(24px, 3vw, 40px) 24px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	flex-wrap: wrap-reverse;
}

.st-footer__bar p {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
}

.st-footer__legal {
	gap: 26px;
}

.st-footer__legal a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
}

.st-footer__legal a:hover {
	color: #fff;
}

/* ── Editor-previews van de eigen blokken ───────────────── */

.st-ba-editor__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.st-ba-picker {
	border: 1px dashed var(--st-border-outline);
	border-radius: var(--st-radius);
	padding: 14px;
	text-align: center;
}

.st-ba-picker__label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--st-ink-subtle);
	margin-bottom: 10px;
}

.st-ba-picker img {
	max-width: 100%;
	border-radius: var(--st-radius-sm);
	cursor: pointer;
}

.st-ba-editor__hint,
.st-form-editor__note {
	font-size: 12px;
	color: var(--st-ink-subtle);
	margin: 12px 0 0;
}

.st-form-editor__preview {
	border: 1px dashed var(--st-border-outline);
	border-radius: var(--st-radius-lg);
	padding: 20px;
	background: var(--st-surface);
}

.st-form-editor__eyebrow {
	font-family: var(--st-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-green-deep);
	margin: 0 0 14px;
}

.st-form-editor__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}

.st-form-editor__field,
.st-form-editor__textarea {
	display: block;
	border: 1px solid var(--st-border-input);
	border-radius: var(--st-radius-sm);
	background: var(--st-page);
	padding: 10px 12px;
	font-size: 13px;
	color: var(--st-ink-subtle);
}

.st-form-editor__textarea {
	min-height: 70px;
	margin-bottom: 14px;
}

.st-form-editor__legend {
	font-size: 13px;
	font-weight: 500;
	color: var(--st-navy);
	margin: 0 0 8px;
}

.st-form-editor__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.st-form-editor__pill,
.st-filter__pills--editor .st-filter__pill {
	border: 1px solid var(--st-border-outline);
	border-radius: var(--st-pill);
	padding: 7px 14px;
	font-size: 12px;
	color: var(--st-navy);
}

.st-form-editor__submit {
	display: inline-block;
	border-radius: var(--st-pill);
	background: var(--st-orange);
	color: var(--st-navy);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 12px 22px;
}

.st-form-editor__subject {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.st-form-editor__subject .components-base-control {
	flex: 1;
	margin-bottom: 0;
}