/* ==========================================================================
   MEMOIR
   Alle kleuren, fonts en maten komen uit het design system en staan hier
   in :root. Pas ze daar aan en de hele site verandert mee.
   ========================================================================== */

:root {
  /* vlakken, exact uit het merkboek: Espresso en Cacao */
  --surface-900: #17110C;   /* Espresso, de basis */
  --surface-800: #2B2018;   /* Cacao, vlakken en kaarten */
  --surface-700: #352719;   /* een halve stap verder naar voren */

  /* tekst, op Perkament */
  --ink:        #F4EFE7;    /* Perkament */
  --ink-soft:   #CFC6B8;
  --ink-muted:  #90867A;
  --kaarslicht: #E6D3B0;    /* zachte tint, voor citaten */

  /* lijnen */
  --line:        rgba(244, 239, 231, 0.13);
  --line-strong: rgba(244, 239, 231, 0.22);

  /* wijnrood, het tweede accent */
  --wijn:        #5B2422;
  --wijn-diep:   #4C1D1B;
  --wijn-licht:  #8E3B33;

  /* accent */
  --champagne:        #D3B389;   /* het accent, spaarzaam */
  --champagne-deep:   #C09C6E;
  --champagne-donker: #7C5A2E;   /* champagne op papier, want lichter is te zwak */
  --champagne-veil:   rgba(211, 179, 137, 0.10);

  /* fonts */
  --font-display: "Cormorant Garamond", Georgia, Times, serif;
  --font-text:    "Work Sans", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-mono:    "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ruimte */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 32px;
  --space-4: 64px;
  --space-5: 120px;

  /* ronding */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 1240px;
  --gutter: 28px;
}

/* ---------------------------------------------------------------- basis */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-900);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--champagne); color: var(--surface-900); }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--champagne); color: var(--surface-900);
  padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ----------------------------------------------------------- typografie */

h1, h2, h3 { font-weight: 300; margin: 0; }

.display,
.display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
}

.display-xl {
  font-size: clamp(44px, 7.4vw, 86px);
  line-height: 0.96;
}

.display {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.display-sm {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.22;
}

.label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.lead  { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--ink-soft); }
.muted { color: var(--ink-muted); }
.soft  { color: var(--ink-soft); }
.small { font-size: 14px; line-height: 1.6; }

p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }

.measure { max-width: 60ch; }
.measure-sm { max-width: 44ch; }

/* de zin onder een paginakop staat op één regel zolang hij past */
.lead--breed { max-width: 96ch; text-wrap: balance; }
@media (max-width: 900px) { .lead--breed { max-width: 60ch; } }

/* --------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 90;
  padding: 20px 0;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(23, 17, 12, 0.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.site-header__row { display: flex; align-items: center; gap: var(--space-3); }

.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
}
.brand img { width: 26px; height: 26px; }
.brand span {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 300;
  letter-spacing: 0.34em; text-transform: uppercase;
  padding-left: 2px;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.nav a {
  text-decoration: none; font-size: 15px; color: var(--ink-soft);
  transition: color 0.25s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav .lang {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-muted);
}
.nav .lang:hover { color: var(--champagne); border-color: var(--champagne); }

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 1px; margin: 4px auto;
  background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
body.nav-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------------------------------------------------------------- knoppen */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  border: 1px solid var(--champagne);
  background: var(--champagne); color: var(--surface-900);
  font-family: var(--font-text); font-size: 15px; font-weight: 400;
  text-decoration: none; cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { background: var(--champagne-deep); border-color: var(--champagne-deep); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--champagne); color: var(--champagne); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; text-decoration: none; color: var(--champagne);
}
.arrow-link i {
  display: block; width: 18px; height: 1px; background: currentColor;
  transition: width 0.3s var(--ease);
}
.arrow-link:hover i { width: 30px; }

/* --------------------------------------------------------------- secties */

.section { padding: var(--space-5) 0; }
.section--tight { padding: var(--space-4) 0; }
.section + .section { border-top: 1px solid var(--line); }

.head-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  align-items: end; margin-bottom: var(--space-4);
}
.head-row > *:first-child > .label { margin-bottom: var(--space-2); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center; }
.split--wide { grid-template-columns: 1.15fr 1fr; }

/* ------------------------------------------------------------------ hero */

.hero { padding: var(--space-4) 0 var(--space-5); }

/* een paginakop met film erachter */
.hero--film {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 78vh; display: flex; align-items: flex-end;
  padding-top: var(--space-5); padding-bottom: var(--space-4);
}
.hero--film > .shell { position: relative; z-index: 2; width: 100%; }
.hero__film {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__filmsluier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12,10,9,.94) 0%, rgba(12,10,9,.74) 26%, rgba(12,10,9,.30) 58%, rgba(12,10,9,.46) 100%),
    radial-gradient(110% 86% at 6% 100%, rgba(12,10,9,.70), transparent 62%);
}
.hero--film .label { color: var(--champagne); }
.hero--film .display-xl { color: #F6F1E9; }
.hero--film .lead { color: rgba(246,241,233,.82); }
@media (max-width: 860px) { .hero--film { min-height: 66vh; } }
.hero__grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: var(--space-4); align-items: end;
}
.hero__title { margin: var(--space-2) 0 var(--space-3); }
.hero__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }

/* ------------------------------------------------------------ beeldplek */

.shot {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-800);
  background-size: cover; background-position: center;
}
.shot::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, var(--champagne-veil), transparent 62%),
    linear-gradient(152deg, var(--surface-700) 0%, var(--surface-900) 100%);
  transition: opacity 0.6s var(--ease);
}
.shot.is-photo::after { opacity: 0; }
.shot__rule {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line); z-index: 1;
}
.shot.is-photo .shot__rule { opacity: 0; }
.shot--16x9 { aspect-ratio: 16 / 9; }
.shot--4x5  { aspect-ratio: 4 / 5; }
.shot--1x1  { aspect-ratio: 1 / 1; }
.shot--3x2  { aspect-ratio: 3 / 2; }

.shot__tag {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-muted);
}
.shot.is-photo .shot__tag { opacity: 0; }

/* --------------------------------------------------------- dienstenlijst */

.index-list { border-top: 1px solid var(--line); }

.index-row {
  position: relative; display: grid;
  grid-template-columns: 72px 1.1fr 1.4fr;
  gap: var(--space-3); align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.45s var(--ease);
}
.index-row::before {
  content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 2px;
  background: var(--champagne); opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.index-row:hover { padding-left: 18px; }
.index-row:hover::before { opacity: 1; }
.index-row__n { font-family: var(--font-mono); font-size: 11px; color: var(--champagne); padding-top: 6px; }
.index-row h3 { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }
.index-row p { color: var(--ink-soft); font-size: 16px; }

/* ------------------------------------------------------------------ werk */

.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); }
.work-grid--3 { grid-template-columns: repeat(3, 1fr); }

.work-item { text-decoration: none; display: block; }
.work-item .shot { transition: transform 0.7s var(--ease); }
.work-item:hover .shot { transform: scale(1.015); }
.work-item__meta { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: 14px; }
.work-item h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.2; }
.work-item .label { padding-top: 7px; }

.work-row {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--space-4);
  align-items: center; padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.work-row:first-of-type { border-top: 1px solid var(--line); }
.work-row[id] { scroll-margin-top: 96px; }
.work-row:nth-child(even) .work-row__text { order: -1; }
.work-row__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }

.tag {
  display: inline-block; padding: 6px 13px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ------------------------------------------------------------- namenlijst */

.name-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px 0; margin: 0; padding: 0; list-style: none;
}
.name-list li {
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 21px;
}

/* --------------------------------------------------------------- panelen */

.panel {
  background: var(--surface-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.panel--accent {
  background: var(--champagne-veil);
  border-color: rgba(211, 179, 137, 0.26);
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.card {
  background: var(--surface-800); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--space-3);
}
.card h3 { font-family: var(--font-display); font-size: 25px; line-height: 1.2; margin-bottom: 10px; }
.card .label { margin-bottom: var(--space-2); }

/* -------------------------------------------------------------- tarieven */

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.price {
  display: flex; flex-direction: column;
  background: var(--surface-800); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--space-3);
}
.price--lead { border-color: rgba(211, 179, 137, 0.42); background: var(--champagne-veil); }
.pill {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  background: var(--champagne); color: var(--surface-900);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.price h3 { font-family: var(--font-display); font-size: 30px; margin-bottom: 6px; }
.price__amount {
  font-family: var(--font-display); font-size: 38px; line-height: 1.1;
  color: var(--champagne); margin: var(--space-2) 0 4px;
}
.price__per { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.price ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.price li {
  position: relative; padding: 9px 0 9px 22px; font-size: 15px;
  color: var(--ink-soft); border-top: 1px solid var(--line);
}
.price li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 9px; height: 1px; background: var(--champagne);
}
.price__foot { margin-top: auto; padding-top: var(--space-3); }

/* kopje boven een prijsrij */
.rail { border-left: 2px solid var(--champagne); padding-left: var(--space-2); }
.rail h3 { margin: 6px 0 10px; }

/* ------------------------------------------------------------- lopende band */

.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-3) 0; }
.marquee__track { display: flex; align-items: center; width: max-content; animation: slide 64s linear infinite; }
.marquee__track span {
  padding: 0 var(--space-3); white-space: nowrap;
  font-family: var(--font-display); font-size: 26px; color: var(--ink-muted);
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- stappen */

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { font-family: var(--font-mono); font-size: 11px; color: var(--champagne); padding-top: 6px; }
.step h3 { font-family: var(--font-display); font-size: 25px; line-height: 1.2; margin-bottom: 8px; }
.step p { color: var(--ink-soft); }

/* ------------------------------------------------------------- formulier */

.field { display: grid; gap: var(--space-1); }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px;
  background: var(--surface-800); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-text); font-size: 16px; font-weight: 300;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--champagne); background: var(--surface-700);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.form-grid .span-2 { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line); padding: var(--space-4) 0 var(--space-3); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); }
.footer-grid h4 { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid a { text-decoration: none; color: var(--ink-soft); font-size: 15px; transition: color 0.25s var(--ease); }
.footer-grid a:hover { color: var(--champagne); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-4); padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* -------------------------------------------------------------- beweging */

/* Alleen verbergen als javascript draait. Doet het dat niet, dan staat
   alle tekst er gewoon, in plaats van een lege pagina. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: 0.09s; }
[data-delay="2"] { transition-delay: 0.18s; }
[data-delay="3"] { transition-delay: 0.27s; }
[data-delay="4"] { transition-delay: 0.36s; }

.mask { display: block; overflow: hidden; }
.js .mask > span { display: block; transform: translateY(108%); transition: transform 1.05s var(--ease); }
.js .mask.is-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .mask > span { transform: none; }
}

/* ---------------------------------------------------------------- smaller */

@media (max-width: 1000px) {
  .hero__grid, .split, .split--wide, .work-row { grid-template-columns: 1fr; }
  .work-row:nth-child(even) .work-row__text { order: 0; }
  .cards, .price-grid, .work-grid--3 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .name-list { grid-template-columns: repeat(2, 1fr); }
  .index-row { grid-template-columns: 48px 1fr; }
  .index-row p { grid-column: 2; }
}

@media (max-width: 720px) {
  :root { --space-5: 76px; --space-4: 44px; --gutter: 20px; }
  body { font-size: 16px; }

  .nav {
    position: fixed; inset: 64px 0 auto; z-index: 80;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--surface-900); border-bottom: 1px solid var(--line);
    padding: var(--space-2) var(--gutter) var(--space-3);
    transform: translateY(-120%); transition: transform 0.45s var(--ease);
  }
  body.nav-open .nav { transform: none; }
  .nav a { padding: 14px 0; font-size: 19px; width: 100%; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: var(--space-2); }
  .burger { display: block; }

  .head-row { grid-template-columns: 1fr; gap: var(--space-2); align-items: start; }
  .work-grid, .work-grid--3, .cards, .price-grid, .footer-grid, .name-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .panel { padding: var(--space-3); }
  .step, .index-row { grid-template-columns: 40px 1fr; gap: var(--space-2); }
  .marquee__track span { font-size: 20px; }
  .hero__meta { gap: var(--space-2); }
  .btn { padding: 14px 22px; }
}

/* ==========================================================================
   DE CREATIEVE LAAG
   Korrel, de grote kop met beeld in de letters,
   de volle band, het getekende maakwerk en de letterproef.
   ========================================================================== */

/* ------------------------------------------------------------------ korrel */

.grain {
  position: fixed; inset: 0; z-index: 120; pointer-events: none;
  opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- volle breedte */

.bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ----------------------------------------------------------------- de kop */

.hero--big { padding: clamp(28px, 4vw, 56px) 0 0; }

.hero-type {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(34px, 5.3vw, 76px);
  line-height: 0.98; letter-spacing: -0.03em;
  margin: var(--space-3) 0 0;
}
.hero-type .r { display: block; }
.hero-type .r--in { padding-left: 5vw; }
.hero-type .r--out { padding-left: 0; }
.hero-type em { font-style: normal; letter-spacing: -0.02em; }

.fill { display: inline-block; color: var(--champagne); }
.fill.is-filled {
  background-image: var(--fill-img);
  background-size: 200% auto; background-position: 46% 6%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: brightness(1.45) saturate(1.15) contrast(1.04);
}

.hero-foot {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4); align-items: end;
  margin: var(--space-4) 0 var(--space-4);
}
.hero-keys { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* -------------------------------------------------------------- volle band */

.band {
  position: relative; overflow: hidden;
  height: clamp(240px, 40vw, 500px);
  background: var(--surface-800);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.band__img {
  position: absolute; left: 0; right: 0; top: -14%; bottom: -14%;
  background-size: cover; background-position: center 44%;
  will-change: transform;
}
.band__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--surface-900) 0%, rgba(23,17,12,0) 26%,
              rgba(23,17,12,0) 74%, var(--surface-900) 100%);
}
.band__tick {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(242, 237, 229, 0.14);
}

/* het draaiende zegel */
.seal {
  position: absolute; z-index: 4; right: 6vw; bottom: 26px;
  width: clamp(92px, 11vw, 126px); height: clamp(92px, 11vw, 126px);
}
.seal__spin { animation: draai 30s linear infinite; transform-origin: 50% 50%; }
.seal:hover .seal__spin { animation-duration: 9s; }
@keyframes draai { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- maakwerk */

.makes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

.make {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: linear-gradient(158deg, var(--surface-800) 0%, var(--surface-900) 100%);
  padding: var(--space-2) var(--space-2) var(--space-3);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), background 0.5s var(--ease);
}
.make::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(90% 70% at 70% 0%, var(--champagne-veil), transparent 70%);
  transition: opacity 0.5s var(--ease);
}
.make:hover { transform: translateY(-4px); border-color: rgba(211, 179, 137, 0.44); }
.make:hover::before { opacity: 1; }
.make > * { position: relative; z-index: 1; }

.make__art { aspect-ratio: 1 / 1; display: block; }
.make__art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.make__art .ln { fill: none; stroke: var(--champagne); stroke-width: 1; }
.make__art .ln-soft { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.make__art .ln-dash { fill: none; stroke: var(--champagne); stroke-opacity: 0.5; stroke-width: 1; stroke-dasharray: 3 5; }
.make__art .fl { fill: var(--champagne); }
.make__art .fl-soft { fill: var(--champagne-veil); }
.make__art .tx { fill: var(--ink); font-family: var(--font-display); font-weight: 300; }
.make__art .mono { fill: var(--ink-muted); font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.18em; }

.make h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.2; margin-top: var(--space-2); }
.make p { font-size: 13px; line-height: 1.55; color: var(--ink-muted); margin: 5px 0 0; }

