/* ==========================================================================
   Goudsmederij La Moon — stylesheet
   Palet afgeleid van het logo: salie #8B9B90, goud #FBC24F
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Salie */
  --sage-950: #161D18;
  --sage-900: #1E2922;
  --sage-800: #2A382F;
  --sage-700: #3A4B40;
  --sage-600: #4F6355;
  --sage-500: #6B7F72;
  --sage-400: #8B9B90;
  --sage-300: #A9B6AD;
  --sage-200: #C7D0CA;
  --sage-100: #E1E7E3;
  --sage-50:  #F0F4F1;

  /* Goud */
  --gold-700: #8A6420;
  --gold-600: #B0822C;
  --gold-500: #D6A23A;
  --gold-400: #FBC24F;
  --gold-300: #F8D585;
  --gold-200: #F5E3B6;
  --gold-100: #FBF4E2;

  /* Neutraal */
  --cream:     #FAF7F1;
  --cream-alt: #F4EFE5;
  --paper:     #FFFDF9;
  --ink:       #1A1F1C;
  --ink-soft:  #45514A;
  --ink-mute:  #6E7C74;
  --line:      rgba(26, 31, 28, .12);
  --line-soft: rgba(26, 31, 28, .07);

  /* Typografie */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Klein kapitaal voor de knoppen. Dit lettertype heeft de kapitaalvormen
     al op de plaats van de kleine letters, dus text-transform blijft uit. */
  --font-caps: "Cormorant SC", "Cormorant Garamond", Georgia, serif;

  --fs-hero:  clamp(3rem, 9.5vw, 8.5rem);
  --fs-h1:    clamp(2.6rem, 6vw, 5rem);
  --fs-h2:    clamp(2.1rem, 4.2vw, 3.6rem);
  --fs-h3:    clamp(1.5rem, 2.4vw, 2.1rem);
  --fs-h4:    clamp(1.2rem, 1.6vw, 1.4rem);
  --fs-lead:  clamp(1.05rem, 1.35vw, 1.28rem);
  --fs-body:  clamp(.98rem, 1.05vw, 1.06rem);
  --fs-small: .875rem;
  --fs-micro: .72rem;

  /* Ritme */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;   --sp-11: 11rem;

  --wrap: 1280px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Beweging */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --dur-fast: .28s;
  --dur: .55s;
  --dur-slow: .95s;

  --shadow-sm: 0 1px 2px rgba(26,31,28,.05), 0 4px 14px rgba(26,31,28,.05);
  --shadow: 0 2px 6px rgba(26,31,28,.06), 0 18px 44px rgba(26,31,28,.09);
  --shadow-lg: 0 6px 18px rgba(26,31,28,.08), 0 40px 90px rgba(26,31,28,.14);

  --header-h: 92px;
}

@media (max-width: 900px) {
  :root { --header-h: 74px; }
}

/* --------------------------------------------------------------------------
   2. Reset & basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Het hidden-attribuut moet altijd winnen, ook van een display-regel
   die verderop aan een klasse is gehangen. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  /* Vangnet: elementen die tijdens hun binnenkomst-animatie even buiten de
     rechterrand staan, mogen geen horizontale schuifbalk veroorzaken.
     'clip' verdient de voorkeur boven 'hidden' omdat het geen scrollcontext
     aanmaakt en position:sticky dus blijft werken. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }

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

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: var(--sp-7) 0;
}

::selection { background: var(--gold-400); color: var(--sage-900); }

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

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.18; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 500; }

em { font-style: italic; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.66;
  color: var(--ink-soft);
  font-weight: 300;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--sp-4);
}

.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
  transform-origin: left;
  animation: rule-in 1.1s var(--ease-out) both;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

@keyframes rule-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-600);
}

.display-xl {
  font-size: var(--fs-hero);
  line-height: .95;
  letter-spacing: -.03em;
}

.text-center { text-align: center; }
.measure { max-width: 62ch; }
.measure-tight { max-width: 48ch; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: 1520px; }

.section {
  padding-block: clamp(4.5rem, 9vw, var(--sp-10));
  overflow-x: clip;
}
.section--tight { padding-block: clamp(3rem, 6vw, var(--sp-8)); }
.section--tall { padding-block: clamp(5.5rem, 12vw, var(--sp-11)); }

.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--alt   { background: var(--cream-alt); }
.section--sage  { background: var(--sage-50); }

.section--dark {
  background: var(--sage-900);
  color: var(--sage-100);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--cream); }
.section--dark .lead { color: var(--sage-200); }
.section--dark .eyebrow { color: var(--gold-400); }

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

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.split--wide-left { grid-template-columns: 1.15fr .85fr; }
.split--wide-right { grid-template-columns: .85fr 1.15fr; }
.split--top { align-items: start; }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head--center { margin-inline: auto; text-align: center; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* Sierlijke deler */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  color: var(--gold-500);
}
.divider::before, .divider::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 7rem;
  background: linear-gradient(90deg, transparent, currentColor);
}
.divider::after { background: linear-gradient(270deg, transparent, currentColor); }
.divider span { font-size: .8rem; letter-spacing: .3em; }

/* --------------------------------------------------------------------------
   5. Knoppen & links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--sage-900);
  --btn-fg: var(--cream);
  --btn-bd: var(--sage-900);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  padding: 1.05em 2.3em;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-caps);
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .09em;
  text-transform: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

/* Gouden vulling die van onder opkomt */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-400);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }

.btn:hover, .btn:focus-visible {
  color: var(--sage-900);
  border-color: var(--gold-400);
  box-shadow: 0 14px 32px rgba(251, 194, 79, .28);
}

.btn:active { transform: translateY(1px) scale(.986); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: rgba(26, 31, 28, .28);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--sage-900); }

.btn--gold {
  --btn-bg: var(--gold-400);
  --btn-fg: var(--sage-900);
  --btn-bd: var(--gold-400);
}
.btn--gold::before { background: var(--sage-900); }
.btn--gold:hover, .btn--gold:focus-visible {
  color: var(--gold-400);
  border-color: var(--sage-900);
  box-shadow: 0 14px 32px rgba(30, 41, 34, .28);
}

.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  --btn-bd: rgba(250, 247, 241, .4);
}
.btn--light:hover, .btn--light:focus-visible { color: var(--sage-900); }

