/* De werkwijze-sectie op de homepage: concept 03 en 01 gecombineerd.

   Deel A opent filmisch: beeldvullende foto's die langzaam inzoomen en in
   elkaar overvloeien, met de tekst die van achter een masker omhoog komt.
   Deel B laat de stappen zien als een filmrol die zijwaarts voorbijschuift.

   Alles wordt aangedreven door één voortgangswaarde --p (0 tot 1) die
   dps-werkwijze.js per blok zet op basis van de scrollpositie. Er loopt dus
   geen eigen tijdlijn: beweegt de bezoeker niet, dan beweegt er niets. */

.dpsw{
  --w-ink:#08080d; --w-wit:#fff; --w-zacht:#9aa0b5;
  --w-lijn:rgba(255,255,255,.14); --w-accent:#8F89FF;
  --w-traag:cubic-bezier(.16,1,.3,1);
  --w-kop:'Manrope', Arial, Helvetica, sans-serif;
  position:relative; background:#fff; color:var(--w-wit);
}
.dpsw *{box-sizing:border-box}
.dpsw p{margin:0}

/* De sitebrede kopregel staat op `h1,h2,h3,... { color:var(--kop-zwart)
   !important }`. Zonder !important hier worden alle koppen in deze sectie dus
   zwart op een donker beeld, en dat is precies de fout die hier vaker is
   gemaakt. Vaste regel: tekst op donker is altijd wit.
   Dezelfde stylesheet legt ook een reveal-transform op koppen; die zetten we
   uit, want in deze sectie beweegt de span binnenin, niet de kop zelf. */
.dpsw h2:not(.dpsw-titel), .dpsw h3{ color:#fff !important; }
.dpsw h2, .dpsw h3{ transform:none !important; opacity:1 !important; }

/* de kop blijft in de code staan voor zoekmachines, maar niet in beeld */
.dpsw-vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* De sectiekop draagt bewust de klasse .dps-rev-titel, dezelfde als boven
   Testimonials: zo komt de typografie uit één bron en kan hij niet uit elkaar
   lopen. Alleen de kleur wijkt af, want deze sectie staat op donker. De
   sitebrede kopregel gebruikt !important, dus die moet hier overschreven. */
/* De witruimte boven de kop moet exact gelijk zijn aan die boven Testimonials.
   Daar is het 86,4px: alleen de padding-top van .dps-rev, want de sectie ervoor
   heeft geen padding-bottom. Hier stapelden er drie op elkaar (86,4 van de
   reviews eronder, 76 van deze sectie en 64 van de kop zelf) en werd het 226,4.
   De reviewsectie levert die 86,4 al, dus deze sectie en de kop voegen niets
   meer toe. */
.dpsw{ padding-top:0 !important; }
.dpsw .dpsw-titel{ padding:0 6vw; }


.dpsw-lang{ position:relative; }
.dpsw-vast{ position:sticky; top:0; height:100vh; overflow:hidden; }
/* Het blok vult altijd het volle scherm. Werd het zo hoog als de foto zelf,
   dan bleef er onderaan een strook van de witte sectie zichtbaar. */

/* voortgang onderaan elk blok */
.dpsw-balk{ position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.1); z-index:9; }
.dpsw-balk i{ display:block; height:100%; background:var(--w-accent);
  transform:scaleX(var(--p,0)); transform-origin:0 50%; }

.dpsw-korrel{ position:absolute; inset:0; pointer-events:none; z-index:6; opacity:.15;
  background-image:url("../img/texture.png"); background-size:280px; mix-blend-mode:overlay; }
.dpsw-vignet{ position:absolute; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(120% 92% at 50% 42%, transparent 38%, rgba(0,0,0,.78) 100%); }


/* ===================== DEEL A · het openingsbeeld ======================== */
/* Eén beeld over de volle breedte. De kop en de knoppen zitten in het beeld
   zelf, dus er hangt hier bewust geen tekstlaag overheen. */
.dpsw-opening{ position:relative; width:100%; background:#000; line-height:0; }
.dpsw-opening img{ width:100%; height:auto; display:block; }


/* === de vier wisselende scènes hieronder zijn nu ongebruikt, maar blijven
       staan voor als we ze terugwillen === */
.dpsw-open .dpsw-vast{ background:#000; }

.dpsw-lagen{ position:absolute; inset:0; }
.dpsw-laag{ position:absolute; inset:0; opacity:0;
  transition:opacity 1.15s var(--w-traag); }
.dpsw-laag.is-aan{ opacity:1; }
.dpsw-laag img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04);
  transition:transform 8s linear; filter:saturate(.82) contrast(1.07) brightness(.66); }
