/* ==========================================================
   Luna Events — "Van sikkel tot volle maan"
   Palet: nacht-inkt, ivoor, champagne-goud
   Type:  Marcellus (display) · Cormorant Garamond (accent italic) · Jost (body)
   ========================================================== */

:root{
  --ink:        #372e21;   /* warm diepbruin — tekstkleur, geen zwart of blauw */
  --ink-soft:   #453b2c;
  --espresso:   #2b2118;   /* (reserve) warm donkerbruin */
  --ivory:      #f4efe6;   /* bruids-ivoor */
  --ivory-deep: #ece5d6;
  --champagne:  #e7dcc4;   /* licht champagne — accentsecties */
  --gold:       #c6a15b;   /* champagne-goud */
  --gold-soft:  #d8bc85;
  --gold-deep:  #a8843f;
  --muted:      #6d675c;   /* warm grijs op ivoor */
  --muted-l:    #a49e92;   /* warm grijs op donker */

  --font-display: "Marcellus", serif;
  --font-accent:  "Cormorant Garamond", serif;
  --font-body:    "Jost", sans-serif;

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.8,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:clip; }   /* voorkomt horizontaal scrollen door decoratieve lagen */
body{
  font-family:var(--font-body);
  font-weight:300;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.65;
  font-size:clamp(1rem, .95rem + .2vw, 1.0625rem);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.01em;
}
h2{ font-size:clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
h2 em, h1 em{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:500;
  color:var(--gold);
  letter-spacing:0;
}

.wrap{ width:min(var(--wrap), 100% - 3rem); margin-inline:auto; }
.wrap--narrow{ width:min(880px, 100% - 3rem); }

.eyebrow{
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:400;
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:1.4rem;
}
.eyebrow::before{
  content:"";
  width:2.2rem; height:1px;
  background:var(--gold);
  opacity:.7;
}
.eyebrow--light{ color:var(--gold-soft); }

/* ---------- Knoppen ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1rem 2.1rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .35s var(--ease);
}
.btn--gold{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.btn--gold:hover{ background:var(--gold-soft); border-color:var(--gold-soft); transform:translateY(-2px); }
.btn--ghost{
  color:var(--ivory);
  border-color:rgba(244,239,230,.45);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-soft); }
.btn--outline{
  color:var(--ink);
  border-color:rgba(43,33,24,.35);
}
.btn--outline:hover{ border-color:var(--gold); color:var(--gold-deep); }
.btn--full{ width:100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- Logo ---------- */
/* Origineel logo in eigen kleuren, op alle lichte achtergronden */
.nav__logo{
  width:auto;
  height:clamp(38px, 4.5vw, 48px);
  aspect-ratio:1024/419;
  object-fit:contain;
  transition:opacity .3s;
}
.nav__brand:hover .nav__logo{ opacity:1; }
.footer__logoimg{
  width:170px;
  height:auto;
  object-fit:contain;
  margin-bottom:1rem;
}

/* ---------- Navigatie ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled{
  background:rgba(244,239,230,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(198,161,91,.35);
}
.nav__inner{
  width:min(1320px, 100% - 3rem);
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1.1rem;
}
.nav__brand{
  display:flex; align-items:center;
  text-decoration:none;
}
.nav__links{ display:flex; align-items:center; gap:2.2rem; }
.nav__links a:not(.btn){
  color:var(--ink);
  text-decoration:none;
  font-size:.86rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.8;
  transition:opacity .3s, color .3s;
}
.nav__links a:not(.btn):hover{ opacity:1; color:var(--gold-deep); }
.nav__cta{ padding:.7rem 1.5rem; }
.nav__toggle{
  display:none;
  background:none; border:0;
  width:40px; height:40px;
  flex-direction:column; justify-content:center; gap:7px;
  cursor:pointer;
}
.nav__toggle span{
  display:block; height:1px; width:26px;
  background:var(--ink);
  margin-inline:auto;
  transition:transform .35s var(--ease), opacity .3s;
}

/* ---------- Hero: door de letters de zaal in ---------- */
.hero{
  position:relative;
  height:300vh;                 /* scroll-afstand voor de zoom */
  background:var(--ivory);
  color:var(--ink);
}
.hero__sticky{
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
}
.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.16);
  will-change:transform;
}
.hero__video{ z-index:0; }      /* video boven de foto; foto blijft fallback */
.hero__photo{
  filter:saturate(1.06) contrast(1.04) brightness(.96);   /* filmische grading */
}
.hero__grade{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(55,46,33,.38)),   /* vignet */
    linear-gradient(to bottom, rgba(55,46,33,.22), transparent 30%, transparent 70%, rgba(55,46,33,.3)),
    radial-gradient(ellipse 60% 45% at 50% 60%, rgba(198,161,91,.08), transparent 70%);  /* warme gloed */
}
.hero__ink{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
  transform-origin:38.5% 55.5%;   /* de opening van de U */
  will-change:transform, opacity;
}
.hero__word{
  font-family:var(--font-display);
  font-size:440px;
  fill:#000;                      /* zwart in het masker = venster op de video */
}
.hero__wordSub{
  font-family:var(--font-body);
  font-weight:300;
  font-size:30px;
  letter-spacing:.5em;
  fill:var(--gold-deep);
}

