/* ==========================================================================
   BodyMind — main.css
   Vanilla CSS, token-driven, @layer top-down. Geen build step.
   Volgorde: tokens, base, elements, layout, components, utilities.
   ========================================================================== */

@layer tokens, base, elements, layout, components, utilities;

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
@layer tokens {
	:root {
		/* Kleuren — exacte waardes uit Figma overnemen zodra beschikbaar */
		--c-bg: #2a2320; /* espresso, hoofd-achtergrond */
		--c-bg-alt: #a99b87; /* taupe secties/header-variant */
		--c-surface: #c9bca8; /* beige cards */
		--c-surface-dark: #3a322d; /* donkere card op espresso */
		--c-text: #ede7dd; /* crème tekst op donker */
		--c-text-dark: #2a2320; /* tekst op licht */
		--c-muted: rgb(237 231 221 / 60%);
		--c-muted-dark: rgb(42 35 32 / 60%);
		--c-accent: #cbb79b; /* lichtere tint voor nadruk-woorden */
		--c-line: rgb(237 231 221 / 15%);
		--c-line-dark: rgb(42 35 32 / 18%);

		/* Typografie */
		--font-serif: "BN Cringe Serif", Georgia, serif;
		--font-mono: "JetBrains Mono", ui-monospace, monospace;
		--fs-h1: clamp(2.75rem, 5.5vw + 1rem, 5rem);
		--fs-h2: clamp(1.85rem, 3vw + 1rem, 3rem);
		--fs-h3: clamp(1.4rem, 1.6vw + 1rem, 1.85rem);
		--fs-body: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
		--fs-body-sm: clamp(0.9rem, 0.2vw + 0.85rem, 1rem);
		--fs-label: 0.75rem;
		--lh-tight: 1.05;
		--lh-snug: 1.25;
		--lh-body: 1.6;
		--ls-label: 0.12em;

		/* Spacing / vorm / lijnen / schaduw */
		--space-1: 0.5rem;
		--space-2: 1rem;
		--space-3: 2rem;
		--space-4: 4rem;
		--space-5: 6rem;
		--space-6: 8rem;
		--radius: 16px;
		--radius-lg: 24px;
		--radius-pill: 999px;
		--border: 1px solid rgb(237 231 221 / 15%);
		--border-dark: 1px solid rgb(42 35 32 / 15%);
		--shadow-lg: 0 12px 40px rgb(0 0 0 / 25%);

		--container: 1240px;
		--gutter: clamp(1rem, 4vw, 3rem);
		--header-h: 72px;

		--ease: cubic-bezier(0.4, 0, 0.2, 1);
	}
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
@layer base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		/* Geen scroll-behavior:smooth hier — dat botst met GSAP ScrollTrigger's
		   eigen initialisatie bij het laden van de pagina: een fragment-link
		   vanaf een ándere pagina (bv. #onze-lessen) werd daardoor weer
		   teruggezet naar de bovenkant. Same-page anchor-klikken animeren nu
		   zelf via JS, zie main.js initSmoothAnchors(). */
		scroll-padding-top: 6rem;
	}

	body {
		background: var(--c-bg);
		color: var(--c-text);
		font-family: var(--font-serif);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		overflow-x: hidden;
		/* BN Cringe Serif heeft geen cursieve snit — geen faux italic/bold. */
		font-synthesis: none;
	}

	img {
		max-width: 100%;
		display: block;
	}

	a {
		color: inherit;
	}

	ul,
	ol {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	button {
		font: inherit;
		background: none;
		border: 0;
		cursor: pointer;
		color: inherit;
	}

	:focus-visible {
		outline: 2px solid var(--c-accent);
		outline-offset: 3px;
	}
}

/* ==========================================================================
   3. ELEMENTS — typografie, buttons, forms
   ========================================================================== */
