/* ==========================================================================
   Joffers van Zuid — haar & schoonheidsstudio, Groningen
   Ontwerpsysteem. Eén stylesheet, twee thema's (data-theme op <html>).

   Kleur    petrol grond + blush accent, ontleend aan het logo
   Type     Prata (didone, naar de letters van het logo) + Jost (geometrisch)
   Motief   de streep-label-streep uit het logo keert terug als sectiemarkering
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */

:root {
	/* Type */
	--font-display: "Prata", "Times New Roman", serif;
	--font-body: "Jost", "Century Gothic", "Avenir Next", sans-serif;

	--text-xs: 0.6875rem;
	--text-sm: 0.8125rem;
	--text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	--text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	--text-3xl: clamp(2.125rem, 1.5rem + 2.8vw, 4rem);

	--tracking-wide: 0.18em;
	--tracking-wider: 0.28em;

	/* Ruimte */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;

	--shell: 1180px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--header-h: 84px;

	--radius-pill: 999px;
	--radius: 3px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Donker — het hoofdthema: het gedempte licht van de studio */
[data-theme="dark"] {
	--bg: #222c30;
	--bg-2: #2b373b;
	--bg-3: #1a2226;
	--veil: rgba(16, 22, 25, 0.72);
	--veil-solid: #151d20;

	--text: #ede9e6;
	--text-muted: rgba(237, 233, 230, 0.62);
	--text-faint: rgba(237, 233, 230, 0.4);

	--line: rgba(237, 233, 230, 0.14);
	--line-soft: rgba(237, 233, 230, 0.08);
	--leader: rgba(237, 233, 230, 0.32);

	--accent: #ddb9b2;
	--accent-line: rgba(221, 185, 178, 0.5);

	--btn-bg: #f2eeeb;
	--btn-text: #232c30;
	--btn-bg-hover: #ffffff;

	--logo: url("joffers_logo_white.png");
	--brand-opacity: 0.72;
	--scrim: linear-gradient(
		to top,
		rgba(14, 19, 22, 0.94) 0%,
		rgba(14, 19, 22, 0.72) 42%,
		rgba(14, 19, 22, 0.38) 68%,
		rgba(14, 19, 22, 0.1) 88%,
		transparent 100%
	);
}

/* Licht — warm steen, geen wit: de dagversie van dezelfde studio */
[data-theme="light"] {
	--bg: #e7e1d8;
	--bg-2: #ded7cb;
	--bg-3: #d5cdbf;
	--veil: rgba(231, 225, 216, 0.82);
	--veil-solid: #e7e1d8;

	--text: #232c30;
	--text-muted: rgba(35, 44, 48, 0.68);
	--text-faint: rgba(35, 44, 48, 0.45);

	--line: rgba(35, 44, 48, 0.18);
	--line-soft: rgba(35, 44, 48, 0.1);
	--leader: rgba(35, 44, 48, 0.35);

	--accent: #a3706a;
	--accent-line: rgba(163, 112, 106, 0.45);

	--btn-bg: #232c30;
	--btn-text: #f2eeeb;
	--btn-bg-hover: #10171a;

	--logo: url("joffers_logo.png");
	--brand-opacity: 0.8;
	--scrim: linear-gradient(
		to top,
		rgba(14, 19, 22, 0.94) 0%,
		rgba(14, 19, 22, 0.72) 42%,
		rgba(14, 19, 22, 0.38) 68%,
		rgba(14, 19, 22, 0.1) 88%,
		transparent 100%
	);
}

/* ----------------------------------------------------------------- reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 300;
	line-height: 1.65;
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

/* Zachte verloop in de grond, zodat lange pagina's niet vlak worden */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
			120% 80% at 78% 0%,
			var(--bg-2) 0%,
			transparent 60%
		),
		linear-gradient(168deg, var(--bg) 0%, var(--bg-3) 100%);
	transition: opacity 0.5s var(--ease);
}

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

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

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

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

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

::selection {
	background: var(--accent);
	color: #1a2226;
}

/* ------------------------------------------------------------ typografie */

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--text);
}

p {
	margin: 0 0 var(--space-4);
	color: var(--text-muted);
}

p:last-child {
	margin-bottom: 0;
}

strong {
	font-weight: 500;
	color: var(--text);
}

.lede {
	font-size: var(--text-lg);
	color: var(--text-muted);
	line-height: 1.6;
}

