/* ============================================================
   VLOERPRINT v3 - designsysteem (JV robotisch uitzetten)
   Merk: "Stuurlijn". Volwassen industrieel register:
   mono voor data, 1px hairlines, geen glow-inflatie, nooit vlak zwart.
   ============================================================ */

:root{
  /* oppervlakken - twee near-black tonen die bewust afwisselen */
  --ink-void:#0A0D12; --ink-base:#0F1319; --ink-alt:#0C1016; --ink-surface:#161B23; --ink-elevated:#212733;
  --line-hair:rgba(255,255,255,.08); --line-soft:rgba(255,255,255,.05); --line-solid:#2A313C;
  /* accent - één kleur, spaarzaam */
  --orange:#FF5B1A; --orange-bright:#FF7A45; --orange-press:#E24E12; --orange-glow:rgba(255,91,26,.18);
  /* stip & tekst */
  /* --text-low was #5C6675 en haalde het leescontrast niet: 2,97 tot 3,35 op de
     donkere ondergronden, terwijl 4,5 de norm is. Het is geen sierkleur - hij draagt
     de kleine labels op de kaarten, de stappenbalk, het tabelletje, de disclaimer en
     de hele footer. Op #7C8798 is de laagste waarde 4,75 (op de kaartachtergrond). */
  --dot:#FFFFFF; --text-hi:#E8ECF0; --text-mid:#9AA4B2; --text-low:#7C8798;
  /* maat */
  --wrap:1240px; --gut:clamp(20px,5vw,64px);
  --sect:clamp(72px,9vh,128px);
  --r:6px; --rc:12px;
  --font-d:"Space Grotesk",system-ui,sans-serif;
  --font-b:"Inter",system-ui,sans-serif;
  /* easing */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink-base); color:var(--text-hi);
  font-family:var(--font-b); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:var(--ink-base)}

/* ---------- typografie ---------- */
h1,h2,h3{font-family:var(--font-d);font-weight:600;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
/* line-height was .98; op 1.06 gezet omdat de staart van de j uit "Wij" op de regel erboven
   tegen de oranje balk aan liep (gemeten: 0,065em overlap op elke schermbreedte). De balk
   alleen omlaag schuiven kon niet - er zit maar 0,105em oranje boven de letters, dus dan
   was "wegvak" aan de bovenkant aangesneden. Extra regelafstand lost het op zonder dat de
   verhouding tussen balk en letters verandert. */
.display{font-family:var(--font-d);font-weight:600;font-size:clamp(2.9rem,7vw,6.4rem);line-height:1.06;letter-spacing:-.025em}
/* oranje markering in koppen - blok exact om de letters (de losse ::before
   laat zich, anders dan een gewone achtergrond, strak op de glyphs afmeten) */
.hl{position:relative;isolation:isolate;color:var(--ink-void);background:none;
  /* donkere letters op een dicht oranje vlak hebben geen schaduw nodig; de schaduw van de
     kop eromheen gaf hier een zware waas over het oranje */
  text-shadow:none}
.hl::before{content:"";position:absolute;z-index:-1;
  left:-.07em;right:-.07em;top:.21em;bottom:.155em;
  background:var(--orange);border-radius:.045em}
/* Woorden met een staart (de g in "wegvak") hebben een dieper blok nodig, anders steekt die
   staart eronderuit. Alleen daar toepassen: bij een woord zonder staart ("bouwterrein" op de
   homepage) zou hetzelfde blok onderaan te zwaar worden. */
.hl--staart::before{bottom:.055em}
h1{font-size:clamp(2.3rem,5vw,4.2rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
h3{font-size:clamp(1.3rem,1.9vw,1.7rem);font-weight:500}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--text-mid);line-height:1.55;max-width:60ch}
.mono{font-family:var(--font-d);letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* sectiekop: nummer - hairline - kicker (engineering-register) */
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.sec-head .idx{font-family:var(--font-d);font-size:.78rem;letter-spacing:.1em;color:var(--orange);font-variant-numeric:tabular-nums}
.sec-head .kicker{font-family:var(--font-d);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--text-mid);white-space:nowrap}
.sec-head .rule{flex:1;height:1px;background:var(--line-hair)}
.sec-head .coord{font-family:var(--font-d);font-size:.68rem;letter-spacing:.08em;color:var(--text-low);font-variant-numeric:tabular-nums}

/* hero-overline (compacter, zonder glow-ring) */
.overline{font-family:var(--font-d);font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--orange);display:inline-flex;align-items:center;gap:10px}
.overline::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
/* anker-doelen niet achter de vaste nav laten landen na een menu-/ankerklik */
#uitzetten,#diensten,#werkwijze,#over,#wegdiensten,#waaromweg{scroll-margin-top:88px}
.section{padding-block:var(--sect);position:relative}
.section--tight{padding-block:clamp(52px,7vh,96px)}
.section--alt{background:var(--ink-alt)}
.stack>*+*{margin-top:1.1em}

