/* ==========================================================================
   BM Projecten, variant "kaarten"
   Lichte sectie met een slider van projectkaarten: screenshot met nummer,
   branche, klant, wat we deden, een groot eerste resultaat en twee kleinere
   die optellen, en een ronde pijlknop. Alles begint met bmc-.
   Overgenomen uit branding-masters-sectie-projecten.html (26 oktober),
   zonder de varianten die niet gebruikt worden, met PP Frama.
   ========================================================================== */

.bmc {
	--bmc-accent: #E0195F;
	--bmc-ink: #0A0A0B;
	--bmc-wrap: 1400px;

	/* Licht (standaard) */
	--bmc-bg: #F4F1ED;
	--bmc-fg: #0A0A0B;
	--bmc-zacht: rgba(10, 10, 11, .74);
	--bmc-mute: rgba(10, 10, 11, .54);
	--bmc-lijn: rgba(10, 10, 11, .1);
	--bmc-lijn-2: rgba(10, 10, 11, .16);
	--bmc-kaart: #FFFFFF;
	--bmc-kaart-rand: rgba(10, 10, 11, .08);
	--bmc-vlak: #E9E5DF;
	--bmc-knop-bg: #0A0A0B;
	--bmc-knop-fg: #FFFFFF;
	--bmc-schaduw: 0 24px 50px -30px rgba(10, 10, 11, .35);
	--bmc-accent-licht: color-mix(in srgb, var(--bmc-accent) 72%, #fff);
	--bmc-kop: 'BM Frama', 'PP Frama', 'Helvetica Neue', Arial, sans-serif;
	--bmc-body: 'BM Frama Text', 'PP Frama Text', 'Helvetica Neue', Arial, sans-serif;
	--bmc-gutter: max(24px, (100% - var(--bmc-wrap)) / 2);
	--bmc-ease: cubic-bezier(.2, .8, .2, 1);
	--bmc-kaartbreedte: min(560px, 82vw);
	--bmc-gap: 20px;

	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--bmc-bg);
	color: var(--bmc-fg);
	font-family: var(--bmc-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 7vw, 104px);
}

.bmc.bmc-donker {
	--bmc-bg: #0A0A0B;
	--bmc-fg: #F4F1ED;
	--bmc-zacht: rgba(244, 241, 237, .78);
	--bmc-mute: rgba(244, 241, 237, .52);
	--bmc-lijn: rgba(255, 255, 255, .08);
	--bmc-lijn-2: rgba(255, 255, 255, .14);
	--bmc-kaart: #131215;
	--bmc-kaart-rand: rgba(255, 255, 255, .08);
	--bmc-vlak: #1B1A1E;
	--bmc-knop-bg: #F4F1ED;
	--bmc-knop-fg: #0A0A0B;
	--bmc-schaduw: 0 24px 50px -30px rgba(0, 0, 0, .8);
}

.bmc :where(h2, h3, p, ul, ol, li, dl, dt, dd, figure) { margin: 0; padding: 0; }
.bmc :where(ul, ol) { list-style: none; }
.bmc :where(a) { color: inherit; text-decoration: none; }
.bmc :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.bmc :focus-visible { outline: 2px solid var(--bmc-accent); outline-offset: 3px; }

.bmc-in { padding: 0 var(--bmc-gutter); }

/* ---------- Kop ---------- */
.bmc-kop {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
	gap: 32px 64px;
	align-items: end;
}

.bmc-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--bmc-mute);
}
.bmc-label i { width: 7px; height: 7px; border-radius: 2px; background: var(--bmc-accent); transform: rotate(45deg); }