.dpsw-laag.is-aan img{ transform:scale(1.17); }

/* De eerste scène is een afgemaakt beeld: de kop, de ondertitel en de knoppen
   staan er al in. Daar hoort geen verdonkering, geen vignet, geen korrel en
   geen inzoomen overheen: dat is allemaal bedoeld om losse tekst leesbaar te
   maken boven op een foto. En hij moet in zijn geheel te zien zijn, dus
   contain in plaats van cover, anders valt de kop buiten beeld. */
/* Uitgezoomd: de hele foto in beeld, niets weggesneden en niets vergroot.
   Een scherm is zelden 16 staat tot 9, dus blijft er boven en onder een strook
   over. Die krijgt de kleur van de boven- en onderrand van de foto zelf
   (gemeten op 12,13,23 en 1,7,19), waardoor hij als doorlopende rand leest en
   niet als los zwart vlak. */
.dpsw-laag.eigen img,
.dpsw-laag.eigen.is-aan img{ object-fit:contain; object-position:center;
  transform:none; filter:none; }
.dpsw-open.op-eigenbeeld .dpsw-vast{
  background:linear-gradient(180deg, #0c0d17 0%, #0c0d17 50%, #010713 100%); }
.dpsw-open.op-eigenbeeld .dpsw-vignet,
.dpsw-open.op-eigenbeeld .dpsw-korrel{ opacity:0; }
.dpsw-vignet, .dpsw-korrel{ transition:opacity .5s var(--w-traag); }

.dpsw-tekst{ position:absolute; left:6vw; right:6vw; bottom:13vh; z-index:7; }
.dpsw-o{ position:absolute; left:0; right:0; bottom:0; opacity:0; pointer-events:none;
  transition:opacity .55s var(--w-traag); }
.dpsw-o.is-aan{ opacity:1; }
.dpsw-o .k{ display:block; font-family:var(--w-kop); font-weight:800; font-size:12.5px;
  letter-spacing:.24em; text-transform:uppercase; margin-bottom:16px;
  padding-left:14px; border-left:2px solid var(--w-accent); }
.dpsw-o h3{ font-family:var(--w-kop); font-weight:800; color:#fff; margin:0 0 16px;
  font-size:clamp(30px,5.2vw,76px); line-height:1.0; letter-spacing:-.035em;
  overflow:hidden; }
.dpsw-o h3 span{ display:block; transform:translateY(105%);
  transition:transform 1.05s var(--w-traag) .12s; }
.dpsw-o.is-aan h3 span{ transform:none; }
/* de kanalen die bij dit beeld horen */
.dpsw-o ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--w-traag) .4s, transform .8s var(--w-traag) .4s; }
.dpsw-o.is-aan ul{ opacity:1; transform:none; }
.dpsw-o li{ font-size:13.5px; letter-spacing:.03em; padding:7px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.32); color:rgba(255,255,255,.9); }

.dpsw-teller{ position:absolute; right:6vw; bottom:13vh; z-index:7; display:flex; gap:7px; }
.dpsw-teller i{ width:26px; height:2px; background:rgba(255,255,255,.28); display:block;
  transition:background-color .45s; }
