*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Moet vóór de layoutregels staan: .cal-fallback krijgt display:flex, en dat
   zou anders het hidden-attribuut overrulen (kaart én agenda tegelijk zichtbaar). */
[hidden]{display:none!important}
:root{
  --bg:#0A0D15;
  --surface:#0E1320;
  --card:#121828;
  --line:rgba(233,236,244,.08);
  --line2:rgba(233,236,244,.16);
  --tx:#EDECE4;
  --tx2:#99A0B4;
  --blue:#5B8DEF;
  --blue-soft:#A9C3F5;
  --blue-deep:#2C5BC0;
  /* Actiekleuren: bijna zwart navy dat opgaat in de achtergrond (wens klant
     10 sept: "bijna zwart, blend met de achtergrond, maar nog zichtbaar"); de
     dunne rand van 9% wit op de knop maakt de vorm leesbaar. Bij hover een tint
     lichter. Contrast lichte tekst op dit navy ≈ 15:1. */
  --action:#111B36;
  --action-hover:#182A52;
  --action-tx:#F4F7FF;
  --r:6px;
  --r-btn:10px;
  --ease:cubic-bezier(.22,.61,.21,1);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:'Instrument Sans',sans-serif;font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
body::after{content:'';position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.outer{overflow-x:clip}
::selection{background:var(--blue-deep);color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* TYPOGRAPHY */
.display{font-family:'Fraunces',serif;font-weight:400;line-height:1.06;letter-spacing:-.015em}
.label{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tx2)}
.label--accent{color:var(--blue-soft)}
.label--line::before{content:'';display:inline-block;width:26px;height:1px;background:linear-gradient(90deg,var(--blue),rgba(91,141,239,0));margin-right:12px;vertical-align:4px}

/* LAYOUT */
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
section{position:relative}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:26px 0;transition:background .4s,padding .4s,border-color .4s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(10,13,21,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:14px 0;border-bottom-color:var(--line)}
.nav-i{display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:inline-flex;align-items:center;font-family:'Fraunces',serif;font-size:23px;font-weight:500;color:var(--tx);text-decoration:none;letter-spacing:.04em}
.nav-mark{height:26px;width:auto;display:block;margin-right:10px}
.nav-logo b{color:var(--blue);font-weight:500}
.nav-links{display:flex;align-items:center;gap:38px;list-style:none}
.nav-links a{color:var(--tx2);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--tx)}
/* Compacte nav-variant van de primaire knop: zelfde vlakke, gedempte vulling,
   zonder rand of gloed. Bewust 8px i.p.v. --r-btn vanwege de lagere knophoogte. */
.nav-cta{background:var(--action);color:var(--action-tx)!important;padding:9px 20px;border-radius:8px;border:1px solid rgba(233,236,244,.09)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:background .2s,border-color .2s,color .2s!important}
.nav-cta:hover{background:var(--action-hover);border-color:rgba(233,236,244,.14)!important;color:#fff!important}
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;width:44px;height:44px;padding:10px;margin-right:-10px;position:relative;z-index:1001}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--tx);transition:.3s}

/* HERO — rustig en typografisch, met een zachte kleurgloed en het netwerk
   als achtergrond. (Een filmvariant is op 30 aug getest; besluit klant:
   zonder video.) */
#hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:170px 0 110px}
#hero .wrap{width:100%}
.hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(720px 540px at 82% 18%,rgba(91,141,239,.13),transparent 68%),radial-gradient(640px 480px at 8% 88%,rgba(44,91,192,.1),transparent 70%)}
/* Twee kolommen (vanaf 1101px): tekst links, fotopaneel rechts. De tekstkolom
   is minimaal 616px zodat de drie USP-blokken op één regel blijven; de lopende
   tekst zelf is begrensd op 34rem. Het paneel is vierkant, 340–436px breed. */
.hero-g{display:grid;grid-template-columns:minmax(616px,1fr) minmax(340px,436px);gap:48px;align-items:center}
.hero-eyebrow,.hero-h,.hero-btns{max-width:34rem}