.btn--sm { padding: .7em 1.55em; font-size: 1.08rem; }
.btn--lg { padding: 1.1em 2.8em; font-size: 1.32rem; }

/* Op smalle schermen iets krapper, zodat langere knopteksten
   op één regel blijven passen. */
@media (max-width: 560px) {
  .btn {
    font-size: 1.1rem;
    letter-spacing: .05em;
    padding-inline: 1.5em;
  }
  .btn--sm { font-size: 1rem; padding-inline: 1.25em; }
}
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

.btn__icon {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__icon { transform: translateX(4px); }

/* Ripple bij klik */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(251, 194, 79, .45);
  transform: scale(0);
  animation: ripple .62s var(--ease-out) forwards;
  pointer-events: none;
  z-index: -1;
}
.btn--gold .ripple { background: rgba(30, 41, 34, .3); }

@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* Tekstlink met groeiende onderlijn */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: .35em;
}

.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.link:hover::after, .link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.link:hover { color: var(--gold-600); }
.link--light { color: var(--cream); }
.link--light:hover { color: var(--gold-400); }

.link__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.link:hover .link__arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. Preloader
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--sage-900);
  transition: opacity .7s var(--ease-out), visibility .7s;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
}

.preloader__inner {
  display: grid;
  place-items: center;
  gap: var(--sp-5);
}

.preloader__logo {
  width: clamp(150px, 26vw, 230px);
  opacity: 0;
  animation: pre-logo 1.4s var(--ease-out) forwards;
}

@keyframes pre-logo {
  0%   { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

.preloader__bar {
  width: min(210px, 42vw);
  height: 1px;
  background: rgba(250, 247, 241, .18);
  overflow: hidden;
}

.preloader__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold-400);
  transform-origin: left;
  transform: scaleX(0);
  animation: pre-bar 1.5s var(--ease-soft) forwards;
}