/* ---------------------------------------- wat er uit de studio komt */

.maakspread {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-4); align-items: start; margin-top: var(--space-4);
}
.maakbeeld {
  margin: 0; border: 1px solid var(--line); overflow: hidden;
  position: sticky; top: calc(var(--space-4) + 46px);
}
.maakbeeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.maakindex { border-top: 1px solid var(--line-strong); }
.maakrij {
  display: grid; grid-template-columns: 2.4rem 1fr auto;
  gap: var(--space-2); align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.maakrij__n {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.2em; color: var(--champagne);
}
.maakrij__naam {
  font-family: var(--font-display); font-size: 23px; line-height: 1.15;
  transition: color 0.4s var(--ease);
}
.maakrij__uit {
  font-size: 12px; line-height: 1.5; color: var(--ink-muted);
  text-align: right; max-width: 30ch;
}
.maakrij:hover .maakrij__naam { color: var(--champagne-donker); }

/* ------------------------------------------------------------- letterproef */

.spec { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-4); align-items: center; }

.spec__glyph {
  position: relative;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(150px, 20vw, 280px); line-height: 0.76;
  color: var(--kaarslicht); letter-spacing: -0.04em;
  padding: var(--space-3) 0;
}
.spec__glyph em { font-style: normal; }
.spec__line { position: absolute; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.spec__note {
  position: absolute; right: 0; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted);
  transform: translateY(16px);
}

.font-row {
  display: grid; grid-template-columns: 132px 1fr; gap: var(--space-2);
  padding: var(--space-2) 0; border-top: 1px solid var(--line); align-items: baseline;
}
.font-row:last-of-type { border-bottom: 1px solid var(--line); }
.font-row__name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.font-row__sample { font-size: 26px; line-height: 1.2; color: var(--ink); }

.swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--space-3); }
.sw { width: 54px; }
.sw span { font-size: 7px; letter-spacing: 0.08em; }
.sw i { display: block; height: 54px; border-radius: 10px; border: 1px solid var(--line); }
.sw span { display: block; margin-top: 7px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--ink-muted); }

/* ---------------------------------------------------- lopende band, groter */

.marquee--big { border-top: 0; }
.marquee--big .marquee__track span {
  font-size: clamp(21px, 2.6vw, 34px); letter-spacing: 0; color: var(--ink-muted);
  padding: 0 var(--space-2);
}
.marquee__track .ruit { color: var(--champagne); font-size: 8px !important; padding: 0 2px; opacity: 0.8; }
.marquee--big { padding: var(--space-2) 0; }

/* ------------------------------------------------------ nummer bij het werk */

.work-item__n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--champagne); }

/* ------------------------------------------------------------------ smaller */

@media (max-width: 1000px) {
  .makes { grid-template-columns: repeat(2, 1fr); }
  .spec { grid-template-columns: 1fr; }
  .hero-foot { grid-template-columns: 1fr; align-items: start; }
  .hero-keys { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .hero-type { font-size: clamp(30px, 7.8vw, 44px); }
  .hero-type .r--in { padding-left: 4vw; }
  .makes { grid-template-columns: 1fr; }
  .maakspread { grid-template-columns: 1fr; gap: var(--space-3); }
  .maakbeeld { position: static; }
  .maakrij { grid-template-columns: 2.1rem 1fr; row-gap: 4px; }
  .maakrij__uit { grid-column: 2; text-align: left; max-width: 34ch; }
  .seal { right: 18px; bottom: 16px; }
  .spec__glyph { font-size: clamp(96px, 25vw, 170px); }
  .font-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .seal__spin { animation: none; }
}

/* staarten van letters als g en j niet laten afsnijden door het masker */
.hero-type .r { padding-bottom: 0.18em; margin-bottom: -0.14em; }

/* ==========================================================================
   HET VERHAAL
   Vier tekeningen die uitleggen wat er gebeurt: de cijferstrip, de kloof
   tussen binnen en buiten, de route, en hoe een jaar eruitziet.
   ========================================================================== */

/* ------------------------------------------------------------ cijferstrip */

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  padding: var(--space-3) 0;
}
.stat { border-left: 1px solid var(--line); padding-left: var(--space-2); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__n {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 5.2vw, 66px); line-height: 0.95; color: var(--champagne);
  letter-spacing: -0.03em;
}
.stat__l { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 24ch; }

/* --------------------------------------------------- binnen tegenover buiten */

.gap { display: grid; grid-template-columns: 1fr 1px 1fr; gap: var(--space-4); align-items: start; }
.gap__mid {
  align-self: stretch; min-height: 100%;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 5px, transparent 5px 12px);
}
.gap__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.gap__list li {
  position: relative; padding: 14px 0 14px 24px;
  border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-soft);
}
.gap__list li::before {
  content: ""; position: absolute; left: 0; top: 23px; width: 10px; height: 1px;
  background: var(--champagne);
}
.gap--koud .gap__list li { color: var(--ink-muted); }
.gap--koud .gap__list li::before { background: var(--ink-muted); width: 5px; }
.gap__note {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.3; color: var(--kaarslicht); max-width: 46ch;
}
.paper .gap__note { color: var(--ink); }

/* ----------------------------------------------------------------- de route */

.route { position: relative; margin-top: var(--space-3); }
.route::before {
  content: ""; position: absolute; left: 4px; top: 34px; bottom: 34px; width: 1px;
  background: var(--line-strong);
}
.stop { display: grid; grid-template-columns: 112px 1fr; gap: var(--space-3); padding: var(--space-3) 0; }
.stop + .stop { border-top: 1px solid var(--line); }
.stop__n {
  display: flex; align-items: center; gap: 14px; padding-top: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--champagne);
}
.stop__n i {
  flex: none; width: 9px; height: 9px; border-radius: 999px;
  border: 1px solid var(--champagne); background: var(--surface-900);
}
.stop h3 { font-family: var(--font-display); font-size: clamp(25px, 3vw, 34px); line-height: 1.15; }
.stop p { color: var(--ink-soft); margin: 10px 0 0; max-width: 58ch; }
.stop__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }

/* ------------------------------------------------------------ het jaar */

.year { border-top: 1px solid var(--line-strong); margin-top: var(--space-3); }
.year__row {
  display: grid; grid-template-columns: 164px repeat(var(--kol, 12), 1fr);
  align-items: stretch; border-bottom: 1px solid var(--line); min-height: 34px;
}
.year__row--head { min-height: 26px; border-bottom-color: var(--line-strong); }
.year__name {
  display: flex; align-items: center;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted); padding-right: var(--space-2);
  white-space: nowrap;
}
.year__cell { display: grid; place-items: center; }
.year__row--head .year__cell {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-muted);
}
.year__cell b { display: block; width: calc(100% - 10px); height: 9px; border-radius: 999px; }
.year__cell .vol { background: var(--champagne); }
.year__cell .zacht { background: rgba(211, 179, 137, 0.20); }
.year__cell .stip { width: 5px; height: 5px; border-radius: 999px; background: var(--champagne); }
.year__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted);
}
.year__legend span { display: inline-flex; align-items: center; gap: 8px; }
.year__legend i { width: 16px; height: 9px; border-radius: 2px; display: block; }
.year__legend i.rond { width: 7px; height: 7px; border-radius: 999px; }

/* ------------------------------------------------------------------ smaller */

@media (max-width: 1000px) {
  .stats { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-2); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .gap { grid-template-columns: 1fr; gap: var(--space-3); }
  .gap__mid { display: none; }
  .year__row { grid-template-columns: 96px repeat(var(--kol, 12), 1fr); }
  .year__name { font-size: 9px; letter-spacing: 0.1em; }
}

@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stop { grid-template-columns: 1fr; gap: var(--space-1); }
  .route::before { display: none; }
  .year__row { grid-template-columns: 88px repeat(var(--kol, 12), 1fr); min-height: 40px; }
  .year__name { font-size: 8px; letter-spacing: 0.06em; }
  .year__cell b { width: calc(100% - 8px); }
  .year__row--head .year__cell { font-size: 8px; }
}

/* ==========================================================================
   LICHTE VLAKKEN
   Een sectie met de klasse paper draait de hele kleurset om. Omdat elk
   onderdeel met variabelen werkt, past alles zich vanzelf aan: lijnen,
   knoppen, tekeningen, labels. Zo krijgt de pagina lucht.
   ========================================================================== */

.paper {
  --surface-900: #F4EFE7;   /* Perkament */
  --surface-800: #EAE2D4;
  --surface-700: #DDD3C2;
  --ink:       #17110C;     /* Espresso op Perkament, 9,4 op 1 */
  --ink-soft:  #3C2F23;
  --ink-muted: #7A6E60;
  --line:        rgba(23, 17, 12, 0.14);
  --line-strong: rgba(23, 17, 12, 0.28);
  --champagne:      #7C5A2E;
  --champagne-deep: #5E4322;
  --champagne-veil: rgba(124, 90, 46, 0.10);
  background: var(--surface-900);
  color: var(--ink);
  border-top: 0 !important;
}
.paper + .paper { border-top: 1px solid var(--line) !important; }
.paper .btn { color: #f6f2ea; }

/* ------------------------------------------------------------ foto als kop */

.hero--shot {
  position: relative; overflow: hidden;
  min-height: min(92vh, 860px); display: flex; align-items: flex-end;
  padding: calc(var(--space-5) + 40px) 0 var(--space-4);
}
.hero--shot .shell { position: relative; z-index: 2; width: 100%; }
.hero__bg {
  position: absolute; inset: -6% 0; z-index: 0;
  background: var(--surface-800) center/cover no-repeat;
  will-change: transform;
}
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(23,17,12,0.95) 0%, rgba(23,17,12,0.84) 40%, rgba(23,17,12,0.55) 74%, rgba(23,17,12,0.70) 100%),
    linear-gradient(to top, rgba(23,17,12,0.96) 0%, rgba(23,17,12,0) 42%);
}
.hero__seal { position: absolute; right: 5vw; bottom: 44px; z-index: 3; }
.hero__seal .seal { position: static; }

/* een volle foto met tekst erover, tussen twee secties in */

.plate {
  position: relative; overflow: hidden;
  min-height: min(76vh, 660px); display: flex; align-items: center;
  padding: var(--space-5) 0;
}
.plate__bg { position: absolute; inset: -8% 0; background: var(--surface-800) center/cover no-repeat; will-change: transform; }
.plate__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(23,17,12,0.90) 0%, rgba(23,17,12,0.62) 46%, rgba(23,17,12,0.22) 100%);
}
.plate .shell { position: relative; z-index: 2; }
.plate h2 { max-width: 20ch; }

/* -------------------------------------------------- tweekleurige koppen */

.two-tone em { font-style: normal; color: var(--champagne); }

/* -------------------------------------------------------- de route met golf */

.path { position: relative; margin-top: var(--space-4); }
.path__wave {
  position: absolute; left: 6%; right: 6%; top: 10px; height: 62px;
  width: 88%; z-index: 0; overflow: visible;
}
.path__wave path { fill: none; stroke: var(--champagne); stroke-width: 1; }
.path__spoor { stroke-dasharray: 3 6; opacity: 0.4; }
.path__inkt {
  stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: var(--lijn, 1600);
  stroke-dashoffset: calc(var(--lijn, 1600) * (1 - var(--trek, 1)));
}
.pstep__n, .pstep h3 { transition: color 0.55s var(--ease); }
.js .pstep__n { color: var(--ink-muted); }
.js .pstep h3 { color: var(--ink-soft); }
.js .pstep.is-aan .pstep__n { color: var(--champagne); }
.js .pstep.is-aan h3 { color: var(--ink); }
.js .pstep.is-aan .pstep__ico {
  border-color: var(--champagne); background: var(--champagne-veil);
}
.path__steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }

.pstep { text-align: center; }
.pstep__ico {
  width: 72px; height: 72px; margin: 0 auto var(--space-2);
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface-900);
  display: grid; place-items: center;
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease), background 0.45s var(--ease);
}
.pstep__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--champagne); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.pstep:hover .pstep__ico { border-color: var(--champagne); transform: translateY(-3px); background: var(--champagne-veil); }
.pstep__n { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; color: var(--champagne); display: block; margin-bottom: 8px; }
.pstep h3 { font-family: var(--font-display); font-size: 23px; line-height: 1.2; }
.pstep p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 8px auto 0; max-width: 26ch; }
.pstep__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--space-2); }
.pstep__tags .tag { font-size: 8.5px; padding: 5px 10px; }

/* --------------------------------------------- de maandstrip op licht papier */

.paper .year__cell b:not(.stip) { height: 16px; border-radius: 999px; }
.paper .year__cell .zacht { background: rgba(27, 20, 14, 0.14); }

/* -------------------------------------------------------------- smaller */

@media (max-width: 1000px) {
  .path__steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-2); }
  .path__wave { display: none; }
  .hero--shot { min-height: 0; padding: var(--space-4) 0; }
  .plate { min-height: 0; padding: var(--space-4) 0; }
  .plate__veil { background: linear-gradient(90deg, rgba(23,17,12,0.92) 0%, rgba(23,17,12,0.72) 70%, rgba(23,17,12,0.5) 100%); }
}

@media (max-width: 720px) {
  .path__steps { grid-template-columns: 1fr 1fr; }
  .pstep__ico { width: 58px; height: 58px; }
  .pstep__ico svg { width: 22px; height: 22px; }
  .pstep h3 { font-size: 20px; }
  .hero__seal { right: 16px; bottom: 18px; }
}

/* ==========================================================================
   HET MENU
   Een dunne voortgangslijn bovenaan, een kleine kop, en een menu dat het
   hele scherm vult met de foto van de pagina waar je naartoe gaat.
   ========================================================================== */

.grain { z-index: 60; }
.site-header { z-index: 130; }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 140; pointer-events: none; }
.progress i { display: block; height: 100%; width: 0; background: var(--champagne); transition: width 0.12s linear; }

.head-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

.menu-btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 18px 11px 15px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.menu-btn:hover { border-color: var(--champagne); color: var(--champagne); }
.menu-btn__lines { display: block; width: 18px; }
.menu-btn__lines i {
  display: block; height: 1px; background: currentColor; margin: 4px 0;
  transition: transform 0.4s var(--ease), width 0.4s var(--ease);
}
.menu-btn__lines i:last-child { width: 11px; margin-left: auto; }
.menu-btn:hover .menu-btn__lines i:last-child { width: 18px; }
body.nav-open .menu-btn__lines i:first-child { transform: translateY(2.5px) rotate(45deg); }
body.nav-open .menu-btn__lines i:last-child { width: 18px; transform: translateY(-2.5px) rotate(-45deg); }
.menu-btn__woord .is-open { display: none; }
body.nav-open .menu-btn__woord .is-dicht { display: none; }
body.nav-open .menu-btn__woord .is-open { display: inline; }

/* het vlak zelf */

.menu {
  position: fixed; inset: 0; z-index: 120;
  background: var(--surface-900);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
  display: flex; align-items: center;
  overflow-y: auto;
}
body.nav-open .menu { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

.menu__inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5);
  align-items: center; padding-top: 110px; padding-bottom: var(--space-4); width: 100%;
}

