/* ══════════════════════════════════════════════════════════════
   Jeroen van Kesteren — hoofdstylesheet
   Gedeeld door alle pagina's. Merktokens staan in :root; pas hier
   aan, niet per pagina.

   LETTERS — zelf hosten (niet via Google CDN) i.v.m. AVG. Zet de
   woff2's in /assets/fonts/ en haal onderstaand blok uit commentaar;
   de rest van de CSS verandert niet mee, want alles loopt via --f.

   @font-face{
     font-family:'Stack Sans Headline';
     src:url('../fonts/stacksans-regular.woff2') format('woff2');
     font-weight:400; font-display:swap;
   }
   @font-face{
     font-family:'Stack Sans Headline';
     src:url('../fonts/stacksans-bold.woff2') format('woff2');
     font-weight:700; font-display:swap;
   }
   @font-face{
     font-family:'VT323';
     src:url('../fonts/vt323-regular.woff2') format('woff2');
     font-weight:400; font-display:swap;
   }

   LET OP: de tracking op .hero h1 (-.055em) en .cs__who (-.045em) is
   afgestemd op Figtree. Met de echte letter opnieuw nalopen.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Stack Sans Headline';src:url('../fonts/stacksans-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Stack Sans Headline';src:url('../fonts/stacksans-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'VT323';src:url('../fonts/vt323-regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{
  --blauw:#2A36D1;--lila:#E3DEFF;--wit:#FFF;--grijs:#E8E8E2;--lime:#E9FFB8;--zwart:#000;
  --hair:rgba(227,222,255,.22);
  --hair-b:rgba(42,54,209,.26);

  --f:'Stack Sans Headline',system-ui,-apple-system,sans-serif;
  --px:'VT323',ui-monospace,monospace;

  --xs:clamp(.86rem,.83rem + .14vw,.95rem);
  --sm:clamp(.95rem,.9rem + .22vw,1.08rem);
  --md:clamp(1.05rem,.98rem + .34vw,1.24rem);
  --lg:clamp(1.15rem,1rem + .8vw,1.7rem);

  --t-mega:clamp(2.5rem,.4rem + 9.2vw,9.5rem);
  --t-groot:clamp(1.9rem,.9rem + 4.4vw,5.2rem);
  --t-mid:clamp(1.55rem,1rem + 2.3vw,2.9rem);
  --t-cijfer:clamp(5rem,3rem + 15vw,20rem);

  --gut:clamp(1.1rem,3.4vw,4rem);
  --rail:clamp(0px,3.4vw,3.6rem);
  --maxw:1560px;
}
*,*::before,*::after{box-sizing:border-box}
/* overflow-x hoort op html en NERGENS anders.
   Stond het alleen op body, dan klipt een desktopbrowser het netjes maar laat
   iOS Safari je alsnog zijwaarts pannen: daar is html de echte scroller. Hier
   bewust 'clip' en niet 'hidden': clip maakt geen scrollcontainer, dus valt er
   niets te pannen.

   LET OP: zet hier nooit ook overflow-x op de body bij. Een browser geeft de
   overflow van de body alleen aan de viewport door zolang html zelf 'visible'
   is. Staat html op clip, dan houdt de body zijn eigen waarde en wordt hij een
   eigen scrollcontainer. De sticky header plakt dan aan die body, die nooit
   scrolt, en scrolt dus gewoon mee weg. Dat kostte de sticky header op mobiel
   (2026-08-28). */
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--blauw);color:var(--lila);font-family:var(--f);
  font-size:var(--md);line-height:1.55;-webkit-font-smoothing:antialiased}
svg,img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,dl,dt,dd,blockquote,figure{margin:0}
ul{list-style:none;padding:0}
button,input{font:inherit}
::selection{background:var(--lime);color:var(--blauw)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.px{font-family:var(--px);text-transform:uppercase;letter-spacing:.08em;line-height:1}

/* decoratief lime accentstrookje linksboven — bewust zonder functie.
   Was de skip-link; die is er op verzoek van de klant uit gehaald.
   Vaste maten (was 186x53px) zodat er onderaan ~5px lime in beeld piept. */
.accent{position:absolute;left:.5rem;top:-3rem;z-index:99;background:var(--lime);
  width:11.6rem;height:3.3rem;pointer-events:none}

/* ═══ PRELOADER — zwart splash met beeldmerk, zoals de intro-animatie ═══ */
#preloader{position:fixed;inset:0;z-index:9999;background:var(--zwart);display:grid;place-items:center;
  transition:opacity .55s ease,visibility .55s}
.pl__mark{width:clamp(84px,12vw,140px);height:auto;aspect-ratio:1/1;fill:var(--wit);
  opacity:0;transform:rotate(-360deg) scale(.5);
  animation:pl-in .9s cubic-bezier(.16,.84,.3,1) .05s forwards}
@keyframes pl-in{
  0%{opacity:0;transform:rotate(-360deg) scale(.5)}
  55%{opacity:1}
  100%{opacity:1;transform:rotate(0deg) scale(1)}
}
.pl-done #preloader{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  #preloader{transition:none}
  .pl__mark{animation:none;opacity:1;transform:none}
}

/* zones */
.zone{position:relative;padding-inline:var(--gut);isolation:isolate}
.zone__in{max-width:var(--maxw);margin-inline:auto;padding-left:var(--rail);position:relative}
.rail{position:absolute;left:0;top:clamp(2rem,4vw,3.5rem);
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--px);text-transform:uppercase;letter-spacing:.22em;
  font-size:1.02rem;line-height:1;color:var(--lime);white-space:nowrap;z-index:3}