@layer elements {
	h1,
	h2,
	h3,
	h4 {
		font-family: var(--font-serif);
		font-weight: 400;
		line-height: var(--lh-tight);
		margin: 0;
	}

	h1 {
		font-size: var(--fs-h1);
	}

	h2 {
		font-size: var(--fs-h2);
	}

	h3 {
		font-size: var(--fs-h3);
	}

	p {
		margin: 0;
	}

	em,
	.bm-accent {
		font-style: normal;
		color: var(--c-accent);
	}

	.bm-eyebrow {
		display: inline-block;
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-eyebrow {
		color: var(--c-muted-dark);
	}

	/* Buttons — pill, filled crème + outline */
	.bm-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		font-family: var(--font-mono);
		font-size: 0.8rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
		padding: 0.95em 1.75em;
		border-radius: var(--radius-pill);
		border: 1px solid transparent;
		/* transform bewust niet hier — die staat volledig onder controle van de
		   magnetische hover-animatie in assets/js/animations.js. Een CSS-
		   transition op transform zou daarmee vechten (dubbele, tegengestelde
		   easing) en een :hover transform zou door GSAP's inline style
		   toch genegeerd worden. */
		transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
	}

	.bm-btn--filled {
		background: var(--c-text);
		color: var(--c-text-dark);
	}

	.bm-btn--outline {
		background: transparent;
		color: currentColor;
		border-color: var(--c-line);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-btn--outline {
		border-color: var(--c-line-dark);
	}

	.bm-btn--outline:hover {
		background: rgb(237 231 221 / 8%);
	}

	.bm-btn--dark {
		background: var(--c-text-dark);
		color: var(--c-text);
	}

	.bm-btn--link {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		text-decoration: none;
		border-bottom: 1px solid currentColor;
		padding-bottom: 0.15em;
		display: inline-block;
		/* In flex-kolommen (kaarten) niet uitrekken tot de volle breedte —
		   de onderstreping hoort alleen onder de tekst. */
		align-self: flex-start;
	}

	/* Forms */
	.bm-field {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	.bm-field label {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
	}

	.bm-field input,
	.bm-field textarea {
		background: transparent;
		border: 0;
		border-bottom: var(--border);
		color: var(--c-text);
		font-family: var(--font-serif);
		font-size: 1.05rem;
		padding: 0.5rem 0;
		width: 100%;
		border-radius: 0;
	}

	.bm-field textarea {
		resize: vertical;
		min-height: 4.5rem;
	}

	.bm-field input::placeholder,
	.bm-field textarea::placeholder {
		color: var(--c-muted);
		font-family: var(--font-serif);
		font-weight: 300;
	}

	.bm-field input:focus,
	.bm-field textarea:focus {
		border-bottom-color: var(--c-accent);
	}

	.bm-field--honeypot {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
@layer layout {
	.bm-container {
		width: 100%;
		max-width: var(--container);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.bm-section {
		padding-block: var(--space-5);
	}

	.bm-section--tight {
		padding-block: var(--space-4);
	}

	.bm-section--alt {
		background: var(--c-bg-alt);
		color: var(--c-text-dark);
	}

	.bm-section--surface {
		background: var(--c-surface);
		color: var(--c-text-dark);
	}

	.bm-grid {
		display: grid;
		gap: var(--gutter);
	}

	.bm-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.bm-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.bm-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	@media (width <= 900px) {
		.bm-grid--2,
		.bm-grid--3,
		.bm-grid--4 {
			grid-template-columns: 1fr;
		}
	}

}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */
@layer components {

	/* ---- Header --------------------------------------------------------- */
	.bm-header {
		position: sticky;
		top: 0;
		z-index: 40;
		background: var(--c-bg-alt);
	}

	/* Transparant over de hero-foto; blijft qua document-flow op 0 hoogte
	   (negatieve margin) zodat de hero er als voorheen precies onder start,
	   ook al staat de header nu (sticky) gewoon in de flow i.p.v. absolute. */
	.bm-header--transparent {
		background: transparent;
		margin-bottom: calc(-1 * var(--header-h));
	}

	/* Zodra er voorbij de hero gescrold is: zelfde vaste taupe balk als de
	   rest van de site, anders wordt donkere tekst onleesbaar over content. */
	.bm-header--transparent.is-scrolled {
		background: var(--c-bg-alt);
	}

	.bm-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding-block: 1.25rem;
	}

	.bm-logo {
		text-decoration: none;
		display: inline-flex;
		align-items: center;
	}

	.bm-logo__text {
		font-family: var(--font-serif);
		font-weight: 500;
		font-size: 1.35rem;
		color: var(--c-text);
	}

	.bm-header--transparent .bm-logo__text,
	.bm-header--alt .bm-logo__text {
		color: var(--c-text-dark);
	}

	.bm-header--transparent.is-scrolled .bm-logo__text {
		color: var(--c-text);
	}

	.bm-logo__text em {
		color: inherit;
		opacity: 0.7;
	}

	.bm-logo__img {
		max-height: 34px;
		width: auto;
	}

	.bm-nav__list {
		display: flex;
		align-items: center;
		gap: clamp(1.25rem, 2.2vw, 2rem);
	}

	.bm-nav__link {
		font-family: var(--font-mono);
		font-size: 0.8rem;
		letter-spacing: 0.03em;
		white-space: nowrap;
		text-decoration: none;
		color: var(--c-text-dark);
		opacity: 0.85;
		transition: opacity 0.2s var(--ease);
	}

	.bm-nav__link:hover,
	.bm-nav__link.current-menu-item {
		opacity: 1;
	}

	.bm-header__actions {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.bm-nav-toggle {
		display: none;
	}

	/* Hamburger zodra de 6 menu-items + logo + knop niet meer op één regel
	   passen (gemeten: ±1170px). */
	@media (width <= 1200px) {
		.bm-nav {
			position: fixed;
			inset: 0;
			top: var(--header-h);
			background: var(--c-bg-alt);
			padding: var(--space-3) var(--gutter);
			transform: translateY(-8px);
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
		}

		.bm-nav.is-open {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}

		.bm-nav__list {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-2);
		}

		.bm-nav-toggle {
			display: inline-flex;
			position: relative;
			width: 38px;
			height: 38px;
			padding: 0;
		}

		.bm-nav-toggle__bar {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 22px;
			height: 2px;
			background: currentColor;
			transform: translate(-50%, -6px);
			transition: transform 0.25s var(--ease);
		}

		.bm-nav-toggle__bar--bottom {
			transform: translate(-50%, 5px);
		}

		/* Streepjes draaien naar een kruisje zodra het menu open staat. */
		.bm-nav-toggle[aria-expanded="true"] .bm-nav-toggle__bar--top {
			transform: translate(-50%, -50%) rotate(45deg);
		}

		.bm-nav-toggle[aria-expanded="true"] .bm-nav-toggle__bar--bottom {
			transform: translate(-50%, -50%) rotate(-45deg);
		}
	}

	/* ---- Hero ------------------------------------------------------------ */
	.bm-hero {
		position: relative;
		min-height: 88vh;
		display: flex;
		align-items: flex-end;
		color: var(--c-text);
		overflow: hidden;
	}

	.bm-hero__media {
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.bm-hero__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bm-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(0deg, rgb(20 16 14 / 75%) 0%, rgb(20 16 14 / 15%) 55%, rgb(20 16 14 / 45%) 100%);
	}

	.bm-hero__inner {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: var(--gutter);
		align-items: end;
		padding-block: var(--space-5);
		width: 100%;
	}

	@media (width <= 900px) {
		.bm-hero__inner {
			grid-template-columns: 1fr;
		}
	}

	.bm-hero__title {
		font-size: var(--fs-h1);
		line-height: var(--lh-tight);
	}

	.bm-hero__title span {
		display: block;
	}

	.bm-hero__text {
		max-width: 32ch;
		color: var(--c-muted);
		font-family: var(--font-mono);
		font-size: var(--fs-body-sm);
		margin-bottom: var(--space-2);
	}

	.bm-hero__actions {
		display: flex;
		gap: var(--space-2);
		margin-top: var(--space-3);
		flex-wrap: wrap;
	}

	/* ---- Workshops & Opleidingen — hero -------------------------------------
	   Zelfde patroon als .bm-lessen__head / .bm-ruimtes__head: titel links,
	   introtekst rechts uitgelijnd, beide onderaan de rij (op "dezelfde
	   hoogte" als de titel). */
	.bm-wo-hero {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: var(--space-2);
		flex-wrap: wrap;
	}

	.bm-wo-hero__intro {
		text-align: right;
		margin-bottom: 0;
	}

	@media (width <= 900px) {
		.bm-wo-hero {
			flex-direction: column;
			align-items: flex-start;
		}

		.bm-wo-hero__intro {
			text-align: left;
		}
	}

	/* ---- Visie / intro split ---------------------------------------------- */
	.bm-visie {
		display: grid;
		grid-template-columns: 0.6fr 1.4fr 0.7fr;
		gap: var(--space-3);
		align-items: center;
	}

	@media (width <= 900px) {
		.bm-visie {
			grid-template-columns: 1fr;
		}
	}

	.bm-visie__text {
		font-size: clamp(1.3rem, 1.5vw + 0.9rem, 1.8rem);
		line-height: var(--lh-snug);
		transform-origin: left center;
	}

	.bm-visie__photo {
		border-radius: var(--radius);
		overflow: hidden;
		border: var(--border);
		aspect-ratio: 4 / 5;
	}

	.bm-visie__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---- Onze lessen ------------------------------------------------------ */
	.bm-lessen__head {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: var(--space-2);
		margin-bottom: var(--space-3);
	}

	.bm-lessen__intro {
		max-width: 32ch;
		color: var(--c-muted);
		font-family: var(--font-mono);
		font-size: var(--fs-body-sm);
		text-align: right;
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-lessen__intro {
		color: var(--c-muted-dark);
	}

	/* Eén gedeelde kolomdefinitie voor de hele lijst (subgrid), zodat elke rij
	   exact dezelfde kolombreedtes gebruikt. Zonder dit is elke .bm-lessen-item
	   een eigen, onafhankelijke grid — dan bepaalt de langste titel per rij
	   (bv. "Personal Training" vs. "Yoga") zelf hoe breed de 1fr-titelkolom
	   wordt, waardoor kolom 4 (de beschrijving) per rij op een net iets andere
	   x-positie begint. */
	.bm-lessen-list {
		display: grid;
		grid-template-columns: 3rem 7rem 1fr 2fr auto;
		border-top: var(--border);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-lessen-list {
		border-top: var(--border-dark);
	}

	.bm-lessen-item {
		position: relative;
		isolation: isolate;
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		align-items: center;
		gap: var(--space-2);
		padding-block: var(--space-2);
		border-bottom: var(--border);
		text-decoration: none;
		color: inherit;
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-lessen-item {
		border-bottom: var(--border-dark);
	}

	/* Klikbare rijen (homepage → rooster, Lessen-pagina → les). */
	a.bm-lessen-item {
		transition: background-color 0.2s var(--ease);
	}

	a.bm-lessen-item:hover {
		background: rgb(237 231 221 / 4%);
	}

	a.bm-lessen-item:hover .bm-lessen-item__title {
		color: var(--c-accent);
	}

	.bm-lessen-item__num {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		color: var(--c-muted);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-lessen-item__num {
		color: var(--c-muted-dark);
	}

	.bm-lessen-item__thumb {
		width: 7rem;
		aspect-ratio: 4 / 3;
		border-radius: var(--radius-lg);
		overflow: hidden;
		border: var(--border);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-lessen-item__thumb {
		border-color: var(--c-line-dark);
	}

	.bm-lessen-item__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bm-lessen-item__title {
		font-size: 1.25rem;
		margin-left: 0.5rem;
	}

	/* Vaste hoogte (ruimte voor 2 regels) zodat de beschrijving als geheel
	   verticaal gecentreerd blijft in de rij (net als titel/thumbnail), terwijl
	   de tekst zelf altijd bovenin dat vak — dus op dezelfde lijn — begint,
	   ongeacht of hij 1 of 2 regels beslaat. */
	.bm-lessen-item__desc {
		font-size: var(--fs-body-sm);
		color: var(--c-muted);
		text-align: left;
		line-height: 1.5;
		min-height: calc(1.5em * 2);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-lessen-item__desc {
		color: var(--c-muted-dark);
	}

	.bm-lessen-item__text {
		display: block;
	}

	.bm-lessen-item__tags {
		margin-top: 0.85rem;
		gap: 0.4rem;
	}

	.bm-lessen-item__tags .bm-chip {
		font-size: 0.65rem;
		padding: 0.4em 0.95em;
		color: var(--c-text);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-lessen-item__tags .bm-chip {
		border: var(--border-dark);
		color: var(--c-text-dark);
	}

	.bm-lessen-item__duur {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		white-space: nowrap;
		color: var(--c-muted);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-lessen-item__duur {
		color: var(--c-muted-dark);
	}

	@media (width <= 760px) {
		.bm-lessen-item {
			grid-template-columns: 1fr;
			gap: 0.5rem;
		}

		.bm-lessen__head {
			flex-direction: column;
			align-items: flex-start;
		}

		.bm-lessen__intro {
			text-align: left;
		}
	}

	/* ---- Memberships (tabs) ----------------------------------------------- */
	.bm-memberships__head {
		text-align: center;
		max-width: 640px;
		margin-inline: auto;
		margin-bottom: var(--space-3);
	}

	.bm-memberships__title {
		margin-top: 0.75rem;
	}

	.bm-memberships__intro {
		font-family: var(--font-mono);
		font-size: var(--fs-body-sm);
		color: var(--c-muted);
		margin-top: 0.75rem;
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-memberships__intro {
		color: var(--c-muted-dark);
	}

	.bm-tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
		margin-bottom: var(--space-4);
	}

	/* Alleen op de Memberships-pagina staan de tabs los onder de titel (geen
	   .bm-memberships__head ervoor), dus daar wat extra ruimte erboven. */
	.page-template-page-memberships-php .bm-tabs {
		margin-top: var(--space-3);
	}

	.bm-tabs__btn {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: 0.04em;
		text-transform: uppercase;
		padding: 0.75em 1.4em;
		border-radius: var(--radius-pill);
		border: var(--border);
		background: transparent;
		color: inherit;
		opacity: 0.6;
		transition: opacity 0.2s var(--ease), background-color 0.2s var(--ease);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-tabs__btn {
		border: var(--border-dark);
	}

	.bm-tabs__btn[aria-selected="true"] {
		opacity: 1;
		background: rgb(237 231 221 / 8%);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-tabs__btn[aria-selected="true"] {
		background: rgb(42 35 32 / 6%);
	}

	.bm-membership-panel {
		display: grid;
		grid-template-columns: 0.85fr 1.4fr;
		gap: var(--space-4);
	}

	/* [hidden] moet display:none afdwingen — author-CSS wint anders van de
	   UA-stylesheet ondanks het hidden-attribuut (vandaar de hogere specificity). */
	.bm-membership-panel[hidden] {
		display: none;
	}

	@media (width <= 900px) {
		.bm-membership-panel {
			grid-template-columns: 1fr;
		}
	}

	.bm-membership-panel__intro {
		color: var(--c-muted);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-membership-panel__intro {
		color: var(--c-muted-dark);
	}

	.bm-membership-panel__intro p {
		font-family: var(--font-mono);
		font-size: var(--fs-body-sm);
	}

	.bm-membership-panel__title {
		margin-bottom: 0.75rem;
	}

	.bm-membership-links {
		display: flex;
		flex-direction: column;
		gap: 1.1rem;
		margin-top: 1.75rem;
	}

	.bm-membership-links__link {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		width: fit-content;
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		text-decoration: none;
		color: var(--c-text);
		transition: gap 0.2s var(--ease);
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-membership-links__link {
		color: var(--c-text-dark);
	}

	.bm-membership-links__link::after {
		content: '\2192';
	}

	.bm-membership-links__link:hover {
		gap: 0.85em;
	}

	.bm-membership-rows {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.bm-membership-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
		border: var(--border);
		border-radius: var(--radius-pill);
		padding: 1.1rem 1.75rem;
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-membership-row {
		border: var(--border-dark);
	}

	.bm-membership-row__title {
		font-size: 1.05rem;
	}

	.bm-membership-row__detail {
		font-family: var(--font-mono);
		font-size: 0.78rem;
		color: var(--c-muted);
		line-height: 1.4;
	}

	:is(.bm-section--alt, .bm-section--surface) .bm-membership-row__detail {
		color: var(--c-muted-dark);
	}

	.bm-membership-row__price {
		font-family: var(--font-serif);
		font-size: 1.1rem;
		white-space: nowrap;
		display: flex;
		align-items: baseline;
		gap: 0.6em;
	}

	.bm-membership-row__price del {
		font-size: 0.85rem;
		opacity: 0.55;
	}

	@media (width <= 640px) {
		.bm-membership-row {
			flex-direction: column;
			align-items: flex-start;
			gap: 0.4rem;
		}
	}

	/* ---- Groei / tussensectie ---------------------------------------------- */
	.bm-groei {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
		align-items: center;
	}

	@media (width <= 900px) {
		.bm-groei {
			grid-template-columns: 1fr;
		}
	}

	.bm-groei__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}

	.bm-groei__icon img {
		width: 2.25rem;
		height: auto;
		display: block;
	}

	.bm-groei__text {
		text-align: left;
		font-size: clamp(1.15rem, 1.4vw + 0.8rem, 1.6rem);
		line-height: var(--lh-snug);
		transform-origin: left center;
	}

	.bm-groei__photo {
		border-radius: var(--radius-lg);
		overflow: hidden;
		border: var(--border);
		aspect-ratio: 4 / 3;
	}

	.bm-groei__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---- Ruimtes ------------------------------------------------------------ */
	.bm-ruimtes__head {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: var(--space-2);
		margin-bottom: var(--space-3);
	}

	.bm-ruimtes__intro {
		max-width: 32ch;
		color: var(--c-muted);
		font-family: var(--font-mono);
		font-size: var(--fs-body-sm);
		text-align: right;
	}

	@media (width <= 900px) {
		.bm-ruimtes__grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (width <= 560px) {
		.bm-ruimtes__grid {
			grid-template-columns: 1fr;
		}

		.bm-ruimtes__grid .bm-ruimte-card__media {
			aspect-ratio: 4 / 3;
		}
	}

	.bm-ruimte-card {
		display: block;
		text-decoration: none;
		color: inherit;
	}

	/* Media en titel zijn <span>s in de markup — expliciet block, anders
	   werken aspect-ratio, radius en marges niet. */
	.bm-ruimte-card__media {
		display: block;
		aspect-ratio: 3 / 4;
		border-radius: var(--radius-lg);
		border: var(--border);
		overflow: hidden;
		background: var(--c-surface);
		margin-bottom: 1.25rem;
	}

	.bm-ruimte-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bm-ruimte-card__num {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
		display: block;
		margin-bottom: 0.6rem;
	}

	.bm-ruimte-card__title {
		display: block;
		font-size: 1.35rem;
		line-height: var(--lh-snug);
	}

	.bm-ruimte-card__link {
		display: block;
		margin-top: 0.5rem;
		font-family: var(--font-mono);
		font-size: 0.7rem;
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
	}

	@media (width <= 900px) {
		.bm-ruimtes__head {
			flex-direction: column;
			align-items: flex-start;
		}

		.bm-ruimtes__intro {
			text-align: left;
		}
	}

	/* ---- Quote --------------------------------------------------------------- */
	.bm-quote {
		text-align: center;
		max-width: 760px;
		margin-inline: auto;
		margin-top: var(--space-4);
	}

	.bm-quote__mark {
		font-family: var(--font-serif);
		font-size: 3rem;
		color: var(--c-accent);
		line-height: 1;
		margin-bottom: 1rem;
	}

	.bm-quote__text {
		font-size: clamp(1.25rem, 1.6vw + 0.8rem, 1.75rem);
		line-height: var(--lh-snug);
	}

	.bm-quote__source {
		display: block;
		margin-top: 1.5rem;
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
	}

	/* ---- CTA split ------------------------------------------------------------ */
	/* Eén doorlopende vorm i.p.v. twee losse kaarten: kleurvlak en foto raken
	   elkaar direct (geen gap), en alleen de buitenste hoeken zijn afgerond —
	   op desktop links, op mobiel (gestapeld: kleurvlak boven, foto onder)
	   bovenaan/onderaan. */
	.bm-cta-split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		align-items: stretch;
	}

	.bm-cta-split__content {
		background: var(--c-surface);
		color: var(--c-text-dark);
		border-radius: var(--radius-lg) 0 0 var(--radius-lg);
		padding: var(--space-4);
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-2);
	}

	.bm-cta-split__media {
		border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
		overflow: hidden;
		border: var(--border);
		border-left: 0;
	}

	@media (width <= 900px) {
		.bm-cta-split {
			grid-template-columns: 1fr;
		}

		.bm-cta-split__content {
			border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		}

		.bm-cta-split__media {
			border-radius: 0 0 var(--radius-lg) var(--radius-lg);
			border-left: var(--border);
			border-top: 0;
		}
	}

	.bm-cta-split__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---- Footer --------------------------------------------------------------- */
	.bm-footer {
		background: var(--c-bg);
		border-top: var(--border);
		padding-block: var(--space-4) var(--space-3);
	}

	.bm-footer__grid {
		display: grid;
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: var(--space-3);
		padding-bottom: var(--space-4);
	}

	@media (width <= 900px) {
		.bm-footer__grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (width <= 560px) {
		.bm-footer__grid {
			grid-template-columns: 1fr;
		}
	}

	.bm-footer__about p {
		color: var(--c-muted);
		font-size: var(--fs-body-sm);
		margin-top: 1rem;
		max-width: 30ch;
	}

	.bm-footer__logo {
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	.bm-footer__col-title {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
		margin-bottom: 1rem;
		display: block;
	}

	.bm-footer__col ul {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	.bm-footer__col a {
		text-decoration: none;
		font-size: var(--fs-body-sm);
	}

	.bm-footer__col a:hover {
		color: var(--c-accent);
	}

	.bm-footer__bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 1rem;
		padding-top: var(--space-2);
		border-top: var(--border);
		font-family: var(--font-mono);
		font-size: 0.7rem;
		color: var(--c-muted);
	}

	.bm-footer__bottom a {
		text-decoration: underline;
	}

	/* ---- Info-kaarten (Rooster) ------------------------------------------------ */
	.bm-info-card__media {
		aspect-ratio: 4 / 3;
		border-radius: var(--radius);
		overflow: hidden;
		margin-bottom: 1.25rem;
	}

	.bm-info-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bm-info-card__title {
		font-size: 1.15rem;
		margin-bottom: 0.5rem;
	}

	.bm-info-card__text {
		color: var(--c-muted-dark);
		font-size: var(--fs-body-sm);
		margin-bottom: 1rem;
	}

	/* ---- Rooster — Yogibit-widget ------------------------------------------------
	   Yogibit injecteert zelf HTML in #sportbit-rooster via een XHR-call
	   (embed_rooster.init(), zie inc/enqueue.php) en stuurt zijn eigen CSS mee
	   (cbm/css/embed/rooster/rooster.css). Geen iframe — gewone DOM, dus
	   natuurlijke hoogte i.p.v. een vaste iframe-hoogte. */
	.bm-rooster-embed {
		position: relative;
		border-radius: var(--radius-lg);
		border: var(--border-dark);
		min-height: 240px;
		padding: var(--space-2);
		background: rgb(255 255 255 / 15%);
	}

	.bm-rooster-embed__loading {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 200px;
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted-dark);
	}

	/* ---- Workshops ------------------------------------------------------------- */
	.bm-workshop-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
		align-items: center;
		margin-bottom: var(--space-4);
	}

	.bm-workshop-row:nth-child(even) .bm-workshop-row__media {
		order: 2;
	}

	@media (width <= 900px) {
		.bm-workshop-row {
			grid-template-columns: 1fr;
		}

		.bm-workshop-row:nth-child(even) .bm-workshop-row__media {
			order: 0;
		}
	}

	.bm-workshop-row__media {
		aspect-ratio: 4 / 3;
		border-radius: var(--radius-lg);
		overflow: hidden;
		border: var(--border);
	}

	.bm-workshop-row__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bm-workshop-row__text p {
		color: var(--c-muted);
		margin-block: 1rem 1.5rem;
	}

	/* Business Experience-teaser op de homepage — losse workshop-rij. */
	.bm-business-teaser {
		margin-bottom: 0;
	}

	.bm-business-teaser h2 {
		margin-top: var(--space-2);
	}

	.bm-business-teaser p {
		max-width: 46ch;
	}

	/* ---- Opleidingen (overzicht + kaart) ---------------------------------------- */
	.bm-opleiding-card {
		background: var(--c-bg);
		border: var(--border);
		border-radius: var(--radius-lg);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: inherit;
	}

	.bm-opleiding-card__media {
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.bm-opleiding-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bm-opleiding-card__body {
		padding: var(--space-2) var(--space-2) var(--space-3);
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		flex: 1;
	}

	.bm-opleiding-card__meta {
		font-family: var(--font-mono);
		font-size: 0.7rem;
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
	}

	.bm-opleiding-card__excerpt {
		color: var(--c-muted);
		font-size: var(--fs-body-sm);
		flex: 1;
	}

	/* ---- Opleiding — single ------------------------------------------------------- */
	.bm-opleiding-hero {
		display: grid;
		grid-template-columns: 1.6fr 1fr;
		gap: var(--space-3);
		align-items: start;
		margin-bottom: var(--space-4);
	}

	@media (width <= 900px) {
		.bm-opleiding-hero {
			grid-template-columns: 1fr;
		}
	}

	.bm-opleiding-hero__intro {
		color: var(--c-muted-dark);
		margin-top: 1.25rem;
		max-width: 55ch;
	}

	.bm-price-card {
		border: var(--border-dark);
		border-radius: var(--radius);
		padding: var(--space-3);
	}

	.bm-price-card__price {
		font-size: 1.75rem;
		margin-bottom: 1.25rem;
	}

	.bm-price-card__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.bm-meta-bar {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		border-top: var(--border-dark);
		border-bottom: var(--border-dark);
		margin-bottom: var(--space-4);
	}

	@media (width <= 760px) {
		.bm-meta-bar {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.bm-meta-bar__item {
		padding: var(--space-2);
		border-right: var(--border-dark);
		font-family: var(--font-mono);
		font-size: 0.8rem;
	}

	.bm-meta-bar__item:last-child {
		border-right: 0;
	}

	.bm-opleiding-body {
		max-width: 70ch;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		margin-bottom: var(--space-5);
	}

	.bm-opleiding-body h2,
	.bm-opleiding-body h3 {
		font-size: 1.4rem;
		margin-bottom: 0.75rem;
	}

	.bm-opleiding-body p {
		color: var(--c-muted-dark);
	}

	.bm-opleiding-body ul {
		list-style: disc;
		padding-left: 1.25em;
		color: var(--c-muted-dark);
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
	}

	.bm-docenten {
		border-top: var(--border-dark);
		padding-top: var(--space-2);
	}

	.bm-docenten__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-3);
		margin-top: var(--space-3);
	}

	@media (width <= 760px) {
		.bm-docenten__list {
			grid-template-columns: 1fr;
		}
	}

	.bm-docent-card__photo {
		width: 3rem;
		height: 3rem;
		border-radius: 999px;
		overflow: hidden;
		background: var(--c-bg);
		margin-bottom: 0.75rem;
	}

	.bm-docent-card__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bm-docent-card__name {
		font-size: 1.05rem;
	}

	.bm-docent-card__functie {
		color: var(--c-muted-dark);
		font-size: var(--fs-body-sm);
	}

	/* ---- Ruimte — single ------------------------------------------------------- */
	.bm-ruimte-hero {
		aspect-ratio: 16 / 8;
		border-radius: var(--radius-lg);
		overflow: hidden;
		margin-bottom: var(--space-3);
	}

	.bm-ruimte-hero img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---- Contactpagina ----------------------------------------------------------- */
	.bm-contact-hero {
		display: grid;
		grid-template-columns: 1.6fr 1fr;
		gap: var(--space-3);
		align-items: end;
	}

	@media (width <= 900px) {
		.bm-contact-hero {
			grid-template-columns: 1fr;
		}
	}

	.bm-contact-hero__note {
		color: var(--c-muted);
		font-family: var(--font-mono);
		font-size: var(--fs-body-sm);
	}

	.bm-contact-grid {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		gap: var(--space-4);
		align-items: start;
		margin-top: var(--space-5);
	}

	@media (width <= 900px) {
		.bm-contact-grid {
			grid-template-columns: 1fr;
		}
	}

	.bm-contact-form__intro {
		color: var(--c-muted);
		font-family: var(--font-mono);
		font-size: var(--fs-body-sm);
		max-width: 46ch;
		margin-block: 0.75rem 2rem;
	}

	.bm-contact-form__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2);
	}

	@media (width <= 560px) {
		.bm-contact-form__row {
			grid-template-columns: 1fr;
		}
	}

	.bm-contact-form form {
		display: flex;
		flex-direction: column;
		gap: 1.75rem;
	}

	.bm-contact-form__submit {
		margin-top: 0.5rem;
	}

	.bm-form-notice {
		font-family: var(--font-mono);
		font-size: var(--fs-body-sm);
		padding: 1rem 1.25rem;
		border-radius: var(--radius);
		border: var(--border);
	}

	.bm-form-notice--success {
		border-color: var(--c-accent);
	}

	.bm-form-notice--error {
		border-color: #c97b6a;
		color: #e7b3a6;
	}

	.bm-contact-media {
		border-radius: var(--radius-lg);
		overflow: hidden;
		aspect-ratio: 4 / 3;
		border: var(--border);
	}

	.bm-contact-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bm-contact-card {
		border: var(--border);
		border-radius: var(--radius);
		padding: var(--space-2);
		margin-top: var(--space-2);
	}

	.bm-contact-card__label {
		display: block;
		margin-bottom: 0.75rem;
	}

	.bm-contact-card p {
		margin-bottom: 0.25rem;
	}

	.bm-contact-card__divider {
		border: 0;
		border-top: var(--border);
		margin-block: 1rem;
	}

	/* ---- Generic image placeholder ---------------------------------------------- */
	.bm-img-placeholder {
		width: 100%;
		height: 100%;
		background: repeating-linear-gradient(
			135deg,
			rgb(237 231 221 / 6%),
			rgb(237 231 221 / 6%) 10px,
			transparent 10px,
			transparent 20px
		);
		border-radius: inherit;
		min-height: 160px;
	}

	/* ---- Lopende tekst op standaardpagina's (page.php, bv. privacybeleid) ---- */
	.bm-prose {
		max-width: 70ch;
		margin-bottom: var(--space-5);
	}

	.bm-prose > * + * {
		margin-top: 1rem;
	}

	.bm-prose h2 {
		font-size: var(--fs-h3);
		margin-top: var(--space-4);
	}

	.bm-prose h3 {
		font-size: 1.2rem;
		margin-top: var(--space-3);
	}

	.bm-prose p,
	.bm-prose li {
		color: var(--c-muted);
	}

	.bm-prose ul {
		list-style: disc;
		padding-left: 1.25em;
	}

	.bm-prose li + li {
		margin-top: 0.4rem;
	}

	.bm-prose strong {
		color: var(--c-text);
		font-weight: 400;
	}

	.bm-prose a {
		color: var(--c-text);
		text-underline-offset: 0.2em;
	}

	.bm-form-privacy {
		margin-top: 1.25rem;
		font-size: var(--fs-body-sm);
		color: var(--c-muted);
	}

	.bm-form-privacy a {
		color: var(--c-text);
		text-underline-offset: 0.2em;
	}

	/* ---- 404 ------------------------------------------------------------------- */
	.bm-404 {
		max-width: 52rem;
	}

	.bm-404 h1 {
		margin-top: var(--space-2);
	}

	.bm-404__text {
		color: var(--c-muted);
		margin-top: 1.25rem;
		max-width: 48ch;
	}

	.bm-404__routes {
		margin-top: var(--space-4);
	}

	.bm-404__routes a.bm-chip {
		display: inline-block;
		text-decoration: none;
		transition: background-color 0.2s var(--ease);
	}

	.bm-404__routes a.bm-chip:hover {
		background: rgb(237 231 221 / 8%);
	}

	/* ---- Foto-impressie (homepage) — masonry via CSS-kolommen ------------------- */
	.bm-impressie {
		columns: 4;
		column-gap: var(--space-2);
	}

	@media (width <= 1100px) {
		.bm-impressie {
			columns: 3;
		}
	}

	@media (width <= 700px) {
		.bm-impressie {
			columns: 2;
			column-gap: 0.75rem;
		}
	}

	.bm-impressie__item {
		break-inside: avoid;
		margin: 0 0 var(--space-2);
		border-radius: var(--radius-lg);
		border: var(--border);
		overflow: hidden;
		background: var(--c-surface-dark);
	}

	@media (width <= 700px) {
		.bm-impressie__item {
			margin-bottom: 0.75rem;
			border-radius: var(--radius);
		}
	}

	.bm-impressie__item--portrait {
		aspect-ratio: 3 / 4;
	}

	.bm-impressie__item--landscape {
		aspect-ratio: 4 / 3;
	}

	.bm-impressie__item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---- Business Experience — hero ---------------------------------------------- */
	.bm-be-hero {
		display: grid;
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--space-4);
		align-items: center;
	}

	.bm-be-hero h1 {
		margin-top: var(--space-2);
	}

	.bm-be-hero__intro {
		color: var(--c-muted);
		max-width: 52ch;
		margin-top: 1.5rem;
	}

	.bm-be-hero__fit {
		margin-top: var(--space-3);
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.bm-be-hero__fit-label {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
	}

	.bm-be-hero__media {
		aspect-ratio: 4 / 5;
		border-radius: var(--radius-lg);
		overflow: hidden;
		border: var(--border);
	}

	.bm-be-hero__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	@media (width <= 900px) {
		.bm-be-hero {
			grid-template-columns: 1fr;
			gap: var(--space-3);
		}

		.bm-be-hero__media {
			aspect-ratio: 4 / 3;
		}
	}

	.bm-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.bm-chip {
		font-family: var(--font-mono);
		font-size: 0.72rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		border: var(--border);
		border-radius: var(--radius-pill);
		padding: 0.5em 1.1em;
	}

	/* ---- Business Experience — overzichtstabel -------------------------------------- */
	.bm-be-compare {
		border-top: var(--border);
	}

	.bm-be-compare__row {
		display: grid;
		grid-template-columns: 3.5rem 1fr 13rem 11rem 6rem 2rem;
		gap: var(--space-2);
		align-items: center;
		padding: 1.15rem 0.75rem;
		border-bottom: var(--border);
		text-decoration: none;
		color: inherit;
		transition: background-color 0.2s var(--ease);
	}

	a.bm-be-compare__row:hover {
		background: rgb(237 231 221 / 5%);
	}

	.bm-be-compare__row--head {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
		padding-block: 0.85rem;
	}

	.bm-be-compare__num,
	.bm-be-compare__meta {
		font-family: var(--font-mono);
		font-size: 0.8rem;
		color: var(--c-muted);
	}

	.bm-be-compare__title {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem 0.75rem;
		font-size: 1.15rem;
		line-height: var(--lh-snug);
	}

	.bm-be-compare__price {
		font-family: var(--font-mono);
		font-size: 0.95rem;
		white-space: nowrap;
	}

	.bm-be-compare__go {
		font-family: var(--font-mono);
		font-size: 1.1rem;
		text-align: right;
		color: var(--c-muted);
		transition: transform 0.2s var(--ease), color 0.2s var(--ease);
	}

	a.bm-be-compare__row:hover .bm-be-compare__go {
		color: var(--c-text);
		transform: rotate(90deg);
	}

	@media (width <= 900px) {
		.bm-be-compare__row--head {
			display: none;
		}

		.bm-be-compare__row {
			grid-template-columns: 2.25rem 1fr auto;
			gap: 0.25rem var(--space-2);
			padding-inline: 0;
		}

		.bm-be-compare__title {
			grid-column: 2;
			grid-row: 1;
		}

		.bm-be-compare__price {
			grid-column: 3;
			grid-row: 1;
		}

		.bm-be-compare__meta {
			grid-column: 2 / 4;
			font-size: 0.72rem;
		}

		.bm-be-compare__meta::before {
			content: attr(data-label) " — ";
		}

		.bm-be-compare__go {
			display: none;
		}
	}

	.bm-be-note {
		margin-top: 1rem;
		font-family: var(--font-mono);
		font-size: 0.72rem;
		color: var(--c-muted);
	}

	.bm-be-badge {
		position: absolute;
		top: 1rem;
		left: 1rem;
		background: var(--c-text);
		color: var(--c-text-dark);
		font-family: var(--font-mono);
		font-size: 0.65rem;
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		border-radius: var(--radius-pill);
		padding: 0.5em 1em;
	}

	.bm-be-badge--inline {
		position: static;
		display: inline-block;
		background: var(--c-accent);
		font-size: 0.6rem;
		padding: 0.35em 0.85em;
	}

	/* ---- Business Experience — experience-kaarten ------------------------------------- */
	.bm-be-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--gutter);
	}

	@media (width <= 900px) {
		.bm-be-grid {
			grid-template-columns: 1fr;
		}
	}

	.bm-experience-card {
		display: flex;
		flex-direction: column;
		border: var(--border);
		border-radius: var(--radius-lg);
		overflow: hidden;
		background: var(--c-surface-dark);
		scroll-margin-top: 6rem;
	}

	.bm-experience-card__media {
		position: relative;
		aspect-ratio: 16 / 10;
		overflow: hidden;
	}

	.bm-experience-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bm-experience-card__body {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		padding: var(--space-3);
	}

	@media (width <= 600px) {
		.bm-experience-card__body {
			padding: var(--space-3) var(--space-2);
		}
	}

	.bm-experience-card__head {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--space-2);
	}

	.bm-experience-card__num {
		display: block;
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
		margin-bottom: 0.6rem;
	}

	.bm-experience-card__tagline {
		margin-top: 0.5rem;
		color: var(--c-accent);
	}

	.bm-experience-card__price {
		font-size: 1.85rem;
		line-height: 1;
		white-space: nowrap;
		text-align: right;
	}

	.bm-experience-card__price span {
		display: block;
		margin-top: 0.5rem;
		font-family: var(--font-mono);
		font-size: 0.62rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--c-muted);
	}

	.bm-experience-card__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.bm-experience-card__meta li {
		font-family: var(--font-mono);
		font-size: 0.72rem;
		border: var(--border);
		border-radius: var(--radius-pill);
		padding: 0.45em 1em;
	}

	.bm-experience-card__meta li span {
		color: var(--c-muted);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		margin-right: 0.6em;
	}

	.bm-experience-card__text {
		color: var(--c-muted);
		font-size: var(--fs-body-sm);
	}

	.bm-experience-card__text p + p {
		margin-top: 0.75rem;
	}

	.bm-experience-card__includes {
		border-top: var(--border);
		padding-top: 1.25rem;
	}

	.bm-checklist {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem 1.5rem;
		margin-top: 0.85rem;
	}

	@media (width <= 600px) {
		.bm-checklist {
			grid-template-columns: 1fr;
		}
	}

	.bm-checklist li {
		position: relative;
		padding-left: 1.35rem;
		font-size: var(--fs-body-sm);
		line-height: var(--lh-snug);
	}

	.bm-checklist li::before {
		content: "+";
		position: absolute;
		left: 0;
		font-family: var(--font-mono);
		color: var(--c-accent);
	}

	.bm-experience-card__fit {
		font-size: var(--fs-body-sm);
		color: var(--c-muted);
	}

	.bm-experience-card__fit span {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-accent);
	}

	.bm-experience-card__actions {
		margin-top: auto;
		padding-top: 0.5rem;
	}

	/* ---- Business Experience — uitbreidingen -------------------------------------------- */
	.bm-be-extra {
		display: grid;
		grid-template-columns: 1.2fr 0.8fr;
		gap: var(--space-4);
		align-items: center;
	}

	@media (width <= 900px) {
		.bm-be-extra {
			grid-template-columns: 1fr;
			gap: var(--space-3);
		}
	}

	.bm-be-extra h2 {
		margin-top: var(--space-2);
	}

	.bm-be-extra__intro {
		color: var(--c-muted);
		margin-top: 1rem;
		max-width: 48ch;
	}

	.bm-be-extra__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--space-3);
		margin-top: var(--space-3);
		border-top: var(--border);
	}

	@media (width <= 600px) {
		.bm-be-extra__list {
			grid-template-columns: 1fr;
		}
	}

	.bm-be-extra__list li {
		display: flex;
		align-items: baseline;
		gap: 0.85rem;
		padding-block: 1rem;
		border-bottom: var(--border);
		font-size: 1.1rem;
	}

	.bm-be-extra__num {
		font-family: var(--font-mono);
		font-size: 0.7rem;
		color: var(--c-muted);
	}

	.bm-be-extra__media {
		aspect-ratio: 4 / 5;
		border-radius: var(--radius-lg);
		overflow: hidden;
		border: var(--border);
	}

	.bm-be-extra__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	@media (width <= 900px) {
		.bm-be-extra__media {
			aspect-ratio: 4 / 3;
		}
	}

	/* ---- Business Experience — lounge & contact ------------------------------------------ */
	.bm-be-lounge__text {
		color: var(--c-muted);
		max-width: 52ch;
	}

	.bm-be-lounge__text p + p {
		margin-top: 1rem;
	}

	.bm-cta-split__content .bm-eyebrow {
		color: var(--c-muted-dark);
	}

	.bm-be-contact {
		border-bottom: var(--border-dark);
		margin-block: 0.5rem;
	}

	.bm-be-contact li {
		display: grid;
		grid-template-columns: 6rem 1fr;
		gap: var(--space-2);
		align-items: baseline;
		padding-block: 0.7rem;
		border-top: var(--border-dark);
	}

	.bm-be-contact span {
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted-dark);
	}

	.bm-be-contact a {
		text-underline-offset: 0.2em;
	}
}

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
@layer utilities {
	.bm-sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.bm-text-center {
		text-align: center;
	}

	.bm-mt-0 {
		margin-top: 0;
	}

	.bm-visually-hide {
		display: none;
	}

	/* Startstaat voor de scroll/load-reveals in assets/js/animations.js —
	   moet hier via CSS staan (niet pas via JS na DOMContentLoaded), anders
	   is de content eerst héél even zichtbaar en flikkert hij naar
	   onzichtbaar zodra het script de animatie initialiseert. Alleen actief
	   mét JS (html.js, geswitcht door een blocking script in header.php vóór
	   de eerste render) en zonder prefers-reduced-motion — zonder JS of met
	   reduced-motion blijft alles gewoon meteen zichtbaar.
	   Houd deze selectorlijst gelijk aan animations.js (singleSelectors +
	   groupSelector + .bm-hero__title span). */
	@media (prefers-reduced-motion: no-preference) {
		.js .bm-hero__title span,
		.js .bm-hero__text,
		.js .bm-hero__actions,
		.js .bm-eyebrow,
		.js .bm-section h1,
		.js .bm-section h2,
		.js .bm-visie__text,
		.js .bm-visie__photo,
		.js .bm-groei__content,
		.js .bm-groei__photo,
		.js .bm-quote,
		.js .bm-cta-split__content,
		.js .bm-cta-split__media,
		.js .bm-workshop-row,
		.js .bm-price-card,
		.js .bm-meta-bar,
		.js .bm-opleiding-body,
		.js .bm-docenten,
		.js .bm-contact-form,
		.js .bm-contact-media,
		.js .bm-contact-card,
		.js .bm-ruimte-hero,
		.js .bm-lessen-item,
		.js .bm-ruimte-card,
		.js .bm-opleiding-card,
		.js .bm-docent-card,
		.js .bm-info-card,
		.js .bm-be-hero__media,
		.js .bm-be-extra,
		.js .bm-be-compare__row,
		.js .bm-experience-card,
		.js .bm-impressie__item {
			opacity: 0;
		}
	}
}

/* Vangnet — bewust buiten @layer, zodat dit altijd wint van de hide-regel
   hierboven, ongeacht specificity. Zie de "bm-animations-fallback"-timeout
   in main.js: als animations.js niet (op tijd) laadt, wordt alles alsnog
   gewoon zichtbaar in plaats van voor altijd verborgen te blijven. */
html.bm-animations-fallback .bm-hero__title span,
html.bm-animations-fallback .bm-hero__text,
html.bm-animations-fallback .bm-hero__actions,
html.bm-animations-fallback .bm-eyebrow,
html.bm-animations-fallback .bm-section h1,
html.bm-animations-fallback .bm-section h2,
html.bm-animations-fallback .bm-visie__text,
html.bm-animations-fallback .bm-visie__photo,
html.bm-animations-fallback .bm-groei__content,
html.bm-animations-fallback .bm-groei__photo,
html.bm-animations-fallback .bm-quote,
html.bm-animations-fallback .bm-cta-split__content,
html.bm-animations-fallback .bm-cta-split__media,
html.bm-animations-fallback .bm-workshop-row,
html.bm-animations-fallback .bm-price-card,
html.bm-animations-fallback .bm-meta-bar,
html.bm-animations-fallback .bm-opleiding-body,
html.bm-animations-fallback .bm-docenten,
html.bm-animations-fallback .bm-contact-form,
html.bm-animations-fallback .bm-contact-media,
html.bm-animations-fallback .bm-contact-card,
html.bm-animations-fallback .bm-ruimte-hero,
html.bm-animations-fallback .bm-lessen-item,
html.bm-animations-fallback .bm-ruimte-card,
html.bm-animations-fallback .bm-opleiding-card,
html.bm-animations-fallback .bm-docent-card,
html.bm-animations-fallback .bm-info-card,
html.bm-animations-fallback .bm-be-hero__media,
html.bm-animations-fallback .bm-be-extra,
html.bm-animations-fallback .bm-be-compare__row,
html.bm-animations-fallback .bm-experience-card,
html.bm-animations-fallback .bm-impressie__item {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Yogibit-rooster in BodyMind-huisstijl (page-rooster.php).
   Bewust buiten @layer: de widget-CSS van Yogibit is unlayered en zou
   anders altijd winnen, ongeacht specificity. 'body' ervoor omdat
   rooster.css ná main.css laadt met exact dezelfde selectors. Alleen uiterlijk — de
   layout/positionering van de widget blijft van Yogibit.
   ========================================================================== */
body #sportbit-rooster .embed-rooster,
body #sportbit-rooster .embed-rooster * {
	font-family: var(--font-mono);
}

/* Navigatie: Deze week / periode / weekpijlen */
body #sportbit-rooster .embed-rooster .top .today a,
body #sportbit-rooster .embed-rooster .top .week a {
	background: var(--c-text-dark);
	color: var(--c-text);
	text-decoration: none;
	transition: opacity 0.2s var(--ease);
}

body #sportbit-rooster .embed-rooster .top .today a {
	border-radius: var(--radius-pill);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.85em 1.6em;
}

body #sportbit-rooster .embed-rooster .top .week a.inactive {
	opacity: 0.35;
}

body #sportbit-rooster .embed-rooster .top .period {
	background: var(--c-text);
	border-radius: var(--radius-pill);
}

body #sportbit-rooster .embed-rooster .top .period span {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	color: var(--c-text-dark);
}

body #sportbit-rooster .embed-rooster .top .week span {
	font-size: 0.72rem;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-muted-dark);
}

