/* ==========================================================================
   de Volière — hoofdstylesheet

   1:1 nabouw van devoliere.nl. Alle maten hieronder zijn opgemeten aan de
   live site (Elementor) bij vw 1440 / 1024 / 390 en staan daarom in vaste
   pixels in plaats van een vloeiende schaal.

   Breakpoints volgen die van Elementor: mobiel ≤767, tablet ≤1024.

   1. Fonts        4. Header        7. Vogeltegels
   2. Tokens       5. Hero          8. Promokaarten
   3. Reset        6. Slider        9. Pagina's / footer
   ========================================================================== */

/* 1. Fonts ================================================================= */
@font-face {
	font-family: "Lasiver";
	src: url("../fonts/Type-Dynamic-Lasiver-2.woff2") format("woff2"),
	     url("../fonts/Type-Dynamic-Lasiver-2.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Vintage Rainbow";
	src: url("../fonts/VintageRainbows.woff2") format("woff2"),
	     url("../fonts/VintageRainbows.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* 2. Tokens ================================================================ */
:root {
	--ink:        #1b1b19;   /* koppen */
	--ink-black:  #000;      /* nav en h3 */
	--muted:      #7a7a7a;   /* bodytekst */
	--sage:       #d2d3c4;
	--sage-veil:  rgb(210 211 196 / 0.81);
	--cream:      #eaeae6;
	--white:      #fff;
	--arrow:      rgb(237 237 237 / 0.9);
	--line:       rgb(27 27 25 / 0.14);

	--font-body:    "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Lasiver", var(--font-body);
	--font-script:  "Vintage Rainbow", cursive;

	--shell:  1140px;   /* Elementor container width */
	--radius: 3px;
	--card-radius: 50px;
	--ease: cubic-bezier(0.33, 1, 0.68, 1);
}

/* 3. Reset ================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: clip;
	scroll-padding-top: 160px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--white);
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 21px;
	-webkit-font-smoothing: antialiased;
}
img, svg, picture, video, iframe { display: block; max-width: 100%; }
img, svg, picture { height: auto; }
button { font: inherit; color: inherit; }
:where(a) { color: inherit; }

:where(a, button, summary, input, textarea):focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.skip-link { position: absolute; left: -9999px; z-index: 10000; padding: 12px 20px; background: var(--ink); color: var(--white); font-weight: 600; }
.skip-link:focus { left: 16px; top: 16px; }

.u-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* typografie — exact de live waarden */
h1, h2 {
	margin: 0;
	color: var(--ink);
	font-size: 32px;
	font-weight: 500;
	line-height: 38.4px;
}
h3 {
	margin: 0;
	color: var(--ink-black);
	font-size: 28px;
	font-weight: 400;
	line-height: 28px;
}
h4 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 24px; }
p { margin: 0 0 21px; }
p:last-child { margin-bottom: 0; }

/* Elementor's container is exact 1140px breed zonder zijpadding. Pas als het
   venster smaller is dan 1140 + wat lucht komt er padding bij. */
.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
}
@media (max-width: 1160px) {
	.shell { padding-inline: 10px; }
}

/* knop — 15px/600, 2px rand, radius 3px, transparant */
.btn {
	display: inline-block;
	padding: 12px 24px;
	border: 2px solid currentColor;
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--white); }
.btn--light { color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--ink); }
.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--solid:hover { background: transparent; color: var(--ink); }

/* 4. Header ================================================================
   Niet sticky (live is position: relative met z-index 9999) en 150px hoog:
   een bovenrij van 84px en een navigatierij van 66px. Het logo is 261x96 en
   hangt met zijn onderkant aan de onderkant van de header, dus het steekt
   30px in de bovenrij. */
.site-header {
	position: relative;
	z-index: 9999;
	background: var(--sage-veil);
}
.header-top {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	height: 84px;
	padding-block: 11.4px;
}
.header-bar {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 261px 1fr;
	align-items: center;
	gap: 20px;
	height: 66px;
}

/* 261x96, onderkant gelijk met de onderkant van de header (y 54–150). */
.site-logo {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: block;
	transform: translateX(-50%);
}
.site-logo svg, .site-logo img { width: 261px; height: 96px; }