.menu__nav { display: grid; }
.menu__nav a {
  position: relative; display: flex; align-items: baseline; gap: var(--space-3);
  padding: clamp(10px, 1.6vw, 20px) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.04; letter-spacing: -0.03em; text-decoration: none; color: var(--ink);
  opacity: 0; transform: translateY(18px);
  transition: color 0.3s var(--ease), padding-left 0.45s var(--ease),
              opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
body.nav-open .menu__nav a { opacity: 1; transform: none; }
body.nav-open .menu__nav a:nth-child(1) { transition-delay: 0.10s; }
body.nav-open .menu__nav a:nth-child(2) { transition-delay: 0.16s; }
body.nav-open .menu__nav a:nth-child(3) { transition-delay: 0.22s; }
body.nav-open .menu__nav a:nth-child(4) { transition-delay: 0.28s; }
body.nav-open .menu__nav a:nth-child(5) { transition-delay: 0.34s; }
.menu__nav a i {
  font-family: var(--font-mono); font-style: normal; font-size: 10px;
  letter-spacing: 0.22em; color: var(--champagne); flex: none; width: 34px;
}
.menu__nav a:hover, .menu__nav a[aria-current="page"] { color: var(--champagne); padding-left: 16px; }

.menu__side { display: grid; gap: var(--space-3); }
.menu__shot {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  background: var(--surface-800) center/cover no-repeat;
  border: 1px solid var(--line);
  transition: opacity 0.4s var(--ease);
}
.menu__meta a { color: var(--champagne); text-decoration: none; }

@media (max-width: 900px) {
  .menu__inner { grid-template-columns: 1fr; gap: var(--space-3); align-items: start; padding-top: 96px; }
  .menu__side { display: none; }
  .menu { align-items: flex-start; }
  .head-cta { display: none; }
}
@media (max-width: 420px) {
  .menu-btn__woord { display: none; }
  .menu-btn { padding: 11px 14px; }
}

/* ==========================================================================
   HET TECHNISCHE DEEL
   Een contactblad met alle klantfoto's, een specificatieblad, en het
   schema dat laat zien hoe een pagina een aanbeveling wordt.
   ========================================================================== */

/* --------------------------------------------------------- contactblad */

.sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.frame .shot { aspect-ratio: 4 / 5; }
.frame__meta {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted);
}
.frame__meta b { color: var(--champagne); font-weight: 400; }

/* ------------------------------------------------------ specificatieblad */

.specs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); }
.spec-col { border-left: 1px solid var(--line); padding: var(--space-3) var(--space-2); }
.spec-col:first-child { border-left: 0; padding-left: 0; }
.spec-col h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.2; margin-bottom: var(--space-2); }
.spec-col ul { list-style: none; margin: 0; padding: 0; }
.spec-col li {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  font-family: var(--font-mono); font-size: 10px; line-height: 1.6; letter-spacing: 0.04em;
  color: var(--ink-muted); padding: 10px 0; border-top: 1px solid var(--line);
}
.spec-col li b { color: var(--champagne); font-weight: 400; text-align: right; flex: none; max-width: 56%; }
.specs__note { margin-top: var(--space-3); }

/* ---------------------------------------------------------- het schema */

.flow { margin-top: var(--space-3); }
.flow svg { width: 100%; height: auto; display: block; overflow: visible; }
.flow .bx { fill: var(--surface-800); stroke: var(--line-strong); stroke-width: 1; }
.flow .bx-a { fill: var(--champagne-veil); stroke: var(--champagne); stroke-width: 1; }
.flow .ln { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.flow .ar { fill: none; stroke: var(--champagne); stroke-width: 1; stroke-dasharray: 3 5; }
.flow .tip { fill: var(--champagne); }
.flow .tx { fill: var(--ink); font-family: var(--font-display); font-size: 19px; }
.flow .mn { fill: var(--ink-muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; }
.flow .cd { fill: var(--champagne); font-family: var(--font-mono); font-size: 9.5px; }
.flow .rl { stroke: var(--line); stroke-width: 1; }

/* ---------------------------------------------------------------- smaller */

@media (max-width: 1000px) {
  .specs { grid-template-columns: 1fr 1fr; }
  .spec-col:nth-child(3) { border-left: 0; padding-left: 0; }
  .spec-col { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .sheet { grid-template-columns: 1fr 1fr; gap: var(--space-1); }
  .specs { grid-template-columns: 1fr; }
  .spec-col { border-left: 0; padding-left: 0; }
}

/* het schema is te fijn voor een telefoon, dus daar schuif je hem opzij */
@media (max-width: 760px) {
  .flow { overflow-x: auto; padding-bottom: var(--space-1); }
  .flow svg { min-width: 700px; }
  .flow::after {
    content: ""; display: block; height: 1px;
  }
}

/* het bouwstempel onderaan, zodat je ziet welke versie live staat */
.stempel { color: var(--champagne); opacity: 0.75; }

/* ==========================================================================
   FOTO'S ALS GEWONE IMG
   Geen achtergrondafbeeldingen meer en geen javascript: een img is het
   betrouwbaarste dat html heeft. Hij laadt ook als al het andere faalt.
   ========================================================================== */

.shot__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
img.hero__bg, img.plate__bg, img.band__img {
  /* De -8% hierboven is bedoeld om het vlak groter te maken dan de band.
     Samen met height:100% liet dat onderaan een streep achtergrond zien. */
  inset: 0;
  width: 100%; height: 100%; object-fit: cover; max-width: none;
}

/* ==========================================================================
   DE BALK, ZOALS BIJ MORII
   Menu links, de naam in het midden, de twee links rechts. Geen knoppen,
   alleen tekst, en pas een achtergrond zodra je gaat scrollen.
   ========================================================================== */

.site-header__row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--space-2);
}
.site-header__row .menu-btn { justify-self: start; }
.site-header__row .brand { justify-self: center; }
.site-header__row .head-right { justify-self: end; margin-left: 0; gap: var(--space-3); }

/* de menuknop is geen pil meer, alleen twee streepjes en een woord */
.menu-btn {
  border: 0; padding: 0; background: none; color: var(--ink);
  gap: 12px;
}
.menu-btn:hover { color: var(--champagne); }

.head-link {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}
.head-link:hover { color: var(--champagne); }
.head-right .lang {
  border: 0; padding: 0; border-radius: 0; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1px; text-decoration-color: var(--champagne);
}
.head-right .lang:hover { color: var(--champagne); border: 0; }

.brand span { font-size: 19px; letter-spacing: 0.3em; }

@media (max-width: 720px) {
  .site-header__row { gap: var(--space-1); }
  .head-right .head-link:not(.lang) { display: none; }
  .brand span { font-size: 16px; letter-spacing: 0.24em; }
  .brand img { width: 20px; height: 20px; }
}
@media (max-width: 420px) {
  .menu-btn__woord { display: none; }
}

/* ==========================================================================
   DE KALE BANNER
   Geen bovenschrift, geen labeltjes, de tekst in het midden. En de balk
   bovenaan is echt weg: geen vlak, geen lijn, alleen de letters.
   ========================================================================== */

.site-header,
.site-header.is-stuck {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
}

.hero--midden { align-items: center; text-align: center; }
.hero--midden .hero-type { margin: 0 auto; }
.hero--midden .hero-type .r--in { padding-left: 0; }
.hero--midden .lead {
  max-width: 54ch; margin: var(--space-3) auto 0;
}
.hero--midden .hero__meta { justify-content: center; margin-top: var(--space-4); }

/* de sluier van onder en boven, want de tekst staat nu op de foto zelf */
.hero--midden .hero__veil {
  background:
    radial-gradient(120% 86% at 50% 48%, rgba(23,17,12,0.38) 0%, rgba(23,17,12,0.74) 62%, rgba(23,17,12,0.92) 100%),
    linear-gradient(to bottom, rgba(23,17,12,0.86) 0%, rgba(23,17,12,0.30) 26%, rgba(23,17,12,0.40) 68%, rgba(23,17,12,0.94) 100%);
}

/* de kop zweeft boven de foto, de foto begint bovenaan de pagina */
.site-header { position: fixed; top: 0; left: 0; right: 0; }
.hero { padding-top: calc(var(--space-4) + 72px); }
.hero--shot { padding-top: calc(var(--space-5) + 72px); }

/* de onderkant van de banner vervloeit in de pagina, geen naad */
.hero--shot { padding-bottom: calc(var(--space-5) + 40px); }
.hero--shot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 42%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(23, 17, 12, 0) 0%,
    rgba(23, 17, 12, 0.45) 42%,
    rgba(23, 17, 12, 0.86) 76%,
    #17110C 100%);
}
.hero--midden .hero__veil {
  background:
    radial-gradient(118% 84% at 50% 44%, rgba(23,17,12,0.34) 0%, rgba(23,17,12,0.70) 60%, rgba(23,17,12,0.86) 100%),
    linear-gradient(to bottom, rgba(23,17,12,0.84) 0%, rgba(23,17,12,0.28) 24%, rgba(23,17,12,0.30) 58%, rgba(23,17,12,0.55) 100%);
}