@keyframes pre-bar {
  0%   { transform: scaleX(0); }
  70%  { transform: scaleX(.82); }
  100% { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   7. Paginatransitie
   -------------------------------------------------------------------------- */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.page-veil__panel {
  background: var(--sage-900);
  transform: scaleY(0);
  transform-origin: bottom;
}

/* Sluier staat al vol bij binnenkomst na een interne navigatie */
html.is-navigating .page-veil__panel {
  transform: scaleY(1);
  transform-origin: top;
}

.page-veil.is-out .page-veil__panel {
  animation: veil-in .62s var(--ease-in-out) forwards;
}

.page-veil.is-in .page-veil__panel {
  transform: scaleY(1);
  transform-origin: top;
  animation: veil-out .62s var(--ease-in-out) forwards;
}

.page-veil__panel:nth-child(1) { animation-delay: 0s; }
.page-veil__panel:nth-child(2) { animation-delay: .055s; }
.page-veil__panel:nth-child(3) { animation-delay: .11s; }
.page-veil__panel:nth-child(4) { animation-delay: .165s; }
.page-veil__panel:nth-child(5) { animation-delay: .22s; }

@keyframes veil-in {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes veil-out {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}

.page-veil__mark {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.page-veil__mark img { width: clamp(110px, 18vw, 170px); }
.page-veil.is-out .page-veil__mark { opacity: 1; transition-delay: .3s; }

/* Binnenkomst van de pagina-inhoud */
.page-enter {
  animation: page-enter .85s var(--ease-out) both;
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Header & navigatie
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Net boven de menu-overlay, zodat het logo en de sluitknop bereikbaar
     blijven terwijl het menu open staat. */
  z-index: 806;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              height var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 247, 241, .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.header.is-stuck::after { opacity: 1; }
.header.is-stuck { height: calc(var(--header-h) - 14px); }

.header.is-hidden { transform: translateY(-100%); }

.header__inner {
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.brand:hover { transform: translateY(-1px); }

.brand__logo {
  height: clamp(38px, 4.6vw, 52px);
  width: auto;
  transition: height var(--dur) var(--ease-out);
}
.header.is-stuck .brand__logo { height: clamp(32px, 3.8vw, 42px); }

/* Desktop navigatie */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.3rem);
}

.nav__link {
  position: relative;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .5rem 0;
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover, .nav__link:focus-visible { color: var(--ink); }
.nav__link:hover::after, .nav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { transform: scaleX(1); }

/* Dropdown */
.nav__item { position: relative; }

.nav__panel {
  position: absolute;
  top: calc(100% + .9rem);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 16rem;
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}

.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__panel a {
  display: block;
  padding: .62rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}

.nav__panel a:hover, .nav__panel a:focus-visible {
  background: var(--sage-50);
  color: var(--ink);
  padding-left: 1.25rem;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* --------------------------------------------------------------------------
   Elke pagina begint met een donkere kop. Zolang de header daar overheen
   ligt is alles licht; zodra hij bij het scrollen een crèmekleurige
   achtergrond krijgt, wordt de tekst weer donker.
   -------------------------------------------------------------------------- */
.header:not(.is-stuck) .nav__link { color: rgba(250, 247, 241, .76); }

.header:not(.is-stuck) .nav__link:hover,
.header:not(.is-stuck) .nav__link:focus-visible,
.header:not(.is-stuck) .nav__link.is-active { color: var(--cream); }

.header:not(.is-stuck) .nav__link::after { background: var(--gold-400); }

.header:not(.is-stuck) .burger { border-color: rgba(250, 247, 241, .32); }
.header:not(.is-stuck) .burger:hover { border-color: var(--gold-400); }
.header:not(.is-stuck) .burger__lines i { background: var(--cream); }

.header:not(.is-stuck) .header__actions .btn {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  --btn-bd: rgba(250, 247, 241, .42);
}
.header:not(.is-stuck) .header__actions .btn:hover,
.header:not(.is-stuck) .header__actions .btn:focus-visible { color: var(--sage-900); }

/* Hamburger */
.burger {
  position: relative;
  width: 46px;
  height: 46px;
  display: none;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  z-index: 810;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.burger:hover { border-color: var(--gold-500); }

.burger__lines {
  position: relative;
  width: 19px;
  height: 12px;
}

.burger__lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-in-out),
              opacity var(--dur-fast) var(--ease-out),
              width var(--dur) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.burger__lines i:nth-child(1) { top: 0; }
.burger__lines i:nth-child(2) { top: 50%; transform: translateY(-50%); width: 72%; }
.burger__lines i:nth-child(3) { bottom: 0; }

.burger[aria-expanded="true"] { border-color: rgba(250, 247, 241, .35); }
.burger[aria-expanded="true"] .burger__lines i { background: var(--cream); }
.burger[aria-expanded="true"] .burger__lines i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:nth-child(2) { opacity: 0; width: 0; }
.burger[aria-expanded="true"] .burger__lines i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: grid; }
}

/* --------------------------------------------------------------------------
   9. Menu-overlay (mobiel / tablet)
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 805;
  background: var(--sage-900);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) var(--sp-6);
  clip-path: circle(0% at calc(100% - 3.4rem) 3rem);
  transition: clip-path .85s var(--ease-in-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu.is-open { clip-path: circle(150% at calc(100% - 3.4rem) 3rem); }

/* Zolang het menu open is, geen crèmekleurige balk over de overlay */
body.is-locked .header::after { opacity: 0; }
body.is-locked .header { transform: none; }

.menu__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .11;
  background:
    radial-gradient(ellipse at 78% 18%, var(--gold-400), transparent 55%),
    radial-gradient(ellipse at 12% 88%, var(--sage-400), transparent 60%);
}

.menu__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: var(--sp-8);
  align-items: center;
}

@media (max-width: 860px) {
  .menu__inner { grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
  .menu { justify-content: flex-start; }
}

.menu__list { display: grid; gap: .2rem; }

.menu__item {
  opacity: 0;
  transform: translateY(26px);
}

.menu.is-open .menu__item {
  animation: menu-item .72s var(--ease-out) forwards;
}

.menu.is-open .menu__item:nth-child(1) { animation-delay: .26s; }
.menu.is-open .menu__item:nth-child(2) { animation-delay: .32s; }
.menu.is-open .menu__item:nth-child(3) { animation-delay: .38s; }
.menu.is-open .menu__item:nth-child(4) { animation-delay: .44s; }
.menu.is-open .menu__item:nth-child(5) { animation-delay: .50s; }
.menu.is-open .menu__item:nth-child(6) { animation-delay: .56s; }
.menu.is-open .menu__item:nth-child(7) { animation-delay: .62s; }
.menu.is-open .menu__item:nth-child(8) { animation-delay: .68s; }

@keyframes menu-item {
  to { opacity: 1; transform: none; }
}

.menu__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  font-weight: 300;
  line-height: 1.24;
  color: var(--cream);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.menu__link::before {
  content: attr(data-num);
  font-family: var(--font-body);
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--gold-400);
  opacity: .6;
  transform: translateY(-.9em);
}

.menu__link:hover, .menu__link:focus-visible {
  color: var(--gold-400);
  transform: translateX(14px);
}

.menu__link.is-active { color: var(--gold-400); }

.menu__aside {
  opacity: 0;
  transform: translateY(20px);
  border-left: 1px solid rgba(250, 247, 241, .14);
  padding-left: var(--sp-6);
}

@media (max-width: 860px) {
  .menu__aside { border-left: 0; border-top: 1px solid rgba(250, 247, 241, .14); padding-left: 0; padding-top: var(--sp-5); }
}

.menu.is-open .menu__aside {
  animation: menu-item .8s var(--ease-out) .72s forwards;
}

.menu__kop {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--sp-3);
}

.menu__aside p, .menu__aside a { color: var(--sage-200); font-size: .95rem; }
.menu__aside a:hover { color: var(--gold-400); }
.menu__aside > * + * { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: grid;
  align-items: center;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: var(--sp-8);
  overflow: hidden;
  background: var(--sage-900);
  color: var(--cream);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Uitsnede naar links, waardoor de vlam in de foto naar rechts opschuift
     en niet meer tegen de kop aan ligt. */
  object-position: 26% 50%;
  transform: scale(1.12);
  animation: hero-zoom 2.4s var(--ease-out) .25s forwards;
}

@media (max-width: 900px) {
  /* Op een smal scherm is de uitsnede al krap; dan minder verschuiven */
  .hero__media img { object-position: 40% 50%; }
}

@keyframes hero-zoom {
  to { transform: scale(1.02); }
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(22, 29, 24, .88) 0%, rgba(22, 29, 24, .62) 45%, rgba(22, 29, 24, .3) 100%),
    linear-gradient(to top, rgba(22, 29, 24, .8) 0%, transparent 45%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__content { max-width: 44rem; }

.hero h1 {
  color: var(--cream);
  font-size: var(--fs-hero);
  line-height: .96;
  letter-spacing: -.028em;
  margin-bottom: var(--sp-5);
}

.hero .lead {
  color: var(--sage-200);
  max-width: 34rem;
  margin-bottom: var(--sp-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Rechtsonder in plaats van gecentreerd: in het midden botst hij op brede
   schermen tegen de knoppen in de hero. */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 2.2rem;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .7rem;
  font-size: var(--fs-micro);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, .6);
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--gold-400), transparent);
  animation: scroll-hint 2.1s var(--ease-soft) infinite;
}

@keyframes scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Op smalle of lage schermen zou de aanduiding over de knoppen vallen */
@media (max-width: 900px), (max-height: 760px) {
  .hero__scroll { display: none; }
}

/* Compacte paginakop */
.pagehead {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  background: var(--sage-900);
  color: var(--cream);
  overflow: hidden;
}

.pagehead__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pagehead__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .42;
  transform: scale(1.08);
  animation: hero-zoom 2.6s var(--ease-out) forwards;
}

.pagehead__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--sage-900) 4%, rgba(30, 41, 34, .55) 70%, rgba(30, 41, 34, .75));
}

.pagehead__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pagehead h1 { color: var(--cream); margin-bottom: var(--sp-4); }
.pagehead .lead { color: var(--sage-200); max-width: 44rem; }

/* Kruimelpad */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, .55);
  margin-bottom: var(--sp-5);
}
.crumbs a { transition: color var(--dur-fast) var(--ease-out); }
.crumbs a:hover { color: var(--gold-400); }
.crumbs span[aria-hidden] { opacity: .4; }
.crumbs [aria-current] { color: var(--gold-400); }

