/* ============================================================
   P.G.C. HAJENIUS — styles.css
   1826 — 2026
   S.T. Dupont-stijl homepage. Pure wit als basis, crème voor
   editorial pauzes, donker mahonie voor footer + sigaar-banner.
   Goud spaarzaam (hairlines + eyebrows + outline-buttons).

   Volgorde:
   0  · base + reset
   1  · typografie + utilities
   2  · buttons
   3  · promobar
   4  · topbar
   5  · hero
   6  · sectie-headers
   7  · gift-grid (4-up categorie-tiles)
   8  · productgrid (hover-swap)
   9  · split (editorial Het Huis)
   10 · editorial-banner (fullbleed sigaren)
   11 · winkel (split met map)
   12 · newsletter
   13 · footer
   14 · mobile-menu
   15 · popup-gift
   16 · cart-drawer
   17 · reveal-animations
   18 · responsive
   ============================================================ */

/* ============================================================
   0 · BASE + RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--inkt);
  font-family: var(--font-sans);
  font-size: var(--fs-body-d);
  line-height: var(--lh-body);
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

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

::selection { background: var(--rood-diep); color: var(--goud-licht); }

:focus-visible {
  outline: 2px solid var(--goud-licht);
  outline-offset: 3px;
  transition: outline-offset .2s var(--ease-out);
}

.no-scroll { overflow: hidden; }

.visually-hidden {
  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: -40px; left: 16px;
  background: var(--inkt); color: #fff; padding: 8px 16px;
  font-family: var(--font-sans); font-size: 14px;
  z-index: 9999;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 8px; }

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

/* ============================================================
   1 · TYPOGRAFIE + UTILITIES
   ============================================================ */
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--inkt);
}

.h1 { font-size: clamp(48px, 7vw, var(--fs-h1-d)); }
.h2 { font-size: clamp(36px, 5vw, var(--fs-h2-d)); line-height: 1.1; }
.h3 { font-size: clamp(24px, 3vw, var(--fs-h3-d)); line-height: 1.2; }

.h2--italic, .h3--italic { font-style: italic; font-weight: 500; }
.h2--light { color: #FFFFFF; }

.eyebrow {
  font-family: var(--font-sc);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--grijs-warm);
  font-weight: 500;
  margin: 0 0 var(--space-4);
}
.eyebrow--gold { color: var(--goud-warm); }
.eyebrow--light { color: var(--goud-licht); }

.sc {
  font-family: var(--font-sc);
  letter-spacing: var(--ls-sc);
  text-transform: uppercase;
}

/* ============================================================
   2 · BUTTONS
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 36px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 0; /* hard hoeken voor luxe-feel */
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}

/* Goud-streepje hoek-ornamenten — voor knoppen die ze tonen (.btn--ornament) */
.btn--ornament::before,
.btn--ornament::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
  transition: width .25s var(--ease-out), height .25s var(--ease-out);
}
.btn--ornament::before {
  top: -1px; left: -1px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
.btn--ornament::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.btn--ornament:hover::before,
.btn--ornament:hover::after {
  width: 14px;
  height: 14px;
}

/* Filled BLACK (primary CTA op licht) — donker met goud-streepje hoekjes */
.btn-solid-dark {
  background: var(--inkt);
  color: var(--goud-licht);
  border-color: var(--inkt);
}
.btn-solid-dark:hover {
  background: #000;
  border-color: #000;
  color: var(--goud-warm);
}

/* Filled RED (sub-primary) — wijnrood met goud */
.btn-solid-red {
  background: var(--rood-diep);
  color: var(--goud-licht);
  border-color: var(--rood-diep);
}
.btn-solid-red:hover {
  background: var(--rood-donker);
  border-color: var(--rood-donker);
  color: var(--goud-warm);
}

/* Filled GOLD (accent) — goud met zwart */
.btn-solid-gold {
  background: var(--goud-warm);
  color: var(--inkt);
  border-color: var(--goud-warm);
}
.btn-solid-gold:hover {
  background: var(--goud-licht);
  border-color: var(--goud-licht);
}

/* Outline dark — sober op licht; standaard met hoek-ornament */
.btn-outline-dark {
  background: transparent;
  color: var(--inkt);
  border-color: var(--goud-warm);
}
.btn-outline-dark:hover {
  background: var(--inkt);
  color: var(--goud-licht);
  border-color: var(--inkt);
}

/* Outline light (op donker bg) */
.btn-outline-light {
  background: transparent;
  color: var(--goud-licht);
  border-color: var(--goud-warm);
}
.btn-outline-light:hover {
  background: var(--goud-warm);
  color: var(--inkt);
  border-color: var(--goud-warm);
}

/* Outline gold — minder dominant, voor secundair op donker */
.btn-outline-gold {
  background: transparent;
  color: var(--goud-warm);
  border-color: var(--goud-warm);
}
.btn-outline-gold:hover {
  background: var(--goud-warm);
  color: var(--inkt);
}

/* Icon button (header utilities) */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--inkt);
  position: relative;
  transition: color .2s var(--ease-out);
}
.iconbtn:hover { color: var(--rood-diep); }

.cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--inkt);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.langbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--inkt);
  transition: color .2s var(--ease-out);
}
.langbtn:hover { color: var(--rood-diep); }
.langbtn__sep { opacity: .35; }
.langbtn[data-active="en"] .langbtn__active { opacity: .4; }
.langbtn[data-active="en"] .langbtn__alt { opacity: 1; font-weight: 600; }
.langbtn[data-active="nl"] .langbtn__active { opacity: 1; font-weight: 600; }
.langbtn[data-active="nl"] .langbtn__alt { opacity: .4; }

/* ============================================================
   3 · PROMOBAR (thin, mahonie)
   ============================================================ */
.promobar {
  background: var(--rood-donker);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  position: relative;
  z-index: calc(var(--z-topbar) + 1);
}
.promobar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px var(--gutter);
  text-align: center;
}
.promobar__text { color: rgba(255,255,255,.92); }
.promobar__link {
  color: var(--goud-licht);
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s var(--ease-out);
}
.promobar__link:hover { color: #FFFFFF; }

/* ============================================================
   4 · TOPBAR (sticky wit, dunne hairline)
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: #FFFFFF;
  border-bottom: 1px solid rgba(201, 160, 92, .2);
  transition: box-shadow .25s var(--ease-out);
}
.topbar[data-scrolled="true"] {
  box-shadow: 0 1px 12px rgba(14, 9, 7, .05);
}
.topbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  padding: 14px clamp(24px, 3vw, 56px);
  min-height: 88px;
  max-width: none;
  width: 100%;
}
.topbar__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-right: var(--space-6);
  order: 0;
}
.topbar__nav { flex: 1 1 auto; order: 1; display: flex; justify-content: center; }
.topbar__util { flex: 0 0 auto; margin-left: auto; order: 2; }
.topbar__menu {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
}
.topbar__menu .hamburger {
  position: relative;
  width: 22px; height: 2px;
  background: var(--inkt);
  display: block;
}
.topbar__menu .hamburger::before,
.topbar__menu .hamburger::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 2px; background: var(--inkt);
}
.topbar__menu .hamburger::before { top: -7px; }
.topbar__menu .hamburger::after  { top:  7px; }

.topbar__nav {
  display: flex;
  justify-content: flex-start;
}
.topbar__list {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.topbar__list a {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--inkt);
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
  transition: color .2s var(--ease-out);
}
.topbar__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--goud-warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.topbar__list a:hover { color: var(--rood-diep); }
.topbar__list a:hover::after { transform: scaleX(1); }

/* (overruled by main topbar__inner flex layout) */
.topbar__logo {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

.topbar__util {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ============================================================
   5 · HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 88px - 36px);
  max-height: 920px;
  overflow: hidden;
  background: var(--inkt);
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 35%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 25%);
  pointer-events: none;
}
/* Center scrim — voor BIG logo overlay variant */
.hero__scrim--center {
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 40%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,.45) 100%);
}

/* Hero met BIG logo overlay (center-centered) */
.hero--logo .hero__content--center {
  justify-content: center;
  align-items: center;
  padding-bottom: clamp(40px, 8vh, 80px);
  padding-top: clamp(40px, 6vh, 80px);
}
.hero__logo {
  display: block;
  width: clamp(280px, 38vw, 560px);
  height: auto;
  margin: 0 auto var(--space-7);
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.45));
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  color: var(--goud-licht);
  margin: 0 0 var(--space-7);
  letter-spacing: 0.01em;
}
.hero__tagline em { font-style: italic; }
.hero__content {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 88px - 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: clamp(56px, 10vh, 120px);
  text-align: center;
  color: #FFFFFF;
}
.hero__content > .eyebrow { color: var(--goud-licht); margin-bottom: var(--space-5); }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin-bottom: var(--space-5);
  max-width: 14ch;
}
.hero__title-em {
  font-style: italic;
  color: var(--goud-licht);
  font-weight: 500;
}
.hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  color: rgba(255,255,255,.88);
  margin-bottom: var(--space-7);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.hero__cta {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

/* ============================================================
   6 · SECTIES + section-headers
   ============================================================ */
.section {
  padding: var(--section-py-d) 0;
  background: #FFFFFF;
}
.section--light { background: #FFFFFF; }

/* Atelier-papier achtergrond: BEHOUDEN voor jubileum-pagina, hier op homepage VERVANGEN
   door subtle marmer + onyx voor minder schatkaart-feeling */
.section--atelier-papier {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 251, 240, 0.78) 0%, rgba(255, 251, 240, 0.4) 50%, rgba(255, 251, 240, 0.2) 100%),
    url("../img/textures/drafting-paper-gold-corners.jpg") center/cover no-repeat,
    #F4ECDC;
  isolation: isolate;
  border-top: 1px solid rgba(201, 160, 92, .22);
  border-bottom: 1px solid rgba(201, 160, 92, .22);
}

/* ZACHT WIT MARMER — subtle, doorschijnend. Voor productgrid background.
   Vervangt het irriterende drafting-paper. Geen schatkaart, wel chique. */
.section--marmer-subtle {
  position: relative;
  background:
    /* extra-zachte verticale gradient om grid-cards visueel rust te geven */
    linear-gradient(180deg, #FBF6EC 0%, #F7EFE0 50%, #F0E6D2 100%),
    #F4ECDC;
  isolation: isolate;
}
.section--marmer-subtle::before {
  /* Doorschijnende marmer-overlay — net merkbaar */
  content: "";
  position: absolute; inset: 0;
  background:
    url("../img/textures/marmer-wit-subtle.jpg") center/cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.section--marmer-subtle::after {
  /* Vignet zodat content in midden lichter wordt — sectie-afsluiting */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 252, 244, 0.72) 0%, rgba(255, 252, 244, 0) 65%),
    linear-gradient(180deg, rgba(0,0,0,.02), transparent 8%, transparent 92%, rgba(0,0,0,.03));
  pointer-events: none;
  z-index: 0;
}
.section--marmer-subtle > .container { position: relative; z-index: 2; }

/* ONYX — diep zwart, subtiele textuur, voor de high-end vitrine */
.section--onyx {
  position: relative;
  background:
    linear-gradient(180deg, #040303 0%, #0A0606 50%, #040303 100%),
    #040303;
  color: #F4ECDC;
  isolation: isolate;
}
.section--onyx::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/textures/onyx-zwart-pano.jpg") center/cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.section--onyx::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(4, 3, 3, 0) 35%, rgba(4, 3, 3, 0.75) 100%),
    linear-gradient(180deg, transparent 0%, transparent 88%, rgba(4, 3, 3, 1) 100%);
  pointer-events: none;
  z-index: 0;
}
.section--onyx > .container { position: relative; z-index: 2; }

.section--cream { background: var(--creme); }
.section--tight { padding-top: 0; }

/* Section head — light variant voor donker (onyx) */
.section__head--light .eyebrow,
.section__head--light .h2 { color: #F4ECDC; }
.section__head--light .eyebrow--gold { color: var(--goud-warm); }
.section__head--light .h2 em { color: var(--goud-licht); }
.section__head-lead {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--grijs-warm);
  margin: var(--space-5) auto 0;
  max-width: 640px;
  font-style: italic;
}
.section__head-lead--light { color: rgba(244, 236, 220, 0.75); }
.section__cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}
.h2--light { color: #F4ECDC; }

.section__head {
  margin-bottom: var(--space-9);
}
.section__head--center { text-align: center; }
.section__head .eyebrow { margin-bottom: var(--space-3); }
.section__head .h2 { max-width: 22ch; }
.section__head--center .h2 { margin-inline: auto; }

/* ============================================================
   7 · GIFT-GRID (categorie-tiles 4-up — "Vind het juiste geschenk")
   ============================================================ */
.gift-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.gift-tile { position: relative; }
.gift-tile__link {
  display: block;
  text-align: center;
  color: inherit;
}
.gift-tile__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(170deg, #FFFFFF 0%, #F6F6F2 100%);
  margin-bottom: var(--space-5);
  position: relative;
}
.gift-tile__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: transform .55s var(--ease-out);
}
.gift-tile__link:hover .gift-tile__media img { transform: scale(1.04); }

.gift-tile__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--inkt);
  margin-bottom: var(--space-2);
  letter-spacing: -0.005em;
}
.gift-tile__cta {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--inkt);
  border-bottom: 1px solid var(--goud-warm);
  padding-bottom: 3px;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.gift-tile__link:hover .gift-tile__cta {
  color: var(--rood-diep);
  border-bottom-color: var(--rood-diep);
}

/* ============================================================
   8 · PRODUCTGRID (3-up of 9-up via product-grid--nine, hover-swap)
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  max-width: 1180px;
  margin: 0 auto;
}
.product-grid--nine {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7) var(--space-7);
  max-width: 1220px;
}
.product-grid--nine .product-card { /* alle 9 cards even gegroepeerd */ }
.product-card--featured .product-card__media {
  background: linear-gradient(170deg, #1A1410 0%, #2A1F18 100%);
}
.product-card--featured .product-card__media-main img,
.product-card--featured .product-card__media-hover img { padding: 8%; }
.product-card--featured .product-card__name { color: var(--inkt); }
@media (max-width: 900px) {
  .product-grid--nine { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (max-width: 560px) {
  .product-grid--nine { grid-template-columns: 1fr; }
}
.product-card {
  position: relative;
  padding: 0;
  background: transparent;
  border: 0;
}
.product-card:hover { transform: none; }
.product-card__link {
  display: block;
  color: inherit;
  text-align: center;
}
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: transparent;
  margin-bottom: var(--space-5);
}
.product-card__media-main,
.product-card__media-hover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transition: opacity .45s var(--ease-out);
}
.product-card__media-main img,
.product-card__media-hover img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6%;
}
.product-card__media-hover { opacity: 0; }

