/* ============================================================
   SIR. — Premium Event Catering
   Stylesheet volgens "STYLE SHEET SIR." (2026)
   ============================================================ */

/* ---------- Lettertypes -------------------------------------
   LEMON MILK is een betaald lettertype en zit niet in deze repo.
   Plaats de bestanden in /fonts (zie fonts/README.md) en ze worden
   automatisch gebruikt. Zolang ze ontbreken valt de site netjes
   terug op Outfit — een geometrische sans die er dicht bij ligt.
   ------------------------------------------------------------ */
/* LEMON MILK v5 (Marsnev) — donationware, zie fonts/READ_ME.txt.
   Vier gewichten × recht/cursief. woff2 eerst, otf als achtervang.
   Let op: deze gratis versie heeft GEEN kleine letters — 'a' toont als 'A'.
   Gebruik dit lettertype dus alleen voor tekst in hoofdletters. Alle plekken
   in deze stylesheet hebben text-transform: uppercase. */
@font-face {
  font-family: 'Lemon Milk';
  src: url('../../fonts/LEMONMILK-Light.woff2') format('woff2'),
       url('../../fonts/LEMONMILK-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lemon Milk';
  src: url('../../fonts/LEMONMILK-LightItalic.woff2') format('woff2'),
       url('../../fonts/LEMONMILK-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lemon Milk';
  src: url('../../fonts/LEMONMILK-Regular.woff2') format('woff2'),
       url('../../fonts/LEMONMILK-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lemon Milk';
  src: url('../../fonts/LEMONMILK-RegularItalic.woff2') format('woff2'),
       url('../../fonts/LEMONMILK-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lemon Milk';
  src: url('../../fonts/LEMONMILK-Medium.woff2') format('woff2'),
       url('../../fonts/LEMONMILK-Medium.otf') format('opentype');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lemon Milk';
  src: url('../../fonts/LEMONMILK-MediumItalic.woff2') format('woff2'),
       url('../../fonts/LEMONMILK-MediumItalic.otf') format('opentype');
  font-weight: 500 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lemon Milk';
  src: url('../../fonts/LEMONMILK-Bold.woff2') format('woff2'),
       url('../../fonts/LEMONMILK-Bold.otf') format('opentype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lemon Milk';
  src: url('../../fonts/LEMONMILK-BoldItalic.woff2') format('woff2'),
       url('../../fonts/LEMONMILK-BoldItalic.otf') format('opentype');
  font-weight: 700 900;
  font-style: italic;
  font-display: swap;
}

/* Poppins wordt zelf gehost (SIL Open Font License, vrij te verspreiden).
   Zo gaat er geen enkel verzoek meer naar Google en dus ook geen IP-adres
   van de bezoeker — dat scheelt een lastige passage in de privacyverklaring
   en een cookiebanner. Alleen de latin-subset: de site is Nederlandstalig. */
@font-face {
  font-family: 'Poppins';
  src: url('../../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../../fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ----------------------------------- */
:root {
  /* Merkkleuren — exact uit de style sheet */
  --butter:    #FDF3A0;   /* Butter yellow */
  --olive:     #627159;   /* Olive Sage    */
  --charcoal:  #202020;   /* Charcoal      */
  --vanille:   #FFFBEE;   /* Soft Vanille  */

  /* Afgeleide tinten */
  --vanille-shade: #F3EEDF;              /* watermerk / plaatshouders */
  --olive-light: #9AAC8F;                /* olive op donkere ondergrond (contrast) */
  --charcoal-80: rgba(32, 32, 32, .8);
  --charcoal-55: rgba(32, 32, 32, .55);
  --ink-muted: rgba(32, 32, 32, .68);

  /* Typografie */
  --font-display: 'Lemon Milk', 'Outfit', 'Poppins', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Ritme */
  --pad-x: clamp(1.5rem, 5vw, 5.5rem);
  --pad-y: clamp(3rem, 8vh, 6rem);
  --header-h: 4.5rem;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 60em) {
  :root { --header-h: 5.25rem; }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--vanille);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
address { font-style: normal; }

/* Tweekleurig: de charcoal ring valt op tegen boter en wit, de gele halo
   valt op tegen charcoal. Zo is de focus overal zichtbaar. */
:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--butter);
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  z-index: 200;
  transform: translate(-50%, -120%);
  padding: .75rem 1.5rem;
  background: var(--butter);
  color: var(--charcoal);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---------- Herbruikbare typografie ------------------------- */
.section-title,
.reviews__kicker {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
/* De eerste letter van elke titel staat cursief, zoals in de voorstelling. */
.section-title::first-letter,
.booking__title::first-letter,
.booking__step h3::first-letter,
.reviews__lede h2::first-letter,
.reviews__kicker::first-letter,
.footer__kicker::first-letter { font-style: italic; }

/* "SIRVICE" hoort als één woord te lezen; de cursieve helft krijgt
   daarom iets negatieve ruimte terug — anders duwt de schuinstand ze los. */
.section-title em { font-style: italic; margin-left: -.08em; }

/* Het aanhalingsteken is een eigen merkvorm — een bol met een dunne staart.
   De voorstelling gebruikt twee richtingen: openend (66) bij About, Food en
   de quote; sluitend (99) bij Sirvice, Moments en Reviews. Het masker is de
   sluitende vorm; de openende is dezelfde vorm 180° gedraaid. */
/* Het aanhalingsteken is het ECHTE teken uit LEMON MILK, niet langer een
   natekening in een SVG-masker: die had te dikke, stompe staarten.
   Opgemeten in het font (per em): inkt 0,5405 breed en 0,3657 hoog, met de
   inktbovenkant 0,8022 boven de basislijn en een linkermarge van 0,0342.
   Met line-height 1 ligt de basislijn 0,92 em onder de kaderbovenkant, dus
   staat de inkt 0,1178 em lager. Omgerekend naar de kaderbreedte:
   font-size 185% en een verschuiving van -21,8% / -6,33%.
   Zo blijft `width` de maat bepalen en werken alle bestaande
   maat-overschrijvingen en marges ongewijzigd. */
/* Het aanhalingsteken is een merkelement, geen letterteken: geen enkele
   LEMON MILK-snede heeft deze vorm (die hebben massieve druppels met een
   korte, dikke staart). Hier natekend uit de aangeleverde referentie.
   Verhoudingen, met de bal als maat: totale hoogte 1,7 bal, de punt 0,35
   bal rechts van het balmidden, tussenruimte tussen de bollen 0,2 bal.
   Bal en staart staan als twee losse vormen in het masker, zodat ze
   samensmelten zonder gedoe met vulregels. */
/* Het aanhalingsteken is een merkelement, geen letterteken: geen enkele
   LEMON MILK-snede heeft deze vorm. De vorm komt rechtstreeks uit de
   aangeleverde voorstelling en staat in assets/img/quote-mark.svg.
   Het is een MASKER, dus de vorm zit in het bestand en de kleur in de CSS —
   zo staat hetzelfde teken per sectie in de juiste kleur. */
.quote-mark {
  display: block;
  width: clamp(3.25rem, 5vw, 5rem);
  aspect-ratio: 468.55 / 355.88;
  margin-bottom: clamp(.75rem, 2vh, 1.5rem);
  background: var(--olive);
  -webkit-mask: url('../img/quote-mark.svg') no-repeat center / contain;
  mask: url('../img/quote-mark.svg') no-repeat center / contain;
}
/* Het sluitteken is dezelfde vorm, een halve slag gedraaid. */
.quote-mark--close { transform: rotate(180deg); }
.quote-mark--butter { background: var(--butter); }

.btn {
  display: inline-block;
  padding: 1rem 2.25rem;
  background: var(--butter);
  color: var(--charcoal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }

/* ============================================================
   FOTO-PLAATSHOUDERS
   Elke .ph toont een merkkader zolang de foto nog niet bestaat.
   Zodra het bestand in /images staat, verdwijnt de plaatshouder
   vanzelf — er hoeft niets aan de code te veranderen.
   ============================================================ */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--vanille-shade);
}
.ph::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(52%, 16rem);
  aspect-ratio: 1024 / 827;
  transform: translate(-50%, -58%);
  background: rgba(255, 255, 255, .55);
  -webkit-mask: url('../img/mark.png') no-repeat center / contain;
  mask: url('../img/mark.png') no-repeat center / contain;
}
.ph::after {
  content: attr(data-label) ' · ' attr(data-size);
  position: absolute;
  left: 50%; bottom: clamp(1.5rem, 8%, 3rem);
  transform: translateX(-50%);
  padding: .45rem 1rem;
  background: rgba(32, 32, 32, .06);
  border: 1px dashed var(--charcoal-55);
  border-radius: 999px;
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Ook via <picture>: dat element krijgt display: contents, zodat het beeld
   zich gedraagt als direct kind en de absolute plaatsing blijft werken. */
.ph > picture { display: contents; }
.ph > img,
.ph > picture > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Ontbrekende afbeelding → plaatshouder blijft zichtbaar */
.ph > img[data-missing],
.ph > picture > img[data-missing] { display: none; }

/* Volvlak-beelden (hero, quote, contact, footer) zijn zwart-wit */
.ph--hero { background-color: var(--charcoal); }
.ph--hero > img { filter: grayscale(1); }
/* De voorstelling houdt de hero (rood) en reviews (groen) in kleur */
.ph--color > img { filter: none; }
.ph--hero::before { background: rgba(253, 243, 160, .15); }
/* Rechtsonder geparkeerd zodat het label niet botst met de tekst
   die over deze volvlak-beelden valt. */
.ph--hero::after {
  left: auto; right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vh, 2rem);
  transform: none;
  background: rgba(253, 243, 160, .08);
  border-color: rgba(253, 243, 160, .45);
  color: rgba(253, 243, 160, .8);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: var(--header-h);
  padding-inline: var(--pad-x);
  background: var(--charcoal);
  /* visibility hoort erbij: alleen wegschuiven met transform laat de links
     bereikbaar met Tab terwijl ze buiten beeld staan. */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s;
}
.site-header.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .45s var(--ease), visibility 0s linear 0s;
}
.menu-open .site-header {
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s;
}

.site-header__logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem);
  letter-spacing: -.01em;
  color: var(--butter);
  text-decoration: none;
  line-height: 1;
}

.site-header__nav {
  display: none;
  gap: clamp(2rem, 4vw, 4.5rem);
}
.site-header__nav a {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .3vw, 1.2rem);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--butter);
  padding-block: .35rem;
}
.site-header__nav a em { font-style: italic; margin-left: -.04em; }
.site-header__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.site-header__nav a:hover::after,
.site-header__nav a[aria-current='true']::after { transform: scaleX(1); transform-origin: left; }

