/* ==========================================================================
   Contrast "Herken je dit?" (homepage en variant)
   Witte sectie: per probleem nu tegenover met Branding Masters.
   Alles begint met bmt-.
   ========================================================================== */

.bmt {
	--bmt-accent: #E0195F;
	--bmt-ink: #0A0A0B;
	--bmt-wrap: 1400px;
	--bmt-zacht: rgba(10, 10, 11, .72);
	--bmt-mute: rgba(10, 10, 11, .5);
	--bmt-lijn: rgba(10, 10, 11, .12);
	--bmt-kop-font: 'BM Frama', 'PP Frama', 'Helvetica Neue', Arial, sans-serif;
	--bmt-body: 'BM Frama Text', 'PP Frama Text', 'Helvetica Neue', Arial, sans-serif;
	--bmt-gutter: max(24px, calc((100% - var(--bmt-wrap)) / 2));

	position: relative;
	background: #FFFFFF;
	color: var(--bmt-ink);
	font-family: var(--bmt-body);
	font-size: 16px;
	line-height: 1.5;
	word-spacing: .06em; /* PP Frama heeft een smalle woordspatie */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.bmt *, .bmt *::before, .bmt *::after { box-sizing: border-box; }
.bmt :where(h2, p) { margin: 0; padding: 0; }
.bmt svg { display: block; flex: none; }

.bmt-in { padding: clamp(100px, 14vh, 170px) var(--bmt-gutter); }

.bmt-label { display: inline-flex; align-items: center; gap: 12px; font: 400 14px/1 var(--bmt-kop-font); color: var(--bmt-mute); }
.bmt-label i { width: 7px; height: 7px; border-radius: 2px; background: var(--bmt-accent); transform: rotate(45deg); }

.bmt.bmt .bmt-titel { margin-top: 22px; font: 400 clamp(40px, 4.6vw, 80px)/.95 var(--bmt-kop-font); letter-spacing: -.05em; color: var(--bmt-ink); text-wrap: balance; }
.bmt-titel span { display: block; }
.bmt.bmt .bmt-accent { color: var(--bmt-accent); }

.bmt-tabel { margin-top: clamp(44px, 7vh, 72px); }
.bmt-kop, .bmt-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.bmt-kop { padding-bottom: 16px; border-bottom: 1px solid var(--bmt-lijn); font: 400 14px/1 var(--bmt-kop-font); color: var(--bmt-mute); }
.bmt-kop span:last-child { color: var(--bmt-accent); }
.bmt-rij { padding: clamp(22px, 3.4vh, 34px) 0; border-bottom: 1px solid var(--bmt-lijn); }
.bmt-rij p { display: flex; align-items: flex-start; gap: 14px; font: 400 clamp(18px, 1.6vw, 24px)/1.35 var(--bmt-kop-font); letter-spacing: -.02em; }
.bmt-nu { color: var(--bmt-mute); }
.bmt-kruis, .bmt-vink { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; }
.bmt-kruis { border: 1px solid var(--bmt-lijn); color: var(--bmt-mute); }
.bmt-vink { background: var(--bmt-accent); color: #fff; }
.bmt-kruis svg, .bmt-vink svg { width: 14px; height: 14px; stroke-width: 2.6; }
.bmt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 760px) {
	.bmt-in { padding: 64px 16px 72px; }
	.bmt-kop { display: none; }
	.bmt-rij { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}