/* 6 LABS — home.css
   Homepage met animaties. Merk-tokens gelijk aan styles.css. */
:root{--lime:#D9FF2F;--ink:#0A0A0A;--paper:#F7F6F3;--paper-dim:#ECEAE3;--orange:#FF7A00;--white:#fff;
  --line:rgba(10,10,10,.18);--dline:rgba(247,246,243,.14);
  --display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;--body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;--gutter:clamp(1.25rem,4vw,4rem);--shadow:6px 6px 0 var(--ink);
  --ease:cubic-bezier(.2,.9,.3,1);--head-h:68px;--tick-h:3.5rem}
@media (max-width:899px){:root{--head-h:60px}}
/* Schibsted Grotesk (OFL), variabel 400 tot 900: koppen 800, tekst 400/500 (besluit gebruiker 2026-10-19) */
@font-face{font-family:"Schibsted Grotesk";src:url("/fonts/schibsted-grotesk-latin-var.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 1rem);overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:500 clamp(.98rem,.94rem + .15vw,1.0625rem)/1.55 var(--body);overflow-x:clip}
img,svg{display:block;max-width:100%}
svg{overflow:visible}
a{color:inherit}
h1,h2,h3,p{margin:0}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--lime);padding:.6rem 1rem;z-index:200}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.D{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.88}
.ln{display:block;overflow:hidden;padding:.06em 0 .08em;margin:-.06em 0 -.08em}
.ln>span{display:block}
.mono{font-family:var(--mono);letter-spacing:.06em}
.num{font:600 .8rem var(--mono);letter-spacing:.12em}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--lime);color:var(--ink);border:2px solid var(--ink);
  font:800 .95rem var(--display);text-transform:uppercase;letter-spacing:-.02em;text-decoration:none;padding:.85rem 1.25rem .75rem;
  box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .18s var(--ease);cursor:pointer;min-height:44px}
.btn[disabled]{opacity:.75;pointer-events:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.lnk{font-weight:600;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}

/* merk */
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;min-height:44px}
.brand-six{height:2.2rem;width:auto;fill:var(--lime)}
.brand-labs{position:relative;display:block}
.brand-word{height:1.2rem;width:auto;fill:var(--paper)}
.brand-slash{position:absolute;right:-.55rem;top:-.5rem;height:.62rem;width:auto;fill:var(--lime)}

/* header */
.site-head{position:sticky;top:0;z-index:60;background:var(--ink);color:var(--paper);border-bottom:2px solid var(--lime)}
.head-bar{display:flex;align-items:center;gap:var(--gutter);height:calc(var(--head-h) - 2px)}
.head-nav{display:flex;gap:clamp(1rem,1.8vw,2rem);margin-left:auto}
.head-nav a{text-decoration:none;font-weight:600;font-size:.95rem}
.head-nav a:hover,.head-nav a[aria-current="page"]{color:var(--lime)}
.head-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}
.head-cta{padding:.6rem .9rem .5rem;font-size:.85rem;box-shadow:4px 4px 0 var(--lime);border-color:var(--lime)}
@media (max-width:899px){.head-nav{display:none}.head-cta{margin-left:auto}}
/* menu op de telefoon: een <details>, dus het werkt ook zonder JavaScript. De header blijft even hoog */
.menu{display:none}
.menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;margin-right:-.5rem;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu .bars,.menu .bars::before,.menu .bars::after{display:block;width:22px;height:2px;background:var(--paper);transition:transform .2s var(--ease),background-color .2s}
.menu .bars{position:relative}
.menu .bars::before,.menu .bars::after{content:"";position:absolute;left:0}
.menu .bars::before{top:-7px}.menu .bars::after{top:7px}
.menu[open] .bars{background:transparent}
.menu[open] .bars::before{transform:translateY(7px) rotate(45deg)}
.menu[open] .bars::after{transform:translateY(-7px) rotate(-45deg)}
.menu-nav{position:fixed;left:0;right:0;top:var(--head-h);max-height:calc(100svh - var(--head-h));overflow:auto;background:var(--ink);border-bottom:2px solid var(--lime);
  display:flex;flex-direction:column;padding:.4rem var(--gutter) 1.4rem;transform-origin:50% 0}
/* het menu klapt uit de kop (200 ms, ease-out); met minder beweging staat het er meteen */
.menu[open] .menu-nav{animation:menuIn .2s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}}
.menu-nav a{padding:.85rem 0;border-bottom:1px solid var(--dline);font:800 1.35rem/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;text-decoration:none}
.menu-nav a:last-child{border:0;color:var(--lime)}
.menu-nav a[aria-current="page"]{color:var(--lime)}
@media (max-width:899px){.menu{display:block}}

/* intro-overlay */
#intro{display:none}
.intro body{overflow:hidden}
.intro #intro{display:block;position:fixed;inset:0;z-index:100;animation:introSafe 0s 7s forwards}
.intro-run #intro{animation:none}
@keyframes introSafe{to{visibility:hidden;opacity:0}}
.i-bg{position:absolute;inset:0;background:var(--ink)}
.i-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2.5vw,2.5rem)}
.i-six{height:min(54vh,60vw);width:auto;fill:var(--lime);transform-origin:50.6% 68.7%}
.i-word{position:relative;align-self:center;margin-top:min(20vh,22vw)}
.i-labs{width:min(26vw,40vh);height:auto;fill:var(--paper)}
.i-slash{position:absolute;width:15.2%;right:-7.6%;top:-6.2%;height:auto;fill:var(--lime)}
.i-skip{position:absolute;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));background:none;border:0;color:#8C8C86;
  font:600 .85rem var(--body);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:.6rem}
@media (max-aspect-ratio:4/5){.i-lock{flex-direction:column;gap:2vh}.i-six{height:min(42vh,62vw)}.i-word{margin-top:0}.i-labs{width:min(62vw,30vh)}}