.dpsw-teller i.is-aan{ background:#fff; }


/* ---- de scroll-aanwijzing in het openingsdeel ----
   Bezoekers moeten direct snappen dat ze moeten scrollen om verder te komen.
   Een pil onderin het midden: een muisje met een bewegend wieltje, de tekst
   en een stuiterend pijltje. Hij hangt aan --p: vol zichtbaar tot 80% van het
   openingsdeel, dan vervaagt hij zodat hij weg is als de stappenrol begint.
   De beweging loopt alleen zolang het blok in beeld is (.is-zicht uit de JS). */
.dpsw-scroll{ position:absolute; left:50%; bottom:5vh; transform:translateX(-50%); z-index:8;
  display:flex; align-items:center; gap:14px; padding:13px 24px 13px 18px; border-radius:999px;
  background:rgba(8,8,18,.78); border:1px solid rgba(170,160,255,.7);
  box-shadow:0 0 0 2px rgba(159,30,236,.22), 0 0 26px rgba(120,80,255,.5), 0 8px 30px rgba(0,0,0,.45);
  color:#fff; font-family:var(--w-kop); font-weight:800; font-size:14px; letter-spacing:.16em;
  text-transform:uppercase; white-space:nowrap; pointer-events:none;
  opacity:calc((.9 - var(--p,0)) * 10); transition:opacity .2s linear; }
.dpsw-scroll i{ display:block; width:20px; height:32px; border:2px solid #fff; border-radius:11px;
  position:relative; flex:none; }
.dpsw-scroll i::after{ content:''; position:absolute; left:50%; top:5px; width:4px; height:8px;
  margin-left:-2px; border-radius:2px; background:var(--w-accent); box-shadow:0 0 8px var(--w-accent);
  animation:dpswWiel 1.5s ease-in-out infinite; animation-play-state:paused; }
.dpsw-scroll b{ display:block; width:11px; height:11px; margin:-6px 0 0 2px; flex:none;
  border-right:2px solid var(--w-accent); border-bottom:2px solid var(--w-accent); transform:rotate(45deg);
  animation:dpswPijl 1.5s ease-in-out infinite; animation-play-state:paused; }
.is-zicht .dpsw-scroll i::after, .is-zicht .dpsw-scroll b{ animation-play-state:running; }
@keyframes dpswWiel{ 0%,100%{ transform:translateY(0); opacity:1 } 60%{ transform:translateY(11px); opacity:.2 } 80%{ opacity:0 } }
@keyframes dpswPijl{ 0%,100%{ transform:rotate(45deg) translate(0,0) } 50%{ transform:rotate(45deg) translate(4px,4px) } }
@media (max-width:900px){
  /* boven de chatknop linksonder */
  .dpsw-scroll{ bottom:112px; font-size:12px; letter-spacing:.12em; gap:11px; padding:11px 18px 11px 14px; }
  .dpsw-scroll i{ width:17px; height:27px; }
}
@media (prefers-reduced-motion:reduce){ .dpsw-scroll i::after, .dpsw-scroll b{ animation:none } }
.no-js .dpsw-scroll{ display:none; }

/* Richting: scrolt de bezoeker omhoog (terug van onderaf), dan draait het
   pijltje om en staat er "Scroll omhoog". De JS zet .is-omhoog op het blok.
   In het openingsdeel blijft de aanwijzing dan ook op het einde zichtbaar. */
.dpsw-scroll .op{ display:none; }
.is-omhoog .dpsw-scroll .af{ display:none; }
.is-omhoog .dpsw-scroll .op{ display:inline; }
.is-omhoog .dpsw-scroll b{ margin:6px 0 0 2px; transform:rotate(-135deg); animation-name:dpswPijlOp; }
.is-omhoog .dpsw-scroll i::after{ animation-name:dpswWielOp; }
.dpsw-open.is-omhoog .dpsw-scroll{ opacity:1; }
@keyframes dpswPijlOp{ 0%,100%{ transform:rotate(-135deg) translate(0,0) } 50%{ transform:rotate(-135deg) translate(4px,4px) } }
@keyframes dpswWielOp{ 0%,100%{ transform:translateY(11px); opacity:1 } 60%{ transform:translateY(0); opacity:.2 } 80%{ opacity:0 } }

/* In de rol staat de aanwijzing rechts naast de schuiflijn, op dezelfde hoogte
   als de knop en vóór de chatknop rechtsonder. */
.dpsw-scroll-rol{ left:auto; right:calc(6vw + 260px); transform:none; bottom:5vh; opacity:1;
  height:36px; padding:0 18px 0 14px; font-size:13px; gap:11px; }   /* even hoog als de lijn, raakt de kaarten niet */
.dpsw-scroll-rol i{ width:16px; height:24px; border-radius:9px; }
.dpsw-scroll-rol i::after{ top:3px; height:6px; }
@media (min-width:901px) and (max-height:780px){ .dpsw-scroll-rol{ bottom:3vh; } }
@media (max-width:900px){
  /* naast de lijn onder de header; het muisje past hier niet */
  .dpsw-scroll-rol{ top:68px; bottom:auto; right:6vw; height:31px; padding:0 12px 0 14px;
    font-size:11px; letter-spacing:.1em; gap:8px; }
  .dpsw-scroll-rol i{ display:none; }
  .dpsw-scroll-rol b{ width:9px; height:9px; }
}

/* ===================== DEEL B · de filmrol met de stappen ================= */
.dpsw-rol .dpsw-vast{
  background:radial-gradient(1100px 520px at 50% -12%, rgba(74,66,221,.2), transparent 62%),
             var(--w-ink); }

/* label linksboven dat blijft staan terwijl de rol doorloopt */
.dpsw-merk{ position:absolute; left:6vw; top:7vh; z-index:8;
  font-family:var(--w-kop); font-weight:800; font-size:12.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--w-accent); }