@media (min-width: 60em) {
  .site-header__nav { display: flex; }
  .site-header .burger { display: none; }
}

/* ---------- Hamburger --------------------------------------- */
.burger {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--butter);
  flex: none;
}
.burger > span {
  display: grid;
  gap: 4px;
  width: 1.05rem;
}
.burger i {
  display: block;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded='true'] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   OVERLAY MENU
   ============================================================ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--charcoal);
  opacity: 0;
  visibility: hidden;
  /* visibility met 0s + vertraging, niet meegeanimeerd: een discrete property
     klapt anders pas halverwege de transitie om, en tot dat moment kan het
     paneel geen focus krijgen. */
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s var(--ease), visibility 0s linear 0s;
}

/* Sluitknop rechtsboven in het menu — zonder deze knop kan een muis- of
   touchgebruiker het menu alleen verlaten via een navigatielink. */
.menu__close {
  position: absolute;
  top: calc((var(--header-h) - 2.75rem) / 2);
  right: var(--pad-x);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--butter);
}
.menu__close > span { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; }
.menu__close i {
  grid-area: 1 / 1;
  width: 100%; height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
}
.menu__close i:nth-child(1) { transform: rotate(45deg); }
.menu__close i:nth-child(2) { opacity: 0; }
.menu__close i:nth-child(3) { transform: rotate(-45deg); }

.menu__inner {
  display: flex;
  flex-direction: column;
  /* auto-marges in plaats van justify-content: center — die klappen wél in
     bij overflow, zodat de bovenste items bereikbaar blijven. */
  justify-content: flex-start;
  gap: clamp(2rem, 6vh, 4rem);
  height: 100%;
  padding: calc(var(--header-h) + 2rem) var(--pad-x) var(--pad-y);
  overflow-y: auto;
}
.menu__inner > * { flex: none; }
.menu__nav { margin-top: auto; }
.menu__meta { margin-bottom: auto; }

