/* =========================================================================
   Capital BB. Eén donker thema, één accent (het goud van het merk), hoeken
   bijna scherp. De hero is scrollgestuurd waar de browser dat kan; overal
   anders speelt de opbouw vanzelf, en bij verminderde beweging staat hij stil.
   ========================================================================= */

:root{
  --ink:#0B0B0C; --ink-2:#111112; --ink-3:#171718; --ink-4:#1F1F21;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16);
  --text:#ECEAE6; --text-2:#B4B0A9; --muted:#87837C;
  --gold:#C9A063; --gold-hi:#E6CB9A; --gold-lo:#8E7038; --on-gold:#14110B;
  --r:3px; --r2:6px;
  --sans:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono","SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip in plaats van hidden: hidden zou de body een scrollcontainer maken
     en dan staat de scroll-tijdlijn van de hero stil. */
  overflow-x:clip;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.06}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center}
.display{font-size:clamp(1.9rem,3.9vw,3.1rem);letter-spacing:-.035em;line-height:1.05}
.display.ruimte{margin-top:64px}
.lede{color:var(--text-2);font-size:clamp(1rem,1.25vw,1.13rem);max-width:58ch;margin-top:18px;line-height:1.68}
.center + .lede{margin-left:auto;margin-right:auto}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.tekstlink{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
.tekstlink:hover{color:var(--gold)}
.goudcijfer{font-family:var(--mono);font-weight:500;color:var(--gold-hi)}
.voetnoot{margin-top:26px;font-size:.86rem;color:var(--muted);line-height:1.7;max-width:74ch}
.eerlijk{
  margin-top:30px;font-size:.88rem;line-height:1.7;color:var(--muted);
  border-left:1px solid var(--gold-lo);padding-left:20px;max-width:70ch;
}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--on-gold);padding:12px 18px;font-weight:600}
.skip:focus{left:12px;top:12px}

/* ---------------- Knoppen ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  padding:14px 26px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease),transform .12s var(--ease),box-shadow .25s var(--ease);
}
.btn-gold{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi);box-shadow:0 6px 30px rgba(201,160,99,.28)}
.btn-gold:active{transform:scale(.985)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi)}
.btn-sm{padding:9px 16px;font-size:.85rem}

/* ---------------- Navigatie ---------------- */
.nav{
  position:sticky;top:0;z-index:60;height:68px;
  display:flex;align-items:center;gap:26px;padding:0 28px;
  background:rgba(11,11,12,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* Tapdoelen op de WCAG 2.2-norm van 24 bij 24 pixels: navigatie, kruimelpad,
   voettekst en het merkteken zaten daar met 21 tot 23 pixels net onder. */
.merk{min-height:44px;display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--gold);flex:0 0 auto}
.merkteken{width:30px;height:30px;flex:0 0 auto}
.merk-cbb{font-family:"Times New Roman",Georgia,serif;font-size:30px;fill:currentColor;letter-spacing:.5px}
.merk-woord{font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{color:var(--text-2);text-decoration:none;font-size:.9rem;transition:color .2s var(--ease);
  display:inline-flex;align-items:center;min-height:26px}
.nav-links a:hover{color:var(--gold-hi)}
.nav-links a[aria-current=page]{color:var(--gold-hi)}
.nav-knop{display:none}
.nav-menu{display:none}

/* ---------------- Filmische hero ----------------
   .film is 260vh hoog; .film-plak plakt op het scherm. Zes platen komen uit
   de diepte terwijl je scrolt (scroll-driven animation). Zonder ondersteuning
   speelt dezelfde opbouw op tijd af, aangestuurd door js/site.js. */
.film{position:relative;height:260vh;view-timeline-name:--film}
.film-plak{
  position:sticky;top:0;height:100dvh;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
}
.film-licht{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 44% at 64% 24%, rgba(201,160,99,.19), transparent 62%),
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.045), transparent 60%),
    linear-gradient(180deg,#101011 0%, #0B0B0C 44%, #070708 100%);
}
.film-stage{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:flex-start;justify-content:center;
  /* Onder de navigatiebalk beginnen, anders verdwijnt het bovenste label. */
  padding-top:calc(68px + 2vh);
}
.montage{width:min(560px,88vw,52vh)}
/* Op brede schermen staat het stelsel rechts naast de tekst, zodat de
   onderste knopen nooit achter de koptekst belanden. */
@media (min-width:1081px){
  .film-stage{align-items:center;justify-content:flex-end;padding:68px 3vw 10vh 0}
  .montage{width:min(620px,46vw,80vh)}
  /* Smallere tekstkolom, zodat de subtekst het stelsel nooit raakt. */
  .film-copy h1{max-width:14ch}
  .film-copy .lede{max-width:42ch}
}
.stelsel{width:100%;height:auto;display:block;overflow:visible}

/* Ringen en knopen in de taal van het CBB-merk: dunne gouden cirkels op
   donker glas, met een gloed die pas aangaat als het onderdeel gedockt is. */
/* De blauwdruk: het plan ligt er al bij binnenkomst, vaag en gestippeld.
   Het scrollen bouwt het vol. Ademt heel traag zodat het leeft zonder af
   te leiden. */
.bd{
  fill:none;stroke:rgba(201,160,99,.34);stroke-width:1.6;
  stroke-dasharray:3 9;stroke-linecap:round;
}
.bd-stip{fill:rgba(201,160,99,.4)}
.blauwdruk{animation:adem 7s ease-in-out infinite alternate}
@keyframes adem{from{opacity:.6}to{opacity:1}}

.ring-buiten{fill:rgba(17,17,18,.88);stroke:var(--gold);stroke-width:2}
.ring-binnen{fill:none;stroke:rgba(201,160,99,.5);stroke-width:1.2}
.kern-stip{fill:var(--gold)}
.knoop-label{
  font-family:var(--mono);font-size:27px;letter-spacing:.18em;
  fill:var(--gold-hi);text-anchor:middle;
}
.kern-label{
  font-family:var(--mono);font-size:25px;letter-spacing:.22em;
  fill:var(--gold-hi);text-anchor:middle;
}
.kern .ring-buiten{fill:rgba(22,20,17,.94);stroke-width:2.4}

.knoop,.kern{
  transform-box:fill-box;transform-origin:center;
  /* Bij binnenkomst al zichtbaar, gedimd en uit positie: de onderdelen
     zweven los. Het scrollen dockt ze. Zo is het scherm nooit leeg. */
  opacity:.34;transform:translate(var(--dx,0px),var(--dy,0px)) scale(1.22);
  filter:drop-shadow(0 0 16px rgba(201,160,99,.28));
}
.kern{--dx:0px;--dy:0px;transform:scale(.55)}
.knoop-label,.kern-label{opacity:0}
.spaak{
  stroke:var(--gold);stroke-width:1.4;opacity:.55;
  stroke-dasharray:136;stroke-dashoffset:136;
}
.baan{
  fill:none;stroke:rgba(201,160,99,.4);stroke-width:1.2;
  stroke-dasharray:2074;stroke-dashoffset:2074;
  transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);
}

/* Scrollgestuurd waar het kan. De film begint bovenaan de pagina, dus de
   cover-tijdlijn staat bij binnenkomst al op ongeveer 31% en het plakken
   eindigt rond 69%. Alle bereiken passen in dat venster. De koptekst en de
   knoppen animeren bewust niet mee. */
@supports (animation-timeline: view()) {
  .knoop{animation:dok linear both;animation-timeline:--film}
  .k1{animation-range:cover 32% cover 40%}
  .k2{animation-range:cover 35% cover 43%}
  .k3{animation-range:cover 38% cover 46%}
  .k4{animation-range:cover 41% cover 49%}
  .k5{animation-range:cover 44% cover 52%}
  .kern{animation:kernop linear both;animation-timeline:--film;animation-range:cover 48% cover 55%}
  .knoop .knoop-label{animation:lbl linear both;animation-timeline:--film}
  .k1 .knoop-label{animation-range:cover 36% cover 41%}
  .k2 .knoop-label{animation-range:cover 39% cover 44%}
  .k3 .knoop-label{animation-range:cover 42% cover 47%}
  .k4 .knoop-label{animation-range:cover 45% cover 50%}
  .k5 .knoop-label{animation-range:cover 48% cover 53%}
  .kern-label{animation:lbl linear both;animation-timeline:--film;animation-range:cover 51% cover 56%}
  .spaak{animation:trek linear both;animation-timeline:--film}
  .s1{animation-range:cover 54% cover 58%}
  .s2{animation-range:cover 55% cover 59%}
  .s3{animation-range:cover 56% cover 60%}
  .s4{animation-range:cover 57% cover 61%}
  .s5{animation-range:cover 58% cover 62%}
  .baan{animation:sluit linear both;animation-timeline:--film;animation-range:cover 58% cover 66%}
}
/* Zonder scroll-driven animations: kortere hero en opbouw op tijd (site.js
   zet .speel op de montage). */
@supports not (animation-timeline: view()) {
  .film{height:auto}
  .film-plak{position:relative;height:100dvh}
  .montage.speel .knoop{animation:dok 1.1s var(--ease) forwards}
  .montage.speel .k1{animation-delay:.1s}.montage.speel .k2{animation-delay:.32s}
  .montage.speel .k3{animation-delay:.54s}.montage.speel .k4{animation-delay:.76s}
  .montage.speel .k5{animation-delay:.98s}
  .montage.speel .kern{animation:kernop 1s var(--ease) 1.3s forwards}
  .montage.speel .knoop-label{animation:lbl .5s var(--ease) forwards}
  .montage.speel .k1 .knoop-label{animation-delay:.5s}
  .montage.speel .k2 .knoop-label{animation-delay:.72s}
  .montage.speel .k3 .knoop-label{animation-delay:.94s}
  .montage.speel .k4 .knoop-label{animation-delay:1.16s}
  .montage.speel .k5 .knoop-label{animation-delay:1.38s}
  .montage.speel .kern-label{animation:lbl .5s var(--ease) 1.9s forwards}
  .montage.speel .spaak{animation:trek .7s var(--ease) forwards}
  .montage.speel .s1{animation-delay:1.9s}.montage.speel .s2{animation-delay:2s}
  .montage.speel .s3{animation-delay:2.1s}.montage.speel .s4{animation-delay:2.2s}
  .montage.speel .s5{animation-delay:2.3s}
  .montage.speel .baan{animation:sluit 1.4s var(--ease) 2.4s forwards}
}
@keyframes dok{
  0%{opacity:.34;transform:translate(var(--dx),var(--dy)) scale(1.22)}
  100%{opacity:1;transform:translate(0,0) scale(1)}
}
@keyframes kernop{
  from{opacity:.34;transform:scale(.55)}
  to{opacity:1;transform:scale(1)}
}
@keyframes lbl{to{opacity:1}}
@keyframes trek{to{stroke-dashoffset:0}}
@keyframes sluit{to{stroke-dashoffset:0}}