.bmc.bmc .bmc-titel {
	font-family: var(--bmc-kop);
	font-weight: 700;
	font-size: clamp(38px, 4.6vw, 68px);
	line-height: .96;
	letter-spacing: -.045em;
	color: var(--bmc-fg);
	text-wrap: balance;
}
.bmc-regel { display: block; overflow: hidden; padding: .04em .1em .1em 0; margin-bottom: -.1em; }
.bmc-regel-in { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--bmc-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.bmc.is-zichtbaar .bmc-regel-in { transform: none; }
.bmc-accent { color: var(--bmc-accent); }

.bmc-kop-r { padding-bottom: 6px; }
.bmc-intro { max-width: 460px; font-size: 16.5px; line-height: 1.6; color: var(--bmc-zacht); }

.bmc-tekstlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--bmc-lijn-2);
	font: 600 15px/1 var(--bmc-kop);
	letter-spacing: -.01em;
	transition: border-color .3s;
}
.bmc-tekstlink span { width: 15px; height: 15px; color: var(--bmc-accent); transition: transform .4s var(--bmc-ease); }
.bmc-tekstlink span svg { width: 100%; height: 100%; stroke-width: 1.7; }
.bmc-tekstlink:hover { border-color: var(--bmc-accent); }
.bmc-tekstlink:hover span { transform: translate(2px, -2px); }

/* ---------- Bediening ---------- */
.bmc-bediening {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid var(--bmc-lijn);
}

.bmc-teller { display: inline-flex; align-items: baseline; gap: 6px; font: 500 14px/1 var(--bmc-kop); color: var(--bmc-mute); font-variant-numeric: tabular-nums; }
.bmc-teller b { font-size: 20px; font-weight: 700; color: var(--bmc-fg); letter-spacing: -.02em; }
.bmc-teller em { font-style: normal; }

.bmc-pijlen { display: flex; gap: 8px; }
.bmc-pijl {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--bmc-lijn-2);
	display: grid;
	place-items: center;
	transition: background .3s, border-color .3s, color .3s, opacity .3s, transform .3s;
}
.bmc-pijl svg { width: 20px; height: 20px; stroke-width: 1.5; }
.bmc-pijl:hover { background: var(--bmc-knop-bg); color: var(--bmc-knop-fg); border-color: var(--bmc-knop-bg); }
.bmc-pijl:disabled { opacity: .3; cursor: default; }
.bmc-pijl:disabled:hover { background: none; color: inherit; border-color: var(--bmc-lijn-2); }

/* ---------- Spoor ---------- */
.bmc-spoor-wrap { margin-top: 26px; }

.bmc-spoor {
	display: flex;
	gap: var(--bmc-gap);
	padding: 12px var(--bmc-gutter) 28px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--bmc-gutter);
	scrollbar-width: none;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
}
.bmc-spoor::-webkit-scrollbar { display: none; }
.bmc-spoor.is-sleept { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.bmc-spoor.is-sleept * { pointer-events: none; }

.bmc-kaart {
	flex: 0 0 var(--bmc-kaartbreedte);
	scroll-snap-align: start;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .9s var(--bmc-ease), transform .9s var(--bmc-ease);
	transition-delay: calc(var(--i, 0) * 80ms + 200ms);
}
.bmc.is-zichtbaar .bmc-kaart { opacity: 1; transform: none; }

.bmc-kaart-in {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 24px;
	background: var(--bmc-kaart);
	border: 1px solid var(--bmc-kaart-rand);
	box-shadow: var(--bmc-schaduw);
	overflow: hidden;
	transition: transform .5s var(--bmc-ease), box-shadow .5s var(--bmc-ease), border-color .3s;
}
.bmc-kaart-in:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -30px rgba(10, 10, 11, .4); border-color: color-mix(in srgb, var(--bmc-accent) 35%, var(--bmc-kaart-rand)); }

/* Beeld: liggend kader, screenshot vanaf de bovenkant */
.bmc-beeld {
	position: relative;
	aspect-ratio: 16 / 10;
	margin: 10px 10px 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--bmc-vlak);
}
.bmc-beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.01);
	transition: transform 1.2s var(--bmc-ease);
}
.bmc-kaart-in:hover .bmc-beeld img { transform: scale(1.05); }

.bmc-leeg { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(10, 10, 11, .045) 14px 15px); }

.bmc-sector {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 7px 11px;
	border-radius: 10px;
	background: rgba(10, 10, 11, .62);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
}

.bmc-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }

