/*
 * LUMI Health & Beauty, publieke stylesheet.
 *
 * Plain CSS, geen buildstap. Opbouw:
 *  1. Tokens en reset
 *  2. Basistypografie
 *  3. Layout: container, secties, kopblokken
 *  4. Componenten uit het designsysteem (1-op-1 uit de React-site)
 *  5. Header en footer
 *  6. Pagina-onderdelen
 *  7. Beweging en toegankelijkheid
 *
 * De boekingswidget heeft een eigen stylesheet: assets/css/widget.css.
 */

/* =========================================================================
 * 1. Tokens
 * ====================================================================== */

:root {
	--radius: 0.25rem;

	/* Merkkleuren, exact uit Figma */
	--walnut: #473A30;
	--walnut-dark: #382E25;
	--gold: #C9A46C;
	--gold-hover: #B8915C;
	--cream: #F7F1E5;
	--cream-alt: #ECE4D5;
	--walnut-muted: #6B5D52;
	--walnut-soft: #918379;
	--terracotta: #B87A55;

	--font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Lato", system-ui, sans-serif;

	/* Afgeleide waarden die op veel plekken terugkomen */
	--lijn: rgba(72, 60, 46, 0.10);
	--lijn-sterk: rgba(72, 60, 46, 0.18);
	--goud-lijn: rgba(200, 169, 110, 0.30);
	--cream-zacht: rgba(247, 241, 232, 0.75);
	--cream-tekst: rgba(247, 241, 232, 0.90);
	--overlay-hero: linear-gradient(180deg, rgba(40, 33, 26, 0.70) 0%, rgba(40, 33, 26, 0.74) 50%, rgba(40, 33, 26, 0.88) 100%);
	--soepel: cubic-bezier(0.16, 1, 0.3, 1);

	--container: 1280px;
	--container-pad: 24px;
	--sectie-pad: 60px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var(--lijn);
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--cream);
	color: var(--walnut);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

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

/* =========================================================================
 * 2. Basistypografie
 * ====================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--walnut);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.1;
	margin: 0;
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
}

.lumi-icon {
	flex-shrink: 0;
}

.lumi-visueel-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Doorlopende basisstijl voor tekst uit de WordPress-editor. */
.lumi-tekst > * + * {
	margin-top: 1.1em;
}
.lumi-tekst {
	color: var(--walnut-muted);
	font-size: 16px;
	line-height: 1.75;
}
.lumi-tekst h2,
.lumi-tekst h3,
.lumi-tekst h4 {
	color: var(--walnut);
	font-weight: 500;
	margin-top: 1.6em;
}
.lumi-tekst h2 { font-size: 30px; }
.lumi-tekst h3 { font-size: 24px; }
.lumi-tekst h4 { font-size: 20px; }
.lumi-tekst a {
	color: var(--walnut);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--gold);
}
.lumi-tekst ul,
.lumi-tekst ol {
	padding-left: 1.2em;
}
.lumi-tekst li + li {
	margin-top: 0.5em;
}
.lumi-tekst blockquote {
	margin: 0;
	padding-left: 20px;
	border-left: 2px solid var(--gold);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 20px;
	color: var(--walnut);
}

/* =========================================================================
 * 3. Layout
 * ====================================================================== */

.lumi-container {
	width: 100%;
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

.lumi-container--xs { max-width: 720px; }
.lumi-container--sm { max-width: 780px; }
.lumi-container--md { max-width: 900px; }
.lumi-container--lg { max-width: 1080px; }
.lumi-container--xl { max-width: 1200px; }

.lumi-section {
	padding-top: var(--sectie-pad);
	padding-bottom: var(--sectie-pad);
}
.lumi-section--cream { background-color: var(--cream); }
.lumi-section--cream-alt { background-color: var(--cream-alt); }
.lumi-section--walnut { background-color: var(--walnut); color: var(--cream); }
.lumi-section--wit { background-color: #fff; }
.lumi-section--relatief { position: relative; overflow: hidden; }

/* Kopblok boven een sectie: label, titel, ondertitel. */
.lumi-kop {
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}
.lumi-kop--breed { max-width: 780px; }
.lumi-kop--links {
	text-align: left;
	margin-left: 0;
}
.lumi-kop__titel {
	margin-top: 16px;
	font-weight: 500;
	font-size: clamp(32px, 4.5vw, 48px);
	line-height: 1.1;
}
.lumi-kop__titel--md { font-size: clamp(28px, 3.8vw, 42px); }
.lumi-kop__titel--sm { font-size: clamp(26px, 3.4vw, 38px); }
.lumi-kop__tekst {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--walnut-muted);
}
.lumi-kop__tekst--cursief {
	margin-top: 12px;
	font-style: italic;
	font-size: 14px;
}
.lumi-section--walnut .lumi-kop__titel,
.lumi-section--walnut .lumi-kop__tekst {
	color: var(--cream);
}
.lumi-section--walnut .lumi-kop__tekst {
	color: var(--cream-tekst);
}

.lumi-kop__marge {
	margin-bottom: 48px;
}
.lumi-kop__marge--ruim {
	margin-bottom: 56px;
}

/* Herbruikbare hulpklassen. */
.lumi-midden { text-align: center; }
.lumi-mt-2 { margin-top: 8px; }
.lumi-mt-3 { margin-top: 12px; }
.lumi-mt-4 { margin-top: 16px; }
.lumi-mt-6 { margin-top: 24px; }
.lumi-mt-8 { margin-top: 32px; }
.lumi-mt-10 { margin-top: 40px; }
.lumi-mt-12 { margin-top: 48px; }
.lumi-lijn-60 { width: 60px; }
.lumi-lijn-40 { width: 40px; }
.lumi-lijn-32 { width: 32px; }
.lumi-lijn-midden { margin-left: auto; margin-right: auto; }

/* =========================================================================
 * 4. Componenten uit het designsysteem
 * ====================================================================== */

/* Formuliervelden (ook gebruikt in de boekingsflow). */
.lumi-input {
	width: 100%;
	background: #fff;
	border: 1px solid rgba(72, 60, 46, 0.15);
	border-radius: 4px;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--walnut);
	outline: none;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.lumi-input:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 2px rgba(201, 164, 108, 0.15);
}

/* Sectielabel: het gouden pilletje boven een kop. */
.lumi-label,
/* Alleen een klein gouden regeltje. Geen kader, geen vulling, geen bolletje:
   de kop eronder moet de aandacht krijgen. */
.lumi-section-label {
	display: block;
	margin-bottom: 14px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	line-height: 1.2;
}