/* --------------------------------------------------------------------------
   11. Figuren & beeld
   -------------------------------------------------------------------------- */
.figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sage-100);
}

.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.figure--tall { aspect-ratio: 3 / 4; }
.figure--portrait { aspect-ratio: 4 / 5; }
.figure--square { aspect-ratio: 1; }
.figure--wide { aspect-ratio: 16 / 10; }
.figure--pano { aspect-ratio: 21 / 9; }

.figure--hover:hover img { transform: scale(1.06); }

/* Uitgeknipt portret: geen ondergrond, het beeld staat vrij op de sectiekleur */
.figure--cutout {
  background: none;
  border-radius: 0;
  aspect-ratio: 3 / 4;
}

.figure--cutout img {
  object-fit: contain;
  object-position: bottom center;
}

/* Portret dat de volle hoogte van zijn kolom mag pakken */
.figure--cutout-groot {
  aspect-ratio: auto;
  min-height: clamp(24rem, 42vw, 38rem);
}
.figure--cutout-groot img { height: 100%; }

/* De sluier die bij het onthullen wegtrekt, moet hier de sectiekleur volgen
   en niet het standaard crème, anders zie je een blok achter de figuur. */
.section--cream .figure--cutout.reveal-img::after { background: var(--cream); }
.section--paper .figure--cutout.reveal-img::after { background: var(--paper); }
.section--alt .figure--cutout.reveal-img::after { background: var(--cream-alt); }
.section--sage .figure--cutout.reveal-img::after { background: var(--sage-50); }

/* Illustratie zonder bijsnijden */
.figure--plain {
  background: transparent;
  border-radius: 0;
}
.figure--plain img { object-fit: contain; }

/* Vrijstaande productfoto: geen vlak eronder, niets bijgesneden */
.figure--product {
  background: none;
  padding: clamp(.5rem, 1.5vw, 1.25rem);
}
.figure--product img { object-fit: contain; }

/* Gouden kaderlijn die meeschuift */
.figure--framed::after {
  content: "";
  position: absolute;
  inset: .9rem;
  border: 1px solid rgba(251, 194, 79, .45);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.figure--framed:hover::after { opacity: 1; transform: scale(1); }

.figure__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  background: linear-gradient(to top, rgba(22, 29, 24, .85), transparent);
  color: var(--cream);
  font-size: .85rem;
}

/* Collage: één staand beeld met daarnaast twee kleinere, alle drie even hoog
   uitgelijnd zodat het blok als één geheel oogt. */
.collage {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(.6rem, 1.2vw, 1rem);
  min-height: clamp(20rem, 34vw, 30rem);
}

.collage__groot {
  grid-row: span 2;
  border-radius: var(--radius);
  overflow: hidden;
}

.collage__klein {
  border-radius: var(--radius);
  overflow: hidden;
}

.collage .figure img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 620px) {
  .collage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .collage__groot { grid-row: span 1; grid-column: span 2; aspect-ratio: 16 / 10; }
  .collage__klein { aspect-ratio: 1; }
}

/* Gestapelde beelden met offset */
.figure-stack {
  position: relative;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  padding-right: clamp(2rem, 5vw, 4rem);
}

.figure-stack__main { border-radius: var(--radius); overflow: hidden; }

.figure-stack__sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(38%, 42%, 46%);
  border-radius: var(--radius);
  overflow: hidden;
  border: 8px solid var(--cream);
  box-shadow: var(--shadow);
}

.section--dark .figure-stack__sub,
.section--alt .figure-stack__sub { border-color: var(--cream-alt); }

/* --------------------------------------------------------------------------
   12. Kaarten
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

.card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
  border-color: rgba(251, 194, 79, .4);
}

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sage-100);
}

.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

.card:hover .card__media img { transform: scale(1.07); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}

.card__title { margin: 0; font-size: var(--fs-h3); }
.card__text { color: var(--ink-soft); margin: 0; flex: 1; }

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  margin-top: auto;
}

.card__price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-600);
}

.card__meta {
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Hele kaart klikbaar */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Dienstkaart met nummer */
.card--service .card__body { padding-top: var(--sp-6); }

.card__num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--gold-400);
  opacity: .28;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.card:hover .card__num { opacity: .6; transform: translateY(-3px); }

/* Kenmerk / USP */
.feature {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--line);
  transition: background var(--dur) var(--ease-out);
}

.feature:hover { background: rgba(251, 194, 79, .06); }

.feature::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease-out);
}

.feature:hover::before { transform: scaleX(1); }

/* Alle iconen dezelfde maat, kleur en lijndikte. De lijndikte staat hier en
   niet in de SVG's zelf, zodat één waarde ze allemaal gelijk houdt. */
.feature__icon {
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: var(--sp-5);
  color: var(--gold-500);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.feature h3 { font-size: 1.5rem; margin-bottom: var(--sp-3); }
.feature p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.68; margin: 0; }

.section--dark .feature { border-color: rgba(250, 247, 241, .14); }
.section--dark .feature:hover { background: rgba(251, 194, 79, .07); }
.section--dark .feature p { color: var(--sage-200); }

/* --------------------------------------------------------------------------
   Workshopkeuze: drie varianten naast elkaar om te vergelijken
   -------------------------------------------------------------------------- */
.ws-keuze {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}

@media (max-width: 900px) {
  .ws-keuze { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; }
}