.bmc-klant { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bmc.bmc .bmc-naam { font: 600 clamp(22px, 1.8vw, 26px)/1.1 var(--bmc-kop); letter-spacing: -.03em; color: var(--bmc-fg); }
.bmc-diensten { font-size: 14px; color: var(--bmc-mute); }

/* Resultaten: drie cijfers naast elkaar met een dunne lijn ertussen */
.bmc-cijfers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--bmc-lijn);
}
.bmc-cijfer { min-width: 0; padding-right: 14px; }
.bmc-cijfer + .bmc-cijfer { padding-left: 16px; border-left: 1px solid var(--bmc-lijn); }
.bmc-getal {
	font: 700 clamp(26px, 2.3vw, 34px)/1 var(--bmc-kop);
	letter-spacing: -.04em;
	color: var(--bmc-fg);
	white-space: nowrap;
}
.bmc-cijfer:first-child .bmc-getal { color: var(--bmc-accent); }
.bmc-cijfer dd { margin-top: 7px; font-size: 12.5px; line-height: 1.35; color: var(--bmc-mute); text-wrap: pretty; }

/* Link onderaan; het onzichtbare vlak maakt de hele kaart klikbaar */
.bmc-kaartlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 22px;
	font: 600 14px/1 var(--bmc-kop);
	letter-spacing: -.01em;
	color: var(--bmc-fg);
	width: max-content;
}
.bmc-kaartlink span { width: 14px; height: 14px; color: var(--bmc-accent); transition: transform .4s var(--bmc-ease); }
.bmc-kaartlink span svg { width: 100%; height: 100%; stroke-width: 1.7; }
.bmc-kaart-in:hover .bmc-kaartlink span { transform: translate(2px, -2px); }
.bmc-kaartlink-vlak { position: absolute; inset: 0; z-index: 1; }

/* ---------- Voortgangslijn ---------- */
.bmc-lijn { position: relative; height: 2px; margin-top: 6px; background: var(--bmc-lijn); border-radius: 2px; overflow: hidden; }
.bmc-lijn i { position: absolute; left: 0; top: 0; height: 100%; width: var(--bmc-vb, 20%); transform: translateX(var(--bmc-vx, 0)); background: var(--bmc-accent); border-radius: 2px; transition: transform .25s linear, width .25s linear; }

/* ---------- Binnenkomen ---------- */
.bmc-in-beeld { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--bmc-ease), transform .9s var(--bmc-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.bmc.is-zichtbaar .bmc-in-beeld { opacity: 1; transform: none; }

/* ---------- Schermen ---------- */
@media (max-width: 1060px) {
	.bmc-kop { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.bmc-kop-r { padding-bottom: 0; }
	.bmc { --bmc-kaartbreedte: min(520px, 84vw); }
}

@media (max-width: 760px) {
	.bmc { padding-top: 60px; padding-bottom: 56px; --bmc-kaartbreedte: 86vw; --bmc-gap: 14px; }
	.bmc-bediening { margin-top: 28px; }
	.bmc-body { padding: 18px 18px 20px; }
	.bmc-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; padding-top: 16px; }
	.bmc-cijfer + .bmc-cijfer { padding-left: 10px; }
	.bmc-cijfer { padding-right: 8px; }
	.bmc-getal { font-size: 22px; }
	.bmc-cijfer dd { font-size: 11.5px; }
	.bmc-pijl { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.bmc-regel-in, .bmc-kaart, .bmc-in-beeld { transition: none; opacity: 1; transform: none; }
	.bmc-spoor { scroll-behavior: auto; }
}


/* ==========================================================================
   Variant "kaarten", opgepoetst: hoger beeld, nummer op de foto, groot
   eerste cijfer, ronde pijlknop, zachte magenta gloed achter de sectie
   ========================================================================== */
.bmc-v-kaarten::before {
	content: "";
	position: absolute;
	right: -10vw;
	top: -20%;
	width: 60vw;
	height: 90%;
	z-index: -1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--bmc-accent) 9%, transparent), transparent 70%);
	pointer-events: none;
}
.bmc-v-kaarten { --bmc-kaartbreedte: min(540px, 82vw); --bmc-gap: 24px; }
.bmc-v-kaarten .bmc-kaart-in {
	border-radius: 28px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 60px -40px rgba(10, 10, 11, .35), 0 2px 6px -2px rgba(10, 10, 11, .08);
}
.bmc-v-kaarten .bmc-kaart-in:hover {
	transform: translateY(-6px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 50px 80px -44px rgba(10, 10, 11, .45), 0 2px 6px -2px rgba(10, 10, 11, .08);
}
.bmc-v-kaarten .bmc-beeld { aspect-ratio: 4 / 3; margin: 8px 8px 0; border-radius: 22px; }
.bmc-v-kaarten .bmc-beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 11, .18), transparent 32%);
	pointer-events: none;
}
.bmc-v-kaarten .bmc-body { padding: 22px 26px 26px; }
.bmc-k-label { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--bmc-mute); margin-bottom: 12px; }
.bmc-k-label i { width: 6px; height: 6px; border-radius: 1.5px; background: var(--bmc-accent); transform: rotate(45deg); }
.bmc-v-kaarten .bmc-klant { flex-direction: column; align-items: flex-start; gap: 4px; }
.bmc.bmc.bmc-v-kaarten .bmc-naam { font-size: clamp(24px, 2vw, 30px); letter-spacing: -.035em; }
.bmc-v-kaarten .bmc-diensten { font-size: 14.5px; }