@media (hover: hover) {
  .product-card__link:hover .product-card__media-main { opacity: 0; }
  .product-card__link:hover .product-card__media-hover { opacity: 1; }
}

.product-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--inkt);
  margin-bottom: var(--space-2);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.product-card__price {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--grijs-warm);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ============================================================
   9 · SPLIT (editorial — Het Huis aan het Rokin)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--creme);
  min-height: 720px;
}
.split__media {
  position: relative;
  overflow: hidden;
}
.split__media picture { display: block; width: 100%; height: 100%; }
.split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  min-height: 480px;
}
.split__body {
  background: var(--creme);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 10vw, 120px) clamp(32px, 6vw, 88px);
}
.split__inner {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.split__inner .eyebrow { margin-bottom: 0; color: var(--goud-warm); }
.split__inner .h2 { margin-bottom: var(--space-3); }
.split__prose {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  color: var(--inkt);
  font-weight: 400;
  margin: 0;
}
.split__inner .btn { margin-top: var(--space-3); }

/* ============================================================
   10 · EDITORIAL-BANNER (fullbleed sigaren)
   ============================================================ */
.editorial-banner {
  position: relative;
  width: 100%;
  min-height: 540px;
  overflow: hidden;
  background: var(--inkt);
}
.editorial-banner__media { position: absolute; inset: 0; }
.editorial-banner__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.editorial-banner__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(14,9,7,.7) 100%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}
.editorial-banner__content {
  position: relative;
  z-index: 2;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding-block: clamp(56px, 8vw, 120px);
  color: #FFFFFF;
  text-align: right;
}
.editorial-banner__content > * { max-width: 520px; }
.editorial-banner__content .h2 { margin-bottom: var(--space-5); }
.editorial-banner__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: rgba(255,255,255,.88);
  margin-bottom: var(--space-6);
  font-weight: 400;
}

/* ============================================================
   11 · WINKEL (split met map)
   ============================================================ */
.section--winkel { padding: var(--section-py-d) 0; }
.winkel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
.winkel-grid__copy { max-width: 480px; }
.winkel-grid__copy .h2 { margin-bottom: var(--space-6); }
.winkel-grid__copy .eyebrow { color: var(--goud-warm); }

.winkel-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(201, 160, 92, .3);
}
.winkel-info dt {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--grijs-warm);
  margin-bottom: 6px;
  font-weight: 500;
}
.winkel-info dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--inkt);
  line-height: 1.5;
}
.winkel-info a { transition: color .2s var(--ease-out); }
.winkel-info a:hover { color: var(--rood-diep); }

.winkel-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--grijs-warm);
  line-height: 1.55;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(201, 160, 92, .3);
}

.winkel-grid__map {
  aspect-ratio: 4 / 3;
  background: var(--creme);
  overflow: hidden;
}
.winkel-grid__map iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   12 · NEWSLETTER
   ============================================================ */
.newsletter {
  padding: var(--section-py-d) 0;
  background: #FFFFFF;
  border-top: 1px solid rgba(201, 160, 92, .18);
}
.newsletter--centered .newsletter__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}
.newsletter .eyebrow { color: var(--goud-warm); margin-bottom: 0; }
.newsletter .h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-style: italic;
  font-weight: 500;
  color: var(--inkt);
}
.newsletter__sub {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--grijs-warm);
  line-height: 1.6;
  max-width: 44ch;
  margin: 0;
}
.newsletter__form {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  max-width: 480px;
  margin-top: var(--space-5);
}
.newsletter__form input[type="email"] {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid rgba(201, 160, 92, .4);
  border-radius: var(--radius);
  background: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--inkt);
  transition: border-color .2s var(--ease-out);
}
.newsletter__form input[type="email"]:focus {
  outline: none;
  border-color: var(--inkt);
}
.newsletter__form input[type="email"]::placeholder { color: var(--grijs-warm); }
.newsletter__form button { flex-shrink: 0; }

/* ============================================================
   13 · FOOTER
   ============================================================ */
.footer {
  background: #1A1410;
  color: rgba(244, 236, 220, .82);
  padding: var(--section-py-d) 0 var(--space-6);
  font-family: var(--font-sans);
  font-size: 14px;
}
.footer a {
  color: rgba(244, 236, 220, .82);
  transition: color .2s var(--ease-out);
}
.footer a:hover { color: var(--goud-licht); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding-bottom: var(--space-8);
}
.footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__h {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--goud-warm);
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__col li { font-size: 13.5px; line-height: 1.5; }

.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.footer__social svg { flex-shrink: 0; color: var(--goud-licht); }

.footer__payments {
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(201, 160, 92, .2);
  border-bottom: 1px solid rgba(201, 160, 92, .2);
}
.payment-methods {
  margin: 0;
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 236, 220, 0.72);
  text-align: center;
  line-height: 1.9;
  max-width: 880px;
}
.payment-methods span { color: var(--goud-warm); margin: 0 6px; }

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-6);
  font-size: 12px;
}
.footer__copy {
  font-family: var(--font-sc);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 236, 220, .55);
  font-size: 11px;
  margin: 0;
}
.footer__legal-list {
  display: flex;
  gap: var(--space-5);
}
.footer__legal-list a { font-size: 12px; color: rgba(244, 236, 220, .55); }
.footer__legal-list a:hover { color: var(--goud-licht); }

/* ============================================================
   14 · MOBILE MENU
   ============================================================ */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
.mobile-menu[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px var(--gutter-m);
}
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(201, 160, 92, .2);
}
.mobile-menu__head img { height: 56px; width: auto; }
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) 0;
  flex-grow: 1;
}
.mobile-menu__list a {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  color: var(--inkt);
  letter-spacing: -0.005em;
  font-weight: 500;
  padding: 8px 0;
}
.mobile-menu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(201, 160, 92, .2);
}
.langbtn--lg { font-size: 14px; padding: 12px 14px; }

/* ============================================================
   15 · POPUP GIFT
   ============================================================ */
.popup-gift {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 420px;
  max-width: calc(100vw - 48px);
  background: #FFFFFF;
  border: 1px solid rgba(201, 160, 92, .35);
  display: grid;
  grid-template-columns: 140px 1fr;
  z-index: var(--z-toast);
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  box-shadow: 0 12px 40px rgba(14, 9, 7, .14);
}
.popup-gift[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.popup-gift__media {
  overflow: hidden;
}
.popup-gift__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.popup-gift__body {
  position: relative;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.popup-gift__close {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--grijs-warm);
}
.popup-gift__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  color: var(--inkt);
  font-weight: 500;
  margin: 0;
  padding-right: 24px;
}
.popup-gift__sub {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--grijs-warm);
  line-height: 1.5;
  margin: 0;
}
.popup-gift__cta {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inkt);
  font-weight: 500;
  margin-top: 4px;
  border-bottom: 1px solid var(--goud-warm);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.popup-gift__cta:hover {
  color: var(--rood-diep);
  border-bottom-color: var(--rood-diep);
}

/* ============================================================
   16 · CART DRAWER
   ============================================================ */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100vh;
  background: #FFFFFF;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s var(--ease-out);
  box-shadow: -8px 0 32px rgba(14, 9, 7, .08);
}
.cart-drawer[data-visible="true"] {
  transform: translateX(0);
}
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--space-5);
  border-bottom: 1px solid rgba(201, 160, 92, .2);
}
.cart-drawer__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  margin: 0;
  font-weight: 500;
}
.cart-drawer__body {
  flex-grow: 1;
  padding: var(--space-5);
}
.cart-drawer__empty {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--grijs-warm);
  text-align: center;
  padding-top: var(--space-8);
}
.cart-drawer__foot {
  padding: var(--space-5);
  border-top: 1px solid rgba(201, 160, 92, .2);
}

/* ============================================================
   17 · REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    transform 1.1s cubic-bezier(.22,.61,.36,1),
    filter 1.4s cubic-bezier(.22,.61,.36,1);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}
.reveal.revealed,
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal--slow {
  transition-duration: 1.6s, 1.6s, 1.8s;
}
.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal-delay-3 { transition-delay: 270ms; }
.reveal-delay-4 { transition-delay: 360ms; }

/* Premium hover-lift voor kaarten & tegels op de hele site */
.vitrine-tile,
.product-card,
.dupont-marquee__item,
.collection-card,
.card {
  transition:
    transform .5s cubic-bezier(.22,.61,.36,1),
    box-shadow .5s cubic-bezier(.22,.61,.36,1),
    filter .5s cubic-bezier(.22,.61,.36,1);
}
.vitrine-tile:hover,
.product-card:hover,
.collection-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.04);
}
/* Image zoom-binnen-frame voor vitrine + product cards */
.vitrine-tile__media img,
.product-card__media img,
.product-card__media-main img {
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.vitrine-tile:hover .vitrine-tile__media img,
.product-card:hover .product-card__media img {
  transform: scale(1.04);
}

/* CTA-knoppen krijgen een fijne lift + glow */
.btn, .btn-solid-gold, .btn-solid-dark, .btn-outline-gold, .btn-outline-dark, .btn-link-gold,
.jubileum-feature__cta, .btn-vitrine {
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    background-color .35s ease, color .35s ease, border-color .35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: 0.01ms; transform: none; opacity: 1; }
  .reveal.revealed { transition-duration: 0.01ms; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   18 · RESPONSIVE
   ============================================================ */

/* Tablet — collapse to 2-up */
@media (max-width: 1024px) {
  .topbar__inner {
    grid-template-columns: auto 1fr auto;
    min-height: 72px;
  }
  .topbar__menu { display: inline-flex; }
  .topbar__nav { display: none; }
  .topbar__brand { justify-self: center; }
  .topbar__logo { height: 52px; }

  .gift-grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .split { grid-template-columns: 1fr; min-height: auto; }
  .split__media img { min-height: 380px; aspect-ratio: 4 / 3; }
  .split__body { padding: 56px 32px; }

  .winkel-grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
  }
}

/* Mobile */
@media (max-width: 720px) {
  .container { padding: 0 var(--gutter-m); }
  .section { padding: var(--section-py-m) 0; }
  .newsletter { padding: var(--section-py-m) 0; }
  .footer { padding: var(--section-py-m) 0 var(--space-5); }

  .promobar__inner { font-size: 11px; padding: 8px var(--gutter-m); gap: 10px; flex-wrap: wrap; }
  .promobar__link { font-size: 11px; }

  .topbar__inner { padding: 10px var(--gutter-m); min-height: 64px; }
  .topbar__logo { height: 44px; }
  .topbar__util { gap: 2px; }
  .topbar__util .iconbtn { width: 36px; height: 36px; }

  .hero {
    min-height: 78vh;
    max-height: none;
  }
  .hero__content {
    min-height: 78vh;
    padding-bottom: 64px;
  }
  .hero__title { font-size: clamp(40px, 11vw, 56px); }
  .hero__sub { font-size: 17px; }
  .hero__cta { flex-direction: column; width: 100%; padding: 0 24px; }
  .hero__cta .btn { width: 100%; padding: 16px 20px; font-size: 12px; }

  .section__head { margin-bottom: var(--space-7); }
  .h2 { font-size: clamp(28px, 7vw, 36px); }

  .gift-grid,
  .product-grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .gift-tile__name { font-size: 20px; }

  .split__body { padding: 48px var(--gutter-m); }
  .split__inner { gap: var(--space-4); }
  .split__prose { font-size: 16px; }

  .editorial-banner { min-height: 460px; }
  .editorial-banner__content {
    align-items: flex-start;
    text-align: left;
    min-height: 460px;
    padding-block: 64px;
  }
  .editorial-banner__scrim {
    background:
      linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(14,9,7,.65) 100%);
  }

  .newsletter__form {
    flex-direction: column;
    max-width: 360px;
  }
  .newsletter__form .btn { width: 100%; }

  .footer__cols { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-6); }
  .footer__legal {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .footer__legal-list { flex-wrap: wrap; gap: var(--space-4); }

  .popup-gift {
    left: 12px; right: 12px;
    bottom: 12px;
    width: auto;
    grid-template-columns: 100px 1fr;
  }
  .popup-gift__title { font-size: 16px; }
  .popup-gift__sub { font-size: 12.5px; }

  .cart-drawer { width: 100vw; }
}


/* ============================================================
   PDP — Product Detail Page (S.T. Dupont stijl + Baymard 2026)
   ============================================================ */