.ws-kaart {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr auto;
  gap: .55rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

.ws-kaart:hover {
  transform: translateY(-8px);
  border-color: rgba(251, 194, 79, .55);
  box-shadow: var(--shadow);
}

/* De middelste krijgt wat meer gewicht */
.ws-kaart--uitgelicht {
  background: var(--sage-900);
  border-color: var(--sage-900);
}

.ws-kaart__vlag {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: .4em 1.1em;
  border-radius: var(--radius-pill);
  background: var(--gold-400);
  color: var(--sage-900);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ws-kaart__nr {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .3em;
  color: var(--gold-600);
}
.ws-kaart--uitgelicht .ws-kaart__nr { color: var(--gold-400); }

.ws-kaart__naam {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--ink);
}
.ws-kaart--uitgelicht .ws-kaart__naam { color: var(--cream); }

.ws-kaart__wat {
  font-size: 1.02rem;
  color: var(--ink-soft);
  min-height: 3em;
}
.ws-kaart--uitgelicht .ws-kaart__wat { color: var(--sage-200); }

.ws-kaart__duur {
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ws-kaart--uitgelicht .ws-kaart__duur { color: var(--sage-300); }

.ws-kaart__prijs {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--gold-600);
  padding-block: .3rem .6rem;
}
.ws-kaart--uitgelicht .ws-kaart__prijs { color: var(--gold-400); }

.ws-kaart__lijst {
  display: grid;
  gap: .5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .96rem;
  color: var(--ink-soft);
}
.ws-kaart--uitgelicht .ws-kaart__lijst {
  border-top-color: rgba(250, 247, 241, .16);
  color: var(--sage-200);
}

.ws-kaart__lijst span {
  display: block;
  padding-left: 1.3em;
  text-indent: -1.3em;
}
.ws-kaart__lijst span::before {
  content: "✦";
  color: var(--gold-500);
  font-size: .72em;
  margin-right: .75em;
  vertical-align: .12em;
}

.ws-kaart__meer {
  margin-top: 1.4rem;
  font-family: var(--font-caps);
  font-size: 1.02rem;
  letter-spacing: .08em;
  color: var(--gold-700);
  transition: color var(--dur-fast) var(--ease-out);
}
.ws-kaart--uitgelicht .ws-kaart__meer { color: var(--gold-400); }
.ws-kaart:hover .ws-kaart__meer { color: var(--gold-500); }

/* Prijsregel */
.pricerow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-soft);
}

.pricerow__name { font-weight: 400; }
.pricerow__note { display: block; font-size: .88rem; color: var(--ink-mute); font-weight: 300; }
.pricerow__price {
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--gold-600);
  white-space: nowrap;
}

/* Citaat */
.quote {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -.015em;
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
}

.quote::before {
  content: "”";
  display: block;
  font-size: 4rem;
  line-height: .6;
  color: var(--gold-400);
  margin-bottom: var(--sp-3);
}

.quote__by {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.section--dark .quote__by { color: var(--sage-300); }

/* Proces-stappen */
.steps { counter-reset: step; display: grid; gap: var(--sp-6); }

.step {
  counter-increment: step;
  position: relative;
  padding-left: 4.4rem;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -.25rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-600);
  background: var(--paper);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.step:hover::before { background: var(--gold-400); color: var(--sage-900); }

.step h3 { font-size: 1.32rem; margin-bottom: var(--sp-2); }
.step p { color: var(--ink-soft); margin: 0; }

.section--dark .step::before { background: var(--sage-900); }
.section--dark .step p { color: var(--sage-200); }

.steps--line .step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3rem;
  bottom: -1.6rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold-400), transparent);
  opacity: .45;
}

/* Accordeon */
.acc { border-top: 1px solid var(--line); }

.acc__item { border-bottom: 1px solid var(--line); }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 300;
  line-height: 1.32;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.acc__btn:hover { color: var(--gold-600); }

.acc__sign {
  position: relative;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 15px;
  height: 1.5px;
  background: var(--gold-600);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-in-out);
}

.acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.acc__btn[aria-expanded="true"] .acc__sign::after { transform: translate(-50%, -50%) rotate(0); }

.acc__panel {
  overflow: hidden;
  height: 0;
  transition: height var(--dur) var(--ease-in-out);
}

.acc__inner {
  padding-bottom: var(--sp-5);
  padding-right: clamp(0rem, 6vw, 5rem);
  color: var(--ink-soft);
}

/* Uitgelicht blok */
.callout {
  position: relative;
  padding: clamp(2rem, 4vw, 3.2rem);
  background: var(--gold-100);
  border-radius: var(--radius);
  border-left: 3px solid var(--gold-400);
}

.callout h3 { margin-bottom: var(--sp-3); }
.callout p { color: var(--ink-soft); }

.section--dark .callout {
  background: rgba(251, 194, 79, .08);
  border-left-color: var(--gold-400);
}
.section--dark .callout p { color: var(--sage-200); }