/* doorlopend tekenblad: fijne blueprint-grid over de HELE pagina */
.sheet{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
main,.trust,.footer,.hero{position:relative;z-index:1}


/* sectie-naad: uitzetlijn + witte stip - vult de "lege" naden met betekenis */
.seam{position:relative;height:0;z-index:2}  /* boven de aangrenzende beeldbanden: labels/stippen nooit half afgesneden */
.seam::before{content:"";position:absolute;left:50%;top:-54px;width:1px;height:108px;background:linear-gradient(to bottom,transparent,var(--line-solid) 30%,var(--line-solid) 70%,transparent);transform:translateX(-.5px)}
.seam::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--dot);transform:translateX(-50%);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.seam .co{position:absolute;left:calc(50% + 16px);top:-9px;font-family:var(--font-d);font-size:.64rem;letter-spacing:.08em;color:var(--text-low);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gut);transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(12,15,20,.85);backdrop-filter:blur(14px);border-bottom-color:var(--line-hair)}
/* mobiel open menu: de backdrop-filter van .scrolled maakt het fixed menu anders
   relatief aan de (kleine) navbalk i.p.v. het scherm -> menu klapte samen bovenin
   zodra je gescrold was. Tijdens open dus geen filter (het volle menu dekt de balk af). */
.nav.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none;transition:none}
.brand{font-family:var(--font-d);font-weight:600;font-size:1.25rem;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:9px}
.brand .d{width:7px;height:7px;border-radius:50%;background:var(--orange);display:inline-block;margin-left:2px}
/* logo: het serpentine-plotpad van de robot dat een S vormt, eindigend in de witte stip */
.brand .lgo{height:1.12em;width:auto;flex:none}
.nav-links{display:flex;align-items:center;gap:8px}
/* donkere blokken achter de nav-tekst (leesbaar over de lichte video);
   zodra de donkere navbalk verschijnt (.scrolled) gaan ze daarin op */
.nav-links a:not(.nav-cta){font-family:var(--font-d);font-size:.9rem;color:var(--text-mid);position:relative;padding:9px 14px;
  background:rgba(12,15,20,.72);border-radius:var(--r);
  transition:color .2s var(--ease),background-color .4s var(--ease)}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:14px;bottom:7px;height:1px;width:0;background:var(--orange);transition:width .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.nav-links a:not(.nav-cta):hover{color:var(--text-hi)}.nav-links a:not(.nav-cta):hover::after{width:calc(100% - 28px)}}
.nav.scrolled .nav-links a:not(.nav-cta){background:transparent}
/* merknaam: bewust géén blok - zachte schaduw houdt hem leesbaar over de video */
.nav .brand{text-shadow:0 1px 12px rgba(6,9,13,.65)}
.nav .brand .lgo{filter:drop-shadow(0 1px 5px rgba(6,9,13,.5))}
.nav-cta{margin-left:10px}
.burger{display:none;background:rgba(12,15,20,.72);border:0;border-radius:var(--r);color:var(--text-hi);width:42px;height:42px;cursor:pointer;transition:background-color .4s var(--ease)}
.nav.scrolled .burger{background:transparent}
.burger span{display:block;width:22px;height:2px;background:currentColor;margin:5px auto;transition:.25s}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-d);font-weight:500;font-size:.98rem;display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .16s var(--ease-out),background-color .2s var(--ease),box-shadow .28s var(--ease-out),border-color .2s var(--ease),color .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn .dot{width:8px;height:8px;border-radius:50%;background:currentColor;transition:transform .2s var(--ease-out)}
.btn:hover .dot{transform:scale(1.3)}
.btn--primary{background:var(--orange);color:var(--ink-base);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 20px rgba(0,0,0,.25)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.2);color:var(--text-hi)}
.btn--lg{padding:17px 32px;font-size:1.05rem}
.arrow{transition:transform .2s var(--ease-out)}.btn:hover .arrow{transform:translateX(4px)}
@media(hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--orange-bright);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 30px rgba(0,0,0,.35)}
  .btn--ghost:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
}