/* een rustige wenk onderaan de banner, in plaats van een gat */
.hero--shot { padding-bottom: var(--space-5); }
.scrollcue {
  position: absolute; left: 50%; bottom: 34px; z-index: 3;
  transform: translateX(-50%); text-align: center; pointer-events: none;
}
.scrollcue span {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-muted);
}
.scrollcue i {
  display: block; width: 1px; height: 56px; margin: 0 auto;
  background: rgba(242, 237, 229, 0.16); position: relative; overflow: hidden;
}
.scrollcue i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 20px;
  background: var(--champagne); animation: zakken 2.6s var(--ease) infinite;
}
@keyframes zakken {
  0%   { transform: translateY(-24px); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}
@media (max-width: 720px) { .scrollcue { display: none; } }
@media (prefers-reduced-motion: reduce) { .scrollcue i::after { animation: none; opacity: 0.5; } }

/* de film in de banner, over de foto heen zodra hij speelt */
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; max-width: none;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.hero__video.is-aan { opacity: 1; }

/* de film is zelf al donker, dus de sluier mag lichter */
.hero--midden .hero__veil {
  background:
    radial-gradient(118% 84% at 50% 44%, rgba(23,17,12,0.20) 0%, rgba(23,17,12,0.56) 62%, rgba(23,17,12,0.84) 100%),
    linear-gradient(to bottom, rgba(23,17,12,0.72) 0%, rgba(23,17,12,0.18) 24%, rgba(23,17,12,0.22) 58%, rgba(23,17,12,0.50) 100%);
}

/* ------------------------------------------------------------ geluidknop */

.geluid {
  position: absolute; right: 34px; bottom: 34px; z-index: 4;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 18px; border-radius: 999px;
  background: rgba(23, 17, 12, 0.42); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink-soft); cursor: pointer;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.geluid:hover { border-color: var(--champagne); color: var(--champagne); }
.geluid[hidden] { display: none; }

.geluid i { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.geluid i b { display: block; width: 2px; height: 3px; background: currentColor; }
.geluid[aria-pressed="true"] i b { animation: wip 0.9s ease-in-out infinite; }
.geluid[aria-pressed="true"] i b:nth-child(2) { animation-delay: 0.18s; }
.geluid[aria-pressed="true"] i b:nth-child(3) { animation-delay: 0.36s; }
@keyframes wip { 0%, 100% { height: 3px; } 50% { height: 11px; } }

.geluid .is-aan { display: none; }
.geluid[aria-pressed="true"] .is-uit { display: none; }
.geluid[aria-pressed="true"] .is-aan { display: inline; }

@media (max-width: 720px) { .geluid { right: 18px; bottom: 18px; padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .geluid i b { animation: none !important; } }

/* de film heeft ook lichte beelden, dus de sluier iets steviger */
.hero--midden .hero__veil {
  background:
    radial-gradient(120% 86% at 50% 44%, rgba(23,17,12,0.34) 0%, rgba(23,17,12,0.66) 60%, rgba(23,17,12,0.88) 100%),
    linear-gradient(to bottom, rgba(23,17,12,0.76) 0%, rgba(23,17,12,0.26) 24%, rgba(23,17,12,0.30) 58%, rgba(23,17,12,0.56) 100%);
}

/* ==========================================================================
   DE LEGE BANNER EN DE VRAAG
   De film vult het scherm, verder niets. De vraag komt zodra je scrolt.
   ========================================================================== */

.hero--leeg {
  min-height: 100vh; min-height: 100svh;
  padding: 0; display: block;
}
.hero--leeg .hero__veil {
  background: linear-gradient(to bottom,
    rgba(23, 17, 12, 0.74) 0%,
    rgba(23, 17, 12, 0.12) 20%,
    rgba(23, 17, 12, 0.06) 52%,
    rgba(23, 17, 12, 0.46) 84%,
    rgba(23, 17, 12, 0.80) 100%);
}
.hero--leeg::after { height: 30%; }

/* de vraag, als eerste wat je leest */

.vraag { text-align: center; padding: calc(var(--space-5) + 30px) 0; }
.vraag__kop {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(34px, 5.6vw, 82px); line-height: 1.04; letter-spacing: -0.03em;
  max-width: 24ch; margin: 0 auto;
}
.vraag .lead { max-width: 56ch; margin: var(--space-4) auto 0; }
.vraag .hero__meta { justify-content: center; margin-top: var(--space-4); }

@media (max-width: 720px) {
  .vraag { padding: var(--space-5) 0; }
  .vraag__kop { font-size: clamp(28px, 8.4vw, 46px); }
}

/* ==========================================================================
   DE OPENING
   Je komt binnen op zwart. De film begint. Pas daarna komt het logo rustig
   op, dan het menu, dan de rest. Zonder javascript sla je dit over en zie
   je de pagina meteen, zoals het hoort.
   ========================================================================== */

.gordijn { display: none; }
.js .gordijn {
  display: block; position: fixed; inset: 0; z-index: 200;
  background: #17110C; pointer-events: none;
  opacity: 1; transition: opacity 1.8s var(--ease);
}
.js.is-wakker .gordijn { opacity: 0; }

/* alles in de banner wacht netjes zijn beurt */
.js body.met-film .brand,
.js body.met-film .menu-btn,
.js body.met-film .scrollcue,
.js body.met-film .geluid {
  opacity: 0; transform: translateY(-5px);
}
.js.is-wakker body.met-film .brand,
.js.is-wakker body.met-film .menu-btn,
.js.is-wakker body.met-film .scrollcue,
.js.is-wakker body.met-film .geluid {
  opacity: 1; transform: none;
  transition: opacity 2s var(--ease), transform 2s var(--ease);
}
.js.is-wakker body.met-film .brand    { transition-delay: 1.5s; }
.js.is-wakker body.met-film .menu-btn { transition-delay: 2.5s; }
.js.is-wakker body.met-film .scrollcue { transition-delay: 3.3s; opacity: 0.9; }
.js.is-wakker body.met-film .geluid   { transition-delay: 3.7s; opacity: 0.85; }

/* het menu mag ingetogen blijven staan */
body.met-film .menu-btn { color: var(--ink-soft); }
body.met-film .menu-btn:hover { color: var(--champagne); }

@media (prefers-reduced-motion: reduce) {
  .js .gordijn { display: none; }
  .js body.met-film .brand,
  .js body.met-film .menu-btn,
  .js body.met-film .scrollcue,
  .js body.met-film .geluid { opacity: 1; transform: none; }
}

/* ==========================================================================
   MEER KLEUR
   Kaarslicht neemt de cursieve regels over, zodat champagne weer het ene
   accent per scherm is. En er is nu een wijnrood vlak, precies zoals het
   merkboek het voorschrijft: nooit naast champagne.
   ========================================================================== */

.two-tone em { color: var(--kaarslicht); }
.paper .two-tone em { color: var(--champagne); }

.wijn {
  --surface-900: #5B2422;
  --surface-800: #4C1D1B;
  --surface-700: #6B2E2B;
  --ink:        #E6D3B0;
  --ink-soft:   #DCC7A2;
  --ink-muted:  #B99F80;
  --line:        rgba(230, 211, 176, 0.20);
  --line-strong: rgba(230, 211, 176, 0.34);
  --champagne:      #E6D3B0;
  --champagne-deep: #F4EFE7;
  --champagne-veil: rgba(230, 211, 176, 0.10);
  background: var(--surface-900); color: var(--ink);
  border-top: 0 !important;
}
.wijn .two-tone em { color: #F4EFE7; }
.wijn .btn { background: var(--kaarslicht); border-color: var(--kaarslicht); color: #5B2422; }
.wijn .btn:hover { background: #F4EFE7; border-color: #F4EFE7; }

/* ==========================================================================
   HET MENU ALS GLAZEN BALK
   Links een smalle, doorschijnende baan over de film. De tabs komen daar
   een voor een in, klein en rustig.
   ========================================================================== */

.menu {
  inset: 0 auto 0 0; width: min(430px, 88vw);
  background: rgba(43, 32, 24, 0.34);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  border-right: 1px solid rgba(211, 179, 137, 0.22);
  box-shadow: 40px 0 90px rgba(23, 17, 12, 0.34);
  opacity: 1; visibility: hidden;
  transform: translateX(-101%);
  transition: transform 0.85s var(--ease), visibility 0.85s;
  align-items: center;
}
body.nav-open .menu { transform: none; visibility: visible; }

.menu__inner {
  grid-template-columns: 1fr; gap: var(--space-4);
  padding: 110px var(--space-3) var(--space-3);
  align-items: start;
}
.menu__side { display: block; }
.menu__shot { display: none; }

.menu__nav a {
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.2;
  padding: 15px 0; gap: var(--space-2);
  border-bottom: 1px solid var(--line);
  transform: translateX(-16px);
  transition: color 0.3s var(--ease), padding-left 0.45s var(--ease),
              opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.menu__nav a i { font-size: 8.5px; width: 22px; opacity: 0.8; }
body.nav-open .menu__nav a { transform: none; }
body.nav-open .menu__nav a:nth-child(1) { transition-delay: 0.42s; }
body.nav-open .menu__nav a:nth-child(2) { transition-delay: 0.52s; }
body.nav-open .menu__nav a:nth-child(3) { transition-delay: 0.62s; }
body.nav-open .menu__nav a:nth-child(4) { transition-delay: 0.72s; }
body.nav-open .menu__nav a:nth-child(5) { transition-delay: 0.82s; }
.menu__nav a:hover { padding-left: 10px; }

.menu__meta {
  opacity: 0; transition: opacity 0.9s var(--ease) 0.95s;
  border-top: 1px solid var(--line); padding-top: var(--space-3);
}
body.nav-open .menu__meta { opacity: 1; }
.menu__meta .label { color: var(--kaarslicht); }

@media (max-width: 900px) {
  .menu__inner { padding-top: 96px; }
  .menu__side { display: block; }
}

/* ==========================================================================
   DE GLAZEN BAAN, ZACHTER
   Geen rand meer. De baan vervaagt aan zijn rechterkant in de film, en het
   glas bouwt zich op terwijl hij openschuift.
   ========================================================================== */

.menu {
  width: min(520px, 92vw);
  background: rgba(23, 17, 12, 0.26);
  border-right: 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 68%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 68%, rgba(0, 0, 0, 0) 100%);
  transition: transform 0.85s var(--ease), visibility 0.85s,
              -webkit-backdrop-filter 0.9s var(--ease), backdrop-filter 0.9s var(--ease),
              background 0.9s var(--ease);
}
body.nav-open .menu {
  background: rgba(23, 17, 12, 0.34);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
}

.menu__inner { padding-right: var(--space-5); }

/* de streepjes onder de tabs lopen ook dood in het glas */
.menu__nav a { border-bottom: 0; }
.menu__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, rgba(244, 239, 231, 0.20) 0%, rgba(244, 239, 231, 0.08) 55%, rgba(244, 239, 231, 0) 100%);
}
.menu__meta {
  border-top: 0; position: relative;
}
.menu__meta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, rgba(244, 239, 231, 0.20) 0%, rgba(244, 239, 231, 0) 100%);
}

@media (max-width: 900px) {
  .menu { width: min(430px, 94vw); }
  .menu__inner { padding-right: var(--space-4); }
}

/* ==========================================================================
   DE BALK OMGEDRAAID EN EEN NIEUWE SCROLLWENK
   ========================================================================== */

.site-header__row { display: flex; align-items: center; }
.site-header__row .brand { justify-self: auto; margin-right: auto; }
.site-header__row .menu-btn { justify-self: auto; margin-left: auto; }

/* de scrollwenk: een lijn die zichzelf trekt en weer intrekt */

.scrollcue i {
  height: 74px; overflow: visible;
  background: linear-gradient(to bottom,
    rgba(244, 239, 231, 0) 0%, rgba(244, 239, 231, 0.13) 18%,
    rgba(244, 239, 231, 0.13) 82%, rgba(244, 239, 231, 0) 100%);
}
.scrollcue i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: linear-gradient(to bottom, var(--champagne), rgba(211, 179, 137, 0.15));
  transform-origin: top; transform: scaleY(0);
  animation: trekken 3.2s var(--ease) infinite;
}
@keyframes trekken {
  0%   { transform: scaleY(0);   transform-origin: top; }
  42%  { transform: scaleY(1);   transform-origin: top; }
  52%  { transform: scaleY(1);   transform-origin: bottom; }
  94%  { transform: scaleY(0);   transform-origin: bottom; }
  100% { transform: scaleY(0);   transform-origin: top; }
}

.scrollcue em {
  display: block; margin-top: 11px; font-style: normal;
  font-size: 7px; color: var(--champagne);
  animation: tikken 3.2s var(--ease) infinite;
}
@keyframes tikken {
  0%, 38%   { opacity: 0; transform: translateY(-4px); }
  48%, 60%  { opacity: 0.95; transform: none; }
  100%      { opacity: 0; transform: translateY(4px); }
}

.scrollcue span {
  color: var(--kaarslicht); opacity: 0.55;
  animation: zuchten 3.2s var(--ease) infinite;
}
@keyframes zuchten { 0%, 100% { opacity: 0.38; } 45% { opacity: 0.8; } }

@media (prefers-reduced-motion: reduce) {
  .scrollcue i::after { animation: none; transform: scaleY(1); }
  .scrollcue em, .scrollcue span { animation: none; opacity: 0.7; }
}

/* de openingsregel staat links uitgelijnd, niet gecentreerd en scheef */
.vraag { text-align: left; padding: calc(var(--space-5) + 20px) 0; }
.vraag .head-row { align-items: end; margin-bottom: 0; }
.vraag__kop {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(32px, 4.9vw, 66px); line-height: 1.04; letter-spacing: -0.025em;
  max-width: 16ch; margin: var(--space-2) 0 0;
}
.vraag .lead { margin: 0; }
.vraag .hero__meta { justify-content: flex-start; margin-top: var(--space-3); }

@media (max-width: 720px) {
  .vraag { padding: var(--space-5) 0; }
  .vraag__kop { font-size: clamp(28px, 8.2vw, 44px); max-width: none; }
}

/* ==========================================================================
   HET MENU OPENT RECHTS
   De knop staat rechts, dus daar hoort de baan ook vandaan te komen.
   ========================================================================== */

.progress { display: none; }

.menu {
  inset: 0 0 0 auto;
  transform: translateX(101%);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 68%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to left, #000 0%, #000 68%, rgba(0, 0, 0, 0) 100%);
}
.menu__inner { padding-left: var(--space-5); padding-right: var(--space-3); }

.menu__nav a { transform: translateX(16px); }
body.nav-open .menu__nav a { transform: none; }

.menu__nav a::after {
  background: linear-gradient(to left, rgba(244, 239, 231, 0.20) 0%, rgba(244, 239, 231, 0.08) 55%, rgba(244, 239, 231, 0) 100%);
}
.menu__meta::before {
  background: linear-gradient(to left, rgba(244, 239, 231, 0.20) 0%, rgba(244, 239, 231, 0) 100%);
}

@media (max-width: 900px) {
  .menu__inner { padding-left: var(--space-4); padding-right: var(--space-3); }
}

/* ==========================================================================
   HET NIEUWE LOGO
   Het merkteken is de M, dus het woordmerk staat er als één geheel in.
   ========================================================================== */

.scrollcue { display: none; }

.brand { display: inline-flex; align-items: center; gap: 0; }
.brand img { height: 20px; width: auto; display: block; }
.brand span { display: none; }
.brand--voet img { height: 24px; }

@media (max-width: 720px) {
  .brand img { height: 17px; }
  .brand--voet img { height: 21px; }
}

/* menu even groot als het logo, zodat de balk in balans is */
.menu-btn { gap: 14px; }
.menu-btn__woord { font-size: 15px; letter-spacing: 0.2em; }
.menu-btn__lines { width: 26px; }
.menu-btn__lines i { margin: 5px 0; }
.menu-btn__lines i:last-child { width: 16px; }
.menu-btn:hover .menu-btn__lines i:last-child { width: 26px; }

@media (max-width: 720px) {
  .menu-btn__woord { font-size: 12px; letter-spacing: 0.18em; }
  .menu-btn__lines { width: 20px; }
}

/* ==========================================================================
   DE SCROLLRING
   Een ring met tekst die langzaam rondgaat, onderaan de film. Geen los
   woord met een streepje eronder, maar een draaiend zegel met een pijl.
   ========================================================================== */

.scrollring {
  position: absolute; left: 50%; bottom: 40px; z-index: 4;
  transform: translateX(-50%); width: 104px; height: 104px;
  color: var(--ink-soft); pointer-events: none; opacity: 0.8;
}
.scrollring svg { width: 100%; height: 100%; overflow: visible; }
.scrollring__draai { animation: ringdraai 22s linear infinite; transform-origin: 50% 50%; }
@keyframes ringdraai { to { transform: rotate(360deg); } }
.scrollring__pijl {
  fill: none; stroke: var(--champagne); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
  animation: pijlzak 2.6s var(--ease) infinite;
}
@keyframes pijlzak {
  0%, 100% { transform: translateY(-2px); opacity: 0.55; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/* hij komt op met de rest van de opening */
.js body.met-film .scrollring { opacity: 0; transform: translateX(-50%) translateY(-5px); }
.js.is-wakker body.met-film .scrollring {
  opacity: 0.8; transform: translateX(-50%);
  transition: opacity 2s var(--ease) 3.3s, transform 2s var(--ease) 3.3s;
}

@media (max-width: 720px) { .scrollring { width: 82px; height: 82px; bottom: 26px; } }
@media (prefers-reduced-motion: reduce) {
  .scrollring__draai, .scrollring__pijl { animation: none; }
}

/* ------------------------------------------- de openingsregel per regel */

.vraag__kop { max-width: none; }
.vraag__kop .mask { display: block; }
.vraag__kop em { font-style: normal; color: var(--kaarslicht); }

/* --------------------------------------- menu zonder cijfers, met zinnen */

.menu__nav a { font-size: clamp(17px, 1.7vw, 21px); gap: 0; }
.menu__nav a i { display: none; }

/* de ring verdwijnt zodra je scrolt of het menu opent */
body.nav-open .scrollring,
body.gescrold .scrollring { opacity: 0 !important; transition: opacity 0.5s var(--ease) !important; }

/* ==========================================================================
   DE ZIN DIE MEESCROLT
   Eén zin, midden op het scherm, die woord voor woord oplicht terwijl je
   naar beneden gaat. Zonder javascript staat hij er gewoon, volledig.
   ========================================================================== */

.vraag { display: none; }

.zin { position: relative; height: 230vh; background: var(--surface-900); }
.zin__kleef {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center;
  padding: 0 var(--gutter);
}
.zin__tekst {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(30px, 5.4vw, 76px); line-height: 1.14; letter-spacing: -0.025em;
  max-width: 17ch; margin: 0; text-wrap: balance;
}
.zin__tekst .w { display: inline-block; }

.js .zin__tekst .w {
  color: rgba(244, 239, 231, 0.11);
  transition: color 0.45s var(--ease), opacity 0.45s var(--ease);
}
.js .zin__tekst .w.aan { color: var(--ink); }
.js .zin__tekst .w.goud { font-style: normal; }
.js .zin__tekst .w.goud.aan { color: var(--kaarslicht); }
.zin__tekst .w.goud { font-style: normal; color: var(--kaarslicht); }

@media (max-width: 720px) {
  .zin { height: 190vh; }
  .zin__tekst { font-size: clamp(26px, 8vw, 40px); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zin { height: auto; }
  .zin__kleef { position: static; height: auto; padding: var(--space-5) var(--gutter); }
  .js .zin__tekst .w { color: var(--ink); }
  .js .zin__tekst .w.goud { color: var(--kaarslicht); }
}

/* alleen nog een klein pijltje, geen ring */
.scrollring { width: 22px; height: 32px; bottom: 44px; }
.scrollring__pijl {
  fill: none; stroke: var(--champagne); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
  animation: pijlzak 3s var(--ease) infinite;
}
@media (max-width: 720px) { .scrollring { width: 18px; height: 26px; bottom: 24px; } }

/* het menu weer in korte woorden */
.menu__nav a { font-size: clamp(19px, 2.1vw, 26px); }

/* de zin staat hoger in beeld, niet precies in het midden */
.zin__kleef { padding-bottom: 26vh; align-content: center; }
@media (max-width: 720px) { .zin__kleef { padding-bottom: 16vh; } }

/* ==========================================================================
   NIETS SCHEEF
   Geen cursief op de site. Het verschil tussen de twee helften van een kop
   zit nu alleen in de kleur, niet in de schuinstand.
   ========================================================================== */

.two-tone em,
.zin__tekst .w.goud,
.vraag__kop em,
.spec__glyph em,
.hero-type em,
.make__art text,
.flow .tx,
em { font-style: normal !important; }

/* ==========================================================================
   DE OVERGANG VAN FILM NAAR ZIN
   De film blijft staan terwijl de zin eroverheen komt. Geen leeg bruin
   vlak ertussen: je scrolt en het eerste woord licht meteen op, nog op
   het beeld. Hoe verder je komt, hoe donkerder de film wordt.
   ========================================================================== */

.opening { position: relative; }

.hero--leeg {
  position: sticky; top: 0; height: 100vh; min-height: 100vh;
}
.hero--leeg::after { display: none; }

.zin {
  position: relative; z-index: 3;
  margin-top: -100vh; height: 200vh;
  background: transparent;
}
.zin__kleef {
  position: sticky; top: 0; height: 100vh;
  display: grid; align-content: center; justify-items: start;
  padding: 0 var(--gutter) 26vh;
  max-width: var(--shell); margin: 0 auto; width: 100%;
}
.zin__waas {
  position: absolute; inset: 0 -50vw; z-index: 0;
  background: var(--surface-900);
  opacity: var(--waas, 0);
  pointer-events: none;
}
.zin__tekst { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .zin { height: 170vh; }
  .zin__kleef { padding-bottom: 16vh; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--leeg { position: relative; }
  .zin { margin-top: 0; height: auto; background: var(--surface-900); }
  .zin__kleef { position: static; height: auto; padding: var(--space-5) var(--gutter); }
  .zin__waas { display: none; }
}

/* de waas loopt tot de schermranden, de tekst blijft in het raster */
.zin__kleef {
  justify-items: stretch; padding-left: 0; padding-right: 0;
  max-width: none;
}
.zin__waas { inset: 0; }
.zin__binnen {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--shell); margin: 0 auto;
  padding: 0 var(--gutter);
}

/* de zin komt pas als je scrolt, en verdwijnt weer als hij zijn werk heeft gedaan */
.js .zin__tekst { opacity: var(--tekst, 0); }
.zin { height: 175vh; }
@media (max-width: 720px) { .zin { height: 155vh; } }
@media (prefers-reduced-motion: reduce) { .js .zin__tekst { opacity: 1; } }

/* korter, zodat er geen leeg beeld overblijft als de zin weg is */
.zin { height: 155vh; }
@media (max-width: 720px) { .zin { height: 140vh; } }

/* een echte foto van het werk, in plaats van de tekening */
.make__art--foto {
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-800);
}
.make__art--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   DE ZIN: GECENTREERD, KLEINER, EEN KLEUR
   ========================================================================== */

.zin__kleef { justify-items: center; }
.zin__binnen { display: flex; justify-content: center; }
.zin__tekst {
  text-align: center; max-width: 23ch;
  font-size: clamp(25px, 3.5vw, 48px); line-height: 1.22;
}
.js .zin__tekst .w.goud.aan,
.zin__tekst .w.goud { color: var(--ink); }

@media (max-width: 720px) {
  .zin__tekst { font-size: clamp(22px, 6vw, 32px); max-width: 20ch; }
}

/* ==========================================================================
   OP MAAT, IN PLAATS VAN VIER GETALLEN
   Niets staat vast, dus er staan geen aantallen meer. Wel waar je bij ons
   voor terecht kunt, als één doorlopende regel.
   ========================================================================== */

.stats { display: none; }

.opmaat { text-align: center; max-width: 62ch; margin: 0 auto; }
.opmaat__kop {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(30px, 4vw, 54px); line-height: 1.08; letter-spacing: -0.02em;
  margin: var(--space-2) 0 var(--space-3);
}
.opmaat .soft { margin: 0 auto; }
.opmaat__lijst {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 0; margin-top: var(--space-4);
  padding-top: var(--space-3); border-top: 1px solid var(--line);
}
.opmaat__lijst span {
  position: relative; padding: 0 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-muted);
  transition: color 0.3s var(--ease);
}
.opmaat__lijst span::after {
  content: "\25c6"; position: absolute; right: -4px; top: 50%;
  transform: translateY(-50%); font-size: 5px; color: var(--champagne); opacity: 0.55;
}
.opmaat__lijst span:last-child::after { display: none; }
.opmaat__lijst:hover span { color: var(--ink-soft); }

@media (max-width: 720px) {
  .opmaat__lijst span { padding: 0 11px; font-size: 9px; letter-spacing: 0.14em; }
}

/* gecentreerde tekst leest scheef als de regels sterk verschillen in lengte */
.opmaat__kop, .opmaat .soft, .zin__tekst { text-wrap: balance; }
.opmaat .soft { max-width: 50ch; }

/* onderschrift bij een schermafbeelding */
.bijschrift {
  margin-top: 12px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
}

/* de zin staat weer precies in het midden van het scherm */
.zin__kleef { padding-bottom: 0; align-content: center; }
@media (max-width: 720px) { .zin__kleef { padding-bottom: 0; } }

/* ==========================================================================
   MEER LICHT EN MEER DIEPTE
   Niet alles hetzelfde bruin. Cacao komt een halve stap naar voren, zodat
   de pagina ademt in plaats van één vlak te zijn. Dat is ook de verhouding
   uit het merkboek: Espresso 55, Perkament 24, Cacao 13.
   ========================================================================== */

.cacao {
  background: #2B2018;
  border-top: 0 !important;
  --surface-800: #352719;
  --surface-700: #3F2F1F;
  --line:        rgba(244, 239, 231, 0.12);
  --line-strong: rgba(244, 239, 231, 0.22);
}
.cacao + .section { border-top: 0; }

/* een heel zachte gloed bovenaan elk donker vlak, zodat het niet plat is */
.section:not(.paper):not(.wijn)::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 220px;
  background: linear-gradient(to bottom, rgba(211, 179, 137, 0.035), transparent);
  pointer-events: none;
}
.section { position: relative; }
.section > * { position: relative; z-index: 1; }

/* ==========================================================================
   BINNEN TEGENOVER BUITEN, ALS PAREN
   Elke regel links heeft zijn tegenhanger rechts, met een stippellijn
   ertussen. Je leest dwars, en dan pas valt het verschil op.
   ========================================================================== */

.gap { display: none; }

.paren {
  position: relative; margin-top: var(--space-3);
  border-top: 1px solid var(--line-strong);
}

/* De naad in het midden: zolang de twee kanten uit elkaar staan loopt er een
   scheiding door het blok. Die lost op zodra alles aan elkaar geknoopt is. */
.paren::before {
  content: ""; position: absolute; left: 50%; top: 62px; bottom: 0; width: 1px;
  background: linear-gradient(to bottom,
    transparent, var(--champagne) 12%, var(--champagne) 88%, transparent);
  opacity: 0.3; transition: opacity 1.2s var(--ease); pointer-events: none;
}
.js .paren.is-dicht::before { opacity: 0; }

.paren__kop {
  display: grid; grid-template-columns: 1fr 170px 1fr; gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-1);
}
.paren__kop span:last-child { text-align: right; }