/* Statistieken */
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  color: var(--gold-500);
  margin-bottom: var(--sp-2);
}
.stat__label {
  font-size: var(--fs-micro);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.section--dark .stat__label { color: var(--sage-300); }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .4em 1em;
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  border: 1px solid rgba(251, 194, 79, .5);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.badge--sage {
  background: var(--sage-50);
  border-color: var(--sage-200);
  color: var(--sage-700);
}

.badge--dark {
  background: rgba(250, 247, 241, .1);
  border-color: rgba(250, 247, 241, .25);
  color: var(--cream);
}

/* Melding */
.notice {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  background: var(--sage-50);
  border: 1px solid var(--sage-200);
  font-size: .95rem;
  color: var(--ink-soft);
}

.notice--gold { background: var(--gold-100); border-color: rgba(251, 194, 79, .5); }
.notice--error { background: #FDF0EE; border-color: #E8BDB5; color: #8A3122; }
.notice--ok { background: #EFF6EF; border-color: #BBD6BB; color: #2C5C30; }
.notice svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: .18rem; }

/* --------------------------------------------------------------------------
   13. Formulieren
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }

.form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.form__row--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 720px) {
  .form__row, .form__row--3 { grid-template-columns: 1fr; }
}

.field { position: relative; display: grid; gap: .45rem; }

.field__label {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.field__label .req { color: var(--gold-600); }

.field__hint { font-size: .82rem; color: var(--ink-mute); }

.input, .select, .textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .98rem;
  font-weight: 300;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  appearance: none;
}

.textarea { min-height: 9.5rem; resize: vertical; line-height: 1.66; }

.input::placeholder, .textarea::placeholder { color: var(--sage-300); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--sage-300); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(251, 194, 79, .16);
  background: var(--paper);
}

.select {
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236E7C74' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  cursor: pointer;
}

.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: #C4594A;
  box-shadow: 0 0 0 3px rgba(196, 89, 74, .12);
}

.field__error {
  font-size: .8rem;
  color: #B04A3B;
  display: none;
}

.field.has-error .field__error { display: block; }

/* Keuzekaarten (radio als tegel) */
.choices { display: grid; gap: var(--sp-3); }
.choices--2 { grid-template-columns: repeat(2, 1fr); }
.choices--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 720px) {
  .choices--2, .choices--3 { grid-template-columns: 1fr; }
}

.choice { position: relative; }

.choice input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.choice__box {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  height: 100%;
  padding: 1.15rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.choice__box:hover { border-color: var(--sage-300); transform: translateY(-2px); }

.choice input:checked + .choice__box {
  border-color: var(--gold-500);
  background: var(--gold-100);
  box-shadow: 0 0 0 1px var(--gold-500) inset;
}

.choice input:focus-visible + .choice__box {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.choice__title { font-weight: 400; font-size: 1rem; }
.choice__meta { font-size: .84rem; color: var(--ink-mute); }

.choice__check {
  position: absolute;
  top: .85rem;
  right: .95rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: all var(--dur-fast) var(--ease-out);
}

.choice input:checked ~ .choice__box .choice__check,
.choice input:checked + .choice__box .choice__check {
  background: var(--gold-400);
  border-color: var(--gold-400);
}

.choice__check::after {
  content: "";
  width: .36rem; height: .36rem;
  border-radius: 50%;
  background: var(--sage-900);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.choice input:checked + .choice__box .choice__check::after { opacity: 1; }

/* Selectievakje */
.check {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  cursor: pointer;
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.check input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.check__box {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .18rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  display: grid;
  place-items: center;
  transition: all var(--dur-fast) var(--ease-out);
}

.check input:checked + .check__box {
  background: var(--gold-400);
  border-color: var(--gold-400);
}

.check__box svg {
  width: .78rem; height: .78rem;
  stroke: var(--sage-900);
  stroke-width: 2.6;
  opacity: 0;
  transform: scale(.6);
  transition: all var(--dur-fast) var(--ease-out);
}

.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }

.check input:focus-visible + .check__box {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.check a { color: var(--gold-600); text-decoration: underline; text-underline-offset: 3px; }

/* Honeypot */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. Boekingsstappen & kalender
   -------------------------------------------------------------------------- */
.booking {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.booking__head {
  padding: var(--sp-5) clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
  background: var(--sage-50);
}

.booking__body { padding: clamp(1.5rem, 3.5vw, 3rem); }

/* Stappenbalk */
.stepper {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.stepper__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color var(--dur) var(--ease-out);
}

.stepper__dot {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: .72rem;
  transition: all var(--dur) var(--ease-out);
}

.stepper__item.is-active { color: var(--ink); }
.stepper__item.is-active .stepper__dot {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--sage-900);
  transform: scale(1.08);
}

.stepper__item.is-done .stepper__dot {
  background: var(--sage-700);
  border-color: var(--sage-700);
  color: var(--cream);
}

.stepper__line {
  flex: 1;
  min-width: 1rem;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.stepper__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.stepper__line.is-filled::after { transform: scaleX(1); }

@media (max-width: 720px) {
  .stepper__item span:last-child { display: none; }
  .stepper { gap: .35rem; }
}

/* Stap-panelen */
.step-panel { display: none; }

/* Het paneel krijgt bij een stapwissel de focus voor schermlezers; een
   kaderlijn om de hele stap zou daar alleen maar afleiden. */
.step-panel:focus { outline: none; }
.step-panel.is-active {
  display: block;
  animation: step-in .55s var(--ease-out) both;
}

@keyframes step-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

.step-panel.is-active.is-back { animation-name: step-in-back; }

@keyframes step-in-back {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}

.step-panel__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: var(--sp-2);
}

.step-panel__intro { color: var(--ink-soft); margin-bottom: var(--sp-6); }

.booking__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 560px) {
  .booking__nav { flex-direction: column-reverse; }
  .booking__nav .btn { width: 100%; }
}

/* Kalender */
.cal {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--sage-50);
  border-bottom: 1px solid var(--line-soft);
}

.cal__month {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: capitalize;
}

.cal__nav { display: flex; gap: .4rem; }

.cal__arrow {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.cal__arrow:hover:not([disabled]) {
  background: var(--gold-400);
  border-color: var(--gold-400);
  transform: scale(1.06);
}

.cal__arrow[disabled] { opacity: .32; cursor: not-allowed; }
.cal__arrow svg { width: .85rem; height: .85rem; }

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: var(--sp-4);
}

.cal__dow {
  text-align: center;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: .5rem;
}

.cal__day {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font-size: .92rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.cal__day:hover:not(:disabled) {
  background: var(--sage-50);
  border-color: var(--sage-200);
  transform: scale(1.06);
}

.cal__day:disabled {
  color: var(--sage-300);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.cal__day.is-empty { pointer-events: none; }

.cal__day.is-today::after {
  content: "";
  position: absolute;
  bottom: .34rem;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold-500);
}

.cal__day.is-selected {
  background: var(--sage-900);
  border-color: var(--sage-900);
  color: var(--cream);
  font-weight: 400;
}

.cal__day.is-selected::after { background: var(--gold-400); }

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: 0 var(--sp-5) var(--sp-4);
  font-size: .78rem;
  color: var(--ink-mute);
}

.cal__legend span { display: inline-flex; align-items: center; gap: .42rem; }
.cal__legend i {
  width: .7rem; height: .7rem;
  border-radius: 2px;
  display: inline-block;
}

/* Tijdvakken */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: .6rem;
}

.slot { position: relative; }
.slot input { position: absolute; opacity: 0; width: 0; height: 0; }

.slot__box {
  display: grid;
  place-items: center;
  padding: .78rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: .9rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.slot__box:hover { border-color: var(--gold-500); transform: translateY(-2px); }

.slot input:checked + .slot__box {
  background: var(--sage-900);
  border-color: var(--sage-900);
  color: var(--cream);
}

.slot input:focus-visible + .slot__box {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* Samenvatting */
.summary {
  background: var(--sage-50);
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.summary__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--sp-4);
  padding: .55rem 0;
  border-bottom: 1px solid rgba(26, 31, 28, .06);
  font-size: .95rem;
}

.summary__row:last-child { border-bottom: 0; }

.summary__key {
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: .22rem;
}

.summary__val { font-weight: 400; }

@media (max-width: 560px) {
  .summary__row { grid-template-columns: 1fr; gap: .1rem; }
}

/* Verzendstatus */
.form-status { margin-top: var(--sp-5); }

.spinner {
  width: 1rem; height: 1rem;
  border: 2px solid rgba(250, 247, 241, .35);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.btn--gold .spinner { border-color: rgba(30,41,34,.3); border-top-color: var(--sage-900); }

@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   15. Collectie / webshop
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-bottom: var(--sp-6);
}

.filter {
  padding: .6em 1.3em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all var(--dur-fast) var(--ease-out);
}

.filter:hover { border-color: var(--gold-500); color: var(--ink); }

.filter.is-active {
  background: var(--sage-900);
  border-color: var(--sage-900);
  color: var(--cream);
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  transition: transform var(--dur) var(--ease-out);
}

.product:hover { transform: translateY(-5px); }

/* Geen vlak achter het sieraad: de foto's zijn vrijstaand, dus het sieraad
   staat rechtstreeks op de kleur van de pagina. */
.product__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: none;
  margin-bottom: var(--sp-3);
}

.product__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .9s var(--ease-out);
}

.product:hover .product__media img { transform: scale(1.07); }

.product__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22,29,24,.34), transparent 46%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.product:hover .product__media::after { opacity: 1; }