/* Cursieve, omlijnde cijfers. */
.lumi-numeral {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 64px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(200, 169, 110, 0.45);
}
.lumi-numeral-lg {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 88px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(200, 169, 110, 0.55);
}

/* Actiekaart (de drie hoofdacties op de homepage). */
.lumi-action-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(72, 60, 46, 0.10);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(72, 60, 46, 0.04);
	transition: transform 400ms var(--soepel),
		box-shadow 400ms var(--soepel),
		border-color 400ms var(--soepel);
	will-change: transform;
}
.lumi-action-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(72, 60, 46, 0.10);
	border-color: rgba(200, 169, 110, 0.4);
}
/* Foto bovenaan de kaart. height: auto is nodig omdat WordPress een
   height-attribuut op de afbeelding zet dat aspect-ratio anders overrulet. */
.lumi-actie__media {
	display: block;
	overflow: hidden;
	background-color: var(--cream-alt);
}
.lumi-actie__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 700ms var(--soepel);
}
.lumi-action-card:hover .lumi-actie__foto { transform: scale(1.04); }
.lumi-actie__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 30px 30px 32px;
}
.lumi-actie__voet { margin-top: auto; padding-top: 24px; }

.lumi-action-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	background: transparent;
	border: 1.5px solid var(--walnut);
	color: var(--walnut);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: none;
	border-radius: 999px;
	transition: all 0.25s ease;
}
.lumi-action-card:hover .lumi-action-cta {
	background-color: var(--walnut);
	color: var(--cream);
}

/* Behandelkaart met foto bovenaan. */
.lumi-treat-card {
	background-color: var(--cream);
	border: 1px solid rgba(72, 60, 46, 0.10);
	border-radius: 4px;
	overflow: hidden;
	min-height: 560px;
	transition: transform 400ms var(--soepel), box-shadow 400ms var(--soepel);
}
.lumi-treat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.lumi-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	background: rgba(72, 60, 46, 0.05);
	border: 1px solid rgba(72, 60, 46, 0.15);
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--walnut);
	line-height: 1;
}
.lumi-cat-pill__dot {
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background-color: var(--walnut);
	display: inline-block;
}
.lumi-arrow-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background-color: var(--cream);
	border: 1px solid rgba(200, 169, 110, 0.3);
	color: var(--gold);
	transition: all 300ms ease;
}
.lumi-treat-card:hover .lumi-arrow-circle,
.lumi-weg-card:hover .lumi-arrow-circle {
	background-color: var(--gold);
	color: #ffffff;
	transform: translateX(4px);
	border-color: var(--gold);
}

/* Gouden haarlijn. */
.lumi-hairline {
	height: 1px;
	background-color: var(--gold);
}

/* Museumhoekje bij galerij-hover. */
.lumi-corner {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 16px;
	height: 16px;
	border-top: 1.5px solid var(--gold);
	border-left: 1.5px solid var(--gold);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.group:hover .lumi-corner { opacity: 1; }

/* Witte pilknop. */
.lumi-pill-white {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	background-color: #fff;
	color: var(--walnut);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: none;
	border-radius: 999px;
	transition: all 0.3s ease;
}
.group:hover .lumi-pill-white {
	background-color: var(--gold);
	color: var(--walnut);
}

/* Grote pilknoppen. */
.btn-pill-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 32px;
	background-color: var(--gold);
	color: var(--walnut);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-transform: none;
	border-radius: 999px;
	transition: all 0.25s ease;
	cursor: pointer;
	min-height: 48px;
}
.btn-pill-primary:hover {
	background-color: var(--gold-hover);
	transform: translateY(-1px);
}
.btn-pill-outline-light {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 32px;
	background: transparent;
	border: 1.5px solid var(--cream);
	color: var(--cream);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-transform: none;
	border-radius: 999px;
	transition: all 0.25s ease;
	cursor: pointer;
	min-height: 48px;
}
.btn-pill-outline-light:hover {
	background-color: var(--cream);
	color: var(--walnut);
}

/* Standaardknoppen. */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	background-color: var(--gold);
	color: var(--walnut);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-transform: none;
	border-radius: 999px;
	transition: all 0.25s ease;
	cursor: pointer;
	min-height: 44px;
	will-change: transform;
}
.btn-primary:hover {
	background-color: var(--gold-hover);
	transform: translateY(-1px);
}

.btn-outline-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	background: transparent;
	border: 1.5px solid var(--walnut);
	color: var(--walnut);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-transform: none;
	border-radius: 999px;
	transition: all 0.25s ease;
	cursor: pointer;
	min-height: 44px;
}
.btn-outline-dark:hover {
	background-color: var(--walnut);
	color: var(--cream);
}

.btn-outline-light {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	background: transparent;
	border: 1.5px solid var(--cream);
	color: var(--cream);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-transform: none;
	border-radius: 999px;
	transition: all 0.25s ease;
	cursor: pointer;
	min-height: 44px;
}
.btn-outline-light:hover {
	background-color: var(--cream);
	color: var(--walnut);
}

/* Knop over de volle breedte, handig op mobiel. */
.lumi-knop-vol { width: 100%; }

.lumi-card {
	background-color: #fff;
	border: 1px solid oklch(0.36 0.025 60 / 0.08);
	border-radius: 4px;
	box-shadow: 0 2px 24px oklch(0.36 0.025 60 / 0.04);
	transition: all 0.35s var(--soepel);
	will-change: transform;
}
.lumi-card:hover {
	box-shadow: 0 8px 32px oklch(0.36 0.025 60 / 0.10);
	border-color: oklch(0.36 0.025 60 / 0.15);
	transform: translateY(-4px);
}

.lumi-large-card {
	min-height: 400px;
	aspect-ratio: 3 / 4;
}

.lumi-pill-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	background-color: #fff;
	color: var(--walnut);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	border-radius: 999px;
	transition: all 0.25s ease;
}
.group:hover .lumi-pill-btn {
	background-color: var(--gold);
	color: var(--walnut);
}

/* Logo crèmekleurig maken op donkere vlakken. */
.logo-cream {
	filter: invert(93%) sepia(13%) saturate(350%) hue-rotate(15deg) brightness(100%) contrast(95%);
}

/* Scroll-reveal. */
/* De scroll-animatie is een extraatje, geen voorwaarde. Zonder JavaScript
   staat alles gewoon zichtbaar op de pagina: de klasse lumi-js wordt pas
   gezet als er echt JavaScript draait. */
.lumi-js .reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s var(--soepel), transform 0.8s var(--soepel);
	will-change: transform, opacity;
}
.lumi-js .reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Sterrenrijtje. */
.lumi-sterren {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--gold);
}
.lumi-sterren svg {
	fill: var(--gold);
	stroke: var(--gold);
}

