/*
Theme Name:  WPTS-Custom
Theme URI:   https://boldbranded.nl
Author:      WPTS
Description: Social-first contentbureau. Creatieve herbouw — alle wisselende content is beheerbaar vanuit WordPress.
Version:     1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: wpts-custom
Tags: one-column, custom-menu, editor-style
*/

/* ==========================================================================
   Bold & Branded — stylesheet
   (code-prefixen heten nog blync_; dat is interne naamgeving, zie functions.php)
   Palet en fonts zijn 1-op-1 overgenomen van de live site.
   ========================================================================== */

:root{
  /* ---- merkkleuren (Bold & Branded) --------------------------------------
     Drie uit de stijlgids, twee eruit bemonsterd: de gids zelf zet koppen in
     #1a1420 en bijschriften in #6d6376. Dat is geen zwart en geen grijs maar
     paarszwart en paarsgrijs, getrokken naar het lila. Inkt op 60% over wit
     komt vrijwel precies op die gedempte tint uit — het systeem is sluitend.

     LET OP bij het kiezen van combinaties. Het merkoranje is licht:
       oranje op wit     2,83:1  — te laag, ook voor koppen
       wit op oranje     2,83:1  — te laag
       oranje op lila    1,94:1  — de logo-lockup; werkt als merkteken, niet als tekst
       lila op oranje    1,94:1  — idem
     Wat wél kan:
       inkt op wit      18,0:1 · inkt op lila 12,4:1 · inkt op oranje 6,4:1
       wit/lila/oranje op inkt: 18,0 / 12,4 / 6,4
       gedempt op wit    5,7:1
     Kortom: tekst op een oranje vlak is altijd inkt, nooit wit.               */
  --oranje:#fe6c3c;           /* vlakken, knoppen, het merk                   */
  --oranje-tekst:#cb4c22;     /* oranje dát je kunt lezen: zelfde tint, 20%   */
                              /* donker, 4,6:1 op wit                          */
  --lila:#decffa;             /* achtergrondvlakken, secties, kaarten          */
  --wit:#ffffff;
  --inkt:#1a1420;
  --gedempt:#6d6376;
  --fout:#a4231b;             /* alleen formulierfouten — bewust buiten het   */
                              /* merk, want een fout in je actiekleur leest    */
                              /* als een knop                                  */

  /* accent dat zich aanpast aan zijn ondergrond. Op wit stond hier de
     gedempte variant (#cb4c22, 4,6:1). Daniel wil dat de nadruk in een kop
     exact de kleur van het logo en de knoppen is, dus op wit is het accent
     nu het merkoranje zelf. Dat kost contrast: 2,83:1 op wit in plaats van
     4,57:1. Voor een kop van 43 tot 89px is dat verdedigbaar (de AA-drempel
     voor grote tekst is 3:1 en dit zit er net onder), voor kleine tekst niet.
     Alles onder 24px dat op dit accent stond, staat daarom hieronder
     expliciet op --oranje-tekst. Op een gekleurd merkvlak blijft het inkt en
     op een donkere sectie blijft het --oranje: dat schakelt verderop. */
  --accent:var(--oranje);

  /* ---- oude namen, nieuwe waarden -----------------------------------------
     De stylesheet gebruikt deze op 440 plekken. Ze houden hun rol: paper is
     de lichte grond, sage het lichte vlak, ink de tekst.                      */
  --paper:var(--wit);
  --ink:#1a1420;
  --white:var(--wit);

  /* ---- de drie fasekleuren ------------------------------------------------
     De site gebruikt drie paren van een vlak en een tekstkleur: voor de drie
     fases, de drie soorten meldingen en de stappen in de route. Het oude palet
     had daar drie tinten voor; het nieuwe heeft er maar één lichte. De drie
     blijven dus onderscheiden, maar door een ánder vlak in plaats van een
     andere tint: lila, oranje, inkt. Alle drie uit het merk, alle drie met
     tekst die de norm haalt.

     Alle drie de vlakken blijven LICHT. Dat is geen smaak maar een eis: de
     componenten die ze gebruiken (reviews, citaten, kaarten, stappen) zetten
     hun lopende tekst in --ink en niet in de tekstkleur van het paar. Een
     donker vlak levert daar inkt op inkt op.

     Perzik is een tint van het merkoranje, zoals het oude palet die ook had.  */
  --perzik:#ffd9ca;
  --sage:var(--lila);     --sage-op:var(--inkt);     /* 12,4:1 */
  --peach:var(--perzik);  --peach-op:var(--inkt);    /* 14,4:1 */
  --lav:var(--oranje);    --lav-op:var(--inkt);      /*  6,4:1 */
  --rust:var(--peach-op);
  --violet:var(--lav-op);
  /* Dezelfde drie fases, maar dan als losse tekst op een lichte grond: daar
     kan de tekstkleur van het paar niet gebruikt worden (lila op wit is
     1,5:1). Drie donkere tinten die alle drie de norm halen.                  */
  --fase-1:var(--inkt);
  --fase-2:var(--oranje-tekst);
  --fase-3:var(--gedempt);
  --forest:var(--inkt);       /* forest was zowel vlak als accent; als vlak   */
                              /* is het nu inkt, als tekst --accent            */

  /* afgeleid */
  --ink-60:rgba(26,20,32,.72);
  --ink-12:rgba(26,20,32,.12);
  --paper-60:rgba(255,255,255,.66);

  /* type */
  /* Eén letter voor de hele site: Poppins, voor de koppen én de lopende
     tekst. Op verzoek van de klant (document 31-10-2026). Stond hiervoor op
     Source Serif 4 voor lopende tekst; die leest op een lange regel prettiger,
     maar één letter is wat de klant wil en dat is hun keuze.
     --text blijft als aparte variabele bestaan: er hangen 14 declaraties aan
     en het onderscheid tussen "dit is een kop" en "dit lees je" blijft
     daarmee leesbaar in de stylesheet, ook nu beide dezelfde letter pakken. */
  --display:"Poppins",-apple-system,"Segoe UI",sans-serif;
  --text:"Poppins",-apple-system,"Segoe UI",sans-serif;
  /* Poppins is in dit thema ingesloten op 400, 600, 700 en 900 — géén 500 en
     géén cursief. font-weight:500 valt in de browser terug naar 400, dus
     gebruik 600 waar je iets zwaarder wilt. Cursief zou een scheefgetrokken
     romein worden; op de site staat nergens cursieve lopende tekst
     (nagemeten over negen pagina's), dus dat speelt niet. */
  --serif:"Georgia Pro",Georgia,"Times New Roman",serif;

  /* maat */
  --pad:clamp(1.25rem,4vw,4.5rem);
  --gap:clamp(1.25rem,2.5vw,2.5rem);
  --maxw:1560px;
  /* De inleiding naast een sectiekop. Stond per sectie op een eigen
     max-width in ch (30, 32, 34, 34, 38, 46) terwijl de kop met 1fr alle
     overgebleven ruimte opslokte. Gemeten gevolg: 230 tot 675px LEGE
     kolom naast de kop, en de inleiding geperst tot 23 a 38 tekens per
     regel. Leesbaar loopt vanaf ongeveer 45. Een kolom, een maat. */
  --kol-lead:clamp(17rem,34%,30rem);
  /* Typeschaal voor de kleine maten. Stond op 28 losse waarden verspreid over
     95 declaraties; dat leest als onrust, niet als bedoeling. Vier treden met
     een vaste verhouding van ongeveer 1,18 — elk element kiest een trede in
     plaats van zijn eigen maat. */
  /* De onderkant van deze schaal was te laag. --t-micro gaf 9,3px en wordt op
     49 plekken gebruikt: tags, data, de sector onder een casetitel, de labels
     onder de cijfers. Kapitalen met letterspatie op 9px lezen niet, en op een
     site die hoogwaardig moet ogen leest het als krap. --t-label (knoppen) zat
     op 10,9px. Allebei omhoog; de bovenkant van de schaal bleef zoals hij was,
     dus de sprong naar lopende tekst wordt alleen kleiner. */
  --t-body:  .95rem;   /* lopende tekst in kaarten en formulieren */
  --t-klein: .85rem;   /* bijschrift, meta, hulptekst          13,6px */
  --t-label: .78rem;   /* knoppen en labels in kapitalen       12,5px */
  --t-micro: .7rem;    /* tags en tellers                      11,2px */
  /* Lopende tekst en intro's blijven meeschalen met het scherm, maar volgen
     nu twee curves in plaats van twintig net-niet-gelijke clamps. */
  --t-lees:  clamp(1rem, .95rem + .18vw, 1.08rem);   /* schreefletter oogt groter dan Poppins */
  --t-lead:  clamp(1.05rem, .98rem + .4vw, 1.25rem);
  /* Kopschaal. Veertig componenten hadden elk hun eigen clamp, vaak maar een
     paar procent uit elkaar — 54, 55, 57 en 58px voor dezelfde soort kop. Tien
     treden, en de verschuiving per component blijft onder 8% zodat het ontwerp
     hetzelfde oogt maar de maten gekozen zijn. */
  --k-mega: clamp(2.6rem, 7vw, 7.8rem);      /* paginatitel op de hero      */
  --k-mega-lang: clamp(2.35rem, 6.2vw, 7rem); /* hero-titel van 3 regels     */
  --k-xxl:  clamp(2.5rem, 6.2vw, 6.6rem);    /* langere paginatitel         */
  --k-xl:   clamp(2.35rem, 5.6vw, 5.5rem);   /* sectiekop h2                */
  /* Een langere paginatitel heeft een kleinere schaalfactor nodig, anders
     breekt hij een regel extra. "Team achter de connectie" past op 4.9vw op
     twee regels en op 5.6vw niet meer. */
  --k-xl-lang: clamp(2.35rem, 4.9vw, 5.3rem); /* lange paginatitel          */
  --k-l:    clamp(2.9rem, 6.6vw, 6rem);      /* grote cijfers               */
  --k-m:    clamp(2.1rem, 4.5vw, 4.1rem);    /* kop in een gekleurd vlak    */
  --k-s:    clamp(1.9rem, 4vw, 3.45rem);     /* kleinere sectiekop          */
  --k-xs:   clamp(1.6rem, 3vw, 2.7rem);      /* subkop in een artikel       */
  --k-2xs:  clamp(1.45rem, 2.5vw, 2.25rem);  /* nummer, quote               */
  --k-3xs:  clamp(1.25rem, 2.2vw, 1.95rem);  /* grote kaartkop              */
  --k-4xs:  clamp(1.15rem, 1.9vw, 1.58rem);  /* kaartkop                    */
  --k-5xs:  clamp(1.05rem, 1.6vw, 1.36rem);  /* compacte kaartkop           */
  /* Staande foto's in een liggend of vierkant kader: uit het midden snijden
     kost de bovenkant van het hoofd. Deze waarde houdt gezichten heel en doet
     niets bij liggende beelden, want object-position werkt alleen in de
     richting waarin daadwerkelijk wordt bijgesneden. */
  --fotopos: 50% 25%;
  /* Drie hoogtes, meer niet. Er stonden 24 verschillende slagschaduwen in dit
     bestand — allemaal hetzelfde idee met net een andere vervaging en dekking.
     Dat is precies wat een ontwerp aangegroeid laat ogen in plaats van
     ontworpen. 1 = ligt op de pagina, 2 = komt los, 3 = zweeft. */
  --lift-1:0 10px 24px -16px rgba(26,20,32,.38);
  --lift-2:0 22px 44px -26px rgba(26,20,32,.42);
  --lift-3:0 38px 72px -40px rgba(26,20,32,.45);
  /* Verticaal ritme. Er stonden 68 verschillende clamp()-formules voor
     sectie-afstand in dit bestand; elke sectie had zijn eigen maat, met
     verschillen van een paar tienden rem. Acht stappen, meer heeft een
     pagina niet nodig. Een clamp die op 0 begint laat ik met rust: die zakt
     bewust helemaal dicht op een laag scherm. */
  --v-7:clamp(7.5rem, 15vh, 11rem);
  --v-6:clamp(6rem, 13vh, 9.5rem);
  --v-5:clamp(4.5rem, 10vh, 8rem);
  --v-4:clamp(3.5rem, 9vh, 7rem);
  --v-3:clamp(3rem, 7vh, 5.5rem);
  --v-2:clamp(2.5rem, 6vh, 4rem);
  --v-1:clamp(1.8rem, 4vh, 2.8rem);
  --v-0:clamp(1.2rem, 3vh, 2rem);
  --r-xs:8px;    /* chips, tags, kleine labels */
  --r-s:14px;    /* kleine kaarten en beeldjes */
  --r:28px;
  --r-lg:44px;

  /* beweging */
  --e:cubic-bezier(.22,1,.36,1);
  --e-in:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:var(--t-lees);
  line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.is-locked{overflow:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:.94}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--forest);color:var(--paper)}

.skip{position:fixed;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}

/* ---------- gedeelde bouwstenen ---------- */
.h2{font-size:var(--k-xl)}
.h2 em{font-style:normal;color:var(--accent)}
.h2--forest{color:var(--accent)}
/* De nadruk in een kop volgt zijn ondergrond, net als --accent. Wit was hier
   hardgecodeerd, en dat gaf 1,46:1 op lila en 1,11:1 op perzik — onzichtbaar.
   Standaard dus inkt; alleen op een écht donker vlak wordt het wit. */
.h2--forest em{color:var(--nadruk)}
:root{--nadruk:var(--inkt)}
[data-bar="light"],.foot,.jur__vraag,.overlay,
.card--dark,.tick{--nadruk:var(--wit)}

.lbl{
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);margin:0 0 1.1rem
}
.lbl--light{color:var(--paper-60)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  background:var(--white);border:1px solid var(--ink-12);border-radius:999px;padding:.55rem 1.1rem .5rem
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--forest);animation:pulse 2.4s var(--e) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.45}}

/* De stijlgids zegt het letterlijk: oranje is voor logo, knoppen, links en
   accenten. De knop is dus oranje, met inkt erop — wit op oranje haalt maar
   2,8:1, inkt haalt 6,4:1. Bij het zweven vult de knop zich met inkt. */
.btn{
  --bg:var(--oranje);--fg:var(--inkt);
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:.95rem 1.5rem;border-radius:999px;overflow:hidden;isolation:isolate;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;
  background:var(--bg);color:var(--fg);
  transition:color .4s var(--e),transform .5s var(--e);will-change:transform
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--inkt);transform:translateY(101%);transition:transform .52s var(--e)
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--lila)}
.btn .arw{width:15px;height:15px;flex:none;transition:transform .45s var(--e)}
.btn:hover .arw{transform:translateX(4px)}
.btn .arw--down{transform:rotate(90deg)}
.btn:hover .arw--down{transform:rotate(90deg) translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ink{--bg:var(--inkt);--fg:var(--lila)}
.btn--ink::before{background:var(--oranje)}
.btn--ink:hover{color:var(--inkt)}
.btn--paper{--bg:var(--wit);--fg:var(--inkt)}
.btn--paper::before{background:var(--oranje)}
.btn--paper:hover{color:var(--accent)}

/* pill-tags */
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.4rem}
.tags li{
  border:1.5px solid currentColor;border-radius:999px;padding:.4rem .85rem .35rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.11em;text-transform:uppercase
}
.js .tags li{opacity:0;transform:translateY(10px)}
.is-in .tags li{opacity:1;transform:none;transition:opacity .5s var(--e),transform .5s var(--e)}
.is-in .tags li:nth-child(1){transition-delay:.05s}
.is-in .tags li:nth-child(2){transition-delay:.11s}
.is-in .tags li:nth-child(3){transition-delay:.17s}
.is-in .tags li:nth-child(4){transition-delay:.23s}
.is-in .tags li:nth-child(5){transition-delay:.29s}

/* scroll-reveal */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--e),transform .85s var(--e)}
.reveal.is-in{opacity:1;transform:none}

/* gesplitste kop: per regel een masker, per letter een lift */
.split-l{display:block;clip-path:inset(-.35em -100vw 0 -100vw);padding-bottom:.16em;margin-bottom:-.16em}
.split-i{display:block}
.split-w{display:inline-block;white-space:nowrap}
.split-w.is-em{color:var(--accent)}
.split-c{display:inline-block;transition:transform .95s var(--e)}
.js .split-c{transform:translateY(112%)}
.is-in .split-c,.split-go .split-c{transform:none}

/* ==========================================================================
   BLINK — motief uit de vorige merknaam (Blync → knipperen). Hangt niet meer
   aan de naam en staat op de lijst om vervangen te worden, zie REBRAND.md
   ========================================================================== */
.blink{display:none;position:fixed;inset:0;z-index:300;pointer-events:none}
.js .blink{display:block}
.js .blink.is-done{display:none}

/* Eén oranje vlak dat wegschuift — het beeldmerk in beweging. Kort: een halve
   seconde. De vorige animatie duurde 1,8s en dat vecht met het vooruitladen,
   waar de volgende pagina er juist al staat voordat je tikt. */
.blink__vlak{
  position:fixed;inset:0;background:var(--oranje);
  transform:translateX(0);transition:transform .52s var(--e)
}
.blink__merk{
  position:fixed;left:50%;top:50%;width:min(30vw,340px);
  transform:translate(-50%,-50%);opacity:1;
  transition:opacity .2s linear
}
.blink__merk svg{width:100%;height:auto;display:block}
.blink__merk svg rect{display:none}

.blink.is-open .blink__vlak{transform:translateX(101%)}
.blink.is-open .blink__merk{opacity:0;transition-duration:.14s}
.blink.is-done{display:none}

/* dichtschuiven bij het verlaten van de pagina (alleen de statische versie:
   op WordPress doet de browser de overgang zelf) */
.blink.is-shut{display:block}
.blink.is-shut .blink__vlak{transform:translateX(0);transition:transform .38s var(--e-in)}

/* ==========================================================================
   CURSOR
   ========================================================================== */
.cursor{
  position:fixed;top:0;left:0;z-index:250;pointer-events:none;
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:999px;background:var(--forest);
  display:grid;place-items:center;
  transition:width .38s var(--e),height .38s var(--e),margin .38s var(--e),background .3s var(--e),opacity .3s;
  opacity:0
}
.cursor.is-on{opacity:1}
.cursor__label{
  font-family:var(--display);font-weight:800;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);opacity:0;transition:opacity .25s var(--e);white-space:nowrap
}
.cursor.is-med{width:36px;height:36px;margin:-18px 0 0 -18px;background:rgba(26,20,32,.24)}
.cursor.is-big{width:84px;height:84px;margin:-42px 0 0 -42px}
.cursor.is-big .cursor__label{opacity:1}
.cursor.is-blink{animation:blinkc .32s var(--e)}
@keyframes blinkc{50%{transform:scaleY(.12)}}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ==========================================================================
   HEADER
   ========================================================================== */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(.9rem,2vw,1.6rem) var(--pad);
  transition:transform .5s var(--e),padding .4s var(--e)
}
.bar.is-hidden{transform:translateY(-118%)}
/* de balk is doorzichtig; boven een donkere sectie zou het inktzwarte
   logo wegvallen, dus daar kleurt hij om */
/* .bar--light .bar__logo svg{fill:var(--paper)}  — vervallen: het blok houdt zijn eigen kleuren */
.bar--light .bar__menu{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.35)}
.bar--light .bar__menu:hover{background:var(--paper);color:var(--ink)}
.bar--light .bar__cta{background:var(--sage);color:var(--accent)}
.bar--light .bar__cta::before{background:var(--paper)}
.bar--light .bar__cta:hover{color:var(--ink)}
/* Het woordmerk is twee regels (480×222) waar het oude logo één regel was
   (150×46). Op breedte sturen zou het drie keer zo hoog maken, dus hier
   stuurt de hoogte. */
/* Het blok-lockup uit de stijlgids: oranje vlak, lila letters. Dat is de
   enige versie die op alle drie de ondergronden van de site hetzelfde leest —
   wit, lila en inkt — waar het kale woordmerk per sectie van kleur zou moeten
   wisselen. Het merk is er niet om zich aan te passen. */
:root{--merkvlak:var(--oranje);--merkletter:var(--lila)}
.bar__logo svg{height:clamp(44px,4.6vw,62px);width:auto;transition:none}
.bar__logo svg rect{transition:fill .4s var(--e)}
.bar__menu{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--white);border:1px solid var(--ink-12);border-radius:999px;
  padding:.7rem 1.3rem .65rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  transition:background .35s var(--e),color .35s var(--e),box-shadow .35s var(--e)
}
.bar__menu:hover{background:var(--ink);color:var(--paper)}
.bar__burger{display:grid;gap:4px;width:16px}
.bar__burger i{display:block;height:1.8px;background:currentColor;border-radius:2px;transition:transform .4s var(--e),width .4s var(--e)}
.bar__burger i:last-child{width:11px;margin-left:auto}
.bar__menu:hover .bar__burger i:last-child{width:16px}
.bar__cta{padding:.8rem 1.35rem}

/* menu open: alles omkleuren naar het overlay-thema */
/* body.menu-open .bar__logo svg{fill:var(--paper)}  — vervallen: het blok houdt zijn eigen kleuren */
body.menu-open .bar__menu{background:var(--inkt);color:var(--lila);border-color:var(--inkt)}
body.menu-open .bar__menu .bar__burger i:first-child{transform:translateY(3px) rotate(45deg);width:16px}
body.menu-open .bar__menu .bar__burger i:last-child{transform:translateY(-3px) rotate(-45deg);width:16px;margin-left:0}
body.menu-open .bar__cta{background:var(--inkt);color:var(--lila)}

/* ==========================================================================
   MENU OVERLAY
   ========================================================================== */
/* Het menu is een achtergrondvlak, geen accent — dus lila, niet oranje.
   Tekst erop is inkt: 12,4:1. */
.overlay{
  position:fixed;inset:0;z-index:190;visibility:hidden;color:var(--inkt);
  display:grid;align-items:center;align-items:safe center;padding:7rem var(--pad) 3rem;
  /* Het menu staat vast op het scherm en de pagina eronder is op slot. Zonder
     dit viel alles wat niet paste gewoon buiten beeld -- op een laag venster
     verdween het telefoonnummer. */
  overflow-y:auto;overscroll-behavior:contain
}
.overlay.is-open{visibility:visible}
/* de banen doen de reveal; dit vangt het op zodra ze staan, zodat de
   achtergrond niet van een animatie afhangt */
.overlay{background:transparent;transition:background 0s linear .62s}
.overlay.is-open{background:var(--lila)}
.overlay.is-closing{background:transparent;transition:background 0s linear 0s}
.overlay__lids{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);z-index:-1}
.overlay__lids i{background:var(--lila);transform:scaleY(0);transform-origin:top;transition:transform .62s var(--e)}
.overlay__lids i:nth-child(2){transition-delay:.06s}
.overlay__lids i:nth-child(3){transition-delay:.12s}
.overlay__lids i:nth-child(4){transition-delay:.18s}
.overlay.is-open .overlay__lids i{transform:scaleY(1)}
.overlay.is-closing .overlay__lids i{transform-origin:bottom;transform:scaleY(0)}

.overlay__in{
  width:min(var(--maxw),100%);margin-inline:auto;
  display:grid;grid-template-columns:1.35fr .65fr;gap:var(--gap);align-items:center
}
.overlay__list li{overflow:hidden}
.overlay__list a{
  display:flex;align-items:baseline;gap:1.4rem;padding:.18em 0;
  font-family:var(--display);font-weight:800;font-size:var(--k-xl);line-height:1;
  transition:transform .7s var(--e),color .35s var(--e)
}
.js .overlay__list a{transform:translateY(110%)}
.overlay.is-open .overlay__list a{transform:none}
.overlay.is-open .overlay__list li:nth-child(1) a{transition-delay:.26s}
.overlay.is-open .overlay__list li:nth-child(2) a{transition-delay:.32s}
.overlay.is-open .overlay__list li:nth-child(3) a{transition-delay:.38s}
.overlay.is-open .overlay__list li:nth-child(4) a{transition-delay:.44s}
.overlay.is-open .overlay__list li:nth-child(5) a{transition-delay:.50s}
.overlay.is-open .overlay__list li:nth-child(6) a{transition-delay:.56s}
.overlay__list em{
  font-family:var(--text);font-style:normal;font-weight:600;font-size:var(--t-klein);
  color:var(--ink-60);letter-spacing:.1em
}
.overlay__list a span{position:relative}
.overlay__list a span::after{
  content:"";position:absolute;left:0;right:0;bottom:.1em;height:.055em;background:var(--oranje);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e)
}
/* Je stond wel gemarkeerd in de code (aria-current) maar je zag het niet.
   De onderstreping die bij zweven verschijnt, blijft op de huidige pagina
   staan — en die is oranje, dus het menu heeft eindelijk zijn accent. */
.overlay__list a[aria-current="page"] span::after{transform:scaleX(1);transform-origin:left}
/* het nummer blijft inkt: oranje haalt op lila maar 3,1:1 en dit is 13px */
.overlay__list a[aria-current="page"] em{color:var(--inkt)}
/* Stond op --sage, en dat is sinds de merkwissel lila — dezelfde kleur als het
   menuvlak eronder. Zweven liet de naam dus verdwijnen (1,00:1). Het accent van
   het overlay is oranje-tekst: 3,1:1 op lila, en deze regels zijn 38–88px, dus
   ruim binnen de norm voor grote tekst. */
.overlay__list a:hover{color:var(--accent)}
.overlay__list a:hover span::after{transform:scaleX(1);transform-origin:left}

.overlay__aside{display:grid;gap:2rem;transition:opacity .6s var(--e) .5s,transform .6s var(--e) .5s}
.js .overlay__aside{opacity:0;transform:translateY(20px)}
.overlay.is-open .overlay__aside{opacity:1;transform:none}
.overlay__peek{
  aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:rgba(26,20,32,.07)
}
.overlay__peek img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);opacity:0;transition:opacity .5s var(--e),transform 1.2s var(--e);transform:scale(1.08)}
.overlay__peek img.is-on{opacity:1;transform:scale(1)}
.overlay .lbl{color:var(--ink-60)}
.overlay__meta{display:grid;gap:.35rem;font-family:var(--display);font-weight:700;font-size:var(--t-lees)}
.overlay__meta a:hover{color:var(--oranje-tekst)}

