/*
 * AIZ v8 — theme stylesheet
 *
 * Fixed order: tokens -> reset -> primitives -> header -> footer -> one module
 * per section -> utilities. Media queries live inside the module they belong
 * to, never in a global block at the end, so deleting a module takes its
 * breakpoints with it.
 *
 * Written to fit core block markup rather than the reverse. Where a rule
 * targets a `wp-block-*` class that is deliberate, not a workaround.
 */

/* ==========================================================================
   Tokens
   ==========================================================================
   Every colour comes from theme.json via --wp--preset--color--*. No hex value
   appears twice in the codebase; the annotations below are each value's only
   mention. Tokens are mapped by value, never by name — the two exports disagree
   about which colour "midnight" names, so the aliases here follow theme.json's
   slugs and each section module picks the alias whose value its export actually
   paints, never the one whose name matches.
   ========================================================================== */

:root {
	--aiz-navy:     var(--wp--preset--color--navy);      /* #121d30  page background */
	--aiz-charcoal: var(--wp--preset--color--charcoal);  /* #101820  header, cards   */
	--aiz-midnight: var(--wp--preset--color--midnight);  /* #002a49  text on light   */
	--aiz-yellow:   var(--wp--preset--color--yellow);    /* #ffce2b  accent          */
	--aiz-yellow-dark: var(--wp--preset--color--yellow-dark); /* #efab00 */
	--aiz-purple:   var(--wp--preset--color--purple);    /* #6490e8 */
	--aiz-purple-dark: var(--wp--preset--color--purple-dark); /* #1c59d3 —
	   COMPUTED, not sourced from any export: no design PDF/export exists for
	   the purple (Internationalisering) page. Same HSL-lightness-ratio
	   approach used for orange-dark/coral-dark below (see that comment for
	   the method) — same lightness ratio (~0.72) and hue as --aiz-purple,
	   slightly higher saturation. Revisit if a real design source turns up. */
	--aiz-blue:     var(--wp--preset--color--blue);      /* #258ed8 */
	--aiz-blue-dark: var(--wp--preset--color--blue-dark); /* #1668ae, sourced
	   from Additional_pages_html's own detail-1 export (--gradient-hero's
	   darkest stop) — added for the same reason teal-dark exists: a hero
	   gradient needs a dark/light pair, and the card only supplies one blue. */
	--aiz-coral:    var(--wp--preset--color--coral);     /* #ff8091 */
	--aiz-coral-dark: var(--wp--preset--color--coral-dark); /* #ff1534 —
	   COMPUTED, not sourced: no design PDF/export exists for the coral
	   (Duurzame inzetbaarheid) page either. Coral's own L/S (0.751/1.0, an
	   already-light, fully-saturated pastel) means the same proportional
	   darkening reads as a much redder hue than the other three dark
	   tokens' subtler shift — an inherent side effect of darkening a pastel
	   this way, not a mistake. Revisit by eye if the actual brand wants a
	   different tone; there's no source to check it against yet. */
	--aiz-teal:     var(--wp--preset--color--teal);      /* #2c8f82 */
	--aiz-teal-dark: var(--wp--preset--color--teal-dark); /* #1c6056 */
	--aiz-orange:   var(--wp--preset--color--orange);    /* #f4762d */
	--aiz-orange-dark: var(--wp--preset--color--orange-dark); /* #c94e08 —
	   COMPUTED, not sourced: no design PDF/export exists for the orange
	   (Een inclusieve arbeidsmarkt) page. Derived (like coral-dark and
	   purple-dark above) by converting the light token to HSL, multiplying
	   lightness by ~0.72 and saturation by ~1.03 (the average ratio the
	   three REAL sourced pairs — teal/teal-dark, blue/blue-dark,
	   yellow/yellow-dark — actually show), keeping hue fixed, then
	   converting back. A principled approximation given no source exists,
	   not a guess; revisit if a real design source turns up. */
	--aiz-mist:     var(--wp--preset--color--mist);      /* #8497aa */
	--aiz-white:    var(--wp--preset--color--white);     /* #fefefe */
	--aiz-dust:     var(--wp--preset--color--dust);      /* #f6f8fa */

	--aiz-page:        1200px;
	--aiz-header-max:  1350px;
	--aiz-prose:       790px;
	--aiz-page-gutter: clamp(24px, 8.33vw, 120px);
}

/*
 * Over ons' gutter: a clamp above 1180px, fixed steps below it. Home's is a
 * different system entirely and lives with the `.aiz-page--home` container
 * below, not here.
 */
@media (max-width: 1180px) {
	:root { --aiz-page-gutter: 48px; }
}

@media (max-width: 900px) {
	:root { --aiz-page-gutter: 32px; }
}

@media (max-width: 640px) {
	:root { --aiz-page-gutter: 20px; }
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--aiz-navy);
	color: var(--aiz-white);
	font-family: var(--wp--preset--font-family--rethink-sans);
	font-size: 16px;
	line-height: 1.5;
	/* All four weights are self-hosted, so faux bold is never wanted. */
	font-synthesis: none;
}

body.aiz-menu-open {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea {
	font: inherit;
}

button {
	cursor: pointer;
}

figure,
h1,
h2,
h3,
p,
blockquote {
	margin-top: 0;
}

/*
 * Core's flow layout adds `margin-block-start` to every child after the first,
 * via `:where(.is-layout-flow) > * + *`. That selector's specificity is zero,
 * so the element reset above already neutralises it for figure/h1/h2/h3/p and
 * blockquote — but NOT for a `div.wp-block-group`, and since the sections
 * became native containers every section wrapper is one of those. Left alone it
 * would open a gap between every section on the page and above every nested
 * container. Each module declares its own spacing, so core's injected value is
 * always the wrong number; a module that does want a margin sets it later in
 * this file and wins on source order.
 */
.wp-block-group {
	margin-block: 0;
}

:focus-visible {
	outline: 3px solid var(--aiz-yellow);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   Primitives
   ========================================================================== */

/* The content column. Every section wraps its content in this. */
.aiz-page {
	width: min(calc(100% - (2 * var(--aiz-page-gutter))), var(--aiz-page));
	margin-inline: auto;
}

/*
 * Measure cap for running copy — the export's `.narrow-content`.
 *
 * Named `--narrow`, not `--prose`: the Global Constraints family table gives
 * `.aiz-prose` to the prose-statement *section*, and the fidelity harness
 * matches that section by exactly that selector. A primitive of the same name
 * would put a 790px cap on the whole section.
 */
.aiz-narrow {
	max-width: var(--aiz-prose);
}

/*
 * Home's container system.
 *
 * The two exports do not share one. Over ons runs a clamp() gutter stepping
 * 48/32/20 at 1180/900/640; home runs a flat pad stepping 32/28/20 at
 * 1050/780. The spec adopted Over ons' formula globally and expected home to
 * fail its mid-range, leaving the diff to decide. The diff is not needed: the
 * two systems also break at different widths, so home's sections must carry
 * home's breakpoints regardless, and the gutter is one more value in that same
 * system. Arithmetic at the gate's five widths, content column, home's export
 * against a single global clamp:
 *
 *   1440 -> 1200 vs 1200   equal
 *   1050 ->  994 vs  954   40px narrower
 *   1024 ->  968 vs  928   40px narrower
 *    780 ->  740 vs  716   24px narrower
 *    390 ->  350 vs  350   equal
 *
 * So home's patterns wrap their content in `.aiz-page .aiz-page--home`, which
 * re-points the gutter token. Over ons keeps the :root value untouched.
 *
 * The same container carries home's base line-height. Over ons' body sets
 * `line-height: 1.5`; home's sets none at all, so it inherits `normal` and
 * every element that does not declare its own is shorter. Measured: the CTA
 * button came out 48px against the export's 46px, and the arrow glyph inside
 * its 22px ring sat low. Elements that do declare a line-height — and in home's
 * export most do — are unaffected either way.
 */
.aiz-page--home {
	--aiz-page-gutter: 32px;
	line-height: normal;
}

@media (max-width: 1050px) {
	.aiz-page--home { --aiz-page-gutter: 28px; }
}

@media (max-width: 780px) {
	.aiz-page--home { --aiz-page-gutter: 20px; }
}

.aiz-page--contact {
	--aiz-page-gutter: clamp(24px, 8.33vw, 120px);
}

.aiz-page--actueel {
	--aiz-page-gutter: 24px;
}

/*
 * Monitor's own `.page-grid` is a flat `calc(100% - 48px)` at every viewport
 * — no clamp, no breakpoint step. Measured against the root default (which
 * reaches 120px per side above 1180px): Monitor's own export genuinely wants
 * 24px per side throughout, so it gets its own unconditional modifier rather
 * than inheriting the shared clamp.
 */
.aiz-page--monitor {
	--aiz-page-gutter: 24px;
}

/*
 * Datawarehouse's own gutter: `clamp(1.25rem, 5vw, 7.5rem)` (20px–120px),
 * stepping to a flat 2rem at <=820px and 1.25rem at <=560px — its own three-
 * value system, distinct from every other page's.
 */
.aiz-page--datawarehouse {
	--aiz-page-gutter: clamp(20px, 5vw, 120px);
}

@media (max-width: 820px) {
	.aiz-page--datawarehouse { --aiz-page-gutter: 32px; }
}

@media (max-width: 560px) {
	.aiz-page--datawarehouse { --aiz-page-gutter: 20px; }
}

@media (max-width: 800px) {
	.aiz-page--contact { --aiz-page-gutter: 32px; }
}

@media (max-width: 700px) {
	.aiz-page--actueel { --aiz-page-gutter: 16px; }
}

@media (max-width: 560px) {
	.aiz-page--contact { --aiz-page-gutter: 20px; }
}

/*
 * Section intro — the export's `.section-intro`, a heading over a lead
 * paragraph. Shared rather than repeated per module because the export shares
 * it too: home's issues, impact and contact sections all use the one class with
 * no per-section overrides.
 */
.aiz-section-intro {
	margin-bottom: 64px;
}

.aiz-section-intro h2 {
	margin-bottom: 24px;
	color: var(--aiz-yellow);
	font-size: 56px;
	line-height: 1.08;
	font-weight: 600;
}

.aiz-section-intro p {
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.5;
}

@media (max-width: 780px) {
	.aiz-section-intro h2 {
		font-size: 40px;
	}
}

@media (max-width: 480px) {
	.aiz-section-intro h2 {
		font-size: 34px;
	}
}

/*
 * Visually hidden. `.screen-reader-text` is aliased because core emits it on
 * hidden block labels (the Search block's, for one) and expects the theme to
 * define it.
 */
.aiz-sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.aiz-skip-link {
	position: fixed;
	z-index: 100;
	top: 10px;
	left: 10px;
	padding: 10px 16px;
	background: var(--aiz-yellow);
	color: var(--aiz-charcoal);
	transform: translateY(-160%);
}

.aiz-skip-link:focus {
	transform: translateY(0);
}

/*
 * Buttons. Base metrics are home's, which is the export that defines the
 * variant set. Over ons draws the same yellow button 2px shorter with a wider
 * gap; that divergence is a per-section metric and belongs to the module that
 * gets measured for it, not here.
 */
.aiz-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 46px;
	padding: 11px 16px;
	border: 1px solid transparent;
	border-radius: 2px 2px 16px 2px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}

.aiz-button--outline {
	border-color: var(--aiz-white);
}

.aiz-button--dark {
	background: var(--aiz-midnight);
	color: var(--aiz-white);
}

.aiz-button--yellow {
	border: 0;
	background: var(--aiz-yellow);
	color: var(--aiz-white);
}

.aiz-button--muted {
	border-color: var(--aiz-mist);
	color: var(--aiz-mist);
}

/*
 * Over ons' button metrics. The Task 4 note predicted this divergence and said
 * it belonged to the module that gets measured for it: the same yellow button is
 * 2px shorter there, with a wider gap, no border and an explicit line-height.
 * Applied by selector rather than as a third variant class, so the markup stays
 * `.aiz-button .aiz-button--yellow` on both pages and the divergence is visible
 * in one place instead of copied into two modules.
 */
.aiz-values__intro .wp-block-button__link,
.aiz-contact--with-card .aiz-contact__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	min-height: 44px;
	padding: 12px 16px;
	gap: 32px;
	border: 0;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-yellow);
	color: var(--aiz-white);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}

/* ==========================================================================
   Header
   ==========================================================================
   The floating pill, from Over ons' export. Sixteen of the seventeen exports
   draw the header this way; home's flat full-bleed bar is the lone outlier and
   is allowlisted in the fidelity harness rather than reproduced.
   ========================================================================== */

.aiz-header {
	position: fixed;
	z-index: 20;
	top: 20px;
	left: 50%;
	width: min(calc(100% - 90px), var(--aiz-header-max));
	transform: translateX(-50%);
}

/* Frost the full space above the menu shell while content scrolls behind it. */
body::before {
	content: "";
	position: fixed;
	z-index: 19;
	top: 0;
	left: 0;
	right: 0;
	height: 88px;
	pointer-events: none;
	background: rgba(23, 32, 48, .12);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
	opacity: 0;
}

body.aiz-has-scrolled::before {
	opacity: 1;
}

.aiz-header__account {
	position: relative;
	z-index: 1;
	width: max-content;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 34px 8px;
	border-radius: 20px 20px 0 0;
	background: var(--aiz-charcoal);
	color: var(--aiz-mist);
	font-size: 14px;
	line-height: 20px;
}

.aiz-header__account::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -20px;
	height: 20px;
	background: var(--aiz-charcoal);
}

.aiz-header__account a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aiz-header__account-separator {
	width: 1px;
	height: 24px;
	background: var(--aiz-mist);
	opacity: .45;
}

/* Feather-style icons from Correct_design/Icons, drawn as a mask so colour
   still comes from the palette (currentColor) rather than the file. */
.aiz-header__account-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: currentColor;
}

.aiz-header__account-icon--user {
	-webkit-mask: url(../images/icon-account-user.svg) no-repeat center / contain;
	mask: url(../images/icon-account-user.svg) no-repeat center / contain;
}

.aiz-header__account-icon--external {
	-webkit-mask: url(../images/icon-account-external-link.svg) no-repeat center / contain;
	mask: url(../images/icon-account-external-link.svg) no-repeat center / contain;
}

.aiz-header__shell {
	min-height: 90px;
	padding: 22px 35px;
	border-radius: 20px;
	background: var(--aiz-charcoal);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.aiz-header__brand {
	display: block;
	flex: none;
	width: 129px;
	height: 45px;
	background: url(../images/aiz-header-logo.svg?v=1) no-repeat left center / contain;
	color: var(--aiz-white);
}

.aiz-header__brand-name {
	display: none;
}

/*
 * Sub-brand lockups. inc/brand.php puts aiz-section-{slug} on the body; each
 * rule below is the only thing that references its logo, so a visitor fetches
 * exactly one image and never the other three. The default section keeps the
 * text lockup above, which is what Over ons and the other generic pages draw.
 */
.aiz-section-monitor .aiz-header__brand,
.aiz-section-solutions .aiz-header__brand,
.aiz-section-slimmer-werken .aiz-header__brand {
	width: 104px;
	height: 45px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.aiz-section-monitor .aiz-header__brand > *,
.aiz-section-solutions .aiz-header__brand > *,
.aiz-section-slimmer-werken .aiz-header__brand > * {
	display: none;
}

.aiz-section-monitor .aiz-header__brand {
	background-image: url(../images/aiz-monitor-logo.svg?v=2);
}

.aiz-section-solutions .aiz-header__brand {
	background-image: url(../images/aiz-solutions-logo.svg?v=1);
}

.aiz-section-slimmer-werken .aiz-header__brand {
	background-image: url(../images/aiz-slimmer-werken-logo.svg?v=1);
}

.aiz-section-datawarehouse .aiz-header__brand {
	width: 104px;
	height: 45px;
	background: url(../images/aiz-datawarehouse-logo.svg?v=1) no-repeat left center / contain;
}

.aiz-section-datawarehouse .aiz-header__brand > * {
	display: none;
}

.aiz-section-datawarehouse .aiz-header__brand::before,
.aiz-section-datawarehouse .aiz-header__brand::after {
	display: none;
}

/*
 * Navigation. The wrapper div is the theme's own, so the mobile panel has an
 * element to position and an id for aria-controls — neither of which the
 * Navigation block exposes. Inside it, core's nav is flattened and the list
 * carries the row.
 */
.aiz-header__nav .wp-block-navigation {
	gap: 0;
}

.aiz-header__nav .wp-block-navigation__container {
	display: flex;
	align-items: center;
	gap: 32px;
	font-weight: 400;
	white-space: nowrap;
}

.aiz-header__nav .wp-block-navigation-item__content {
	position: relative;
	display: block;
	padding-block: 8px;
}

.aiz-header__nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3px;
	height: 2px;
	background: var(--aiz-yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}

/*
 * The exports mark the active item three different ways (`active`,
 * `is-current`, `is-active`); WordPress emits `current-menu-item` and that is
 * the one the theme honours.
 */
.aiz-header__nav .wp-block-navigation-item__content:hover::after,
.aiz-header__nav .wp-block-navigation-item__content:focus-visible::after,
.aiz-header__nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.aiz-header__nav .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
	min-width: 190px;
	padding: 12px 16px;
	border: 0;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-charcoal);
	color: var(--aiz-white);
	box-shadow: 0 8px 8px rgba(0, 0, 0, .18);
}

.aiz-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: 10px;
}

.aiz-header__toggle {
	display: none;
	border: 0;
	background: transparent;
	color: var(--aiz-white);
}

@media (max-width: 1180px) {
	.aiz-header {
		width: calc(100% - 48px);
	}

	.aiz-header__shell {
		padding-inline: 28px;
	}

	.aiz-header__nav .wp-block-navigation__container {
		gap: 18px;
		font-size: 14px;
	}
}

@media (max-width: 900px) {
	body::before {
		height: 44px;
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 36%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 0%, #000 36%, transparent 100%);
	}

	.aiz-header {
		top: 16px;
		width: calc(100% - 32px);
	}

	.aiz-header__account {
		display: none;
	}

	.aiz-header__shell {
		min-height: 72px;
		padding: 16px 22px;
	}

	.aiz-header__toggle {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.aiz-header__toggle-icon,
	.aiz-header__toggle-icon::before,
	.aiz-header__toggle-icon::after {
		width: 22px;
		height: 2px;
		display: block;
		background: var(--aiz-yellow);
		transition: .2s ease;
	}

	.aiz-header__toggle-icon {
		position: relative;
	}

	.aiz-header__toggle-icon::before,
	.aiz-header__toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.aiz-header__toggle-icon::before {
		top: -7px;
	}

	.aiz-header__toggle-icon::after {
		top: 7px;
	}

	.aiz-header__toggle[aria-expanded="true"] .aiz-header__toggle-icon {
		background: transparent;
	}

	.aiz-header__toggle[aria-expanded="true"] .aiz-header__toggle-icon::before {
		top: 0;
		transform: rotate(45deg);
	}

	.aiz-header__toggle[aria-expanded="true"] .aiz-header__toggle-icon::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.aiz-header__nav {
		position: absolute;
		top: 82px;
		left: 0;
		right: 0;
		padding: 28px;
		border-radius: 16px;
		display: none;
		background: var(--aiz-charcoal);
		box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
	}

	.aiz-header__nav.is-open {
		display: block;
	}

	.aiz-header__nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.aiz-header__nav .wp-block-navigation-submenu {
		flex-wrap: wrap;
		width: 100%;
	}

	.aiz-header__nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		position: static;
		display: none;
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		padding: 4px 0 4px 20px;
		box-shadow: none;
	}

	.aiz-header__nav .wp-block-navigation-submenu:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation__submenu-container {
		display: flex;
		visibility: visible;
		opacity: 1;
	}
}

@media (max-width: 640px) {
	.aiz-header {
		width: calc(100% - 24px);
	}

	.aiz-header__brand-mark {
		font-size: 32px;
	}

	.aiz-header__brand-name {
		display: none;
	}
}

/* ==========================================================================
   Footer
   ==========================================================================
   From Over ons' export, which twelve of the seventeen exports agree with.
   Home draws a different footer (a five-stop colour line, a four-column grid,
   an italic wordmark); that conflict is recorded in the task report and is not
   resolved here.
   ========================================================================== */

.aiz-footer {
	background: var(--aiz-charcoal);
}

/*
 * The accent line's rose and aqua stops are not palette colours: they appear
 * nowhere else in the design, and adding them to theme.json would put two
 * decorative gradient stops in the editor's colour picker. Each is written
 * exactly once, here, which is what "no hex value appears twice" asks for.
 */
/*
 * The export's own `.color-line` is a smooth five-stop blend (yellow, pink,
 * teal, blue, purple) — matched here by value, not by re-guessing colours:
 * three hard-edged bands with two hex values found nowhere else in the
 * codebase (`#dd596f`, `#56c8d2`) had replaced it.
 */
.aiz-footer__accent {
	height: 8px;
	background: linear-gradient(90deg, var(--aiz-yellow), var(--aiz-coral), var(--aiz-teal), var(--aiz-blue), var(--aiz-purple));
}

.aiz-footer__content {
	padding-block: 70px 32px;
	display: flex;
	flex-direction: column;
	gap: 72px;
}

.aiz-footer__top,
.aiz-footer__middle,
.aiz-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/*
 * Correct_design draws this as the angular AIZ mark, not plain text — the
 * superseded export drew plain text here too, so there was no in-page asset
 * to lift; the vector comes from aiz-solutions-detail's own export, the
 * closest existing supplied asset to the corrected shape. Text stays for the
 * accessible name (the link already carries aria-label="AIZ home"); font-size:0
 * is the same hide-the-label-keep-the-name technique already used for the
 * newsletter/search buttons.
 */
.aiz-footer__brand {
	position: relative;
	display: inline-block;
	width: 56px;
	height: 30px;
	color: transparent;
	font-size: 0;
}

.aiz-footer__brand::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--aiz-white);
	-webkit-mask: url(../images/icon-footer-mark.svg) no-repeat left center / contain;
	mask: url(../images/icon-footer-mark.svg) no-repeat left center / contain;
}

/*
 * Search block. The export's own CSS sizes the input at 280px plus a 52px
 * button (332px combined) -- this rule had sized the whole block to 275px
 * instead, shrinking the input by roughly 50px and clipping the placeholder,
 * visible once compared against Correct_design's uncropped placeholder text.
 */
.aiz-footer__search {
	width: 332px;
	margin: 0;
}

.aiz-footer__search .wp-block-search__inside-wrapper {
	display: flex;
	padding: 0;
	border: 0;
}

/*
 * Both children stay shrinkable, which is what makes the field 229px and the
 * button 46px inside a 275px form. Core gives the input `flex-grow: 1`, and
 * leaving that in place holds the button at its full 52px and steals 6px from
 * the field — a visible mismatch against the export.
 */
.aiz-footer__search .wp-block-search__input {
	flex: 0 1 auto;
	min-width: 0;
	height: 45px;
	padding: 16px;
	border: 0;
	border-radius: 2px 0 0 2px;
	color: var(--aiz-midnight);
}

.aiz-footer__search .wp-block-search__button {
	flex: 0 1 auto;
	width: 52px;
	height: 45px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0 2px 16px 0;
	background: var(--aiz-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * The export's search glyph is a stroked circle and handle; core's Search block
 * ships a filled one. The block's icon is hidden and the export's own SVG is
 * drawn as a mask, so the shape comes from the design while the colour still
 * comes from the palette rather than from inside the file.
 */
.aiz-footer__search .wp-block-search__button svg {
	display: none;
}

.aiz-footer__search .wp-block-search__button::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: auto;
	background: var(--aiz-charcoal);
	-webkit-mask: url(../images/icon-search.svg) no-repeat center / contain;
	mask: url(../images/icon-search.svg) no-repeat center / contain;
}

.aiz-footer__nav {
	display: flex;
	gap: 64px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.aiz-footer__nav .wp-block-navigation__container,
.aiz-footer__address {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aiz-footer__nav > .wp-block-navigation {
	display: block;
	margin: 0;
	font: inherit;
}

.aiz-footer__nav .wp-block-navigation__container {
	align-items: flex-start;
	margin: 0;
}

.aiz-footer__nav .wp-block-navigation-item__content {
	padding: 0;
}

.aiz-footer__nav .wp-block-navigation-item__content:hover,
.aiz-footer__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--aiz-yellow);
}

.aiz-footer__address {
	font-size: 14px;
	line-height: 20px;
	font-style: normal;
}

.aiz-footer__bottom {
	color: var(--aiz-mist);
	font-size: 12px;
	line-height: 16px;
}

@media (max-width: 640px) {
	.aiz-footer__content {
		gap: 48px;
	}

	.aiz-footer__top,
	.aiz-footer__middle,
	.aiz-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 32px;
	}

	.aiz-footer__search {
		width: 100%;
	}

	.aiz-footer__nav {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

/* ==========================================================================
   Hero — .aiz-hero
   ==========================================================================
   `--audience` is home's: copy plus four doelgroep cards over a yellow
   gradient. `--media` is Over ons': copy plus a tall image, over a gradient
   with a curved base.
   ==========================================================================
   REUSE CHECK (the plan's Task 9 Step 1, which asks what genuinely overlaps
   between the two heroes rather than assuming the type scale is shared).
   Measured, at 1440:
                       home                    Over ons
     h1 font-size      64px                    clamp(46px, 4.45vw, 64px)
     h1 line-height    1.09  -> 69.76px        1.095 -> 70.08px
     h1 letter-spacing -.03em -> -1.92px       -1px
     h1 font-weight    600                     600
     p  font-size      24px                    24px
     p  line-height    1.34  -> 32.16px        32px
     p  font-weight    500                     500
     p  spacing        margin: 32px 0          margin-bottom: 0, p + p margin-top: 32px
     breakpoints       1050 / 780 / 480        900 / 640

   So the scales do NOT overlap. The line-heights differ by 0.32px and the
   letter-spacing by 0.92px per character, which over a two-line heading is
   plainly visible; the two heroes also break at different widths. What is
   genuinely shared is `display: grid; align-items: start` on the grid and the
   two font-weights — below. Everything else is variant-scoped, because hoisting
   it into a shared rule would trade a few lines of CSS for a failed gate.
   ========================================================================== */

/* Genuinely shared by both heroes. */
.aiz-hero__grid {
	position: relative;
	display: grid;
	align-items: start;
}

.aiz-hero__copy h1 {
	font-weight: 600;
}

.aiz-hero__copy p {
	font-weight: 500;
}

.aiz-hero--audience {
	position: relative;
	overflow: hidden;
	min-height: 820px;
	padding: 205px 0 120px;
	background: var(--aiz-navy);
}

/*
 * The gradient panel. Its two stops sit a hair off the palette's yellow and
 * are unique to this section, so each is written once, here.
 */
.aiz-hero--audience::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 70%;
	height: 705px;
	background: linear-gradient(120deg, #ffcf2b, #ffbd19);
	border-radius: 0 0 90px 0;
}

.aiz-hero--audience .aiz-hero__grid {
	grid-template-columns: minmax(0, 688px) 480px;
	gap: 32px;
}

.aiz-hero--audience .aiz-hero__copy h1 {
	margin-bottom: 0;
	font-size: 64px;
	line-height: 1.09;
	letter-spacing: -.03em;
}

.aiz-hero--audience .aiz-hero__copy > p {
	margin: 32px 0;
	font-size: 24px;
	line-height: 1.34;
}

/* The Over ons CTA is a core Button block; this is the export's .button-outline. */
.aiz-hero__copy .wp-block-buttons {
	gap: 0;
}

.aiz-hero__copy .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 46px;
	padding: 11px 16px;
	border: 1px solid var(--aiz-white);
	border-radius: 2px 2px 16px 2px;
	background: transparent;
	color: var(--aiz-white);
	font-size: 16px;
	font-weight: 500;
	/* `normal`, not 1.5: home's export sets no body line-height, and 1.5 here
	   pushed the button to 48px against the export's 46px. */
	line-height: normal;
}

/* The export marks this arrow aria-hidden, so it is decoration, not content. */
.aiz-hero__copy .wp-block-button__link::after {
	content: "→";
}

.aiz-hero__audience {
	display: grid;
	gap: 16px;
}

/*
 * A doelgroep card. The export's <a><span><strong>+<small></span><span>arrow</span></a>
 * becomes a Group of two Paragraphs, so a two-row grid stands in for the
 * export's flex row plus nested column: both Paragraphs in column one, the
 * arrow spanning both rows in column two.
 */
.aiz-hero__audience-item {
	position: relative;
	min-height: 92px;
	/* Right padding reserves the arrow's 22px plus the export's 16px gap. */
	padding: 16px 62px 16px 24px;
	display: grid;
	row-gap: 8px;
	align-content: center;
	border-radius: 2px 2px 25px 2px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
	box-shadow: 4px 4px 10px rgba(16, 24, 32, .08);
	transition: transform .2s ease;
}

.aiz-hero__audience-item:hover {
	transform: translateX(6px);
}

/* A <p> stands in for <strong> and <small>, so its default margin has to go. */
.aiz-hero__audience-item > p {
	margin: 0;
}

/* Was <strong>. */
.aiz-hero__audience-item > p:first-child {
	color: var(--aiz-purple);
	font-size: 24px;
	line-height: 1;
	font-weight: 700;
}

/* Stretches the title's link over the whole card, as the export's <a> covered it. */
.aiz-hero__audience-item > p:first-child a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Was <small>. */
.aiz-hero__audience-item > p:last-child {
	max-width: 386px;
	font-size: 12px;
	line-height: 1.33;
}

/*
 * Was the trailing aria-hidden span: centred in the card and flush to the
 * content's right edge. Positioned absolutely rather than placed in a grid
 * track, because the description is hidden below 480px and a row-spanning
 * pseudo-element would then be centred against a phantom second row.
 */
.aiz-hero__audience-item::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	color: var(--aiz-purple);
	background-color: currentColor;
	-webkit-mask: url("../images/icon-arrow-right-circle.svg") center / contain no-repeat;
	mask: url("../images/icon-arrow-right-circle.svg") center / contain no-repeat;
}

/* The two routes in the revised home design sit beside the introduction. */
.aiz-hero__paths {
	display: grid;
	gap: 16px;
	padding-top: 16px;
}

.aiz-hero__path {
	position: relative;
	min-height: 158px;
	padding: 26px 72px 26px 28px;
	border-radius: 2px 2px 30px 2px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
}

.aiz-hero__path h2 {
	margin: 0 0 12px;
	color: var(--aiz-purple);
	font-size: 30px;
	line-height: 1.1;
}

.aiz-hero__path h2 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.aiz-hero__path p {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
}

.aiz-hero__path::after {
	content: "→";
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--aiz-purple);
	font-size: 27px;
}

.aiz-hero__path:focus-within {
	outline: 3px solid var(--aiz-midnight);
	outline-offset: 3px;
}

.aiz-home-audience {
	padding: 100px 0 120px;
	background: var(--aiz-charcoal);
}

.aiz-home-audience .aiz-hero__audience {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

.aiz-hero__audience-title {
	grid-column: 1 / -1;
	margin: 0 0 8px;
	color: var(--aiz-yellow);
	font-size: 36px;
}

.aiz-home-audience .aiz-hero__audience-item {
	min-height: 235px;
	padding: 32px;
	border-radius: 2px 2px 50px 2px;
	background: #403c22;
	color: var(--aiz-white);
	box-shadow: none;
}

.aiz-home-audience .aiz-hero__audience-item > p:first-child,
.aiz-home-audience .aiz-hero__audience-item::after {
	color: var(--aiz-yellow);
}

.aiz-home-audience .aiz-hero__audience-item > p:first-child {
	font-size: 36px;
	line-height: 1.1;
	font-weight: 600;
}

.aiz-home-audience .aiz-hero__audience-item > p:last-child {
	max-width: 47ch;
	color: var(--aiz-yellow);
	font-size: 16px;
}

@media (max-width: 1050px) {
	.aiz-hero--audience .aiz-hero__grid {
		grid-template-columns: 1.15fr .85fr;
	}

	.aiz-hero--audience .aiz-hero__copy h1 {
		font-size: clamp(48px, 6vw, 64px);
	}
}

@media (max-width: 780px) {
	.aiz-hero--audience {
		min-height: 0;
		padding: 125px 0 80px;
	}

	.aiz-hero--audience::before {
		width: 100%;
		height: 690px;
		border-radius: 0 0 60px 0;
	}

	.aiz-hero--audience .aiz-hero__grid {
		grid-template-columns: 1fr;
	}

	.aiz-hero--audience .aiz-hero__copy h1 {
		font-size: 44px;
	}

	.aiz-hero--audience .aiz-hero__copy > p {
		font-size: 19px;
		line-height: 1.42;
	}

	.aiz-hero__audience {
		margin-top: 24px;
	}

	.aiz-home-audience {
		padding: 70px 0 80px;
	}

	.aiz-home-audience .aiz-hero__audience {
		margin-top: 0;
	}

	.aiz-hero__audience-item {
		min-height: 84px;
	}
}

@media (max-width: 480px) {
	.aiz-hero--audience::before {
		height: 620px;
	}

	.aiz-hero--audience .aiz-hero__copy h1 {
		font-size: 36px;
	}

	.aiz-hero__audience-item > p:first-child {
		font-size: 20px;
	}

	.aiz-hero__audience-item > p:last-child {
		display: none;
	}

	.aiz-home-audience .aiz-hero__audience {
		grid-template-columns: 1fr;
	}

	.aiz-home-audience .aiz-hero__audience-item {
		min-height: 100px;
		padding: 24px;
	}

	.aiz-home-audience .aiz-hero__audience-item > p:first-child {
		font-size: 24px;
	}

	.aiz-hero__audience-title {
		font-size: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aiz-hero__audience-item {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Hero, `--media` variant (Over ons)
   -------------------------------------------------------------------------- */

.aiz-hero--media {
	position: relative;
	overflow: hidden;
	padding: 228px 0 0;
	/* Mobile/tablet default — the >900px rule below replaces this with the
	   clipped ::before shape, which is why it also switches this to navy. */
	background: linear-gradient(115deg, #ffcc25 0%, #fdbd12 53%, #ffdc55 100%);
}

/*
 * NO curved dome at desktop widths (>900px) — checked directly against
 * Correct_design/PNG/Over ons@2x.png with a raw pixel-colour scan across
 * the full width, not just one column: the boundary between the yellow
 * hero and the navy section below is two flat straight edges at two
 * different heights, not a curve.
 *
 * The main area (the text column, the gap, and behind the image, i.e.
 * everything left of `.aiz-page`'s own right-hand gutter) sits at 743px
 * from the section top. The narrow strip beyond the image, inside that
 * gutter, is taller — 824px — before it too turns navy. The image itself
 * (667px + 228px padding-top = 895px) bleeds past both, opaque, hiding
 * whatever the background is doing directly behind it — z-index 0 here vs.
 * `.aiz-hero__grid`'s z-index 1 (below) is what keeps that true at every
 * viewport, exactly as the <=900px dome already relied on.
 *
 * Drawn as ONE ::before with a two-step clip-path rather than two navy
 * masks over a full-height gradient, so the gradient itself stays a single
 * continuous sweep across the step instead of restarting at the seam.
 * Scoped to >900px in its own query — not left unconditional — because an
 * unconditional ::before here would sit in front of the <=900px query's
 * own full-height gradient at every width smaller than that, clipping the
 * mobile hero to these desktop-only 743px/824px numbers there too. Uses
 * `::before`, not `::after`, specifically because the <=900px media query
 * below already owns `::after` for its own (unrelated, legacy-matched)
 * dome — reusing it here fed this rule's `top`/`width` into that one via
 * the cascade and broke the previously-passing 780/390 legacy match.
 *
 * The step's x position is NOT `calc(100% - var(--aiz-page-gutter))`. That
 * only matches `.aiz-page`'s real right edge while the gutter clamp is
 * still the binding constraint — true at the three widths the legacy
 * harness checks (1440/1050/1024). Past ~1440px, `.aiz-page`'s own
 * `width: min(100% - 2*gutter, var(--aiz-page))` (1200px) switches to being
 * capped by that 1200px instead, so the real gutter grows well past the
 * clamped variable's value — at 1920px wide it's 360px, not the clamped
 * 120px. Using the raw variable there floated the tall strip a couple
 * hundred px to the left of the image's actual edge, over what should
 * already be navy. `max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2)`
 * reconstructs the same "real gutter" formula `.aiz-page` itself uses, so
 * this stays correct at any viewport width, not just the three sampled
 * ones.
 */
@media (min-width: 901px) {
	.aiz-hero--media {
		background: var(--aiz-navy);
	}

	.aiz-hero--media::before {
		content: "";
		position: absolute;
		z-index: 0;
		inset: 0;
		background: linear-gradient(115deg, #ffcc25 0%, #fdbd12 53%, #ffdc55 100%);
		clip-path: polygon(
			0 0,
			100% 0,
			100% 824px,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2)) 824px,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2)) 743px,
			0 743px
		);
	}
}

.aiz-hero--media .aiz-hero__grid {
	z-index: 1;
	min-height: 667px;
	grid-template-columns: minmax(0, 688px) minmax(320px, 481px);
	gap: 31px;
}

.aiz-hero--media .aiz-hero__copy h1 {
	margin-bottom: 32px;
	font-size: clamp(46px, 4.45vw, 64px);
	line-height: 1.095;
	letter-spacing: -1px;
}

.aiz-hero--media .aiz-hero__copy p {
	max-width: 688px;
	margin-bottom: 0;
	font-size: 24px;
	line-height: 32px;
}

.aiz-hero--media .aiz-hero__copy p + p {
	margin-top: 32px;
}

.aiz-hero--media .aiz-hero__visual {
	height: 667px;
	margin: 0;
	overflow: hidden;
	border-radius: 2px 2px 90px 2px;
}

.aiz-hero--media .aiz-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.aiz-hero--media {
		padding-top: 152px;
	}

	/*
	 * The curved dome, kept only below 900px — see the note above the desktop
	 * grid rule. It is wider than the section on both sides and sits below
	 * its bottom edge, which is how the gradient gets its dome; z-index 0
	 * keeps it behind the grid without leaving the section's stacking
	 * context. No corrected-design reference exists at this width, so this
	 * is unchanged from before and still matches the legacy export exactly.
	 */
	.aiz-hero--media::after {
		content: "";
		position: absolute;
		z-index: 0;
		left: -3%;
		right: -3%;
		bottom: -95px;
		height: 245px;
		border-radius: 50% 50% 0 0 / 30% 30% 0 0;
		background: var(--aiz-navy);
	}

	.aiz-hero--media .aiz-hero__grid {
		min-height: 750px;
		grid-template-columns: 1.25fr .75fr;
		gap: 24px;
	}

	.aiz-hero--media .aiz-hero__copy p {
		font-size: 20px;
		line-height: 28px;
	}

	.aiz-hero--media .aiz-hero__visual {
		height: 570px;
	}
}

@media (max-width: 640px) {
	.aiz-hero--media {
		padding-top: 136px;
	}

	.aiz-hero--media::after {
		bottom: -58px;
		height: 125px;
	}

	.aiz-hero--media .aiz-hero__grid {
		min-height: 0;
		padding-bottom: 86px;
		display: flex;
		flex-direction: column;
	}

	.aiz-hero--media .aiz-hero__copy h1 {
		font-size: 42px;
		line-height: 46px;
	}

	.aiz-hero--media .aiz-hero__copy p {
		font-size: 18px;
		line-height: 26px;
	}

	.aiz-hero--media .aiz-hero__visual {
		width: 100%;
		height: 430px;
		margin-top: 16px;
	}
}

/* ==========================================================================
   Split content — .aiz-split
   ==========================================================================
   Copy beside an image. `--image-first` puts the image in the narrow left
   column; the plain variant puts it on the right. The variant class sits on the
   locked section wrapper, so an editor cannot turn one into the other.

   Beware the naming: the harness's `content-1` is the IMAGE-FIRST section and
   `content-2` is the plain one — the reverse of what the numbers suggest.
   ========================================================================== */

.aiz-split {
	padding-block: 200px;
	background: var(--aiz-navy);
}

/* The second section sits on charcoal rather than the page's navy. */
.aiz-split--charcoal {
	background: var(--aiz-charcoal);
}

.aiz-split__layout {
	display: grid;
	grid-template-columns: 584px 481px;
	justify-content: space-between;
	gap: 60px;
	align-items: stretch;
}

.aiz-split--image-first .aiz-split__layout {
	grid-template-columns: 481px 584px;
}

/*
 * Core's flow layout adds a block-start margin to every child after the first.
 * The reset already zeroes it for figure/h2/p, but `.aiz-split__copy` is a
 * div.wp-block-group and would keep it — and a margin on a grid item offsets
 * the item, so in the plain variant the copy column would sit low.
 */
.aiz-split__layout > * {
	margin-block: 0;
}

.aiz-split__copy h2 {
	margin-bottom: 32px;
	color: var(--aiz-yellow);
	font-size: 40px;
	line-height: 44px;
	font-weight: 600;
	letter-spacing: -.5px;
}

.aiz-split__copy p {
	margin-bottom: 24px;
}

.aiz-split__copy p:last-child {
	margin-bottom: 0;
}

/* Inline emphasis inside the copy, so it stays part of the editable paragraph. */
.aiz-split__copy strong {
	color: var(--aiz-yellow);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
}

.aiz-split__image {
	min-height: 408px;
	overflow: hidden;
	border-radius: 2px;
}

.aiz-split__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1180px) {
	.aiz-split__layout,
	.aiz-split--image-first .aiz-split__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}
}

@media (max-width: 900px) {
	.aiz-split {
		padding-block: 120px;
	}

	.aiz-split__layout,
	.aiz-split--image-first .aiz-split__layout {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.aiz-split__copy h2 {
		font-size: 34px;
		line-height: 38px;
	}
}

@media (max-width: 640px) {
	.aiz-split {
		padding-block: 88px;
	}

	.aiz-split__layout,
	.aiz-split--image-first .aiz-split__layout {
		display: flex;
		flex-direction: column;
		gap: 48px;
	}

	/* Stacked, the image drops below the copy even in the image-first variant. */
	.aiz-split--image-first .aiz-split__image {
		order: 2;
	}

	.aiz-split__copy h2 {
		font-size: 32px;
		line-height: 36px;
	}

	.aiz-split__image {
		min-height: 300px;
	}
}

/* ==========================================================================
   Steps — .aiz-steps
   ==========================================================================
   Four cards in a real <ol>. The export's counter-reset/counter-increment are
   dead — nothing renders `counter(steps)` — so they are not carried over.
   ========================================================================== */

.aiz-steps {
	position: relative;
	/*
	 * Keep the content visually centred between the two curved seams. The
	 * following values section paints its 90px shoulder upward into this
	 * section, so the nominal bottom padding must include that overlap:
	 * 190px leaves 100px of visible yellow between the cards and curve.
	 */
	padding: 84px 0 190px;
	/*
	 * Measured directly against Correct_design/PNG/Over ons@2x.png: a sampled
	 * horizontal sweep (top-left/top-right/bottom-left/bottom-right corners
	 * all matched within 1 unit, so the angle is horizontal, not the export's
	 * 120deg) runs from `--aiz-yellow-dark` at the left edge, reaching
	 * `--aiz-yellow` by ~61% of the width and holding flat from there —
	 * a two-stop gradient with its second stop short of 100%, not three
	 * evenly-spaced stops.
	 */
	background: linear-gradient(90deg, var(--aiz-yellow-dark) 0%, var(--aiz-yellow) 61%);
}

/*
 * Top and bottom shoulders, the same swoosh FAMILY Home draws around its
 * testimonials section ("Inzicht dat werkt in de praktijk") — same
 * `clip-path: path(...)` construction (two chained cubic beziers from a
 * fully-closed bottom-left corner to a fully-open top-right one), same -80px
 * top offset and 75% width and `background: inherit` mechanism as Home's
 * `.aiz-impact + .aiz-testimonials::before` (top) and
 * `.aiz-testimonials + .aiz-contact.aiz-shape-top::before` (bottom, mirrored)
 * pair — but NOT Home's exact 85x81 path numbers. Measured directly against
 * Correct_design/PNG/Over ons@2x.png with a per-pixel vertical scan (not the
 * coarser sampling used the first time, which under-measured this): the
 * curve is 90px tall (not 81) and only 75px wide (not 85) — home's numbers
 * plugged in directly rendered visibly smaller/narrower than the design.
 * Every one of home's original path points is scaled by the same 90/81
 * (height) and 75/85 (width) factors, preserving its exact curve shape. As
 * on Home, the painted box and path extend 1px into the adjoining section;
 * without that overlap antialiasing exposes a dark/yellow hairline at some
 * fractional viewport widths.
 */
.aiz-split--charcoal + .aiz-steps {
	position: relative;
}

/*
 * `background: inherit` is wrong here, not just a shorthand: `.aiz-steps`'s
 * gradient runs left-to-right across the WHOLE section, but an inherited
 * gradient recomputes its own 0%/61% stops across THIS box's own width
 * (75% of the section) — so at the seam (this box's local 0%, i.e. the
 * section's real 25% mark) it restarts at the darkest stop instead of
 * continuing whatever colour the section itself already reached there,
 * producing a visible hard seam. `background-size: 133.3333% 100%` (=
 * 100/75) plus `background-position: 100% 0` re-stretches that same
 * gradient back out to the section's full width and slides it left by
 * exactly this box's own 25% offset, so it lines up with the section's
 * gradient pixel-for-pixel instead of restarting.
 */
.aiz-split--charcoal + .aiz-steps::before {
	content: "";
	position: absolute;
	top: -90px;
	right: 0;
	width: 75%;
	height: 91px;
	background-image: linear-gradient(90deg, var(--aiz-yellow-dark) 0%, var(--aiz-yellow) 61%);
	background-size: 133.3333% 100%;
	background-position: 100% 0;
	clip-path: path("M 0 91 C 15.9 91 30 78.7 33.5 62.9 C 37 53.9 37 41.6 40.6 32.6 C 47.6 12.3 58.2 0 75 0 H 2000 V 91 Z");
}

.aiz-steps + .aiz-values {
	position: relative;
}

.aiz-steps + .aiz-values::before {
	content: "";
	position: absolute;
	top: -90px;
	left: 0;
	width: 75%;
	height: 91px;
	background: inherit;
	clip-path: path("M 0 91 C 15.9 91 30 78.7 33.5 62.9 C 37 53.9 37 41.6 40.6 32.6 C 47.6 12.3 58.2 0 75 0 H 2000 V 91 Z");
	transform: scaleX(-1);
}

.aiz-steps__heading {
	margin-bottom: 32px;
	text-align: center;
}

.aiz-steps__heading h2 {
	margin-bottom: 16px;
	font-size: 40px;
	line-height: 44px;
}

.aiz-steps__heading p {
	margin-bottom: 0;
}

.aiz-steps__list {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.aiz-steps__list li {
	min-height: 232px;
	padding: 48px 32px;
	border-radius: 2px 2px 50px 2px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
	box-shadow: 4px 4px 8px rgba(16, 24, 32, .16);
}

.aiz-steps__list h3 {
	margin-bottom: 16px;
	color: var(--aiz-yellow);
	font-size: 24px;
	line-height: 24px;
}

.aiz-steps__list p {
	margin: 0;
}

@media (max-width: 900px) {
	.aiz-steps {
		padding-block: 120px;
	}

	.aiz-steps__list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.aiz-steps {
		padding: 88px 0 110px;
	}

	.aiz-steps__heading h2 {
		font-size: 32px;
		line-height: 36px;
	}

	.aiz-steps__list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.aiz-steps__list li {
		min-height: 0;
	}
}

/* ==========================================================================
   Prose statement — .aiz-prose
   ========================================================================== */

.aiz-prose {
	padding: 90px 0 155px;
	background: var(--aiz-navy);
}

.aiz-prose .aiz-page {
	max-width: var(--aiz-page);
}

.aiz-prose__body {
	max-width: var(--aiz-prose);
}

.aiz-prose__body h2 {
	margin-bottom: 32px;
	color: var(--aiz-yellow);
	font-size: 32px;
	line-height: 1.13;
	font-weight: 600;
}

.aiz-prose__body p {
	margin-bottom: 0;
	font-size: 24px;
	line-height: 1.34;
	font-weight: 500;
}

@media (max-width: 780px) {
	.aiz-prose {
		padding: 70px 0 120px;
	}

	.aiz-prose__body p {
		font-size: 20px;
	}
}

/* ==========================================================================
   Issue cards — .aiz-cards
   ==========================================================================
   Six cards, each with a positional accent colour. Leave breathing room after
   the charcoal audience section before the heading on the navy background.
   ========================================================================== */

.aiz-cards {
	padding: 120px 0 200px;
	background: var(--aiz-navy);
}

.aiz-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.aiz-cards__card {
	position: relative;
	overflow: hidden;
	border-radius: 2px 2px 36px 2px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
	box-shadow: 4px 4px 8px rgba(16, 24, 32, .16);
	transition: transform .2s ease;
}

/* Only a card whose heading got wrapped in a link (see cards-issues.php's
 * `href` key, which also adds this modifier class) lifts on hover; the
 * five still-plain cards stay static. A modifier class rather than
 * :has() to match this file's existing convention of PHP-driven state
 * classes instead of relational selectors. */
.aiz-cards__card--linked:hover {
	transform: translateY(-4px);
}

/* Core wraps an Image block in a figure; the export had a bare img. */
.aiz-cards__card figure {
	margin: 0;
}

.aiz-cards__card img {
	width: 100%;
	aspect-ratio: 379 / 250;
	object-fit: cover;
}

.aiz-cards__card-body {
	min-height: 200px;
	padding: 24px 32px;
}

.aiz-cards__card-body h3 {
	margin-bottom: 8px;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
}

/* Stretched-link technique: only the heading text is a real <a> (kept
 * independently editable in the block editor), then its ::after covers the
 * whole card so the entire tile is clickable. Same pattern as the
 * hero-audience.php doelgroep cards' .aiz-hero__audience-item. */
.aiz-cards__card-body h3 a {
	color: inherit;
	text-decoration: none;
}

.aiz-cards__card-body h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.aiz-cards__card-body p {
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.5;
}

.aiz-cards__card--blue h3   { color: var(--aiz-blue); }
.aiz-cards__card--teal h3   { color: var(--aiz-teal); }
.aiz-cards__card--yellow h3 { color: var(--aiz-yellow); }
.aiz-cards__card--orange h3 { color: var(--aiz-orange); }
.aiz-cards__card--coral h3  { color: var(--aiz-coral); }
.aiz-cards__card--purple h3 { color: var(--aiz-purple); }

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

@media (max-width: 780px) {
	.aiz-cards {
		padding: 80px 0 120px;
	}

	.aiz-cards__grid {
		grid-template-columns: 1fr;
		max-width: 520px;
	}
}

/* ==========================================================================
   Impact tabs — .aiz-impact
   ==========================================================================
   Four steps as a tab interface. All four panels are in the markup; aiz.js
   collapses them on init, so the section still reads without JavaScript.
   ========================================================================== */

.aiz-impact {
	padding: 80px 0 120px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
}

.aiz-impact__tabs {
	display: flex;
	gap: 32px;
	margin-bottom: 24px;
}

.aiz-impact__tabs button {
	width: 173px;
	padding: 0 0 8px;
	border: 0;
	border-bottom: 3px solid currentColor;
	background: none;
	text-align: left;
	color: var(--aiz-mist);
	font-size: 24px;
	font-weight: 600;
}

/* The underline colours are positional in the design, like the card accents. */
.aiz-impact__tabs button:nth-child(1) { border-color: var(--aiz-coral); }
.aiz-impact__tabs button:nth-child(2) { border-color: var(--aiz-yellow); }
.aiz-impact__tabs button:nth-child(3) { border-color: var(--aiz-purple); }
.aiz-impact__tabs button:nth-child(4) { border-color: var(--aiz-teal); }

.aiz-impact__tabs button[aria-selected="true"] {
	color: var(--aiz-midnight);
}

.aiz-impact__panel {
	min-height: 600px;
	padding: 80px 100px;
	border-radius: 2px 2px 95px 2px;
	display: grid;
	grid-template-columns: 1fr 480px;
	align-items: center;
	color: var(--aiz-midnight);
	background: linear-gradient(90deg, #e25e61, var(--aiz-coral) 60%);
}

/* Stable panel IDs also cover pages already edited in WordPress. */
.aiz-impact__panel[id="aiz-impact-panel-understand"] {
	background: linear-gradient(90deg, var(--aiz-yellow-dark), var(--aiz-yellow) 60%);
}

.aiz-impact__panel[id="aiz-impact-panel-use"] {
	background: linear-gradient(90deg, #3e67ba, var(--aiz-purple) 60%);
}

.aiz-impact__panel[id="aiz-impact-panel-activate"] {
	background: linear-gradient(90deg, var(--aiz-teal-dark), var(--aiz-teal));
}

/*
 * Required, not defensive. `[hidden]` in the UA sheet and the class rule above
 * have the same specificity, so source order decides — and the theme's sheet
 * loads later. Without this the collapsed panels would all stay visible.
 */
.aiz-impact__panel[hidden] {
	display: none;
}

.aiz-impact__copy {
	max-width: 480px;
}

.aiz-impact__copy h3 {
	margin-bottom: 32px;
	font-size: 56px;
	line-height: 1.08;
}

.aiz-impact__copy p {
	margin-bottom: 64px;
	color: var(--aiz-white);
	font-size: 24px;
	line-height: 1.33;
	font-weight: 500;
}

.aiz-impact__copy .wp-block-buttons {
	gap: 0;
}

/* The export's .button-dark. */
.aiz-impact__copy .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 16px;
	border: 1px solid transparent;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-midnight);
	color: var(--aiz-white);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
}

.aiz-impact__panel > figure {
	margin: 0;
}

@media (max-width: 1050px) {
	.aiz-impact__panel {
		grid-template-columns: 1fr 42%;
		padding: 64px;
	}

	.aiz-impact__tabs {
		overflow-x: auto;
		padding-bottom: 8px;
	}

	.aiz-impact__tabs button {
		flex: 0 0 160px;
	}
}

@media (max-width: 780px) {
	.aiz-impact {
		padding: 80px 0;
	}

	.aiz-impact__panel {
		min-height: 0;
		grid-template-columns: 1fr;
		padding: 40px 28px;
		border-radius: 2px 2px 55px 2px;
	}

	.aiz-impact__copy h3 {
		font-size: 40px;
	}

	.aiz-impact__copy p {
		margin-bottom: 32px;
		font-size: 19px;
	}

	.aiz-impact__panel > figure {
		margin-top: 32px;
	}
}

@media (max-width: 480px) {
	.aiz-impact__tabs {
		gap: 16px;
	}

	.aiz-impact__tabs button {
		flex-basis: 130px;
		font-size: 19px;
	}

	.aiz-impact__panel {
		padding: 36px 22px;
	}
}

/* ==========================================================================
   Testimonials — .aiz-testimonials
   ========================================================================== */

.aiz-testimonials {
	padding: 120px 0;
	background: var(--aiz-purple);
}

.aiz-testimonials__title {
	margin-bottom: 32px;
	text-align: center;
	font-size: 40px;
	line-height: 1.1;
}

.aiz-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.aiz-testimonials__item {
	min-height: 365px;
	margin: 0;
	padding: 48px 32px 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 2px 2px 50px 2px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
	box-shadow: 4px 4px 8px rgba(16, 24, 32, .16);
}

.aiz-testimonials__item > p {
	margin-bottom: 0;
	color: var(--aiz-purple);
	font-size: 32px;
	line-height: 1.13;
	font-weight: 600;
}

.aiz-testimonials__source {
	display: flex;
	flex-direction: column;
	font-size: 16px;
	line-height: 1.5;
}

.aiz-testimonials__source p {
	margin-bottom: 0;
}

/* Was <strong>. */
.aiz-testimonials__source p:first-child {
	font-weight: 700;
}

/*
 * Fallback only: five static decorative dots, for a testimonials section that
 * has NOT been upgraded to the real carousel (`.aiz-testimonials__carousel`)
 * — originally every instance on the site, faithful to the export and marked
 * aria-hidden since they were pure decoration with home shipping no slider
 * JavaScript at all. Home, Solutions archive and Solutions detail have since
 * all been upgraded to real, generated pagination via initCarousel() (aiz.js),
 * so this now only matters for a future testimonials section that hasn't been
 * (or one still holding an un-refreshed copy of an older, static pattern
 * insert). The `:has()` guard is structural rather than a modifier-class
 * allowlist on purpose: any section that gains `.aiz-testimonials__carousel`
 * loses this fallback automatically, with nothing to remember to update here.
 */
.aiz-testimonials:not(:has(.aiz-testimonials__carousel)) .aiz-page::after {
	content: "";
	display: block;
	width: 55px;    /* Five 7px dots on a 12px pitch: 5 * 7 + 4 * 5. */
	height: 7px;
	margin: 18px auto 0;
	/* Correct_design draws the second dot as a wide pill (an active-state
	   indicator); the row is still decorative/static per the standing
	   reachability audit (all three quotes are visible at every viewport),
	   so only the shape changes, not the interactivity. */
	background: var(--aiz-midnight);
	-webkit-mask: url(../images/icon-pagination-dots.svg) no-repeat center / contain;
	mask: url(../images/icon-pagination-dots.svg) no-repeat center / contain;
}

@media (max-width: 1050px) {
	.aiz-testimonials__item > p {
		font-size: 25px;
	}
}

@media (max-width: 780px) {
	.aiz-testimonials {
		padding: 80px 0;
	}

	/* Sizing for `.aiz-testimonials__grid`/`__item` at this width now comes
	   from the carousel breakpoints below (820px/560px), which `--home` was
	   added to alongside `--solutions`/`--solutions-detail` once Home's grid
	   became a real carousel — a fixed `grid-template-columns: 1fr` here
	   would otherwise be dead weight under `display: flex` in any case. */
}

@media (max-width: 480px) {
	.aiz-testimonials__item > p {
		font-size: 24px;
	}
}

/* ==========================================================================
   News — .aiz-news
   ==========================================================================
   A Query Loop over `actueel`. Core's post-template <ul> is the grid, so no
   wrapper is split around it; the heading row above it is split, because its
   heading and button are native blocks inside one flex row.
   ========================================================================== */

.aiz-news {
	padding: 120px 0 145px;
	background: var(--aiz-charcoal);
}

.aiz-news__heading {
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.aiz-news__heading h2 {
	margin-bottom: 0;
	color: var(--aiz-yellow);
	font-size: 40px;
	line-height: 1.1;
}

.aiz-news__more {
	gap: 0;
}

/* The export's .button-muted. */
.aiz-news__more .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 16px;
	border: 1px solid var(--aiz-mist);
	border-radius: 2px 2px 16px 2px;
	background: transparent;
	color: var(--aiz-mist);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
}

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

/*
 * z-index: 0 (not just position: relative) is load-bearing: it's what makes
 * this card its own stacking context, same reason and same fix as
 * .aiz-actueel .wp-block-post and .aiz-solutions__card. Without it, the
 * stretched full-card link below (.wp-block-post-title a::after,
 * position:absolute, z-index:auto) doesn't necessarily layer above this
 * card's own later content (the trailing arrow, drawn via ::after) — it can
 * end up painted, and therefore hit-tested, underneath it, so the arrow
 * looks clickable but isn't. This home card grid was flagged as unaudited
 * when that bug was fixed elsewhere (see CLAUDE.md, "Solutions/Actueel
 * archive card arrows"); confirmed the same bug was present here too.
 */
.aiz-news .wp-block-post {
	position: relative;
	z-index: 0;
	min-height: 500px;
	padding: 48px 32px 32px;
	display: flex;
	flex-direction: column;
	border-radius: 2px 2px 53px 2px;
	background: rgba(255, 206, 43, .2);
	color: var(--aiz-yellow);
	box-shadow: 4px 4px 16px rgba(16, 24, 32, .16);
}

/*
 * No font-weight: the export's rule sets none either, so the <h3> keeps the
 * user agent's bold (700). Declaring 600 here — the weight most of this design's
 * headings use — was enough to light up every title row in the diff.
 */
.aiz-news .wp-block-post-title {
	margin: 0;
	font-size: 32px;
	line-height: 1.13;
}

/*
 * The title is the card's only link and it covers the whole card. In the export
 * the circled arrow was a second <a> whose visible text was "→" and whose
 * accessible name was an aria-label repeating the title; one link named by its
 * own title is both simpler and better announced.
 */
.aiz-news .wp-block-post-title a::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.aiz-news .wp-block-post-excerpt {
	margin-top: 32px;
}

.aiz-news .wp-block-post-excerpt p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

/*
 * Was the trailing circled arrow link; decoration, so it is drawn, not linked.
 *
 * A flex item, not an absolutely-positioned box. The export's <a> is in flow
 * with `margin: auto 0 0 auto`, so it contributes its 38px to the card's
 * height — which only shows up once the content exceeds the min-height, i.e. at
 * the mobile breakpoint, where taking it out of flow made every card 38px short
 * and the error accumulated down the column. A ::after on a flex container is
 * itself a flex item, so the export's own rule transfers unchanged.
 *
 * It still sits under the title's stretched link, which is positioned and so
 * paints above it: the arrow shows, and clicking it follows the title.
 */
.aiz-news .wp-block-post::after {
	content: "";
	margin: auto 0 0 auto;
	width: 42px;
	height: 42px;
	background-color: currentColor;
	-webkit-mask: url("../images/icon-arrow-right-circle.svg") center / contain no-repeat;
	mask: url("../images/icon-arrow-right-circle.svg") center / contain no-repeat;
}

@media (max-width: 1050px) {
	.aiz-news .wp-block-post-title {
		font-size: 26px;
	}
}

@media (max-width: 780px) {
	.aiz-news {
		padding: 80px 0;
	}

	.aiz-news .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.aiz-news .wp-block-post {
		min-height: 300px;
	}
}

@media (max-width: 480px) {
	.aiz-news__heading {
		align-items: flex-start;
		gap: 20px;
	}

	.aiz-news__more .wp-block-button__link {
		padding: 9px 12px;
		font-size: 13px;
	}
}

/* ==========================================================================
   Contact — .aiz-contact
   ==========================================================================
   Home's variant. The form is rendered by inc/contact-form.php; its labels and
   submit are developer-owned, so this module styles plain markup rather than
   block output.
   ========================================================================== */

.aiz-contact {
	padding: 120px 0;
	background: var(--aiz-navy);
}

/* The shared intro runs smaller and tighter here than elsewhere. */
.aiz-contact .aiz-section-intro {
	margin-bottom: 48px;
}

.aiz-contact .aiz-section-intro h2 {
	font-size: 40px;
	line-height: 1.1;
}

.aiz-contact__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: end;
}

/*
 * flex, not grid: a bare grid with no explicit template auto-places every
 * in-flow child (the label text run, the required-marker span, AND the
 * input) onto its own implicit row, so the marker fell onto a line of its
 * own between "E-mail" and the field. flex-wrap keeps the text and marker
 * on one line and lets the full-width input wrap to its own line below —
 * the same fix `--with-card` already applies for its own label rule.
 */
.aiz-contact__form label {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	font-size: 14px;
	font-weight: 500;
}

/* The required marker. */
.aiz-contact__form label span {
	color: var(--aiz-coral);
}

.aiz-contact__form input {
	width: 100%;
	height: 56px;
	margin-top: 8px;
	padding: 8px 12px;
	border: 1px solid rgba(16, 24, 32, .05);
	border-radius: 2px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
}

.aiz-contact__form .aiz-button {
	grid-column: 2;
	justify-self: start;
}

/*
 * Handler feedback (Task 11).
 *
 * Home's contact section is navy, so the message reads light; the --with-card
 * variant re-points it against its white panel. Spans both columns of home's
 * two-column form; inert on Over ons, whose form is a flex column.
 *
 * Colour is never the only signal — the message says what is wrong in words,
 * and the field carries a border. Coral is a light pink-red: legible on navy,
 * but only ~2:1 against white, so it marks the input and never the text.
 */
.aiz-contact__status {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--aiz-white);
	font-weight: 600;
}

.aiz-contact__error {
	width: 100%;
	font-size: 13px;
	font-weight: 500;
}

/* Outranks `.aiz-contact__form label span`, which colours the required marker. */
.aiz-contact__form .aiz-contact__error {
	color: var(--aiz-white);
}

.aiz-contact__form [aria-invalid="true"] {
	border-color: var(--aiz-coral);
}

@media (max-width: 780px) {
	.aiz-contact {
		padding: 80px 0;
	}

	.aiz-contact__form {
		grid-template-columns: 1fr;
	}

	.aiz-contact__form .aiz-button {
		grid-column: auto;
	}
}

/* ==========================================================================
   Newsletter — .aiz-newsletter
   ==========================================================================
   Copy and form both sit in the right-hand column; the left column is empty by
   design, which is why both children are placed in column 2.
   ========================================================================== */

.aiz-newsletter {
	min-height: 575px;
	display: grid;
	align-items: center;
	/* The clean photo layer extracted from Correct_design/SVG/Home.svg.
	   Its separate design overlay is a uniform #110011 at 65% opacity. */
	background:
		linear-gradient(rgba(17, 0, 17, .65), rgba(17, 0, 17, .65)),
		url(../images/newsletter-background.jpg) center / cover no-repeat;
}

.aiz-newsletter__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
}

.aiz-newsletter__copy {
	grid-column: 2;
}

.aiz-newsletter__copy h2 {
	margin-bottom: 24px;
	color: var(--aiz-yellow);
	font-size: 56px;
	line-height: 1.08;
}

.aiz-newsletter__copy p {
	max-width: 585px;
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.5;
}

.aiz-newsletter__form {
	grid-column: 2;
	max-width: 480px;
	margin-top: 12px;
	display: flex;
}

.aiz-newsletter__form input {
	flex: 1;
	min-width: 0;
	height: 60px;
	padding: 0 24px;
	border: 0;
	color: var(--aiz-midnight);
}

.aiz-newsletter__form button {
	width: 64px;
	border: 0;
	background: var(--aiz-yellow);
	color: var(--aiz-white);
	font-size: 25px;
}

.aiz-newsletter__form [aria-invalid="true"] {
	outline: 2px solid var(--aiz-coral);
	outline-offset: -2px;
}

/*
 * The export has NO status element for this form at all, so this is drawn only
 * when Task 14's handler has something to say — the same asymmetry as home's
 * contact section, which also ships no status region. Rendering it
 * unconditionally would move a section that otherwise measures 0.000%.
 */
.aiz-newsletter__status {
	grid-column: 2;
	margin: 8px 0 0;
	color: var(--aiz-yellow);
	font-weight: 600;
}

.aiz-newsletter__status--error {
	color: var(--aiz-coral);
}

@media (max-width: 780px) {
	.aiz-newsletter {
		min-height: 500px;
	}

	.aiz-newsletter__content {
		grid-template-columns: 1fr;
	}

	.aiz-newsletter__copy,
	.aiz-newsletter__form,
	.aiz-newsletter__status {
		grid-column: 1;
	}

	.aiz-newsletter__copy h2 {
		font-size: 40px;
	}
}

@media (max-width: 480px) {
	.aiz-newsletter__form {
		width: 100%;
	}
}

/* ==========================================================================
   Logos — .aiz-logos
   ==========================================================================
   `--row` is home's partner strip. `--grid` (Over ons' organisation cards)
   arrives in Task 10.
   ========================================================================== */

.aiz-logos--row {
	padding: 150px 0 185px;
	background: var(--aiz-navy);
	color: var(--aiz-mist);
	text-align: center;
}

.aiz-logos__intro h2 {
	margin-bottom: 20px;
	font-size: 24px;
}

.aiz-logos__intro p {
	max-width: 585px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
}

.aiz-logos__row {
	margin-top: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	font-weight: 600;
	opacity: .9;
}

/* A <p> stands in for each <span>, so the default margins have to go. */
.aiz-logos__row > p {
	margin: 0;
}

@media (max-width: 780px) {
	.aiz-logos--row {
		padding: 90px 0;
	}

	.aiz-logos__row {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ==========================================================================
   Values carousel — .aiz-values
   ==========================================================================
   Native scrolling shows a complete card at every width. Editorial cards
   remain readable without JS; arrows and keyboard controls enhance scrolling.
   ========================================================================== */

.aiz-values {
	padding-block: 200px;
	background: var(--aiz-charcoal);
}

/*
 * Keep the clipping box inside the viewport so no translated collection can
 * leave an empty region beside the introduction.
 */
.aiz-values__layout {
	width: auto;
	margin-left: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

/*
 * The carousel is the CLIPPING BOX; `__track` is what moves.
 *
 * The export put the two-column grid straight on this element with the controls
 * as a full-width second row. Splitting the cards into a track changes nothing
 * at rest — same two rows, same 32px gap — but gives the script something to
 * translate. `overflow: hidden` keeps a slid card from painting over the intro
 * column beside it.
 */
.aiz-values__carousel {
	min-width: 0;
	display: grid;
	gap: 32px;
	overflow: hidden;
}

.aiz-values__track {
	position: relative;
	min-width: 0;
	width: 100%;
	display: flex;
	gap: 32px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.aiz-values__track::-webkit-scrollbar {
	display: none;
}

.aiz-values__track:focus-visible {
	outline: 2px solid var(--aiz-yellow);
	outline-offset: -2px;
}

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

.aiz-values__card {
	box-sizing: border-box;
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	min-height: 412px;
	margin: 0;
	padding: 64px 32px 48px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 2px;
	background: rgba(255, 206, 43, .2);
	color: var(--aiz-yellow);
}

.aiz-values__card h3 {
	overflow-wrap: anywhere;
	font-size: 40px;
	line-height: 44px;
	font-weight: 600;
}

.aiz-values__card p {
	margin: 0;
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
}

.aiz-values__controls {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	gap: 28px;
}

.aiz-values__button {
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--aiz-yellow);
	font-size: 20px;
	line-height: 1;
}

.aiz-values__intro h2 {
	margin-bottom: 32px;
	color: var(--aiz-yellow);
	font-size: 56px;
	line-height: 60px;
	font-weight: 600;
}

.aiz-values__intro p {
	margin-bottom: 64px;
}

.aiz-values__intro .wp-block-buttons {
	gap: 0;
}

@media (max-width: 1180px) {
	.aiz-values__layout {
		width: auto;
		margin-left: 0;
		grid-template-columns: 1.35fr 1fr;
		gap: 64px;
	}

	.aiz-values__card {
		min-height: 380px;
	}
}

@media (max-width: 900px) {
	.aiz-values {
		padding-block: 120px;
	}

	.aiz-values__layout {
		grid-template-columns: 1fr;
	}

	/* Stacked, the intro leads and the carousel follows. */
	.aiz-values__intro {
		grid-row: 1;
	}
}

@media (max-width: 640px) {
	.aiz-values {
		padding-block: 88px;
	}

	.aiz-values__intro h2 {
		font-size: 44px;
		line-height: 48px;
	}

	/* Keep the same native scrolling model when the introduction stacks. */
	.aiz-values__carousel {
		display: block;
	}

	.aiz-values__track {
		display: flex;
		transform: none;
	}

	.aiz-values__card {
		min-height: 340px;
	}

	.aiz-values__card:not(.is-active) {
		display: flex;
	}

	.aiz-values__controls {
		margin-top: 20px;
		display: flex;
		justify-content: flex-end;
	}
}

/* --------------------------------------------------------------------------
   Logos, `--grid` variant (Over ons' core partners)
   -------------------------------------------------------------------------- */

.aiz-logos--grid {
	padding: 200px 0 48px;
	background: var(--aiz-navy);
}

.aiz-logos__grid-intro {
	margin-bottom: 32px;
}

.aiz-logos__grid-intro h2 {
	margin-bottom: 32px;
	color: var(--aiz-yellow);
	font-size: 40px;
	line-height: 44px;
	font-weight: 600;
	letter-spacing: -.5px;
}

.aiz-logos__grid-intro p {
	margin: 0;
}

.aiz-logos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.aiz-logos__card {
	height: 179px;
	margin: 0;
	padding: 32px;
	border-radius: 2px 2px 40px 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--aiz-white);
}

.aiz-logos__card img {
	max-width: 250px;
	max-height: 96px;
	object-fit: contain;
}

/* One supplied logo has different proportions and fills its card in the export. */
.aiz-logos__card img[src*="partner-joblogic"] {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
}

@media (max-width: 900px) {
	.aiz-logos__grid-intro h2 {
		font-size: 34px;
		line-height: 38px;
	}

	.aiz-logos__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.aiz-logos--grid {
		padding-top: 88px;
	}

	.aiz-logos__grid-intro h2 {
		font-size: 32px;
		line-height: 36px;
	}

	.aiz-logos__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* --------------------------------------------------------------------------
   Logos, `--network` (Over ons' marquee row)
   --------------------------------------------------------------------------
   Also carries `--row`, because that is the family variant the harness matches,
   but it shares almost nothing with home's partner strip — see the reuse check
   in logos-grid.php. These rules follow home's in the file and override them.
   -------------------------------------------------------------------------- */

.aiz-logos--network {
	padding-block: 152px 200px;
	text-align: left;
}

.aiz-logos__network-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.aiz-logos__network-intro {
	max-width: 582px;
	color: var(--aiz-mist);
	text-align: center;
}

.aiz-logos__network-intro h2 {
	margin-bottom: 16px;
	font-size: 20px;
	line-height: 24px;
}

.aiz-logos__network-intro p {
	margin: 0;
}

/*
 * Constrains this row to Over ons' own content column instead of the base
 * rule's full-bleed 100vw below, mirroring the fix already applied to
 * Solutions' partner marquee (see that rule's own comment for the general
 * problem). Unlike Solutions, this is the easy case: the marquee's own
 * parent, `.aiz-logos__network-content`, already carries the plain
 * `.aiz-page` class (Over ons never overrides `--aiz-page-gutter` with a
 * page-specific class of its own, so it just uses the site's root default),
 * which means the parent is ALREADY sized to Over ons' real content column.
 * The marquee only needs to fill that already-correct parent — `width: 100%`
 * — rather than compute or copy the gutter formula again.
 */
.aiz-logos--network .aiz-logos__marquee {
	width: 100%;
	padding-inline: 0;
	justify-content: flex-start;
	scroll-snap-type: x mandatory;
}

.aiz-logos--network .aiz-logos__marquee figure {
	scroll-snap-align: start;
	/*
	 * A fixed 6 logos per page, same rule as Solutions' partner marquee:
	 * each logo gets an equal-width slot (5 gaps between 6 items, at the
	 * row's own existing `gap`, 80px/52px at ≤640px) instead of its own
	 * natural width, so pagination always lands on a whole number of full
	 * logos rather than a partial one.
	 */
	flex: 0 0 calc((100% - (5 * 80px)) / 6);
}

@media (max-width: 640px) {
	.aiz-logos--network .aiz-logos__marquee figure {
		flex: 0 0 calc((100% - (5 * 52px)) / 6);
	}
}

/*
 * `justify-content: flex-start` above assumes the row overflows. If AIZ ever
 * trims the network row down to 6 logos or fewer, it stops overflowing —
 * drop back to centred, the same idle treatment Solutions' marquee uses,
 * rather than leaving it stuck flush left with room to spare.
 */
.aiz-logos--network .aiz-logos__marquee.aiz-carousel--idle {
	justify-content: center;
}

/*
 * Wider than the viewport's content column on purpose: the row spans the full
 * viewport and clips, which is what makes it read as a marquee even though
 * nothing moves.
 */
/*
 * `overflow-x: auto` rather than the export's `hidden`, with the scrollbar
 * suppressed so nothing is drawn. Two reasons: it lets the pagination scroll the
 * row, and it gives touch users a swipe, which is where the row actually
 * overflows (three of eight logos visible at 390px). Pixel-identical at rest —
 * a hidden scrollbar reserves no space.
 */
.aiz-logos__marquee {
	width: 100vw;
	padding-inline: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 80px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.aiz-logos__marquee::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.aiz-logos__marquee {
		scroll-behavior: auto;
	}
}

.aiz-logos__marquee figure {
	flex: 0 0 auto;
	margin: 0;
}

.aiz-logos__marquee img {
	max-width: 166px;
	max-height: 52px;
	object-fit: contain;
}

/* Three dots for a row that does not scroll. An export artifact, preserved. */
.aiz-logos__pagination {
	height: 8px;
	display: flex;
	gap: 4px;
	align-items: flex-end;
}

/*
 * Real buttons, drawn exactly as the export drew its spans. The UA button box
 * has to be reset or the dots gain a border, a background and a font.
 */
.aiz-logos__dot {
	width: 20px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--aiz-mist);
	cursor: pointer;
	appearance: none;
}

/*
 * The export drew the FIRST dot tall and yellow, which is an active-page
 * indicator — so the state follows the current page rather than the first
 * child. At rest page one is current, so this renders as the export does.
 */
.aiz-logos__dot[aria-current="true"] {
	height: 8px;
	background: var(--aiz-yellow);
}

@media (max-width: 900px) {
	.aiz-logos__marquee {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.aiz-logos--network {
		padding-block: 88px;
	}

	.aiz-logos__marquee {
		gap: 52px;
	}
}

/* --------------------------------------------------------------------------
   Contact, `--with-card` variant (Over ons)
   -------------------------------------------------------------------------- */

.aiz-contact--with-card {
	padding: 0 0 200px;
}

.aiz-contact__panel {
	padding: 120px 103px;
	border-radius: 25px;
	display: grid;
	grid-template-columns: 584px 295px;
	justify-content: space-between;
	gap: 60px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
}

/*
 * Partial reuse of the shared intro rather than a fresh block: the inherited
 * `.aiz-contact .aiz-section-intro` rules already give the right 48px bottom
 * margin and 40px/44px heading. Only these two values differ.
 */
.aiz-contact--with-card .aiz-section-intro h2 {
	margin-bottom: 32px;
}

.aiz-contact--with-card .aiz-section-intro p {
	max-width: 560px;
}

/*
 * `align-items` has to be reset, not just overridden by omission: home's rule
 * for the same class sets `align-items: end` for its two-column grid, and in a
 * flex column that becomes a cross-axis rule that shrink-wraps every field and
 * pushes it to the right. It put the message field beside the grid instead of
 * below it.
 */
.aiz-contact--with-card .aiz-contact__form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 32px;
}

.aiz-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

/*
 * `gap` has to be reset for the same reason as `align-items` above: home's rule
 * for this class sets `gap: 8px` for its grid label, and in a wrapping flex label
 * that becomes a row-gap between the caption line and the field — 8px per label,
 * which compounded to a 24px error on the panel. Sharing a class across two
 * variants means every property the other variant sets has to be answered here.
 */
.aiz-contact--with-card .aiz-contact__form label {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	color: var(--aiz-midnight);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.aiz-contact--with-card .aiz-contact__form label span {
	color: var(--aiz-yellow);
}

.aiz-contact--with-card .aiz-contact__form input,
.aiz-contact--with-card .aiz-contact__form textarea {
	width: 100%;
	margin-top: 8px;
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: 2px;
	background: var(--aiz-dust);
	color: var(--aiz-midnight);
	outline: none;
}

.aiz-contact--with-card .aiz-contact__form input {
	height: 56px;
}

.aiz-contact--with-card .aiz-contact__form textarea {
	min-height: 150px;
	resize: vertical;
}

.aiz-contact--with-card .aiz-contact__form input:focus,
.aiz-contact--with-card .aiz-contact__form textarea:focus {
	border-color: var(--aiz-yellow);
	box-shadow: 0 0 0 3px rgba(255, 206, 43, .25);
}

.aiz-contact__submit {
	align-self: flex-start;
}

.aiz-contact__submit img {
	width: 24px;
	height: 24px;
}

/*
 * Where the handler reports back. The export ships this element empty, so it
 * keeps its box whether or not there is a message — which is why the -16px is
 * measured by the gate and must stay. Home's export has no status element at
 * all, so the basic form only grows one once it has something to say.
 */
.aiz-contact--with-card .aiz-contact__status {
	margin: -16px 0 0;
	color: var(--aiz-midnight);
}

/* Coral is unreadable on this white panel; the border carries the signal. */
.aiz-contact--with-card .aiz-contact__form .aiz-contact__error {
	color: var(--aiz-midnight);
}

.aiz-contact__card {
	align-self: start;
	padding: 32px;
	border-radius: 2px 2px 35px 2px;
	text-align: center;
	background: var(--aiz-white);
	box-shadow: 8px 8px 8px rgba(0, 42, 73, .16);
}

/*
 * Width pinned to the image so `margin-inline: auto` has something to centre.
 * Core wraps an Image block in a figure, which is block-level and would
 * otherwise fill the card and leave the portrait hard against the left edge.
 */
.aiz-contact__portrait {
	width: 165px;
	margin: 0 auto 32px;
}

.aiz-contact__portrait img {
	width: 165px;
	height: 165px;
	border-radius: 50%;
	object-fit: cover;
}

.aiz-contact__person {
	margin-bottom: 24px;
}

.aiz-contact__person h3 {
	margin-bottom: 4px;
	color: var(--aiz-yellow);
	font-size: 24px;
	line-height: 24px;
}

.aiz-contact__person p {
	margin: 0;
	font-weight: 500;
}

.aiz-contact__address {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-style: normal;
	text-align: left;
	white-space: nowrap;
}

.aiz-contact__address p {
	margin: 0;
}

.aiz-contact__address a {
	display: flex;
	gap: 16px;
}

/*
 * The ☎ ✉ in glyphs. aria-hidden decoration in the export, so they are drawn
 * here rather than becoming content an editor has to keep.
 */
.aiz-contact__address p:nth-child(1) a::before {
	content: "☎";
}

.aiz-contact__address p:nth-child(2) a::before {
	content: "✉";
}

.aiz-contact__address p:nth-child(3) a::before {
	content: "in";
}

/*
 * Over ons only: the corrected design draws these three as real Feather-style
 * icons (Correct_design/Icons/smartphone|mail|linkedin.svg), not the Unicode
 * glyphs above — measured directly against Correct_design/PNG/Over ons@2x.png.
 * Scoped away from `--datawarehouse`, `--solution` and
 * `--issue-arbeidsproductiviteit`, which reuse the same markup with their own
 * icon colour instead. Each of those three variants' own icon rule has the
 * SAME shape as this one (`<modifier> .aiz-contact__address a::before`), so
 * without the `:not()` here this rule's own two extra `:not()` clauses would
 * out-specificity theirs and win regardless of source order — found live on
 * `--issue-arbeidsproductiviteit` (teal override written, yellow rendered)
 * before this exclusion was added; `--datawarehouse`/`--solution` needed the
 * same fix at the time they were built, which is why they're already here.
 */
.aiz-contact--with-card:not(.aiz-contact--datawarehouse):not(.aiz-contact--solution):not(.aiz-contact--issue-arbeidsproductiviteit):not(.aiz-contact--issue-leven-lang-ontwikkelen):not(.aiz-contact--issue-digitalisering):not(.aiz-contact--issue-inclusieve-arbeidsmarkt):not(.aiz-contact--issue-duurzame-inzetbaarheid):not(.aiz-contact--issue-internationalisering) .aiz-contact__address a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--aiz-yellow);
}

.aiz-contact--with-card:not(.aiz-contact--datawarehouse):not(.aiz-contact--solution):not(.aiz-contact--issue-arbeidsproductiviteit):not(.aiz-contact--issue-leven-lang-ontwikkelen):not(.aiz-contact--issue-digitalisering):not(.aiz-contact--issue-inclusieve-arbeidsmarkt):not(.aiz-contact--issue-duurzame-inzetbaarheid):not(.aiz-contact--issue-internationalisering) .aiz-contact__address p:nth-child(1) a::before {
	-webkit-mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
}

.aiz-contact--with-card:not(.aiz-contact--datawarehouse):not(.aiz-contact--solution):not(.aiz-contact--issue-arbeidsproductiviteit):not(.aiz-contact--issue-leven-lang-ontwikkelen):not(.aiz-contact--issue-digitalisering):not(.aiz-contact--issue-inclusieve-arbeidsmarkt):not(.aiz-contact--issue-duurzame-inzetbaarheid):not(.aiz-contact--issue-internationalisering) .aiz-contact__address p:nth-child(2) a::before {
	-webkit-mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
}

.aiz-contact--with-card:not(.aiz-contact--datawarehouse):not(.aiz-contact--solution):not(.aiz-contact--issue-arbeidsproductiviteit):not(.aiz-contact--issue-leven-lang-ontwikkelen):not(.aiz-contact--issue-digitalisering):not(.aiz-contact--issue-inclusieve-arbeidsmarkt):not(.aiz-contact--issue-duurzame-inzetbaarheid):not(.aiz-contact--issue-internationalisering) .aiz-contact__address p:nth-child(3) a::before {
	-webkit-mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
}

@media (max-width: 1180px) {
	.aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 280px;
		padding-inline: 64px;
	}
}

@media (max-width: 900px) {
	.aiz-contact__panel {
		grid-template-columns: 1fr;
		padding: 72px;
	}

	.aiz-contact__card {
		width: min(100%, 360px);
	}
}

@media (max-width: 640px) {
	.aiz-contact--with-card {
		padding-bottom: 88px;
	}

	/*
	 * Over ons steps this heading down to 32px here; home's `.aiz-contact`
	 * override pins 40px and outranks the shared intro's own breakpoints. Left
	 * at 40px, "toekomstbestendige" has a min-content width of ~340px, which
	 * forced the single-column panel 55px wider than its own padding box and
	 * pushed every child out with it.
	 */
	.aiz-contact--with-card .aiz-section-intro h2 {
		font-size: 32px;
		line-height: 36px;
	}

	.aiz-contact__panel {
		width: calc(100% - 24px);
		padding: 48px 24px;
		border-radius: 18px;
	}

	.aiz-contact__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.aiz-contact__card {
		width: 100%;
	}
}

/* ==========================================================================
   Interim actueel templates
   ==========================================================================
   single.html, archive.html and index.html carry `actueel` until the designed
   aiz-actueel list and detail pages arrive with the remaining fifteen. Just
   enough to be readable. The one non-obvious rule is the top padding: the
   header is a fixed overlay, so a template with no hero has
   to reserve room for it, or the first heading renders underneath the pill.
   ========================================================================== */

.aiz-article,
.aiz-archive {
	padding-block: 200px 120px;
}

.aiz-article > *,
.aiz-archive > * {
	max-width: var(--aiz-prose);
}

.aiz-article h1,
.aiz-archive h1 {
	color: var(--aiz-yellow);
	font-size: 40px;
	line-height: 44px;
	font-weight: 600;
}

.aiz-article h2,
.aiz-archive h2 {
	font-size: 24px;
	line-height: 28px;
	font-weight: 600;
}

.aiz-article .wp-block-post-date,
.aiz-archive .wp-block-post-date {
	color: var(--aiz-mist);
	font-size: 14px;
	line-height: 20px;
}

/*
 * Archive/search/index fallback result list. Core's post-template <ul> and
 * post <li> carry no spacing of their own, so consecutive results ran
 * straight into each other — the next title landing directly against the
 * previous excerpt, with no list marker or gap to separate them. A plain
 * stacked list with a hairline divider between results is "just enough to
 * be readable" (this section's own standing rule), not a card treatment
 * like .aiz-news/.aiz-actueel use elsewhere.
 */
.aiz-archive .wp-block-post-template {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.aiz-archive .wp-block-post {
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.aiz-archive .wp-block-post:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.aiz-archive .wp-block-post-title {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
}

.aiz-archive .wp-block-post-date {
	display: block;
	margin-bottom: 12px;
}

.aiz-archive .wp-block-post-excerpt p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/*
 * The matched search term, wrapped in <mark> by inc/search.php's
 * keyword-in-context snippet. Browsers default <mark> to black-on-yellow,
 * which is illegible against this page's dark background — restyled with
 * the theme's own accent/text tokens instead.
 */
.aiz-archive mark {
	background: var(--aiz-yellow);
	color: var(--aiz-midnight);
	border-radius: 2px;
	padding: 0 2px;
}

.aiz-archive .wp-block-query-pagination {
	margin-top: 48px;
}

@media (max-width: 900px) {
	.aiz-article,
	.aiz-archive {
		padding-block: 140px 88px;
	}

	.aiz-archive .wp-block-post-template {
		margin-top: 32px;
		gap: 32px;
	}

	.aiz-archive .wp-block-post {
		padding-bottom: 32px;
	}
}

/* ===========================================================================
   Contact page — .aiz-contact--page
   ========================================================================== */

.aiz-contact--page {
	position: relative;
	min-height: 1266px;
	padding: 0;
	overflow: hidden;
	background: var(--aiz-navy);
	line-height: normal;
}

.aiz-contact--page::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 70.3%;
	height: 620px;
	border-radius: 0 0 106px 0;
	background: linear-gradient(90deg, var(--aiz-yellow-dark), var(--aiz-yellow) 60%);
}

.aiz-contact-page__layout {
	position: relative;
	padding-top: 209px;
	display: grid;
	grid-template-columns: minmax(0, 688px) minmax(360px, 481px);
	gap: 31px;
}

.aiz-contact-page__copy {
	padding-top: 12px;
}

.aiz-contact-page__copy h1 {
	max-width: 690px;
	margin: 0;
	font-size: clamp(46px, 4.45vw, 64px);
	font-weight: 600;
	line-height: 1.09;
	letter-spacing: -.025em;
}

.aiz-contact-page__intro {
	max-width: 680px;
	margin: 28px 0 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.34;
}

.aiz-contact-page__address {
	margin-top: 220px;
	display: flex;
	flex-direction: column;
	gap: 1.34em;
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.34;
}

.aiz-contact-page__address a:hover,
.aiz-contact-page__address a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--aiz-yellow);
}

.aiz-contact--page .aiz-contact__form {
	align-self: start;
	padding: 48px 32px;
	gap: 32px;
	border-radius: 25px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .1);
}

.aiz-contact--page .aiz-contact__form input,
.aiz-contact--page .aiz-contact__form textarea {
	padding: 12px 14px;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

.aiz-contact--page .aiz-contact__form textarea {
	height: 150px;
}

.aiz-contact--page .aiz-contact__status {
	margin: 0;
}

.aiz-route-contact .aiz-news {
	padding: 118px 0 120px;
	border-radius: 0 0 0 106px;
}

.aiz-route-contact .aiz-news.aiz-shape-top::before {
	display: none;
}

.aiz-route-contact .aiz-news .wp-block-post {
	min-height: 440px;
}

.aiz-route-contact .aiz-news .wp-block-post-title {
	font-size: 30px;
	font-weight: 600;
}

.aiz-route-contact .aiz-news__heading h2 {
	font-weight: 600;
}

.aiz-route-contact .aiz-news__more .wp-block-button__link {
	padding: 12px 16px;
	font-weight: 400;
	line-height: 20px;
}

.aiz-route-contact .aiz-news .wp-block-post::after {
	width: 36px;
	height: 36px;
}

.aiz-logos--contact {
	padding: 180px 0 150px;
	overflow: hidden;
}

.aiz-logos--contact .aiz-page--contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	line-height: normal;
}

.aiz-logos--contact .aiz-logos__intro {
	width: 100%;
	max-width: 590px;
}

.aiz-logos--contact .aiz-logos__intro h2 {
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
}

.aiz-logos--contact .aiz-logos__intro p {
	max-width: none;
}

/*
 * Real slider now, not a plain static row of text wordmarks that simply
 * overflowed off-screen with no way to reach the rest of it — the same
 * upgrade Home's testimonials got earlier, and the same contract Solutions,
 * Over ons and Monitor's logo rows all now share. `.aiz-logos__contact-dots`
 * (five decorative, `aria-hidden`, never-wired spans) is gone; the markup
 * now uses `.aiz-logos__marquee` + an empty `.aiz-logos__pagination`, so
 * `initCarousel()` generates real per-viewport paging here exactly as it
 * does everywhere else. This row's items are `<p>` wordmarks, not `<figure>`
 * logos, so the base `.aiz-logos__marquee figure` reset doesn't reach them —
 * this rule targets `p` directly instead.
 *
 * The marquee's own parent, `.aiz-page.aiz-page--contact`, already gives
 * this row its real content-column width (same easy case as Over ons and
 * Monitor — Solutions is the one exception, whose marquee sits outside any
 * `.aiz-page`), so `width: 100%` is enough here too.
 *
 * `--aiz-logos-contact-gap` keeps this row's own measured spacing
 * (`clamp(36px, 5.5vw, 80px)`, from the original export) as a custom
 * property, rather than switching to the flat 80px/52px value other rows
 * share, so the fixed-slot formula below can still divide against it.
 */
.aiz-logos--contact .aiz-logos__marquee {
	--aiz-logos-contact-gap: clamp(36px, 5.5vw, 80px);
	width: 100%;
	padding-inline: 0;
	margin-top: 0;
	gap: var(--aiz-logos-contact-gap);
	justify-content: flex-start;
	white-space: nowrap;
	font-family: Georgia, serif;
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	scroll-snap-type: x mandatory;
}

/*
 * A fixed 6 items per page, same rule as every other logo row on the site:
 * each wordmark gets an equal-width slot (5 gaps between 6 items) instead
 * of its own natural text width.
 */
.aiz-logos--contact .aiz-logos__marquee p {
	flex: 0 0 calc((100% - (5 * var(--aiz-logos-contact-gap))) / 6);
	margin: 0;
	text-align: center;
	scroll-snap-align: start;
}

/*
 * Same idle fallback as every other converted row: `flex-start` above
 * assumes the row overflows. If it ever stops (6 wordmarks or fewer),
 * recentre instead of sitting flush left with room to spare.
 */
.aiz-logos--contact .aiz-logos__marquee.aiz-carousel--idle {
	justify-content: center;
}

@media (max-width: 1050px) {
	.aiz-contact-page__layout {
		grid-template-columns: 1fr 400px;
		gap: 42px;
	}

	.aiz-contact-page__address {
		margin-top: 370px;
	}

	.aiz-route-contact .aiz-news .wp-block-post-title {
		font-size: 25px;
	}
}

@media (max-width: 800px) {
	.aiz-contact--page {
		min-height: 0;
		padding: 0 0 96px;
	}

	.aiz-contact--page::before {
		width: 100%;
		height: 600px;
		border-radius: 0 0 60px 0;
	}

	.aiz-contact-page__layout {
		padding-top: 140px;
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.aiz-contact-page__copy h1 {
		font-size: clamp(42px, 9vw, 58px);
	}

	.aiz-contact-page__intro {
		max-width: 580px;
		font-size: 21px;
	}

	.aiz-contact-page__address {
		margin-top: 56px;
		font-size: 20px;
	}

	.aiz-contact--page .aiz-contact__form {
		width: min(100%, 600px);
	}

	.aiz-route-contact .aiz-news {
		padding: 88px 0;
		border-radius: 0 0 0 60px;
	}

	.aiz-route-contact .aiz-news .aiz-page--home {
		--aiz-page-gutter: 32px;
	}

	.aiz-route-contact .aiz-news .wp-block-post {
		min-height: 360px;
	}

	.aiz-route-contact .aiz-news .wp-block-post-title {
		font-size: 30px;
	}

	.aiz-logos--contact {
		padding: 120px 0 110px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--page::before {
		height: 565px;
	}

	.aiz-contact-page__layout {
		padding-top: 116px;
	}

	.aiz-contact-page__copy h1 {
		font-size: 40px;
		line-height: 1.06;
	}

	.aiz-contact-page__intro {
		font-size: 19px;
		line-height: 1.4;
	}

	.aiz-contact-page__address {
		margin-top: 42px;
		font-size: 18px;
	}

	.aiz-contact--page .aiz-contact__form {
		padding: 34px 20px;
		gap: 22px;
		border-radius: 20px;
	}

	.aiz-route-contact .aiz-news .aiz-page--home {
		--aiz-page-gutter: 20px;
	}

	.aiz-route-contact .aiz-news__heading {
		flex-direction: column;
		gap: 24px;
	}

	.aiz-route-contact .aiz-news__heading h2 {
		font-size: 34px;
		line-height: 44px;
	}

	.aiz-route-contact .aiz-news__more .wp-block-button__link {
		padding: 12px 16px;
		font-size: 16px;
		font-weight: 400;
	}

	.aiz-route-contact .aiz-news .wp-block-post {
		min-height: 390px;
		padding: 36px 24px 26px;
	}

	.aiz-route-contact .aiz-news .wp-block-post-title {
		font-size: 27px;
	}

	.aiz-logos--contact .aiz-logos__intro p {
		font-size: 14px;
		line-height: 21px;
	}

	/*
	 * `justify-content: flex-start` and the removed `padding-left: 20px`
	 * both moved into the base rule above (flex-start is now unconditional,
	 * and padding-inline is 0 since the row's own width already matches the
	 * page column) — only the smaller font-size still belongs at this width.
	 */
	.aiz-logos--contact .aiz-logos__marquee {
		font-size: 17px;
	}
}

/* ===========================================================================
   Actueel archive — .aiz-actueel
   ========================================================================== */

.aiz-actueel {
	padding: 263px 0 126px;
	background: var(--aiz-navy);
}

.aiz-actueel__intro {
	width: min(584px, 100%);
	margin-bottom: 48px;
}

.aiz-actueel__intro h1 {
	margin-bottom: 24px;
	color: var(--aiz-yellow);
	font-size: clamp(48px, 5vw, 64px);
	line-height: 1.1;
	font-weight: 600;
}

.aiz-actueel__intro p {
	margin: 0;
}

.aiz-actueel__filters {
	margin-bottom: 64px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	scroll-margin-top: 140px;
}

.aiz-actueel__filter,
.aiz-actueel__term a {
	min-height: 36px;
	padding: 9px 16px;
	display: inline-flex;
	align-items: center;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 14px;
	line-height: 1;
}

.aiz-actueel__filter--all {
	border-color: var(--aiz-white);
}

.aiz-actueel__filter--inzichten,
.aiz-actueel__term a[href*="categorie=inzichten"] {
	background: var(--aiz-yellow);
	color: var(--aiz-white);
}

.aiz-actueel__filter--cases,
.aiz-actueel__term a[href*="categorie=cases"] {
	background: var(--aiz-purple);
	color: var(--aiz-white);
}

.aiz-actueel__filter--nieuws,
.aiz-actueel__term a[href*="categorie=nieuws"] {
	border-color: var(--aiz-coral);
	color: var(--aiz-coral);
}

.aiz-actueel__filter:hover,
.aiz-actueel__filter:focus-visible,
.aiz-actueel__filter.is-active {
	box-shadow: 0 0 0 3px var(--aiz-navy), 0 0 0 5px currentColor;
}

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

/*
 * z-index: 0 (not just position: relative) is load-bearing: it's what makes
 * this card its own stacking context. Without it, the stretched full-card
 * link below (`.wp-block-post-title a::after`, position:absolute,
 * z-index:auto) doesn't layer relative to ITS OWN card's later siblings —
 * it escapes to whatever ancestor actually establishes a stacking context,
 * and can end up painted (and therefore hit-tested) BEHIND this card's own
 * later, non-positioned `.aiz-actueel__card-footer` content, including the
 * arrow. That was exactly the bug: the arrow visually sat on top but was
 * unclickable because the invisible link overlay was underneath it in
 * paint/hit order, not above it. Confirmed live with
 * `document.elementFromPoint()` over the arrow before this fix: it returned
 * `.aiz-actueel__card-footer`, not the overlay.
 */
.aiz-actueel .wp-block-post {
	position: relative;
	z-index: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 2px 2px 40px 2px;
	transition: transform .2s ease;
}

.aiz-actueel .wp-block-post:hover {
	transform: translateY(-4px);
}

.aiz-actueel__image,
.aiz-actueel__image img {
	width: 100%;
	margin: 0;
	aspect-ratio: 379 / 214;
	object-fit: cover;
}

.aiz-actueel__image img {
	height: 214px;
}

.aiz-actueel__image {
	height: 214px;
	aspect-ratio: auto;
}

.aiz-actueel__card-content {
	flex: 1;
	min-height: 362px;
	padding: 32px 32px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
}

.aiz-actueel__term {
	margin-bottom: 16px;
}

.aiz-actueel__term a {
	min-height: 34px;
}

.aiz-actueel .wp-block-post-title {
	margin: 0 0 16px;
	color: var(--aiz-yellow);
	font-size: 24px;
	line-height: 1;
	font-weight: 600;
}

.aiz-actueel .wp-block-post-title a::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.aiz-actueel .wp-block-post-excerpt,
.aiz-actueel .wp-block-post-excerpt p {
	margin: 0;
}

.aiz-actueel__card-footer {
	color: var(--aiz-mist);
	font-weight: 500;
}

/*
 * Same treatment as home's Actueel-card arrow and the article detail page's
 * related-card arrow: one masked icon-arrow-right-circle.svg on a
 * currentColor box, not a text glyph inside a drawn circle.
 */
.aiz-actueel__card-footer::after {
	content: "";
	width: 36px;
	height: 36px;
	color: var(--aiz-yellow);
	background-color: currentColor;
	-webkit-mask: url("../images/icon-arrow-right-circle.svg") center / contain no-repeat;
	mask: url("../images/icon-arrow-right-circle.svg") center / contain no-repeat;
}

.aiz-actueel__pagination {
	margin-top: 64px;
	gap: 12px;
}

.aiz-actueel__pagination a,
.aiz-actueel__pagination .current {
	min-width: 36px;
	min-height: 36px;
	padding: 8px 12px;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--aiz-mist);
	border-radius: 999px;
}

.aiz-actueel__pagination .current {
	border-color: var(--aiz-yellow);
	background: var(--aiz-yellow);
	color: var(--aiz-charcoal);
}

.aiz-actueel__empty {
	padding: 48px 32px;
	border: 1px solid var(--aiz-mist);
	border-radius: 2px 2px 40px 2px;
}

.aiz-newsletter--actueel {
	min-height: 575px;
	overflow: hidden;
	/* Use the same clean photo layer as Home. `newsletter-section.png` was a
	 * flattened screenshot with its heading, copy and form already baked in,
	 * so placing the editable WordPress content over it rendered everything
	 * twice. Actueel's corrected SVG uses this photo plus the same 65% tint. */
	background:
		linear-gradient(rgba(17, 0, 17, .65), rgba(17, 0, 17, .65)),
		url(../images/newsletter-background.jpg) center / cover no-repeat;
}

.aiz-newsletter--actueel .aiz-newsletter__form {
	max-width: 379px;
	margin: 0 0 0 16px;
}

.aiz-newsletter--actueel .aiz-newsletter__content {
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.aiz-newsletter--actueel .aiz-newsletter__copy {
	grid-column: 2;
	padding-left: 16px;
}

.aiz-newsletter--actueel .aiz-newsletter__form,
.aiz-newsletter--actueel .aiz-newsletter__status {
	grid-column: 2;
}

.aiz-newsletter--actueel .aiz-newsletter__copy p {
	margin-bottom: 56px;
}

.aiz-newsletter--actueel .aiz-newsletter__form input[type="email"] {
	height: 60px;
	padding: 16px 24px;
	border: 1px solid rgba(16, 24, 32, .05);
	border-radius: 2px 0 0 2px;
	background: var(--aiz-white);
	color: var(--aiz-charcoal);
}

.aiz-newsletter--actueel .aiz-newsletter__form button {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: 0 2px 16px 0;
	color: var(--aiz-charcoal);
	font-size: 0;
}

/* wpautop may wrap shortcode phrasing content in a paragraph in templates. */
.aiz-newsletter--actueel .aiz-newsletter__form > p {
	width: 100%;
	margin: 0;
	display: flex;
}

.aiz-newsletter--actueel .aiz-newsletter__form > p:empty {
	display: none;
}

.aiz-newsletter--actueel .aiz-newsletter__form button::after {
	content: "↗";
	font-size: 20.8px;
	line-height: 1.5;
}

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

@media (max-width: 700px) {
	.aiz-actueel {
		padding: 164px 0 80px;
	}

	.aiz-actueel__intro {
		margin-bottom: 36px;
	}

	.aiz-actueel__filters {
		margin-bottom: 44px;
		gap: 10px;
	}

	.aiz-actueel .wp-block-post-template {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.aiz-actueel__card-content {
		min-height: 0;
		padding: 28px 24px 22px;
	}

	.aiz-newsletter--actueel {
		min-height: 520px;
		background-position: 38% center;
	}

	.aiz-newsletter--actueel .aiz-newsletter__content {
		display: block;
		width: 398px;
		max-width: none;
		margin-left: 16px;
		margin-right: 0;
		padding: 28px;
		border-radius: 16px;
		background: rgba(17, 0, 17, .72);
	}

	.aiz-newsletter--actueel .aiz-newsletter__copy {
		padding: 0;
	}

	.aiz-newsletter--actueel .aiz-newsletter__copy p {
		margin-bottom: 36px;
	}

	.aiz-newsletter--actueel .aiz-newsletter__form {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.aiz-newsletter--actueel .aiz-newsletter__status {
		padding: 16px 0 0;
	}
}

/* ===========================================================================
   Solutions archive
   ===========================================================================
   Six modules for the Solutions CPT archive: hero, a knowledge/collaboration
   context pair, the real card grid with audience filters, a reused partner
   marquee, a testimonials variant and a closing CTA panel. There is no Page
   behind this route (Decision 14) — archive-solutions.html is the only
   consumer, so this chrome is developer-owned the same way archive-actueel's
   is; editor ownership lives in the `solutions` records the grid queries.

   The export's own container breaks at 1100/820/560, not home's 1050/780 or
   Over ons' clamp, so `.aiz-page--solutions` is its own gutter system exactly
   like `.aiz-page--home`/`--contact`/`--actueel` are theirs.
   ========================================================================== */

.aiz-page--solutions {
	--aiz-page-gutter: 24px;
}

@media (max-width: 820px) {
	.aiz-page--solutions {
		width: min(100% - 40px, 680px);
	}
}

@media (max-width: 560px) {
	.aiz-page--solutions {
		width: calc(100% - 32px);
	}
}

/*
 * Hero, `--solutions` variant.
 *
 * REUSE CHECK: `grid-template-columns: minmax(0,688px) 481px` and `gap:31px`
 * match hero-media's measured values exactly, so `.aiz-hero__grid` carries
 * both without a variant override. The type scale does not overlap either
 * existing hero — no letter-spacing at all, plus an eyebrow and a 32px
 * "intro" tier neither has — so the copy rules below are new.
 */
.aiz-hero--solutions {
	position: relative;
	overflow: hidden;
	min-height: 1054px;
	background: var(--aiz-navy);
}

.aiz-hero--solutions .aiz-hero__grid {
	padding-top: 228px;
	grid-template-columns: minmax(0, 688px) 481px;
	gap: 31px;
}

/* Exact opening panel exported from Correct_design/SVG/Solutions.svg. */
.aiz-hero--solutions::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 983px;
	background: url(../images/solutions/hero-background.svg) no-repeat 0 0 / 100% 100%;
}

/*
 * The export draws this as two layers: a blurred radial glow (a sibling div)
 * and a diagonal navy (#121d30) vignette (a second pseudo-element), both
 * decorative and non-interactive. Combined into one ::after since an element
 * has only two pseudo-element slots and the polygon panel above needs its own.
 */
.aiz-hero--solutions::after { display: none; }

/* Same specificity note as .aiz-hero__intro below: needs the compound shape to outrank `.aiz-hero__copy p{font-weight:500}`. */
.aiz-hero__copy p.aiz-hero__eyebrow {
	margin: 0 0 8px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .01em;
}

.aiz-hero--solutions .aiz-hero__copy h1 {
	margin-bottom: 8px;
	font-size: clamp(52px, 4.45vw, 64px);
	line-height: 1.09;
}

/* `.aiz-hero__copy p{font-weight:500}` is more specific (class + element) than a bare class, so the weight override needs the same compound shape to win. */
.aiz-hero__copy p.aiz-hero__intro {
	max-width: 688px;
	margin-bottom: 32px;
	font-size: 32px;
	line-height: 1.125;
	font-weight: 600;
}

.aiz-hero__body {
	max-width: 688px;
	margin-bottom: 32px;
	font-size: 24px;
	line-height: 1.34;
}

.aiz-hero__body p {
	margin: 0;
}

.aiz-hero__body p + p {
	margin-top: 6px;
}

/*
 * The shared button rule below is measured against home (11px padding,
 * line-height:normal, because home's body sets no line-height at all). This
 * export's body sets `line-height:1.5` like Over ons, and its own button is
 * 12px padding with no forced min-height — so the natural content height
 * (line-height*font-size + padding + border = 50px) has to replace both.
 */
.aiz-hero--solutions .aiz-hero__copy .wp-block-button__link {
	min-height: 0;
	padding: 12px 16px;
	line-height: 1.5;
}

/* The export's arrow is a 24px inline span; the shared arrow pseudo-element otherwise inherits the button's 16px. */
.aiz-hero--solutions .aiz-hero__copy .wp-block-button__link::after {
	font-size: 24px;
	line-height: .75;
}

/* Overrides hero-media's 667px/cover/radius portrait treatment for this hero's taller, uncropped visual. */
.aiz-hero--solutions .aiz-hero__visual {
	height: 826px;
	margin: 0;
	overflow: hidden;
	border-radius: 0;
	-webkit-mask: url(../images/solutions/hero-mask.svg) 50% 50% / 100% 100% no-repeat;
	mask: url(../images/solutions/hero-mask.svg) 50% 50% / 100% 100% no-repeat;
}

.aiz-hero--solutions .aiz-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-hero--solutions .aiz-hero__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
	}

	.aiz-hero__copy p.aiz-hero__intro {
		font-size: 28px;
	}

	.aiz-hero__body {
		font-size: 20px;
	}
}

@media (max-width: 820px) {
	.aiz-hero--solutions {
		min-height: 0;
		padding-bottom: 100px;
	}

	.aiz-hero--solutions .aiz-hero__grid {
		grid-template-columns: 1fr;
		padding-top: 150px;
		gap: 48px;
	}

	.aiz-hero--solutions::before {
		height: 100%;
		background: linear-gradient(90deg, var(--aiz-yellow), var(--aiz-purple));
		clip-path: polygon(0 0, 100% 0, 100% 92%, 68% 94%, 62% 100%, 0 97%);
	}

	.aiz-hero--solutions .aiz-hero__copy h1 {
		margin-bottom: 10px;
		font-size: 52px;
	}

	.aiz-hero__copy p.aiz-hero__intro {
		margin-bottom: 28px;
		font-size: 27px;
	}

	.aiz-hero__body {
		margin-bottom: 28px;
		font-size: 19px;
	}

	.aiz-hero--solutions .aiz-hero__visual {
		height: 560px;
	}
}

@media (max-width: 560px) {
	.aiz-hero--solutions {
		padding-bottom: 72px;
	}

	.aiz-hero--solutions .aiz-hero__grid {
		padding-top: 126px;
		gap: 30px;
	}

	.aiz-hero--solutions .aiz-hero__copy h1 {
		font-size: 42px;
		line-height: 1.04;
	}

	.aiz-hero__copy p.aiz-hero__intro {
		font-size: 23px;
	}

	.aiz-hero__body {
		font-size: 17px;
		line-height: 1.45;
	}

	/*
	 * The export writes this as `height:auto; max-height:590px`, but that pair
	 * only resolves to 590 because its plain `<img>` carries no width/height
	 * attributes (so no UA-stylesheet aspect-ratio competes with the child's
	 * `height:100%`). WordPress's image emits width/height for CLS prevention
	 * (see the plan's performance rules), and with those present the same
	 * auto/max-height pair lets the image's own aspect ratio win and overflow
	 * past 590 instead of being contained. A definite height reproduces the
	 * export's actual rendered box regardless of attribute presence.
	 */
	.aiz-hero--solutions .aiz-hero__visual {
		height: 590px;
	}
}

/*
 * Knowledge split, `--solutions` modifier on the shared `.aiz-split` family.
 * REUSE CHECK: the export's `.split-layout{grid-template-columns:481px 584px}`
 * and its image's `width/height:100%;object-fit:cover;border-radius:2px` match
 * `.aiz-split--image-first` exactly, so only the deltas are written here: no
 * top padding, no heading letter-spacing, a list and a closing highlight line.
 */
.aiz-split--solutions {
	padding: 200px 0;
}

/* Match the exact 481 × 291 dashboard crop in the supplied Solutions artwork. */
.aiz-split--solutions .aiz-split__image {
	height: 291px;
	min-height: 0;
	align-self: start;
}

.aiz-split--solutions .aiz-split__copy h2 {
	margin-bottom: 0;
	letter-spacing: normal;
	color: var(--aiz-purple);
}

.aiz-split--solutions .aiz-split__copy p {
	margin-bottom: 18px;
}

.aiz-split--solutions .aiz-split__copy ul {
	margin: -12px 0 20px;
	padding-left: 24px;
}

.aiz-split__highlight {
	color: var(--aiz-purple);
	font-size: 20px;
	font-weight: 600;
}

@media (max-width: 820px) {
	.aiz-split--solutions {
		padding: 100px 0 140px;
	}

	/*
	 * Solutions' own stacking breakpoint (820px) sits between the reused
	 * `.aiz-split` module's own two breakpoints (900px two-equal-columns,
	 * 640px stacked) — so at, say, 780px the base module would still show two
	 * equal columns while this export has already stacked to one.
	 */
	.aiz-split--solutions .aiz-split__layout {
		display: grid;
		grid-template-columns: 1fr;
	}

	.aiz-split--solutions .aiz-split__image {
		order: 2;
		height: auto;
		aspect-ratio: 481 / 291;
	}
}

@media (max-width: 560px) {
	.aiz-split--solutions {
		padding: 80px 0 100px;
	}
}

/* Statement panel — .aiz-collab. No analogue on either demo page: a rounded charcoal card with a centred statement. */
.aiz-collab {
	padding: 0 0 104px;
	background: var(--aiz-navy);
}

.aiz-collab__panel {
	padding: 120px 102px;
	border-radius: 25px;
	background: var(--aiz-charcoal);
}

.aiz-collab__panel h2 {
	margin-bottom: 24px;
	color: var(--aiz-purple);
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
}

.aiz-collab__panel p {
	margin: 0;
}

.aiz-collab__panel p.aiz-collab__statement {
	margin: 48px 0;
	color: var(--aiz-purple);
	font-size: 48px;
	line-height: 1.17;
	font-weight: 400;
}

@media (max-width: 1100px) {
	.aiz-collab__panel {
		padding-inline: 72px;
	}
}

@media (max-width: 820px) {
	.aiz-collab {
		padding-bottom: 120px;
	}

	.aiz-collab__panel {
		padding: 72px 48px;
	}

	.aiz-collab__panel p.aiz-collab__statement {
		font-size: 38px;
	}
}

@media (max-width: 560px) {
	.aiz-collab {
		padding-bottom: 100px;
	}

	.aiz-collab__panel {
		padding: 48px 24px;
		border-radius: 20px;
	}

	.aiz-collab__panel p.aiz-collab__statement {
		margin: 36px 0;
		font-size: 30px;
	}
}

/*
 * The card grid — .aiz-solutions. The real CPT query the plan asks for: nine
 * records per page, real audience-filter links validated against registered
 * terms (inc/solutions.php), pagination and an empty state. The export shows
 * nine cards with a client-side toggle and no pagination at all; both the
 * filter mechanism and the pagination are new work, not reproduced from JS.
 */
.aiz-solutions {
	padding: 0 0 200px;
	background: var(--aiz-navy);
}

.aiz-solutions__intro {
	max-width: 584px;
}

.aiz-solutions__intro h2 {
	margin-bottom: 32px;
	color: var(--aiz-purple);
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
}

.aiz-solutions__intro p {
	margin: 0;
}

.aiz-solutions__intro p + p {
	margin-top: 24px;
}

.aiz-solutions__filters {
	margin: 64px 0 40px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	scroll-margin-top: 140px;
}

.aiz-solutions__filter-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
}

.aiz-solutions__filter {
	padding: 10px 16px;
	display: inline-flex;
	border: 1px solid var(--aiz-purple);
	border-radius: 999px;
	color: var(--aiz-purple);
	background: transparent;
	font-size: 14px;
	line-height: 1;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.aiz-solutions__filter:hover {
	border-color: var(--aiz-white);
}

.aiz-solutions__filter.is-active {
	color: var(--aiz-charcoal);
	background: var(--aiz-purple);
}

.aiz-solutions__theme-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.aiz-solutions__select-wrap {
	position: relative;
	width: 379px;
	max-width: 100%;
}

.aiz-solutions__select-wrap::after {
	content: '';
	position: absolute;
	right: 18px;
	bottom: 22px;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	color: var(--aiz-purple);
	transform: rotate(45deg);
	pointer-events: none;
}

.aiz-solutions__filter-label,
.aiz-solutions__filter-group h3.aiz-solutions__filter-label {
	display: block;
	margin: 0 0 8px;
	color: var(--aiz-mist);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.aiz-solutions__select {
	appearance: none;
	width: 100%;
	height: 50px;
	padding: 15px 48px 15px 16px;
	border: 0;
	border-radius: 2px 2px 16px 2px;
	background: rgba(100, 144, 232, .2);
	color: #8fb1f0; /* Readable small text on the supplied blue panel. */
	font: inherit;
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
}

.aiz-solutions__select option {
	background: var(--aiz-navy);
	color: var(--aiz-white);
}

.aiz-solutions__apply {
	padding: 10px 16px;
	border: 1px solid var(--aiz-purple);
	border-radius: 2px 2px 16px 2px;
	background: transparent;
	color: var(--aiz-purple);
	font: inherit;
	cursor: pointer;
}

.aiz-solutions__submit[hidden] {
	display: none;
}

.aiz-solutions__filter-context {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.aiz-solutions__status {
	margin: 24px 0 0;
	color: var(--aiz-white);
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	scroll-margin-top: 173px;
}

.aiz-solutions__grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 37px 32px;
}

.aiz-solutions__grid > li {
	display: flex;
}

/* z-index: 0 here for the same reason as .aiz-actueel .wp-block-post above
   — it's what makes the stretched title link (`.wp-block-post-title
   a::after` below) a local stacking context instead of escaping past this
   card's own arrow. */
.aiz-solutions__card {
	position: relative;
	z-index: 0;
	width: 100%;
	min-height: 285px;
	padding: 32px 32px 24px;
	display: flex;
	flex-direction: column;
	border-radius: 2px 2px 40px 2px;
	color: var(--aiz-purple);
	background: rgba(100, 144, 232, .2);
	transition: transform .2s ease;
}

.aiz-solutions__card:hover {
	transform: translateY(-4px);
}

.aiz-solutions__card .wp-block-post-title {
	margin: 0 0 16px;
	color: var(--aiz-white);
	font-size: 26px;
	line-height: 1.15;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* The card's only link; stretched over the whole card, same idiom as .aiz-news and .aiz-actueel. */
.aiz-solutions__card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.aiz-solutions__card .wp-block-post-excerpt {
	margin: 0 0 36px;
}

.aiz-solutions__card .wp-block-post-excerpt p {
	margin: 0;
	color: var(--aiz-mist);
	line-height: 1.5;
}

/*
 * The export's visible "Lees meer" plus a circled arrow, both inside the
 * card's single link in the export. Here the title carries the only link
 * (accessible name = the title, same idiom as .aiz-news/.aiz-actueel), so
 * "Lees meer" is static developer-owned microcopy and the arrow is drawn as
 * its ::after rather than a second link.
 */
.aiz-solutions__card-affordance {
	margin: auto 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 500;
}

/*
 * Same treatment as .aiz-actueel__card-footer::after (and home's
 * Actueel-card arrow, and the article detail page's related-card arrow):
 * one masked icon-arrow-right-circle.svg on a currentColor box, not a text
 * "→" glyph inside a border-only circle. This card's own `color:
 * var(--aiz-purple)` on `.aiz-solutions__card` already supplies the right
 * blue via currentColor, so no colour override is needed here.
 */
.aiz-solutions__card-affordance::after {
	content: "";
	width: 36px;
	height: 36px;
	background-color: currentColor;
	-webkit-mask: url("../images/icon-arrow-right-circle.svg") center / contain no-repeat;
	mask: url("../images/icon-arrow-right-circle.svg") center / contain no-repeat;
}

.aiz-solutions__pagination {
	margin-top: 64px;
	gap: 12px;
}

.aiz-solutions__pagination a,
.aiz-solutions__pagination .current {
	min-width: 36px;
	min-height: 36px;
	padding: 8px 12px;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--aiz-mist);
	border-radius: 999px;
}

.aiz-solutions__pagination .current {
	border-color: var(--aiz-purple);
	background: var(--aiz-purple);
	color: var(--aiz-white);
}

.aiz-solutions__empty {
	padding: 48px 32px;
	border: 1px solid var(--aiz-mist);
	border-radius: 2px 2px 40px 2px;
}

@media (max-width: 1100px) {
	.aiz-solutions__grid {
		gap: 24px;
	}

	.aiz-solutions__card {
		padding-inline: 24px;
	}
}

@media (max-width: 820px) {
	.aiz-solutions {
		padding-bottom: 140px;
	}

	.aiz-solutions__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.aiz-solutions__card .wp-block-post-title {
		font-size: 22px;
	}
}

@media (max-width: 560px) {
	.aiz-solutions {
		padding-bottom: 100px;
	}

	.aiz-solutions__filters {
		margin: 44px 0;
		gap: 10px;
	}

	.aiz-solutions__filter-list {
		gap: 10px;
	}

	.aiz-solutions__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.aiz-solutions__card {
		min-height: 250px;
	}
}

/*
 * Partners marquee, `--solutions`. REUSE CHECK: the export's marquee image
 * sizing (`max-width:166px;max-height:52px`) is identical to Over ons'
 * network row, so `.aiz-logos__marquee`/`__pagination`/`__dot` are reused
 * as-is — see logos-row-solutions.php for the measured overflow that justifies
 * wiring the dots the same way.
 */
.aiz-logos--solutions {
	padding: 0 0 200px;
	overflow: hidden;
	text-align: center;
	color: var(--aiz-mist);
}

.aiz-logos__solutions-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.aiz-logos--solutions .aiz-logos__intro {
	width: min(582px, calc(100% - 48px));
}

.aiz-logos--solutions .aiz-logos__intro h2 {
	margin: 0 0 16px;
	font-size: 20px;
	line-height: 1.2;
}

.aiz-logos--solutions .aiz-logos__intro p {
	margin: 0;
}

/*
 * The export centred its track with `transform:translateX(calc((100vw-1340px)/2))`
 * — including going negative below 1340px, which a padding-based shift
 * cannot express (padding clamps at 0). That was correct for a STATIC row
 * that never scrolled: at rest (scrollLeft 0, the only state the pixel gate
 * ever measured), shifting the whole box produced the same pixels as
 * shifting its content would. It stopped being correct once the row became
 * a genuinely paginated carousel — the shift is constant regardless of
 * scroll position, so it fights the real per-page targets `initCarousel()`
 * now computes (page one should show the first logo flush, with nothing
 * cut off before it) rather than reproducing them. Removed at the user's
 * explicit direction, prioritising correct pagination over matching this
 * section's old resting pixels — the fidelity/"pixel gate" regression test
 * documented elsewhere in this file will very likely need a new allowlist
 * entry or a re-baselined reference screenshot for this section as a
 * result; that is an accepted, intentional trade-off, not an oversight.
 */
/*
 * The base `.aiz-logos__marquee` is `width: 100vw` — right for a true
 * full-bleed marquee, wrong now that this row is a real paginated carousel
 * sitting between sections that all constrain to the ordinary content
 * column: the intro just above and the testimonials carousel just below
 * both sit in `.aiz-page.aiz-page--solutions`, whose OWN rule
 * (`.aiz-page--solutions { --aiz-page-gutter: 24px; }`, feeding `.aiz-page`'s
 * `width: min(calc(100% - 2 * gutter), var(--aiz-page))`) plus its two
 * breakpoint-specific width overrides at 820px/560px is the exact target to
 * match. The marquee is NOT a descendant of any element carrying
 * `.aiz-page--solutions`, so simply inheriting `var(--aiz-page-gutter)`
 * here would silently fall back to the :root default clamp rather than
 * Solutions' fixed 24px — every number below is copied from
 * `.aiz-page--solutions`'s own rule (var(--aiz-page): 1200px) rather than
 * computed through inheritance, so this stays correct regardless of that.
 * `padding-inline: 0` explicitly OVERRIDES the base `.aiz-logos__marquee`'s
 * `padding-inline: 24px` — CSS cascades property-by-property, not
 * rule-by-rule, so simply omitting `padding-inline` here would have let
 * that 24px keep applying underneath, insetting this row's actual content
 * an extra 24px past the width already computed above and leaving the last
 * logo short of the page edge that every sibling section's content (the
 * intro above, the testimonials below) sits flush against. Zeroing it here
 * is what actually makes the row's right edge land exactly where those
 * sections' does.
 */
.aiz-logos--solutions .aiz-logos__marquee {
	width: min(calc(100% - 48px), 1200px);
	padding-inline: 0;
	margin: 48px 0 16px;
	margin-inline: auto;
	min-height: 75px;
	justify-content: flex-start;
	scroll-snap-type: x mandatory;
}

@media (max-width: 820px) {
	.aiz-logos--solutions .aiz-logos__marquee {
		width: min(100% - 40px, 680px);
	}
}

@media (max-width: 560px) {
	.aiz-logos--solutions .aiz-logos__marquee {
		width: calc(100% - 32px);
	}
}

/*
 * Every logo snaps to a real position — never settle mid-logo, whether
 * arriving via a dot click (`initCarousel()`'s own targets already land on
 * a real item) or a manual swipe/trackpad scroll, which had no such
 * guarantee before. Only `--solutions` gets this: Over ons' network row
 * never scrolls at all (fixed, undecorated dots — a separate, ruled-on
 * content gap), so it's untouched.
 */
.aiz-logos--solutions .aiz-logos__marquee figure {
	scroll-snap-align: start;
}

/*
 * A fixed 6 logos per page, at the user's explicit request — "just like
 * with the testimonials", whose 3 equal cards this mirrors
 * (`calc((100% - 64px) / 3)`). Each logo gets an equal-width slot (5 gaps
 * between 6 items, using the marquee's own existing `gap` value so the
 * spacing between every logo — and between the last logo and the row's own
 * right edge, which now sits flush with the page edge per the
 * `padding-inline: 0` fix above — comes out identical) rather than its own
 * natural/intrinsic width; the image itself still only grows up to its
 * existing `max-width:166px` and stays centred/`object-fit:contain` within
 * that slot, so a narrower logotype doesn't stretch to fill it. Applied at
 * every width on purpose — logos are small enough that 6 across still
 * reads fine on mobile, unlike testimonials' text-heavy cards, which drop
 * to one at a time instead.
 */
.aiz-logos--solutions .aiz-logos__marquee figure {
	flex: 0 0 calc((100% - (5 * 80px)) / 6);
}

@media (max-width: 640px) {
	.aiz-logos--solutions .aiz-logos__marquee figure {
		flex: 0 0 calc((100% - (5 * 52px)) / 6);
	}
}

@media (max-width: 820px) {
	.aiz-logos--solutions {
		padding-bottom: 140px;
	}
}

/*
 * `justify-content: flex-start` above assumes the row overflows and needs
 * to start from its own left edge. That assumption breaks once AIZ trims
 * the marquee down to few enough logos that it no longer overflows (see the
 * pagination-dots history entry — `.aiz-carousel--idle` is toggled by the
 * same check that hides the dots): with nothing to scroll, the row was left
 * sitting flush left instead of centred. When idle, drop back to plain
 * centring — the same treatment the base (non-Solutions) `.aiz-logos__marquee`
 * already uses by default. `transform: none` here is a no-op now that the
 * base rule above no longer sets a transform at all (removed once the row
 * became a real paginated carousel — see that rule's own comment); kept so
 * this stays correct on its own even if a transform is ever reintroduced.
 */
.aiz-logos--solutions .aiz-logos__marquee.aiz-carousel--idle {
	justify-content: center;
	transform: none;
}

@media (max-width: 560px) {
	.aiz-logos--solutions {
		padding-bottom: 100px;
	}
}

/*
 * The reused `.aiz-logos__dot` is Over ons' bar shape (20x3, height-driven
 * active state). This export's own dots are 6px circles, widening rather than
 * growing taller when current — so both dimensions need a variant override.
 */
.aiz-logos--solutions .aiz-logos__pagination {
	height: 6px;
}

.aiz-logos--solutions .aiz-logos__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.aiz-logos--solutions .aiz-logos__dot[aria-current="true"] {
	width: 15px;
	height: 6px;
	border-radius: 8px;
}

/*
 * Testimonials, `--solutions` variant on the shared `.aiz-testimonials`
 * family. REUSE CHECK: grid mechanics, card radius/padding and box-shadow are
 * identical to home's, so only the background, padding, card min-height and
 * quote line-height are overridden here.
 */
.aiz-testimonials--solutions,
.aiz-testimonials--solutions-detail {
	position: relative;
	overflow: visible;
	padding: 90px 0 150px;
}

.aiz-testimonials--solutions {
	background: linear-gradient(90deg, var(--aiz-yellow) 0%, #8fb1d8 50%, var(--aiz-purple) 100%);
}

/* The detail page reuses the complete Solutions carousel component; only
   this page-specific gradient differs from the archive. */
.aiz-testimonials--solutions-detail {
	background: linear-gradient(90deg, #3e67ba 0%, var(--aiz-purple) 60%);
}

/* Use Home's exact two 81px testimonial seams. */
.aiz-testimonials--solutions::before,
.aiz-testimonials--solutions-detail::before,
.aiz-testimonials--solutions + .aiz-cta--solutions::before,
.aiz-testimonials--solutions-detail + .aiz-contact--solution::before {
	content: "";
	position: absolute;
	top: -80px;
	height: 81px;
	border-radius: 0;
	clip-path: path("M 0 81 C 18 81 34 70 38 56 C 42 48 42 37 46 29 C 54 11 66 0 85 0 H 2000 V 81 Z");
}

.aiz-testimonials--solutions::before,
.aiz-testimonials--solutions-detail::before {
	left: auto;
	right: 0;
	width: 75%;
	background: inherit;
	background-size: 133.3333% 100%;
	background-position: 100% 0;
}

.aiz-testimonials--solutions + .aiz-cta--solutions,
.aiz-testimonials--solutions-detail + .aiz-contact--solution {
	position: relative;
}

.aiz-testimonials--solutions + .aiz-cta--solutions::before,
.aiz-testimonials--solutions-detail + .aiz-contact--solution::before {
	left: 0;
	right: auto;
	width: 75%;
	background: inherit;
	transform: scaleX(-1);
}

.aiz-testimonials--solutions .aiz-page,
.aiz-testimonials--solutions .aiz-testimonials__title,
.aiz-testimonials--solutions-detail .aiz-page,
.aiz-testimonials--solutions-detail .aiz-testimonials__title {
	position: relative;
	z-index: 1;
}

/*
 * Monitor's own testimonials background — previously borrowed the unrelated
 * "Monitor — practice cards" component's class (`aiz-monitor-practice`) for
 * its gradient, gold quote colour, AND its top seam/wave — not just a colour
 * choice, so the first cut of this variant that left the seam out was
 * incomplete: the wave visibly disappeared once `aiz-monitor-practice` was
 * swapped out. Given its own `--monitor` modifier here instead, reproducing
 * `aiz-monitor-practice`'s `::before` seam exactly (same clip-path, same
 * 91px/-90px geometry, same gradient), so the real Practice-cards section
 * elsewhere on the page is never at risk of being touched by a
 * testimonials-carousel change, and so `--monitor` can join
 * `--solutions`/`--solutions-detail`/`--home` in the carousel-mechanics
 * selectors below. Same gradient stops `aiz-monitor-practice` already used
 * (`--aiz-yellow-dark` 0% → `--aiz-yellow` 61%) and the same gold quote
 * colour — visual match, without reusing the class itself. The bottom seam
 * (`aiz-monitor-practice::after`, navy, `bottom: -1px`, `scaleX(-1)`) is
 * reproduced too, unchanged from the original — it isn't specific to
 * whatever used to sit below Practice, it's simply Monitor's standing
 * "next section starts in navy" transition, the same shape mirrored.
 */
.aiz-testimonials--monitor {
	position: relative;
	z-index: 1;
	overflow: visible;
	padding: 90px 0 150px;
	background: linear-gradient(90deg, var(--aiz-yellow-dark) 0%, var(--aiz-yellow) 61%);
}

.aiz-testimonials--monitor::before,
.aiz-testimonials--monitor::after {
	content: "";
	position: absolute;
	height: 91px;
}

.aiz-testimonials--monitor::before {
	z-index: -1;
	top: -90px;
	right: 0;
	width: 75%;
	background-image: linear-gradient(90deg, var(--aiz-yellow-dark) 0%, var(--aiz-yellow) 61%);
	background-size: 133.3333% 100%;
	background-position: 100% 0;
	clip-path: path("M 0 91 C 15.9 91 30 78.7 33.5 62.9 C 37 53.9 37 41.6 40.6 32.6 C 47.6 12.3 58.2 0 75 0 H 2000 V 91 Z");
}

.aiz-testimonials--monitor::after {
	z-index: 2;
	left: 0;
	bottom: -1px;
	width: 75%;
	background: var(--aiz-navy);
	clip-path: path("M 0 91 C 15.9 91 30 78.7 33.5 62.9 C 37 53.9 37 41.6 40.6 32.6 C 47.6 12.3 58.2 0 75 0 H 2000 V 91 Z");
	transform: scaleX(-1);
	pointer-events: none;
}

.aiz-testimonials--monitor .aiz-page,
.aiz-testimonials--monitor .aiz-testimonials__title {
	position: relative;
	z-index: 1;
}

.aiz-testimonials--monitor .aiz-testimonials__item > p {
	color: var(--aiz-yellow);
}

/*
 * A real carousel, at the user's request — the export's own three cards fit
 * the grid with nothing left over, so the four decorative dots it drew had
 * nothing to page through ("testimonials don't slide"). `.aiz-testimonials__carousel`
 * (alongside the shared `__grid`) turns the row into a scrolling track at
 * every width, three cards visible at a time on desktop; five placeholder
 * items on both the archive and detail page give the dots below something
 * real to move between. One shared `initCarousel()` loop in aiz.js wires
 * every variant; only each section's background/typography differ (kept
 * scoped to `--solutions`/`--solutions-detail`/`--monitor` above and left as
 * Home's own defaults below) — `--home` and `--monitor` are listed alongside
 * `--solutions`/`--solutions-detail` here and at every breakpoint below
 * ONLY for the carousel mechanics (scrolling, item sizing, scroll-snap),
 * never for colour or type, so each page keeps its own look while gaining
 * the same working carousel.
 */
.aiz-testimonials--solutions .aiz-testimonials__carousel,
.aiz-testimonials--solutions-detail .aiz-testimonials__carousel,
.aiz-testimonials--home .aiz-testimonials__carousel,
.aiz-testimonials--monitor .aiz-testimonials__carousel {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 12px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.aiz-testimonials--solutions .aiz-testimonials__carousel::-webkit-scrollbar,
.aiz-testimonials--solutions-detail .aiz-testimonials__carousel::-webkit-scrollbar,
.aiz-testimonials--home .aiz-testimonials__carousel::-webkit-scrollbar,
.aiz-testimonials--monitor .aiz-testimonials__carousel::-webkit-scrollbar {
	display: none;
}

.aiz-testimonials--solutions .aiz-testimonials__item,
.aiz-testimonials--solutions-detail .aiz-testimonials__item,
.aiz-testimonials--home .aiz-testimonials__item,
.aiz-testimonials--monitor .aiz-testimonials__item {
	flex: 0 0 calc((100% - 64px) / 3);
	min-height: 320px;
	scroll-snap-align: start;
}

.aiz-testimonials--solutions .aiz-testimonials__item > p,
.aiz-testimonials--solutions-detail .aiz-testimonials__item > p {
	line-height: 1.125;
}

.aiz-testimonials--solutions .aiz-testimonials__source,
.aiz-testimonials--solutions-detail .aiz-testimonials__source {
	font-size: 18px;
}

.aiz-testimonials__pagination {
	position: relative;
	z-index: 1;
	margin-top: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
}

/* Real buttons; the UA button box has to be reset or the dots gain a border, a background and a font. */
.aiz-testimonials__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--aiz-white);
	opacity: .72;
	cursor: pointer;
	appearance: none;
}

.aiz-testimonials__dot[aria-current="true"] {
	width: 15px;
	border-radius: 8px;
	opacity: 1;
}

.aiz-testimonials__dot[aria-disabled="true"] {
	cursor: default;
}

@media (max-width: 1100px) {
	.aiz-testimonials--solutions .aiz-testimonials__item > p,
	.aiz-testimonials--solutions-detail .aiz-testimonials__item > p {
		font-size: 27px;
	}
}

@media (max-width: 820px) {
	.aiz-testimonials--solutions,
	.aiz-testimonials--solutions-detail {
		padding: 120px 0;
	}

	.aiz-testimonials--solutions .aiz-testimonials__item,
	.aiz-testimonials--solutions-detail .aiz-testimonials__item,
	.aiz-testimonials--home .aiz-testimonials__item,
	.aiz-testimonials--monitor .aiz-testimonials__item {
		flex: 0 0 min(84vw, 420px);
		scroll-snap-align: center;
	}
}

@media (max-width: 560px) {
	.aiz-testimonials--solutions,
	.aiz-testimonials--solutions-detail {
		padding: 90px 0;
	}

	.aiz-testimonials--solutions .aiz-testimonials__carousel,
	.aiz-testimonials--solutions-detail .aiz-testimonials__carousel,
	.aiz-testimonials--home .aiz-testimonials__carousel,
	.aiz-testimonials--monitor .aiz-testimonials__carousel {
		gap: 16px;
	}

	.aiz-testimonials--solutions .aiz-testimonials__item,
	.aiz-testimonials--solutions-detail .aiz-testimonials__item,
	.aiz-testimonials--home .aiz-testimonials__item,
	.aiz-testimonials--monitor .aiz-testimonials__item {
		flex-basis: 88vw;
		min-height: 300px;
		padding: 36px 24px 28px;
	}

	/* Quote font-size at this width stays each page's own (Home's 480px
	   breakpoint at 24px; Monitor's own quote colour/size are untouched
	   here too) rather than joining Solutions' 26px — Home and Monitor's
	   typography scales were deliberately left untouched by the
	   carousel-mechanics generalisation; only `--solutions`/
	   `--solutions-detail` get this. */
	.aiz-testimonials--solutions .aiz-testimonials__item > p,
	.aiz-testimonials--solutions-detail .aiz-testimonials__item > p {
		font-size: 26px;
	}
}

/* Closing CTA — .aiz-cta. Not the .aiz-contact family: there is no form here, just a statement and a mailto Button. */
.aiz-cta {
	padding: 200px 0;
	background: var(--aiz-navy);
}

.aiz-cta__panel {
	padding: 64px 104px;
	border-radius: 25px;
	color: var(--aiz-purple);
	background: rgba(100, 144, 232, .2);
}

.aiz-cta__panel h2 {
	margin-bottom: 32px;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
}

.aiz-cta__copy {
	max-width: 992px;
	font-size: 24px;
	line-height: 1.34;
	font-weight: 500;
}

.aiz-cta__copy p {
	margin: 0;
}

.aiz-cta__button .wp-block-button__link {
	margin-top: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding: 12px 16px;
	border: 0;
	border-radius: 2px 2px 16px 2px;
	color: var(--aiz-white);
	background: var(--aiz-purple);
	font-size: 24px;
	line-height: 1.34;
	font-weight: 500;
}

.aiz-cta__button .wp-block-button__link:hover {
	background: #4f7fde;
}

@media (max-width: 820px) {
	.aiz-cta {
		padding: 140px 0;
	}

	.aiz-cta__panel {
		padding: 56px 48px;
	}

	.aiz-cta__copy {
		font-size: 21px;
	}
}

@media (max-width: 560px) {
	.aiz-cta {
		padding: 100px 0;
	}

	.aiz-cta__panel {
		padding: 40px 24px;
		border-radius: 20px;
	}

	.aiz-cta__copy {
		font-size: 18px;
	}

	.aiz-cta__button .wp-block-button__link {
		font-size: 18px;
	}
}

/*
 * The export shares ONE heading rule across four sections — knowledge,
 * collaboration, the grid intro and the closing CTA (`.section-copy h2,
 * .collaboration-panel h2, .solutions-intro h2, .contact-panel h2`) —
 * including its two breakpoint steps (34px, then 30px). Reproduced here as
 * one shared rule across their four WordPress equivalents, placed after all
 * four base declarations above: an equal-specificity override earlier in the
 * file than the rule it overrides loses on source order regardless of the
 * media query, which is exactly what happened here on the first attempt.
 */
@media (max-width: 820px) {
	.aiz-split--solutions .aiz-split__copy h2,
	.aiz-collab__panel h2,
	.aiz-solutions__intro h2,
	.aiz-cta__panel h2 {
		font-size: 34px;
	}
}

@media (max-width: 560px) {
	.aiz-split--solutions .aiz-split__copy h2,
	.aiz-collab__panel h2,
	.aiz-solutions__intro h2,
	.aiz-cta__panel h2,
	.aiz-testimonials--solutions .aiz-testimonials__title,
	.aiz-testimonials--solutions-detail .aiz-testimonials__title {
		font-size: 30px;
	}
}

/* ===========================================================================
   Slimmer werken page
   ===========================================================================
   Four modules for the Slimmer werken Page: a hero with a full-width
   follow-up tier, a two-equal-column statement section, three fixed feature
   panels and a closing CTA card with an illustration. Unlike Solutions this
   route IS a Page (Decision — menu-pages plan), so all of it is editable at
   Pagina's → bewerken; there is no repeatable collection in this export, so
   every section is content-locked rather than extendable.

   The export's own container breaks at 1100/860/640, with a plain 24px/16px
   gutter (no extra width cap unlike Solutions' 820px step), so
   `.aiz-page--slimmer-werken` only ever changes the gutter variable.
   ========================================================================== */

.aiz-page--slimmer-werken {
	--aiz-page-gutter: 24px;
}

@media (max-width: 640px) {
	.aiz-page--slimmer-werken {
		--aiz-page-gutter: 16px;
	}
}

/*
 * Hero, `--slimmer-werken` variant.
 * REUSE CHECK: the grid (`minmax(0,688px) minmax(320px,481px)`, `gap:31px`)
 * matches hero-media/hero-solutions exactly. The h1 scale
 * (`clamp(48px,4.45vw,64px)`, line-height 1.094) is Over ons' own measured
 * scale, so it is reused on this variant's selector rather than re-measured.
 * The eyebrow is shared, unscoped, with hero-solutions.
 */
.aiz-hero--slimmer-werken {
	--aiz-slimmer-hero-top: 228px;
	--aiz-page-gutter: 24px;
	/* The photo drives the overlap: from the design at 481x703 the left band ends
	   147px above the photo's bottom (through the middle of its lower-left notch)
	   and the right band 61px above it. */
	--aiz-slimmer-photo: min(481px, 39vw);
	--aiz-slimmer-cut-left: calc(var(--aiz-slimmer-photo) * 147 / 481);
	--aiz-slimmer-cut-step: calc(var(--aiz-slimmer-photo) * 86 / 481);
	position: relative;
	overflow: hidden;
	padding-top: 228px;
}

.aiz-hero--slimmer-werken .aiz-hero__grid {
	position: relative;
	z-index: 0;
	grid-template-columns: minmax(0, 1fr) var(--aiz-slimmer-photo);
	gap: 0 31px;
	margin-bottom: var(--aiz-slimmer-cut-left);
}

/* The grid row ends on the left band's edge. The step sits behind the photo, just
   inside the right edge of its lower-left notch (page edge formula: see the
   clip-path note in docs/history/development-ledger-through-2026-09-14.md). */
.aiz-hero--slimmer-werken .aiz-hero__grid::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(-1 * var(--aiz-slimmer-hero-top));
	bottom: calc(-1 * var(--aiz-slimmer-cut-step));
	left: calc(50% - 50vw);
	width: 100vw;
	background: linear-gradient(90deg, var(--aiz-yellow), var(--aiz-teal));
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-slimmer-photo) * .75) 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-slimmer-photo) * .75) calc(100% - var(--aiz-slimmer-cut-step)),
		0 calc(100% - var(--aiz-slimmer-cut-step))
	);
	pointer-events: none;
}

.aiz-hero--slimmer-werken .aiz-hero__copy {
	padding-bottom: 32px;
}

.aiz-hero--slimmer-werken .aiz-hero__copy h1 {
	max-width: 700px;
	margin-bottom: 0;
	font-size: clamp(48px, 4.45vw, 64px);
	line-height: 1.094;
}

/* The export sets a tighter line-height (1.1) on this eyebrow than the shared rule's inherited default (~1.5); Solutions' own export doesn't override it, so this stays scoped here. */
.aiz-hero--slimmer-werken .aiz-hero__eyebrow {
	line-height: 1.1;
}

.aiz-hero__intro-copy {
	margin-top: 32px;
	font-size: 24px;
	line-height: 1.333;
	font-weight: 500;
}

.aiz-hero__intro-copy p {
	margin: 0;
}

.aiz-hero--slimmer-werken .aiz-hero__copy .wp-block-buttons {
	margin-top: 4px;
	transform: translateY(20px);
}

.aiz-hero--slimmer-werken .aiz-hero__copy .aiz-slimmer-werken-hero-links {
	gap: 16px;
	margin-top: 28px;
	transform: none;
}

/* All three buttons fit one row once the copy column reaches its full 688px. */
@media (min-width: 1248px) {
	.aiz-hero--slimmer-werken .aiz-hero__copy .aiz-slimmer-werken-hero-links {
		flex-wrap: nowrap;
		gap: 8px;
	}
}

/*
 * `max-width`, not `width`: the export's fixed size lives on the <img> itself,
 * which inherits a global `max-width:100%` reset, so it shrinks with the grid
 * track. This wrapper figure has no such reset, so a hard `width:481px` would
 * floor the track's min-content size and defeat the 860px breakpoint's
 * `.65fr` column (see the CSS Grid min-content note elsewhere in this file).
 */
.aiz-hero--slimmer-werken .aiz-hero__visual {
	align-self: end;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 481 / 703;
	margin: 0 0 calc(-1 * var(--aiz-slimmer-cut-left));
	overflow: visible;
	border-radius: 0;
}

.aiz-hero--slimmer-werken .aiz-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aiz-hero--slimmer-werken .aiz-hero__followup {
	padding-top: 123px;
}

.aiz-hero__followup {
	max-width: var(--aiz-page);
	padding-top: 175px;
	padding-bottom: 2px;
}

.aiz-hero__followup p {
	max-width: 688px;
	margin: 0 0 24px;
	font-size: 24px;
	line-height: 1.333;
}

@media (max-width: 1100px) {
	.aiz-hero--slimmer-werken {
		--aiz-slimmer-photo: max(300px, 39vw);
	}
}

@media (max-width: 860px) {
	.aiz-hero--slimmer-werken {
		--aiz-slimmer-hero-top: 180px;
		--aiz-slimmer-photo: 36vw;
		padding-top: 180px;
	}

	.aiz-hero--slimmer-werken .aiz-hero__grid {
		gap: 0 24px;
	}

	.aiz-hero--slimmer-werken .aiz-hero__copy h1 {
		font-size: clamp(44px, 7vw, 57.6px);
	}

	.aiz-hero__intro-copy {
		font-size: 20px;
		line-height: 1.4;
	}

	.aiz-hero__followup {
		padding-top: 130px;
	}

	.aiz-hero--slimmer-werken .aiz-hero__followup {
		padding-top: 96px;
	}
}

@media (max-width: 640px) {
	.aiz-hero--slimmer-werken {
		--aiz-slimmer-hero-top: 155px;
		--aiz-page-gutter: 16px;
		--aiz-slimmer-photo: calc(100vw - 32px);
		padding-top: 155px;
	}

	.aiz-hero--slimmer-werken .aiz-hero__grid {
		display: flex;
		flex-direction: column;
	}

	/* Stacked: no step, the band still ends in the photo's notch. */
	.aiz-hero--slimmer-werken .aiz-hero__grid::before {
		bottom: 0;
		clip-path: none;
	}

	.aiz-hero--slimmer-werken .aiz-hero__copy {
		padding-bottom: 0;
	}

	.aiz-hero--slimmer-werken .aiz-hero__copy h1 {
		font-size: clamp(37.6px, 11vw, 48px);
		line-height: 1.05;
	}

	.aiz-hero__intro-copy {
		margin-top: 24px;
		font-size: 18px;
	}

	.aiz-hero--slimmer-werken .aiz-hero__visual {
		margin-top: 40px;
	}

	.aiz-hero__followup {
		padding-top: 115px;
	}

	.aiz-hero--slimmer-werken .aiz-hero__followup {
		padding-top: 64px;
	}

	.aiz-hero__followup p {
		font-size: 20px;
		line-height: 1.4;
	}
}

/*
 * Statement + text — .aiz-sw-statement. NOT `.aiz-split`: that primitive is
 * an asymmetric 584px/481px copy-beside-image grid, this is two EQUAL
 * columns of running text with no image.
 */
/*
 * Unlike every other section, the export puts `page-container` directly on
 * `.split-section` itself rather than on a separate inner div — so the width
 * cap lives here too, instead of on a nested `.aiz-page`, to keep this
 * section's own box (the one the fidelity harness measures) the same size
 * as the export's combined element.
 */
.aiz-sw-statement {
	width: min(1200px, calc(100% - 48px));
	margin-inline: auto;
	padding-block: 200px;
}

@media (max-width: 640px) {
	.aiz-sw-statement {
		width: calc(100% - 32px);
	}
}

.aiz-sw-statement__layout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.aiz-sw-statement__lead {
	margin: 0;
	color: var(--aiz-teal);
	font-size: clamp(36px, 3.35vw, 48px);
	line-height: 1.167;
	font-weight: 400;
}

.aiz-sw-statement__copy h2 {
	margin-bottom: 24px;
	color: var(--aiz-teal);
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
}

.aiz-sw-statement__copy h3 {
	margin-top: 48px;
	margin-bottom: 0;
	color: var(--aiz-teal);
	font-size: 20px;
	line-height: 1.2;
}

.aiz-sw-statement__copy p {
	margin-bottom: 24px;
}

@media (max-width: 860px) {
	.aiz-sw-statement {
		padding-block: 130px;
	}
}

@media (max-width: 640px) {
	.aiz-sw-statement {
		padding-block: 100px;
	}

	.aiz-sw-statement__layout {
		grid-template-columns: 1fr;
	}

	.aiz-sw-statement__lead {
		font-size: 34px;
		line-height: 1.15;
	}

	.aiz-sw-statement__copy h2 {
		font-size: 32px;
	}
}

/*
 * Feature panels — .aiz-sw-feature. Three fixed narrative sections, alternating
 * background, each its own locked top-level Group (see
 * feature-panels-slimmer-werken.php for why they are not one collection).
 */
.aiz-sw-feature {
	padding: 120px 0;
	background: var(--aiz-navy);
}

.aiz-sw-feature--dark {
	background: var(--aiz-charcoal);
}

.aiz-sw-feature__layout {
	width: min(992px, calc(100% - 48px));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
}

.aiz-sw-feature__layout > * {
	margin: 0;
}

.aiz-sw-feature__layout h2 {
	margin-bottom: 24px;
	color: var(--aiz-teal);
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
}

.aiz-sw-feature__layout > div p {
	margin-bottom: 0;
}

.aiz-sw-feature__layout > div p + p {
	margin-top: 0;
}

.aiz-sw-feature__statement {
	color: var(--aiz-teal);
	font-size: clamp(36px, 3.35vw, 48px);
	line-height: 1.167;
	font-weight: 400;
}

.aiz-sw-feature__layout .wp-block-buttons {
	margin-top: 48px;
}

.aiz-sw-feature__layout .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 12px 16px;
	border: 0;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-teal);
	color: var(--aiz-white);
	font-weight: 500;
	line-height: normal;
}

.aiz-sw-feature__layout .wp-block-button__link:hover {
	background: #23766c;
}

/* The export marks this arrow aria-hidden, so it is decoration, not content, matching the hero buttons' convention. */
.aiz-sw-feature__layout .wp-block-button__link::after {
	content: "→";
}

@media (max-width: 640px) {
	.aiz-sw-feature {
		padding: 90px 0;
	}

	.aiz-sw-feature__layout {
		width: calc(100% - 32px);
		gap: 36px;
	}

	.aiz-sw-feature__layout h2 {
		font-size: 32px;
	}
}

/*
 * Closing CTA — `.aiz-cta--slimmer-werken`. Shares the `.aiz-cta` family name
 * with Solutions' closing panel but not its geometry (a two-column card with
 * an illustration and a gradient, against a single flat panel), so it gets
 * its own child classes rather than forcing Solutions' `__panel`/`__copy`.
 */
/* Same reason as .aiz-sw-statement above: the export puts `page-container` directly on `.contact-section`, so the width cap has to live on this element too. */
.aiz-cta--slimmer-werken {
	width: min(1200px, calc(100% - 48px));
	margin-inline: auto;
	padding: 130px 0 180px;
	background: var(--aiz-navy);
}

@media (max-width: 640px) {
	.aiz-cta--slimmer-werken {
		width: calc(100% - 32px);
	}
}

.aiz-cta__card {
	height: 620px;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 585px) minmax(260px, 374px);
	justify-content: space-between;
	overflow: visible;
	padding: 64px 103px 0;
	border-radius: 25px;
	background: linear-gradient(90deg, var(--aiz-yellow), var(--aiz-teal));
}

.aiz-cta__card-copy h2 {
	margin-bottom: 32px;
	color: var(--aiz-white);
	font-size: clamp(48px, 4.45vw, 64px);
	line-height: 1.094;
	font-weight: 600;
}

.aiz-cta__card-copy p {
	margin: 0 0 24px;
	color: var(--aiz-white);
	font-size: 24px;
	line-height: 1.333;
	font-weight: 500;
}

.aiz-cta__card-copy p.aiz-cta__card-highlight {
	font-size: 32px;
	line-height: 1.125;
	font-weight: 600;
}

.aiz-cta__card-copy .wp-block-buttons {
	margin-top: 0;
}

.aiz-cta__card-copy .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 12px 16px;
	border: 0;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-teal);
	color: var(--aiz-white);
	font-weight: 500;
	line-height: normal;
}

/* The export marks this arrow aria-hidden, so it is decoration, not content, matching the hero buttons' convention. */
.aiz-cta__card-copy .wp-block-button__link::after {
	content: "→";
}

.aiz-cta__card-image {
	align-self: end;
	width: 100%;
	max-width: 374px;
	height: 624px;
	margin: 0;
}

.aiz-cta__card-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 1100px) {
	.aiz-cta__card {
		padding-inline: 64px;
	}
}

@media (max-width: 860px) {
	.aiz-cta__card {
		grid-template-columns: 1fr .65fr;
		padding-inline: 48px 0;
	}

	/*
	 * A grid track's implicit minimum is its content's min-content size, so
	 * the image's own explicit 374px width would otherwise floor this column
	 * at 374px regardless of the 1fr/.65fr ratio. The export gets the same
	 * narrower column by letting the now-oversized image overflow it and
	 * clip against `.aiz-cta__card`'s own `overflow:hidden`.
	 */
	.aiz-cta__card-image {
		min-width: 0;
	}
}

@media (max-width: 640px) {
	.aiz-cta--slimmer-werken {
		padding-block: 80px 100px;
	}

	.aiz-cta__card {
		height: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		padding: 40px 28px 0;
	}

	.aiz-cta__card-copy h2 {
		font-size: 42px;
	}

	.aiz-cta__card-copy p {
		font-size: 20px;
	}

	.aiz-cta__card-copy p.aiz-cta__card-highlight {
		font-size: 27px;
	}

	.aiz-cta__card-image {
		width: min(75%, 300px);
		height: auto;
		margin: 32px auto 0;
	}
}

/* ===========================================================================
   Slimmer werken — subpagina (child page, page-slimmer-werken-subpage.php)

   Page-scoped: every selector below is prefixed `.aiz-hero--slimmer-werken-sub`
   or `.aiz-sw-sub-*`, distinct from the PARENT page's `.aiz-hero--slimmer-werken`
   / `.aiz-sw-feature` / `.aiz-cta--slimmer-werken` families, so nothing here
   can regress `/slimmer-werken/`. Breakpoints are the plan's own for this
   route (1100/780/480), not the export's (1280/1023/900/600/380) — first
   draft, not yet checked against the fidelity harness (see CLAUDE.md).

   The two statement sections ("Complexe opgaven…", "Werken vanuit een
   gedeeld beeld") reuse `.aiz-sw-statement` from the parent page's own CSS
   above verbatim — no new rule needed, so they are not repeated here.
   ========================================================================== */

/*
 * Hero, `--slimmer-werken-sub` variant. Started as the SAME technique as the
 * parent's own `.aiz-hero--slimmer-werken` (a `::before` gradient band with
 * a `clip-path` step behind the taller photo column) but that step is a
 * fixed percentage, which only lines up with the image at one exact
 * viewport width — wrong everywhere else once `.aiz-hero__grid`'s own
 * columns turn `fr`-based (1100-780px range) and resize continuously.
 * Replaced with `::before` as a plain rectangle (the short/text-side
 * height only) plus a real grid item, `.aiz-hero__band-extend`, placed in
 * the image's own grid column so its width tracks the image column exactly
 * at any width — see that rule below for the detail. Colours are this
 * page's own (teal, not yellow/teal), taken from the corrected PNG's hero
 * gradient, not re-guessed.
 */
.aiz-hero--slimmer-werken-sub {
	position: relative;
	overflow: hidden;
	padding-top: 228px;
}

/*
 * Desktop base grid: side-by-side copy/visual, per the export's own
 * `.hero__inner` (`grid-template-columns: minmax(0, 688fr) minmax(0, 481fr);
 * gap: 2rem;`). This was missing here (only the 1100/780/480 breakpoint
 * overrides existed below), so the visual fell through to the shared
 * `.aiz-hero__grid { display:grid; align-items:start; }` base with no
 * `grid-template-columns` at all — a single implicit column, which stacked
 * the image under the copy instead of beside it.
 */
.aiz-hero--slimmer-werken-sub .aiz-hero__grid {
	z-index: 1;
	grid-template-columns: minmax(0, 688px) minmax(320px, 481px);
	gap: 32px;
}

/* Copy column: export's `.hero__content` (flex column, 32px gap, 32px bottom padding). */
.aiz-hero--slimmer-werken-sub .aiz-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding-bottom: 32px;
}

/* Export's `.tag`: an outlined pill, not the shared uppercase/letter-spaced eyebrow text. */
.aiz-hero--slimmer-werken-sub .aiz-hero__eyebrow {
	margin: 0;
	padding: 10px 16px;
	border: 1px solid var(--aiz-white);
	border-radius: 50px;
	font-size: 14px;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
}

/*
 * Export's `.hero__title`: `font-size: var(--size-h1)` = clamp(2.25rem,
 * 1.05rem + 3.8vw, 4rem) (36px → 64px), weight 600, line-height 1.1. The
 * flex gap above is 32px; the export pulls the title 24px closer
 * (`margin-top: -1.5rem`) so the effective tag-to-title gap is 8px, matching
 * Figma.
 */
.aiz-hero--slimmer-werken-sub .aiz-hero__copy h1 {
	margin: -24px 0 0;
	max-width: 688px;
	font-size: clamp(36px, 1.05rem + 3.8vw, 64px);
	line-height: 1.1;
	text-wrap: balance;
}

/* Export's `.hero__intro`: grid with 32px gap between the two paragraphs, clamp(18px, …, 24px), 1.34 line-height, 46ch measure. */
.aiz-hero--slimmer-werken-sub .aiz-hero__intro-copy {
	display: grid;
	gap: 32px;
	margin-top: 0;
	max-width: 46ch;
	font-size: clamp(18px, 1.03rem + 0.3vw, 24px);
	line-height: 1.34;
}

/*
 * Fresh pixel scan of `Correct_design/PNG/Slimmer werken - subpagina@2x.png`
 * (scanning every ~20px column across the FULL page width, not just under
 * the text): the teal/navy boundary sits at 814.5px from y=0 across the
 * ENTIRE page — left gutter, text column, gap, AND the image column all
 * read 814.5px — except a narrow strip starting exactly at `.aiz-page`'s
 * own right edge and running to the section's true right edge, which
 * reads 903.5px. So the "taller" segment is not behind the image at all;
 * it is `.aiz-page`'s own right-hand gutter.
 *
 * The step's x position is NOT `calc(100% - var(--aiz-page-gutter))` — see
 * `.aiz-hero--media`'s own identical rule elsewhere in this file for why
 * that only matches `.aiz-page`'s real right edge below ~1440px:
 * `max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2)` reconstructs
 * `.aiz-page`'s real gutter (`width: min(100% - 2*gutter, var(--aiz-page))`)
 * at any viewport width, so the step tracks `.aiz-page`'s edge exactly
 * instead of drifting past ~1440px.
 */
.aiz-hero--slimmer-werken-sub::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0 0 auto;
	height: 903.5px;
	background: linear-gradient(90deg, #1c6056, var(--aiz-teal));
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2)) 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2)) 90.15%,
		0 90.15%
	);
}

/*
 * Shape traced directly from `Correct_design/SVG/Slimmer werken -
 * subpagina.svg` (the path filled by `pattern0_607_2498`, the hero photo's
 * own pattern fill) — a 481x752 rounded rect (16px corners) with a rounded
 * rectangular notch bitten out of the left edge (72px deep, spanning
 * y 545.7-626.7px of the 752px box) so the teal band shows through. Applied
 * as a CSS mask (same technique as this file's icon masks) rather than a
 * `clip-path: polygon(...)` approximation, so the corners stay genuinely
 * round instead of faceted.
 */
.aiz-hero--slimmer-werken-sub .aiz-hero__visual {
	width: 100%;
	max-width: 481px;
	height: 752px;
	margin: 0;
	-webkit-mask: url(../images/mask-slimmer-werken-sub-hero.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-slimmer-werken-sub-hero.svg) no-repeat center / 100% 100%;
}

.aiz-hero--slimmer-werken-sub .aiz-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-hero--slimmer-werken-sub .aiz-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
	}
}

@media (max-width: 780px) {
	.aiz-hero--slimmer-werken-sub {
		padding-top: 180px;
	}

	/*
	 * Reported 2026-09-05: the former side-by-side layout at this
	 * breakpoint (`grid-template-columns: 1fr .65fr`, copy and image
	 * sharing one row) let the COPY column's own rendered height exceed
	 * this band's fixed height well before the image did. Live-measured
	 * against real (non-Lorem-length-locked) editable copy: with
	 * `height: 560px` the "Lees meer"-style button's own bottom edge
	 * landed anywhere from ~600px (this breakpoint's own upper edge,
	 * 780px viewport) to ~680px (mid-range, e.g. 780px-wide viewport
	 * itself) below this section's top — i.e. 40-120px BELOW the
	 * green/teal band, on the dark navy section instead of on the
	 * gradient. A fixed height tuned for one guessed text length cannot
	 * track arbitrary editable copy at a two-column width this narrow.
	 *
	 * Fixed by switching to the SAME stacked layout already used below
	 * 480px (image below the copy, not beside it) instead of tuning yet
	 * another fixed height for what is fundamentally a two-column
	 * problem. Stacked, the copy column is the band's only height
	 * driver — the image is free to bleed onto the dark section below,
	 * same as it already does at every other width (see its own rule
	 * below and the base rule's image-mask notch) — so one generous
	 * fixed height comfortably covers it. Live-measured button-bottom
	 * across this stacked range: ~573px at 481px wide, up to ~602px at
	 * 780px wide (wider copy column, and `h1`'s own `clamp()` renders
	 * larger at 780px than at 481px). `height: 660px` keeps a 60-90px
	 * margin across the whole range.
	 *
	 * Clip-path reuses the exact shape already shipped for the ≤480px
	 * stacked rule below verbatim (same background transition behind
	 * the image, just re-sized for this band's own, taller height).
	 */
	/*
	 * Reported 2026-09-05 (fifth pass): simplified further, per direct
	 * request — no step at all in the stacked layout. Just one flat green
	 * band covering the full width, running down to right below the
	 * image, then the dark section starts. The earlier flat-step version
	 * (fourth pass) was a faithful match for the *desktop* (side-by-side)
	 * hero's own technique, but the user decided that distinction isn't
	 * worth carrying into the stacked layout — simpler to just keep the
	 * whole band green until the image clears it.
	 *
	 * `clip-path: none` resets the diagonal shape the base (non-media) rule
	 * declares — cascade doesn't clear a property just because a more
	 * specific rule stops mentioning it, so leaving this out left the
	 * desktop rule's own clip-path still applying here (caught live: the
	 * computed style still showed the base rule's diagonal after the first
	 * attempt at this pass). With it explicitly reset, `height` alone
	 * decides where the plain rectangle ends. Live-measured image-bottom
	 * across this breakpoint's own range (481-780px): 1161.65px (481) /
	 * 1171.4px (600) / 1181.8px (700) / 1190.16px (780) — `height: 1215px`
	 * clears the worst case (780px) with ~25px to spare, same margin style
	 * used throughout this file.
	 */
	.aiz-hero--slimmer-werken-sub::before {
		height: 1215px;
		clip-path: none;
	}

	.aiz-hero--slimmer-werken-sub .aiz-hero__grid {
		display: flex;
		flex-direction: column;
	}

	/*
	 * `aspect-ratio` is load-bearing here, not decoration: with only
	 * `width` set and `height: auto`, a `<figure>` has no intrinsic size of
	 * its own, so the browser falls back to the *photo's own* raw aspect
	 * ratio (this hero's source JPG is 1534x1917, ratio ~1.25) instead of
	 * the mask SVG's designed 481x752 (~1.564) box. That silently
	 * shortened and squashed the mask onto the wrong-shaped box, distorting
	 * the rounded corners and the notch cutout traced from
	 * `Correct_design/SVG` (see the base rule's own comment on
	 * `mask-slimmer-werken-sub-hero.svg`). Explicit `aspect-ratio: 481/752`
	 * forces the correct box shape regardless of which photo ends up in
	 * this slot.
	 */
	.aiz-hero--slimmer-werken-sub .aiz-hero__visual {
		width: min(74vw, 320px);
		height: auto;
		aspect-ratio: 481 / 752;
		margin: 24px auto 0;
	}
}

@media (max-width: 480px) {
	.aiz-hero--slimmer-werken-sub {
		padding-top: 155px;
	}

	/*
	 * Same simplification as the ≤780px rule above (2026-09-05, fifth
	 * pass): no step, just a flat green band down to right below the
	 * image. `clip-path: none` resets the diagonal the base (non-media)
	 * rule declares — the cascade keeps a property applying once a more
	 * specific rule stops mentioning it, so this needs to be explicit, not
	 * just omitted (caught live: the computed style still showed the base
	 * rule's diagonal here until this was added). With it reset, `height`
	 * alone decides where the plain rectangle ends. Re-measured for this
	 * narrower range, checked down to 320px wide (not just this project's
	 * usual 390px floor), since the image shrinks below its 320px cap
	 * somewhere in here.
	 *
	 * Live-measured image-bottom across 320-480px: 1134.0px (320) /
	 * 1134.1px (375) / 1136.65px (480) — all comfortably inside the
	 * existing `height: 1165px`, so this rule's height is unchanged from
	 * the fourth pass.
	 */
	.aiz-hero--slimmer-werken-sub::before {
		height: 1165px;
		clip-path: none;
	}
}

/*
 * "Waar verdient een regio…" — full-bleed photo beside running text,
 * .aiz-sw-sub-media. NOT `.aiz-split`: that primitive is a boxed
 * 584px/481px pair with a rounded image; this one runs the image edge to
 * edge against the container's own left edge, matching the export's own
 * `.media-section` shape.
 */
.aiz-sw-sub-media {
	display: grid;
	grid-template-columns: minmax(0, 598px) minmax(0, 1fr);
	gap: 96px;
	align-items: center;
	background: var(--aiz-charcoal);
	padding-right: var(--aiz-page-gutter);
}

.aiz-sw-sub-media__image {
	align-self: stretch;
	margin: 0;
	min-height: 480px;
}

.aiz-sw-sub-media__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aiz-sw-sub-media__body {
	width: 100%;
	max-width: 760px;
	min-width: 0;
	padding-block: 120px;
}

.aiz-sw-sub-media__body > * + * {
	margin-top: 32px;
}

.aiz-sw-sub-media__intro h2 {
	margin-bottom: 24px;
	color: var(--aiz-teal);
	font-size: clamp(28px, 2.3vw, 36px);
	line-height: 1.1;
	font-weight: 600;
	text-wrap: balance;
}

.aiz-sw-sub-media__statement {
	margin: 0;
	color: var(--aiz-teal);
	max-width: 32ch;
	font-size: clamp(28px, 2.3vw, 36px);
	line-height: 1.25;
	font-weight: 400;
	text-wrap: balance;
}

.aiz-sw-sub-media__intro p,
.aiz-sw-sub-media__text p {
	max-width: 68ch;
}

.aiz-sw-sub-media__text p {
	margin-bottom: 24px;
}

.aiz-sw-sub-media__text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1100px) {
	.aiz-sw-sub-media {
		grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
		gap: 48px;
	}
}

@media (max-width: 780px) {
	.aiz-sw-sub-media {
		grid-template-columns: minmax(0, 1fr);
		padding-right: 0;
	}

	.aiz-sw-sub-media__image {
		min-height: 320px;
	}

	.aiz-sw-sub-media__body {
		padding: 64px var(--aiz-page-gutter);
	}
}

@media (max-width: 480px) {
	.aiz-sw-sub-media__intro h2 {
		font-size: 32px;
	}

	.aiz-sw-sub-media__statement {
		font-size: 30px;
	}
}

/*
 * "Samen leren, ontwikkelen en vernieuwen" — copy beside a topic-card
 * carousel, `.aiz-sw-sub-learn`. The carousel's SCROLL container
 * (`.aiz-sw-sub-carousel__track`) is native `overflow-x: auto` — the
 * no-JavaScript fallback the plan requires — with prev/next buttons as a
 * pointer/keyboard enhancement wired by `initScrollCarousel()` in aiz.js,
 * generalised from the same disabled-state-at-both-ends idea as the
 * Solutions results carousel (`resultsCarousel` in aiz.js), not copy-pasted
 * from it: that carousel has no native-scroll fallback at all (its track is
 * `overflow: hidden` and only ever moves via `transform`), which is exactly
 * what this page's acceptance criteria rule out.
 */
.aiz-sw-sub-learn {
	background: var(--aiz-charcoal);
	padding-block: 200px;
	overflow: hidden;
}

.aiz-sw-sub-learn__grid {
	display: grid;
	grid-template-columns: minmax(0, 584px) minmax(0, 1fr);
	gap: 96px;
	align-items: stretch;
}

.aiz-sw-sub-learn__body {
	display: grid;
	gap: 32px;
	align-content: start;
}

.aiz-sw-sub-learn__title {
	color: var(--aiz-white);
	font-size: 48px;
	line-height: 1.07;
	font-weight: 600;
}

.aiz-sw-sub-learn__body ul {
	margin: 0;
	padding-left: 24px;
	list-style: disc;
	display: grid;
	gap: 4px;
}

.aiz-sw-sub-carousel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.aiz-sw-sub-carousel__track {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.aiz-sw-sub-carousel__track::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.aiz-sw-sub-carousel__track {
		scroll-behavior: auto;
	}
}

.aiz-sw-sub-carousel__items {
	display: flex;
	gap: 32px;
}

.aiz-sw-sub-topic-card {
	flex: 0 0 378px;
	max-width: 100%;
	min-height: 494px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding: 64px 32px 48px;
	background: rgba(44, 143, 130, .2);
	border-radius: 2px;
	scroll-snap-align: start;
}

/*
 * `overflow-wrap: anywhere` (same technique already used for
 * `.aiz-datawarehouse-split__copy h2` elsewhere in this file) — without
 * it, an unbreakable compound word ("Domeinoverstijgend") forces the
 * whole card wider than its `flex-basis` at narrow viewports, since
 * `flex-shrink: 0` (from this card's own `flex: 0 0 378px`) won't shrink
 * it below its own min-content width. Caught live at 320px wide: the
 * "Domeinoverstijgend samenwerken" card rendered 338px — wider than the
 * 320px viewport itself, so no scroll position could bring its full
 * width on-screen at once.
 */
.aiz-sw-sub-topic-card h3,
.aiz-sw-sub-topic-card p {
	margin: 0;
	color: var(--aiz-teal);
	overflow-wrap: anywhere;
}

.aiz-sw-sub-topic-card h3 {
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
}

.aiz-sw-sub-topic-card p {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
}

.aiz-sw-sub-carousel__controls {
	display: flex;
	gap: 28px;
}

.aiz-sw-sub-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--aiz-teal);
	font-size: 18px;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.aiz-sw-sub-carousel__button:hover {
	background: rgba(44, 143, 130, .2);
}

.aiz-sw-sub-carousel__button[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
}

.aiz-sw-sub-carousel__button[aria-disabled="true"]:hover {
	background: transparent;
}

@media (max-width: 1100px) {
	.aiz-sw-sub-learn__grid {
		gap: 48px;
	}

	.aiz-sw-sub-topic-card {
		flex-basis: 320px;
	}
}

@media (max-width: 780px) {
	.aiz-sw-sub-learn {
		padding-block: 130px;
	}

	.aiz-sw-sub-learn__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.aiz-sw-sub-learn__title {
		font-size: 40px;
	}
}

@media (max-width: 480px) {
	.aiz-sw-sub-learn {
		padding-block: 96px;
	}

	.aiz-sw-sub-learn__title {
		font-size: 32px;
	}

	/*
	 * Reported 2026-09-05: cards rendered ~1050px wide even at a 320px
	 * viewport, running the text far off-screen with no way to see it —
	 * `flex-basis: 85%` was resolving against the flex item's own
	 * indefinite/content-sized ancestor (`.aiz-sw-sub-carousel__items`,
	 * a child of the `overflow-x: auto` track, so it has no definite
	 * width of its own to be a percentage of), not the viewport. Every
	 * other carousel in this file already avoids this exact trap with a
	 * viewport-relative `calc(100vw - Npx)` instead of a bare `%`
	 * (`.aiz-monitor-working__card`, `.aiz-solution-detail__result-card`)
	 * — this rule was the one outlier. `calc(100vw - 48px)` matches this
	 * breakpoint's usual page-gutter convention and reproduces the same
	 * numeric result the `85%` was aiming for at this breakpoint's upper
	 * edge (480px: 85% of 320 = 272px = 480px - 2*24px page-gutter... the
	 * coincidence doesn't hold at every width, but the intent — leave a
	 * sliver of the next card peeking in — does, and this way it actually
	 * resolves against something definite).
	 */
	.aiz-sw-sub-topic-card {
		flex-basis: calc(100vw - 48px);
		min-height: 420px;
		padding: 40px 24px 32px;
	}

	.aiz-sw-sub-topic-card h3 {
		font-size: 32px;
	}
}

/*
 * "Van overleg naar gezamenlijke impact" — teal card, image bleeding to the
 * card's own edge. `.aiz-sw-sub-impact`.
 */
.aiz-sw-sub-impact {
	/*
	 * Top-only padding, not padding-block: pixel-measured on the PNG (x=1440
	 * column scan) — the navy gap between the carousel section's charcoal
	 * background and the card's teal gradient top edge is 400px@2x = 200px,
	 * not 100. The gap AFTER the card (to the CTA card's tinted top edge) is
	 * also exactly 200px and is fully accounted for by `.aiz-sw-sub-cta`'s own
	 * 200px top padding below — matching the export's own
	 * `.impact-section { padding-top: var(--section-space) }`, which likewise
	 * sets no padding-bottom at all.
	 */
	padding-top: 200px;
	padding-bottom: 0;
}

.aiz-sw-sub-impact__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 482px);
	align-items: stretch;
	gap: 32px;
	background: linear-gradient(90deg, #1c6056, var(--aiz-teal));
	border-radius: 8px;
	overflow: hidden;
}

.aiz-sw-sub-impact__body {
	display: grid;
	gap: 32px;
	align-content: center;
	padding: 120px 0 120px 103px;
	color: var(--aiz-white);
}

.aiz-sw-sub-impact__body h2 {
	margin: 0;
	/*
	 * Was missing entirely (rendered at the UA default h2 size). The export's
	 * markup uses the plain `.section-title` class here (not `--lg`), the same
	 * one `.aiz-sw-statement__copy h2` and `.aiz-sw-sub-media__intro h2` already
	 * fix at a flat 40px/600/1.1 — confirmed against this PNG too (glyph bbox
	 * of the two heading lines is 76px@2x = 38px, i.e. ~0.95 x 40px, the same
	 * ascent+descent ratio the other 40px headings on this page measure at).
	 */
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
}

.aiz-sw-sub-impact__statement {
	margin: 0;
	/*
	 * Was using the CTA accent's smaller clamp (22-32px/600/1.13) by mistake.
	 * This is the page's "lead/statement" style instead — same clamp already
	 * established for `.aiz-sw-statement__lead` and `.aiz-sw-sub-media__statement`
	 * above, confirmed against this section's own PNG glyph measurement (see
	 * comment on the h2 rule above for the method): 45.5px measured, ~48px
	 * actual, matching this clamp's max at the 1440px reference width.
	 */
	font-size: clamp(36px, 3.35vw, 48px);
	font-weight: 400;
	line-height: 1.167;
}

.aiz-sw-sub-impact__body p:not(.aiz-sw-sub-impact__statement) {
	margin: 0;
	max-width: 62ch;
}

.aiz-sw-sub-impact__image {
	align-self: stretch;
	margin: 0;
	min-height: 360px;
}

.aiz-sw-sub-impact__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-sw-sub-impact__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
	}

	.aiz-sw-sub-impact__body {
		/* 64px, not 56 — matches the export's own 1280px breakpoint rule
		   (`.impact-card__body { padding: 80px 0 80px 64px }`). */
		padding: 80px 0 80px 64px;
	}
}

@media (max-width: 780px) {
	.aiz-sw-sub-impact {
		/* Top-only, matching the base rule's fix above. */
		padding-top: 64px;
		padding-bottom: 0;
	}

	.aiz-sw-sub-impact__card {
		grid-template-columns: minmax(0, 1fr);
		/* No inter-column gap once stacked — matches the export's matching
		   1023px breakpoint (`.impact-card { ...; gap: 0 }`). */
		gap: 0;
	}

	.aiz-sw-sub-impact__body {
		/* 56px top / 64px bottom, not symmetric — matches the export's own
		   1023px breakpoint (`.impact-card__body { padding: 56px var(--gutter) 64px }`). */
		padding: 56px var(--aiz-page-gutter) 64px;
	}

	.aiz-sw-sub-impact__image {
		min-height: 280px;
	}
}

@media (max-width: 480px) {
	.aiz-sw-sub-impact__body {
		padding: 40px 20px;
	}
}

/*
 * Closing contact CTA — `.aiz-sw-sub-cta`. A single tinted, rounded panel
 * with no illustration, unlike the parent page's `.aiz-cta--slimmer-werken`
 * (copy beside an image) — its own module rather than a forced variant.
 */
.aiz-sw-sub-cta {
	padding-block: 200px;
}

.aiz-sw-sub-cta__card {
	display: grid;
	gap: 32px;
	justify-items: start;
	/*
	 * No `max-width` (was 992px) and left padding raised from 32 to 103px,
	 * per the user's own design read: the card's tinted background should
	 * reach the same right edge as the impact card's image above it (both
	 * cards fill the full 1200px `.aiz-page` width with nothing narrowing
	 * this one), and its text should start at the same x as that section's
	 * heading — `.aiz-sw-sub-impact__body`'s own 103px left padding, not an
	 * independently-chosen 32.
	 */
	padding: 64px 32px 64px 103px;
	background: rgba(44, 143, 130, .2);
	border-radius: 25px;
}

.aiz-sw-sub-cta__card h2 {
	margin: 0;
	color: var(--aiz-teal);
	/*
	 * Was missing entirely (rendered at the UA default h2 size), same bug and
	 * same fix as `.aiz-sw-sub-impact__body h2` above: the export's cta-titel
	 * also uses the plain `.section-title` class (not `--lg`), which this page
	 * already fixes at a flat 40px/600/1.1 elsewhere (see
	 * `.aiz-sw-statement__copy h2`). Confirmed against this section's own PNG:
	 * the descender-bearing second heading line's glyph bbox is 76px@2x = 38px,
	 * ~0.95 x 40px, matching the same ratio measured on the impact heading.
	 */
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	/*
	 * Same column width as the section above's heading
	 * (`.aiz-sw-sub-impact__body h2`), per the user's own design read: that
	 * heading's rendered width is `.aiz-sw-sub-impact__card`'s 1fr text
	 * column (1200px page minus the 482px image column and 32px gap = 686)
	 * minus its 103px left padding = 583px — the CTA card has no image
	 * column to derive that from, so it's hardcoded here to match rather
	 * than left at the card's own (much wider) 992px content width, which
	 * let it sit on one line instead of wrapping like the design.
	 */
	max-width: 583px;
}

.aiz-sw-sub-cta__accent {
	margin: 0;
	color: var(--aiz-teal);
	font-size: clamp(22px, 1.76vw, 32px);
	font-weight: 600;
	line-height: 1.13;
}

.aiz-sw-sub-cta__card p:not(.aiz-sw-sub-cta__accent) {
	margin: 0;
	color: var(--aiz-teal);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.34;
}

.aiz-sw-sub-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 32px;
	min-height: 46px;
	padding: 11px 16px;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-teal);
	color: var(--aiz-white);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.34;
}

.aiz-sw-sub-cta .wp-block-button__link:hover {
	background: #1c6056;
}

.aiz-sw-sub-cta .wp-block-button__link::after {
	content: "→";
}

@media (max-width: 780px) {
	.aiz-sw-sub-cta {
		padding-block: 96px;
	}

	.aiz-sw-sub-cta__card {
		padding: 48px 24px;
	}
}

@media (max-width: 480px) {
	.aiz-sw-sub-cta__card h2 {
		font-size: 32px;
	}

	.aiz-sw-sub-cta .wp-block-button__link {
		font-size: 18px;
	}
}


/* ===========================================================================
   Ga voor SLIM — subpagina (child page, page-ga-voor-slim.php)

   Page-scoped: every selector below is prefixed `.aiz-hero--ga-voor-slim` or
   `.aiz-gvs-*`, distinct from the sibling `slimmer-werken-sub` family
   (`.aiz-hero--slimmer-werken-sub` / `.aiz-sw-sub-*`) and from the parent
   Slimmer werken page's own classes, so nothing here can regress either.
   Breakpoints are the plan's own for this route (1100/820/560), not the
   export's (1199/1023/767) — same reasoning as the sibling subpage: the
   numbers are this page's design tokens re-applied at the project's chosen
   transition widths, not the export's own arbitrary ones.

   Read the sibling subpage's dated CLAUDE.md history entries (2026-09-05)
   before touching this module again — the hero background-transition
   technique and the topic-card carousel bugs fixed there are fixed HERE
   from the start, not rediscovered:
   - never a bare `%` `flex-basis` on a carousel card inside an
     `overflow-x: auto` track (use `calc(100vw - Npx)`/px instead — see
     `.aiz-gvs-skill-card` below);
   - pair it with `overflow-wrap: anywhere` on the card's heading/body;
   - `clip-path: none` (or, here, simply omitting any shape at all) needs to
     be stated explicitly per breakpoint if a broader rule ever declares one —
     this page's own `::before` never declares a `clip-path` in the first
     place, so that trap does not apply to it, but the note stands for future
     edits.
   ========================================================================== */

/*
 * Hero, `--ga-voor-slim` variant. Reuses the SHARED, unscoped
 * `.aiz-hero__grid` / `.aiz-hero__copy` / `.aiz-hero__eyebrow` rules (see
 * "Genuinely shared by both heroes" above) — including the shared
 * `.aiz-hero__copy .wp-block-button__link`, which is ALREADY the outline
 * style this hero's "Ontdek Ga voor SLIM" button needs (transparent
 * background, white border, white text, `→` after), so no override is
 * written for it here.
 *
 * Corrected 2026-09-05: matches the sibling subpage's own hero technique
 * (mask-cut photo + a stepped `::before` band), per direct request, rather
 * than the plain-rectangle/border-radius reading this page started with.
 * `Correct_design/SVG/Ga voor SLIM - subpagina.svg`'s own `pattern0`-filled
 * path (the hero photo's real silhouette, 481x650) has TWO notches, not
 * the sibling's one: a two-level step bitten out of the top-left corner
 * (x 0-173, y 0-84.294 of the 481x650 box) and a second bitten out of the
 * bottom-right (x 378.19-481, y 535.598-650) — both confirmed against a
 * fresh pixel crop of `Correct_design/PNG/Ga voor SLIM -
 * subpagina@2x.png`, not guessed. Traced verbatim (both notches, exact
 * vector coordinates, no approximation) into
 * `mask-ga-voor-slim-hero.svg`, applied as a CSS mask exactly like the
 * sibling's own `mask-slimmer-werken-sub-hero.svg` — same technique, this
 * page's own shape.
 *
 * The `::before` band: a fresh pixel scan of the same PNG (columns every
 * 20px across the full 2880px-wide 2x page) found the teal/navy boundary
 * flat at 735px from this section's own top (matches `padding-top: 228px`
 * exactly as the SVG frame's own origin) — EXCEPT a strip that reads 816px
 * instead. Corrected TWICE now:
 *
 * First correction (2026-09-05, follow-up) wrongly walked the step all
 * the way to the photo's own LEFT edge (`- 481px`, the photo's full
 * width) — overcorrecting. Second correction (2026-09-05, second
 * follow-up), after the user reported the shift "isn't consistently
 * behind the image" and pointed at how the sibling subpage
 * (`.aiz-hero--slimmer-werken-sub::before`, same page family, same
 * `Correct_design` methodology) does this: that sibling's own rule uses
 * the PLAIN page-edge formula with NO extra offset, because on that page
 * the deep zone really is just `.aiz-page`'s own right-hand gutter, one
 * pixel outside the photo — see that rule's own comment. Re-scanning this
 * page's own PNG at finer resolution (every 20px, not 40) found the same
 * is ALMOST true here too, with one difference: this photo's own
 * bottom-right notch (`x 378.19-481 of the 481-wide box`, see the mask
 * comment above) is wide enough that the deep zone becomes visible
 * slightly BEFORE `.aiz-page`'s edge — at x≈1217 (1x), not ~1305 — because
 * the notch cuts the photo away early enough to expose it. The gap
 * between those two x-values is exactly the notch's own depth (481 -
 * 378.19 = 102.81px), not the photo's full width. So the step's
 * x-position is the SAME page-edge formula as the sibling, walked left by
 * only that 102.81px notch depth — not the photo's entire 481px, which
 * was the earlier overcorrection. `.aiz-page`'s right edge: the photo's
 * right edge sits 120px in from the page's own 1440px width at this
 * reference size, matching `var(--aiz-page-gutter)`'s *global* clamped
 * value here, not this page's own `.aiz-page--ga-voor-slim` override —
 * this `::before` lives on the SECTION, a sibling/ancestor of that scoped
 * div, not a descendant of it, so it never sees that override. Re-scanned
 * and confirmed live at both 1440px and 1100px: the notch's own reveal
 * point (~1217 at 1440px 1x) now falls inside the deep zone at both
 * widths, not just coincidentally at one.
 */
.aiz-hero--ga-voor-slim {
	position: relative;
	overflow: hidden;
	padding: 228px 0 0;
}

.aiz-hero--ga-voor-slim::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	top: -144px;
	height: 960px;
	background: linear-gradient(90deg, #1c6056, var(--aiz-teal));
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 102.81px) 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 102.81px) 91.5625%,
		0 91.5625%
	);
}

.aiz-hero--ga-voor-slim .aiz-hero__grid {
	z-index: 1;
	grid-template-columns: minmax(0, 688px) minmax(0, 481px);
	gap: 31px;
}

.aiz-hero--ga-voor-slim .aiz-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding-top: 8px;
}

.aiz-hero--ga-voor-slim .aiz-hero__eyebrow {
	margin: 0;
	padding: 10px 16px;
	border: 1px solid var(--aiz-white);
	border-radius: 50px;
	font-size: 14px;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
}

.aiz-hero--ga-voor-slim .aiz-hero__copy h1 {
	margin: 8px 0 0;
	max-width: 688px;
	font-size: 64px;
	line-height: 1.094;
}

.aiz-hero--ga-voor-slim .aiz-hero__intro-copy {
	margin: 0;
	max-width: 688px;
	font-size: 24px;
	line-height: 1.34;
	font-weight: 500;
}

/*
 * Shape traced directly from `Correct_design/SVG/Ga voor SLIM -
 * subpagina.svg` (the path filled by `pattern0_703_5750`, the hero photo's
 * own pattern fill) — the exact 481x650 box with both notches described
 * above. Applied as a CSS mask, same technique as the sibling's own
 * `mask-slimmer-werken-sub-hero.svg`, so the rounded corners stay genuinely
 * round instead of faceted like a `clip-path: polygon(...)` approximation
 * would render them. `aspect-ratio: 481 / 650` is load-bearing at every
 * breakpoint below, not just here — matching the sibling's own note: a
 * `<figure>` with only `width` set falls back to the *photo's own* raw
 * aspect ratio once `height` is `auto`, which would distort the mask onto
 * the wrong-shaped box.
 */
.aiz-hero--ga-voor-slim .aiz-hero__visual {
	width: 100%;
	max-width: 481px;
	aspect-ratio: 481 / 650;
	margin: 0;
	-webkit-mask: url(../images/mask-ga-voor-slim-hero.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-ga-voor-slim-hero.svg) no-repeat center / 100% 100%;
}

.aiz-hero--ga-voor-slim .aiz-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-hero--ga-voor-slim {
		padding-top: 180px;
	}

	/*
	 * Still the side-by-side grid at this width (stacks only at ≤820px),
	 * so the stepped band stays — only re-anchored for this breakpoint's
	 * own shorter `padding-top`. The clip-path polygon itself is left
	 * alone: it is already expressed as page-edge-relative `calc()`/`%`,
	 * not fixed pixels, so it re-tracks `.aiz-page`'s real right edge and
	 * this box's own height at any width in this range without needing a
	 * breakpoint-specific override.
	 */
	.aiz-hero--ga-voor-slim::before {
		top: -120px;
		height: 936px;
	}

	.aiz-hero--ga-voor-slim .aiz-hero__copy h1 {
		font-size: 48px;
		line-height: 1.125;
	}

	.aiz-hero--ga-voor-slim .aiz-hero__intro-copy {
		font-size: 20px;
		line-height: 1.5;
	}
}

@media (max-width: 820px) {
	.aiz-hero--ga-voor-slim .aiz-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	/*
	 * Same simplification as the sibling hero's own stacked breakpoints
	 * (2026-09-05, fifth pass): no step, just a flat band down to right
	 * below the image — the two-column page-edge step has no meaning once
	 * copy and image are no longer side by side. `clip-path: none` resets
	 * the diagonal the base rule declares; the cascade keeps a property
	 * applying once a more specific rule stops mentioning it, so this
	 * needs to be explicit here, not just omitted (the sibling's own
	 * CLAUDE.md history documents catching exactly this live). `height`
	 * alone decides where the flat rectangle ends once the shape is reset.
	 */
	.aiz-hero--ga-voor-slim::before {
		height: 1190px;
		clip-path: none;
	}

	.aiz-hero--ga-voor-slim .aiz-hero__visual {
		width: min(74vw, 320px);
		max-width: none;
		margin-inline: auto;
	}
}

@media (max-width: 560px) {
	.aiz-hero--ga-voor-slim {
		padding-top: 32px;
	}

	.aiz-hero--ga-voor-slim::before {
		top: -96px;
		height: 1075px;
		clip-path: none;
	}

	.aiz-hero--ga-voor-slim .aiz-hero__copy h1 {
		font-size: 36px;
		line-height: 1.167;
	}

	.aiz-hero--ga-voor-slim .aiz-hero__intro-copy {
		font-size: 18px;
		line-height: 1.444;
	}
}

/*
 * Container: `.aiz-page--ga-voor-slim` only ever sets the gutter, same
 * convention as `.aiz-page--slimmer-werken`. This export's own gutter
 * schedule (24 / 40 / 20) genuinely differs from the parent Slimmer werken
 * page's own (24 / 16), so it gets its own page-container variant rather
 * than reusing that one at the wrong widths.
 */
.aiz-page--ga-voor-slim {
	--aiz-page-gutter: 24px;
}

@media (max-width: 1100px) {
	.aiz-page--ga-voor-slim {
		--aiz-page-gutter: 40px;
	}
}

@media (max-width: 560px) {
	.aiz-page--ga-voor-slim {
		--aiz-page-gutter: 20px;
	}
}

/*
 * Shared typography helpers, page-scoped. The export's own design tokens
 * (see Additional_pages_html README §3) collapse to two "size steps" below
 * 1440px — this page's own 1100px and 560px breakpoints, not the export's
 * 1199/767 — everything between drops straight from the desktop value to
 * the 1100px step. `.aiz-gvs-heading--h2` (white, this page's ONLY large
 * heading — the skills section, which sits on the teal gradient) and
 * `.aiz-gvs-heading--h3` (teal, every other section heading — all sit on
 * the page's navy/charcoal background) mirror the export's own
 * `.heading-2`/`.heading-3` utility classes exactly, including which
 * colour each one is — do not swap them for a shared class, the colour IS
 * the semantic difference between the two.
 */
.aiz-gvs-heading--h2 {
	margin: 0;
	color: var(--aiz-white);
	font-size: 56px;
	line-height: 1.071;
	font-weight: 600;
}

.aiz-gvs-heading--h3 {
	margin: 0;
	color: var(--aiz-teal);
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
}

@media (max-width: 1100px) {
	.aiz-gvs-heading--h2 {
		font-size: 44px;
		line-height: 1.136;
	}

	.aiz-gvs-heading--h3 {
		font-size: 32px;
		line-height: 1.188;
	}
}

@media (max-width: 560px) {
	.aiz-gvs-heading--h2 {
		font-size: 30px;
		line-height: 1.2;
	}

	.aiz-gvs-heading--h3 {
		font-size: 26px;
		line-height: 1.231;
	}
}

/*
 * `.aiz-gvs-quote` is this page's pull-quote — teal, same colour on every
 * section it appears in (lead-in, both split sections, skills, both text
 * sections, the future panel). `--medium` is the export's own smaller
 * variant (`.pull-quote--medium`, used once in the innovation section).
 */
.aiz-gvs-quote {
	margin: 32px 0;
	color: var(--aiz-teal);
	font-size: 48px;
	line-height: 1.167;
	font-weight: 400;
}

.aiz-gvs-quote--medium {
	/*
	 * Correct_design shows this quote ending ~17.5px ABOVE the right
	 * column's own last line (measured via pixel scan), not level with
	 * it as the bare zeroed margin (32px gap only) rendered. Pulling it
	 * up with a negative top margin on top of the stack's own 32px gap,
	 * rather than shrinking the shared `.aiz-gvs-stack` gap itself (which
	 * is correct as 32px everywhere else it's used).
	 */
	margin: -18px 0 0;
	font-size: 36px;
	line-height: 1.167;
}

@media (max-width: 1100px) {
	.aiz-gvs-quote {
		font-size: 36px;
		line-height: 1.222;
	}

	.aiz-gvs-quote--medium {
		font-size: 28px;
		line-height: 1.214;
	}
}

@media (max-width: 560px) {
	.aiz-gvs-quote {
		font-size: 26px;
		line-height: 1.231;
	}

	.aiz-gvs-quote--medium {
		font-size: 22px;
		line-height: 1.273;
	}
}

/*
 * `.aiz-gvs-prose` resets the gap between paragraphs/lists the same way
 * `.aiz-sw-sub-media__text` does on the sibling page — plain paragraphs
 * inside it stay the page's default white body copy (no colour override:
 * only headings and pull-quotes are teal on this page, per the export's own
 * `.heading-2`/`.heading-3`/`.pull-quote` rules — body text stays white for
 * contrast against the navy/charcoal/teal backgrounds alike).
 */
.aiz-gvs-prose > * + * {
	margin-top: 24px;
}

.aiz-gvs-prose ul {
	margin: 0;
	padding-left: 24px;
	list-style: disc;
	display: grid;
	gap: 4px;
}

.aiz-gvs-stack {
	display: grid;
	gap: 32px;
}

.aiz-gvs-stack--tight {
	gap: 24px;
}

/*
 * Design-specific manual line breaks (the export's own `.optional-break`).
 * Dropped below 560px so long compound words reflow naturally instead of
 * breaking where the desktop layout's narrower measure wanted them to.
 */
@media (max-width: 560px) {
	br.aiz-gvs-optional-break {
		display: none;
	}
}

/*
 * "De mensen zijn er al" / "Leren als onderdeel van het werk" —
 * `.aiz-gvs-split`. Full-bleed image against the section's own left edge
 * (NOT `.aiz-split`, which is a boxed rounded-image pair, and NOT
 * `.aiz-sw-sub-media`, whose column widths/gap/padding are tuned to the
 * sibling page's own export — see this file's header comment).
 */
.aiz-gvs-split {
	display: grid;
	grid-template-columns: minmax(0, 598px) minmax(0, 1fr);
	gap: 96px;
	align-items: center;
	background: var(--aiz-charcoal);
	padding-right: var(--aiz-page-gutter);
}

.aiz-gvs-split__image {
	align-self: stretch;
	margin: 0;
	min-height: 480px;
}

.aiz-gvs-split__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aiz-gvs-split__copy {
	display: grid;
	gap: 48px;
	max-width: 576px;
	padding-block: 120px;
}

@media (max-width: 1100px) {
	.aiz-gvs-split {
		grid-template-columns: minmax(0, 1fr);
		padding-right: 0;
	}

	.aiz-gvs-split__image {
		min-height: 360px;
	}

	.aiz-gvs-split__copy {
		padding: 64px var(--aiz-page-gutter);
	}
}

@media (max-width: 560px) {
	.aiz-gvs-split__image {
		min-height: 240px;
	}

	.aiz-gvs-split__copy {
		gap: 32px;
		padding-block: 48px;
	}
}

/*
 * "Ze weten dat leren belangrijk is..." — `.aiz-gvs-lead-in`. No heading in
 * the design (the export gives the `<section>` itself an `aria-label` for
 * this reason) — per this theme's own convention, aria-labelledby is
 * DERIVED from an anchored heading through the group-render filter and is
 * never hand-written on a Group (see CLAUDE.md's "Non-obvious things"), so
 * this section stays unnamed, same as the sibling subpage's own
 * `.aiz-hero__followup` wrapper and its `hero__followup` precedent.
 */
.aiz-gvs-lead-in {
	padding-block: 222px 200px;
}

.aiz-gvs-lead-in__text {
	max-width: 688px;
	margin: 0;
	font-size: 24px;
	line-height: 1.34;
	font-weight: 500;
}

.aiz-gvs-lead-in__statement {
	max-width: 688px;
	margin: 32px 0;
	color: var(--aiz-teal);
	font-size: 32px;
	line-height: 1.125;
	font-weight: 600;
}

@media (max-width: 1100px) {
	.aiz-gvs-lead-in {
		padding-block: 140px 96px;
	}

	.aiz-gvs-lead-in__text {
		font-size: 20px;
		line-height: 1.5;
	}

	.aiz-gvs-lead-in__statement {
		font-size: 26px;
		line-height: 1.231;
	}
}

@media (max-width: 560px) {
	.aiz-gvs-lead-in {
		padding-block: 48px 56px;
	}

	.aiz-gvs-lead-in__text {
		font-size: 18px;
		line-height: 1.444;
	}

	.aiz-gvs-lead-in__statement {
		font-size: 22px;
		line-height: 1.273;
	}
}

/*
 * "Niet wat iemand is, maar wat iemand kan" — `.aiz-gvs-skills`, the teal
 * gradient section carrying the skills carousel. The carousel reuses
 * `initScrollCarousel()` from aiz.js verbatim (see aiz.js) via its own
 * `data-skills-*` hooks — a second call site, not a copy of the function.
 */
.aiz-gvs-skills {
	padding-block: 200px;
	background: linear-gradient(90deg, #1c6056, var(--aiz-teal));
	overflow: hidden;
}

.aiz-gvs-skills__inner {
	display: grid;
	grid-template-columns: minmax(0, 584px) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.aiz-gvs-skills__copy {
	display: grid;
	gap: 32px;
}

/*
 * Scoped override: `.aiz-gvs-quote` is teal everywhere else on this page,
 * but Correct_design shows this specific quote in white (this section's
 * background is the teal gradient, so teal-on-teal here would be
 * near-invisible at the gradient's lighter end -- unlike the future panel's
 * own quote, which the export genuinely does render teal-on-teal, see that
 * section's own comment). Its own margin is zeroed so the parent grid's
 * `gap` is the only vertical spacing, matching `.aiz-gvs-stack`'s rhythm
 * instead of stacking a second 32px margin on top of the 64px->32px gap.
 */
.aiz-gvs-skills__copy .aiz-gvs-quote {
	margin: 0;
	color: var(--aiz-white);
}

.aiz-gvs-carousel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	/* The export's own row bleeds to the viewport edge (Frame 316 is wider
	   than the 1440px page); reproduced with the same negative-margin
	   technique the sibling page's carousel avoided needing (its own row
	   fits inside the page) but this page's own README (§6.6) documents
	   explicitly for this export. */
	margin-right: calc(50% - 50vw);
}

.aiz-gvs-carousel__track {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	/*
	 * `mandatory` -- see `.aiz-gvs-carousel__items`'s own trailing
	 * `padding-right` comment for why this is safe again: that padding
	 * makes the track's true scroll boundary land exactly on the last
	 * card's own snap point at every width, instead of short of it, so
	 * there's no unreachable gap left for `mandatory` to spring back from.
	 * (An earlier pass tried loosening this to `proximity` instead --
	 * that papered over the symptom without fixing the actual shortfall,
	 * and a user check afterwards found the last card still barely
	 * visible.)
	 */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.aiz-gvs-carousel__track::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.aiz-gvs-carousel__track {
		scroll-behavior: auto;
	}
}

.aiz-gvs-carousel__items {
	display: flex;
	gap: 32px;
	/*
	 * Trailing spacer, not a cosmetic tweak: 5 cards (378px + 32px gaps =
	 * 2018px total) don't divide evenly into the track's own visible
	 * width, so the track's true scroll boundary (`scrollWidth -
	 * clientWidth`) lands SHORT of card 5's (and often card 4's) own
	 * `scroll-snap-align: start` position -- e.g. at 1440px the track is
	 * 996px wide, giving a max scroll of 1022px while card 5's own snap
	 * point sits at 1640px. With no reachable snap point that far along,
	 * `mandatory` springs back to card 3 and the last card can never
	 * actually be scrolled into view, however many times "next" is
	 * clicked -- confirmed live (2026-09-06): a card was still only
	 * barely visible after the carousel was reported fixed.
	 *
	 * This padding is safe against the "indefinite-width flex parent"
	 * trap documented on `.aiz-gvs-skill-card`'s own `flex-basis` just
	 * below (a PERCENTAGE `flex-basis` on the cards can't resolve, because
	 * it would depend on this element's own width, which in turn depends
	 * on the cards' sizes -- a circular reference the spec resolves by
	 * treating the percentage as `auto`). Padding doesn't hit that same
	 * circularity: it resolves against `.aiz-gvs-carousel__track`'s own
	 * width, which the parent grid track fixes independently of this
	 * element's content, so there's no circular reference to fall back
	 * from. The result: this element's own rendered width becomes track's
	 * width minus one card, plus every card's content -- exactly enough
	 * trailing space for the last card's own snap point to sit flush with
	 * the track's true scroll boundary, at any viewport width.
	 */
	padding-right: calc(100% - 378px);
}

/*
 * Never a bare `%` `flex-basis` here — this card's actual flex parent
 * (`.aiz-gvs-carousel__items`) is itself a child of the `overflow-x: auto`
 * track, so it has no definite width of its own to be a percentage of (the
 * sibling subpage's own carousel hit exactly this bug once already, see
 * CLAUDE.md 2026-09-05). `overflow-wrap: anywhere` on the heading/body is
 * the paired fix: `flex-shrink: 0` (implied by a fixed `flex-basis`) won't
 * shrink a card below its own unbreakable content width.
 */
.aiz-gvs-skill-card {
	flex: 0 0 378px;
	max-width: 100%;
	min-height: 714px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 120px;
	padding: 64px 32px 48px;
	background: rgba(254, 254, 254, .2);
	border-radius: 2px;
	scroll-snap-align: start;
}

.aiz-gvs-skill-card h3,
.aiz-gvs-skill-card p {
	margin: 0;
	color: var(--aiz-white);
	overflow-wrap: anywhere;
}

.aiz-gvs-skill-card h3 {
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
}

.aiz-gvs-skill-card p {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
}

.aiz-gvs-carousel__controls {
	display: flex;
	gap: 32px;
	align-items: center;
	padding-left: 14px;
}

.aiz-gvs-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--aiz-white);
	font-size: 16px;
	cursor: pointer;
	transition: background-color 160ms ease, opacity 160ms ease;
}

.aiz-gvs-carousel__button:hover {
	background: rgba(254, 254, 254, .2);
}

.aiz-gvs-carousel__button[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
}

.aiz-gvs-carousel__button[aria-disabled="true"]:hover {
	background: transparent;
}

@media (max-width: 1100px) {
	.aiz-gvs-skills {
		padding-block: 96px;
	}

	.aiz-gvs-skills__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.aiz-gvs-carousel {
		margin-right: calc(-1 * var(--aiz-page-gutter));
	}

	.aiz-gvs-skill-card {
		flex-basis: 320px;
		min-height: 0;
		gap: 64px;
		padding: 48px 24px 32px;
	}

	/* Same trailing-spacer fix as the base rule, resized for this
	   breakpoint's own 320px card width. */
	.aiz-gvs-carousel__items {
		padding-right: calc(100% - 320px);
	}
}

@media (max-width: 560px) {
	.aiz-gvs-skill-card {
		/*
		 * Same trap the sibling page's own carousel hit once already
		 * (CLAUDE.md 2026-09-05): a bare percentage/viewport-width value
		 * here would need to resolve against this indefinite-width flex
		 * parent. `calc(100vw - 40px)` matches this breakpoint's own
		 * `--aiz-page-gutter` (20px each side) so a card is always
		 * viewport-safe, with a sliver of the next card peeking in.
		 */
		flex-basis: calc(100vw - 40px);
		gap: 48px;
	}

	.aiz-gvs-skill-card h3 {
		font-size: 32px;
	}

	/* Same trailing-spacer fix, resized for this breakpoint's own
	   near-viewport-width card. */
	.aiz-gvs-carousel__items {
		padding-right: calc(100% - (100vw - 40px));
	}
}

/*
 * Narrow text sections (992px content column) — "Kennis- en datagedreven
 * werken" and "Sociale én technologische innovatie". `.aiz-gvs-text`.
 */
.aiz-gvs-text {
	padding-block: 120px;
}

.aiz-gvs-text--charcoal {
	background: var(--aiz-charcoal);
}

.aiz-gvs-text__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	max-width: 992px;
	margin-inline: auto;
}

.aiz-gvs-text--charcoal .aiz-gvs-text__inner {
	gap: 32px;
}

/*
 * Page-gutter padding only matters once the viewport shrinks below this
 * box's own 992px max-width -- above that it's already centred with real
 * margin either side and never touches the edge. Applying the full
 * page-level gutter unconditionally (as a previous pass did) ate 240px out
 * of the readable measure on every desktop width, quietly narrowing every
 * paragraph/quote in `.aiz-gvs-text__inner` to 752px against Correct_design's
 * own ~992px -- caught via a live-vs-design width comparison, not visible
 * from the CSS alone. Same 1100px breakpoint this page already uses
 * elsewhere (e.g. `.aiz-gvs-split__copy`).
 */
@media (max-width: 1100px) {
	.aiz-gvs-text__inner {
		padding-inline: var(--aiz-page-gutter);
	}
}

.aiz-gvs-two-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	align-items: start;
}

@media (max-width: 820px) {
	.aiz-gvs-two-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * "Klaar voor de arbeidsmarkt van morgen" — `.aiz-gvs-future`, the same
 * teal-gradient-card-with-bleeding-image TECHNIQUE as the sibling page's
 * `.aiz-sw-sub-impact`, a distinct module because the column proportions
 * and copy padding genuinely differ (see this file's header comment).
 *
 * CORRECTED (2026-09-06): an earlier pass concluded this card's
 * heading/pull-quote were a "faithfully reproduced" teal-on-teal quirk and
 * deliberately left teal. That was wrong — a direct crop of Correct_design
 * at this panel's own coordinates shows both the heading and the pull-quote
 * in white, same as the skills section's own quote fix. `.aiz-gvs-heading--h3`
 * and `.aiz-gvs-quote` stay teal everywhere else on this page; only this
 * card overrides both to white, scoped to `.aiz-gvs-future__copy`.
 */
.aiz-gvs-future {
	padding-block: 120px;
}

.aiz-gvs-future__panel {
	display: grid;
	grid-template-columns: minmax(0, 685fr) minmax(0, 482fr);
	gap: 32px;
	align-items: center;
	background: linear-gradient(90deg, #1c6056, var(--aiz-teal));
	border-radius: 8px;
	overflow: hidden;
}

.aiz-gvs-future__copy {
	display: grid;
	gap: 32px;
	align-content: center;
	max-width: 576px;
	padding: 120px 0 120px 103px;
}

.aiz-gvs-future__copy h2 {
	color: var(--aiz-white);
}

.aiz-gvs-future__copy .aiz-gvs-quote {
	margin: 0;
	color: var(--aiz-white);
}

.aiz-gvs-future__image {
	align-self: stretch;
	margin: 0;
	min-height: 480px;
}

.aiz-gvs-future__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-gvs-future__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.aiz-gvs-future__copy {
		padding: 64px var(--aiz-page-gutter);
		order: 2;
	}

	.aiz-gvs-future__image {
		order: 1;
		min-height: 320px;
	}
}

@media (max-width: 560px) {
	.aiz-gvs-future__copy {
		gap: 32px;
		padding-block: 48px;
	}

	.aiz-gvs-future__image {
		min-height: 240px;
	}
}

/*
 * Closing contact CTA — `.aiz-gvs-cta`. A single tinted, centred panel, the
 * same TINT (`rgba(44,143,130,.2)`) and `border-radius: 25px` as the
 * sibling page's `.aiz-sw-sub-cta`, but a distinct module: this panel is
 * centred and capped at the narrow 992px content column rather than the
 * sibling's 103px-indented, full-width card — a different shape, not a
 * smaller copy (see this file's header comment).
 */
.aiz-gvs-cta {
	padding-block: 120px;
}

.aiz-gvs-cta__panel {
	display: flex;
	justify-content: center;
	max-width: 1200px;
	margin-inline: auto;
	/*
	 * Horizontal padding is the page gutter minus 17px, not the bare
	 * gutter -- measured against the future panel directly above (whose
	 * own text sits at `.aiz-page`'s left edge + its own 103px copy
	 * padding = 120+103=223px at 1440), this panel's box model was
	 * `.aiz-page`-width (1200, centred, same as `.aiz-page` itself) plus
	 * a FULL second gutter of its own (120+120=240px) -- 17px further
	 * right than the section above, confirmed against Correct_design
	 * (both sit at the same ~225px there). The -17px keeps this
	 * responsive with the gutter's own clamp() at every width instead of
	 * hardcoding a value that would stop scaling below 1100px.
	 */
	padding: 64px calc(var(--aiz-page-gutter) - 17px);
	background: rgba(44, 143, 130, .2);
	border-radius: 25px;
}

.aiz-gvs-cta__copy {
	display: grid;
	gap: 32px;
	justify-items: start;
	width: 100%;
	max-width: 992px;
}

.aiz-gvs-cta__title {
	margin: 0;
	color: var(--aiz-teal);
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
}

.aiz-gvs-cta__text {
	margin: 0;
	color: var(--aiz-teal);
	font-size: 24px;
	line-height: 1.34;
	font-weight: 500;
}

.aiz-gvs-cta__text--emphasis {
	font-weight: 600;
}

.aiz-gvs-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 32px;
	min-height: 46px;
	padding: 11px 16px;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-teal);
	color: var(--aiz-white);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.34;
}

.aiz-gvs-cta .wp-block-button__link:hover {
	background: #1c6056;
}

.aiz-gvs-cta .wp-block-button__link::after {
	content: "→";
}

@media (max-width: 1100px) {
	.aiz-gvs-cta__panel {
		padding: 48px var(--aiz-page-gutter);
	}
}

@media (max-width: 560px) {
	.aiz-gvs-cta__panel {
		padding: 32px var(--aiz-page-gutter);
		border-radius: 16px;
	}

	.aiz-gvs-cta .wp-block-button__link {
		font-size: 18px;
	}
}
/* ===========================================================================
   Utilities
   ========================================================================== */

/*
 * The notched shoulder that home's impact, contact and news sections each draw
 * across the bottom of the section ABOVE them. It is absolutely positioned at
 * top: -44px and deliberately not clipped, so it paints outside its own
 * section's box — which is why a section's diff can show a band of the next
 * section's colour before that next section is built.
 *
 * `background: inherit` is load-bearing: the shoulder takes the colour of the
 * section it belongs to, not of the one it overlaps.
 */
.aiz-shape-top {
	position: relative;
}

.aiz-shape-top::before {
	content: "";
	position: absolute;
	left: 0;
	top: -44px;
	width: 74%;
	height: 45px;
	background: inherit;
	border-radius: 0 80px 0 0;
}

/* Home's section seams use the corrected export's smoothed corner. */
.aiz-impact.aiz-shape-top::before,
.aiz-impact + .aiz-testimonials::before,
.aiz-testimonials + .aiz-contact.aiz-shape-top::before,
.aiz-contact + .aiz-news.aiz-shape-top::before {
	top: -80px;
	height: 81px;
	border-radius: 0;
	clip-path: path("M 0 81 C 18 81 34 70 38 56 C 42 48 42 37 46 29 C 54 11 66 0 85 0 H 2000 V 81 Z");
}

/* Issues -> impact and contact -> Actueel: the next section rises on the right. */
.aiz-impact.aiz-shape-top::before,
.aiz-contact + .aiz-news.aiz-shape-top::before {
	left: auto;
	right: 0;
	width: 31%;
}

/* Impact -> testimonials: blue rises across the right-hand three quarters. */
.aiz-impact + .aiz-testimonials {
	position: relative;
}

.aiz-impact + .aiz-testimonials::before {
	content: "";
	position: absolute;
	left: auto;
	right: 0;
	width: 75%;
	background: inherit;
}

/* Testimonials -> contact: the same profile mirrored at the right edge. */
.aiz-testimonials + .aiz-contact.aiz-shape-top::before {
	left: 0;
	right: auto;
	width: 75%;
	transform: scaleX(-1);
}

/* Actueel -> newsletter. The desktop lead-in depth is set with the section
   spacing below; this compact form remains the small-screen default. */
.aiz-news + .aiz-newsletter {
	position: relative;
}

.aiz-news + .aiz-newsletter::before {
	content: "";
	position: absolute;
	left: auto;
	right: 0;
	top: -80px;
	width: 75%;
	height: 143px;
	background: var(--aiz-navy);
	clip-path: path("M 0 81 C 18 81 34 70 38 56 C 42 48 42 37 46 29 C 54 11 66 0 85 0 H 2000 V 143 H 0 Z");
}

/* Correct_design/Home@2x.png desktop rhythm around the corrected seams. */
@media (min-width: 781px) {
	.aiz-impact.aiz-shape-top {
		padding-bottom: 160px;
	}

	.aiz-impact + .aiz-testimonials {
		padding: 80px 0 140px;
	}

	.aiz-impact + .aiz-testimonials .aiz-testimonials__item {
		min-height: 360px;
	}

	.aiz-testimonials + .aiz-contact {
		padding: 200px 0 280px;
	}

	.aiz-testimonials + .aiz-contact .aiz-section-intro {
		margin-bottom: 80px;
	}

	.aiz-testimonials + .aiz-contact .aiz-contact__submit {
		margin-top: 32px;
	}

	.aiz-contact + .aiz-news {
		padding: 80px 0 115px;
	}

	.aiz-contact + .aiz-news .wp-block-post {
		min-height: 480px;
	}

	.aiz-news + .aiz-newsletter {
		margin-top: 200px;
	}

	.aiz-news + .aiz-newsletter::before {
		top: -280px;
		height: 281px;
		clip-path: path("M 0 81 C 18 81 34 70 38 56 C 42 48 42 37 46 29 C 54 11 66 0 85 0 H 2000 V 281 H 0 Z");
	}
}

/*
 * Honeypot. Absolutely positioned so it takes no grid cell in the form it sits
 * in — a hidden grid child would shift every field after it. Off-canvas rather
 * than `.aiz-sr-only`, because a screen reader must not announce it either: the
 * wrapper carries aria-hidden and the input tabindex="-1".
 */
.aiz-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Monitor — hero
   ==========================================================================
   The grid (minmax(0,688px) 481px, gap 32px) is the shared `.aiz-hero__grid`
   already used by hero-media/hero-solutions/hero-slimmer-werken. Everything
   below is new to this variant: the yellow gradient, the ring decoration, and
   the search-plus-topics panel.
   ========================================================================== */

.aiz-hero--monitor {
	min-height: 898px;
	padding: 228px 0 130px;
	color: var(--aiz-white);
	background: var(--aiz-navy);
	position: relative;
	overflow: hidden;
}

.aiz-hero--monitor::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #efab00 0%, var(--aiz-yellow) 60%);
	-webkit-mask: url(../images/monitor/hero-mask.svg) no-repeat center top / 100% 100%;
	mask: url(../images/monitor/hero-mask.svg) no-repeat center top / 100% 100%;
}

.aiz-hero--monitor .aiz-hero__grid {
	grid-template-columns: minmax(0, 688px) 481px;
	justify-content: space-between;
	gap: 32px;
	position: relative;
	z-index: 1;
}

.aiz-hero--monitor .aiz-hero__copy h1 {
	font-size: 64px;
	line-height: 1.09;
	margin: 0 0 8px;
	font-weight: 600;
}

.aiz-hero--monitor .aiz-hero__copy h2 {
	font-size: 32px;
	line-height: 1.13;
	margin: 0 0 24px;
	font-weight: 600;
}

.aiz-hero--monitor .aiz-hero__copy p {
	font-size: 22px;
	line-height: 1.35;
	margin: 0 0 18px;
	font-weight: 500;
}

.aiz-monitor-hero__panel {
	padding: 48px 32px;
	background: rgba(254, 254, 254, .82);
	backdrop-filter: blur(8px);
	border-radius: 8px;
	align-self: start;
}

.aiz-monitor-hero__search.wp-block-search {
	margin: 0 0 64px;
}

.aiz-monitor-hero__search .wp-block-search__inside-wrapper {
	display: flex;
	padding: 0;
	border: 0;
}

.aiz-monitor-hero__search .wp-block-search__input {
	flex: 1;
	min-width: 0;
	height: auto;
	padding: 16px;
	border: 0;
	border-radius: 0;
	background: var(--aiz-white);
	color: var(--aiz-charcoal);
}

.aiz-monitor-hero__search .wp-block-search__button {
	flex: 0 0 auto;
	width: 56px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-purple);
	display: flex;
	align-items: center;
	justify-content: center;
}

.aiz-monitor-hero__search .wp-block-search__button svg {
	display: none;
}

.aiz-monitor-hero__search .wp-block-search__button::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	margin: auto;
	background: var(--aiz-white);
	-webkit-mask: url(../images/icon-search.svg) no-repeat center / contain;
	mask: url(../images/icon-search.svg) no-repeat center / contain;
}

.aiz-monitor-hero__topics {
	display: grid;
	gap: 16px;
}

/*
 * The link lives inside a plain <p>, which only has its UA margin-top zeroed
 * by the global reset (line 116) — its default margin-bottom would otherwise
 * stack with the grid's own 16px gap and inflate every row.
 */
.aiz-monitor-hero__topic p {
	margin: 0;
}

.aiz-monitor-hero__topic a {
	display: flex;
	align-items: center;
	gap: 24px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
	padding: 16px 24px;
	border-radius: 2px 2px 16px 2px;
	font-size: 20px;
	font-weight: 600;
}

/*
 * The leading icon and trailing arrow are decoration in the export (each
 * topic is one anchor with an icon glyph, the label, and an arrow glyph) —
 * drawn as pseudo-elements per Decision 12, keyed off a per-item modifier
 * class since each topic's icon differs.
 */
.aiz-monitor-hero__topic a::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-right: -8px;
	background: var(--aiz-topic-color);
	-webkit-mask: var(--aiz-topic-icon) center / contain no-repeat;
	mask: var(--aiz-topic-icon) center / contain no-repeat;
}

.aiz-monitor-hero__topic a::after {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-left: auto;
	background: var(--aiz-topic-color);
	-webkit-mask: url(../images/monitor/icon-arrow-circle.svg) center / contain no-repeat;
	mask: url(../images/monitor/icon-arrow-circle.svg) center / contain no-repeat;
}

.aiz-monitor-hero__topic--arbeidsmarkt {
	--aiz-topic-color: #ffce2b;
	--aiz-topic-icon: url(../images/monitor/icon-arbeidsmarkt.svg);
}

.aiz-monitor-hero__topic--economie {
	--aiz-topic-color: #ff8091;
	--aiz-topic-icon: url(../images/monitor/icon-economie.svg);
}

.aiz-monitor-hero__topic--onderwijs {
	--aiz-topic-color: #258ed8;
	--aiz-topic-icon: url(../images/monitor/icon-onderwijs.svg);
}

.aiz-monitor-hero__topic--sectoren {
	--aiz-topic-color: #2c8f82;
	--aiz-topic-icon: url(../images/monitor/icon-sectoren.svg);
}

@media (max-width: 1050px) {
	.aiz-hero--monitor {
		padding-top: 205px;
	}

	.aiz-hero--monitor .aiz-hero__grid {
		grid-template-columns: 1.2fr .8fr;
	}

	.aiz-hero--monitor .aiz-hero__copy h1 {
		font-size: 50px;
	}

	.aiz-hero--monitor .aiz-hero__copy h2 {
		font-size: 27px;
	}

	.aiz-hero--monitor .aiz-hero__copy p {
		font-size: 18px;
	}

	.aiz-monitor-hero__panel {
		padding: 32px 22px;
	}

	.aiz-monitor-hero__search.wp-block-search {
		margin-bottom: 32px;
	}

	.aiz-monitor-hero__topic a {
		font-size: 17px;
		padding: 14px;
	}
}

@media (max-width: 760px) {
	.aiz-hero--monitor {
		padding: 145px 0 76px;
		min-height: auto;
	}

	.aiz-hero--monitor .aiz-hero__grid {
		grid-template-columns: 1fr;
	}

	.aiz-hero--monitor .aiz-hero__copy h1 {
		font-size: 42px;
	}

	.aiz-hero--monitor .aiz-hero__copy h2 {
		font-size: 25px;
	}

	.aiz-hero--monitor .aiz-hero__copy p {
		font-size: 18px;
	}

	.aiz-monitor-hero__panel {
		margin-top: 20px;
	}
}

/* ==========================================================================
   Monitor — split (intro + data-story)
   ==========================================================================
   Not the `.aiz-split` family (Over ons): that primitive is a fixed
   584px/481px asymmetric grid. This is an equal 1fr/1fr grid, 120px gap. The
   `--intro` variant is capped by `.aiz-page`; `--data` is edge-to-edge with
   the copy padded internally, matching the export's own difference between
   `.intro-section` (has `.page-grid`) and `.data-story` (does not).
   ========================================================================== */

.aiz-monitor-split {
	background: var(--aiz-charcoal);
}

.aiz-monitor-split--intro {
	padding: 200px 0 230px;
	background: var(--aiz-navy);
}

.aiz-monitor-split__layout {
	display: grid;
	grid-template-columns: 481px 481px;
	align-items: center;
	gap: 136px;
}

.aiz-monitor-split--data .aiz-monitor-split__layout {
	min-height: 760px;
	grid-template-columns: minmax(0, 598px) minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
}

.aiz-monitor-split__visual {
	background: none;
	padding: 0;
	border-radius: 2px;
	overflow: hidden;
}

.aiz-monitor-split--intro .aiz-monitor-split__visual,
.aiz-monitor-split--intro .aiz-monitor-split__visual figure,
.aiz-monitor-split--intro .aiz-monitor-split__visual img {
	width: 481px;
	height: 316px;
	margin: 0;
	object-fit: cover;
}

.aiz-monitor-split--data .aiz-monitor-split__visual {
	background: none;
	padding: 0;
	border-radius: 0;
	height: 100%;
}

/*
 * The Image block wraps its <img> in a <figure> with no height of its own
 * (auto), so an img's height:100% below it resolves against an indeterminate
 * height and falls back to the intrinsic aspect ratio instead of stretching
 * — the figure needs height:100% too before the percentage chain reaches it.
 */
.aiz-monitor-split--data .aiz-monitor-split__visual figure {
	height: 100%;
	margin: 0;
}

.aiz-monitor-split--data .aiz-monitor-split__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aiz-monitor-split__eyebrow {
	color: var(--aiz-yellow);
	font-weight: 600;
	font-size: 20px;
	margin: 0 0 8px;
}

.aiz-monitor-split__copy h2 {
	font-size: 28px;
	line-height: 1.15;
	margin: 0 0 28px;
	color: var(--aiz-yellow);
}

.aiz-monitor-split--data .aiz-monitor-split__copy {
	padding: 200px 120px 120px 140px;
	align-self: center;
}

.aiz-monitor-split__copy p {
	margin: 0 0 18px;
}

/*
 * The last child in the column, so its own trailing margin isn't collapsed
 * away by a following sibling the way an ordinary paragraph's is — a Grid
 * item's margin is never collapsed, so it would otherwise inflate this
 * column's (and the whole row's) rendered height by 18px past the export.
 */
p.aiz-monitor-split__link {
	margin: 16px 0 0;
}

.aiz-monitor-split__link a {
	display: inline-flex;
	gap: 16px;
	margin-top: 16px;
	color: var(--aiz-yellow);
	font-weight: 600;
}

.aiz-monitor-split__link a::after {
	content: "↗";
}

@media (max-width: 1050px) {
	.aiz-monitor-split__layout {
		gap: 60px;
	}

	.aiz-monitor-split--data .aiz-monitor-split__copy {
		padding: 80px 48px;
	}
}

@media (max-width: 760px) {
	.aiz-monitor-split--intro {
		padding-block: 100px;
	}

	.aiz-monitor-split__layout {
		grid-template-columns: 1fr;
	}

	.aiz-monitor-split--intro .aiz-monitor-split__visual {
		order: 2;
	}

	.aiz-monitor-split__copy h2 {
		font-size: 34px;
	}

	.aiz-monitor-split--data .aiz-monitor-split__copy {
		padding: 80px 24px;
	}

	.aiz-monitor-split--data .aiz-monitor-split__visual {
		min-height: 520px;
	}
}

/* ==========================================================================
   Monitor — working section (statement + insight-card collection)
   ========================================================================== */

.aiz-monitor-working {
	min-height: 808px;
	padding: 200px 0 186px;
	background: var(--aiz-charcoal);
	overflow: hidden;
}

.aiz-monitor-working__layout {
	display: grid;
	grid-template-columns: 481px minmax(0, 1fr);
	gap: 136px;
	align-items: start;
}

.aiz-monitor-working__copy h2 {
	font-size: 32px;
	line-height: 1.08;
	margin: 0 0 32px;
	color: var(--aiz-yellow);
}

.aiz-monitor-working__copy p {
	margin: 0 0 20px;
}

.aiz-monitor-working__carousel {
	min-width: 0;
}

.aiz-monitor-working__viewport {
	overflow: visible;
	clip-path: inset(-20px -100vw -20px 0);
}

.aiz-monitor-working__cards {
	display: flex;
	width: max-content;
	gap: 32px;
	transition: transform .35s ease;
}

.aiz-monitor-working__card {
	flex: 0 0 min(379px, calc(100vw - 48px));
	min-width: 0;
	min-height: 378px;
	background: rgba(255, 206, 43, .2);
	padding: 56px 32px 30px;
	border-radius: 2px 2px 53px 2px;
	display: flex;
	flex-direction: column;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, .15);
}

.aiz-monitor-working__card h3 {
	color: var(--aiz-yellow);
	font-size: 24px;
	line-height: 1.15;
	margin: 0 0 32px;
}

.aiz-monitor-working__card-link {
	margin: auto 0 0 auto;
}

.aiz-monitor-working__card-link a {
	position: relative;
	display: block;
	width: 36px;
	height: 36px;
	border: 3px solid currentColor;
	border-radius: 50%;
	font-size: 0;
	color: var(--aiz-yellow);
}

.aiz-monitor-working__card-link a::after {
	content: "";
	position: absolute;
	inset: 8px;
	background: currentColor;
	-webkit-mask: url(../images/icon-arrow-right.svg) no-repeat center / contain;
	mask: url(../images/icon-arrow-right.svg) no-repeat center / contain;
}

.aiz-monitor-working__controls {
	display: flex;
	gap: 28px;
	margin-top: 16px;
}

.aiz-monitor-working__controls button {
	width: 28px;
	height: 28px;
	padding: 5px;
	border: 0;
	background: transparent;
	color: var(--aiz-yellow);
	cursor: pointer;
}

.aiz-monitor-working__controls button:focus-visible {
	outline: 2px solid var(--aiz-white);
	outline-offset: 3px;
}

.aiz-monitor-working__controls button:disabled {
	opacity: .35;
	cursor: default;
}

.aiz-monitor-working__controls span {
	display: block;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url(../images/icon-arrow-left.svg) no-repeat center / contain;
	mask: url(../images/icon-arrow-left.svg) no-repeat center / contain;
}

.aiz-monitor-working__controls [data-monitor-next] span {
	-webkit-mask-image: url(../images/icon-arrow-right.svg);
	mask-image: url(../images/icon-arrow-right.svg);
}

@media (max-width: 1050px) {
	.aiz-monitor-working__layout {
		gap: 60px;
	}
}

@media (max-width: 900px) {
	.aiz-monitor-working {
		padding-block: 90px;
	}

	.aiz-monitor-working__layout {
		grid-template-columns: 1fr;
	}

	.aiz-monitor-working__copy h2 {
		font-size: 34px;
	}

	.aiz-monitor-working__cards {
		grid-template-columns: 1fr;
		margin-top: 18px;
	}

	.aiz-monitor-working__card {
		min-height: 260px;
	}
}

/* ==========================================================================
   Statement family — shared by Monitor and Datawarehouse
   ==========================================================================
   A single oversized centred line at page width, no paragraph — distinct
   from `aiz-prose` (heading + paragraph, narrow column). Each page's own
   variant carries its type scale and colour, since they were independently
   authored and only share this one shape.
   ========================================================================== */

.aiz-statement--monitor {
	min-height: 808px;
	padding: 216px 0 252px;
	background: var(--aiz-navy);
}

.aiz-statement--monitor h2 {
	max-width: 790px;
	margin: 0;
	font-size: 80px;
	line-height: 1.06;
	font-weight: 400;
	color: var(--aiz-white);
}

/* Match the Monitor grid outside; keep the text at a readable line length. */
.aiz-monitor-reading,
.aiz-statement--monitor.aiz-monitor-reading {
	min-height: 0;
	padding-block: clamp(64px, 8vw, 112px);
	text-align: left;
}

.aiz-monitor-reading h2,
.aiz-statement--monitor.aiz-monitor-reading h2 {
	max-width: 76ch;
	margin: 0 0 28px;
	color: var(--aiz-yellow);
	font-size: clamp(28px, 2.3vw, 32px);
	line-height: 1.2;
}

.aiz-monitor-reading p {
	max-width: 76ch;
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.65;
}

.aiz-monitor-reading p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1050px) {
	.aiz-statement--monitor h2 {
		font-size: 64px;
	}
}

@media (max-width: 760px) {
	.aiz-statement--monitor {
		padding: 130px 0;
	}

	.aiz-statement--monitor h2 {
		font-size: 48px;
	}
}

/* ==========================================================================
   Monitor — future card
   ========================================================================== */

.aiz-monitor-future {
	padding: 200px 0 0;
	background: var(--aiz-navy);
}

.aiz-monitor-future__card {
	background: var(--aiz-white);
	color: var(--aiz-navy);
	min-height: 907px;
	padding: 103px 104px 90px;
	border-radius: 25px;
}

.aiz-monitor-future__card h2 {
	color: var(--aiz-yellow);
	font-size: 40px;
	line-height: 1.1;
	margin: 0 0 24px;
}

.aiz-monitor-future__card blockquote {
	max-width: 880px;
	font-size: 44px;
	line-height: 1.15;
	color: var(--aiz-yellow);
	margin: 48px 0 56px;
}

.aiz-monitor-future__card blockquote p {
	margin: 0;
}

.aiz-monitor-future__card h3 {
	font-size: 24px;
	color: var(--aiz-yellow);
	margin: 0;
}

.aiz-monitor-future__card p {
	max-width: 900px;
	margin: 6px 0 20px;
	line-height: 1.55;
}

@media (max-width: 1050px) {
	.aiz-monitor-future__card {
		padding: 80px 64px;
	}
}

@media (max-width: 760px) {
	.aiz-monitor-future {
		padding-block: 80px;
	}

	.aiz-monitor-future__card {
		padding: 54px 26px;
	}

	.aiz-monitor-future__card h2 {
		font-size: 33px;
	}

	.aiz-monitor-future__card blockquote {
		font-size: 36px;
		margin: 36px 0;
	}
}

/* ==========================================================================
   Monitor — partners row
   ==========================================================================
   `.aiz-logos--row` variant, alongside `--contact` and `--solutions`: same
   family, own gap/alignment measured from this export.
   ========================================================================== */

.aiz-logos--monitor {
	text-align: center;
	min-height: 701px;
	padding: 215px 0 207px;
	color: var(--aiz-mist);
	background: var(--aiz-navy);
	overflow: hidden;
}

.aiz-logos--monitor .aiz-logos__intro h2 {
	font-size: 20px;
	margin: 0 0 8px;
	color: inherit;
}

.aiz-logos--monitor .aiz-logos__intro p {
	max-width: 590px;
	margin: 0 auto 34px;
}

/*
 * Real slider, not the old plain wrapping row this section used to be.
 * Monitor's partners row now reuses the same `.aiz-logos__marquee` contract
 * as Over ons and Solutions, so it needs the same width/paging treatment
 * rather than the flex-wrap row and decorative dots this replaces. The
 * `.aiz-logos__row`/`.aiz-logos--monitor__pagination` rules that used to
 * live here matched only the old markup — removed as dead code now that
 * `logos-row-monitor.php` no longer emits either class.
 *
 * The marquee's own parent, `.aiz-logos__network-content`, already carries
 * BOTH `.aiz-page` and `.aiz-page--monitor` (unlike Solutions' marquee,
 * which is why that one needed hardcoded values) — `.aiz-page--monitor`'s
 * own rule sets a flat, unconditional `--aiz-page-gutter: 24px` with no
 * breakpoint steps, so the parent is already exactly Monitor's real content
 * column at every width. The marquee only needs to fill it: `width: 100%`.
 */
.aiz-logos--monitor .aiz-logos__marquee {
	width: 100%;
	padding-inline: 0;
	justify-content: flex-start;
	scroll-snap-type: x mandatory;
}

.aiz-logos--monitor .aiz-logos__marquee figure {
	scroll-snap-align: start;
	/*
	 * A fixed 6 logos per page, same rule as Solutions' partner marquee and
	 * Over ons' network row: each logo gets an equal-width slot (5 gaps
	 * between 6 items, at the row's own existing `gap`, 80px/52px at
	 * ≤640px) instead of its own natural width.
	 */
	flex: 0 0 calc((100% - (5 * 80px)) / 6);
}

@media (max-width: 640px) {
	.aiz-logos--monitor .aiz-logos__marquee figure {
		flex: 0 0 calc((100% - (5 * 52px)) / 6);
	}
}

/*
 * Same idle fallback as Solutions/Over ons: `flex-start` above assumes the
 * row overflows. If it ever stops (6 logos or fewer), recentre instead of
 * sitting flush left with room to spare.
 */
.aiz-logos--monitor .aiz-logos__marquee.aiz-carousel--idle {
	justify-content: center;
}

@media (max-width: 760px) {
	.aiz-logos--monitor {
		padding: 80px 0 110px;
	}
}

/* ==========================================================================
   Monitor — practice cards
   ========================================================================== */

/*
 * Restored as its own standalone rule: this used to be a compound selector
 * shared with `.aiz-logos--monitor__pagination` (`.aiz-logos--monitor__pagination,
 * .aiz-monitor-practice__pagination { ... }`), one comma-list per property
 * group. Removing the now-dead `.aiz-logos--monitor__pagination` half of
 * each list (the Monitor partners-row cleanup above) took this half's
 * styling down with it by mistake — caught immediately on live
 * verification and restored here, unchanged, as its own rule.
 */
.aiz-monitor-practice__pagination {
	display: flex;
	justify-content: center;
	gap: 5px;
}

.aiz-monitor-practice__pagination span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .42);
}

.aiz-monitor-practice__pagination span:first-child {
	background: var(--aiz-white);
}

.aiz-monitor-practice {
	position: relative;
	z-index: 1;
	min-height: 594px;
	background: linear-gradient(90deg, var(--aiz-yellow-dark) 0%, var(--aiz-yellow) 61%);
	color: var(--aiz-white);
	padding: 85px 0 190px;
}

.aiz-monitor-practice::before,
.aiz-monitor-practice::after {
	content: "";
	position: absolute;
	height: 91px;
}

.aiz-monitor-practice::before {
	z-index: -1;
	top: -90px;
	right: 0;
	width: 75%;
	background-image: linear-gradient(90deg, var(--aiz-yellow-dark) 0%, var(--aiz-yellow) 61%);
	background-size: 133.3333% 100%;
	background-position: 100% 0;
	clip-path: path("M 0 91 C 15.9 91 30 78.7 33.5 62.9 C 37 53.9 37 41.6 40.6 32.6 C 47.6 12.3 58.2 0 75 0 H 2000 V 91 Z");
}

.aiz-monitor-practice::after {
	z-index: 2;
	left: 0;
	bottom: -1px;
	width: 75%;
	background: var(--aiz-navy);
	clip-path: path("M 0 91 C 15.9 91 30 78.7 33.5 62.9 C 37 53.9 37 41.6 40.6 32.6 C 47.6 12.3 58.2 0 75 0 H 2000 V 91 Z");
	transform: scaleX(-1);
	pointer-events: none;
}

.aiz-monitor-practice h2 {
	font-size: 40px;
	line-height: 44px;
	text-align: center;
	margin: 0 0 32px;
}

.aiz-monitor-practice__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.aiz-monitor-practice__card {
	background: var(--aiz-white);
	color: var(--aiz-navy);
	padding: 50px 32px 32px;
	border-radius: 2px 2px 50px 2px;
	min-height: 334px;
	display: flex;
	flex-direction: column;
}

.aiz-monitor-practice__card h3 {
	color: var(--aiz-yellow);
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 28px;
}

.aiz-monitor-practice__card h3 a {
	color: inherit;
	text-decoration: none;
}

.aiz-monitor-practice__card > p:not(.aiz-monitor-practice__card-link) {
	margin: auto 0 0;
}

.aiz-monitor-practice__card-link {
	display: none;
}

.aiz-monitor-practice__card-link a {
	color: var(--aiz-purple);
	font-weight: 600;
}

@media (max-width: 1050px) {
	.aiz-monitor-practice__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 760px) {
	.aiz-monitor-practice__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Monitor — Solutions CTA
   ========================================================================== */

.aiz-monitor-solutions-cta {
	padding: 281px 0 200px;
	background: var(--aiz-navy);
	overflow: hidden;
}

.aiz-monitor-solutions-cta__card {
	position: relative;
	min-height: 416px;
	border-radius: 25px;
	padding: 65px 104px;
	background: linear-gradient(90deg, var(--aiz-yellow), #6490e8 60%);
	display: grid;
	grid-template-columns: 1fr 374px;
	gap: 40px;
	overflow: visible;
}

.aiz-monitor-solutions-cta__copy h2 {
	font-size: 48px;
	line-height: 1;
	margin: 0 0 28px;
	color: var(--aiz-white);
}

.aiz-monitor-solutions-cta__copy p {
	font-size: 18px;
	max-width: 500px;
	color: var(--aiz-navy);
}

.aiz-monitor-solutions-cta__copy .wp-block-button__link {
	display: inline-flex;
	gap: 24px;
	background: var(--aiz-purple);
	color: var(--aiz-white);
	padding: 12px 16px;
	border-radius: 2px 2px 16px 2px;
	font-weight: 500;
}

.aiz-monitor-solutions-cta__visual {
	position: absolute;
	z-index: 1;
	top: auto;
	bottom: -68px;
	right: 0;
	width: 374px;
	height: 420px;
	margin: 0 104px 0 0;
	-webkit-mask: url(../images/monitor/solutions-photo-mask.svg) center / 100% 100% no-repeat;
	mask: url(../images/monitor/solutions-photo-mask.svg) center / 100% 100% no-repeat;
}

.aiz-monitor-solutions-cta__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

@media (max-width: 1050px) {
	.aiz-monitor-solutions-cta__card {
		padding: 56px;
	}
}

@media (max-width: 760px) {
	.aiz-monitor-solutions-cta {
		padding-block: 100px;
	}

	.aiz-monitor-solutions-cta__card {
		grid-template-columns: 1fr;
		padding: 48px 28px;
	}

	.aiz-monitor-solutions-cta__copy h2 {
		font-size: 50px;
	}

	.aiz-monitor-solutions-cta__visual {
		display: none;
	}
}

/* Monitor keeps the 1442px reference geometry at desktop and folds it down
   deliberately at each supplied review width. */
@media (max-width: 1100px) {
	.aiz-monitor-split__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.aiz-monitor-working__layout {
		grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
	}

	.aiz-monitor-working__card {
		flex-basis: 350px;
	}

	.aiz-monitor-future__card {
		padding-inline: 72px;
	}

	.aiz-monitor-solutions-cta__visual {
		margin-right: 56px;
	}
}

@media (max-width: 900px) {
	.aiz-hero--monitor .aiz-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(310px, .95fr);
		gap: 44px;
	}

	.aiz-monitor-working__layout {
		gap: 44px;
	}

	.aiz-monitor-working__card {
		flex-basis: 330px;
	}

	.aiz-monitor-practice__card {
		padding-inline: 24px;
	}
}

@media (max-width: 900px) {
	.aiz-hero--monitor .aiz-hero__grid,
	.aiz-monitor-split__layout,
	.aiz-monitor-split--data .aiz-monitor-split__layout,
	.aiz-monitor-working__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.aiz-monitor-split--intro .aiz-monitor-split__visual,
	.aiz-monitor-split--intro .aiz-monitor-split__visual figure,
	.aiz-monitor-split--intro .aiz-monitor-split__visual img {
		width: 100%;
		height: auto;
		aspect-ratio: 481 / 316;
	}

	.aiz-monitor-split--data .aiz-monitor-split__layout {
		min-height: 0;
	}

	.aiz-monitor-split--data .aiz-monitor-split__visual {
		height: 480px;
		min-height: 0;
	}

	.aiz-monitor-working {
		min-height: 0;
		padding-block: 120px;
	}

	.aiz-monitor-working__viewport {
		overflow: hidden;
	}

	.aiz-monitor-working__card {
		flex-basis: calc(100vw - 64px);
		min-height: 340px;
	}

	.aiz-statement--monitor {
		min-height: 0;
	}

	.aiz-monitor-future {
		padding-top: 100px;
	}

	.aiz-monitor-future__card {
		min-height: 0;
		padding: 64px 32px;
	}

	.aiz-logos--monitor {
		min-height: 0;
		padding-block: 130px 120px;
	}

	.aiz-monitor-practice {
		min-height: 0;
		padding: 80px 0 190px;
	}

	.aiz-monitor-practice__grid {
		grid-template-columns: 1fr;
	}

	.aiz-monitor-solutions-cta {
		padding: 180px 0 110px;
	}

	.aiz-monitor-solutions-cta__card {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 48px 32px;
	}

	.aiz-monitor-solutions-cta__visual {
		display: none;
	}
}

@media (max-width: 640px) {
	.aiz-monitor-practice h2 {
		font-size: 32px;
		line-height: 36px;
	}
}

@media (max-width: 480px) {
	.aiz-monitor-hero__panel {
		min-width: 0;
		padding: 32px 20px;
	}

	.aiz-monitor-hero__topic a {
		gap: 12px;
	}

	.aiz-hero--monitor .aiz-hero__copy,
	.aiz-monitor-future__card {
		overflow-wrap: anywhere;
	}

	.aiz-monitor-future__card {
		padding-inline: 24px;
	}

	.aiz-monitor-working__card {
		flex-basis: calc(100vw - 48px);
	}

	.aiz-monitor-future__card blockquote {
		font-size: 32px;
	}

	.aiz-monitor-practice::before {
		width: 75%;
	}

	.aiz-monitor-practice::after {
		width: 75%;
	}
}

/* ==========================================================================
   Datawarehouse — hero
   ==========================================================================
   NOT the shared `.aiz-hero__grid` (688px/481px) — this export's own ratio
   is `minmax(0,1.35fr) minmax(320px,.95fr)` on a diagonal split background
   found nowhere else, so it gets its own grid class.
   ========================================================================== */

.aiz-hero--datawarehouse {
	min-height: 875px;
	padding-top: 228px;
	overflow: hidden;
	/* Coral-to-navy diagonal split, specific to this hero. */
	background: linear-gradient(165deg, #eb656a 0 52%, var(--aiz-navy) 52.2%);
}

.aiz-hero--datawarehouse__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(320px, .95fr);
	gap: 32px;
	align-items: start;
}

.aiz-hero--datawarehouse .aiz-hero__eyebrow {
	color: var(--aiz-white);
}

.aiz-hero--datawarehouse .aiz-hero__copy h1 {
	max-width: 11ch;
	font-size: 64px;
	line-height: 1.08;
	letter-spacing: -.035em;
	color: var(--aiz-white);
}

.aiz-hero--datawarehouse .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	min-height: 44px;
	margin-top: 8px;
	padding: 11px 16px;
	border: 1px solid var(--aiz-white);
	border-radius: 2px 2px 16px 2px;
	background: transparent;
	color: var(--aiz-white);
	font-weight: 500;
}

.aiz-hero--datawarehouse .wp-block-button__link:hover {
	background: var(--aiz-white);
	color: var(--aiz-navy);
}

.aiz-hero--datawarehouse__visual {
	min-height: 448px;
}

.aiz-hero--datawarehouse__panel {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 16px;
	min-height: 448px;
	padding: 32px;
	border-radius: 16px 16px 96px 16px;
	background:
		linear-gradient(135deg, rgba(16, 24, 32, .1), rgba(16, 24, 32, .75)),
		radial-gradient(circle at 70% 25%, #d6c4b1 0 18%, #8f725c 19% 32%, #40372f 33% 100%);
	transform: rotate(2deg);
	box-shadow: 0 32px 64px rgba(0, 0, 0, .2);
}

.aiz-hero--datawarehouse__card {
	display: grid;
	place-items: center;
	min-height: 128px;
	padding: 16px;
	border-radius: 2px;
	color: var(--aiz-navy);
	background: #fff9e9;
	font-size: 19px;
	font-weight: 600;
	text-transform: uppercase;
	box-shadow: 0 16px 16px rgba(0, 0, 0, .2);
}

.aiz-hero--datawarehouse__card--one   { transform: rotate(-8deg); }
.aiz-hero--datawarehouse__card--two   { transform: rotate(5deg); }
.aiz-hero--datawarehouse__card--three { transform: rotate(4deg); }
.aiz-hero--datawarehouse__card--four  { transform: rotate(-5deg); }

@media (max-width: 1100px) {
	.aiz-hero--datawarehouse {
		min-height: 800px;
	}

	.aiz-hero--datawarehouse__grid {
		grid-template-columns: 1.15fr .85fr;
	}
}

@media (max-width: 820px) {
	.aiz-hero--datawarehouse {
		min-height: auto;
		padding: 144px 0 128px;
		background: linear-gradient(165deg, #eb656a 0 70%, var(--aiz-navy) 70.2%);
	}

	.aiz-hero--datawarehouse__grid {
		grid-template-columns: 1fr;
	}

	.aiz-hero--datawarehouse .aiz-hero__copy {
		position: relative;
		z-index: 1;
	}

	.aiz-hero--datawarehouse__visual,
	.aiz-hero--datawarehouse__panel {
		min-height: 352px;
	}
}

@media (max-width: 560px) {
	.aiz-hero--datawarehouse .aiz-hero__copy h1 {
		font-size: 48px;
	}

	.aiz-hero--datawarehouse {
		padding-top: 128px;
	}

	.aiz-hero--datawarehouse__panel {
		gap: 11px;
		min-height: 288px;
		padding: 19px;
		border-radius: 8px 8px 64px 8px;
	}

	.aiz-hero--datawarehouse__card {
		min-height: 96px;
		font-size: 14px;
	}
}

/* ==========================================================================
   Datawarehouse — intro
   ========================================================================== */

.aiz-datawarehouse-intro {
	padding-block: clamp(96px, 12vw, 200px);
}

.aiz-datawarehouse-intro__layout {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.aiz-datawarehouse-intro__layout h2 {
	font-size: clamp(35px, 3vw, 40px);
	color: var(--aiz-coral);
	letter-spacing: -.025em;
	line-height: 1.08;
	letter-spacing: -.025em;
}

.aiz-datawarehouse-intro__text {
	max-width: 688px;
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.35;
	font-weight: 500;
}

.aiz-datawarehouse-intro__layout .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	min-height: 44px;
	margin-top: 16px;
	padding: 11px 16px;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-coral);
	color: var(--aiz-white);
	font-weight: 500;
}

.aiz-datawarehouse-intro__layout .wp-block-button__link:hover {
	background: #ff94a2;
}

/* ==========================================================================
   Datawarehouse — source grid
   ==========================================================================
   A REPEATABLE COLLECTION (the plan names "source grids" explicitly), so the
   section stays unlocked at the grid container.
   ========================================================================== */

.aiz-datawarehouse-sources {
	padding-top: 48px;
	padding-bottom: clamp(96px, 12vw, 200px);
}

.aiz-datawarehouse-sources__heading {
	max-width: 792px;
}

.aiz-datawarehouse-sources__heading h2 {
	font-size: clamp(35px, 3vw, 40px);
	color: var(--aiz-coral);
	letter-spacing: -.025em;
	line-height: 1.08;
	letter-spacing: -.025em;
}

.aiz-datawarehouse-sources__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-top: 32px;
}

.aiz-datawarehouse-sources__item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: 1fr auto;
	min-height: 230px;
	padding: 40px 32px 24px;
	border-radius: 2px 2px 40px 2px;
	background: var(--aiz-white);
	color: var(--aiz-navy);
}

.aiz-datawarehouse-sources__item h3 {
	grid-column: 1 / -1;
	align-self: center;
	justify-self: center;
	margin: 0;
	font-size: clamp(27px, 3vw, 45px);
	letter-spacing: -.04em;
}

.aiz-datawarehouse-sources__item p {
	align-self: end;
	margin: 0;
	color: #5f6d78;
	font-size: 12.5px;
}

.aiz-datawarehouse-sources__item-link {
	grid-column: 2;
	align-self: end;
	margin: 0;
}

.aiz-datawarehouse-sources__item-link a {
	font-size: 20px;
	color: var(--aiz-navy);
}

@media (max-width: 820px) {
	.aiz-datawarehouse-sources__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.aiz-datawarehouse-sources__grid {
		grid-template-columns: 1fr;
	}

	.aiz-datawarehouse-sources__item {
		min-height: 192px;
	}
}

/* ==========================================================================
   Datawarehouse — split (data-story + mijnaiz)
   ==========================================================================
   A third distinct split grid alongside `.aiz-split` (Over ons) and
   `.aiz-monitor-split`: fluid `minmax(0,1fr) minmax(0,1.4fr)`, edge to edge.
   The images are pure CSS (no asset) — see the pattern files.
   ========================================================================== */

.aiz-datawarehouse-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	background: var(--aiz-charcoal);
}

.aiz-datawarehouse-split--reverse {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.aiz-datawarehouse-split__image {
	min-height: 800px;
	background-position: center;
	background-size: cover;
}

.aiz-datawarehouse-split__image--data {
	/* Decorative data visualisation, page-specific — raw hex, as elsewhere. */
	background-image:
		linear-gradient(125deg, rgba(4, 11, 20, .2), rgba(4, 11, 20, .8)),
		repeating-linear-gradient(118deg, transparent 0 40px, rgba(0, 174, 255, .35) 41px 43px),
		radial-gradient(circle at 25% 35%, #01aef0 0 2px, transparent 3px 100%),
		linear-gradient(135deg, #06111e, #183858);
}

.aiz-datawarehouse-split__image--office {
	background-image:
		linear-gradient(rgba(18, 29, 48, .15), rgba(18, 29, 48, .15)),
		linear-gradient(135deg, transparent 49%, rgba(255, 255, 255, .45) 50% 51%, transparent 52%),
		linear-gradient(90deg, #8a9ca1 0 18%, #d2d8d7 18% 34%, #728b91 34% 50%, #dfe3df 50% 68%, #839599 68% 100%);
}

.aiz-datawarehouse-split__copy {
	align-self: center;
	max-width: 720px;
	padding: clamp(80px, 14vw, 200px) clamp(20px, 5vw, 120px);
}

.aiz-datawarehouse-split__copy h2 {
	font-size: clamp(35px, 3vw, 40px);
	color: var(--aiz-coral);
	letter-spacing: -.025em;
	line-height: 1.08;
	letter-spacing: -.025em;
}

.aiz-datawarehouse-split__copy h3 {
	margin: 32px 0 4px;
	color: var(--aiz-coral);
	font-size: 20px;
}

.aiz-datawarehouse-split__copy ul {
	padding-left: 20px;
}

.aiz-datawarehouse-split__copy .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	min-height: 44px;
	margin-top: 16px;
	padding: 11px 16px;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-coral);
	color: var(--aiz-white);
	font-weight: 500;
}

.aiz-datawarehouse-split__copy .wp-block-button__link:hover {
	background: #ff94a2;
}

@media (max-width: 1100px) {
	.aiz-datawarehouse-split,
	.aiz-datawarehouse-split--reverse {
		grid-template-columns: 1fr 1fr;
	}

	.aiz-datawarehouse-split__copy {
		padding-inline: 48px;
	}
}

@media (max-width: 820px) {
	.aiz-datawarehouse-split,
	.aiz-datawarehouse-split--reverse {
		grid-template-columns: 1fr;
	}

	.aiz-datawarehouse-split--reverse .aiz-datawarehouse-split__copy {
		order: 2;
	}

	.aiz-datawarehouse-split__image {
		min-height: 448px;
	}

	.aiz-datawarehouse-split__copy {
		max-width: none;
		padding: 96px clamp(20px, 5vw, 120px);
	}
}

/* ==========================================================================
   Statement — Datawarehouse variant
   ==========================================================================
   Shares the `.aiz-statement` family root with Monitor (see
   statement-monitor.php). This page's element is a Paragraph, not a Heading.
   ========================================================================== */

.aiz-statement--datawarehouse {
	background: var(--aiz-navy);
	padding-block: clamp(96px, 12vw, 200px);
}

.aiz-statement--datawarehouse p {
	max-width: 9.5ch;
	margin: 0;
	font-size: clamp(64px, 7.5vw, 96px);
	line-height: 1.06;
	letter-spacing: -.035em;
	color: var(--aiz-white);
}

@media (max-width: 560px) {
	.aiz-statement--datawarehouse p {
		font-size: 59px;
	}
}

/* ==========================================================================
   Datawarehouse — depth (feature carousel)
   ==========================================================================
   The card set is a REPEATABLE COLLECTION, unlocked at the track. Carousel
   behaviour is wired in aiz.js's "Datawarehouse's feature carousel" block,
   sharing the index-stepping primitive with Over ons' values carousel.
   ========================================================================== */

.aiz-datawarehouse-depth {
	/* Decorative gradient, page-specific — raw hex, as elsewhere. */
	background: linear-gradient(90deg, #e25e61, var(--aiz-coral));
}

.aiz-datawarehouse-depth h2,
.aiz-datawarehouse-depth h3 {
	color: var(--aiz-white);
}

.aiz-datawarehouse-depth__layout {
	display: grid;
	grid-template-columns: minmax(288px, .82fr) minmax(448px, 1.1fr);
	gap: clamp(64px, 9vw, 136px);
	align-items: stretch;
	padding-block: clamp(96px, 12vw, 200px);
}

.aiz-datawarehouse-depth__copy h2 {
	font-size: clamp(35px, 3vw, 40px);
	letter-spacing: -.025em;
}

.aiz-datawarehouse-depth__carousel {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.aiz-datawarehouse-depth__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(50% - 16px);
	gap: 32px;
	overflow: hidden;
}

.aiz-datawarehouse-depth__card {
	display: none;
	min-height: 464px;
	padding: 64px 32px 48px;
	background: rgba(255, 255, 255, .2);
}

.aiz-datawarehouse-depth__card.is-visible,
.aiz-datawarehouse-depth__card.is-visible + .aiz-datawarehouse-depth__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.aiz-datawarehouse-depth__card h3 {
	font-size: clamp(32px, 3vw, 40px);
}

.aiz-datawarehouse-depth__card p {
	font-size: 18px;
	font-weight: 600;
}

.aiz-datawarehouse-depth__controls {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}

.aiz-datawarehouse-depth__controls button {
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: var(--aiz-white);
	font-size: 19px;
	cursor: pointer;
}

.aiz-datawarehouse-depth__controls button[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
}

@media (max-width: 1100px) {
	.aiz-datawarehouse-depth__layout {
		grid-template-columns: .8fr 1.2fr;
		gap: 48px;
	}

	.aiz-datawarehouse-depth__track {
		grid-auto-columns: 75%;
	}
}

@media (max-width: 820px) {
	.aiz-datawarehouse-depth__layout {
		grid-template-columns: 1fr;
		gap: 64px;
	}

	.aiz-datawarehouse-depth__track {
		grid-auto-columns: 70%;
	}
}

@media (max-width: 560px) {
	.aiz-datawarehouse-depth__track {
		grid-auto-columns: 100%;
	}

	/* Below 560px the export collapses the two-card window to one — the
	   trailing sibling this rule would otherwise reveal stays hidden. */
	.aiz-datawarehouse-depth__card.is-visible + .aiz-datawarehouse-depth__card {
		display: none;
	}
}

/* ==========================================================================
   Datawarehouse — insight
   ========================================================================== */

.aiz-datawarehouse-insight {
	background: var(--aiz-charcoal);
	padding-block: clamp(96px, 12vw, 200px);
}

.aiz-datawarehouse-insight__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(64px, 10vw, 144px);
	align-items: center;
}

.aiz-datawarehouse-insight__visual {
	display: grid;
	place-items: center;
	min-height: 592px;
	overflow: hidden;
	background: radial-gradient(circle at 50% 50%, rgba(0, 186, 255, .25), transparent 62%), #071321;
}

.aiz-datawarehouse-insight__orb {
	width: min(384px, 70%);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		repeating-radial-gradient(circle at 40% 40%, transparent 0 10px, rgba(255, 128, 145, .8) 11px 12px, transparent 13px 20px),
		repeating-linear-gradient(35deg, transparent 0 13px, rgba(0, 191, 255, .55) 14px 15px);
	box-shadow: 0 0 96px #00a6e8;
}

.aiz-datawarehouse-insight__copy h2 {
	color: var(--aiz-coral);
	font-size: clamp(35px, 3vw, 40px);
	letter-spacing: -.025em;
}

.aiz-datawarehouse-insight__link {
	margin: 0;
}

.aiz-datawarehouse-insight__link a {
	display: inline-flex;
	gap: 16px;
	margin-top: 16px;
	color: var(--aiz-coral);
	font-weight: 600;
}

.aiz-datawarehouse-insight__link a::after {
	content: "→";
}

@media (max-width: 820px) {
	.aiz-datawarehouse-insight__layout {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Datawarehouse — CBS Microdata
   ========================================================================== */

.aiz-datawarehouse-microdata {
	/* Decorative dark background, page-specific — raw hex, as elsewhere. */
	background: #13243b;
	padding-block: clamp(96px, 12vw, 200px);
}

.aiz-datawarehouse-microdata__panel {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: clamp(48px, 9vw, 128px);
	align-items: center;
	padding: clamp(48px, 6vw, 80px);
	border-radius: 2px 2px 8px 2px;
	background: linear-gradient(135deg, #e25e61, var(--aiz-coral));
}

.aiz-datawarehouse-microdata__panel h2 {
	color: var(--aiz-white);
	font-size: clamp(35px, 3vw, 40px);
	letter-spacing: -.025em;
}

.aiz-datawarehouse-microdata__panel .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	min-height: 44px;
	margin-top: 16px;
	padding: 11px 16px;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-coral);
	color: var(--aiz-white);
	font-weight: 500;
}

.aiz-datawarehouse-microdata__mockup {
	display: grid;
	grid-template: 48px 1fr / 80px 1fr;
	min-height: 320px;
	padding: 16px;
	border: 6px solid var(--aiz-white);
	border-radius: 8px;
	background: #f5f6fa;
	box-shadow: 0 32px 64px rgba(16, 24, 32, .25);
}

.aiz-datawarehouse-microdata__mockup-header {
	grid-column: 1 / -1;
	margin: -2px -2px 16px;
	/* Decorative mockup chrome colour, page-specific — raw hex. */
	background: #4b2783;
}

.aiz-datawarehouse-microdata__mockup-sidebar {
	margin-right: 16px;
	background: repeating-linear-gradient(#e3e4eb 0 16px, transparent 16px 32px);
}

.aiz-datawarehouse-microdata__mockup-chart {
	display: flex;
	align-items: end;
	gap: 16px;
	padding: 32px;
	background: var(--aiz-white);
}

.aiz-datawarehouse-microdata__mockup-chart span {
	flex: 1;
	background: var(--aiz-coral);
}

.aiz-datawarehouse-microdata__mockup-chart span:nth-child(1) { height: 35%; }
.aiz-datawarehouse-microdata__mockup-chart span:nth-child(2) { height: 70%; }
.aiz-datawarehouse-microdata__mockup-chart span:nth-child(3) { height: 48%; }
.aiz-datawarehouse-microdata__mockup-chart span:nth-child(4) { height: 85%; }
.aiz-datawarehouse-microdata__mockup-chart span:nth-child(5) { height: 62%; }

@media (max-width: 820px) {
	.aiz-datawarehouse-microdata__panel {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.aiz-datawarehouse-microdata__panel {
		padding: 32px 20px;
	}

	.aiz-datawarehouse-microdata__mockup {
		grid-template-columns: 48px 1fr;
		min-height: 224px;
		padding: 10px;
	}

	.aiz-datawarehouse-microdata__mockup-chart {
		gap: 8px;
		padding: 16px;
	}
}

/* ==========================================================================
   Datawarehouse — clusters
   ==========================================================================
   A REPEATABLE COLLECTION, unlocked at the grid container.
   ========================================================================== */

.aiz-datawarehouse-clusters {
	background: var(--aiz-charcoal);
	padding-block: clamp(96px, 12vw, 200px);
}

.aiz-datawarehouse-clusters h2 {
	margin-bottom: 64px;
	text-align: center;
	color: var(--aiz-coral);
	font-size: clamp(35px, 3vw, 40px);
	letter-spacing: -.025em;
}

.aiz-datawarehouse-clusters__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.aiz-datawarehouse-clusters__card {
	min-height: 272px;
	padding: 32px;
	border-radius: 2px 2px 32px 2px;
	background: var(--aiz-white);
	color: var(--aiz-navy);
}

.aiz-datawarehouse-clusters__number {
	margin: 0;
	color: #e25e61;
	font-weight: 600;
}

.aiz-datawarehouse-clusters__card h3 {
	margin: 40px 0 16px;
	color: #e25e61;
	font-size: 22px;
}

@media (max-width: 820px) {
	.aiz-datawarehouse-clusters__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.aiz-datawarehouse-clusters__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Datawarehouse — contact
   ==========================================================================
   Reuses the `.aiz-contact--with-card` family (Over ons) with a
   `--datawarehouse` modifier for its own three-field grid form.
   ========================================================================== */

/* Keep the approved gap below the clusters wave; all component geometry comes
   directly from the shared Over ons contact rules above. */
.aiz-contact--datawarehouse {
	padding: 170px 0 200px;
}

.aiz-monitor-practice__pagination {
	margin-top: 20px;
}

.aiz-contact--datawarehouse .aiz-section-intro h2 {
	color: var(--aiz-coral);
}

/* Existing WordPress content may still carry the page-wide Datawarehouse
   gutter modifier. Reset only this panel to Over ons' container rhythm. */
.aiz-contact--datawarehouse .aiz-contact__panel {
	--aiz-page-gutter: clamp(24px, 8.33vw, 120px);
}

.aiz-contact__card--datawarehouse .aiz-contact__person h3 {
	color: var(--aiz-coral);
}

.aiz-contact--datawarehouse .aiz-contact__form label span {
	color: var(--aiz-coral);
}

.aiz-contact--datawarehouse .aiz-contact__submit {
	background: var(--aiz-coral);
}

.aiz-contact--datawarehouse .aiz-contact__form input:focus,
.aiz-contact--datawarehouse .aiz-contact__form textarea:focus {
	border-color: var(--aiz-coral);
	box-shadow: 0 0 0 3px rgba(255, 126, 144, .25);
}

.aiz-contact__portrait--initials {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	margin-bottom: 32px;
	border-radius: 50% 50% 10% 50%;
	background: linear-gradient(135deg, var(--aiz-navy), var(--aiz-coral));
	color: var(--aiz-white);
	font-size: 48px;
	font-weight: 600;
}

.aiz-contact__card--datawarehouse .aiz-contact__address a {
	color: var(--aiz-midnight);
}

/* Same contact icons as Over ons, recoloured for Datawarehouse. */
.aiz-contact--datawarehouse .aiz-contact__address a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--aiz-coral);
}

.aiz-contact--datawarehouse .aiz-contact__address p:nth-child(1) a::before {
	-webkit-mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
}

.aiz-contact--datawarehouse .aiz-contact__address p:nth-child(2) a::before {
	-webkit-mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
}

.aiz-contact--datawarehouse .aiz-contact__address p:nth-child(3) a::before {
	-webkit-mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
}

@media (max-width: 1180px) {
	.aiz-contact--datawarehouse .aiz-contact__panel {
		--aiz-page-gutter: 48px;
	}
}

@media (max-width: 780px) {
	.aiz-contact--datawarehouse .aiz-contact__panel {
		--aiz-page-gutter: 32px;
	}
}

/* ===========================================================================
   Actueel detail — .aiz-actueel-detail
   ===========================================================================
   single-actueel.html: a yellow article hero (native post fields) plus a
   narrower 995px article body rendered through post-content, a related-
   articles grid and a contact callout. No Page exists behind this route —
   every Actueel record shares this one template, exactly like the archive.

   `.aiz-page--actueel-detail` reuses the shared `.aiz-page` primitive for the
   hero grid and the related-articles section (both cap at the standard
   1200px); the narrower ARTICLE BODY gets its own explicit width formula
   below rather than the `.aiz-page` primitive, because the export nests two
   independent caps on the same element (`.page-container` at 1200px AND
   `.article-content` at 995px) — the combined effect is simply
   `min(gutter-relative width, 995px)`, expressed directly.
   ========================================================================== */

.aiz-page--actueel-detail {
	--aiz-page-gutter: 24px;
}

@media (max-width: 900px) {
	.aiz-page--actueel-detail {
		--aiz-page-gutter: 20px;
	}
}

@media (max-width: 620px) {
	.aiz-page--actueel-detail {
		--aiz-page-gutter: 16px;
	}
}

.aiz-actueel-detail {
	position: relative;
	overflow: hidden;
	/* 228px, not the export's own 83px: the export's header sits in normal
	   flow, but this theme's .aiz-header is a fixed overlay
	   (see CLAUDE.md), so the hero needs its own clearance added on top of
	   the header's real rendered height (measured 144px at >=901px) rather
	   than the export's flow-relative gap. 228px is the same clearance every
	   other hero using this grid (--solutions/--media/--slimmer-werken/
	   --solution) already uses. */
	padding-top: 228px;
	background: linear-gradient(90deg, #efab00 0%, var(--aiz-yellow) 60%);
	color: var(--aiz-white);
}

/*
 * Two-tier hero background height -- the same technique `.aiz-hero--media`
 * (Over ons) uses, reused here rather than reinvented: measured directly
 * from Correct_design/SVG/Actueel - detail.svg's own background path
 * (viewBox width 1440, so its coordinates are already real page pixels,
 * exactly like the hero-image mask above). The main column (the text, the
 * gap, and the near side of the image) is only 652.396px of yellow; a
 * narrow strip further right, safely inside the image's own horizontal
 * footprint, runs to 723.956px before also turning charcoal. The image
 * itself (566px tall + 228px padding-top = 794px) bleeds past both tiers,
 * opaque, hiding the seam -- the same "the image hides what the background
 * is doing behind it" trick Over ons relies on. Scoped to >900px, where the
 * two-column grid (and therefore the image's horizontal position) is
 * active; the <=900px stacked layout keeps the flat gradient above instead,
 * exactly like `.aiz-hero--media` keeps its dome there rather than a step.
 */
@media (min-width: 901px) {
	.aiz-actueel-detail {
		background: var(--aiz-navy);
	}

	.aiz-actueel-detail::before {
		content: "";
		position: absolute;
		z-index: 0;
		inset: 0;
		background: linear-gradient(90deg, #efab00 0%, var(--aiz-yellow) 60%);
		clip-path: polygon(
			0 0,
			100% 0,
			100% 723.956px,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 241.88px) 723.956px,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 313.9px) 652.396px,
			0 652.396px
		);
	}
}

.aiz-actueel-detail__hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 688px) minmax(360px, 481px);
	gap: 31px;
	align-items: start;
}

.aiz-actueel-detail__hero-copy {
	padding-bottom: 112px;
}

.aiz-actueel-detail__meta {
	align-items: center;
	gap: 16px;
	font-size: 14px;
	line-height: 1;
}

.aiz-actueel-detail__term .wp-block-post-terms,
.aiz-actueel-detail__term {
	margin: 0;
}

.aiz-actueel-detail__term a {
	display: inline-flex;
	width: max-content;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border: 1px solid var(--aiz-white);
	border-radius: 50px;
	color: var(--aiz-white);
	font-size: 14px;
	line-height: 14px;
}

.aiz-actueel-detail__title {
	margin: 8px 0 32px;
	font-size: clamp(46px, 4.45vw, 64px);
	line-height: 1.09;
	letter-spacing: -.02em;
	font-weight: 600;
}

.aiz-actueel-detail__author-row {
	gap: 24px;
	font-size: 14px;
	line-height: 1;
}

.aiz-actueel-detail__author {
	display: flex;
	align-items: center;
	gap: 16px;
}

.aiz-actueel-detail__author-image {
	width: 71px;
	height: 71px;
	border-radius: 50%;
	object-fit: cover;
}

.aiz-actueel-detail__author p {
	margin: 0;
}

.aiz-actueel-detail__author strong,
.aiz-actueel-detail__author span {
	display: block;
}

.aiz-actueel-detail__author strong {
	margin-bottom: 5px;
}

.aiz-actueel-detail__image {
	width: 481px;
	aspect-ratio: 481 / 566;
	margin: 0;
	align-self: end;
	/* Exact frame mask, extracted directly from the hero-image path inside
	   Correct_design/SVG/Actueel - detail.svg (translated to be relative to the
	   image's own box: viewBox 0 0 481 566) rather than approximated from the
	   PNG. It is a rounded two-step notch out of the top-right corner plus a
	   separate rounded notch cut into the bottom edge -- see
	   aiz/assets/images/actueel/detail-hero-mask.svg. aspect-ratio keeps the
	   481x566 proportions (so the mask never stretches) down to the 430px-wide
	   mobile tier below. */
	-webkit-mask: url(../images/actueel/detail-hero-mask.svg) center / 100% 100% no-repeat;
	mask: url(../images/actueel/detail-hero-mask.svg) center / 100% 100% no-repeat;
}

.aiz-actueel-detail__image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/*
 * Article body. See the module note above for why this is an explicit width
 * formula rather than the shared `.aiz-page` primitive.
 */
.aiz-actueel-detail__body {
	width: min(calc(100% - 48px), 995px);
	margin-inline: auto;
	/* No bottom padding here: the export's 168px/120px/88px "bottom" figures
	   are really the <article>'s own bottom padding, i.e. the gap before the
	   <aside class="contact-callout"> that follows it as a SEPARATE sibling
	   of <main>. wp:post-content forces the CTA to nest inside this wrapper
	   instead, so that gap is reproduced as the CTA's own margin-top below,
	   not as this wrapper's padding-bottom. */
	padding: 194px 0 0;
	background: var(--aiz-navy);
	color: var(--aiz-white);
}

.aiz-actueel-detail__lead {
	margin: 0 0 64px;
	font-size: 24px;
	line-height: 1.33;
	font-weight: 500;
}

.aiz-actueel-detail__section + .aiz-actueel-detail__section {
	margin-top: 64px;
}

.aiz-actueel-detail__section p {
	margin: 0;
}

.aiz-actueel-detail__section h2 {
	color: var(--aiz-yellow);
	font-size: 32px;
	line-height: 1.125;
	margin-bottom: 32px;
	font-weight: 600;
}

.aiz-actueel-detail__list {
	margin: 0;
	padding-left: 25px;
}

.aiz-actueel-detail__list--numbered {
	margin-top: 24px;
}

.aiz-actueel-detail__list--numbered li {
	padding-left: 8px;
	margin-bottom: 24px;
}

.aiz-actueel-detail__list--numbered li:last-child {
	margin-bottom: 0;
}

.aiz-actueel-detail__list--numbered li strong {
	display: block;
	margin-bottom: 2px;
}

.aiz-actueel-detail__back {
	margin: 64px 0 0;
}

.aiz-actueel-detail__back a {
	display: inline-flex;
	gap: 24px;
	align-items: center;
	color: var(--aiz-mist);
	font-weight: 500;
}

.aiz-actueel-detail__back a:hover,
.aiz-actueel-detail__back a:focus-visible {
	color: var(--aiz-white);
}

/*
 * Contact callout. Standalone shape — the export combines its own width cap
 * and panel styling on one element, so this does too rather than
 * force-fitting the two-level .aiz-cta family.
 *
 * In the export this is `<aside class="contact-callout page-container">`, a
 * SIBLING of `<article class="article-content page-container">` -- capped at
 * the full 1200px `--page-width`, not the article's own narrower 995px
 * `--content-width`. wp:post-content forces this CTA to render *inside* the
 * article body here, so its own `width: min(..., var(--aiz-page))` would
 * only ever resolve against `.aiz-actueel-detail__body`'s already-995px-
 * capped box, not the page. `left: 50%` + a negative `margin-left` of half
 * its own width is the standard breakout for exactly this ("wide" background
 * on a "content"-width column) — the same technique `.aiz-logos__marquee`
 * (Monitor) already uses for its own viewport-relative width elsewhere in
 * this file. `left: 50%` resolves against the narrow parent (moving the box
 * to the *parent's* centre, which sits at the page's real centre, since the
 * parent itself is centred); the negative margin then pulls back by half of
 * THIS element's own (viewport-relative) width, landing it centred on the
 * real page rather than the 995px column.
 */
.aiz-actueel-detail__cta {
	--cta-width: min(calc(100vw - 48px), var(--aiz-page));
	position: relative;
	left: 50%;
	width: var(--cta-width);
	margin: 168px 0 120px calc(var(--cta-width) / -2);
	padding: 64px 104px;
	border-radius: 25px;
	background: rgba(255, 206, 43, .2);
	color: var(--aiz-yellow);
}

.aiz-actueel-detail__cta p {
	max-width: 992px;
	margin: 0 0 32px;
	font-size: 24px;
	line-height: 1.33;
	font-weight: 500;
}

.aiz-actueel-detail__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 32px;
	padding: 12px 16px;
	border: 0;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-yellow);
	color: var(--aiz-white);
	font-size: 24px;
	line-height: 32px;
	font-weight: 500;
	transition: transform .2s ease, background .2s ease;
}

.aiz-actueel-detail__cta .wp-block-button__link:hover,
.aiz-actueel-detail__cta .wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	background: #ffda5e;
}

/* The export marks this arrow aria-hidden, so it is decoration, not content, matching the shared CTA-button convention (.aiz-cta__card-copy, .aiz-hero__copy, etc). */
.aiz-actueel-detail__cta .wp-block-button__link::after {
	content: "→";
}

/* Related articles. */
.aiz-actueel-detail__related {
	background: var(--aiz-charcoal);
	padding: 120px 0;
	color: var(--aiz-white);
}

.aiz-actueel-detail__related h2 {
	color: var(--aiz-yellow);
	font-size: 40px;
	line-height: 1.1;
	margin-bottom: 32px;
	font-weight: 600;
}

.aiz-actueel-detail__cta h2 {
	color: var(--aiz-yellow);
	font-size: 40px;
	line-height: 1.1;
	margin-bottom: 32px;
	font-weight: 600;
}

.aiz-actueel-detail__related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.aiz-actueel-detail__related-card {
	background: var(--aiz-white);
	color: var(--aiz-charcoal);
	padding: 32px 32px 24px;
	border-radius: 2px 2px 40px 2px;
	display: flex;
	flex-direction: column;
	min-height: 262px;
	transition: transform .2s ease;
}

/*
 * Same hover treatment as the Actueel archive cards
 * (.aiz-actueel .wp-block-post:hover) — the whole card lifts, the title
 * link gets no underline. Reduced-motion visitors already get the
 * transition shortened to near-zero by the sitewide rule above.
 */
.aiz-actueel-detail__related-card:hover {
	transform: translateY(-4px);
}

.aiz-actueel-detail__related-term {
	display: inline-flex;
	width: max-content;
	align-items: center;
	padding: 10px 16px;
	border-radius: 50px;
	background: var(--aiz-yellow);
	color: var(--aiz-white);
	font-size: 14px;
	line-height: 14px;
}

.aiz-actueel-detail__related-term--cases {
	background: var(--aiz-purple);
}

.aiz-actueel-detail__related-term--nieuws {
	background: var(--aiz-coral);
}

.aiz-actueel-detail__related-card h3 {
	font-size: 24px;
	line-height: 1;
	font-weight: 600;
	color: var(--aiz-yellow);
	margin: 16px 0 36px;
}

.aiz-actueel-detail__related-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	color: var(--aiz-mist);
	font-weight: 500;
}

/*
 * Matches the home Actueel cards' arrow treatment exactly: the same
 * icon-arrow-right-circle.svg masked onto a currentColor box, so it's the
 * identical yellow circled-arrow glyph, just sized down for this smaller
 * card (36px here vs. 42px on .aiz-news .wp-block-post::after).
 */
.aiz-actueel-detail__related-arrow {
	display: block;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	color: var(--aiz-yellow);
	background-color: currentColor;
	-webkit-mask: url("../images/icon-arrow-right-circle.svg") center / contain no-repeat;
	mask: url("../images/icon-arrow-right-circle.svg") center / contain no-repeat;
}

.aiz-actueel-detail__related-empty {
	padding: 48px 32px;
	border: 1px solid var(--aiz-mist);
	border-radius: 2px 2px 40px 2px;
}

@media (max-width: 1100px) {
	.aiz-actueel-detail__hero-grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
	}

	.aiz-actueel-detail__title {
		font-size: 48px;
	}

	.aiz-actueel-detail__body {
		padding-top: 170px;
	}

	.aiz-actueel-detail__related-grid {
		gap: 20px;
	}

	.aiz-actueel-detail__related-card {
		padding-inline: 24px;
	}
}

@media (max-width: 900px) {
	.aiz-actueel-detail {
		/* 93px measured mobile-header bottom + the export's own 60px gap. */
		padding-top: 153px;
	}

	.aiz-actueel-detail__hero-grid {
		grid-template-columns: 1fr .75fr;
		gap: 24px;
	}

	.aiz-actueel-detail__hero-copy {
		padding-bottom: 64px;
	}

	.aiz-actueel-detail__title {
		font-size: 40px;
		line-height: 1.08;
	}

	.aiz-actueel-detail__author-row {
		align-items: flex-end;
		flex-direction: column;
	}

	.aiz-actueel-detail__body {
		padding-top: 120px;
	}

	.aiz-actueel-detail__cta {
		--cta-width: calc(100vw - 40px);
		width: var(--cta-width);
		padding: 52px;
		margin: 120px 0 80px calc(var(--cta-width) / -2);
	}

	.aiz-actueel-detail__related {
		padding: 80px 0;
	}

	.aiz-actueel-detail__related-grid {
		grid-template-columns: 1fr;
	}

	.aiz-actueel-detail__related-card {
		min-height: 230px;
	}
}

@media (max-width: 620px) {
	.aiz-actueel-detail {
		/* 93px measured mobile-header bottom + the export's own 38px gap. */
		padding-top: 131px;
	}

	.aiz-actueel-detail__hero-grid {
		grid-template-columns: 1fr;
	}

	.aiz-actueel-detail__hero-copy {
		padding-bottom: 32px;
	}

	.aiz-actueel-detail__title {
		font-size: clamp(34px, 10vw, 44px);
		margin-bottom: 28px;
	}

	.aiz-actueel-detail__image {
		width: min(100%, 430px);
		justify-self: center;
	}

	.aiz-actueel-detail__author-row {
		align-items: flex-start;
	}

	.aiz-actueel-detail__author-image {
		width: 58px;
		height: 58px;
	}

	.aiz-actueel-detail__body {
		padding-top: 88px;
	}

	.aiz-actueel-detail__lead {
		font-size: 21px;
		margin-bottom: 52px;
	}

	.aiz-actueel-detail__section + .aiz-actueel-detail__section {
		margin-top: 52px;
	}

	.aiz-actueel-detail__section h2 {
		font-size: 28px;
		margin-bottom: 24px;
	}

	.aiz-actueel-detail__cta {
		--cta-width: calc(100vw - 32px);
		width: var(--cta-width);
		padding: 36px 24px;
		margin: 88px 0 64px calc(var(--cta-width) / -2);
		border-radius: 20px;
	}

	.aiz-actueel-detail__cta h2,
	.aiz-actueel-detail__related h2 {
		font-size: 32px;
	}

	.aiz-actueel-detail__cta p,
	.aiz-actueel-detail__cta .wp-block-button__link {
		font-size: 19px;
		line-height: 1.4;
	}

	.aiz-actueel-detail__cta .wp-block-button__link {
		gap: 20px;
	}

	.aiz-actueel-detail__related {
		padding: 64px 0;
	}

	.aiz-actueel-detail__related-card {
		padding: 28px 24px 22px;
	}

	.aiz-actueel-detail__related-card h3 {
		font-size: 22px;
	}
}

/* ===========================================================================
   Solutions detail — .aiz-hero--solution / .aiz-solution-detail
   ===========================================================================
   solution-hero.php. The hero and editable subtitle live in post content
   (`--solution`, singular — distinct from the archive's already-shipped
   `.aiz-hero--solutions`, plural, which is a different shape entirely: a
   flat 983px clip-path panel there, versus the stepped-height gradient panel
   here). Everything below the hero — approach cards, results carousel,
   testimonials, contact — is post-content, from item-solution-content.php,
   and reuses `.aiz-page--solutions` for every width-capped container: this
   export's own page-container gutter formula (48px / 40px@820 / 32px@560) is
   identical to the Solutions archive's, measured directly from both
   stylesheets rather than assumed.

   The hero's bottom edge is NOT flat — same technique as
   `.aiz-hero--datawarehouse` (see that module and hero-datawarehouse.php):
   the coloured panel is shorter behind the copy column and taller behind the
   photo column, stepping between the two with a small rounded S-curve. Both
   this page's own hero-background path and Datawarehouse's are structurally
   identical exports of the same idea (`M<w> <tall>H<x2>C...H<x1>H0V0H<w>V<tall>Z`),
   confirmed by comparing the raw path data — extracted directly from
   `Correct_design/SVG/Solutions - detail.svg` rather than approximated: text
   side ends at y=617.951, photo side runs to y=685.734, an S-curve between
   x=1008.23 and x=1076.45. The section box itself is sized to the SHORT
   (text) side; the extra height lives in `::before`'s own background art and
   bleeds past the section into `.aiz-solution-detail__approach` below via
   the same z-index-over-overflow:visible stacking `.aiz-hero--datawarehouse`
   uses, not a second technique. See
   aiz/assets/images/solutions/detail-hero-background.svg — named `detail-*`,
   NOT `hero-background.svg`, because that bare name is already
   `.aiz-hero--solutions` (plural, the archive hero)'s own asset; an earlier
   pass in this session briefly clobbered it by reusing the name, caught via
   `git status`/`git diff` before it shipped and reverted. */

.aiz-hero--solution {
	position: relative;
	z-index: 2;
	overflow: visible;
	min-height: 617.951px;
	height: 617.951px;
	padding: 0;
	background: transparent;
}

.aiz-hero--solution::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	left: 0;
	height: 685.734px;
	pointer-events: none;
	background: url(../images/solutions/detail-hero-background.svg?v=1) 50% 0 / 100% 100% no-repeat;
}

.aiz-hero--solution .aiz-hero__grid {
	padding-top: 228px;
	grid-template-columns: minmax(0, 688px) minmax(350px, 481px);
	gap: 31px;
}

.aiz-hero--solution .aiz-hero__copy {
	position: relative;
	z-index: 2;
}

/* Pulls the title and subtitle up toward the "Solutions" eyebrow — was a
   flat 32px flex `gap` on every child (40px
   total under the eyebrow, once its own 8px margin from the shared
   `.aiz-hero__copy p.aiz-hero__eyebrow` rule stacked on top), same as
   Datawarehouse's own tighter eyebrow-to-heading margin
   (`.aiz-hero--datawarehouse .aiz-hero__eyebrow`, 14px). The hero's own
   height and background art are untouched, so shortening the copy block
   simply opens up more space between the button and the colour change below
   it — the effect the user actually asked for, without moving the photo or
   the hero's bottom edge. */
.aiz-hero--solution .aiz-hero__eyebrow {
	margin: 0 0 14px;
}

.aiz-hero--solution__title {
	margin: 0 0 16px;
	font-size: clamp(44px, 4.45vw, 64px);
	line-height: 1.09;
	letter-spacing: -.03em;
	font-weight: 600;
}

.aiz-hero--solution__subtitle,
.aiz-hero--solution__subtitle p {
	margin: 0;
}

.aiz-hero--solution__subtitle {
	max-width: 640px;
	margin-bottom: 32px;
	font-size: 22px;
	line-height: 1.4;
	text-wrap: pretty;
}

/* Empty legacy subtitles retain their original frontend spacing. RichText
   supplies its own placeholder in the editor. */
.aiz-hero--solution__subtitle:empty { display: none; }

.aiz-hero--solution__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 44px;
	padding: 11px 16px;
	border: 1px solid var(--aiz-white);
	border-radius: 2px 2px 16px 2px;
	color: var(--aiz-white);
	font-weight: 500;
	transition: background-color .2s ease, color .2s ease;
}

.aiz-hero--solution__link:hover,
.aiz-hero--solution__link:focus-visible {
	background: var(--aiz-white);
	color: var(--aiz-midnight);
}

/*
 * Photo panel, exact frame mask. Extracted directly from the hero-image path
 * inside `Correct_design/SVG/Solutions - detail.svg` (translated to be
 * relative to the image's own box: bounding box x 839-1320, y 228-773 in the
 * page's own coordinate space -> viewBox 0 0 481 545, matching this grid's
 * own 481px column and 228px header-clearance padding-top exactly) rather
 * than approximated from the PNG or kept as the legacy export's plain
 * rounded-corner box. See aiz/assets/images/solutions/detail-hero-mask.svg.
 * `aspect-ratio` keeps the 481x545 proportions (so the mask never stretches)
 * at every width; the panel deliberately extends past this section's own
 * 686px height (228px padding-top + 545px = 773px, 87px more than the hero)
 * so the photo bleeds into the dark section below, the same z-index-over-
 * overflow:visible technique `.aiz-hero--datawarehouse` uses (see aiz.css'
 * Datawarehouse module and hero-datawarehouse.php) rather than a second,
 * independent design.
 */
.aiz-hero--solution__visual {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 481px;
	aspect-ratio: 481 / 545;
	height: auto;
	margin: 0;
	overflow: hidden;
	-webkit-mask: url(../images/solutions/detail-hero-mask.svg) 50% 50% / 100% 100% no-repeat;
	mask: url(../images/solutions/detail-hero-mask.svg) 50% 50% / 100% 100% no-repeat;
}

.aiz-hero--solution__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-hero--solution .aiz-hero__grid {
		grid-template-columns: 1.15fr .85fr;
	}
}

@media (max-width: 820px) {
	.aiz-hero--solution {
		min-height: 0;
		height: auto;
		padding: 130px 0 0;
		overflow: hidden;
		background: var(--aiz-purple);
	}

	/* The stepped panel is a desktop two-column effect (short behind the
	   copy, tall behind the photo); once the grid stacks to one column
	   below 820px there is no "behind the photo" left for it to describe,
	   so it is dropped in favour of the flat fallback above — same call
	   Datawarehouse's own narrow breakpoints make by resizing its art down
	   rather than keeping the two-height split, just simplified to "off"
	   since this page has no mobile reference art to size it from. */
	.aiz-hero--solution::before {
		display: none;
	}

	.aiz-hero--solution .aiz-hero__grid {
		grid-template-columns: 1fr;
		gap: 50px;
		padding-top: 0;
		padding-bottom: 72px;
	}

	.aiz-hero--solution__title {
		font-size: 48px;
	}

	.aiz-hero--solution__visual {
		width: min(100%, 481px);
		justify-self: end;
	}
}

@media (max-width: 560px) {
	.aiz-hero--solution__title {
		font-size: 39px;
		margin-bottom: 12px;
	}

	.aiz-hero--solution__subtitle {
		margin-bottom: 24px;
		font-size: 18px;
	}
}

/* Approach — De uitdaging / De oplossing / Aanpak.
   Correct_design's 1440px SVG places this section at y=617.951–1969.53
   (1351.579px). Its 1200x624 card grid starts at y=1141.98, hence the exact
   524.029px top padding and 332px / 32px / 260px row geometry below. The
   background asset carries both original curved boundaries: dark starts at
   y=973/1056.91 and returns to navy at y=1969.53/1844.01. */
.aiz-solution-detail__approach {
	position: relative;
	/* Lower than .aiz-hero--solution's z-index: 2, so the hero photo's own
	   bleed (see the hero module above) paints over this section's top edge
	   instead of this section's background hiding it. */
	z-index: 1;
	box-sizing: border-box;
	height: 1351.579px;
	padding: 524.029px 0 203.55px;
	overflow: hidden;
	background: var(--aiz-navy);
}

.aiz-solution-detail__approach::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	background: url(../images/solutions/detail-approach-background.svg?v=1) 50% 0 / 100% 100% no-repeat;
}

.aiz-solution-detail__approach-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 332px 260px;
	gap: 32px;
}

.aiz-solution-detail__approach-card {
	box-sizing: border-box;
	height: 100%;
	padding: 64px 32px;
	background: rgba(100, 144, 232, .16);
	color: var(--aiz-purple);
	border-radius: 2px 2px 50px 2px;
}

.aiz-solution-detail__approach-card--wide {
	grid-column: 1 / -1;
	background: var(--aiz-purple);
	color: var(--aiz-white);
	border-radius: 2px 2px 40px 2px;
}

.aiz-solution-detail__approach-card h2 {
	margin: 0 0 16px;
	font-size: 40px;
	line-height: 1.1;
}

.aiz-solution-detail__approach-card p {
	margin: 0;
}

@media (max-width: 1100px) {
	.aiz-solution-detail__approach {
		height: auto;
		padding: 140px 0;
		overflow: visible;
		background: var(--aiz-navy);
	}

	/* Below the corrected 1440px desktop composition, retain the export's
	   compact responsive transition instead of distorting the fixed SVG. */
	.aiz-solution-detail__approach::before {
		inset: 0 14% auto 0;
		height: 90px;
		background: #182942;
		border-radius: 0 0 50px 0;
	}

	.aiz-solution-detail__approach-grid {
		grid-template-rows: none;
	}

	.aiz-solution-detail__approach-card {
		height: auto;
	}
}

@media (max-width: 820px) {
	.aiz-solution-detail__approach {
		padding: 130px 0;
	}

	.aiz-solution-detail__approach-grid {
		grid-template-columns: 1fr;
	}

	.aiz-solution-detail__approach-card--wide {
		grid-column: auto;
	}
}

@media (max-width: 560px) {
	.aiz-solution-detail__approach {
		padding: 110px 0 90px;
	}

	.aiz-solution-detail__approach::before {
		height: 48px;
	}

	.aiz-solution-detail__approach-grid {
		gap: 18px;
	}

	.aiz-solution-detail__approach-card {
		padding: 42px 24px;
	}

	.aiz-solution-detail__approach-card h2 {
		font-size: 34px;
	}
}

/* Results carousel. */
.aiz-solution-detail__results {
	padding: 200px 0;
	background: var(--aiz-navy);
}

.aiz-solution-detail__results-layout {
	display: grid;
	grid-template-columns: 584px minmax(0, 1fr);
	gap: 135px;
	align-items: start;
}

.aiz-solution-detail__results-copy h2 {
	margin: 0 0 32px;
	color: var(--aiz-purple);
	font-size: 56px;
	line-height: 1.08;
}

.aiz-solution-detail__results-copy p {
	margin: 0 0 64px;
}

/*
 * Matches the export's `.button--blue` (aiz-solutions-detail/styles.css):
 * a filled purple pill-cornered button, not the default WP block button.
 */
.aiz-solution-detail__results-copy .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 44px;
	padding: 11px 16px;
	border: 1px solid transparent;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-purple);
	color: var(--aiz-white);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
}

.aiz-solution-detail__results-copy .wp-block-button__link:hover,
.aiz-solution-detail__results-copy .wp-block-button__link:focus-visible {
	background: #4f79ce;
}

.aiz-solution-detail__results-carousel {
	min-width: 0;
}

.aiz-solution-detail__results-viewport {
	overflow: hidden;
}

.aiz-solution-detail__results-track {
	display: flex;
	gap: 32px;
	transition: transform .35s ease;
}

.aiz-solution-detail__result-card {
	flex: 0 0 378px;
	min-height: 410px;
	padding: 64px 32px 48px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 2px;
}

.aiz-solution-detail__result-card h3 {
	margin: 0;
	font-size: 40px;
	line-height: 1.1;
}

.aiz-solution-detail__result-card p {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.aiz-solution-detail__result-card--green {
	background: rgba(44, 143, 130, .2);
	color: var(--aiz-teal);
}

.aiz-solution-detail__result-card--pink {
	background: rgba(255, 128, 145, .2);
	color: var(--aiz-coral);
}

.aiz-solution-detail__result-card--yellow {
	background: rgba(255, 206, 43, .18);
	color: var(--aiz-yellow);
}

.aiz-solution-detail__results-controls {
	display: flex;
	gap: 18px;
	margin-top: 18px;
}

.aiz-solution-detail__results-controls button {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--aiz-purple);
	font-size: 22px;
	cursor: pointer;
	appearance: none;
}

.aiz-solution-detail__results-controls button[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
}

@media (max-width: 1100px) {
	.aiz-solution-detail__results-layout {
		grid-template-columns: 1fr;
		gap: 64px;
	}

	.aiz-solution-detail__results-copy {
		max-width: 620px;
	}
}

@media (max-width: 820px) {
	.aiz-solution-detail__results {
		padding: 130px 0;
	}
}

@media (max-width: 560px) {
	.aiz-solution-detail__results {
		padding: 100px 0;
	}

	.aiz-solution-detail__results-copy h2 {
		font-size: 46px;
	}

	.aiz-solution-detail__results-copy p {
		margin-bottom: 40px;
	}

	.aiz-solution-detail__result-card {
		flex-basis: calc(100vw - 48px);
		min-height: 360px;
		padding: 48px 24px 36px;
	}

	.aiz-solution-detail__result-card h3 {
		font-size: 34px;
	}
}

/* Contact, `--solution` variant on the shared `.aiz-contact--with-card` family. */
.aiz-contact--solution .aiz-section-intro h2 {
	color: var(--aiz-purple);
}

.aiz-contact--solution .aiz-contact__panel {
	gap: 115px;
}

/* Submit button and Rogier's name/icons: purple, per Correct_design/PNG/Solutions - detail. */
.aiz-contact--solution .aiz-contact__submit {
	background: var(--aiz-purple);
}

.aiz-contact--solution .aiz-contact__person h3 {
	color: var(--aiz-purple);
}

/* Same real Feather-style contact icons as Over ons (not the Unicode-glyph
   fallback the shared base rule draws), recoloured purple for Solutions. */
.aiz-contact--solution .aiz-contact__address a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--aiz-purple);
}

/*
 * `content: ""` is repeated in each nth-child rule below (not just the
 * shared reset above) because the base glyph rules
 * (`.aiz-contact__address p:nth-child(n) a::before { content: "☎" }` etc.)
 * carry one more type selector (p + a + ::before) than the shared
 * `.aiz-contact--solution .aiz-contact__address a::before` reset, so on
 * specificity alone the base glyph wins and shows through, in black,
 * underneath the mask. Matching the base's own p:nth-child shape here
 * gives these a higher class count and lets them win outright.
 */
.aiz-contact--solution .aiz-contact__address p:nth-child(1) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
}

.aiz-contact--solution .aiz-contact__address p:nth-child(2) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
}

.aiz-contact--solution .aiz-contact__address p:nth-child(3) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
}

@media (max-width: 1100px) {
	.aiz-contact--solution .aiz-contact__panel {
		padding: 80px 64px;
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 60px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aiz-solution-detail__results-track {
		transition: none;
	}
}

/* Keep the shared stacked contact layout below the desktop breakpoint. */
@media (max-width: 900px) {
	.aiz-contact--solution .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: 72px;
	}
}

@media (max-width: 640px) {
	.aiz-contact--solution .aiz-contact__panel {
		padding: 48px 24px;
	}
}

/* ==========================================================================
   Datawarehouse — iteration 2 aligned to Correct_design/Datawarehouse
   ========================================================================== */

.aiz-hero--datawarehouse {
	position: relative;
	z-index: 2;
	min-height: 566px;
	height: 566px;
	padding: 0;
	overflow: visible;
	background: transparent;
}

.aiz-hero--datawarehouse::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	left: 0;
	height: 628.012px;
	pointer-events: none;
	background: url(../images/datawarehouse/hero-background.svg) 50% 0 / 100% 100% no-repeat;
}

.aiz-hero--datawarehouse__grid {
	grid-template-columns: 688px 481px;
	gap: 31px;
	align-items: start;
	padding-top: 228px;
}

.aiz-hero--datawarehouse .aiz-hero__copy {
	position: relative;
	z-index: 2;
}

/* The editable summary below the CTA needs its own space in document flow. */
.aiz-hero--datawarehouse:has(.aiz-datawarehouse-hero-summary) {
	height: auto;
}

.aiz-hero--datawarehouse:has(.aiz-datawarehouse-hero-summary)::before {
	height: 100%;
}

.aiz-hero--datawarehouse:has(.aiz-datawarehouse-hero-summary) .aiz-hero--datawarehouse__grid {
	padding-bottom: 64px;
}

@media (min-width: 901px) {
	.aiz-hero--datawarehouse:has(.aiz-datawarehouse-hero-summary) .aiz-hero--datawarehouse__grid {
		padding-bottom: 160px;
	}

}

/* Side by side the photo keeps the design's overlap whatever the copy's height:
   hero and grid row end on the band's left edge (565.935 of the background's
   628.012, hence 110.97%) and the photo hangs 109.5 of its 481px below it. */
@media (min-width: 1101px) {
	.aiz-hero--datawarehouse:has(.aiz-datawarehouse-hero-summary)::before {
		height: 110.97%;
	}

	.aiz-hero--datawarehouse:has(.aiz-datawarehouse-hero-summary) .aiz-hero--datawarehouse__grid {
		padding-bottom: 0;
	}

	.aiz-hero--datawarehouse:has(.aiz-datawarehouse-hero-summary) .aiz-hero__copy {
		padding-bottom: 48px;
	}

	.aiz-hero--datawarehouse:has(.aiz-datawarehouse-hero-summary) .aiz-hero--datawarehouse__visual {
		align-self: end;
		height: auto;
		aspect-ratio: 481 / 447.478;
		margin-bottom: -22.76%;
	}
}

.aiz-datawarehouse-hero-summary {
	max-width: 640px;
	margin: 28px 0 0;
	font-size: 18px;
	line-height: 1.6;
}

.aiz-section-datawarehouse :is(#contact, #datawarehouse-clusters-title, #mijnaiz-voordelen) {
	scroll-margin-top: 160px;
}

.aiz-contact--datawarehouse .aiz-contact__panel {
	grid-template-columns: minmax(0, 1fr) minmax(295px, 340px);
}

.aiz-contact--datawarehouse .aiz-contact__card {
	min-width: 0;
	padding-inline: 24px;
}

.aiz-contact--datawarehouse .aiz-contact__address {
	white-space: normal;
}

.aiz-contact--datawarehouse .aiz-contact__address a {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
	overflow-wrap: anywhere;
}

.aiz-contact--datawarehouse .aiz-contact__address a[href^="mailto:"] {
	font-size: clamp(13px, 1.1vw, 16px);
	white-space: nowrap;
}

@media (max-width: 1180px) {
	.aiz-contact--datawarehouse .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

.aiz-hero--datawarehouse .aiz-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
}

.aiz-hero--datawarehouse .aiz-hero__copy h1 {
	max-width: 650px;
	margin: 0 0 34px;
	font-size: 64px;
	line-height: 1.08;
	letter-spacing: -.035em;
}

.aiz-hero--datawarehouse .wp-block-button__link {
	margin: 0;
	padding: 10px 16px;
	border-radius: 2px 2px 16px 2px;
}

.aiz-hero--datawarehouse .wp-block-button__link::after {
	content: "→";
	font-size: 22px;
}

.aiz-hero--datawarehouse__visual {
	position: relative;
	z-index: 3;
	width: 481px;
	height: 447.478px;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	-webkit-mask: url(../images/datawarehouse/hero-mask.svg) 50% 50% / 100% 100% no-repeat;
	mask: url(../images/datawarehouse/hero-mask.svg) 50% 50% / 100% 100% no-repeat;
}

.aiz-hero--datawarehouse__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.aiz-section-datawarehouse .aiz-header__brand {
	width: 104px;
	height: 45px;
	background: url(../images/aiz-datawarehouse-logo.svg?v=1) no-repeat left center / contain;
}

.aiz-datawarehouse-intro,
.aiz-datawarehouse-sources {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	background: var(--aiz-navy);
}

.aiz-datawarehouse-intro {
	height: 824px;
	padding: 230px 0 90px;
}

.aiz-datawarehouse-intro__layout h2,
.aiz-datawarehouse-sources__heading h2,
.aiz-datawarehouse-split__copy h2,
.aiz-datawarehouse-depth__copy h2,
.aiz-datawarehouse-microdata-detail__copy h2,
.aiz-datawarehouse-clusters h2,
.aiz-contact--datawarehouse .aiz-section-intro h2 {
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -.025em;
}

.aiz-datawarehouse-intro__text {
	max-width: 688px;
	font-size: 24px;
	line-height: 1.35;
}

.aiz-datawarehouse-sources {
	height: 1452px;
	padding: 64px 0 148px;
}

.aiz-datawarehouse-sources__heading {
	max-width: 930px;
}

.aiz-datawarehouse-sources__heading > .wp-block-group {
	max-width: 900px;
}

.aiz-datawarehouse-sources__grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-top: 214px;
}

.aiz-datawarehouse-sources__item {
	position: relative;
	display: block;
	height: 230px;
	min-height: 0;
	padding: 30px 42px;
	border-radius: 2px 2px 40px 2px;
}

.aiz-datawarehouse-sources__logo {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
}

.aiz-datawarehouse-sources__logo img {
	max-width: 82%;
	max-height: 62%;
	object-fit: contain;
}

.aiz-datawarehouse-sources__item-link {
	position: absolute;
	right: 28px;
	bottom: 22px;
}

.aiz-datawarehouse-sources__item-link a {
	display: block;
	width: 24px;
	height: 24px;
	overflow: hidden;
	background: var(--aiz-coral);
	font-size: 0;
	-webkit-mask: url(../images/icon-arrow-right-circle.svg) center / 24px 24px no-repeat;
	mask: url(../images/icon-arrow-right-circle.svg) center / 24px 24px no-repeat;
}

.aiz-datawarehouse-split {
	height: 716px;
	grid-template-columns: 41.5% 58.5%;
}

.aiz-datawarehouse-split--reverse {
	height: 924px;
	grid-template-columns: 58.8% 41.2%;
}

.aiz-datawarehouse-split__image {
	height: 100%;
	min-height: 0;
	background-size: cover;
}

.aiz-datawarehouse-split__image--data {
	background-image: url(../images/datawarehouse/data-stream.jpg);
	background-position: center;
}

.aiz-datawarehouse-split__image--office {
	background-image: url(../images/datawarehouse/mijnaiz-office.jpg);
	background-position: center;
}

.aiz-datawarehouse-split__copy {
	box-sizing: border-box;
	min-width: 0;
	max-width: 720px;
	padding: 112px 88px;
}

.aiz-datawarehouse-split--reverse .aiz-datawarehouse-split__copy {
	max-width: none;
	padding: 116px 110px 90px 120px;
}

.aiz-datawarehouse-split__copy h2 {
	margin-top: 0;
}

.aiz-statement--datawarehouse {
	box-sizing: border-box;
	height: 706px;
	padding: 150px 0;
}

.aiz-statement--datawarehouse p {
	max-width: 850px;
	font-size: 96px;
}

.aiz-datawarehouse-depth {
	box-sizing: border-box;
	height: 864px;
	overflow: visible;
}

.aiz-datawarehouse-depth__layout {
	grid-template-columns: 600px minmax(0, 1fr);
	gap: 118px;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	padding: 104px 0 104px max(20px, calc((100vw - 1200px) / 2));
}

.aiz-datawarehouse-depth__copy h2 {
	margin-top: 0;
	font-size: 64px;
}

.aiz-datawarehouse-depth__track {
	grid-auto-columns: 378px;
	gap: 32px;
}

.aiz-datawarehouse-depth__card {
	box-sizing: border-box;
	height: 464px;
	min-height: 0;
	padding: 56px 32px 48px;
}

.aiz-datawarehouse-depth__card h3 {
	font-size: 40px;
}

.aiz-datawarehouse-depth__carousel {
	overflow: visible;
}

.aiz-datawarehouse-microdata-detail {
	box-sizing: border-box;
	height: 928px;
	overflow: hidden;
	background: var(--aiz-charcoal);
}

.aiz-datawarehouse-microdata-detail__layout {
	display: grid;
	grid-template-columns: 58.8194% 41.1806%;
	height: 100%;
}

.aiz-datawarehouse-microdata-detail__gallery {
	--microdata-image-left: 223px;
	--microdata-image-width: 479px;
	--microdata-image-height: 498px;
	position: relative;
	height: var(--microdata-image-height);
	margin-top: 200px;
}

.aiz-datawarehouse-microdata-detail__gallery img {
	position: absolute;
	top: 0;
	width: var(--microdata-image-width);
	height: var(--microdata-image-height);
	object-fit: cover;
	border-radius: 0 0 44px 0;
}

.aiz-datawarehouse-microdata-detail__gallery img:first-child {
	right: auto;
}

.aiz-datawarehouse-microdata-detail__gallery img:last-of-type {
	right: auto;
}

.aiz-datawarehouse-microdata-detail__gallery img.is-preview {
	left: calc(var(--microdata-image-left) - var(--microdata-image-width) - 32px);
}

.aiz-datawarehouse-microdata-detail__gallery img.is-active {
	left: var(--microdata-image-left);
}

.aiz-datawarehouse-microdata-detail__copy {
	box-sizing: border-box;
	padding: 200px 70px 70px 0;
}

.aiz-datawarehouse-microdata-detail__copy h2 {
	margin: 0 0 44px;
	color: var(--aiz-coral);
}

.aiz-datawarehouse-microdata-detail__copy ul {
	padding-left: 24px;
}

.aiz-datawarehouse-microdata-detail__controls {
	position: absolute;
	top: calc(var(--microdata-image-height) + 16px);
	right: auto;
	left: calc(var(--microdata-image-left) + var(--microdata-image-width) - 72px);
	display: flex;
	gap: 40px;
	margin: 0;
}

.aiz-datawarehouse-microdata-detail__controls button {
	display: block;
	width: 16px;
	height: 16px;
	min-width: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: var(--aiz-coral);
	cursor: pointer;
	font-size: 0;
}

.aiz-datawarehouse-microdata-detail__controls button:first-child {
	-webkit-mask: url(../images/icon-arrow-left.svg) center / 16px 16px no-repeat;
	mask: url(../images/icon-arrow-left.svg) center / 16px 16px no-repeat;
}

.aiz-datawarehouse-microdata-detail__controls button:last-child {
	-webkit-mask: url(../images/icon-arrow-right.svg) center / 16px 16px no-repeat;
	mask: url(../images/icon-arrow-right.svg) center / 16px 16px no-repeat;
}

.aiz-datawarehouse-microdata {
	box-sizing: border-box;
	height: 830px;
	padding: 200px 0 62px;
	background: var(--aiz-navy);
}

.aiz-datawarehouse-microdata__panel {
	box-sizing: border-box;
	grid-template-columns: 44% 56%;
	gap: 34px;
	height: 568px;
	padding: 58px 100px;
	border-radius: 2px 2px 24px 24px;
	background: linear-gradient(112deg, #e75e63 0%, #ff7f92 100%);
}

.aiz-datawarehouse-microdata__panel h2 {
	margin: 0 0 34px;
	font-size: 64px;
}

.aiz-datawarehouse-microdata__panel p {
	max-width: 410px;
	font-size: 22px;
	font-weight: 600;
}

.aiz-datawarehouse-microdata__panel .wp-block-button__link {
	margin-top: 16px;
	border: 1px solid var(--aiz-white);
	background: transparent;
}

.aiz-datawarehouse-microdata__mockup {
	display: block;
	grid-template: none;
	width: 100%;
	height: 310px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 0 28px 0;
	overflow: hidden;
	box-shadow: none;
}

.aiz-datawarehouse-microdata__mockup img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 1%;
}

.aiz-datawarehouse-clusters {
	position: relative;
	box-sizing: border-box;
	height: auto;
	/* Keep the content-to-wave gap equal on both sides: the preceding panel
	   has 62px bottom padding, the wave rises 90px, and the following contact
	   panel starts after 170px. 62 + 198 - 90 = 170. */
	margin-top: 198px;
	padding: 84px 0 190px;
	overflow: visible;
}

.aiz-datawarehouse-clusters::before {
	content: "";
	position: absolute;
	top: -90px;
	right: 0;
	left: auto;
	width: 75%;
	height: 91px;
	background: var(--aiz-charcoal);
	clip-path: path("M 0 91 C 15.9 91 30 78.7 33.5 62.9 C 37 53.9 37 41.6 40.6 32.6 C 47.6 12.3 58.2 0 75 0 H 2000 V 91 Z");
}

.aiz-datawarehouse-clusters::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 75%;
	height: 91px;
	background: var(--aiz-navy);
	clip-path: path("M 0 91 C 15.9 91 30 78.7 33.5 62.9 C 37 53.9 37 41.6 40.6 32.6 C 47.6 12.3 58.2 0 75 0 H 2000 V 91 Z");
	transform: scaleX(-1);
}

.aiz-datawarehouse-clusters > .aiz-page {
	position: relative;
	z-index: 1;
}

.aiz-datawarehouse-clusters h2 {
	margin: 0 0 36px;
	text-align: center;
}

.aiz-datawarehouse-clusters__grid {
	gap: 32px;
}

.aiz-datawarehouse-clusters__card {
	box-sizing: border-box;
	height: 290px;
	min-height: 0;
	padding: 46px 32px 34px;
	border-radius: 2px 2px 48px 2px;
}

.aiz-datawarehouse-clusters__number {
	color: #8ea1b6;
	font-size: 14px;
}

.aiz-datawarehouse-clusters__card h3 {
	margin: 12px 0 38px;
	font-size: 40px;
	line-height: 1.04;
}

.aiz-datawarehouse-clusters__card > p:last-child {
	font-size: 17px;
}

.aiz-contact--datawarehouse {
	box-sizing: border-box;
	height: auto;
	padding: 170px 0 200px;
	background: var(--aiz-navy);
}

.aiz-contact--datawarehouse .aiz-section-intro h2 {
	color: var(--aiz-coral);
}

.aiz-contact__card--datawarehouse .aiz-contact__person h3 {
	color: var(--aiz-coral);
}

.aiz-section-datawarehouse .aiz-footer__accent {
	height: 5px;
}

.aiz-section-datawarehouse .aiz-footer__content {
	padding-block: 52px 22px;
	gap: 38px;
}

@media (min-width: 1101px) and (max-width: 1334px) {
	.aiz-hero--datawarehouse__grid {
		grid-template-columns: minmax(0, 688fr) minmax(320px, 481fr);
	}

	.aiz-hero--datawarehouse__visual {
		width: 100%;
	}
}

@media (max-width: 1100px) {
	.aiz-hero--datawarehouse .aiz-hero__copy h1 {
		max-width: none;
		font-size: clamp(42px, 4.4vw, 56px);
	}

	.aiz-hero--datawarehouse__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
	}

	.aiz-hero--datawarehouse__visual {
		width: 100%;
	}

	.aiz-datawarehouse-depth__layout {
		grid-template-columns: 44% 56%;
		gap: 48px;
	}

	.aiz-datawarehouse-microdata__panel {
		padding-inline: 56px;
	}
}

/* The responsive Datawarehouse prototype changes to its compact navigation
   at 1100px. Keep this page-specific so the established breakpoints on the
   other page templates are unaffected. */
@media (min-width: 901px) and (max-width: 1100px) {
	.aiz-section-datawarehouse .aiz-header {
		top: 12px;
		width: calc(100% - 48px);
	}

	.aiz-section-datawarehouse .aiz-header__account {
		display: none;
	}

	.aiz-section-datawarehouse .aiz-header__shell {
		min-height: 98px;
		padding: 16px 28px;
	}

	.aiz-section-datawarehouse .aiz-header__toggle {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.aiz-section-datawarehouse .aiz-header__toggle-icon,
	.aiz-section-datawarehouse .aiz-header__toggle-icon::before,
	.aiz-section-datawarehouse .aiz-header__toggle-icon::after {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--aiz-yellow);
		transition: .2s ease;
	}

	.aiz-section-datawarehouse .aiz-header__toggle-icon {
		position: relative;
	}

	.aiz-section-datawarehouse .aiz-header__toggle-icon::before,
	.aiz-section-datawarehouse .aiz-header__toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.aiz-section-datawarehouse .aiz-header__toggle-icon::before {
		top: -7px;
	}

	.aiz-section-datawarehouse .aiz-header__toggle-icon::after {
		top: 7px;
	}

	.aiz-section-datawarehouse .aiz-header__toggle[aria-expanded="true"] .aiz-header__toggle-icon {
		background: transparent;
	}

	.aiz-section-datawarehouse .aiz-header__toggle[aria-expanded="true"] .aiz-header__toggle-icon::before {
		top: 0;
		transform: rotate(45deg);
	}

	.aiz-section-datawarehouse .aiz-header__toggle[aria-expanded="true"] .aiz-header__toggle-icon::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.aiz-section-datawarehouse .aiz-header__nav {
		position: absolute;
		top: 108px;
		right: 0;
		left: 0;
		display: none;
		padding: 28px;
		border-radius: 16px;
		background: var(--aiz-charcoal);
		box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
	}

	.aiz-section-datawarehouse .aiz-header__nav.is-open {
		display: block;
	}

	.aiz-section-datawarehouse .aiz-header__nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

@media (max-width: 1100px) {
	.aiz-hero--datawarehouse,
	.aiz-datawarehouse-intro,
	.aiz-datawarehouse-sources,
	.aiz-datawarehouse-split,
	.aiz-datawarehouse-split--reverse,
	.aiz-statement--datawarehouse,
	.aiz-datawarehouse-depth,
	.aiz-datawarehouse-microdata-detail,
	.aiz-datawarehouse-microdata,
	.aiz-datawarehouse-clusters,
	.aiz-contact--datawarehouse {
		height: auto;
		min-height: 0;
	}

	.aiz-hero--datawarehouse {
		padding: 144px 0 0;
		overflow: hidden;
		background: var(--aiz-navy);
	}

	.aiz-hero--datawarehouse::before {
		display: block;
		height: 520px;
		background-image: url(../images/datawarehouse/hero-background.svg);
	}

	.aiz-hero--datawarehouse__grid {
		grid-template-columns: 1fr;
		padding-top: 0;
	}

	.aiz-hero--datawarehouse__visual {
		width: 100%;
		max-width: 480px;
		height: auto;
		aspect-ratio: 481 / 447.478;
		margin-top: 32px;
	}

	.aiz-datawarehouse-intro,
	.aiz-datawarehouse-sources {
		padding-block: clamp(64px, 8vw, 96px);
	}

	.aiz-datawarehouse-sources__grid {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 64px;
	}

	.aiz-datawarehouse-split,
	.aiz-datawarehouse-split--reverse,
	.aiz-datawarehouse-microdata-detail__layout,
	.aiz-datawarehouse-microdata__panel {
		grid-template-columns: 1fr;
	}

	.aiz-datawarehouse-split--reverse .aiz-datawarehouse-split__copy {
		order: 1;
	}

	.aiz-datawarehouse-split--reverse .aiz-datawarehouse-split__image {
		order: 2;
	}

	.aiz-datawarehouse-split__image {
		height: clamp(288px, 42vw, 416px);
	}

	.aiz-datawarehouse-split__copy,
	.aiz-datawarehouse-split--reverse .aiz-datawarehouse-split__copy {
		padding: clamp(64px, 8vw, 96px) max(20px, 8vw);
	}

	.aiz-datawarehouse-split__copy h2 {
		overflow-wrap: anywhere;
	}

	.aiz-statement--datawarehouse {
		padding-block: clamp(80px, 10vw, 120px);
	}

	.aiz-datawarehouse-depth__layout {
		grid-template-columns: 1fr;
		padding: clamp(64px, 8vw, 96px) max(20px, 8vw);
	}

	.aiz-datawarehouse-microdata-detail__gallery {
		--microdata-image-left: max(20px, calc((100vw - 479px) / 2));
		--microdata-image-width: min(479px, calc(100vw - 40px));
		--microdata-image-height: min(498px, calc((100vw - 40px) * 1.03967));
		min-height: 500px;
		order: 2;
		margin-top: 64px;
	}

	.aiz-datawarehouse-microdata-detail__copy {
		order: 1;
		padding: clamp(64px, 8vw, 96px) max(20px, 8vw) 0;
	}

	.aiz-datawarehouse-microdata {
		padding: clamp(64px, 8vw, 96px) 0;
	}

	.aiz-datawarehouse-microdata__panel {
		height: auto;
		padding: 56px;
	}

	.aiz-datawarehouse-clusters {
		/* Mirror the responsive contact section's top gap while accounting for
		   Microdata's responsive bottom padding and the 90px wave. */
		margin-top: calc(clamp(80px, 10vw, 110px) + 90px - clamp(64px, 8vw, 96px));
		padding: 84px 0 190px;
	}

	.aiz-datawarehouse-clusters__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.aiz-contact--datawarehouse {
		padding: clamp(80px, 10vw, 110px) 0 200px;
	}
}

@media (max-width: 700px) {
	.aiz-hero--datawarehouse {
		padding-top: 110px;
	}

	.aiz-hero--datawarehouse::before {
		height: 420px;
	}

	.aiz-hero--datawarehouse .aiz-hero__copy h1 {
		font-size: clamp(40px, 11vw, 48px);
	}

	.aiz-datawarehouse-depth__copy h2,
	.aiz-datawarehouse-microdata__panel h2 {
		font-size: clamp(36px, 10vw, 48px);
	}

	.aiz-statement--datawarehouse p {
		font-size: 44px;
	}

	.aiz-hero--datawarehouse .wp-block-buttons,
	.aiz-hero--datawarehouse .wp-block-button,
	.aiz-hero--datawarehouse .wp-block-button__link {
		width: 100%;
	}

	.aiz-hero--datawarehouse .wp-block-button__link {
		justify-content: space-between;
	}

	.aiz-datawarehouse-sources__grid,
	.aiz-datawarehouse-clusters__grid {
		grid-template-columns: 1fr;
	}

	.aiz-datawarehouse-sources__item {
		height: auto;
		min-height: 180px;
		padding: 32px 24px 24px;
	}

	.aiz-datawarehouse-clusters__card {
		height: auto;
		min-height: 0;
		padding: 32px 24px;
	}

	.aiz-datawarehouse-depth__track {
		grid-auto-columns: 100%;
	}

	.aiz-datawarehouse-depth__card.is-visible + .aiz-datawarehouse-depth__card {
		display: none;
	}

	.aiz-datawarehouse-microdata__panel {
		padding: 40px 24px;
	}

	.aiz-datawarehouse-microdata__mockup {
		height: 220px;
	}
}

@media (max-width: 900px) {
	.aiz-datawarehouse-clusters {
		padding: 120px 0;
	}
}

@media (max-width: 640px) {
	.aiz-datawarehouse-clusters {
		padding: 88px 0 110px;
	}

	.aiz-contact--datawarehouse {
		padding-bottom: 88px;
	}
}

/* ===========================================================================
   Ik werk voor — overzicht (page-ik-werk-voor.php)
   ===========================================================================
   Two modules: the hero (`.aiz-hero--ik-werk-voor`) and the four alternating
   audience cards (`.aiz-ikwv-*`). Breakpoints are this route's own (1100 /
   780 / 480), not the export's — first pass, not yet checked against the
   fidelity harness (see CLAUDE.md), same status as
   `.aiz-hero--slimmer-werken-sub` when it shipped.

   Colours and every pixel measurement below come from a direct pixel scan of
   `Correct_design/PNG/Solutions - ik werk voor - overzicht@2x.png` (the
   corrected design's own SVG confirms the gradient stops:
   `paint0_linear_671_1108`, #FFCE2B at 0% -> #6490E8 at 60%, i.e.
   `var(--aiz-yellow)` -> `var(--aiz-purple)`, already-existing tokens, no new
   colour introduced) — NOT the Additional_pages_html export's own
   `styles.css`, which disagrees on structure in two ways superseded here per
   CLAUDE.md's "Correct_design wins where visuals conflict" rule:
     1. The photo column measures 481px wide at every card, same as the
        hero's own image — not the export's 374/379px. `grid-template-columns:
        minmax(0, 688px) minmax(320px, 481px); gap: 31px;` is therefore
        reused verbatim from the hero on every card, not a second, narrower
        pair of numbers.
     2. Each card's rounded gradient box measures exactly `.aiz-page`'s own
        1200px/120px-gutter width at 1440 (left edge at x=120, right edge at
        x=1320, both confirmed directly) — not a separately-padded wider
        wrapper. So `.aiz-ikwv-card` IS the `.aiz-page`-width box (its own
        background/radius/vertical padding live there); `__inner` is only the
        grid, no separate width or horizontal padding of its own.
   Vertical padding (64px) and the image's -119px desktop bottom margin
   (so the row is 377px tall while the 496px-tall photo bleeds past it) DO
   match the export's own numbers exactly once the corrected width above is
   used — confirmed by arithmetic (64 + 377 + 64 = 505, matching the measured
   card height), so those two structural numbers are kept from the export
   per CLAUDE.md's DOM/spacing precedence.
   ========================================================================== */

/*
 * Hero, `--ik-werk-voor` variant.
 *
 * Background-shift TECHNIQUE is a direct reuse of
 * `.aiz-hero--slimmer-werken-sub`'s own (page-slimmer-werken-subpage.php,
 * "Samen slimmer werken"): a single `::before` gradient layer, two-tier
 * `clip-path`, the step positioned with
 * `max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2)` so it tracks
 * `.aiz-page`'s real right edge at any viewport width instead of a fixed
 * percentage that only lines up with the image at one width. The step
 * always falls either behind the (opaque) image itself or past the page's
 * real right edge — both invisible — so which exact sub-pixel it lands on
 * never matters.
 *
 * Corrected 2026-09-06 (live-page check against `/ik-werk-voor/`): the
 * first pass's `padding: 87px` and `::before` heights (403/463px) wrongly
 * subtracted the header's own 144px design height from the PNG's measured
 * boundaries, as if the header pushed the hero down in normal flow. It
 * doesn't — `.aiz-header` is `position: fixed` and floats OVER the
 * hero's own top edge (confirmed live: `.aiz-hero`'s box starts at the
 * very top of the page, same y as the header's own box), exactly like
 * every other hero on this site. So the PNG's own measurements are
 * already in the hero's local frame and need no subtraction: the eyebrow
 * text starts at design y=231 (not 87), and the two gradient-tier
 * boundaries sit at design y=547 (short, text-column side) and y=607
 * (tall, image-column side) — both re-confirmed directly (flat gradient
 * colour up to that row, `--aiz-navy` #121d30 immediately after, at
 * several x columns each). `padding-top: 228px` (547/607 both rounded
 * against this) also matches the 228px header-clearance value every
 * other hero on this site already uses for this exact same shared
 * `.aiz-header` — this page had simply never been checked live before.
 */
.aiz-hero--ik-werk-voor {
	position: relative;
	overflow: hidden;
	padding: 228px 0 0;
	background: var(--aiz-navy);
}

.aiz-hero--ik-werk-voor::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0 0 auto;
	height: 607px;
	background: linear-gradient(90deg, var(--aiz-yellow) 0%, var(--aiz-purple) 60%);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2)) 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2)) 90.11%,
		0 90.11%
	);
}

.aiz-hero--ik-werk-voor .aiz-hero__grid {
	z-index: 1;
	grid-template-columns: minmax(0, 688px) minmax(320px, 481px);
	gap: 31px;
}

.aiz-hero--ik-werk-voor .aiz-hero__eyebrow {
	margin: 0 0 8px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .01em;
}

.aiz-hero--ik-werk-voor .aiz-hero__copy h1 {
	margin: 0;
	max-width: 688px;
	font-size: clamp(36px, 4.45vw, 64px);
	line-height: 1.095;
}

/*
 * Corrected 2026-09-07: the "no notch, plain rounded rect" reading above
 * (2026-09-06) was wrong. The corner notch is real -- it just doesn't show
 * up comparing the flattened PNG/JPG export against the live page; it only
 * shows up in `Correct_design/SVG/Solutions - ik werk voor - overzicht.svg`,
 * where each photo is drawn as its own hand-authored vector path (fill
 * `url(#patternN)`, the photo itself supplied as the pattern's image), not
 * a plain rect. Extracting that path's own `d` and normalizing it to a
 * local (0,0) origin gives the exact design shape -- no more pixel-scan
 * guessing needed. The hero's own path (bbox 481x446, exactly this box's
 * own size) is `mask-ik-werk-voor-hero.svg`, applied the same way every
 * other masked image on this site already is (see
 * `mask-slimmer-werken-sub-hero.svg`, `mask-ga-voor-slim-hero.svg`):
 * `mask`/`-webkit-mask` with `100% 100%` sizing, which scales with the box
 * at any breakpoint (unlike a fixed-unit `clip-path: path()`, which would
 * clip incorrectly once the box goes fluid under 1100px). `border-radius`
 * is dropped since the mask itself already draws the rounded corners --
 * whatever image an editor swaps in via the media library keeps this same
 * shape, since the mask is applied to the box, not baked into the photo.
 */
.aiz-hero--ik-werk-voor .aiz-hero__visual {
	width: 100%;
	max-width: 481px;
	height: 446px;
	aspect-ratio: 481 / 446;
	margin: 0;
	-webkit-mask: url(../images/mask-ik-werk-voor-hero.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-ik-werk-voor-hero.svg) no-repeat center / 100% 100%;
}

.aiz-hero--ik-werk-voor .aiz-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-hero--ik-werk-voor {
		padding-top: 180px;
	}

	.aiz-hero--ik-werk-voor .aiz-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
	}
}

@media (max-width: 780px) {
	.aiz-hero--ik-werk-voor {
		padding-top: 180px;
	}

	.aiz-hero--ik-werk-voor::before {
		height: 740px;
		clip-path: none;
	}

	.aiz-hero--ik-werk-voor .aiz-hero__grid {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	.aiz-hero--ik-werk-voor .aiz-hero__visual {
		width: min(78vw, 380px);
		height: auto;
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	.aiz-hero--ik-werk-voor {
		padding-top: 155px;
	}

	.aiz-hero--ik-werk-voor::before {
		height: 670px;
	}

	.aiz-hero--ik-werk-voor .aiz-hero__copy h1 {
		font-size: 36px;
		line-height: 1.15;
	}
}

/* --------------------------------------------------------------------------
   Doelgroepkaarten — .aiz-ikwv / .aiz-ikwv-card
   -------------------------------------------------------------------------- */

.aiz-ikwv {
	display: flex;
	flex-direction: column;
	gap: 200px;
	margin-block: 200px;
}

/*
 * `padding-inline: 104px` corrected 2026-09-06: the card's own text and
 * image were both flush against its rounded edges (only `padding-block`
 * existed), reading wrong compared to the PNG. Direct pixel scan: card
 * left edge at design x=120, "overheid" heading/eyebrow text starting at
 * x=223 (padding-left 103), "branche" reversed card's photo starting at
 * x=222 (padding-left 102) and the "overheid" photo ending 105px short of
 * the card's own right edge — all three agree on ~104px, applied
 * symmetrically inline so text and image always sit the same distance in
 * from the card's own edge, on whichever side they land.
 */
.aiz-ikwv-card {
	width: min(calc(100% - (2 * var(--aiz-page-gutter))), var(--aiz-page));
	margin-inline: auto;
	padding-block: 64px;
	padding-inline: 104px;
	background: linear-gradient(90deg, var(--aiz-yellow) 0%, var(--aiz-purple) 60%);
	border-radius: 25px;
}

/*
 * Column widths corrected 2026-09-06 alongside the card's new
 * `padding-inline`: 586px text / 31px gap / 375px image (was 688/31/481,
 * sized to fill the card's full un-padded width). With the padding now
 * accounting for the card's own inset, the image column matches the
 * photo's own measured width (375px, see `.aiz-ikwv-card__image` below)
 * exactly, so the image simply fills its column on both orientations —
 * no more flush-start/flush-end special-casing needed for the reversed
 * variant.
 */
.aiz-ikwv-card__inner {
	display: grid;
	grid-template-columns: minmax(0, 586px) minmax(280px, 375px);
	gap: 31px;
	align-items: start;
}

.aiz-ikwv-card--reversed .aiz-ikwv-card__inner {
	grid-template-columns: minmax(280px, 375px) minmax(0, 586px);
}

/*
 * `gap: 32px` (2026-09-06 fix) used to apply uniformly to EVERY pair of
 * `__body` children, including eyebrow-to-heading -- but the eyebrow
 * paragraph was also missing this page's eyebrow override entirely (only
 * `.aiz-hero__copy p.aiz-hero__eyebrow` existed, scoped to the hero, not
 * `.aiz-ikwv-card__body`), so it was rendering as a plain, unstyled `<p>`
 * with the browser's own ~16px default margin ON TOP of the 32px gap --
 * a ~48px gap where the design shows about 7-8px (measured from box-edge
 * estimates: eyebrow's own line-height slack + heading's line-height
 * slack subtracted from the ink-to-ink gap, the same method used to place
 * this hero's own `padding-top`). Switched from a uniform flex `gap` to
 * per-pair margins so eyebrow-to-heading (8px, matching the hero's own
 * `.aiz-hero__eyebrow` convention exactly) can differ from
 * heading-to-copy and copy-to-button (32px each, unchanged from before).
 */
.aiz-ikwv-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.aiz-ikwv-card__body .aiz-hero__eyebrow {
	margin: 0 0 8px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .01em;
}

.aiz-ikwv-card__body h3 {
	margin: 0 0 32px;
	font-size: clamp(36px, 4.45vw, 64px);
	font-weight: 600;
	line-height: 1.095;
}

.aiz-ikwv-card__copy {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-bottom: 32px;
}

.aiz-ikwv-card__intro {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(18px, 1.03rem + .3vw, 24px);
	line-height: 1.34;
	font-weight: 500;
}

.aiz-ikwv-card__lead {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(22px, 1.05rem + 1.35vw, 32px);
	font-weight: 600;
	line-height: 1.125;
}

.aiz-ikwv-card .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	padding: 12px 16px;
	border: 1px solid var(--aiz-white);
	border-radius: 2px 2px 16px 2px;
	background: transparent;
	color: var(--aiz-white);
	font-weight: 500;
	transition: background-color 150ms ease, color 150ms ease;
}

.aiz-ikwv-card .wp-block-button__link::after {
	content: "→";
}

.aiz-ikwv-card .wp-block-button__link:hover,
.aiz-ikwv-card .wp-block-button__link:focus-visible {
	background: var(--aiz-white);
	color: var(--aiz-charcoal);
}

/*
 * Width (375px) is a direct pixel measurement, not a share of the hero's
 * 481px image (the two aren't the same asset/crop): a variance-based scan
 * of the corrected PNG (does the colour at this x change across different
 * y rows -- real photo -- or stay identical -- still the card's own
 * gradient, which keeps shifting hue with x this close to its own 60%
 * stop, so a naive single-colour match false-positives as "photo" here)
 * found the photo itself flat up to x=842 then jumping hard at x=843, and
 * the same signature on the "branche" card's photo (222 to 600). With the
 * card's own `padding-inline` (see `.aiz-ikwv-card` above) now accounting
 * for the card's inset, this 375px column width matches the photo exactly
 * on both orientations, so the image simply fills its grid column -- no
 * reversed-variant special casing needed for width/position. Height
 * (496px) and `margin-bottom: -119px` re-confirmed directly (photo's flat
 * bottom edge sits 54-55px past the card's own rounded bottom, matching
 * this 505px-card/-119px-margin arithmetic exactly).
 *
 * Corners corrected 2026-09-07: "no notch, plain rounded rect" (2026-09-06)
 * was wrong -- see the hero's own comment above for how this was found
 * (each photo is its own hand-authored vector path in
 * `Correct_design/SVG/Solutions - ik werk voor - overzicht.svg`, not a
 * plain rect). Unlike the hero, this notch is NOT the same shape on every
 * card -- each of the four photos has its own individually-placed notch in
 * the source design (not a strict mirror of the reversed/non-reversed
 * layout), so a single shared mask can't reproduce all four. Each card is
 * masked by its own file (`mask-ik-werk-voor-card-<slug>.svg`, matched by
 * position via `:nth-of-type` below, since the four cards are a fixed,
 * content-locked narrative set -- see this pattern's own file-level
 * comment -- not a reorderable list). `border-radius` is dropped: the mask
 * itself draws the rounded corners, and stays put whatever photo an editor
 * swaps in from the media library, since it's applied to the box, not
 * baked into the image.
 */
.aiz-ikwv-card__image {
	width: 100%;
	max-width: 375px;
	height: 496px;
	aspect-ratio: 375 / 496;
	margin: 0;
	align-self: start;
}

.aiz-ikwv-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aiz-ikwv-card:nth-of-type(1) .aiz-ikwv-card__image {
	-webkit-mask: url(../images/mask-ik-werk-voor-card-overheid.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-ik-werk-voor-card-overheid.svg) no-repeat center / 100% 100%;
}

.aiz-ikwv-card:nth-of-type(2) .aiz-ikwv-card__image {
	-webkit-mask: url(../images/mask-ik-werk-voor-card-branche.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-ik-werk-voor-card-branche.svg) no-repeat center / 100% 100%;
}

.aiz-ikwv-card:nth-of-type(3) .aiz-ikwv-card__image {
	-webkit-mask: url(../images/mask-ik-werk-voor-card-onderwijs.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-ik-werk-voor-card-onderwijs.svg) no-repeat center / 100% 100%;
}

.aiz-ikwv-card:nth-of-type(4) .aiz-ikwv-card__image {
	-webkit-mask: url(../images/mask-ik-werk-voor-card-bedrijfsleven.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-ik-werk-voor-card-bedrijfsleven.svg) no-repeat center / 100% 100%;
}

@media (min-width: 1100px) {
	.aiz-ikwv-card__image {
		margin-block-end: -119px;
	}
}

@media (max-width: 1100px) {
	.aiz-ikwv-card__inner,
	.aiz-ikwv-card--reversed .aiz-ikwv-card__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr);
	}
}

@media (max-width: 900px) {
	.aiz-ikwv {
		gap: 120px;
		margin-block: 120px;
	}
}

@media (max-width: 780px) {
	.aiz-ikwv-card {
		padding-inline: 24px;
	}

	.aiz-ikwv-card__body {
		min-width: 0;
	}

	.aiz-ikwv-card__body h3 {
		overflow-wrap: anywhere;
	}

	.aiz-ikwv-card__inner,
	.aiz-ikwv-card--reversed .aiz-ikwv-card__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.aiz-ikwv-card__image,
	.aiz-ikwv-card--reversed .aiz-ikwv-card__image {
		order: 2;
		width: min(100%, 380px);
		height: auto;
		margin: 0 auto -32px;
	}

	.aiz-ikwv-card__body,
	.aiz-ikwv-card--reversed .aiz-ikwv-card__body {
		order: 1;
	}
}

@media (max-width: 480px) {
	.aiz-ikwv {
		gap: 88px;
		margin-block: 88px;
	}

	.aiz-ikwv-card {
		padding-block: 40px;
	}

	.aiz-ikwv-card__body h3 {
		font-size: 36px;
	}
}

/* ===========================================================================
   Ik werk voor — de overheid (child page, page-ik-werk-voor-overheid.php)
   ===========================================================================
   Two modules so far (hero + intro); the approach-cards and contact sections
   from docs/2026-08-16-remaining-nine-pages-plan.md (4.4) are a follow-up.
   Breakpoints are this route's own reuse of `.aiz-hero--slimmer-werken-sub`'s
   (1100/780/480) — first pass, not yet checked against tools/fidelity, same
   status as that module and `.aiz-hero--ik-werk-voor` when they shipped.
   ========================================================================== */

/*
 * Hero, `--ik-werk-voor-overheid` variant.
 *
 * Background-shift TECHNIQUE is a direct reuse of
 * `.aiz-hero--slimmer-werken-sub`'s own (page-slimmer-werken-subpage.php,
 * "Samen slimmer werken"): a single `::before` gradient layer, two-tier
 * `clip-path`, the step positioned with
 * `max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2)` so it tracks
 * `.aiz-page`'s real right edge at any viewport width instead of a fixed
 * percentage that only lines up with the image at one width.
 *
 * Every measurement below comes from a direct pixel scan of
 * `Correct_design/PNG/Solutions - ik werk voor de overheid@2x.png`, cross-
 * checked against the exact vector path embedded in the matching SVG (the
 * shape filled by `pattern0_675_8285`, the hero photo's own pattern fill) —
 * both agree to within rounding. `padding-top: 228px` also matches the
 * export's own `.hero-layout { padding-top: 228px }` literally, and is the
 * same header-clearance value every other hero on this site already uses
 * for this exact shared `.aiz-header`. The gradient's two stops were
 * colour-sampled directly (`#3e67ba` at 0%, reaching `var(--aiz-purple)`
 * #6490e8 by 60% and holding flat after) — the darker stop has no existing
 * design-token match, so it is a literal value, same treatment as
 * `.aiz-hero--slimmer-werken-sub`'s own `#1c6056`. The two band-height tiers
 * (960px under the image column, matching the export's own
 * `.hero { min-height: 960px }` literally; 866px under the text column) give
 * a step at 866/960 = 90.21% of the ::before's own height — the same style
 * of step-percentage as this page's siblings (90.15%, 90.11%), not a
 * coincidence: all three heroes share the same header-clearance/gradient
 * proportions.
 */
.aiz-hero--ik-werk-voor-overheid {
	position: relative;
	overflow: hidden;
	padding: 228px 0 0;
	/*
	 * Matches `.aiz-page--solutions`'s own fixed 24px gutter. Without this,
	 * `var(--aiz-page-gutter)` inside this hero's `::before` (below) and its
	 * 1100px media-query override falls through to the GLOBAL root gutter
	 * instead (clamp(24px, 8.33vw, 120px) above 1180px, then stepped 48px/
	 * 32px/20px) -- a custom property set on `.aiz-page--solutions` itself
	 * only scopes to that div and its descendants, and `::before` is a
	 * sibling of it, not a descendant. Between roughly 900-1180px viewport
	 * width the global value (48px) is 24px larger than the real gutter,
	 * which pushes the computed page-edge -- and therefore the gradient
	 * step -- 24px to the LEFT of the image's actual left edge, exposing a
	 * sliver of the shorter tier where the taller one should still be
	 * running behind the photo.
	 */
	--aiz-page-gutter: 24px;
}

/*
 * Step x-position corrected 2026-09-07: this used to sit at .aiz-page's own
 * real right edge (`max(var(--aiz-page-gutter), (100% - var(--aiz-page)) /
 * 2)` in from the right) -- the same edge the hero image's own right side
 * sits flush against -- so the taller 960px tier only covered the sliver of
 * true outer gutter beyond the image, while the shorter 866px tier (90.21%
 * of 960) covered the image's own footprint too, same as the text. That is
 * pixel-exact against Correct_design's own reference width, but leaves only
 * ~9px of margin between where the tier goes dark (866px) and where the
 * image's own bottom-right notch starts revealing it (~857px at that same
 * width) -- correct, but not something to keep re-deriving by hand every
 * time this hero's numbers change.
 *
 * Moved the step to the image's own LEFT edge instead, so the taller 960px
 * tier covers the image's ENTIRE column rather than just the outer gutter
 * past it -- at this hero's full 828px-tall reference size that's a ~100px
 * margin instead of ~9px (960 vs. the notch's own ~857px start). The text
 * side is untouched: it never reaches anywhere near the image's own
 * column, so it keeps the original, still pixel-verified 866px tier
 * exactly as measured.
 *
 * This rule's own `- 481px` is only correct above 1100px, where the grid's
 * image column (`.aiz-hero__grid`'s default, non-media-query
 * `minmax(320px, 481px)` track) is provably always exactly 481px -- solved
 * the same "equal-growth-until-limit" track-sizing algorithm the grid spec
 * uses and confirmed the track never has to shrink below its 481px max
 * anywhere above this breakpoint, for any `--aiz-page-gutter` value the
 * site sets. BELOW 1100px the grid switches to a genuinely narrower,
 * fr-based image column (see the 1100px media query below), so a flat
 * `481px` overshoots -- see that override for the matching, narrower
 * formula.
 */
.aiz-hero--ik-werk-voor-overheid::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0 0 auto;
	height: 960px;
	background: linear-gradient(90deg, #3e67ba 0%, var(--aiz-purple) 60%);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 481px) 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 481px) 90.21%,
		0 90.21%
	);
}

.aiz-hero--ik-werk-voor-overheid .aiz-hero__grid {
	z-index: 1;
	grid-template-columns: minmax(0, 688px) minmax(320px, 481px);
	gap: 31px;
}

.aiz-hero--ik-werk-voor-overheid .aiz-hero__eyebrow {
	margin: 0 0 8px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .01em;
}

/* Export's own h1: `clamp(48px, 4.45vw, 64px)`, weight 600, line-height 1.09375, `letter-spacing: -0.025em` — kept literally, including the letter-spacing no sibling hero happens to declare. */
.aiz-hero--ik-werk-voor-overheid .aiz-hero__copy h1 {
	margin: 0 0 8px;
	max-width: 688px;
	font-size: clamp(48px, 4.45vw, 64px);
	line-height: 1.094;
	letter-spacing: -0.025em;
}

/* Export's `.hero-introduction`: 24px/32px, weight 500, margin-bottom 32px — a single paragraph, not the two-paragraph grid `.aiz-hero__intro-copy` carries elsewhere, but the wrapper is reused regardless for structural consistency with the other audience-page heroes. */
.aiz-hero--ik-werk-voor-overheid .aiz-hero__intro-copy {
	margin-top: 0;
	max-width: 620px;
}

.aiz-hero--ik-werk-voor-overheid .aiz-hero__intro-copy p {
	margin: 0 0 32px;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
}

/*
 * Image shape: `mask-ik-werk-voor-overheid-hero.svg`, a 481×828 rounded rect
 * (16px corners) with TWO notches bitten out — a wide, shallow one at the
 * TOP-LEFT (facing the copy column, 275.91×69.85) and a narrow, tall one at
 * the BOTTOM-RIGHT (62.88×199.12) — traced directly from the exact vector
 * path embedded in the Correct_design SVG (`pattern0_675_8285`'s own fill
 * path). 2026-09-07: briefly replaced with a plain `border-radius` on the
 * (correct, in hindsight) suspicion that this was the same false-notch
 * trap already hit once on the sibling `.aiz-hero--ik-werk-voor` (overzicht)
 * hero — reverted after a direct crop comparison against
 * `Correct_design/PNG/Solutions - ik werk voor de overheid@2x.png` showed
 * both notches are genuinely drawn in the source artwork (clean, deliberate
 * cuts, not a flattened-overlap artifact), unlike that sibling's case. Both
 * notches read straight through to the gradient band/navy behind the
 * image, same masking technique as `mask-slimmer-werken-sub-hero.svg`.
 *
 * 2026-09-07 (2nd pass, REVERTED 2026-09-07 3rd pass): tried widening each
 * notch's "shoulder" corner (where the cut meets the image's own outer
 * edge) and its deep-vertex corner from the design's own 16px up to
 * 34.92px/31.44px, on the theory that the two corners sitting only
 * ~38px/~31px apart at 16px radius read as a double-bend/"tooth". This was
 * wrong: widening until the straight run between the two corners closed to
 * 0 made the convex+concave arcs meet as a single continuous S-curve
 * (mathematically smooth, tangent-continuous) — which reads as an odd
 * wave/blip, not a clean rounded corner. Confirmed both ways by rendering
 * the mask standalone and compositing it against the real photo: the
 * widened version visibly "bites" right at that junction; the original,
 * un-widened path (exactly `pattern0_675_8285`'s own coordinates, not a
 * re-derivation) renders as a single flowing fillet with no bite. Reverted
 * to those original coordinates in full — both notches are the design's
 * own 16px-radius corners with their original straight run between each
 * pair, unchanged from the very first extraction.
 */
/*
 * `height: auto` + `aspect-ratio` (not a fixed `height: 828px`) is load-
 * bearing between 780-1100px: `.aiz-hero__grid`'s image column is
 * `minmax(280px, .85fr)` there (see the 1100px media query below), which
 * genuinely resolves narrower than 481px at plausible widths in that
 * range (measured live: ~376px at 950px viewport) -- a fixed height would
 * have stretched the photo and squashed the mask's notch shape sideways
 * instead of letting the box shrink proportionally, same reasoning as this
 * rule's own `max-width: 1100px` sibling breakpoint below. The background
 * band behind the image (`::before`) doesn't need a matching adjustment:
 * its two-tier height is anchored horizontally to `.aiz-page`'s own real
 * right edge, not to the image column's width, so it stays correctly
 * positioned behind the image at any width down to the 780px stack
 * breakpoint regardless of how narrow the image column itself gets.
 */
.aiz-hero--ik-werk-voor-overheid .aiz-hero__visual {
	width: 100%;
	max-width: 481px;
	height: auto;
	aspect-ratio: 481 / 828;
	margin: 0;
	-webkit-mask: url(../images/mask-ik-werk-voor-overheid-hero.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-ik-werk-voor-overheid-hero.svg) no-repeat center / 100% 100%;
}

.aiz-hero--ik-werk-voor-overheid .aiz-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-hero--ik-werk-voor-overheid .aiz-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
	}

	/*
	 * Matching override for the `::before` background step above: below
	 * 1100px the image column is no longer a flat 481px (see this hero's
	 * own `.aiz-hero__grid` rule right above and its base, non-media
	 * sibling's comment) -- it's `minmax(280px, .85fr)` against a
	 * `1.15fr` text column, which the grid's track-sizing algorithm
	 * resolves to `max(280px, 0.85 / 2 * available-width)` (0.85/2, not
	 * 0.85, because the .85fr share only gets half of the *combined*
	 * 1.15+1.85=2fr pool). `available-width` is this hero's own grid
	 * content box: `.aiz-page`'s real width minus the grid's 31px column
	 * gap. Re-using a flat `481px` here (this hero's WIDE image width)
	 * would subtract too much and push the step's tall-tier boundary past
	 * the image's actual left edge into the gap/text side -- exactly the
	 * "drifts left of the image" bug this override fixes. Using the
	 * image's real, narrower width here instead keeps the boundary
	 * sitting behind the image at every width in this range, same as the
	 * unmodified rule already does above 1100px.
	 */
	.aiz-hero--ik-werk-voor-overheid::before {
		--aiz-iwvo-img-w: max(280px, 0.425 * (min(100% - (2 * var(--aiz-page-gutter)), var(--aiz-page)) - 31px));
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-iwvo-img-w)) 100%,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-iwvo-img-w)) 90.21%,
			0 90.21%
		);
	}
}

/*
 * Reported 2026-09-07 (live check this comment's earlier "pending" note
 * promised): at 780-900px wide, the 2-column layout above (this hero's own
 * `minmax(0, 1.15fr) minmax(280px, .85fr)` grid, same as
 * `.aiz-hero--slimmer-werken-sub`'s) let the COPY column overflow the
 * gradient band before the image did -- confirmed live at 800px wide,
 * where the intro paragraph wraps to 7 lines in its narrowed ~405px
 * column and pushes the "Ontdek ArbeidsmarktInZicht" button onto the dark
 * navy section below. Textbook version of the exact bug
 * `.aiz-hero--slimmer-werken-sub`'s own history describes fixing (see
 * that hero's ≤780px rule, "Reported 2026-09-05") -- but THIS hero's own
 * copy (a full paragraph, not that sibling's shorter one) overflows at a
 * wider breakpoint than 780px, so its stacking threshold has to start
 * wider too: 900px, not 780px.
 *
 * Same fix, same reasoning: switch to the stacked layout early rather
 * than chase a taller fixed height for an inherently two-column problem.
 * No new height measurement needed for the wider 780-900px slice this
 * adds to the stacked range -- once stacked, the copy's own wrap width is
 * capped by `.aiz-hero__copy h1`'s `max-width: 688px` and
 * `.aiz-hero__intro-copy`'s `max-width: 620px`, not by the viewport, and
 * both page-content widths at 780px and 900px (716px / 836px, via
 * `--aiz-page-gutter`'s own 32px step below 900px) already exceed both
 * caps -- so the copy wraps identically at both widths, same as it
 * already does across the whole 481-780px range this rule originally
 * covered. The existing `height: 1250px` (already generously margined
 * for that unchanged wrap) covers this wider range verbatim.
 */
@media (max-width: 900px) {
	.aiz-hero--ik-werk-voor-overheid {
		padding-top: 180px;
	}

	.aiz-hero--ik-werk-voor-overheid::before {
		height: 1250px;
		clip-path: none;
	}

	.aiz-hero--ik-werk-voor-overheid .aiz-hero__grid {
		display: flex;
		flex-direction: column;
	}

	/* `aspect-ratio` keeps the mask's designed 481×828 proportions regardless of the box's own resized width — same load-bearing reason as `.aiz-hero--slimmer-werken-sub`'s own identical rule. */
	.aiz-hero--ik-werk-voor-overheid .aiz-hero__visual {
		width: min(74vw, 320px);
		height: auto;
		aspect-ratio: 481 / 828;
		margin: 24px auto 0;
	}
}

@media (max-width: 480px) {
	.aiz-hero--ik-werk-voor-overheid {
		padding-top: 155px;
	}

	.aiz-hero--ik-werk-voor-overheid::before {
		height: 1180px;
	}

	.aiz-hero--ik-werk-voor-overheid .aiz-hero__copy h1 {
		font-size: 36px;
		line-height: 1.15;
		letter-spacing: normal;
	}
}

/*
 * Intro — reuses `.aiz-split`/`.aiz-split--image-first` (image-left, copy-
 * right pair on navy, already established by split-content.php and the
 * `.aiz-split--solutions` modifier above) verbatim; only this page's own
 * deltas from the export's `.intro-section`/`.intro-layout` are written
 * here, same approach as `.aiz-split--solutions`. Column widths (481px/
 * 584px) and `padding-block: 200px` already match the base module exactly —
 * only the image's fixed height, the heading colour/spacing, paragraph
 * spacing and the highlight line's weight/size differ.
 */
.aiz-split--ik-werk-voor-overheid .aiz-split__layout {
	gap: 64px;
}

.aiz-split--ik-werk-voor-overheid .aiz-split__image {
	height: 432px;
	min-height: 0;
}

.aiz-split--ik-werk-voor-overheid .aiz-split__copy h2 {
	margin-bottom: 32px;
	letter-spacing: -0.015em;
	color: var(--aiz-purple);
}

.aiz-split--ik-werk-voor-overheid .aiz-split__copy p {
	margin-bottom: 16px;
}

.aiz-split--ik-werk-voor-overheid .aiz-split__copy p:last-child {
	margin-bottom: 0;
}

/* Export's `.highlight` is bold at BODY text size, unlike the shared `.aiz-split__highlight` rule's own larger 20px/600 statement styling elsewhere — overridden back down for this page only. */
.aiz-split--ik-werk-voor-overheid .aiz-split__highlight {
	font-size: inherit;
	font-weight: 700;
	color: var(--aiz-purple);
}

@media (max-width: 900px) {
	.aiz-split--ik-werk-voor-overheid .aiz-split__image {
		height: 430px;
	}
}

@media (max-width: 640px) {
	.aiz-split--ik-werk-voor-overheid .aiz-split__image {
		height: 300px;
	}
}

/*
 * Approach cards — three fixed narrative panels ("Van inzicht naar
 * richting" / Monitor, "Samen werken aan oplossingen" / Solutions, "Samen
 * slimmer werken" / Slimmer werken), reproducing the export's `.themes`/
 * `.theme-list`/`.theme-card` verbatim. Positional and content-locked, not
 * an extendable collection — same reasoning as `feature-panels-slimmer-
 * werken.php`'s three sections: reordering or adding a fourth would desync
 * each card's colour, image and product link from its meaning. Card order,
 * gradient colours and image aspect ratios are pixel-verified against
 * `Correct_design/SVG/Solutions - ik werk voor de overheid.svg`'s own
 * embedded `pattern3`/`pattern4`/`pattern5` fills: 200px list gap and card
 * width both match the export's CSS numbers exactly, and the yellow/purple/
 * teal gradient stops sampled from `Correct_design/PNG/…@2x.png` land
 * within 1 unit (JPEG noise) of `--aiz-yellow-dark`/`--aiz-yellow`,
 * `#3e67ba`/`--aiz-purple`, and the new `--aiz-teal-dark`/`--aiz-teal`
 * tokens respectively — no new hex values introduced.
 *
 * `.themes` itself carries no padding of its own in the export (confirmed:
 * `.intro-section` has the full `padding: 200px 0` that produces the
 * visible gap above the first card, and `.contact-section` supplies the
 * gap below the last with its own `padding: 176px 0 0`) — this module is a
 * bare wrapper, exactly like `.aiz-page` itself.
 */
.aiz-theme-list {
	display: flex;
	flex-direction: column;
	gap: 200px;
}

.aiz-theme-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 482px;
	min-height: 640px;
	overflow: hidden;
	border-radius: 8px;
}

.aiz-theme-card--yellow {
	background: linear-gradient(90deg, var(--aiz-yellow-dark), var(--aiz-yellow) 60%);
}

.aiz-theme-card--purple {
	background: linear-gradient(90deg, #3e67ba, var(--aiz-purple) 60%);
}

.aiz-theme-card--teal {
	background: linear-gradient(90deg, var(--aiz-teal-dark), var(--aiz-teal));
}

/* Body copy's default white (see `body { color: var(--aiz-white) }`) is correct here unmodified — unlike the intro/contact headings on this same page, the export never overrides `.theme-copy`'s text colour, since white already has full contrast against every one of the three gradients. */
.aiz-theme-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 120px 72px 120px 103px;
}

.aiz-theme-copy h2 {
	margin: 0 0 32px;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.aiz-theme-copy p {
	margin: 0 0 16px;
}

.aiz-theme-copy p:last-of-type {
	margin-bottom: 0;
}

/* Pins the button to the card's bottom edge — `.aiz-theme-copy` stretches to the grid row's own 640px min-height by Grid's default `align-items: stretch`, same mechanism `.aiz-sw-feature__layout` relies on elsewhere. */
.aiz-theme-copy .wp-block-buttons {
	margin-top: auto;
}

/* Export's shared `.button` base (radius `2px 2px 16px 2px`, the same asymmetric shape `.aiz-sw-feature__layout .wp-block-button__link` already uses) plus `.button--light` (white fill) — the per-card text colour is the only thing that varies, so it is scoped through the card's own colour modifier rather than a fourth button class. */
.aiz-theme-copy .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 44px;
	padding: 12px 16px;
	border: 0;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-white);
	font-weight: 500;
	line-height: 20px;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.aiz-theme-copy .wp-block-button__link:hover,
.aiz-theme-copy .wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.aiz-theme-card--yellow .wp-block-button__link {
	color: var(--aiz-yellow-dark);
}

.aiz-theme-card--purple .wp-block-button__link {
	color: var(--aiz-purple);
}

.aiz-theme-card--teal .wp-block-button__link {
	color: var(--aiz-teal);
}

.aiz-theme-card__image {
	width: 100%;
	height: 100%;
	margin: 0;
}

.aiz-theme-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-theme-card {
		grid-template-columns: minmax(0, 1fr) 40%;
	}

	.aiz-theme-copy {
		padding-inline: 64px;
	}
}

@media (max-width: 820px) {
	/*
	 * Overrides `.aiz-page--solutions`'s own 820px/560px width cap (`min(100%
	 * - 40px, 680px)`), which belongs to the Solutions ARCHIVE page this
	 * class was originally written for (see that block's own comment) and
	 * does not match this export's numbers at all -- this page's own
	 * `.content-container` simply narrows its gutter to 16px here (`min(100%
	 * - 32px, 1200px)`), with no extra cap. Reused `.aiz-page--solutions`
	 * only for its correct 24px desktop gutter (see the hero's own re-use);
	 * this list needs the real container width back for its full-bleed
	 * cards, so it is restored here directly. Wins over the shared class by
	 * source order (both are single-class selectors of equal specificity;
	 * this rule is declared later in the file), and needs no matching
	 * override at 560px -- the export never narrows `.content-container`
	 * again below 820px, so this same width holds all the way down.
	 */
	.aiz-theme-list {
		width: min(100% - 32px, var(--aiz-page));
		gap: 96px;
	}

	.aiz-theme-card {
		grid-template-columns: 1fr;
	}

	.aiz-theme-copy {
		min-height: 560px;
		padding: 72px 64px;
	}

	.aiz-theme-card__image {
		height: 440px;
	}
}

@media (max-width: 560px) {
	.aiz-theme-copy h2 {
		font-size: 32px;
		line-height: 36px;
	}

	.aiz-theme-list {
		gap: 64px;
	}

	.aiz-theme-copy {
		min-height: 0;
		padding: 48px 32px;
	}

	.aiz-theme-copy .wp-block-buttons {
		margin-top: 32px;
	}

	.aiz-theme-card__image {
		height: 320px;
	}
}

/*
 * Contact — reuses the shared `.aiz-contact--with-card` module plus
 * Solutions' own `.aiz-contact--solution` colour variant (purple heading,
 * submit button, Rogier's name and the phone/e-mail/LinkedIn icons) exactly
 * as `item-solution-content.php`'s own contact section does, per the user's
 * own "reuse that" instruction. Everything below is this page's OWN delta on
 * top of that combination — confirmed against this page's own export
 * (`aiz_website_HTML_2/aiz-Solutions-ik-werk-voor-de-overheid/styles.css`,
 * `.contact-section`/`.contact-panel`), not copied from the Solutions detail
 * page's numbers, which genuinely differ in several places (gap, required-
 * field colour, and this page's own 1100/820/560 breakpoints rather than the
 * shared module's 1180/900/640 or the Solutions variant's 1100).
 *
 * Panel gap is 72px here — neither the shared base's 60px nor Solutions
 * detail's own 115px, an independent export number confirmed directly in
 * `.contact-panel { gap: 72px }`.
 *
 * The required-field asterisk is `--pink` in the export (`#ff8091`, i.e.
 * this theme's existing `--aiz-coral` token) — not yellow (shared base) or
 * purple (would have been the naive assumption from reusing `--solution`).
 *
 * The export's own top padding is 176px (`.contact-section { padding: 176px
 * 0 0 }`), not the shared base's 0 — this section supplies its own gap above
 * itself; see the "Approach cards" block's own comment for why `.aiz-theme-
 * list` carries none. Bottom padding is left inherited from the shared base
 * (200px, 88px at <=640px) since that is the sitewide footer-clearance
 * convention, not something this page's own export data speaks to.
 *
 * Two extra full-width breakpoints restate the shared/Solutions-variant
 * defaults before narrowing further: without them, the shared base's own
 * 1180px and 640px rules would win for the in-between slices (1101-1180px,
 * 561-640px) purely by being more specific to widths this page's own
 * breakpoints don't touch — same class of cascade gap already documented
 * for the gutter fix above. Restating the desktop/mid values first, then
 * narrowing at this page's own 1100/820/560, keeps every width correctly
 * matched to this page's own export rather than a neighbouring module's.
 */
.aiz-contact--ik-werk-voor-overheid {
	padding-top: 176px;
}

.aiz-contact--ik-werk-voor-overheid .aiz-contact__panel {
	gap: 72px;
}

.aiz-contact--ik-werk-voor-overheid .aiz-contact__form label span {
	color: var(--aiz-coral);
}

@media (max-width: 1180px) {
	.aiz-contact--ik-werk-voor-overheid .aiz-contact__panel {
		grid-template-columns: 584px 295px;
		padding: 120px 103px;
	}
}

@media (max-width: 1100px) {
	.aiz-contact--ik-werk-voor-overheid .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 275px;
		padding: 88px 64px;
	}
}

@media (max-width: 820px) {
	.aiz-contact--ik-werk-voor-overheid {
		padding-top: 120px;
	}

	.aiz-contact--ik-werk-voor-overheid .aiz-contact__panel {
		width: auto;
		grid-template-columns: 1fr;
		padding: 72px 64px;
		border-radius: 25px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--ik-werk-voor-overheid {
		padding-top: 88px;
	}

	.aiz-contact--ik-werk-voor-overheid .aiz-contact__panel {
		width: 100%;
		gap: 56px;
		padding: 64px 24px;
		border-radius: 20px 20px 0 0;
	}

	.aiz-contact--ik-werk-voor-overheid .aiz-contact__submit {
		width: 100%;
	}

	.aiz-contact--ik-werk-voor-overheid .aiz-contact__card {
		padding: 28px 20px;
	}

	.aiz-contact--ik-werk-voor-overheid .aiz-contact__address {
		white-space: normal;
	}
}

/*
 * ---------------------------------------------------------------------
 * "Ik werk voor" — branche / onderwijsinstelling / bedrijfsleven
 * ---------------------------------------------------------------------
 * Added 2026-09-07, per the user's explicit instruction: these three
 * pages (page-ik-werk-voor-branche.php, -onderwijsinstelling.php,
 * -bedrijfsleven.php) are structural clones of page-ik-werk-voor-
 * overheid.php. Every block below is a byte-identical clone of that
 * page's own .aiz-hero--ik-werk-voor-overheid / .aiz-split--ik-werk-
 * voor-overheid / .aiz-contact--ik-werk-voor-overheid rules (see those
 * blocks above for the full pixel-scan/derivation history) with only
 * the selector renamed to this audience's own page slug. The hero mask
 * deliberately still points at the SHARED mask-ik-werk-voor-overheid-
 * hero.svg file rather than a duplicated copy, because the shape is
 * meant to be the exact same asset across all four audience pages, not
 * a lookalike re-trace — only the photo inside the mask differs per
 * page. The Approach-cards section needs no page-specific rules here:
 * it already uses the shared, non-modifier .aiz-theme-list/.aiz-theme-
 * card module.
 */

/* --- branche: hero (clone of the overheid page's own block) --- */
.aiz-hero--ik-werk-voor-branche {
	position: relative;
	overflow: hidden;
	padding: 228px 0 0;
	--aiz-page-gutter: 24px;
}

.aiz-hero--ik-werk-voor-branche::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0 0 auto;
	height: 960px;
	background: linear-gradient(90deg, #3e67ba 0%, var(--aiz-purple) 60%);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 481px) 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 481px) 90.21%,
		0 90.21%
	);
}

.aiz-hero--ik-werk-voor-branche .aiz-hero__grid {
	z-index: 1;
	grid-template-columns: minmax(0, 688px) minmax(320px, 481px);
	gap: 31px;
}

.aiz-hero--ik-werk-voor-branche .aiz-hero__eyebrow {
	margin: 0 0 8px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .01em;
}

.aiz-hero--ik-werk-voor-branche .aiz-hero__copy h1 {
	margin: 0 0 8px;
	max-width: 688px;
	font-size: clamp(48px, 4.45vw, 64px);
	line-height: 1.094;
	letter-spacing: -0.025em;
}

.aiz-hero--ik-werk-voor-branche .aiz-hero__intro-copy {
	margin-top: 0;
	max-width: 620px;
}

.aiz-hero--ik-werk-voor-branche .aiz-hero__intro-copy p {
	margin: 0 0 32px;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
}

.aiz-hero--ik-werk-voor-branche .aiz-hero__visual {
	width: 100%;
	max-width: 481px;
	height: auto;
	aspect-ratio: 481 / 828;
	margin: 0;
	-webkit-mask: url(../images/mask-ik-werk-voor-overheid-hero.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-ik-werk-voor-overheid-hero.svg) no-repeat center / 100% 100%;
}

.aiz-hero--ik-werk-voor-branche .aiz-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-hero--ik-werk-voor-branche .aiz-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
	}

	.aiz-hero--ik-werk-voor-branche::before {
		--aiz-iwvo-img-w: max(280px, 0.425 * (min(100% - (2 * var(--aiz-page-gutter)), var(--aiz-page)) - 31px));
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-iwvo-img-w)) 100%,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-iwvo-img-w)) 90.21%,
			0 90.21%
		);
	}
}

@media (max-width: 900px) {
	.aiz-hero--ik-werk-voor-branche {
		padding-top: 180px;
	}

	.aiz-hero--ik-werk-voor-branche::before {
		height: 1250px;
		clip-path: none;
	}

	.aiz-hero--ik-werk-voor-branche .aiz-hero__grid {
		display: flex;
		flex-direction: column;
	}

	.aiz-hero--ik-werk-voor-branche .aiz-hero__visual {
		width: min(74vw, 320px);
		height: auto;
		aspect-ratio: 481 / 828;
		margin: 24px auto 0;
	}
}

@media (max-width: 480px) {
	.aiz-hero--ik-werk-voor-branche {
		padding-top: 155px;
	}

	.aiz-hero--ik-werk-voor-branche::before {
		height: 1180px;
	}

	.aiz-hero--ik-werk-voor-branche .aiz-hero__copy h1 {
		font-size: 36px;
		line-height: 1.15;
		letter-spacing: normal;
	}
}

/* --- branche: intro/split (clone of the overheid page's own block) --- */
.aiz-split--ik-werk-voor-branche .aiz-split__layout {
	gap: 64px;
}

.aiz-split--ik-werk-voor-branche .aiz-split__image {
	height: 432px;
	min-height: 0;
}

.aiz-split--ik-werk-voor-branche .aiz-split__copy h2 {
	margin-bottom: 32px;
	letter-spacing: -0.015em;
	color: var(--aiz-purple);
}

.aiz-split--ik-werk-voor-branche .aiz-split__copy p {
	margin-bottom: 16px;
}

.aiz-split--ik-werk-voor-branche .aiz-split__copy p:last-child {
	margin-bottom: 0;
}

.aiz-split--ik-werk-voor-branche .aiz-split__highlight {
	font-size: inherit;
	font-weight: 700;
	color: var(--aiz-purple);
}

@media (max-width: 900px) {
	.aiz-split--ik-werk-voor-branche .aiz-split__image {
		height: 430px;
	}
}

@media (max-width: 640px) {
	.aiz-split--ik-werk-voor-branche .aiz-split__image {
		height: 300px;
	}
}

/* --- branche: contact (clone of the overheid page's own block) --- */
.aiz-contact--ik-werk-voor-branche {
	padding-top: 176px;
}

.aiz-contact--ik-werk-voor-branche .aiz-contact__panel {
	gap: 72px;
}

.aiz-contact--ik-werk-voor-branche .aiz-contact__form label span {
	color: var(--aiz-coral);
}

@media (max-width: 1180px) {
	.aiz-contact--ik-werk-voor-branche .aiz-contact__panel {
		grid-template-columns: 584px 295px;
		padding: 120px 103px;
	}
}

@media (max-width: 1100px) {
	.aiz-contact--ik-werk-voor-branche .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 275px;
		padding: 88px 64px;
	}
}

@media (max-width: 820px) {
	.aiz-contact--ik-werk-voor-branche {
		padding-top: 120px;
	}

	.aiz-contact--ik-werk-voor-branche .aiz-contact__panel {
		width: auto;
		grid-template-columns: 1fr;
		padding: 72px 64px;
		border-radius: 25px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--ik-werk-voor-branche {
		padding-top: 88px;
	}

	.aiz-contact--ik-werk-voor-branche .aiz-contact__panel {
		width: 100%;
		gap: 56px;
		padding: 64px 24px;
		border-radius: 20px 20px 0 0;
	}

	.aiz-contact--ik-werk-voor-branche .aiz-contact__submit {
		width: 100%;
	}

	.aiz-contact--ik-werk-voor-branche .aiz-contact__card {
		padding: 28px 20px;
	}

	.aiz-contact--ik-werk-voor-branche .aiz-contact__address {
		white-space: normal;
	}
}

/* --- onderwijsinstelling: hero (clone of the overheid page's own block) --- */
.aiz-hero--ik-werk-voor-onderwijsinstelling {
	position: relative;
	overflow: hidden;
	padding: 228px 0 0;
	--aiz-page-gutter: 24px;
}

.aiz-hero--ik-werk-voor-onderwijsinstelling::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0 0 auto;
	height: 960px;
	background: linear-gradient(90deg, #3e67ba 0%, var(--aiz-purple) 60%);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 481px) 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 481px) 90.21%,
		0 90.21%
	);
}

.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__grid {
	z-index: 1;
	grid-template-columns: minmax(0, 688px) minmax(320px, 481px);
	gap: 31px;
}

.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__eyebrow {
	margin: 0 0 8px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .01em;
}

.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__copy h1 {
	margin: 0 0 8px;
	max-width: 688px;
	font-size: clamp(48px, 4.45vw, 64px);
	line-height: 1.094;
	letter-spacing: -0.025em;
}

.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__intro-copy {
	margin-top: 0;
	max-width: 620px;
}

.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__intro-copy p {
	margin: 0 0 32px;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
}

.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__visual {
	width: 100%;
	max-width: 481px;
	height: auto;
	aspect-ratio: 481 / 828;
	margin: 0;
	-webkit-mask: url(../images/mask-ik-werk-voor-overheid-hero.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-ik-werk-voor-overheid-hero.svg) no-repeat center / 100% 100%;
}

.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
	}

	.aiz-hero--ik-werk-voor-onderwijsinstelling::before {
		--aiz-iwvo-img-w: max(280px, 0.425 * (min(100% - (2 * var(--aiz-page-gutter)), var(--aiz-page)) - 31px));
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-iwvo-img-w)) 100%,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-iwvo-img-w)) 90.21%,
			0 90.21%
		);
	}
}

@media (max-width: 900px) {
	.aiz-hero--ik-werk-voor-onderwijsinstelling {
		padding-top: 180px;
	}

	.aiz-hero--ik-werk-voor-onderwijsinstelling::before {
		height: 1250px;
		clip-path: none;
	}

	.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__grid {
		display: flex;
		flex-direction: column;
	}

	.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__visual {
		width: min(74vw, 320px);
		height: auto;
		aspect-ratio: 481 / 828;
		margin: 24px auto 0;
	}
}

@media (max-width: 480px) {
	.aiz-hero--ik-werk-voor-onderwijsinstelling {
		padding-top: 155px;
	}

	.aiz-hero--ik-werk-voor-onderwijsinstelling::before {
		height: 1180px;
	}

	.aiz-hero--ik-werk-voor-onderwijsinstelling .aiz-hero__copy h1 {
		font-size: 36px;
		line-height: 1.15;
		letter-spacing: normal;
	}
}

/* --- onderwijsinstelling: intro/split (clone of the overheid page's own block) --- */
.aiz-split--ik-werk-voor-onderwijsinstelling .aiz-split__layout {
	gap: 64px;
}

.aiz-split--ik-werk-voor-onderwijsinstelling .aiz-split__image {
	height: 432px;
	min-height: 0;
}

.aiz-split--ik-werk-voor-onderwijsinstelling .aiz-split__copy h2 {
	margin-bottom: 32px;
	letter-spacing: -0.015em;
	color: var(--aiz-purple);
}

.aiz-split--ik-werk-voor-onderwijsinstelling .aiz-split__copy p {
	margin-bottom: 16px;
}

.aiz-split--ik-werk-voor-onderwijsinstelling .aiz-split__copy p:last-child {
	margin-bottom: 0;
}

.aiz-split--ik-werk-voor-onderwijsinstelling .aiz-split__highlight {
	font-size: inherit;
	font-weight: 700;
	color: var(--aiz-purple);
}

@media (max-width: 900px) {
	.aiz-split--ik-werk-voor-onderwijsinstelling .aiz-split__image {
		height: 430px;
	}
}

@media (max-width: 640px) {
	.aiz-split--ik-werk-voor-onderwijsinstelling .aiz-split__image {
		height: 300px;
	}
}

/* --- onderwijsinstelling: contact (clone of the overheid page's own block) --- */
.aiz-contact--ik-werk-voor-onderwijsinstelling {
	padding-top: 176px;
}

.aiz-contact--ik-werk-voor-onderwijsinstelling .aiz-contact__panel {
	gap: 72px;
}

.aiz-contact--ik-werk-voor-onderwijsinstelling .aiz-contact__form label span {
	color: var(--aiz-coral);
}

@media (max-width: 1180px) {
	.aiz-contact--ik-werk-voor-onderwijsinstelling .aiz-contact__panel {
		grid-template-columns: 584px 295px;
		padding: 120px 103px;
	}
}

@media (max-width: 1100px) {
	.aiz-contact--ik-werk-voor-onderwijsinstelling .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 275px;
		padding: 88px 64px;
	}
}

@media (max-width: 820px) {
	.aiz-contact--ik-werk-voor-onderwijsinstelling {
		padding-top: 120px;
	}

	.aiz-contact--ik-werk-voor-onderwijsinstelling .aiz-contact__panel {
		width: auto;
		grid-template-columns: 1fr;
		padding: 72px 64px;
		border-radius: 25px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--ik-werk-voor-onderwijsinstelling {
		padding-top: 88px;
	}

	.aiz-contact--ik-werk-voor-onderwijsinstelling .aiz-contact__panel {
		width: 100%;
		gap: 56px;
		padding: 64px 24px;
		border-radius: 20px 20px 0 0;
	}

	.aiz-contact--ik-werk-voor-onderwijsinstelling .aiz-contact__submit {
		width: 100%;
	}

	.aiz-contact--ik-werk-voor-onderwijsinstelling .aiz-contact__card {
		padding: 28px 20px;
	}

	.aiz-contact--ik-werk-voor-onderwijsinstelling .aiz-contact__address {
		white-space: normal;
	}
}

/* --- bedrijfsleven: hero (clone of the overheid page's own block) --- */
.aiz-hero--ik-werk-voor-bedrijfsleven {
	position: relative;
	overflow: hidden;
	padding: 228px 0 0;
	--aiz-page-gutter: 24px;
}

.aiz-hero--ik-werk-voor-bedrijfsleven::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0 0 auto;
	height: 960px;
	background: linear-gradient(90deg, #3e67ba 0%, var(--aiz-purple) 60%);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 481px) 100%,
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 481px) 90.21%,
		0 90.21%
	);
}

.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__grid {
	z-index: 1;
	grid-template-columns: minmax(0, 688px) minmax(320px, 481px);
	gap: 31px;
}

.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__eyebrow {
	margin: 0 0 8px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .01em;
}

.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__copy h1 {
	margin: 0 0 8px;
	max-width: 688px;
	font-size: clamp(48px, 4.45vw, 64px);
	line-height: 1.094;
	letter-spacing: -0.025em;
}

.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__intro-copy {
	margin-top: 0;
	max-width: 620px;
}

.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__intro-copy p {
	margin: 0 0 32px;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
}

.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__visual {
	width: 100%;
	max-width: 481px;
	height: auto;
	aspect-ratio: 481 / 828;
	margin: 0;
	-webkit-mask: url(../images/mask-ik-werk-voor-overheid-hero.svg) no-repeat center / 100% 100%;
	mask: url(../images/mask-ik-werk-voor-overheid-hero.svg) no-repeat center / 100% 100%;
}

.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
	}

	.aiz-hero--ik-werk-voor-bedrijfsleven::before {
		--aiz-iwvo-img-w: max(280px, 0.425 * (min(100% - (2 * var(--aiz-page-gutter)), var(--aiz-page)) - 31px));
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-iwvo-img-w)) 100%,
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-iwvo-img-w)) 90.21%,
			0 90.21%
		);
	}
}

@media (max-width: 900px) {
	.aiz-hero--ik-werk-voor-bedrijfsleven {
		padding-top: 180px;
	}

	.aiz-hero--ik-werk-voor-bedrijfsleven::before {
		height: 1250px;
		clip-path: none;
	}

	.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__grid {
		display: flex;
		flex-direction: column;
	}

	.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__visual {
		width: min(74vw, 320px);
		height: auto;
		aspect-ratio: 481 / 828;
		margin: 24px auto 0;
	}
}

@media (max-width: 480px) {
	.aiz-hero--ik-werk-voor-bedrijfsleven {
		padding-top: 155px;
	}

	.aiz-hero--ik-werk-voor-bedrijfsleven::before {
		height: 1180px;
	}

	.aiz-hero--ik-werk-voor-bedrijfsleven .aiz-hero__copy h1 {
		font-size: 36px;
		line-height: 1.15;
		letter-spacing: normal;
	}
}

/* --- bedrijfsleven: intro/split (clone of the overheid page's own block) --- */
.aiz-split--ik-werk-voor-bedrijfsleven .aiz-split__layout {
	gap: 64px;
}

.aiz-split--ik-werk-voor-bedrijfsleven .aiz-split__image {
	height: 432px;
	min-height: 0;
}

.aiz-split--ik-werk-voor-bedrijfsleven .aiz-split__copy h2 {
	margin-bottom: 32px;
	letter-spacing: -0.015em;
	color: var(--aiz-purple);
}

.aiz-split--ik-werk-voor-bedrijfsleven .aiz-split__copy p {
	margin-bottom: 16px;
}

.aiz-split--ik-werk-voor-bedrijfsleven .aiz-split__copy p:last-child {
	margin-bottom: 0;
}

.aiz-split--ik-werk-voor-bedrijfsleven .aiz-split__highlight {
	font-size: inherit;
	font-weight: 700;
	color: var(--aiz-purple);
}

@media (max-width: 900px) {
	.aiz-split--ik-werk-voor-bedrijfsleven .aiz-split__image {
		height: 430px;
	}
}

@media (max-width: 640px) {
	.aiz-split--ik-werk-voor-bedrijfsleven .aiz-split__image {
		height: 300px;
	}
}

/* --- bedrijfsleven: contact (clone of the overheid page's own block) --- */
.aiz-contact--ik-werk-voor-bedrijfsleven {
	padding-top: 176px;
}

.aiz-contact--ik-werk-voor-bedrijfsleven .aiz-contact__panel {
	gap: 72px;
}

.aiz-contact--ik-werk-voor-bedrijfsleven .aiz-contact__form label span {
	color: var(--aiz-coral);
}

@media (max-width: 1180px) {
	.aiz-contact--ik-werk-voor-bedrijfsleven .aiz-contact__panel {
		grid-template-columns: 584px 295px;
		padding: 120px 103px;
	}
}

@media (max-width: 1100px) {
	.aiz-contact--ik-werk-voor-bedrijfsleven .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 275px;
		padding: 88px 64px;
	}
}

@media (max-width: 820px) {
	.aiz-contact--ik-werk-voor-bedrijfsleven {
		padding-top: 120px;
	}

	.aiz-contact--ik-werk-voor-bedrijfsleven .aiz-contact__panel {
		width: auto;
		grid-template-columns: 1fr;
		padding: 72px 64px;
		border-radius: 25px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--ik-werk-voor-bedrijfsleven {
		padding-top: 88px;
	}

	.aiz-contact--ik-werk-voor-bedrijfsleven .aiz-contact__panel {
		width: 100%;
		gap: 56px;
		padding: 64px 24px;
		border-radius: 20px 20px 0 0;
	}

	.aiz-contact--ik-werk-voor-bedrijfsleven .aiz-contact__submit {
		width: 100%;
	}

	.aiz-contact--ik-werk-voor-bedrijfsleven .aiz-contact__card {
		padding: 28px 20px;
	}

	.aiz-contact--ik-werk-voor-bedrijfsleven .aiz-contact__address {
		white-space: normal;
	}
}

/* ==========================================================================
   Maatschappelijke vraagstukken — issue detail pages
   ==========================================================================
   Shared hero + intro/promo shell for the six issue detail pages scaffolded
   under `maatschappelijke-vraagstukken` (aiz_scaffold_definitions(),
   inc/cli.php). Only Arbeidsproductiviteit & verdienvermogen is built so far
   (page-maatschappelijke-vraagstukken-arbeidsproductiviteit.php) — the other
   five reuse `.aiz-hero--issue` / `.aiz-issue-intro` with their own accent
   modifier (only `--teal` exists yet) plus their own copy/illustration,
   matching cards-issues.php's six accent tokens (blue, teal, yellow, orange,
   coral, purple).

   SOURCE — content, colours and illustration taken from
   `Additional_pages_html/.../aiz-MY-vraagstukken detail-2/styles.css` and
   cross-checked against `Correct_design/PDF/Maatschappelijke vraagstukken -
   detail - voorbeeld 2.pdf` (2026-09-09, newer than the matching SVG/PNG in
   the same export set).

   GRID — 688px/442px, 31px gap: this page's own Figma-derived ratio, not the
   shared `.aiz-hero__grid`'s 688/481/32. Same call as Datawarehouse's hero.

   BOTTOM EDGE — deliberately NOT the export's own `.masthead__cutout`
   (a rectangle biting the bottom-LEFT corner), which is also what the PDF
   itself shows. Per the user's explicit instruction, the hero's lower border
   instead reuses Monitor's own notch EXACTLY: the same asset
   (`images/monitor/hero-mask.svg`, a bottom-RIGHT step) with the same
   technique `.aiz-hero--monitor::before` already uses. This is a known,
   approved mismatch against the PDF at that one edge only.
   ========================================================================== */

/*
 * Bottom padding (171px) is a measured value, not a guess: the PDF's own
 * illustration bounding box bottom (curves bbox, 858-1260 x / 194-559 y) sits
 * 171pt above its own hero/body transition edge (pixel-scanned on the
 * flat right-hand shelf the illustration sits on, x 1080-1425, y 730 — the
 * left ~70% of the width steps up earlier, at y 658, which is the export's
 * own `.masthead__cutout`, not relevant to this column). 730.1 - 558.8 =
 * 171.3, rounded to 171px. Same 1440-wide, unscaled-px convention this
 * theme already uses for every other Figma-sourced hero number.
 */
.aiz-hero--issue {
	position: relative;
	overflow: hidden;
	padding: 228px 0 171px;
	background: var(--aiz-navy);
	color: var(--aiz-white);
}

.aiz-hero--issue::before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-mask: url(../images/monitor/hero-mask.svg) no-repeat center top / 100% 100%;
	mask: url(../images/monitor/hero-mask.svg) no-repeat center top / 100% 100%;
}

.aiz-hero--issue-teal::before {
	background: linear-gradient(90deg, var(--aiz-teal-dark), var(--aiz-teal));
}

.aiz-hero--issue-blue::before {
	background: linear-gradient(90deg, var(--aiz-blue-dark), var(--aiz-blue));
}

.aiz-hero--issue-yellow::before {
	background: linear-gradient(90deg, var(--aiz-yellow-dark), var(--aiz-yellow));
}

.aiz-hero--issue-orange::before {
	background: linear-gradient(90deg, var(--aiz-orange-dark), var(--aiz-orange));
}

.aiz-hero--issue-coral::before {
	background: linear-gradient(90deg, var(--aiz-coral-dark), var(--aiz-coral));
}

.aiz-hero--issue-purple::before {
	background: linear-gradient(90deg, var(--aiz-purple-dark), var(--aiz-purple));
}

.aiz-hero--issue .aiz-hero__grid {
	grid-template-columns: minmax(0, 688px) 442px;
	gap: 31px;
	position: relative;
	z-index: 1;
}

.aiz-hero--issue .aiz-hero__copy h1 {
	font-size: clamp(32px, 7vw, 64px);
	line-height: 1.09;
	overflow-wrap: break-word;
	hyphens: auto;
}

.aiz-hero--issue .aiz-hero__subtitle {
	margin: 8px 0 0;
	font-size: clamp(18px, 1.9vw, 24px);
	line-height: 1.33;
	font-weight: 500;
}

.aiz-hero--issue .aiz-hero__visual {
	width: 100%;
	height: auto;
	justify-self: center;
}

@media (max-width: 860px) {
	.aiz-hero--issue .aiz-hero__grid {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.aiz-hero--issue .aiz-hero__visual {
		max-width: 320px;
		order: -1;
	}
}

@media (max-width: 600px) {
	.aiz-hero--issue {
		padding: 120px 0 64px;
	}
}

/* -------------------------------------------------------------------------
   Intro + promo cards
   ------------------------------------------------------------------------- */

.aiz-issue-intro {
	background: var(--aiz-navy);
	padding: 100px 0 0;
}

/*
 * max-width is 995px of INNER content, not 995px total — `padding` below
 * eats into a bare `max-width: 995px` under this theme's global
 * `box-sizing: border-box`, which was the actual bug (content rendered
 * narrower than 995px). Measured directly against the PDF to confirm 995px
 * itself: both promo cards together span x 222.5-1217.5 (curves bbox for
 * each card's rounded background), i.e. exactly 995pt, symmetric 222.5pt
 * margins either side of a 1440pt page — matching the export's own
 * `--breedte-inhoud: 995px` token. `calc()` restores that true 995px once
 * the gutter padding is subtracted back out, the same relationship the
 * export's own `.intro` rule uses (`max-width: calc(var(--breedte-inhoud) +
 * 2 * var(--marge-zijkant))`).
 */
.aiz-issue-intro__layout {
	max-width: calc(995px + 2 * var(--aiz-page-gutter));
	margin-inline: auto;
	padding: 0 var(--aiz-page-gutter);
	display: grid;
	gap: 64px;
}

.aiz-issue-intro__lead {
	font-size: clamp(18px, 1.9vw, 24px);
	line-height: 1.33;
	font-weight: 500;
}

.aiz-issue-intro--teal .aiz-issue-intro__lead {
	color: var(--aiz-teal);
}

.aiz-issue-intro--blue .aiz-issue-intro__lead {
	color: var(--aiz-blue);
}

.aiz-issue-intro--yellow .aiz-issue-intro__lead {
	color: var(--aiz-yellow);
}

.aiz-issue-intro--orange .aiz-issue-intro__lead {
	color: var(--aiz-orange);
}

.aiz-issue-intro--coral .aiz-issue-intro__lead {
	color: var(--aiz-coral);
}

.aiz-issue-intro--purple .aiz-issue-intro__lead {
	color: var(--aiz-purple);
}

.aiz-issue-intro__body {
	display: grid;
	gap: 24px;
}

.aiz-issue-intro__body p {
	color: var(--aiz-white);
	font-size: 16px;
	line-height: 1.5;
}

.aiz-issue-promo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.aiz-issue-promo__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: clamp(28px, 4vw, 48px);
	border-radius: 8px;
}

.aiz-issue-promo__card--yellow {
	background: linear-gradient(90deg, #efab00 0%, var(--aiz-yellow) 60%);
}

.aiz-issue-promo__card--blue {
	background: linear-gradient(90deg, #3e67ba 0%, var(--aiz-purple) 60%);
}

.aiz-issue-promo__card h2 {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.125;
	font-weight: 600;
	color: var(--aiz-white);
	overflow-wrap: break-word;
}

.aiz-issue-promo__card .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	min-height: 46px;
	padding: 11px 16px;
	border: 0;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-white);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
}

.aiz-issue-promo__card--yellow .wp-block-button__link {
	color: var(--aiz-yellow);
}

.aiz-issue-promo__card--blue .wp-block-button__link {
	color: var(--aiz-purple);
}

.aiz-issue-promo__card .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url(../images/icon-arrow-right.svg) no-repeat center / contain;
	mask: url(../images/icon-arrow-right.svg) no-repeat center / contain;
}

@media (max-width: 700px) {
	.aiz-issue-promo {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Contact — Arbeidsproductiviteit & verdienvermogen (teal)
   ==========================================================================
   Reused verbatim from the live `/ik-werk-voor/de-overheid/` page (measured
   in-browser at 1440px: `.aiz-contact--with-card` base — panel 584px/295px
   grid, 120px 103px padding, 25px radius — plus that page's own
   `--ik-werk-voor-overheid` numbers: 72px panel gap, 176px/200px top/bottom
   padding). Not the `.aiz-contact--solution` family (purple) — this page
   isn't part of Solutions, so its own accent (teal) is a standalone
   modifier instead, following the same shape `--datawarehouse` (coral) already
   does off the shared base.

   SPACING — measured, not copied blind: `/ik-werk-voor/de-overheid/`'s own
   preceding section (`.aiz-themes`) has padding-bottom: 0, same as this
   page's own `.aiz-issue-intro` (padding-bottom: 0 — no promo-card trailing
   space). Both pages hand the ENTIRE top gap to the contact section itself,
   so reusing that page's 176px top padding unchanged reproduces the same
   rhythm here, not just the same number in isolation.

   Asterisk stays coral (not teal) — same as all four `ik-werk-voor-*`
   children, regardless of their own accent family; a deliberate,
   readability-driven constant, not an oversight.
   ========================================================================== */

.aiz-contact--issue-arbeidsproductiviteit {
	padding-top: 176px;
}

.aiz-contact--issue-arbeidsproductiviteit .aiz-section-intro h2 {
	color: var(--aiz-teal);
}

.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__panel {
	gap: 72px;
}

.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__submit {
	background: var(--aiz-teal);
}

.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__person h3 {
	color: var(--aiz-teal);
}

.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__form label span {
	color: var(--aiz-coral);
}

/* Real Feather-style contact icons (Over ons/Solutions' own technique, not
   the Unicode-glyph fallback the shared base rule draws), recoloured teal. */
.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__address a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--aiz-teal);
}

.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__address p:nth-child(1) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
}

.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__address p:nth-child(2) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
}

.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__address p:nth-child(3) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
}

@media (max-width: 1180px) {
	.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__panel {
		grid-template-columns: 584px 295px;
		padding: 120px 103px;
	}
}

@media (max-width: 1100px) {
	.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 275px;
		padding: 88px 64px;
	}
}

@media (max-width: 820px) {
	.aiz-contact--issue-arbeidsproductiviteit {
		padding-top: 120px;
	}

	.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__panel {
		width: auto;
		grid-template-columns: 1fr;
		padding: 72px 64px;
		border-radius: 25px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--issue-arbeidsproductiviteit {
		padding-top: 88px;
	}

	.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__panel {
		width: 100%;
		gap: 56px;
		padding: 64px 24px;
		border-radius: 20px 20px 0 0;
	}

	.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__submit {
		width: 100%;
	}

	.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__card {
		padding: 28px 20px;
	}

	.aiz-contact--issue-arbeidsproductiviteit .aiz-contact__address {
		white-space: normal;
	}
}

/* ==========================================================================
   Contact — Leven lang ontwikkelen & skillsgerichte arbeidsmarkt (blue)
   ==========================================================================
   Same shape as `.aiz-contact--issue-arbeidsproductiviteit` above, this
   page's own accent substituted throughout: every place that block reaches
   for teal reaches for blue here instead. No independent measurement for
   THIS page's own spacing — this page has no design PDF/export of its own
   yet (unlike Arbeidsproductiviteit, which was measured against
   `Correct_design/PDF/... voorbeeld 2.pdf`), so its numbers are copied
   verbatim from that page's own contact module, per the user's explicit
   "exactly copying the arbeidsproductiviteit page" instruction. Re-measure
   against this page's own source once one exists.
   ========================================================================== */

.aiz-contact--issue-leven-lang-ontwikkelen {
	padding-top: 176px;
}

.aiz-contact--issue-leven-lang-ontwikkelen .aiz-section-intro h2 {
	color: var(--aiz-blue);
}

.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__panel {
	gap: 72px;
}

.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__submit {
	background: var(--aiz-blue);
}

.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__person h3 {
	color: var(--aiz-blue);
}

.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__form label span {
	color: var(--aiz-coral);
}

/* Real Feather-style contact icons (Over ons/Solutions' own technique, not
   the Unicode-glyph fallback the shared base rule draws), recoloured blue. */
.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__address a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--aiz-blue);
}

.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__address p:nth-child(1) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
}

.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__address p:nth-child(2) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
}

.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__address p:nth-child(3) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
}

@media (max-width: 1180px) {
	.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__panel {
		grid-template-columns: 584px 295px;
		padding: 120px 103px;
	}
}

@media (max-width: 1100px) {
	.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 275px;
		padding: 88px 64px;
	}
}

@media (max-width: 820px) {
	.aiz-contact--issue-leven-lang-ontwikkelen {
		padding-top: 120px;
	}

	.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__panel {
		width: auto;
		grid-template-columns: 1fr;
		padding: 72px 64px;
		border-radius: 25px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--issue-leven-lang-ontwikkelen {
		padding-top: 88px;
	}

	.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__panel {
		width: 100%;
		gap: 56px;
		padding: 64px 24px;
		border-radius: 20px 20px 0 0;
	}

	.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__submit {
		width: 100%;
	}

	.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__card {
		padding: 28px 20px;
	}

	.aiz-contact--issue-leven-lang-ontwikkelen .aiz-contact__address {
		white-space: normal;
	}
}

/* ==========================================================================
   Contact — Digitalisering, technologie & AI in werk (yellow)
   ==========================================================================
   Same shape as `.aiz-contact--issue-arbeidsproductiviteit` /
   `--issue-leven-lang-ontwikkelen` above: no design PDF/export exists for
   this page (see its own pattern file's doc-comment), so its spacing is
   copied verbatim from those pages' own contact module rather than
   independently measured. Re-measure against this page's own source once
   one exists.

   COLOUR — uses `--aiz-yellow-dark` (#efab00) throughout, not plain
   `--aiz-yellow` (#ffce2b): every use here is yellow-as-foreground (heading
   text and icons on the white contact panel, white text on the submit
   button's background), and plain yellow reads poorly in both those roles —
   the same reason the home promo card's yellow gradient
   (`.aiz-issue-promo__card--yellow`) already leans on this darker shade
   rather than the raw accent.
   ========================================================================== */

.aiz-contact--issue-digitalisering {
	padding-top: 176px;
}

.aiz-contact--issue-digitalisering .aiz-section-intro h2 {
	color: var(--aiz-yellow-dark);
}

.aiz-contact--issue-digitalisering .aiz-contact__panel {
	gap: 72px;
}

.aiz-contact--issue-digitalisering .aiz-contact__submit {
	background: var(--aiz-yellow-dark);
}

.aiz-contact--issue-digitalisering .aiz-contact__person h3 {
	color: var(--aiz-yellow-dark);
}

.aiz-contact--issue-digitalisering .aiz-contact__form label span {
	color: var(--aiz-coral);
}

/* Real Feather-style contact icons (Over ons/Solutions' own technique, not
   the Unicode-glyph fallback the shared base rule draws), recoloured to match. */
.aiz-contact--issue-digitalisering .aiz-contact__address a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--aiz-yellow-dark);
}

.aiz-contact--issue-digitalisering .aiz-contact__address p:nth-child(1) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
}

.aiz-contact--issue-digitalisering .aiz-contact__address p:nth-child(2) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
}

.aiz-contact--issue-digitalisering .aiz-contact__address p:nth-child(3) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
}

@media (max-width: 1180px) {
	.aiz-contact--issue-digitalisering .aiz-contact__panel {
		grid-template-columns: 584px 295px;
		padding: 120px 103px;
	}
}

@media (max-width: 1100px) {
	.aiz-contact--issue-digitalisering .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 275px;
		padding: 88px 64px;
	}
}

@media (max-width: 820px) {
	.aiz-contact--issue-digitalisering {
		padding-top: 120px;
	}

	.aiz-contact--issue-digitalisering .aiz-contact__panel {
		width: auto;
		grid-template-columns: 1fr;
		padding: 72px 64px;
		border-radius: 25px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--issue-digitalisering {
		padding-top: 88px;
	}

	.aiz-contact--issue-digitalisering .aiz-contact__panel {
		width: 100%;
		gap: 56px;
		padding: 64px 24px;
		border-radius: 20px 20px 0 0;
	}

	.aiz-contact--issue-digitalisering .aiz-contact__submit {
		width: 100%;
	}

	.aiz-contact--issue-digitalisering .aiz-contact__card {
		padding: 28px 20px;
	}

	.aiz-contact--issue-digitalisering .aiz-contact__address {
		white-space: normal;
	}
}

/* ==========================================================================
   Contact — Een inclusieve arbeidsmarkt (orange)
   ==========================================================================
   Same shape as `.aiz-contact--issue-arbeidsproductiviteit` /
   `--issue-leven-lang-ontwikkelen` above: no design PDF/export exists for
   this page (see its own pattern file's doc-comment), so its spacing is
   copied verbatim from those pages' own contact module rather than
   independently measured. Re-measure against this page's own source once
   one exists.
   ========================================================================== */

.aiz-contact--issue-inclusieve-arbeidsmarkt {
	padding-top: 176px;
}

.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-section-intro h2 {
	color: var(--aiz-orange);
}

.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__panel {
	gap: 72px;
}

.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__submit {
	background: var(--aiz-orange);
}

.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__person h3 {
	color: var(--aiz-orange);
}

.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__form label span {
	color: var(--aiz-coral);
}

/* Real Feather-style contact icons (Over ons/Solutions' own technique, not
   the Unicode-glyph fallback the shared base rule draws), recoloured to match. */
.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__address a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--aiz-orange);
}

.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__address p:nth-child(1) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
}

.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__address p:nth-child(2) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
}

.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__address p:nth-child(3) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
}

@media (max-width: 1180px) {
	.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__panel {
		grid-template-columns: 584px 295px;
		padding: 120px 103px;
	}
}

@media (max-width: 1100px) {
	.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 275px;
		padding: 88px 64px;
	}
}

@media (max-width: 820px) {
	.aiz-contact--issue-inclusieve-arbeidsmarkt {
		padding-top: 120px;
	}

	.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__panel {
		width: auto;
		grid-template-columns: 1fr;
		padding: 72px 64px;
		border-radius: 25px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--issue-inclusieve-arbeidsmarkt {
		padding-top: 88px;
	}

	.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__panel {
		width: 100%;
		gap: 56px;
		padding: 64px 24px;
		border-radius: 20px 20px 0 0;
	}

	.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__submit {
		width: 100%;
	}

	.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__card {
		padding: 28px 20px;
	}

	.aiz-contact--issue-inclusieve-arbeidsmarkt .aiz-contact__address {
		white-space: normal;
	}
}

/* ==========================================================================
   Contact — Duurzame inzetbaarheid & kwaliteit van werk (coral)
   ==========================================================================
   Same shape as `.aiz-contact--issue-arbeidsproductiviteit` /
   `--issue-leven-lang-ontwikkelen` above: no design PDF/export exists for
   this page (see its own pattern file's doc-comment), so its spacing is
   copied verbatim from those pages' own contact module rather than
   independently measured. Re-measure against this page's own source once
   one exists.
   ========================================================================== */

.aiz-contact--issue-duurzame-inzetbaarheid {
	padding-top: 176px;
}

.aiz-contact--issue-duurzame-inzetbaarheid .aiz-section-intro h2 {
	color: var(--aiz-coral);
}

.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__panel {
	gap: 72px;
}

.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__submit {
	background: var(--aiz-coral);
}

.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__person h3 {
	color: var(--aiz-coral);
}

.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__form label span {
	color: var(--aiz-coral);
}

/* Real Feather-style contact icons (Over ons/Solutions' own technique, not
   the Unicode-glyph fallback the shared base rule draws), recoloured to match. */
.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__address a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--aiz-coral);
}

.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__address p:nth-child(1) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
}

.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__address p:nth-child(2) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
}

.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__address p:nth-child(3) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
}

@media (max-width: 1180px) {
	.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__panel {
		grid-template-columns: 584px 295px;
		padding: 120px 103px;
	}
}

@media (max-width: 1100px) {
	.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 275px;
		padding: 88px 64px;
	}
}

@media (max-width: 820px) {
	.aiz-contact--issue-duurzame-inzetbaarheid {
		padding-top: 120px;
	}

	.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__panel {
		width: auto;
		grid-template-columns: 1fr;
		padding: 72px 64px;
		border-radius: 25px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--issue-duurzame-inzetbaarheid {
		padding-top: 88px;
	}

	.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__panel {
		width: 100%;
		gap: 56px;
		padding: 64px 24px;
		border-radius: 20px 20px 0 0;
	}

	.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__submit {
		width: 100%;
	}

	.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__card {
		padding: 28px 20px;
	}

	.aiz-contact--issue-duurzame-inzetbaarheid .aiz-contact__address {
		white-space: normal;
	}
}

/* ==========================================================================
   Contact — Internationalisering (purple)
   ==========================================================================
   Same shape as `.aiz-contact--issue-arbeidsproductiviteit` /
   `--issue-leven-lang-ontwikkelen` above: no design PDF/export exists for
   this page (see its own pattern file's doc-comment), so its spacing is
   copied verbatim from those pages' own contact module rather than
   independently measured. Re-measure against this page's own source once
   one exists.
   ========================================================================== */

.aiz-contact--issue-internationalisering {
	padding-top: 176px;
}

.aiz-contact--issue-internationalisering .aiz-section-intro h2 {
	color: var(--aiz-purple);
}

.aiz-contact--issue-internationalisering .aiz-contact__panel {
	gap: 72px;
}

.aiz-contact--issue-internationalisering .aiz-contact__submit {
	background: var(--aiz-purple);
}

.aiz-contact--issue-internationalisering .aiz-contact__person h3 {
	color: var(--aiz-purple);
}

.aiz-contact--issue-internationalisering .aiz-contact__form label span {
	color: var(--aiz-coral);
}

/* Real Feather-style contact icons (Over ons/Solutions' own technique, not
   the Unicode-glyph fallback the shared base rule draws), recoloured to match. */
.aiz-contact--issue-internationalisering .aiz-contact__address a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--aiz-purple);
}

.aiz-contact--issue-internationalisering .aiz-contact__address p:nth-child(1) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-phone.svg) no-repeat center / contain;
}

.aiz-contact--issue-internationalisering .aiz-contact__address p:nth-child(2) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-email.svg) no-repeat center / contain;
}

.aiz-contact--issue-internationalisering .aiz-contact__address p:nth-child(3) a::before {
	content: "";
	-webkit-mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
	mask: url(../images/icon-contact-linkedin.svg) no-repeat center / contain;
}

@media (max-width: 1180px) {
	.aiz-contact--issue-internationalisering .aiz-contact__panel {
		grid-template-columns: 584px 295px;
		padding: 120px 103px;
	}
}

@media (max-width: 1100px) {
	.aiz-contact--issue-internationalisering .aiz-contact__panel {
		grid-template-columns: minmax(0, 1fr) 275px;
		padding: 88px 64px;
	}
}

@media (max-width: 820px) {
	.aiz-contact--issue-internationalisering {
		padding-top: 120px;
	}

	.aiz-contact--issue-internationalisering .aiz-contact__panel {
		width: auto;
		grid-template-columns: 1fr;
		padding: 72px 64px;
		border-radius: 25px;
	}
}

@media (max-width: 560px) {
	.aiz-contact--issue-internationalisering {
		padding-top: 88px;
	}

	.aiz-contact--issue-internationalisering .aiz-contact__panel {
		width: 100%;
		gap: 56px;
		padding: 64px 24px;
		border-radius: 20px 20px 0 0;
	}

	.aiz-contact--issue-internationalisering .aiz-contact__submit {
		width: 100%;
	}

	.aiz-contact--issue-internationalisering .aiz-contact__card {
		padding: 28px 20px;
	}

	.aiz-contact--issue-internationalisering .aiz-contact__address {
		white-space: normal;
	}
}

/* Inzicht and Impact overview pages from the new two-route navigation. */
.aiz-overview-hero {
	min-height: 620px;
	padding: 245px 0 100px;
	background: var(--aiz-yellow);
	color: var(--aiz-white);
}

.aiz-overview-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 42%);
	align-items: start;
	gap: 60px;
}

.aiz-overview-hero__copy h1 {
	max-width: 16ch;
	margin: 0 0 28px;
	font-size: clamp(42px, 5vw, 64px);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.aiz-overview-hero__copy p {
	max-width: 56ch;
	margin: 0 0 28px;
	font-size: clamp(18px, 1.7vw, 24px);
	line-height: 1.333;
	font-weight: 500;
}

.aiz-overview-hero__buttons {
	gap: 16px;
}

.aiz-overview-hero__buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
	border-radius: 2px 2px 16px 2px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
	font-weight: 600;
}

.aiz-overview-hero__buttons .wp-block-button__link::after {
	content: "→";
}

.aiz-overview-hero__buttons .wp-block-button__link:hover,
.aiz-overview-hero__buttons .wp-block-button__link:focus-visible {
	background: var(--aiz-charcoal);
	color: var(--aiz-white);
}

.aiz-overview-hero__image {
	margin: 0;
	min-height: 400px;
	overflow: hidden;
	border-radius: 24px 2px 24px 2px;
}

.aiz-overview-hero__image img {
	width: 100%;
	height: 400px;
	object-fit: cover;
}

.aiz-overview-section {
	padding: 104px 0;
	background: var(--aiz-navy);
	color: var(--aiz-white);
}

.aiz-overview-section h2 {
	margin: 0 0 32px;
	color: var(--aiz-yellow);
	font-size: clamp(34px, 3.9vw, 56px);
	line-height: 1.0714;
	font-weight: 600;
	text-wrap: balance;
}

.aiz-overview-section--intro p {
	max-width: 64ch;
	font-size: clamp(20px, 1.67vw, 24px);
	line-height: 1.333;
	font-weight: 500;
}

.aiz-overview-section--benefits {
	background: var(--aiz-charcoal);
}

.aiz-overview-list {
	max-width: 1000px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aiz-overview-list li {
	display: grid;
	grid-template-columns: minmax(250px, 1fr) minmax(0, 1fr);
	gap: 32px;
	padding: 24px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.aiz-overview-list strong {
	color: var(--aiz-yellow);
	font-size: 24px;
	line-height: 1;
	font-weight: 600;
}

.aiz-overview-section--approach {
	padding: 200px 0;
}

.aiz-overview-approach__intro {
	max-width: 584px;
	margin: 0 auto 32px;
	text-align: center;
}

.aiz-overview-section--approach h2 {
	margin-bottom: 16px;
	font-size: 40px;
	line-height: 44px;
	color: var(--aiz-yellow);
}

.aiz-overview-approach__intro p {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.aiz-overview-approach__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.aiz-overview-approach__step {
	min-height: 232px;
	padding: 48px 32px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
}

.aiz-overview-approach__step h3 {
	margin: 0 0 16px;
	color: var(--aiz-yellow);
	font-size: 24px;
	line-height: 24px;
	font-weight: 600;
}

.aiz-overview-approach__step p {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.aiz-overview-section--services {
	position: relative;
	padding: 80px 0 224px;
	--aiz-services-gradient: linear-gradient(90deg, #f2a900, var(--aiz-yellow));
	background: var(--aiz-services-gradient);
}

.aiz-overview-section--services::before,
.aiz-overview-section--methods::before {
	content: "";
	position: absolute;
	top: -80px;
	height: 81px;
}

.aiz-overview-section--services::before {
	right: 0;
	width: 72.5%;
	border-radius: 80px 0 0;
	background: var(--aiz-services-gradient);
	background-size: 137.931% 100%;
	background-position: right;
}

.aiz-overview-section--methods::before {
	left: 0;
	width: 72.5%;
	border-radius: 0 80px 0 0;
	background: var(--aiz-navy);
}

.aiz-overview-section--services h2 {
	color: var(--aiz-white);
	text-align: center;
	font-size: 40px;
	line-height: 44px;
}

.aiz-overview-services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.aiz-overview-service {
	min-height: 190px;
	padding: 32px;
	border-radius: 2px 2px 28px 2px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
}

.aiz-overview-service h3 {
	margin: 0 0 16px;
	color: var(--aiz-yellow);
	font-size: 25px;
}

.aiz-overview-service p {
	margin: 0;
	line-height: 1.5;
}

/* The overview cards use the same yellow letter colour as the Figma section. */
:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) ~ .aiz-overview-section--services .aiz-overview-services {
	gap: 32px;
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) ~ .aiz-overview-section--services .aiz-overview-service {
	min-height: 212px;
	padding: 48px 32px 40px;
	border-radius: 2px 2px 50px 2px;
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) ~ .aiz-overview-section--services .aiz-overview-service h3 {
	color: #ffce2b;
	font-size: 32px;
	line-height: 36px;
	font-weight: 600;
}

.aiz-overview-section--methods {
	position: relative;
	padding: 96px 0 112px;
	background: var(--aiz-navy);
}

.aiz-overview-section--methods .aiz-page {
	--aiz-method-count: 4;
}

.aiz-overview-section--methods-impact .aiz-page {
	--aiz-method-count: 5;
}

.aiz-overview-section--methods h2 {
	margin-bottom: 32px;
	font-size: 40px;
	line-height: 44px;
}

.aiz-overview-methods {
	display: grid;
	grid-template-columns: repeat(var(--aiz-method-count), minmax(0, 1fr));
	gap: 32px;
}

.aiz-overview-method {
	display: flex;
	min-height: 180px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 24px 16px;
	border-radius: 2px 2px 50px 2px;
	background: var(--aiz-white);
	color: var(--aiz-midnight);
	text-align: center;
}

.aiz-overview-method figure {
	width: 36px;
	height: 36px;
	margin: 0;
}

.aiz-overview-method img {
	display: block;
	width: 36px;
	height: 36px;
}

.aiz-overview-method h3 {
	margin: 0;
	color: var(--aiz-midnight);
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
	text-wrap: balance;
}

.aiz-contact--overview .aiz-section-intro h2 {
	color: #ffce2b;
}

@media (max-width: 900px) {
	.aiz-overview-approach__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aiz-overview-methods {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 901px) and (max-width: 1280px) {
	.aiz-overview-section--methods-impact .aiz-overview-methods {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.aiz-overview-approach__steps {
		grid-template-columns: 1fr;
	}

	.aiz-overview-methods {
		grid-template-columns: 1fr;
	}
}

.aiz-overview-section--faq {
	padding-bottom: 120px;
}

.aiz-overview-section--faq h2 {
	font-size: 40px;
	line-height: 44px;
}

.aiz-overview-section--faq .aiz-page {
	max-width: 900px;
}

.aiz-overview-section--faq .wp-block-details {
	margin: 0;
	padding: 22px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.aiz-overview-section--faq summary {
	cursor: pointer;
	font-size: 20px;
	font-weight: 600;
}

.aiz-overview-section--faq .wp-block-details p {
	max-width: 68ch;
	margin: 18px 0 0;
	line-height: 1.55;
}

@media (max-width: 900px) {
	.aiz-overview-hero {
		padding-top: 160px;
	}

	.aiz-overview-hero__inner {
		grid-template-columns: 1fr;
	}

	.aiz-overview-hero__image,
	.aiz-overview-hero__image img {
		min-height: 0;
		height: 320px;
	}

	.aiz-overview-services {
		grid-template-columns: 1fr;
	}

	.aiz-overview-service {
		min-height: 0;
	}
}

@media (max-width: 640px) {
	.aiz-overview-hero {
		padding: 145px 0 64px;
	}

	.aiz-overview-hero__copy h1 {
		font-size: 40px;
	}

	.aiz-overview-section {
		padding: 72px 0;
	}

	.aiz-overview-section--approach {
		padding: 112px 0;
	}

	.aiz-overview-section--services {
		padding-bottom: 136px;
	}

	.aiz-overview-section--services::before,
	.aiz-overview-section--methods::before {
		top: -40px;
		height: 41px;
	}

	.aiz-overview-section--services::before {
		border-radius: 40px 0 0;
	}

	.aiz-overview-section--methods::before {
		border-radius: 0 40px 0 0;
	}

	.aiz-overview-list li {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* The Inzicht and Impact heroes share the stepped colour seam from Figma. */
:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) {
	position: relative;
	min-height: 0;
	overflow: hidden;
	padding: 228px 0 0;
	background: var(--aiz-navy);
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact)::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #efab00 0%, #ffce2b 60%, #ffce2b 100%);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 69px),
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 276px) calc(100% - 69px),
		calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - 276px) calc(100% - 141px),
		0 calc(100% - 141px)
	);
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__inner {
	position: relative;
	z-index: 1;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 40%);
	gap: 32px;
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__image {
	min-height: 0;
	border-radius: 0;
	aspect-ratio: 481 / 566;
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__image img {
	display: block;
	height: 100%;
	aspect-ratio: 481 / 566;
	object-fit: contain;
}

/* Below 1400px the copy no longer fits above the 141px seam, so the photo moves
   down with it and keeps the seam in its notch. The cuts scale with the photo,
   which is 40% of the page column. */
@media (min-width: 901px) and (max-width: 1399px) {
	:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) {
		--aiz-overview-photo: calc((100vw - 2 * var(--aiz-page-gutter)) * .4);
		--aiz-overview-cut-left: calc(var(--aiz-overview-photo) * 141 / 481);
		--aiz-overview-cut-right: calc(var(--aiz-overview-photo) * 69 / 481);
		padding-bottom: var(--aiz-overview-cut-left);
	}

	:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact)::before {
		clip-path: polygon(
			0 0,
			100% 0,
			100% calc(100% - var(--aiz-overview-cut-right)),
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-overview-photo) * .574) calc(100% - var(--aiz-overview-cut-right)),
			calc(100% - max(var(--aiz-page-gutter), (100% - var(--aiz-page)) / 2) - var(--aiz-overview-photo) * .574) calc(100% - var(--aiz-overview-cut-left)),
			0 calc(100% - var(--aiz-overview-cut-left))
		);
	}

	:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__copy {
		padding-bottom: 40px;
	}

	:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__image {
		align-self: end;
		margin-bottom: calc(-1 * var(--aiz-overview-cut-left));
	}
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__copy h1 {
	margin-bottom: 34px;
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__copy p {
	margin-bottom: 33px;
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__buttons {
	gap: 32px;
}

.aiz-overview-hero--impact .aiz-overview-hero__buttons {
	transform: translateY(10px);
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .wp-block-button__link {
	gap: 24px;
	padding: 10px 15px;
	font-size: 16px;
	font-weight: 500;
}

.aiz-overview-hero--inzicht .wp-block-button:first-child {
	--aiz-cutout-text: linear-gradient(90deg, #e85f7c, #f4837b);
	--aiz-cutout-arrow: #ed7080;
}

.aiz-overview-hero--inzicht .wp-block-button:nth-child(2) {
	--aiz-cutout-text: linear-gradient(90deg, #e09f00, #f4ba12);
	--aiz-cutout-arrow: #e5aa00;
}

.aiz-overview-hero--impact .wp-block-button:first-child {
	--aiz-cutout-text: #6490e8;
	--aiz-cutout-arrow: #6490e8;
}

.aiz-overview-hero--impact .wp-block-button:nth-child(2) {
	--aiz-cutout-text: #2c8f82;
	--aiz-cutout-arrow: #2c8f82;
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__button-label {
	background: var(--aiz-cutout-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .wp-block-button__link::after {
	color: var(--aiz-cutout-arrow);
}

@media (max-width: 900px) {
	:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) {
		padding-top: 160px;
	}

	:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact)::before {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 0 calc(100% - 90px));
	}

	:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__inner {
		grid-template-columns: 1fr;
		gap: 52px;
	}

	:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__image,
	:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) .aiz-overview-hero__image img {
		height: auto;
	}
}

@media (max-width: 640px) {
	:is(.aiz-overview-hero--inzicht, .aiz-overview-hero--impact) {
		padding: 145px 0 0;
	}
}

@media (max-width: 640px) {
	.home .aiz-contact .aiz-section-intro h2 {
		font-size: clamp(28px, 8.8vw, 40px);
	}
}

/* Audience hero photos share the Overheid composition. Stored image blocks can
 * retain a 496px inline height; let the masked frame own the crop instead. */
:is(.aiz-hero--ik-werk-voor-branche, .aiz-hero--ik-werk-voor-onderwijsinstelling, .aiz-hero--ik-werk-voor-bedrijfsleven) .aiz-hero__visual {
	position: relative;
	height: 828px;
}

:is(.aiz-hero--ik-werk-voor-branche, .aiz-hero--ik-werk-voor-onderwijsinstelling, .aiz-hero--ik-werk-voor-bedrijfsleven) .aiz-hero__visual img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

@media (max-width: 900px) {
	:is(.aiz-hero--ik-werk-voor-branche, .aiz-hero--ik-werk-voor-onderwijsinstelling, .aiz-hero--ik-werk-voor-bedrijfsleven) .aiz-hero__visual {
		height: auto;
	}

	/* Follow the stacked photo when editorial copy changes the hero height. */
	:is(.aiz-hero--ik-werk-voor-branche, .aiz-hero--ik-werk-voor-onderwijsinstelling, .aiz-hero--ik-werk-voor-bedrijfsleven)::before {
		height: auto;
		bottom: 96px;
	}
}