/* ============================================================
   BO. v2 — richting B: levende achtergrond
   Palet 1:1 uit de Canva-brief "webdesign BO." (DAHRCNg8l9g).
   Licht-dominant met donkere bookends; de shader draagt intro,
   hero en blog en blijft weg uit de witte secties.
   Spacing-tokens uit /ontwerp §1.
   ============================================================ */

@font-face { font-family: "Anton"; src: url("assets/fonts/anton-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken"; src: url("assets/fonts/hanken-800-latin.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("assets/fonts/instrument-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("assets/fonts/instrument-italic-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url("assets/fonts/plexmono-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Accent bewust gedempt t.o.v. de Canva-#ff751f: die was te fel naast de
     teal van de analysefoto. Zelfde kleur, minder verzadigd en donkerder. */
  --oranje:    #d9662a;
  --oranje-fel:#ff751f;              /* alleen waar het écht moet knallen */

  --paneel:    #0d0d0d;
  --petrol:    #19262b;

  /* uit analyse-lamellen.webp gehaald, niet gegokt */
  --diepteal:  #183030;
  --teal:      #2f5a5a;
  --grijsveld: #2e3534;              /* stappenplan — donker genoeg voor het oranje cijfer */
  --filmgrijs: #232b2b;              /* over ons, filmscène */

  --warmwit:   #fdf8f3;
  --bone:      #ecece9;
  --warmgrijs: #e0deda;
  --inkt:      #000000;
  --wit:       #ffffff;
  --grijs:     #55524e;
  --grijslicht:#b9b4ae;

  --display: "Anton", "Arial Narrow", sans-serif;
  --bold:    "Hanken", system-ui, sans-serif;
  --serif:   "Instrument", Georgia, serif;
  --body:    "Inter", system-ui, sans-serif;
  --mono:    "PlexMono", ui-monospace, monospace;

  --space-cta:      20px;
  --space-heading:  12px;
  --space-hero:     32px;
  --space-media:    32px;
  --space-section: 100px;

  --rand: clamp(20px, 5vw, 72px);
  --kop-h: 68px;
}

@media (max-width: 720px) {
  :root { --space-cta: 14px; --space-media: 20px; --space-section: 56px; --space-hero: 26px; --kop-h: 58px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--wit); color: var(--inkt);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grijs); }
.serif { font-family: var(--serif); }
.lijn { height: 2px; border: 0; margin: var(--space-heading) 0 var(--space-media);
  background: linear-gradient(90deg, var(--inkt), transparent); }

:focus-visible { outline: 2px solid var(--oranje); outline-offset: 3px; }

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--oranje); color: var(--wit); padding: 12px 18px;
  font-family: var(--mono); font-size: 12px; text-decoration: none;
}
.overslaan:focus { left: 12px; top: 12px; }

/* ---------- knoppen ---------- */
/* donkere tekst op oranje: wit op #ff751f haalde maar 2,7:1 en zakte dus
   onder elke AA-drempel. Dit haalt 5,3:1 en staat ook zo in de Canva
   (de menustrepen zijn daar petrol op oranje). */
.knop {
  display: inline-block; padding: 15px 30px;
  background: var(--oranje); color: var(--paneel);
  font-family: var(--body); font-size: 15px; font-weight: 600;
  letter-spacing: .01em; text-decoration: none;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: transform .18s ease, filter .25s ease;
}
@media (hover: hover) and (pointer: fine) { .knop:hover { filter: brightness(1.08); } }
.knop:active { transform: scale(.97); }
.knop--klein { padding: 11px 22px; font-size: 14px; }
.knop--groot { padding: 18px 38px; font-size: 17px; }

.tekstlink {
  font-size: 15px; color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity .25s ease;
}
@media (hover: hover) and (pointer: fine) { .tekstlink:hover { opacity: .6; } }
.tekstlink:active { transform: scale(.97); display: inline-block; }

/* ============================================================
   ÉÉN BLAD KOMT OMHOOG
   De hero (`.laag`) blijft staan; alleen het web-design-blad
   (`.blad`) schuift eroverheen naar boven. Alles daarna scrollt
   gewoon door — vloeiend, geen stapel.
   ============================================================ */