.z-lila .rail{color:var(--blauw);opacity:.6}
@media(max-width:900px){
  .zone__in{padding-left:0}
  /* white-space:nowrap komt uit de basisregel en is daar nodig voor de
     verticale stand. Horizontaal loopt een lange rail daardoor het scherm uit
     en wordt hij midden in een woord afgekapt, dus hier weer laten afbreken. */
  .rail{position:static;writing-mode:horizontal-tb;transform:none;display:block;
    margin-bottom:1rem;letter-spacing:.12em;white-space:normal}
}
.z-blauw{background:var(--blauw);color:var(--lila)}
.z-zwart{background:var(--zwart);color:var(--lila)}
.z-lila{background:var(--lila);color:var(--blauw)}

.steps{display:block;width:100%;height:clamp(24px,3vw,48px);position:relative;z-index:1}
.steps svg{width:100%;height:100%;display:block}
.mega{position:absolute;pointer-events:none;z-index:0}
.mega svg{width:100%;height:auto;fill:currentColor}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--px);
  text-transform:uppercase;letter-spacing:.09em;font-size:1.2rem;line-height:1;
  padding:.74em 1.2em;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s}
.btn--lime{background:var(--lime);border-color:var(--lime);color:var(--blauw)}
.btn--lime:hover{background:var(--wit);border-color:var(--wit)}
.btn--wit{color:var(--wit)}.btn--wit:hover{background:var(--wit);color:var(--blauw)}
.btn--blauw{color:var(--blauw)}.btn--blauw:hover{background:var(--blauw);color:var(--wit)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.z-lila a:focus-visible,.z-lila button:focus-visible{outline-color:var(--blauw)}

/* topbar — sticky, met logo-swap naar het beeldmerk bij scrollen */
.top{position:sticky;top:0;z-index:50;background:var(--blauw);border-bottom:1px solid var(--hair);
  transition:box-shadow .35s ease,background .5s cubic-bezier(.4,0,.2,1),border-color .5s cubic-bezier(.4,0,.2,1)}
.top__in{display:flex;align-items:center;gap:1.5rem;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(1rem,1.9vw,1.5rem) var(--gut);transition:padding .35s ease}
.top__logo{flex:none;color:var(--wit);line-height:0;display:block;transition:color .5s cubic-bezier(.4,0,.2,1)}
.top__logo svg{height:auto;fill:currentColor}
.top__wordmark{width:clamp(122px,12vw,188px);display:block}
.top__mark{width:46px;display:none}
.top__reviews{display:inline-flex;align-items:baseline;gap:.5rem;margin-left:clamp(1rem,2.6vw,2.4rem);
  font-family:var(--px);text-transform:uppercase;letter-spacing:.05em;font-size:1rem;color:var(--lila);
  white-space:nowrap;transition:color .45s cubic-bezier(.4,0,.2,1)}
.top__reviews .stars{color:var(--lime);letter-spacing:.06em}
.top__reviews b{color:var(--wit);font-weight:400}
.top__reviews:hover b,.top__reviews:hover{color:var(--wit)}
@media(max-width:1040px){.top__reviews{display:none}}
.top nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.85rem,2vw,2rem)}
.top nav a.px{font-size:1.04rem;transition:color .45s cubic-bezier(.4,0,.2,1)}
.top nav a.px::before{content:"/ ";color:var(--lime);transition:color .45s cubic-bezier(.4,0,.2,1)}
.top nav a.px:hover{color:var(--lime)}
.icos{display:flex;gap:.75rem;margin-left:.2rem}
.ico{width:20px;transition:color .45s cubic-bezier(.4,0,.2,1)}.ico:hover{color:var(--lime)}.ico svg{width:100%;height:auto}
.top__burger{display:none;margin-left:auto;font-family:var(--px);text-transform:uppercase;
  letter-spacing:.08em;font-size:1.1rem;line-height:1;color:inherit;background:none;
  border:1px solid currentColor;padding:.5em .8em;cursor:pointer;transition:color .45s cubic-bezier(.4,0,.2,1),border-color .45s}
/* gecondenseerde staat zodra er gescrold is — lime balk, zwart beeldmerk + nav */
.is-stuck .top{background:var(--lime);border-bottom-color:rgba(0,0,0,.18);
  box-shadow:0 8px 30px rgba(0,0,0,.22)}
.is-stuck .top__in{padding-block:clamp(.5rem,.9vw,.75rem)}
.is-stuck .top__wordmark{display:none}
.is-stuck .top__mark{display:block}
.is-stuck .top__logo{color:var(--zwart)}
.is-stuck .top__burger{color:var(--zwart)}
.is-stuck .top__reviews{color:var(--zwart)}
.is-stuck .top__reviews .stars{color:var(--blauw)}
.is-stuck .top__reviews b{color:var(--zwart)}
.is-stuck .top nav a.px{color:var(--zwart)}
.is-stuck .top nav a.px::before{color:var(--blauw)}
.is-stuck .top nav a.px:hover{color:var(--blauw)}
.is-stuck .top .ico{color:var(--zwart)}
.is-stuck .top .ico:hover{color:var(--blauw)}
.is-stuck .top a:focus-visible{outline-color:var(--blauw)}
@media(max-width:840px){
  .top__burger{display:block}
  .top nav{position:absolute;left:0;right:0;top:100%;z-index:49;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--blauw);border-bottom:1px solid var(--hair);
    padding:.4rem var(--gut) 1.2rem;max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .28s ease,visibility .28s}
  .top.is-open nav{max-height:82vh;visibility:visible}
  .is-stuck .top nav{background:var(--lime)}
  .top nav a.px{width:100%;padding-block:.7rem;font-size:1.25rem;border-top:1px solid var(--hair)}
  .top nav a.px:first-child{border-top:0}
  .top .icos{margin:.85rem 0 0}
}
/* anker-offset zodat de sticky bar de sectiekop niet afdekt */
[id]{scroll-margin-top:clamp(74px,11vw,104px)}
/* sentinel voor de sticky-detectie (IntersectionObserver) — geen layout-impact */
#top-sentinel{position:absolute;top:0;left:0;width:1px;height:70px;pointer-events:none}