/* Tekstlink met pijltje. */
.lumi-tekstlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--gold);
	transition: gap 0.3s ease;
}
.lumi-tekstlink:hover { gap: 14px; }

/* Vinkjesrij onder een CTA. */
.lumi-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	font-size: 14px;
	color: var(--walnut-muted);
}
.lumi-checks span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.lumi-checks svg { color: var(--gold); }

/* =========================================================================
 * 5. Header en footer
 * ====================================================================== */

.lumi-header {
	position: sticky;
	top: 0;
	z-index: 50;
	width: 100%;
	background-color: var(--walnut);
	color: var(--cream);
	border-bottom: 1px solid rgba(247, 241, 232, 0.08);
	box-shadow: none;
	transition: box-shadow 0.3s ease;
}
.lumi-header.is-scrolled {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.lumi-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}
.lumi-header__logo {
	display: flex;
	align-items: center;
}
.lumi-header__logo img {
	height: 36px;
	width: auto;
}
.lumi-nav {
	display: none;
	align-items: center;
	gap: 40px;
}
.lumi-nav__link {
	position: relative;
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--cream);
	transition: color 0.25s ease;
}
.lumi-nav__link:hover { color: var(--gold); }
.lumi-nav__link.is-active { color: var(--gold); }
.lumi-nav__link.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 1px;
	background-color: var(--gold);
}
.lumi-header__cta {
	display: none;
	padding: 12px 24px;
}
.lumi-hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cream);
	margin-right: -10px;
}

/* Mobiele drawer, dezelfde animatie als in de React-navbar. */
.lumi-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	background-color: var(--walnut);
	color: var(--cream);
	transform: translateX(100%);
	transition: transform 400ms ease-out;
	visibility: hidden;
}
.lumi-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}
.lumi-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	padding: 0 24px;
}
.lumi-drawer__top img {
	height: 36px;
	width: auto;
}
.lumi-drawer__sluit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cream);
	margin-right: -10px;
}
.lumi-drawer__nav {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 48px 32px 0;
}
.lumi-drawer__nav a {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	color: var(--cream);
	transition: color 0.25s ease;
}
.lumi-drawer__nav a:hover,
.lumi-drawer__nav a.is-active { color: var(--gold); }
.lumi-drawer__voet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	padding: 0 32px;
}
.lumi-drawer__voet .btn-primary { width: 100%; }

body.lumi-menu-open {
	overflow: hidden;
}

/* Footer. */
.lumi-footer {
	background-color: var(--walnut);
	color: var(--cream);
}
.lumi-footer__inner {
	padding-top: 80px;
	padding-bottom: 40px;
}
.lumi-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}
.lumi-footer__logo {
	width: 120px;
	height: auto;
}
.lumi-footer__tagline {
	margin-top: 24px;
	max-width: 260px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--cream-zacht);
}
.lumi-footer__socials {
	margin-top: 32px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.lumi-footer__socials a {
	color: var(--cream);
	transition: color 0.25s ease;
}
.lumi-footer__socials a:hover { color: var(--gold); }
.lumi-footer__kop {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--gold);
	margin: 0;
}
.lumi-footer__lijst {
	margin-top: 24px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.lumi-footer__lijst a {
	font-size: 14px;
	color: var(--cream-zacht);
	transition: color 0.25s ease;
}
.lumi-footer__lijst a:hover { color: var(--gold); }
.lumi-footer__contact {
	margin-top: 24px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
	color: var(--cream-zacht);
}
.lumi-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.lumi-footer__contact svg {
	margin-top: 3px;
	color: var(--gold);
}
.lumi-footer__contact a:hover { color: var(--gold); }
.lumi-footer__uren {
	margin-top: 24px;
	padding-left: 16px;
	border-left: 2px solid var(--gold);
	font-size: 14px;
	line-height: 1.8;
	color: var(--cream-zacht);
}
.lumi-footer__uren-kop {
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--gold);
}
.lumi-footer__bottom {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid rgba(200, 169, 110, 0.20);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	font-size: 13px;
	color: rgba(247, 241, 232, 0.6);
}
.lumi-footer__bottom a { transition: color 0.25s ease; }
.lumi-footer__bottom a:hover { color: var(--gold); }
.lumi-footer__bottom-links {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* =========================================================================
 * 6. Pagina-onderdelen
 * ====================================================================== */

/* ---- Hero met achtergrondfoto en gradient ---- */
.lumi-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 520px;
	color: var(--cream);
	text-align: center;
}
.lumi-hero--home { min-height: 70vh; }
.lumi-hero--compact { min-height: 420px; }
.lumi-hero--midden { min-height: 460px; }
.lumi-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lumi-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--overlay-hero);
}
.lumi-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 72px var(--container-pad);
}
.lumi-hero--home .lumi-hero__inner {
	max-width: 860px;
	padding-top: 88px;
	padding-bottom: 88px;
}
.lumi-hero__kruimel {
	font-size: 13px;
	color: rgba(247, 241, 232, 0.7);
}
.lumi-hero__kruimel a { transition: color 0.25s ease; }
.lumi-hero__kruimel a:hover { color: var(--cream); }
.lumi-hero__kruimel span { color: var(--cream); }
.lumi-hero__kruimel-scheiding { margin: 0 8px; color: rgba(247, 241, 232, 0.7); }
.lumi-hero__label { display: block; margin-top: 24px; }
.lumi-hero--home .lumi-hero__label { margin-top: 0; margin-bottom: 32px; }
.lumi-hero__titel {
	margin-top: 18px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--cream);
}
.lumi-hero--home .lumi-hero__titel {
	margin-top: 0;
	margin-bottom: 24px;
	font-size: clamp(40px, 5.2vw, 62px);
	line-height: 1.08;
	letter-spacing: -0.022em;
	text-shadow: 0 2px 28px rgba(40, 33, 25, 0.45);
}
.lumi-hero__tekst {
	margin: 18px auto 0;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--cream-tekst);
}
.lumi-hero--home .lumi-hero__tekst {
	margin-top: 0;
	margin-bottom: 40px;
	max-width: 540px;
	color: rgba(247, 241, 232, 0.92);
}
.lumi-hero__tekst--cursief { font-style: italic; }
.lumi-hero__acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.lumi-hero__meta {
	margin-top: 36px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 14px;
	color: var(--cream);
}
.lumi-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.lumi-hero__meta-streep {
	display: none;
	width: 1px;
	height: 16px;
	background-color: rgba(247, 241, 232, 0.3);
}
.lumi-hero__gift {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: var(--gold);
}
.lumi-hero__scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	display: none;
	flex-direction: column;
	align-items: center;
	opacity: 0.55;
	color: rgba(247, 241, 232, 0.9);
}
.lumi-hero__scroll span {
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
.lumi-hero__scroll svg { margin-top: 12px; }

/* Eenvoudige pagina-hero zonder foto (page.php, 404, zoeken). */
.lumi-hero--effen {
	min-height: 0;
	background-color: var(--walnut);
	padding: 72px 0 64px;
}
.lumi-hero--effen .lumi-hero__inner { padding-top: 0; padding-bottom: 0; }

/* ---- Vertrouwensbalk onder de home-hero ---- */
.lumi-trust {
	width: 100%;
	background-color: var(--cream);
	border-bottom: 1px solid rgba(72, 60, 46, 0.08);
}
.lumi-trust__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 40px;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 14px;
	color: var(--walnut-muted);
}
.lumi-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.lumi-trust__item svg { color: var(--gold); }
.lumi-trust__streep {
	display: none;
	width: 1px;
	height: 12px;
	background-color: var(--lijn-sterk);
}