.pdp {
  padding-top: calc(var(--topbar-h, 80px) + var(--space-7));
  padding-bottom: var(--space-9);
  background: var(--bg, #FFFFFF);
}
@media (max-width: 768px) {
  .pdp { padding-top: calc(var(--topbar-h-m, 60px) + var(--space-5)); }
}

.pdp__crumbs {
  font-family: var(--font-sc, 'Cormorant SC', serif);
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow, 0.24em);
  text-transform: uppercase;
  color: var(--grijs-warm, #6B5D4F);
  margin-bottom: var(--space-5);
}
.pdp__crumbs a { padding-right: 8px; color: inherit; text-decoration: none; }
.pdp__crumbs a::after { content: "›"; margin-left: 8px; color: var(--goud-warm, #C9A05C); }
.pdp__crumbs span { color: var(--inkt, #1A1410); }

.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--space-9);
}
@media (max-width: 1023px) {
  .pdp__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* Gallery */
.pdp__gallery {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-4);
}
@media (max-width: 600px) {
  .pdp__gallery { grid-template-columns: 1fr; gap: var(--space-3); }
}

.pdp__dots {
  display: flex; flex-direction: column;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
}
@media (max-width: 600px) {
  .pdp__dots { flex-direction: row; justify-content: center; order: 2; }
}
.pdp__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.18);
  transition: background var(--t-fast, 150ms) var(--ease-out, ease), transform var(--t-fast, 150ms) var(--ease-out, ease);
  border: 0;
  cursor: pointer;
  padding: 0;
}
.pdp__dot[data-active="true"] {
  background: var(--inkt, #1A1410);
  transform: scale(1.25);
}

.pdp__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(170deg, #FFFFFF 0%, #F6F6F2 100%);
  border-radius: var(--radius, 2px);
  overflow: hidden;
}
.pdp__slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8%;
  opacity: 0;
  transition: opacity var(--t-med, 350ms) var(--ease-out, ease);
}
.pdp__slide[data-active="true"] { opacity: 1; }
.pdp__slide img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Info */
.pdp__info {
  display: flex; flex-direction: column;
  gap: var(--space-4);
}

.pdp__status {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
}
.pdp__avail {
  display: inline-flex; align-items: center;
  gap: 6px;
  font-family: var(--font-sc, 'Cormorant SC', serif);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grijs-warm, #6B5D4F);
}
.pdp__avail::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--goud-warm, #C9A05C);
}
.pdp__warrant {
  font-family: var(--font-sc, 'Cormorant SC', serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--goud-warm, #C9A05C);
  padding: 4px 10px;
  border: 1px solid var(--goud-warm, #C9A05C);
  border-radius: var(--radius-pill, 999px);
}

.pdp__chapters {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-3);
}
.pdp__chapter {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.pdp__chapter-circle {
  width: 56px; height: 56px;
  border: 1px solid var(--goud-warm, #C9A05C);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--goud-warm, #C9A05C);
  transition: background var(--t-fast, 150ms) var(--ease-out, ease), color var(--t-fast, 150ms) var(--ease-out, ease);
}
.pdp__chapter:hover .pdp__chapter-circle {
  background: var(--goud-warm, #C9A05C);
  color: var(--bg, #FFFFFF);
}
.pdp__chapter-label {
  font-family: var(--font-sc, 'Cormorant SC', serif);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grijs-warm, #6B5D4F);
}

.pdp__title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--inkt, #1A1410);
  margin: 0;
}
@media (max-width: 768px) { .pdp__title { font-size: 28px; } }

.pdp__subtitle {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--inkt, #1A1410);
  line-height: 1.55;
  margin: 8px 0 0;
}
.pdp__subtitle em { font-style: italic; color: var(--rood-diep); }

.pdp__ref {
  font-family: var(--font-sc, 'Cormorant SC', serif);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grijs-warm, #6B5D4F);
}

.pdp__price {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: 28px;
  color: var(--inkt, #1A1410);
  margin: var(--space-3) 0;
}

.pdp__variants { display: flex; flex-direction: column; gap: var(--space-3); }
.pdp__variant-label {
  font-family: var(--font-sc, 'Cormorant SC', serif);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grijs-warm, #6B5D4F);
}
.pdp__swatches { display: flex; gap: var(--space-3); }
.pdp__swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--t-fast, 150ms) var(--ease-out, ease), transform var(--t-fast, 150ms) var(--ease-out, ease);
}
.pdp__swatch[data-selected="true"] {
  border-color: var(--goud-warm, #C9A05C);
  transform: scale(1.08);
}

.pdp__cart-row {
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 8px;
  margin-top: var(--space-3);
}
.pdp__fav {
  border: 1px solid var(--inkt, #1A1410);
  border-radius: var(--radius, 2px);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast, 150ms) var(--ease-out, ease);
}
.pdp__fav:hover { background: rgba(26, 20, 16, 0.06); }

.btn-black {
  background: var(--inkt, #1A1410);
  color: var(--bg, #FFFFFF);
  border: 1px solid var(--inkt, #1A1410);
  width: 100%;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sc, 'Cormorant SC', serif);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius, 2px);
  transition: background var(--t-med, 350ms) var(--ease-out, ease);
}
.btn-black:hover { background: var(--zwart-warm, #0E0907); }

.pdp__cost-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  padding: var(--space-3) 0 0;
  margin: 0;
  font-family: var(--font-sc, 'Cormorant SC', serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grijs-warm, #6B5D4F);
  border-bottom: 1px solid rgba(201, 160, 92, 0.18);
  padding-bottom: var(--space-4);
}
.pdp__cost-strip li {
  display: inline-flex; align-items: center; gap: 6px;
}
.pdp__cost-strip li:not(:last-child)::after {
  content: "·";
  margin-left: var(--space-4);
  color: var(--goud-warm, #C9A05C);
}

.pdp__expert {
  margin-top: var(--space-5);
  border-top: 1px solid rgba(201, 160, 92, 0.3);
  padding-top: var(--space-5);
}
.pdp__expert-h {
  font-family: var(--font-sc, 'Cormorant SC', serif);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--goud-warm, #C9A05C);
  margin-bottom: var(--space-3);
}
.pdp__expert-q {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 17px;
  margin-bottom: var(--space-3);
}

.chatbot-chips {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.chatbot-chip {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--goud-warm, #C9A05C);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--inkt, #1A1410);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-fast, 150ms) var(--ease-out, ease);
}
.chatbot-chip:hover { background: rgba(201, 160, 92, 0.10); }

/* PDP details rij */
.pdp__details {
  margin-top: var(--space-9);
}
.pdp__details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .pdp__details-grid { grid-template-columns: 1fr; } }
.pdp__detail-card {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius, 2px);
  overflow: hidden;
  background: var(--zwart-warm, #0E0907);
  display: block;
}
.pdp__detail-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow, 450ms) var(--ease-out, ease);
}
.pdp__detail-card:hover img { transform: scale(1.04); }

/* Accordion tabs */
.pdp__tabs {
  margin-top: var(--space-9);
  border-top: 1px solid var(--goud-warm, #C9A05C);
}
.pdp__tab { border-bottom: 1px solid rgba(201, 160, 92, 0.3); }
.pdp__tab-button {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-5) 0;
  font-family: var(--font-sc, 'Cormorant SC', serif);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--inkt, #1A1410);
  background: none;
  border: 0;
  cursor: pointer;
}
.pdp__tab-icon {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: var(--goud-warm, #C9A05C);
  transition: transform var(--t-med, 350ms) var(--ease-out, ease);
}
.pdp__tab[data-open="true"] .pdp__tab-icon { transform: rotate(45deg); }
.pdp__tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow, 450ms) var(--ease-in-out, ease);
}
.pdp__tab[data-open="true"] .pdp__tab-content { max-height: 800px; }
.pdp__tab-content-inner {
  padding: 0 0 var(--space-5);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--inkt, #1A1410);
  max-width: 720px;
}
.pdp__tab-content-inner em { font-style: italic; }

/* Modal */
.modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med, 350ms) var(--ease-out, ease);
}
.modal[data-visible="true"] { opacity: 1; pointer-events: auto; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(14, 9, 7, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal__card {
  position: relative;
  width: 100%; max-width: 720px;
  max-height: 85vh;
  background: var(--bg, #FFFFFF);
  border: 1px solid var(--goud-warm, #C9A05C);
  border-radius: var(--radius, 2px);
  padding: var(--space-7);
  overflow-y: auto;
  transform: scale(0.96);
  transition: transform var(--t-med, 350ms) var(--ease-out, ease);
}
.modal[data-visible="true"] .modal__card { transform: scale(1); }
@media (max-width: 768px) { .modal__card { padding: var(--space-5); } }
.modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: none; border: 0;
  cursor: pointer;
  transition: background var(--t-fast, 150ms) var(--ease-out, ease);
}
.modal__close:hover { background: rgba(26, 20, 16, 0.08); }
.modal__head {
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(201, 160, 92, 0.4);
  padding-bottom: var(--space-4);
}


/* ============================================================
   HERITAGE STRIP — overgang van hero naar content, met pand-lineart watermark
   ============================================================ */
.heritage-strip {
  position: relative;
  background: var(--inkt);
  color: var(--goud-licht);
  padding: var(--space-8) 0;
  overflow: hidden;
  border-top: 1px solid rgba(201, 160, 92, .25);
  border-bottom: 1px solid rgba(201, 160, 92, .25);
}
.heritage-strip__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  text-align: center;
  max-width: 1080px;
}
.heritage-strip__seal {
  font-size: 32px;
  color: var(--goud-warm);
  line-height: 1;
}
.heritage-strip__text {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.55;
  margin: 0;
  color: var(--goud-licht);
  letter-spacing: 0.01em;
}
.heritage-strip__text em {
  font-style: italic;
  color: var(--goud-warm);
}
.heritage-strip__pand {
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 400px;
  height: 300px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
  color: var(--goud-warm);
}

@media (max-width: 768px) {
  .heritage-strip__pand { width: 240px; height: 180px; right: -40px; bottom: -80px; }
  .heritage-strip__seal { font-size: 24px; }
}

/* ============================================================
   MEGA BANNER — full-bleed editorial banner, beeldvullend
   Gebruikt voor sigaren-banner + andere "mega" sections
   ============================================================ */
.mega-banner {
  position: relative;
  width: 100%;
  min-height: 78vh;
  max-height: 880px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--inkt);
  isolation: isolate;
}
.mega-banner__media {
  position: absolute; inset: 0; z-index: -2;
}
.mega-banner__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.mega-banner--zoom .mega-banner__media img {
  transform: scale(1.45);
  transform-origin: 62% 55%;
}
.mega-banner__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 9, 7, 0.78) 0%, rgba(14, 9, 7, 0.30) 50%, rgba(14, 9, 7, 0) 80%),
    linear-gradient(180deg, rgba(14, 9, 7, 0) 60%, rgba(14, 9, 7, 0.45) 100%);
}
.mega-banner__scrim--right {
  background:
    linear-gradient(270deg, rgba(14, 9, 7, 0.85) 0%, rgba(14, 9, 7, 0.30) 55%, rgba(14, 9, 7, 0) 85%);
}
.mega-banner__content {
  position: relative;
  max-width: 540px;
  padding: var(--space-9) var(--space-7);
  color: var(--goud-licht);
}
.mega-banner__content--right {
  margin-left: auto;
  text-align: right;
}
.mega-banner__eyebrow {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0 0 var(--space-4);
}
.mega-banner__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-5);
  color: #FFFFFF;
  font-weight: 400;
}
.mega-banner__title em {
  font-style: italic;
  color: var(--goud-licht);
}
.mega-banner__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  margin: 0 0 var(--space-6);
  color: rgba(244, 236, 220, .85);
}
@media (max-width: 768px) {
  .mega-banner { min-height: 70vh; }
  .mega-banner__content { padding: var(--space-7) var(--space-5); }
}

/* MARMER variant — donkere tekst op wit Carrara achtergrond, subtiele lichte scrim */
.mega-banner--marmer { background: #F5F1E8; }
.mega-banner--marmer .mega-banner__scrim--marmer {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0) 75%);
}
.mega-banner--marmer .mega-banner__eyebrow {
  color: var(--rood-diep);
}
.mega-banner--marmer .mega-banner__title {
  color: var(--inkt);
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.6);
}
.mega-banner--marmer .mega-banner__title em {
  color: var(--rood-diep);
}
.mega-banner--marmer .mega-banner__sub {
  color: var(--grijs-warm);
}

/* ============================================================
   15 · SFEER-DIVIDER — full-bleed banner (wapen op rood velvet)
   ============================================================ */
.sfeer-divider {
  position: relative;
  width: 100%;
  min-height: 34vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* MARMER variant — vintage perkament Higgsfield render voor echte papier-textuur */
.sfeer-divider--marmer {
  background:
    /* zachte lichte vignet voor leesbaarheid */
    radial-gradient(ellipse at 50% 50%, rgba(252, 245, 230, 0.55) 0%, rgba(252, 245, 230, 0) 60%),
    url("../img/textures/parchment-aged.jpg") center/cover no-repeat,
    #F4ECDC;
  border-top: 1px solid rgba(201, 160, 92, .25);
  border-bottom: 1px solid rgba(201, 160, 92, .25);
  padding: var(--space-9) 0;
}
.sfeer-divider--marmer::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(107, 93, 79, .07) 0%, transparent 4%),
    radial-gradient(circle at 88% 75%, rgba(107, 93, 79, .05) 0%, transparent 6%),
    radial-gradient(circle at 50% 50%, rgba(107, 93, 79, .03) 0%, transparent 8%);
  pointer-events: none;
}

.sfeer-divider__ornament {
  position: relative; z-index: 2;
  margin-bottom: var(--space-5);
  text-align: center;
}
.sfeer-divider__ornament img {
  margin: 0 auto;
  opacity: 0.95;
}

.sfeer-divider__content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 var(--space-5);
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sfeer-divider__eyebrow {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.sfeer-divider--marmer .sfeer-divider__eyebrow { color: var(--rood-diep); }

.sfeer-divider__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-4);
}
.sfeer-divider__title em { font-style: italic; }
.sfeer-divider--marmer .sfeer-divider__title { color: var(--inkt); }
.sfeer-divider--marmer .sfeer-divider__title em { color: var(--rood-diep); }

.sfeer-divider__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  margin: 0;
}
.sfeer-divider--marmer .sfeer-divider__line { color: var(--grijs-warm); }

.sfeer-divider__rule {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin-top: var(--space-5);
  width: 100%; max-width: 320px;
}
.sfeer-divider__rule span:first-child,
.sfeer-divider__rule span:last-child {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--goud-warm), transparent);
}
.sfeer-divider__mark {
  font-family: var(--font-display);
  color: var(--goud-warm);
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 768px) {
  .sfeer-divider { min-height: 32vh; }
  .sfeer-divider--marmer { padding: var(--space-7) 0; }
  .sfeer-divider__ornament img { width: 52px; height: 52px; }
}

/* ============================================================
   16 · SPLIT — mahonie-meubel subtle background
   ============================================================ */
/* Split-variant met video-achtergrond + donkere overlay (vervangt oude foto-headers) */
.split.split--video {
  position: relative;
  background: #0A0604;
}
.split__media--video {
  position: relative;
  overflow: hidden;
  background: #0A0604;
}
.split__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.split__video-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(8, 5, 3, 0.45) 0%, rgba(8, 5, 3, 0.75) 80%, rgba(8, 5, 3, 0.88) 100%);
  pointer-events: none;
}