.hero__kicker{
  position:absolute;
  top:7rem; left:50%;
  transform:translateX(-50%);
  z-index:2;
  width:min(90%, 700px);
  text-align:center;
  font-size:.74rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.hero__kicker span{
  display:block;
  margin-top:.7rem;
  font-size:.68rem;
  letter-spacing:.18em;
  color:rgba(43,33,24,.55);
}
.hero__hint{
  position:absolute;
  bottom:2.4rem; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(43,33,24,.6);
  white-space:nowrap;
}
.hero__hint i{
  width:1px; height:52px;
  background:rgba(43,33,24,.2);
  position:relative;
  overflow:hidden;
}
.hero__hint i::after{
  content:"";
  position:absolute; inset:0;
  background:var(--gold);
  animation:hintDrop 2.2s ease-in-out infinite;
}
@keyframes hintDrop{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* Verschijnt na de zoom, over de volledige foto */
.hero__after{
  position:absolute; inset:0;
  z-index:2;
  display:grid;
  place-content:center;
  justify-items:center;
  text-align:center;
  padding:0 1.5rem;
  color:var(--ivory);
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(30,24,17,.6), rgba(30,24,17,.28) 60%, rgba(30,24,17,.64));
  opacity:0;
  pointer-events:none;
}
.hero__after.is-live{ pointer-events:auto; }
.hero__after .eyebrow{ justify-content:center; }
.hero__after .eyebrow::after{
  content:""; width:2.2rem; height:1px; background:var(--gold); opacity:.7;
}
.hero__after h1{
  font-size:clamp(2.4rem, 1.3rem + 5vw, 4.8rem);
  line-height:1.08;
  margin-bottom:1.4rem;
  text-shadow:0 2px 40px rgba(55,46,33,.6);
}
.hero__after h1 em{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:500;
  color:var(--gold-soft);
}
.hero__sub{
  max-width:520px;
  margin:0 auto 2.4rem;
  color:rgba(244,239,230,.85);
  font-size:1.05rem;
}
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.hero__status{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  margin-top:2.6rem;
  font-size:.85rem;
  letter-spacing:.04em;
  color:rgba(244,239,230,.75);
  text-decoration:none;
  border-bottom:1px solid rgba(198,161,91,.4);
  padding-bottom:.35rem;
  transition:color .3s, border-color .3s;
}
.hero__status:hover{ color:var(--gold-soft); border-color:var(--gold); }
.hero__dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--gold);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(198,161,91,.55); }
  70%{ box-shadow:0 0 0 10px rgba(198,161,91,0); }
  100%{ box-shadow:0 0 0 0 rgba(198,161,91,0); }
}