/* ---- Drie hoofdacties ---- */
.lumi-acties {
	margin-top: 64px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: stretch;
}
/* De kaart lijnt links uit. Gecentreerde tekst onder een foto leest slechter
   en geeft de pagina dat uniforme, gegenereerde uiterlijk. */
.lumi-actie { height: 100%; text-align: left; }
.lumi-actie__titel {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--walnut);
}
.lumi-actie__tekst {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--walnut-muted);
}

/* ---- Over Lumi (homepage) ---- */
.lumi-over {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 64px;
}
.lumi-over__media {
	position: relative;
	display: flex;
	justify-content: center;
	order: 1;
}
.lumi-over__cirkel {
	pointer-events: none;
	position: absolute;
	width: 84%;
	aspect-ratio: 1 / 1;
	border-radius: 9999px;
	background-color: var(--cream);
	top: -4%;
	right: 2%;
}
.lumi-over__foto {
	position: relative;
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 24px 48px rgba(72, 60, 46, 0.12);
}
.lumi-over__kaart {
	order: 2;
	max-width: 520px;
	background-color: var(--cream);
	border-radius: 20px;
	padding: clamp(28px, 4vw, 48px);
	box-shadow: 0 18px 50px rgba(72, 60, 46, 0.08);
	border: 1px solid rgba(72, 60, 46, 0.06);
}
.lumi-over__titel {
	margin-top: 16px;
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 500;
	line-height: 1.1;
}
.lumi-over__tekst {
	margin-top: 32px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--walnut-muted);
}
.lumi-over__tekst + .lumi-over__tekst { margin-top: 20px; }
.lumi-over__sig {
	margin-top: 40px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.lumi-over__sig-icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background-color: var(--cream-alt);
	border: 1px solid var(--gold);
	color: var(--gold);
	flex-shrink: 0;
}
.lumi-over__sig-naam {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 26px;
	font-weight: 600;
	color: var(--walnut);
	line-height: 1.2;
}
.lumi-over__sig-rol {
	font-size: 14px;
	color: var(--walnut-soft);
}
.lumi-over__stats {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	font-size: 13px;
	color: var(--walnut-muted);
}
.lumi-over__stats i {
	font-style: normal;
	color: var(--walnut-soft);
}

/* ---- Behandelingen-grid (homepage) ---- */
.lumi-treat-grid {
	margin-top: 64px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.lumi-treat-card {
	display: flex;
	flex-direction: column;
}
.lumi-treat-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.lumi-treat-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms ease-out;
}
.lumi-treat-card:hover .lumi-treat-card__media img {
	transform: scale(1.04);
}
.lumi-treat-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 36px 32px 40px;
}
.lumi-treat-card__titel {
	margin-top: 16px;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--walnut);
}
.lumi-treat-card__tekst {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--walnut-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lumi-treat-card__lijn {
	width: 40px;
	margin: 16px 0;
}
.lumi-treat-card__voet {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.lumi-treat-card__prijs {
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--walnut);
}

/* ---- Scheidingsstrip tussen twee secties ---- */
.lumi-divider {
	display: flex;
	width: 100%;
	height: 80px;
	align-items: center;
	justify-content: center;
	background-color: var(--cream);
}
.lumi-divider__stapel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.lumi-divider__punt {
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background-color: var(--gold);
}
.lumi-divider__lijn {
	width: 1px;
	height: 40px;
	background-color: var(--gold);
}

/* ---- Spotlight met halve foto ---- */
.lumi-spotlight {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	min-height: 540px;
	background-color: var(--cream);
}
.lumi-spotlight__media {
	position: relative;
	height: 288px;
	overflow: hidden;
}
.lumi-spotlight__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lumi-spotlight__tekst {
	position: relative;
	display: flex;
	align-items: center;
	padding: 60px 32px;
	background-color: var(--cream);
}
.lumi-spotlight__inner { max-width: 480px; }
.lumi-spotlight__titel {
	margin-top: 16px;
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 500;
	line-height: 1.1;
}
.lumi-spotlight__body {
	margin-top: 28px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--walnut-muted);
}

/* ---- Waarom Lumi ---- */
.lumi-usps {
	margin-top: 64px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 64px 80px;
}
.lumi-usp { text-align: center; }
.lumi-usp .lumi-numeral { display: block; }
.lumi-usp__titel {
	margin-top: 16px;
	font-size: 26px;
	font-weight: 500;
	color: var(--walnut);
}
.lumi-usp__tekst {
	margin: 16px auto 0;
	max-width: 360px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--walnut-muted);
}