.menu__nav { display: grid; gap: clamp(.5rem, 2vh, 1.25rem); }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 1rem + 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--butter);
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .25s var(--ease);
}
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a:nth-child(1) { transition-delay: .06s; }
.menu__nav a:nth-child(2) { transition-delay: .12s; }
.menu__nav a:nth-child(3) { transition-delay: .18s; }
.menu__nav a:nth-child(4) { transition-delay: .24s; }
.menu__nav a:nth-child(5) { transition-delay: .30s; }
.menu__nav a:hover { color: #fff; }
.menu__label::first-letter { font-style: italic; }
.menu__nav a em { font-style: italic; margin-left: -.06em; }
.menu__no {
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .2em;
  /* Lichtere olive: #627159 haalt op charcoal maar 3,1:1 en dit is
     echte tekst, geen decoratie. */
  color: var(--olive-light);
  flex: none;
}

.menu__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(2rem, 6vw, 5rem);
  color: var(--vanille);
  font-size: .95rem;
  line-height: 1.6;
}
.menu__meta a { color: var(--butter); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ============================================================
   1. HERO
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  /* Geen min-height: de sectie is exact zo hoog als het kader. Met een
     min-height zou er ruimte boven en onder ontstaan zodra het kader lager
     is dan het venster, en dat is precies de opvulling die eruit moest.
     Op telefoons zet de mobiele regel het kader wel op schermhoogte. */
  /* Diep rood uit de foto zelf bemonsterd (randen lopen van rgb(111,1,0) tot
     rgb(183,3,4)); dit is de ruimte naast het kader op brede schermen. */
  background: rgb(124, 1, 1);
  color: #fff;
  overflow: hidden;
}
/* Het kader heeft de verhouding van de foto en past zich binnen het scherm:
   de smalste kant bepaalt de maat, dus de hele foto blijft zichtbaar in
   plaats van een uitsnede. Alle maten erbinnen staan in cqw, dus de tekst
   houdt dezelfde verhouding tot de foto op elk formaat. */
.hero__frame {
  position: relative;
  container-type: inline-size;
  /* Volle breedte, net als het footer-kader: geen opvulling naast de foto.
     De hoogte volgt uit de verhouding, dus de hele foto blijft zichtbaar. */
  width: 100%;
  aspect-ratio: 2000 / 1414;
  display: flex;
  flex-direction: column;
  /* GEEN horizontale padding: cqw rekent op de content-box, dus met padding
     zou het woordmerk een fractie te klein uitvallen. De zijmarges staan op
     de kinderen. */
  padding: clamp(1.25rem, 4vh, 2.5rem) 0 clamp(1.75rem, 5vh, 3rem);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }

/* Kruisvervaging tussen de hero-beelden.
   Zonder JavaScript blijft het eerste beeld gewoon staan: de klasse
   is-crossfading wordt pas gezet zodra de wissel echt draait. */
.hero__media[data-crossfade] > img + img { opacity: 0; }
.hero__media.is-crossfading > img {
  opacity: 0;
  transition: opacity 2s var(--ease);
}
.hero__media.is-crossfading > img.is-active { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Licht gehouden: de hero is nu één vast beeld met een diep rode
     achtergrond, dus de witte tekst staat er al contrastrijk op. Alleen de
     randen krijgen een vleugje diepte. */
  background:
    linear-gradient(180deg, rgba(32,32,32,.22) 0%, rgba(32,32,32,.04) 24%, rgba(32,32,32,.04) 72%, rgba(32,32,32,.30) 100%);
}
.hero__frame > *:not(.hero__media):not(.hero__scrim):not(.hero__center) { position: relative; z-index: 3; }
/* Apart en met lage specificiteit, zodat de mobiele regel de plaatsing kan
   overnemen. */
.hero__center { position: relative; z-index: 3; }

.hero__top {
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.hero__link {
  /* Poppins, niet het display-font: de twee hoeken horen rustig te blijven
     zodat het woordmerk het beeld draagt. */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(.7rem, .6rem + .3vw, .95rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: color .25s var(--ease);
}
.hero__link:hover { color: var(--butter); }

.hero__center {
  /* De maat van het woordmerk staat hier, zodat de tagline er exact op kan
     uitlijnen zonder te gokken. */
  /* Maat t.o.v. het KADER (cqw), niet het scherm: zo blijft de verhouding
     tussen de tekst en de foto gelijk op elk formaat. De svh-grens is niet
     meer nodig, want het kader past al binnen het scherm. */
  --wm: 42cqw;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
  max-width: 100%;
}

.hero__wordmark {
  display: flex;
  align-items: flex-end;
  /* Tussenruimte tussen de R en de punt: 0,0543 kaphoogte uit de aangeleverde
     SVG, plus de 0,01323 em waarmee de R rechts buiten zijn regelvak valt
     door de negatieve letterafstand. */
  gap: .0566em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  /* Afgestemd op LEMON MILK, dat smaller loopt dan de terugvalletters: het
     woordmerk beslaat zo dezelfde breedte als in de voorstelling.
     De svh-grens houdt het binnen beeld op landschap-telefoons. */
  font-size: var(--wm);
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--butter);
}
.hero__sir { display: block; }

/* De punt van "SIR." is tegelijk de menuknop. Hij hoort zich te gedragen als
   een echt punt: klein, en rustend op de basislijn van SIR.
   LEMON MILK heeft een kaphoogte van 0,799 em en een basislijn die met
   line-height .85 vrijwel samenvalt met de onderrand van het regelvak — met
   align-items: flex-end staat de bol dus goed met een marge van bijna nul.
   De streepjes zijn UITGESPAARD: het masker snijdt ze uit de bol, zodat de
   achtergrond erdoorheen komt in plaats van donkere balkjes. */
.hero__dot {
  position: relative;
  flex: none;
  display: block;
  /* Maat uit de aangeleverde SVG: de bol is 0,2274 x de kaphoogte van SIR,
     omgerekend met de kaphoogte van LEMON MILK (0,7988 em). */
  width: .1816em; height: .1816em;
  /* In de SVG staat de onderkant van de bol op de basislijn van de R (0,002
     kaphoogte eronder, dus verwaarloosbaar). De onderrand van het regelvak
     ligt .005em ONDER die basislijn, dus tilt deze marge de bol precies
     terug tot op de basislijn. */
  margin-bottom: .005em;
  padding: 0;
  background: none;
  transition: transform .3s var(--ease);
}
/* De bol zit in een pseudo-element, NIET op de knop zelf: een masker snijdt
   ook de aanraakzone weg, waardoor het vergrote tikvlak hieronder verdween.
   De streepjes zijn UITGESPAARD, zodat de achtergrond erdoorheen komt in
   plaats van donkere balkjes. */
.hero__dot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--butter);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 0a50 50 0 1 0 .1 0zM27 33h46a4.5 4.5 0 0 1 0 9H27a4.5 4.5 0 0 1 0-9zm0 13h46a4.5 4.5 0 0 1 0 9H27a4.5 4.5 0 0 1 0-9zm0 13h46a4.5 4.5 0 0 1 0 9H27a4.5 4.5 0 0 1 0-9z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 0a50 50 0 1 0 .1 0zM27 33h46a4.5 4.5 0 0 1 0 9H27a4.5 4.5 0 0 1 0-9zm0 13h46a4.5 4.5 0 0 1 0 9H27a4.5 4.5 0 0 1 0-9zm0 13h46a4.5 4.5 0 0 1 0 9H27a4.5 4.5 0 0 1 0-9z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Als punt is de bol klein, maar hij blijft de menuknop: dit onzichtbare
   vlak houdt hem overal minstens 44 px tikbaar. Werkt alleen omdat de knop
   zelf niet gemaskeerd is. */
