/* ==========================================================
   Krijtlijn — gedeelde stijl (studio-stijl uit de hero-film)
   ========================================================== */
:root{
  --lei:#141B26; --lei-diep:#0C121D; --nacht:#080D15;
  --studio:#0A0F18; --paneel:#0E1524; --neon:#2F8CFF;
  --krijt:#F4F6F8; --blauw:#5B9BFF; --blauw-fel:#7DB2FF; --blauw-diep:#2F6FEA;
  --groen:#2FBF71; --grijs:#8C97A8; --glas:rgba(255,255,255,.05); --glasrand:rgba(255,255,255,.1);
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{ font-family:'Inter',system-ui,sans-serif; color:var(--krijt); background:var(--studio); line-height:1.6; overflow-x:hidden }
a{ color:inherit }
h1,h2,h3{ font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:1.18 }
img{ max-width:100% }
.wrap{ max-width:1120px; margin:0 auto; padding:0 26px }
.korrel::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px); background-size:26px 26px }

/* tegelraster + neonlijn (het studio-decor) */
.tegels{ background-color:var(--studio);
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 130px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 130px) }
.tegels.diep{ background-color:var(--lei-diep) }
.neon{ position:absolute; width:3px; height:520px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(47,140,255,0) 0%, var(--neon) 50%, rgba(47,140,255,0) 100%);
  box-shadow:0 0 18px rgba(47,140,255,.8) }

/* ---------- menubalk ---------- */
header.top{ background:rgba(54,71,102,.92); backdrop-filter:blur(12px); position:fixed; inset:0 0 auto 0; z-index:60; border-bottom:1px solid rgba(95,178,255,.2) }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:13px; padding-bottom:13px }
/* De K van het beeldmerk is tegelijk de K van het woord: beeldmerk + "rijtlijn". */
.logo{ display:inline-flex; align-items:flex-end; gap:0; text-decoration:none; position:relative }
.logo .logo-k{ display:block; width:37px; height:auto; position:relative; transform:translateY(-8.8px);
  -webkit-mask-image:radial-gradient(78% 78% at 50% 46%, #000 58%, transparent 97%); mask-image:radial-gradient(78% 78% at 50% 46%, #000 58%, transparent 97%);
  filter:brightness(1.15) drop-shadow(0 0 1px rgba(214,231,255,.9)) drop-shadow(0 0 11px rgba(150,195,255,.55)) drop-shadow(0 2px 8px rgba(0,0,0,.35)) }
.logo .naam{ font-family:'Poppins',sans-serif; font-weight:600; font-size:1.3rem; letter-spacing:.02em; color:var(--krijt) }
.logo .naam b{ color:var(--blauw); font-weight:600 }
/* het echte woordmerk uit Patricks logo */
/* -2.8px omdat het K-beeldmerk zelf 4,6px doorzichtige lucht rechts heeft; de
   optische ruimte wordt daarmee 1,8px, precies zoals tussen de andere letters. */
.naam-beeld{ display:block; height:34px; width:auto; position:relative; margin-left:-2.8px; filter:brightness(1.3) drop-shadow(0 0 1px rgba(214,231,255,.9)) drop-shadow(0 0 11px rgba(150,195,255,.55)) drop-shadow(0 2px 8px rgba(0,0,0,.35)) }
.top > .wrap > nav{ display:flex; gap:22px; align-items:center }
.top > .wrap > nav a{ color:rgba(244,246,248,.72); text-decoration:none; font-size:.9rem; font-weight:500 }
.top > .wrap > nav a:hover{ color:#fff }
.top > .wrap > nav a.actief{ color:#fff; position:relative }
.top > .wrap > nav a.actief::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--blauw); box-shadow:0 0 8px rgba(91,155,255,.8) }
@media (max-width:1060px){ .top > .wrap > nav a:not(.knop){ display:none } .top > .wrap > nav{ gap:12px } }

/* ---------- mobiel menu ---------- */
.menuknop{ display:none; width:42px; height:40px; border:1px solid rgba(95,178,255,.3); border-radius:10px; background:rgba(12,18,29,.6); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0 }
.menuknop i{ display:block; width:18px; height:2px; border-radius:2px; background:var(--krijt); transition:transform .25s, opacity .25s }
@media (max-width:1060px){ .menuknop{ display:flex } }
body.menu-open .menuknop i:nth-child(1){ transform:translateY(7px) rotate(45deg) }
body.menu-open .menuknop i:nth-child(2){ opacity:0 }
body.menu-open .menuknop i:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
.mobielmenu{ display:none; flex-direction:column; padding:6px 26px 22px; border-top:1px solid rgba(255,255,255,.07) }
body.menu-open .mobielmenu{ display:flex }
@media (min-width:1061px){ .mobielmenu{ display:none !important } }
.mobielmenu a{ color:var(--krijt); text-decoration:none; font-weight:600; font-size:1.05rem; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.06) }
.mobielmenu a:last-child{ border-bottom:none }
.mobielmenu a.actief{ color:var(--blauw-fel) }