/* ---- Cadeaubon-strip op de homepage ---- */
.lumi-cadeaustrip {
	min-height: 380px;
}
.lumi-cadeaustrip__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
.lumi-cadeaustrip__lijn {
	display: block;
	width: 60px;
	height: 1px;
	background-color: var(--gold);
	opacity: 0.4;
}
.lumi-cadeaustrip__icoon {
	margin-top: 40px;
	color: var(--gold);
}
.lumi-cadeaustrip__titel {
	margin-top: 20px;
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	color: var(--cream);
}
.lumi-cadeaustrip__titel em { font-style: italic; }
.lumi-cadeaustrip__tekst {
	margin-top: 20px;
	max-width: 520px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(247, 241, 232, 0.85);
}
.lumi-cadeaustrip__acties {
	margin-top: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.lumi-cadeaustrip__link {
	font-size: 14px;
	font-style: italic;
	color: rgba(247, 241, 232, 0.6);
	transition: color 0.25s ease;
}
.lumi-cadeaustrip__link:hover { color: rgba(247, 241, 232, 1); }

/* ---- Sfeergalerij ---- */
.lumi-galerij {
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.lumi-galerij__item {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}
.lumi-galerij__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms ease;
}
.lumi-galerij__item:hover img { transform: scale(1.03); }
.lumi-galerij__frame {
	pointer-events: none;
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(247, 241, 232, 0.6);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.lumi-galerij__item:hover .lumi-galerij__frame { opacity: 1; }
.lumi-galerij__item:hover .lumi-corner { opacity: 1; }
.lumi-galerij__item--1 { aspect-ratio: 4 / 5; }
.lumi-galerij__item--2 { aspect-ratio: 16 / 10; }
.lumi-galerij__item--3 { aspect-ratio: 3 / 4; }
.lumi-galerij__item--4 { aspect-ratio: 16 / 9; }
.lumi-galerij__item--5 { aspect-ratio: 1 / 1; }

.lumi-bijschrift {
	margin-top: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-style: italic;
	font-size: 13px;
	color: var(--walnut-muted);
}
.lumi-bijschrift__lijn {
	display: none;
	width: 60px;
	height: 1px;
	background-color: var(--gold);
}
.lumi-bijschrift--goud {
	font-style: normal;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}
.lumi-bijschrift--goud .lumi-bijschrift__lijn { display: block; }

/* ---- Reviews ---- */
.lumi-reviews {
	margin-top: 64px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.lumi-review-groot {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(72, 60, 46, 0.10);
	border-radius: 4px;
	padding: 48px;
}
.lumi-review-groot__quote-teken {
	position: absolute;
	top: 24px;
	right: 28px;
	font-family: var(--font-display);
	font-size: 120px;
	line-height: 0.8;
	color: var(--gold);
	opacity: 0.25;
}
.lumi-review-groot__quote {
	position: relative;
	margin-top: 24px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--walnut);
}
.lumi-review-groot__naam {
	margin-top: 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--walnut);
}
.lumi-review-groot__plaats {
	margin-top: 4px;
	font-size: 13px;
	font-style: italic;
	color: var(--walnut-muted);
}
.lumi-reviews__stapel {
	display: grid;
	gap: 16px;
}
.lumi-review-klein {
	background: #fff;
	border: 1px solid rgba(72, 60, 46, 0.12);
	border-radius: 4px;
	padding: 28px;
}
.lumi-review-klein__quote {
	margin-top: 16px;
	font-style: italic;
	font-size: 16px;
	line-height: 1.6;
	color: var(--walnut);
}
.lumi-review-klein__naam {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--walnut);
}
.lumi-review-klein__plaats {
	margin-top: 4px;
	font-size: 12px;
	font-style: italic;
	color: var(--walnut-muted);
}

/* Reviews op donkere achtergrond (subpagina's). */
.lumi-reviews-donker {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.lumi-review-donker {
	background: rgba(247, 241, 232, 0.04);
	border: 1px solid rgba(247, 241, 232, 0.10);
	border-radius: 4px;
	padding: 32px 28px;
}
.lumi-review-donker__quote {
	margin-top: 16px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--cream);
}
.lumi-review-donker__naam {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cream);
}
.lumi-review-donker__plaats {
	margin-top: 2px;
	font-size: 12px;
	font-style: italic;
	color: rgba(247, 241, 232, 0.6);
}
.lumi-notitie-licht {
	margin-top: 12px;
	font-size: 12px;
	font-style: italic;
	color: rgba(247, 241, 232, 0.6);
}

/* ---- Regio ---- */
.lumi-regio-lijn {
	pointer-events: none;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 55%;
	width: 100%;
	max-width: 1100px;
	height: 60px;
	opacity: 0.3;
}
.lumi-regio-pillen {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.lumi-regio-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 24px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	border: 1px solid rgba(72, 60, 46, 0.12);
	border-radius: 999px;
	color: var(--walnut);
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(72, 60, 46, 0.05);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.lumi-regio-pill svg { color: var(--gold); }
.lumi-regio-pill:hover {
	border-color: rgba(200, 169, 110, 0.4);
	background-color: rgba(200, 169, 110, 0.08);
}
.lumi-regio-usps {
	margin-top: 48px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 40px;
	font-size: 13px;
	color: var(--walnut-muted);
}
.lumi-regio-usps span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.lumi-regio-usps svg { color: var(--gold); }

/* Regio-pillen zonder icoon (contactpagina). */
.lumi-regio-tags {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.lumi-regio-tags span {
	background: #fff;
	border: 1px solid rgba(72, 60, 46, 0.15);
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--walnut);
}

/* ---- FAQ-accordeon ---- */
.lumi-faq { margin-top: 56px; }
.lumi-faq__item {
	display: flex;
	align-items: flex-start;
	gap: 0;
	border-bottom: 1px solid rgba(72, 60, 46, 0.10);
}
.lumi-faq__nummer {
	display: none;
	flex-shrink: 0;
	justify-content: flex-end;
	width: 72px;
	padding-top: 26px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 32px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(200, 169, 110, 0.55);
}
.lumi-faq__body { flex: 1; min-width: 0; }
.lumi-faq__knop {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 0;
	text-align: left;
}
.lumi-faq__vraag {
	font-family: var(--font-display);
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--walnut);
}
.lumi-faq__teken {
	flex-shrink: 0;
	color: var(--gold);
	transition: transform 300ms ease;
}
.lumi-faq__item.is-open .lumi-faq__teken { transform: rotate(45deg); }
.lumi-faq__antwoord {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 350ms var(--soepel), opacity 300ms ease;
}
.lumi-faq__item.is-open .lumi-faq__antwoord {
	max-height: 600px;
	opacity: 1;
}
.lumi-faq__antwoord p {
	padding-bottom: 24px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--walnut-muted);
}

/* FAQ met rond plusje (contact en cadeaubonnen). */
.lumi-faq--rond .lumi-faq__item {
	border-bottom: 1px solid rgba(72, 60, 46, 0.12);
}
.lumi-faq--rond .lumi-faq__item:first-child {
	border-top: 1px solid rgba(72, 60, 46, 0.12);
}
.lumi-faq--rond .lumi-faq__nummer {
	width: 64px;
	justify-content: flex-start;
	padding-top: 24px;
	font-size: 28px;
}
.lumi-faq__rond {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid rgba(200, 169, 110, 0.4);
	color: var(--gold);
	background: transparent;
	transition: background-color 200ms ease, color 200ms ease, transform 300ms ease;
}
.lumi-faq__item.is-open .lumi-faq__rond {
	background: var(--gold);
	color: #fff;
	transform: rotate(45deg);
}