.product__view {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 12px);
  padding: .5em 1.3em;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--sage-900);
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transition: all var(--dur) var(--ease-out);
  white-space: nowrap;
}

.product:hover .product__view { opacity: 1; transform: translate(-50%, 0); }

.product__name {
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.32;
  margin: 0 0 .2rem;
}

.product__price { color: var(--gold-600); font-size: .98rem; }

.product__tag {
  position: absolute;
  top: .8rem; left: .8rem;
  z-index: 1;
  padding: .3em .85em;
  border-radius: var(--radius-pill);
  background: rgba(250, 247, 241, .93);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-800);
}

.products__empty {
  grid-column: 1 / -1;
  padding: var(--sp-8) 0;
  text-align: center;
  color: var(--ink-mute);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(22, 29, 24, .93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__box {
  position: relative;
  width: min(980px, 100%);
  max-height: 88svh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 0;
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: scale(.94) translateY(14px);
  transition: transform var(--dur) var(--ease-out);
}

.lightbox.is-open .lightbox__box { transform: none; }

@media (max-width: 760px) {
  .lightbox__box { grid-template-columns: 1fr; overflow-y: auto; }
}

.lightbox__media { background: none; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem); }
.lightbox__media img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1; }

.lightbox__info {
  padding: clamp(1.5rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  overflow-y: auto;
}

.lightbox__close {
  position: absolute;
  top: .9rem; right: .9rem;
  z-index: 2;
  width: 2.4rem; height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.lightbox__close:hover { background: var(--gold-400); border-color: var(--gold-400); transform: rotate(90deg); }
.lightbox__close svg { width: .9rem; height: .9rem; }

.lightbox__price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--gold-600);
}

/* --------------------------------------------------------------------------
   16. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  width: max-content;
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-7);
  font-family: var(--font-caps);
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--sage-500);
  white-space: nowrap;
}

.marquee span::after {
  content: "✦";
  font-style: normal;
  font-size: .7em;
  color: var(--gold-500);
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   17. Afsluitende oproep
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--sage-900);
  color: var(--cream);
  text-align: center;
  padding-block: clamp(4.5rem, 10vw, 9rem);
}

.cta__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(251, 194, 79, .18), transparent 70%),
    radial-gradient(ellipse 50% 50% at 12% 100%, rgba(139, 155, 144, .3), transparent 70%);
}

.cta__inner { position: relative; z-index: 1; }
.cta h2 { color: var(--cream); max-width: 20ch; margin-inline: auto; }
.cta .lead { color: var(--sage-200); max-width: 40rem; margin-inline: auto; }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--sage-950);
  color: var(--sage-300);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  font-size: .94rem;
}

.footer a { transition: color var(--dur-fast) var(--ease-out); }
.footer a:hover { color: var(--gold-400); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: var(--sp-7);
}

@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__logo { width: 158px; margin-bottom: var(--sp-4); }

.footer__kop {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--sp-4);
}

.footer__links { display: grid; gap: .6rem; }
.footer__links a { color: var(--sage-300); }

.footer__contact { display: grid; gap: .7rem; }

.footer__contact a, .footer__contact span {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--sage-300);
}

.footer__contact svg {
  flex-shrink: 0;
  width: 1rem; height: 1rem;
  margin-top: .28rem;
  color: var(--gold-400);
}

.socials { display: flex; gap: .6rem; margin-top: var(--sp-5); }

.social {
  width: 2.5rem; height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 247, 241, .16);
  border-radius: 50%;
  color: var(--sage-200);
  transition: all var(--dur-fast) var(--ease-out);
}

.social:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--sage-900);
  transform: translateY(-3px);
}

.social svg { width: 1.05rem; height: 1.05rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(250, 247, 241, .1);
  font-size: .82rem;
  color: var(--sage-500);
}

.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

/* Zwevende WhatsApp-knop */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 700;
  width: 3.3rem; height: 3.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 26px rgba(37, 211, 102, .38);
  transform: translateY(90px);
  opacity: 0;
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.wa-float.is-visible { transform: none; opacity: 1; }
.wa-float:hover { box-shadow: 0 12px 34px rgba(37, 211, 102, .55); transform: scale(1.07); }
.wa-float svg { width: 1.6rem; height: 1.6rem; }

/* --------------------------------------------------------------------------
   19. Onthullingen bij scrollen
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"]  { transform: scale(.95); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-in { transform: none; }

[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }
[data-reveal-delay="4"] { transition-delay: .36s; }
[data-reveal-delay="5"] { transition-delay: .45s; }
[data-reveal-delay="6"] { transition-delay: .54s; }

/* Beeld dat achter een sluier vandaan komt */
.reveal-img {
  position: relative;
  overflow: hidden;
}

.reveal-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform-origin: right;
  transition: transform 1.1s var(--ease-in-out);
}

.section--dark .reveal-img::after { background: var(--sage-900); }
.section--alt .reveal-img::after { background: var(--cream-alt); }

.reveal-img.is-in::after { transform: scaleX(0); }

.reveal-img img {
  transform: scale(1.14);
  transition: transform 1.5s var(--ease-out);
}

.reveal-img.is-in img { transform: scale(1); }