.bmc-cijfers-k {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 0 22px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--bmc-lijn);
	align-items: stretch;
}
.bmc-cijfers-k .bmc-cijfer-groot { padding: 0; border: 0; }
.bmc-cijfers-k .bmc-cijfer-groot .bmc-getal { font-size: clamp(44px, 3.6vw, 56px); letter-spacing: -.055em; color: var(--bmc-accent); }
.bmc-cijfers-k .bmc-cijfer-groot dd { margin-top: 8px; font-size: 13.5px; color: var(--bmc-zacht); }
.bmc-cijfers-rest { display: grid; gap: 10px; padding-left: 22px; border-left: 1px solid var(--bmc-lijn); align-content: center; }
.bmc-cijfers-rest .bmc-cijfer { padding: 0; border: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bmc-cijfers-rest .bmc-cijfer:first-child .bmc-getal, .bmc-cijfers-rest .bmc-getal { font-size: 22px; letter-spacing: -.035em; color: var(--bmc-fg); }
.bmc-cijfers-rest dd { margin: 0; font-size: 12.5px; }

.bmc-kaartlink-k {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: auto;
	margin-top: auto;
	padding-top: 24px;
	font-size: 14.5px;
}
.bmc-kaartlink .bmc-kl-knop, .bmc-kl-knop {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--bmc-knop-bg);
	color: var(--bmc-knop-fg);
	transition: background .3s, transform .4s var(--bmc-ease);
}
.bmc-kl-knop svg { width: 22px; height: 22px; stroke-width: 1.2; transition: transform .4s var(--bmc-ease); }
.bmc-v-kaarten .bmc-kaart-in:hover .bmc-kl-knop { background: var(--bmc-accent); }
.bmc-v-kaarten .bmc-kaart-in:hover .bmc-kl-knop svg { transform: translate(2px, -2px); }
.bmc-v-kaarten .bmc-kaartlink span.bmc-kl-tekst { width: auto; height: auto; color: var(--bmc-fg); transform: none; }