/* FAQ op donkere achtergrond. */
.lumi-faq--donker .lumi-faq__item {
	border-bottom: 1px solid rgba(247, 241, 232, 0.12);
}
.lumi-faq--donker .lumi-faq__item:first-child {
	border-top: 1px solid rgba(247, 241, 232, 0.12);
}
.lumi-faq--donker .lumi-faq__vraag { color: var(--cream); }
.lumi-faq--donker .lumi-faq__antwoord p { color: rgba(247, 241, 232, 0.85); }

/* ---- Slot-CTA met foto ---- */
.lumi-slot {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
}
.lumi-slot__tekst {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 24px;
	background-color: var(--cream);
}
.lumi-slot--cream-alt .lumi-slot__tekst { background-color: var(--cream-alt); }
.lumi-slot__inner {
	width: 100%;
	max-width: 520px;
	text-align: center;
}
.lumi-slot__titel {
	margin-top: 20px;
	font-size: clamp(32px, 4.5vw, 48px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--walnut);
}
.lumi-slot__body {
	margin-top: 20px;
	max-width: 440px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--walnut-muted);
}
.lumi-slot__acties {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.lumi-slot__checks { margin-top: 32px; justify-content: center; }
.lumi-slot__media {
	order: 1;
	position: relative;
	aspect-ratio: 3 / 2;
	min-height: 260px;
}
.lumi-slot__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Prijslijst ---- */
.lumi-cat {
	margin-top: 48px;
}
.lumi-cat:first-child { margin-top: 0; }
.lumi-cat__kop {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gold);
}
.lumi-cat__icoon { color: var(--gold); }
.lumi-cat__titel {
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 500;
	color: var(--walnut);
}
.lumi-cat__intro {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--walnut-muted);
	max-width: 720px;
}
.lumi-prijslijst {
	list-style: none;
	margin-top: 8px;
}
.lumi-prijsregel {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 8px;
	border-bottom: 1px solid rgba(72, 60, 46, 0.10);
	transition: background-color 200ms ease;
}
.lumi-prijsregel:last-child { border-bottom: none; }
.lumi-prijsregel:hover { background-color: rgba(72, 60, 46, 0.02); }
.lumi-prijsregel__info { flex: 1; min-width: 0; }
.lumi-prijsregel__naam {
	font-family: var(--font-display);
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--walnut);
}
.lumi-prijsregel__tekst {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--walnut-muted);
}
.lumi-prijsregel__inbegrepen {
	margin-top: 12px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	color: var(--walnut-muted);
}
.lumi-prijsregel__inbegrepen li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.lumi-prijsregel__inbegrepen svg {
	margin-top: 3px;
	color: var(--gold);
}
.lumi-prijsregel__notitie {
	margin-top: 10px;
	font-size: 13px;
	font-style: italic;
	color: var(--walnut-soft);
}
.lumi-prijsregel__rechts {
	flex-shrink: 0;
	min-width: 120px;
	text-align: right;
}
.lumi-prijsregel__prijs {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--gold);
	white-space: nowrap;
}
.lumi-prijsregel__duur {
	margin-top: 4px;
	font-size: 13px;
	color: var(--walnut-soft);
	white-space: nowrap;
}

.lumi-binnenkort {
	margin-top: 20px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 28px 24px;
	background: #fff;
	border: 1px dashed rgba(200, 169, 110, 0.5);
	border-radius: 4px;
}
.lumi-binnenkort svg { color: var(--gold); margin-top: 2px; }
.lumi-binnenkort__titel {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	color: var(--walnut);
}
.lumi-binnenkort__tekst {
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--walnut-muted);
}

.lumi-extras {
	margin-top: 28px;
	padding: 24px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid var(--lijn);
	border-radius: 4px;
}
.lumi-extras__kop {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--gold);
}
.lumi-extras__lijst {
	margin-top: 12px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
	color: var(--walnut);
}
.lumi-extras__lijst li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}
.lumi-extras__prijs {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--gold);
	white-space: nowrap;
}
.lumi-voorwaarden {
	margin-top: 20px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--walnut-muted);
}
.lumi-voorwaarden li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.lumi-voorwaarden svg { margin-top: 3px; color: var(--gold); }

.lumi-prijs-slot {
	margin-top: 48px;
	text-align: center;
}
.lumi-prijs-slot p {
	font-style: italic;
	font-size: 14px;
	color: var(--walnut-muted);
}
.lumi-prijs-slot div { margin-top: 12px; }

/* ---- Stappen (zo werkt het) ---- */
.lumi-stappen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
.lumi-stap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.lumi-stap__titel {
	margin-top: 16px;
	font-size: 20px;
	font-weight: 500;
	color: var(--walnut);
}
.lumi-stap__tekst {
	margin: 12px auto 0;
	max-width: 280px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--walnut-muted);
}

/* ---- Andere wegen ---- */
.lumi-wegen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.lumi-weg-card {
	display: block;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(72, 60, 46, 0.10);
	border-radius: 4px;
	transition: transform 400ms var(--soepel), box-shadow 400ms var(--soepel), border-color 400ms var(--soepel);
}
.lumi-weg-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 36px rgba(72, 60, 46, 0.10);
	border-color: rgba(200, 169, 110, 0.3);
}
.lumi-weg-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.lumi-weg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms ease;
}
.lumi-weg-card:hover .lumi-weg-card__media img { transform: scale(1.04); }
.lumi-weg-card__body { padding: 32px 28px; }
.lumi-weg-card__titel {
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--walnut);
}
.lumi-weg-card__tekst {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--walnut-muted);
}
.lumi-weg-card__voet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.lumi-weg-card__label {
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--walnut);
}

/* ---- Contactpagina ---- */
.lumi-quick {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.lumi-quick__kaart {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	padding: 32px 24px;
	border: 1px solid rgba(72, 60, 46, 0.10);
	border-radius: 4px;
	transition: transform 400ms var(--soepel), box-shadow 400ms var(--soepel), border-color 400ms var(--soepel);
}
.lumi-quick__kaart:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(72, 60, 46, 0.08);
	border-color: rgba(200, 169, 110, 0.3);
}
.lumi-quick__icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(200, 169, 110, 0.10);
	border: 1px solid rgba(200, 169, 110, 0.25);
	color: var(--gold);
}
.lumi-quick__titel {
	margin-top: 16px;
	font-size: 20px;
	font-weight: 500;
	color: var(--walnut);
}
.lumi-quick__sub {
	margin-top: 4px;
	font-size: 13px;
	color: var(--walnut-muted);
}
.lumi-quick__waarde {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 500;
	color: var(--walnut);
}