/* HERO-FOTO (8 sept 2026) — foto rechts van de tekst: het bureau met de vier
   monitoren, het oplichtende scherm op ooghoogte van de kop. Geen kader: de foto
   loopt aan alle vier de kanten via een mask uit in de paginakleur (links het
   breedst, daar staat de tekst; boven middellang; rechts en onder korter), zodat
   nergens te zien is waar het beeld begint of eindigt. Hij loopt rechts door tot
   voorbij de containerrand (--uitloop, tot de schermrand) en links zichtbaar
   door achter de tekstkolom (--links: de bronbreedte links van het bureau plus
   760px synthetische ruimte in het beeld zelf). De mask loopt van 0 aan de
   linkerrand naar 45% aan de rechterrand van de tekstkolom en pas daarna naar
   100%; de zwarten blijven diep, alleen de lichte delen (raam, lichtstrip)
   worden onder de tekst gedempt, zodat de tekst leesbaar blijft (AA gemeten). Verticaal van de onderkant van de
   nav (top: de 50svh-formule benadert de verticale centrering van de hero) tot
   de USP-blokken (bottom: de hoogte van die rij). Het beeld houdt de schaal van
   de oorspronkelijke uitsnede (breedte = kolombreedte × 2432/780) en hangt aan
   de onderrand; de extra hoogte is donkere ruimte boven en onder het bureau, in
   het beeld zelf (zie _dev/hero-foto.js). Eén overlay
   van 8% paginakleur, de zwarten blijven diep. Het netwerk-canvas ligt onder de
   foto (z-index 5 < 6) en wordt in dit gebied bovendien weggegumd
   (assets/script.js). Op desktop het LCP-element: preload in de <head>, geen
   lazy loading, geen fade-in. */
.hero-visual{position:relative;z-index:6;pointer-events:none;align-self:stretch;--uitloop:min(186px,max(40px,50vw - 550px));--links:calc(1.692 * min(436px,100vw - 744px))}
.hero-frame{position:absolute;left:calc(-1 * var(--links));top:min(-78px,calc(334px - 50svh));bottom:53px;width:calc(100% + var(--links) + var(--uitloop));overflow:hidden;
  --mask-x:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) calc(var(--links) - 48px),#000 calc(var(--links) + 180px),#000 calc(100% - min(140px,20%)),transparent 100%);
  --mask-y:linear-gradient(180deg,transparent 0,#000 min(200px,28%),#000 calc(100% - min(140px,20%)),transparent 100%);
  -webkit-mask-image:var(--mask-x),var(--mask-y);-webkit-mask-composite:source-in;
  mask-image:var(--mask-x),var(--mask-y);mask-composite:intersect}
.hero-frame picture{position:absolute;inset:0}
.hero-frame img{position:absolute;left:calc(var(--uitloop)/3);bottom:0;width:calc((100% - var(--links) - var(--uitloop))*3.118);height:auto;display:block}
.hero-frame::after{content:'';position:absolute;inset:0;pointer-events:none;background:rgba(10,13,21,.08)}
/* Tot 1100px (half scherm, tablet): hetzelfde beeld als brede strook onder de
   tekst (hooguit 300px hoog), zonder kader; de mask laat hem aan alle vier de
   kanten uitlopen in de paginakleur, zodat ook hier geen rechthoek te zien is.
   object-position houdt de band met de monitoren in het midden. */
