/* ==========================================================
   Design system Maaike Hendriks, versie 2 "Helder & eigenwijs"
   (goedgekeurd 12-10-2026). Alle waarden komen uit dit blok.
   ========================================================== */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/bricolage-grotesque.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/dm-sans.woff2) format("woff2")}

:root{
  /* Kleuren met een rol */
  --wit:#F4F6F3;          /* achtergrond */
  --inkt:#14151C;         /* koppen, tekst, donkere blokken */
  --inkt-zacht:#4A4C57;   /* lopende tekst */
  --kobalt:#2F4BFF;       /* knoppen, links, accent */
  --kobalt-donker:#2238D6;/* knop bij aanwijzen */
  --limoen:#D9F86B;       /* markeerstift; als tekst alleen op inkt of kobalt */
  --ijsblauw:#E3E8FF;     /* vlakken, kaarten */
  --puur:#FFFFFF;         /* kaarten op ijsblauw, tekst op kobalt */

  /* Lettertypes */
  --kop:"Bricolage Grotesque",system-ui,sans-serif;
  --tekst:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Groottes (computer) */
  --t-groot:80px;   --lh-groot:1;
  --t-sectie:56px;  --lh-sectie:1.05;
  --t-tussen:28px;  --lh-tussen:1.15;
  --t-intro:21px;   --lh-intro:1.55;
  --t-tekst:18px;   --lh-tekst:1.65;
  --t-klein:15px;   --lh-klein:1.5;
  --t-label:13px;   --lh-label:1.4;
  --strak:-.02em;

  /* Ruimte: basis 8 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px;
  --breed:1184px;
  --gutter:var(--s3);
  --sectie:var(--s16);

  /* Vormen en lijnen */
  --r-pil:999px;
  --r-kaart:24px;
  --lijn:2px solid var(--inkt);
  --lijn-dun:1px solid rgba(20,21,28,.12);
  --lijn-licht:1px solid rgba(244,246,243,.2);

  /* Beweging */
  --ease:cubic-bezier(.2,.8,.2,1);
  --snel:150ms;
  --in:500ms;
  --stift:700ms;
  --na-elkaar:100ms;
}

@media (max-width:640px){
  :root{
    --t-groot:44px; --t-sectie:36px; --t-tussen:24px;
    --t-intro:18px; --t-tekst:17px;
    --gutter:var(--s2);
    --sectie:var(--s10);
  }
}

/* ===== Basis ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--s12)}
body{margin:0;background:var(--wit);color:var(--inkt);font-family:var(--tekst);font-size:var(--t-tekst);line-height:var(--lh-tekst);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 var(--s2)}
h1,h2,h3{font-family:var(--kop);margin:0;letter-spacing:var(--strak)}
h1{font-weight:800;font-size:var(--t-groot);line-height:var(--lh-groot)}
h2{font-weight:800;font-size:var(--t-sectie);line-height:var(--lh-sectie)}
h3{font-weight:500;font-size:var(--t-tussen);line-height:var(--lh-tussen)}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--sectie) 0}
.intro{font-size:var(--t-intro);line-height:var(--lh-intro);color:var(--inkt-zacht)}
.zacht{color:var(--inkt-zacht)}
.punt{color:var(--kobalt)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.label{font-size:var(--t-label);line-height:var(--lh-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--kobalt);margin:0 0 var(--s3)}

/* Markeerstift: op licht een limoen vlak achter het woord, op donker een dikke limoen streep eronder */
.mk{position:relative;display:inline-block}
.mk::before{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.08em;height:.42em;background:var(--limoen);transform-origin:left center}
.mk > span{position:relative}
.mk-o{position:relative;display:inline-block}
.mk-o::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.12em;background:var(--limoen);transform-origin:left center}

/* Knoppen */
.knop{display:inline-flex;align-items:center;min-height:var(--s6);font:500 var(--t-klein)/var(--lh-klein) var(--tekst);text-decoration:none;padding:var(--s2) var(--s4);border-radius:var(--r-pil);background:var(--kobalt);color:var(--puur);border:0;cursor:pointer;transition:background var(--snel) var(--ease),transform var(--snel) var(--ease)}
.knop:hover{background:var(--kobalt-donker);transform:translateY(-2px)}
.knop-lijn{background:transparent;color:var(--inkt);border:var(--lijn);padding:calc(var(--s2) - 2px) calc(var(--s4) - 2px)}
.knop-lijn:hover{background:var(--limoen)}
.knop-limoen{background:var(--limoen);color:var(--inkt)}
.knop-limoen:hover{background:var(--puur)}
a:focus-visible,button:focus-visible{outline:2px solid var(--kobalt);outline-offset:var(--s1)}
.donker a:focus-visible,.donker button:focus-visible,.scan a:focus-visible,.scan button:focus-visible{outline-color:var(--limoen)}

