/* ============================================================
   NICKY VANKETS — Maison de Couture
   Shared stylesheet
   ============================================================ */

:root {
  --ivory:  #F8F5F0;
  --ivory-2:#EFEAE2;
  --noir:   #0D0D0D;
  --noir-2: #1A1815;
  --noir-w: #14100B; /* warm zwart — stofdiepte voor donkere secties */
  --gold:   #C9A96E;
  --gold-d: #A88952;
  --ink:    #2A2622;
  --muted:  #8C8378;
  --line:   rgba(13,13,13,0.12);
  --line-l: rgba(248,245,240,0.18);
  --naad:   6px; /* haarlijn tussen twee beelden die elkaar raken */

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --pad: clamp(24px, 6vw, 120px);

  /* overgang tussen pagina's — zelfde curve als het introgordijn, zodat het
     paneel met hetzelfde gebaar wegschuift. main.js leest --paneel-over uit
     om te weten hoelang het moet wachten voor het doorgaat. */
  --paneel-over: .42s;
  --paneel-weg:  .72s;
  --paneel-curve: cubic-bezier(.76, 0, .24, 1);
}

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

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

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--noir); }

/* quality floor: zichtbare toetsenbordfocus, in huisstijl */
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ── Typographic primitives ─────────────────────────── */
.serif { font-family: var(--serif); }

.label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
/* tailor's tack — a short run of basting before the label */
.eyebrow::before {
  content: '';
  width: 34px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 11px);
}

/* ── Basting stitch divider — the site's signature seam ── */
.stitch {
  height: 1px; border: 0;
  margin: 0 var(--pad);
  background: repeating-linear-gradient(90deg, var(--gold) 0 7px, transparent 7px 15px);
  opacity: 0.5;
}
.stitch--full { margin: 0; opacity: 0.32; }
.section--dark .stitch, .stitch--on-dark { opacity: 0.4; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: 0.01em; }

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 1.02;
  letter-spacing: 0.02em;
}

.h-section {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.lead {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
  font-weight: 300;
  color: var(--ink);
  max-width: 44ch;
  letter-spacing: 0.01em;
}

.muted { color: var(--muted); }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--noir);
  border: 1px solid var(--noir);
  padding: 18px 54px;
  background: transparent;
  cursor: pointer;
  transition: color .55s cubic-bezier(.25,.46,.45,.94), background .55s cubic-bezier(.25,.46,.45,.94), border-color .55s cubic-bezier(.25,.46,.45,.94);
}
.btn:hover { background: var(--noir); color: var(--ivory); }

.btn--light { color: var(--ivory); border-color: var(--ivory); }
.btn--light:hover { background: var(--ivory); color: var(--noir); }

.btn--gold { color: var(--gold); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold); color: var(--noir); }

/* arrow link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--noir);
  transition: gap .35s ease, color .35s ease;
}
.arrow-link::after { content: '→'; font-size: 15px; transition: transform .35s ease; }
.arrow-link:hover { gap: 22px; color: var(--gold); }

/* ── Navigation ─────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px var(--pad);
  transition: background .5s ease, padding .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(248,245,240,0.92);
  backdrop-filter: blur(10px);
  padding-top: 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.nav.is-dark:not(.is-solid) .nav__brand,
.nav.is-dark:not(.is-solid) .nav__link,
.nav.is-dark:not(.is-solid) .nav__toggle { color: var(--ivory); }
.nav.is-dark:not(.is-solid) .nav__lines i { background: var(--ivory); }

.nav__brand {
  /* Dior-stijl: het logo hangt exact in het midden van de balk */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--noir);
  white-space: nowrap;
}
.nav__menu { display: flex; align-items: center; gap: 38px; list-style: none; }
.nav__link {
  position: relative;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); padding: 4px 0;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* ── Collecties-dropdown (Dior-stijl: weinig topniveau, veel eronder) ── */
.nav__group { position: relative; }
.nav__group > .nav__link { background: none; border: none; cursor: pointer; font-family: var(--sans); display: inline-flex; align-items: center; gap: 8px; }
.nav__group > .nav__link::before { content: ''; width: 0; }
/* klein naaldje als indicator */
.nav__caret { display: inline-block; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .35s ease; }
.nav__group:hover .nav__caret, .nav__group:focus-within .nav__caret { transform: rotate(225deg) translateY(-1px); }
.nav__dropdown {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translate(-50%, 10px);
  min-width: 240px; padding: 26px 34px;
  background: rgba(248,245,240,.97); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  display: grid; gap: 14px; list-style: none;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
/* rijgsteek bovenaan het paneel */
.nav__dropdown::before {
  content: ''; position: absolute; top: 0; left: 34px; right: 34px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px);
}
.nav__group:hover .nav__dropdown, .nav__group:focus-within .nav__dropdown,
.nav__group.is-open .nav__dropdown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.nav__dropdown a {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap; position: relative; padding: 2px 0; transition: color .3s ease;
}
.nav__dropdown a:hover, .nav__dropdown a.is-active { color: var(--gold); }
.nav__dropdown-label { font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.nav__dropdown-label:first-child { margin-top: 0; }

/* Menu-knop: twee fijne lijntjes + het woord, zichtbaar op alle formaten (Dior-stijl) */
.nav__toggle { display: inline-flex; align-items: center; gap: 12px; background: none; border: none; cursor: pointer; padding: 6px 0; color: var(--ink); }
.nav__lines { display: flex; flex-direction: column; gap: 6px; }
.nav__lines i { display: block; width: 24px; height: 1px; background: var(--noir); transition: transform .4s ease, background .3s ease; }
.nav__toggle em { font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
body.nav-open .nav__lines i:first-child { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .nav__lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Schermvullend menu-overlay (desktop én mobiel) — het maison-menu */
.nav__drawer {
  position: fixed; inset: 0; z-index: 190;
  background: var(--noir-w); color: var(--ivory);
  display: flex; flex-direction: column; justify-content: center; justify-content: safe center; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity .6s ease;
  overflow-y: auto; padding: 120px 24px 60px;
}
.nav__drawer.is-open { opacity: 1; pointer-events: auto; }
.nav__drawer a {
  font-family: var(--serif); font-size: clamp(22px, 2.4vw, 36px); font-weight: 300;
  letter-spacing: 0.04em; color: var(--ivory); line-height: 1.2;
  transition: color .3s ease;
}
.nav__drawer a:hover { color: var(--gold); }
/* Seizoen naast een collectie die nog niet bestaat. Staat nu enkel bij Accessoires:
   die schoof door naar najaar 2028 en verdween daarom van de hoofdpagina, maar blijft
   in het menu zichtbaar. Bewust inline en tussen haakjes, in gedempt ivoor: als losse
   regel eronder in gouden kapitalen las het als een groepskopje, waardoor Kinder
   Communie en Business Couture eronder leken te vallen. */
.nav__soon {
  font-size: 0.46em; letter-spacing: 0.04em; white-space: nowrap;
  color: rgba(248, 245, 240, .5); margin-left: .45em;
}
.nav__drawer-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-top: 20px; margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 14px;
}
/* rijgsteekjes links en rechts van het groepslabel */
.nav__drawer-label::before, .nav__drawer-label::after {
  content: ''; width: 30px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 11px);
  opacity: .7;
}
.nav__drawer-label:first-child { margin-top: 0; }
/* menu-items rijgen zich één voor één binnen */
.nav__drawer > * { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1), color .3s ease; }
.nav__drawer.is-open > * { opacity: 1; transform: none; }
.nav__drawer.is-open > *:nth-child(2)  { transition-delay: .05s; }
.nav__drawer.is-open > *:nth-child(3)  { transition-delay: .10s; }
.nav__drawer.is-open > *:nth-child(4)  { transition-delay: .15s; }
.nav__drawer.is-open > *:nth-child(5)  { transition-delay: .20s; }
.nav__drawer.is-open > *:nth-child(6)  { transition-delay: .25s; }
.nav__drawer.is-open > *:nth-child(7)  { transition-delay: .30s; }
.nav__drawer.is-open > *:nth-child(8)  { transition-delay: .35s; }
.nav__drawer.is-open > *:nth-child(9)  { transition-delay: .42s; }
.nav__drawer.is-open > *:nth-child(10) { transition-delay: .47s; }
.nav__drawer.is-open > *:nth-child(11) { transition-delay: .52s; }
.nav__drawer.is-open > *:nth-child(12) { transition-delay: .57s; }
/* de balk boven het open menu: transparant, alles ivoor */
body.nav-open .nav { background: transparent; backdrop-filter: none; border-color: transparent; }
body.nav-open .nav .nav__logo { filter: brightness(0) invert(1); }
body.nav-open .nav .nav__toggle, body.nav-open .nav .nav__link { color: var(--ivory); }
body.nav-open .nav .nav__lines i { background: var(--ivory); }
@media (prefers-reduced-motion: reduce) {
  .nav__drawer > * { transform: none; transition: opacity .3s ease; }
}

