/* ==========================================================================
   Van den Ende Rozen | Design tokens + componenten
   Bron: Figma variabelen 2560 (desktop) en 390 (mobiel).
   Alle maten schalen vloeiend tussen 390 px en 1440 px viewportbreedte.
   ========================================================================== */

:root {
  /* Kleuren */
  --c-primary: #85754E;
  --c-primary-disabled: #ABA18A;
  --c-secondary: #6B2C3E;
  --c-tertiary: #D5BFCB;
  --c-accent: #F3ECE0;
  --c-white: #FCFEFF;
  --c-black: #1D1D1B;

  /* Typografie */
  --f-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-sans: "Open Sans", Arial, Helvetica, sans-serif;
  --fs-h1: clamp(48px, calc(30.17px + 4.5714vw), 96px);
  --fs-h2: clamp(32px, calc(18.63px + 3.4286vw), 68px);
  --fs-h3: clamp(28px, calc(20.57px + 1.9048vw), 48px);
  --fs-h4: clamp(24px, calc(21.03px + 0.7619vw), 32px);
  --fs-large: clamp(18px, calc(17.26px + 0.1905vw), 20px);
  --fs-normal: clamp(14px, calc(13.26px + 0.1905vw), 16px);
  --fs-small: clamp(12px, calc(11.26px + 0.1905vw), 14px);

  /* Padding (secties) */
  --p40: clamp(20px, calc(12.57px + 1.9048vw), 40px);
  --p80: clamp(40px, calc(25.14px + 3.8095vw), 80px);
  --p120: clamp(60px, calc(37.71px + 5.7143vw), 120px);
  --p160: clamp(80px, calc(50.29px + 7.619vw), 160px);
  --p240: clamp(120px, calc(75.43px + 11.4286vw), 240px);

  /* Spacing (componenten) */
  --s8: clamp(4px, calc(2.51px + 0.381vw), 8px);
  --s16: clamp(8px, calc(5.03px + 0.7619vw), 16px);
  --s24: clamp(12px, calc(7.54px + 1.1429vw), 24px);
  --s32: clamp(16px, calc(10.06px + 1.5238vw), 32px);

  /* Radius */
  --r12: clamp(6px, calc(3.77px + 0.5714vw), 12px);
  --r24: clamp(12px, calc(7.54px + 1.1429vw), 24px);

  /* Layout */
  --container: 1410px;
  --gutter: 20px;
  --side: max(var(--p40), calc((100vw - var(--container)) / 2));
  --out-left: max(0px, calc((100vw - var(--container)) / 2 - var(--p40)));

  /* Beweging */
  --ease: cubic-bezier(.45, 0, .55, 1);
  --t-hover: 500ms;
  --header-h: 120px;
}

/* ---------- Basis ---------- */
.vde, .vde * { box-sizing: border-box; }
.vde {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-normal);
  line-height: 1.875;
  color: var(--c-black);
  background: var(--c-accent);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
:where(.vde) img { display: block; max-width: 100%; }
:where(.vde) a { color: inherit; text-decoration: none; }
:where(.vde) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.vde :focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 3px; }

.container { width: min(var(--container), calc(100% - 2 * var(--p40))); margin-inline: auto; }

.h1, .h2, .h3, .h4 { font-family: var(--f-serif); font-style: italic; font-weight: 400; margin: 0; }
.h1 { font-size: var(--fs-h1); line-height: 1.15; }
.h2 { font-size: var(--fs-h2); line-height: 1.2; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; }
.h4 { font-size: var(--fs-h4); line-height: 1.3; }
.t-large { font-size: var(--fs-large); line-height: 1.8; }
.t-small { font-size: var(--fs-small); }
.prose p { margin: 0 0 1.875em; }
.prose p:last-child { margin-bottom: 0; }
.prose--spaced { margin-bottom: var(--s32); }

/* Label met lijn */
.label {
  display: flex; align-items: center; gap: 20px;
  font-size: var(--fs-small); line-height: 1.4; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-secondary); margin: 0 0 var(--s16);
}
.label::before { content: ""; width: clamp(56px, calc(46.7px + 2.381vw), 80px); height: 3px; background: currentColor; flex: none; }
.label--primary { color: var(--c-primary); }
.label--short::before { width: 40px; }
.label--accent { color: var(--c-accent); }

/* ---------- Knoppen (volgens 06 Design tokens) ----------
   Staten per knop: default, hover (ring 2px op 2px afstand + pijl draait naar ↗),
   focus (toetsenbord), pressed (zwart), disabled.
   Maat: 56 px hoog, radius 12, Open Sans 16 medium, hoofdletters, pijl 20 px. */