@media(max-width:1100px){
  .hero-g{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero-frame{position:relative;left:auto;top:auto;bottom:auto;width:auto;height:min(300px,36vw);
    --mask-x:linear-gradient(90deg,transparent 0,#000 min(160px,16%),#000 calc(100% - min(160px,16%)),transparent 100%);
    --mask-y:linear-gradient(180deg,transparent 0,#000 30%,#000 74%,transparent 100%)}
  .hero-frame picture{position:static;display:block;width:100%;height:100%}
  .hero-frame img{position:static;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 47%}
}
/* Tot 640px: geen foto; de hero is weer tekst op de donkere achtergrond met
   het netwerk, zoals eerst. */
@media(max-width:640px){
  .hero-visual{display:none}
}
.hero-eyebrow{margin-bottom:26px;opacity:0;transform:translateY(16px);animation:fadeUp .8s ease forwards .2s}
.hero-h{font-size:clamp(46px,5.6vw,80px);margin-bottom:26px;opacity:0;transform:translateY(26px);animation:fadeUp .9s ease forwards .4s}
.hero-h em{font-style:italic;font-weight:300;color:var(--blue-soft)}
.hero-sub{max-width:500px;font-size:17.5px;color:var(--tx2);line-height:1.75;margin-bottom:40px;opacity:0;transform:translateY(18px);animation:fadeUp .8s ease forwards .65s}
.hero-sub strong{color:var(--tx);font-weight:600}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;opacity:0;transform:translateY(18px);animation:fadeUp .8s ease forwards .85s}
/* Primaire actie: gevuld met het gedempte actieblauw (--action), vlak, zonder
   rand en zonder gloed — donker genoeg om in de achtergrond te vallen, maar als
   vlak nog zichtbaar. Dit is de versie die op 9 sept 2026 live ging; een felle
   variant met verloop, een licht vlak en een glasversie zijn daarna afgekeurd.
   Bij hover een tint lichter (--action-hover). Tekstcontrast #F4F7FF op --action: 11:1. */
.btn-p{display:inline-block;background:var(--action);color:var(--action-tx);padding:14px 28px;font-size:15px;font-weight:600;font-family:inherit;text-decoration:none;border-radius:var(--r-btn);border:1px solid rgba(233,236,244,.09);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:background .25s var(--ease),border-color .25s var(--ease),transform .15s var(--ease)}
.btn-p:hover{background:var(--action-hover);border-color:rgba(233,236,244,.14)}
.btn-p:active{transform:translateY(1px)}
/* Secundaire actie: duidelijk ondergeschikt — rustige tekstlink met onderstreping. */
.btn-s{display:inline-flex;align-items:center;background:none;color:var(--tx);padding:14px 6px;min-height:44px;font-size:15px;font-weight:500;text-decoration:underline;text-decoration-color:var(--line2);text-decoration-thickness:1px;text-underline-offset:6px;border:none;transition:text-decoration-color .25s var(--ease),color .25s var(--ease)}
.btn-s:hover{text-decoration-color:var(--blue-soft);color:#fff}

/* HERO-PUNTEN — drie gelijke tekstblokken: titel in de bodykleur, ondertitel
   gedempt; geen vinkjes of accentlijn (9 sept 2026). */
.hero-points{display:flex;gap:40px;flex-wrap:wrap;margin-top:36px;opacity:0;transform:translateY(18px);animation:fadeUp .8s ease forwards 1.05s}
.hp{display:block}
.hp-t{font-size:13.5px;font-weight:600;color:var(--tx);line-height:1.35}
.hp-s{font-size:12.5px;color:var(--tx2)}

/* SECTIES ALGEMEEN */
.sec{padding:130px 0}
.sec-hd{margin-bottom:70px;max-width:640px}
.sec-title{font-size:clamp(34px,4.3vw,56px);margin-top:16px}
.sec-title em{font-style:italic;font-weight:300;color:var(--blue-soft)}
.sec-intro{font-size:17px;color:var(--tx2);line-height:1.8;margin-top:24px}
/* Herhaalde call-to-action onder een sectie — één vaste actie door de hele pagina. */
.sec-cta{margin-top:72px;text-align:center}
.sec-cta p{font-size:16px;color:var(--tx2);margin-bottom:22px}
.sec-cta p strong{color:var(--tx);font-weight:600}

/* AUTOMATISERING — kaarten */
#automatisering{border-top:1px solid var(--line)}
.d-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.d-card{background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 34%),var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:42px 40px;transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.d-card:hover{border-color:rgba(91,141,239,.4)}
/* Volgnummer in plaats van icoon (9 sept 2026): decoratief (aria-hidden), in de
   serif van de koppen, even groot als de kaarttitel, gedempt op 40% van de
   bodytekstkleur; geen vlak, geen rand, geen accentkleur. */
.d-num{display:block;font-family:'Fraunces',serif;font-size:26px;font-weight:400;line-height:1;letter-spacing:.02em;color:rgba(153,160,180,.4);margin-bottom:36px}
.d-title{font-family:'Fraunces',serif;font-size:26px;font-weight:400;margin-bottom:12px;line-height:1.2}
.d-body{font-size:15.5px;color:var(--tx2);line-height:1.75}

/* OVER ONS */
#over-ons{border-top:1px solid var(--line)}
.over-g{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start}
.over-t p{font-size:17px;color:var(--tx2);line-height:1.85;margin-bottom:20px}
.over-t p:last-child{margin-bottom:0}
.over-t strong{color:var(--tx);font-weight:600}
/* Zelfde accentlijn als .c-makers: één herkenbare makers-signatuur. */
.sig{margin-top:34px;border-left:2px solid var(--blue);padding-left:18px}
.sig-n{font-family:'Fraunces',serif;font-size:23px;color:var(--tx);line-height:1.2}
.sig-s{display:block;font-family:'Instrument Sans',sans-serif;font-size:12.5px;color:var(--tx2);letter-spacing:.04em;margin-top:5px}
.vals{display:flex;flex-direction:column;gap:30px;padding-top:14px}
.val{border-left:1px solid var(--blue);padding-left:24px}
.val-t{font-family:'Fraunces',serif;font-size:23px;font-weight:400;margin-bottom:6px}
.val-b{font-size:14.5px;color:var(--tx2);line-height:1.7}

/* FAQ */
.faq-list{max-width:840px}
.faq{border-top:1px solid var(--line)}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;font-size:17px;font-weight:600;color:var(--tx);list-style:none;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-soft)}
.faq-x{flex:none;position:relative;width:22px;height:22px;transition:transform .3s}
.faq-x::before,.faq-x::after{content:'';position:absolute;top:50%;left:50%;background:var(--blue-soft);transform:translate(-50%,-50%)}
.faq-x::before{width:13px;height:1.4px}
.faq-x::after{width:1.4px;height:13px}
.faq[open] .faq-x{transform:rotate(45deg)}
.faq-a{padding:2px 0 26px;max-width:720px;font-size:15.5px;color:var(--tx2);line-height:1.8}
/* De vraag is een echte h3 (koppenstructuur, AI-citatie) in de opmaak van de summary. */
.faq-q{font:inherit;margin:0;color:inherit}
/* Tijdelijke markering van nog in te vullen gegevens (zie _dev/faq.js); verdwijnt zodra ingevuld. */
.faq-a mark.invullen{background:rgba(243,210,122,.12);color:#F3D27A;padding:0 5px;border-radius:3px}
/* Zachte reveal bij openen — details klapt anders abrupt open. */
.faq[open] .faq-a{animation:faqIn .4s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* CONTACT / AGENDA */
#contact{border-top:1px solid var(--line)}
/* Kop en gegevens naast elkaar, de agenda daaronder over de volle breedte.
   In een smalle kolom stapelt de Cal.com-agenda namelijk verticaal (kalender
   én tijden onder elkaar) en wordt hij ruim 1500px hoog. */
.c-top{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:end;margin-bottom:52px}
.c-intro h2{font-size:clamp(30px,3.6vw,48px);margin-top:16px;margin-bottom:20px}
.c-intro>p{color:var(--tx2);font-size:16.5px;line-height:1.8;max-width:460px}
.c-makers{margin-bottom:24px;padding-left:18px;border-left:2px solid var(--blue);max-width:460px}
.c-makers p{font-size:14.5px;color:var(--tx2);line-height:1.6;margin:0}
.c-makers b{color:var(--tx);font-weight:600}
.c-detail{display:flex;flex-direction:column;gap:12px}
.c-detail a{color:var(--tx);text-decoration:none;font-size:16px;transition:color .2s}
.c-detail a:hover{color:var(--blue-soft)}
/* De boekingskalender (Cal.com) vervangt het oude contactformulier. De kaart
   zelf blijft rustig: alleen een rand; de agenda vult de ruimte. */
.cal-card{background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 38%),var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 34px 70px -48px rgba(0,0,0,.85)}
.cal-embed{min-height:620px;border-radius:8px;overflow:hidden}
.cal-embed iframe{border-radius:8px}
/* Zolang er nog geen Cal.com-link is ingesteld, toont de kaart een rustige
   terugvaloptie met dezelfde actie: een gesprek inplannen via mail of telefoon. */
.cal-fallback{min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 36px;gap:8px}
.cal-fallback h3{font-family:'Fraunces',serif;font-size:26px;font-weight:400;line-height:1.25;max-width:360px}
.cal-fallback p{font-size:15px;color:var(--tx2);line-height:1.7;max-width:380px;margin-bottom:18px}
.cal-fallback .btn-p{width:auto}
.cal-fallback .cal-alt{margin-top:10px;font-size:14.5px;color:var(--tx2)}
.cal-fallback .cal-alt a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:5px;transition:text-decoration-color .2s}
.cal-fallback .cal-alt a:hover{text-decoration-color:var(--blue-soft)}
.cal-foot{margin-top:14px;font-size:12.5px;color:var(--tx2);text-align:center}

/* FOOTER */
footer{padding:64px 0 40px;border-top:1px solid var(--line)}
.foot-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:40px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.foot-tag{font-size:14px;color:var(--tx2);line-height:1.7;max-width:300px;margin-top:14px}
.foot-h{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);margin-bottom:16px}
.foot-l{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-l a{color:var(--tx2);font-size:14.5px;text-decoration:none;transition:color .2s}
.foot-l a:hover{color:var(--tx)}
.foot-i{display:flex;justify-content:space-between;align-items:center;gap:20px}
.foot-copy{font-size:13.5px;color:var(--tx2)}
.foot-top{font-size:13.5px;color:var(--tx2);text-decoration:none;transition:color .2s;white-space:nowrap}
.foot-top:hover{color:var(--tx)}

/* KAART-SPOTLIGHT — zachte gloed die de muis volgt */
@media(hover:hover) and (pointer:fine){
  .d-card:hover{transform:translateY(-4px);box-shadow:0 26px 52px -30px rgba(0,0,0,.7)}
  .d-card::after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s ease;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(91,141,239,.1),transparent 65%)}
  .d-card:hover::after{opacity:1}
}