.lumi-contactblok {
	background: var(--walnut);
	border-radius: 4px;
	padding: 32px 24px;
	color: var(--cream);
}
.lumi-contactblok__lijst {
	margin-top: 20px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.lumi-contactblok__lijst li {
	display: flex;
	gap: 16px;
}
.lumi-contactblok__lijst svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--gold);
}
.lumi-contactblok__label {
	margin-bottom: 4px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
}
.lumi-contactblok__waarde {
	font-size: 15px;
	color: var(--cream);
}
.lumi-contactblok__waarde a:hover { text-decoration: underline; }
.lumi-voicemail {
	margin-top: 32px;
	display: flex;
	gap: 16px;
	background: rgba(247, 241, 232, 0.06);
	border: 1px solid rgba(200, 169, 110, 0.30);
	border-radius: 4px;
	padding: 18px 20px;
}
.lumi-voicemail svg { flex-shrink: 0; margin-top: 2px; color: var(--gold); }
.lumi-voicemail p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--cream-tekst);
}
.lumi-contactblok__scheiding {
	margin: 32px 0;
	height: 1px;
	background: var(--gold);
	opacity: 0.6;
}
.lumi-contactblok__uren {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--cream);
}

.lumi-locatie {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}
.lumi-locatie__kaart {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
	border: 1px solid rgba(72, 60, 46, 0.10);
}
.lumi-locatie__kaart iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.lumi-locatie__kop {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--walnut-muted);
}
.lumi-locatie__usps {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 14px;
	color: var(--walnut);
}
.lumi-locatie__usps span {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.lumi-locatie__usps svg { color: var(--gold); }

/* ---- Cadeaubonnen ---- */
.lumi-cadeau-kaarten {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.lumi-cadeau-kaart {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	padding: 36px 32px;
	border: 1px solid rgba(72, 60, 46, 0.10);
	border-radius: 4px;
	min-height: 440px;
	transition: transform 400ms var(--soepel), box-shadow 400ms var(--soepel), border-color 400ms var(--soepel);
}
.lumi-cadeau-kaart:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 32px rgba(72, 60, 46, 0.10);
	border-color: rgba(200, 169, 110, 0.3);
}
.lumi-cadeau-kaart__icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(200, 169, 110, 0.12);
	border: 1px solid rgba(200, 169, 110, 0.28);
	color: var(--gold);
}
.lumi-cadeau-kaart__label {
	margin-top: 24px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--gold);
}
.lumi-cadeau-kaart__titel {
	margin-top: 12px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--walnut);
}
.lumi-cadeau-kaart__tekst {
	margin-top: 16px;
	max-width: 240px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--walnut-muted);
}
.lumi-cadeau-kaart__voet {
	margin-top: auto;
	padding-top: 24px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lumi-cadeau-kaart__prijs {
	margin-top: 16px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 16px;
	font-weight: 500;
	color: var(--gold);
}
.lumi-cadeau-kaart__knop {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--walnut);
	transition: color 0.3s ease, gap 0.3s ease;
}
.lumi-cadeau-kaart:hover .lumi-cadeau-kaart__knop {
	color: var(--gold);
	gap: 12px;
}

.lumi-gelegenheden {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.lumi-gelegenheid {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	background: #fff;
	padding: 28px 20px;
	border: 1px solid rgba(72, 60, 46, 0.08);
	border-radius: 4px;
}
.lumi-gelegenheid svg { color: var(--gold); }
.lumi-gelegenheid__titel {
	font-size: 17px;
	font-weight: 500;
	color: var(--walnut);
}
.lumi-gelegenheid__tekst {
	font-size: 13px;
	line-height: 1.5;
	color: var(--walnut-muted);
}

/* ---- Teampagina ---- */
.lumi-teamintro {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
.lumi-teamintro__media { position: relative; }
.lumi-teamintro__rand {
	pointer-events: none;
	position: absolute;
	inset: 0;
	transform: translate(16px, 16px);
	border: 1px solid var(--gold);
	border-radius: 4px;
	z-index: 0;
}
.lumi-teamintro__foto {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 24px 48px rgba(72, 60, 46, 0.12);
}
.lumi-teamintro__leeg {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	background-color: var(--cream-alt);
	border: 1px solid rgba(72, 60, 46, 0.08);
	box-shadow: 0 24px 48px rgba(72, 60, 46, 0.12);
	color: var(--gold);
}
.lumi-teamintro__leeg p {
	margin-top: 16px;
	font-size: 13px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--walnut-muted);
}
.lumi-teamintro__body { max-width: 520px; }
.lumi-teamintro__titel {
	margin-top: 16px;
	font-size: clamp(28px, 3.8vw, 44px);
	font-weight: 500;
	line-height: 1.1;
}
.lumi-teamintro__tekst {
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--walnut-muted);
}
.lumi-teamintro__tekst + .lumi-teamintro__tekst { margin-top: 16px; }
.lumi-teamintro__naam {
	margin-top: 12px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 22px;
	font-weight: 500;
	color: var(--walnut);
}
.lumi-teamintro__rol {
	margin-top: 2px;
	font-size: 14px;
	color: var(--walnut-muted);
}

/* Kaarten van een vaste maximumbreedte, gecentreerd. Zo staat één teamlid
   netjes in het midden in plaats van verloren naast twee lege kolommen. */
.lumi-team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
	justify-content: center;
	gap: 32px;
}
.lumi-teamlid {
	background: #fff;
	border: 1px solid rgba(72, 60, 46, 0.10);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 400ms var(--soepel), box-shadow 400ms var(--soepel);
}
.lumi-teamlid:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(72, 60, 46, 0.08);
}
/* height: auto is hier geen overbodige regel. WordPress zet een height-attribuut
   op de afbeelding, en dat telt als presentatie-hint. Zonder deze regel wint dat
   attribuut en wordt aspect-ratio genegeerd. */
.lumi-teamlid__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	background-color: var(--cream-alt);
}
.lumi-teamlid__leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 5;
	background-color: var(--cream-alt);
	color: var(--gold);
}
.lumi-teamlid__body { padding: 24px 24px 28px; }
.lumi-teamlid__naam {
	font-size: 22px;
	font-weight: 500;
	color: var(--walnut);
}
.lumi-teamlid__rol {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
}
.lumi-teamlid__tekst {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--walnut-muted);
}