/* enkel voor voorleessoftware en zoekmachines: onzichtbaar op het scherm */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Hero ───────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad) clamp(60px,9vh,110px);
  color: var(--ivory); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,13,13,.45) 0%, rgba(13,13,13,.12) 38%, rgba(13,13,13,.62) 100%);
}
.hero__inner { max-width: 1100px; }
/* the thread: a single seam that stitches itself in on load */
.hero__thread { width: 1px; height: 0; background: var(--gold); margin-bottom: 30px; animation: thread-draw 1s .15s cubic-bezier(.2,.6,.2,1) forwards; }
.hero__eyebrow { color: var(--gold); letter-spacing: 0.4em; opacity: 0; animation: hero-rise .9s .7s ease forwards; text-shadow: 0 1px 24px rgba(13,13,13,.55); }
.hero__title { font-size: clamp(50px, 9.2vw, 138px); line-height: 0.94; font-weight: 300; letter-spacing: -0.015em; margin: 26px 0 26px; opacity: 0; animation: hero-rise 1.1s .9s cubic-bezier(.2,.6,.2,1) forwards; }
/* couture-typografie: de tweede regel in italic, iets terughoudender van gewicht */
.hero__title em { font-style: italic; font-weight: 300; letter-spacing: 0; }
.hero__sub { font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(248,245,240,.82); opacity: 0; animation: hero-rise .9s 1.25s ease forwards; text-shadow: 0 1px 24px rgba(13,13,13,.55); }

@keyframes thread-draw { from { height: 0; } to { height: 64px; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__thread { height: 64px; animation: none; }
  .hero__eyebrow, .hero__title, .hero__sub { opacity: 1; animation: none; }
}

/* ── Hero kinetic showcase — de collectielijn in beweging ──
   Gebouwd als video-slot: zodra de campagnevideo van Nicky binnen is,
   vervangt één <video>-element de .hero__slides (zie comment in index.html). */
.hero__slides { position: absolute; inset: 0; z-index: -2; background: var(--noir-w); }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hero__slide video { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
/* trage adem-zoom zolang een slide actief is */
.hero__slide img { transform: scale(1.06); transition: opacity 1.5s ease, transform 6.5s linear; }
.hero__slide.is-active img { transform: scale(1); }

/* teaser-slide: de komende collecties, op warm noir */
.hero__slide--teaser { display: flex; align-items: center; justify-content: center; background: var(--noir-w); }
.hero__teaser { text-align: center; padding: 0 24px; }
.hero__teaser-season { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.hero__teaser-line { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(24px, 3.4vw, 46px); line-height: 1.3; color: var(--ivory); max-width: 22ch; }

/* roterend collectielabel, rechtsonder */
.hero__coll {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(60px,9vh,110px); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ivory); text-align: center;
}
.hero__coll-num { font-family: var(--serif); font-size: 15px; color: var(--gold); letter-spacing: 0.1em; }
.hero__coll-name { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 26px); font-weight: 300; letter-spacing: 0.04em; transition: opacity .5s ease; }
/* de voortgangssteek: rijgt zich vol per slide */
.hero__coll-bar { width: 120px; height: 1px; background: repeating-linear-gradient(90deg, rgba(248,245,240,.25) 0 6px, transparent 6px 12px); position: relative; overflow: hidden; }
.hero__coll-fill { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px); width: 0; }
.hero__coll-fill.is-running { animation: coll-fill var(--slide-dur, 3.8s) linear forwards; }
@keyframes coll-fill { from { width: 0; } to { width: 100%; } }
@media (max-width: 760px) { .hero__coll { bottom: clamp(44px,7vh,80px); } }
@media (prefers-reduced-motion: reduce) {
  .hero__slide img { transform: none; transition: none; }
  .hero__coll-fill.is-running { animation: none; width: 100%; }
}

/* ── Intro overlay — the curtain ────────────────────── */
/* ── Overgang tussen pagina's ──────────────────────────
   Bij aankomst licht de pagina op uit het donker, bij vertrek dooft ze weer,
   zodat een klik aanvoelt als één beweging in plaats van een browsersprong.

   De aankomst is puur CSS en draait dus ook als JavaScript faalt; main.js zet
   bij het vertrek enkel de klasse is-leaving. Bewust een los vlak via
   body::after en geen opacity op body zelf: opacity maakt van body een
   containing block en dan breekt position:fixed, waardoor de navigatie en het
   introgordijn zouden meescrollen. z-index 1200 ligt boven de lichtbak (1100)
   en het introgordijn (1000). */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1200;
  background: var(--noir-w); pointer-events: none;
  animation: paneel-weg var(--paneel-weg) var(--paneel-curve) forwards;
}
body.is-leaving::after { animation: paneel-over var(--paneel-over) var(--paneel-curve) forwards; }
/* het paneel schuift bij vertrek van onderaf over de pagina, en op de volgende
   pagina schuift het verder omhoog het beeld uit: één doorlopende beweging */
@keyframes paneel-over { from { transform: translateY(101%);  } to { transform: translateY(0);     } }
@keyframes paneel-weg  { from { transform: translateY(0);     } to { transform: translateY(-101%); } }
@media (prefers-reduced-motion: reduce) {
  body::after,
  body.is-leaving::after { animation-duration: .01s; }
}

body.intro-active { overflow: hidden; }
/* Tweede bezoek binnen dezelfde sessie: het gordijn is al weg vóór de eerste
   tekening, zodat er geen zwarte flits is. De klasse wordt gezet door het
   scriptje in de head van index.html; main.js ruimt het element daarna op. */
html.intro-skip .intro { display: none; }
.intro {
  position: fixed; inset: 0; z-index: 1000;
  color: var(--ivory); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: transform 1.2s cubic-bezier(.76,0,.24,1);
  will-change: transform;
}
.intro.is-lifting { transform: translateY(-101%); }
.intro__media { position: absolute; inset: 0; z-index: -2; background: var(--noir); }
.intro__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 32%;
  transform: scale(1.08); animation: intro-zoom 5s linear forwards;
}
/* vijf campagnevideo's, gestapeld; .is-showing bepaalt welke zichtbaar is.
   Crossfade: main.js zet de nieuwe clip via z-index bóven de nog zichtbare
   oude en fadet hem in — de oude blijft opaak tot de fade klaar is,
   dus geen donkere dip halverwege. */
.intro__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  opacity: 0; transition: opacity .8s ease;
}
.intro__vid.is-showing { opacity: 1; }
.intro::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 120% 95% at 50% 45%, rgba(13,13,13,.28) 0%, rgba(13,13,13,.6) 60%, rgba(13,13,13,.85) 100%),
    linear-gradient(180deg, rgba(13,13,13,.45) 0%, rgba(13,13,13,.05) 32%, rgba(13,13,13,.55) 100%);
  opacity: .38; transition: opacity 1s ease;
}
/* tijdens de logofase verdiept de waas zodat het witte logo altijd leest */
.intro--dim::after { opacity: 1; }
.intro__inner { position: relative; text-align: center; padding: 0 24px; opacity: 0; }
.intro--write .intro__inner,
.intro--motion-loaded .intro__inner,
.intro--logo-in .intro__inner { opacity: 1; }
/* discrete overslaan-knop */
.intro__skip {
  position: absolute; bottom: clamp(22px, 4vh, 44px); left: 50%; transform: translateX(-50%);
  z-index: 5; appearance: none; background: none; cursor: pointer;
  border: 1px solid rgba(248,245,240,.35); border-radius: 999px;
  color: rgba(248,245,240,.85); padding: 10px 26px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.intro__skip:hover { border-color: var(--gold); color: var(--gold); }
/* soft halo so the type always reads over the image */
.intro__inner::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 150%; height: 230%;
  background: radial-gradient(ellipse at center, rgba(13,13,13,.62) 0%, rgba(13,13,13,.3) 45%, rgba(13,13,13,0) 72%);
}
.intro__eyebrow {
  display: block; font-size: 10.5px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 26px;
  opacity: 0; animation: intro-rise 1.1s .4s ease forwards;
}
.intro__mark {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 7vw, 88px); line-height: 1;
  letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase;
  color: var(--ivory); text-shadow: 0 2px 40px rgba(13,13,13,.6);
  opacity: 0; animation: intro-rise 1.3s .7s cubic-bezier(.2,.6,.2,1) forwards;
}
.intro__seam {
  height: 1px; width: 0; margin: 34px auto 30px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 7px, transparent 7px 14px);
  animation: intro-stitch 1.2s 1.2s cubic-bezier(.2,.6,.2,1) forwards;
}
.intro__tag {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(15px, 1.6vw, 20px); letter-spacing: 0.04em;
  color: rgba(248,245,240,.9);
  opacity: 0; animation: intro-rise 1.2s 1.5s ease forwards;
}
@keyframes intro-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes intro-stitch { from { width: 0; } to { width: min(320px, 64vw); } }
@keyframes intro-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
/* with the curtain, present the hero already composed underneath;
   intro-done houdt die staat vast zodat de tekst niet opnieuw animeert */