.laag { position: sticky; top: 0; z-index: 1; }

/* De sticky hero blijft technisch de hele pagina plakken, en een gepositioneerd
   element schildert altijd bovenop statische broers/zussen. Alles ná de hero
   moet dus zelf gepositioneerd zijn, anders verdwijnt het eronder. */
main > *:not(.laag) { position: relative; z-index: 2; }

/* de hero dimt terwijl het blad hem afdekt — geeft diepte */
.laag::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: var(--paneel); opacity: var(--dim, 0); pointer-events: none;
}

/* Sectiewissel: de kleur van de nieuwe sectie komt in kleine rechthoeken
   over de vorige kleur, van rechts naar links. `--van` = kleur van de vorige
   sectie, `--naar` = die van deze. */
.wissel {
  position: absolute; left: 0; right: 0; top: 0;
  height: clamp(52px, 8vh, 96px);
  display: flex; z-index: 0; pointer-events: none;
  background: var(--van);
}
.wissel span {
  flex: 1 1 0; display: block; background: var(--naar);
  transform: scaleY(1); transform-origin: top;   /* zonder JS meteen dicht */
  will-change: transform;
}
/* de wissel blendt de achtergrondrand en mag niet ovér de inhoud vallen —
   anders wast hij de bovenkant van de voettitel weg */
.zachte-kop > *:not(.wissel) { position: relative; z-index: 1; }

/* positie en z-index komen van de regel hierboven; hier alleen het uiterlijk */
.blad {
  background: linear-gradient(180deg, var(--wit) 0%, var(--wit) 62%, #f2f1ef 100%);
  box-shadow: 0 -28px 60px -24px rgba(13,13,13,.22);
}

/* ============================================================
   INTRO — elke keer dat de site opent (slide 1)
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 150;
  background: var(--paneel);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: hidden;
}
.intro.is-weg { pointer-events: none; }
.intro__doek {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .85;
}
.intro__presented {
  position: absolute; top: 28px; left: var(--rand);
  color: var(--warmwit) !important; z-index: 2;
}
.intro__woord {
  position: relative; z-index: 2; margin: 0; text-align: center;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(52px, 12.5vw, 190px); line-height: .88; letter-spacing: -.02em;
  color: var(--oranje);
}
.intro__regel { display: block; overflow: hidden; }
.intro__regel > span { display: block; will-change: transform; }
.intro__balk {
  position: absolute; left: var(--rand); right: var(--rand); bottom: 40px; z-index: 2;
  height: 2px; background: rgba(253,248,243,.18);
}
.intro__balk span {
  display: block; height: 100%; width: 0; background: var(--oranje);
}

/* ============================================================
   VASTE KOP + MENU
   ============================================================ */
.kop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--kop-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--rand);
  transition: background-color .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.kop.is-vast {
  background: color-mix(in srgb, var(--wit) 84%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(0,0,0,.09);
}
.kop__merk {
  font-family: var(--bold); font-weight: 800; font-size: 23px; letter-spacing: -.03em;
  color: var(--inkt); text-decoration: none;
  transition: color .35s ease;
}
.kop__merk b { color: var(--oranje); }
/* alleen boven een donkere kop (blog) staat het merk in warmwit */
.kop--op-donker .kop__merk { color: var(--warmwit); }
.kop.is-vast .kop__merk { color: var(--inkt); }

.kop__knop {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 62px; height: 38px; padding: 0 16px;
  background: var(--oranje); border: 0; border-radius: 999px; cursor: pointer;
  transition: transform .18s ease;
}
.kop__streep { display: block; height: 2px; background: var(--petrol); transition: transform .3s ease, opacity .25s ease; }
.kop__knop:active { transform: scale(.94); }
.kop__knop[aria-expanded="true"] .kop__streep:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kop__knop[aria-expanded="true"] .kop__streep:nth-child(2) { opacity: 0; }
.kop__knop[aria-expanded="true"] .kop__streep:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* het menu draagt dezelfde foto als het introscherm — de eerste indruk
   keert terug elke keer dat je het menu opent */
.menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--diepteal);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--kop-h) var(--rand) var(--space-section);
  overflow: hidden;
}
.menu[hidden] { display: none; }
.menu__doek {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .5;
}
.menu > :not(.menu__doek) { position: relative; z-index: 2; }
.menu__lijst { margin-bottom: var(--space-section); }
.menu__lijst a {
  display: inline-block; padding: 6px 0;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(34px, 7vw, 84px); line-height: 1.06; letter-spacing: -.01em;
  color: var(--warmwit); text-decoration: none;
  transition: color .25s ease, transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .menu__lijst a:hover { color: var(--oranje); transform: translateX(14px); }
}
.menu__lijst a:active { transform: scale(.98); }
.menu__mail { color: var(--oranje); font-family: var(--mono); font-size: 13px; text-decoration: none; }

