/* ==========================================================================
   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;

	--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; }
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; }
::selection { background: var(--c-green); color: var(--c-beige); }
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); }
}

/* Socials list */
.socials { display: flex; flex-wrap: wrap; gap: 0 max(14px, calc(20 * var(--u))); }
.socials a, .footer a, .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, .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; }

.header__status { grid-column: 3; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 10px; margin-left: calc(89 * var(--u)); 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 { grid-column: 3; grid-row: 1; justify-self: end; }

/* ---------- 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. */
.hero__media { position: relative; height: calc(600 / 1520 * 100vw); overflow: hidden; clip-path: inset(0 0 1px 0); pointer-events: none; }
@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%); } }
/* Runs a few px past the bottom (and is solid there), so no sub-pixel edge of the video shows as a dark line
   (iOS Safari). */
.hero__fade {
	position: absolute; inset: 0 0 -4px;
	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) 72%, transparent) 70%,
		var(--c-bg) 96%);
}
@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-areas: 'intro title';
	align-items: start;
	align-content: center;
	gap: 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; margin-top: calc(32 * var(--u)); display: grid; gap: calc(26 * var(--u)); }
.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; }

/* ---------- 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__title { max-width: calc(850 * var(--u)); font-size: var(--fs-h2); line-height: 1; }
.green__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; }
.green__drawing {
	position: absolute;
	z-index: 0;
	top: calc(-40 * var(--u));
	bottom: calc(-40 * var(--u));
	/* 1.2× the previous size, the lily a bit further right; the tail may run off the right edge. */
	left: calc(max(var(--gutter), (100% - var(--container)) / 2) + 663 * var(--u));
	width: calc(912 * var(--u));
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: var(--c-ink);
	opacity: 0.3;
	pointer-events: none;
}
/* Lottie and SVG strokes follow the text colour; an outlined (filled) line is filled instead. */
.green__drawing path { stroke: currentColor; }
.green__drawing path.is-outline { stroke: none; fill: currentColor; }
.js .green__drawing:not(.is-drawing) .is-outline { opacity: 0; }
.green__drawing > svg { width: 100%; height: 100%; overflow: visible; }
.green__drawing [data-draw] { opacity: 0; }
.green__drawing.is-drawing [data-draw] { opacity: 1; }

