/* ==========================================================================
   BM Over ons
   Links een statement met tekst, cijfers en knoppen; rechts twee
   fotokolommen die bij het scrollen zacht tegen elkaar in bewegen.
   Alles begint met bmo-.
   ========================================================================== */

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

	/* Licht (standaard) */
	--bmo-bg: #F4F1ED;
	--bmo-fg: #0A0A0B;
	--bmo-zacht: rgba(10, 10, 11, .74);
	--bmo-mute: rgba(10, 10, 11, .56);
	--bmo-lijn: rgba(10, 10, 11, .1);
	--bmo-lijn-2: rgba(10, 10, 11, .16);
	--bmo-vlak: #E9E5DF;
	--bmo-hatch: rgba(10, 10, 11, .045);
	--bmo-knop-bg: #0A0A0B;
	--bmo-knop-fg: #fff;
	--bmo-accent-licht: color-mix(in srgb, var(--bmo-accent) 72%, #fff);
	--bmo-kop: 'BM Frama', 'PP Frama', 'Helvetica Neue', Arial, sans-serif;
	--bmo-body: 'BM Frama Text', 'PP Frama Text', 'Helvetica Neue', Arial, sans-serif;
	--bmo-gutter: max(24px, (100% - var(--bmo-wrap)) / 2);
	--bmo-ease: cubic-bezier(.2, .8, .2, 1);

	position: relative;
	isolation: isolate;
	/* clip in plaats van hidden: hidden maakt de sectie een scrollcontainer
	   en dan blijft de tekstkolom niet plakken bij het scrollen. */
	overflow: clip;
	background: var(--bmo-bg);
	color: var(--bmo-fg);
	font-family: var(--bmo-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Donker */
.bmo-donker {
	--bmo-bg: var(--bmo-ink);
	--bmo-fg: #F4F1ED;
	--bmo-zacht: rgba(244, 241, 237, .78);
	--bmo-mute: rgba(244, 241, 237, .52);
	--bmo-lijn: rgba(255, 255, 255, .08);
	--bmo-lijn-2: rgba(255, 255, 255, .14);
	--bmo-vlak: #131215;
	--bmo-hatch: rgba(255, 255, 255, .025);
	--bmo-knop-bg: rgba(255, 255, 255, .06);
	--bmo-knop-fg: #fff;
}

.bmo-lijn-boven { border-top: 1px solid var(--bmo-lijn); }

.bmo *, .bmo *::before, .bmo *::after { box-sizing: border-box; }
.bmo :where(h2, h3, p, dl, dt, dd, figure) { margin: 0; padding: 0; }
.bmo.bmo h2, .bmo.bmo h3 { color: inherit; }
.bmo.bmo a { color: inherit; text-decoration: none; }
.bmo img { max-width: 100%; display: block; }
.bmo svg { display: block; flex: none; }
.bmo :focus-visible { outline: 2px solid var(--bmo-accent-licht); outline-offset: 3px; }


.bmo-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(48px, 7vw, 140px);
	padding: clamp(80px, 11vh, 150px) var(--bmo-gutter);
}

/* ---------- Tekst ---------- */
.bmo-tekst {
	position: sticky;
	top: 110px;
	align-self: start;
	min-width: 0;
	container-type: inline-size;
}

.bmo-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--bmo-zacht);
}

.bmo-label i { width: 7px; height: 7px; border-radius: 2px; background: var(--bmo-accent); transform: rotate(45deg); }

.bmo.bmo .bmo-titel {
	margin-top: 22px;
	font-family: var(--bmo-kop);
	font-weight: 700;
	font-size: clamp(40px, 9.2cqi, 76px);
	line-height: .96;
	letter-spacing: -.045em;
	color: var(--bmo-fg);
	text-wrap: balance;
}

.bmo-regel { display: block; overflow: hidden; padding: .04em .1em .1em 0; margin-bottom: -.1em; }
.bmo-regel-in { display: inline-block; transform: translateY(110%); }
.bmo.is-zichtbaar .bmo-regel-in { animation: bmoRegel 1s var(--bmo-ease) forwards; animation-delay: calc(var(--d, 0) * 100ms); }
@keyframes bmoRegel { to { transform: none; } }
.bmo-accent { color: var(--bmo-accent); }