/* Hero intro-choreografie (start na maanopkomst) */
.hero-in{
  opacity:0;
  transform:translate(-50%, 1rem);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
body.is-loaded .hero-in{ opacity:1; transform:translate(-50%, 0); }
body.is-loaded .i1{ transition-delay:.3s; }
body.is-loaded .i2{ transition-delay:.55s; }


/* ---------- Intro ---------- */
.intro{ padding:clamp(6rem, 12vw, 10rem) 0; }
.intro__statement{
  font-size:clamp(1.7rem, 1.2rem + 2.4vw, 3rem);
  line-height:1.28;
}
.intro__meta{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.5rem;
  margin-top:4rem;
  padding-top:2.6rem;
  border-top:1px solid rgba(55,46,33,.14);
}
.intro__meta strong{
  display:block;
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.2rem;
  margin-bottom:.35rem;
}
.intro__meta span{ color:var(--muted); font-size:.95rem; }

/* ---------- De avond (maancyclus) ---------- */
.evening{
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(198,161,91,.14), transparent 60%),
    var(--ivory-deep);
  color:var(--ink);
  padding:clamp(6rem, 11vw, 9.5rem) 0 clamp(4rem, 8vw, 7rem);
  border-top:1px solid rgba(198,161,91,.3);
}
.evening__head{ max-width:760px; margin-bottom:clamp(4rem, 8vw, 6.5rem); }
.evening__lead{ margin-top:1.6rem; color:var(--muted); max-width:540px; }

.evening__track{
  width:min(var(--wrap), 100% - 3rem);
  margin-inline:auto;
  position:relative;
}
.evening__track::before{
  content:"";
  position:absolute; top:0; bottom:0; left:50%;
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(198,161,91,.35) 8%, rgba(198,161,91,.35) 92%, transparent);
}
.phase{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 6rem);
  align-items:center;
  padding-block:clamp(2.5rem, 5vw, 4.5rem);
}
.phase__media{
  overflow:hidden;
  aspect-ratio:3/4;
  max-width:440px;
  justify-self:end;
}
.phase--flip .phase__media{ order:2; justify-self:start; }
.phase__media img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.08);
  transition:transform 1.2s var(--ease);
}
.phase.in-view .phase__media img{ transform:scale(1); }
.phase__body{ max-width:420px; position:relative; }
.phase--flip .phase__body{ justify-self:end; text-align:right; }
.phase__moon{ width:40px; height:40px; margin-bottom:1.3rem; }
.phase--flip .phase__moon{ margin-left:auto; }
.phase__moon .m-ring{ fill:none; stroke:var(--gold); stroke-width:1; opacity:.6; }
.phase__moon .m-fill{ fill:var(--gold); opacity:.9; }
.phase__label{
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:.7rem;
}
.phase h3{ font-size:clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); margin-bottom:1rem; }
.phase p{ color:var(--muted); }

/* ---------- Special effects band ---------- */
.effects{
  position:relative;
  background:var(--champagne);
  color:var(--ink);
  padding:clamp(7rem, 13vw, 11rem) 0;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}
.effects__bg{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.32;
}
.effects::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at center, transparent 15%, rgba(231,220,196,.94));
}
.effects__content{ max-width:680px; }
.effects__content .eyebrow{ justify-content:center; }
.effects__content .eyebrow::after{ content:""; width:2.2rem; height:1px; background:var(--gold); opacity:.7; }
.effects__content p:not(.eyebrow){
  margin:1.4rem 0 2.4rem;
  color:var(--ink-soft);
}

/* ---------- Bruiloften ---------- */
.cultures{ padding:clamp(6rem, 12vw, 10rem) 0; }
.cultures__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(3rem, 7vw, 6.5rem);
  align-items:center;
}
.cultures__text p:not(.eyebrow){ color:var(--muted); max-width:520px; }
.cultures__text h2{ margin-bottom:1.4rem; }
.cultures__list{
  list-style:none;
  margin-top:2.6rem;
  border-top:1px solid rgba(55,46,33,.14);
}
.cultures__list button{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  background:none;
  border:0;
  border-bottom:1px solid rgba(55,46,33,.14);
  padding:1.15rem .2rem;
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 1.05rem + 1vw, 1.7rem);
  color:var(--ink);
  cursor:pointer;
  transition:padding-left .35s var(--ease), color .3s;
  text-align:left;
}
.cultures__list button span{
  font-family:var(--font-body);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .3s;
  text-align:right;
}
.cultures__list button:hover,
.cultures__list button.is-active{
  color:var(--gold);
  padding-left:.9rem;
}
.cultures__list button.is-active span{ color:var(--gold); }
.cultures__media{
  aspect-ratio:3/4;
  overflow:hidden;
  position:relative;
}
.cultures__media::after{
  content:"";
  position:absolute; inset:1rem;
  border:1px solid rgba(198,161,91,.5);
  pointer-events:none;
}
.cultures__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:opacity .45s var(--ease);
}
.cultures__media img.is-fading{ opacity:0; }

