/* Daglicht-precisie — preview-port van design-system-v3 (Claude Design,
   goedgekeurd 2026-08-16). Koel wit + zwart + kobalt; Sora + Newsreader italic.
   Donker bestaat alleen nog in twee filmmomenten: de hero-orbit en de
   scroll-film, met 120px overgangsbanden + tick-linialen als naad.
   JS-hooks (main.js/film.js) ongewijzigd: .reveal, .kin .char, .loader,
   .cursor-*, #scrollbar, .figure__img[data-parallax], [data-count]. */
@import url('assets/fonts/fonts.css');

/* ---- tokens (design-system-v3/tokens) -------------------------------- */
:root{
  /* papier + inkt */
  --paper:#FFFFFF; --paper-tint:#F2F4F7; --surface-card:#FFFFFF;
  --ink:#10131A;            /* 18.6:1 op paper */
  --ink-2:#4A5160;          /* 8.0:1 */
  --ink-3:#646C7D;          /* 5.3:1 */
  /* kobalt, de enige accentkleur */
  --accent:#2139F0; --accent-hover:#1B2FD4; --accent-active:#16279C;
  --accent-text:#1B2FD4; --accent-text-hover:#14239F; --accent-wash:#EAEDFF;
  /* hairlines */
  --hairline:#E3E7ED; --hairline-strong:#C3CAD6;
  /* semantisch */
  --text-body:var(--ink); --text-muted:var(--ink-2); --text-caption:var(--ink-3);
  --link:var(--accent-text); --link-hover:var(--accent-text-hover);
  --focus-ring:var(--accent);
  /* filmwereld (hero + scroll-film). Het koele near-black uit het design
     system; de opgetrokken leisteen van 2026-08-17 is op Claytons oordeel
     teruggedraaid ("hou het maar gewoon op het oude zwart"). De zachte
     overgangsband blijft wel, die doet het werk nu vanaf dit zwart. */
  --film-bg:#0A0D12; --film-bg-2:#121620;
  --film-ink:#EDF0F5; --film-ink-2:#A6ADBD;
  --film-hairline:rgba(237,240,245,.16);
  --film-accent:#7D8CFF;
  /* type */
  --font-display:'Sora',ui-sans-serif,system-ui,sans-serif;
  --font-ui:'Sora',ui-sans-serif,system-ui,sans-serif;
  --font-serif:'Newsreader',Georgia,serif;
  --type-display-xl:600 clamp(44px,5.2vw,68px)/1.05 var(--font-display);
  --type-display:600 clamp(36px,4vw,52px)/1.08 var(--font-display);
  --type-h1:600 clamp(30px,3vw,40px)/1.12 var(--font-display);
  --type-h2:600 30px/1.2 var(--font-display);
  --type-h3:600 21px/1.35 var(--font-display);
  --type-lead:italic 400 clamp(20px,2vw,26px)/1.5 var(--font-serif);
  --type-quote:italic 400 clamp(26px,2.6vw,34px)/1.45 var(--font-serif);
  --type-body:400 16px/1.7 var(--font-ui);
  --type-body-l:400 18px/1.65 var(--font-ui);
  --type-small:400 14px/1.55 var(--font-ui);
  --type-button:500 15px/1 var(--font-ui);
  --type-meta:500 11.5px/1.5 var(--font-ui);
  --type-stat:600 clamp(40px,4vw,56px)/1.05 var(--font-display);
  --ls-display:-0.03em; --ls-heading:-0.02em; --ls-meta:0.08em;
  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --space-10:128px; --space-11:160px;
  --section-y:var(--space-10); --section-y-compact:var(--space-8);
  --container-max:1160px; --gutter:var(--space-5);
  --radius-s:2px; --radius-m:4px;
  /* effecten */
  --shadow-card:0 1px 2px rgba(16,19,26,.05);
  --shadow-card-hover:0 6px 20px rgba(16,19,26,.08);
  --ease-precise:cubic-bezier(.2,0,0,1);
  --dur-fast:140ms; --dur-base:220ms;
  /* Overgang licht <-> film. Een rechte twee-stops-verloop over 120px leest als
     een streep; deze stops volgen een S-curve over een langere band, zodat het
     oog geen rand ziet. */
  --film-fade-in:linear-gradient(to bottom,
    var(--paper) 0%,#F0F2F5 8%,#D5DAE0 19%,#B5BCC5 30%,#959DA8 41%,
    #77808D 51%,#5C6675 61%,#454F60 70%,#313B4B 79%,#212936 87%,
    #141A24 94%,var(--film-bg) 100%);
  --film-fade-out:linear-gradient(to bottom,
    var(--film-bg) 0%,#141A24 6%,#212936 13%,#313B4B 21%,#454F60 30%,
    #5C6675 39%,#77808D 49%,#959DA8 59%,#B5BCC5 70%,#D5DAE0 81%,
    #F0F2F5 92%,var(--paper) 100%);
  --film-band-h:220px;
  /* film.js/beats ankeren op --pad-x: lijn hem uit op het container-raster */
  --pad-x:max(var(--gutter),calc((100vw - var(--container-max))/2 + var(--gutter)));
  --topbar-h:64px;
}

/* ---- reset / base ---------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--text-body); font:var(--type-body);
  overflow-x:hidden; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* 1160px is de CONTENTbreedte (mock-geometrie): padding komt erbovenop */
.wrap{max-width:calc(var(--container-max) + 2*var(--gutter));margin-inline:auto;
  padding-inline:var(--gutter);width:100%}

/* ---- precisielaag ---------------------------------------------------- */
.ds-ticks{height:8px;background:repeating-linear-gradient(90deg,
  var(--hairline-strong) 0 1px,transparent 1px 24px)}
.ds-hairline{border:0;border-top:1px solid var(--hairline);margin:0}
.ds-frame{position:relative}
.ds-frame::before,.ds-frame::after{content:"";position:absolute;width:9px;height:9px;
  background:linear-gradient(var(--hairline-strong),var(--hairline-strong)) center/9px 1px no-repeat,
    linear-gradient(var(--hairline-strong),var(--hairline-strong)) center/1px 9px no-repeat}
.ds-frame::before{top:-5px;left:-5px}
.ds-frame::after{bottom:-5px;right:-5px}
.ds-frame--accent::before,.ds-frame--accent::after{
  background:linear-gradient(var(--accent),var(--accent)) center/9px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1px 9px no-repeat}
.ds-meta{font:var(--type-meta);letter-spacing:var(--ls-meta);text-transform:uppercase;
  color:var(--text-caption);font-variant-numeric:tabular-nums}
/* overgangsbanden licht <-> film */
.band{height:var(--film-band-h)}
.band--in{background:var(--film-fade-in)}
.band--out{background:var(--film-fade-out)}
.film-entry{margin-top:var(--space-9)}

/* ---- topbar (sticky, licht) ------------------------------------------ */
.topbar{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--hairline)}
.topbar__bar{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);
  height:var(--topbar-h);display:flex;align-items:center;gap:32px}