/* De logorij onder de balk bestaat alleen op mobiel; daar staat het logo niet
   meer tussen de menuhelften. */
.header-logo-row { display: none; }

/* socials — 16px iconen, zwart, in een rij van 25px breed */
.socials { display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; list-style: none; }
.socials__label { margin: 0; color: var(--ink-black); font-size: 16px; font-weight: 400; line-height: 16px; }
.socials a { display: grid; place-items: center; width: 25px; height: 16px; color: var(--ink-black); transition: opacity 0.3s var(--ease); }
.socials a:hover { opacity: 0.6; }
.socials svg { width: 16px; height: 16px; fill: currentColor; }

/* taalkiezer — rond vlaggetje van 18px plus de taalnaam */
.lang { position: relative; margin: 0 0 0 10px; padding: 0; list-style: none; }
.lang__current,
.lang a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	color: var(--ink-black);
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	white-space: nowrap;
}
.lang__current { border: 0; background: transparent; cursor: pointer; }
.lang__current::after {
	content: "";
	width: 0; height: 0;
	margin-left: 2px;
	border: 4px solid transparent;
	border-top-color: currentColor;
}
.lang img { width: 18px; height: 18px; border-radius: 90px; object-fit: cover; }
.lang__list {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 5;
	min-width: 100%;
	margin: 0;
	padding: 4px 0;
	background: var(--white);
	box-shadow: 0 10px 28px rgb(27 27 25 / 0.16);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--ease), visibility 0.25s;
}
.lang:hover .lang__list, .lang:focus-within .lang__list { opacity: 1; visibility: visible; }
.lang__list a:hover { background: var(--cream); }

/* hoofdnavigatie — 13px/600 uppercase, zwart, padding 13px 0 */
.nav--left  { grid-column: 1; justify-self: start; }
.nav--right { grid-column: 3; justify-self: end; }
.header-bar__spacer { display: none; }
.nav ul { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.nav li { position: relative; }
.nav a {
	display: block;
	padding-block: 13px;
	color: var(--ink-black);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.25s var(--ease);
}
.nav a:hover { opacity: 0.6; }
.nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0; height: 0;
	margin-left: 6px;
	border: 4px solid transparent;
	border-top-color: currentColor;
	vertical-align: 2px;
}
.nav li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 220px;
	padding: 8px 0;
	background: var(--white);
	box-shadow: 0 14px 38px rgb(27 27 25 / 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav li:hover > ul, .nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.nav li > ul a { padding: 10px 18px; font-size: 12px; }
.nav li > ul a:hover { background: var(--cream); opacity: 1; }

/* hamburger — 41x41, lichte vulling, radius 3px */
.nav-toggle {
	display: none;
	place-items: center;
	width: 41px; height: 41px;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: rgb(0 0 0 / 0.05);
	cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle__bars span { display: block; height: 2px; background: var(--ink-black); transition: transform 0.3s var(--ease), opacity 0.2s; }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--sage);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px; }
.drawer__head .site-logo svg { width: 196px; height: 72px; }
.drawer__body { overflow-y: auto; padding: 8px 16px 40px; }
.drawer ul { margin: 0; padding: 0; list-style: none; }
.drawer__body > ul > li { border-bottom: 1px solid rgb(27 27 25 / 0.13); }
.drawer a {
	display: block;
	padding: 14px 0;
	color: var(--ink-black);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}
.drawer li > ul { padding-left: 14px; padding-bottom: 8px; }
.drawer li > ul a { padding: 8px 0; font-size: 13px; font-weight: 400; text-transform: none; color: var(--muted); }

/* 5. Hero ==================================================================
   min-height 85vh en margin-top -200px: de sectie wordt onder de header
   getrokken, die er met z-index 9999 half doorschijnend over ligt.
   De poortfoto is de poster; daarover speelt de Vimeo-achtergrondvideo. */
.hero {
	position: relative;
	min-height: 85vh;
	margin-top: -200px;
	padding-inline: 10px;
	background: #cfcfc9 url("../img/hero-entree.webp") center / cover no-repeat;
	overflow: hidden;
}
.hero__video {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.hero__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;            /* 16:9 */
	min-width: 177.78vh;        /* vult ook hoge viewports */
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
}

