/* =====================================================================
   ROOM25 — website
   Redactionele opzet: veel wit, grote zinnen in een serif, kleine
   bijschriften in Jost, en elke sectie een eigen indeling.
   Kleuren: Donkerbruin #23150C voor tekst, donkere vlakken en over
   foto's (nooit zwart), Gebroken Grijs #F6F3E4 als lichte tint.

   1. Lettertypes
   2. Tokens
   3. Basis
   4. Typografie en bouwstenen
   5. Header en mobiel menu
   6. Secties (in volgorde van de homepage)
   7. Footer
   8. Animatie
   9. Responsive
   ===================================================================== */

/* ── 1. LETTERTYPES ──────────────────────────────────────── */
/* Beide op de eigen server: geen verbinding met Google nodig */
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ── 2. TOKENS ───────────────────────────────────────────── */
:root {
  --bruin: #23150C;          /* Donkerbruin uit de stijlgids */
  --grijs: #F6F3E4;          /* Gebroken Grijs */

  --paper:      #FFFFFF;
  --paper-soft: #F1EBE1;     /* panelen: warm beige, past bij het donkerbruin */
  --ink:        var(--bruin); /* tekst: heel donkerbruin, nooit zwart */
  --ink-2:      #5B4A3F;
  --ink-3:      #7A685B;     /* labels, voldoet aan WCAG AA */
  --line:       #E8E0D4;
  --dark:       var(--bruin);

  --sans:  "Jost", "Futura", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1440px;
  --gutter: clamp(20px, 3vw, 48px);
  --gap: clamp(12px, 1.4vw, 20px);
  --section: clamp(72px, 9vw, 140px);

  --ease: cubic-bezier(.16, 1, .3, 1);      /* rustig uitlopend */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ── 3. BASIS ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
em { font-style: italic; font-weight: inherit; }
p { text-wrap: pretty; }

body {
  font-family: var(--sans);
  font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 20px;
}
.skip-link:focus { top: 16px; }

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

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

/* ── 4. TYPOGRAFIE EN BOUWSTENEN ─────────────────────────── */
/* Grote zinnen: Jost, licht gewicht */
.serif-xl, .serif-l, .serif-m {
  font-weight: 300;
  letter-spacing: -.02em;
}
.serif-xl { font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1.02; }
.serif-l  { font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.12; }
.serif-m  { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.25; }

/* Bijschrift: klein, in hoofdletters, zoals onder een foto in een magazine */
.caption {
  font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
}
.muted { color: var(--ink-3); }
.body-s { font-size: .92rem; color: var(--ink-2); max-width: 44ch; }

/* Tekstlink met één pijl in een cirkel.
   Bij hover vult de cirkel zich vloeiend en schuift de pijl een stukje op. */
.arrow-link {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1;
}
.arrow {
  position: relative; display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%;
  overflow: hidden; isolation: isolate;
}
.arrow::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: currentColor; transform: scale(0);
  transition: transform 800ms var(--ease);
}
.arrow i {
  font-style: normal; font-size: .9rem; line-height: 1; letter-spacing: 0;
  transition: transform 800ms var(--ease), color 500ms var(--ease);
}
.arrow-link:hover .arrow::before { transform: scale(1); }
.arrow-link:hover .arrow i { transform: translateX(3px); color: var(--paper); }
.arrow-link--light:hover .arrow i { color: var(--ink); }
/* Interne links: bij hover tekent zich een lijn onder de tekst, gelijk met de cirkel */
.arrow-link__label {
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  padding-bottom: 4px;
  transition: background-size 800ms var(--ease);
}
.arrow-link:hover .arrow-link__label { background-size: 100% 1px; background-position: 0 100%; }

/* Gewone links naar pagina's: een lijn tekent zich onder de tekst */
.footer__col a, .footer__legal a, .header__contact, .journal__more, .mobile-menu li a span {
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  transition: background-size 700ms var(--ease), color 500ms var(--ease);
  padding-bottom: 2px;
}
.footer__col a:hover, .footer__legal a:hover, .header__contact:hover, .journal__more:hover, .mobile-menu li a:hover span {
  background-size: 100% 1px; background-position: 0 100%;
}
.footer__col a:hover { text-decoration: none; }
/* Offerte aanvragen in de header: de lijn verdwijnt naar rechts en komt van links terug */
.header__cta { border-bottom: 0; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: 3px; }
.header__cta:hover { animation: redraw 900ms var(--ease); }
@keyframes redraw {
  0%   { background-size: 100% 1px; background-position: 100% 100%; }
  45%  { background-size: 0 1px;    background-position: 100% 100%; }
  46%  { background-size: 0 1px;    background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

/* Knop: donkerbruin, de achtergrond schuift er vloeiend in bij hover */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; overflow: hidden; isolation: isolate;
  font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink); border-radius: 100px;
  transition: color 600ms var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  transform: translateY(101%); transition: transform 700ms var(--ease);
}
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: translateY(0); }
.btn--light { color: var(--ink); background: var(--grijs); border-color: var(--grijs); }
.btn--light::before { background: var(--dark); }
.btn--light:hover { color: var(--grijs); }
.btn--outline { color: var(--ink); background: transparent; }
.btn--outline::before { background: var(--ink); }
.btn--outline:hover { color: var(--paper); }

/* Foto met bijschrift eronder */
.tile { display: grid; gap: 14px; align-content: start; }
.tile__media { position: relative; overflow: hidden; background: var(--paper-soft); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease); }
a.tile:hover .tile__media img { transform: scale(1.03); }
.tile__caption { display: flex; justify-content: space-between; gap: 12px; }

/* Plek voor een foto die nog gemaakt wordt */
.placeholder {
  position: absolute; inset: 0; display: grid; place-content: center;
  background: var(--paper-soft); color: var(--ink-3);
}

/* ── 5. HEADER EN MOBIEL MENU ────────────────────────────── */
/* Navigatie links, logo in het midden, aanvragen rechts */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 400ms var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px; min-height: 64px;
}
.nav__list { display: flex; gap: 22px; }
.nav__list a { position: relative; padding-block: 6px; }
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease);
}
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }

.logo {
  display: block; width: 112px; aspect-ratio: 1809 / 344;
  background: currentColor;
  -webkit-mask: url("../img/tekstlogo.svg") no-repeat center / contain;
          mask: url("../img/tekstlogo.svg") no-repeat center / contain;
}
.header__actions { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.header__cta { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.menu-toggle { display: none; min-height: 44px; }

.mobile-menu {
  position: fixed; inset: 64px 0 0 0; z-index: 99;
  background: var(--paper); padding: 24px var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  overflow-y: auto; opacity: 0; transition: opacity 300ms var(--ease);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu[hidden] { display: none; }
.mobile-menu li { border-bottom: 1px solid var(--line); }
.mobile-menu li a { display: block; padding: 14px 0; font-size: 1.6rem; font-weight: 300; }
.mobile-menu__foot { display: grid; gap: 8px; color: var(--ink-2); }

/* ── 6. SECTIES ──────────────────────────────────────────── */
.section { padding-block: var(--section); }
.section-bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 14px; margin-bottom: clamp(20px, 2.5vw, 32px);
  border-bottom: 1px solid var(--line);
}

.section-bar--plain { border-bottom: 0; padding-bottom: 0; }
.section-bar--three { display: grid; grid-template-columns: 1fr auto 1fr; }
.section-bar--three > :last-child { text-align: right; }

/* Sectiekop: één duidelijke titel in dik en dun, met eventueel een link rechts */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}
.section-title {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 300; line-height: 1.12; letter-spacing: -.015em;
  max-width: 24ch;
}
.section-title strong { font-weight: 500; }
.section-title:not(:has(strong)) { font-weight: 400; }
/* Geen dubbele lijn waar de inhoud zelf met een lijn begint */
#zo-werkt-het .section-head, .reach .section-head { border-bottom: 0; padding-bottom: 0; }

/* 6.1 Opening: wit vlak met een detail, naast een grote foto */
.intro { display: grid; grid-template-columns: 1fr 1fr; min-height: min(88vh, 900px); }
.intro__left {
  display: grid; place-content: center; justify-items: center; gap: 28px;
  padding: clamp(48px, 6vw, 96px) var(--gutter); text-align: center;
}
.intro__object { width: clamp(180px, 22vw, 300px); aspect-ratio: 3 / 4; object-fit: cover; }
.intro__title { max-width: 14ch; }
.intro__lead { font-size: .98rem; font-weight: 300; color: var(--ink-2); max-width: 42ch; }
.intro .reveal { transition-duration: 900ms, 1000ms; transition-delay: calc(var(--d, 0) * 120ms); }
.intro__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 4px; }
.intro__right { position: relative; overflow: hidden; background: var(--dark); color: #fff; }
.intro__right img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro__right::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35,21,12,.45) 0%, rgba(35,21,12,0) 38%, rgba(35,21,12,0) 70%, rgba(35,21,12,.4) 100%);
}
.intro__quote { position: absolute; z-index: 1; top: clamp(20px, 3vw, 40px); left: clamp(20px, 3vw, 40px); max-width: 22ch; }
.intro__mark { position: absolute; z-index: 1; left: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 36px); }
.intro__mark .logo { width: 92px; }

/* 6.2 Ruimtes: twee foto's en een wit vlak met een object */
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.rooms .tile__media { aspect-ratio: 4 / 3; }
.room__lead { font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.room__facts { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; font-weight: 300; color: var(--ink-2); }
.room__facts strong { font-weight: 500; color: var(--ink); }

/* 6.2b Ruimtes op volle breedte: foto met grote naam; bij hover draait de
   kaart om naar donkerbruin met de feiten. De hele kaart is klikbaar. */
.section--flush-bottom { padding-bottom: 0; }
.rooms-flip { display: grid; grid-template-columns: 1fr 1fr; }
.flip { position: relative; display: block; height: clamp(460px, 78vh, 820px); overflow: hidden; }
.flip__inner { position: absolute; inset: 0; }
/* Elke kant draait apart; zo werkt het ook betrouwbaar in Safari */
.flip__face {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform 1100ms var(--ease-in-out), visibility 0s linear 550ms;
}
/* Halverwege de draai (kaart staat op zijn kant) wisselen voor- en achterkant */
.flip__front { transform: perspective(2400px) rotateY(0deg); visibility: visible; }
.flip__back  { visibility: hidden; }
.flip:hover .flip__front, .flip:focus-visible .flip__front { transform: perspective(2400px) rotateY(-180deg); visibility: hidden; }
.flip:hover .flip__back,  .flip:focus-visible .flip__back  { transform: perspective(2400px) rotateY(0deg); visibility: visible; }
.flip__front { background: var(--dark); }
.flip__front img { width: 100%; height: 100%; object-fit: cover; }
.flip__front::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35,21,12,0) 45%, rgba(35,21,12,.55) 100%);
}
.flip__front--placeholder { background: var(--paper-soft); }
.flip__front--placeholder::after { content: none; }
.flip__soon { position: absolute; top: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); color: var(--ink-3); }
.flip__name {
  position: absolute; z-index: 1; left: clamp(24px, 3vw, 48px); bottom: clamp(16px, 2vw, 32px);
  font-size: clamp(2.8rem, 6vw, 5.2rem); font-weight: 300; line-height: .95; letter-spacing: -.02em;
  text-transform: uppercase; color: #fff;
}
.flip__front--placeholder .flip__name { color: var(--ink); }
.flip__back {
  transform: perspective(2400px) rotateY(180deg);
  background: var(--dark); color: var(--grijs);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: clamp(28px, 4vw, 64px);
}
.flip__kicker { font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(246,243,228,.65); }
.flip__body { display: grid; gap: 24px; }
.flip__name--back { position: static; color: var(--grijs); font-size: clamp(2.2rem, 4vw, 3.4rem); }
.flip__lead { font-size: 1.05rem; font-weight: 300; line-height: 1.6; color: rgba(246,243,228,.85); max-width: 40ch; }
.flip__facts { display: flex; flex-wrap: wrap; gap: 20px 48px; padding-top: 20px; border-top: 1px solid rgba(246,243,228,.2); }
.flip__facts li { display: grid; gap: 2px; }
.flip__facts strong { font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 300; line-height: 1.1; }
.flip__facts span { font-size: .85rem; font-weight: 300; color: rgba(246,243,228,.7); }
.flip .arrow-link { align-self: flex-start; }

/* Bij het verschijnen alleen vervagen, geen verschuiving of gordijn */
.js .flip.reveal { transform: none; }
.js .flip.reveal img { clip-path: none; }

/* Op telefoon en tablet bestaat geen hover: dan staan foto en feiten onder elkaar */
@media (hover: none), (max-width: 860px) {
  .rooms-flip { grid-template-columns: 1fr; }
  .flip { height: auto; perspective: none; }
  .flip { overflow: visible; }
  .flip__inner { position: static; }
  .flip__face { position: relative; transform: none !important; visibility: visible !important; }
  .flip__front { height: 62vh; min-height: 360px; }
}

/* 6.3 Donkere band met de soorten bijeenkomsten */
.band { position: relative; color: #fff; background: var(--dark); overflow: hidden; }
.band__media { position: absolute; inset: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.band__inner {
  position: relative; text-align: center;
  padding-block: clamp(96px, 14vw, 200px);
  display: grid; gap: 28px; justify-items: center;
}
.band__list {
  font-size: clamp(1.3rem, 2.4vw, 2.1rem); line-height: 1.25; max-width: 24em;
  text-transform: uppercase; letter-spacing: -.01em; font-style: italic;
}
.band__list li { display: inline; }
.band__list li + li::before { content: " / "; color: rgba(255,255,255,.4); }
.band__list a { color: rgba(255,255,255,.62); transition: color 700ms var(--ease); }
.band__list a:hover, .band__list li:first-child a { color: #fff; }

/* 6.4 Uitspraak naast een foto */
.statement { display: grid; grid-template-columns: 1fr 1fr; min-height: min(80vh, 820px); }
.statement__text {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: clamp(32px, 4vw, 64px) var(--gutter);
}
.statement__text .serif-l { max-width: 17ch; }
.statement__media { position: relative; overflow: hidden; }
.statement__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 6.5 Foto naast een rustig gekleurd paneel */
.panel-split { display: grid; grid-template-columns: 1fr 1fr; }
.panel-split__media { aspect-ratio: 4 / 3.2; overflow: hidden; }
.panel-split__media img { width: 100%; height: 100%; object-fit: cover; }
.panel-split__panel {
  background: var(--paper);
  display: grid; place-content: center; justify-items: center; gap: 18px;
  padding: 48px var(--gutter); text-align: center;
}

/* 6.5b Zo werkt het
   Eén lijn loopt over de volle breedte van links naar rechts, met een pijl
   op de punt. Elke stap verschijnt op het moment dat de pijl hem bereikt. */
.steps {
  --run: 3000ms;                         /* hoe lang de pijl over de breedte doet */
  position: relative; list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 40px);
}
.steps__line { position: absolute; top: 6px; left: 0; right: 0; height: 1px; }
/* Eén pijl: de lijn groeit van links naar rechts en de punt zit vast aan het uiteinde */
.steps__line::before {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 100%;
  background: var(--ink);
}
.steps__line::after {
  content: ""; position: absolute; top: -5px; left: calc(100% - 11px);
  width: 10px; height: 10px;
  border-top: 1px solid var(--ink); border-right: 1px solid var(--ink);
  transform: rotate(45deg); transform-origin: center;
}
.step { position: relative; display: grid; gap: 12px; align-content: start; }
.step .item__title { margin-top: 6px; }
.step__when { height: 24px; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.step__node {
  width: 13px; height: 13px; margin: 3px 0 22px; border-radius: 50%;
  border: 1px solid var(--ink); background: var(--paper);
  transition: background 600ms var(--ease), transform 600ms var(--ease);
}
.steps.is-visible .step__node { background: var(--ink); }
.step__num { font-size: clamp(3rem, 5vw, 4.6rem) !important; font-weight: 200 !important; line-height: .9 !important; color: transparent; -webkit-text-stroke: 1px var(--ink); }
.step__num { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.step__text { font-size: .95rem; font-weight: 300; line-height: 1.65; color: var(--ink-2); max-width: 30ch; }

.js .steps__line::before { width: 0; transition: width var(--run) linear; }
.js .steps__line::after { left: -11px; opacity: 0; transition: left var(--run) linear, opacity 300ms; }
.js .step__node { transition-delay: calc(var(--i) * var(--run) / 4 + 100ms); }
.js .step { opacity: 0; transform: translateY(24px); transition: opacity 1000ms var(--ease), transform 1200ms var(--ease); transition-delay: calc(var(--i) * var(--run) / 4 + 150ms); }
.js .steps.is-visible .steps__line::before { width: 100%; }
.js .steps.is-visible .steps__line::after { left: calc(100% - 11px); opacity: 1; }
.js .steps.is-visible .step { opacity: 1; transform: none; }

/* 6.5 Opstellingen: links een lijst, rechts één grote foto die vloeiend
   overvloeit naar de opstelling waar je muis op staat */
.setups { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 5vw, 96px); align-items: stretch; }
.setups__list { display: grid; align-content: center; }
.setups__item {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 6px;
  width: 100%; text-align: left; padding: clamp(18px, 2.2vw, 28px) 0;
  border-top: 1px solid var(--line); color: var(--ink-3);
  transition: color 700ms var(--ease);
}
.setups__list li:last-child .setups__item { border-bottom: 1px solid var(--line); }
.setups__num { font-size: .8rem; font-weight: 400; padding-top: 10px; }
.setups__name {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 300; line-height: 1.1; letter-spacing: -.015em;
  transition: transform 800ms var(--ease);
}
.setups__text {
  grid-column: 2; font-size: .92rem; font-weight: 300; color: var(--ink-2); max-width: 36ch;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 800ms var(--ease), opacity 600ms var(--ease);
}
.setups__item:hover, .setups__item.is-active { color: var(--ink); }
.setups__item.is-active .setups__name { transform: translateX(8px); }
.setups__item.is-active .setups__text { max-height: 4em; opacity: 1; }
.setups__media { position: relative; width: 100%; aspect-ratio: 4 / 3; align-self: center; overflow: hidden; background: var(--paper-soft); }
.setups__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1000ms var(--ease), transform 1600ms var(--ease);
}
.setups__img.is-active { opacity: 1; transform: scale(1); }
.js .setups.reveal img { clip-path: none; }
/* Kleine plattegrond in de lijst */
.setups__item { grid-template-columns: 48px 1fr 64px; }
.setups__icon { grid-column: 3; grid-row: 1 / 3; width: 64px; color: var(--ink-3); transition: color 700ms var(--ease); }
.setups__icon .plan { width: 100%; height: auto; display: block; }
.setups__item.is-active .setups__icon { color: var(--ink); }
/* Hover op de foto: die vloeit over naar de plattegrond met de feiten */
.setups__plan {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3.5vw, 56px);
  background: var(--paper-soft); color: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity 800ms var(--ease), visibility 0s linear 800ms;
}
.setups__plan .plan { width: 100%; height: auto; stroke-width: 1.4; }
.setups__plan .plan * { vector-effect: non-scaling-stroke; }
.setups__facts { display: grid; gap: 14px; }
.setups__facts p { font-size: .95rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.setups__facts ul { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; font-weight: 500; }
.setups__facts li::before { content: "— "; color: var(--ink-3); font-weight: 300; }
.setups__media:hover .setups__plan.is-active,
.setups__media:focus-visible .setups__plan.is-active,
.setups__media.show-plan .setups__plan.is-active {
  opacity: 1; visibility: visible; transition: opacity 800ms var(--ease), visibility 0s;
}
.setups__hint {
  position: absolute; z-index: 2; right: 16px; bottom: 16px;
  padding: 8px 14px; border-radius: 100px; background: rgba(255,255,255,.92); color: var(--ink);
  transition: opacity 500ms var(--ease);
}
.setups__media:hover .setups__hint, .setups__media.show-plan .setups__hint { opacity: 0; }

/* 6.6 Details: catalogus over drie rijen, ruim verdeeld over de breedte.
   De blokken komen rustig zwevend binnen. */
.curated {
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(24px, 3vw, 56px); row-gap: clamp(90px, 11vw, 200px);
  align-items: start;
}
.curated img { width: 100%; height: 100%; object-fit: cover; }
.curated figcaption { display: grid; gap: 4px; }
.curated__big   { grid-column: 1; grid-row: 1 / 3; display: grid; gap: 12px; }
.curated__big img { aspect-ratio: 4 / 5; }
.curated__right { grid-column: 4; grid-row: 1 / 3; display: grid; gap: 12px; margin-top: clamp(120px, 14vw, 260px); }
.curated__right img { aspect-ratio: 4 / 5; }
.curated__right figcaption { text-align: right; }
.item--a { grid-column: 2 / 4; grid-row: 1; margin-left: 12%; margin-right: 8%; }
.item--b { grid-column: 2 / 4; grid-row: 2; margin-left: 38%; }
.item--c { grid-column: 1 / 3; grid-row: 3; margin-left: 22%; margin-right: 10%; }
.item--d { grid-column: 3 / 5; grid-row: 3; margin-left: 20%; margin-top: clamp(80px, 10vw, 180px); }
.item--e { grid-column: 1 / 3; grid-row: 4; margin-left: 30%; }
.item--f { grid-column: 3 / 5; grid-row: 4; margin-left: 22%; margin-top: clamp(60px, 8vw, 140px); }
.text-link { color: var(--ink); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: 1px; transition: background-size 700ms var(--ease); }
.text-link:hover { background-size: 0 1px; background-position: 100% 100%; }

.item { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items: end; }
.item img { aspect-ratio: 1 / 1; }

.item__title { font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.item__sub   { font-size: .95rem; font-weight: 400; }
.item__note  { font-size: .8rem; font-weight: 300; color: var(--ink-3); line-height: 1.55; }

/* Zweven: rustig omhoog en vervagen naar zichtbaar, zonder gordijn-effect */
.js .curated--float .reveal {
  transform: translateY(56px);
  transition: opacity 1800ms var(--ease), transform 2400ms var(--ease);
  transition-delay: calc(var(--d, 0) * 260ms);
}
.js .curated--float .reveal img { clip-path: none; transition: none; }
.js .curated--float .reveal.is-visible { transform: none; }

/* 6.6c Details: zes onderwerpen, gelijk verdeeld over drie kolommen.
   De middelste kolom staat iets lager, zodat het ritme speels blijft. */
.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(48px, 6vw, 96px) clamp(24px, 3vw, 56px); align-items: start; }
.dtl { display: grid; gap: 14px; }
.dtl img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dtl figcaption { display: grid; gap: 4px; }
.dtl--2, .dtl--5 { margin-top: clamp(40px, 6vw, 96px); }
.js .details-grid .reveal { transform: translateY(48px); transition: opacity 1600ms var(--ease), transform 2200ms var(--ease); transition-delay: calc(var(--d, 0) * 220ms); }
.js .details-grid .reveal img { clip-path: none; transition: none; }
.js .details-grid .reveal.is-visible { transform: none; }

/* 6.6b Onze gasten: twee rijen die langzaam in tegengestelde richting schuiven */
.guests { padding-block: var(--section); overflow: hidden; }
.guests--tint { background: var(--paper-soft); }
.guests--tint .section-head { border-color: rgba(35,21,12,.14); }
.marquee { display: flex; overflow: hidden; }
.marquee + .marquee { margin-top: 8px; }
.marquee__track {
  display: flex; flex: none; gap: clamp(40px, 6vw, 96px); padding-right: clamp(40px, 6vw, 96px);
  font-size: clamp(1.7rem, 3.6vw, 3.2rem); font-weight: 300; letter-spacing: -.01em;
  text-transform: uppercase; white-space: nowrap;
  animation: marquee 120s linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; color: var(--ink-3); }
.guests:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 6.7 Grote foto met een uitnodiging */
.invite { position: relative; color: #fff; overflow: hidden; background: var(--dark); }
.invite > img { width: 100%; height: clamp(460px, 76vh, 820px); object-fit: cover; }
.invite::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(35,21,12,.62) 0%, rgba(35,21,12,.2) 45%, rgba(35,21,12,0) 70%);
}
.invite__text {
  position: absolute; z-index: 1; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(24px, 4vw, 56px) var(--gutter);
}
.invite__text .serif-l { max-width: 14ch; }
.invite__foot { display: grid; gap: 16px; justify-items: start; max-width: 36ch; }
.invite__foot p { color: rgba(255,255,255,.9); }

/* 6.7b Bereikbaarheid: tekst met feitenlijst naast een foto, op beige */
.reach { background: var(--paper-soft); }
.reach .section-head { border-color: rgba(35,21,12,.14); margin-bottom: 8px; }
.reach__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.reach__text { display: grid; gap: 28px; }
.reach__list > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding-block: 14px; border-top: 1px solid rgba(35,21,12,.12); }
.reach__list dt { padding-top: 3px; }
.reach__list dd { margin: 0; font-weight: 300; color: var(--ink-2); }
.reach__links { display: flex; flex-wrap: wrap; gap: 16px 36px; }
.reach__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 6.8 Inspiratie: dik en dun, groot en klein, met een link terug naar de mogelijkheid */
.journal__row {
  display: grid; grid-template-columns: 1fr 2.4fr 160px; gap: clamp(16px, 2.5vw, 40px);
  padding-block: clamp(18px, 2vw, 28px); border-bottom: 1px solid var(--line);
  align-items: center;
}
.journal__meta { display: grid; gap: 8px; justify-items: start; }
.journal__more { font-size: .82rem; font-weight: 300; color: var(--ink-3); border-bottom: 1px solid transparent; transition: color 600ms var(--ease), border-color 600ms var(--ease); }
.journal__more:hover { color: var(--ink); border-color: currentColor; }
.journal__body { display: grid; gap: 12px; justify-items: start; }
.journal__title { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 300; line-height: 1.12; letter-spacing: -.02em; max-width: 24ch; }
.journal__title strong { font-weight: 500; }
.journal__thumb { aspect-ratio: 16 / 9; overflow: hidden; display: block; }
.journal__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease); }
.journal__row:hover .journal__thumb img { transform: scale(1.04); }