.topbar__mark{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.topbar__tick{width:10px;height:10px;flex:none;
  background:linear-gradient(var(--accent),var(--accent)) center/10px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 10px no-repeat}
.topbar__name{font:600 16px/1 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font:var(--type-button);color:var(--ink-2);padding:4px 0;
  transition:color var(--dur-fast) var(--ease-precise),box-shadow var(--dur-fast) var(--ease-precise)}
.nav a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--hairline-strong)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.topbar__progress{height:2px;background:transparent}
.topbar__progress .scrollhud__bar{height:2px;width:0%;background:var(--accent)}
@media (max-width:760px){
  .topbar__bar{gap:14px;height:56px}
  .topbar__meta{display:none}
  .nav{gap:14px}
  .nav a{font:500 12px/1 var(--font-ui)}
}
/* Onder 480px past merk + vijf links niet meer op een regel (447px nodig);
   de nav wrapt naar een eigen volle-breedte regel, zoals de oude site deed. */
@media (max-width:480px){
  .topbar__bar{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:10px 14px}
  .nav{flex:1 0 100%;margin-left:0;justify-content:space-between;gap:8px}
}
:root{--topbar-h:64px}
@media (max-width:760px){:root{--topbar-h:56px}}
@media (max-width:480px){:root{--topbar-h:74px}}