/* ---------- OPENING: video-hero ---------- */
/* poster-beeld als achtergrond: blokkeert iOS de autoplay, dan verbergt
   main.js de video (.vhero--still) en staat hier hetzelfde beeld - nooit
   een kale play-knop over de tekst */
/* 100vh rekent op telefoons met de hoogte ZONDER adres- en werkbalk, terwijl die er bij
   het openen juist staan. De onderkant van de hero viel daardoor achter de browserbalk.
   100svh is de kleine viewport (balken zichtbaar), dus dan past het altijd; de regel
   erboven blijft staan als terugval voor browsers die svh niet kennen. */
.vhero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;
  background:var(--ink-void) url("../beeld/intro-poster.webp") center/cover no-repeat}
.vhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;transition:opacity .5s ease}
.vhero.vhero--still video{opacity:0}
.vhero__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,13,18,.5) 0%,rgba(10,13,18,.06) 24%,transparent 42%),
  linear-gradient(to right,rgba(10,13,18,.5),transparent 58%),
  linear-gradient(to top,rgba(10,13,18,.88) 0%,rgba(10,13,18,.3) 34%,transparent 60%)}
.vhero__copy{position:absolute;left:0;right:0;bottom:12vh;padding-inline:var(--gut)}
.vhero__copy .inner{margin:0 auto;max-width:min(var(--wrap),100%)}
.vhero__copy .kader{max-width:820px}
/* hero-lead net iets beter leesbaar over de video: fractie lichter + zachte schaduw */
.vhero__copy .lead{color:#DEE5EC;text-shadow:0 1px 18px rgba(6,9,13,.7)}

/* ---------- SCROLL-SCÈNE ---------- */
.hero{position:relative;height:300vh}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink-void)}
.hero__bg{position:absolute;inset:-4%;background:#0b0e13 center 55%/cover no-repeat;will-change:transform}
.hero__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,13,18,.55) 0%,rgba(10,13,18,.05) 22%,transparent 40%),
  linear-gradient(to top,rgba(10,13,18,.82) 0%,rgba(10,13,18,.2) 30%,transparent 55%)}
.hero__robot{position:absolute;left:0;top:0;width:24vw;will-change:transform;pointer-events:none;
  transform-origin:50% 94%;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.hero__robot img{width:100%;height:auto}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%}
.hero__reveal{position:absolute;inset:0;background:var(--ink-void);pointer-events:none}
.hero__coords{position:absolute;top:88px;right:var(--gut);font-family:var(--font-d);font-size:.72rem;letter-spacing:.06em;color:var(--text-low);text-align:right;pointer-events:none;font-variant-numeric:tabular-nums;line-height:1.7}
.hero__coords b{color:var(--text-mid);font-weight:500}
.hero__coords span{color:var(--orange)}
.hero__copy{position:absolute;left:0;right:0;padding-inline:var(--gut);pointer-events:none}
.hero__copy .inner{margin:0 auto;max-width:min(var(--wrap),100%)}
.hero__copy .kader{max-width:820px}
.hero__copy.b1{bottom:15vh}.hero__copy.b2{top:19vh}.hero__copy.bm{top:19vh}.hero__copy.b3{bottom:16vh}
/* scroll-scène-teksten net iets beter leesbaar over het terrein (zelfde als video-hero) */
.hero__copy .lead{color:#DEE5EC;text-shadow:0 1px 18px rgba(6,9,13,.7),0 0 5px rgba(6,9,13,.55)}
/* scène-koppen krijgen een strakke donkere gloed zodat witte tekst ook
   leesbaar blijft waar de (lichte) robot er even achterlangs rijdt */
.hero__copy h2,.hero__copy .display{text-shadow:0 2px 20px rgba(6,9,13,.55),0 0 6px rgba(6,9,13,.5)}
.hero__copy .btn{pointer-events:auto}
.beat{opacity:0;will-change:opacity,transform}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
/* scroll-hint: vliegt de hele site mee (fixed onderin beeld) zodat bezoekers
   blijven zien dat er meer is. Vervaagt alleen onderaan de pagina of bij open menu. */
.scrollhint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:46;pointer-events:none;color:var(--text-low);font-family:var(--font-d);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;
  animation:zweef 3.4s var(--ease-in-out) infinite;transition:opacity .5s var(--ease-out)}