.kaart{background:var(--puur);border:var(--lijn);border-radius:var(--r-kaart);padding:var(--s4)}

/* ===== Menubalk ===== */
.balk{position:sticky;top:0;z-index:20;background:rgba(244,246,243,.94);backdrop-filter:blur(8px);border-bottom:var(--lijn-dun)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--s10);gap:var(--s3)}
.logo{text-decoration:none;display:flex;flex-direction:column;gap:var(--s1);line-height:1}
.logo b{font:800 var(--t-tussen)/1 var(--kop);letter-spacing:var(--strak)}
.logo small{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.menu{list-style:none;display:flex;gap:var(--s4);margin:0;padding:0;align-items:center}
.menu a{text-decoration:none;font-size:var(--t-klein);font-weight:500}
.menu a:not(.knop):hover{color:var(--kobalt)}
.alleen-mobiel{display:none}
.menu-knop{display:inline-flex;align-items:center;min-height:var(--s6);padding:var(--s1) var(--s3);border:var(--lijn);border-radius:var(--r-pil);background:transparent;color:var(--inkt);font:500 var(--t-klein)/var(--lh-klein) var(--tekst);cursor:pointer;transition:background var(--snel) var(--ease)}
.menu-knop[aria-expanded="true"]{background:var(--limoen)}
.mobiel-menu{border-top:var(--lijn-dun)}
.mobiel-menu ul{list-style:none;margin:0;padding-top:var(--s1);padding-bottom:var(--s2)}
.mobiel-menu a:not(.knop){display:flex;align-items:center;min-height:var(--s8);text-decoration:none;font:500 var(--t-tussen)/var(--lh-tussen) var(--kop);letter-spacing:var(--strak);border-bottom:var(--lijn-dun)}
.mobiel-menu .menu-cta{padding-top:var(--s3)}
.mobiel-menu .menu-cta .knop{width:100%;justify-content:center}
@media (min-width:1101px){.mobiel-menu{display:none}}
@media (max-width:1100px){.menu li:not(.blijft){display:none}.alleen-mobiel{display:list-item}.menu{gap:var(--s1)}}

/* ===== Beat 1: Binnenkomst ===== */
.binnenkomst{padding-top:var(--s12)}
.binnenkomst .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:center}
.binnenkomst .intro{max-width:560px;margin:var(--s4) 0 var(--s6)}
.acties{display:flex;gap:var(--s2);flex-wrap:wrap}
.veld{position:relative;height:calc(6 * var(--s8));max-width:360px;width:100%;margin-left:auto}
.taak{position:absolute;left:0;right:0;top:calc(var(--i) * var(--s8));display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--puur);border:var(--lijn);border-radius:var(--s2);font-weight:500;font-size:var(--t-klein);transition:transform var(--stift) var(--ease),background var(--in) var(--ease)}
.taak i{flex:none;width:var(--s3);height:var(--s3);border:var(--lijn);border-radius:var(--r-pil);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:var(--t-label);background:var(--limoen);transition:background var(--in) var(--ease),color var(--in) var(--ease)}
.veld.orde .taak{background:var(--ijsblauw)}

/* ===== Beat 2: Lopende band ===== */
.band{background:var(--inkt);color:var(--limoen);overflow:hidden;padding:var(--s3) 0}
.band-rij{display:flex;width:max-content}
.band-rij span{font-size:var(--t-klein);font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;padding-right:var(--s4)}

