/* ==========================================================================
   Rust wat — main.css
   Tokens → fonts → base → utilities → components → header/mega → sections → footer → pages → motion → responsive
   Desktop is built on the Figma frame (1520px): 1 Figma px = var(--u), = 1px from 1520 up (header max 1440, content 1280), smaller below.
   ========================================================================== */

/* ---------- Tokens ---------- */
@property --c-bg { syntax: '<color>'; inherits: true; initial-value: #fff9f1; }
@property --c-ink { syntax: '<color>'; inherits: true; initial-value: #27423d; }

:root {
	--c-green: #27423d;       /* Figma: tekst / knoppen / groen blok */
	--c-beige: #fff9f1;       /* Figma: achtergrond */
	--c-paper: #fff9f1;
	--c-dot: #61ff4c;         /* Figma: Ellipse 2 (open) */
	--c-dot-closed: #e5484d;  /* closed: red */
	--c-bg: var(--c-beige);
	--c-ink: var(--c-green);

	--f-serif: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
	--f-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* 1 Figma px: exactly 1px from the frame width (1520) up, scales down below it. */
	--u: calc(min(100vw, 1520px) / 1520);
	--gutter: max(20px, calc(120 * var(--u)));
	--container: calc(1280 * var(--u));
	--radius: 10px;
	/* Minimum space between sections: the scaled Figma values get too tight on smaller screens. */
	--gap-section: 96px;

	--fs-h1: max(40px, calc(80 * var(--u)));
	--fs-h2: max(34px, calc(70 * var(--u)));
	--fs-body: max(17px, calc(22 * var(--u)));
	--fs-nav: max(16px, calc(20 * var(--u)));
	--fs-small: max(15px, calc(18 * var(--u)));
	--fs-xs: max(13px, calc(16 * var(--u)));

	--ease-osmo: cubic-bezier(0.625, 0.05, 0, 1);
	--ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
	--ease-curtain: cubic-bezier(0.76, 0, 0.24, 1);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--fade: 1.4s;
}

/* Page fade: the whole page turns green while the green block fills the viewport (main.js › initPageFade). */
html { transition: --c-bg 0.45s ease, --c-ink 0.45s ease; }
html.is-green { --c-bg: var(--c-green); --c-ink: var(--c-beige); transition-duration: var(--fade); }

/* ---------- Fonts (self-hosted, latin + latin-ext) ---------- */
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/cormorant-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/cormorant-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/dm-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/dm-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
	margin: 0;
	background-color: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--f-sans);
	font-weight: 500;
	font-size: var(--fs-body);
	line-height: 1.1818;
	text-transform: lowercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
/* Photos and videos cannot be selected or dragged out of the page. */
img, video, canvas { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--f-serif); font-weight: 400; text-transform: uppercase; line-height: 1; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* Follows the page colours, so a selection is also visible on green (events, the green block). */
::selection { background: var(--c-ink); color: var(--c-bg); }
body.is-locked { overflow: hidden; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.main { display: block; outline: none; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 200; padding: 12px 18px; background: var(--c-green); color: var(--c-beige); border-radius: 100px; }
.skip-link:focus { top: 16px; }

/* ---------- Button (Osmo button 040, mirrored: arrow on the left, moves right on hover) ---------- */
.button {
	--button-h: max(46px, calc(58 * var(--u)));
	--button-icon-w: calc(var(--button-h) * 60.73 / 58.05);
	--button-gap: max(3px, calc(4.27 * var(--u)));
	--button-bg: var(--c-green);
	--button-fg: var(--c-beige);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--button-gap);
	height: var(--button-h);
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: var(--fs-small);
	line-height: 1;
	color: var(--button-fg);
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	cursor: pointer;
}
.button--light { --button-bg: var(--c-beige); --button-fg: var(--c-green); }
span.button { cursor: default; }
.button::after {
	content: '';
	position: absolute;
	inset: -0.125em;
	border-radius: 100px;
	pointer-events: none;
	transition: box-shadow 0.3s var(--ease-focus);
}
.button:focus-visible::after { box-shadow: 0 0 0 2px var(--button-bg); }
.button__icon-wrap {
	position: relative;
	height: 100%;
	aspect-ratio: 60.73 / 58.05;
	flex: none;
	transform-origin: right center;
	scale: 0;
	transition: scale 0.6s var(--ease-osmo);
}
.button__icon-wrap.is--duplicate { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: left center; scale: 1; }
.button__icon { position: absolute; inset: 0; display: grid; place-items: center; }
.button__lily { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--button-bg); }
.button__arrow { position: relative; width: max(16px, calc(20 * var(--u))); height: auto; color: var(--button-fg); rotate: -45deg; transition: rotate 0.6s var(--ease-osmo); }
.button__icon-wrap.is--duplicate .button__arrow { rotate: 0deg; }
.button__text-wrap {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 max(22px, calc(33 * var(--u)));
	border-radius: 100px;
	background: var(--button-bg);
	white-space: nowrap;
	translate: calc(var(--button-icon-w) + var(--button-gap)) 0 0;
	transition: translate 0.6s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.button:is(:hover, :focus-visible) .button__text-wrap { translate: 0 0 0; transition: translate 0.735s 0.05s var(--ease-osmo); }
	.button:is(:hover, :focus-visible) .button__icon-wrap { scale: 1; transition: scale 0.735s 0.05s var(--ease-osmo); }
	.button:is(:hover, :focus-visible) .button__icon-wrap.is--duplicate { scale: 0; }
	.button:is(:hover, :focus-visible) .button__icon-wrap.is--duplicate .button__arrow { rotate: -45deg; }
	.button:is(:hover, :focus-visible) .button__arrow { rotate: 0deg; transition: rotate 0.735s 0.05s var(--ease-osmo); }
}
/* Pill (Figma 2026-10): only the pill with the text, no arrow and no movement; a light colour change on hover. */
.button--pill .button__text-wrap, .button--pill:is(:hover, :focus-visible) .button__text-wrap { translate: 0 0 0; }
/* The hover tint is a layer over the pill (not a transition on its background), so the pill itself follows the page
   fade at exactly the same pace as the text. */
.button--pill .button__text-wrap { position: relative; isolation: isolate; }
.button--pill .button__text-wrap::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--button-fg); opacity: 0; transition: opacity 0.35s ease; }
.button--pill:is(:hover, :focus-visible) .button__text-wrap::before { opacity: 0.14; }
/* In the green block the buttons switch with the page fade: green on beige, beige on green. A quick switch of their own
   (not the slow page colours, where pill and text pass through the same colour halfway and the text disappears). */
.green .button--light, .hero__button .button { --button-bg: var(--c-green); --button-fg: var(--c-beige); transition: color 0.35s ease; }
html.is-green .green .button--light, html.is-green .hero__button .button { --button-bg: var(--c-beige); --button-fg: var(--c-green); }
.green .button--light .button__text-wrap, .hero__button .button__text-wrap { transition: background-color 0.35s ease; }

/* Socials list */
.socials { display: flex; flex-wrap: wrap; gap: 0 max(14px, calc(20 * var(--u))); }
.socials a, .footer a, .footer__hours-open, .mega__info a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease-out); }
.socials a:hover, .footer a:hover, .footer__hours-open:hover, .mega__info a:hover { background-size: 100% 1px; }

