/* Dennis van Drunen Design System — componentstijlen.
   Alle waarden die in tokens.json staan (kleur, spacing, radius, schaduw, gewichten, fonts,
   bar-gap, tracking-display) komen uit tokens.css; hier staat alleen wat de pagina niet declareert. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Nunito+Sans:wght@400;600;700&display=swap");

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

/* Grootte en regelhoogte van de typeladder, zoals de componenten ze lezen
   (var(--text-h1), var(--lh-h1) enz.). De stijlen zelf staan in tokens.json (text-display, text-h1 …). */
:root{
--text-display:56px;--lh-display:60px;
--text-h1:40px;--lh-h1:48px;
--text-h2:30px;--lh-h2:38px;
--text-h3:22px;--lh-h3:30px;
--text-base:18px;--lh-base:30px;
--text-sm:15px;--lh-sm:24px;
--text-kicker-size:19px;--lh-kicker:26px;
--text-label:13px;--lh-label:18px;
}

/* Tekstlink: doorlopende 1px onderstreping op 3px offset. De stippellijn is gereserveerd voor
   TermTip — een link brengt je ergens heen, een term legt iets uit; die twee mogen nooit hetzelfde
   lijken. Onderstreping nooit weghalen: kleur alleen is geen link-affordance. */
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:currentColor}
/* Hover: lijn verdubbelt naar 2px en de kleur licht op. De dikte doet het werk — een kleurstap
   alleen is bij een korte link nauwelijks te zien. */
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px;border-radius:2px}


/* Klikbare kaart (`Card href`): de hele kaart is een link, dus er is geen aparte CTA die de
   affordance draagt. De kaart komt daarom 2px omhoog bij hover. Dat is beweging, geen diepte --
   de ene kaartschaduw blijft ongewijzigd en er komt geen tweede schaduwtrap bij, zodat "inversie
   in plaats van diepte" overeind blijft. Een kaart die niet klikbaar is, licht nooit op. */
.dvd-card-clickable{transition:transform 160ms ease-out}
.dvd-card-clickable:hover{transform:translateY(-2px)}
/* De actieregel in zo'n kaart is geen eigen link maar een <span> met de tertiaire knopstijl; met
   data-dvd-action verdikt de onderstreping mee met de hover van de kaart, zoals bij een echte
   tertiaire knop. */
.dvd-card-clickable:hover [data-dvd-action]{text-decoration-thickness:2px}
@media (prefers-reduced-motion: reduce){.dvd-card-clickable{transition:none}.dvd-card-clickable:hover{transform:none}}
/* Op touch bestaat hover niet; een lift die alleen na een tik verschijnt, leest als storing. */
@media (hover: none){.dvd-card-clickable:hover{transform:none}}


/* ==========================================================================================
   MOBIELE LAAG (18 oktober 2026)
   Twee breakpoints, geen derde:
   - onder 900px (`breakpoint-md`): mobiele header met menu, InPageNav inklapbaar, kaarten
     gestapeld zonder gelijke kaarthoogte, sectiepadding 56px;
   - onder 640px (`breakpoint-sm`): de telefoon. Mobiele typeladder, alles in één kolom,
     InfoTip en TermTip als bottom sheet.
   Ontwerpmaat 390px; controleren op 360 (ondergrens) en 430 (bovengrens).
   Componenten zetten hun opmaak inline; waar die op mobiel anders moet, draagt het element een
   `dvd-…`-klasse en overschrijft de regel hieronder de inline waarde met !important. Dat is de
   enige plek in het systeem waar !important staat, en alleen binnen deze mediaregels.
   ========================================================================================== */

/* Header, InPageNav en ankers lezen hun maat uit variabelen, zodat ze samen meeschuiven als de
   header op mobiel lager wordt of bij het scrollen uit beeld gaat.
   --dvd-header-offset: hoeveel ruimte de header op dit moment bovenaan inneemt (0 als hij weg is).
   --dvd-anchor-offset: wat een sectie met een id bovenaan vrij moet houden. Gebruik op de pagina
   `[id]{scroll-margin-top:var(--dvd-anchor-offset)}` in plaats van een vast getal. */
:root{
--dvd-header-offset:var(--header-h,96px);
--dvd-inpagenav-h:53px;
--dvd-anchor-offset:calc(var(--header-h,96px) + var(--dvd-inpagenav-h) + 16px);
}
html[data-dvd-header="hidden"]{--dvd-header-offset:0px}
/* Pagina met `hideOnScroll`: na een sprong naar een anker is de header op mobiel weg en staat alleen
   de strook bovenin, dus een anker houdt alleen de strook vrij. */