/* ═══ HERO ═══ */
.hero{padding-block:clamp(2.5rem,6vw,6rem) 0;overflow:hidden}
.hero h1{font-size:var(--t-mega);line-height:.85;letter-spacing:-.055em;font-weight:500;
  color:var(--wit);max-width:16ch;position:relative;z-index:2}
.hero h1 em{font-style:normal;color:var(--lime)}
/* Eén woord in een kop accentueren met <em>. Werkt alleen op de donkere zones:
   lime op lila is licht-op-licht en dus onleesbaar, daar blijft het gewoon blauw
   staan. De ACF-velduitleg vermeldt die beperking ook. */
.z-blauw h1 em,.z-blauw h2 em,.z-zwart h1 em,.z-zwart h2 em{font-style:normal;color:var(--lime)}
.z-lila h1 em,.z-lila h2 em{font-style:normal}
.hero__sub{position:relative;z-index:2;margin-top:clamp(1.4rem,2.6vw,2.2rem);
  max-width:38ch;font-size:var(--lg);line-height:1.35}
.hero__tags{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.5rem 1.15rem;
  margin-top:clamp(1.1rem,2.2vw,1.7rem);font-family:var(--px);text-transform:uppercase;
  letter-spacing:.06em;font-size:1.04rem;color:var(--lila)}
.hero__tags li{display:flex;align-items:center;gap:.6rem}
.hero__tags li::before{content:"";width:8px;height:8px;background:var(--lime);flex:none}
.hero__cta{position:relative;z-index:2;display:flex;gap:.75rem;flex-wrap:wrap;
  margin-top:clamp(1.4rem,2.6vw,2rem)}
.hero .mega{right:-12%;top:2%;width:min(72%,1050px);color:var(--lila);opacity:.12}
.hero__foot{display:flex;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  margin-top:clamp(2.5rem,5vw,4.5rem);position:relative;z-index:2}

.con{width:min(100%,520px);background:var(--zwart);border:1px solid var(--hair);cursor:text;
  position:relative;overflow:hidden;margin-bottom:clamp(-44px,-3vw,-22px);z-index:4}
.con::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(227,222,255,.05) 0 1px,transparent 1px 3px)}
.con__bar{display:flex;align-items:center;gap:.8rem;padding:.5rem .85rem;border-bottom:1px solid var(--hair);
  font-family:var(--px);text-transform:uppercase;letter-spacing:.09em;font-size:1rem;
  color:var(--lila);position:relative;z-index:1}
.con__bar b{color:var(--lime);font-weight:400}
.con__yrs{margin-left:auto;opacity:.45}
.con__live{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--lime);
  vertical-align:-.02em;margin-right:.55em;flex:none;
  box-shadow:0 0 7px var(--lime),0 0 2px var(--lime);animation:live-pulse 2.4s ease-in-out infinite}
@keyframes live-pulse{
  0%,100%{opacity:1;box-shadow:0 0 8px var(--lime),0 0 2px var(--lime)}
  50%{opacity:.25;box-shadow:0 0 2px rgba(233,255,184,.35)}}
