/* ————————————————————————————————————————————————
   Madame Pommes — madamepommes.com
   Midnight Blue #003E54 · Crème #EDE1CF · serif only
   ———————————————————————————————————————————————— */

/* Instrument Serif — lokaal gehost (geen Google-request; AVG) */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Zodiak (Fontshare, ITF Free Font License) — de display-stem in de Denton-rol */
@font-face {
  font-family: "Zodiak";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/zodiak-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Zodiak";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/zodiak-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Zodiak";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/zodiak-bold.woff2") format("woff2");
}

/* EB Garamond (OFL) — de tekst-stem in de Inferi-rol (variabel, 400–800) */
@font-face {
  font-family: "EB Garamond";
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/eb-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/eb-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/eb-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/eb-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blue: #003E54;
  --creme: #F8F5EF;  /* gebroken wit — warme afwijking van het manual-crème #EDE1CF, op verzoek */
  --white: #FDFCFA;
  --ink: var(--blue);

  --hair-on-creme: rgba(0, 62, 84, 0.22);
  --hair-on-blue: rgba(237, 225, 207, 0.28);

  /* Twee stemmen (manual p.10): display in de Denton-rol, tekst in de Inferi-rol.
     Gratis en commercieel gelicenseerd: Zodiak (Fontshare FFL) + EB Garamond (OFL).
     Terug naar de manual-fallback? Zet beide op "Instrument Serif". */
  --font-display: "Zodiak", "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-text: "EB Garamond", "Instrument Serif", Georgia, "Times New Roman", serif;
  --font: var(--font-text);

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --pad-x: clamp(1.25rem, 3.6vw, 3.5rem);
  --section: clamp(7rem, 12.6vw, 12rem);
  --wide: 1440px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 90%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--creme);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto laat de breedte-afmetingen uit de HTML meeschalen; componenten
   die zelf een hoogte zetten (object-fit-vlakken) overrulen dit gewoon. */
img, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--blue); color: var(--creme); }

:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

.skip-link {
  position: fixed; top: -4rem; left: var(--pad-x); z-index: 100;
  background: var(--blue); color: var(--creme);
  padding: 0.6rem 1.2rem; font-size: 0.85rem;
  transition: top 0.25s var(--ease-out);
}
.skip-link:focus-visible { top: 1rem; }

/* Tekst die het oog niet ziet maar een schermlezer wel voorleest. */
.alleen-voorlezer {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ——— Type utilities ——— */

.eyebrow {
  font-size: clamp(0.66rem, 0.62rem + 0.2vw, 0.78rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.8;
}

.body {
  /* EB Garamond heeft een kleinere x-hoogte dan Instrument Serif — één maatje erbij */
  font-size: clamp(1.14rem, 1.08rem + 0.34vw, 1.32rem);
  line-height: 1.62;
  max-width: 46ch;
}

/* Display-stem (straks Denton): koppen, citaten, cijfers, de veil-titel */
.hero-title, .invite-title, .statement-text,
.chapter-content h2, .chapter-line, .chapter-hero-content h1,
.page-hero h1, .veil-name em,
.collection-copy h2, .collection-item h3,
.standard-row h3, .partner-body h2, .soon-mark,
.pillar h3, .spec-num, .tile-word-text,
.manifest-quote .pline-inner, .promesse-lines .pline-inner,
.histoire-copy .body-lg, .contact-mail,
.vig-copy h3, .vignet-copy h3, .world-head h2 {
  font-family: var(--font-display);
}

em { font-style: italic; }

/* ——— Preloader ——— */

.loader {
  position: fixed; inset: 0; z-index: 60;
  background: var(--creme);
  display: grid; place-items: center;
}
.loader.done { display: none; }
.loader-inner { display: grid; justify-items: center; gap: 1.75rem; }
.loader-lys { width: clamp(120px, 16vw, 170px); opacity: 0; }
.loader-rule {
  width: 120px; height: 1px; background: var(--hair-on-creme);
  transform: scaleX(0);
}

/* ——— Header ——— */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem var(--pad-x);
  color: var(--white);
  /* Transform loopt via JS mee met de scroll — geen CSS-transitie erop */
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out), padding 0.35s var(--ease-out);
}
.brand { position: relative; width: clamp(79px, 8.1vw, 106px); justify-self: center; }
.brand img { width: 100%; transition: opacity 0.45s var(--ease-out); }
.brand-blue { position: absolute; inset: 0; opacity: 0; }

.site-nav { display: flex; gap: clamp(1.5rem, 3vw, 3rem); justify-self: center; }
.site-nav a, .lang a {
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
  position: relative; padding-block: 0.3rem;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.4s var(--ease-expo);
}
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }

.lang { justify-self: end; display: flex; align-items: baseline; gap: 0.65rem; }
.lang a { opacity: 0.55; transition: opacity 0.3s; }
.lang a[aria-current="true"], .lang a:hover { opacity: 1; }
.lang-sep { opacity: 0.4; font-size: 0.74rem; }

/* ——— Menu-knop (linksboven) + menu-overlay ——— */
.menu-knop {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem; margin-left: -0.7rem;
  background: none; border: 0; cursor: pointer;
  color: currentColor;
  font: inherit;
}
.mk-lijnen { display: inline-flex; flex-direction: column; gap: 7px; }
.mk-lijnen span {
  display: block; width: 26px; height: 1px; background: currentColor;
  transition: transform 0.45s var(--ease-expo);
}
.menu-knop[aria-expanded="true"] .mk-lijnen span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-knop[aria-expanded="true"] .mk-lijnen span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mk-tekst {
  font-family: "Zodiak", Georgia, serif;
  font-size: 1.08rem;
  letter-spacing: 0.015em;
  line-height: 1;
}