.hero__dot::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
.hero__dot:hover { transform: scale(1.08); }
/* De balkjes zitten in het masker; het span is er nog voor schermlezers. */
.hero__dot > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.hero__tagline {
  display: flex;
  flex-direction: column;
  /* Rechts uitgelijnd op de RECHTERRAND VAN DE R, niet op de bol — zo staat
     het in de voorstelling. Dat is de bol (.129em) plus de tussenruimte
     (.01em) eraf, en de negatieve letterafstand achter de R (.02em) er weer
     bij, want die zit nog in het regelvak van "SIR".
     Percentage rekent op .hero__center, dat exact zo breed is als het
     woordmerk. */
  align-items: flex-end;
  text-align: right;
  margin-right: calc(var(--wm) * .225);
  margin-top: clamp(.5rem, 1.5vh, 1.25rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .5rem + 2.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.hero__tagline strong { font-weight: 800; }
.hero__tagline span { font-weight: 300; }
.hero__tagline { color: var(--vanille); }

.hero__address {
  padding-inline: var(--pad-x);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(.72rem, .6rem + .35vw, 1rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}
/* Het adres linkt naar de kaart, maar zonder streep eronder: de hero moet
   rustig blijven. Het geel bij hover en focus maakt duidelijk dat het klikt;
   de focusring van de browser blijft staan voor wie met het toetsenbord werkt. */
.hero__address a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease);
}
.hero__address a:hover,
.hero__address a:focus-visible { color: var(--butter); }


/* Op een staand scherm past een LIGGENDE foto alleen volledig in beeld als
   het kader een band wordt: op 375x812 zou dat 375x265 zijn met 273 px rood
   boven en onder, dus twee derde leeg. Daar vult de hero daarom het scherm en
   valt er een deel van de foto weg (ongeveer 60% blijft zichtbaar).
   Een staande uitsnede van de foto zou dit oplossen; die is er nog niet. */
@media (max-width: 47.99em) {
  .hero__frame {
    width: 100%;
    aspect-ratio: auto;
    min-height: 100svh;
  }
  /* De staande foto heeft de bovenrand van de kom op 47,9% van de hoogte. In
     de mockup ligt de basislijn van SIR op 41,1% en eindigt de tagline op
     46,4%, dus net erboven. Gecentreerd in de flow kwam SIR op 53,3% en viel
     de tekst over de kom. Daarom hier absoluut geplaatst: de basislijn ligt
     0,845 em onder de bovenkant van het woordmerk (line-height .85 met de
     metriek van LEMON MILK), dus die aftrekken van 41,1svh. */
  .hero__center {
    position: absolute;
    left: 0; right: 0;
    top: calc(41.1svh - .845 * var(--wm));
    flex: none;
    --wm: min(42cqw, 58svh);
  }
  .hero__address { margin-top: auto; }
}

/* De hero op de maten uit de voorstelling (SIR WEBSITE VOORSTELLING (2)),
   programmatisch opgemeten op de gele pixels van het woordmerk in een beeld
   van 2000x1414:
     SIR   kaptop 15,42% en basislijn 60,33% van de hoogte
           kaphoogte 31,75% van de breedte -> korps 40,34%
     geel  inkt van 12,20% tot 87,70% van de breedte (de bol is de rechterrand)
     links inkt vanaf 5,80% van de hoogte, linkerrand op 7,25% van de breedte
     adres inkt tot 94,98% van de hoogte
   Alles in cqw, dus t.o.v. het kader; de kaderhoogte is de breedte / 1,4144.
   Het woordmerk staat absoluut geplaatst: gecentreerd in de flow kwam de
   basislijn op 68,51% terecht, ruim 8 procentpunt te laag. */
@media (min-width: 48em) {
  .hero__frame { padding-top: 3.92cqw; }
  .hero__top { padding-inline: 7.25%; }
  .hero__center {
    --wm: 40.34cqw;
    position: absolute;
    left: 0; right: 0;
    /* basislijn op 42,65cqw (= 60,33% van de hoogte), minus de
       basislijn-afstand van 0,845 em bij line-height .85 */
    top: calc(42.65cqw - .845 * var(--wm));
    flex: none;
  }
  .hero__address { margin-top: auto; }
}

/* ============================================================
   2 / 4 / 5 / 6. SPLIT-SECTIES
   ============================================================ */
.split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--vanille);
}

.split__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.5rem, 9vh, 7rem) var(--pad-x);
  /* Licht paneel met een iets diepere tint als schild — zo staat het in
     de voorstelling. */
  background: var(--vanille);
  overflow: hidden;
}
/* Het merkteken als groot watermerk. Opgemeten in de voorstelling:
   het schild vult de VOLLEDIGE hoogte van het tekstpaneel, en zijn hart
   staat 22% van die hoogte links van de rechterrand van het paneel — in
   een smalle en een brede kolom precies hetzelfde. De translate werkt op
   de eigen breedte van het element, dus dat blijft kloppen bij elke
   kolombreedte. */
