/* ============================================================
   Van Manen Onderhoud — stijlblad
   Designtokens en layout gebaseerd op analyse van het origineel
   ============================================================ */

:root {
  --c-white: #ffffff;
  --c-black: #000000;
  --c-dark: #302c27;
  --c-mid: #8a8177;
  --c-light: #e0d9cd;
  --c-accent: #d4af47;   /* goud/mosterd accent */
  --c-tint: #f2ede4;
  --c-paper: #fbf8f3;   /* achtergrond van de pagina */
  --c-ink: #211d19;     /* tekst, warm zwart i.p.v. puur zwart */
  --c-text-soft: color-mix(in srgb, currentColor 70%, transparent);

  --s-3xs: .25rem;
  --s-2xs: .5rem;
  --s-1xs: .75rem;
  --s-s: 1rem;
  --s-m: 1.5rem;
  --s-l: 2rem;
  --s-1xl: 2.5rem;
  --s-2xl: 3rem;
  --s-3xl: 4rem;
  --s-4xl: 5rem;
  --s-5xl: 6rem;

  --container: min(1450px, calc(100vw - 6rem));

  --f-head: "Bricolage Grotesque", Georgia, sans-serif;
  --f-body: "Instrument Sans", Arial, sans-serif;

  --fs-h1: clamp(2.5rem, 7vw, 7.5rem);
  --fs-h2: 4rem;
  --fs-h3: 2.5rem;
  --fs-h4: 1.5rem;
  --fs-h5: 1.25rem;
  --fs-body: 1rem;
  --fs-body-l: 1.2rem;
  --fs-body-s: .8rem;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

html { scroll-behavior: initial; }

body {
  margin: 0;
  /* warm papierwit i.p.v. hard wit — het hele beeldmateriaal staat in
     avondlicht, een blauwig wit eromheen laat dat grauw ogen */
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  font-weight: 300;
}

img { max-width: 100%; }
button { font: inherit; border: none; cursor: pointer; background: none; color: inherit; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }

.page__wrapper {
  max-width: 2100px;
  padding: var(--s-2xs);
  margin: 0 auto;
}

/* ---------- typografie ---------- */
.h1, .h2, .h3 {
  font-family: var(--f-head);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: inherit;
}
.h1 { margin: 0 0 var(--s-m); font-size: var(--fs-h1); }
.h1.v-smaller { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.h1.is__home { font-size: clamp(4rem, calc(4rem + 4vw), 8rem); }
.h2 { margin: 0 0 var(--s-m); font-size: var(--fs-h2); }
.h3 { margin: var(--s-s) 0; font-size: var(--fs-h3); }
.h3.is__bigger { font-size: 2.75rem; }
.h3.is-service-item { font-size: 2rem; }
.h3.is-service-item.v-smaller { font-size: 1.5rem; }
.h4 {
  margin: var(--s-m) 0;
  font-family: var(--f-body);
  font-size: var(--fs-h4);
  line-height: 1.1;
  font-weight: 500;
  text-transform: none;
  color: inherit;
}
.h4.margin-none, .margin-none { margin: 0 !important; }
.h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child { margin-top: 0 !important; }
.h1:last-child, .h2:last-child, .h3:last-child, .h4:last-child { margin-bottom: 0 !important; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0 !important; }

.body__l { font-size: var(--fs-body-l); line-height: 1.6; color: inherit; }
.body__s { font-size: var(--fs-body-s); }
.opacity__65 { opacity: .65; }
.max__400 { max-width: 400px; width: 100%; }
.max__500 { max-width: 500px; width: 100%; }
.max__600 { max-width: 600px; width: 100%; }
.home-hero__content-lower .mb__l { width: 100%; }
.mb__m { margin-bottom: var(--s-m); }
.mb__l { margin-bottom: var(--s-l); }
.z-1 { z-index: 1; position: relative; }
[data-z-one] { z-index: 5; position: relative; }
[data-height-full] { height: 100%; }

/* ---------- layout ---------- */
.container { max-width: var(--container); margin: 0 auto; display: block; }
.container.is__home-hero { max-width: 2000px; }

.section { padding: var(--s-5xl) var(--s-s); position: relative; }
.section.is__nopadding { padding-top: 0; padding-bottom: 0; }
.section.is__tinted { border-radius: var(--s-2xs); background: var(--c-tint); }
.section.is__dark {
  margin: var(--s-l) 0;
  padding: var(--s-5xl) var(--s-s);
  border-radius: var(--s-2xs);
  background: linear-gradient(168deg, rgba(38, 33, 28, .95) 0%, rgba(20, 17, 14, .97) 55%, rgba(13, 11, 9, .98) 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  /* geen backdrop-filter: de achtergrond is 95-98% dekkend, dus de vervaging
     is onzichtbaar terwijl hij elke scrollframe de hele sectie laat hertekenen */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 30px 60px -32px rgba(0, 0, 0, .55);
  color: var(--c-white);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section.is__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 55% at 12% -5%, rgba(255, 255, 255, .10), transparent 60%),
    radial-gradient(80% 40% at 100% 0%, rgba(255, 255, 255, .05), transparent 55%);
}
.section.is__dark.v-hero { margin-top: 0; padding-top: 10rem; }
.section.is__dark.v__footer { margin-top: 0; margin-bottom: 0; padding-bottom: var(--s-1xl); }
.section.is-contact-hero {
  border-radius: var(--s-2xs);
  background: linear-gradient(168deg, rgba(38, 33, 28, .95) 0%, rgba(20, 17, 14, .97) 55%, rgba(13, 11, 9, .98) 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  /* geen backdrop-filter: de achtergrond is 95-98% dekkend, dus de vervaging
     is onzichtbaar terwijl hij elke scrollframe de hele sectie laat hertekenen */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 30px 60px -32px rgba(0, 0, 0, .55);
  min-height: 98vh;
  color: var(--c-white);
  position: relative;
  isolation: isolate;
  padding-top: 8rem;
}
.section.is-contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 55% at 12% -5%, rgba(255, 255, 255, .10), transparent 60%),
    radial-gradient(80% 40% at 100% 0%, rgba(255, 255, 255, .05), transparent 55%);
}

.row { display: flex; flex-flow: column; gap: var(--s-2xl); }
.col__1 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.col__2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4xl); }
.col__3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-s); }
.col__footer { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-5xl); }
.center-content { display: flex; flex-flow: column; align-items: center; text-align: center; }

.divider { width: 100%; height: 1px; margin: var(--s-l) 0; background: #80808033; }
.divider.is-alt { margin: var(--s-s) 0; background: #ffffff33; }

/* ---------- knoppen & iconen ---------- */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: var(--s-2xl);
  padding: 0 var(--s-m);
  border-radius: var(--s-3xs);
  background: var(--c-accent);
  color: var(--c-black);
  text-decoration: none;
  transition: all .2s;
  border: none;
  cursor: pointer;
  font-family: var(--f-body);
  font-weight: 400;
}
.button:hover { background: var(--c-mid); color: var(--c-white); }
.button.is-fw { width: 100%; }

.icon__24 { width: 24px; height: 24px; flex: none; }
.icon__24 svg, .icon__16 svg { display: block; width: 100%; height: 100%; }
.icon__16 { width: 16px; height: 16px; }

.check-item {
  display: flex;
  align-items: center;
  gap: var(--s-s);
  padding: var(--s-1xs) 0;
  border-bottom: 1px solid var(--c-light);
}
.check-item p { margin: 0; }

/* ---------- nav ---------- */
.nav__component {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  padding: var(--s-s) 0;
  color: var(--c-white);
}
.nav__wrapper {
  max-width: min(1240px, calc(100vw - 6rem));
  margin: 0 auto;
  padding: 0 var(--s-l);
  border-radius: var(--s-3xs);
  background: rgba(26, 22, 18, .58);
  border: 1px solid rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(var(--s-2xs));
  backdrop-filter: blur(var(--s-2xs));
  color: var(--c-white);
  overflow: hidden;
  transition: max-width .4s ease;
}
.nav__flex {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: var(--s-2xs) 0;
  border-radius: var(--s-2xs);
}
.nav__left { display: flex; gap: var(--s-s); }
.nav__center { display: flex; justify-content: center; align-items: center; }
.nav__right { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-2xs); }
.nav__link { color: inherit; font-size: .9rem; text-decoration: none; }
.nav__link:hover { text-decoration: underline; }
.nav__logo { display: block; color: inherit; width: fit-content; margin: 0 auto; }
.nav__logo-embed { width: 10rem; }
.nav__logo-embed svg { display: block; width: 100%; height: auto; }
.nav__toggle {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-2xs);
  width: var(--s-2xl);
  height: var(--s-2xl);
  padding: var(--s-1xs);
  overflow: hidden;
  background: transparent;
}
.nav__toggle:hover { border-radius: var(--s-3xs); background: #ffffff26; }
.nav__menu-wrapper { height: 0; overflow: hidden; }
.nav__menu-inner {
  padding: var(--s-2xl) 0;
  border-top: 1px solid #ffffff4d;
}
.nav__menu-link {
  display: block;
  padding: var(--s-1xs) 0;
  color: inherit;
  font-size: 2rem;
  font-weight: 400;
  text-decoration: none;
}
.nav__menu-link:hover { text-decoration: underline; }

/* ---------- home hero (image sequence) ---------- */
.home-hero__wrapper { height: 400vh; height: 400svh; }
.home-hero__video-wrapper {
  position: sticky;
  top: var(--s-2xs);
  width: 100%;
  height: calc(100vh - var(--s-s));
  height: calc(100svh - var(--s-s));
  border-radius: var(--s-2xs);
  overflow: hidden;
  /* let op: géén filter hier — dat breekt position:sticky in iOS Safari */
  object-fit: cover;
}
.home-hero__content {
  position: relative;
  z-index: 8;
  color: var(--c-white);
  margin-top: calc(1rem - 100vh);
  margin-top: calc(1rem - 100svh);
}
.home-hero__content-inner {
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: calc(100vh - var(--s-s));
  height: calc(100svh - var(--s-s));
  padding: calc(var(--s-5xl) + 5vh) var(--s-l) var(--s-1xl);
}
.home-hero__content-lower {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}
.image-sequence__element {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.image-sequence__canvas {
  filter: brightness(92%);
  width: 100%;
  height: 100%;
  border-radius: var(--s-3xs);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.image-sequence__element.v-about {
  position: static;
  height: auto;
  padding-top: var(--s-5xl);
  aspect-ratio: 3/2;
}
.image-sequence__canvas.is__about {
  aspect-ratio: 3/2;
  height: auto;
  max-height: calc(100vh - 15rem);
}
[data-trail-item="hidden"] {
  transform: translate(-50%, -50%) scale(0) rotate(-10deg);
  position: absolute;
}
[data-trail-item="visible"] {
  transform: translate(-50%, -50%) scale(1) rotate(.001deg);
  transition: transform .4s cubic-bezier(.625, .05, 0, 1);
  position: absolute;
}
[data-trail-item="transition-out"] {
  transform: translate(-50%, -50%) scale(0) rotate(20deg);
  transition: transform .8s cubic-bezier(.625, 0, .875, 0);
  position: absolute;
}

/* ---------- cascading slider ---------- */
.cascading-slider { position: relative; width: 100%; max-width: 90em; margin: 0 auto; }
.cascading-slider__collection { width: 100%; }
.cascading-slider__list { position: relative; width: 100%; height: 35em; overflow: hidden; }
[data-cascading-viewport] { --gap: .5em; }
[data-cascading-slide] { --clip: 0; --radius: .25rem; }
.cascading-slider__item {
  position: absolute;
  inset: 0 auto auto 0;
  height: 100%;
  color: #fff;
  cursor: pointer;
  /* geen will-change hier: dat hield 16 sliderbeelden permanent als
     aparte laag op de grafische kaart (~84 MB), ook buiten beeld. GSAP
     promoveert zelf tijdens de overgang en geeft de laag daarna weer vrij. */
  clip-path: inset(0px calc(var(--clip) * 1px) round var(--radius));
  user-select: none;
}
[data-cascading-slide][data-status="active"] { cursor: default; }
.cascading-slider__item-inner { position: relative; width: 100%; height: 100%; overflow: hidden; }
.cascading-slider__item-bg { position: absolute; inset: 0; z-index: 0; }
.cascading-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cascading-slider__item-content {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: var(--s-5xl) var(--s-l) var(--s-l);
  background-image: linear-gradient(#0000, #0009 72%);
}
.cascading-slider__h {
  margin: 0;
  opacity: 0;
  font-family: var(--f-head);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(.25em);
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
  transition-delay: 0ms;
}
[data-cascading-slide][data-status="active"] .cascading-slider__h {
  transition-delay: 400ms;
  opacity: 1;
  transform: translate(0, 0);
}
.cascading-slider__nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-s);
  margin: var(--s-1xl) auto 0;
}
.cascading-slider__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s-2xl); height: var(--s-2xl);
  padding: var(--s-s);
  border-radius: var(--s-3xs);
  color: var(--c-white);
  background: #ffffff1a;
  outline: 1px solid transparent;
  transition: all .3s;
}
.cascading-slider__button:hover { background: var(--c-accent); color: var(--c-black); }
.cascading-slider__button:active { outline: 1px solid var(--c-accent); outline-offset: 1px; transform: scale(.9); }
.cascading-slider__button-arrow { width: 20px; height: 20px; }
.cascading-slider__button-arrow.is--prev { transform: rotate(-180deg); }