.paar {
  display: grid; grid-template-columns: 1fr 170px 1fr; gap: var(--space-2);
  align-items: center; padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.paar__in, .paar__uit {
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.4; color: var(--ink);
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease),
              filter 0.9s var(--ease), color 0.9s var(--ease);
}
.paar__uit { text-align: right; }

/* Zonder javascript staat alles meteen goed. Met javascript drijft de
   rechterkolom weg en onscherp, en schuift hij terug terwijl je scrolt. */
.js .paar:not(.is-dicht) .paar__in { transform: translateX(-40px); }
.js .paar:not(.is-dicht) .paar__uit {
  transform: translateX(40px); opacity: 0.35;
  filter: blur(2.6px); color: var(--ink-muted);
}

/* De verbinding wordt van buiten naar binnen getrokken tot ze elkaar raken. */
.paar__mid { position: relative; height: 10px; align-self: center; }
.paar__mid::before, .paar__mid::after {
  content: ""; position: absolute; top: 50%; height: 1px;
  background: var(--champagne); width: 50%;
  transition: width 0.9s var(--ease);
}
.paar__mid::before { left: 0; }
.paar__mid::after { right: 0; }
.js .paar:not(.is-dicht) .paar__mid::before,
.js .paar:not(.is-dicht) .paar__mid::after { width: 0; }

.paar__punt {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  background: var(--champagne);
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  transition: transform 0.5s var(--ease) 0.55s;
}
.js .paar:not(.is-dicht) .paar__punt {
  transform: translate(-50%, -50%) rotate(45deg) scale(0); transition-delay: 0s;
}

@media (max-width: 820px) {
  .paren::before { display: none; }
  .paren__kop, .paar { grid-template-columns: 1fr 64px 1fr; }
  .js .paar:not(.is-dicht) .paar__in { transform: translateX(-14px); }
  .js .paar:not(.is-dicht) .paar__uit { transform: translateX(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .paar:not(.is-dicht) .paar__in,
  .js .paar:not(.is-dicht) .paar__uit {
    transform: none; opacity: 1; filter: none; color: var(--ink);
  }
  .js .paar:not(.is-dicht) .paar__mid::before,
  .js .paar:not(.is-dicht) .paar__mid::after { width: 50%; }
  .js .paar:not(.is-dicht) .paar__punt { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
}

.gap__note { border-top: 0; padding-top: var(--space-4); }

@media (max-width: 760px) {
  .paren__kop { display: none; }
  .paar { grid-template-columns: 1fr; gap: 10px; padding: var(--space-2) 0; }
  .paar__uit { text-align: left; padding-left: var(--space-2); }
  .paar__mid { width: 40px; height: 1px; margin-left: 2px; }
  .paar__mid::after { left: 0; transform: translate(0, -50%); }
  .paar:hover .paar__mid::after { transform: translate(0, -50%) rotate(45deg); }
}

/* ==========================================================================
   HET LOGO WISSELT MEE
   Boven een licht vlak wordt het woordmerk espresso, anders champagne.
   ========================================================================== */

.brand { position: relative; }
.brand__licht { position: absolute; left: 0; top: 0; opacity: 0; }
.brand__donker, .brand__licht { transition: opacity 0.45s var(--ease); }
body.op-licht .brand__donker { opacity: 0; }
body.op-licht .brand__licht { opacity: 1; }
body.op-licht .menu-btn { color: #17110C; }
body.op-licht .menu-btn:hover { color: #7C5A2E; }
body.nav-open .brand__donker { opacity: 1; }
body.nav-open .brand__licht { opacity: 0; }
body.nav-open .menu-btn { color: var(--ink-soft); }

/* Geen balk, wel een heel zachte sluier onder de kop, anders loopt een kop
   van een sectie dwars door het woordmerk. Hij heeft geen rand en geen lijn. */
.site-header::before {
  content: ""; position: absolute; inset: -20px 0 auto; height: 130px;
  z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(23, 17, 12, 0.95) 0%, rgba(23, 17, 12, 0.88) 46%, rgba(23, 17, 12, 0) 100%);
  transition: background 0.5s var(--ease);
}
body.op-licht .site-header::before {
  background: linear-gradient(to bottom, rgba(244, 239, 231, 0.97) 0%, rgba(244, 239, 231, 0.92) 46%, rgba(244, 239, 231, 0) 100%);
}
body.nav-open .site-header::before { opacity: 0; }

.site-header__row { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .path__inkt { stroke-dashoffset: 0; }
  .js .pstep__n { color: var(--champagne); }
  .js .pstep h3 { color: var(--ink); }
}


/* ------------------------------------------- de eerste stap en de pakketten */

.stappen {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2); margin-top: var(--space-4);
}
.stap {
  border: 1px solid var(--line); padding: var(--space-3);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.stap:hover { border-color: var(--champagne); transform: translateY(-3px); }
.stap__prijs {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--champagne-donker);
}
.stap h3 { font-family: var(--font-display); font-size: 27px; line-height: 1.1; }
.stap__uit { font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); }

.pakketten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2); margin-top: var(--space-4);
}
.pak {
  border: 1px solid var(--line); padding: var(--space-3);
  display: flex; flex-direction: column;
}
.pak--kern { border-color: var(--champagne); background: var(--champagne-veil); }
.pak__naam {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne);
}
.pak__prijs {
  font-family: var(--font-display); font-size: 48px; line-height: 1;
  margin-top: var(--space-2); display: flex; align-items: baseline; gap: 8px;
}
.pak__vanaf, .pak__pm {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.2em; color: var(--ink-muted);
}
.pak__voor {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  margin-top: 10px; min-height: 3em;
}
.pak__lijst {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  border-top: 1px solid var(--line);
}
.pak__lijst li {
  font-size: 13.5px; line-height: 1.5; padding: 11px 0 11px 18px;
  border-bottom: 1px solid var(--line); position: relative;
}
.pak__lijst li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 5px; height: 5px; background: var(--champagne); transform: rotate(45deg);
}
.pak__lijst li:last-child { border-bottom: 0; }

.erbij { margin-top: var(--space-4); border-top: 1px solid var(--line-strong); }
.erbij__kop {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--champagne); padding: var(--space-2) 0;
}
.erbij__rij {
  display: grid; grid-template-columns: 1fr 1.5fr auto;
  gap: var(--space-2); align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.erbij__naam { font-family: var(--font-display); font-size: 21px; line-height: 1.2; }
.erbij__wat { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.erbij__prijs {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--champagne); text-align: right;
}

@media (max-width: 900px) {
  .stappen, .pakketten { grid-template-columns: 1fr; }
  .pak__voor { min-height: 0; }
  .erbij__rij { grid-template-columns: 1fr auto; row-gap: 4px; }
  .erbij__wat { grid-column: 1 / -1; }
}


/* --------------------------------------- horeca en merken, elk een eigen blok */

.pakgroep + .pakgroep { margin-top: var(--space-4); }
.pakgroep__kop {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--champagne);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--line-strong);
}
.pakgroep .pakketten { margin-top: var(--space-2); }
.pakketten--breed { grid-template-columns: 1fr; }
.pak--breed {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-4); align-items: start;
}
.pak--breed .pak__voor { min-height: 0; }
.pak--breed .pak__lijst { margin-top: 0; border-top: 0; }
.pak__lijst--twee { columns: 2; column-gap: var(--space-3); }
.pak__lijst--twee li { break-inside: avoid; }

@media (max-width: 900px) {
  .pak--breed { grid-template-columns: 1fr; gap: var(--space-3); }
  .pak__lijst--twee { columns: 1; }
  .pak--breed .pak__lijst { border-top: 1px solid var(--line); }
}


/* ----------------------------------- de route: zes stappen onder elkaar */

.route { margin-top: var(--space-4); }
.rstap {
  position: relative; display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: var(--space-2); align-items: start;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
/* De streep boven elke stap wordt getrokken op het moment dat je erlangs komt */
.rstap::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--champagne); transition: width 1.1s var(--ease);
}
.js .rstap.is-aan::before { width: 100%; }
.rstap:last-child { border-bottom: 1px solid var(--line); }

.rstap__n {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em;
  color: var(--ink-muted); padding-top: 1.1em;
  transition: color 0.6s var(--ease);
}
.js .rstap.is-aan .rstap__n { color: var(--champagne); }
.rstap__regel {
  margin: 0; max-width: 62ch;
  font-weight: 300; line-height: 1.45;
}
.rstap__naam {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1;
  color: var(--ink-soft); margin-right: 0.45em;
  transition: color 0.6s var(--ease);
}
.js .rstap.is-aan .rstap__naam { color: var(--ink); }
.rstap__tekst {
  font-family: var(--font-text); font-weight: 300;
  font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6;
  color: var(--ink-muted);
}
.rstap__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.rstap__tags .tag { font-size: 8.5px; padding: 5px 10px; }

@media (max-width: 820px) {
  .rstap { grid-template-columns: 2.6rem 1fr; padding: var(--space-3) 0; }
  .rstap__n { padding-top: 0.5em; }
}

/* ------------------------- wat er uit de studio komt, als blok letterwerk */