/* ANIMATIES */
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .d-card::after{display:none}
  .reveal,.hero-eyebrow,.hero-h,.hero-sub,.hero-btns,.hero-points{opacity:1;transform:none;animation:none}
}

/* MOBIEL */
@media(max-width:900px){
  .hero-g{grid-template-columns:minmax(0,1fr)}
  .hero-g>*{min-width:0}
  .over-g{grid-template-columns:1fr;gap:48px}
  .c-top{grid-template-columns:1fr;gap:36px;align-items:start;margin-bottom:40px}
  .foot-g{grid-template-columns:1fr;gap:32px}
}
@media(max-width:768px){
  .wrap{padding:0 24px}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-eyebrow,.hero-h,.hero-sub,.hero-btns,.hero-points{animation:none;opacity:1;transform:none}
  nav{padding:14px 0}
  .nav-links{display:none;position:fixed;top:72px;left:0;right:0;background:rgba(10,13,21,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line2);box-shadow:0 24px 40px -20px rgba(0,0,0,.7);flex-direction:column;padding:24px;gap:20px;z-index:999}
  .nav-links.open{display:flex}
  .nav-links .nav-cta{padding:12px 22px;text-align:center}
  .nav-toggle{display:flex}
  #hero{padding:140px 0 84px}
  .hero-eyebrow{max-width:310px;font-size:10px;line-height:1.55;letter-spacing:.14em;margin-bottom:20px}
  .hero-h{font-size:clamp(40px,12vw,52px);line-height:1.02;margin-bottom:24px}
  .hero-h em{display:block}
  .hero-sub{font-size:16px;line-height:1.68;margin-bottom:32px}
  .hero-btns{display:grid;grid-template-columns:1fr;max-width:320px}
  .hero-btns a{text-align:center}
  .hero-btns .btn-s{justify-content:center;text-align:center;text-wrap:balance}
  .hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
  .hp-t{font-size:12px}.hp-s{font-size:11.5px}
  .sec{padding:84px 0}
  .sec-hd{margin-bottom:48px}
  .sec-cta{margin-top:56px}
  .d-grid{grid-template-columns:1fr}
  .d-card{padding:32px 26px}
  .cal-card{padding:10px}
  .cal-embed,.cal-fallback{min-height:540px}
  .cal-fallback{padding:36px 22px}
  .faq summary{font-size:15.5px;padding:20px 0}
  footer{padding:48px 0 32px}
  .foot-i{flex-direction:column;text-align:center}
}
/* MOBIELE HERO (≤640px, 9 sept 2026) — strakker en rustiger dan de standaard
   stapel: geen vinkjes maar een lijst met haarlijnen en serif-volgnummers (zelfde
   taal als de dienstkaarten), de knop op tekstbreedte in plaats van een blok over
   de volle breedte, een eyebrow met haarlijn en meer lucht rond de kop. De foto
   blijft op mobiel verborgen. */