/* ---------- footer ---------- */
.footer__topper {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(5rem + 5vh) 0;
}
.footer__text {
  display: block;
  margin-bottom: var(--s-s);
  opacity: .5;
  color: var(--c-white);
  font-size: 1rem;
  text-decoration: none;
}
.footer__text:hover { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; }
.footer__text.is__heading { opacity: 1; font-weight: 400; }
.footer__text.is__heading:hover { text-decoration: none; }
.footer__deco { position: absolute; inset: 0 0 0 auto; z-index: 0; }
.footer__deco svg { display: block; height: 100%; width: auto; }
.imprint__wrapper { display: flex; gap: var(--s-1xl); justify-content: center; width: 100%; }
.footer__bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-l);
  margin-top: var(--s-2xl);
}
.footer__bottom .powered-by {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  .footer__bottom { flex-flow: column; align-items: center; }
  .footer__bottom .powered-by { position: static; transform: none; }
}
.imprint__text { opacity: .5; color: var(--c-white); text-decoration: none; }
.powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #ffffff80;
}
.powered-by__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-weight: 500;
}
.powered-by__link { display: flex; color: #ffffff8c; transition: color .2s; }
.powered-by__link:hover { color: #ffffffe6; }
.powered-by__link svg { height: 1rem; width: auto; display: block; }
.section-deco__bottom-left { position: absolute; bottom: 0; left: 0; z-index: 0; height: 70%; }
.section-deco__bottom-left svg { display: block; height: 100%; width: auto; }

/* ---------- diensten: hero + marquee + sticky steps + faq ---------- */
.hero-content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 45rem;
  min-height: 75vh;
  margin: 0 auto;
}

.draggable-marquee {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  flex: none;
  overflow: hidden;
  cursor: grab;
}
.logo-marquee__collection { display: flex; align-items: center; flex: none; max-width: 100%; }
.logo-marquee__list { display: flex; align-items: center; flex: none; }
.logo-marquee__item { flex: none; width: 15rem; }
.logo-marquee__logo {
  height: 10rem;
  width: calc(100% - 1rem);
  margin: 0 var(--s-2xs);
  padding: var(--s-l) var(--s-3xl);
  border: 1px solid var(--c-light);
  border-radius: var(--s-3xs);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  color: var(--c-dark);
}
.logo-marquee__logo svg { width: 100%; height: auto; }
.logo-marquee__dashes-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: var(--s-1xs);
}
.vertical-dash {
  display: block;
  flex: none;
  width: 2px;
  height: var(--s-s);
  border-radius: var(--s-2xl);
  background: var(--c-light);
  transition: all .2s;
}
.vertical-dash:hover { height: var(--s-m); background: var(--c-mid); }
.vertical-dash.is-highlight { width: 3px; height: var(--s-m); background: var(--c-accent); }
.logo-marquee__fade {
  position: absolute;
  inset: 0 auto 0 0;
  width: 7.5rem;
  background-image: linear-gradient(90deg, var(--c-white), transparent);
  pointer-events: none;
  z-index: 2;
}
.logo-marquee__fade.is-right { inset: 0 0 0 auto; transform: rotate(180deg); }

.sticky-steps__collection { min-height: 100dvh; display: flex; position: relative; }
.sticky-steps__list {
  display: flex;
  flex-flow: column;
  flex: 1;
  gap: 50dvh;
  padding: calc(50dvh - 7.5em) 0;
}
.sticky-steps__item {}
.sticky-steps__text { display: flex; flex-flow: column; width: 50%; padding-right: 6em; }
.sticky-steps__media { position: absolute; top: 0; right: 0; width: 50%; height: 100%; padding-left: 3em; }
.sticky-steps__sticky {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  min-height: 100dvh;
  padding-bottom: var(--s-m);
}
.sticky-steps__visual {
  position: relative;
  width: 100%;
  height: calc(100vh - 9.5rem);
  border-radius: var(--s-3xs);
  overflow: hidden;
}
.sticky-steps__cover-image {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .45s ease;
}
[data-sticky-steps-item-status="active"] ~ * {}
.sticky-steps__text { opacity: .25; transition: opacity .45s ease; }
[data-sticky-steps-item-status="active"] .sticky-steps__text { opacity: 1; }

.toggle-item { border-bottom: 1px solid var(--c-light); }
.toggle-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-l);
  width: 100%;
  padding: var(--s-l) 0;
  text-align: left;
  background: transparent;
}
.toggle-item__header-icon { width: var(--s-s); height: var(--s-s); flex: none; }
.toggle-item__header-icon svg { display: block; width: 100%; height: 100%; }
.toggle-item__content { overflow: hidden; height: 0; }
.toggle-item__content-rich { padding-bottom: var(--s-l); }

/* ---------- over ons ---------- */
.about-video__hero {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  padding: calc(5vh + 3rem) 0;
}
.about-video__pinner { position: relative; height: 300vh; }
.about-video__wrapper {
  position: sticky;
  top: var(--s-2xs);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - var(--s-s));
  height: calc(100svh - var(--s-s));
}

.team-members__collection { margin-top: var(--s-3xl); }
.team-members__list { display: grid; grid-template-columns: 1fr; gap: 16px; }
.team-members__item {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  aspect-ratio: 2/2.5;
  max-height: 35rem;
  margin-top: 25%;
  margin-bottom: var(--s-s);
  padding: 0 var(--s-l) var(--s-l);
  border-radius: var(--s-3xs);
  background: #ffffff0a;
}
.team-members__meta { position: relative; z-index: 1; text-align: center; width: 100%; }
.team-members__image {
  position: absolute;
  top: 15%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  aspect-ratio: 2/2.5;
  border-radius: var(--s-3xs);
  object-fit: cover;
  transition: all .8s cubic-bezier(.591, .365, .082, 1.008);
}
.team-members__item:hover .team-members__image { width: 56%; }
.team-members__connect {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-3xs);
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .6s;
}
.team-members__item:hover .team-members__connect { height: auto; opacity: 1; }
.team-members__connect-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s-l); height: var(--s-l);
  color: inherit;
}
.team-members__connect-link:hover { border-radius: var(--s-3xs); background: var(--c-mid); }

.process__scroll-pin {}
.process__stick {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  height: 100vh;
  padding: var(--s-l) 0 var(--s-l) 50%;
}
.process__item-wrapper {}
.process__item-image {
  position: absolute;
  inset: 8rem auto 0 0;
  width: 45%;
  height: calc(100% - 10rem);
  border-radius: var(--s-3xs);
  object-fit: cover;
  opacity: 0;
}
.process__item-content { position: relative; display: flex; }
.process__item-heading {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
  width: 50%;
  flex: none;
  padding: var(--s-1xs) 0;
  opacity: .25;
}
.process__item-icon { width: var(--s-l); height: var(--s-l); flex: none; }
.process__item-text {
  position: absolute;
  left: 50%; top: var(--s-m);
  z-index: 10;
  display: flex;
  gap: var(--s-s);
  width: 50%;
  opacity: 0;
}
.process__stick-line {
  position: absolute;
  inset: 10% auto 10% 75%;
  width: 1px;
  margin-left: 2px;
  background-image: linear-gradient(180deg, #0000, var(--c-light) 15%, var(--c-light) 85%, #0000);
}

/* ---------- projecten ---------- */
.projecten__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-m); }
.projecten__item:nth-child(2n) { margin-top: 15%; }
.projecten__card {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  padding: var(--s-m);
  border-radius: var(--s-3xs);
  color: var(--c-white);
  overflow: hidden;
  text-decoration: none;
  display: block;
}
.projecten__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  border-radius: var(--s-3xs);
  filter: brightness(92%);
  object-fit: cover;
  transition: transform .8s cubic-bezier(.596, .014, 0, 1.008);
}
.projecten__card:hover .projecten__image { transform: scale(1.05); }
.projecten__title {
  position: absolute;
  left: var(--s-m); bottom: var(--s-m);
  z-index: 1;
  margin: 0;
  max-width: calc(100% - 4rem);
  font-family: var(--f-head);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-white);
}
.projecten__card > p {
  position: absolute;
  left: var(--s-m); bottom: var(--s-2xs);
  z-index: 1;
  margin: 0;
  opacity: .8;
}
.projecten__card { display: flex; flex-flow: column; justify-content: flex-end; }
.projecten__card .projecten__title, .projecten__card > p { position: relative; left: auto; bottom: auto; }