/* ── 6.9 SUBPAGINA'S ─────────────────────────────────────── */
/* Paginakop: tekst links, foto rechts */
.page-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(72vh, 760px); }
.page-hero__text {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 22px;
  padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(40px, 5vw, 72px);
}
.page-hero__kicker { color: var(--ink-3); }
.page-hero__kicker a { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; transition: background-size 700ms var(--ease); }
.page-hero__kicker a:hover { background-size: 100% 1px; background-position: 0 100%; }
.page-hero__title { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 300; line-height: 1.02; letter-spacing: -.025em; max-width: 14ch; }
.page-hero__lead { font-size: 1.05rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 44ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; }
.page-hero__media { position: relative; overflow: hidden; background: var(--paper-soft); }
.page-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__media .placeholder { position: absolute; inset: 0; }
/* Kop zonder foto */
.page-hero--plain { grid-template-columns: 1fr; min-height: 0; }
.page-hero--plain .page-hero__text { padding-top: clamp(72px, 9vw, 140px); padding-bottom: clamp(32px, 4vw, 56px); max-width: var(--wrap); width: 100%; margin-inline: auto; }

/* Feitenrij onder de kop */
.facts-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-row > div { padding: clamp(20px, 2.5vw, 32px) clamp(12px, 2vw, 28px); border-left: 1px solid var(--line); display: grid; gap: 4px; }
.facts-row > div:first-child { border-left: 0; padding-left: 0; }
.facts-row strong { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 300; line-height: 1.1; }
.facts-row span { font-size: .85rem; font-weight: 300; color: var(--ink-2); }

/* Fotorij: drie foto's in een vast ritme */
.gallery { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap); align-items: start; }
.gallery img { width: 100%; object-fit: cover; }
.gallery > :nth-child(1) img { aspect-ratio: 4 / 5; }
.gallery > :nth-child(2) img { aspect-ratio: 3 / 4; margin-top: clamp(40px, 6vw, 100px); }
.gallery > :nth-child(3) img { aspect-ratio: 4 / 5; }
.gallery figcaption { margin-top: 10px; }

/* Tekst naast foto, wisselend links en rechts */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 112px); align-items: center; padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.feature-row:first-of-type { border-top: 0; }
.section-head + .feature-row { border-top: 0; padding-top: 0; }
.feature-row--flip .feature-row__media { order: -1; }
.feature-row__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature-row__media .placeholder { position: relative; display: grid; aspect-ratio: 4 / 3; }
.feature-row__text { display: grid; gap: 18px; justify-items: start; }
.feature-row__title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; }
.feature-row__text p { font-size: 1rem; font-weight: 300; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
.feature-row__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .85rem; font-weight: 500; }
.feature-row__meta li::before { content: "— "; color: var(--ink-3); font-weight: 300; }

/* Lijst met kenmerken in kolommen */
.spec-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.spec-col { display: grid; gap: 14px; align-content: start; }
.spec-col ul { display: grid; gap: 0; }
.spec-col li { padding-block: 12px; border-top: 1px solid var(--line); font-weight: 300; color: var(--ink-2); line-height: 1.5; }
.spec-col li strong { font-weight: inherit; color: inherit; }

/* Prijzen: regels zoals op een menukaart */
.price-list { display: grid; }
.price-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding-block: 20px; border-top: 1px solid var(--line); }
.price-list li:last-child { border-bottom: 1px solid var(--line); }
.price-list__name { font-size: 1.15rem; font-weight: 400; }
.price-list__price { font-size: 1.15rem; font-weight: 300; white-space: nowrap; }
.price-list__note { grid-column: 1 / -1; font-size: .92rem; font-weight: 300; color: var(--ink-2); max-width: 60ch; }
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.price-card { display: grid; gap: 10px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); }
.price-card--dark { background: var(--dark); color: var(--grijs); border-color: var(--dark); }
.price-card__amount { font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 300; line-height: 1; }
.price-card__note { font-size: .9rem; font-weight: 300; color: var(--ink-2); }
.price-card--dark .price-card__note { color: rgba(246,243,228,.7); }
/* Prijskaart: bij hover vult de kaart zich van onder naar boven met donkerbruin */
a.price-card { position: relative; overflow: hidden; isolation: isolate; color: var(--ink); transition: color 600ms var(--ease), border-color 600ms var(--ease), transform 700ms var(--ease); }
a.price-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dark);
  transform: translateY(101%); transition: transform 700ms var(--ease);
}
a.price-card:hover, a.price-card:focus-visible { color: var(--grijs); border-color: var(--dark); transform: translateY(-4px); }
a.price-card:hover::before, a.price-card:focus-visible::before { transform: translateY(0); }
a.price-card .price-card__plus { transition: border-color 600ms var(--ease); }
.price-card__hours { margin-left: 10px; font-weight: 400; letter-spacing: .04em; text-transform: none; opacity: .65; }
.price-card__amount small { font-size: .82rem; font-weight: 300; letter-spacing: 0; opacity: .7; }
.price-card__plus { line-height: 1.7; }
/* Dag staat standaard donker; ga je over een andere kaart, dan wordt Dag weer wit */
a.price-card--featured { color: var(--grijs); border-color: var(--dark); }
a.price-card--featured::before { transform: translateY(0); }
a.price-card--featured .price-card__plus { border-color: rgba(246,243,228,.2); }
.price-cards:hover a.price-card--featured:not(:hover) { color: var(--ink); border-color: var(--line); }
.price-cards:hover a.price-card--featured:not(:hover)::before { transform: translateY(-101%); }
.price-cards:hover a.price-card--featured:not(:hover) .price-card__plus { border-color: var(--line); }
.extras--single { grid-template-columns: minmax(0, 760px); }
.price-list--compact li { padding-block: 14px; }
.price-list--compact .price-list__name, .price-list--compact .price-list__price { font-size: 1rem; }
.price-list--compact .price-list__note { font-size: .88rem; }
a.price-card:hover .price-card__plus { border-color: rgba(246,243,228,.2); }
.price-card__plus { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .92rem; font-weight: 300; }
.price-card__plus strong { font-weight: 500; }
.price-card--dark .price-card__plus { border-color: rgba(246,243,228,.2); }
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(56px, 7vw, 96px); }
.extras__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; }
.extras__list li { display: flex; justify-content: space-between; gap: 20px; padding-block: 12px; border-top: 1px solid var(--line); font-weight: 300; }
.extras__list li:last-child { border-bottom: 1px solid var(--line); }
.extras__list li span:last-child { white-space: nowrap; color: var(--ink); font-weight: 400; }
@media (max-width: 860px) { .extras { grid-template-columns: 1fr; } }
.small-print { margin-top: 20px; font-size: .88rem; font-weight: 300; color: var(--ink-3); }

/* Veelgestelde vragen: uitklappen */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-block: 22px; cursor: pointer; list-style: none;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 400;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid currentColor; border-radius: 50%; font-weight: 300;
  transition: transform 600ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 0 24px; max-width: 64ch; font-weight: 300; line-height: 1.7; color: var(--ink-2); }
.faq__group + .faq__group { margin-top: clamp(48px, 6vw, 88px); }

/* Compacter ritme voor subpagina's */
.section--compact { padding-block: clamp(48px, 6vw, 88px); }
.page-hero { min-height: min(56vh, 600px); }
.page-hero__text { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(32px, 4vw, 56px); }
.facts-row--tight { margin-bottom: clamp(40px, 5vw, 64px); }
.spec-cols--4 { grid-template-columns: repeat(4, 1fr); }
.facts-row--3 { grid-template-columns: repeat(3, 1fr); }

/* Kaartjes: foto, titel, één regel */
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 48px) var(--gap); }
.mini { display: grid; gap: 8px; align-content: start; }
.mini__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-soft); margin-bottom: 6px; }
.mini__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease); }
.mini:hover .mini__media img { transform: scale(1.04); }
.mini__title { font-size: 1.15rem; font-weight: 400; }
.mini__text { font-size: .92rem; font-weight: 300; color: var(--ink-2); max-width: 38ch; }

/* Compacte afsluiting */
.cta-line { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.cta-line__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; flex-wrap: wrap; }
.cta-line .page-hero__lead { margin-top: 8px; }

/* Formulier van Cognito */
.form-wrap { max-width: 860px; }
.form-wrap iframe { width: 100%; min-height: 900px; border: 0; }

/* Kaart die pas laadt na een klik (privacy) */
.map-consent { display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; aspect-ratio: 16 / 9; background: var(--paper-soft); padding: 24px; }
.map-consent p { max-width: 40ch; font-weight: 300; color: var(--ink-2); }
.map-consent iframe { width: 100%; height: 100%; border: 0; }

/* Lopende tekst: artikelen en privacy */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 400; margin-top: 2em; }
.prose p, .prose li { font-weight: 300; line-height: 1.75; color: var(--ink-2); }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose figure img { width: 100%; }
.draft-note { padding: 14px 18px; background: var(--paper-soft); font-size: .9rem; font-weight: 400; }