.bmo-body { max-width: 520px; margin-top: 28px; }
.bmo-body p { font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.65; color: var(--bmo-mute); text-wrap: pretty; }
.bmo-body p + p { margin-top: 14px; }
.bmo-body strong { color: var(--bmo-fg); font-weight: 500; }
.bmo-body a { color: var(--bmo-fg); border-bottom: 1px solid var(--bmo-lijn-2); }

/* Cijfers */
.bmo-cijfers {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: 0;
	margin-top: 36px;
	border-top: 1px solid var(--bmo-lijn);
	border-bottom: 1px solid var(--bmo-lijn);
}

.bmo-cijfer { padding: 22px 32px 22px 0; margin-right: 32px; border-right: 1px solid var(--bmo-lijn); }
.bmo-cijfer:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.bmo-cijfer dt {
	display: flex;
	align-items: baseline;
	font: 600 clamp(34px, 3.2vw, 46px)/1 var(--bmo-kop);
	letter-spacing: -.04em;
	color: var(--bmo-fg);
}

.bmo-achter { margin-left: 2px; font-size: .62em; color: var(--bmo-accent); }
.bmo-cijfer dd { margin-top: 8px; font-size: 13.5px; line-height: 1.35; color: var(--bmo-mute); max-width: 150px; }

/* Knoppen */
.bmo-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }

.bmo.bmo .bmo-btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	height: 56px;
	padding: 0 6px 0 24px;
	border-radius: 99px;
	background: var(--bmo-knop-bg);
	border: 1px solid transparent;
	font: 600 15.5px/1 var(--bmo-kop);
	letter-spacing: -.01em;
	color: var(--bmo-knop-fg);
	white-space: nowrap;
	transition: color .4s, border-color .3s, transform .25s var(--bmo-ease);
}

.bmo-donker .bmo-btn { border-color: var(--bmo-lijn-2); }

.bmo.bmo .bmo-btn::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 28px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px -10px 0 0;
	border-radius: 50%;
	background: var(--bmo-accent);
	transform: scale(0);
	transition: transform .6s var(--bmo-ease);
}

.bmo.bmo .bmo-btn:hover { color: #fff; border-color: transparent; }
.bmo.bmo .bmo-btn:hover::after { transform: scale(26); }
.bmo.bmo .bmo-btn:active { transform: scale(.985); }

.bmo-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bmo-accent); color: #fff; transition: background .4s, color .4s; }
.bmo-dot svg { width: 17px; height: 17px; stroke-width: 2.4; transition: transform .45s var(--bmo-ease); }
.bmo-btn:hover .bmo-dot { background: #fff; color: var(--bmo-accent); }
.bmo-btn:hover .bmo-dot svg { transform: translateX(2px); }

.bmo-tekstlink { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font: 600 15.5px/1 var(--bmo-kop); letter-spacing: -.01em; color: var(--bmo-fg); }
.bmo-tekstlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .3; transition: opacity .3s; }
.bmo-tekstlink:hover::after { opacity: 1; animation: bmoStreep .6s var(--bmo-ease); }
@keyframes bmoStreep { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; } 51% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.bmo-tekstlink span { width: 15px; height: 15px; color: var(--bmo-accent); transition: transform .4s var(--bmo-ease); }
.bmo-tekstlink span svg { width: 100%; height: 100%; stroke-width: 2.4; }
.bmo-tekstlink:hover span { transform: rotate(45deg); }

/* Binnenkomen zodra de sectie in beeld is */
.bmo-in-beeld { opacity: 0; transform: translateY(14px); }
.bmo.is-zichtbaar .bmo-in-beeld { animation: bmoIn .9s var(--bmo-ease) forwards; animation-delay: calc(var(--d, 0) * 110ms + 120ms); }
@keyframes bmoIn { to { opacity: 1; transform: none; } }

/* ---------- Foto's ---------- */
.bmo-fotos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
	min-width: 0;
}

.bmo-kolom { display: grid; gap: 20px; will-change: transform; }
.bmo-kolom[data-richting="1"] { padding-top: 96px; }

.bmo-foto {
	opacity: 0;
	transform: translateY(24px);
}