/* Crèmedoek met een hairline-ruggengraat, naar Tremezzo's voorbeeld */
.site-menu {
  position: fixed; inset: 0; z-index: 49;
  background: var(--creme);
  display: grid; align-items: center; justify-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.site-menu.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.5s var(--ease-out);
}
.menu-kolommen {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  align-items: center; gap: clamp(2.5rem, 6vw, 6.5rem);
  width: 100%;
  padding: clamp(5rem, 12vh, 8rem) var(--pad-x) clamp(3rem, 8vh, 5rem);
}
/* Links: de hoofdstukken, groot en gecentreerd in hun helft */
.menu-hoofd { display: grid; gap: clamp(0.5rem, 1.8vh, 1.2rem); justify-items: start; padding-left: clamp(1.5rem, 6vw, 8rem); }
.menu-hoofd a {
  font-family: "Zodiak", Georgia, serif;
  font-size: clamp(2.4rem, 4.3vw, 4.2rem);
  line-height: 1.12;
  color: var(--blue);
  transition: filter 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
/* Tremezzo-gebaar: wat je niet aanwijst, raakt uit focus */
.menu-hoofd:hover a:not(:hover) { filter: blur(5px); opacity: 0.45; }
/* De ruggengraat met het wisselende beeld erop */
.menu-spine {
  position: relative;
  width: 1px; height: min(60vh, 540px);
  background: var(--hair-on-creme);
}
.menu-beeld {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(245px, 23.2vw, 361px);
  max-width: none;   /* de ruggengraat is 1px breed; het beeld mag eroverheen */
  aspect-ratio: 3 / 4; object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.site-menu.open .menu-beeld.zichtbaar { opacity: 1; }
/* Rechts: het praktische, klein en links uitgelijnd */
.menu-zij { display: grid; gap: 1.6rem; justify-items: start; color: var(--blue);
  justify-self: end; padding-right: clamp(1.5rem, 6vw, 8rem); }
.menu-zij a {
  font-family: "Zodiak", Georgia, serif;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  color: var(--blue); opacity: 0.85;
  transition: opacity 0.3s var(--ease-out);
}
.menu-zij a:hover { opacity: 1; }
.menu-adres { font-size: 0.78rem; letter-spacing: 0.08em; opacity: 0.55; }
/* Uitnodiging in de zijkolom: gewoon een regel, zonder lijn of vlak */
.menu-zij .menu-cta {
  color: var(--blue); background: none;
  padding: 0; margin-bottom: 0;
  border-bottom: 0;
}
.menu-sociaal { display: flex; align-items: center; gap: 1.1rem; }
.menu-wa svg, .menu-ig svg { width: 22px; height: 22px; display: block; }
/* De regels komen zachtjes op wanneer het doek staat */
.menu-hoofd a, .menu-zij > * {
  transform: translateY(14px); opacity: 0;
  transition: transform 0.6s var(--ease-expo), opacity 0.5s var(--ease-out),
              filter 0.45s var(--ease-out);
}
.site-menu.open .menu-hoofd a, .site-menu.open .menu-zij > * { transform: translateY(0); opacity: 1; }
.site-menu.open .menu-zij a { opacity: 0.85; }
.site-menu.open .menu-hoofd a:nth-child(1) { transition-delay: 0.05s; }
.site-menu.open .menu-hoofd a:nth-child(2) { transition-delay: 0.1s; }
.site-menu.open .menu-hoofd a:nth-child(3) { transition-delay: 0.15s; }
.site-menu.open .menu-hoofd a:nth-child(4) { transition-delay: 0.2s; }
.site-menu.open .menu-zij > *:nth-child(1) { transition-delay: 0.22s; }
.site-menu.open .menu-zij > *:nth-child(2) { transition-delay: 0.27s; }
.site-menu.open .menu-zij > *:nth-child(3) { transition-delay: 0.32s; }
.site-menu.open .menu-zij > *:nth-child(4) { transition-delay: 0.37s; }
.site-menu.open .menu-adres { opacity: 0.55; }
/* Open menu: de balk wordt doorzichtig op het crème, de stem kleurt blauw
   (dubbelklasse-varianten winnen ook van de .scrolled-balk op subpagina's) */
.site-header.menu-open,
.site-header.scrolled.menu-open {
  background: transparent; color: var(--blue); box-shadow: none;
}
.site-header.menu-open .brand-white,
.site-header.scrolled.menu-open .brand-white { opacity: 0; }
.site-header.menu-open .brand-blue,
.site-header.scrolled.menu-open .brand-blue { opacity: 1; }
@media (max-width: 760px) {
  .menu-kolommen { grid-template-columns: 1fr; justify-items: center; gap: 2.4rem; }
  .menu-spine { display: none; }
  /* Op breed scherm staan de hoofdstukken links en de contactgegevens rechts,
     elk met een inspring naar buiten. In één kolom duwen die twee de blokken
     naar tegengestelde kanten; hier gaat alles op dezelfde middenas. */
  .menu-hoofd { justify-items: center; text-align: center; padding-left: 0; }
  .menu-zij {
    justify-items: center; text-align: center; gap: 0.8rem;
    justify-self: center; padding-right: 0;
  }
}

/* Bij scrollen: donkerblauwe balk zoals de oude site — crème stem, wit woordmerk */
.site-header.scrolled {
  background: var(--blue);
  color: var(--creme);
  box-shadow: 0 1px 0 var(--hair-on-blue);
  padding-block: 1rem;
}

/* ——— Hero ——— */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--white);
  background: #12242c; /* holds the frame while the film loads */
}
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Filmische low-key gradatie: diepe zwarten, rijk contrast */
  filter: grayscale(1) contrast(1.1) brightness(0.86);
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(0, 10, 14, 0) 46%, rgba(0, 10, 14, 0.42) 100%),
    linear-gradient(180deg, rgba(0, 10, 14, 0.66) 0%, rgba(0, 10, 14, 0.24) 34%,
                            rgba(0, 14, 20, 0.3) 64%, rgba(0, 10, 14, 0.74) 100%);
}
.hero-content { position: relative; text-align: center; padding: 0 var(--pad-x); }
.hero-kicker {
  font-size: clamp(0.68rem, 0.62rem + 0.25vw, 0.82rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(1.2rem, 2.4vh, 2rem);
}
.hero-title {
  font-weight: 400;
  font-size: clamp(2.31rem, 6.2vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.line { display: block; overflow: hidden; }
.line-inner { display: inline-block; will-change: transform; }
.sline { display: block; overflow: hidden; }
.sline-in { display: inline-block; will-change: transform; }
.hero-eyebrow { margin-top: 2.4rem; opacity: 0.82; }

.scroll-cue {
  position: absolute; bottom: 0; left: 50%;
  width: 1px; height: 96px; overflow: hidden;
}
.scroll-cue span {
  position: absolute; inset: 0; background: rgba(253, 252, 250, 0.55);
  animation: cue 3.4s var(--ease-expo) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ——— Statement ——— */

.statement {
  padding: var(--section) var(--pad-x) calc(var(--section) * 0.8);
  display: grid; justify-items: center; text-align: center;
}
.ornament { width: clamp(140px, 15vw, 190px); }
.statement-text {
  margin-top: 3.2rem;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.34;
  max-width: 34ch;
  text-wrap: balance;
}

/* ——— Pillars ——— */

.pillars { padding: 0 var(--pad-x) var(--section); }
.pillars-grid {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hair-on-creme);
}
.pillar { padding: 3.2rem 2.4rem 3.2rem 0; }
.pillar + .pillar { border-left: 1px solid var(--hair-on-creme); padding-left: 2.4rem; }
.pillar h3 {
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.1;
  transition: transform 0.5s var(--ease-expo);
}
.pillar .eyebrow {
  margin-top: 1rem; opacity: 0.62; max-width: 24ch;
  transition: opacity 0.45s var(--ease-out);
}
.pillar:hover h3 { transform: translateX(10px); }
.pillar:hover .eyebrow { opacity: 1; }

/* ——— Collection ——— */

.collection { background: var(--blue); color: var(--creme); }
.collection-panel {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: 5fr 6fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
  padding: var(--section) var(--pad-x);
}
.collection-mark {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
}
.collection-mark img { width: min(78%, 360px); }
.edge { position: absolute; background: var(--hair-on-blue); display: block; }
.edge-t { top: 0; left: 0; width: 100%; height: 1px; transform-origin: left center; }
.edge-b { bottom: 0; right: 0; width: 100%; height: 1px; transform-origin: right center; }
.edge-l { top: 0; left: 0; width: 1px; height: 100%; transform-origin: center top; }
.edge-r { bottom: 0; right: 0; width: 1px; height: 100%; transform-origin: center bottom; }
.collection-copy .eyebrow { opacity: 0.6; }
.collection-copy h2 {
  font-weight: 400;
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.9rem);
  line-height: 1.08;
  margin-top: 1.4rem;
  max-width: 16ch;
}
.collection-copy .body { margin-top: 1.8rem; opacity: 0.85; }
.collection .cta { margin-top: 2.8rem; }

/* ——— CTA ——— */

.cta {
  display: inline-flex; align-items: center; gap: 1.1rem;
  font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.cta i {
  position: relative; display: block;
  width: 64px; height: 1px; background: currentColor;
  transition: width 0.45s var(--ease-expo);
}
.cta i::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 9px; height: 9px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg) scale(0.8);
  transform-origin: center;
}
.cta:hover i { width: 96px; }

/* ——— World / collage ——— */

.world { background: var(--white); padding: var(--section) var(--pad-x); }
.world-head { text-align: center; }
.world-head .eyebrow { opacity: 0.6; }
.world-head h2 {
  font-weight: 400;
  font-size: clamp(2.4rem, 1.8rem + 3vw, 4.4rem);
  line-height: 1.05;
  margin-top: 1.2rem;
}
.collage {
  max-width: var(--wide); margin: clamp(4rem, 7vw, 6.5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 26px);
}
.tile { position: relative; overflow: hidden; background: rgba(0, 62, 84, 0.07); }
.tile img, .tile video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: transform 1.3s var(--ease-out);
}
.tile:hover img, .tile:hover video { transform: scale(1.035); }
.tile-stamp:hover img { transform: none; }
@media (min-width: 1025px) {
  .tile-cafe { margin-top: clamp(2rem, 4vw, 4.5rem); }
  .tile-stamp { margin-top: clamp(1.5rem, 3vw, 3rem); }
  .tile-word { margin-top: 1.5rem; }
}
.tile-video { grid-column: 1 / 6; aspect-ratio: 4 / 5; }
.tile-cafe { grid-column: 6 / 13; aspect-ratio: 16 / 10.5; align-self: end; }
.tile-word {
  grid-column: 1 / 5; aspect-ratio: 4 / 3.4; background: var(--creme);
  display: grid; place-content: center; text-align: center; gap: 1.2rem;
  padding: 2rem;
}
.tile-word-text { font-size: clamp(2.6rem, 4vw, 4rem); line-height: 1; }
.tile-word .eyebrow { opacity: 0.6; }
.tile-bucket { grid-column: 5 / 9; aspect-ratio: 3 / 4; }
.tile-stamp {
  grid-column: 9 / 13; aspect-ratio: 4 / 3.4; background: var(--blue);
  display: grid; place-items: center; padding: 2rem;
}
.tile-stamp img { width: min(52%, 200px); height: auto; object-fit: contain; filter: none; }
.tile-guests { grid-column: 4 / 10; aspect-ratio: 16 / 9; }
.world-note { text-align: center; margin-top: clamp(3rem, 5vw, 4.5rem); opacity: 0.55; }

/* ——— Promesse ——— */

.promesse {
  background: var(--blue); color: var(--creme);
  padding: calc(var(--section) * 1.15) var(--pad-x);
  text-align: center;
}
.promesse > .eyebrow { opacity: 0.6; }
.promesse-lines { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pline { overflow: hidden; }
.pline-inner {
  display: inline-block;
  font-size: clamp(2.3rem, 1.2rem + 5.6vw, 5.6rem);
  line-height: 1.14;
  will-change: transform;
}
.promesse-note {
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  opacity: 0.8;
  max-width: 52ch;
}

/* ——— Invitation ——— */

.invite {
  padding: var(--section) var(--pad-x);
  display: grid; justify-items: center; text-align: center;
}
.invite-title {
  font-weight: 400;
  font-size: clamp(2.3rem, 1.7rem + 2.5vw, 4.3rem);
  line-height: 1.12;
  margin-top: 2.55rem;
}
.invite .body { margin-top: 1.8rem; opacity: 0.85; }
.invite .cta { margin-top: 3rem; }

/* ——— Footer ——— */

/* De menukaart in lijst — optie A */
.site-footer {
  background: var(--stripe-a);
  color: var(--blue);
  padding: 0 var(--pad-x) clamp(1.8rem, 3vw, 2.6rem);
}
.site-footer > * { max-width: var(--wide); margin-inline: auto; }
/* Woordmerk links, gegevens rechts uitgelijnd */
.footer-midden {
  border-top: 1px solid var(--hair-on-creme);
  padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(2rem, 3.5vw, 3rem);
  display: grid; justify-items: start; text-align: left; gap: 0.55rem;
}
.footer-huis {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.6rem;
}
.footer-midden p, .footer-midden a { font-size: 0.92rem; line-height: 1.8; color: var(--blue); }
.footer-midden a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-wa {
  margin-top: 0.7rem; display: inline-flex;
  width: 22px; height: 22px; color: var(--blue); opacity: 0.75;
  transition: opacity 0.3s var(--ease-out);
}
.footer-wa svg { width: 100%; height: 100%; }
.footer-wa:hover { opacity: 1; }
.footer-gegevens a { color: var(--blue); }
.footer-gegevens a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* De onderste regel loopt tot in de hoeken van de pagina */
.footer-onder {
  border-top: 1px solid var(--hair-on-creme);
  margin: clamp(2.4rem, 4.5vw, 3.6rem) calc(var(--pad-x) * -1) 0;
  padding: clamp(1.2rem, 2vw, 1.5rem) clamp(1rem, 1.8vw, 1.5rem) 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.7rem;
}
.footer-sociaal { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.footer-sociaal a {
  display: inline-flex; width: 19px; height: 19px;
  color: var(--blue); opacity: 0.6;
  transition: opacity 0.3s var(--ease-out);
}
.footer-sociaal svg { width: 100%; height: 100%; }
.footer-sociaal a:hover { opacity: 1; }
.footer-onder p, .footer-onder a {
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue); opacity: 0.45;
}
.footer-onder a:hover { opacity: 0.85; }
@media (max-width: 620px) {
  .footer-midden { flex-direction: column; }
  }

/* ——— Responsive ——— */

@media (max-width: 1024px) {
  .tile-video { grid-column: 1 / 7; }
  .tile-cafe { grid-column: 7 / 13; aspect-ratio: 4 / 5; }
  .tile-word { grid-column: 1 / 7; }
  .tile-bucket { grid-column: 7 / 13; aspect-ratio: 4 / 3.4; }
  .tile-stamp { grid-column: 1 / 7; }
  .tile-guests { grid-column: 7 / 13; aspect-ratio: 4 / 3.4; }
}

@media (max-width: 860px) {
  .site-header { gap: 1rem; }
  .site-nav { gap: 1.1rem; }
  .site-nav a, .lang a, .lang-sep { font-size: 0.66rem; }
  .pillars-grid { grid-template-columns: 1fr; border-top: 0; }
  .pillar { border-top: 1px solid var(--hair-on-creme); padding: 2.2rem 0; }
  .pillar + .pillar { border-left: 0; padding-left: 0; }
  .collection-panel { grid-template-columns: 1fr; }
  .collection-mark { max-width: 420px; }
}

@media (max-width: 620px) {
  /* Header compact: knop links, merk midden, taal rechts */
  .site-header {
    gap: 1rem;
    padding-block: 1rem;
  }
  .site-header.scrolled { padding-block: 0.8rem; }
  .hero-brand img { width: min(72vw, 340px); }

  .collage { gap: 12px; }
  .tile-video, .tile-cafe, .tile-word, .tile-bucket, .tile-stamp, .tile-guests {
    grid-column: 1 / 13;
  }
  .tile-video { aspect-ratio: 4 / 5; }
  .tile-cafe { aspect-ratio: 16 / 10.5; }
  .hero-title { font-size: clamp(2.17rem, 9.7vw, 3.3rem); }
}

/* ═══════════ Deel 2 — hoofdstukken, pagina's, veil ═══════════ */

/* ——— Titelkaart-veil ——— */

.veil {
  position: fixed; inset: 0; z-index: 58;
  background: var(--creme);
  display: grid; place-items: center;
  transform: translateY(101%);
  will-change: transform;
}
.veil-name { overflow: hidden; }
.veil-name em {
  display: inline-block;
  font-size: clamp(3rem, 9vw, 6.5rem);
  color: var(--blue);
  line-height: 1.1;
}

/* ——— Ouverture & kroon: het woordmerk regeert de hero (Matrone-stijl) ——— */

.hero-top {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: grid; justify-items: center;
  gap: clamp(1rem, 2vh, 1.5rem);
  padding-top: clamp(2.2rem, 4.5vh, 3.4rem);
}
.hero-crown {
  width: clamp(150px, 15vw, 205px);
  will-change: transform;
}
.hero-nav { display: flex; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.hero-nav a {
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--white); opacity: 0.85;
  position: relative; padding-block: 0.3rem;
  transition: opacity 0.3s var(--ease-out);
}
.hero-nav a:hover { opacity: 1; }
.hero-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.4s var(--ease-expo);
}
.hero-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }

/* Op home draagt de ouverture het merk naar het midden van de balk;
   de balk zelf verschijnt via de choreografie (GSAP), niet via scroll. */
.hero-brand {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  pointer-events: none;
}
.hero-brand img {
  width: clamp(252px, 40vw, 486px);
  opacity: 0;
  will-change: transform;
}

/* ——— Hoofdstukken (home) ——— */

/* Staande kaartjes naast elkaar — het aantal volgt de inhoud */
.chapters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  max-width: var(--wide);
  margin: 0 auto;
  padding: calc(var(--section) * 0.28) var(--pad-x) calc(var(--section) * 0.4);
}
.chapters-eyebrow { grid-column: 1 / -1; text-align: center; opacity: 0.6; margin-bottom: clamp(3rem, 6vw, 5rem); }
.chapter {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 4.4;
  margin: 0;
  color: var(--white);
}
.chapter-media { position: absolute; inset: 0; }
.chapter-media img, .chapter-media video {
  position: relative; top: -6%; width: 100%; height: 112%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.88);
  transition: transform 1.4s var(--ease-out);
  will-change: transform;
}
.chapter:hover .chapter-media img, .chapter:hover .chapter-media video { transform: scale(1.03); }
.chapter::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 22, 30, 0.05) 22%, rgba(0, 22, 30, 0.4) 62%, rgba(0, 22, 30, 0.82) 100%);
}
.chapter-content {
  position: absolute; z-index: 2;
  left: clamp(1rem, 1.6vw, 1.8rem); right: clamp(1rem, 1.6vw, 1.8rem); bottom: clamp(1.2rem, 2vw, 2rem);
  text-align: center;
}
.chapter-right .chapter-content { left: clamp(1rem, 1.6vw, 1.8rem); text-align: center; }
.chapter-right .chapter-content .cta { flex-direction: row; }
.chapter-content .eyebrow { opacity: 0.9; font-size: 0.8rem; letter-spacing: 0.24em; }
.chapter-content h2 {
  font-weight: 400;
  font-size: clamp(2.1rem, 1.4rem + 2.1vw, 3.3rem);
  line-height: 1.02;
  margin-top: 0.7rem;
  text-shadow: 0 1px 24px rgba(0, 22, 30, 0.45);
}
.chapter .cta { color: var(--white); display: inline-flex; margin-top: 1.1rem; font-size: 0.8rem; letter-spacing: 0.22em; }
/* Op de hoofdstukkaartjes geen pijl: de kaart zelf is de knop */
.chapter .cta i { display: none; }
.chapter .cta span {
  border-bottom: 1px solid rgba(253, 252, 250, 0.4);
  padding-bottom: 0.35rem;
  transition: border-color 0.4s var(--ease-out);
}
.chapter:hover .cta span { border-bottom-color: var(--white); }
.chapter:hover .cta i { width: 96px; }
@media (max-width: 980px) {
  .chapters { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .chapters { grid-template-columns: 1fr; }
  .chapter { aspect-ratio: 4 / 4.6; }
}

/* ——— Paginakop ——— */

.page-hero {
  padding: clamp(10rem, 18vw, 14rem) var(--pad-x) clamp(3.5rem, 7vw, 6rem);
  display: grid; justify-items: center; text-align: center;
}
.page-hero h1 {
  font-weight: 400;
  font-size: clamp(2.8rem, 6.5vw, 5.8rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}
.page-hero .eyebrow { opacity: 0.6; margin-bottom: 1.2rem; }
.page-intro { margin-top: 1.6rem; opacity: 0.85; text-align: center; }

/* ——— Volle beeldband ——— */

.page-media { padding: 0 var(--pad-x) var(--section); }
.page-media-frame {
  max-width: var(--wide); margin: 0 auto;
  aspect-ratio: 16 / 8; overflow: hidden;
  background: rgba(0, 62, 84, 0.07);
}
.page-media-frame video, .page-media-frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

/* ——— Histoire ——— */

.histoire { padding: clamp(3.5rem, 8vw, 7rem) var(--pad-x) var(--section); }
.verhaal-duo {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
}
.histoire-beeld.hb-rechts { margin-top: min(7cm, 20vw); }
.histoire-grid {
  max-width: var(--wide); margin: clamp(3rem, 7vw, 6rem) auto 0;
  display: grid; grid-template-columns: clamp(110px, 12vw, 175px) 1fr;
  gap: clamp(1.5rem, 3.5vw, 4rem);
}
.histoire-grid > .eyebrow { opacity: 0.6; }

/* ——— Optische uitlijning ———
   Ronde en schuine beginletters (O C G Q / A V W) hebben van nature een
   aanloop en lijken daardoor te zijn ingesprongen, ook al staat hun blok
   exact op de raamlijn. Een kleine negatieve marge zet de inkt terug op
   dezelfde lijn als de eyebrow en de broodtekst erboven en eronder.
   Alleen zinvol bij links uitgelijnde tekst. */
.optisch-rond { margin-left: -0.056em; }
.optisch-schuin { margin-left: -0.035em; }

/* ——— Tekstpagina's: voorwaarden, privacy, cookiebeleid ——— */
.tekstpagina {
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(7rem, 12vw, 11rem) var(--pad-x) clamp(4rem, 8vw, 7rem);
}
.tekst-titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); line-height: 1.1;
  margin-top: 0.7rem;
}
.tekst-datum { margin-top: 0.9rem; font-size: 0.82rem; opacity: 0.5; }
.tekst-lijf { max-width: 68ch; margin-top: clamp(2.5rem, 5vw, 4rem); }
.tekst-lijf h2 {
  font-family: var(--font-text); font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 1rem;
}
.tekst-lijf > h2:first-child { margin-top: 0; }
.tekst-lijf p, .tekst-lijf li {
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.1rem);
  line-height: 1.72; opacity: 0.85; margin-bottom: 0.9rem;
}
.tekst-lijf ul { list-style: none; padding: 0; margin: 0 0 0.9rem; }
.tekst-lijf li { position: relative; padding-left: 1.2rem; }
.tekst-lijf li::before { content: "—"; position: absolute; left: 0; opacity: 0.45; }
.tekst-lijf a { border-bottom: 1px solid var(--hair-on-creme); }
.tekst-lijf a:hover { border-bottom-color: var(--blue); }
.tekst-lijf code { font-family: "Courier New", Courier, monospace; font-size: 0.9em; }
.tekst-noot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--hair-on-creme);
  font-size: 0.86rem; opacity: 0.55;
}
/* De cookietabel mag schuiven op een smal scherm, de pagina niet */
.tekst-tabelhouder { overflow-x: auto; margin: 0 0 1.5rem; }
.tekst-tabel { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.tekst-tabel th, .tekst-tabel td {
  text-align: left; padding: 0.65rem 1.4rem 0.65rem 0;
  border-bottom: 1px solid var(--hair-on-creme); white-space: nowrap;
}
.tekst-tabel th {
  font-family: var(--font-text); font-weight: 400;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55;
}
.tekst-tabel td { opacity: 0.85; }
.tekst-knopregel { margin: 0.3rem 0 1.3rem; }
.tekst-knop {
  font-family: var(--font-text); font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.85rem 1.7rem; cursor: pointer;
  background: none; border: 1px solid var(--hair-on-creme); color: var(--blue);
  transition: border-color 0.3s var(--ease-out);
}
.tekst-knop:hover { border-color: var(--blue); }

/* ——— Zigzag (Maison): tekst en beeld verspringend ——— */
.zigzag {
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) var(--pad-x) clamp(3.5rem, 8vw, 7rem);
  display: grid; grid-template-columns: 1.35fr 1fr;
  column-gap: 1cm;
  row-gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
}
.zz-tekst { max-width: none; }
.zz-tekst .body { max-width: none; }
.zz-tekst .zin-tekst { margin-top: 0.6rem; margin-bottom: 0.6rem; }
.zz-tekst .body { margin-top: 1.4rem; opacity: 0.85; }
/* De kolom eindigt waar de letters eindigen, niet een halve regel lager,
   zodat het beeld ernaast op dezelfde hoogte stopt als de tekst. */
.zz-tekst { display: flow-root; }
.zz-tekst > :last-child { margin-bottom: -0.2em; }
.zz-t1 { grid-column: 1; grid-row: 1; }
/* Eén beeld naast de tekst, even hoog als de kolom ernaast. */
/* Onder de laatste tekstregel staat nog een halve regelafstand. Die trimmen we
   van het beeld af, zodat beeld en tekst optisch op dezelfde hoogte eindigen. */
.zz-b1 { grid-column: 2; grid-row: 1; align-self: stretch; position: relative; }
.zz-b1 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Twee beelden naast elkaar: één groot, één kleiner — bovenaan gelijk met de tekst,
   het grote beeld loopt net zo diep door als de kolom ernaast */
