/* De expertisepagina's (sinds 21-09-2026): een donkere, filmische opening met
   de laptop waarop een echte site scrolt, daaronder een strak wit stramien.
   Container 1245px, vast sectieritme, de fotohoek 0/37,5px van de site en de
   nummers in het verloop van de werkwijzepagina. Alles gecentreerd waar het
   hoort, niets dat uit de lijn valt. */

.dxp{ --ink:#08080d; --hero:#0c0d17; --grijs:#f6f6f9; --tekst:#0b0b14; --zacht:#5f6270; --zachtd:#9aa0b5;
  --lijn:rgba(0,0,0,.09); --lijnd:rgba(255,255,255,.14); --accent:#4A42DD; --accent2:#8F89FF;
  --verloop:linear-gradient(90deg, #c026d3 0%, #8F89FF 55%, #22d3ee 100%); --r:0 37.5px; --s:clamp(80px, 8.5vw, 120px);
  position:relative; background:#fff; color:var(--tekst); }
.dxp *{ box-sizing:border-box; }
.dxp p{ margin:0; }
.dxp-wrap{ max-width:1245px; margin:0 auto; padding:0 24px; }
.dxp-wrap.smal{ max-width:860px; }
.dxp h1, .dxp h2, .dxp h3{ letter-spacing:-.025em; line-height:1.08; margin:0; transform:none !important; opacity:1 !important; }
.dxp-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.dxp-kop{ max-width:820px; margin:0 0 clamp(36px, 4vw, 56px); }
.dxp-kop.midden{ margin-left:auto; margin-right:auto; text-align:center; }
.dxp-kop h2{ font-size:clamp(28px, 3.4vw, 46px); margin-bottom:14px; color:var(--tekst) !important; }
.dxp-kop p{ color:var(--zacht); font-size:17px; }
.dxp .midden{ text-align:center; }
.dxp-link{ display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-weight:700; font-size:15px;
  border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:3px; transition:border-color .25s; }
.dxp-link:hover{ border-bottom-color:currentColor; }
.dxp-link b{ width:9px; height:9px; border-right:2px solid var(--accent2); border-bottom:2px solid var(--accent2); transform:rotate(-45deg) translate(-1px,1px); }
.dxp-link.donker{ color:var(--tekst); border-bottom-color:rgba(0,0,0,.3); }
.dxp-link.donker b{ border-color:var(--accent); }
/* waarderingen: altijd het bestaande blok .v2-hero-scores van de site */
.dxp .v2-hero-scores.dps-rev-scores{ margin:26px 0 0 !important; }
.dxp-zij .v2-hero-scores.dps-rev-scores{ margin-top:22px !important; }
/* in de zijkaart is minder breedte: de vaste minimumbreedtes van het blok
   iets kleiner, zodat label, cijfer en sterren op één regel blijven */
.dxp-zij .v2-hero-scores .v2-grb-tekst{ min-width:0 !important; }
.dxp-zij .v2-hero-scores .v2-grb-label{ min-width:150px !important; }
.dxp-zij .v2-hero-scores .v2-tp-badge, .dxp-zij .v2-hero-scores .v2-google-badge{ flex-wrap:nowrap !important; }

/* de header vanaf het begin op wit: de hero is donker */
body.dxp-body.has-subhero.subpage .nav,
body.dxp-body.has-subhero.subpage .nav:not(.scrolled){ background:#fff !important; box-shadow:0 2px 14px rgba(0,0,0,.10) !important; }

/* ------------------------------ 1. hero ------------------------------ */
.dxp-hero{ background:var(--hero); color:#fff; padding:clamp(140px, 15vh, 180px) 0 var(--s); }
.dxp-hero .dxp-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.dxp-kruimel{ margin-bottom:28px; font-size:13px; }
.dxp-hero .breadcrumb, .dxp-hero .breadcrumb a, .dxp-hero .breadcrumb span{ color:rgba(255,255,255,.62) !important; }
.dxp-hero .breadcrumb a:hover{ color:#fff !important; }
.dxp-hero h1{ font-size:clamp(34px, 4vw, 56px); margin-bottom:20px; color:#fff !important; }
.dxp-lead{ color:var(--zachtd); font-size:18px; line-height:1.6; max-width:56ch; margin-bottom:26px; }
.dxp-beloften{ list-style:none; margin:0 0 30px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.dxp-beloften li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; font-weight:700; line-height:1.4; }
.dxp-beloften i{ font-style:normal; color:#22c55e; flex:none; }
.dxp-knoppen{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px; }
.dxp-hero .btn{ background:linear-gradient(90deg,#C10FFF,#5A16FF 55%,#009FFF); color:#fff; }
.dxp-hero-beeld{ position:relative; }
.dxp-laptop{ position:relative; aspect-ratio:3/2; width:100%; overflow:hidden; border-radius:var(--r); background:#0f0f18;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85); }
.dxp-laptop > img{ width:100%; height:100%; object-fit:cover; display:block; }
.dxp-onder{ margin-top:14px; font-size:13.5px; color:var(--zachtd); text-align:center; }

/* de laptop: een echte site die op het scherm scrolt (zelfde opbouw als de
   werkwijzepagina; --s zet dps-werkwijze-pagina.js; loopt alleen in beeld) */
.dps-laptop{ --s:.3; }
.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; 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; }

/* ------------------------------ 2. wat je krijgt ------------------------------ */
.dxp-wat{ padding:var(--s) 0; }
.dxp-rij{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 6vw, 80px); align-items:center; padding:clamp(36px, 4vw, 56px) 0; border-top:1px solid var(--lijn); }
.dxp-rij:last-child{ border-bottom:1px solid var(--lijn); }
.dxp-rij:nth-child(even) .dxp-beeld{ order:2; }
.dxp-beeld img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r); display:block; }
.dxp-nr{ display:block; font-weight:700; line-height:.85; letter-spacing:-.05em; font-size:clamp(56px, 6vw, 88px);
  background:var(--verloop); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 14px -2px; }
.dxp-rij h3{ font-size:clamp(24px, 2.4vw, 34px); margin-bottom:14px; color:var(--tekst) !important; }
.dxp-rij p{ color:var(--zacht); font-size:17px; line-height:1.65; max-width:52ch; }

/* ------------------------------ 3. zo werken wij ------------------------------ */
.dxp-ww{ background:var(--grijs); padding:var(--s) 0; }
.dxp-stappen{ list-style:none; margin:0 0 36px; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.dxp-stappen li{ background:#fff; border:1px solid var(--lijn); border-radius:0 30px; padding:32px 24px; text-align:center; }
.dxp-stapnr{ display:inline-block; width:52px; height:52px; line-height:52px; border-radius:50%; background:linear-gradient(90deg,#C10FFF,#5A16FF 55%,#009FFF); color:#fff; font-weight:700; margin-bottom:18px; }
.dxp-stappen h3{ font-size:19px; margin-bottom:10px; color:var(--tekst) !important; }
.dxp-stappen p{ color:var(--zacht); font-size:15px; }

/* ------------------------------ 4. cases ------------------------------ */
.dxp-cases{ background:var(--ink); color:#fff; padding:var(--s) 0; }
.dxp-cases .dxp-kop h2{ color:#fff !important; }
.dxp-cases .dxp-eyebrow{ color:var(--accent2); }
.dxp-casegrid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin-bottom:36px; }
.dxp-case{ position:relative; display:block; border-radius:0 30px; overflow:hidden; background:#101018; color:#fff; text-decoration:none; text-align:center; padding-bottom:24px;
  transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.dxp-case:hover{ transform:translateY(-4px); }
.dxp-case img{ width:100%; aspect-ratio:1218/828; object-fit:cover; display:block; margin-bottom:16px; }
.dxp-case .pill{ display:inline-block; font-size:12px; font-weight:700; background:linear-gradient(90deg,#C10FFF,#5A16FF 55%,#009FFF); border-radius:999px; padding:4px 12px; margin-bottom:10px; }
.dxp-case .onder{ display:block; padding:0 16px; }
.dxp-case b{ display:block; font-size:17px; }
.dxp-case em{ display:block; font-style:normal; color:#22d3ee; font-weight:700; font-size:14px; margin:4px 0 8px; }
.dxp-case small{ color:var(--zachtd); font-size:13px; border-bottom:1px solid rgba(255,255,255,.3); }

/* ------------------------------ 5. tekst ------------------------------ */
.dxp-tekst{ padding:var(--s) 0; }
.dxp-twee{ display:grid; grid-template-columns:1fr 420px; gap:clamp(40px, 6vw, 96px); align-items:start; }
.dxp-blok{ padding:26px 0; border-top:1px solid var(--lijn); }
.dxp-blok:last-child{ border-bottom:1px solid var(--lijn); }
.dxp-blok h3{ font-size:22px; margin-bottom:10px; color:var(--tekst) !important; }
.dxp-blok p{ color:var(--zacht); font-size:17px; line-height:1.65; max-width:64ch; }
.dxp-zij{ position:sticky; top:130px; background:var(--ink); color:#fff; border-radius:var(--r); padding:34px 30px; }
.dxp-zij > b{ display:block; font-size:24px; letter-spacing:-.02em; line-height:1.15; margin-bottom:12px; }   /* alleen de titel, niet het cijfer in het waarderingsblok */
.dxp-zij p{ color:var(--zachtd); margin-bottom:22px; }
.dxp-zij .btn{ background:linear-gradient(90deg,#C10FFF,#5A16FF 55%,#009FFF); color:#fff; }

/* ------------------------------ 6. faq ------------------------------ */
.dxp-faq{ padding:0 0 var(--s); }
.dxp-faqlijst details{ border-top:1px solid var(--lijn); padding:18px 0; }
.dxp-faqlijst details:last-child{ border-bottom:1px solid var(--lijn); }
.dxp-faqlijst summary{ cursor:pointer; font-weight:700; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:20px; }
.dxp-faqlijst summary::-webkit-details-marker{ display:none; }
.dxp-faqlijst summary::after{ content:"+"; color:var(--accent); font-size:24px; line-height:1; flex:none; }
.dxp-faqlijst details[open] summary::after{ content:"–"; }
.dxp-faqlijst p{ color:var(--zacht); margin-top:10px; line-height:1.65; max-width:70ch; }

/* ------------------------------ 7. andere expertises ------------------------------ */
.dxp-andere{ background:var(--grijs); padding:var(--s) 0; }
.dxp-expgrid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.dxp-exp{ display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--lijn); border-radius:0 30px; padding:28px 26px 24px;
  color:var(--tekst); text-decoration:none; text-align:center; transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s; }
.dxp-exp:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(0,0,0,.35); }
.dxp-exp b{ font-size:19px; letter-spacing:-.02em; line-height:1.2; }
.dxp-exp span{ color:var(--zacht); font-size:14.5px; line-height:1.55; flex:1; }
.dxp-exp em{ font-style:normal; font-weight:700; font-size:14px; color:var(--accent); display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; }
.dxp-exp em i{ width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); }

/* ------------------------------ smallere schermen ------------------------------ */
@media (max-width:1023px){
  .dxp-hero .dxp-wrap{ grid-template-columns:1fr; gap:40px; }
  .dxp-stappen, .dxp-casegrid, .dxp-expgrid{ grid-template-columns:1fr 1fr; }
  .dxp-twee{ grid-template-columns:1fr; }
  .dxp-zij{ position:static; }
}
@media (max-width:640px){
  .dxp-hero{ padding-top:110px; }
  .dxp-beloften{ grid-template-columns:1fr; }
  .dxp-rij{ grid-template-columns:1fr; gap:24px; }
  .dxp-rij:nth-child(even) .dxp-beeld{ order:0; }
  .dxp-stappen, .dxp-casegrid{ grid-template-columns:1fr; }
  .dxp-expgrid{ grid-template-columns:1fr; gap:14px; }   /* op de telefoon één kolom: twee is te krap */
  .dxp-exp{ padding:22px 20px; }
  .dxp-zij{ padding:26px; }
}