@media(max-width:640px){
  #hero{padding:136px 0 76px}
  .hero-eyebrow{display:flex;align-items:center;gap:12px;max-width:none;font-size:10.5px;letter-spacing:.18em;margin-bottom:24px}
  .hero-eyebrow::before{content:'';flex:none;width:18px;height:1px;background:var(--blue)}
  .hero-h{line-height:1;margin-bottom:22px}
  .hero-sub{font-size:15.5px;line-height:1.72;max-width:32ch;margin-bottom:34px}
  .hero-btns{display:block;max-width:none}
  .hero-btns .btn-p{display:inline-block;width:auto;padding:15px 34px}
  .hero-points{display:block;margin-top:48px;counter-reset:hp}
  .hp{display:grid;grid-template-columns:36px 1fr;align-items:baseline;gap:0;padding:15px 0;border-top:1px solid var(--line)}
  .hp:last-child{border-bottom:1px solid var(--line)}
  .hp::before{counter-increment:hp;content:counter(hp,decimal-leading-zero) / "";font-family:'Fraunces',serif;font-size:14px;line-height:1;letter-spacing:.02em;color:rgba(153,160,180,.55)}
  .hp-t{font-size:13.5px}
  .hp-s{font-size:12.5px}
}

/* NEURAAL VELD — een subtiel netwerk van knopen en verbindingen over de hele
   pagina (vaste canvas-overlay, screen-blend: alleen oplichten, nooit
   verduisteren). Ligt onder de nav (z1000) en het mobiele menu (z999); vangt
   geen clicks. Op brede schermen dimt een mask het veld achter de
   contentkolom zodat tekst rustig blijft. */