.zz-b2 { grid-column: 1; grid-row: 2; align-self: stretch; }
.zz-duo {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(0.8rem, 1.7vw, 1.7rem);
  align-items: start;
  height: 100%;
}
.zz-duo figure { margin: 0; overflow: hidden; position: relative; }
.zd-groot { height: 100%; }
.zd-klein { height: 68%; }
.zz-duo img, .zz-duo video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
}
.zz-t2 {
  grid-column: 2; grid-row: 2;
  /* geen inspringing: dezelfde raamlijn als het beeld erboven */
  /* De kaart is hoger dan de tekst; de kolom rekt mee en verdeelt het
     verschil over de tussenruimtes, zodat beide onderaan gelijk eindigen. */
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: space-between;
}
.zz-t2 .zin-tekst { margin-top: 0.5rem; }
.zz-beeld { margin: 0; overflow: hidden; }
.zz-beeld img, .zz-beeld video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
}
/* De pannetjes houden hun koperglans, net als op de voorpagina */
.zz-b1 img { filter: grayscale(0.82) contrast(1.05); }
/* Selectie-kaartjes: geen klikbare kaarten, wel dezelfde vorm */
/* De collectie: ruimer opgezet dan de partnerkaartjes en verspringend van hoogte */
.selectie-kaarten {
  max-width: none;
  padding-left: clamp(1rem, 2.4vw, 2.6rem);
  padding-right: clamp(1rem, 2.4vw, 2.6rem);
  padding-top: 0;

  gap: clamp(12px, 1.6vw, 24px);
  align-items: start;
}
/* De titel staat vlak boven de kaartjes, niet met een band ertussen */
.zin-collectie { padding-bottom: clamp(1.5rem, 3vw, 3rem); }

/* ——— Contactkaart (proefsessie): volbeeld met een visitekaartje ——— */
body[data-page="proefsessie"] { background: var(--blue); }
.visite {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(1.5rem, 4vw, 4rem);
}
.visite-beeld { position: fixed; inset: 0; z-index: 0; }
.visite-beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.06) brightness(0.62);
}
.visite-sluier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 22, 30, 0.35) 0%, rgba(0, 22, 30, 0.55) 100%);
}
/* De balk draagt hier alleen de menuknop, over het beeld heen */
.visite-header {
  background: none; box-shadow: none; color: var(--white);
  grid-template-columns: auto 1fr auto;
}
.visite-terug {
  position: fixed; top: clamp(1.3rem, 2.6vw, 1.9rem); right: clamp(1.2rem, 3vw, 2.6rem);
  z-index: 48; color: var(--white);
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7;
  transition: opacity 0.3s var(--ease-out);
}
.visite-terug:hover { opacity: 1; }

.visite-kaart {
  position: relative; z-index: 1;
  width: min(100%, 560px);
  background: var(--creme);
  padding: clamp(1.8rem, 3.4vw, 3.2rem) clamp(1.6rem, 3.2vw, 3rem) clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: 0 30px 80px rgba(0, 22, 30, 0.35);
  display: grid; justify-items: center; text-align: center;
}
.visite-merk { width: clamp(96px, 11vw, 130px); }
.visite-regel {
  width: clamp(48px, 6vw, 78px); height: 1px; background: var(--gold);
  margin: clamp(1rem, 2vw, 1.6rem) 0 clamp(1.2rem, 2.2vw, 1.8rem);
}
.visite-titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.08; margin-top: 0.5rem;
}
.visite-intro {
  margin-top: 0.9rem; max-width: 44ch;
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.55; opacity: 0.8;
}

.visite-form {
  width: 100%; margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  text-align: left;
}
.vf-breed { grid-column: 1 / -1; }
.vf-veld { display: grid; gap: 0.35rem; }
.vf-veld span {
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}
.vf-veld input {
  font-family: var(--font-text); font-size: 1rem; color: var(--blue);
  background: none; border: 0; border-bottom: 1px solid var(--hair-on-creme);
  padding: 0.4rem 0; width: 100%;
  transition: border-color 0.3s var(--ease-out);
}
.vf-veld input::placeholder { color: rgba(0, 62, 84, 0.35); }
.vf-veld input:focus { outline: none; border-bottom-color: var(--blue); }

.visite-knop {
  grid-column: 1 / -1; justify-self: center;
  margin-top: clamp(0.6rem, 1.4vw, 1.2rem);
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: none; border: 0; padding: 0.4rem 0; cursor: pointer;
  font-family: var(--font-text); color: var(--blue);
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
  border-bottom: 1px solid var(--blue);
}
.visite-knop i {
  width: 22px; height: 1px; background: currentColor; display: block;
  transition: width 0.4s var(--ease-expo);
}
.visite-knop:hover i { width: 34px; }

.visite-of {
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  font-size: 0.82rem; opacity: 0.65;
}
.visite-of a { border-bottom: 1px solid var(--hair-on-creme); }
.visite-of a:hover { border-bottom-color: var(--blue); }
.visite-of span { margin: 0 0.4rem; }

@media (max-width: 520px) {
  .visite-form { grid-template-columns: 1fr; }
  .visite-terug { position: static; display: block; text-align: center; margin-bottom: 1.2rem; }
}

/* De collectie is geen kaartenrij: langwerpige beelden met de naam eronder */
.selectie-kaarten .p-kaart { border: 0; }
/* Minstens 8 cm lucht tussen de collectie en de blauwe band */
.partner-kaarten.selectie-kaarten { padding-bottom: max(8cm, 11vw); }
/* Die 8 cm is bedoeld voor een breed scherm. Op een telefoon is het ruim een
   derde van het beeld leeg, dus daar een gewone afstand. */
@media (max-width: 900px) {
  .partner-kaarten.selectie-kaarten { padding-bottom: clamp(3rem, 12vw, 5rem); }
}
.selectie-kaarten .p-kaart-media { cursor: default; aspect-ratio: 4 / 7.4; }
.selectie-kaarten .p-kaart-body {
  padding: clamp(0.9rem, 1.5vw, 1.3rem) 0 0;
  justify-items: start;
}
.body-lg {
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem);
  line-height: 1.4;
  max-width: 30ch;
}
.histoire-copy .body { margin-top: 2rem; max-width: 52ch; opacity: 0.85; }
.histoire-beeld {
  position: relative; overflow: hidden; margin: 0;
  aspect-ratio: 3 / 4.2;
  color: var(--white);
  width: 80%;
}
.histoire-beeld.hb-rechts { margin-left: auto; }
.histoire-beeld video,
.histoire-beeld img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.88);
}
.histoire-beeld::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 22, 30, 0) 45%, rgba(0, 22, 30, 0.55) 100%);
}
.histoire-beeld-tekst {
  position: absolute; left: clamp(1.2rem, 2vw, 2.2rem); right: clamp(1.2rem, 2vw, 2.2rem); bottom: clamp(1.2rem, 2.2vw, 2.4rem);
  z-index: 1;
}
.histoire-beeld-tekst .eyebrow { opacity: 0.75; }
.hb-titel {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem);
  line-height: 1.18; margin-top: 0.6rem;
}

/* ——— Manifest ——— */

.manifest {
  background: var(--blue); color: var(--creme);
  display: grid; grid-template-columns: 5fr 6fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  padding: var(--section) var(--pad-x);
}
.manifest-media { overflow: hidden; aspect-ratio: 4 / 3.4; max-width: 640px; justify-self: end; width: 100%; }
.manifest-media img {
  width: 100%; height: 108%; object-fit: cover; position: relative; top: -4%;
  filter: grayscale(1) contrast(1.05);
}
.manifest-copy .eyebrow { opacity: 0.6; }
.manifest-quote { margin-top: 1.6rem; }
.manifest-quote .pline-inner {
  font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.2rem);
  line-height: 1.25;
}

/* ——— Pijler-kop ——— */

.pillars-eyebrow { text-align: center; opacity: 0.6; margin-bottom: clamp(2rem, 4vw, 3rem); }
.pillars { padding-top: var(--section); }

/* ——— Begeleiders (collectie) ——— */

.companions {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  padding: 0 var(--pad-x) var(--section);
}
.collection .companions { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.companion {
  position: relative; text-align: center;
  padding: clamp(2.2rem, 4vw, 3.4rem) 1.5rem;
}
.companion h3 { font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.9rem); }
.companion .eyebrow { margin-top: 0.8rem; opacity: 0.6; }

/* ——— Cijfers, in stilte ——— */

.specs { padding: var(--section) var(--pad-x); text-align: center; }
.specs > .eyebrow { opacity: 0.6; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.specs-grid {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair-on-creme);
}
.spec { padding: clamp(2.5rem, 5vw, 4rem) 1.5rem 0; }
.spec + .spec { border-left: 1px solid var(--hair-on-creme); }
.spec-num {
  font-size: clamp(2.8rem, 6.5vw, 5.6rem);
  line-height: 1;
}
.spec .eyebrow { margin-top: 1rem; opacity: 0.62; }

/* ——— Partners ——— */

.partners { padding: calc(var(--section) * 0.4) var(--pad-x) var(--section); }
.partner-grid {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.partner-card { display: flex; flex-direction: column; }
.partner-media {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: rgba(0, 62, 84, 0.07);
}
.partner-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: transform 1.3s var(--ease-out);
}
.partner-card:hover .partner-media img { transform: scale(1.035); }
.partner-media-soon {
  display: grid; place-items: center;
  border: 1px solid var(--hair-on-creme);
  background: transparent;
}
.soon-mark { font-size: clamp(1.8rem, 3vw, 2.6rem); opacity: 0.65; }
.partner-body { padding-top: 1.5rem; }
.partner-body .eyebrow { opacity: 0.6; }
.partner-body h2 { font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 0.5rem; }
.partner-address { margin-top: 0.5rem; opacity: 0.75; }
.partner-actions { display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 1.4rem; flex-wrap: wrap; }
.cta-quiet { opacity: 0.55; transition: opacity 0.3s; }
.cta-quiet:hover { opacity: 1; }

/* ——— Contact ——— */