@media(prefers-reduced-motion:reduce){.con__live{animation:none}}
.con__body{padding:1.5rem 1.1rem 3.6rem;position:relative;z-index:1}
.prompt{font-family:var(--px);font-size:1.22rem;letter-spacing:.05em;color:var(--lime);line-height:1.2}
.prompt b{color:var(--wit);font-weight:400}
.cur{display:inline-block;width:.55em;height:1em;background:var(--lime);
  vertical-align:-.12em;animation:bl 1.05s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.answer{font-family:var(--px);font-size:1.16rem;letter-spacing:.03em;color:var(--lime);
  line-height:1.25;margin-top:1.2rem;min-height:1.25em}
/* interactief invulveld — verschijnt bij klik, demo blijft anders zoals-ie is */
.ask{display:none;font-family:var(--px);font-size:1.22rem;letter-spacing:.05em;color:var(--wit);
  background:none;border:0;outline:none;appearance:none;-webkit-appearance:none;box-shadow:none;
  caret-color:var(--lime);flex:1 1 auto;min-width:0;width:auto;padding:0;border-radius:0}
.ask::placeholder{color:var(--lime);opacity:.6}
.ask:focus,.ask:focus-visible{outline:none}
.con__send{display:none;flex:none;font-family:var(--px);font-size:1.25rem;line-height:1;
  color:var(--zwart);background:var(--lime);border:0;cursor:pointer;padding:.05em .55em;margin-left:.6rem;
  transition:background .18s}
.con__send:hover{background:var(--wit)}
.con--typing .prompt{display:flex;align-items:center}
.con--typing .ask,.con--typing .con__send{display:inline-block}
.con--typing #typed,.con--typing .cur{display:none}
.con--sent .ask,.con--sent .con__send,.con--sent .cur{display:none}
.con{transition:border-color .25s}
.con:hover{border-color:rgba(233,255,184,.5)}
/* hint */
.con__hint{font-family:var(--px);font-size:1rem;letter-spacing:.04em;color:var(--lila);
  opacity:.58;margin-top:1.15rem;line-height:1}
.con__hint .hint-live,.con__hint .hint-sent{display:none}
.hint-cur{display:inline-block;width:.5em;height:1em;background:var(--lime);vertical-align:-.12em;
  margin-left:.45em;animation:bl 1.05s steps(1) infinite}
.con--typing .con__hint{color:var(--lime);opacity:.85}
.con--typing .con__hint .hint-idle{display:none}
.con--typing .con__hint .hint-live{display:inline}
.con--sent .con__hint{color:var(--lime);opacity:.9}
.con--sent .con__hint .hint-idle,.con--sent .con__hint .hint-live{display:none}
.con--sent .con__hint .hint-sent{display:inline}
@media (prefers-reduced-motion:reduce){.hint-cur{animation:none}}
.out{margin-top:.9rem;display:grid;gap:.1rem}
.out li{display:flex;align-items:center;gap:.6rem;padding-block:.4rem;
  border-top:1px solid var(--hair);font-family:var(--px);text-transform:uppercase;
  letter-spacing:.04em;font-size:1.06rem;
  opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.out li.on{opacity:1;transform:none}
.out .blk{width:9px;height:9px;background:var(--lime);flex:none}
@media(max-width:900px){.con{margin-bottom:-22px}}

/* ═══ ROUTES: twee doelgroepen ═══ */
.rt{padding-block:clamp(3rem,6vw,5.5rem) clamp(2.5rem,5vw,4rem)}
.rt__h{font-size:var(--t-mid);line-height:.96;letter-spacing:-.038em;font-weight:500;
  color:var(--blauw);max-width:24ch;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.rt__h-soft{color:var(--blauw);opacity:.4}
.rt__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair-b)}
.rt__card{background:var(--zwart);color:var(--lila);padding:clamp(1.4rem,2.8vw,2.4rem);display:flex;
  flex-direction:column;gap:1rem;transition:background .2s;position:relative;overflow:hidden}
.rt__card:hover{background:var(--blauw)}
.rt__card .g{position:absolute;right:-8%;bottom:-18%;width:42%;color:var(--lila);opacity:.1}
.rt__card .g svg{width:100%;height:auto;fill:currentColor}
.rt__card h3{font-size:clamp(1.35rem,2.4vw,2.1rem);line-height:.98;letter-spacing:-.035em;
  font-weight:500;color:var(--wit);position:relative}
.rt__card p{font-size:var(--sm);line-height:1.55;max-width:34ch;position:relative}
.rt__card .px{font-size:1.06rem;color:var(--lime);position:relative}
.rt__card .go{margin-top:auto;font-family:var(--px);text-transform:uppercase;letter-spacing:.08em;
  font-size:1.12rem;color:var(--lime);position:relative}
@media(max-width:760px){.rt__grid{grid-template-columns:1fr}}

/* ═══ DIENSTEN ═══ */
.dn{padding-block:clamp(3rem,6vw,6rem);overflow:hidden}
.dn__cijfer{position:absolute;right:-.06em;top:clamp(-2rem,-3vw,-.5rem);
  font-family:var(--px);font-size:var(--t-cijfer);line-height:.7;color:var(--lime);
  opacity:.12;z-index:0;pointer-events:none;letter-spacing:-.02em}
.dn h2{font-size:var(--t-groot);line-height:.94;letter-spacing:-.04em;font-weight:500;
  color:var(--wit);max-width:18ch;position:relative;z-index:2}
.dn__lead{position:relative;z-index:2;max-width:44ch;margin-top:1.2rem;font-size:var(--lg);line-height:1.35}
.dn__list{position:relative;z-index:2;margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,5rem);
  border-top:1px solid var(--hair)}
.svc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:start;
  padding-block:clamp(1.1rem,2vw,1.6rem);border-bottom:1px solid var(--hair);
  transition:padding-left .2s,background .2s}
.svc:hover{padding-left:.7rem;background:rgba(227,222,255,.05)}
.svc__g{width:30px;color:var(--lime)}
.svc__g svg{width:100%;height:auto;fill:currentColor}
.svc h3{font-family:var(--px);text-transform:uppercase;letter-spacing:.05em;
  font-size:1.42rem;font-weight:400;color:var(--wit);line-height:1.05}
.svc p{font-size:var(--xs);line-height:1.6;margin-top:.5rem;max-width:38ch}
.svc__arw{font-family:var(--px);font-size:1.2rem;color:var(--lime);opacity:0;transition:opacity .2s}
.svc:hover .svc__arw,.svc:focus-within .svc__arw{opacity:1}
@media(max-width:820px){.dn__list{grid-template-columns:1fr}}

/* ═══ QUOTE ═══ */
.qt{padding-block:clamp(3.5rem,8vw,8rem);overflow:hidden}
.qt blockquote p:first-child{font-size:var(--t-groot);line-height:.92;letter-spacing:-.045em;
  font-weight:500;color:var(--wit);max-width:22ch;position:relative;z-index:2}