@media (max-width:899px){html[data-dvd-header-mode="hide"]{--dvd-anchor-offset:calc(var(--dvd-inpagenav-h) + 16px)}}

/* Sectiepadding onder 900px: 56px (desktop 96px staat in tokens.json als --section-py). */
@media (max-width:899px){
  :root{--section-py:56px;--header-h:var(--header-h-mobile,64px);--dvd-inpagenav-h:49px}
}

/* Mobiele typeladder (tokens.json, groep "Mobiel"). Body, klein en label blijven gelijk:
   leestekst wordt op de telefoon niet kleiner. */
@media (max-width:639px){
  :root{
  --text-display:36px;--lh-display:42px;
  --text-h1:30px;--lh-h1:36px;
  --text-h2:24px;--lh-h2:30px;
  --text-h3:20px;--lh-h3:28px;
  --text-kicker-size:17px;--lh-kicker:24px;
  }
  .text-display{font-size:36px;line-height:42px}
  .text-h1{font-size:30px;line-height:36px}
  .text-h2{font-size:24px;line-height:30px}
  .text-h3{font-size:20px;line-height:28px}
  .text-kicker{font-size:17px;line-height:24px}
  /* Koppen breken nooit af met een afbreekstreepje (besluit 18 oktober): past een woord niet meer op
     de regel, dan gaat het hele woord naar de volgende regel. Is één woord langer dan de kolom
     ("Experimentenprogramma" is op 30px 367px breed, de kolom op 390px 342px), dan krijgt die kop
     op de pagina een kleinere maat tot het woord past; zie README, Mobiele richtlijnen.
     overflow-wrap is alleen het vangnet tegen een te brede pagina, geen ontwerpkeuze. */
  h1,h2,h3{hyphens:none;overflow-wrap:break-word}
}

/* Raakvlak van minstens 44 × 44px op een grove pointer (`touch-target`), zonder dat het zichtbare
   element groter wordt. dvd-hit voor een rond teken (InfoTip), dvd-hit-inline voor een tekstregel
   (tertiaire knop): die krijgt 44px hoogte over de volle breedte van de tekst. */
@media (pointer: coarse){
  .dvd-hit{position:relative}
  .dvd-hit::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .dvd-hit-inline{position:relative}
  .dvd-hit-inline::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}

/* Gelijke kaarthoogte geldt alleen naast elkaar. Card, NumberedCard en TestimonialCard zetten een
   meegegeven minHeight om naar --dvd-minh plus deze klasse; onder 900px stapelen de kaarten en zou
   een vaste minimale hoogte alleen lege vlakken onderin geven. */
.dvd-minh{min-height:var(--dvd-minh)}
@media (max-width:899px){.dvd-minh{min-height:0 !important}}

/* --- SiteHeader -------------------------------------------------------------------------- */
.dvd-header{transition:transform .2s ease-out}
.dvd-header__in{height:var(--header-h,96px)}
.dvd-header__logo img{height:56px}
.dvd-header__nav{display:flex}
.dvd-header__m{display:none}
.dvd-header__sheet{display:none}
html[data-dvd-header="hidden"] .dvd-header{transform:translateY(-100%)}
html[data-dvd-header="hidden"] .dvd-header:focus-within{transform:none}
@media (max-width:899px){
  .dvd-header__in{gap:12px !important}
  .dvd-header__logo img{height:40px}
  .dvd-header__nav{display:none}
  .dvd-header__m{display:flex}
  .dvd-header__sheet[data-open="true"]{display:block}
}
@media (min-width:900px){html[data-dvd-header="hidden"] .dvd-header{transform:none}}
@media (prefers-reduced-motion: reduce){.dvd-header{transition:none}}

/* --- InPageNav --------------------------------------------------------------------------- */
.dvd-ipn{transition:top .2s ease-out}
.dvd-ipn__row{display:flex}
.dvd-ipn__m{display:none}
@media (max-width:899px){
  /* Op mobiel is de strook altijd sticky (besluit 18 oktober), ook met sticky={false}: die prop geldt
     dan alleen voor desktop. Tijdens het lezen is de strook de navigatie; de header gaat weg. */
  .dvd-ipn{position:sticky !important;top:var(--dvd-header-offset) !important}
  .dvd-ipn__row{display:none}
  .dvd-ipn__m{display:block}
}
@media (prefers-reduced-motion: reduce){.dvd-ipn{transition:none}}