.btn {
  display: inline-flex; align-items: center; gap: 16px;
  height: clamp(48px, calc(44.29px + 0.9524vw), 56px);
  padding: 0 20px 0 18px;
  border: 0; border-radius: 12px;
  font-family: var(--f-sans); font-size: var(--fs-normal); font-weight: 600; letter-spacing: 0; text-transform: uppercase; line-height: 1;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), outline-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
  white-space: nowrap; cursor: pointer;
}
.btn svg { width: 22px; height: 22px; margin: 0 -1px; flex: none; transition: transform var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.vde .btn:focus-visible { outline-offset: 2px; }
.btn:focus-visible svg { transform: rotate(-45deg); }
.btn:active svg { transform: none; }

/* Primary */
.btn--primary { background: var(--c-primary); color: var(--c-accent); }
.btn--primary:focus-visible { background: var(--c-accent); color: var(--c-primary); outline: 2px solid var(--c-primary); }
/* Secondary */
.btn--secondary { background: var(--c-secondary); color: var(--c-accent); }
.btn--secondary:focus-visible { background: var(--c-accent); color: var(--c-secondary); outline: 2px solid var(--c-secondary); }
/* White */
.btn--white { background: var(--c-accent); color: var(--c-black); }
.btn--white svg { color: var(--c-primary); }
.btn--white:focus-visible { outline: 2px solid var(--c-black); }
.btn--white:focus-visible svg { color: var(--c-black); }
/* Outline */
.btn--outline { background: transparent; color: var(--c-primary); box-shadow: inset 0 0 0 2px var(--c-primary); }
.btn--outline:focus-visible { background: var(--c-primary); color: var(--c-accent); outline: 2px solid var(--c-primary); }
/* Outline white */
.btn--outline-white { background: transparent; color: var(--c-accent); box-shadow: inset 0 0 0 2px var(--c-accent); }
.btn--outline-white:focus-visible { background: var(--c-accent); color: var(--c-primary); outline: 2px solid var(--c-accent); }

@media (hover: hover) {
  .btn:hover svg { transform: rotate(-45deg); }
  .btn--primary:hover, .btn--secondary:hover { outline-color: var(--c-black); }
  .btn--white:hover { outline-color: var(--c-accent); }
  .btn--outline:hover { background: var(--c-primary); color: var(--c-accent); outline-color: var(--c-black); }
  .btn--outline-white:hover { background: var(--c-accent); color: var(--c-primary); outline-color: var(--c-white); }
}
/* Pressed */
.btn--primary:active, .btn--secondary:active, .btn--outline:active { background: var(--c-black); color: var(--c-accent); outline-color: transparent; box-shadow: none; }
.btn--white:active { background: var(--c-accent); color: var(--c-black); outline-color: var(--c-black); }
.btn--outline-white:active { background: var(--c-white); color: var(--c-primary); outline-color: transparent; box-shadow: none; }
/* Disabled */
.btn:disabled, .btn[aria-disabled="true"] { pointer-events: none; }
.btn--primary:disabled, .btn--secondary:disabled { background: #8D6D76; }
.btn--white:disabled { color: var(--c-primary-disabled); outline-color: var(--c-primary-disabled); }
.btn--white:disabled svg { color: var(--c-primary-disabled); }
.btn--outline:disabled, .btn--outline-white:disabled { background: #EEEEEE; color: var(--c-primary); box-shadow: none; }

.btn--sm { height: 48px; padding: 0 16px; }

/* Pijlknop: 80 x 80 desktop, 48 x 48 mobiel (Arrow.svg / Mobile Arrow.svg) */
.arrow-btn {
  display: inline-grid; place-items: center; flex: none;
  width: clamp(48px, calc(36.11px + 3.0476vw), 80px); aspect-ratio: 1;
  border: 0; border-radius: var(--r12);
  background: var(--c-secondary); color: var(--c-accent);
  outline: 2px solid transparent; outline-offset: 2px;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), outline-color var(--t-hover) var(--ease);
}
.arrow-btn svg { width: 55%; height: 55%; }
.arrow-btn--muted { background: var(--c-primary-disabled); color: var(--c-accent); }
@media (hover: hover) { .arrow-btn:hover { background: var(--c-accent); color: var(--c-primary); } }
.vde .arrow-btn:focus-visible { background: var(--c-accent); color: var(--c-primary); outline-color: var(--c-secondary); }
.arrow-btn:active { background: var(--c-black); color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.arrow-btn:disabled { background: var(--c-primary-disabled); color: var(--c-accent); pointer-events: none; }

/* Kleine vierkante iconknop 48 x 48 (FAQ, Mobile menu) */
.icon-btn { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: 6px; background: var(--c-primary); color: var(--c-white); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-primary); color: var(--c-white);
  height: var(--header-h);
}
.site-header__inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 100%; align-items: center; }
.site-nav { display: flex; gap: 32px; }
.site-nav a {
  position: relative; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; padding: 6px 0;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-logo {
  align-self: start; display: grid; place-items: start center;
  width: 208px; height: 190px; padding-top: 30px;
  background: var(--c-primary); border-radius: 0 0 16px 16px;
}
.site-logo img { width: 130px; height: auto; transition: width 300ms var(--ease); }
.site-actions { display: flex; justify-content: flex-end; gap: 20px; }
.lang { position: relative; }
.lang__btn { gap: 12px; padding: 0 16px 0 18px; }
.lang__btn svg { width: 16px; height: 16px; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; margin: 0; padding: 8px; list-style: none;
  background: var(--c-accent); color: var(--c-black); border-radius: 8px; box-shadow: 0 12px 32px rgba(29, 29, 27, .18);
}
.lang__menu a { display: block; padding: 10px 14px; border-radius: 6px; font-size: 15px; line-height: 1.4; transition: background-color 300ms var(--ease); }
.lang__menu a:hover, .lang__menu a[aria-current="true"] { background: rgba(133, 117, 78, .15); }
.menu-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 1023px) {
  :root { --header-h: 96px; }
  .site-header { position: absolute; left: 0; right: 0; background: transparent; height: 0; }
  .site-header__inner { display: block; position: relative; }
  .site-nav, .site-actions { display: none; }
  .site-logo { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 88px; height: 100px; padding-top: 18px; border-radius: 0 0 8px 8px; }
  .site-logo img { width: 56px; }
  .menu-toggle {
    display: grid; place-items: center; position: fixed; top: 16px; right: var(--p40); z-index: 60;
    width: 48px; height: 48px; border-radius: 6px; background: var(--c-primary); color: var(--c-white);
  }
  .menu-toggle svg { width: 24px; height: 24px; }
  .mobile-menu {
    display: flex; flex-direction: column; gap: 32px; position: fixed; inset: 0; z-index: 55;
    padding: 120px var(--p40) 40px; background: var(--c-primary); color: var(--c-white); overflow-y: auto;
  }
  .mobile-menu nav { display: flex; flex-direction: column; gap: 12px; }
  .mobile-menu nav a { font-family: var(--f-serif); font-style: italic; font-size: 36px; line-height: 1.3; }
  .mobile-menu__lang { display: flex; gap: 12px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; height: 90vh; height: 90svh; min-height: 520px; max-height: 1200px; overflow: hidden; color: var(--c-white); background: var(--c-black); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media--y40 img { object-position: 50% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 29, 27, .72) 0%, rgba(29, 29, 27, .5) 30%, rgba(29, 29, 27, .18) 55%, rgba(29, 29, 27, 0) 78%); pointer-events: none; }
.hero__inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; padding-bottom: var(--p120); }
.hero__content { border-left: 2px solid var(--c-white); padding-left: clamp(16px, calc(-3.31px + 4.9524vw), 82px); max-width: 760px; }
.hero__title { margin-bottom: var(--s32); }
.hero__text { margin: 0 0 clamp(24px, calc(18.06px + 1.5238vw), 40px); }