#nerve{position:fixed;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen}
@media(min-width:901px){
  #nerve{-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.38) 30%,rgba(0,0,0,.38) 70%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.38) 30%,rgba(0,0,0,.38) 70%,#000 100%)}
}
@media(prefers-reduced-motion:reduce){#nerve{opacity:.6}}

/* DIENSTPAGINA'S (ombouw naar meerdere pagina's, aug 2026) */
/* Klikbare dienstkaart op de homepage: de hele kaart is de link. */
a.d-card{display:block;color:inherit;text-decoration:none}
.d-more{display:inline-block;margin-top:16px;font-size:14.5px;color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s}
a.d-card:hover .d-more{text-decoration-color:var(--blue-soft)}
/* Eerste sectie van een subpagina: ruimte onder de vaste nav, geen 100svh-hero. */
.sec--first{padding-top:190px}
.sec--first .sec-intro{max-width:640px}
/* Kleine broodkruimel boven de paginatitel. */
.crumb{font-size:13px;color:var(--tx2);margin-bottom:18px}
.crumb a{color:var(--tx2);text-decoration:none;transition:color .2s}
.crumb a:hover{color:var(--tx)}
.crumb span{margin:0 8px;opacity:.5}

/* STAPPEN (dienstpagina's, 13 sept 2026) — de vier stappen van een dienst als rustige
   genummerde lijst: serif-volgnummers 01–04 (zelfde taal als .d-num en de mobiele
   hero-punten), haarlijnen tussen de rijen, geen knoppen, vlakken of animatie. Vervangt
   het procesblok (.flow) dat op 9 sept met de homepage-tijdlijn is verdwenen; de
   dienstpagina's gebruikten dat nog en toonden daardoor kale browserknoppen. */
.stappen{list-style:none;max-width:840px;margin:0 0 64px;counter-reset:stap}
.stap{display:grid;grid-template-columns:56px minmax(200px,260px) 1fr;column-gap:28px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line)}
.stap:last-child{border-bottom:1px solid var(--line)}
.stap::before{counter-increment:stap;content:counter(stap,decimal-leading-zero);font-family:'Fraunces',serif;font-size:20px;line-height:1;letter-spacing:.02em;color:rgba(153,160,180,.5)}
.stap-t{font-size:16px;font-weight:600;color:var(--tx);line-height:1.45}
.stap-b{font-size:15px;color:var(--tx2);line-height:1.7}
@media(max-width:768px){
  .stap{grid-template-columns:40px 1fr;column-gap:16px;row-gap:4px;padding:18px 0}
  .stap::before{grid-row:1/span 2;font-size:16px}
  .stap-t,.stap-b{grid-column:2}
  .stap-b{font-size:14.5px}
}