/* ---------- Header ---------- */
.header {
	position: fixed;
	z-index: 100;
	top: max(12px, calc(40 * var(--u)));
	left: 0;
	right: 0;
	width: min(1440px, 100% - 2 * max(12px, calc(40 * var(--u))));
	margin-inline: auto;
	transition: translate 0.6s var(--ease-osmo);
}
.admin-bar .header { top: calc(32px + max(12px, calc(40 * var(--u)))); }
.header__pill {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: max(64px, calc(100 * var(--u)));
	padding: 0 max(12px, calc(58 * var(--u))) 0 max(12px, calc(58 * var(--u)));
	border: 2px solid var(--c-beige);
	border-radius: 100px;
	background: rgb(255 249 241 / 0.85);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	color: var(--c-green);
	transition: background-color 0.4s ease;
}
.header__pill > :first-child { justify-self: start; }
.menu-toggle { display: flex; align-items: center; gap: calc(104 * var(--u)); grid-column: 1; grid-row: 1; justify-self: start; }
.menu-toggle__svg { width: max(46px, calc(60.73 * var(--u))); height: auto; color: var(--c-green); overflow: visible; }
/* Round focus ring around the round button (not a square around the whole link). */
.menu-toggle:focus-visible { outline: none; }
.menu-toggle:focus-visible .menu-toggle__svg { outline: 2px solid var(--c-green); outline-offset: 4px; border-radius: 50%; }
.menu-toggle__svg > path:first-child { transition: scale 0.6s var(--ease-osmo); transform-origin: center; transform-box: fill-box; }
.menu-toggle__line { fill: none; stroke: var(--c-beige); stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform 0.6s var(--ease-osmo); }
.menu-toggle__line--2 { transform-origin: left center; }
@media (hover: hover) and (pointer: fine) {
	.menu-toggle:hover .menu-toggle__svg > path:first-child { scale: 1.06; }
	.menu-toggle:hover .menu-toggle__line--2 { transform: scaleX(1.513); }
}
.menu-toggle[aria-expanded='true'] .menu-toggle__line--1 { transform: translateY(4.15px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__line--2 { transform-origin: center; transform: translate(4.15px, -4.15px) rotate(-45deg) scaleX(1.513); }

.header__nav { grid-column: 1; grid-row: 1; justify-self: start; margin-left: calc(60.73 * var(--u) + 104 * var(--u)); }
.nav__list { display: flex; gap: calc(50 * var(--u)); white-space: nowrap; }
.nav__link { position: relative; font-weight: 400; font-size: var(--fs-nav); line-height: 1; display: inline-block; padding: 6px 0; }
.nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; scale: 0 1; transform-origin: right; transition: scale 0.5s var(--ease-osmo); }
.nav__link:hover::after, .nav__item--current .nav__link::after { scale: 1 1; transform-origin: left; }

.header__logo { grid-column: 2; display: block; width: max(120px, calc(200 * var(--u))); color: var(--c-green); }
.header__logo-svg { width: 100%; height: auto; }

/* The status takes all the room between logo and button and centres itself in it, whatever the length of its text. */
.header__end { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.header__status { flex: 1; display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0; font-weight: 400; font-size: var(--fs-nav); line-height: 1; white-space: nowrap; }
.status__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-dot); flex: none; }
.status.is-closed .status__dot { background: var(--c-dot-closed); }
.status.is-open .status__dot { box-shadow: 0 0 0 0 rgb(97 255 76 / 0.6); animation: status-pulse 2.4s ease-out infinite; }
@keyframes status-pulse { 0% { box-shadow: 0 0 0 0 rgb(97 255 76 / 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgb(97 255 76 / 0); } }
.header__cta { flex: none; }

/* ---------- Mega menu ---------- */
.mega {
	--mx: 60px;
	--my: 60px;
	/* Space kept free for the header at the top (and mirrored at the bottom, so the content sits in the middle). */
	--mega-top: calc(max(64px, 100 * var(--u)) + max(12px, 40 * var(--u)) + min(5dvh, 40px));
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	background: var(--c-beige);
	color: var(--c-green);
	clip-path: circle(0 at var(--mx) var(--my));
	visibility: hidden;
	transition: clip-path 0.9s var(--ease-curtain), visibility 0s 0.9s;
	overflow: hidden;
}
.mega.is-open { clip-path: circle(150vmax at var(--mx) var(--my)); visibility: visible; transition: clip-path 1s var(--ease-curtain), visibility 0s; }
.mega__inner {
	flex: 1;
	display: grid;
	/* Links left and info right on the same edges as the header buttons; the photo sits in between with equal space on
	   both sides (space-between), so it is centred between the links and the info rather than on the page. */
	grid-template-columns: auto auto auto;
	justify-content: space-between;
	gap: calc(60 * var(--u));
	/* Links and info start on the same line as the top of the photo, whatever their height. */
	align-items: start;
	align-content: center;
	width: min(100% - 2 * (max(12px, 40 * var(--u)) + 60 * var(--u)), calc(1320 * var(--u)));
	margin-inline: auto;
	padding-block: var(--mega-top);
	min-height: 0;
}
.mega__nav { justify-self: start; }
.mega__eyebrow, .mega__label { font-size: var(--fs-xs); opacity: 0.5; margin-bottom: min(2.4dvh, 20px); }
.mega-nav { display: grid; gap: min(1.4dvh, 12px); }
.mega-nav__link {
	display: inline-flex;
	align-items: flex-start;
	gap: 14px;
	font-family: var(--f-serif);
	text-transform: uppercase;
	font-size: min(max(40px, calc(70 * var(--u))), 7.6dvh);
	line-height: 0.95;
	transition: translate 0.6s var(--ease-osmo), opacity 0.4s ease;
}
.mega-nav__index { font-family: var(--f-sans); font-size: var(--fs-xs); line-height: 1; margin-top: 0.5em; opacity: 0.5; }
/* A link never breaks over two lines ("werken bij"): the photo is capped so the columns stay wide enough. */
.mega-nav__label { position: relative; white-space: nowrap; }
.mega-nav__link.is-current .mega-nav__label::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 2px; background: currentColor; }
@media (hover: hover) and (pointer: fine) {
	.mega-nav:hover .mega-nav__link { opacity: 0.32; }
	.mega-nav .mega-nav__link:hover, .mega-nav .mega-nav__link:focus-visible { opacity: 1; translate: calc(24 * var(--u)) 0; }
}
.mega__media { position: relative; justify-self: center; align-self: center; aspect-ratio: 3 / 4; height: min(58dvh, calc(460 * var(--u)), calc(100dvh - 2 * var(--mega-top))); }
/* Photo per link: a soft crossfade. The new photo fades in on top; the previous one stays underneath
   for a moment and only then fades out, so there is never an empty frame or a hard cut. */