/* ---------- knoppen ---------- */
.knop{ display:inline-block; background:var(--blauw-diep); color:#fff; text-decoration:none; font-weight:600; font-size:.95rem; padding:12px 22px; border-radius:11px; transition:transform .15s, box-shadow .15s, background .15s; box-shadow:0 4px 18px rgba(47,111,234,.35), 0 0 26px rgba(47,111,234,.45) }
.knop:hover{ background:var(--blauw); transform:translateY(-2px) }
.knop.licht{ background:rgba(244,246,248,.08); border:1px solid rgba(244,246,248,.2); color:var(--krijt); box-shadow:0 4px 18px rgba(0,0,0,.3) }
.top > .wrap > nav .knop{ padding:10px 20px; font-size:.88rem }
.acties{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }

/* ---------- kopbalk op telefoons (alleen tot 1060px; de gewone balk blijft zoals hij is) ----------
   Staat na de knoppen, zodat deze regels de gewone knopmaat kunnen overschrijven. */
@media (max-width:1060px){
  /* het logo krimpt nooit in, dus de knop kan er niet meer overheen schuiven */
  header.top .logo{ flex:none }
  /* het uitklapmenu is nooit hoger dan wat er onder de kopbalk (69,5px) nog te zien is;
     past het niet, dan scrolt het menu zelf en blijft de pagina erachter stilstaan */
  .mobielmenu{ max-height:calc(100vh - 70px); max-height:calc(100dvh - 70px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
}
/* liggende telefoon: het menu in twee kolommen, zodat alle negen links in één keer te zien zijn */
@media (max-width:1060px) and (max-height:500px) and (orientation:landscape){
  body.menu-open .mobielmenu{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(5,auto); grid-auto-flow:column; column-gap:36px; padding-bottom:12px }
  .mobielmenu a{ padding:11px 4px }
  .mobielmenu a:nth-child(5){ border-bottom:none }
}
/* smalle telefoons: iets minder zijmarge en een compactere knop; de balk blijft even hoog */
@media (max-width:400px){
  .top .wrap{ padding-left:18px; padding-right:18px }
  .top > .wrap > nav{ gap:10px }
  .top > .wrap > nav .knop{ padding:10px 15px; font-size:.84rem; line-height:calc(.88rem * 1.6) }
  .mobielmenu{ padding-left:18px; padding-right:18px }
}
/* heel smal (onder 360px): ook het logo iets kleiner, in dezelfde verhoudingen */
@media (max-width:359px){
  .top .wrap{ padding-left:16px; padding-right:16px }
  .top > .wrap > nav{ gap:8px }
  .top > .wrap > nav .knop{ padding:10px 12px; font-size:.8rem }
  .logo .logo-k{ width:30px; transform:translateY(-7.14px) }
  .naam-beeld{ height:27.57px; margin-left:-2.27px }
  .mobielmenu{ padding-left:16px; padding-right:16px }
}

/* ---------- secties ---------- */
.sec{ padding:100px 0; position:relative; overflow:hidden }
.sec .kop{ max-width:680px; margin-bottom:48px; position:relative; z-index:2 }
.kickerlijn{ display:flex; align-items:center; gap:12px; color:var(--blauw-fel); font-weight:700; letter-spacing:.16em; font-size:.76rem; text-transform:uppercase; margin-bottom:14px }
.kickerlijn::before{ content:''; width:34px; height:3px; background:var(--blauw); border-radius:2px; box-shadow:0 0 10px rgba(91,155,255,.7) }
.sec h2{ font-size:clamp(1.8rem,3.8vw,2.6rem) }
.sec .kop p{ margin-top:12px; color:var(--grijs); font-size:1.04rem }

/* ---------- paginakop (bovenkant van elke onderpagina) ---------- */
.paginakop{ position:relative; overflow:hidden; padding:170px 0 84px; text-align:center }
.paginakop .wrap{ position:relative; z-index:2; max-width:820px }
.paginakop .kicker{ display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(95,178,255,.35); background:rgba(12,18,29,.8); color:var(--blauw-fel); font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:8px 18px; border-radius:999px }
.paginakop .kicker i{ width:7px; height:7px; border-radius:50%; background:var(--blauw); font-style:normal; box-shadow:0 0 8px var(--blauw) }
.paginakop h1{ margin-top:18px; font-size:clamp(2.1rem,4.6vw,3.3rem) }
.paginakop h1 em{ font-style:normal; color:var(--blauw) }
.paginakop p.sub{ margin:16px auto 0; color:#B9C4D4; font-size:1.08rem; max-width:56ch }

/* ---------- vensters (donker glas met gloed) ---------- */
.venster{ background:var(--paneel); border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 70px rgba(47,140,255,.2) }
.venster .balk{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#121A28; border-bottom:1px solid rgba(255,255,255,.08) }
.venster .balk i{ width:9px; height:9px; border-radius:50%; background:#3A4557 }
.venster .balk .url{ margin-left:10px; flex:1; background:#0A101C; border-radius:7px; font-size:.68rem; color:var(--grijs); padding:4px 11px }

/* ---------- dienst-kaarten (home + verwante diensten) ---------- */
.dienstkaarten{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; position:relative; z-index:2 }
@media (max-width:880px){ .dienstkaarten{ grid-template-columns:1fr } }
.dienstkaart{ display:flex; flex-direction:column; gap:16px; background:var(--paneel); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:28px; text-decoration:none; color:var(--krijt);
  transition:transform .25s, border-color .25s, box-shadow .25s; box-shadow:0 24px 70px rgba(0,0,0,.45) }
.dienstkaart:hover{ transform:translateY(-8px); border-color:rgba(91,155,255,.45); box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 46px rgba(47,140,255,.2) }
.dienstkaart .nr{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--blauw); font-size:.9rem; letter-spacing:.14em }
.dienstkaart h3{ font-size:1.35rem }
.dienstkaart p{ color:var(--grijs); font-size:.95rem }
.dienstkaart .meer{ margin-top:auto; color:var(--blauw-fel); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:8px }
.dienstkaart:hover .meer{ color:#fff }
.dienstkaart .beeld{ border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.09); background:#0A101C }

/* ---------- referenties ---------- */
.refs{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; z-index:2 }
@media (max-width:920px){ .refs{ grid-template-columns:1fr } }
.ref{ background:var(--paneel); border:1px solid rgba(255,255,255,.12); border-radius:20px; overflow:hidden; text-decoration:none; display:block; transition:transform .25s, border-color .25s, box-shadow .25s; box-shadow:0 24px 70px rgba(0,0,0,.55) }
.ref:hover{ transform:translateY(-8px); border-color:rgba(91,155,255,.45); box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 46px rgba(47,140,255,.2) }
.ref .venster{ padding:14px 14px 0; background:none; border:none; box-shadow:none; border-radius:0 }
.refscherm{ background:#0A101C; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.08) }
.refscherm .rb{ display:flex; align-items:center; gap:5px; padding:8px 11px; background:#121A28 }
.refscherm .rb i{ width:7px; height:7px; border-radius:50%; background:#3A4557 }
.refscherm .rb span{ margin-left:7px; font-size:.62rem; color:var(--grijs) }
.refscherm .rh{ height:86px; display:flex; align-items:flex-end; padding:12px 14px }
.refscherm .rh i{ width:60%; height:9px; border-radius:4px; background:rgba(255,255,255,.85) }
.refscherm .rr{ display:flex; flex-direction:column; gap:7px; padding:10px 12px }
.refscherm .rr i{ height:8px; border-radius:4px; background:#1B2537 }
.refscherm .rr i:nth-child(1){ width:82% } .refscherm .rr i:nth-child(2){ width:64% } .refscherm .rr i:nth-child(3){ width:72% }
.ref .info{ padding:16px 20px 20px }
.ref .naam{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.04rem }
.ref .rol{ color:var(--blauw-fel); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:4px 0 8px }
.ref p{ color:var(--grijs); font-size:.9rem }

/* ---------- feiten ---------- */
.feiten{ display:grid; gap:16px }
.feit{ background:rgba(16,24,42,.75); border:1px solid rgba(95,178,255,.2); border-radius:18px; padding:24px 28px; display:flex; align-items:baseline; gap:16px; box-shadow:0 0 40px rgba(47,140,255,.08) }
.feit .groot{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.8rem; color:var(--blauw); line-height:1; min-width:2.2ch; text-align:right; text-shadow:0 0 26px rgba(95,178,255,.5) }
.feit .klein{ color:#B9C4D4; font-size:.94rem }
.feit .klein b{ color:var(--krijt) }

/* ---------- opsommingen met vinkje ---------- */
.vinklijst{ list-style:none; display:flex; flex-direction:column; gap:14px }
.vinklijst li{ display:flex; gap:14px; align-items:flex-start; color:#B9C4D4; font-size:1rem }
.vinklijst li b{ color:var(--krijt) }
.vinklijst .vink{ flex:none; width:26px; height:26px; border-radius:8px; background:rgba(95,178,255,.13); color:var(--blauw-fel); display:flex; align-items:center; justify-content:center; margin-top:2px }
.vinklijst .vink svg{ display:block }

/* ---------- stappen (hoe we werken) ---------- */
.stappen{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; z-index:2 }
@media (max-width:880px){ .stappen{ grid-template-columns:1fr } }
.stap{ background:rgba(16,24,42,.75); border:1px solid rgba(95,178,255,.2); border-radius:18px; padding:26px 28px; box-shadow:0 0 40px rgba(47,140,255,.08) }
.stap .nr{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2rem; color:var(--blauw); text-shadow:0 0 22px rgba(95,178,255,.5) }
.stap h3{ margin-top:8px; font-size:1.15rem }
.stap p{ margin-top:6px; color:var(--grijs); font-size:.94rem }

/* ---------- contact-band (op elke pagina onderaan) ---------- */
.ctaband{ position:relative; overflow:hidden; text-align:center; padding:96px 0 }
.ctaband .wrap{ position:relative; z-index:2 }
.ctaband h2{ font-size:clamp(1.9rem,4.2vw,2.9rem); max-width:24ch; margin:0 auto }
.ctaband h2 em{ font-style:normal; color:var(--blauw) }
.ctaband p{ margin:18px auto 0; color:#B9C4D4; max-width:54ch }
.ctaband .acties{ margin-top:34px }

/* ---------- voettekst ---------- */
footer{ background:var(--nacht); color:rgba(244,246,248,.5); font-size:.85rem; padding:34px 0; border-top:1px solid rgba(255,255,255,.06) }
footer .wrap{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center }
footer nav{ display:flex; gap:18px; flex-wrap:wrap }
footer nav a{ color:rgba(244,246,248,.6); text-decoration:none }
footer nav a:hover{ color:#fff }

/* ---------- voorbeelden-galerij (vult zichzelf uit assets/voorbeelden/<map>/) ---------- */
.galerij{ display:grid; gap:22px; position:relative; z-index:2 }
.galerij.logo{ grid-template-columns:repeat(3,1fr) }
@media (max-width:880px){ .galerij.logo{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .galerij.logo{ grid-template-columns:1fr } }
.galerij.web{ grid-template-columns:repeat(2,1fr) }
@media (max-width:880px){ .galerij.web{ grid-template-columns:1fr } }
.vb{ margin:0; cursor:zoom-in; border:1px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden; background:var(--paneel);
  box-shadow:0 24px 70px rgba(0,0,0,.45); transition:transform .25s, border-color .25s, box-shadow .25s }
.vb:hover{ transform:translateY(-6px); border-color:rgba(91,155,255,.45); box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 46px rgba(47,140,255,.2) }
.vb-logo{ display:flex; align-items:center; justify-content:center; padding:26px; min-height:210px; background:#0A101C }
.vb-logo img{ max-width:100%; max-height:200px; display:block }
.vb-web .vb-balk{ display:flex; gap:5px; padding:9px 12px; background:#121A28; border-bottom:1px solid rgba(255,255,255,.08) }
.vb-web .vb-balk i{ width:8px; height:8px; border-radius:50%; background:#3A4557 }
.vb-web img{ display:block; width:100%; height:auto }
.lichtbak{ position:fixed; inset:0; z-index:90; background:rgba(5,8,14,.93); display:flex; align-items:center; justify-content:center; cursor:zoom-out; padding:30px }
.lichtbak img{ max-width:94vw; max-height:92vh; border-radius:12px; box-shadow:0 40px 120px rgba(0,0,0,.7) }

/* ---------- onthullen ---------- */
.onthul{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1) }
.onthul.zichtbaar{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .onthul{ opacity:1; transform:none; transition:none } }

/* ==========================================================
   Merkfilm — van logo tot systeem (pagina /voorbeelden/)
   Per merk een spoor waar je doorheen scrolt; het beeld
   binnen blijft staan en bouwt zich op in vier stappen.
   ========================================================== */
.merkfilm{ position:relative; --merkkleur:var(--blauw); --stap-afstand:240px }
/* de hoogte volgt uit de afstand per stap: een scrolbeweging is ongeveer een stap */
.spoor{ position:relative; height:calc(100vh + var(--stap-afstand) * 4) }
.plak{ position:sticky; top:0; height:100vh; display:grid; grid-template-columns:290px 1fr;
  gap:44px; align-items:center; padding:90px 26px 40px; max-width:1180px; margin:0 auto }

/* --- linkerkolom: naam en de vier stappen --- */
.merkzij{ position:relative; z-index:3 }
.merkzij .vak{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--merkkleur); margin-bottom:8px }
.merkzij h3{ font-size:clamp(1.6rem,3vw,2.15rem); margin-bottom:10px }
.merkzij .uitleg{ color:#9DA9BA; font-size:.92rem; margin-bottom:26px; max-width:26em }
.merkzij .stempel{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:999px; white-space:nowrap }
/* het stempel wisselt mee met de stap, net als de regel eronder */
.stempelrij{ position:relative; height:27px; margin-bottom:14px }
.stempelrij .stempel{ position:absolute; left:0; top:0; opacity:0; transition:opacity .3s ease }
.stempelrij .stempel.nu{ opacity:1 }
.merkzij .platstempel{ display:none }
.merkfilm.plat .stempelrij{ display:none }
.merkfilm.plat .merkzij .platstempel{ display:inline-flex; margin-bottom:14px }
.stempel.echt{ color:#7BE0A8; background:rgba(47,191,113,.12); border:1px solid rgba(47,191,113,.35) }
.stempel.proef{ color:#93A3B8; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14) }

/* de ladder met vier treden */
.trap{ position:relative; padding-left:26px; list-style:none }
.trap::before{ content:''; position:absolute; left:6px; top:8px; bottom:8px; width:2px; border-radius:2px; background:rgba(255,255,255,.12) }
.trap .vulling{ position:absolute; left:6px; top:8px; width:2px; border-radius:2px; background:var(--merkkleur);
  box-shadow:0 0 12px var(--merkkleur); height:0; transform-origin:top }
.trap li{ position:relative; padding:9px 0; color:#78849A; font-weight:600; font-size:.95rem;
  transition:color .35s ease, transform .35s ease }
.trap li::before{ content:''; position:absolute; left:-26px; top:50%; width:14px; height:14px; margin-top:-7px;
  border-radius:50%; background:var(--studio); border:2px solid rgba(255,255,255,.18);
  transition:border-color .35s ease, background .35s ease, box-shadow .35s ease; z-index:2 }
.trap li.nu{ color:#fff; transform:translateX(3px) }
.trap li.nu::before{ border-color:var(--merkkleur); background:var(--merkkleur); box-shadow:0 0 14px var(--merkkleur) }
.trap li.gehad{ color:#B9C4D4 }
.trap li.gehad::before{ border-color:var(--merkkleur); background:var(--studio) }

/* --- rechterkolom: de vier lagen over elkaar --- */
.merkbeeld{ position:relative; height:min(74vh,660px); z-index:2;
  perspective:1600px; perspective-origin:50% 50% }
/* De vier stappen zitten als vlakken op een draaitrommel, elk een kwartslag verder.
   Het script draait de trommel mee met je scrollpositie; de straal wordt op de
   breedte van het vak gezet zodat de vlakken elkaar net niet raken. */
.stapel{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform;
  --straal:420px }
.merkbeeld .gloed{ position:absolute; inset:12% 8%; border-radius:50%; filter:blur(70px); opacity:.3;
  background:var(--merkkleur); pointer-events:none; z-index:0; transition:opacity .6s ease }
/* Elk vlak staat een kwartslag verder op de trommel. Er zit met opzet GEEN overgang
   op: de stand hangt rechtstreeks aan je scrollpositie, zodat het rad precies zo ver
   draait als jij scrolt. De achterkant van een vlak is onzichtbaar, dus je ziet altijd
   alleen het vlak dat naar je toe staat plus de twee die op hun kant wegdraaien. */
.laag{ position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden; pointer-events:none }
.laag:nth-child(1){ transform:rotateY(0deg)   translateZ(var(--straal)) }
.laag:nth-child(2){ transform:rotateY(90deg)  translateZ(var(--straal)) }
.laag:nth-child(3){ transform:rotateY(180deg) translateZ(var(--straal)) }
.laag:nth-child(4){ transform:rotateY(270deg) translateZ(var(--straal)) }
.laag img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain }
.laag.beeldlogo img{ max-height:56%; filter:drop-shadow(0 18px 46px rgba(0,0,0,.55)) }
.laag.beeldscherm{ padding:0 4px }
.laag.beeldscherm .kader{ width:100%; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  background:#0A101C; box-shadow:0 34px 90px rgba(0,0,0,.6) }
.laag.beeldscherm .rb{ display:flex; align-items:center; gap:5px; padding:9px 12px; background:#121A28; border-bottom:1px solid rgba(255,255,255,.07) }
.laag.beeldscherm .rb i{ width:8px; height:8px; border-radius:50%; background:#3A4557 }
.laag.beeldscherm .rb span{ margin-left:9px; font-size:.68rem; color:var(--grijs) }
.laag.beeldscherm img{ width:100%; max-height:none }
.laag .bijschrift{ position:absolute; left:0; right:0; bottom:-4px; text-align:center; font-size:.82rem; color:var(--grijs) }

/* --- smalle schermen: naam boven, beeld eronder --- */
@media (max-width:900px){
  .plak{ grid-template-columns:1fr; gap:18px; align-content:center; padding:86px 20px 26px }
  .merkzij .uitleg{ display:none }
  .merkzij h3{ font-size:1.45rem; margin-bottom:6px }
  .trap{ display:flex; gap:16px; padding-left:0; padding-top:20px }
  .trap::before{ left:0; right:0; top:6px; bottom:auto; width:auto; height:2px }
  .trap .vulling{ left:0; top:6px; width:0; height:2px }
  .trap li{ flex:1; padding:0; font-size:.76rem; text-align:center }
  .trap li::before{ left:50%; top:-20px; margin:0 0 0 -7px }
  .trap li.nu{ transform:none }
  .merkbeeld{ height:min(52vh,420px) }
  .laag.beeldlogo img{ max-height:70% }
}

/* --- geen beweging gewenst, of geen javascript: alles gewoon onder elkaar --- */
.merkfilm.plat .spoor{ height:auto }
.merkfilm.plat .plak{ position:static; height:auto; display:block; padding:40px 26px }
.merkfilm.plat .trap{ display:none }
.merkfilm.plat .merkbeeld{ height:auto; margin-top:24px; perspective:none }
.merkfilm.plat .stapel{ position:static; transform:none !important; display:grid; gap:20px; transform-style:flat }
.merkfilm.plat .laag{ position:static; opacity:1; visibility:visible; transform:none; filter:none; display:block }
.merkfilm.plat .laag.beeldlogo{ background:#0A101C; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:26px; text-align:center }
.merkfilm.plat .laag.beeldlogo img{ max-height:180px; margin:0 auto }
.merkfilm.plat .gloed{ display:none }
@media (prefers-reduced-motion:reduce){
  .laag{ transition:none }
  .trap li{ transition:none }
}
.laag.beeldfoto img{ border-radius:16px; box-shadow:0 34px 90px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.08) }
.merkfilm.plat .laag.beeldfoto img,
.merkfilm.plat .laag.beeldscherm .kader{ width:100% }

.merkzij .teller{ font-family:'Space Grotesk',sans-serif; font-size:.8rem; font-weight:600; letter-spacing:.12em; color:var(--grijs); margin-bottom:16px }
.merkzij .teller i{ font-style:normal; opacity:.45; margin:0 3px }
.stapregel{ position:relative; height:3.2em; margin-bottom:24px }
.stapregel span{ position:absolute; left:0; right:0; top:0; color:#fff; font-size:.95rem; font-weight:600;
  opacity:0; transform:translateY(9px); transition:opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1) }
.stapregel span.nu{ opacity:1; transform:none }
@media (max-width:900px){ .stapregel{ height:2.6em; margin-bottom:8px; font-size:.9rem } .merkzij .teller{ margin-bottom:10px }
  .stempelrij{ height:25px; margin-bottom:10px } .merkzij .stempel{ font-size:.66rem; padding:4px 9px } }
.merkfilm.plat .stapregel{ display:none }

@media (max-width:900px){
  .merkbeeld{ perspective:1000px }
}
@media (prefers-reduced-motion:reduce){ .stapel{ transform:none !important } }

/* Hoeveel scrollen een stap kost. Op een muis is een wielklik in Chrome/Edge precies
   100 px, dus 185 px is netjes twee klikjes per stap. Een duimveeg op een telefoon legt
   1000 px of meer af; daar moet de stap dus veel groter zijn, anders vliegt een heel
   merk in één beweging voorbij. Dit hangt aan het aanwijsapparaat, niet aan de breedte. */
@media (hover:none) and (pointer:coarse){
  .merkfilm{ --stap-afstand:clamp(340px, 58vh, 620px) }
}

/* ---------- aanklikbaar blok naar de voorbeeldenpagina (homepagina) ---------- */
.uitnodiging{ display:flex; align-items:center; gap:26px; margin-top:34px; padding:26px 30px;
  border:1px solid rgba(95,178,255,.22); border-radius:16px; background:linear-gradient(100deg, rgba(47,111,234,.13), rgba(14,21,36,.5) 62%);
  text-decoration:none; position:relative; z-index:2; transition:transform .2s, border-color .2s, box-shadow .2s }
.uitnodiging:hover{ transform:translateY(-3px); border-color:rgba(95,178,255,.5);
  box-shadow:0 18px 46px rgba(0,0,0,.4), 0 0 42px rgba(47,140,255,.18) }
.uit-tekst{ display:flex; flex-direction:column; gap:7px }
.uit-tekst .kickerlijn{ margin:0 }
.uit-tekst strong{ font-family:'Space Grotesk',sans-serif; font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--krijt); font-weight:700 }
.uit-tekst span:last-child{ color:#B9C4D4; font-size:.95rem; max-width:60ch }
.uit-actie{ margin-left:auto; flex:none; display:flex; align-items:center; gap:14px }
.uit-doen{ color:var(--blauw-fel); font-weight:600; font-size:.95rem }
.uit-pijl{ flex:none; width:52px; height:52px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:1.35rem; color:#fff;
  background:var(--blauw-diep); box-shadow:0 4px 18px rgba(47,111,234,.4), 0 0 26px rgba(47,111,234,.35);
  transition:transform .2s }
.uitnodiging:hover .uit-pijl{ transform:translateX(4px) }
@media (max-width:700px){
  .uitnodiging{ flex-direction:column; align-items:flex-start; gap:16px; padding:22px }
  /* label en pijl blijven naast elkaar, maar schuiven onder de tekst */
  .uit-actie{ margin-left:0 }
  .uit-pijl{ width:46px; height:46px }
}
@media (prefers-reduced-motion:reduce){ .uitnodiging, .uit-pijl{ transition:none } }

/* ---------- meebewegen met het scrollen (data-beweeg) ----------
   Anders dan .onthul (één keer verschijnen) beweegt dit doorlopend
   mee: de plek in het venster bepaalt de stand. Het script zet
   --bx/--by/--bs en --bo; de stijl hier doet de rest, zodat een
   hover-effect (zoals de kaarten) er gewoon bovenop kan. */
[data-beweeg]{ opacity:var(--bo,0); transform:translate(var(--bx,0px), var(--by,0px)) scale(var(--bs,1)); will-change:transform, opacity }
.dienstkaart[data-beweeg]:hover, .ref[data-beweeg]:hover{ transform:translate(var(--bx,0px), calc(var(--by,0px) - 8px)) scale(var(--bs,1)) }
.uitnodiging[data-beweeg]:hover{ transform:translate(var(--bx,0px), calc(var(--by,0px) - 3px)) scale(var(--bs,1)) }
@media (prefers-reduced-motion:reduce){ [data-beweeg]{ opacity:1 !important; transform:none !important } }

/* dun blauw lijntje bovenin: hoe ver je op de pagina bent */
.scrollbalk{ position:fixed; left:0; top:0; height:3px; width:100%; z-index:61; pointer-events:none; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg, var(--blauw-diep), var(--blauw-fel)); box-shadow:0 0 12px rgba(91,155,255,.8) }

/* zwevend venster in de paginakop: beweegt trager dan de pagina en kantelt licht mee */
[data-beweeg="zweef"]{ transform:perspective(1200px) rotateX(var(--br,0deg)) translate(var(--bx,0px), var(--by,0px)) scale(var(--bs,1)) }

/* ---------- de paginakop komt op als de pagina laadt ---------- */
.paginakop .kicker, .paginakop h1, .paginakop p.sub{ animation:opkomen-kop .85s cubic-bezier(.2,.8,.2,1) both }
.paginakop h1{ animation-delay:.14s }
.paginakop p.sub{ animation-delay:.3s }
@keyframes opkomen-kop{ from{ opacity:0; transform:translateY(26px) } }
/* het venster onder de kop ademt zachtjes */
.paginakop .venster, .paginakop .kader{ animation:zweven 7s ease-in-out infinite }
@keyframes zweven{ 50%{ transform:translateY(-9px) } }
/* de neonlijnen pulseren traag */
.neon{ animation:neonpols 4.5s ease-in-out infinite alternate }
@keyframes neonpols{ from{ opacity:.45 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .paginakop .kicker, .paginakop h1, .paginakop p.sub, .paginakop .venster, .paginakop .kader, .neon{ animation:none }
}