/* ---------- contact ---------- */
.contact__spacer {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-1xl);
  height: 80vh;
}
.contact__note {
  max-width: 30rem;
  padding: var(--s-m);
  border-radius: var(--s-3xs);
  background: #ffffff0d;
}
.author__wrapper { display: flex; align-items: center; gap: var(--s-1xs); }
.author__image { width: var(--s-2xl); height: var(--s-2xl); border-radius: var(--s-3xl); object-fit: cover; }
.contact__options-wrapper {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: var(--s-m);
}
.contact__options-item {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
  color: var(--c-mid);
  font-size: 1.1rem;
  text-decoration: none;
  transition: all .2s;
}
.contact__options-item:hover { color: var(--c-white); }
.contact__options-item:hover .contact__options-line { width: var(--s-l); background: var(--c-white); }
.contact__options-line { width: var(--s-s); height: 1px; background: var(--c-mid); transition: all .2s; }
.contact__options-item__detail { color: var(--c-white); }

.form__wrapper {
  max-width: 35rem;
  margin-left: auto;
  padding: var(--s-l);
  border-radius: var(--s-2xs);
  background: var(--c-white);
  color: var(--c-black);
}
.form__wrapper label { display: block; margin-bottom: var(--s-2xs); font-weight: 400; }
.input-field {
  display: block;
  width: 100%;
  height: var(--s-3xl);
  margin-bottom: var(--s-l);
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--c-light);
  color: var(--c-black);
  font-size: 1rem;
  font-family: inherit;
  background: transparent;
  border-radius: 0;
}
.input-field:focus { outline: none; border-bottom-color: var(--c-black); }
.input-field::placeholder { color: #00000066; }
.input-field.is-area { height: auto; min-height: 6rem; padding-top: var(--s-s); resize: vertical; }
.success-unstyled { display: none; padding: 0; background: transparent; text-align: left; }

/* ---------- split text hulpjes ---------- */
.split-mask { overflow: hidden; display: inline-block; vertical-align: bottom; }
.split-seg { display: inline-block; will-change: transform; }

/* verberg pre-animatie flits (JS zet elk element weer zichtbaar bij init) */
.js-anim main section:first-child,
.js-anim .nav__component,
.js-anim :not([data-no-anim]) :is(.h1, .h2, .h3, .h4):not([data-no-anim]),
.js-anim :not([data-no-anim]) p:not([data-no-anim]),
.js-anim .home-hero__content-inner,
.js-anim .divider { visibility: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  :root { --fs-h2: 3rem; --fs-h3: 2rem; --container: min(1450px, calc(100vw - 3rem)); }
  [data-hide-landscape] { display: none !important; }
  .nav__left { display: none; }
  .nav__flex { height: var(--s-3xl); display: flex; }
  .nav__right {
    position: absolute;
    inset: 0 0 auto auto;
    z-index: 12;
    height: var(--s-3xl);
    padding: 0 var(--s-s);
  }
  .nav__wrapper { width: calc(100vw - 3rem); }
  .col__2 { grid-template-columns: 1fr; }
  .col__3 { grid-template-columns: 1fr; }
  .h1.is__home { font-size: calc(3rem + 3vw); }
  .h3.is__bigger { font-size: 2.4rem; }
  .section-deco__bottom-left { max-width: 26%; height: auto; bottom: -1rem; }
  .cascading-slider__h { font-size: 2rem; }
  .cascading-slider__item-content { padding-left: var(--s-s); padding-right: var(--s-s); }
  .sticky-steps__media { position: relative; width: 100%; height: auto; padding-left: 0; top: auto; right: auto; }
  .sticky-steps__text { width: 100%; padding-right: 0; padding-bottom: var(--s-1xl); }
  .sticky-steps__sticky { position: relative; min-height: auto; top: auto; }
  .sticky-steps__visual { aspect-ratio: 3/2; height: auto; }
  .sticky-steps__cover-image { opacity: 1 !important; }
  .sticky-steps__list { padding: 0; gap: var(--s-4xl); }
  .sticky-steps__text { opacity: 1; }
  .team-members__item { max-width: 25rem; margin-left: auto; margin-right: auto; background: #221e19; }
  .team-members__connect { opacity: 1; height: auto; }
  .process__stick {
    height: calc(100vh - 8.5rem);
    margin-top: 7rem;
    margin-bottom: var(--s-m);
    padding: var(--s-m);
    justify-content: flex-start;
    align-items: flex-start;
  }
  .process__item-content { position: static; }
  .process__item-image { top: 0; bottom: 0; z-index: -1; width: 100%; height: 100%; inset: 0; filter: brightness(78%); }
  .process__item-text { width: auto; inset: auto 0 0; left: 0; top: auto; padding: var(--s-m); }
  .process__item-wrapper { color: var(--c-white); }
  .process__stick-line { display: none; }
  .projecten__grid { grid-template-columns: 1fr 1fr; }
  .contact__spacer { height: auto; gap: var(--s-1xl); }
  .col__footer { grid-template-columns: 2fr 1fr; gap: var(--s-2xl); }
  .footer__topper { padding-left: var(--s-s); padding-right: var(--s-s); }
}

@media (max-width: 767px) {
  :root { --fs-h2: 2.25rem; --fs-h3: 1.65rem; --fs-body-l: 1.15rem; }
  .h3.is__bigger { font-size: 1.8rem; }
  .h3.is-service-item { font-size: 1.65rem; width: fit-content; }
  .nav__logo-embed { width: 7.5rem; }
  .nav__wrapper { max-width: calc(min(1450px, calc(100vw - 2rem)) - var(--s-3xl)); }
  .section { padding-left: 0; padding-right: 0; }
  .section.is__dark { padding-left: var(--s-s); padding-right: var(--s-s); }
  .section.is__dark.v__footer { padding: var(--s-2xl) var(--s-s); }
  .col__2 { gap: var(--s-2xl); }
  .section-deco__bottom-left { width: 6.5rem; bottom: -1rem; }
  .footer__deco.v-footer { max-width: 9.5rem; height: auto; }
  .footer__deco.v-footer svg { width: 100%; height: auto; }
  .image-sequence__canvas.is__about { aspect-ratio: 1; }
  .home-hero__content-inner { padding: 0 var(--s-s) var(--s-s); text-align: left; }
  .projecten__grid { display: flex; flex-flow: column; gap: var(--s-s); }
  .projecten__item:nth-child(2n) { margin-top: 0; }
  .projecten__card { aspect-ratio: 2/2.75; }
  .team-members__item { padding: 60% var(--s-m) var(--s-m); }
  .contact__note { padding: var(--s-s); }
  .form__wrapper { padding: var(--s-m); }
  .logo-marquee__item { width: 12rem; }
  .logo-marquee__logo { height: 8rem; padding: var(--s-l); }
  .footer__topper { padding-top: 5rem; padding-bottom: 5rem; }
  .col__footer { grid-template-columns: 1fr; gap: var(--s-2xl); }
}

/* ---------- VMO-monogram: één kleur, transparant, glasachtig ---------- */
.vmo-glass {
  /* massieve, egale letters: geen rand, geen schaduw, geen contour */
  display: block;
}


/* (mobiele hero: zie het blok "HERO — mobiel scrubt via frame-reeks" onderaan) */


/* ============================================================
   HERONTWERP HOME — eigen sectievormen
   ============================================================ */


/* kleurstalen onder de band */

/* ============================================================
   2. Disciplines — lijst links, paneel rechts
   ============================================================ */
.disciplines__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3xl);
  align-items: end;
  margin-bottom: var(--s-2xl);
}
.disciplines__head h2 { margin: 0; }
.disciplines__head p { margin: 0; color: rgba(255, 255, 255, .68); }

.disciplines {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--s-2xl);
  align-items: start;
}
.disciplines__list {
  display: flex;
  flex-flow: column;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.disciplines__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-s);
  align-items: baseline;
  width: 100%;
  padding: var(--s-m) 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: none;
  color: rgba(255, 255, 255, .55);
  text-align: left;
  font-family: var(--f-body);
  cursor: pointer;
  transition: color .3s;
}
.disciplines__item:hover { color: rgba(255, 255, 255, .85); }
.disciplines__item.is-active { color: var(--c-white); }
.disciplines__no {
  font-size: var(--fs-body-s);
  letter-spacing: .14em;
  color: var(--c-accent);
  opacity: .55;
  transition: opacity .3s;
}
.disciplines__item.is-active .disciplines__no { opacity: 1; }
.disciplines__name {
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.1;
}
.disciplines__meta {
  grid-column: 2;
  margin-top: var(--s-3xs);
  font-size: var(--fs-body-s);
  color: rgba(255, 255, 255, .45);
}

.disciplines__panel { position: relative; }
.disciplines__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--s-2xs);
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
}
.disciplines__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .55s ease;
}
.disciplines__media img.is-active { opacity: 1; }
.disciplines__body { padding-top: var(--s-m); }
.disciplines__text {
  margin: 0 0 var(--s-m);
  max-width: 34rem;
  color: rgba(255, 255, 255, .78);
}
.disciplines__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.disciplines__points li {
  padding: var(--s-3xs) var(--s-1xs);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 2rem;
  font-size: var(--fs-body-s);
  color: rgba(255, 255, 255, .72);
}

/* ============================================================
   3. Kleurkaarten — waar je ons op mag afrekenen
   ============================================================ */
.standard__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3xl);
  align-items: end;
  margin-bottom: var(--s-2xl);
}
.standard__head h2 { margin: 0; }
.standard__head p { margin: 0; color: var(--c-text-soft); }

