@font-face{font-family:Archivo;src:url('assets/archivo-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* ============================================================
   HET PALET. Dit is het enige blok dat wisselt als er een ander
   thema komt. Alles daaronder verwijst hiernaar en niets erbuiten
   noemt een kleur.

   Petrol op warm papier: de kleur van een werkbus, niet van een hotel.
   --accent       tekst en lijnen op de grond (6,9:1)
   --accent-vlak  vulling van een knop, met witte tekst erop (7,8:1)
   --accent-licht dezelfde familie op de donkere toon (7,1:1)
   ============================================================ */
:root{
  --grond:#f4f2ec;
  --vlak:#ffffff;
  --grond-diep:#e4e0d2;
  --lijn:#d6d2c4;
  --lijn-fijn:#e3dfd2;
  --inkt:#14140f;
  --inkt-zacht:#54534a;
  --inkt-vaag:#5c5a50;
  --accent:#1e5a66;
  --accent-vlak:#1e5a66;
  --accent-diep:#16454f;
  --accent-zacht:#e3eef0;
  --accent-licht:#5fb3c0;
  --knop-tekst:#ffffff;
  --straal:6px;
  --straal-groot:10px;
  --straal-telefoon:32px; /* alleen de telefoon om het gesprek; 32 is de schermhoek van de render op 236 px */
  --schaduw:0 20px 40px -28px rgba(20,20,15,.45);
  /* De derde toon. Donker waar we de lezer vasthouden: hoe het werkt, het slot.
     Tekst erop komt uit --grond, zodat het paar altijd bij elkaar hoort. */
  --donker:#1c1b16;
  --donker-vlak:#26251f;
  --donker-lijn:#3a3830;
  --donker-tekst:#f4f2ec;
  --donker-zacht:#c9c5b6;
  --donker-vaag:#9b978a;
  /* WhatsApp, alleen voor het gesprek met de Offertemachine: het kanaal moet
     eruitzien als het kanaal. iOS in de donkere stand, naar Nouts eigen
     screenshot (18 sept); de bel van jou en de tijdkleur zijn eruit gemeten.
     --wa-tekst op --wa-uit haalt 9,6:1, --wa-vaag op --wa-uit 5,3:1. */
  --wa-grond:#0b141a;   /* het scherm achter de bellen */
  --wa-kop:#1f2c34;     /* statusbalk, kop, invoerbalk */
  --wa-veld:#2a3942;    /* het invoerveld */
  --wa-in:#202c33;      /* bel van de Offertemachine */
  --wa-uit:#144d37;     /* bel van jou */
  --wa-tekst:#e9edef;
  --wa-vaag:#a1b8af;    /* tijd, bijschrift, golfje */
  --wa-vink:#53bdeb;
  --wa-groen:#25d366;   /* de microfoonknop */
  --wa-pdf:#c73a5d;     /* het pdf-icoon van iOS, een tint dieper: wit erop haalt 5,0:1 */
  /* De handgeschreven werkbon op /werkbon/: papier en balpen (offerte.css). */
  --bon-papier:#f2efe4;
  --bon-inkt:#26386b;
  --bon-inkt-door:#545e75;
  --bon-lijn:#c9cfdd;

  --gutter:clamp(20px,5vw,64px);
  --maat:1180px;
  --smal:40rem;
  --ease:cubic-bezier(.23,1,.32,1);
  --sc-canvas:var(--grond);--sc-surface:var(--vlak);
  --sc-ink:var(--inkt);--sc-ink-soft:var(--inkt-zacht);
  --sc-accent:var(--accent);--sc-accent-ink:var(--grond);
  --sc-font-display:Archivo,Arial,sans-serif;--sc-font-text:Archivo,Arial,sans-serif;
}

/* ---------- grondslag ---------- */
*{box-sizing:border-box}
/* Alleen voor de schermlezer: bijschrift bij een spraakbericht, tabel, sneltoetsen. */
.vh,.pr-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html{scroll-behavior:smooth;scroll-padding-top:88px;background:var(--grond)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--grond);color:var(--inkt);font-family:Archivo,Arial,sans-serif;
     font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
p{margin:0}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.032em;line-height:1.06;text-wrap:balance}
::selection{background:var(--accent-vlak);color:var(--knop-tekst)}
:root{accent-color:var(--accent);caret-color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--straal)}
[hidden]{display:none!important}
.binnen{max-width:var(--maat);margin:0 auto;padding:0 var(--gutter)}

.overslaan,.skip{position:fixed;top:-100px;left:20px;z-index:60;background:var(--accent-vlak);
  color:var(--grond);padding:13px 18px;border-radius:var(--straal)}
.overslaan:focus,.skip:focus{top:12px}

/* ---------- knop. Eén naam, één vorm, overal hetzelfde. ---------- */
.knop,.primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--accent-vlak);color:var(--knop-tekst);border:0;border-radius:var(--straal);
  padding:13px 22px;font-weight:700;font-size:16px;line-height:1.2;letter-spacing:-.01em;
  white-space:nowrap;transition:background .16s var(--ease),transform .16s var(--ease)}