/* ---- knoppen ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;height:52px;padding:0 28px;
  font:500 16px/1 var(--font-ui);color:#fff;background:var(--accent);
  border:0;border-radius:var(--radius-s);
  transition:background var(--dur-fast) var(--ease-precise)}
.btn:hover{background:var(--accent-hover)}
.btn:active{background:var(--accent-active);transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--ink);
  border:1px solid var(--hairline-strong);
  transition:border-color var(--dur-fast) var(--ease-precise)}
.btn--ghost:hover{background:transparent;border-color:var(--ink-2)}
.btn--ghost:active{background:transparent;border-color:var(--ink);transform:translateY(1px)}
.btn--film{background:transparent;color:var(--film-ink);
  border:1px solid rgba(237,240,245,.4);
  transition:border-color var(--dur-fast) var(--ease-precise)}
.btn--film:hover{background:transparent;border-color:var(--film-ink)}
.btn--film:active{background:transparent;border-color:var(--film-ink);transform:translateY(1px)}
/* tekstlink met pijl */
.arrowlink{font:var(--type-button);color:var(--accent-text);
  display:inline-flex;gap:8px;align-items:center}
.arrowlink:hover{color:var(--accent-text-hover);text-decoration:underline;
  text-underline-offset:3px}
.arrowlink:active{opacity:.75}

/* ---- type-hulpklassen ------------------------------------------------- */
.display{font:var(--type-display);letter-spacing:-.025em;text-wrap:balance}
.lead{font:var(--type-lead);color:var(--text-muted);max-width:560px}
.lead--serif{font:var(--type-lead)} /* serif zit al in --type-lead */
.meta{font:var(--type-small);color:var(--text-caption)}
.meta a{color:var(--accent-text);transition:color var(--dur-fast) var(--ease-precise)}
.meta a:hover{color:var(--accent-text-hover);text-decoration:underline;text-underline-offset:3px}
.meta a:active{opacity:.75}
.accent{color:var(--accent-text)}

/* ---- sectiemodel (licht) ---------------------------------------------- */
.section{position:relative;padding:var(--space-9) 0}
.section--tint{background:var(--paper-tint);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.section--compact{padding:var(--space-7) 0 var(--space-8)}
/* dode klassen uit de donkere wereld: onschadelijk gemaakt */
.section--dark,.section--warm,.wash{background:transparent}
.ghost,.fx-grain,.fx-vignette{display:none}

/* ---- hero (orbit-scrub, filmmoment 1 — variant 1b) -------------------- */
/* Scrubtrack ingekort met de orbit (67 -> 52 frames, stop op de linksblik):
   zelfde tempo per frame, minder scrollen. Was 300vh / 240vh. */
.hero{height:255vh;position:relative;background:var(--film-bg)}
@media (max-width:640px){.hero{height:210vh}}
.hero__pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--topbar-h) + 24px) var(--pad-x) 64px}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media canvas{width:100%;height:100%;object-fit:cover}
/* Leesvlak links + een onderrand die volledig naar --film-bg loopt, zodat de
   foto zonder zichtbare rand in de overgangsband overgaat. Het beeld blijft
   onbewerkt: de helderheidscorrectie hoorde bij de opgetrokken leisteen en is
   met dat besluit teruggedraaid. */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(100deg,rgba(10,13,18,.9) 0%,rgba(10,13,18,.7) 44%,rgba(10,13,18,.16) 78%,rgba(10,13,18,.04) 100%),
  linear-gradient(180deg,rgba(10,13,18,.22),transparent 20%,transparent 58%,rgba(10,13,18,.72) 88%,var(--film-bg) 100%)}
.hero__content{position:relative;z-index:2;max-width:620px}
.hero__content h1,.hero__content .display{font:var(--type-display-xl);
  letter-spacing:var(--ls-display);color:var(--film-ink)}
