/* ==========================================================================
   BM Reviews
   Donkere sectie: links plakkend de kop en de Google-score, rechts een muur
   van reviewkaarten in twee kolommen. Alles begint met bmr-.
   ========================================================================== */

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

	--bmr-accent-licht: color-mix(in srgb, var(--bmr-accent) 72%, #fff);
	--bmr-accent-diep: color-mix(in srgb, var(--bmr-accent) 55%, #000);
	--bmr-vlak: #131215;
	--bmr-vlak-2: #1B191E;
	--bmr-tekst: #F4F1ED;
	--bmr-zacht: rgba(244, 241, 237, .78);
	--bmr-mute: rgba(244, 241, 237, .52);
	--bmr-lijn: rgba(255, 255, 255, .08);
	--bmr-lijn-2: rgba(255, 255, 255, .14);
	--bmr-kop: 'BM Frama', 'PP Frama', 'Helvetica Neue', Arial, sans-serif;
	--bmr-body: 'BM Frama Text', 'PP Frama Text', 'Helvetica Neue', Arial, sans-serif;
	--bmr-gutter: max(24px, (100% - var(--bmr-wrap)) / 2);
	--bmr-ease: cubic-bezier(.2, .8, .2, 1);

	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--bmr-ink);
	color: var(--bmr-tekst);
	font-family: var(--bmr-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

.bmr.bmr button {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	text-align: left;
}

.bmr.bmr button:hover, .bmr.bmr button:focus, .bmr.bmr button:active { color: inherit; text-decoration: none; }

.bmr-gloed {
	position: absolute;
	right: -22%;
	top: -45%;
	width: min(1100px, 90vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--bmr-accent) 22%, transparent), transparent 70%);
	pointer-events: none;
	z-index: -1;
}

.bmr-in {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: 48px clamp(40px, 6vw, 110px);
	align-items: start;
	padding: clamp(80px, 11vh, 150px) var(--bmr-gutter);
}

.bmr-zonder-muur .bmr-in { grid-template-columns: minmax(0, 1fr); }

/* ---------- Links: kop en score ---------- */
.bmr-zij { min-width: 0; align-self: stretch; container-type: inline-size; }
.bmr-zij-in { position: sticky; top: 120px; }
.bmr-zonder-muur .bmr-zij-in { position: static; max-width: 640px; }

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

.bmr.bmr .bmr-titel {
	margin-top: 22px;
	font-family: var(--bmr-kop);
	font-weight: 700;
	font-size: clamp(40px, 11.5cqi, 76px);
	line-height: .95;
	letter-spacing: -.045em;
	color: #fff;
	text-wrap: balance;
}

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

.bmr-intro { max-width: 440px; margin-top: 24px; font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.6; color: var(--bmr-mute); text-wrap: pretty; }

.bmr-score {
	display: flex;
	align-items: flex-end;
	gap: 22px;
	margin-top: clamp(32px, 5vh, 48px);
	padding-top: clamp(28px, 4vh, 36px);
	border-top: 1px solid var(--bmr-lijn);
}

.bmr.bmr .bmr-getal {
	font: 700 clamp(84px, 7.6vw, 128px)/.78 var(--bmr-kop);
	letter-spacing: -.06em;
	color: #fff;
}

.bmr-score-tx { display: flex; flex-direction: column; gap: 10px; padding-bottom: 2px; }
.bmr-score-tx > span:last-child { max-width: 220px; font-size: 14.5px; line-height: 1.45; color: var(--bmr-mute); }
.bmr-score .bmr-sterren svg { width: 20px; height: 20px; }

/* Sterren: een grijze rij, met daarover een gevulde rij die naar verhouding wordt afgesneden */
.bmr-sterren { position: relative; display: inline-flex; width: max-content; color: rgba(255, 255, 255, .16); }
.bmr-sterren-rij { display: flex; gap: 3px; }
.bmr-sterren-vol { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; color: var(--bmr-accent); }
.bmr-sterren svg { width: 14px; height: 14px; }

.bmr-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 4vh, 40px); }