/* ===== Beat 3: Herken jij dit? ===== */
.herken .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
.herken h2{margin-bottom:var(--s4)}
.vragen{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.vragen li{font:500 var(--t-tussen)/var(--lh-tussen) var(--kop);letter-spacing:var(--strak);padding:var(--s3)}
.vragen li:nth-child(even){margin-left:var(--s6)}
.slot{font:800 var(--t-tussen)/var(--lh-tussen) var(--kop);letter-spacing:var(--strak);margin:var(--s4) 0 0}

/* ===== Beat 4: Tijdvreter-scan ===== */
.scan{background:var(--kobalt);color:var(--puur)}
.scan .label{color:var(--limoen)}
.scan .kop-rij{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s8);align-items:end;margin-bottom:var(--s6)}
.scan .intro{color:var(--puur);margin:0}
.scan-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--s4);align-items:start}
.tegels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.tegel{width:100%;min-height:var(--s12);display:flex;justify-content:space-between;align-items:center;gap:var(--s2);text-align:left;font:500 var(--t-klein)/var(--lh-klein) var(--tekst);color:var(--puur);background:transparent;border:2px solid var(--puur);border-radius:var(--r-kaart);padding:var(--s2) var(--s3);cursor:pointer;transition:background var(--snel) var(--ease),color var(--snel) var(--ease),transform var(--snel) var(--ease)}
.tegel:hover{transform:translateY(-2px)}
.tegel b{flex:none;font:800 var(--t-klein)/1 var(--kop);min-width:var(--s8);text-align:center;padding:var(--s1) var(--s2);border-radius:var(--r-pil);border:2px solid var(--puur)}
.tegel[aria-pressed="true"]{background:var(--puur);color:var(--inkt)}
.tegel[aria-pressed="true"] b{background:var(--limoen);border-color:var(--inkt)}
.uitkomst{position:sticky;top:calc(var(--s12) + var(--s2));background:var(--inkt);color:var(--puur);border-radius:var(--r-kaart);padding:var(--s4)}
.uitkomst .getal{font:800 var(--t-groot)/1 var(--kop);letter-spacing:var(--strak);color:var(--limoen);margin:0}
.uitkomst .eenheid{font:500 var(--t-tussen)/var(--lh-tussen) var(--kop);margin:0 0 var(--s3)}
.uitkomst p{font-size:var(--t-klein);line-height:var(--lh-klein)}
.hint{font-size:var(--t-klein);margin:var(--s3) 0 0}

/* ===== Beat 5: Voor en na ===== */
.voorna h2{max-width:800px;margin-bottom:var(--s6)}
.vn-kop,.vn-rij{display:grid;grid-template-columns:1fr var(--s12) 1fr;gap:var(--s3);align-items:center}
.vn-kop{padding-bottom:var(--s2)}
.vn-kop span{font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--kobalt)}
.vn-kop span:last-child{grid-column:3}
.vn-rij{padding:var(--s3) 0;border-top:var(--lijn-dun)}
.vn-rij:last-of-type{border-bottom:var(--lijn-dun)}
.vn-nu{margin:0;color:var(--inkt-zacht)}
.vn-lijn{height:2px;background:var(--kobalt);transform-origin:left center}
.vn-straks{margin:0;font:500 var(--t-tussen)/var(--lh-tussen) var(--kop);letter-spacing:var(--strak)}
.overgang{font:800 var(--t-tussen)/var(--lh-tussen) var(--kop);letter-spacing:var(--strak);margin:var(--s8) 0 0}

/* ===== Beat 6: Meedenken én doen ===== */
.doen{background:var(--ijsblauw)}
.doen .kop-rij{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:end;margin-bottom:var(--s6)}
.doen .intro{margin:0}
.kaarten{display:grid;grid-template-columns:1fr 1.3fr;grid-template-rows:auto auto;gap:var(--s3)}
.kaarten .kaart:nth-child(3){grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s6)}
.kaart .nr{font:800 var(--t-sectie)/1 var(--kop);color:var(--kobalt);letter-spacing:var(--strak);margin:0 0 var(--s3)}
.kaart h3{margin-bottom:var(--s1)}
.kaart p{margin:0;color:var(--inkt-zacht)}
.kaarten .kaart:nth-child(3) h3{font-weight:800;font-size:var(--t-sectie);line-height:var(--lh-sectie);margin-bottom:var(--s2)}
.kaarten .kaart:nth-child(3) p:not(.nr){font-size:var(--t-intro);line-height:var(--lh-intro)}

/* ===== Beat 7: Waarom met mij ===== */
.donker{background:var(--inkt);color:var(--puur)}
.donker .label{color:var(--limoen)}
.waarom h2{max-width:800px;margin-bottom:var(--s8)}
.cijfers{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--s3);margin-bottom:var(--s8)}
.cijfer{border-top:2px solid var(--limoen);padding-top:var(--s3)}
.cijfer b{display:block;font:800 var(--t-groot)/1 var(--kop);letter-spacing:var(--strak);color:var(--limoen);font-variant-numeric:tabular-nums}
.cijfer > span{display:block;font-size:var(--t-klein);margin-top:var(--s1)}
.punten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.punten div{border-top:var(--lijn-licht);padding-top:var(--s3)}
.punten h3{margin-bottom:var(--s1)}
.punten p{margin:0;font-size:var(--t-klein);line-height:var(--lh-klein)}