.lumi-waarden {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
.lumi-waarde {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.lumi-waarde svg { color: var(--gold); }
.lumi-waarde__titel {
	margin-top: 20px;
	font-size: 22px;
	font-weight: 500;
	color: var(--walnut);
}
.lumi-waarde__tekst {
	margin-top: 12px;
	max-width: 320px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--walnut-muted);
}

.lumi-certs {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 48px;
}
.lumi-certs span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cream);
}
.lumi-certs svg { color: var(--gold); }

.lumi-salongalerij {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.lumi-salongalerij__item {
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 1 / 1;
}
.lumi-salongalerij__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms ease-out;
}
.lumi-salongalerij__item:hover img { transform: scale(1.03); }

/* ---- Zoekresultaten ---- */
.lumi-resultaten {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.lumi-resultaat {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--lijn);
}
.lumi-resultaat__titel {
	font-size: 22px;
	font-weight: 500;
	color: var(--walnut);
}
.lumi-resultaat__titel a:hover { color: var(--gold); }
.lumi-resultaat__tekst {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--walnut-muted);
}
.lumi-paginering {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.lumi-paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--lijn);
	border-radius: 999px;
	font-size: 14px;
	color: var(--walnut);
}
.lumi-paginering .page-numbers.current,
.lumi-paginering .page-numbers:hover {
	background-color: var(--gold);
	border-color: var(--gold);
	color: var(--walnut);
}

.lumi-zoekform {
	display: flex;
	gap: 12px;
	max-width: 480px;
}
.lumi-zoekform input { flex: 1; }

/* =========================================================================
 * 7. Beweging
 * ====================================================================== */

@keyframes lumi-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}
.lumi-bounce {
	animation: lumi-bounce 2s ease-in-out infinite;
}

/* =========================================================================
 * 8. Breekpunten
 * ====================================================================== */

@media (min-width: 640px) {
	.lumi-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.lumi-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.lumi-trust__streep { display: inline-block; }
	.lumi-quick { grid-template-columns: repeat(3, 1fr); }
	.lumi-usps { grid-template-columns: repeat(2, 1fr); }
	.lumi-bijschrift__lijn { display: block; }
	.lumi-slot__acties { flex-direction: row; flex-wrap: wrap; justify-content: center; }
	.lumi-faq__nummer { display: flex; }
	.lumi-hero__meta { gap: 16px 40px; }
}

@media (min-width: 768px) {
	.lumi-hero__scroll { display: flex; }
	.lumi-galerij { gap: 16px; }
	.lumi-gelegenheden { grid-template-columns: repeat(3, 1fr); }
	.lumi-contactblok { padding: 40px; }
	.lumi-cat__kop { gap: 16px; }
}

@media (min-width: 1024px) {
	:root {
		--container-pad: 32px;
		--sectie-pad: 95px;
	}

	.lumi-header__inner { height: 88px; }
	.lumi-header__logo img { height: 44px; }
	.lumi-nav { display: flex; }
	.lumi-header__cta { display: inline-flex; }
	.lumi-hamburger { display: none; }
	.lumi-drawer { display: none; }

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

	.lumi-hero { min-height: 640px; }
	.lumi-hero--compact { min-height: 50vh; }
	.lumi-hero--midden { min-height: 55vh; }
	.lumi-hero--team { min-height: 60vh; }

	.lumi-acties { grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 80px; }
	.lumi-treat-grid { grid-template-columns: repeat(3, 1fr); margin-top: 80px; }
	.lumi-usps { margin-top: 80px; }
	.lumi-galerij { margin-top: 80px; }
	.lumi-reviews { margin-top: 80px; }

	.lumi-over {
		grid-template-columns: repeat(2, 1fr);
		gap: 80px;
	}
	.lumi-over__media { order: 2; }
	.lumi-over__kaart { order: 1; }

	.lumi-spotlight { grid-template-columns: repeat(2, 1fr); }
	.lumi-spotlight__media { height: auto; }
	.lumi-spotlight__tekst { padding: 95px 80px; }

	.lumi-galerij {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: 260px;
	}
	.lumi-galerij__item { aspect-ratio: auto; height: 100%; }
	.lumi-galerij__item--1 { grid-column: span 4; grid-row: span 2; }
	.lumi-galerij__item--2 { grid-column: span 5; grid-row: span 1; }
	.lumi-galerij__item--3 { grid-column: span 3; grid-row: span 1; }
	.lumi-galerij__item--4 { grid-column: span 5; grid-row: span 1; }
	.lumi-galerij__item--5 { grid-column: span 3; grid-row: span 1; }

	.lumi-reviews { grid-template-columns: repeat(12, 1fr); }
	.lumi-review-groot { grid-column: span 7; }
	.lumi-reviews__stapel { grid-column: span 5; }
	.lumi-reviews-donker { grid-template-columns: repeat(3, 1fr); }

	.lumi-slot { grid-template-columns: 55% 45%; }
	.lumi-slot__tekst { order: 1; padding: 64px 32px; }
	.lumi-slot__media { order: 2; aspect-ratio: auto; min-height: 520px; }
	.lumi-slot__inner {
		margin-left: auto;
		margin-right: 48px;
		text-align: left;
	}
	.lumi-slot__acties { justify-content: flex-start; }
	.lumi-slot__checks { justify-content: flex-start; }

	.lumi-stappen { grid-template-columns: repeat(3, 1fr); }
	.lumi-wegen { grid-template-columns: repeat(2, 1fr); }
	.lumi-cadeau-kaarten { grid-template-columns: repeat(3, 1fr); }
	.lumi-waarden { grid-template-columns: repeat(3, 1fr); }

	.lumi-teamintro { grid-template-columns: repeat(2, 1fr); gap: 64px; }

	.lumi-locatie { grid-template-columns: 60% 40%; gap: 48px; }

	.lumi-hero__meta-streep { display: inline-block; }
	.lumi-large-card { min-height: 500px; }

	.lumi-salongalerij {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: 320px;
	}
	.lumi-salongalerij__item { aspect-ratio: auto; }
	.lumi-salongalerij__item:nth-child(1) { grid-column: span 5; grid-row: span 2; }
	.lumi-salongalerij__item:nth-child(2) { grid-column: span 7; }
	.lumi-salongalerij__item:nth-child(3) { grid-column: span 4; }
	.lumi-salongalerij__item:nth-child(4) { grid-column: span 3; }
}

@media (min-width: 1280px) {
	.lumi-hero--home .lumi-hero__inner { min-height: 520px; }
	.lumi-spotlight__tekst { padding-left: 96px; padding-right: 96px; }
}

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.lumi-bounce { animation: none !important; }
	html { scroll-behavior: auto; }
	.lumi-drawer { transition: none; }
}