.film-copy{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 0 clamp(44px,7vh,88px)}
.film-copy::before{
  content:"";position:absolute;left:0;right:0;bottom:0;top:-46%;z-index:-1;pointer-events:none;
  background:linear-gradient(to top, rgba(7,7,8,.95) 16%, rgba(7,7,8,.72) 48%, rgba(7,7,8,0) 100%);
}
.film-copy .wrap{display:grid;gap:20px}
.merk-regel{display:flex;align-items:center;gap:11px;color:var(--gold)}
.merk-regel span{font-size:.8rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--text-2)}
.merk-regel .merkteken{width:26px;height:26px}
.film-copy h1{max-width:16ch}
.cta-acties{display:flex;gap:12px;flex-wrap:wrap}

/* ---------------- Secties ---------------- */
.sectie{padding:clamp(72px,9vw,128px) 0;position:relative}
.band{background:#0D0D0E;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-kop{max-width:72ch}

.pagina-kop{
  padding:clamp(64px,8vw,110px) 0 0;position:relative;
}
.pagina-kop::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 80% 0%, rgba(201,160,99,.09), transparent 60%);
}
.pagina-kop .wrap{position:relative}

/* ---------------- Sporen ---------------- */
.sporen-sectie{border-top:1px solid var(--line)}
.sporen{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.spoor{border:1px solid var(--line-2);border-radius:var(--r2);background:var(--ink-2);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .3s var(--ease)}
.spoor:hover{border-color:var(--gold-lo)}
.spoor-kop{display:block;text-decoration:none;padding:30px 30px 24px;border-bottom:1px solid var(--line)}
.spoor-kop h3{font-size:1.45rem;letter-spacing:-.025em;color:var(--gold-hi)}
.spoor-kop p{margin-top:10px;color:var(--text-2);font-size:.95rem;line-height:1.6}
.spoor-pijl{display:inline-block;margin-top:16px;font-size:.88rem;font-weight:600;color:var(--gold)}
.spoor-kop:hover .spoor-pijl{color:var(--gold-hi)}
.spoor-subs{display:grid}
.spoor-sub{
  display:grid;gap:4px;text-decoration:none;padding:16px 30px;
  border-bottom:1px solid var(--line);transition:background .2s var(--ease);
}
.spoor-sub:last-child{border-bottom:none}
.spoor-sub:hover{background:var(--ink-3)}
.spoor-sub b{font-size:.95rem;font-weight:600}
.spoor-sub span{font-size:.86rem;color:var(--text-2)}

/* ---------------- Dienstkaarten op spoorpagina's ---------------- */
.dienstkaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Vier diensten onder één spoor: twee bij twee leest rustiger dan vier
   smalle kolommen naast elkaar. */
.dienstkaarten.vier{grid-template-columns:repeat(2,1fr)}
.dienstkaart{
  border:1px solid var(--line-2);border-radius:var(--r2);background:var(--ink-2);
  padding:30px;text-decoration:none;display:flex;flex-direction:column;gap:12px;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .15s var(--ease);
}
.dienstkaart:hover{border-color:var(--gold);background:var(--ink-3);transform:translateY(-2px)}
.dienstkaart h2{font-size:1.2rem;letter-spacing:-.02em}
.dienstkaart p{color:var(--text-2);font-size:.92rem;line-height:1.62}
.kaart-pijl{margin-top:auto;font-size:.88rem;font-weight:600;color:var(--gold-hi)}
.ander-spoor{margin-top:34px;color:var(--text-2);font-size:.95rem}

/* ---------------- Case ---------------- */
.case-sectie{border-top:1px solid var(--line)}
.case-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.ticks{margin-top:26px;display:grid;gap:11px}
.ticks li{position:relative;padding-left:24px;color:var(--text-2);font-size:.95rem;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--gold)}
.case-grid .btn{margin-top:28px}

/* Abstracte weergave van de case in de IJsseldal-kleuren: warm papier,
   klei en het diepe blauwgroen. Geen namaakschermafbeelding. */
.case-beeld{display:flex;justify-content:center}

/* ---------------- Scan-teaser en scanpagina ---------------- */
.scan-teaser{background:radial-gradient(70% 100% at 100% 0%, rgba(201,160,99,.1), transparent 60%),#0D0D0E;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scan-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.scan-grid .btn{margin-top:26px}
.scan-punten{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scan-punten span{
  border:1px solid var(--line-2);border-radius:var(--r);padding:18px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-hi);text-align:center;background:var(--ink-2);
}

.scanform{
  max-width:560px;display:grid;gap:18px;
  border:1px solid var(--line-2);border-radius:var(--r2);background:var(--ink-2);padding:32px;
}
.veld{display:grid;gap:8px}
label{font-size:.78rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
input[type=text],textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--text);
  background:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r);
  padding:13px 15px;min-height:48px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