.split__text::before {
  content: '';
  position: absolute;
  z-index: 0;
  /* Maat uit de aangeleverde voorstelling: het schild is daar 121,2% van de
     kaderhoogte, begint 1,1% boven de bovenrand en steekt 33,6% van zijn
     eigen breedte voorbij de rechterrand. De vorm zelf blijft gelijk: de
     inkt in de voorstelling meet 718x579 (1,2401) en mark.png 1023x825
     (1,2400) — dezelfde verhouding, alleen groter in beeld.
     .split__text snijdt af met overflow: hidden, dus het loopt netjes
     buiten beeld en niet in de secties eronder. */
  top: -1.1%;
  right: 0;
  height: 121.2%;
  aspect-ratio: 1024 / 827;
  transform: translateX(33.6%);
  background: var(--vanille-shade);
  -webkit-mask: url('../img/mark.png') no-repeat center / contain;
  mask: url('../img/mark.png') no-repeat center / contain;
  pointer-events: none;
}
.split__card { position: relative; z-index: 1; max-width: 34rem; }
.split__card p + p { margin-top: 1.15rem; }
.split__tagline em { font-style: italic; }
.text-link { text-decoration: none; }

.split__text--end { align-items: flex-end; text-align: right; }
.split__text--end .quote-mark { margin-left: auto; }

/* Alle 31 carrouselfoto's zijn 1400x1800. Het kader krijgt diezelfde
   verhouding, met drie gevolgen: er wordt niets weggesneden (object-fit:
   cover heeft niets te croppen), elke foto staat op elk scherm even groot in
   beeld, en het kader schaalt mee met de breedte.
   De hoogte stond eerder vast op 62vh (klein scherm) of op de sectiehoogte
   (desktop). Die sectiehoogte volgt de tekstlengte, waardoor de foto's per
   sectie verschilden: 808, 777 en 716 px hoog op een venster van 1280x800.
   Het kader vult de volle kolombreedte, zodat de foto aansluit op het
   tekstpaneel waar het schild ophoudt. Dat maakt de sectie hoger dan een
   schermhoogte op brede vensters; dat is de prijs van een staande foto die
   niet gecropt mag worden. */
.split__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1400 / 1800;
}

/* Desktop: twee gelijke kolommen op volle hoogte */
@media (min-width: 60em) {
  /* Hoogte minus de header: anders valt na een sprong vanuit het menu de
     onderkant van de sectie — met de carrousel-stippen — buiten beeld. */
  .split { grid-template-columns: 1fr 1fr; min-height: calc(100svh - var(--header-h)); }
  /* Niet uitrekken tot de rijhoogte: een gestrekt grid-item krijgt een
     vaste hoogte en dan doet aspect-ratio niets meer. */
  .split__media { align-self: center; }
}

/* Mobiel: tekst altijd eerst, beeld eronder. Zo volgt op de hero meteen de
   About-tekst in plaats van opnieuw een foto, en wisselen tekst en beeld
   elkaar de hele pagina door af. Alles links uitgelijnd voor de leesbaarheid. */
@media (max-width: 59.99em) {
  .split__text { order: 1; }
  .split__media { order: 2; }
  .split__text--end { align-items: flex-start; text-align: left; }
  .split__text--end .quote-mark { margin-left: 0; }
}

/* ============================================================
   CARROUSEL
   ============================================================ */
.carousel { position: relative; height: 100%; }
.carousel__viewport { height: 100%; overflow: hidden; }
.carousel__track {
  display: flex;
  height: 100%;
  transition: transform .6s var(--ease);
}
.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
}
.carousel__slide.ph::before { transform: translate(-50%, -58%) scale(.7); }
/* Boven de stippen houden */
.carousel__slide.ph::after { bottom: clamp(3.25rem, 14%, 5rem); }

.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(2.25rem, 3vw, 2.75rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.carousel__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.carousel__arrow::before {
  content: '';
  width: .5rem; height: .5rem;
  border-top: 2px solid var(--charcoal);
  border-right: 2px solid var(--charcoal);
}
.carousel__arrow--prev { left: clamp(.75rem, 2%, 1.5rem); }
.carousel__arrow--prev::before { transform: translateX(2px) rotate(-135deg); }
.carousel__arrow--next { right: clamp(.75rem, 2%, 1.5rem); }
.carousel__arrow--next::before { transform: translateX(-2px) rotate(45deg); }

.carousel__dots {
  position: absolute;
  left: 50%; bottom: clamp(1rem, 4%, 2rem);
  z-index: 3;
  display: flex;
  gap: .55rem;
  transform: translateX(-50%);
}
.carousel__dots button {
  width: .6rem; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.carousel__dots button[aria-current='true'] { background: #fff; transform: scale(1.25); }

/* ============================================================
   3. QUOTE — korte uitspraak linksonder op een volvlak-beeld
   ============================================================ */
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding: var(--pad-y) var(--pad-x) clamp(2rem, 6vh, 3.5rem);
  background: var(--charcoal);
  overflow: hidden;
}
.quote__media { position: absolute; inset: 0; }
.quote__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(32,32,32,.35) 0%, rgba(32,32,32,.25) 55%, rgba(32,32,32,.72) 100%);
}
.quote > *:not(.quote__media):not(.quote__scrim):not(.photo-credit) { position: relative; z-index: 3; }

.quote__body { margin: 0 0 clamp(1.5rem, 4vh, 2.75rem); color: var(--butter); }
.quote__body .quote-mark {
  /* Alleen de ruimte eronder wijkt af; de maat is overal dezelfde. */
  margin-bottom: clamp(.6rem, 1.5vh, 1rem);
}
.quote__body p {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.9rem);
  line-height: 1.25;
}
.quote__sir {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--butter);
}

/* "SIR." en de fotocredit stonden los van elkaar: de credit hing absoluut
   onderaan de sectie, waardoor de basislijnen ruim 30 px uiteenliepen. In een
   rij met align-items: baseline delen ze een basislijn, op elke
   schermbreedte en zonder vaste waarden. */
.credit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2rem;
}
/* In de rij hoort de credit mee te lopen in plaats van absoluut te staan. */
.credit-row .photo-credit {
  position: static;
  right: auto;
  bottom: auto;
}