.bmr.bmr .bmr-btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 18px;
	height: 56px;
	padding: 0 6px 0 24px;
	border-radius: 99px;
	background: var(--bmr-tekst);
	font: 600 15px/1 var(--bmr-kop);
	letter-spacing: -.01em;
	color: var(--bmr-ink);
	white-space: nowrap;
	transition: color .4s;
}

.bmr.bmr .bmr-btn::after { content: ""; position: absolute; z-index: -1; right: 27px; top: 50%; width: 20px; height: 20px; margin: -10px -10px 0 0; border-radius: 50%; background: var(--bmr-accent); transform: scale(0); transition: transform .6s var(--bmr-ease); }
.bmr.bmr .bmr-btn:hover::after { transform: scale(22); }
.bmr.bmr .bmr-btn:hover { color: #fff; }
.bmr-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bmr-ink); color: #fff; transition: background .4s; }
.bmr-dot svg { width: 16px; height: 16px; stroke-width: 2.4; transition: transform .45s var(--bmr-ease); }
.bmr-btn:hover .bmr-dot { background: var(--bmr-accent-diep); }
.bmr-btn:hover .bmr-dot svg { transform: translateX(2px); }

.bmr-tekstlink { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font: 600 15px/1 var(--bmr-kop); letter-spacing: -.01em; color: #fff; }
.bmr-tekstlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .3; transition: opacity .3s; }
.bmr-tekstlink:hover::after { opacity: 1; animation: bmrStreep .6s var(--bmr-ease); }
@keyframes bmrStreep { 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; } }
.bmr-tekstlink span { width: 15px; height: 15px; color: var(--bmr-accent-licht); transition: transform .4s var(--bmr-ease); }
.bmr-tekstlink span svg { width: 100%; height: 100%; stroke-width: 2.4; }
.bmr-tekstlink:hover span { transform: rotate(45deg); }

/* ---------- Rechts: de muur ---------- */
.bmr-muur-wrap { min-width: 0; }

.bmr-muur { columns: 2; column-gap: 14px; }

.bmr-review {
	display: block;
	break-inside: avoid;
	margin-bottom: 14px;
	opacity: 0;
	transform: translateY(16px);
}

.bmr-review[hidden] { display: none; }
.bmr.is-zichtbaar .bmr-review { animation: bmrIn .8s var(--bmr-ease) forwards; animation-delay: calc(var(--i, 0) * 70ms + 300ms); }
.bmr.is-zichtbaar .bmr-review.is-later { animation-delay: calc(var(--i, 0) * 60ms); }

.bmr-review figure {
	position: relative;
	padding: 24px 24px 22px;
	border-radius: 22px;
	background: var(--bmr-vlak);
	border: 1px solid var(--bmr-lijn);
	transition: border-color .3s;
}

.bmr-review figure:hover { border-color: var(--bmr-lijn-2); }

.bmr-review-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.bmr-bron { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--bmr-kop); color: var(--bmr-mute); }

/* Alleen zichtbaar in de editor en het voorbeeld: deze review is nog niet echt. */
.bmr-voorbeeld { padding: 5px 8px; border-radius: 7px; border: 1px dashed rgba(255, 255, 255, .32); font-size: 11.5px; color: var(--bmr-zacht); }

.bmr.bmr .bmr-quote {
	margin-top: 18px;
	border: 0;
	font: 500 17.5px/1.5 var(--bmr-kop);
	letter-spacing: -.012em;
	color: rgba(244, 241, 237, .9);
	text-wrap: pretty;
	quotes: none;
}

.bmr.bmr .bmr-quote::before, .bmr.bmr .bmr-quote::after { content: none; }
.bmr-quote p { font: inherit; color: inherit; }

.bmr-wie {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--bmr-lijn);
}

.bmr-av {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--bmr-vlak-2);
	border: 1px solid var(--bmr-lijn-2);
	font: 600 13px/1 var(--bmr-kop);
	letter-spacing: -.01em;
	color: #fff;
}

.bmr-av img { width: 100%; height: 100%; object-fit: cover; }