body.intro-active .hero__thread,
body.intro-done .hero__thread { height: 64px; animation: none; }
body.intro-active .hero__eyebrow,
body.intro-active .hero__title,
body.intro-active .hero__sub,
body.intro-done .hero__eyebrow,
body.intro-done .hero__title,
body.intro-done .hero__sub { opacity: 1; transform: none; animation: none; }

.hero--center { justify-content: center; align-items: center; text-align: center; }
.hero--center .hero__inner { display: flex; flex-direction: column; align-items: center; }

/* page hero (shorter, for subpages) */
.pagehero {
  position: relative; min-height: 72dvh;
  display: flex; align-items: flex-end;
  padding: 0 var(--pad) clamp(48px,7vh,84px);
  color: var(--ivory); overflow: hidden;
}
.pagehero__media { position: absolute; inset: 0; z-index: -2; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* videoloop in de pagehero — zelfde vulgedrag als een foto */
.pagehero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }
/* Een videohero is hoger dan een fotohero. Reden: de clips zijn 16:9 en een
   hero van 72dvh is veel breder dan hoog, waardoor er zoveel bovenaan wegviel
   dat het hoofd van het model uit beeld liep. Op deze hoogte blijft vrijwel
   het volledige kader staan en zakt de figuur weg van de logobalk bovenaan. */
.pagehero--video { min-height: 86dvh; }
@media (max-width: 760px) {
  .pagehero--video { min-height: 74dvh; }
  .pagehero--video .pagehero__media video { object-position: center 22%; }
}
/* wie beweging heeft uitgezet, krijgt de achtergrondfoto van .pagehero__media
   in plaats van de bewegende loop */
@media (prefers-reduced-motion: reduce) {
  .pagehero__video { display: none; }
}
.pagehero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,13,13,.22) 0%, rgba(13,13,13,.04) 42%, rgba(13,13,13,.55) 100%);
}
.pagehero__title { font-size: clamp(40px,6.5vw,90px); font-weight: 300; line-height: 1; margin-top: 20px; }
/* pagehero zonder beeld — voor collecties in voorbereiding */
.pagehero--soon { background: var(--noir-w); min-height: 62dvh; }
.pagehero--soon::after { content: none; }

/* PAPIERHERO — Het Verhaal.
   Het tekeningenblad staat op zijn eigen papierkleur binnen een beeld van
   2600x1180 (verhouding 2,20). De hero volgt die verhouding, zodat er niets
   wordt weggesneden; dat was de fout van de vorige collage-hero.
   Omdat de ondergrond licht is, gaan de titel en de navigatie hier naar het
   donker in plaats van naar ivoor, en vervalt de donkere sluier. */
.pagehero--papier { min-height: min(45.4vw, 88dvh); color: var(--noir); }
.pagehero--papier::after { content: none; }
.pagehero--papier .pagehero__media img { object-position: center center; }
.pagehero--papier .label { color: var(--gold-d); }
@media (max-width: 760px) {
  /* Op een telefoon varieert de hoogte van de hero met de browserbalk, dus de
     verhouding van het beeld valt nooit precies samen met die van het kader.
     Vandaar de uitsnede tegen de bovenrand: dan kan cover hooguit onderaan
     wegnemen, waar enkel papier staat, en nooit de hoofden. */
  .pagehero--papier { min-height: 72dvh; }
  .pagehero--papier .pagehero__media img { object-position: center top; }
}


/* ── Archiefafdrukken op Het Verhaal ─────────────────
   Eén beeld per hoofdstuk, uit het merkboek. Bewust een andere beeldtaal dan de
   collectiepagina: die draait op gepolijste campagnefotografie, dit is archief.
   Vandaar de witte rand, de lichte draaiing en het bijschrift, zoals de
   afdrukken in het boek zelf liggen. De bijschriften zijn letterlijk die uit
   het merkboek, niet zelf verzonnen. */
.archief {
  margin: clamp(30px,3.5vw,54px) 0 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.archief img {
  display: block; width: 100%; height: auto;
  background: #fdfcfa; padding: 12px 12px 16px;
  box-shadow: 0 18px 44px rgba(13,13,13,.22), 0 2px 6px rgba(13,13,13,.14);
  transform: rotate(var(--draai, 0deg));
}
.archief figcaption {
  font-family: var(--sans); font-size: .84rem; line-height: 1.5;
  color: var(--noir-2); opacity: .62; max-width: 46ch;
}
/* de sectie is donker: bijschrift en papier moeten daar meeademen */
.section--dark .archief figcaption { color: var(--ivory); opacity: .58; }
.section--dark .archief img { box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4); }

/* Breedte en uitlijning. De smalle staande afdrukken staan naast de tekstkolom,
   de brede loopt over de volle kolombreedte. */
.archief--rechts { align-items: flex-end; margin-left: auto; }
.archief--rechts figcaption { text-align: right; }
.archief--links  { align-items: flex-start; }
.archief--rechts, .archief--links { max-width: min(400px, 46%); }
.archief--breed  { max-width: min(760px, 72%); margin-left: auto; margin-right: auto; align-items: center; }
.archief--breed figcaption { text-align: center; max-width: 54ch; }

@media (max-width: 860px) {
  .archief--rechts, .archief--links, .archief--breed {
    max-width: 100%; margin-left: 0; margin-right: 0;
    align-items: flex-start;
  }
  .archief--rechts figcaption, .archief--breed figcaption { text-align: left; }
  .archief img { transform: none; }
}

/* ── Layout helpers ─────────────────────────────────── */
.section { padding: clamp(100px,14vh,180px) var(--pad); }
.section--dark { background: var(--noir-w); color: var(--ivory); }
.section--dark .lead { color: rgba(248,245,240,.78); }
.section--dark .arrow-link { color: var(--ivory); }
.section--ivory2 { background: var(--ivory-2); }

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px,6vw,100px); align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
.split--wide-right { grid-template-columns: 0.85fr 1.15fr; }

.stack > * + * { margin-top: 30px; }

.figure { position: relative; overflow: hidden; }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.6,.2,1); }
.figure:hover img { transform: scale(1.04); }
.figure--tall { aspect-ratio: 3/4; }
.figure--portrait { aspect-ratio: 4/5; }
.figure--square { aspect-ratio: 1/1; }