.maakwoorden {
  margin-top: var(--space-4);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(25px, 3.5vw, 50px); line-height: 1.3;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 0.42em; color: var(--ink);
}
.maakwoord { transition: color 0.4s var(--ease); cursor: default; }
.maakwoord:hover { color: var(--champagne-donker); }
.maakruit {
  width: 5px; height: 5px; background: var(--champagne);
  transform: rotate(45deg); flex: none; opacity: 0.8;
}
@media (max-width: 720px) { .maakwoorden { gap: 0 0.34em; } }


/* ---------------------------------------------------------------- het podium

   Zes uitspraken waarin een eigenaar zichzelf herkent, elk over een echte
   foto van een klant. Het beeld wisselt mee terwijl je scrolt. Zonder
   javascript staat alles gewoon onder elkaar op donker. */

.podium { background: var(--surface-900); color: #F4EFE7; position: relative; }
.podium__baan { position: relative; }
.podium__kleef { position: relative; overflow: hidden; padding: var(--space-5) 0; }

.podium__beelden { position: absolute; inset: 0; }
.podiumbeeld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 7s linear;
}
.podiumbeeld.is-aan { opacity: 1; transform: scale(1); }
.podium__waas {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(23,17,12,0.92) 0%, rgba(23,17,12,0.72) 48%, rgba(23,17,12,0.42) 100%),
    linear-gradient(to top, rgba(23,17,12,0.9) 0%, rgba(23,17,12,0.2) 45%);
}
.podium__binnen { position: relative; z-index: 1; }
.podium__label { color: var(--champagne); }

.podium__stapel { position: relative; margin-top: var(--space-3); }
.podiumregel {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(25px, 2.9vw, 44px); line-height: 1.14;
  letter-spacing: -0.025em; margin-left: -0.025em;
  color: #FBF8F3; max-width: 24ch; text-wrap: balance;
  text-shadow: 0 1px 24px rgba(23, 17, 12, 0.45);
}
.podiumregel .display { font-size: inherit; line-height: inherit; margin: 0; color: inherit; }
.podium__lead {
  margin-top: var(--space-3); max-width: 36ch; text-wrap: balance;
  font-family: var(--font-text); font-weight: 300;
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6;
  color: rgba(244, 239, 231, 0.76);
}
.podium__voet {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4);
}
.podium__teller {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.24em; color: rgba(244, 239, 231, 0.55); flex: none;
}
.podium__nu { color: var(--champagne); }
.podium__rail { flex: 1; height: 1px; background: rgba(244, 239, 231, 0.2); overflow: hidden; }
.podium__rail i {
  display: block; height: 100%; background: var(--champagne);
  transform: scaleX(0.14); transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.js .podium__baan { height: 440vh; }
.js .podium__kleef {
  position: sticky; top: 0; height: 100vh; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.js .podium__stapel {
  font-size: clamp(25px, 2.9vw, 44px); min-height: 4.7em;
}
.js .podiumregel {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  pointer-events: none;
}
.js .podiumregel.is-aan { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .js .podium__baan { height: 380vh; }
  .js .podium__stapel { min-height: 6.2em; }
  .podiumregel { max-width: none; }
  .podium__waas {
    background: linear-gradient(to bottom,
      rgba(23,17,12,0.26) 0%,
      rgba(23,17,12,0.78) 42%,
      rgba(23,17,12,0.88) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .podiumbeeld { transition: opacity 0.3s linear; transform: none; }
  .js .podium__baan { height: auto; }
  .js .podium__kleef { position: static; height: auto; padding: var(--space-5) 0; }
  .js .podium__stapel { min-height: 0; font-size: inherit; }
  .js .podiumregel {
    position: static; opacity: 1; transform: none; margin: 0 0 var(--space-3);
  }
}


/* De volle band kan ook een film zijn in plaats van een foto. */
.plate__film {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;
}


/* Staat er maar één beeld achter het podium, dan zoomt dat rustig heen en weer
   in plaats van te wisselen. De tekst is dan het enige dat verandert. */
.podium__beelden--een .podiumbeeld {
  opacity: 1; transition: none;
  animation: podiumzoom 28s ease-in-out infinite alternate;
}
@keyframes podiumzoom {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .podium__beelden--een .podiumbeeld { animation: none; transform: none; }
}


/* ----------------------------------- de kop op de band past op één regel */
.plate h2.plate__kop { font-size: clamp(26px, 3.4vw, 50px); line-height: 1.1; max-width: none; }

/* ------------------------------- het woordblok vertelt wat elk woord is */
.maakblok { margin-top: var(--space-4); }
.maakwoorden { margin-top: 0; }
.maakwoord {
  color: var(--ink-soft); cursor: default;
  transition: color 0.5s var(--ease);
}
.maakwoord:hover, .maakwoord:focus-visible { color: var(--champagne-donker); outline: none; }
.js .maakwoord.is-aan { color: var(--ink); }
.maakuitleg {
  margin-top: var(--space-3); padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.8;
  letter-spacing: 0.06em; color: var(--ink-muted); min-height: 3.4em;
  transition: opacity 0.25s var(--ease);
}

/* ------------------------- gevonden worden, als een gesprek met voorbeeld */
.gesprek {
  margin-top: var(--space-4); max-width: 54rem;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.gesprek__beurt {
  position: relative;
  border-left: 1px solid var(--line-strong);
  padding: 2px 0 2px var(--space-3);
}
.gesprek__beurt--aan { border-left-color: var(--champagne); }
.gesprek__vraag {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono); font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.6; color: var(--ink);
}
.gesprek__antwoord {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 2.2vw, 30px); line-height: 1.35; color: var(--ink);
}
.gesprek__merk { color: var(--champagne); }

.waarom { margin-top: var(--space-4); max-width: 60rem; }
.waarom__lijst {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-3);
}
.waarom__lijst li {
  position: relative; padding: 11px 0 11px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
}
.waarom__lijst li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 5px; height: 5px; background: var(--champagne); transform: rotate(45deg);
}
@media (max-width: 720px) {
  .gesprek__beurt { padding-left: var(--space-2); }
  .waarom__lijst { grid-template-columns: 1fr; }
}


/* --------------------------- het gesprek speelt zich af als je het bereikt */

.gesprek__vraag { position: relative; }
.js [data-gesprek] .gesprek__vraag.is-tik::after {
  content: ""; display: inline-block; width: 0.6em; height: 1.05em;
  margin-left: 0.12em; vertical-align: -0.18em;
  background: var(--champagne); animation: knipper 0.9s steps(1) infinite;
}
@keyframes knipper { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.gw { display: inline-block; }
.js [data-gesprek] .gw {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.js [data-gesprek].is-aan .gw { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-gesprek] .gw { opacity: 1; transform: none; transition: none; }
  .js [data-gesprek] .gesprek__vraag.is-tik::after { display: none; }
}


/* De overgang naar en van het podium mag geen harde lijn zijn: het beeld
   lost aan de boven- en onderkant op in de achtergrond eromheen. */
.podium__beelden {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 11vh, #000 calc(100% - 9vh), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 11vh, #000 calc(100% - 9vh), transparent 100%);
}
@media (max-width: 760px) {
  .podium__beelden {
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, #000 8vh, #000 calc(100% - 7vh), transparent 100%);
    mask-image: linear-gradient(to bottom,
      transparent 0, #000 8vh, #000 calc(100% - 7vh), transparent 100%);
  }
}


/* ------------------------------------- gevonden worden, als één leeskolom */

.uitleg { max-width: 52rem; margin: 0 auto; }
.uitleg__kop {
  margin: var(--space-2) 0 0; max-width: 21ch;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1;
}
.uitleg__lead {
  margin: var(--space-3) 0 0; max-width: 46ch;
  font-family: var(--font-text); font-weight: 300;
  font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.7;
  color: var(--ink-soft);
}

.uitleg .gesprek {
  margin-top: var(--space-4); max-width: none;
  display: block; border-top: 1px solid var(--line);
}
.uitleg .gesprek__beurt {
  border-left: 0; padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.uitleg .gesprek__beurt--aan { border-bottom: 0; }
.uitleg .gesprek__vraag { margin-top: var(--space-2); }
.uitleg .gesprek__antwoord { margin-top: var(--space-2); max-width: none; }

.uitleg .waarom { margin-top: var(--space-3); max-width: none; }
.uitleg .waarom__lijst { grid-template-columns: 1fr; }
.uitleg__slot {
  margin-top: var(--space-4); max-width: 46ch;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.9;
  letter-spacing: 0.06em; color: var(--ink-muted);
}
@media (max-width: 720px) {
  .uitleg__kop { max-width: none; }
}


/* ------------------------------------------ gevonden worden: een leeg scherm

   Het enige blok op de site dat gecentreerd staat en de volle hoogte pakt.
   Geen kop links en tekst rechts, geen lijst, geen kader. Alleen een vraag
   die getypt wordt en een antwoord dat komt. */

.zoekvlak {
  min-height: 100vh; padding: var(--space-5) var(--gutter);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.zoekvlak__kop {
  font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(9px, 0.8vw, 10.5px); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--champagne);
  margin: 0 0 var(--space-4); max-width: none;
}
.zoekvlak__wie {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 var(--space-2);
}
.zoekvlak__vraag {
  font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(14px, 1.5vw, 19px); line-height: 1.6;
  color: var(--ink); margin: 0; max-width: 46ch; text-wrap: balance;
}
.zoekvlak__streep {
  display: block; width: 86px; height: 1px; background: var(--champagne);
  margin: var(--space-3) 0; transform: scaleX(1); transform-origin: center;
  transition: transform 0.9s var(--ease);
}
.js [data-gesprek]:not(.is-aan) .zoekvlak__streep { transform: scaleX(0); }
.zoekvlak__antwoord {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(23px, 2.7vw, 39px); line-height: 1.24;
  letter-spacing: -0.02em; color: #FBF8F3;
  margin: 0; max-width: 32ch; text-wrap: balance;
}
.zoekvlak__redenen {
  margin-top: var(--space-4); display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px var(--space-2);
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted);
}
.zoekvlak__redenen span { position: relative; padding-left: 16px; }
.zoekvlak__redenen span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; margin-top: -2px;
  background: var(--champagne); transform: rotate(45deg);
}
.zoekvlak__slot {
  margin: var(--space-3) 0 0; max-width: 52ch;
  font-size: 13px; line-height: 1.7; color: var(--ink-muted);
}
@media (max-width: 720px) {
  .zoekvlak { min-height: 92vh; }
  .zoekvlak__kop { margin-bottom: var(--space-4); }
  .zoekvlak__antwoord { max-width: none; }
  .zoekvlak__redenen { font-size: 9px; gap: 8px var(--space-2); }
}


/* De band met de film volgt op het donkere podium. Zonder dit zie je een
   harde rand waar de video begint; nu komt hij uit hetzelfde donker tevoorschijn. */
.plate:has(.plate__film) { background: var(--surface-900); }
.plate__film {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 13vh, #000 calc(100% - 6vh), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 13vh, #000 calc(100% - 6vh), transparent 100%);
}
@media (max-width: 760px) {
  .plate__film {
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, #000 9vh, #000 calc(100% - 5vh), transparent 100%);
    mask-image: linear-gradient(to bottom,
      transparent 0, #000 9vh, #000 calc(100% - 5vh), transparent 100%);
  }
}


/* Een schreefletter heeft links wat lucht in de letter zelf, waardoor een kop
   optisch inspringt ten opzichte van het label erboven. Dat rekenen we weg. */
.section .display, .section .display-xl { margin-left: -0.042em; }
.zoekvlak__kop, .uitleg__kop { margin-left: 0; }


/* ------------------------------------ boeken: drie schermen die het laten zien

   Geen getekende grafiek en geen losse tekstkolommen die hetzelfde nog een
   keer zeggen. Elk scherm vertelt zijn eigen stuk, eronder. */

.schermen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3); margin-top: var(--space-4);
}
.scherm { margin: 0; }
.scherm > img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.scherm:hover > img { border-color: var(--champagne); transform: translateY(-3px); }
.scherm__kort {
  margin: var(--space-3) 0 0; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne);
}
.scherm__naam {
  margin: 10px 0 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; color: var(--ink);
}
.scherm__uit {
  margin: var(--space-2) 0 0; font-size: 13.5px; line-height: 1.6;
  color: var(--ink-muted);
}

/* Het reserveringssysteem waarmee Memoir in de horeca werkt. */
.partner {
  display: block; margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: border-color 0.4s var(--ease);
}
.partner:hover { border-top-color: var(--champagne); }
.partner__rol {
  display: block; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted);
  white-space: nowrap;
}
.partner__logo {
  display: block; height: 19px; width: auto; max-width: 60%;
  margin-top: 12px; border: 0;
}
.partner__naam {
  display: block; margin-top: 8px;
  font-family: var(--font-display); font-weight: 300;
  font-size: 22px; line-height: 1.1; color: var(--ink);
}

@media (max-width: 900px) {
  .schermen { grid-template-columns: 1fr; gap: var(--space-4); }
}


/* --------------------------------------------------------------- het slot

   Een rustige afsluiting: de knop en het adres op een rij, met een haarlijn
   erboven. Geen leeg kwadrant en geen schreeuwend adres. */

.slot__voet {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5); padding-top: var(--space-3);
  border-top: 1px solid rgba(244, 239, 231, 0.22);
}
.slot__of {
  margin: 0; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.5;
  color: rgba(244, 239, 231, 0.6);
}
.slot__mail {
  color: var(--kaarslicht); text-decoration: none;
  border-bottom: 1px solid rgba(230, 211, 176, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.4s var(--ease);
}
.slot__mail:hover { border-bottom-color: var(--kaarslicht); }
.slot__tijd {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; line-height: 1.8; color: rgba(244, 239, 231, 0.5);
}

/* --------------------------------------------- het woordmerk in de voet

   De naam groot over de volle breedte, laag in contrast, als textuur onder
   de voet. Niet om te lezen, maar om de pagina af te sluiten. */

.voetmerk {
  margin-top: var(--space-4); overflow: hidden;
  line-height: 0.78; pointer-events: none; user-select: none;
}
.voetmerk span {
  display: block;
  font-family: var(--font-display); font-weight: 300;
  font-size: 15.1vw; letter-spacing: 0.30em;
  margin-right: -0.30em;
  text-transform: uppercase; white-space: nowrap;
  color: rgba(244, 239, 231, 0.07);
}
@media (max-width: 720px) {
  .voetmerk { margin-top: var(--space-3); }
  .voetmerk span { font-size: 16.5vw; letter-spacing: 0.18em; margin-right: -0.18em; }
}


/* --------------------------------- de werkpagina: elke klant een hoofdstuk */

/* de titelkaart: film of foto over de volle breedte, de naam erover */
.zaakkop {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 72vh; display: flex; align-items: flex-end;
  padding: var(--space-5) 0 var(--space-4);
  background: var(--surface-900);
}
.zaakkop__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.zaakkop__sluier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12,10,9,.92) 0%, rgba(12,10,9,.62) 34%, rgba(12,10,9,.12) 66%, rgba(12,10,9,.34) 100%),
    radial-gradient(120% 90% at 10% 100%, rgba(12,10,9,.60), transparent 62%);
}
.zaakkop__tekst { position: relative; z-index: 2; }
.zaak__n {
  margin: 0; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--champagne);
}
.zaak__n i { font-style: normal; opacity: .45; padding: 0 2px; }
.zaak__naam {
  margin: var(--space-2) 0 0; color: #F6F1E9;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 7vw, 104px); line-height: 0.98;
  letter-spacing: -0.025em; margin-left: -0.046em;
}
.zaak__plaats {
  margin: 14px 0 0; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246,241,233,.62);
}