.knop:hover,.primary:hover{background:var(--accent-diep);color:#fff}
.knop:active,.primary:active{transform:translateY(1px)}
.knop--klein{padding:9px 15px;font-size:14px;min-height:44px}
.knop--groot{padding:16px 28px;font-size:16px}
.tekstknop,.contact-link{display:inline-block;color:var(--accent);font-weight:600;font-size:14px;
  border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .16s var(--ease)}
.tekstknop:hover,.contact-link:hover{color:var(--inkt)}

/* ---------- 00 · bovenbalk ---------- */
.balk{position:sticky;top:0;z-index:50;background:var(--donker);color:var(--donker-tekst);border-bottom:1px solid var(--donker-lijn);
  transition:transform .3s var(--ease),background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
/* Omlaag scrollen: de balk schuift weg en de pagina krijgt de ruimte. Omhoog: hij komt terug. */
.balk.is-weg{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.balk{transition:none}}
/* Boven een licht blok wordt de balk papier met inkt (site.js zet is-licht). */
.balk.is-licht{background:var(--grond);color:var(--inkt);border-bottom-color:var(--lijn)}
.balk.is-licht .hoofdnav a{color:var(--inkt-zacht)}
.balk.is-licht .hoofdnav a:hover{color:var(--inkt)}
.balk.is-licht .talen a{color:var(--inkt-vaag)}
.balk.is-licht .talen a[aria-current]{color:var(--inkt)}
.balk.is-licht .talen a:hover{color:var(--accent)}
.balk-binnen{max-width:var(--maat);margin:0 auto;padding:0 var(--gutter);height:66px;
  display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.merk{display:flex;align-items:center;gap:9px;font-weight:700;font-size:20px;letter-spacing:-.04em;min-height:44px}
.merk svg{width:24px;height:24px;flex:none}
.hoofdnav{display:flex;gap:clamp(14px,2.2vw,30px);margin-left:auto;font-size:14px}
.hoofdnav a{color:var(--donker-zacht);padding:8px 0;font-weight:500;transition:color .15s var(--ease)}
.hoofdnav a:hover{color:var(--donker-tekst)}
.balk-rechts{display:flex;align-items:center;gap:12px;margin-left:auto}
.hoofdnav + .balk-rechts{margin-left:0}
.talen{display:inline-flex;align-items:center;font-size:12px;letter-spacing:.06em;font-weight:600}
/* 44px in het vierkant: NL en EN zijn twee tekens, dus zonder ondergrens is dit
   op een telefoon een tikdoel van 22 bij 35. */
.talen a{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;color:var(--donker-vaag)}
.talen a[aria-current]{color:var(--donker-tekst)}
.talen a:hover{color:var(--accent-licht)}
.voet .talen a{color:var(--inkt-vaag)}
.voet .talen a[aria-current]{color:var(--inkt)}
/* Het menu op een telefoon: een details/summary in de balk, alleen tot 820 px.
   De summary is drie streepjes van 44 bij 44; open staat de lijst als paneel
   onder de balk, in de kleur van de balk zelf (donker of papier, met is-licht). */
.menu{display:none}
@media(max-width:820px){
  .hoofdnav{display:none}.balk-rechts{margin-left:auto}
  .menu{display:block}
  .menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;border-radius:var(--straal)}
  .menu summary::-webkit-details-marker{display:none}
  /* de drie streepjes, en bij open een kruis: twee streepjes gedraaid, de middelste weg */
  .menu summary span{position:relative;width:20px;height:2px;background:currentColor;transition:background .15s var(--ease)}
  .menu summary span::before,.menu summary span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform .2s var(--ease)}
  .menu summary span::before{top:-6px}
  .menu summary span::after{top:6px}
  .menu[open] summary span{background:transparent}
  .menu[open] summary span::before{transform:translateY(6px) rotate(45deg)}
  .menu[open] summary span::after{transform:translateY(-6px) rotate(-45deg)}
  .menu-lijst{position:absolute;left:0;right:0;top:100%;display:grid;padding:8px var(--gutter) 16px;
    background:var(--donker);border-bottom:1px solid var(--donker-lijn)}
  .menu-lijst a{padding:12px 0;font-size:17px;font-weight:500;color:var(--donker-zacht);border-top:1px solid var(--donker-lijn)}
  .menu-lijst a:first-child{border-top:0}
  .balk.is-licht .menu-lijst{background:var(--grond);border-bottom-color:var(--lijn)}
  .balk.is-licht .menu-lijst a{color:var(--inkt-zacht);border-top-color:var(--lijn)}
  .menu-talen{display:none}
}
/* Onder 480 px: logo, menu en knop; de taalwissel verhuist naar het menu. */
@media(max-width:480px){
  .balk-rechts > .talen{display:none}
  .menu-talen{display:inline-flex;margin-top:8px;justify-content:flex-start}
  .menu-talen a{border-top:0;padding:0}
}

/* ---------- sectieritme. Meer lucht bóven een kop dan eronder. ---------- */
section{padding:clamp(54px,7vw,104px) 0 clamp(40px,5vw,72px)}
section + section{border-top:1px solid var(--lijn-fijn)}
.zo,.slot,.zo + section,.slot + section{border-top:0}
.sectiekop{margin-bottom:clamp(26px,3.4vw,44px);max-width:64ch}
.sectiekop h2,.herken h2,.slot h2{font-size:clamp(26px,3.9vw,42px)}
.sectiekop > p{margin-top:14px;font-size:clamp(16px,1.7vw,17px);line-height:1.6;color:var(--inkt-zacht);max-width:58ch}
.fijn{margin-top:clamp(20px,2.4vw,30px);font-size:14px;line-height:1.6;color:var(--inkt-vaag);max-width:64ch}
/* Het label boven de kop zegt wat voor soort blok het is; de kop wat erin staat. */
.label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.sectiekop .label{margin-bottom:12px}

/* ---------- 01 · eerste scherm. Links de zin, rechts het voorbeeld-oordeel. ---------- */
/* Op donker, als verlengde van de balk: het eerste scherm pakt meteen contrast en
   de lichte blokken erna lezen als het verhaal. */
.hero{padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(60px,7vw,110px);border-top:0;background:var(--donker);color:var(--donker-tekst)}
.hero .label{color:var(--accent-licht)}
.hero .tekstknop{color:var(--accent-licht)}
.hero .tekstknop:hover{color:var(--donker-tekst)}
.hero h1{font-size:clamp(34px,4.6vw,52px);letter-spacing:-.042em;line-height:1.02;max-width:17ch}
/* het vak op een eigen, kleinere regel boven de zin */
.vak-regel{display:block;font-size:.5em;font-weight:500;letter-spacing:-.01em;color:var(--donker-zacht);margin-bottom:.4em}
/* het wisselende woord: alle woorden staan er als spook op dezelfde plek, zodat
   de sleuf zo breed is als het langste en de zin niet verspringt (site.js) */
.wissel{display:inline-grid;overflow:hidden;vertical-align:bottom;color:var(--accent-licht)}
.wissel > span{grid-area:1/1;white-space:nowrap;transition:transform .55s var(--ease),opacity .4s ease}
.wissel > span[data-spook]{visibility:hidden}
.wissel > span[data-uit]{transform:translate3d(0,-105%,0);opacity:0}
.wissel > span[data-in]{transform:translate3d(0,105%,0);opacity:0;transition:none}
/* de snede: de kop komt woord voor woord onder een lijn vandaan (site.js knipt) */
.snede{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.snede:has(.vak-regel){display:block}
.snede > span{display:inline-block;transform:translate3d(0,110%,0);transition:transform .9s var(--ease);transition-delay:var(--wacht,0ms)}
.sc-in .snede > span{transform:none}
h1[data-sc-in]:has(.snede){opacity:1;transform:none}
html:not(.sc-ready) .snede > span{transform:none}
.hero-lede{margin-top:clamp(20px,2.6vw,30px);font-size:clamp(17px,1.9vw,20px);line-height:1.5;
  color:var(--donker-zacht);max-width:46ch}
.hero-acties{margin-top:clamp(26px,3.2vw,38px);display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.hero-naast{margin-top:18px;font-size:14px;color:var(--inkt-vaag);max-width:38ch;line-height:1.5}

/* ---------- de klus bovenaan /offertemachine/: het appje links, de offerte rechts eroverheen,
   met "3 minuten later" ertussen. Alleen bestaande kleuren, stralen en maten. ---------- */
.klus{display:grid;grid-template-columns:236px minmax(0,1fr);column-gap:22px;align-items:start;padding-top:14px}
.klus-chat{grid-area:1/1;color:var(--inkt);z-index:1;margin:0}
.klus-chat .chat-berichten li{max-width:92%}
/* In de kop stopt het gesprek bij de pdf: de offertekaart ernaast zegt al dat hij verstuurd is.
   In stap 1 staat het hele gesprek. */
.demo-kop .klus-chat .chat-berichten li:nth-last-child(-n+2){display:none}
.klus-tussen{grid-area:1/2;align-self:start;justify-self:center;margin:22px 0 0;z-index:2;padding:6px 12px;
  font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap;color:var(--knop-tekst);background:var(--accent-vlak);
  border-radius:var(--straal-groot);box-shadow:var(--schaduw)}
/* Het blad: een vel papier, kleine straal, dezelfde schaduw als de rest. Het is
   hoger dan de ruimte; onderin loopt de tekst weg in het wit (de fade op
   .pdf-vel) en daaronder staat de verstuurd-regel. Zo zie je de eerste
   bladzijde zoals lab/offerte-voorbeeld.html hem op A4 opmaakt, en dat er meer is. */
.klus-offerte{grid-area:1/2;position:relative;margin-top:40px;max-height:494px;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;
  color:var(--inkt);background:var(--vlak);border-radius:var(--straal);box-shadow:var(--schaduw);font-size:12px;line-height:1.45}
.pdf-vel{position:relative;min-height:0;overflow:hidden;padding:16px 22px 0;font-size:12px;line-height:1.4}
.pdf-vel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(transparent,var(--vlak))}
.pdf-kop{display:flex;align-items:center;gap:10px}
.pdf-kop div{display:grid;line-height:1.3;min-width:0}
.pdf-kop b{font-size:14px;letter-spacing:-.01em;white-space:nowrap}
.pdf-kop small{font-size:12px;color:var(--inkt-vaag);white-space:nowrap}
.klus-logo{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--straal);background:var(--accent-vlak);color:var(--knop-tekst);font-weight:700}
/* "Offerte" groot met nummer en datum ernaast, zoals bovenaan het A4 */
.pdf-titel{display:flex;align-items:baseline;gap:18px;margin-top:10px;padding-top:10px;border-top:1px solid var(--lijn)}
.pdf-naam{margin:0;font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1}
.pdf-meta{display:flex;gap:16px;margin:0 0 0 auto}
.pdf-meta div,.klus-aan div{display:grid;gap:2px;align-content:start}
.pdf-meta dd{margin:0;white-space:nowrap}
.klus-aan{display:grid;grid-template-columns:auto 1fr;gap:14px;margin:10px 0 0;line-height:1.4}
.pdf-meta dt,.klus-aan dt,.klus-regels th{color:var(--inkt-vaag);font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.klus-aan dd{margin:0;color:var(--inkt)}
.pdf-brief{margin:10px 0 0;color:var(--inkt)}
.klus-regels{width:100%;margin-top:8px;border-collapse:collapse}
.klus-regels th,.klus-regels td{padding:3px 0;text-align:left;border-bottom:1px solid var(--lijn-fijn)}
.klus-regels th{border-bottom-color:var(--lijn)}
.klus-regels th:not(:first-child),.klus-regels td:not(:first-child){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:14px}
.klus-regels tfoot td{padding:2px 0;border-bottom:0;color:var(--inkt-zacht)}
.klus-regels tfoot tr:first-child td{padding-top:6px}
.klus-regels .klus-totaal td{padding-top:5px;border-top:1px solid var(--accent);font-weight:700;font-size:14px;color:var(--inkt)}
.klus-voet{position:relative;z-index:1;margin:0;padding:10px 22px;font-size:12px;color:var(--accent);background:var(--accent-zacht)}
@media(max-width:900px){
  .klus{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:0;max-width:440px;justify-items:center}
  .klus-chat{margin:0}
  .klus-chat,.klus-tussen,.klus-offerte{grid-area:auto}
  .klus-tussen{margin:0;align-self:auto;justify-self:center}
  .klus-offerte{margin-top:0;width:100%}
}
/* Het voorbeeld heeft precies de vorm van het echte oordeel: dezelfde klassen,
   dezelfde blokken. Alleen het bedrijf is verzonnen, en dat staat erbij. */
.voorbeeld{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--straal-groot);padding:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--schaduw)}
.voorbeeld-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;
  color:var(--inkt-vaag);font-weight:600;letter-spacing:.02em}
