.mb {
		/* ============ HUISSTIJL ============ */
		--paper: #FAF8F4;
		--card: #ffffff;
		--ink: #040D44;
		--ink-2: #3A4170;
		--ink-3: #687196;
		--line: #DFDFE7;
		--deep: #040D44;
		--accent: #0A5CF5;
		--accent-deep: #0129FC;
		--accent-wash: #EBF2FF;
		--mint: #0A97FB;
		--warm: #A94B17;
		--warm-wash: #FFF1E7;
		/* =================================== */

		--nut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.6 21.4 7v10L12 22.4 2.6 17V7z M12 7.6a4.4 4.4 0 100 8.8 4.4 4.4 0 000-8.8z' fill='%23000'/%3E%3C/svg%3E");
		--disp: var(--f-display);
		--body: var(--f-body);
		--r: 6px;
		font-family: var(--body);
		background: transparent;
		color: var(--ink);
		font-size: 16px;
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
		padding: clamp(44px,6vw,80px) 0 80px;
	}

		.mb * {
			box-sizing: border-box
		}

		.mb button {
			font: inherit;
			color: inherit;
			background: none;
			border: 0;
			cursor: pointer
		}

		.mb :focus-visible {
			outline: 2px solid var(--accent);
			outline-offset: 3px;
			border-radius: 8px
		}

	.mb-wrap {
		max-width: var(--wrap);
		margin: 0 auto
	}

	.mb-eyebrow {
		font-family: var(--disp);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--accent-deep);
		margin: 0 0 16px;
		display: flex;
		align-items: center;
		gap: 9px
	}

		.mb-eyebrow::before {
			content: "";
			width: 15px;
			height: 15px;
			flex: none;
			background: var(--accent);
			-webkit-mask: var(--nut) center/contain no-repeat;
			mask: var(--nut) center/contain no-repeat;
		}

	.mb-h1 {
		font-family: var(--disp);
		margin: 0 0 18px;
		font-weight: 700;
		font-size: clamp(44px,6vw,72px);
		line-height: 1.05;
		letter-spacing: -.035em;
		max-width: 20ch
	}

		.mb-h1 em {
			font-style: normal;
			position: relative;
			white-space: nowrap;
			z-index: 0
		}

			.mb-h1 em::after {
				content: "";
				position: absolute;
				left: -.04em;
				right: -.04em;
				bottom: .06em;
				height: .34em;
				background: var(--mint);
				opacity: .55;
				border-radius: 4px;
				z-index: -1
			}

	.mb-lead {
		margin: 0 0 30px;
		font-size: clamp(16px,1.6vw,19px);
		color: var(--ink-2);
		max-width: 58ch;
		line-height: 1.62
	}

	/* ---------- Hoofdnavigatie ---------- */
	.mb-main {
		display: flex;
		gap: 5px;
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 5px;
		margin-bottom: 34px;
		overflow-x: auto;
		scrollbar-width: none
	}

		.mb-main::-webkit-scrollbar {
			display: none
		}

	.mb-mbtn {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 13px 20px;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 600;
		color: var(--ink-2);
		white-space: nowrap;
		transition: all .2s ease
	}

		.mb-mbtn:hover {
			background: var(--paper)
		}

		.mb-mbtn[aria-selected="true"] {
			background: var(--deep);
			color: #fff
		}

	.mb-mnum {
		font-family: var(--disp);
		font-size: 11.5px;
		font-weight: 700;
		color: var(--ink-3);
		transition: color .2s ease
	}

	.mb-mbtn[aria-selected="true"] .mb-mnum {
		color: var(--mint)
	}

	/* ---------- Kerncijfers ---------- */
	.mb-kpis {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
		gap: 12px;
		margin-bottom: 26px
	}

	.mb-kpi {
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 18px 20px
	}

		.mb-kpi .n {
			font-family: var(--disp);
			font-size: clamp(25px,3.2vw,34px);
			font-weight: 700;
			letter-spacing: -.035em;
			line-height: 1;
			font-variant-numeric: tabular-nums
		}

			.mb-kpi .n small {
				font-size: .48em;
				font-weight: 600;
				color: var(--ink-3);
				margin-left: 5px;
				letter-spacing: 0
			}

		.mb-kpi .l {
			font-size: 12.5px;
			color: var(--ink-2);
			margin-top: 8px;
			line-height: 1.45
		}

	.mb-grid {
		display: grid;
		grid-template-columns: minmax(240px,300px) 1fr;
		gap: 24px;
		align-items: start
	}

	/* ---------- Zijrail ---------- */
	.mb-nav {
		display: flex;
		flex-direction: column;
		gap: 7px;
		position: sticky;
		top: 22px
	}

	.mb-navitem {
		display: flex;
		gap: 14px;
		width: 100%;
		text-align: left;
		padding: 16px 17px;
		border-radius: 6px;
		border: 1px solid transparent;
		transition: all .2s cubic-bezier(.2,.7,.3,1)
	}

		.mb-navitem:hover {
			background: rgba(255,255,255,.7)
		}

		.mb-navitem[aria-selected="true"] {
			background: var(--deep);
			border-color: var(--deep);
			box-shadow: 0 10px 28px rgba(8,21,18,.17)
		}

	.mb-navnum {
		font-family: var(--disp);
		font-size: 13px;
		font-weight: 700;
		color: var(--ink-3);
		font-variant-numeric: tabular-nums;
		padding-top: 1px;
		min-width: 22px;
		transition: color .2s ease
	}

	.mb-navitem[aria-selected="true"] .mb-navnum {
		color: var(--mint)
	}

	.mb-navlabel {
		font-size: 15px;
		font-weight: 600;
		line-height: 1.32;
		letter-spacing: -.01em;
		transition: color .2s ease;
		display: block
	}

	.mb-navitem[aria-selected="true"] .mb-navlabel {
		color: #fff
	}

	.mb-navmeta {
		font-family: var(--disp);
		font-size: 11.5px;
		font-weight: 600;
		color: var(--ink-3);
		margin-top: 6px;
		transition: color .2s ease;
		display: block
	}

	.mb-navitem[aria-selected="true"] .mb-navmeta {
		color: rgba(255,255,255,.55)
	}

	/* ---------- Paneel ---------- */
	.mb-panel {
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: var(--r);
		padding: 34px 36px 28px;
		box-shadow: 0 1px 2px rgba(8,21,18,.04),0 14px 40px rgba(8,21,18,.055)
	}

	.mb-fade {
		animation: mbfade .4s cubic-bezier(.2,.7,.3,1)
	}

	@@keyframes mbfade {
		from {
			opacity: 0;
			transform: translateY(10px)
		}

		to {
			opacity: 1;
			transform: none
		}
	}

	.mb-ptop {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 20px
	}

	.mb-bignum {
		font-family: var(--disp);
		font-size: 56px;
		font-weight: 700;
		line-height: .85;
		letter-spacing: -.05em;
		color: var(--accent-wash);
		flex: none
	}

	.mb-h2 {
		font-family: var(--disp);
		margin: 0 0 14px;
		font-size: clamp(22px,2.7vw,31px);
		line-height: 1.16;
		letter-spacing: -.03em;
		font-weight: 700;
		max-width: 23ch
	}

	.mb-h3 {
		font-family: var(--disp);
		margin: 0 0 12px;
		font-size: 19px;
		font-weight: 700;
		letter-spacing: -.02em
	}

	.mb-pijn {
		margin: 0 0 24px;
		font-size: 16.5px;
		line-height: 1.68;
		color: var(--ink-2);
		max-width: 62ch
	}

	.mb-stat {
		display: flex;
		align-items: center;
		gap: 18px;
		background: var(--warm-wash);
		border-radius: 13px;
		padding: 16px 20px;
		margin-bottom: 32px
	}

	.mb-statnum {
		font-family: var(--disp);
		font-size: clamp(27px,3.4vw,35px);
		font-weight: 700;
		color: var(--warm);
		letter-spacing: -.035em;
		line-height: 1;
		white-space: nowrap;
		font-variant-numeric: tabular-nums
	}

	.mb-statlbl {
		font-size: 13.5px;
		color: var(--warm);
		line-height: 1.45;
		opacity: .95
	}

	.mb-secbar {
		display: flex;
		align-items: center;
		gap: 14px;
		flex-wrap: wrap;
		margin-bottom: 16px
	}

	.mb-sectitle {
		font-family: var(--disp);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .15em;
		text-transform: uppercase;
		color: var(--ink-3);
		margin: 0
	}

	.mb-toggle {
		display: flex;
		background: var(--paper);
		border-radius: 11px;
		padding: 3px;
		margin-left: auto;
		border: 1px solid var(--line)
	}

	.mb-tbtn {
		padding: 8px 17px;
		border-radius: 8px;
		font-size: 13px;
		font-weight: 600;
		color: var(--ink-2);
		transition: all .2s ease;
		white-space: nowrap
	}

		.mb-tbtn[aria-pressed="true"] {
			background: var(--deep);
			color: #fff;
			box-shadow: 0 2px 8px rgba(8,21,18,.18)
		}

		.mb-tbtn.mb-t-na[aria-pressed="true"] {
			background: var(--accent-deep)
		}

	/* ---------- Illustratie ---------- */
	.mb-viz {
		background: var(--paper);
		border-radius: 15px;
		padding: 18px 20px 14px;
		margin-bottom: 14px;
		overflow: hidden
	}

	.mb-scene {
		display: block;
		width: 100%;
		height: auto
	}

		.mb-scene .g-nu, .mb-scene .g-na {
			transition: opacity .45s cubic-bezier(.2,.7,.3,1)
		}

	.mb-nu .mb-scene .g-na {
		opacity: 0
	}

	.mb-na .mb-scene .g-nu {
		opacity: 0
	}

	.mb-scene text {
		font-family: 'Poppins',sans-serif
	}

	.mb-vizcap {
		font-size: 12.5px;
		color: var(--ink-2);
		margin: 0 2px 22px
	}

		.mb-vizcap b {
			font-family: var(--disp);
			font-weight: 700
		}

	.mb-nu .mb-vizcap b {
		color: var(--warm)
	}

	.mb-na .mb-vizcap b {
		color: var(--accent-deep)
	}

	/* ---------- Tijdlijn ---------- */
	.mb-timeline {
		position: relative;
		margin-bottom: 14px
	}

	.mb-row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 11px 12px 11px 0;
		position: relative;
		border-radius: 6px;
		transition: background .18s ease
	}

		.mb-row:hover {
			background: var(--paper)
		}

		.mb-row::before {
			content: "";
			position: absolute;
			left: 11px;
			top: 0;
			bottom: 0;
			width: 2px;
			background: var(--line)
		}

		.mb-row:first-child::before {
			top: 50%
		}

		.mb-row:last-child::before {
			bottom: 50%
		}

	.mb-marker {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		flex: none;
		z-index: 1;
		background: var(--card);
		border: 2px solid var(--line);
		display: grid;
		place-items: center;
		transition: all .3s cubic-bezier(.2,.7,.3,1)
	}

		.mb-marker svg {
			width: 11px;
			height: 11px;
			display: block
		}

	.mb-rowlabel {
		font-size: 15px;
		font-weight: 500;
		line-height: 1.35;
		flex: 1;
		min-width: 0
	}

	.mb-chip {
		font-family: var(--disp);
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .09em;
		text-transform: uppercase;
		padding: 4px 10px;
		border-radius: 999px;
		white-space: nowrap;
		flex: none;
		background: var(--paper);
		color: var(--ink-3);
		transition: all .3s ease
	}

	.mb-i {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		flex: none;
		border: 1px solid var(--line);
		display: grid;
		place-items: center;
		font-family: var(--disp);
		font-size: 12px;
		font-weight: 700;
		color: var(--ink-3);
		transition: all .18s ease
	}

		.mb-i:hover {
			border-color: var(--accent);
			color: var(--accent-deep);
			background: var(--accent-wash)
		}

		.mb-i[aria-expanded="true"] {
			background: var(--deep);
			border-color: var(--deep);
			color: var(--mint)
		}

	.mb-na .mb-row.auto .mb-marker {
		background: var(--accent);
		border-color: var(--accent)
	}

	.mb-na .mb-row.auto .mb-chip {
		background: var(--accent-wash);
		color: var(--accent-deep)
	}

	.mb-na .mb-row.auto .mb-rowlabel {
		color: var(--ink-2)
	}

	.mb-na .mb-row.jij .mb-marker {
		border-color: var(--ink);
		background: var(--ink)
	}

	.mb-na .mb-row.jij .mb-chip {
		background: var(--ink);
		color: #fff
	}

	.mb-na .mb-row.jij .mb-rowlabel {
		font-weight: 600
	}

	.mb-nu .mb-row .mb-chip {
		background: var(--warm-wash);
		color: var(--warm)
	}

	.mb-nu .mb-row.basis .mb-chip {
		background: var(--paper);
		color: var(--ink-3)
	}

	/* ---------- Infokaart ---------- */
	.mb-info {
		background: var(--deep);
		border-radius: 6px;
		padding: 22px 24px;
		margin: 6px 0 20px;
		color: #fff;
		animation: mbfade .3s cubic-bezier(.2,.7,.3,1)
	}

	.mb-infotop {
		font-family: var(--disp);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--mint);
		margin-bottom: 12px
	}

	.mb-infotitle {
		font-family: var(--disp);
		font-size: 18px;
		font-weight: 600;
		letter-spacing: -.015em;
		margin-bottom: 16px
	}

	.mb-infocols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 22px
	}

	.mb-infocol h4 {
		font-family: var(--disp);
		margin: 0 0 7px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: rgba(255,255,255,.42)
	}

	.mb-infocol p {
		margin: 0;
		font-size: 14px;
		line-height: 1.6;
		color: rgba(255,255,255,.86)
	}

	.mb-infocol.na h4 {
		color: var(--mint)
	}

	.mb-infoclose {
		margin-top: 16px;
		font-size: 12.5px;
		color: rgba(255,255,255,.5);
		text-decoration: underline;
		text-underline-offset: 3px
	}

	.mb-tally {
		font-size: 13.5px;
		color: var(--ink-2);
		margin: 0 0 28px;
		padding-left: 2px
	}

		.mb-tally b {
			font-family: var(--disp);
			color: var(--accent-deep);
			font-weight: 700
		}

	/* ---------- Rekenmodule ---------- */
	.mb-calc {
		background: var(--deep);
		border-radius: 15px;
		padding: 24px 26px;
		margin-bottom: 26px;
		color: #fff
	}

	.mb-calchead {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin-bottom: 20px;
		flex-wrap: wrap
	}

		.mb-calchead h3 {
			font-family: var(--disp);
			margin: 0;
			font-size: 16px;
			font-weight: 700;
			letter-spacing: -.015em
		}

		.mb-calchead span {
			font-size: 12.5px;
			color: rgba(255,255,255,.5)
		}

	.mb-sliders {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin-bottom: 22px
	}

	.mb-slider label {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		font-size: 13px;
		color: rgba(255,255,255,.72);
		margin-bottom: 10px
	}

		.mb-slider label b {
			font-family: var(--disp);
			font-size: 17px;
			color: var(--mint);
			font-variant-numeric: tabular-nums
		}

	.mb-slider input[type=range] {
		-webkit-appearance: none;
		appearance: none;
		width: 100%;
		height: 5px;
		border-radius: 5px;
		background: linear-gradient(var(--mint),var(--mint)) 0/var(--pct,50%) 100% no-repeat, rgba(255,255,255,.16);
		cursor: pointer
	}

		.mb-slider input[type=range]::-webkit-slider-thumb {
			-webkit-appearance: none;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: var(--deep);
			border: 3px solid var(--mint);
			cursor: grab;
			box-shadow: 0 2px 8px rgba(0,0,0,.35)
		}

		.mb-slider input[type=range]::-moz-range-thumb {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: var(--deep);
			border: 3px solid var(--mint);
			cursor: grab;
			box-shadow: 0 2px 8px rgba(0,0,0,.35)
		}

	.mb-out {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px
	}

	.mb-outcell {
		background: rgba(255,255,255,.06);
		border-radius: 6px;
		padding: 16px 18px;
		border: 1px solid rgba(255,255,255,.09)
	}

		.mb-outcell .n {
			font-family: var(--disp);
			font-size: clamp(22px,3vw,30px);
			font-weight: 700;
			letter-spacing: -.035em;
			line-height: 1;
			font-variant-numeric: tabular-nums;
			color: var(--mint)
		}

		.mb-outcell .l {
			font-size: 12.5px;
			color: rgba(255,255,255,.62);
			margin-top: 8px;
			line-height: 1.45
		}

	.mb-calcnote {
		font-size: 11.5px;
		color: rgba(255,255,255,.38);
		margin: 15px 0 0;
		line-height: 1.55
	}

	.mb-result {
		border-top: 1px solid var(--line);
		padding-top: 24px;
		display: flex;
		gap: 16px;
		align-items: flex-start
	}

	.mb-resicon {
		width: 36px;
		height: 36px;
		border-radius: 11px;
		background: var(--accent-wash);
		display: grid;
		place-items: center;
		flex: none;
		color: var(--accent-deep)
	}

		.mb-resicon svg {
			width: 18px;
			height: 18px;
			display: block
		}

	.mb-restxt {
		font-size: 15.5px;
		line-height: 1.6;
		max-width: 58ch
	}

	.mb-pager {
		display: flex;
		align-items: center;
		gap: 9px;
		margin-top: 24px;
		padding-top: 20px;
		border-top: 1px solid var(--line)
	}

	.mb-pbtn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 9px 16px;
		font-size: 13.5px;
		font-weight: 600;
		transition: all .16s ease
	}

		.mb-pbtn:hover:not(:disabled) {
			border-color: var(--accent);
			color: var(--accent-deep);
			background: var(--accent-wash)
		}

		.mb-pbtn:disabled {
			opacity: .32;
			cursor: default
		}

	.mb-dots {
		display: flex;
		gap: 6px;
		margin-left: auto;
		align-items: center
	}

	.mb-dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--line);
		transition: all .25s ease
	}

		.mb-dot.on {
			background: var(--accent);
			width: 22px;
			border-radius: 4px
		}

	/* ---------- Geheugen ---------- */
	.mb-two {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		margin-bottom: 26px
	}

	.mb-quote {
		background: var(--accent-wash);
		border-radius: 15px;
		padding: 24px 26px;
		margin-bottom: 28px
	}

		.mb-quote p {
			margin: 0;
			font-size: 17px;
			line-height: 1.6;
			color: var(--accent-deep);
			font-weight: 500;
			max-width: 56ch
		}

	.mb-steps {
		display: flex;
		gap: 6px;
		margin-bottom: 20px;
		flex-wrap: wrap
	}

	.mb-sbtn {
		display: flex;
		align-items: center;
		gap: 9px;
		padding: 11px 16px;
		border-radius: 11px;
		border: 1px solid var(--line);
		font-size: 13.5px;
		font-weight: 600;
		color: var(--ink-2);
		transition: all .2s ease
	}

		.mb-sbtn:hover {
			border-color: var(--accent);
			background: var(--accent-wash)
		}

		.mb-sbtn[aria-pressed="true"] {
			background: var(--deep);
			border-color: var(--deep);
			color: #fff
		}

		.mb-sbtn i {
			font-family: var(--disp);
			font-style: normal;
			font-size: 11px;
			font-weight: 700;
			color: var(--ink-3);
			transition: color .2s ease
		}

		.mb-sbtn[aria-pressed="true"] i {
			color: var(--mint)
		}

	.mb-melding {
		background: var(--paper);
		border-left: 3px solid var(--ink-3);
		border-radius: 0 12px 12px 0;
		padding: 18px 22px;
		margin-bottom: 22px
	}

	.mb-mfrom {
		font-size: 12.5px;
		color: var(--ink-3);
		margin-bottom: 8px
	}

	.mb-mbody {
		font-size: 15px;
		line-height: 1.65;
		white-space: pre-line
	}

	.mb-facts {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-bottom: 22px
	}

	.mb-fact {
		display: flex;
		gap: 14px;
		align-items: flex-start;
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 14px 17px;
		animation: mbfade .34s cubic-bezier(.2,.7,.3,1) backwards
	}

	.mb-fdot {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		flex: none;
		margin-top: 7px
	}

	.mb-ftxt {
		flex: 1;
		min-width: 0
	}

	.mb-fsrc {
		font-family: var(--disp);
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--ink-3);
		margin-bottom: 4px
	}

	.mb-fval {
		font-size: 14.5px;
		line-height: 1.5
	}

	.mb-fwhere {
		font-size: 12px;
		color: var(--ink-3);
		margin-top: 5px;
		line-height: 1.45
	}

	.mb-keuzes {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
		gap: 1px;
		background: var(--line);
		border: 1px solid var(--line);
		border-radius: 6px;
		overflow: hidden;
		margin-bottom: 22px
	}

	.mb-keuze {
		background: var(--card);
		padding: 14px 16px
	}

		.mb-keuze .k {
			font-family: var(--disp);
			font-size: 10.5px;
			font-weight: 700;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--ink-3);
			margin-bottom: 5px
		}

		.mb-keuze .v {
			font-size: 14.5px;
			font-weight: 600;
			line-height: 1.35
		}

			.mb-keuze .v small {
				display: block;
				font-weight: 400;
				font-size: 12px;
				color: var(--ink-3);
				margin-top: 3px
			}

	.mb-antwoord {
		border: 1px solid var(--line);
		border-radius: 6px;
		overflow: hidden;
		margin-bottom: 22px
	}

	.mb-ahead {
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		padding: 10px 16px;
		font-size: 12px;
		color: var(--ink-3);
		display: flex;
		justify-content: space-between;
		gap: 10px
	}

	.mb-abody {
		padding: 18px 18px;
		font-size: 14.5px;
		line-height: 1.7;
		white-space: pre-line;
		color: var(--ink-2)
	}

	.mb-domeinen {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
		gap: 12px;
		margin-bottom: 8px
	}

	.mb-dom {
		text-align: left;
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 18px 20px;
		transition: all .2s ease
	}

		.mb-dom:hover {
			border-color: var(--accent);
			box-shadow: 0 8px 22px rgba(8,21,18,.07)
		}

		.mb-dom[aria-expanded="true"] {
			background: var(--deep);
			border-color: var(--deep)
		}

	.mb-domtop {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 9px
	}

	.mb-domdot {
		width: 11px;
		height: 11px;
		border-radius: 4px;
		flex: none
	}

	.mb-domnaam {
		font-family: var(--disp);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: -.015em
	}

	.mb-dom[aria-expanded="true"] .mb-domnaam {
		color: #fff
	}

	.mb-domsub {
		font-size: 12.5px;
		color: var(--ink-3);
		line-height: 1.5
	}

	.mb-dom[aria-expanded="true"] .mb-domsub {
		color: rgba(255,255,255,.6)
	}

	.mb-domdet {
		background: var(--deep);
		color: #fff;
		border-radius: 6px;
		padding: 24px 26px;
		margin-top: 12px;
		animation: mbfade .3s cubic-bezier(.2,.7,.3,1)
	}

		.mb-domdet h4 {
			font-family: var(--disp);
			margin: 0 0 6px;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: .13em;
			text-transform: uppercase;
			color: var(--mint)
		}

		.mb-domdet ul {
			list-style: none;
			margin: 0 0 18px;
			padding: 0
		}

		.mb-domdet li {
			font-size: 14px;
			color: rgba(255,255,255,.86);
			padding: 8px 0;
			border-bottom: 1px solid rgba(255,255,255,.09);
			line-height: 1.55
		}

			.mb-domdet li:last-child {
				border-bottom: 0
			}

		.mb-domdet p {
			margin: 0;
			font-size: 14px;
			line-height: 1.6;
			color: rgba(255,255,255,.7)
		}

	.mb-nooit {
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 15px;
		padding: 24px 26px
	}

		.mb-nooit ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 14px 26px
		}

		.mb-nooit li {
			display: flex;
			gap: 12px;
			align-items: flex-start;
			font-size: 14.5px;
			line-height: 1.55;
			color: var(--ink-2)
		}

			.mb-nooit li b {
				color: var(--ink);
				font-weight: 600
			}

	.mb-cross {
		width: 20px;
		height: 20px;
		border-radius: 6px;
		background: var(--warm-wash);
		color: var(--warm);
		flex: none;
		display: grid;
		place-items: center;
		font-size: 12px;
		font-weight: 700;
		margin-top: 2px
	}

	.mb-checkbox {
		width: 20px;
		height: 20px;
		border-radius: 6px;
		background: var(--accent-wash);
		color: var(--accent-deep);
		flex: none;
		display: grid;
		place-items: center;
		margin-top: 2px
	}

		.mb-checkbox svg {
			width: 11px;
			height: 11px
		}

	/* ---------- Inzet ---------- */
	.mb-fases {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
		gap: 10px;
		margin-bottom: 24px
	}

	.mb-fase {
		text-align: left;
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 17px 19px;
		transition: all .2s ease;
		position: relative
	}

		.mb-fase:hover {
			border-color: var(--accent)
		}

		.mb-fase[aria-selected="true"] {
			background: var(--deep);
			border-color: var(--deep);
			box-shadow: 0 10px 26px rgba(8,21,18,.16)
		}

	.mb-fasenum {
		font-family: var(--disp);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--ink-3);
		margin-bottom: 8px
	}

	.mb-fase[aria-selected="true"] .mb-fasenum {
		color: var(--mint)
	}

	.mb-fasenaam {
		font-family: var(--disp);
		font-size: 16px;
		font-weight: 700;
		letter-spacing: -.02em;
		margin-bottom: 6px
	}

	.mb-fase[aria-selected="true"] .mb-fasenaam {
		color: #fff
	}

	.mb-faseuur {
		font-size: 12.5px;
		color: var(--ink-3)
	}

	.mb-fase[aria-selected="true"] .mb-faseuur {
		color: rgba(255,255,255,.6)
	}

	.mb-fasedet {
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 15px;
		padding: 26px 28px;
		margin-bottom: 26px
	}

	.mb-fasecols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 26px;
		margin-top: 18px
	}

	.mb-fasecol h4 {
		font-family: var(--disp);
		margin: 0 0 10px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .13em;
		text-transform: uppercase;
		color: var(--ink-3)
	}

	.mb-fasecol.jij h4 {
		color: var(--accent-deep)
	}

	.mb-fasecol ul {
		list-style: none;
		margin: 0;
		padding: 0
	}

	.mb-fasecol li {
		display: flex;
		gap: 11px;
		align-items: flex-start;
		font-size: 14.5px;
		line-height: 1.55;
		padding: 7px 0;
		color: var(--ink-2)
	}

	.mb-bullet {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--line);
		flex: none;
		margin-top: 9px
	}

	.mb-fasecol.jij .mb-bullet {
		background: var(--accent)
	}

	.mb-faseopbrengst {
		margin-top: 20px;
		padding-top: 18px;
		border-top: 1px solid var(--line);
		font-size: 14.5px;
		line-height: 1.6;
		color: var(--ink)
	}

		.mb-faseopbrengst b {
			font-family: var(--disp);
			color: var(--accent-deep)
		}

	.mb-lijst {
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 15px;
		padding: 24px 26px
	}

	.mb-lijstitem {
		display: flex;
		gap: 13px;
		align-items: flex-start;
		padding: 11px 0;
		border-bottom: 1px dashed var(--line)
	}

		.mb-lijstitem:last-child {
			border-bottom: 0
		}

	.mb-lijsttxt {
		flex: 1;
		min-width: 0
	}

		.mb-lijsttxt b {
			display: block;
			font-size: 14.5px;
			font-weight: 600;
			margin-bottom: 3px
		}

		.mb-lijsttxt span {
			font-size: 13px;
			color: var(--ink-3);
			line-height: 1.5
		}

	.mb-weten {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
		gap: 12px;
		margin-top: 24px
	}

	.mb-weet {
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 20px 22px
	}

		.mb-weet h4 {
			font-family: var(--disp);
			margin: 0 0 8px;
			font-size: 15px;
			font-weight: 700;
			letter-spacing: -.015em
		}

		.mb-weet p {
			margin: 0;
			font-size: 13.5px;
			line-height: 1.6;
			color: var(--ink-2)
		}

	/* ---------- Overzichtskaarten ---------- */
	.mb-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(298px,1fr));
		gap: 12px;
		margin-bottom: 20px
	}

	.mb-card {
		text-align: left;
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 22px 24px 18px;
		display: flex;
		flex-direction: column;
		transition: all .2s cubic-bezier(.2,.7,.3,1)
	}

		.mb-card:hover {
			border-color: var(--accent);
			transform: translateY(-2px);
			box-shadow: 0 14px 34px rgba(8,21,18,.09)
		}

	.mb-cardtop {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 11px
	}

	.mb-cardnum {
		font-family: var(--disp);
		font-size: 13px;
		font-weight: 700;
		color: var(--accent);
		letter-spacing: .05em
	}

	.mb-cardmeta {
		font-family: var(--disp);
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--ink-3);
		margin-left: auto
	}

	.mb-cardtitel {
		font-family: var(--disp);
		font-size: 18px;
		font-weight: 700;
		letter-spacing: -.02em;
		line-height: 1.25;
		margin-bottom: 9px
	}

	.mb-cardkort {
		font-size: 14px;
		color: var(--ink-2);
		line-height: 1.55;
		margin-bottom: 16px;
		flex: 1
	}

	.mb-cardvoet {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding-top: 14px;
		border-top: 1px solid var(--line);
		font-size: 13px
	}

		.mb-cardvoet b {
			font-family: var(--disp);
			color: var(--accent-deep);
			font-weight: 700
		}

		.mb-cardvoet span {
			color: var(--ink-3);
			font-weight: 600
		}

	.mb-verder {
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 18px 22px;
		font-size: 14px;
		color: var(--ink-2);
		line-height: 1.7
	}

		.mb-verder b {
			display: block;
			font-family: var(--disp);
			font-size: 11px;
			font-weight: 700;
			letter-spacing: .13em;
			text-transform: uppercase;
			color: var(--ink-3);
			margin-bottom: 9px
		}

	.mb-vlink {
		font-weight: 600;
		color: var(--accent-deep);
		text-decoration: underline;
		text-underline-offset: 3px
	}

	.mb-terugbar {
		margin-bottom: 16px
	}

	.mb-blok {
		margin-bottom: 30px
	}

		.mb-blok:last-child {
			margin-bottom: 0
		}

	.mb-foot {
		margin-top: 32px;
		font-size: 12px;
		color: var(--ink-3);
		line-height: 1.65;
		max-width: 80ch
	}

	@media(max-width:900px) {
		.mb {
			padding: 48px 16px 58px
		}

		.mb-grid, .mb-two, .mb-infocols, .mb-sliders, .mb-out, .mb-fasecols {
			grid-template-columns: 1fr;
			gap: 16px
		}

		.mb-nooit ul {
			grid-template-columns: 1fr
		}

		.mb-nav {
			position: static;
			flex-direction: row;
			overflow-x: auto;
			gap: 8px;
			padding-bottom: 4px;
			scrollbar-width: none
		}

			.mb-nav::-webkit-scrollbar {
				display: none
			}

		.mb-navitem {
			flex-direction: column;
			gap: 6px;
			min-width: 174px;
			border-color: var(--line);
			background: var(--card)
		}

		.mb-navmeta {
			margin-top: 0
		}

		.mb-panel {
			padding: 24px 18px 20px
		}

		.mb-bignum {
			display: none
		}

		.mb-toggle {
			margin-left: 0;
			width: 100%
		}

		.mb-tbtn {
			flex: 1;
			text-align: center
		}

		.mb-chip {
			display: none
		}

		.mb-viz {
			padding: 12px 12px 10px
		}
	}

	@media(prefers-reduced-motion:reduce) {
		.mb * {
			animation: none !important;
			transition: none !important
		}
	}