.standard__deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-s);
}
.swatch-card {
  position: relative;
  display: flex;
  flex-flow: column;
  padding: var(--s-m) var(--s-m) var(--s-2xl);
  border-radius: var(--s-2xs);
  background: linear-gradient(168deg, rgba(38, 33, 28, .96) 0%, rgba(20, 17, 14, .97) 60%, rgba(13, 11, 9, .98) 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 24px 48px -30px rgba(0, 0, 0, .6);
  color: var(--c-white);
  isolation: isolate;
  overflow: hidden;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.swatch-card:nth-child(1) { --tilt: -1.1deg; }
.swatch-card:nth-child(2) { --tilt: .4deg; }
.swatch-card:nth-child(3) { --tilt: 1.2deg; }
.swatch-card:hover { transform: rotate(0deg) translateY(-6px); }

.swatch-card__chip {
  height: 4.5rem;
  margin: calc(var(--s-m) * -1) calc(var(--s-m) * -1) var(--s-m);
  background: var(--chip, #ddd);
}
.swatch-card__code {
  margin-bottom: var(--s-2xs);
  font-size: var(--fs-body-s);
  letter-spacing: .18em;
  color: var(--c-accent);
}
.swatch-card h3 { margin: 0 0 var(--s-2xs); }
.swatch-card p { margin: 0; color: rgba(255, 255, 255, .72); }
.swatch-card .vmo-glass {
  position: absolute;
  right: -.5rem;
  bottom: -3.5rem;
  width: 58%;
  height: auto;
  z-index: -1;
  pointer-events: none;
}


/* ---------- responsief ---------- */
@media (max-width: 991px) {
  .disciplines__head,
  .standard__head,
  .disciplines { grid-template-columns: 1fr; gap: var(--s-m); }
  .standard__deck { grid-template-columns: 1fr; }
  .swatch-card { --tilt: 0deg; }
}


/* ---------- cijferband ---------- */
.figures__head { margin-bottom: var(--s-l); }
.figures__head h2 { margin: 0; }
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2xs);
}
.figures__item {
  padding: var(--s-m);
  border-radius: var(--s-2xs);
  background: var(--c-tint);
}
.figures__value {
  display: block;
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.figures__value span { color: var(--c-accent); }
.figures__label {
  margin: var(--s-2xs) 0 0;
  font-size: var(--fs-body-s);
  color: var(--c-text-soft);
}
@media (max-width: 991px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .figures { grid-template-columns: 1fr; } }


/* ---------- fotoband die zelf doorloopt (diensten-hero) ---------- */
.photo-band {
  margin-top: var(--s-2xl);
  padding-bottom: var(--s-s);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.photo-band__track { display: flex; width: max-content; will-change: transform; }
.photo-band__set { display: flex; gap: var(--s-2xs); padding-right: var(--s-2xs); }
.photo-band__set img {
  width: clamp(11rem, 17vw, 17rem);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--s-3xs);
  display: block;
}
.photo-band__set img:nth-child(3n+2) { aspect-ratio: 4 / 5; transform: translateY(var(--s-s)); }

/* ---------- projecttypen op donkere sectie ---------- */
.types__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--s-2xs);
  overflow: hidden;
}
.types__item {
  padding: var(--s-m);
  background: #101013;
}
.types__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--s-s);
  color: var(--c-accent);
}
.types__icon svg { width: 100%; height: 100%; }
.types__item h3 {
  margin: 0 0 var(--s-2xs);
  font-family: var(--f-head);
  font-weight: 400;
  font-size: var(--fs-h5);
  color: var(--c-white);
}
.types__item p { margin: 0; font-size: var(--fs-body-s); color: rgba(255, 255, 255, .66); }
@media (max-width: 640px) { .types__grid { grid-template-columns: 1fr; } }


/* De ingezoomde hero (schaal 1.05) mag geen horizontale schuifbalk geven.
   `clip` en niet `hidden`: hidden zou van dit element een scrollcontainer
   maken en daarmee position:sticky in de hero breken. */
.page__wrapper { overflow-x: clip; }


/* de twee toestanden van dezelfde ruimte, exact over elkaar */

/* laag die de bezoeker zelf aanbrengt door te bewegen */

/* donker sluier zodat de tekst in beide toestanden leesbaar blijft */

/* de natte rand */

/* de kop: eerst alleen de contour, hij loopt vol zodra de verf eroverheen gaat */


/* ============================================================
   1. VIER LAGEN — isometrische doorsnede die zich samenvoegt
   ============================================================ */



@media (max-width: 991px) {
}

/* ============================================================
   4. WAAR JE ONS TEGENKOMT — beeldenharmonica
   ============================================================ */
.strip__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-m);
  margin-bottom: var(--s-l);
}
.strip__head h2 { margin: 0; }

.strip {
  display: flex;
  gap: var(--s-3xs);
  height: clamp(20rem, 40vw, 28rem);
}
.strip__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: var(--s-3xs);
  overflow: hidden;
  cursor: pointer;
  background: var(--c-dark);
  color: var(--c-white);
  text-align: left;
  font-family: var(--f-body);
  transition: flex-grow .55s cubic-bezier(.2, .7, .2, 1);
}
.strip__panel.is-open { flex-grow: 3.4; cursor: default; }
.strip__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.strip__panel.is-open .strip__img { transform: scale(1.04); }
.strip__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 12, .12) 0%, rgba(20, 16, 12, .28) 45%, rgba(16, 12, 9, .86) 100%);
}
.strip__titel {
  position: absolute;
  z-index: 1;
  left: var(--s-m);
  bottom: var(--s-m);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: var(--fs-h5);
  letter-spacing: .01em;
  white-space: nowrap;
}
.strip__panel.is-open .strip__titel {
  writing-mode: horizontal-tb;
  transform: none;
  bottom: auto;
  top: var(--s-m);
  font-size: var(--fs-h3);
  font-weight: 300;
}
.strip__tekst {
  position: absolute;
  z-index: 1;
  left: var(--s-m);
  right: var(--s-m);
  bottom: var(--s-m);
  max-width: 24rem;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: rgba(255, 255, 255, .84);
  opacity: 0;
  transform: translateY(var(--s-2xs));
  transition: opacity .4s ease .12s, transform .4s ease .12s;
}
.strip__panel.is-open .strip__tekst { opacity: 1; transform: none; }

/* mobiel: geen stapel maar een veegbare rij kaarten die aan de rand uitsteken */
@media (max-width: 767px) {
  .strip {
    flex-flow: row nowrap;
    height: 64vh;
    height: 64svh;
    max-height: 34rem;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--s-2xs);
    margin-inline: -1.5rem;
    padding: 0 1.5rem var(--s-s);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .strip::-webkit-scrollbar { display: none; }
  .strip__panel,
  .strip__panel.is-open { flex: 0 0 78vw; height: 100%; scroll-snap-align: center; cursor: default; }
  .strip__panel.is-open .strip__img { transform: none; }
  .strip__titel,
  .strip__panel.is-open .strip__titel {
    writing-mode: horizontal-tb;
    transform: none;
    bottom: auto;
    top: var(--s-s);
    left: var(--s-s);
    right: var(--s-s);
    font-size: var(--fs-h3);
    font-weight: 300;
  }
  .strip__tekst { opacity: 1; transform: none; left: var(--s-s); right: var(--s-s); bottom: var(--s-s); }
}

/* ============================================================
   6. DE OPLEVERLIJST — vinkt zichzelf af tijdens het scrollen
   ============================================================ */
.oplever__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-m);
  margin-bottom: var(--s-l);
}
.oplever__head h2 { margin: 0; }


@media (max-width: 767px) {
}

/* ============================================================
   SLOT — gewoon het nummer, groot
   ============================================================ */