.mega__photo {
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
	overflow: hidden;
	opacity: 0;
	transform: rotate(2deg) scale(1.03);
	transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;
}
.mega__photo img { width: 100%; height: 100%; object-fit: cover; }
.mega__photo.is-active { z-index: 2; opacity: 1; transform: rotate(2deg) scale(1); transition: opacity 0.45s ease, transform 1.1s var(--ease-out); }
.mega__info { display: grid; gap: min(3.4dvh, 34px); justify-self: end; width: min(100%, calc(320 * var(--u))); font-size: var(--fs-nav); line-height: 1.3; }
.mega__hours { display: grid; gap: 4px; }
.mega__hours-row { display: flex; justify-content: space-between; gap: 20px; }
.mega__hours dd { font-variant-numeric: tabular-nums; }
.mega__block--cta { display: grid; gap: min(2.6dvh, 22px); justify-items: start; }
.mega__note { font-size: var(--fs-small); opacity: 0.7; }

/* Staggered reveal of the menu content */
.mega [data-mega-reveal] { opacity: 0; translate: 0 32px; transition: opacity 0.4s ease, translate 0.4s var(--ease-osmo); }
.mega.is-open [data-mega-reveal] { opacity: 1; translate: 0 0; transition: opacity 0.7s ease, translate 0.9s var(--ease-osmo); transition-delay: calc(0.3s + var(--i, 0) * 0.07s); }

/* ---------- Home · hero ---------- */
.hero { position: relative; }
/* Full-bleed video (poster image while it loads, or when there is no video) that fades into the page background
   at the bottom. 600 × 1520 in Figma, so its height follows the viewport width; on very wide screens it stops at 82%
   of the screen height (at least 600px). The header floats on top. */
/* The media itself fades to transparent at the bottom (mask), so no edge of the video can show as a line. */
.hero__media { position: relative; height: calc(600 / 1520 * 100vw); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 97%); mask-image: linear-gradient(to bottom, #000 55%, transparent 97%); }
@media (min-width: 1521px) {
	.hero__media { height: max(600px, min(calc(600 / 1520 * 100vw), 82vh)); }
}
/* The layer is slightly taller than the box, so the parallax (motion.js) never shows an edge. */
.hero__layer { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; }
.hero__image, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%; }
.hero__video { opacity: 0; transition: opacity 0.8s ease; background: transparent; }
.hero__video.is-playing { opacity: 1; }
/* No video yet: the still drifts very slowly, so the header still feels alive. */
.hero__media:not(.has-video) .hero__image { animation: hero-drift 28s ease-in-out infinite alternate; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, 1%); } }
/* A light haze of the page colour over the video, a little stronger towards the bottom (the mask does the rest). */
.hero__fade {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--c-bg) 16%, transparent) 0%,
		color-mix(in srgb, var(--c-bg) 28%, transparent) 38%,
		color-mix(in srgb, var(--c-bg) 60%, transparent) 75%,
		color-mix(in srgb, var(--c-bg) 80%, transparent) 100%);
}
@media (prefers-reduced-motion: reduce) {
	.hero__video { display: none; }
	.hero__media .hero__image { animation: none; }
}
.hero__content {
	display: grid;
	grid-template-columns: calc(550 * var(--u)) 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: 'intro title' 'button title';
	align-items: start;
	align-content: center;
	gap: calc(30 * var(--u)) calc(40 * var(--u));
	margin-top: calc(100 * var(--u));
}
.hero__title { grid-area: title; justify-self: end; text-align: right; font-size: var(--fs-h1); line-height: 1; white-space: nowrap; }
.hero__intro { grid-area: intro; max-width: calc(470 * var(--u)); margin-top: calc(32 * var(--u)); display: grid; gap: calc(26 * var(--u)); justify-items: start; }
.hero__button { grid-area: button; }
.hero__intro-title { font-weight: 700; }

/* ---------- Home · collage (plates and lilies) ---------- */
/* A row of transparent cut-outs across the full Figma width (1520), overlapping like in the design, on the beige
   background. Hover: Osmo "Collage Focus Card on Hover", as before. */
.collage { position: relative; z-index: 2; padding-top: calc(48 * var(--u)); pointer-events: none; }
.collage__stage { position: relative; width: calc(1520 * var(--u)); height: calc(438 * var(--u)); margin-inline: auto; }
.collage__list { position: relative; width: 100%; height: 100%; }
/* Placed by their centre (--cx/--cy) with their own (unrotated) size, then turned (--r) like in Figma. */
.collage__item { position: absolute; left: calc((var(--cx) - var(--w) / 2) * var(--u)); top: calc((var(--cy) - var(--h) / 2) * var(--u)); width: calc(var(--w) * var(--u)); aspect-ratio: var(--w) / var(--h); z-index: var(--z, 1); pointer-events: none; }
.collage__item[data-interactive-collage-focus] { z-index: 20; }
.collage__inner { position: relative; width: 100%; height: 100%; will-change: transform; }
.collage__turn { position: absolute; inset: 0; rotate: var(--r, 0deg); }
.collage__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Only the plate or leaf itself reacts, the transparent corners let the one underneath through. */
.collage__hit { position: absolute; inset: 9%; border-radius: 50%; pointer-events: auto; }
/* From Figma (rustwat - home v2), left to right: centre, size, rotation; --z is the stacking order of the design.
   The centres are spread 8% wider around the middle of the row than in Figma, for a bit more air. */
.collage__item.is--1 { --cx: 166.5; --cy: 207; --w: 333; --h: 250; --z: 1; }
.collage__item.is--2 { --cx: 385.8; --cy: 176; --w: 239; --h: 220; --z: 3; }
.collage__item.is--3 { --cx: 586.9; --cy: 263.9; --w: 381; --h: 286; --r: -10deg; --z: 5; }
.collage__item.is--4 { --cx: 791.9; --cy: 228; --w: 239; --h: 220; --z: 6; }
.collage__item.is--5 { --cx: 969.2; --cy: 175.9; --w: 286; --h: 286; --r: 10.7deg; --z: 4; }
.collage__item.is--6 { --cx: 1125.6; --cy: 280; --w: 239; --h: 220; --z: 2; }
.collage__item.is--7 { --cx: 1356.9; --cy: 213.9; --w: 381; --h: 286; --r: 10.7deg; --z: 7; }

/* Below 1024px the plates are an endless slider (main.js › initPlatesMarquee doubles them; -50% is one full round).
   Sizes relative to the largest plate (381 in Figma), so the proportions stay those of the design. */
.is-marquee { --s: clamp(240px, 64vw, 360px); width: 100%; height: auto; overflow-x: clip; }
.is-marquee .collage__list { display: flex; align-items: center; width: max-content; height: auto; animation: plates-run 45s linear infinite; will-change: transform; }
.is-marquee .collage__item { position: relative; left: auto; top: auto; flex: none; width: calc(var(--w) / 381 * var(--s)); margin-inline: calc(var(--s) * -0.12); }
.is-marquee .collage__hit { pointer-events: none; }
@keyframes plates-run { to { transform: translateX(-50%); } }
.collage__item.is-clone { display: none; }
.is-marquee .collage__item.is-clone { display: block; }
@media (prefers-reduced-motion: reduce) {
	.is-marquee { overflow-x: auto; }
	.is-marquee .collage__list { animation: none; }
}