/* Fotocredit — klein, rechtsonder, zoals in de voorstelling */
.photo-credit {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(1.25rem, 3vh, 2rem);
  z-index: 3;
  font-size: .8rem;
  letter-spacing: .02em;
  /* Bedoeld als watermerk: net leesbaar, nooit een element dat aandacht
     vraagt. Vandaar de lage dekking op de hele regel. */
  color: rgba(255, 255, 255, .32);
}
.photo-credit strong { font-weight: 600; color: rgba(255, 255, 255, .38); }
/* De naam van de fotograaf in het geel, even ingehouden als de rest. */
.photo-credit__name { color: var(--butter); opacity: .38; }

/* ============================================================
   6. CONTACT & BOOKING — donker, over de Porsche
   ============================================================ */
.booking {
  position: relative;
  padding: calc(var(--pad-y) + 1rem) var(--pad-x) calc(var(--pad-y) + 2rem);
  background: var(--charcoal);
  overflow: hidden;
}
.booking__media { position: absolute; inset: 0; }
.booking__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(32,32,32,.86) 0%, rgba(32,32,32,.55) 40%, rgba(32,32,32,.45) 70%, rgba(32,32,32,.72) 100%);
}
.booking__inner { position: relative; z-index: 3; max-width: 80rem; margin-inline: auto; }

/* Dun gezet — LEMON MILK Light — met een vet &-teken en cursief "Booking",
   precies zoals de voorstelling. */
.booking__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 1rem + 5.5vw, 5rem);
  line-height: 1;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--butter);
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}
.booking__title span { font-weight: 800; }
.booking__title em { font-style: italic; font-weight: 300; }

.booking__steps {
  --step-gap: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: var(--step-gap);
}
@media (min-width: 48em) {
  .booking__steps { grid-template-columns: repeat(3, 1fr); }
}

.booking__num {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1rem + 2.5vw, 3.25rem);
  line-height: 1;
  color: var(--butter);
  margin-bottom: 1.25rem;
}

@media (min-width: 48em) {
  .booking__num { justify-content: center; }
  .booking__step:not(:last-child) .booking__num::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(50% + 2.5rem);
    width: calc(100% + var(--step-gap) - 5rem);
    height: 9px;
    transform: translateY(-50%);
    background:
      radial-gradient(circle at calc(100% - 4px) 50%, rgba(255,255,255,.75) 3.5px, transparent 4px) no-repeat,
      linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)) no-repeat center / 100% 1px;
  }
}

.booking__step h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .6rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.booking__step p {
  color: rgba(255, 255, 255, .93);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
@media (min-width: 48em) {
  .booking__step h3, .booking__step p { text-align: center; }
}

.booking__cta { margin-top: clamp(2.5rem, 6vh, 4rem); text-align: center; }

/* ============================================================
   8. REVIEWS — We Served. They Approved.
   Lichte, kleurige sectie: titel rechtsboven, review eronder,
   "SIR." gedempt linksonder — zoals de voorstelling.
   ============================================================ */
.reviews {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: calc(var(--header-h) + 1.5rem) var(--pad-x) clamp(2rem, 5vh, 3rem);
  color: #fff;
  overflow: hidden;
}
.reviews__media { position: absolute; inset: 0; }
/* Bewust licht: het groen mag doorkomen. Alleen rechts iets verdiept zodat
   de tekst daar leesbaar blijft. */
.reviews__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, rgba(32,32,32,.10) 0%, rgba(32,32,32,.20) 45%, rgba(38,44,32,.52) 100%);
}
/* De reviewsfoto is een dronebeeld met de tafel linksonder in het midden.
   Bij een volvlak-sectie snijdt cover mee met de schermvorm; dit houdt de
   tafel in beeld in plaats van het midden van de foto. */
.reviews__media > img { object-position: 45% 78%; }

.reviews > *:not(.reviews__media):not(.reviews__scrim):not(.shield-overlay):not(.photo-credit) { position: relative; z-index: 3; }

/* Titelblok rechtsboven */
.reviews__lede { align-self: flex-end; max-width: min(30rem, 82%); text-align: right; }
/* REVIEWS deelt de maat met de andere sectietitels (zie .section-title
   hierboven); hier staat alleen wat eigen is aan deze sectie, want het woord
   ligt op een foto. Het volledig cursieve font-style is eruit: net als bij de
   andere titels staat nu alleen de eerste letter schuin. */
.reviews__kicker {
  color: var(--butter);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}
.reviews__lede h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.2rem, .9rem + 1.5vw, 2.1rem);
  line-height: 1.25;
  color: var(--vanille);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

/* Review + pijltje, rechts uitgelijnd onder de titel */
.reviews__panel {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: min(30rem, 90%);
  margin-top: clamp(2rem, 8vh, 5rem);
}
.reviews__quote { flex: 1; text-align: left; }
.reviews__viewport { display: grid; }
.reviews__viewport blockquote {
  grid-area: 1 / 1;
  /* Niet uitrekken tot de celhoogte: de cel is zo hoog als de langste review,
     dus zonder dit zou de ballon van een korte review veel te groot staan. */
  align-self: start;
  margin: 0;
  padding: clamp(.9rem, 2.2vw, 1.35rem) clamp(1.05rem, 2.8vw, 1.6rem);
  /* Doorschijnende ballon in het donkergrijs van de bovenbalk (#202020).
     Achter dit paneel is de foto gemiddeld donker (luminantie 0,08), maar er
     staan zonnige plekken tot 0,91 en daar viel de tekst weg. De tekst is
     botergeel (luminantie 0,875), dus voor 4,5:1 op die lichtste plek is
     minstens 84,2% dekking nodig; 86% geeft 4,9:1 en laat de foto er nog
     zichtbaar door schemeren. */
  background: rgba(32, 32, 32, .86);
  border-radius: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.reviews__viewport blockquote.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s var(--ease), visibility 0s linear 0s;
}
.reviews__viewport p {
  font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
  line-height: 1.55;
  color: var(--butter);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}

.reviews__next {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(2.25rem, 3vw, 2.75rem);
  aspect-ratio: 1;
  background: var(--butter);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: transform .25s var(--ease);
}
.reviews__next:hover { transform: scale(1.08); }
.reviews__next::before {
  content: '';
  width: .5rem; height: .5rem;
  border-top: 2px solid var(--charcoal);
  border-right: 2px solid var(--charcoal);
  transform: translateX(-2px) rotate(45deg);
}