.voorbeeld-tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  border:1px solid currentColor;border-radius:var(--straal);padding:2px 7px;flex:none}
.voorbeeld .verdict-blok ul{padding-left:18px}
/* Iets kleiner gezet dan het echte oordeel: het is een venster, geen leesstuk. */
.voorbeeld .verdict-bevinding{font-size:16px}
.voorbeeld .verdict-blok{padding-top:11px}
.voorbeeld .verdict-blok h3{margin-bottom:5px}
.voorbeeld .verdict-blok p,.voorbeeld .verdict-blok li{font-size:14px;line-height:1.5}
.voorbeeld .conflict{margin-bottom:0}
@media(max-width:900px){.voorbeeld .verdict-blok:nth-of-type(n+2){display:none}}
.voorbeeld-noot{font-size:12px;line-height:1.5;color:var(--inkt-vaag);padding-top:12px;border-top:1px solid var(--lijn-fijn)}

/* ---------- 02b · drie getallen, groot, op wit ---------- */
.getallen{background:var(--vlak);padding:clamp(40px,5vw,72px) 0}
.getallen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
@media(max-width:700px){.getallen-grid{grid-template-columns:1fr;gap:26px}}
.getallen b{display:block;font-size:clamp(40px,5.2vw,64px);white-space:nowrap;line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--accent)}
.getallen span{display:block;margin-top:10px;font-size:16px;line-height:1.5;color:var(--inkt-zacht);max-width:28ch}

/* ---------- 08b · wie er achter zit ---------- */
.wie{background:var(--grond-diep)}
.wie-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:820px){.wie-grid{grid-template-columns:1fr}.wie-foto{max-width:240px}}
.wie h2{font-size:clamp(26px,3.9vw,42px);margin-bottom:clamp(18px,2.4vw,26px)}
.wie-tekst p{font-size:17px;line-height:1.62;color:var(--inkt-zacht);max-width:58ch;margin-top:14px}
.wie-tekst p:first-of-type{color:var(--inkt)}
.wie-foto{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--straal-groot)}