/* ---------- USP slider ---------- */
.usp { padding: var(--p80) 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.usp__track { display: flex; width: max-content; animation: usp-marquee 120s linear infinite; }
.usp__group { display: flex; align-items: center; gap: 88px; padding-right: 88px; flex: none; }
.usp__item { font-family: var(--f-serif); font-style: italic; font-size: var(--fs-h4); line-height: 60px; white-space: nowrap; }
.usp__icon { width: 65px; height: auto; flex: none; }
@keyframes usp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Producten ---------- */
.products { position: relative; padding: var(--p120) 0 0; }
.section-head { margin-bottom: clamp(32px, calc(20.11px + 3.0476vw), 64px); }
.section-head--flush { margin-bottom: 0; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.product { display: block; }
.product__media { position: relative; aspect-ratio: 450 / 560; border-radius: var(--r24); overflow: hidden; background: var(--c-tertiary); }
.product__media img {
  position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none;
  transform: translateX(-27.3%) translateY(var(--py, 0%)) scale(1.07); transform-origin: 50% 50%; transition: transform var(--t-hover) var(--ease);
}
.product__tag {
  position: absolute; z-index: 1; left: clamp(16px, calc(11.54px + 1.1429vw), 30px); top: 0;
  width: clamp(38px, calc(29.83px + 2.0952vw), 60px); height: auto; padding: 30px 0;
  display: grid; place-items: center; border-radius: 0 0 6px 6px;
  background: var(--c-primary); color: var(--c-accent);
  font-family: var(--f-serif); font-size: clamp(18px, calc(15.77px + .5714vw), 24px); letter-spacing: .1em; text-transform: uppercase;
}
.product__tag span { writing-mode: vertical-rl; transform: rotate(180deg); }
.product__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: var(--s32); }
.product__meta .label { margin-bottom: 4px; }
@media (hover: hover) {
  .product:hover .product__media img { transform: translateX(-50%) translateY(var(--py, 0%)) scale(1.07); }
  .product:hover .arrow-btn { background: var(--c-accent); color: var(--c-primary); box-shadow: inset 0 0 0 1px rgba(133, 117, 78, .25); }
}
.product--romantic .product__media { background: #CDB7C2; }
.product--legend .product__media { background: #CDB9A3; }
.product--classic .product__media { background: #4E1F2B; }

/* ---------- Over ons ---------- */
.about { position: relative; padding: var(--p160) 0 0; }
.about--sub { padding-bottom: var(--p160); }
.about::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 130%;
  background: url("../img/schaduw-rechts.jpg") right top / cover no-repeat; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, #000 70%, transparent 100%);
  mask-composite: intersect;
  transform: translateY(var(--sy, 0px));
}
.about__grid { position: relative; display: grid; grid-template-columns: 651fr 689fr; column-gap: 70px; align-items: start; }
.about__media { margin-left: calc(-1 * var(--out-left)); border-radius: var(--r24); overflow: hidden; aspect-ratio: 1186 / 874; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__body .h2 { margin-bottom: var(--s32); }
.about__body .prose { margin-bottom: var(--s32); }

/* ---------- Cijfers ---------- */
.stats { position: relative; padding: var(--p120) 0 var(--p160); }
.stats--sub { padding-top: var(--p240); }
.stats--tight { padding-bottom: var(--p120); }
.stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; text-align: center; margin: 0 auto; padding: 0; list-style: none; }
.stat__icon { width: 65px; height: auto; margin: 0 auto var(--s16); }
.stat__num { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: var(--fs-h2); line-height: 1.2; position: relative; }
.stat__num[data-counting="true"] { color: transparent; }
.stat__num[data-counting="true"]::after { content: attr(data-count); position: absolute; inset: 0; color: var(--c-black); }
.stat__label { margin: 8px 0 0; }

/* ---------- Bordeaux sectie met cards ---------- */
.feature { position: relative; padding: var(--p120) 0; background: var(--c-secondary); overflow: hidden; }
.feature::before { content: ""; position: absolute; inset: 0; background: url("../img/patroon.webp") center var(--pat, 0px) / 2880px auto repeat; opacity: .06; pointer-events: none; }
.feature__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }
.feature__grid > :nth-child(2) { margin-top: var(--p160); }
.card { position: relative; display: block; aspect-ratio: 688 / 660; border-radius: var(--r24); overflow: hidden; color: var(--c-white); isolation: isolate; }
.card__media { position: absolute; inset: 0; z-index: -1; }
.card__media { transition: transform 900ms var(--ease); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(29, 29, 27, 0) 0%, rgba(29, 29, 27, 0) 40%, rgba(29, 29, 27, .55) 68%, rgba(29, 29, 27, .7) 100%); }
.card__body { position: absolute; left: var(--p40); right: var(--p40); bottom: var(--p40); border-left: 2px solid var(--c-white); padding-left: var(--s32); transition: border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); }
.card__body .h3 { margin-bottom: var(--s16); }
.card__body p { margin: 0; max-width: 520px; }
.card__arrow { position: absolute; top: var(--p40); right: var(--p40); transition: opacity var(--t-hover) var(--ease); }
/* "Bekijk alles" (Arrow button.svg): 82 px hoog, Playfair italic 32, pijl 40 px, hoeken 0 8 0 8 */
.card__more {
  position: absolute; top: var(--p40); right: var(--p40); display: inline-flex; align-items: center; gap: 20px;
  height: 82px; padding: 0 20px; background: var(--c-accent); color: var(--c-black); border-radius: 0 8px 0 8px;
  font-family: var(--f-serif); font-style: italic; font-size: var(--fs-h4); line-height: 1;
  opacity: 0; transition: opacity var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.card__more svg { width: 44px; height: 44px; margin: 0 -2px; color: var(--c-primary); transition: color var(--t-hover) var(--ease); }
.card__frame { position: absolute; inset: var(--p40); width: calc(100% - 2 * var(--p40)); height: calc(100% - 2 * var(--p40)); overflow: visible; pointer-events: none; }
.card__frame rect { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--t-hover) var(--ease), stroke 200ms var(--ease); }
.card:active .card__more { background: var(--c-black); color: var(--c-accent); }
.card:active .card__more svg { color: var(--c-accent); }
.card:active .card__frame rect { stroke: var(--c-black); stroke-dashoffset: 0; }
@media (hover: hover) {
  .card:hover .card__frame rect { stroke-dashoffset: 0; }
  .card:hover .card__arrow { opacity: 0; }
  .card:hover .card__more { opacity: 1; }
  .card:hover .card__body { border-color: transparent; transform: translateY(-32px); }
  .card:hover .card__media { transform: scale(1.03); }
}