.bel { padding-top: var(--s-4xl); padding-bottom: var(--s-4xl); }
.bel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--s-3xl);
  align-items: end;
}
.bel__aanhef {
  margin: 0 0 var(--s-2xs);
  font-size: var(--fs-body-s);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.bel__nummer {
  display: block;
  font-family: var(--f-head);
  font-weight: 300;
  font-size: clamp(2.4rem, 7.4vw, 6rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.bel__nummer:hover { color: var(--c-accent); }
.bel__mail {
  display: inline-block;
  margin-top: var(--s-1xs);
  font-size: var(--fs-body-l);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  padding-bottom: 2px;
  transition: border-color .25s ease, color .25s ease;
}
.bel__mail:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.bel__zij p { margin: 0 0 var(--s-m); color: var(--c-text-soft); }
.bel__regels { border-top: 1px solid #80808033; }
.bel__regel {
  display: flex;
  justify-content: space-between;
  gap: var(--s-s);
  padding: var(--s-2xs) 0;
  border-bottom: 1px solid #80808033;
  font-size: var(--fs-body-s);
}
.bel__regel span:first-child {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}

@media (max-width: 991px) {
  .bel__grid { grid-template-columns: 1fr; gap: var(--s-l); align-items: start; }
}


/* ============================================================
   TOEVOEGINGEN — patronen 01 t/m 20
   ============================================================ */

/* ---------- 02 · voortgangsbalk bij het scrollen ---------- */
.leesbalk {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
.leesbalk i { display: block; height: 100%; width: 0; background: var(--c-accent); }

/* ---------- 03 · terug naar boven ---------- */
.omhoog {
  position: fixed; right: var(--s-m); bottom: var(--s-m); z-index: 55;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(0,0,0,.14); background: var(--c-paper); color: var(--c-ink);
  opacity: 0; visibility: hidden; transform: translateY(.5rem);
  transition: opacity .3s, transform .3s, visibility .3s, border-color .2s, color .2s;
}
.omhoog.is-zichtbaar { opacity: 1; visibility: visible; transform: none; }
.omhoog:hover { border-color: var(--c-accent); color: var(--c-accent); }
.omhoog:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.omhoog svg { width: 1.1rem; height: 1.1rem; }

/* ---------- 06 · kopieerknop bij nummer en mail ---------- */
.kopieer {
  margin-left: var(--s-2xs); font-family: var(--f-body); font-size: var(--fs-body-s);
  padding: .25rem .6rem; border: 1px solid #80808044; border-radius: var(--s-3xs);
  background: none; color: var(--c-text-soft); cursor: pointer; vertical-align: middle;
  transition: border-color .2s, color .2s;
}
.kopieer:hover { border-color: var(--c-accent); color: var(--c-accent); }
.kopieer:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.kopieer.is-gelukt { border-color: var(--c-accent); color: var(--c-accent); }

/* ---------- 09 · belbalk op de telefoon ---------- */
.belbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; display: none;
  align-items: center; justify-content: center; gap: var(--s-2xs);
  padding: .85rem; background: var(--c-accent); color: #241d09;
  font-family: var(--f-body); font-size: .95rem; text-decoration: none;
  box-shadow: 0 -6px 20px -12px rgba(0,0,0,.5);
}
.belbalk svg { width: 1.05rem; height: 1.05rem; }
@media (max-width: 767px) {
  .belbalk { display: flex; }
  body { padding-bottom: 3.4rem; }
  .omhoog { bottom: 4.2rem; }
}



/* ---------- 05 · lichtbak ---------- */
.lichtbak {
  border: none; padding: 0; background: none; max-width: 92vw; max-height: 92vh;
  color: var(--c-ink);
}
.lichtbak::backdrop { background: rgba(16,13,10,.86); }
.lichtbak img { display: block; max-width: 92vw; max-height: 78vh; border-radius: var(--s-2xs); }
.lichtbak__balk {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-m);
  margin-top: var(--s-2xs); color: #fff; font-size: var(--fs-body-s);
}
.lichtbak__knoppen { display: flex; gap: var(--s-2xs); }
.lichtbak button {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.3); background: none; color: #fff;
  display: grid; place-items: center;
}
.lichtbak button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.lichtbak button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.lichtbak svg { width: 1rem; height: 1rem; }
.projecten__image { cursor: zoom-in; }

/* ---------- 07 · bevestiging na versturen ---------- */
.melding {
  position: fixed; left: 50%; bottom: var(--s-l); transform: translate(-50%, .6rem); z-index: 70;
  background: var(--c-dark); color: var(--c-paper);
  padding: .7rem 1.1rem; border-radius: var(--s-3xs); font-size: var(--fs-body-s);
  opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility .3s;
  max-width: min(28rem, 90vw);
}
.melding.is-aan { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- 08 · meelezende foutmeldingen ---------- */
.veldfout {
  display: block; min-height: 1.1em; margin: .2rem 0 var(--s-2xs);
  font-size: var(--fs-body-s); color: #9a4b2a;
}
.input-field.is-fout { border-color: #9a4b2a; }
.input-field.is-goed { border-color: #4a6b3d; }

/* ---------- 10 · uitleg bij de vaktermen ---------- */
.uitleg { position: relative; border-bottom: 1px dotted var(--c-accent); cursor: help; }
.uitleg__bel {
  position: absolute; left: 50%; bottom: 135%; transform: translateX(-50%) translateY(.3rem);
  background: var(--c-dark); color: var(--c-paper); font-size: var(--fs-body-s);
  padding: .45rem .7rem; border-radius: var(--s-3xs); width: max-content; max-width: 15rem;
  opacity: 0; visibility: hidden; transition: all .2s; z-index: 5; pointer-events: none;
  font-family: var(--f-body); line-height: 1.4;
}
.uitleg:hover .uitleg__bel, .uitleg:focus-visible .uitleg__bel, .uitleg.is-open .uitleg__bel {
  opacity: 1; visibility: visible; transform: translateX(-50%);
}

/* ---------- 11 · gordijn-onthulling ---------- */
.gordijn { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.2,.7,.2,1); }
.gordijn.van-rechts { clip-path: inset(0 0 0 100%); }
.gordijn.is-open { clip-path: inset(0 0 0 0); }

/* ---------- 12 · tekst scherpstellen ---------- */

/* ---------- 16 · kop die uiteenschuift ---------- */
@media (hover: hover) {
}

/* ---------- 19 · drijvende kolommen achter het slotblok ---------- */
.drijf {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  display: flex; gap: var(--s-2xs); opacity: .12;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.drijf__kolom { flex: 1; }
.drijf__inner { display: flex; flex-flow: column; gap: var(--s-2xs); will-change: transform; }
.drijf__inner img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--s-3xs); display: block; }
.footer__topper { position: relative; isolation: isolate; }

/* ---------- 20 · dominogolf door de kleurkaarten ---------- */
@media (hover: hover) {
  .standard__deck.is-domino .swatch-card { transition: transform .5s cubic-bezier(.34,1.3,.5,1); }
}


/* ---------- 17 · spotlight-index ---------- */
.spot { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.62fr); gap: var(--s-2xl); align-items: start; }
.spot__lijst { display: flex; flex-flow: column; border-top: 1px solid #80808033; }
.spot__rij {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-m);
  width: 100%; padding: var(--s-m) 0; border: none; border-bottom: 1px solid #80808033;
  background: none; color: inherit; text-align: left; cursor: pointer;
  font-family: var(--f-body); opacity: .45;
  transition: opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.spot__rij.is-hier { opacity: 1; transform: translateX(var(--s-m)); }
.spot__rij:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.spot__naam { font-family: var(--f-head); font-weight: 300; font-size: clamp(1.5rem,3.6vw,2.6rem); line-height: 1.05; letter-spacing: -.02em; }
.spot__plaats { font-size: var(--fs-body-s); color: var(--c-text-soft); white-space: nowrap; }
.spot__venster {
  position: sticky; top: 22vh; aspect-ratio: 3/4; border-radius: var(--s-2xs);
  overflow: hidden; background: var(--c-tint);
}
.spot__venster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .4s, transform .8s cubic-bezier(.2,.7,.2,1); }
.spot__venster img.is-wissel { opacity: 0; transform: scale(1.06); }
@media (max-width: 899px) {
  .spot { grid-template-columns: 1fr; }
  .spot__venster { display: none; }
  .spot__rij { opacity: 1; }
  .spot__rij.is-hier { transform: none; }
}

/* ---------- 15 · tijdlijn die zich tekent ---------- */
.tijdlijn { position: relative; padding-left: var(--s-l); max-width: 44rem; margin: 0 auto; }
.tijdlijn__lijn { position: absolute; left: .38rem; top: .6rem; width: 2px; height: 0; background: var(--c-accent); }
.tijdlijn__lijst { margin: 0; padding: 0; list-style: none; }
.tijdlijn__punt {
  position: relative; padding: var(--s-m) 0;
  opacity: 0; transform: translateY(.6rem); transition: opacity .5s, transform .5s;
}
.tijdlijn__punt.is-aan { opacity: 1; transform: none; }
.tijdlijn__punt::before {
  content: ""; position: absolute; left: calc(var(--s-l) * -1 + .13rem); top: calc(var(--s-m) + .55rem);
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-accent);
  transform: scale(0); transition: transform .4s cubic-bezier(.34,1.4,.5,1);
}
.tijdlijn__punt.is-aan::before { transform: scale(1); }
.tijdlijn__kop { display: block; font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h4); margin-bottom: var(--s-3xs); }
.tijdlijn__punt p { margin: 0; color: var(--c-text-soft); }


/* ============================================================
   De opleverlijst als document — het papier dat de schilder
   achterlaat, niet zomaar een rij vinkjes
   ============================================================ */
.lijst {
  max-width: 52rem; margin: 0 auto; position: relative;
  background: var(--c-paper); border: 1px solid rgba(0,0,0,.09);
  border-radius: var(--s-3xs);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 50px -34px rgba(60,45,25,.45);
}
/* de nietrand links, zoals op een echt formulier */
.lijst::before {
  content: ""; position: absolute; left: 2.6rem; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.10) 0 5px, transparent 5px 11px);
}

.lijst__kop {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-m);
  padding: var(--s-m) var(--s-m) var(--s-1xs) calc(2.6rem + var(--s-m));
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.lijst__soort {
  display: block; font-family: var(--f-body); font-size: var(--fs-body-s);
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent);
}
.lijst__project {
  display: block; margin-top: .15rem;
  font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h5);
}

/* voortgangsring */
.lijst__ring { position: relative; width: 3.1rem; height: 3.1rem; flex: none; }
.lijst__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lijst__ring circle { fill: none; stroke-width: 3; }
.lijst__ring-baan { stroke: rgba(0,0,0,.10); }
.lijst__ring-vul {
  stroke: var(--c-accent); stroke-linecap: round;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4;
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1);
}
.lijst__ring-tekst {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-mono, var(--f-body)); font-size: .72rem; color: var(--c-text-soft);
  font-variant-numeric: tabular-nums;
}
.lijst__ring-tekst b { font-weight: 500; color: var(--c-ink); }

.lijst__rijen { margin: 0; padding: 0; list-style: none; }
.lijst__rij {
  display: grid; grid-template-columns: 2.6rem 1.5rem 1fr auto;
  align-items: center; gap: var(--s-2xs);
  padding: .75rem var(--s-m) .75rem 0;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.lijst__rij:last-child { border-bottom: none; }
.lijst__nr {
  justify-self: center; font-family: var(--f-body); font-size: .72rem;
  color: var(--c-ink-faint, var(--c-text-soft)); font-variant-numeric: tabular-nums;
}
.lijst__vak {
  width: 1.45rem; height: 1.45rem; display: grid; place-items: center;
  border: 1px solid rgba(0,0,0,.28); border-radius: 2px;
  color: var(--c-accent); background: transparent;
  transition: border-color .35s, background .35s;
}
.lijst__vak svg { width: 1.1rem; height: 1.1rem; overflow: visible; }
/* het vinkje tekent zichzelf, als een pen */
.lijst__haak { stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset .5s ease; }
.lijst__tekst { color: var(--c-text-soft); transition: color .35s; }
.lijst__stempel {
  font-family: var(--f-body); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent); border: 1px solid currentColor; border-radius: 2px;
  padding: .1rem .4rem; opacity: 0; transform: rotate(-4deg) scale(.85);
  transition: opacity .35s, transform .45s cubic-bezier(.34,1.4,.5,1);
}
.lijst__rij.is-af .lijst__vak { border-color: var(--c-accent); background: rgba(212,175,71,.10); }
.lijst__rij.is-af .lijst__haak { stroke-dashoffset: 0; }
.lijst__rij.is-af .lijst__tekst { color: var(--c-ink); }
.lijst__rij.is-af .lijst__stempel { opacity: 1; transform: rotate(-4deg) scale(1); }

.lijst__voet {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-m);
  padding: var(--s-m) var(--s-m) var(--s-m) calc(2.6rem + var(--s-m));
  border-top: 1px solid rgba(0,0,0,.12);
}
.lijst__handtekening { display: flex; flex-flow: column; gap: .1rem; }
.lijst__krabbel { width: 9rem; height: 2.1rem; color: var(--c-ink); opacity: .75; }
.lijst__krabbel path { stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset 1.6s ease .5s; }
.lijst.is-af .lijst__krabbel path { stroke-dashoffset: 0; }
.lijst__handtekening span,
.lijst__vrij-label {
  font-size: var(--fs-body-s); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-soft);
}
.lijst__vrij { text-align: right; display: flex; flex-flow: column; gap: .1rem; }
.lijst__vrij-datum { font-family: var(--f-head); font-weight: 400; font-size: var(--fs-h5); }