.contact-panel { padding: calc(var(--section) * 0.3) var(--pad-x) var(--section); }
.contact-grid {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: 7fr 4fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.letter-form {
  background: var(--white);
  border: 1px solid var(--hair-on-creme);
  padding: clamp(2.2rem, 4.5vw, 4rem);
}
.form-eyebrow { opacity: 0.6; margin-bottom: 2rem; }
.field { margin-bottom: 1.8rem; }
.field label { display: block; opacity: 0.6; margin-bottom: 0.4rem; }
.field input, .field textarea {
  width: 100%;
  font-family: var(--font); font-size: 1.1rem; color: var(--blue);
  background: transparent; border: 0;
  border-bottom: 1px solid var(--hair-on-creme);
  padding: 0.55rem 0; border-radius: 0;
  transition: border-color 0.3s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.field textarea { resize: vertical; min-height: 96px; }
.cta-submit {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font); color: var(--blue); margin-top: 0.6rem;
}
.form-note { margin-top: 1.6rem; opacity: 0.45; }
.contact-aside { padding-top: 0.5rem; }
.contact-aside .eyebrow { opacity: 0.6; }
.contact-aside .body { margin-top: 1rem; }
.contact-mail {
  display: block; margin-top: 2.4rem;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.15;
}
.contact-stamp { width: clamp(100px, 12vw, 140px); margin-top: 3rem; }

/* ——— Responsief, deel 2 ——— */

@media (max-width: 900px) {
  .zigzag { grid-template-columns: 1fr; }
  .zz-t1, .zz-b1, .zz-b2, .zz-t2 { grid-column: 1; grid-row: auto; }
  .zz-t1 { padding-top: 0; }
  .zz-t2 { padding-left: 0; }
  .verhaal-duo { grid-template-columns: 1fr; }
  .histoire-beeld { width: 100%; }
  .histoire-beeld.hb-rechts { margin-top: 0; }
  .histoire-grid { grid-template-columns: 1fr; }
  .manifest { grid-template-columns: 1fr; }
  .manifest-media { justify-self: start; }
  .companions { grid-template-columns: 1fr; }
  .specs-grid { grid-template-columns: 1fr; border-top: 0; }
  .spec { border-top: 1px solid var(--hair-on-creme); padding: 2.2rem 0 0; }
  .spec + .spec { border-left: 0; margin-top: 2.2rem; }
  .partner-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .page-media-frame { aspect-ratio: 16 / 10; }
}

/* ═══════════ Deel 3 — de klassieke laag: strepen & lijsten ═══════════ */

/* Voorheen luifelstrepen — nu effen in de lichtste tint */
:root {
  /* Eén beige door de hele site: het officiële crème van het huis */
  --stripe-a: var(--creme);
  --stripe-b: var(--creme);
  --gold: #BFA767; /* het klassieke goud van madamepommes.com — bewuste uitzondering op het manual, op verzoek */
}

body[data-page="home"] .statement,
.chapters,
.specs,
.partners,
.world.gallery,
.contact-panel {
  background: var(--stripe-a);
}

/* Statement onder de hero — zoals de andere quotes van het huis */
.statement { padding: calc(var(--section) * 0.64) var(--pad-x); }
.statement .invite-title { font-size: clamp(1.71rem, 1.17rem + 2.1vw, 3.24rem); }
/* Breed genoeg om de regels te laten staan zoals ze geschreven zijn */
.statement .invite-title { max-width: min(100%, 1290px); }

/* Goud als accentstem: kickers, lijnen, lijsten — zoals op de huidige site */
.eyebrow { color: var(--gold); }
.cta i { background: var(--gold); }
.cta i::after { border-color: var(--gold); }
.loader-rule { background: rgba(191, 167, 103, 0.6); }

/* Het formulier en de kaarten blijven rustig op de strepen staan */
.letter-form { background: var(--white); }

/* Klassieke fotolijst — het servetborder-artwork als kader */
.partner-media,
.page-media-frame,
.manifest-media,
.vig-media,
.duo-item,
.world.gallery .tile-video,
.world.gallery .tile-cafe,
.world.gallery .tile-bucket,
.world.gallery .tile-guests {
  position: relative;
  background: var(--creme);
  padding: clamp(10px, 1.4vw, 16px);
}
.partner-media::after,
.page-media-frame::after,
.manifest-media::after,
.vig-media::after,
.duo-item::after,
.world.gallery .tile-video::after,
.world.gallery .tile-bucket::after,
.world.gallery .tile-cafe::after,
.world.gallery .tile-guests::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-style: solid;
  border-width: clamp(14px, 1.8vw, 22px);
  border-image: url("../assets/frame-gold.png") 270 stretch;
  opacity: 0.95;
  z-index: 2;
}
.manifest-media { background: rgba(237, 225, 207, 0.08); }
.manifest-media::after { border-image-source: url("../assets/frame-creme.png"); opacity: 0.9; }

/* Galerietegels: passe-partout wit binnen de lijst */
.world.gallery .tile-cafe, .world.gallery .tile-guests,
.world.gallery .tile-video, .world.gallery .tile-bucket { background: var(--white); }

/* ═══════════ Deel 4 — verhaalkunst (Lake Como / Radici) ═══════════ */

/* Poëtisch tussenblok */
.poeme {
  padding: calc(var(--section) * 0.7) var(--pad-x);
  display: grid; justify-items: center; text-align: center;
}
.poeme .invite-title { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3.1rem); max-width: 26ch; }

/* Triptiek — drie borden naast elkaar */
.triptiek { padding: calc(var(--section) * 0.6) var(--pad-x); }
.trio {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.trio-item {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--white);
  padding: clamp(10px, 1.4vw, 16px);
}
.trio-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: clamp(14px, 1.8vw, 22px) solid transparent;
  border-image: url("../assets/frame-gold.png") 270 stretch;
  opacity: 0.95; z-index: 2;
}
.trio-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: transform 1.3s var(--ease-out);
}
.trio-item:hover img { transform: scale(1.035); }
.trio-caption { text-align: center; margin-top: clamp(1.8rem, 3vw, 2.6rem); }

/* Petite histoire — vignet */
.vignet {
  max-width: var(--wide);
  margin: 0 auto;
  padding: calc(var(--section) * 0.5) var(--pad-x) var(--section);
  display: grid; grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}
.vignet-media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: var(--white);
  padding: clamp(10px, 1.4vw, 16px);
}
.vignet-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: clamp(14px, 1.8vw, 22px) solid transparent;
  border-image: url("../assets/frame-gold.png") 270 stretch;
  opacity: 0.95; z-index: 2;
}
.vignet-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.vignet-copy h3 { font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.1; margin-top: 1rem; }
.vignet-copy .body { margin-top: 1.4rem; opacity: 0.85; }

/* De brasseriewand — licht scheve lijsten in de galerie */
.world.gallery .tile-cafe { rotate: 0.9deg; }
.world.gallery .tile-bucket { rotate: -1.1deg; }
.world.gallery .tile-guests { rotate: 0.7deg; }
.world.gallery .tile-video { rotate: -0.7deg; }

/* Zachte beeldfade bij binnenkomen (Tremezzo's fotopapier) */
img.mp-loading { opacity: 0; }
img { transition: opacity 0.8s ease; }

@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; }
  .trio-item { aspect-ratio: 4 / 3.2; }
  .vignet { grid-template-columns: 1fr; }
}

/* ═══════════ Deel 4 — Maison: interlude, vignetten, duo ═══════════ */

/* Poëtisch tussenblok — op de strepen, alleen taal */
.interlude {
  background: var(--stripe-a);
  padding: calc(var(--section) * 0.8) var(--pad-x);
  display: grid; justify-items: center; text-align: center;
}
.interlude .invite-title { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.6rem); }

/* Hoofdstuk-hero — filmopening voor subpagina's */
.chapter-hero {
  position: relative;
  height: 100svh; min-height: 560px;
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--white);
  background: #12242c;
  text-align: center;
}
.chapter-hero-content { position: relative; z-index: 2; padding: 0 var(--pad-x); }
.chapter-hero-content h1 {
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 6.2rem);
  line-height: 1.02;
  margin-top: 0.8rem;
}
.chapter-hero-intro { margin: 1.8rem auto 0; opacity: 0.85; text-align: center; }

/* Statische panelen (Maison) — frontpage-taal zonder link */
.chapter-static { cursor: default; }
.chapter-static .chapter-content { max-width: 44rem; }
.chapter-line {
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.8rem);
  line-height: 1.12; margin-top: 0.6rem; max-width: 20ch;
}
.chapter-right .chapter-line { margin-left: auto; }
.panel-quote .chapter-content {
  left: 0; right: 0; bottom: auto; top: 50%;
  transform: translateY(-50%);
  max-width: none; text-align: center;
}
.panel-quote .pline-inner {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem);
  line-height: 1.25; color: var(--white);
}
.panel-quote .eyebrow { margin-bottom: 1.4rem; }
.panel-quote::after {
  background: linear-gradient(180deg, rgba(0, 22, 30, 0.42) 0%, rgba(0, 22, 30, 0.58) 100%);
}
.chapter-tall { height: clamp(520px, 86vh, 820px); }