/* ============================================================
   HERO (slide 2)
   ============================================================ */
/* De hero draagt nu de staalfoto: wit boven, geborsteld staal onder.
   Daarom staat de tekst bovenin op het witte deel, in zwart i.p.v. warmwit. */
/* geen `position` hier: `.laag` levert sticky en die moet winnen */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--kop-h) + 6vh) var(--rand) var(--space-section);
  overflow: hidden;
  /* wit dat naar grijs degradeert — de foto komt hier bovenop en zakt erin weg */
  background: linear-gradient(158deg, var(--wit) 0%, #f6f5f3 46%, var(--warmgrijs) 100%);
}
.hero__doek {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%;
}
/* waas: dekkend wit waar de tekst staat, oplossend naar rechts zodat de
   oranje gloed vrij blijft, met een grijze wash onderaan */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg,
      #ffffff 0%, rgba(255,255,255,.985) 38%, rgba(255,255,255,.90) 53%,
      rgba(255,255,255,.48) 67%, rgba(255,255,255,0) 85%),
    linear-gradient(180deg,
      rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 26%,
      rgba(224,222,218,.30) 74%, rgba(224,222,218,.62) 100%);
}
/* Op smal scherm is er geen linkerhelft om op uit te wijken: het waas gaat
   verticaal staan — tekst op wit bovenin, de gloed komt eronder vrij. */
@media (max-width: 860px) {
  .hero { align-items: flex-start; }
  .hero__doek { object-position: 62% 72%; }
  .hero::before {
    background:
      linear-gradient(180deg,
        #ffffff 0%, rgba(255,255,255,.985) 46%, rgba(255,255,255,.92) 58%,
        rgba(255,255,255,.45) 72%, rgba(255,255,255,0) 88%),
      linear-gradient(180deg, rgba(224,222,218,0) 70%, rgba(224,222,218,.45) 100%);
  }
}