/* Groot en gedempt linksonder, net als in de voorstelling */
/* De rij duwt zichzelf naar de onderkant van de reviews-kolom; dat deed
   .reviews__sir eerst zelf, maar in een rij werkt margin-top op de kruisas
   en zou het de basislijn-uitlijning breken. */
.reviews .credit-row { margin-top: auto; }
.reviews__sir {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 2rem + 4.5vw, 7rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--butter);
}

@media (max-width: 47.99em) {
  .reviews__lede, .reviews__panel { align-self: stretch; width: auto; max-width: none; }
}

/* ============================================================
   8. FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: var(--charcoal);
  color: #fff;
}
/* Het kader uit de voorstelling: 842,25 x 595,5. Alle maten en posities
   erbinnen staan in procenten van DIT kader (cqw / %), zodat de verhoudingen
   op elke breedte identiek blijven aan het ontwerp.
   Opgemeten in de voorstelling, als deel van de kaderbreedte:
     kicker      basislijn 17,69% van de hoogte, korps 2,94%
     woordmerk   basislijnen 40,35 / 62,82 / 85,28% van de hoogte
                 inkt van 5,23% tot 39,02%, dus hart op 22,12%
     contact     basislijnen 91,10 / 93,68%, rechterrand 7,15% van de rand
     schild      links 25,32%, boven -0,75%, breed 96%
   De bovenmarge van 9,806% zet de kicker op zijn basislijn; de regelafstand
   van het woordmerk (line-height 0,831) levert de andere basislijnen dan
   vanzelf. */
.footer__poster {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 842.25 / 595.5;
  display: flex;
  flex-direction: column;
  /* GEEN horizontale padding: cqw rekent op de content-box, dus met padding
     zouden alle korpsen en percentages een fractie te klein uitvallen. De
     zijmarges staan daarom op de kinderen zelf. */
  /* 10,19% zet de basislijn van de kicker op 17,69% van de hoogte; met
     line-height 1 ligt die basislijn op 0,92em onder de kaderrand. De
     regelafstand van het woordmerk levert de rest. */
  padding: 10.19% 0 4.11%;
  overflow: hidden;
}
.footer__media { position: absolute; inset: 0; }
.footer__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(115deg, rgba(32,32,32,.74) 0%, rgba(32,32,32,.42) 45%, rgba(32,32,32,.55) 100%),
    linear-gradient(180deg, rgba(32,32,32,0) 45%, rgba(32,32,32,.5) 100%);
}

.footer__inner { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; }

/* De kicker hoort gecentreerd boven het wordmark-blok. Deze wrapper is
   precies zo breed als dat blok, zodat centreren daarop uitlijnt en niet
   op de volle paginabreedte. */
/* Hart van het blok op 22,12% van de kaderbreedte: vak van 40% breed dat op
   2,12% begint. 40% is ruim genoeg voor de breedste regel (de RECHTE "YES",
   37,8%), zodat er niets afbreekt. */
.footer__lede {
  /* Eén maat als bron voor het hele blok. De kicker is een vaste fractie
     hiervan, dus de verhouding tussen "What's on the menu?" en SIR YES SIR
     blijft overal gelijk — ook waar de maat hieronder wordt overschreven. */
  --wm-size: 19.1cqw;
  /* Verhouding uit de voorstelling, gemeten op de KAPHOOGTE: die van de
     kicker is 15,719 en die van het woordmerk 119,156, dus 0,13192.
     De kaphoogte is hier de juiste ankermaat, want de kicker staat in de
     voorstelling in een ander font: bij deze maat zou de letterafstand -0,05em
     moeten zijn om de glyph-afstanden te halen, terwijl de site +0,06em
     gebruikt. Op de glyph-afstanden rekenen gaf daardoor 0,1068 — 24% te
     klein. Kaphoogte is ook wat het oog als grootte leest. */
  --kicker-size: calc(var(--wm-size) * .13192);
  width: 40%;
  margin-left: 2.12%;
}

.footer__kicker {
  /* Gecentreerd op het wordmark-blok, zoals in de voorstelling: het midden
     van de kicker (186,7) valt daar samen met dat van het blok (186,3).
     .footer__lede is precies zo breed als het blok, dus centreren lijnt
     daarop uit en niet op de paginabreedte. */
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--kicker-size);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  /* Vangt de hogere kicker op, zodat het woordmerk op zijn basislijnen blijft. */
  margin-bottom: -.13%;
}

.footer__wordmark {
  display: grid;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  /* Maat uit de voorstelling. Uit de glyph-afstanden volgt fontgrootte 161
     op een kader van 842,25 breed, dus 19,1vw, bij een letterafstand van 0.
     De regelafstand daar is 133,78, oftewel line-height 0,831. */
  font-size: var(--wm-size);
  line-height: .831;
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--butter);
}

/* "SIR" blijft cursief, "YES" staat recht. Eigen class in plaats van
   nth-child: die zou stil op het verkeerde woord gaan werken als de tekst
   ooit wijzigt. */
.footer__yes { font-style: normal; }

