/* ==========================================================================
   BM Footer, variant "statement"
   Donkere footer met magentagloed (mesh), lopende regel met de diensten,
   grote kop met mailadres, strook met merk, kolommen en contact, onderregel
   en een magenta woordmerk dat onder de rand wegvalt.
   Overgenomen uit branding-masters-sectie-footer (3).html (26 oktober), met
   PP Frama. Alles begint met bmf-.
   ========================================================================== */

.bmf {
	--bmf-accent: #E0195F;
	--bmf-ink: #0A0A0B;
	--bmf-wrap: 1400px;
	--bmf-tekst: #F4F1ED;
	--bmf-zacht: rgba(244, 241, 237, .7);
	--bmf-mute: rgba(244, 241, 237, .46);
	--bmf-lijn: rgba(255, 255, 255, .09);
	--bmf-vlak: rgba(255, 255, 255, .05);
	--bmf-accent-licht: color-mix(in srgb, var(--bmf-accent) 72%, #fff);
	--bmf-kop: 'BM Frama', 'PP Frama', 'Helvetica Neue', Arial, sans-serif;
	--bmf-body: 'BM Frama Text', 'PP Frama Text', 'Helvetica Neue', Arial, sans-serif;
	--bmf-gutter: max(24px, (100% - var(--bmf-wrap)) / 2);
	--bmf-ease: cubic-bezier(.2, .8, .2, 1);

	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--bmf-ink);
	color: var(--bmf-tekst);
	font-family: var(--bmf-body);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	padding: clamp(72px, 9vw, 132px) 0 0;
	border-top: 1px solid var(--bmf-lijn);
}
.bmf::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 60%;
	z-index: -1;
	background: radial-gradient(50% 60% at 15% 0%, color-mix(in srgb, var(--bmf-accent) 10%, transparent), transparent 70%);
	pointer-events: none;
}

.bmf :where(h3, p, ul, li) { margin: 0; padding: 0; }
.bmf :where(ul) { list-style: none; }
.bmf :where(a) { color: inherit; text-decoration: none; }
.bmf :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.bmf :focus-visible { outline: 2px solid var(--bmf-accent); outline-offset: 3px; }
.bmf svg { width: 1em; height: 1em; flex: none; }

.bmf-in { position: relative; z-index: 1; padding: 0 var(--bmf-gutter); }

/* ---------- Oproep bovenin ---------- */
.bmf-oproep {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 36px 64px;
	align-items: end;
	padding-bottom: 64px;
	border-bottom: 1px solid var(--bmf-lijn);
}
.bmf.bmf .bmf-oproep-titel {
	margin: 0;
	font: 700 clamp(44px, 5.6vw, 84px)/.96 var(--bmf-kop);
	letter-spacing: -.05em;
	color: #fff;
	text-wrap: balance;
}
.bmf-oproep-titel span { display: block; }
.bmf-accent { color: var(--bmf-accent); }
.bmf-oproep-tekst { max-width: 520px; margin-top: 22px; font-size: 16.5px; line-height: 1.6; color: var(--bmf-zacht); }
.bmf-oproep-r { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; justify-self: end; }
.bmf-knop-groot { margin-top: 0; padding: 8px 8px 8px 26px; font-size: 16px; }
.bmf-knop-groot em { width: 44px; height: 44px; font-size: 18px; }
.bmf-groot-contact { display: flex; flex-direction: column; gap: 6px; }
.bmf-groot-contact a {
	position: relative;
	display: inline-block;
	width: max-content;
	font: 600 clamp(20px, 2vw, 28px)/1.2 var(--bmf-kop);
	letter-spacing: -.03em;
	color: #fff;
	padding-bottom: 2px;
}
.bmf-groot-contact a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--bmf-accent); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--bmf-ease); }
.bmf-groot-contact a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Boven: merk en kolommen ---------- */
.bmf-boven {
	padding-top: 56px;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.6fr);
	gap: 48px 72px;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--bmf-lijn);
}