/* ---------- Home · menu card slider ---------- */
.menus { padding-top: 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: 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 (torn shape) ---------- */
/* The photo sits inside the torn shape from Figma (assets/img/scheur.svg, 1520 × 531) used as a mask, with a green
   fade towards the torn edge. The header floats on top of it. */
.page-hero { position: relative; height: calc(531 / 1520 * 100vw); color: var(--c-beige); }
@media (min-width: 1521px) {
	.page-hero { height: max(531px, min(calc(531 / 1520 * 100vw), 70vh)); }
}
.page-hero__media {
	position: absolute; inset: 0; overflow: hidden; background: var(--c-green);
	-webkit-mask: url(../img/scheur.svg) 0 0 / 100% 100% no-repeat;
	mask: url(../img/scheur.svg) 0 0 / 100% 100% no-repeat;
}
.page-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.page-hero__fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--c-green) 0%, rgb(39 66 61 / 0) 100%); }
.page-hero__inner { position: relative; height: 100%; display: flex; justify-content: center; }
.page-hero__title { margin-top: calc(240 * 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__title { max-width: calc(850 * 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: 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__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: 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; }
.closing { padding-top: 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__link { margin: 0 calc(6 * var(--u)) calc(10 * var(--u)) 0; }
.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; margin-top: calc(40 * var(--u)); text-align: center; font-weight: 700; }
.footer__duck--badge { width: max(150px, calc(254 * var(--u))); left: calc(50% - 127 * var(--u)); color: var(--c-green); }

/* ---------- Contact ---------- */
.contact { padding-top: 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; }

/* ---------- Werken bij · vacancies ---------- */
.jobs { position: relative; padding-top: 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; }
@media (hover: none), (pointer: coarse) {
	.jobs__float { display: none; }
}

/* ---------- 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: 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__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. */
.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; }
	.header__status { margin-left: 24px; }
	.mega__inner { grid-template-columns: 1fr 1fr; }
	.mega__media { display: none; }
}

@media (max-width: 959px) {
	/* Reserve button: lily arrow only */
	.header__button .button__text-wrap { display: none; }
	.header__button .button__icon-wrap { scale: 1; position: relative; }
	.header__button .button__icon-wrap:not(.is--duplicate) { display: none; }
}

@media (min-width: 768px) and (max-width: 1199px) {
	.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 { --gutter: 20px; }
	.header__pill { padding: 0 8px; border-width: 1.5px; }
	.header__status { display: none; }
	.header__cta { grid-column: 3; }
	.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-areas: 'title' 'intro'; margin-top: 28px; gap: 28px; }
	.hero__title { justify-self: start; text-align: left; white-space: normal; }
	.hero__intro { margin-top: 0; gap: 18px; }

	.collage { padding-top: 48px; }
	/* Phones: no hover, so the plates are bigger, two next to each other per row, alternating left and right and
	   centred on the screen, a little at random: own sizes and turns (stage 100 × 140). */
	.collage__stage { width: 100vw; height: 140vw; }
	.collage__item { left: var(--mx); top: var(--my); width: var(--mw); }
	.collage__item.is--1 { --mx: 0%; --my: 2%; --mw: 54%; --r: -6deg; }
	.collage__item.is--2 { --mx: 58%; --my: 0%; --mw: 36%; --r: 24deg; }
	.collage__item.is--4 { --mx: 3%; --my: 26%; --mw: 33%; --r: -40deg; }
	.collage__item.is--3 { --mx: 33%; --my: 19.5%; --mw: 60%; --r: -15deg; }
	.collage__item.is--5 { --mx: 12%; --my: 44%; --mw: 43%; --r: 9deg; }
	.collage__item.is--6 { --mx: 59%; --my: 50.5%; --mw: 31%; --r: 70deg; }
	.collage__item.is--7 { --mx: 27%; --my: 66%; --mw: 57%; --r: 15deg; }

	.green { margin-top: 64px; padding: calc(60vw + 40px) 0 128px; }
	.green__text { margin: 28px 0 0 auto; }
	.green__title br, .text-block__title br { display: none; }
	.green__drawing { top: 12px; bottom: auto; left: auto; right: -30vw; width: 125vw; height: 60vw; }

	.menus { padding-top: 80px; }
	.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 { padding-top: 80px; }
	.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 { margin-top: 80px; 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; }
}

@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 { padding-top: 80px; --page-w: min(64vw, 380px); }
	.viewer__head { column-gap: 14px; }
	.viewer__name { font-size: 20px; }
	.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; }
	.collage--photos { padding-top: 64px; }
	.collage--photos .collage__stage { width: 100vw; aspect-ratio: 100 / 150; }
	.collage--photos .collage__item.is--4 { left: 4%; top: 0; width: 40%; }
	.collage--photos .collage__item.is--1 { left: 52%; top: 5.33%; width: 44%; }
	.collage--photos .collage__item.is--2 { left: -6%; top: 33.33%; width: 54%; }
	.collage--photos .collage__item.is--6 { left: 44%; top: 29.33%; width: 58%; }
	.collage--photos .collage__item.is--5 { left: 10%; top: 56%; width: 52%; }
	.collage--photos .collage__item.is--7 { left: 56%; top: 54.67%; width: 48%; }
	.collage--photos .collage__item.is--3 { left: 0; top: 73.33%; width: 38%; }
	.collage--photos .collage__item.is--8 { left: 42%; top: 74.67%; width: 38%; }
	.closing { padding-top: 64px; }
	.closing__inner { grid-template-columns: 1fr; row-gap: 24px; }
	.closing__link { margin: 0; }
	.closing__text { text-align: left; margin-left: 0; }
	.footer__duck--badge { width: 150px; left: auto; }
	.jobs { padding-top: 80px; }
	.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 { padding-top: 56px; }
	.contact__inner { grid-template-columns: 1fr; gap: 48px; }
	.contact__details { grid-template-columns: 1fr; gap: 32px; }
	.contact__map { rotate: 2deg; }
}