/* ---- zoekveld in het menu-overlay ------------------------------------- */
.zoek{display:grid;gap:.6rem}
.zoek__rij{
  display:flex;align-items:center;gap:.5rem;
  border-bottom:1px solid rgba(26,20,32,.28);
  padding-bottom:.55rem;transition:border-color .3s var(--e)
}
.zoek__rij:focus-within{border-color:var(--oranje)}
.zoek__in{
  flex:1;min-width:0;background:none;border:0;padding:0;
  font-family:var(--display);font-weight:700;
  font-size:var(--t-lees);color:var(--inkt);
  letter-spacing:-.01em
}
.zoek__in::placeholder{color:rgba(26,20,32,.72);font-weight:600}
.zoek__in:focus{outline:none}
/* het kruisje van type=search past niet bij de rest */
.zoek__in::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.zoek__knop{
  flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;
  border:0;border-radius:50%;background:var(--inkt);color:var(--lila);
  cursor:pointer;transition:background .3s var(--e),transform .3s var(--e)
}
.zoek__knop:hover{background:var(--oranje);color:var(--inkt);transform:translateX(2px)}
.zoek__knop svg{width:.95rem;height:.95rem}
@media(max-width:620px){.zoek__in{font-size:var(--t-body)}}


/* ==========================================================================
   HERO
   ========================================================================== */
/* De hero op lila. De site is verder wit, dus dit is het enige vlak dat
   meteen zegt van wie hij is — precies wat het merk met lila bedoelt
   ("achtergrondvlakken, secties"). Let op het contrast: het oranje accentwoord
   in de kop haalt 3,1:1 op lila. Dat is genoeg voor een kop van 60 pixels,
   niet voor kleine tekst — vandaar dat alleen .hero__h zijn accent houdt en de
   rest in de hero inkt gebruikt. */
/* Op een breed scherm werd de hero 1080px hoog: een heel beeldscherm voor één
   kop en twee knoppen, en de bezoeker moest scrollen om te zien dat er meer is.
   Op een laptop blijft het 100svh (daar is dat precies goed), daarboven stopt
   het bij 50rem. */
.hero{
  position:relative;min-height:min(100svh,50rem);display:grid;place-items:center;
  padding:8rem var(--pad) 4.5rem;overflow:hidden;isolation:isolate
}
/* De lila grond zit op een ::before en niet op .hero zelf: de hero maakt een
   eigen stapelcontext (isolation:isolate) en het portretveld staat daarin op
   z-index -1. Een achtergrond op .hero schildert daar dus overheen en de
   portretten verdwijnen. Op -2 zit hij eronder. */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--lila)}
.hero__field{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pic{
  /* De verticale plek stond in vh en werd dus vanaf het midden van de hero met
     een stuk beeldscherm verschoven. Zodra de hero korter wordt dan het scherm
     schuiven de portretten er aan de bovenkant uit. Nu staat --y als
     percentage in `top`, en dat rekent met de hoogte van de hero zelf — dus
     het veld blijft kloppen bij elke hoogte. */
  position:absolute;left:50%;top:calc(50% + var(--y));margin:0;
  width:var(--w);aspect-ratio:9/16;border-radius:clamp(14px,1.6vw,26px);
  /* niet hidden: het wolkje steekt buiten de kaart uit en mag niet
     weggeknipt worden. De ronding zit op de foto zelf. */
  transform:translate(-50%,-50%) translateX(var(--x)) rotate(var(--r));
  box-shadow:var(--lift-3)}
.js .pic{opacity:0}
.pic img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);border-radius:inherit}
.hero.is-live .pic{
  opacity:1;
  /* GEEN fill-mode backwards. Die houdt de beginstand vast zolang de animatie
     niet loopt — en dan staat de kaart permanent op opacity 0 en schaal .84.
     Precies dat gebeurde: op desktop waren de portretten onzichtbaar terwijl
     alles (box, opacity, geladen beeld) in orde leek. Zonder fill-mode valt
     een animatie die niet start gewoon terug op de normale stand, en dat is
     wat je wilt: een versiering mag inhoud nooit verbergen. */
  animation:picIn 1.15s var(--e)
}
.hero.is-live .pic:nth-child(1){animation-delay:.05s}
.hero.is-live .pic:nth-child(2){animation-delay:.13s}
.hero.is-live .pic:nth-child(3){animation-delay:.21s}
.hero.is-live .pic:nth-child(4){animation-delay:.17s}
.hero.is-live .pic:nth-child(5){animation-delay:.09s}
.hero.is-live .pic:nth-child(6){animation-delay:.01s}
@keyframes picIn{
  from{opacity:0;transform:translate(-50%,-50%) translate(var(--x),calc(var(--y) + 12vh)) rotate(0deg) scale(.84)}
  to{opacity:1}
}

.hero__in{position:relative;text-align:center;width:min(62vw,940px);max-width:100%}
@media (max-width:1100px){.hero__in{width:min(82vw,760px)}}
@media (max-width:760px){.hero__in{width:100%}}
.hero__h{font-size:var(--k-mega);margin:1.5rem 0 0}
/* Een hero-titel van drie regels op --k-mega is op 1920px breder dan de kolom:
   "Bouw een merk" meet daar 977px in een ruimte van 940px. Een eigen, iets
   kleinere trap houdt zo'n titel heel én houdt de hero binnen het scherm.
   Het thema zet deze klasse zelf zodra er twee of meer regelafbrekingen in
   staan — zie blync_blok_hero(). */
.hero__h--lang{font-size:var(--k-mega-lang)}
.hero__h em{font-style:normal;color:var(--accent)}
.hero__lead{
  max-width:52ch;margin:1.6rem auto 0;color:var(--ink-60);
  font-size:var(--t-lead);
  transition-delay:.25s
}
/* Een inleiding van meer dan één alinea komt als <div> met <p>'s binnen (zie
   blync_lead). De maatvoering staat op de container; hier alleen de ruimte
   tussen de alinea's, anders plakken ze als één blok aan elkaar. */
.hero__lead>p,.dhero__lead>p,.mhero__lead>p,.chero__lead>p,.ohero__lead>p{margin:0}
.hero__lead>p+p,.dhero__lead>p+p,.mhero__lead>p+p,.chero__lead>p+p,.ohero__lead>p+p{margin-top:.8em}

.hero__btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.2rem;transition-delay:.38s}

.hero__cue{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-60)
}
.hero__cue span{display:block;width:1px;height:38px;background:var(--ink-12);position:relative;overflow:hidden}
.hero__cue span::after{content:"";position:absolute;inset:0;background:var(--forest);animation:cue 2.1s var(--e) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ==========================================================================
   LOGOSTRIP
   ========================================================================== */
.strip{padding:var(--v-2) 0 4.5rem;overflow:hidden;--sp:38s}
.strip__track{display:flex;width:max-content;will-change:transform}
.strip__set{display:flex;align-items:center;gap:clamp(3rem,7vw,7rem);padding-right:clamp(3rem,7vw,7rem)}
/* De logo's stonden op 26px hoog en .55 dekking: dat viel volledig weg tegen
   het wit. Groter en steviger, maar nog steeds grijs — ze zijn een onderlegger
   onder de hero, geen sectie op zichzelf. Bij hover dimt de rij en springt het
   logo waar je op staat in kleur naar voren; die verhouding is meegeschaald. */
.strip__set img{
  height:clamp(26px,2.7vw,38px);width:auto;max-width:clamp(120px,14vw,190px);object-fit:contain;
  /* Geen filter meer nodig: de logobestanden zijn opnieuw aangemaakt als
     dekkende inkt-silhouetten met een doorzichtige achtergrond. Ze stonden
     alle drie op 25% dekking in het bestand zelf (alpha 64 van 255) en
     MeetNimma had bovendien een witte achtergrond — daar helpt geen CSS
     tegen. De dekking hieronder bepaalt nu als enige hoe sterk de rij staat. */
  opacity:.6;transition:opacity .4s var(--e)
}
.strip:hover .strip__set img{opacity:.3}
.strip__set img:hover{opacity:1}

/* ==========================================================================
   AANPAK — sticky stapel
   ========================================================================== */
.stack{padding:0 var(--pad) var(--v-6);position:relative}
.stack__intro{max-width:var(--maxw);margin:0 auto var(--v-3);text-align:center}
.stack__note{max-width:52ch;margin:1.4rem auto 0;color:var(--ink-60);transition-delay:.2s}

.panel{
  position:sticky;max-width:var(--maxw);margin:0 auto;
  border-radius:var(--r-lg);overflow:hidden
}
.panel[data-panel="1"]{top:var(--v-3)}
.panel[data-panel="2"]{top:var(--v-6);margin-top:var(--v-1)}
.panel[data-panel="3"]{top:var(--v-7);margin-top:var(--v-1)}
.panel--sage{background:var(--sage);color:var(--sage-op)}
.panel--peach{background:var(--peach);color:var(--rust)}
/* Het derde paneel is twee keer verkeerd geweest: eerst oranje (een
   sectievlak in de actiekleur, precies wat de gids niet wil) en daarna inkt.
   Dat tweede loste het oranje op, maar week op drie punten tegelijk af van de
   andere twee — donkere grond, lila kop, oranje knop — en dan is het geen
   variant meer maar een ander component.
   Nu wit met een inktlijn: dezelfde omlijnde kaart die de minds-sectie ook
   gebruikt. De drie panelen delen hun letterkleur en hun knop; het verschil
   zit alleen nog in de grond: lila · perzik · lijn.
   Alleen dit paneel, niet het hele --lav-paar: andere componenten gaan ervan
   uit dat dat vlak het merkoranje is. */
.panel--lav{
  background:var(--wit);color:var(--inkt);
  box-shadow:inset 0 0 0 1.5px rgba(26,20,32,.3)
}

.panel__in{
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;
  padding:clamp(1.8rem,3.4vw,3.4rem)
}
.panel__txt{max-width:38rem}
.panel__num{
  display:block;font-family:var(--display);font-weight:800;font-size:var(--t-klein);letter-spacing:.2em;
  opacity:.72;margin-bottom:1.6rem
}
.panel__kick{
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  opacity:.8;margin-bottom:.7rem
}
.panel__h{font-size:var(--k-m);margin-bottom:1.5rem}
.panel__body{color:inherit;opacity:.85;max-width:44ch;margin-bottom:2rem;font-size:var(--t-lees)}
.panel__fig{
  margin:0;border-radius:calc(var(--r-lg) - 14px);overflow:hidden;aspect-ratio:4/3.4;
  clip-path:inset(0 0 0 0 round calc(var(--r-lg) - 14px))
}
.panel__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);transition:transform 1.4s var(--e)}
.js .panel__fig img{transform:scale(1.14)}
.panel.is-in .panel__fig img{transform:scale(1)}

/* ==========================================================================
   TICKER
   ========================================================================== */
/* Gemeten: 145px lucht boven de band en 0 eronder — hij plakte tegen het
   vlak eronder en zweefde los van de sectie erboven. De sectie erboven heeft
   zelf al padding; de band hoeft daar niets bovenop te zetten. De padding
   links en rechts blijft: de band staat scheef en moet ruimte hebben om te
   kantelen zonder de buren te raken. */
.tick-wrap{overflow:hidden;margin:0;padding:1.4rem 0}
.tick{
  background:var(--ink);color:var(--paper);padding:1.15rem 0;overflow:hidden;
  transform:rotate(-1.4deg) scaleX(1.06)
}
.tick__t{display:flex;width:max-content;animation:tickm 34s linear infinite}
.tick__t span{
  display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem;
  font-family:var(--display);font-weight:800;font-size:var(--k-4xs);
  letter-spacing:-.01em;text-transform:lowercase;white-space:nowrap
}
.tick__t i{font-style:normal;color:var(--sage);font-size:.7em}
@keyframes tickm{to{transform:translateX(-50%)}}

/* ==========================================================================
   WERK — typografische index met zwevende preview
   ========================================================================== */
.work{padding:var(--v-6) var(--pad);position:relative;max-width:var(--maxw);margin-inline:auto}
/* Er staat nu ook een inleiding naast de kop (sectie 1.5 van de klant), dus
   twee kolommen — zelfde opbouw als de andere sectiekoppen op de site. */
.work__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--kol-lead));gap:var(--gap);align-items:end;
  margin-bottom:var(--v-2)
}
.work__note{transition-delay:.12s}
.work__note,.work__note>p{color:var(--ink-60);font-size:var(--t-lees);line-height:1.7;margin:0}
.work__note>p+p{margin-top:.8em}
.work__knop{margin-top:var(--v-1)}
@media (max-width:900px){
  .work__head{grid-template-columns:1fr;align-items:start}
  .work__note{max-width:none}
}
.work__peek{
  position:fixed;top:0;left:0;z-index:5;width:clamp(200px,20vw,300px);aspect-ratio:3/4;
  border-radius:var(--r-s);overflow:hidden;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.85);
  transition:opacity .4s var(--e),transform .55s var(--e);
  box-shadow:var(--lift-3)}
.work__peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.work__peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);opacity:0;transition:opacity .35s var(--e)}
.work__peek img.is-cur{opacity:1}

.work__list{border-top:1px solid var(--ink-12)}
.work__row{border-bottom:1px solid var(--ink-12);position:relative}
.work__row a{
  position:relative;display:grid;
  grid-template-columns:4.5rem minmax(0,1fr) auto 5rem 2.2rem;
  align-items:center;gap:clamp(.8rem,2vw,2rem);
  padding:clamp(1.1rem,2.4vw,1.9rem) clamp(.5rem,1.6vw,1.6rem);
  transition:color .45s var(--e),padding .5s var(--e)
}
.work__row a::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--oranje);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--e)
}
.work__row a:hover::before{transform:scaleY(1);transform-origin:top}
/* De lijst was 1200 pixels wit zonder enig accent, midden op de pagina.
   Het accent zit nu waar het hoort: in de rij die je aanwijst, en als een
   rustig ritme in de nummers ernaast. Tekst op oranje is inkt. */
.work__row a:hover{color:var(--inkt);padding-left:clamp(1.2rem,2.6vw,2.6rem)}
.work__i{
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.16em;color:var(--oranje-tekst)
}
.work__row a:hover .work__i{color:var(--inkt)}
.work__t{font-size:var(--k-s);line-height:1;letter-spacing:-.02em}
.work__s{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  opacity:.78;justify-self:end;text-align:right
}
.work__y{font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;opacity:.78;justify-self:end}
.work__a{width:20px;height:20px;justify-self:end;opacity:0;transform:translateX(-10px);transition:opacity .4s var(--e),transform .4s var(--e)}
.work__row a:hover .work__a{opacity:1;transform:none}

/* ==========================================================================
   CIJFERS
   ========================================================================== */
/* De cijferband en de minds-sectie zijn allebei lila en raken elkaar. Als
   volvlak lopen ze in elkaar over; als losse plaat met ruimte eronder lezen
   het er twee. Vandaar rondom afgerond in plaats van alleen bovenaan. */
/* De cijferplaat op perzik in plaats van lila. Daaronder komt de
   minds-sectie, die óók lila is; twee even grote lila vlakken onder elkaar
   worden één lap. Perzik is geen nieuwe kleur maar een tint van het
   merkoranje — dezelfde die de fasepanelen al gebruiken. Gelijk in helderheid
   (1,1:1), anders in tint, dus je ziet twee vlakken en geen trap. */
.stats{
  background:var(--perzik);color:var(--inkt);
  padding:var(--v-3) var(--pad) var(--v-2);
  border-radius:var(--r-lg);
  max-width:calc(var(--maxw) + var(--pad) * 2);
  margin:0 auto var(--v-3)
}
.stats__in{max-width:var(--maxw);margin-inline:auto}
.stats .lbl{color:var(--ink-60)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:1rem}
.stats__grid li{border-top:1px solid rgba(26,20,32,.18);padding-top:1.4rem;display:flex;flex-direction:column}
.stats__grid li:nth-child(2){transition-delay:.08s}
.stats__grid li:nth-child(3){transition-delay:.16s}
.stats__grid li:nth-child(4){transition-delay:.24s}
.stats__n{
  display:block;font-family:var(--display);font-weight:800;
  font-size:var(--k-l);line-height:1;letter-spacing:-.03em;color:var(--inkt)
}
/* het accent zit in de eenheid, niet in het hele getal: één tik oranje per
   cijfer in plaats van een oranje vlak */
.stats__u{color:var(--oranje-tekst);
  font-style:normal;font-size:.42em;letter-spacing:0;margin-left:.08em;
  vertical-align:.24em;opacity:.8
}
.stats__grid p{margin-top:.8rem;color:var(--ink-60);max-width:24ch;font-size:var(--t-body)}

/* ==========================================================================
   MINDS
   ========================================================================== */
/* Stond op lila, net als het slotblok er direct onder: samen bijna 2000px
   onafgebroken lila met een naad erin. Dit vlak gaat naar papier, dan staat
   de afsluiter weer alleen. */
.minds{background:var(--paper);padding:var(--v-6) var(--pad) var(--v-6)}
.minds__head{max-width:var(--maxw);margin:0 auto var(--v-2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--kol-lead));gap:var(--gap);align-items:end}
.minds__head .h2 a{
  display:inline-block;
  background-image:linear-gradient(currentColor,currentColor);background-size:0 .055em;
  background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .55s var(--e)
}
.minds__head .h2 a:hover{background-size:100% .055em}
.minds__zij{display:grid;gap:1.3rem;justify-items:start}
.minds__note{color:rgba(26,20,32,.7);font-size:var(--t-body);transition-delay:.15s}
.minds__alle{transition-delay:.25s}
.minds__alle::before{background:var(--paper)}
.minds__alle:hover{color:var(--accent)}
.minds__grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:1.06fr .88fr 1.06fr;gap:var(--gap);align-items:start
}
.minds__col{display:grid;gap:var(--gap);align-content:start}
.minds__grid>:nth-child(2){margin-top:clamp(0rem,5vh,4rem)}
.minds__grid>:nth-child(3){margin-top:clamp(0rem,9vh,7rem)}
.card--line{
  border:1.5px solid rgba(26,20,32,.3);color:var(--accent);
  padding:clamp(1.3rem,2.2vw,1.9rem);display:grid;gap:1.1rem;align-content:start
}
.card--line:hover{background:var(--forest);color:var(--paper);border-color:var(--accent)}
.card--line .arw{width:20px;height:20px;transition:transform .45s var(--e)}
.card--line:hover .arw{transform:translateX(5px)}
.card--line h3{font-size:var(--k-5xs)}
.card{display:block;border-radius:var(--r);overflow:hidden;transition:transform .6s var(--e)}
.card:hover{transform:translateY(-8px)}
.card--photo{background:var(--white)}
.card--photo figure{margin:0;aspect-ratio:4/3.2;overflow:hidden}
/* Het formaat blync_nieuws snijdt al vanaf de bovenkant; hier alleen nog
   zorgen dat een resterend hoogteverschil niet van boven afgaat. */
.card--photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform 1s var(--e)}
.card--photo:hover img{transform:scale(1.05)}
.card__b{padding:clamp(1.2rem,2.2vw,1.9rem)}
.card--dark{background:var(--forest);color:var(--paper);padding:clamp(1.5rem,2.6vw,2.4rem);display:grid;gap:1.4rem;align-content:start}
.card__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.card__tags i{
  font-style:normal;border:1.5px solid currentColor;border-radius:999px;padding:.32rem .75rem .28rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;opacity:.88
}
.card--dark .card__tags{margin:0}

/* Alle artikelkaarten waren donker; twee ervan onder elkaar werden een muur,
   en de sectie had nergens een accent. Nu een reeks: één inkt, één oranje,
   en de laatste als omlijning. Tekst op oranje is inkt (6,4:1), nooit wit. */
.card--accent{
  background:var(--oranje);color:var(--inkt);
  padding:clamp(1.5rem,2.6vw,2.4rem);display:grid;gap:1.4rem;align-content:start
}
.card--accent h3{font-size:var(--k-3xs)}
.card--accent .card__tags{margin:0}
.card--accent .btn{justify-self:start;--bg:var(--inkt);--fg:var(--lila)}
.card--accent .btn::before{background:var(--wit)}
.card--accent .btn:hover{color:var(--inkt)}
.card h3{font-family:var(--display);font-weight:600;font-size:var(--k-4xs);line-height:1.25;letter-spacing:-.01em}
.card--dark h3{font-size:var(--k-3xs)}
.card__x{margin-top:.8rem;color:var(--ink-60);font-size:var(--t-body)}
.card--dark .btn{justify-self:start}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{
  position:relative;text-align:center;
  padding:var(--v-6) var(--pad) var(--v-6);overflow:hidden;
  /* De afsluiting krijgt een vlak. Dit is de belangrijkste actie van de
     pagina en stond als enige grote sectie helemaal blank. Lila, zodat de
     pagina begint en eindigt in dezelfde kleur — daartussen is alles wit. */
  background:var(--lila);
  /* De footer komt met afgeronde bovenhoeken uit het papier omhoog. Die stond
     hier tegen het lila aan: dan zie je twee lila driehoekjes in de hoeken en
     lijkt de footer erop geplakt. Onderaan afgerond plus een strook papier
     eronder, dan klopt het weer — en alleen ónderaan, want bovenaan sluit dit
     vlak op de sectie erboven aan en zouden dáár de hoekjes gaan opvallen. */
  border-radius:0 0 var(--r-lg) var(--r-lg);
  margin-bottom:var(--v-2)
}
.contact__badge{position:relative;width:clamp(96px,10vw,132px);margin:0 auto 2.4rem}
.contact__badge svg{width:100%;height:auto;animation:spin 22s linear infinite}
.contact__badge text{
  font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-60)
}
@keyframes spin{to{transform:rotate(360deg)}}
/* In het midden van de stempel stond een oog — het merkmotief van Blync.
   Nu staat daar het beeldmerk zelf. */
.contact__merk{
  position:absolute;left:50%;top:50%;width:34%;
  transform:translate(-50%,-50%);color:var(--inkt);pointer-events:none
}
.contact__merk svg{width:100%;height:auto;display:block;fill:currentColor}
/* Stond op --k-mega, de trap van een paginatitel. Op pagina's waar de hero
   drie regels heeft valt die terug naar --k-mega-lang (89px), en dan was de
   slotkop met 101px groter dan de titel van de pagina — de afsluiter
   schreeuwde harder dan waar de pagina over gaat. Een slotblok is een sectie,
   dus de sectietrap. */
.contact__h{font-size:var(--k-m)}
/* op smalle schermen is 'engagement?' het langste woord van de site;
   vw-schaal houdt het altijd binnen de marge */