/* 6. Intro ================================================================
   Twee kaarten van 570px die 45px over de hero heen vallen. De linker heeft
   alleen linksboven een radius van 50px, de rechter alleen rechtsboven. */
.intro {
	display: flow-root;   /* houdt de negatieve marge van de kaarten binnen */
	padding-bottom: 114px;
	background: #f1f0ec url("../img/paper-page.webp") center / cover;
}
.intro__cards {
	/* De hero is position: relative en zou de kaarten anders overschilderen;
	   met een eigen positiecontext valt de overhang van 45px er wél over. */
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: -45px;
}
.intro__card {
	min-height: 522px;
	padding: 117px 0 0;
	background: #f4f3ef url("../img/paper-card.webp") center / cover;
}
.intro__card--media { border-radius: var(--card-radius) 0 0 0; }
.intro__card--text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 0 var(--card-radius) 0 0;
}
.intro__bird { width: 100%; height: 405px; object-fit: contain; mix-blend-mode: multiply; }
.intro__text h1, .intro__text h2 { margin: 8px 0 16px; }
.intro__text p { margin-bottom: 14.4px; color: var(--muted); }
.intro__text p:last-child { margin-bottom: 14.4px; }

/* 7. Slider ================================================================
   800px hoog, inhoud rechtsonder binnen 50px padding, max 46% breed. */
.slider { position: relative; overflow: hidden; background: var(--ink); }
.slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }

.slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
	height: 800px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 50px;
	overflow: hidden;
}
.slide__media { position: absolute; inset: 0; }
.slide__media img { width: 100%; height: 100%; object-fit: cover; }
.slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #838383;
	mix-blend-mode: multiply;
}
.slide__body {
	position: relative;
	max-width: 46%;
	color: var(--white);
	text-align: right;
}
.slide__body h2 {
	margin-bottom: 14px;
	color: var(--white);
	font-size: 35px;
	font-weight: 600;
	line-height: 35px;
}
.slide__body p { margin-bottom: 22px; color: var(--white); font-size: 14px; line-height: 22px; }

.slider__nav {
	position: absolute;
	inset: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}
.slider__arrow {
	pointer-events: auto;
	display: grid;
	place-items: center;
	width: 25px; height: 25px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--arrow);
	cursor: pointer;
	transition: color 0.25s var(--ease);
}
.slider__arrow:hover { color: var(--white); }
.slider__arrow svg { width: 25px; height: 25px; fill: currentColor; }

.slider__dots {
	position: absolute;
	bottom: 5px;
	left: 0; right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	height: 24px;
}
.slider__dots button {
	width: 8px; height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.45);
	cursor: pointer;
	transition: background-color 0.25s var(--ease);
}
.slider__dots [aria-current="true"] { background: var(--white); }

/* 8. Vogeltegels ===========================================================
   Volle breedte (niet de 1140-shell): een flexrij van vier tegels van 349px
   met 10px ertussen. Afbeelding 263x394, kop in een blok met 40px padding. */
.tiles-section { padding-block: 100px; background: var(--cream); }
.tiles {
	display: flex;
	gap: 10px;
	align-items: stretch;
}
.tile {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
	text-decoration: none;
}
.tile__media { display: grid; place-items: center; height: 394px; }
.tile__bird {
	width: 263px;
	height: 394px;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.5s var(--ease);
}
.tile:hover .tile__bird { transform: translateY(-8px); }
.tile__caption { padding-block: 40px; text-align: center; }
.tile__name { display: block; color: var(--ink-black); font-size: 28px; font-weight: 400; line-height: 28px; }

/* 9. Promokaarten ==========================================================
   Twee kaarten van 560px binnen de 1140-shell, 585px hoog. */
.promo-section { background: #f1f0ec url("../img/paper-page.webp") center / cover; }
.duo { display: flex; gap: 20px; }
.promo {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: flex-end;
	height: 585px;
	padding: 0 0 57px;
	overflow: hidden;
	color: var(--white);
	text-decoration: none;
}
.promo__media { position: absolute; inset: 0; }
.promo__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.promo:hover .promo__media img { transform: scale(1.04); }
.promo__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(27 27 25 / 0.72) 0%, rgb(27 27 25 / 0.22) 55%, rgb(27 27 25 / 0) 100%);
}
.promo__body { position: relative; padding-inline: 30px; text-align: right; }
.promo__body h3 { margin-bottom: 10px; color: var(--white); font-size: 28px; font-weight: 600; line-height: 34px; }
.promo__body p { margin-bottom: 18px; color: var(--white); }
.promo__body .btn { border-radius: 5px; font-size: 14px; font-weight: 400; line-height: 18px; }