.bmo.is-zichtbaar .bmo-foto { animation: bmoIn 1s var(--bmo-ease) forwards; }
.bmo.is-zichtbaar .bmo-kolom[data-richting="-1"] .bmo-foto:nth-child(1) { animation-delay: .2s; }
.bmo.is-zichtbaar .bmo-kolom[data-richting="-1"] .bmo-foto:nth-child(2) { animation-delay: .4s; }
.bmo.is-zichtbaar .bmo-kolom[data-richting="-1"] .bmo-foto:nth-child(3) { animation-delay: .6s; }
.bmo.is-zichtbaar .bmo-kolom[data-richting="1"] .bmo-foto:nth-child(1) { animation-delay: .3s; }
.bmo.is-zichtbaar .bmo-kolom[data-richting="1"] .bmo-foto:nth-child(2) { animation-delay: .5s; }
.bmo.is-zichtbaar .bmo-kolom[data-richting="1"] .bmo-foto:nth-child(3) { animation-delay: .7s; }

.bmo-kader {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background: var(--bmo-vlak);
	border: 1px solid var(--bmo-lijn);
	aspect-ratio: 4 / 5;
	box-shadow: 0 30px 60px -40px rgba(10, 10, 11, .35);
}

.bmo-donker .bmo-kader { box-shadow: none; }

.bmo-v-1-1 .bmo-kader { aspect-ratio: 1 / 1; }
.bmo-v-3-4 .bmo-kader { aspect-ratio: 3 / 4; }
.bmo-v-5-4 .bmo-kader { aspect-ratio: 5 / 4; }

.bmo-kader img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.2s var(--bmo-ease), filter .6s;
}

.bmo-foto:hover .bmo-kader img { transform: scale(1.06); }

/* Placeholder: donker vlak met fijn raster en de verhouding */
.bmo-leeg {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--bmo-accent) 7%, transparent), transparent 60%),
		repeating-linear-gradient(135deg, var(--bmo-hatch) 0 1px, transparent 1px 14px),
		var(--bmo-vlak);
}

.bmo-leeg::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px dashed var(--bmo-lijn-2);
	border-radius: 12px;
}

.bmo-leeg-tekst { font: 500 13px/1 var(--bmo-kop); letter-spacing: -.01em; color: var(--bmo-mute); font-variant-numeric: tabular-nums; }

.bmo-foto figcaption { margin-top: 10px; font-size: 13px; color: var(--bmo-mute); }

/* ---------- Projectmarquee ---------- */
.bmo-met-marquee .bmo-in { align-items: center; }
.bmo-met-marquee .bmo-tekst { position: static; }

/* Buitenste kader: zachte randen rondom, zodat de gekantelde tegels
   vervagen in plaats van hard afgesneden worden. */
.bmo-marq-wrap {
	position: relative;
	height: min(720px, 82vh);
	min-height: 520px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-composite: intersect;
	opacity: 0;
}

.bmo.is-zichtbaar .bmo-marq-wrap { animation: bmoIn 1s var(--bmo-ease) .2s forwards; }

/* Het geheel staat licht gekanteld; iets vergroot zodat de hoeken gevuld blijven. */
.bmo-marq {
	--bmo-schuin: 9px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	height: 100%;
	transform: rotate(var(--bmo-hoek, -7deg)) scale(1.16);
	transform-origin: 50% 50%;
}

.bmo-marq-kolom {
	display: flex;
	flex-direction: column;
	gap: 16px;
	animation: bmoMarq var(--bmo-duur, 48s) linear infinite;
	will-change: transform;
}

.bmo-marq-kolom[data-richting="1"] { animation-direction: reverse; animation-delay: calc(var(--bmo-duur, 48s) * -.37); }
.bmo-marq:hover .bmo-marq-kolom { animation-play-state: paused; }

/* Twee identieke rijen onder elkaar; een halve ronde is precies een rij plus de tussenruimte. */
@keyframes bmoMarq { to { transform: translateY(calc(-50% - 8px)); } }

.bmo-marq-rij { display: flex; flex-direction: column; gap: 16px; flex: none; }

.bmo-proj {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--bmo-vlak);
	aspect-ratio: 4 / 5;
	clip-path: polygon(
		var(--bmo-schuin) 0, calc(100% - var(--bmo-schuin)) 0,
		100% var(--bmo-schuin), 100% calc(100% - var(--bmo-schuin)),
		calc(100% - var(--bmo-schuin)) 100%, var(--bmo-schuin) 100%,
		0 calc(100% - var(--bmo-schuin)), 0 var(--bmo-schuin)
	);
}