/* ---------- 02 · herkenning. Links nu (vier schermpjes), rechts straks. ---------- */
.herken{background:var(--grond-diep)}
.herken .sectiekop-tekst{max-width:var(--smal);margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--inkt-zacht)}
/* vier rijen nu → straks; de kolomkoppen staan boven de eerste rij */
.herken-rijen{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;gap:12px}
.herken-rijen li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(16px,2.4vw,32px);align-items:start;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--straal-groot);padding:clamp(14px,1.8vw,20px) clamp(16px,2.2vw,24px)}
.herken-rijen p{margin:0;font-size:16px;line-height:1.45}
.herken-nu{color:var(--inkt-zacht);padding-left:24px;position:relative}
.herken-nu::before{content:"×";position:absolute;left:1px;top:-1px;font-size:20px;line-height:1.15;font-weight:700;color:var(--inkt-vaag)}
.herken-straks{color:var(--inkt);padding-left:24px;position:relative}
.herken-straks::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--accent)}
.herken-product{grid-column:2;justify-self:start;margin:8px 0 0 24px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.herken-product::after{content:" →"}
@media(max-width:640px){.herken-rijen li{grid-template-columns:1fr;gap:8px}.herken-product{grid-column:1}}

/* ---------- 03 · wat we bouwen. Vier kaarten, de stroom bovenin als het ding om naar te kijken. ---------- */
.werken{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
@media(max-width:760px){.werken{grid-template-columns:1fr}}
.werk{padding:clamp(20px,2.6vw,28px);background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--straal-groot);
  display:flex;flex-direction:column}
.werk h3{font-size:20px;letter-spacing:-.022em;margin-top:0}
.svc-prijs{margin-top:14px;font-size:17px;font-weight:600;color:var(--inkt)}
.svc-prijs .tekstknop{margin-left:6px;font-size:14px}
.werk-inbegrepen{margin-top:12px}
.werk .werk-stroom{margin-top:14px;padding-top:14px;border-top:1px solid var(--lijn-fijn)}
/* Wat het ding doet, in een adem te lezen; daaronder de vakken waarin de
   bezoeker zichzelf herkent. Die twee dragen de kaart, de rest is detail. */
.werk-doet{margin-top:7px;font-size:16px;line-height:1.5;color:var(--inkt-zacht);max-width:38ch}
.werk-voor{margin-top:9px;font-size:12px;letter-spacing:.045em;text-transform:uppercase;
  color:var(--inkt-vaag);font-weight:600}
.werk-stroom{margin-top:13px;font-size:14px;line-height:1.6;color:var(--inkt-zacht)}
.werk-stroom.is-stappen{display:flex;flex-wrap:wrap;gap:5px 9px}
.werk-stroom .stap-tekst{white-space:nowrap}
.werk-stroom .stap-pijl{color:var(--accent)}
.werk-prijs{margin-top:13px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.werk-inbegrepen{font-size:14px;color:var(--inkt-vaag);margin-top:2px}
.werk .tekstknop{margin-top:auto;padding-top:11px;align-self:flex-start}
/* de op-maat-kaart: over de volle breedte, op de diepe grond in plaats van wit,
   zodat hij als "en verder" leest en niet als vijfde product. Eén noot van Nout:
   foto links, de vraag met het wisselende onderwerp, de knop rechts. */
.werk--maat{grid-column:1/-1;background:var(--grond-diep);display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,2.6vw,36px);align-items:center}
.maat-foto{width:84px;height:84px;object-fit:cover;object-position:50% 20%;border-radius:50%}
.werk--maat h3{margin-top:0}
.werk--maat .wissel{color:var(--accent)}
.werk--maat .werk-doet{max-width:52ch}
.maat-van{margin:10px 0 0;font-size:14px;color:var(--inkt-vaag)}
.werk--maat .knop{white-space:nowrap}
@media(max-width:760px){.werk--maat{grid-template-columns:auto minmax(0,1fr);align-items:start}.maat-foto{width:56px;height:56px}.werk--maat .knop{grid-column:1/-1;justify-self:start}}
/* ---------- zo gebruik je het: telefoon links, dashboard rechts ---------- */
.gebruik{padding:clamp(56px,7vw,104px) 0}
.gebruik-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(26px,3.4vw,44px)}
.gebruik-tekst{display:grid;gap:22px;justify-items:start}
/* de dag: drie momenten aan een rail, de tijd als label erboven */
.dag{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.dag li{position:relative;padding-left:30px;display:grid;gap:3px;font-size:16px;line-height:1.5}
.dag li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--grond);border:3px solid var(--accent);box-sizing:border-box}
.dag li:last-child::before{background:var(--accent)}
.dag li:not(:last-child)::after{content:"";position:absolute;left:5px;top:22px;bottom:-20px;border-left:2px dashed var(--lijn)}
.dag time{font-size:12px;font-weight:700;letter-spacing:.045em;color:var(--accent);font-variant-numeric:tabular-nums}
.dag b{font-size:17px;letter-spacing:-.01em}
.dag span{color:var(--inkt-zacht)}
/* de laptop vult de kolom; op een telefoon valt de foto weg (zie .mac-mock hieronder) */
.apparaten{position:relative}
@media(max-width:900px){.gebruik-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.gebruik-grid{grid-template-columns:1fr}}
/* Het gesprek: één kaart, berichten als bellen. De .wa-variant (sinds 18 sept)
   ziet eruit als WhatsApp zelf: groene kop, beige grond, groene bel voor jou. */
.chat{margin:0;background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--straal-groot);box-shadow:var(--schaduw);overflow:hidden}
.chat-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--lijn-fijn);font-size:12px;font-weight:600;color:var(--inkt-vaag);letter-spacing:.02em}
.chat-berichten{list-style:none;margin:0;padding:16px;display:grid;gap:8px;background:var(--grond)}
.chat-berichten li{position:relative;max-width:86%;padding:9px 12px 20px;border-radius:var(--straal-groot);font-size:14px;line-height:1.45}
.chat-jij{justify-self:end;background:var(--accent-zacht);color:var(--inkt);border-bottom-right-radius:var(--straal)}
.chat-systeem{justify-self:start;background:var(--vlak);border:1px solid var(--lijn-fijn);color:var(--inkt);border-bottom-left-radius:var(--straal)}
.chat-berichten time{position:absolute;right:11px;bottom:5px;font-size:12px;color:var(--inkt-vaag)}
.chat-foto{display:block;height:74px;margin:-2px -4px 8px;border-radius:var(--straal);background:var(--grond-diep);
  border:1px dashed var(--lijn)}
.wa-kop{background:var(--wa-kop);color:var(--wa-tekst);border-bottom:0;padding:6px 12px 10px 8px;justify-content:flex-start;gap:8px}
.wa-kop .wa-naam{flex:1}
.wa-terug{flex:none;display:inline-flex;align-items:center}
/* Terug-pijl met het aantal ongelezen erin, zoals iOS hem toont. */
.wa-terug{gap:4px;padding:5px 8px 5px 6px;border:1px solid var(--wa-vaag);border-radius:var(--straal-telefoon);font-size:14px;font-weight:400}
.wa-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--inkt);color:var(--wa-tekst);display:grid;place-items:center;overflow:hidden}
.wa-avatar svg{width:24px;height:15px}
.wa-naam{display:grid;line-height:1.25;min-width:0}
.wa-naam b{font-size:14px;font-weight:600;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-naam small{font-size:12px;font-weight:400;color:var(--wa-vaag)}
.wa-berichten{background:var(--wa-grond);gap:6px;color:var(--wa-tekst)}
.wa-berichten .chat-jij{background:var(--wa-uit);color:var(--wa-tekst);border-bottom-right-radius:var(--straal-groot)}
.wa-berichten .chat-systeem{border:0;background:var(--wa-in);color:var(--wa-tekst);border-bottom-left-radius:var(--straal-groot)}
/* Het staartje onderaan de bel, aan de kant waar hij vandaan komt. Het vult ook
   de ronde hoek op, zodat die kant recht wordt zonder een extra straalwaarde. */
.wa-berichten .chat-jij::after,.wa-berichten .chat-systeem::after{content:"";position:absolute;bottom:0;width:18px;height:12px;background:inherit}
.wa-berichten .chat-jij::after{right:-8px;clip-path:polygon(0 0,55% 0,100% 100%,0 100%)}
.wa-berichten .chat-systeem::after{left:-8px;clip-path:polygon(45% 0,100% 0,100% 100%,0 100%)}
.wa-berichten time{display:inline-flex;gap:3px;align-items:center;color:var(--wa-vaag)}
.wa-vink{color:var(--wa-vink);letter-spacing:-.25em;margin-right:.25em}
/* Het spraakbericht: afspeelknop, golfje, duur. Precies de vorm die hij kent. */
.wa-spraak{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:min(92%,300px);padding-bottom:22px}
.wa-play{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--wa-tekst)}
.wa-golf{display:flex;align-items:center;gap:2px;height:26px}
.wa-golf i{flex:1;max-width:4px;height:var(--h);min-height:3px;border-radius:var(--straal);background:var(--wa-vaag)}
.wa-duur{font-size:12px;color:var(--wa-vaag);font-variant-numeric:tabular-nums}
/* De offerte als bijlage: de eerste bladzijde als wit vlak bovenin de bel, daaronder
   het pdf-icoon met naam en grootte, zoals iOS een document toont. */