.qt em{font-style:normal;color:var(--lime)}
.qt .px{font-size:1.1rem;margin-top:clamp(1.2rem,2.2vw,1.9rem);opacity:.6;position:relative;z-index:2}
.qt .mega{left:-12%;bottom:-46%;width:min(52%,620px);color:var(--lila);opacity:.11}

/* ═══ OVER + portret ═══ */
.ov{padding-block:clamp(3.5rem,7vw,7rem);overflow:hidden}
.ov .mega{left:-22%;top:-16%;width:min(52%,640px);color:var(--blauw);opacity:.09}
.ov__in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.ov h2{font-size:var(--t-mid);line-height:.96;letter-spacing:-.038em;font-weight:500;
  color:var(--blauw);margin-bottom:1.2rem}
.ov p{max-width:44ch}
.ov__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.9rem}
.ov__col{display:grid;gap:clamp(1.5rem,3vw,2.2rem)}

/* fotoslot: ontworpen om leeg óók te kloppen */
.foto-wrap{position:relative;max-width:clamp(230px,30vw,340px);margin-inline-start:auto}
.foto-wrap__accent{position:absolute;inset:0;z-index:0;background:var(--grijs);
  transform:translate(clamp(10px,1.8vw,20px),clamp(10px,1.8vw,20px));
  border-right:4px solid var(--lime);border-bottom:4px solid var(--lime)}
.foto-wrap__glyph{position:absolute;z-index:2;top:clamp(-14px,-2vw,-8px);left:clamp(-14px,-2vw,-8px);
  width:clamp(42px,6.5vw,66px);color:var(--lime);pointer-events:none}
.foto-wrap__glyph svg{width:100%;height:auto;fill:currentColor}
.foto{position:relative;z-index:1;aspect-ratio:4/5;background:var(--blauw);overflow:hidden;
  display:grid;place-items:center}
.foto img{width:100%;height:100%;object-fit:cover}
.foto--duo img{filter:grayscale(1) contrast(1.06);mix-blend-mode:luminosity;transition:filter .35s ease}
.foto--duo:hover img{filter:none;mix-blend-mode:normal}
.foto__g{width:56%;color:var(--lila);opacity:.16}
.foto__g svg{width:100%;height:auto;fill:currentColor}
.foto__lb{position:absolute;left:1rem;bottom:1rem;font-family:var(--px);text-transform:uppercase;
  letter-spacing:.08em;font-size:1.12rem;color:var(--wit)}
.foto__note{position:absolute;right:1rem;top:1rem;font-family:var(--px);text-transform:uppercase;
  letter-spacing:.08em;font-size:.95rem;color:var(--lila);opacity:.5}

/* terug naar boven — lime vierkantje rechtsonder, verschijnt na ~1 scherm scrollen */
.totop{position:fixed;right:clamp(.9rem,2vw,1.8rem);bottom:clamp(.9rem,2vw,1.8rem);z-index:60;
  width:clamp(44px,3.4vw,54px);height:clamp(44px,3.4vw,54px);
  display:grid;place-items:center;font-family:var(--px);font-size:1.6rem;line-height:1;
  color:var(--zwart);background:var(--lime);border:0;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s,background .18s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--wit)}
@media(prefers-reduced-motion:reduce){.totop{transition:background .18s}}

.spec{border-top:1.5px solid var(--blauw)}
.spec div{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding-block:.72rem;
  border-bottom:1px solid var(--hair-b)}
.spec dt{font-family:var(--px);text-transform:uppercase;letter-spacing:.07em;
  font-size:1.1rem;line-height:1.35;opacity:.6}
.spec dd{font-size:var(--sm);font-weight:500}
@media(max-width:900px){.ov__in{grid-template-columns:1fr}.foto-wrap{margin-inline:auto}}

/* ═══ CASES met resultaatveld ═══ */
.cs{padding-block:clamp(3rem,6vw,6rem);overflow:hidden}
.cs .zone__in{z-index:2}
.cs__pixel{position:absolute;right:clamp(-90px,-4vw,-30px);top:clamp(-50px,-4vw,-10px);
  width:min(42%,460px);height:auto;opacity:.12;z-index:0;pointer-events:none}
@media(max-width:820px){.cs__pixel{opacity:.08;width:62%}}
.cs h2{font-size:var(--t-mid);line-height:.96;letter-spacing:-.038em;font-weight:500;
  color:var(--wit);margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.cs__list{border-top:1px solid var(--hair)}
/* De opmaak hangt aan .cs__row en niet aan het element, want een klantnaam
   zonder casepagina wordt een <div>. Hing dit aan 'a', dan viel de hele
   rasterindeling weg zodra de link eraf ging. Het hover-effect hangt wel
   bewust aan a.cs__row: iets dat oplicht en opschuift hoort ook echt
   ergens heen te gaan. */
.cs__list .cs__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(.9rem,2.6vw,2.2rem);align-items:center;
  padding-block:clamp(1.1rem,2.2vw,1.8rem);border-bottom:1px solid var(--hair);
  transition:padding-left .24s cubic-bezier(.2,.7,.2,1),background .24s}
.cs__list a.cs__row:hover{padding-left:clamp(.6rem,1.6vw,1.6rem);background:rgba(42,54,209,.3)}
.cs__n{font-family:var(--px);font-size:1.12rem;color:var(--lime);letter-spacing:.08em}
.cs__who{font-size:clamp(1.6rem,1rem + 3.2vw,4rem);line-height:.9;letter-spacing:-.045em;
  font-weight:500;color:var(--wit)}