.footer__contact {
  margin-top: auto;
  margin-right: 7.15%;
  padding-top: 1.5rem;
  display: grid;
  /* Krap op elkaar: de regelhoogte van 1,6 plus de eigen ruimte hieronder
     gaf 12 px tussen de teksten. De verticale ruimte van de links blijft
     staan, want die houdt het tikvlak boven de 24 px. */
  gap: 0;
  justify-items: end;
  text-align: right;
  font-size: 1.63cqw;
  line-height: 1.122;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
/* Deze twee regels zijn de call-to-action van de pagina; ze moeten er
   onmiskenbaar klikbaar uitzien, ook boven op een foto. */
.footer__contact a {
  position: relative;
  display: inline-block;
  /* Geen eigen ruimte: die kwam bovenop de regelafstand en maakte de twee
     regels verder uiteen dan in de voorstelling. */
  padding: 0;
  /* Geen streep eronder; het geel bij hover en focus maakt duidelijk dat het
     klikt, en de focusring van de browser blijft staan. */
  text-decoration: none;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
/* Houdt de regels aantikbaar nu hun eigen ruimte eruit is; het vlak telt niet
   mee in de opmaak, dus de regelafstand blijft die van de voorstelling. */
.footer__contact a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -4px; bottom: -4px;
}
.footer__contact a:hover,
.footer__contact a:focus-visible {
  color: var(--butter);
}

.footer__legal {
  position: relative;
  z-index: 3;
  padding-inline: var(--pad-x);
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
/* Bedrijfsgegevens: verplichte vermeldingen, gescheiden door een puntje. */
.footer__company { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.footer__company span + span::before { content: '·'; margin-right: 1rem; opacity: .55; }
.footer__links { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; }
.footer__legal a { position: relative; text-decoration: none; }
/* De kleine lettertjes zijn maar 18 px hoog; dit onzichtbare vlak brengt het
   aanraakvlak op 26 px zonder de opmaak te veranderen. */
.footer__legal a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -4px; bottom: -4px;
}
.footer__legal a:hover,
.footer__legal a:focus-visible { color: var(--butter); }

@media (max-width: 47.99em) {

  /* De 19,1vw uit de voorstelling komt van een LIGGEND kader. Op een staand
     scherm valt het woordmerk daarmee veel te klein uit: het vulde 25% van de
     sectiehoogte tegen 66% in de voorstelling, en het blok werd zelfs smaller
     dan de kicker erboven (145 px tegen 175 px), waardoor die eroverheen hing.
     Hier bepaalt de breedte de maat: de breedste regel is "YES", en die staat
     RECHT — inkt 1,980 em, breder dan de cursieve 1,874. Deler 2,06 laat hem
     de tekstkolom vullen met ongeveer 4% lucht. */
  /* Het kader van de voorstelling is LIGGEND (1,414). Op een telefoon zou dat
     een strook van 265 px hoog worden, met een kicker van 11 px en contact van
     6 px: exact in verhouding, maar onleesbaar. Onder 48em laten we het kader
     dus los en schaalt alles weer op leesbaarheid. */
  /* Maten uit de mobiele mockup, opgemeten op de gele pixels van het
     woordmerk (1080x1920):
       SIR  inkt 21,7-36,8% hoog, 20,6-77,0% breed, hart 48,8%
       YES  inkt 38,2-53,3% hoog, 16,3-82,4% breed, hart 49,4%
       SIR  inkt 54,8-69,9% hoog, 20,6-76,9% breed, hart 48,8%
     Daaruit: kaphoogte 26,9% van de breedte -> korps 34,2%; regelafstand
     16,55% van de hoogte -> line-height 0,861; de regels staan GECENTREERD.
     Het kader vult het scherm, zodat die percentages op het scherm kloppen. */
  .footer__poster {
    aspect-ratio: auto;
    min-height: 100svh;
    /* Geen horizontale padding: cqw rekent op de content-box. */
    padding: max(var(--header-h), 4vh) 0 clamp(1.25rem, 3vh, 2rem);
  }
  .footer__lede {
    /* 34,2% van de breedte is de maat uit de voorstelling. Op een scherm dat
       breed maar laag is — een venster in liggende stand — wordt het woordmerk
       daarmee hoger dan het kader: de derde regel liep eronderuit en botste op
       de contactregel. De tweede grens rekent daarom op de hoogte.
       Afgeleid: de inktbovenkant staat op 21,7% van de hoogte, het blok zelf is
       2,546 maal de korpsmaat hoog, en onderaan gaat er een vaste strook af
       voor de koptekst, de contactregel en de ondermarge (samen ~170px).
       Op een telefoon in staande stand is de breedte altijd de kleinste van de
       twee, dus daar verandert er niets. */
    --wm-size: max(2rem, min(34.2cqw, calc((78.3svh - 170px) / 2.546)));
    position: absolute;
    left: 0; right: 0;
    /* Zet de inktbovenkant van het woordmerk op 21,7% van de hoogte. Met
       line-height .861 ligt die inktrand 0,0634 em onder de bovenkant van het
       regelvak; daarboven staan de kicker (0,13192 em) en zijn ondermarge
       (0,04 em). Samen 0,23532 em van de bronmaat. */
    top: calc(21.7svh - .23532 * var(--wm-size));
    width: auto;
    margin-left: 0;
  }
  .footer__wordmark { line-height: .861; }
  .footer__kicker { margin-bottom: calc(var(--wm-size) * .04); }
  .footer__contact {
    margin-top: auto;
    margin-right: 7.15%;
    font-size: clamp(.9rem, .85rem + .3vw, 1.1rem);
    line-height: 1.3;
  }

  /* Onder elkaar in plaats van doorlopend: bij afbreken kwam het puntje aan
     het begin van een regel te staan. */
  .footer__company { display: grid; gap: .35rem; }
  .footer__company span + span::before { content: none; }
}

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
/* Bewust gekoppeld aan .js: zonder JavaScript blijft alle tekst zichtbaar. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   TOEGANKELIJKHEID — minder beweging
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* .js-prefix nodig: anders verliest deze regel het van .js .reveal */
  .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   JURIDISCHE PAGINA'S (privacy, juridisch)
   Eén leeskolom, dezelfde huisstijl, geen franje.
   ============================================================ */
.legal {
  max-width: 46rem;
  margin-inline: auto;
  padding: calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem)) var(--pad-x) clamp(3rem, 8vh, 6rem);
}
.legal__kicker {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .75rem;
}
.legal h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 1.25rem + 4vw, 4rem);
  line-height: .95;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.legal h1::first-letter { font-style: italic; }
.legal__updated { color: var(--ink-muted); font-size: .9rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); }

.legal h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: clamp(2rem, 5vh, 3rem) 0 .75rem;
}
.legal h2::first-letter { font-style: italic; }
.legal h3 { font-weight: 700; font-size: 1.05rem; margin: 1.5rem 0 .35rem; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 1rem; }
.legal ul { list-style: none; display: grid; gap: .5rem; margin-top: .75rem; }
.legal ul li { padding-left: 1.35rem; position: relative; }
.legal ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--olive);
}
.legal a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.legal a:hover { color: var(--olive); }

/* Bedrijfsgegevens: één blok dat op elke juridische pagina terugkomt */
.legal__card {
  margin-top: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--vanille-shade);
  border-radius: .75rem;
}
.legal__card dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; margin: 0; }
.legal__card dt { font-weight: 700; }
.legal__card dd { margin: 0; }
@media (max-width: 34em) {
  .legal__card dl { grid-template-columns: 1fr; gap: .1rem; }
  .legal__card dd { margin-bottom: .6rem; }
}

.legal__back {
  display: inline-block;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--butter);
  padding-bottom: .2rem;
}
.legal__back:hover { border-color: var(--olive); }