.hero__content .lead{margin-top:24px;color:var(--film-ink-2);max-width:560px}
.hero__cta{display:flex;gap:20px;align-items:center;margin-top:32px;flex-wrap:wrap}
/* kinetic headline — letters track in (hook van main.js) */
.kin .char{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);
  transition:opacity .6s ease,transform .6s var(--ease-precise)}
.kin.in .char{opacity:1;transform:none}

/* certificeringsbadges — in de hero op film (CISSP op witte chip),
   op licht papier gedempt grijs -> kleur bij hover */
/* Badges staan altijd in volle kleur (Claytons regel: niemand hovert over
   elk merk om te zien wat het is). */
.certs{display:flex;align-items:center;gap:24px;margin-top:48px;flex-wrap:wrap}
.certs img{height:clamp(44px,5.5vh,52px);width:auto}
.hero__content .certs img.cert--chip{background:#fff;padding:5px;
  border-radius:var(--radius-s)}
.certs--sm{margin-top:var(--space-6)}
.certs--sm img{height:clamp(38px,5vh,46px)}

/* ---- reveal on enter (hook van main.js) ------------------------------- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .8s ease,transform .8s var(--ease-precise)}
.reveal.in{opacity:1;transform:none}

/* ---- marquee-strip (licht) -------------------------------------------- */
.tick{overflow:hidden;border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);background:var(--paper-tint);
  padding:16px 0;white-space:nowrap}
.tick__row{display:inline-block;animation:tick 36s linear infinite}
.tick span{display:inline-flex;align-items:center;padding:0 14px;
  font:var(--type-meta);letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-2)}
/* separator: kobalt crosshair i.p.v. glyph */
.tick span b{display:inline-block;width:9px;height:9px;margin-left:28px;
  font-size:0;color:transparent;
  background:linear-gradient(var(--accent),var(--accent)) center/9px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1px 9px no-repeat}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick__row{animation:none}}

/* ---- statistieken (filmwereld, in de scroll-film-beat) ----------------- */
.stats{display:flex;align-items:stretch}
.stat{flex:1;min-width:0;padding:0 28px;border-left:1px solid var(--film-hairline)}
.stat:first-child{padding-left:0;border-left:0}
.stat:last-child{padding-right:0}
.stat--wide{flex:1.15}
.stat__num{font:var(--type-stat);letter-spacing:-.02em;color:var(--film-ink);
  font-variant-numeric:tabular-nums}
.stat__num span{font-variant-numeric:tabular-nums}
.stat__plus{color:var(--film-accent);font-size:.6em;margin-left:2px;font-weight:600}
.stat__num--word{font:600 clamp(22px,2.2vw,30px)/1.2 var(--font-display);
  letter-spacing:-.02em;padding-top:14px}
.stat__label{font:var(--type-small);color:var(--film-ink-2);margin-top:8px}
.stat__detail{font:400 13px/1.5 var(--font-ui);color:var(--film-ink-2);
  margin-top:4px;opacity:.8}

/* ---- pijlers (filmwereld, kaarten in de scroll-film-beat) -------------- */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pillar{background:var(--film-bg-2);border:1px solid var(--film-hairline);
  border-radius:var(--radius-m);padding:24px;
  transition:border-color var(--dur-base) var(--ease-precise)}
.pillar:hover{border-color:rgba(237,240,245,.4)}
.pillar__t{font:var(--type-h3);letter-spacing:-.01em;color:var(--film-ink);text-wrap:balance}
.pillar__d{font:var(--type-small);color:var(--film-ink-2);margin-top:10px}
.pillar--frame{position:relative}
.pillar--frame::before,.pillar--frame::after{content:"";position:absolute;
  width:9px;height:9px;
  background:linear-gradient(var(--film-hairline),var(--film-hairline)) center/9px 1px no-repeat,
    linear-gradient(var(--film-hairline),var(--film-hairline)) center/1px 9px no-repeat}
.pillar--frame::before{top:-5px;left:-5px}
.pillar--frame::after{bottom:-5px;right:-5px}
@media (max-width:1023px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pillars{grid-template-columns:1fr}}