@keyframes zweef{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-9px)}}
body.at-bottom .scrollhint,body.menu-open .scrollhint{opacity:0}
.scrollhint .l{width:1px;height:44px;background:linear-gradient(to bottom,transparent,var(--text-low));position:relative;overflow:hidden}
.scrollhint .l::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--text-hi);animation:drip 2.2s var(--ease-in-out) infinite}
@keyframes drip{0%{top:-40%}70%,100%{top:110%}}
.scrollhint span{padding-bottom:18px}

/* z-volgorde hero-lagen */
.hero__bg{z-index:1}.hero__canvas{z-index:2}.hero__robot{z-index:3}
.hero__reveal{z-index:4}.hero__veil{z-index:5}.hero__copy{z-index:6}
.hero__coords{z-index:7}

/* bewijs-strook onder de hero-kop */
.proof{display:flex;gap:clamp(20px,4vw,54px);flex-wrap:wrap;margin-top:30px;font-family:var(--font-d)}
.proof div{font-size:.8rem;color:var(--text-mid);line-height:1.35}
.proof b{display:block;font-weight:600;font-size:clamp(1.35rem,2.3vw,1.9rem);color:var(--text-hi);font-variant-numeric:tabular-nums}
.proof b i{font-style:normal;color:var(--orange)}

/* ---------- vertrouwensbalk (marquee) ---------- */
.trust{border-block:1px solid var(--line-hair);background:var(--ink-void);overflow:hidden}
.trust .in{display:flex;align-items:center;gap:0;padding-block:22px}
.trust .lbl{font-family:var(--font-d);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-low);white-space:nowrap;padding-inline:var(--gut) 34px;flex:none;position:relative;z-index:2;background:var(--ink-void)}
.marquee{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee .track{display:flex;gap:0;width:max-content;animation:marq 46s linear infinite}
.marquee .set{display:flex;align-items:center;gap:clamp(28px,4vw,56px);padding-right:clamp(28px,4vw,56px);color:var(--text-low);font-family:var(--font-d);font-weight:500;white-space:nowrap}
.marquee .set i{font-style:normal;color:var(--line-solid);font-size:.7em}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- stat blok ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-solid);border:1px solid var(--line-solid);border-radius:var(--rc);overflow:hidden}
.stat{background:var(--ink-surface);padding:clamp(24px,3vw,40px)}
.stat .num{font-family:var(--font-d);font-weight:600;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .num i{font-style:normal;color:var(--orange)}
.stat .cap{color:var(--text-mid);margin-top:10px;font-size:.92rem}
.stat .u{display:block;font-family:var(--font-d);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-low);margin-top:14px}
.disclaimer{color:var(--text-low);font-size:.85rem;margin-top:18px}

/* ---------- spec-tabel (engineering-register) ---------- */
.spec{margin-top:26px;border-top:1px solid var(--line-hair)}
.spec div{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px solid var(--line-hair);align-items:baseline}
.spec dt{font-family:var(--font-d);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-low)}
.spec dd{font-family:var(--font-d);font-size:.95rem;color:var(--text-hi);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- cards ---------- */
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--ink-surface);border:1px solid var(--line-hair);border-radius:var(--rc);padding:28px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease-out),border-color .25s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .card:hover{border-color:rgba(255,91,26,.55);transform:translateY(-2px)}
}
.card .k{font-family:var(--font-d);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-low);margin-bottom:16px;display:flex;justify-content:space-between;gap:12px}
.card .k b{color:var(--orange);font-weight:500;font-variant-numeric:tabular-nums}
.card h3{margin-bottom:10px}
.card p{color:var(--text-mid);font-size:.96rem}
/* ---------- livery-motief op de infra-lijnsoortkaarten ----------
   Wens Tijmen (review RV-2607-9264): "kleurenpatroon van nieuwe Robot stijl".
   Het herkenbare van de wrap is niet het palet (dat gebruikt de site al) maar het PATROON:
   een oranje lijnennetwerk dat uitsluitend 0 en 45 graden kent, met een knooppunt op de knik
   en losse witte meetpunt-stippen ernaast. Elke kaart krijgt een eigen fragment van dat
   netwerk in de vrije benedenhoek. Terugdraaien = dit blok verwijderen; verder verandert er
   niets aan de kaarten. */