/* Dagkoppen */
body #sportbit-rooster .embed-rooster .days > div span.day-name {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	color: var(--c-text-dark);
}

body #sportbit-rooster .embed-rooster .days > div span.day-month {
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-muted-dark);
}

/* Dagdeel-labels (Ochtend / Middag / Avond) */
body #sportbit-rooster .embed-rooster .calendar .sepparator {
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-muted-dark);
}

/* Lessen: crème kaartjes met afgeronde hoeken; de gekleurde linkerrand
   (lescategorie) van Yogibit blijft staan. */
body #sportbit-rooster .embed-rooster .calendar .items-day div.evtitem {
	background: var(--c-text);
	border-radius: 10px;
	border-left-width: 4px;
	padding: 0.7rem 0.75rem 1.4rem; /* onderin ruimte voor Yogibit's deelnemersteller */
	box-shadow: 0 1px 0 rgb(42 35 32 / 8%);
	cursor: pointer;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

body #sportbit-rooster .embed-rooster .calendar .items-day div.evtitem:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgb(42 35 32 / 15%);
}

body #sportbit-rooster .embed-rooster .calendar .items-day div.evtitem span.title {
	font-family: var(--font-serif);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--c-text-dark);
	white-space: normal;
	width: auto;
}

body #sportbit-rooster .embed-rooster .calendar .items-day div.evtitem span.time {
	margin-top: 0.3rem;
	font-size: 0.72rem;
	color: var(--c-text-dark);
}