.caption {
  margin-top: 16px; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

/* ── Collection preview grid (homepage) ─────────────── */
/* editorial ritme: ruimere gutters + om-en-om verlaagde kaarten,
   als jurken die naast elkaar hangen op verschillende hoogtes */
.collections { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 22px); }
.collection {
  position: relative; aspect-ratio: 3/4.4; overflow: hidden; display: block;
}
@media (min-width: 1025px) {
  .collection:nth-child(even) { margin-top: clamp(32px, 4vw, 64px); }
}
.collection img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.6,.2,1); }
/* de foto's ademen: nauwelijks sluier in rust, pas verdiepen bij hover */
.collection::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 52%, rgba(13,13,13,.58) 100%);
  transition: background .6s ease;
}
.collection:hover img { transform: scale(1.05); }
.collection:hover::after { background: linear-gradient(180deg, rgba(13,13,13,.08) 24%, rgba(13,13,13,.78) 100%); }
.collection__cap {
  position: absolute; left: 32px; right: 32px; bottom: 38px; z-index: 2; color: var(--ivory);
}
.collection__num { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); }
.collection__name { font-family: var(--serif); font-size: 28px; font-weight: 300; margin: 10px 0 16px; line-height: 1.04; letter-spacing: -0.005em; }
.collection__more { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.collection:hover .collection__more { opacity: 1; transform: translateY(0); }

/* "in voorbereiding"-kaart: gereserveerde plek voor een komende collectie.
   Bewust leeg — een gouden rijgsteekkader wacht op het beeld van Nicky. */
.collection--soon { background: var(--noir-w); display: flex; align-items: center; justify-content: center; text-align: center; }
.collection--soon::after { content: none; }
.collection--soon::before {
  content: ''; position: absolute; inset: 16px;
  border: 1px dashed rgba(201,169,110,.45);
  transition: border-color .5s ease, inset .5s ease;
}
.collection--soon:hover::before { border-color: rgba(201,169,110,.85); inset: 12px; }
.soon__inner { position: relative; padding: 24px; }
.soon__season { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.soon__name { font-family: var(--serif); font-size: clamp(24px, 1.9vw, 30px); font-weight: 300; color: var(--ivory); line-height: 1.1; margin-bottom: 20px; }
.soon__note { display: inline-block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(248,245,240,.55); }

/* lege beeldruimte op de nieuwe collectiepagina's — wacht op fotomateriaal */
.figure--soon { background: #ECE5DA; display: flex; align-items: center; justify-content: center; }
.figure--soon::before { content: ''; position: absolute; inset: 14px; border: 1px dashed rgba(201,169,110,.65); }
.figure--soon span { position: relative; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.section--dark .figure--soon { background: rgba(248,245,240,.04); }
.section--dark .figure--soon span { color: rgba(248,245,240,.45); }

/* ── Editorial gallery (collection pages) ───────────── */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(8px,1.4vw,22px); }
.gallery .figure { grid-column: span 4; aspect-ratio: 3/4; }
.gallery .figure.is-wide { grid-column: span 6; aspect-ratio: 4/5; }
.gallery .figure.is-offset { margin-top: clamp(30px,7vw,90px); }

/* ── Campagneblok (Dior-stijl): schermvullend beeld, kleine
   gecentreerde caption onderaan, onderstreepte ontdek-link.
   .campaign__media accepteert later ook een <video>. ── */
.campaign { position: relative; min-height: 94dvh; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; color: var(--ivory); }
.campaign__media { position: absolute; inset: 0; z-index: -2; background: var(--noir-w); }
.campaign__media img, .campaign__media video { width: 100%; height: 100%; object-fit: cover; }
/* roterende clips (atelier-handwerk): gestapeld + crossfade, zoals de hero */
.campaign__media--rotate video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.campaign__media--rotate video.is-showing { opacity: 1; }
.campaign::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,13,13,0) 55%, rgba(13,13,13,.55) 100%); }
.campaign__cap { position: relative; text-align: center; padding: 0 24px clamp(52px, 8vh, 96px); }
.campaign__eyebrow { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.campaign__title { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.08; margin-bottom: 26px; text-shadow: 0 1px 30px rgba(13,13,13,.45); }

/* ── Beeldnavigatie: de collecties als hoofdstukken op de homepage ──
   Het hele beeld is de link; kleine gecentreerde caption onderaan. */
.campaign--nav { display: flex; }
.campaign--nav .campaign__media img { transition: transform 1.6s ease-out; }
.campaign--nav:hover .campaign__media img { transform: scale(1.035); }
.campaign--nav:hover .text-link { color: var(--gold); }

/* ── NAAD TUSSEN TWEE BEELDEN ──
   Waar twee schermvullende hoofdstukken elkaar raken liepen de foto's in
   elkaar over tot één lange strook. Een zwarte haarlijn zet ze uit elkaar,
   zoals een passe-partout tussen twee platen. Alleen op de raakvlakken:
   waar een beeld tegen een ivoren sectie staat scheidt de kleur al genoeg.
   Dikte staat in --naad, zodat ze in één keer te wijzigen is. */
.campaign + .campaign,
.campaign + .duo,
.duo + .campaign { border-top: var(--naad) solid var(--noir); }
/* De twee hoofdstukken naast elkaar in de duo krijgen een staande naad.
   De liggende naad hierboven moet er weg, anders zakt de rechterhelft twee
   pixels dieper dan de linker en loopt de duo scheef. */
.duo .campaign + .campaign { border-top: 0; border-left: var(--naad) solid var(--noir); }
/* twee hoofdstukken naast elkaar */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo .campaign { min-height: 92dvh; }
/* De kindercollectie als hoofdstuk in bandvorm. Ze stond eerst als losse
   kaart in een .soonband-rij, maar die rij was voor drie kaarten gemaakt;
   met nog één kaart erin liep het beeld door tot zijn eigen hoogte (1266px
   op een breed scherm) en zakte het bijschrift linksonder uit beeld. Nu een
   gewoon campagnehoofdstuk met een gecentreerd bijschrift zoals de andere,
   alleen lager: de foto komt van Nicky op 1600px breed en verdraagt geen
   schermvullend kader van 94dvh. */
.campaign--band { min-height: clamp(440px, 68vh, 760px); }
/* In een lage band zit het bijschrift niet onderaan maar bijna in het midden
   van het beeld, en daar is deze foto juist het lichtst (manen in tegenlicht).
   De sluier van een gewoon hoofdstuk begint pas op 55% en is daar te zwak,
   dus deze band krijgt een eigen sluier die over de volle hoogte loopt. */
.campaign--band::after {
  background: linear-gradient(180deg, rgba(13,13,13,.14) 0%, rgba(13,13,13,.32) 46%, rgba(13,13,13,.66) 100%);
}
.campaign--band:hover::after {
  background: linear-gradient(180deg, rgba(13,13,13,.20) 0%, rgba(13,13,13,.40) 46%, rgba(13,13,13,.74) 100%);
}
@media (max-width: 900px) {
  /* Twee klassen, want verderop zet een smal-scherm-regel .campaign--nav op
     70dvh; met één klasse zou die het van deze band winnen op volgorde. */
  .campaign--nav.campaign--band { min-height: clamp(360px, 52vh, 520px); }
}

/* ── Business Couture: eigen hoofdstuk op de homepage ──
   Tweede pijler van het huis. De rechterhelft is de gereserveerde beeldplek:
   een gouden rijgsteekkader met de roos, tot de foto's van Nicky er zijn.
   Zodra dat beeld er is: <img> in .business__media en roos/label eruit. */
.business {
  background: var(--noir-w); color: var(--ivory);
  padding: clamp(100px,14vh,180px) var(--pad);
}
.business__grid { align-items: center; }
.business .lead { color: rgba(248,245,240,.78); }
.business .lead.muted { color: rgba(248,245,240,.5); }
.business .arrow-link { color: var(--ivory); }
/* Sinds 12 aug 2026 staat hier een echte foto in plaats van het gereserveerde
   kader met de gouden rijgsteek; die stippellijn is daarom verwijderd. */
.business__media {
  position: relative; display: block;
  aspect-ratio: 4/5; background: rgba(248,245,240,.035); overflow: hidden;
}
.business__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.business__media:hover img { transform: scale(1.04); }
.business__tack {
  position: relative; width: 54px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 7px, transparent 7px 15px);
  opacity: .75;
}
.business__soon {
  position: relative; font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(248,245,240,.5);
}
@media (max-width: 760px) {
  .business__media { aspect-ratio: 3/2; }
}
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; }
  .duo .campaign, .campaign--nav { min-height: 70dvh; }
  /* op een smal scherm staan de twee hoofdstukken van de duo onder elkaar,
     dus verhuist hun naad van de zijkant naar de bovenkant */
  .duo .campaign + .campaign { border-left: 0; border-top: var(--naad) solid var(--noir); }
}
@media (prefers-reduced-motion: reduce) {
  .campaign--nav .campaign__media img { transition: none; }
}

/* onderstreepte tekstlink, Dior-achtig ingetogen */
.text-link {
  display: inline-block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: inherit; padding-bottom: 5px; border-bottom: 1px solid currentColor;
  transition: color .35s ease, border-color .35s ease;
}
.text-link:hover { color: var(--gold); }

/* ── Rustmoment met de roos (ons "bijtje van Dior") ── */
.interlude { text-align: center; padding: clamp(90px, 14vh, 170px) var(--pad); }
.interlude__rose { height: 96px; width: auto; margin: 0 auto 34px; opacity: .9; }
.interlude__line { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.4; max-width: 34ch; margin: 0 auto; color: var(--ink); }
.interlude__links { margin-top: 34px; display: flex; gap: 44px; justify-content: center; flex-wrap: wrap; }
.interlude__links .text-link { color: var(--ink); }