/* Het merkmotief: streep — label — streep, uit het logo.
   Gecentreerd bij sectie-intro's, links uitgelijnd boven kolommen. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--accent);
}

.eyebrow::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--accent-line);
}

.eyebrow--center {
	justify-content: center;
}

.eyebrow--center::before {
	content: "";
	flex: 1 1 auto;
	max-width: 72px;
	height: 1px;
	background: var(--accent-line);
}

.eyebrow--center::after {
	max-width: 72px;
}

/* ---------------------------------------------------------------- layout */

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.shell--narrow {
	max-width: 860px;
}

.section {
	padding-block: clamp(3rem, 7vw, var(--space-24));
}

.section--tight {
	padding-block: clamp(2.5rem, 5vw, var(--space-16));
}

.section-head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto clamp(2.5rem, 5vw, var(--space-16));
}

.section-head h1,
.section-head h2 {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-4);
}

.split {
	display: grid;
	gap: clamp(2.5rem, 5vw, var(--space-16));
}

@media (min-width: 800px) {
	.split--2 {
		grid-template-columns: 1fr 1px 1fr;
	}

	/* Hairline tussen de twee studio's: de tweedeling ís de zaak */
	.split__rule {
		background: linear-gradient(
			to bottom,
			transparent,
			var(--line) 15%,
			var(--line) 85%,
			transparent
		);
	}
}

@media (max-width: 799px) {
	.split__rule {
		display: none;
	}
}

.split--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Link binnen een lopende zin */
.linkje {
	color: var(--text);
	border-bottom: 1px solid var(--accent-line);
	padding-bottom: 1px;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.linkje:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* ---------------------------------------------------------------- header */

.header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
		backdrop-filter 0.4s var(--ease);
	border-bottom: 1px solid transparent;
}

/* De balk neemt zijn eigen donkere sluier mee. Anders hangt de leesbaarheid
   af van de foto die er toevallig achter staat, en dat gaat bij een lichte
   foto mis. Zodra de balk is dichtgelopen, verdwijnt deze sluier. */
.header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 190px;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(10, 14, 16, 0.85) 0%,
		rgba(10, 14, 16, 0.6) 40%,
		rgba(10, 14, 16, 0.22) 72%,
		transparent 100%
	);
	transition: opacity 0.4s var(--ease);
}

.header.is-scrolled::before {
	opacity: 0;
}

.header__inner {
	position: relative;
	z-index: 1;
}

/* Extra houvast voor letters die tóch op een licht stuk foto vallen */
.header:not(.is-scrolled) .logo {
	filter: drop-shadow(0 1px 10px rgba(8, 12, 14, 0.55));
}

.header:not(.is-scrolled) .nav__link,
.header:not(.is-scrolled) .theme-toggle,
.header:not(.is-scrolled) .nav-toggle {
	text-shadow: 0 1px 8px rgba(8, 12, 14, 0.55);
}

.header.is-scrolled {
	background: var(--veil);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border-bottom-color: var(--line-soft);
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	height: var(--header-h);
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Het logo staat altijd op beeld of op een donkere sluier: witte versie,
   behalve wanneer de header in lichte modus is dichtgelopen. */
.logo {
	display: block;
	width: clamp(150px, 16vw, 196px);
	aspect-ratio: 800 / 300;
	background-image: url("joffers_logo_white.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	opacity: 0.94;
	transition: opacity 0.3s var(--ease);
}

.logo:hover {
	opacity: 1;
}

[data-theme="light"] .header.is-scrolled .logo {
	background-image: url("joffers_logo.png");
}

.nav {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.nav__link {
	position: relative;
	font-size: var(--text-xs);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
	padding-block: var(--space-2);
	transition: color 0.3s var(--ease);
	white-space: nowrap;
}

.nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
	color: #fff;
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
	transform: scaleX(1);
}

[data-theme="light"] .header.is-scrolled .nav__link {
	color: var(--text-muted);
}

[data-theme="light"] .header.is-scrolled .nav__link:hover,
[data-theme="light"] .header.is-scrolled .nav__link[aria-current="page"] {
	color: var(--text);
}

/* Knoppen */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.85rem 1.9rem;
	border-radius: var(--radius-pill);
	background: var(--btn-bg);
	color: var(--btn-text);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	transition: background-color 0.3s var(--ease), transform 0.3s var(--ease),
		color 0.3s var(--ease);
}

.btn:hover {
	background: var(--btn-bg-hover);
	transform: translateY(-1px);
}

.btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.42);
	padding-block: calc(0.85rem - 1px);
}

.btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
	color: #fff;
}

.btn--sm {
	padding: 0.6rem 1.35rem;
}

.header .btn--sm {
	display: none;
}

@media (min-width: 1000px) {
	.header .btn--sm {
		display: inline-flex;
	}
}

/* Themaschakelaar — zon/maan, of hier: dag/avond in de studio */
.theme-toggle {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.66);
	border: 1px solid transparent;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
		transform 0.4s var(--ease);
}

.theme-toggle:hover {
	color: #fff;
	border-color: var(--accent-line);
	transform: rotate(-18deg);
}

.theme-toggle svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
}

[data-theme="light"] .header.is-scrolled .theme-toggle {
	color: var(--text-muted);
}

[data-theme="light"] .header.is-scrolled .theme-toggle:hover {
	color: var(--text);
}

[data-theme="dark"] .theme-toggle .icon-sun {
	display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
	display: none;
}

/* Hamburger */
.nav-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: rgba(255, 255, 255, 0.8);
	margin-right: -8px;
}

[data-theme="light"] .header.is-scrolled .nav-toggle {
	color: var(--text);
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 1px;
	background: currentColor;
	transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
}

.nav-toggle__bars::before {
	transform: translateY(-6px);
}

.nav-toggle__bars::after {
	transform: translateY(6px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: rotate(-45deg);
}

@media (min-width: 860px) {
	.nav-toggle {
		display: none;
	}
}

@media (max-width: 859px) {
	.nav__link {
		display: none;
	}
}

/* Mobiel paneel */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 99;
	display: grid;
	align-content: center;
	gap: var(--space-2);
	padding: var(--header-h) var(--gutter) var(--space-16);
	background: var(--veil-solid);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.mobile-nav.is-open {
	opacity: 1;
	visibility: visible;
}

.mobile-nav a {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 8vw, 2.5rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	transform: translateY(14px);
	opacity: 0;
	transition: color 0.3s var(--ease), transform 0.5s var(--ease),
		opacity 0.5s var(--ease);
}

.mobile-nav.is-open a {
	transform: none;
	opacity: 1;
}

.mobile-nav a:nth-child(1) {
	transition-delay: 0.06s;
}
.mobile-nav a:nth-child(2) {
	transition-delay: 0.12s;
}
.mobile-nav a:nth-child(3) {
	transition-delay: 0.18s;
}
.mobile-nav a:nth-child(4) {
	transition-delay: 0.24s;
}
.mobile-nav a:nth-child(5) {
	transition-delay: 0.3s;
}

.mobile-nav a[aria-current="page"] {
	color: var(--accent);
}

@media (min-width: 860px) {
	.mobile-nav {
		display: none;
	}
}

/* ------------------------------------------------------------------ hero */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--bg-3);
}

/* De foto's liggen als laag achter de tekst; de hoogte komt van
   .hero__body, zodat een lang bijschrift de band meegroeit in plaats
   van eroverheen te lopen. */
.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.4s var(--ease);
}

.hero__slide.is-active {
	opacity: 1;
}

.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Trage in- en uitzoom, gelijk voor alle beelden zodat er bij het
   overvloeien nooit een sprong zichtbaar is — sfeer, geen effect */
.hero__slide img {
	animation: drift 20s var(--ease) infinite alternate;
}

@keyframes drift {
	from {
		transform: scale(1.005);
	}
	to {
		transform: scale(1.07);
	}
}

/* Alleen de sluier onderaan, voor het bijschrift. De balk bovenaan
   zorgt zelf voor zijn leesbaarheid. */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--scrim);
	pointer-events: none;
}

.hero__body {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 48vw, 540px);
	padding-top: calc(var(--header-h) + var(--space-6));
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Op een lichte foto vallen dunne letters weg. De sluier doet het meeste
   werk; een zachte schaduw vangt op wat daar doorheen komt, zodat de foto
   licht mag blijven en de tekst tóch leesbaar is. */
.hero__body .eyebrow {
	color: #fff;
	text-shadow: 0 1px 10px rgba(8, 12, 14, 0.8);
}

/* In de band houdt de streep zich kort — hij wijst, hij vult niet. */
.hero__body .eyebrow::after {
	flex: 0 0 auto;
	width: 96px;
	background: rgba(255, 255, 255, 0.42);
}

.hero__title {
	font-size: var(--text-3xl);
	color: #fff;
	max-width: 16ch;
	text-wrap: balance;
	text-shadow: 0 2px 16px rgba(8, 12, 14, 0.6);
}