/* Kop die per regel opkomt.

   De regel moet de tekst afdekken zolang die nog van onderen aan komt
   schuiven, maar zonder de staarten van letters als j, g en y af te snijden.
   Daarom extra ruimte binnen de regel, meteen weer weggehaald met een
   negatieve marge zodat de regelafstand precies gelijk blijft. */
.reveal-text .line {
  display: block;
  overflow: hidden;
  padding-top: .14em;
  padding-bottom: .28em;
  margin-top: -.14em;
  margin-bottom: -.28em;
}

.reveal-text .line > span {
  display: block;
  /* Ruim voorbij de onderrand, anders piept de tekst in de extra ruimte
     hierboven alvast door voordat de animatie begint. */
  transform: translateY(140%);
  transition: transform 1s var(--ease-out);
}

.reveal-text.is-in .line > span { transform: none; }
.reveal-text.is-in .line:nth-child(2) > span { transition-delay: .1s; }
.reveal-text.is-in .line:nth-child(3) > span { transition-delay: .2s; }
.reveal-text.is-in .line:nth-child(4) > span { transition-delay: .3s; }

/* Parallax */
[data-parallax] { will-change: transform; }

/* --------------------------------------------------------------------------
   20. Cursor
   -------------------------------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9500;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .3s;
}

.cursor.is-active { opacity: 1; }

.cursor__dot {
  position: absolute;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--gold-400);
}

.cursor__ring {
  position: absolute;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(251, 194, 79, .75);
  border-radius: 50%;
  transition: width .3s var(--ease-out), height .3s var(--ease-out),
              margin .3s var(--ease-out), background .3s var(--ease-out),
              border-color .3s var(--ease-out);
}

.cursor.is-hover .cursor__ring {
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(251, 194, 79, .14);
  border-color: rgba(251, 194, 79, .95);
}

.cursor.is-down .cursor__ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

@media (hover: none), (pointer: coarse), (max-width: 1080px) {
  .cursor { display: none; }
}

/* --------------------------------------------------------------------------
   21. Kaart & contact
   -------------------------------------------------------------------------- */
.map {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--sage-100);
}

.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.04); }

@media (max-width: 760px) { .map { aspect-ratio: 4 / 3; } }

.infolist { display: grid; gap: var(--sp-5); }

.infolist__item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.infolist__icon {
  width: 2.6rem; height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--gold-600);
  transition: all var(--dur-fast) var(--ease-out);
}

.infolist__item:hover .infolist__icon {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--sage-900);
}

.infolist__icon svg { width: 1.05rem; height: 1.05rem; }

.infolist h4 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .3rem;
}

.infolist p, .infolist a { margin: 0; color: var(--ink); }
.infolist a:hover { color: var(--gold-600); }

/* --------------------------------------------------------------------------
   22. Beheer (admin)
   -------------------------------------------------------------------------- */
.admin-shell { min-height: 100svh; background: var(--sage-50); }

.admin-login {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--sage-900);
}

.admin-login__card {
  width: min(26rem, 100%);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}

.admin-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  background: var(--sage-900);
  color: var(--cream);
}

.admin-bar img { height: 30px; }

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: var(--sp-5);
}

.admin-table-wrap {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 46rem; }

.admin-table th {
  text-align: left;
  padding: .9rem 1rem;
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 400;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.admin-table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.admin-table tbody tr:hover { background: var(--sage-50); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .26em .8em;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill--nieuw       { background: var(--gold-100); color: var(--gold-700); }
.pill--bevestigd   { background: #E8F2E8; color: #2C5C30; }
.pill--afgewezen   { background: #FBEAE6; color: #8A3122; }
.pill--afgehandeld { background: var(--sage-100); color: var(--sage-700); }

/* --------------------------------------------------------------------------
   22b. Lopende tekst (juridische pagina's, blogartikelen)
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }

.prose > * + * { margin-top: var(--sp-4); }

.prose h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}

.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.prose h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

.prose p, .prose li { color: var(--ink-soft); }

.prose ul, .prose ol {
  display: grid;
  gap: .6rem;
  padding-left: 1.4rem;
  list-style: disc;
}

.prose ol { list-style: decimal; }
.prose li::marker { color: var(--gold-500); }

.prose a {
  color: var(--gold-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.prose a:hover { color: var(--gold-600); }

.prose strong { color: var(--ink); font-weight: 500; }

.prose dl {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: .5rem 1.5rem;
  margin: 0;
}
.prose dt { font-weight: 400; color: var(--ink); }
.prose dd { margin: 0; color: var(--ink-soft); }

@media (max-width: 560px) {
  .prose dl { grid-template-columns: 1fr; gap: .1rem 0; }
  .prose dd { margin-bottom: .6rem; }
}

.prose blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--gold-400);
  background: var(--gold-100);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink);
}

.prose figure { margin: var(--sp-6) 0; }
.prose figcaption {
  margin-top: .7rem;
  font-size: .85rem;
  color: var(--ink-mute);
  text-align: center;
}

.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: .7rem .8rem; border-bottom: 1px solid var(--line-soft); text-align: left; }
.prose th { font-weight: 400; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }

/* Inhoudsopgave */
.toc {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  align-self: start;
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.toc h2 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-4);
}

.toc ol { display: grid; gap: .5rem; counter-reset: toc; }
.toc a {
  font-size: .9rem;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
  display: block;
}
.toc a:hover { color: var(--gold-600); padding-left: .3rem; }

@media (max-width: 980px) { .toc { position: static; } }

/* Artikelmeta */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.2rem;
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.article-meta .gold { color: var(--gold-600); }

/* --------------------------------------------------------------------------
   23. Hulpklassen
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  padding: .8rem 1.4rem;
  background: var(--sage-900);
  color: var(--cream);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top: 0; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }

.gold { color: var(--gold-600); }
.muted { color: var(--ink-mute); }
.nowrap { white-space: nowrap; }

.hide-mobile { }
@media (max-width: 720px) { .hide-mobile { display: none !important; } }

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .menu, .footer, .wa-float, .cursor, .preloader, .page-veil, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   25. Minder beweging
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-img::after { transform: scaleX(0) !important; }
  .reveal-img img { transform: none !important; }
  .reveal-text .line > span { transform: none !important; }
  .cursor { display: none !important; }
  .hero__media img { transform: scale(1.02) !important; }
  .marquee__track { animation: none !important; }
}