/* ═══════════════════════════════════════════════════════════════════════
   Schoonmaakbedrijf Delta — drie voorstellen
   Elke versie is volledig gescopeerd onder #version-vN. Elke kleur, maat,
   radius en schaduw is een token; er staat bewust geen losse waarde in de
   regels zelf, zodat het palet op één plek te verzetten is.
   ═══════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------- letters -- */
@font-face{font-family:'Antonio';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/antonio-400_700.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/zilla-slab-400.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/zilla-slab-600.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/zilla-slab-700.woff2') format('woff2')}
@font-face{font-family:'Anybody';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/anybody-400_900.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/public-sans-400_700.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/source-sans-3-400_700.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/manrope-400_800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2')}

/* --------------------------------------------------------- gedeelde as -- */
:root{
  --kop-h: 70px;
  --maat: 1240px;
  --marge: max(24px, calc((100vw - var(--maat)) / 2));
  --stap: 8px;

  /* Eén schaal, en elke versie zet hieronder alleen --fs-display en
     --fs-mega naar zijn eigen maat. Zonder dat draagt een registerkop
     dezelfde 8 rem als een full-bleed hero. */
  --fs-display: clamp(2.6rem, 7vw, 5rem);
  --fs-mega: clamp(3rem, 9vw, 7rem);
  --fs-2: clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-3: clamp(1.9rem, 4.2vw, 3.5rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.16rem);
  --fs-body: 1.0625rem;
  --fs-sm: .875rem;
  --fs-xs: .75rem;
  --fs-chip: .8125rem;

  --r-a: 3px;
  --r-b: 999px;
  --sh-a: 0 28px 60px -20px rgba(8, 16, 26, .55);
  --sh-b: 0 6px 18px -8px rgba(8, 16, 26, .40);
  --sh-ring: 0 0 0 4px rgba(255, 255, 255, .55);
  --dsh: drop-shadow(0 22px 26px rgba(8, 16, 26, .38));

  --snel: 220ms;
  --mid: 620ms;
  --traag: 1400ms;
  --curve: cubic-bezier(.16, 1, .3, 1);
}

/* -------------------------------------------------------------- reset --- */
*, *::before, *::after{ box-sizing: border-box }
html{ -webkit-text-size-adjust: 100% }
body{ margin: 0; background: var(--veld, #0A2138); color: var(--ink, #EAF0F4) }
/* height:auto, anders wint het height-attribuut van elke aspect-ratio en
   rendert een staande bron op zijn volle intrinsieke hoogte. */
img, video{ max-width: 100%; height: auto; display: block }
ul, ol{ list-style: none; margin: 0; padding: 0 }
p, h1, h2, h3, figure{ margin: 0 }
a{ color: inherit }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
:where(a, button, [tabindex]):focus-visible{
  outline: 2px solid currentColor; outline-offset: 3px; box-shadow: var(--sh-ring);
}

.skip{
  position: absolute; left: var(--stap); top: calc(var(--stap) * -8); z-index: 90;
  padding: 10px 16px; background: var(--acc, #EFB90C); color: var(--acc-ink, #0A2138);
  font-family: 'Public Sans', system-ui, sans-serif; font-size: var(--fs-sm);
  font-weight: 700; text-decoration: none; border-radius: var(--r-a);
  transition: transform var(--snel) var(--curve);
}
.skip:focus{ transform: translateY(calc(var(--stap) * 9)) }

/* ------------------------------------------------- gereedschapswisselaar */
.vswitch{
  position: fixed; right: 14px; bottom: 14px; z-index: 80; display: flex; gap: 2px;
  padding: 4px; background: rgba(14, 18, 24, .88); border-radius: var(--r-b);
  box-shadow: var(--sh-b);
}
.vswitch button{
  min-width: 44px; min-height: 36px; padding: 0 12px; border-radius: var(--r-b);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs);
  letter-spacing: .06em; color: rgba(255, 255, 255, .74);
  transition: background var(--snel) var(--curve), color var(--snel) var(--curve);
}
.vswitch button[aria-pressed="true"]{ background: rgba(255, 255, 255, .94); color: rgba(10, 20, 30, 1) }

.ver{ background: var(--veld); color: var(--ink); min-height: 100svh }
.ver[hidden]{ display: none }

/* Gedeelde kopbalk-geometrie; de kleding staat per versie hieronder. */
.v1-kop, .v2-kop, .v3-kop{
  position: relative; z-index: 6; display: flex; align-items: center; gap: 18px;
  min-height: var(--kop-h); padding-left: var(--marge); padding-right: var(--marge);
}
.v1-merk, .v2-merk, .v3-merk{ text-decoration: none; line-height: 1.05 }
.v1-merk span, .v2-merk span, .v3-merk span{
  display: block; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
.v1-merk b, .v2-merk b, .v3-merk b{ display: block; font-size: var(--fs-2); letter-spacing: -.01em }
.v1-kop-plaats, .v2-kop-plaats, .v3-kop-plaats{
  margin-left: auto; font-size: var(--fs-sm); color: var(--dim);
}
.v1-cta, .v2-cta, .v3-cta{
  padding: 11px 18px; background: var(--acc); color: var(--acc-ink); font-weight: 700;
  font-size: var(--fs-sm); text-decoration: none; border-radius: var(--r-a); white-space: nowrap;
  transition: transform var(--snel) var(--curve), opacity var(--snel) var(--curve);
}
.v1-cta:hover, .v2-cta:hover, .v3-cta:hover{ transform: translateY(-2px) }

/* Gedeelde voetgeometrie. */
.v1-voet, .v2-voet, .v3-voet{
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
  padding: 26px var(--marge) 34px; border-top: 1px solid var(--lijn);
  font-size: var(--fs-sm); color: var(--dim);
}
.v1-credit, .v2-credit, .v3-credit{ margin-left: auto }
.v1-credit a, .v2-credit a, .v3-credit a{ color: var(--ink) }

/* Gedeelde knoprij in de hero. */
.v1-acties, .v2-acties, .v3-acties{
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 26px;
}
.v1-bel, .v2-bel, .v3-bel{
  padding: 15px 26px; background: var(--acc); color: var(--acc-ink); font-weight: 700;
  font-size: var(--fs-body); text-decoration: none; border-radius: var(--r-a);
  transition: transform var(--snel) var(--curve);
}
.v1-bel:hover, .v2-bel:hover, .v3-bel:hover{ transform: translateY(-2px) }
.v1-stil, .v2-stil, .v3-stil{
  font-size: var(--fs-body); color: var(--dim); text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}


/* ═══════════════════════════════════════ V1 · De hoogtelijn · levels ═══ */
#version-v1{
  --veld: #0A2138; --veld2: #12304F; --ink: #EAF0F4; --dim: #9FB2C2;
  --acc: #EFB90C; --acc-ink: #0A2138; --lijn: rgba(234, 240, 244, .16);
  /* De lichte velden van deze versie, met hun eigen leesbare afgeleiden.
     Kraangeel haalt op licht maar 1,6:1, dus daar staat een donkere oker
     voor in de plaats; één token per vlak waarop het moet leesbaar zijn. */
  --v1-licht: #EDF1F4; --v1-wit: #FFFFFF;
  --v1-licht-ink: #0A2138; --v1-licht-dim: #4A5C68;
  --v1-licht-lijn: #C9D6DF; --v1-licht-acc: #7A5C00;
  --r-a: 0px; --r-b: 999px;
  --fs-display: clamp(2.7rem, 8.2vw, 6.4rem);
  --sh-a: 0 30px 64px -22px rgba(0, 0, 0, .72);
  --sh-ring: 0 0 0 4px rgba(239, 185, 12, .40);
  font-family: 'Public Sans', system-ui, sans-serif; font-size: var(--fs-body);
  line-height: 1.6;
}
#version-v1 .v1-merk b{ font-family: 'Antonio', 'Public Sans', sans-serif; font-weight: 700; letter-spacing: .01em }
#version-v1 .v1-kop{ border-bottom: 1px solid var(--lijn) }

/* Het verlopende vlak staat op de SECTIE zelf en niet op een pseudo-element:
   de poort loopt vanaf de herosectie omhoog tot de eerste achtergrond, dus
   een verloop op een kind telt niet mee en het veld leest als plat. */
.v1-hero{
  position: relative; display: grid; align-items: end;
  grid-template-columns: clamp(180px, 23vw, 288px) 1fr;
  min-height: calc(100svh - var(--kop-h));
  padding-bottom: clamp(26px, 4.4vh, 60px);
  background-image:
    radial-gradient(120% 78% at 82% 8%, rgba(239, 185, 12, .14), rgba(239, 185, 12, 0) 58%),
    linear-gradient(178deg, rgba(18, 48, 79, .95), rgba(10, 33, 56, 0) 64%);
}

.v1-kolom{
  position: relative; z-index: 2; align-self: stretch; overflow: clip;
  display: flex; flex-direction: column; min-width: 0;
  border-right: 1px solid var(--lijn);
  padding: clamp(18px, 3vh, 34px) 0 clamp(18px, 3vh, 34px) var(--marge);
  box-shadow: var(--sh-a);
}
.v1-vid{
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5; filter: grayscale(.5) contrast(1.06);
}
.v1-kolom::after{
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(184deg, rgba(10, 33, 56, .70), rgba(10, 33, 56, .97));
}
/* flex:1 en niet height:100%, anders duwt de schaal het nulpunt onder de
   vouw en verdwijnt precies de regel die de schaal betekenis geeft. */
.v1-schaal{
  position: relative; z-index: 2; display: flex; flex-direction: column;
  justify-content: space-between; flex: 1; min-height: 300px;
}
.v1-schaal li{
  display: flex; align-items: center; gap: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs);
  letter-spacing: .04em; color: var(--dim);
  animation: v1-in var(--mid) var(--curve) both;
  animation-delay: calc((6 - var(--i)) * 80ms);
}
.v1-tik{ display: block; width: 22px; height: 2px; background: var(--acc); flex: none }
.v1-schaal li:nth-child(2n) .v1-tik{ width: 13px; background: var(--dim) }
.v1-naam{ white-space: nowrap }
.v1-schaal li:first-child .v1-naam{ color: var(--ink) }
/* Eigen plaat onder deze regel, want hij ligt op bewegend beeld en een
   scrim op een broertje-laag is geen achtergrond van de tekst zelf. */
.v1-nul{
  position: relative; z-index: 2; margin-top: 14px; padding: 10px 12px 8px 0;
  border-top: 2px solid var(--acc);
  background-image: linear-gradient(96deg, rgba(10, 33, 56, .99) 0%, rgba(10, 33, 56, .97) 72%, rgba(10, 33, 56, .95) 100%);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase; color: var(--acc);
}

.v1-plaat{
  position: absolute; z-index: 1; right: 0; top: 6%;
  width: min(60vw, 760px);
  filter: grayscale(.28) contrast(1.06) brightness(.86);
  box-shadow: var(--sh-a);
}

/* De plaat staat als background-image op de OUDER van de tekst. Een scrim op
   een broertje-laag telt niet als tekst-op-beeld en wordt dan tegen een
   achtergrondkleur gemeten die er niet is. Hij dooft naar rechts uit, zodat
   de flat rechts in beeld blijft in plaats van onder een donkere doos. */
.v1-tekst{
  position: relative; z-index: 3; max-width: 640px; min-width: 0;
  padding: clamp(18px, 2.4vw, 30px) clamp(26px, 7vw, 104px) clamp(20px, 2.6vw, 32px) clamp(22px, 4vw, 62px);
  background-image: linear-gradient(99deg,
    rgba(10, 33, 56, .98) 0%, rgba(10, 33, 56, .96) 64%, rgba(10, 33, 56, .62) 88%, rgba(10, 33, 56, .10) 100%);
}
.v1-eyebrow{
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs);
  letter-spacing: .2em; text-transform: uppercase; color: var(--acc);
  animation: v1-in var(--mid) var(--curve) both;
}
#version-v1 h1{
  margin-top: 14px; font-family: 'Antonio', 'Public Sans', sans-serif; font-weight: 700;
  font-size: var(--fs-display); line-height: .92; letter-spacing: -.02em;
  text-transform: uppercase; animation: v1-in var(--mid) var(--curve) both;
  animation-delay: 90ms;
}
#version-v1 h1 em{ font-style: normal; color: var(--acc) }
.v1-lead{
  margin-top: 20px; max-width: 52ch; font-size: var(--fs-lead); color: var(--dim);
  animation: v1-in var(--mid) var(--curve) both; animation-delay: 180ms;
}
.v1-acties{ animation: v1-in var(--mid) var(--curve) both; animation-delay: 260ms }

.v1-chip{
  position: absolute; z-index: 4; right: clamp(18px, 4vw, 74px); top: 12%;
  max-width: 232px; padding: 13px 16px;
  background: var(--acc); color: var(--acc-ink);
  font-size: var(--fs-chip); line-height: 1.35; border-radius: var(--r-a);
  box-shadow: var(--sh-b); animation: v1-chip var(--traag) var(--curve) both;
  animation-delay: 420ms;
}
.v1-chip b{ display: block }

@keyframes v1-in{ from{ opacity: 0; transform: translateY(14px) } to{ opacity: 1; transform: none } }
@keyframes v1-chip{ from{ opacity: 0; transform: translate(18px, -10px) } to{ opacity: 1; transform: none } }

/* ---------------------------------------------------- v1 · gedeeld ----- */
/* Onthulling: alleen opacity en transform, aangezet door een
   IntersectionObserver, nooit door een scroll-listener. */
/* Basisregels op een KLASSE en niet op de id: met `#version-v1 h2` (1-0-1)
   verliest elke latere sectieregel die alleen een klasse gebruikt, en dan valt
   een displaymaat stil terug op de basis zonder dat er iets fout gaat. */
.ver-v1 h2{
  font-family: 'Antonio', 'Public Sans', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: -.015em; line-height: .96;
  font-size: var(--fs-2);
}
.ver-v1 h3{
  font-family: 'Antonio', 'Public Sans', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.04;
  font-size: var(--fs-lead);
}
/* De verborgen staat staat ACHTER `no-preference`. Zonder die voorwaarde geldt
   `opacity: 0` ook met beweging uit, terwijl het script dan juist niets
   onthult: een permanent lege pagina voor precies de mensen die hem het hardst
   nodig hebben. Het script zet daarnaast zelf alles op `aan` bij motion-uit,
   zodat er twee sloten op dezelfde deur zitten. */
@media (prefers-reduced-motion: no-preference){
  .has-js .onthul{ opacity: 0; transform: translateY(18px) }
  .has-js .onthul.aan{
    opacity: 1; transform: none;
    transition: opacity var(--mid) var(--curve), transform var(--mid) var(--curve);
  }
}

/* ------------------------------------- v1 · 2 · de hoogtelijn ---------- */
.v1-lijn{
  position: relative; padding: clamp(60px, 9vh, 118px) var(--marge) clamp(96px, 13vh, 168px);
  background-image: linear-gradient(178deg, rgba(10, 33, 56, 1), rgba(18, 48, 79, 1));
}
.v1-lijn-raster{
  display: grid; gap: clamp(24px, 4vw, 62px);
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  align-items: stretch;
}
.v1-gevel{
  grid-row: 1 / span 2; width: 100%; height: auto; align-self: start;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
}
.v1-niveaus{
  display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); align-self: stretch;
  grid-column: 2; grid-row: 1;
}
.v1-niveaus li{
  display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 4px 16px;
  align-content: center; padding: 10px 0;
  border-top: 1px solid var(--lijn);
}
.v1-niveaus li::before{
  content: ''; grid-row: 1 / span 2; width: 12px; height: 2px; margin-top: .62em;
  background: var(--acc);
}
.v1-niveaus h3{ color: var(--ink) }
.v1-niveaus p{ font-size: var(--fs-sm); color: var(--dim); max-width: 46ch }
.v1-lijn-slot{ grid-column: 2; grid-row: 2; align-self: end; padding-top: clamp(18px, 3vh, 34px) }
.v1-lijn-slot h2{ font-size: var(--fs-3); max-width: 13ch }
.v1-lijn-slot p{ margin-top: 16px; max-width: 44ch; font-size: var(--fs-lead); color: var(--dim) }
/* De maatstrepen tikken van boven naar beneden aan, als een schaal die
   afgelezen wordt. */