.hero__binnen { position: relative; z-index: 2; max-width: 1100px; }
.hero__eyebrow { margin-bottom: 24px; }
.hero__titel {
  font-family: var(--bold); font-weight: 800;
  font-size: clamp(38px, 7.2vw, 112px); line-height: .82; letter-spacing: -.045em;
  color: var(--inkt); margin-bottom: var(--space-hero); max-width: 11ch;
}
.hero__lede {
  max-width: 44ch; font-size: clamp(16px, 1.7vw, 19px); color: var(--grijs);
  margin-bottom: var(--space-cta);
}
.hero__acties { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero__acties .tekstlink { color: var(--inkt); }

.split__woord { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split__woord > span { display: inline-block; will-change: transform; }

/* ============================================================
   ANALYSE (slide 3) — wit
   ============================================================ */
/* Géén `overflow: hidden` hier — dat maakt van deze sectie een
   scroll-container en dan werkt de sticky uitklap eronder niet meer. */
.analyse { padding: var(--space-section) 0 0; background: var(--wit); }
/* kop links, deck ernaast — geen gecentreerde blokletter, en meteen de
   typeladder uit /ontwerp §2: kop → deck → body */
.analyse__kop {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
  padding: 0 var(--rand); margin-bottom: calc(var(--space-section) * .72);
}
.analyse__groot {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(56px, 12vw, 178px); line-height: .82; letter-spacing: -.045em;
  color: var(--inkt);
}
.analyse__deck {
  font-family: var(--serif); font-size: clamp(19px, 2.1vw, 28px);
  line-height: 1.3; color: var(--inkt); max-width: 26ch; padding-bottom: .5em;
}

/* side-label patroon (/ontwerp §2, patroon 4) */
.analyse__rij {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px); align-items: start;
  margin: 0 var(--rand); padding-top: 26px;
  border-top: 1px solid rgba(0,0,0,.14);
}
.analyse__label { padding-top: 4px; }
.analyse__tekst { max-width: 46ch; color: var(--grijs); margin-bottom: var(--space-cta); }

@media (max-width: 780px) {
  .analyse__kop { grid-template-columns: 1fr; align-items: start; }
  .analyse__rij { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- uitklap: van ingekaderd naar volledig scherm (slide 3) ---- */
.analyse__uitklap { position: relative; height: 300vh; margin-top: var(--space-section); }
.analyse__vast {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
/* het kader vult het hele scherm en start verkleind — schalen i.p.v.
   width/height animeren, zodat het op de GPU blijft */
.analyse__kader {
  --start-schaal: .52;              /* JS leest deze, zodat resize klopt */
  position: absolute; inset: 0; z-index: 0;
  transform: scale(var(--start-schaal)); transform-origin: center;
  will-change: transform;
}
.analyse__foto { width: 100%; height: 100%; object-fit: cover; display: block; }

/* donker glas op de lamellenfoto: transparant genoeg om de blur te zien,
   dekkend genoeg om de lichte banen eronder niet door de tekst te laten snijden */
.analyse__stappen {
  position: relative; z-index: 2;
  width: min(700px, calc(100% - 2 * var(--rand)));
  padding: 36px 40px 30px;
  background: rgba(13, 13, 13, .50);
  backdrop-filter: blur(44px) saturate(1.15);
  -webkit-backdrop-filter: blur(44px) saturate(1.15);
  border: 1px solid rgba(253, 248, 243, .14);
  border-left: 3px solid var(--oranje);
  opacity: 0; will-change: transform, opacity;
  padding-left: 92px;
}
/* Indexkolom: het oranje haalt op dit lichte glas nooit 4,5:1 tegen de
   lichte banen van de foto. Een eigen donkere strook lost dat op zonder
   het hele paneel weer donker te maken. */
.analyse__stappen::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 92px;
  background: var(--paneel); z-index: 0;   /* even breed als het nummervak */
}
.analyse__stappen > * { position: relative; z-index: 1; }

.analyse__stappen-kop { margin-bottom: 22px; color: var(--warmwit) !important; }
.analyse__lijst li {
  display: flex; align-items: baseline; gap: 0; padding: 14px 0;
  border-bottom: 1px solid rgba(253, 248, 243, .16);
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 26px); line-height: 1.35;
  color: var(--warmwit);
}
.analyse__lijst li:last-child { border-bottom: 0; padding-bottom: 0; }
.analyse__lijst .mono {
  color: var(--oranje-fel); flex: 0 0 auto; margin: 0;
  font-size: 12px; letter-spacing: .1em;
  width: 92px; margin-left: -92px;   /* staat op de donkere indexkolom */
}

@media (max-width: 900px) {
  .analyse__rij { grid-template-columns: 1fr; align-items: start; }
  .analyse__uitklap { height: 240vh; }
  .analyse__kader { --start-schaal: .62; }
}

/* ============================================================
   PROJECTEN — zijwaarts (slide 4)
   ============================================================ */
/* Uitgezoomd: kleinere kaarten, ruimte boven en onder, en een bredere marge
   zodat je naar de rij kíjkt in plaats van er tegenaan. */
.projecten { position: relative; height: 190vh; background: var(--bone); }
.projecten__vast {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding-block: 10svh;
}
.projecten__kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 0 calc(var(--rand) * 1.5); margin-bottom: clamp(28px, 5vh, 56px); flex-wrap: wrap;
}
.projecten__titel { font-size: clamp(38px, 6vw, 96px); line-height: 1; }
/* aanloop links: de rij begint rechts van het midden en schuift er dan
   doorheen. Vier kaarten alleen geven te weinig reis om zijwaarts te lezen. */
.projecten__spoor {
  display: flex; align-items: stretch;
  gap: clamp(18px, 2.2vw, 32px);
  padding-left: clamp(var(--rand), 28vw, 460px);
  padding-right: calc(var(--rand) * 1.5);
  will-change: transform;
}

.werk {
  flex: 0 0 clamp(240px, 27vw, 390px);
  max-height: 58svh;
  display: flex; flex-direction: column;
  padding: 20px; background: var(--wit);
  border: 1px solid rgba(0,0,0,.1);
  text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.werk__nr { margin-bottom: 14px; color: var(--oranje); }
.werk__beeld {
  display: block; aspect-ratio: 4 / 3; margin-bottom: 16px;
  flex: 1 1 auto; min-height: 0;
  background-color: var(--warmgrijs);
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 8px),
    radial-gradient(80% 70% at 30% 20%, rgba(255,117,31,.22), transparent 70%);
}
.werk__beeld--motion { background-image:
  repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 3px, transparent 3px 10px),
  radial-gradient(70% 80% at 70% 30%, rgba(25,38,43,.28), transparent 70%); }