.bmf-logo { display: inline-flex; align-items: center; gap: 11px; font: 600 20px/1 var(--bmf-kop); letter-spacing: -.025em; color: #fff; }
.bmf-logo img { height: 30px; width: auto; display: block; }
.bmf-merkteken { width: 12px; height: 12px; border-radius: 3px; background: var(--bmf-accent); transform: rotate(45deg); box-shadow: 0 0 22px color-mix(in srgb, var(--bmf-accent) 60%, transparent); }
.bmf-tagline { max-width: 340px; margin-top: 20px; font-size: 14.5px; line-height: 1.6; color: var(--bmf-zacht); }

.bmf-score { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13.5px; color: var(--bmf-zacht); }
.bmf-score b { color: #fff; font-weight: 700; }
.bmf-sterren { display: inline-flex; gap: 2px; }
.bmf-sterren i { width: 11px; height: 11px; background: var(--bmf-accent); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
a.bmf-score:hover b { color: var(--bmf-accent-licht); }

.bmf-socials { display: flex; gap: 8px; margin-top: 24px; }
.bmf-socials a {
	width: 40px; height: 40px;
	border-radius: 11px;
	border: 1px solid var(--bmf-lijn);
	background: var(--bmf-vlak);
	display: grid; place-items: center;
	font-size: 17px;
	color: var(--bmf-zacht);
	transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.bmf-socials a:hover { background: var(--bmf-accent); border-color: var(--bmf-accent); color: #fff; transform: translateY(-2px); }

.bmf-kolommen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: 32px 28px; }
.bmf-kop { font: 600 13.5px/1 var(--bmf-kop); letter-spacing: -.005em; color: var(--bmf-accent-licht); margin-bottom: 18px; }
.bmf-kolom ul { display: grid; gap: 11px; }
.bmf-kolom li a, .bmf-kolom li span { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--bmf-zacht); transition: color .25s, transform .3s var(--bmf-ease); }
.bmf-kolom li a:hover { color: #fff; transform: translateX(3px); }
.bmf-contact li i { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--bmf-lijn); display: grid; place-items: center; font-size: 12px; color: var(--bmf-accent-licht); flex: none; font-style: normal; }
.bmf-contact li a, .bmf-contact li span { align-items: flex-start; line-height: 1.4; }
.bmf-contact li i { margin-top: -2px; }

.bmf-knop {
	display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
	margin-top: 22px;
	padding: 6px 6px 6px 18px;
	border-radius: 999px;
	background: var(--bmf-accent);
	color: #fff;
	font: 600 14px/1 var(--bmf-kop);
	letter-spacing: -.01em;
	box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--bmf-accent) 90%, transparent);
	transition: transform .35s var(--bmf-ease), background .3s;
}
.bmf-knop em { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--bmf-accent); display: grid; place-items: center; font-size: 15px; transition: transform .35s var(--bmf-ease); }
.bmf-knop em svg { stroke-width: 1.6; }
.bmf-knop:hover { transform: translateY(-2px); background: #fff; color: var(--bmf-ink); }
.bmf-knop:hover em { background: var(--bmf-ink); color: #fff; transform: translate(1px, -1px); }

/* ---------- Onder ---------- */
.bmf-onder { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding: 26px 0 0; }
.bmf-copy { font-size: 12.5px; color: var(--bmf-mute); }
.bmf-copy span::before { content: "\00b7"; margin: 0 8px; }
.bmf-juridisch { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; }
.bmf-juridisch a { color: var(--bmf-mute); transition: color .25s; }
.bmf-juridisch a:hover { color: #fff; }
.bmf-boven-knop {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--bmf-accent);
	color: #fff;
	display: grid; place-items: center;
	font-size: 16px;
	transition: transform .35s var(--bmf-ease), background .3s;
}
.bmf-boven-knop svg { stroke-width: 1.8; }
.bmf-boven-knop:hover { transform: translateY(-3px); background: #fff; color: var(--bmf-ink); }

/* ---------- Groot woordmerk dat onder de rand wegvalt ---------- */
.bmf-woordmerk {
	position: relative;
	height: clamp(52px, 7.4vw, 134px);
	margin-top: 40px;
	overflow: hidden;
	pointer-events: none;
}
.bmf-woordmerk span {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
	font: 700 clamp(84px, 12.4vw, 230px)/1 var(--bmf-kop);
	letter-spacing: -.055em;
	color: transparent;
	background: linear-gradient(180deg, rgba(244, 241, 237, .11), rgba(244, 241, 237, .02));
	-webkit-background-clip: text;
	background-clip: text;
}


/* ==========================================================================
   Indeling "abstract": asymmetrisch raster van omlijnde vlakken
   ========================================================================== */
.bmf-abstract { padding-top: clamp(64px, 8vw, 112px); }
.bmf-raster {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: auto;
	gap: 14px;
}
.bmf-vlak {
	position: relative;
	padding: 30px 32px;
	border-radius: 22px;
	border: 1px solid var(--bmf-lijn);
	background: var(--bmf-vlak);
	min-width: 0;
}
.bmf-vlak-kop { grid-column: 1 / 9; padding: 40px 44px 44px; display: flex; flex-direction: column; align-items: flex-start; }
.bmf-vlak-kop .bmf-oproep-titel { margin-top: 26px; font-size: clamp(42px, 5.4vw, 80px); }
.bmf-vlak-kop .bmf-oproep-tekst { margin-top: 20px; }
.bmf-vlak-kop .bmf-knop-groot { margin-top: 36px; }
.bmf-vlak-contact { grid-column: 9 / 13; display: flex; flex-direction: column; background: linear-gradient(160deg, color-mix(in srgb, var(--bmf-accent) 18%, var(--bmf-ink)), var(--bmf-ink) 70%); border-color: color-mix(in srgb, var(--bmf-accent) 30%, var(--bmf-lijn)); }
.bmf-vlak-contact .bmf-groot-contact { margin-top: 26px; gap: 10px; }
.bmf-vlak-contact .bmf-groot-contact a { font-size: clamp(20px, 1.6vw, 24px); white-space: nowrap; }
.bmf-contact-lijst { display: grid; gap: 10px; margin-top: auto; padding-top: 28px; }
.bmf-contact-lijst li a, .bmf-contact-lijst li span { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--bmf-zacht); transition: color .25s; }
.bmf-contact-lijst li a:hover { color: #fff; }
.bmf-contact-lijst li i { width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); display: grid; place-items: center; font-size: 12px; color: var(--bmf-accent-licht); flex: none; font-style: normal; margin-top: -3px; }

.bmf-vlak-merk { grid-column: 1 / 5; display: flex; flex-direction: column; }
.bmf-vlak-merk .bmf-tagline { margin-top: 18px; }
.bmf-vlak-merk .bmf-socials { margin-top: auto; padding-top: 24px; }
.bmf-vlak-links { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; padding-left: 40px; padding-right: 40px; }
.bmf-vlak-merk .bmf-score { margin-top: 18px; }

.bmf-label { display: inline-flex; align-items: center; gap: 9px; font: 500 13px/1 var(--bmf-kop); color: var(--bmf-mute); }
.bmf-label i { width: 6px; height: 6px; border-radius: 1.5px; background: var(--bmf-accent); transform: rotate(45deg); }

.bmf-abstract .bmf-onder { padding-top: 28px; margin-top: 14px; border-top: 1px solid var(--bmf-lijn); }

@media (max-width: 1060px) {
	.bmf-vlak { padding: 26px 24px; }
	.bmf-vlak-kop { grid-column: 1 / 13; padding: 32px 28px 34px; }
	.bmf-vlak-contact { grid-column: 1 / 13; }
	.bmf-vlak-merk { grid-column: 1 / 13; }
	.bmf-vlak-links { grid-column: 1 / 13; padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 760px) {
	.bmf-raster { gap: 10px; }
	.bmf-vlak { padding: 22px 20px; border-radius: 18px; }
	.bmf-vlak-kop { padding: 26px 22px 28px; }
	.bmf-vlak-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bmf-vlak-contact .bmf-groot-contact a { white-space: normal; }
}


/* ==========================================================================
   Indeling "statement": mesh, lopende regel, reusachtige kop, strook
   ========================================================================== */
.bmf-statement { padding-top: 0; border-top: 0; }
.bmf-statement.bmf-heeft-mesh { background: var(--bmf-ink) var(--bmf-mesh) center / cover no-repeat; }
.bmf-statement::before { background: linear-gradient(180deg, var(--bmf-ink), transparent 28%, transparent 70%, rgba(10, 10, 11, .7)); inset: 0; height: auto; }

.bmf-loop { overflow: clip; border-top: 1px solid var(--bmf-lijn); border-bottom: 1px solid var(--bmf-lijn); padding: 14px 0; font: 500 13px/1 var(--bmf-kop); color: var(--bmf-mute); position: relative; z-index: 1; }
.bmf-loop-spoor { display: flex; width: max-content; animation: bmfLoop 120s linear infinite; }
.bmf-loop-rij { display: flex; align-items: center; flex: none; }
.bmf-loop-rij span { padding: 0 20px; white-space: nowrap; }
.bmf-loop-rij i { width: 5px; height: 5px; border-radius: 1px; background: var(--bmf-accent); transform: rotate(45deg); flex: none; }
@keyframes bmfLoop { to { transform: translate3d(-50%, 0, 0); } }

.bmf-st-kop { padding: clamp(72px, 9vw, 140px) 0 clamp(56px, 7vw, 96px); }
.bmf.bmf .bmf-st-titel { font-size: clamp(52px, 9vw, 150px); letter-spacing: -.055em; line-height: .92; }
.bmf-st-actie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: clamp(32px, 4vw, 56px); }
.bmf-st-mail {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 24px);
	width: max-content;
	max-width: 100%;
	font: 600 clamp(26px, 4.2vw, 64px)/1.05 var(--bmf-kop);
	letter-spacing: -.045em;
	color: #fff;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
	transition: color .3s;
}
.bmf-st-mail span { min-width: 0; overflow-wrap: anywhere; }
.bmf-st-mail em {
	flex: none;
	width: clamp(44px, 4.2vw, 72px); height: clamp(44px, 4.2vw, 72px);
	border-radius: 50%;
	background: var(--bmf-accent);
	color: #fff;
	display: grid; place-items: center;
	font-size: clamp(18px, 1.8vw, 30px);
	transition: transform .5s var(--bmf-ease), background .3s;
}
.bmf-st-mail em svg { stroke-width: 1.5; }
.bmf-st-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--bmf-accent); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--bmf-ease); }
.bmf-st-mail:hover::after { transform: scaleX(1); transform-origin: left; }
.bmf-st-mail:hover em { transform: translate(4px, -4px) rotate(0); background: #fff; color: var(--bmf-ink); }
.bmf-st-onder-mail { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.bmf-st-onder-mail p { font-size: 16px; color: var(--bmf-zacht); }
.bmf-st-onder-mail p a { color: #fff; font-weight: 600; border-bottom: 1px solid var(--bmf-accent); }
.bmf-st-onder-mail .bmf-knop-groot { margin-top: 0; }

/* Strook: merk, kolommen en contact gescheiden door hairlines */
.bmf-strook {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
	border-top: 1px solid var(--bmf-lijn);
	border-bottom: 1px solid var(--bmf-lijn);
}
.bmf-strook-vak { padding: 34px 28px 36px 0; min-width: 0; }
.bmf-strook-vak + .bmf-strook-vak { padding-left: 28px; border-left: 1px solid var(--bmf-lijn); }
.bmf-strook-merk .bmf-tagline { max-width: 300px; margin-top: 18px; font-size: 14px; }
.bmf-strook-merk .bmf-score { margin-top: 18px; }
.bmf-strook-contact li a, .bmf-strook-contact li span { font-size: 14px; }
.bmf-st-socials { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bmf-lijn); }
.bmf-st-socials a { display: inline-flex; align-items: center; gap: 5px; font: 600 13.5px/1 var(--bmf-kop); color: var(--bmf-zacht); transition: color .25s; }
.bmf-st-socials svg { font-size: 12px; color: var(--bmf-accent); stroke-width: 1.8; transition: transform .35s var(--bmf-ease); }
.bmf-st-socials a:hover { color: #fff; }
.bmf-st-socials a:hover svg { transform: translate(2px, -2px); }

.bmf-statement .bmf-onder { padding-top: 24px; }
.bmf-boven-tekst { width: auto; height: auto; border-radius: 999px; padding: 10px 14px 10px 18px; display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 1px solid var(--bmf-lijn); color: var(--bmf-zacht); font: 600 13px/1 var(--bmf-kop); }
.bmf-boven-tekst svg { font-size: 14px; }
.bmf-boven-tekst:hover { background: #fff; border-color: #fff; color: var(--bmf-ink); transform: translateY(-2px); }

/* Woordmerk met magenta vulling die naar onderen wegsterft */
.bmf-woordmerk-vol { height: clamp(58px, 8.2vw, 150px); margin-top: 36px; }
.bmf-woordmerk-vol span {
	background: linear-gradient(180deg, color-mix(in srgb, var(--bmf-accent) 85%, #fff) 0%, var(--bmf-accent) 30%, rgba(224, 25, 95, .05) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

@media (max-width: 1060px) {
	.bmf-strook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bmf-strook-vak { padding: 28px 20px 28px 0; }
	.bmf-strook-vak + .bmf-strook-vak { padding-left: 20px; }
	.bmf-strook-vak:nth-child(odd) { padding-left: 0; border-left: 0; }
	.bmf-strook-vak:nth-child(n + 3) { border-top: 1px solid var(--bmf-lijn); }
	.bmf-strook-merk { grid-column: 1 / -1; padding-right: 0; }
	.bmf-strook-vak:nth-child(2) { padding-left: 0; border-left: 0; border-top: 1px solid var(--bmf-lijn); }
}
@media (max-width: 760px) {
	.bmf-st-kop { padding: 56px 0 44px; }
	.bmf.bmf .bmf-st-titel { font-size: clamp(42px, 13vw, 64px); }
	.bmf-st-mail { font-size: clamp(22px, 6.4vw, 30px); gap: 12px; }
	.bmf-st-onder-mail { flex-direction: column; align-items: flex-start; }
	.bmf-strook { grid-template-columns: minmax(0, 1fr); }
	.bmf-strook-vak, .bmf-strook-vak + .bmf-strook-vak { padding: 22px 0; border-left: 0; }
	.bmf-strook-vak + .bmf-strook-vak { border-top: 1px solid var(--bmf-lijn); }
	.bmf-woordmerk-vol { height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .bmf-loop-spoor { animation: none; } }

/* ---------- Schermen ---------- */
@media (max-width: 1060px) {
	.bmf-oproep { grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: 48px; }
	.bmf-oproep-r { justify-self: start; }
	.bmf-boven { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 44px; }
	.bmf-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.bmf { padding-top: 56px; }
	.bmf-oproep { padding-bottom: 36px; gap: 26px; }
	.bmf-boven { padding-top: 36px; }
	.bmf-kolommen { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.bmf-onder { flex-direction: column; align-items: flex-start; }
	.bmf-boven-knop { position: absolute; right: var(--bmf-gutter); bottom: 0; }
	.bmf-onder { position: relative; padding-right: 56px; }
	.bmf-woordmerk { height: 40px; margin-top: 18px; }
	.bmf-woordmerk span { font-size: 13.6vw; }
}
@media (prefers-reduced-motion: reduce) {
	.bmf * { transition: none !important; }
}

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