.v1-maat path{ transform-box: fill-box; transform-origin: left center }
.has-js .onthul.aan .v1-maat path{ animation: v1-tik var(--mid) var(--curve) both }
.v1-maat path:nth-child(1){ animation-delay: 120ms } .v1-maat path:nth-child(2){ animation-delay: 220ms }
.v1-maat path:nth-child(3){ animation-delay: 320ms } .v1-maat path:nth-child(4){ animation-delay: 420ms }
.v1-maat path:nth-child(5){ animation-delay: 520ms } .v1-maat path:nth-child(6){ animation-delay: 620ms }
@keyframes v1-tik{ from{ opacity: 0; transform: scaleX(0) } to{ opacity: 1; transform: scaleX(1) } }

/* -------------------------------------------- v1 · 3 · diensten -------- */
.v1-diensten{
  position: relative; z-index: 2; background: var(--veld2);
  padding: clamp(46px, 7vh, 84px) 0 clamp(56px, 8vh, 96px);
}
.v1-diensten-kop{
  display: grid; gap: 10px clamp(24px, 4vw, 56px); align-items: end;
  grid-template-columns: minmax(0, 1fr);
  /* Rechts uitgelijnd, zodat de getekende gevel links de sectiegrens kan
     oversteken zonder op tekst te landen. */
  justify-items: end; text-align: right;
  padding: 0 var(--marge) clamp(24px, 4vh, 44px);
}
.v1-diensten-kop h2{ font-size: var(--fs-2); max-width: 16ch }
.v1-diensten-kop p{ max-width: 46ch; font-size: var(--fs-lead); color: var(--dim) }
.v1-rail{
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  min-width: 0; max-width: 100%;
  padding: 4px var(--marge) 18px; scrollbar-width: thin;
}
.v1-rail li{
  flex: 0 0 auto; width: min(74vw, 330px); min-width: 0; scroll-snap-align: start;
  background: rgba(10, 33, 56, .5); border: 1px solid var(--lijn);
}
.v1-rail img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(.24) contrast(1.05) }
.v1-rail h3{ margin: 16px 18px 0; color: var(--acc) }
.v1-rail p{ margin: 8px 18px 20px; font-size: var(--fs-sm); color: var(--dim) }