/* ---------- Home · green block ---------- */
.green { position: relative; margin-top: calc(130 * var(--u)); padding: calc(230 * var(--u)) 0 calc(236 * var(--u)); isolation: isolate; }
.green__content { position: relative; z-index: 1; }
.green__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.green__title { max-width: calc(850 * var(--u)); font-size: var(--fs-h2); line-height: 1; }
.green__button { margin-right: calc(6 * var(--u)); }
.green__text { width: min(100%, calc(1000 * var(--u))); margin: calc(40 * var(--u)) calc(6 * var(--u)) 0 auto; text-align: right; line-height: 1.1818; }
/* Sidney & Gigi: photo (turned 2° counter-clockwise, Figma) left, title, text, places and a button right. */
.duo { display: grid; grid-template-columns: calc(420 * var(--u)) 1fr; align-items: center; gap: calc(98 * var(--u)); margin-top: max(var(--gap-section), calc(140 * var(--u))); }
.duo__media { position: relative; aspect-ratio: 420 / 500; border-radius: var(--radius); overflow: hidden; rotate: -2deg; }
/* On hover the water effect of the menu cards (water.js) appears over the photo (main.js › initDuoWater). */
.duo__media.is-water .duo__image, .contact__map.is-water .contact__video { opacity: 0; }
.duo__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; }
/* Next to the text the photo grows with it (at least the 500 of the design), so it never looks small beside a long text. */
@media (min-width: 768px) {
	.duo__media { align-self: stretch; aspect-ratio: auto; min-height: calc(500 * var(--u)); }
}
.duo__body { max-width: calc(756 * var(--u)); }
.duo__title { font-size: var(--fs-h2); line-height: 1; }
/* Cormorant capitals leave room below the last line, so less margin than Figma's 40 keeps it visually tight. */
.duo__text { margin-top: calc(20 * var(--u)); font-size: var(--fs-small); line-height: 1.2222; }
.duo__places { display: flex; flex-wrap: wrap; white-space: nowrap; gap: calc(10 * var(--u)) calc(35 * var(--u)); margin-top: calc(30 * var(--u)); line-height: 1.1818; }
.duo__place.is-muted { opacity: 0.5; }
.duo { position: relative; }
.duo__float { position: absolute; left: 0; top: 0; z-index: 3; width: calc(330 * var(--u)); aspect-ratio: 422 / 324; border-radius: var(--radius); overflow: hidden; pointer-events: none; visibility: hidden; opacity: 0; }
.duo__float-image { width: 100%; height: 100%; object-fit: cover; }
.duo__link { text-decoration: none; -webkit-tap-highlight-color: transparent; }
@media (hover: none), (pointer: coarse), (max-width: 767px) {
	.duo__float { display: none; }
}
.duo__button { margin-top: calc(30 * var(--u)); }

/* ---------- Home · menu card slider ---------- */
.menus { padding-top: max(var(--gap-section), calc(140 * var(--u))); overflow-x: clip; }
.menus__stage {
	--slide-w: max(230px, calc(400 * var(--u)));
	--slide-gap: max(12px, calc(20 * var(--u)));
	--slide-h: max(288px, calc(500 * var(--u)));
	position: relative;
	height: var(--slide-h);
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.menus__stage.is-dragging { cursor: grabbing; }
.menus__track { position: absolute; inset: 0; }
.menus__slide { position: absolute; left: 50%; top: 50%; width: var(--slide-w); height: var(--slide-h); margin-left: calc(var(--slide-w) / -2); margin-top: calc(var(--slide-h) / -2); will-change: transform; }
.menus__card { position: absolute; left: 0; right: 0; top: 50%; height: var(--h, 100%); translate: 0 -50%; border-radius: var(--radius); overflow: hidden; display: block; -webkit-user-drag: none; }
.menus__image { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.menus__stage.has-webgl .menus__image { opacity: 0; }
.menus__canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.menus__drag {
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	width: max(84px, calc(119.45 * var(--u)));
	aspect-ratio: 119.45 / 114.29;
	display: grid;
	place-items: center;
	color: var(--c-ink);
	pointer-events: none;
	translate: var(--dx, calc(50vw + 150 * var(--u))) var(--dy, calc(250 * var(--u)));
	transition: scale 0.4s var(--ease-osmo);
}
.menus__drag-lily { position: absolute; inset: 0; width: 100%; height: 100%; }
.menus__drag-label { position: relative; color: var(--c-bg); font-weight: 400; font-size: max(17px, calc(22 * var(--u))); line-height: 1; }
.menus__stage.is-dragging .menus__drag { scale: 0.86; }
.menus__nav { display: flex; align-items: center; justify-content: space-between; width: max(260px, calc(300 * var(--u))); margin: calc(30 * var(--u)) auto 0; }
.menus__arrow { display: grid; place-items: center; width: 44px; height: 44px; margin: -15px; color: var(--c-ink); }
.menus__arrow .icon { width: max(32px, calc(40 * var(--u))); transition: translate 0.4s var(--ease-osmo); }
.menus__arrow--prev .icon { scale: -1 1; }
.menus__arrow--prev:hover .icon { translate: -6px 0; }
.menus__arrow--next:hover .icon { translate: 6px 0; }
.menus__name { font-size: max(22px, calc(30 * var(--u))); line-height: 1; text-align: center; min-width: 6em; }
.menus__name.is-changing { animation: name-swap 0.5s var(--ease-osmo); }
@keyframes name-swap { 0% { opacity: 0; translate: 0 10px; } 100% { opacity: 1; translate: 0 0; } }

/* ---------- Home · text block ---------- */
.text-block { padding-top: max(var(--gap-section), calc(140 * var(--u))); text-align: center; }
.text-block__eyebrow { font-size: var(--fs-nav); line-height: 1; opacity: 0.5; }
.text-block__title { max-width: calc(1200 * var(--u)); margin: calc(40 * var(--u)) auto 0; font-size: var(--fs-h2); line-height: 1; }
.text-block__body { max-width: calc(1100 * var(--u)); margin: calc(40 * var(--u)) auto 0; font-size: var(--fs-small); line-height: 1.2222; }

/* ---------- Sub pages · header ---------- */
/* Photo with a fade from 70% green at the top to the page colour at the bottom (Figma: 1520 × 530). The fade uses the
   page colour, so it also runs out seamlessly on the green events page. The media itself fades out too (mask), so no
   edge of the photo can show as a line. The header floats on top. */
.page-hero { position: relative; height: calc(530 / 1520 * 100vw); color: var(--c-beige); }
@media (min-width: 1521px) {
	.page-hero { height: max(530px, min(calc(530 / 1520 * 100vw), 70vh)); }
}
.page-hero__media {
	position: absolute; inset: 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 99%);
	mask-image: linear-gradient(to bottom, #000 85%, transparent 99%);
}
.page-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.page-hero__fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(39 66 61 / 0.7) 0%, var(--c-bg) 100%); }
.page-hero__inner { position: relative; height: 100%; display: flex; justify-content: center; }
.page-hero__title { margin-top: calc(270 * var(--u)); max-width: calc(800 * var(--u)); font-size: var(--fs-h2); line-height: 1; text-align: center; color: var(--c-beige); }