.split.split--mahonie {
  position: relative;
}
.split.split--mahonie::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/textures/mahonie-pano.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.split.split--mahonie .split__media,
.split.split--mahonie .split__body { position: relative; z-index: 1; }
.split.split--mahonie .split__body {
  background: rgba(244, 236, 220, 0.92); /* creme met transparantie zodat warmte doorklinkt */
  backdrop-filter: blur(2px);
}

/* ============================================================
   17 · FOOTER — uitgebreide variant
   ============================================================ */
.footer.footer--extended {
  background: var(--inkt);
  color: var(--goud-licht);
  padding: var(--space-9) 0 var(--space-5);
}
.footer.footer--extended a {
  color: var(--goud-licht);
  transition: color .2s var(--ease-out);
}
.footer.footer--extended a:hover { color: var(--goud-warm); }

/* A · Head sentinel */
.footer__head {
  text-align: center;
  padding-bottom: var(--space-7);
  margin-bottom: var(--space-7);
  border-bottom: 1px solid rgba(201, 160, 92, .2);
}
.footer__logo {
  display: block;
  width: 200px; height: auto;
  margin: 0 auto var(--space-4);
  filter: brightness(1.08);
}
.footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--goud-warm);
  margin: 0 0 var(--space-3);
}
.footer__tagline em { font-style: italic; }
.footer__warrant {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--goud-licht);
  opacity: .82;
  margin: 0;
}

/* B · 5-koloms grid (override van basis 4-up) */
.footer__cols--five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(201, 160, 92, .15);
}
@media (max-width: 960px) {
  .footer__cols--five { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (max-width: 540px) {
  .footer__cols--five { grid-template-columns: 1fr; gap: var(--space-5); }
}
.footer.footer--extended .footer__col h3.footer__h {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0 0 var(--space-4);
  font-weight: 500;
}
.footer.footer--extended .footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block; /* override van flex */
}
.footer.footer--extended .footer__col li {
  padding: 5px 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
}
.footer__address {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: normal;
  line-height: 1.65;
  margin: 0 0 var(--space-3);
}
.footer__hours {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  color: rgba(244, 236, 220, .82);
}
.footer__hours strong {
  color: var(--goud-warm);
  font-weight: 600;
  font-style: italic;
}
.footer__journal-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  margin: 0 0 var(--space-3);
  color: rgba(244, 236, 220, .8);
}
.footer__form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--goud-warm);
  margin-bottom: var(--space-5);
}
.footer__form input {
  flex: 1;
  padding: 8px 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--goud-licht);
  font-family: var(--font-display);
  font-size: 15px;
}
.footer__form input::placeholder {
  color: rgba(244, 236, 220, .5);
  font-style: italic;
}
.footer__form button {
  background: transparent;
  border: 0;
  color: var(--goud-warm);
  font-size: 18px;
  cursor: pointer;
  padding: 8px 4px;
  transition: transform .2s var(--ease-out), color .2s var(--ease-out);
}
.footer__form button:hover {
  transform: translateX(2px);
  color: var(--goud-licht);
}
.footer__h--social { margin-top: var(--space-5) !important; }

.footer__social--icons {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__social--icons li { padding: 0 !important; }
.footer__social--icons a {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(201, 160, 92, .35);
  border-radius: 50%;
  color: var(--goud-warm);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.footer__social--icons a:hover {
  background: var(--goud-warm);
  color: var(--inkt);
  border-color: var(--goud-warm);
}

/* C · Prose */
.footer__prose {
  padding: var(--space-7) 0;
  border-bottom: 1px solid rgba(201, 160, 92, .15);
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.footer__prose p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.75;
  color: rgba(244, 236, 220, .88);
  margin: 0;
}

/* D · Payments (override van basis) */
.footer.footer--extended .footer__payments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: 0;
  border-bottom: 1px solid rgba(201, 160, 92, .15);
}
.paymethods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
}
.paymethods li { display: inline-flex; }
.paylogo {
  width: 44px;
  height: 28px;
  display: block;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s var(--ease-out);
}
.paylogo:hover { transform: translateY(-1px); }
@media (max-width: 720px) {
  .paylogo { width: 38px; height: 24px; }
  .paymethods { gap: 8px 10px; }
}
.footer__payments-label {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0;
}

/* E · Trust strip */
.footer__trust {
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(201, 160, 92, .15);
}
.footer__trust p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 236, 220, .72);
  margin: 0;
}
.footer__trust span { white-space: nowrap; }
@media (max-width: 720px) {
  .footer__trust p { gap: var(--space-4); }
  .footer__trust span { font-size: 10.5px; }
}

/* F · Legal (override van basis flex space-between) */
.footer.footer--extended .footer__legal {
  display: block;
  padding-top: var(--space-5);
  text-align: center;
}
.footer.footer--extended .footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}
.footer.footer--extended .footer__legal-list a {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 236, 220, .7);
}
.footer.footer--extended .footer__legal-list a:hover { color: var(--goud-warm); }
.footer__company {
  font-family: var(--font-display);
  font-size: 12.5px;
  color: rgba(244, 236, 220, .55);
  margin: 0 0 var(--space-2);
  font-style: italic;
  line-height: 1.5;
}
.footer.footer--extended .footer__copy {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--goud-warm);
  opacity: .85;
  margin: 0;
  text-transform: uppercase;
}

/* Mobile overrides voor uitgebreide footer */
@media (max-width: 720px) {
  .footer.footer--extended { padding: var(--space-7) 0 var(--space-5); }
  .footer__head { padding-bottom: var(--space-5); margin-bottom: var(--space-5); }
  .footer__prose { padding: var(--space-5) 0; }
  .footer__legal-list { gap: var(--space-3) var(--space-4); }
}

/* ============================================================
   NAV — dropdowns (hover-flyouts op desktop, hajenius.com-style)
   ============================================================ */
.topbar__list .has-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.topbar__list .has-dropdown > a {
  white-space: nowrap;
}
.topbar__list .caret {
  display: inline-block;
  vertical-align: middle;
  transition: transform .2s var(--ease-out);
  flex-shrink: 0;
  color: var(--goud-warm);
}
.topbar__list .has-dropdown:hover .caret,
.topbar__list .has-dropdown:focus-within .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #FFFFFF;
  border: 1px solid rgba(201, 160, 92, .25);
  box-shadow: 0 16px 40px rgba(14, 9, 7, .12);
  padding: var(--space-5) var(--space-6);
  min-width: 240px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s;
  z-index: 50;
}
.topbar__list .has-dropdown:hover .dropdown,
.topbar__list .has-dropdown:focus-within .dropdown {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear 0s;
}
.dropdown ul { list-style: none; padding: 0; margin: 0; }
.dropdown li { padding: 6px 0; white-space: nowrap; }
.dropdown a {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: normal;
  color: var(--inkt);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  padding: 0;
  transition: color .2s var(--ease-out);
}
.dropdown a::after { display: none; }
.dropdown a:hover { color: var(--rood-diep); }

.dropdown__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.dropdown__h {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0 0 var(--space-3);
}
.dropdown--mega {
  /* Aligned to trigger (Webshop), uitstrekkend naar rechts */
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 720px;
  max-width: min(960px, calc(100vw - 40px));
  transform: translateY(8px);
}
.topbar__list .has-dropdown:hover .dropdown--mega,
.topbar__list .has-dropdown:focus-within .dropdown--mega {
  transform: translateY(0);
}

/* Bridge the visual gap between the trigger and the panel so hover does not break */
.topbar__list .has-dropdown > a::before {
  content: "";
  position: absolute;
  inset: 100% 0 -10px 0;
  pointer-events: none;
}
.topbar__list .has-dropdown:hover > a::before,
.topbar__list .has-dropdown:focus-within > a::before {
  pointer-events: auto;
}

@media (max-width: 1023px) {
  /* on mobile, the mobile-menu overlay handles all nav — hide dropdowns */
  .topbar__list .has-dropdown .dropdown { display: none; }
  .topbar__list .caret { display: none; }
}

/* Mobile menu sub-item indent (gemarkeerd via mobile-menu__sub) */
.mobile-menu__list .mobile-menu__sub > a {
  padding-left: var(--space-5);
  font-size: 0.92em;
  color: var(--inkt);
  opacity: .85;
}


/* ============================================================
   HERO — SCHETS variant (sepia pand-schets op mahonie blad)
   ============================================================ */
/* SPLIT HERO — sepia-schets links, donker mahonie tekst-paneel rechts */
.hero--split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 82vh;
  max-height: 920px;
  background: linear-gradient(180deg, #0E0907 0%, #1A1410 100%);
  position: relative;
}
.hero__sketch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 80px) clamp(24px, 4vw, 64px);
  background:
    radial-gradient(ellipse at center, rgba(93, 58, 31, .35) 0%, rgba(14, 9, 7, .85) 75%),
    linear-gradient(135deg, #1A1410 0%, #2A1C12 100%);
  overflow: hidden;
}
.hero__sketch::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(201, 160, 92, .18);
  pointer-events: none;
}
.hero__sketch picture,
.hero__sketch img {
  display: block;
  max-width: 100%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.6)) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}

.hero__copy {
  position: relative;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(93, 58, 31, .18) 0%, rgba(14, 9, 7, 0) 65%),
    linear-gradient(135deg, #1A1410 0%, #0E0907 100%);
  padding: clamp(40px, 6vh, 80px) clamp(32px, 6vw, 96px);
  overflow: hidden;
}
.hero__copy::before {
  content: "";
  position: absolute;
  top: 32px; left: 0;
  bottom: 32px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 160, 92, .35) 30%, rgba(201, 160, 92, .35) 70%, transparent);
}
.hero__copy-inner {
  max-width: 460px;
}

@media (max-width: 1023px) {
  .hero--split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__sketch { padding: 48px 24px; min-height: 56vh; }
  .hero__copy { padding: 48px 24px; }
  .hero__copy::before { display: none; }
  .hero__copy-inner { max-width: 100%; text-align: center; margin: 0 auto; }
}

.hero__content--right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  margin-left: auto;
  max-width: 540px;
  padding-right: clamp(24px, 5vw, 80px);
  padding-left: clamp(24px, 4vw, 60px);
  padding-bottom: clamp(48px, 8vh, 96px);
  padding-top: clamp(48px, 8vh, 96px);
  position: relative;
  z-index: 2;
}

.hero__caps {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero__caps::before,
.hero__caps::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--goud-warm);
}

.hero__display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: #F4ECDC;
  margin: 0 0 var(--space-5);
}
.hero__display-em {
  font-family: 'Cormorant', 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--goud-licht);
  display: inline-block;
}

.hero__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: rgba(244, 236, 220, .82);
  margin: 0 0 var(--space-6);
  max-width: 440px;
}

.hero--schets .hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.btn-link-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--goud-warm);
  border: 0;
  border-bottom: 1px solid var(--goud-warm);
  background: transparent;
  transition: gap .25s var(--ease-out), color .25s var(--ease-out);
  text-decoration: none;
  border-radius: 0;
}
.btn-link-gold:hover {
  gap: 14px;
  color: var(--goud-licht);
  border-bottom-color: var(--goud-licht);
}

@media (max-width: 1023px) {
  .hero--split .hero__cta {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 540px) {
  .hero__caps { font-size: 10px; letter-spacing: 0.26em; }
  .hero__caps::before, .hero__caps::after { width: 12px; }
}


/* ============================================================
   MEGA PAND-LINE-ART — full-bleed editorial banner
   ============================================================ */
.pand-mega {
  position: relative;
  width: 100%;
  min-height: 100vh;
  max-height: 1100px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(93, 58, 31, .35) 0%, rgba(14, 9, 7, 0) 60%),
    linear-gradient(180deg, #1A1410 0%, #2A1C12 60%, #1A1410 100%);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(48px, 8vh, 96px) 0;
}
.pand-mega__art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}
.pand-mega__art picture,
.pand-mega__art img {
  display: block;
  width: auto;
  height: 92%;
  max-width: 86%;
  /* Invert + sepia: zwarte lijnen op witte papier → goud-cream lijnen op donker mahonie */
  filter: invert(1) sepia(0.45) hue-rotate(-12deg) saturate(0.75) brightness(0.92);
  opacity: 0.55;
  mix-blend-mode: screen;
}

.pand-mega__overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  color: var(--goud-licht);
}
.pand-mega__caps {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0 0 var(--space-4);
  position: relative;
  padding: 0 24px;
}
.pand-mega__caps::before,
.pand-mega__caps::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--goud-warm);
}
.pand-mega__caps::before { right: 100%; margin-right: 12px; }
.pand-mega__caps::after { left: 100%; margin-left: 12px; }

.pand-mega__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: #F4ECDC;
  margin: 0 0 var(--space-5);
}
.pand-mega__title em {
  font-family: 'Cormorant', 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--goud-licht);
}
.pand-mega__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: rgba(244, 236, 220, .8);
  margin: 0 0 var(--space-6);
  max-width: 560px;
}

@media (max-width: 768px) {
  .pand-mega { min-height: 80vh; }
  .pand-mega__art img { opacity: 0.35; height: 78%; }
  .pand-mega__caps::before, .pand-mega__caps::after { width: 16px; }
}


/* ============================================================
   VERKOOPPUNTEN — grid van locaties op winkel.html
   ============================================================ */
.verkooppunten-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: var(--space-7) 0 0;
}
@media (max-width: 900px) { .verkooppunten-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .verkooppunten-grid { grid-template-columns: 1fr; } }