/* ------------------------------------------- v1 · 4 · materieel -------- */
.v1-materieel{
  display: grid; gap: clamp(22px, 3.6vw, 52px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  padding: clamp(56px, 9vh, 104px) var(--marge) clamp(56px, 9vh, 104px);
  background: var(--v1-licht); color: var(--v1-licht-ink);
}
.v1-eyebrow-d{ grid-column: 1 / -1; color: var(--v1-licht-acc) }
.v1-materieel h2{ grid-column: 1 / -1; margin-top: 8px; max-width: 18ch; font-size: var(--fs-2) }
.v1-register{ margin-top: 10px }
.v1-register > div{
  display: grid; gap: 2px 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  padding: 14px 0; border-top: 1px solid var(--v1-licht-lijn);
}
.v1-register dt{ font-family: 'Antonio', 'Public Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .01em }
.v1-register dd{ margin: 0; font-size: var(--fs-sm); color: var(--v1-licht-dim) }
.v1-mat-beeld{ margin: 0; align-self: end }
.v1-mat-beeld img{ width: 100%; box-shadow: var(--sh-b) }
.v1-mat-beeld figcaption{
  margin-top: 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--v1-licht-dim);
}

/* --------------------------------------------- v1 · 5 · keurmerk ------- */
.v1-keur{
  position: relative;
  display: grid; gap: clamp(20px, 3.4vw, 48px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  padding: clamp(52px, 8vh, 92px) var(--marge) clamp(60px, 9vh, 104px);
  background: var(--acc); color: var(--acc-ink);
}
.v1-keur h2{ font-size: var(--fs-display); max-width: 14ch }
.v1-keur-uitleg p{ max-width: 48ch; font-size: var(--fs-sm) }
.v1-keur-uitleg p + p{ margin-top: 14px; font-weight: 700 }
/* De schuine vorm die de sectiegrens oversteekt en aan het begin van de
   volgende sectie beantwoord wordt. */
.v1-keur::after{
  content: ''; position: absolute; left: 0; bottom: 0; z-index: 2;
  width: clamp(140px, 22vw, 300px); height: clamp(40px, 6vw, 78px);
  background: var(--acc); clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: translateY(100%);
}

/* --------------------------------------------- v1 · 6 · voor wie ------- */
.v1-voorwie{
  padding: clamp(56px, 9vh, 104px) var(--marge) clamp(56px, 9vh, 104px);
  background: var(--v1-licht); color: var(--v1-licht-ink);
}
/* Drie kolommen en niet auto-fit: met zes items levert auto-fit op brede
   schermen vijf op een rij en één losse eronder, met een leeg vak ernaast. */
.v1-klanten{
  display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--v1-licht-lijn); border: 1px solid var(--v1-licht-lijn);
}
.v1-klanten li{ min-width: 0; padding: clamp(20px, 2.6vw, 32px) clamp(16px, 2vw, 24px); background: var(--v1-licht) }
.v1-klanten span{
  display: block; font-family: 'Antonio', 'Public Sans', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.06; font-size: var(--fs-lead);
}
.v1-voorwie h2{ margin-top: clamp(26px, 4vh, 44px); font-size: var(--fs-2); max-width: 16ch }
.v1-voorwie-lead{ margin-top: 14px; max-width: 52ch; font-size: var(--fs-lead); color: var(--v1-licht-dim) }

/* ------------------------------------------------- v1 · 7 · team ------- */
/* flow-root, anders klapt de negatieve ondermarge van de portretten samen met
   de sectiemarge: dan verschuift alleen de sectiegrens en steekt er niets
   overheen, wat precies het tegenovergestelde is van de bedoeling. */
.v1-team{
  position: relative; z-index: 2; display: flow-root;
  padding: clamp(56px, 9vh, 104px) var(--marge) 0;
  background: var(--v1-wit); color: var(--v1-licht-ink);
}
.v1-team-bij{
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--v1-licht-dim);
}
.v1-team h2{ margin-top: 10px; font-size: var(--fs-display); max-width: 13ch }
.v1-mensen{
  display: grid; gap: clamp(16px, 2.6vw, 34px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px; margin-top: clamp(26px, 4vh, 44px);
  /* Steekt de sectiegrens naar de vacature in. */
  margin-bottom: clamp(-96px, -8vw, -54px); position: relative; z-index: 3;
}
.v1-mensen li{ min-width: 0 }
/* Bijschrift BOVEN het portret: de portretten steken de sectiegrens in, en
   een naam die daaronder hangt landt op het donkere vlak van de volgende
   sectie. Zie de opmerking in scripts/delta-team-order.mjs. */
.v1-mensen img{
  width: 100%; aspect-ratio: 1; object-fit: cover; margin-top: 12px;
  box-shadow: var(--sh-b);
}
.v1-mensen b{
  display: block; font-family: 'Antonio', 'Public Sans', sans-serif;
  font-weight: 700; text-transform: uppercase; font-size: var(--fs-lead);
}
.v1-mensen span{ display: block; font-size: var(--fs-sm); color: var(--v1-licht-dim) }
/* De portretten staan als LAATSTE in de sectie en steken met een negatieve
   ondermarge de grens naar de vacature in. Stond de slottekst er nog onder,
   dan trok die marge hem omhoog tot boven op de gezichten. */
.v1-team-slot{
  max-width: 52ch; margin-left: auto; margin-top: clamp(18px, 2.6vh, 30px);
  font-size: var(--fs-lead); color: var(--v1-licht-dim);
}

/* -------------------------------------------- v1 · 8 · vacature -------- */
.v1-vac{
  display: grid; gap: clamp(24px, 4vw, 60px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: end;
  padding: clamp(112px, 15vh, 176px) var(--marge) clamp(56px, 9vh, 104px);
  background: var(--veld2);
}
.v1-vac-lijst li{ padding: 14px 0; border-top: 1px solid var(--lijn) }
.v1-vac-lijst b{
  display: block; font-family: 'Antonio', 'Public Sans', sans-serif; font-weight: 700;
  font-size: var(--fs-2); line-height: 1; color: var(--acc);
}
.v1-vac-lijst span{ display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--dim) }
.v1-vac-rechts h2{ font-size: var(--fs-2); max-width: 15ch }
.v1-vac-rechts p{ margin-top: 14px; max-width: 50ch; font-size: var(--fs-lead); color: var(--dim) }
.v1-vac-rechts .v1-bel{ display: inline-block; margin-top: 24px }

/* --------------------------------------------- v1 · 9 · contact -------- */
/* De sectie heeft ZELF geen zijpadding meer; die zit op de blokken erin.
   Zo raakt de band beide schermranden zonder negatieve marge en zonder
   100vw, en kan er per definitie geen horizontale overflow ontstaan. */
.v1-contact{
  padding: 0 0 clamp(56px, 9vh, 100px);
  background-image: radial-gradient(96% 74% at 12% 8%, rgba(18, 48, 79, .95), rgba(10, 33, 56, 0) 62%);
}
.v1-contact-band{
  width: 100%;
  margin-bottom: clamp(32px, 5vh, 56px);
  filter: grayscale(.34) contrast(1.06) brightness(.8);
}
.v1-contact h2, .v1-contact-raster{ padding-left: var(--marge); padding-right: var(--marge) }
.v1-contact h2{ font-size: var(--fs-display); letter-spacing: -.03em; color: var(--acc) }
.v1-contact-raster{
  display: grid; gap: clamp(20px, 3.4vw, 48px); align-items: start;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  margin-top: clamp(22px, 3.6vh, 40px);
}
.v1-contact-lead{ grid-column: 1; max-width: 44ch; font-size: var(--fs-lead); color: var(--dim) }
.v1-contact-acties{ grid-column: 1; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 22px }
.v1-adres{
  grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: var(--fs-sm); color: var(--dim);
  padding-top: 4px; border-top: 2px solid var(--acc);
}
.v1-adres b{ display: block; margin-top: 10px; font-size: var(--fs-body); color: var(--ink) }
.v1-adres span{ display: block; margin-top: 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs) }