.hero__sub {
	margin-top: var(--space-3);
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--text-lg);
	text-shadow: 0 1px 10px rgba(8, 12, 14, 0.7);
}

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

/* Bolletjes */
.hero__dots {
	position: absolute;
	z-index: 3;
	right: var(--gutter);
	bottom: clamp(2rem, 4vw, 3.5rem);
	display: flex;
	gap: 10px;
}

.hero__dot {
	width: 28px;
	height: 2px;
	background: rgba(255, 255, 255, 0.45);
	box-shadow: 0 0 8px rgba(10, 14, 16, 0.35);
	transition: background-color 0.4s var(--ease);
}

.hero__dot:hover {
	background: rgba(255, 255, 255, 0.8);
}

.hero__dot[aria-current="true"] {
	background: var(--accent);
}

@media (max-width: 700px) {
	/* De banners zijn 1400x425. Op een smal scherm valt daar een flink stuk
	   breedte buiten beeld. In plaats van stil op het midden te blijven staan
	   schuift de foto langzaam heen en weer, zodat je na een paar tellen
	   iedereen een keer voorbij ziet komen. Vervangt het inzoomen; twee
	   bewegingen tegelijk is te veel. */
	.hero__slide img {
		animation: pan 24s ease-in-out infinite alternate;
	}

	.hero__dots {
		left: var(--gutter);
		right: auto;
		bottom: var(--space-4);
	}

	.hero__body {
		padding-bottom: calc(var(--space-6) + 24px);
	}

	/* Bij een label dat over twee regels valt staat de streep alleen
	   maar in de weg. */
	.hero__body .eyebrow::after {
		display: none;
	}

	/* Op een smal scherm gaan de knoppen onder elkaar, elk over de
	   volle breedte — makkelijker te raken met een duim. */
	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

@keyframes pan {
	from {
		object-position: 12% center;
	}
	to {
		object-position: 88% center;
	}
}

/* --------------------------------------------------------------- inhoud */

.studio h2 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-4);
}

/* Prijslijst — als een menukaart, met puntlijnen. Compact gezet: het is
   een lijst om in te kunnen zoeken, geen lopende tekst. */
.price-list {
	display: grid;
}

.price-row {
	display: flex;
	align-items: baseline;
	padding-block: 0.34rem;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.price-row::before {
	content: "";
	order: 2;
	flex: 1 1 auto;
	min-width: 1.25rem;
	margin-inline: 0.75rem;
	border-bottom: 1px dotted var(--leader);
	transform: translateY(-0.28em);
}

.price-row__name {
	order: 1;
	color: var(--text-muted);
	flex: 0 1 auto;
}

.price-row__value {
	order: 3;
	flex: 0 0 auto;
	font-family: var(--font-display);
	color: var(--text);
	white-space: nowrap;
}

.price-row__from {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-right: 0.35rem;
}

/* Op een smal scherm lopen de namen over twee regels. Een puntlijn wordt dan
   een stompje midden in de regel en de bedragen staan niet meer onder elkaar.
   Daarom daar geen puntlijn, maar twee kolommen: naam links, bedrag rechts. */
@media (max-width: 680px) {
	.price-row {
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: var(--space-4);
		padding-block: 0.5rem;
		border-bottom: 1px solid var(--line-soft);
	}

	.price-row::before {
		display: none;
	}

	.price-row__value {
		text-align: right;
	}

	/* "vanaf" op dezelfde regel als het bedrag: anders wordt die ene regel
	   hoger dan de rest en oogt de lijst weer onrustig. De bedragen lijnen
	   nog steeds rechts uit. */
	.price-row__from {
		margin-right: 0.3rem;
	}
}

.price-note {
	margin-top: var(--space-8);
	font-size: var(--text-sm);
	color: var(--text-faint);
	text-align: center;
}

/* Merken */
.brands {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
	border-top: 1px solid var(--line-soft);
	border-left: 1px solid var(--line-soft);
}

.brand {
	display: grid;
	place-items: center;
	min-height: 134px;
	padding: var(--space-6) var(--space-4);
	border-right: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
	transition: background-color 0.4s var(--ease);
}

.brand:hover {
	background: var(--line-soft);
}

/* De merklogo's verschillen enorm van vorm: Kevin Murphy is zeven keer zo
   breed als hoog, Balmain bijna vierkant. Daarom krijgt elk logo hetzelfde
   vak en schaalt het daarbinnen; zo staan ze allemaal even groot én netjes
   in het midden, in plaats van dat het brede logo buiten zijn vakje valt. */
.brand img {
	width: 100%;
	max-width: 150px;
	height: 50px;
	object-fit: contain;
	object-position: center;
	opacity: var(--brand-opacity);
	transition: opacity 0.4s var(--ease);
}

.brand:hover img {
	opacity: 1;
}

/* Van elk merk staan beide logo's in de pagina; per thema tonen we er één.
   "licht" is het lichte logo (voor de donkere achtergrond) en andersom. */
[data-theme="dark"] .brand__logo--donker,
[data-theme="light"] .brand__logo--licht {
	display: none;
}

.brand-group + .brand-group {
	margin-top: clamp(2.5rem, 5vw, var(--space-12));
}

/* Afsluitende band: waar je ons vindt, en de knop */
.closing {
	border-top: 1px solid var(--line-soft);
	padding-block: clamp(2.5rem, 5vw, var(--space-16));
}

.closing__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
}