.verkooppunt {
  position: relative;
  background: #FBF9F2;
  border: 1px solid rgba(201, 160, 92, .25);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color .25s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.verkooppunt:hover {
  border-color: var(--goud-warm);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(14, 9, 7, 0.10);
}
.verkooppunt--featured {
  background: linear-gradient(140deg, #1A1410 0%, #2A1C12 100%);
  color: var(--goud-licht);
  border-color: var(--goud-warm);
  position: relative;
}
.verkooppunt--featured::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201, 160, 92, .25);
  pointer-events: none;
}
.verkooppunt__eyebrow {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0;
}
.verkooppunt__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  margin: 0;
  color: var(--inkt);
}
.verkooppunt--featured .verkooppunt__name { color: #F4ECDC; }
.verkooppunt__city {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--grijs-warm);
  margin: 0 0 var(--space-3);
}
.verkooppunt--featured .verkooppunt__city { color: var(--goud-licht); opacity: .85; }
.verkooppunt__details {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.6;
  color: var(--inkt);
  margin: 0;
  flex: 1;
}
.verkooppunt--featured .verkooppunt__details { color: rgba(244, 236, 220, .85); }
.verkooppunt__link {
  margin-top: var(--space-4);
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rood-diep);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--goud-warm);
  align-self: flex-start;
  transition: gap .2s var(--ease-out);
}
.verkooppunt__link:hover { color: var(--inkt); }
.verkooppunt__badge {
  margin-top: var(--space-4);
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--goud-warm);
  padding: 6px 14px;
  border: 1px solid var(--goud-warm);
  border-radius: 999px;
  align-self: flex-start;
}


/* ============================================================
   MARMER TIJDLIJN — wit marmer storytelling section
   Bewust contrast met aangrenzende donkere mahonie secties
   ============================================================ */
.marmer-story {
  position: relative;
  padding: clamp(96px, 14vh, 168px) 0;
  /* Clean wit marmer met witte overlay voor maximale lichtheid */
  background:
    linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)),
    url("../img/textures/marmer-wit-helder.jpg") center/cover no-repeat,
    #FFFFFF;
  border-top: 1px solid rgba(107, 93, 79, .12);
  border-bottom: 1px solid rgba(107, 93, 79, .12);
  overflow: hidden;
  isolation: isolate;
}
.marmer-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 75%);
  pointer-events: none;
  z-index: 1;
}

.marmer-story__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-9);
  position: relative;
  z-index: 2;
}
.marmer-story__eyebrow {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rood-diep);
  margin: 0 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.marmer-story__eyebrow::before,
.marmer-story__eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--goud-warm);
}
.marmer-story__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--inkt);
  margin: 0 0 var(--space-5);
}
.marmer-story__title em {
  font-family: 'Cormorant', 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--rood-diep);
}
.marmer-story__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--grijs-warm);
  margin: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.marmer-timeline {
  position: relative;
  z-index: 2;
  list-style: none;
  padding: 0 clamp(16px, 4vw, 48px) var(--space-6);
  margin: 0 auto var(--space-9);
  max-width: 1800px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
  align-items: start;
  overflow: visible;
}
.marmer-timeline__item {
  min-width: 0;
}
.marmer-timeline__item .marmer-timeline__figure img {
  max-width: 100%;
  height: auto;
}
.marmer-timeline__year {
  font-size: clamp(20px, 2vw, 32px) !important;
}
.marmer-timeline__lead {
  font-size: clamp(13px, 0.95vw, 16px) !important;
  line-height: 1.3;
}
.marmer-timeline__text {
  font-size: clamp(11px, 0.78vw, 14px) !important;
  line-height: 1.55;
}
/* Tijdlijn animatie — kolom-cascade LINKS→RECHTS, binnen elke kolom BOVEN→ONDER */
.marmer-timeline__item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 1s cubic-bezier(.22,.61,.36,1),
    transform 1s cubic-bezier(.22,.61,.36,1);
}
.marmer-timeline__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Kolom-stagger LINKS → RECHTS */
.marmer-timeline__item:nth-child(1).is-visible { transition-delay: 0.05s; }
.marmer-timeline__item:nth-child(2).is-visible { transition-delay: 0.25s; }
.marmer-timeline__item:nth-child(3).is-visible { transition-delay: 0.45s; }
.marmer-timeline__item:nth-child(4).is-visible { transition-delay: 0.65s; }
.marmer-timeline__item:nth-child(5).is-visible { transition-delay: 0.85s; }
.marmer-timeline__item:nth-child(6).is-visible { transition-delay: 1.05s; }

/* Knoopje pop-in op de tijdlijn */
.marmer-timeline__item::before {
  opacity: 0;
  transform: scale(0);
  transition: opacity .6s ease, transform .8s cubic-bezier(.34,1.56,.64,1);
}
.marmer-timeline__item.is-visible::before {
  opacity: 1;
  transform: scale(1);
  transition-delay: inherit;
}

/* Binnen elke kolom: kinderen ook stagger BOVEN → ONDER */
.marmer-timeline__yearwrap,
.marmer-timeline__body > *,
.marmer-timeline__body figure,
.marmer-timeline__body p {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
}
.marmer-timeline__item.is-visible .marmer-timeline__yearwrap {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--col-delay, 0s) + 0.10s);
}
.marmer-timeline__item.is-visible .marmer-timeline__body > *:nth-child(1) {
  opacity: 1; transform: translateY(0); transition-delay: calc(var(--col-delay, 0s) + 0.22s);
}
.marmer-timeline__item.is-visible .marmer-timeline__body > *:nth-child(2) {
  opacity: 1; transform: translateY(0); transition-delay: calc(var(--col-delay, 0s) + 0.34s);
}
.marmer-timeline__item.is-visible .marmer-timeline__body > *:nth-child(3) {
  opacity: 1; transform: translateY(0); transition-delay: calc(var(--col-delay, 0s) + 0.46s);
}
.marmer-timeline__item.is-visible .marmer-timeline__body > *:nth-child(4) {
  opacity: 1; transform: translateY(0); transition-delay: calc(var(--col-delay, 0s) + 0.58s);
}
.marmer-timeline__item:nth-child(1) { --col-delay: 0.05s; }
.marmer-timeline__item:nth-child(2) { --col-delay: 0.25s; }
.marmer-timeline__item:nth-child(3) { --col-delay: 0.45s; }
.marmer-timeline__item:nth-child(4) { --col-delay: 0.65s; }
.marmer-timeline__item:nth-child(5) { --col-delay: 0.85s; }
.marmer-timeline__item:nth-child(6) { --col-delay: 1.05s; }

@media (prefers-reduced-motion: reduce) {
  .marmer-timeline__item,
  .marmer-timeline__item::before,
  .marmer-timeline__yearwrap,
  .marmer-timeline__body > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.marmer-timeline::before {
  /* Horizontale gouden hairline */
  content: "";
  position: absolute;
  left: clamp(16px, 4vw, 48px);
  right: clamp(16px, 4vw, 48px);
  top: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--goud-warm) 6%, var(--goud-warm) 94%, transparent);
  z-index: 0;
}
.marmer-timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-6);
}

.marmer-timeline__item::before {
  /* Goud-knoop op de horizontale tijdlijn */
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--goud-warm);
  border: 2px solid #FDFAF1;
  z-index: 1;
}
/* Jaartal in roman bold */
.marmer-timeline__year {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 36px);
  color: var(--rood-diep);
  line-height: 1;
  text-align: left;
  padding-left: var(--space-4);
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
  align-self: start;
}
.marmer-timeline__year::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--goud-warm);
  margin: 8px 0 0 0;
}
.marmer-timeline__text {
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: var(--inkt);
  margin: 0;
  padding-left: var(--space-4);
}
/* Italic em = subtiel rood accent */
.marmer-timeline__text em {
  font-style: italic;
  color: var(--rood-diep);
}
/* Sterk-accent woorden: rood + bold (gebruik <strong>) */
.marmer-timeline__text strong {
  font-weight: 700;
  color: var(--inkt);
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  .marmer-timeline__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.marmer-story__quote {
  position: relative;
  z-index: 2;
  font-family: 'Cormorant', 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  text-align: center;
  color: var(--grijs-warm);
  max-width: 640px;
  margin: var(--space-7) auto 0;
}
.marmer-story__quote em { color: var(--inkt); }
.marmer-story__cite {
  display: block;
  font-family: var(--font-sc);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin-top: var(--space-3);
}

.marmer-story__cta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

@media (max-width: 768px) {
  .marmer-timeline {
    grid-auto-columns: minmax(220px, 80%);
    gap: var(--space-3);
    padding: 0 var(--space-3) var(--space-5);
  }
  .marmer-timeline::before { left: var(--space-3); right: var(--space-3); }
  .marmer-timeline__year { font-size: clamp(22px, 6vw, 28px); }
  .marmer-story__eyebrow::before,
  .marmer-story__eyebrow::after { width: 16px; }
}


/* ============================================================
   ATELIER FOLIO — Architecten-triptiek
   Drie modeltekeningen van het pand uit verschillende perspectieven.
   Dit is de "stille variant" van de Seedance intro-video: drie
   keyframes naast elkaar, alsof de architect zijn portfolio opent.
   ============================================================ */
.atelier-folio {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(93, 58, 31, .35) 0%, rgba(14, 9, 7, 0) 55%),
    linear-gradient(180deg, #0E0907 0%, #1A1410 55%, #0E0907 100%);
  padding: clamp(72px, 11vh, 132px) 0 clamp(64px, 9vh, 112px);
  overflow: hidden;
  border-top: 1px solid rgba(201, 160, 92, .18);
  border-bottom: 1px solid rgba(201, 160, 92, .18);
  isolation: isolate;
}

/* Subtle architect-paper texture watermark, very low opacity */
.atelier-folio::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(201,160,92,.025) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(201,160,92,.025) 0 1px, transparent 1px 32px);
  z-index: 0;
  pointer-events: none;
}

.atelier-folio__head {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-8);
  padding: 0 var(--space-5);
}

.atelier-folio__eyebrow {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.atelier-folio__eyebrow::before,
.atelier-folio__eyebrow::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--goud-warm), transparent);
}

.atelier-folio__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.012em;
  color: #F4ECDC;
  margin: 0 0 var(--space-4);
}
.atelier-folio__title em {
  font-style: italic;
  color: var(--goud-licht);
}

.atelier-folio__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: rgba(244, 236, 220, .8);
  margin: 0;
}

/* Triptiek-grid */
.atelier-folio__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: var(--space-5);
  padding: 0 var(--gutter);
  max-width: 1480px;
  margin: 0 auto;
  align-items: stretch;
}

.atelier-folio__plate {
  position: relative;
  background: linear-gradient(160deg, #1A1410 0%, #0E0907 100%);
  border: 1px solid rgba(201, 160, 92, .22);
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: border-color .35s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.atelier-folio__plate:hover {
  border-color: var(--goud-warm);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
}
.atelier-folio__plate--center {
  background: linear-gradient(160deg, #251911 0%, #150E0A 100%);
  border-color: rgba(201, 160, 92, .35);
}

/* Inner gold double-rule frame */
.atelier-folio__plate::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201, 160, 92, .14);
  pointer-events: none;
}

/* Corner ornaments — small Art Deco angles, top-left and bottom-right */
.atelier-folio__plate::after {
  content: "";
  position: absolute;
  top: 14px; left: 14px;
  width: 28px; height: 28px;
  border-top: 1px solid var(--goud-warm);
  border-left: 1px solid var(--goud-warm);
  opacity: .6;
  pointer-events: none;
}
.atelier-folio__plate-corner {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 28px; height: 28px;
  border-bottom: 1px solid var(--goud-warm);
  border-right: 1px solid var(--goud-warm);
  opacity: .6;
  pointer-events: none;
}

.atelier-folio__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.atelier-folio__plate--center .atelier-folio__media {
  aspect-ratio: 16 / 11;
}
.atelier-folio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.atelier-folio__plate:hover .atelier-folio__media img {
  transform: scale(1.025);
}

.atelier-folio__caption {
  padding: 4px 8px 14px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.atelier-folio__num {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0;
}
.atelier-folio__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  color: #F4ECDC;
  margin: 0;
}
.atelier-folio__note {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244, 236, 220, .65);
  margin: 0;
}

/* Onder de triptiek: dunne goud-rule + atelier-stempel */
.atelier-folio__signature {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: 0 var(--space-5);
}
.atelier-folio__rule {
  width: 100%;
  max-width: 560px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 160, 92, .35) 20%, rgba(201, 160, 92, .35) 80%, transparent);
}
.atelier-folio__stamp {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.atelier-folio__stamp em {
  font-style: italic;
  color: var(--goud-licht);
  text-transform: none;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.02em;
}

@media (max-width: 1023px) {
  .atelier-folio__grid {
    grid-template-columns: 1fr 1fr;
  }
  .atelier-folio__plate--center { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .atelier-folio { padding: var(--space-8) 0; }
  .atelier-folio__grid { grid-template-columns: 1fr; padding: 0 var(--space-5); }
  .atelier-folio__plate--center { grid-column: auto; }
  .atelier-folio__eyebrow::before,
  .atelier-folio__eyebrow::after { width: 18px; }
}


/* ============================================================
   HERO — VIDEO variant (Seedance 2.0 line-draw, full-bleed header)
   Vervangt de oude hero--split. Video is achtergrond, copy ligt
   onder-links overlay-ed, met gouden Art-Deco hoek-ornamenten.
   ============================================================ */
.hero--video {
  position: relative;
  width: 100%;
  min-height: 92vh;
  max-height: 1080px;
  display: flex;
  align-items: center; /* centraal voor het logo */
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: #0A0604;
}

/* Op video-hero exact in viewport laten passen, rekening houdend met promo+topbar */
.hero--video {
  min-height: calc(100vh - 128px);
}

.hero-video__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video__bg video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  background: #0A0604;
}

/* Scrim — lichte rechtsonder-vignet zodat de video volledig zichtbaar is
   en de corner-mark rechtsonder leesbaar blijft */
.hero-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 85% 90%, rgba(8, 5, 3, 0.72) 0%, rgba(8, 5, 3, 0.32) 38%, rgba(8, 5, 3, 0) 65%),
    linear-gradient(180deg, rgba(8, 5, 3, 0) 60%, rgba(8, 5, 3, 0.28) 100%);
  pointer-events: none;
}

/* Hoek-ornamenten */
.hero-video__corner {
  position: absolute;
  width: 56px;
  height: 56px;
  color: var(--goud-warm);
  opacity: .75;
  z-index: 3;
  pointer-events: none;
}
.hero-video__corner--tl { top: 36px; left: 36px; }
.hero-video__corner--tr { top: 36px; right: 36px; transform: scaleX(-1); }
.hero-video__corner--bl { bottom: 36px; left: 36px; transform: scaleY(-1); }
.hero-video__corner--br { bottom: 36px; right: 36px; transform: scale(-1, -1); }