/* ===== Beat 8: Werkwijze ===== */
.werkwijze h2{margin-bottom:var(--s8)}
.route{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.spoor{position:absolute;left:0;right:0;top:calc(var(--s3) - 1px);height:2px;background:rgba(20,21,28,.12)}
.spoor i{position:absolute;inset:0;background:var(--kobalt);transform-origin:left center;transform:scaleX(var(--voortgang,1))}
.stap{position:relative;padding-top:var(--s8)}
.stap::before{content:attr(data-nr);position:absolute;top:0;left:0;width:var(--s6);height:var(--s6);border-radius:var(--r-pil);border:var(--lijn);background:var(--wit);display:flex;align-items:center;justify-content:center;font:800 var(--t-klein)/1 var(--kop);transition:background var(--snel) var(--ease)}
.stap.aan::before{background:var(--limoen)}
.stap h3{margin-bottom:var(--s1)}
.stap p{margin:0;color:var(--inkt-zacht)}
.maatwerk{margin-top:var(--s8);display:grid;grid-template-columns:1fr auto;gap:var(--s6);align-items:end;padding:var(--s6)}
.maatwerk-kop{font:800 var(--t-sectie)/var(--lh-sectie) var(--kop);letter-spacing:var(--strak);margin:0 0 var(--s3)}
.maatwerk p:not(.label):not(.maatwerk-kop){color:var(--inkt-zacht);max-width:640px}
.wettelijk{margin:var(--s3) 0 0;padding-top:var(--s3);border-top:var(--lijn-licht);font-size:var(--t-label);letter-spacing:.04em}
.wettelijk a{text-decoration:underline;text-underline-offset:4px}
.wettelijk a:hover{color:var(--limoen)}

/* ===== Beat 9: Over mij ===== */
.over{background:var(--ijsblauw)}
.over .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
.over h2{margin-bottom:var(--s4)}
.over .tekst p{color:var(--inkt-zacht)}
.feiten{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.feit{padding:var(--s3)}
.feit b{display:block;font:800 var(--t-tussen)/var(--lh-tussen) var(--kop);letter-spacing:var(--strak);margin-bottom:var(--s1)}
.feit span{font-size:var(--t-klein);line-height:var(--lh-klein);color:var(--inkt-zacht)}
.feit:nth-child(2){background:var(--inkt);color:var(--puur);border-color:var(--inkt)}
.feit:nth-child(2) span{color:var(--puur)}
.feit:nth-child(3){background:var(--limoen)}
.citaat{grid-column:1 / -1;margin:var(--s2) 0 0;font:500 var(--t-tussen)/var(--lh-tussen) var(--kop);letter-spacing:var(--strak);padding:var(--s4);border-radius:var(--r-kaart);background:var(--kobalt);color:var(--puur)}

/* ===== Beat 10: Op LinkedIn (posts en aanbevelingen) ===== */
.linkedin{background:var(--limoen);padding:var(--s8) 0}
.linkedin h2{margin-bottom:var(--s4)}
.posts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s3)}
.post-kaart a{height:100%;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);background:var(--puur);border:var(--lijn);border-radius:var(--r-kaart);text-decoration:none;transition:transform var(--snel) var(--ease)}
.post-kaart a:hover{transform:translateY(-2px)}
.post-meta{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--t-klein);color:var(--inkt-zacht)}
.post-meta b{font-weight:500;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--kobalt)}
.post-titel{font:500 var(--t-tussen)/var(--lh-tussen) var(--kop);letter-spacing:var(--strak)}
.post-tekst{font-size:var(--t-klein);line-height:var(--lh-klein);color:var(--inkt-zacht);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-lees{margin-top:auto;font-weight:500;font-size:var(--t-klein)}
.aanb{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4);padding-top:var(--s3);border-top:var(--lijn-dun)}
.aanb p{margin:0;font:500 var(--t-tussen)/var(--lh-tussen) var(--kop);letter-spacing:var(--strak)}
.knop-inkt{background:var(--inkt);color:var(--limoen)}
.knop-inkt:hover{background:var(--kobalt);color:var(--puur)}