/* ── Quote band ─────────────────────────────────────── */
.quote { text-align: center; padding: clamp(90px,15vh,180px) var(--pad); }
.quote__text {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(34px,5.2vw,76px); line-height: 1.16; max-width: 16ch; margin: 0 auto;
  letter-spacing: -0.01em;
}
.quote__attr {
  margin-top: 36px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 16px;
}
/* rijgsteekjes links en rechts van de naam — het label ingenaaid */
.quote__attr::before, .quote__attr::after {
  content: ''; width: 30px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 11px);
  opacity: .7;
}

/* ── Numbered process steps ─────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(28px,4vw,60px); }
.step__num { font-family: var(--serif); font-size: 40px; color: var(--gold); line-height: 1; }
.step__rule { width: 100%; height: 1px; background: var(--line); margin: 22px 0; }
.section--dark .step__rule { background: var(--line-l); }
.step__title { font-family: var(--serif); font-size: 23px; font-weight: 400; margin-bottom: 12px; }
.step__text { font-size: 14px; line-height: 1.75; color: var(--muted); }
.section--dark .step__text { color: rgba(248,245,240,.62); }

/* scroll-gedreven variant: de stappen ontwaken één voor één terwijl je
   scrolt (main.js zet .is-active per stap, en haalt hem ook weer weg bij
   terugscrollen). De gouden draad rijgt zich per stap door de lijn. */
.steps--scroll .step {
  opacity: .22; transform: translateY(18px);
  transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1);
}
.steps--scroll .step.is-active { opacity: 1; transform: none; }
.steps--scroll .step__rule { position: relative; overflow: hidden; }
.steps--scroll .step__rule::after {
  content: ''; position: absolute; inset: 0; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1) .2s;
}
.steps--scroll .step.is-active .step__rule::after { transform: scaleX(1); }

/* ── CTA band ───────────────────────────────────────── */
.cta { background: var(--noir-w); color: var(--ivory); text-align: center; padding: clamp(90px,14vh,170px) var(--pad); }
.cta__rule { width: 56px; height: 1px; background: var(--gold); margin: 0 auto 36px; }
.cta__title { font-family: var(--serif); font-weight: 300; font-size: clamp(32px,4.4vw,60px); line-height: 1.1; margin-bottom: 20px; }
.cta__text { color: rgba(248,245,240,.7); max-width: 44ch; margin: 0 auto 44px; font-size: 15px; }

/* ── Form ───────────────────────────────────────────── */
.form { display: grid; gap: 0; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; }
.field { position: relative; border-bottom: 1px solid var(--line); padding: 26px 0 14px; }
.form__row .field:first-child { padding-right: 28px; }
.form__row .field:last-child { padding-left: 28px; border-left: 1px solid var(--line); }
.field label { display: block; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.field input, .field select, .field textarea {
  width: 100%; border: none; background: transparent; outline: none;
  font-family: var(--sans); font-size: 16px; font-weight: 300; color: var(--ink);
  appearance: none; resize: none;
}
.field textarea { min-height: 90px; }
.field--full { grid-column: 1 / -1; }
.form__foot { margin-top: 42px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.form__note { font-size: 12px; color: var(--muted); }

/* ── Contact typographic block ──────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(30px,4vw,70px); }
.contact-block h3 { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); font-family: var(--sans); font-weight: 400; margin-bottom: 18px; }
.contact-block p { font-size: 16px; line-height: 1.8; color: var(--ink); }

/* ── Footer ─────────────────────────────────────────── */
.footer { background: var(--noir-w); color: var(--ivory); padding: 0; }
.footer__rule { height: 1px; background: var(--gold); width: 100%; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(36px,5vw,80px); padding: clamp(60px,9vh,100px) var(--pad) 48px; }
.footer__brand { font-family: var(--serif); font-size: 24px; letter-spacing: 0.28em; text-transform: uppercase; }
.footer__tag { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 16px; color: rgba(248,245,240,.6); }
.footer__col h4 { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; font-weight: 400; }
.footer__col ul { list-style: none; display: grid; gap: 13px; }
.footer__col a, .footer__col p { font-size: 14px; color: rgba(248,245,240,.72); transition: color .3s ease; }
.footer__col a:hover { color: var(--gold); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 22px var(--pad); border-top: 1px solid var(--line-l);
  font-size: 11px; letter-spacing: 0.08em; color: rgba(248,245,240,.4);
}

/* ── Scroll reveal ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .figure img, .collection img { transition: none; }
  .steps--scroll .step { opacity: 1; transform: none; transition: none; }
  .steps--scroll .step__rule::after { transform: scaleX(1); transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .collections { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .nav__toggle em { display: none; }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
  .split .figure { order: -1; }
  .gallery { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .gallery .figure, .gallery .figure.is-wide { grid-column: span 1; aspect-ratio: 3/4; }
  .gallery .figure.is-offset { margin-top: 0; }
  .collections { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .form__row .field:first-child { padding-right: 0; }
  .form__row .field:last-child { padding-left: 0; border-left: none; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ── Scroll journey (homepage) ──────────────────────── */
.thread { position: fixed; top: 0; left: clamp(16px, 3.5vw, 56px); width: 1px; height: 100vh; z-index: 90; pointer-events: none; }
.thread__track { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(201,169,110,.16) 0 6px, transparent 6px 13px); }
.thread__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: repeating-linear-gradient(180deg, var(--gold) 0 6px, transparent 6px 13px); }


/* stacking full-bleed scenes */
.scenes { position: relative; }
.scene { position: sticky; top: 0; height: 100dvh; min-height: 600px; overflow: hidden; display: flex; align-items: flex-end; }
.scene__media { position: absolute; inset: 0; z-index: -2; background: var(--noir); }
.scene__media img { width: 100%; height: 100%; object-fit: cover; }
.scene::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,13,13,.5) 0%, rgba(13,13,13,.04) 34%, rgba(13,13,13,.78) 100%); }
.scene__content { width: 100%; padding: 0 var(--pad) clamp(64px, 11vh, 130px); color: var(--ivory); }
.scene__index { font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); }
.scene__name { font-family: var(--serif); font-weight: 300; font-size: clamp(46px, 8.2vw, 124px); line-height: 0.96; letter-spacing: 0.01em; margin: 14px 0 20px; }
.scene__line { max-width: 44ch; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.7; color: rgba(248,245,240,.84); margin-bottom: 30px; }
.scene .arrow-link { color: var(--ivory); }
.scene .arrow-link:hover { color: var(--gold); }

/* manifesto scene */
.scene--manifesto { align-items: center; text-align: center; }
.scene--manifesto .scene__media img { opacity: .42; object-position: center 40%; }
.scene--manifesto::after { background: radial-gradient(ellipse at center, rgba(13,13,13,.55) 0%, rgba(13,13,13,.86) 100%); }
.scene--manifesto .scene__content { padding-bottom: 0; display: flex; flex-direction: column; align-items: center; }
.scene__phrase { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 5vw, 68px); line-height: 1.16; max-width: 17ch; margin: 0 auto; }
.scene__phrase em { font-style: normal; color: var(--gold); }

@media (max-width: 760px) {
  .thread { left: 12px; }
  .scene { height: 100svh; }
}