.cs__list a.cs__row:hover .cs__who{color:var(--lime)}
.cs__res{font-family:var(--px);text-transform:uppercase;letter-spacing:.06em;font-size:1.18rem;
  color:var(--lime)}
.cs__res.leeg{color:var(--lila);opacity:.42}
.cs__what{font-family:var(--px);text-transform:uppercase;letter-spacing:.06em;
  font-size:1.02rem;opacity:.5;text-align:right}
@media(max-width:620px){.cs__what{display:none}.cs__list .cs__row{grid-template-columns:auto 1fr}}

/* reviews (echte klantcitaten) */
.cs__revhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.5rem;
  margin-top:clamp(2.4rem,4.5vw,3.4rem);margin-bottom:1.1rem}
.cs__revlabel{font-family:var(--px);text-transform:uppercase;letter-spacing:.07em;font-size:1.04rem;
  color:var(--lime);margin:0;opacity:.85}
.cs__revscore{font-family:var(--px);text-transform:uppercase;letter-spacing:.06em;font-size:1.04rem;
  color:var(--lila);opacity:.85}
.cs__revscore b{color:var(--wit);font-weight:400}
.cs__stars{color:var(--lime);letter-spacing:.12em}
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
.rev{background:var(--zwart);padding:clamp(1.3rem,2.4vw,2rem);display:flex;flex-direction:column;gap:1rem}
.rev p{font-size:var(--md);line-height:1.4;color:var(--wit)}
.rev .px{margin-top:auto;font-size:1.02rem;color:var(--lime);opacity:.85}
@media(max-width:820px){.revs{grid-template-columns:1fr}}

/* citaatslot (ongebruikt sinds reviews) */
.cit{margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--hair);
  padding:clamp(1.3rem,2.6vw,2.2rem);max-width:60ch}
.cit p:first-child{font-size:var(--lg);line-height:1.35;color:var(--wit)}
.cit .px{font-size:1.05rem;margin-top:1rem;color:var(--lime);opacity:.7}
.cit .leeg{opacity:.45}

/* ═══ KLANTEN — logo-wand, monochroom wit op blauw ═══ */
.kl{padding-block:clamp(3rem,6vw,6rem)}
.kl h2{font-size:var(--t-mid);line-height:.96;letter-spacing:-.038em;font-weight:500;color:var(--wit)}
.kl__sub{font-family:var(--px);text-transform:uppercase;letter-spacing:.07em;font-size:1.02rem;
  color:var(--lime);margin-top:.9rem;opacity:.8}
.kl__marquee{margin-top:clamp(2.2rem,4.5vw,3.5rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.kl__track{display:flex;width:max-content;animation:kl-scroll 130s linear infinite}
.kl__marquee:hover .kl__track{animation-play-state:paused}
.kl__logo{flex:0 0 auto;width:clamp(168px,20vw,230px);aspect-ratio:16/9;margin-right:2px;
  background:var(--lila);display:grid;place-items:center;padding:clamp(1.1rem,2vw,1.7rem)}
.kl__logo img{max-height:clamp(28px,3.6vw,46px);max-width:80%;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.82;transition:filter .2s,opacity .2s}
.kl__logo:hover img{filter:none;opacity:1}
@keyframes kl-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .kl__marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .kl__track{animation:none;flex-wrap:wrap;width:auto}
}

/* ═══ MOBIEL SCROLLEN ═══ */

/* Marquee niet animeren op een telefoon.
   Daar is de strook 28560px breed met 168 logo's. Zo'n laag is veel groter dan
   wat de GPU in een keer kan bewaren, waardoor de browser tijdens het scrollen
   blijft hertekenen en het schokt. De bestaande terugval hierboven gold alleen
   voor prefers-reduced-motion, dus op een gewoon toestel draaide de animatie.
   Hier dus een statisch raster. Vanaf de 25e tegel tonen we niets meer: dat
   haalt in een keer de duplicaten weg (die bestaan alleen voor de naadloze
   loop) en houdt het blok kort. Werkt ongeacht hoeveel logo's er staan. */
@media (max-width:700px){
  .kl__marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .kl__track{animation:none;flex-wrap:wrap;width:auto;gap:2px}
  .kl__logo{width:calc(33.333% - 2px);margin-right:0}
  .kl__logo:nth-child(n+25){display:none}
}

/* Geen hover-effecten die de layout verschuiven op een touchscreen.
   Daar blijft :hover hangen zodra je iets aanraakt om te scrollen. Bij deze
   twee verandert de padding, dus verschuift de tekst onder je vinger mee en
   voelt het scrollen als een hapering. */
@media (hover:none){
  .svc:hover{padding-left:0;background:none}
  .cs__list a.cs__row:hover{padding-left:0;background:none}
  .cs__list a.cs__row:hover .cs__who{color:var(--wit)}
}

/* Consolebalk viel op smalle schermen over drie regels uiteen: de twee helften
   samen zijn daar te breed. Nu netjes twee regels. */
@media (max-width:520px){
  .con__bar{flex-wrap:wrap;row-gap:.1rem}
  .con__yrs{margin-left:0;flex:1 0 100%;opacity:.4}
}

/* ═══ CONTACT ═══ */
.ct{padding-block:clamp(4rem,8vw,8rem);overflow:hidden}
.ct .zone__in{z-index:2}
/* gedempt: het portret is nu de blikvanger rechts, de pixelcascade is textuur */
.ct__pixel{position:absolute;top:50%;right:clamp(-70px,-3vw,-10px);transform:translateY(-50%);
  height:118%;width:auto;max-width:none;opacity:.18;z-index:0;pointer-events:none}
@media(max-width:900px){
  .ct__pixel{height:auto;width:min(64%,320px);right:-10%;top:auto;bottom:-4%;transform:none;opacity:.26}
}
/* tekst links, portret rechts — zelfde fotoslot als bij "even voorstellen" */
.ct__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.ct__in{grid-template-columns:1fr}.ct__in .foto-wrap{margin-inline:auto}}
.ct h2{font-family:var(--px);text-transform:uppercase;
  font-size:clamp(1.9rem,.4rem + 6vw,6.4rem);line-height:1.06;letter-spacing:.09em;
  font-weight:400;color:var(--lila);max-width:19ch}