/* ---- werk-kaarten (licht) --------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:1023px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--surface-card);border:1px solid var(--hairline);
  border-radius:var(--radius-m);padding:0 28px 28px;color:var(--ink);
  overflow:hidden;box-shadow:var(--shadow-card);
  transition:border-color var(--dur-base) var(--ease-precise),
    box-shadow var(--dur-base) var(--ease-precise),
    transform var(--dur-base) var(--ease-precise)}
/* Beeldkop in de kaart: echte werkfoto in kleur, hele kaartbreedte. */
.card__media{margin:0 -28px 22px;width:calc(100% + 56px);aspect-ratio:16/9;
  overflow:hidden;border-bottom:1px solid var(--hairline);background:var(--paper-tint)}
.card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-precise)}
.card:hover .card__media img{transform:scale(1.04)}
.card--nomedia{padding-top:28px}
.card:hover{border-color:var(--hairline-strong);box-shadow:var(--shadow-card-hover);
  transform:translateY(-2px)}
.card:active{transform:translateY(-1px)}
.card__head{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;width:100%}
.card__t{font:var(--type-h3);letter-spacing:-.01em;text-wrap:balance}
.card__num{font:var(--type-meta);letter-spacing:var(--ls-meta);
  color:var(--text-caption);font-variant-numeric:tabular-nums}
.card__k{font:var(--type-small);color:var(--ink-3);margin-top:4px}
.card__d{font:var(--type-body);color:var(--ink-2);margin-top:12px}
.card__links{display:flex;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
.card__link{font:var(--type-button);color:var(--accent-text);
  display:inline-flex;gap:6px;align-items:center}
.card__link:hover{color:var(--accent-text-hover);text-decoration:underline;
  text-underline-offset:3px}
.card__link:active{opacity:.75}
/* hele kaart is de link (homepage): de leeslink reageert dan mee */
a.card:hover .card__link{color:var(--accent-text-hover);text-decoration:underline;
  text-underline-offset:3px}
/* dode fotolaag/logolaag uit de donkere kaarten */
.card__bg,.card__logo{display:none}
.card--text{padding:28px} /* zelfde model; klasse blijft voor de HTML-hooks */

/* ---- citaten ---------------------------------------------------------- */
.quote{border-top:1px solid var(--hairline);margin-top:var(--space-8);
  padding-top:var(--space-6)}
.quote__t{font:var(--type-quote);color:var(--ink);max-width:34ch}
.quote__by{margin-top:16px;font:var(--type-meta);letter-spacing:var(--ls-meta);
  text-transform:uppercase;color:var(--text-caption)}
.quote__logo{height:26px;width:auto;margin-bottom:16px}
.quotes-feature{margin-top:var(--space-8)}
.quote--lead{display:grid;gap:16px;justify-items:start;margin:0;
  padding-top:var(--space-6)}
.quote--lead .quote__t{font:italic 400 clamp(24px,2.4vw,30px)/1.45 var(--font-serif);max-width:36ch}
.quotes__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;margin-top:var(--space-7)}
.quotes__row .quote{margin:0;padding-top:var(--space-5)}
.quotes__row .quote__t{font:italic 400 17px/1.5 var(--font-serif);max-width:36ch}
.quotes__row .quote__by{margin-top:12px}
@media (max-width:820px){.quotes__row{grid-template-columns:1fr}}

/* ---- proza (case-verslagen, About) ------------------------------------ */
.prose{max-width:640px;margin-top:var(--space-6)}
.prose p{font:var(--type-body-l);color:var(--ink-2);margin:0 0 1.1em}
.prose ul{font:var(--type-body-l);color:var(--ink-2);margin:0 0 1.1em;padding-left:1.2em}
.prose li{margin-bottom:.35em}
.prose strong{color:var(--ink)}
.prose a{color:var(--accent-text);border-bottom:1px solid var(--hairline-strong)}
.prose a:hover{color:var(--accent-text-hover);border-color:var(--accent-text-hover)}
.case-meta{margin-top:12px;font:var(--type-small);color:var(--text-caption)}

/* ---- tweekoloms sectiekop (About-model uit de mock) -------------------- */
.split{display:flex;gap:64px}
.split__aside{flex:0 0 300px;min-width:0}
.split__aside h1,.split__aside h2{font:var(--type-h1);letter-spacing:var(--ls-heading);
  text-wrap:balance}