.werk__beeld--helder { background-image:
  repeating-linear-gradient(90deg, rgba(0,0,0,.045) 0 1px, transparent 1px 7px),
  radial-gradient(85% 70% at 50% 80%, rgba(255,117,31,.16), transparent 70%); }
.werk__naam {
  font-family: var(--bold); font-weight: 800; font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -.025em; margin-bottom: 5px; color: var(--inkt);
}
.werk__meta { font-size: 14px; color: var(--grijs); }
.werk--soon { opacity: .55; }
.werk--leeg { background: none; border-style: dashed; justify-content: center; }

@media (hover: hover) and (pointer: fine) {
  a.werk:hover { transform: translateY(-8px); border-color: var(--oranje); }
}
a.werk:active { transform: scale(.98); }

/* ============================================================
   AANPAK — vast veld met grote nummers (slide 5)
   "de nul blijft wit, de 1-2-3 worden oranje"
   ============================================================ */
/* grijs i.p.v. bijna-zwart, maar donker genoeg zodat de nul wit kan blijven
   zoals in de Canva staat */
.aanpak {
  position: relative; height: 200vh; background: var(--paneel);
  --van: var(--wit);            /* analyse eindigt wit */
  --naar: var(--paneel);
}
/* Volledig zwart veld, naar het aangeleverde voorbeeld: de inhoud komt
   daaruit tevoorschijn in plaats van op een gekleurd vlak te liggen. */
/* Het veld staat vast terwijl de stappen er een voor een uit tevoorschijn komen.
   Let op de selector: `.zachte-kop > *:not(.wissel)` hierboven heeft hogere
   specificiteit en zou `position: sticky` anders overschrijven met relative. */
.aanpak > .aanpak__vast {
  position: sticky; top: 0; z-index: 1; min-height: 100svh;
  display: grid; grid-template-columns: 32% 68%;
  align-content: center;
  padding-block: calc(var(--kop-h) + 4vh) 4vh;
}
.aanpak__zij {
  background: var(--paneel);
  display: flex; flex-direction: column;
  padding: 0 clamp(24px, 3.4vw, 56px) 0 var(--rand);
}
.aanpak__merk {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(40px, 6.4vw, 104px); line-height: .86; letter-spacing: -.035em;
  color: var(--warmwit); margin-bottom: var(--space-heading);
}
.aanpak__onder { color: var(--grijslicht) !important; }

.aanpak__hoofd {
  background: var(--paneel);
  padding: 0 var(--rand) 0 clamp(24px, 3.4vw, 56px);
}
/* alle drie de stappen staan tegelijk op het zwarte veld */
.aanpak__stap {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: clamp(20px, 3vw, 46px);
  padding: clamp(26px, 4vh, 44px) 0;
  border-top: 1px solid rgba(253, 248, 243, .14);
}
.aanpak__stap:first-child { border-top: 0; padding-top: 0; }