.ct__lead{position:relative;z-index:2;max-width:44ch;margin-top:clamp(1rem,2vw,1.6rem);
  font-size:var(--lg);line-height:1.35}
.ct__row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:clamp(1.6rem,3vw,2.4rem)}
.ct__meta{display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;
  margin-top:clamp(2rem,3.6vw,2.8rem);font-family:var(--px);text-transform:uppercase;
  letter-spacing:.07em;font-size:1.1rem;opacity:.6}

/* ═══ PAGINAKOP (subpagina's) ═══ */
.ph{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(2rem,4vw,3.5rem);overflow:hidden}
.ph__crumb{font-family:var(--px);text-transform:uppercase;letter-spacing:.08em;font-size:1.04rem;
  color:var(--lime);margin-bottom:clamp(1rem,2vw,1.6rem)}
.ph__crumb a{opacity:.6}.ph__crumb a:hover{opacity:1;color:var(--lime)}
.ph h1{font-size:var(--t-groot);line-height:.94;letter-spacing:-.045em;font-weight:500;
  color:var(--wit);max-width:18ch;position:relative;z-index:2}
.ph__sub{position:relative;z-index:2;margin-top:clamp(1.2rem,2.4vw,2rem);max-width:46ch;
  font-size:var(--lg);line-height:1.35}
.ph .mega{right:-14%;top:-26%;width:min(60%,820px);color:var(--lila);opacity:.12}
/* Paginakop in twee kolommen: kop links, introtekst rechts.
   Alles onder elkaar links liet op 1500px bijna 30% van de contentbreedte leeg
   en brak de kop in drie regels waar twee kon. De kop mag hier zijn kolom
   vullen, dus de max-width van 18ch gaat eraf.
   align-items:end lijnt de onderkanten uit; met een kop van 80px en een intro
   van 22px zou top-uitlijning de kleine tekst hoog laten zweven. */
.ph__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;position:relative;z-index:2}
.ph__grid h1{max-width:none}
.ph__grid .ph__sub{margin-top:0;max-width:38ch}
.ph__grid--solo{grid-template-columns:1fr}
.ph__grid--solo h1{max-width:24ch}
@media(max-width:820px){
  .ph__grid{grid-template-columns:1fr;gap:0}
  .ph__grid .ph__sub{margin-top:clamp(1.2rem,2.4vw,2rem)}
}

/* ═══ TEKSTBLOK, optioneel met portret ernaast ═══ */
.tk{padding-block:clamp(2.5rem,5vw,4.5rem)}
/* Met foto wordt het twee kolommen. Zonder foto houdt .prose zijn eigen
   leesbreedte van 62 tekens: bij lopende tekst is een smalle kolom functioneel,
   dus daar hoeft de volle breedte juist niet gevuld te worden. */
/* Geen column-gap, maar padding op de tekstkolom. Reden: met een gap van 72px
   valt die ruimte links van de fotokolom, en dan lijkt een in zijn kolom
   gecentreerde foto alsnog naar rechts geschoven. Zonder gap is de hele
   rechterhelft een blok en centreert de foto in de volledige witruimte.
   Het fotoslot staat van zichzelf rechts uitgelijnd (margin-inline-start:auto
   voor de over-sectie op de homepage); dat wordt hier ongedaan gemaakt. */
.tk__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.5fr);
  gap:0;align-items:start}
.tk__in .prose{padding-inline-end:clamp(1.5rem,4vw,3.5rem)}
.tk__in .foto-wrap{justify-self:center;margin-inline:0}
.tk--links .tk__in{grid-template-columns:minmax(260px,.5fr) minmax(0,1fr)}
.tk--links .tk__in .prose{padding-inline:clamp(1.5rem,4vw,3.5rem) 0}
.tk--links .tk__in .prose{order:2}
.tk--links .tk__in .foto-wrap{order:1}
@media(max-width:900px){
  .tk__in{grid-template-columns:1fr;gap:clamp(1.5rem,4vw,2.5rem)}
  .tk__in .prose{padding-inline:0}
  .tk--links .tk__in .prose{order:1}
  .tk--links .tk__in .foto-wrap{order:2}
}

/* ═══ PROSE (tekstblokken op subpagina's) ═══ */
.prose{max-width:62ch}
.prose h2{font-size:var(--t-mid);line-height:.98;letter-spacing:-.035em;font-weight:500;
  color:var(--wit);margin-top:clamp(2.4rem,4vw,3.2rem);margin-bottom:1rem}
.prose h3{font-family:var(--px);text-transform:uppercase;letter-spacing:.05em;font-size:1.4rem;
  font-weight:400;color:var(--wit);margin-top:2rem;margin-bottom:.7rem}
/* Tussenkop die van h3 naar h2 is gepromoveerd om een sprong in de
   koppenhierarchie te voorkomen. Moet er identiek uitzien. */