.bmo-proj.bmo-v-1-1 { aspect-ratio: 1 / 1; }
.bmo-proj.bmo-v-3-4 { aspect-ratio: 3 / 4; }
.bmo-proj.bmo-v-5-4 { aspect-ratio: 5 / 4; }

.bmo-proj > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.2s var(--bmo-ease); }
a.bmo-proj:hover > img { transform: scale(1.04); }

.bmo-proj-naam {
	position: absolute;
	left: 16px;
	bottom: 16px;
	max-width: calc(100% - 32px);
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(10, 10, 11, .72);
	color: #fff;
	font: 500 12.5px/1.2 var(--bmo-kop);
	letter-spacing: -.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Placeholder die op een website lijkt */
.bmo-leeg.is-site { place-items: center; }
.bmo-leeg.is-site::before { display: none; }
.bmo-site-balk {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 12px;
	background: rgba(10, 10, 11, .06);
	border-bottom: 1px solid var(--bmo-lijn);
}
.bmo-donker .bmo-site-balk { background: rgba(255, 255, 255, .04); }
.bmo-site-balk i { width: 7px; height: 7px; border-radius: 50%; background: var(--bmo-lijn-2); }
.bmo-site-balk em { flex: 1; height: 12px; margin-left: 8px; border-radius: 6px; background: var(--bmo-lijn); }

/* ---------- Kleinere schermen ---------- */
@media (max-width: 1060px) {
	.bmo-in { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 72px; padding-bottom: 72px; }
	.bmo-marq-wrap { height: 560px; min-height: 0; max-width: 640px; width: 100%; justify-self: center; }
	.bmo-tekst { position: static; }
	.bmo.bmo .bmo-titel { font-size: clamp(40px, 8.4cqi, 72px); }
	.bmo-body { max-width: 600px; }
	.bmo-kolom[data-richting="1"] { padding-top: 56px; }
}

@media (max-width: 640px) {
	.bmo-in { padding: 56px 16px 64px; gap: 44px; }
	.bmo.bmo .bmo-titel { font-size: clamp(36px, 11.5cqi, 52px); }
	.bmo-cijfers { grid-template-columns: 1fr 1fr 1fr; justify-content: stretch; }
	.bmo-cijfer { padding: 16px 12px 16px 0; margin-right: 12px; }
	.bmo-cijfer dt { font-size: 28px; }
	.bmo-cijfer dd { font-size: 12.5px; }
	.bmo-ctas { flex-direction: column; align-items: stretch; }
	.bmo.bmo .bmo-ctas .bmo-btn { justify-content: space-between; }
	.bmo-tekstlink { align-self: center; }

	/* Marquee op mobiel: een rij die horizontaal loopt */
	.bmo-marq-wrap { height: auto; min-height: 0; max-width: none; margin: 0 -16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-over; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-composite: add; }
	.bmo-marq { display: flex; height: auto; gap: 0; transform: none; }
	.bmo-marq-kolom { flex-direction: row; gap: 12px; animation-name: bmoMarqX; }
	.bmo-marq-kolom[data-richting="1"] { display: none; }
	.bmo-marq-rij { flex-direction: row; gap: 12px; padding-right: 12px; }
	.bmo-proj { width: 62vw; max-width: 280px; flex: none; }
	.bmo-proj.bmo-v-3-4, .bmo-proj.bmo-v-1-1, .bmo-proj.bmo-v-5-4 { aspect-ratio: 4 / 5; }

	/* Op mobiel: een horizontale strook die je veegt */
	.bmo-fotos { display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.bmo-fotos::-webkit-scrollbar { display: none; }
	.bmo-kolom { display: contents; }
	.bmo-foto { flex: none; width: 74vw; max-width: 340px; scroll-snap-align: start; transform: none !important; }
	.bmo-kader { aspect-ratio: 4 / 5 !important; border-radius: 16px; }
}

@keyframes bmoMarqX { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
	.bmo-marq-kolom { animation: none !important; }
	.bmo *, .bmo *::before, .bmo *::after {
		animation-duration: .01ms !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
	}
	.bmo-in-beeld, .bmo-foto, .bmo-regel-in, .bmo-marq-wrap { opacity: 1; transform: none; }
	.bmo-kolom { transform: none !important; }
}

.elementor-editor-active .bmo-in-beeld,
.elementor-editor-active .bmo-marq-wrap,
.elementor-editor-active .bmo-foto,
.elementor-editor-active .bmo-regel-in { opacity: 1; transform: none; animation: none; }

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