/* ── Brand logo lockup (rose emblem + wordmark) ─────── */
.nav__brand { display: inline-flex; align-items: center; gap: 12px; }
.nav__mark { height: 32px; width: auto; display: block; flex: none; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__mark { height: 44px; width: auto; display: block; flex: none; }
.intro__rose { height: 60px; width: auto; margin: 0 auto 22px; opacity: 0; animation: intro-rise 1.1s .2s ease forwards; }
@media (max-width: 760px) { .nav__mark { height: 26px; } .footer__mark { height: 38px; } }

/* ── Official full logo (rose + wordmark + tagline) ─── */
.nav__brand { display: inline-flex; align-items: center; }
.nav__logo { height: 50px; width: auto; display: block; transition: filter .4s ease; }
.nav.is-dark:not(.is-solid) .nav__logo { filter: brightness(0) invert(1); }
.footer__brand { display: block; }
.footer__logo { height: 150px; width: auto; display: block; filter: brightness(0) invert(1); }
.intro__logo { width: min(440px, 72vw); height: auto; display: block; margin: 0 auto; filter: brightness(0) invert(1); opacity: 0; animation: intro-rise 1.3s .3s ease forwards; }
@media (max-width: 760px) { .nav__logo { height: 40px; } .footer__logo { height: 120px; } .intro__logo { width: min(320px, 78vw); } }

/* ── Intro logo assembly animation ──────────────────── */
/* Each piece is a separately cut-out PNG, positioned by its exact % within
   the 2127×1591 canvas so the assembled state is pixel-identical to logo.png */
.intro__logo-anim { position: relative; width: min(460px, 74vw); aspect-ratio: 2127 / 1591; margin: 0 auto; }
.il-piece { position: absolute; height: auto; filter: brightness(0) invert(1); opacity: 0; will-change: transform, opacity; }
/* choreografie "geschreven logo": roos ontwikkelt zich uit het donker,
   de twee lijnen schuiven in van links en rechts, de naam en de tagline
   schrijven zich van links naar rechts (clip-path; geen IO hier, dus veilig) */
/* posities altijd; de animaties starten pas wanneer main.js .intro--write
   op #intro zet (= nadat de drie campagnevideo's gespeeld hebben) */
.il-rose        { left: 19.887%; top: 0;       width: 53.220%; }
.il-line-top    { left: 0.564%;  top: 64.236%; width: 98.354%; }
.il-line-bottom-solid { left: 0.564%;  top: 83.030%; width: 98.354%; }
.il-line-bottom { left: 0.564%;  top: 83.030%; width: 98.354%; }
.il-name        { left: 1.175%;  top: 67.002%; width: 97.931%; }
.il-script      { left: 16.737%; top: 79.761%; width: 66.526%; }
.intro--write .il-rose        { animation: il-appear 1.35s .15s ease-out forwards; }
.intro--write .il-line-top    { animation: il-slide-l .9s .75s ease-out forwards; }
/* onderlijn in twee lagen: de massieve versie schuift in (geen gaatjes),
   en terwijl de pen de tagline schrijft neemt de gegapte versie het van
   links naar rechts over — de letters "claimen" hun kruispunten */
.intro--write .il-line-bottom-solid { animation: il-slide-r .9s .75s ease-out forwards, il-lijn-wis 1.35s 2.25s ease-in-out forwards; }
.intro--write .il-line-bottom { animation: il-lijn-schrijf 1.35s 2.25s ease-in-out forwards; }
.intro--write .il-name        { animation: il-write .85s 1.5s ease-out forwards; }
.intro--write .il-script      { animation: il-write 1.35s 2.25s ease-in-out forwards; }
@keyframes il-appear  { from { opacity: 0; filter: brightness(0) invert(1) blur(14px); } to { opacity: 1; filter: brightness(0) invert(1) blur(0); } }
@keyframes il-slide-l { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
@keyframes il-slide-r { from { opacity: 0; transform: translateX(120px); } to { opacity: 1; transform: none; } }
@keyframes il-write   { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0% 0 0); } }
/* de x-waarden mappen het penbereik (script-bbox) naar de lijn-bbox,
   zodat de gaatjes exact verschijnen waar de pen op dat moment schrijft */
@keyframes il-lijn-schrijf { from { opacity: 1; clip-path: inset(0 83.56% 0 0); } to { opacity: 1; clip-path: inset(0 15.96% 0 0); } }
@keyframes il-lijn-wis { from { clip-path: inset(0 0 0 16.44%); } to { clip-path: inset(0 0 0 84.04%); } }
/* Als Motion geladen is, onderdruk de CSS animaties — Motion neemt over */
.intro--motion-loaded .il-piece { animation: none !important; opacity: 0; }
/* De intro-logo-assemblage speelt bewust altijd, óók bij 'verminder beweging'
   (merkkeuze). Daarom hier géén reduce-motion-uitzondering op .il-piece. */

/* ============================================================
   INTRO VORTEX-LOGO (16 jul 2026) — gouden werveling verschijnt
   uit een fade, vormt zich in de logovorm en stolt tot het scherpe
   merkboek-logo. Vervangt de oude 'geschreven' assemblage. Getriggerd
   door .intro--logo-in (main.js, ná de campagnevideo's). Bewust altijd
   actief, ook bij reduce-motion (merkkeuze). ============================================================ */
.intro__logo-vortex {
  position: relative;
  width: min(460px, 74vw);
  aspect-ratio: 1100 / 783;
  margin: 0 auto;
}
/* wervelende 'portal' achter het logo */
.ilv__portal {
  position: absolute; left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(201,162,75,0), rgba(201,162,75,.5), rgba(246,230,191,.18),
    rgba(201,162,75,.5), rgba(201,162,75,0), rgba(201,162,75,.42), rgba(201,162,75,0));
  filter: blur(26px);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
/* logo-vormig wervelend goudlicht: draaiende conic-gradient, gemaskeerd tot de logovorm */
.ilv__swirl {
  position: absolute; inset: 0;
  -webkit-mask: url(assets/logo-boek-roos-naam.png) center / contain no-repeat;
          mask: url(assets/logo-boek-roos-naam.png) center / contain no-repeat;
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.ilv__swirl::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 240%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    #9c7a34, #C9A24B, #f6e6bf, #C9A24B, #9c7a34, #C9A24B, #f6e6bf, #C9A24B, #9c7a34);
  will-change: transform;
}
/* de scherpe eindversie van het logo (wit op donker) */
.ilv__logo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0;
  will-change: opacity, filter;
}
/* triggers */
.intro--logo-in .ilv__portal { animation: ilv-portal 3.3s ease-out forwards; }
.intro--logo-in .ilv__swirl  { animation: ilv-emerge 1.9s .45s ease-out forwards; }
.intro--logo-in .ilv__swirl::before { animation: ilv-spin 2.4s linear infinite; }
.intro--logo-in .ilv__logo   { animation: ilv-solidify 1.25s 1.95s ease-out forwards; }
@keyframes ilv-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ilv-portal {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.35); }
  28%  { opacity: .9; }
  60%  { opacity: .65; transform: translate(-50%,-50%) rotate(300deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(520deg) scale(1.3); }
}
@keyframes ilv-emerge {
  0%   { opacity: 0; transform: rotate(-150deg) scale(1.75); filter: blur(22px); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(0deg) scale(1); filter: blur(0); }
}
@keyframes ilv-solidify {
  0%   { opacity: 0; filter: brightness(0) invert(1) blur(6px); }
  100% { opacity: 1; filter: brightness(0) invert(1) blur(0); }
}

/* ============================================================
   INTRO LOGO-OPBOUW v2 (16 jul 2026) — gefaseerd: (1) roos + vierkant
   faden, (2) rechte stippellijnen schuiven in vanuit willekeurige
   kanten, (3) spiraallijnen draaien rond de roos, (4) NICKY VANKETS
   schrijft zich. Getriggerd door .intro--logo-in. ================= */