/* Collectie als kaartregels op blauw */
.collection-items { margin-top: 2.2rem; }
.collection-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  border-top: 1px solid var(--hair-on-blue);
  padding: 1.15rem 0;
}
.collection-item:last-child { border-bottom: 1px solid var(--hair-on-blue); }
.collection-item h3 { font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.collection-item .eyebrow { text-align: right; opacity: 0.8; }

/* De standaard van het huis — menukaart-lijst met haarlijnen */
.standard { padding: var(--section) var(--pad-x); }
.standard-eyebrow { text-align: center; opacity: 0.75; margin-bottom: clamp(2.5rem, 5vw, 4rem); display: block; }
.standard-list { max-width: 980px; margin: 0 auto; }
.standard-row {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-top: 1px solid var(--hair-on-creme);
}
.standard-row:last-child { border-bottom: 1px solid var(--hair-on-creme); }
.standard-row h3 {
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  line-height: 1.1;
  transition: transform 0.5s var(--ease-expo);
}
.standard-row:hover h3 { transform: translateX(10px); }
.standard-row .body { opacity: 0.85; max-width: none; }
@media (max-width: 700px) {
  .standard-row { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* Petites histoires — drie scènes uit één keuken */
.histoires { padding: var(--section) var(--pad-x); }
.histoires-eyebrow { text-align: center; opacity: 0.75; margin-bottom: clamp(3rem, 6vw, 5rem); display: block; }
.vignette {
  max-width: var(--wide); margin: 0 auto clamp(4rem, 8vw, 7rem);
  display: grid; grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.vignette:last-child { margin-bottom: 0; }
.vignette-right .vig-media { order: 2; }
.vignette-right .vig-copy { order: 1; text-align: right; justify-items: end; }
.vig-media { aspect-ratio: 16 / 10; background: var(--white) !important; }
.duo-item { background: var(--white) !important; }
.vig-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.vig-copy .eyebrow { opacity: 0.85; }
.vig-copy h3 {
  font-weight: 400;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem);
  line-height: 1.12;
  margin-top: 0.9rem;
  max-width: 14ch;
}
.vignette-right .vig-copy h3 { margin-left: auto; }
.vig-copy .body { margin-top: 1.2rem; opacity: 0.85; max-width: 40ch; }

/* Duo-compositie — twee lijsten naast elkaar, één onderschrift */
.duo {
  background: var(--stripe-a);
  padding: var(--section) var(--pad-x);
}
.duo-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.duo-item { aspect-ratio: 4 / 5; }
.duo-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
.duo-caption { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); opacity: 0.75; }

@media (max-width: 860px) {
  .vignette { grid-template-columns: 1fr; gap: 1.6rem; }
  .vignette-right .vig-media { order: 0; }
  .vignette-right .vig-copy { order: 1; text-align: left; }
  .vignette-right .vig-copy h3 { margin-left: 0; }
  .duo-grid { grid-template-columns: 1fr; }
}

/* ——— Reduced motion ——— */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue span { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .veil { display: none; }
  /* Zonder motion: het zwevende hero-merk verbergen, de balk draagt het logo al */
  .hero-brand { display: none; }
}

/* ═══════════ Voorpagina naar Tremezzo-opbouw ═══════════ */

/* Eén groot beeld, veel wit eromheen */
.grand-beeld {
  padding: calc(var(--section) * 0.45) var(--pad-x) 0;
  display: grid; justify-items: center;
}
.grand-beeld video {
  /* 0,5 cm ruimer aan elke kant dan de oude 1080px */
  width: min(100%, 1118px);
  filter: grayscale(1) contrast(1.06) brightness(0.96);
}
/* Maison: de brug als breed, laag filmvenster — zwart-wit, maar lichter opgehaald */
body[data-page="maison"] .grand-beeld video {
  width: min(100%, 1280px);
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: grayscale(1) brightness(1.35) contrast(0.96);
}

/* Sectietitel tussen twee hairlines */
.lijn-titel {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem);
  max-width: var(--wide); margin: 0 auto;
  padding: calc(var(--section) * 0.5) var(--pad-x) 0;
}
.lijn-titel::before, .lijn-titel::after { content: ""; height: 1px; background: var(--hair-on-creme); }
.lijn-titel h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* Redactionele split: kop links, tekst rechts, collage eronder */
.redactie {
  padding: calc(var(--section) * 0.18) 0 calc(var(--section) * 0.5);
}
.redactie-kop {
  padding: 0 var(--pad-x);
  text-align: center;
}
.redactie-kop .eyebrow { margin-bottom: 1.4rem; }
.redactie-titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 1.3rem + 1.7vw, 3rem);
  line-height: 1.14;
  max-width: 26ch;
  /* blok op de middenas van de pagina */
  margin-inline: auto;
  text-align: center;
}
.redactie-tekst { display: grid; gap: 1.4rem; justify-items: start; align-content: start; }
.stil-link {
  font-family: var(--font-display); font-size: 1.1rem;
  border-bottom: 1px solid var(--hair-on-creme); padding-bottom: 4px;
  transition: border-color 0.3s var(--ease-out);
}
.stil-link:hover { border-color: var(--blue); }
.redactie-collage {
  display: grid;
  /* inspring | randbeeld | lucht | hoofdbeeld | lucht | tekst | rechtermarge */
  /* eerste kolom = dezelfde inspring als de hoofdstukkaartjes erboven */
  grid-template-columns: var(--pad-x) clamp(119px, 17.43vw, 340px) clamp(14px, 2vw, 40px) minmax(0, 25.5vw) clamp(2.5rem, 5.5vw, 7rem) minmax(0, 1fr);
  /* 25% meer lucht tussen de kop en de beelden */
  margin-top: clamp(3.75rem, 6.25vw, 6.875rem);
  align-items: start;
}
.redactie-collage img, .redactie-collage video { filter: grayscale(1) contrast(1.05); }
/* De koperen pannetjes: vrijwel zwart-wit, met een restje koperglans */
.redactie-collage .rc-klein,
.redactie-collage .rc-groot { filter: grayscale(0.82) contrast(1.05); }
/* Tremezzo-compositie: klein beeld raakt de schermrand en begint lager;
   het grote beeld staat; de tekst leest ernaast */
.rc-klein {
  grid-column: 2;
  width: 100%;
  aspect-ratio: 3 / 5; object-fit: cover;
  margin-top: clamp(2.5rem, 4.5vw, 4.5rem);
}
.rc-groot {
  grid-column: 4;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}
.redactie-tekst {
  grid-column: 6;
  padding-right: var(--pad-x);
  max-width: 52ch;
  /* 1 cm lager dan voorheen */
  margin-top: calc(clamp(0.5rem, 1.5vw, 1.5rem) + 1cm);
}
.redactie-tekst .body {
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.55rem);
  line-height: 1.6;
}
.redactie-tekst .stil-link { font-size: 1.2rem; }

/* Nos Partenaires: groot middenstuk met strooicollage */
.partners-blok {
  text-align: center;
  max-width: var(--wide); margin: 0 auto;
  padding: calc(var(--section) * 0.55) var(--pad-x);
  display: grid; justify-items: center; gap: 1.1rem;
}
.pb-titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 1.8rem + 2.9vw, 5rem);
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.05;
}
.pb-tekst { max-width: 34rem; }
.strooi-collage {
  width: 100%;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.6vw, 2.6rem);
  margin-top: clamp(2rem, 5vw, 4rem); align-items: start;
}
.strooi-collage img { filter: grayscale(1) contrast(1.05); width: 100%; object-fit: cover; }
.sc-1 { grid-column: 1 / span 3; margin-top: 4rem; aspect-ratio: 3/4; }
.sc-2 { grid-column: 5 / span 4; aspect-ratio: 3/4; }
.sc-3 { grid-column: 10 / span 3; margin-top: 7rem; aspect-ratio: 3/4; }

/* Pour les chefs: blauwe merkband */
.chef-band {
  background: var(--blue); color: var(--creme);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
}
.chef-inhoud {
  padding: clamp(4rem, 10.5vw, 9.5rem) var(--pad-x);
  display: grid; gap: 1.5rem; justify-items: start;
  max-width: 720px; justify-self: end;
}
.chef-inhoud h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 1.7rem + 2.5vw, 4.2rem);
  text-wrap: balance;
}
.chef-inhoud .body { opacity: 0.92; }
.chef-acties { display: flex; gap: clamp(1.4rem, 3vw, 2.6rem); flex-wrap: wrap; }
.chef-band .stil-link { color: var(--creme); border-color: var(--hair-on-blue); }
.chef-band .stil-link:hover { border-color: var(--creme); }
/* Het beeld ligt ín het blauw: een blauwe rand rondom de video */
.chef-beeld { height: 100%; padding: clamp(1.5rem, 3.2vw, 3.2rem); }
.chef-beeld video, .chef-beeld img {
  width: 100%; height: 100%; object-fit: cover; min-height: 460px;
  filter: grayscale(1) contrast(1.08) brightness(0.85);
}

@media (max-width: 900px) {
  .redactie-kop { padding-left: var(--pad-x); }
  .redactie-collage { grid-template-columns: 1fr; padding: 0 var(--pad-x); gap: 2rem; }
  .rc-klein { display: none; }
  /* Het bronbeeld is staand (2:3). Een liggend 4:3-kader sneed de helft van de
     hoogte weg; dezelfde uitsnede als op breed scherm laat de foto heel. */
  .rc-groot { grid-column: auto; aspect-ratio: 5 / 6; }
  .redactie-tekst { grid-column: auto; padding-right: 0; }
  .chef-band { grid-template-columns: 1fr; }
  /* Eén rij van drie in plaats van twee-plus-een: dat laatste liet de derde
     foto alleen onderaan hangen alsof er iets was misgegaan. De verspringing
     houdt de losse toon van de brede versie vast. */
  .strooi-collage { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; align-items: start; }
  .sc-1, .sc-2, .sc-3 { grid-column: auto; }
  .sc-1 { margin-top: 1.6rem; }
  .sc-2 { margin-top: 0; }
  .sc-3 { margin-top: 2.6rem; }
}

/* ——— Partnerlijst: horizontale rij-kaartjes met hairlines ——— */
.partner-lijst {
  max-width: var(--wide);
  margin: 0 auto;
  padding: calc(var(--section) * 0.35) var(--pad-x) calc(var(--section) * 0.5);
}
.partner-rij {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.1rem, 2vw, 1.7rem) 0;
  border-bottom: 1px solid var(--hair-on-creme);
}
.partner-lijst .partner-rij:first-child { border-top: 1px solid var(--hair-on-creme); }
.partner-rij h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.3rem);
  line-height: 1.1;
  transition: transform 0.5s var(--ease-expo);
}
a.partner-rij:hover h2 { transform: translateX(0.35rem); }
.partner-rij .eyebrow { opacity: 0.6; }
.partner-rij .cta { justify-self: end; }
a.partner-rij:hover .cta i { width: 96px; }
@media (max-width: 640px) {
  .partner-rij { grid-template-columns: 1fr auto; }
  .partner-rij .eyebrow { grid-column: 1; }
  .partner-rij .cta { grid-row: 1; grid-column: 2; }
}

/* ——— Partnerkaartjes naar het model van de huidige site ——— */
.partner-kaarten {
  max-width: var(--wide);
  margin: 0 auto;
  padding: calc(var(--section) * 0.16) var(--pad-x) calc(var(--section) * 0.5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 28px);
}
.p-kaart {
  border: 1px solid var(--hair-on-creme);
  display: flex; flex-direction: column;
}
.p-kaart-media { display: block; aspect-ratio: 4 / 3.4; overflow: hidden; }
.p-kaart-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform 1.2s var(--ease-out);
}
.p-kaart-media:hover img { transform: scale(1.04); }
.p-media-leeg {
  display: grid; place-items: center;
  background: rgba(0, 62, 84, 0.05);
}
.p-media-leeg img { width: clamp(48px, 5vw, 72px); height: auto; object-fit: contain; opacity: 0.5; filter: none; }
.p-media-leeg:hover img { transform: none; }
.p-kaart-body {
  padding: clamp(1rem, 1.6vw, 1.5rem);
  display: grid; gap: 0.35rem; justify-items: start;
  flex: 1; align-content: start;
}
.p-kaart-body h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  line-height: 1.15;
}
.p-kaart-body .eyebrow { opacity: 0.85; }
.p-adres { font-size: 0.85rem; font-style: italic; opacity: 0.6; }
/* Op de partnerkaartjes geen pijl: de hele kaart is de link */
.p-kaart-body .cta { margin-top: 0.8rem; }
.p-kaart .cta i { display: none; }
.p-kaart .cta span {
  border-bottom: 1px solid var(--hair-on-creme);
  padding-bottom: 0.3rem;
  transition: border-color 0.4s var(--ease-out);
}
.p-kaart:hover .cta span { border-bottom-color: var(--blue); }
.p-kaart-stil h2 { opacity: 0.75; }
@media (max-width: 1000px) { .partner-kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .partner-kaarten { grid-template-columns: 1fr; } }