.wa-berichten .wa-doc-bel{padding:4px 4px 20px}
.wa-berichten .wa-doc-bel .wa-doc-tekst{display:block;padding:6px 8px 0}
.wa-blad{display:grid;gap:5px;height:72px;padding:12px 12px 0;overflow:hidden;border-radius:var(--straal);background:var(--vlak);color:var(--inkt)}
.wa-blad b{font-size:12px;line-height:1.2;padding-bottom:3px;border-bottom:1px solid var(--inkt)}
.wa-blad i{display:block;height:3px;border-radius:var(--straal);background:var(--lijn);width:var(--w,100%)}
.wa-doc{display:flex;gap:10px;align-items:center;padding:8px 8px 4px}
.wa-doc-icoon{flex:none;display:grid;place-items:center;width:30px;height:36px;border-radius:var(--straal);background:var(--wa-pdf);color:var(--knop-tekst);
  font-size:12px;font-weight:700;letter-spacing:.04em}
.wa-doc span:last-child{display:grid;line-height:1.3;min-width:0}
.wa-doc b{font-weight:400;overflow-wrap:anywhere}
.wa-doc small{font-size:12px;color:var(--wa-vaag)}
/* Op het scherm van de telefoon: statusbalk in de kleur van de kop, het eiland,
   onderaan de invoerbalk en de thuisbalk. Het gesprek hangt onderaan, zoals in
   WhatsApp; wat niet past valt bovenaan weg. */