/* Copy onder-links (legacy positioning, behouden voor evt. andere pagina's) */
.hero-video__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 0 var(--gutter) clamp(64px, 10vh, 112px);
  color: var(--goud-licht);
  text-align: left;
}

/* LOGO-VARIANT: centrale hero, gouden 200-jaar wapen, met CTA's onderaan */
.hero-video__content--logo {
  text-align: center;
  max-width: 720px;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* CORNER-VARIANT: klein corner-mark rechtsonder — wapen + signature + CTA's */
.hero-video__content--corner {
  position: absolute;
  right: clamp(28px, 5vw, 72px);
  bottom: clamp(32px, 6vh, 80px);
  z-index: 4;
  max-width: 360px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: clamp(10px, 1.4vh, 18px);
}
.hero-video__content--corner .hero-video__logo-wrap {
  margin: 0;
}
.hero-video__content--corner .hero-video__logo {
  width: clamp(110px, 11vw, 150px);
  filter: drop-shadow(0 3px 18px rgba(0, 0, 0, 0.55))
          drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.hero-video__content--corner .hero-video__signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.4;
  color: rgba(244, 236, 220, 0.86);
  margin: 0;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.hero-video__content--corner .hero-video__cta {
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hero-video__content--corner .btn {
  font-size: 12px;
  letter-spacing: 0.16em;
  padding-block: 10px;
}
@media (max-width: 720px) {
  .hero-video__content--corner {
    right: var(--gutter-m);
    bottom: clamp(24px, 4vh, 48px);
    max-width: calc(100% - 2 * var(--gutter-m));
    align-items: flex-end;
  }
  .hero-video__content--corner .hero-video__logo { width: 96px; }
  .hero-video__content--corner .hero-video__cta { gap: 8px; }
}

.hero-video__logo-wrap {
  margin: 0 0 clamp(28px, 5vh, 56px);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}
.hero-video__logo {
  width: clamp(280px, 38vw, 520px);
  height: auto;
  display: block;
  /* Verbeter de gouden gloed: subtiele filter voor levendigheid op donker */
  filter: drop-shadow(0 4px 32px rgba(0, 0, 0, 0.55))
          drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
.hero-video__cta--center {
  justify-content: center;
}

.hero-video__eyebrow {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-video__eyebrow::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--goud-warm);
}

.hero-video__title {
  font-family: var(--font-display);
  /* Regel 1: zwaarder (medium-bold) ivoor — geeft eyebrow-weight aan datum-claim */
  font-weight: 600;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.018em;
  color: #FAF2DE;
  margin: 0 0 var(--space-5);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.65);
}
/* Regel 2: dun italic — sterk gewichts-contrast met regel 1, gouden warmte */
.hero-video__title em {
  display: block;
  margin-top: 0.06em;
  font-family: 'Cormorant', 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.05em;
  color: var(--goud-licht);
  letter-spacing: -0.01em;
}

.hero-video__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  color: rgba(244, 236, 220, .9);
  margin: 0 0 var(--space-6);
  max-width: 520px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hero-video__cta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* Scroll-cue — subtiele gouden lijn die naar beneden wijst */
.hero-video__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, rgba(201, 160, 92, 0) 0%, var(--goud-warm) 100%);
  pointer-events: none;
}
.hero-video__scroll span {
  position: absolute;
  top: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--goud-warm);
  border-bottom: 1px solid var(--goud-warm);
  transform: rotate(45deg);
  animation: hero-scroll-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes hero-scroll-pulse {
  0%, 100% { opacity: 0.3; transform: translateY(0) rotate(45deg); }
  50% { opacity: 1; transform: translateY(8px) rotate(45deg); }
}

@media (max-width: 1023px) {
  .hero--video { min-height: 78vh; }
  .hero-video__corner { width: 36px; height: 36px; }
  .hero-video__corner--tl { top: 20px; left: 20px; }
  .hero-video__corner--tr { top: 20px; right: 20px; }
  .hero-video__corner--bl { bottom: 20px; left: 20px; }
  .hero-video__corner--br { bottom: 20px; right: 20px; }
  .hero-video__content { padding: 0 var(--gutter-m) clamp(56px, 8vh, 88px); }
}
@media (max-width: 600px) {
  .hero-video__cta { flex-direction: column; align-items: flex-start; }
  .hero-video__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video__scroll span { animation: none; }
}


/* ============================================================
   PAND-MEGA — Seedance 2.0 intro-video (gold-line magic reveal)
   10s, 1080p, autoplay+loop+muted. Eindframe gebruikt als poster zodat
   de gebruiker meteen het rijke totaalbeeld ziet bij eerste paint.
   ============================================================ */
.pand-mega__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.pand-mega__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* De oude static line-art image hide-en als de video aanwezig is */
.pand-mega:has(.pand-mega__video) .pand-mega__art { display: none; }

/* Subtiele vignet/scrim BOVENOP de video voor leesbare titel-overlay */
.pand-mega__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(14, 9, 7, 0) 35%, rgba(14, 9, 7, 0.45) 75%, rgba(14, 9, 7, 0.7) 100%),
    linear-gradient(180deg, rgba(14, 9, 7, 0.25) 0%, rgba(14, 9, 7, 0) 35%, rgba(14, 9, 7, 0) 65%, rgba(14, 9, 7, 0.4) 100%);
  pointer-events: none;
}

/* Reduced-motion: video pauzen en eindframe als statisch beeld tonen */
@media (prefers-reduced-motion: reduce) {
  .pand-mega__video video {
    /* Browser respecteert autoplay niet onder reduced-motion;
       de poster (eindframe) wordt dan getoond als statisch beeld. */
  }
}


/* ============================================================
   PAND-MEGA — animated SVG line-art (drawing-itself) overlay
   Fallback wanneer de video niet kan worden afgespeeld:
   gouden lijnen "tekenen" zichzelf bij scroll-into-view, eenmalig.
   ============================================================ */
.pand-mega__lineart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}
.pand-mega__lineart svg {
  width: clamp(360px, 60%, 760px);
  height: auto;
  max-height: 86%;
  opacity: 0.85;
  filter: drop-shadow(0 0 18px rgba(201, 160, 92, .12));
}
/* SVG paths get stroke-dashoffset animation when in view */
.pand-mega__lineart svg path,
.pand-mega__lineart svg line,
.pand-mega__lineart svg rect,
.pand-mega__lineart svg circle {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 2.4s var(--ease-out);
}
.pand-mega.is-drawing .pand-mega__lineart svg path,
.pand-mega.is-drawing .pand-mega__lineart svg line,
.pand-mega.is-drawing .pand-mega__lineart svg rect,
.pand-mega.is-drawing .pand-mega__lineart svg circle {
  stroke-dashoffset: 0;
}
/* Gestaffelde delays — geeft het effect dat lijnen één voor één "ontstaan" */
.pand-mega.is-drawing #gevel line,
.pand-mega.is-drawing #gevel path { transition-delay: 0.05s; }
.pand-mega.is-drawing #verdieping-boven * { transition-delay: 0.45s; }
.pand-mega.is-drawing #dak * { transition-delay: 0.9s; }
.pand-mega.is-drawing #dakkapellen * { transition-delay: 1.05s; }
.pand-mega.is-drawing #begane-grond * { transition-delay: 1.2s; }
.pand-mega.is-drawing #pilaren * { transition-delay: 1.35s; }
.pand-mega.is-drawing #ingang * { transition-delay: 1.5s; }
.pand-mega.is-drawing #lettering * { transition-delay: 1.85s; }
.pand-mega.is-drawing #plaquette * { transition-delay: 2.0s; }

@media (prefers-reduced-motion: reduce) {
  .pand-mega__lineart svg path,
  .pand-mega__lineart svg line,
  .pand-mega__lineart svg rect,
  .pand-mega__lineart svg circle {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* Pand-mega: gold corner-ornaments at all 4 corners */
.pand-mega__corner {
  position: absolute;
  width: 56px;
  height: 56px;
  z-index: 3;
  color: var(--goud-warm);
  opacity: .55;
  pointer-events: none;
}
.pand-mega__corner--tl { top: 32px; left: 32px; }
.pand-mega__corner--tr { top: 32px; right: 32px; transform: scaleX(-1); }
.pand-mega__corner--bl { bottom: 32px; left: 32px; transform: scaleY(-1); }
.pand-mega__corner--br { bottom: 32px; right: 32px; transform: scale(-1, -1); }

/* Pand-mega: extra wapen-stamp boven titel */
.pand-mega__seal {
  width: 56px;
  height: 56px;
  color: var(--goud-warm);
  margin: 0 auto var(--space-4);
  opacity: .85;
}
.pand-mega__seal svg { width: 100%; height: 100%; }

@media (max-width: 768px) {
  .pand-mega__corner { width: 32px; height: 32px; }
  .pand-mega__corner--tl { top: 16px; left: 16px; }
  .pand-mega__corner--tr { top: 16px; right: 16px; }
  .pand-mega__corner--bl { bottom: 16px; left: 16px; }
  .pand-mega__corner--br { bottom: 16px; right: 16px; }
}


/* ============================================================
   HERO — verfijning: dubbele goud border + hoek-ornamenten
   Bovenop bestaande .hero--split styling, zonder die te breken.
   ============================================================ */
.hero--split .hero__corner {
  position: absolute;
  width: 48px;
  height: 48px;
  color: var(--goud-warm);
  opacity: .7;
  z-index: 3;
  pointer-events: none;
}
.hero--split .hero__corner--tl { top: 40px; left: 40px; }
.hero--split .hero__corner--tr { top: 40px; right: 40px; transform: scaleX(-1); }
.hero--split .hero__corner--bl { bottom: 40px; left: 40px; transform: scaleY(-1); }
.hero--split .hero__corner--br { bottom: 40px; right: 40px; transform: scale(-1, -1); }

/* Inner sketch-frame: dubbele lijn ipv enkele */
.hero__sketch::after {
  content: "";
  position: absolute;
  inset: 32px;
  border: 1px solid rgba(201, 160, 92, .08);
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero--split .hero__corner { width: 28px; height: 28px; }
  .hero--split .hero__corner--tl { top: 16px; left: 16px; }
  .hero--split .hero__corner--tr { top: 16px; right: 16px; }
  .hero--split .hero__corner--bl { bottom: 16px; left: 16px; }
  .hero--split .hero__corner--br { bottom: 16px; right: 16px; }
  .hero__sketch::after { inset: 16px; }
}


/* ============================================================
   AGE GATE — 18+ verificatie modal, stijlvol gehouden
   Verschijnt eenmaal per sessie via JS
   ============================================================ */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter-m);
}
.age-gate[hidden] { display: none; }

.age-gate__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 3, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.age-gate__card {
  position: relative;
  z-index: 1;
  width: min(540px, 100%);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(93, 58, 31, 0.35) 0%, rgba(14, 9, 7, 0) 50%),
    linear-gradient(180deg, #1A1410 0%, #0E0907 100%);
  border: 1px solid rgba(201, 160, 92, 0.35);
  padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
  text-align: center;
  color: var(--goud-licht);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
/* Dubbel goud-frame inside */
.age-gate__card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 160, 92, 0.18);
  pointer-events: none;
}

.age-gate__seal {
  margin: 0 auto var(--space-5);
  width: 160px;
  display: block;
}
.age-gate__seal img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}

.age-gate__eyebrow {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0 0 var(--space-4);
}

.age-gate__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #FAF2DE;
  margin: 0 0 var(--space-5);
}
.age-gate__title em {
  font-family: 'Cormorant', 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--goud-licht);
}

.age-gate__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(244, 236, 220, 0.78);
  margin: 0 0 var(--space-6);
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.age-gate__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.age-gate__cta .btn-solid-dark {
  background: var(--goud-warm);
  color: var(--inkt);
  border: 1px solid var(--goud-warm);
  padding: 14px 32px;
  letter-spacing: 0.12em;
  font-family: var(--font-sc);
  font-size: 12px;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}
.age-gate__cta .btn-solid-dark:hover {
  background: var(--goud-licht);
}

.age-gate__legal {
  font-family: var(--font-sc);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 236, 220, 0.4);
  margin: 0;
  border-top: 1px solid rgba(201, 160, 92, 0.18);
  padding-top: var(--space-4);
}

@media (max-width: 540px) {
  .age-gate__card { padding: 32px 24px; }
}


/* ============================================================
   FLOURISH DIVIDER — Higgsfield render: gouden Art Deco scheider
   op donker mahonie. Zit tussen secties als visueel ritme-element.
   ============================================================ */
.flourish-divider {
  position: relative;
  width: 100%;
  height: clamp(120px, 18vh, 220px);
  background:
    url("../img/textures/gold-flourish-ornament.jpg") center/cover no-repeat,
    #0E0907;
  border-top: 1px solid rgba(201, 160, 92, .15);
  border-bottom: 1px solid rgba(201, 160, 92, .15);
  overflow: hidden;
}


/* ============================================================
   ATELIER STAMP — kleine signatuur-strip onder mega-banners
   "Getekend door de gebroeders Van Gendt · Anno MCMXV"
   ============================================================ */
.atelier-stamp {
  background: #0A0604;
  border-top: 1px solid rgba(201, 160, 92, .18);
  border-bottom: 1px solid rgba(201, 160, 92, .18);
  padding: var(--space-5) 0;
  text-align: center;
}
.atelier-stamp__inner {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--goud-warm);
}
.atelier-stamp__inner em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--goud-licht);
}
.atelier-stamp__inner::before,
.atelier-stamp__inner::after {
  content: "";
  display: inline-block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--goud-warm) 50%, transparent);
}
@media (max-width: 600px) {
  .atelier-stamp__inner {
    flex-direction: column;
    gap: 6px;
  }
  .atelier-stamp__inner::before,
  .atelier-stamp__inner::after { width: 80px; }
}

/* ============================================================
   MONOGRAM — Het Hajenius logo, GROOT in goud op donker mahonie
   SVG-lijnen tekenen zichzelf bij scroll-into-view
   ============================================================ */
