/* De pagina /onze-werkwijze/: dezelfde taal als de werkwijze-sectie op de
   homepage. Donker, filmisch, eigen beelden, koppen in Manrope, de fotohoek
   0/37,5px van de rest van de site en de ring-met-punt als markering.

   Drie delen, van boven naar beneden:
   1. hero: kop, intro en het openingsbeeld over de volle breedte
   2. beloften: de drie beelden met de tekst erin gebakken, als stapel die
      over elkaar heen schuift bij het scrollen (alleen CSS, sticky)
   3. stappenplan: de zeven stappen om en om naast een verticale lijn */

.dwp{
  --w-ink:#08080d; --w-zacht:#9aa0b5; --w-lijn:rgba(255,255,255,.14); --w-accent:#8F89FF;
  --w-kop:'Manrope', Arial, Helvetica, sans-serif;
  --w-verloop:linear-gradient(90deg, #c026d3 0%, #8F89FF 55%, #22d3ee 100%);
  position:relative; background:var(--w-ink); color:#fff;
}
.dwp *{ box-sizing:border-box; }
.dwp p{ margin:0; }
.dwp-wrap{ max-width:1245px; margin:0 auto; padding:0 6vw; }

/* De sitebrede kopregel zet elke kop zwart met !important; hier is alles
   donker, dus wit, ook met !important. Vaste regel: tekst op donker is wit. */
.dwp h1, .dwp h2, .dwp h3{ color:#fff !important; }
.dwp .dwp-titel{ color:#fff !important; margin-left:0; margin-right:0; text-align:left !important; }

/* De header vanaf het begin op de witte stand (dezelfde als na het scrollen),
   want de hero is donker en de transparante stand zet het logo donker op
   donker. De generator haalt daarvoor v2-nav-licht van de body. */
/* specifieker dan body.has-subhero .nav:not(.scrolled) uit de sitestijl */
body.dwp-body.has-subhero.subpage .nav,
body.dwp-body.has-subhero.subpage .nav:not(.scrolled){
  background:#fff !important; box-shadow:0 2px 14px rgba(0,0,0,.10) !important; }

/* --------------------------- 1. hero ---------------------------------- */
.dwp-hero{ background:#0c0d17; padding-top:clamp(140px, 16vh, 190px); }
.dwp-kruimel{ margin-bottom:34px; }
.dwp-hero .breadcrumb, .dwp-hero .breadcrumb a, .dwp-hero .breadcrumb span{ color:rgba(255,255,255,.62) !important; }
.dwp-hero .breadcrumb a:hover{ color:#fff !important; }
.dwp-eyebrow{ display:block; font-family:var(--w-kop); font-weight:800; font-size:12.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--w-accent); margin-bottom:22px;
  padding-left:14px; border-left:2px solid var(--w-accent); }
.dwp-h1{ font-family:var(--w-kop); font-weight:800; margin:0; max-width:15ch;
  font-size:clamp(38px, 6.2vw, 92px); line-height:.98; letter-spacing:-.035em; }
.dwp-h1 span{ display:block; background:var(--w-verloop); -webkit-background-clip:text;
  background-clip:text; color:transparent !important; padding-bottom:.06em; }
.dwp-lead{ max-width:62ch; margin:30px 0 0; font-size:clamp(17px, 1.35vw, 20px); line-height:1.6;
  color:var(--w-zacht); }
.dwp-knoppen{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; margin-top:38px; }
.dwp-link{ display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none;
  font-family:var(--w-kop); font-weight:800; font-size:15px; letter-spacing:.02em;
  border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:3px; transition:border-color .25s; }
.dwp-link:hover{ border-bottom-color:#fff; }
.dwp-link b{ width:9px; height:9px; border-right:2px solid var(--w-accent); border-bottom:2px solid var(--w-accent);
  transform:rotate(45deg) translate(-2px,-2px); }
/* het openingsbeeld draagt zijn eigen kop en knoppen, dus geen tekst eroverheen */
.dwp-opening{ margin-top:clamp(56px, 7vw, 100px); line-height:0;
  background:linear-gradient(180deg, #0c0d17 0%, #010713 100%); }
.dwp-opening img{ width:100%; height:auto; display:block; }

/* --------------------------- 2. beloften ------------------------------ */
.dwp-beloften{ background:#010713; padding-top:clamp(70px, 8vw, 120px); }
.dwp-beloften .dwp-titel{ max-width:1245px; padding:0 6vw; margin:0 auto clamp(30px, 4vw, 56px); }
.dwp-stapel{ position:relative; }
/* Elk paneel plakt bovenaan en het volgende schuift eroverheen: een stapel
   van drie filmbeelden. De vaste header is 105px, daar blijft het beeld
   onder. Geen JavaScript nodig. */
.dwp-paneel{ position:sticky; top:0; height:100vh; margin:0; display:grid; place-items:center;
  padding:105px 0 0; background:linear-gradient(180deg, #0c0d17 0%, #0c0d17 50%, #010713 100%);
  box-shadow:0 -30px 60px rgba(0,0,0,.55); }
.dwp-paneel img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }

/* --------------------------- 3. stappenplan --------------------------- */
.dwp-stappen{ padding:clamp(90px, 10vw, 150px) 0 clamp(80px, 9vw, 130px);
  background:radial-gradient(1100px 520px at 50% 0%, rgba(74,66,221,.16), transparent 62%), var(--w-ink); }
.dwp-sub{ max-width:56ch; font-size:clamp(17px, 1.3vw, 20px); line-height:1.6; color:var(--w-zacht);
  margin:0 0 clamp(60px, 7vw, 110px); }
.dwp-lijst{ list-style:none; margin:0; padding:0; position:relative; }
/* de verticale lijn door het midden, met per stap een ring met een punt */
.dwp-lijst::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:1px;
  margin-left:-.5px; background:linear-gradient(180deg, transparent, var(--w-lijn) 6%, var(--w-lijn) 94%, transparent); }
.dwp-stap{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 7vw, 110px);
  align-items:center; padding:clamp(28px, 3.6vw, 56px) 0; }
.dwp-stap::before{ content:''; position:absolute; left:50%; top:50%; width:36px; height:36px;
  margin:-18px 0 0 -18px; border-radius:50%; background:#fff; border:3px solid var(--w-accent);
  box-shadow:0 0 0 6px var(--w-ink), 0 0 22px rgba(143,137,255,.55); z-index:2; }
.dwp-stap::after{ content:''; position:absolute; left:50%; top:50%; width:8px; height:8px;
  margin:-4px 0 0 -4px; border-radius:50%; background:var(--w-accent); z-index:3; }
.dwp-stap:nth-child(even) .dwp-beeld{ order:2; }
.dwp-stap:nth-child(even) .dwp-tekst{ order:1; }

.dwp-beeld{ position:relative; aspect-ratio:3/2; width:100%; overflow:hidden; border-radius:0 37.5px;
  background:#0f0f18; box-shadow:0 30px 70px -30px rgba(0,0,0,.8); }
.dwp-beeld img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.92) saturate(.95); }
.dwp-tekst{ position:relative; }
.dwp-nr{ display:block; font-family:var(--w-kop); font-weight:800; line-height:.85; letter-spacing:-.05em;
  font-size:clamp(72px, 8.5vw, 136px); background:var(--w-verloop); -webkit-background-clip:text;
  background-clip:text; color:transparent; opacity:.95; margin:0 0 18px -3px; }
.dwp-tekst .k{ display:block; font-family:var(--w-kop); font-weight:800; font-size:12.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--w-accent); margin-bottom:14px; }
.dwp-tekst h3{ font-family:var(--w-kop); font-weight:800; margin:0 0 16px;
  font-size:clamp(26px, 2.7vw, 42px); line-height:1.06; letter-spacing:-.03em; }
.dwp-tekst p{ color:var(--w-zacht); max-width:52ch; font-size:17px; line-height:1.65; margin:0 0 22px; }
.dwp-tekst .los{ display:inline-block; font-family:var(--w-kop); font-weight:800; font-size:15.5px;
  padding-top:16px; border-top:1px solid var(--w-lijn); color:#fff; }
.dwp-slot{ text-align:center; margin-top:clamp(50px, 6vw, 90px); }

/* ---- de laptop in stap 1: een echte site die op het scherm scrolt --------
   Dezelfde opbouw als op de homepage (matrix uit de vier gemeten hoeken van
   het scherm in de foto van 1536 bij 1024). --s zet dps-werkwijze-pagina.js.
   De scroll loopt alleen zolang de kaart in beeld is. */
.dwp-beeld.dps-laptop{ --s:.3; }
.dps-laptop > img{ transform:none; filter:none; }
.dps-laptop-toneel{ position:absolute; left:0; top:0; width:1536px; height:1024px;
  transform-origin:0 0; transform:scale(var(--s)); pointer-events:none; }
.dps-laptop-scherm{ position:absolute; left:0; top:0; width:1440px; height:900px;
  overflow:hidden; background:#101828; transform-origin:0 0;
  transform:matrix3d(0.1252035,-0.0475173,0,-0.0000992, -0.0363361,0.2107815,0,-0.0000106, 0,0,1,0, 622,461,0,1); }
.dps-laptop-scherm img{ display:block; width:1440px; height:auto; transform:none; filter:none;
  animation:dpsLaptopScroll 42s linear infinite; animation-play-state:paused; }
.dps-laptop.aan .dps-laptop-scherm img{ animation-play-state:running; }
.dps-laptop-scherm::after{ content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 60px rgba(120,170,255,.18); }
@keyframes dpsLaptopScroll{
  0%{ transform:translateY(0) }
  84%{ transform:translateY(calc(-100% + 900px)) }
  92%{ transform:translateY(calc(-100% + 900px)) }
  100%{ transform:translateY(0) } }
@media (prefers-reduced-motion:reduce){ .dps-laptop-scherm img{ animation:none } }
.no-js .dps-laptop-toneel{ display:none; }

/* --------------------------- smallere schermen ------------------------ */
@media (max-width:900px){
  .dwp-hero{ padding-top:110px; }
  .dwp-kruimel{ margin-bottom:24px; }
  .dwp-h1{ max-width:none; }
  .dwp-lead{ margin-top:22px; }
  .dwp-knoppen{ margin-top:28px; }
  /* geen stapel op de telefoon: drie beelden gewoon onder elkaar */
  .dwp-paneel{ position:static; height:auto; padding:0; display:block; box-shadow:none; }
  .dwp-paneel img{ height:auto; }
  .dwp-lijst::before{ left:18px; }
  .dwp-stap{ grid-template-columns:1fr; gap:22px; padding:34px 0 34px 46px; }
  .dwp-stap::before{ left:18px; top:0; width:28px; height:28px; margin:8px 0 0 -14px; border-width:2px; }
  .dwp-stap::after{ left:18px; top:0; margin:18px 0 0 -4px; }
  .dwp-stap:nth-child(even) .dwp-beeld{ order:1; }
  .dwp-stap:nth-child(even) .dwp-tekst{ order:2; }
  .dwp-beeld{ border-radius:0 24px; }
  .dwp-nr{ margin-bottom:10px; }
  .dwp-tekst p{ font-size:16px; }
}