.wa-mock .scherm{background:var(--wa-grond);box-shadow:none;border:0}
/* De render is zilver met witte lichtvlekken op de hoeken; bij het donkere scherm hoort een donkere rand. */
.wa-mock > img{filter:brightness(.38) contrast(1.15)}
/* Gezet op 320 px, de breedte van een echte telefoon, en door site.js geschaald naar het schermvak. */
.wa-mock .schaal{width:320px;height:calc(100% / var(--s,1));display:flex;flex-direction:column;transform-origin:0 0;transform:scale(var(--s,1))}
.tel-mock.wa-mock .tel-status{background:var(--wa-kop);color:var(--wa-tekst)}
.wa-mock .wa-berichten{flex:1;min-height:0;align-content:end;overflow:hidden}
.wa-mock .wa-invoer{padding-bottom:22px}
.tel-status{position:relative;display:flex;justify-content:space-between;align-items:center;padding:12px 24px 2px 28px;
  background:var(--wa-kop);color:var(--wa-tekst);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.tel-eiland{position:absolute;left:50%;top:9px;width:86px;height:24px;transform:translateX(-50%);background:var(--inkt);border-radius:var(--straal-telefoon)}
.tel-iconen{display:inline-flex;align-items:center;gap:5px}
/* De invoerbalk van iOS: plus, leeg veld met sticker-icoon, camera, groene microfoon. */
.wa-invoer{display:flex;align-items:center;gap:12px;padding:8px 12px 6px;background:var(--wa-kop);color:var(--wa-tekst)}
.wa-veld{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;height:36px;padding:0 12px;background:var(--wa-veld);border-radius:var(--straal-telefoon);color:var(--wa-vaag)}
.wa-mic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--wa-groen);color:var(--wa-grond)}
.tel-thuis{display:block;width:110px;height:5px;margin:4px auto 6px;background:var(--wa-tekst);border-radius:var(--straal)}
.wa-berichten{padding:12px 14px}
.dash{margin:0;background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--straal-groot);box-shadow:var(--schaduw);overflow:hidden}
.dash-rijen{list-style:none;margin:0;padding:0}
.dash-rijen li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--lijn-fijn);font-size:14px}
.dash-rijen b{font-weight:600}
.dash-rijen span{color:var(--inkt-zacht)}
.dash-rijen i{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  padding-left:14px;position:relative}
.dash-rijen i::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--accent-licht)}
@media(max-width:600px){
  .dash-rijen li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .dash-rijen b{grid-row:1;grid-column:1}
  .dash-rijen i{grid-row:1;grid-column:2}
  .dash-rijen span{grid-row:2;grid-column:1/-1}
}
.dash-kop div{display:grid;line-height:1.3}
.dash-kop div span{font-size:12px;font-weight:400;color:var(--inkt-vaag)}
.dash-wacht{padding:12px 16px 14px;background:var(--accent-zacht)}
.dash-wacht-kop{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.dash-wacht ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.dash-wacht li{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;font-weight:600}
.dash-voet{display:flex;justify-content:space-between;gap:12px;margin:0;padding:10px 16px;font-size:12px;color:var(--inkt-vaag)}
.dash-voet span:last-child{font-weight:700;color:var(--inkt)}
.dash-knop{flex:none;background:var(--accent-vlak);color:var(--knop-tekst);border-radius:var(--straal);padding:7px 12px;font-weight:700;font-size:14px}
/* Anderhalve seconde nadat "wacht op jou" in beeld is, wordt het eerste akkoord gegeven:
   de knop wordt een vinkje op wit (site.js zet is-klaar). Binnenkomen, meer niet. */
.dash-knop{transition:background .35s var(--ease),color .35s var(--ease)}
.is-klaar .dash-knop{background:var(--vlak);color:var(--accent)}
.is-klaar .dash-knop::before{content:"\2713\00a0"}
/* De mockups: een foto van het apparaat (assets/mockup/, achtergrond weggeknipt) met
   het scherm als absoluut vak erop, opgemeten in procenten van de foto. De inhoud
   is echte HTML: dash.html, dus vertaald en bij te werken op één plek. */
.mockup{position:relative}
.mockup img{display:block;width:100%;height:auto}
.mockup .scherm{position:absolute;overflow:hidden;background:var(--vlak)}
/* Deksel en voet (19 sept): het deksel is de render tot de scharnierlijn, de voet de
   rest. Het deksel staat dicht (90 graden naar voren, scherm gedimd) en klapt open
   zodra het dashboard in beeld is (.is-open, uit de waarnemer onderaan site.js). Zonder script of met "minder
   beweging" staat hij open. Het schermvak is opgemeten binnen het deksel.
   Camera (21 sept, naar de referentievideo): ver weg en iets van boven, zodat het
   dichte deksel als dunne plaat op de voet ligt en het scherm bij het openklappen
   even breed blijft als de voet in plaats van naar de kijker te vallen. De voorkant
   is een eigen laag met backface-visibility, de ::after is de achterkant. */
.mac-mock{perspective:9000px;perspective-origin:50% -64%}
.mac-deksel{position:relative;z-index:2;aspect-ratio:1068/598;transform-origin:50% 100%;transform-style:preserve-3d;
  transform:rotateX(-90deg);transition:transform 1.4s var(--ease) .1s}
.mac-voorkant{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden}
.mac-deksel::after{content:"";position:absolute;inset:0 .3%;border-radius:2.4% / 4.3%;background:var(--inkt);
  transform:rotateY(180deg);backface-visibility:hidden}
.mac-deksel .scherm{filter:brightness(.35);transition:filter 1.4s var(--ease) .1s}
.mac-mock.is-open .mac-deksel{transform:none}
.mac-mock.is-open .mac-deksel .scherm{filter:none}
html:not(.sc-ready) .mac-deksel{transform:none}
html:not(.sc-ready) .mac-deksel .scherm{filter:none}
/* Op de scroll (21 sept): waar de browser scroll-tijdlijnen kent, hangt het deksel aan
   de scrollpositie in plaats van aan de waarnemer. De tijdlijn is de voet, dus de
   scharnierlijn: helemaal dicht (90 graden, de plaat ligt nog net onder de rand) als
   die onderaan in beeld komt, open als hij een derde van het scherm omhoog is;
   terugscrollen klapt hem weer dicht. Een animatie wint van .is-open, dus de
   waarnemer mag blijven als vangnet voor browsers zonder view-timeline. Het scherm
   licht pas op in de tweede helft, zoals in de referentie. */
@supports (animation-timeline:view()){
  .mac-voet{view-timeline:--laptop block}
  .mac-mock{timeline-scope:--laptop}
  .mac-deksel{animation:mac-open linear both;animation-timeline:--laptop;animation-range:entry 0% cover 35%}
  .mac-deksel .scherm{animation:mac-scherm linear both;animation-timeline:--laptop;animation-range:entry 0% cover 35%}
  @keyframes mac-open{from{transform:rotateX(-90deg)}to{transform:none}}
  @keyframes mac-scherm{0%,40%{filter:brightness(.1)}to{filter:none}}
}
.mac-voet{position:relative;z-index:1;aspect-ratio:1068/46;overflow:hidden}
.mac-voet img{margin-top:-56%}/* 598/1068: een procent-marge rekent met de breedte; zo schuift de foto op tot de scharnierlijn */
.mac-mock .scherm{left:10.02%;top:6.89%;width:80.06%;height:89.28%}
.mac-mock .schaal{width:640px;transform-origin:0 0;transform:scale(var(--s,1))}
.mac-mock .dash{border:0;border-radius:0;box-shadow:none}
.mac-mock .dash-rijen li{padding:9px 16px}
.mac-mock .dash-wacht{padding:10px 16px 12px}
.browser{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--grond);border-bottom:1px solid var(--lijn-fijn)}
.browser span{width:9px;height:9px;border-radius:50%;background:var(--lijn)}
.browser i{flex:1;margin-left:8px;padding:4px 10px;font-style:normal;font-size:12px;color:var(--inkt-vaag);background:var(--vlak);border-radius:var(--straal);text-align:center}
.tel-mock{width:236px}
.tel-mock .scherm{left:5.2%;top:2.08%;width:89.8%;height:95.73%;border-radius:var(--straal-telefoon)}
.tel-mock .tel-thuis{position:absolute;left:50%;bottom:7px;margin:0 0 0 -55px}
.tel-mock .tel-status{padding:11px 20px 2px 22px;background:var(--vlak);color:var(--inkt)}
.tel-mock .tel-eiland{width:27%;height:22px;top:10px}
/* Op een telefoon zou het laptopscherm 4 px-letters geven: daar valt de laptop weg
   en staat het dashboard als gewone kaart. transform:none wint van de --s uit schaal.js. */
@media(max-width:600px){.mac-mock img,.mac-mock .browser,.mac-voet{display:none}.mac-mock .scherm{position:static;width:auto;height:auto;overflow:visible;background:none}
  .mac-deksel{aspect-ratio:auto;transform:none;transition:none;animation:none}.mac-voorkant{position:static;overflow:visible}.mac-deksel::after{display:none}.mac-deksel .scherm{filter:none;transition:none;animation:none}
  .mac-mock .schaal{width:auto;transform:none}
  .mac-mock .dash{border:1px solid var(--lijn);border-radius:var(--straal-groot);box-shadow:var(--schaduw)}}
.omgeving-regel{margin-top:clamp(22px,2.6vw,30px);font-size:16px;line-height:1.6;
  color:var(--inkt-zacht);max-width:60ch}
.omgeving-regel .tekstknop{margin-left:4px}

/* ---------- 05 · de AI-scan. Eén kaart die over de rand hangt. ---------- */
.proberen{background:var(--grond-diep);padding-top:clamp(64px,8vw,120px)}
.scan-kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--straal-groot);padding:clamp(20px,3vw,40px);
  box-shadow:var(--schaduw);margin-top:-8px}