/* Het spoor hangt in het midden van de vrije ruimte onder de vaste header
   (105px op desktop, 65px op mobiel) en boven de schuiflijn onderin, en schuift
   zijwaarts met --p. Kaarten
   rekken mee tot de hoogste, zodat ze allemaal precies even groot zijn. */
.dpsw-spoor{ position:absolute; left:0; top:calc(50% + 8px); display:flex; align-items:stretch;
  transform:translate3d(calc(var(--p,0) * var(--schuif,-500vw)),-50%,0);
  will-change:transform; }
/* Elke stap in de huisstijl van de rest van de site (zelfde opbouw als de
   stappen op de werkwijzepagina): foto boven met de hoek 0/37,5px, kop en
   tekst eronder. Alle kaarten even breed, alle foto's dezelfde maat (3:2, de
   maat van de laptopfoto, want die moet in zijn geheel te zien zijn).
   De breedte hangt aan de schermhoogte, zodat foto plus tekst altijd onder de
   header en boven de schermrand passen. */
.dpsw-stap{ --kb:min(56vw, calc((100vh - 500px) * 1.5), 820px);
  flex:0 0 var(--kb); margin:0 3vw; display:flex; flex-direction:column; gap:22px; }
.dpsw-stap > div:last-child{ flex:1 1 auto; }
.dpsw-stap > .dpsw-beeld{ flex:0 0 auto; }   /* de foto rekt nooit mee: overal dezelfde maat */
.dpsw-beeld{ position:relative; aspect-ratio:3/2; width:100%; overflow:hidden;
  border-radius:0 37.5px; background:#0f0f18; }
.dpsw-beeld img{ width:100%; height:100%; object-fit:cover;
  filter:brightness(.9) saturate(.94);
  /* het beeld drijft trager mee dan de tekst; dat geeft de diepte */
  transform:scale(1.14) translate3d(calc(var(--p,0) * 5vw),0,0); will-change:transform; }
.dpsw-stap .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:12px; }
.dpsw-stap h3{ font-family:var(--w-kop); font-weight:800; color:#fff; margin:0 0 12px;
  font-size:clamp(24px,2.4vw,38px); line-height:1.08; letter-spacing:-.03em; }
.dpsw-stap p{ color:var(--w-zacht); max-width:70ch; margin:0 0 16px; font-size:16.5px;
  line-height:1.6; }
.dpsw-stap .los{ display:inline-block; font-family:var(--w-kop); font-weight:800;
  font-size:15px; padding-top:14px; border-top:1px solid var(--w-lijn); color:#fff; }

/* lage desktopschermen (laptops van 720 hoog): minder ruimte tussen header en
   schuiflijn, dus een compactere kaart */
@media (min-width:901px) and (max-height:780px){
  .dpsw-spoor{ top:calc(50% + 23px); }
  .dpsw-stap{ --kb:min(56vw, calc((100vh - 445px) * 1.5)); gap:14px; }
  .dpsw-stap .k{ margin-bottom:8px; }
  .dpsw-stap h3{ font-size:clamp(22px,2vw,30px); margin-bottom:8px; }
  .dpsw-stap p{ font-size:15px; line-height:1.5; margin-bottom:10px; }
  .dpsw-stap .los{ padding-top:10px; font-size:14px; }
  .dpsw-rol .dpsw-knopbalk{ bottom:3vh; }
}

/* De schuiflijn met de wereldbolknop, dezelfde als onder de cases en op de
   werkwijzepagina (klassen v2-sl-bar en v2-sl-dot uit de sitestijl). De knop
   loopt met --p mee over de lijn; de dunne balk onderaan vervalt hier. */
.dpsw-rol .dpsw-balk{ display:none; }
/* de lijn stopt vóór de scroll-aanwijzing en de chatknop rechtsonder */
.dpsw-knopbalk{ position:absolute; left:6vw; right:calc(6vw + 540px); bottom:5vh; z-index:8; margin-top:0; }
.dpsw-knopbalk .v2-sl-dot{ left:calc(var(--p,0) * (100% - 36px)); cursor:default; }

/* ============ de laptop in stap 1: een echte site die op het scherm scrolt ======
   De foto is de ondergrond; op het laptopscherm ligt een laag met een lange
   schermafbeelding van de site, die rustig naar beneden schuift. Het toneel is
   1536 bij 1024, de maat van de foto. De matrix3d is berekend uit de vier
   gemeten hoeken van het scherm in die maat (622,461 / 936,458 / 908,687 /
   595,657) en zet een vlak van 1440 bij 900 precies op dat scherm. Het toneel
   wordt als geheel geschaald naar de kaartbreedte; die factor --s zet de JS.
   Loopt alleen als de kaart in beeld is: niets beweegt buiten beeld. */
.dpsw-beeld.dps-laptop{ aspect-ratio:3/2; --s:.3; }   /* geen uitsnede: de matrix rekent op de hele foto */
.dps-laptop > img{ width:100%; height:100%; object-fit:cover; transform:none !important; 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;
  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); }