/* 10. Pagina's =============================================================
   De live site heeft per pagina een eigen Elementor-opmaak. Hier één
   consistente pagina-opmaak in dezelfde taal: papier, 1140-shell, dezelfde
   typografie. */
.page-head {
	padding-block: 60px 24px;
	background: #f1f0ec url("../img/paper-page.webp") center / cover;
}
.page-head__inner { max-width: 660px; }
.page-head h1 { margin-bottom: 14px; }
.page-head .t-lead { color: var(--muted); font-size: 16px; line-height: 26px; }

.page-body {
	padding-block: 24px 100px;
	background: #f1f0ec url("../img/paper-page.webp") center / cover;
}
.page-body .rich {
	display: grid;
	grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
	column-gap: 20px;
	align-content: start;
}
.page-body .rich > * { grid-column: 1; }
.page-body .rich > :is(.cards, .acc, .agenda, .contact-grid, figure, .wp-block-image, .wp-block-gallery) {
	grid-column: 1 / -1;
}

.rich h2 { margin: 42px 0 14px; }
.rich h3 { margin: 32px 0 12px; font-size: 22px; line-height: 28px; }
.rich h4 { margin: 24px 0 8px; }
.rich ul, .rich ol { margin: 0 0 21px; padding-left: 20px; }
.rich li { margin-bottom: 6px; }
.rich li::marker { color: var(--sage); }
.rich a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rich > :last-child { margin-bottom: 0; }

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 20px;
	margin-block: 24px 32px;
}
.card { padding: 26px; background: var(--white); border-top: 3px solid var(--sage); }
.card h3 { margin: 0 0 10px; font-size: 22px; line-height: 26px; }
.card p { color: var(--muted); }
.card__meta { margin-top: 14px; color: var(--ink); font-weight: 600; }

.acc { margin-block: 24px 32px; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	color: var(--ink);
	font-size: 22px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
	content: "";
	flex: 0 0 auto;
	width: 13px; height: 13px;
	background: currentColor;
	clip-path: polygon(44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%, 56% 100%, 44% 100%, 44% 56%, 0 56%, 0 44%, 44% 44%);
	transition: transform 0.3s var(--ease);
}
.acc details[open] summary::after { transform: rotate(45deg); }
.acc__body { padding-bottom: 22px; }

.agenda { display: grid; gap: 10px; margin-block: 24px 32px; }
.agenda__item {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	padding: 24px;
	background: var(--white);
	text-decoration: none;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.agenda__item:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(27 27 25 / 0.08); }
.agenda__when { color: var(--ink); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.agenda__item h3 { margin: 0 0 8px; font-size: 22px; line-height: 26px; }
.agenda__item p { margin: 0; }

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 30px;
	margin-block: 24px 0;
}
.contact-grid h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 24px; }
.contact-grid p, .contact-grid address { margin: 0; font-style: normal; }
.contact-grid a { color: var(--ink); }

/* 11. Footer ===============================================================
   Papieren achtergrond, 1140-shell, kolommen van 448 en 672 met 20px gap,
   padding 57px boven en 22.8px onder, plus een balk van 70px. */