@media (max-width: 640px) {
  .lijst::before { left: 1.6rem; }
  .lijst__kop, .lijst__voet { padding-left: calc(1.6rem + var(--s-s)); padding-right: var(--s-s); }
  .lijst__rij { grid-template-columns: 1.6rem 1.35rem 1fr; padding-right: var(--s-s); row-gap: .2rem; }
  .lijst__stempel { grid-column: 3; justify-self: start; }
  .lijst__voet { flex-flow: column; align-items: flex-start; }
  .lijst__vrij { text-align: left; }
}

/* ============================================================
   DE WAND · vier lagen, vier gangen (signatuur-scène)
   Het scherm is de muur, in het kader van het huis (zoals de hero).
   Vier echte wandfoto's in de volgorde van het vak: voorstrijken,
   stucen, grondlaag verven, aflakken. Elke gang komt van boven als
   vlak over de vorige (translateY op een eigen composited laag). De
   tekst van een gang zit achter een clippend dek en wordt met een
   tegengestelde translate op zijn plek gehouden, zodat de natte rand
   hem vrijgeeft. Alleen transforms en opacity, geen filters, geen
   overflow:hidden rond de sticky stage (iOS).
   ============================================================ */
.wand {
  position: relative;
  height: 380vh;
  height: 380svh;
  --stage-h: calc(100vh - var(--s-s));
  --stage-h: calc(100svh - var(--s-s));
  --w-kant: rgb(33 29 25 / .22);
  --w-nat:  rgb(33 29 25 / .15);   /* natte verf is donkerder dan droge, niet witter */
}
.wand__stage {
  position: sticky;
  top: var(--s-2xs);
  height: var(--stage-h);
  border-radius: var(--s-2xs);
  overflow: hidden;
  overflow: clip;
  background: #47433e;
  --p1: 0; --p2: 0; --p3: 0;      /* JS schrijft deze per scrollstap */
}

.wand__laag {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--tekst);
}
.wand__laag--s1 { --tekst: var(--c-paper); background-image: url("../images/wand-1-voorstrijken.jpg"); }
.wand__laag--s2 { --tekst: var(--c-paper); background-image: url("../images/wand-2-stucen.jpg"); }
.wand__laag--s3 { --tekst: var(--c-ink);   background-image: url("../images/wand-3-grondlaag.jpg"); }
.wand__laag--s4 { --tekst: var(--c-ink);   background-image: url("../images/wand-4-aflakken.jpg"); }

/* de gang: van boven het beeld in; eigen laag, zodat de stage niet per stap opnieuw tekent */
.wand__laag--neer { transform: translateY(calc((var(--p) - 1) * 100%)); will-change: transform; }

/* het dek clipt; het tekstblok krijgt de tegengestelde translate (klein, eigen laag) */
.wand__dek { position: absolute; inset: 0; overflow: hidden; overflow: clip; z-index: 2; }  /* tekst bovenop: de roller gaat erachter langs */
.wand__laag--neer .wand__tekst { transform: translateY(calc((1 - var(--p)) * var(--stage-h))); will-change: transform; }

/* de natte rand: iets donkerder en één strakke kant */
.wand__laag--neer::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 8vh;
  background: linear-gradient(to top, var(--w-nat), transparent);
  border-bottom: 1px solid var(--w-kant);
  pointer-events: none;
}

.wand__tekst {
  position: absolute;
  left: calc((100% - var(--container)) / 2);   /* zelfde kantlijn als de rest van de site */
  top: 34svh;
  width: min(38rem, var(--container));
  color: inherit;
}
/* de uitgaande tekst is weg vóór de natte rand hem raakt */
.wand__laag--s1 .wand__tekst { opacity: calc(1 - clamp(0, (var(--p1) - .16) * 9, 1)); }
.wand__laag--s2 .wand__tekst { opacity: calc(1 - clamp(0, (var(--p2) - .16) * 9, 1)); }
.wand__laag--s3 .wand__tekst { opacity: calc(1 - clamp(0, (var(--p3) - .16) * 9, 1)); }

.wand__kop,
.wand__stap {
  margin: 0 0 var(--s-1xs);
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: inherit;
}
.wand__stap { margin-bottom: var(--s-m); }
.wand__uitleg {
  margin: 0;
  max-width: 31rem;
  font-size: var(--fs-body-l);
  line-height: 1.6;
  color: inherit;
}
.wand__tijd {
  margin: var(--s-m) 0 0;
  font-size: var(--fs-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: inherit;
  opacity: .72;
}

/* de roller: rijdt op de natte rand van zijn eigen gang mee naar beneden en
   veegt tegelijk opzij, zodat het lijkt alsof hij de laag aanbrengt. Elke gang
   veegt de andere kant op, zoals een schilder baan na baan werkt. */
.wand__roller {
  position: absolute;
  left: 68%;                           /* rechts van de tekstkolom */
  bottom: 0;
  width: clamp(220px, 26vw, 460px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  --veeg: 13vw;                        /* halve haal; de volle haal is dus 26vw */
  --kant: 1;                           /* 1 = naar rechts, -1 = naar links */
  /* omlaag met de rand, opzij met de haal; het midden van de vacht op de onderrand */
  transform: translate(calc(-50% + (var(--p) - .5) * var(--veeg) * 2 * var(--kant)), 22.9%);
  /* onzichtbaar in rust en na de gang; daartussen 1 */
  opacity: min(1, calc(var(--p) * 40), calc((1 - var(--p)) * 40));
}
.wand__laag--s3 .wand__roller { --kant: -1; }

/* vier tikken: hoeveel lagen er liggen */
.wand__meter {
  position: absolute;
  left: calc((100% - var(--container)) / 2);
  bottom: clamp(1.5rem, 5vh, 3rem);
  margin: 0; padding: 0; list-style: none;
  display: flex; gap: 6px;
  z-index: 2;
}
.wand__meet { position: relative; width: 10px; height: 28px; border: 1px solid rgb(251 248 243 / .5); }
.wand__meet::before {
  content: "";
  position: absolute; inset: 1px;
  background: var(--c-paper);
  transform-origin: 50% 100%;
  transform: scaleY(var(--p, 0));
}
.wand__meet.is-vast::before { transform: none; }

@media (max-width: 991px) {
  .wand__roller { width: 40vw; left: 70%; --veeg: 10vw; }
}
@media (max-width: 767px) {
  .wand { height: 300vh; height: 300svh; }
  .wand__kop, .wand__stap { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .wand__uitleg { font-size: 1rem; max-width: 88%; }
  .wand__tijd { font-size: .875rem; }
  .wand__roller { width: 46vw; left: 72%; --veeg: 8vw; }
  .wand__meter { bottom: calc(3.4rem + var(--s-m)); }   /* boven de vaste belbalk */
}

/* zonder JS, met reduced motion of ?static=1: vier banen onder elkaar, alles leesbaar */
html:not(.js-anim) .wand { height: auto; }
html:not(.js-anim) .wand__stage { position: relative; height: auto; overflow: visible; background: none; }
html:not(.js-anim) .wand__laag { position: relative; inset: auto; transform: none; padding: clamp(3rem, 12vh, 6rem) 0; will-change: auto; }
html:not(.js-anim) .wand__laag--neer::after { display: none; }
html:not(.js-anim) .wand__dek { position: static; overflow: visible; }
html:not(.js-anim) .wand__tekst { position: relative; top: auto; left: auto; margin-left: calc((100% - var(--container)) / 2); transform: none; opacity: 1; will-change: auto; }
html:not(.js-anim) .wand__roller, html:not(.js-anim) .wand__meter { display: none; }
/* ============================================================
   NEGEN PUNTEN — de belofte ontgrijst zichzelf
   Vervangt de oude opleverlijst (.oplever__head en het hele
   .lijst-blok, inclusief de mobiele varianten).

   Eén idee: de negen zinnen landen als één zacht grijs tekstvlak en
   verharden daarna van boven naar beneden, maar alleen op het
   openingswoord. Onder elkaar staat dan de route die de uitvoerder
   loopt: Wanden, Kleur, Kozijnen, Plinten, Kitnaden, Radiatoren,
   Plafondhoeken, Afplakband, Dekzeilen. Het afvinken zit dus in
   kleurdiepte, niet in een symbool: er is geen vakje, geen haakje,
   geen nummer, geen ring en geen stempel meer.

   De kop is kleiner gezet dan de lijst. Dat is de omkering die van
   deze sectie een typografiesectie maakt: de kop is het bijschrift,
   de belofte is het onderwerp. Zelfde font, zelfde kapitaal, zelfde
   gewicht als elke andere h2 op de pagina, alleen kleiner.

   Alleen opacity, transform en color. Geen filter, geen sticky, geen
   overflow-truc, geen will-change, geen rAF, geen muispositie.
   Zonder JS (geen .js-anim) staat alles meteen in de eindstand.
   ============================================================ */
:root {
  --negen-lucht: clamp(var(--s-4xl), 12vh, 9rem);
  --negen-maat: clamp(1.3rem, 3.2vw, 3.05rem);
  --negen-kop: clamp(1.6rem, 2.2vw, 2.35rem);

  /* Ruststaat van de zin. --c-mid haalt op papier maar 3,4:1 en dat
     is een AA-fail zodra de regel klein staat; deze mix haalt 4,1:1
     bij grote maat en 5,1:1 in de kleine variant hieronder. De sprong
     naar vol --c-ink blijft groot genoeg om het effect te dragen.
     Blijkt het blok in de browser te vlak: zet --negen-rust een stap
     lichter (52%) en laat de kern op --c-ink staan. Nooit een
     streepje, vakje of markering toevoegen. */
  --negen-rust: color-mix(in srgb, var(--c-ink) 58%, var(--c-paper));
  --negen-rust-klein: color-mix(in srgb, var(--c-ink) 65%, var(--c-paper));
  --negen-klein: color-mix(in srgb, var(--c-ink) 70%, var(--c-paper));

  /* Het goud van de site haalt op papierwit maar 2:1 en zou als enig
     betekenisdragend woord onleesbaar zijn. Dit is hetzelfde goud,
     dieper ingezet in de inkt: 4,7:1, dus AA op elke maat. */
  --negen-goud: color-mix(in srgb, var(--c-accent) 55%, var(--c-ink));

  --negen-stap: 58ms;
  --negen-fade: 480ms;
  --negen-schuif: 760ms;
  --negen-kleur: 460ms;
  --negen-wacht: 300ms;
  --negen-op: .34em;
  --negen-ease: cubic-bezier(.16, 1, .3, 1);
  --negen-ease-kleur: cubic-bezier(.33, 1, .68, 1);
}

.negen { padding-top: var(--negen-lucht); padding-bottom: var(--negen-lucht); }

.negen__head {
  display: grid;
  grid-template-columns: 1fr minmax(0, 32ch);
  align-items: start;
  gap: var(--s-l);
}
.negen__kop {
  margin: 0;
  font-size: var(--negen-kop);
  line-height: 1.12;
  letter-spacing: -.005em;
}
.negen__lead {
  margin: 0;
  justify-self: end;
  max-width: 32ch;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--negen-rust-klein);
}

/* de negen regels: geen nummer, geen bullet, geen lijn, geen kolom.
   De linkerrand staat exact op de containerrand, gelijk met de kop. */
.negen__lijst {
  margin: clamp(var(--s-2xl), 6vw, var(--s-5xl)) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: column;
  gap: .3em;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: var(--negen-maat);
  line-height: 1.14;
  letter-spacing: -.018em;
  text-transform: none;
  color: var(--negen-rust);
}
.negen__regel { margin: 0; text-wrap: pretty; }

/* kern en rest hebben hetzelfde font, dezelfde maat en hetzelfde
   gewicht. Alleen de inktdiepte verschilt, anders wordt het alsnog
   een label-en-waardelijstje. */
.negen__kern { color: var(--c-ink); }
.negen__kern.is-goud { color: var(--negen-goud); }
.negen__rest { color: inherit; }

.negen__slot {
  margin: clamp(var(--s-1xl), 5vw, var(--s-3xl)) 0 0;
  max-width: 46ch;
  font-family: var(--f-body);
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--c-ink);
}

.negen__voet {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2xs) var(--s-m);
  margin: var(--s-m) 0 0;
  font-family: var(--f-body);
  font-size: var(--fs-body-s);
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--negen-klein);
}