/* ---------- Galerij ---------- */
.gallery{
  background:var(--ivory-deep);
  padding:clamp(6rem, 11vw, 9rem) 0;
}
.gallery__head{ margin-bottom:3.5rem; }
.marquee{ overflow:hidden; }
.marquee__track{
  display:flex;
  gap:1.2rem;
  width:max-content;
  will-change:transform;
}
.marquee__track img{
  height:clamp(300px, 42vw, 480px);
  width:auto;
  aspect-ratio:2/3;
  object-fit:cover;
  filter:saturate(.95);
  transition:filter .4s;
}
.marquee__track img:hover{ filter:saturate(1.1); }
.gallery__note{
  margin-top:2.6rem;
  color:var(--muted);
}
.gallery__note a{ color:var(--ink); text-decoration-color:var(--gold); text-underline-offset:4px; }
.gallery__note a:hover{ color:var(--gold); }

/* ---------- Beschikbaarheid: kalender ---------- */
.availability{ padding:clamp(6rem, 11vw, 9.5rem) 0; }
.availability__grid{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:clamp(3rem, 6vw, 5.5rem);
  align-items:center;
}
.availability__head p:not(.eyebrow){ color:var(--muted); max-width:420px; margin-top:1.3rem; }
.calendar__legend{
  display:flex;
  gap:1.6rem;
  flex-wrap:wrap;
  margin-top:2.2rem;
  font-size:.85rem;
  color:var(--muted);
}
.calendar__legend span{ display:inline-flex; align-items:center; gap:.55rem; }
.leg{
  width:11px; height:11px;
  border-radius:50%;
  display:inline-block;
}
.leg--free{ background:transparent; box-shadow:inset 0 0 0 1px var(--gold); }
.leg--option{ background:var(--gold-soft); opacity:.55; }
.leg--booked{ background:var(--ink); opacity:.28; }

.calendar{
  background:#fff;
  border:1px solid rgba(55,46,33,.1);
  padding:clamp(1.4rem, 3vw, 2.4rem);
  box-shadow:0 30px 60px -30px rgba(55,46,33,.25);
}
.calendar__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.4rem;
}
.calendar__month{
  font-size:1.45rem;
  letter-spacing:.03em;
}
.calendar__nav{
  width:42px; height:42px;
  display:grid; place-items:center;
  background:none;
  border:1px solid rgba(55,46,33,.16);
  border-radius:50%;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .3s, color .3s, opacity .3s;
}
.calendar__nav svg{ width:18px; height:18px; }
.calendar__nav:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); }
.calendar__nav:disabled{ opacity:.3; cursor:default; }
.calendar__week{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  text-align:center;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.6rem;
}
.calendar__days{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:4px;
}
.day{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  font-family:var(--font-body);
  font-size:.95rem;
  background:none;
  border:0;
  border-radius:50%;
  color:var(--ink);
  cursor:pointer;
  position:relative;
  transition:background .25s, color .25s, box-shadow .25s;
}
.day--empty{ cursor:default; }
.day--free{ box-shadow:inset 0 0 0 1px rgba(198,161,91,.55); }
.day--free:hover{ background:var(--gold); color:var(--ink); box-shadow:none; }
.day--free.is-selected{ background:var(--ink); color:var(--gold-soft); box-shadow:none; }
.day--option{ background:rgba(216,188,133,.32); color:var(--muted); cursor:default; }
.day--booked{ color:rgba(55,46,33,.28); cursor:default; }
.day--booked::after{
  content:"";
  position:absolute;
  width:60%; height:1px;
  background:rgba(55,46,33,.28);
  transform:rotate(-18deg);
}
.day--past{ color:rgba(55,46,33,.18); cursor:default; }
.calendar__hint{
  margin-top:1.3rem;
  font-size:.85rem;
  color:var(--muted);
  min-height:1.4em;
  transition:color .3s;
}
.calendar__hint.is-confirm{ color:var(--gold); }