/* ═══════════════════════════════════════════ V2 · Het logboek · paper ══ */
#version-v2{
  --veld: #D9E4EA; --veld2: #C7D7E0; --ink: #10202B; --dim: #4A5C68;
  --acc: #0A4295; --acc-ink: #FFFFFF; --lijn: #B4C6D1;
  /* De overige velden van deze versie, elk met hun eigen leesbare stap.
     Delta-blauw haalt op een donker vlak 1,8:1, dus daar staat een lichtere
     stap uit dezelfde familie voor in de plaats. */
  --v2-wit: #FFFFFF;
  --v2-blauw: #0A4295; --v2-blauw-ink: #FFFFFF; --v2-blauw-dim: #A9C0E4;
  --v2-donker: #10202B; --v2-donker-ink: #E6EDF2; --v2-donker-dim: #9AAAB6;
  --v2-donker-acc: #5B92E0;
  --r-a: 2px; --r-b: 999px;
  --fs-display: clamp(1.65rem, 3.3vw, 2.65rem);
  --sh-a: 0 34px 70px -26px rgba(16, 32, 43, .40);
  --sh-b: 0 8px 20px -10px rgba(16, 32, 43, .34);
  --sh-ring: 0 0 0 4px rgba(10, 66, 149, .28);
  font-family: 'Source Sans 3', system-ui, sans-serif; font-size: var(--fs-body);
  line-height: 1.62;
}
#version-v2 .v2-merk b{ font-family: 'Zilla Slab', Georgia, serif; font-weight: 700 }
#version-v2 .v2-kop{ border-bottom: 2px solid var(--ink) }

.v2-hero{
  position: relative; display: grid; place-items: center;
  min-height: calc(100svh - var(--kop-h));
  padding: clamp(26px, 5vh, 62px) var(--marge) clamp(74px, 12vh, 128px);
  background-image:
    radial-gradient(88% 62% at 26% 12%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(180deg, rgba(180, 198, 209, 0) 0 33px, rgba(180, 198, 209, .5) 33px 34px);
}

.v2-blad{
  position: relative; z-index: 2; width: min(1060px, 100%);
  padding: clamp(20px, 2.6vw, 32px) clamp(20px, 3vw, 38px) clamp(22px, 2.8vw, 34px);
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--lijn); border-radius: var(--r-a);
  box-shadow: var(--sh-a);
  transform: perspective(1800px) rotateX(2.4deg) rotateZ(-.5deg);
  animation: v2-blad var(--traag) var(--curve) both;
}
/* Het beeld zit in een CEL van het register en niet in een kader ernaast:
   een logboek krijgt een locatiefoto ingeplakt, over de volle breedte van
   het blad. Dat is meteen het onderwerp met massa dat dit eerste scherm
   nodig heeft. */
.v2-cel{
  position: relative; overflow: clip;
  /* De band loopt tot de randen van het blad: een logboek krijgt een
     locatiefoto over de volle bladbreedte ingeplakt, niet in een kadertje
     binnen de tekstmarge. */
  margin: clamp(14px, 2vw, 24px) calc(-1 * clamp(20px, 3vw, 38px)) 0;
  aspect-ratio: 16 / 3.1;
  border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
}
.v2-cel img{ width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(.88) }
/* Een volle strook in het accent in plaats van een verlopende scrim: een
   celetiket in een register is een gedrukte balk, en het haalt bovendien
   9,4:1 op elk beeld in plaats van te moeten hopen op een donkere hoek. */
.v2-cel figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 14px 7px;
  background: var(--acc);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--acc-ink);
}
/* De primaire actie staat in de kopregel van het blad en niet onderaan:
   onderaan viel hij onder de vouw, en dan is er geen primaire actie. */
.v2-blad-kop{
  display: grid; gap: 16px clamp(20px, 3vw, 40px); align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
}
.v2-boek{
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs);
  letter-spacing: .2em; text-transform: uppercase; color: var(--acc);
}
#version-v2 h1{
  margin-top: 10px; max-width: 30ch;
  font-family: 'Zilla Slab', Georgia, serif; font-weight: 700;
  font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.015em;
}
#version-v2 h1 em{ font-style: normal; color: var(--acc) }

.v2-rij{
  display: grid; gap: 6px 18px; align-items: baseline;
  grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1.5fr) 3.4rem;
  padding: 10px 0; border-bottom: 1px solid var(--lijn);
}
.v2-rij-kop{
  margin-top: clamp(18px, 2.4vw, 28px); padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.v2-regels li{ animation: v2-rij var(--mid) var(--curve) both; animation-delay: calc(var(--i) * 130ms + 260ms) }
.v2-d{ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-sm); color: var(--acc) }
.v2-l{ font-weight: 700; font-size: var(--fs-body) }
.v2-w{ font-size: var(--fs-body); color: var(--dim) }
.v2-p svg{ width: 44px; height: 20px; overflow: visible }
.v2-p path{
  fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 62; stroke-dashoffset: 62;
  animation: v2-paraaf var(--traag) var(--curve) both; animation-delay: 900ms;
}

.v2-lead{
  max-width: 46ch; margin-top: clamp(16px, 2.2vw, 24px);
  font-size: var(--fs-lead); color: var(--dim);
}
.v2-acties{ margin-top: 0; justify-content: flex-end; align-self: end }

/* Klein en in de onderhoek: absoluut over het midden lag hij over de regels
   van het register en dekte hij twee werkzaamheden af. Hij steekt nu alleen
   naar beneden buiten het blad, en verticaal kan geen horizontale overflow
   geven. */
.v2-foto{
  position: absolute; z-index: 3; right: 3%; bottom: clamp(-80px, -6vw, -44px);
  width: min(29vw, 344px);
  border: 6px solid rgba(255, 255, 255, .97);
  box-shadow: var(--sh-a); filter: contrast(1.05) saturate(.86);
}
.v2-chip{
  position: absolute; z-index: 4; left: clamp(14px, 4vw, 46px); top: -18px;
  padding: 10px 15px; background: var(--acc); color: var(--acc-ink);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-chip);
  line-height: 1.3; letter-spacing: .02em; border-radius: var(--r-a);
  box-shadow: var(--sh-b); animation: v2-chip var(--traag) var(--curve) both;
  animation-delay: 640ms;
}
.v2-chip b{ font-weight: 700 }