.aanpak__nummer {
  display: flex; align-items: baseline;
  font-family: var(--display);
  font-size: clamp(46px, 6vw, 96px); line-height: .82; letter-spacing: -.03em;
}
.aanpak__nul { color: var(--warmwit); }
.aanpak__cijfer { color: var(--oranje); }

.aanpak__paneel { will-change: clip-path; }
.aanpak__titel {
  font-family: var(--bold); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.03em;
  color: var(--warmwit); margin-bottom: var(--space-heading);
}
.aanpak__tekst { max-width: 40ch; color: #cdc8c1; }

@media (max-width: 860px) {
  .aanpak__vast { grid-template-columns: 1fr; }
  .aanpak__zij { padding: 0 var(--rand) 26px; }
  .aanpak__hoofd { padding: 0 var(--rand); }
  .aanpak__stap { grid-template-columns: 1fr; gap: 6px; }
  .aanpak__nummer { font-size: clamp(46px, 15vw, 84px); }
}

/* ============================================================
   OVER ONS (slide 6)
   ============================================================ */
/* Strook naar het Cyphr-model: lichte grijze grond, álle tekst in monospace,
   twee hoge beelden die de sectie van boven tot onder vullen, en het laatste
   beeld dat door de rechterrand wordt afgesneden. */
.over {
  background: #ecebe9; color: var(--inkt);
  padding: 0; overflow: hidden;
}
.over__marker { padding: clamp(28px, 5vh, 52px) var(--rand) 0; }

/* De strook is breder dan de sectie, dus de tweede foto ligt deels onder de
   paginarand. Tijdens het scrollen pant de camera naar rechts (de strook
   schuift naar links) en komt die foto helemaal vrij. */
.over__strook {
  --pan: clamp(140px, 16vw, 260px);
  display: grid;
  grid-template-columns: .92fr .68fr .92fr .5fr;
  gap: clamp(20px, 2.8vw, 46px);
  align-items: stretch;
  min-height: 82svh;
  /* de pan-afstand staat vooraan als extra marge: daardoor eindigt de linker
     kolom precies op --rand en loopt er tijdens het pannen nooit tekst weg */
  padding-left: calc(var(--rand) + var(--pan));
  margin-top: clamp(24px, 4vh, 48px);
  width: calc(100% + var(--pan));
  will-change: transform;
}

.over__kolom { display: flex; flex-direction: column; }
.over__kolom--midden { justify-content: center; }
.over__kolom--hoog   { justify-content: center; padding-top: clamp(30px, 9vh, 96px); }

.over__label { margin-bottom: clamp(18px, 3vh, 30px); color: var(--grijs); }
.over__lees {
  font-family: var(--mono);
  font-size: clamp(12.5px, 1.02vw, 14.5px);
  line-height: 1.86; letter-spacing: .004em;
  color: var(--inkt); max-width: 48ch;
}

.over__beeld { position: relative; margin: 0; overflow: hidden; background: var(--diepteal); }
.over__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* filmkorrel, zoals in de referentie */
.over__beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .17; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

.over__feiten {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 5vw, 88px);
  margin: clamp(28px, 5vh, 52px) var(--rand) 0;
  padding: 24px 0 clamp(36px, 6vh, 60px);
  border-top: 1px solid rgba(0,0,0,.16);
}
.over__feiten li {
  font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--inkt);
}
.over__feiten .mono {
  display: block; margin-bottom: 5px; color: var(--grijs);
}

@media (max-width: 900px) {
  .over__strook {
    grid-template-columns: 1fr 1fr; min-height: 0;
    padding-inline: var(--rand); gap: 22px;
    width: 100%; transform: none !important;   /* geen pan op smal scherm */
  }
  .over__kolom--hoog { padding-top: 0; }
  .over__kolom { grid-column: 1 / -1; }
  .over__beeld { aspect-ratio: 3 / 4; }
  .over__beeld--rand { margin-right: 0; }
}

/* ============================================================
   VOET
   ============================================================ */