@media (max-width:640px){.contact__h{font-size:9.2vw}}
.contact__h em{font-style:normal;color:var(--accent)}
.contact__lead{margin:1.4rem auto 0;color:var(--ink-60);font-size:var(--t-lead)}
.contact__row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.6rem}
.chip{
  display:inline-flex;align-items:center;gap:1rem;padding:1rem 1.15rem 1rem 1.6rem;border-radius:999px;
  font-family:var(--text);font-weight:600;font-size:var(--t-body);
  transition:transform .5s var(--e),box-shadow .5s var(--e);will-change:transform
}
.chip:hover{box-shadow:var(--lift-1)}
.chip em{
  font-style:normal;font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;
  background:rgba(255,255,255,.5);border-radius:999px;padding:.55rem .95rem .5rem
}
.chip svg{width:34px;height:34px;padding:7px;border-radius:50%;background:rgba(255,255,255,.55)}
.chip--sage{background:var(--sage);color:var(--sage-op)}
/* op een lila vlak valt een lila chip weg; daar wordt hij wit */
.contact .chip--sage,
.chero .chip--sage{background:var(--wit);color:var(--inkt)}
.chip--peach{background:var(--peach);color:var(--rust)}
.chip--lav{background:var(--lav);color:var(--violet)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* De footer was 866px hoog en bestond voor de helft uit lucht rond een
   watermerk van 439px. Klantverzoek 31-10-2026: een stuk kleiner, en niet
   afgesneden. De bovenmarge gaat van --v-3 naar --v-1. */
.foot{background:var(--ink);color:var(--paper);padding:var(--v-1) var(--pad) 1.6rem;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.foot__top{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:var(--gap)}
.foot__col ul{display:grid;gap:.45rem}
.foot__col a{position:relative;display:inline-block;color:var(--paper-60);transition:color .35s var(--e),transform .35s var(--e)}
.foot__col a:hover{color:var(--sage);transform:translateX(5px)}
.foot__col--wide{justify-self:end;text-align:right}
/* .foot__col a zet inline-block en wint op specificiteit; zonder deze
   kolomselector komen mailadres en telefoonnummer op dezelfde regel te staan
   zodra het lettertype klein genoeg is dat ze samen passen. */
.foot__col .foot__big{
  display:block;font-family:var(--display);font-weight:800;
  font-size:var(--k-3xs);letter-spacing:-.02em;color:var(--paper)!important;line-height:1.35
}
.foot__col .foot__big:hover{color:var(--sage)!important;transform:none!important}
.foot__mark{max-width:var(--maxw);margin:var(--v-0) auto 0}
/* Het oude woordmerk was 150×46 (verhouding 3,3); het B&-teken is 176×110
   (1,6). Op 100% breedte wordt dat twee keer zo hoog — vandaar een plafond.
   En de kleur moet via color: de paden in het symbool staan op currentColor,
   dus een fill op de svg bereikt ze niet. */
/* Het watermerk stond op 38rem breed en werd daarmee 439px hoog — meer dan de
   rest van de footer bij elkaar, en de onderkant liep tegen de scheidingslijn
   aan. Nu half zo breed, en het mag ook niet hoger worden dan 13rem. */
/* Géén max-height erbij: samen met max-width knijpt dat het kader naar een
   andere verhouding dan de viewBox (1,462 tegen 1,385) en wordt het beeldmerk
   onderaan afgesneden. De breedte alleen bepaalt de maat; de hoogte volgt. */
.foot__mark svg{width:100%;max-width:min(19rem,34vw);height:auto;
  display:block;margin-inline:auto;color:var(--wit);fill:currentColor;
  /* dekking op het geheel, niet op de kleur: de B en de ampersand overlappen
     elkaar en zouden anders dubbel optellen op de overlap */
  opacity:.12}
.foot__base{
  max-width:var(--maxw);margin:1.6rem auto 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:var(--t-klein);color:var(--paper-60)
}
.foot__base a:hover{color:var(--sage)}
/* de credit is een link, maar mag niet schreeuwen: alleen een dunne streep */
.foot__maker a{
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.3);transition:text-decoration-color .3s var(--e)
}
.foot__maker a:hover{text-decoration-color:currentColor}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .minds__grid{grid-template-columns:1fr 1fr}
  .minds__col{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
  .overlay__in{grid-template-columns:1fr;align-items:start;row-gap:1.2rem}
  /* Het sfeerbeeld hing aan zweven en kreeg op een telefoon dus nooit een
     bron; daarom stond het hier uit. Nu zet het menu zelf een beeld klaar --
     dat van de pagina waar je staat, anders het eerste item -- en komt het
     bovenaan, waar een half scherm lila leeg bleef. De zijkolom lost op, zodat
     beeld, zoekveld en gegevens regels van dezelfde kolom worden. */
  .overlay__aside{display:contents}
  .overlay{padding-top:6rem}
  /* Geen beeldverhouding hier: met een maximumhoogte erbij rekende de browser
     de breedte terug en stond het beeld los in de kolom. Vaste hoogte, volle
     kolombreedte met een rem-plafond voor de tablet -- de uitsnede doet de rest. */
  .overlay__peek{order:-1;aspect-ratio:auto;height:clamp(7rem,20vh,12rem);width:min(100%,26rem);justify-self:start}
  .js .overlay__peek,.js .overlay .zoek,.js .overlay__meta{
    opacity:0;transform:translateY(20px);
    transition:opacity .6s var(--e) .5s,transform .6s var(--e) .5s
  }
  .overlay.is-open .overlay__peek,
  .overlay.is-open .zoek,
  .overlay.is-open .overlay__meta{opacity:1;transform:none}
}
/* Een telefoon in de breedte of een klein scherm: daar is het beeld geen
   winst meer maar een extra scherm scrollen voor het telefoonnummer. */
@media (max-width:1100px) and (max-height:700px){
  .overlay{padding-top:5rem}
  .overlay__peek{display:none}
  .stats__grid{grid-template-columns:1fr 1fr}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__col--wide{grid-column:1/-1;justify-self:start;text-align:left;margin-top:1rem}
}
/* de werkregel loopt eerder vast dan de rest van de lay-out: bij ~1000px
   past de langste projectnaam niet meer naast het dienstenlabel */
@media (max-width:1000px){
  .work__row a{grid-template-columns:2.6rem 1fr auto;row-gap:.35rem;padding-block:1.1rem}
  .work__s{grid-column:2/-1;justify-self:start;text-align:left}
  .work__y,.work__a{display:none}
  .work__peek{display:none}
}
@media (max-width:860px){
  .panel__in{grid-template-columns:1fr}
  .panel__fig{aspect-ratio:16/11;order:-1}
  .panel[data-panel="1"],.panel[data-panel="2"],.panel[data-panel="3"]{position:relative;top:auto;margin-top:1rem}
  .minds__grid{grid-template-columns:1fr}
  .minds__grid>*{margin-top:0!important}
  /* de 1100px-regel zette deze kolom op 3 baantjes; hier weer terug naar één */
  .minds__col{grid-template-columns:1fr;gap:var(--gap)}
  .minds__head{grid-template-columns:1fr}
  .bar__cta span{display:none}
  .bar__cta{padding:.8rem}
  .bar__cta .arw{width:18px;height:18px}
}
/* --- mobiele hero: van gestrooid veld naar een veegbare kaartenrij ------- */
@media (max-width:760px){
  .hero{
    display:flex;flex-direction:column;justify-content:center;align-items:stretch;
    gap:var(--v-1);min-height:auto;padding:7.5rem 0 3.5rem
  }
  .hero__in{order:1;padding-inline:var(--pad)}
  .hero__field{
    order:2;position:relative;inset:auto;z-index:0;pointer-events:auto;
    display:flex;gap:.7rem;padding:0 var(--pad) .6rem;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scroll-padding-left:var(--pad);scrollbar-width:none
  }
  .hero__field::-webkit-scrollbar{display:none}
  .pic{
    position:relative;left:auto;top:auto;flex:none;
    width:min(46vw,230px);scroll-snap-align:start;opacity:1!important;
    transform:translate3d(var(--kx,0),var(--ky,0),0) rotate(calc(var(--r) + var(--kr,0deg)))!important;
    animation:none!important;
    margin-block:calc(4vw * 1)
  }
  .pic:nth-child(even){margin-top:calc(8vw)}
  .hero__cue{display:none}
  .tags li{font-size:var(--t-micro);padding:.35rem .7rem .3rem}
}
@media (max-width:620px){
  .stats__grid{grid-template-columns:1fr}
  .chip{width:100%;justify-content:space-between}
  .tick{transform:rotate(-2deg) scaleX(1.12)}
  .foot__top{grid-template-columns:1fr}
}

/* ==========================================================================
   MINDER BEWEGING
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.split-c,.overlay__list a,.overlay__aside,
  .overlay__peek,.overlay .zoek,.overlay__meta{opacity:1!important;transform:none!important}
  .pic{opacity:1!important}
  .blink{display:none}
  .cursor{display:none}
  .tick{transform:none}
}

/* ==========================================================================
   CONTACTPAGINA
   ========================================================================== */

/* ---------- hero met live bereikbaarheid ----------
   De contactpagina stond helemaal in het wit: vier witte secties op rij, en
   daarin een wit kaartje met een haarlijn eromheen. Lila kwam voor 1% van de
   pagina voor, tegen 28% op de homepage — je klikte door en kwam in een
   andere site terecht. De hero krijgt daarom dezelfde lila grond als de
   homepage.  Anders dan .hero staat het vlak hier op de sectie zelf en niet
   op een ::before: er zit geen portretveld onder dat overgeschilderd kan
   worden, en de kleurbalk van de telefoon leest de sectie-achtergrond. */
.chero{padding:var(--v-7) var(--pad) var(--v-3);background:var(--lila)}
.chero__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.85fr);
  gap:clamp(2rem,5vw,5rem);align-items:end
}
.chero__h{font-size:var(--k-xl);margin:1.4rem 0 0}
.chero__h em{font-style:normal;color:var(--accent)}
.chero__lead{max-width:44ch;margin-top:1.6rem;color:var(--ink-60);font-size:var(--t-lead);transition-delay:.2s}
.chero__row{justify-content:flex-start;max-width:var(--maxw);margin-inline:auto;margin-top:var(--v-2);transition-delay:.3s}

/* Wit op lila is 1,46:1 — als vlak genoeg om als kaart te lezen, maar de
   haarlijn eromheen haalde op die grond nog 1,27:1 en was dus weg. Die is
   vervangen door een schaduw: die tilt de kaart op in plaats van hem te
   omlijnen, en werkt wel op een getinte ondergrond. */
.now{
  background:var(--white);border-radius:var(--r);
  box-shadow:var(--lift-2);
  padding:clamp(1.3rem,2.2vw,1.8rem);transition-delay:.15s
}
.now .lbl{margin-bottom:.9rem}
.now__state{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:800;font-size:var(--t-lead);letter-spacing:-.01em;line-height:1.2
}
.now__dot{width:10px;height:10px;border-radius:50%;background:var(--ink-12);flex:none}
/* Het lampje dat "we zijn nu bereikbaar" zegt stond op --forest, en dat is
   sinds de merkwissel gewoon inkt — even donker als de tekst ernaast, dus het
   signaal was er niet meer. Oranje is de signaalkleur van dit merk. */
.now.is-open .now__dot{background:var(--oranje);animation:pulse 2.4s var(--e) infinite}
.now.is-shut .now__dot{background:var(--fout);opacity:.55}
.now__clock{display:none}
.js .now__clock{
  display:flex;align-items:baseline;gap:.5rem;margin-top:.5rem;
  font-family:var(--display);font-weight:700;font-size:2.4rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums
}
.now__clock em{font-family:var(--text);font-style:normal;font-weight:400;font-size:var(--t-klein);color:var(--ink-60);letter-spacing:0}
.now__hours{margin-top:1.3rem;border-top:1px solid var(--ink-12);padding-top:.9rem;display:grid;gap:.28rem}
.now__hours li{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:var(--t-klein);color:var(--ink-60)
}
.now__hours li em{font-style:normal;font-variant-numeric:tabular-nums}
.now__hours li.is-today{color:var(--ink);font-weight:600}
.now__hours li.is-today span::before{content:"→ ";color:var(--accent)}

/* ---------- formulier ---------- */
/* Onder de verstuurknop stond 162px niets. Die ruimte hoorde bij een formulier
   dat langer was dan het nu is. */
.form{padding:var(--v-3) var(--pad) var(--v-2)}
.form__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start
}
.form__aside{position:sticky;top:var(--v-6)}
.form__note{margin-top:1.4rem;color:var(--ink-60);max-width:34ch;transition-delay:.15s}
.form__steps{margin-top:2rem;display:grid;gap:.9rem;transition-delay:.25s}
.form__steps li{display:flex;align-items:center;gap:.9rem;color:var(--ink-60);font-size:var(--t-body)}
.form__steps i{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--sage);color:var(--sage-op);
  display:grid;place-items:center;font-style:normal;
  font-family:var(--display);font-weight:800;font-size:var(--t-label)
}

.form__box{
  position:relative;background:var(--white);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.8rem);overflow:hidden;transition-delay:.1s
}
.form__bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--ink-12)}
.form__bar i{display:block;height:100%;width:0;background:var(--forest);transition:width .5s var(--e)}

.fset{border:0;margin:0 0 1.8rem;padding:0}
.fset__l{
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-60);padding:0;margin-bottom:.9rem
}
.pick{display:flex;flex-wrap:wrap;gap:.45rem}
.pick__b{
  border:1.5px solid var(--ink-12);border-radius:999px;padding:.66rem 1rem .6rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  /* Een lange dienstnaam past op een smal scherm niet op één regel en vult dan
     de hele rij. Links uitlijnen zet die tekst op dezelfde lijn als de korte
     knoppen ernaast; gecentreerd leest hij als een fout. Bij een knop die zijn
     tekst wél omsluit maakt het geen verschil. */
  text-align:left;line-height:1.3;text-wrap:balance;
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e),transform .3s var(--e)
}
/* op een telefoon zit de winst in de spatiëring: dat scheelt bij een naam van
   dertig tekens zo'n twaalf pixels, genoeg om hem vaker heel te houden */
@media (max-width:480px){
  .pick__b{letter-spacing:.055em;padding-inline:.85rem}
}
.pick__b:hover{border-color:var(--ink)}
.pick__b[aria-pressed="true"]{background:var(--forest);border-color:var(--accent);color:var(--paper)}

.f2{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.4rem}
.fld{position:relative;margin:0 0 .4rem;padding-top:1.5rem}
.fld input,.fld textarea{
  width:100%;border:0;border-bottom:1.5px solid var(--ink-12);background:none;
  font-family:var(--text);font-size:var(--t-body);color:var(--ink);
  padding:.55rem 0;border-radius:0;
  transition:border-color .35s var(--e)
}
.fld textarea{resize:vertical;min-height:7rem;line-height:1.55}
.fld label{
  position:absolute;left:0;top:1.9rem;pointer-events:none;color:var(--ink-60);
  font-size:var(--t-body);transform-origin:left top;
  transition:transform .32s var(--e),color .32s var(--e)
}
.fld label i{font-style:normal;color:var(--fout)}
.fld input:focus,.fld textarea:focus{outline:0;border-bottom-color:var(--accent)}
.fld input:focus + label,.fld textarea:focus + label,
.fld input:not(:placeholder-shown) + label,.fld textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.65rem) scale(.7);color:var(--ink-60)
}
.fld--area{padding-top:1.5rem}
.fld__e{
  display:block;min-height:1.1rem;margin-top:.35rem;
  font-size:var(--t-klein);color:var(--fout);opacity:0;transform:translateY(-4px);
  transition:opacity .3s var(--e),transform .3s var(--e)
}
.fld.is-bad input,.fld.is-bad textarea{border-bottom-color:var(--fout)}
.fld.is-bad .fld__e{opacity:1;transform:none}
.fld.is-ok input,.fld.is-ok textarea{border-bottom-color:var(--oranje-tekst)}
.fld__count{
  position:absolute;right:0;bottom:.35rem;font-size:var(--t-label);color:var(--ink-60);
  font-variant-numeric:tabular-nums;pointer-events:none
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:1.6rem}
.form__send[disabled]{opacity:.55;pointer-events:none}
.form__small{font-size:var(--t-klein);color:var(--ink-60)}
.form__small a{text-decoration:underline;text-underline-offset:3px}
.form__msg{
  margin-top:1.2rem;padding:0;max-height:0;overflow:hidden;
  border-radius:var(--r-s);font-size:var(--t-body);
  transition:max-height .45s var(--e),padding .45s var(--e)
}
.form__msg.is-on{max-height:14rem;padding:1rem 1.2rem}
.form__msg.is-good{background:var(--sage);color:var(--sage-op)}
/* een fout in de actiekleur leest als een knop; daarom een eigen zacht rood */
.form__msg.is-bad{background:#fdecea;color:var(--fout)}
.form__msg.is-note{background:var(--lav);color:var(--violet)}
.form__msg b{font-family:var(--display);font-weight:800;display:block;margin-bottom:.2rem}

/* ---------- adres ---------- */
/* Deze sectie is bewust wit: hij is de rust tussen de planner en Julie. Even
   stond hij op lila, maar dan had de onderste helft van de pagina drie
   gekleurde banen achter elkaar en werd het een streepjespatroon. De volgorde
   is nu kleur · rust · kleur · rust · kleur · donker.
   De witte kaart erin was op een witte grond onzichtbaar; een schaduw tilt hem
   op zonder dat er een tweede kleur bij hoeft. */
.waar{padding:var(--v-2) var(--pad) var(--v-5)}
/* De kaart is zelf lila; op een lila sectie zou hij aan de rand weglopen.
   De witte kaartrand eromheen (de padding hieronder) houdt de twee uit
   elkaar — 1,46:1 tussen wit en lila is voor een vlak genoeg. */
.waar__in{
  max-width:var(--maxw);margin-inline:auto;background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--lift-2);
  padding:clamp(.9rem,1.4vw,1.4rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch
}
.kaart{border-radius:calc(var(--r-lg) - clamp(.9rem,1.4vw,1.4rem));overflow:hidden}
.waar__txt{padding:clamp(1.8rem,3.4vw,3.4rem);align-self:center}
.waar__txt .h2{font-size:var(--k-s)}
.waar__adr{
  font-style:normal;margin-top:1.4rem;color:var(--ink-60);
  font-size:var(--t-lees);line-height:1.7
}
.waar__btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem;transition-delay:.12s}
.kaart{position:relative;min-height:clamp(260px,34vw,420px);transition-delay:.1s}
.kaart svg{position:absolute;inset:0;width:100%;height:100%}
.kaart__ping{transform-origin:236px 200px;animation:ping 3.4s var(--e) infinite}
@keyframes ping{0%{transform:scale(.55);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}

/* ---------- Julie + zakelijke gegevens ---------- */
/* Het blok staat direct voor de footer, en die komt met dezelfde ronding
   omhoog. Twee volvlakken bot op elkaar laat de ronding verdwijnen en levert
   een harde naad. Daarom sluit dit blok zelf af — ronde onderhoeken en een
   strook papier eronder, zoals de footer op de andere pagina's ook uit het
   papier omhoogkomt. */
/* Dit blok was inkt en stond pal boven de inktkleurige footer: twee donkere
   vlakken op elkaar met een papierstrook van 40px ertussen, wat als één
   donkere massa van ruim 1500px leest.
   Daarna stond het een tijdje op perzik — maar dan staan de planner en dit
   blok allebei op perzik en lezen ze als een paar. Lila sluit de pagina nu af
   zoals de hero hem opent, met de perzikken planner als enige kleuraccent
   ertussen. Het portret staat zelf op een lila studiodoek; de witte rand
   eromheen (hieronder) houdt de twee uit elkaar. */
.julie{
  background:var(--lila);color:var(--inkt);
  padding:var(--v-4) var(--pad);
  border-radius:var(--r-lg);
  margin-bottom:var(--v-2)
}
/* Dit blok staat vlak voor de slot-cta, en die is lila. Twee bijna gelijke
   vlakken met een witte naad ertussen leest als een fout. Daarom een keuze;
   let op de volgorde: na de basisregel, anders wint --lila alsnog. */
.julie--perzik{background:var(--perzik)}
.julie--papier{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink-12)}
.julie__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,4rem);align-items:end
}
.julie__h{font-size:var(--k-m);transition-delay:.08s}
.julie__h em{font-style:normal;color:var(--accent)}
.julie__links{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:1.8rem;transition-delay:.18s}
.julie__links a{
  font-family:var(--display);font-weight:800;font-size:var(--k-5xs);letter-spacing:-.015em;
  position:relative
}
.julie__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-.12em;height:2px;background:var(--inkt);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e)
}
/* De streep is inkt en niet oranje: op lila haalt het merkoranje 1,94:1 en dan
   zie je een streep van 2px gewoon niet. */
.julie__links a:hover{color:var(--inkt)}
.julie__links a:hover::after{transform:scaleX(1);transform-origin:left}
/* wolkje bij een hero-portret -------------------------------------------- */
.wolk{
  position:absolute;top:50%;z-index:3;pointer-events:none;
  display:grid;gap:.12rem;padding:.6rem .85rem;
  background:var(--ink);color:var(--paper);border-radius:var(--r-s);
  white-space:nowrap;
  box-shadow:var(--lift-1);
  opacity:0;transition:opacity .28s var(--e),transform .34s var(--e)
}
/* de kaart staat gedraaid; het wolkje draait terug zodat het recht blijft */
.wolk--rechts{left:100%;transform:translate(.2rem,-50%) rotate(calc(var(--r) * -1)) scale(.92)}
.wolk--links {right:100%;transform:translate(-.2rem,-50%) rotate(calc(var(--r) * -1)) scale(.92)}
.pic.is-dichtbij .wolk--rechts{opacity:1;transform:translate(.85rem,-50%) rotate(calc(var(--r) * -1)) scale(1)}
.pic.is-dichtbij .wolk--links {opacity:1;transform:translate(-.85rem,-50%) rotate(calc(var(--r) * -1)) scale(1)}

/* het puntje dat naar de foto wijst */
.wolk::before{
  content:"";position:absolute;top:50%;width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent
}
.wolk--rechts::before{right:100%;margin-top:-6px;border-right:7px solid var(--ink)}
.wolk--links::before {left:100%;margin-top:-6px;border-left:7px solid var(--ink)}

.wolk b{
  font-family:var(--display);font-weight:800;font-size:var(--t-klein);letter-spacing:-.01em;line-height:1.2
}
.wolk i{
  font-style:normal;font-family:var(--display);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--sage)
}
/* max-content houdt een korte rol op één regel; pas boven 17rem breekt hij */
.wolk{width:max-content;max-width:17rem}
.wolk i{white-space:normal;text-wrap:balance}


/* ---- aanraakscherm ------------------------------------------------------
   Een vinger heeft geen "in de buurt", dus daar opent het wolkje op een tik.
   Alleen onder 1100px: daarboven ligt het portretveld op z-index -1 achter de
   tekst en valt er niets te tikken. Het wolkje ligt ín de kaart, want de
   strip knipt alles weg wat buiten zijn rand steekt; een stipje in de hoek
   verraadt dat er iets te tikken valt. */
@media (max-width:1100px){
  .wolk{display:none}
  .pic__dot{
    position:absolute;right:.5rem;bottom:.5rem;z-index:4;
    width:1.35rem;height:1.35rem;border-radius:999px;pointer-events:none;
    background:var(--paper);
    box-shadow:var(--lift-1);
    transition:opacity .22s var(--e),transform .3s var(--e)
  }
  .pic__dot::before,.pic__dot::after{
    content:"";position:absolute;inset:50% auto auto 50%;
    width:.6rem;height:2px;border-radius:2px;background:var(--ink);
    transform:translate(-50%,-50%)
  }
  .pic__dot::after{transform:translate(-50%,-50%) rotate(90deg)}
  .pic.is-open .pic__dot{opacity:0;transform:scale(.6)}
  .tikbaar .wolk{
    display:grid;left:.45rem;right:.45rem;top:auto;bottom:.45rem;
    width:auto;max-width:none;white-space:normal;
    background:rgba(26,20,32,.88);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    padding:.5rem .65rem;border-radius:var(--r-s);
    transform:translateY(.4rem) scale(.96);transform-origin:50% 100%
  }
  .tikbaar .wolk::before{display:none}
  .tikbaar .pic.is-open .wolk{opacity:1;transform:none}
  .tikbaar .wolk i{white-space:normal}
}
@media (max-width:1100px) and (prefers-reduced-motion:reduce){
  .tikbaar .wolk{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .wolk{transition:opacity .2s linear}
  .pic.is-dichtbij .wolk--rechts,.pic.is-dichtbij .wolk--links{transform:translate(.85rem,-50%) rotate(calc(var(--r) * -1))}
}

/* luisterversie bij een artikel ------------------------------------------ */
.luister{
  display:inline-flex;align-items:center;gap:.85rem;position:relative;
  margin:var(--v-0) 0 0;padding:.5rem .5rem .5rem .55rem;
  background:var(--white);border-radius:999px;
  box-shadow:var(--lift-1)}
.luister__knop{
  display:inline-flex;align-items:center;gap:.65rem;
  border:0;background:none;padding:0;cursor:pointer;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:var(--t-klein);letter-spacing:-.01em
}
.luister__knop:hover .luister__icoon{background:var(--forest)}
.luister__icoon{
  display:grid;place-items:center;width:2.1rem;height:2.1rem;flex:none;
  border-radius:50%;background:var(--ink);transition:background .3s var(--e)
}
/* vier streepjes die als een equalizer bewegen zodra hij speelt */
.luister__icoon i{
  display:none;width:2px;height:.75rem;background:var(--paper);border-radius:1px
}
.luister__icoon::before{
  content:"";width:0;height:0;margin-left:2px;
  border-left:.55rem solid var(--paper);
  border-top:.36rem solid transparent;border-bottom:.36rem solid transparent
}
.luister.is-bezig .luister__icoon{background:var(--forest)}
.luister.is-bezig .luister__icoon::before{display:none}
.luister.is-bezig .luister__icoon i{display:block;animation:eq .9s var(--e) infinite}
.luister.is-bezig .luister__icoon{display:flex;gap:2px;align-items:center;justify-content:center}
.luister.is-bezig .luister__icoon i:nth-child(2){animation-delay:.15s}
.luister.is-bezig .luister__icoon i:nth-child(3){animation-delay:.3s}
.luister.is-bezig .luister__icoon i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:.35rem}50%{height:.95rem}}

.luister__duur{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.13em;color:var(--ink-60);padding-right:.75rem
}
/* dunne voortgangslijn langs de onderkant van de pil */
.luister__balk{
  position:absolute;left:1rem;right:1rem;bottom:.28rem;height:2px;
  background:var(--ink-12);border-radius:2px;overflow:hidden;opacity:0;
  transition:opacity .3s var(--e)
}
.luister.is-bezig .luister__balk{opacity:1}
.luister__balk i{
  display:block;width:100%;height:100%;background:var(--forest);
  transform:scaleX(0);transform-origin:left;transition:transform .25s linear
}
@media (prefers-reduced-motion:reduce){
  .luister.is-bezig .luister__icoon i{animation:none;height:.7rem}
}

/* portret van de contactpersoon ------------------------------------------ */
/* Tekst en foto eindigen op dezelfde lijn; anders blijft er onder de korte
   tekstkolom een gat van bijna 200px staan. */
.julie--foto .julie__in{align-items:end}
/* Twee eigenaren, dus ook twee portretten. Eén wrapper eromheen zodat de
   mobiele volgorde (die op .julie__fig stond) op het blok kan blijven staan. */
.julie__figs{justify-self:end;width:min(100%,22rem)}
.julie__figs--duo{width:min(100%,26rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,1vw,.8rem)}
.julie__figs--duo .julie__fig{width:100%}
.julie__figs--duo .julie__naam{font-size:var(--t-klein)}
.julie__figs--duo .julie__fig figcaption{left:.9rem;bottom:.9rem;max-width:calc(100% - 1.8rem);padding:.45rem .7rem}
.julie__fig{
  margin:0;position:relative;justify-self:end;
  width:min(100%,22rem);aspect-ratio:4/5;border-radius:var(--r);
  background:var(--wit);padding:clamp(.7rem,1vw,1rem);
  box-shadow:var(--lift-2)}
.julie__fig img{
  width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  border-radius:calc(var(--r) - clamp(.7rem,1vw,1rem))
}
/* niet van rand tot rand: dan ligt het als een balk over de foto in plaats van
   als een label in de hoek */
.julie__fig figcaption{
  position:absolute;left:1.45rem;bottom:1.45rem;max-width:calc(100% - 2.9rem);
  display:grid;gap:.1rem;padding:.6rem .95rem;border-radius:calc(var(--r) - .6rem);
  background:rgba(26,20,32,.88);backdrop-filter:blur(10px)
}
.julie__naam{font-family:var(--display);font-weight:800;font-size:var(--t-body);color:var(--paper);letter-spacing:-.01em}
.julie__rol{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--sage)
}

/* de zakelijke gegevens staan in de tekstkolom, onder de contactlinks */
.julie--foto .zaken{margin-top:var(--v-1);max-width:30rem}
@media (max-width:860px){
  /* Onder elkaar hoort het gezicht vóór de kamer-van-koophandelnummers.
     display:contents haalt de tekstkolom weg als doos, zodat de losse delen
     zelf in het grid staan en met order te ordenen zijn. */
  .julie--foto .julie__txt{display:contents}
  .julie--foto .julie__in{display:grid;grid-template-columns:1fr}
  .julie--foto .lbl{order:1}
  .julie--foto .julie__h{order:2}
  .julie--foto .julie__links{order:3}
  .julie--foto .julie__figs{order:4;margin-top:.6rem}
  .julie--foto .zaken{order:5;margin-top:var(--v-1);max-width:none}
  .julie__figs{justify-self:start;width:min(100%,17rem)}
  .julie__figs--duo{width:min(100%,22rem)}
}