.intro__logo-anim2 { position: relative; width: min(460px, 76vw); aspect-ratio: 1100 / 783; margin: 0 auto; color: #F3ECE1; }
.intro__logo-anim2 > * { position: absolute; }
.la-halo { left: 50%; top: 44%; width: 158%; height: 168%; transform: translate(-50%,-50%);
  background: radial-gradient(ellipse at center, rgba(8,6,4,.92) 0%, rgba(8,6,4,.55) 42%, rgba(8,6,4,0) 72%);
  opacity: 0; z-index: -1; pointer-events: none; }
.la-square { left: 31.82%; top: 13.79%; width: 36.09%; height: 59.26%; border: 2px solid currentColor; opacity: 0; }
.la-rose, .la-curves, .la-text { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.la-rose, .la-curves { opacity: 0; }
.la-curves { transform-origin: 49.9% 43.4%; }
.la-text { opacity: 1; clip-path: inset(0 100% 0 0); }
.la-line { background: currentColor; opacity: 0; will-change: transform, opacity; }
.la-line.v { width: 1px; }
.la-line.h { height: 1px; }
.la-line.dash.v { background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 7px); }
.la-line.dash.h { background: repeating-linear-gradient(to right,  currentColor 0 2px, transparent 2px 7px); }
/* triggers */
.intro--logo-in .la-halo   { animation: la-halo 1.1s .1s ease-out forwards; }
.intro--logo-in .la-rose   { animation: la-fade 1.0s .12s ease-out forwards; }
/* de vier zijden van het vierkant schuiven mee in met de constructielijnen,
   elk vanuit hun eigen richting (links/rechts/boven/onder) — 2px = iets
   steviger dan de 1px constructielijnen zodat het kader het anker blijft */
.la-line.la-edge.v { width: 2px; }
.la-line.la-edge.h { height: 2px; }
.intro--logo-in .la-line   { animation-duration: .72s; animation-timing-function: ease-out; animation-fill-mode: both; }
.intro--logo-in .la-line.from-t { animation-name: la-slide-t; }
.intro--logo-in .la-line.from-b { animation-name: la-slide-b; }
.intro--logo-in .la-line.from-l { animation-name: la-slide-l; }
.intro--logo-in .la-line.from-r { animation-name: la-slide-r; }
.intro--logo-in .la-curves { animation: la-spin-in 1.35s 2.1s ease-out forwards; }
.intro--logo-in .la-text   { animation: la-write 1.25s 3.2s ease-out forwards; }
@keyframes la-fade    { from { opacity: 0; transform: scale(.9); }  to { opacity: 1; transform: none; } }
@keyframes la-halo    { to { opacity: 1; } }
@keyframes la-slide-t { from { opacity: 0; transform: translateY(-440px); } to { opacity: 1; transform: none; } }
@keyframes la-slide-b { from { opacity: 0; transform: translateY(440px); }  to { opacity: 1; transform: none; } }
@keyframes la-slide-l { from { opacity: 0; transform: translateX(-440px); } to { opacity: 1; transform: none; } }
@keyframes la-slide-r { from { opacity: 0; transform: translateX(440px); }  to { opacity: 1; transform: none; } }
@keyframes la-spin-in { from { opacity: 0; transform: rotate(-210deg) scale(.55); } to { opacity: 1; transform: rotate(0deg) scale(1); } }
@keyframes la-write   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ============================================================
   INTERACTIE-LAAG — de rijgsteek tot leven (25 jun 2026)
   ============================================================ */

/* 1 — Stiksels die zichzelf leggen wanneer ze in beeld scrollen.
   Via background-size (niet clip-path) zodat de box vol blijft en de
   IntersectionObserver het element wél als zichtbaar telt. */
.stitch {
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: left center;
  transition: background-size 1.15s cubic-bezier(.2,.6,.2,1);
}
.stitch.is-in { background-size: 100% 1px; }
/* het rijgsteekje vóór de eyebrow tekent zich mee met de reveal */
.reveal .eyebrow::before { width: 0; transition: width .75s cubic-bezier(.2,.6,.2,1) .25s; }
.reveal.is-in .eyebrow::before { width: 34px; }

/* 2 — Gouden draad-onderlijn die zich rijgt bij hover */
.collection__name {
  display: inline-block; padding-bottom: 5px;
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 10px);
  background-repeat: no-repeat; background-position: left 100%; background-size: 0% 1px;
  transition: background-size .55s cubic-bezier(.2,.6,.2,1);
}
.collection:hover .collection__name { background-size: 100% 1px; }
.arrow-link {
  padding-bottom: 6px;
  background-image: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 10px);
  background-repeat: no-repeat; background-position: left 100%; background-size: 0% 1px;
  transition: gap .35s ease, color .35s ease, background-size .55s cubic-bezier(.2,.6,.2,1);
}
.arrow-link:hover { background-size: 100% 1px; }

/* 3 — Lichte zoom terwijl de foto's in beeld scrollen (vervangt het gordijn).
   Hetzelfde zoomgevoel als hover, nu óók getriggerd door scrollen: een
   IntersectionObserver zet .in-view aan/uit terwijl het beeld de viewport
   in- en uitrolt. De hover verdiept de zoom nog wat. */
.figure img, .collection img { transition: transform 1.5s cubic-bezier(.2,.6,.2,1); }
.figure.in-view img, .collection.in-view img { transform: scale(1.045); }
.figure:hover img, .collection:hover img { transform: scale(1.075); }

/* 4 — (Hero-parallax verwijderd op verzoek: de header-foto kadreert nu weer
   zoals in de vorige versie, zonder zoom.) */

/* 5 — Lightbox-galerij */
.zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(13,13,13,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__img {
  max-width: min(88vw, 1100px); max-height: 86vh; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,.55);
  opacity: 0; transform: scale(.97);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.6,.2,1);
}
.lightbox.is-open .lightbox__img { opacity: 1; transform: none; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: none; border: 0; color: var(--ivory);
  cursor: pointer; opacity: .72; transition: opacity .3s ease, color .3s ease; z-index: 2; line-height: 1;
}
.lightbox__close { top: 24px; right: 30px; font-size: 34px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: 52px; padding: 16px 22px; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.lightbox__close:hover, .lightbox__nav:hover { opacity: 1; color: var(--gold); }
.lightbox__count {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  color: rgba(248,245,240,.7); font-size: 11px; letter-spacing: .26em;
}
@media (max-width: 760px) {
  .lightbox__nav { font-size: 38px; padding: 12px 14px; }
  .lightbox__img { max-width: 94vw; max-height: 80vh; }
}

@media (prefers-reduced-motion: reduce) {
  .stitch { background-size: 100% 1px; transition: none; }
  .figure img, .collection img { transition: none; }
  .reveal .eyebrow::before { width: 34px; transition: none; }
}

/* ============================================================
   DE BRIEF — "Een brief aan Nicky" (brief.html, 13 jul 2026)
   Smalle leeskolom in de serif van het huis; leest als een
   gedrukte brief uit het merkboek.
   ============================================================ */
.letter { max-width: 64ch; margin: 0 auto; }
.letter p {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.78;
  color: var(--ink); margin: 0 0 1.35em;
}
.letter__salut { font-style: italic; font-size: clamp(19px, 1.7vw, 24px) !important; margin-bottom: 2em !important; }
.letter__sign { margin-top: 56px; }
.letter__sign .letter__name {
  font-style: italic; font-size: clamp(24px, 2.2vw, 32px);
  margin-bottom: 6px; color: var(--ink);
}
.letter__sign .letter__role {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-d, var(--gold)); margin: 0;
}


/* ============================================================
   CASTING kindercollectie
   Landingspagina: belofte en formulier naast elkaar bovenaan,
   onderbouwing eronder. Bouwt op de bestaande tokens; hier staat
   alleen wat deze pagina extra nodig heeft.
   ============================================================ */

.casting__mark {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: center;
  padding: clamp(16px, 3vw, 28px) var(--pad) 0;
}
.casting__mark img { height: 40px; width: auto; }
@media (max-width: 860px) { .casting__mark img { height: 30px; } }

/* ── bovenblok ─────────────────────────────────────────── */
.cast-top { position: relative; background: var(--noir-w); color: var(--ivory); overflow: hidden; }
.cast-top__beeld {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 18%;
  opacity: .5;
}
.cast-top::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.75) 55%, rgba(13,13,13,.92) 100%);
}
.cast-top__inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(34px, 5vw, 64px);
  align-items: center;
  padding: clamp(96px, 14vh, 150px) var(--pad) clamp(56px, 8vw, 96px);
  max-width: 1320px; margin: 0 auto;
}
@media (min-width: 1000px) {
  .cast-top__inner { grid-template-columns: 1.05fr .95fr; }
}

.cast-top__titel {
  font-size: clamp(28px, 4.6vw, 56px);
  font-weight: 300; line-height: 1.14;
  margin: 18px 0 20px; color: var(--ivory);
}
.cast-top__lead {
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.75;
  color: rgba(248,245,240,.82); max-width: 46ch;
}
.cast-punten { list-style: none; margin-top: 30px; display: grid; gap: 12px; }
.cast-punten li {
  position: relative; padding-left: 26px;
  font-size: 15px; line-height: 1.6; color: rgba(248,245,240,.9);
}
.cast-punten li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 13px; height: 1px; background: var(--gold);
}
.cast-punten strong { font-weight: 500; color: var(--ivory); }

/* ── de kaart met het formulier ────────────────────────── */
.cast-kaart {
  background: var(--ivory); color: var(--ink);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: 0 30px 80px rgba(0,0,0,.34);
}
.cast-kaart__titel {
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 300;
  line-height: 1.15; margin: 12px 0 24px;
}

.cast-form { display: grid; gap: 16px; }
.cast-veld { display: grid; }
.cast-veld--half { grid-template-columns: 1fr 1fr; gap: 16px; }
/* Twee velden naast elkaar passen pas vanaf ongeveer 520 pixels. Daaronder
   staan de labels tegen elkaar geduwd; met kleine kapitalen en brede
   letterafstand oogt dat rommelig, zeker wanneer het ene label veel langer is
   dan het andere. */
@media (max-width: 520px) { .cast-veld--half { grid-template-columns: 1fr; } }