/* langzaam naar beneden, even blijven staan, en vlot terug naar boven */
@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; }

/* de voet met de link naar de volledige werkwijze */
.dpsw-voet{ position:relative; z-index:4; text-align:center; padding:38px 6vw 54px; }
.dpsw-voet a{ color:#0b0b0f; font-family:var(--w-kop); font-weight:800; font-size:15px;
  text-decoration:none; border-bottom:1px solid rgba(11,11,15,.4); padding-bottom:3px; }
.dpsw-voet a:hover{ border-bottom-color:#0b0b0f; }


/* ---------------------------- smallere schermen -------------------------- */
@media (max-width:900px){
  /* de chatknop linksonder dekt de onderrand af, dus de schuiflijn staat op
     mobiel direct onder de header en de kaart iets lager */
  .dpsw-spoor{ top:calc(50% + 14px); }
  /* geen hoogteterm hier: een smallere foto maakt de tekst eronder juist langer */
  .dpsw-stap{ --kb:84vw; margin:0 3vw; gap:12px; }
  .dpsw-beeld{ border-radius:0 24px; }
  .dpsw-stap .k{ margin-bottom:10px; font-size:11.5px; }
  .dpsw-stap h3{ margin-bottom:10px; }
  .dpsw-stap p{ font-size:15px; line-height:1.55; margin-bottom:12px; }
  .dpsw-stap .los{ padding-top:12px; font-size:14px; }
  .dpsw-rol .dpsw-knopbalk{ bottom:auto; top:68px; height:31px; right:calc(6vw + 178px); }
  .dpsw-knopbalk .v2-sl-dot{ left:calc(var(--p,0) * (100% - 31px)); }
  .dpsw-o ul{ gap:8px; }
  .dpsw-o li{ font-size:12.5px; padding:6px 12px; }
  .dpsw-teller{ display:none; }
}
/* lage telefoonschermen: foto plus tekst moeten onder de header en boven de
   schermrand blijven */
@media (max-width:900px) and (max-height:660px){
  .dpsw-spoor{ top:calc(50% + 16px); }
  .dpsw-stap{ gap:8px; }
  .dpsw-stap .k{ margin-bottom:5px; }
  .dpsw-stap h3{ font-size:20px; margin-bottom:6px; }
  .dpsw-stap p{ font-size:14px; line-height:1.45; margin-bottom:0; }
  /* header, lijn, kaart en chatknop passen hier niet samen: de losse
     slotregel onder de tekst vervalt op deze schermen */
  .dpsw-stap .los{ display:none; }
}

/* ------------- zonder JavaScript en bij minder beweging ------------------ */
/* Zonder JS staat er geen --p, dus zetten we alles gewoon leesbaar neer:
   niets blijft plakken, niets schuift, en elke stap staat onder elkaar. */
.no-js .dpsw-vast{ position:static; height:auto; overflow:visible; }
.no-js .dpsw-lang{ height:auto !important; }
.no-js .dpsw-lagen{ position:static; }
.no-js .dpsw-laag{ position:static; opacity:1; height:44vh; }
.no-js .dpsw-laag img{ transform:none; }
.no-js .dpsw-tekst, .no-js .dpsw-o{ position:static; opacity:1; }
.no-js .dpsw-o h3 span{ transform:none; }
.no-js .dpsw-o ul{ opacity:1; transform:none; }
.no-js .dpsw-spoor{ display:block; position:static; transform:none; }
.no-js .dpsw-knopbalk{ display:none; }
.no-js .dpsw-stap{ display:block; padding:40px 6vw; --kb:auto; }
.no-js .dpsw-beeld img{ transform:none; }
.no-js .dpsw-teller, .no-js .dpsw-balk{ display:none; }

@media (prefers-reduced-motion: reduce){
  .dpsw-laag img, .dpsw-beeld img{ transform:none !important; transition:none; }
  .dpsw-o h3 span{ transform:none !important; }
  .dpsw-laag, .dpsw-o, .dpsw-o ul{ transition:none !important; }
}