.voet {
  padding: var(--space-section) var(--rand); background: var(--paneel); color: var(--warmwit);
  --van: var(--bone);           /* projecten eindigt in bone */
  --naar: var(--paneel);
}
.voet__titel {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(38px, 8vw, 118px); line-height: .9; letter-spacing: -.02em;
  color: var(--oranje); margin-bottom: var(--space-hero);
}
.voet__tekst { max-width: 46ch; color: #ded9d3; margin-bottom: var(--space-cta); }
.voet__onder {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: var(--space-section); padding-top: 24px;
  border-top: 1px solid rgba(253,248,243,.16);
}
.voet__onder .mono { color: var(--grijslicht) !important; }
.voet__links { display: flex; gap: 22px; }
.voet__links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--warmwit); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .voet__links a:hover { color: var(--oranje); } }
.voet__links a:active { transform: scale(.97); display: inline-block; }

/* ============================================================
   DIENSTEN (slide 7)
   ============================================================ */
.d-kop { padding: calc(var(--kop-h) + var(--space-section)) var(--rand) var(--space-section); background: var(--wit); }
.d-kop__titel {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(52px, 14vw, 220px); line-height: .9; letter-spacing: -.04em;
  color: var(--inkt); margin-bottom: var(--space-hero);
}
.d-kop__stelling {
  max-width: 30ch; font-family: var(--serif);
  font-size: clamp(22px, 3vw, 38px); line-height: 1.25; color: var(--inkt);
}

.luiken { padding: 0 var(--rand) var(--space-section); background: var(--wit); }
.luiken__hint { margin-bottom: var(--space-media); }
.luiken__rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.luik {
  position: relative; overflow: hidden;
  min-height: 62svh; padding: 28px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--paneel);
}
.luik__patroon {
  position: absolute; inset: 0; z-index: 0;
  background-color: #1c1c1c;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.08) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.6)        0 3px, transparent 3px 8px),
    radial-gradient(90% 70% at 50% 20%, rgba(255,117,31,.22), transparent 72%);
  opacity: 0; transform: scaleY(0); transform-origin: center;
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.luik__voor { position: relative; z-index: 2; }
.luik__naam {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(34px, 4.4vw, 62px); line-height: 1; letter-spacing: -.02em;
  color: var(--oranje); margin-bottom: 6px;
}
.luik__prijs { color: var(--warmwit) !important; }

/* blurred block with de needed information */
.luik__info {
  position: relative; z-index: 2;
  margin-top: var(--space-cta);
  padding: 18px 20px;
  background: rgba(13,13,13,.55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(253,248,243,.16);
  opacity: 0; transform: translateY(14px);
  transition: opacity .42s ease .05s, transform .42s cubic-bezier(.2,.8,.2,1) .05s;
}
.luik__tekst { font-size: 14.5px; line-height: 1.55; color: var(--warmwit); margin-bottom: var(--space-heading); }
.luik__lijst li {
  position: relative; padding-left: 16px; margin-bottom: 5px;
  font-size: 13.5px; line-height: 1.5; color: #cdc8c1;
}
.luik__lijst li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 1px; background: var(--oranje);
}

@media (hover: hover) and (pointer: fine) {
  .luik:hover .luik__patroon { opacity: 1; transform: scaleY(1); }
  .luik:hover .luik__info { opacity: 1; transform: translateY(0); }
}
.luik:focus-within .luik__patroon { opacity: 1; transform: scaleY(1); }
.luik:focus-within .luik__info { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .luiken__rij { grid-template-columns: 1fr; }
  .luik { min-height: 0; }
  .luik__patroon { opacity: 1; transform: scaleY(1); }
  .luik__info { opacity: 1; transform: none; }
}

.d-uitleg {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-media);
  padding: var(--space-section) var(--rand); background: var(--bone);
}
.d-uitleg__kolom .mono { margin-bottom: var(--space-heading); }
.d-uitleg__tekst { max-width: 42ch; color: var(--grijs); }
@media (max-width: 780px) { .d-uitleg { grid-template-columns: 1fr; } }