/* ---------- Sub pages · intro ---------- */
.intro { padding-top: calc(81 * var(--u)); }
.intro__text p + p { margin-top: 1.1818em; }
.intro__title { max-width: calc(1000 * var(--u)); font-size: var(--fs-h2); line-height: 1; }
.intro__text { width: min(100%, calc(950 * var(--u))); margin: calc(40 * var(--u)) calc(6 * var(--u)) 0 auto; text-align: right; line-height: 1.1818; }
.intro__link { display: table; margin: calc(40 * var(--u)) calc(6 * var(--u)) 0 auto; }
.intro--center { text-align: center; }
.intro--center .intro__title { max-width: none; }
.intro--center .intro__text { width: min(100%, calc(1100 * var(--u))); margin: calc(40 * var(--u)) auto 0; text-align: center; font-size: var(--fs-small); line-height: 1.2222; }
/* Underlined text links ("openstaande vacatures", "meer lezen", "pdf versie bekijken", "neem contact op"). */
.text-link { font-size: max(20px, calc(30 * var(--u))); line-height: 1; text-decoration: underline; text-decoration-thickness: max(1.5px, calc(2 * var(--u))); text-underline-offset: 0.2em; transition: opacity 0.3s ease; }
.text-link:hover { opacity: 0.6; }

/* ---------- Menu page · PDF viewer ---------- */
.viewer { padding-top: max(var(--gap-section), calc(190 * var(--u))); --gap: calc(26 * var(--u)); --page-w: calc(393.75 * var(--u)); }
.viewer__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: calc(30 * var(--u)); }
.viewer__side { font-size: max(13px, calc(15 * var(--u))); line-height: 1; text-transform: lowercase; opacity: 0.7; transition: opacity 0.3s ease; }
.viewer__side:hover { opacity: 1; }
.viewer__side--prev { justify-self: end; }
.viewer__side--next { justify-self: start; }
.viewer__name { text-transform: lowercase; font-family: var(--f-sans); font-weight: 500; font-size: max(22px, calc(30 * var(--u))); line-height: 1; }
.viewer__intro { max-width: calc(760 * var(--u)); margin: calc(20 * var(--u)) auto 0; text-align: center; font-size: max(14px, calc(16 * var(--u))); line-height: 1.375; }
.viewer__stage { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; gap: calc(50 * var(--u)); margin-top: calc(30 * var(--u)); }
.viewer__arrow { display: grid; place-items: center; width: 56px; height: 56px; color: var(--c-ink); transition: opacity 0.3s ease, translate 0.4s var(--ease-osmo); }
.viewer__arrow .icon { width: max(32px, calc(40 * var(--u))); }
.viewer__arrow--prev .icon { scale: -1 1; }
.viewer__arrow:disabled { opacity: 0.2; cursor: default; }
.viewer__arrow--prev:not(:disabled):hover { translate: -6px 0; }
.viewer__arrow--next:not(:disabled):hover { translate: 6px 0; }
.viewer__book { position: relative; display: flex; gap: var(--gap); perspective: 2400px; }
.viewer__page { position: relative; width: var(--page-w); aspect-ratio: var(--page-ar, 393.75 / 900); background: #fff; }
.viewer__page.is-empty { background: transparent; }
.viewer__book.is-single .viewer__page--right { display: none; }
.viewer__canvas, .viewer__blank { display: block; width: 100%; height: 100%; }
.viewer__loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-xs); opacity: 0.5; }
.viewer__loading[hidden] { display: none; }
/* The turning leaf: front = the page that turns, back = the page it reveals on the other side. */
.viewer__leaf { position: absolute; top: 0; width: var(--page-w); height: 100%; transform-style: preserve-3d; z-index: 3; }
.viewer__leaf--right { left: calc(var(--page-w) + var(--gap)); transform-origin: calc(var(--gap) / -2) 50%; }
.viewer__leaf--left { left: 0; transform-origin: calc(100% + var(--gap) / 2) 50%; }
.viewer__face { position: absolute; inset: 0; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.viewer__face--back { transform: rotateY(180deg); }
.viewer__face canvas, .viewer__face .viewer__blank { display: block; width: 100%; height: 100%; }
.viewer__foot { margin-top: calc(30 * var(--u)); text-align: center; }
.viewer__pdf { font-size: max(16px, calc(20 * var(--u))); }

/* ---------- Events (green page) ---------- */
body.is-green-page { --c-bg: var(--c-green); --c-ink: var(--c-beige); }
.collage--photos { padding-top: max(var(--gap-section), calc(160 * var(--u))); pointer-events: auto; }
.collage--photos .collage__stage { width: calc(1300 * var(--u)); height: auto; aspect-ratio: 1300 / 752.58; }
.collage--photos .collage__item { pointer-events: auto; --r: 0deg; }
.collage--photos .collage__inner { border-radius: var(--radius); overflow: hidden; }
.collage--photos .collage__image { object-fit: cover; }
.collage--photos .collage__hit { inset: 0; border-radius: 0; }
.collage--photos .collage__item.is--1 { left: 74.57%; top: 13.56%; width: 25.43%; aspect-ratio: 1; z-index: 0; }
.collage--photos .collage__item.is--2 { left: 0; top: 16.24%; width: 31.15%; aspect-ratio: 404.99 / 306.13; z-index: 0; }
.collage--photos .collage__item.is--3 { left: 7.69%; top: 46.19%; width: 25.35%; aspect-ratio: 1; z-index: 1; }
.collage--photos .collage__item.is--4 { left: 37.69%; top: 0; width: 23.39%; aspect-ratio: 304.01 / 404.99; z-index: 0; }
.collage--photos .collage__item.is--5 { left: 21.01%; top: 34.15%; width: 31.32%; aspect-ratio: 407.11 / 306.13; z-index: 1; }
.collage--photos .collage__item.is--6 { left: 49.39%; top: 24.58%; width: 31.32%; aspect-ratio: 407.11 / 302.94; z-index: 1; }
.collage--photos .collage__item.is--7 { left: 62.55%; top: 43.36%; width: 30.01%; aspect-ratio: 390.11 / 305.07; z-index: 1; }
.collage--photos .collage__item.is--8 { left: 40.8%; top: 56.21%; width: 25.35%; aspect-ratio: 1; z-index: 1; }
.collage--photos .collage__item[data-interactive-collage-focus] { z-index: 20; }
/* Events below 1024px: the same endless slider as the plates on home. */
.collage--photos .collage__stage.is-marquee { width: 100%; aspect-ratio: auto; }
.collage--photos .is-marquee .collage__item.collage__item { left: auto; top: auto; width: calc(var(--s) * 0.9); margin-inline: calc(var(--s) * -0.05); pointer-events: none; }
.closing { padding-top: max(var(--gap-section), calc(161 * var(--u))); }
.closing__inner { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; }
.closing__title { max-width: calc(850 * var(--u)); font-size: var(--fs-h2); line-height: 1; }
.closing__text { grid-column: 1 / -1; width: min(100%, calc(950 * var(--u))); margin: calc(40 * var(--u)) calc(6 * var(--u)) 0 auto; text-align: right; line-height: 1.1818; }
.closing__cta { grid-column: 1 / -1; width: min(100%, calc(1000 * var(--u))); margin: calc(40 * var(--u)) calc(6 * var(--u)) 0 auto; text-align: right; font-weight: 700; }
.closing__cta a { text-decoration: underline; text-underline-offset: 0.15em; }
.closing__button { grid-column: 1 / -1; justify-self: end; margin: calc(40 * var(--u)) calc(6 * var(--u)) 0 0; }
/* Events · business block (same layout as Sidney & Gigi on the home page) and the list of occasions. */
.duo--events { padding-top: max(var(--gap-section), calc(170 * var(--u))); margin-top: 0; }
.occasions { padding-top: max(var(--gap-section), calc(200 * var(--u))); text-align: center; }
.occasions__title { font-size: var(--fs-h2); line-height: 1; }
.occasions__list { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(14 * var(--u)) calc(50 * var(--u)); max-width: calc(1120 * var(--u)); margin: calc(40 * var(--u)) auto 0; font-size: var(--fs-small); }
.footer__duck--badge { width: max(150px, calc(254 * var(--u))); left: calc(50% - 127 * var(--u)); color: var(--c-green); }

/* ---------- Contact ---------- */
.contact { padding-top: max(var(--gap-section), calc(160 * var(--u))); }
.contact__inner { display: grid; grid-template-columns: 1fr calc(560 * var(--u)); align-items: center; gap: calc(80 * var(--u)); }
.contact__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(60 * var(--u)) calc(60 * var(--u)); align-content: start; }
.contact__label { font-size: var(--fs-xs); opacity: 0.5; margin-bottom: calc(14 * var(--u)); }
.contact__value { font-size: var(--fs-nav); line-height: 1.3; }
.contact__value a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease-out); }
.contact__value a:hover { background-size: 100% 1px; }
.contact__link { display: inline-block; margin-top: calc(18 * var(--u)); font-size: max(16px, calc(20 * var(--u))); }
.contact__hours { display: grid; gap: 4px; font-size: var(--fs-nav); }
.contact__hours-row { display: flex; justify-content: space-between; gap: 24px; }
.contact__hours dd { font-variant-numeric: tabular-nums; }
.contact__block--cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
/* The header video as a slightly turned card (like the video card on Werken bij), always playing. */
.contact__map { position: relative; display: block; aspect-ratio: 422 / 324; border-radius: var(--radius); overflow: hidden; rotate: 3deg; }
.contact__video, .contact__image { display: block; width: 100%; height: 100%; object-fit: cover; }