@media (max-width: 760px) {
	.bmc-v-kaarten .bmc-body { padding: 18px 20px 20px; }
	.bmc-cijfers-k { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
	.bmc-cijfers-rest { padding-left: 0; border-left: 0; grid-template-columns: 1fr 1fr; padding-top: 12px; border-top: 1px solid var(--bmc-lijn); }
	.bmc-cijfers-rest .bmc-cijfer { flex-direction: column; gap: 4px; }
	.bmc-cijfers-k .bmc-cijfer-groot .bmc-getal { font-size: 40px; }
}

/* ==========================================================================
   Videotestimonial: afspeelknop op de foto en een venster met de video
   ========================================================================== */
.bmc.bmc .bmc-video-knop {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2; /* boven het klikvlak van de kaart */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 16px 5px 5px;
	border-radius: 99px;
	background: rgba(10, 10, 11, .55);
	border: 1px solid rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	font: 400 14px/1 var(--bmc-kop);
	letter-spacing: -.01em;
	transition: background .3s, border-color .3s;
}
.bmc-video-speel {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bmc-accent);
	color: #fff;
	transition: transform .45s var(--bmc-ease);
}
.bmc-video-speel svg { width: 16px; height: 16px; margin-left: 2px; }
.bmc-video-tekst { display: inline-flex; align-items: baseline; gap: 8px; }
.bmc-video-tekst em { font-style: normal; color: rgba(255, 255, 255, .62); }
.bmc.bmc .bmc-video-knop:hover { background: rgba(10, 10, 11, .78); border-color: rgba(255, 255, 255, .28); }
.bmc-video-knop:hover .bmc-video-speel { transform: scale(1.08); }

.bmc-video {
	width: min(1120px, calc(100vw - 32px));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: #F4F1ED;
	overflow: visible;
}
html:has(.bmc-video[open]) { overflow: hidden; } /* pagina staat stil zolang de video open is */
.bmc-video::backdrop {
	background: rgba(10, 10, 11, .86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.bmc-video[open] { animation: bmcVideoIn .45s var(--bmc-ease); }
@keyframes bmcVideoIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.bmc-video-in { display: flex; flex-direction: column; gap: 14px; }
.bmc-video-scherm {
	position: relative;
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 140px);
	margin: 0 auto;
	width: 100%;
	border-radius: 18px;
	overflow: hidden;
	background: #131215;
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
}
/* Staand: het venster zo breed als de video, anders rekt een modaal venster
   over het hele scherm en schuiven titel en sluitknop naar de randen. */
.bmc-video.is-staand { width: fit-content; }
.bmc-video.is-staand .bmc-video-scherm { aspect-ratio: 9 / 16; height: auto; width: calc(min(78vh, 820px) * 9 / 16); max-width: calc(100vw - 32px); }
.bmc-video-scherm iframe, .bmc-video-scherm video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

/* Lege plek zolang de video er nog niet is (alleen op staging) */
.bmc-video-leeg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; }
.bmc-video-leeg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.bmc-video-leeg p { position: relative; max-width: 420px; font: 400 clamp(18px, 2vw, 22px)/1.35 var(--bmc-kop); letter-spacing: -.02em; color: #fff; }
.bmc-video-leeg small { display: block; margin-top: 10px; font: 400 14px/1.5 var(--bmc-body); color: rgba(244, 241, 237, .7); }

.bmc-video-onder { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bmc-video-onder p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.bmc-video-titel { font: 400 18px/1.2 var(--bmc-kop); letter-spacing: -.02em; color: #fff; }
.bmc-video-wie { font-size: 14px; color: rgba(244, 241, 237, .62); }
.bmc.bmc .bmc-video-sluit {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
	transition: background .3s, transform .45s var(--bmc-ease);
}
.bmc-video-sluit svg { width: 18px; height: 18px; }
.bmc.bmc .bmc-video-sluit:hover { background: var(--bmc-accent); border-color: var(--bmc-accent); transform: rotate(90deg); }

@media (max-width: 760px) {
	.bmc.bmc .bmc-video-knop { left: 10px; bottom: 10px; padding-right: 13px; font-size: 13px; }
	.bmc-video-speel { width: 32px; height: 32px; }
	.bmc-video-scherm { border-radius: 12px; }
	.bmc-video.is-staand .bmc-video-scherm { width: calc(min(72vh, 680px) * 9 / 16); }
}
@media (prefers-reduced-motion: reduce) {
	.bmc-video[open] { animation: none; }
}

/* PP Frama heeft een smalle woordspatie; iets ruimer leest beter. */
.bmc { word-spacing: .06em; }