/* hero */
.hero{padding-block:clamp(1.5rem,4vh,3.5rem) clamp(2rem,5vh,4rem)}
@media (min-width:900px){.hero{min-height:calc(100svh - var(--head-h) - var(--tick-h));display:flex;align-items:center}}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero-h{font-size:clamp(2.5rem,min(5.2vw,8.4vh),5.4rem)}
.lock{display:flex;align-items:flex-end;gap:.1em;margin-top:.12em;fill:var(--ink)}
.lock .s{height:1.45em;width:auto}
.lock .wd{position:relative;display:block;margin-bottom:.02em}
.lock .w{height:.82em;width:auto}
.lock .sl{position:absolute;width:15.2%;right:-7.6%;top:-6.2%;height:auto}
.roll-wrap{margin-top:clamp(1rem,2.4vh,2rem);font-size:clamp(1.5rem,min(2.7vw,4.4vh),2.7rem)}
.roll{position:relative;display:block;height:1.95em;overflow:hidden}
.roll .opt{position:absolute;left:0;top:0;width:100%;padding-top:.05em}
.roll .opt:not(.fin){visibility:hidden}
.roll mark{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 60%/var(--hl,100%) 78%;color:inherit;padding:0 .08em;margin:0 -.08em}
.lede{margin-top:1.1rem;max-width:36ch;font-size:clamp(1rem,.96rem + .2vw,1.15rem)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 1.8rem;margin-top:1.5rem}
.stats{display:flex;flex-wrap:wrap;gap:.8rem 2rem;margin:1.8rem 0 0;padding:0;list-style:none}
.stats li{display:flex;align-items:baseline;gap:.5rem}
.stats b{font:800 2rem/1 var(--display);letter-spacing:-.02em}
.stats span{font:600 .78rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.slab{position:relative;background:var(--ink);aspect-ratio:4/5;max-height:max(22rem,calc(100svh - var(--head-h) - var(--tick-h) - 5rem));display:grid;place-items:center;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--lime);container-type:size}
.giant-six{height:72cqh;width:auto;fill:var(--lime);animation:drift 11s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(-1deg)}to{transform:translate3d(0,-12px,0) rotate(1deg)}}
.sticker{position:absolute;left:-1rem;bottom:2rem;background:var(--lime);color:var(--ink);font:600 .8rem var(--mono);letter-spacing:.16em;padding:.5rem .8rem;transform:rotate(-4deg);border:2px solid var(--ink)}
@media (max-width:899px){.hero-grid{grid-template-columns:1fr}.slab{aspect-ratio:16/9;max-width:560px;max-height:none}.giant-six{height:78cqh}}
.js .hero [data-a]{visibility:hidden;animation:showLate 0s 4.5s forwards}
.anim-ready .hero [data-a],.no-anim .hero [data-a]{animation:none;visibility:visible}
@keyframes showLate{to{visibility:visible}}

/* ticker */
.ticker{height:var(--tick-h);background:var(--ink);color:var(--paper);border-block:2px solid var(--ink);overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;align-items:center;height:100%;animation:tick 28s linear infinite}
.ticker-set{font:800 clamp(1rem,1.6vw,1.3rem) var(--display);letter-spacing:-.02em}
.ticker-set b{color:var(--lime);padding:0 .9rem}
@keyframes tick{to{transform:translateX(-50%)}}

/* secties */
.sec{padding-block:clamp(3.25rem,7vw,6.5rem)}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.4rem,3.6vw,3rem)}
.h-big{font-size:clamp(2.1rem,4.6vw,4.4rem)}
.kicker{max-width:38ch;font-size:clamp(1rem,.96rem + .2vw,1.15rem)}
.dark{background:var(--ink);color:var(--paper)}
.dark .num{color:var(--lime)}