.zaken{display:grid;gap:.55rem;transition-delay:.26s}
.zaken li{
  display:flex;justify-content:space-between;gap:1.5rem;
  border-top:1px solid rgba(26,20,32,.22);padding-top:.55rem;
  font-size:var(--t-klein)
}
.zaken span{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-60);padding-top:.2rem
}
.zaken em{font-style:normal;font-variant-numeric:tabular-nums}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .chero__in{grid-template-columns:1fr}
  .now{max-width:420px}
  .form__in{grid-template-columns:1fr}
  .form__aside{position:static}
  .julie__in{grid-template-columns:1fr}
}
@media (max-width:860px){
  .waar__in{grid-template-columns:1fr}
  .kaart{order:-1;min-height:240px}
  .f2{grid-template-columns:1fr}
  .chero__row{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  .kaart__ping{animation:none;opacity:0}
}

.form__msg code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(255,255,255,.55);border-radius:var(--r-xs);padding:.1em .35em
}
.form__msg a{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   OVER ONS
   ========================================================================== */

/* ---------- hero: de connectie als constellatie ---------- */
/* Alle hero's staan op lila. De homepage en de contactpagina deden dat al;
   de rest opende in het wit, waardoor je bij elke doorklik in een andere site
   leek te komen. Nu begint elke pagina in de merkkleur en is alles daarna wit
   tot de afsluiting. */
.ohero{padding:var(--v-7) var(--pad) var(--v-2);background:var(--lila)}
.ohero__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,5rem);align-items:center
}
.ohero__h{font-size:var(--k-xl-lang);margin:1.4rem 0 0}
.ohero__h em{font-style:normal;color:var(--accent)}
.ohero__lead{max-width:42ch;margin-top:1.6rem;color:var(--ink-60);font-size:var(--t-lead);transition-delay:.18s}
.ohero__btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem;transition-delay:.3s}

/* ---------- fotocollage in de hero van /over-ons/ ---------- */
/* Twee kiekjes schuin over elkaar, met de namen er handgeschreven bij. De
   maten staan in procenten van het vierkante vlak, zodat de hele compositie
   meeschaalt en de pijl altijd op dezelfde plek uitkomt. */
.coll{
  position:relative;aspect-ratio:1;width:100%;max-width:620px;
  justify-self:center;transition-delay:.1s
}
.coll__f{
  position:absolute;margin:0;overflow:hidden;border-radius:var(--r-xs);
  box-shadow:var(--lift-3)}
.coll__f img{width:100%;height:100%;object-fit:cover;display:block}
.coll__f--a{left:1%;top:5%;width:56%;aspect-ratio:4/5;transform:rotate(-3.5deg);z-index:1}
.coll__f--b{left:40%;top:36%;width:50%;aspect-ratio:4/5;transform:rotate(4.5deg);z-index:2}
.coll__n{
  position:absolute;z-index:3;color:var(--inkt);
  font-family:Caveat,"Bradley Hand",cursive;font-weight:400;line-height:1;
  font-size:clamp(1.6rem,3.4vw,2.6rem)
}
/* de pijl hangt aan de naam, niet aan het vlak: verplaats je de naam, dan gaat
   het pijltje mee */
.coll__p{position:absolute;width:2.1em;height:2.45em;color:var(--inkt)}
/* De punt moet op het gezicht uitkomen, niet in de lucht erboven. Nagemeten op
   het gerenderde beeld: Noa staat op 32%/38% van het vlak, Geke op 72%/62%. */
.coll__n--1{left:1%;top:-3%;transform:rotate(-7deg)}
.coll__n--1 .coll__p{left:80%;top:62%}
.coll__n--2{right:0;top:21%;transform:rotate(6deg)}
.coll__n--2 .coll__p{right:78%;top:62%}

@media (max-width:900px){
  .coll{max-width:460px;margin-top:1.5rem}
}

.web{position:relative;aspect-ratio:1;width:100%;max-width:640px;justify-self:center;transition-delay:.1s}
.web__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.js .web__lines path{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.5s var(--e)}
.web.is-in .web__lines path{stroke-dashoffset:0}
.web__lines path:nth-child(2){transition-delay:.1s}
.web__lines path:nth-child(3){transition-delay:.2s}
.web__lines path:nth-child(4){transition-delay:.3s}
.web__lines path:nth-child(5){transition-delay:.45s}
.web__lines path:nth-child(6){transition-delay:.55s}

.node{
  position:absolute;left:var(--l);top:var(--t);
  width:calc(var(--s) * 2);aspect-ratio:1;margin:calc(var(--s) * -1) 0 0 calc(var(--s) * -1);
  border-radius:50%;
  box-shadow:var(--lift-3);
  transition:transform .55s var(--e),box-shadow .55s var(--e)
}
.node img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);border-radius:50%;display:block}
.node i{
  position:absolute;left:50%;bottom:-.4rem;transform:translate(-50%,6px);
  background:var(--ink);color:var(--paper);border-radius:999px;padding:.32rem .7rem .28rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  font-style:normal;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .3s var(--e),transform .3s var(--e)
}
.web:hover .node{transform:scale(.94);box-shadow:var(--lift-3)}
.web .node:hover{transform:scale(1.07);box-shadow:var(--lift-3)}
.node:hover i{opacity:1;transform:translate(-50%,0)}
.js .web.is-in .node{animation:bob 7s ease-in-out infinite}
.web.is-in .node--2{animation-delay:-1.4s}
.web.is-in .node--3{animation-delay:-2.9s}
.web.is-in .node--4{animation-delay:-4.1s}
.web.is-in .node--5{animation-delay:-5.6s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -1.6%}}
.js .node{opacity:0;transition:opacity .7s var(--e),transform .55s var(--e),box-shadow .55s var(--e)}
.web.is-in .node{opacity:1}
.web.is-in .node--1{transition-delay:.05s}
.web.is-in .node--2{transition-delay:.22s}
.web.is-in .node--3{transition-delay:.34s}
.web.is-in .node--4{transition-delay:.46s}
.web.is-in .node--5{transition-delay:.58s}

/* sage variant van de ticker */
.tick-wrap--up{margin-top:var(--v-1)}
.tick--sage{background:var(--sage);color:var(--accent);transform:rotate(1.2deg) scaleX(1.06)}
.tick--sage .tick__t i{color:var(--accent);opacity:.45}

/* ---------- we doen het anders ---------- */
/* ==========================================================================
   VERHAAL — lopende tekst, eventueel met een beeld ernaast
   De klant schrijft per sectie een kop met een paar alinea's en soms een
   vetgedrukte slotzin. Tekstkolom op een leesbare maat (geen 1200px regels),
   beeld ernaast op de helft.
   ========================================================================== */
.verh{padding:var(--v-4) var(--pad);max-width:var(--maxw);margin-inline:auto;scroll-margin-top:5rem}
.verh__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(2rem,5vw,5rem);align-items:center
}
.verh--flip .verh__txt{grid-column:2;grid-row:1}
.verh--flip .verh__fig{grid-column:1;grid-row:1}
/* Zonder beeld zou de tekst onder een schermbrede kop in een smal kolommetje
   hangen. Dan maar kop links, tekst rechts — dezelfde opbouw als de
   werkwijze-rijen eronder. */
.verh--kaal .verh__in{grid-template-columns:minmax(0,1fr);align-items:start}
.verh--kaal .verh__txt{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end
}
/* --k-xl in een halve kolom brak "Geen standaard bureau, maar een creatieve
   sparringpartner" in zes regels. Een kop zonder beeld ernaast krijgt de
   kleinere sectiekoptrap, net als de koppen in een gekleurd vlak. */
.verh--kaal .verh__txt .h2{font-size:var(--k-s)}
/* Een inleiding die direct op een sectiekop volgt, brengt zijn eigen padding
   mee: samen met de marge van de kop stond er 135px tussen de kop en de
   eerste regel, en leest de inleiding als een los blok. */
.anders__head + .verh{padding-top:0}
/* Wel een label, geen kop. Stond als smalle kantlijn naast de tekst
   (.26fr/.74fr), maar de alinea heeft zelf een max-width van 550px en vulde
   die 937px-kolom dus niet: de tekst begon op 445px en lijnde daarmee uit met
   niets. Op /over-ons/ liepen daardoor vier tekstkolommen door elkaar —
   58→761, 58→862, 445→995 en 939→1382 — en dat zie je meteen.
   Eén kolom, label boven de tekst, allebei tegen de linkermarge. Dat is de
   sterkste lijn op de pagina: elke kop en elk label begint daar. De ruimte
   rechts is dan gewoon marge en geen gat.
   Geen grid-row op de alinea's zetten: dan plaatst de browser ze zelf netjes
   onder elkaar. Deed ik dat wel, dan wisselden alinea 1 en 2 van plek.
   En row-gap op 0, anders staat de witregel van het grid tussen de alinea's
   en lijken het twee losse blokjes. */
.verh--kaal.verh--geenkop .verh__txt{
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  column-gap:clamp(2rem,5vw,4.5rem);align-items:start;row-gap:0
}
.verh--kaal.verh--geenkop .verh__txt .lbl{grid-column:1;grid-row:1;margin:0 0 .9rem}
/* Geen kop betekent niet: geen stem. Een passage van grijze bodytekst in een
   leeg vlak leest als een voetnoot, en dat was precies de klacht. De eerste
   alinea krijgt daarom de rol van de kop: schreefletter op --k-2xs in inkt.
   Niet de displayletter — dan concurreert hij met de echte sectiekoppen; als
   schreefuitspraak is het een andere stem. De toelichting gaat naar de
   rechterkolom, exact waar op deze pagina alle andere leestekst staat. */
.verh--kaal.verh--geenkop .verh__p--uit{
  grid-column:1;grid-row:2;
  font-size:var(--k-2xs);line-height:1.28;color:var(--inkt);max-width:none;text-wrap:pretty
}
.verh--kaal.verh--geenkop .verh__na{
  grid-column:2;grid-row:2;margin-top:.6rem;
  display:grid;gap:1rem;align-content:start
}
.verh--kaal.verh--geenkop .verh__na .verh__p{max-width:none}
/* Geen label én geen kop: dan is die smalle kantlijn leeg en staat de tekst
   zonder reden ingesprongen. Eén kolom. */
.verh--kaal.verh--geenkop .verh__txt:not(:has(> .lbl)){grid-template-columns:minmax(0,1fr)}
.verh--kaal.verh--geenkop .verh__txt:not(:has(> .lbl)) > *{grid-column:1}
/* De kaal-variant pint de eerste alinea op rij 2 (daar hoort de kop boven).
   Zonder kop belandt alinea 2 dan in rij 1 en wisselen ze van plek — in
   beeld stond "We reageren" boven "We houden". Expliciet terug naar auto. */
.verh--kaal.verh--geenkop .verh__p,
.verh--kaal.verh--geenkop .verh__nadruk{grid-column:1;grid-row:auto}
@media (max-width:900px){
  .verh--kaal.verh--geenkop .verh__txt{grid-template-columns:minmax(0,1fr);row-gap:0}
  .verh--kaal.verh--geenkop .verh__txt .lbl{grid-column:1;grid-row:auto;margin-bottom:.9rem}
  .verh--kaal.verh--geenkop .verh__p,
  .verh--kaal.verh--geenkop .verh__nadruk{grid-column:1}
  /* Onder elkaar moet de toelichting ónder de uitspraak staan, niet ernaast.
     De uitspraak zelf blijft groter: --k-2xs zakt vanzelf naar 23px. */
  .verh--kaal.verh--geenkop .verh__p--uit{grid-column:1;grid-row:auto}
  .verh--kaal.verh--geenkop .verh__na{grid-column:1;grid-row:auto;margin-top:1.2rem}
}
/* Het label spant béide kolommen, en dat is geen opmaak maar plaatsing.
   De kop staat op rij 2 kolom 1 en de eerste alinea op rij 2 kolom 2; alinea
   twee heeft alleen een kolom en zoekt zelf een rij. Spant het label maar één
   kolom, dan is cel (1,2) vrij en belandt alinea twee BOVEN alinea een.
   Precies dat gebeurde toen er per ongeluk een foto uit een blok werd gehaald:
   het blok werd 'kaal' en de twee alinea's wisselden van plek. Het label is
   een kort woord en ziet er door het spannen niet anders uit. */
.verh--kaal .verh__txt .lbl{grid-column:1 / -1;margin-bottom:.9rem}
.verh--kaal .verh__txt .h2{grid-column:1;grid-row:2;margin-bottom:0}
.verh--kaal .verh__p,.verh--kaal .verh__nadruk{grid-column:2;grid-row:2}
.verh--kaal .verh__p + .verh__p{grid-row:auto;margin-top:1rem}
@media (max-width:900px){
  .verh--kaal .verh__txt{grid-template-columns:minmax(0,1fr)}
  .verh--kaal .verh__txt .h2{grid-row:auto;margin-bottom:var(--v-0)}
  .verh--kaal .verh__p,.verh--kaal .verh__nadruk{grid-column:1;grid-row:auto}
}
.verh__txt .lbl{margin-bottom:.9rem}
.verh__txt .h2{margin-bottom:var(--v-0)}
.verh__p{
  color:var(--ink-60);font-size:var(--t-lees);line-height:1.7;max-width:62ch;margin:0
}
.verh__p + .verh__p{margin-top:1rem}
/* de slotzin is de kern van de sectie: zelfde maat, maar in de displayletter
   en in inkt, met een streep ervoor zodat je ziet dat het geen gewone alinea is */
.verh__nadruk{
  margin:var(--v-1) 0 0;padding-left:clamp(1rem,1.6vw,1.6rem);
  border-left:2px solid var(--accent);
  /* --nadruk in plaats van --inkt: op een donkere band moet deze zin wit
     worden, anders staat er inkt op inkt. */
  font-family:var(--display);font-weight:700;line-height:1.35;color:var(--nadruk);
  font-size:clamp(1.05rem,1.35vw,1.3rem);max-width:46ch
}
.verh__fig{
  margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;
  transition-delay:.12s
}
/* Een tussenpassage zonder kop: liggend beeld en een iets bredere tekstkolom.
   Met het staande beeld werd deze sectie 1042px hoog voor vier regels tekst. */
.verh--sober .verh__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.verh--sober .verh__fig{aspect-ratio:16/11}
.verh--sober .verh__p{max-width:52ch}
/* Met een uitspraak erin is het geen tussenpassage meer maar een echte
   sectie: beeld staand zodat er geen hoofden afvallen, tekst bovenaan
   uitgelijnd zodat er onderin geen gat valt. */
/* Tussen lopende tekst (--t-lees, 1,12rem) en een sectiekop (--k-xl, 5,5rem)
   zit een gat. Een kop van één zin naast een beeld hoort daartussen: --k-xs.
   Op --k-xl liep diezelfde zin over negen regels. */
.verh--uitspraak .verh__txt .h2{font-size:var(--k-xs);line-height:1.1;text-wrap:balance}
/* Drie dingen gemeten en gecorrigeerd: de tekstkolom stond op 46ch (408px)
   terwijl het beeld 615px was — daardoor brak de kop in vijf regels; het beeld
   had een vaste 4/5 en was 768px hoog tegen 513px tekst, dus er viel 370px
   leegte onder; en de kop deelde de leesmaat van de alinea's terwijl een kop
   juist breder mag. Nu delen de twee kolommen één hoogte, krijgt de kop de
   hele kolom en houdt alleen de lopende tekst zijn leesbreedte. */
.verh--uitspraak .verh__in{
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  align-items:stretch;gap:clamp(2rem,4.5vw,4.5rem)
}
.verh--uitspraak .verh__fig{
  /* zelfde reden als bij .dnst__fig: de foto uit de flow, anders bepaalt zijn
     eigen verhouding de rijhoogte. aspect-ratio moet expliciet terug naar
     auto, anders wint de 4/5 uit de basisregel van .verh__fig alsnog. */
  position:relative;aspect-ratio:auto;min-height:clamp(22rem,36vw,34rem);align-self:stretch
}
.verh--uitspraak .verh__fig img{position:absolute;inset:0}
.verh--uitspraak .verh__txt{max-width:none;align-self:center;padding-block:var(--v-0)}
.verh--uitspraak .verh__txt .h2{max-width:21ch}
.verh--uitspraak .verh__p{max-width:52ch}
@media (max-width:900px){
  /* Deze regel moet de kolommen expliciet terugzetten: `.verh__in` in de
     algemene mobiele query heeft een lagere specificiteit dan
     `.verh--uitspraak .verh__in` hierboven, dus zonder dit bleef de sectie
     ook op 390px in twee kolommen staan — beeld en tekst allebei op halve
     breedte in de linkerhelft van het scherm. */
  .verh--uitspraak .verh__in{grid-template-columns:minmax(0,1fr);align-items:start;gap:1.6rem}
  .verh--uitspraak .verh__fig{height:auto;aspect-ratio:4/3;min-height:0}
  .verh--uitspraak .verh__txt{max-width:none;padding-block:0}
  .verh--uitspraak .verh__txt .h2,.verh--uitspraak .verh__p{max-width:none}
}
@media (max-width:900px){
  .verh--sober .verh__in{grid-template-columns:minmax(0,1fr)}
  .verh--sober .verh__fig{aspect-ratio:4/3}
}
.verh__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos)}

@media (max-width:900px){
  .verh__in{grid-template-columns:minmax(0,1fr)}
  .verh--flip .verh__txt,.verh--flip .verh__fig{grid-column:1}
  .verh--flip .verh__txt{grid-row:2}
  .verh--flip .verh__fig{grid-row:1}
  .verh__fig{aspect-ratio:4/3}
}

/* ==========================================================================
   SECTIES OP EEN GEDEELD VLAK
   Een reeks losse blokken (sectiekop, stappen, slotzin) die allemaal hetzelfde
   vlak kiezen, loopt hier in elkaar over tot één band met ronde uiteinden.
   Dat scheelt een omhullend blok in de editor: de klant zet per blok de
   achtergrond en de band ontstaat vanzelf. :has() doet het laatste stuk —
   zonder die selector weet een sectie niet dat zij de laatste van de reeks is.
   ========================================================================== */
/* Let op de dubbele klasse. `.anders` en `.verh` zetten zelf een max-width en
   staan verderop in dit bestand; met één klasse wint hun regel en houdt de
   sectie zijn kolombreedte. Boven 1560px kreeg de band dan happen uit de
   zijkant en sprong de tekst eruit die wél volle breedte pakte. */
.anders.anders--vlak,
.verh.anders--vlak{
  max-width:none;width:100%;margin-inline:0;
  padding-left:var(--pad);padding-right:var(--pad)
}
.anders--vlak > *{max-width:var(--maxw);margin-inline:auto}
.anders--perzik{background:var(--perzik)}
.anders--lila{background:var(--lila)}
/* Een donkere band leest hoogwaardiger dan een pastelvlak: meer contrast,
   minder zoet. De omschakeling gaat via de tokens zelf, niet per element —
   alles binnen de band pakt zo vanzelf de lichte varianten van lopende tekst
   en haarlijnen. */
.anders--inkt{
  background:var(--ink);color:var(--paper);
  --nadruk:var(--wit);
  --accent:var(--oranje);
  --ink-60:var(--paper-60);
  --ink-12:rgba(255,255,255,.18)
}
/* De stapnummers lenen --ink-12 van de haarlijnen. Op inkt kwamen ze daarmee
   op 1,74:1 — technisch decoratief (aria-hidden), maar zo vaag dat het eerder
   kapot dan bedoeld oogt. Een eigen waarde, zonder de haarlijnen zwaarder te
   maken. */
.anders--inkt .rij__n{color:rgba(255,255,255,.34)}
/* middenin de reeks geen dubbele lucht */
.anders--vlak + .anders--vlak{padding-top:0}
/* een sectiekop houdt zijn marge naar de inhoud eronder; binnen een band
   knipt die marge het vlak doormidden, dus daar wordt het padding */
.anders--vlak.anders__head{margin-bottom:0;padding-bottom:var(--v-2)}
/* eerste en laatste van de reeks krijgen de ronding */
:not(.anders--vlak) + .anders--vlak{border-radius:var(--r-lg) var(--r-lg) 0 0}
.anders--vlak:has(+ :not(.anders--vlak)){
  border-radius:0 0 var(--r-lg) var(--r-lg);padding-bottom:var(--v-5)
}
.anders--vlak:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ==========================================================================
   STAPPENPLAN
   Links de kop die meeloopt, rechts de stappen die erlangs schuiven. Dat vult
   de helft die bij losse rijen leeg bleef en geeft de sectie een anker zonder
   kleurvlak. De stappen zelf: een haarlijn boven elke stap, het nummer klein
   in de accentkleur naast de kop, de tekst eronder op leesbreedte.
   ========================================================================== */
.stp{padding:var(--v-5) var(--pad);max-width:var(--maxw);margin-inline:auto;scroll-margin-top:5rem}
.stp__in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,5.5rem)}
.stp__kleef{position:sticky;top:clamp(5.5rem,12vh,8rem)}
.stp__kleef .h2{font-size:var(--k-s)}
.stp__intro{
  margin:clamp(1.2rem,2.5vh,1.8rem) 0 0;color:var(--ink-60);
  font-size:var(--t-lees);line-height:1.7;max-width:40ch
}
.stp__intro + .stp__intro{margin-top:.9rem}
.stp__fig{
  margin:clamp(1.8rem,4vh,2.8rem) 0 0;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;max-width:26rem;transition-delay:.12s
}
.stp__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos)}

.stp__lijst{list-style:none;margin:0;padding:0;counter-reset:stap}
.stp__stap{
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  column-gap:clamp(.8rem,1.6vw,1.4rem);
  border-top:1px solid var(--ink-12);
  padding:clamp(1.6rem,3.5vh,2.6rem) 0
}
.stp__stap:last-child{border-bottom:1px solid var(--ink-12)}
.stp__n{
  grid-column:1;grid-row:1 / span 2;padding-top:.45em;
  font-family:var(--display);font-weight:800;font-size:var(--t-label);
  letter-spacing:.14em;color:var(--accent)
}
.stp__h{grid-column:2;font-size:var(--k-3xs);margin:0}
.stp__t{
  grid-column:2;margin:.6rem 0 0;color:var(--ink-60);
  font-size:var(--t-lees);line-height:1.7;max-width:58ch
}
/* de slotzin hangt onder de hele sectie, niet onder één kolom */
.stp__slot{
  max-width:var(--maxw);margin:clamp(2rem,4.5vh,3rem) 0 0;
  padding-left:clamp(1rem,1.6vw,1.6rem);border-left:2px solid var(--accent);
  font-family:var(--display);font-weight:700;line-height:1.35;color:var(--nadruk);
  font-size:clamp(1.05rem,1.35vw,1.3rem);max-width:52ch
}

@media (max-width:900px){
  .stp__in{grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,4vh,2.6rem)}
  /* kleven heeft geen zin als alles onder elkaar staat */
  .stp__kleef{position:static}
  .stp__intro{max-width:none}
  .stp__fig{max-width:none;aspect-ratio:16/10}
}

.anders{padding:var(--v-5) var(--pad) var(--v-3);max-width:var(--maxw);margin-inline:auto}
.anders__head{margin-bottom:var(--v-2)}
.rij{
  position:relative;display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(1.2rem,3vw,3rem);align-items:start;
  border-top:1px solid var(--ink-12);padding:var(--v-2) 0
}
.rij:last-child{border-bottom:1px solid var(--ink-12)}
.rij__n{grid-column:1;grid-row:1}
.rij__txt{grid-column:2;grid-row:1}
.rij__fig{grid-column:3;grid-row:1}
/* omgekeerde rij: expliciet plaatsen, niet met order — dat schuift items
   naar de verkeerde kolom omdat het de auto-plaatsing herordent */
.rij--flip{grid-template-columns:5.5rem minmax(0,.62fr) minmax(0,1fr)}
.rij--flip .rij__fig{grid-column:2;grid-row:1}
.rij--flip .rij__txt{grid-column:3;grid-row:1}
.rij__n{
  align-self:start;padding-top:.2em;font-family:var(--display);font-weight:800;font-size:var(--k-2xs);
  letter-spacing:-.02em;color:var(--ink-12);line-height:1
}
/* Een rij zonder beeld: de beeldkolom valt weg. De tekst in die ene kolom
   laten staan geeft 56 tekens tekst met een half scherm leegte ernaast; de
   kop en de tekst gaan daarom naast elkaar, zoals in een werkwijze-opsomming. */
/* Een genummerde werkwijze zonder beeld. Drie dingen waren hier mis en die
   lossen we met typografie op, niet met een kleurvlak:
   het nummer stond op --ink-12 (1,14:1 op wit — onzichtbaar, terwijl de
   nummering juist de reden is om te nummeren); de stapkop stond op --k-xs
   (43px) tegen 55px voor de sectiekop erboven, dus nauwelijks rangorde; en de
   tekst begon pas op 692px, ver van zijn eigen kop. */
/* Het nummer hoort bij zijn kop, niet in een eigen kolom honderd pixels
   verderop. Smalle eerste kolom en een kleine tussenruimte. */
.rij--kaal{grid-template-columns:2.2rem minmax(0,1fr);gap:clamp(.7rem,1.4vw,1.4rem)}
.rij--kaal .rij__n{
  font-size:var(--t-label);font-weight:800;letter-spacing:.16em;
  color:var(--accent);padding-top:.5em
}
.rij--kaal .rij__txt{
  grid-column:2;display:grid;
  grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,3rem);align-items:baseline
}
.rij--kaal .rij__h{grid-column:1;grid-row:1;margin-bottom:0;font-size:var(--k-3xs)}
.rij--kaal .rij__txt p{grid-column:2;max-width:52ch}
@media (max-width:900px){
  .rij--kaal .rij__txt{grid-template-columns:minmax(0,1fr);gap:1rem}
  .rij--kaal .rij__h,.rij--kaal .rij__txt p{grid-column:1}
}
.rij__h{font-size:var(--k-xs);margin-bottom:1.1rem}
.rij__txt p{color:var(--ink-60);max-width:56ch;font-size:var(--t-lees)}
.rij__txt p + p{margin-top:.9rem}
.rij__fig{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.rij__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);transition:transform 1.1s var(--e)}
.rij:hover .rij__fig img{transform:scale(1.05)}

/* ---------- team: uitklappende portrettenrij ---------- */
/* Stond op inkt. De twee portretten zijn tegen een crèmekleurige wand
   geschoten, dus op een zwart vlak lazen ze als twee felle ramen in een donkere
   doos. Perzik is warm genoeg om bij die wand te passen, en het is de enige
   merkkleur die op deze pagina nog nergens stond: de hero en de contactband
   zijn lila, de pijlers wit. */