/* ===== Beat 11: Kennismaken ===== */
.contact .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s8);align-items:center}
.contact .intro{color:var(--puur);margin:var(--s3) 0 var(--s4);max-width:560px}
.gegevens{margin:var(--s6) 0 0;padding:0;list-style:none;max-width:560px}
.gegevens li{display:grid;grid-template-columns:var(--s16) 1fr;align-items:baseline;padding:var(--s2) 0;border-top:var(--lijn-licht)}
.gegevens li:last-child{border-bottom:var(--lijn-licht)}
.gegevens span{font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--limoen)}
.gegevens a{text-decoration:none}
.gegevens a:hover{color:var(--limoen)}
.foto{position:relative;border-radius:var(--r-kaart);overflow:hidden;background:var(--limoen);aspect-ratio:1/1;max-width:432px;width:100%;margin-left:auto}
.foto img{position:absolute;left:0;bottom:0;width:100%;height:auto}

/* ===== Losse tekstpagina (privacyverklaring) ===== */
.document{padding:var(--s12) 0 var(--s16)}
.document .wrap{max-width:calc(720px + 2 * var(--gutter))}
.document h1{margin-bottom:var(--s4)}
.document h2{font-size:var(--t-tussen);line-height:var(--lh-tussen);margin:var(--s6) 0 var(--s2)}
.document p,.document li{color:var(--inkt-zacht)}
.document ul{padding-left:var(--s3);margin:0 0 var(--s2)}
.document a:not(.knop){color:var(--kobalt)}
.document .knop{margin-top:var(--s4)}
.document ol{padding-left:var(--s4);margin:0 0 var(--s2)}
.document ol li{margin-bottom:var(--s1);padding-left:var(--s1)}
.document ol li::marker{color:var(--kobalt);font-weight:500}
.document ul.kaal{list-style:none;padding-left:0}
.document h2{scroll-margin-top:var(--s12)}
.inhoud{margin:var(--s6) 0;padding:var(--s3) var(--s4);border:var(--lijn);border-radius:var(--r-kaart);background:var(--puur)}
.inhoud ol{columns:2;column-gap:var(--s6);margin:0}
.inhoud li{font-size:var(--t-klein);break-inside:avoid}
@media (max-width:640px){.inhoud ol{columns:1}}

/* ===== Footer ===== */
footer{background:var(--inkt);color:var(--puur);padding:var(--s8) 0 var(--s4);border-top:var(--lijn-licht)}
.woordmerk{font:800 var(--t-groot)/1 var(--kop);letter-spacing:var(--strak);margin:0 0 var(--s6)}
.voet{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:var(--t-klein)}
.voet a{text-decoration:none}
.voet a:hover{color:var(--limoen)}

/* ===== Tablet en telefoon ===== */
@media (max-width:960px){
  .menu li:not(.blijft){display:none}
  .alleen-mobiel{display:list-item}
  .menu{gap:var(--s1)}
  .binnenkomst .wrap,.herken .wrap,.scan .kop-rij,.scan-grid,.doen .kop-rij,.over .wrap,.contact .wrap{grid-template-columns:1fr;gap:var(--s6)}
  .veld{margin:0}
  .uitkomst{position:sticky;top:auto;bottom:var(--s2)}
  .kaarten{grid-template-columns:1fr}
  .kaarten .kaart:nth-child(3){grid-column:auto;grid-row:auto;padding:var(--s4)}
  .cijfers,.punten{grid-template-columns:1fr}
  .route{grid-template-columns:1fr;gap:var(--s6);padding-left:var(--s8)}
  .spoor{left:calc(var(--s3) - 1px);right:auto;top:0;bottom:0;width:2px;height:auto}
  .spoor i{transform-origin:center top;transform:scaleY(var(--voortgang,1))}
  .stap{padding-top:0}
  .stap::before{left:calc(-1 * var(--s8))}
  .maatwerk{grid-template-columns:1fr;padding:var(--s4);gap:var(--s3)}
  .maatwerk-kop{font-size:var(--t-tussen);line-height:var(--lh-tussen)}
    .foto{margin-left:0}
}
@media (max-width:640px){
  .nav{height:var(--s8)}
  .logo b{font-size:var(--t-klein)}
  .logo small{display:none}
  .menu li.blijft:not(.alleen-mobiel){display:none}
  .menu-knop{min-width:calc(var(--s12) + var(--s2));justify-content:center}
  .logo{flex:none}
  .veld{height:calc(6 * var(--s6) + var(--s2))}
  .taak{top:calc(var(--i) * var(--s6));padding:var(--s1) var(--s2)}
  .vragen li:nth-child(even){margin-left:var(--s3)}
  .tegels{grid-template-columns:1fr 1fr}
  .tegel{flex-direction:column;align-items:flex-start;min-height:var(--s12)}
  .uitkomst{padding:var(--s3)}
  .uitkomst .getal{font-size:var(--t-sectie)}
  .vn-kop{display:none}
  .vn-rij{grid-template-columns:1fr;gap:var(--s1)}
  .vn-lijn{width:2px;height:var(--s3);transform-origin:center top}
  .vn-nu::before{content:"Nu";display:block;font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--kobalt)}
  .feiten{grid-template-columns:1fr 1fr}
  .gegevens li{grid-template-columns:1fr}
  .linkedin{padding:var(--s6) 0}
  .post-kaart a{padding:var(--s3);gap:var(--s1)}
  .post-titel{font-size:var(--t-intro);line-height:var(--lh-tussen)}
  .post-tekst{-webkit-line-clamp:2}
  .aanb p{font-size:var(--t-intro)}
  .woordmerk{font-size:var(--t-sectie)}
}