.intro__button { display: flex; justify-content: flex-end; margin: calc(40 * var(--u)) calc(6 * var(--u)) 0 0; }
.contact-event { padding-top: max(var(--gap-section), calc(200 * var(--u))); }
.contact-event__inner { display: grid; row-gap: calc(40 * var(--u)); }
.contact-event__body { justify-self: end; width: min(100%, calc(950 * var(--u))); margin-right: calc(6 * var(--u)); text-align: right; }
.contact-event__title { max-width: none; font-size: var(--fs-h2); line-height: 1; }
.contact-event__text { line-height: 1.1818; }
.contact-event__mail { margin-top: calc(24 * var(--u)); font-weight: 700; }
.contact-event__mail a { text-decoration: underline; text-underline-offset: 0.15em; }
.contact-event__button { margin-top: calc(30 * var(--u)); }

/* ---------- Werken bij · vacancies ---------- */
.jobs { position: relative; padding-top: max(var(--gap-section), calc(207 * var(--u))); }
.jobs__inner { position: relative; }
.jobs__item + .jobs__item { border-top: 1px solid rgb(39 66 61 / 0.4); }
.jobs__link { display: grid; grid-template-columns: 1fr calc(500 * var(--u)) auto; align-items: center; gap: 24px; padding: calc(24 * var(--u)) calc(6 * var(--u)) calc(24 * var(--u)) 0; font-size: max(20px, calc(30 * var(--u))); line-height: 1; }
/* The location ("rust wat blaricum") in olive with a small circled ? (Figma), the hover target for the video. */
.jobs__location { justify-self: start; display: flex; align-items: flex-start; gap: calc(10 * var(--u)); color: #7b7444; }
.jobs__info { flex: none; width: max(10px, calc(13 * var(--u))); margin-top: calc(8 * var(--u)); }
.jobs__more { text-decoration: underline; text-decoration-thickness: max(1.5px, calc(2 * var(--u))); text-underline-offset: 0.2em; }
.jobs__link:hover .jobs__more { opacity: 0.6; }
.jobs__empty { font-size: var(--fs-body); }
/* The card with the header video (follows the mouse, see main.js › initJobs). */
.jobs__float { position: absolute; left: 0; top: 0; z-index: 2; width: calc(422 * var(--u)); aspect-ratio: 422 / 324; border-radius: var(--radius); overflow: hidden; pointer-events: none; visibility: hidden; opacity: 0; }
.jobs__video { width: 100%; height: 100%; object-fit: cover; }
/* Small screens and devices without a mouse: a tap on the location shows the video large, centred on the screen, for 5 seconds. */
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
	.jobs__float { position: fixed; left: 50%; top: 50%; z-index: 95; width: min(84vw, 640px, 95vh); }
}

/* ---------- Vacancy ---------- */
.vacancy { padding: calc(81 * var(--u)) 0 0; }
.vacancy__title { font-size: var(--fs-h2); line-height: 1; }
.vacancy__content.prose { max-width: none; text-transform: lowercase; }
.vacancy__content { margin-top: calc(40 * var(--u)); line-height: 1.1818; text-transform: lowercase; }
.vacancy__content h2, .vacancy__content h3 { font-family: var(--f-sans); font-weight: 700; font-size: var(--fs-body); margin-top: 1.6em; }
.vacancy__content ul { padding-left: 1.2em; list-style: disc; }
.vacancy__back { margin-top: calc(60 * var(--u)); }

/* ---------- Page transition (main.js › initTransitions): the megamenu's circle curtain ---------- */
.page-transition {
	position: fixed; inset: 0; z-index: 1100; pointer-events: none;
	background: var(--pt-c, var(--c-green));
	clip-path: circle(0 at var(--pt-x, 50%) var(--pt-y, 50%));
	transition: clip-path 0.85s var(--ease-curtain);
}
.page-transition.is-active { clip-path: circle(150vmax at var(--pt-x, 50%) var(--pt-y, 50%)); pointer-events: auto; }
/* The new page starts covered and the circle closes back to where the visitor clicked. */
html.is-entering::before {
	content: ''; position: fixed; inset: 0; z-index: 1100; pointer-events: none;
	background: var(--pt-c, var(--c-green));
	clip-path: circle(150vmax at var(--pt-x, 50%) var(--pt-y, 50%));
	transition: clip-path 0.95s var(--ease-curtain);
}
html.is-entering.is-entered::before { clip-path: circle(0 at var(--pt-x, 50%) var(--pt-y, 50%)); }

