/* ==========================================================================
   BM Over ons, variant "team"
   Links kop, korte tekst en knoppen; rechts een foto van het kantoor met
   een kaartje met de Google-score. Daaronder over de volle breedte een balk
   met drie cijfers.
   Alles begint met bmw-.
   ========================================================================== */

.bmw {
	--bmw-accent: #E0195F;
	--bmw-wrap: 1400px;

	--bmw-bg: #F4F1ED;
	--bmw-fg: #0A0A0B;
	--bmw-zacht: rgba(10, 10, 11, .74);
	--bmw-mute: rgba(10, 10, 11, .56);
	--bmw-lijn: rgba(10, 10, 11, .12);
	--bmw-knop-bg: #0A0A0B;
	--bmw-kop: 'BM Frama', 'PP Frama', 'Helvetica Neue', Arial, sans-serif;
	--bmw-body: 'BM Frama Text', 'PP Frama Text', 'Helvetica Neue', Arial, sans-serif;
	--bmw-gutter: max(24px, (100% - var(--bmw-wrap)) / 2);
	--bmw-ease: cubic-bezier(.2, .8, .2, 1);

	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--bmw-bg);
	color: var(--bmw-fg);
	font-family: var(--bmw-body);
	font-size: 16px;
	line-height: 1.5;
	word-spacing: .06em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

.bmw-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(48px, 7vw, 130px);
	align-items: center;
	padding: clamp(88px, 12vh, 160px) var(--bmw-gutter);
}

/* ---------- Tekst ---------- */
.bmw-label { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--bmw-zacht); }
.bmw-label i { width: 7px; height: 7px; border-radius: 2px; background: var(--bmw-accent); transform: rotate(45deg); }

.bmw.bmw .bmw-titel {
	margin-top: 22px;
	font: 700 clamp(44px, 5.4vw, 88px)/.95 var(--bmw-kop);
	letter-spacing: -.045em;
	text-wrap: balance;
}

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

.bmw-body { max-width: 520px; margin-top: 30px; }
.bmw-body p { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; color: var(--bmw-mute); text-wrap: pretty; }
.bmw-body p + p { margin-top: 14px; }

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

.bmw.bmw .bmw-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(--bmw-knop-bg);
	font: 600 15.5px/1 var(--bmw-kop);
	letter-spacing: -.01em;
	color: #fff;
	white-space: nowrap;
	transition: transform .25s var(--bmw-ease);
}
.bmw.bmw .bmw-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(--bmw-accent);
	transform: scale(0);
	transition: transform .6s var(--bmw-ease);
}
.bmw.bmw .bmw-btn:hover::after { transform: scale(26); }
.bmw.bmw .bmw-btn:active { transform: scale(.985); }
.bmw-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bmw-accent); color: #fff; transition: background .4s, color .4s; }
.bmw-dot svg { width: 17px; height: 17px; stroke-width: 2.4; transition: transform .45s var(--bmw-ease); }
.bmw-btn:hover .bmw-dot { background: #fff; color: var(--bmw-accent); }
.bmw-btn:hover .bmw-dot svg { transform: translateX(2px); }

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

/* ---------- Cijferbalk over de volle breedte ---------- */
.bmw-cijfers {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(8px, 2vw, 32px);
	border-top: 1px solid var(--bmw-lijn);
}
.bmw-cijfer { padding: clamp(28px, 3vw, 40px) clamp(20px, 3vw, 48px) 0; border-left: 1px solid var(--bmw-lijn); }
.bmw-cijfer:first-child { padding-left: 0; border-left: 0; }
.bmw-cijfer dt { display: flex; align-items: baseline; font: 700 clamp(56px, 6vw, 96px)/.9 var(--bmw-kop); letter-spacing: -.055em; }
.bmw-achter { margin-left: .04em; font-size: .6em; color: var(--bmw-accent); }
.bmw-cijfer dd { margin-top: 14px; font-size: 15px; line-height: 1.4; color: var(--bmw-mute); }

/* ---------- Foto ---------- */
.bmw-beeld { position: relative; }

.bmw-foto {
	overflow: hidden;
	aspect-ratio: 5 / 6;
	border-radius: 28px;
	background: #E9E5DF;
	box-shadow: 0 50px 100px -60px rgba(10, 10, 11, .55);
}
.bmw-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--bmw-ease); }
.bmw.is-zichtbaar .bmw-foto img { transform: none; }

.bmw-score {
	position: absolute;
	top: clamp(24px, 3vw, 40px);
	right: clamp(-28px, -1.6vw, -12px);
	display: grid;
	gap: 6px;
	padding: 16px 20px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 30px 60px -30px rgba(10, 10, 11, .45);
}
.bmw-sterren { display: inline-flex; gap: 2px; color: var(--bmw-accent); }
.bmw-sterren svg { width: 14px; height: 14px; }
.bmw-score p { font-size: 14px; color: var(--bmw-mute); white-space: nowrap; }
.bmw-score b { font: 700 24px/1 var(--bmw-kop); letter-spacing: -.03em; color: var(--bmw-fg); }

/* Binnenkomen: foto en kaartje schuiven zacht omhoog */
.bmw-foto, .bmw-score { opacity: 0; translate: 0 24px; transition: opacity 1s var(--bmw-ease), translate 1s var(--bmw-ease); }
.bmw-score { transition-delay: .45s; }
.bmw.is-zichtbaar .bmw-foto, .bmw.is-zichtbaar .bmw-score { opacity: 1; translate: none; }

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

/* ---------- Schermen ---------- */
@media (max-width: 1060px) {
	.bmw-in { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.bmw-beeld { max-width: 620px; }
	.bmw-foto { aspect-ratio: 4 / 3; }
	.bmw-score { right: 16px; }
	.bmw-cijfers { margin-top: 0; }
}

@media (max-width: 640px) {
	.bmw-in { padding-top: 80px; padding-bottom: 80px; }
	.bmw-cijfer { padding: 22px 12px 0; }
	.bmw-cijfer dt { font-size: 40px; }
	.bmw-cijfer dd { margin-top: 10px; font-size: 13px; }
	.bmw-foto { aspect-ratio: 4 / 5; border-radius: 22px; }
	.bmw-score { top: 16px; right: 12px; padding: 12px 14px; border-radius: 14px; }
	.bmw-score b { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.bmw-in-beeld, .bmw-regel-in { opacity: 1; transform: none; animation: none !important; }
	.bmw-foto, .bmw-score { opacity: 1; translate: none; transition: none; }
	.bmw-foto img { transform: none; transition: none; }
}