/* ——— Stadfilters boven de partnerkaartjes ——— */
.partner-filters {
  max-width: var(--wide);
  margin: 0 auto;
  padding: calc(var(--section) * 0.28) var(--pad-x) 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center;
}
.filter-knop {
  font-family: var(--font-text);
  font-size: 0.83rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue);
  background: none; border: 1px solid var(--hair-on-creme);
  padding: 0.63rem 1.32rem; cursor: pointer;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.filter-knop:hover { border-color: var(--blue); }
.filter-knop.actief { background: var(--gold); border-color: var(--gold); color: var(--blue); }

/* ————————————————————————————————————————————————
   Maison — editoriale opbouw
   Beeld en woord delen nooit een rij: beeldcompositie →
   zin → beeldcompositie → zin. Elke compositie is anders,
   elke zin staat op dezelfde maat.
   ———————————————————————————————————————————————— */

.ouverture,
.zin,
.tekstblok,
.lijst,
.compositie { --band: clamp(4rem, 9vw, 9.5rem); }

/* Galerie en de tekstpagina's openen op crème zonder beeld-hero: daar begint de
   balk blauw-op-crème en kleurt hij pas blauw zodra de kop voorbij is.
   Zonder deze regel staat een wit woordmerk onzichtbaar op een crème vlak. */
body[data-page="galerie"] .site-header:not(.scrolled):not(.menu-open),
body[data-page="tekst"] .site-header:not(.scrolled):not(.menu-open) { color: var(--blue); }
body[data-page="galerie"] .site-header:not(.scrolled):not(.menu-open) .brand-white,
body[data-page="tekst"] .site-header:not(.scrolled):not(.menu-open) .brand-white { opacity: 0; }
body[data-page="galerie"] .site-header:not(.scrolled):not(.menu-open) .brand-blue,
body[data-page="tekst"] .site-header:not(.scrolled):not(.menu-open) .brand-blue { opacity: 1; }

/* ——— Ouverture — alleen woorden ——— */
.ouverture {
  padding: clamp(7rem, 15vw, 13rem) var(--pad-x) var(--band);
  text-align: center;
}
.ouverture > .eyebrow { opacity: 0.55; margin-bottom: clamp(1.2rem, 2.2vw, 2rem); }
.zin > .eyebrow { opacity: 0.55; margin-bottom: clamp(0.9rem, 1.8vw, 1.5rem); }
.ouverture-titel {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 0.85rem + 5.5vw, 7rem);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.ouverture-titel em { font-style: italic; }
.ouverture-sub {
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem);
  line-height: 1.55;
  max-width: 68ch; text-wrap: balance;
  margin: clamp(1.6rem, 3vw, 2.6rem) auto 0;
  opacity: 0.72;
}

/* ——— De zin — één maat, gecentreerd of links ——— */
.zin { padding: var(--band) var(--pad-x); max-width: var(--wide); margin: 0 auto; }
.zin-tekst {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 0.75rem + 2.95vw, 3.7rem);
  line-height: 1.14;
  font-weight: 400;
}
.zin-midden { text-align: center; }
.zin-midden .zin-tekst { max-width: 22ch; margin: 0 auto; }
.zin-midden .body { margin: clamp(1.6rem, 3vw, 2.6rem) auto 0; opacity: 0.8; }
.zin-links .zin-tekst { max-width: 20ch; }
.zin-links .body { margin-top: clamp(1.6rem, 3vw, 2.6rem); opacity: 0.8; }

/* ——— Tekstblok — links, smal, zonder beeld ——— */
.tekstblok {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 var(--pad-x) var(--band);
  display: grid; grid-template-columns: clamp(110px, 12vw, 175px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 4rem);
}
.tekstblok .eyebrow { opacity: 0.55; }
.tekstblok .body { opacity: 0.85; max-width: 52ch; }
.tekstblok .body + .body { margin-top: 1.4rem; }

/* ——— Beeldcomposities ——— */
.compositie {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 var(--pad-x) var(--band);
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.8rem, 1.8vw, 1.8rem);
  align-items: start;
}
.compositie figure { margin: 0; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }
.band video, .band img, .compositie img, .compositie video { filter: grayscale(1) contrast(1.05); }

/* Volle band */
.band {
  margin: 0 auto var(--band);
  width: calc(100% - 2 * clamp(0.9rem, 1.4vw, 1.7rem));
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* Duo — groot rechts, klein links en lager */
.duo-groot { grid-column: 7 / 13; aspect-ratio: 5 / 6; }
.duo-klein {
  grid-column: 2 / 6; aspect-ratio: 3 / 2;
  align-self: end; margin-bottom: clamp(1.5rem, 4vw, 4.5rem);
}

/* Collage — vijf kaders, verstrooid over twee banen */
.collage .cf-1 { grid-column: 1 / 4;  grid-row: 1; aspect-ratio: 3 / 4; margin-top: clamp(1.5rem, 4vw, 4rem); }
.collage .cf-2 { grid-column: 5 / 10; grid-row: 1; aspect-ratio: 3 / 2; }
.collage .cf-3 { grid-column: 11 / 13; grid-row: 1; aspect-ratio: 3 / 4; margin-top: clamp(3rem, 8vw, 8rem); }
.collage .cf-4 { grid-column: 2 / 7;  grid-row: 2; aspect-ratio: 3 / 2; margin-top: clamp(1.5rem, 4vw, 4rem); }
.collage .cf-5 { grid-column: 8 / 12; grid-row: 2; aspect-ratio: 3 / 4; margin-top: clamp(-4rem, -6vw, -1rem); }

/* Drieluik — drie staande kaders, verspringend */
.drieluik .dl-1 { grid-column: 1 / 6;  aspect-ratio: 3 / 4; }
.drieluik .dl-2 { grid-column: 6 / 10; aspect-ratio: 3 / 4; margin-top: clamp(3rem, 9vw, 9rem); }
.drieluik .dl-3 { grid-column: 10 / 13; aspect-ratio: 3 / 4; margin-top: clamp(1rem, 3.5vw, 3.5rem); }

/* Rij van drie — de doorverwijzing */
.rij-drie { align-items: start; }
.rd-kaart { grid-column: span 4; display: block; }
.rd-media { aspect-ratio: 7 / 10; overflow: hidden; }
.rd-kaart h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 1.02rem + 1vw, 1.9rem);
  line-height: 1.15; margin-top: clamp(0.8rem, 1.4vw, 1.1rem);
}
.rd-kaart .eyebrow { opacity: 0.55; margin-top: 0.15rem; }

/* ——— Lijsten — namen met haarlijnen, zonder nummers ——— */
.lijst {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 var(--pad-x) var(--band);
}
.lijst-regel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2.2vw, 1.8rem) 0;
  border-top: 1px solid var(--hair-on-creme);
}
.lijst-regel:last-child { border-bottom: 1px solid var(--hair-on-creme); }
.lijst-regel h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 1.05rem + 1.15vw, 2.1rem);
  line-height: 1.14;
}
.lijst-regel .eyebrow { opacity: 0.6; }

/* ——— Responsief ——— */
@media (max-width: 900px) {
  .tekstblok { grid-template-columns: 1fr; gap: 1rem; }
  .duo-groot { grid-column: 6 / 13; }
  .duo-klein { grid-column: 1 / 6; margin-bottom: clamp(1rem, 3vw, 2.5rem); }
  .drieluik .dl-1 { grid-column: 1 / 7; }
  .drieluik .dl-2 { grid-column: 7 / 13; margin-top: clamp(2rem, 6vw, 5rem); }
  .drieluik .dl-3 { grid-column: 3 / 11; margin-top: clamp(1rem, 3vw, 2.5rem); }
  .collage .cf-1 { grid-column: 1 / 7; }
  .collage .cf-2 { grid-column: 7 / 13; aspect-ratio: 3 / 4; }
  .collage .cf-3 { grid-column: 1 / 6;  grid-row: 2; margin-top: 0; }
  .collage .cf-4 { grid-column: 6 / 13; grid-row: 2; margin-top: clamp(2rem, 6vw, 5rem); }
  .collage .cf-5 { grid-column: 3 / 11; grid-row: 3; margin-top: clamp(1rem, 3vw, 2.5rem); }
  .band { aspect-ratio: 4 / 3; }
}
@media (max-width: 620px) {
  .rd-kaart { grid-column: 1 / 13; }
  .rd-kaart + .rd-kaart { margin-top: clamp(1.6rem, 6vw, 2.6rem); }
  .rd-media { aspect-ratio: 4 / 3; }
  .lijst-regel { grid-template-columns: 1fr; gap: 0.2rem; }
  .duo-groot, .duo-klein { grid-column: 1 / 13; }
  .duo-klein { margin-bottom: 0; margin-top: clamp(1rem, 4vw, 2rem); }
  .drieluik .dl-1, .drieluik .dl-2, .drieluik .dl-3 { grid-column: 1 / 13; margin-top: 0; }
  .drieluik .dl-2, .drieluik .dl-3 { margin-top: clamp(1rem, 4vw, 2rem); }
  .collage .cf-1, .collage .cf-2, .collage .cf-3, .collage .cf-4, .collage .cf-5 {
    grid-column: 1 / 13; grid-row: auto; margin-top: 0;
  }
  .collage .cf { margin-top: clamp(1rem, 4vw, 2rem) !important; }
  .band { aspect-ratio: 4 / 3.4; }
}

/* ——— Het bonnetje op de beeldband — zelfde opmaak als de pakbon:
   blauw kaartje met crème inkt, woordmerk als briefhoofd met enkele
   lijn eronder, en een dubbel kader om de handeling. ——— */