/* ---------- Footer ---------- */
.footer { position: relative; margin-top: max(var(--gap-section), calc(140 * var(--u))); padding: calc(208 * var(--u)) 0 calc(40 * var(--u)); overflow: hidden; }
.footer__duck { position: absolute; top: 0; left: calc(50% + 12 * var(--u)); width: max(120px, calc(200 * var(--u))); translate: 0 32%; transition: translate 1.1s var(--ease-osmo); }
.footer.is-visible .footer__duck { translate: 0 18%; }
.footer__duck { rotate: var(--duck-rot, 0deg); }
.footer__duck-svg { width: 100%; color: var(--c-green); transform-origin: 50% 100%; }
/* The duck can be hovered/clicked (it quacks); the text layer above lets the pointer through except on its links. */
.footer__duck { cursor: pointer; }
.footer__duck.is-quacking .footer__duck-svg { animation: duck-quack 0.45s ease-in-out; }
@keyframes duck-quack { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg) translateY(-6px); } 45% { transform: rotate(4deg) translateY(-3px); } 70% { transform: rotate(-2deg); } }
.footer__inner { pointer-events: none; }
.footer__inner a, .footer__inner p { pointer-events: auto; }
.footer__inner { position: relative; z-index: 1; }
.footer__row { display: grid; grid-template-columns: calc(276 * var(--u)) auto 1fr; align-items: end; line-height: 1.1818; }
.footer__socials { justify-self: end; }
.footer__hours-open { display: none; width: fit-content; margin-top: 0.6em; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; pointer-events: auto; }
/* Opening hours popup (footer link on small screens). */
.hours-popup { width: min(100vw - 40px, 360px); margin: auto; padding: 28px 24px 24px; border: 0; border-radius: var(--radius); background: var(--c-beige); color: var(--c-green); }
.hours-popup::backdrop { background: rgb(39 66 61 / 0.5); }
.hours-popup__close { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 40px; height: 40px; color: inherit; }
.hours-popup__close .icon { width: 20px; }
.hours-popup__title { padding-right: 32px; font-size: 34px; line-height: 1; }
.hours-popup__table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 16px; }
.hours-popup__table th, .hours-popup__table td { padding: 8px 0; border-top: 1px solid rgb(39 66 61 / 0.25); font-weight: 400; text-align: left; }
.hours-popup__table td { text-align: right; font-variant-numeric: tabular-nums; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: calc(50 * var(--u)); font-size: var(--fs-xs); line-height: 1; }

/* ---------- Pages ---------- */
.page-default { padding: calc(max(64px, 100 * var(--u)) + max(12px, 40 * var(--u)) + calc(140 * var(--u))) 0 calc(80 * var(--u)); }
.page-default__eyebrow { font-size: var(--fs-nav); opacity: 0.5; margin-bottom: 24px; }
.page-default__title { font-size: var(--fs-h1); }
.page-default__text { max-width: 36em; margin: 32px 0 40px; }
.prose { max-width: 50em; margin-top: 40px; text-transform: none; }
.prose > * + * { margin-top: 1em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Motion ---------- */
.js [data-reveal] { opacity: 0; translate: 0 28px; transition: opacity 0.9s ease, translate 1.1s var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
	.js [data-reveal] { opacity: 1; translate: none; }
}

/* ---------- Motion (assets/js/motion.js) ---------- */
/* Split titles: each word rises and fades in (no overflow masks: they changed the line box height in Safari). */
.split__word { display: inline-block; }
.split__inner { display: inline-block; will-change: transform; }
.is-split:not(.is-revealed):not(.is-scrub) .split__inner { opacity: 0; transform: translateY(60%); }
.js [data-split]:not(.is-split) { visibility: hidden; animation: rw-show 0s 3s forwards; }

/* Before the intro runs: header, hero and page titles wait (failsafe: shown after 4s without JS). */
.js:not(.is-ready) .header__pill,
.js:not(.is-ready) .hero__media,
.js:not(.is-ready) [data-hero-intro] { opacity: 0; animation: rw-opacity 0s 4s forwards; }
@keyframes rw-show { to { visibility: visible; } }
@keyframes rw-opacity { to { opacity: 1; } }

/* Preloader: the duck walks on the spot in the middle, the "eend moment geduld" joke at the bottom.
   The curtain (with duck and joke) slides up. */
/* The booking widget's floating button waits until the preloader is gone. */
.is-preloading #gstpln-widget-host { display: none; } /* Not visibility: the widget's shadow DOM sets that back to visible. */
.preloader { display: none; }
.is-preloading .preloader { display: block; position: fixed; inset: 0; z-index: 1000; pointer-events: none; animation: rw-hide 0s 10s forwards; }
@keyframes rw-hide { to { visibility: hidden; } }
.preloader__curtain { position: absolute; inset: 0; background: var(--c-beige); pointer-events: auto; will-change: transform; }
/* Centred with inset + margin (not translate: GSAP resets that when it animates the duck). */
.preloader__duck { --duck-h: min(62vh, 620px); position: absolute; inset: 0 0 max(40px, 6vh); margin: auto; height: var(--duck-h); width: calc(var(--duck-h) * 720 / 1280); opacity: 0; }
.preloader__canvas { display: block; width: 100%; height: 100%; }
.preloader__joke { position: absolute; left: 0; right: 0; bottom: max(28px, 6vh); margin: 0; text-align: center; font-size: var(--fs-nav); line-height: 1.2; color: var(--c-green); opacity: 0; white-space: nowrap; }
.preloader__d { display: inline-block; width: 0; opacity: 0; overflow: visible; vertical-align: bottom; transform-origin: 50% 100%; }
/* The video must stay "visible" or Chrome pauses it (muted autoplay policy): a near-invisible pixel in view. */
.preloader__video { position: fixed; left: 0; top: 0; width: 4px; height: 4px; opacity: 0.01; pointer-events: none; }
.preloader__duck.is-plain .preloader__video { position: static; opacity: 1; display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.6) brightness(1.15); }