.split__metarow{display:flex;justify-content:space-between;align-items:center;
  margin-top:20px;gap:16px}
.split__metarow .ds-hairline{flex:1}
.split__body{flex:1;min-width:0;max-width:640px}
.split__body .prose{margin-top:0}
@media (max-width:1023px){.split{flex-direction:column;gap:28px}
  .split__aside{flex:none}}

/* ---- sectiekop met meta rechts (werk-teaser-model) --------------------- */
.rowhead{display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.rowhead h1,.rowhead h2{font:var(--type-h1);letter-spacing:var(--ls-heading);text-wrap:balance}

/* ---- dienstenblokken (licht) ------------------------------------------ */
.service{border-top:1px solid var(--hairline);padding:var(--space-7) 0;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,72px);
  transition:border-color var(--dur-base) var(--ease-precise)}
.service:hover{border-top-color:var(--hairline-strong)}
@media (max-width:820px){.service{grid-template-columns:1fr}}
@media (min-width:821px){
  .service:nth-of-type(2n){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .service:nth-of-type(2n)>div:first-child{order:2}
}
.service__t{font:var(--type-display);letter-spacing:var(--ls-heading);
  font-size:clamp(24px,2.6vw,34px);line-height:1.15;text-wrap:balance}
.service__media{margin-top:20px;border-radius:var(--radius-m);overflow:hidden;
  border:1px solid var(--hairline);aspect-ratio:16/10;max-width:min(100%,460px)}
.service__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-precise)}
.service:hover .service__media img{transform:scale(1.03)}
.service__body{display:flex;flex-direction:column;gap:16px}
/* De dl start op dezelfde optische lijn als de dienstkop links: de kop heeft
   line-height 1.15 op ~34px, dus zijn eerste regel begint hoger dan een 11.5px
   label. Die compensatie zit hier, niet in losse marges per blok. */
/* ~6px gemeten in de browser: de kop (34px) en de eerste tekstregel rechts
   (16px) deelden geen basislijn, waardoor de rechterkolom hoger leek te staan. */
.service__body{padding-top:8px}
.service dl{display:grid;grid-template-columns:auto 1fr;gap:.9em 1.4em;margin:0}
.service dt{font:var(--type-meta);letter-spacing:var(--ls-meta);
  text-transform:uppercase;color:var(--accent-text);
  line-height:1.7;align-self:start}
.service dd{font:var(--type-body);color:var(--ink-2);max-width:52ch;min-width:0}
.page-head{padding-top:var(--space-9)}

/* ---- inzichtenlijst (licht) ------------------------------------------- */
.insight{border-top:1px solid var(--hairline);padding:var(--space-5) 0;
  display:flex;flex-direction:column;gap:.5em}
.insight--pub{display:grid;grid-template-columns:clamp(88px,11vw,150px) 1fr;
  gap:clamp(16px,3vw,40px);align-items:center}
.insight--pub .insight__body{display:flex;flex-direction:column;gap:.4em;min-width:0}
.insight__cover{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;
  border-radius:var(--radius-m);border:1px solid var(--hairline);
  transition:border-color var(--dur-base) var(--ease-precise),
    transform var(--dur-base) var(--ease-precise)}
.insight--pub:hover .insight__cover{border-color:var(--hairline-strong);
  transform:translateY(-2px)}
.insight__k{font:var(--type-small);color:var(--ink-3)}
.insight__t{font:var(--type-h3);letter-spacing:-.01em;text-wrap:balance;
  transition:color var(--dur-fast) var(--ease-precise)}
.insight--pub:hover .insight__t{color:var(--accent-text)}
.insight--pub:active{opacity:.85}
.insight__d{font:var(--type-body);color:var(--ink-2);max-width:60ch}

/* ---- fotopaneel (v.h. parallax-figure; foto's in een kader op licht) --- */
.figure{padding:var(--space-9) 0}
.figure .wrap{display:flex;flex-direction:column;gap:var(--space-6)}
.figure__content{order:1}
.figure__content .display{font-size:clamp(28px,3vw,40px);color:var(--ink)}
.figure__media{order:2;position:relative;overflow:hidden;
  border:1px solid var(--hairline);border-radius:var(--radius-m);
  aspect-ratio:21/9}