/* ---------- de cascade: één klasse, verder alles CSS ----------
   --i is de plaats in de cascade, hard in CSS gezet zodat er geen
   JS aan te pas hoeft te komen om te staffelen. */
.negen__kop  { --i: 0; }
.negen__lead { --i: 1; }
.negen__regel:nth-child(1) { --i: 2; }
.negen__regel:nth-child(2) { --i: 3; }
.negen__regel:nth-child(3) { --i: 4; }
.negen__regel:nth-child(4) { --i: 5; }
.negen__regel:nth-child(5) { --i: 6; }
.negen__regel:nth-child(6) { --i: 7; }
.negen__regel:nth-child(7) { --i: 8; }
.negen__regel:nth-child(8) { --i: 9; }
.negen__regel:nth-child(9) { --i: 10; }
.negen__slot { --i: 11; }
.negen__voet { --i: 12; }

/* De ruststaat hangt aan .js-anim, precies zoals de rest van de site.
   Geen JS, ?static=1 of prefers-reduced-motion: de klasse staat niet
   op <html>, dus deze regels bestaan niet en alles is meteen te lezen. */
html.js-anim .negen__kop,
html.js-anim .negen__lead,
html.js-anim .negen__regel,
html.js-anim .negen__slot,
html.js-anim .negen__voet {
  opacity: 0;
  transform: translate3d(0, var(--negen-op), 0);
  transition:
    opacity var(--negen-fade) linear calc(var(--i, 0) * var(--negen-stap)),
    transform var(--negen-schuif) var(--negen-ease) calc(var(--i, 0) * var(--negen-stap));
}
html.js-anim .negen.is-in .negen__kop,
html.js-anim .negen.is-in .negen__lead,
html.js-anim .negen.is-in .negen__regel,
html.js-anim .negen.is-in .negen__slot,
html.js-anim .negen.is-in .negen__voet {
  opacity: 1;
  transform: none;
}

/* het ontgrijzen zelf: het openingswoord verhardt 300ms nadat zijn
   eigen regel er staat, dus in leestempo van boven naar beneden */
html.js-anim .negen__kern {
  color: inherit;
  transition: color var(--negen-kleur) var(--negen-ease-kleur)
              calc(var(--i, 0) * var(--negen-stap) + var(--negen-wacht));
}
html.js-anim .negen.is-in .negen__kern { color: var(--c-ink); }
html.js-anim .negen.is-in .negen__kern.is-goud { color: var(--negen-goud); }

@media (prefers-reduced-motion: reduce) {
  html.js-anim .negen__kop,
  html.js-anim .negen__lead,
  html.js-anim .negen__regel,
  html.js-anim .negen__slot,
  html.js-anim .negen__voet {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js-anim .negen__kern { color: var(--c-ink); transition: none; }
  html.js-anim .negen__kern.is-goud { color: var(--negen-goud); }
}

@media (max-width: 767px) {
  .negen__head { grid-template-columns: 1fr; gap: var(--s-s); }
  .negen__lead { justify-self: start; max-width: none; }
  /* op mobiel breken de zinnen over twee regels; ruimere tussenruimte
     zodat een omgebroken zin nog als één regel leest, en een donkerder
     ruststaat omdat de regel daar geen large text meer is */
  .negen__lijst { gap: .55em; line-height: 1.3; color: var(--negen-rust-klein); }
  .negen__voet { flex-flow: column; justify-content: flex-start; }
}

/* ============================================================
   HERO — de video van Van Manen zelf, gescrubd door de scroll
   De wrapper is 400vh; de video staat sticky en loopt van 0 tot het
   einde mee met de scrollpositie (all-intra H.264, dus elke seek is
   direct scherp). De tekst staat in normale flow over het eerste scherm
   en scrolt weg terwijl de camera naar buiten vliegt; de slotregel staat
   in het laatste scherm, als de camera boven Nederland hangt.
   ============================================================ */
.home-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1a1714 url("../images/hero-poster.jpg") center / cover no-repeat;
}
.home-hero__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .28), transparent 32%),
    linear-gradient(to top, rgba(0, 0, 0, .42), transparent 48%);
}
.home-hero__slot {
  position: relative;
  z-index: 8;
  color: var(--c-white);
  height: calc(100vh - var(--s-s));
  height: calc(100svh - var(--s-s));
  display: flex;
  align-items: flex-end;
  /* het laatste scherm van de 400vh: begint waar de content-blok eindigde */
  margin-top: calc(200vh - 1rem);
  margin-top: calc(200svh - 1rem);
  pointer-events: none;
}
.home-hero__slotregel {
  margin: 0;
  padding: 0 var(--s-l) var(--s-1xl);
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 3.4rem);
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.home-hero__slotregel span {
  display: block;
  margin-top: var(--s-2xs);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent);
}
/* ---- HERO — mobiel scrubt via frame-reeks ----
   Video-seeken is op iOS Safari onvoorspelbaar; daarom krijgt de telefoon
   54 staand uitgesneden frames (486×864, ±1 MB totaal) op een canvas, met
   dezelfde scroll-koppeling als de video op desktop. Laden de frames niet,
   dan valt hij terug op de video die één keer afspeelt (.is-fallback). */
.home-hero__canvas { display: none; }
@media (max-width: 767px) {
  .home-hero__wrapper { height: 320vh; height: 320svh; }
  .home-hero__video { display: none; }
  .home-hero__canvas {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: #1a1714 url("../images/hero-poster-m.jpg") center / cover no-repeat;
  }
  .home-hero__content-inner { padding-bottom: 4.6rem; }   /* boven de vaste belbalk */
  .h1.is__home { font-size: clamp(2.3rem, 10.6vw, 3.6rem); }   /* "ONDERGROND." moet op één regel passen */
  .home-hero__slot { display: flex; margin-top: calc(120vh - 1rem); margin-top: calc(120svh - 1rem); }
  .home-hero__slotregel { padding: 0 var(--s-s) 4.6rem; }
  .home-hero__wrapper.is-fallback { height: auto; }
  .home-hero__wrapper.is-fallback .home-hero__canvas { display: none; }
  .home-hero__wrapper.is-fallback .home-hero__video { display: block; filter: brightness(92%); }
  .home-hero__wrapper.is-fallback .home-hero__video-wrapper { position: relative; top: 0; height: calc(100vh - var(--s-s)); height: calc(100svh - var(--s-s)); }
  .home-hero__wrapper.is-fallback .home-hero__slot { display: none; }
}

/* ---- mobiel: diensten als veegbare chips boven het paneel ---- */
@media (max-width: 767px) {
  .disciplines__list {
    flex-flow: row nowrap;
    gap: var(--s-2xs);
    overflow-x: auto;
    border-top: 0;
    padding-bottom: var(--s-2xs);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .disciplines__list::-webkit-scrollbar { display: none; }
  .disciplines__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .95rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 2rem;
    color: rgba(255, 255, 255, .75);
    transition: background .25s, color .25s, border-color .25s, transform .15s;
  }
  .disciplines__item:active { transform: scale(.97); }
  .disciplines__item.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #1a1408; }
  .disciplines__item.is-active .disciplines__no { color: #1a1408; opacity: .7; }
  .disciplines__meta { display: none; }
  .disciplines__name { font-family: var(--f-body); font-weight: 500; font-size: .95rem; line-height: 1; }
}

/* ---- parallax op beeld: het beeld schuift iets trager dan de pagina ---- */
[data-parallax] { overflow: hidden; }
[data-parallax] img { will-change: transform; }

/* ---- tikfeedback ---- */
.button { transition: background .2s, color .2s, transform .15s; }
.button:active { transform: scale(.97); }
.swatch-card:active { transform: scale(.985); }

/* ============================================================
   EÉN VAK — smalle tekstsectie, kop links, tekst rechts
   ============================================================ */
.vak { padding-top: calc(var(--s-5xl) + 2vh); padding-bottom: calc(var(--s-5xl) + 2vh); }
.vak__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--s-3xl);
  align-items: start;
}
.vak__kop { margin: 0; }
.vak__tekst { max-width: 36rem; }
.vak__tekst .body__l { margin-bottom: var(--s-m); }
.vak__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-m); margin-top: var(--s-l); }
.tekstknop {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.tekstknop:hover { color: var(--c-accent); }
@media (max-width: 991px) {
  .vak__grid { grid-template-columns: 1fr; gap: var(--s-m); }
}

/* ============================================================
   Kleine lijstjes met een gouden punt (diensten, wel/niet)
   ============================================================ */
.lijstje { margin: var(--s-m) 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.lijstje li { position: relative; padding-left: 1.1rem; }
.lijstje li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--c-accent);
}
.lijstje.is-licht { margin-top: var(--s-s); margin-bottom: var(--s-s); color: rgba(255, 255, 255, .78); font-size: var(--fs-body-s); }
.types__item .lijstje li { padding-left: 1rem; }
.types__item .lijstje li::before { top: .6em; width: .35rem; height: .35rem; }