/* Contactblokken */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.contact-card { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.contact-card p, .contact-card a { font-size: 1.1rem; font-weight: 300; }
.contact-card .arrow-link { font-size: .78rem; margin-top: 8px; }

@media (max-width: 860px) {
  .page-hero, .feature-row { grid-template-columns: 1fr; }
  .page-hero__media { min-height: 56vh; order: -1; }
  .feature-row--flip .feature-row__media { order: 0; }
  .facts-row { grid-template-columns: 1fr 1fr; }
  .facts-row > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts-row > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .gallery, .spec-cols, .price-cards, .contact-grid, .minis { grid-template-columns: 1fr; }
  .spec-cols--4 { grid-template-columns: 1fr 1fr; }
  .gallery > :nth-child(2) img { margin-top: 0; }
}

/* ── 7. FOOTER ───────────────────────────────────────────── */
.site-footer { background: var(--dark); color: var(--grijs); padding-block: clamp(96px, 12vw, 180px) 40px; }
.site-footer .muted { color: rgba(246,243,228,.6); }
.site-footer .caption { color: rgba(246,243,228,.6); }
.footer__grid { display: grid; grid-template-columns: auto auto auto 1fr; gap: 24px clamp(40px, 6vw, 112px); align-items: end; }
.footer__col { display: grid; gap: 10px; align-content: start; align-self: start; }
.footer__col .caption { margin-bottom: 10px; }
.footer__mark { justify-self: end; width: 100%; max-width: 640px; color: var(--grijs); }
.footer__mark .logo { width: 100%; }
.footer__legal { margin-top: clamp(80px, 10vw, 140px); padding-top: 24px; border-top: 1px solid rgba(246,243,228,.16); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Cookiemelding: rustig onderin, niet over de hele pagina */
.cookie-bar {
  position: fixed; z-index: 150; left: 16px; right: 16px; bottom: 16px; margin-inline: auto; max-width: 760px;
  display: flex; align-items: center; gap: 24px 40px; flex-wrap: wrap;
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3.4vw, 48px); background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 32px; box-shadow: 0 12px 40px rgba(35,21,12,.16);
  animation: cookie-in 700ms var(--ease);
}
.cookie-bar[hidden] { display: none; }
/* Wazige laag over de pagina zolang de melding openstaat */
.cookie-overlay {
  position: fixed; inset: 0; z-index: 149;
  background: rgba(35,21,12,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: cookie-fade 700ms var(--ease);
}
.cookie-bar .btn { border-radius: 100px; }

.cookie-overlay[hidden] { display: none; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cookie-fade { from { opacity: 0; } to { opacity: 1; } }
.cookie-bar p { flex: 1 1 320px; font-size: .9rem; font-weight: 300; line-height: 1.55; color: var(--ink-2); }
.cookie-bar p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-bar .btn { min-height: 42px; padding: 0 20px; }
.cookie-reopen { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; padding: 0; cursor: pointer; }
.cookie-reopen:hover { color: var(--grijs); }

/* ── 8. ANIMATIE ─────────────────────────────────────────── */
/* Alleen opacity, transform en clip-path; zonder JavaScript is alles direct zichtbaar */
.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 1200ms var(--ease), transform 1400ms var(--ease);
  transition-delay: calc(var(--d, 0) * 140ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Foto's binnen een blok openen zich als een gordijn */
.js .reveal img { clip-path: inset(0 0 100% 0); transition: clip-path 1600ms var(--ease-in-out), transform 1600ms var(--ease); transition-delay: calc(var(--d, 0) * 140ms); }
.js .reveal.is-visible img { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flip__face { transition: none; }
  .js .reveal, .js .reveal img:not(.setups__img), .js .step, .js .steps__line::before, .js .steps__line::after { opacity: 1; clip-path: none; transition: none; }
  .js .step { transform: none; }
  .js .steps__line::before { width: 100%; }
  .js .steps__line::after { left: calc(100% - 11px); }
  .marquee__track { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ── 9. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1080px) {
  .curated { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .details-grid { grid-template-columns: 1fr 1fr; }
  .dtl--5 { margin-top: 0; }
  .steps__line { display: none; }
  .js .step { transition-delay: calc(var(--i) * 150ms); }
  .curated > * { grid-column: auto; grid-row: auto; margin: 0; }
  .curated .item { grid-column: 1 / -1; }
  .journal__row { grid-template-columns: 1fr 2fr 160px; }
  .footer__grid { grid-template-columns: repeat(3, auto); }
  .footer__mark { grid-column: 1 / -1; justify-self: start; margin-top: 32px; }
}

@media (max-width: 860px) {
  .nav, .header__contact { display: none; }
  .header__inner { grid-template-columns: auto 1fr auto; }
  .header__brand { grid-column: 1; grid-row: 1; }
  .header__actions { grid-column: 3; grid-row: 1; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .intro, .statement, .panel-split { grid-template-columns: 1fr; }
  .intro__right { min-height: 70vh; }
  .statement__media { min-height: 70vh; }
  .journal__row { grid-template-columns: 1fr; }
  .setups { grid-template-columns: 1fr; }
  .setups__media { order: -1; }
  .setups__plan { grid-template-columns: 1fr; align-content: center; }
  .setups__plan .plan { max-height: 40%; }
  .reach__inner { grid-template-columns: 1fr; }
  .reach__list > div { grid-template-columns: 1fr; gap: 4px; }
  .journal__thumb { max-width: 320px; }
}

@media (max-width: 560px) {
  .header__cta { display: none; }
  .rooms { grid-template-columns: 1fr; }
  .curated { grid-template-columns: 1fr; row-gap: 48px; }
  .steps { grid-template-columns: 1fr; row-gap: 28px; }
  .details-grid { grid-template-columns: 1fr; }
  .dtl--2, .dtl--5 { margin-top: 0; }
  .section-bar--three { grid-template-columns: 1fr 1fr; }
  .section-bar--three > :first-child { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Catering op Faciliteiten: foto naast de lijst */
.catering-split { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.catering-split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.catering-split .page-hero__lead { margin-bottom: 20px; }
.price-list--compact li:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
@media (max-width: 860px) { .catering-split { grid-template-columns: 1fr; } }

/* Korte verwijzing met foto */
.teaser { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.teaser__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-soft); }
.teaser__media img { width: 100%; height: 100%; object-fit: cover; }
.teaser__text { display: grid; gap: 18px; justify-items: start; }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr; } }

/* Arrangementen: drie kolommen met prijs en inhoud */
.arr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.arr { display: grid; gap: 14px; align-content: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.arr__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.arr__list li { padding-block: 8px; border-bottom: 1px solid var(--line); font-size: .92rem; font-weight: 300; color: var(--ink-2); }
.price-cards + .small-print { margin-top: 16px; }
@media (max-width: 860px) { .arr-grid { grid-template-columns: 1fr; } }

/* Tarieven, compact */
.price-cards--compact .price-card { padding: clamp(20px, 2.4vw, 32px); gap: 6px; }
.price-cards--compact .price-card__amount { font-size: clamp(2rem, 3vw, 2.6rem); }
.price-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px);
  margin-top: var(--gap); padding: clamp(28px, 3.5vw, 48px);
  background: var(--paper-soft);
}
.price-panel__col { display: grid; gap: 12px; align-content: start; }
.price-panel__intro { font-size: .92rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.rows { margin-top: 4px; }
.rows li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding-block: 10px; border-top: 1px solid rgba(35,21,12,.12); }
.rows li:last-child { border-bottom: 1px solid rgba(35,21,12,.12); }
.row__name { font-size: .98rem; font-weight: 400; }
.row__price { font-size: .98rem; font-weight: 400; white-space: nowrap; }
.row__note { grid-column: 1 / -1; font-size: .84rem; font-weight: 300; color: var(--ink-2); margin-top: 2px; }
@media (max-width: 860px) { .price-panel { grid-template-columns: 1fr; } }
.page-hero--plain .page-hero__text { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(24px, 3vw, 40px); }

/* Prijslijst als menukaart: naam, stippellijn, prijs */
.price-panel__sub { margin-top: 4px; font-size: .8rem; font-weight: 300; color: var(--ink-3); }
.price-panel { gap: clamp(40px, 6vw, 96px); }
.rows li { grid-template-columns: auto 1fr auto; align-items: baseline; padding-block: 12px; }
.rows li::after { content: ""; grid-column: 2; grid-row: 1; border-bottom: 1px dotted rgba(35,21,12,.3); margin: 0 10px; transform: translateY(-4px); }
.row__name { grid-column: 1; grid-row: 1; }
.row__price { grid-column: 3; grid-row: 1; }
.row__note { grid-row: 2; }
.price-cards--compact + .small-print { margin-top: 12px; margin-bottom: clamp(32px, 4vw, 56px); }

/* Tarieven: arrangement als drie kleine prijzen, catering als menukaart in twee kolommen */
.mini-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 20px; }
.mini-price { display: grid; gap: 4px; padding: 18px 20px; background: var(--paper-soft); }
.mini-price__amount { font-size: 1.6rem; font-weight: 300; line-height: 1.1; }
.mini-price__note { font-size: .82rem; font-weight: 300; color: var(--ink-2); }
.rows--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); margin-top: 20px; }
.rows--2col li:last-child { border-bottom: 0; }
.rows--2col { border-bottom: 1px solid rgba(35,21,12,.12); }
@media (max-width: 860px) { .mini-prices, .rows--2col { grid-template-columns: 1fr; } }
.section--compact .section-head { margin-bottom: clamp(20px, 2.5vw, 32px); padding-bottom: 16px; }
.section--compact + .section--compact { padding-top: 0; }
.section--compact .page-hero__lead { margin-bottom: 4px; }

/* Onze gasten: kleine logo's met veel ruimte */
.guests--logos .marquee__track { gap: clamp(56px, 7vw, 112px); padding-right: clamp(56px, 7vw, 112px); align-items: center; }
.guests--logos .marquee__track img { width: auto; max-width: 170px; object-fit: contain; opacity: .8; }
.guests--logos .marquee + .marquee { margin-top: clamp(28px, 3.5vw, 48px); }
.guests--logos .marquee--reverse .marquee__track img { opacity: .8; }

/* Details: onregelmatig, met veel lucht */
.details-grid--loose { grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 2.5vw, 40px); row-gap: clamp(72px, 9vw, 160px); }
.details-grid--loose .dtl { margin: 0; }
.details-grid--loose .dtl--1 { grid-column: 1 / 5; }
.details-grid--loose .dtl--1 img { aspect-ratio: 3 / 4; }
.details-grid--loose .dtl--2 { grid-column: 6 / 9; margin-top: clamp(80px, 10vw, 180px); }
.details-grid--loose .dtl--2 img { aspect-ratio: 1 / 1; }
.details-grid--loose .dtl--3 { grid-column: 10 / 13; margin-top: clamp(20px, 3vw, 48px); }
.details-grid--loose .dtl--3 img { aspect-ratio: 4 / 5; }
.details-grid--loose .dtl--4 { grid-column: 2 / 7; }
.details-grid--loose .dtl--4 img { aspect-ratio: 3 / 2; }
.details-grid--loose .dtl--5 { grid-column: 8 / 12; margin-top: clamp(100px, 12vw, 220px); }
.details-grid--loose .dtl--5 img { aspect-ratio: 4 / 3; }
.details-grid--loose .dtl--6 { grid-column: 1 / 4; margin-top: clamp(40px, 5vw, 80px); }
.details-grid--loose .dtl--6 img { aspect-ratio: 1 / 1; }
.details-grid--loose .dtl--7 { grid-column: 6 / 11; }
.details-grid--loose .dtl--7 img { aspect-ratio: 16 / 10; }
@media (max-width: 860px) {
  .details-grid--loose { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .details-grid--loose .dtl { grid-column: auto !important; margin-top: 0 !important; }
  .details-grid--loose .dtl:nth-child(even) { margin-top: 48px !important; }
}
@media (max-width: 560px) { .details-grid--loose { grid-template-columns: 1fr; } .details-grid--loose .dtl:nth-child(even) { margin-top: 0 !important; } }

/* Plattegrond gecentreerd in het vlak, met de naam eronder */
.setups__plan { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 20px; text-align: center; }
.setups__plan .plan { width: min(70%, 460px); }
.setups__facts { justify-items: center; }

/* Bereikbaarheid: tekst op beige links, foto als volledig vlak rechts (rand tot rand) */
.reach.section, .reach.section--compact { padding-block: 0; }
.reach__inner { max-width: none; padding-inline: 0; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.reach__text {
  width: 100%; max-width: calc(var(--wrap) / 2); justify-self: end;
  padding: clamp(56px, 7vw, 112px) clamp(32px, 5vw, 80px) clamp(56px, 7vw, 112px) var(--gutter);
}
.reach__media { position: relative; margin: 0; min-height: 420px; }
.reach__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.reach .map-consent { aspect-ratio: auto; min-height: 420px; height: 100%; }
.reach .map-consent iframe { position: absolute; inset: 0; }
.reach .map-consent { position: relative; }
@media (max-width: 860px) {
  .reach__inner { grid-template-columns: 1fr; }
  .reach__text { max-width: none; padding-inline: var(--gutter); }
  .reach__media, .reach .map-consent { min-height: 60vw; }
}

/* Tarieven: kaarten die omdraaien naar het arrangement */
.pflips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pflip { position: relative; display: block; height: clamp(250px, 22vw, 300px); color: var(--ink); }
.pflip__face {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform 1000ms var(--ease-in-out), visibility 0s linear 500ms;
}
.pflip__front { background: var(--paper); border: 1px solid var(--line); gap: 8px; transform: perspective(1800px) rotateY(0deg); }
.pflip__front .price-card__amount { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.pflip__hint { margin-top: auto; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pflip__hint::after { content: "  ↻"; }
.pflip__back { background: var(--dark); color: var(--grijs); justify-content: space-between; gap: 16px; visibility: hidden; transform: perspective(1800px) rotateY(180deg); }
.pflip:hover .pflip__front, .pflip:focus-visible .pflip__front { transform: perspective(1800px) rotateY(-180deg); visibility: hidden; }
.pflip:hover .pflip__back, .pflip:focus-visible .pflip__back { transform: perspective(1800px) rotateY(0deg); visibility: visible; }
.pflip__arr li { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid rgba(246,243,228,.18); font-size: 1rem; }
.pflip__arr li:first-child { padding-top: 0; }
.pflip__arr small { font-size: .78rem; opacity: .7; }
.pflip__inhoud { font-size: .85rem; font-weight: 300; line-height: 1.6; color: rgba(246,243,228,.75); }
.pflips__note { margin-top: 18px; font-size: .92rem; font-weight: 300; color: var(--ink-2); }
@media (hover: none), (max-width: 860px) {
  .pflips { grid-template-columns: 1fr; }
  .pflip { height: auto; }
  .pflip__face { position: relative; transform: none !important; visibility: visible !important; }
  .pflip__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pflip__face { transition: none; } }

/* Bereikbaarheid compacter */
.reach__text { padding-block: clamp(40px, 4.5vw, 64px); gap: 18px; }
.reach .section-head { margin-bottom: 0; }
.reach__list > div { padding-block: 9px; grid-template-columns: 120px 1fr; }
.reach__list dd { font-size: .95rem; line-height: 1.55; }
.reach__links .btn { min-height: 42px; }
.reach__media, .reach .map-consent { min-height: 0; }

/* Tarieven: drie panelen over de volle breedte die omdraaien, zoals de ruimtes */
.rooms-flip--3 { grid-template-columns: repeat(3, 1fr); }
.flip--price { height: clamp(380px, 52vh, 560px); }
.flip--price .flip__price { position: absolute; z-index: 1; left: clamp(20px, 2.5vw, 36px); right: clamp(20px, 2.5vw, 36px); bottom: clamp(18px, 2vw, 30px); display: grid; gap: 4px; color: #fff; }
.flip--price .flip__name { position: static; font-size: clamp(2rem, 3.4vw, 3rem); }
.flip__amount { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 300; }
.flip__amount small { font-size: .8rem; opacity: .8; margin-left: 6px; letter-spacing: .04em; }
.flip--price .flip__front::after { background: linear-gradient(180deg, rgba(35,21,12,0) 35%, rgba(35,21,12,.65) 100%); }
.flip--price .flip__back { padding: clamp(24px, 2.8vw, 40px); }
.flip__facts--list { display: grid; gap: 0; padding-top: 0; border-top: 0; }
.flip__facts--list li { display: flex; align-items: baseline; gap: 14px; padding-block: 12px; border-bottom: 1px solid rgba(246,243,228,.2); }
.flip__facts--list strong { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 300; min-width: 4.2em; }
.flip--price .flip__lead { font-size: .9rem; }
.section--flush-bottom + * , .pflips__note { }
.rooms-flip--3 + .wrap .pflips__note { margin-top: 18px; }
@media (hover: none), (max-width: 860px) { .rooms-flip--3 { grid-template-columns: 1fr; } .flip--price .flip__front { height: 56vw; min-height: 260px; } }

/* Tarieven-panelen zonder foto: één geheel in Gebroken Grijs */
.rooms-flip--3 { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.flip--price { height: clamp(300px, 34vh, 380px); }
.flip__front--plain { background: var(--paper-soft); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 2.8vw, 40px); color: var(--ink); }
.rooms-flip--3 .flip + .flip .flip__front--plain { border-left: 1px solid rgba(35,21,12,.12); }
.flip__front--plain::after { content: none; }
.flip__front--plain .flip__kicker { color: var(--ink-3); }
.tprice { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 18px; }
.tprice__room, .tprice__arr { display: grid; gap: 2px; }
.tprice__amount { font-size: clamp(2.6rem, 4.4vw, 3.8rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.tprice__amount--s { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.tprice__label { font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tprice__plus { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 200; padding-bottom: 22px; color: var(--ink-3); }
.flip__hint { font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.flip__hint::after { content: "  ↻"; }
.flip__lead--l { font-size: 1.05rem; color: var(--grijs); }
@media (hover: none), (max-width: 860px) { .flip--price .flip__front--plain { height: auto; } .flip__hint { display: none; } }
.flip--price { height: clamp(380px, 40vh, 440px); }
.flip--price .flip__back { gap: 12px; padding-block: clamp(22px, 2.4vw, 32px); }
.flip--price .flip__body { gap: 12px; }
.flip--price .flip__facts--list li { padding-block: 8px; }
.flip--price .flip__facts--list strong { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
.flip--price .flip__lead { font-size: .84rem; line-height: 1.55; }
.flip--price .flip__lead--l { font-size: 1rem; }

/* Tarieven v2: drie kolommen zaalhuur + arrangement */
.tcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.tcol { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 4px;
  padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--line); color: var(--ink);
  transition: color 600ms var(--ease), border-color 600ms var(--ease); }
.tcol::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dark); transform: translateY(101%); transition: transform 700ms var(--ease); }
.tcol__name { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tcol__name span { margin-left: 10px; font-weight: 400; text-transform: none; letter-spacing: .02em; opacity: .65; }
.tcol__price { margin-top: 14px; font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 300; line-height: 1; }
.tcol__label { font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.tcol__lines { margin-top: 18px; border-top: 1px solid currentColor; border-color: rgba(35,21,12,.15); }
.tcol__lines li { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid rgba(35,21,12,.15); font-size: .95rem; font-weight: 300; }
.tcol__lines li span:last-child { font-weight: 500; white-space: nowrap; }
.tcol--featured, .tcol:hover { color: var(--grijs); border-color: var(--dark); }
.tcol--featured::before, .tcol:hover::before { transform: translateY(0); }
.tcol--featured .tcol__lines, .tcol--featured .tcol__lines li, .tcol:hover .tcol__lines, .tcol:hover .tcol__lines li { border-color: rgba(246,243,228,.2); }
.tcols:hover .tcol--featured:not(:hover) { color: var(--ink); border-color: var(--line); }
.tcols:hover .tcol--featured:not(:hover)::before { transform: translateY(101%); }
.tcols:hover .tcol--featured:not(:hover) .tcol__lines, .tcols:hover .tcol--featured:not(:hover) .tcol__lines li { border-color: rgba(35,21,12,.15); }

/* Wat zit er in het arrangement: foto naast een lijst, op beige */
.arr-strip { display: grid; grid-template-columns: 1fr 1.4fr; margin-top: var(--gap); background: var(--paper-soft); }
.arr-strip__media { position: relative; min-height: 260px; margin: 0; }
.arr-strip__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arr-strip__text { display: grid; gap: 16px; align-content: center; padding: clamp(28px, 3.5vw, 48px); }
.arr-strip__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.arr-strip__list li { padding-block: 8px; border-bottom: 1px solid rgba(35,21,12,.12); font-weight: 300; }
.arr-strip__note { font-size: .88rem; font-weight: 300; color: var(--ink-2); }

/* Catering in drie groepen */
.cgroups { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 48px); margin-top: 28px; }
.cgroup { display: grid; gap: 14px; align-content: start; }
.cgroup__media { aspect-ratio: 4 / 3; overflow: hidden; }
.cgroup__media img { width: 100%; height: 100%; object-fit: cover; }
.cgroup__list li { padding-block: 12px; border-top: 1px solid var(--line); }
.cgroup__list li:last-child { border-bottom: 1px solid var(--line); }
.cgroup__row { display: flex; justify-content: space-between; gap: 16px; font-size: 1rem; }
.cgroup__row span:last-child { white-space: nowrap; }
.cgroup__list p { margin-top: 4px; font-size: .86rem; font-weight: 300; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 860px) {
  .tcols, .cgroups, .arr-strip { grid-template-columns: 1fr; }
  .arr-strip__list { grid-template-columns: 1fr; }
}

/* Opstellingen iets compacter */
.setups__item { padding: clamp(12px, 1.5vw, 18px) 0; }
.setups__name { font-size: clamp(1.4rem, 2.1vw, 1.9rem); }
.setups__icon { width: 52px; }
.setups__item { grid-template-columns: 44px 1fr 52px; }
.setups__media { aspect-ratio: 3 / 2; }

/* Fotostrook: volle breedte, loopt vanzelf, pauzeert bij hover, met pijlen */
.run { position: relative; padding-block: clamp(32px, 4vw, 56px); }
.run__viewport { overflow: hidden; }
.run__track { display: flex; gap: var(--gap); width: max-content; will-change: transform; }
.run__track img { height: clamp(260px, 32vw, 460px); width: auto; object-fit: cover; flex: none; }
.run__controls { max-width: var(--wrap); margin: 16px auto 0; padding-inline: var(--gutter); display: flex; justify-content: flex-end; gap: 10px; }
.run__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink);
  transition: background 500ms var(--ease), color 500ms var(--ease); }
.run__btn:hover { background: var(--ink); color: var(--paper); }

/* Fotostrook zonder ruimte tussen de foto's */
.run__track { gap: 0; }
/* Arrangement: koffie en fruit naast elkaar */
.arr-strip__media--duo { display: grid; grid-template-columns: 1fr 1fr; }
.arr-strip__media--duo img { position: static; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }

/* Kerneigenschappen met dunne lijniconen */
.feats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.feat { display: grid; gap: 8px; align-content: start; padding: clamp(24px, 2.6vw, 36px) clamp(16px, 2vw, 28px) clamp(24px, 2.6vw, 36px) 0;
  border-bottom: 1px solid var(--line); }
.feat:not(:nth-child(4n+1)) { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.feat__icon { width: 30px; height: 30px; color: var(--ink); margin-bottom: 6px; }
.feat__title { font-size: 1.05rem; font-weight: 400; }
.feat__text { font-size: .9rem; font-weight: 300; line-height: 1.55; color: var(--ink-2); max-width: 28ch; }
@media (max-width: 860px) {
  .feats { grid-template-columns: 1fr 1fr; }
  .feat:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
  .feat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
}

/* Volle breedte: foto links als vlak, tekst rechts */
.split-full { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(380px, 46vw, 600px); border-top: 1px solid var(--line); }
.split-full__media { position: relative; margin: 0; overflow: hidden; background: var(--paper-soft); }
.split-full__media img, .split-full__media .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-full__text { display: grid; gap: 18px; align-content: center; justify-items: start;
  padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(40px, 6vw, 96px) clamp(32px, 6vw, 96px); max-width: calc(var(--wrap) / 2); }
@media (max-width: 860px) { .split-full { grid-template-columns: 1fr; } .split-full__media { min-height: 60vw; } .split-full__text { padding-inline: var(--gutter); } }

/* Catering zonder foto's: icoon, titel, lijst met weinig lijnen */
.cgroup--plain { gap: 10px; }
.cgroup__title { font-size: 1.25rem; font-weight: 400; }
.cgroup--plain .cgroup__list li { border: 0; padding-block: 10px; }
.cgroup--plain .cgroup__list li:last-child { border: 0; }
.cgroup--plain .cgroup__list { border-top: 1px solid var(--line); padding-top: 4px; }
/* Contact: lucht en een kaartillustratie */
.page-hero--plain + .reach { margin-top: clamp(40px, 6vw, 96px); }
.map-ill { width: min(70%, 320px); color: var(--ink); margin-bottom: 8px; }

.details-grid--loose .dtl--6 img { aspect-ratio: 3 / 4; }

/* Faciliteiten: kolomkop met lijnicoon */
.spec-col__head { display: grid; gap: 12px; justify-items: start; padding-bottom: 6px; }
.spec-col__head .feat__icon { margin: 0; width: 34px; height: 34px; }
.spec-col__title { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 400; line-height: 1.2; }
/* Arrangement op volle breedte: foto's rand tot rand links, tekst rechts */
.arr-strip--full { margin-top: 0; grid-template-columns: 1.1fr 1fr; min-height: clamp(380px, 42vw, 560px); }
.arr-strip--full .arr-strip__text { padding: clamp(32px, 5vw, 80px) var(--gutter) clamp(32px, 5vw, 80px) clamp(32px, 5vw, 80px); max-width: 640px; }
.arr-strip--full .arr-strip__media--duo img { min-height: 100%; }
@media (max-width: 860px) { .arr-strip--full .arr-strip__media--duo img { min-height: 56vw; } .arr-strip--full .arr-strip__text { padding-inline: var(--gutter); } }

/* Kop zonder foto: geen extra hoogte boven de tekst */
.page-hero.page-hero--plain { min-height: 0; }

/* Openingsfoto wisselt rustig */
.intro__slides { position: absolute; inset: 0; }
.intro__slides img { opacity: 0; transition: opacity 1800ms var(--ease); }
.intro__slides img.is-active { opacity: 1; }
/* Zo werkt het: cijfers in een cirkel op de lijn */
.steps__line { top: 28px; }
.step__num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ink);
  background: var(--paper); position: relative; z-index: 1; margin-bottom: 10px;
  font-size: 1.35rem !important; font-weight: 300 !important; line-height: 1 !important; letter-spacing: 0; color: var(--ink); -webkit-text-stroke: 0;
  transition: background 600ms var(--ease), color 600ms var(--ease); }
.step:hover .step__num { background: var(--ink); color: var(--paper); }
/* Afsluitende regel: warm beige vlak */
.cta-line--beige { background: var(--paper-soft); border-top: 0; }
/* Catering: icoon in een cirkel, titel gecentreerd, meer lucht */
.cgroups { gap: clamp(36px, 5vw, 80px); margin-top: clamp(36px, 4vw, 56px); }
.cgroup--plain { gap: 18px; }
.cgroup--plain > .feat__icon { justify-self: center; box-sizing: content-box; width: 28px; height: 28px; padding: 18px; margin: 0;
  border: 1px solid var(--ink); border-radius: 50%; }
.cgroup--plain .cgroup__title { text-align: center; font-size: clamp(1.4rem, 2vw, 1.7rem); padding-bottom: 14px; }
.cgroup--plain .cgroup__list li { padding-block: 14px; }

/* Volle breedte gespiegeld: tekst links, foto rechts */
.split-full--rev .split-full__media { order: 2; }
.split-full--rev .split-full__text { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
@media (max-width: 860px) { .split-full--rev .split-full__media { order: 0; } .split-full--rev .split-full__text { padding-left: var(--gutter); } }
/* Arrangement en Catering als één geheel: zelfde beige, zelfde hoogte, foto om en om */
.split-full--rev { background: transparent; border-top: 0; min-height: clamp(380px, 42vw, 560px); }
.split-full--rev .split-full__text { padding-top: clamp(32px, 5vw, 80px); padding-bottom: clamp(32px, 5vw, 80px); }

/* Opstellingen op volle breedte: lijst links in de lijn van de pagina, foto en plattegrond tot de rechterrand */
.setups--full { grid-template-columns: minmax(300px, 1fr) 1.6fr; gap: clamp(32px, 4vw, 72px);
  padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.setups--full .setups__media { aspect-ratio: auto; min-height: 0; height: clamp(340px, 34vw, 500px); align-self: center; }
.setups--full .setups__item { padding-block: clamp(8px, 1vw, 13px); }
@media (max-width: 860px) {
  .setups--full { grid-template-columns: 1fr; padding-left: 0; }
  .setups--full .setups__media { order: -1; }
  .setups--full .setups__list { padding-inline: var(--gutter); }
  .setups--full .setups__media { min-height: 0; height: 66vw; }
}

/* De details: achtste item, de eigen sleutel */
.details-grid--loose .dtl--7 { grid-column: 5 / 10; }
.details-grid--loose .dtl--8 { grid-column: 10 / 13; margin-top: clamp(60px, 8vw, 140px); }
.details-grid--loose .dtl--8 img { aspect-ratio: 1 / 1; }

/* Wat gaan jullie doen: wazige detailfoto, opties verschijnen een voor een */
.band__media img { filter: blur(3px) saturate(.95); transform: scale(1.04); opacity: .5; }
.band__list li { display: inline-block; }
.js .band__list.reveal { opacity: 1; transform: none; clip-path: none; }
.js .band__list.reveal li { opacity: 0; transform: translateY(18px); filter: blur(4px);
  transition: opacity 1100ms var(--ease), transform 1300ms var(--ease), filter 1100ms var(--ease); }
.js .band__list.reveal.is-visible li { opacity: 1; transform: none; filter: none; }
.js .band__list.reveal li:nth-child(2) { transition-delay: 260ms; }
.js .band__list.reveal li:nth-child(3) { transition-delay: 520ms; }
.js .band__list.reveal li:nth-child(4) { transition-delay: 780ms; }
.js .band__list.reveal li:nth-child(5) { transition-delay: 1040ms; }
.js .band__list.reveal li:nth-child(6) { transition-delay: 1300ms; }
@media (prefers-reduced-motion: reduce) { .js .band__list.reveal li { opacity: 1; transform: none; filter: none; transition: none; } }
/* Opstellingen: foto precies even hoog als de lijst, van eerste tot laatste lijn */
@media (min-width: 861px) {
  .setups--full { align-items: stretch; }
  .setups--full .setups__list { align-content: start; align-self: start; }
  .setups--full .setups__media { height: auto; min-height: 0; align-self: stretch; }
}
/* Opstellingen: hele foto zichtbaar (3:2); de lijst rekt mee zodat de lijnen bij de foto beginnen en eindigen */
@media (min-width: 861px) {
  .setups--full .setups__media { aspect-ratio: 3 / 2; height: auto; align-self: start; }
  .setups--full .setups__list { align-self: stretch; display: flex; flex-direction: column; }
  .setups--full .setups__list li { flex: 1 1 0; display: flex; }
  .setups--full .setups__item { flex: 1; align-content: center; }
}
/* Zo werkt het: donker vlak, korte titels in kleine hoofdletters */
.section--dark { background: var(--dark); color: var(--paper); }
.section--dark .section-title { color: var(--paper); }
.section--dark .steps__line::before { background: rgba(246,243,228,.55); }
.section--dark .steps__line::after { border-color: rgba(246,243,228,.55); }
.section--dark .step__num { background: var(--dark); color: var(--paper); border-color: var(--paper); }
.section--dark .step:hover .step__num { background: var(--paper); color: var(--dark); }
.section--dark .step__text { color: rgba(246,243,228,.72); }
.step__title { margin-top: 4px; }
.section--dark .step__title { color: var(--paper); }
/* Opstellingen op donker: lichte tekst en lijnen, plattegrond blijft op een licht vlak */
.section--dark.setups-full .setups__item { border-top-color: rgba(246,243,228,.22); color: rgba(246,243,228,.6); }
.section--dark.setups-full .setups__list li:last-child .setups__item { border-bottom-color: rgba(246,243,228,.22); }
.section--dark.setups-full .setups__item:hover, .section--dark.setups-full .setups__item.is-active { color: var(--paper); }
.section--dark.setups-full .setups__text { color: rgba(246,243,228,.72); }
.section--dark.setups-full .setups__icon { color: rgba(246,243,228,.5); }
.section--dark.setups-full .setups__item.is-active .setups__icon { color: var(--paper); }
.section--dark.setups-full .setups__media { background: #2E1E14; }
.section--dark.setups-full .setups__hint { color: var(--paper); }
/* Zo werkt het: lijnicoon in de cirkel in plaats van een cijfer */
.step__num svg { width: 24px; height: 24px; }

/* Bekijk ook onze andere ruimte: donker vlak */
.split-full--dark { background: var(--dark); color: var(--paper); border-top: 0; }
.split-full--dark .section-title { color: var(--paper); }
.split-full--dark .page-hero__lead { color: rgba(246,243,228,.75); }
.split-full--dark .arrow-link { color: var(--paper); }
.split-full--dark .arrow { border-color: var(--paper); color: var(--paper); }

/* ══ RUST: scheidingslijnen eruit, structuur via ruimte, iconen en zachte vlakken ══ */
:root { --soft: #F8F5EF; }
/* koppen en secties: geen lijn onder de titel of boven een blok */
.section-head, .section-bar { border-bottom: 0; padding-bottom: 0; margin-bottom: clamp(28px, 3.5vw, 52px); }
.split-full, .cta-line, .teaser, .feature-row, .rooms-flip--3 { border-top: 0; border-bottom: 0; }
.mobile-menu li { border-bottom: 0; }
.footer__legal { border-top: 0; }
/* kenmerken met iconen: geen raster, wel ruimte */
.feats { border-top: 0; row-gap: clamp(32px, 4vw, 56px); column-gap: clamp(24px, 3vw, 48px); }
.feat, .feat:not(:nth-child(4n+1)), .feat:nth-child(even) { border: 0 !important; padding: 0 !important; }
/* lijstjes: geen streep tussen elke regel, iets meer lucht */
.spec-col li, .cgroup__list li, .cgroup--plain .cgroup__list, .arr-strip__list li, .reach__list > div, .rows li, .rows--2col,
.price-list li, .extras__list li, .arr__list li, .flip__facts, .flip__facts--list li, .pflip__arr li, .room__facts,
.price-card__plus, .faq, .faq details, .journal__item, .contact-card, .arr { border: 0 !important; }
.spec-col li { padding-block: 7px; }
.spec-col ul { margin-top: 6px; }
.cgroup--plain .cgroup__list { padding-top: 0; }
.arr-strip__list li { padding-block: 6px; }
.reach__list > div { padding-block: 9px; }
.flip__facts--list li { padding-block: 8px; }
/* opstellingen: actieve keuze herken je aan kleur en een zacht vlak, niet aan lijnen */
.setups__item, .setups__list li:last-child .setups__item,
.section--dark.setups-full .setups__item, .section--dark.setups-full .setups__list li:last-child .setups__item { border: 0; }
.setups__item { padding-inline: 14px; transition: color 700ms var(--ease), background 700ms var(--ease); }
.setups__item.is-active { background: var(--soft); }
/* prijskolommen: zacht vlak in plaats van een kader, regels zonder strepen */
.tcol { border: 0; background: var(--soft); }
.tcol__lines, .tcol__lines li { border: 0 !important; }
.tcol__lines { margin-top: 22px; display: grid; gap: 2px; }
.tcol__lines li { padding-block: 6px; }
/* Opstellingen: geen cijfers, namen als korte kop in hoofdletters, iconen zonder kader */
.setups__item { grid-template-columns: 1fr 56px; column-gap: 20px; }
.setups__name { grid-column: 1; font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; }
.setups__text { grid-column: 1; }
.setups__icon { grid-column: 2; grid-row: 1 / 3; width: 56px; align-self: center; }
.setups__item.is-active .setups__name { transform: none; }
/* Plattegrond: wazige donkere laag over de foto, tekening en tekst licht */
.setups__plan { background: rgba(35,21,12,.55); color: var(--grijs, #F6F3E4);
  -webkit-backdrop-filter: blur(14px) saturate(.9); backdrop-filter: blur(14px) saturate(.9); }
.setups__plan .plan { color: #F6F3E4; }
.setups__facts p { color: rgba(246,243,228,.82); }
.setups__facts ul, .setups__facts li { color: #F6F3E4; }
.setups__facts li::before { color: rgba(246,243,228,.5); }
.setups__facts .item__title { color: #F6F3E4; }
/* Bereikbaarheid: meer lucht, routeknop rechts naast de kop */
.reach__text { padding-block: clamp(64px, 7vw, 112px); gap: clamp(32px, 3.5vw, 48px); }
.reach .section-head { align-items: center; margin-bottom: 0; }
.reach .section-head .btn { min-height: 42px; }
.reach__list { display: grid; gap: clamp(14px, 1.4vw, 20px); }
.reach__list > div { padding-block: 0; grid-template-columns: 140px 1fr; gap: 24px; }
.reach__list dd { line-height: 1.65; max-width: 46ch; }
/* Lijstjes overzichtelijk: één lijn onder de kop, opsommingstekens, afwisseling in lettergrootte */
.spec-col__head { padding-bottom: 18px; border-bottom: 1px solid var(--line) !important; }
.spec-col ul { margin-top: 14px; }
.spec-col li { position: relative; padding: 6px 0 6px 20px; font-size: 1rem; }
.spec-col li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.cgroup--plain .cgroup__title { border-bottom: 1px solid var(--line); }
.cgroup__row span:first-child { font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.cgroup__row span:last-child { font-size: 1.05rem; }
.arr-strip__list li { position: relative; padding-left: 18px; }
.arr-strip__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
/* Bereikbaarheid op donker */
.reach { background: var(--dark); color: #F6F3E4; }
.reach .section-title, .reach__list dt { color: #F6F3E4; }
.reach__list dd { color: rgba(246,243,228,.75); }
.reach .btn--outline { color: #F6F3E4; border-color: rgba(246,243,228,.7); }
.reach .btn--outline:hover { background: #F6F3E4; color: var(--dark); }
.reach .map-consent { background: #2E1E14; color: #F6F3E4; }
.reach .map-consent p { color: rgba(246,243,228,.75); }
.reach .map-ill { color: #F6F3E4; }
/* Lunch op Faciliteiten: lager, het is vooral een doorverwijzing */
.split-full--low { min-height: clamp(260px, 24vw, 360px); }
.reach .btn--outline::before { background: #F6F3E4; }
.reach .btn--outline:hover { color: var(--dark); }
/* Ruimtekeuze: waar de ruimte ideaal voor is, klein in hoofdletters op de foto */
.flip__use { position: absolute; z-index: 1; left: clamp(24px, 3vw, 48px); bottom: calc(clamp(16px, 2vw, 32px) + clamp(2.8rem, 6vw, 5.2rem) + 6px);
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
/* Faciliteiten: meer adem tussen de blokken */
.section--compact + .setups-full { padding-top: clamp(72px, 8vw, 128px); }
.setups-full { padding-bottom: clamp(72px, 8vw, 128px); }
.split-full--low { margin-block: 0; }
.ruimtekeuze { padding-block: clamp(56px, 6vw, 96px); }
/* Arrangement: twee groepen met een kleine kop, één lijn onder de titel, grotere regels */
.arr-strip--full .section-title { padding-bottom: 18px; border-bottom: 1px solid rgba(35,21,12,.15); }
.arr-groups { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
.arr-group { display: grid; gap: 12px; align-content: start; }
.arr-group .arr-strip__list { grid-template-columns: 1fr; }
.arr-group .arr-strip__list li { font-size: 1.05rem; padding-block: 5px; }
.arr-strip__note { font-size: .85rem; }
@media (max-width: 560px) { .arr-groups { grid-template-columns: 1fr; } }

/* Ruimtekeuze op Faciliteiten: lage kaarten, direct boven de opstellingen */
.ruimtekeuze .flip { height: clamp(310px, 26vw, 360px); }
.ruimtekeuze .flip__name { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.ruimtekeuze .flip__use { bottom: calc(clamp(16px, 2vw, 32px) + clamp(2.2rem, 4vw, 3.4rem) + 4px); }
.ruimtekeuze .flip__back { padding: clamp(20px, 2.4vw, 36px); gap: 14px; }
.ruimtekeuze .flip__lead { font-size: .98rem; }
.ruimtekeuze + .setups-full { padding-top: 0; }
@media (max-width: 860px) { .ruimtekeuze .flip { height: auto; } .ruimtekeuze .flip__front { height: 52vw; min-height: 220px; } }
/* Tarieven: arrangement wit, catering als één donker blok */
.arr-strip--full { background: transparent; }
.split-full--rev.split-full--dark { background: var(--dark); }
.catering-dark { padding-top: 0; }
.catering-dark .cgroup--plain > .feat__icon { border-color: rgba(246,243,228,.7); color: #F6F3E4; }
.catering-dark .cgroup__title { color: #F6F3E4; border-bottom-color: rgba(246,243,228,.2) !important; }
.catering-dark .cgroup__row { color: #F6F3E4; }
.catering-dark .cgroup__list p { color: rgba(246,243,228,.7); }
.catering-dark .small-print { color: rgba(246,243,228,.6); }
/* Tussenzin onder de fotostrook op Loft en Studio */
/* Tarieven: geen wit gat in het donkere cateringblok, kleine tekst cursief */
.catering-dark { padding-top: clamp(48px, 6vw, 88px); }
.catering-dark .cgroups { margin-top: 0; }
.small-print, .arr-strip__note { font-style: italic; }

/* ══ Fotoband: foto over de volle breedte met een waas, tekst gecentreerd ══ */
.pband { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; text-align: center;
  min-height: clamp(420px, 52vw, 680px); background: var(--dark); color: #F6F3E4; }
.pband__media { position: absolute; inset: 0; z-index: -2; }
.pband__media img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px) saturate(.9); transform: scale(1.08); }
.pband::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(35,21,12,.48); }
.pband__text { display: grid; justify-items: center; gap: clamp(16px, 2vw, 24px); max-width: 640px; padding: clamp(64px, 8vw, 128px) var(--gutter); }
.pband__title { font-size: clamp(2.2rem, 4.4vw, 4rem); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.pband__lead { font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 300; line-height: 1.7; color: rgba(246,243,228,.86); max-width: 46ch; }
.pband__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; margin-top: 6px; }
.pband .arrow-link { color: #fff; }
.pband__link { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 300; color: #fff; padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; transition: background-size 600ms var(--ease); }
.pband__link:hover { background-size: 0 1px; background-position: 100% 100%; }
.pband--low { min-height: clamp(320px, 34vw, 460px); }
.pband--hero { min-height: clamp(520px, 78vh, 820px); }
.pband--hero .pband__title { font-size: clamp(3rem, 7vw, 6rem); }
.pband--hero + .reach { margin-top: 0; }

/* ══ Tarieven ══ */
.center { text-align: center; margin-inline: auto; }
.section-title.center { max-width: none; margin-bottom: clamp(40px, 5vw, 72px); }
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 5vw, 96px); max-width: 1100px; margin-inline: auto; }
.price { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; color: var(--ink); }
.price__hours { font-size: .95rem; font-weight: 300; color: var(--ink-3); }
.price__amount { margin-top: 18px; font-size: clamp(3rem, 5vw, 4.4rem); font-weight: 200; line-height: 1; letter-spacing: -.02em; transition: transform 700ms var(--ease); }
.price:hover .price__amount { transform: translateY(-4px); }
.price__label { font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.price__lines { margin-top: 22px; display: grid; gap: 8px; }
.price__lines li { display: flex; justify-content: center; gap: 10px; font-weight: 300; color: var(--ink-2); }
.price__lines strong { font-weight: 500; color: var(--ink); }
.prices-sec .small-print { margin-top: clamp(40px, 5vw, 64px); }
.duo { display: grid; grid-template-columns: 1fr 1fr; height: clamp(260px, 30vw, 440px); }
.duo img { width: 100%; height: 100%; object-fit: cover; }
.arr-center { display: grid; grid-template-columns: auto auto; justify-content: center; gap: clamp(48px, 8vw, 140px); text-align: center; }
.arr-center > div { display: grid; gap: 16px; align-content: start; }
.arr-center ul { display: grid; gap: 8px; font-size: 1.1rem; font-weight: 300; color: var(--ink-2); }
.catering-dark { padding-top: clamp(64px, 7vw, 112px); }
.catering-dark .small-print { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 860px) {
  .prices { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr 1fr; height: 48vw; }
  .arr-center { grid-template-columns: 1fr; }
}
/* tussenzin op Loft en Studio: minder hoog */
/* Minder tussenruimte tussen secties */
:root { --section: clamp(64px, 7vw, 112px); }

/* Contact: hoge, rustige opening met veel wit; contactgegevens als twee nette regels */
.page-hero--contact { min-height: clamp(560px, 82vh, 860px); }
.page-hero--contact .page-hero__text { padding-block: clamp(80px, 10vw, 160px); gap: clamp(20px, 2.4vw, 32px); }
.page-hero--contact .page-hero__title { font-size: clamp(3.2rem, 6.5vw, 5.8rem); }
.page-hero--contact .page-hero__actions { display: grid; gap: 22px; margin-top: clamp(16px, 2vw, 28px); }
.contact-link { display: grid; gap: 6px; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 300; color: var(--ink); width: fit-content; }
.contact-link .item__title { color: var(--ink-3); }
.contact-link:hover { color: var(--ink-2); }
/* Tarieven: prijzen beter leesbaar, kolommen met een zacht vlak */
.price { background: var(--soft); padding: clamp(32px, 3.5vw, 52px) clamp(20px, 2.5vw, 36px); }
.price .item__title { font-size: .9rem; color: var(--ink); }
.price__hours { color: var(--ink-2); font-size: 1rem; }
.price__amount { font-weight: 300; color: var(--ink); font-size: clamp(3rem, 4.6vw, 4.2rem); }
.price__label { color: var(--ink-2); }
.price__lines li { color: var(--ink-2); font-size: 1rem; }
.prices { gap: clamp(16px, 2vw, 28px); }
.price:hover { background: #F1EBE1; }
.price { transition: background 600ms var(--ease); }
/* Tarieven in dezelfde stijl als de faciliteitenkolommen */
.tarief { color: var(--ink); }
.tarief .item__title { font-size: .85rem; }
.tarief__hours { margin-left: 6px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--ink-2); }
.tarief__price { font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; margin-top: 10px; transition: transform 700ms var(--ease); }
.tarief:hover .tarief__price { transform: translateX(6px); }
.tarief__label { font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tarief li { display: flex; justify-content: space-between; gap: 12px; }
.tarief li strong { font-weight: 500; color: var(--ink); white-space: nowrap; }
.tarief-cols + .small-print { margin-top: clamp(28px, 3vw, 44px); }
.catering-lead { max-width: 56ch; margin-bottom: clamp(36px, 4vw, 56px); color: rgba(246,243,228,.8); }
.catering-dark .section-title { color: #F6F3E4; }
.catering-dark .section-head { margin-bottom: 16px; }
.catering-dark { padding-block: var(--section); }
/* reach-foto op mobiel zichtbaar */
@media (max-width: 860px) { .reach__media { min-height: 60vw !important; } }
/* Titels niet onnodig laten afbreken */
.split-full .section-title { max-width: none; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.pband__title { font-size: clamp(2rem, 3.2vw, 3rem); }
.pband__text { max-width: 760px; }
.page-hero__title { text-wrap: balance; }

/* Tussenzin onder de fotostrook (Loft, Studio) */
.tussenzin { padding-block: clamp(36px, 4vw, 64px); text-align: center; }
.run + .tussenzin { padding-top: clamp(16px, 2vw, 32px); }
.tussenzin__text { max-width: 44ch; margin-inline: auto; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 300; line-height: 1.35; letter-spacing: -.01em; }
/* Tarieven: alleen het plusje, geen bolletje */
.tarief li { padding-left: 0; }
.tarief li::before { content: none; }
/* Tussenzin: rechts uitgelijnd, met meer ruimte eromheen */
.tussenzin { text-align: right; padding-block: clamp(64px, 7vw, 112px); }
.run + .tussenzin { padding-top: clamp(56px, 6vw, 96px); }
.tussenzin__text { margin-left: auto; margin-right: 0; max-width: 32ch; }
/* Arrangement: de fruitschaal staat onderin de foto, dus de uitsnede naar beneden */
.arr-strip__media img { object-position: 50% 88%; }
/* Contact: kaart altijd zichtbaar, in de warme tinten van de site */
.map-live { position: absolute; inset: 0; background: var(--paper-soft); }
.map-live iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(.18) contrast(.95); }
.page-hero__media .map-live { position: absolute; inset: 0; }
.contact-link { display: grid; gap: 6px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 300; color: var(--ink); width: fit-content; }
.page-hero__actions:has(.contact-link) { display: grid; gap: 18px; }
@media (max-width: 860px) { .page-hero__media .map-live { position: absolute; } }
/* Tarieven: prijs in een cirkel van 12 stukjes, zoveel gevuld als uren */
.tarief { justify-items: start; }
.tarief__head { display: grid; gap: 4px; }
.tarief__hours { font-size: .95rem; font-weight: 300; color: var(--ink-2); }
.uren { position: relative; width: clamp(180px, 16vw, 220px); aspect-ratio: 1; display: grid; place-content: center; text-align: center; margin: 22px 0 18px; }
.uren svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.uur { fill: none; stroke: var(--line); stroke-width: 3.2; stroke-linecap: round; transition: stroke 500ms var(--ease); }
.uur.is-on { stroke: var(--ink); }
.js .tarief.reveal .uur.is-on { stroke: var(--line); }
.js .tarief.reveal.is-visible .uur.is-on { stroke: var(--ink); transition-delay: calc(300ms + var(--i) * 110ms); }
.uren__prijs { font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.uren__label { margin-top: 6px; font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.js .tarief.reveal .uren__prijs, .js .tarief.reveal .uren__label { opacity: 0; transition: opacity 900ms var(--ease) 1.2s; }
.js .tarief.reveal.is-visible .uren__prijs, .js .tarief.reveal.is-visible .uren__label { opacity: 1; }
.tarief:hover .uur.is-on { stroke: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .js .tarief.reveal .uur.is-on { stroke: var(--ink); } .js .tarief.reveal .uren__prijs, .js .tarief.reveal .uren__label { opacity: 1; } }
/* Afsluiter (Een voorstel op maat? e.d.): ruim wit eromheen, op elke pagina gelijk */
.cta-line { padding-block: clamp(96px, 10vw, 168px); }
.section + .cta-line, .ruimtekeuze + .cta-line { padding-top: clamp(48px, 5vw, 88px); }
.reach + .cta-line { padding-top: clamp(96px, 10vw, 168px); }
/* Studio: evenveel wit onder de tussenzin als op Loft (daar volgt een sectie met eigen bovenruimte) */
.tussenzin:has(+ .split-full) { padding-bottom: clamp(120px, 13vw, 200px); }
/* Faciliteiten: ruimtekaarten sluiten direct aan op Bereikbaarheid */
.ruimtekeuze:has(+ .reach) { padding-bottom: 0; }
/* Tarieven: doorlopende urenboog, kolommen gecentreerd als één geheel */
.tarief-cols { max-width: 1080px; margin-inline: auto; }
.tarief { justify-items: center; text-align: center; }
.tarief__head { justify-items: center; }
.tarief ul { width: 100%; max-width: 300px; }
.tarief li { justify-content: center; gap: 10px; }
.uren__spoor { fill: none; stroke: rgba(35,21,12,.14); stroke-width: 2; }
.uren__boog { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--deel) * 100); transform: rotate(-90deg); transform-origin: 60px 60px; }
.js .tarief.reveal .uren__boog { stroke-dashoffset: 100; transition: stroke-dashoffset 1600ms var(--ease) 300ms; }
.js .tarief.reveal.is-visible .uren__boog { stroke-dashoffset: calc(100 - var(--deel) * 100); }
.js .tarief.reveal .uren__prijs { transition-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) { .js .tarief.reveal .uren__boog { stroke-dashoffset: calc(100 - var(--deel) * 100); transition: none; } }
/* Tarieven: alles in de cirkel als één geheel */
.uren { width: clamp(240px, 21vw, 300px); margin: 26px auto 0; }
.uren__in { position: relative; display: grid; justify-items: center; gap: 14px; padding: 0 18%; }
.uren__prijs { font-size: clamp(2.2rem, 3vw, 2.8rem); }
.uren__regels { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(35,21,12,.14); }
.uren__regels li { display: flex; justify-content: center; gap: 8px; font-size: .86rem; font-weight: 300; color: var(--ink-2); white-space: nowrap; }
.uren__regels strong { font-weight: 500; color: var(--ink); }
.js .tarief.reveal .uren__regels { opacity: 0; transition: opacity 900ms var(--ease) 1.3s; }
.js .tarief.reveal.is-visible .uren__regels { opacity: 1; }
.tarief-cols { row-gap: 48px; }
/* De details: rustiger onderschriften */
.dtl { gap: 18px; }
.dtl figcaption { gap: 8px; max-width: 34ch; }
.dtl figcaption .item__title { font-size: .78rem; letter-spacing: .09em; }
.dtl .item__note { font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
/* Tarieven v5: naam, prijs en uren in de cirkel; arrangement eronder; geen grijze ondergrond */
.uren__spoor { display: none; }
.uren { margin: 0 auto; }
.uren__in { gap: 10px; padding: 0 16%; }
.uren__in .item__title { font-size: .8rem; }
.uren__in .tarief__hours { font-size: .9rem; }
.tarief { gap: 28px; }
.uren__regels { border-top: 0; padding-top: 0; }
.uren__regels li { font-size: .95rem; }
.js .tarief.reveal .uren__in .item__title, .js .tarief.reveal .uren__in .tarief__hours { opacity: 0; transition: opacity 900ms var(--ease) 1.1s; }
.js .tarief.reveal.is-visible .uren__in .item__title, .js .tarief.reveal.is-visible .uren__in .tarief__hours { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .tarief.reveal .uren__in * { opacity: 1 !important; } }
.uren__in { padding: 0 10%; } .uren__in .item__title, .uren__in .tarief__hours { white-space: nowrap; }
/* Openingsteksten op dezelfde lijn als de rest van de pagina */
.page-hero__text { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
/* Tarieven: zaalhuur als één gecentreerd geheel */
.tarief-kop { text-align: center; max-width: none; margin-bottom: clamp(36px, 4vw, 56px); }
.tarief-cols { gap: clamp(32px, 4vw, 72px); }
.tarief { gap: 22px; padding: 0; }
.uren__regels { gap: 4px; }
.tarief-print { text-align: center; margin-top: clamp(36px, 4vw, 56px) !important; }
/* Arrangement: vierkante foto links binnen de pagina, tekst rechts */
.arrangement { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.arrangement__media { margin: 0; }
.arrangement__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 80%; }
.arrangement__text { display: grid; gap: clamp(24px, 3vw, 40px); }
.arrangement .section-title { padding-bottom: 18px; border-bottom: 1px solid rgba(35,21,12,.15); }
.arrangement .arr-groups { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
.arrangement .arr-strip__list li { font-size: 1.02rem; padding-block: 5px; }
@media (max-width: 860px) { .arrangement { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .arrangement .arr-groups { grid-template-columns: 1fr; } }
.page-hero--plain .page-hero__text { padding-left: var(--gutter); }

/* ══ TARIEVEN (basis): zelfde bouwstenen als de rest van de site ══ */
/* zaalhuur: drie gelijke kolommen, inhoud gecentreerd per kolom */
.tarief-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); max-width: none; margin: 0; }
.tarief { display: grid; justify-items: center; gap: 20px; padding: clamp(28px, 3vw, 44px) 16px; text-align: center; color: var(--ink);
  background: transparent; transition: background 600ms var(--ease); }
.tarief:hover { background: var(--soft); }
.tarief:hover .uren__boog { stroke: var(--ink-2); }
.tarief .uren { width: clamp(220px, 19vw, 270px); margin: 0; }
.tarief-cols + .small-print { margin-top: clamp(24px, 3vw, 40px); text-align: left; }
@media (max-width: 860px) { .tarief-cols { grid-template-columns: 1fr; } }
/* arrangement: foto rand tot rand links, tekst rechts (zoals de Bekijk ook-blokken) */
.arrangement-split .split-full__media img { object-position: 50% 80%; }
.arrangement-split .section-title { padding-bottom: 16px; border-bottom: 1px solid rgba(35,21,12,.15); width: 100%; }
.arrangement-split .split-full__text { gap: clamp(24px, 3vw, 36px); }
.arrangement-split .arr-groups { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); width: 100%; }
.arrangement-split .arr-strip__list li { font-size: 1rem; padding-block: 4px; }
@media (max-width: 560px) { .arrangement-split .arr-groups { grid-template-columns: 1fr; } }
/* Tarieven: geen vlak achter de cirkel; hover alleen op de lijn; prijs op één regel */
.tarief, .tarief:hover { background: transparent !important; }
.tarief::before, .tarief::after { content: none !important; }
.uren__prijs { white-space: nowrap; }
.uren__boog { transition: stroke 500ms var(--ease), stroke-width 500ms var(--ease), stroke-dashoffset 1600ms var(--ease) 300ms; }
.tarief:hover .uren__boog { stroke: var(--ink); stroke-width: 4; }
.tarief:hover .uren__prijs { transform: scale(1.04); }
.uren__prijs { transition: transform 600ms var(--ease), opacity 900ms var(--ease) 1.1s; }
/* Catering: donker vlak binnen de paginabreedte, compacter */
.catering-wrap { padding-block: clamp(48px, 5vw, 80px); }
.catering-box { background: var(--dark); color: #F6F3E4; padding: clamp(36px, 4.5vw, 72px) clamp(28px, 4.5vw, 72px); }
.catering-box .section-title { color: #F6F3E4; }
.catering-box .section-head { margin-bottom: 12px; }
.catering-box .catering-lead { color: rgba(246,243,228,.8); margin-bottom: clamp(28px, 3vw, 44px); }
.catering-box .cgroups { gap: clamp(24px, 3vw, 48px); margin-top: 0; }
.catering-box .cgroup--plain > .feat__icon { border-color: rgba(246,243,228,.7); color: #F6F3E4; padding: 14px; width: 24px; height: 24px; }
.catering-box .cgroup__title { color: #F6F3E4; border-bottom-color: rgba(246,243,228,.2) !important; font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
.catering-box .cgroup__row { color: #F6F3E4; }
.catering-box .cgroup__list p { color: rgba(246,243,228,.7); }
.catering-box .cgroup__list li { padding-block: 8px; }
.catering-box .small-print { color: rgba(246,243,228,.6); margin-top: clamp(24px, 3vw, 40px); }
.uren__in { width: 100%; padding: 0; justify-items: center; } .uren__in > * { margin: 0 !important; } .uren__in .tarief__hours { margin-left: 0 !important; }
/* Contact: wit en rustig; kaart onderaan in Bereikbaarheid */
.page-hero--contact-wit .page-hero__text { padding-top: clamp(96px, 11vw, 176px); padding-bottom: clamp(56px, 6vw, 96px); gap: clamp(18px, 2vw, 28px); }
.page-hero--contact-wit .page-hero__title { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.page-hero--contact-wit .page-hero__lead { font-size: 1.05rem; }
.page-hero--contact-wit .contact-link { font-size: 1.05rem; }
.page-hero--contact-wit .page-hero__actions { display: flex; gap: 20px 64px; margin-top: 8px; }
.reach--licht { background: transparent; color: var(--ink); padding-bottom: clamp(48px, 6vw, 96px); }
.reach--licht .section-title, .reach--licht .reach__list dt { color: var(--ink); }
.reach--licht .reach__list dd { color: var(--ink-2); }
.reach--licht .btn--outline { color: var(--ink); border-color: var(--ink); }
.reach--licht .btn--outline::before { background: var(--ink); }
.reach--licht .btn--outline:hover { color: var(--paper); }
.reach__media--kaart { position: relative; min-height: 420px; }
.reach__media--kaart .map-live { position: absolute; inset: 0; }
@media (max-width: 860px) { .reach__media--kaart { min-height: 70vw; } }
.reach--licht + .cta-line { padding-top: clamp(48px, 5vw, 88px); }
@media (max-width: 860px) { .reach__media--kaart { min-height: 80vw !important; } }
/* Catering (Tarieven): verhaal links, opties rechts in een smallere kolom */
@media (min-width: 861px) {
  .catering-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: clamp(48px, 7vw, 128px);
    grid-template-areas: "kop opties" "lead opties" "print opties"; align-items: start; }
  .catering-box .section-head { grid-area: kop; margin: 0 0 16px; }
  .catering-box .catering-lead { grid-area: lead; margin: 0; max-width: 40ch; }
  .catering-box .small-print { grid-area: print; margin-top: 28px; align-self: start; }
  .catering-box .cgroups { grid-area: opties; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 40px); }
  .catering-box .cgroup--plain { grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
  .catering-box .cgroup--plain > .feat__icon { justify-self: start; padding: 10px; width: 20px; height: 20px; }
  .catering-box .cgroup--plain .cgroup__title { text-align: left; padding-bottom: 10px; }
  .catering-box .cgroup--plain .cgroup__list { grid-column: 1 / -1; }
}
@media (min-width: 861px) { .catering-box { grid-template-rows: auto auto 1fr; } }
.arrangement-split { min-height: clamp(300px, 26vw, 400px); } .arrangement-split .split-full__text { padding-block: clamp(36px, 4vw, 56px); }
/* ══ Tarieven: prijzen als rustige typografische kolommen (geen cirkels) ══ */
.tarief-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4.5vw, 80px); }
.tarief2 { position: relative; display: grid; align-content: start; justify-items: start; gap: 6px; padding-top: 28px; color: var(--ink); }
.tarief2__lijn { position: absolute; top: 0; left: 0; height: 1px; width: 100%; background: var(--ink); transform-origin: left; transition: transform 1400ms var(--ease); }
.js .tarief2.reveal .tarief2__lijn { transform: scaleX(0); }
.js .tarief2.reveal.is-visible .tarief2__lijn { transform: scaleX(1); }
.tarief2 .item__title { font-size: .82rem; }
.tarief2__uren { font-size: .95rem; font-weight: 300; color: var(--ink-2); }
.tarief2__prijs { margin-top: 22px; font-size: clamp(2.8rem, 4.2vw, 3.8rem); font-weight: 200; line-height: 1; letter-spacing: -.025em; white-space: nowrap; transition: transform 700ms var(--ease); }
.tarief2__label { font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.tarief2__regels { margin-top: 22px; display: grid; gap: 6px; width: 100%; }
.tarief2__regels li { display: flex; justify-content: space-between; gap: 16px; font-size: .95rem; font-weight: 300; color: var(--ink-2); }
.tarief2__regels strong { font-weight: 500; color: var(--ink); white-space: nowrap; }
.tarief2:hover .tarief2__prijs { transform: translateX(6px); }
.tarief2:hover .tarief2__lijn { background: var(--ink); height: 2px; }
@media (max-width: 860px) { .tarief-cols { grid-template-columns: 1fr; gap: 48px; } }
@media (prefers-reduced-motion: reduce) { .js .tarief2.reveal .tarief2__lijn { transform: none; } }
/* Catering: verhaal 1/3, opties 2/3 (drie naast elkaar) */
@media (min-width: 1025px) {
  .catering-box { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(40px, 5vw, 88px); }
  .catering-box .cgroups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
  .catering-box .catering-lead { max-width: 32ch; }
  .catering-box .cgroup__row { flex-wrap: wrap; gap: 2px 10px; }
  .catering-box .cgroup__row span:first-child { font-size: .76rem; }
  .catering-box .cgroup__list p { font-size: .88rem; line-height: 1.55; }
}
@media (min-width: 861px) and (max-width: 1024px) {
  .catering-box { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
/* Home: tussenzin onder de ruimtes met extra lucht */
#ruimtes + .tussenzin { padding-block: clamp(120px, 12vw, 200px); }
/* Catering: meer lucht tussen kop, gerechten en randen */
.catering-box { padding-block: clamp(56px, 6.5vw, 112px) !important; }
.catering-box .cgroup--plain { row-gap: 0; }
.catering-box .cgroup--plain .cgroup__title { padding-bottom: 18px; margin-bottom: 22px; }
.catering-box .cgroup__list { display: grid; gap: clamp(22px, 2.4vw, 34px); }
.catering-box .cgroup__list li { padding-block: 0 !important; display: grid; gap: 8px; }
.catering-box .section-head { margin-bottom: 22px !important; }
.catering-box .small-print { margin-top: 36px !important; }
/* Bedankt: hoog, rustig wit blok met een vinkje dat zich tekent; foto zoomt zacht bij hover */
.page-hero--bedankt { min-height: clamp(620px, 86vh, 920px); }
.page-hero--bedankt .page-hero__text { align-content: center; padding-block: clamp(96px, 11vw, 176px); gap: clamp(20px, 2.4vw, 32px); }
.bedankt-vink { width: 64px; height: 64px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bedankt-vink circle, .bedankt-vink path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: vink-teken 1400ms var(--ease) forwards; }
.bedankt-vink path { animation-delay: 900ms; animation-duration: 800ms; }
@keyframes vink-teken { to { stroke-dashoffset: 0; } }
.page-hero--bedankt .page-hero__media img { transition: transform 2400ms var(--ease); }
.page-hero--bedankt:hover .page-hero__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .bedankt-vink circle, .bedankt-vink path { animation: none; stroke-dashoffset: 0; } }
/* Bedankt: een grote check, met dikke marker over het scherm getekend; daarna blijft hij staan */
.page-hero--bedankt { position: relative; }
.bedankt-vink { display: none; }
.mega-vink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.mega-vink path { fill: none; stroke: var(--ink); stroke-width: clamp(18px, 2.4vw, 34px); stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .92;
  animation: marker 1300ms cubic-bezier(.65,.05,.36,1) 400ms forwards; }
@keyframes marker { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .mega-vink path { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 860px) { .mega-vink { height: 60%; top: 0; } }
/* Bedankt v2: handgeschreven check, rechts, groter en schuin */
.mega-vink { inset: auto; top: 50%; right: clamp(2%, 5vw, 8%); left: auto; width: min(58vw, 860px); height: auto; aspect-ratio: 1; transform: translateY(-50%) rotate(-9deg); }
.mega-vink path { stroke-width: clamp(22px, 3vw, 42px); vector-effect: none; opacity: 1; }
.mega-vink .mv1 { stroke-width: 26px; animation-duration: 1250ms; }
.mega-vink .mv2 { stroke-width: 12px; opacity: .55; animation-delay: 520ms; animation-duration: 1250ms; }
@media (max-width: 860px) { .mega-vink { top: 30%; width: 92vw; right: -6vw; height: auto; } }
.page-hero--bedankt { overflow: hidden; }
/* Bedankt v3: echte stift, vijf keer zo dik; twee halen die overlappen */
.mega-vink path { stroke: #23150C; stroke-linecap: round; stroke-linejoin: round; fill: none; vector-effect: none; stroke-dasharray: 100; stroke-dashoffset: 100; }
.mega-vink .mv1 { stroke-width: 130px; opacity: .86; animation: marker 520ms cubic-bezier(.5,0,.5,1) 450ms forwards; }
.mega-vink .mv2 { stroke-width: 130px; opacity: .86; animation: marker 900ms cubic-bezier(.4,0,.25,1) 1000ms forwards; }
@media (prefers-reduced-motion: reduce) { .mega-vink .mv1, .mega-vink .mv2 { animation: none; stroke-dashoffset: 0; } }
/* Bedankt v4: check over het hele blok */
.mega-vink { top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: rotate(-3deg); }
.mega-vink .mv1, .mega-vink .mv2 { stroke-width: 150px; }
@media (max-width: 860px) { .mega-vink { top: 10%; right: 0; width: 100%; height: 45%; transform: rotate(-3deg); } }
.mega-vink { transform: translateX(12%) rotate(-3deg); } @media (max-width: 860px) { .mega-vink { transform: translateX(8%) rotate(-3deg); } }
/* Bedankt: minimalistisch, één dunne lijn die zich onder de kop tekent */
.mega-vink { display: none !important; }
.bedankt-lijn { display: block; width: 72px; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(0); animation: lijn-teken 1200ms var(--ease) 500ms forwards; }
@keyframes lijn-teken { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .bedankt-lijn { animation: none; transform: none; } }
/* Bedankt: geen zoom bij hover; bij openen schuift de foto open en komt de tekst rustig omhoog */
.page-hero--bedankt:hover .page-hero__media img, .page-hero--bedankt .page-hero__media img { transform: none !important; transition: none !important; }
.page-hero--bedankt .page-hero__media { animation: foto-open 1600ms cubic-bezier(.7,0,.2,1) 200ms both; }
@keyframes foto-open { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.page-hero--bedankt .page-hero__text > * { animation: tekst-op 1000ms var(--ease) both; }
.page-hero--bedankt .page-hero__title { animation-delay: 700ms; }
.page-hero--bedankt .bedankt-lijn { animation: lijn-teken 1200ms var(--ease) 1100ms both; }
.page-hero--bedankt .page-hero__lead { animation-delay: 1000ms; }
.page-hero--bedankt .page-hero__actions { animation-delay: 1250ms; }
@keyframes tekst-op { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page-hero--bedankt .page-hero__media, .page-hero--bedankt .page-hero__text > * { animation: none; } }

/* ══ Studio: drie breakoutrooms met fotoslides ══ */
.bo__tabs { display: flex; gap: clamp(20px, 3vw, 44px); margin-bottom: clamp(24px, 3vw, 40px); }
.bo__tab { position: relative; padding: 0 0 10px; font-size: .82rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); transition: color 500ms var(--ease); }
.bo__tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease); }
.bo__tab:hover, .bo__tab.is-active { color: var(--ink); }
.bo__tab.is-active::after { transform: scaleX(1); }
.bo__panel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.bo__panel[hidden] { display: none; }
.bo__slides { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--soft); }
.bo__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; transform: scale(1.05); transition: opacity 1600ms var(--ease-in-out), transform 9s linear; }
.bo__slide.is-vorige { opacity: 1; z-index: 1; transform: scale(1); transition: transform 9s linear; }
.bo__slide.is-active { opacity: 1; z-index: 2; transform: scale(1); }
.bo__info { display: grid; gap: 16px; align-content: end; padding-bottom: 4px; }
.bo__tekst { font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 300; line-height: 1.45; max-width: 26ch; }
.bo__nav { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.bo__teller { font-size: .9rem; font-weight: 300; color: var(--ink-2); min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .bo__panel { grid-template-columns: 1fr; } .bo__tabs { gap: 18px; } }
/* Kenmerken-iconen: gelijk verdeeld over de volle breedte */
.feats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: 100%; }
.feat__text { max-width: 30ch; }
@media (max-width: 860px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* Breakouts: drie sliders naast elkaar, alle drie tegelijk zichtbaar */
.bo--drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); }
.bo--drie .bo__panel { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.bo--drie .bo__slides { aspect-ratio: 4 / 5; }
.bo--drie .bo__info { gap: 10px; }
.bo__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bo--drie .bo__nav { margin: 0; gap: 10px; }
.bo__btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: .85rem; color: var(--ink); transition: background 500ms var(--ease), color 500ms var(--ease); }
.bo__btn:hover { background: var(--ink); color: var(--paper); }
.bo--drie .bo__teller { font-size: .82rem; min-width: 3.4ch; }
.bo--drie .bo__tekst { font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: none; }
@media (max-width: 860px) { .bo--drie { grid-template-columns: 1fr; gap: 48px; } .bo--drie .bo__slides { aspect-ratio: 4 / 3; } }
/* Loft en Studio: wisselende openingsfoto, zoals op Home */
.hero-slides { position: absolute; inset: 0; }
.hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1800ms var(--ease); }
.hero-slides img.is-active { opacity: 1; }
/* Kenmerken-iconen: per kolom gecentreerd */
.feat { justify-items: center; text-align: center; }
.feat__icon { margin-inline: auto; }
.feat__text { margin-inline: auto; }
/* Contact-kaart: licht vlak (geen donker gat tijdens laden), geen grauwe filter; tekst direct zichtbaar */
.reach__media--kaart { background: #EDE7DC; align-self: stretch; }
.reach__media--kaart .map-live { background: #EDE7DC; }
.reach__media--kaart .map-live iframe { filter: saturate(.75) sepia(.12); width: 100%; height: 100%; display: block; }
.reach:has(.reach__media--kaart) .reveal, .reach:has(.reach__media--kaart) .reveal * { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* ══ Offerte en tevredenheid: formulier in een gecentreerde kolom ══ */
.form-kolom { max-width: 760px; margin-inline: auto; display: grid; gap: clamp(28px, 3vw, 44px); }
.form-intro { display: grid; gap: 22px; }
.form-intro > p { font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-weight: 300; line-height: 1.55; }
.form-punten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; }
.form-punten li { display: grid; gap: 4px; font-weight: 300; line-height: 1.55; color: var(--ink-2); }
.form-punten .item__title { color: var(--ink); }
.form-kolom .form-wrap { width: 100%; }
.form-kolom .small-print { text-align: center; }
@media (max-width: 560px) { .form-punten { grid-template-columns: 1fr; } }

/* ══ Powerwalk ══ */
.powerwalk { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); }
.powerwalk__stap { display: grid; gap: 12px; align-content: start; }
.powerwalk__stap .item__title { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 50%; letter-spacing: 0; }
.powerwalk__stap p { font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 30ch; }
@media (max-width: 860px) { .powerwalk { grid-template-columns: 1fr; } }

/* ══ Inspiratie: kaarten en artikel ══ */
.ins-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px); }
.ins-kaart { display: grid; gap: 12px; align-content: start; color: var(--ink); }
.ins-kaart__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 6px; background: var(--soft); }
.ins-kaart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease); }
.ins-kaart:hover .ins-kaart__foto img { transform: scale(1.04); }
.ins-kaart__titel { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 300; line-height: 1.2; letter-spacing: -.01em; }
.ins-kaart__tekst { font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.ins-kaart .arrow-link { margin-top: 6px; }
@media (max-width: 860px) { .ins-kaarten { grid-template-columns: 1fr; } }
.prose--artikel { margin-inline: auto; max-width: 66ch; }
.prose--artikel > p:first-child { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.6; color: var(--ink); }
.prose--artikel h2 { margin-top: 2.2em; }
.prose--artikel + .page-hero__actions { justify-content: center; }
.form-kolom, .form-kolom .cognito { max-width: 100%; overflow-x: hidden; } .form-kolom { max-width: min(760px, 100%); }
/* Catering (Tarieven): donker gebleven; prijzen netjes rechts uitgelijnd */
.catering-box .cgroup__row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline; }
.catering-box .cgroup__row span:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.catering-box .cgroup__list p { padding-right: 12px; }
.catering-box .cgroup__row { align-items: start !important; } .catering-box .cgroup__row span { line-height: 1.35; } .catering-box .cgroup__row span:first-child { padding-top: .18em; }

/* Contact: landkaart in gebroken wit */
.reach__media--kaart, .reach__media--kaart .map-live { background: #F6F3E4; }
.reach__media--kaart .map-live iframe { filter: grayscale(1) sepia(.22) brightness(1.1) contrast(.86) !important; }
/* Offerte: toelichting onder de kop */
.offerte-uitleg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(16px, 2vw, 28px); width: 100%; max-width: 980px; }
.offerte-uitleg p { display: grid; gap: 6px; font-size: .98rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.offerte-uitleg .item__title { color: var(--ink); }
.page-hero--plain .page-hero__actions:has(.offerte-uitleg) { display: block; }
.page-hero--plain .page-hero__lead { max-width: 62ch; }
@media (max-width: 860px) { .offerte-uitleg { grid-template-columns: 1fr; } }
.catering-box .catering-lead { max-width: 38ch; font-size: 1.02rem; line-height: 1.65; }
/* Catering: titels en gerechten in de drie kolommen op dezelfde hoogte (gedeelde rijen) */
@media (min-width: 1025px) {
  .catering-box .cgroups { grid-template-rows: auto auto auto; row-gap: 0; }
  .catering-box .cgroup--plain { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: start; }
  .catering-box .cgroup--plain > .feat__icon { grid-row: 1; grid-column: 1; align-self: center; }
  .catering-box .cgroup--plain .cgroup__title { grid-row: 1; grid-column: 2; align-self: center; margin-bottom: 24px; padding-bottom: 16px; }
  .catering-box .cgroup--plain .cgroup__list { display: contents; }
  .catering-box .cgroup--plain .cgroup__list li { grid-column: 1 / -1; padding: 0 0 clamp(22px, 2.4vw, 32px) !important; }
  .catering-box .cgroup--plain .cgroup__list li:nth-child(1) { grid-row: 2; }
  .catering-box .cgroup--plain .cgroup__list li:nth-child(2) { grid-row: 3; }
  .catering-box .cgroup--plain .cgroup__title { white-space: nowrap; }
}

/* Breakouts: van rand tot rand, zonder tussenruimte; naam op de foto, details + pijl bij hover */
.bo--breed { gap: 0; }
.bo--breed .bo__panel { gap: 0; }
.bo--breed .bo__slides { aspect-ratio: 4 / 5; max-height: 88vh; width: 100%; }
.bo__frame { position: relative; overflow: hidden; }
.bo__laag { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(22px, 2.6vw, 40px); color: var(--grijs); }
.bo__laag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(35, 21, 12, .82) 0%, rgba(35, 21, 12, .4) 45%, rgba(35, 21, 12, 0) 78%); }
.bo__laag .bo__naam { color: var(--grijs); }
.bo__meer { display: grid; grid-template-rows: 1fr; }
.bo__meer > div { overflow: hidden; min-height: 0; }
.bo--drie .bo__laag .bo__tekst { color: var(--grijs); font-size: 1.02rem; line-height: 1.6; max-width: 30ch; padding-top: 14px; }
.bo__onder { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; }
.bo--drie .bo__laag .bo__teller { color: var(--grijs); text-align: left; }
.bo__laag .bo__btn { width: 46px; height: 46px; font-size: 1rem; color: var(--grijs); border-color: var(--grijs); }
.bo__laag .bo__btn:hover { background: var(--grijs); color: var(--ink); }
@media (hover: hover) {
  .bo__laag::before { opacity: .45; transition: opacity 800ms var(--ease); }
  .bo__meer { grid-template-rows: 0fr; transition: grid-template-rows 800ms var(--ease); }
  .bo__meer > div { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 900ms var(--ease); }
  .bo__panel:hover .bo__laag::before, .bo__frame:focus-within .bo__laag::before { opacity: 1; }
  .bo__panel:hover .bo__meer, .bo__frame:focus-within .bo__meer { grid-template-rows: 1fr; }
  .bo__panel:hover .bo__meer > div, .bo__frame:focus-within .bo__meer > div { opacity: 1; transform: none; transition-delay: 120ms; }
}
@media (max-width: 860px) { .bo--breed { gap: 0; } .bo--breed .bo__slides { aspect-ratio: 4 / 5; max-height: none; } }
@media (prefers-reduced-motion: reduce) { .bo__slide { transform: none !important; transition: opacity 600ms linear; } }

/* Catering: verhaal in alinea's; titel (Lunch, Buffet...) precies op de hoogte van het icoon */
.catering-box .catering-lead p + p { margin-top: 1.1em; }
@media (min-width: 1025px) {
  .catering-box .cgroup--plain .cgroup__title { margin-bottom: 0; padding-block: 16px; line-height: 1.2; }
  .catering-box .cgroup--plain > .feat__icon { margin-bottom: 0; }
  .catering-box .cgroup--plain .cgroup__list li:nth-child(1) { padding-top: 26px !important; }
}

/* Zo werkt het: Aanvragen is een link naar de offerte; bij hover komt het hele blok iets omhoog */
.step__link { display: grid; gap: 12px; align-content: start; color: inherit; text-decoration: none; transition: transform 700ms var(--ease); }
.step__link:hover, .step__link:focus-visible { transform: translateY(-8px); }
.step--link:hover .step__num { background: var(--paper); color: var(--dark); }
.step__link .step__title { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; justify-self: start; padding-bottom: 3px; transition: background-size 700ms var(--ease); }
.step__link:hover .step__title, .step__link:focus-visible .step__title { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { .step__link:hover { transform: none; } }

/* Contact: Google Maps, eerst een rustige vraag in gebroken wit, daarna de kaart in eigen kleuren */
.map-google { display: grid; place-items: center; }
.map-google__vraag { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 24px; }
.map-google__vraag p { max-width: 30ch; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.reach__media--kaart .map-google iframe { filter: saturate(.55) sepia(.12) !important; }

.reach .map-google__vraag .btn--outline { color: var(--ink) !important; border-color: var(--ink) !important; background: transparent !important; }
.reach .map-google__vraag .btn--outline:hover { color: var(--paper) !important; background: var(--ink) !important; }
.reach .map-google__vraag .btn--outline::before { background: var(--ink) !important; }

/* Home: openingstekst in alinea's */
.intro__lead p + p { margin-top: .8em; }
/* Zo werkt het: icoon, kop en tekst gecentreerd onder elkaar */
#zo-werkt-het .step, #zo-werkt-het .step__link { justify-items: center; text-align: center; }
#zo-werkt-het .step__text { margin-inline: auto; }
#zo-werkt-het .step__link .step__title { justify-self: center; }
/* Ruimtes staan nu direct boven het donkere Zo werkt het */
#ruimtes.section--flush-bottom { padding-bottom: 0; }
/* Kies je ruimte: het kleine woordje op de achterkant onzichtbaar, de tekst blijft op zijn plek */
.flip__kicker { visibility: hidden; }

/* Home: vier kernpunten onder de openingsfoto, gecentreerd */
.kenmerken .feats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.kenmerken .feat { justify-items: center; text-align: center; padding-right: 0; }
.kenmerken .feat__text { margin-inline: auto; max-width: 26ch; }
@media (max-width: 860px) { .kenmerken .feats { grid-template-columns: 1fr 1fr !important; } }
/* tussenzin staat nu direct na Zo werkt het */
#zo-werkt-het + .tussenzin { padding-block: clamp(96px, 10vw, 168px); }
/* Bereikbaarheid op Home: foto minder wazig */
#bereikbaarheid.pband .pband__media img { filter: blur(2.5px) saturate(.95); transform: scale(1.03); }
/* De details: kleinere items, minder hoog */
.details-grid--loose { row-gap: clamp(48px, 5.5vw, 96px); }
.details-grid--loose .dtl--1 { grid-column: 1 / 4; }
.details-grid--loose .dtl--2 { grid-column: 5 / 8; margin-top: clamp(48px, 6vw, 104px); }
.details-grid--loose .dtl--3 { grid-column: 10 / 13; margin-top: clamp(12px, 2vw, 32px); }
.details-grid--loose .dtl--4 { grid-column: 2 / 6; }
.details-grid--loose .dtl--5 { grid-column: 8 / 11; margin-top: clamp(56px, 7vw, 120px); }
.details-grid--loose .dtl--6 { grid-column: 1 / 4; margin-top: clamp(24px, 3vw, 48px); }
.details-grid--loose .dtl--7 { grid-column: 5 / 9; }
.details-grid--loose .dtl--8 { grid-column: 10 / 13; margin-top: clamp(40px, 5vw, 80px); }
/* Home: foto links vierkant, zodat de tekst hoger staat en het één geheel is */
.intro__object { aspect-ratio: 1 / 1 !important; height: auto !important; object-position: center 40%; }
/* Teksten in losse alinea's (hero en "Bekijk ook onze andere ruimte") */
div.page-hero__lead p + p { margin-top: .8em; }

/* Faciliteiten: kolommen met een korte tekst boven de lijst, zes kolommen in twee rijen */
.spec-cols--fac { row-gap: clamp(56px, 6vw, 96px); }
.spec-col__intro { font-weight: 300; line-height: 1.65; color: var(--ink-2); max-width: 42ch; margin-bottom: 6px; }
.spec-col__na { margin-top: 18px; }
.spec-col__links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 4px; }
@media (max-width: 1024px) and (min-width: 861px) { .spec-cols--fac { grid-template-columns: repeat(2, 1fr); } }
/* Veelgestelde vragen op Faciliteiten */
#veelgestelde-vragen .faq { max-width: none; }
/* Faciliteiten: koppen, teksten en lijsten van de kolommen lopen in elke rij gelijk */
@media (min-width: 1025px) {
  .spec-cols--fac { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; row-gap: 0; }
  .spec-cols--fac .spec-col { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; align-content: start; }
  .spec-cols--fac .spec-col:nth-child(n+4) { margin-top: clamp(64px, 6vw, 104px); }
  .spec-cols--fac .spec-col__intro { margin-bottom: 0; }
  .spec-cols--fac .spec-col__na { margin-top: 4px; }
}
.spec-cols--fac .spec-col ul { align-content: start; align-self: start; }
.spec-cols--fac .spec-col__extra { align-self: start; }
/* plusje in de vraag precies in het midden */
.faq summary::after { line-height: 1; padding-bottom: 2px; box-sizing: border-box; font-size: 1.1rem; }
/* Faciliteiten: drie rustige kolommen, één rij (geen subgrid meer nodig) */
@media (min-width: 1025px) {
  .spec-cols--fac .spec-col { grid-row: auto; grid-template-rows: none; display: grid; row-gap: 14px; }
  .spec-cols--fac .spec-col:nth-child(n+4) { margin-top: 0; }
}

/* Breakoutrooms: liggende vakken in plaats van staande */
.bo--breed .bo__slides { aspect-ratio: 3 / 2 !important; max-height: 80vh; }
@media (max-width: 860px) { .bo--breed .bo__slides { aspect-ratio: 3 / 2 !important; } }
/* Faciliteiten: vier kolommen */
@media (min-width: 1025px) { .spec-cols--fac.spec-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .spec-cols--fac.spec-cols--4 .spec-col__title { min-height: 2.5em; display: flex; align-items: flex-end; } }

/* Faciliteiten: veelgestelde vragen compact in twee kolommen */
#veelgestelde-vragen .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 96px); align-items: start; }
#veelgestelde-vragen .faq summary { padding-block: 13px; font-size: clamp(1rem, 1.15vw, 1.08rem); gap: 16px; }
#veelgestelde-vragen .faq summary::after { width: 28px; height: 28px; font-size: .95rem; }
#veelgestelde-vragen .faq__answer { padding-bottom: 16px; font-size: .95rem; line-height: 1.65; }
@media (max-width: 860px) { #veelgestelde-vragen .faq { grid-template-columns: 1fr; } }
#veelgestelde-vragen .faq { display: block; column-count: 2; column-gap: clamp(32px, 5vw, 96px); }
#veelgestelde-vragen .faq details { break-inside: avoid; }
@media (max-width: 860px) { #veelgestelde-vragen .faq { column-count: 1; } }
#veelgestelde-vragen .faq.faq--2 { column-count: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 96px); align-items: start; }
@media (max-width: 860px) { #veelgestelde-vragen .faq.faq--2 { grid-template-columns: 1fr; } }

/* Veelgestelde vragen: schuin pijltje in plaats van een plusje in een rondje; draait bij openen */
#veelgestelde-vragen .faq summary::after {
  content: ""; border: 0; border-radius: 0; width: 16px; height: 16px; padding: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M3 13L13 3M5 3h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M3 13L13 3M5 3h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 500ms var(--ease);
}
#veelgestelde-vragen .faq details[open] summary::after { transform: rotate(90deg); }

/* ── Artikel (inspiratie): magazine-indeling ── */
.art { padding-top: clamp(32px, 4vw, 64px); }
.art__top, .art__body, .art__collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.art__intro { grid-column: 1 / 4; grid-row: 1; align-self: start; font-size: .92rem; font-weight: 300; line-height: 1.55; color: var(--ink-2); max-width: 24ch; }
.art__duim { grid-column: 4 / 6; grid-row: 1; align-self: start; margin-top: .6em; }
.art__duim img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.art__titel { grid-column: 6 / 13; grid-row: 1; font-size: clamp(3.2rem, 8.2vw, 8rem); font-weight: 400; line-height: .92; letter-spacing: -.035em; color: var(--ink); }
.art__beeld { grid-column: 6 / 13; grid-row: 2; margin-top: clamp(20px, 2.4vw, 36px); }
.art__beeld img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.art__body { margin-top: clamp(72px, 9vw, 150px); }
.art__label { grid-column: 1 / 4; line-height: 1.8; }
.art__label a { color: inherit; text-decoration: none; }
.art__tekst { grid-column: 6 / 10; max-width: 52ch; }
.art__tekst h2 { font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; line-height: 1.25; margin: 1.8em 0 .5em; }
.art__tekst p { font-size: .98rem; line-height: 1.7; color: var(--ink-2); }
.art__link { margin-top: 36px; }
.art__collage { margin-top: clamp(56px, 7vw, 120px); row-gap: clamp(12px, 1.4vw, 20px); align-items: end; }
.art__c img { width: 100%; object-fit: cover; display: block; }
.art__c--1 { grid-column: 3 / 6; grid-row: 1; } .art__c--1 img { aspect-ratio: 4 / 5; }
.art__c--2 { grid-column: 6 / 9; grid-row: 1; } .art__c--2 img { aspect-ratio: 4 / 5; }
.art__c--3 { grid-column: 6 / 11; grid-row: 2; } .art__c--3 img { aspect-ratio: 4 / 4.2; }
.art__c--4 { grid-column: 4 / 6; grid-row: 2; } .art__c--4 img { aspect-ratio: 1; }
.art__c--5 { grid-column: 1 / 3; grid-row: 3; align-self: start; } .art__c--5 img { aspect-ratio: 1; }
.art__c--6 { grid-column: 6 / 10; grid-row: 3; align-self: start; } .art__c--6 img { aspect-ratio: 3 / 2; }
@media (max-width: 860px) {
  .art__intro, .art__duim, .art__titel, .art__beeld, .art__label, .art__tekst { grid-column: 1 / -1; grid-row: auto; }
  .art__duim { width: 40%; }
  .art__collage { grid-template-columns: 1fr 1fr; }
  .art__c { grid-column: auto !important; grid-row: auto !important; }
}

/* ── Faciliteiten: punten als 'curated looks' ── */
.fac-looks .curated__kop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: clamp(20px, 2vw, 32px);
  font-size: .72rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.fac-looks .curated__kop .fac-looks .curated__midden { color: var(--ink); }
.fac-looks .curated__kop span:last-child { text-align: right; }
.fac-looks .curated__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px); row-gap: clamp(12px, 1.4vw, 20px); align-items: start; }
.fac-looks figcaption { margin-top: 8px; font-size: .78rem; font-weight: 300; color: var(--ink-2); }
.cl-groot { grid-column: 1 / 6; grid-row: 1 / 3; }
.cl-groot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.cl-rechts { grid-column: 10 / 13; grid-row: 1 / 2; }
.cl-rechts img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.cl-rechts figcaption { text-align: right; }
.cl-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(12px, 1.2vw, 18px); align-items: end; }
.cl-item__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.cl-item__titel { font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; margin-bottom: 8px; color: var(--ink); }
.cl-item ul { list-style: none; padding: 0; margin: 0; }
.cl-item li { font-size: .82rem; font-weight: 300; line-height: 1.55; color: var(--ink-2); }
.cl-item--1 { grid-column: 6 / 10; grid-row: 1; }
.cl-item--2 { grid-column: 6 / 10; grid-row: 2; }
.cl-item--3 { grid-column: 9 / 13; grid-row: 2; margin-top: clamp(80px, 10vw, 180px); }
.cl-item--4 { grid-column: 2 / 6; grid-row: 3; margin-top: clamp(-40px, -2vw, -20px); }
.cl-item--2 { grid-column: 6 / 9; }
@media (max-width: 860px) {
  .fac-looks .curated__grid { grid-template-columns: 1fr; }
  .cl-groot, .cl-rechts, .cl-item { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 0 !important; }
  .cl-rechts { width: 60%; justify-self: end; }
}
/* fac-looks: punten netjes verdeeld, foto's even groot */
.cl-item--1 { grid-column: 6 / 10; grid-row: 1; }
.cl-item--2 { grid-column: 6 / 10; grid-row: 2; margin-top: clamp(24px, 3vw, 48px); }
.cl-item--4 { grid-column: 6 / 10; grid-row: 3; margin-top: clamp(24px, 3vw, 48px); }
.cl-item--3 { grid-column: 10 / 13; grid-row: 2 / 4; margin-top: clamp(48px, 6vw, 96px); grid-template-columns: 1fr; align-items: start; }
.cl-item--3 .cl-item__foto img { aspect-ratio: 4 / 3; }
.cl-groot { grid-row: 1 / 4; }
.cl-rechts { grid-row: 1 / 3; }
.cl-item--3 { grid-row: 3 / 5; margin-top: clamp(24px, 3vw, 48px); }
.cl-item--2, .cl-item--4 { margin-top: clamp(16px, 2vw, 28px); }

/* Faciliteiten: veelgestelde vragen in een donker vlak, zoals Catering op Tarieven (kop 1/3, vragen 2/3) */
.faq-box { background: var(--dark); color: #F6F3E4; padding: clamp(56px, 6.5vw, 112px) clamp(28px, 4.5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
.faq-box .section-title { color: #F6F3E4; }
.faq-box__lead { margin-top: 18px; max-width: 30ch; font-size: 1.02rem; font-weight: 300; line-height: 1.65; color: rgba(246,243,228,.75); }
#veelgestelde-vragen .faq-box .faq.faq--2 { column-gap: clamp(28px, 3vw, 56px); }
.faq-box .faq summary { color: #F6F3E4; }
.faq-box .faq__answer { color: rgba(246,243,228,.72); }
.faq-box .faq details { border-bottom: 1px solid rgba(246,243,228,.14) !important; }
@media (max-width: 1024px) { .faq-box { grid-template-columns: 1fr; row-gap: 32px; } }
.faq-box .faq details { border-bottom: 0 !important; }

/* fac-looks v2: meer punten, uitgetrokken naar beneden, meer witruimte */
@media (min-width: 861px) {
  .fac-looks .curated__grid { row-gap: clamp(56px, 6vw, 104px); align-items: start; }
  .fac-looks .cl-groot { grid-column: 1 / 6; grid-row: 1 / 3; }
  .fac-looks .cl-item { margin-top: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: end; }
  .fac-looks .cl-item--1 { grid-column: 7 / 11; grid-row: 1; }
  .fac-looks .cl-item--2 { grid-column: 8 / 12; grid-row: 2; }
  .fac-looks .cl-item--3 { grid-column: 2 / 6; grid-row: 3; margin-top: clamp(24px, 3vw, 48px); }
  .fac-looks .cl-rechts { grid-column: 8 / 12; grid-row: 3 / 5; margin-top: clamp(40px, 5vw, 88px); }
  .fac-looks .cl-item--4 { grid-column: 1 / 5; grid-row: 4; }
  .fac-looks .cl-item--5 { grid-column: 3 / 7; grid-row: 5; }
  .fac-looks .cl-item--6 { grid-column: 8 / 12; grid-row: 5; margin-top: clamp(40px, 5vw, 88px); }
  .fac-looks .cl-item--3 .cl-item__foto img, .fac-looks .cl-item--4 .cl-item__foto img { aspect-ratio: 4 / 5; }
}
/* Faciliteiten: rustig verschijnen, zonder het 'uitrollen' van foto's */
.js .fac-looks .reveal, .js #veelgestelde-vragen .reveal { transform: translateY(14px); transition: opacity 1400ms ease, transform 1600ms var(--ease); }
.js .fac-looks .reveal img { clip-path: none !important; transition: none; }
.js .fac-looks .reveal.is-visible, .js #veelgestelde-vragen .reveal.is-visible { transform: none; }
/* fac-looks zonder kopregel: wat lucht boven */
.fac-looks .curated__grid { margin-top: clamp(8px, 1vw, 16px); }

/* ── Faciliteiten: overzicht in één oogopslag ── */
.ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(20px, 2.4vw, 40px); }
.ov { display: grid; gap: 10px; align-content: start; }
.ov__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.ov__titel { margin-top: 8px; font-size: clamp(1.15rem, 1.4vw, 1.3rem); font-weight: 400; color: var(--ink); }
.ov__feiten { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.ov__feiten li { font-size: .95rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.js .fac-overzicht .reveal { transform: translateY(14px); transition: opacity 1400ms ease, transform 1600ms var(--ease); }
.js .fac-overzicht .reveal img { clip-path: none !important; transition: none; }
.js .fac-overzicht .reveal.is-visible { transform: none; }
@media (max-width: 860px) { .ov-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ov-grid { grid-template-columns: 1fr; } }

/* ── Faciliteiten: rustige lijst, foto rechts wisselt mee (naar Maben / Rippl) ── */
.fl { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(32px, 5vw, 96px); align-items: start; }
.fl-rijen { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3.4vw, 52px); }
.fl-rij { display: grid; grid-template-columns: 3.2em minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(16px, 2.4vw, 40px); align-items: baseline; cursor: default; outline: none; }
.fl-rij__nr { font-size: .78rem; font-weight: 400; letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fl-rij__titel { font-size: clamp(1.7rem, 3.1vw, 2.9rem); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); opacity: .28; transition: opacity 700ms var(--ease); }
.fl-rij__tekst { font-size: .95rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 36ch; opacity: .35; transition: opacity 700ms var(--ease); }
.fl-rij.is-actief .fl-rij__titel, .fl-rij.is-actief .fl-rij__tekst { opacity: 1; }
.fl-rij__foto { display: none; }
.fl-beeld { position: sticky; top: calc(var(--header-h, 90px) + 32px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--soft, #F8F5EF); }
.fl-beeld__img { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.fl-beeld__img.is-actief { opacity: 1; }
.fl-beeld__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .fl { grid-template-columns: 1fr; }
  .fl-beeld { display: none; }
  .fl-rij { grid-template-columns: 2.4em minmax(0, 1fr); row-gap: 10px; }
  .fl-rij__tekst, .fl-rij__foto { grid-column: 2; }
  .fl-rij__titel, .fl-rij__tekst { opacity: 1; }
  .fl-rij__foto { display: block; margin-top: 6px; }
  .fl-rij__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
}

/* ── Inspiratie als lijst (naar Freight / Vonda) ── */
.il { display: grid; gap: clamp(28px, 3vw, 44px); margin-top: clamp(16px, 2vw, 28px); }
.il-rij { display: grid; grid-template-columns: 3.2em minmax(0, 2fr) minmax(0, 5fr) minmax(0, 2.2fr); column-gap: clamp(16px, 2.4vw, 40px); align-items: start; color: inherit; text-decoration: none; }
.il-rij__nr { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: .5em; }
.il-rij__cat { font-size: .72rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); padding-top: .65em; }
.il-rij__midden { display: grid; gap: 14px; }
.il-rij__titel { font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight: 300; line-height: 1.25; letter-spacing: -.01em; max-width: 30ch; }
.il-rij__lees { font-size: .74rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.il-rij__lees i { font-style: normal; display: inline-block; margin-left: 6px; transition: transform 500ms var(--ease); }
.il-rij:hover .il-rij__lees i { transform: translateX(4px); }
.il-rij__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
@media (max-width: 860px) { .il-rij { grid-template-columns: 2.4em minmax(0, 1fr); row-gap: 10px; } .il-rij__cat, .il-rij__midden, .il-rij__foto { grid-column: 2; } }

/* Faciliteitenlijst v2: zonder nummers, actieve rij klapt open met details */
.fl-rij { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.fl-rij__titel { line-height: 1.05; }
.fl-rij__tekst { opacity: .35; transition: opacity 700ms var(--ease); max-width: 40ch; padding-top: .55em; }
.fl-rij__tekst p { font-size: .95rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.fl-rij.is-actief .fl-rij__tekst { opacity: 1; }
.fl-rij__meer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--ease); }
.fl-rij__meer > div { overflow: hidden; min-height: 0; }
.fl-rij.is-actief .fl-rij__meer { grid-template-rows: 1fr; }
.fl-rij__meer ul { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 4px; }
.fl-rij__meer li { font-size: .9rem; font-weight: 300; line-height: 1.55; color: var(--ink-2); padding-left: 16px; position: relative; }
.fl-rij__meer li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--ink-3); }
.fl-rij__links { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 14px; }
@media (max-width: 860px) {
  .fl-rij { grid-template-columns: 1fr; row-gap: 8px; }
  .fl-rij__tekst, .fl-rij__foto { grid-column: 1; }
  .fl-rij__tekst { opacity: 1; padding-top: 0; }
  .fl-rij__meer { grid-template-rows: 1fr; }
}

/* Fotostrook: foto groot bekijken */
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(35, 21, 12, .94); opacity: 0; transition: opacity 400ms ease; }
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }
.lb__img { max-width: min(88vw, 1600px); max-height: 84vh; object-fit: contain; opacity: 0; transition: opacity 500ms ease; }
.lb__img.is-klaar { opacity: 1; }
.lb__sluit { position: absolute; top: 20px; right: 28px; font-size: 2rem; line-height: 1; color: #F6F3E4; padding: 8px; }
.lb__pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 1px solid rgba(246,243,228,.7); border-radius: 50%; color: #F6F3E4; font-size: 1rem; transition: background 400ms, color 400ms; }
.lb__pijl:hover { background: #F6F3E4; color: var(--dark); }
.lb__pijl--vorige { left: clamp(12px, 3vw, 40px); }
.lb__pijl--volgende { right: clamp(12px, 3vw, 40px); }
.lb__teller { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: .82rem; letter-spacing: .06em; color: rgba(246,243,228,.7); font-variant-numeric: tabular-nums; }

/* ── Loft en Studio: foto's als collage onder de iconen (naar Urquiola) ── */
.rc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px); row-gap: clamp(12px, 1.4vw, 20px); align-items: end; }
.rc img { width: 100%; object-fit: cover; display: block; }
.rc--1 { grid-column: 3 / 6; grid-row: 1; } .rc--1 img { aspect-ratio: 4 / 5; }
.rc--2 { grid-column: 6 / 9; grid-row: 1; } .rc--2 img { aspect-ratio: 4 / 5; }
.rc--3 { grid-column: 6 / 11; grid-row: 2; } .rc--3 img { aspect-ratio: 1 / 1.02; }
.rc--4 { grid-column: 4 / 6; grid-row: 2; } .rc--4 img { aspect-ratio: 1; }
.rc--5 { grid-column: 1 / 3; grid-row: 3; align-self: start; } .rc--5 img { aspect-ratio: 1; }
.rc--6 { grid-column: 6 / 10; grid-row: 3; align-self: start; } .rc--6 img { aspect-ratio: 3 / 2; }
.rc--7 { grid-column: 11 / 13; grid-row: 3; align-self: start; } .rc--7 img { aspect-ratio: 1; }
.js .ruimte-collage .reveal { transform: translateY(14px); transition: opacity 1400ms ease, transform 1600ms var(--ease); }
.js .ruimte-collage .reveal img { clip-path: none !important; transition: none; }
.js .ruimte-collage .reveal.is-visible { transform: none; }
@media (max-width: 860px) {
  .rc-grid { grid-template-columns: 1fr 1fr; }
  .rc { grid-column: auto !important; grid-row: auto !important; }
  .rc--3 { grid-column: 1 / -1 !important; }
}

/* ── Faciliteiten: vier harde cijfers ── */
.cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.cijfer { display: grid; gap: 6px; align-content: start; }
.cijfer__label { font-size: .72rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.cijfer__getal { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.cijfer__eenheid { font-size: .95rem; font-weight: 300; color: var(--ink-2); }
@media (max-width: 860px) { .cijfers { grid-template-columns: 1fr 1fr; row-gap: 40px; } }

/* ── Faciliteiten: overgang, één zin en een foto ── */
.overgang { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: end; }
.overgang__foto { grid-column: 1 / 8; }
.overgang__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.overgang__zin { grid-column: 9 / 13; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 300; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); max-width: 18ch; }
@media (max-width: 860px) { .overgang__foto, .overgang__zin { grid-column: 1 / -1; } .overgang__zin { margin-top: 24px; } }

/* ── Faciliteiten: Loft naast Studio ── */
.spec { display: grid; gap: clamp(18px, 2vw, 28px); }
.spec__rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr); column-gap: clamp(20px, 3vw, 56px); align-items: baseline; }
.spec__label { font-size: .72rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.spec__waarde { font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 40ch; }
.spec__beide { grid-column: 2 / 4; }
.spec__ruimte { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 300; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.spec__kop { margin-bottom: 6px; }
@media (max-width: 700px) { .spec__rij { grid-template-columns: 1fr 1fr; row-gap: 4px; } .spec__label { grid-column: 1 / -1; } .spec__kop span:first-child { display: none; } .spec__beide { grid-column: 1 / -1; } }
.js .fac-cijfers .reveal, .js .fac-overgang .reveal, .js .fac-spec .reveal { transform: translateY(14px); transition: opacity 1400ms ease, transform 1600ms var(--ease); }
.js .fac-overgang .reveal img { clip-path: none !important; transition: none; }
.js .fac-cijfers .reveal.is-visible, .js .fac-overgang .reveal.is-visible, .js .fac-spec .reveal.is-visible { transform: none; }
/* overgang: smallere foto, zin ernaast in het midden */
.overgang { align-items: center; }
.overgang__foto { grid-column: 2 / 7; }
.overgang__foto img { aspect-ratio: 4 / 3; }
.overgang__zin { grid-column: 8 / 12; }
.fac-overgang { padding-block: clamp(48px, 6vw, 96px); }
@media (max-width: 860px) { .overgang__foto, .overgang__zin { grid-column: 1 / -1; } }
.spec__noot { margin-top: clamp(24px, 3vw, 40px); font-size: 1rem; font-weight: 300; color: var(--ink-2); }

/* Fotostrook: pijlen in de foto's, links en rechts op halve hoogte */
.run__controls { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); max-width: none; margin: 0; padding-inline: clamp(16px, 2.4vw, 36px); justify-content: space-between; pointer-events: none; z-index: 2; }
.run__btn { pointer-events: auto; width: 52px; height: 52px; border-color: rgba(246,243,228,.85); color: #F6F3E4; background: rgba(35,21,12,.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 400ms, color 400ms; }
.run__btn:hover { background: #F6F3E4; color: var(--dark); }
.run__btn { background: rgba(35,21,12,.62); border-color: rgba(246,243,228,.9); }

/* Faciliteiten: twee ruimtekaarten, licht, kleiner dan op Home */
.rk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
.rk { display: grid; gap: 12px; align-content: start; }
.rk__foto { display: block; overflow: hidden; margin-bottom: 8px; }
.rk__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform 1200ms var(--ease); }
.rk:hover .rk__foto img { transform: scale(1.03); }
.rk__naam { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 300; letter-spacing: -.02em; color: var(--ink); }
.rk__tekst { font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.rk__gegevens { font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
@media (max-width: 760px) { .rk-grid { grid-template-columns: 1fr; } }
.js .fac-spec .reveal img { clip-path: none !important; }
/* Faciliteiten: lagere fotostrook */
.run--smal .run__track img { height: clamp(200px, 22vw, 320px); }
.run--smal .run__btn { width: 44px; height: 44px; }
.fl-rij__titel { white-space: nowrap; }
.faq-box .text-link { color: #F6F3E4; }
/* fotostrook sluit direct aan op "Bekijk ook onze andere ruimte" */
.run:has(+ .split-full) { padding-bottom: 0; }

/* Home, De details: meer verdeeld over de pagina, duidelijk verschillende maten */
@media (min-width: 861px) {
  .details-grid--loose { row-gap: clamp(64px, 7vw, 128px); align-items: start; }
  .details-grid--loose .dtl--1 { grid-column: 1 / 6;  grid-row: 1; margin-top: 0; }
  .details-grid--loose .dtl--1 img { aspect-ratio: 4 / 5; }
  .details-grid--loose .dtl--2 { grid-column: 8 / 11; grid-row: 1; margin-top: clamp(120px, 14vw, 240px); }
  .details-grid--loose .dtl--2 img { aspect-ratio: 1 / 1; }
  .details-grid--loose .dtl--3 { grid-column: 11 / 13; grid-row: 1; margin-top: clamp(16px, 2vw, 32px); }
  .details-grid--loose .dtl--3 img { aspect-ratio: 3 / 4; }
  .details-grid--loose .dtl--4 { grid-column: 2 / 5;  grid-row: 2; margin-top: clamp(24px, 3vw, 48px); }
  .details-grid--loose .dtl--4 img { aspect-ratio: 1 / 1; }
  .details-grid--loose .dtl--5 { grid-column: 6 / 13; grid-row: 2; margin-top: clamp(100px, 12vw, 200px); }
  .details-grid--loose .dtl--5 img { aspect-ratio: 16 / 9; }
  .details-grid--loose .dtl--6 { grid-column: 1 / 4;  grid-row: 3; margin-top: clamp(40px, 5vw, 80px); }
  .details-grid--loose .dtl--6 img { aspect-ratio: 3 / 4; }
  .details-grid--loose .dtl--7 { grid-column: 5 / 10; grid-row: 3; margin-top: 0; }
  .details-grid--loose .dtl--7 img { aspect-ratio: 3 / 2; }
  .details-grid--loose .dtl--8 { grid-column: 11 / 13; grid-row: 3; margin-top: clamp(140px, 16vw, 260px); }
  .details-grid--loose .dtl--8 img { aspect-ratio: 1 / 1; }
}
/* ankers niet onder de vaste menubalk laten vallen */
[id] { scroll-margin-top: 96px; }

/* Catering-pagina: twee tekstkolommen; Tarieven: link terug naar /catering/ */
.spec-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 96px); }
.spec-cols--2 .spec-col { gap: 18px; }
@media (max-width: 860px) { .spec-cols--2 { grid-template-columns: 1fr; } }
.catering-terug { margin-top: 20px; }

/* Catering: huisstijl-letters, alleen de indeling van de inspiratie */
.art--pagina { padding-top: 0; }
.art--pagina .art__body { margin-top: clamp(56px, 6vw, 104px); }
.art--pagina .art__tekst h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 400; text-transform: none; letter-spacing: 0; margin: 1.6em 0 .5em; }
.art--pagina .art__tekst h2:first-child { margin-top: 0; }
.art--pagina .art__tekst p { font-size: 1rem; }

/* ── Catering: menu (naar Graphite) — label links, grote zin, twee kolommen, twee foto's verspringend ── */
.cm, .cm-fotos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.cm__label { grid-column: 1 / 4; line-height: 1.8; }
.cm__zin { grid-column: 1 / 6; grid-row: 1 / 3; align-self: start; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 300; line-height: 1.35; letter-spacing: -.01em; max-width: 32ch; }
.cm__items { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 3.6vw, 56px) clamp(24px, 4vw, 72px); grid-row: 1; }
.cm-item__titel { font-size: 1.05rem; font-weight: 400; margin-bottom: 8px; }
.cm-item__tekst { font-size: .9rem; font-weight: 300; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
.cm__link { grid-column: 7 / 13; grid-row: 2; margin-top: clamp(36px, 4vw, 56px); }
.cm-fotos { margin-top: clamp(80px, 9vw, 150px); align-items: start; }
.cm-foto img { width: 100%; height: auto; display: block; cursor: zoom-in; }
/* foto's verschijnen alleen zacht, zonder schuiven of uitrollen */
.js .cm-foto.reveal { transform: none; transition: opacity 1400ms ease; }
.js .cm-foto.reveal img { clip-path: none; transition: none; }
.cm-foto--1 { grid-column: 1 / 8; }
.cm-foto--2 { grid-column: 9 / 12; margin-top: clamp(100px, 12vw, 200px); }
.cm-foto--3 { grid-column: 3 / 6; margin-top: clamp(40px, 5vw, 80px); }
.cm-foto--4 { grid-column: 7 / 13; margin-top: clamp(100px, 11vw, 180px); }
@media (max-width: 860px) {
  .cm__label, .cm__zin, .cm__items, .cm__link { grid-column: 1 / -1; }
  .cm__zin { grid-row: auto; }
  .cm__items { grid-row: auto; margin-top: 40px; }
  .cm__link { grid-row: auto; }
  .cm__items { grid-template-columns: 1fr; }
  .cm-foto--1 { grid-column: 1 / -1; }
  .cm-foto--2 { grid-column: 6 / 13; margin-top: 24px; }
  .cm-foto--3 { grid-column: 1 / 8; margin-top: 24px; }
  .cm-foto--4 { grid-column: 3 / 13; margin-top: 24px; }
}

/* kleine tweede regel binnen de H1 (Loft, Studio) */
.page-hero__sub { display: block; margin-top: .5em; font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 300; line-height: 1.35; letter-spacing: 0; max-width: 28ch; color: var(--ink-2); }

/* vragen op Loft en Studio: zacht vlak, vragen onder elkaar (staat vlak voor het donkere blok 'andere ruimte') */
.faq-box--licht { background: var(--soft, #F8F5EF); color: var(--ink); }
.faq-box--licht .section-title, .faq-box--licht .faq summary { color: var(--ink); }
.faq-box--licht .faq-box__lead, .faq-box--licht .faq__answer { color: var(--ink-2); }
.faq-box--licht .text-link { color: var(--ink); }
#veelgestelde-vragen .faq.faq--1 { display: grid; grid-template-columns: 1fr; max-width: 720px; }

/* ── TELEFOON: minder foto's, minder bulk, meer witruimte (25-10) — desktop blijft gelijk ── */
@media (max-width: 860px) {
  :root { --section: 104px; }
  .section--compact { padding-block: 72px; }
  .tussenzin { padding-block: 88px; }
  /* Loft en Studio: collage alleen op desktop, de fotostrook verderop laat de ruimte zien */
  .ruimte-collage { display: none; }
  /* Faciliteiten: geen foto bij elke rij in de lijst */
  .fl-rij__foto { display: none !important; }
  .fl-rijen { gap: 40px; }
  /* Home, De details: twee naast elkaar, wisselende maten en hoogtes, wit ertussen (zoals op de pc, maar compacter) */
  .details-grid--loose { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row; row-gap: 96px; column-gap: 0; }
  .details-grid--loose .dtl { margin: 0 !important; gap: 10px; grid-row: auto !important; align-self: start; }
  .details-grid.details-grid--loose .dtl--1 { grid-column: 1 / 7 !important; }  .details-grid.details-grid--loose .dtl--1 img { aspect-ratio: 4 / 5 !important; }
  .details-grid.details-grid--loose .dtl--2 { grid-column: 9 / -1 !important; margin-top: 128px !important; } .details-grid.details-grid--loose .dtl--2 img { aspect-ratio: 1 / 1 !important; }
  .details-grid.details-grid--loose .dtl--3 { grid-column: 2 / 6 !important; }  .details-grid.details-grid--loose .dtl--3 img { aspect-ratio: 1 / 1 !important; }
  .details-grid.details-grid--loose .dtl--4 { grid-column: 8 / -1 !important; margin-top: 72px !important; } .details-grid.details-grid--loose .dtl--4 img { aspect-ratio: 4 / 3 !important; }
  .details-grid.details-grid--loose .dtl--5 { grid-column: 1 / 9 !important; } .details-grid.details-grid--loose .dtl--5 img { aspect-ratio: 16 / 9 !important; }
  .details-grid.details-grid--loose .dtl--6 { grid-column: 1 / 6 !important; margin-top: 72px !important; } .details-grid.details-grid--loose .dtl--6 img { aspect-ratio: 4 / 5 !important; }
  .details-grid.details-grid--loose .dtl--7 { grid-column: 8 / -1 !important; } .details-grid.details-grid--loose .dtl--7 img { aspect-ratio: 4 / 3 !important; }
  .details-grid.details-grid--loose .dtl--8 { grid-column: 6 / 10 !important; } .details-grid.details-grid--loose .dtl--8 img { aspect-ratio: 1 / 1 !important; }
  .details-grid--loose .dtl .item__title { font-size: .7rem; }
  .details-grid--loose .dtl figcaption .item__note { font-size: .8rem; line-height: 1.5; }
  /* Studio, breakoutrooms: ook een veegrij */
  .bo--drie.bo--breed { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-inline: var(--gutter); scrollbar-width: none; }
  .bo--drie.bo--breed::-webkit-scrollbar { display: none; }
  .bo--drie.bo--breed .bo__panel { flex: 0 0 82%; scroll-snap-align: center; }
  .bo--drie.bo--breed .bo__panel { flex-basis: 86%; }
  /* Kies je ruimte: omdraaien werkt niet met een vinger — tekst op een heel vage foto, lager */
  .rooms-flip:not(.rooms-flip--3) { gap: 12px; padding-inline: var(--gutter); }
  .rooms-flip:not(.rooms-flip--3) .flip__inner { display: grid; }
  .rooms-flip:not(.rooms-flip--3) .flip__face { grid-area: 1 / 1; }
  .rooms-flip:not(.rooms-flip--3) .flip__front { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; }
  .rooms-flip:not(.rooms-flip--3) .flip__front img { position: absolute; inset: 0; filter: blur(4px); transform: scale(1.06); }
  .rooms-flip:not(.rooms-flip--3) .flip__front::after { background: linear-gradient(180deg, rgba(35,21,12,.55) 0%, rgba(35,21,12,.38) 55%, rgba(35,21,12,.6) 100%); }
  .rooms-flip:not(.rooms-flip--3) .flip__name { display: none; }
  .rooms-flip:not(.rooms-flip--3) .flip__back { position: relative; z-index: 1; background: transparent; color: #F6F3E4; padding: 36px 24px 32px; gap: 22px; }
  .rooms-flip:not(.rooms-flip--3) .flip__kicker { visibility: visible; font-size: 1.9rem; font-weight: 300; letter-spacing: -.01em; text-transform: none; color: #F6F3E4; }
  .rooms-flip:not(.rooms-flip--3) .flip__lead { color: rgba(246,243,228,.9); }
  /* Loft en Studio: vier iconen op de telefoon in plaats van acht */
  .feats .feat:nth-child(n+5) { display: none; }
  /* foto's minder hoog, zodat scrollen overzichtelijk blijft */
  .page-hero__media { min-height: 0; aspect-ratio: 3 / 2; }
  .intro__right { min-height: 0; height: 72vw; }
  .split-full__media { min-height: 0; aspect-ratio: 16 / 10; }
}
/* menu-toggle: twee lijnen, worden een kruis bij openen */
.menu-toggle__icoon { position: relative; display: block; width: 26px; height: 12px; }
.menu-toggle__icoon i { position: absolute; left: 0; right: 0; height: 1.4px; background: currentColor; transition: transform 500ms var(--ease), top 500ms var(--ease); }
.menu-toggle__icoon i:first-child { top: 0; } .menu-toggle__icoon i:last-child { top: 10.6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icoon i:first-child { top: 5.3px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icoon i:last-child { top: 5.3px; transform: rotate(-45deg); }
.menu-toggle { min-width: 44px; justify-content: center; }

/* ── TELEFOON ronde 3 (25-10): Zo werkt het, Faciliteiten-lijst, Contact, Tarieven ── */
@media (max-width: 860px) {
  /* Zo werkt het: rustige tijdlijn, icoon links met een dunne lijn, tekst rechts */
  #zo-werkt-het .steps { grid-template-columns: 1fr; gap: 34px; }
  #zo-werkt-het .steps__line { top: 24px; bottom: 24px; left: 23.5px; right: auto; width: 1px; height: auto; background: rgba(246,243,228,.22); }
  #zo-werkt-het .steps__line::before, #zo-werkt-het .steps__line::after { display: none; }
  #zo-werkt-het .step, #zo-werkt-het .step__link { grid-template-columns: 48px 1fr; column-gap: 20px; row-gap: 4px; justify-items: start; text-align: left; align-items: start; }
  #zo-werkt-het .step__link { grid-column: 1 / -1; }
  #zo-werkt-het .step__num { grid-row: 1 / span 2; width: 48px; height: 48px; background: var(--dark); position: relative; z-index: 1; }
  #zo-werkt-het .step__num svg { width: 20px; height: 20px; }
  #zo-werkt-het .step__title, #zo-werkt-het .step__link .step__title { grid-column: 2; justify-self: start; margin: 4px 0 0; }
  #zo-werkt-het .step__text { grid-column: 2; max-width: 32ch; }
  #zo-werkt-het .step__link:hover { transform: none; }

  /* Faciliteiten: uitklaplijst — eerst alleen de titels, tik om te openen */
  .fac-lijst .fl-rijen { gap: 0; }
  .fac-lijst .fl-rij { grid-template-columns: 1fr; padding-block: 18px; cursor: pointer; }
  .fac-lijst .fl-rij__titel { position: relative; padding-right: 40px; font-size: 1.7rem; opacity: 1; white-space: normal; }
  .fac-lijst .fl-rij__titel::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 200; transition: transform 500ms var(--ease); }
  .fac-lijst .fl-rij.is-open .fl-rij__titel::after { transform: translateY(-50%) rotate(45deg); }
  .fac-lijst .fl-rij__tekst { display: grid; grid-template-rows: 0fr; opacity: 0; padding-top: 0; transition: grid-template-rows 600ms var(--ease), opacity 500ms var(--ease), padding 600ms var(--ease); }
  .fac-lijst .fl-rij__tekst > * { min-height: 0; overflow: hidden; }
  .fac-lijst .fl-rij__tekst { grid-template-rows: 0fr 0fr; }
  .fac-lijst .fl-rij.is-open .fl-rij__tekst { grid-template-rows: auto 1fr; opacity: 1; padding-top: 12px; }
  .fac-lijst .fl-rij__meer { grid-template-rows: 1fr; }

  /* Contact (en Bereikbaarheid): label boven de tekst, meer lucht ertussen */
  .reach__list { gap: 26px; }
  .reach__list > div { grid-template-columns: 1fr; gap: 6px; padding-block: 0; border: 0; }
  .reach__list dd { max-width: 36ch; }
  .page-hero__actions:has(.contact-link) { gap: 28px; margin-top: 12px; }
  .page-hero--contact-wit .page-hero__text { gap: 26px; }

  /* Tarieven: compacte prijsrijen — naam en uren links, prijs rechts, regels eronder */
  .tarief-cols { gap: 40px; }
  .tarief2 { grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px; padding-top: 20px; }
  .tarief2 .item__title { grid-column: 1; grid-row: 1; }
  .tarief2__uren { grid-column: 1; grid-row: 2; }
  .tarief2__prijs { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-top: 0; font-size: 2.2rem; }
  .tarief2__regels { grid-column: 1 / -1; margin-top: 14px; }
  .tarief2:hover .tarief2__prijs { transform: none; }
  /* Catering op Tarieven: kleiner, zonder grote iconen */
  .catering-box { padding: 40px 22px; }
  .catering-lead p { font-size: .95rem; }
  .cgroups { gap: 32px; margin-top: 28px; }
  .cgroup--plain > .feat__icon { display: none; }
  .cgroup--plain .cgroup__title { text-align: left; font-size: 1.2rem; padding-bottom: 10px; }
  .cgroup--plain .cgroup__list li { padding-block: 10px; }
}



/* ── TELEFOON: Zo werkt het als op de pc — een lijn met pijl die omlaag loopt, de stappen verschijnen mee ── */
@media (max-width: 860px) {
  #zo-werkt-het .steps__line { display: block; position: absolute; left: 23.5px; right: auto; top: 24px; bottom: -36px; width: 1px; height: auto; background: none; transform: none; }
  #zo-werkt-het .steps__line::before { display: block; content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: rgba(246,243,228,.55); }
  #zo-werkt-het .steps__line::after { display: block; content: ""; position: absolute; left: -4.5px; top: calc(100% - 10px); width: 10px; height: 10px; opacity: 1;
    border: 0; border-right: 1px solid rgba(246,243,228,.55); border-bottom: 1px solid rgba(246,243,228,.55); transform: rotate(45deg); }
  .js #zo-werkt-het .steps__line::before { height: 0; transition: height 3000ms linear; }
  .js #zo-werkt-het .steps__line::after { top: -10px; opacity: 0; transition: top 3000ms linear, opacity 300ms; }
  .js #zo-werkt-het .steps.is-visible .steps__line::before { height: 100%; }
  .js #zo-werkt-het .steps.is-visible .steps__line::after { top: calc(100% - 10px); opacity: 1; }
  .js #zo-werkt-het .step { opacity: 0; transform: translateY(16px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease); transition-delay: calc(var(--i) * 750ms + 150ms); }
  .js #zo-werkt-het .steps.is-visible .step { opacity: 1; transform: none; }
  #zo-werkt-het .step__num, #zo-werkt-het .step:hover .step__num, #zo-werkt-het .step--link:hover .step__num { background: var(--dark) !important; color: #F6F3E4 !important; border-color: rgba(246,243,228,.85) !important; transform: none !important; }
  #zo-werkt-het .step__num svg { stroke: currentColor; }
  #zo-werkt-het .steps { padding-bottom: 36px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .js #zo-werkt-het .steps__line::before { height: 100%; transition: none; } .js #zo-werkt-het .steps__line::after { top: calc(100% - 10px); opacity: 1; transition: none; }
  .js #zo-werkt-het .step { opacity: 1; transform: none; transition: none; }
}

/* ── FOOTER (25-10): oorspronkelijke inhoud, minder hoog en beter verdeeld ── */
.site-footer { padding-block: clamp(64px, 7vw, 104px) 28px; }
.site-footer .footer__grid { grid-template-columns: auto auto auto 1fr; gap: 32px clamp(40px, 5vw, 96px); align-items: start; }
.site-footer .footer__col { gap: 8px; }
.site-footer .footer__col .caption { margin-bottom: 6px; }
.site-footer .footer__mark { justify-self: end; align-self: end; max-width: 380px; margin: 0; }
.site-footer .footer__legal { margin-top: clamp(48px, 5vw, 72px); padding-top: 20px; border-top: 1px solid rgba(246,243,228,.14); }
@media (max-width: 860px) {
  .site-footer { padding-block: 56px 24px; }
  .site-footer .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .site-footer .footer__col a { font-size: .95rem; }
  .site-footer .footer__mark { grid-column: 1 / -1; justify-self: start; max-width: 170px; margin-top: 8px; }
  .site-footer .footer__legal { margin-top: 36px; flex-direction: column; gap: 10px; }
}