/* ---------------------------------------------------- v2 · gedeeld ----- */
.ver-v2 h2{
  font-family: 'Zilla Slab', Georgia, serif; font-weight: 700;
  letter-spacing: -.015em; line-height: 1.06; font-size: var(--fs-2);
}
.ver-v2 h3{ font-family: 'Zilla Slab', Georgia, serif; font-weight: 600; font-size: var(--fs-lead) }
.v2-eyebrow{
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs);
  letter-spacing: .2em; text-transform: uppercase; color: var(--acc);
}

/* ------------------------------------- v2 · 2 · het werkprogram -------- */
.v2-ritme{
  display: grid; gap: clamp(24px, 4vw, 60px); align-items: start;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  padding: clamp(56px, 9vh, 108px) var(--marge);
  background: var(--v2-blauw); color: var(--v2-blauw-ink);
}
.v2-cyclus li{
  display: grid; gap: 2px 24px; grid-template-columns: 8.5rem minmax(0, 1fr);
  padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .26);
}
.v2-cyclus li:last-child{ border-bottom: 1px solid rgba(255, 255, 255, .26) }
.v2-tel{
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-sm);
  letter-spacing: .1em; text-transform: uppercase;
}
.v2-cyclus p{ font-size: var(--fs-sm); color: var(--v2-blauw-dim); max-width: 46ch }
.v2-ritme-slot{ align-self: end }
.v2-ritme-slot h2{ font-size: var(--fs-3); max-width: 14ch }
.v2-ritme-slot p{ margin-top: 16px; max-width: 42ch; font-size: var(--fs-lead); color: var(--v2-blauw-dim) }

/* ------------------------------------------- v2 · 3 · diensten --------- */
.v2-diensten{
  padding: clamp(56px, 9vh, 108px) var(--marge);
  background: var(--v2-wit);
}
.v2-diensten h2{ font-size: var(--fs-3); max-width: 12ch }
.v2-kiezer{ margin-top: clamp(22px, 3.4vh, 38px); border-top: 2px solid var(--ink) }
.v2-item{ border-bottom: 1px solid var(--lijn) }
.v2-item summary{
  display: grid; gap: 18px; grid-template-columns: 3.2rem minmax(0, 1fr) 1.6rem;
  align-items: baseline; padding: 18px 0; cursor: pointer; list-style: none;
  font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; font-size: var(--fs-2);
}
.v2-item summary::-webkit-details-marker{ display: none }
.v2-item summary::after{
  content: '+'; grid-column: 3; justify-self: end; color: var(--acc);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-2);
}
.v2-item[open] summary::after{ content: '\2212' }
.v2-nr{
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-sm);
  letter-spacing: .06em; color: var(--acc);
}
.v2-uit{ padding: 0 0 22px 0 }
.v2-uit p{
  max-width: 62ch; margin-left: clamp(0px, 4.4vw, 3.2rem); padding-left: 18px;
  font-size: var(--fs-lead); color: var(--dim);
}

/* ---------------------------------------------- v2 · 4 · ons werk ------ */
.v2-werk{ padding: clamp(56px, 9vh, 104px) 0 clamp(60px, 9vh, 108px); background: var(--veld) }
.v2-werk-kop{ padding: 0 var(--marge) clamp(22px, 3.4vh, 38px); font-size: var(--fs-3) }
/* Elke kolom krijgt een fr gelijk aan de beeldverhouding van zijn eigen foto,
   dan komen alle hoogtes op één gedeelde onderlijn uit zonder vaste hoogtes
   en zonder in CSS te croppen. */
.v2-mozaiek{ display: grid; gap: 10px; align-items: end; padding: 0 var(--marge) }
.v2-mozaiek-a{ grid-template-columns: 1.333fr 1.333fr 1.5fr .5625fr }
.v2-mozaiek-b{ grid-template-columns: 1.333fr .75fr 1.5fr 1fr; margin-top: 10px }
.v2-mozaiek li{ min-width: 0 }
.v2-mozaiek img{ width: 100%; filter: contrast(1.04) saturate(.9) }
.v2-mozaiek b{
  display: block; margin-top: 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
}
.v2-tegel{
  align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px; background: var(--acc); color: var(--acc-ink);
}
.v2-tegel b{ margin-top: 0; font-size: var(--fs-chip) }
.v2-tegel p{ margin-top: 8px; font-size: var(--fs-sm) }

/* ----------------------------------------------- v2 · 5 · keurmerk ----- */
.v2-keur{
  padding: clamp(52px, 8vh, 96px) var(--marge) clamp(56px, 9vh, 104px);
  background: var(--v2-blauw); color: var(--v2-blauw-ink);
}
.v2-norm{
  font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; font-size: var(--fs-mega);
  line-height: .92; letter-spacing: -.03em;
}
.v2-keur h2{ margin-top: 12px; font-size: var(--fs-2); max-width: 22ch }
.v2-keur-tekst{ margin-top: 16px; max-width: 62ch; font-size: var(--fs-sm); color: var(--v2-blauw-dim) }

/* ----------------------------------------------- v2 · 6 · voor wie ----- */
.v2-voorwie{ position: relative; overflow: clip; background: var(--v2-donker) }
.v2-voorwie-beeld{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.4) contrast(1.08) brightness(.72);
}
/* De plaat staat als background-image op de OUDER van de tekst, anders wordt
   hij niet als tekst-op-beeld gemeten. */
.v2-voorwie-in{
  position: relative; z-index: 2; padding: clamp(64px, 11vh, 132px) var(--marge);
  background-image: linear-gradient(96deg, rgba(16, 32, 43, .93) 0%, rgba(16, 32, 43, .86) 54%, rgba(16, 32, 43, .30) 100%);
  color: var(--v2-donker-ink);
}
.v2-klanten{
  display: grid; gap: 8px 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px;
}
.v2-klanten li{
  min-width: 0; padding: 10px 0; border-top: 1px solid rgba(230, 237, 242, .28);
  font-family: 'Zilla Slab', Georgia, serif; font-weight: 600; font-size: var(--fs-lead);
}
.v2-voorwie h2{ margin-top: clamp(22px, 3.4vh, 36px); font-size: var(--fs-3); max-width: 14ch }

/* --------------------------------------------------- v2 · 7 · team ----- */
.v2-team{
  display: grid; gap: 6px clamp(24px, 4vw, 56px); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(56px, 9vh, 104px) var(--marge) clamp(56px, 9vh, 104px);
  background: var(--v2-wit);
}
.v2-team .v2-eyebrow{ grid-column: 1 }
.v2-team h2{ grid-column: 1; font-size: var(--fs-3); max-width: 12ch }
.v2-team-slot{ grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 42ch; font-size: var(--fs-lead); color: var(--dim) }
.v2-mensen{
  grid-column: 1 / -1; display: grid; gap: clamp(16px, 2.6vw, 34px);
  grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px;
  margin-top: clamp(24px, 4vh, 42px);
}
.v2-mensen li{ min-width: 0 }
.v2-mensen b{ display: block; font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; font-size: var(--fs-lead) }
.v2-mensen span{ display: block; font-size: var(--fs-sm); color: var(--dim) }
.v2-mensen img{
  width: 100%; aspect-ratio: 1; object-fit: cover; margin-top: 10px;
  border: 1px solid var(--lijn);
}

/* ----------------------------------------------- v2 · 8 · vacature ----- */
.v2-vac{
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: start;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  padding: clamp(56px, 9vh, 104px) var(--marge);
  background: var(--veld);
}
.v2-vac-blad{
  padding: clamp(18px, 2.4vw, 28px); background: rgba(255, 255, 255, .97);
  border: 1px solid var(--lijn); border-radius: var(--r-a); box-shadow: var(--sh-b);
}
.v2-vac-blad .v2-rij{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px }
.v2-vac-blad .v2-rij-kop{ display: grid; margin-top: 0 }
.v2-vac-tekst h2{ font-size: var(--fs-3); max-width: 12ch }
.v2-vac-tekst p{ margin-top: 14px; max-width: 50ch; font-size: var(--fs-lead); color: var(--dim) }
.v2-vac-tekst .v2-bel{ display: inline-block; margin-top: 24px }