/* Onderin elke kaart een vaste strook vrijhouden voor het motief. Zonder die ruimte liep de
   lijn bij de langste kaart dwars door de tekst - dat leest als een fout, niet als ontwerp.
   De strook is even hoog op alle vier, dus de rij blijft rustig, ongeacht de tekstlengte. */
#wegdiensten .card{padding-bottom:92px;background-repeat:no-repeat;background-position:right -6px bottom 4px;background-size:88px 88px}
#wegdiensten .card:nth-child(1){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M0,100L40,60L120,60' fill='none' stroke='%23FF5B1A' stroke-width='2' opacity='.5'/%3E%3Ccircle cx='40' cy='60' r='4.5' fill='%23FF5B1A' opacity='.8'/%3E%3Ccircle cx='80' cy='26' r='2.5' fill='%23fff' opacity='.42'/%3E%3Ccircle cx='22' cy='40' r='2.5' fill='%23fff' opacity='.42'/%3E%3C/svg%3E")}
#wegdiensten .card:nth-child(2){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M0,52L56,52L112,108' fill='none' stroke='%23FF5B1A' stroke-width='2' opacity='.5'/%3E%3Ccircle cx='56' cy='52' r='4.5' fill='%23FF5B1A' opacity='.8'/%3E%3Ccircle cx='26' cy='96' r='2.5' fill='%23fff' opacity='.42'/%3E%3Ccircle cx='96' cy='24' r='2.5' fill='%23fff' opacity='.42'/%3E%3C/svg%3E")}
#wegdiensten .card:nth-child(3){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M120,104L64,48L0,48' fill='none' stroke='%23FF5B1A' stroke-width='2' opacity='.5'/%3E%3Ccircle cx='64' cy='48' r='4.5' fill='%23FF5B1A' opacity='.8'/%3E%3Ccircle cx='100' cy='84' r='3' fill='%23FF5B1A' opacity='.6'/%3E%3Ccircle cx='30' cy='92' r='2.5' fill='%23fff' opacity='.42'/%3E%3C/svg%3E")}
#wegdiensten .card:nth-child(4){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M0,72L36,36L120,36M76,36L100,12' fill='none' stroke='%23FF5B1A' stroke-width='2' opacity='.5'/%3E%3Ccircle cx='36' cy='36' r='4.5' fill='%23FF5B1A' opacity='.8'/%3E%3Ccircle cx='64' cy='88' r='2.5' fill='%23fff' opacity='.42'/%3E%3Ccircle cx='104' cy='64' r='2.5' fill='%23fff' opacity='.42'/%3E%3C/svg%3E")}

/* kleine doorklik onderin een kaart (bijv. dienst → eigen pagina) */
.card .more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--font-d);font-size:.82rem;letter-spacing:.02em;color:var(--orange)}
.card .more .arrow{transition:transform .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.card:hover .more .arrow{transform:translateX(4px)}}

/* ---------- over ons: persoon-kaart met portret ---------- */
.persoon{display:flex;gap:22px;align-items:center;padding:22px}
.persoon__foto{flex:0 0 128px;width:128px;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-hair);background:var(--ink-void)}
.persoon__foto img{width:100%;height:100%;object-fit:cover}
.persoon__txt{min-width:0}
.persoon__txt .k{margin-bottom:10px}
.persoon__txt h3{margin-bottom:8px}
@media(max-width:520px){.persoon{gap:16px;padding:18px}.persoon__foto{flex:0 0 104px;width:104px}}

/* ---------- proces stappen ---------- */
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));counter-reset:s}
.step{background:var(--ink-surface);border:1px solid var(--line-hair);border-radius:var(--rc);padding:30px;position:relative}
.step::before{counter-increment:s;content:"0" counter(s) " /";font-family:var(--font-d);font-weight:500;font-size:.78rem;letter-spacing:.1em;color:var(--text-low);display:block;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line-hair);font-variant-numeric:tabular-nums}
.step h3{margin-bottom:8px}.step p{color:var(--text-mid);font-size:.96rem}