/* ---------- Quote ---------- */
.quote { position: relative; padding: var(--p160) 0 0; }
.quote__grid { display: grid; grid-template-columns: 690fr 610fr; column-gap: 70px; padding-right: 40px; align-items: end; }
.quote figure, .quote blockquote { margin: 0; }
.quote__glyph { display: block; height: 34px; margin-bottom: 12px; font-family: var(--f-serif); font-size: 88px; line-height: .9; color: var(--c-primary); }
.quote__mark { width: 32px; height: auto; color: var(--c-primary); margin: 0 0 var(--s16); display: block; }
.quote__text { margin: 0 0 var(--s24); }
.quote__body { margin: 0 0 var(--s24); }
.quote__media { border-radius: var(--r24); overflow: hidden; aspect-ratio: 610 / 876; }
.quote__media img { width: 100%; height: 100%; object-fit: cover; }
.quote figcaption .label { margin: 0; }

/* ---------- Impressies (slider) ---------- */
.gallery { position: relative; padding: var(--p240) 0 0; }
.gallery::before { content: ""; position: absolute; z-index: -1; left: -10%; top: 10%; width: 55%; height: 90%; background: url("../img/schaduw-links.jpg") left center / cover no-repeat; pointer-events: none; transform: translateY(var(--sy, 0px)); -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%); mask-composite: intersect; }
.gallery__stage { position: relative; }
.gallery__viewport { clip-path: inset(-20px -100vw); }
.gallery__track { display: flex; gap: 30px; transition: transform 600ms var(--ease), opacity 300ms var(--ease); will-change: transform; }
.gallery__track.is-static { transition: none; }
.gallery__track.is-fading { opacity: 0; transition: opacity 300ms var(--ease); }
.gallery__item { flex: 0 0 calc((100% - 60px) / 3); aspect-ratio: 450 / 560; border-radius: var(--r24); overflow: hidden; display: block; padding: 0; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-hover) var(--ease); }
@media (hover: hover) { .gallery__item:hover img { transform: scale(1.04); } }
.gallery__prev, .gallery__next { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); }
.gallery__prev { left: -15px; }
.gallery__prev svg { transform: scaleX(-1); }
.gallery__next { right: -15px; }
.gallery__next-pos { right: -15px; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(32px, calc(26.06px + 1.5238vw), 48px); }
.dot { width: 16px; height: 16px; border-radius: 50%; background: var(--c-primary); transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.dot[aria-current="true"] { background: var(--c-black); box-shadow: 0 0 0 2px var(--c-accent), 0 0 0 3.5px var(--c-black); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(29, 29, 27, .92); padding: 64px 96px; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 128px); border-radius: var(--r12); object-fit: contain; }
.lightbox__close { position: absolute; top: 24px; right: 24px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 8px; background: var(--c-accent); color: var(--c-black); }
.lightbox__close svg { width: 24px; height: 24px; }
.lightbox__prev, .lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 24px; }
.lightbox__prev svg { transform: scaleX(-1); }
.lightbox__next { right: 24px; }