.monogram {
  position: relative;
  padding: clamp(96px, 14vh, 168px) 0 clamp(72px, 10vh, 120px);
  background: #100C0A;
  color: var(--goud-warm);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.monogram__bg {
  position: absolute; inset: 0;
  background:
    url("../img/textures/mahonie-pano.jpg") center/cover no-repeat,
    #1A1410;
  opacity: 0.55;
  z-index: 0;
}
.monogram__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(201, 160, 92, 0.12) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}
.monogram__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.monogram__eyebrow {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--goud-warm);
  text-transform: uppercase;
  margin: 0 0 var(--space-7);
  opacity: 0.85;
}
.monogram__wapen {
  width: clamp(280px, 50vw, 580px);
  aspect-ratio: 1 / 1;
  margin: 0 auto var(--space-7);
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.4)) drop-shadow(0 0 22px rgba(201,160,92,.18));
}
.monogram__wapen svg { width: 100%; height: 100%; display: block; }

/* Lijn-tekenen animatie — pad geanimeerd via dasharray */
.monogram__wapen .mono-line {
  stroke-dasharray: var(--mono-len, 1200);
  stroke-dashoffset: var(--mono-len, 1200);
  fill: none;
}
.monogram__wapen .mono-text { opacity: 0; }

.monogram.is-drawing .mono-line {
  animation: monoDraw 2.4s cubic-bezier(0.55, 0.1, 0.25, 1) forwards;
  animation-delay: var(--mono-delay, 0s);
}
.monogram.is-drawing .mono-text {
  animation: monoFade 0.8s ease-out forwards;
  animation-delay: var(--mono-delay, 0s);
}
@keyframes monoDraw {
  0%   { stroke-dashoffset: var(--mono-len, 1200); }
  100% { stroke-dashoffset: 0; }
}
@keyframes monoFade {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
.monogram__wapen .mono-text { transform-origin: center; transform-box: fill-box; }

.monogram__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  margin: 0;
  color: #F4ECDC;
  letter-spacing: -0.012em;
}
.monogram__title em {
  font-family: 'Cormorant', 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--goud-licht);
}
.monogram__sub {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 19px);
  color: rgba(244, 236, 220, 0.78);
  margin: var(--space-5) 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.monogram__sub strong { color: var(--goud-licht); font-weight: 600; }
.monogram__sub em { color: var(--goud-warm); font-style: italic; }
.monogram__dot { color: var(--goud-warm); opacity: 0.55; }
.monogram__rule {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--goud-warm), transparent);
  margin: var(--space-7) auto 0;
}

@media (prefers-reduced-motion: reduce) {
  .monogram__wapen .mono-line { stroke-dashoffset: 0; }
  .monogram__wapen .mono-text { opacity: 1; }
}

@media (max-width: 600px) {
  .monogram__sub { flex-direction: column; gap: 6px; }
  .monogram__dot { display: none; }
}


/* ============================================================
   TIMELINE FIGUREN — historische foto's binnen tijdlijn
   ============================================================ */
.marmer-timeline__yearwrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-right: 0;
  padding-left: var(--space-4);
}
.marmer-timeline__tag {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--goud-warm);
  text-transform: uppercase;
  text-align: left;
  font-weight: 600;
}
.marmer-timeline__body {
  padding-left: var(--space-4);
}
.marmer-timeline__lead {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.25;
  font-weight: 500;
  color: var(--inkt);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
.marmer-timeline__lead em {
  font-style: italic;
  color: var(--rood-diep);
}
.marmer-timeline__lead--xl { font-size: clamp(28px, 2.6vw, 38px); }

.marmer-timeline__text .hl-name {
  font-weight: 700;
  color: var(--inkt);
  font-style: normal;
  border-bottom: 1px dotted var(--goud-warm);
  padding-bottom: 1px;
}
.marmer-timeline__text .hl-rood {
  color: var(--rood-diep);
  font-weight: 600;
  font-style: italic;
}
.marmer-timeline__text .quote {
  display: inline;
  color: var(--inkt);
  font-style: italic;
  border-left: 2px solid var(--goud-warm);
  padding-left: 10px;
  margin-left: 6px;
}

.marmer-timeline__year--xl {
  font-size: clamp(40px, 6vw, 72px) !important;
  color: var(--rood-donker) !important;
}

.marmer-timeline__figure {
  margin: var(--space-5) 0 0;
  padding: 8px;
  background: #FDFAF1;
  border: 1px solid rgba(201, 160, 92, .25);
  box-shadow:
    0 2px 4px rgba(14, 9, 7, .08),
    0 12px 28px rgba(14, 9, 7, .14);
  position: relative;
  display: inline-block;
  max-width: 100%;
  /* Slight rotate for "polaroid in albeem" feel — subtle */
  transform: rotate(-0.8deg);
  transition: transform .5s var(--ease-out), box-shadow .4s var(--ease-out);
}
.marmer-timeline__figure:hover {
  transform: rotate(0) translateY(-2px) scale(1.01);
  box-shadow:
    0 4px 8px rgba(14, 9, 7, .12),
    0 18px 40px rgba(14, 9, 7, .2);
}
.marmer-timeline__figure:nth-of-type(even) {
  transform: rotate(0.6deg);
}
.marmer-timeline__figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.06) saturate(0.92) contrast(1.04);
}
.marmer-timeline__figure figcaption {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.35;
  font-style: italic;
  color: var(--grijs-warm);
  text-align: center;
  padding: 0 4px;
}
.marmer-timeline__figure figcaption em {
  color: var(--rood-diep);
  font-style: italic;
}

.marmer-timeline__figure--portrait { max-width: 100%; float: none; margin-left: 0; }
.marmer-timeline__figure--landscape { max-width: 100%; }
.marmer-timeline__figure--wide { max-width: 100%; margin-top: var(--space-3); }
.marmer-timeline__item .marmer-timeline__figure { transform: none; }
.marmer-timeline__item .marmer-timeline__figure:hover { transform: translateY(-2px); }

@media (max-width: 768px) {
  .marmer-timeline__figure--portrait { float: none; margin-left: 0; max-width: 60%; }
  .marmer-timeline__figure--landscape,
  .marmer-timeline__figure--wide { max-width: 100%; }
  .marmer-timeline__yearwrap { align-items: flex-start; }
  .marmer-timeline__tag { text-align: left; }
  .marmer-timeline__body { padding-left: 0; }
}

/* Quote — mooier opmaken met grote opening-quote */
.marmer-story__quote-mark {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 80px;
  line-height: 0.4;
  color: var(--goud-warm);
  margin-right: 4px;
  vertical-align: -22px;
}

/* Item finale — extra emphasis op 2026 */
.marmer-timeline__item--finale .marmer-timeline__year {
  text-shadow: 0 0 22px rgba(184, 40, 40, .25);
}


/* ============================================================
   VITRINE — Premium accessoires showcase op onyx
   Asymmetrische editorial-layout: groot hero-tile links, drie kleine rechts
   ============================================================ */
.vitrine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  margin-bottom: var(--space-7);
  max-width: min(1240px, 92vw);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#vitrine .container { max-width: min(1320px, 92vw); }
.vitrine-tile {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.vitrine-tile__media {
  background: transparent;
  border: 0;
  margin-bottom: 20px;
  line-height: 0;
  /* geen aspect-ratio, geen overflow, geen cropping — image bepaalt eigen hoogte */
}
.vitrine-tile__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.vitrine-tile__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vitrine-tile__eyebrow {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--goud-warm);
  text-transform: uppercase;
  margin: 0;
}
.vitrine-tile__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  color: rgba(244, 236, 220, 0.92);
  margin: 0;
  letter-spacing: 0;
}
.vitrine-tile__price {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--goud-licht);
  margin: 2px 0 0;
  letter-spacing: 0.01em;
}
@media (max-width: 900px) {
  .vitrine-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 480px) {
  .vitrine-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HERITAGE-STRIP — engraved crest in plaats van emoji
   ============================================================ */
.heritage-strip__crest {
  width: 44px;
  height: 44px;
  margin-right: var(--space-4);
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(201, 160, 92, .35));
}
.heritage-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.heritage-strip__text strong {
  color: var(--goud-licht);
  font-weight: 600;
  font-style: normal;
}

/* ============================================================
   SFEER-DIVIDER VELVET — donker rood velvet met engraved goud-ornament
   ============================================================ */
.sfeer-divider--velvet {
  position: relative;
  padding: clamp(96px, 14vh, 168px) 0;
  background:
    radial-gradient(ellipse at 50% 50%, #6F1414 0%, #4A0D0D 80%),
    url("../img/textures/rood-satin.jpg") center/cover no-repeat;
  color: var(--goud-warm);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.sfeer-divider--velvet::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/textures/rood-satin.jpg") center/cover no-repeat;
  opacity: 0.32;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.sfeer-divider--velvet::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201, 160, 92, .08) 0%, rgba(0,0,0,0) 50%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
  z-index: 1;
}
.sfeer-divider__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sfeer-divider--velvet .sfeer-divider__ornament {
  width: clamp(220px, 30vw, 320px);
  margin: 0 auto var(--space-5);
  filter: drop-shadow(0 0 14px rgba(201, 160, 92, .35));
}
.sfeer-divider--velvet .sfeer-divider__ornament svg { width: 100%; height: auto; display: block; }
.sfeer-divider--velvet .sfeer-divider__eyebrow {
  color: var(--goud-warm);
  font-size: 12px;
  letter-spacing: 0.34em;
  font-family: var(--font-sc);
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 var(--space-3);
}
.sfeer-divider--velvet .sfeer-divider__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  color: #FFF4DA;
  margin: 0 0 var(--space-4);
}
.sfeer-divider--velvet .sfeer-divider__title em {
  font-style: italic;
  color: var(--goud-licht);
}
.sfeer-divider--velvet .sfeer-divider__title strong {
  font-weight: 600;
  color: var(--goud-licht);
}
.sfeer-divider--velvet .sfeer-divider__line {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 19px);
  color: rgba(245, 218, 167, 0.85);
  margin: 0;
  max-width: 580px;
  font-style: normal;
}
.sfeer-divider--velvet .sfeer-divider__line em {
  font-style: italic;
  color: #F2D58F;
}
.sfeer-divider--velvet .sfeer-divider__line strong { color: #F2D58F; font-weight: 600; }


/* ============================================================
   FOOTER ALL-BLACK — onyx, geen mahonie meer
   ============================================================ */
.footer--extended {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 160, 92, .06) 0%, rgba(0,0,0,0) 50%),
    linear-gradient(180deg, #08060A 0%, #050304 100%),
    #050304;
  color: rgba(244, 236, 220, 0.78);
  position: relative;
  isolation: isolate;
}
.footer--extended::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/textures/onyx-zwart-pano.jpg") center/cover no-repeat;
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.footer--extended > .container { position: relative; z-index: 1; }
.footer--extended .footer__h,
.footer--extended .footer__h--social { color: var(--goud-warm); border-bottom-color: rgba(201, 160, 92, .25); }
.footer--extended a { color: rgba(244, 236, 220, 0.82); }
.footer--extended a:hover { color: var(--goud-licht); }
.footer--extended .footer__tagline em { color: #F2D58F; }
.footer--extended .footer__copy,
.footer--extended .footer__company { color: rgba(244, 236, 220, 0.5); }
.footer--extended .footer__trust span,
.footer--extended .footer__warrant { color: rgba(201, 160, 92, .85); }
.footer--extended .footer__form button {
  background: var(--goud-warm);
  color: #050304;
  border: none;
}
.footer--extended .footer__form button:hover { background: var(--goud-licht); }
.footer--extended .footer__form input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(201, 160, 92, .25);
  color: var(--creme);
}
.footer--extended .footer__form input::placeholder { color: rgba(244, 236, 220, 0.45); }
.footer--extended .footer__legal-list a { color: rgba(244, 236, 220, 0.55); }
.footer--extended .footer__prose p { color: rgba(244, 236, 220, 0.68); }


/* ============================================================
   EYEBROW met gold-rule decoratie (op licht en op donker)
   ============================================================ */
.eyebrow--gold {
  color: var(--goud-warm);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sc);
  letter-spacing: 0.28em;
}
.eyebrow--gold::before,
.eyebrow--gold::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--goud-warm), transparent);
}


/* ============================================================
   MARMER TIMELINE — Layout aanpassing met figuren naast/in body
   ============================================================ */
.marmer-timeline__item {
  grid-template-columns: clamp(120px, 14%, 180px) 1fr;
  gap: var(--space-7);
  align-items: stretch;
  position: relative;
}
.marmer-timeline__item::before {
  /* Goud-knoop op de tijdlijn — groter, met halo */
  width: 14px;
  height: 14px;
  background: var(--goud-warm);
  border: 3px solid #FDFAF1;
  box-shadow:
    0 0 0 1px rgba(201, 160, 92, .45),
    0 0 18px rgba(201, 160, 92, .35);
  top: 16px;
  left: clamp(118px, 14%, 178px);
}
@media (max-width: 768px) {
  .marmer-timeline__item {
    grid-template-columns: 1fr;
  }
  .marmer-timeline__item::before { left: 6px; top: 14px; }
}


/* ============================================================
   PERS-GRID — editorial pull-quotes met gold-rules
   ============================================================ */
.pers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7);
  margin: var(--space-9) 0 var(--space-8);
  position: relative;
  z-index: 2;
}
.pers-quote {
  position: relative;
  margin: 0;
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(201, 160, 92, .28);
  text-align: left;
  transition: border-color .3s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  isolation: isolate;
}
.pers-quote:hover {
  border-color: var(--goud-warm);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(14, 9, 7, .10);
}
.pers-quote__mark {
  position: absolute;
  top: -8px;
  left: 18px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 90px;
  line-height: 0.6;
  color: var(--goud-warm);
  opacity: 0.55;
  z-index: -1;
}
.pers-quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.3;
  color: var(--inkt);
  letter-spacing: -0.005em;
}
.pers-quote__text em {
  font-family: 'Cormorant', 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--rood-diep);
}
.pers-quote__text strong {
  font-weight: 700;
  color: var(--inkt);
}
.pers-quote__src {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--goud-warm);
  text-transform: uppercase;
  font-weight: 600;
}
.pers-quote--lg {
  grid-column: 1 / -1;
  padding: var(--space-8) var(--space-7) var(--space-7);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 252, 244, 0.9), rgba(255, 252, 244, 0.55) 60%);
  text-align: center;
}
.pers-quote--lg .pers-quote__text { font-size: clamp(28px, 3vw, 44px); }
.pers-quote--lg .pers-quote__mark {
  left: 50%; transform: translateX(-50%);
  top: -10px; font-size: 120px;
}