.site-footer { background: #f1f0ec url("../img/paper-page.webp") center / cover; }
.footer-main {
	display: grid;
	grid-template-columns: 448px minmax(0, 1fr);
	gap: 20px;
	padding: 57px 0 22.8px;
}
.footer-brand__logo { width: 224px; margin-bottom: 20px; }
.footer-brand__logo svg { width: 100%; height: 70px; }
/* Twee alinea's van twee regels met 14.4px eronder — samen 117px, zoals live. */
.footer-brand address { font-style: normal; line-height: 22px; color: var(--ink-black); }
.footer-brand address p { margin: 0 0 14.4px; }
.footer-brand address p:last-child { margin-bottom: 14.4px; }
.footer-brand a { text-decoration: none; }
.footer-brand a:hover { text-decoration: underline; }

/* Rechterkolom: rechts uitgelijnd, alles op 14px/21px in zwart. De kop is
   in de live opmaak geen displaykop maar vetgedrukte bodytekst. */
.hours { color: var(--ink-black); text-align: right; }
.hours h2 {
	margin: 0 0 14.4px;
	color: var(--ink-black);
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
}
.hours__rows { margin-bottom: 14.4px; }
.hours__row {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
	line-height: 21px;
}
.hours__note { margin: 0 0 14.4px; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 70px;
	margin-top: 20px;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
.footer-bottom { color: var(--ink-black); font-size: 12px; line-height: 12px; }
.footer-bottom ul a { font-size: 11px; line-height: 16.5px; }
.footer-bottom .socials__label { font-size: 14px; line-height: 14px; }

/* 12. Tablet (≤1024) ======================================================= */
@media (max-width: 1024px) {
	html { scroll-padding-top: 160px; }

	.header-top { display: none; }
	.header-bar {
		grid-template-columns: auto 1fr auto;
		align-items: center;
		height: auto;
		padding-block: 4px;
	}
	.nav--left, .nav--right { display: none; }
	.nav-toggle { display: grid; grid-column: 1; justify-self: start; }
	.header-bar__spacer { display: block; grid-column: 3; justify-self: end; width: 41px; }

	.hero { min-height: 60vh; }

	.tiles { flex-wrap: wrap; }
	.tile { flex: 1 1 calc(50% - 10px); }

	.footer-main { grid-template-columns: 1fr 1fr; }
}

/* 13. Mobiel (≤767) ========================================================
   Header: hamburgerrij van 69px in vol salie, daaronder een logorij van 82px
   met een logo van 196x96. De vogel in de introkaart valt weg; de linkerkaart
   blijft als afgeronde hoek van 42px staan. */
@media (max-width: 767px) {
	.site-header { background: var(--sage); }
	.header-bar {
		grid-template-columns: auto 1fr auto;
		height: 69px;
		padding: 3.9px 7.8px;
	}
	.site-logo { display: none; }
	.header-logo-row {
		display: grid;
		place-items: center;
		height: 82px;
	}
	.header-logo-row svg { width: 196px; height: 96px; }

	.hero { min-height: 60vh; }

	.intro { padding-bottom: 0; }   /* live sluit de kaart direct op de slider aan */
	/* Op mobiel valt de kaart niet over de hero heen; hij sluit erop aan. */
	.intro__cards { grid-template-columns: 1fr; row-gap: 50px; margin-top: 0; }
	.intro__card { min-height: 0; }
	.intro__card--media { height: 42px; padding: 42.2px 0 0; border-radius: var(--card-radius) 0 0 0; }
	.intro__bird { display: none; }
	.intro__card--text { padding: 7.8px; border-radius: 0 var(--card-radius) 0 0; }
	.intro__text h1, .intro__text h2 { font-size: 32px; line-height: 38.4px; }

	.slide { height: 400px; padding: 24px; }
	.slide__body { max-width: 100%; text-align: center; }
	.slide__body h2 { font-size: 28px; line-height: 30px; }
	.slider__nav { display: none; }

	.tiles-section { padding-block: 50px; }
	.tiles { flex-wrap: wrap; justify-content: space-between; gap: 10px; }
	.tile { flex: 0 0 47%; gap: 0; }
	.tile__media { height: 157px; }
	.tile__bird { width: 105px; height: 157px; }
	.tile__caption { padding-block: 10px; }
	.tile__name { font-size: 20px; line-height: 20px; }

	.duo { flex-direction: column; gap: 20px; }
	.promo { flex: 0 0 auto; height: 264px; padding-bottom: 18.5px; }
	.promo__body { padding-inline: 20px; }

	.page-body .rich, .footer-main { grid-template-columns: minmax(0, 1fr); }
	.footer-main { padding-top: 40px; }
	.footer-brand__logo { width: 196px; }
	.agenda__item { grid-template-columns: 1fr; gap: 8px; }
	.footer-bottom { height: auto; padding-block: 18px; }
}

/* 14. Bewegingsvoorkeur ==================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}