.cast-veld label {
  display: block; font-size: 9.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-d);
  margin-bottom: 7px; font-weight: 600;
}
.cast-form input[type="text"],
.cast-form input[type="email"],
.cast-form input[type="tel"],
.cast-form input[type="date"],
.cast-form select {
  width: 100%; font-family: var(--sans); font-size: 15px; font-weight: 300;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 0;
  padding: 13px 14px; appearance: none;
  transition: border-color .25s;
}
.cast-form input:focus, .cast-form select:focus {
  outline: none; border-color: var(--gold);
}
.cast-form input::placeholder { color: #B4ADA3; }
.cast-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.cast-form select option:disabled { color: #B4ADA3; }

/* Eén vinkje in plaats van drie. Toestemming voor campagnebeeld
   vragen wij apart bij het doorsturen van de foto's, want dat is
   een andere vraag en hoort niet in de weg te staan van een
   inschrijving voor de casting zelf. */
.akkoord {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  align-items: start; cursor: pointer;
  font-size: 13px; line-height: 1.6; color: var(--ink);
  margin-top: 4px;
}
.akkoord input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: 1px;
  border: 1px solid var(--line); background: #fff;
  cursor: pointer; position: relative; flex: none;
  transition: border-color .25s, background .25s;
}
/* De link naar de voorwaarden moet er als een link uitzien. Hij had dezelfde
   kleur als de tekst eromheen en geen onderstreping, dus niemand klikte hem
   aan. Bij een vinkje dat zegt "ik heb de voorwaarden gelezen" is dat niet
   alleen slechte vormgeving maar ook zwakke toestemming. */
/* Toelichting onder de vinkjes: informatie, geen keuze. Bewust kleiner en
   grijzer, zodat het niet als een vierde vinkje leest. */
.cast-form__klein {
  font-size: 12px; line-height: 1.6; color: rgba(42, 38, 34, .62);
  margin-top: 2px;
}

.akkoord a {
  color: var(--gold-d);
  border-bottom: 1px solid var(--gold);
  font-weight: 500;
}
.akkoord a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.akkoord input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
.akkoord input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--noir); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.btn--vol {
  width: 100%; justify-content: center; text-align: center;
  background: var(--noir); color: var(--ivory); border-color: var(--noir);
  margin-top: 6px;
}
.btn--vol:hover { background: var(--gold); border-color: var(--gold); color: var(--noir); }
.btn--vol[disabled] { opacity: .55; cursor: default; }

.cast-form__note { font-size: 12px; line-height: 1.6; color: var(--muted); text-align: center; }
.veld__melding { display: block; font-size: 12px; line-height: 1.55; color: var(--muted); }

/* ── de drie stappen ───────────────────────────────────── */
.cast-kop { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 46px); }
.cast-kop .h-section { margin-top: 14px; }

.cast-drie { display: grid; gap: clamp(28px, 4vw, 44px); }
@media (min-width: 860px) { .cast-drie { grid-template-columns: repeat(3, 1fr); } }
.cast-item { border-top: 1px solid var(--line); padding-top: 20px; }
.cast-item__nr {
  font-family: var(--serif); font-size: 30px; color: var(--gold); line-height: 1;
}
.cast-item h3 {
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  margin: 12px 0 10px;
}
.cast-item p { font-size: 15px; line-height: 1.75; color: var(--ink); }

/* ── vragen ────────────────────────────────────────────── */
.cast-vragen { display: grid; gap: clamp(24px, 3vw, 38px); }
@media (min-width: 860px) { .cast-vragen { grid-template-columns: 1fr 1fr; } }
.cast-vraag { border-top: 1px solid var(--line); padding-top: 18px; }
.cast-vraag h3 {
  font-family: var(--serif); font-weight: 400; font-size: 20px; margin-bottom: 8px;
}
.cast-vraag p { font-size: 15px; line-height: 1.75; }

/* donkere tussensectie, zelfde warme zwart als de hero */
.section--noir { background: var(--noir-w); color: var(--ivory); }
.section--noir .h-section,
.section--noir .lead { color: var(--ivory); }
.section--noir .lead.muted { color: rgba(248,245,240,.62); }


/* ══ Casting: de vier stappen van de dag ═══════════════════
   .cast-drie is drie kolommen. Met vier items viel er eentje
   alleen op een tweede rij, en dat leest als een vergeten blok. */
@media (min-width: 860px) { .cast-drie--vier { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .cast-drie--vier { grid-template-columns: repeat(4, 1fr); } }

/* ══ Casting: de tekenwedstrijd ════════════════════════════ */
.cast-teken { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (min-width: 900px) { .cast-teken { grid-template-columns: 1fr 1fr; } }
.cast-teken__stappen { list-style: none; display: grid; gap: 18px; counter-reset: t; }
.cast-teken__stappen li {
  position: relative; padding-left: 44px; counter-increment: t;
  font-size: 15px; line-height: 1.65;
}
.cast-teken__stappen li::before {
  content: counter(t, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-family: var(--serif); font-size: 22px; color: var(--gold); line-height: 1;
}

/* ══ De deelnemingsvoorwaarden ═════════════════════════════
   Eigen, sobere opmaak: dit is een tekst om te lézen, niet om
   doorheen te scrollen. Smalle kolom, veel lucht, geen sier. */
.vw { max-width: 1100px; margin-inline: auto; }
.vw__blok { max-width: 72ch; margin-top: clamp(44px, 6vw, 72px); }
.vw__kop {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.1vw, 27px); line-height: 1.25;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.vw__sub {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(17px, 1.6vw, 20px);
  margin: 26px 0 8px; color: var(--gold-d);
}
.vw__blok p { font-size: 15px; line-height: 1.75; margin-bottom: 13px; }
.vw__lijst { list-style: none; display: grid; gap: 10px; margin: 6px 0 14px; }
.vw__lijst li {
  position: relative; padding-left: 22px; font-size: 15px; line-height: 1.7;
}
.vw__lijst li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 11px; height: 1px; background: var(--gold);
}
.vw__tabel { width: 100%; border-collapse: collapse; margin: 8px 0 14px; }
.vw__tabel th, .vw__tabel td {
  text-align: left; vertical-align: top; padding: 11px 14px 11px 0;
  border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.6;
}
.vw__tabel th { font-weight: 500; width: 38%; }
.vw__tabel td { color: var(--ink-m, inherit); opacity: .85; }
@media (max-width: 620px) {
  .vw__tabel, .vw__tabel tr, .vw__tabel th, .vw__tabel td { display: block; width: auto; }
  .vw__tabel td { padding-top: 0; border-top: 0; padding-bottom: 14px; }
}
/* Het blok over beeld is het blok dat gelezen moet worden. */
.vw__blok--nadruk {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 26px;
}
.vw__nb {
  font-size: 14px; font-style: italic; opacity: .8;
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px;
}
/* Wat er nog ingevuld moet worden vóór dit publiek mag. Springt
   er bewust uit, zodat het niet per ongeluk blijft staan. */
.vw__todo {
  background: rgba(217, 59, 14, .07);
  border-left: 3px solid #D93B0E;
  padding: 12px 16px; font-size: 14px; line-height: 1.6;
}
.vw a { border-bottom: 1px solid var(--gold); }

/* ── CASTING: beeld op de landingspagina ──────────────────
   De pagina had één foto in de kop en drie in de galerij, met daartussen
   lappen tekst. Deze twee blokken vullen dat aan. */

/* Rustband: één schermvullende foto zonder tekst, tussen de tekenwedstrijd
   en de vragen. Lager dan een hoofdstuk op de hoofdpagina, want ze mag de
   lezer niet uit de pagina duwen; ze staat er om adem te geven. */
.cast-band { position: relative; overflow: hidden; height: clamp(340px, 70vh, 680px); background: var(--noir-w); }
.cast-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .cast-band { height: clamp(260px, 40vh, 380px); } }

/* Het slot met beeld eronder. Zelfde opbouw als de kop van de pagina: de
   foto op lage dekking, een verloop erover, de tekst erboven. Zo blijft de
   knop het eerste wat het oog pakt. */
.cta--beeld {
  position: relative; overflow: hidden;
  /* Op een breed scherm is dit blok laag ten opzichte van de foto, waardoor
     de uitsnede naar het midden kruipt en het hoofd van het meisje erbuiten
     viel. De minimumhoogte laat de band meegroeien met de breedte, en de
     stand van 40% (in casting.html) houdt haar hoofd altijd in beeld.
     Op mobiel verandert er niets: daar wordt de foto op hoogte geschaald. */
  min-height: clamp(440px, 34vw, 760px);
  display: grid; align-content: center;
}
.cta__beeld {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 50%;
  opacity: .62;
}
.cta--beeld::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.42) 0%, rgba(13,13,13,.54) 60%, rgba(13,13,13,.72) 100%);
}
.cta--beeld > .reveal { position: relative; z-index: 1; }