/* ---------- Boekings-popup ---------- */
.booking{
  width:min(460px, calc(100% - 2rem));
  border:none;
  border-top:2px solid var(--gold);
  background:var(--ivory);
  color:var(--ink);
  padding:clamp(2rem, 5vw, 2.8rem);
  box-shadow:0 40px 90px -30px rgba(43,33,24,.45);
  position:relative;
}
.booking[open]{
  animation:bookingIn .5s var(--ease);
}
@keyframes bookingIn{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}
.booking::backdrop{
  background:rgba(55,46,33,.5);
  backdrop-filter:blur(8px);
}
.booking__close{
  position:absolute;
  top:1.1rem; right:1.1rem;
  width:40px; height:40px;
  display:grid; place-items:center;
  background:none;
  border:1px solid rgba(55,46,33,.15);
  border-radius:50%;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .3s, color .3s, transform .3s;
}
.booking__close svg{ width:16px; height:16px; }
.booking__close:hover{ border-color:var(--gold); color:var(--gold); transform:rotate(90deg); }
.booking__moon{
  width:34px; height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #ecd9ae, var(--gold) 65%, #a8843f);
  box-shadow:0 0 26px rgba(198,161,91,.45);
  margin-bottom:1.4rem;
}
.booking__date{
  font-size:clamp(1.5rem, 4vw, 1.9rem);
  margin-top:.2rem;
}
.booking__date::first-letter{ text-transform:uppercase; }
.booking__sub{
  color:var(--muted);
  font-size:.93rem;
  margin:.7rem 0 1.8rem;
}
.booking label{
  display:block;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.2rem;
}
.booking input:not([type="hidden"]),
.booking select{
  display:block;
  width:100%;
  margin-top:.45rem;
  padding:.85rem 1rem;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(55,46,33,.18);
  border-radius:0;
  transition:border-color .3s;
}
.booking input:focus,
.booking select:focus{
  outline:none;
  border-color:var(--gold);
}
.booking__alt{
  text-align:center;
  margin-top:1.2rem;
  font-size:.88rem;
  color:var(--muted);
}
.booking__alt a{ color:var(--ink); text-decoration-color:var(--gold); text-underline-offset:4px; }

/* ---------- Reserveren ---------- */
.reserve{
  background:
    radial-gradient(ellipse 70% 60% at 90% 0%, rgba(198,161,91,.14), transparent 60%),
    var(--champagne);
  color:var(--ink);
  padding:clamp(6rem, 12vw, 10rem) 0;
  border-top:1px solid rgba(198,161,91,.3);
}
.reserve__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(3rem, 7vw, 6rem);
  align-items:start;
}
.reserve__info > p:not(.eyebrow){ color:var(--muted); max-width:480px; margin-top:1.3rem; }
.reserve__steps{
  list-style:none;
  counter-reset:step;
  margin-top:3rem;
}
.reserve__steps li{
  counter-increment:step;
  position:relative;
  padding:0 0 2.2rem 3.6rem;
}
.reserve__steps li:last-child{ padding-bottom:0; }
.reserve__steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:0; top:.1rem;
  font-family:var(--font-accent);
  font-style:italic;
  font-size:1.5rem;
  color:var(--gold-deep);
}
.reserve__steps li:not(:last-child)::after{
  content:"";
  position:absolute; left:.8rem; top:2.6rem; bottom:.6rem;
  width:1px;
  background:rgba(168,132,63,.4);
}
.reserve__steps strong{
  display:block;
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.25rem;
  margin-bottom:.4rem;
}
.reserve__steps p{ color:var(--muted); font-size:.97rem; }
.reserve__fine{
  margin-top:2.4rem;
  font-size:.85rem;
  color:var(--muted);
  border-left:2px solid var(--gold);
  padding-left:1rem;
  max-width:460px;
}

.reserve__form{
  background:#fffdf8;
  color:var(--ink);
  padding:clamp(2rem, 4vw, 3rem);
  border-top:2px solid var(--gold);
  box-shadow:0 34px 70px -34px rgba(43,33,24,.35);
}
.reserve__form h3{ font-size:1.7rem; }
.reserve__form-sub{
  color:var(--muted);
  font-size:.92rem;
  margin:.4rem 0 1.8rem;
}
.reserve__form label{
  display:block;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.3rem;
}
.reserve__form input,
.reserve__form select{
  display:block;
  width:100%;
  margin-top:.45rem;
  padding:.85rem 1rem;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(55,46,33,.18);
  border-radius:0;
  transition:border-color .3s;
}
.reserve__form input:focus,
.reserve__form select:focus{
  outline:none;
  border-color:var(--gold);
}
.reserve__form-alt{
  text-align:center;
  margin-top:1.2rem;
  font-size:.9rem;
  color:var(--muted);
}
.reserve__form-alt a{ color:var(--ink); text-decoration-color:var(--gold); text-underline-offset:4px; }