.scan-h1{font-size:clamp(30px,4.6vw,50px)}
.scan-kaart{max-width:820px;margin-left:auto;margin-right:auto}
.proberen .sectiekop{max-width:820px;margin-left:auto;margin-right:auto}
.proberen .fijn{max-width:820px;margin-left:auto;margin-right:auto}
.scan-krijgt{list-style:none;margin:0 auto clamp(18px,2.4vw,26px);padding:0;max-width:820px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px}
@media(max-width:760px){.scan-krijgt{grid-template-columns:1fr 1fr}}
.scan-krijgt li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--inkt-zacht)}
.scan-krijgt li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:700;color:var(--accent)}
/* voortgang */
.scan-voortgang{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-vaag)}
.scan-stapnr b{color:var(--accent)}
.scan-stapnr i{font-style:normal}
.scan-balk{flex-basis:100%;height:5px;border-radius:var(--straal);background:var(--grond-diep);overflow:hidden}
.scan-balk i{display:block;height:100%;background:var(--accent-vlak);border-radius:var(--straal);transition:width .35s var(--ease)}
.veld--fax{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* de stappen */
.scan-form{display:flex;flex-direction:column;gap:18px;max-width:none;margin-top:22px}
.stap{border:0;margin:0;padding:0;min-width:0}
/* Alleen de scanstappen: /offertemachine/ en /werkbon/ hebben ook section.stap (19 sept: tel.js zet daar sc-ready, en toen waren de voorbeelden weg). */
html.sc-ready .scan-form .stap:not(.is-actief){display:none}
.stap legend{padding:0;margin-bottom:16px;display:flex;flex-direction:column;gap:4px}
.stap-kop{font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.stap-tekst{font-size:14px;color:var(--inkt-zacht);line-height:1.5}
.stap-velden{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;max-width:620px}
@media(max-width:560px){.stap-velden{grid-template-columns:1fr}}
.stap-velden--drie{grid-template-columns:1fr 1.4fr 1fr;max-width:none}
@media(max-width:700px){.stap-velden--drie{grid-template-columns:1fr}}
.veld input::placeholder{color:var(--inkt-vaag);opacity:.7}
.stap-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.stap-tegels label{position:relative;display:flex;align-items:center;min-height:48px;padding:12px 14px;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--straal);font-size:16px;font-weight:600;color:var(--inkt-zacht);cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.stap-tegels label:hover{border-color:var(--inkt-vaag);color:var(--inkt)}
.stap-tegels input{position:absolute;opacity:0;width:1px;height:1px}
.stap-tegels label:has(:checked){border-color:var(--accent);background:var(--accent-zacht);color:var(--inkt)}
.stap-tegels label:has(:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.veld{display:flex;flex-direction:column;gap:5px}
.veld span{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--inkt-vaag);font-weight:600}
.veld input{background:transparent;border:0;border-bottom:1px solid var(--inkt-vaag);color:var(--inkt);
  font-family:inherit;font-size:17px;padding:8px 0;transition:border-color .15s var(--ease)}
.veld input:focus{outline:none;border-bottom-color:var(--accent)}
.veld--anders{margin-top:14px;max-width:300px}
/* de processtroom op de productkaarten */
.stroom-stap{display:inline-flex;gap:7px;align-items:baseline;margin-right:14px}
.stroom-stap b{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.04em}
.scan-knoppen{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.scan-terug{background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 1px;min-height:0}
.scan-status{font-size:14px;color:var(--accent);min-height:1.2em}
/* het oordeel in de kaart */
.scan-uit{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.scan-uit .knop{align-self:flex-start}
.vervolg{margin-top:8px;padding:clamp(18px,2.4vw,24px);background:var(--accent-zacht);border-radius:var(--straal-groot);display:flex;flex-direction:column;gap:10px}
.vervolg h3{font-size:20px;letter-spacing:-.02em}
.vervolg p{font-size:14px;line-height:1.55;color:var(--inkt-zacht)}
.routes{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:4px}
.routes .tekstknop{background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 1px;min-height:0}
.brug-uit{font-size:16px;line-height:1.55;color:var(--inkt);padding-top:14px;border-top:1px solid var(--lijn-fijn)}
.brug-uit .tekstknop{margin-left:6px}
.faq--los{margin-top:clamp(26px,3.4vw,44px);max-width:820px;margin-left:auto;margin-right:auto}

/* het oordeel dat de scan terugschrijft; het voorbeeld in de hero gebruikt dezelfde klassen */
.verdict-bevinding{font-size:17px;line-height:1.5;letter-spacing:-.015em;color:var(--inkt)}
.verdict-blok{padding-top:14px;border-top:1px solid var(--lijn-fijn)}
.verdict-blok h3{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--inkt-vaag);font-weight:700;margin-bottom:8px}
.verdict-blok p,.verdict-blok li{font-size:16px;line-height:1.6;color:var(--inkt-zacht)}
.verdict-blok ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.verdict-blok b{color:var(--inkt)}
.conflict{margin-bottom:11px}
.conflict .waarde{display:inline-block;background:var(--accent-zacht);color:var(--inkt);
  border-radius:var(--straal);padding:2px 7px;margin:4px 6px 0 0;font-size:14px}
.conflict .bron{font-size:12px;color:var(--inkt-vaag);margin-top:4px}
.skelet{display:flex;flex-direction:column;gap:15px}
.skelet-blok,.skelet-bevinding{display:flex;flex-direction:column;gap:8px}
.skelet-regel{height:11px;border-radius:var(--straal);background:var(--grond-diep);
  animation:pols 1.5s var(--ease) infinite}
.skelet-regel:last-child{width:62%}
@keyframes pols{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.skelet-regel{animation:none;opacity:.7}}

/* ---------- 07 · hoe het werkt. Op donker, drie genummerde kaarten. ---------- */
.zo{background:var(--donker);color:var(--donker-tekst)}
.zo .sectiekop > p,.zo .trede-duur{color:var(--donker-zacht)}
/* Op donker haalt het diepe petrol de drempel niet; het lichte (--accent-licht) wel (7,1:1). */
.zo .label,.slot .label{color:var(--accent-licht)}
.treden{position:relative;list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,2vw,24px)}
.treden::before{content:"";position:absolute;left:0;right:0;top:calc(clamp(20px,2.6vw,28px) + 8px);height:1px;background:var(--donker-lijn)}
@media(max-width:600px){.treden::before{display:none}}
.treden li{position:relative;background:var(--donker-vlak);border:1px solid var(--donker-lijn);border-radius:var(--straal-groot);padding:clamp(20px,2.6vw,28px)}
.trede-nr{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent-licht);display:block;margin-bottom:14px}
.treden h3{font-size:20px;letter-spacing:-.02em}
.trede-duur{margin:0 0 6px;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--accent-licht)}
.treden h3{color:var(--donker-tekst)}
.treden li > p:last-child{margin-top:11px;font-size:16px;line-height:1.6;color:var(--donker-zacht);max-width:40ch}

/* ---------- 08 en 10 · opsommingen in prosa ---------- */
.punten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;max-width:66ch}
.punten li{position:relative;padding-left:21px;font-size:16px;line-height:1.6;color:var(--inkt-zacht)}
.punten li::before{content:"";position:absolute;left:0;top:.68em;width:10px;height:1.5px;background:var(--accent-vlak)}
.bezit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:860px){.bezit-grid{grid-template-columns:1fr}}
.bezit-grid .sectiekop{margin-bottom:0}
.bezit-kern{margin-top:18px;padding:16px 18px;border-left:3px solid var(--accent-vlak);background:var(--accent-zacht);
  font-size:16px;line-height:1.55;color:var(--inkt);border-radius:0 6px 6px 0}