/* WHY */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.why-copy .kicker{margin-top:1.6rem}
.swap-line{margin-top:2rem;display:flex;align-items:center;gap:1rem;font:600 .85rem var(--mono);letter-spacing:.1em}
.swap-line s{opacity:.5}
.swap-line b{background:var(--lime);padding:.25rem .55rem}
.why-stage{position:relative;aspect-ratio:5/4;max-width:600px;width:100%;justify-self:center}
.deck{position:absolute;left:8%;right:8%;top:16%;height:58%;background:var(--white);border:2px solid var(--ink);box-shadow:var(--shadow);padding:clamp(1rem,2.4vw,1.8rem)}
.deck .f{font:500 clamp(.7rem,1vw,.85rem) var(--mono);color:#777}
.deck .t{font:800 clamp(1.2rem,2.2vw,2rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.02em;margin-top:.9rem}
.deck i{display:block;height:.6rem;background:var(--paper-dim);margin-top:.7rem}
.deck i+i{width:62%}
.why-brush{position:absolute;left:-2%;width:104%;top:34%;height:30%;fill:var(--ink);pointer-events:none}
.app{position:absolute;left:50%;top:50%;width:min(44%,240px);aspect-ratio:9/16;transform:translate(-50%,-50%);background:var(--ink);border:2px solid var(--ink);
  box-shadow:10px 10px 0 var(--lime);border-radius:26px;padding:clamp(1.2rem,8%,2.4rem) clamp(.9rem,5%,1.4rem);display:flex;flex-direction:column;gap:7%;color:var(--paper)}
.app .bar{height:6%;background:var(--lime);border-radius:3px}
.app .row{height:9%;background:#1e1e1e;border-radius:6px;display:flex;align-items:center;padding:0 8%;gap:8%}
.app .row::before{content:"";width:12%;aspect-ratio:1;border-radius:50%;background:var(--lime)}
.app .ok{margin-top:auto;font:800 clamp(1rem,2vw,1.5rem) var(--display);text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.app .ok small{display:block;font:600 .7rem var(--mono);letter-spacing:.12em;color:var(--lime);margin-top:.4rem}
@media (max-width:899px){.why-grid{grid-template-columns:1fr}}

/* WHAT */
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.4rem)}
.svc{position:relative;background:var(--white);border:2px solid var(--ink);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:box-shadow .2s var(--ease)}
.svc:hover{box-shadow:8px 8px 0 var(--lime)}
.svc .vis{height:clamp(8rem,22vh,13rem);border-bottom:2px solid var(--ink);background:var(--paper-dim);position:relative;overflow:hidden}
.svc .bd{padding:1.2rem 1.2rem 1.1rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.svc h3{font:800 clamp(1.1rem,1.4vw,1.55rem)/.92 var(--display);text-transform:uppercase;letter-spacing:-.02em}
/* de hele kaart is een link naar de dienstpagina (de knoppen naar voorbeeldsites liggen erboven) */
.svc-link{text-decoration:none}
.svc-link::after{content:"";position:absolute;inset:0;z-index:1}
.svc-link .arr{display:inline-block;margin-left:.2em;transition:transform .2s var(--ease)}
.svc:hover .arr{transform:translateX(.2em)}
.svc .refs a{position:relative;z-index:2}
.svc p{flex:1}
.svc .num{flex:none}
/* prijskaartje: hangt over de rand tussen beeld en tekst (in de compacte kaart: linksonder in het beeld) */
.price{display:grid;grid-template-columns:auto auto;align-items:baseline;justify-content:start;column-gap:.35rem;
  background:var(--lime);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:.35rem .55rem .4rem;transform:rotate(-3deg);line-height:1}
.svc .price{position:absolute;z-index:1;right:-.55rem;top:calc(clamp(8rem,22vh,13rem) - 1.3rem);pointer-events:none}
.price span{font:600 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.price b{font:800 1.3rem/1 var(--display);letter-spacing:-.02em}
.price small{grid-column:1/-1;margin-top:.25rem;font:600 .55rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 0;padding:0;list-style:none}
.chips li{font:600 .72rem var(--mono);letter-spacing:.06em;border:1.5px solid var(--ink);padding:.25rem .5rem}
/* voorbeelden bij Websites: dezelfde chips, maar als link naar de echte site */
.chips.refs li{padding:0;background:var(--lime);letter-spacing:.02em;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.refs a{display:block;padding:.25rem .45rem;text-decoration:none}
.refs a[href^="http"]::after{content:" ↗"}.refs a:not([href^="http"])::after{content:" →"}
.refs li:hover{transform:translate(-2px,-2px);box-shadow:2px 2px 0 var(--ink)}
.wk{margin-top:.6rem}
.wk .tr{height:10px;background:var(--paper-dim);position:relative;overflow:hidden}
.wk .tr i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%}
.wk .lb{display:flex;justify-content:space-between;gap:.5rem;margin-top:.45rem;font:600 clamp(.62rem,.75vw,.75rem) var(--mono);letter-spacing:.08em;white-space:nowrap}
/* tot 1200px: compact, beeld als smalle kolom naast de tekst — alle vier in één scherm.
   Twee kolommen op tablet-liggend en kleine laptops, één kolom daaronder. */
@media (max-width:1199px){.svcs{grid-template-columns:1fr 1fr;gap:.8rem}
  .svc{display:grid;grid-template-columns:clamp(5.5rem,26vw,12rem) 1fr}
  .svc .vis{height:auto;border-bottom:0;border-right:2px solid var(--ink)}
  .svc .price{top:auto;right:auto;bottom:.55rem;left:-.45rem}
  .svc .bd{padding:.85rem 1rem .9rem;gap:.4rem}
  .svc .bd .num{display:none}
  .svc h3{font-size:1.15rem}
  .svc p{font-size:.88rem;line-height:1.45}
  .svc .chips{gap:.3rem;margin:0}.svc .chips li{font-size:.62rem;padding:.15rem .35rem}
  .svc .wk{margin-top:.15rem}.svc .wk .tr{height:8px}.svc .wk .lb{font-size:.62rem;margin-top:.3rem}}
@media (max-width:899px){.svcs{grid-template-columns:1fr}}
/* telefoon: de labels eruit — de zin erboven zegt het al — en de doorlooptijd naast de balk in plaats van eronder.
   Zo passen de vier diensten ook met adresbalk in één scherm */
@media (max-width:599px){.svcs{gap:.5rem}.svc .bd{padding:.65rem .9rem .7rem;gap:.3rem}.svc .chips{display:none}
  .svc h3{font-size:1.05rem}
  .svc .price{bottom:.4rem;left:-.4rem;padding:.2rem .32rem .24rem;border-width:1.5px;box-shadow:2px 2px 0 var(--ink);column-gap:.2rem}
  .svc .price span{font-size:.42rem;letter-spacing:.06em}.svc .price b{font-size:.85rem}.svc .price small{font-size:.4rem;letter-spacing:.06em;margin-top:.15rem}
  .svc .lead-l{display:none}.svc .lead{font:600 .6rem var(--mono);letter-spacing:.06em;text-transform:uppercase}.svc .chips.refs{display:flex;gap:.3rem}.svc .refs li{font-size:.6rem;letter-spacing:0}.svc .refs a{padding:.32rem .4rem}.svc .refs a::after{content:none}
  .svc .wk{display:flex;align-items:center;gap:.6rem}.svc .wk .tr{flex:1}.svc .wk .lb{margin:0}.svc .wk .lb span:first-child{display:none}}
@media (max-width:380px){.svc p{font-size:.84rem}}

/* service- en case-visuals: de lussen staan stil zolang het kaartje niet in beeld is */
.js .svc:not(.on) .vis *,.js .svc:not(.on) .vis *::after,.js .ph-card:not(.on) .vis *,.js .ph-card:not(.on) .vis *::after,.js .case:not(.on) .vis *,.js .case:not(.on) .live::before{animation-play-state:paused}

/* service-visuals */
.v-phone{position:absolute;left:50%;top:12%;bottom:-8%;width:34%;transform:translateX(-50%);background:var(--ink);border-radius:18px 18px 0 0;padding:12% 8%;display:flex;flex-direction:column;gap:9%}
.v-phone i{height:10%;background:#262626;border-radius:4px;transform-origin:0 50%;animation:grow 4s var(--ease) infinite}
.v-phone i:nth-child(1){background:var(--lime);animation-delay:0s}.v-phone i:nth-child(2){animation-delay:.25s}.v-phone i:nth-child(3){animation-delay:.5s}.v-phone i:nth-child(4){animation-delay:.75s;width:70%}
.v-phone b{position:absolute;right:-56%;top:16%;font:600 .62rem var(--mono);letter-spacing:.08em;background:var(--lime);border:1.5px solid var(--ink);padding:.2rem .4rem;white-space:nowrap;animation:pop 4s var(--ease) infinite 1.1s}
@keyframes grow{0%,8%{transform:scaleX(0)}25%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes pop{0%,10%{transform:scale(0)}22%,85%{transform:scale(1)}100%{transform:scale(0)}}
.v-doc{position:absolute;inset:14% 10%;display:flex;align-items:center;gap:8%}
.v-doc .pg{position:relative;width:34%;aspect-ratio:3/4;background:var(--white);border:2px solid var(--ink);padding:9%;display:flex;flex-direction:column;gap:9%;overflow:hidden}
.v-doc .pg i{height:7%;background:var(--paper-dim)}.v-doc .pg i:nth-child(odd){width:75%}
.v-doc .scan{position:absolute;left:0;right:0;top:0;height:16%;background:linear-gradient(transparent,rgba(217,255,47,.9));transform:translateY(-100%);animation:scan 3s ease-in-out infinite}
@keyframes scan{0%{transform:translateY(-100%)}60%,100%{transform:translateY(625%)}}
.v-doc .ar{font:800 1.6rem var(--display)}
.v-doc .out{flex:1;display:flex;flex-direction:column;gap:.5rem}
.v-doc .out span{height:1.2rem;border:2px solid var(--ink);background:var(--white);position:relative;overflow:hidden}
.v-doc .out span::after{content:"";position:absolute;inset:0;background:var(--lime);transform-origin:0 50%;animation:fill 3s var(--ease) infinite}
.v-doc .out span:nth-child(2)::after{animation-delay:.25s}.v-doc .out span:nth-child(3)::after{animation-delay:.5s}
@keyframes fill{0%,45%{transform:scaleX(0)}70%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.v-web{position:absolute;inset:12% 9% -6%;background:var(--white);border:2px solid var(--ink)}
.v-web .tb{height:12%;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:3%;padding-left:3%}
.v-web .tb i{width:3.5%;aspect-ratio:1;border-radius:50%;background:var(--ink)}
.v-web .gd{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:5%;padding:5%;height:88%}
.v-web .gd span{border:2px dashed var(--ink);animation:solid 4.4s var(--ease) infinite}
.v-web .gd span:first-child{grid-row:span 2}
.v-web .gd span:nth-child(2){animation-delay:.3s}.v-web .gd span:nth-child(3){animation-delay:.6s}
@keyframes solid{0%,20%{background:transparent;border-style:dashed}35%,85%{background:var(--lime);border-style:solid}100%{background:transparent;border-style:dashed}}
.v-site{position:absolute;inset:12% 9% -6%;background:var(--white);border:2px solid var(--ink);display:flex;flex-direction:column}
.v-site .url{position:relative;flex:none;height:16%;border-bottom:2px solid var(--ink);overflow:hidden;font:600 clamp(.55rem,.75vw,.72rem)/1 var(--mono);letter-spacing:.04em}
.v-site .url span{position:absolute;left:0;right:0;top:50%;margin-top:-.5em;text-align:center;white-space:nowrap;opacity:0;animation:swapUrl 12s var(--ease) infinite}
.v-site .url span:nth-child(2){animation-delay:4s}.v-site .url span:nth-child(3){animation-delay:8s}
@keyframes swapUrl{0%,2%{opacity:0;transform:translateY(90%)}6%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-90%)}}
.v-site .pg{position:relative;flex:1;overflow:hidden;background:var(--paper-dim)}
.v-site .pg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;opacity:0;animation:swapShot 12s var(--ease) infinite}
.v-site .pg picture:nth-child(2) img{animation-delay:4s}.v-site .pg picture:nth-child(3) img{animation-delay:8s}
@keyframes swapShot{0%{opacity:0;transform:scale(1.06)}5%,30%{opacity:1;transform:scale(1)}36%,100%{opacity:0;transform:scale(1)}}
/* de dienst-beelden in een smalle, hoge kolom (compacte kaart op de telefoon) */
@media (max-width:599px){
  .svc .v-phone{width:60%;top:10%;border-radius:12px 12px 0 0}
  .svc .v-phone b{right:-24%;top:4%;font-size:.5rem;padding:.12rem .25rem}
  .svc .v-doc{inset:9% 16%;flex-direction:column;gap:5%}
  .svc .v-doc .pg{width:78%}
  .svc .v-doc .ar{font-size:1rem;transform:rotate(90deg)}
  .svc .v-doc .out{flex:none;width:100%;gap:.3rem}
  .svc .v-doc .out span{height:.8rem;border-width:1.5px}
  .svc .v-web{inset:10% 12% -4%}
  .svc .v-web .tb{height:8%}.svc .v-web .tb i{width:9%}
  .svc .v-web .gd{grid-template-columns:1fr;grid-template-rows:2fr 1fr 1fr;gap:6%;padding:9%;height:92%}
  .svc .v-web .gd span:first-child{grid-row:auto}
  .svc .v-site{inset:10% 10% -4%}
  .svc .v-site .url{height:13%;font-size:.42rem;letter-spacing:0;border-bottom-width:1.5px}
}

/* PROOF */
/* vijf cases: twee breed bovenaan, drie eronder */
.cases{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.7rem,1.2vw,1rem)}
.case{grid-column:span 2}.case:nth-child(-n+2){grid-column:span 3}
.case{background:#131313;border:1.5px solid #2a2a2a;display:flex;flex-direction:column;text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
a.case:hover{border-color:var(--lime);transform:translateY(-4px)}
.case .vis{height:clamp(7rem,17vh,10.5rem);position:relative;overflow:hidden;border-bottom:1.5px solid #2a2a2a;background:#0f0f0f}
.case .bd{padding:.8rem 1rem .9rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.case h3{font:800 1.15rem/1 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.case p{font-size:.88rem;line-height:1.45;color:#B7B7B0;flex:1}
.case .ft{display:flex;justify-content:space-between;align-items:center;margin-top:.35rem;font:600 .7rem var(--mono);letter-spacing:.1em}
.live{display:inline-flex;align-items:center;gap:.45rem;color:var(--lime)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.2}}
.case .go{color:#8C8C86}
/* telefoon: alle vijf in één scherm (de eerste over de hele breedte); de LIVE-regel valt weg, de kop zegt het al */
@media (max-width:700px){.cases{grid-template-columns:repeat(2,1fr);gap:.55rem}.case,.case:nth-child(-n+2){grid-column:auto}.case:first-child{grid-column:1/-1}.case .vis{height:auto;aspect-ratio:2/1}.case:first-child .vis{aspect-ratio:4/1}
  .case .bd{padding:.5rem .6rem .6rem;gap:.15rem}.case h3{font-size:.98rem}.case p{font-size:.78rem;line-height:1.4}.case .ft{display:none}}

/* case-visuals */
.v-map{position:absolute;inset:0;container-type:size;background-image:linear-gradient(#1f1f1f 1px,transparent 1px),linear-gradient(90deg,#1f1f1f 1px,transparent 1px);background-size:22px 22px}
.v-map .zone{position:absolute;left:50%;top:50%;width:min(80cqw,86cqh);aspect-ratio:1;border:2px dashed var(--lime);border-radius:50%;transform:translate(-50%,-50%);animation:zone 6s ease-in-out infinite}
@keyframes zone{0%{transform:translate(-50%,-50%) scale(1)}80%{transform:translate(-50%,-50%) scale(.55)}100%{transform:translate(-50%,-50%) scale(1)}}
.v-map i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 4px rgba(247,246,243,.15)}
.v-map i.g{background:var(--lime);box-shadow:0 0 0 5px rgba(217,255,47,.22)}
.v-map i:nth-of-type(1){animation:p1 6s ease-in-out infinite}.v-map i:nth-of-type(2){animation:p2 6s ease-in-out infinite}
.v-map i:nth-of-type(3){animation:p3 6s ease-in-out infinite}.v-map i:nth-of-type(4){animation:p4 6s ease-in-out infinite}.v-map i:nth-of-type(5){animation:p5 6s ease-in-out infinite}
.v-map i:nth-of-type(1){left:20%;top:30%}.v-map i:nth-of-type(2){left:75%;top:25%}.v-map i:nth-of-type(3){left:30%;top:75%}
.v-map i:nth-of-type(4){left:55%;top:55%}.v-map i:nth-of-type(5){left:68%;top:70%}
@keyframes p1{50%{transform:translate(18cqw,12cqh)}}
@keyframes p2{50%{transform:translate(-17cqw,15cqh)}}
@keyframes p3{50%{transform:translate(14cqw,-17cqh)}}
@keyframes p4{50%{transform:translate(-8cqw,-7cqh)}}
@keyframes p5{50%{transform:translate(-12cqw,-14cqh)}}
.v-deck{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 12%;gap:.8rem}
.v-deck .sc{position:relative;height:clamp(2.6rem,6vh,3.6rem);overflow:hidden;border:1.5px solid #2a2a2a;background:#1b1b1b;border-left:4px solid var(--lime)}
.v-deck .sc span{position:absolute;inset:0;display:flex;align-items:center;padding:0 .9rem;font:800 1rem/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--paper);opacity:0;animation:slide 6s var(--ease) infinite}
.v-deck .sc span:nth-child(2){animation-delay:2s}.v-deck .sc span:nth-child(3){animation-delay:4s}
@keyframes slide{0%{opacity:0;transform:translateX(14%)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateX(-14%)}}
.v-deck .lb{display:flex;justify-content:space-between;font:600 .7rem var(--mono);color:#8C8C86;letter-spacing:.08em}
.v-deck .ey{color:var(--lime)}
.v-feed{position:absolute;inset:12% 14% 0;overflow:hidden}
.v-feed .st{display:flex;flex-direction:column;gap:10px;animation:feed 6s var(--ease) infinite}
.v-feed .st span{height:46px;background:#1d1d1d;border-left:3px solid var(--lime);flex:none}
.v-feed .st span:nth-child(even){border-color:#444}
@keyframes feed{0%,20%{transform:translateY(0)}33%,53%{transform:translateY(-56px)}66%,86%{transform:translateY(-112px)}100%{transform:translateY(0)}}
.v-feed .bd2{position:absolute;right:10%;top:8%;min-width:22px;height:22px;border-radius:11px;background:var(--lime);color:var(--ink);font:700 .75rem/22px var(--mono);text-align:center;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.25)}}
.v-cal{position:absolute;inset:18% 12% 12%;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.v-cal i{background:#1d1d1d;aspect-ratio:1;animation:cal 4.2s steps(1) infinite}
.v-cal i:nth-child(3){animation-delay:.4s}.v-cal i:nth-child(9){animation-delay:.9s}.v-cal i:nth-child(12){animation-delay:1.4s}.v-cal i:nth-child(17){animation-delay:1.9s}.v-cal i:nth-child(20){animation-delay:2.4s}
.v-cal i:not(:nth-child(3)):not(:nth-child(9)):not(:nth-child(12)):not(:nth-child(17)):not(:nth-child(20)){animation:none}
@keyframes cal{0%{background:#1d1d1d}10%,80%{background:var(--lime)}}
.v-cal .note{position:absolute;left:50%;top:-12%;transform:translateX(-50%);white-space:nowrap;font:600 .68rem var(--mono);letter-spacing:.06em;background:var(--paper);color:var(--ink);padding:.3rem .6rem;animation:note 4.2s var(--ease) infinite}
@keyframes note{0%,30%{opacity:0;transform:translate(-50%,-10px)}40%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.v-board{position:absolute;inset:14% 12%}
.v-board span{position:absolute;left:0;right:0;top:0;height:28%;display:flex;align-items:center;gap:.7rem;padding:0 .7rem;background:#1b1b1b;font:600 .72rem var(--mono);letter-spacing:.06em;color:#cfcfca}
.v-board span b{color:var(--lime);font-size:.8rem}
.v-board span:nth-child(1){animation:r1 6s var(--ease) infinite}.v-board span:nth-child(2){animation:r2 6s var(--ease) infinite}.v-board span:nth-child(3){animation:r3 6s var(--ease) infinite}
.v-board span:nth-child(2){transform:translateY(128.571%)}.v-board span:nth-child(3){transform:translateY(257.143%)}
@keyframes r1{0%,30%{transform:translateY(0)}40%,63%{transform:translateY(128.571%)}73%,100%{transform:translateY(257.143%)}}
@keyframes r2{0%,30%{transform:translateY(128.571%)}40%,63%{transform:translateY(0)}73%,100%{transform:translateY(0)}}
@keyframes r3{0%,30%{transform:translateY(257.143%)}40%,63%{transform:translateY(257.143%)}73%,100%{transform:translateY(128.571%)}}

/* STATEMENT */
.statement{position:relative;overflow:hidden;padding-block:clamp(4rem,8vw,7.5rem)}
.stat-six{position:absolute;right:-4%;top:50%;height:150%;width:auto;transform:translateY(-50%);fill:none;stroke:#222;stroke-width:1.5}
.h-huge{position:relative;font-size:clamp(2.4rem,6.6vw,6.4rem)}
.h-huge mark{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 55%/var(--hl,100%) 82%;color:var(--ink);padding:0 .06em;margin:0 -.06em}

/* HOW */
.track{position:relative;padding-top:3.4rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;list-style:none;margin:0;padding:0}
.track .rail{position:absolute;left:0;right:0;top:1.05rem;height:4px;background:var(--line)}
.track .rail i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%}
.step{position:relative}
.step .dot{position:absolute;top:-3.4rem;left:0;width:2.4rem;height:2.4rem;border:2px solid var(--ink);background:var(--paper);display:grid;place-items:center;font:600 .8rem var(--mono)}
.step.last .dot{background:var(--lime)}
.step h3{font:800 clamp(1.6rem,2.3vw,2.2rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.step .t{display:inline-block;margin:.7rem 0 .6rem;font:600 .75rem var(--mono);letter-spacing:.12em;background:var(--ink);color:var(--paper);padding:.25rem .5rem}
.step p{max-width:28ch}
@media (max-width:899px){.track{padding-top:0;padding-left:3.6rem}.steps{grid-template-columns:1fr;gap:2.6rem}
  .track .rail{left:1.15rem;right:auto;top:0;bottom:0;width:4px;height:auto}.track .rail i{transform-origin:50% 0}
  .step .dot{top:0;left:-3.6rem}}

/* WHO */
.who-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.who-copy .kicker{margin-top:1.6rem}
.stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem;padding:0;list-style:none}
.stack li{font:600 .75rem var(--mono);letter-spacing:.08em;background:var(--ink);color:var(--paper);padding:.4rem .7rem}
.org{display:flex;flex-direction:column;gap:2.4rem}
.org .lbl{font:600 .72rem var(--mono);letter-spacing:.14em;margin-bottom:.8rem;color:#6b6b66}
.chain{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.chain span{border:2px solid var(--ink);background:var(--white);padding:.45rem .7rem;font-weight:600;font-size:.92rem}
.chain em{font-style:normal;font-weight:700;color:#8C8C86}
.chain .x{position:absolute;left:-2%;top:50%;width:104%;height:4px;background:var(--ink);transform-origin:0 50%;transform:rotate(-2deg)}
.direct span.me{background:var(--lime)}
.direct span.us{background:var(--ink);color:var(--paper)}
.direct em{color:var(--ink)}
@media (max-width:899px){.who-grid{grid-template-columns:1fr}}

/* FAQ */
.faq{border-top:2px solid var(--ink)}
.qa{border-bottom:2px solid var(--ink)}
.qa summary{list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.2rem 0;cursor:pointer;font:800 clamp(1rem,1.5vw,1.2rem) var(--display);text-transform:uppercase;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:1.6rem;height:1.6rem;position:relative}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--ink);transition:transform .25s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa .ans{padding:0 0 1.4rem;max-width:68ch}

/* CONTACT */
.contact{background:var(--lime)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.contact .kicker{margin-top:1.4rem}
.form{display:flex;flex-direction:column;gap:1.1rem}
.field label{display:block;font:600 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
.field input,.field textarea{width:100%;font:500 1rem var(--body);padding:.85rem .9rem;border:2px solid var(--ink);background:var(--white);border-radius:0;color:var(--ink)}
.field textarea{resize:vertical;min-height:8rem}
.field.has-err input,.field.has-err textarea{border-color:#B3261E;box-shadow:inset 4px 0 0 #B3261E}
.err{color:#8A1C14;font-size:.9rem;margin-top:.35rem}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-submit{align-self:flex-start;background:var(--ink);color:var(--paper);box-shadow:6px 6px 0 var(--paper)}
.form-note{min-height:1.4em;font-weight:600}
.form-note.is-err{color:#8A1C14}
.form-legal{font-size:.85rem}
.sent{border:2px solid var(--ink);background:var(--white);padding:2rem;box-shadow:var(--shadow)}
.sent-big{font:800 clamp(2.2rem,4vw,3.2rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.02em;margin:.6rem 0 1rem}
.direct-mail{margin-top:1.6rem;font:600 .85rem var(--mono);letter-spacing:.08em}
@media (max-width:899px){.contact-grid{grid-template-columns:1fr}}

/* DIENSTPAGINA'S (/websites, /apps, /ai-automatisering, /digitale-producten) */
.page-hero{padding-block:clamp(2.2rem,6vw,5rem)}
.ph-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.page-hero .lede{margin-top:1.4rem;max-width:42ch;font-size:clamp(1.02rem,.98rem + .25vw,1.2rem)}
.page-hero .hero-cta{margin-top:1.8rem}
/* prijskaart: het beeld van de dienst, het prijskaartje en de feiten */
.ph-card{position:relative;background:var(--white);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--lime)}
.ph-card .vis{position:relative;height:clamp(12rem,30vh,17rem);border-bottom:2px solid var(--ink);background:var(--paper-dim);overflow:hidden}
.ph-card .price{position:absolute;z-index:1;right:-.8rem;top:-1.2rem;padding:.45rem .75rem .5rem;box-shadow:4px 4px 0 var(--ink)}
.ph-card .price span{font-size:.75rem}.ph-card .price b{font-size:1.9rem}.ph-card .price small{font-size:.65rem}
.facts{list-style:none;margin:0;padding:1.6rem 1.4rem 1.3rem;display:grid;gap:.65rem}
.facts li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.65rem;border-bottom:1px solid var(--line);
  font:600 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.facts li:last-child{border:0;padding:0}
.facts b{font-weight:600;text-align:right}
@media (max-width:899px){.ph-grid{grid-template-columns:1fr}.ph-card{max-width:560px}}
/* voorbeelden: echte sites, groot in beeld */
.shows{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.shows.two{grid-template-columns:repeat(2,1fr)}
.show{display:flex;flex-direction:column;background:#131313;border:1.5px solid #2a2a2a;text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
a.show:hover{border-color:var(--lime);transform:translateY(-4px)}
.show .shot{aspect-ratio:16/10;border-bottom:1.5px solid #2a2a2a;overflow:hidden;background:#0f0f0f}
.show .shot img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.show .bd{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.show .tag{font:600 .7rem var(--mono);letter-spacing:.12em;color:var(--lime)}
.show h3{font:800 clamp(1.15rem,1.6vw,1.45rem)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.show p{font-size:.95rem;line-height:1.5;color:#B7B7B0;flex:1}
.show .go{margin-top:.35rem;font:600 .72rem var(--mono);letter-spacing:.1em;color:#8C8C86}
.show-wide{grid-column:1/-1}
@media (min-width:900px){.show-wide{flex-direction:row}.show-wide .shot{flex:0 0 58%;border-bottom:0;border-right:1.5px solid #2a2a2a}.show-wide .bd{justify-content:center;padding:1.6rem 1.8rem}.show-wide p{flex:0 0 auto}}
a.show:hover .go{color:var(--lime)}
@media (max-width:1000px){.shows{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.shows,.shows.two{grid-template-columns:1fr}}
/* wat je krijgt: vanaf-prijs links, maatwerk of uitbreiding rechts */
.incl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
.incl-col{background:var(--white);border:2px solid var(--ink);box-shadow:var(--shadow);padding:clamp(1.2rem,2.4vw,2rem)}
.incl-col.extra{background:var(--paper-dim);box-shadow:none}
.incl-col .lbl{font:600 .74rem var(--mono);letter-spacing:.12em}
.incl-col h3{font:800 clamp(1.4rem,2.2vw,2rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.02em;margin:.55rem 0 1.1rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.ticks li{position:relative;padding-left:1.9rem}
.ticks li::before{content:"";position:absolute;left:0;top:.28em;width:1rem;height:1rem;background:var(--lime);border:2px solid var(--ink)}
.extra .ticks li::before{content:"+";display:grid;place-items:center;background:var(--white);font:700 .8rem/1 var(--mono)}
.incl-note{margin-top:1.4rem;max-width:62ch}
@media (max-width:899px){.incl{grid-template-columns:1fr}}
/* Prijzen op /websites: drie pakketten, het middelste met de lime schaduw van de prijskaart */
.incl.pk{grid-template-columns:repeat(3,minmax(0,1fr))}
.pk-top{box-shadow:10px 10px 0 var(--lime)}
.pk-price{display:flex;align-items:baseline;gap:.5rem;margin:0}
.pk-price b{font:800 clamp(2.4rem,4vw,3.2rem)/1 var(--display);letter-spacing:-.02em}
.pk-price span,.pk-once{font:600 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pk-once{margin:.45rem 0 1.4rem;color:#4a4a46}
.pk-more{margin-top:clamp(1.8rem,3vw,2.6rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,3rem);align-items:start}
.pk-more h3{font:800 1.2rem/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;margin:0 0 .6rem}
.pk-opts{list-style:none;margin:0;padding:0;display:grid}
.pk-opts li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.pk-opts li:last-child{border:0}
.pk-opts b{font-weight:600;text-align:right;white-space:nowrap}
.pk-more .incl-note{margin-top:0}
@media (max-width:1099px){.incl.pk{grid-template-columns:1fr 1fr}.pk .extra{grid-column:1/-1}}
@media (max-width:899px){.incl.pk{grid-template-columns:1fr}.pk-more{grid-template-columns:1fr}.pk-opts li{flex-direction:column;gap:.15rem}.pk-opts b{text-align:left;white-space:normal}}
/* 404: de pagina's die wel bestaan, als knoppen */
.nav-chips{margin-top:1.4rem;gap:.5rem}
.nav-chips li{padding:0;background:var(--white)}
.nav-chips a{display:block;padding:.5rem .75rem;font-size:.8rem;text-decoration:none}
.nav-chips a:hover{background:var(--lime)}

/* footer */
.site-foot{background:var(--ink);color:var(--paper);padding-block:3.5rem 2.5rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.foot-col{display:flex;flex-direction:column;gap:.5rem}
.foot-col a{text-decoration:none}.foot-col a:hover{color:var(--lime)}
/* aanraakschermen: links in de voet minstens 44 px hoog */
@media (pointer:coarse){.foot-col{gap:0}.foot-col a{min-height:44px;display:flex;align-items:center}}
.foot-h{font:600 .75rem var(--mono);letter-spacing:.14em;color:var(--lime)}
.foot-tag,.foot-meta{font-size:.9rem;color:#B7B7B0}
.brand-foot{margin-bottom:.6rem}
.foot-legal{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid rgba(247,246,240,.14);font-size:.85rem;color:#B7B7B0}
@media (max-width:899px){.foot-grid{grid-template-columns:1fr 1fr}}

/* showreel op /websites (reel.js). Een podium van 16:9 waarin alles in cqw staat (procent van
   de breedte), dus de compositie schaalt als één beeld. Zonder JavaScript of GSAP staat het
   eindbeeld (.rs-end) stil in beeld; de andere scènes en de knoppen verschijnen alleen via reel.js */
.reel{margin:0 auto;max-width:min(100%,calc((100svh - var(--head-h) - 7rem) * 16 / 9))}
/* bovenaan /websites: kop, reel en knoppen samen in het eerste scherm */
.reel-top{padding-block:clamp(1.5rem,3.5vw,3rem) clamp(3rem,6vw,5rem)}
.reel-top .sec-top{margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.reel-top .reel{max-width:min(100%,calc((100svh - var(--head-h) - 19.5rem) * 16 / 9))}
.reel-stage{position:relative;aspect-ratio:16/9;background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--lime);overflow:hidden;container-type:size;isolation:isolate}
.reel-cam,.rs{position:absolute;inset:0}
.rs{overflow:hidden}
.rs:not(.rs-end){visibility:hidden}
.rs-ign,.rs-type,.rs-shape,.rs-ui,.rs-beat,.rs-depth{display:grid;place-items:center}
.rs-ign>*,.rs-type>*,.rs-shape>*,.rs-ui>.ui-win,.rs-beat>.rs-bars{grid-area:1/1}
/* 01 impact */
.rs-dot,.rs-ring{width:3.6cqw;height:3.6cqw;border-radius:50%}
.rs-dot{background:var(--lime)}
.rs-ring{border:.3cqw solid var(--lime);visibility:hidden}
.rs-rays{position:relative;width:0;height:0}
.rs-rays i{position:absolute;left:0;top:-.2cqw;width:17cqw;height:.4cqw;transform-origin:0 50%}
.rs-rays b{display:block;height:100%;margin-left:4.5cqw;background:var(--lime);border-radius:1cqw}
/* 02 typografie */
.rt{display:flex;font:800 19cqw/.8 var(--display);text-transform:uppercase;letter-spacing:-.02em;padding:.08em .05em .1em;overflow:hidden}
.rt span{display:block;white-space:pre}
.rt-2{font-size:31cqw;color:var(--lime);overflow:visible}
.rt-3{font-size:13.6cqw;align-items:flex-end;overflow:visible}
.rt-dot{flex:none;width:.2em;height:.2em;margin:0 0 .1em .04em;border-radius:50%;background:var(--lime)}
/* 03 vorm */
.rs-shape{background:var(--lime)}
.rs-sq{width:21cqw;height:21cqw;background:var(--ink);border-radius:0%}
.rs-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:1.6cqw;width:72cqw}
.rs-grid i{aspect-ratio:1;background:var(--ink)}
.rs-grid i:nth-child(7n+3){background:var(--paper)}
/* 04 interface: een site die zichzelf opbouwt */
.rs-bands{position:absolute;inset:0;display:flex}
.rs-bands i{flex:1;margin-right:-1px;background:var(--paper)}
.ui-win{position:relative;width:60cqw;background:var(--white);color:var(--ink);border:.22cqw solid var(--ink);box-shadow:1.1cqw 1.1cqw 0 var(--ink);font:600 1.15cqw/1.2 var(--body)}
.ui-top{display:flex;align-items:center;gap:.6cqw;height:3cqw;padding:0 1.2cqw;border-bottom:.22cqw solid var(--ink)}
.ui-top i{width:.9cqw;height:.9cqw;border-radius:50%;border:.18cqw solid var(--ink)}
.ui-top i:first-child{background:var(--lime)}
.ui-url{margin:0 auto;padding:.4cqw 1.4cqw;background:var(--paper-dim);border-radius:2cqw;font:600 1.05cqw/1 var(--mono);letter-spacing:.04em}
.ui-body{padding:1.6cqw 2.2cqw 2.2cqw}
.ui-nav{display:flex;align-items:center;gap:1.8cqw}
.ui-nav span{display:block}
.ui-logo{width:2cqw;height:2cqw;margin-right:auto;border-radius:50% 0 50% 50%;background:var(--ink)}
.ui-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4cqw;align-items:center;margin-top:2.2cqw}
.ui-h{font:800 3.5cqw/.9 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.ui-txt{display:block;width:92%;height:.7cqw;margin-top:1.3cqw;background:var(--paper-dim)}
.ui-txt.s{width:64%;margin-top:.6cqw}
.ui-btn{position:relative;display:inline-block;margin-top:1.6cqw}
.ui-btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translate(.45cqw,.45cqw)}
.ui-btn b{position:relative;display:block;padding:.75cqw 1.3cqw .65cqw;background:var(--lime);border:.18cqw solid var(--ink);font:800 1.15cqw/1 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.ui-ripple{position:absolute;left:50%;top:50%;width:3cqw;height:3cqw;margin:-1.5cqw 0 0 -1.5cqw;border:.25cqw solid var(--ink);border-radius:50%;visibility:hidden}
.ui-cursor{position:absolute;left:68%;top:52%;width:2.3cqw;fill:var(--ink);stroke:var(--white);stroke-width:1.6;stroke-linejoin:round;visibility:hidden}
.ui-img{position:relative;aspect-ratio:4/3;background:var(--ink);overflow:hidden}
.ui-sun{position:absolute;right:16%;top:16%;width:22%;aspect-ratio:1;border-radius:50%;background:var(--lime)}
.ui-hill{position:absolute;left:-10%;right:30%;bottom:0;height:55%;background:#2A2A2A;clip-path:polygon(0 100%,50% 0,100% 100%)}
.ui-hill.b{left:30%;right:-20%;height:42%;background:var(--paper-dim)}
.ui-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw;margin-top:2cqw}
.ui-cards i{height:4.2cqw;background:var(--paper-dim);border:.18cqw solid var(--ink)}
.ui-toast{position:absolute;left:50%;top:4.6cqw;padding:.55cqw .9cqw .45cqw;background:var(--lime);border:.18cqw solid var(--ink);font:800 1.05cqw/1 var(--display);text-transform:uppercase;visibility:hidden}
/* 05 ritme */
.rs-slices{position:absolute;inset:0;display:flex;flex-direction:column}
.rs-slices i{flex:1;margin-bottom:-1px;background:var(--ink)}
.rs-bars{position:relative;display:flex;align-items:center;gap:.6cqw;width:84cqw;height:38cqw}
.rs-bars i{flex:1;height:100%;background:var(--lime);transform:scaleY(.02)}
.rs-bars i:nth-child(6n+4){background:var(--paper)}
.rs-ph{position:absolute;left:8cqw;right:8cqw;top:7cqw;bottom:7cqw;visibility:hidden}
.rs-ph::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.18cqw;background:var(--paper)}
/* 06 diepte: drie echte sites in 3D */
.rs-depth{background:var(--paper-dim)}
.rs-cards{display:grid;place-items:center;perspective:120cqw}
.rs-card{grid-area:1/1;width:26cqw;color:var(--ink)}
.rs-card .im{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--white);border:.22cqw solid var(--ink);box-shadow:.9cqw .9cqw 0 var(--ink)}
.rs-card img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.rs-card .lb{display:block;margin-top:1.3cqw;text-align:center;font:600 1.1cqw var(--mono);letter-spacing:.1em}
/* 07 merk: de 6 wordt geschilderd; dit is ook het stilstaande eindbeeld */
.rs-end{background:var(--ink)}
.re-row{position:absolute;left:0;right:0;top:7%;height:42%;display:flex;justify-content:center}
.re-lock{display:flex;align-items:center;gap:2.2cqw;height:100%}
.re-six{height:100%;width:auto;fill:var(--lime)}
.re-word{position:relative;margin-top:8.7cqw}
.re-labs{width:17.2cqw;height:auto;fill:var(--paper)}
.re-slash{position:absolute;width:15.2%;right:-7.6%;top:-6.2%;height:auto;fill:var(--lime)}
.re-txt{position:absolute;left:0;right:0;top:56%;display:flex;flex-direction:column;align-items:center;gap:.4cqw;font:800 5.4cqw/.9 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.re-l1{display:block;overflow:hidden;padding:.06em 0 .08em}
.re-l1>span{display:block}
.re-l2{position:relative;display:block;padding:.06em 0 .08em;color:var(--lime)}
.re-brush{position:absolute;left:-5%;bottom:-.36em;width:110%;height:.34em;fill:var(--lime)}
.re-cap{position:absolute;left:0;right:0;bottom:12%;text-align:center;color:#B7B7B0;font:600 1.15cqw var(--mono);letter-spacing:.14em;text-transform:uppercase}
/* HUD: tijdcode, hoofdstuk en hoekmarkeringen, leesbaar op elke achtergrond (difference) */
.reel-hud{position:absolute;inset:0;z-index:2;pointer-events:none;color:#fff;mix-blend-mode:difference;font:600 clamp(6px,1.05cqw,14px)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.reel-hud>span{position:absolute;display:flex;align-items:center;gap:.6em}
.h-tl{left:3.2cqw;top:3cqw}.h-tr{right:3.2cqw;top:3cqw}.h-bl{left:3.2cqw;bottom:3cqw}.h-br{right:3.2cqw;bottom:3cqw}
.h-frame{position:absolute;inset:1.4cqw;--c:1.6cqw;--t:max(1px,.14cqw);background:linear-gradient(#fff 0 0) 0 0/var(--c) var(--t),linear-gradient(#fff 0 0) 0 0/var(--t) var(--c),linear-gradient(#fff 0 0) 100% 0/var(--c) var(--t),linear-gradient(#fff 0 0) 100% 0/var(--t) var(--c),linear-gradient(#fff 0 0) 0 100%/var(--c) var(--t),linear-gradient(#fff 0 0) 0 100%/var(--t) var(--c),linear-gradient(#fff 0 0) 100% 100%/var(--c) var(--t),linear-gradient(#fff 0 0) 100% 100%/var(--t) var(--c);background-repeat:no-repeat}
.h-rec{width:.7em;height:.7em;border-radius:50%;background:#fff}
.reel.is-playing .h-rec{animation:recBlink 1s steps(1) infinite}
@keyframes recBlink{50%{opacity:0}}
@container (max-width:520px){.h-tl,.h-br{display:none}}
/* afspeelknop en hoofdstukken */
.reel-bar{display:flex;align-items:center;gap:1rem;margin-top:1.6rem}
.reel-bar[hidden]{display:none}
.reel-play{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;background:var(--ink);color:var(--lime);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--lime);cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.reel-play:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--lime)}
.reel-play:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--lime)}
.reel-play svg{width:20px;height:20px;fill:currentColor}
.reel .i-play,.reel.is-paused .i-pause{display:none}
.reel.is-paused .i-play{display:block}
.reel-ch{flex:1;min-width:0;display:flex;gap:6px;margin:0;padding:0;list-style:none}
.reel-ch li{flex:1;min-width:0}
.reel-ch button{display:flex;flex-direction:column;justify-content:center;gap:.5rem;width:100%;min-height:44px;padding:0;background:none;border:0;color:#5C5C58;font:600 .68rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:left;cursor:pointer}
.reel-ch button:hover,.reel-ch .on{color:var(--ink)}
.reel-ch i{display:block;height:4px;overflow:hidden;background:rgba(10,10,10,.14)}
.reel-ch b{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.reel-ch .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel-now{display:none;font:600 .75rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
/* telefoon: de hoofdstukken op een eigen rij, zodat elk vak minstens 44px breed is */
@media (max-width:759px){.reel-bar{flex-wrap:wrap;gap:.9rem 1rem}.reel-ch{order:-1;flex-basis:100%;gap:2px}.reel-now{display:block}
  .reel-ch .n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  /* Websites: zonder wisselanimatie blijft de eerste site staan */
  .v-site .url span:first-child,.v-site .pg picture:first-child img{opacity:1}
  /* Presentor: zonder wisselanimatie blijft de eerste slide staan */
  .v-deck .sc span:first-child{opacity:1}
}

/* ---- tijdelijke "in aanbouw"-pagina (index.html en 404.html; besluit gebruiker 2026-10-20) ----
   De volledige site staat op de branch volledige-site. */
.soon-page body{background:var(--ink);color:var(--paper)}
.soon{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:calc(2rem + env(safe-area-inset-top,0px)) var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));text-align:center}
.soon-in{display:flex;flex-direction:column;align-items:center}
.soon-lock{display:flex;align-items:flex-end;gap:clamp(.6rem,1.4vw,1.1rem);margin-bottom:clamp(2rem,6vh,3.5rem)}
.soon-lock .s{height:clamp(4.5rem,13vh,7.5rem);width:auto;fill:var(--lime)}
.soon-lock .wd{position:relative;display:block;margin-bottom:.15em}
.soon-lock .w{height:clamp(2.1rem,6vh,3.5rem);width:auto;fill:var(--paper)}
.soon-lock .sl{position:absolute;width:15.2%;right:-7.6%;top:-6.2%;height:auto;fill:var(--lime)}
.soon-h{font-size:clamp(3rem,11vw,9.5rem)}
.soon-sub{margin-top:clamp(.8rem,2vh,1.4rem);font-size:clamp(1.35rem,3.6vw,2.6rem)}
.soon-sub mark{background:var(--lime);color:var(--ink);padding:.08em .22em 0;box-decoration-break:clone;-webkit-box-decoration-break:clone}