.privacy { padding: var(--space-section) var(--rand); background: var(--bone); }
.privacy__inhoud { max-width: 820px; }
.privacy__bijgewerkt { margin-bottom: var(--space-hero); color: var(--grijs); }
.privacy__inhoud h2 {
  margin-top: clamp(42px, 6vw, 76px);
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 5vw, 54px); line-height: .95; letter-spacing: -.02em;
}
.privacy__inhoud p { max-width: 68ch; margin-top: 14px; color: var(--grijs); }
.privacy__inhoud a { color: var(--inkt); text-decoration-color: var(--oranje); text-underline-offset: 3px; }
.privacy__inhoud a:hover { color: var(--oranje); }

/* ============================================================
   BLOG (slide 8) — vloeibare achtergrond met de artikels erover
   ============================================================ */
.blog-kop {
  min-height: 78svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--kop-h) + 60px) var(--rand) var(--space-section);
  background: var(--paneel);
}
.blog-kop__doek {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: .8;
}
.blog-kop__titel {
  position: relative; z-index: 2;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(56px, 15vw, 230px); line-height: .88; letter-spacing: -.04em;
  color: var(--warmwit); margin-bottom: var(--space-hero);
  text-shadow: 0 4px 60px rgba(0,0,0,.5);
}
.blog-kop__lede {
  position: relative; z-index: 2; max-width: 44ch;
  font-size: clamp(16px, 1.7vw, 19px); color: #ddd8d1;
  text-shadow: 0 1px 24px rgba(0,0,0,.6);
}

.artikels {
  padding: var(--space-section) var(--rand);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
/* redactioneel i.p.v. kaartjes: haarlijn boven, geen paneel — anders is
   élk blok op de site hetzelfde bakje met een oranje randje */
.artikel {
  padding: 26px 0 30px;
  border-top: 2px solid var(--inkt);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.artikel--groot { grid-column: 1 / -1; }
.artikel--groot .artikel__titel { font-size: clamp(28px, 4vw, 52px); max-width: 20ch; }
.artikel--groot .artikel__lede { font-size: 18px; max-width: 52ch; }
.artikel__meta { margin-bottom: var(--space-heading); }
.artikel__titel {
  font-family: var(--bold); font-weight: 800;
  font-size: clamp(21px, 2.4vw, 31px); line-height: 1.1; letter-spacing: -.028em;
  color: var(--inkt); margin-bottom: var(--space-heading);
}
.artikel__lede { font-size: 15.5px; line-height: 1.6; color: var(--grijs); margin-bottom: var(--space-cta); }
.artikel__lees { display: inline-block; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .artikel:hover { transform: translateY(-6px); } }
@media (max-width: 820px) { .artikels { grid-template-columns: 1fr; } }

/* ============================================================
   REDUCED MOTION — beweging weg, inhoud blijft
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .laag { position: static; }
  .laag::after { display: none; }
  .blad { box-shadow: none; }
  .projecten, .aanpak { height: auto; }
  .projecten__vast, .aanpak__vast { position: static; height: auto; padding-block: var(--space-section); }
  .projecten__spoor { overflow-x: auto; }
  .aanpak__panelen { height: auto; display: grid; gap: var(--space-media); }
  .aanpak__paneel { position: static; opacity: 1; }
  .projecten__spoor, .over__strook { transform: none !important; }
  .over__strook { width: 100%; padding-left: var(--rand); }
  .wissel span { transform: scaleY(1) !important; }
  .aanpak__paneel, .aanpak__merk, .aanpak__onder, .aanpak__cijfer {
    clip-path: none !important;
  }
  .analyse__uitklap { height: auto; margin-top: var(--space-media); }
  .analyse__vast { position: static; height: auto; display: block; }
  .analyse__kader { position: static; transform: none !important; }
  .analyse__foto { height: auto; aspect-ratio: 2400 / 1309; }
  .analyse__stappen { opacity: 1 !important; transform: none !important;
    width: auto; margin: var(--space-media) var(--rand) 0; backdrop-filter: none; }
  .luik__patroon { opacity: .6; transform: none; transition: none; }
  .luik__info { opacity: 1; transform: none; transition: none; }
  .artikel:hover { transform: none; }
}