.figure__img{position:absolute;left:0;top:-15%;width:100%;height:130%;
  object-fit:cover;will-change:transform}
.figure__scrim{display:none}

/* ---- contactkaart (mock-contract) ------------------------------------- */
.contactcard{background:var(--surface-card);border:1px solid var(--hairline);
  border-radius:var(--radius-m);padding:var(--space-8);text-align:center;
  max-width:820px;margin:0 auto}
.contactcard h1,.contactcard h2{font:var(--type-h1);letter-spacing:var(--ls-heading);
  text-wrap:balance}
.contactcard .lead{margin:16px auto 0;max-width:560px}
.contactcard__cta{display:flex;gap:20px;justify-content:center;align-items:center;
  margin-top:var(--space-6);flex-wrap:wrap}
.contactcard .meta{margin:var(--space-5) auto 0;max-width:480px;color:var(--ink-2)}
.contactcard__links{display:flex;justify-content:center;gap:16px;
  align-items:baseline;margin-top:var(--space-4);flex-wrap:wrap}
.contactcard__links a{font:var(--type-meta);letter-spacing:var(--ls-meta);
  text-transform:uppercase;color:var(--accent-text)}
.contactcard__links a:hover{color:var(--accent-text-hover);text-decoration:underline;
  text-underline-offset:3px}
@media (max-width:640px){.contactcard{padding:var(--space-6) var(--space-5)}}

/* ---- footer ------------------------------------------------------------ */
.footer{border-top:1px solid var(--hairline);margin-top:var(--space-9)}
.footer__bar{max-width:var(--container-max);margin:0 auto;
  padding:var(--space-5) var(--gutter);display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap}

/* ---- loader als merkmoment (licht) ------------------------------------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2vh,18px);transition:opacity .5s ease,visibility .5s}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader__mark{font:var(--type-meta);letter-spacing:.4em;text-transform:uppercase;
  color:var(--text-caption)}
.loader__num{font:600 clamp(56px,10vw,120px)/1 var(--font-display);
  color:var(--ink);font-variant-numeric:tabular-nums}
.loader__bar{width:min(42vw,320px);height:2px;background:var(--hairline)}
.loader__bar i{display:block;height:100%;width:0%;background:var(--accent)}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

/* ---- custom cursor (kobalt, zonder blend) ------------------------------ */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:70;pointer-events:none;
  border-radius:50%;transform:translate(-50%,-50%);display:none}
.cursor-dot{width:6px;height:6px;background:var(--accent)}
.cursor-ring{width:34px;height:34px;border:1px solid var(--accent);
  transition:width .25s,height .25s,opacity .25s}
.cursor-ring.big{width:64px;height:64px;opacity:.55}
@media (hover:hover) and (pointer:fine){
  body.cursor-on{cursor:none}
  body.cursor-on .cursor-dot,body.cursor-on .cursor-ring{display:block;opacity:0}
  body.cursor-on.cursor-live .cursor-dot,body.cursor-on.cursor-live .cursor-ring{opacity:1}
}

/* ---- focus + overloop --------------------------------------------------- */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-s)}
.grid>*,.pillars>*,.stats>*,.quotes__row>*,.service>*,.logos__row>*,.split>*{min-width:0}
.display,.pillar__t,.service__t,.insight__t,.card__t{text-wrap:balance}
.stat__num,.stat__num span,.loader__num{font-variant-numeric:tabular-nums}

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.kin .char{opacity:1;transform:none;transition:none}
  .hero{height:100vh}
  .cursor-dot,.cursor-ring{display:none!important}
  body.cursor-on{cursor:auto}
  .figure__img{top:0;height:100%}
}

/* ---- korte laptopvensters (1366x768-klasse) ----------------------------- */
@media (max-height:800px){
  .hero__content .certs{margin-top:28px}
  .hero__content .certs img{height:44px}
  .hero__content .lead{margin-top:16px}
  .hero__cta{margin-top:24px}
}