.closing h2 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-3);
}

/* Contact */
.contact-list {
	display: grid;
	gap: var(--space-6);
}

.contact-item__label {
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: var(--space-1);
}

.contact-item__value {
	font-size: var(--text-lg);
	color: var(--text);
	font-weight: 300;
}

a.contact-item__value {
	position: relative;
	display: inline-block;
	transition: color 0.3s var(--ease);
}

a.contact-item__value::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 100%;
	height: 1px;
	background: var(--accent-line);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ease);
}

a.contact-item__value:hover {
	color: var(--accent);
}

a.contact-item__value:hover::after {
	transform: scaleX(1);
}

.map {
	position: relative;
	height: clamp(360px, 48vw, 540px);
	background: var(--bg-3);
}

.map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) contrast(0.9);
	transition: filter 0.6s var(--ease);
}

[data-theme="dark"] .map iframe {
	filter: grayscale(1) invert(0.92) contrast(0.82) brightness(0.95);
}

.map:hover iframe {
	filter: none;
}

/* Boeken — de agenda van Salonized is een wit venster van een andere partij.
   In plaats van dat als een blok op de donkere grond te plakken, zetten we
   het als een vel papier neer: afgeronde hoeken, een zachte schaduw en wat
   licht eromheen, zodat de overgang niet zo hard is. */
.booking {
	position: relative;
	max-width: 680px;
	margin-inline: auto;
	background: transparent;
}

.booking iframe {
	display: block;
	width: 100%;
	height: clamp(620px, 76vh, 880px);
	border: 0;
}

@media (max-width: 600px) {
	.booking {
		border-radius: 10px;
	}

	.booking iframe {
		height: clamp(560px, 88vh, 760px);
	}
}

/* ---------------------------------------------------------------- footer */

.footer {
	margin-top: auto;
	border-top: 1px solid var(--line-soft);
	background: var(--bg-3);
	padding-block: var(--space-12) var(--space-8);
}

.footer__grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--line-soft);
}

@media (min-width: 720px) {
	.footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: var(--space-12);
	}
}

.footer__logo {
	width: 170px;
	aspect-ratio: 800 / 300;
	background-image: var(--logo);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	opacity: 0.8;
	margin-bottom: var(--space-4);
}

.footer h3 {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: var(--space-3);
}

.footer__links {
	display: grid;
	gap: var(--space-2);
}

.footer a {
	color: var(--text-muted);
	font-size: var(--text-sm);
	transition: color 0.3s var(--ease);
}

.footer a:hover {
	color: var(--accent);
}

.footer p {
	font-size: var(--text-sm);
}

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-6);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	color: var(--text-faint);
}

/* ---------------------------------------------------------------- motion */

.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js .reveal.is-in {
	opacity: 1;
	transform: none;
}

.js .reveal:nth-of-type(2) {
	transition-delay: 0.09s;
}

.js .reveal:nth-of-type(3) {
	transition-delay: 0.18s;
}

/* --------------------------------------------------------------- utility */

.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.noselect {
	-webkit-user-select: none;
	user-select: none;
}

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

.skip-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 200;
	padding: var(--space-2) var(--space-4);
	background: var(--btn-bg);
	color: var(--btn-text);
	font-size: var(--text-sm);
	border-radius: var(--radius);
	transform: translateY(-160%);
	transition: transform 0.25s var(--ease);
}

.skip-link:focus-visible {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.js .reveal {
		opacity: 1;
		transform: none;
	}

	.hero__slide img {
		animation: none;
	}
}