input[type=text]::placeholder,textarea::placeholder{color:#807C75}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--gold);background:var(--ink-4)}
textarea{resize:vertical;line-height:1.5;min-height:0}
.hint{font-size:.8rem;color:var(--muted)}
.fout{font-size:.85rem;color:#E9A17C}

.scan-twee{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.scan-groepen{margin-top:34px;border:1px solid var(--line-2);border-radius:var(--r2);background:var(--ink-2);overflow:hidden}
.scan-groep{border-bottom:1px solid var(--line);padding:18px 26px}
.scan-groep:last-child{border-bottom:none}
.scan-groep h3{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:12px;
}
.scan-punt{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;padding:5px 0;font-size:.9rem;color:var(--text-2)}
.scan-punt em{
  font-style:normal;width:20px;height:20px;border:1px solid var(--gold-lo);border-radius:2px;
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:.66rem;
  font-family:var(--mono);margin-top:1px;
}
.scan-rapport{
  border:1px solid var(--line-2);border-radius:var(--r2);padding:28px;
  background:radial-gradient(90% 60% at 100% 0%, rgba(201,160,99,.1), var(--ink-2));
  position:sticky;top:92px;
}
.scan-rapport h2{font-size:1.1rem}
.rapport-lijst{margin-top:18px;border-top:1px solid var(--line)}
.rapport-lijst div{padding:13px 0;border-bottom:1px solid var(--line);display:grid;gap:3px}
.rapport-lijst b{font-size:.9rem;font-weight:600}
.rapport-lijst span{font-size:.83rem;color:var(--muted);line-height:1.55}

/* ---------------- Telefoongesprek (AI-pagina) ---------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split-boven{align-items:start}
.telefoon{border:1px solid var(--line-2);border-radius:var(--r2);overflow:hidden;background:var(--ink-2);
  box-shadow:0 28px 80px rgba(0,0,0,.5)}
.tel-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 20px;border-bottom:1px solid var(--line);background:var(--ink-3)}
.tel-tijd{font-family:var(--mono);font-size:1.2rem;letter-spacing:.02em}
.tel-staat{font-family:var(--mono);font-size:.72rem;color:var(--gold);letter-spacing:.09em;text-transform:uppercase}
.tel-log{padding:20px;display:grid;gap:12px}
.regel{max-width:86%;padding:11px 15px;border-radius:var(--r2);font-size:.9rem;line-height:1.5}
.regel-klant{background:var(--ink-4);border:1px solid var(--line);justify-self:start}
.regel-ai{background:rgba(201,160,99,.12);border:1px solid rgba(201,160,99,.32);justify-self:end}
.regel-sys{justify-self:center;max-width:100%;background:none;border:none;padding:2px 0;
  font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.06em}

/* ---------------- Prijzen ---------------- */
.prijsrij{margin-top:40px;display:grid;gap:14px}
.prijsrij.kolommen-3{grid-template-columns:repeat(3,1fr)}
.prijsrij.kolommen-4{grid-template-columns:repeat(4,1fr)}
.prijskaart{
  position:relative;border:1px solid var(--line);border-radius:var(--r2);background:var(--ink-2);
  padding:26px;display:flex;flex-direction:column;
  transition:border-color .25s var(--ease),transform .15s var(--ease);
}
.prijskaart:hover{border-color:var(--line-2);transform:translateY(-2px)}
.prijskaart.top{border-color:var(--gold-lo);
  background:radial-gradient(100% 120% at 50% 0%, rgba(201,160,99,.1), var(--ink-2))}
.prijstag{
  position:absolute;top:-11px;left:22px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold);color:var(--on-gold);padding:4px 10px;border-radius:2px;font-weight:500;
}
.prijskaart h3{font-size:1.05rem}
.prijs{margin-top:14px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.prijs b{font-family:var(--mono);font-size:1.7rem;font-weight:500;color:var(--gold-hi);letter-spacing:-.02em}
.prijs span{font-size:.82rem;color:var(--text-2)}
.prijstekst{margin-top:12px;font-size:.87rem;color:var(--text-2);line-height:1.62}
.prijs-actie{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ---------------- Werkwijze ---------------- */
.stappen{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.stap{padding:34px 36px 34px 0;border-bottom:1px solid var(--line);position:relative}
.stap:nth-child(even){padding-left:36px;border-left:1px solid var(--line)}
.stapnr{
  font-family:var(--mono);font-size:.8rem;color:var(--gold);
  border:1px solid var(--gold-lo);border-radius:2px;width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.stap h2{font-size:1.15rem}
.stap p{margin-top:10px;color:var(--text-2);font-size:.93rem;line-height:1.66;max-width:46ch}

/* ---------------- Wat wij niet doen ---------------- */
.creed-sectie{border-top:1px solid var(--line)}
.creed-lijst{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.creed-item{padding:28px 34px 28px 0;border-top:1px solid var(--line)}
.creed-item:nth-child(even){padding-left:34px;border-left:1px solid var(--line)}
.creed-item h3{font-size:1.1rem;color:var(--gold-hi)}
.creed-item p{margin-top:11px;color:var(--text-2);font-size:.93rem;line-height:1.66;max-width:46ch}

/* ---------------- Slot-CTA ---------------- */
.cta-slot{
  border-top:1px solid var(--line);
  background:radial-gradient(60% 90% at 50% 100%, rgba(201,160,99,.12), transparent 65%);
}
.cta-inhoud{display:grid;gap:20px;justify-items:start}

/* ---------------- Contact ---------------- */
.onderteken{font-size:.98rem;border-left:1px solid var(--gold);padding-left:18px;line-height:1.6}
.onderteken span{color:var(--muted);font-size:.88rem}
.contact-direct{margin-top:28px;display:grid;gap:9px;font-size:.95rem}
.contact-direct a{color:var(--gold-hi);text-decoration:none}
.contact-direct a:hover{text-decoration:underline}
.contactform{display:grid;gap:18px;border:1px solid var(--line-2);border-radius:var(--r2);background:var(--ink-2);padding:32px}
.contactform .btn{width:100%}

/* ---------------- Privacypagina ---------------- */
.privacy-tekst{max-width:68ch}
.privacy-tekst h2{font-size:1.1rem;margin-top:36px}
.privacy-tekst h2:first-child{margin-top:0}
.privacy-tekst p{margin-top:12px;color:var(--text-2);line-height:1.7}

/* ---------------- Kruimelpad ---------------- */
.kruimels{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.82rem;color:var(--muted);margin-bottom:20px;
}
.kruimels a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;min-height:26px}
.kruimels a:hover{color:var(--gold-hi)}
.kruimels [aria-current]{color:var(--gold-hi)}

/* ---------------- Persoon achter Capital BB ---------------- */
.persoon-sectie{border-top:1px solid var(--line);
  background:radial-gradient(60% 90% at 0% 50%, rgba(201,160,99,.08), transparent 60%)}
.persoon-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:start}
.persoon-teken{color:var(--gold);opacity:.9}
.persoon-teken .merkteken{width:104px;height:104px}
.persoon-visie{margin-top:18px;color:var(--text-2);font-size:.97rem;line-height:1.7;max-width:60ch}
.persoon-naam{
  margin-top:26px;font-size:1.02rem;font-weight:600;
  border-left:1px solid var(--gold);padding-left:16px;line-height:1.55;
}
.persoon-naam span{display:block;font-weight:400;font-size:.85rem;color:var(--muted)}
.persoon-kort{margin-top:22px;color:var(--text-2);font-size:.94rem;line-height:1.68;max-width:44ch}

/* ---------------- FAQ ---------------- */
.faq-sectie{border-top:1px solid var(--line)}
.faq-lijst{margin-top:40px;max-width:820px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:20px 2px;font-size:1.02rem;font-weight:600;min-height:44px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-family:var(--mono);color:var(--gold);font-size:1.2rem;
  flex:0 0 auto;transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--gold-hi)}
.faq-item p{padding:0 2px 22px;color:var(--text-2);font-size:.94rem;line-height:1.7;max-width:64ch}

/* ---------------- Keuzehulp ---------------- */
.keuze-sectie{padding-bottom:0}
.keuzehulp{margin-top:36px;border:1px solid var(--line-2);border-radius:var(--r2);overflow:hidden}
.keuze-rij{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:17px 24px;min-height:52px;text-decoration:none;
  border-bottom:1px solid var(--line);transition:background .2s var(--ease);
}
.keuze-rij:last-child{border-bottom:none}
.keuze-rij:hover{background:var(--ink-3)}
.keuze-rij span{color:var(--text-2);font-size:.96rem}
.keuze-rij b{color:var(--gold-hi);font-size:.92rem;font-weight:600;white-space:nowrap}

/* ---------------- Case: probleem, oplossing, impact ---------------- */
.case-poi{margin-top:26px;display:grid;gap:22px}
.case-poi.kolommen{grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
.case-poi h3{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);font-weight:400;
}
.case-poi p{margin-top:9px;color:var(--text-2);font-size:.93rem;line-height:1.68}
.case-poi .ticks{margin-top:12px}

/* ---------------- Gerenderde ontwerp-previews ----------------
   Geen screenshots en geen AI-beelden: echte weergaven van de ontwerpen,
   gerenderd met generieke teksten zodat geen bedrijf herkenbaar is. */
.venster-mini{
  border:1px solid var(--line-2);border-radius:var(--r2);overflow:hidden;
  background:var(--ink-2);box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.vm-bar{display:flex;align-items:center;gap:10px;height:32px;padding:0 11px;
        background:var(--ink-3);border-bottom:1px solid var(--line)}
.vm-stippen{display:flex;gap:5px}
.vm-stippen i{width:7px;height:7px;border-radius:50%;background:#2C2C2E;display:block}
.vm-url{font-family:var(--mono);font-size:.66rem;color:var(--muted);flex:1;text-align:center;
        background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:2px 10px}

/* IJsseldal: de echte tokens van het opgeleverde ontwerp. */
.ijs{background:#f6f1e8;color:#1c222b;font-size:11px;line-height:1.5}
.ijs-nav{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #ded4c3}
.ijs-nav b{font-family:Georgia,serif;font-size:11.5px;margin-right:auto}
.ijs-nav span{color:#59636f;font-size:9.5px}
.ijs-nav em{font-style:normal;background:#a2482a;color:#fff;font-size:9px;font-weight:600;
            padding:4px 8px;border-radius:2px}
.ijs-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;padding:14px}
.ijs-tekst small{display:block;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#59636f}
.ijs-tekst strong{display:block;font-family:Georgia,serif;font-weight:600;font-size:16.5px;
                  line-height:1.15;margin-top:5px;letter-spacing:-.01em}
.ijs-tekst p{margin-top:6px;color:#4a5560;font-size:9.5px;max-width:30ch}
.ijs-tekst em{display:inline-block;font-style:normal;background:#a2482a;color:#fff;
              font-size:9px;font-weight:600;padding:5px 10px;border-radius:2px;margin-top:8px}
.ijs-portret{border-radius:3px;background:linear-gradient(150deg,#ece3d4,#dfd3bd 60%,#cbbda3);
             min-height:74px;box-shadow:0 8px 18px rgba(28,34,43,.14)}
.ijs-band{background:#1f3a45;color:#eef3f4;font-family:Georgia,serif;font-size:11px;
          padding:9px 14px}
.ijs-rij{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ded4c3}
.ijs-rij span{padding:9px 12px;border-right:1px solid #ded4c3;font-family:Georgia,serif;
              font-size:9.5px;font-weight:600}
.ijs-rij span:last-child{border-right:none}

/* Richting-raster: drie demoprofielen. */
.richting-raster{margin-top:40px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.richting{margin:0;display:grid;gap:12px}
.richting figcaption{font-size:.83rem;color:var(--muted);line-height:1.55}


/* ---------------- Schermafbeeldingen in het venster ---------------- */
.vm-schot{display:block;width:100%;height:auto}

/* ---------------- Laptop met scrollende site ----------------
   Een paginahoge opname van de echte site schuift langzaam door het
   scherm; bij zweven pauzeert hij, bij verminderde beweging staat hij stil. */
.case-jezz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:56px;align-items:center}
.laptop{display:grid;gap:0;justify-items:center}
.bureau .laptop{width:100%}
.laptop-scherm{
  width:100%;aspect-ratio:16/10;overflow:hidden;position:relative;
  background:#0E0E0F;border:10px solid #1B1B1D;border-bottom-width:14px;
  border-radius:14px 14px 0 0;
  box-shadow:0 34px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
}
.laptop-scherm::before{
  content:"";position:absolute;left:50%;top:3px;width:5px;height:5px;border-radius:50%;
  transform:translateX(-50%);background:#2E2E31;z-index:2;
}
.laptop-scroll img{display:block;width:100%;height:auto;animation:jezzscroll 75s ease-in-out infinite alternate}
.laptop:hover .laptop-scroll img{animation-play-state:paused}
@keyframes jezzscroll{
  0%,6%{transform:translateY(0)}
  94%,100%{transform:translateY(calc(-100% + 100cqh))}
}
@supports (container-type:size){ .laptop-scherm{container-type:size} }
@supports not (container-type:size){
  @keyframes jezzscroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(-95%)}}
}
.laptop-voet{
  width:112%;height:13px;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#232326,#151517);
  box-shadow:0 14px 30px rgba(0,0,0,.4);position:relative;
}
.laptop-voet::before{
  content:"";position:absolute;left:50%;top:0;width:14%;height:5px;
  transform:translateX(-50%);border-radius:0 0 6px 6px;background:#0D0D0E;
}

/* ---------------- Bureauopstelling: beeldscherm, laptop, telefoon ----------------
   Drie apparaten, asymmetrisch: het beeldscherm groot links, laptop en
   telefoon gestapeld rechts. Elk scherm scrolt zijn eigen volledige pagina
   met een eigen tempo en startpunt, zodat ze nooit synchroon lopen. */
.bureau{
  margin-top:44px;display:grid;gap:28px 40px;align-items:end;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  grid-template-areas:"monitor laptop" "monitor telefoon";
}
.apparaat{margin:0;display:grid;justify-items:center;gap:0;min-width:0}
.apparaat figcaption{margin-top:16px;font-size:.83rem;color:var(--muted);line-height:1.55;text-align:center;max-width:40ch}
.apparaat.monitor{grid-area:monitor}
.apparaat.laptop{grid-area:laptop}
.apparaat.telefoon{grid-area:telefoon}

.scrol{overflow:hidden;position:relative;container-type:size}
.scrol img{display:block;width:100%;height:auto;
  animation:zelfscroll var(--duur,60s) ease-in-out var(--start,0s) infinite alternate}
.apparaat:hover .scrol img{animation-play-state:paused}
@keyframes zelfscroll{
  0%,5%{transform:translateY(0)}
  95%,100%{transform:translateY(calc(-100% + 100cqh))}
}

.monitor-scherm{
  width:100%;aspect-ratio:16/9;background:#0E0E0F;
  border:11px solid #1B1B1D;border-radius:10px;
  box-shadow:0 34px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
}
.monitor-hals{width:11%;height:44px;background:linear-gradient(180deg,#1E1E21,#141416)}
.monitor-voet{width:40%;height:11px;border-radius:6px;background:linear-gradient(180deg,#232326,#151517);
  box-shadow:0 12px 26px rgba(0,0,0,.4)}

.telefoon{width:min(100%,230px);justify-self:center}
.telefoon-scherm{
  width:100%;aspect-ratio:9/19.5;background:#0E0E0F;
  border:9px solid #1B1B1D;border-radius:34px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
}
.telefoon-scherm::before{
  content:"";position:absolute;left:50%;top:8px;width:34%;height:18px;border-radius:10px;
  transform:translateX(-50%);background:#1B1B1D;z-index:2;
}

/* ---------------- Demoraster en casenoten ---------------- */
.demo-raster{
  margin-top:40px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.demo-tegel{
  border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);
  padding:17px 18px;display:grid;gap:6px;
}
.demo-tegel b{font-size:.94rem;font-weight:600}
.demo-tegel span{font-size:.85rem;color:var(--text-2);line-height:1.55}
.case-link{margin-top:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.case-noot{font-size:.85rem;color:var(--muted);line-height:1.65;max-width:56ch;display:block;margin-top:14px}
.case-link .case-noot{margin-top:0}

/* ---------------- Verwante routes ---------------- */
.verwant{padding:0 0 8px}
.verwant-regel{color:var(--muted);font-size:.92rem;line-height:1.7}

/* ---------------- Succesmelding formulieren ---------------- */
.succes{
  font-size:.92rem;line-height:1.65;color:var(--gold-hi);
  border:1px solid var(--gold-lo);border-radius:var(--r);
  background:rgba(201,160,99,.08);padding:14px 16px;
}

/* ---------------- Voettekst ---------------- */
.voet{border-top:1px solid var(--line);padding:56px 0 96px;background:#0A0A0B}
.voet-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;align-items:start}
.voet-woord{display:block;color:var(--gold)}
.voet-regel{margin-top:12px;color:var(--muted);font-size:.9rem;max-width:36ch;line-height:1.65}
.voet-kolom{display:grid;gap:8px}
.voet-kolom h2{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:6px;
}
.voet-kolom a{color:var(--text-2);text-decoration:none;font-size:.88rem;
  display:flex;align-items:center;min-height:26px}
.voet-kolom a:hover{color:var(--gold-hi)}
.voet-kolom span{color:var(--muted);font-size:.88rem;display:flex;align-items:center;min-height:26px}
.voet-todo{
  border:1px dashed var(--gold-lo);border-radius:var(--r);padding:13px 15px;
  font-family:var(--mono);font-size:.74rem;color:var(--gold);line-height:1.6;
}

/* ---------------- Zwevende WhatsApp-knop ----------------
   Merkeigen in plaats van WhatsApp-groen: donker met gouden rand. Verschijnt
   pas voorbij de hero, zodat de opening schoon blijft. */
.wa-bubbel{
  position:fixed;right:20px;bottom:20px;z-index:49;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-2);border:1px solid var(--gold);color:var(--gold-hi);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),
             background .25s var(--ease),color .25s var(--ease);
}
.wa-bubbel.zichtbaar{opacity:1;transform:none;pointer-events:auto}
.wa-bubbel svg{width:26px;height:26px}
.wa-bubbel:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}

/* ---------------- Vaste actiebalk op mobiel ---------------- */
.actiebalk{display:none}


/* =========================================================================
   Inhoudsblokken op de dienst- en landingspagina's.
   Citeerbaar antwoordblok, wat wij bouwen, traject, vergelijking, branches.
   ========================================================================= */

/* Het antwoordblok: de vraag als kop, het antwoord er direct onder in een
   alinea die ook los van de pagina klopt. Dat is hoe AI-systemen citeren en
   hoe een haastige bezoeker leest. */
.antwoord-sectie{border-top:1px solid var(--line)}
.antwoord-sectie .wrap{max-width:78ch}
.antwoord{
  margin-top:22px;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.72;
  color:var(--text);border-left:2px solid var(--gold);padding-left:clamp(18px,2.4vw,28px);
}
.antwoord-extra{margin-top:16px;color:var(--text-2);font-size:.95rem;line-height:1.7;padding-left:clamp(18px,2.4vw,28px)}

/* Twee tekstkolommen naast elkaar: voor wie / het probleem eronder. */
.split-tekst{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
.split-tekst .ticks{margin-top:22px}
.split-tekst .lede{margin-top:22px}

/* Wat Capital BB bouwt: vier blokken met een gouden nummerloze streep. */
.bouwt-lijst{margin-top:clamp(32px,4vw,52px);display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.bouwt-item{background:var(--ink);padding:clamp(26px,3vw,38px)}
.band .bouwt-item{background:#0D0D0E}
.bouwt-item h3{font-size:1.06rem;letter-spacing:-.02em}
.bouwt-item h3::before{
  content:"";display:block;width:26px;height:2px;background:var(--gold);margin-bottom:16px;
}
.bouwt-item p{margin-top:12px;color:var(--text-2);font-size:.94rem;line-height:1.7}

/* Lange opsomming in twee kolommen, zodat hij niet als een muur leest. */
.kolomlijst{columns:2;column-gap:36px}
.kolomlijst li{break-inside:avoid}

/* Traject: genummerde stappen, compacter dan de grote .stappen op /werkwijze/. */
.stapjes{margin-top:clamp(30px,4vw,46px);display:grid;gap:1px;background:var(--line);max-width:92ch}
.stapje{background:var(--ink);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:22px clamp(14px,2vw,26px)}
.band .stapje{background:#0D0D0E}
.stapje-nr{
  font-family:var(--mono);font-size:.78rem;color:var(--gold);
  border:1px solid var(--line-2);border-radius:50%;
  width:34px;height:34px;display:grid;place-items:center;
}
.stapje b{display:block;font-weight:600;font-size:1rem;letter-spacing:-.015em}
.stapje span{display:block;margin-top:7px;color:var(--text-2);font-size:.93rem;line-height:1.68}

/* Vergelijkingstabel. Op smalle schermen scrollt hij in zijn eigen bak in
   plaats van de hele pagina breed te maken. */
.tabelrol{margin-top:clamp(28px,3.5vw,44px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.vergelijk{width:100%;min-width:520px;border-collapse:collapse;text-align:left}
.vergelijk th,.vergelijk td{padding:18px 22px;border-bottom:1px solid var(--line);vertical-align:top}
.vergelijk thead th{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:400;border-bottom:1px solid var(--line-2);
}
.vergelijk tbody th{width:34%;font-weight:600;font-size:.97rem;color:var(--text);letter-spacing:-.015em}
.vergelijk tbody td{color:var(--text-2);font-size:.93rem;line-height:1.68}
.vergelijk tbody tr:last-child th,.vergelijk tbody tr:last-child td{border-bottom:none}
.vergelijk tbody tr:last-child th{color:var(--gold-hi)}

/* Branchevoorbeelden. */
.branches{margin-top:clamp(30px,4vw,46px);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.branche{background:var(--ink);padding:clamp(22px,2.6vw,30px)}
.band .branche{background:#0D0D0E}
.branche h3{font-size:.97rem;letter-spacing:-.015em}
.branche p{margin-top:10px;color:var(--text-2);font-size:.9rem;line-height:1.66}

/* Losse regel met vervolgroutes onder een sectie. */
.route-regel{margin-top:26px;color:var(--text-2);font-size:.95rem;line-height:1.8}

/* Landingspagina's: kort lijstje met wie het wel en niet is. */
.past{margin-top:clamp(30px,4vw,46px);display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.past-kolom{background:var(--ink);padding:clamp(24px,3vw,34px)}
.band .past-kolom{background:#0D0D0E}
.past-kolom h3{font-size:1.02rem}
.past-kolom ul{margin-top:18px;display:grid;gap:11px}
.past-kolom li{color:var(--text-2);font-size:.93rem;line-height:1.6;padding-left:24px;position:relative}
.past-wel li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:6px;border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg)}
.past-niet li::before{content:"";position:absolute;left:1px;top:.72em;width:11px;height:1.6px;background:var(--muted)}


/* WhatsApp als alternatieve route onder de CTA's. Bewust een pil in plaats
   van een derde .btn: het is een andere manier om contact te leggen, geen
   derde call to action die met de twee erboven concurreert. */
.cta-direct{margin-top:22px;color:var(--text-2);font-size:.93rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center}
.cta-inhoud .cta-direct{justify-content:center}
.form-direct{justify-content:flex-start;margin-top:20px}
.wa-knop{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;min-height:38px;
  border:1px solid var(--line-2);border-radius:999px;
  color:var(--text);text-decoration:none;font-size:.9rem;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.wa-knop svg{width:18px;height:18px;flex:none;color:var(--gold)}
.wa-knop:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,160,99,.07)}
.wa-knop:hover svg{color:var(--gold-hi)}

/* Honeypot: buiten beeld, maar niet display:none. Sommige bots slaan
   verborgen velden over; deze vullen ze wel in. */
.vh-veld{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}


/* Cookiebanner. Onderin, niet als scherm-vullende muur: de site blijft
   leesbaar terwijl de vraag openstaat. Weigeren en accepteren staan naast
   elkaar en zijn even groot; dat is niet alleen netjes, het is wettelijk
   vereist. Zolang de balk openstaat wijkt de mobiele actiebalk. */
.cookiebalk{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 24px;padding:18px clamp(20px,4vw,40px) calc(18px + env(safe-area-inset-bottom));
  background:rgba(13,13,14,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
}
.cookiebalk-tekst{max-width:74ch;color:var(--text-2);font-size:.9rem;line-height:1.6}
.cookiebalk-knoppen{display:flex;gap:10px;flex:none}
.cookiebalk-knoppen .btn{min-height:42px;flex:1 0 auto}
body.cookie-open .actiebalk,body.cookie-open .wa-bubbel{display:none}
@media (max-width:820px){
  .cookiebalk{flex-direction:column;align-items:stretch;gap:14px}
  .cookiebalk-knoppen .btn{flex:1}
}


/* Statusvlag bij een case. Het verschil tussen betaald klantwerk en een
   ongevraagd gebouwde demo moet je kunnen zien zonder de kleine letters te
   lezen; anders suggereert de pagina meer dan er is. */
.casevlag{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin-top:18px;padding:12px 16px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--ink-2);
  font-size:.86rem;line-height:1.55;
}
.casevlag b{font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.casevlag span{color:var(--muted);flex:1 1 20ch}
.casevlag.vlag-klantcase{border-left:3px solid var(--gold)}
.casevlag.vlag-klantcase b{color:var(--gold-hi)}
.casevlag.vlag-eigen-merk{border-left:3px solid var(--text-2)}
.casevlag.vlag-eigen-merk b{color:var(--text)}
.casevlag.vlag-demo{border-left:3px solid var(--muted)}
.casevlag.vlag-demo b{color:var(--text-2)}

.legenda{margin-top:26px;display:grid;gap:1px;background:var(--line);max-width:92ch}
.legenda div{background:#0D0D0E;padding:16px 20px}
.legenda b{display:block;font-size:.95rem}
.legenda span{display:block;margin-top:5px;color:var(--text-2);font-size:.9rem;line-height:1.6}


/* De pagina over Bjorn. Zolang er geen echte foto is, staat er het merkteken
   in plaats van een gegenereerd portret: een verzonnen gezicht bij een echt
   persoon hoort hier niet. */
.wie-grid{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.wie-portret{margin:0;border:1px solid var(--line-2);border-radius:var(--r2);overflow:hidden;background:var(--ink-2)}
.wie-portret img{width:100%;height:auto;display:block}
.wie-portret.leeg{display:grid;place-items:center;aspect-ratio:4/5;color:var(--gold)}
.wie-portret.leeg .merkteken{width:96px;height:96px;opacity:.5}
.wie-blokken{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.wie-blok{background:#0D0D0E;padding:clamp(24px,3vw,34px)}
.wie-blok h2{font-size:1.06rem;letter-spacing:-.02em}
.wie-blok h2::before{content:"";display:block;width:26px;height:2px;background:var(--gold);margin-bottom:16px}
.wie-blok p{margin-top:12px;color:var(--text-2);font-size:.94rem;line-height:1.7}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1080px){
  .split,.case-grid,.scan-grid,.scan-twee{grid-template-columns:1fr;gap:44px}
  .branches{grid-template-columns:1fr 1fr}
  .scan-rapport{position:static}
  .prijsrij.kolommen-4{grid-template-columns:repeat(2,1fr)}
  .sporen{grid-template-columns:1fr}
  .dienstkaarten,.dienstkaarten.vier{grid-template-columns:1fr}
}
@media (max-width:820px){
  .wrap{padding:0 20px}
  .nav{padding:0 20px;gap:14px}
  .nav-links,.nav-cta{display:none}
  .nav-knop{
    display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;
    width:44px;height:44px;padding:10px;background:transparent;border:1px solid var(--line-2);
    border-radius:var(--r);cursor:pointer;
  }
  .nav-knop span{display:block;height:2px;background:var(--text);border-radius:1px;transition:transform .25s var(--ease),opacity .25s var(--ease)}
  .nav-knop[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-knop[aria-expanded=true] span:nth-child(2){opacity:0}
  .nav-knop[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-menu{
    display:grid;position:fixed;top:68px;left:0;right:0;z-index:55;
    background:rgba(11,11,12,.97);border-bottom:1px solid var(--line-2);
    padding:10px 20px 18px;gap:2px;
  }
  .nav-menu[hidden]{display:none}
  .nav-menu a{
    color:var(--text);text-decoration:none;font-size:1rem;padding:13px 6px;min-height:44px;
    display:flex;align-items:center;border-bottom:1px solid var(--line);
  }
  .nav-menu a:last-child{border-bottom:none;color:var(--gold-hi)}

  /* Knoppen mogen op een telefoon afbreken. Met white-space:nowrap duwde een
     lang label de hele pagina breder dan het scherm; dat gebeurde op
     /online-marketing/ en zou bij elk nieuw lang label terugkomen. */
  /* Keuzerij: vraag en antwoord onder elkaar. Naast elkaar met een
     nowrap-label duwde de langste productnaam de pagina open. */
  .keuze-rij{flex-direction:column;align-items:flex-start;gap:6px;padding:16px 20px}
  .keuze-rij b{white-space:normal}

  /* Kleine labels waren op een telefoon net te klein om prettig te lezen. */
  .eyebrow,.prijstag,.vergelijk thead th{font-size:.75rem}

  .btn{white-space:normal;text-align:center;max-width:100%}
  .cta-acties{width:100%}
  .cta-acties .btn{flex:1 1 100%}

  .prijsrij.kolommen-3,.prijsrij.kolommen-4{grid-template-columns:1fr}
  .split-tekst,.bouwt-lijst,.branches,.past,.wie-blokken{grid-template-columns:1fr}
  .wie-grid{grid-template-columns:1fr}
  .wie-portret{max-width:260px}
  .kolomlijst{columns:1}
  .vergelijk{min-width:0}
  .vergelijk th,.vergelijk td{display:block;padding:0}
  .vergelijk thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .vergelijk tbody tr{display:block;padding:20px 0;border-bottom:1px solid var(--line)}
  .vergelijk tbody th{width:auto;margin-bottom:8px}
  .vergelijk tbody tr:last-child{border-bottom:none}
  .stappen,.creed-lijst{grid-template-columns:1fr}
  .stap,.stap:nth-child(even),.creed-item,.creed-item:nth-child(even){padding:24px 0;border-left:none}
  .voet-grid{grid-template-columns:1fr 1fr}
  .persoon-grid{grid-template-columns:1fr;gap:24px}
  .persoon-teken .merkteken{width:72px;height:72px}
  .case-poi.kolommen{grid-template-columns:1fr}
  .richting-raster{grid-template-columns:1fr}
  .case-jezz{grid-template-columns:1fr;gap:36px}
  .bureau{grid-template-columns:1fr;grid-template-areas:"monitor" "laptop" "telefoon";gap:40px}
  .telefoon{width:min(100%,250px)}
  .laptop-voet{width:100%}
  .scan-punten{grid-template-columns:1fr 1fr}
  .film{height:220vh}

  /* Vaste actiebalk: op elke pagina één tik verwijderd van de twee acties. */
  .actiebalk{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(11,11,12,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line-2);
  }
  .actiebalk .btn{min-height:46px;font-size:.88rem;padding:10px 12px}
  .wa-bubbel{right:14px;bottom:calc(84px + env(safe-area-inset-bottom));width:50px;height:50px}
}
@media (max-width:480px){
  .voet-grid{grid-template-columns:1fr}
  .scanform,.contactform{padding:22px}
}

/* =========================================================================
   Verminderde beweging: alles staat direct op zijn plek.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .film{height:auto}
  .film-plak{position:relative}
  .knoop,.kern{opacity:1;transform:none;animation:none !important}
  .knoop-label,.kern-label{opacity:1;animation:none !important}
  .spaak,.baan{stroke-dashoffset:0;animation:none !important}
}
/* Version 2: realistic workspace / editorial design system. */
:root{--ink:#090d0e;--ink-2:#111719;--ink-3:#1b2326;--text:#f8f8f5;--text-2:#b8bfbe;--muted:#929c9b;--gold:#d5b17e;--gold-hi:#ebd3af;--wrap:1440px;--r:2px;--r2:3px}
.wrap{padding-inline:clamp(24px,4.3vw,72px)}
.nav{height:80px;padding-inline:clamp(24px,4.3vw,72px);background:rgba(9,13,14,.93);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.merk-woord{font-size:18px;font-weight:500;letter-spacing:.11em}.nav .merkteken{display:none}.nav-links{gap:30px}.nav-links a{font-size:13px}
.home .nav{position:absolute;left:0;right:0;background:transparent;backdrop-filter:none;border:0}.home .nav-links{gap:32px}.home .nav-cta{display:none}
.btn{border-radius:2px;padding:13px 23px;font-size:13px;font-weight:500;min-height:44px;white-space:normal}
.btn-gold{background:#fafbf9;border-color:#fafbf9;color:#101719}.btn-gold:hover{background:#e4ded3;border-color:#e4ded3;box-shadow:none;transform:translateY(-2px)}
.btn-ghost{border-color:#596362}.btn-sm{padding:10px 17px}.cta-acties{gap:24px;align-items:center}
.display{font-size:clamp(34px,3.7vw,55px);font-weight:400;letter-spacing:-.047em;line-height:1.09}
.lede{font-size:16px;line-height:1.75}.sectie{padding-block:clamp(72px,8vw,116px)}
.cinema{height:100svh;min-height:700px;max-height:1100px;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;background:#090d0e}
.cinema-media{position:absolute;inset:0;z-index:-1;transform-origin:68% 48%;transform:translate3d(var(--camera-x,0px),var(--camera-y,0px),0) scale(var(--camera-scale,1));will-change:transform}
.cinema-media img{height:100%;width:100%;object-fit:cover;object-position:center}
.cinema-copy{padding-top:0;padding-bottom:52px}.cinema h1{font-size:clamp(50px,4.65vw,76px);font-weight:400;letter-spacing:-.045em;line-height:1.07;max-width:12ch}
.cinema .lede{font-size:18px;line-height:1.5;margin-top:24px;color:#f8f8f5}.cinema .cta-acties{margin-top:26px}
.cinema-link{padding:8px 0;display:inline-flex;gap:17px;color:white;min-height:44px}.cinema-link svg{transition:transform .3s}.cinema-link:hover svg{transform:translateX(6px)}
.system-rail{position:absolute;bottom:32px;left:0;right:0;display:flex;gap:26px;align-items:center;padding-top:22px;font-size:11px;color:#d2d7d4}
.system-rail:before{content:"";position:absolute;top:0;left:clamp(24px,4.3vw,72px);right:clamp(24px,4.3vw,72px);height:1px;background:#ffffff50}
.system-rail span{display:flex;align-items:center;gap:26px}.system-rail span:not(:last-child):after{content:"";width:24px;height:1px;background:#ffffff55}
.journey{padding-block:108px;background:#090d0e;scroll-margin-top:24px}
.journey-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:55px;align-items:center}
.journey-copy .display{font-size:clamp(34px,3.25vw,49px)}.journey-copy .lede{max-width:33ch}
.journey-steps{display:grid;margin-top:32px;gap:8px}.journey-step{background:transparent;border:0;color:#a6afad;display:flex;gap:18px;align-items:center;padding:12px 0;cursor:pointer;font:400 18px var(--sans);text-align:left;transition:color .3s}
.journey-step span{width:44px;height:44px;display:grid;place-items:center;border:1px solid #56615f;border-radius:50%;font:13px var(--mono);transition:border-color .3s,box-shadow .3s}
.journey-step[aria-pressed=true]{color:white}.journey-step[aria-pressed=true] span{border-color:#dfb476;box-shadow:0 0 22px #dfb47620}
.journey-visual{min-width:0}.journey-image{overflow:hidden;aspect-ratio:1.4;background:#101819}.journey-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s cubic-bezier(.2,.7,.2,1),object-position 1.5s;transform:scale(1.02)}
.journey-visual[data-stage="1"] img{transform:scale(1.16);transform-origin:75% 35%}.journey-visual[data-stage="2"] img{transform:scale(1.2);transform-origin:15% 60%}
.journey-result{border-bottom:1px solid #ffffff25;padding:22px 0;min-height:125px}.journey-status{font:12px var(--mono);color:var(--gold-hi)}.journey-description{font-size:16px;margin-top:9px;max-width:55ch}.journey-caption{font-size:11px;color:var(--muted);margin-top:14px}
.home .sec-kop{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:start}.home .sec-kop .lede{margin-top:0}
.sporen-sectie{background:#f4f2ec;color:#101719;--text-2:#535b59;--gold:#705330;--gold-hi:#705330;--line:#17252222;--line-2:#17252233}
.sporen-sectie .center{text-align:left}.sporen{gap:0;margin-top:48px}.spoor{border:0;border-radius:0;background:none;padding-right:6vw;overflow:visible}.spoor+.spoor{border-left:1px solid var(--line-2);padding-left:6vw;padding-right:0}.spoor-kop{padding:0 0 24px;border:0}.spoor-kop h3{font-size:28px;font-weight:500;color:#101719;letter-spacing:-.035em}.spoor-kop p{font-size:15px}.spoor-sub{padding:20px 0;border-bottom:1px solid var(--line);transition:padding .2s}.spoor-sub:hover{padding-left:8px;background:none}.spoor-sub b{font-weight:500}
.case-sectie{background:#0a1012;border-color:var(--line)}.case-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7vw}.case-grid>*{min-width:0}.case-grid .btn{white-space:normal}
.project-preview{display:block;text-decoration:none;overflow:hidden}.project-preview img{width:100%;height:390px;object-fit:cover;object-position:top;transition:transform 1s cubic-bezier(.2,.7,.2,1)}.project-preview:hover img{transform:scale(1.025)}.project-preview span{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin-top:18px;color:var(--text-2)}
.scan-teaser{background:#121b1d;border-color:var(--line)}.scan-punten{grid-template-columns:1fr;gap:0}.scan-punten span{background:none;text-transform:none;font:300 clamp(24px,2.5vw,38px) var(--sans);text-align:left;letter-spacing:-.04em;padding:14px 0;border:0;border-bottom:1px solid #ffffff20;border-radius:0;color:var(--text)}
.persoon-sectie{background:#0b1113}.persoon-teken .merkteken{width:80px;height:80px}.persoon-grid{gap:54px}.persoon-visie{max-width:70ch}.creed-item{background:transparent}.faq-item{border-radius:0;background:none;border-inline:0}.faq-item summary{padding-block:24px;font-weight:400}.keuzehulp{border-inline:0;border-radius:0}.keuze-rij{padding-block:22px}
.pagina-kop .display{font-size:clamp(42px,4.8vw,72px);max-width:23ch}.pagina-kop:before{background:radial-gradient(ellipse at 85% 0,rgba(79,112,123,.13),transparent 65%)}
.wa-bubbel{background:#0e181b}.home .actiebalk{display:none}.home .wa-bubbel:not(.zichtbaar){visibility:hidden}
@media(max-width:1080px){.nav{height:72px}.cinema{min-height:650px}.cinema h1{font-size:58px}.cinema-copy{padding-bottom:80px}.cinema .lede{font-size:16px;max-width:28ch}.cinema-media img{object-position:57% center}.journey-grid{gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.journey .display{font-size:36px}.journey-image{aspect-ratio:.9}.case-grid{grid-template-columns:1fr 1fr;gap:35px}.project-preview img{height:330px}.home .sec-kop{gap:40px}}
@media(max-width:700px){.nav{height:70px}.merk-woord{font-size:16px}.home .nav{background:linear-gradient(#070d10b0,transparent)}.cinema{height:100svh;min-height:760px;max-height:980px;align-items:flex-end}.cinema-media{inset:0;transform:none!important}.cinema-media img{object-position:68% top;height:67%;object-fit:cover}.cinema-media:after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(transparent,#090d0e 47%)}.cinema-copy{padding-top:400px;padding-bottom:124px}.cinema h1{font-size:clamp(41px,10.5vw,64px);max-width:100%;letter-spacing:-.045em}.cinema .lede{font-size:15px;margin-top:17px;max-width:none}.cinema .cta-acties{gap:20px;margin-top:24px}.cinema .btn{font-size:12px;padding:12px 15px}.cinema .cinema-link{padding-inline:0;gap:9px}.system-rail{bottom:30px;font-size:10px;gap:12px}.system-rail span{gap:12px}.system-rail span:not(:last-child):after{width:14px}.journey{padding-block:64px}.journey-grid{grid-template-columns:1fr;gap:32px}.journey-copy .lede{max-width:none}.journey .display{font-size:37px}.journey-steps{display:flex;gap:18px;justify-content:space-between}.journey-step{font-size:12px;gap:8px;flex-direction:column;align-items:flex-start}.journey-step span{height:36px;width:36px;font-size:11px}.journey-image{aspect-ratio:1.2}.journey-result{min-height:145px}.journey-description{font-size:15px}.journey-caption{font-size:11px}.home .sec-kop{grid-template-columns:1fr;gap:24px}.sporen{grid-template-columns:1fr;gap:40px}.spoor{padding:0}.spoor+.spoor{padding:40px 0 0;border-left:0;border-top:1px solid var(--line-2)}.case-grid{grid-template-columns:minmax(0,1fr)}.project-preview img{height:300px}.sectie{padding-block:64px}.display{font-size:36px}.persoon-grid{gap:24px}.nav-menu{top:70px}.home .nav-menu{position:absolute}.nav-cta{display:none}}
@media(prefers-reduced-motion:reduce){.cinema-media{transform:none!important}.journey-image img{transform:none!important;transition:none}.project-preview img{transition:none}.btn{transition:none}}
/* Expanded journey: four stages, including marketing and aftersales. */
.journey-visual[data-stage="3"] img{transform:scale(1.04);transform-origin:center}
@media(max-width:700px){.journey-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}.journey-step{flex-direction:row;align-items:center;font-size:13px}.system-rail{gap:10px;flex-wrap:wrap}.system-rail span{gap:10px}.system-rail span:not(:last-child):after{width:10px}}

/* Four chapters, one continuous native scroll. */
.journey{padding:100px 0 0}
.journey-heading{max-width:770px;margin-bottom:64px}
.journey-heading .display{font-size:clamp(42px,5.4vw,78px);letter-spacing:-.055em}
.journey-heading .lede{max-width:47ch;margin-top:25px}
.journey-scroll-hint{display:flex;align-items:center;gap:22px;margin-top:30px;color:var(--gold-hi);font:11px var(--mono);text-transform:uppercase;letter-spacing:.12em}
.journey-scroll-hint span{font-size:23px}
.journey-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:6vw;align-items:start;position:relative}
.journey-chapters{grid-column:1;grid-row:1;min-width:0}
.journey-chapter{min-height:72svh;display:flex;flex-direction:column;justify-content:center;padding:65px 0;border-top:1px solid #ffffff20}
.journey-label{display:flex;align-items:center;gap:18px;font-size:13px;color:var(--gold-hi);margin-bottom:25px}
.journey-label span{font:12px var(--mono);border:1px solid #af9067;width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.journey-chapter h3{font-weight:400;font-size:clamp(30px,3.2vw,47px);line-height:1.12;letter-spacing:-.045em;margin:0}
.journey-body{font-size:16px;line-height:1.8;color:var(--text-2);max-width:37ch;margin-top:24px}
.journey-tags{font:10px var(--mono);line-height:1.8;letter-spacing:.035em;color:var(--gold-hi);margin-top:28px}
.journey-visual{display:none;grid-column:2;grid-row:1;position:sticky;top:15svh;min-width:0}
.is-scrolly .journey-visual{display:block}
.journey-screen{position:relative;height:64svh;max-height:700px;min-height:380px;overflow:hidden;background:#101819}
.journey-scene{position:absolute;inset:0;opacity:0;transition:opacity .75s ease;pointer-events:none}
.journey-scene.is-active{opacity:1}
.journey-scene img{width:100%;height:100%;object-fit:cover;transform:scale(1.065);transition:transform 1.7s cubic-bezier(.2,.7,.2,1)}
.journey-scene.is-active img{transform:scale(1)}
.journey-scene[data-scene="1"] img{object-position:70% center}
.journey-scene:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#050a0be6)}
.journey-scene-label{position:absolute;left:30px;bottom:80px;z-index:1;font-size:clamp(22px,2.3vw,34px);letter-spacing:-.025em}
.journey-meter{position:absolute;bottom:29px;left:30px;right:30px;z-index:2;display:flex;gap:17px;align-items:center;font:11px var(--mono);color:#fff}
.journey-track{height:1px;background:#ffffff40;flex:1;overflow:hidden}
.journey-track i{display:block;height:100%;background:var(--gold-hi);transform:scaleX(var(--journey-progress,0));transform-origin:left}
.journey-fallback{margin-top:25px}.journey-fallback img{width:100%;height:auto}
.is-scrolly .journey-fallback{display:none}
@media(max-width:700px){
 .journey{padding-top:64px}.journey-heading{margin-bottom:32px}.journey-heading .display{font-size:43px}.journey-heading .lede{font-size:15px}
 .journey-grid{display:block}.journey-visual{top:12px;z-index:3;padding-bottom:12px;background:#090d0e}
 .journey-screen{height:34svh;min-height:210px;max-height:340px}.journey-caption{font-size:9px;margin-top:8px}
 .journey-scene-label{font-size:22px;left:20px;bottom:57px}.journey-meter{left:20px;right:20px;bottom:22px}
 .journey-chapter{min-height:66svh;padding:45px 0 65px;justify-content:center}.journey-chapter h3{font-size:36px}.journey-label{margin-bottom:20px}.journey-body{font-size:15px;margin-top:20px}.journey-tags{font-size:9px;margin-top:22px}
}
@media(prefers-reduced-motion:reduce){
 .is-scrolly .journey-visual{display:none}.is-scrolly .journey-fallback{display:block}.journey-grid{display:block}.journey-chapter{min-height:0;padding-block:40px}.journey-fallback{max-width:740px}.journey-scroll-hint{display:none}
}

.journey:not(.is-scrolly) .journey-grid{display:block}

/* Continuation: editorial services, real work and a clear final invitation. */
.home .sporen-sectie{position:relative}
.home .sporen-sectie>.wrap>.display{max-width:16ch;font-size:clamp(38px,4.8vw,68px)}
.home .spoor-kop{position:relative;padding-top:24px}
.home .spoor-kop:before{content:"01 / Groei";display:block;margin-bottom:22px;font:11px var(--mono);letter-spacing:.1em;color:#705330}
.home .spoor+.spoor .spoor-kop:before{content:"02 / Overzicht"}
.home .spoor-sub{position:relative;padding-right:32px}
.home .spoor-sub:after{content:"↗";position:absolute;right:2px;top:20px;font-size:22px;line-height:1;transition:transform .25s}
.home .spoor-sub:hover:after,.home .spoor-sub:focus-visible:after{transform:translate(3px,-3px)}
.home .spoor-sub:focus-visible{outline:2px solid #705330;outline-offset:5px}
.home .case-sectie{padding-block:clamp(80px,10vw,150px)}
.home .case-grid .display{font-size:clamp(42px,4.8vw,68px)}
.home .project-preview{overflow:visible;min-width:0}
.home .project-browser{display:flex;align-items:center;gap:6px;height:40px;background:#1c2425;border:1px solid #ffffff20;border-bottom:0;padding-inline:15px;border-radius:7px 7px 0 0}
.home .project-browser i{width:5px;height:5px;border-radius:50%;background:#8b9390}
.home .project-browser b{font:9px var(--mono);letter-spacing:.04em;margin-left:10px;color:#c4ccca}
.home .project-window{height:420px;overflow:hidden;background:#13191a;border:1px solid #ffffff20;box-shadow:0 30px 65px #0004}
.home .project-window img{height:100%;width:100%;object-fit:cover;object-position:top;transform:none;transition:object-position 6s cubic-bezier(.25,.1,.25,1)}
@media(hover:hover){.home .project-preview:hover .project-window img{object-position:0 36%;transform:none}}
.home .project-preview:focus-visible .project-window img{object-position:0 36%;transform:none}
.home .project-preview:focus-visible{outline:2px solid var(--gold-hi);outline-offset:8px}
.home .project-preview>span{padding-top:4px;align-items:center}.home .project-preview>span svg{transition:transform .3s}.home .project-preview:hover>span svg{transform:translateX(5px)}
.home .scan-punten{counter-reset:scan}
.home .scan-punten span{display:flex;align-items:center;gap:25px}
.home .scan-punten span:before{counter-increment:scan;content:"0" counter(scan);font:11px var(--mono);letter-spacing:0;color:var(--gold-hi)}
.home .faq-sectie{background:#f4f2ec;color:#101719;--text-2:#535b59;--line:#17252222;--line-2:#17252233;--gold-hi:#705330;--gold:#705330}
.home .faq-sectie .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:start}
.home .faq-sectie .display{max-width:10ch;font-size:clamp(38px,4vw,58px)}
.home .faq-sectie .faq-lijst{margin:0;width:100%;max-width:none}
.home .faq-sectie .faq-item summary{color:#101719;padding-inline:0}
.home .faq-sectie .faq-item summary:hover{background:transparent}
.home .faq-sectie .faq-antwoord{padding-inline:0}
.home .cta-slot{background:#10191b;padding-block:clamp(85px,10vw,150px)}
.home .cta-slot .display{font-size:clamp(45px,6.5vw,92px);max-width:17ch;line-height:1.06}
.home .cta-slot .lede{max-width:51ch;margin-top:10px}
.home .cta-slot .cta-acties{margin-top:15px}
.home .cta-slot .btn{min-height:52px;padding-inline:28px}
.reveal-ready{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal-ready.is-revealed{opacity:1;transform:none}
@media(max-width:700px){
 .home .sporen-sectie>.wrap>.display{font-size:42px}.home .spoor-kop{padding-top:0}.home .spoor-kop:before{margin-bottom:18px}
 .home .project-window{height:340px}.home .case-grid .display{font-size:44px}
 .home .faq-sectie .wrap{grid-template-columns:1fr;gap:32px}.home .faq-sectie .display{max-width:none;font-size:38px}
 .home .cta-slot .display{font-size:46px}.home .cta-slot .cta-acties{gap:12px}.home .cta-slot .btn{padding-inline:17px}
}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1;transform:none;transition:none}.home .project-preview .project-window img{object-position:top!important;transition:none}}

/* Scan acquisition route, using the existing editorial visual system. */
.scan-route .pagina-kop{padding-bottom:55px}.scan-route .pagina-kop .display{max-width:19ch}
.scan-aanvraag{padding-top:30px}.scan-aanvraag-grid{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}
.scan-aanbod .display{font-size:clamp(34px,3.5vw,48px)}.scan-aanbod .lede{max-width:42ch}
.scan-vervolg{list-style:none;padding:0;counter-reset:route;margin:32px 0}
.scan-vervolg li{counter-increment:route;position:relative;padding:20px 0 20px 48px;border-top:1px solid var(--line)}
.scan-vervolg li:before{content:"0" counter(route);position:absolute;left:0;top:22px;color:var(--gold-hi);font:12px var(--mono)}
.scan-vervolg b,.scan-vervolg span{display:block}.scan-vervolg b{font-size:16px;font-weight:500}.scan-vervolg span{font-size:14px;color:var(--text-2);margin-top:7px}
.scan-route .scanform{max-width:none;margin:0;background:#131d20;border:1px solid #ffffff25;padding:30px;gap:20px}.scanform h2{font-size:25px;font-weight:400;letter-spacing:-.025em}.scanform>h2+.hint{margin-top:-10px}
.scanform select{width:100%;min-height:48px;background:#090f11;color:var(--text);border:1px solid #66716e;padding:12px;font:14px var(--sans);border-radius:2px}.scanform select:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.scan-ontvangen{padding:26px;border:1px solid var(--gold);margin-top:24px;background:#172322}.scan-ontvangen h2{font-size:24px}.scan-ontvangen p{margin:15px 0;color:var(--text-2)}
.scan-voorbeeld{background:#f4f2ec;color:#101719;--text-2:#535b59;--gold:#705330;--gold-hi:#705330;--line:#17252222}
.scan-voorbeeld .scan-twee{align-items:center}.scan-voorbeeld .btn{margin-top:25px;background:#101719;color:#fff;border-color:#101719}
.voorbeeld-bevinding{padding:30px;border:1px solid #17252233}.voorbeeld-bevinding h3{font-size:28px;line-height:1.2;font-weight:400;letter-spacing:-.03em}.voorbeeld-bevinding dt{font-weight:500;margin-top:22px;font-size:14px}.voorbeeld-bevinding dd{margin:7px 0 0;color:#535b59;font-size:14px;line-height:1.7}.voorbeeld-bevinding .hint{color:#535b59;margin-top:24px}
@media(max-width:700px){.scan-aanvraag-grid{grid-template-columns:1fr;gap:36px}.scan-route .scanform{padding:22px}.scan-route .pagina-kop .display{font-size:43px}.scan-aanbod .display{font-size:35px}.voorbeeld-bevinding{padding:24px}}

.scan-route #scanform,.scan-route #voorbeeldrapport,.scan-route #aanvragen{scroll-margin-top:100px}

/* Editorial service pages: homepage art direction, page-specific stories. */
.dienst-opening{padding:38px 0 85px;background:#090f11;overflow:hidden}
.dienst-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;margin-top:40px}
.dienst-hero-copy .display{font-size:clamp(42px,4.7vw,69px);line-height:1.06;letter-spacing:-.05em;max-width:15ch}
.dienst-hero-copy .lede{font-size:17px;max-width:43ch;margin-top:28px}
.dienst-hero-copy .cta-acties{display:flex;flex-wrap:wrap;gap:22px;margin-top:32px}
.dienst-verder{font-size:12px;text-decoration:none;display:inline-flex;align-items:center;gap:18px;min-height:44px}.dienst-verder span{font-size:21px;color:var(--gold-hi)}
.dienst-hero-media{margin:0;position:relative;height:560px;min-width:0;overflow:hidden}
.dienst-hero-media img{width:100%;height:100%;object-fit:cover;object-position:65% center;animation:dienst-in 1.3s ease both}
.dienst-hero-media:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#050c0dd9);pointer-events:none}
.dienst-hero-media figcaption{position:absolute;bottom:28px;left:28px;right:28px;z-index:1;font-size:24px;line-height:1.25;letter-spacing:-.025em}.dienst-hero-media figcaption span{display:block;font:10px var(--mono);color:#c9d1ce;margin-top:12px;letter-spacing:0}
@keyframes dienst-in{from{opacity:.5;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
.dienst-praktijk{background:#f4f2ec;color:#101719;--text-2:#535b59;--gold:#705330;--gold-hi:#705330;--line:#17252222;scroll-margin-top:80px}
.praktijk-kop{display:grid;grid-template-columns:1.2fr 1fr;gap:6vw;align-items:end;margin-bottom:48px}.praktijk-kop .lede{max-width:43ch;margin:0}.praktijk-kop .display{font-size:clamp(34px,3.8vw,54px)}
.dienst-concepten{display:grid;grid-template-columns:1fr 1fr;gap:36px}.dienst-concept{display:block;text-decoration:none;min-width:0}.concept-venster{height:420px;overflow:hidden;background:#dcd8cf}.concept-venster img{width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 5s ease}.dienst-concept:hover img,.dienst-concept:focus-visible img{object-position:0 28%}.dienst-concept>span{display:block;position:relative;padding:22px 30px 22px 0;border-bottom:1px solid var(--line)}.dienst-concept b{display:block;font-weight:500;font-size:23px;letter-spacing:-.03em}.dienst-concept small{display:block;margin-top:8px;color:#535b59;font-size:12px}.dienst-concept i{position:absolute;right:0;top:22px;font-style:normal;font-size:25px}
.marketing-verhaal{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}.marketing-verhaal figure{margin:0}.marketing-verhaal img{width:100%;aspect-ratio:1.1;object-fit:cover}.marketing-verhaal figcaption{font-size:11px;color:#535b59;margin-top:14px}
.marketing-stappen details{border-top:1px solid #17252230;padding:22px 0}.marketing-stappen details:last-child{border-bottom:1px solid #17252230}.marketing-stappen summary{display:flex;align-items:baseline;gap:16px;cursor:pointer;font-size:21px;letter-spacing:-.025em;list-style:none}.marketing-stappen summary::-webkit-details-marker{display:none}.marketing-stappen summary span{font:11px var(--mono);color:#705330;flex:none}.marketing-stappen summary:after{content:"+";margin-left:auto;flex:none;color:#705330}.marketing-stappen details[open] summary:after{content:"−"}.marketing-stappen details p{font-size:15px;line-height:1.8;color:#535b59;margin:20px 0 0 32px}.marketing-stappen summary:focus-visible{outline:2px solid #705330;outline-offset:6px}
.proces-baan{list-style:none;padding:0;margin:55px 0 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:proces}.proces-baan li{padding:30px 25px 20px 0;border-top:2px solid #95734a;position:relative}.proces-baan li+li{padding-left:25px;border-left:1px solid #17252222}.proces-baan li:before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:#95734a}.proces-baan li+li:before{left:25px}.proces-nr{font:10px var(--mono);color:#705330}.proces-baan h3{font-size:25px;font-weight:400;line-height:1.15;letter-spacing:-.035em;margin-top:24px}.proces-baan p{font-size:14px;line-height:1.8;color:#535b59;margin-top:18px}.proces-label{display:block;font:10px var(--mono);margin-top:25px;color:#705330}
.dienst-editorial .bouwt-lijst{counter-reset:bouw;gap:0}.dienst-editorial .bouwt-item{counter-increment:bouw;padding:30px 25px 30px 0;border-bottom:1px solid var(--line);background:none}.dienst-editorial .bouwt-item:before{content:"0" counter(bouw);font:11px var(--mono);color:var(--gold-hi);display:block;margin-bottom:18px}.dienst-editorial .bouwt-item h3{font-size:25px;font-weight:400;letter-spacing:-.025em}.dienst-editorial .bouwt-item p{max-width:43ch}
.dienst-editorial .stapjes{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 6vw}.dienst-editorial .stapje{padding:25px 0;border-top:1px solid var(--line)}
.dienst-editorial .dienstkaarten{grid-template-columns:1fr 1fr;gap:0}.dienst-editorial .dienstkaart{border:0;border-bottom:1px solid var(--line);background:none;border-radius:0;padding:34px 30px 34px 0}.dienst-editorial .dienstkaart h2{font-size:29px;font-weight:400;letter-spacing:-.035em}.dienst-editorial .dienstkaart:hover{transform:none;background:#ffffff04}
.dienst-editorial .cta-slot .display{font-size:clamp(39px,5.1vw,73px);max-width:19ch}.dienst-editorial .cta-slot{background:#131e20}
@media(max-width:900px){.dienst-hero-grid{gap:30px}.dienst-hero-copy .display{font-size:44px}.dienst-hero-media{height:510px}.proces-baan{grid-template-columns:1fr 1fr;row-gap:30px}.proces-baan li:nth-child(3){border-left:0;padding-left:0}.proces-baan li:nth-child(3):before{left:0}.concept-venster{height:350px}}
@media(max-width:700px){.dienst-opening{padding-top:22px;padding-bottom:50px}.dienst-hero-grid{grid-template-columns:1fr;margin-top:28px;gap:35px}.dienst-hero-copy .display{font-size:43px;max-width:none}.dienst-hero-copy .lede{font-size:16px}.dienst-hero-media{height:350px}.dienst-hero-media figcaption{left:22px;bottom:22px;font-size:23px}.praktijk-kop{grid-template-columns:1fr;gap:24px;margin-bottom:32px}.praktijk-kop .display{font-size:36px}.dienst-concepten,.marketing-verhaal{grid-template-columns:1fr;gap:35px}.concept-venster{height:330px}.dienst-concept b{font-size:24px}.marketing-verhaal img{aspect-ratio:1.3}.marketing-stappen summary{font-size:20px}.proces-baan{grid-template-columns:1fr;margin-top:30px}.proces-baan li,.proces-baan li+li{border-left:1px solid #95734a;border-top:0;padding:0 0 35px 26px}.proces-baan li:before,.proces-baan li+li:before,.proces-baan li:nth-child(3):before{left:-5px;top:2px}.proces-baan li:nth-child(3){padding-left:26px;border-left:1px solid #95734a}.proces-baan h3{margin-top:15px}.proces-baan p{margin-top:12px}.proces-label{margin-top:15px}.dienst-editorial .stapjes,.dienst-editorial .dienstkaarten{grid-template-columns:1fr}.dienst-editorial .dienstkaart{padding-right:0}}
@media(prefers-reduced-motion:reduce){.dienst-hero-media img{animation:none}.concept-venster img{transition:none;object-position:top!important}}

/* Websites shows the actual design work instead of another desk scene. */
.dienst-websites .dienst-hero-media{height:570px;background:#eee7df;border:1px solid #ffffff25;transform:rotate(2deg);box-shadow:-25px 30px 0 #182224}
.dienst-websites .dienst-hero-media img{object-position:top;animation:none}
.dienst-websites .dienst-hero-media figcaption{background:#0a1315;padding:20px;left:0;right:0;bottom:0;font-size:22px}
.dienst-websites .dienst-hero-media:after{display:none}
@media(max-width:700px){.dienst-websites .dienst-hero-media{height:400px;transform:none;box-shadow:10px 12px 0 #182224}.dienst-websites .dienst-hero-media figcaption{font-size:19px}}

.journey-scene[data-scene="3"] img{object-fit:contain;background:#111d20}.marketing-verhaal img[src$="aftersales-flow.svg"]{object-fit:contain;background:#111d20}
/* Anonieme filmische concepten; films laden uitsluitend na afspelen. */
.film-teaser-beeld{position:relative;aspect-ratio:16/10;overflow:hidden;background:#152124}
.film-teaser-beeld img{display:block;width:100%;height:100%;object-fit:cover}
.film-teaser-beeld:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 75%)}
.film-teaser-beeld strong{position:absolute;left:7%;bottom:10%;z-index:1;color:#fff;font-size:clamp(24px,3.2vw,44px);line-height:1.12;font-weight:400;letter-spacing:-.04em}
.film-teaser-play{position:absolute;top:42%;left:45%;z-index:1;border:1px solid #ffffff90;border-radius:50%;width:56px;height:56px;display:grid;place-items:center;background:#0004;color:white}
.film-demos{scroll-margin-top:100px}
.film-demos-kop{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:end;margin-bottom:48px}
.film-demo-noot{font-size:14px;line-height:1.6;opacity:.7;margin-top:18px}
.film-demos-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 28px;margin-bottom:32px}
.film-demo{min-width:0}
.film-demo-media{aspect-ratio:16/9;overflow:hidden;background:#101819;border:1px solid #ffffff20}
.film-demo-media video{display:block;width:100%;height:100%;object-fit:cover}
.film-demo-tekst{padding:23px 0 0}
.film-demo-tekst .eyebrow{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}
.film-demo-tekst .eyebrow span{border:1px solid currentColor;padding:3px 7px;font-size:10px;white-space:nowrap}
.film-demo-tekst h3{font-size:clamp(23px,2.4vw,34px);font-weight:400;line-height:1.15;letter-spacing:-.035em;margin:0 0 13px}
.film-demo-tekst>p:last-child{max-width:48ch;opacity:.75;line-height:1.65;margin:0}
@media(max-width:700px){.film-demos-kop,.film-demos-grid{grid-template-columns:1fr}.film-demos-kop{gap:20px;margin-bottom:32px}.film-demos-grid{gap:36px}.film-demo-tekst{padding-top:18px}}
.demo-kiezer{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.demo-kiezer button{font:inherit;font-size:13px;border:1px solid #ffffff35;background:transparent;color:inherit;padding:13px 18px;cursor:pointer;transition:background .2s,color .2s}
.demo-kiezer button[aria-selected=true]{background:#caa56a;border-color:#caa56a;color:#101819}
.demo-kiezer button:focus-visible{outline:2px solid #caa56a;outline-offset:4px}
.demo-werkbalk{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 18px;background:#142023;border:1px solid #ffffff25;border-bottom:0;font-size:13px}
.demo-werkbalk>span{font-family:monospace;font-size:12px}
.demo-paneel{height:min(780px,82vh);min-height:580px;background:#122d34;border:1px solid #ffffff25}
.demo-paneel iframe{display:block;width:100%;height:100%;border:0;background:#122d34}
@media(max-width:700px){.demo-kiezer{display:grid;grid-template-columns:1fr 1fr}.demo-kiezer button{padding:12px 8px;font-size:11px}.demo-paneel{height:76svh;min-height:520px}.demo-werkbalk{padding:13px 10px;font-size:12px}.demo-werkbalk>span{font-size:10px}}
.film-teaser .film-teaser-beeld:after{display:none}