/* de twee kolommen eronder */
.zaak__lijf { padding-top: var(--space-4); }
.zaak__twee {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-4);
}
.zaak__vraag {
  margin: var(--space-2) 0 0; max-width: 46ch;
  font-size: clamp(15px, 1.3vw, 17px); line-height: 1.75; color: var(--ink-soft);
}
.zaak__lijst { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.zaak__lijst li {
  position: relative; padding: 12px 0 12px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
}
.zaak__lijst li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 5px; height: 5px; background: var(--champagne); transform: rotate(45deg);
}

/* de delen */
.deel { padding: var(--space-4) 0 0; }
.deel__onder {
  display: grid; grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-3); align-items: start; margin-top: 24px;
}
.deel__onder .label { margin: 0; padding-top: 3px; }
.deel__bij {
  margin: 0; max-width: 62ch;
  font-size: 14.5px; line-height: 1.75; color: var(--ink-soft);
}

/* een brede baan beeld, breder dan de tekstkolom */
.baan { margin: 0; }
.baan img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 21 / 9; object-fit: cover;
}

/* het drukwerk: twee vellen, het tweede half over het eerste heen */
.papier { position: relative; padding-bottom: 7%; }
.papier__groot { margin: 0; }
.papier__groot img {
  display: block; width: 92%; height: auto;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
}
.papier__klein {
  position: absolute; right: 0; bottom: 0; width: 42%; margin: 0;
}
.papier__klein img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(246,241,233,.10);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.8);
}

/* schermen, in een raam met drie stipjes */
.schermenrij {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2); align-items: start;
}
.schermenrij--enkel { grid-template-columns: minmax(0, 1fr); }
.schermenrij .glas:nth-child(2) { margin-top: var(--space-3); }
.glas {
  margin: 0; overflow: hidden; background: var(--surface-800);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.75);
}
.glas__balk {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.glas__balk i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.glas img { display: block; width: 100%; height: auto; }

/* de slotzin */
.zaak__eind { padding-top: var(--space-4); padding-bottom: var(--space-5); }
.zaak__slot {
  position: relative; margin: 0; max-width: 54ch; padding-left: var(--space-3);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(21px, 2.2vw, 31px); line-height: 1.34; color: var(--ink);
}
.zaak__slot::before {
  content: ""; position: absolute; left: 0; top: .42em; bottom: .3em;
  width: 1px; background: var(--champagne);
}

@media (max-width: 860px) {
  .zaakkop { min-height: 62vh; }
  .zaak__twee { grid-template-columns: 1fr; gap: var(--space-3); }
  .deel__onder { grid-template-columns: 1fr; gap: 10px; }
  .baan img { aspect-ratio: 4 / 3; }
  .papier { padding-bottom: 0; }
  .papier__groot img { width: 100%; }
  .papier__klein { position: static; width: 100%; margin-top: var(--space-2); }
  .schermenrij { grid-template-columns: 1fr; }
  .schermenrij .glas:nth-child(2) { margin-top: 0; }
  .zaak__slot { padding-left: var(--space-2); }
}

/* ------------------------------------ de keuzebalk boven aan de werkpagina */

.kiesbalk {
  position: sticky; top: 72px; z-index: 80;
  padding: 18px 0 16px;
  background: color-mix(in srgb, var(--surface-900) 92%, transparent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.kiesbalk__kop { margin: 0 0 12px; color: var(--ink-muted); }
.zaaktabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.zaaktab {
  position: relative; display: flex; align-items: baseline; gap: 12px;
  padding: 12px 2px 14px; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--line-strong);
  color: var(--ink-muted); transition: color 0.4s var(--ease);
}
.zaaktab::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--champagne); transition: width 0.6s var(--ease);
}
.zaaktab:hover { color: var(--ink-soft); }
.zaaktab.is-aan { color: var(--ink); }
.zaaktab.is-aan::after { width: 100%; }
.zaaktab__n {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em;
  color: var(--champagne); opacity: .55; transition: opacity 0.4s var(--ease);
}
.zaaktab.is-aan .zaaktab__n { opacity: 1; }
.zaaktab__naam {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(17px, 1.7vw, 23px); line-height: 1.1; letter-spacing: -0.015em;
}
.zaaktab__soort {
  margin-left: auto; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
}

/* het logo van een partner bij een punt in de lijst */
.zaak__lijst li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.zaak__merk {
  margin-left: auto; display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; opacity: .72; transition: opacity 0.4s var(--ease);
}
.zaak__merk:hover { opacity: 1; }
.zaak__merk span {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.zaak__merk img { display: block; width: auto; height: 17px; }

@media (max-width: 860px) {
  .kiesbalk { top: 64px; padding: 14px 0 12px; }
  .zaaktabs { grid-template-columns: 1fr; gap: 0; }
  .zaaktab { padding: 11px 2px 12px; }
  .zaaktab__soort { font-size: 8.5px; }
  .zaak__lijst li { gap: 10px; }
  .zaak__merk { margin-left: 0; }
}

/* op een telefoon mag een paginakop zelf breken; de vaste regelovergangen
   zijn voor het brede scherm bedoeld */
@media (max-width: 720px) {
  .hero .display-xl br { display: none; }
}

/* ------------------------------------------- de klanten als logo, in crème */

.logowand {
  list-style: none; margin: var(--space-4) 0 0; padding: var(--space-3) 0 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  border-top: 1px solid var(--line);
}
.logowand li { display: flex; align-items: center; justify-content: center; }
.logowand img {
  display: block; width: 100%; max-width: 168px; height: auto;
  opacity: .62; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.logowand li:hover img { opacity: 1; transform: translateY(-3px); }

@media (max-width: 1000px) {
  .logowand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .logowand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .logowand img { opacity: .78; }
}

/* twee staande foto's naast elkaar, de tweede een stuk lager */
.duo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3); align-items: start;
}
.duo__beeld { margin: 0; }
.duo__beeld:nth-child(2) { margin-top: var(--space-4); }
.duo__beeld img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 3; object-fit: cover;
}
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; gap: var(--space-2); }
  .duo__beeld:nth-child(2) { margin-top: 0; }
}

/* de zin onder de logowand staat midden onder de logo's */
.wk-rest { margin-top: var(--space-4); text-align: center; }

/* ------------------------------------------- de kop van de over-pagina */

.hero--over { padding-bottom: var(--space-4); }
.overkop {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--space-4); align-items: end;
}
.overkop__titel {
  margin: var(--space-2) 0 var(--space-3);
  font-size: clamp(34px, 4.4vw, 68px);
}
.overkop__woord .lead { max-width: 42ch; }
.overkop__naam {
  margin: var(--space-3) 0 0; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted);
}
.overkop__naam span { color: var(--champagne); }
.overkop__naam i { font-style: normal; opacity: .45; padding: 0 10px; }
.overkop__portret { margin: 0; position: relative; }
.overkop__portret::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--champagne); opacity: .65;
}
.overkop__portret img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
}

@media (max-width: 860px) {
  .overkop { grid-template-columns: 1fr; gap: var(--space-3); }
  .overkop__portret { order: -1; }
  .overkop__portret img { aspect-ratio: 1 / 1; }
}

/* -------------------------- het verhaal op de over-pagina, in drie hoofdstukken */

.hfdn { margin-top: var(--space-3); }
.hfd {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end; margin-top: var(--space-5);
}
.hfd:first-child { margin-top: var(--space-4); }
.hfd__beeld { margin: 0; position: relative; z-index: 1; }
.hfd__beeld img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 5 / 4; object-fit: cover;
}
.hfd__beeld figcaption {
  margin-top: 12px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
}
.hfd__woord {
  position: relative; z-index: 2;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  background: var(--surface-900);
}
.hfd__n {
  margin: 0; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.24em; color: var(--champagne);
}
.hfd__kop {
  margin: 14px 0 var(--space-2); max-width: 15ch;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(25px, 2.9vw, 42px); line-height: 1.06; letter-spacing: -0.02em;
}
.hfd__tekst { margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }

/* beeld links, tekst rechts eroverheen */
.hfd--a .hfd__beeld { grid-column: 1 / 8; grid-row: 1; }
.hfd--a .hfd__woord {
  grid-column: 6 / 13; grid-row: 1;
  margin-bottom: calc(var(--space-4) * -1);
  padding-left: var(--space-3);
  border-left: 1px solid var(--champagne);
}
/* en andersom */
.hfd--b .hfd__beeld { grid-column: 6 / 13; grid-row: 1; }
.hfd--b .hfd__woord {
  grid-column: 1 / 9; grid-row: 1; justify-self: end;
  margin-bottom: calc(var(--space-4) * -1);
  padding-right: var(--space-3); padding-left: var(--space-3);
  border-left: 1px solid var(--champagne);
}

@media (max-width: 900px) {
  .hfd { grid-template-columns: 1fr; align-items: stretch; margin-top: var(--space-4); }
  .hfd--b .hfd__woord { justify-self: stretch; }
  .hfd__beeld, .hfd--a .hfd__beeld, .hfd--b .hfd__beeld { grid-column: 1; grid-row: 1; }
  .hfd__woord, .hfd--a .hfd__woord, .hfd--b .hfd__woord {
    grid-column: 1; grid-row: 2;
    margin: var(--space-2) 0 0 var(--space-2);
    padding: 4px 0 0 var(--space-2);
  }
  .hfd__beeld img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------- de vier afspraken, als clausules */

.afspraken { margin-top: var(--space-4); border-top: 1px solid var(--line); }
.afspraak {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--space-3); align-items: start;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
  transition: background 0.5s var(--ease);
}
.afspraak:hover { background: rgba(244, 239, 231, 0.025); }
.afspraak__zegel {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--wijn-licht); color: var(--champagne);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.afspraak:hover .afspraak__zegel { background: var(--wijn); color: var(--kaarslicht); }
.afspraak__kop {
  margin: 6px 0 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(23px, 2.4vw, 34px); line-height: 1.06; letter-spacing: -0.015em;
}
.afspraak__tekst {
  margin: 10px 0 0; max-width: 52ch;
  font-size: 15px; line-height: 1.8; color: var(--ink-soft);
}

@media (max-width: 860px) {
  .afspraak { grid-template-columns: 1fr; gap: var(--space-2); }
  .afspraak__kop { margin: 0; }
}

/* ------------------------------------ de keuzebalk boven aan de werkpagina */

.kiesbalk {
  position: sticky; top: 72px; z-index: 80;
  padding: 18px 0 16px;
  background: color-mix(in srgb, var(--surface-900) 92%, transparent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.kiesbalk__kop { margin: 0 0 12px; color: var(--ink-muted); }
.zaaktabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.zaaktab {
  position: relative; display: flex; align-items: baseline; gap: 12px;
  padding: 12px 2px 14px; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--line-strong);
  color: var(--ink-muted); transition: color 0.4s var(--ease);
}
.zaaktab::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--champagne); transition: width 0.6s var(--ease);
}
.zaaktab:hover { color: var(--ink-soft); }
.zaaktab.is-aan { color: var(--ink); }
.zaaktab.is-aan::after { width: 100%; }
.zaaktab__n {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em;
  color: var(--champagne); opacity: .55; transition: opacity 0.4s var(--ease);
}
.zaaktab.is-aan .zaaktab__n { opacity: 1; }
.zaaktab__naam {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(17px, 1.7vw, 23px); line-height: 1.1; letter-spacing: -0.015em;
}
.zaaktab__soort {
  margin-left: auto; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
}

/* het logo van een partner bij een punt in de lijst */
.zaak__lijst li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.zaak__merk {
  margin-left: auto; display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; opacity: .72; transition: opacity 0.4s var(--ease);
}
.zaak__merk:hover { opacity: 1; }
.zaak__merk span {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.zaak__merk img { display: block; width: auto; height: 17px; }

@media (max-width: 860px) {
  .kiesbalk { top: 64px; padding: 14px 0 12px; }
  .zaaktabs { grid-template-columns: 1fr; gap: 0; }
  .zaaktab { padding: 11px 2px 12px; }
  .zaaktab__soort { font-size: 8.5px; }
  .zaak__lijst li { gap: 10px; }
  .zaak__merk { margin-left: 0; }
}

/* op een telefoon mag een paginakop zelf breken; de vaste regelovergangen
   zijn voor het brede scherm bedoeld */
@media (max-width: 720px) {
  .hero .display-xl br { display: none; }
}

/* ------------------------------------------- de klanten als logo, in crème */

.logowand {
  list-style: none; margin: var(--space-4) 0 0; padding: var(--space-3) 0 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  border-top: 1px solid var(--line);
}
.logowand li { display: flex; align-items: center; justify-content: center; }
.logowand img {
  display: block; width: 100%; max-width: 168px; height: auto;
  opacity: .62; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.logowand li:hover img { opacity: 1; transform: translateY(-3px); }

@media (max-width: 1000px) {
  .logowand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .logowand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .logowand img { opacity: .78; }
}

/* twee staande foto's naast elkaar, de tweede een stuk lager */
.duo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3); align-items: start;
}
.duo__beeld { margin: 0; }
.duo__beeld:nth-child(2) { margin-top: var(--space-4); }
.duo__beeld img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 3; object-fit: cover;
}
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; gap: var(--space-2); }
  .duo__beeld:nth-child(2) { margin-top: 0; }
}

/* de zin onder de logowand staat midden onder de logo's */
.wk-rest { margin-top: var(--space-4); text-align: center; }

/* ------------------------------------------- de kop van de over-pagina */

.hero--over { padding-bottom: var(--space-4); }
.overkop {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--space-4); align-items: end;
}
.overkop__titel {
  margin: var(--space-2) 0 var(--space-3);
  font-size: clamp(34px, 4.4vw, 68px);
}
.overkop__woord .lead { max-width: 42ch; }
.overkop__naam {
  margin: var(--space-3) 0 0; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted);
}
.overkop__naam span { color: var(--champagne); }
.overkop__naam i { font-style: normal; opacity: .45; padding: 0 10px; }
.overkop__portret { margin: 0; position: relative; }
.overkop__portret::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--champagne); opacity: .65;
}
.overkop__portret img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
}

@media (max-width: 860px) {
  .overkop { grid-template-columns: 1fr; gap: var(--space-3); }
  .overkop__portret { order: -1; }
  .overkop__portret img { aspect-ratio: 1 / 1; }
}

/* -------------------------- het verhaal op de over-pagina, in drie hoofdstukken */

.hfdn { margin-top: var(--space-3); }
.hfd {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end; margin-top: var(--space-5);
}
.hfd:first-child { margin-top: var(--space-4); }
.hfd__beeld { margin: 0; position: relative; z-index: 1; }
.hfd__beeld img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 5 / 4; object-fit: cover;
}
.hfd__beeld figcaption {
  margin-top: 12px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
}
.hfd__woord {
  position: relative; z-index: 2;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  background: var(--surface-900);
}
.hfd__n {
  margin: 0; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.24em; color: var(--champagne);
}
.hfd__kop {
  margin: 14px 0 var(--space-2); max-width: 15ch;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(25px, 2.9vw, 42px); line-height: 1.06; letter-spacing: -0.02em;
}
.hfd__tekst { margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }

/* beeld links, tekst rechts eroverheen */
.hfd--a .hfd__beeld { grid-column: 1 / 8; grid-row: 1; }
.hfd--a .hfd__woord {
  grid-column: 6 / 13; grid-row: 1;
  margin-bottom: calc(var(--space-4) * -1);
  padding-left: var(--space-3);
  border-left: 1px solid var(--champagne);
}
/* en andersom */
.hfd--b .hfd__beeld { grid-column: 6 / 13; grid-row: 1; }
.hfd--b .hfd__woord {
  grid-column: 1 / 9; grid-row: 1; justify-self: end;
  margin-bottom: calc(var(--space-4) * -1);
  padding-right: var(--space-3); padding-left: var(--space-3);
  border-left: 1px solid var(--champagne);
}

@media (max-width: 900px) {
  .hfd { grid-template-columns: 1fr; align-items: stretch; margin-top: var(--space-4); }
  .hfd--b .hfd__woord { justify-self: stretch; }
  .hfd__beeld, .hfd--a .hfd__beeld, .hfd--b .hfd__beeld { grid-column: 1; grid-row: 1; }
  .hfd__woord, .hfd--a .hfd__woord, .hfd--b .hfd__woord {
    grid-column: 1; grid-row: 2;
    margin: var(--space-2) 0 0 var(--space-2);
    padding: 4px 0 0 var(--space-2);
  }
  .hfd__beeld img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------- de vier afspraken als trap */

.trap { position: relative; margin-top: var(--space-4); padding: var(--space-3) 0 0 86px; }
.trap__rail {
  position: absolute; left: 30px; top: 12px; bottom: 12px; width: 1px;
  background: var(--line-strong);
}
.trap__rail i {
  position: absolute; inset: 0; display: block; background: var(--champagne);
  transform: scaleY(var(--trap, 0)); transform-origin: top;
  transition: transform 0.35s linear;
}
.trap__treden { list-style: none; margin: 0; padding: 0; }

.trede { position: relative; padding: 0 0 var(--space-4) 0; }
.trede:last-child { padding-bottom: 0; }
.trede__stip {
  position: absolute; left: -57px; top: 26px;
  width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--surface-900); border: 1px solid var(--line-strong);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.trede.is-door .trede__stip { background: var(--champagne); border-color: var(--champagne); }

/* het grote cijfer staat half achter de kaart */
.trede__n {
  position: absolute; left: -38px; top: -48px; z-index: 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(52px, 5.6vw, 92px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--champagne);
  opacity: .22; pointer-events: none;
  transition: opacity 0.7s var(--ease);
}
.trede.is-door .trede__n { opacity: .42; }

.trede__kaart { position: relative; z-index: 1; max-width: 62ch; }
.trede__kop, .trede__tekst { position: relative; z-index: 1; }
.trede:nth-child(2) .trede__kaart { margin-left: 5%; }
.trede:nth-child(3) .trede__kaart { margin-left: 10%; }
.trede:nth-child(4) .trede__kaart { margin-left: 15%; }
.trede__kop {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(23px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.015em;
}
.trede__tekst {
  margin: 14px 0 0; font-size: 15px; line-height: 1.8; color: var(--ink-soft);
}

@media (max-width: 820px) {
  .trap { padding-left: 46px; }
  .trap__rail { left: 10px; }
  .trede__stip { left: -41px; top: 20px; }
  .trede__n { left: -16px; top: -34px; font-size: 56px; }
  .trede__kaart, .trede:nth-child(2) .trede__kaart,
  .trede:nth-child(3) .trede__kaart, .trede:nth-child(4) .trede__kaart { margin-left: 0; }
}

/* ======================================================= de dienstenpagina */

/* de ankerbalk bovenaan */
.kiesbalk--diensten .diensttabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2);
}
.diensttab {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 2px 14px; text-decoration: none;
  border-top: 1px solid var(--line-strong); color: var(--ink-muted);
  transition: color 0.4s var(--ease);
  position: relative;
}
.diensttab::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--wijn-licht); transition: width 0.6s var(--ease);
}
.diensttab:hover { color: var(--ink-soft); }
.diensttab.is-aan { color: var(--ink); }
.diensttab.is-aan::after { width: 100%; }
.diensttab__n {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em;
  color: var(--wijn-licht); opacity: .6;
}
.diensttab.is-aan .diensttab__n { opacity: 1; }
.diensttab__naam {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(16px, 1.6vw, 22px); line-height: 1.1;
}

/* de zeven lagen */
.lagen {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-4); margin-top: var(--space-4); align-items: start;
}
.lagen__stapel { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.laag {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 15px 18px; cursor: pointer; text-align: left;
  background: var(--surface-800); border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.laag:hover { border-color: var(--line-strong); transform: translateX(4px); }
.laag.is-aan {
  background: var(--wijn); border-color: var(--wijn-licht); color: #F4EFE7;
}
.laag__n {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em;
  color: var(--champagne); opacity: .7;
}
.laag.is-aan .laag__n { color: var(--kaarslicht); opacity: 1; }
.laag__naam {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(17px, 1.7vw, 24px); line-height: 1.1; letter-spacing: -0.01em;
}
.lagen__voet {
  margin: var(--space-2) 0 0; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted);
}
.lagen__uit { position: relative; min-height: 220px; padding-top: 4px; }
.laagtekst {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.laagtekst.is-aan { position: relative; opacity: 1; visibility: visible; transform: none; }
.laagtekst__n {
  margin: 0; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.24em; color: var(--wijn-licht);
}
.laagtekst__n i { font-style: normal; opacity: .45; padding: 0 4px; }
.laagtekst__kop {
  margin: 14px 0 var(--space-2);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(27px, 3.2vw, 46px); line-height: 1.04; letter-spacing: -0.02em;
}
.laagtekst__p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }

@media (max-width: 900px) {
  .kiesbalk--diensten .diensttabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-2); }
  .lagen { grid-template-columns: 1fr; gap: var(--space-3); }
  .laag { width: 100% !important; }
  .lagen__uit { min-height: 0; }
  .laagtekst { position: absolute; }
  .laagtekst.is-aan { position: relative; }
}

/* de route als spoor met stations, om en om boven en onder de lijn */
.spoorveld { margin-top: var(--space-4); overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
.spoor {
  position: relative; display: grid;
  grid-template-columns: repeat(6, minmax(224px, 1fr));
  grid-template-rows: 1fr 1fr;
  min-height: 460px; min-width: 100%;
  padding: 0 var(--gutter); max-width: var(--shell); margin: 0 auto;
}
.spoor__lijn {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; height: 1px;
  background: var(--line-strong);
}
.statie { position: relative; padding: 0 20px; }
.statie:nth-of-type(2n) { grid-row: 1; align-self: end; padding-bottom: 38px; }   /* boven de lijn */
.statie:nth-of-type(2n+1) { grid-row: 2; align-self: start; padding-top: 38px; }  /* eronder */
.statie:nth-of-type(1) { grid-column: 1; }
.statie:nth-of-type(2) { grid-column: 2; }
.statie:nth-of-type(3) { grid-column: 3; }
.statie:nth-of-type(4) { grid-column: 4; }
.statie:nth-of-type(5) { grid-column: 5; }
.statie:nth-of-type(6) { grid-column: 6; }
.statie__kaart { position: relative; z-index: 1; }
.statie__ruit {
  position: absolute; left: 20px; z-index: 2;
  width: 11px; height: 11px; transform: rotate(45deg);
  background: var(--wijn); border: 1px solid var(--wijn-licht);
}
.statie:nth-of-type(2n) .statie__ruit { bottom: -6px; }
.statie:nth-of-type(2n+1) .statie__ruit { top: -6px; }
.statie__n {
  margin: 0; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.22em; color: var(--wijn-licht);
}
.statie__naam {
  margin: 10px 0 8px; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 2.3vw, 32px); line-height: 1.05; letter-spacing: -0.015em;
}
.statie__tekst { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.statie__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

@media (max-width: 1000px) {
  .spoorveld { overflow: visible; }
  .spoor {
    grid-template-columns: 1fr; grid-template-rows: none; min-height: 0;
  }
  .spoor__lijn { left: 30px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .statie, .statie:nth-of-type(2n), .statie:nth-of-type(2n+1) {
    grid-row: auto; grid-column: 1; align-self: stretch;
    padding: 0 0 var(--space-3) 62px;
  }
  .statie:nth-of-type(2n) .statie__ruit,
  .statie:nth-of-type(2n+1) .statie__ruit { left: 25px; top: 9px; bottom: auto; }
}

/* de eerste stap als afscheurkaartjes */
.kaartjes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3); margin-top: var(--space-4);
}
.kaartje {
  display: flex; align-items: stretch;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line-strong);
}
.kaartje__stam { flex: 1; padding: var(--space-3); }
.kaartje__prijs {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(38px, 4.6vw, 62px); line-height: 1; color: var(--wijn);
}
.kaartje__naam {
  margin: 14px 0 8px; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(19px, 1.9vw, 26px); line-height: 1.1;
}
.kaartje__uit { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.kaartje__strook {
  position: relative; width: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wijn); color: var(--kaarslicht);
}
.kaartje__strook::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
  background-image: radial-gradient(circle, rgba(244,239,231,0.9) 1.2px, transparent 1.3px);
  background-size: 3px 9px; background-repeat: repeat-y;
}
.kaartje__strook span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em;
  text-transform: uppercase; white-space: nowrap;
  transform: rotate(180deg); writing-mode: vertical-rl;
}

@media (max-width: 860px) {
  .kaartjes { grid-template-columns: 1fr; }
}

/* de pakketten */
.pakgroep { margin-top: var(--space-4); }
.pakgroep__kop {
  margin: 0 0 var(--space-2); padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne);
}
.pakketrij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.pakketrij--een { grid-template-columns: minmax(0, 1fr); }
.pakket {
  position: relative; padding: var(--space-3);
  border: 1px solid var(--line-strong); background: var(--surface-800);
}
.pakket--rood { background: var(--wijn); border-color: var(--wijn-licht); }
.pakket__naam {
  margin: 0; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne);
}
.pakket__prijs {
  margin: 18px 0 0; display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(46px, 6vw, 86px); line-height: 0.95; color: var(--ink);
}
.pakket__prijs span, .pakket__prijs i {
  font-family: var(--font-mono); font-style: normal; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted);
}
.pakket__voor { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.pakket__lijst {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  columns: 2; column-gap: var(--space-3);
}
.pakketrij:not(.pakketrij--een) .pakket__lijst { columns: 1; }
.pakket__lijst li {
  position: relative; padding: 10px 0 10px 18px; break-inside: avoid;
  border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
}
.pakket__lijst li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 5px; height: 5px; background: var(--champagne); transform: rotate(45deg);
}

@media (max-width: 860px) {
  .pakketrij { grid-template-columns: 1fr; }
  .pakket__lijst, .pakketrij:not(.pakketrij--een) .pakket__lijst { columns: 1; }
}

/* ------------------------------------------- de zes dingen die we vasthouden */

.waardes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3); margin-top: var(--space-4);
}
.waarde {
  position: relative; padding: var(--space-3) var(--space-3) var(--space-3);
  border: 1px solid var(--line);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.waardes .waarde:nth-child(3n+2) { margin-top: var(--space-3); }
.waarde:hover { border-color: var(--wijn-licht); transform: translateY(-3px); }
.waarde__zegel {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--wijn-licht); color: var(--champagne);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.waarde:hover .waarde__zegel { background: var(--wijn); color: var(--kaarslicht); }
.waarde__kop {
  margin: var(--space-2) 0 10px; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(21px, 2.1vw, 29px); line-height: 1.1; letter-spacing: -0.015em;
}
.waarde__p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }

@media (max-width: 900px) {
  .waardes { grid-template-columns: 1fr; gap: var(--space-2); }
  .waardes .waarde:nth-child(3n+2) { margin-top: 0; }
}

/* springen naar een anker: onder de menubalk en de keuzebalk uitkomen */
#wat, #hoe, #kost, #portaal { scroll-margin-top: 148px; }
@media (max-width: 900px) { #wat, #hoe, #kost, #portaal { scroll-margin-top: 130px; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* het kaartje: het nummer bovenaan, het bedrag onderaan en klein */
.kaartje__n {
  margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.24em; color: var(--wijn);
}
.kaartje__prijs {
  margin: var(--space-2) 0 0; padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--wijn);
}
.kaartje__naam { margin-top: 0; }

/* ======================================================= de contactpagina */

.contactveld {
  display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: var(--space-4); align-items: start; margin-top: var(--space-3);
}

/* het wijnrode vlak met de drie manieren */
.direct { padding: var(--space-4); background: var(--wijn); }
.direct__binnen { margin-top: var(--space-3); }
.qrvlak { margin: 0 0 var(--space-3); display: inline-block; }
.qrvlak img {
  display: block; width: 196px; height: 196px; padding: 16px;
  background: var(--kaarslicht);
}
.qrvlak figcaption {
  margin-top: 12px; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted);
}
.direct__wegen { display: flex; flex-direction: column; }
.weg {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 16px 0; text-decoration: none;
  border-top: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease);
}
.weg:last-child { border-bottom: 1px solid var(--line); }
.weg:hover { padding-left: 10px; }
.weg__label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-muted);
}
.weg__waarde {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(21px, 2.1vw, 30px); line-height: 1.1; color: var(--ink);
  letter-spacing: -0.01em;
}
.weg__onder { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.weg--wa .weg__waarde { color: var(--champagne-deep); }
.direct__voet { margin: var(--space-3) 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

/* het formulier ernaast */
.formulier { padding-top: 4px; }
.formulier__kop { margin: var(--space-2) 0 var(--space-3); }

@media (max-width: 900px) {
  .contactveld { grid-template-columns: 1fr; gap: var(--space-3); }
  .direct { padding: var(--space-3); }
  .qrvlak img { width: 164px; height: 164px; }
}

/* ------------------------------------------- de eerste maand: eerst opzetten */

.opstart {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-4); margin-top: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--champagne);
  background: var(--champagne-veil);
}
.opstart__kop2 {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(25px, 2.8vw, 40px); line-height: 1.04; letter-spacing: -0.02em;
}
.opstart__prijs {
  margin: 0; display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(44px, 5.4vw, 78px); line-height: 0.95; color: var(--champagne);
}
.opstart__prijs span, .opstart__prijs i {
  font-family: var(--font-mono); font-style: normal; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted);
}
.opstart__lijf { align-self: center; }
.opstart__lijf .pakket__lijst { margin-top: 0; columns: 1; }
.opstart__onder {
  margin: var(--space-3) 0 0; max-width: 52ch;
  font-size: 13.5px; line-height: 1.75; color: var(--ink-soft);
}

@media (max-width: 860px) {
  .opstart { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-3); }
}

/* ------------------------------------------- inloggen op het portaal */

.inloglink {
  display: inline-flex; align-items: center;
  padding: 11px 4px; text-decoration: none; color: var(--ink-muted);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.inloglink:hover { color: var(--champagne); }

/* in het open menu staat hij onderaan, iets stiller dan de rest */
.menu__nav .menu__portaal {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: clamp(18px, 2vw, 26px); color: var(--ink-muted);
}
.menu__nav .menu__portaal:hover { color: var(--champagne); }

@media (max-width: 620px) { .inloglink { display: none; } }