.pers-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
  position: relative;
  z-index: 2;
}

@media (max-width: 720px) {
  .pers-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .pers-quote--lg { padding: var(--space-7) var(--space-5); }
}


/* ============================================================
   VACATURE-SPLIT — image links, dark mahonie body rechts
   ============================================================ */
.vacature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  position: relative;
  background: #100C0A;
  isolation: isolate;
}
.vacature-split__media {
  position: relative;
  overflow: hidden;
}
.vacature-split__media picture,
.vacature-split__media img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.vacature-split__media img { min-height: 480px; }
.vacature-split__media-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(11, 8, 7, 0.8) 100%);
}
.vacature-split__body {
  background:
    url("../img/textures/mahonie-pattern.jpg") center/cover no-repeat,
    #1A1410;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 9vw, 100px) clamp(32px, 6vw, 80px);
  color: var(--creme);
  position: relative;
  isolation: isolate;
}
.vacature-split__body::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(201, 160, 92, .08), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.5), rgba(0,0,0,.1));
  pointer-events: none;
}
.vacature-split__inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.vacature-split__inner .eyebrow--gold { margin: 0; color: var(--goud-warm); }
.vacature-split__inner .h2 {
  color: #F4ECDC;
  margin: 0;
}
.vacature-split__inner .h2 em { color: var(--goud-licht); }
.vacature-split__lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.4;
  font-style: italic;
  color: var(--goud-licht);
  margin: var(--space-2) 0 0;
}
.vacature-split__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vacature-split__list li {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(244, 236, 220, 0.85);
  position: relative;
  padding-left: 22px;
}
.vacature-split__list li em {
  font-style: italic;
  color: var(--goud-licht);
}
.vacature-split__list li strong {
  font-weight: 600;
  color: var(--goud-licht);
}
.vacature-split__dot {
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--goud-warm);
  box-shadow: 0 0 8px rgba(201, 160, 92, .5);
}
.vacature-split__close {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 236, 220, 0.7);
  margin: 0;
}
.vacature-split__close a {
  color: var(--goud-licht);
  border-bottom: 1px solid var(--goud-warm);
}
.vacature-split__inner .btn { align-self: flex-start; margin-top: 6px; }

@media (max-width: 900px) {
  .vacature-split { grid-template-columns: 1fr; min-height: auto; }
  .vacature-split__media img { max-height: 460px; }
  .vacature-split__media-scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(11, 8, 7, 0.85) 100%); }
}


/* ============================================================
   FINAL OVERRIDES — bold semantics off, but headlines keep hierarchy
   ============================================================ */
strong, b { font-weight: inherit; }
.vitrine-tile__name, .vitrine-tile__price { font-weight: 400; }
.hero-video__scroll { display: none !important; }

/* ============================================================
   LUXURY POLISH — Dupont / Audemars register
   ============================================================ */

/* Smooth fade-up on scroll — picked up by .reveal class via main.js IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(.2,.6,.2,1), transform 1.1s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible, .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal--slow { transition-duration: 1.4s; }
.reveal--fast { transition-duration: .75s; }
.reveal--stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1);
}
.reveal--stagger.is-visible > *, .reveal--stagger.revealed > * { opacity: 1; transform: translateY(0); }
.reveal--stagger.is-visible > *, .reveal--stagger.revealed > *:nth-child(2) { transition-delay: .12s; }
.reveal--stagger.is-visible > *, .reveal--stagger.revealed > *:nth-child(3) { transition-delay: .24s; }
.reveal--stagger.is-visible > *, .reveal--stagger.revealed > *:nth-child(4) { transition-delay: .36s; }
.reveal--stagger.is-visible > *, .reveal--stagger.revealed > *:nth-child(5) { transition-delay: .48s; }
.reveal--stagger.is-visible > *, .reveal--stagger.revealed > *:nth-child(6) { transition-delay: .60s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   MEGA SPLIT — full-bleed editorial header (left product, right copy on cream)
   ============================================================ */
.mega-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: #F4ECDC;
}
.mega-split__media {
  position: relative;
  background:
    radial-gradient(ellipse at 35% 25%, rgba(242, 213, 143, .22), transparent 60%),
    #0B0807;
  overflow: hidden;
}
.mega-split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mega-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 120px);
  background:
    linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)),
    url('../img/textures/marmer-wit-helder.jpg') center/cover #FFFFFF;
  position: relative;
}
.mega-split__eyebrow {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--goud-warm);
  margin: 0 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.mega-split__eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--goud-warm);
}
.mega-split__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(42px, 4.4vw, 76px);
  line-height: 1.02;
  color: var(--inkt);
  margin: 0 0 var(--space-5);
  letter-spacing: -0.015em;
}
.mega-split__lead {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: rgba(20, 14, 11, 0.78);
  max-width: 520px;
  margin: 0 0 var(--space-6);
}
.mega-split__lead + .mega-split__lead { margin-top: -10px; }
.mega-split__cta { align-self: flex-start; }
@media (max-width: 900px) {
  .mega-split { grid-template-columns: 1fr; min-height: auto; }
  .mega-split__media { aspect-ratio: 4 / 3; }
  .mega-split__body { padding: 56px 28px; }
}

/* ============================================================
   ART DECO DIVIDER — gold flourish ornament op mahonie
   ============================================================ */
.deco-divider {
  position: relative;
  height: clamp(28px, 3.2vh, 44px);
  background: url('../img/textures/mahonie-pano.jpg') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.deco-divider__ornament {
  width: clamp(180px, 22vw, 300px);
  height: auto;
  display: block;
  opacity: 0.85;
}

/* ============================================================
   RED VELVET HERO — strakgespannen rood satin, gouden wapen + copy
   ============================================================ */
.velvet-band {
  position: relative;
  padding: clamp(56px, 8vh, 110px) 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.06), transparent 60%),
    url('../img/textures/rood-satin.jpg') center/cover #4A0F0F;
  overflow: hidden;
  isolation: isolate;
  color: #F4ECDC;
}
.velvet-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
}
.velvet-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}
.velvet-band__logo {
  width: clamp(180px, 18vw, 280px);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
}
.velvet-band__eyebrow {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--goud-licht);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.velvet-band__eyebrow::before,
.velvet-band__eyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--goud-warm);
}
.velvet-band__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 78px);
  line-height: 1.02;
  color: #F2D58F;
  margin: 0;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.velvet-band__title em { font-style: italic; color: #FAE7B0; }
.velvet-band__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 22px);
  color: rgba(244, 236, 220, .9);
  max-width: 640px;
  margin: 0 auto;
}

/* ============================================================
   BUTTONS — filled-gold primary upgrade
   ============================================================ */
.btn-solid-gold {
  background: linear-gradient(180deg, #F2D58F 0%, #C9A05C 60%, #8B6E2E 100%);
  border-color: #C9A05C;
  color: #0B0807;
  font-weight: 500;
}
.btn-solid-gold:hover {
  background: linear-gradient(180deg, #FAE7B0 0%, #E5BD6E 60%, #A0823A 100%);
  border-color: #FAE7B0;
  color: #0B0807;
  transform: translateY(-1px);
}
.btn-link-gold {
  background: transparent;
  color: var(--goud-licht);
  border: 0;
  padding: 12px 0;
  letter-spacing: 0.22em;
}
.btn-link-gold:hover { color: var(--goud-warm); }

/* ============================================================
   FOOTER LOGO BAR — full-bleed dood-zwart met gouden wapen
   ============================================================ */
.footer-logobar {
  background: #000000;
  padding: var(--space-9) var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(201, 160, 92, .18);
  overflow: hidden;
}
.footer-logobar__logo {
  width: clamp(180px, 22vw, 320px);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 16px rgba(242, 213, 143, 0.22));
}
.footer-logobar__logo--bleed {
  width: clamp(200px, 22vw, 300px);
  max-width: 100%;
  height: auto;
  filter: none;
  margin: 0;
}

/* Footer pure black-out */
.footer.footer--extended {
  background: #000000;
}


/* ============================================================
   DUPONT ROW — simpele 4-up productrij op licht (lay-out)
   ============================================================ */
.section--light {
  background: #FBFAF6;
  padding: clamp(64px, 9vh, 120px) 0;
}
.dupont-row__head {
  text-align: left;
  margin: 0 0 clamp(40px, 5vh, 64px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dupont-row__eyebrow {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--inkt);
  margin: 0;
  font-weight: 600;
}
.dupont-row__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 6px;
  color: #0B0807;
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: 0.02em;
  line-height: 1;
}
.dupont-row__brand-prefix {
  font-size: 0.5em;
  font-weight: 700;
  position: relative;
  top: -0.15em;
}
.dupont-row__brand-prefix sup {
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 1px;
}
.dupont-row__brand-name {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1em;
  letter-spacing: 0.04em;
}
.dupont-row__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--grijs-warm);
  margin: 0;
  letter-spacing: -0.005em;
}
/* ENDLESS MARQUEE — 7 producten + dupes voor naadloze loop, hover swap naar macro */
.dupont-row { padding: clamp(40px, 6vh, 80px) 0 clamp(48px, 6vh, 80px) !important; }
.dupont-row__head {
  margin: 0 0 clamp(16px, 2vh, 28px);
  padding-bottom: 0;
  gap: 0;
}
.dupont-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.dupont-marquee__track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.1vw, 22px);
  width: max-content;
  animation: dupont-scroll 55s linear infinite;
}
.dupont-marquee:hover .dupont-marquee__track,
.dupont-marquee:focus-within .dupont-marquee__track {
  animation-play-state: paused;
}
@keyframes dupont-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.dupont-marquee__item {
  flex: 0 0 auto;
  width: clamp(260px, 26vw, 420px);
}
.dupont-marquee__item a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.dupont-marquee__item figure {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, rgba(201,160,92,.07), transparent 72%);
  overflow: hidden;
}
.dupont-marquee__item img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 84%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 36px rgba(14,9,7,.22));
  transition: opacity .35s var(--ease-out), transform .55s var(--ease-out);
}
.dupont-marquee__item img.default { opacity: 1; transform: scale(1); }
.dupont-marquee__item img.detail  { opacity: 0; transform: scale(1.08); }
.dupont-marquee__item:hover img.default { opacity: 0; transform: scale(.96); }
.dupont-marquee__item:hover img.detail  { opacity: 1; transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .dupont-marquee__track { animation: none; }
}
@media (max-width: 720px) {
  .dupont-marquee__item { width: clamp(200px, 60vw, 280px); }
  .dupont-marquee__track { gap: 32px; animation-duration: 40s; }
}

/* ============================================================
   200-JAAR UITGELICHT — mega-split (witte marmer LEFT, rood RIGHT)
   ============================================================ */
.jubileum-feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-height: clamp(560px, 78vh, 820px);
  width: 100%;
}
.jubileum-feature__media {
  position: relative;
  background: #0B0807;
  overflow: hidden;
  padding: 0;
  min-height: 100%;
  isolation: isolate;
}
/* Slideshow: 4 close-ups vullen het paneel volledig; crossfade + subtiele Ken-Burns */
.jubileum-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 2s cubic-bezier(.4,0,.2,1), transform 7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.jubileum-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .jubileum-slide { transition: opacity .25s linear; transform: none; }
  .jubileum-slide.is-active { transform: none; }
}

.jubileum-feature__body {
  background: #5A0B0F;
  color: #F4ECDC;
  padding: clamp(48px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}
.jubileum-feature__eyebrow {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #F2D58F;
  margin: 0 0 var(--space-5);
  font-weight: 500;
}
.jubileum-feature__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.15;
  color: #FBFAF6;
  margin: 0 0 var(--space-5);
  letter-spacing: -0.01em;
  max-width: 380px;
}
.jubileum-feature__lead {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: rgba(244, 236, 220, .9);
  margin: 0 0 var(--space-6);
  max-width: 360px;
}
.jubileum-feature__cta {
  display: inline-block;
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #FBFAF6;
  text-decoration: none;
  padding: 14px 28px;
  border: 1px solid #F2D58F;
  background: transparent;
  transition: all .2s var(--ease-out);
}
.jubileum-feature__cta:hover {
  background: #F2D58F;
  color: #5A0B0F;
}

@media (max-width: 900px) {
  .jubileum-feature { grid-template-columns: 1fr; }
  .jubileum-feature__media { min-height: 420px; padding: 32px; }
  .jubileum-feature__body { padding: 48px 24px; }
}

/* PDP — payment strip (compacter, links uitgelijnd onder cost-strip) */
.pdp__pay {
  justify-content: flex-start;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(107, 93, 79, .14);
  gap: 8px 10px;
}
.pdp__pay .paylogo {
  width: 38px;
  height: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

/* VITRINE — grote CTA onder de maisons-tegels */
.vitrine-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vh, 80px);
}
.btn-vitrine {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #F4ECDC;
  text-decoration: none;
  padding: 20px clamp(40px, 5vw, 80px);
  background: transparent;
  border: 1px solid rgba(201, 160, 92, .55);
  font-weight: 500;
  transition: all .35s cubic-bezier(.22,.61,.36,1);
  min-width: clamp(320px, 38vw, 520px);
  text-align: center;
  position: relative;
}
.btn-vitrine:hover {
  background: rgba(201, 160, 92, .08);
  border-color: #C9A05C;
  color: #F2D58F;
  letter-spacing: 0.36em;
}

/* ============================================================
   GLOBALE SCHAAL — alles 20% kleiner, menu/promobar 10% kleiner
   ============================================================ */
.promobar,
.topbar {
  zoom: 0.9;
}
main,
.footer-logobar,
.footer {
  zoom: 0.8;
}