body #sportbit-rooster .embed-rooster .calendar .items-day div.evtitem span.trainer {
	font-size: 0.68rem;
	color: var(--c-muted-dark);
}

/* Voorbije lessen/dagen rustiger */
body #sportbit-rooster .embed-rooster .calendar .items-day div.evtitem.gepasseerd,
body #sportbit-rooster .embed-rooster .calendar .items-day.gepasseerd div.evtitem {
	opacity: 0.45;
	box-shadow: none;
}

/* Detail-popup + laad-indicator in merkkleur i.p.v. Yogibit-paars */
body #sportbit-popup .window .btn {
	background-color: var(--c-text-dark);
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

body .lds-dual-ring:after {
	border-color: var(--c-text-dark) transparent var(--c-text-dark) transparent !important;
}

/* Mobiel: Yogibit verbergt voorbije lessen, maar het lege dagdeel bleef
   50px + marge innemen — klap dagdelen zonder komende lessen in. */
@media screen and (max-width: 750px) {
	body #sportbit-rooster .embed-rooster .calendar .items-day > div:not(:has(div.evtitem:not(.gepasseerd))) {
		display: none;
	}

	body #sportbit-rooster .embed-rooster .calendar .items-day > div {
		margin-bottom: 0.75rem;
	}

	body #sportbit-rooster .embed-rooster .calendar .items-day {
		margin-bottom: 1.5rem;
	}
}