/* ==========================================================
   Beweging per beat. Alleen met JavaScript en zonder
   "minder beweging"; anders staat alles direct goed.
   ========================================================== */
@media (prefers-reduced-motion:no-preference){
  /* Markeerstift veegt over het kernwoord */
  .js .mk::before{transform:scaleX(0);transition:transform var(--stift) var(--ease)}
  .js .mk-o::after{transform:scaleX(0);transition:transform var(--stift) var(--ease)}
  .js .in .mk::before,.js .in.mk::before{transform:none}
  .js .in .mk-o::after{transform:none}

  /* Beat 1: van chaos naar overzicht */
  .js .veld .taak{transition-delay:calc(var(--i) * var(--na-elkaar))}
  .js .veld:not(.orde) .taak{transform:translate(var(--cx),var(--cy)) rotate(var(--cr))}
  .js .veld:not(.orde) .taak i{background:var(--puur);color:transparent}

  /* Beat 2: de band loopt */
  .js .band-rij{animation:band 40s linear infinite}
  .band:hover .band-rij{animation-play-state:paused}

  /* Beat 3: vragen schuiven aan als in een gesprek */
  .js .vragen li{opacity:0;transform:translateX(calc(-1 * var(--s3)));transition:opacity var(--in) var(--ease),transform var(--in) var(--ease)}
  .js .vragen li.in{opacity:1;transform:none}

  /* Beat 5: van nu naar straks */
  .js .vn-lijn{transform:scaleX(0);transition:transform var(--in) var(--ease)}
  .js .vn-straks{opacity:0;transform:translateX(calc(-1 * var(--s2)));transition:opacity var(--in) var(--ease) var(--in),transform var(--in) var(--ease) var(--in)}
  .js .vn-rij.in .vn-lijn{transform:none}
  .js .vn-rij.in .vn-straks{opacity:1;transform:none}

  /* Beat 6: kaarten klikken op hun plek */
  .js .kaarten .kaart{opacity:0;transform:scale(.94);transition:opacity var(--in) var(--ease),transform var(--in) var(--ease)}
  .js .kaarten.in .kaart{opacity:1;transform:none}
  .js .kaarten.in .kaart:nth-child(2){transition-delay:var(--na-elkaar)}
  .js .kaarten.in .kaart:nth-child(3){transition-delay:calc(2 * var(--na-elkaar))}

  /* Beat 9: tegels kantelen in beeld */
  .js .feit{opacity:0;transform:rotate(-4deg) translateY(var(--s3));transition:opacity var(--in) var(--ease),transform var(--in) var(--ease)}
  .js .feit:nth-child(even){transform:rotate(4deg) translateY(var(--s3))}
  .js .feiten.in .feit{opacity:1;transform:none}
  .js .feiten.in .feit:nth-child(2){transition-delay:var(--na-elkaar)}
  .js .feiten.in .feit:nth-child(3){transition-delay:calc(2 * var(--na-elkaar))}
  .js .feiten.in .feit:nth-child(4){transition-delay:calc(3 * var(--na-elkaar))}
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){
  .js .vn-lijn{transform:scaleY(0)}
  .js .band-rij{animation-duration:56s}
}
@keyframes band{to{transform:translateX(-50%)}}