.team{background:var(--perzik);color:var(--inkt);padding:var(--v-4) var(--pad) var(--v-5);border-radius:var(--r-lg) var(--r-lg) 0 0}
.team__head{
  max-width:var(--maxw);margin:0 auto var(--v-2);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--kol-lead));gap:var(--gap);align-items:end
}
.team .lbl{color:var(--ink-60)}
/* Was wit met een sage nadruk, bedoeld voor de donkergroene secties van
   Blync. Die secties zijn licht geworden en de kop werd daarmee onleesbaar
   (1,1:1 op perzik). Nu volgt hij zijn ondergrond, net als --accent en
   --nadruk: op een licht vlak inkt, op een donker vlak wit. */
/* Een trede terug ten opzichte van de andere sectiekoppen. "Twee creatieve
   koppen." is op --k-xl 976px breed: dan blijft er naast de kop geen kolom
   over die breed genoeg is om de inleiding in te lezen. --k-m staat al op
   deze paginas (de afsluitband), dus dit is geen nieuwe maat. */
.h2--paper{color:var(--nadruk);font-size:var(--k-m)}
.h2--paper em{color:var(--accent)}
.team__note{color:var(--ink-60);transition-delay:.15s}
.team__note>p{margin:0;color:inherit}
.team__note>p+p{margin-top:.8em}

.rij5{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;gap:clamp(.5rem,1vw,1rem);height:clamp(340px,44vw,560px)
}
.kop{
  position:relative;flex:1 1 0;min-width:0;border-radius:var(--r);overflow:hidden;
  transition:flex-grow .62s var(--e),filter .5s var(--e);
  filter:saturate(.82)
}
.kop.is-open{flex-grow:2.3;filter:none}
/* Bij twee mensen is een harmonica zinloos: je klapt de één open door de ander
   dicht te duwen, en 2,3 tegen 1 laat de tweede voor een derde zien. Twee
   gelijke helften, allebei met hun naam er meteen bij. */
.rij5--duo .kop,
.rij5--duo .kop.is-open{flex-grow:1;filter:none}
.kop img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform 1.1s var(--e)}
.kop.is-open img{transform:scale(1.02)}
.kop::after{
  content:"";position:absolute;inset:auto 0 0 0;height:62%;
  /* was .78 en dat gaf onderin een grond van rgb(118,110,114): de naam haalde
     er 4,0:1 (in pixels nagemeten, niet berekend — het script ziet dit verloop
     niet). Met .92 blijft er genoeg donker over voor het kleine rolletje. */
  background:linear-gradient(to top,rgba(26,20,32,.92),transparent);
  opacity:0;transition:opacity .5s var(--e)
}
.kop.is-open::after{opacity:1}
/* De tekst ligt op het donkere verloop over de foto, niet op de sectie. Sinds
   die sectie perzik werd erfde de naam de inktkleur en stond hij donker op
   donker. Hier dus hard wit, los van de sectiekleur. */
.kop__b{
  color:var(--wit);
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1rem,1.8vw,1.6rem);
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--e) .1s,transform .45s var(--e) .1s
}
.kop.is-open .kop__b{opacity:1;transform:none}
.kop__b h3{font-size:var(--k-3xs);white-space:nowrap}

/* korte tekst per persoon, in dezelfde kolommen als de portretten erboven */
.team__bios{
  max-width:var(--maxw);margin:var(--v-1) auto 0;
  display:grid;gap:clamp(1.4rem,3vw,2.6rem)
}
.team__bios--duo{grid-template-columns:1fr 1fr;gap:clamp(.5rem,1vw,1rem)}
/* De naam staat al op de foto erboven. Alleen zodra de kolommen onder elkaar
   vallen raakt de tekst los van zijn gezicht; dan komt het label terug. */
.team__bio h3{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap
}
@media (max-width:860px){
  .team__bio h3{
    position:static;width:auto;height:auto;clip-path:none;
    font-family:var(--display);font-weight:700;font-size:var(--t-micro);
    letter-spacing:.16em;text-transform:uppercase;margin:0 0 .5rem
  }
}
.team__bio p{color:var(--ink-60);font-size:var(--t-body);max-width:46ch;margin:0}
@media (max-width:860px){
  .team__bios--duo{grid-template-columns:1fr;gap:var(--v-0)}
}
.kop__b p{
  margin-top:.35rem;color:var(--sage);
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap
}
/* naam altijd leesbaar, ook als de kaart smal staat */
.kop__tag{
  position:absolute;left:0;bottom:0;z-index:1;padding:clamp(1rem,1.8vw,1.6rem);
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);text-shadow:0 2px 12px rgba(26,20,32,.7);
  opacity:.9;transition:opacity .35s var(--e)
}
.kop.is-open .kop__tag{opacity:0}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ohero__in{grid-template-columns:1fr}
  .web{max-width:520px;margin-top:2rem}
  .rij,.rij--flip{grid-template-columns:3.2rem minmax(0,1fr);row-gap:1.4rem}
  .rij__n{grid-column:1;grid-row:1}
  .rij__txt,.rij--flip .rij__txt{grid-column:2;grid-row:1}
  .rij__fig,.rij--flip .rij__fig{grid-column:2;grid-row:2;aspect-ratio:16/9}
  .team__head{grid-template-columns:1fr}
}
@media (max-width:860px){
  .rij5{
    height:auto;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) .5rem
  }
  .rij5::-webkit-scrollbar{display:none}
  .kop{flex:0 0 min(64vw,300px);aspect-ratio:3/4;scroll-snap-align:start;filter:none}
  .kop::after{opacity:1}
  .kop__b{opacity:1;transform:none}
  .kop__tag{display:none}
}
@media (max-width:620px){
  .web{max-width:none}
  .node i{font-size:var(--t-micro)}
}

/* De portrettenrij mag tot 860px blijven: daar staan twee namen in. In de
   dienstenrij zit een kop, een zin en een alinea, en die zes kaarten knijpen
   de open kaart onder 1100px tot 241px. Gemeten liep de tekst daar over de
   onderkant. Daarom wordt deze rij eerder een swiperij, met kaarten die wel
   breed genoeg zijn. */
@media (max-width:1100px){
  .rij5--diens{
    height:auto;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) .5rem
  }
  .rij5--diens::-webkit-scrollbar{display:none}
  .rij5--diens .kop{flex:0 0 min(72vw,340px);aspect-ratio:3/4;scroll-snap-align:start;filter:none}
  .rij5--diens .kop::after{opacity:1}
  .rij5--diens .kop__b{opacity:1;transform:none}
  .rij5--diens .kop__tag{display:none}
  .rij5--diens .kop:not(.is-open) .kop__b{pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){
  .js .web.is-in .node{animation:none}
  .js .web__lines path{stroke-dashoffset:0}
}

/* ==========================================================================
   DIENSTEN
   ========================================================================== */

/* ---------- hero ---------- */
.dhero{padding:var(--v-7) var(--pad) var(--v-2);text-align:center;background:var(--lila)}
.dhero__in{max-width:min(var(--maxw),62rem);margin-inline:auto}
.dhero__h{font-size:var(--k-xxl);margin:1.4rem 0 0}
.dhero__h em{font-style:normal;color:var(--accent)}
.dhero__lead{max-width:50ch;margin:1.6rem auto 0;color:var(--ink-60);font-size:var(--t-lead);transition-delay:.18s}
.dhero__btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.2rem;transition-delay:.3s}

/* ---------- de route: drie fases op één lijn ---------- */
/* Stond op 0 bovenin. Dat kon toen de hero erboven wit was en er dus geen
   rand te zien was; met een lila hero plakten de kaarten er met 4px tussen
   tegenaan. Zelfde lucht als onder de andere hero's. */
.route{padding:var(--v-2) var(--pad) var(--v-3)}
.route__in{position:relative;max-width:var(--maxw);margin-inline:auto}
.route__lijn{
  position:absolute;left:0;right:0;top:1.35rem;height:2px;background:var(--ink-12);
  border-radius:2px;overflow:hidden
}
.route__lijn i{display:block;height:100%;width:0;background:var(--forest);transition:width 1.4s var(--e)}
.route__stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.5vw,3.5rem)}
.stap{position:relative;padding-top:4.2rem}
.stap__bol{
  position:absolute;top:0;left:0;width:2.7rem;height:2.7rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:var(--t-label);letter-spacing:.06em;
  box-shadow:0 0 0 6px var(--paper)
}
.stap--sage  .stap__bol{background:var(--sage);color:var(--sage-op)}
.stap--peach .stap__bol{background:var(--peach);color:var(--rust)}
.stap--lav   .stap__bol{background:var(--lav);color:var(--violet)}
.stap__h{font-size:var(--k-3xs);margin-bottom:.8rem}
@media (min-width:1101px){.stap__h{min-height:1.88em}}
.stap p{color:var(--ink-60);font-size:var(--t-body);max-width:40ch}
/* inline (niet inline-flex): bij een label dat over twee regels valt
   blijft de pijl dan direct achter het laatste woord staan */
.stap__l{
  display:inline;margin-top:1.2rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:inset 0 -1.5px 0 currentColor;padding-bottom:.25rem;
  transition:color .35s var(--e),box-shadow .35s var(--e)
}
.stap p + .stap__l{display:inline-block}
.stap__l .arw{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-left:.45rem;transition:transform .35s var(--e)}
.stap__l:hover .arw{transform:translateX(4px)}
.stap--sage  .stap__l:hover{color:var(--accent)}
.stap--peach .stap__l:hover{color:var(--fase-2)}
.stap--lav   .stap__l:hover{color:var(--fase-3)}


/* ---------- catalogus met filter ---------- */
/* ---------- diensten uitgeschreven (dienstenpagina) ---------- */
/* Vier blokken onder elkaar, beeld om en om links en rechts. Zonder dat
   wisselen leest de pagina als een lijst van vier dezelfde kaarten. */
.diensl{padding:var(--v-2) var(--pad) var(--v-3);max-width:var(--maxw);margin-inline:auto;scroll-margin-top:5rem}
.diensl__head{margin-bottom:var(--v-2)}
.diensl__head .lbl{margin-bottom:.9rem}
/* Gemeten: de beelden waren 706 tot 860px hoog tegen tekstblokken van 414 tot
   463px — bijna 1400px leegte over vier rijen, en precies de reden dat deze
   sectie leeg en wit aanvoelde. De twee kolommen delen nu één hoogte: het
   beeld rekt mee met de tekst in plaats van zijn eigen verhouding op te
   leggen. En een omgekeerde rij wisselt nu ook de kolombreedtes, anders
   krijgt elke tweede dienst een breder beeld dan de rest. */
.dnst{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2rem,5vw,5rem);align-items:stretch;
  border-top:1px solid var(--ink-12);padding:var(--v-2) 0;
  scroll-margin-top:5rem
}
.dnst:last-child{border-bottom:1px solid var(--ink-12)}
.dnst--flip{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
.dnst--flip .dnst__txt{grid-column:2;grid-row:1}
.dnst--flip .dnst__fig{grid-column:1;grid-row:1}
.dnst__txt{align-self:center}
.dnst__n{
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin:0 0 .9rem
}
/* De naam van de dienst is sinds 04-11-2026 de kop en staat in het accent,
   met de pakkende zin eronder als subtitel (klantdocument 31-10-2026). Op wit
   is dat accent het merkoranje; de subtitel blijft inkt, want die draagt de
   inhoud en moet gewoon leesbaar zijn. */
.dnst__h{
  font-size:var(--k-xs);margin:0 0 .35rem;text-wrap:balance;
  color:var(--accent);line-height:1.02
}
.dnst__sub{
  font-family:var(--display);font-weight:800;font-size:var(--k-4xs);
  line-height:1.15;letter-spacing:-.02em;color:var(--nadruk);
  margin:0 0 1.2rem;text-wrap:balance;max-width:24ch
}
.dnst__p{color:var(--ink-60);font-size:var(--t-lees);line-height:1.7;max-width:60ch;margin:0}
.dnst__p + .dnst__p{margin-top:.9rem}
/* "Wat we doen" is een opsomming, geen zin: label erboven, de termen eronder
   in dezelfde kapitalen als de tags elders op de site. */
.dnst__doen{margin:var(--v-0) 0 0;display:grid;gap:.5rem}
.dnst__doen b{
  font-family:var(--display);font-weight:800;font-size:var(--t-micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)
}
.dnst__doen span{
  color:var(--ink-60);font-family:var(--display);font-weight:700;
  font-size:var(--t-label);letter-spacing:.06em;line-height:1.9
}
/* height:100% op een grid-item is circulair: de browser kent de rijhoogte nog
   niet en valt terug op de natuurlijke hoogte van de foto. Bij drie liggende
   beelden viel dat niet op, bij het ene staande beeld werd de rij 816px.
   De foto uit de flow halen lost het echt op: de figure heeft dan geen eigen
   inhoudshoogte meer en rekt mee met de tekstkolom. */
.dnst__fig{
  position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  transition-delay:.1s;min-height:clamp(20rem,30vw,27rem)
}
.dnst__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fotopos)}

@media (max-width:900px){
  .dnst,.dnst--flip{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .dnst__fig{height:auto;aspect-ratio:4/3;min-height:0}
  .dnst--flip .dnst__txt,.dnst--flip .dnst__fig{grid-column:1}
  .dnst--flip .dnst__txt{grid-row:2}
  .dnst--flip .dnst__fig{grid-row:1}
  .dnst__fig{aspect-ratio:4/3}
}

/* ---------- diensten als uitklaplijst (homepage) ---------- */
/* Zelfde details/summary als de veelgestelde vragen: één soort uitklapper op
   de site is genoeg. Alleen de naam staat groter — hier is dat een dienst,
   geen vraag, en het is het eerste wat je leest. */
/* De inleiding van de klant is hier 494 tekens: ook in een brede kolom
   blijft die hoger dan een kop van drie regels. Met align-items:end zakt de
   kop naar de onderkant van die hoge rij en staat er 144px niets boven het
   label. Bovenaan uitlijnen zet die overruimte onder de kop, waar hij
   opgaat in de lucht voor de kaarten. */
.diens--uit .diens__head,
.diens--kaart .diens__head{align-items:start}
/* De kop van de klant is een hele zin ("Geen merk is hetzelfde. Dus waarom zou
   de aanpak dat wel zijn?"). Op --k-xl past geen enkele regel daarvan in de
   halve kolom — gemeten op 1280 t/m 1920 liep elke regel over. Op --k-s passen
   ze alle drie. Geldt voor beide vormen: de kop hoort bij de sectie, niet bij
   de manier waarop de diensten eronder getoond worden. */
.diens--uit .diens__head .h2,
.diens--kaart .diens__head .h2{font-size:var(--k-s)}
.diens__intro p{color:var(--ink-60);font-size:var(--t-lees);line-height:1.7;margin:0}
.diens__intro p + p{margin-top:.9rem}
.diens__lijst{display:grid;gap:.6rem;max-width:var(--maxw);margin-inline:auto}
.diens__lijst .vraag summary{
  font-family:var(--display);font-weight:800;color:var(--inkt);
  font-size:clamp(1.15rem,1.8vw,1.6rem);letter-spacing:-.01em;
  padding:clamp(1.1rem,2vw,1.6rem) clamp(1.2rem,2.2vw,1.8rem)
}
.diens__lijst .vraag summary:hover{color:var(--accent)}
.diens__lijst .vraag__a p{max-width:62ch}
.diens__doen{
  margin-top:.9rem;color:var(--ink-60);
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.06em;line-height:1.9
}
.diens__knop{margin-top:var(--v-1)}

/* ==========================================================================
   DE DIENSTEN ALS HARMONICA-RIJ
   Zelfde rij als de portretten op /over-ons/ (#rij5 + .kop), dus hetzelfde
   gedrag en hetzelfde script. Hier staat alleen wat afwijkt: er zit meer
   tekst in een open kaart, dus de kop mag afbreken en het verloop moet
   dieper zijn dan bij een naam van twee woorden.
   ========================================================================== */
.diens{
  padding:var(--v-3) var(--pad) var(--v-5);
  max-width:var(--maxw);margin-inline:auto;scroll-margin-top:6rem
}
.diens__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--kol-lead));gap:var(--gap);align-items:end;
  margin-bottom:var(--v-1)
}
.diens__note{color:var(--ink-60);transition-delay:.12s}

.rij5--diens{height:clamp(360px,42vw,540px)}
/* Een open kaart draagt hier een kop, een zin, een alinea en een link: ruim
   300px tekst tegen de 60px van een naam met rolletje. Het verloop van de
   teamkaart (62% hoog) houdt dus bovenaan op waar hier nog tekst staat.
   Daarom hoger en onderin dichter. Nagemeten op de letterkern (alleen pixels
   boven 215, anders meet je de anti-aliasing van de letterrand en krijg je
   overal rond de 4,3:1 te zien): 7,8 tot 11,7:1 over alle zes de kaarten. */
.rij5--diens .kop::after{
  height:88%;
  background:linear-gradient(to top,
    rgba(26,20,32,.95) 0%,
    rgba(26,20,32,.92) 34%,
    rgba(26,20,32,.72) 62%,
    rgba(26,20,32,.2) 86%,
    transparent 100%)
}
.kop__b--diens{padding:clamp(1.1rem,1.9vw,1.8rem)}
.kop__b--diens h3{
  font-size:clamp(1.1rem,1.65vw,1.55rem);white-space:normal;line-height:1.1;text-wrap:balance
}
/* de zin van de klant: dit is de belofte, geen rolletje in kapitalen */
.kop__b--diens .kop__zin{
  margin-top:.5rem;color:var(--wit);
  font-family:var(--display);font-weight:700;letter-spacing:0;text-transform:none;white-space:normal;
  font-size:clamp(.92rem,1.05vw,1.05rem);line-height:1.3
}
.kop__b--diens .kop__uitleg{
  margin-top:.55rem;color:rgba(255,255,255,.88);
  /* .kop__b p is gemaakt voor een rolletje in kapitalen: nowrap, letterspatie
     en t-micro. Dat moet hier allemaal terug naar lopende tekst. */
  font-family:var(--text);font-weight:400;letter-spacing:0;text-transform:none;white-space:normal;
  font-size:var(--t-body);line-height:1.5;max-width:36ch;
  /* nooit over de kaartrand heen, hoe lang de tekst ook wordt */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden
}
.kop__meer{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;color:var(--wit);
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.11em;text-transform:uppercase;
  border-bottom:1.5px solid rgba(255,255,255,.45);padding-bottom:.15rem;
  transition:border-color .3s var(--e)
}
.kop__meer:hover{border-color:var(--wit)}
.kop__meer svg{width:1em;height:1em;transition:transform .35s var(--e)}
.kop__meer:hover svg{transform:translateX(4px)}
/* een dichte kaart heeft een onzichtbare link; die mag je niet kunnen raken */
.rij5--diens .kop:not(.is-open) .kop__b{pointer-events:none}

@media (max-width:1100px){
  .diens__head{grid-template-columns:1fr;align-items:start}
}

.cat{padding:var(--v-2) var(--pad) var(--v-5);max-width:var(--maxw);margin-inline:auto;scroll-margin-top:6rem}
.cat__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--kol-lead));gap:var(--gap);align-items:end;margin-bottom:var(--v-1)}
.cat__note{color:var(--ink-60);transition-delay:.12s}

.filt{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--v-1)}
.filt__b{
  --c:var(--ink);
  display:inline-flex;align-items:center;gap:.5rem;
  border:1.5px solid var(--ink-12);border-radius:999px;padding:.6rem 1.05rem .55rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e)
}
.filt__b b{
  font-size:var(--t-micro);opacity:.85;background:currentColor;color:transparent;
  border-radius:999px;min-width:1.15rem;text-align:center
}
.filt__b b{background:none;color:inherit;opacity:.8}
.filt__b:hover{border-color:var(--c)}
.filt__b[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:var(--paper)}
.filt__b--sage{--c:var(--forest)}
.filt__b--peach{--c:var(--fase-2)}
.filt__b--lav{--c:var(--fase-3)}

.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.4rem)}
.dk{--c:var(--forest);--bg:var(--sage)}
.dk--peach{--c:var(--rust);--bg:var(--peach)}
.dk--lav{--c:var(--violet);--bg:var(--lav)}
.dk a{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--white);border-radius:var(--r);
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--e),color .4s var(--e),box-shadow .5s var(--e)
}
.dk__fig{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--ink-12)}
.dk__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);transition:transform 1.1s var(--e),filter .5s var(--e)}
.dk a:hover .dk__fig img{transform:scale(1.06)}
.dk__b{display:flex;flex-direction:column;flex:1;padding:clamp(1.1rem,1.9vw,1.6rem)}
.dk a::before{
  content:"";position:absolute;left:0;right:0;bottom:0;top:0;z-index:-1;background:var(--bg);
  transform:translateY(101%);transition:transform .5s var(--e)
}
.dk a:hover::before{transform:translateY(0)}
.dk a:hover{transform:translateY(-5px);color:var(--c);box-shadow:var(--lift-2)}
.dk__fase{
  display:inline-flex;align-self:flex-start;align-items:center;gap:.4rem;
  border:1.5px solid currentColor;border-radius:999px;padding:.32rem .7rem .28rem;margin-bottom:1rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c);opacity:.85
}
.dk h3{font-family:var(--display);font-weight:600;font-size:var(--k-5xs);line-height:1.25;letter-spacing:-.01em}
.dk p{margin-top:.55rem;color:var(--ink-60);font-size:var(--t-body);flex:1}
.dk a:hover p{color:inherit;opacity:.8}
.dk__m{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.3rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase
}
.dk__m .arw{width:14px;height:14px;transition:transform .4s var(--e)}
.dk a:hover .dk__m .arw{transform:translateX(4px)}
.dk.is-uit{display:none}
.cat__leeg{color:var(--ink-60);padding:2rem 0}

/* ---------- back it up ---------- */
/* zelfde reden als bij .stats: hieronder staat de FAQ, en die is lila */
.proof{background:var(--perzik);color:var(--inkt);padding:var(--v-3) var(--pad) var(--v-2);border-radius:var(--r-lg) var(--r-lg) 0 0}
.proof__in{max-width:var(--maxw);margin-inline:auto}
.proof__head{margin-bottom:var(--v-2)}
.proof .lbl{color:var(--ink-60)}
.proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.proof__grid li{border-top:1px solid rgba(26,20,32,.18);padding-top:1.4rem}
.proof__grid li:nth-child(2){transition-delay:.1s}
.proof__grid li:nth-child(3){transition-delay:.2s}
.proof__n{
  display:block;font-family:var(--display);font-weight:800;
  font-size:var(--k-l);line-height:1;letter-spacing:-.03em;color:var(--inkt)
}
.proof__n i{color:var(--oranje-tekst);font-style:normal;font-size:.45em;vertical-align:.3em;margin-left:.04em}
.proof__grid p{margin-top:.8rem;color:var(--ink-60);font-size:var(--t-body)}
.proof__grid b{
  display:block;color:var(--inkt);font-family:var(--display);font-weight:700;
  font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.25rem
}
.proof__cta{margin-top:var(--v-1);transition-delay:.3s}

/* ---------- faq ---------- */
/* .faq en .studio stonden allebei lila, en daar komt de lila contactband
   direct onder: twee keer dezelfde kleur op elkaar, precies wat we op de
   contactpagina met de witte secties hadden. */
.faq{background:var(--wit);padding:var(--v-5) var(--pad)}
.faq__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start
}
.faq__head{position:sticky;top:var(--v-6)}
.faq .lbl{color:var(--ink-60)}
/* Stond om: de hele kop oranje met de nadruk in inkt. Dat is een restant van
   toen dit blok op een donkergroen vlak lag. Overal elders op de site is het
   andersom, en dat hoort ook: inkt leest, oranje benadrukt. Maat gelijk aan de
   sectiekop van de werkwijze erboven. */
.faq .h2{font-size:var(--k-s)}
.faq .h2 em{color:var(--accent)}
.faq__note{margin-top:1.4rem;color:rgba(26,20,32,.75);transition-delay:.15s}
.faq__note a{text-decoration:underline;text-underline-offset:3px}
.faq__note a:hover{color:var(--white)}

.faq__lijst{display:grid;gap:0}
/* Acht vragen die allemaal volledig oranje zijn lezen als acht links en zijn
   veel meer accent dan de rest van de pagina draagt. Nu inkt in de
   displayletter, met een haarlijn per rij — net als de diensten en de stappen
   erboven. Alleen de open vraag krijgt het accent. */
.vraag{border-top:1px solid var(--ink-12);transition:none}
.vraag:last-child{border-bottom:1px solid var(--ink-12)}
.vraag summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2vw,1.5rem) 0;
  cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,1.2vw,1.18rem);
  line-height:1.3;letter-spacing:-.005em;color:var(--inkt)
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--accent)}
.vraag[open] summary{color:var(--accent)}
.vraag summary i{
  position:relative;flex:none;width:24px;height:24px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--ink-12);
  transition:box-shadow .35s var(--e),transform .45s var(--e)
}
.vraag[open] summary i{box-shadow:inset 0 0 0 1.5px var(--accent)}
.vraag summary i::before,.vraag summary i::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);transition:opacity .3s var(--e),transform .4s var(--e)
}
.vraag summary i::before{width:9px;height:1.8px}
.vraag summary i::after{width:1.8px;height:9px}
.vraag[open] summary i{transform:rotate(180deg)}
.vraag[open] summary i::after{opacity:0}
.vraag__a{
  padding:0 3rem clamp(1.1rem,2vw,1.5rem) 0;
  color:var(--ink-60);max-width:62ch;font-size:var(--t-lees);line-height:1.7
}
/* vloeiend open- en dichtklappen; details blijft de bron van waarheid */
.js .vraag__a{overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .route__stappen{grid-template-columns:1fr;gap:2.2rem}
  .route__lijn{left:1.35rem;right:auto;top:0;bottom:0;width:2px;height:auto}
  .route__lijn i{width:100%;height:0;transition:height 1.4s var(--e)}
  .stap{padding:0 0 0 4.4rem;min-height:3rem}
  .stap__bol{top:0}
  .kaarten{grid-template-columns:repeat(2,1fr)}
  .cat__head{grid-template-columns:1fr}
  .faq__in{grid-template-columns:1fr}
  .faq__head{position:static}
}
@media (max-width:640px){
  .kaarten{grid-template-columns:1fr}
  .proof__grid{grid-template-columns:1fr}
  .filt__b{font-size:var(--t-micro);padding:.55rem .85rem .5rem}
}