/* ---------- volledige-breedte beeldbanden ---------- */
.videoband{position:relative;height:min(84vh,680px);display:flex;align-items:flex-end;overflow:hidden;
  background:linear-gradient(180deg,#141a22,#0b0e13)}
.videoband video,.videoband .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.videoband .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,13,18,.9),rgba(10,13,18,.2) 55%,rgba(10,13,18,.42))}
.videoband .wrap{position:relative;padding-bottom:clamp(40px,8vh,84px);width:100%}
.videoband .bandfoot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.videoband .co{font-family:var(--font-d);font-size:.68rem;letter-spacing:.1em;color:var(--text-mid);font-variant-numeric:tabular-nums;text-transform:uppercase}
/* tekst óp foto's: net wat witter met een zachte schaduw (leesbaarheid, vooral mobiel) */
.videoband .bandfoot .lead,.waaromband .stack .lead{color:#DEE5EC;text-shadow:0 1px 14px rgba(6,9,13,.6)}
.waaromband .stack p:not(.lead){color:#C9D1DC;text-shadow:0 1px 12px rgba(6,9,13,.55)}
.videoband .co,.waaromband .co{color:#B9C2CE;text-shadow:0 1px 10px rgba(6,9,13,.6)}
.videoband .bandfoot h2,.waaromband h2{text-shadow:0 2px 22px rgba(6,9,13,.45)}
.waaromband .spec dt{color:#A9B3C0}
/* oranje overlines vallen weg op lichte fotodelen: donkere schaduw eronder */
.videoband .overline,.waaromband .overline,.hero__copy .overline{text-shadow:0 1px 10px rgba(6,9,13,.85),0 0 2px rgba(6,9,13,.6)}
.videoband .overline::before,.waaromband .overline::before,.hero__copy .overline::before{box-shadow:0 1px 6px rgba(6,9,13,.8)}
/* meetregel in de scroll-scène iets steviger tegen lichte wolken */
.hero__coords{text-shadow:0 1px 10px rgba(6,9,13,.7)}
@media(max-width:760px){
  .videoband .bandfoot .lead,.waaromband .stack .lead{color:#E8ECF0}
  .vhero__copy .lead,.hero__copy .lead{color:#E6EBF1}
}
/* duo-band: twee stip-foto's zij-aan-zij (wit + roze), smalle donkere naad ertussen */
.videoband .duo{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;column-gap:2px;background:var(--ink-void)}
.videoband .duo .poster{position:relative;inset:auto}
@media(max-width:720px){.videoband--duo{height:min(58vh,460px)!important}}

/* ---------- splits & mediakaders ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.media-frame{border:1px solid var(--line-hair);border-radius:var(--rc);overflow:hidden;position:relative}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame .tag{position:absolute;left:14px;bottom:14px;font-family:var(--font-d);font-size:.7rem;letter-spacing:.06em;color:var(--text-hi);background:rgba(10,13,18,.72);backdrop-filter:blur(6px);padding:6px 12px;border-radius:var(--r)}
.media-frame .reg{position:absolute;top:10px;right:14px;font-family:var(--font-d);font-size:.8rem;color:rgba(255,255,255,.4);pointer-events:none}

/* ---------- CTA slot ---------- */
.ctaband{text-align:center;border:1px solid var(--line-hair);border-radius:var(--rc);background:linear-gradient(180deg,var(--ink-surface),var(--ink-base));padding:clamp(48px,7vw,88px) var(--gut);position:relative;overflow:hidden}
.ctaband .display{margin-bottom:24px;font-size:clamp(2.2rem,5vw,4rem)}
.ctaband .ctabg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;opacity:.34;z-index:0}
.ctaband .ctaveil{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(15,19,25,.88),rgba(15,19,25,.5) 48%,rgba(15,19,25,.92))}
.ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(90% 90% at 50% 50%,#000,transparent 80%)}
.ctaband>*{position:relative}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line-hair);background:var(--ink-void);padding-block:64px 40px;color:var(--text-mid)}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer h4{font-family:var(--font-d);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-low);margin-bottom:16px}
.footer a{color:var(--text-mid);display:block;padding:5px 0}.footer a:hover{color:var(--orange)}
.footer .brand{color:var(--text-hi);font-size:1.4rem;margin-bottom:14px}
.footer .fine{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-hair);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--text-low)}

