@font-face{
      font-family:'Stardom';
      src:url('../fonts/stardom-regular.woff2') format('woff2');
      font-weight:400;font-style:normal;font-display:swap;
    }

    :root{
      color-scheme:light;

      /* kleur, brandbook 1.2 sectie 3 */
      --veldgrijs:#ECECEF;
      --paneelwit:#FFFFFF;
      --gitzwart:#0A0A0A;
      --geel:#FFF500;
      --haarlijn:rgba(10,10,10,.13);
      --zwaar:rgba(10,10,10,.32);
      --tekst-2:rgba(10,10,10,.62);
      --tekst-3:rgba(10,10,10,.58); /* briefing .45 haalt 3,2:1 op wit, verhoogd naar 4,9:1 */

      /* raamwerk */
      --paneelgat:12px;
      --randmarge:clamp(14px,2.2vw,34px); /* smalle strook staal langs de brede blokken */
      --gutter:clamp(1rem,4.2vw,3rem);
      --maxw:1180px;

      /* typetrap */
      --t-klein:clamp(.72rem,.7rem + .08vw,.78rem);
      --t-basis:clamp(.95rem,.92rem + .18vw,1.06rem);
      --t-groot:clamp(1.08rem,1rem + .36vw,1.3rem);
      --t-kop:clamp(1.5rem,1.2rem + 1.35vw,2.5rem);
      --t-display:clamp(2.6rem,1.6rem + 4.4vw,5.6rem);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:100px}
    body{
      margin:0;
      color:var(--gitzwart);
      background-color:var(--veldgrijs);
      font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
      font-size:var(--t-basis);
      font-weight:400;
      line-height:1.55;
      font-variant-numeric:tabular-nums;
      -webkit-font-smoothing:antialiased;
    }
    /* het veld: geborsteld staal, licht, opgebouwd in canvas (briefing sectie 5) */
    #staal{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
    body::before{
      content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
      background:rgba(255,255,255,.10); /* brandbook 4: 8 tot 14 procent, want koppen staan nu direct op het staal */
    }

    h1,h2,h3,h4{margin:0;font-weight:660;font-stretch:118%;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
    p,ul,ol{margin:0}
    ul,ol{padding:0;list-style:none}
    a{color:inherit}
    img,video{max-width:100%;display:block}
    :focus-visible{outline:3px solid var(--gitzwart);outline-offset:3px}
    @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
    /* rustige onthulling bij het scrollen, alleen transform en opacity */
    .js .toon{opacity:0;transition:opacity .8s ease}
    .js .toon.in{opacity:1}
    .js .toon-traag{transition-delay:.08s}
    .js .toon-trager{transition-delay:.16s}
    .js .toon-traagst{transition-delay:.24s}
    /* geen veegonthulling meer op markeringen: die knipte tekst weg als de
       waarnemer niet op tijd afging of als de markering over meerdere regels liep */
    @media (prefers-reduced-motion:reduce){.js .toon{opacity:1}.js mark{clip-path:none!important}}

    .label{font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:var(--t-klein)}
    .sub{color:var(--tekst-2)}

    /* ---------- raamwerk ---------- */
    .veld{position:relative;z-index:2;padding-inline:var(--gutter);padding-block:var(--paneelgat)}
    .kolom{max-width:var(--maxw);margin-inline:auto;display:flex;flex-direction:column;gap:var(--paneelgat)}
    .paneel{background:var(--paneelwit);padding:clamp(1.7rem,3.8vw,3.2rem)}
    .paneel.strak{padding:0}

    /* ---------- logo ---------- */
    /* brandbook 2.4: het woordmerk nooit onder 60 px hoogte, daaronder het beeldmerk */
    .logo{height:60px;width:auto;color:var(--gitzwart);display:block}
    .beeldmerk{height:34px;width:auto;color:var(--gitzwart);display:none}

    /* ---------- knoppen ---------- */
    .knop{
      display:inline-flex;align-items:center;gap:.6em;
      background:var(--gitzwart);color:var(--paneelwit);
      text-decoration:none;padding:.85em 1.4em;border:0;cursor:pointer;
      font-family:inherit;font-weight:620;font-size:var(--t-klein);letter-spacing:.05em;text-transform:uppercase;
      transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
    }
    .knop:hover{background:var(--paneelwit);color:var(--gitzwart);box-shadow:inset 0 0 0 2px var(--gitzwart)}
    .knop:active{transform:translateY(1px)}
    .knop svg{width:1em;height:1em;flex:none}
    .tekstlink{
      font-weight:620;font-size:var(--t-klein);letter-spacing:.05em;text-transform:uppercase;
      text-decoration:none;box-shadow:inset 0 -1px 0 var(--zwaar);padding-block:.2em;
      transition:box-shadow .15s ease;
    }
    .tekstlink:hover{box-shadow:inset 0 -2px 0 var(--gitzwart)}

    /* ---------- kop van de site ---------- */
    .sitekop{position:fixed;top:0;left:0;right:0;z-index:20;background:var(--paneelwit);border-bottom:1px solid var(--haarlijn)}
    .sitekop-in{
      max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);
      display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:84px;
    }
    .sitekop-merk{display:block;text-decoration:none}
    .sitenav{display:flex;gap:clamp(1rem,2.4vw,2rem);margin-left:auto}
    .sitenav a{
      font-weight:620;font-size:var(--t-klein);letter-spacing:.05em;text-transform:uppercase;
      text-decoration:none;color:var(--tekst-2);padding-block:.4rem;transition:color .15s ease;
    }
    .sitenav a:hover,.sitenav a:active{color:var(--gitzwart);box-shadow:inset 0 -2px 0 var(--gitzwart)}
    .menuknop{
      display:none;margin-left:auto;background:transparent;border:0;cursor:pointer;color:var(--gitzwart);
      width:44px;height:44px;align-items:center;justify-content:center;
    }
    .menuknop svg{width:24px;height:24px}
    .menuknop:hover{background:var(--veldgrijs)}
    .menuknop:active{transform:translateY(1px)}
    .menu{display:none;border-top:1px solid var(--haarlijn);padding:.4rem var(--gutter) 1.2rem}
    .menu a{
      display:flex;align-items:center;justify-content:space-between;
      padding:1rem 0;border-bottom:1px solid var(--haarlijn);text-decoration:none;
      font-weight:620;font-size:var(--t-basis);letter-spacing:.05em;text-transform:uppercase;
    }
    .menu .knop{margin-top:1.2rem;width:100%;justify-content:center}
    @media (max-width:760px){
      .sitenav,.sitekop-in>.knop{display:none}
      .menuknop{display:inline-flex}
      .sitekop.open .menu{display:block}
    }
    @media (max-width:640px){
      .sitekop .logo{display:none}
      .sitekop .beeldmerk{display:block}
      .sitekop-in{min-height:64px}
    }

    /* ---------- hero: film vult eerst het hele scherm en krimpt bij scrollen naar zijn paneel ---------- */
    .intro{position:relative;z-index:3;padding:calc(84px + var(--paneelgat)) var(--gutter) 0}
    .intro-vast{max-width:var(--maxw);margin-inline:auto;position:relative}
    .film{position:relative;aspect-ratio:16/9;overflow:hidden;background:transparent}
    .film video{position:absolute;top:0;left:0;width:calc(100% + 2px);height:calc(100% + 1px);object-fit:cover} /* 1 à 2 px extra tegen een naad bij halve pixels */
    .filmknop,.scrollhint{
      position:absolute;bottom:var(--paneelgat);z-index:3;
      width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
      background:var(--gitzwart);color:var(--paneelwit);border:0;cursor:pointer;text-decoration:none;
      transition:background-color .15s ease,color .15s ease;
    }
    .filmknop{right:var(--paneelgat)}
    .scrollhint{display:none}
    .filmknop:hover,.scrollhint:hover{background:var(--paneelwit);color:var(--gitzwart)}
    .filmknop:active,.scrollhint:active{transform:translateY(1px)}
    .filmknop[hidden]{display:none}
    .filmknop:focus-visible,.scrollhint:focus-visible{outline:3px solid var(--paneelwit);outline-offset:0;box-shadow:0 0 0 6px var(--gitzwart)}
    .filmknop svg,.scrollhint svg{width:18px;height:18px}
    .hero-kaart{background:var(--paneelwit);padding:clamp(1.3rem,3.2vw,2.4rem)}
    .hero-kaart .label{display:block;margin-bottom:clamp(.9rem,2vw,1.3rem);color:var(--tekst-2)}
    .hero-kaart h1{
      font-family:'Stardom','Archivo',Georgia,serif;font-weight:400;font-stretch:normal;
      font-size:clamp(2.5rem,1.9rem + 1vw,2.75rem);line-height:.94;letter-spacing:0;text-wrap:pretty;
    }
    /* geel accent op de onderregel, zwarte tekst op geel in Archivo, nooit Stardom op geel (brandbook 3 en 5) */
    .onderregel{font-size:var(--t-groot);line-height:1.3;margin:.8rem 0 0}
    .onderregel mark{background:var(--geel);color:var(--gitzwart);padding:.1em .35em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
    .hero-actie{margin-top:clamp(1.3rem,3vw,1.9rem);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
    @media (min-width:1024px){
      .intro-vast .hero-kaart{position:absolute;left:0;top:0;z-index:2;width:auto;padding:.9rem 1.1rem 1rem}
      .intro-vast .hero-kaart .label,.intro-vast .hero-kaart .tekstlink{display:none}
      .intro-vast .hero-kaart h1{font-size:2.5rem;white-space:nowrap}
      .intro-vast .onderregel{margin-top:.55rem;white-space:nowrap}
      .intro-vast .hero-actie{margin-top:.9rem}
    }
    /* met JavaScript: vaste laag die meeschaalt met het scrollen (js/site.js zet de maten) */
    .js .sitekop{position:fixed;left:0;right:0;will-change:transform}
    .js .intro{padding:0;pointer-events:none} /* de sectie overlapt het eerste paneel eronder, klikken moeten erdoorheen */
    .js .intro-vast{position:sticky;top:0;max-width:none;margin:0;pointer-events:none}
    .js .film{position:absolute;left:0;top:0;aspect-ratio:auto;pointer-events:auto;contain:strict}
    .js .intro-vast .hero-kaart{pointer-events:auto;left:0;top:0;will-change:transform}
    .js .scrollhint{display:inline-flex;left:50%;margin-left:-22px;pointer-events:auto}
    .js .kolom > .hero-kaart{margin:0}

    .hero-onder{display:block}
    .hero-onder .lead{font-size:var(--t-groot);line-height:1.5;max-width:52ch}
    /* pijnpunten onder de film */
    .pijnkop{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);max-width:none;margin-bottom:clamp(1.3rem,3vw,2rem)}
    .sectiekop.oplossingkop{max-width:46ch}
    .pijnkop-rij{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 2rem}
    .pijnkop-bij{max-width:30ch;color:var(--tekst-2);font-size:var(--t-klein);line-height:1.5}
    .sectiekop mark{background:var(--geel);color:var(--gitzwart);padding:0 .08em}
    /* nummers als geel blokje met zwarte cijfers, zwart op geel (brandbook 3) */
    .pijnkeuze .nr{display:inline-block;justify-self:start;background:var(--geel);color:var(--gitzwart);font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-basis);line-height:1;padding:.3em .4em}
    /* aanvinkbare signalen, vierkant vakje zonder afronding */
    .vink{display:grid;grid-template-columns:auto auto 1fr;gap:.2rem .8rem;align-items:baseline;height:100%;padding:.9rem 1.2rem .95rem;cursor:pointer;transition:background-color .15s ease}
    @media (hover:hover){.vink:hover{background:var(--veldgrijs)}}
    /* vastloopt-blok in zwart: kleuren omgekeerd */
    .paneel.zwart .vakje{border-color:var(--paneelwit);background:transparent;color:var(--gitzwart)}
    .paneel.zwart .vink input:checked ~ .vakje{border-color:var(--geel)}
    .paneel.zwart .vink input:focus-visible ~ .vakje{outline-color:var(--paneelwit)}
    @media (hover:hover){.paneel.zwart .vink:hover{background:rgba(255,255,255,.08)}}
    .paneel.zwart .knop{background:var(--paneelwit);color:var(--gitzwart)}
    .paneel.zwart .knop:hover{background:var(--gitzwart);color:var(--paneelwit);box-shadow:inset 0 0 0 2px var(--paneelwit)}
    .vink input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
    .vakje{width:22px;height:22px;border:2px solid var(--gitzwart);display:inline-flex;align-items:center;justify-content:center;align-self:start;margin-top:.15rem;background:var(--paneelwit);color:var(--paneelwit);transition:background-color .15s ease}
    .vakje svg{width:14px;height:14px;opacity:0;transition:opacity .15s ease}
    .vink input:checked ~ .vakje{background:var(--geel);color:var(--gitzwart)}
    .vink input:checked ~ .vakje svg{opacity:1}
    .vink input:focus-visible ~ .vakje{outline:3px solid var(--gitzwart);outline-offset:3px}
    .vink:active .vakje{transform:translateY(1px)}
    @media (max-width:640px){.vink{padding-inline:0}}
    .pijnslot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(1.3rem,3vw,1.8rem)}
    .pijnknoppen{display:flex;flex-wrap:wrap;gap:.8rem}
    .knop.licht{background:var(--geel);color:var(--gitzwart)}
    .knop.licht:hover{background:var(--paneelwit);color:var(--gitzwart);box-shadow:inset 0 0 0 2px var(--gitzwart)}
    /* opt-in onder de signalen */
    .optin{margin-top:clamp(1.4rem,3vw,2rem);border-top:1px solid var(--haarlijn);padding-top:clamp(1.2rem,2.6vw,1.8rem)}
    .optin[hidden]{display:none}
    .optin-kop{font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-groot);margin-bottom:1rem}
    .optin-velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
    .optin-velden label{display:grid;gap:.35rem}
    .optin-velden .label{color:var(--tekst-3)}
    .optin-velden input{
      font:inherit;color:inherit;background:transparent;border:0;border-bottom:2px solid var(--zwaar);
      padding:.55rem .1rem;border-radius:0;
    }
    .optin-velden input:focus{outline:none;border-bottom-color:var(--geel)}
    .optin-velden input:focus-visible{outline:3px solid var(--paneelwit);outline-offset:3px}
    .optin-actie{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:1.3rem}
    .optin-fijn{font-size:var(--t-klein);color:var(--tekst-2);max-width:42ch}
    .optin-melding{margin-top:.9rem;font-weight:620}
    .optin-melding:empty{display:none}
    @media (max-width:760px){.optin-velden{grid-template-columns:1fr}}
    .pijnslot p{text-wrap:balance;font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-groot)}
    .pijnkeuze ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--zwaar)}
    .pijnkeuze li{border-bottom:1px solid var(--haarlijn)}
    .pijnkeuze li:not(:nth-child(3n+1)){border-left:1px solid var(--haarlijn)}
    @media (max-width:980px){
      .pijnkeuze ol{grid-template-columns:repeat(2,minmax(0,1fr))}
      .pijnkeuze li:not(:nth-child(3n+1)){border-left:0}
      .pijnkeuze li:nth-child(2n){border-left:1px solid var(--haarlijn)}
    }
    @media (max-width:640px){
      .pijnkeuze ol{grid-template-columns:1fr}
      .pijnkeuze li:nth-child(2n){border-left:0}
    }
    .pijn{font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-basis);line-height:1.3}
    @media (max-width:760px){
      .hero-onder{grid-template-columns:1fr}
    }

    /* ---------- blad: kop en vraag op het staal, inhoud in losse panelen (brandbook 3: staal 55, wit 25, zwart 20) ---------- */
    .blad{display:flex;flex-direction:column;gap:var(--paneelgat);margin-top:clamp(4rem,9vw,7.5rem)}
    .blad-rij{display:grid;gap:var(--paneelgat);margin:0;padding:0;list-style:none}
    .blad-rij.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
    .blad-rij.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
    .blad-rij.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
    .beginselen{grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:clamp(14px,1.6vw,22px)}
    @media (min-width:1150px){.beginselen{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media (max-width:1100px){.blad-rij.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width:900px){.blad-rij.twee,.blad-rij.drie{grid-template-columns:1fr}}
    @media (max-width:640px){.blad-rij.vier{grid-template-columns:1fr}}
    .bladkop{
      display:grid;grid-template-columns:minmax(6rem,auto) 1fr auto;align-items:baseline;gap:.35rem 1.5rem;
      border-bottom:1px solid var(--zwaar);padding-bottom:.85rem;
    }
    .bladkop .onderwerp{font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-groot);line-height:1.2}
    .bladkop .detail{text-align:right}
    @media (max-width:640px){
      .bladkop{grid-template-columns:1fr}
      .bladkop .detail{text-align:left}
    }
    .sectiekop{font-size:var(--t-kop);max-width:24ch}
    .blad > .sectiekop{margin:0 0 clamp(1.1rem,2.6vw,1.8rem)}
    .lopend{font-size:var(--t-groot);line-height:1.5;max-width:56ch}

    /* zwart paneel: één per scherm */
    .paneel.zwart{
      background:var(--gitzwart);color:var(--paneelwit);
      --tekst-2:rgba(255,255,255,.72);--tekst-3:rgba(255,255,255,.62);
      --haarlijn:rgba(255,255,255,.18);--zwaar:rgba(255,255,255,.4);
    }
    .paneel.zwart :focus-visible{outline-color:var(--paneelwit)}
    .paneel.zwart mark,.paneel.doorzichtig mark{background:transparent;color:var(--geel);padding:0}
    .paneel.zwart .tekstlink{box-shadow:inset 0 -1px 0 var(--zwaar)}

    /* ---------- blad 01, werkbon ---------- */
    .werkbon-rij{display:grid;grid-template-columns:7.5rem 1fr;gap:.4rem 1.2rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--haarlijn)}
    .werkbon-rij:first-child{padding-top:0}
    .werkbon-rij:last-child{border-bottom:0;padding-bottom:0}
    .werkbon-rij .label{color:var(--tekst-3)}
    .idee{font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-kop);line-height:1.1}
    .werkbon-blok{background:var(--veldgrijs);color:var(--gitzwart);padding:1.1rem 1.2rem;display:grid;gap:.35rem;font-size:var(--t-basis)}
    .werkbon-blok .opdracht{color:var(--tekst-2)}
    .werkbon-blok .stand{display:inline-flex;align-items:center;gap:.55em;font-weight:620}
    .werkbon-blok .stand::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gitzwart);flex:none}
    .uitkomst-groot{font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-groot)}
    @media (max-width:520px){.werkbon-rij{grid-template-columns:1fr}}

    /* ---------- blad 02, register van vragen ---------- */
    .register{margin:0;padding:0;list-style:none}
    .regel{display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr);gap:.4rem 1.5rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--haarlijn)}
    .regel:first-child{padding-top:0}
    .regel:last-child{border-bottom:0;padding-bottom:0}
    .regel .nr{color:var(--tekst-3)}
    .regel .vraag{font-size:var(--t-groot);line-height:1.35}
    .regel .antwoord{color:var(--tekst-2);text-align:right}
    @media (max-width:760px){
      .regel{grid-template-columns:auto 1fr}
      .regel .antwoord{grid-column:2;text-align:left}
    }

    /* ---------- blad 03, stappen als losse panelen ---------- */
    .stap{display:flex;flex-direction:column;gap:.5rem}
    .stapnr{font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-kop);line-height:1;margin-bottom:.6rem}
    .stap h3{font-size:var(--t-groot)}
    .stap p{color:var(--tekst-2)}

    /* ---------- logobalk over de volle breedte, in zwart op het staal ---------- */
    html{overflow-x:clip}
    .logobalk{margin-inline:calc(50% - 50vw + var(--randmarge));overflow:hidden;border-block:1px solid var(--zwaar);padding:clamp(1rem,2.4vw,1.5rem) 0;margin-bottom:clamp(1.2rem,3vw,2rem)}
    .logobalk-spoor{display:flex;width:max-content;animation:logosSchuiven 60s linear infinite}
    .logobalk:hover .logobalk-spoor{animation-play-state:paused}
    .logobalk-set{display:flex;align-items:center;gap:clamp(2.6rem,5vw,4.5rem);margin:0;padding:0 clamp(1.3rem,2.5vw,2.25rem);list-style:none}
    .logobalk-set li{flex:none;display:flex;align-items:center;height:64px}
    .logobalk-set img{display:block;max-width:none}
    @keyframes logosSchuiven{to{transform:translateX(-50%)}}
    @media (max-width:640px){.logobalk-set img{height:auto;max-height:40px;width:auto}.logobalk-set li{height:44px}}
    @media (prefers-reduced-motion:reduce){
      .logobalk-spoor{animation:none;width:auto}
      .logobalk-set{flex-wrap:wrap;justify-content:center;row-gap:1.2rem}
      .logobalk-set[aria-hidden="true"]{display:none}
    }

    /* ---------- aanbod: drie clips onder elkaar, om en om links en rechts ---------- */
    .diensten{display:flex;flex-direction:column;gap:clamp(2.4rem,5.5vw,4.2rem)}
    .dienst{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:var(--paneelgat);align-items:start;width:94%}
    .dienst.rechts{grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);margin-left:auto}
    .dienst.rechts .dienstfilm-paneel{order:2}
    /* dienst over de volle breedte: film van rand tot rand, tekstkaart eroverheen */
    .dienst.breed{display:block;width:auto;position:relative}
    .dienst.breed .dienstfilm-paneel{margin-inline:calc(50% - 50vw + var(--randmarge))}
    .dienst.breed .dienstfilm{aspect-ratio:16/9}
    /* de tekst staat onder de film, niet eroverheen */
    .dienst.breed .paneel:not(.strak){margin-top:var(--paneelgat)}
    @media (min-width:900px){
      .dienst.breed .paneel:not(.strak){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem clamp(2rem,5vw,4rem);align-items:start}
      .dienst.breed .dienst-tekst{display:contents}
      .dienst.breed .dienst-tekst h3{grid-column:1;grid-row:1;margin-bottom:0}
      .dienst.breed .dienst-tekst > p{grid-column:1;grid-row:2;margin-bottom:0}
      .dienst.breed .dienst-tekst > p.dienst-vraag{grid-column:2;grid-row:1;align-self:end;margin:0}
      .dienst.breed .dienst-acties{grid-column:2;grid-row:2;align-self:start}
    }
    .dienstfilm-paneel{min-width:0}
    .dienstfilm{position:relative;width:100%;aspect-ratio:16/9;background:var(--veldgrijs);overflow:hidden}
    .dienstfilm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .dienst .paneel:not(.strak){display:flex;flex-direction:column;justify-content:center}
    .dienst-tekst h3{font-size:var(--t-kop);margin-bottom:.8rem}
    .dienst-tekst > p{color:var(--tekst-2);font-size:var(--t-groot);line-height:1.5;margin-bottom:1.4rem}
    .dienst-tekst > p.bewijs{display:grid;gap:.15rem;border-top:1px solid var(--zwaar);padding-top:1rem;margin:0 0 1.4rem;color:var(--gitzwart);font-size:var(--t-basis)}
    .bewijs-cijfer{font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:clamp(1.2rem,1rem + .6vw,1.55rem);line-height:1.2}
    .bewijs-bron{color:var(--tekst-2)}
    .dienst-tekst .knop{align-self:flex-start}
    .paneel.zwart .dienst-tekst > p.bewijs,.paneel.zwart .dienst-tekst > p.dienst-vraag{color:var(--paneelwit)}
    .dienst-tekst > p.dienst-vraag{color:var(--gitzwart);font-weight:660;font-stretch:118%;letter-spacing:-.02em;margin:0 0 .9rem}
    .dienst-acties{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem}
    @media (max-width:900px){
      .dienst,.dienst.rechts{grid-template-columns:1fr;width:100%;margin-left:0}
      .dienst.rechts .dienstfilm-paneel{order:0}
    }

    /* ---------- blad 05, bewijs ---------- */
    .dossier-hoofd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem clamp(2rem,5vw,3.5rem);align-items:start}
    .dossier-kop{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem;margin-bottom:1rem}
    .dossier-kop img{height:32px;width:auto}
    .dossier-kop .naam{font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-groot)}
    .dossier-kop .label{color:var(--tekst-2)}
    .dossier h3{font-size:var(--t-kop);margin-bottom:.8rem;max-width:20ch}
    .blad-rij .dossier h3{font-size:var(--t-groot)}
    .dossier .verhaal{color:var(--tekst-2);max-width:60ch}
    .cijfers{display:flex;flex-wrap:wrap;gap:.8rem 2.6rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--haarlijn)}
    .cijfer{display:grid;gap:.1rem}
    .cijfer .label{color:var(--tekst-3)}
    .cijfer .waarde{font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-groot)}
    .stand-live{display:inline-flex;align-items:center;gap:.5em}
    .stand-live::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
    .dossier-film{position:relative}
    .dossier-film img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 12%}
    .dossier-film figcaption{display:flex;align-items:center;gap:.8rem;padding-top:.8rem;color:var(--tekst-2)}
    .dossier-film .speel{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:var(--gitzwart);color:var(--paneelwit);flex:none}
    .paneel.zwart .dossier-film .speel{background:var(--paneelwit);color:var(--gitzwart)}
    .dossier-film .speel svg{width:14px;height:14px}
    @media (max-width:900px){.dossier-hoofd{grid-template-columns:1fr}}

    /* ---------- band met een getekende animatie achter de panelen ---------- */
    .fondband{position:relative;padding-block:clamp(3rem,6vw,5.2rem)}
    /* de animatie loopt door onder en naast de panelen, dus de panelen krijgen lucht */
    .fondband.rondom{padding-inline:clamp(1.2rem,4vw,3.5rem)}
    .tekstband{padding-block:clamp(2.2rem,5vw,4rem)}
    /* vlakke donkere laag over de animatie, zodat de tekst leesbaar blijft */
    .tekstband .bladfond::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.62)}
    .paneel.doorzichtig{background:transparent;color:var(--paneelwit);--tekst-2:rgba(255,255,255,.78);--tekst-3:rgba(255,255,255,.62);--haarlijn:rgba(255,255,255,.2);--zwaar:rgba(255,255,255,.42)}
    .paneel.doorzichtig .knop{background:var(--paneelwit);color:var(--gitzwart)}
    .paneel.doorzichtig .knop:hover{background:var(--gitzwart);color:var(--paneelwit);box-shadow:inset 0 0 0 2px var(--paneelwit)}
    .paneel.doorzichtig .dienst-vraag{color:var(--paneelwit)}
    .paneel.doorzichtig :focus-visible{outline-color:var(--paneelwit)}
    .bladfond{position:absolute;inset:0;margin-inline:calc(50% - 50vw + var(--randmarge));background:var(--gitzwart);overflow:hidden;z-index:0}
    .fondband > *:not(.bladfond){position:relative;z-index:1}

    /* eigendomsregel, korte uitleg boven een blok */
    .eigendomsregel{max-width:none;font-size:var(--t-basis);color:var(--tekst-2)}

    /* ---------- reviews ---------- */
    .review{display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem;margin:0}
    .citaat{font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-groot);line-height:1.35}
    .review .wie{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--haarlijn);padding-top:1rem}
    .review .wie img{height:24px;width:auto}
    .review .wie .label{color:var(--tekst-3)}
    .review .wie .naam{display:block;font-weight:620}
    /* concept-quotes: zichtbaar gemarkeerd tot de klant ze bevestigt */

    /* ---------- proces ---------- */
    .stappenlijst{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.6rem);margin:0;padding:0;list-style:none}
    .stap-rij{display:grid;gap:var(--paneelgat)}
    .stap-rij.met-beeld{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:stretch}
    .stap-rij.met-beeld.omgekeerd .stapfilm{order:-1}
    .stapkaart{display:flex;flex-direction:column;gap:.7rem}
    .stapkaart .nr{display:inline-block;align-self:flex-start;background:var(--geel);color:var(--gitzwart);font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-basis);line-height:1;padding:.3em .4em;margin-bottom:.4rem}
    .stapkaart h3{font-size:var(--t-kop)}
    .stapkaart p{color:var(--tekst-2);max-width:62ch}
    .stapkaart .merkt{color:var(--gitzwart);border-top:1px solid var(--haarlijn);padding-top:.9rem;margin-top:auto;font-size:var(--t-groot);line-height:1.35}
    .stapkaart .merkt mark{background:var(--geel);color:var(--gitzwart);padding:.05em .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
    .stapfilm{position:relative;overflow:hidden;min-height:220px;background:var(--gitzwart)}
    .stapfilm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    @media (max-width:900px){
      .stap-rij.met-beeld{grid-template-columns:1fr}
      .stap-rij.met-beeld.omgekeerd .stapfilm{order:0}
      .stapfilm{min-height:200px;aspect-ratio:16/9}
    }

    /* ---------- botte cta ---------- */


    /* ---------- waarom: vier beginselen ---------- */
    .beginselen{margin:0;padding:0;list-style:none}
    .beginsel{display:flex;flex-direction:column;padding:clamp(1rem,1.8vw,1.4rem)}
    .beginsel .nr{display:inline-block;align-self:flex-start;background:var(--geel);color:var(--gitzwart);font-weight:660;font-stretch:118%;letter-spacing:-.02em;font-size:var(--t-klein);line-height:1;padding:.3em .4em;margin-bottom:.7rem}
    .beginsel h3{font-size:var(--t-basis);line-height:1.2;margin-bottom:.5rem}
    .beginsel p{color:var(--gitzwart);font-size:var(--t-basis);line-height:1.55}
    .beginsel mark{background:var(--geel);color:var(--gitzwart);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

    /* ---------- blad 07, vragen ---------- */
    .vragen details{border-bottom:1px solid var(--haarlijn)}
    .vragen details:last-child{border-bottom:0}
    .vragen summary{
      cursor:pointer;list-style:none;position:relative;padding:1.05rem 2.6rem 1.05rem 0;
      font-size:var(--t-groot);font-weight:660;font-stretch:118%;letter-spacing:-.02em;line-height:1.3;
    }
    .vragen details:first-child summary{padding-top:0}
    .vragen details:first-child summary::after{top:-.15rem}
    .vragen summary::-webkit-details-marker{display:none}
    .vragen summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;font-weight:400;font-stretch:normal;font-size:1.4em;line-height:1;color:var(--tekst-2)}
    .vragen details[open] summary::after{content:"\2212"}
    .vragen summary:hover::after{color:var(--gitzwart)}
    .vragen details p{padding:0 2.6rem 1.2rem 0;color:var(--tekst-2);max-width:66ch}

    /* ---------- slot ---------- */
    .slot{margin-top:clamp(4rem,9vw,7.5rem);background:var(--geel);color:var(--gitzwart);padding:clamp(2rem,5.5vw,3.8rem) clamp(1.3rem,3.2vw,2.6rem)}
    .slot h2{font-family:'Stardom','Archivo',Georgia,serif;font-weight:400;font-stretch:normal;font-size:var(--t-display);line-height:.94;letter-spacing:0;max-width:13ch}
    .slot p{margin-top:1.2rem;max-width:48ch;font-size:var(--t-groot);line-height:1.5}
    .slot .knop{margin-top:clamp(1.5rem,3.5vw,2.2rem)}
    .slot .fijn{margin-top:1.1rem;font-size:var(--t-basis)}
    .slot .fijn a{font-weight:620;text-decoration:underline;text-underline-offset:.2em}
    .slot.botte-cta{
      background:var(--gitzwart);color:var(--geel);
      margin-inline:calc(50% - 50vw + var(--randmarge));
      min-height:calc(100svh - 84px - var(--paneelgat) * 2);
      display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
      padding:clamp(2.5rem,7vw,5rem) clamp(1.5rem,6vw,6rem);
      text-align:left;
    }
    .slot.botte-cta h2{max-width:16ch;color:var(--geel)}
    .slot.botte-cta p{color:var(--geel)}
    .slot.botte-cta .knop{background:var(--geel);color:var(--gitzwart)}
    .slot.botte-cta .knop:hover{background:var(--gitzwart);color:var(--geel);box-shadow:inset 0 0 0 2px var(--geel)}
    .slot.botte-cta .fijn a{color:var(--geel)}
    @media (max-width:640px){.slot.botte-cta{min-height:auto}}

    /* ---------- voet ---------- */
    .voet{display:flex;flex-wrap:wrap;gap:1.6rem 2.5rem;justify-content:space-between;align-items:flex-start}
    .voet .tagline{max-width:34ch;margin-top:.9rem;color:var(--tekst-2)}
    .voetnav{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem}
    .voetnav a{font-weight:620;letter-spacing:.05em;text-transform:uppercase;font-size:var(--t-klein);text-decoration:none;color:var(--tekst-2)}
    .voetnav a:hover{color:var(--gitzwart);box-shadow:inset 0 -2px 0 var(--gitzwart)}
    .colofon a{color:var(--tekst-2);text-decoration:underline;text-underline-offset:.2em}
    .colofon a:hover{color:var(--gitzwart)}
    .colofon{margin-top:1.8rem;padding-top:.9rem;border-top:1px solid var(--haarlijn);font-size:var(--t-klein);color:var(--tekst-3)}