/* ---------- uitspraak over beeld (diensten) ---------- */
.band{
  position:relative;margin:var(--v-1) 0 var(--v-2);
  overflow:hidden;isolation:isolate;
  min-height:clamp(300px,38vw,520px);display:grid;align-items:center
}
.band__fig{position:absolute;inset:-12% 0;margin:0;z-index:-1}
.band__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);will-change:transform}
.band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(26,20,32,.86) 0%,rgba(26,20,32,.66) 42%,rgba(26,20,32,.28) 100%)
}
.band__q{
  margin:0;max-width:var(--maxw);width:100%;margin-inline:auto;padding:var(--v-2) var(--pad)
}
.band__q p{
  font-family:var(--display);font-weight:800;color:var(--paper);
  font-size:var(--k-s);line-height:1.05;letter-spacing:-.02em;max-width:22ch
}
.band__q em{font-style:normal;color:var(--sage)}
@media (max-width:640px){
  .band{min-height:auto}
  .band__q p{font-size:var(--k-2xs)}
  .band::after{background:linear-gradient(180deg,rgba(26,20,32,.78) 0%,rgba(26,20,32,.86) 100%)}
}

/* ==========================================================================
   MINDS
   ========================================================================== */

/* gedeelde meta-pill */
.mtag{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1.5px solid currentColor;border-radius:999px;padding:.34rem .8rem .3rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;
  align-self:flex-start
}
/* Deze <i> stond op opacity .85 als zachte nadrukverlaging. Dat kost contrast
   en het is het enige plekje waar een mtag een kind heeft: met de oranje tekst
   op het grijze pilletje kwam hij op 3,23:1 uit (met echte pixels nagemeten,
   niet berekend). Het verschil zit nu in de kleur, niet in de dekking. */
.mtag i{font-style:normal}
.mtag--sage{color:var(--accent)}
.mtag--peach{color:var(--fase-2)}
.mtag--lav{color:var(--fase-3)}
/* --ink heette al zo maar was een grijs pilletje met oranje tekst: 3,96:1 voor
   het label en 3,23:1 voor de hashtag, allebei onder de norm voor tekst van
   9px. Een echte inktpil haalt 18:1 voor het label en 6,4:1 voor de hashtag,
   en het onderscheid tussen de twee blijft precies hetzelfde. */
.mtag--ink{color:var(--wit);background:var(--inkt);border-color:transparent}
.mtag--ink i{color:var(--oranje)}

/* ---------- hero ---------- */
.mhero{padding:var(--v-7) var(--pad) var(--v-2);background:var(--lila)}
.mhero__in{max-width:var(--maxw);margin-inline:auto}
.mhero__h{font-size:var(--k-mega);margin:1.3rem 0 0}
.mhero__h em{font-style:normal;color:var(--accent)}
.mhero__lead{max-width:46ch;margin-top:1.6rem;color:var(--ink-60);font-size:var(--t-lead);transition-delay:.18s}
.mhero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1.8rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);transition-delay:.3s
}
.mhero__meta b{color:var(--ink);font-size:var(--t-klein);margin-right:.25rem}
.mhero__meta i{display:block;width:4px;height:4px;border-radius:50%;background:var(--ink-12)}

/* ---------- uitgelicht ---------- */
.uit{padding:var(--v-2) var(--pad) var(--v-3);max-width:var(--maxw);margin-inline:auto}
.uit > .lbl{margin-bottom:1.2rem}
.uit__in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;align-items:stretch
}
.uit__fig{display:block;position:relative;min-height:clamp(280px,32vw,520px);overflow:hidden}
.uit__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);transition:transform 1.2s var(--e)}
.uit__in:hover .uit__fig img{transform:scale(1.04)}
.uit__txt{padding:clamp(1.6rem,3vw,3rem);display:flex;flex-direction:column;justify-content:center}
.uit__h{font-family:var(--display);font-weight:600;font-size:var(--k-xs);line-height:1.18;letter-spacing:-.015em;margin:1.1rem 0 0}
.uit__h a{background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .5s var(--e)}
.uit__h a:hover{background-size:100% 2px}
.uit__x{margin-top:1rem;color:var(--ink-60);max-width:48ch}
.uit__slot{
  margin-top:1.4rem;padding-left:1rem;border-left:2px solid var(--peach);
  font-family:var(--text);font-weight:600;color:var(--ink);max-width:46ch
}
.uit__voet{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.8rem}
.uit__voet time{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)
}

/* inhoudsopgave uit de echte kopjes van het artikel */
.inhoud{margin-top:1.5rem;border-top:1px solid var(--ink-12);padding-top:1rem}
.inhoud__l{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:.6rem
}
.inhoud ol{counter-reset:h;display:grid;gap:.3rem}
.inhoud li{
  counter-increment:h;position:relative;padding-left:1.7rem;
  font-size:var(--t-body);color:var(--ink-60)
}
.inhoud li::before{
  content:counter(h,decimal-leading-zero);position:absolute;left:0;top:.08em;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.08em;color:var(--accent);opacity:.7
}
.inhoud--klein{margin-top:1.1rem;padding-top:.85rem}
.inhoud--klein li{font-size:var(--t-klein)}

/* ankers vanaf de homepage: de zwevende balk mag het doel niet afdekken */
#shorts,#rondzweeft,#meetellen,
#bigchange,#heisessie,#summerrecap{scroll-margin-top:var(--v-6)}
/* kort oplichten waar je landt, zodat je ziet wélk item bedoeld werd */
@keyframes landing{0%,75%{box-shadow:0 0 0 3px var(--forest)}100%{box-shadow:0 0 0 3px transparent}}
.js #shorts:target,.js #rondzweeft:target,.js #meetellen:target,
.js #bigchange:target,.js #heisessie:target,.js #summerrecap:target{
  border-radius:var(--r);animation:landing 3s var(--e) .5s both
}

/* ---------- meer reads ---------- */
.reads{padding:0 var(--pad) var(--v-5);max-width:var(--maxw);margin-inline:auto}
.reads__head{margin-bottom:var(--v-1)}
.reads__lijst{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.8rem)}
.read a{
  position:relative;display:block;height:100%;background:var(--white);border-radius:var(--r);overflow:hidden;
  transition:transform .5s var(--e),box-shadow .5s var(--e)
}
.read a:hover{transform:translateY(-5px);box-shadow:var(--lift-2)}
.read__n{
  position:absolute;right:clamp(1rem,1.8vw,1.5rem);top:clamp(.9rem,1.6vw,1.3rem);z-index:2;
  display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;
  background:rgba(26,20,32,.5);backdrop-filter:blur(6px);
  font-family:var(--display);font-weight:800;font-size:var(--t-micro);letter-spacing:.06em;
  color:var(--paper)
}
.read__fig{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--ink-12)}
.read__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);transition:transform 1.1s var(--e)}
.read a:hover .read__fig img{transform:scale(1.05)}
.read__b{padding:clamp(1.2rem,2vw,1.8rem)}
.read__b h3{font-family:var(--display);font-weight:600;font-size:var(--k-4xs);line-height:1.24;letter-spacing:-.01em;margin-top:.9rem}
.read__x{margin-top:.7rem;color:var(--ink-60);font-size:var(--t-body);max-width:46ch}
.read__voet{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--ink-12)
}
.read__voet time{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)
}
.read__m{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase
}
.read__m .arw{width:14px;height:14px;transition:transform .4s var(--e)}
.read a:hover .read__m .arw{transform:translateX(4px)}

/* ---------- uit de studio ---------- */
.studio{background:var(--perzik);padding:var(--v-5) var(--pad)}
.studio__head{
  max-width:var(--maxw);margin:0 auto var(--v-2);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--kol-lead));gap:var(--gap);align-items:end
}
/* stond hard op .6; dat is precies de dekking die op een getint vlak
   onder de norm valt. Het token staat op .72 en volgt mee. */
.studio .lbl{color:var(--ink-60)}
.studio__note{color:rgba(26,20,32,.75);transition-delay:.15s}
.studio__lijst{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)}
.post{background:var(--paper);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.post:nth-child(2){margin-top:clamp(0rem,3vh,2.2rem)}
.post:nth-child(3){margin-top:clamp(0rem,6vh,4.4rem)}
/* Stond op 4:5. Dat klopte toen hier portretten van mensen in stonden; met
   bureaubeelden erin werden de kaarten 757px hoog en liepen ze van het scherm.
   Op 4:3 past de hele kaart in beeld en blijft de trapsgewijze stand leesbaar. */
.post figure{margin:0;aspect-ratio:4/3;overflow:hidden}
.post figure img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos)}
.post__b{padding:clamp(1.1rem,1.9vw,1.6rem)}
.post__t{margin-top:.9rem;color:var(--ink-60);font-size:var(--t-body)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .uit__in{grid-template-columns:1fr}
  .uit__fig{min-height:0;aspect-ratio:16/10}
  .uit__fig img{position:static}
  .studio__lijst{grid-template-columns:1fr 1fr}
  .post:nth-child(n){margin-top:0}
  .studio__head{grid-template-columns:1fr}
}
@media (max-width:760px){
  .reads__lijst{grid-template-columns:1fr}
  .studio__lijst{grid-template-columns:1fr}
  .mhero__meta{gap:.6rem}
}

/* ==========================================================================
   LOSSE STUKKEN — artikel en case
   Zelfde taal als de andere pagina's: split-hero, sticky rail, kleurblok,
   en onderaan verder lezen. Geen kale tekstkolom.
   ========================================================================== */

/* leesvoortgang bovenaan */
.voortgang{position:fixed;top:0;left:0;right:0;height:3px;z-index:210;background:transparent;pointer-events:none}
.voortgang i{display:block;height:100%;width:0;background:var(--forest);transition:width .1s linear}

/* ---------- hero ---------- */
/* Artikelen en cases openden als enige pagina's in het wit terwijl elke andere
   pagina in lila begint. Daardoor voelde zo'n pagina niet bij de rest horen.
   De kop is nu een vlak over de volle breedte met de inhoud op maxw erin —
   dezelfde opening als overal. */
.lees__hero{
  background:var(--lila);
  padding:var(--v-6) var(--pad) var(--v-2)
}
.lees__hero__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center
}

.lees__kop .mtag{align-self:flex-start;margin-bottom:1.3rem}
/* Op het lila vlak haalt het accent maar 3,1:1 en dit pilletje is 9px. Wit met
   inkt erin, net als de eyebrow-pil op de andere hero's. */
.lees__hero .mtag{background:var(--wit);color:var(--inkt);border-color:transparent}
.lees__hero .mtag i{color:var(--oranje-tekst)}
.lees__h{font-size:var(--k-m);line-height:1.03;margin:0}
.lees__h em{font-style:normal;color:var(--accent)}
.lees__lead{
  margin-top:1.5rem;max-width:46ch;color:var(--ink-60);
  font-size:var(--t-lead);transition-delay:.15s
}
.lees__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;margin-top:1.8rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60);transition-delay:.25s
}
.lees__meta i{display:block;width:4px;height:4px;border-radius:50%;background:var(--ink-12)}
/* Stond op 4:5. Met het lila vlak eromheen werd de kop van een artikel daardoor
   964px hoog, met 317px leeg boven de tekst en 217px eronder — het beeld duwde
   de hele band op. Op 4:3 (de verhouding van het bestand zelf, dus ook geen
   extra uitsnede) is het 666px en staan tekst en beeld naast elkaar in balans. */
.lees__fig{
  margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--lift-2);transition-delay:.1s
}
.lees__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--fotopos)}

/* ---------- body met sticky rail ---------- */
.lees__body{
  /* lucht onder het lila vlak van de kop, net als onder de andere hero's */
  max-width:var(--maxw);margin-inline:auto;padding:var(--v-2) var(--pad) var(--v-3);
  display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:start
}
.rail{position:sticky;top:var(--v-6);display:grid;gap:1.6rem}
.rail__l{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:.9rem
}
.rail ol{counter-reset:h;display:grid;gap:.1rem;border-left:1.5px solid var(--ink-12)}
.rail li{counter-increment:h}
.rail li a{
  display:block;position:relative;padding:.5rem 0 .5rem 1.6rem;margin-left:-1.5px;
  border-left:1.5px solid transparent;
  /* stond op --t-klein (14px) en dat leest in een inhoudsopgave te klein weg —
     dit is navigatie, geen bijschrift */
  font-size:var(--t-body);line-height:1.4;color:var(--ink-60);
  transition:color .3s var(--e),border-color .3s var(--e)
}
.rail li a::before{
  content:counter(h,decimal-leading-zero);position:absolute;left:.55rem;top:.62rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);color:var(--accent);
  opacity:0;transition:opacity .3s var(--e)
}
.rail li a:hover{color:var(--ink)}
.rail li a.is-hier{color:var(--accent);font-weight:600;border-left-color:var(--accent);padding-left:1.9rem}
.rail li a.is-hier::before{opacity:.75}
.rail__terug{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase
}
.rail__terug .arw{width:14px;height:14px;transform:rotate(180deg);transition:transform .35s var(--e)}
.rail__terug:hover .arw{transform:rotate(180deg) translateX(4px)}

.stuk__in{max-width:38rem;font-size:var(--t-lees);color:var(--ink)}
.stuk__in > *:first-child{margin-top:0}
.stuk__in h2{
  scroll-margin-top:var(--v-6);
  font-family:var(--display);font-weight:800;font-size:var(--k-4xs);
  letter-spacing:-.015em;line-height:1.14;margin:var(--v-1) 0 .75rem
}
.stuk__in h2:first-child{margin-top:0}
.stuk__in h3{font-family:var(--display);font-weight:600;font-size:1.14rem;margin:1.7rem 0 .45rem}
.stuk__in p{margin-bottom:1.05rem;color:var(--ink-60);line-height:1.72}
.stuk__in p strong{color:var(--ink);font-weight:600}
.stuk__in ul,.stuk__in ol{margin:0 0 1.2rem;padding-left:1.3rem;color:var(--ink-60)}
.stuk__in ul li{list-style:disc;margin-bottom:.35rem}
.stuk__in ol li{list-style:decimal;margin-bottom:.35rem}
.stuk__in a:not(.btn){text-decoration:underline;text-underline-offset:3px;color:var(--accent)}
/* een knop in de artikeltekst houdt zijn eigen kleur en krijgt geen streep */
.stuk__in a.btn{text-decoration:none}
.stuk__in blockquote{margin:1.6rem 0;padding-left:1.1rem;border-left:2px solid var(--sage);font-style:italic;color:var(--ink)}
.stuk__in img{border-radius:var(--r);margin:1.4rem 0;width:100%;height:auto}

/* ---------- slotzin als kleurblok ---------- */
.slot{padding:0 var(--pad) var(--v-3)}
.slot__in{
  max-width:var(--maxw);margin-inline:auto;background:var(--sage);color:var(--accent);
  border-radius:var(--r-lg);padding:clamp(2.2rem,5vw,4rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:start
}
.slot__q{
  font-family:var(--display);font-weight:800;font-size:var(--k-2xs);
  line-height:1.16;letter-spacing:-.015em;max-width:28ch;margin:0
}
.slot__m{
  width:clamp(2.4rem,4vw,3.4rem);aspect-ratio:1;border-radius:50%;
  background:var(--forest);color:var(--sage);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.4em;line-height:1;padding-bottom:.18em
}

/* ---------- caseblok met video ----------
   Tekst aan de ene kant, een staande video aan de andere, om en om gespiegeld.
   De video's zijn 1080x1920: op volle kolombreedte zouden ze anderhalf scherm
   hoog worden, vandaar een plafond op de hoogte in plaats van op de breedte —
   dan klopt het kader bij elke verhouding die de klant later aanlevert. */
/* Zelfde opbouw als de diensten op /diensten/: geen gekleurde band maar een
   haarlijn tussen de stukken, een nummer boven de kop en de kop in het
   accent. Dat maakt de casepagina's onderdeel van dezelfde familie. */
.cblok{padding:var(--v-2) var(--pad);border-top:1px solid var(--ink-12)}
.cblok:first-of-type{border-top:0}
/* Eén blok per case staat op een merkvlak, als rustpunt tussen de witte
   stukken. Op zo'n vlak hoort geen haarlijn — de kleur doet het scheiden al —
   en krijgt het blok dezelfde ronding als de andere gekleurde banden.
   Het accent moet er de gedempte oranje worden: het merkoranje haalt op
   perzik 2,16:1 en dat is ook voor een kop van 43px te weinig, de gedempte
   variant haalt 3,49:1. Zo staat het ook op de afsluitband. */
.cblok.anders--vlak{
  border-top:0;border-radius:var(--r-lg);
  --accent:var(--oranje-tekst)
}
.cblok.anders--vlak + .cblok{border-top:0}
.cblok.anders--perzik{background:var(--perzik)}
.cblok.anders--lila{background:var(--lila)}
.cblok__n{
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin:0 0 .9rem
}
.cblok__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(2rem,5vw,5rem);align-items:center
}
/* Een blok zonder media (het beeld moet de klant nog aanleveren). Eerst als
   één smalle kolom gedaan, maar dan blijft tweederde van de band leeg en leest
   het nog steeds als een gat. Nu dezelfde opbouw als elke sectiekop op de
   site: kop aan de ene kant, tekst in de leeskolom aan de andere — en om en om
   van kant, net als de blokken mét beeld.
   Expliciete grid-row op allebei: met alleen een kolom laat de browser het
   tweede kind doorschuiven naar de volgende rij zodra dat kind links van het
   vorige staat. */
.cblok--solo .cblok__in{
  grid-template-columns:minmax(0,1fr) minmax(0,var(--kol-lead));
  align-items:start
}
.cblok--solo .cblok__kop{grid-column:1;grid-row:1}
/* 16ch was te krap: "Van merkverhaal naar e-mailmarketing" brak af op het
   koppelteken middenin het woord. 22ch laat die kop heel, en kort werk als
   "Het resultaat" blijft gewoon op één regel. */
.cblok--solo .cblok__h{max-width:22ch;margin-bottom:0}
.cblok--solo .cblok__body{grid-column:2;grid-row:1}
.cblok--solo.cblok--flip .cblok__in{
  grid-template-columns:minmax(0,var(--kol-lead)) minmax(0,1fr)
}
.cblok--solo.cblok--flip .cblok__kop{grid-column:2}
.cblok--solo.cblok--flip .cblok__body{grid-column:1}
.cblok .cblok__body .cblok__p{max-width:none}
@media (max-width:900px){
  .cblok--solo .cblok__in,
  .cblok--solo.cblok--flip .cblok__in{grid-template-columns:minmax(0,1fr)}
  .cblok--solo .cblok__kop,.cblok--solo.cblok--flip .cblok__kop{grid-column:1;grid-row:1;margin-bottom:1.1rem}
  .cblok--solo .cblok__body,.cblok--solo.cblok--flip .cblok__body{grid-column:1;grid-row:2}
}
.cblok--flip .cblok__txt{grid-column:2;grid-row:1}
.cblok--flip .cblok__vid{grid-column:1;grid-row:1}
/* Dubbele klasse, en dat is nodig: deze blokken staan binnen .stuk__in, en
   `.stuk__in h2` (0,1,1) wint anders van `.cblok__h` (0,1,0). De kop kwam
   daardoor op 25px uit in plaats van op de 43px van --k-xs. Hetzelfde geldt
   voor de alinea's. */
.cblok .cblok__h{
  font-family:var(--display);font-weight:800;font-size:var(--k-xs);
  line-height:1.02;letter-spacing:-.02em;color:var(--accent);
  margin:0 0 .35rem;text-wrap:balance
}
.cblok .cblok__h em{font-style:normal;color:var(--accent)}
/* Exact dezelfde maten als .dnst__sub op /diensten/: dat is de zwarte,
   vetgedrukte regel onder de oranje kop. */
.cblok .cblok__sub{
  font-family:var(--display);font-weight:800;font-size:var(--k-4xs);
  line-height:1.15;letter-spacing:-.02em;color:var(--nadruk);
  /* 24ch is de maat op /diensten/, maar daar is de zin kort ("Jouw merk, maar
     dan helemaal eigen", 35 tekens). Hier is het de openingszin van een
     alinea, vaak het dubbele; op 24ch werden dat vier smalle regels. */
  margin:0 0 1.2rem;text-wrap:balance;max-width:40ch
}
.cblok .cblok__p{color:var(--ink-60);font-size:var(--t-lees);line-height:1.7;margin:0;max-width:56ch}
.cblok .cblok__p + .cblok__p{margin-top:.9rem}
.cblok__vid{margin:0}
.cblok__knop{margin:1.8rem 0 0}
.cblok__vid--beeld img{
  display:block;width:100%;height:auto;border-radius:var(--r);box-shadow:var(--lift-2)
}
/* Stond op 34rem (544px) en maakte elk blok honderd pixels hoger dan een
   dienst op /diensten/, waar de media 432 tot 487px is. 30rem brengt het
   staande kader op 480px en daarmee de blokken op dezelfde hoogte. */
.cblok__vid video{
  display:block;width:auto;max-width:100%;max-height:min(62vh,30rem);
  margin-inline:auto;border-radius:var(--r);background:var(--inkt);
  box-shadow:var(--lift-2)
}
@media (max-width:900px){
  .cblok{padding:var(--v-1) var(--pad)}
  .cblok__in{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .cblok--flip .cblok__txt,.cblok--flip .cblok__vid{grid-column:1}
  .cblok--flip .cblok__txt{grid-row:1}
  .cblok--flip .cblok__vid{grid-row:2}
  /* Stond op 70vh: op een telefoon van 844px is dat 591px, bijna het hele
     scherm, en dan zie je de tekst eromheen niet meer. 52vh houdt de video
     groot genoeg om te bekijken en laat de kop en de tekst meelopen. */
  .cblok__vid video{max-height:min(52vh,26rem)}
}

/* ---------- verder lezen ---------- */
.verder{padding:0 var(--pad) var(--v-4);max-width:var(--maxw);margin-inline:auto}
.verder__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--kol-lead));gap:var(--gap);align-items:end;margin-bottom:var(--v-1)}
.verder .h2{font-size:var(--k-s)}

/* Een case op een dienstpagina toont zijn sterkste cijfer in plaats van een
   samenvatting: op die plek is het bewijs interessanter dan de beschrijving. */
.dk__cijfer{display:grid;gap:.1rem;margin:0}
.dk__cijfer b{
  font-family:var(--display);font-weight:800;font-size:var(--k-4xs);
  letter-spacing:-.02em;line-height:1;color:var(--accent)
}
.dk__cijfer b i{font-style:normal;font-size:.62em;margin-left:.08em}
.dk__cijfer span{font-size:var(--t-klein);line-height:1.35;color:var(--ink-60)}

/* de linkjes naar de diensten in de kop van een case */
.lees__meta--link a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--ink-12);
  transition:text-decoration-color .3s var(--e),color .3s var(--e)
}
.lees__meta--link a:hover{color:var(--accent);text-decoration-color:currentColor}

/* ---------- gewone pagina zonder eigen template ---------- */
.stuk{max-width:min(var(--maxw),58rem);margin-inline:auto;padding:var(--v-7) var(--pad) var(--v-3)}
.stuk__kop{max-width:44rem;margin:0 auto var(--v-1);text-align:center}
.stuk__h{font-size:var(--k-xs);line-height:1.06;margin:1.1rem 0 0;text-wrap:balance}
.stuk .stuk__in{margin-inline:auto;max-width:36rem}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* Het raster zat op .lees__hero tot ik daar een vlak van maakte met
     .lees__hero__in erin. Deze regel wees nog naar de buitenkant, dus op een
     telefoon bleven de twee kolommen staan: tekst in een strook van 300px en
     het beeld ernaast. */
  .lees__hero__in{grid-template-columns:1fr}
  .lees__fig{aspect-ratio:16/10;max-width:none;order:-1}
  .slot__in{grid-template-columns:1fr}
}
/* de rail houdt het langer vol dan de hero: pas onder 900px eronder */
@media (max-width:900px){
  .lees__body{grid-template-columns:1fr}
  .rail{position:static;padding-bottom:1.6rem;border-bottom:1px solid var(--ink-12)}
  .rail ol{grid-template-columns:1fr 1fr;display:grid}
  .stuk__in{max-width:none}
}
@media (max-width:760px){
  .rail ol{grid-template-columns:1fr}
  .verder__head{grid-template-columns:1fr}
}

/* minds-raster met minder dan twee fotokaarten: dan geen derde kolom */
.minds__grid--smal{grid-template-columns:1.06fr .88fr}
@media (max-width:1100px){.minds__grid--smal{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.minds__grid--smal{grid-template-columns:1fr}}

/* ==========================================================================
   RESULTATEN BIJ EEN CASE
   De cijfers staan bij de case waar ze bij horen, niet los in een band.
   ========================================================================== */
.resultaten__band{padding:0 var(--pad) var(--v-2)}
/* Stond op --forest, en dat is sinds de merkwissel inkt: het enige donkere
   vlak midden in een verder lichte casepagina. De twee andere cijferblokken op
   de site (.stats en .proof) staan op perzik; dit hoort bij die familie. */
.resultaten__in{
  max-width:var(--maxw);margin-inline:auto;background:var(--perzik);color:var(--inkt);
  border-radius:var(--r-lg);padding:clamp(1.8rem,3.4vw,3rem)
}
.resultaten__in .lbl{color:var(--ink-60);margin-bottom:1.4rem}
.resultaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:var(--gap)}
.resultaten li{border-top:1px solid rgba(26,20,32,.18);padding-top:1.2rem}
.resultaten__n{
  display:block;font-family:var(--display);font-weight:800;
  font-size:var(--k-m);line-height:1;letter-spacing:-.03em;color:var(--inkt)
}
/* De eenheid is hier 15px op een telefoon (het getal is --k-m, niet --k-l zoals
   bij .proof) en oranje haalt op perzik 3,49:1 — genoeg voor grote tekst, niet
   voor deze maat. Vandaar inkt; het accent zit in de sectie eromheen. */