/* ---------- FAQ ---------- */
.faq { position: relative; padding: var(--p240) 0 var(--p120); }
.faq__grid { display: grid; grid-template-columns: 810fr 570fr; column-gap: 30px; align-items: start; }
.faq__list { display: flex; flex-direction: column; gap: 20px; }
.faq__item { border: 1px solid var(--c-primary); border-radius: var(--r12); }
.faq__heading { margin: 0; font: inherit; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 10px 10px 10px 20px; min-height: 68px; font-size: var(--fs-large); line-height: 1.5; }
.faq__icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--c-primary); color: var(--c-accent); transition: background-color 300ms var(--ease); }
.faq__icon svg { width: 16px; height: 16px; transition: transform 300ms var(--ease); }
.faq__q[aria-expanded="true"] .faq__icon svg { transform: rotate(180deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease); }
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 78px 20px 20px; }
.faq__a a { text-decoration: underline; }
.faq__aside { align-self: start; margin-top: 20px; border-left: 2px solid var(--c-primary); padding: 8px 0 8px var(--s32); }
.faq__aside .h4 { margin-bottom: var(--s16); }
.faq__aside p { margin: 0 0 var(--s24); }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--c-primary) url("../img/patroon-bruin.jpg") center calc(100% + var(--fy, 0px)) / max(2560px, 100%) auto no-repeat; color: var(--c-accent); padding-bottom: clamp(140px, calc(65.71px + 19.0476vw), 340px); }
.footer-logo { display: grid; place-items: center; width: 198px; height: 188px; margin: 0 auto; padding-top: 12px; background: var(--c-accent); border-radius: 0 0 16px 16px; }
.footer-logo img { width: 122px; height: auto; }
.footer-grid { display: grid; grid-template-columns: 480fr 360fr 360fr 210fr; margin-top: 40px; }
.footer-grid .h3 { color: var(--c-accent); margin-bottom: var(--s16); }
.footer-grid .h4 { margin-bottom: var(--s24); }
.footer-intro p { margin: 0 0 var(--s24); max-width: 300px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-list a, .contact-list li > span { display: flex; align-items: center; gap: 16px; line-height: 1.75; }
.contact-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--c-accent); color: var(--c-primary); transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.contact-icon svg { width: 24px; height: 24px; }
.contact-list a:hover .contact-icon { background: var(--c-secondary); color: var(--c-white); }
.socials { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
/* Social.svg: default 1px rand accent, hover bordeaux, pressed zwart */
.social { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--c-accent); color: var(--c-accent); transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.social svg { width: 24px; height: 24px; }
.social:hover { background: var(--c-secondary); border-color: var(--c-secondary); color: var(--c-white); }
.social:active { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.footer-bar { background: var(--c-black); color: var(--c-accent); font-size: var(--fs-small); line-height: 1.5; }
.footer-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 85px; padding: 16px 30px; }
.footer-bar ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-bar li + li::before { content: "|"; margin: 0 18px; }
.footer-bar a:hover { text-decoration: underline; }

/* ==========================================================================
   Tablet en mobiel
   ========================================================================== */
@media (max-width: 1023px) {
  .hero { min-height: 480px; }
  .hero::after { background: linear-gradient(180deg, rgba(29, 29, 27, 0) 20%, rgba(29, 29, 27, .45) 55%, rgba(29, 29, 27, .72) 100%); }
  .about__grid, .quote__grid, .faq__grid { grid-template-columns: 1fr; row-gap: var(--p40); }
  .about__media { margin-left: 0; }
  .about__body { padding-top: var(--p40); }
  .quote__grid { padding-right: 0; }
  .quote__media { order: 2; aspect-ratio: 350 / 400; }
  .faq__aside { margin-top: var(--p40); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .footer-intro { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .product-grid, .feature__grid, .stats__grid { grid-template-columns: 1fr; }
  .product-grid { gap: 48px; }
  .product__media img { height: 100%; }
  .feature__grid > :nth-child(2) { margin-top: 0; }
  .feature__grid { gap: 24px; }
  .card { aspect-ratio: 350 / 400; }
  .card__frame, .card__more { display: none; }
  .stats__grid { gap: 48px; }
  .gallery__item { flex-basis: 100%; }
  .gallery__track { --step: calc(100% + 30px); }
  .gallery__prev { left: -8px; }
  .gallery__next { right: -8px; }
  .gallery__viewport { clip-path: inset(-20px 0 -20px 0); }
  .lightbox { padding: 72px 16px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; transform: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo { width: 120px; height: 120px; padding-top: 6px; }
  .footer-logo img { width: 76px; }
  .footer-bar__inner { flex-direction: column; justify-content: center; text-align: center; padding: 20px; }
  .footer-bar ul { justify-content: center; }
  .footer-bar li + li::before { margin: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .usp__track { animation: none; }
  .vde *, .vde *::before, .vde *::after { transition-duration: 1ms !important; }
}

/* ==========================================================================
   Beweging: header, smooth scroll, typemachine
   ========================================================================== */
html { scroll-padding-top: 170px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Logo verkleinen bij scrollen (functionele specificaties: 300 ms) */
@media (min-width: 1024px) {
  .site-logo { transform-origin: 50% 0; transition: transform 300ms var(--ease); }
  .site-header[data-scrolled="true"] .site-logo { transform: scale(.78); }
}

/* Footer tagline: elke regel apart voor het typemachine-effect */
.tw { display: block; }

/* Hero foto ruimte geven voor parallax zonder lege randen */
.hero__media { will-change: transform; }
.hero__media img { will-change: transform; }

/* ==========================================================================
   Subpagina's (Assortiment e.v.)
   ========================================================================== */

/* Kortere hero + breadcrumb */
.hero--sub { height: 75vh; height: 75svh; min-height: 480px; max-height: 900px; }
.breadcrumb { position: absolute; z-index: 2; top: 36px; left: 0; right: 0; }
.breadcrumb ol { display: flex; align-items: center; gap: 12px; margin: 0 auto; padding: 0; list-style: none; font-size: var(--fs-small); line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--c-white); }
.breadcrumb a { font-weight: 600; padding-bottom: 4px; border-bottom: 1.5px solid currentColor; transition: opacity var(--t-hover) var(--ease); }
.breadcrumb a:hover { opacity: .75; }
.breadcrumb svg { width: 14px; height: 14px; }

/* Label met lijn aan beide kanten (gecentreerd) */
.label--center { justify-content: center; }
.label--center::after { content: ""; width: 40px; height: 3px; background: currentColor; flex: none; }
.label--center::before { width: 40px; }

/* Introductie gecentreerd */
.intro { position: relative; padding: var(--p160) 0; text-align: center; }
.intro--flush { padding-bottom: 0; }
.intro .h2 { margin-bottom: var(--s32); }
.intro .prose { max-width: 924px; margin-inline: auto; }

/* Collectieblokken */
.collection { position: relative; padding: var(--p160) 0 var(--p120); }
.collection--romantic { background: var(--c-tertiary); }
.collection--duo { background: linear-gradient(180deg, #F3ECE0 0%, #C7BDA6 100%); }
.collection .about__grid { align-items: center; }
.collection .about__body .h2 { margin-bottom: var(--s32); }
.collection .about__body .prose { margin-bottom: 0; }
.collection .gallery { padding-top: var(--p160); }
.collection .gallery::before { display: none; }
.collection__intro { max-width: 924px; }
.collection__intro .h2 { margin-bottom: var(--s32); }
.anchor { position: relative; top: -170px; display: block; height: 0; }

/* Specificaties met icoon */
.specs { list-style: none; margin: var(--s32) 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--c-secondary); display: flex; flex-direction: column; gap: 10px; }
.specs li { display: flex; align-items: center; gap: 24px; line-height: 1.5; }
.specs svg { width: 24px; height: 24px; flex: none; color: var(--c-secondary); }

/* Twee grote productfoto's naast elkaar */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding: var(--p160) var(--p40) 0; }
.duo__media { border-radius: var(--r24); overflow: hidden; aspect-ratio: 1220 / 874; }
.duo__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1023px) {
  .breadcrumb { top: 116px; }
  .collection .about__grid { align-items: start; }
}
@media (max-width: 767px) {
  .duo { grid-template-columns: 1fr; gap: 20px; }
  .specs li { gap: 16px; }
}
.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; }

/* ---------- Kruimelpad alleen op desktop ---------- */
@media (max-width: 1023px) { .breadcrumb { display: none; } }

/* ---------- Hamburgermenu: icoon en uitklapanimatie ---------- */
.burger line { transform-box: fill-box; transform-origin: center; transition: transform 420ms var(--ease), opacity 250ms var(--ease); }
.menu-toggle[aria-expanded="true"] .burger__top { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger__mid { opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] .burger__bot { transform: translateY(-6px) rotate(-45deg); }
.menu-toggle { transition: background-color 300ms var(--ease); }
.menu-toggle[aria-expanded="true"] { background: var(--c-secondary); }

@keyframes menu-in { from { clip-path: circle(0 at calc(100% - var(--p40) - 24px) 40px); } to { clip-path: circle(150vmax at calc(100% - var(--p40) - 24px) 40px); } }
@keyframes menu-out { from { clip-path: circle(150vmax at calc(100% - var(--p40) - 24px) 40px); } to { clip-path: circle(0 at calc(100% - var(--p40) - 24px) 40px); } }
@keyframes menu-item-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
  .mobile-menu { animation: menu-in 600ms cubic-bezier(.65, 0, .35, 1) both; }
  .mobile-menu.is-closing { animation: menu-out 420ms cubic-bezier(.65, 0, .35, 1) both; }
  .mobile-menu nav a, .mobile-menu__lang { opacity: 0; animation: menu-item-in 600ms var(--ease) both; }
  .mobile-menu nav a:nth-child(1) { animation-delay: 180ms; }
  .mobile-menu nav a:nth-child(2) { animation-delay: 240ms; }
  .mobile-menu nav a:nth-child(3) { animation-delay: 300ms; }
  .mobile-menu nav a:nth-child(4) { animation-delay: 360ms; }
  .mobile-menu nav a:nth-child(5) { animation-delay: 420ms; }
  .mobile-menu nav a:nth-child(6) { animation-delay: 480ms; }
  .mobile-menu__lang { animation-delay: 560ms; }
  .mobile-menu.is-closing nav a, .mobile-menu.is-closing .mobile-menu__lang { animation: none; opacity: 1; }
  .mobile-menu nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu.is-closing, .mobile-menu nav a, .mobile-menu__lang { animation: none !important; opacity: 1 !important; }
}

/* ---------- Afwisselende rijen (Duurzaam) ---------- */
.rows { position: relative; padding: var(--p160) 0 0; }
.row { display: grid; grid-template-columns: 690fr 650fr; column-gap: 70px; align-items: start; }
.row + .row { margin-top: var(--p160); }
.row--reverse { grid-template-columns: 650fr 690fr; }
.row--reverse .row__body { order: -1; padding-left: 40px; }
.row__media { border-radius: var(--r24); overflow: hidden; aspect-ratio: 690 / 520; }
.row__media img { width: 100%; height: 100%; object-fit: cover; }
.row__body .h2 { margin-bottom: var(--s32); }
.row__body p { margin: 0; }
.row__sub { margin: var(--s32) 0 var(--s16); font-family: var(--f-sans); font-size: var(--fs-large); font-weight: 500; line-height: 1.4; }
.row--center { display: block; max-width: 924px; margin-inline: auto; text-align: center; }
@media (max-width: 1023px) {
  .row, .row--reverse { grid-template-columns: 1fr; row-gap: var(--p40); }
  .row--reverse .row__body { order: 0; padding-left: 0; }
  .row--reverse .row__media { order: -1; }
}

/* ---------- Contactpagina ---------- */
.btn--white[aria-current="page"] { outline-color: var(--c-black); }
.contact { position: relative; padding: var(--p160) 0; }
.contact::before { content: ""; position: absolute; z-index: -1; left: -10%; top: 0; width: 60%; height: 100%; background: url("../img/schaduw-links.jpg") left center / cover no-repeat; transform: translateY(var(--sy, 0px)); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%); mask-composite: intersect; }
.contact__grid { display: grid; grid-template-columns: 689fr 651fr; column-gap: 70px; align-items: start; }
.contact__media { margin-right: calc(-1 * var(--out-left)); border-radius: var(--r24); overflow: hidden; aspect-ratio: 1186 / 874; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; }
.contact__body .h2 { margin-bottom: var(--s32); }
.contact__body > p { margin: 0 0 var(--p40); }
.contact__body .h4 { margin: 0 0 var(--s16); }
.contact-block { border-left: 3px solid var(--c-secondary); padding: 4px 0 4px 20px; }
.contact-block + .contact-block { margin-top: var(--s32); }
.contact-list--dark .contact-icon { background: var(--c-secondary); color: var(--c-white); }
.contact-list--dark a, .contact-list--dark li > span { color: var(--c-black); }
.contact-list--dark a:hover .contact-icon { background: var(--c-primary); }
@media (max-width: 1023px) {
  .contact__grid { grid-template-columns: 1fr; row-gap: var(--p40); }
  .contact__media { margin-right: 0; }
}

/* ---------- Zoom-effect: foto groeit uit tot volledig scherm ---------- */
.about__media.is-zoomfull { position: relative; z-index: 3; overflow: visible !important; border-radius: 0; }
.about__media.is-zoomfull img { object-fit: cover; will-change: left, top, width, height; }
/* Blok met schermvullende zoom: tekst onderaan uitgelijnd, zodat die in beeld staat terwijl de foto krimpt */
@media (min-width: 1024px) {
  .about__grid[data-zoom-full] { align-items: end; }
  .about__grid[data-zoom-full] .about__body .btn { margin-bottom: 0; }
}
/* Lengte en fustnummer per lengte (Assortiment) */
.specs li.specs__table { display: block; }
.spec-table { border-collapse: collapse; font: inherit; line-height: 1.5; }
.spec-table th { font-weight: 600; text-align: left; padding: 0 40px 8px 0; white-space: nowrap; }
.spec-table th > * { vertical-align: middle; }
.spec-table th svg { margin-right: 24px; }
.spec-table td { padding: 6px 40px 6px 48px; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.spec-table th:last-child, .spec-table td:last-child { padding-right: 0; }
@media (max-width: 1023px) { .spec-table th { padding-right: 28px; } .spec-table th svg { margin-right: 16px; } .spec-table td { padding-right: 28px; padding-left: 40px; } }
/* Slider: swipen en slepen */
.gallery__viewport { touch-action: pan-y; }
.gallery__track.is-dragging { transition: none; cursor: grabbing; }
.gallery__track.is-dragging .gallery__item { pointer-events: none; }
.gallery__item img { -webkit-user-drag: none; user-select: none; }
.arrow-btn[aria-disabled="true"] { cursor: default; }
/* Juridische pagina's (Disclaimer, Privacy) */
.legal { position: relative; padding: var(--p120) 0 var(--p160); }
.legal__inner { max-width: 924px; margin-inline: auto; }
.legal__title { margin: var(--s16) 0 var(--s16); }
.legal__date { margin: 0 0 var(--p80); font-size: var(--fs-small); opacity: .7; }
.legal__prose h2 { margin: var(--p80) 0 var(--s16); }
.legal__prose h2:first-child { margin-top: 0; }
.legal__prose p { margin-bottom: 1.25em; }
.legal__prose ul { margin: 0 0 1.25em; padding-left: 1.25em; }
.legal__prose li { margin-bottom: .4em; }
.legal__prose li::marker { color: var(--c-secondary); }
.legal__prose a { color: var(--c-secondary); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-hover) var(--ease); }
.legal__prose a:hover { color: var(--c-primary); }
.legal__prose a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 1023px) { .legal { padding-top: calc(100px + var(--p80)); } }

/* ==========================================================================
   SCHAAL 80% | compactere maten, gelijk aan het beeld bij 80% zoom.
   Bodytekst (fs-large, fs-normal, fs-small) en containerbreedte blijven gelijk.
   Terug naar de Figma-maten: verwijder dit hele blok, of zet data-scale="100".
   ========================================================================== */
.vde[data-scale="80"] {
  --fs-h1: clamp(48px, calc(37.23px + 2.7619vw), 77px);
  --fs-h2: clamp(32px, calc(23.83px + 2.0952vw), 54px);
  --fs-h3: clamp(28px, calc(24.29px + 0.9524vw), 38px);
  --fs-h4: clamp(24px, calc(23.26px + 0.1905vw), 26px);
  --p40: clamp(20px, calc(15.54px + 1.1429vw), 32px);
  --p80: clamp(40px, calc(31.09px + 2.2857vw), 64px);
  --p120: clamp(60px, calc(46.63px + 3.4286vw), 96px);
  --p160: clamp(80px, calc(62.17px + 4.5714vw), 128px);
  --p240: clamp(120px, calc(93.26px + 6.8571vw), 192px);
  --s8: clamp(4px, calc(3.26px + 0.1905vw), 6px);
  --s16: clamp(8px, calc(6.14px + 0.4762vw), 13px);
  --s24: clamp(12px, calc(9.40px + 0.6667vw), 19px);
  --s32: clamp(16px, calc(12.29px + 0.9524vw), 26px);
  --r12: clamp(6px, calc(4.51px + 0.3810vw), 10px);
  --r24: clamp(12px, calc(9.40px + 0.6667vw), 19px);
  --arrow: clamp(48px, calc(42.06px + 1.5238vw), 64px);
}
.vde[data-scale="80"] .arrow-btn { width: var(--arrow); }
.vde[data-scale="80"] .product__tag { left: clamp(16px, calc(13.03px + 0.7619vw), 24px); width: clamp(38px, calc(34.29px + 0.9524vw), 48px); padding: 24px 0; }
.vde[data-scale="80"] .label { gap: 16px; }
.vde[data-scale="80"] .label::before { width: clamp(56px, calc(53.03px + 0.7619vw), 64px); }
.vde[data-scale="80"] .intro .prose,
.vde[data-scale="80"] .collection__intro,
.vde[data-scale="80"] .row--center,
.vde[data-scale="80"] .legal__inner { max-width: 740px; }
@media (min-width: 1024px) {
  .vde[data-scale="80"] { --header-h: 96px; }
  .vde[data-scale="80"] .site-nav { gap: 26px; }
  .vde[data-scale="80"] .site-logo { width: 166px; height: 152px; padding-top: 24px; border-radius: 0 0 13px 13px; }
  .vde[data-scale="80"] .site-logo img { width: 104px; }
  .vde[data-scale="80"] .site-actions { gap: 16px; }
  .vde[data-scale="80"] .btn { height: 45px; gap: 13px; padding: 0 16px 0 14px; border-radius: 10px; }
  .vde[data-scale="80"] .btn svg { width: 18px; height: 18px; }
  .vde[data-scale="80"] .btn--sm { height: 38px; padding: 0 13px; }
  .vde[data-scale="80"] .lang__btn { gap: 10px; padding: 0 13px 0 14px; }
  .vde[data-scale="80"] .icon-btn,
  .vde[data-scale="80"] .contact-icon,
  .vde[data-scale="80"] .social,
  .vde[data-scale="80"] .faq__icon { width: 38px; height: 38px; }
  .vde[data-scale="80"] .contact-icon svg,
  .vde[data-scale="80"] .social svg { width: 19px; height: 19px; }
  .vde[data-scale="80"] .hero { max-height: 960px; }
  .vde[data-scale="80"] .hero--sub { max-height: 720px; }
  .vde[data-scale="80"] .breadcrumb { top: 29px; }
  .vde[data-scale="80"] .usp__group { gap: 70px; padding-right: 70px; }
  .vde[data-scale="80"] .usp__item { line-height: 48px; }
  .vde[data-scale="80"] .usp__icon,
  .vde[data-scale="80"] .stat__icon { width: 52px; }
  .vde[data-scale="80"] .product-grid,
  .vde[data-scale="80"] .stats__grid { gap: 24px; }
  .vde[data-scale="80"] .gallery__track { gap: 24px; }
  .vde[data-scale="80"] .gallery__item { flex-basis: calc((100% - 48px) / 3); }
  .vde[data-scale="80"] .gallery__track { --step: calc((100% + 24px) / 3); }
  .vde[data-scale="80"] .about__grid,
  .vde[data-scale="80"] .row,
  .vde[data-scale="80"] .quote__grid { column-gap: 56px; }
  .vde[data-scale="80"] .quote__grid { padding-right: 32px; }
  .vde[data-scale="80"] .quote__mark { width: 26px; }
  .vde[data-scale="80"] .feature__grid { gap: 27px; }
  .vde[data-scale="80"] .duo { gap: 32px; }
  .vde[data-scale="80"] .faq__grid { column-gap: 24px; }
  .vde[data-scale="80"] .faq__list { gap: 16px; }
  .vde[data-scale="80"] .faq__q { min-height: 54px; padding: 8px 8px 8px 16px; }
  .vde[data-scale="80"] .faq__a p { padding: 0 62px 16px 16px; }
  .vde[data-scale="80"] .card__more { height: 66px; gap: 16px; padding: 0 16px; }
  .vde[data-scale="80"] .card__more svg { width: 35px; height: 35px; }
  .vde[data-scale="80"] .dot { width: 13px; height: 13px; }
  .vde[data-scale="80"] .footer-logo { width: 158px; height: 150px; padding-top: 10px; border-radius: 0 0 13px 13px; }
  .vde[data-scale="80"] .footer-logo img { width: 98px; }
  .vde[data-scale="80"] .footer-grid { margin-top: 32px; }
  .vde[data-scale="80"] .contact-list,
  .vde[data-scale="80"] .socials { gap: 16px; }
  .vde[data-scale="80"] .footer-bar__inner { min-height: 68px; }
  .vde[data-scale="80"] .lightbox__close { width: 45px; height: 45px; }
}
@media (min-width: 1024px) and (hover: hover) {
  .vde[data-scale="80"] .card:hover .card__body { transform: translateY(-26px); }
}


/* ==========================================================================
   Statische website: aanvullingen
   ========================================================================== */
.vde [hidden] { display: none !important; }
body { margin: 0; background: var(--c-accent); }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 200; padding: 12px 18px; border-radius: 8px; background: var(--c-black); color: var(--c-white); font-family: var(--f-sans); }
.skip-link:focus { top: 16px; }
.gallery__stage.is-static-grid .gallery__viewport { clip-path: none; }
.gallery__stage.is-static-grid .gallery__track { display: grid; grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr)); transform: none !important; }
.gallery__stage.is-static-grid .gallery__item { flex: none; width: 100%; }
@media (max-width: 767px) { .gallery__stage.is-static-grid .gallery__track { grid-template-columns: 1fr; } }
.gallery__item { border: 0; cursor: zoom-in; }