/* ------------------------------------------------ v2 · 9 · contact ----- */
.v2-contact{
  padding: clamp(56px, 9vh, 104px) var(--marge) clamp(56px, 9vh, 100px);
  background: var(--v2-donker); color: var(--v2-donker-ink);
  --acc: var(--v2-donker-acc); --acc-ink: var(--v2-donker);
}
.v2-contact h2{ font-size: var(--fs-3); color: var(--v2-donker-acc) }
.v2-contact-raster{
  display: grid; gap: clamp(20px, 3.4vw, 48px); align-items: start;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  margin-top: clamp(22px, 3.6vh, 40px);
}
.v2-contact-lead{ grid-column: 1; max-width: 44ch; font-size: var(--fs-lead); color: var(--v2-donker-dim) }
.v2-contact-acties{ grid-column: 1; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 22px }
.v2-contact-acties .v2-stil{ color: var(--v2-donker-dim) }
.v2-adres{
  grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: var(--fs-sm);
  color: var(--v2-donker-dim); padding-top: 4px; border-top: 2px solid var(--v2-donker-acc);
}
.v2-adres b{ display: block; margin-top: 10px; font-size: var(--fs-body); color: var(--v2-donker-ink) }
.v2-adres span{ display: block; margin-top: 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-xs) }

@keyframes v2-blad{ from{ opacity: 0; transform: perspective(1800px) rotateX(7deg) rotateZ(-.5deg) translateY(24px) } to{ opacity: 1; transform: perspective(1800px) rotateX(2.4deg) rotateZ(-.5deg) } }
@keyframes v2-rij{ from{ opacity: 0; transform: translateY(10px) } to{ opacity: 1; transform: none } }
@keyframes v2-paraaf{ to{ stroke-dashoffset: 0 } }
@keyframes v2-chip{ from{ opacity: 0; transform: translateY(-12px) rotate(-3deg) } to{ opacity: 1; transform: none } }


/* ══════════════════════════════════════ V3 · Door het glas · dramatic ══ */
#version-v3{
  --veld: #3A3F3C; --veld2: #22262A; --ink: #F2F4F3; --dim: #AAB4B0;
  --acc: #57C2C9; --acc-ink: #16211F; --lijn: rgba(242, 244, 243, .18);
  /* Het lichte vlak van deze versie met zijn eigen leesbare afgeleiden. */
  --v3-licht: #F2F4F3; --v3-licht-ink: #1A1E1C; --v3-licht-dim: #4E5652;
  --v3-licht-lijn: #D2D8D5;
  --r-a: 0px; --r-b: 999px;
  /* Ondergrens gemeten aan het langste ondeelbare woord: "Glasbewassing",
     13 tekens, bij wdth 108 op 390px min de marge. Te hoog en het duwt het
     hele raster opzij, want een gridkolom kan niet onder zijn min-content. */
  --fs-display: clamp(1.8rem, 6.4vw, 5.6rem);
  --sh-a: 0 30px 70px -24px rgba(0, 0, 0, .70);
  --sh-ring: 0 0 0 4px rgba(87, 194, 201, .40);
  font-family: 'Manrope', system-ui, sans-serif; font-size: var(--fs-body);
  line-height: 1.6;
}
#version-v3 .v3-merk b{ font-family: 'Anybody', 'Manrope', sans-serif; font-weight: 800; font-variation-settings: 'wdth' 92 }
#version-v3 .v3-kop{ border-bottom: 1px solid var(--lijn) }

.v3-hero{
  position: relative; display: grid; align-items: end; overflow: clip;
  min-height: calc(100svh - var(--kop-h));
  padding: clamp(30px, 6vh, 80px) var(--marge) clamp(30px, 6vh, 72px);
  background-image:
    radial-gradient(96% 70% at 68% 18%, rgba(87, 194, 201, .16), rgba(87, 194, 201, 0) 62%),
    linear-gradient(172deg, rgba(58, 63, 60, 1), rgba(34, 38, 42, 1));
}
.v3-vid{
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(.55) contrast(1.22) brightness(.86);
}
/* De veegbaan: één diagonale rand die het beeld openveegt. Pseudo-element,
   zodat hij geen enkele satelliet-telling vervuilt. */
.v3-hero::before{
  content: ''; position: absolute; z-index: 1; inset: -20% -40%;
  pointer-events: none;
  background: linear-gradient(117deg,
    rgba(87, 194, 201, 0) 44%,
    rgba(87, 194, 201, .30) 49%,
    rgba(255, 255, 255, .52) 50.4%,
    rgba(87, 194, 201, .22) 52%,
    rgba(87, 194, 201, 0) 58%);
  animation: v3-veeg 9s var(--curve) infinite;
}
/* Het rustige vlak eronder, zodat de tekstplaat niet alleen hoeft te werken. */
.v3-hero::after{
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(196deg, rgba(34, 38, 42, .52), rgba(34, 38, 42, .06) 46%, rgba(34, 38, 42, .78));
}

/* De scrim staat als background-image op de VOOROUDER van de tekst; alleen
   dan wordt hij als tekst-op-beeld gemeten in plaats van tegen een kleur
   die er niet is. */
.v3-tekst{
  position: relative; z-index: 3; max-width: 860px; min-width: 0;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 48px);
  background-image: linear-gradient(102deg,
    rgba(24, 28, 26, .93) 0%, rgba(24, 28, 26, .86) 58%, rgba(24, 28, 26, .40) 100%);
  box-shadow: var(--sh-a);
  backdrop-filter: blur(7px) saturate(.9);
}
#version-v3 .v3-bel{ box-shadow: var(--sh-b) }
.v3-eyebrow{
  font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--acc);
  animation: v3-in var(--mid) var(--curve) both;
}
#version-v3 h1{
  margin-top: 14px; font-family: 'Anybody', 'Manrope', sans-serif; font-weight: 800;
  font-size: var(--fs-display); line-height: .94; letter-spacing: -.03em;
}
/* De diepe techniek van deze run: de breedte-as van de variabele letter
   loopt mee met de veegbaan. De ruit wordt helder en de letters worden
   breed; dat is één beweging, niet twee. */
.v3-r1{
  display: block; color: var(--acc);
  font-variation-settings: 'wdth' 78;
  animation: v3-breed 9s var(--curve) infinite;
}
.v3-r2{
  display: block; max-width: 22ch; margin-top: .35em;
  font-size: var(--fs-2); font-weight: 500; line-height: 1.14;
  letter-spacing: -.012em; font-variation-settings: 'wdth' 100;
}
.v3-lead{
  margin-top: 20px; max-width: 50ch; font-size: var(--fs-lead); color: var(--dim);
  animation: v3-in var(--mid) var(--curve) both; animation-delay: 160ms;
}
.v3-acties{ animation: v3-in var(--mid) var(--curve) both; animation-delay: 250ms }

.v3-chip{
  position: absolute; z-index: 4; right: clamp(16px, 5vw, 96px); top: 16%;
  max-width: 216px; padding: 12px 16px;
  background: var(--acc); color: var(--acc-ink); font-size: var(--fs-chip);
  line-height: 1.35; border-radius: var(--r-a); box-shadow: var(--sh-a);
  animation: v3-chip var(--traag) var(--curve) both; animation-delay: 700ms;
}
.v3-chip b{ display: block; font-weight: 800 }

/* ---------------------------------------------------- v3 · gedeeld ----- */
.ver-v3 h2{
  font-family: 'Anybody', 'Manrope', sans-serif; font-weight: 800;
  font-variation-settings: 'wdth' 96; letter-spacing: -.02em; line-height: 1.02;
  font-size: var(--fs-2);
}
.ver-v3 h3{ font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: var(--fs-lead) }
.v3-eyebrow{ font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--acc) }

/* ------------------------------------------------ v3 · 2 · de veeg ----- */
.v3-veeg{
  display: grid; gap: clamp(24px, 4vw, 64px); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  padding: clamp(56px, 9vh, 108px) var(--marge);
  background-image: linear-gradient(184deg, rgba(58, 63, 60, 1), rgba(34, 38, 42, 1));
}
/* Vastgezette scene: het beeld blijft staan terwijl de drie blokken eraan
   voorbijschuiven. Sticky en geen scriptwerk, dus het blijft heel zonder JS. */
/* Steekt met een bewuste verspringing links buiten de container. De marge
   blijft kleiner dan --marge, dus er kan niets buiten het venster vallen. */