.resultaten__n i{font-style:normal;font-size:.45em;vertical-align:.3em;margin-left:.04em;color:var(--ink-60)}
.resultaten p{
  margin-top:.7rem;color:var(--ink-60);
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase
}
/* Op een telefoon viel de rij terug naar één kolom (de minimumbreedte is
   14rem en die past er maar één keer naast elkaar), en dan word je vier
   schermen lang langs vier losse regels geleid. Twee naast twee: half zo
   hoog, en er is ruimte om het getal groter te zetten dan de --k-m van
   33px die het op deze breedte zou krijgen. */
@media (max-width:640px){
  .resultaten{grid-template-columns:1fr 1fr;gap:1.5rem 1.1rem}
  .resultaten li{padding-top:.9rem}
  /* 9,4vw gaf 37px en dan liep "425,1K" over de halve kolom heen. */
  .resultaten__n{font-size:clamp(1.7rem,8.4vw,2.4rem)}
  .resultaten p{margin-top:.5rem;font-size:var(--t-micro);letter-spacing:.1em}
  /* De cirkel mag niet in de buurcel lopen: in een cel van 137px is 3,6rem
     extra te veel, 1,4rem past er met marge omheen.
     Dubbele klasse nodig: de basisregel staat verderop in dit bestand en wint
     anders op volgorde, ook al is de specificiteit gelijk. */
  .resultaten .resultaten__ring{width:calc(100% + 1.4rem);height:calc(100% + 1rem)}
}

/* ==========================================================================
   DELEN
   ========================================================================== */
.delen{
  max-width:36rem;margin:var(--v-1) 0 0;
  padding-top:var(--v-0);border-top:1px solid var(--ink-12);
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem
}
.delen__l{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-60);margin:0
}
.delen__lijst{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.delen__k{
  position:relative;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--white);border:1.5px solid var(--ink-12);color:var(--ink);cursor:pointer;
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e),transform .3s var(--e)
}
.delen__k svg{width:17px;height:17px}
.delen__k:hover{background:var(--forest);border-color:var(--accent);color:var(--paper);transform:translateY(-2px)}
.delen__k--linkedin:hover{background:#0a66c2;border-color:#0a66c2}
.delen__k--whatsapp:hover{background:#25d366;border-color:#25d366;color:var(--ink)}
.delen__k--kopie.is-gelukt{background:var(--sage);border-color:var(--sage);color:var(--accent)}
.delen__melding{
  position:absolute;bottom:calc(100% + .45rem);left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);border-radius:999px;padding:.3rem .65rem .25rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;pointer-events:none
}
.delen__melding:empty{display:none}
@media (max-width:640px){
  .delen{max-width:none}
}
.delen__k--kopie.is-mislukt{background:#fdecea;border-color:#fdecea;color:var(--fout)}

/* case zonder tekst: de deelknoppen staan dan alleen, zonder rail ernaast */
/* Een case die uit caseblokken bestaat: de rail blijft bovenaan staan als
   inhoudsopgave, maar de blokken lopen over de volle breedte. Anders staat een
   tweekoloms blok in een kolom van 38rem geperst — de tekst loopt dan op dertig
   tekens per regel en een gekleurde band is halverwege afgeknipt. */
.lees__body--blok{
  display:block;max-width:none;padding-inline:0;padding-bottom:0
}
/* De inhoudsopgave bovenaan een blokcase. Stond als een rij grijze linkjes
   en viel daardoor weg tussen de witruimte. Nu een echte index-band: twee
   haarlijnen eromheen, het nummer van het stuk in het accent en de titel in
   inkt. De nummers lopen gelijk met de 01/02/03 boven elk blok, zodat je ziet
   dat het dezelfde stukken zijn. */
.lees__body--blok .rail{
  /* top:auto is hier geen detail. De basisregel zet .rail op sticky met
     top:var(--v-6); laat je die top staan en maak je er relative van, dan
     schuift de balk omlaag zonder dat zijn ruimte meegaat — en komt het
     eerste blok er 80px overheen. */
  position:relative;top:auto;
  max-width:var(--maxw);margin:0 auto var(--v-1);
  padding:1.1rem var(--pad) 0;display:block
}
.lees__body--blok .rail nav{
  border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);
  padding:.55rem 0
}
.lees__body--blok .rail__l{
  margin:0 0 .35rem;padding-top:.5rem
}
.lees__body--blok .rail ol{
  display:flex;flex-wrap:wrap;gap:0 2.6rem;border-left:0;counter-reset:h
}
.lees__body--blok .rail li a{
  display:inline-flex;align-items:baseline;gap:.6rem;
  padding:.7rem 0;margin:0;border-left:0;border-bottom:2px solid transparent;
  font-family:var(--display);font-weight:600;font-size:var(--t-body);
  color:var(--nadruk);
  transition:color .3s var(--e),border-color .3s var(--e)
}
/* Het nummer staat hier níét absoluut maar gewoon in de regel: in een
   horizontale balk is er geen kantlijn om het in te hangen. */
.lees__body--blok .rail li a::before{
  content:counter(h,decimal-leading-zero);position:static;opacity:1;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.1em;color:var(--accent)
}
.lees__body--blok .rail li a:hover{color:var(--accent);border-bottom-color:var(--ink-12)}
.lees__body--blok .rail li a.is-hier{
  color:var(--accent);border-bottom-color:var(--accent);padding-left:0;font-weight:700
}
/* de terugknop rechts op dezelfde regel als het labeltje */
.lees__body--blok .rail__terug{position:absolute;right:var(--pad);top:1.6rem}
@media (max-width:700px){
  .lees__body--blok .rail__terug{position:static;margin-top:.8rem}
  .lees__body--blok .rail ol{gap:0 1.4rem}
}
.lees__body--blok .stuk__in{max-width:none}
.lees__body--blok .stuk__in > .delen,
.lees__body--blok .stuk__in > .cit{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)
}
@media (max-width:900px){
  .lees__body--blok .rail{display:block}
}
.lees__body--kaal{grid-template-columns:1fr}
.lees__body--kaal .delen{margin-top:0;border-top:0;padding-top:0;max-width:none}

/* ==========================================================================
   PAGINERING
   ========================================================================== */
.pag{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--maxw);margin:var(--v-2) auto 0;
  padding-top:var(--v-0);border-top:1px solid var(--ink-12)
}
.pag__pijl{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  padding:.7rem 1.2rem;border-radius:999px;border:1.5px solid var(--ink-12);
  transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e)
}
.pag__pijl:hover{background:var(--forest);border-color:var(--accent);color:var(--paper)}
.pag__pijl.is-uit{opacity:.3;pointer-events:none}
.pag__pijl .arw{width:14px;height:14px;transition:transform .35s var(--e)}
.pag__pijl .arw--terug{transform:rotate(180deg)}
.pag__pijl:hover .arw{transform:translateX(3px)}
.pag__pijl:hover .arw--terug{transform:rotate(180deg) translateX(3px)}
.pag__lijst{display:flex;align-items:center;gap:.3rem}
.pag__n{
  display:grid;place-items:center;min-width:2.4rem;height:2.4rem;padding:0 .5rem;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);letter-spacing:.04em;color:var(--ink-60);
  transition:background .3s var(--e),color .3s var(--e)
}
.pag__n:hover{background:var(--white);color:var(--ink)}
.pag__n.is-nu{background:var(--forest);color:var(--paper)}
.pag__gat{color:var(--ink-60);padding:0 .2rem;font-size:var(--t-klein)}
@media (max-width:640px){
  /* alles op één regel houden: pijl — nummers — pijl */
  .pag{flex-wrap:nowrap;gap:.5rem}
  .pag__pijl span{display:none}
  .pag__pijl{padding:.7rem .85rem;flex:none}
  .pag__lijst{flex:1;justify-content:center;min-width:0;gap:.15rem}
  .pag__n{min-width:2.1rem;height:2.1rem;font-size:var(--t-label);padding:0 .3rem}
}
/* op sage of donkergroen meebewegen */
.faq .pag,.studio .pag{border-top-color:rgba(26,20,32,.2)}

/* sterrenregel in de hero ------------------------------------------------ */
.hscore{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:var(--v-0) 0 0;
  font-family:var(--text);font-size:var(--t-klein);color:var(--ink-60);
  transition:color .3s var(--e)
}
a.hscore:hover{color:var(--ink)}
a.hscore span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-12)}
a.hscore:hover span{text-decoration-color:currentColor}
.hscore .sterren{transform:translateY(-1px)}
@media (max-width:620px){
  .hscore{font-size:var(--t-klein);gap:.42rem}
}

/* review op een dienstpagina --------------------------------------------- */
.drev{
  width:min(var(--maxw),100%);margin-inline:auto;
  padding:0 var(--pad) var(--v-2)
}
.drev__lijst{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr));
  gap:clamp(1rem,2vw,1.8rem);list-style:none;margin:1rem 0 0;padding:0
}
.drev__i{
  display:grid;gap:.7rem;padding:clamp(1.3rem,2.2vw,1.8rem);
  background:var(--white);border-radius:var(--r)
}
.drev__i blockquote{margin:0}
.drev__i blockquote p{
  margin:0;font-family:var(--text);font-size:var(--t-lees);
  line-height:1.55;text-wrap:pretty
}
.drev__wie{
  margin:0;font-family:var(--display);font-weight:700;font-size:var(--t-klein);color:var(--ink)
}
.drev__wie i{
  display:block;margin-top:.15rem;font-style:normal;font-size:var(--t-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60)
}

/* google-reviews --------------------------------------------------------- */
/* Tussen de peachkleurige teamsectie en de lila afsluiter stonden werk, de
   reviews en Minds alle drie op papier — ruim 2800px zonder kleur. De reviews
   krijgen daarom hun eigen vlak, zodat de pagina weer afwisselt. */
.revs{
  width:100%;margin-inline:auto;padding:var(--v-5) var(--pad);
  background:var(--lila);border-radius:var(--r-lg)
}
/* De sectie loopt nu over de volle breedte voor het vlak; de inhoud erin houdt
   de kolombreedte van de rest van de site. Er zit geen wikkel in de HTML, dus
   dat gebeurt per onderdeel. */
.revs__head,.revs__lijst,.revs__punten{max-width:var(--maxw);margin-inline:auto}
.revs__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--kol-lead));gap:var(--gap);align-items:end;
  margin-bottom:clamp(2rem,4vw,3rem)
}
.revs .h2{font-size:var(--k-s);max-width:16ch}

/* Met de hand getrokken cirkel om één cijfer, zoals de klant het in hun
   voorbeeld had staan. Lila op het perzikvlak: dat is de enige merkkleur die
   daar nog niet staat, en hij hoeft niet te lezen — het is een accent, geen
   tekst. De cirkel ligt achter het getal en rekt mee met de breedte. */
.resultaten__li--ring .resultaten__n{position:relative;display:inline-block}
.resultaten__ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  /* Ruim om het getal heen: de cirkel moet eromheen lopen, niet erdoorheen.
     Gemeten: bij 1,5rem extra sneed hij door de cijfers. */
  width:calc(100% + 3.6rem);height:calc(100% + 2rem);
  /* max-width:none is nodig: de basisregel zet svg op max-width:100% en
     daardoor bleef de cirkel precies zo breed als het getal. */
  /* Lila haalde maar 1,11:1 op het perzikvlak — vrijwel onzichtbaar. De
     leesbare oranje haalt 3,49:1 en is de kleur die op deze band toch al het
     accent is. */
  max-width:none;color:var(--oranje-tekst);pointer-events:none;overflow:visible
}

/* het cijfer: klikbaar naar de vermelding, zodat het na te kijken is */
.gscore{
  display:flex;align-items:center;gap:.9rem;padding:.85rem 1.2rem;
  background:var(--white);border-radius:999px;color:var(--ink);
  box-shadow:var(--lift-1);transition:transform .35s var(--e)
}
a.gscore:hover{transform:translateY(-2px)}
.gscore__c{font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;letter-spacing:-.02em}
.gscore__b{display:grid;gap:.2rem}
.gscore__t{font-family:var(--text);font-size:var(--t-klein);color:var(--ink-60);white-space:nowrap}

.sterren{display:inline-flex;gap:.1rem}
.ster svg{width:.78rem;height:.78rem;display:block;fill:#e8a33d}
.ster--leeg svg{fill:var(--ink-12)}

.revs__lijst{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
  gap:clamp(.8rem,1.6vw,1.4rem);list-style:none;margin:0;padding:0
}
/* Alle reviewkaarten hetzelfde. Ze rouleerden hiervoor door lila, oranje en
   perzik, en die volgorde betekende niets — erger: een oranje kaart zet
   nadruk op de ene klant boven de andere, en dat is een uitspraak die je niet
   met kleur hoort te doen. Nu één kaart, met het accent waar het thuishoort:
   de sterren. */
.rev,.rev--lav,.rev--peach{--bg:var(--wit);--c:var(--gedempt)}
.rev figure{box-shadow:inset 0 0 0 1.5px var(--lila)}
/* de sterren blijven Google-goud: dat is het herkenningsteken van een échte
   Google-review, geen versiering die je naar je huisstijl trekt */
.rev figure{
  height:100%;margin:0;display:flex;flex-direction:column;gap:1rem;
  padding:clamp(1.4rem,2.4vw,1.9rem);border-radius:var(--r);
  background:var(--bg);color:var(--ink)
}
.rev blockquote{margin:0;flex:1}
.rev blockquote p{
  margin:0;font-family:var(--text);font-size:var(--t-lees);
  line-height:1.55;text-wrap:pretty
}
.rev figcaption{display:grid;gap:.15rem;margin-top:auto}
.rev__wie{font-family:var(--display);font-weight:700;font-size:var(--t-body)}
.rev__meta{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--c)
}
@media (max-width:760px){
  .revs__head{grid-template-columns:1fr;align-items:start}
  .gscore{justify-self:start}
}

/* klantcitaten verzameld in een eigen sectie ----------------------------- */
.cits{width:min(var(--maxw),100%);margin-inline:auto;padding:var(--v-4) var(--pad)}
.cits__head{margin-bottom:clamp(2rem,4vw,3rem)}
/* zelfde schaal als de andere sectiekoppen; zonder deze regel valt de kop
   terug op de grote .h2 en vult hij in z'n eentje het halve scherm */
.cits .h2{font-size:var(--k-s);max-width:18ch}
.cits__lijst{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr));
  gap:clamp(.8rem,1.6vw,1.4rem);list-style:none;margin:0;padding:0
}
.cit{--bg:var(--sage);--c:var(--forest)}
.cit--lav{--bg:var(--lav);--c:var(--violet)}
.cit--peach{--bg:var(--peach);--c:var(--rust)}
.cit figure{
  height:100%;margin:0;display:flex;flex-direction:column;justify-content:space-between;
  gap:1.6rem;padding:clamp(1.5rem,2.6vw,2.1rem);border-radius:var(--r);
  background:var(--bg);color:var(--ink)
}
.cit blockquote{margin:0;position:relative;padding-top:1.9rem}
.cit blockquote::before{
  content:"\201C";position:absolute;left:-.03em;top:-.24em;
  font-family:var(--display);font-weight:800;font-size:3.4rem;line-height:1;color:var(--c);opacity:.55
}
.cit blockquote p{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:var(--t-lead);line-height:1.32;letter-spacing:-.012em;text-wrap:pretty
}
.cit figcaption{display:grid;gap:.5rem}
.cit__wie{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--c)
}
.cit__case{
  display:inline-flex;align-items:center;gap:.45rem;align-self:start;
  font-family:var(--display);font-weight:700;font-size:var(--t-klein);color:var(--ink);
  transition:gap .3s var(--e)
}
.cit__case:hover{gap:.8rem;color:var(--c)}
.cit__case svg{width:.85rem;height:.85rem}

/* klantcitaat als eigen blok aan het eind van een case ------------------- */
.cq{
  margin:clamp(2.4rem,5vw,3.6rem) 0 0;padding:clamp(1.8rem,3.5vw,2.6rem) 0 0;
  border-top:1px solid var(--ink-12);position:relative
}
/* .stuk__in blockquote zet een cursieve tekst met een groene rand; dit blok
   heeft zijn eigen vorm, dus die erfenis zetten we hier terug */
.stuk__in .cq__q{margin:0;padding-left:0;border-left:0;font-style:normal}
.cq__q p{
  font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:var(--k-3xs);line-height:1.22;letter-spacing:-.018em;
  text-wrap:balance;margin:0
}
/* het openingsteken hangt in de kantlijn, zodat de tekst zelf uitgelijnd blijft */
.cq__q p::before{
  content:"\201C";position:absolute;left:-.62em;top:-.06em;
  font-family:var(--display);font-weight:800;font-size:clamp(3rem,6vw,4.6rem);
  line-height:1;color:var(--sage);pointer-events:none
}
.cq__wie{
  margin-top:1rem;font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)
}
.cq__wie::before{content:"— "}
/* in de kantlijn hangen kan niet als er geen ruimte is */
@media (max-width:1100px){
  .cq__q p::before{position:static;display:block;margin-bottom:-.28em;font-size:2.6rem}
}

/* klantcitaat in een case */
.stuk__in blockquote cite{
  display:block;margin-top:.7rem;font-style:normal;
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)
}

/* caseraster: cijfers op de kaart */
.kaarten--cases .dk a{--bg:var(--sage)}
/* Twee kaarten in drie kolommen laten een derde van de rij leeg: dat leest
   als "er mist iets" in plaats van als een selectie. Bij weinig cases dus
   twee ruime kaarten met een hoger beeld, en de tekst krijgt lucht. */
.kaarten--ruim{grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.4vw,2.2rem)}
.kaarten--ruim .dk__fig{aspect-ratio:4/3;border-radius:var(--r)}
/* Bij twee grote kaarten op een witte pagina is de kaartrand onzichtbaar,
   en dan springt alleen de tekst in terwijl het beeld tot de rand loopt.
   Dat leest als een foutje. Hier dus geen kaart maar een kolom: tekst
   links uitgelijnd met het beeld erboven. */
.kaarten--ruim .dk a{background:none;border-radius:0;overflow:visible}
.kaarten--ruim .dk a::before{display:none}
/* De basiskaart tilt bij hover op met een schaduw, verkleurt alle tekst en
   maakt de alinea en de cijfers doorzichtiger. Dat klopt voor een kaart met
   een eigen vlak, maar hier is er geen vlak: de schaduw zweeft dan als een
   wit paneel achter de tekst en de tekst dooft weg. Alleen het beeld en de
   titel reageren. */
.kaarten--ruim .dk a:hover{transform:none;box-shadow:none;color:inherit}
.kaarten--ruim .dk a:hover p,
.kaarten--ruim .dk a:hover .dk__cijfers li,
.kaarten--ruim .dk a:hover .dk__cijfers b{opacity:1}
.kaarten--ruim .dk a:hover p{color:var(--ink-60)}
.kaarten--ruim .dk__b{padding:clamp(1.1rem,2vw,1.5rem) 0 0}
.kaarten--ruim .dk__b h3{font-size:var(--k-3xs)}
.kaarten--ruim .dk__b p{max-width:46ch}
/* het beeld reageert nog wel op de muis, de kaart zelf hoeft niet te bewegen */
.kaarten--ruim .dk a:hover h3{color:var(--accent)}
.kaarten--ruim .dk a h3{transition:color .35s var(--e)}
/* `.dk--sage` zet --accent op inkt, omdat het accent op een gekleurde kaart
   te weinig contrast heeft. Deze kaarten staan op wit, dus hier mag het
   leesbare oranje terug — anders kleurt de titel bij hover naar inkt en zie
   je helemaal niets gebeuren. */
.kaarten--ruim .dk{--accent:var(--oranje-tekst)}
@media (max-width:860px){
  .kaarten--ruim{grid-template-columns:1fr}
}
.dk__cijfers{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.9rem}
.dk__cijfers li{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-60)
}
.dk__cijfers b{display:block;font-size:1.25rem;letter-spacing:-.02em;color:var(--c);margin-bottom:.1rem}
.dk a:hover .dk__cijfers li{color:inherit;opacity:.75}
.dk a:hover .dk__cijfers b{color:inherit}

/* ---- dienstpagina: verwante diensten onderaan + lege staat ------------- */
.kaarten--stil{margin-top:clamp(1.4rem,3vw,2.4rem)}
.dienst__leeg{
  font-family:var(--text);font-size:var(--t-lead);line-height:1.6;
  color:var(--ink-60);max-width:34ch;margin:0 0 1.6rem
}
@media(max-width:900px){.kaarten--stil{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.kaarten--stil{grid-template-columns:1fr}}

/* ==========================================================================
   OOGLID — secties die opengaan in plaats van infaden
   Dezelfde vorm als de laadanimatie, zodat het motief uit de merknaam
   terugkomt. Alleen op vlakken die in één scherm passen; op een blok van
   1300px hoog leest de beweging niet meer als een ooglid.
   Aan/uit met de schakelaar in Aanpassen → Sitegegevens.
   ========================================================================== */
/* De klasse heet nog 'ooglid'. Dat is historie: hij komt uit de tijd dat het
   merk Blync heette. De beweging is nu een blok, niet een ooglid. Hernoemen
   zou de instelling in de database raken (blync_ooglid) zonder dat iemand er
   iets van merkt, dus de naam blijft en deze regel legt hem uit. */
.ooglid .stats,
.ooglid .proof,
.ooglid .julie { position:relative; overflow:hidden; isolation:isolate }

/* Eén oranje vlak dat over de sectie ligt en wegschuift zodra hij in beeld
   komt. Hiervoor waren dit twee gebogen helften die als een ooglid weken —
   dat motief kwam uit de naam Blync en zegt hier niets meer. Een blok dat
   beweegt is wat dit merk zelf laat zien. */
.ooglid .stats::before,
.ooglid .proof::before,
.ooglid .julie::before {
  content:"";position:absolute;inset:0;z-index:2;
  background:var(--oranje);pointer-events:none;
  transform:translateX(0);
  transition:transform .78s var(--e)
}
.ooglid .stats.is-open::before,
.ooglid .proof.is-open::before,
.ooglid .julie.is-open::before { transform:translateX(101%) }

/* de inhoud komt na het vlak, niet tegelijk */
.ooglid .stats .reveal, .ooglid .proof .reveal, .ooglid .julie .reveal { transition-delay:.34s }

/* De lidden bestaan alleen als er JavaScript is om ze te openen. Zonder JS
   zou de sectie er permanent achter blijven liggen; het document zet zelf een
   .js-klasse op <html>, dus daar hangen we ze aan. */
.ooglid .stats::before, .ooglid .stats::after,
.ooglid .proof::before, .ooglid .proof::after,
.ooglid .julie::before, .ooglid .julie::after { display:none }
.js .ooglid .stats::before, .js .ooglid .stats::after,
.js .ooglid .proof::before, .js .ooglid .proof::after,
.js .ooglid .julie::before, .js .ooglid .julie::after { display:block }
@media (prefers-reduced-motion:reduce) {
  .js .ooglid .stats::before, .js .ooglid .stats::after,
  .js .ooglid .proof::before, .js .ooglid .proof::after,
  .js .ooglid .julie::before, .js .ooglid .julie::after { display:none }
  .ooglid .stats .reveal, .ooglid .proof .reveal, .ooglid .julie .reveal { transition-delay:0s }
}

/* ==========================================================================
   AFSPRAAK INPLANNEN
   Drie stappen onder elkaar. Elke stap verschijnt pas als de vorige klaar is,
   zodat een telefoonscherm nooit meer dan één keuze tegelijk toont.
   ========================================================================== */
/* De planner is de kernactie van de contactpagina en stond in het wit, met
   een wit kaartje erin — drie witte secties op rij zonder enige onderbreking.
   Perzik en niet lila: de kaart van 'waar je ons vindt' eronder is al lila, en
   twee lila vlakken tegen elkaar lopen in elkaar over.
   Het vlak volgt de maat van .stats: maxw + twee keer de paginamarge, zodat de
   binnenkant precies zo breed is als het formulier erboven (die stond tot nu
   toe 116px smaller) en het op een breed scherm een afgeronde kaart wordt in
   plaats van een band met harde hoeken. */
.plan{
  width:100%;max-width:calc(var(--maxw) + var(--pad)*2);margin-inline:auto;
  padding:var(--v-3) var(--pad);
  background:var(--perzik);border-radius:var(--r-lg)
}
.plan__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:start}
/* Zonder min-width:0 groeit een grid-item mee met zijn breedste kind, en dan
   duwt de dagenrij van 1000px de hele doos buiten het scherm. Het geldt voor
   elke laag: de kolom, de doos én de losse stappen erin. */
.plan__doos,.plan__kop,.plan__stap{min-width:0}
.plan__kop{position:sticky;top:var(--v-4)}
.plan .h2{font-size:var(--k-s);max-width:14ch}
.plan__lead{margin-top:1rem;color:var(--ink-60);max-width:32ch}
.plan__duur{
  margin-top:.9rem;font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60)
}

.plan__doos{
  background:var(--white);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--lift-2);display:grid;gap:1.6rem
}
.plan__l{
  display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink)
}
.plan__l span{
  display:grid;place-items:center;width:1.4rem;height:1.4rem;flex:none;
  border-radius:50%;background:var(--ink);color:var(--paper);font-size:var(--t-micro)
}