/* Tekstlinks in lopende tekst (dienstpagina's, 13 sept 2026): zelfde rustige onderstreping
   als .d-more en .btn-s, zodat kruisverwijzingen tussen de diensten niet als browserblauw opvallen. */
.over-t a,.sec-intro a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s}
.over-t a:hover,.sec-intro a:hover{text-decoration-color:var(--blue-soft)}

/* KENNISBANK (13 sept 2026) — overzicht en artikelpagina's, gebouwd door _dev/kennisbank-build.js.
   Zelfde typografie als de dienstpagina's: koppen in Fraunces, lopende tekst in --tx2, haarlijnen,
   geen kaders of iconen. */
.artikel-meta{font-size:13.5px;color:var(--tx2);margin-top:20px;letter-spacing:.01em}
.artikel{max-width:720px}
.artikel p{font-size:17px;color:var(--tx2);line-height:1.85;margin-bottom:20px}
.artikel strong{color:var(--tx);font-weight:600}
.artikel h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(24px,2.6vw,30px);line-height:1.2;color:var(--tx);margin:46px 0 16px}
.artikel h3{font-size:17px;font-weight:600;color:var(--tx);margin:30px 0 10px}
.artikel ul,.artikel ol{margin:0 0 22px 22px;color:var(--tx2);font-size:16.5px;line-height:1.75}
.artikel li{margin-bottom:8px;padding-left:4px}
.artikel li::marker{color:var(--blue-soft)}
.artikel a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s}
.artikel a:hover{text-decoration-color:var(--blue-soft)}
.verder{margin-top:64px;max-width:720px}
.verder-l{list-style:none;margin-top:18px}
.verder-l li{border-top:1px solid var(--line);padding:14px 0}
.verder-l li:last-child{border-bottom:1px solid var(--line)}
.verder-l a{color:var(--tx);text-decoration:none;font-size:16px;font-weight:500;transition:color .2s}
.verder-l a:hover{color:var(--blue-soft)}
.verder-l span{display:block;font-size:14px;color:var(--tx2);margin-top:2px;line-height:1.5}
.artikelen{list-style:none;max-width:840px}
.artikelen li{border-top:1px solid var(--line)}
.artikelen li:last-child{border-bottom:1px solid var(--line)}
.artikel-kaart{display:block;padding:28px 0;color:inherit;text-decoration:none}
.artikel-kaart h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(22px,2.4vw,28px);line-height:1.2;margin-bottom:10px;transition:color .2s}
.artikel-kaart:hover h2{color:var(--blue-soft)}
.artikel-kaart p{font-size:15.5px;color:var(--tx2);line-height:1.7;max-width:640px}
.artikel-kaart span{display:block;margin-top:12px;font-size:13.5px;color:var(--tx2)}
/* Vijf navigatielinks: iets minder ruimte ertussen op smallere desktops. */
@media(max-width:1000px){.nav-links{gap:24px}}
@media(max-width:768px){.artikel p{font-size:16px}.artikel h2{margin-top:36px}}

/* Voettekst: adres en KvK-nummer als gewone regels, in dezelfde kleur en grootte als de links (13 sept 2026). */
.foot-l li{font-size:14.5px;color:var(--tx2);line-height:1.5}