/* nog te bevestigen door klant - subtiel, geen schreeuwende pill */
.tbc{color:var(--text-mid);font-style:normal;border-bottom:1px dotted var(--orange)}

/* ---------- reveal-animatie (nooit 100% verborgen) ---------- */
.reveal-up{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.reveal-up.in{opacity:1;transform:none}
html:not(.js) .reveal-up,html:not(.js) .clip-reveal{opacity:1;transform:none;clip-path:none}
.cards .reveal-up:nth-child(2),.steps .reveal-up:nth-child(2),.stats .reveal-up:nth-child(2){transition-delay:.06s}
.cards .reveal-up:nth-child(3),.steps .reveal-up:nth-child(3),.stats .reveal-up:nth-child(3){transition-delay:.12s}
.cards .reveal-up:nth-child(4),.stats .reveal-up:nth-child(4){transition-delay:.18s}
.clip-reveal{clip-path:inset(0 0 30% 0);opacity:.4;transition:clip-path .8s var(--ease-in-out),opacity .8s var(--ease)}
.clip-reveal.in{clip-path:inset(0 0 0 0);opacity:1}
.clip-reveal img{transform:scale(1.05);transition:transform 1.2s var(--ease-out)}
.clip-reveal.in img{transform:scale(1)}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  /* gesloten menu ook echt onbereikbaar (niet focusbaar/tabbaar buiten beeld) */
  .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:26px;background:var(--ink-base);transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility 0s .3s;font-size:1.3rem}
  /* touch-action:none stopt dat een veeg op het (niet-scrollbare) open menu
     de pagina eronder onzichtbaar meescrolt */
  .nav-links.open{transform:none;visibility:visible;transition:transform .3s;touch-action:none;overscroll-behavior:contain}
  .nav-links a{font-size:1.3rem}
  /* in het uitgeklapte menu (eigen donkere achtergrond) geen losse blokken */
  .nav-links a:not(.nav-cta){background:transparent;padding:4px 0}
  .nav-links a:not(.nav-cta)::after{left:0;bottom:-2px}
  .burger{display:block;z-index:60}
  .footer .cols{grid-template-columns:1fr}
  .hero{height:250vh}
  .vhero__copy{bottom:8vh}
  .vhero__veil{background:linear-gradient(to bottom,rgba(10,13,18,.5) 0%,rgba(10,13,18,.08) 22%,transparent 40%),
    linear-gradient(to top,rgba(10,13,18,.94) 0%,rgba(10,13,18,.62) 45%,rgba(10,13,18,.15) 72%,transparent 88%)}
  .hero__coords{display:none}
  /* het lange hint-lijntje snijdt op smalle schermen door de bewijs-strook:
     op mobiel alleen het woord "Scroll" tonen, zonder verticale lijn */
  .scrollhint .l{display:none}
  .scrollhint span{padding-bottom:10px}
  .hero__robot{width:38vw}
  .seam .co{display:none}
  :root{--sect:clamp(56px,8vh,88px)}
  .display{font-size:clamp(2.45rem,11vw,3.2rem)}
  .hero__copy .lead{font-size:1rem}
  .hero__copy.b1{bottom:8vh}
  /* slot-tekst + knop iets hoger op mobiel: de robot parkeert eronder,
     niet meer half achter de knop */
  .hero__copy.b3{bottom:22vh}
  .proof{gap:16px 22px;margin-top:20px}
  .proof b{font-size:1.2rem}
  .cta-row{margin-top:20px;gap:10px}
  .btn--lg{padding:15px 24px;font-size:.98rem}
}