/* ============================================================
   Werkgebied — plaatsnamen als rustige rij
   ============================================================ */
.plaatsen {
  display: flex; flex-wrap: wrap; gap: var(--s-2xs);
  margin: 0; padding: 0; list-style: none;
}
.plaatsen li {
  padding: var(--s-2xs) var(--s-s);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--s-3xs);
  font-family: var(--f-head);
  font-size: var(--fs-h5);
  color: rgba(255, 255, 255, .86);
}
.plaatsen li:first-child { border-color: var(--c-accent); color: var(--c-white); }

/* ============================================================
   Vóór / na — twee beelden van dezelfde wand
   ============================================================ */
.voorna__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-s);
}
.voorna__beeld { margin: 0; }
.voorna__beeld img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--s-2xs);
}
.voorna__beeld figcaption {
  margin-top: var(--s-2xs);
  font-size: var(--fs-body-s);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}
@media (max-width: 767px) { .voorna__grid { grid-template-columns: 1fr; } }

/* ============================================================
   VIER STAPPEN — sticky beeldkader links, stappen rechts
   Motion geport uit BYQ gem "Sticky Media Swap": alternerende
   clip-path wipes (.85s power3.inOut), inkomend beeld zakt van 1.12
   naar 1 (1.25s power2.out), uitgaand beeld schuift 7% mee. De
   tijden staan in main.js en zijn bewust niet aangepast.
   ============================================================ */
.stappen { padding-top: calc(var(--s-5xl) + 2vh); padding-bottom: 0; }
.stappen__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3xl);
  align-items: end;
  margin-bottom: var(--s-2xl);
}
.stappen__head h2 { margin: 0; }
.stappen__head p { margin: 0; justify-self: end; color: var(--c-text-soft); }

.stappen__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(2rem, 5vw, 5rem);
}
.stappen__stage { position: relative; min-height: 100%; }
.stappen__frame {
  position: sticky;
  top: 1.5rem;
  height: calc(100vh - 3rem);
  height: calc(100svh - 3rem);
  border-radius: var(--s-2xs);
  border: 1px solid var(--c-light);
  background: var(--c-tint);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}
.stappen__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: transform, clip-path, opacity;
}
.stappen__frame img:first-child { opacity: 1; }
.stappen__teller {
  position: absolute;
  left: var(--s-m);
  bottom: var(--s-m);
  z-index: 5;
  padding: .4rem .75rem;
  border-radius: var(--s-3xs);
  background: rgba(20, 16, 12, .72);
  color: var(--c-white);
  font-size: var(--fs-body-s);
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}
.stappen__teller b { font-weight: 500; color: var(--c-accent); }

.stappen__stap { display: grid; align-items: center; min-height: 100vh; min-height: 100svh; }
.stappen__entry {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1rem, 2.4vw, 1.75rem);
  align-items: start;
  margin: 0;
  padding: .5rem 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: color-mix(in srgb, var(--c-ink) 28%, transparent);
  transition: color .5s cubic-bezier(.16, 1, .3, 1);
}
.stappen__entry:hover { color: color-mix(in srgb, var(--c-ink) 55%, transparent); }
.stappen__entry.is-active, .stappen__entry.is-active:hover { color: var(--c-ink); cursor: default; }
.stappen__entry:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 8px; border-radius: .5rem; }
.stappen__nr {
  display: inline-block;
  padding-top: .55em;
  font-size: .8rem;
  line-height: 1;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: inherit;
  transition: color .4s cubic-bezier(.16, 1, .3, 1);
  backface-visibility: hidden;
}
.stappen__entry.is-active .stappen__nr {
  color: var(--negen-goud);
  animation: stappen-flip .55s cubic-bezier(.16, 1, .3, 1);
}
@keyframes stappen-flip { from { transform: rotateX(-90deg); } to { transform: rotateX(0deg); } }
.stappen__body { display: block; }
.stappen__titel {
  display: block;
  font-family: var(--f-head);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 1.1rem + 3.6vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.stappen__regel {
  display: block;
  margin-top: .9rem;
  max-width: 34ch;
  font-size: .95rem;
  line-height: 1.55;
  opacity: .75;
}

@media (max-width: 991px) {
  .stappen__head { grid-template-columns: 1fr; gap: var(--s-s); }
  .stappen__head p { justify-self: start; }
}
@media (max-width: 767px) {
  .stappen { padding-left: var(--s-s); padding-right: var(--s-s); }
  .stappen__grid { display: block; position: relative; }
  .stappen__stage { position: absolute; inset: 0; }
  .stappen__frame { top: 1rem; height: 46vh; height: 46svh; }
  .stappen__stap {
    position: relative;
    z-index: 1;
    min-height: 92vh;
    min-height: 92svh;
    align-items: end;
    padding-bottom: 9vh;
  }
  .stappen__titel { font-size: clamp(1.9rem, 9vw, 2.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .stappen__entry, .stappen__nr { transition: none; }
  .stappen__entry.is-active .stappen__nr { animation: none; }
}

/* ============================================================
   OPLEVERKAART — tekst links, het papier rechts
   ============================================================ */
.oplever__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--s-3xl);
  align-items: center;
}
.oplever__tekst h2 { margin-bottom: var(--s-m); }
.oplever__tekst p { margin-bottom: var(--s-l); color: var(--c-text-soft); }
.oplever .lijst { max-width: 34rem; justify-self: end; width: 100%; }
.lijst__vak svg { stroke: var(--c-accent); }
.lijst__rij { transition: background .35s; }
@media (max-width: 991px) {
  .oplever__grid { grid-template-columns: 1fr; gap: var(--s-l); }
  .oplever .lijst { justify-self: start; }
}

/* ============================================================
   Gordijn-onthulling — timing uit BYQ gem "Curtain Image Reveal"
   (clip-path .9s + de-zoom 1.05s, beide cubic-bezier(.16,1,.3,1))
   ============================================================ */
.gordijn { transition: clip-path .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
.gordijn.van-boven { clip-path: inset(0 0 100% 0); }
.gordijn-kader { position: relative; overflow: hidden; border-radius: var(--s-2xs); background: var(--c-tint); transform: translateZ(0); }
.gordijn-kader img { transform: scale(1.25); transition: transform 1.05s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
.gordijn-kader.is-open img { transform: scale(1); }
.gordijn-kader figcaption { opacity: 0; transform: translateY(8px); transition: opacity .45s ease calc(var(--d, 0s) + .7s), transform .55s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + .7s); }
.gordijn-kader.is-open figcaption { opacity: 1; transform: none; }
.voorna__beeld.gordijn-kader { --d: 0s; }
.voorna__beeld.gordijn-kader.van-rechts { --d: .12s; }
.voorna__beeld.gordijn-kader img { border-radius: 0; }
.voorna__beeld.gordijn-kader figcaption { position: absolute; left: var(--s-s); bottom: var(--s-s); margin: 0; padding: .35rem .7rem; border-radius: var(--s-3xs); background: rgba(20, 16, 12, .72); color: var(--c-white); }
html:not(.js-anim) .gordijn, html:not(.js-anim) .gordijn-kader { clip-path: inset(0 0 0 0) !important; }
html:not(.js-anim) .gordijn-kader img { transform: none !important; }
html:not(.js-anim) .gordijn-kader figcaption { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .gordijn, .gordijn-kader { clip-path: inset(0 0 0 0) !important; transition: none !important; }
  .gordijn-kader img { transform: none !important; transition: none !important; }
  .gordijn-kader figcaption { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   Vóór / na — schuifbare vergelijker op dezelfde wand
   ============================================================ */
.vergelijk {
  position: relative;
  aspect-ratio: 3 / 2;
  max-height: 78vh;
  width: 100%;
  overflow: hidden;
  border-radius: var(--s-2xs);
  background: var(--c-tint);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.vergelijk img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  border-radius: 0;
}
.vergelijk__voor { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.vergelijk__lijn {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--c-paper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  pointer-events: none;
  z-index: 2;
}
.vergelijk__greep {
  position: absolute;
  top: 50%; left: 50%;
  width: 3rem; height: 3rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-ink);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
}
.vergelijk__greep svg { width: 1.2rem; height: 1.2rem; }
.vergelijk__label {
  position: absolute;
  bottom: var(--s-s);
  z-index: 2;
  padding: .35rem .7rem;
  border-radius: var(--s-3xs);
  background: rgba(20, 16, 12, .72);
  color: var(--c-white);
  font-size: var(--fs-body-s);
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.vergelijk__label.is-voor { left: var(--s-s); }
.vergelijk__label.is-na { right: var(--s-s); }
/* de range ligt onzichtbaar over het hele beeld; de duim is zo hoog als het beeld,
   zodat je overal kunt grijpen */
.vergelijk__slider {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.vergelijk__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 3rem; height: 100vh; }
.vergelijk__slider::-moz-range-thumb { width: 3rem; height: 100vh; border: 0; }
.vergelijk__slider:focus-visible { opacity: 1; outline: 2px solid var(--c-accent); outline-offset: -2px; }
.vergelijk__slider:focus-visible::-webkit-slider-thumb { background: transparent; }
.vergelijk.gordijn-kader img { transform: scale(1.25); }
.vergelijk.gordijn-kader.is-open img { transform: scale(1); }

/* ============================================================
   Contactformulier — keuzechips
   ============================================================ */
.keuze { border: none; margin: 0 0 var(--s-l); padding: 0; }
.keuze legend { margin-bottom: var(--s-2xs); font-weight: 400; padding: 0; }
.form__wrapper .keuze__chip { display: inline-block; margin: 0 .35rem .35rem 0; }
.keuze__chip input { position: absolute; opacity: 0; pointer-events: none; }
.keuze__chip span {
  display: inline-block; padding: .4rem .9rem;
  border: 1px solid var(--c-light); border-radius: var(--s-3xs);
  font-size: var(--fs-body-s); cursor: pointer; user-select: none;
  transition: background .2s, border-color .2s, color .2s;
}
.keuze__chip input:checked + span { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-white); }
.keuze__chip input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.author__wrapper > div > div:first-child { font-weight: 400; }