/* ---------- 404-pagina ---------- */
.nf { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 160px var(--p40) var(--p80); color: var(--c-white); background: var(--c-black); overflow: hidden; }
.nf__bg { position: absolute; inset: 0; opacity: .55; background: url("../img/home-hero.jpg") center / cover no-repeat; }
.nf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 29, 27, .55) 0%, rgba(29, 29, 27, .35) 45%, rgba(29, 29, 27, .7) 100%); }
.nf__logo { position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 166px; height: 152px; padding-top: 10px; background: var(--c-primary); border-radius: 0 0 13px 13px; }
.nf__logo img { width: 104px; height: auto; }
.nf__inner { position: relative; z-index: 1; width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--p80); }
.nf__code { grid-column: 1 / -1; margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(72px, 12vw, 160px); line-height: 1; text-align: center; }
.nf__block { border-left: 2px solid var(--c-white); padding-left: var(--s32); }
.nf__block .label { color: var(--c-accent); }
.nf__block h1, .nf__block h2 { margin: 0 0 var(--s16); }
.nf__block p { margin: 0 0 var(--s32); max-width: 380px; }
@media (max-width: 767px) {
  .nf { padding-top: 140px; }
  .nf__logo { width: 88px; height: 100px; padding-top: 6px; border-radius: 0 0 8px 8px; }
  .nf__logo img { width: 56px; }
  .nf__inner { grid-template-columns: 1fr; gap: var(--p40); }
}