@media (prefers-reduced-motion: reduce) {
	.js [data-split]:not(.is-split) { visibility: visible; }
	.js:not(.is-ready) .header__pill, .js:not(.is-ready) .hero__media, .js:not(.is-ready) [data-hero-intro] { opacity: 1; }
	.preloader { display: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.header__nav { display: none; }
	.mega__inner { grid-template-columns: 1fr 1fr; }
	.mega__media { display: none; }
}

/* Measured with the longest status text: below this the status and the button no longer fit side by side. */
@media (max-width: 1199px) {
	/* An arrow alone says nothing: without room for the text the button goes (it is in the page and the megamenu), and the
	   opening status moves to the right. */
	.header__cta { display: none; }
	.header__status { flex: none; margin: 0 max(8px, calc(58 * var(--u) - 12px)) 0 0; }
}

@media (max-width: 1023px) {
	.collage--plates { padding-top: var(--gap-section); }
	.green { margin-top: 0; padding: var(--gap-section) 0 0; }
}

@media (min-width: 768px) and (max-width: 1199px) {
	/* Side by side gets too narrow here: button left and title right on one row (like the green block), under it (40px) the text on the left, 80% wide. */
	.hero__content { grid-template-columns: auto 1fr; grid-template-rows: none; grid-template-areas: 'button title' 'intro intro'; align-items: center; gap: 40px; }
	.hero__intro { justify-self: start; width: 80%; max-width: none; margin-top: 0; }
	.hero__button { align-self: end; }
	.footer__duck { left: auto; right: calc(var(--gutter) + 24px); }
	.footer__row { grid-template-columns: auto auto; justify-content: start; column-gap: 56px; row-gap: 20px; }
	.footer__socials { grid-column: 1 / -1; justify-self: start; }
	.footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 767px) {
	:root { --gap-section: 80px; }
	:root { --gutter: 20px; }
	.header__pill { padding: 0 8px; border-width: 1.5px; }
	.header__logo { width: 112px; }
	.menu-toggle__svg { width: 46px; }
	.button { --button-h: 46px; }
	.preloader__duck { --duck-h: 54vh; }

	.mega__inner { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: min(36px, 4dvh); padding-top: calc(76px + 3dvh); padding-bottom: 32px; overflow-y: auto; }
	.mega__info { justify-self: auto; width: auto; }
	.mega-nav__link { font-size: min(52px, 7.4dvh, 11.5vw); }
	.mega__info { font-size: 16px; gap: 24px; }
	.mega__block:first-child { display: none; }

	.hero__media { height: 104vw; }
	.hero__content { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: 'title' 'button' 'intro'; margin-top: 28px; gap: 24px; }
	.hero__title { justify-self: start; text-align: left; white-space: normal; }
	.hero__intro { max-width: none; margin-top: 0; gap: 18px; }


	.green__head { grid-template-columns: 1fr; gap: 24px; }
	.green__text { width: 100%; text-align: left; margin: 28px 0 0; }
	.duo { grid-template-columns: 1fr; gap: 40px; }
	.duo__media { width: 80%; }
	.duo__body, .green__title { max-width: none; }
	.duo__text { margin-top: 16px; }
	.duo__button { margin-top: 32px; }
	.duo__places { gap: 6px 18px; }
	.green__title br, .text-block__title br { display: none; }

	.menus__stage { --slide-w: 62vw; --slide-h: calc(62vw * 1.25); --slide-gap: 12px; }
	.menus__drag { width: 84px; translate: calc(50vw + 16vw) calc(62vw * 0.5); }
	/* Arrows on the edges of the card; with a long name they get smaller instead of sticking out. */
	.menus__nav { width: 62vw; gap: 12px; margin-top: 20px; }
	.menus__arrow { flex: 0 1 40px; min-width: 18px; width: auto; margin: 0; }
	.menus__arrow--prev { justify-items: start; }
	.menus__arrow--next { justify-items: end; }
	.menus__arrow .icon { width: 100%; }
	.menus__name { flex: 0 1 auto; min-width: 0; text-wrap: balance; }

	.text-block__title, .text-block__body { margin-top: 24px; }

	/* The duck is bigger here and peeks in from the right edge of the screen. */
	.footer { padding-top: 72px; padding-bottom: 64px; }
	/* Head at the height of the address; the body runs off the bottom. */
	.footer__duck { top: 64px; bottom: auto; left: auto; right: -28px; width: 160px; translate: 0 22%; }
	.footer.is-visible .footer__duck { translate: 0 0; }
	.footer__inner { padding-right: 0; }
	/* Contact details 48px from the address; they stack below 600px, where they would run into the duck. */
	.footer__row { grid-template-columns: auto auto; justify-content: start; row-gap: 24px; column-gap: 48px; font-size: 16px; }
	.footer__socials { grid-column: 1 / -1; justify-self: start; }
	.footer__bottom { flex-direction: column; gap: 10px; margin-top: 32px; padding-right: 116px; }
}

/* Measured with the longest text ("gesloten, morgen om 12:00"): below this it no longer fits next to the logo.
   From here the opening hours are behind a link in the footer. */
@media (max-width: 659px) {
	.header__status { display: none; }
	.footer__hours-open { display: block; }
}

@media (max-width: 767px) and (max-height: 700px) {
	.mega__note { display: none; }
	.mega-nav__link { font-size: min(6.4dvh, 11.5vw); }
	.mega__eyebrow { display: none; }
}

@media (max-width: 599px) {
	.footer__row { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
	.footer__duck { width: 140px; right: -26px; }
	.footer__bottom { margin-top: 56px; padding-right: 100px; }
}

/* ---------- Sub pages · tablet and phone ---------- */
@media (max-width: 767px) {
	.page-hero { height: max(300px, 80vw); }
	.page-hero__title { margin-top: calc(76px + 13vw); max-width: 86vw; font-size: clamp(34px, 10vw, 48px); }
	.intro { padding-top: 40px; }
	.intro__text, .intro__link, .closing__text { margin-top: 28px; }
	.intro__title br, .closing__title br { display: none; }
	.intro__title, .closing__title { max-width: none; }
	.intro__text, .closing__text { width: 100%; margin-right: 0; text-align: left; }
	.intro__link { margin-left: 0; }
	.intro--center .intro__text { text-align: center; }
	/* Smaller on phones: the page plus both arrows stay well inside the screen. */
	.viewer { --page-w: min(64vw, 380px); }
	.viewer__head { column-gap: 14px; }
	.viewer__name { font-size: 20px; }
	.viewer__intro { max-width: none; margin-top: 14px; padding-inline: var(--gutter); font-size: 14px; }
	.viewer__side { font-size: 13px; }
	.viewer__stage { grid-template-columns: 28px auto 28px; gap: 8px; margin-top: 20px; }
	.viewer__arrow { width: 28px; height: 40px; }
	.viewer__arrow .icon { width: 22px; }
	.viewer__foot { margin-top: 20px; }
	.viewer__pdf { font-size: 16px; }
	.closing__inner { grid-template-columns: 1fr; row-gap: 24px; }
	.closing__button { justify-self: start; margin-right: 0; }
	.closing__text, .closing__cta { width: 100%; text-align: left; margin-left: 0; margin-right: 0; }
	.occasions__list { gap: 10px 22px; }
	.footer__duck--badge { width: 150px; left: auto; }
	.jobs__link { grid-template-columns: 1fr auto; grid-template-areas: 'title more' 'loc more'; row-gap: 8px; padding: 18px 0; }
	.jobs__title { grid-area: title; }
	.jobs__location { grid-area: loc; font-size: 15px; }
	.jobs__info { width: 10px; margin-top: 2px; }
	.jobs__more { grid-area: more; font-size: 16px; }
	.vacancy { padding-top: 40px; }
	.contact__inner { grid-template-columns: 1fr; gap: 48px; }
	.contact__details { grid-template-columns: 1fr; gap: 32px; }
	.contact__map { rotate: 2deg; }
	.intro__button { justify-content: flex-start; margin: 28px 0 0; }
	.contact-event__inner { row-gap: 24px; }
	.contact-event__body { justify-self: stretch; width: 100%; margin-right: 0; text-align: left; }
	.contact-event__mail { margin-top: 20px; }
	.contact-event__button { margin-top: 24px; }
	.contact-event__title br { display: none; }
}