/* ---------- Footer ---------- */
.footer{
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(198,161,91,.16), transparent 60%),
    var(--champagne);
  color:var(--ink);
  padding:clamp(4rem, 8vw, 6rem) 0 2rem;
  border-top:1px solid rgba(198,161,91,.35);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:3.5rem;
}
.footer__brand p{ color:var(--muted); max-width:240px; }
.footer__moon{ width:26px; height:26px; color:var(--gold-deep); margin-top:1.4rem; transform:rotate(-30deg); opacity:.8; }
.footer h4{
  font-family:var(--font-body);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:1.2rem;
}
.footer address{ font-style:normal; color:var(--muted); margin-bottom:.8rem; }
.footer__link{
  display:block;
  color:var(--ink);
  text-decoration:none;
  margin-bottom:.55rem;
  opacity:.85;
  transition:color .3s, opacity .3s;
  width:fit-content;
}
.footer__link:hover{ color:var(--gold-deep); opacity:1; }
.footer__legal{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.8rem;
  padding-top:1.8rem;
  border-top:1px solid rgba(55,46,33,.15);
  font-size:.8rem;
  color:var(--muted);
}

/* ---------- Reveal animaties ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in-view{ opacity:1; transform:none; }
.d1{ transition-delay:.12s; }
.d2{ transition-delay:.24s; }
.d3{ transition-delay:.36s; }
.d4{ transition-delay:.48s; }
.d5{ transition-delay:.6s; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .cultures__grid,
  .reserve__grid,
  .availability__grid{ grid-template-columns:1fr; }
  .cultures__media{ order:-1; max-width:520px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }

  .hero{ height:240vh; }
  .hero__word{ font-size:440px; }   /* viewBox schaalt mee op mobiel */
  .hero__kicker{ top:6rem; }
}

@media (max-width: 820px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; inset:0;
    flex-direction:column;
    justify-content:center;
    gap:2rem;
    background:rgba(244,239,230,.97);
    opacity:0;
    pointer-events:none;
    transition:opacity .4s var(--ease);
  }
  .nav__links a:not(.btn){ font-size:1.1rem; }
  .nav.is-open .nav__links{ opacity:1; pointer-events:auto; }
  .nav.is-open .nav__toggle span:first-child{ transform:translateY(4px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child{ transform:translateY(-4px) rotate(-45deg); }
  .nav.is-open{ background:transparent; box-shadow:none; }
  .nav__toggle{ position:relative; z-index:60; }

  .evening__track::before{ left:20px; }
  .phase,
  .phase--flip{ grid-template-columns:1fr; gap:1.8rem; padding-left:60px; }
  .phase{ position:relative; }
  .phase__media,
  .phase--flip .phase__media{ order:0; justify-self:start; max-width:420px; }
  .phase--flip .phase__body{ text-align:left; justify-self:start; }
  .phase--flip .phase__moon{ margin-left:0; }
  .phase__moon{
    position:absolute;
    left:0; top:0;              /* 40px breed icoon, gecentreerd op de lijn (20px) */
    margin:0;
    background:var(--ivory-deep);
    padding-block:.4rem;
  }
  .phase__body{ position:static; }

  .intro__meta{ grid-template-columns:1fr; gap:1.8rem; }
}

@media (max-width: 560px){
  .footer__grid{ grid-template-columns:1fr; }
  .hero__actions .btn{ width:100%; text-align:center; }
  .marquee__track img{ height:260px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .hero-in{ opacity:1 !important; transform:translate(-50%,0) !important; transition:none !important; }
  .reveal{ transform:none !important; }
  .hero__dot, .hero__hint i::after{ animation:none; }

  /* Statische hero: geen zoom, direct de volledige foto met content */
  .hero{ height:auto; }
  .hero__sticky{ position:relative; height:100svh; }
  .hero__ink, .hero__hint{ display:none; }
  .hero__after{ opacity:1 !important; pointer-events:auto; }

  .booking[open]{ animation:none; }
  .marquee__track{ transform:none !important; }
  .phase__media img{ transform:none; transition:none; }
}