.bmr-wie-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bmr-wie-tx b { font: 600 15px/1.2 var(--bmr-kop); letter-spacing: -.01em; color: #fff; }
.bmr-wie-tx small { font-size: 13px; line-height: 1.35; color: var(--bmr-mute); }

/* Uitgelicht: magenta kaart, grotere quote */
.bmr-review.is-uitgelicht figure {
	padding: 28px 28px 24px;
	background:
		radial-gradient(100% 80% at 100% 0%, var(--bmr-accent-licht), transparent 55%),
		linear-gradient(160deg, var(--bmr-accent), var(--bmr-accent-diep));
	border-color: transparent;
}

.bmr-review.is-uitgelicht .bmr-sterren { color: rgba(255, 255, 255, .3); }
.bmr-review.is-uitgelicht .bmr-sterren-vol { color: #fff; }
.bmr-review.is-uitgelicht .bmr-bron { color: rgba(255, 255, 255, .8); }
.bmr-review.is-uitgelicht .bmr-voorbeeld { border-color: rgba(255, 255, 255, .5); color: #fff; }
.bmr.bmr .bmr-review.is-uitgelicht .bmr-quote { margin-top: 22px; font-size: clamp(20px, 1.5vw, 23px); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; color: #fff; }
.bmr-review.is-uitgelicht .bmr-wie { margin-top: 28px; border-top-color: rgba(255, 255, 255, .24); }
.bmr-review.is-uitgelicht .bmr-av { background: rgba(10, 10, 11, .22); border-color: rgba(255, 255, 255, .3); }
.bmr-review.is-uitgelicht .bmr-wie-tx small { color: rgba(255, 255, 255, .8); }

/* Toon meer */
.bmr.bmr .bmr-meer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 56px;
	margin-top: 4px;
	border-radius: 99px;
	border: 1px solid var(--bmr-lijn-2);
	font: 600 15px/1 var(--bmr-kop);
	letter-spacing: -.01em;
	color: #fff;
	transition: background .3s, border-color .3s;
}

.bmr.bmr .bmr-meer:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .26); }
.bmr-meer em { font-style: normal; font-weight: 500; color: var(--bmr-mute); font-variant-numeric: tabular-nums; }
.bmr-meer svg { width: 16px; height: 16px; stroke-width: 2.2; color: var(--bmr-accent-licht); transition: transform .4s var(--bmr-ease); }
.bmr-meer:hover svg { transform: translateY(2px); }
.bmr.bmr .bmr-meer[hidden] { display: none; }

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

/* ---------- Kleinere schermen ---------- */
@media (max-width: 1240px) {
	.bmr-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
	.bmr.bmr .bmr-quote { font-size: 16.5px; }
}

@media (max-width: 1060px) {
	.bmr-in { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 72px; padding-bottom: 72px; }
	.bmr-zij-in { position: static; }
	.bmr.bmr .bmr-titel { font-size: clamp(40px, 8.4cqi, 72px); }
	.bmr-intro { max-width: 560px; }
}

@media (max-width: 640px) {
	.bmr-in { padding: 56px 16px 64px; gap: 36px; }
	.bmr.bmr .bmr-titel { font-size: clamp(36px, 11.5cqi, 56px); }
	.bmr-score { gap: 16px; }
	.bmr.bmr .bmr-getal { font-size: 84px; }
	.bmr-ctas { flex-direction: column; align-items: stretch; }
	.bmr.bmr .bmr-btn { justify-content: space-between; }
	.bmr-ctas .bmr-tekstlink { align-self: flex-start; }
	.bmr-muur { columns: 1; }
	.bmr-review { margin-bottom: 10px; }
	.bmr-review figure { padding: 22px 20px 20px; }
	.bmr-review.is-uitgelicht figure { padding: 24px 22px 22px; }
	.bmr.bmr .bmr-quote { font-size: 16.5px; }
	.bmr.bmr .bmr-review.is-uitgelicht .bmr-quote { font-size: 21px; }
}

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

.elementor-editor-active .bmr-in-beeld,
.elementor-editor-active .bmr-review,
.elementor-editor-active .bmr-regel-in { opacity: 1; transform: none; animation: none; }

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