/* --- SiteFooter -------------------------------------------------------------------------- */
/* Uitzondering op de linkregel, alleen hier: de linkkolommen in de footer zijn navigatielijsten,
   geen tekstlinks in lopende tekst. In rust geen onderstreping, bij hover en toetsenbordfocus
   1px op 3px offset. Op touch (geen hover) en onder 900px worden het tikrijen met een pijl. */
.dvd-foot__link{text-decoration:none}
.dvd-foot__link:hover,.dvd-foot__link:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.dvd-foot__arrow{display:none}
@media (hover: none){.dvd-foot__link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}}
@media (max-width:899px){
  .dvd-foot__grid{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  .dvd-foot__list{gap:0 !important;border-top:1px solid rgba(255,255,255,.2)}
  .dvd-foot__link{display:flex !important;align-items:center;justify-content:space-between;min-height:48px;border-bottom:1px solid rgba(255,255,255,.2);text-decoration:none}
  .dvd-foot__arrow{display:inline}
  .dvd-foot__legal{flex-direction:column}
}

/* --- FaqItem: geen balk en geen inspringing onder 900px --------------------------------- */
@media (max-width:899px){.dvd-faqitem{border-left:0 !important;padding-left:0 !important}}

/* --- PageHeader -------------------------------------------------------------------------- */
@media (max-width:639px){.dvd-pageheader{padding:40px 0 !important}}

/* --- GrowthBlock: van, pijl, naar onder elkaar; de pijl wijst omlaag ----------------------- */
@media (max-width:639px){
  .dvd-growth{grid-template-columns:minmax(0,1fr) !important;gap:12px !important}
  .dvd-growth__arrow{transform:rotate(90deg);margin:0 !important;justify-self:start;align-self:start !important}
}

/* --- TestimonialCard en VideotestimonialCard ------------------------------------------- */
/* De vaste kopregel van 56px houdt twee kaarten naast elkaar op één bovenlijn. Gestapeld is
   er geen buur om mee uit te lijnen; een rolregel die wrapt, mag de kopregel dan laten groeien. */
@media (max-width:899px){
  .dvd-quote-head{height:auto !important;min-height:56px}
}
@media (max-width:639px){
  /* Op de telefoon staat het logo op een eigen regel boven portret en naam. Naast elkaar kregen
     naam en logo elk te weinig ruimte: het logo werd geknepen of de naam brak in tweeën. */
  .dvd-quote-head{flex-wrap:wrap;row-gap:var(--space-4) !important}
  .dvd-quote-head__logo{order:-1;flex-basis:100% !important;max-width:none !important;height:auto !important;justify-content:flex-start !important}
  .dvd-quote-head__logo img{object-position:left center !important}
}
@media (max-width:899px){
  .dvd-vtc{grid-template-columns:minmax(0,1fr) !important}
  .dvd-vtc[data-video-mobile="false"] .dvd-vtc__media{display:none}
}

/* --- QuotePanel: portret eronder, dus het driehoekje wijst omlaag; teken boven de tekst ------ */
@media (max-width:899px){
  .dvd-quote__arrow{top:auto !important;bottom:-9px !important;right:auto !important;left:40px !important;margin-top:0 !important;border-left:9px solid transparent !important;border-right:9px solid transparent !important;border-bottom:0 !important;border-top:9px solid var(--surface-band-cool) !important}
}
@media (max-width:639px){
  .dvd-quote__panel{padding:var(--space-6) !important}
  .dvd-quote__body{grid-template-columns:minmax(0,1fr) !important;gap:0 !important}
  /* Het grote openingsteken vervalt; het citaat opent met een gewoon „ in de tekst, zoals in
     TestimonialCard. Groot boven de tekst viel het teken over de eerste letter. */
  .dvd-quote__mark{display:none !important}
  .dvd-quote__body blockquote::before{content:"\201E"}
}

/* --- NumberedCard: cijfervlak boven de titel, zodat de tekst de volle kaartbreedte krijgt ---- */
@media (max-width:639px){
  .dvd-numcard{grid-template-columns:minmax(0,1fr) !important;gap:16px !important}
  .dvd-numcard__n{width:48px !important;height:48px !important;font-size:28px !important}
}

/* --- ClientLogoRow: op de telefoon een raster van gelijke cellen ------------------------- */
/* Drie kolommen (twee bij vier logo's), elk logo gecentreerd in zijn cel, een onvolledige laatste
   rij gecentreerd. Een doorlopende rij brak op 390px na twee logo's af met een gat rechts; het
   raster houdt het blok rustig. */
@media (max-width:639px){
  /* Een rij met alleen platte woordmerken staat op een gezamenlijke onderlijn (de cel krimpt naar
     zijn logo): een woordmerk in kapitalen (FYEO) vult zijn vak, terwijl bij maxfit en essent de
     stokken van f, t en i boven de letters uitsteken. Gecentreerd stond FYEO daardoor zo'n 3px
     hoger dan de rest; op de onderlijn staan de letters zoals tekst op een regel. Een rij met een
     gestapeld of hoog merk erin wordt gecentreerd: daar zakte een plat woordmerk op de onderlijn
     weg naast het hoge blok. */
  /* Een onvolledige laatste rij (vijf logo's: 3 + 2) staat gecentreerd onder de volle rij, niet
     links: daarom flex met vaste celbreedtes in plaats van een grid (18 oktober). */
  .dvd-logos{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:center !important;column-gap:var(--space-4) !important;row-gap:var(--space-6) !important}
  /* Per rij: alleen platte woordmerken op de onderlijn, een gemengde rij gecentreerd (ClientLogoRow). */
  .dvd-logos > span[data-ralign="end"]{align-self:flex-end !important}
  .dvd-logos > span{height:auto !important;flex:0 0 calc((100% - 2 * var(--space-4)) / 3) !important;justify-content:center !important;min-width:0}
  .dvd-logos[data-cols="2"] > span{flex-basis:calc((100% - var(--space-4)) / 2) !important}
  /* Paneel een maat kleiner op de telefoon (18 oktober): de logo's waren zwaarder dan het label.
     Alleen het paneel; de strook staat al op een kleinere kern (13px) en zou te klein worden. */
  .dvd-logos--panel{--dvd-logo-scale:.8}
  .dvd-logos img{max-width:100%;object-fit:contain}
  .dvd-logopanel{display:block !important}
  /* Paneel: 24px rondom en 24px tussen het label en de logo's (18 oktober). Met 8px plakte het
     label aan de eerste rij, en die rij las als een vervolg van de zin in plaats van als het blok
     waar het label over gaat. */
  .dvd-logopanel__in{padding:var(--space-6) !important}
  .dvd-logopanel__in > p{margin-bottom:var(--space-6) !important}
  /* 64px boven, 48px onder: de strook staat vaak direct onder een band met visual cue (het
     driehoekje van 41px steekt de strook in). Met 32px overlapte die cue het label. */
  .dvd-logostrip{padding:var(--space-16) var(--space-6) var(--space-12) !important}
}

/* --- ApproachTimeline: smallere rail, zodat de tekst de breedte krijgt -------------------- */
@media (max-width:639px){
  .dvd-tl__step{grid-template-columns:24px minmax(0,1fr) !important;column-gap:16px !important}
  .dvd-tl__rail{left:10.5px !important}
  .dvd-tl__title{font-size:20px !important}
}

/* --- ChoiceGroup, CycleSteps, CycleDiagram: één kolom --------------------------------------- */
@media (max-width:639px){
  .dvd-choices{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:899px){
  .dvd-cyclesteps{grid-template-columns:minmax(0,1fr) !important}
  .dvd-cycle{grid-template-columns:minmax(0,1fr) !important;gap:var(--space-8) !important}
  .dvd-cycle__nav{width:100% !important}
}
/* Onder 640px past de ring van 480px niet; de stappen lopen dan via Vorige/Volgende en de stippen. */
@media (max-width:639px){
  .dvd-cycle__ring{display:none !important}
  .dvd-cycle__nav{margin-top:0 !important;gap:12px !important}
}

/* --- InfoTip en TermTip: bottom sheet op de telefoon ------------------------------------- */
.dvd-sheet__close{display:none}
@media (max-width:639px){
  .dvd-sheet{position:fixed !important;left:16px !important;right:16px !important;bottom:16px !important;top:auto !important;width:auto !important;max-height:60vh;overflow:auto;z-index:60 !important;padding:var(--space-4) var(--space-4) var(--space-6) !important}
  .dvd-sheet__close{display:flex}
}