/* ---------- TELEFOONS: het heroblok moet passen ----------
   De tekst in de video-hero hangt aan de ONDERKANT (bottom:8vh). Wordt het blok hoger
   dan de ruimte tussen de navigatiebalk en die onderrand, dan schuift de bovenkant
   onder de balk door - en dan loopt "ROBOTISCH UITZETTEN & MAATVOERING" dwars door
   het logo. Gemeten op een iPhone SE met de Safari-balken in beeld: blok 575 px in een
   venster van 553 px, dus 134 px eroverheen. Op een iPhone 14 Pro Max paste het wel;
   vandaar dat het bij de een wel en bij de ander niet zichtbaar was.

   De drie bewijspunten vervallen op telefoons. Dat kost geen informatie: exact dezelfde
   cijfers (tot 12x sneller, mm-niveau, 1 operator) staan direct hieronder in het
   cijferblok, één veeg verder.

   Bewust op BREEDTE en niet op hoogte: de vensterhoogte verandert op iOS zodra de
   adresbalk in- of uitklapt, en dan zouden de bewijspunten tijdens het scrollen in en
   uit beeld springen. De breedte ligt vast. */
@media(max-width:600px),(max-height:39em){
  .vhero__copy .proof{display:none}
  .vhero__copy .stack>*+*{margin-top:.85em}
  .vhero__copy .lead{font-size:.98rem;line-height:1.5}
}
/* Écht krappe hoogte: telefoon in liggende stand, of iemand met een grote
   lettergrootte-instelling. Dan moet ook de kop zelf meekrimpen. De min(9vw,7.2vh)
   laat hem meebewegen met de KLEINSTE van breedte en hoogte, zodat hij nooit meer
   ruimte opeist dan er verticaal is. */
@media(max-height:39em){
  .vhero__copy .display{font-size:clamp(1.8rem,min(9vw,7.2vh),3rem)}
  .vhero__copy .lead{font-size:.92rem;line-height:1.45}
  .vhero__copy .stack>*+*{margin-top:.6em}
  .vhero__copy .btn--lg{padding:12px 18px;font-size:.92rem}
  .vhero__copy .cta-row{margin-top:14px;gap:8px}
}

/* ---------- WAAROM-BAND: beeld volle breedte, tekst loopt eroverheen ---------- */
.waaromband{position:relative;overflow:hidden;padding-block:clamp(72px,11vh,130px)}
.waaromband .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 38%}
.waaromband .ov{position:absolute;inset:0;background:
  linear-gradient(to right,rgba(10,13,18,.93) 0%,rgba(10,13,18,.8) 32%,rgba(10,13,18,.3) 62%,rgba(10,13,18,.12) 100%),
  linear-gradient(to top,rgba(10,13,18,.5),transparent 32%)}
.waaromband .wrap{position:relative}
@media(max-width:760px){
  .waaromband .ov{background:linear-gradient(to right,rgba(10,13,18,.92),rgba(10,13,18,.74))}
}

/* ---------- filmische sfeerlagen ---------- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:45}
.fx-vignette{background:radial-gradient(135% 105% at 50% 38%,transparent 55%,rgba(4,6,9,.32))}
.fx-grain{opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:170px 170px}

/* ---------- subtiele scroll-choreografie (alleen zonder reduced-motion) ---------- */
@media(prefers-reduced-motion:no-preference){
  /* naadlijn tussen secties tekent zichzelf; stip popt erna */
  .js .seam::before{transform:translateX(-.5px) scaleY(0);transform-origin:top;transition:transform .7s var(--ease-out)}
  .js .seam.in::before{transform:translateX(-.5px) scaleY(1)}
  .js .seam::after{opacity:0;transform:translateX(-50%) scale(.4);transition:opacity .4s var(--ease-out) .5s,transform .4s var(--ease-out) .5s}
  .js .seam.in::after{opacity:1;transform:translateX(-50%) scale(1)}
  .js .seam .co{opacity:0;transition:opacity .5s var(--ease-out) .6s}
  .js .seam.in .co{opacity:1}
  /* haarlijn in sectiekoppen schuift uit */
  .js .sec-head .rule{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out) .15s}
  .js .sec-head.in .rule,.js .in .sec-head .rule{transform:scaleX(1)}
  /* brede beeldbanden krijgen via main.js een lichte diepte-beweging */
  .videoband .poster{will-change:transform}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* hint blijft zichtbaar als scroll-aanwijzing, maar zonder beweging */
  .scrollhint{animation:none}
  .scrollhint .l::after{animation:none;display:none}
  .reveal-up,.clip-reveal{opacity:1;transform:none;clip-path:none;transition:none}
  .clip-reveal img{transform:none}
  .marquee .track{animation:none}
  .fx-grain{display:none}
}