.v3-veeg-beeld{
  position: sticky; top: clamp(20px, 8vh, 90px);
  margin: 0 0 0 calc(-1 * clamp(0px, 4vw, 62px)); max-width: 520px;
}
.v3-veeg-beeld img{ width: 100%; filter: grayscale(.35) contrast(1.12); box-shadow: var(--sh-a) }
.v3-veeg-beeld figcaption{
  margin-top: 10px; font-size: var(--fs-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
.v3-veeg-tekst h2{ font-size: var(--fs-3); max-width: 15ch }
.v3-blok{ margin-top: clamp(26px, 4.4vh, 48px); padding-top: clamp(18px, 2.6vh, 26px); border-top: 1px solid var(--lijn) }
.v3-blok p{ margin-top: 10px; max-width: 54ch; font-size: var(--fs-lead); color: var(--dim) }

/* ---------------------------------------------- v3 · 3 · diensten ------ */
.v3-diensten{
  padding: clamp(56px, 9vh, 108px) var(--marge) clamp(60px, 10vh, 120px);
  background: var(--v3-licht); color: var(--v3-licht-ink);
}
.v3-lijst li{
  display: grid; gap: 6px clamp(20px, 4vw, 56px); align-items: baseline;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  padding: clamp(16px, 2.6vh, 26px) 0; border-top: 1px solid var(--v3-licht-lijn);
}
.v3-lijst li:last-child{ border-bottom: 1px solid var(--v3-licht-lijn) }
.v3-lijst b{
  font-family: 'Anybody', 'Manrope', sans-serif; font-weight: 800;
  font-variation-settings: 'wdth' 88; font-size: var(--fs-3); line-height: 1;
  letter-spacing: -.03em;
}
.v3-lijst span{ font-size: var(--fs-lead); color: var(--v3-licht-dim); max-width: 44ch }

/* ---------------------------------------------- v3 · 4 · ons werk ------ */
.v3-werk{
  padding: clamp(52px, 8vh, 96px) 0 clamp(56px, 9vh, 104px);
  background: var(--veld);
}
/* De strook raakt beide schermranden en begint met een kaart die half uit
   beeld links binnenkomt. */
.v3-strook{
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  min-width: 0; max-width: 100%; padding: 0 var(--marge) 20px;
}
.v3-strook li{ flex: 0 0 auto; width: min(62vw, 300px); min-width: 0; scroll-snap-align: center }
.v3-strook img{
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  filter: grayscale(.5) contrast(1.14) brightness(.94);
}
.v3-strook b{
  display: block; margin-top: 10px; font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.v3-werk-kop{ padding: clamp(20px, 3vh, 32px) var(--marge) 0; font-size: var(--fs-3); max-width: 30ch }

/* ---------------------------------------------- v3 · 5 · keurmerk ------ */
.v3-keur{
  position: relative;
  padding: clamp(48px, 7vh, 88px) var(--marge) clamp(52px, 8vh, 96px);
  background: var(--acc); color: var(--acc-ink);
}
.v3-keur h2{ font-size: var(--fs-3); max-width: 20ch }
.v3-keur p{ margin-top: 14px; max-width: 52ch; font-size: var(--fs-lead) }
/* De veeglijn die de sectiegrens oversteekt en in de volgende sectie
   beantwoord wordt. */
.v3-keur::after{
  content: ''; position: absolute; right: 0; bottom: 0; z-index: 2;
  width: clamp(160px, 26vw, 340px); height: clamp(40px, 6vw, 84px);
  background: var(--acc); clip-path: polygon(100% 0, 100% 100%, 0 0);
  transform: translateY(100%);
}

/* ---------------------------------------------- v3 · 6 · voor wie ------ */
.v3-voorwie{
  display: grid; gap: clamp(22px, 3.6vw, 56px); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  padding: clamp(56px, 9vh, 104px) var(--marge);
  background: var(--v3-licht); color: var(--v3-licht-ink);
}
.v3-klanten li{
  padding: 12px 0; border-bottom: 1px solid var(--v3-licht-lijn);
  font-family: 'Anybody', 'Manrope', sans-serif; font-weight: 700;
  font-variation-settings: 'wdth' 94; font-size: var(--fs-2); line-height: 1.1;
}
.v3-voorwie-slot{ align-self: end }
.v3-voorwie h2{ font-size: var(--fs-2); max-width: 14ch }
.v3-voorwie-slot p{ margin-top: 12px; max-width: 38ch; font-size: var(--fs-lead); color: var(--v3-licht-dim) }

/* -------------------------------------------------- v3 · 7 · team ------ */
.v3-team{ padding: clamp(56px, 9vh, 104px) var(--marge); background: var(--veld) }
.v3-team h2{ margin-top: 10px; font-size: var(--fs-3); max-width: 14ch }
.v3-mensen{
  display: grid; gap: clamp(16px, 2.6vw, 34px);
  grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px;
  margin-top: clamp(24px, 4vh, 42px);
}
.v3-mensen li{ min-width: 0 }
.v3-mensen img{ width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(.4) contrast(1.1) }
.v3-mensen b{
  display: block; margin-top: 12px; font-family: 'Anybody', 'Manrope', sans-serif;
  font-weight: 800; font-variation-settings: 'wdth' 92; font-size: var(--fs-lead);
}
.v3-mensen span{ display: block; font-size: var(--fs-sm); color: var(--dim) }
.v3-team-slot{ margin-top: clamp(18px, 2.6vh, 28px); font-size: var(--fs-lead); color: var(--dim) }

/* ---------------------------------------------- v3 · 8 · vacature ------ */
.v3-vac{
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  padding: clamp(56px, 9vh, 104px) var(--marge);
  background: var(--veld2);
}
.v3-vac-lijst li{ padding: 14px 0; border-top: 1px solid var(--lijn) }
.v3-vac-lijst b{
  display: block; font-family: 'Anybody', 'Manrope', sans-serif; font-weight: 800;
  font-variation-settings: 'wdth' 90; font-size: var(--fs-2); line-height: 1; color: var(--acc);
}
.v3-vac-lijst span{ display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--dim) }
.v3-vac-tekst h2{ font-size: var(--fs-3); max-width: 14ch }
.v3-vac-tekst p{ margin-top: 14px; max-width: 50ch; font-size: var(--fs-lead); color: var(--dim) }
.v3-vac-tekst .v3-bel{ display: inline-block; margin-top: 24px }

/* ----------------------------------------------- v3 · 9 · contact ------ */
/* Checklistpunt 13, "verwijder één ding": hier stond een turkooizen gloed
   rechtsboven. Weggehaald — hij deed niets wat het vlak niet al deed, en de
   sectie leest strakker zonder. Als het weghalen de pagina beter maakt, was
   het geen dragend element. */
.v3-contact{ padding: clamp(56px, 9vh, 104px) var(--marge) clamp(56px, 9vh, 100px) }
.v3-contact h2{ font-size: var(--fs-3); color: var(--acc); max-width: 16ch }
.v3-contact-raster{
  display: grid; gap: clamp(20px, 3.4vw, 48px); align-items: start;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  margin-top: clamp(22px, 3.6vh, 40px);
}
.v3-contact-lead{ grid-column: 1; max-width: 44ch; font-size: var(--fs-lead); color: var(--dim) }
.v3-contact-acties{ grid-column: 1; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 22px }
.v3-adres{
  grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: var(--fs-sm);
  color: var(--dim); padding-top: 4px; border-top: 2px solid var(--acc);
}
.v3-adres b{ display: block; margin-top: 10px; font-size: var(--fs-body); color: var(--ink) }
.v3-adres span{ display: block; margin-top: 10px; font-size: var(--fs-xs); letter-spacing: .06em }

@keyframes v3-in{ from{ opacity: 0; transform: translateY(16px) } to{ opacity: 1; transform: none } }
@keyframes v3-veeg{ 0%{ transform: translateX(-58%) } 62%,100%{ transform: translateX(62%) } }
@keyframes v3-breed{
  0%, 8%{ font-variation-settings: 'wdth' 78 }
  46%, 100%{ font-variation-settings: 'wdth' 108 }
}
@keyframes v3-chip{ from{ opacity: 0; transform: translateX(24px) } to{ opacity: 1; transform: none } }



/* ══════════════════════════════════════════════════════════ smal ══════ */
@media (max-width: 860px){
  :root{ --kop-h: 116px }

  .v1-kop, .v2-kop, .v3-kop{ flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px }
  .v1-kop-plaats, .v2-kop-plaats, .v3-kop-plaats{ margin-left: 0; order: 3; width: 100% }
  .v1-cta, .v2-cta, .v3-cta{ margin-left: auto }

  /* V1: de schaal wordt een liggende voet onder de tekst, het beeld gaat
     naar boven en de kop komt eroverheen. */
  .v1-hero{ grid-template-columns: 1fr; align-items: start; padding-bottom: 26px }
  .v1-kolom{
    order: 3; align-self: auto; min-height: 0; margin-top: 16px;
    border-right: 0; border-top: 1px solid var(--lijn);
    padding: 16px var(--marge);
  }
  .v1-schaal{ min-height: 0; flex-direction: row; flex-wrap: wrap; gap: 8px 14px; height: auto; flex: none }
  .v1-schaal li{ gap: 7px }
  .v1-tik{ width: 14px }
  .v1-nul{ margin-top: 16px }
  .v1-plaat{ position: relative; right: auto; top: auto; width: 100%; box-shadow: none }
  .v1-tekst{ order: 2; margin-top: -34px; padding-left: var(--marge); padding-right: var(--marge) }
  /* De chip hoort OP de foto en niet op de kop: op 44vw lag hij precies over
     "Schoonmaak en glas" en las de contrastcheck geel op geel. */
  .v1-chip{ right: var(--marge); top: clamp(112px, 30vw, 168px); max-width: 62vw }

  /* V2: het blad staat recht, de foto blijft over de onderrand hangen. */
  .v2-hero{ padding-bottom: clamp(84px, 22vw, 128px) }
  .v2-blad{ transform: none; animation-name: v2-blad-recht }
  .v2-rij{ grid-template-columns: 1fr auto; gap: 2px 14px; padding: 12px 0 }
  .v2-rij-kop{ display: none }
  .v2-d{ grid-column: 1 }
  .v2-p{ grid-row: 1 / span 3; grid-column: 2; align-self: center }
  .v2-l, .v2-w{ grid-column: 1 }
  /* padding-top zodat het kolomlabel onder de overhangende chip uit komt. */
  .v2-blad-kop{ grid-template-columns: 1fr; padding-top: 20px }
  .v2-acties{ justify-content: flex-start }
  .v2-foto{ right: 5%; bottom: clamp(-72px, -14vw, -48px); width: 42vw; border-width: 5px }
  /* Rechts, want links dekte hij het label "Logboek · locatie-exemplaar" af. */
  .v2-chip{ left: auto; right: 16px; top: -15px }
  .v2-cel{ aspect-ratio: 16 / 7.5 }

  /* V2, secties 2 tot en met 9 */
  .v2-ritme{ grid-template-columns: minmax(0, 1fr) }
  .v2-cyclus li{ grid-template-columns: minmax(0, 1fr) }
  .v2-ritme-slot{ align-self: auto }
  .v2-item summary{ grid-template-columns: 2.6rem minmax(0, 1fr) 1.4rem; gap: 12px }
  .v2-uit p{ margin-left: 0; padding-left: 0 }
  /* De verhoudingsrijen worden op smal één kolom: vier kolommen van elk hun
     eigen beeldverhouding levert onder de 860 stroken van tachtig pixels op. */
  .v2-mozaiek-a, .v2-mozaiek-b{ grid-template-columns: minmax(0, 1fr) }
  .v2-tegel{ padding: 22px }
  .v2-klanten{ grid-template-columns: minmax(0, 1fr) }
  .v2-team{ grid-template-columns: minmax(0, 1fr) }
  .v2-team .v2-eyebrow, .v2-team h2{ grid-column: 1 }
  .v2-team-slot{ grid-column: 1; grid-row: auto; align-self: auto; margin-top: 14px }
  .v2-vac{ grid-template-columns: minmax(0, 1fr) }
  .v2-vac-blad .v2-rij{ grid-template-columns: minmax(0, 1fr) }
  .v2-contact-raster{ grid-template-columns: minmax(0, 1fr) }
  .v2-contact-lead, .v2-contact-acties{ grid-column: 1 }
  .v2-adres{ grid-column: 1; grid-row: auto; margin-top: 12px }

  /* V3, secties 2 tot en met 9 */
  .v3-veeg{ grid-template-columns: minmax(0, 1fr) }
  .v3-veeg-beeld{ position: static }
  .v3-lijst li{ grid-template-columns: minmax(0, 1fr) }
  .v3-voorwie{ grid-template-columns: minmax(0, 1fr) }
  .v3-voorwie-slot{ align-self: auto }
  .v3-vac{ grid-template-columns: minmax(0, 1fr) }
  .v3-contact-raster{ grid-template-columns: minmax(0, 1fr) }
  .v3-contact-lead, .v3-contact-acties{ grid-column: 1 }
  .v3-adres{ grid-column: 1; grid-row: auto; margin-top: 12px }
  .v3-veeg-beeld{ margin-left: 0 }

  /* V3: tekst onder het beeld in plaats van erop, zodat de plaat de foto
     niet hoeft op te eten om contrast te halen. */
  .v3-hero{ align-items: start; align-content: start; padding-top: 0; padding-bottom: 30px }
  .v3-vid{ position: relative; inset: auto; height: 36svh; min-height: 200px }
  .v3-hero::after{ bottom: auto; height: 36svh; min-height: 200px }
  .v3-hero::before{ inset: -6% -40% auto; height: 48svh }
  .v3-tekst{
    margin-top: 22px; padding-left: 0; padding-right: 0;
    background-image: none; background-color: var(--veld);
  }
  .v3-chip{ right: var(--marge); top: 26svh; max-width: 58vw }
  .v3-r2{ margin-top: .5em }


  /* V1, secties 2 tot en met 9: alles naar één kolom, en de getekende gevel
     wordt een gecentreerde plaat in plaats van een kolom naast de tekst. */
  .v1-lijn-raster{ grid-template-columns: minmax(0, 1fr) }
  .v1-gevel{ grid-column: 1; grid-row: 1; width: min(66vw, 280px); justify-self: center }
  .v1-niveaus{ grid-column: 1; grid-row: 3; grid-template-rows: none }
  .v1-lijn-slot{ grid-column: 1; grid-row: 2; align-self: auto; padding-top: 0 }
  .v1-diensten-kop{ justify-items: start; text-align: left }
  .v1-materieel{ grid-template-columns: minmax(0, 1fr) }
  /* Drie kolommen laat op 320 nog 57px over per cel, en "Woningbouw-
     verenigingen" is als één woord ruim drie keer zo breed. */
  .v1-klanten{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .v1-register > div{ grid-template-columns: minmax(0, 1fr) }
  .v1-keur{ grid-template-columns: minmax(0, 1fr) }
  .v1-mensen{ margin-bottom: clamp(-52px, -9vw, -32px) }
  .v1-team-slot{ margin-left: 0 }
  .v1-vac{ grid-template-columns: minmax(0, 1fr) }
  .v1-contact-raster{ grid-template-columns: minmax(0, 1fr) }
  .v1-contact-lead, .v1-contact-acties{ grid-column: 1 }
  .v1-adres{ grid-column: 1; grid-row: auto; margin-top: 12px }

  .v1-voet, .v2-voet, .v3-voet{ flex-direction: column; gap: 8px }
  .v1-credit, .v2-credit, .v3-credit{ margin-left: 0 }
}

/* Onder 520 wordt een derde van de kolom 100px breed, en dan is een portret
   geen portret meer. Eén kolom, en de `sizes` volgt dezelfde tak. */
@media (max-width: 520px){
  .v1-mensen, .v2-mensen, .v3-mensen{ grid-template-columns: minmax(0, 1fr); max-width: 300px }
  .v3-klanten li{ font-size: var(--fs-lead) }
  .v1-klanten{ grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 420px){
  .v1-chip{ top: clamp(88px, 24vw, 132px) }
  .v3-chip{ top: 24svh; max-width: 68vw }
}

@keyframes v2-blad-recht{ from{ opacity: 0; transform: translateY(22px) } to{ opacity: 1; transform: none } }


/* ═══════════════════════════════════════════ beweging uit ═══════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0ms !important; transition-duration: 1ms !important;
  }
  .v2-p path{ stroke-dashoffset: 0 }
  .v3-r1{ font-variation-settings: 'wdth' 104 }
  .v3-hero::before{ opacity: .5 }
}