/* rechts: twee kolomkoppen boven de rijen van de herkenning (huren × / kopen ✓) */
/* het overdrachtsdocument: een vel zoals de offerte, elke regel op naam van de klant */
.bezit-doc{margin:0;padding:clamp(20px,2.6vw,28px);background:var(--vlak);border-radius:var(--straal);box-shadow:var(--schaduw);font-size:14px;color:var(--inkt)}
.bezit-doc-kop{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--lijn)}
.bezit-doc-kop div{display:grid;line-height:1.3;min-width:0}
.bezit-doc-kop b{font-size:20px;letter-spacing:-.02em}
.bezit-doc-kop small{font-size:12px;color:var(--inkt-vaag)}
.bezit-doc-tag{margin-left:auto;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--inkt-vaag)}
.bezit-doc-lijst{width:100%;margin-top:4px;border-collapse:collapse}
.bezit-doc-lijst th{padding:12px 0 6px;text-align:left;font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--inkt-vaag)}
.bezit-doc-lijst td{padding:10px 0;border-top:1px solid var(--lijn-fijn);vertical-align:top;line-height:1.45}
.bezit-doc-lijst th:last-child,.bezit-doc-lijst td:last-child{padding-left:16px;text-align:right;white-space:nowrap}
.bezit-doc-lijst td:last-child{font-weight:600;color:var(--accent)}
.bezit-doc-lijst .bij-looped td:last-child{color:var(--inkt-vaag)}
.bezit-doc-looped{margin:14px 0 0;padding:12px 14px;border-radius:var(--straal);background:var(--accent-zacht);color:var(--inkt-zacht);line-height:1.5}
.bezit-doc-voet{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 0;font-size:12px;color:var(--inkt-vaag)}
.bezit-doc-paraaf{margin-left:6px;font-size:20px;color:var(--bon-inkt)}


/* ---------- 10 · vragen ---------- */
.faq{border-top:1px solid var(--lijn)}
.faq details{border-bottom:1px solid var(--lijn)}
.faq summary{list-style:none;cursor:pointer;padding:17px 0;font-size:17px;font-weight:600;
  letter-spacing:-.015em;display:flex;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--accent);font-weight:700;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent)}
.faq details p{padding:0 0 19px;font-size:16px;line-height:1.62;color:var(--inkt-zacht);max-width:62ch}

/* ---------- 12 · slot. Op donker. ---------- */
.slot{background:var(--donker);color:var(--donker-tekst)}
.slot h2{max-width:18ch}
.slot-tekst{margin-top:clamp(18px,2.2vw,26px);font-size:clamp(16.5px,1.8vw,19px);line-height:1.55;
  color:var(--donker-zacht);max-width:48ch}
.slot .knop{margin-top:clamp(24px,3vw,34px)}
.slot .fijn,.slot-punten{color:var(--donker-vaag)}
.slot-punten{margin-top:18px;font-size:14px}
.slot-scan{margin-top:clamp(22px,2.6vw,30px);padding-top:18px;border-top:1px solid var(--donker-lijn);font-size:16px;color:var(--donker-zacht)}
.slot-scan .tekstknop{color:var(--accent-licht);margin-left:6px}
.slot-scan .tekstknop:hover{color:var(--donker-tekst)}

/* ---------- 13 · voettekst. Merk, drie kolommen, juridisch, copyright. ---------- */
.voet{border-top:1px solid var(--lijn);padding:clamp(36px,4.5vw,64px) 0 clamp(24px,3vw,36px);font-size:14px}
.voet-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
@media(max-width:860px){.voet-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.voet-grid{grid-template-columns:1fr}}
.voet-merk p{margin-top:12px;line-height:1.55;color:var(--inkt-zacht);max-width:34ch}
.voet-kolom{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.voet-kolom h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-vaag);margin-bottom:4px}
.voet-kolom h3 + h3,.voet-kolom a + h3{margin-top:14px}
.voet-kolom a{color:var(--inkt-zacht);line-height:1.4;transition:color .15s var(--ease)}
.voet-kolom a:hover{color:var(--accent)}
.voet-onder{margin-top:clamp(28px,3.5vw,44px);padding-top:18px;border-top:1px solid var(--lijn-fijn);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;color:var(--inkt-vaag);font-size:12px}
.voet-onder .talen{margin-left:auto}
.voet-eerlijk{color:var(--inkt-vaag)}
.demo-voet + .voet{margin-top:0}

/* ---------- juridische pagina's ---------- */
.jur{padding:clamp(40px,6vw,80px) 0 clamp(48px,6vw,88px)}
.jur .binnen{max-width:var(--smal)}
.jur h1{font-size:clamp(30px,4.6vw,44px)}
.jur-datum{margin-top:14px;font-size:14px;color:var(--inkt-vaag)}
.jur-intro{margin-top:22px;font-size:17px;line-height:1.6;color:var(--inkt-zacht)}
.jur-blok{margin-top:clamp(26px,3vw,36px)}
.jur-blok h2{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.jur-blok p{font-size:16px;line-height:1.65;color:var(--inkt-zacht)}

/* ---------- binnenkomst. Beweging is binnenkomen en niets meer. ---------- */
[data-sc-in],[data-sc-stagger] > *{opacity:0;transform:translate3d(0,6px,0);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
[data-sc-in].sc-in,[data-sc-stagger] > .sc-in{opacity:1;transform:none}
/* in de herkenning komt 'straks' een tel na 'nu': dezelfde vertraging als de rij (--sc-delay, uit site.js) plus 260 ms */
.herken-rijen li .herken-straks,.herken-rijen li .herken-product{opacity:0;transform:translate3d(-6px,0,0);transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc(var(--sc-delay,0ms) + 260ms)}
.herken-rijen li.sc-in .herken-straks,.herken-rijen li.sc-in .herken-product{opacity:1;transform:none}
html:not(.sc-ready) .herken-straks,html:not(.sc-ready) .herken-product{opacity:1;transform:none}
/* Niets blijft op nul staan wachten. Zonder engine, zonder waarnemer of met
   beweging uit is alles gewoon zichtbaar; de binnenkomst is een extraatje. */
html:not(.sc-ready) [data-sc-in],html:not(.sc-ready) [data-sc-stagger] > *{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-sc-in],[data-sc-stagger] > *{opacity:1!important;transform:none!important;transition:none}
  .snede > span,.wissel > span,.herken-straks,.herken-product{transition:none!important;transform:none!important;opacity:1!important}
  .mac-deksel{transform:none!important;transition:none;animation:none}.mac-deksel .scherm{filter:none!important;transition:none;animation:none}
  *{scroll-behavior:auto!important}
}

/* ============================================================
   Blijft staan voor de twee voorbeeldpagina's, die hun eigen
   opmaak in offerte.css hebben maar deze klassen hier vandaan halen.
   ============================================================ */
.header{height:66px;padding:0 var(--gutter);display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--lijn);background:var(--grond)}
.header nav{display:flex;gap:clamp(14px,2.4vw,32px);align-items:center;font-size:14px}
.header nav > a{padding:10px 0;color:var(--inkt-zacht)}
.header a:hover{color:var(--inkt)}

/* ---------- de agenda van Cal.com ---------- */
/* Zonder zijkolom heeft de maandweergave de volle breedte nodig, anders staan
   de tijden geknepen naast het raster. */
.agenda{margin-top:clamp(24px,3vw,34px);min-height:560px;width:100%;max-width:900px;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--straal-groot);overflow:hidden}
.agenda-bezig{padding:26px;font-size:16px;color:var(--inkt-zacht)}
.agenda-fijn{margin-top:clamp(18px,2.2vw,26px)}
@media(max-width:700px){.agenda{min-height:600px}}