/* ---- de dagen: een rij die op smalle schermen doorschuift --------------- */
.plan__dagen{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}
.plan__dag{
  flex:none;display:grid;gap:.1rem;justify-items:center;cursor:pointer;
  min-width:3.5rem;padding:.6rem .5rem;border:1px solid var(--ink-12);border-radius:var(--r-s);
  background:none;color:var(--ink);transition:border-color .25s var(--e),background .25s var(--e)
}
.plan__dag i{font-style:normal;font-family:var(--display);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.plan__dag b{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1}
.plan__dag u{text-decoration:none;font-size:var(--t-micro);color:var(--ink-60)}
.plan__dag:hover{border-color:var(--accent)}
.plan__dag[aria-pressed="true"]{background:var(--forest);border-color:var(--accent);color:var(--paper)}
.plan__dag[aria-pressed="true"] i,.plan__dag[aria-pressed="true"] u{color:var(--sage)}

/* ---- de tijden --------------------------------------------------------- */
.plan__tijden{display:flex;flex-wrap:wrap;gap:.45rem}
.plan__tijd{
  cursor:pointer;padding:.5rem .85rem;border:1px solid var(--ink-12);border-radius:999px;
  background:none;color:var(--ink);font-family:var(--display);font-weight:700;
  font-size:var(--t-klein);font-variant-numeric:tabular-nums;
  transition:border-color .25s var(--e),background .25s var(--e)
}
.plan__tijd:hover{border-color:var(--accent)}
.plan__tijd[aria-pressed="true"]{background:var(--forest);border-color:var(--accent);color:var(--paper)}
.plan__wacht{margin:0;color:var(--ink-60);font-size:var(--t-klein)}

/* ---- de gegevens ------------------------------------------------------- */
.plan__velden{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.plan__v{display:grid;gap:.3rem}
.plan__v--breed{grid-column:1/-1}
.plan__v span{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60)
}
.plan__v span i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}
.plan__v input,.plan__v textarea{
  width:100%;padding:.65rem .8rem;border:1px solid var(--ink-12);border-radius:var(--r-s);
  background:var(--paper);color:var(--ink);font-family:var(--text);font-size:var(--t-body);
  transition:border-color .25s var(--e)
}
.plan__v input:focus,.plan__v textarea:focus{outline:none;border-color:var(--accent)}
.plan__honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.plan__go{margin-top:1.1rem}
.plan__go[disabled]{opacity:.55;pointer-events:none}

/* ---- melding en bevestiging -------------------------------------------- */
.plan__melding{margin:0;font-size:var(--t-klein);min-height:1.2em}
.plan__melding.is-fout{color:var(--fout)}
.plan__melding.is-leeg{color:var(--ink-60)}
.plan__ok{display:grid;gap:.5rem;padding:.5rem 0}
.plan__ok-kop{
  margin:0;font-family:var(--display);font-weight:800;font-size:var(--k-4xs);color:var(--accent)
}
.plan__ok-wan{margin:0;font-family:var(--display);font-weight:700;font-size:var(--t-body)}
.plan__ok-na{margin:0;color:var(--ink-60);font-size:var(--t-klein)}

@media (max-width:900px){
  .plan__in{grid-template-columns:1fr}
  .plan__kop{position:static}
  .plan__velden{grid-template-columns:1fr}
}

/* ==========================================================================
   ROUTE — vier vormen voor dezelfde drie fases
   De basis (.stap) blijft gelijk; per vorm verandert alleen de opmaak. Zo
   houdt elke variant dezelfde inhoud, kleuren en links.
   ========================================================================== */

/* De inhoud van een stap zit in .stap__b; die heeft zijn eigen ritme nodig,
   want de grid-gap van .stap loopt niet door in een kind. */
.stap__b{display:grid;gap:.55rem;align-content:start}
/* De papierkleurige ring om het nummer onderbreekt de lijn in de lijn-vorm.
   In de andere vormen is er geen lijn, en dan is het een wit vlek. */
.route:not(.route--lijn) .stap__bol{box-shadow:none}

/* gemeenschappelijk voor alle vormen behalve 'lijn' */
.route--kaart .route__stappen,
.route--beeld .route__stappen { grid-template-columns:repeat(3,1fr) }
.route--kaart .stap,
.route--beeld .stap { padding-top:0 }

/* ---- 2. kaart: zelfde vorm als de dienstkaarten verderop --------------- */
.route--kaart .stap{
  background:var(--bg-fase,var(--sage));border-radius:var(--r);
  padding:clamp(1.4rem,2.6vw,2rem);display:grid;gap:.9rem;align-content:start
}
.route--kaart .stap--sage {--bg-fase:var(--sage);  --op-fase:var(--forest)}
.route--kaart .stap--peach{--bg-fase:var(--peach); --op-fase:var(--rust)}
.route--kaart .stap--lav  {--bg-fase:var(--lav);   --op-fase:var(--violet)}
.route--kaart .stap__bol{
  position:static;width:auto;height:auto;border-radius:0;background:none;
  justify-self:start;color:var(--op-fase);font-size:var(--t-label);letter-spacing:.14em
}
.route--kaart .stap__h{margin:0}
.route--kaart .stap p{color:var(--ink);opacity:.78;max-width:none}
.route--kaart .stap__l{color:var(--op-fase);margin-top:.3rem}

/* ---- 3. beeld: het fasebeeld dat al bij de fase hoort ------------------ */
.route--beeld .stap{display:grid;gap:1rem;align-content:start}
.route--beeld .stap__fig{
  margin:0;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--ink-12)
}
.route--beeld .stap__fig img{
  width:100%;height:100%;object-fit:cover;object-position:var(--fotopos);
  transition:transform 1.1s var(--e)
}
.route--beeld .stap:hover .stap__fig img{transform:scale(1.04)}
.route--beeld .stap__bol{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  width:2.2rem;height:2.2rem;font-size:var(--t-micro)
}
.route--beeld .stap{position:relative}
.route--beeld .stap__h{margin-bottom:.5rem}

/* ---- 4. tijdlijn: onder elkaar, met een lijn die meeloopt -------------- */
.route--tijdlijn .route__stappen{
  grid-template-columns:1fr;gap:0;position:relative;max-width:46rem
}
.route--tijdlijn .stap{
  position:relative;padding:0 0 var(--v-1) clamp(3.4rem,6vw,4.6rem);
  display:grid;gap:.5rem
}
/* de lijn loopt door de bollen heen, maar niet voorbij de laatste */
.route--tijdlijn .stap::before{
  content:"";position:absolute;left:clamp(1.35rem,2.6vw,1.85rem);top:2.7rem;bottom:0;
  width:2px;background:var(--ink-12)
}
.route--tijdlijn .stap:last-child{padding-bottom:0}
.route--tijdlijn .stap:last-child::before{display:none}
.route--tijdlijn .stap__bol{top:0;left:0}
/* De gelijke kophoogte is er voor drie kolommen naast elkaar; onder elkaar
   levert die een gat van een halve regel op. */
.route--tijdlijn .stap__h{margin:0;min-height:0}
.route--tijdlijn .stap p{max-width:52ch}
/* de link krimpt tot zijn eigen tekst in plaats van de kolom te vullen */
.route--tijdlijn .stap__l,
.route--kaart .stap__l,
.route--beeld .stap__l{justify-self:start}
/* bol en kop op dezelfde regel uitlijnen */
.route--tijdlijn .stap__bol{top:-.15rem}

@media (max-width:860px){
  .route--kaart .route__stappen,
  .route--beeld .route__stappen{grid-template-columns:1fr;gap:1rem}
  .route--tijdlijn .stap{padding-left:3.2rem}
}

/* ---- 5. swipe: door de fases vegen, zoals een carrousel ---------------- */
.route--swipe .route__in{position:relative}
.route--swipe .route__stappen{
  display:flex;gap:clamp(.8rem,1.8vw,1.2rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  /* de rij loopt door tot de rand van het scherm, zodat de volgende kaart
     half doorkijkt — dat is het signaal dat er meer is */
  margin-inline:calc(var(--pad) * -1);
  padding:.25rem var(--pad) 1.2rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.route--swipe .route__stappen::-webkit-scrollbar{display:none}
.route--swipe .stap{
  flex:0 0 min(78%, 22rem);scroll-snap-align:center;
  background:var(--bg-fase,var(--sage));border-radius:var(--r);
  padding:0 0 clamp(1.2rem,2.4vw,1.7rem);display:grid;gap:.85rem;align-content:start;
  overflow:hidden;position:relative
}
.route--swipe .stap--sage {--bg-fase:var(--sage);  --op-fase:var(--forest)}
.route--swipe .stap--peach{--bg-fase:var(--peach); --op-fase:var(--rust)}
.route--swipe .stap--lav  {--bg-fase:var(--lav);   --op-fase:var(--violet)}
.route--swipe .stap__fig{margin:0;aspect-ratio:5/4;overflow:hidden;background:var(--ink-12)}
.route--swipe .stap__fig img{
  width:100%;height:100%;object-fit:cover;object-position:var(--fotopos)
}
.route--swipe .stap__bol{
  position:absolute;top:.75rem;left:.75rem;z-index:2;width:2.2rem;height:2.2rem;
  font-size:var(--t-micro);box-shadow:none
}
.route--swipe .stap__b{padding-inline:clamp(1.2rem,2.4vw,1.7rem);gap:.5rem}
.route--swipe .stap__h{margin:0;min-height:0}
.route--swipe .stap p{color:var(--ink);opacity:.78;max-width:none}
.route--swipe .stap__l{color:var(--op-fase);justify-self:start}

/* de puntjes eronder, zoals bij een carrousel */
.route__punten{display:flex;gap:.4rem;justify-content:center;margin-top:.2rem}
.route__punt{
  width:.42rem;height:.42rem;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--ink-12);transition:background .3s var(--e),width .3s var(--e)
}
.route__punt[aria-selected="true"]{background:var(--ink);width:1.3rem;border-radius:999px}
.route__punt:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Zonder JavaScript doen de puntjes niets — vegen werkt dan nog steeds, maar
   een knop die niet reageert is erger dan geen knop. Geldt voor elke
   carrousel op de site. */
.route__punten,.revs__punten{display:none}
.js .route__punten,.js .revs__punten{display:flex}
.route__punten,.revs__punten{align-items:center}

/* pijlen naast de puntjes — alleen waar een muis is (het script voegt ze
   alleen dan toe) */
.carr__knop{
  display:grid;place-items:center;width:2rem;height:2rem;padding:0;flex:none;
  margin-inline:.3rem;border:1.5px solid rgba(26,20,32,.3);border-radius:50%;
  background:transparent;color:var(--inkt);cursor:pointer;
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e),opacity .3s var(--e)
}
.carr__knop svg{width:14px;height:14px}
.carr__knop:hover{background:var(--inkt);border-color:var(--inkt);color:var(--wit)}
.carr__knop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.carr__knop[disabled]{opacity:.28;cursor:default}
.carr__knop[disabled]:hover{background:transparent;color:var(--inkt);border-color:rgba(26,20,32,.3)}

@media (min-width:1100px){
  /* Ook op een breed scherm blijft er een kaart half doorkijken. Passen ze
     precies, dan is er niets te vegen en worden de puntjes een leugen — dus
     tweeënhalf in beeld in plaats van drie. */
  .route--swipe .stap{flex:0 0 min(42%, 34rem)}
}

/* ---- reviews als carrousel --------------------------------------------- */
.revs--swipe .revs__lijst{
  display:flex;gap:clamp(.8rem,1.6vw,1.4rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--pad) * -1);
  padding:.25rem var(--pad) 1.2rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.revs--swipe .revs__lijst::-webkit-scrollbar{display:none}
/* Eén kaart in beeld met de volgende half zichtbaar; op een breed scherm
   tweeënhalf, zodat er altijd iets doorkijkt en het vegen zin heeft. */
.revs--swipe .rev{flex:0 0 min(80%, 22rem);scroll-snap-align:center}
@media (min-width:900px){ .revs--swipe .rev{flex:0 0 min(38%, 25rem)} }

/* De langste review is 13 regels, de kortste 4. In een rij naast elkaar rekt
   die langste alle kaarten uit en houden de korte een gat van negen regels
   over. Acht regels vangt de kern; de rest staat op Google. */
.revs--swipe .rev blockquote p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;
  overflow:hidden
}
.revs__punten{gap:.4rem;justify-content:center;margin-top:.2rem;flex-wrap:wrap}

/* ---- kantelknop (alleen iOS, dat om toestemming vraagt) ----------------- */
.kantelknop{
  order:3;align-self:center;margin-top:-.4rem;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.6rem 1.05rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--white);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.11em;text-transform:uppercase;
  box-shadow:var(--lift-1);
  animation:kantelwenk 2.6s var(--e) infinite
}
.kantelknop::before{
  content:"";width:.9rem;height:.9rem;border-radius:3px;
  border:2px solid currentColor;
  animation:kanteldraai 2.6s var(--e) infinite
}
.kantelknop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@keyframes kantelwenk{0%,70%,100%{opacity:1}85%{opacity:.75}}
@keyframes kanteldraai{0%,60%,100%{transform:rotate(0)}75%{transform:rotate(-14deg)}90%{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){
  .kantelknop,.kantelknop::before{animation:none}
}

/* het eerste vrije moment boven de planner, voor wie geen balk onderin heeft */
.plan__eerste{
  margin:.55rem 0 0;display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .8rem .26rem;border-radius:999px;
  background:var(--wit);color:var(--inkt);box-shadow:var(--lift-1);
  font-family:var(--display);font-weight:600;font-size:var(--t-label);
  letter-spacing:.01em
}
.plan__eerste b{font-weight:800}

/* Op een donkere sectie mag het accent het volle merkoranje zijn: daar haalt
   het 6,4:1 en is de gedempte variant juist te dof. data-bar="light" staat al
   op elke sectie die donker is — die vlag bestond al voor de header. */
[data-bar="light"],
.jur__vraag,
.foot{--accent:var(--oranje)}
.overlay{--accent:var(--oranje-tekst)}

/* En andersom: op een licht merkvlak haalt oranje tekst het niet (3,1:1 op
   lila). Daar is het accent gewoon de inkt. */
.panel--sage,.panel--peach,.panel--lav,
.chip--sage,.chip--peach,.chip--lav,
.stap--sage,.stap--peach,.stap--lav,
.dk--sage,.dk--peach,.dk--lav,
.rev--sage,.rev--peach,.rev--lav,
.cit--sage,.cit--peach,.cit--lav,
.kort__in,.form__msg,
.minds,.stats,.proof,.plan__eerste,.plan__l span,.uit,.reads__lijst .read,
.hero{--accent:var(--inkt)}
/* De hero staat op wit en pakt het merkoranje (2,83:1 op 89px).
   De afsluitband staat op perzik: daar zakt het merkoranje naar 2,16:1 en
   dat is ook voor een kop te weinig, dus die houdt de leesbare variant. */
.hero__h{--accent:var(--oranje)}
.contact__h{--accent:var(--oranje-tekst)}   /* 3,5:1 op perzik */

/* Nagemeten na het omzetten van --accent: het merkoranje zakt op de lichte
   merkvlakken te ver weg. Op lila 1,94:1 en op perzik 2,16:1, waar de
   gedempte variant daar nog 3,14 en 3,49 haalt. Deze secties houden dus de
   leesbare variant — het merkoranje is voor koppen op wít. */
.dhero,.ohero,.chero,.mhero,
.team,.plan,.julie{--accent:var(--oranje-tekst)}

/* En kleine tekst haalt met het merkoranje nooit de 4,5:1 die daarvoor geldt:
   het blijft op 2,83:1 steken, ook op wit. Stapnummers, rijnummers en links
   in een lopende tekst pakken daarom hard de gedempte variant, net zoals
   .work__i dat al deed. */
.stp__n,
.rij--kaal .rij__n,
.stuk__in a:not(.btn){color:var(--oranje-tekst)}

/* ==========================================================================
   BALK ONDERIN OP DE TELEFOON
   Acht schermen lang had een bezoeker geen enkele manier om contact te leggen
   zonder terug te scrollen. Deze pil komt op zodra de hero voorbij is en gaat
   weer weg bij het formulier, de planner en de footer — daar staat het echte
   aanbod al, en twee knoppen naast elkaar die hetzelfde vragen is er een te
   veel.
   ========================================================================== */
.balk{
  position:fixed;z-index:60;left:0;right:0;
  bottom:calc(env(safe-area-inset-bottom,0px) + .7rem);
  padding-inline:var(--pad);
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  opacity:0;transform:translateY(130%);
  transition:opacity .3s var(--e),transform .42s var(--e);
  pointer-events:none
}
.balk[hidden]{display:none}
.balk.is-op{opacity:1;transform:none;pointer-events:auto}
.balk__rij{display:flex;gap:.5rem;align-items:stretch;width:100%}

/* Het eerste vrije moment staat bóven de knop, niet erin: naast de belknop
   is het 31 tekens in een display-font en dat past op 320px niet. Boven de
   knop heeft het de hele breedte, en het leest er beter — de tijd is nieuws,
   geen bijschrift bij een knop. */
.balk__nu{
  margin:0;max-width:100%;
  padding:.28rem .72rem .24rem;border-radius:999px;
  background:var(--paper);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:var(--t-micro);
  letter-spacing:.02em;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:var(--lift-1)}
.balk__nu b{font-weight:800;color:var(--accent)}

.balk__knop{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.1rem;border-radius:999px;text-decoration:none;
  background:var(--ink);color:var(--paper);
  font-family:var(--display);font-weight:800;font-size:var(--t-klein);
  letter-spacing:-.01em;line-height:1.15;
  box-shadow:var(--lift-1)}
.balk__knop svg{width:.95rem;height:.95rem;flex:none;fill:currentColor}

.balk__bel{
  flex:none;width:3.05rem;display:grid;place-items:center;
  border-radius:999px;background:var(--paper);color:var(--ink);
  box-shadow:var(--lift-1)}
.balk__bel svg{width:1.15rem;height:1.15rem;fill:currentColor}
.balk__knop:focus-visible,.balk__bel:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.balk__knop:active{transform:scale(.985)}

/* boven 1100px is er altijd een contactknop in beeld; daar is de balk ruis */
@media (min-width:1101px){.balk{display:none}}
@media (prefers-reduced-motion:reduce){
  .balk{transition:opacity .2s linear;transform:none}
}

/* ==========================================================================
   JURIDISCHE PAGINA'S
   Een privacyverklaring wordt niet gelezen maar doorzocht. Vandaar: een
   samenvatting in gewone taal bovenaan, genummerde hoofdstukken en dezelfde
   meelopende rail als bij een artikel. De nummering is geen versiering — de
   artikelen zijn een genummerde reeks en daar verwijs je naar.
   ========================================================================== */
.jur{padding-top:var(--v-7)}

.jur__kop{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad)}
/* eigen ondergrens in de clamp: "Privacyverklaring" is zeventien tekens in één
   woord en past op 390px niet in --k-xl-lang. Het zachte afbreekstreepje in de
   titel geeft de browser een plek om te breken, hyphens is het vangnet. */
.jur__h{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.05rem,4.9vw,5.3rem);
  letter-spacing:-.03em;line-height:.94;margin:0;max-width:16ch;
  text-wrap:balance;hyphens:auto;overflow-wrap:break-word
}
.jur__lead{
  margin:1.4rem 0 0;max-width:34rem;font-size:var(--t-lead);line-height:1.6;color:var(--ink-60)
}
.jur__meta{
  margin:1.9rem 0 0;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)
}
.jur__meta b{font-weight:800;color:var(--ink)}
.jur__punt{width:4px;height:4px;border-radius:50%;background:var(--ink-12);flex:none}

/* ---- in het kort --------------------------------------------------------- */
.kort{max-width:var(--maxw);margin:var(--v-2) auto 0;padding:0 var(--pad)}
.kort__in{
  background:var(--forest);color:var(--paper);border-radius:var(--r-lg);
  padding:clamp(1.8rem,4vw,3.1rem) clamp(1.5rem,4vw,3.4rem) clamp(1.6rem,3.5vw,2.6rem)
}
.kort__l{
  font-family:var(--display);font-weight:700;font-size:var(--t-label);
  letter-spacing:.22em;text-transform:uppercase;color:var(--sage);margin:0 0 1.3rem
}
/* Vaste kolomaantallen in plaats van auto-fit: alleen zo weet de CSS welke
   items op de eerste rij staan, en alleen die mogen geen scheidingslijn
   erboven hebben. Met auto-fit stond er wél een lijn boven de tweede en derde
   kolom en niet boven de eerste. */
.kort__lijst{
  counter-reset:k;list-style:none;margin:0;padding:0;
  display:grid;gap:0;grid-template-columns:1fr;
  column-gap:clamp(1.6rem,4vw,3.4rem)
}
.kort__lijst li{
  counter-increment:k;position:relative;
  padding:.95rem 0 .95rem 2.3rem;border-top:1px solid rgba(255,255,255,.16);
  font-size:var(--t-lees);line-height:1.5
}
.kort__lijst li:nth-child(-n+1){border-top:0}
@media (min-width:760px){
  .kort__lijst{grid-template-columns:1fr 1fr}
  .kort__lijst li:nth-child(-n+2){border-top:0}
}
@media (min-width:1200px){
  .kort__lijst{grid-template-columns:1fr 1fr 1fr}
  .kort__lijst li:nth-child(-n+3){border-top:0}
}
.kort__lijst li::before{
  content:counter(k,decimal-leading-zero);position:absolute;left:0;top:1.28rem;
  font-family:var(--display);font-weight:800;font-size:var(--t-micro);
  letter-spacing:.08em;color:var(--sage)
}
.kort__na{
  margin:1.4rem 0 0;font-size:var(--t-klein);line-height:1.55;color:var(--paper-60)
}

/* ---- de tekst ------------------------------------------------------------ */
.jur__body{
  max-width:var(--maxw);margin-inline:auto;
  padding:var(--v-3) var(--pad) var(--v-3);
  display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start
}
.jur__tekst{counter-reset:art}
.jur__tekst h2{
  counter-increment:art;position:relative;padding-top:1.6rem;margin-top:3.2rem;
  border-top:1px solid var(--ink-12)
}
.jur__tekst h2:first-child{margin-top:0}
.jur__tekst h2::before{
  content:counter(art,decimal-leading-zero);display:block;margin-bottom:.5rem;
  font-family:var(--display);font-weight:800;font-size:var(--t-micro);
  letter-spacing:.14em;color:var(--accent)
}
/* een aangesprongen kop mag niet onder de balk verdwijnen */
.jur__tekst h2{scroll-margin-top:var(--v-5)}
.jur__tekst table{
  width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:var(--t-klein)
}
.jur__tekst th,.jur__tekst td{
  text-align:left;vertical-align:top;padding:.7rem .9rem .7rem 0;
  border-bottom:1px solid var(--ink-12);color:var(--ink-60);line-height:1.5
}
.jur__tekst th{
  font-family:var(--display);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);width:34%
}

/* ---- de vraag onderaan --------------------------------------------------- */
.jur__vraag{background:var(--ink);color:var(--paper)}
.jur__vraag-in{
  max-width:var(--maxw);margin-inline:auto;
  padding:var(--v-2) var(--pad)
}
.jur__vraag-k{
  margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:var(--k-3xs);line-height:1.12;max-width:20ch
}
.jur__vraag-r{margin:1.5rem 0 0;display:flex;gap:.55rem;flex-wrap:wrap}
.jur__vraag-r a{
  display:inline-block;padding:.62rem 1.15rem;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.28);color:var(--paper);text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:var(--t-klein);letter-spacing:-.01em;
  transition:background .3s var(--e),border-color .3s var(--e),color .3s var(--e)
}
.jur__vraag-r a:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

@media (max-width:1100px){
  .jur__body{grid-template-columns:1fr}
  .jur__tekst{max-width:none}
}
/* op een telefoon breekt "laatst gewijzigd op 19 september 2026" over twee
   regels en blijft het scheidingsstipje alleen achter; dan liever onder elkaar */
@media (max-width:620px){
  .jur__meta{display:grid;gap:.35rem;justify-items:start}
  .jur__punt{display:none}
}
@media print{
  .bar,.balk,.rail,.jur__vraag,.foot,.overlay{display:none !important}
  .jur{padding-top:0}
  .kort__in{background:none;color:var(--ink);border:1px solid #999;border-radius:0}
  .kort__l,.kort__lijst li::before{color:var(--ink)}
  .kort__lijst li{border-color:#ccc}
  .jur__body{display:block;padding-top:1rem}
}

/* ==========================================================================
   PAGINAWISSELS
   De browser maakt zelf een overgang tussen twee pagina's: hij fotografeert
   de oude, laadt de nieuwe, en animeert daartussen. Geen framework, geen
   losse laadlaag — en omdat de volgende pagina al vooruit is geladen (zie de
   speculation rules in header.php) is er niets om op te wachten.

   Eén element reist mee: het beeld waar je op tikt groeit door naar de foto
   bovenaan de volgende pagina. Dat is wat het duur maakt; de rest is een
   overvloeiing van een vijfde seconde.
   ========================================================================== */
@view-transition { navigation: auto; }

/* Dit was een overvloeiing van 0,22s met een verschuiving van acht pixels —
   technisch een overgang, maar op een snelle verbinding zie je hem niet. Het
   merk heeft een eigen beweging: een oranje vlak dat over het scherm schuift,
   precies wat de secties bij het binnenkomen ook doen. Die zit nu in de
   paginawissel zelf.

   Hoe: de oude pagina schuift naar links weg, de nieuwe komt er van rechts
   overheen. Daartussen zit even niets — en dat gat krijgt de kleur van het
   merk mee via de achtergrond van de groep. Zo veeg je met oranje van de ene
   pagina naar de andere zonder er een element voor nodig te hebben, wat bij
   een wissel tussen twee documenten ook niet kan. */
::view-transition-group(root){background:var(--oranje)}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.52s;
  animation-timing-function:var(--e);
  mix-blend-mode:normal            /* anders vloeien ze door elkaar heen */
}
::view-transition-old(root){animation-name:paginaUit}
::view-transition-new(root){animation-name:paginaIn}
/* De oude pagina vertrekt naar links en de nieuwe komt van rechts, maar niet
   tegelijk: de een is al voor driekwart weg voordat de ander binnenkomt. In dat
   gat kijk je door beide snapshots heen naar de achtergrond van de groep — en
   die is oranje. Zo veegt er een oranje baan over het scherm, precies de
   beweging die de secties bij het binnenkomen ook maken. */
@keyframes paginaUit{
  0%   {transform:translateX(0)}
  72%  {transform:translateX(-100%)}
  100% {transform:translateX(-100%)}
}
@keyframes paginaIn{
  0%   {transform:translateX(100%)}
  28%  {transform:translateX(100%)}
  100% {transform:translateX(0)}
}

/* het meereizende beeld: iets langer, want dit is het onderdeel dat je ziet */
::view-transition-group(blync-beeld){animation-duration:.46s}
::view-transition-old(blync-beeld),
::view-transition-new(blync-beeld){
  animation-duration:.46s;animation-timing-function:var(--e);
  /* geen overvloeiing tussen twee uitsnedes van dezelfde foto: dat flikkert */
  mix-blend-mode:normal;height:100%;overflow:clip
}
/* de foto bovenaan een case, dienst of artikel is het doel van die reis */
.lees__fig{view-transition-name:blync-beeld}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
  .lees__fig{view-transition-name:none}
}