.band-met-kaart { position: relative; }
.bandkaart-houder {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: var(--pad-x);
  pointer-events: none;
}
.bandkaart {
  pointer-events: auto;
  background: var(--blue); color: var(--creme);
  width: min(330px, 100%);
  padding: clamp(1.1rem, 1.6vw, 1.35rem) clamp(1.1rem, 1.6vw, 1.35rem) clamp(0.9rem, 1.3vw, 1.1rem);
  text-align: center;
  box-shadow: 0 20px 64px rgba(0, 22, 30, 0.34);
}
/* wint van .tile img / .band img, die beeld vullend en grijs maken */
.bandkaart .bk-merk {
  width: 160px; max-width: 80%; height: auto;
  object-fit: contain; filter: none; margin: 0 auto;
}
.bk-regel { border-top: 1px solid var(--hair-on-blue); margin-top: 0.65rem; }
.bk-kicker {
  font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  line-height: 1.8; opacity: 0.85; margin-top: 0.95rem;
}
.bk-titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.45rem; line-height: 1.15; margin-top: 0.3rem;
}
.bk-tekst {
  font-size: 0.9rem; line-height: 1.5; opacity: 0.85;
  margin-top: 0.55rem;
}
/* het dubbele kader van het bonnetje, hier om de call to action */
.bk-kader {
  display: block; margin-top: 0.95rem;
  border: 1px solid var(--hair-on-blue); padding: 2px;
}
.bk-kader-binnen {
  display: block;
  border: 1px solid var(--hair-on-blue);
  padding: 0.72rem 0.5rem;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
.bk-kader:hover .bk-kader-binnen { background: var(--creme); color: var(--blue); }
.bk-merci { font-style: italic; font-size: 0.86rem; opacity: 0.8; margin-top: 0.8rem; }

@media (max-width: 620px) {
  /* staand kader, anders vult het kaartje de hele band en verdwijnt de foto */
  .band-met-kaart { aspect-ratio: 3 / 4; }
  .bandkaart { width: min(300px, 100%); }
}

/* ——— Telefoon: raakvlakken en leesbaarheid ———
   Alles hieronder geldt alleen op smalle schermen; het bureaubladontwerp
   blijft zoals het is. Vuistregel: een vinger heeft ±44px nodig. */
@media (max-width: 640px) {
  .eyebrow { font-size: 0.78rem; letter-spacing: 0.2em; }

  /* Taalkeuze: was 9,5px met een raakvlak van 24px */
  .lang { gap: 0.4rem; }
  .lang a { font-size: 0.82rem; padding: 0.7rem 0.4rem; }
  .lang-sep { font-size: 0.82rem; }

  /* Menuknop en menu-items ruimer aantikbaar */
  .menu-knop { padding: 0.9rem 0.7rem; margin-left: -0.7rem; }
  .menu-zij a { padding-block: 0.5rem; }
  .menu-wa { padding: 0.7rem; margin: -0.7rem; }
  .menu-wa svg { width: 26px; height: 26px; }

  /* Stille links krijgen hoogte zonder hun vorm te verliezen */
  .stil-link { padding-block: 0.6rem; }

  /* Filterknoppen en partnerkaartjes */
  .filter-knop { font-size: 0.86rem; padding: 0.85rem 1.35rem; }
  .p-kaart .cta { padding-block: 0.75rem; }
  .p-kaart .cta span { font-size: 0.86rem; }
  .p-kaart .eyebrow { font-size: 0.78rem; }

  /* Voet: de juridische regel was 9,2px */
    .footer-gegevens a { display: inline-block; padding-block: 0.6rem; }
  .footer-onder { gap: 0.2rem; }
  .footer-onder p, .footer-onder a { font-size: 0.76rem; }
  .footer-onder a { display: inline-block; padding-block: 0.8rem; }

  /* Hoofdstukkaartjes: de call-to-action ruimer */
  .chapter .cta { padding-block: 0.5rem; }
}

/* ——— Galerie: banden, drieluiken en duo's met eigen ritme ——— */
.gz-band {
  margin: clamp(2rem, 4vw, 4rem) auto 0;
  max-width: none; padding: 0 clamp(0.8rem, 2vw, 2rem);
  overflow: hidden;
}
.gz-band img, .gz-band video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 21 / 9;
  filter: grayscale(1) contrast(1.05);
}
.gz-band-film video { aspect-ratio: 21 / 8; }

.gz-trio, .gz-duo {
  max-width: none; margin: clamp(2rem, 4vw, 4rem) auto 0;
  padding: 0 clamp(0.8rem, 2vw, 2rem);
  display: grid; gap: clamp(0.8rem, 1.6vw, 1.6rem);
  align-items: start;
}
.gz-trio { grid-template-columns: 1fr 1.25fr 1fr; }
.gz-duo { grid-template-columns: 1.6fr 1fr; }
.gz-beeld { margin: 0; overflow: hidden; position: relative; cursor: zoom-in; }
.gz-beeld img, .gz-beeld video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
  transition: transform 1.4s var(--ease-out);
}
.gz-beeld:hover img, .gz-beeld:hover video { transform: scale(1.03); }
.gz-hoog { aspect-ratio: 4 / 5.6; }
.gz-mid { aspect-ratio: 4 / 4.4; margin-top: clamp(1.6rem, 4vw, 4rem); }
.gz-breed { aspect-ratio: 4 / 3.2; }
.gz-smal { aspect-ratio: 4 / 4.8; margin-top: clamp(1.6rem, 4vw, 4rem); }

.gz-woord {
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) var(--pad-x) clamp(1rem, 2vw, 2rem);
  text-align: center;
}
.gz-woord .eyebrow { margin-bottom: 0.9rem; }
.gz-noot {
  display: block; text-align: center; opacity: 0.5;
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x) clamp(1rem, 2vw, 2rem);
}

/* Vergrootglas: het beeld groot over de pagina */
.gz-loep {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 22, 30, 0.94);
  display: grid; place-items: center;
  padding: clamp(1.5rem, 4vw, 4rem);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
  cursor: zoom-out;
}
.gz-loep.open { opacity: 1; visibility: visible; }
.gz-loep img, .gz-loep video {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: grayscale(1) contrast(1.05);
}
.gz-sluit {
  position: absolute; top: clamp(1rem, 2.4vw, 2rem); right: clamp(1rem, 2.4vw, 2rem);
  background: none; border: 0; cursor: pointer; color: var(--creme);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.8rem;
}

@media (max-width: 820px) {
  .gz-trio { grid-template-columns: 1fr 1fr; }
  .gz-trio .gz-beeld:last-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .gz-duo { grid-template-columns: 1fr; }
  .gz-mid, .gz-smal { margin-top: 0; }
}
@media (max-width: 560px) {
  .gz-trio { grid-template-columns: 1fr; }
  .gz-trio .gz-beeld:last-child { aspect-ratio: 4 / 4.4; }
  .gz-band img, .gz-band video, .gz-band-film video { aspect-ratio: 4 / 3; }
}


/* ——— Video's zonder bediening: Chrome toont anders een overlay-knop ——— */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
}
video { pointer-events: none; }

/* ——— Lichtbak (Galerie): beeld schermvullend, navigatie met het huispijltje ——— */
.gz-beeld, .gz-band { cursor: zoom-in; }
.lichtbak {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 22, 30, 0.94);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}
.lichtbak.open { opacity: 1; visibility: visible; }
.lb-vak {
  max-width: min(92vw, 1400px); max-height: 86svh;
  display: grid; place-items: center;
}
.lb-vak img, .lb-vak video {
  max-width: min(92vw, 1400px); max-height: 86svh;
  width: auto; height: auto; display: block;
  filter: grayscale(1) contrast(1.05);
  pointer-events: none;
}
.lb-knop {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: var(--gold);
  padding: 1.4rem clamp(1rem, 3vw, 2.6rem);
  display: grid; place-items: center;
}
.lb-knop i {
  position: relative; display: block;
  width: clamp(44px, 5vw, 72px); height: 1px; background: currentColor;
  transition: width 0.45s var(--ease-expo);
}
.lb-knop i::after {
  content: ""; position: absolute; top: 50%;
  width: 9px; height: 9px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform-origin: center;
}
.lb-volgende { right: 0; }
.lb-volgende i::after { right: -1px; transform: translateY(-50%) rotate(45deg) scale(0.8); }
.lb-vorige { left: 0; }
.lb-vorige i::after { left: -1px; transform: translateY(-50%) rotate(-135deg) scale(0.8); }
.lb-knop:hover i { width: clamp(64px, 7vw, 104px); }
.lb-sluit {
  position: absolute; top: clamp(1.2rem, 2.6vw, 2.2rem); right: clamp(1.2rem, 3vw, 2.6rem);
  background: none; border: 0; cursor: pointer; color: var(--creme);
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7;
  padding: 0.6rem;
}
.lb-sluit:hover { opacity: 1; }
.lb-teller {
  position: absolute; bottom: clamp(1.2rem, 2.6vw, 2.2rem); left: 50%; transform: translateX(-50%);
  color: var(--creme); opacity: 0.5;
  font-size: 0.68rem; letter-spacing: 0.2em;
}
@media (max-width: 700px) {
  .lb-knop { top: auto; bottom: clamp(1rem, 4vw, 2rem); transform: none; }
  .lb-teller { bottom: auto; top: clamp(1.2rem, 3vw, 2rem); }
}

/* De terroirkaart is geen foto: volledig tonen, in eigen kleur, zonder rand.
   Zij staat nu alleen in de kolom, dus zij krijgt de hele breedte. */
.zz-duo:has(.zd-kaart) { grid-template-columns: 1fr; }
.zd-kaart { overflow: visible; }
.zd-kaart img {
  position: static;
  width: 100%; height: auto;
  object-fit: contain;
  filter: none;
}

/* ——— Ons verhaal: twee beelden naast elkaar, strak uitgelijnd (Tremezzo-manier) ——— */
.zz-paar {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.2vw, 16px);
  align-items: stretch;
}
.zz-paar figure { margin: 0; overflow: hidden; aspect-ratio: 3 / 4.2; }
.zz-paar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
}
@media (max-width: 640px) { .zz-paar { grid-template-columns: 1fr; } }

/* ——— Cookiemelding, in de toon van het huis ——— */
.cookie-melding {
  position: fixed; z-index: 80;
  left: clamp(1rem, 3vw, 2.4rem); bottom: clamp(1rem, 3vw, 2.4rem);
  width: min(calc(100vw - 2rem), 420px);
  background: var(--creme); color: var(--blue);
  border: 1px solid var(--hair-on-creme);
  box-shadow: 0 20px 60px rgba(0, 22, 30, 0.18);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  display: grid; gap: 1rem;
}
.cookie-melding[hidden] { display: none; }
.cookie-melding p { font-size: 0.86rem; line-height: 1.65; opacity: 0.85; }
.cookie-melding a { border-bottom: 1px solid var(--hair-on-creme); }
.cookie-melding a:hover { border-bottom-color: var(--blue); }
.cookie-knoppen { display: flex; gap: 0.8rem; justify-content: flex-end; }
.cookie-knoppen button {
  font-family: var(--font-text); font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.7rem 1.4rem; cursor: pointer;
  background: none; border: 1px solid var(--hair-on-creme); color: var(--blue);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.cookie-knoppen button:hover { border-color: var(--blue); }
.cookie-knoppen .cookie-ja { background: var(--blue); border-color: var(--blue); color: var(--creme); }
.cookie-knoppen .cookie-ja:hover { background: #002c3c; }
@media (max-width: 520px) { .cookie-melding { left: 1rem; right: 1rem; width: auto; } }
/* De melding staat onderaan vast en zou op de aanvraagpagina precies de
   verstuurknop afdekken. Zolang zij er staat, schuift het kaartje omhoog. */
@media (max-width: 520px) {
  body:has(.cookie-melding:not([hidden])) .visite {
    padding-bottom: calc(clamp(1.5rem, 4vw, 4rem) + 13rem);
  }
}