.prose h2.prose__sub{font-family:var(--px);text-transform:uppercase;letter-spacing:.05em;font-size:1.4rem;
  font-weight:400;color:var(--wit);margin-top:2rem;margin-bottom:.7rem}
.prose p{margin-bottom:1.1rem}
.prose p+p{margin-top:0}
.prose ul.bul{display:grid;gap:.7rem;margin-bottom:1.2rem}
.prose ul.bul li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:var(--sm)}
.prose ul.bul li::before{content:"";width:9px;height:9px;background:var(--lime);margin-top:.55em}
.z-lila .prose h2,.z-lila .prose h3{color:var(--blauw)}
.z-lila .prose ul.bul li::before{background:var(--blauw)}

/* ═══ WERKWIJZE — genummerde processtappen ═══ */
.proc{padding-block:clamp(3rem,6vw,6rem)}
.proc h2{font-size:var(--t-mid);line-height:.96;letter-spacing:-.038em;font-weight:500;
  color:var(--wit);max-width:20ch}
.proc__lead{max-width:44ch;margin-top:1.2rem;font-size:var(--lg);line-height:1.35}
.proc__grid{margin-top:clamp(2.5rem,5vw,4rem);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem)}
.proc__step{border-top:1.5px solid var(--hair);padding-top:1.1rem}
.proc .proc__n{font-family:var(--px);font-size:clamp(2.6rem,4vw,3.6rem);line-height:.9;
  color:var(--lime);letter-spacing:-.02em}
.proc__step h3{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.02;letter-spacing:-.03em;
  font-weight:500;color:var(--wit);margin-top:.7rem}
.proc__step p{font-size:var(--xs);line-height:1.6;margin-top:.6rem;color:var(--lila)}
@media(max-width:820px){.proc__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.proc__grid{grid-template-columns:1fr}}

/* ═══ FAQ — native details/summary, geen JS ═══ */
.faq{padding-block:clamp(3rem,6vw,6rem)}
.faq h2{font-size:var(--t-mid);line-height:.96;letter-spacing:-.038em;font-weight:500;
  color:var(--wit);max-width:20ch;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.faq__list{border-top:1px solid var(--hair);max-width:960px}
.faq__item{border-bottom:1px solid var(--hair)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;gap:1.2rem;align-items:center;
  padding-block:clamp(1rem,2vw,1.5rem);color:var(--wit);
  font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.15;letter-spacing:-.02em;font-weight:500;
  transition:color .18s}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover,.faq__item[open] summary{color:var(--lime)}
.faq__sign{margin-left:auto;flex:none;font-family:var(--px);font-size:1.6rem;color:var(--lime);line-height:1}
.faq__sign::after{content:"+"}
.faq__item[open] .faq__sign::after{content:"\2013"}
.faq__a{padding:0 0 clamp(1.1rem,2.2vw,1.7rem);max-width:68ch;color:var(--lila);
  font-size:var(--sm);line-height:1.6}

/* ═══ FOOTER ═══ */
.ft{background:var(--zwart);padding-block:clamp(3rem,6vw,4.5rem) clamp(1.6rem,3vw,2.2rem)}
.ft__wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:clamp(2rem,4vw,4rem);align-items:start}
.ft__badge{margin-top:clamp(1.4rem,2.4vw,2rem)}
.ft__badge img{display:block;width:clamp(150px,12vw,190px);height:auto}
.ft__logo{color:var(--wit)}
.ft__logo svg{width:min(100%,290px);height:auto;fill:currentColor}
.ft__name{font-size:clamp(1.8rem,1rem + 3vw,3.4rem);line-height:.9;letter-spacing:-.035em;
  font-weight:700;text-transform:uppercase;color:var(--wit);margin-top:1rem}
.ft h4,.ft h2.ft__kop{font-family:var(--px);text-transform:uppercase;letter-spacing:.08em;font-size:1.18rem;
  font-weight:400;color:var(--lime);margin-bottom:1.15rem}
.ft ul{display:grid;gap:.26rem;font-size:var(--sm)}
.ft ul a:hover{color:var(--lime)}
.ft__blk+.ft__blk{margin-top:1.15rem}
.ft__soc{display:grid;gap:.7rem;justify-items:start}
.ft__soc .ico{width:22px}
.ft__soc .ico svg{display:block}
.ft__bar{display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  margin-top:clamp(2.2rem,4.5vw,3.4rem);padding-top:1.25rem;border-top:1px solid var(--hair);
  font-size:var(--xs);opacity:.62}
.ft__bar ul{display:flex;gap:1.4rem}
@media(max-width:1000px){.ft__grid{grid-template-columns:1fr 1fr}.ft__soc{grid-auto-flow:column;justify-content:start}}
@media(max-width:600px){.ft__grid{grid-template-columns:1fr}}

.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.on{opacity:1;transform:none}

/* mobiel: reuzeglyphs en cijfers temmen */
@media(max-width:720px){
  .hero .mega{right:-30%;top:-8%;width:100%;opacity:.1}
  .ph .mega{right:-30%;top:-8%;width:100%;opacity:.1}
  .qt .mega{left:-30%;bottom:-30%;width:85%}
  .ov .mega{left:-38%;top:-6%;width:85%}
  .dn__cijfer{font-size:clamp(4rem,26vw,9rem);top:-.5rem;opacity:.1}
  .rt__card .g{width:55%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.001ms!important}
  .rv,.out li{opacity:1;transform:none}
}