/* Shared MerlinBoost typography, spacing and blue accents. */
.mb-intro { max-width: 980px; margin: 0 0 52px; }
.mb-intro .mb-eyebrow { font-family: var(--body); font-size: 12px; letter-spacing: .12em; }
.mb-intro .mb-eyebrow::before { width: 8px; height: 8px; border-radius: 50%; mask: none; -webkit-mask: none; }
.mb-intro .mb-h1 { font-size: clamp(2.25rem,5.3vw,4.25rem); letter-spacing: -.025em; line-height: 1.14; max-width: 23ch; }
.mb-h1 em { font-style: italic; white-space: normal; color: var(--accent); }
.mb-h1 em::after { display: none; }
.mb-intro .mb-lead { margin: 24px 0 28px; font-size: clamp(16px,1.6vw,19px); }
.mb-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.mb-discover { color: var(--ink); font-size: 14px; font-weight: 500; text-underline-offset: 4px; }
.mb-discover span { color: var(--accent); margin-left: 5px; }
.mb-main { scroll-margin-top: 100px; box-shadow: none; }
.mb-mbtn { flex: 1; justify-content: center; }
.mb-mbtn[aria-selected="true"] { background: var(--accent); }
.mb-mbtn[aria-selected="true"] .mb-mnum { color: #fff; }
.mb-panel, .mb-overcard, .mb-blok { box-shadow: none; }
.mb-nav { top: 100px; }
.mb-eyebrow, .mb-knum, .mb-navnum, .mb-mnum { font-family: var(--body); }
.mb-foot { color: var(--ink-2); }
.mb p { max-width: none; }
.mb-ftxt { min-width: 0; overflow-wrap: anywhere; }
.mb-main button:focus-visible, .mb button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) {
    .mb { padding: 44px 0 64px; }
    .mb-grid > *, .mb-two > *, .mb-infocols > * { min-width: 0; }
    .mb-nav { top: auto; }
    .mb-main { gap: 4px; }
    .mb-mbtn { padding: 12px; font-size: 12px; gap: 6px; }
}
@media (max-width: 520px) {
    .mb-intro { margin-bottom: 32px; }
    .mb-actions { align-items: stretch; flex-direction: column; gap: 16px; }
    .mb-actions .btn { justify-content: center; }
    .mb-main { display: grid; grid-template-columns: 1fr; }
    .mb-mbtn { justify-content: flex-start; }
}
