/** Shopify CDN: Minification failed

Line 5075:6 Unexpected ")"

**/
/* ============================================================
   ScaleBusiness v8 — visual experience foundation
   Namespace: .sb8-*  /  [data-sb8-*]
   Draait naast het bestaande v7-systeem zonder erop te overriden.
   ============================================================ */

:root{
  /* Canvas */
  --sb8-ink:#04101F;
  --sb8-navy:#08182E;
  --sb8-surface:#0E2647;
  --sb8-surface-2:#14335C;
  --sb8-dark-line:rgba(168,188,216,.16);
  --sb8-dark-line-2:rgba(168,188,216,.30);
  --sb8-dark-mute:#9DB4D2;

  --sb8-white:#FFFFFF;
  --sb8-paper:#FBFCFE;
  --sb8-mist:#F1F5FA;
  --sb8-line:#DCE4F0;
  --sb8-text:#1B2B45;
  --sb8-mute:#56698A;

  /* Signal */
  --sb8-signal:#00E5A8;
  --sb8-signal-deep:#007F5F;
  --sb8-signal-soft:rgba(0,229,168,.14);
  --sb8-signal-line:rgba(0,229,168,.44);

  /* Type */
  --sb8-display:"Familjen Grotesk","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --sb8-sans:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
  --sb8-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --sb8-d1:clamp(38px,5.1vw,78px);
  --sb8-d2:clamp(29px,3.6vw,58px);
  --sb8-d3:clamp(22px,2.4vw,38px);
  --sb8-num:clamp(48px,8vw,132px);
  --sb8-lead:clamp(16px,1.15vw,19px);
  --sb8-body:clamp(15px,1vw,17px);
  --sb8-label:clamp(10px,.78vw,12px);

  /* Ritme */
  --sb8-wrap:1400px;
  --sb8-gutter:clamp(18px,4vw,60px);
  --sb8-chapter-y:clamp(72px,9vw,148px);
  --sb8-ease:cubic-bezier(.22,.61,.36,1);
  --sb8-ease-out:cubic-bezier(.16,1,.3,1);
}

/* De header is transparant boven de hero: de pagina-achtergrond moet dus donker zijn. */
/* De header is transparant en rekent op een donkere band erachter. Die band
   komt van de body. Zonder deze regel valt hij op pagina's zonder v8-opener
   terug op wit en verdwijnen wordmark en navigatie (wit op wit). */
body.sb-body,body.template-index,body[data-sb-service],body.sb8-dark-top{background:var(--sb8-ink)}

/* Donkere header op elke route die bovenaan donker is. De drie body-haken
   staan in één selectorlijst zodat er geen losse compound kan afbreken. */
:is(body.template-index,body[data-sb-service],body.sb8-dark-top) .sb-header--light{background:rgba(4,16,31,.88)!important;backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(168,188,216,.14)!important;box-shadow:none!important}
:is(body.template-index,body[data-sb-service],body.sb8-dark-top) .sb-header--light :is(a,button,.sb-nav__link){color:#fff!important}
:is(body.template-index,body[data-sb-service],body.sb8-dark-top) .sb-header--light .sb-header__cta{color:#05261D!important}
:is(body.template-index,body[data-sb-service],body.sb8-dark-top) .sb-header--light :is(.sb-header__brand,.sb-wordmark,.sb-burger){color:#fff!important}
:is(body.template-index,body[data-sb-service],body.sb8-dark-top) .sb-header--light .sb-wordmark :is(path,text,tspan){fill:currentColor!important}

/* De uitklapper van Diensten en het mobiele drawerpaneel hebben een witte
   achtergrond: daar moet de tekst juist donker blijven. */
:is(body.template-index,body[data-sb-service],body.sb8-dark-top) .sb-header--light :is(.sb-nav__panel,.sb-drawer__panel) :is(a,button){color:var(--sb-deep-navy)!important}
:is(body.template-index,body[data-sb-service],body.sb8-dark-top) .sb-header--light :is(.sb-nav__panel,.sb-drawer__panel) :is(a,button):is(:hover,:focus-visible){color:var(--sb-brand-text)!important}

/* ---------- Shell ---------- */
.sb8-scene{position:relative;isolation:isolate;overflow:clip}
.sb8-scene--dark{background:var(--sb8-navy);color:#fff}
.sb8-scene--ink{background:var(--sb8-ink);color:#fff}
.sb8-scene--light{background:var(--sb8-white);color:var(--sb8-text)}
.sb8-scene--mist{background:var(--sb8-mist);color:var(--sb8-text)}
.sb8-pad{padding-block:var(--sb8-chapter-y)}
.sb8-wrap{width:100%;max-width:var(--sb8-wrap);margin-inline:auto;padding-inline:var(--sb8-gutter)}

/* Naad tussen donker en licht: een smalle schuine overgang in plaats van een harde rand. */
.sb8-seam{position:relative;height:clamp(40px,6vw,92px);margin-block-start:calc(clamp(40px,6vw,92px) * -1);pointer-events:none;z-index:2}
.sb8-seam::before{content:"";position:absolute;inset:0;background:inherit;clip-path:polygon(0 100%,100% 0,100% 100%,0 100%)}
.sb8-seam--to-light::before{background:var(--sb8-white)}
.sb8-seam--to-mist::before{background:var(--sb8-mist)}
.sb8-seam--to-dark::before{background:var(--sb8-navy)}
.sb8-seam--to-ink::before{background:var(--sb8-ink)}

/* ---------- Typografie ---------- */
.sb8-scene :is(h1,h2,h3,h4){color:inherit;margin:0}
.sb8-d1{color:inherit;font-family:var(--sb8-display);font-weight:700;font-size:var(--sb8-d1);line-height:.97;letter-spacing:-.025em;margin:0;text-wrap:balance}
.sb8-d2{color:inherit;font-family:var(--sb8-display);font-weight:700;font-size:var(--sb8-d2);line-height:1.02;letter-spacing:-.022em;margin:0;text-wrap:balance}
.sb8-d3{color:inherit;font-family:var(--sb8-display);font-weight:600;font-size:var(--sb8-d3);line-height:1.12;letter-spacing:-.015em;margin:0}
.sb8-lead{font-family:var(--sb8-sans);font-size:var(--sb8-lead);line-height:1.55;margin:0;max-width:58ch}
.sb8-body{font-family:var(--sb8-sans);font-size:var(--sb8-body);line-height:1.6;margin:0;max-width:62ch}
.sb8-label{font-family:var(--sb8-mono);font-size:var(--sb8-label);letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:0}
.sb8-num{font-family:var(--sb8-display);font-weight:700;font-size:var(--sb8-num);line-height:.86;letter-spacing:-.04em}
.sb8-scene--dark .sb8-lead,.sb8-scene--ink .sb8-lead{color:#D7E3F3}
.sb8-scene--dark .sb8-body,.sb8-scene--ink .sb8-body{color:var(--sb8-dark-mute)}
.sb8-scene--dark .sb8-label,.sb8-scene--ink .sb8-label{color:var(--sb8-dark-mute)}
.sb8-scene--light .sb8-lead,.sb8-scene--mist .sb8-lead{color:#3A4C6B}
.sb8-scene--light .sb8-body,.sb8-scene--mist .sb8-body{color:var(--sb8-mute)}
.sb8-scene--light .sb8-label,.sb8-scene--mist .sb8-label{color:var(--sb8-mute)}
.sb8-label--signal{color:var(--sb8-signal)!important}

/* ---------- Kop van een hoofdstuk ---------- */
.sb8-head{display:grid;gap:clamp(14px,1.4vw,22px);max-width:none}
.sb8-head__row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.sb8-head__idx{font-family:var(--sb8-mono);font-size:var(--sb8-label);letter-spacing:.16em;opacity:.55}

/* ---------- Knoppen ---------- */
.sb8-btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sb8-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;
  font-family:var(--sb8-sans);font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent;
  transition:transform .2s var(--sb8-ease),background-color .2s var(--sb8-ease),color .2s var(--sb8-ease),border-color .2s var(--sb8-ease)}
.sb8-btn:hover{transform:translateY(-2px)}
.sb8-btn--signal{background:var(--sb8-signal);color:#05261D}
.sb8-btn--signal:hover{background:#3AF0C1}
.sb8-btn--ghost{border-color:var(--sb8-dark-line-2);color:#fff}
.sb8-btn--ghost:hover{border-color:var(--sb8-signal);color:var(--sb8-signal)}
.sb8-btn--dark{background:var(--sb8-navy);color:#fff}
.sb8-btn--outline{border-color:var(--sb8-line);color:var(--sb8-text)}
.sb8-btn--outline:hover{border-color:var(--sb8-signal-deep);color:var(--sb8-signal-deep)}
.sb8-tlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--sb8-sans);font-size:14px;font-weight:600;
  color:var(--sb8-signal);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s}
.sb8-tlink:hover{border-color:currentColor}
.sb8-scene--light .sb8-tlink,.sb8-scene--mist .sb8-tlink{color:var(--sb8-signal-deep)}

/* ---------- Focus ---------- */
.sb8-scene :is(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--sb8-signal);outline-offset:3px;border-radius:6px}

/* ---------- Signal primitive ---------- */
.sb8-node{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--sb8-signal);
  box-shadow:0 0 0 4px rgba(0,229,168,.18),0 0 22px 4px rgba(0,229,168,.45);
  translate:-50% -50%;opacity:0;will-change:transform,opacity;z-index:6}
.sb8-node[data-on="1"]{opacity:1}
.sb8-path{fill:none;stroke:var(--sb8-signal-line);stroke-width:1.5;stroke-linecap:round}
.sb8-path--live{stroke:var(--sb8-signal);stroke-width:2}

/* ---------- Reveal (ondersteunend, nooit het hoofdeffect) ---------- */
.sb8-rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--sb8-ease-out),transform .6s var(--sb8-ease-out);transition-delay:var(--d,0ms)}
.sb8-rv[data-in="1"]{opacity:1;transform:none}

/* ============================================================
   CHAPTER 01 — HERO / DE WEBSITE WORDT GEBOUWD
   ============================================================ */
.sb8-hero{background:var(--sb8-ink)}
.sb8-hero__track{height:290vh}
.sb8-hero__stage{position:sticky;top:0;height:100vh;min-height:640px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-bottom:52px}
.sb8-hero__glow{position:absolute;inset:auto -10% -30% 30%;height:70vh;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,229,168,.16),transparent 70%);filter:blur(20px);opacity:.7}
.sb8-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,3.4vw,64px);align-items:center;position:relative;z-index:2}
.sb8-hero__copy{display:grid;gap:clamp(14px,1.5vw,24px);align-content:center;
  /* Tijdens het responsive-moment stapt de tekstkolom terug zodat de drie
     schermen de scene overnemen. Dat is een compositiewissel, geen fade. */
  opacity:var(--copyO,1);transform:translate3d(var(--copyX,0px),0,0) scale(var(--copyS,1));
  transform-origin:left center;will-change:opacity,transform}
.sb8-hero__copy .sb8-d1{max-width:100%}
.sb8-hero__micro{font-family:var(--sb8-mono);font-size:11px;letter-spacing:.06em;color:#7F97B8;margin:0}

.sb8-hero__viz{position:relative;aspect-ratio:16/11;width:100%;max-width:700px;margin-inline:auto;
  /* De scene is een ruimte, geen platte tekening. De perspective staat op de
     viz zelf, zodat de drie frames echt in diepte achter elkaar kunnen staan.
     De cameratransform gebruikt een eigen perspective(), want de viz kan zijn
     eigen perspective-eigenschap niet op zichzelf toepassen. */
  perspective:1500px;perspective-origin:50% 46%;transform-style:preserve-3d;
  transform:perspective(1800px) translateX(var(--camX,0%)) rotateY(var(--camRY,0deg)) rotateX(var(--camRX,0deg)) scale(var(--camS,1));
  will-change:transform}

/* Device frames */
.sb8-dev{position:absolute;border-radius:12px;background:#0A1E38;border:1px solid var(--sb8-dark-line-2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);overflow:hidden;will-change:transform,opacity;
  transform-style:preserve-3d;backface-visibility:hidden}
/* Hoe verder naar voren, hoe zwaarder de slagschaduw. Dat is wat diepte
   geloofwaardig maakt, meer nog dan de rotatie zelf. */
.sb8-dev--desk{box-shadow:0 calc(30px + var(--lift,0) * 60px) calc(60px + var(--lift,0) * 70px) -50px rgba(0,0,0,.95)}
.sb8-dev--desk{inset:0;z-index:3}
.sb8-dev--tab{inset:0;border-radius:10px;z-index:2}
.sb8-dev--mob{inset:0;border-radius:14px;z-index:2}
.sb8-dev__chrome{height:26px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#0D2340;border-bottom:1px solid var(--sb8-dark-line)}
.sb8-dot{width:7px;height:7px;border-radius:50%;background:rgba(168,188,216,.34);flex:none}
.sb8-dev__url{flex:1;height:11px;border-radius:999px;background:rgba(168,188,216,.13);margin-left:6px;max-width:230px}
.sb8-dev__screen{position:absolute;inset:26px 0 0 0;padding:clamp(10px,1.5vw,20px);display:grid;gap:clamp(6px,.8vw,11px);
  grid-template-rows:auto auto auto auto;align-content:start;background:#071A31}
.sb8-dev--mob .sb8-dev__chrome{height:18px}
.sb8-dev--mob .sb8-dev__screen{inset:18px 0 0 0;padding:10px;gap:7px}

/* Bouwblokken: wireframe -> afgewerkte pagina */
.sb8-blk{position:relative;border-radius:6px;background:rgba(168,188,216,.10);border:1px dashed rgba(168,188,216,.26);
  transform-origin:50% 50%;
  /* Het frame heeft overflow:hidden, dat plat 3D van kinderen af. Daarom
     krijgt elk blok zijn eigen perspective() in de transform zelf. */
  transform:perspective(900px)
    translate3d(0,calc((1 - var(--bx,0)) * 30px),calc((1 - var(--bx,0)) * -300px))
    rotateX(calc((1 - var(--bx,0)) * -26deg))
    scaleX(calc(.88 + var(--bx,0) * .12));
  opacity:var(--bo,0);
  transition:background-color .45s var(--sb8-ease),border-color .45s var(--sb8-ease)}
.sb8-blk[data-done="1"]{background:rgba(255,255,255,.055);border-style:solid;border-color:rgba(168,188,216,.18)}
.sb8-blk__real{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 10px;opacity:var(--ro,0);transition:opacity .4s var(--sb8-ease)}
.sb8-blk--nav{height:clamp(18px,2.2vw,30px)}
.sb8-blk--hero{height:clamp(46px,6.6vw,92px)}
.sb8-blk--body{height:clamp(34px,5vw,70px)}
.sb8-blk--cta{height:clamp(20px,2.6vw,34px);width:min(56%,260px)}
.sb8-blk[data-done="1"].sb8-blk--cta{background:var(--sb8-signal);border-color:transparent}
/* Een enkele lichtstreep die over het scherm zakt terwijl de pagina zich
   opbouwt. Puur decor, staat uit bij verminder-beweging. */
.sb8-scan{position:absolute;left:0;right:0;top:0;height:42%;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,229,168,.16) 62%,rgba(0,229,168,.62) 96%,transparent);
  opacity:var(--scanO,0);transform:translateY(calc(var(--scan,0) * 260% - 42%));mix-blend-mode:screen}

.sb8-wm{height:7px;border-radius:3px;background:rgba(168,188,216,.32);flex:none}
.sb8-hero__viz .sb8-blk--hero .sb8-blk__real{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
.sb8-tw{height:10px;border-radius:3px;background:rgba(255,255,255,.72)}
.sb8-tw--2{height:7px;background:rgba(168,188,216,.5)}
.sb8-cta-w{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.12em;color:#05261D;font-weight:600}
.sb8-thumb{position:absolute;inset:0;border-radius:5px;background:
  linear-gradient(120deg,rgba(0,229,168,.22),rgba(44,99,168,.32)),
  repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px);opacity:var(--ro,0);transition:opacity .5s var(--sb8-ease)}

/* Annotaties */
.sb8-annos{position:absolute;left:0;right:0;bottom:-36px;transition:opacity .35s var(--sb8-ease);display:flex;gap:clamp(10px,1.6vw,26px);
  flex-wrap:wrap;justify-content:flex-start;z-index:7}
.sb8-anno{display:inline-flex;align-items:center;gap:7px;font-family:var(--sb8-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sb8-signal);opacity:0;white-space:nowrap;
  transform:translateY(6px);transition:opacity .35s var(--sb8-ease),transform .35s var(--sb8-ease)}
.sb8-anno[data-on="1"]{opacity:1;transform:none}
.sb8-anno::before{content:"";width:16px;height:1px;background:var(--sb8-signal-line);flex:none}

/* Lanes en routes */
.sb8-lane{position:absolute;bottom:-36px;display:grid;gap:3px;opacity:0;transition:opacity .45s var(--sb8-ease);z-index:5}
.sb8-lane__tag{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.16em;color:var(--sb8-signal)}
.sb8-lane__name{font-family:var(--sb8-display);font-weight:600;font-size:clamp(13px,1.1vw,17px);color:#fff}
.sb8-lane--ads{left:0}
.sb8-lane--auto{right:0;text-align:right;justify-items:end}
.sb8-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:4;pointer-events:none}
.sb8-hero__phase{position:absolute;left:var(--sb8-gutter);bottom:clamp(16px,3vh,34px);display:flex;gap:8px;align-items:center;z-index:8}
.sb8-hero__phase b{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sb8-signal);font-weight:500}
.sb8-hero__bar{width:clamp(90px,14vw,190px);height:2px;background:var(--sb8-dark-line);position:relative;overflow:hidden}
.sb8-hero__bar i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--sb8-signal);transform-origin:left;transform:scaleX(var(--p,0))}

/* ============================================================
   CHAPTER 02 — DRIE DIENSTEN, ÉÉN SYSTEEM
   ============================================================ */
.sb8-sys__stage{position:relative;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:clamp(14px,1.8vw,32px);
  align-items:stretch;margin-top:clamp(28px,3.6vw,56px)}
.sb8-sys__lane{position:relative;border:1px solid var(--sb8-dark-line);border-radius:16px;padding:clamp(16px,1.6vw,26px);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  display:grid;gap:12px;align-content:start;cursor:pointer;text-align:left;color:inherit;font:inherit;
  transition:opacity .3s var(--sb8-ease),border-color .3s var(--sb8-ease),transform .3s var(--sb8-ease),background-color .3s}
.sb8-sys__stage[data-active] .sb8-sys__lane{opacity:.34}
.sb8-sys__stage[data-active] .sb8-sys__lane[data-on="1"]{opacity:1;border-color:var(--sb8-signal-line);transform:translateY(-4px)}
.sb8-sys__stage:not([data-active]) .sb8-sys__lane:hover{border-color:var(--sb8-dark-line-2)}
.sb8-sys__stage[data-active] .sb8-sys__lane[data-on="1"]{background:linear-gradient(180deg,rgba(0,229,168,.10),rgba(0,229,168,.02))}
.sb8-sys__stagelbl{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.18em;color:var(--sb8-signal)}
.sb8-sys__ttl{font-family:var(--sb8-display);font-weight:700;font-size:clamp(19px,1.9vw,30px);line-height:1.06;letter-spacing:-.02em;margin:0}
.sb8-sys__txt{font-family:var(--sb8-sans);font-size:15px;line-height:1.55;color:var(--sb8-dark-mute);margin:0}
.sb8-sys__viz{height:clamp(78px,9vw,132px);border-radius:10px;border:1px solid var(--sb8-dark-line);position:relative;overflow:hidden;background:#071A31}
.sb8-sys__more{margin:0;display:grid;gap:8px}
.sb8-sys__more summary{font-family:var(--sb8-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sb8-signal);cursor:pointer;list-style:none;padding-block:6px}
.sb8-sys__more summary::-webkit-details-marker{display:none}
.sb8-sys__more summary::after{content:" +"}
.sb8-sys__more[open] summary::after{content:" −"}
.sb8-sys__dl{margin:0;display:grid;gap:7px;font-family:var(--sb8-sans);font-size:13.5px;line-height:1.5}
.sb8-sys__dl dt{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.14em;color:#7F97B8;text-transform:uppercase}
.sb8-sys__dl dd{margin:0 0 6px;color:#D7E3F3}
.sb8-sys__signal{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--sb8-dark-line);z-index:0}
/* Coaching staat naast het systeem, niet erin */
.sb8-sys__aside{margin-top:clamp(20px,2.4vw,36px);border-top:1px solid var(--sb8-dark-line);padding-top:clamp(16px,1.8vw,26px);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,1.6vw,28px);align-items:center}
@media(max-width:900px){.sb8-sys__aside{grid-template-columns:1fr;gap:12px}}

/* Mini-visuals in de lanes */
.sb8-mini{position:absolute;inset:10px;display:grid;gap:5px}
.sb8-mini__row{display:flex;gap:5px;align-items:center}
.sb8-mini__chip{height:16px;border-radius:4px;background:rgba(168,188,216,.16);flex:1;
  transition:background-color .35s var(--sb8-ease),opacity .35s}
.sb8-sys__lane[data-on="1"] .sb8-mini__chip[data-live="1"]{background:var(--sb8-signal-soft);border:1px solid var(--sb8-signal-line)}
.sb8-sys__lane[data-on="1"] .sb8-mini__chip[data-dim="1"]{opacity:.3}
.sb8-mini__bar{height:6px;border-radius:3px;background:rgba(168,188,216,.2)}
.sb8-mini__node{width:8px;height:8px;border-radius:50%;background:var(--sb8-signal);flex:none;opacity:.35;transition:opacity .3s}
.sb8-sys__lane[data-on="1"] .sb8-mini__node{opacity:1}

/* ============================================================
   CHAPTER 03 — BEWIJS / ONTWERPWERELD-MACHINE

   Eén component, negen werelden. Alles wat per wereld verandert loopt via
   custom properties op .sb8-world. De elementen zelf hebben transitions op
   de eigenschappen die daaruit hun waarde halen, dus het wisselen van een
   wereld is een echte morph en geen harde omschakeling.
   ============================================================ */

/* ---------- selector ---------- */
.sb8-pick__lbl{display:inline-flex;align-items:center;gap:9px;margin:clamp(22px,2.6vw,40px) 0 12px;
  font-family:var(--sb8-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sb8-navy);font-weight:600}
.sb8-pick__dot{width:8px;height:8px;border-radius:50%;background:var(--sb8-signal);
  box-shadow:0 0 0 4px rgba(0,229,168,.22);animation:sb8-pulse 2.4s var(--sb8-ease) infinite}
@keyframes sb8-pulse{0%,100%{box-shadow:0 0 0 4px rgba(0,229,168,.22)}50%{box-shadow:0 0 0 9px rgba(0,229,168,.05)}}

.sb8-pick{position:relative}
.sb8-pick__row{display:flex;gap:10px;flex-wrap:wrap}
.sb8-pick__fade{display:none}

.sb8-pill{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  /* Een duidelijk vlak met rand, niet een tekstje: het moet meteen als knop lezen. */
  padding:13px 18px;border-radius:12px;border:1.5px solid var(--sb8-navy-20,#C2CEDD);
  background:#fff;color:var(--sb8-navy);
  font-family:var(--sb8-sans);font-size:14px;font-weight:600;line-height:1;
  box-shadow:0 1px 0 rgba(8,24,46,.06);
  transition:background-color .2s var(--sb8-ease),border-color .2s var(--sb8-ease),color .2s var(--sb8-ease),
    transform .2s var(--sb8-ease),box-shadow .2s var(--sb8-ease)}
.sb8-pill__sw{width:15px;height:15px;border-radius:5px;flex:none;border:1px solid rgba(8,24,46,.18);
  background:var(--sw,#C2CEDD);transition:background-color .25s var(--sb8-ease)}
.sb8-pill:hover{border-color:var(--sb8-navy);transform:translateY(-2px);box-shadow:0 10px 20px -14px rgba(8,24,46,.6)}
.sb8-pill:focus-visible{outline:3px solid var(--sb8-signal-deep);outline-offset:2px}
.sb8-pill[aria-selected="true"]{background:var(--sb8-navy);border-color:var(--sb8-navy);color:#fff;
  box-shadow:0 12px 26px -16px rgba(8,24,46,.85)}
.sb8-pill[aria-selected="true"] .sb8-pill__sw{box-shadow:0 0 0 3px rgba(255,255,255,.18);border-color:transparent}
.sb8-pill[aria-selected="true"]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--sb8-signal);flex:none}

/* ---------- de wereld ---------- */
.sb8-world{position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(18px,2vw,30px);
  padding-block:clamp(28px,3.4vw,60px);
  background:var(--w-canvas,#0E2647);color:var(--w-ink,#fff);
  border-radius:var(--w-shell,20px);
  transition:background-color .75s var(--w-ease,cubic-bezier(.22,.61,.36,1)),color .5s linear,border-radius .6s var(--sb8-ease)}
.sb8-world__in{display:grid;grid-template-columns:var(--w-split,minmax(0,1.6fr) minmax(0,1fr));
  gap:clamp(18px,2.4vw,44px);align-items:center;position:relative;z-index:3;
  transition:grid-template-columns .7s var(--sb8-ease)}

/* decoratie: per wereld staat één van de drie lagen aan */
.sb8-world__grid,.sb8-world__dots,.sb8-world__glow{position:absolute;inset:0;pointer-events:none;z-index:1;
  transition:opacity .7s var(--sb8-ease)}
.sb8-world__grid{opacity:var(--w-deco-grid,0);
  background-image:linear-gradient(var(--w-line,rgba(255,255,255,.14)) 1px,transparent 1px),
    linear-gradient(90deg,var(--w-line,rgba(255,255,255,.14)) 1px,transparent 1px);
  background-size:64px 64px}
.sb8-world__dots{opacity:var(--w-deco-dots,0);
  background-image:radial-gradient(var(--w-line,rgba(255,255,255,.2)) 1.2px,transparent 1.2px);background-size:26px 26px}
.sb8-world__glow{opacity:var(--w-deco-glow,0);
  background:radial-gradient(58% 62% at 24% 34%,var(--w-accent,#00E5A8),transparent 68%);filter:blur(30px)}

/* ---------- browserframe ---------- */
.sb8-world__shot{position:relative;display:grid;gap:12px;justify-items:start}
.sb8-wframe{position:relative;width:100%;overflow:hidden;
  border-radius:var(--w-radius,14px);
  border:var(--w-bw,1px) solid var(--w-border,rgba(255,255,255,.18));
  background:var(--w-surface,#0A1E38);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.85);
  transition:border-radius .6s var(--w-ease,cubic-bezier(.22,.61,.36,1)),border-color .6s linear,background-color .6s linear,border-width .4s}
.sb8-wframe__bar{height:var(--w-bar,32px);display:flex;align-items:center;gap:6px;padding:0 12px;
  background:var(--w-bar-bg,rgba(255,255,255,.06));border-bottom:1px solid var(--w-border,rgba(255,255,255,.14));
  transition:background-color .6s linear,height .5s var(--sb8-ease)}
.sb8-wframe__bar .sb8-dot{background:var(--w-line,rgba(255,255,255,.3))}
.sb8-wframe__url{flex:1;max-width:300px;margin-left:8px;height:15px;border-radius:999px;
  background:var(--w-url,rgba(255,255,255,.10));display:flex;align-items:center;padding:0 9px;
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.04em;color:var(--w-ink,#fff);opacity:.7;
  transition:background-color .6s linear}
.sb8-wframe__view{position:relative;aspect-ratio:16/10.2;overflow:hidden;background:var(--w-surface,#0A1E38)}
.sb8-wframe__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:var(--imgO,1);transition:opacity .25s linear}

/* de vier plakken die de compositie opnieuw opbouwen */
.sb8-slice{position:absolute;top:0;bottom:0;width:25.4%;z-index:2;
  background-image:var(--shot,none);background-size:400% 100%;background-repeat:no-repeat;
  opacity:var(--sO,0);
  transform:translate3d(0,var(--sY,0%),0) scaleY(var(--sS,1));
  transform-origin:center;will-change:transform,opacity}
.sb8-slice[data-slice="0"]{left:0;background-position:0% top}
.sb8-slice[data-slice="1"]{left:25%;background-position:33.333% top}
.sb8-slice[data-slice="2"]{left:50%;background-position:66.666% top}
.sb8-slice[data-slice="3"]{left:74.6%;background-position:100% top}

/* ONE SIGNAL: in elke wereld dezelfde groene lijn onder het frame */
/* Tijdens de hercompositie staat het frame even leeg. Dan verschijnt kort
   het bouwraster, zodat het leest als opnieuw opbouwen en niet als een
   leeg vlak dat hapert. */
.sb8-wframe__build{position:absolute;inset:var(--w-bar,32px) 0 0 0;z-index:1;overflow:hidden;pointer-events:none;opacity:0;
  transition:opacity .25s linear;
  background-image:linear-gradient(var(--w-accent,#00E5A8) 1px,transparent 1px),
    linear-gradient(90deg,var(--w-accent,#00E5A8) 1px,transparent 1px);
  background-size:48px 48px;mix-blend-mode:screen}
.sb8-wframe__build::after{content:"";position:absolute;left:0;right:0;height:34%;
  background:linear-gradient(180deg,transparent,var(--w-accent,#00E5A8),transparent);opacity:.22;
  animation:sb8-sweep 1s linear infinite}
@keyframes sb8-sweep{0%{transform:translateY(-40%)}100%{transform:translateY(300%)}}
.sb8-wframe[data-rebuild="1"] .sb8-wframe__build{opacity:.3}

.sb8-wframe__signal{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--sb8-signal),transparent);
  transform:scaleX(var(--sigX,1));transform-origin:left center}

.sb8-ext--on{border-color:var(--w-border,rgba(255,255,255,.3));color:var(--w-ink,#fff);opacity:.82;
  transition:border-color .6s linear,color .5s linear}
.sb8-ext--on::before{background:var(--sb8-signal)}

/* ---------- paneel ---------- */
.sb8-world__panel{display:grid;gap:11px;align-content:center;position:relative;z-index:3}
.sb8-world__tag{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--w-accent,#00E5A8);transition:color .5s linear}
.sb8-world__name{margin:0;line-height:1.03;
  font-family:var(--w-font,var(--sb8-display));
  font-weight:var(--w-weight,700);
  font-size:clamp(26px,3vw,48px);
  letter-spacing:var(--w-track,-.02em);
  text-transform:var(--w-case,none);
  transition:letter-spacing .6s var(--sb8-ease),font-weight .4s linear}
.sb8-world__why{margin:0;font-family:var(--sb8-sans);font-size:15px;line-height:1.6;opacity:.86}
.sb8-world__why:empty{display:none}
.sb8-world__note{margin:0;font-family:var(--sb8-sans);font-size:13px;line-height:1.55;opacity:.6}
.sb8-world__count{font-family:var(--sb8-mono);font-size:11px;letter-spacing:.1em;opacity:.55}
.sb8-world__count b{color:var(--w-accent,#00E5A8)}

/* ---------- de negen werelden ----------
   Interpretaties van ScaleBusiness, geen kopie van de externe sites. */
.sb8-world[data-world="kapsalon"]{--w-canvas:#14110E;--w-surface:#1C1814;--w-ink:#F6EFE5;--w-accent:#E8B55C;
  --w-border:rgba(232,181,92,.3);--w-line:rgba(232,181,92,.16);--w-url:rgba(255,255,255,.07);
  --w-radius:3px;--w-shell:6px;--w-case:uppercase;--w-track:.02em;--w-weight:700;--w-bar:30px;
  --w-deco-grid:0;--w-deco-dots:.5;--w-deco-glow:.16;--w-split:minmax(0,1.7fr) minmax(0,1fr)}
.sb8-world[data-world="installatie"]{--w-canvas:#0B1A22;--w-surface:#102630;--w-ink:#E8F4F8;--w-accent:#4FC3E8;
  --w-border:rgba(79,195,232,.26);--w-line:rgba(79,195,232,.15);--w-url:rgba(255,255,255,.08);
  --w-radius:12px;--w-shell:22px;--w-case:none;--w-track:-.02em;--w-weight:600;--w-bar:34px;
  --w-deco-grid:.35;--w-deco-dots:0;--w-deco-glow:.14;--w-split:minmax(0,1.55fr) minmax(0,1fr)}
.sb8-world[data-world="d2c"]{--w-canvas:#F5EFE7;--w-surface:#FFFFFF;--w-ink:#1A1613;--w-accent:#DC4326;
  --w-border:rgba(26,22,19,.16);--w-line:rgba(26,22,19,.12);--w-url:rgba(26,22,19,.06);
  --w-radius:2px;--w-shell:2px;--w-case:none;--w-track:-.035em;--w-weight:700;--w-bar:28px;
  --w-deco-grid:0;--w-deco-dots:0;--w-deco-glow:.1;--w-split:minmax(0,1.9fr) minmax(0,1fr)}
.sb8-world[data-world="restaurant"]{--w-canvas:#1A120D;--w-surface:#241810;--w-ink:#F7ECE0;--w-accent:#D9A05B;
  --w-border:rgba(217,160,91,.3);--w-line:rgba(217,160,91,.14);--w-url:rgba(255,255,255,.07);
  --w-radius:20px;--w-shell:26px;--w-case:none;--w-track:-.01em;--w-weight:600;--w-bar:34px;
  --w-deco-grid:0;--w-deco-dots:.3;--w-deco-glow:.2;--w-split:minmax(0,1.5fr) minmax(0,1fr)}
.sb8-world[data-world="sportschool"]{--w-canvas:#08080A;--w-surface:#121215;--w-ink:#FFFFFF;--w-accent:#C8FF2E;
  --w-border:rgba(200,255,46,.34);--w-line:rgba(255,255,255,.1);--w-url:rgba(255,255,255,.08);
  --w-radius:0px;--w-shell:0px;--w-case:uppercase;--w-track:-.01em;--w-weight:700;--w-bar:26px;
  --w-deco-grid:.3;--w-deco-dots:0;--w-deco-glow:.22;--w-split:minmax(0,1.75fr) minmax(0,1fr)}
.sb8-world[data-world="autogarage"]{--w-canvas:#0F131A;--w-surface:#161C25;--w-ink:#E9EEF5;--w-accent:#FF6A2B;
  --w-border:rgba(255,106,43,.3);--w-line:rgba(233,238,245,.12);--w-url:rgba(255,255,255,.07);
  --w-radius:3px;--w-shell:4px;--w-case:uppercase;--w-track:.01em;--w-weight:700;--w-bar:30px;
  --w-deco-grid:.55;--w-deco-dots:0;--w-deco-glow:.1;--w-split:minmax(0,1.6fr) minmax(0,1fr);--w-bw:2px}
.sb8-world[data-world="praktijk"]{--w-canvas:#EFF4F5;--w-surface:#FFFFFF;--w-ink:#16292B;--w-accent:#2F7C78;
  --w-border:rgba(22,41,43,.14);--w-line:rgba(22,41,43,.09);--w-url:rgba(22,41,43,.05);
  --w-radius:16px;--w-shell:24px;--w-case:none;--w-track:-.02em;--w-weight:500;--w-bar:34px;
  --w-deco-grid:0;--w-deco-dots:.22;--w-deco-glow:.08;--w-split:minmax(0,1.5fr) minmax(0,1fr)}
.sb8-world[data-world="aannemer"]{--w-canvas:#15171A;--w-surface:#1E2228;--w-ink:#F2F3F5;--w-accent:#F0C24B;
  --w-border:rgba(240,194,75,.28);--w-line:rgba(242,243,245,.1);--w-url:rgba(255,255,255,.07);
  --w-radius:2px;--w-shell:3px;--w-case:uppercase;--w-track:.015em;--w-weight:700;--w-bar:30px;
  --w-deco-grid:.42;--w-deco-dots:0;--w-deco-glow:.1;--w-split:minmax(0,1.65fr) minmax(0,1fr);--w-bw:2px}
.sb8-world[data-world="salon"]{--w-canvas:#F6F0EE;--w-surface:#FFFFFF;--w-ink:#2A211F;--w-accent:#A9857A;
  --w-border:rgba(42,33,31,.13);--w-line:rgba(42,33,31,.08);--w-url:rgba(42,33,31,.05);
  --w-radius:26px;--w-shell:32px;--w-case:none;--w-track:-.01em;--w-weight:500;--w-bar:36px;
  --w-deco-grid:0;--w-deco-dots:.16;--w-deco-glow:.12;--w-split:minmax(0,1.45fr) minmax(0,1fr)}

/* ---------- marquee ---------- */
.sb8-marq{position:relative;overflow:hidden;padding-block:6px}
.sb8-marq__track{display:flex;gap:16px;width:max-content;
  transform:translate3d(var(--mx,0px),0,0);will-change:transform}
.sb8-marq__item{flex:none;width:clamp(220px,21vw,300px);display:grid;gap:7px;justify-items:start;text-align:left;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.sb8-marq__shot{display:block;width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--sb8-line);background:#fff;
  transition:transform .3s var(--sb8-ease),border-color .3s}
.sb8-marq__shot img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top center}
.sb8-marq__item:hover .sb8-marq__shot{transform:translateY(-4px);border-color:var(--sb8-signal-deep)}
.sb8-marq__item:focus-visible{outline:3px solid var(--sb8-signal-deep);outline-offset:4px;border-radius:12px}
.sb8-marq__name{font-family:var(--sb8-display);font-weight:600;font-size:15px}
.sb8-marq__dom{font-family:var(--sb8-mono);font-size:10px;color:var(--sb8-mute)}
.sb8-marq__edge{position:absolute;top:0;bottom:0;width:clamp(40px,7vw,110px);pointer-events:none;z-index:2}
.sb8-marq__edge--l{left:0;background:linear-gradient(90deg,var(--sb8-paper) 10%,transparent)}
.sb8-marq__edge--r{right:0;background:linear-gradient(270deg,var(--sb8-paper) 10%,transparent)}

.sb8-more{margin-top:clamp(26px,3vw,48px);display:grid;gap:10px}
.sb8-plain{margin:18px 0 0;padding-left:18px;display:grid;gap:8px;font-size:14px}

.sb8-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.sb8-card{display:grid;gap:9px;align-content:start;padding:clamp(16px,1.6vw,24px);border:1px solid var(--sb8-line);
  border-radius:14px;background:var(--sb8-paper);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s var(--sb8-ease)}
a.sb8-card:hover{border-color:var(--sb8-signal-deep);transform:translateY(-3px)}
.sb8-card__lbl{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sb8-signal-deep)}
.sb8-card__ttl{font-family:var(--sb8-display);font-weight:600;font-size:17px;line-height:1.2;margin:0}
.sb8-card__txt{font-family:var(--sb8-sans);font-size:14px;line-height:1.55;color:var(--sb8-mute);margin:0}
.sb8-ext{display:inline-flex;align-items:center;gap:7px;font-family:var(--sb8-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sb8-mute);border:1px solid var(--sb8-line);border-radius:999px;padding:6px 11px}
.sb8-ext::before{content:"";width:6px;height:6px;border-radius:50%;background:#C7D3E4}

/* ============================================================
   CHAPTER 04 — DIAGNOSE
   ============================================================ */
.sb8-diag{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,2fr);gap:clamp(20px,2.6vw,52px);
  margin-top:clamp(26px,3vw,48px);align-items:start}
.sb8-diag__list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.sb8-diag__btn{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:16px 18px;border-radius:12px;border:1px solid var(--sb8-dark-line);background:transparent;color:#fff;
  text-align:left;cursor:pointer;font:inherit;transition:all .22s var(--sb8-ease)}
.sb8-diag__btn:hover{border-color:var(--sb8-dark-line-2)}
.sb8-diag__btn[aria-selected="true"]{background:rgba(0,229,168,.09);border-color:var(--sb8-signal-line)}
.sb8-diag__n{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.1em;color:var(--sb8-signal);opacity:.8}
.sb8-diag__lbl{font-family:var(--sb8-display);font-weight:600;font-size:clamp(15px,1.3vw,19px);letter-spacing:-.01em}
.sb8-diag__arrow{opacity:0;transition:opacity .2s;color:var(--sb8-signal)}
.sb8-diag__btn[aria-selected="true"] .sb8-diag__arrow{opacity:1}
.sb8-diag__pane{border:1px solid var(--sb8-dark-line);border-radius:18px;padding:clamp(20px,2.4vw,40px);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));min-height:clamp(300px,34vw,430px);
  display:grid;gap:clamp(12px,1.4vw,20px);align-content:start}
.sb8-diag__pane[data-swap="1"] .sb8-diag__swap{opacity:0;transform:translateY(10px)}
.sb8-diag__swap{transition:opacity .32s var(--sb8-ease),transform .32s var(--sb8-ease)}
.sb8-diag__kop{font-family:var(--sb8-display);font-weight:700;font-size:clamp(22px,2.6vw,42px);line-height:1.04;letter-spacing:-.022em;margin:0;max-width:20ch}
.sb8-diag__vb{font-family:var(--sb8-mono);font-size:12px;line-height:1.6;color:#BFD3EA;border-left:2px solid var(--sb8-signal-line);
  padding-left:14px;margin:0}
.sb8-diag__bul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sb8-diag__bul li{position:relative;padding-left:20px;font-family:var(--sb8-sans);font-size:15px;line-height:1.5;color:#D7E3F3}
.sb8-diag__bul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;border-radius:2px;background:var(--sb8-signal)}

/* ============================================================
   CHAPTER 05 — SIGNAL LINE / WERKWIJZE
   ============================================================ */
.sb8-norms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,30px);
  border-block:1px solid var(--sb8-line);padding-block:clamp(18px,2.2vw,34px);margin-top:clamp(26px,3vw,46px)}
.sb8-norm__v{font-family:var(--sb8-display);font-weight:700;font-size:clamp(21px,2.3vw,36px);letter-spacing:-.02em;line-height:1;margin:0}
.sb8-norm__l{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.14em;color:var(--sb8-signal-deep);margin:6px 0 4px}
.sb8-norm__n{font-family:var(--sb8-sans);font-size:13px;color:var(--sb8-mute);margin:0;line-height:1.45}

.sb8-line{position:relative;margin-top:clamp(34px,4.4vw,72px)}
.sb8-line__track{position:absolute;left:0;right:0;top:26px;height:2px;background:var(--sb8-line)}
.sb8-line__fill{position:absolute;inset:0;background:var(--sb8-signal-deep);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .1s linear}
.sb8-line__steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,28px);position:relative}
.sb8-step{display:grid;gap:10px;align-content:start}
.sb8-step__dot{width:14px;height:14px;border-radius:50%;background:var(--sb8-white);border:2px solid var(--sb8-line);
  margin-top:20px;position:relative;transition:border-color .3s,background-color .3s,box-shadow .3s}
.sb8-step[data-on="1"] .sb8-step__dot{border-color:var(--sb8-signal-deep);background:var(--sb8-signal);box-shadow:0 0 0 5px var(--sb8-signal-soft)}
.sb8-step__n{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.14em;color:var(--sb8-mute);margin:0}
.sb8-step__t{font-family:var(--sb8-display);font-weight:600;font-size:clamp(17px,1.6vw,24px);letter-spacing:-.015em;margin:0}
.sb8-step__b{font-family:var(--sb8-sans);font-size:14px;line-height:1.5;color:var(--sb8-mute);margin:0}

.sb8-disc{margin-top:clamp(34px,4vw,64px);border-top:1px solid var(--sb8-line);padding-top:clamp(20px,2.4vw,36px)}
.sb8-acc{border-bottom:1px solid var(--sb8-line)}
.sb8-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;font-family:var(--sb8-display);font-weight:600;font-size:clamp(16px,1.4vw,21px);letter-spacing:-.01em}
.sb8-acc summary::-webkit-details-marker{display:none}
.sb8-acc summary span{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--sb8-line);
  display:grid;place-items:center;font-family:var(--sb8-mono);font-size:13px;color:var(--sb8-mute);transition:all .2s}
.sb8-acc[open] summary span{background:var(--sb8-navy);border-color:var(--sb8-navy);color:#fff}
.sb8-acc__body{padding:0 0 20px;display:grid;gap:10px}
.sb8-acc__body p{font-family:var(--sb8-sans);font-size:15px;line-height:1.6;color:var(--sb8-mute);margin:0;max-width:70ch}
.sb8-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,34px)}
.sb8-chk{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sb8-chk li{position:relative;padding-left:22px;font-family:var(--sb8-sans);font-size:14.5px;line-height:1.5;color:var(--sb8-mute)}
.sb8-chk li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;border-left:2px solid var(--sb8-signal-deep);
  border-bottom:2px solid var(--sb8-signal-deep);transform:rotate(-45deg)}
.sb8-chk--x li::before{border:0;width:11px;height:11px;top:.3em;
  background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  transform:rotate(45deg);color:#B4C2D6}

/* ============================================================
   CHAPTER 06 — FINALE
   ============================================================ */
.sb8-fin{position:relative;overflow:clip}
.sb8-fin__stage{position:relative;display:grid;gap:clamp(26px,3.2vw,56px);justify-items:center;text-align:center}
.sb8-fin__conv{position:relative;width:min(100%,880px);height:clamp(140px,18vw,230px)}
.sb8-fin__conv svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sb8-fin__pill{position:absolute;top:0;translate:-50% 0;font-family:var(--sb8-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sb8-dark-mute);white-space:nowrap;transition:color .3s}
.sb8-fin__pill[data-on="1"]{color:var(--sb8-signal)}
.sb8-fin__mark{position:absolute;left:50%;bottom:-6px;translate:-50% 0;display:flex;align-items:center;gap:10px;
  font-family:var(--sb8-display);font-weight:700;font-size:clamp(18px,2vw,30px);letter-spacing:-.02em;color:#fff}
.sb8-fin__mark i{width:10px;height:10px;border-radius:50%;background:var(--sb8-signal);box-shadow:0 0 20px 4px rgba(0,229,168,.5);
  transform:scale(var(--s,0));transition:transform .5s var(--sb8-ease-out)}
.sb8-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,26px);width:min(100%,940px);text-align:left}
.sb8-team__node{border:1px solid var(--sb8-dark-line);border-radius:14px;padding:clamp(14px,1.5vw,22px);display:grid;gap:7px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
.sb8-team__t{font-family:var(--sb8-display);font-weight:600;font-size:16px;margin:0}
.sb8-team__b{font-family:var(--sb8-sans);font-size:14px;line-height:1.5;color:var(--sb8-dark-mute);margin:0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1023px){
  .sb8-hero__track{height:230vh}
  .sb8-hero__stage{min-height:600px}
  .sb8-hero__grid{grid-template-columns:1fr;gap:clamp(18px,4vw,34px);align-content:center}
  .sb8-hero__copy .sb8-d1{max-width:18ch}
  .sb8-hero__viz{max-width:560px;aspect-ratio:16/12}
  .sb8-sys__stage{grid-template-columns:1fr;gap:12px}
  /* De wereld krijgt op smal een eigen, compactere opbouw: het frame boven,
     het paneel eronder, en de selector wordt een veegrij met randvervaging. */
  .sb8-world__in{grid-template-columns:1fr!important;gap:16px}
  .sb8-world{border-radius:var(--w-shell,16px)}
  .sb8-world__panel{gap:8px}
  .sb8-world__name{font-size:clamp(22px,6vw,32px)}
  .sb8-pick{margin-inline:calc(-1 * var(--sb8-gutter));padding-inline:var(--sb8-gutter)}
  .sb8-pick__row{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:10px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .sb8-pick__row::-webkit-scrollbar{height:5px}
  .sb8-pick__row::-webkit-scrollbar-thumb{background:var(--sb8-line);border-radius:99px}
  .sb8-pill{flex:none;scroll-snap-align:start;padding:12px 15px;font-size:13px}
  .sb8-pick__fade{display:block;position:absolute;right:0;top:0;bottom:10px;width:52px;pointer-events:none;
    background:linear-gradient(270deg,var(--sb8-paper) 12%,transparent)}
  .sb8-marq__item{width:clamp(190px,58vw,240px)}
  .sb8-slice[data-slice="3"]{display:none}
  .sb8-slice{width:33.8%}
  .sb8-slice[data-slice="1"]{left:33.2%}
  .sb8-slice[data-slice="2"]{left:66.2%}
  .sb8-diag{grid-template-columns:1fr;gap:18px}
  .sb8-line__steps{grid-template-columns:1fr;gap:0}
  .sb8-line__track{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .sb8-line__fill{transform-origin:top;transform:scaleY(var(--p,0))}
  .sb8-step{grid-template-columns:auto 1fr;gap:0 16px;padding-bottom:22px}
  .sb8-step__dot{margin-top:4px;grid-row:1/4}
  .sb8-step__n,.sb8-step__t,.sb8-step__b{grid-column:2}
  .sb8-norms{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .sb8-team{grid-template-columns:1fr}
}
@media(max-width:767px){
  .sb8-hero__track{height:220vh}
  .sb8-hero__stage{min-height:560px;justify-content:flex-start;padding-top:calc(var(--sb-header-h,68px) + 10px);padding-bottom:104px}
  .sb8-hero__grid{gap:12px}
  .sb8-hero__copy{gap:11px}
  .sb8-hero__copy .sb8-lead{font-size:15.5px;line-height:1.45}
  .sb8-hero__micro{font-size:10px;line-height:1.4}
  .sb8-hero__viz{max-width:100%;aspect-ratio:4/3.05;margin-top:16px;margin-bottom:34px}
  .sb8-annos{gap:8px;bottom:-30px}
  .sb8-anno{font-size:9px;letter-spacing:.1em}
  .sb8-anno::before{width:10px}
  .sb8-lane{bottom:-32px}
  .sb8-lane__name{font-size:12px}
  .sb8-hero__copy .sb8-d1{max-width:none}
  .sb8-hero__phase{left:var(--sb8-gutter);right:var(--sb8-gutter);bottom:14px}
  .sb8-btn{padding:14px 20px;min-height:46px}
  .sb8-tab{min-height:44px}
  .sb8-diag__btn{min-height:52px}
  .sb8-rail{grid-auto-columns:78vw}
}
@media(min-width:1440px){
  .sb8-hero__viz{max-width:790px}
}

/* ============================================================
   REDUCED MOTION — alles direct in eindtoestand, niets verborgen
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .sb8-hero__track{height:auto!important}
  .sb8-hero__stage{position:static!important;height:auto!important;min-height:0!important;padding-block:var(--sb8-chapter-y)}
  .sb8-hero__phase{display:none}
  .sb8-blk{transform:none!important;opacity:1!important}
  .sb8-hero__viz{transform:none!important}
  .sb8-hero__copy{opacity:1!important;transform:none!important}
  .sb8-scan{display:none}
  .sb8-blk__real,.sb8-thumb{opacity:1!important}
  .sb8-anno,.sb8-lane{opacity:1!important;transform:none!important}
  /* Zonder animatie staan de annotaties en de routelabels allebei vast onder
     het frame. Ze krijgen daarom elk hun eigen regel in plaats van dezelfde. */
  .sb8-hero__viz{margin-bottom:92px}
  .sb8-annos{bottom:-32px;opacity:1!important}
  .sb8-lane{bottom:-74px}
  .sb8-dev--desk{transform:translateX(-17%) scale(.62)!important}
  .sb8-dev--tab,.sb8-dev--mob{transform:none!important;opacity:1!important}
  .sb8-node{display:none}
  .sb8-rv{opacity:1!important;transform:none!important;transition:none!important}
  /* De wereld wisselt wel, maar zonder hercompositie: de plakken blijven uit
     en het frame wisselt direct van beeld. */
  .sb8-slice{display:none}
  .sb8-marq__track{transform:none!important}
  .sb8-marq{overflow-x:auto}
  .sb8-pick__dot{animation:none}
  .sb8-world,.sb8-world__in,.sb8-wframe{transition:none!important}
  .sb8-line__fill{transform:none!important}
  .sb8-step__dot{border-color:var(--sb8-signal-deep);background:var(--sb8-signal)}
  .sb8-fin__mark i{transform:scale(1)!important}
  .sb8-fin__pill{color:var(--sb8-signal)!important}
  .sb8-btn,.sb8-card,.sb8-sys__lane{transition:none!important}
}
html[data-sb-motion="off"] .sb8-hero__track{height:auto}
html[data-sb-motion="off"] .sb8-hero__stage{position:static;height:auto;min-height:0;padding-block:var(--sb8-chapter-y)}
html[data-sb-motion="off"] .sb8-hero__viz{margin-bottom:92px}
html[data-sb-motion="off"] .sb8-annos{bottom:-32px}
html[data-sb-motion="off"] .sb8-lane{bottom:-74px}

/* ============================================================
   ONE SIGNAL — doorlopende lijn en node over de hele pagina

   Eén groene lijn die van hoofdstuk 01 tot 06 meeloopt met de scroll, met
   een node die de voortgang aangeeft. Dit is tegelijk de signatuur en de
   voortgangsfeedback: zolang het bolletje beweegt, ziet de bezoeker dat de
   pagina reageert en niet vastloopt.
   ============================================================ */
.sb8-thread{position:fixed;left:max(12px,calc((100vw - var(--sb8-wrap)) / 2 - 26px));top:0;bottom:0;width:2px;z-index:40;
  pointer-events:none;opacity:var(--thO,0);transition:opacity .4s var(--sb8-ease)}
.sb8-thread__rail{position:absolute;inset:0;background:currentColor;opacity:.16;color:var(--sb8-signal)}
.sb8-thread__fill{position:absolute;left:0;right:0;top:0;height:100%;transform-origin:top center;
  transform:scaleY(var(--thP,0));
  background:linear-gradient(180deg,rgba(0,229,168,.1),var(--sb8-signal))}
.sb8-thread__node{position:absolute;left:50%;top:calc(var(--thP,0) * 100%);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--sb8-signal);box-shadow:0 0 0 5px rgba(0,229,168,.18),0 0 22px 4px rgba(0,229,168,.45)}
.sb8-thread__node::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(0,229,168,.5);
  animation:sb8-ring 2.2s var(--sb8-ease) infinite}
@keyframes sb8-ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.sb8-thread__cap{position:absolute;left:14px;top:calc(var(--thP,0) * 100%);transform:translateY(-50%);
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--sb8-signal);opacity:var(--capO,0);transition:opacity .3s linear}

@media(max-width:1520px){
  /* Onder deze breedte is er geen marge naast de inhoud: de lijn gaat naar
     de rand en het hoofdstuklabel vervalt, zodat het nooit over tekst valt. */
  .sb8-thread{left:8px;width:2px}
  .sb8-thread__cap{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sb8-thread{display:none}
}

/* ---------- FINALE: de ontlading ----------
   Op het moment dat de drie routes samenkomen gaat er één korte lichtpuls
   over het scherm. Geen stroboscoop: één zachte flits, gekoppeld aan de
   scrollpositie, dus de bezoeker bepaalt zelf het tempo. */
.sb8-fin__flash{position:absolute;left:50%;top:46%;width:min(120vw,1500px);aspect-ratio:1;z-index:1;
  transform:translate(-50%,-50%) scale(var(--fS,.2));pointer-events:none;opacity:var(--fO,0);
  background:radial-gradient(closest-side,rgba(0,229,168,.55),rgba(0,229,168,.16) 42%,transparent 68%);
  filter:blur(14px);mix-blend-mode:screen}
.sb8-fin__ring{position:absolute;left:50%;top:46%;width:min(78vw,900px);aspect-ratio:1;z-index:1;pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--rS,.3));opacity:var(--rO,0);
  border:1px solid rgba(0,229,168,.55);border-radius:50%}
@media(prefers-reduced-motion:reduce){
  .sb8-fin__flash,.sb8-fin__ring{display:none}
}

/* ============================================================
   v8 STICKY STAPPEN — herbruikbaar op de servicepagina's

   Beeld links vast, stappen rechts erlangs. Alles abstract: geen cijfers,
   geen dashboards, geen verzonnen resultaten.
   ============================================================ */
.sb8-steps{position:relative}
.sb8-steps__track{position:relative}
.sb8-steps__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);
  align-items:start;padding-block:var(--sb8-chapter-y)}
.sb8-steps__stage{position:sticky;top:clamp(80px,14vh,150px);align-self:start}
.sb8-steps__viz{display:grid;gap:12px}

.sb8-vframe{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--sb8-dark-line-2,rgba(168,188,216,.18));
  background:#0A1E38;box-shadow:0 40px 90px -55px rgba(0,0,0,.9)}
.sb8-scene--light .sb8-vframe{background:#fff;border-color:var(--sb8-line);box-shadow:0 30px 60px -42px rgba(8,24,46,.45)}
.sb8-vframe__bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(168,188,216,.14)}
.sb8-scene--light .sb8-vframe__bar{background:var(--sb8-mist);border-bottom-color:var(--sb8-line)}
.sb8-vframe__url{flex:1;max-width:280px;margin-left:8px;height:14px;border-radius:999px;background:rgba(168,188,216,.13);
  display:flex;align-items:center;padding:0 9px;font-family:var(--sb8-mono);font-size:9px;color:var(--sb8-dark-mute,#8FA6C4)}
.sb8-scene--light .sb8-vframe__url{background:#fff;border:1px solid var(--sb8-line);color:var(--sb8-mute)}
.sb8-vframe__view{position:relative;aspect-ratio:16/10.4;overflow:hidden}
.sb8-vframe__signal{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:5;
  background:linear-gradient(90deg,transparent,var(--sb8-signal),transparent);
  transform:scaleX(var(--vsig,0));transform-origin:left center;transition:transform .6s var(--sb8-ease)}

.sb8-vscreen{position:absolute;inset:0;padding:clamp(12px,1.6vw,22px);display:grid;gap:clamp(7px,.9vw,12px);
  align-content:start;grid-template-rows:auto;
  opacity:var(--vo,0);transform:translate3d(0,var(--vy,14px),0) scale(var(--vs,.97));
  transition:opacity .42s var(--sb8-ease),transform .52s var(--sb8-ease);pointer-events:none}
.sb8-vscreen[data-on="1"]{--vo:1;--vy:0px;--vs:1}

.sb8-vb{display:block;border-radius:6px;background:rgba(168,188,216,.14)}
.sb8-scene--light .sb8-vb{background:rgba(8,24,46,.09)}
.sb8-vb--wire{background:none;border:1px dashed rgba(168,188,216,.34)}
.sb8-scene--light .sb8-vb--wire{border-color:rgba(8,24,46,.22)}
.sb8-vb--nav{height:clamp(14px,1.8vw,24px)}
.sb8-vb--hero{height:clamp(52px,7vw,104px)}
.sb8-vb--row{height:clamp(26px,3.4vw,50px)}
.sb8-vb--cta{height:clamp(18px,2.2vw,30px);width:min(52%,230px)}
.sb8-vb--fill{background:linear-gradient(120deg,rgba(0,229,168,.24),rgba(44,99,168,.34)),
  repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px)}
.sb8-vb--signal{background:var(--sb8-signal)}
.sb8-vphone{width:31%;margin-inline:auto;aspect-ratio:9/17;border-radius:12px;border:1px solid rgba(168,188,216,.24);
  padding:9px;display:grid;gap:7px;align-content:start;background:rgba(255,255,255,.03)}
.sb8-scene--light .sb8-vphone{border-color:var(--sb8-line);background:var(--sb8-mist)}

.sb8-vnode{position:absolute;left:var(--x);top:var(--y);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:var(--sb8-signal);box-shadow:0 0 0 5px rgba(0,229,168,.16)}
.sb8-vlines{position:absolute;inset:0;width:100%;height:100%;fill:none;
  stroke:var(--sb8-signal-line,rgba(0,229,168,.44));stroke-width:.6}
.sb8-vsweep{position:absolute;left:0;right:0;height:38%;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,229,168,.18),transparent);
  opacity:var(--swO,0);transform:translateY(calc(var(--sw,0) * 280% - 40%));mix-blend-mode:screen}

/* ------------------------------------------------------------------
   MINI-INTERFACES IN HET STAPPENBEELD

   Vervangt de grijze placeholderblokken. Alles schaalt mee met één unit
   zodat hetzelfde schermpje op 1440 en op 375 klopt. De inhoud staat in
   snippets/sb-step-screen.liquid.
   ------------------------------------------------------------------ */
.sb8-vscreen--rich{padding:0;display:block;overflow:hidden;--play:paused}
.sb8-vscreen--rich[data-on="1"]{--play:running}
.sb8-sc{--u:clamp(10px,1.22vw,17px);--scl:rgba(8,24,46,.12);--scm:#56698A;--sct:#12243E;
  position:absolute;inset:0;padding:calc(var(--u) * 1.35);display:flex;flex-direction:column;
  justify-content:space-between;gap:calc(var(--u) * .8);font-family:var(--sb8-sans);font-size:var(--u);
  line-height:1.34;color:var(--sct);overflow:hidden}
.sb8-scene--ink .sb8-sc{--scl:rgba(168,188,216,.2);--scm:#8FA3BF;--sct:#F2F7FD}
.sb8-sc__head{display:flex;align-items:baseline;gap:calc(var(--u) * .8);flex-wrap:wrap;flex:0 0 auto}
.sb8-sc__tag{font-family:var(--sb8-mono);font-size:calc(var(--u) * .84);letter-spacing:.16em;
  color:var(--sb8-signal-deep);font-weight:600}
.sb8-scene--ink .sb8-sc__tag{color:var(--sb8-signal)}
.sb8-sc__sub{font-size:calc(var(--u) * .86);color:var(--scm)}
.sb8-sc__foot{margin:auto 0 0;font-size:calc(var(--u) * .84);color:var(--scm);flex:0 0 auto}

/* rijen met open meetveld */
.sb8-sc__rows{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u) * .5);
  flex:1 1 auto;min-height:0;align-content:space-between}
.sb8-sc__rows li{display:grid;grid-template-columns:minmax(0,auto) minmax(calc(var(--u) * 2),1fr) minmax(0,auto);
  align-items:center;gap:calc(var(--u) * .6);padding-bottom:calc(var(--u) * .55);border-bottom:1px solid var(--scl)}
.sb8-sc__rows b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sb8-sc__lead{display:block;height:1px;background:repeating-linear-gradient(90deg,var(--scl) 0 3px,transparent 3px 6px)}
.sb8-sc__src{font-family:var(--sb8-mono);font-size:calc(var(--u) * .78);letter-spacing:.06em;color:var(--scm);white-space:nowrap}
.sb8-sc__rows li[data-sc-miss="1"] .sb8-sc__src{color:#B4552F}
.sb8-scene--ink .sb8-sc__rows li[data-sc-miss="1"] .sb8-sc__src{color:#FFAD8A}
.sb8-sc__scan{position:absolute;left:0;right:0;top:0;height:calc(var(--u) * 3.4);pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,229,168,.16),transparent);
  animation:sb8-scscan 5.6s var(--sb8-ease) infinite;animation-play-state:var(--play,paused)}
@keyframes sb8-scscan{0%{transform:translateY(20%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(560%);opacity:0}}

/* sleutel-waarde en chips */
.sb8-sc__kv{margin:0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:calc(var(--u) * .55) calc(var(--u) * .9);align-items:center;flex:0 0 auto;
  padding-bottom:calc(var(--u) * .8);border-bottom:1px solid var(--scl)}
.sb8-sc__kv dt{font-family:var(--sb8-mono);font-size:calc(var(--u) * .78);letter-spacing:.1em;color:var(--scm)}
.sb8-sc__kv dd{margin:0;display:flex;gap:calc(var(--u) * .4);flex-wrap:wrap;min-width:0}
.sb8-sc__chip{display:inline-block;padding:calc(var(--u) * .22) calc(var(--u) * .62);border-radius:999px;
  border:1px solid var(--scl);font-size:calc(var(--u) * .84);white-space:nowrap}
.sb8-sc__chip--on{border-color:transparent;background:var(--sb8-signal-soft);color:var(--sb8-signal-deep);font-weight:600}
.sb8-scene--ink .sb8-sc__chip--on{color:#04101F;background:var(--sb8-signal)}
.sb8-sc__cols{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 1.1);flex:1 1 auto;min-height:0}
.sb8-sc__cap{margin:0 0 calc(var(--u) * .5);font-family:var(--sb8-mono);font-size:calc(var(--u) * .76);
  letter-spacing:.12em;text-transform:uppercase;color:var(--scm)}
.sb8-sc__ticks{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u) * .48);align-content:start}
.sb8-sc__ticks li{position:relative;padding-left:calc(var(--u) * 1.3);font-size:calc(var(--u) * .92)}
.sb8-sc__ticks li::before{position:absolute;left:0;top:0;font-family:var(--sb8-mono);font-size:calc(var(--u) * .9)}
.sb8-sc__ticks[data-sc-tone="yes"] li::before{content:"\2713";color:var(--sb8-signal-deep)}
.sb8-scene--ink .sb8-sc__ticks[data-sc-tone="yes"] li::before{color:var(--sb8-signal)}
.sb8-sc__ticks[data-sc-tone="no"] li::before{content:"\2715";color:var(--scm)}
.sb8-sc__ticks[data-sc-tone="no"] li{color:var(--scm)}

/* bouwbord */
.sb8-sc__board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * .7);flex:1 1 auto;min-height:0}
.sb8-sc__lane{display:grid;gap:calc(var(--u) * .45);align-content:start;min-width:0}
.sb8-sc--bouw .sb8-sc__board{align-items:start}
.sb8-sc__card{display:block;padding:calc(var(--u) * .5) calc(var(--u) * .6);border-radius:calc(var(--u) * .45);
  border:1px solid var(--scl);font-size:calc(var(--u) * .86);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb8-sc__card--live{border-color:rgba(0,229,168,.42);background:var(--sb8-signal-soft)}
.sb8-sc__card--done{opacity:.62;text-decoration:line-through;text-decoration-thickness:1px}
.sb8-sc__bar{height:calc(var(--u) * .35);border-radius:999px;background:var(--scl);overflow:hidden;flex:0 0 auto}
.sb8-sc__bar i{display:block;height:100%;width:58%;background:var(--sb8-signal)}

/* testoverzicht */
.sb8-sc__runs{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u) * .5);
  flex:1 1 auto;min-height:0;align-content:space-between}
.sb8-sc__runs li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);align-items:center;
  gap:calc(var(--u) * .6);padding:calc(var(--u) * .5) calc(var(--u) * .65);border:1px solid var(--scl);
  border-radius:calc(var(--u) * .45)}
.sb8-sc__runs b{font-weight:600;white-space:nowrap}
.sb8-sc__runs span{color:var(--scm);font-size:calc(var(--u) * .88);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb8-sc__runs em{font-style:normal;font-family:var(--sb8-mono);font-size:calc(var(--u) * .78);letter-spacing:.1em;white-space:nowrap}
.sb8-sc__runs li[data-sc-run="on"]{border-color:rgba(0,229,168,.38)}
.sb8-sc__runs li[data-sc-run="on"] em{color:var(--sb8-signal-deep)}
.sb8-scene--ink .sb8-sc__runs li[data-sc-run="on"] em{color:var(--sb8-signal)}
.sb8-sc__runs li[data-sc-run="off"]{opacity:.55}
.sb8-sc__pulse{position:absolute;right:calc(var(--u) * 1.5);top:calc(var(--u) * 1.5);width:calc(var(--u) * .5);
  height:calc(var(--u) * .5);border-radius:50%;background:var(--sb8-signal);
  animation:sb8-scpulse 2.4s var(--sb8-ease) infinite;animation-play-state:var(--play,paused)}
@keyframes sb8-scpulse{0%,100%{box-shadow:0 0 0 0 rgba(0,229,168,.5)}55%{box-shadow:0 0 0 6px rgba(0,229,168,0)}}

/* procesflow */
.sb8-sc__flow{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;justify-content:space-between;
  gap:calc(var(--u) * .5);flex:0 0 auto;position:relative}
.sb8-sc__flow::before{content:"";position:absolute;left:calc(var(--u) * .3);right:calc(var(--u) * .3);
  top:calc(var(--u) * .35);height:1px;background:var(--scl)}
.sb8-sc__flow li{position:relative;display:grid;justify-items:center;gap:calc(var(--u) * .45);
  font-size:calc(var(--u) * .84);text-align:center;min-width:0}
.sb8-sc__flow li:first-child{justify-items:start;text-align:left}
.sb8-sc__flow li:last-child{justify-items:end;text-align:right}
.sb8-sc__node{width:calc(var(--u) * .72);height:calc(var(--u) * .72);border-radius:50%;
  background:var(--sb8-signal);box-shadow:0 0 0 calc(var(--u) * .3) rgba(0,229,168,.18)}
.sb8-sc--schaal .sb8-sc__ticks{margin-top:auto}

@media(max-width:1023px){
  .sb8-sc__cols{grid-template-columns:1fr;gap:calc(var(--u) * .7)}
  .sb8-sc__rows li:nth-child(n+4){display:none}
}
@media(prefers-reduced-motion:reduce){
  .sb8-sc{position:relative;inset:auto}
  .sb8-sc__scan,.sb8-sc__pulse{display:none}
}

.sb8-steps__cap{margin:0;font-family:var(--sb8-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sb8-signal);min-height:14px}
.sb8-scene--light .sb8-steps__cap{color:var(--sb8-signal-deep)}

.sb8-stepl{list-style:none;margin:clamp(20px,2.4vw,38px) 0 0;padding:0;display:grid;gap:clamp(30px,6vw,110px)}
.sb8-stepl__item{position:relative;padding-left:38px;
  opacity:var(--io,.32);transition:opacity .4s var(--sb8-ease)}
.sb8-stepl__item[data-on="1"]{--io:1}
.sb8-stepl__dot{position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--sb8-signal);background:transparent;transition:background-color .3s,box-shadow .3s}
.sb8-stepl__item[data-on="1"] .sb8-stepl__dot{background:var(--sb8-signal);box-shadow:0 0 0 5px rgba(0,229,168,.18)}
.sb8-stepl__n{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.16em;color:var(--sb8-signal);display:block;margin-bottom:6px}
.sb8-scene--light .sb8-stepl__n{color:var(--sb8-signal-deep)}
.sb8-stepl__t{margin:0 0 8px;font-family:var(--sb8-display);font-weight:600;font-size:clamp(19px,2vw,30px);line-height:1.16;letter-spacing:-.02em}
.sb8-stepl__b{margin:0;font-family:var(--sb8-sans);font-size:15px;line-height:1.62;opacity:.82}

@media(max-width:1023px){
  /* Op smal is vastzetten hinderlijk: beeld boven, stappen eronder, en het
     beeld blijft klein genoeg om de tekst niet weg te drukken. */
  .sb8-steps__grid{grid-template-columns:1fr;gap:20px}
  .sb8-steps__stage{position:sticky;top:calc(var(--sb-header-h,68px) + 8px);z-index:3}
  .sb8-steps__viz{max-width:none}
  .sb8-vframe__view{aspect-ratio:16/8.6}
  .sb8-stepl{gap:34px}
  .sb8-stepl__item{--io:1}
}
@media(prefers-reduced-motion:reduce){
  .sb8-steps__stage{position:static}
  .sb8-vscreen{position:relative;inset:auto;opacity:1!important;transform:none!important;margin-bottom:10px}
  .sb8-vframe__view{aspect-ratio:auto;height:auto}
  .sb8-vsweep,.sb8-vframe__signal{display:none}
  .sb8-stepl__item{--io:1}
}

/* De v8 sticky stappen worden ook gebruikt door de bestaande sectie
   Werkwijze / stappen op de servicepagina's. Die kent een mist-variant. */
.sb8-steps--mist{background:var(--sb8-mist)}
.sb8-stepl__note{margin:clamp(18px,2vw,30px) 0 0;font-family:var(--sb8-sans);font-size:14px;line-height:1.6;
  color:var(--sb8-mute);max-width:74ch}

/* ============================================================
   SERVICE HERO v8 — ruimte per dienst
   ============================================================ */
.sb8-svc{position:relative;overflow:clip;padding-block:calc(var(--sb-header-h,68px) + clamp(34px,5vw,86px)) clamp(48px,6vw,96px)}
.sb8-svc__glow{position:absolute;inset:auto -10% -20% 34%;height:66vh;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 50%,rgba(0,229,168,.15),transparent 70%);filter:blur(22px)}
.sb8-svc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(24px,3.6vw,68px);
  align-items:center;position:relative;z-index:2}
.sb8-svc__copy{display:grid;gap:clamp(14px,1.5vw,24px);align-content:center}
.sb8-svc__copy .sb8-d1{max-width:100%}
.sb8-svc__viz{position:relative;aspect-ratio:16/12;perspective:1400px;perspective-origin:50% 46%}
.sb8-svc__stack{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(var(--sRY,0deg)) rotateX(var(--sRX,0deg));will-change:transform}

.sb8-brow3,.sb8-card3,.sb8-flow3,.sb8-path3{position:absolute;border-radius:12px;
  border:1px solid var(--sb8-dark-line-2,rgba(168,188,216,.2));background:#0A1E38;overflow:hidden;
  box-shadow:0 40px 80px -52px rgba(0,0,0,.9);
  opacity:var(--lo,0);transform:translate3d(0,var(--ly,26px),var(--lz,-160px)) rotateY(var(--lry,0deg));
  transition:opacity .6s var(--sb8-ease),transform .9s cubic-bezier(.16,1,.3,1)}
.sb8-brow3{left:0;top:6%;width:82%;aspect-ratio:16/10.4}
.sb8-brow3--mob{left:auto;right:0;top:30%;width:22%;aspect-ratio:9/17;border-radius:16px}
.sb8-brow3__bar{position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;gap:6px;padding:0 10px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(168,188,216,.14)}
.sb8-brow3__in{position:absolute;inset:26px 0 0 0;padding:clamp(10px,1.4vw,18px);display:grid;gap:clamp(6px,.8vw,11px);align-content:start}
.sb8-brow3--mob .sb8-brow3__in{inset:0;padding:9px;gap:7px}

.sb8-card3{left:4%;top:10%;width:56%;aspect-ratio:4/5;padding:12px;display:grid;gap:9px;align-content:start}
.sb8-card3--2{left:24%;top:20%}
.sb8-card3--3{left:44%;top:30%}

.sb8-flow3,.sb8-path3{inset:6% 2%;background:rgba(10,30,56,.5)}
.sb8-svc-path{stroke:var(--sb8-signal);stroke-width:.8;fill:none;
  stroke-dasharray:var(--pl,200);stroke-dashoffset:calc(var(--pl,200) * (1 - var(--pp,0)))}

.sb8-svc__norms{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin-top:clamp(28px,3.4vw,56px);padding-top:clamp(20px,2.4vw,36px);
  border-top:1px solid var(--sb8-dark-line,rgba(168,188,216,.14))}
.sb8-norm3{display:grid;gap:5px;align-content:start}
.sb8-norm3__l{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sb8-signal)}
.sb8-norm3__v{font-family:var(--sb8-display);font-weight:600;font-size:17px;color:#fff}
.sb8-norm3__n{margin:0;font-family:var(--sb8-sans);font-size:13.5px;line-height:1.55;color:var(--sb8-dark-mute,#8FA6C4)}

@media(max-width:1023px){
  .sb8-svc__grid{grid-template-columns:1fr;gap:20px}
  .sb8-svc__viz{aspect-ratio:16/11;max-width:560px;margin-inline:auto;width:100%}
  .sb8-brow3{width:78%}
  .sb8-brow3--mob{width:24%}
}
@media(prefers-reduced-motion:reduce){
  .sb8-svc__stack{transform:none!important}
  .sb8-brow3,.sb8-card3,.sb8-flow3,.sb8-path3{--lo:1;--ly:0px;--lz:0px;--lry:0deg;transition:none}
  .sb8-svc-path{stroke-dasharray:none;stroke-dashoffset:0}
}

/* ============================================================
   PAGINA-OPENER v8

   Elke pagina die geen eigen v8-hero heeft, krijgt toch een echte opening:
   de eerste sectie wordt donker, met de groene signaallijn en een kop die
   zich onthult. Alleen presentatie, de tekst blijft ongewijzigd.
   ============================================================ */
.sb8-opener{position:relative;overflow:clip;background:var(--sb8-ink);color:#fff;
  padding-block:calc(var(--sb-header-h,68px) + clamp(38px,5.4vw,92px)) clamp(44px,5.4vw,92px)}
.sb8-opener::before{content:"";position:absolute;inset:auto -12% -34% 30%;height:74vh;pointer-events:none;
  background:radial-gradient(56% 56% at 50% 50%,rgba(0,229,168,.16),transparent 70%);filter:blur(24px)}
.sb8-opener::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(168,188,216,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,188,216,.06) 1px,transparent 1px);background-size:72px 72px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%)}
.sb8-opener > *{position:relative;z-index:2}
.sb8-opener :is(h1,h2){color:#fff}
.sb8-opener .sb-eyebrow{color:var(--sb8-signal)}
.sb8-opener :is(.sb-rte,.sb-lead,p){color:var(--sb8-dark-mute,#8FA6C4)}
.sb8-opener .sb-rte :is(strong,b){color:#fff}
.sb8-opener .sb-rte a{color:var(--sb8-signal)}
/* De signaallijn onder het kopblok groeit één keer open. */
.sb8-opener__rule{display:block;height:2px;width:min(300px,52%);margin-top:clamp(18px,2vw,30px);
  background:linear-gradient(90deg,var(--sb8-signal),rgba(0,229,168,0));
  transform:scaleX(var(--rx,0));transform-origin:left center;
  transition:transform 1s cubic-bezier(.16,1,.3,1) .15s}
.sb8-opener[data-in="1"] .sb8-opener__rule{--rx:1}
.sb8-opener h1{opacity:var(--ho,0);transform:translate3d(0,var(--hy,18px),0);
  transition:opacity .7s var(--sb8-ease),transform .8s cubic-bezier(.16,1,.3,1)}
.sb8-opener[data-in="1"] h1{--ho:1;--hy:0px}
@media(prefers-reduced-motion:reduce){
  .sb8-opener h1{--ho:1;--hy:0px;transition:none}
  .sb8-opener__rule{--rx:1;transition:none}
}

/* ============================================================
   WEBSITE BUILD LAB — signature scene van Webdevelopment

   Eén frame, vijf lagen, echte DOM. Alle beweging loopt via custom
   properties die de scroll of de aangewezen stap zet. Geen afbeelding,
   geen video, geen verzonnen klantnaam.
   ============================================================ */
.sb8-lab{background:var(--sb8-ink);color:#fff}
.sb8-lab__track{height:280vh}
.sb8-lab__stage{position:sticky;top:0;height:100vh;min-height:660px;display:flex;align-items:center;overflow:hidden}
.sb8-lab__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,3.4vw,64px);align-items:center;width:100%}

.sb8-lab__side{display:grid;gap:clamp(14px,1.6vw,24px);align-content:center}
.sb8-lab__steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sb8-lab__step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;width:100%;text-align:left;
  background:none;border:0;border-left:2px solid transparent;padding:11px 12px;cursor:pointer;color:inherit;font:inherit;
  border-radius:0 8px 8px 0;transition:background-color .25s var(--sb8-ease),border-color .25s,opacity .3s}
.sb8-lab__step[data-on="1"]{background:rgba(0,229,168,.07);border-left-color:var(--sb8-signal)}
.sb8-lab__step:hover{background:rgba(255,255,255,.05)}
.sb8-lab__step:focus-visible{outline:3px solid var(--sb8-signal);outline-offset:2px}
.sb8-lab__num{font-family:var(--sb8-mono);font-size:11px;letter-spacing:.1em;color:var(--sb8-signal);padding-top:2px}
.sb8-lab__txt b{display:block;font-family:var(--sb8-display);font-weight:600;font-size:16px;letter-spacing:-.01em;margin-bottom:3px}
.sb8-lab__txt span{display:block;font-family:var(--sb8-sans);font-size:13.5px;line-height:1.55;color:var(--sb8-dark-mute,#8FA6C4)}
.sb8-lab__note{margin:8px 0 0;font-family:var(--sb8-sans);font-size:12.5px;line-height:1.55;color:var(--sb8-dark-mute,#8FA6C4);max-width:60ch}

.sb8-lab__viz{position:relative;display:grid;gap:14px}
.sb8-lab__rig{position:relative;aspect-ratio:16/11;perspective:1500px;perspective-origin:50% 46%}

/* het frame zelf */
.sb8-lab__frame{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:12px;overflow:hidden;
  border:1px solid rgba(168,188,216,.2);background:#071A31;box-shadow:0 44px 90px -54px rgba(0,0,0,.95);
  transform:translate3d(var(--fx,0%),0,var(--fz,0px)) rotateY(var(--fry,0deg)) scale(var(--fs,1));
  transform-origin:50% 50%;will-change:transform}
.sb8-lab__bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 11px;background:#0D2340;border-bottom:1px solid rgba(168,188,216,.14)}
.sb8-lab__url{flex:1;height:15px;max-width:220px;margin-left:6px;border-radius:99px;background:rgba(168,188,216,.12);
  display:flex;align-items:center;padding:0 9px;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.1em;color:#8FA6C4}
.sb8-lab__chips{display:flex;gap:5px;margin-left:auto}
.sb8-lab__chips i{width:14px;height:9px;border-radius:2px;border:1px solid rgba(168,188,216,.3);transition:background-color .3s,border-color .3s}
.sb8-lab__chips i[data-lab-chip="mob"]{width:7px;height:11px}
.sb8-lab__chips i.is-on{background:var(--sb8-signal);border-color:transparent}
.sb8-lab__view{position:absolute;inset:30px 0 0 0;padding:clamp(12px,1.5vw,20px);display:grid;gap:clamp(8px,1vw,14px);align-content:start}

/* het raster dat verdwijnt zodra het ontwerp er staat */
.sb8-lab__mesh{position:absolute;inset:0;pointer-events:none;opacity:var(--mesh,1);transition:opacity .2s linear;
  background-image:linear-gradient(rgba(0,229,168,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,168,.16) 1px,transparent 1px);
  background-size:calc(100% / 12) 34px}

/* bouwstenen: van wireframe naar echt */
.sb8-lw,.sb8-lt,.sb8-lc,.sb8-lf{
  background:rgb(168 188 216 / calc(.06 + var(--real,0) * .16));
  border:1px dashed rgb(168 188 216 / calc(.36 * (1 - var(--real,0))));
  border-radius:calc(2px + var(--real,0) * 3px);
  transition:background-color .25s linear,border-color .25s linear}
.sb8-l{position:relative;display:flex;align-items:center;gap:8px;
  opacity:var(--lo,1);transition:opacity .32s var(--sb8-ease),filter .32s}
.sb8-l--nav{height:clamp(20px,2.4vw,30px)}
.sb8-lw{height:7px;width:30px;flex:none}
.sb8-lw--brand{width:54px;height:9px;background:rgb(0 229 168 / calc(.3 + var(--real,0) * .7));border-color:transparent}
.sb8-l--hero{flex-direction:column;align-items:flex-start;gap:7px;padding:clamp(8px,1vw,14px) 0}
.sb8-lt{height:calc(9px + var(--real,0) * 3px);border-radius:3px}
.sb8-lt--1{width:64%}
.sb8-lt--2{width:46%}
.sb8-lt--3{width:56%;height:7px;opacity:.7}
.sb8-l--cols{gap:clamp(7px,.9vw,12px)}
.sb8-lc{flex:1;height:clamp(34px,4.4vw,62px);border-radius:5px}
.sb8-lc--wide{width:100%;flex:none}
/* Het formulier staat vanaf de wireframe al in beeld. Alleen de invulling en
   de knop worden echt zodra het conversiepunt aan de beurt is, zodat het frame
   nooit half leeg staat. */
.sb8-l--form{flex-direction:column;align-items:stretch;gap:7px;
  opacity:calc((.42 + var(--cta,0) * .58) * (1 - var(--site,0)));transform:translateY(calc((1 - var(--cta,0)) * 6px));
  transition:opacity .35s var(--sb8-ease),transform .4s var(--sb8-ease)}
.sb8-lf{height:clamp(16px,1.9vw,24px);border-radius:4px}

/* knoppen: grijs in wireframe, groen zodra het conversiepunt er staat */
.sb8-lb{display:inline-flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:0 10px;height:clamp(18px,2.1vw,26px);border-radius:calc(3px + var(--real,0) * 4px);
  background:color-mix(in srgb,var(--sb8-signal) calc(var(--cta,0) * 100%),rgb(168 188 216 / .14));
  color:color-mix(in srgb,#05261D calc(var(--cta,0) * 100%),#8FA6C4);
  border:1px dashed rgb(168 188 216 / calc(.36 * (1 - var(--real,0))));
  transition:background-color .35s linear,color .35s linear,border-color .25s linear}
.sb8-lb--ghost{margin-left:auto;background:rgb(168 188 216 / .1);color:#8FA6C4}
.sb8-lb--wide{width:100%}

/* meetlijn en pin */
.sb8-lab__probe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;overflow:visible;
  opacity:var(--trk,0);transition:opacity .3s linear}
.sb8-lab__wire{stroke:var(--sb8-signal);stroke-width:1.6;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--trk,0) * 100);
  transition:stroke-dashoffset .4s linear}
.sb8-lab__pin{position:absolute;right:22%;top:30%;width:9px;height:9px;border-radius:50%;background:var(--sb8-signal);
  box-shadow:0 0 0 4px rgba(0,229,168,.2);opacity:var(--trk,0);transition:opacity .3s linear;pointer-events:none}
.sb8-lab__tag{position:absolute;right:6%;top:14%;transform:translate(30%,-120%);
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.14em;color:var(--sb8-signal);
  opacity:var(--trk,0);transition:opacity .3s linear}

/* tablet en telefoon */
.sb8-lab__dev{position:absolute;border-radius:10px;overflow:hidden;background:#071A31;
  border:1px solid rgba(168,188,216,.2);box-shadow:0 34px 70px -46px rgba(0,0,0,.95);
  padding:9px;display:grid;gap:6px;align-content:start;
  opacity:var(--do,0);transform:translate3d(var(--dx,0%),var(--dy,0%),var(--dz,-320px)) rotateY(var(--dry,0deg)) scale(var(--ds,1));
  transition:opacity .45s var(--sb8-ease)}
.sb8-lab__dev--tab{left:58%;top:22%;width:30%;aspect-ratio:4/3}
.sb8-lab__dev--mob{left:86%;top:26%;width:13%;aspect-ratio:9/17;border-radius:14px}

.sb8-lab__phase{margin:0;display:flex;align-items:center;gap:14px;
  font-family:var(--sb8-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sb8-signal)}
.sb8-lab__meter{flex:1;height:2px;background:rgba(168,188,216,.16);border-radius:99px;overflow:hidden;max-width:260px}
.sb8-lab__meter i{display:block;height:100%;width:100%;background:var(--sb8-signal);transform-origin:left center;transform:scaleX(var(--p,0))}

/* aanwijzen: alleen die laag blijft vol */
.sb8-lab__frame[data-focus]:not([data-focus=""]) .sb8-l{--lo:.22}
.sb8-lab__frame[data-focus="type"] .sb8-l[data-layer="type"],
.sb8-lab__frame[data-focus="cta"] .sb8-l[data-layer="cta"],
.sb8-lab__frame[data-focus="track"] .sb8-l{--lo:1}
.sb8-lab__frame[data-focus="wire"]{--mesh:1}
.sb8-lab__frame[data-focus="wire"] .sb8-l{--lo:.5}
.sb8-lab__frame[data-focus="cta"] .sb8-lb--primary{box-shadow:0 0 0 3px rgba(0,229,168,.28)}
.sb8-lab__frame[data-focus="track"] .sb8-lab__tag{opacity:1}

@media(max-width:1023px){
  /* Mobiel krijgt geen lange pin. Het frame blijft kort plakken bovenin en de
     vijf stappen schuiven eronder door; per stap verandert het frame. */
  .sb8-lab__track{height:auto}
  .sb8-lab__stage{position:static;height:auto;min-height:0;padding-block:var(--sb8-chapter-y)}
  .sb8-lab__grid{grid-template-columns:1fr;gap:18px}
  .sb8-lab__viz{position:sticky;top:calc(var(--sb-header-h,68px) + 8px);z-index:3;order:-1;
    background:var(--sb8-ink);padding-bottom:10px}
  .sb8-lab__rig{aspect-ratio:16/10}
  .sb8-lab__dev--tab{left:56%;top:16%;width:34%}
  .sb8-lab__dev--mob{left:88%;top:20%;width:15%}
  .sb8-lab__step{padding:14px 12px}
  .sb8-lab__steps{gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .sb8-lab__track{height:auto!important}
  .sb8-lab__stage{position:static!important;height:auto!important;min-height:0!important;padding-block:var(--sb8-chapter-y)}
  .sb8-lab__frame{transform:none!important}
  .sb8-lab__dev{--do:1;--dx:0%;--dy:0%;--dz:0px;--dry:0deg;transition:none}
  .sb8-lab__mesh{--mesh:0}
  .sb8-lab__view{--real:1}
  .sb8-l--form{--cta:1}
  .sb8-lab__probe,.sb8-lab__tag{--trk:1}
  .sb8-lab__step[data-on="1"]{background:none;border-left-color:transparent}
  .sb8-lab__phase{display:none}
}

/* ============================================================
   SPEC RAIL — de zeven regels als navigator in plaats van blokken
   ============================================================ */
.sb8-spec{padding-block:var(--sb8-chapter-y)}
.sb8-spec__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(22px,3.4vw,64px);margin-top:clamp(22px,2.8vw,44px);align-items:start}
.sb8-spec__rail{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--sb8-line)}
.sb8-spec__btn{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--sb8-line);padding:15px 2px;cursor:pointer;color:inherit;font:inherit;
  position:relative;transition:color .2s var(--sb8-ease)}
.sb8-spec__n{font-family:var(--sb8-mono);font-size:11px;letter-spacing:.1em;color:var(--sb8-mute);transition:color .2s}
.sb8-spec__t{font-family:var(--sb8-display);font-weight:600;font-size:clamp(15px,1.3vw,18px);letter-spacing:-.01em}
.sb8-spec__line{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sb8-signal);
  transform:scaleX(var(--sx,0));transform-origin:left center;transition:transform .45s var(--sb8-ease)}
.sb8-spec__btn:hover{color:var(--sb8-signal-deep)}
.sb8-spec__btn:focus-visible{outline:3px solid var(--sb8-signal-deep);outline-offset:-2px}
.sb8-spec__btn[aria-selected="true"]{--sx:1}
.sb8-spec__btn[aria-selected="true"] .sb8-spec__n{color:var(--sb8-signal-deep)}

.sb8-spec__pane{position:relative;min-height:clamp(190px,22vw,260px);
  background:var(--sb8-mist);border-radius:18px;padding:clamp(22px,2.8vw,44px)}
.sb8-spec__item{display:grid;gap:10px;align-content:start;
  opacity:1;transform:none;transition:opacity .34s var(--sb8-ease),transform .42s var(--sb8-ease)}
.sb8-spec__item[data-off="1"]{position:absolute;inset:clamp(22px,2.8vw,44px);opacity:0;transform:translateY(10px);pointer-events:none}
.sb8-spec__pn{font-family:var(--sb8-mono);font-size:11px;letter-spacing:.16em;color:var(--sb8-signal-deep)}
.sb8-spec__pt{margin:0;font-family:var(--sb8-display);font-weight:600;font-size:clamp(20px,2.2vw,32px);line-height:1.12;letter-spacing:-.02em}
.sb8-spec__pb{margin:0;font-family:var(--sb8-sans);font-size:clamp(15px,1.2vw,17px);line-height:1.62;color:var(--sb8-body,#3A4C68);max-width:56ch}
.sb8-spec__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,36px);
  padding-top:clamp(16px,2vw,26px);border-top:1px solid var(--sb8-line)}
.sb8-spec__next{font-family:var(--sb8-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sb8-mute)}

@media(max-width:1023px){
  /* Smal: geen twee kolommen maar een accordeon waarin één regel open staat. */
  .sb8-spec__grid{grid-template-columns:1fr;gap:0}
  .sb8-spec__pane{background:none;padding:0;min-height:0;margin-top:0}
  .sb8-spec__item{padding:0 0 18px}
  .sb8-spec__item[data-off="1"]{position:absolute;left:0;right:0;opacity:0;pointer-events:none;height:0;overflow:hidden;padding:0}
  .sb8-spec__pane{position:relative}
  .sb8-spec__btn{padding:16px 2px}
}
@media(prefers-reduced-motion:reduce){
  /* Alle regels staan open, niets verborgen. */
  .sb8-spec__pane{min-height:0;display:grid;gap:22px}
  .sb8-spec__item[data-off="1"]{position:static;inset:auto;opacity:1;transform:none;pointer-events:auto;height:auto;overflow:visible}
  .sb8-spec__line{transform:scaleX(1);opacity:.3}
}

/* ============================================================
   RUSTIGE HERO-LOOP — één loop per dienst-hero, niet vijf

   Draait alleen wanneer de hero in beeld staat, en staat stil bij
   verminder-beweging. Bewust traag en klein: het moet leven, niet roepen.
   ============================================================ */
.sb8-svc__stack{--play:paused}
.sb8-svc[data-live="1"] .sb8-svc__stack{--play:running}
.sb8-svc__sweep{position:absolute;left:0;right:0;top:0;height:34%;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,transparent,rgba(0,229,168,.1) 62%,rgba(0,229,168,.3) 92%,transparent);
  mix-blend-mode:screen;opacity:0;animation:sb8-hsweep 7s var(--sb8-ease) infinite;animation-play-state:var(--play,paused)}
@keyframes sb8-hsweep{
  0%,62%{opacity:0;transform:translateY(-40%)}
  68%{opacity:.9}
  92%{opacity:0;transform:translateY(220%)}
  100%{opacity:0;transform:translateY(220%)}
}
.sb8-brow3 .sb8-vb--signal{animation:sb8-ctapulse 4.4s var(--sb8-ease) infinite;animation-play-state:var(--play,paused)}
@keyframes sb8-ctapulse{
  0%,78%,100%{box-shadow:0 0 0 0 rgba(0,229,168,0)}
  86%{box-shadow:0 0 0 6px rgba(0,229,168,.22)}
}
.sb8-brow3--mob{animation:sb8-mobdrift 9s ease-in-out infinite;animation-play-state:var(--play,paused)}
@keyframes sb8-mobdrift{0%,100%{margin-top:0}50%{margin-top:-10px}}
@media(prefers-reduced-motion:reduce){
  .sb8-svc__sweep,.sb8-brow3 .sb8-vb--signal,.sb8-brow3--mob{animation:none!important}
  .sb8-svc__sweep{display:none}
}

/* ============================================================
   DETAILS — dezelfde inhoud als tabs of accordeon in plaats van kaarten
   ============================================================ */
.sb8-det{padding-block:var(--sb8-chapter-y)}
.sb8-scene--mist{background:var(--sb8-mist);color:var(--sb8-text)}
.sb8-det__grid{display:grid;gap:clamp(18px,2.2vw,34px);margin-top:clamp(20px,2.6vw,38px)}
.sb8-det__tabs{display:flex;gap:8px;flex-wrap:wrap}
.sb8-det__tab{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:12px 17px;border-radius:11px;border:1.5px solid var(--sb8-line);background:#fff;color:var(--sb8-navy);
  font-family:var(--sb8-sans);font-size:14px;font-weight:600;line-height:1;
  transition:background-color .2s var(--sb8-ease),border-color .2s,color .2s,transform .2s}
.sb8-det__dot{width:8px;height:8px;border-radius:3px;background:var(--sb8-line);transition:background-color .2s}
.sb8-det__tab:hover{border-color:var(--sb8-navy);transform:translateY(-2px)}
.sb8-det__tab:focus-visible{outline:3px solid var(--sb8-signal-deep);outline-offset:2px}
.sb8-det__tab[aria-selected="true"]{background:var(--sb8-navy);border-color:var(--sb8-navy);color:#fff}
.sb8-det__tab[aria-selected="true"] .sb8-det__dot{background:var(--sb8-signal)}
.sb8-scene--ink .sb8-det__tab{background:rgba(255,255,255,.05);border-color:rgba(168,188,216,.24);color:#fff}
.sb8-scene--ink .sb8-det__tab[aria-selected="true"]{background:var(--sb8-signal);border-color:transparent;color:#05261D}

.sb8-det__pane{position:relative;background:#fff;border:1px solid var(--sb8-line);border-radius:18px;
  padding:clamp(20px,2.6vw,40px);min-height:clamp(200px,20vw,280px)}
.sb8-scene--ink .sb8-det__pane{background:rgba(255,255,255,.04);border-color:rgba(168,188,216,.18)}
.sb8-det__item{display:grid;gap:12px;align-content:start;opacity:1;transform:none;
  transition:opacity .32s var(--sb8-ease),transform .4s var(--sb8-ease)}
.sb8-det__item[data-off="1"]{position:absolute;inset:clamp(20px,2.6vw,40px);opacity:0;transform:translateY(10px);pointer-events:none}
.sb8-det__t{margin:0;font-family:var(--sb8-display);font-weight:600;font-size:clamp(19px,2vw,28px);line-height:1.15;letter-spacing:-.02em}
.sb8-det__b{margin:0;font-family:var(--sb8-sans);font-size:15px;line-height:1.62;max-width:62ch;opacity:.9}
.sb8-det__list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.sb8-det__list li{position:relative;padding-left:26px;font-family:var(--sb8-sans);font-size:14.5px;line-height:1.55}
.sb8-det__list li::before{content:"";position:absolute;left:0;top:.52em;width:12px;height:2px;background:var(--sb8-signal-deep);border-radius:2px}
.sb8-scene--ink .sb8-det__list li::before{background:var(--sb8-signal)}
.sb8-det__list--cross li::before{background:var(--sb8-mute);width:8px}
.sb8-det__note{margin:clamp(16px,2vw,26px) 0 0;font-size:13.5px;line-height:1.6;color:var(--sb8-mute);max-width:74ch}
.sb8-det__acc{display:grid;gap:8px;margin-top:clamp(18px,2.2vw,32px)}

@media(max-width:749px){
  .sb8-det__tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;
    margin-inline:calc(-1 * var(--sb8-gutter));padding-inline:var(--sb8-gutter)}
  .sb8-det__tab{flex:none}
  .sb8-det__pane{padding:18px;min-height:0}
  .sb8-det__item[data-off="1"]{inset:18px}
}
@media(prefers-reduced-motion:reduce){
  .sb8-det__pane{min-height:0;display:grid;gap:26px}
  .sb8-det__item[data-off="1"]{position:static;inset:auto;opacity:1;transform:none;pointer-events:auto}
}

/* ============================================================
   DE ONTWORPEN WEBSITE in het Build Lab

   Drie kwaliteitsniveaus: BLUEPRINT, DESIGNED WEBSITE, RESPONSIVE SYSTEM.
   De blueprint is het gestippelde skelet. Daarna verschijnt hier een echte
   ontworpen pagina met eigen kleurwereld, display-typografie, beeldvlak,
   sectieritme en een echte knop. Eigen DOM en CSS, gelabeld als DEMO.
   ============================================================ */
.sb8-site{position:absolute;inset:0;z-index:3;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#FBF7F2 0%,#F4EDE4 62%,#EFE6DA 100%);color:#1E1A16;
  opacity:var(--site,0);transform:scale(calc(.985 + var(--site,0) * .015));
  transition:opacity .5s var(--sb8-ease),transform .6s var(--sb8-ease);pointer-events:none;
  font-family:var(--sb8-sans)}
.sb8-site__nav{display:flex;align-items:center;gap:14px;padding:11px clamp(12px,1.5vw,20px);
  border-bottom:1px solid rgba(30,26,22,.1)}
.sb8-site__logo{display:inline-flex;align-items:center;gap:7px;font-family:var(--sb8-display);font-weight:700;
  font-size:clamp(10px,1vw,14px);letter-spacing:-.01em}
.sb8-site__logo i{width:11px;height:11px;border-radius:3px;background:#1E1A16;display:inline-block}
.sb8-site__links{display:flex;gap:13px;margin-left:8px}
.sb8-site__links b{font-weight:500;font-size:clamp(8px,.75vw,11px);opacity:.66}
.sb8-site__navcta{margin-left:auto;font-family:var(--sb8-mono);font-size:clamp(7px,.62vw,9px);letter-spacing:.09em;
  text-transform:uppercase;padding:6px 11px;border-radius:99px;border:1px solid rgba(30,26,22,.26)}

.sb8-site__hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(10px,1.4vw,24px);
  align-items:center;padding:clamp(12px,1.8vw,26px) clamp(12px,1.5vw,20px) clamp(8px,1.2vw,18px)}
.sb8-site__copy{display:grid;gap:clamp(5px,.7vw,10px);align-content:center}
.sb8-site__eyebrow{font-family:var(--sb8-mono);font-size:clamp(6.5px,.58vw,8.5px);letter-spacing:.18em;
  text-transform:uppercase;color:#8A6B4F}
.sb8-site__h1{margin:0;font-family:var(--sb8-display);font-weight:700;
  font-size:clamp(17px,2.5vw,40px);line-height:.98;letter-spacing:-.035em}
.sb8-site__lead{margin:0;font-size:clamp(7.5px,.72vw,11px);line-height:1.5;opacity:.68;max-width:30ch}
.sb8-site__cta{justify-self:start;font-family:var(--sb8-sans);font-weight:600;font-size:clamp(7.5px,.7vw,10.5px);
  padding:8px 15px;border-radius:99px;background:#1E1A16;color:#FBF7F2;margin-top:3px}
.sb8-site__cta--wide{justify-self:stretch;text-align:center}
.sb8-site__media{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3.4;
  background:linear-gradient(150deg,#2C2620 0%,#4A3C30 46%,#7A5E44 100%)}
.sb8-site__mediaglow{position:absolute;inset:-10%;background:radial-gradient(48% 44% at 32% 26%,rgba(255,225,190,.5),transparent 70%)}
.sb8-site__mediamark{position:absolute;left:13%;bottom:13%;width:34%;height:2px;background:rgba(255,240,225,.8);border-radius:2px;
  box-shadow:0 -9px 0 -3px rgba(255,240,225,.36),0 -18px 0 -5px rgba(255,240,225,.2)}

.sb8-site__proof{display:flex;align-items:center;gap:clamp(7px,.9vw,14px);flex-wrap:wrap;
  padding:0 clamp(12px,1.5vw,20px) clamp(8px,1vw,14px);
  font-family:var(--sb8-mono);font-size:clamp(6.5px,.58vw,8.5px);letter-spacing:.12em;text-transform:uppercase;opacity:.58}
.sb8-site__proof i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}

.sb8-site__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,.8vw,12px);
  padding:0 clamp(12px,1.5vw,20px)}
.sb8-site__card{display:grid;gap:5px;padding:clamp(8px,1vw,14px);border-radius:9px;background:rgba(255,255,255,.72);
  border:1px solid rgba(30,26,22,.07)}
.sb8-site__card b{font-family:var(--sb8-display);font-weight:600;font-size:clamp(8px,.72vw,11px)}
.sb8-site__card em{display:block;height:3px;border-radius:2px;background:rgba(30,26,22,.13)}
.sb8-site__card em.is-short{width:62%}

.sb8-site__band{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:clamp(9px,1.1vw,16px) clamp(12px,1.5vw,20px);background:#1E1A16;color:#FBF7F2}
.sb8-site__bandtxt{font-family:var(--sb8-display);font-weight:600;font-size:clamp(8px,.8vw,12px)}
.sb8-site__bandcta{margin-left:auto;font-family:var(--sb8-mono);font-size:clamp(6.5px,.6vw,9px);letter-spacing:.1em;
  text-transform:uppercase;padding:6px 12px;border-radius:99px;background:var(--sb8-signal);color:#05261D}

/* dezelfde wereld op tablet en telefoon */
.sb8-site--mini{position:relative;inset:auto;height:100%;opacity:var(--site,0);border-radius:inherit}
.sb8-site--mini .sb8-site__nav{padding:7px 9px;gap:8px}
.sb8-site__minihero{display:grid;gap:5px;padding:9px 9px 7px}
.sb8-site--mini .sb8-site__h1{font-size:clamp(11px,1.3vw,18px)}
.sb8-site--mini .sb8-site__cta{padding:6px 11px;font-size:8px}
.sb8-site__media--mini{margin:0 9px 9px;aspect-ratio:16/9}
.sb8-site--phone .sb8-site__media--mini{aspect-ratio:3/4}
.sb8-site--phone{padding-bottom:9px}
.sb8-site--phone .sb8-site__cta{margin:0 9px}

/* niveau-indicator en demolabel */
.sb8-lab__level{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:99px;
  border:1px solid rgba(0,229,168,.4);background:rgba(0,229,168,.1);
  font-family:var(--sb8-mono);font-size:10px;letter-spacing:.16em;color:var(--sb8-signal);white-space:nowrap}
.sb8-lab__demo{position:absolute;right:10px;bottom:10px;z-index:6;
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.18em;padding:4px 9px;border-radius:99px;
  background:rgba(4,16,31,.7);border:1px solid rgba(168,188,216,.3);color:#C9D6E8;
  opacity:var(--site,0);transition:opacity .4s linear;pointer-events:none}

/* de blauwdruk dooft zodra het ontwerp er staat */
/* De blauwdruk verdwijnt volledig zodra het ontwerp er staat. */
.sb8-lab__view > .sb8-l{opacity:calc(1 - var(--site,0))}
.sb8-lab__view > .sb8-l[data-vis="0"]{opacity:0}
.sb8-lab__frame[data-level="designed"] .sb8-lab__mesh,
.sb8-lab__frame[data-level="responsive"] .sb8-lab__mesh{opacity:0}

@media(prefers-reduced-motion:reduce){
  .sb8-site{--site:1;transform:none;transition:none}
  .sb8-lab__demo{--site:1}
  .sb8-lab__view > .sb8-l{opacity:0}
}

/* ============================================================
   STIJLBEWIJS-RAIL — aparte presentatielaag boven de referentiemodule
   ============================================================ */
.sb8-styles{padding-block:var(--sb8-chapter-y)}
.sb8-styles__rail{position:relative;overflow:hidden;margin-top:clamp(22px,2.8vw,44px);padding-block:4px}
.sb8-styles__track{display:flex;gap:clamp(16px,2vw,30px);width:max-content;
  transform:translate3d(var(--rx,0px),0,0);will-change:transform}
.sb8-styles__card{flex:none;width:clamp(300px,34vw,520px);display:grid;gap:12px}
.sb8-styles__frame{position:relative;border-radius:14px;overflow:hidden;background:#0A1E38;
  border:1px solid rgba(168,188,216,.2);box-shadow:0 40px 80px -50px rgba(0,0,0,.95)}
.sb8-styles__bar{height:26px;display:flex;align-items:center;gap:5px;padding:0 10px;
  background:#0D2340;border-bottom:1px solid rgba(168,188,216,.14)}
.sb8-styles__bar i{width:6px;height:6px;border-radius:50%;background:rgba(168,188,216,.3)}
.sb8-styles__url{flex:1;margin-left:6px;height:13px;max-width:200px;border-radius:99px;background:rgba(168,188,216,.12);
  display:flex;align-items:center;padding:0 8px;font-family:var(--sb8-mono);font-size:8px;letter-spacing:.06em;color:#8FA6C4}
.sb8-styles__shot{display:block;width:100%;aspect-ratio:16/10.4;object-fit:cover;object-position:top center;background:#071A31}
.sb8-styles__meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sb8-styles__chip{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sb8-signal)}
.sb8-styles__name{font-family:var(--sb8-display);font-weight:600;font-size:16px;color:#fff}
.sb8-styles__ext{display:block;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sb8-dark-mute,#8FA6C4);opacity:.8}
.sb8-styles__edge{position:absolute;top:0;bottom:0;width:clamp(40px,7vw,120px);pointer-events:none;z-index:2}
.sb8-styles__edge--l{left:0;background:linear-gradient(90deg,var(--sb8-ink) 12%,transparent)}
.sb8-styles__edge--r{right:0;background:linear-gradient(270deg,var(--sb8-ink) 12%,transparent)}
.sb8-styles__note{margin:clamp(16px,2vw,26px) 0 0;font-family:var(--sb8-sans);font-size:13px;color:var(--sb8-dark-mute,#8FA6C4)}

@media(max-width:749px){
  /* Smal: geen autoplay maar vegen, met dezelfde kaarten. */
  .sb8-styles__rail{overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
    padding-inline:var(--sb8-gutter);margin-inline:calc(-1 * var(--sb8-gutter))}
  .sb8-styles__track{transform:none!important;width:auto}
  .sb8-styles__card{width:82vw;scroll-snap-align:center}
  .sb8-styles__edge{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sb8-styles__track{transform:none!important}
  .sb8-styles__rail{overflow-x:auto}
  .sb8-styles__edge{display:none}
}

/* De telefoon is smal: knoptekst mag daar kleiner en afbreken. */
.sb8-site--phone .sb8-site__cta{font-size:6.5px;padding:5px 6px;line-height:1.2;white-space:normal;text-align:center}
.sb8-site--phone .sb8-site__h1{font-size:clamp(9px,1vw,13px)}
.sb8-site--mini .sb8-site__navcta{font-size:6.5px;padding:4px 7px}
.sb8-lab__dev--tab{left:60%}

/* ============================================================
   CREATIVE TEST FLOOR — Mediabuying Meta
   Basis = platte eindtoestand (werkt zonder JS, bij verminder-
   beweging en op smalle schermen). JS voegt .is-live toe en pas
   dan wordt de vloer een gepinde, scroll-gestuurde scène.
   ============================================================ */
.sb8-floor{--sig-c:var(--sb8-signal)}
.sb8-floor__stage{padding-block:clamp(64px,8vw,112px)}
.sb8-floor__head{display:grid;gap:14px;margin-bottom:clamp(26px,3.4vw,46px)}
.sb8-floor__canvas{position:relative;width:100%;max-width:var(--sb8-wrap);margin-inline:auto;
  padding-inline:var(--sb8-gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.6vw,18px);align-items:start}

/* ---- de creative ---- */
.sb8-cr{position:relative;display:grid;gap:0;border-radius:12px;overflow:hidden;
  background:#0C1B2E;border:1px solid rgba(168,188,216,.18);
  box-shadow:0 22px 44px -30px rgba(0,0,0,.8);opacity:var(--co,1);
  transform:scale(var(--cs,1)) rotate(calc(var(--cr,0) * 1deg));
  transition:opacity .28s ease,filter .28s ease;filter:saturate(var(--csat,1));
  padding-top:var(--tape,18px)}
.sb8-cr__tape{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 6px;padding:5px 7px 6px;
  background:rgba(4,16,31,.86);border-top:1px solid rgba(168,188,216,.12);
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.06em;color:#EAF2FC;
  white-space:nowrap;overflow:hidden}
.sb8-cr__tape em{font-style:normal;color:#8FA6C4;letter-spacing:.14em}
.sb8-cr__badge{position:absolute;top:0;left:0;right:0;height:var(--tape,18px);display:flex;
  align-items:center;justify-content:center;font-family:var(--sb8-mono);font-size:8px;
  letter-spacing:.14em;font-weight:600;opacity:var(--sel,1);
  transform:translateY(calc((var(--sel,1) - 1) * -100%));
  transition:opacity .26s ease,transform .26s ease;z-index:4}
.sb8-cr[data-status="stop"] .sb8-cr__badge{background:#5A1A22;color:#FFD6D6;
  border-bottom:1px solid rgba(255,107,107,.55)}
.sb8-cr[data-status="stop"] .sb8-cr__badge::after{content:"STOP"}
.sb8-cr[data-status="door"] .sb8-cr__badge{background:var(--sb8-signal);color:#04101F;
  border-bottom:1px solid rgba(0,229,168,.55)}
.sb8-cr[data-status="door"] .sb8-cr__badge::after{content:"DOORTESTEN"}
.sb8-cr[data-status="door"]{border-color:rgba(0,229,168,.4)}

/* ---- route: feed, landing, draad, labels ---- */
.sb8-floor__route{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(12px,1.8vw,22px);align-items:start;margin-top:clamp(14px,2vw,24px)}
.sb8-floor__tag{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--sb8-signal);border:1px solid rgba(0,229,168,.4);border-radius:999px;
  padding:4px 9px;justify-self:start;align-self:start}
.sb8-floor__tag--ad{grid-column:1;grid-row:1}
.sb8-feed{grid-column:1;grid-row:2}
.sb8-floor__tag--land{grid-column:2;grid-row:1}
.sb8-land{grid-column:2;grid-row:2}
.sb8-floor__tag--lead{grid-column:2;grid-row:3;margin-top:10px}
.sb8-floor__wire,.sb8-floor__node{display:none}

.sb8-feed{position:relative;width:100%;max-width:220px;border-radius:18px;padding:8px;
  background:#08141F;border:1px solid rgba(168,188,216,.26);display:grid;gap:7px;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.04)}
.sb8-feed__top{display:flex;align-items:center;gap:7px}
.sb8-feed__top i{width:13px;height:13px;border-radius:50%;flex:none;background:rgba(168,188,216,.28)}
.sb8-feed__top b{height:6px;border-radius:3px;background:rgba(168,188,216,.22);flex:1;max-width:66px}
.sb8-feed__slot{display:block;width:100%;border-radius:10px;background:rgba(255,255,255,.03);
  border:1px dashed rgba(168,188,216,.2);min-height:60px;opacity:var(--fart,1);
  transition:opacity .3s ease}
.sb8-feed__nav{display:flex;gap:10px;justify-content:space-around;padding:3px 4px 1px}
.sb8-feed__nav i{width:11px;height:11px;border-radius:3px;background:rgba(168,188,216,.2)}

.sb8-land{position:relative;width:100%;border-radius:12px;padding:10px;background:#0A1A2D;
  border:1px solid rgba(168,188,216,.2);display:grid;gap:8px;
  box-shadow:0 26px 52px -34px rgba(0,0,0,.85)}
.sb8-land__nav{display:flex;gap:8px;align-items:center;padding-bottom:8px;
  border-bottom:1px solid rgba(168,188,216,.14)}
.sb8-land__nav i{width:34px;height:6px;border-radius:3px;background:rgba(0,229,168,.5)}
.sb8-land__nav b{height:5px;border-radius:3px;background:rgba(168,188,216,.2);flex:1;max-width:96px}
.sb8-land__h{height:11px;border-radius:4px;background:rgba(255,255,255,.8);width:78%}
.sb8-land__h.is-short{height:7px;background:rgba(168,188,216,.28);width:52%}
.sb8-land__form{display:grid;gap:6px;padding:9px;border-radius:9px;
  background:rgba(0,229,168,calc(.04 + var(--lead,0) * .1));
  border:1px solid rgba(0,229,168,calc(.18 + var(--lead,0) * .45));transition:background .3s,border-color .3s}
.sb8-land__form > i{height:14px;border-radius:5px;background:rgba(168,188,216,.16);
  border:1px solid rgba(168,188,216,.16)}
.sb8-land__btn{display:block;text-align:center;font-family:var(--sb8-mono);font-size:9px;
  letter-spacing:.1em;padding:7px;border-radius:7px;
  background:rgba(0,229,168,calc(.12 + var(--lead,0) * .8));
  color:var(--lead-fg,var(--sb8-signal));border:1px solid rgba(0,229,168,.6);transition:background .3s,color .3s}
.sb8-floor.is-lead .sb8-land__btn{color:var(--sb8-ink);font-weight:600}

/* ---- stappen en meter ---- */
.sb8-floor__foot{margin-top:clamp(26px,3.4vw,46px);display:grid;gap:16px}
.sb8-floor__steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(12px,1.6vw,20px)}
.sb8-floor__step{display:grid;gap:5px;padding-top:12px;border-top:1px solid rgba(168,188,216,.16);
  opacity:.42;transition:opacity .3s ease,border-color .3s ease}
.sb8-floor__step.is-on,.sb8-floor:not(.is-live) .sb8-floor__step{opacity:1}
.sb8-floor__step.is-on{border-top-color:var(--sb8-signal)}
.sb8-floor__n{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.16em;color:var(--sb8-signal)}
.sb8-floor__step b{font-family:var(--sb8-mono);font-size:11px;letter-spacing:.14em;color:#fff}
.sb8-floor__b{font-family:var(--sb8-sans);font-size:13.5px;line-height:1.5;color:var(--sb8-dark-mute)}
.sb8-floor__meter{display:block;height:2px;border-radius:2px;background:rgba(168,188,216,.16);overflow:hidden}
.sb8-floor__meter i{display:block;height:100%;width:calc(var(--p,1) * 100%);background:var(--sb8-signal);
  transform-origin:left}
.sb8-floor__note{font-family:var(--sb8-sans);font-size:13.5px;line-height:1.6;color:var(--sb8-dark-mute);
  max-width:62ch;margin:clamp(22px,2.6vw,34px) 0 0}

/* ---- formatenrij ---- */
.sb8-crail{padding-bottom:clamp(18px,2.4vw,30px)}
.sb8-crail .sb8-marq__edge--l{background:linear-gradient(90deg,var(--sb8-ink) 12%,transparent)}
.sb8-crail .sb8-marq__edge--r{background:linear-gradient(270deg,var(--sb8-ink) 12%,transparent)}
.sb8-crail__item{flex:none;display:grid;gap:7px;justify-items:start}
.sb8-crail__lbl{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.12em;color:var(--sb8-dark-mute)}

/* ============================================================
   .is-live — de gepinde, scroll-gestuurde vloer (alleen desktop,
   alleen met beweging aan, alleen met JS)
   ============================================================ */
.sb8-floor.is-live .sb8-floor__track{height:430vh}
.sb8-floor.is-live .sb8-floor__stage{position:sticky;top:0;min-height:100vh;display:flex;
  flex-direction:column;justify-content:center;padding-block:clamp(40px,5vw,72px)}
.sb8-floor.is-live .sb8-floor__head{margin-bottom:clamp(14px,1.8vw,24px);gap:10px}
.sb8-floor.is-live .sb8-floor__head .sb8-lead{font-size:clamp(14px,1.05vw,16px);max-width:52ch}
.sb8-floor.is-live .sb8-floor__canvas{display:block;height:clamp(320px,44vh,486px)}
.sb8-floor.is-live .sb8-floor__foot{margin-top:clamp(18px,2.2vw,30px);gap:12px}
.sb8-floor.is-live .sb8-floor__b{font-size:12.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sb8-floor.is-live .sb8-floor__steps{gap:clamp(10px,1.2vw,16px)}
.sb8-floor.is-live .sb8-floor__route{display:contents}
.sb8-floor.is-live .sb8-cr{position:absolute;left:calc(var(--cx,16) * 1%);top:calc(var(--cy,50) * 1%);
  width:var(--cw,120px);z-index:calc(10 + var(--cz,0));
  transform:translate(-50%,-50%) rotate(calc(var(--cr,0) * 1deg)) scale(var(--cs,1))}
.sb8-floor.is-live .sb8-cr--f45{--cw:clamp(116px,10.6vw,148px)}
.sb8-floor.is-live .sb8-cr--f916{--cw:clamp(92px,8.4vw,118px)}
.sb8-floor.is-live .sb8-cr--f11{--cw:clamp(118px,10.8vw,152px)}
.sb8-floor.is-live .sb8-feed{position:absolute;left:62%;top:48%;transform:translate(-50%,-50%);
  width:calc(var(--slotw,148px) + 20px);max-width:none;opacity:var(--feed,0);z-index:6;
  transition:opacity .35s ease}
.sb8-floor.is-live .sb8-feed__slot{height:var(--sloth,280px)}
.sb8-floor.is-live .sb8-land{position:absolute;left:86%;top:48%;transform:translate(-50%,-50%);
  width:clamp(170px,19vw,250px);opacity:var(--land,0);z-index:5;transition:opacity .35s ease}
.sb8-floor.is-live .sb8-floor__wire{display:block;position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:8}
.sb8-floor.is-live .sb8-floor__path{fill:none;stroke:var(--sb8-signal);stroke-width:1.6;
  stroke-linecap:round;stroke-dasharray:100;opacity:var(--d1o,0);
  stroke-dashoffset:calc(100 - var(--d1,0) * 100)}
.sb8-floor.is-live .sb8-floor__path--2{opacity:var(--d2o,0);stroke-dashoffset:calc(100 - var(--d2,0) * 100)}
.sb8-floor.is-live .sb8-floor__node{display:block;position:absolute;left:calc(var(--nx,70) * 1%);
  top:calc(var(--ny,46) * 1%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--sb8-signal);box-shadow:0 0 0 4px rgba(0,229,168,.2),0 0 18px 4px rgba(0,229,168,.55);
  opacity:var(--nodo,0);z-index:9}
.sb8-floor.is-live .sb8-floor__tag{position:absolute;opacity:var(--tg,0);transition:opacity .3s ease;z-index:40}
.sb8-floor.is-live .sb8-floor__tag--ad{left:62%;top:calc(48% - var(--sloth,280px) / 2 - 34px);
  transform:translate(-50%,-100%);opacity:var(--feed,0)}
.sb8-floor.is-live .sb8-floor__tag--land{left:86%;top:calc(48% - 104px);
  transform:translate(-50%,-100%);opacity:var(--land,0)}
.sb8-floor.is-live .sb8-floor__tag--lead{left:86%;top:calc(48% + 100px);
  transform:translate(-50%,0);opacity:var(--lead,0)}
.sb8-floor.is-live .sb8-floor__step{opacity:.34}
.sb8-floor.is-live .sb8-floor__step.is-on{opacity:1}

@media(max-width:900px){
  .sb8-floor__route{grid-template-columns:minmax(0,1fr)}
  .sb8-floor__tag--ad,.sb8-feed,.sb8-floor__tag--land,.sb8-land,.sb8-floor__tag--lead{grid-column:1}
  .sb8-floor__tag--ad{grid-row:1}.sb8-feed{grid-row:2;max-width:200px}
  .sb8-floor__tag--land{grid-row:3;margin-top:8px}.sb8-land{grid-row:4}
  .sb8-floor__tag--lead{grid-row:5}
  .sb8-crail .sb8-marq__track{gap:12px}
}
@media(max-width:560px){
  .sb8-floor__canvas{max-width:330px;gap:10px}
  .sb8-cr__badge{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
  .sb8-floor.is-live .sb8-floor__track{height:auto}
  .sb8-crail .sb8-marq__track{transform:none!important}
  .sb8-crail{overflow-x:auto}
}

/* ---- Meta-hero: drie echte advertentieformaten, rustige lus ---- */
.sb8-ad3{position:absolute;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#12263F,#0C1B2E);
  border:1px solid rgba(168,188,216,.2);box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
  opacity:var(--lo,1);transform:translate3d(0,var(--ly,0),var(--lz,0)) rotateY(var(--lry,0deg));
  transition:opacity .7s ease,transform .9s cubic-bezier(.22,.61,.36,1);display:grid;gap:0}
.sb8-ad3__lbl{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.14em;color:var(--sb8-dark-mute);
  padding:6px 8px;background:rgba(4,16,31,.72)}
.sb8-ad3--f45{left:1%;top:14%;width:33%}
.sb8-ad3--f916{left:37%;top:2%;width:24%}
.sb8-ad3--f11{left:64%;top:28%;width:34%}
/* De lus: elk formaat komt om beurten iets naar voren. Traag, klein en
   eindeloos, zodat het leest als leven en niet als een haperende pagina. */
.sb8-svc[data-svc="media"] .sb8-ad3{animation:sb8-ad3-lift 15s ease-in-out infinite;animation-play-state:var(--play,paused)}
.sb8-svc[data-svc="media"] .sb8-ad3--b{animation-delay:-5s}
.sb8-svc[data-svc="media"] .sb8-ad3--c{animation-delay:-10s}
@keyframes sb8-ad3-lift{
  0%,100%{transform:translate3d(0,0,0) scale(1);filter:saturate(.8) brightness(.9)}
  12%{transform:translate3d(0,-10px,60px) scale(1.04);filter:saturate(1) brightness(1.04)}
  30%{transform:translate3d(0,-10px,60px) scale(1.04);filter:saturate(1) brightness(1.04)}
  46%{transform:translate3d(0,0,0) scale(1);filter:saturate(.8) brightness(.9)}
}
@media(max-width:1023px){
  .sb8-ad3--f45{width:33%}.sb8-ad3--f916{width:25%}.sb8-ad3--f11{width:34%}
}
@media(prefers-reduced-motion:reduce){
  .sb8-svc[data-svc="media"] .sb8-ad3{animation:none!important;filter:none!important;transform:none!important}
}

/* ============================================================
   DEMO-ADVERTENTIES — één ontwerpsysteem voor hero, testvloer en
   formatenrij. Alle maten staan in em, zodat dezelfde markup op
   drie schalen werkt: je zet alleen de font-size van .sb8-ad.
   Het zijn demo's van ScaleBusiness zelf. Geen verzonnen klant,
   geen likes, reacties of resultaten.
   ============================================================ */
.sb8-ad{--ink:#050F1C;--surf:#0C1B2E;--line:rgba(168,188,216,.18);
  display:grid;gap:0;background:var(--surf);color:#fff;font-family:var(--sb8-sans);
  line-height:1.3;border-radius:inherit;overflow:hidden;width:100%}

/* profielregel */
.sb8-ad__who{display:flex;align-items:center;gap:.55em;padding:.7em .75em .45em}
.sb8-ad__av{width:1.9em;height:1.9em;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,var(--sb8-signal),#1E7BE8 45%,#0C1B2E 75%,var(--sb8-signal))}
.sb8-ad__ident{display:grid;gap:.1em;min-width:0}
.sb8-ad__brand{font-family:var(--sb8-display);font-weight:600;font-size:1.02em;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb8-ad__spon{font-family:var(--sb8-mono);font-size:.72em;letter-spacing:.1em;color:var(--sb8-dark-mute)}
.sb8-ad__primary{padding:0 .75em .6em;font-size:.94em;line-height:1.34;color:#DCE7F6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* mediavlak */
.sb8-ad__media{position:relative;width:100%;overflow:hidden;background:#102438}
.sb8-ad--f45 .sb8-ad__media{aspect-ratio:4/5}
.sb8-ad--f11 .sb8-ad__media{aspect-ratio:1/1}

/* kop, linkregel en knop */
.sb8-ad__foot{display:grid;gap:.14em;padding:.6em .75em .5em;background:var(--ink)}
.sb8-ad__link{font-family:var(--sb8-mono);font-size:.68em;letter-spacing:.08em;color:var(--sb8-dark-mute);
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb8-ad__head{font-family:var(--sb8-display);font-weight:600;font-size:1.06em;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb8-ad__cta{display:block;margin:0 .6em .6em;text-align:center;font-family:var(--sb8-mono);
  font-size:.78em;letter-spacing:.08em;padding:.55em;border-radius:.45em;background:var(--ink);
  color:var(--sb8-signal);border:1px solid rgba(0,229,168,.45)}

/* --- 1 PROBLEEM: editorial kop, compositie valt uit elkaar --- */
.sb8-ad--problem .sb8-ad__media{background:
  radial-gradient(120% 80% at 18% 0%,rgba(255,107,107,.2),transparent 60%),
  linear-gradient(165deg,#16243A,#080F1C)}
.sb8-ad__word{position:absolute;left:.5em;right:.5em;top:16%;font-family:var(--sb8-display);
  font-weight:700;font-size:2.5em;line-height:.9;letter-spacing:-.04em;color:#fff;opacity:.94}
.sb8-ad__crack{position:absolute;left:-5%;right:-5%;top:32%;height:1px;background:rgba(255,255,255,.55);
  transform:rotate(-7deg);box-shadow:0 0 12px rgba(255,255,255,.35)}
.sb8-ad__shards{position:absolute;inset:auto 0 8% 0;height:34%}
.sb8-ad__shards i{position:absolute;height:.5em;border-radius:.25em;background:rgba(255,255,255,.24)}
.sb8-ad__shards i:nth-child(1){left:8%;width:44%;bottom:62%;transform:rotate(4deg)}
.sb8-ad__shards i:nth-child(2){left:18%;width:30%;bottom:34%;transform:rotate(-9deg);opacity:.7}
.sb8-ad__shards i:nth-child(3){left:34%;width:22%;bottom:6%;transform:rotate(14deg);opacity:.45}

/* --- 2 BEWIJS: feature-led, compacte typografie --- */
.sb8-ad--proof .sb8-ad__media{background:linear-gradient(180deg,#0F2136,#0A1728)}
.sb8-ad__feats{position:absolute;inset:9% 8%;display:grid;gap:.5em;align-content:center}
.sb8-ad__feats b{display:flex;align-items:center;gap:.5em;padding:.42em .5em;border-radius:.35em;
  background:rgba(255,255,255,.045);border:1px solid rgba(0,229,168,.16)}
.sb8-ad__feats s{width:.72em;height:.72em;flex:none;border-radius:.16em;text-decoration:none;
  background:rgba(0,229,168,.9);box-shadow:0 0 .5em rgba(0,229,168,.5)}
.sb8-ad__feats u{flex:1;height:.38em;border-radius:.19em;background:rgba(220,231,246,.5);text-decoration:none}
.sb8-ad__feats b:nth-child(2) u{max-width:74%}
.sb8-ad__feats b:nth-child(3) u{max-width:88%}
.sb8-ad__feats b:nth-child(4) u{max-width:62%}

/* --- 3 AANBOD: sterke hierarchie en een knop in het beeld --- */
.sb8-ad--offer .sb8-ad__media{background:
  radial-gradient(110% 90% at 78% 8%,rgba(0,229,168,.26),transparent 62%),
  linear-gradient(155deg,#123049,#08182B)}
.sb8-ad__eyebrow{position:absolute;left:8%;top:11%;font-family:var(--sb8-mono);font-size:.68em;
  letter-spacing:.2em;color:var(--sb8-signal)}
.sb8-ad__offer{position:absolute;left:8%;right:8%;top:26%;font-family:var(--sb8-display);font-weight:700;
  font-size:1.5em;line-height:1.04;letter-spacing:-.03em}
.sb8-ad__btn{position:absolute;left:8%;bottom:11%;font-family:var(--sb8-mono);font-size:.7em;
  letter-spacing:.08em;padding:.5em .8em;border-radius:.4em;background:var(--sb8-signal);color:#04101F;
  font-weight:600}

/* --- 5 PRODUCT: één object centraal, vrijwel geen tekst --- */
.sb8-ad--product .sb8-ad__media{background:
  radial-gradient(70% 60% at 50% 42%,rgba(0,229,168,.2),transparent 68%),
  linear-gradient(180deg,#0E2033,#060E19)}
.sb8-ad__object{position:absolute;left:50%;top:46%;width:52%;aspect-ratio:1/1;
  transform:translate(-50%,-50%) rotate(-10deg);filter:drop-shadow(0 .8em 1.4em rgba(0,0,0,.6))}
.sb8-ad__object i{position:absolute;border-radius:.28em}
.sb8-ad__object i:nth-child(1){inset:0 30% 30% 0;background:linear-gradient(150deg,#EAF3FF,#9FB6D2)}
.sb8-ad__object i:nth-child(2){inset:14% 14% 14% 14%;
  background:linear-gradient(150deg,rgba(0,229,168,.95),rgba(0,150,120,.85))}
.sb8-ad__object i:nth-child(3){inset:30% 0 0 30%;background-image:linear-gradient(150deg,#274563,#132A42)}
.sb8-ad--product .sb8-ad__primary{-webkit-line-clamp:1}

/* --- verticale varianten: story en reel --- */
.sb8-ad--story{background:none}
.sb8-ad__frame{position:relative;width:100%;aspect-ratio:9/16;border-radius:inherit;overflow:hidden;
  background:#08111E}
.sb8-ad--story .sb8-ad__media{position:absolute;inset:0;aspect-ratio:auto}
.sb8-ad__bars{position:absolute;left:.5em;right:.5em;top:.5em;display:flex;gap:.22em;z-index:3}
.sb8-ad__bars i{flex:1;height:.16em;border-radius:.08em;background:rgba(255,255,255,.28)}
.sb8-ad__bars i.is-done{background:rgba(255,255,255,.85)}
.sb8-ad__bars i.is-live{background:linear-gradient(90deg,rgba(255,255,255,.9) 55%,rgba(255,255,255,.28) 55%)}
.sb8-ad--story .sb8-ad__who{position:absolute;left:.5em;right:.5em;top:1.1em;padding:0;z-index:3;
  align-items:center;gap:.45em}
.sb8-ad--story .sb8-ad__av{width:1.5em;height:1.5em}
.sb8-ad--story .sb8-ad__brand{font-size:.86em}
.sb8-ad--story .sb8-ad__spon{font-size:.64em;margin-left:auto}
.sb8-ad__overlay{position:absolute;left:.8em;right:.8em;bottom:3.4em;display:grid;gap:.3em;z-index:3}
.sb8-ad__big{font-family:var(--sb8-display);font-weight:700;font-size:1.45em;line-height:1.04;
  letter-spacing:-.028em;text-shadow:0 .1em .6em rgba(0,0,0,.6)}
.sb8-ad__sub{font-size:.86em;line-height:1.32;color:#D7E3F3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb8-ad__pill{position:absolute;left:.8em;right:.8em;bottom:.8em;z-index:3;text-align:center;
  font-family:var(--sb8-mono);font-size:.76em;letter-spacing:.08em;padding:.55em;border-radius:.45em;
  background:rgba(0,229,168,.92);color:#04101F;font-weight:600}
.sb8-ad__tagv{position:absolute;right:.7em;bottom:4.9em;z-index:3;font-family:var(--sb8-mono);font-size:.62em;
  letter-spacing:.16em;padding:.22em .45em;border-radius:.3em;background:rgba(4,16,31,.72);
  border:1px solid rgba(255,255,255,.22);color:#fff}

/* --- 4 CREATOR: opnamecompositie, geen verzonnen persoon --- */
.sb8-ad--ugc .sb8-ad__media{background:
  radial-gradient(58% 38% at 50% 34%,rgba(255,246,214,.32),transparent 70%),
  linear-gradient(180deg,#16283F,#070E19)}
.sb8-ad__ring{position:absolute;left:50%;top:32%;width:46%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;border:.22em solid rgba(255,247,220,.65);
  box-shadow:0 0 2.4em rgba(255,240,200,.35),inset 0 0 1.2em rgba(255,240,200,.25)}
.sb8-ad__device{position:absolute;left:50%;top:60%;width:26%;aspect-ratio:9/17;transform:translate(-50%,-36%) rotate(6deg);
  border-radius:.5em;background:linear-gradient(170deg,#33506F,#16283D);border:1px solid rgba(255,255,255,.22);
  box-shadow:0 .7em 1.4em rgba(0,0,0,.55)}
.sb8-ad__device i{position:absolute;inset:8% 8% 14%;border-radius:.3em;
  background:linear-gradient(180deg,rgba(0,229,168,.4),rgba(0,229,168,.08))}
.sb8-ad__play{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);width:0;height:0;
  border-left:.95em solid rgba(255,255,255,.95);border-top:.6em solid transparent;
  border-bottom:.6em solid transparent;filter:drop-shadow(0 .2em .5em rgba(0,0,0,.5))}

/* --- 6 RETARGETING: directe boodschap, richting zonder nepurgentie --- */
.sb8-ad--retarget .sb8-ad__media{background:
  radial-gradient(90% 60% at 20% 88%,rgba(0,229,168,.24),transparent 64%),
  linear-gradient(160deg,#1A2C44,#070E19)}
.sb8-ad__band{position:absolute;left:-12%;right:-12%;top:40%;height:22%;transform:rotate(-11deg);
  background:linear-gradient(90deg,rgba(0,229,168,.16),rgba(0,229,168,.42),rgba(0,229,168,.16));
  border-top:1px solid rgba(0,229,168,.5);border-bottom:1px solid rgba(0,229,168,.5)}
.sb8-ad__chevrons{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);display:flex;gap:.3em}
.sb8-ad__chevrons i{width:.7em;height:.7em;border-top:.18em solid #fff;border-right:.18em solid #fff;
  transform:rotate(45deg)}
.sb8-ad__chevrons i:nth-child(2){opacity:.66}
.sb8-ad__chevrons i:nth-child(3){opacity:.34}

/* --- schalen per context --- */
.sb8-cr .sb8-ad{font-size:clamp(6.2px,.6vw,8.2px)}
.sb8-crail__item .sb8-ad{font-size:clamp(7.4px,.72vw,10px)}
.sb8-ad3 .sb8-ad{font-size:clamp(8.4px,.86vw,12.5px)}
.sb8-floor:not(.is-live) .sb8-cr .sb8-ad{font-size:clamp(7px,1.6vw,10px)}

/* deck en route zijn alleen groepen: in de gepinde stand mogen de kinderen
   rechtstreeks tegen de canvas positioneren */
.sb8-floor.is-live .sb8-floor__deck{display:contents}
.sb8-floor__deck{display:contents}

/* de formatenrij en de hero dragen dezelfde advertenties, andere maat */
.sb8-crail__item--f45{width:clamp(118px,11vw,150px)}
.sb8-crail__item--f916{width:clamp(94px,8.6vw,118px)}
.sb8-crail__item--f11{width:clamp(120px,11.2vw,156px)}
.sb8-crail__item .sb8-ad{border-radius:10px}
.sb8-ad3{border-radius:12px}
.sb8-ad3__lbl{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.14em;color:var(--sb8-dark-mute);
  padding:6px 8px;background:rgba(4,16,31,.72)}

/* de discrete labeling van de hele vloer */
.sb8-floor__disc{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--sb8-dark-mute);opacity:.72;margin:2px 0 0;display:flex;align-items:center;gap:9px}
.sb8-floor__disc::before{content:"";width:16px;height:1px;background:currentColor;flex:none}

/* statusrail, alleen op smal */
.sb8-floor__srail{display:none}

/* ============================================================
   SMAL: de vloer wordt geen gepinde scene maar één grote actieve
   creative met een veegbare strip en een compacte statusrail.
   Je hoeft geen mini-advertenties te ontcijferen.
   ============================================================ */
@media(max-width:900px){
  .sb8-floor__canvas{display:block;max-width:none;padding-inline:0;gap:0}
  .sb8-floor__deck{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;padding:6px var(--sb8-gutter) 14px;
    scrollbar-width:none;-ms-overflow-style:none}
  .sb8-floor__deck::-webkit-scrollbar{display:none}
  .sb8-cr{flex:none;width:min(64vw,262px);scroll-snap-align:center;
    transform:scale(.9);opacity:.5;transition:transform .32s var(--sb8-ease),opacity .32s ease}
  .sb8-cr.is-active{transform:scale(1);opacity:1;border-color:rgba(0,229,168,.35)}
  .sb8-cr__tape{font-size:10px;padding:7px 9px 8px;line-height:1.45;gap:0 8px}
  .sb8-cr{--tape:22px}
  .sb8-cr__badge{font-size:9.5px}
  .sb8-floor__srail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    padding:0 var(--sb8-gutter) 2px;margin-top:0}
  .sb8-floor__srail::-webkit-scrollbar{display:none}
  .sb8-floor__sbtn{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;
    border-radius:999px;border:1px solid rgba(168,188,216,.22);background:rgba(255,255,255,.03);
    color:#C8D7EA;font-family:var(--sb8-mono);font-size:10px;letter-spacing:.1em;cursor:pointer}
  .sb8-floor__sbtn.is-on{border-color:var(--sb8-signal);background:rgba(0,229,168,.12);color:#fff}
  .sb8-floor__sdot{width:6px;height:6px;border-radius:50%;flex:none;background:rgba(168,188,216,.5)}
  .sb8-floor__sbtn[data-st="stop"] .sb8-floor__sdot{background:#FF6B6B}
  .sb8-floor__sbtn[data-st="door"] .sb8-floor__sdot{background:var(--sb8-signal)}
  .sb8-floor__route{margin-top:20px;padding-inline:var(--sb8-gutter)}
  .sb8-floor__foot{margin-top:26px}
}
@media(max-width:560px){
  .sb8-cr{width:min(72vw,252px)}
}

/* ============================================================
   ONDERSTEUNENDE BEELDEN bij de detailpanelen. Eén per paneel,
   klein en functioneel, zodat het witte vlak niet leeg oogt.
   ============================================================ */
.sb8-det__item--viz{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,238px);
  gap:clamp(20px,3vw,44px);align-items:start}
.sb8-det__item--viz > .sb8-dv{grid-column:2;grid-row:1 / span 3;align-self:center}
.sb8-det__item--viz > :not(.sb8-dv){grid-column:1}
.sb8-dv{position:relative;width:100%;border-radius:12px;padding:16px;
  background:linear-gradient(180deg,#F6F9FD,#EDF2F9);border:1px solid var(--sb8-line)}
.sb8-scene--dark .sb8-dv,.sb8-scene--ink .sb8-dv{background:rgba(255,255,255,.04);
  border-color:rgba(168,188,216,.18)}

/* formaatstapel */
.sb8-dv--stack{height:186px}
.sb8-dv__f{position:absolute;border-radius:8px;background:#fff;border:1px solid var(--sb8-line);
  box-shadow:0 14px 28px -20px rgba(8,24,46,.5);display:flex;align-items:flex-end;padding:6px}
.sb8-dv__f i{font-style:normal;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.12em;
  color:rgba(255,255,255,.82)}
.sb8-dv__f--a{left:9%;top:15%;width:37%;aspect-ratio:4/5;
  background:linear-gradient(160deg,#0F2337,#0A1A2B);border-color:rgba(8,24,46,.3)}
.sb8-dv__f--b{left:41%;top:6%;width:26%;aspect-ratio:9/16;
  background:linear-gradient(160deg,#12705A,#0A4436);border-color:rgba(0,168,124,.5)}
.sb8-dv__f--c{left:63%;top:30%;width:32%;aspect-ratio:1/1;
  background-image:linear-gradient(160deg,#26445F,#16324E)}

/* eventpad */
.sb8-dv--path{display:grid;gap:12px;padding:18px 16px}
.sb8-dv__n{position:relative;display:flex;align-items:center;gap:10px;font-family:var(--sb8-mono);
  font-size:10.5px;letter-spacing:.1em;color:var(--sb8-text);z-index:1}
.sb8-dv__n::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:#fff;
  border:2px solid var(--sb8-signal-deep)}
.sb8-dv__n.is-end::before{background:var(--sb8-signal-deep)}
.sb8-dv__line{position:absolute;left:20.5px;top:24px;bottom:24px;width:2px;
  background:linear-gradient(180deg,var(--sb8-signal-deep),rgba(0,168,124,.25))}

/* testlus */
.sb8-dv--loop{height:196px;display:grid;place-items:center}
.sb8-dv--loop svg{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px)}
.sb8-dv__trk{fill:none;stroke:var(--sb8-line);stroke-width:3}
.sb8-dv__arc{fill:none;stroke:var(--sb8-signal-deep);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:22;transform:rotate(-90deg);transform-origin:50% 50%}
.sb8-dv__tick{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a))}
.sb8-dv__tick b{position:absolute;left:50%;top:-74px;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.1em;color:var(--sb8-text);
  background:#fff;border:1px solid var(--sb8-line);border-radius:999px;padding:4px 9px;white-space:nowrap}

/* rapportlayout */
.sb8-dv--report{display:grid;gap:9px}
.sb8-dv__bar{display:flex;align-items:center;gap:8px}
.sb8-dv__bar i{width:26px;height:6px;border-radius:3px;background:var(--sb8-signal-deep)}
.sb8-dv__bar b{flex:1;height:5px;border-radius:3px;background:rgba(8,24,46,.14);max-width:78px}
.sb8-dv__block{display:block;height:62px;border-radius:8px;background:#fff;border:1px solid var(--sb8-line);
  background-image:linear-gradient(90deg,transparent 0 16%,rgba(0,168,124,.18) 16% 30%,transparent 30% 40%,
    rgba(0,168,124,.34) 40% 54%,transparent 54% 64%,rgba(0,168,124,.5) 64% 78%,transparent 78%);
  background-position:bottom;background-size:100% 68%;background-repeat:no-repeat}
.sb8-dv__rows{display:grid;gap:6px}
.sb8-dv__rows i{height:5px;border-radius:3px;background:rgba(8,24,46,.12)}
.sb8-dv__rows i:nth-child(2){width:82%}
.sb8-dv__rows i:nth-child(3){width:64%}
.sb8-dv__rows i:nth-child(4){width:74%}
.sb8-dv__foot{display:block;height:5px;width:40%;border-radius:3px;background:var(--sb8-signal-deep);opacity:.5}

/* aanleverlijst */
.sb8-dv--check{display:grid;gap:10px}
.sb8-dv__row{display:flex;align-items:center;gap:10px}
.sb8-dv__row s{width:15px;height:15px;flex:none;border-radius:4px;text-decoration:none;
  background:#fff;border:1.5px solid var(--sb8-signal-deep);position:relative}
.sb8-dv__row s::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--sb8-signal-deep);border-width:0 2px 2px 0;transform:rotate(42deg)}
.sb8-dv__row:nth-child(4) s::after,.sb8-dv__row:nth-child(5) s::after{opacity:.25}
.sb8-dv__row u{flex:1;height:6px;border-radius:3px;background:rgba(8,24,46,.14);text-decoration:none}
.sb8-dv__row:nth-child(2) u{max-width:76%}
.sb8-dv__row:nth-child(3) u{max-width:88%}
.sb8-dv__row:nth-child(4) u{max-width:62%}
.sb8-dv__row:nth-child(5) u{max-width:70%}

@media(max-width:860px){
  .sb8-det__item--viz{grid-template-columns:minmax(0,1fr)}
  .sb8-det__item--viz > .sb8-dv{grid-column:1;grid-row:auto;max-width:320px;margin-top:4px}
  .sb8-det__item--viz > :not(.sb8-dv){grid-column:1}
}
.sb8-cr__tape b{font-weight:500;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   CONTROLLED AUTOMATION — de signature scene van AI.
   Eén dominant object per beeld: het dossier. Twee banen, één
   controlekaart, één systeem. Geen wolk van kleine nodes.
   Basis = platte eindtoestand; .is-live maakt er de gepinde
   scene van (alleen desktop, alleen met beweging aan).
   ============================================================ */
.sb8-flow__stage{padding-block:clamp(64px,8vw,116px)}
.sb8-flow__head{display:grid;gap:14px;margin-bottom:clamp(28px,3.6vw,52px);max-width:none}
.sb8-flow__disc{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.2em;color:var(--sb8-dark-mute);
  opacity:.7;margin:2px 0 0;display:flex;align-items:center;gap:9px}
.sb8-flow__disc::before{content:"";width:16px;height:1px;background:currentColor;flex:none}
.sb8-flow__row{width:100%;max-width:var(--sb8-wrap);margin-inline:auto;
  padding-inline:var(--sb8-gutter);display:grid;gap:clamp(20px,2.6vw,40px)}
.sb8-flow__canvas{position:relative;width:100%;display:grid;gap:clamp(16px,2.4vw,30px);justify-items:start}
.sb8-flow__wire,.sb8-flow__lbl{display:none}

/* het dossier */
.sb8-doc{position:relative;width:100%;max-width:clamp(260px,30vw,360px);display:grid;gap:0;
  border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#0E2035,#0A1728);
  border:1px solid rgba(168,188,216,.2);box-shadow:0 34px 70px -44px rgba(0,0,0,.92)}
.sb8-doc__bar{display:flex;align-items:center;gap:9px;padding:13px 15px;
  border-bottom:1px solid rgba(168,188,216,.14);background:rgba(4,16,31,.6)}
.sb8-doc__av{width:24px;height:24px;border-radius:50%;flex:none;
  background:conic-gradient(from 200deg,var(--sb8-signal),#1E7BE8 50%,#0C1B2E 80%,var(--sb8-signal))}
.sb8-doc__bar b{font-family:var(--sb8-display);font-weight:600;font-size:14.5px;letter-spacing:-.012em;flex:1}
.sb8-doc__bar s{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;text-decoration:none;
  padding:4px 7px;border-radius:5px;background:rgba(168,188,216,.12);color:#C8D7EA;white-space:nowrap}
.sb8-doc__body{position:relative;display:block;padding:15px;min-height:132px}
.sb8-doc__raw{position:absolute;inset:15px;display:grid;gap:9px;align-content:start;
  opacity:var(--raw,1);transition:opacity .35s ease}
.sb8-doc__raw i{height:7px;border-radius:4px;background:rgba(168,188,216,.2)}
.sb8-doc__raw i:nth-child(2){width:86%}
.sb8-doc__raw i:nth-child(3){width:68%}
.sb8-doc__raw i:nth-child(4){width:78%}
.sb8-doc__scan{position:absolute;left:0;right:0;top:calc(var(--scan,0) * 100%);height:2px;
  background:linear-gradient(90deg,transparent,var(--sb8-signal),transparent);
  opacity:var(--scano,0);box-shadow:0 0 18px 3px rgba(0,229,168,.4)}
.sb8-doc__fields{position:relative;display:grid;gap:7px;align-content:start;
  opacity:var(--fld,0);transition:opacity .3s ease}
.sb8-doc__f{display:flex;align-items:baseline;gap:9px;padding-bottom:7px;
  border-bottom:1px solid rgba(168,188,216,.1);
  opacity:var(--f0,1);transform:translateY(calc((1 - var(--f0,1)) * 5px));transition:opacity .3s,transform .3s}
.sb8-doc__f:nth-child(2){--f0:var(--f2,1)}
.sb8-doc__f:nth-child(3){--f0:var(--f3,1)}
.sb8-doc__f:nth-child(4){--f0:var(--f4,1)}
.sb8-doc__f em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;
  color:var(--sb8-dark-mute);width:62px;flex:none}
.sb8-doc__f b{font-family:var(--sb8-sans);font-weight:500;font-size:13px;color:#fff}
.sb8-doc__route{display:flex;align-items:center;gap:10px;padding:11px 15px;
  border-top:1px solid rgba(168,188,216,.14);background:rgba(0,229,168,.05);
  opacity:var(--rt,1);max-height:var(--rth,60px);overflow:hidden;transition:opacity .3s ease}
.sb8-doc__route em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;
  color:var(--sb8-signal)}
.sb8-doc__route b{font-family:var(--sb8-sans);font-weight:600;font-size:13px}
.sb8-doc__conf{display:grid;gap:8px;padding:13px 15px;border-top:1px solid rgba(168,188,216,.14);
  background:rgba(4,16,31,.55);opacity:var(--cf,1);transition:opacity .3s ease}
.sb8-doc__meter{position:relative;display:block;height:8px;border-radius:5px;
  background:rgba(168,188,216,.16);overflow:visible}
.sb8-doc__meter i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;
  width:calc(var(--cval,.52) * 100%);background:linear-gradient(90deg,#F0A24B,#FFC880);
  transition:width .5s var(--sb8-ease),background .4s ease}
.sb8-doc__meter u{position:absolute;top:-5px;bottom:-5px;left:72%;width:2px;border-radius:2px;
  background:rgba(255,255,255,.75);text-decoration:none}
.sb8-doc__meter u::after{content:"DREMPEL";position:absolute;left:50%;top:-15px;transform:translateX(-50%);
  font-family:var(--sb8-mono);font-size:7.5px;letter-spacing:.14em;color:rgba(255,255,255,.65)}
.sb8-doc__verdict{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.13em;color:#FFC880}
.sb8-doc.is-ok .sb8-doc__meter i{background:linear-gradient(90deg,#00A87C,var(--sb8-signal))}
.sb8-doc.is-ok .sb8-doc__verdict{color:var(--sb8-signal)}

/* de menselijke controle */
.sb8-hc{position:relative;width:100%;max-width:clamp(250px,27vw,330px);display:grid;gap:11px;
  padding:16px;border-radius:16px;background:#F7FAFD;color:var(--sb8-text);
  border:1px solid rgba(8,24,46,.1);box-shadow:0 34px 70px -44px rgba(0,0,0,.9)}
.sb8-hc__top{display:flex;align-items:center;gap:8px;font-family:var(--sb8-mono);font-size:9.5px;
  letter-spacing:.16em;color:var(--sb8-signal-deep)}
.sb8-hc__top i{width:9px;height:9px;border-radius:50%;background:var(--sb8-signal-deep);flex:none}
.sb8-hc__q{font-family:var(--sb8-sans);font-size:14px;line-height:1.42;color:var(--sb8-text)}
.sb8-hc__row{display:flex;align-items:baseline;gap:9px;padding:9px 11px;border-radius:9px;
  background:#fff;border:1px solid var(--sb8-line)}
.sb8-hc__row em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;
  color:var(--sb8-mute)}
.sb8-hc__row b{font-family:var(--sb8-sans);font-weight:600;font-size:13px}
.sb8-hc__btns{display:flex;gap:8px}
.sb8-hc__btns b{flex:1;text-align:center;font-family:var(--sb8-sans);font-weight:600;font-size:12.5px;
  padding:9px;border-radius:9px;background:var(--sb8-signal-deep);color:#fff}
.sb8-hc__btns i{font-style:normal;text-align:center;font-family:var(--sb8-sans);font-size:12.5px;
  padding:9px 14px;border-radius:9px;border:1px solid var(--sb8-line);color:var(--sb8-mute)}
.sb8-hc__stamp{position:absolute;left:50%;top:50%;font-family:var(--sb8-mono);font-size:13px;
  letter-spacing:.2em;color:var(--sb8-signal-deep);border:2.5px solid var(--sb8-signal-deep);
  border-radius:8px;padding:9px 14px;white-space:nowrap;background:rgba(247,250,253,.82);
  transform:translate(-50%,-50%) rotate(-8deg) scale(var(--stamp,1));
  opacity:var(--stampo,1);transition:opacity .28s ease,transform .28s var(--sb8-ease);z-index:3}

/* het systeem en de opvolging */
.sb8-sys{position:relative;width:100%;max-width:clamp(200px,20vw,250px);display:grid;gap:11px;
  padding:15px;border-radius:14px;background:linear-gradient(180deg,#0E2035,#091626);
  background-color:#0B1B2C;border:1px solid rgba(168,188,216,.2)}
.sb8-sys__t{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.18em;color:var(--sb8-dark-mute)}
.sb8-sys__rows{display:grid;gap:7px}
.sb8-sys__rows i{height:9px;border-radius:5px;background:rgba(168,188,216,.16)}
.sb8-sys__rows i.is-new{background:linear-gradient(90deg,var(--sb8-signal),rgba(0,229,168,.25));
  opacity:var(--newrow,1);transform:scaleX(var(--newrow,1));transform-origin:left}
.sb8-task{display:inline-flex;align-items:center;gap:9px;font-family:var(--sb8-sans);font-size:13px;
  padding:9px 13px;border-radius:999px;background:rgba(0,229,168,.1);color:#EAF2FC;
  border:1px solid rgba(0,229,168,.4)}
.sb8-task i{width:7px;height:7px;border-radius:50%;background:var(--sb8-signal);flex:none}

/* het stationsspoor */
.sb8-flow__foot{margin-top:clamp(26px,3.4vw,46px)}
.sb8-flow__rail{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sb8-flow__st{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start}
.sb8-flow__dot{grid-row:1 / span 2;width:11px;height:11px;border-radius:50%;margin-top:5px;
  border:2px solid rgba(168,188,216,.35);background:transparent;transition:background .3s,border-color .3s}
.sb8-flow__st.is-on .sb8-flow__dot{background:var(--sb8-signal);border-color:var(--sb8-signal);
  box-shadow:0 0 0 5px rgba(0,229,168,.16)}
.sb8-flow__st.is-done .sb8-flow__dot{background:rgba(0,229,168,.4);border-color:rgba(0,229,168,.4)}
.sb8-flow__name{font-family:var(--sb8-mono);font-size:10.5px;letter-spacing:.16em;color:#fff}
.sb8-flow__say{font-family:var(--sb8-sans);font-size:14px;line-height:1.5;color:var(--sb8-dark-mute);
  max-width:52ch}

/* de log */
.sb8-flow__auditwrap{margin-top:clamp(30px,4vw,56px)}
.sb8-audit{border-radius:16px;padding:clamp(18px,2.2vw,26px);background:rgba(255,255,255,.03);
  border:1px solid rgba(168,188,216,.16)}
.sb8-audit__t{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.2em;color:var(--sb8-dark-mute);
  margin:0 0 14px}
.sb8-audit__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px 30px}
.sb8-flow.is-live .sb8-flow__row{grid-template-columns:minmax(0,1fr) clamp(220px,20vw,286px);
  align-items:stretch}
.sb8-flow.is-live .sb8-audit{align-self:stretch;display:flex;flex-direction:column}
.sb8-flow.is-live .sb8-audit__list{grid-template-columns:minmax(0,1fr);gap:10px;align-content:start}
.sb8-flow.is-live .sb8-audit__row{font-size:11px}
.sb8-audit__row{display:flex;gap:12px;align-items:baseline;font-family:var(--sb8-mono);font-size:11.5px;
  letter-spacing:.03em;color:#C8D7EA;opacity:var(--lg,1);
  transform:translateY(calc((1 - var(--lg,1)) * 4px));transition:opacity .3s ease,transform .3s ease}
.sb8-audit__row em{font-style:normal;color:var(--sb8-signal);flex:none}
.sb8-audit__row::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(0,229,168,.5);
  flex:none;align-self:center}

/* de ticker */
.sb8-tick{padding-block:clamp(16px,2vw,26px);border-top:1px solid rgba(168,188,216,.12);
  border-bottom:1px solid rgba(168,188,216,.12);margin-top:clamp(30px,4vw,56px)}
.sb8-tick .sb8-marq__track{gap:0}
.sb8-tick .sb8-marq__edge--l{background:linear-gradient(90deg,var(--sb8-ink) 14%,transparent)}
.sb8-tick .sb8-marq__edge--r{background:linear-gradient(270deg,var(--sb8-ink) 14%,transparent)}
.sb8-tick__set{display:flex;align-items:center;gap:0;flex:none}
.sb8-tick__i{font-family:var(--sb8-mono);font-size:11px;letter-spacing:.22em;color:var(--sb8-dark-mute);
  white-space:nowrap}
.sb8-tick__s{color:var(--sb8-signal);padding:0 18px;font-size:11px}
.sb8-flow__note{font-family:var(--sb8-sans);font-size:13.5px;line-height:1.6;color:var(--sb8-dark-mute);
  max-width:62ch;margin:clamp(24px,3vw,36px) 0 0}

/* ---- .is-live: de gepinde workflow ---- */
.sb8-flow.is-live .sb8-flow__track{height:265vh}
.sb8-flow.is-live .sb8-flow__stage{position:sticky;top:0;min-height:100vh;display:flex;
  flex-direction:column;justify-content:center;
  padding-block:clamp(92px,8.4vw,124px) clamp(30px,3.6vw,52px)}
.sb8-flow.is-live .sb8-flow__head{margin-bottom:clamp(16px,2vw,26px);gap:10px}
.sb8-flow.is-live .sb8-flow__head .sb8-lead{font-size:clamp(14px,1.05vw,16px);max-width:54ch}
.sb8-flow.is-live .sb8-flow__canvas{display:block;height:clamp(320px,42vh,470px)}
.sb8-flow.is-live .sb8-flow__wire{display:block;position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:2}
.sb8-flow.is-live .sb8-flow__lane{fill:none;stroke-width:2.2;stroke-linecap:round;
  stroke:rgba(168,188,216,.28);opacity:var(--ld,0);transition:opacity .3s ease}
.sb8-flow.is-live .sb8-flow__lane--in{--ld:var(--lin,0)}
.sb8-flow.is-live .sb8-flow__lane--hi{--ld:var(--lhi,0);stroke:rgba(168,188,216,calc(.18 + var(--hiOn,0) * .5))}
.sb8-flow.is-live .sb8-flow__lane--lo{--ld:var(--llo,0);
  stroke:rgba(0,229,168,calc(.25 + var(--loOn,0) * .7));stroke-width:calc(2.2 + var(--loOn,0) * 1.2)}
.sb8-flow.is-live .sb8-flow__lbl{display:block;position:absolute;font-family:var(--sb8-mono);
  font-size:9.5px;letter-spacing:.16em;padding:5px 10px;border-radius:999px;z-index:3;
  transform:translate(-50%,-50%);transition:opacity .3s ease,color .3s ease,border-color .3s ease}
.sb8-flow.is-live .sb8-flow__lbl--hi{left:50%;top:17%;opacity:var(--split,0);
  color:rgba(200,215,234,calc(.35 + var(--hiOn,0) * .65));
  border:1px solid rgba(168,188,216,calc(.2 + var(--hiOn,0) * .3))}
.sb8-flow.is-live .sb8-flow__lbl--lo{left:50%;top:92%;opacity:var(--split,0);
  color:var(--sb8-signal);border:1px solid rgba(0,229,168,calc(.3 + var(--loOn,0) * .5));
  background:rgba(0,229,168,calc(var(--loOn,0) * .08))}
.sb8-flow.is-live .sb8-doc .sb8-doc__bar{padding:11px 13px}
.sb8-flow.is-live .sb8-doc .sb8-doc__bar b{font-size:12.5px;white-space:nowrap}
.sb8-flow.is-live .sb8-doc__bar s{font-size:7.5px;padding:3px 6px}
.sb8-flow.is-live .sb8-doc .sb8-doc__av{width:21px;height:21px}
.sb8-flow.is-live .sb8-doc .sb8-doc__body{padding:13px;min-height:118px}
.sb8-flow.is-live .sb8-doc .sb8-doc__f b{font-size:12px}
.sb8-flow.is-live .sb8-doc .sb8-doc__f em{width:56px}
.sb8-flow.is-live .sb8-doc__route,.sb8-flow.is-live .sb8-doc__conf{padding:10px 13px}
.sb8-flow.is-live .sb8-hc{padding:14px}
.sb8-flow.is-live .sb8-hc__q{font-size:13px}
.sb8-flow.is-live .sb8-doc{position:absolute;left:calc(var(--dx,22) * 1%);top:calc(var(--dy,50) * 1%);
  width:clamp(214px,19.5vw,272px);max-width:none;z-index:10;
  transform:translate(-50%,-50%) scale(var(--ds,1));opacity:var(--do,1)}
.sb8-flow.is-live .sb8-hc{position:absolute;left:calc(var(--hx,72) * 1%);top:74%;
  width:clamp(206px,18.6vw,260px);max-width:none;z-index:12;
  transform:translate(-50%,-50%) scale(var(--hs,1));opacity:var(--ho,0);
  transition:opacity .3s ease}
.sb8-flow.is-live .sb8-sys{position:absolute;left:84%;top:50%;width:clamp(150px,14vw,190px);
  max-width:none;transform:translate(-50%,-50%);opacity:var(--syso,0);z-index:6;transition:opacity .35s ease}
.sb8-flow.is-live .sb8-task{position:absolute;left:84%;top:calc(50% + 88px);white-space:nowrap;font-size:11.5px;transform:translate(-50%,0);
  opacity:var(--tasko,0);z-index:6;transition:opacity .35s ease}
.sb8-flow.is-live .sb8-flow__rail{position:relative;grid-template-columns:repeat(9,minmax(0,1fr));
  gap:0 8px;padding-bottom:clamp(78px,7.4vw,102px)}
.sb8-flow.is-live .sb8-flow__st{display:block;height:3px;border-radius:2px;
  background:rgba(168,188,216,.16);transition:background .3s ease}
.sb8-flow.is-live .sb8-flow__st.is-done{background:rgba(0,229,168,.35)}
.sb8-flow.is-live .sb8-flow__st.is-on{background:var(--sb8-signal)}
.sb8-flow.is-live .sb8-flow__dot{display:none}
.sb8-flow.is-live .sb8-flow__name,
.sb8-flow.is-live .sb8-flow__say{position:absolute;left:0;opacity:0;pointer-events:none}
.sb8-flow.is-live .sb8-flow__st.is-on .sb8-flow__name{opacity:1;top:20px;
  font-size:10.5px;letter-spacing:.2em;color:var(--sb8-signal)}
.sb8-flow.is-live .sb8-flow__st.is-on .sb8-flow__say{opacity:1;top:42px;width:100%;
  font-family:var(--sb8-sans);font-size:clamp(16px,1.35vw,20px);line-height:1.4;color:#fff;
  max-width:60ch;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb8-flow.is-live .sb8-audit__row{opacity:var(--lg,0)}

@media(max-width:1023px){
  .sb8-flow__canvas{justify-items:stretch}
  .sb8-doc,.sb8-hc{max-width:min(100%,360px)}
}
@media(prefers-reduced-motion:reduce){
  .sb8-flow.is-live .sb8-flow__track{height:auto}
  .sb8-tick .sb8-marq__track{transform:none!important}
  .sb8-tick{overflow-x:auto}
}

/* ============================================================
   AI-HERO — één intakepaneel, één rustige lus.
   Er komt een item binnen, het signaal zakt door de rail en de
   eerste stap licht op. Meer gebeurt er niet, en dat is de bedoeling.
   ============================================================ */
.sb8-intake{position:absolute;left:6%;top:6%;right:4%;bottom:6%;border-radius:18px;
  background:linear-gradient(180deg,rgba(18,38,63,.96),rgba(10,23,40,.96));
  border:1px solid rgba(168,188,216,.2);box-shadow:0 44px 90px -54px rgba(0,0,0,.95);
  display:grid;grid-template-rows:auto 1fr auto;padding:clamp(14px,1.4vw,20px);
  opacity:var(--lo,1);transform:translate3d(0,var(--ly,0),var(--lz,0)) rotateY(var(--lry,0deg));
  transition:opacity .8s ease,transform 1s cubic-bezier(.22,.61,.36,1);overflow:hidden}
.sb8-intake__top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:clamp(10px,1vw,14px);border-bottom:1px solid rgba(168,188,216,.14)}
.sb8-intake__t{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.2em;color:var(--sb8-dark-mute)}
.sb8-intake__live{display:inline-flex;align-items:center;gap:7px;font-family:var(--sb8-mono);
  font-size:9px;letter-spacing:.16em;color:var(--sb8-signal)}
.sb8-intake__live i{width:6px;height:6px;border-radius:50%;background:var(--sb8-signal);
  box-shadow:0 0 0 0 rgba(0,229,168,.5);animation:sb8-intake-beat 6s ease-in-out infinite;
  animation-play-state:var(--play,paused)}
@keyframes sb8-intake-beat{0%,88%,100%{box-shadow:0 0 0 0 rgba(0,229,168,.45)}94%{box-shadow:0 0 0 7px rgba(0,229,168,0)}}
.sb8-intake__rail{position:absolute;left:clamp(20px,2vw,28px);top:clamp(58px,6vw,78px);
  bottom:clamp(62px,6.4vw,86px);width:2px;border-radius:2px;background:rgba(168,188,216,.16);
  overflow:visible}
.sb8-intake__rail i{position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:var(--sb8-signal);box-shadow:0 0 0 4px rgba(0,229,168,.16),0 0 16px 3px rgba(0,229,168,.5);
  animation:sb8-intake-drop 6s cubic-bezier(.4,0,.2,1) infinite;animation-play-state:var(--play,paused)}
@keyframes sb8-intake-drop{
  0%,12%{top:0;opacity:0}
  18%{top:0;opacity:1}
  64%{top:100%;opacity:1}
  72%,100%{top:100%;opacity:0}
}
.sb8-intake__list{display:grid;align-content:center;gap:clamp(5px,.6vw,9px);min-height:0;
  overflow:hidden;padding-left:clamp(26px,2.6vw,36px)}
.sb8-intake__it{display:flex;align-items:center;gap:clamp(8px,.9vw,13px);padding:clamp(7px,.72vw,10px) clamp(10px,1vw,15px);
  border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(168,188,216,.13)}
.sb8-intake__it b{flex:1;font-family:var(--sb8-sans);font-weight:500;font-size:clamp(12px,1vw,14px);color:#fff}
.sb8-intake__it em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;
  color:var(--sb8-dark-mute)}
.sb8-intake__ic{width:clamp(20px,1.9vw,26px);height:clamp(20px,1.9vw,26px);border-radius:7px;flex:none;
  background:rgba(168,188,216,.14);position:relative}
.sb8-intake__ic::before{content:"";position:absolute;inset:24%;border-radius:2px;
  border:1.5px solid rgba(220,231,246,.7)}
.sb8-intake__ic--mail::before{border-radius:2px;border-width:1.5px}
.sb8-intake__ic--form::before{inset:20% 28%}
.sb8-intake__ic--doc::before{inset:18% 26%;border-radius:1px}
.sb8-intake__ic--work::before{inset:28% 20%}
.sb8-intake__ic--lead::before{border-radius:50%;inset:26%}
.sb8-intake__it--new{background:rgba(0,229,168,.09);border-color:rgba(0,229,168,.38);
  animation:sb8-intake-in 6s cubic-bezier(.22,.61,.36,1) infinite;animation-play-state:var(--play,paused)}
.sb8-intake__it--new em{color:var(--sb8-signal)}
.sb8-intake__it--new .sb8-intake__ic{background:rgba(0,229,168,.2)}
@keyframes sb8-intake-in{
  0%,6%{opacity:0;transform:translateY(-14px) scale(.97)}
  16%,88%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-14px) scale(.97)}
}
.sb8-intake__node{display:flex;align-items:center;gap:11px;padding-top:clamp(12px,1.2vw,17px);
  margin-top:clamp(10px,1vw,14px);border-top:1px solid rgba(168,188,216,.14);
  padding-left:clamp(26px,2.6vw,36px)}
.sb8-intake__ring{width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid rgba(168,188,216,.35);
  animation:sb8-intake-node 6s ease-in-out infinite;animation-play-state:var(--play,paused)}
@keyframes sb8-intake-node{
  0%,58%{border-color:rgba(168,188,216,.32);background:transparent;box-shadow:none}
  68%,86%{border-color:var(--sb8-signal);background:var(--sb8-signal);box-shadow:0 0 0 6px rgba(0,229,168,.14)}
  96%,100%{border-color:rgba(168,188,216,.32);background:transparent;box-shadow:none}
}
.sb8-intake__nl{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.18em;color:#fff}
@media(max-width:1023px){
  .sb8-intake{left:2%;right:2%;top:4%;bottom:4%}
}
@media(prefers-reduced-motion:reduce){
  .sb8-intake__it--new,.sb8-intake__rail i,.sb8-intake__ring,.sb8-intake__live i{animation:none!important}
  .sb8-intake__rail i{top:100%;opacity:1}
  .sb8-intake__ring{border-color:var(--sb8-signal);background:var(--sb8-signal)}
}

/* ============================================================
   DRIE LAGEN, ÉÉN MACHINE.
   Kies een laag en dezelfde tekening wordt uitgebreider. Licht,
   ruim en rustig: dit is een editorial sectie met één object,
   geen dashboard.
   ============================================================ */
.sb8-mach__head{margin-bottom:clamp(30px,4vw,56px)}
.sb8-mach__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,4vw,72px);align-items:center}
.sb8-mach__pills{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(20px,2.4vw,30px)}
.sb8-mach__pill{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 18px;
  border-radius:12px;border:1px solid var(--sb8-line);background:#fff;color:var(--sb8-text);
  font-family:var(--sb8-sans);font-weight:500;font-size:15px;cursor:pointer;
  transition:border-color .22s ease,background .22s ease,transform .22s var(--sb8-ease)}
.sb8-mach__pill:hover{border-color:var(--sb8-signal-deep);transform:translateX(3px)}
.sb8-mach__pill[aria-selected="true"]{background:var(--sb8-ink);color:#fff;border-color:var(--sb8-ink)}
.sb8-mach__lvl{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.14em;padding:4px 8px;
  border-radius:6px;background:rgba(8,24,46,.07);color:var(--sb8-mute);flex:none}
.sb8-mach__pill[aria-selected="true"] .sb8-mach__lvl{background:rgba(0,229,168,.18);color:var(--sb8-signal)}
.sb8-scene--ink .sb8-mach__pill{background:rgba(255,255,255,.04);border-color:rgba(168,188,216,.2);color:#fff}
.sb8-mach__pane{position:relative}
.sb8-mach__item{display:grid;gap:12px}
.sb8-mach__item[data-off="1"]{display:none}
.sb8-mach__t{font-family:var(--sb8-display);font-weight:600;font-size:clamp(19px,1.7vw,24px);
  letter-spacing:-.018em;margin:0}
.sb8-mach__b{font-family:var(--sb8-sans);font-size:15px;line-height:1.6;color:var(--sb8-mute);margin:0;
  max-width:46ch}
.sb8-scene--ink .sb8-mach__b{color:var(--sb8-dark-mute)}
.sb8-mach__note{font-family:var(--sb8-sans);font-size:13.5px;line-height:1.6;color:var(--sb8-mute);
  max-width:64ch;margin:clamp(26px,3vw,40px) 0 0}

/* de tekening */
.sb8-mach__stage{position:relative;width:100%;aspect-ratio:16/10;border-radius:20px;
  background:linear-gradient(180deg,#FBFCFE,#F1F5FA);border:1px solid var(--sb8-line);
  box-shadow:0 40px 80px -60px rgba(8,24,46,.5);overflow:hidden}
.sb8-scene--ink .sb8-mach__stage{background:linear-gradient(180deg,#0E2035,#0A1728);
  border-color:rgba(168,188,216,.18)}
.sb8-mach__box{position:absolute;width:23%;display:grid;gap:8px;padding:15px;border-radius:12px;
  background:#fff;border:1px solid var(--sb8-line);box-shadow:0 16px 32px -22px rgba(8,24,46,.45)}
.sb8-mach__box b{font-family:var(--sb8-sans);font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.sb8-mach__box i{height:6px;border-radius:3px;background:rgba(8,24,46,.12)}
.sb8-mach__box i:last-child{width:62%}
.sb8-mach__box--a{left:6%;top:50%;transform:translateY(-50%)}
.sb8-mach__box--b{right:6%;top:50%;transform:translateY(-50%)}
.sb8-mach__pipe{position:absolute;left:30%;right:30%;top:50%;height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,rgba(0,168,124,.25),rgba(0,168,124,.5),rgba(0,168,124,.25))}
.sb8-mach__gate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;gap:3px;
  justify-items:center;padding:9px 14px;border-radius:10px;background:#fff;border:1px solid var(--sb8-line);
  font-family:var(--sb8-sans);font-size:13px;color:var(--sb8-text);
  box-shadow:0 14px 28px -20px rgba(8,24,46,.5);z-index:3}
.sb8-mach__gate em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.16em;
  color:var(--sb8-signal-deep)}
.sb8-mach__flow{position:absolute;left:30%;right:30%;top:50%;height:0;z-index:2}
.sb8-mach__flow i{position:absolute;top:-4px;left:var(--fx,0%);width:8px;height:8px;border-radius:50%;
  background:var(--sb8-signal-deep);box-shadow:0 0 0 4px rgba(0,168,124,.14);
  animation:sb8-mach-run 5.5s linear infinite;animation-play-state:var(--play,running)}
@keyframes sb8-mach-run{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}

/* laag 2: tekstbegrip komt eronder te liggen */
.sb8-mach__reader{position:absolute;left:28%;right:28%;bottom:8%;display:grid;gap:8px;padding:15px 17px;
  border-radius:12px;background:#fff;border:1px solid var(--sb8-line);
  box-shadow:0 18px 36px -26px rgba(8,24,46,.5);
  opacity:0;transform:translateY(16px);transition:opacity .45s var(--sb8-ease),transform .45s var(--sb8-ease)}
.sb8-mach__reader em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.16em;
  color:var(--sb8-mute)}
.sb8-mach__rrow{display:flex;align-items:center;gap:8px}
.sb8-mach__rrow s{width:9px;height:9px;border-radius:3px;flex:none;text-decoration:none;
  background:rgba(0,168,124,.75)}
.sb8-mach__rrow u{font-family:var(--sb8-sans);font-size:13px;text-decoration:none;color:var(--sb8-text)}
.sb8-mach__stage[data-level="2"] .sb8-mach__reader,
.sb8-mach__stage[data-level="3"] .sb8-mach__reader{opacity:1;transform:none}

/* laag 3: een agent binnen een grens, met de mens als uitgang */
.sb8-mach__agent{position:absolute;left:21%;right:21%;top:16%;bottom:24%;border-radius:16px;
  border:1.5px dashed rgba(0,168,124,.5);background:rgba(0,168,124,.05);
  opacity:0;transform:scale(.96);transition:opacity .45s var(--sb8-ease),transform .45s var(--sb8-ease)}
.sb8-mach__agent em{position:absolute;left:14px;top:-9px;font-style:normal;font-family:var(--sb8-mono);
  font-size:8.5px;letter-spacing:.16em;color:var(--sb8-signal-deep);background:#F6F9FC;padding:0 8px}
.sb8-scene--ink .sb8-mach__agent em{background:#0C1B2E}
.sb8-mach__human{position:absolute;right:5%;top:10%;display:inline-flex;align-items:center;gap:9px;
  padding:10px 15px;border-radius:999px;background:var(--sb8-ink);color:#fff;
  font-family:var(--sb8-sans);font-size:13px;opacity:0;transform:translateY(-8px);
  transition:opacity .45s var(--sb8-ease) .1s,transform .45s var(--sb8-ease) .1s;z-index:4}
.sb8-mach__human i{width:7px;height:7px;border-radius:50%;background:var(--sb8-signal);flex:none}
.sb8-mach__stage[data-level="3"] .sb8-mach__agent{opacity:1;transform:none}
.sb8-mach__stage[data-level="3"] .sb8-mach__human{opacity:1;transform:none}

@media(max-width:980px){
  .sb8-mach__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .sb8-mach__pills{flex-direction:row;flex-wrap:wrap}
  .sb8-mach__pill{flex:1 1 auto;font-size:14px;padding:12px 14px}
  .sb8-mach__stage{aspect-ratio:16/13}
  .sb8-mach__box{width:24%}
  .sb8-mach__pipe,.sb8-mach__flow{left:32%;right:32%}
  .sb8-mach__reader{left:16%;right:16%}
}
@media(prefers-reduced-motion:reduce){
  .sb8-mach__flow i{animation:none;left:50%}
}

/* ---- vier kleine UI-voorbeelden bij de detailpanelen van AI ---- */
.sb8-dv--read{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.sb8-dv__pg{display:grid;gap:6px;width:76px;padding:12px 10px;border-radius:8px;background:#fff;
  border:1px solid var(--sb8-line);box-shadow:0 12px 24px -18px rgba(8,24,46,.5)}
.sb8-dv__pg i{height:4px;border-radius:2px;background:rgba(8,24,46,.16)}
.sb8-dv__pg i:nth-child(3){width:72%}
.sb8-dv__pg i:nth-child(5){width:54%}
.sb8-dv__out{display:grid;gap:7px}
.sb8-dv__kv{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;background:#fff;
  border:1px solid rgba(0,168,124,.28)}
.sb8-dv__kv em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.12em;
  color:var(--sb8-mute);width:64px;flex:none}
.sb8-dv__kv b{flex:1;height:5px;border-radius:3px;background:rgba(0,168,124,.4)}

.sb8-dv--check2{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;padding-bottom:38px}
.sb8-dv__col{display:grid;gap:6px;padding:10px;border-radius:8px;background:#fff;border:1px solid var(--sb8-line)}
.sb8-dv__col em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.12em;
  color:var(--sb8-mute);margin-bottom:2px}
.sb8-dv__col i{height:5px;border-radius:3px;background:rgba(8,24,46,.14)}
.sb8-dv__col i.is-flag{background:rgba(240,162,75,.75)}
.sb8-dv__flag{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-family:var(--sb8-mono);
  font-size:9px;letter-spacing:.12em;padding:5px 10px;border-radius:999px;background:rgba(240,162,75,.14);
  border:1px solid rgba(240,162,75,.5);color:#9A5B12;white-space:nowrap}

.sb8-dv--reply{display:grid;gap:9px;justify-items:start}
.sb8-dv__bub{display:block;border-radius:12px;height:26px}
.sb8-dv__bub--in{width:74%;background:#fff;border:1px solid var(--sb8-line);border-bottom-left-radius:4px}
.sb8-dv__bub--out{width:62%;justify-self:end;background:rgba(0,168,124,.16);
  border:1px solid rgba(0,168,124,.34);border-bottom-right-radius:4px}
.sb8-dv__note{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.12em;color:var(--sb8-mute);
  justify-self:end}

.sb8-dv--pass{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.sb8-dv__sys{display:grid;gap:6px;padding:11px 10px;border-radius:8px;background:#fff;
  border:1px solid var(--sb8-line)}
.sb8-dv__sys em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.12em;
  color:var(--sb8-mute)}
.sb8-dv__sys i{height:5px;border-radius:3px;background:rgba(8,24,46,.14)}
.sb8-dv__sys i.is-new{background:rgba(0,168,124,.6)}
.sb8-dv__arrow{position:relative;width:34px;height:2px;border-radius:2px;background:rgba(0,168,124,.45)}
.sb8-dv__arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;
  border-top:2px solid rgba(0,168,124,.7);border-right:2px solid rgba(0,168,124,.7);transform:rotate(45deg)}

/* ============================================================
   SHOWCASE — één praktijkgeval groot, de rest achter een keuze.
   Editorial: veel wit, grote kop, twee kolommen met een duidelijke
   overgang van nu naar straks.
   ============================================================ */
.sb8-case__head{margin-bottom:clamp(30px,4vw,56px)}
.sb8-case__grid{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:clamp(26px,4vw,72px);align-items:start}
.sb8-case__pick{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--sb8-line);
  padding-left:0}
.sb8-case__b{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;
  background:none;border:0;border-left:2px solid transparent;margin-left:-1px;cursor:pointer;
  font-family:var(--sb8-sans);font-weight:500;font-size:15px;color:var(--sb8-mute);
  transition:color .22s ease,border-color .22s ease,background .22s ease}
.sb8-case__b:hover{color:var(--sb8-text);background:rgba(8,24,46,.03)}
.sb8-case__b[aria-selected="true"]{color:var(--sb8-text);border-left-color:var(--sb8-signal-deep);
  font-weight:600}
.sb8-case__n{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.14em;color:var(--sb8-mute);
  flex:none;opacity:.7}
.sb8-case__b[aria-selected="true"] .sb8-case__n{color:var(--sb8-signal-deep);opacity:1}
.sb8-case__item{display:grid;gap:clamp(18px,2.4vw,30px)}
.sb8-case__item[data-off="1"]{display:none}
.sb8-case__t{font-family:var(--sb8-display);font-weight:700;
  font-size:clamp(28px,3.6vw,52px);line-height:1.04;letter-spacing:-.028em;margin:0;text-wrap:balance}
.sb8-case__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(18px,2.6vw,38px)}
.sb8-case__col{display:grid;gap:9px;align-content:start;position:relative}
.sb8-case__col--to{padding-left:clamp(18px,2.4vw,34px);border-left:1px solid var(--sb8-line)}
.sb8-case__x{font-family:var(--sb8-sans);font-size:clamp(15px,1.25vw,17.5px);line-height:1.55;
  color:var(--sb8-text);margin:0;max-width:38ch}
.sb8-case__col:not(.sb8-case__col--to) .sb8-case__x{color:var(--sb8-mute)}
.sb8-case__ind{display:inline-flex;align-items:baseline;gap:10px;margin:0;justify-self:start;
  font-family:var(--sb8-sans);font-size:13.5px;color:var(--sb8-mute);
  padding:8px 14px;border-radius:999px;border:1px solid var(--sb8-line)}
.sb8-case__ind em{font-style:normal;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.14em;
  color:var(--sb8-mute)}
.sb8-case__note{font-family:var(--sb8-sans);font-size:13.5px;line-height:1.6;color:var(--sb8-mute);
  max-width:66ch;margin:clamp(30px,3.6vw,48px) 0 0}
@media(max-width:900px){
  .sb8-case__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .sb8-case__pick{flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--sb8-line);
    scrollbar-width:none;gap:0}
  .sb8-case__pick::-webkit-scrollbar{display:none}
  .sb8-case__b{flex:none;border-left:0;border-bottom:2px solid transparent;margin-left:0;
    padding:12px 14px;white-space:nowrap}
  .sb8-case__b[aria-selected="true"]{border-left-color:transparent;border-bottom-color:var(--sb8-signal-deep)}
  .sb8-case__col--to{padding-left:0;border-left:0;padding-top:16px;border-top:1px solid var(--sb8-line)}
}

/* ============================================================
   SMAL: geen verkleinde desktopworkflow maar een verticale
   stepper. Eén actieve stap, het dossier blijft bovenin staan en
   de menselijke controle schuift als eigen kaart in beeld.
   ============================================================ */
@media(max-width:1023px){
  /* Eén object bovenin dat meeverandert met de stap die je leest, en daaronder
     de verticale stepper. De menselijke controle schuift over het dossier heen
     als eigen kaart, precies op het moment dat hij aan de beurt is. */
  /* De rij lost op, zodat het dossier binnen de hele scene kan blijven
     plakken terwijl je de stappen eronder leest. */
  .sb8-flow__stage{display:flex;flex-direction:column}
  .sb8-flow__row{display:contents}
  .sb8-flow__head{order:1}
  .sb8-flow__canvas{order:2;position:sticky;top:62px;z-index:4;display:grid;
    grid-template-rows:auto auto;gap:10px;padding:12px var(--sb8-gutter) 16px;
    width:100%;max-width:var(--sb8-wrap);margin-inline:auto;
    background:linear-gradient(180deg,var(--sb8-ink) 0 86%,rgba(4,16,31,0))}
  .sb8-flow__foot{order:3}
  .sb8-audit{order:4;width:100%;max-width:var(--sb8-wrap);margin-inline:auto;
    margin-top:clamp(24px,4vw,36px)}
  .sb8-doc,.sb8-hc,.sb8-sys{grid-area:1/1;max-width:none;width:100%}
  .sb8-doc{opacity:var(--do,1);transition:opacity .3s ease}
  /* De controlekaart schuift over het dossier heen, maar laat de bovenrand
     ervan bewust zichtbaar: je blijft zien waar hij tussen komt. */
  .sb8-hc{z-index:3;width:93%;justify-self:end;align-self:end;
    opacity:var(--ho,0);transform:translateX(calc((1 - var(--ho,0)) * 26px));
    transition:opacity .32s var(--sb8-ease),transform .32s var(--sb8-ease)}
  .sb8-hc__stamp{top:14px;bottom:auto;left:auto;right:16px;transform:rotate(-7deg) scale(var(--stamp,1))}
  .sb8-sys{z-index:2;opacity:var(--syso,0);transition:opacity .32s ease}
  .sb8-task{grid-row:2;justify-self:start;max-width:none;opacity:var(--tasko,0);
    max-height:calc(var(--tasko,0) * 60px);overflow:hidden;
    transition:opacity .32s ease,max-height .32s ease}
  .sb8-flow__say{font-size:0;line-height:0;height:0;overflow:hidden}
  .sb8-flow__st.is-on .sb8-flow__say{font-size:15px;line-height:1.5;height:auto;color:#fff}
  .sb8-flow__st{opacity:.4;transition:opacity .3s ease}
  .sb8-flow__st.is-on{opacity:1}
  .sb8-flow__st.is-done{opacity:.62}
  .sb8-flow__rail{gap:26px}
  .sb8-flow__st{min-height:34px}
  .sb8-flow__foot{margin-top:clamp(20px,4vw,32px)}
  .sb8-audit__list{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1023px){
  .sb8-flow__row{grid-template-columns:minmax(0,1fr);gap:22px}
  .sb8-audit{order:2}
}

/* Op telefoonbreedte blijft het dossier compact, zodat de verticale stepper
   eronder in beeld blijft en de controlekaart niet het hele scherm claimt. */
@media(max-width:430px){
  .sb8-flow__canvas{gap:8px;padding-block:10px 12px}
  .sb8-doc__bar{padding:10px 12px}
  .sb8-doc__bar b{font-size:13px}
  .sb8-doc__av{width:21px;height:21px}
  .sb8-doc__body{padding:11px;min-height:0}
  .sb8-doc__fields{gap:5px}
  .sb8-doc__f{padding-bottom:5px}
  .sb8-doc__f b{font-size:12.5px}
  .sb8-doc__f em{width:56px;font-size:8px}
  .sb8-doc__route,.sb8-doc__conf{padding:9px 12px}
  .sb8-doc__route b{font-size:12.5px}
  .sb8-hc{padding:13px;gap:9px}
  .sb8-hc__q{font-size:13px;line-height:1.38}
  .sb8-hc__row{padding:8px 10px}
  .sb8-hc__btns b,.sb8-hc__btns i{padding:8px;font-size:12px}
  .sb8-hc__stamp{font-size:11px;padding:7px 11px;top:11px;right:12px}
  .sb8-sys{padding:13px}
}

/* twee praktijkgevallen binnen dezelfde branche blijven uit elkaar te houden */
.sb8-case__bl{display:grid;gap:2px;min-width:0}
.sb8-case__bl b{font-family:inherit;font-weight:inherit;font-size:15px;line-height:1.3}
.sb8-case__bl em{font-style:normal;font-family:var(--sb8-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;line-height:1.3;color:var(--sb8-mute);opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb8-case__b[aria-selected="true"] .sb8-case__bl em{opacity:1}
.sb8-case__b{align-items:flex-start}
.sb8-case__n{margin-top:3px}
@media(max-width:900px){
  .sb8-case__bl b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
  .sb8-case__bl em{font-size:9px}
}

/* ============================================================
   COACHING — HOEVEEL WIL JE ZELF DOEN
   Een eigen wereld: licht, redactioneel en rustig. Geen donker
   dashboard maar papier, grote typografie en één beweging die
   ergens over gaat: de vier vormen schikken zich fysiek opnieuw
   zodra je kiest, en de verdeling van het werk schuift mee.
   ============================================================ */
.sb8-choose{--ink:#08182E;--paper:#FBFCFE}
.sb8-choose__head{max-width:none;margin-bottom:clamp(30px,4vw,58px)}
.sb8-choose__q{font-family:var(--sb8-display);font-weight:700;
  font-size:clamp(36px,6.2vw,86px);line-height:.98;letter-spacing:-.034em;margin:14px 0 0;
  text-wrap:balance;max-width:16ch}
.sb8-choose__intro{margin-top:clamp(16px,1.8vw,24px);max-width:54ch}

/* de keuzerij, als een schaal van zelf doen naar uit handen */
.sb8-choose__dial{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1.2vw,18px);padding-top:26px;margin-bottom:clamp(26px,3.4vw,44px)}
.sb8-choose__track{position:absolute;left:0;right:0;top:8px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(8,24,46,.16),rgba(8,24,46,.08))}
.sb8-choose__track i{position:absolute;top:50%;left:4px;width:13px;height:13px;
  margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--sb8-signal-deep);
  box-shadow:0 0 0 5px rgba(0,168,124,.14);
  transition:left .55s cubic-bezier(.22,.61,.36,1)}
.sb8-choose__stop{position:relative;display:grid;gap:5px;justify-items:start;text-align:left;
  padding:14px 2px 0;background:none;border:0;cursor:pointer;color:var(--sb8-mute);
  transition:color .24s ease}
.sb8-choose__stop::before{content:"";position:absolute;left:0;right:0;top:-18px;height:2px;
  background:transparent;transition:background .24s ease}
.sb8-choose__stop:hover{color:var(--sb8-text)}
.sb8-choose__stop[aria-selected="true"]{color:var(--sb8-text)}
.sb8-choose__dot{width:9px;height:9px;border-radius:50%;border:2px solid rgba(8,24,46,.2);
  background:var(--sb8-white);position:absolute;top:-12px;left:0;transition:border-color .24s,background .24s}
.sb8-choose__stop[aria-selected="true"] .sb8-choose__dot{border-color:var(--sb8-signal-deep);
  background:var(--sb8-signal-deep)}
.sb8-choose__opt{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sb8-mute)}
.sb8-choose__stop[aria-selected="true"] .sb8-choose__opt{color:var(--sb8-signal-deep)}
.sb8-choose__nm{font-family:var(--sb8-sans);font-weight:600;font-size:clamp(14px,1.15vw,16.5px);
  line-height:1.25;letter-spacing:-.012em}

/* de vier vormen die zich fysiek herschikken */
.sb8-choose__scale{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 clamp(20px,2.4vw,32px);
  font-family:var(--sb8-mono);font-size:clamp(10px,.88vw,11.5px);letter-spacing:.13em;
  text-transform:uppercase;color:var(--sb8-mute)}
.sb8-choose__stage{position:relative;width:100%;min-height:clamp(400px,44vh,500px);
  transition:height .62s cubic-bezier(.22,.61,.36,1)}
.sb8-form{position:absolute;left:var(--fx,0%);top:var(--fy,0%);width:var(--fw,54%);height:var(--fh,100%);
  display:flex;flex-direction:column;gap:12px;overflow:hidden;border-radius:18px;
  background:var(--sb8-white);border:1px solid var(--sb8-line);
  box-shadow:0 30px 60px -50px rgba(8,24,46,.5);
  padding:clamp(18px,1.9vw,28px);
  transition:left .62s cubic-bezier(.22,.61,.36,1),top .62s cubic-bezier(.22,.61,.36,1),
             width .62s cubic-bezier(.22,.61,.36,1),height .62s cubic-bezier(.22,.61,.36,1),
             box-shadow .4s ease,border-color .4s ease}
.sb8-form.is-active{border-color:rgba(8,24,46,.16);box-shadow:0 44px 90px -56px rgba(8,24,46,.62)}
.sb8-form.is-rest{cursor:pointer;background:#F6F9FC}
.sb8-form.is-rest:hover{background:var(--sb8-white);border-color:var(--sb8-signal-deep)}
.sb8-form__top{display:flex;align-items:center;gap:10px}
.sb8-form__num{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.14em;color:var(--sb8-mute)}
.sb8-form__opt{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:rgba(0,168,124,.1);color:var(--sb8-signal-deep)}
.sb8-form--blue .sb8-form__opt{background:rgba(30,123,232,.1);color:#1857A8}
.sb8-form__n{font-family:var(--sb8-display);font-weight:700;font-size:clamp(20px,2.5vw,36px);
  line-height:1.04;letter-spacing:-.026em;margin:0}
.sb8-form__w{font-family:var(--sb8-sans);font-size:15px;line-height:1.55;color:var(--sb8-mute);margin:0;
  max-width:44ch}
.sb8-form__items{list-style:none;margin:0;padding:0;display:grid;gap:9px;overflow:hidden;
  opacity:var(--fi,1);transition:opacity .3s ease}
.sb8-form__items li{display:grid;gap:2px;padding-left:18px;position:relative;
  font-family:var(--sb8-sans);font-size:14.5px;line-height:1.5;color:var(--sb8-text)}
.sb8-form__items li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;
  border-radius:1px;background:var(--sb8-signal-deep)}
.sb8-form--blue .sb8-form__items li::before{background:#1857A8}
.sb8-form__items em{font-style:normal;font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sb8-mute)}
.sb8-form__cta{margin-top:auto;align-self:start;font-family:var(--sb8-sans);font-weight:600;font-size:14px;
  padding:12px 20px;border-radius:10px;background:var(--sb8-ink);color:#fff;text-decoration:none;
  opacity:var(--fi,1);transition:opacity .3s ease,transform .22s var(--sb8-ease)}
.sb8-form__cta:hover{transform:translateY(-2px)}
/* in de rustkolom telt alleen waar het over gaat */
.sb8-form.is-rest .sb8-form__w,
.sb8-form.is-rest .sb8-form__items,
.sb8-form.is-rest .sb8-form__cta{display:none}
.sb8-form.is-rest .sb8-form__n{font-size:clamp(15px,1.25vw,18px);letter-spacing:-.014em}
.sb8-form.is-rest{padding:clamp(13px,1.2vw,18px);gap:8px;justify-content:center}

/* de verdeling van het werk */
.sb8-choose__split{margin-top:clamp(30px,3.6vw,50px);display:grid;gap:12px}
.sb8-split{position:relative;display:flex;height:clamp(54px,5vw,68px);border-radius:12px;overflow:hidden;
  border:1px solid var(--sb8-line);background:var(--sb8-white)}
.sb8-split__a,.sb8-split__b{display:flex;align-items:center;padding-inline:clamp(14px,1.6vw,22px);
  transition:width .62s cubic-bezier(.22,.61,.36,1)}
.sb8-split__a{width:calc(var(--mix,50) * 1%);background:linear-gradient(90deg,#08182E,#12314F);color:#fff}
.sb8-split__b{width:calc((100 - var(--mix,50)) * 1%);justify-content:flex-end;
  background:linear-gradient(90deg,rgba(0,168,124,.1),rgba(0,168,124,.2));color:var(--sb8-signal-deep)}
.sb8-split em{font-style:normal;font-family:var(--sb8-mono);font-size:clamp(10px,.9vw,12px);
  letter-spacing:.18em;white-space:nowrap;overflow:hidden}
.sb8-choose__snote{font-family:var(--sb8-sans);font-size:13px;line-height:1.6;color:var(--sb8-mute);
  max-width:62ch;margin:0}

/* de route, die voor alle vier gelijk blijft */
.sb8-journey{list-style:none;margin:clamp(34px,4vw,58px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,40px)}
.sb8-journey__st{display:grid;gap:10px;padding-top:16px;border-top:2px solid var(--sb8-ink);
  position:relative}
.sb8-journey__st:nth-child(2){border-top-color:rgba(8,24,46,.45)}
.sb8-journey__st:nth-child(3){border-top-color:var(--sb8-signal-deep)}
.sb8-journey__n{font-family:var(--sb8-mono);font-size:clamp(11px,1vw,13px);letter-spacing:.2em;
  color:var(--sb8-text)}
.sb8-journey__b{font-family:var(--sb8-sans);font-size:14.5px;line-height:1.55;color:var(--sb8-mute);
  max-width:40ch}
.sb8-choose__note{font-family:var(--sb8-sans);font-size:13.5px;line-height:1.6;color:var(--sb8-mute);
  max-width:68ch;margin:clamp(30px,3.6vw,48px) 0 0}

/* Smal: dezelfde begeleide keuze, maar als eigen flow. De vier vormen staan
   onder elkaar, de gekozen vorm klapt open, de rest blijft één regel. */
@media(max-width:900px){
  .sb8-choose__dial{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding-top:22px}
  .sb8-choose__track{display:none}
  .sb8-choose__dot{position:relative;top:0;left:0}
  .sb8-choose__stop{padding:12px 13px;border-radius:11px;border:1px solid var(--sb8-line);
    background:var(--sb8-white);gap:7px}
  .sb8-choose__stop[aria-selected="true"]{border-color:var(--sb8-ink);background:var(--sb8-ink);color:#fff}
  .sb8-choose__stop[aria-selected="true"] .sb8-choose__opt{color:var(--sb8-signal)}
  .sb8-choose__stop[aria-selected="true"] .sb8-choose__dot{border-color:var(--sb8-signal);
    background:var(--sb8-signal)}
  .sb8-choose__stage{position:static;height:auto;display:grid;gap:10px}
  .sb8-form{position:relative;left:auto;top:auto;width:auto;height:auto;
    transition:background .3s ease,border-color .3s ease}
  /* De gekozen vorm komt bovenaan te staan, zodat je na een keuze niet eerst
     langs de andere hoeft te scrollen. */
  .sb8-form.is-active{order:-1}
  .sb8-choose__stage{display:flex;flex-direction:column}
  .sb8-form.is-rest{padding:14px 16px;flex-direction:row;align-items:center;gap:12px}
  .sb8-form.is-rest .sb8-form__top{order:2;margin-left:auto}
  .sb8-form.is-rest .sb8-form__num{display:none}
  .sb8-form.is-rest .sb8-form__n{font-size:15px}
  .sb8-journey{grid-template-columns:minmax(0,1fr);gap:22px}
  .sb8-split{height:auto;flex-direction:column}
  .sb8-split__a,.sb8-split__b{width:100%!important;padding:13px clamp(14px,4vw,18px);
    justify-content:flex-start}
  .sb8-split__a{min-height:calc(22px + var(--mix,50) * .5px)}
  .sb8-split__b{min-height:calc(22px + (100 - var(--mix,50)) * .5px)}
}
@media(prefers-reduced-motion:reduce){
  .sb8-form,.sb8-split__a,.sb8-split__b,.sb8-choose__track i{transition:none!important}
}

/* ============================================================
   COACHING-HERO — één rustige lus die de pagina samenvat.
   De markering schuift van alles zelf naar uit handen en de
   verdeling van het werk schuift mee. Verder gebeurt er niets.
   ============================================================ */
.sb8-scale{position:absolute;left:8%;right:6%;top:50%;transform:translateY(-50%)
  translate3d(0,var(--ly,0),var(--lz,0));display:grid;gap:clamp(18px,2.2vw,30px);
  opacity:var(--lo,1);transition:opacity .8s ease,transform 1s cubic-bezier(.22,.61,.36,1)}
.sb8-scale__q{font-family:var(--sb8-display);font-weight:600;
  font-size:clamp(19px,2.1vw,30px);line-height:1.1;letter-spacing:-.024em;color:#fff}
.sb8-scale__rail{position:relative;display:flex;justify-content:space-between;align-items:center;
  height:2px;border-radius:2px;background:rgba(168,188,216,.22);margin-top:6px}
.sb8-scale__rail i{width:8px;height:8px;border-radius:50%;background:rgba(168,188,216,.35);flex:none}
.sb8-scale__grip{position:absolute;top:50%;left:12.5%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:var(--sb8-signal);
  box-shadow:0 0 0 6px rgba(0,229,168,.16),0 0 22px 5px rgba(0,229,168,.45);
  animation:sb8-scale-walk 16s cubic-bezier(.5,0,.2,1) infinite;animation-play-state:var(--play,paused)}
@keyframes sb8-scale-walk{
  0%,10%{left:12.5%}
  22%,32%{left:37.5%}
  44%,54%{left:62.5%}
  66%,84%{left:87.5%}
  96%,100%{left:12.5%}
}
.sb8-scale__stops{display:flex;justify-content:space-between}
.sb8-scale__stops em{font-style:normal;font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--sb8-dark-mute)}
.sb8-scale__bar{display:flex;height:clamp(54px,5.4vw,74px);border-radius:13px;overflow:hidden;
  border:1px solid rgba(168,188,216,.2)}
.sb8-scale__bar s,.sb8-scale__bar b{display:flex;align-items:center;padding-inline:clamp(13px,1.4vw,20px);
  text-decoration:none;animation-duration:16s;animation-timing-function:cubic-bezier(.5,0,.2,1);
  animation-iteration-count:infinite;animation-play-state:var(--play,paused)}
.sb8-scale__bar s{background:linear-gradient(90deg,#0B1E36,#16324E);color:#fff;
  animation-name:sb8-scale-left;width:84%}
.sb8-scale__bar b{justify-content:flex-end;background:linear-gradient(90deg,rgba(0,229,168,.12),rgba(0,229,168,.26));
  color:var(--sb8-signal);animation-name:sb8-scale-right;width:16%}
@keyframes sb8-scale-left{0%,10%{width:86%}22%,32%{width:64%}44%,54%{width:38%}66%,84%{width:14%}96%,100%{width:86%}}
@keyframes sb8-scale-right{0%,10%{width:14%}22%,32%{width:36%}44%,54%{width:62%}66%,84%{width:86%}96%,100%{width:14%}}
.sb8-scale__bar u{font-family:var(--sb8-mono);font-size:clamp(9.5px,.85vw,11.5px);letter-spacing:.18em;
  text-decoration:none;white-space:nowrap;overflow:hidden}
@media(max-width:1023px){
  .sb8-scale{left:3%;right:3%}
}
@media(prefers-reduced-motion:reduce){
  .sb8-scale__grip,.sb8-scale__bar s,.sb8-scale__bar b{animation:none!important}
  .sb8-scale__grip{left:62.5%}
  .sb8-scale__bar s{width:38%}.sb8-scale__bar b{width:62%}
}

/* de volledige vergelijking achter één knop */
.sb8-reveal{margin-top:clamp(18px,2.2vw,28px)}
.sb8-reveal__btn{display:inline-flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:15px 24px;border-radius:12px;border:1px solid var(--sb8-line);background:var(--sb8-white);
  font-family:var(--sb8-sans);font-weight:600;font-size:15px;color:var(--sb8-text);
  transition:border-color .22s ease,transform .22s var(--sb8-ease),box-shadow .22s ease}
.sb8-reveal__btn::-webkit-details-marker{display:none}
.sb8-reveal__btn:hover{border-color:var(--sb8-signal-deep);transform:translateY(-2px);
  box-shadow:0 18px 34px -26px rgba(8,24,46,.5)}
.sb8-reveal__btn i{width:9px;height:9px;border-right:2px solid var(--sb8-signal-deep);
  border-bottom:2px solid var(--sb8-signal-deep);transform:rotate(45deg);margin-top:-4px;
  transition:transform .3s var(--sb8-ease)}
.sb8-reveal[open] .sb8-reveal__btn i{transform:rotate(225deg);margin-top:2px}
.sb8-reveal[open] .sb8-reveal__btn{border-color:var(--sb8-ink)}
.sb8-reveal__in{padding-top:clamp(20px,2.4vw,32px)}
.sb8-scene--ink .sb8-reveal__btn,.sb-section--dark .sb8-reveal__btn{background:rgba(255,255,255,.05);
  border-color:rgba(168,188,216,.24);color:#fff}

@media(max-width:430px){
  /* Coaching: de gekozen vorm blijft het grootste element, maar laat de
     volgende keuze net zichtbaar zodat duidelijk is dat er meer staat. */
  .sb8-form{padding:15px 16px;gap:10px}
  .sb8-form__n{font-size:clamp(19px,5.4vw,23px)}
  .sb8-form__w{font-size:14px;line-height:1.45}
  .sb8-form__items{gap:8px}
  .sb8-form__items li{font-size:13.5px;line-height:1.45;padding-left:16px}
  .sb8-form__items li::before{top:8px;width:7px}
  .sb8-form__items em{font-size:9px}
  .sb8-form__cta{padding:11px 18px;font-size:13.5px}
  .sb8-form.is-rest{padding:12px 15px}
  .sb8-choose__stage{gap:8px}
  .sb8-choose__scale{font-size:9.5px;letter-spacing:.1em;gap:5px 8px}
}

/* ============================================================
   WEBSITE-WERELDEN — een presentatielaag om de referentiemodule.
   De motor, de dataset en de captures blijven ongemoeid. Wat hier
   verandert is de wereld eromheen: canvas, vlak, accent, typografie,
   radius, raster, frame, decoratie en bewegingstaal.
   ============================================================ */
.sb8-rw{position:relative;overflow:hidden;
  --rw-canvas:#04101F;--rw-surface:#0C1B2E;--rw-ink:#FFFFFF;--rw-mute:#A8BCD8;
  --rw-accent:#00E5A8;--rw-accent-ink:#04101F;--rw-line:rgba(168,188,216,.18);
  --rw-radius:14px;--rw-frame-radius:14px;--rw-frame-border:1px solid rgba(168,188,216,.2);
  --rw-frame-shadow:0 40px 80px -50px rgba(0,0,0,.9);
  --rw-title-size:clamp(32px,5vw,68px);--rw-title-weight:700;--rw-title-track:-.03em;
  --rw-title-case:none;--rw-title-family:var(--sb8-display);--rw-title-style:normal;
  --rw-title-line:1;
  --rw-pad:clamp(26px,3.4vw,54px);--rw-shift:0%;--rw-span:1fr;
  --rw-ease:cubic-bezier(.22,.61,.36,1);--rw-dur:.62s;--rw-dir:1;
  --d-rule:0;--d-dots:0;--d-arc:0;--d-diag:0;
  background:var(--rw-canvas)!important;color:var(--rw-ink);
  transition:background .7s var(--rw-ease),color .7s var(--rw-ease)}

/* de negen werelden */
.sb8-rw[data-world="kapsalon"]{--rw-canvas:#0B0A09;--rw-surface:#F4F0E8;--rw-ink:#F7F4EE;--rw-mute:#A9A093;
  --rw-accent:#C9A227;--rw-accent-ink:#0B0A09;--rw-line:rgba(201,162,39,.3);
  --rw-radius:0;--rw-frame-radius:0;--rw-frame-border:1px solid rgba(201,162,39,.42);
  --rw-frame-shadow:0 50px 90px -60px rgba(0,0,0,.95);
  --rw-title-size:clamp(38px,7.4vw,104px);--rw-title-weight:700;--rw-title-track:-.05em;
  --rw-title-case:uppercase;--rw-title-line:.9;--rw-shift:6%;--d-rule:1;
  --rw-ease:cubic-bezier(.16,.84,.28,1);--rw-dur:.8s;--rw-dir:1}
.sb8-rw[data-world="installatie"]{--rw-canvas:#0A1C33;--rw-surface:#FFFFFF;--rw-ink:#EAF2FC;--rw-mute:#8FA6C4;
  --rw-accent:#FF7A1A;--rw-accent-ink:#0A1C33;--rw-line:rgba(255,122,26,.34);
  --rw-radius:6px;--rw-frame-radius:6px;--rw-frame-border:2px solid rgba(255,122,26,.45);
  --rw-title-size:clamp(28px,4.2vw,54px);--rw-title-weight:600;--rw-title-track:.02em;
  --rw-title-case:uppercase;--rw-title-family:var(--sb8-sans);--rw-title-line:1.04;
  --d-dots:1;--rw-shift:0%;--rw-ease:cubic-bezier(.3,.9,.3,1);--rw-dur:.44s;--rw-dir:-1}
.sb8-rw[data-world="restaurant"]{--rw-canvas:#1C1214;--rw-surface:#FBF4EC;--rw-ink:#F6EDE3;--rw-mute:#B79E92;
  --rw-accent:#C8664A;--rw-accent-ink:#FBF4EC;--rw-line:rgba(200,102,74,.32);
  --rw-radius:24px;--rw-frame-radius:24px;--rw-frame-border:1px solid rgba(200,102,74,.3);
  --rw-frame-shadow:0 56px 100px -62px rgba(0,0,0,.9);
  --rw-title-size:clamp(34px,5.6vw,78px);--rw-title-weight:400;--rw-title-track:-.015em;
  --rw-title-style:italic;--rw-title-family:var(--sb8-sans);--rw-title-line:1.02;
  --d-arc:1;--rw-shift:0%;--rw-ease:cubic-bezier(.2,.7,.2,1);--rw-dur:.86s;--rw-dir:1}
.sb8-rw[data-world="sportschool"]{--rw-canvas:#08090A;--rw-surface:#141618;--rw-ink:#FFFFFF;--rw-mute:#8B9196;
  --rw-accent:#C6F24E;--rw-accent-ink:#08090A;--rw-line:rgba(198,242,78,.34);
  --rw-radius:2px;--rw-frame-radius:2px;--rw-frame-border:2px solid rgba(198,242,78,.5);
  --rw-title-size:clamp(40px,8vw,114px);--rw-title-weight:700;--rw-title-track:-.05em;
  --rw-title-case:uppercase;--rw-title-line:.86;
  --d-diag:1;--rw-shift:-5%;--rw-ease:cubic-bezier(.5,0,.1,1);--rw-dur:.34s;--rw-dir:-1}
.sb8-rw[data-world="autogarage"]{--rw-canvas:#17191C;--rw-surface:#22262A;--rw-ink:#F0F2F4;--rw-mute:#8E959C;
  --rw-accent:#F2A81D;--rw-accent-ink:#17191C;--rw-line:rgba(242,168,29,.38);
  --rw-radius:4px;--rw-frame-radius:4px;--rw-frame-border:2px solid rgba(242,168,29,.42);
  --rw-title-size:clamp(26px,3.8vw,48px);--rw-title-weight:600;--rw-title-track:.14em;
  --rw-title-case:uppercase;--rw-title-family:var(--sb8-mono);--rw-title-line:1.1;
  --d-rule:1;--rw-shift:0%;--rw-ease:steps(6,end);--rw-dur:.5s;--rw-dir:1}
.sb8-rw[data-world="praktijk"]{--rw-canvas:#EDF3F3;--rw-surface:#FFFFFF;--rw-ink:#14302F;--rw-mute:#5C7A78;
  --rw-accent:#2E7D74;--rw-accent-ink:#FFFFFF;--rw-line:rgba(46,125,116,.26);
  --rw-radius:20px;--rw-frame-radius:20px;--rw-frame-border:1px solid rgba(46,125,116,.22);
  --rw-frame-shadow:0 40px 80px -60px rgba(20,48,47,.4);
  --rw-title-size:clamp(30px,4.6vw,60px);--rw-title-weight:400;--rw-title-track:-.02em;
  --rw-title-line:1.08;--d-arc:1;--rw-shift:0%;
  --rw-ease:cubic-bezier(.25,.8,.3,1);--rw-dur:.78s;--rw-dir:1}
.sb8-rw[data-world="aannemer"]{--rw-canvas:#26241F;--rw-surface:#F2F0EA;--rw-ink:#F6F4EE;--rw-mute:#A8A296;
  --rw-accent:#E8B403;--rw-accent-ink:#26241F;--rw-line:rgba(232,180,3,.34);
  --rw-radius:0;--rw-frame-radius:0;--rw-frame-border:3px solid rgba(232,180,3,.5);
  --rw-title-size:clamp(38px,6.6vw,92px);--rw-title-weight:700;--rw-title-track:-.04em;
  --rw-title-case:uppercase;--rw-title-line:.92;
  --d-rule:1;--rw-shift:-4%;--rw-ease:cubic-bezier(.4,.8,.2,1);--rw-dur:.5s;--rw-dir:-1}
.sb8-rw[data-world="salon"]{--rw-canvas:#F5EDEA;--rw-surface:#FFFFFF;--rw-ink:#3A2A2A;--rw-mute:#9C817C;
  --rw-accent:#B97F76;--rw-accent-ink:#FFFFFF;--rw-line:rgba(185,127,118,.26);
  --rw-radius:999px;--rw-frame-radius:26px;--rw-frame-border:1px solid rgba(185,127,118,.26);
  --rw-frame-shadow:0 44px 80px -62px rgba(58,42,42,.4);
  --rw-title-size:clamp(28px,4.4vw,58px);--rw-title-weight:400;--rw-title-track:.24em;
  --rw-title-case:uppercase;--rw-title-line:1.3;--rw-pad:clamp(34px,4.6vw,74px);
  --d-arc:1;--rw-shift:0%;--rw-ease:cubic-bezier(.2,.7,.25,1);--rw-dur:.9s;--rw-dir:1}
.sb8-rw[data-world="d2c"]{--rw-canvas:#FFFFFF;--rw-surface:#F4F5F8;--rw-ink:#0E0E14;--rw-mute:#6B6B7B;
  --rw-accent:#5B2BE0;--rw-accent-ink:#FFFFFF;--rw-line:rgba(91,43,224,.22);
  --rw-radius:12px;--rw-frame-radius:12px;--rw-frame-border:1px solid rgba(14,14,20,.1);
  --rw-frame-shadow:0 40px 80px -58px rgba(14,14,20,.4);
  --rw-title-size:clamp(34px,5.6vw,80px);--rw-title-weight:700;--rw-title-track:-.045em;
  --rw-title-line:.96;--d-dots:1;--rw-shift:4%;
  --rw-ease:cubic-bezier(.34,.9,.24,1);--rw-dur:.46s;--rw-dir:-1}

/* de schil van ScaleBusiness blijft staan */
.sb8-rw .sb-section-head .sb-d2{color:var(--rw-ink);transition:color .7s var(--rw-ease)}
.sb8-rw .sb-section-head .sb-lead{color:var(--rw-mute);transition:color .7s var(--rw-ease)}
.sb8-rw .sb-eyebrow,.sb8-rw .sb-section-head .sb-eyebrow{color:var(--rw-accent)!important}
.sb8-rw__label{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.2em;color:var(--rw-mute);
  margin:0 0 14px}
.sb8-rw__pickwrap{margin:clamp(26px,3.2vw,44px) 0 clamp(20px,2.4vw,30px)}
.sb8-rw__pick{display:flex;flex-wrap:wrap;gap:8px}
.sb8-rw__stop{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;cursor:pointer;
  border-radius:var(--rw-radius);border:1px solid var(--rw-line);background:transparent;
  color:var(--rw-mute);font-family:var(--sb8-sans);font-weight:500;font-size:14px;
  transition:background .34s var(--rw-ease),color .34s var(--rw-ease),
             border-color .34s var(--rw-ease),border-radius .5s var(--rw-ease),transform .22s ease}
.sb8-rw__stop:hover{color:var(--rw-ink);border-color:var(--rw-accent);transform:translateY(-2px)}
.sb8-rw__stop[aria-selected="true"]{background:var(--rw-accent);color:var(--rw-accent-ink);
  border-color:var(--rw-accent);font-weight:600}
.sb8-rw__stop i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.sb8-rw__stop[aria-selected="true"] i{opacity:1}

/* de titel van de wereld, met per wereld een eigen behandeling */
.sb8-rw__head{display:grid;gap:12px;margin-bottom:clamp(22px,2.6vw,34px);
  transform:translateX(var(--rw-shift));transition:transform .7s var(--rw-ease)}
.sb8-rw .sb8-rw__head .sb8-rw__title{color:var(--rw-ink)!important}
.sb8-rw .sb8-rw__head .sb8-rw__say{color:var(--rw-mute)!important}
.sb8-rw__title{font-family:var(--rw-title-family);font-weight:var(--rw-title-weight);
  font-size:var(--rw-title-size);letter-spacing:var(--rw-title-track);line-height:var(--rw-title-line);
  text-transform:var(--rw-title-case);font-style:var(--rw-title-style);color:var(--rw-ink);
  margin:0;text-wrap:balance;
  transition:font-size .7s var(--rw-ease),letter-spacing .7s var(--rw-ease),color .7s var(--rw-ease)}
.sb8-rw__say{font-family:var(--sb8-sans);font-size:clamp(15px,1.2vw,17px);line-height:1.55;
  color:var(--rw-mute);margin:0;max-width:48ch;transition:color .7s var(--rw-ease)}

/* het frame van de module krijgt de wereld mee */
.sb8-rw .sb-ref__frame{border-radius:var(--rw-frame-radius)!important;
  border:var(--rw-frame-border)!important;box-shadow:var(--rw-frame-shadow)!important;
  background:var(--rw-surface)!important;overflow:hidden;
  transition:border-radius .7s var(--rw-ease),border-color .7s var(--rw-ease),
             background .7s var(--rw-ease),box-shadow .7s var(--rw-ease)}
.sb8-rw .sb-ref__bar{background:var(--rw-surface)!important;border-bottom:1px solid var(--rw-line)!important;
  color:var(--rw-mute)!important;transition:background .7s var(--rw-ease),color .7s var(--rw-ease)}
.sb8-rw .sb-ref__url{color:var(--rw-mute)!important}
.sb8-rw .sb-ref__extern{color:var(--rw-accent)!important;border-color:var(--rw-line)!important}
.sb8-rw .sb-ref__dots i{background:var(--rw-line)!important}
.sb8-rw .sb-ref__banner{border-color:var(--rw-line)!important;background:transparent!important}
.sb8-rw .sb-ref__banner-tag{background:var(--rw-accent)!important;color:var(--rw-accent-ink)!important}
.sb8-rw .sb-ref__banner-text,.sb8-rw .sb-ref__disclaimer{color:var(--rw-mute)!important}
.sb8-rw .sb-ref__marker{border-color:var(--rw-line)!important;color:var(--rw-mute)!important;
  border-radius:var(--rw-radius)!important;transition:border-radius .5s var(--rw-ease)}
.sb8-rw .sb-ref__marker[aria-pressed="true"]{background:var(--rw-accent)!important;
  color:var(--rw-accent-ink)!important;border-color:var(--rw-accent)!important}
/* de eigen chips van de module wijken voor de wereldkiezer, maar blijven bestaan
   zolang er geen JavaScript is */
.sb8-rw.is-rw .sb-ref__chips{display:none}

/* echte hercompositie: het frame valt in vier stroken uit elkaar en weer samen */
.sb8-rw .sb-ref__rail{position:relative}
.sb8-rw .sb-ref__rail::before,.sb8-rw .sb-ref__rail::after{content:"";position:absolute;
  top:0;bottom:0;width:0;pointer-events:none}
.sb8-rw__slices{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);
  pointer-events:none;z-index:6;opacity:0}
.sb8-rw__slices i{background:var(--rw-canvas);transform:scaleY(0);transform-origin:var(--rw-org,top)}
.sb8-rw.is-morph .sb8-rw__slices{opacity:1}
.sb8-rw.is-morph .sb8-rw__slices i{animation:sb8-rw-slice var(--rw-dur) var(--rw-ease) forwards}
.sb8-rw.is-morph .sb8-rw__slices i:nth-child(1){animation-delay:0ms}
.sb8-rw.is-morph .sb8-rw__slices i:nth-child(2){animation-delay:60ms}
.sb8-rw.is-morph .sb8-rw__slices i:nth-child(3){animation-delay:120ms}
.sb8-rw.is-morph .sb8-rw__slices i:nth-child(4){animation-delay:180ms}
@keyframes sb8-rw-slice{0%{transform:scaleY(0)}46%{transform:scaleY(1)}54%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* decoratie: één per wereld */
.sb8-rw__deco{position:absolute;pointer-events:none;z-index:0;
  transition:opacity .7s var(--rw-ease)}
.sb8-rw__deco--rule{left:0;right:0;top:0;height:4px;background:var(--rw-accent);opacity:var(--d-rule,0)}
.sb8-rw__deco--dots{inset:0;opacity:calc(var(--d-dots,0) * .5);
  background-image:radial-gradient(var(--rw-line) 1px,transparent 1px);background-size:26px 26px}
.sb8-rw__deco--arc{right:-14%;top:-18%;width:58%;aspect-ratio:1/1;border-radius:50%;
  border:1px solid var(--rw-line);opacity:var(--d-arc,0)}
.sb8-rw__deco--diag{inset:0;opacity:calc(var(--d-diag,0) * .35);
  background-image:repeating-linear-gradient(115deg,var(--rw-line) 0 2px,transparent 2px 22px)}
.sb8-rw .sb-wrap{position:relative;z-index:1}

@media(max-width:900px){
  .sb8-rw__pick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:4px;margin-inline:calc(var(--sb-gutter,20px) * -1);
    padding-inline:var(--sb-gutter,20px)}
  .sb8-rw__pick::-webkit-scrollbar{display:none}
  .sb8-rw__stop{flex:none;padding:10px 14px;font-size:13.5px}
  .sb8-rw__head{transform:none}
  .sb8-rw__title{font-size:clamp(28px,8.4vw,42px);letter-spacing:-.02em;line-height:1.04}
  .sb8-rw[data-world="salon"] .sb8-rw__title{letter-spacing:.14em;font-size:clamp(20px,6vw,28px)}
  .sb8-rw[data-world="autogarage"] .sb8-rw__title{font-size:clamp(18px,5.4vw,26px);letter-spacing:.1em}
  .sb8-rw__deco--arc{right:-30%;top:-8%;width:80%}
}
@media(prefers-reduced-motion:reduce){
  .sb8-rw,.sb8-rw *{transition-duration:.01ms!important}
  .sb8-rw.is-morph .sb8-rw__slices i{animation:none}
  .sb8-rw.is-morph .sb8-rw__slices{opacity:0}
}

/* Het paneel naast het frame hoort ook bij de wereld: in een lichte wereld
   mag daar geen lichte tekst op een licht vlak staan. */
.sb8-rw .sb-ref__naam{color:var(--rw-ink)!important}
.sb8-rw .sb-ref__sub{color:var(--rw-accent)!important}
.sb8-rw .sb-ref__waarom,.sb8-rw .sb-ref__hint,.sb8-rw .sb-ref__marker-d{color:var(--rw-mute)!important}
.sb8-rw .sb-ref__marker-k{color:var(--rw-accent)!important}
.sb8-rw .sb-ref__marker[aria-pressed="true"] .sb8-rw__x,
.sb8-rw .sb-ref__marker[aria-pressed="true"] .sb-ref__marker-k,
.sb8-rw .sb-ref__marker[aria-pressed="true"] .sb-ref__marker-d{color:var(--rw-accent-ink)!important}
.sb8-rw .sb-ref__extlink{color:var(--rw-ink)!important;border-color:var(--rw-line)!important}
.sb8-rw .sb-ref__extlink:hover{border-color:var(--rw-accent)!important;color:var(--rw-accent)!important}
.sb8-rw .sb-ref__route{border-color:var(--rw-accent)!important}
.sb8-rw .sb-ref__panel{color:var(--rw-mute)}

/* ============================================================
   WEBSITE-WERELDEN, TWEEDE SLAG
   De keuzerij is niet te missen, het podium is immersief, en
   wisselen leest als WERELD A → TRANSFORMATIE → WERELD B.
   Vijf fasen: uit elkaar, FLIP, tokens morphen, clip-path erin,
   typografie landt. Autoplay draait alleen binnen de gekozen
   wereld; de branche wisselt nooit uit zichzelf.
   ============================================================ */

/* ---------- podium ---------- */
.sb8-rw__stage{display:block}
.sb8-rw__main{display:grid;gap:clamp(18px,2.2vw,30px);min-width:0}
@media (min-width:1024px){
  .sb8-rw__stage{display:grid;grid-template-columns:minmax(212px,254px) minmax(0,1fr);
    gap:clamp(24px,3vw,52px);align-items:start}
  .sb8-rw__pickwrap{position:sticky;top:calc(var(--sb-headh,72px) + 22px);margin:0}
}

/* ---------- keuzerij ---------- */
.sb8-rw__label{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.22em;
  color:var(--rw-accent);margin:0 0 12px;text-transform:uppercase}
.sb8-rw__pick{position:relative;display:grid;gap:5px;flex-wrap:nowrap}
.sb8-rw__ind{position:absolute;left:0;top:0;z-index:0;pointer-events:none;opacity:0;
  background:var(--rw-accent);border-radius:var(--rw-radius);
  transition:transform .52s var(--rw-ease),width .52s var(--rw-ease),
             height .52s var(--rw-ease),background .6s var(--rw-ease),border-radius .6s var(--rw-ease)}
.sb8-rw__stop{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:2px 10px;width:100%;text-align:left;cursor:pointer;
  padding:11px 14px;border-radius:var(--rw-radius);background:transparent;
  border:1px solid var(--rw-line);color:var(--rw-mute);
  font-family:var(--sb8-sans);font-size:15px;font-weight:600;line-height:1.2;
  transition:color .3s ease,border-color .3s ease,transform .3s var(--rw-ease),
             border-radius .6s var(--rw-ease)}
.sb8-rw__stop u{grid-row:1/3;font-family:var(--sb8-mono);font-size:10px;letter-spacing:.08em;
  text-decoration:none;opacity:.75;align-self:center}
.sb8-rw__stop b{font-weight:600}
.sb8-rw__stop em{grid-column:2;font-family:var(--sb8-mono);font-style:normal;font-size:8.5px;
  letter-spacing:.16em;opacity:0;height:0;overflow:hidden;transition:opacity .3s ease}
.sb8-rw__stop:hover{color:var(--rw-ink);border-color:var(--rw-accent);transform:translateX(3px)}
.sb8-rw__stop:focus-visible{outline:2px solid var(--rw-accent);outline-offset:3px}
.sb8-rw__stop[aria-selected="true"]{background:transparent;border-color:transparent;
  color:var(--rw-accent-ink);transform:none}
.sb8-rw__stop[aria-selected="true"] em{opacity:.72;height:auto;margin-top:3px}
.sb8-rw__stop[aria-selected="true"] u{opacity:1}
.sb8-rw__stop i{display:none}

/* ---------- kop ---------- */
.sb8-rw__head{display:grid;gap:10px;margin:0 0 2px}
.sb8-rw__char{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.24em;
  color:var(--rw-accent)!important;margin:0;text-transform:uppercase}

/* ---------- detailframes, ten hoogste twee ---------- */
.sb8-rw__sup{display:grid;grid-template-columns:var(--rw-sup-cols,1.5fr 1fr);
  gap:clamp(10px,1.2vw,18px);width:var(--rw-sup-w,58%);justify-self:var(--rw-sup-js,start);
  min-width:0;transition:width .6s var(--rw-ease)}
.sb8-rw__supf{margin:0;min-width:0;display:grid;gap:7px;
  border:var(--rw-frame-border);border-radius:var(--rw-frame-radius);
  background:var(--rw-surface);overflow:hidden;
  transition:border-radius .6s var(--rw-ease),background .6s var(--rw-ease),
             border-color .6s var(--rw-ease),opacity .24s ease}
.sb8-rw__supbar{display:flex;gap:4px;padding:8px 10px 0}
.sb8-rw__supbar i{width:5px;height:5px;border-radius:50%;background:var(--rw-line)}
.sb8-rw__supvp{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;
  background:var(--rw-canvas);margin:0 10px}
.sb8-rw__supf[data-rw-mob="1"] .sb8-rw__supvp{aspect-ratio:3/4}
.sb8-rw__supshot{position:absolute;top:0;left:0;width:100%;height:auto;display:block;
  transform:translateY(calc(-1 * var(--sy,0%)));transition:transform .7s var(--rw-ease)}
.sb8-rw__supcap{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rw-mute);padding:0 10px 9px}
.sb8-rw__supf[data-rw-empty="1"] .sb8-rw__supvp{background:
  repeating-linear-gradient(135deg,var(--rw-line) 0 8px,transparent 8px 16px)}

/* ---------- per wereld: compositie, richting en bewegingstaal ---------- */
.sb8-rw[data-world="d2c"]        {--rw-cols:minmax(0,1.5fr) minmax(300px,.92fr);--rw-ord-f:1;--rw-ord-p:2;
  --rw-sup-w:56%;--rw-sup-js:end;--rw-sup-cols:1.5fr 1fr;--rw-anim:sb8rw-slidecrop}
.sb8-rw[data-world="restaurant"] {--rw-cols:minmax(300px,.9fr) minmax(0,1.5fr);--rw-ord-f:2;--rw-ord-p:1;
  --rw-sup-w:62%;--rw-sup-js:end;--rw-sup-cols:1.3fr 1fr;--rw-anim:sb8rw-soft}
.sb8-rw[data-world="sportschool"]{--rw-cols:minmax(0,1.7fr) minmax(288px,.85fr);--rw-ord-f:1;--rw-ord-p:2;
  --rw-sup-w:48%;--rw-sup-js:start;--rw-sup-cols:1fr 1fr;--rw-anim:sb8rw-snap}
.sb8-rw[data-world="praktijk"]   {--rw-cols:minmax(0,1.34fr) minmax(300px,1fr);--rw-ord-f:1;--rw-ord-p:2;
  --rw-sup-w:64%;--rw-sup-js:start;--rw-sup-cols:1.4fr 1fr;--rw-anim:sb8rw-calm}
.sb8-rw[data-world="autogarage"] {--rw-cols:minmax(300px,.88fr) minmax(0,1.5fr);--rw-ord-f:2;--rw-ord-p:1;
  --rw-sup-w:52%;--rw-sup-js:start;--rw-sup-cols:1fr 1fr;--rw-anim:sb8rw-track}
.sb8-rw[data-world="kapsalon"]   {--rw-cols:minmax(288px,.82fr) minmax(0,1.62fr);--rw-ord-f:2;--rw-ord-p:1;
  --rw-sup-w:58%;--rw-sup-js:end;--rw-sup-cols:1.6fr 1fr;--rw-anim:sb8rw-mask}
.sb8-rw[data-world="installatie"]{--rw-cols:minmax(0,1.3fr) minmax(300px,1fr);--rw-ord-f:1;--rw-ord-p:2;
  --rw-sup-w:66%;--rw-sup-js:start;--rw-sup-cols:1fr 1fr;--rw-anim:sb8rw-util}
.sb8-rw[data-world="aannemer"]   {--rw-cols:minmax(0,1.55fr) minmax(292px,.88fr);--rw-ord-f:1;--rw-ord-p:2;
  --rw-sup-w:54%;--rw-sup-js:end;--rw-sup-cols:1fr 1.3fr;--rw-anim:sb8rw-stack}
.sb8-rw[data-world="salon"]      {--rw-cols:minmax(300px,.92fr) minmax(0,1.44fr);--rw-ord-f:2;--rw-ord-p:1;
  --rw-sup-w:60%;--rw-sup-js:end;--rw-sup-cols:1.2fr 1fr;--rw-anim:sb8rw-refine}

@media (min-width:1000px){
  .sb8-rw.is-rw .sb-ref__slide{grid-template-columns:var(--rw-cols,minmax(0,1.35fr) minmax(0,1fr))!important;
    gap:clamp(18px,2.2vw,34px)}
  .sb8-rw.is-rw .sb-ref__slide > .sb-ref__frame{order:var(--rw-ord-f,1)}
  .sb8-rw.is-rw .sb-ref__slide > .sb-ref__panel{order:var(--rw-ord-p,2)}
}

/* ---------- FASE 1, de huidige wereld stapt terug ---------- */
.sb8-rw.is-out .sb-ref__slide[data-ref-active="true"] .sb-ref__frame{
  transform:scale(.955) translateY(9px);opacity:.5;
  transition:transform .2s cubic-bezier(.4,0,.6,1),opacity .2s ease}
.sb8-rw.is-out .sb8-rw__supf{transform:scale(.93);opacity:.3;
  transition:transform .2s cubic-bezier(.4,0,.6,1),opacity .2s ease}

/* ---------- FASE 4, de nieuwe preview komt binnen ----------
   De animatie zit op de viewport en niet op het frame zelf. Het frame
   voert op dat moment de FLIP uit, en een animatie op transform zou die
   verplaatsing overrulen. */
.sb8-rw.is-in .sb-ref__slide[data-ref-active="true"] .sb-ref__viewport{
  animation:var(--rw-anim,sb8rw-calm) calc(var(--rw-tdur,720ms) * .58) var(--rw-ease)
            calc(var(--rw-tdur,720ms) * .2) both}
.sb8-rw.is-in .sb8-rw__supf .sb8-rw__supvp{
  animation:sb8rw-suppop calc(var(--rw-tdur,720ms) * .46) var(--rw-ease)
            calc(var(--rw-tdur,720ms) * .26) both}
.sb8-rw.is-in .sb8-rw__supf:nth-child(2) .sb8-rw__supvp{animation-delay:calc(var(--rw-tdur,720ms) * .34)}

@keyframes sb8rw-slidecrop{0%{clip-path:inset(0 100% 0 0);transform:translateX(3%)}
  100%{clip-path:inset(0 0 0 0);transform:none}}
@keyframes sb8rw-soft{0%{clip-path:inset(14% 10% 14% 10%);opacity:.18;transform:scale(1.03)}
  100%{clip-path:inset(0 0 0 0);opacity:1;transform:none}}
@keyframes sb8rw-snap{0%{clip-path:inset(42% 0 42% 0);transform:scale(1.05)}
  38%{clip-path:inset(0 0 0 0);transform:scale(1.012)}
  100%{clip-path:inset(0 0 0 0);transform:none}}
@keyframes sb8rw-calm{0%{clip-path:inset(7% 7% 7% 7%);opacity:.3}
  100%{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes sb8rw-track{0%{clip-path:inset(0 100% 0 0)}24%{clip-path:inset(0 74% 0 0)}
  48%{clip-path:inset(0 48% 0 0)}72%{clip-path:inset(0 22% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes sb8rw-mask{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes sb8rw-util{0%{clip-path:inset(0 0 100% 0)}34%{clip-path:inset(0 36% 36% 0)}
  68%{clip-path:inset(0 0 15% 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes sb8rw-stack{0%{clip-path:inset(100% 0 0 0);transform:translateY(7%)}
  58%{clip-path:inset(0 0 0 0);transform:translateY(1.2%)}
  100%{clip-path:inset(0 0 0 0);transform:none}}
@keyframes sb8rw-refine{0%{clip-path:circle(22% at 50% 50%);opacity:.35}
  100%{clip-path:circle(122% at 50% 50%);opacity:1}}
@keyframes sb8rw-suppop{0%{opacity:0;clip-path:inset(0 0 100% 0)}
  100%{opacity:1;clip-path:inset(0 0 0 0)}}

/* ---------- FASE 5, typografie en labels landen als laatste ---------- */
.sb8-rw.is-morph .sb8-rw__head > *{opacity:0;transform:translateY(13px)}
.sb8-rw.is-land .sb8-rw__head > *{opacity:1;transform:none;
  transition:opacity .4s ease,transform .44s var(--rw-ease)}
.sb8-rw.is-land .sb8-rw__title{transition-delay:70ms}
.sb8-rw.is-land .sb8-rw__say{transition-delay:150ms}

/* ---------- stroken, nu zes ---------- */
.sb8-rw__slices{grid-template-columns:repeat(6,1fr)}
.sb8-rw.is-morph .sb8-rw__slices i{animation-duration:var(--rw-tdur,720ms)}
.sb8-rw.is-morph .sb8-rw__slices i:nth-child(5){animation-delay:240ms}
.sb8-rw.is-morph .sb8-rw__slices i:nth-child(6){animation-delay:300ms}

/* ---------- previewstanden binnen de gekozen wereld ---------- */
.sb8-rw.is-rw .sb-ref__marker{position:relative;overflow:hidden}
.sb8-rw.is-rw .sb-ref__marker.is-auto::after{content:"";position:absolute;left:0;bottom:0;height:2px;
  width:100%;background:var(--rw-accent-ink);transform-origin:left;
  animation:sb8rw-dwell 7s linear both}
@keyframes sb8rw-dwell{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- mobiel: eigen variant, geen verkleinde desktop ---------- */
@media (max-width:1023.98px){
  .sb8-rw__pickwrap{margin:clamp(20px,4vw,30px) 0 clamp(14px,3vw,20px)}
  .sb8-rw__pick{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:3px}
  .sb8-rw__pick::-webkit-scrollbar{display:none}
  .sb8-rw__stop{flex:none;width:auto;grid-template-columns:auto auto;padding:10px 14px;font-size:14px}
  .sb8-rw__stop em{display:none}
  .sb8-rw__stop:hover{transform:none}
  .sb8-rw__sup{width:100%;grid-template-columns:1.4fr 1fr;gap:9px}
  .sb8-rw.is-rw .sb-ref__slide[data-ref-active="false"]{display:none}
  .sb8-rw.is-rw .sb-ref__rail{overflow:visible}
  .sb8-rw__supcap{font-size:8px;letter-spacing:.12em}
}
@media (max-width:430px){
  .sb8-rw__stop{padding:9px 12px;font-size:13px}
  .sb8-rw__stop u{font-size:9px}
  .sb8-rw__sup{grid-template-columns:1.3fr 1fr;gap:8px}
  .sb8-rw__supbar{padding:6px 7px 0}
  .sb8-rw__supvp{margin:0 7px}
  .sb8-rw__supcap{padding:0 7px 7px}
}

/* ---------- rustige stand ---------- */
@media (prefers-reduced-motion:reduce){
  .sb8-rw.is-in .sb-ref__slide[data-ref-active="true"] .sb-ref__viewport,
  .sb8-rw.is-in .sb8-rw__supf .sb8-rw__supvp{animation:none}
  .sb8-rw.is-rw .sb-ref__marker.is-auto::after{animation:none;display:none}
  .sb8-rw__ind{transition:none}
  .sb8-rw__supshot{transition:none}
}

/* De markers staan in de wereldenstand in een smallere kolom, dus de regel
   en de uitleg gaan onder elkaar in plaats van naast elkaar. */
.sb8-rw.is-rw .sb-ref__markers{gap:8px}
.sb8-rw.is-rw .sb-ref__marker{grid-template-columns:minmax(0,1fr)!important;gap:4px;
  text-align:left;padding:10px 12px}
.sb8-rw.is-rw .sb-ref__marker-k{font-size:9.5px;letter-spacing:.16em}
.sb8-rw.is-rw .sb-ref__marker-d{font-size:12.5px;line-height:1.45}
.sb8-rw.is-rw .sb-ref__panel{align-content:start}

/* De vaste externe labeling is op een smal scherm te lang voor één regel. */
@media (max-width:1023.98px){
  .sb8-rw .sb-ref__banner-tag{white-space:normal;font-size:9px;letter-spacing:.1em;line-height:1.55}
}
@media (max-width:430px){
  .sb8-rw .sb-ref__banner-tag{font-size:8.5px;letter-spacing:.07em}
}

/* De stroken krijgen een accentrand, zodat de wissel als ontworpen beweging
   leest en niet als een lege flits. */
.sb8-rw__slices i{position:relative}
.sb8-rw__slices i::after{content:"";position:absolute;left:0;right:0;height:3px;
  background:var(--rw-accent);bottom:0}
.sb8-rw__slices[style*="bottom"] i::after{bottom:auto;top:0}

/* ============================================================
   WEBSITE-WERELDEN, POLISH
   ============================================================ */

/* De vaste externe labeling blijft altijd leesbaar, maar concurreert niet
   meer met de wereldtitel: omlijnd in plaats van een gevulde balk. */
.sb8-rw .sb-ref__banner{padding-block:10px;opacity:.92}
.sb8-rw .sb-ref__banner-tag{background:transparent!important;color:var(--rw-accent)!important;
  border:1px solid var(--rw-line)!important;font-size:9px;letter-spacing:.14em;
  padding:4px 9px;border-radius:var(--rw-radius);
  transition:color .6s var(--rw-ease),border-color .6s var(--rw-ease)}
.sb8-rw .sb-ref__banner-text{font-size:12.5px;opacity:.82}

/* Stippenrij onder de preview: alleen op mobiel, waar de markerlijst pas
   verder naar beneden staat. */
.sb8-rw__pvdots{display:none}
@media (max-width:1023.98px){
  .sb8-rw.is-rw .sb8-rw__pvdots{display:flex;gap:7px;justify-content:center;
    padding:11px 0 2px}
  .sb8-rw__pvdots i{width:24px;height:3px;border-radius:2px;background:var(--rw-line);
    cursor:pointer;transition:background .3s ease,width .3s var(--rw-ease)}
  .sb8-rw__pvdots i[data-on="1"]{background:var(--rw-accent);width:38px}
  .sb8-rw.is-rw .sb-ref__frame{touch-action:pan-y;will-change:transform}
  .sb8-rw .sb-ref__banner-tag{font-size:8.5px;letter-spacing:.08em;padding:4px 7px}
  .sb8-rw .sb-ref__banner-text{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .sb8-rw__pvdots i{transition:none}
}

/* ============================================================
   TARIEVEN
   Rustiger dan de andere dienstpagina's. Eén herolus, één sterke
   scope-builder, en verder editorial. Nergens een bedrag in de
   opbouw: wat verandert is scope, tijd, disciplines en aanpak.
   ============================================================ */

/* ---------- hero: de scope groeit ---------- */
.sb8-grow{position:relative;display:block;width:100%;max-width:430px;
  padding:22px 20px 18px;border-radius:18px;
  border:1px solid rgba(168,188,216,.16);background:rgba(8,20,34,.55)}
.sb8-grow__rail{position:absolute;left:0;top:18px;bottom:44px;width:2px;
  background:rgba(168,188,216,.16);border-radius:2px;overflow:hidden}
.sb8-grow__rail i{position:absolute;left:0;right:0;top:0;height:34%;
  background:var(--sb8-signal,#00E5A8);border-radius:2px;
  animation:sb8-grow-rail 11s cubic-bezier(.4,0,.3,1) infinite}
.sb8-grow__stack{display:grid;gap:7px}
.sb8-grow__pl{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;
  border:1px solid rgba(168,188,216,.2);background:rgba(255,255,255,.045);
  transform-origin:left center;opacity:0;
  animation:sb8-grow-pl 11s cubic-bezier(.3,.8,.3,1) infinite;
  animation-delay:calc(var(--i) * 1.15s)}
.sb8-grow__pl b{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.17em;
  color:rgba(234,242,252,.9)}
.sb8-grow__pl::before{content:"";width:6px;height:6px;border-radius:2px;flex:none;
  background:rgba(168,188,216,.5)}
.sb8-grow__pl--check::before{background:var(--sb8-signal,#00E5A8)}
.sb8-grow__pl--check{border-color:rgba(0,229,168,.34)}
.sb8-grow__scale{display:flex;justify-content:space-between;margin-top:16px;
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.2em}
.sb8-grow__scale s{text-decoration:none;color:rgba(168,188,216,.6)}
.sb8-grow__scale b{color:var(--sb8-signal,#00E5A8)}
@keyframes sb8-grow-pl{
  0%,4%{opacity:0;transform:translateY(10px) scaleX(.9)}
  12%,74%{opacity:1;transform:none}
  86%,100%{opacity:0;transform:translateY(-6px) scaleX(.96)}}
@keyframes sb8-grow-rail{
  0%{top:0;height:18%}70%{top:66%;height:34%}86%,100%{top:0;height:18%}}

/* ---------- scope builder ---------- */
.sb8-scope__head{max-width:62ch;margin-bottom:clamp(26px,3.2vw,44px)}
.sb8-scope__grid{display:grid;gap:clamp(20px,2.6vw,40px)}
@media (min-width:1024px){
  .sb8-scope__grid{grid-template-columns:minmax(300px,360px) minmax(0,1fr);align-items:start}
}
.sb8-scope__dims{display:grid;gap:clamp(16px,1.8vw,24px);align-content:start}
.sb8-dim__l{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.22em;
  color:var(--sb8-signal,#00E5A8);margin:0 0 9px}
.sb8-dim__set{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;padding:4px;border-radius:12px;border:1px solid rgba(168,188,216,.18);
  background:rgba(8,20,34,.5)}
.sb8-dim__grip{position:absolute;top:4px;bottom:4px;left:0;border-radius:9px;opacity:0;
  background:var(--sb8-signal,#00E5A8);pointer-events:none;
  transition:transform .46s cubic-bezier(.22,.68,.28,1),width .46s cubic-bezier(.22,.68,.28,1)}
.sb8-dim__b{position:relative;z-index:1;padding:11px 6px;border:0;background:transparent;
  cursor:pointer;border-radius:9px;font-family:var(--sb8-sans);font-size:13px;font-weight:600;
  line-height:1.25;color:rgba(206,222,242,.72);transition:color .28s ease}
.sb8-dim__b:hover{color:#fff}
.sb8-dim__b[aria-pressed="true"]{color:#04101F}
.sb8-dim__b:focus-visible{outline:2px solid var(--sb8-signal,#00E5A8);outline-offset:2px}
.sb8-scope__hint{font-size:12.5px;line-height:1.55;color:rgba(168,188,216,.72);margin:2px 0 0}

.sb8-scope__stage{border:1px solid rgba(168,188,216,.16);border-radius:18px;
  background:linear-gradient(180deg,rgba(10,24,40,.72),rgba(6,16,28,.72));
  padding:clamp(16px,1.8vw,26px);min-width:0}
.sb8-scope__top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(168,188,216,.14)}
.sb8-scope__tag{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.2em;
  color:rgba(168,188,216,.7);border:1px solid rgba(168,188,216,.22);padding:4px 8px;border-radius:5px}
.sb8-scope__band{font-family:var(--sb8-display,var(--sb8-sans));font-size:clamp(20px,2vw,30px);
  font-weight:700;letter-spacing:-.02em;color:#fff}
.sb8-scope__build{display:grid;gap:6px;margin-bottom:18px}
.sb8-plate{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:3px 12px;
  padding:11px 14px;border-radius:10px;border:1px solid rgba(168,188,216,.2);
  background:rgba(255,255,255,.05);will-change:transform}
.sb8-plate[data-on="0"]{display:none}
.sb8-plate b{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.16em;color:#EAF2FC}
.sb8-plate em{font-style:normal;font-size:12.5px;color:rgba(168,188,216,.8);justify-self:end;text-align:right}
.sb8-plate--link{border-color:rgba(122,168,255,.34);background:rgba(122,168,255,.08)}
.sb8-plate--check{border-color:rgba(0,229,168,.38);background:rgba(0,229,168,.09)}
.sb8-plate--check b{color:var(--sb8-signal,#00E5A8)}
.sb8-plate--beg{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.09)}

.sb8-scope__out{display:grid;gap:1px;margin:0;background:rgba(168,188,216,.14);
  border:1px solid rgba(168,188,216,.14);border-radius:12px;overflow:hidden}
@media (min-width:760px){ .sb8-scope__out{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sb8-scope__out > div{background:#08141F;padding:13px 15px;display:grid;gap:5px}
.sb8-scope__out dt{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.2em;
  color:rgba(168,188,216,.72)}
.sb8-scope__out dd{margin:0;font-size:13.5px;line-height:1.5;color:#EAF2FC}
.sb8-scope__out.is-set dd{animation:sb8-scope-set .46s ease both}
.sb8-scope__out.is-set > div:nth-child(2) dd{animation-delay:60ms}
.sb8-scope__out.is-set > div:nth-child(3) dd{animation-delay:120ms}
.sb8-scope__out.is-set > div:nth-child(4) dd{animation-delay:180ms}
@keyframes sb8-scope-set{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sb8-scope__note{margin:clamp(20px,2.4vw,30px) 0 0;font-size:12.5px;line-height:1.6;
  color:rgba(168,188,216,.72);max-width:70ch}

/* ---------- offerte-journey ---------- */
.sb8-quote__row{position:relative;list-style:none;margin:clamp(26px,3vw,42px) 0 0;padding:0;
  display:grid;gap:clamp(16px,2vw,26px)}
@media (min-width:860px){
  .sb8-quote__row{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
}
.sb8-quote__line{position:absolute;left:0;right:0;top:7px;height:2px;
  background:rgba(168,188,216,.18);border-radius:2px;overflow:hidden;display:none}
@media (min-width:860px){ .sb8-quote__line{display:block} }
.sb8-quote__line i{position:absolute;left:0;top:0;bottom:0;width:var(--qf,0%);
  background:var(--sb8-signal,#00E5A8);border-radius:2px;transition:width .2s linear}
.sb8-quote__step{position:relative;padding-top:26px;opacity:.5;
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.68,.28,1);transform:translateY(8px)}
.sb8-quote__step[data-on="1"],.sb8-quote:not(.is-live) .sb8-quote__step{opacity:1;transform:none}
.sb8-quote__dot{position:absolute;left:0;top:2px;width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(168,188,216,.4);background:#04101F;
  transition:border-color .4s ease,background .4s ease,box-shadow .4s ease}
.sb8-quote__step[data-on="1"] .sb8-quote__dot{border-color:var(--sb8-signal,#00E5A8);
  background:var(--sb8-signal,#00E5A8);box-shadow:0 0 0 5px rgba(0,229,168,.14)}
.sb8-quote__n{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.18em;
  color:var(--sb8-signal,#00E5A8)}
.sb8-quote__t{margin:6px 0 6px;font-size:clamp(17px,1.5vw,21px);font-weight:700;
  letter-spacing:-.01em;color:#fff}
.sb8-quote__b{margin:0;font-size:13.5px;line-height:1.6;color:rgba(168,188,216,.86)}

/* ---------- keuzepanelen: dienstselector en wel/niet ---------- */
.sb8-pick__bar{position:relative;display:flex;gap:6px;margin:clamp(22px,2.6vw,34px) 0 clamp(18px,2vw,26px);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.sb8-pick__bar::-webkit-scrollbar{display:none}
.sb8-pick__grip{position:absolute;left:0;top:0;opacity:0;border-radius:11px;pointer-events:none;
  background:var(--sb8-ink,#04101F);
  transition:transform .46s cubic-bezier(.22,.68,.28,1),width .46s cubic-bezier(.22,.68,.28,1),
             height .46s cubic-bezier(.22,.68,.28,1)}
.sb8-pick--dienst .sb8-pick__grip,.sb8-pick--inout .sb8-pick__grip{background:var(--sb8-ink,#04101F)}
.sb8-pick__b{position:relative;z-index:1;flex:none;display:inline-flex;align-items:baseline;gap:9px;
  padding:12px 17px;border-radius:11px;cursor:pointer;background:transparent;
  border:1px solid rgba(8,22,38,.16);color:rgba(8,22,38,.62);
  font-family:var(--sb8-sans);font-size:15px;font-weight:600;
  transition:color .28s ease,border-color .28s ease,transform .28s ease}
.sb8-pick__b u{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.1em;text-decoration:none;opacity:.7}
.sb8-pick__b:hover{color:#08141F;border-color:rgba(8,22,38,.42);transform:translateY(-1px)}
.sb8-pick__b:focus-visible{outline:2px solid var(--sb8-signal,#00E5A8);outline-offset:3px}
.sb8-pick__b[aria-selected="true"]{color:#fff;border-color:transparent;transform:none}
.sb8-pick__b[aria-selected="true"] u{opacity:.75}
.sb8-scene--ink .sb8-pick__b{border-color:rgba(168,188,216,.22);color:rgba(206,222,242,.72)}
.sb8-scene--ink .sb8-pick__b:hover{color:#fff;border-color:rgba(168,188,216,.5)}
.sb8-scene--ink .sb8-pick__grip{background:var(--sb8-signal,#00E5A8)}
.sb8-scene--ink .sb8-pick__b[aria-selected="true"]{color:#04101F}

.sb8-pick__pane{position:relative}
.sb8-pick.is-live .sb8-pick__item[data-off="1"]{display:none}
.sb8-pick__item.is-in{animation:sb8-pick-in .44s cubic-bezier(.22,.68,.28,1) both}
@keyframes sb8-pick-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sb8-pick__lead{margin:0 0 clamp(16px,1.8vw,24px);font-size:clamp(16px,1.35vw,19px);
  line-height:1.6;max-width:62ch;color:inherit;opacity:.9}
.sb8-pick__aspects{display:grid;gap:1px;background:rgba(8,22,38,.12);
  border:1px solid rgba(8,22,38,.12);border-radius:14px;overflow:hidden}
@media (min-width:820px){ .sb8-pick__aspects{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sb8-asp{background:#fff;padding:clamp(15px,1.6vw,22px);display:grid;gap:9px;align-content:start}
.sb8-scene--mist .sb8-asp{background:#FBFCFE}
.sb8-pick.is-live .sb8-pick__item.is-in .sb8-asp{animation:sb8-pick-in .5s cubic-bezier(.22,.68,.28,1) both;
  animation-delay:var(--d,0ms)}
.sb8-asp__l{margin:0;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.19em;
  color:rgba(8,22,38,.52)}
.sb8-asp__list{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.sb8-asp__list li{position:relative;padding-left:17px;font-size:14px;line-height:1.55;color:#13202E}
.sb8-asp__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;
  background:var(--sb8-signal,#00E5A8)}
.sb8-pick__meta{margin:14px 0 0;font-size:12.5px;line-height:1.6;opacity:.7;max-width:70ch}

.sb8-pick__io{display:grid;gap:1px;background:rgba(8,22,38,.12);
  border:1px solid rgba(8,22,38,.12);border-radius:14px;overflow:hidden}
@media (min-width:760px){ .sb8-pick__io{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sb8-io{background:#fff;padding:clamp(15px,1.6vw,22px)}
.sb8-scene--mist .sb8-io{background:#FBFCFE}
.sb8-io__l{margin:0 0 11px;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.19em}
.sb8-io--wel .sb8-io__l{color:#0E7A5B}
.sb8-io--niet .sb8-io__l{color:rgba(8,22,38,.52)}
.sb8-io ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sb8-io li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:#13202E}
.sb8-io--wel li::before{content:"";position:absolute;left:0;top:.36em;width:9px;height:5px;
  border-left:1.6px solid #0E7A5B;border-bottom:1.6px solid #0E7A5B;transform:rotate(-45deg)}
.sb8-io--niet li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:1.6px;
  background:rgba(8,22,38,.34)}

/* ---------- mobiel: eigen opzet ---------- */
@media (max-width:1023.98px){
  .sb8-grow{max-width:none}
  .sb8-scope__stage{padding:14px}
  .sb8-scope__band{font-size:clamp(19px,5.4vw,26px)}
  .sb8-dim__b{font-size:12px;padding:10px 4px}
  .sb8-plate{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 12px}
  .sb8-plate em{justify-self:start;text-align:left}
  .sb8-pick__b{padding:10px 14px;font-size:14px}
  .sb8-quote__step{padding-top:0;padding-left:26px}
  .sb8-quote__dot{top:4px}
}
@media (max-width:430px){
  .sb8-grow{padding:16px 14px 14px}
  .sb8-grow__pl{padding:8px 10px}
  .sb8-dim__b{font-size:11.5px;letter-spacing:-.01em}
  .sb8-scope__out dd{font-size:13px}
  .sb8-asp,.sb8-io{padding:14px}
}

/* ---------- rustige stand ---------- */
@media (prefers-reduced-motion:reduce){
  .sb8-grow__pl,.sb8-grow__rail i{animation:none;opacity:1;transform:none}
  .sb8-scope__out.is-set dd,.sb8-pick__item.is-in,
  .sb8-pick.is-live .sb8-pick__item.is-in .sb8-asp{animation:none}
  .sb8-dim__grip,.sb8-pick__grip{transition:none}
  .sb8-quote__step{opacity:1;transform:none}
}

/* ============================================================
   TARIEVEN — de compositie fysiek maken
   Geen lijst met balken en geen SaaS-paneel: één gestapeld object
   in perspectief, dat groeit en krimpt met de keuzes.
   ============================================================ */

/* hero-lus */
.sb8-grow{border:0;background:transparent;padding:0;max-width:420px;perspective:1500px}
.sb8-grow__rail{left:-14px;top:4px;bottom:52px}
.sb8-grow__stack{gap:9px;transform:rotateX(15deg) rotateZ(-1.1deg);transform-origin:46% 100%}
.sb8-grow__pl{margin-left:calc(var(--i) * 13px);margin-right:calc((5 - var(--i)) * 3px);
  border-radius:7px;padding:11px 13px;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  border-color:rgba(168,188,216,.24);
  box-shadow:0 16px 28px -20px #000,inset 0 1px 0 rgba(255,255,255,.07)}
.sb8-grow__pl--check{box-shadow:0 16px 30px -18px rgba(0,229,168,.4),inset 0 1px 0 rgba(255,255,255,.09)}
.sb8-grow__scale{margin-top:26px;padding-left:calc(2 * 13px)}

/* scope builder: geen paneel, wel een object */
.sb8-scope__stage{border:0;background:transparent;padding:0}
.sb8-scope__top{border-bottom:0;padding-bottom:0;margin-bottom:clamp(16px,1.8vw,24px)}
.sb8-scope__build{position:relative;gap:8px;margin-bottom:clamp(26px,3vw,40px);
  perspective:1600px;perspective-origin:54% 42%;
  transform:rotateX(12deg) rotateZ(-.65deg);transform-origin:48% 50%}
.sb8-scope__build::before{content:"";position:absolute;left:-18px;top:6px;bottom:6px;width:2px;
  border-radius:2px;background:linear-gradient(180deg,rgba(0,229,168,.55),rgba(168,188,216,.12));
  pointer-events:none}
.sb8-plate{border-radius:8px;padding:13px 16px;
  margin-left:calc(var(--k,0) * 14px);margin-right:calc(var(--r,0) * 5px);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  box-shadow:0 18px 32px -24px #000,inset 0 1px 0 rgba(255,255,255,.07);
  transition:margin-left .5s cubic-bezier(.22,.68,.28,1),margin-right .5s cubic-bezier(.22,.68,.28,1)}
.sb8-plate--link{background:linear-gradient(180deg,rgba(122,168,255,.16),rgba(122,168,255,.05))}
.sb8-plate--check{background:linear-gradient(180deg,rgba(0,229,168,.17),rgba(0,229,168,.05));
  box-shadow:0 18px 34px -22px rgba(0,229,168,.45),inset 0 1px 0 rgba(255,255,255,.09)}
.sb8-plate--beg{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.055))}

/* de uitkomst is geen dashboard maar een leesbare opsomming */
.sb8-scope__out{background:transparent;border:0;border-radius:0;gap:0;
  border-top:1px solid rgba(168,188,216,.18)}
.sb8-scope__out > div{background:transparent;padding:15px 0 15px;
  border-bottom:1px solid rgba(168,188,216,.13)}
@media (min-width:760px){
  .sb8-scope__out{column-gap:clamp(22px,2.6vw,44px)}
  .sb8-scope__out > div:nth-child(odd){padding-right:clamp(11px,1.3vw,22px)}
}
.sb8-scope__out dd{font-size:14px;line-height:1.55}

@media (max-width:1023.98px){
  .sb8-grow__stack{transform:none}
  .sb8-grow__pl{margin-left:calc(var(--i) * 8px);margin-right:0}
  .sb8-grow__rail{left:-10px}
  .sb8-grow__scale{padding-left:0}
  .sb8-scope__build{transform:none;perspective:none}
  .sb8-scope__build::before{left:-12px}
  .sb8-plate{margin-left:calc(var(--k,0) * 7px);margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  .sb8-plate{transition:none}
}

/* De lijn loopt van de eerste tot de laatste stap, niet door naar de rand. */
@media (min-width:860px){
  .sb8-quote__line{right:calc(25% - clamp(14px,1.6vw,24px) * .7)}
}

/* Tarieven, mobiele lengte. De scope-builder bleef leesbaar maar liep op een
   telefoon tegen de twee schermen aan. Alleen spacing, geen herontwerp. */
@media (max-width:1023.98px){
  .sb8-scope__grid{gap:clamp(14px,3vw,20px)}
  .sb8-scope__dims{gap:12px}
  .sb8-dim__l{margin-bottom:6px}
  .sb8-dim__set{padding:3px;gap:3px}
  .sb8-dim__b{padding:9px 4px}
  .sb8-scope__hint{font-size:12px;line-height:1.5;margin-top:0}
  .sb8-scope__top{margin-bottom:12px}
  .sb8-scope__build{gap:5px;margin-bottom:16px}
  .sb8-plate{padding:9px 12px}
  .sb8-plate em{font-size:12px}
  .sb8-scope__out > div{padding:10px 0}
  .sb8-scope__out dd{font-size:13px;line-height:1.45}
  .sb8-scope__note{margin-top:16px;font-size:12px}
}

/* ============================================================
   HOMEPAGE GUIDED JOURNEY
   Minimale landingstaat, daarna één route tegelijk. Het groene
   signaal is de rode draad van boven tot onder.
   ============================================================ */

.sb8-jr{position:relative;background:var(--sb8-ink,#04101F);color:#fff;
  --jr-sig:var(--sb8-signal,#00E5A8);--jr-line:rgba(168,188,216,.18);--jr-mute:#A8BCD8}

/* ---------- ROUTE FINDER ---------- */
.sb8-jr__land{position:relative;padding:clamp(30px,4.4vh,52px) 0 clamp(26px,4vh,46px)}
.sb8-jr__h1{margin:0;font-family:var(--sb8-display,var(--sb8-sans));font-weight:700;
  font-size:clamp(31px,4.1vw,56px);line-height:1.02;letter-spacing:-.035em;max-width:16ch}
.sb8-jr__sub{margin:clamp(12px,1.5vh,18px) 0 0;max-width:54ch;
  font-size:clamp(15px,1.15vw,17.5px);line-height:1.55;color:var(--jr-mute)}

.sb8-rf__split{display:grid;gap:clamp(18px,2.2vw,40px);margin-top:clamp(18px,2.4vh,30px)}
@media (min-width:1000px){ .sb8-rf__split{grid-template-columns:41fr 59fr;align-items:start} }

/* ---------- links: redactionele navigatie, geen kaarten ---------- */
.sb8-rf__list{--rf-num:26px;--rf-gap:clamp(11px,1.1vw,16px);
  display:grid;grid-template-columns:minmax(0,1fr);min-width:0;
  border-top:1px solid var(--jr-line)}
.sb8-rf__item,.sb8-rf__panel,.sb8-rf__panelin,.sb8-rf__inline{min-width:0;max-width:100%}
.sb8-rf__item{position:relative;border-bottom:1px solid var(--jr-line);
  transition:background .26s ease,padding-left .3s cubic-bezier(.22,.68,.28,1)}
.sb8-rf__edge{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--jr-sig);
  transform:scaleY(0);transform-origin:top;opacity:0;
  transition:transform .32s cubic-bezier(.22,.68,.28,1),opacity .2s ease}
.sb8-rf__opt{position:relative;display:grid;grid-template-columns:var(--rf-num) minmax(0,1fr);
  column-gap:var(--rf-gap);width:100%;text-align:left;cursor:pointer;
  padding:clamp(14px,1.4vw,19px) 0 clamp(13px,1.3vw,17px);
  background:transparent;border:0;color:#fff}
.sb8-rf__opt u{grid-row:1;grid-column:1;font-family:var(--sb8-mono);font-size:10px;
  letter-spacing:.14em;text-decoration:none;color:var(--jr-sig);opacity:.6;padding-top:5px;
  transition:opacity .18s ease}
.sb8-rf__opt b{grid-row:1;grid-column:2;font-family:var(--sb8-display,var(--sb8-sans));
  font-weight:600;font-size:clamp(16px,1.3vw,20px);line-height:1.22;letter-spacing:-.018em;
  color:rgba(255,255,255,.72);transition:color .16s ease}
.sb8-rf__opt em{grid-row:2;grid-column:2;display:block;margin-top:7px;font-family:var(--sb8-mono);
  font-style:normal;font-size:9px;letter-spacing:.2em;color:var(--jr-mute);opacity:.5;
  transition:color .18s ease,opacity .18s ease}
/* het teken dat er iets opent; op desktop onzichtbaar, op mobiel de affordance */
.sb8-rf__mark{display:none}

/* het paneel: uitleg, status en de actie. Hier zit ook de mobiele wereld in. */
.sb8-rf__panel{overflow:hidden;max-height:0;opacity:0;
  transition:max-height .34s cubic-bezier(.22,.68,.28,1),opacity .22s ease}
.sb8-rf__panelin{padding:0 0 clamp(13px,1.3vw,17px) calc(var(--rf-num) + var(--rf-gap))}
.sb8-rf__help{display:block;margin:1px 0 0;font-style:normal;max-width:46ch;
  font-size:13px;line-height:1.5;color:var(--jr-mute);opacity:.82}
.sb8-rf__go{display:inline-flex;align-items:center;gap:9px;margin-top:12px;
  padding:0;border:0;background:transparent;cursor:pointer;
  font-family:var(--sb8-sans);font-size:13.5px;font-weight:600;color:var(--jr-sig);
  transition:color .2s ease}
.sb8-rf__go s{position:relative;width:20px;height:9px;text-decoration:none;flex:none;
  transition:transform .3s cubic-bezier(.22,.68,.28,1)}
.sb8-rf__go s::before{content:"";position:absolute;left:0;top:4px;width:17px;height:1.3px;background:currentColor}
.sb8-rf__go s::after{content:"";position:absolute;right:0;top:1px;width:7px;height:7px;
  border-top:1.3px solid currentColor;border-right:1.3px solid currentColor;transform:rotate(45deg)}
.sb8-rf__go:hover s{transform:translateX(5px)}

/* de actieve keuze: meer contrast, niet een groene kaart */
.sb8-rf__item.is-on{background:rgba(255,255,255,.05);padding-left:clamp(12px,1.2vw,18px)}
.sb8-rf__item.is-on .sb8-rf__edge{transform:scaleY(1);opacity:1}
.sb8-rf__item.is-on .sb8-rf__opt u{opacity:1}
.sb8-rf__item.is-on .sb8-rf__opt b{color:#fff}
.sb8-rf__item.is-on .sb8-rf__opt em{color:var(--jr-sig);opacity:1}
.sb8-rf__item.is-on .sb8-rf__panel{max-height:680px;opacity:1}
.sb8-rf__opt:focus-visible{outline:2px solid var(--jr-sig);outline-offset:-3px}
.sb8-rf__go:focus-visible{outline:2px solid var(--jr-sig);outline-offset:3px;border-radius:2px}
/* de andere drie dimmen licht: nog goed leesbaar, duidelijk niet actief */
.sb8-rf__list.is-hot .sb8-rf__item:not(.is-on){opacity:.58}
.sb8-rf__list.is-hot .sb8-rf__item:not(.is-on):hover{opacity:.82}
.sb8-rf__item{transition:background .26s ease,padding-left .3s cubic-bezier(.22,.68,.28,1),opacity .24s ease}

/* ---------- rechts: één wereld tegelijk ---------- */
.sb8-rf__stage{position:relative;min-height:clamp(320px,44vh,452px);
  border:1px solid var(--jr-line);border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.045),rgba(255,255,255,.012));
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,1.8vw,28px)}
.sb8-rf__node{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  z-index:5;pointer-events:none;
  transition:transform .46s cubic-bezier(.22,.68,.28,1),opacity .3s ease}
.sb8-rf__node i{position:absolute;inset:0;border-radius:50%;background:var(--jr-sig);
  box-shadow:0 0 0 6px rgba(0,229,168,.13),0 0 22px 4px rgba(0,229,168,.45)}
.sb8-rf__node.is-land i{animation:sb8-jr-pulse .66s cubic-bezier(.22,.68,.28,1)}
@keyframes sb8-jr-pulse{0%{transform:scale(1)}38%{transform:scale(1.9)}100%{transform:scale(1)}}
/* ademen zolang er nog niets gekozen is */
.sb8-rf:not(.is-active) .sb8-rf__node i{animation:sb8-rf-breathe 5.2s ease-in-out infinite}
@keyframes sb8-rf-breathe{
  0%,100%{box-shadow:0 0 0 5px rgba(0,229,168,.10),0 0 18px 3px rgba(0,229,168,.34)}
  50%    {box-shadow:0 0 0 9px rgba(0,229,168,.07),0 0 30px 7px rgba(0,229,168,.52)}
}

/* ---------- de routekaart in afwachting ---------- */
/* De kaart staat precies om de node heen: het middelpunt van de kaart valt
   samen met het middelpunt van het vlak, zodat de vier routes echt uit de node
   lijken te komen. Het bijschrift hangt daaronder, buiten die stroom. */
.sb8-rf__idle{position:absolute;inset:0;display:block;
  transition:opacity .3s ease,transform .44s cubic-bezier(.22,.68,.28,1)}
.sb8-rf__map{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:block;width:min(100%,560px);aspect-ratio:560/300}
.sb8-rf__paths{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sb8-rf__p{fill:none;stroke:rgba(0,229,168,.26);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:sb8-rf-draw 1.5s cubic-bezier(.22,.68,.28,1) var(--d,0s) forwards}
@keyframes sb8-rf-draw{to{stroke-dashoffset:0}}
.sb8-rf__hint{position:absolute;left:var(--x);top:var(--y);width:58px;height:40px;
  margin:-20px 0 0 -29px;display:block;font-style:normal;
  opacity:0;animation:sb8-rf-hint 1.1s ease var(--d,0s) forwards,
                      sb8-rf-drift 9s ease-in-out var(--d,0s) infinite}
@keyframes sb8-rf-hint{to{opacity:.8}}
@keyframes sb8-rf-drift{0%,100%{translate:0 0}50%{translate:0 -2px}}
.sb8-rf__hint b,.sb8-rf__hint u{display:block;text-decoration:none}
/* website: een klein browservenster */
.sb8-rf__hint[data-hint="web"]{border:1px solid rgba(168,188,216,.26);border-radius:4px;
  padding:4px 5px;background:rgba(255,255,255,.015)}
.sb8-rf__hint[data-hint="web"] b{height:1px;background:rgba(168,188,216,.3);margin-bottom:6px}
.sb8-rf__hint[data-hint="web"] u{height:4px;border-radius:1px;background:rgba(168,188,216,.2);margin-top:4px}
.sb8-rf__hint[data-hint="web"] u:last-child{width:52%;background:rgba(0,229,168,.34)}
/* meta: drie gestapelde creatives */
.sb8-rf__hint[data-hint="ads"]{position:absolute}
.sb8-rf__hint[data-hint="ads"] b{position:absolute;width:32px;height:24px;border-radius:3px;
  border:1px solid rgba(168,188,216,.26);background:rgba(255,255,255,.015)}
.sb8-rf__hint[data-hint="ads"] b:nth-child(1){left:2px;top:9px}
.sb8-rf__hint[data-hint="ads"] b:nth-child(2){left:13px;top:5px;border-color:rgba(168,188,216,.2)}
.sb8-rf__hint[data-hint="ads"] b:nth-child(3){left:24px;top:1px;border-color:rgba(0,229,168,.34)}
/* automatisering: een pad met knopen */
.sb8-rf__hint[data-hint="flow"]::before{content:"";position:absolute;left:28.5px;top:6px;bottom:6px;
  width:1px;background:rgba(168,188,216,.26)}
.sb8-rf__hint[data-hint="flow"] b{position:absolute;left:24.5px;width:7px;height:7px;border-radius:50%;
  border:1px solid rgba(168,188,216,.34);background:#04101F}
.sb8-rf__hint[data-hint="flow"] b:nth-child(1){top:4px}
.sb8-rf__hint[data-hint="flow"] b:nth-child(2){top:17px;border-color:rgba(0,229,168,.44)}
.sb8-rf__hint[data-hint="flow"] b:nth-child(3){top:30px}
/* coaching: een verdelingslijn met een greep */
.sb8-rf__hint[data-hint="coach"]::before{content:"";position:absolute;left:4px;right:4px;top:19px;
  height:1px;background:rgba(168,188,216,.26)}
.sb8-rf__hint[data-hint="coach"] b{position:absolute;left:62%;top:15px;width:9px;height:9px;
  border-radius:50%;background:rgba(0,229,168,.44)}
.sb8-rf__idlecap{position:absolute;left:0;right:0;bottom:clamp(10px,2.2vh,22px);text-align:center;
  font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.22em;color:var(--jr-mute)}
.sb8-rf.is-active .sb8-rf__idle{opacity:0;transform:scale(.94)}

.sb8-rf__world{position:absolute;inset:clamp(16px,1.8vw,28px);display:flex;align-items:center;
  justify-content:center;opacity:0;pointer-events:none;
  transform:scaleY(.82) scaleX(.94);transform-origin:center;
  transition:opacity .3s ease,transform .5s cubic-bezier(.22,.68,.28,1)}
.sb8-rf__world.is-live{opacity:1;transform:none;pointer-events:auto}
.sb8-rf__world.is-leave{opacity:0;transform:scaleY(.82) scaleX(.94)}
.sb8-rf__inline{display:none}

/* het gedeelde streepjeslabel onderin elke wereld */
.sb8-w{position:relative;display:block;width:100%;height:100%}
.sb8-w__tag{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  justify-content:center;gap:8px;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.18em}
.sb8-w__tag s{text-decoration:none;color:var(--jr-mute);opacity:.6}
.sb8-w__tag b{color:var(--jr-sig)}
.sb8-w__tag i{width:14px;height:1px;background:rgba(168,188,216,.35)}

/* ---------- switcher ---------- */
.sb8-jr__bar{position:sticky;top:var(--sb-headh,64px);z-index:6;
  background:rgba(4,16,31,.86);backdrop-filter:blur(10px);
  border-top:1px solid var(--jr-line);border-bottom:1px solid var(--jr-line)}
.sb8-jr__bar .sb8-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:9px;padding-bottom:9px}
.sb8-jr__tabs{position:relative;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.sb8-jr__tabs::-webkit-scrollbar{display:none}
.sb8-jr__grip{position:absolute;left:0;top:0;z-index:0;opacity:0;border-radius:8px;
  background:var(--jr-sig);pointer-events:none;
  transition:transform .44s cubic-bezier(.22,.68,.28,1),width .44s cubic-bezier(.22,.68,.28,1)}
.sb8-jr__tab{position:relative;z-index:1;flex:none;padding:8px 14px;border:0;background:transparent;
  cursor:pointer;border-radius:8px;font-family:var(--sb8-mono);font-size:10px;letter-spacing:.16em;
  color:var(--jr-mute);transition:color .28s ease}
.sb8-jr__tab:hover{color:#fff}
.sb8-jr__tab[aria-selected="true"]{color:#04101F}
.sb8-jr__tab:focus-visible{outline:2px solid var(--jr-sig);outline-offset:2px}
.sb8-jr__now{margin:0;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.18em;
  color:var(--jr-mute);opacity:0;position:absolute;pointer-events:none}

/* ---------- de routes ---------- */
.sb8-jr__routes{position:relative}
.sb8-jr__route{position:relative;padding:clamp(40px,7vh,90px) 0 clamp(30px,5vh,70px)}
.sb8-jr.is-live .sb8-jr__route[hidden]{display:none}
.sb8-jr__route.is-out{opacity:.35;transform:scale(.985);
  transition:opacity .18s ease,transform .18s cubic-bezier(.4,0,.6,1)}
.sb8-jr__route.is-in{animation:sb8-jr-in .58s cubic-bezier(.22,.68,.28,1) both}
@keyframes sb8-jr-in{0%{opacity:0;clip-path:inset(0 0 14% 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}

.sb8-jr__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.sb8-jr__trail{stroke:var(--jr-line);stroke-width:1.5;stroke-linecap:round}
.sb8-jr__line{stroke:var(--jr-sig);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(0,229,168,.45))}
.sb8-jr__node{position:absolute;left:0;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  z-index:2;opacity:0;pointer-events:none;will-change:transform}
.sb8-jr__node i{position:absolute;inset:0;border-radius:50%;background:var(--jr-sig);
  box-shadow:0 0 0 5px rgba(0,229,168,.14),0 0 20px 3px rgba(0,229,168,.5)}
.sb8-jr__node.is-pulse i{animation:sb8-jr-pulse .62s cubic-bezier(.22,.68,.28,1)}
@keyframes sb8-jr-pulse{0%{transform:scale(1)}38%{transform:scale(1.85)}100%{transform:scale(1)}}

/* ---------- stops ---------- */
.sb8-jr__stop{position:relative;z-index:1;display:grid;gap:clamp(20px,3vw,46px);
  align-items:center;padding:clamp(26px,5vh,64px) 0;
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.68,.28,1)}
.sb8-jr.is-live .sb8-jr__stop[data-on="0"]{opacity:0;transform:translateY(18px)}
.sb8-jr__stop[data-rest="1"]{opacity:.74}
.sb8-jr__anchor{position:absolute;left:0;top:50%;width:8px;height:8px;pointer-events:none}
@media (min-width:1024px){
  .sb8-jr__stop{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .sb8-jr__stop--one .sb8-jr__txt{order:1} .sb8-jr__stop--one .sb8-jr__viz{order:2}
  .sb8-jr__stop--two .sb8-jr__txt{order:2} .sb8-jr__stop--two .sb8-jr__viz{order:1}
  .sb8-jr__stop--three{grid-template-columns:minmax(0,1fr)}
  .sb8-jr__anchor{left:auto;right:auto}
  .sb8-jr__stop--one .sb8-jr__anchor{left:9%}
  .sb8-jr__stop--two .sb8-jr__anchor{left:56%}
  .sb8-jr__stop--three .sb8-jr__anchor{left:17%}
}
.sb8-jr__step{margin:0 0 12px;font-family:var(--sb8-mono);font-size:10px;letter-spacing:.2em;color:var(--jr-sig)}
.sb8-jr__h2{margin:0 0 14px;font-family:var(--sb8-display,var(--sb8-sans));font-weight:700;
  font-size:clamp(26px,3.6vw,52px);line-height:1.04;letter-spacing:-.03em;max-width:18ch}
.sb8-jr__p{margin:0;max-width:44ch;font-size:clamp(15px,1.25vw,18px);line-height:1.62;color:var(--jr-mute)}
.sb8-jr__ill{margin:18px 0 0;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.2em;
  color:var(--jr-mute);opacity:.65}
.sb8-jr__viz{min-width:0;display:flex;justify-content:center;align-items:center}

/* uitkomsten */
.sb8-jr__out{list-style:none;margin:clamp(16px,2.4vh,26px) 0 clamp(24px,3.4vh,38px);padding:0;
  display:grid;gap:1px;background:var(--jr-line);border-top:1px solid var(--jr-line);
  border-bottom:1px solid var(--jr-line)}
@media (min-width:860px){ .sb8-jr__out{grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--jr-line);border-radius:14px;overflow:hidden} }
.sb8-jr__out li{background:var(--sb8-ink,#04101F);padding:clamp(16px,2vw,26px);
  display:grid;gap:10px;align-content:start;
  font-family:var(--sb8-display,var(--sb8-sans));font-weight:600;
  font-size:clamp(17px,1.7vw,23px);line-height:1.18;letter-spacing:-.015em}
.sb8-jr__out li span{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.16em;
  font-weight:400;color:var(--jr-sig)}
.sb8-jr.is-live .sb8-jr__stop[data-on="1"] .sb8-jr__out li{animation:sb8-jr-rise .5s cubic-bezier(.22,.68,.28,1) both;
  animation-delay:var(--d,0ms)}
@keyframes sb8-jr-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sb8-jr__ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- stop 01 visuals ---------- */
.sb8-vz{position:relative;display:block;width:100%;max-width:440px;aspect-ratio:4/3}
.sb8-vz--scatter .sb8-vz__set{position:absolute;inset:0;transition:opacity .7s ease}
.sb8-vz--scatter [data-vz="mess"] i{position:absolute;border-radius:4px;background:rgba(168,188,216,.16);
  border:1px solid rgba(168,188,216,.22);
  width:calc(16% + (var(--n) * 3%));height:calc(9% + (var(--n) * 1.2%));
  left:calc((var(--n) * 37% ) - (var(--n) * 28%) + 6%);
  top:calc((var(--n) * 29%) - (var(--n) * 20%) + 4%);
  transform:rotate(calc((var(--n) - 5) * 2.2deg))}
.sb8-vz--scatter [data-vz="order"]{opacity:0;display:grid;gap:9px;align-content:center;padding:0 8%}
.sb8-vz__lane{height:16%;border-radius:5px;background:rgba(168,188,216,.14);
  border:1px solid rgba(168,188,216,.22)}
.sb8-vz__lane--cta{background:rgba(0,229,168,.2);border-color:rgba(0,229,168,.5);width:52%}
.sb8-jr__stop[data-on="1"] .sb8-vz--scatter [data-vz="mess"]{opacity:0}
.sb8-jr__stop[data-on="1"] .sb8-vz--scatter [data-vz="order"]{opacity:1;transition-delay:.25s}
.sb8-vz__cap{position:absolute;left:0;right:0;bottom:-4px;display:flex;justify-content:space-between;
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.18em}
.sb8-vz__cap s{text-decoration:none;color:var(--jr-mute);opacity:.6}
.sb8-vz__cap b{color:var(--jr-sig)}

/* ---------- stop 02 mini Build Lab ---------- */
.sb8-dm{position:relative;display:block;width:100%;max-width:520px}
.sb8-dm__rail{display:block;height:2px;border-radius:2px;background:var(--jr-line);overflow:hidden;margin-bottom:20px}
.sb8-dm__rail i{display:block;height:100%;width:var(--dmf,0%);background:var(--jr-sig);
  border-radius:2px;transition:width .3s linear}
.sb8-dm__stage{position:relative;display:block;aspect-ratio:16/11}
.sb8-dm__frame{position:absolute;left:0;top:0;width:78%;height:88%;border-radius:10px;
  border:1px solid rgba(168,188,216,.24);background:rgba(9,22,38,.9);overflow:hidden;
  box-shadow:0 30px 60px -40px #000;
  transition:transform .7s cubic-bezier(.22,.68,.28,1),width .7s cubic-bezier(.22,.68,.28,1)}
.sb8-dm__bar{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid rgba(168,188,216,.16)}
.sb8-dm__bar i{width:5px;height:5px;border-radius:50%;background:rgba(168,188,216,.3)}
.sb8-dm__body{display:grid;gap:6px;padding:10px}
.sb8-dm__b{display:block;border-radius:4px;background:rgba(168,188,216,.13);
  transition:background .6s ease,height .6s cubic-bezier(.22,.68,.28,1)}
.sb8-dm__b--nav{height:8px;width:46%}
.sb8-dm__b--hero{height:38px}
.sb8-dm__b--row{height:12px}
.sb8-dm__b--cta{height:12px;width:38%;background:rgba(0,229,168,.24)}
.sb8-dm__phone{position:absolute;right:2%;bottom:0;width:21%;aspect-ratio:.5;border-radius:12px;
  border:1px solid rgba(168,188,216,.26);background:rgba(9,22,38,.95);overflow:hidden;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,.68,.28,1)}
.sb8-dm__phone .sb8-dm__body{padding:7px;gap:5px}
.sb8-dm__pin{position:absolute;left:6%;bottom:6%;display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;background:rgba(0,229,168,.14);
  border:1px solid rgba(0,229,168,.42);font-family:var(--sb8-mono);font-size:9px;letter-spacing:.16em;
  color:var(--jr-sig);opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s ease}
.sb8-dm__pin i{width:6px;height:6px;border-radius:50%;background:var(--jr-sig)}
.sb8-dm__steps{display:flex;justify-content:space-between;gap:8px;margin-top:18px}
.sb8-dm__steps b{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.14em;color:var(--jr-mute);
  opacity:.45;transition:opacity .35s ease,color .35s ease}
.sb8-dm__steps b[data-live="1"]{opacity:1;color:var(--jr-sig)}
/* de vier standen van de demo */
.sb8-dm[data-s="1"] .sb8-dm__b,.sb8-dm[data-s="2"] .sb8-dm__b,.sb8-dm[data-s="3"] .sb8-dm__b{background:rgba(168,188,216,.2)}
.sb8-dm[data-s="1"] .sb8-dm__b--hero,.sb8-dm[data-s="2"] .sb8-dm__b--hero,.sb8-dm[data-s="3"] .sb8-dm__b--hero{
  background:linear-gradient(120deg,rgba(168,188,216,.3),rgba(168,188,216,.12))}
.sb8-dm[data-s="2"] .sb8-dm__frame,.sb8-dm[data-s="3"] .sb8-dm__frame{width:70%;transform:translateX(-2%)}
.sb8-dm[data-s="2"] .sb8-dm__phone,.sb8-dm[data-s="3"] .sb8-dm__phone{opacity:1;transform:none}
.sb8-dm[data-s="3"] .sb8-dm__pin{opacity:1;transform:none}
.sb8-dm[data-s="3"] .sb8-dm__b--cta{background:rgba(0,229,168,.5)}

/* ---------- zonder JavaScript: alles gewoon leesbaar ---------- */
.sb8-jr:not(.is-live) .sb8-jr__bar{display:none}
.sb8-jr:not(.is-live) .sb8-jr__route{border-top:1px solid var(--jr-line)}
.sb8-jr:not(.is-live) .sb8-jr__svg,.sb8-jr:not(.is-live) .sb8-jr__node{display:none}

/* ---------- mobiel: eigen ontwerp ---------- */
@media (max-width:1023.98px){
  .sb8-jr__land{padding:clamp(44px,7vh,70px) 0 clamp(28px,4vh,44px)}
  .sb8-jr__h1{font-size:clamp(32px,9vw,46px);max-width:13ch}
  .sb8-jr__sub{margin-bottom:clamp(26px,4vh,36px)}
  .sb8-jr__opt{grid-template-columns:auto minmax(0,1fr) auto;gap:12px 14px;padding:17px 0;
    align-items:start}
  .sb8-jr__opt u{padding-top:4px}
  .sb8-jr__opt b{font-size:19px;grid-column:2}
  .sb8-jr__opt em{grid-column:2;grid-row:2;margin-top:6px}
  .sb8-jr__opt s{grid-row:1/3;align-self:center}
  .sb8-jr__opt:hover{padding-left:0}
  .sb8-jr__route{padding:26px 0 20px}
  .sb8-jr__stop{padding:22px 0 22px 30px;gap:18px}
  .sb8-jr__anchor{left:0;top:26px}
  .sb8-jr__h2{font-size:clamp(23px,6.4vw,30px);max-width:none}
  .sb8-jr__viz{justify-content:flex-start}
  .sb8-vz,.sb8-dm{max-width:none}
  .sb8-jr__out{margin-left:0}
  .sb8-jr__bar .sb8-wrap{padding-top:7px;padding-bottom:7px}
  .sb8-dm__steps b{font-size:8px;letter-spacing:.08em}
}
@media (max-width:430px){
  .sb8-jr__h1{font-size:clamp(29px,8.6vw,38px)}
  .sb8-jr__opt b{font-size:17.5px}
  .sb8-jr__stop{padding-left:26px}
  .sb8-dm__steps{gap:4px}
}

/* ---------- rustige stand ---------- */
@media (prefers-reduced-motion:reduce){
  .sb8-jr__seed i::after{animation:none}
  .sb8-jr.is-live .sb8-jr__stop[data-on="0"]{opacity:1;transform:none}
  .sb8-jr__stop[data-rest="1"]{opacity:1}
  .sb8-jr__route.is-in{animation:none}
  .sb8-jr__node.is-pulse i{animation:none}
  .sb8-jr.is-live .sb8-jr__stop[data-on="1"] .sb8-jr__out li{animation:none}
  .sb8-jr__opt,.sb8-jr__grip,.sb8-dm__frame,.sb8-dm__phone,.sb8-dm__pin,
  .sb8-vz--scatter .sb8-vz__set{transition:none}
}

/* De koppen erven anders de donkere themakleur voor h1 en h2. */
.sb8-jr .sb8-jr__h1,.sb8-jr .sb8-jr__h2{color:#fff}
.sb8-jr .sb8-jr__sub,.sb8-jr .sb8-jr__p{color:var(--jr-mute)}
.sb8-jr .sb8-jr__out li{color:#fff}

/* De stops stonden buiten het raster: zelfde breedte en goot als sb8-wrap. */
.sb8-jr__stop{width:100%;max-width:var(--sb8-wrap);margin-inline:auto;
  padding-inline:var(--sb8-gutter)}
.sb8-jr__route{max-width:100%;overflow-x:clip}

/* Stop 01 visual iets steviger, hij verdween tegen het donkere canvas. */
.sb8-vz--scatter [data-vz="mess"] i{background:rgba(168,188,216,.2);border-color:rgba(168,188,216,.3)}
.sb8-vz__lane{background:rgba(168,188,216,.2);border-color:rgba(168,188,216,.34);height:19%}
.sb8-vz__lane--cta{background:rgba(0,229,168,.26);border-color:rgba(0,229,168,.6)}
.sb8-vz{max-width:400px;margin-inline:auto}
@media (max-width:1023.98px){ .sb8-vz{margin-inline:0} }

/* ---------- landingstaat, mobiel: verticaal, geen 2x2 ---------- */
@media (max-width:899.98px){
  .sb8-jr__land{padding:clamp(30px,5vh,48px) 0 clamp(26px,4vh,40px)}
  .sb8-jr__h1{font-size:clamp(29px,7.6vw,40px);max-width:15ch}
  .sb8-jr__sub{font-size:15px}
  .sb8-jr__pick{border-radius:14px}
  .sb8-jr__opt{padding:17px 16px 16px;min-height:104px;
    grid-template-columns:auto minmax(0,1fr);column-gap:13px}
  /* volgorde op mobiel: nummer, probleem, toelichting, dienstlabel, pijl */
  .sb8-jr__opt u{grid-row:1;grid-column:1;margin:0;padding-top:3px}
  .sb8-jr__opt b{grid-row:1;grid-column:2;font-size:18.5px}
  .sb8-jr__help{grid-row:2;grid-column:2;margin-top:7px;font-size:13.5px}
  .sb8-jr__opt em{grid-row:3;grid-column:2;margin-top:11px}
  .sb8-jr__go{grid-row:4;grid-column:2;opacity:1;transform:none;margin-top:11px;font-size:13px}
  .sb8-jr__opt:hover{transform:none;box-shadow:none}
  .sb8-jr__opt:hover b{transform:none}
  .sb8-jr__guide{display:none}
  .sb8-jr__pin{left:14px}
}
@media (max-width:430px){
  .sb8-jr__h1{font-size:clamp(26px,7.4vw,33px)}
  .sb8-jr__opt b{font-size:17.5px}
  .sb8-jr__opt{padding:15px 14px 14px}
}
@media (prefers-reduced-motion:reduce){
  .sb8-jr__seed i::after{animation:none}
  .sb8-jr__pin,.sb8-jr__guide path,.sb8-jr__opt,.sb8-jr__opt b,.sb8-jr__go{transition:none}
  .sb8-jr__pin.is-land i{animation:none}
  .sb8-jr__go{opacity:1;transform:none}
}

/* ============================================================
   ROUTE FINDER — de vier werelden
   ============================================================ */

/* 01 WEBSITE: van versnipperd naar één route */
.sb8-w--web{display:flex;align-items:center;justify-content:center;gap:14px;padding-bottom:22px}
.sb8-web__frame{position:relative;display:block;width:min(100%,340px);border-radius:9px;overflow:hidden;
  border:1px solid rgba(168,188,216,.24);background:#0B1A2B;
  box-shadow:0 26px 54px -36px #000;transition:width .66s cubic-bezier(.22,.68,.28,1)}
.sb8-web__bar{display:flex;align-items:center;gap:5px;padding:7px 9px;background:rgba(255,255,255,.045);
  border-bottom:1px solid rgba(168,188,216,.16)}
.sb8-web__bar i{width:4.5px;height:4.5px;border-radius:50%;background:rgba(168,188,216,.35)}
.sb8-web__bar b{margin-left:6px;font-family:var(--sb8-mono);font-size:7.5px;letter-spacing:.1em;
  color:rgba(168,188,216,.6)}
.sb8-web__nav{display:flex;align-items:center;gap:9px;padding:9px 11px;
  border-bottom:1px solid rgba(168,188,216,.1)}
.sb8-web__mark{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;color:#fff;
  margin-right:auto;letter-spacing:-.01em}
.sb8-web__mark s{width:9px;height:9px;border-radius:2px;background:var(--jr-sig);text-decoration:none}
.sb8-web__nav em{font-style:normal;font-size:7.5px;color:rgba(168,188,216,.62)}
.sb8-web__hero{display:block;padding:14px 11px 13px}
.sb8-web__hero>b{display:block;font-family:var(--sb8-display,var(--sb8-sans));font-weight:700;
  font-size:17px;line-height:1.08;letter-spacing:-.028em;color:#fff}
.sb8-web__hero>em{display:block;margin-top:6px;font-style:normal;font-size:8.5px;line-height:1.45;
  color:rgba(168,188,216,.72)}
.sb8-web__row{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.sb8-web__cta{display:inline-block;padding:5px 9px;border-radius:4px;font-size:7.5px;font-weight:600;
  text-decoration:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.68,.28,1),
              background .5s ease,color .5s ease,max-width .5s ease}
.sb8-web__cta--x{background:rgba(168,188,216,.16);color:rgba(234,242,252,.85)}
.sb8-web__cta--main{background:rgba(168,188,216,.22);color:#fff}
.sb8-web__band{display:block;height:46px;margin:2px 11px 0;border-radius:5px;
  background:linear-gradient(118deg,rgba(0,229,168,.18),rgba(122,168,255,.16) 55%,rgba(168,188,216,.1))}
.sb8-web__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px 11px 0}
.sb8-web__cards i{height:21px;border-radius:4px;background:rgba(168,188,216,.13)}
.sb8-web__foot{display:flex;gap:6px;padding:9px 11px 12px}
.sb8-web__phone{position:relative;display:block;width:88px;flex:none;border-radius:11px;overflow:hidden;
  border:1px solid rgba(168,188,216,.26);background:#0B1A2B;padding:7px;
  opacity:0;transform:translateX(-18px) scale(.9);
  transition:opacity .5s ease,transform .62s cubic-bezier(.22,.68,.28,1)}
.sb8-web__pnav{display:flex;padding-bottom:6px}
.sb8-web__pnav s{width:8px;height:8px;border-radius:2px;background:var(--jr-sig);text-decoration:none}
.sb8-web__phero b{display:block;font-size:10px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:#fff}
.sb8-web__pband{display:block;height:40px;margin-top:6px;border-radius:4px;
  background:linear-gradient(118deg,rgba(0,229,168,.18),rgba(122,168,255,.16))}
.sb8-web__pcta{display:block;margin-top:6px;padding:5px 0;border-radius:4px;text-align:center;
  font-size:7.5px;font-weight:700;background:rgba(168,188,216,.2);color:#fff;transition:background .5s ease,color .5s ease}
/* de opgeruimde eindstand */
.sb8-rf__world.is-live .sb8-w--web .sb8-web__cta--x{opacity:0;transform:scale(.86);max-width:0;
  padding-left:0;padding-right:0;margin:0;overflow:hidden}
.sb8-rf__world.is-live .sb8-w--web .sb8-web__frame{width:min(100%,258px)}
.sb8-rf__world.is-live .sb8-w--web .sb8-web__phone{opacity:1;transform:none}
.sb8-rf__world.is-live .sb8-w--web .sb8-web__cta--main{background:var(--jr-sig);color:#04101F}
.sb8-rf__world.is-live .sb8-w--web .sb8-web__pcta{background:var(--jr-sig);color:#04101F}

/* 02 META: creatives, verdict, acquisitieroute */
.sb8-w--ads{display:grid;grid-template-columns:1fr auto;gap:clamp(14px,1.6vw,26px);
  align-items:center;padding-bottom:22px}
.sb8-ads__deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.sb8-ads__cr{position:relative;display:block;border-radius:6px;padding:6px;
  border:1px solid rgba(168,188,216,.22);background:rgba(255,255,255,.04);
  opacity:0;transform:translateY(10px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,.68,.28,1),
             border-color .45s ease,filter .45s ease}
.sb8-rf__world.is-live .sb8-ads__cr{opacity:1;transform:none;transition-delay:calc(var(--n) * 70ms)}
.sb8-ads__img{display:block;height:34px;border-radius:3px;
  background:linear-gradient(125deg,rgba(122,168,255,.3),rgba(0,229,168,.18))}
.sb8-ads__cr:nth-child(2) .sb8-ads__img{background:linear-gradient(125deg,rgba(255,122,26,.3),rgba(122,168,255,.18))}
.sb8-ads__cr:nth-child(3) .sb8-ads__img{background:linear-gradient(125deg,rgba(0,229,168,.3),rgba(255,255,255,.14))}
.sb8-ads__cr:nth-child(4) .sb8-ads__img{background:linear-gradient(125deg,rgba(168,188,216,.26),rgba(122,168,255,.14))}
.sb8-ads__cr:nth-child(5) .sb8-ads__img{background:linear-gradient(125deg,rgba(200,102,74,.3),rgba(168,188,216,.14))}
.sb8-ads__cr b{display:block;margin-top:5px;font-family:var(--sb8-mono);font-size:7px;
  letter-spacing:.1em;color:rgba(234,242,252,.75)}
.sb8-ads__flag{position:absolute;top:5px;right:5px;padding:2px 5px;border-radius:3px;
  font-family:var(--sb8-mono);font-size:6px;letter-spacing:.1em;text-decoration:none;
  opacity:0;transition:opacity .4s ease}
.sb8-ads__flag::after{content:attr(data-t)}
.sb8-ads__cr[data-verd="stop"] .sb8-ads__flag{background:rgba(255,255,255,.14);color:rgba(234,242,252,.8)}
.sb8-ads__cr[data-verd="stop"] .sb8-ads__flag::after{content:"STOP"}
.sb8-ads__cr[data-verd="door"] .sb8-ads__flag{background:var(--jr-sig);color:#04101F}
.sb8-ads__cr[data-verd="door"] .sb8-ads__flag::after{content:"DOORTESTEN"}
.sb8-rf__world.is-live .sb8-ads__flag{opacity:1;transition-delay:.6s}
.sb8-rf__world.is-live .sb8-ads__cr[data-verd="stop"]{filter:grayscale(1);opacity:.34;
  transition-delay:calc(var(--n) * 70ms + .62s)}
.sb8-rf__world.is-live .sb8-ads__cr[data-verd="door"]{border-color:rgba(0,229,168,.6)}
.sb8-ads__route{position:relative;display:grid;gap:22px;padding-left:17px;align-content:center}
.sb8-ads__line{position:absolute;left:4px;top:6px;bottom:6px;width:1.5px;
  background:rgba(168,188,216,.2);border-radius:2px;overflow:hidden}
.sb8-ads__line s{position:absolute;left:0;right:0;top:0;height:0;background:var(--jr-sig);
  transition:height .9s cubic-bezier(.3,.7,.3,1) .65s}
.sb8-rf__world.is-live .sb8-ads__line s{height:100%}
.sb8-ads__stop{position:relative;display:block}
.sb8-ads__stop::before{content:"";position:absolute;left:-17px;top:3px;width:9px;height:9px;
  border-radius:50%;border:1.5px solid rgba(168,188,216,.34);background:#04101F;
  transition:border-color .4s ease,background .4s ease}
.sb8-ads__stop b{font-family:var(--sb8-mono);font-size:8px;letter-spacing:.16em;
  color:rgba(168,188,216,.62);transition:color .4s ease}
.sb8-rf__world.is-live .sb8-ads__stop::before{border-color:var(--jr-sig);background:var(--jr-sig);
  transition-delay:calc(.7s + var(--i) * .3s)}
.sb8-rf__world.is-live .sb8-ads__stop b{color:#fff;transition-delay:calc(.7s + var(--i) * .3s)}

/* 03 AUTOMATISERING: workflow met menselijke controle */
.sb8-w--flow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.8vw,30px);
  align-items:center;padding-bottom:22px}
.sb8-flw__col{position:relative;display:grid;gap:clamp(12px,1.5vh,19px);padding-left:20px}
.sb8-flw__rail{position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;border-radius:2px;
  background:rgba(168,188,216,.2);overflow:hidden}
.sb8-flw__rail s{position:absolute;left:0;right:0;top:0;height:0;background:var(--jr-sig);
  transition:height 1.5s cubic-bezier(.4,.1,.4,1) .35s}
.sb8-rf__world.is-live .sb8-flw__rail s{height:100%}
.sb8-flw__st{position:relative;display:flex;align-items:center;gap:9px}
.sb8-flw__dot{position:absolute;left:-20px;width:11px;height:11px;border-radius:50%;
  border:1.5px solid rgba(168,188,216,.34);background:#04101F;
  transition:border-color .4s ease,background .4s ease,box-shadow .4s ease}
.sb8-flw__st b{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.16em;
  color:rgba(168,188,216,.6);transition:color .4s ease}
.sb8-rf__world.is-live .sb8-flw__st .sb8-flw__dot{border-color:var(--jr-sig);background:var(--jr-sig);
  transition-delay:calc(.4s + var(--i) * .34s)}
.sb8-rf__world.is-live .sb8-flw__st b{color:#fff;transition-delay:calc(.4s + var(--i) * .34s)}
.sb8-rf__world.is-live .sb8-flw__st[data-st="2"] .sb8-flw__dot{box-shadow:0 0 0 5px rgba(0,229,168,.16)}
.sb8-flw__check{display:block;padding:11px 13px;border-radius:9px;
  border:1px solid rgba(0,229,168,.42);background:rgba(0,229,168,.08);
  opacity:0;transform:translateX(16px);
  transition:opacity .44s ease .95s,transform .56s cubic-bezier(.22,.68,.28,1) .95s}
.sb8-rf__world.is-live .sb8-flw__check{opacity:1;transform:none}
.sb8-flw__check b{display:block;font-family:var(--sb8-mono);font-size:8px;letter-spacing:.16em;color:var(--jr-sig)}
.sb8-flw__check em{display:block;margin-top:6px;font-style:normal;font-size:11px;line-height:1.45;
  color:rgba(234,242,252,.8)}
.sb8-flw__check u{display:inline-block;margin-top:9px;padding:3px 8px;border-radius:4px;
  text-decoration:none;font-family:var(--sb8-mono);font-size:7px;letter-spacing:.14em;
  background:var(--jr-sig);color:#04101F;opacity:0;transition:opacity .4s ease 1.7s}
.sb8-rf__world.is-live .sb8-flw__check u{opacity:1}

/* 04 COACHING: verdeling van het werk */
.sb8-w--coach{display:flex;flex-direction:column;justify-content:center;
  gap:clamp(18px,2.6vh,32px);padding-bottom:22px}
.sb8-co__scale{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px}
.sb8-co__scale s,.sb8-co__scale b{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.16em;
  text-decoration:none;white-space:nowrap}
.sb8-co__scale s{color:var(--jr-mute);opacity:.7}
.sb8-co__scale b{color:var(--jr-sig)}
.sb8-co__track{position:relative;display:block;height:2px;border-radius:2px;background:rgba(168,188,216,.24)}
.sb8-co__track u{position:absolute;top:50%;left:14%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:var(--jr-sig);text-decoration:none;
  box-shadow:0 0 0 5px rgba(0,229,168,.14);
  transition:left 1.6s cubic-bezier(.4,.1,.4,1) .4s}
.sb8-rf__world.is-live .sb8-co__track u{left:76%}
.sb8-co__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px)}
.sb8-co__col{display:grid;gap:7px;align-content:start}
.sb8-co__col em{font-style:normal;font-family:var(--sb8-mono);font-size:8px;letter-spacing:.2em;
  color:var(--jr-mute);opacity:.7;margin-bottom:2px}
.sb8-co__col[data-co-side="sb"] em{color:var(--jr-sig);opacity:1}
.sb8-co__col i{display:block;font-style:normal;padding:7px 10px;border-radius:6px;font-size:11.5px;
  border:1px solid rgba(168,188,216,.2);background:rgba(255,255,255,.035);color:rgba(234,242,252,.85);
  transition:transform .7s cubic-bezier(.22,.68,.28,1),opacity .5s ease,
             border-color .5s ease,background .5s ease}
/* twee taken schuiven tijdens de beweging van JIJ naar ScaleBusiness */
.sb8-rf__world.is-live .sb8-co__col[data-co-side="jij"] i[data-co-item="1"],
.sb8-rf__world.is-live .sb8-co__col[data-co-side="jij"] i[data-co-item="2"]{
  transform:translateX(calc(100% + clamp(12px,1.4vw,22px)));
  border-color:rgba(0,229,168,.42);background:rgba(0,229,168,.09)}
.sb8-rf__world.is-live .sb8-co__col[data-co-side="jij"] i[data-co-item="1"]{transition-delay:.9s}
.sb8-rf__world.is-live .sb8-co__col[data-co-side="jij"] i[data-co-item="2"]{transition-delay:1.2s}
.sb8-rf__world.is-live .sb8-co__col[data-co-side="sb"] i{border-color:rgba(0,229,168,.3);
  background:rgba(0,229,168,.06)}

/* ---------- Route Finder op mobiel: eigen concept, accordeon ---------- */
@media (max-width:999.98px){
  .sb8-jr__land{padding:clamp(22px,3.4vh,36px) 0 clamp(22px,3vh,34px)}
  .sb8-jr__h1{font-size:clamp(27px,7.2vw,36px);max-width:14ch}
  .sb8-jr__sub{font-size:14.5px;margin-top:11px}
  .sb8-rf__split{margin-top:18px}
  .sb8-rf__stage{display:none}
  .sb8-rf__opt{padding:13px 0 12px}
  .sb8-rf__opt b{font-size:16px}
  .sb8-rf__help{font-size:12.5px}
  .sb8-rf__inline{display:block;grid-row:5;grid-column:2;
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .5s cubic-bezier(.22,.68,.28,1),opacity .34s ease,margin .4s ease}
  .sb8-rf__item.is-on .sb8-rf__inline{max-height:300px;opacity:1;margin-top:14px}
  .sb8-rf__inline .sb8-w{height:240px;padding-bottom:20px}
  .sb8-rf__inline .sb8-w--web{gap:9px}
  .sb8-rf__inline .sb8-web__frame{width:min(100%,205px)}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-web__frame{width:min(100%,160px)}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-web__cta--x{opacity:0;max-width:0;padding-left:0;padding-right:0;overflow:hidden}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-web__phone{opacity:1;transform:none}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-web__cta--main,
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-web__pcta{background:var(--jr-sig);color:#04101F}
  .sb8-rf__inline .sb8-web__phone{width:74px}
  .sb8-rf__inline .sb8-w--ads{grid-template-columns:1fr;gap:12px}
  .sb8-rf__inline .sb8-ads__route{display:flex;gap:16px;padding-left:0;padding-top:16px}
  .sb8-rf__inline .sb8-ads__line{left:4px;right:4px;top:4px;bottom:auto;width:auto;height:1.5px}
  .sb8-rf__inline .sb8-ads__line s{top:0;bottom:0;left:0;height:auto;width:0;transition:width .9s ease .5s}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-ads__line s{width:100%}
  .sb8-rf__inline .sb8-ads__stop::before{left:0;top:-16px}
  .sb8-rf__inline .sb8-w--flow{grid-template-columns:1fr;gap:11px}
  .sb8-rf__inline .sb8-flw__col{gap:9px}
  .sb8-rf__inline .sb8-w--coach{gap:14px}
  /* op mobiel draait de opbouw op is-on in plaats van is-live */
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-ads__cr{opacity:1;transform:none}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-ads__flag{opacity:1}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-ads__cr[data-verd="stop"]{filter:grayscale(1);opacity:.34}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-ads__cr[data-verd="door"]{border-color:rgba(0,229,168,.6)}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-flw__rail s{height:100%}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-flw__dot{border-color:var(--jr-sig);background:var(--jr-sig)}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-flw__st b{color:#fff}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-flw__check{opacity:1;transform:none}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-flw__check u{opacity:1}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-co__track u{left:76%}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-co__col[data-co-side="jij"] i[data-co-item="1"],
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-co__col[data-co-side="jij"] i[data-co-item="2"]{
    transform:translateX(calc(100% + clamp(12px,1.4vw,22px)));
    border-color:rgba(0,229,168,.42);background:rgba(0,229,168,.09)}
  .sb8-rf__inline .sb8-w__tag{font-size:7.5px;letter-spacing:.12em}
}
@media (max-width:430px){
  .sb8-jr__h1{font-size:clamp(24px,7vw,31px)}
  .sb8-rf__opt b{font-size:15px}
  .sb8-rf__inline .sb8-w{height:212px}
}
@media (prefers-reduced-motion:reduce){
  .sb8-rf__node,.sb8-rf__world,.sb8-rf__opt,.sb8-rf__help,.sb8-rf__go,.sb8-rf__edge,
  .sb8-web__frame,.sb8-web__phone,.sb8-web__cta,.sb8-ads__cr,.sb8-ads__line s,
  .sb8-flw__rail s,.sb8-flw__check,.sb8-co__track u,.sb8-co__col i{transition:none!important}
  .sb8-rf__node.is-land i{animation:none}
}

/* Het dockpunt van het signaal per wereld. Onzichtbaar: het bolletje komt hier
   terecht, zodat hetzelfde object per dienst een andere betekenis krijgt. */
.sb8-w__dock{position:absolute;left:50%;top:50%;width:1px;height:1px;pointer-events:none}
.sb8-web__cta--main{position:relative}
.sb8-ads__stop{position:relative}
.sb8-flw__st{position:relative}
.sb8-co__track u{position:absolute}

/* De header-CTA blijft op de homepage secundair, maar krijgt zijn eigen donkere
   ondergrond. Eerder erfde hij de tekstkleur van de lichte headerstand, waardoor
   hij op donkere achtergrond bijna onleesbaar werd (gemeten rgb(5,38,29)).
   Nu staan kleur en ondergrond vast: groen op ink is 11,7:1, de rand 4,2:1. */
/* De specificiteit moet hoger liggen dan de bestaande regel voor de lichte
   headerstand, anders wint die met #05261D en valt de knop weg. */
html.sb8-home body .sb-header__cta,
html.sb8-home body .sb-header--light .sb-header__cta{
  background:#06121F!important;background-image:none!important;
  color:#00E5A8!important;border:1px solid rgba(0,229,168,.55)!important;
  box-shadow:none!important}
html.sb8-home body .sb-header__cta:hover,
html.sb8-home body .sb-header__cta:focus-visible,
html.sb8-home body .sb-header--light .sb-header__cta:hover,
html.sb8-home body .sb-header--light .sb-header__cta:focus-visible{
  background:#0A1E2E!important;color:#3DF2C0!important;border-color:#00E5A8!important}

/* ---------- Route Finder: dockpunten precies op het betekenisvolle punt ---------- */
/* De node ging eerst midden op de tekst staan. Nu dockt hij op het punt zelf
   (de bullet, de railstip) of er netjes naast (de groene hoofdknop). */
.sb8-web__cta--main .sb8-w__dock{left:calc(100% + 15px);top:50%}
.sb8-ads__stop .sb8-w__dock{left:-12.5px;top:7.5px}
.sb8-flw__st .sb8-w__dock{left:-14.5px;top:50%}

/* ---------- Route Finder coaching: taken schuiven naar lege plekken ---------- */
/* Eerder landden de verschoven taken bovenop bestaande taken. De rechterkolom
   heeft nu twee open plekken en de rijhoogte ligt vast, zodat de verschuiving
   exact op die plekken uitkomt. */
.sb8-co__cols{--co-row:31px;--co-gap:8px}
.sb8-co__col{grid-auto-rows:var(--co-row);gap:var(--co-gap)}
.sb8-co__col em{align-self:end}
.sb8-co__col i{display:flex;align-items:center;padding:0 10px}
.sb8-co__slot{display:block;border:1px dashed rgba(168,188,216,.18);border-radius:6px;
  opacity:0;transition:opacity .4s ease}
.sb8-rf__world.is-live .sb8-co__slot{opacity:1}
.sb8-rf__world.is-live .sb8-co__col[data-co-side="jij"] i[data-co-item="1"],
.sb8-rf__world.is-live .sb8-co__col[data-co-side="jij"] i[data-co-item="2"]{
  transform:translate(calc(100% + clamp(12px,1.4vw,22px)),
                      calc((var(--co-row) + var(--co-gap)) * 2))}

/* ============================================================
   ROUTE FINDER — laatste polish
   ============================================================ */

/* ---------- dockpunten: op het punt zelf, niet op de tekst ---------- */
.sb8-web__cta--main .sb8-w__dock{left:calc(100% + 15px);top:50%}
.sb8-ads__stop .sb8-w__dock{left:-12.5px;top:7.5px}
.sb8-flw__st .sb8-w__dock{left:-14.5px;top:50%}

/* ---------- coaching: taken schuiven naar twee open plekken ---------- */
.sb8-co__cols{--co-row:31px;--co-gap:8px}
.sb8-co__col{grid-auto-rows:var(--co-row);gap:var(--co-gap)}
.sb8-co__col em{align-self:end}
.sb8-co__col i{display:flex;align-items:center;padding:0 10px}
.sb8-co__slot{display:block;border:1px dashed rgba(168,188,216,.18);border-radius:6px;
  opacity:0;transition:opacity .4s ease}
.sb8-rf__world.is-live .sb8-co__slot{opacity:1}
.sb8-rf__world.is-live .sb8-co__col[data-co-side="jij"] i[data-co-item="1"],
.sb8-rf__world.is-live .sb8-co__col[data-co-side="jij"] i[data-co-item="2"]{
  transform:translate(calc(100% + clamp(12px,1.4vw,22px)),
                      calc((var(--co-row) + var(--co-gap)) * 2))}

/* ---------- mobiel: één geopende keuze is een eigen hoofdstuk ---------- */
@media (max-width:999.98px){
  /* zichtbaar teken dat er iets opent */
  .sb8-rf__opt{grid-template-columns:var(--rf-num) minmax(0,1fr) 18px;padding-right:2px}
  .sb8-rf__opt b{grid-column:2}
  .sb8-rf__opt em{grid-column:2}
  .sb8-rf__mark{display:block;grid-row:1;grid-column:3;align-self:start;justify-self:end;
    width:9px;height:9px;margin-top:8px;text-decoration:none;
    border-right:1.5px solid rgba(0,229,168,.55);border-bottom:1.5px solid rgba(0,229,168,.55);
    transform:rotate(45deg);transform-origin:60% 60%;
    transition:transform .3s cubic-bezier(.22,.68,.28,1),border-color .24s ease}
  .sb8-rf__item.is-on .sb8-rf__mark{transform:rotate(225deg);
    border-right-color:var(--jr-sig);border-bottom-color:var(--jr-sig)}

  .sb8-rf__item.is-on .sb8-rf__panel{max-height:760px}
  .sb8-rf__panelin{padding-bottom:16px}
  .sb8-rf__help{font-size:12.5px}

  /* de wereld hoort bij het hoofdstuk, niet bij een losse accordeonkaart */
  .sb8-rf__inline{display:block;grid-row:auto;grid-column:auto;
    max-height:none;overflow:visible;opacity:1;margin-top:14px}
  .sb8-rf__item.is-on .sb8-rf__inline{max-height:none;opacity:1;margin-top:14px}
  .sb8-rf__inline .sb8-w{height:auto;padding-bottom:0}
  .sb8-rf__inline .sb8-w__tag{position:static;margin-top:12px}
  /* een tweede telefoon náást een telefoon zegt niets */
  .sb8-rf__inline .sb8-w--web{display:block;gap:0}
  .sb8-rf__inline .sb8-web__phone{display:none}
  .sb8-rf__inline .sb8-web__frame,
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-web__frame{width:100%}
  .sb8-rf__inline .sb8-web__band{height:38px}
  .sb8-rf__inline .sb8-web__cards i{height:18px}
  /* dezelfde verschuiving naar de open plekken als op desktop */
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-co__col[data-co-side="jij"] i[data-co-item="1"],
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-co__col[data-co-side="jij"] i[data-co-item="2"]{
    transform:translate(calc(100% + clamp(12px,1.4vw,22px)),
                        calc((var(--co-row) + var(--co-gap)) * 2))}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-co__slot{opacity:1}

  /* de actie is een echte knop, geen verborgen tweede tik */
  .sb8-rf__go{display:flex;justify-content:center;width:100%;margin-top:16px;
    padding:13px 16px;border-radius:8px;font-size:14.5px;
    background:var(--jr-sig);color:#04101F}
  .sb8-rf__go s::before,.sb8-rf__go s::after{border-color:currentColor}
  .sb8-rf__go:active{transform:translateY(1px)}
}
@media (max-width:430px){
  .sb8-rf__opt b{font-size:15px}
  .sb8-rf__inline .sb8-w{height:auto}
}

/* ---------- reduced motion: alles direct in eindstand ---------- */
@media (prefers-reduced-motion:reduce){
  .sb8-rf__node,.sb8-rf__world,.sb8-rf__item,.sb8-rf__panel,.sb8-rf__go,.sb8-rf__edge,
  .sb8-rf__mark,.sb8-rf__idle{transition:none!important}
  .sb8-rf__node.is-land i,.sb8-rf:not(.is-active) .sb8-rf__node i{animation:none!important}
  .sb8-rf__p{animation:none!important;stroke-dashoffset:0!important}
  .sb8-rf__hint{animation:none!important;opacity:1!important}
}

/* ============================================================
   ROUTE FINDER — dienstkeuze eerst, landing geïsoleerd
   ============================================================ */

/* Zolang er geen route bevestigd is, is de homepage alleen een keuzescherm.
   Alles wat daarna komt blijft weg, zodat je er niet onderdoor kunt scrollen
   naar algemene content die nog nergens op slaat. Zonder JavaScript komt deze
   klasse er nooit op en staat alles gewoon leesbaar onder elkaar. */
.sb8-home.sb8-noroute .sb8-fin{display:none}

/* De dienstnaam is de hoofdkeuze en mag daarom wat zwaarder staan. */
.sb8-rf__opt b{font-weight:650}

/* De node vertrekt bij bevestiging: hij pulseert en zakt het vlak uit,
   de journey eronder neemt het over. */
.sb8-rf__node.is-go{opacity:0;transform:translate(0,180px) scale(.7);
  transition:transform .8s cubic-bezier(.4,.1,.4,1) .25s,opacity .6s ease .35s}

/* ---------- mobiel: de preview laat herkennen, niet uitleggen ---------- */
@media (max-width:999.98px){
  /* WEBSITE: compact venster met een kleine mobiele inzet ernaast. */
  /* Het onderschrift staat op mobiel in de stroom en zou anders als derde
     kolom náást het venster gaan staan. Daarom wrapt de rij en krijgt het
     onderschrift een eigen regel. */
  .sb8-rf__inline .sb8-w--web{display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px}
  .sb8-rf__inline .sb8-w--web .sb8-w__tag{flex:0 0 100%;order:9}
  .sb8-rf__inline .sb8-web__phone{display:block;width:70px;flex:none}
  /* min-width:0 is nodig: zonder dat weigert het venster te krimpen onder zijn
     eigen min-content breedte en loopt de hele rij buiten beeld. */
  .sb8-rf__inline .sb8-web__frame,
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-web__frame{width:auto;flex:1 1 0%;min-width:0}
  .sb8-rf__inline .sb8-w--web{min-width:0}
  .sb8-rf__inline .sb8-w{min-width:0;max-width:100%}
  .sb8-rf__inline .sb8-web__nav{gap:6px;flex-wrap:nowrap}
  .sb8-rf__inline .sb8-web__nav em{white-space:nowrap}
  .sb8-rf__inline .sb8-web__mark{white-space:nowrap}
  .sb8-rf__inline .sb8-web__cards,
  .sb8-rf__inline .sb8-web__foot{display:none}
  .sb8-rf__inline .sb8-web__band{height:26px;margin-bottom:9px}
  .sb8-rf__inline .sb8-web__hero{padding:11px 10px 10px}
  .sb8-rf__inline .sb8-web__pband{height:26px}

  /* META: drie creatives is genoeg om het idee te snappen. */
  .sb8-rf__inline .sb8-ads__cr:nth-child(n+4){display:none}
  .sb8-rf__inline .sb8-ads__img{height:28px}
  .sb8-rf__inline .sb8-ads__route{padding-top:13px}

  /* AUTOMATISERING: dezelfde stroom, strakker op elkaar. */
  .sb8-rf__inline .sb8-flw__col{gap:8px}
  .sb8-rf__inline .sb8-flw__check{padding:9px 11px}
  .sb8-rf__inline .sb8-flw__check p{margin-top:4px}

  /* COACHING: dezelfde schaal, lagere rijen. */
  .sb8-rf__inline .sb8-co__cols{--co-row:26px;--co-gap:6px}
  .sb8-rf__inline .sb8-w--coach{gap:11px}

  .sb8-rf__inline .sb8-w__tag{margin-top:10px}
  .sb8-rf__panelin{padding-bottom:14px}
  .sb8-rf__go{margin-top:13px}
}
@media (max-width:360px){
  /* op 320 px telt elke pixel: de inzet gaat eruit, de rest blijft staan */
  .sb8-rf__inline .sb8-web__phone{display:none}
  .sb8-rf__inline .sb8-w--web{display:block}
  .sb8-rf__inline .sb8-web__frame,
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-web__frame{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sb8-rf__node.is-go{transition:none!important}
}


/* ---------- landing draagt de eerste viewport ---------- */
/* Zonder dit begon de footer op desktop al op 741 px en voelde de homepage
   afgelopen voordat er iets gekozen was. Geen extra inhoud, alleen hoogte. */
@media (min-width:1000px){
  .sb8-home .sb8-jr__land{min-height:calc(100svh - 70px);display:flex;align-items:center}
  .sb8-home .sb8-jr__land > .sb8-wrap{width:100%}
}

/* ---------- de actieve wereld krijgt meer aanwezigheid ---------- */
/* Ongeveer 12% meer hoogte, een iets warmere rand en een zachte gloed eronder.
   Geen extra onderdelen, geen extra tekst: alleen gewicht. */
@media (min-width:1000px){
  .sb8-rf__stage{transition:min-height .5s cubic-bezier(.22,.68,.28,1),
                            border-color .4s ease,box-shadow .5s ease,background .4s ease}
  .sb8-rf.is-active .sb8-rf__stage{
    min-height:clamp(358px,49.5vh,506px);
    border-color:rgba(0,229,168,.2);
    background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.06),rgba(0,229,168,.025));
    box-shadow:0 34px 90px -58px rgba(0,229,168,.55)}
  .sb8-rf.is-active .sb8-rf__world{inset:clamp(14px,1.5vw,22px)}
}

/* ============================================================
   HOMEPAGE JOURNEY — zes stops, één geregisseerde route
   ============================================================ */

/* ---------- ritme: zes stops met een eigen compositie ---------- */
.sb8-jr__routes{position:relative}
.sb8-jr__route{position:relative;padding:0 0 clamp(20px,4vh,52px);max-width:100%;overflow-x:clip}

.sb8-jr__stop{position:relative;z-index:1;display:grid;
  gap:clamp(22px,3vw,52px);align-items:center;
  width:100%;max-width:var(--sb8-wrap);margin-inline:auto;
  padding-inline:var(--sb8-gutter);
  padding-block:clamp(56px,9vh,116px)}
.sb8-jr__anchor{position:absolute;left:9%;top:50%;width:8px;height:8px;pointer-events:none}

/* het hele stopvlak krijgt zijn eigen grond, buiten de goot om */
.sb8-jr__stop::before{content:"";position:absolute;left:50%;top:0;bottom:0;
  width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none}

@media (min-width:1000px){
  .sb8-jr__stop--a{grid-template-columns:minmax(0,1fr) minmax(0,1.14fr)}
  .sb8-jr__stop--b{grid-template-columns:minmax(0,1.14fr) minmax(0,1fr)}
  .sb8-jr__stop--b .sb8-jr__txt{order:2}
  .sb8-jr__stop--b .sb8-jr__scene{order:1}
  .sb8-jr__stop--b .sb8-jr__anchor{left:58%}
  .sb8-jr__stop--strip,.sb8-jr__stop--lab,.sb8-jr__fin{grid-template-columns:minmax(0,1fr)}
  .sb8-jr__stop--strip .sb8-jr__anchor{left:14%}
  .sb8-jr__stop--lab .sb8-jr__anchor{left:50%}
  .sb8-jr__stop--sys{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .sb8-jr__stop--sys .sb8-jr__anchor{left:11%}
  .sb8-jr__fin .sb8-jr__anchor{left:50%}
}

/* tonale afwisseling: stil, donker, licht, donker, stil, climax */
.sb8-jr__stop--b::before{background:#030C16}
.sb8-jr__stop--strip::before{background:#E9EFF6}
.sb8-jr__stop--lab::before{background:#030C16}
.sb8-jr__fin::before{background:
  radial-gradient(120% 120% at 50% 110%,rgba(0,229,168,.13),transparent 62%),#03101C}

/* de lichte band krijgt zijn eigen inkt, geen wit op wit */
.sb8-jr__stop--strip .sb8-jr__step{color:#0A7A5C}
.sb8-jr .sb8-jr__stop--strip .sb8-jr__h2{color:#0A1A2B}
.sb8-jr .sb8-jr__stop--strip .sb8-jr__p{color:#3C526B}

/* ---------- tekstkolom ---------- */
.sb8-jr__txt{min-width:0}
.sb8-jr__txt--wide,.sb8-jr__txt--mid{max-width:62ch}
.sb8-jr__txt--mid{margin-inline:auto;text-align:center}
.sb8-jr__step{margin:0 0 12px;font-family:var(--sb8-mono);font-size:10px;
  letter-spacing:.2em;color:var(--jr-sig)}
.sb8-jr__h2{margin:0 0 14px;font-family:var(--sb8-display,var(--sb8-sans));font-weight:700;
  font-size:clamp(26px,3.4vw,48px);line-height:1.05;letter-spacing:-.03em;max-width:18ch;
  text-wrap:balance}
.sb8-jr__txt--mid .sb8-jr__h2{max-width:22ch;margin-inline:auto}
.sb8-jr__h2--sm{font-size:clamp(22px,2.5vw,34px)}
.sb8-jr__h2--fin{font-size:clamp(28px,4vw,54px);max-width:20ch;margin-inline:auto;text-align:center}
.sb8-jr__p{margin:0;max-width:46ch;font-size:clamp(15px,1.2vw,17.5px);line-height:1.62}
.sb8-jr__txt--mid .sb8-jr__p{margin-inline:auto}
.sb8-jr__p--fin{text-align:center;margin-inline:auto;max-width:50ch}
.sb8-jr__ill{margin:16px 0 0;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.2em;
  color:var(--jr-mute);text-align:center}
.sb8-jr__ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(20px,3vh,32px)}

/* ---------- gedeelde primitieven ---------- */
.sb8-jr__scene{min-width:0;display:flex;justify-content:center;align-items:center}
.jr-sc{position:relative;display:block;width:100%;max-width:520px}

.jrf{position:relative;display:block;border-radius:10px;overflow:hidden;
  border:1px solid rgba(168,188,216,.26);background:#0B1A2B;
  box-shadow:0 30px 64px -40px #000}
.jrf__bar{display:flex;align-items:center;gap:5px;padding:8px 10px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(168,188,216,.16)}
.jrf__bar i{width:5px;height:5px;border-radius:50%;background:rgba(168,188,216,.4)}
.jrf__bar b{margin-left:7px;font-family:var(--sb8-mono);font-size:8px;letter-spacing:.1em;
  color:rgba(168,188,216,.7)}

.jrp{position:relative;display:block;border-radius:13px;overflow:hidden;
  border:1px solid rgba(168,188,216,.3);background:#0B1A2B;padding:9px 8px 10px}
.jrp__notch{display:block;width:26px;height:3px;border-radius:2px;margin:0 auto 7px;
  background:rgba(168,188,216,.3)}

.jr-tag{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.18em}
.jr-tag s{text-decoration:none;color:var(--jr-mute)}
.jr-tag b{color:var(--jr-sig)}
.jr-tag i{width:16px;height:1px;background:rgba(168,188,216,.4)}

.jr-dock{position:absolute;left:50%;top:50%;width:1px;height:1px;pointer-events:none}

/* ---------- 03 · de brede band ---------- */
.sb8-jr__band{min-width:0}
.jr-strip{display:grid;gap:1px;background:rgba(10,26,43,.16);
  border-radius:14px;overflow:hidden;border:1px solid rgba(10,26,43,.14)}
@media (min-width:860px){ .jr-strip{grid-template-columns:repeat(3,minmax(0,1fr))} }
.jr-strip__cell{display:grid;gap:12px;align-content:start;background:#F4F7FB;
  padding:clamp(18px,2.2vw,30px);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,.68,.28,1);
  transition-delay:calc(var(--d,0) * 130ms)}
.sb8-jr__stop--strip[data-in="1"] .jr-strip__cell{opacity:1;transform:none}
.jr-strip__cell em{font-style:normal;font-family:var(--sb8-mono);font-size:9.5px;
  letter-spacing:.2em;color:#0A7A5C}
.jr-strip__cell s{text-decoration:none;font-size:13.5px;line-height:1.55;color:#3C526B}
.jr-strip__cell > span{display:block;height:64px;position:relative}

/* ---------- 04 · het grote moment ---------- */
.sb8-jr__lab{min-width:0;width:100%}
.jr-lab{display:block;width:100%;max-width:880px;margin-inline:auto}
.jr-lab__steps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;
  margin-bottom:clamp(16px,2.4vh,26px)}
.jr-lab__steps b{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.2em;
  color:rgba(168,188,216,.45);padding-bottom:5px;border-bottom:1px solid transparent;
  transition:color .32s ease,border-color .32s ease}
.jr-lab[data-ph="0"] b[data-ph-i="0"],.jr-lab[data-ph="1"] b[data-ph-i="1"],
.jr-lab[data-ph="2"] b[data-ph-i="2"],.jr-lab[data-ph="3"] b[data-ph-i="3"]{
  color:var(--jr-sig);border-bottom-color:var(--jr-sig)}
.jr-lab__stage{position:relative;display:block;width:100%;
  min-height:clamp(300px,44vh,430px);
  border:1px solid rgba(168,188,216,.16);border-radius:16px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),rgba(255,255,255,.012));
  padding:clamp(18px,2.4vw,32px)}

/* ---------- 05 · het systeemmoment ---------- */
.sb8-jr__scene--sys{justify-content:flex-start}
.jr-sys{display:flex;align-items:center;flex-wrap:wrap;gap:10px 0;width:100%}
.jr-sys__node{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;
  border:1px solid rgba(168,188,216,.24);background:rgba(255,255,255,.03);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.68,.28,1),
             border-color .4s ease,background .4s ease;
  transition-delay:calc(var(--i,0) * 160ms)}
.sb8-jr__stop--sys[data-in="1"] .jr-sys__node{opacity:1;transform:none}
.jr-sys__node em{font-style:normal;font-family:var(--sb8-mono);font-size:9px;
  letter-spacing:.16em;color:var(--jr-mute)}
.jr-sys__node--core{border-color:rgba(0,229,168,.45);background:rgba(0,229,168,.08)}
.jr-sys__node--core em{color:#fff}
.jr-sys__node--core i{width:7px;height:7px;border-radius:50%;background:var(--jr-sig);
  box-shadow:0 0 0 4px rgba(0,229,168,.16)}
.jr-sys__link{flex:1 1 22px;min-width:22px;height:1px;background:rgba(168,188,216,.26);
  position:relative;overflow:hidden}
.jr-sys__link::after{content:"";position:absolute;inset:0;background:var(--jr-sig);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.4,.1,.4,1);
  transition-delay:calc(.24s + var(--i,0) * 200ms)}
.sb8-jr__stop--sys[data-in="1"] .jr-sys__link::after{transform:scaleX(1)}

/* ---------- finale ---------- */
.sb8-jr__fin{justify-items:center;text-align:center;
  padding-block:clamp(70px,12vh,140px)}
.sb8-jr__fin .sb8-jr__anchor{top:auto;bottom:34%}

/* ============================================================
   JOURNEY SCÈNES — BOUWEN
   ============================================================ */
/* 01 · versnipperd wordt één route. De losse knoppen trekken tijdens het
   scrollen naar de hoofdactie toe en verdwijnen; die actie wordt groen. */
.jw-a__frame{width:100%}
.jw-a__body{position:relative;display:block;height:clamp(210px,28vh,270px)}
.jw-a__lost{position:absolute;left:var(--x);top:var(--y);
  padding:5px 9px;border-radius:4px;font-size:8.5px;font-weight:600;text-decoration:none;
  background:rgba(168,188,216,.2);color:rgba(234,242,252,.9);white-space:nowrap;
  transform:translate(calc(var(--dx) * var(--sp,0)),calc(var(--dy) * var(--sp,0)))
            scale(calc(1 - .42 * var(--sp,0)));
  opacity:calc(1 - 1.25 * var(--sp,0))}
.jw-a__goal{position:absolute;left:50%;top:50%;margin:-13px 0 0 -62px;width:124px;
  padding:8px 0;border-radius:5px;text-align:center;font-size:9.5px;font-weight:700;
  background:rgba(168,188,216,.22);color:#fff;
  transform:scale(calc(1 + .22 * var(--sp,0)));
  box-shadow:0 0 0 calc(var(--sp,0) * 7px) rgba(0,229,168,.12)}
.sb8-jr__stop--a[data-in="1"] .jw-a__goal{background:color-mix(in srgb,
  rgba(168,188,216,.22) calc((1 - var(--sp,0)) * 100%), var(--jr-sig))}
.jw-a__goal{transition:background .4s ease}

/* 02 · skelet wordt ontwerp, desktop en mobiel zijn dezelfde structuur */
.jw-b{display:flex;align-items:flex-start;gap:clamp(10px,1.4vw,18px)}
.jw-b__desk{flex:1 1 0%;min-width:0}
.jw-b__nav{display:flex;align-items:center;gap:7px;padding:9px 11px;
  border-bottom:1px solid rgba(168,188,216,.1)}
.jw-b__mark{display:flex;align-items:center;gap:5px;font-style:normal;font-size:9.5px;
  font-weight:700;color:#fff;margin-right:auto}
.jw-b__mark s{width:9px;height:9px;border-radius:2px;background:var(--jr-sig);text-decoration:none}
.jw-b__nav i{width:26px;height:4px;border-radius:2px;background:rgba(168,188,216,.22)}
.jw-b__hero{display:block;padding:14px 12px 12px}
.jw-sk{position:relative;display:block;font-style:normal;color:#fff;
  font-family:var(--sb8-display,var(--sb8-sans));font-weight:700;font-size:16px;
  line-height:1.1;letter-spacing:-.025em;
  opacity:calc(-.15 + 1.5 * var(--sp,0))}
.jw-sk--sm{margin-top:6px;font-family:var(--sb8-sans);font-weight:400;font-size:8.5px;
  line-height:1.45;color:rgba(168,188,216,.8);letter-spacing:0}
.jw-sk::before{content:"";position:absolute;left:0;right:8%;top:6%;bottom:14%;
  border-radius:3px;background:rgba(168,188,216,.2);
  opacity:calc(1.15 - 1.6 * var(--sp,0))}
.jw-b__cta{display:inline-block;margin-top:11px;padding:6px 11px;border-radius:4px;
  font-size:8.5px;font-weight:700;text-decoration:none;color:#04101F;
  background:color-mix(in srgb,rgba(168,188,216,.3) calc((1 - var(--sp,0)) * 100%),var(--jr-sig))}
.jw-b__rows{display:grid;gap:5px;padding:4px 12px 14px}
.jw-b__rows i{height:16px;border-radius:3px;background:rgba(168,188,216,.13)}
.jw-b__phone{flex:none;width:78px;
  transform:translateX(calc((1 - var(--sp,0)) * 26px));
  opacity:calc(-.2 + 1.5 * var(--sp,0))}
.jw-b__pnav s{display:block;width:9px;height:9px;border-radius:2px;background:var(--jr-sig)}
.jw-sk--p{margin-top:7px;font-size:10px}
.jw-b__pband{display:block;height:34px;margin-top:7px;border-radius:4px;
  background:linear-gradient(118deg,rgba(0,229,168,.2),rgba(122,168,255,.16))}
.jw-b__pcta{display:block;margin-top:7px;padding:5px 0;border-radius:4px;text-align:center;
  font-size:7.5px;font-weight:700;text-decoration:none;color:#04101F;background:var(--jr-sig)}

/* 03 · de band */
.jw-s1{display:grid;gap:6px;align-content:center}
.jw-s1 i{height:7px;border-radius:2px;background:rgba(10,26,43,.16)}
.jw-s1 i:nth-child(2){width:72%}.jw-s1 i:nth-child(3){width:48%}
.jw-s1 b{display:block;width:56px;height:16px;border-radius:3px;background:#0A7A5C;margin-top:4px}
.jw-s2{display:flex;align-items:flex-end;gap:8px}
.jw-s2__d{width:70px;height:48px;border-radius:4px;border:1.5px solid rgba(10,26,43,.24)}
.jw-s2__m{width:22px;height:38px;border-radius:4px;border:1.5px solid #0A7A5C}
.jw-s3{display:grid;gap:6px;align-content:center}
.jw-s3 i{height:8px;width:78%;border-radius:2px;background:rgba(10,26,43,.16)}
.jw-s3 b{display:block;height:8px;width:56%;border-radius:2px;background:rgba(10,26,43,.16)}
.jw-s3 u{display:block;width:20px;height:20px;border-radius:50%;margin-top:4px;
  border:2px solid #0A7A5C}

/* 04 · Build Lab: één levend object door vier fasen */
.jw-lab__desk{position:absolute;left:clamp(18px,2.4vw,32px);top:clamp(18px,2.4vw,32px);
  right:clamp(18px,2.4vw,32px);
  transition:right .7s cubic-bezier(.22,.68,.28,1),filter .5s ease}
.jw-lab__nav{display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid rgba(168,188,216,.1)}
.jw-lab__nav i{width:30px;height:4px;border-radius:2px;background:rgba(168,188,216,.22)}
.jw-lab__hero{display:block;padding:16px 14px 12px;position:relative}
.jw-lab__hero b{display:block;font-family:var(--sb8-display,var(--sb8-sans));font-weight:700;
  font-size:19px;line-height:1.08;letter-spacing:-.028em;color:#fff;
  opacity:0;transition:opacity .5s ease}
.jw-lab__hero em{display:block;margin-top:6px;font-style:normal;font-size:9px;line-height:1.45;
  color:rgba(168,188,216,.78);opacity:0;transition:opacity .5s ease .08s}
.jw-lab__cta{position:relative;display:inline-block;margin-top:12px;padding:7px 12px;
  border-radius:4px;font-size:9px;font-weight:700;text-decoration:none;
  background:rgba(168,188,216,.22);color:#fff;
  transition:background .45s ease,color .45s ease,box-shadow .45s ease}
.jw-lab__band{display:block;height:54px;margin:2px 14px 0;border-radius:6px;
  background:rgba(168,188,216,.1);transition:background .55s ease}
.jw-lab__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:9px 14px 14px}
.jw-lab__cards i{height:22px;border-radius:4px;background:rgba(168,188,216,.1);
  transition:background .5s ease}
/* fase 0 STRUCTUUR: alleen skelet */
.jw-lab[data-ph="0"] .jw-lab__desk{filter:saturate(.2)}
.jw-lab[data-ph="0"] .jrf__bar b{opacity:.4}
/* fase 1 ONTWERP: typografie en kleur landen */
.jw-lab[data-ph="1"] .jw-lab__hero b,.jw-lab[data-ph="2"] .jw-lab__hero b,
.jw-lab[data-ph="3"] .jw-lab__hero b,
.jw-lab[data-ph="1"] .jw-lab__hero em,.jw-lab[data-ph="2"] .jw-lab__hero em,
.jw-lab[data-ph="3"] .jw-lab__hero em{opacity:1}
.jw-lab[data-ph="1"] .jw-lab__band,.jw-lab[data-ph="2"] .jw-lab__band,
.jw-lab[data-ph="3"] .jw-lab__band{
  background:linear-gradient(118deg,rgba(0,229,168,.2),rgba(122,168,255,.17) 58%,rgba(168,188,216,.1))}
.jw-lab[data-ph="1"] .jw-lab__cards i,.jw-lab[data-ph="2"] .jw-lab__cards i,
.jw-lab[data-ph="3"] .jw-lab__cards i{background:rgba(168,188,216,.15)}
/* fase 2 RESPONSIVE: het venster maakt ruimte, de telefoon komt op */
.jw-lab__phone{position:absolute;right:clamp(18px,2.4vw,32px);top:clamp(30px,5vh,58px);
  width:92px;opacity:0;transform:translateX(22px) scale(.94);
  transition:opacity .5s ease,transform .62s cubic-bezier(.22,.68,.28,1)}
.jw-lab__pnav s{display:block;width:10px;height:10px;border-radius:2px;background:var(--jr-sig)}
.jw-lab__phone b{display:block;margin-top:8px;font-size:11px;font-weight:700;line-height:1.1;
  letter-spacing:-.02em;color:#fff}
.jw-lab__pband{display:block;height:42px;margin-top:8px;border-radius:4px;
  background:linear-gradient(118deg,rgba(0,229,168,.2),rgba(122,168,255,.16))}
.jw-lab__pcta{display:block;margin-top:8px;padding:6px 0;border-radius:4px;text-align:center;
  font-size:8px;font-weight:700;text-decoration:none;background:rgba(168,188,216,.22);color:#fff;
  transition:background .45s ease,color .45s ease}
.jw-lab[data-ph="2"] .jw-lab__desk,.jw-lab[data-ph="3"] .jw-lab__desk{
  right:calc(clamp(18px,2.4vw,32px) + 112px)}
.jw-lab[data-ph="2"] .jw-lab__phone,.jw-lab[data-ph="3"] .jw-lab__phone{
  opacity:1;transform:none}
/* fase 3 CONVERSIE: hoofdactie en meetpunt worden actief */
.jw-lab[data-ph="3"] .jw-lab__cta{background:var(--jr-sig);color:#04101F;
  box-shadow:0 0 0 6px rgba(0,229,168,.16)}
.jw-lab[data-ph="3"] .jw-lab__pcta{background:var(--jr-sig);color:#04101F}
.jw-lab__meet{position:absolute;left:clamp(18px,2.4vw,32px);bottom:clamp(14px,2vh,22px);
  display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:7px;
  border:1px solid rgba(0,229,168,.4);background:rgba(0,229,168,.08);
  opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.22,.68,.28,1)}
.jw-lab[data-ph="3"] .jw-lab__meet{opacity:1;transform:none}
.jw-lab__meet em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;
  letter-spacing:.18em;color:var(--jr-sig)}
.jw-lab__meet s{text-decoration:none;font-size:11px;color:rgba(234,242,252,.82)}

/* ============================================================
   JOURNEY SCÈNES — ADVERTEREN
   ============================================================ */
/* 01 · veel losse uitingen, geen antwoord */
.ja-a__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.ja-a__cr{position:relative;display:block;border-radius:6px;padding:6px;
  border:1px solid rgba(168,188,216,.22);background:rgba(255,255,255,.04);
  opacity:calc(.35 + .65 * var(--sp,0));
  transform:translateY(calc((1 - var(--sp,0)) * 12px)) rotate(calc((1 - var(--sp,0)) * (var(--d) - 2.5) * .9deg))}
.ja-a__cr i{display:block;height:36px;border-radius:3px;
  background:linear-gradient(125deg,rgba(122,168,255,.26),rgba(168,188,216,.14))}
.ja-a__cr:nth-child(2n) i{background:linear-gradient(125deg,rgba(255,122,26,.24),rgba(122,168,255,.14))}
.ja-a__cr:nth-child(3n) i{background:linear-gradient(125deg,rgba(0,229,168,.2),rgba(255,255,255,.1))}
.ja-a__cr b{display:block;margin-top:5px;text-align:center;font-family:var(--sb8-mono);
  font-size:11px;color:rgba(168,188,216,.55)}
.ja-a__q{display:flex;justify-content:center;margin-top:14px}
.ja-a__q em{font-style:normal;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.2em;
  color:var(--jr-mute);padding:6px 12px;border-radius:4px;
  border:1px dashed rgba(168,188,216,.3)}

/* 02 · dezelfde opzet in, uitkomst eruit */
.ja-b{display:grid;gap:16px}
.ja-b__lane{position:relative;display:flex;align-items:center;gap:14px;
  padding:16px;border-radius:12px;border:1px solid rgba(168,188,216,.2);
  background:rgba(255,255,255,.03)}
.ja-b__gate{flex:none;padding:8px 11px;border-radius:6px;
  border:1px solid rgba(0,229,168,.42);background:rgba(0,229,168,.08)}
.ja-b__gate em{font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;
  letter-spacing:.18em;color:var(--jr-sig)}
.ja-b__flow{flex:1 1 auto;display:flex;gap:8px;min-width:0}
.ja-b__flow i{flex:1 1 0;height:30px;border-radius:4px;background:rgba(168,188,216,.16);
  transform:translateX(calc((1 - var(--sp,0)) * (3 - var(--d)) * -22px));
  opacity:calc(.3 + .7 * var(--sp,0))}
.ja-b__out{display:flex;gap:10px}
.ja-b__keep,.ja-b__drop{flex:1 1 0;padding:12px;border-radius:9px;text-align:center}
.ja-b__keep{border:1px solid rgba(0,229,168,.45);background:rgba(0,229,168,.08);
  opacity:calc(-.1 + 1.4 * var(--sp,0))}
.ja-b__drop{border:1px solid rgba(168,188,216,.2);background:rgba(255,255,255,.02);
  opacity:calc(.9 - .5 * var(--sp,0));filter:grayscale(calc(var(--sp,0)))}
.ja-b__keep em,.ja-b__drop em{font-style:normal;font-family:var(--sb8-mono);font-size:9px;
  letter-spacing:.18em}
.ja-b__keep em{color:var(--jr-sig)}.ja-b__drop em{color:var(--jr-mute)}

/* 03 · de band */
.ja-s1{display:flex;align-items:center;gap:7px}
.ja-s1 i{flex:1 1 0;height:44px;border-radius:4px;background:rgba(10,26,43,.13);
  border:1.5px solid rgba(10,26,43,.18)}
.ja-s2{display:flex;align-items:center;gap:10px}
.ja-s2 i{width:44px;height:44px;border-radius:4px;border:1.5px solid #0A7A5C}
.ja-s2 b{width:44px;height:44px;border-radius:4px;border:1.5px solid rgba(10,26,43,.2);
  background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(10,26,43,.12) 5px 6px)}
.ja-s2 u{width:16px;height:2px;background:rgba(10,26,43,.24)}
.ja-s3{display:flex;align-items:flex-end;gap:8px}
.ja-s3 i{width:26px;height:22px;border-radius:3px;background:rgba(10,26,43,.14)}
.ja-s3 b{width:26px;height:46px;border-radius:3px;background:#0A7A5C}

/* 04 · Testvloer: binnen, testen, selectie, route */
.ja-lab__stage{display:grid;gap:clamp(16px,2.4vw,30px);align-content:center}
@media (min-width:860px){ .ja-lab__stage{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center} }
.ja-lab__deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.ja-lab__cr{position:relative;display:block;border-radius:7px;padding:7px;
  border:1px solid rgba(168,188,216,.22);background:rgba(255,255,255,.04);
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .55s cubic-bezier(.22,.68,.28,1),
             border-color .5s ease,filter .5s ease;
  transition-delay:calc(var(--n) * 80ms)}
.ja-lab__cr i{display:block;height:40px;border-radius:4px;
  background:linear-gradient(125deg,rgba(122,168,255,.28),rgba(0,229,168,.16))}
.ja-lab__cr:nth-child(2) i{background:linear-gradient(125deg,rgba(255,122,26,.28),rgba(122,168,255,.16))}
.ja-lab__cr:nth-child(3) i{background:linear-gradient(125deg,rgba(0,229,168,.28),rgba(255,255,255,.12))}
.ja-lab__cr:nth-child(4) i{background:linear-gradient(125deg,rgba(168,188,216,.24),rgba(122,168,255,.12))}
.ja-lab__cr:nth-child(5) i{background:linear-gradient(125deg,rgba(200,102,74,.26),rgba(168,188,216,.12))}
.ja-lab__cr b{display:block;margin-top:6px;font-family:var(--sb8-mono);font-size:7.5px;
  letter-spacing:.1em;color:rgba(234,242,252,.8)}
.ja-lab__cr u{position:absolute;top:6px;right:6px;padding:2px 5px;border-radius:3px;
  font-family:var(--sb8-mono);font-size:6px;letter-spacing:.1em;text-decoration:none;
  opacity:0;transition:opacity .4s ease}
.ja-lab__cr u::after{content:attr(data-t)}
.ja-lab__cr[data-verd="stop"] u{background:rgba(255,255,255,.16);color:rgba(234,242,252,.85)}
.ja-lab__cr[data-verd="stop"] u::after{content:"STOP"}
.ja-lab__cr[data-verd="door"] u{background:var(--jr-sig);color:#04101F}
.ja-lab__cr[data-verd="door"] u::after{content:"DOORTESTEN"}
/* fase 0 BINNEN */
.ja-lab[data-ph="0"] .ja-lab__cr,.ja-lab[data-ph="1"] .ja-lab__cr,
.ja-lab[data-ph="2"] .ja-lab__cr,.ja-lab[data-ph="3"] .ja-lab__cr{opacity:1;transform:none}
/* fase 1 TESTEN: verdicts verschijnen */
.ja-lab[data-ph="1"] .ja-lab__cr u,.ja-lab[data-ph="2"] .ja-lab__cr u,
.ja-lab[data-ph="3"] .ja-lab__cr u{opacity:1}
/* fase 2 SELECTIE: verliezers vallen terug */
.ja-lab[data-ph="2"] .ja-lab__cr[data-verd="stop"],
.ja-lab[data-ph="3"] .ja-lab__cr[data-verd="stop"]{
  filter:grayscale(1);opacity:.28;transform:scale(.94)}
.ja-lab[data-ph="2"] .ja-lab__cr[data-verd="door"],
.ja-lab[data-ph="3"] .ja-lab__cr[data-verd="door"]{border-color:rgba(0,229,168,.62)}
/* fase 3 ROUTE */
.ja-lab__route{position:relative;display:grid;gap:clamp(16px,3vh,30px);
  padding-left:20px;align-content:center}
.ja-lab__rail{position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;border-radius:2px;
  background:rgba(168,188,216,.22);overflow:hidden}
.ja-lab__rail s{position:absolute;left:0;right:0;top:0;height:0;background:var(--jr-sig);
  transition:height 1s cubic-bezier(.4,.1,.4,1)}
.ja-lab[data-ph="3"] .ja-lab__rail s{height:100%}
.ja-lab__stop{position:relative;display:block}
.ja-lab__stop::before{content:"";position:absolute;left:-20px;top:2px;width:11px;height:11px;
  border-radius:50%;border:1.5px solid rgba(168,188,216,.34);background:#04101F;
  transition:border-color .4s ease,background .4s ease,box-shadow .4s ease;
  transition-delay:calc(var(--i) * 220ms)}
.ja-lab__stop b{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.16em;
  color:rgba(168,188,216,.6);transition:color .4s ease;
  transition-delay:calc(var(--i) * 220ms)}
.ja-lab[data-ph="3"] .ja-lab__stop::before{border-color:var(--jr-sig);background:var(--jr-sig)}
.ja-lab[data-ph="3"] .ja-lab__stop b{color:#fff}
.ja-lab[data-ph="3"] .ja-lab__stop:last-child::before{box-shadow:0 0 0 5px rgba(0,229,168,.18)}

/* ============================================================
   JOURNEY SCÈNES — AUTOMATISEREN
   ============================================================ */
/* 01 · inbox en handwerk */
.jf-a{display:grid;gap:14px}
@media (min-width:720px){ .jf-a{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.jf-a__inbox,.jf-a__hand{padding:14px;border-radius:11px;
  border:1px solid rgba(168,188,216,.2);background:rgba(255,255,255,.03)}
.jf-a__inbox em,.jf-a__hand em{display:block;font-style:normal;font-family:var(--sb8-mono);
  font-size:9px;letter-spacing:.2em;color:var(--jr-mute);margin-bottom:10px}
.jf-a__inbox i{display:block;height:13px;border-radius:3px;margin-bottom:7px;
  background:rgba(168,188,216,.18);
  transform:translateX(calc((1 - var(--sp,0)) * -16px));
  opacity:calc(.25 + .75 * var(--sp,0));
  transition:none}
.jf-a__hand s{display:inline-block;text-decoration:none;margin:0 6px 7px 0;padding:4px 9px;
  border-radius:4px;font-size:11px;color:rgba(234,242,252,.8);
  border:1px solid rgba(168,188,216,.24);
  opacity:calc(.2 + .8 * var(--sp,0))}

/* 02 · de stroom met een splitsing */
.jf-b{display:grid;gap:16px}
@media (min-width:720px){ .jf-b{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center} }
.jf-b__col{position:relative;display:grid;gap:14px;padding-left:22px}
.jf-b__rail{position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;border-radius:2px;
  background:rgba(168,188,216,.22);overflow:hidden}
.jf-b__rail s{position:absolute;left:0;right:0;top:0;background:var(--jr-sig);
  height:calc(var(--sp,0) * 100%)}
.jf-b__st{position:relative;display:flex;align-items:center;gap:9px}
.jf-b__st i{position:absolute;left:-22px;width:11px;height:11px;border-radius:50%;
  border:1.5px solid rgba(168,188,216,.34);background:#04101F}
.jf-b__st b{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.16em;
  color:rgba(168,188,216,.62)}
.jf-b__st--fork b{color:var(--jr-sig)}
.jf-b__check{padding:14px;border-radius:11px;
  border:1px solid rgba(0,229,168,.4);background:rgba(0,229,168,.07);
  opacity:calc(-.15 + 1.5 * var(--sp,0));
  transform:translateX(calc((1 - var(--sp,0)) * 18px))}
.jf-b__check em{display:block;font-style:normal;font-family:var(--sb8-mono);font-size:9px;
  letter-spacing:.18em;color:var(--jr-sig);margin-bottom:7px}
.jf-b__check s{text-decoration:none;font-size:13px;line-height:1.5;color:rgba(234,242,252,.84)}

/* 03 · de band */
.jf-s1{display:grid;gap:6px;align-content:center}
.jf-s1 i{height:9px;border-radius:2px;background:rgba(10,26,43,.16)}
.jf-s1 i:nth-child(2){width:80%}.jf-s1 i:nth-child(3){width:58%}
.jf-s2{display:flex;align-items:center;gap:10px}
.jf-s2 i{width:38px;height:38px;border-radius:8px;border:1.5px solid #0A7A5C}
.jf-s2 b{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(10,26,43,.22);
  background:repeating-linear-gradient(90deg,transparent 0 4px,rgba(10,26,43,.1) 4px 5px)}
.jf-s3{display:flex;align-items:center;gap:10px}
.jf-s3 i{width:46px;height:34px;border-radius:4px;background:rgba(10,26,43,.14)}
.jf-s3 u{width:20px;height:20px;border-radius:50%;border:2px solid #0A7A5C}

/* 04 · het systeem met menselijke controle */
.jf-lab__stage{position:relative;min-height:clamp(320px,46vh,440px)}
.jf-lab__wires{position:absolute;inset:clamp(18px,2.4vw,32px);width:auto;height:auto;
  overflow:visible;pointer-events:none}
.jf-w{fill:none;stroke:rgba(168,188,216,.26);stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;pathLength:1;
  transition:stroke-dashoffset .8s cubic-bezier(.4,.1,.4,1),stroke .5s ease;
  transition-delay:calc(var(--d) * 200ms)}
.jf-lab[data-ph="1"] .jf-w[style*="--d:0"],
.jf-lab[data-ph="2"] .jf-w,.jf-lab[data-ph="3"] .jf-w{stroke-dashoffset:0}
.jf-lab[data-ph="3"] .jf-w{stroke:rgba(0,229,168,.5)}
.jf-lab__box{position:absolute;display:block;padding:10px 12px;border-radius:9px;
  border:1px solid rgba(168,188,216,.22);background:rgba(255,255,255,.035);
  opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.22,.68,.28,1),
             border-color .45s ease,background .45s ease}
.jf-lab__box em{display:block;font-style:normal;font-family:var(--sb8-mono);font-size:8.5px;
  letter-spacing:.16em;color:var(--jr-mute)}
.jf-lab__box s{display:block;margin-top:4px;text-decoration:none;font-size:11px;
  color:rgba(234,242,252,.82)}
.jf-lab__in{left:0;top:38%;width:22%}
.jf-lab__in i{display:block;height:8px;border-radius:2px;margin-top:5px;
  background:rgba(168,188,216,.2)}
.jf-lab__read{left:30%;top:38%;width:22%}
.jf-lab__human{left:52%;top:4%;width:30%;border-color:rgba(0,229,168,.42);
  background:rgba(0,229,168,.08)}
.jf-lab__human em{color:var(--jr-sig)}
.jf-lab__human u{display:inline-block;margin-top:7px;padding:2px 7px;border-radius:3px;
  font-family:var(--sb8-mono);font-size:7px;letter-spacing:.12em;text-decoration:none;
  background:var(--jr-sig);color:#04101F;opacity:0;transition:opacity .4s ease .3s}
.jf-lab__auto{left:52%;top:70%;width:24%}
.jf-lab__crm{right:0;top:38%;width:24%;position:absolute}
.jf-lab[data-ph="0"] .jf-lab__in,
.jf-lab[data-ph="1"] .jf-lab__in,.jf-lab[data-ph="1"] .jf-lab__read,
.jf-lab[data-ph="2"] .jf-lab__in,.jf-lab[data-ph="2"] .jf-lab__read,
.jf-lab[data-ph="2"] .jf-lab__human,.jf-lab[data-ph="2"] .jf-lab__auto,
.jf-lab[data-ph="3"] .jf-lab__in,.jf-lab[data-ph="3"] .jf-lab__read,
.jf-lab[data-ph="3"] .jf-lab__human,.jf-lab[data-ph="3"] .jf-lab__auto,
.jf-lab[data-ph="3"] .jf-lab__crm{opacity:1;transform:none}
.jf-lab[data-ph="3"] .jf-lab__human u{opacity:1}
.jf-lab[data-ph="3"] .jf-lab__crm{border-color:rgba(0,229,168,.45);background:rgba(0,229,168,.08)}
.jf-lab[data-ph="3"] .jf-lab__crm em{color:var(--jr-sig)}

/* ============================================================
   JOURNEY SCÈNES — COACHING
   ============================================================ */
/* 01 · één schaal */
.jc-a__scale{display:flex;align-items:center;gap:12px}
.jc-a__end{flex:none;text-decoration:none;font-family:var(--sb8-mono);font-size:9px;
  letter-spacing:.18em;color:var(--jr-mute)}
.jc-a__end--r{color:var(--jr-sig)}
.jc-a__track{position:relative;flex:1 1 auto;height:2px;border-radius:2px;
  background:rgba(168,188,216,.24)}
.jc-a__grip{position:absolute;top:50%;left:calc(12% + var(--sp,0) * 64%);
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:var(--jr-sig);box-shadow:0 0 0 5px rgba(0,229,168,.14)}
.jc-a__marks{position:relative;display:block;height:34px;margin-top:12px}
.jc-a__marks em{position:absolute;left:var(--x);top:0;transform:translateX(-50%);
  font-style:normal;font-size:11px;color:var(--jr-mute);white-space:nowrap}
/* 02 · twee kolommen */
.jc-b__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px)}
.jc-b__col{display:grid;gap:8px;align-content:start}
.jc-b__col em{font-style:normal;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.2em;
  color:var(--jr-mute)}
.jc-b__col[data-side="sb"] em{color:var(--jr-sig)}
.jc-b__col i{display:block;font-style:normal;padding:9px 11px;border-radius:7px;font-size:12.5px;
  border:1px solid rgba(168,188,216,.2);background:rgba(255,255,255,.035);
  color:rgba(234,242,252,.88)}
.jc-b__col[data-side="sb"] i{border-color:rgba(0,229,168,.3);background:rgba(0,229,168,.06);
  opacity:calc(.25 + .75 * var(--sp,0));
  transform:translateX(calc((1 - var(--sp,0)) * -14px))}
/* 03 · de band */
.jc-s1,.jc-s2,.jc-s3{display:flex;align-items:center;gap:8px;height:100%}
.jc-s1 i,.jc-s2 i,.jc-s3 i{border-radius:4px;background:rgba(10,26,43,.15)}
.jc-s1 i{width:74%;height:42px}.jc-s1 b{width:22%;height:42px;border-radius:4px;
  border:1.5px dashed rgba(10,26,43,.24)}
.jc-s2 i{width:48%;height:42px}.jc-s2 b{width:48%;height:42px;border-radius:4px;background:#0A7A5C;opacity:.55}
.jc-s3 i{width:24%;height:42px}.jc-s3 b{width:72%;height:42px;border-radius:4px;background:#0A7A5C}
/* 04 · de verdeling verschuift echt */
.jc-lab__stage{display:grid;gap:clamp(18px,3vh,32px);align-content:center}
.jc-lab__scale{display:flex;align-items:center;gap:14px}
.jc-lab__scale s,.jc-lab__scale b{flex:none;text-decoration:none;font-family:var(--sb8-mono);
  font-size:9.5px;letter-spacing:.18em;color:var(--jr-mute)}
.jc-lab__scale b{color:var(--jr-sig)}
.jc-lab__track{position:relative;flex:1 1 auto;height:2px;border-radius:2px;
  background:rgba(168,188,216,.24)}
.jc-lab__grip{position:absolute;top:50%;left:10%;width:17px;height:17px;
  margin:-8.5px 0 0 -8.5px;border-radius:50%;background:var(--jr-sig);
  box-shadow:0 0 0 6px rgba(0,229,168,.14);
  transition:left .7s cubic-bezier(.22,.68,.28,1)}
.jc-lab[data-ph="1"] .jc-lab__grip{left:38%}
.jc-lab[data-ph="2"] .jc-lab__grip{left:66%}
.jc-lab[data-ph="3"] .jc-lab__grip{left:92%}
.jc-lab__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,26px);
  --jc-row:34px;--jc-gap:8px}
.jc-lab__col{display:grid;grid-auto-rows:var(--jc-row);gap:var(--jc-gap);align-content:start}
.jc-lab__col em{font-style:normal;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.2em;
  color:var(--jr-mute);align-self:end}
.jc-lab__col[data-side="sb"] em{color:var(--jr-sig)}
.jc-lab__col i{display:flex;align-items:center;font-style:normal;padding:0 11px;border-radius:7px;
  font-size:12.5px;color:rgba(234,242,252,.88);
  border:1px solid rgba(168,188,216,.2);background:rgba(255,255,255,.035);
  transition:transform .65s cubic-bezier(.22,.68,.28,1),
             border-color .45s ease,background .45s ease}
.jc-lab__col u{display:block;border:1px dashed rgba(168,188,216,.18);border-radius:7px;
  opacity:0;transition:opacity .45s ease}
.jc-lab[data-ph="1"] .jc-lab__col u,.jc-lab[data-ph="2"] .jc-lab__col u,
.jc-lab[data-ph="3"] .jc-lab__col u{opacity:1}
/* taken schuiven per fase naar de rechterkolom, in vaste rijstappen */
.jc-lab__col i[data-task]{--mv:0}
.jc-lab[data-ph="1"] i[data-task="2"],
.jc-lab[data-ph="2"] i[data-task="2"],.jc-lab[data-ph="2"] i[data-task="3"],
.jc-lab[data-ph="3"] i[data-task="2"],.jc-lab[data-ph="3"] i[data-task="3"],
.jc-lab[data-ph="3"] i[data-task="4"],.jc-lab[data-ph="3"] i[data-task="5"]{
  transform:translateX(calc(100% + clamp(12px,2vw,26px)));
  border-color:rgba(0,229,168,.4);background:rgba(0,229,168,.08)}
.jc-lab[data-ph="1"] i[data-task="2"]{transition-delay:.05s}
.jc-lab[data-ph="2"] i[data-task="3"]{transition-delay:.12s}
.jc-lab[data-ph="3"] i[data-task="4"]{transition-delay:.12s}
.jc-lab[data-ph="3"] i[data-task="5"]{transition-delay:.22s}
/* 05 · coaching staat naast de drie, niet erin */
.jr-sys--coach{flex-wrap:wrap;gap:8px}
.jr-sys--coach .jr-sys__node{flex:1 1 auto}
.jr-sys__hold{flex:1 1 100%;display:grid;gap:5px;margin-top:6px;padding:12px 14px;
  border-radius:9px;border:1px solid rgba(0,229,168,.4);background:rgba(0,229,168,.07);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease .4s,transform .5s cubic-bezier(.22,.68,.28,1) .4s}
.sb8-jr__stop--sys[data-in="1"] .jr-sys__hold{opacity:1;transform:none}
.jr-sys__hold em{font-style:normal;font-family:var(--sb8-mono);font-size:9px;
  letter-spacing:.18em;color:var(--jr-sig)}
.jr-sys__hold s{text-decoration:none;font-size:12.5px;color:rgba(234,242,252,.84)}

/* ---------- journey: correcties na de eerste scrolltest ---------- */

/* Het anker bepaalt waar de lijn loopt. Die moet door de goot en door de
   tussenruimte gaan, nooit door een tekstblok. Daarom een vaste afstand tot
   de rand in plaats van een percentage van de stopbreedte. */
.sb8-jr__anchor{left:11px}
@media (min-width:1000px){
  .sb8-jr__stop--a .sb8-jr__anchor{left:13px}
  .sb8-jr__stop--b .sb8-jr__anchor{left:50.5%}
  .sb8-jr__stop--strip .sb8-jr__anchor{left:13px}
  .sb8-jr__stop--lab .sb8-jr__anchor{left:4.5%}
  .sb8-jr__stop--sys .sb8-jr__anchor{left:13px}
  .sb8-jr__fin .sb8-jr__anchor{left:50%}
}

/* Het grote moment krijgt scrollruimte en blijft staan terwijl de vier fasen
   spelen. Geen scroll hijacking: de pagina scrollt gewoon door, het object
   blijft alleen even in beeld. */
.sb8-jr__stop--lab{display:block;padding-block:0;min-height:215vh}
.sb8-jr__pin{position:sticky;top:clamp(86px,13vh,124px);
  padding-block:clamp(26px,5vh,54px) clamp(30px,6vh,64px)}
.sb8-jr__stop--lab .sb8-jr__anchor{top:34vh}
@media (max-width:999.98px){
  .sb8-jr__stop--lab{min-height:185vh}
  .sb8-jr__pin{top:clamp(72px,11vh,96px)}
}
.sb8-jr__ill{margin-top:12px}

/* Stop 01 houdt de chaos langer vast; hij lost pas in de tweede helft op. */
.sb8-jr__stop--a{--sq:clamp(0,calc((var(--sp,0) - .34) / .42),1)}
.jw-a__lost{transform:translate(calc(var(--dx) * var(--sq,0)),calc(var(--dy) * var(--sq,0)))
            scale(calc(1 - .42 * var(--sq,0)));
  opacity:calc(1 - 1.25 * var(--sq,0))}
.jw-a__goal{transform:scale(calc(1 + .22 * var(--sq,0)));
  box-shadow:0 0 0 calc(var(--sq,0) * 7px) rgba(0,229,168,.12)}
.sb8-jr__stop--a[data-in="1"] .jw-a__goal{background:color-mix(in srgb,
  rgba(168,188,216,.22) calc((1 - var(--sq,0)) * 100%), var(--jr-sig))}
/* het venster is een site, geen leeg vlak */
.jw-a__body::before{content:"";position:absolute;left:10%;right:10%;top:14%;height:9px;
  border-radius:3px;background:rgba(168,188,216,.13)}
.jw-a__body::after{content:"";position:absolute;left:10%;right:34%;top:24%;height:9px;
  border-radius:3px;background:rgba(168,188,216,.1)}

/* De band: de miniatuurtjes moeten op een lichte grond ook echt te zien zijn. */
.jr-strip__cell > span{height:70px;display:flex;align-items:center}
.jw-s1 i,.jw-s3 i,.jw-s3 b{background:rgba(10,26,43,.22)}
.jw-s1{width:100%}
.ja-s1 i{background:rgba(10,26,43,.16);border-color:rgba(10,26,43,.26)}
.jf-s1 i,.jf-s3 i{background:rgba(10,26,43,.2)}
.jc-s1 i,.jc-s2 i,.jc-s3 i{background:rgba(10,26,43,.2)}
.jr-strip{border-color:rgba(10,26,43,.18);background:rgba(10,26,43,.2)}

/* Het lab-vlak sluit strakker om het object heen. */
.jr-lab__stage{min-height:clamp(288px,40vh,392px)}

/* De lijn loopt in de goot, met een lichte zijwaartse beweging die hem niet
   verlaat. Daardoor kruist hij nergens een kop of een alinea. */
.sb8-jr__anchor{left:calc(var(--sb8-gutter) * .46)}
.sb8-jr__stop--b .sb8-jr__anchor,
.sb8-jr__stop--lab .sb8-jr__anchor{left:calc(var(--sb8-gutter) * .84)}
@media (min-width:1000px){
  .sb8-jr__stop--a .sb8-jr__anchor,
  .sb8-jr__stop--strip .sb8-jr__anchor,
  .sb8-jr__stop--sys .sb8-jr__anchor,
  .sb8-jr__fin .sb8-jr__anchor{left:calc(var(--sb8-gutter) * .46)}
  .sb8-jr__stop--b .sb8-jr__anchor{left:calc(var(--sb8-gutter) * .84)}
  .sb8-jr__stop--lab .sb8-jr__anchor{left:calc(var(--sb8-gutter) * .84)}
}
.sb8-jr__fin .sb8-jr__anchor{top:50%;bottom:auto}

/* De losse knoppen moeten eerst echt te zien zijn voordat ze samentrekken. */
.jw-a__lost{border:1px solid rgba(168,188,216,.34)}
.sb8-jr__stop--a{--sq:clamp(0,calc((var(--sp,0) - .42) / .34),1)}
/* De band: de miniatuur mag niet uitrekken over de hele cel. */
.jw-s1 b{justify-self:start}
.jw-s3 u{justify-self:start}

/* De blokken van de workflow staan in hetzelfde stelsel als de draden. */
.jf-lab__in{left:0;top:38%;width:20%}
.jf-lab__read{left:26%;top:38%;width:20%}
.jf-lab__human{left:52%;top:5%;width:26%}
.jf-lab__auto{left:52%;top:71%;width:20%}
.jf-lab__crm{left:84%;right:auto;top:38%;width:16%}
@media (max-width:859.98px){
  .jf-lab__stage{min-height:clamp(330px,52vh,460px)}
  .jf-lab__in{width:26%}.jf-lab__read{left:30%;width:26%}
  .jf-lab__human{left:60%;width:40%}.jf-lab__auto{left:60%;width:32%}
  .jf-lab__crm{left:60%;top:46%;width:40%}
}

/* De coachingschaal in stop 01 mag meer ruimte pakken. */
.jc-a{max-width:520px}
.jc-a__scale{padding:16px 18px;border-radius:12px;
  border:1px solid rgba(168,188,216,.2);background:rgba(255,255,255,.03)}
.jc-a__marks{margin-top:14px}
.jc-a__marks em{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.1em}

/* ============================================================
   CONTRASTLAAG — leesbaarheid op donkere secties
   ============================================================
   Gemeten hoofdoorzaak: de body is in v8 donkerblauw (#04101F), maar een
   gewone .sb-section heeft geen eigen achtergrond. Die secties zijn dus in
   de praktijk donkere secties, terwijl de componenten erin nog de kleuren
   van de lichte modus houden (#08182E inkt, #56698A slate, #007F5F groen).
   Op #04101F levert dat 1,07 tot 3,8 op. Het raakt onder meer de FAQ-
   blokken, Contact "Wat je kunt verwachten.", de coachingschaal (.sb-sp)
   en het referentielab (.sb-lab).
   Tweede oorzaak: een paar inactieve of onthulde onderdelen bleven op een
   te lage opacity hangen.
   Derde oorzaak: lichte kaarten binnen een donkere sectie erfden de lichte
   inkt van die sectie.

   Hierarchie op donker, gemeten tegen #04101F:
     kop            #F2F7FD   16,2:1
     body           #B9CADF   10,1:1
     secundair      #8398B5    6,2:1
     mono en meta   #8FA3BF    6,9:1
     inactief       nooit onder ongeveer 3:1
   De rustige, gedimde look blijft; alleen het wegvallen is weg.
   Geen globale color:white, geen groene alinea's: Signal blijft accent. */

.sb8-scene--ink,.sb-section--dark,.sb8-opener,.sb-calc,.sb-cr,.sb8-jr,.sb-footer,
.sb-section:not(.sb-section--mist):not(.sb-section--tight){
  --sb-on-dark-ink:#F2F7FD;
  --sb-on-dark-body:#B9CADF;
  --sb-on-dark-sec:#8398B5;
  --sb-on-dark-meta:#8FA3BF;
  --sb-on-dark-acc:var(--sb8-signal);
}

/* Lichte kaarten en lichte deelsecties binnen een donkere sectie draaien
   dezelfde tokens terug naar donkere inkt. Zo hoeft geen enkele regel
   hieronder een uitzondering te kennen. */
:is(.sb8-scene--ink,.sb-section--dark,.sb8-opener,.sb-calc,.sb-cr,.sb8-jr,
    .sb-section:not(.sb-section--mist):not(.sb-section--tight))
  :is(.sb8-stepl__item,.sb8-case__b,.sb-pending,.sb8-styles__card,.sb-mini,
      .sb8-scene--light,.sb8-scene--mist,.sb-card,.sb-tablewrap,.sb8-site__card,
      .sb-pending-grid__item,.sb8-rw__supf,.sb-cl__ad,.sb8-hc,.sb-sp__panel,
      .sb8-rw__ind,.sb-ref__frame,.sb-ref__marker,.sb-lab__frame,.sb-empty,
      .sb8-dim__grip){
  --sb-on-dark-ink:#08182E;
  --sb-on-dark-body:#3C526B;
  --sb-on-dark-sec:#5A6E8C;
  --sb-on-dark-meta:#5A6E8C;
  --sb-on-dark-acc:#04624A;
}

/* koppen */
:is(.sb8-scene--ink,.sb-section--dark,.sb8-opener,.sb-calc,.sb-cr,.sb8-jr,
    .sb-section:not(.sb-section--mist):not(.sb-section--tight))
  :is(.sb-d1,.sb-d2,.sb-d3,.sb-h2,.sb-h3,.sb-lab__branchname,
      .sb-sp__name,.sb-calc__herolabel){color:var(--sb-on-dark-ink)!important}

/* lopende tekst */
:is(.sb8-scene--ink,.sb-section--dark,.sb8-opener,.sb-calc,.sb-cr,.sb8-jr,
    .sb-section:not(.sb-section--mist):not(.sb-section--tight))
  :is(.sb-rte p,.sb-rte li,.sb-lead,.sb-measure,.sb-checklist li,
      .sb-faq summary,.sb-faq summary span,.sb-faq p,.sb-faq li,
      .sb-table td,.sb-table th,.sb-lab__logic,.sb-lab__facts dd,
      .sb-sp__herken,.sb-sp__pakket,.sb-lab__routestep,
      .sb-calc__ledgerwhy,.sb-calc__herohint,
      .sb8-det__note,.sb8-floor__b){color:var(--sb-on-dark-body)!important}

/* secundair en meta */
:is(.sb8-scene--ink,.sb-section--dark,.sb8-opener,.sb-calc,.sb-cr,.sb8-jr,
    .sb-section:not(.sb-section--mist):not(.sb-section--tight))
  :is(.sb-note,.sb-lab__name,.sb-lab__links li,.sb-lab__routetag,
      .sb-cr__xlabels span,.sb-cr__kpi span,.sb-cr__kpi dt,
      .sb-calc__ledgertable td,.sb-calc__advnote,.sb-calc__dtnote,
      ){color:var(--sb-on-dark-sec)!important}

/* het groen van de lichte modus is op donker te donker voor kleine tekst */
:is(.sb8-scene--ink,.sb-section--dark,.sb8-opener,.sb-calc,.sb-cr,.sb8-jr,
    .sb-section:not(.sb-section--mist):not(.sb-section--tight))
  :is(.sb-eyebrow,.sb-lab__num,.sb-lab__indexlabel,.sb-lab__facts dt,
      .sb-sp__num,.sb-rte a,.sb-calc__ledgertable th){color:var(--sb-on-dark-acc)!important}
:is(.sb8-scene--ink,.sb-section--dark,.sb8-opener,.sb-calc,.sb-cr,.sb8-jr,
    .sb-section:not(.sb-section--mist):not(.sb-section--tight)) .sb-lab__num{opacity:1}

/* de footer: de linkkleur van de lichte modus valt weg op donkerblauw */
.sb-footer a{color:#C4D4E8}
.sb-footer a:is(:hover,:focus-visible){color:#fff}
.sb-footer__bottom a{color:#93A9C6}
.sb-footer__bottom a:is(:hover,:focus-visible){color:#E6EFFA}

/* Een lichte kaart met te lichte tekst erop. Deze componenten krijgen hun
   kleur uit sectie-eigen #shopify-section-regels, die zwaarder wegen dan een
   klasse; daarom hier !important, per component en niet generiek. */
/* .sb-pending bestaat in twee smaken: een lichte kaart op Contact en de
   donkere variant in de footer. Alleen de lichte krijgt donkere inkt. */
.sb-pending:not(.sb-pending--dark) .sb-pending__title{color:#0B1B2E!important}
.sb-pending:not(.sb-pending--dark) .sb-pending__body{color:#3C526B!important}
.sb-card .sb-help,.sb-field .sb-help{color:#4A5E79!important}
.sb8-case__n{color:#4E627E;opacity:1}
.sb8-case__bl em{color:#4E627E;opacity:1}
.sb8-asp__l{color:#556070}
.sb8-scene--light .sb8-steps__cap,.sb8-scene--mist .sb8-steps__cap,
.sb8-steps--mist .sb8-steps__cap{color:#04513D}
.sb8-form__opt{color:#4E627E}
.sb8-io--niet .sb8-io__l{color:rgba(8,22,38,.66)}

/* Kleine meta-tekst die net onder de grens bleef. Toon blijft rustig. */
.sb8-pick__b u{opacity:1;color:#5B6675}
/* De gekozen dienstchip krijgt een donkere vulling; het nummer erin stond
   daar nog in de lichte-modus-grijs (3,28:1). */
.sb8-pick__b[aria-selected="true"] u{opacity:1;color:#9FB3CC}
:is(.sb8-scene--ink,.sb-section--dark,.sb8-opener,.sb8-jr,
    .sb-section:not(.sb-section--mist):not(.sb-section--tight)) .sb8-pick__b u{color:#A4B7D0;opacity:1}
.sb8-grow__scale s{color:rgba(168,188,216,.74)}
.sb-cr__legend .k-data{color:#7FA8E8}
.sb8-rf__opt em{opacity:.74}

/* Het referentieframe: de URL-balk en het bijschrift stonden op papierwit
   bijna in de achtergrond. Alleen de kleur verandert, niets aan de weergave. */
.sb8-rw{--rw-mute-surface:#5E6B7E}
.sb8-rw[data-world="kapsalon"]{--rw-mute-surface:#6E6455}
.sb8-rw[data-world="restaurant"]{--rw-mute-surface:#7A6154}
.sb8-rw[data-world="installatie"]{--rw-mute-surface:#5A6E8C}
.sb8-rw .sb-ref__url,.sb8-rw__supcap{color:var(--rw-mute-surface)!important}

/* ---------- inactieve en onthulde standen: dimmen mag, verdwijnen niet ---------- */
.sb8-floor.is-live .sb8-floor__step{opacity:.72}
.sb8-floor__deck .sb8-cr{opacity:.55}
.sb8-floor__deck .sb8-cr.is-on,.sb8-floor__deck .sb8-cr[aria-selected="true"]{opacity:1}
.sb8-stepl__item{opacity:.68}
.sb8-stepl__item.is-on,.sb8-stepl__item[aria-current],.sb8-stepl:not(.is-live) .sb8-stepl__item{opacity:1}
.sb8-doc.is-ok{opacity:.55}
.sb-calc__ledgertable tr{opacity:.82!important}
.sb8-det__b{opacity:1;color:var(--sb8-dark-mute)}
.sb8-scene--light .sb8-det__b,.sb8-scene--mist .sb8-det__b{color:#3C526B}
.sb8-styles__ext{opacity:.9}
.sb8-cr__tape em{opacity:.66}

/* De workflowlabels staan in de live stand ONDER de 3px balk, dus op de donkere
   scene en niet op groen. Naam in Signal (7,6:1) en zin in wit (16,7:1) kloppen
   daar al; een donkere inkt zou ze juist wegdrukken. Geen override dus. */

/* De miniaturen (.sb-mini website-replica's, .sb8-ad advertentiemockups) zijn
   illustraties van andermans interface op 5 tot 12px. Die worden bewust niet
   naar AA getild: dat zou de weergave onjuist maken. Ze dragen geen informatie
   die de bezoeker moet lezen en staan als illustratie gemarkeerd. */

/* ============================================================
   FOOTERGRENS — de footer was niet te onderscheiden van de sectie erboven
   ============================================================
   Gemeten: footer #08182E tegen een laatste sectie van #04101F. Dat verschil
   is zo klein dat beide als een blok lezen. Drie ingrepen samen, geen van
   allen luider dan de CTA erboven:
   1. de footer zakt naar een diepere toon (#020A14): hij leest als sokkel
      onder de pagina in plaats van als nog een sectie;
   2. een 1px lijn bovenaan, plus een kort Signal-segment in de linkermarge
      precies waar de routelijn eindigt;
   3. meer lucht bovenin.
   Sitebreed, want de footer is op elke publieke pagina hetzelfde. */
.sb-footer{
  position:relative;
  background:#020A14;
  padding-top:clamp(78px,8.4vh,112px);
  border-top:1px solid rgba(168,188,216,.14)}
.sb-footer::before{
  content:"";position:absolute;top:-1px;left:0;
  width:clamp(56px,7vw,104px);height:1px;
  background:var(--sb8-signal,#00E5A8);opacity:.62;
  pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .sb-footer::before{transition:opacity .4s ease}
}
/* De routelijn mag niet dwars door de footer lijken te lopen. */
.sb8-jr__rail,.sb8-jr__line,.sb-rail__line{clip-path:inset(0 0 0 0)}
.sb-footer{z-index:2}

/* ============================================================
   COACHINGVORMEN — stop 03 van de coachingroute
   ============================================================
   Was: een lichte plaat met drie bijna lege kolommen, die als een vreemd
   sjabloon in de donkere ervaring stond. Nu: dezelfde plek, maar donker,
   concreet en als één frame met drie zones binnen dezelfde lijn.
   Signal alleen als accent en status, niet als vlak. */
.sb8-jr__stop--pack::before{background:#030C16}
.sb8-jr .sb8-jr__stop--pack .sb8-jr__h2{color:#F2F7FD}
.sb8-jr .sb8-jr__stop--pack .sb8-jr__p{color:#B9CADF;max-width:46ch}
.sb8-jr__stop--pack .sb8-jr__step{color:var(--sb8-signal,#00E5A8)}

.jc-pack{display:block;margin-top:clamp(22px,3vw,38px)}

/* de as: meest zelfstandig -> meest persoonlijk */
.jc-pack__rail{position:relative;display:block;height:16px;margin-bottom:clamp(14px,1.6vw,22px)}
.jc-pack__line{position:absolute;left:0;right:0;top:7px;height:1px;
  background:linear-gradient(90deg,rgba(168,188,216,.16),rgba(0,229,168,.42));display:block}
.jc-pack__rail b{position:absolute;top:3px;width:7px;height:7px;border-radius:50%;
  left:calc(var(--x) * 50%);transform:translateX(-50%);
  background:#0B1B2E;border:1px solid rgba(168,188,216,.5)}
.jc-pack__rail b:last-of-type{background:var(--sb8-signal,#00E5A8);border-color:transparent;
  box-shadow:0 0 0 4px rgba(0,229,168,.14)}

/* één frame, drie zones, gescheiden door haarlijnen */
.jc-pack__grid{display:grid;gap:1px;background:rgba(168,188,216,.16);
  border:1px solid rgba(168,188,216,.16);border-radius:14px;overflow:hidden}
@media (min-width:900px){ .jc-pack__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.jc-pack__z{display:grid;gap:9px;align-content:start;min-width:0;
  background:#050F1C;padding:clamp(16px,1.7vw,24px);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--sb8-ease) calc(var(--d) * .09s),
             transform .5s var(--sb8-ease) calc(var(--d) * .09s)}
.sb8-jr__stop--pack[data-in="1"] .jc-pack__z{opacity:1;transform:none}
/* de meest persoonlijke vorm draagt het accent, de andere twee blijven leesbaar */
.jc-pack__z--top{background:#071324;box-shadow:inset 3px 0 0 var(--sb8-signal,#00E5A8)}

.jc-pack__lbl{font-style:normal;font-family:var(--sb8-mono);font-size:9.5px;
  letter-spacing:.2em;color:var(--sb8-signal,#00E5A8)}
.jc-pack__n{font-family:var(--sb8-display,var(--sb8-sans));font-weight:700;
  font-size:clamp(19px,1.6vw,23px);line-height:1.15;color:#F2F7FD;letter-spacing:-.01em}
.jc-pack__who{text-decoration:none;font-size:13px;line-height:1.5;color:#8FA3BF}
.jc-pack__rows{display:grid;gap:8px;margin-top:4px;
  border-top:1px solid rgba(168,188,216,.13);padding-top:11px}
.jc-pack__rows > span{display:grid;gap:3px}
.jc-pack__rows u{text-decoration:none;font-family:var(--sb8-mono);font-size:8.6px;
  letter-spacing:.18em;color:#8FA3BF}
.jc-pack__rows i{font-style:normal;font-size:13px;line-height:1.5;color:#B9CADF}
.jc-pack__foot{display:block;text-decoration:none;margin-top:clamp(12px,1.4vw,18px);
  font-size:12.5px;line-height:1.55;color:#8398B5;max-width:78ch}

/* Smal: geen drie smalle kolommen maar drie blokken onder elkaar, met de
   meest persoonlijke vorm herkenbaar aan dezelfde groene rand. */
@media (max-width:899px){
  .jc-pack__grid{grid-template-columns:minmax(0,1fr)}
  .jc-pack__z{padding:15px 16px}
  .jc-pack__n{font-size:19px}
  .jc-pack__z--top{box-shadow:inset 3px 0 0 var(--sb8-signal,#00E5A8)}
}
@media (prefers-reduced-motion:reduce){
  .jc-pack__z{opacity:1;transform:none;transition:none}
}

/* De witte kaarten op Over ons waren na de contrastfix erg luid op donkerblauw.
   Alleen de toon zakt iets; verder verandert er niets aan die sectie. */
:is(.sb8-opener,.sb-section--dark,.sb-section:not(.sb-section--mist):not(.sb-section--tight))
  .sb-card{background:#EEF3F9;border:1px solid rgba(10,26,43,.08)}

/* ============================================================
   MANIFEST — missie, visie en drie principes
   ============================================================
   Eén doorlopende donkere band in plaats van twee kaarten naast elkaar.
   Een groene lijn loopt van de missie via de visie naar de principes en
   markeert elk moment met een node; de lijn vult zich mee met de scroll.
   Missie en visie hebben bewust een andere compositie: de missie staat links
   met ruimte rechts, de visie is een breed statement met de toelichting in
   een smalle kolom ernaast. Signal alleen op labels, nodes en de lijn. */
.sb8-man{background:#04101F;position:relative;overflow:hidden}
.sb8-man__in{position:relative;
  padding-block:clamp(66px,9.4vh,124px) clamp(46px,6vh,80px);
  display:grid;gap:clamp(52px,8vh,116px)}

/* de doorlopende lijn */
.sb8-man__rail{position:absolute;left:0;top:0;bottom:0;width:11px;pointer-events:none}
.sb8-man__track,.sb8-man__fill{position:absolute;left:5px;top:0;width:1px;display:block}
.sb8-man__track{bottom:0;background:rgba(168,188,216,.16)}
.sb8-man__fill{height:calc(var(--mp,0) * 100%);
  background:linear-gradient(180deg,rgba(0,229,168,.75),rgba(0,229,168,.3));
  box-shadow:0 0 14px rgba(0,229,168,.28)}
.sb8-man__node{position:absolute;left:0;width:11px;height:11px;border-radius:50%;
  top:calc(var(--y, 0) * 1px);
  background:#04101F;border:1px solid rgba(168,188,216,.45);
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
.sb8-man__node.is-on{background:var(--sb8-signal,#00E5A8);border-color:transparent;
  box-shadow:0 0 0 5px rgba(0,229,168,.14)}

/* de drie momenten */
.sb8-man__blk{position:relative;padding-left:clamp(30px,4.2vw,62px);min-width:0;
  opacity:0;transform:translateY(16px);
  transition:opacity .62s var(--sb8-ease),transform .62s var(--sb8-ease)}
.sb8-man__blk[data-in="1"]{opacity:1;transform:none}

.sb8-man__lbl{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.22em;
  color:var(--sb8-signal,#00E5A8);margin:0 0 clamp(14px,1.8vw,22px)}

.sb8-man__st{margin:0;color:#F2F7FD;letter-spacing:-.02em;
  font-family:var(--sb8-display,var(--sb8-sans));font-weight:700;line-height:1.1;
  font-size:clamp(28px,3.55vw,52px);max-width:21ch}
.sb8-man__sup{margin:clamp(18px,2.2vw,28px) 0 0;color:#B9CADF;
  font-size:clamp(15px,1.15vw,17.5px);line-height:1.6;max-width:56ch}

/* de visie krijgt een bredere regel en de toelichting ernaast */
.sb8-man__st--wide{max-width:24ch;font-size:clamp(28px,4.5vw,64px)}
@media (min-width:1000px){
  .sb8-man__blk--visie{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    gap:clamp(28px,4vw,64px);align-items:end}
  .sb8-man__blk--visie .sb8-man__lbl{grid-column:1/-1}
  .sb8-man__sup--side{margin-top:0;padding-bottom:6px;max-width:42ch;
    border-left:1px solid rgba(168,188,216,.18);padding-left:clamp(18px,1.8vw,26px)}
  .sb8-man__blk--missie .sb8-man__st{max-width:20ch}
}

/* de principes: één rail, geen drie dozen */
.sb8-man__prin{display:grid;gap:1px;background:rgba(168,188,216,.15);
  border-top:1px solid rgba(168,188,216,.15);
  border-bottom:1px solid rgba(168,188,216,.15)}
@media (min-width:900px){ .sb8-man__prin{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sb8-man__p{background:#04101F;padding:clamp(20px,2.3vw,32px) clamp(16px,1.8vw,28px);
  display:grid;gap:9px;align-content:start;min-width:0;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--sb8-ease) calc(var(--d) * .1s),
             transform .5s var(--sb8-ease) calc(var(--d) * .1s)}
.sb8-man__blk--prin[data-in="1"] .sb8-man__p{opacity:1;transform:none}
.sb8-man__p em{font-style:normal;font-family:var(--sb8-mono);font-size:10px;
  letter-spacing:.2em;color:#8FA3BF}
.sb8-man__p h3{margin:0;color:#F2F7FD;font-family:var(--sb8-display,var(--sb8-sans));
  font-weight:700;font-size:clamp(17px,1.35vw,20px);line-height:1.22;letter-spacing:-.01em}
.sb8-man__p p{margin:0;color:#B9CADF;font-size:14px;line-height:1.55}
.sb8-man__foot{margin:clamp(18px,2vw,26px) 0 0;color:#8398B5;
  font-size:13px;line-height:1.6;max-width:70ch}

/* Smal: één kolom, de lijn blijft de verbinding maar wordt smaller. */
@media (max-width:899px){
  .sb8-man__in{gap:clamp(44px,7vh,72px);padding-block:clamp(56px,8vh,86px)}
  .sb8-man__rail{width:9px}
  .sb8-man__track,.sb8-man__fill{left:4px}
  .sb8-man__node{width:9px;height:9px}
  .sb8-man__blk{padding-left:26px}
  .sb8-man__st,.sb8-man__st--wide{max-width:none;font-size:clamp(26px,7.4vw,34px)}
  .sb8-man__sup{font-size:15px;max-width:none}
  .sb8-man__prin{grid-template-columns:minmax(0,1fr)}
  .sb8-man__p{padding:16px 0}
}
@media (prefers-reduced-motion:reduce){
  .sb8-man__blk,.sb8-man__p{opacity:1;transform:none;transition:none}
  .sb8-man__fill{height:100%}
  .sb8-man__node{background:var(--sb8-signal,#00E5A8);border-color:transparent}
}

/* ============================================================
   OVERDRACHT: contactbevestiging naar projectbrief
   ============================================================
   Het succesblok was een doodlopend eind: alleen een bedanktekst. Nu staat de
   volgende stap er direct onder, met een echte link zodat hij ook zonder
   JavaScript werkt. */
.sb-next{display:grid;gap:12px;justify-items:start}
.sb-next__k{margin:0;font-family:var(--sb8-display,var(--sb8-sans));font-weight:700;
  font-size:clamp(17px,1.5vw,21px);line-height:1.3;color:#0B1B2E;letter-spacing:-.01em}
.sb-next__b{margin:0;font-size:15px;line-height:1.6;color:#3C526B;max-width:52ch}
.sb-next__cta{margin-top:4px}
.sb-next__n{margin:0;font-size:12.5px;line-height:1.5;color:#5A6E8C}
/* Het succesblok is altijd een lichte kaart, ook binnen een donkere sectie.
   De inkt blijft daarom donker; de tokenlaag mag hem niet wit maken. */
.sb-form-msg--ok .sb-next__k,.sb-next .sb-next__k{color:#0B1B2E}
.sb-form-msg--ok .sb-next__b,.sb-next .sb-next__b{color:#3C526B}
.sb-form-msg--ok .sb-next__n,.sb-next .sb-next__n{color:#54688A}
.sb-form-msg--ok{--sb-on-dark-ink:#0B1B2E;--sb-on-dark-body:#3C526B;
  --sb-on-dark-sec:#5A6E8C;--sb-on-dark-meta:#5A6E8C;--sb-on-dark-acc:#04624A}


/* ==================================================================
   OVER ONS — OPENING, CHINA/NETWERK EN PRODUCTIELIJN
   ================================================================== */

/* ---------- opening ---------- */
.sb8-ab{background:var(--sb8-ink);position:relative;overflow:hidden;
  padding:clamp(56px,7vw,104px) 0 clamp(30px,3.4vw,52px)}
.sb8-ab__grid{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:1024px){
  .sb8-ab__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(40px,5vw,84px)}
}
.sb8-ab__copy{min-width:0}
.sb8-ab__lbl,.sb8-ab__h,.sb8-ab__lead,.sb8-ab__proof{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--sb8-ease),transform .7s var(--sb8-ease)}
.sb8-ab[data-in="1"] .sb8-ab__lbl{opacity:1;transform:none;transition-delay:.05s}
.sb8-ab[data-in="1"] .sb8-ab__h{opacity:1;transform:none;transition-delay:.14s}
.sb8-ab[data-in="1"] .sb8-ab__lead{opacity:1;transform:none;transition-delay:.42s}
.sb8-ab[data-in="1"] .sb8-ab__proof{opacity:1;transform:none;transition-delay:.54s}
.sb8-ab__h{margin:12px 0 0;font-family:var(--sb8-display);font-weight:700;
  font-size:var(--sb8-d1);line-height:1.04;letter-spacing:-.025em;color:var(--sb-on-dark-ink,#F2F7FD);max-width:15ch}
.sb8-ab__lead{margin:clamp(16px,1.8vw,24px) 0 0;max-width:48ch;color:var(--sb-on-dark-body,#B9CADF)}
.sb8-ab__proof{list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;display:grid;gap:10px}
.sb8-ab__proof li{position:relative;padding-left:26px;font-size:var(--sb8-body);
  color:var(--sb-on-dark-body,#B9CADF)}
.sb8-ab__tick{position:absolute;left:0;top:.52em;width:12px;height:2px;border-radius:2px;
  background:var(--sb8-signal)}

.sb8-ab__shot{margin:0;position:relative}
.sb8-ab__mask{display:block;position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--sb8-dark-line);
  clip-path:inset(0 calc((1 - var(--abp,1)) * 26%) 0 0 round 16px);
  transition:clip-path .1s linear}
.sb8-ab__mask img{display:block;width:100%;height:auto;
  transform:scale(calc(1 + (1 - var(--abp,1)) * .05));transition:transform .1s linear}
.sb8-ab__mask::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,31,.06),rgba(4,16,31,.42))}
.sb8-ab__node{position:absolute;right:calc((1 - var(--abp,1)) * 26%);top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--sb8-signal),transparent);
  opacity:calc(1 - var(--abp,1));z-index:2}
.sb8-ab__cap{margin:12px 0 0;font-family:var(--sb8-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sb-on-dark-meta,#8FA3BF)}

/* bewijsregel */
.sb8-ab__ledgerwrap{position:relative;margin-top:clamp(34px,4vw,62px);
  padding-top:clamp(24px,2.6vw,36px);border-top:1px solid var(--sb8-dark-line)}
.sb8-led{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.6vw,34px)}
@media(min-width:760px){.sb8-led{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sb8-led__i{display:grid;gap:6px;align-content:start;
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--sb8-ease),transform .6s var(--sb8-ease)}
.sb8-led__i[data-on="1"]{opacity:1;transform:none}
.sb8-led__i:nth-child(2){transition-delay:.1s}
.sb8-led__i:nth-child(3){transition-delay:.2s}
.sb8-led__k{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.17em;
  color:var(--sb8-signal)}
.sb8-led__v{font-family:var(--sb8-display);font-weight:700;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(26px,2.9vw,44px);color:var(--sb-on-dark-ink,#F2F7FD)}
.sb8-led__n{font-size:14px;color:var(--sb-on-dark-sec,#8398B5)}
.sb8-led__rail{display:block;position:relative;height:1px;margin-top:clamp(22px,2.6vw,34px);
  background:var(--sb8-dark-line)}
.sb8-led__fill{position:absolute;left:0;top:0;height:100%;width:calc(var(--lp,0) * 100%);
  background:linear-gradient(90deg,rgba(0,229,168,.25),var(--sb8-signal))}
.sb8-led__fill::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--sb8-signal);box-shadow:0 0 0 4px rgba(0,229,168,.18);
  opacity:var(--lp,0)}
.sb8-led__foot{margin:14px 0 0;font-size:13px;color:var(--sb-on-dark-meta,#8FA3BF);max-width:70ch}

/* ---------- China en netwerk ---------- */
.sb8-cn{background:#04101F;position:relative;overflow:hidden;
  padding:clamp(44px,5.4vw,84px) 0 clamp(56px,6.6vw,100px)}
.sb8-cn__head{max-width:74ch}
.sb8-cn__head .sb8-d2{margin:12px 0 0;color:var(--sb-on-dark-ink,#F2F7FD)}
.sb8-cn__intro{margin-top:clamp(16px,2vw,26px);display:grid;gap:14px;max-width:62ch}
.sb8-cn__b{margin:0;font-size:var(--sb8-body);line-height:1.62;color:var(--sb-on-dark-body,#B9CADF)}
.sb8-cn__head .sb8-lead{margin:0;color:var(--sb-on-dark-body,#B9CADF)}

.sb8-cn__seq{margin-top:clamp(34px,4.4vw,66px);display:grid;gap:clamp(16px,2vw,26px)}
@media(min-width:1024px){
  .sb8-cn__seq{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
    grid-template-areas:"a b" "a c";align-items:stretch}
  .sb8-cn__shot--a{grid-area:a}
  .sb8-cn__shot--b{grid-area:b}
  .sb8-cn__shot--c{grid-area:c}
}
.sb8-cn__shot{margin:0;position:relative;
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--sb8-ease),transform .7s var(--sb8-ease)}
.sb8-cn__shot[data-in="1"]{opacity:1;transform:none}
.sb8-cn__shot--b{transition-delay:.08s}
.sb8-cn__shot--c{transition-delay:.16s}
.sb8-cn__mask{display:block;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--sb8-dark-line)}
/* Elke foto krijgt zijn eigen verhouding. Geen height:100% in het masker:
   dat botst met aspect-ratio en liet de reeks op mobiel over de volgende
   blok heen lopen. */
.sb8-cn__shot{align-self:start}
.sb8-cn__shot--a .sb8-cn__mask{aspect-ratio:4/4.7}
.sb8-cn__shot--a .sb8-cn__mask img{object-position:center 30%}
.sb8-cn__shot--b .sb8-cn__mask,.sb8-cn__shot--c .sb8-cn__mask{aspect-ratio:16/10}
.sb8-cn__shot--c .sb8-cn__mask img{object-position:center 42%}
@media(max-width:1023px){
  .sb8-cn__shot--a .sb8-cn__mask{aspect-ratio:4/4.2}
}
.sb8-cn__mask img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--sb8-ease),filter .6s var(--sb8-ease)}
.sb8-cn__mask::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,31,0) 52%,rgba(4,16,31,.5));
  transition:opacity .5s var(--sb8-ease)}
.sb8-cn__shot figcaption{display:flex;align-items:center;gap:9px;margin-top:11px;
  font-family:var(--sb8-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sb-on-dark-meta,#8FA3BF);opacity:.55;transition:opacity .4s var(--sb8-ease),color .4s var(--sb8-ease)}
.sb8-cn__shot figcaption i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(168,188,216,.4);transition:background-color .4s,border-color .4s}
/* de actieve foto is helderder; de andere blijven zichtbaar maar rustiger */
@media(min-width:1024px){
  .sb8-cn__seq[data-cn-active] .sb8-cn__shot .sb8-cn__mask img{filter:saturate(.72) brightness(.78)}
  .sb8-cn__seq[data-cn-active="0"] .sb8-cn__shot--a .sb8-cn__mask img,
  .sb8-cn__seq[data-cn-active="1"] .sb8-cn__shot--b .sb8-cn__mask img,
  .sb8-cn__seq[data-cn-active="2"] .sb8-cn__shot--c .sb8-cn__mask img{filter:none;transform:scale(1.02)}
  .sb8-cn__seq[data-cn-active="0"] .sb8-cn__shot--a figcaption,
  .sb8-cn__seq[data-cn-active="1"] .sb8-cn__shot--b figcaption,
  .sb8-cn__seq[data-cn-active="2"] .sb8-cn__shot--c figcaption{opacity:1;color:var(--sb8-signal)}
  .sb8-cn__seq[data-cn-active="0"] .sb8-cn__shot--a figcaption i,
  .sb8-cn__seq[data-cn-active="1"] .sb8-cn__shot--b figcaption i,
  .sb8-cn__seq[data-cn-active="2"] .sb8-cn__shot--c figcaption i{background:var(--sb8-signal);border-color:transparent}
}

/* video */
.sb8-cn__film{margin-top:clamp(32px,3.8vw,58px);display:grid;gap:clamp(22px,3vw,44px);align-items:center}
@media(min-width:900px){
  .sb8-cn__film{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
}
.sb8-cn__filmcopy{position:relative;padding-left:clamp(16px,2vw,26px)}
.sb8-cn__filmcopy::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,var(--sb8-signal),rgba(0,229,168,.08))}
.sb8-cn__filmcopy .sb8-d3{margin:0 0 14px;color:var(--sb-on-dark-ink,#F2F7FD)}
.sb8-cn__vcap{margin:14px 0 0;font-family:var(--sb8-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sb-on-dark-meta,#8FA3BF)}
.sb8-cn__vwrap{margin:0;position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--sb8-dark-line);background:#02090F;
  max-width:360px;width:100%;justify-self:start}
@media(min-width:900px){.sb8-cn__vwrap{justify-self:end;max-width:268px}}
.sb8-cn__video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#02090F}
.sb8-cn__vframe{position:absolute;inset:0;pointer-events:none;border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(168,188,216,.12),inset 0 -70px 90px -60px rgba(4,16,31,.9)}
.sb8-cn__vtag{position:absolute;left:10px;bottom:10px;z-index:2;
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.16em;
  padding:4px 7px;border-radius:5px;color:#CFE0F2;
  background:rgba(4,16,31,.62);border:1px solid rgba(168,188,216,.2)}
.sb8-cn__vwrap[data-mode="stil"] .sb8-cn__vtag{display:none}

/* netwerk */
.sb8-cn__net{margin-top:clamp(34px,4.2vw,64px);display:grid;gap:clamp(22px,3vw,48px);align-items:center}
@media(min-width:900px){
  .sb8-cn__net{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.sb8-cn__netcopy .sb8-d3{margin:0 0 14px;color:var(--sb-on-dark-ink,#F2F7FD)}
.sb8-cn__note{margin:14px 0 0;padding-left:14px;border-left:1px solid rgba(0,229,168,.4);
  font-size:14px;line-height:1.6;color:var(--sb-on-dark-sec,#8398B5)}

/* ---------- productielijn / capability flow ---------- */
.sb8-pl{background:var(--sb8-navy);position:relative;overflow:hidden;
  padding:clamp(56px,6.8vw,104px) 0 clamp(60px,7vw,108px)}
.sb8-pl__aura{position:absolute;left:50%;top:-18%;width:min(1100px,110vw);height:60%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(60% 60% at 50% 40%,rgba(0,229,168,.09),transparent 72%)}
.sb8-pl__head{position:relative;max-width:74ch}
.sb8-pl__head .sb8-d2{margin:12px 0 0;color:var(--sb-on-dark-ink,#F2F7FD)}
.sb8-pl__lead{margin:clamp(14px,1.8vw,22px) 0 0;max-width:56ch;color:var(--sb-on-dark-body,#B9CADF)}
.sb8-pl__arc{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:clamp(18px,2.2vw,28px) 0 0;
  font-family:var(--sb8-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sb-on-dark-meta,#8FA3BF)}
.sb8-pl__arc span{white-space:nowrap}
.sb8-pl__arc i{display:block;width:16px;height:1px;background:linear-gradient(90deg,rgba(0,229,168,.15),var(--sb8-signal))}

.sb8-pl__line{list-style:none;margin:clamp(34px,4.2vw,60px) 0 0;padding:0;position:relative;
  display:grid;gap:clamp(22px,2.4vw,26px)}
@media(min-width:1000px){
  .sb8-pl__line{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.3vw,20px);padding-top:0}
}
.sb8-pl__rail{position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--sb8-dark-line)}
.sb8-pl__fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--plp,0) * 100%);
  background:linear-gradient(180deg,var(--sb8-signal),rgba(0,229,168,.28))}
@media(min-width:1000px){
  .sb8-pl__rail{left:0;right:0;top:5px;bottom:auto;width:auto;height:1px}
  .sb8-pl__fill{height:100%;width:calc(var(--plp,0) * 100%);
    background:linear-gradient(90deg,rgba(0,229,168,.3),var(--sb8-signal))}
}
.sb8-pl__step{position:relative;padding-left:30px;
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--sb8-ease),transform .65s var(--sb8-ease)}
.sb8-pl__step[data-on="1"]{opacity:1;transform:none}
@media(min-width:1000px){.sb8-pl__step{padding-left:0;padding-top:30px}}
.sb8-pl__dot{position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--sb8-navy);border:1px solid rgba(168,188,216,.45);
  transition:background-color .35s,border-color .35s,box-shadow .35s}
@media(min-width:1000px){.sb8-pl__dot{left:0;top:0}}
.sb8-pl__step[data-on="1"] .sb8-pl__dot{background:var(--sb8-signal);border-color:transparent;
  box-shadow:0 0 0 4px rgba(0,229,168,.16),0 0 16px rgba(0,229,168,.45)}

.sb8-pl__card{position:relative;border-radius:14px;padding:clamp(16px,1.5vw,20px);height:100%;
  border:1px solid rgba(168,188,216,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.012));
  transition:transform .4s var(--sb8-ease-out),border-color .4s var(--sb8-ease),box-shadow .4s var(--sb8-ease)}
.sb8-pl__card::after{content:"";position:absolute;inset:-1px;border-radius:15px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,229,168,.22),transparent 55%);
  opacity:0;transition:opacity .4s var(--sb8-ease);mix-blend-mode:screen}
.sb8-pl__step:hover .sb8-pl__card,.sb8-pl__step:focus-within .sb8-pl__card{
  transform:translateY(-4px);border-color:rgba(0,229,168,.36);
  box-shadow:0 18px 40px -26px rgba(0,229,168,.5)}
.sb8-pl__step:hover .sb8-pl__card::after{opacity:1}
.sb8-pl__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.sb8-pl__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  color:var(--sb8-signal);border:1px solid rgba(0,229,168,.26);background:rgba(0,229,168,.08);
  transition:box-shadow .4s var(--sb8-ease),background-color .4s var(--sb8-ease)}
.sb8-pl__ico svg{width:20px;height:20px;display:block}
.sb8-pl__step[data-on="1"] .sb8-pl__ico{box-shadow:0 0 18px -4px rgba(0,229,168,.45)}
.sb8-pl__n{font-family:var(--sb8-mono);font-size:10px;letter-spacing:.18em;color:rgba(168,188,216,.55)}
.sb8-pl__t{margin:0 0 8px;font-family:var(--sb8-display);font-weight:600;
  font-size:clamp(16px,1.35vw,20px);line-height:1.2;letter-spacing:-.015em;color:var(--sb-on-dark-ink,#F2F7FD)}
.sb8-pl__b{margin:0;font-size:14px;line-height:1.6;color:var(--sb-on-dark-body,#B9CADF)}
.sb8-pl__note{margin:clamp(26px,3vw,40px) 0 0;font-size:13px;color:var(--sb-on-dark-meta,#8FA3BF);max-width:76ch}

/* ---------- drie principes in het manifest ---------- */
.sb8-man__prin{display:grid;gap:clamp(14px,1.6vw,20px);margin-top:clamp(16px,2vw,26px)}
@media(min-width:860px){.sb8-man__prin{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sb8-man__p{position:relative;border-radius:14px;padding:clamp(18px,1.8vw,26px);
  border:1px solid rgba(168,188,216,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  transition:transform .4s var(--sb8-ease-out),border-color .4s var(--sb8-ease),box-shadow .4s var(--sb8-ease)}
.sb8-man__p::before{content:"";position:absolute;left:clamp(18px,1.8vw,26px);top:-4px;width:7px;height:7px;
  border-radius:50%;background:var(--sb8-signal);box-shadow:0 0 0 4px rgba(4,16,31,1),0 0 14px rgba(0,229,168,.55)}
.sb8-man__p:hover,.sb8-man__p:focus-within{transform:translateY(-4px);border-color:rgba(0,229,168,.34);
  box-shadow:0 20px 44px -28px rgba(0,229,168,.5)}
.sb8-man__p em{display:block;font-style:normal;font-family:var(--sb8-mono);font-size:10px;
  letter-spacing:.2em;color:var(--sb8-signal);margin-bottom:12px}
.sb8-man__p h3{margin:0 0 8px;font-family:var(--sb8-display);font-weight:600;
  font-size:clamp(17px,1.5vw,22px);line-height:1.2;letter-spacing:-.015em;color:var(--sb-on-dark-ink,#F2F7FD)}
.sb8-man__p p{margin:0;font-size:14px;line-height:1.62;color:var(--sb-on-dark-body,#B9CADF)}

/* ---------- standpunt ---------- */
.sb8-st{background:var(--sb8-ink);position:relative;overflow:hidden;
  padding:clamp(48px,5.6vw,86px) 0 clamp(56px,6.4vw,98px)}
.sb8-st__aura{position:absolute;right:-12%;top:8%;width:min(760px,86vw);height:70%;pointer-events:none;
  background:radial-gradient(50% 50% at 60% 40%,rgba(44,99,168,.16),transparent 70%)}
.sb8-st__head{position:relative;max-width:70ch}
.sb8-st__head .sb8-d2{margin:12px 0 0;color:var(--sb-on-dark-ink,#F2F7FD)}
.sb8-st__lead{position:relative;display:grid;gap:clamp(18px,2.2vw,32px);
  margin:clamp(28px,3.2vw,46px) 0 0;padding-bottom:clamp(28px,3.2vw,44px);
  border-bottom:1px solid var(--sb8-dark-line)}
@media(min-width:860px){.sb8-st__lead{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sb8-st__ld{position:relative;padding-left:18px}
.sb8-st__ld::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:1px;
  background:linear-gradient(180deg,var(--sb8-signal),rgba(0,229,168,.08))}
.sb8-st__ldk{display:block;font-family:var(--sb8-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sb8-signal);margin-bottom:10px}
.sb8-st__ldb{margin:0;font-size:var(--sb8-body);line-height:1.66;color:var(--sb-on-dark-body,#B9CADF);max-width:52ch}

.sb8-st__grid{position:relative;display:grid;gap:clamp(14px,1.6vw,20px);margin-top:clamp(28px,3.2vw,44px)}
@media(min-width:900px){.sb8-st__grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sb8-st__grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sb8-st__p{position:relative;border-radius:15px;padding:clamp(20px,2vw,28px);
  border:1px solid rgba(168,188,216,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  transition:transform .4s var(--sb8-ease-out),border-color .4s var(--sb8-ease),box-shadow .4s var(--sb8-ease)}
.sb8-st__p:hover,.sb8-st__p:focus-within{transform:translateY(-4px);
  border-color:rgba(0,229,168,.3);box-shadow:0 22px 48px -30px rgba(0,229,168,.45)}
.sb8-st__p[data-toon="nee"]:hover{border-color:rgba(168,188,216,.34);
  box-shadow:0 22px 48px -30px rgba(168,188,216,.34)}
.sb8-st__pn{display:block;font-family:var(--sb8-mono);font-size:10px;letter-spacing:.2em;
  color:var(--sb8-signal);margin-bottom:12px}
.sb8-st__p[data-toon="nee"] .sb8-st__pn{color:var(--sb-on-dark-meta,#8FA3BF)}
.sb8-st__pt{margin:0 0 14px;font-family:var(--sb8-display);font-weight:600;
  font-size:clamp(17px,1.5vw,22px);line-height:1.2;letter-spacing:-.015em;color:var(--sb-on-dark-ink,#F2F7FD)}
.sb8-st__list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sb8-st__list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.55;
  color:var(--sb-on-dark-body,#B9CADF)}
.sb8-st__list i{position:absolute;left:0;top:.52em;width:11px;height:1px;border-radius:2px;
  background:var(--sb8-signal)}
.sb8-st__p[data-toon="richting"] .sb8-st__list i{background:rgba(0,229,168,.55)}
.sb8-st__p[data-toon="nee"] .sb8-st__list i{background:rgba(168,188,216,.45)}
.sb8-st__p[data-toon="nee"] .sb8-st__list li{color:var(--sb-on-dark-sec,#8398B5)}
.sb8-st__note{margin:clamp(24px,2.8vw,38px) 0 0;font-size:13px;color:var(--sb-on-dark-meta,#8FA3BF);max-width:76ch}

/* ---------- afsluiter ---------- */
.sb8-cl{background:var(--sb8-navy);position:relative;overflow:hidden;
  padding:clamp(56px,6.6vw,100px) 0 clamp(48px,5.4vw,80px)}
.sb8-cl__aura{position:absolute;left:-8%;bottom:-24%;width:min(900px,100vw);height:80%;pointer-events:none;
  background:radial-gradient(50% 50% at 40% 60%,rgba(0,229,168,.12),transparent 70%)}
.sb8-cl__in{position:relative;display:grid;gap:clamp(32px,4vw,64px);align-items:start}
@media(min-width:1000px){.sb8-cl__in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.sb8-cl__h{margin:12px 0 0;color:var(--sb-on-dark-ink,#F2F7FD);max-width:16ch}
.sb8-cl__lead{margin:clamp(16px,1.8vw,24px) 0 0;max-width:46ch;color:var(--sb-on-dark-body,#B9CADF)}
.sb8-cl__chips{list-style:none;margin:clamp(20px,2.2vw,28px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sb8-cl__chips li{padding:6px 12px;border-radius:999px;font-family:var(--sb8-mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--sb-on-dark-body,#B9CADF);
  border:1px solid rgba(168,188,216,.2);background:rgba(255,255,255,.03);
  transition:border-color .3s var(--sb8-ease),color .3s var(--sb8-ease)}
.sb8-cl__chips li:hover{border-color:rgba(0,229,168,.42);color:#F2F7FD}
.sb8-cl__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:clamp(24px,2.8vw,34px)}
.sb8-cl__alt{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;
  color:var(--sb8-signal);text-decoration:none}
.sb8-cl__alt i{display:block;width:16px;height:1px;background:currentColor;
  transition:width .3s var(--sb8-ease)}
.sb8-cl__alt:hover i{width:26px}

.sb8-cl__pts{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sb8-cl__pt{position:relative;padding:clamp(16px,1.8vw,22px) 0 clamp(16px,1.8vw,22px) 28px;
  border-bottom:1px solid var(--sb8-dark-line)}
.sb8-cl__pt:first-child{padding-top:0}
.sb8-cl__pt:last-child{border-bottom:0;padding-bottom:0}
.sb8-cl__node{position:absolute;left:0;top:calc(clamp(16px,1.8vw,22px) + .42em);width:9px;height:9px;
  border-radius:50%;background:var(--sb8-signal);box-shadow:0 0 0 4px rgba(0,229,168,.14),0 0 14px rgba(0,229,168,.4)}
.sb8-cl__pt:first-child .sb8-cl__node{top:.42em}
.sb8-cl__pt::after{content:"";position:absolute;left:4px;top:calc(clamp(16px,1.8vw,22px) + 1.4em);bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(0,229,168,.3),rgba(168,188,216,.08))}
.sb8-cl__pt:last-child::after{display:none}
.sb8-cl__pt:first-child::after{top:1.4em}
.sb8-cl__ptk{display:block;font-family:var(--sb8-display);font-weight:600;font-size:clamp(16px,1.3vw,19px);
  line-height:1.24;letter-spacing:-.012em;color:var(--sb-on-dark-ink,#F2F7FD);margin-bottom:6px}
.sb8-cl__ptb{margin:0;font-size:14.5px;line-height:1.6;color:var(--sb-on-dark-body,#B9CADF);max-width:44ch}
.sb8-cl__note{position:relative;margin:clamp(30px,3.4vw,46px) 0 0;font-size:13px;
  color:var(--sb-on-dark-meta,#8FA3BF);max-width:76ch}

@media(prefers-reduced-motion:reduce){
  .sb8-pl__card,.sb8-man__p,.sb8-st__p,.sb8-cl__chips li,.sb8-cl__alt i{transition:none}
  .sb8-pl__step:hover .sb8-pl__card,.sb8-man__p:hover,.sb8-st__p:hover{transform:none}
}

@media(max-width:899px){
  .sb8-cn__vwrap{max-width:100%;justify-self:stretch}
  .sb8-cn__video{aspect-ratio:3/4}
}
@media(prefers-reduced-motion:reduce){
  .sb8-ab__lbl,.sb8-ab__h,.sb8-ab__lead,.sb8-ab__proof,.sb8-led__i,
  .sb8-cn__shot,.sb8-pl__step{opacity:1!important;transform:none!important;transition:none}
  .sb8-ab__mask{clip-path:none}
  .sb8-ab__mask img,.sb8-cn__mask img{transform:none!important;transition:none}
  .sb8-ab__node{display:none}
  .sb8-pl__swatch i,.sb8-pl__boxtop,.sb8-pl__label,.sb8-pl__supply i,.sb8-pl__word{transition:none}
}

/* ==================================================================
   PRIVATE LABEL — vijfde route

   Route Finder-wereld (White Label Studio), journeyscènes en de vijfde
   hint in de ruststand. Alles in dezelfde donkere signatuur; de groene
   node dockt op het label dat op de doos landt.
   ================================================================== */

/* vijfde hint in de routekaart: een doosje */
.sb8-rf__hint[data-hint="pack"] b{width:22px;height:13px;border-radius:2px}
.sb8-rf__hint[data-hint="pack"] u{position:absolute;left:5px;top:4px;width:12px;height:5px;border-radius:1px;
  background:rgba(0,229,168,.5)}

/* ---------- Route Finder wereld ---------- */
.sb8-w--pl{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.8vw,26px)}

.sb8-pl3__bench{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,40px)}
.sb8-pl3__brand{display:grid;gap:7px;padding:11px 13px;border-radius:9px;min-width:0;
  border:1px solid var(--jr-line);background:rgba(255,255,255,.035);
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.sb8-rf__world.is-live .sb8-w--pl .sb8-pl3__brand{opacity:1;transform:none;transition-delay:.05s}
.sb8-pl3__brand b{font-family:var(--sb8-display);font-size:13px;font-weight:600;color:#fff;letter-spacing:-.01em}
.sb8-pl3__brand em{font-style:normal;font-family:var(--sb8-mono);font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--jr-mute)}
.sb8-pl3__sw{display:flex;gap:5px}
.sb8-pl3__sw s{display:block;width:16px;height:16px;border-radius:4px;text-decoration:none;
  background:rgba(168,188,216,.22);transform:scale(.4);opacity:0;
  transition:transform .45s cubic-bezier(.22,.68,.28,1),opacity .35s ease,background-color .4s ease}
.sb8-rf__world.is-live .sb8-w--pl .sb8-pl3__sw s{transform:none;opacity:1;
  transition-delay:calc(.25s + var(--i) * .1s)}
.sb8-rf__world.is-live .sb8-w--pl .sb8-pl3__sw s:nth-child(2){background:var(--jr-sig)}
.sb8-rf__world.is-live .sb8-w--pl .sb8-pl3__sw s:nth-child(3){background:rgba(168,188,216,.4)}

.sb8-pl3__pack{position:relative;width:clamp(96px,12vw,136px);aspect-ratio:1/.92;flex:0 0 auto}
.sb8-pl3__pack s{position:absolute;text-decoration:none;border-radius:3px;border:1px solid rgba(168,188,216,.34)}
.sb8-pl3__front{left:0;bottom:0;width:78%;height:62%;background:rgba(255,255,255,.05)}
.sb8-pl3__side{right:0;bottom:8%;width:26%;height:54%;background:rgba(255,255,255,.028);
  transform:skewY(-14deg);transform-origin:left bottom}
.sb8-pl3__lid{left:0;top:16%;width:78%;height:20%;background:rgba(255,255,255,.04);
  transform:translateY(12px) scaleY(.2);transform-origin:bottom center;opacity:0;
  transition:transform .6s cubic-bezier(.22,.68,.28,1),opacity .4s ease}
.sb8-rf__world.is-live .sb8-w--pl .sb8-pl3__lid{transform:none;opacity:1;transition-delay:.5s}
.sb8-pl3__label{position:absolute;left:14%;bottom:20%;width:50%;height:26%;border-radius:2px;
  background:rgba(0,229,168,.16);border:1px solid rgba(0,229,168,.5);
  display:grid;align-content:center;gap:4px;padding:0 7px;
  opacity:0;transform:translateX(-26px) rotate(-6deg);
  transition:opacity .4s ease,transform .55s cubic-bezier(.22,.68,.28,1)}
.sb8-rf__world.is-live .sb8-w--pl .sb8-pl3__label{opacity:1;transform:none;transition-delay:.95s}
.sb8-pl3__label em{display:block;height:2px;border-radius:1px;background:rgba(0,229,168,.75)}
.sb8-pl3__label em:last-child{width:62%;background:rgba(255,255,255,.4)}
.sb8-pl3__label .sb8-w__dock{position:absolute;right:-4px;top:50%;width:1px;height:1px}

.sb8-pl3__chain{position:relative;display:flex;align-items:flex-start;justify-content:space-between;
  gap:8px;padding-top:14px}
.sb8-pl3__line{position:absolute;left:6%;right:6%;top:14px;height:1px;background:var(--jr-line)}
.sb8-pl3__line s{display:block;height:100%;width:0;text-decoration:none;background:var(--jr-sig);
  transition:width 1.1s cubic-bezier(.22,.68,.28,1) .9s}
.sb8-rf__world.is-live .sb8-w--pl .sb8-pl3__line s{width:100%}
.sb8-pl3__node{position:relative;display:grid;justify-items:center;gap:7px;flex:1 1 0;min-width:0}
.sb8-pl3__node u{display:block;width:9px;height:9px;border-radius:50%;background:#04101F;
  border:1px solid rgba(168,188,216,.45);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.sb8-rf__world.is-live .sb8-w--pl .sb8-pl3__node u{background:var(--jr-sig);border-color:transparent;
  box-shadow:0 0 0 4px rgba(0,229,168,.14);transition-delay:calc(1s + var(--i) * .26s)}
.sb8-pl3__node b{font-family:var(--sb8-mono);font-size:8px;letter-spacing:.14em;color:var(--jr-mute);
  text-align:center;transition:color .3s ease}
.sb8-rf__world.is-live .sb8-w--pl .sb8-pl3__node b{color:#fff;transition-delay:calc(1.1s + var(--i) * .26s)}

/* compacte verticale rail, alleen in het mobiele paneel */
.sb8-pl3__rail{display:none}
.sb8-pl3__rline{position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--jr-line)}
.sb8-pl3__rline s{display:block;width:100%;height:0;text-decoration:none;background:var(--jr-sig);
  transition:height 1s cubic-bezier(.22,.68,.28,1) .2s}
.sb8-pl3__rstep{position:relative;display:flex;align-items:center;gap:10px;padding-left:20px}
.sb8-pl3__rstep i{position:absolute;left:0;top:50%;margin-top:-4.5px;width:9px;height:9px;border-radius:50%;
  background:#04101F;border:1px solid rgba(168,188,216,.45);transition:background-color .3s,border-color .3s}
.sb8-pl3__rstep b{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.14em;color:var(--jr-mute);
  transition:color .3s ease}

@media(max-width:999px){
  .sb8-rf__inline .sb8-w--pl .sb8-pl3__bench,
  .sb8-rf__inline .sb8-w--pl .sb8-pl3__chain{display:none}
  .sb8-rf__inline .sb8-w--pl .sb8-pl3__rail{position:relative;display:grid;gap:12px;padding:4px 0}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-w--pl .sb8-pl3__rline s{height:100%}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-w--pl .sb8-pl3__rstep i{background:var(--jr-sig);border-color:transparent}
  .sb8-rf__item.is-on .sb8-rf__inline .sb8-w--pl .sb8-pl3__rstep b{color:#fff}
}

/* ---------- journey: 01 generiek product ---------- */
.jp-a{display:grid;place-items:center;height:100%}
.jp-a__shelf{display:flex;align-items:flex-end;gap:clamp(10px,1.6vw,22px)}
.jp-a__box{position:relative;width:clamp(44px,5.4vw,66px);aspect-ratio:1/1.16;border-radius:4px;
  border:1px dashed rgba(168,188,216,.34);background:rgba(255,255,255,.028);
  opacity:.5;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease,border-color .5s ease,background-color .5s ease;
  transition-delay:calc(var(--i) * 90ms)}
.jp-a__box s{position:absolute;left:18%;top:42%;width:64%;height:2px;border-radius:1px;text-decoration:none;
  background:rgba(168,188,216,.3)}
.jp-a__box u{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-family:var(--sb8-mono);
  font-size:8.5px;letter-spacing:.14em;color:var(--jr-sig);opacity:0;transition:opacity .5s ease .5s}
[data-jr-stop][data-on="1"] .jp-a__box{opacity:1;transform:none}
[data-jr-stop][data-on="1"] .jp-a__box--me{border-style:solid;border-color:rgba(0,229,168,.55);
  background:rgba(0,229,168,.08)}
[data-jr-stop][data-on="1"] .jp-a__box--me s{background:var(--jr-sig)}
[data-jr-stop][data-on="1"] .jp-a__box u{opacity:1}

/* ---------- journey: 02 de doos wordt opgebouwd ---------- */
.jp-b{display:grid;place-items:center;height:100%}
.jp-b__stage{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.jp-b__pack{position:relative;width:clamp(112px,14vw,164px);aspect-ratio:1/.92}
.jp-b__pack s{position:absolute;text-decoration:none;border-radius:3px;border:1px solid rgba(168,188,216,.34)}
.jp-b__front{left:0;bottom:0;width:78%;height:62%;background:rgba(255,255,255,.05)}
.jp-b__side{right:0;bottom:8%;width:26%;height:54%;background:rgba(255,255,255,.028);
  transform:skewY(-14deg);transform-origin:left bottom}
.jp-b__lid{left:0;top:16%;width:78%;height:20%;background:rgba(255,255,255,.04);
  transform:translateY(14px) scaleY(.2);transform-origin:bottom center;opacity:0;
  transition:transform .7s cubic-bezier(.22,.68,.28,1),opacity .45s ease}
.jp-b__label{position:absolute;left:14%;bottom:20%;width:50%;height:26%;border-radius:2px;
  background:rgba(0,229,168,.16);border:1px solid rgba(0,229,168,.5);
  display:grid;align-content:center;gap:5px;padding:0 8px;
  opacity:0;transform:translateX(-32px) rotate(-7deg);
  transition:opacity .45s ease,transform .65s cubic-bezier(.22,.68,.28,1)}
.jp-b__label em{display:block;height:2px;border-radius:1px;background:rgba(0,229,168,.75)}
.jp-b__label em:last-child{width:62%;background:rgba(255,255,255,.4)}
.jp-b__sw{display:grid;gap:7px}
.jp-b__sw s{display:block;width:20px;height:20px;border-radius:5px;text-decoration:none;
  background:rgba(168,188,216,.22);opacity:0;transform:scale(.5);
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,.68,.28,1),background-color .4s ease}
[data-jr-stop][data-on="1"] .jp-b__lid{transform:none;opacity:1;transition-delay:.15s}
[data-jr-stop][data-on="1"] .jp-b__label{opacity:1;transform:none;transition-delay:.6s}
[data-jr-stop][data-on="1"] .jp-b__sw s{opacity:1;transform:none;transition-delay:calc(var(--i) * .12s)}
[data-jr-stop][data-on="1"] .jp-b__sw s:nth-child(2){background:var(--jr-sig)}

/* ---------- journey: 03 band ---------- */
.jp-strip{display:grid;gap:clamp(12px,1.6vw,22px)}
@media(min-width:760px){.jp-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.jp-strip__col{display:grid;gap:9px;align-content:start;padding:clamp(14px,1.5vw,20px);
  border-radius:12px;border:1px solid var(--jr-line);background:rgba(255,255,255,.03);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .55s ease,border-color .35s ease;
  transition-delay:calc(var(--i) * 110ms)}
[data-jr-stop][data-on="1"] .jp-strip__col{opacity:1;transform:none}
.jp-strip__col:hover{border-color:rgba(0,229,168,.32)}
.jp-strip__col em{font-style:normal;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.18em;
  color:var(--jr-sig)}
.jp-strip__col s{display:block;height:1px;text-decoration:none;
  background:linear-gradient(90deg,rgba(0,229,168,.55),transparent)}
.jp-strip__col b{font-weight:400;font-size:13.5px;line-height:1.55;color:var(--jr-mute)}

/* ---------- journey: 04 de hele keten ---------- */
.jp-lab{display:grid;gap:18px;align-content:center;height:100%;width:100%}
.jp-lab__chain{position:relative;display:flex;align-items:flex-start;justify-content:space-between;
  gap:6px;padding-top:26px}
.jp-lab__rail{position:absolute;left:4%;right:4%;top:26px;height:1px;background:var(--jr-line)}
.jp-lab__rail s{display:block;height:100%;width:calc(var(--sp,0) * 100%);text-decoration:none;
  background:linear-gradient(90deg,rgba(0,229,168,.4),var(--jr-sig))}
.jp-lab__st{position:relative;display:grid;justify-items:center;gap:9px;flex:1 1 0;min-width:0;
  --a:clamp(0,calc((var(--sp,0) - var(--i) * .17) * 8),1)}
.jp-lab__ico{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  border:1px solid color-mix(in srgb,rgba(0,229,168,.55) calc(var(--a) * 100%),rgba(168,188,216,.3));
  background:color-mix(in srgb,rgba(0,229,168,.12) calc(var(--a) * 100%),rgba(255,255,255,.03))}
.jp-lab__ico::after{content:"";position:absolute;inset:-1px;border-radius:10px;pointer-events:none;
  box-shadow:0 0 18px -4px rgba(0,229,168,.6);opacity:var(--a)}
.jp-lab__ico s{position:absolute;text-decoration:none;border-radius:2px;
  background:color-mix(in srgb,var(--jr-sig) calc(var(--a) * 100%),rgba(168,188,216,.5))}
.jp-lab__ico--0 s{width:6px;height:6px;border-radius:2px}
.jp-lab__ico--0 s:nth-child(1){left:8px;top:14px}
.jp-lab__ico--0 s:nth-child(2){left:16px;top:14px}
.jp-lab__ico--0 s:nth-child(3){left:24px;top:14px}
.jp-lab__ico--1 s:nth-child(1){left:8px;top:16px;width:18px;height:10px;border-radius:2px;background:none;
  box-shadow:inset 0 0 0 1px rgba(168,188,216,.5)}
.jp-lab__ico--1 s:nth-child(2){left:10px;top:11px;width:14px;height:5px;border-radius:2px 2px 0 0;background:none;
  box-shadow:inset 0 0 0 1px rgba(168,188,216,.4)}
.jp-lab__ico--1 s:nth-child(3){display:none}
.jp-lab__ico--2 s:nth-child(1){left:9px;top:12px;width:16px;height:11px;border-radius:2px;background:none;
  box-shadow:inset 0 0 0 1px rgba(168,188,216,.5)}
.jp-lab__ico--2 s:nth-child(2){left:12px;top:16px;width:10px;height:2px}
.jp-lab__ico--2 s:nth-child(3){left:12px;top:19px;width:6px;height:2px}
.jp-lab__ico--3 s{width:6px;height:6px;border-radius:50%}
.jp-lab__ico--3 s:nth-child(1){left:7px;top:14px}
.jp-lab__ico--3 s:nth-child(2){left:14px;top:9px}
.jp-lab__ico--3 s:nth-child(3){left:21px;top:19px}
.jp-lab__ico--4 s{width:8px;height:8px;border-radius:2px}
.jp-lab__ico--4 s:nth-child(1){left:7px;top:17px}
.jp-lab__ico--4 s:nth-child(2){left:17px;top:17px}
.jp-lab__ico--4 s:nth-child(3){left:12px;top:9px}
.jp-lab__st b{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.13em;text-align:center;
  color:color-mix(in srgb,#FFFFFF calc(var(--a) * 100%),var(--jr-mute))}
.jp-lab__ico--1 s,.jp-lab__ico--2 s:nth-child(1){background:none!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,rgba(0,229,168,.8) calc(var(--a) * 100%),rgba(168,188,216,.5))}
.jp-lab__pkg{position:absolute;top:21px;left:calc(4% + var(--sp,0) * 88%);
  width:11px;height:11px;border-radius:3px;margin-left:-5px;
  background:var(--jr-sig);box-shadow:0 0 0 4px rgba(0,229,168,.16),0 0 16px rgba(0,229,168,.5)}
.jp-lab__cap{display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.18em}
.jp-lab__cap s{text-decoration:none;color:var(--jr-mute);opacity:.6}
.jp-lab__cap i{width:14px;height:1px;background:rgba(168,188,216,.35)}
.jp-lab__cap b{color:var(--jr-sig)}

@media(max-width:640px){
  .jp-lab__chain{gap:3px}
  .jp-lab__ico{width:28px;height:28px}
  .jp-lab__st b{font-size:7px;letter-spacing:.08em}
}

/* ---------- journey: 05 in het systeem ---------- */
.jr-sys--pl .jr-sys__hold em{color:var(--jr-sig)}

@media(prefers-reduced-motion:reduce){
  .sb8-pl3__lid,.sb8-pl3__label,.sb8-pl3__sw s,.sb8-pl3__brand,.sb8-pl3__node u,.sb8-pl3__node b,
  .jp-a__box,.jp-b__lid,.jp-b__label,.jp-b__sw s,.jp-strip__col,.jp-lab__ico,.jp-lab__st b,
  .jp-lab__pkg{transition:none!important}
  .sb8-pl3__lid,.sb8-pl3__label,.jp-b__lid,.jp-b__label{opacity:1;transform:none}
  .sb8-pl3__sw s,.jp-b__sw s{opacity:1;transform:none}
  .jp-a__box,.jp-strip__col{opacity:1;transform:none}
  .sb8-pl3__line s,.sb8-pl3__rline s{width:100%;height:100%}
}

/* toelichting onder de hoofdfoto van Over ons */
.sb8-ab__note{margin:10px 0 0;padding-left:14px;border-left:1px solid rgba(0,229,168,.42);
  font-size:14px;line-height:1.6;color:var(--sb-on-dark-sec,#8398B5);max-width:52ch}

/* ---------- private label · het lab-vlak ----------
   De keten stond eerst in een .jr-sc van 520px en hing daardoor links in een
   leeg vlak, terwijl de vier andere routes hun grote moment in het gedeelde
   .jr-lab__stage tonen. Nu dezelfde behuizing, met de keten verticaal
   gecentreerd zodat het paneel ook echt gevuld is. */
.jp-lab__stage{display:grid;align-content:center;justify-items:stretch;
  gap:clamp(22px,4.4vh,44px)}
.jp-lab__stage .jp-lab__chain{padding-inline:clamp(2px,1.6vw,22px)}
.jp-lab__stage .jp-lab__cap{margin-top:0}
@media (min-width:1000px){
  .jp-lab__stage .jp-lab__st b{font-size:9.5px;letter-spacing:.16em}
}

/* Het merklabel onder de eigen doos stond op de breedte van die doos, dus
   brak "Jouw merk" op een telefoon over twee regels en liep het door de
   GENERIEK / EIGEN MERK-regel eronder heen. Het onderstrepen kwam van de
   standaardstijl van <u>. */
.jp-a__box u{left:50%;right:auto;transform:translateX(-50%);
  white-space:nowrap;text-decoration:none}
.jp-a__shelf{margin-bottom:clamp(20px,3vh,28px)}

/* ============================================================
   MOBIELE DRAWER

   De oude drawer zette alle links als één doorlopende rij. Onder 750px
   maakt sb-mobile.css van .sb-drawer__link en .sb-drawer__sublink
   display:inline-flex, waardoor ze zich als tekst gingen gedragen en er
   letterlijk WebsitevoorbeeldenWerkwijze en Over onsContact op het scherm
   stond. De nieuwe opbouw gebruikt eigen klassen, dus die oude regels
   raken hem niet meer. Twee groepen, één link per regel, ruime tapzones.
   De desktopnavigatie blijft ongemoeid.
   ============================================================ */
.sb-drawer__panel{width:min(100vw,440px);
  background:linear-gradient(180deg,#0A1A2B 0%,var(--sb-deep-navy) 42%)}
.sb-drawer__panel::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;
  pointer-events:none;background:radial-gradient(120% 70% at 78% 0%,rgba(0,229,168,.10),transparent 70%)}
@media (max-width:480px){.sb-drawer__panel{width:100vw}}

.sb-drawer__head{position:relative;z-index:1;padding-top:calc(14px + env(safe-area-inset-top,0px))}
.sb-drawer__body{position:relative;z-index:1;
  padding:clamp(18px,4vw,26px) var(--sb-gutter) clamp(22px,5vw,32px)}

.sb-dnav{display:block}
.sb-dnav__group + .sb-dnav__group{margin-top:clamp(24px,5vw,34px);
  padding-top:clamp(22px,4.5vw,30px);border-top:1px solid rgba(168,188,216,.16)}

.sb-dnav__kop{display:flex;align-items:center;gap:9px;margin:0 0 6px;
  font-family:var(--sb-mono);font-size:.6875rem;font-weight:500;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(168,188,216,.7)}
.sb-dnav__kop::before{content:"";width:6px;height:6px;border-radius:2px;flex:0 0 auto;
  background:var(--sb-signal);box-shadow:0 0 0 3px rgba(0,229,168,.16)}

.sb-dnav__list{list-style:none;margin:0;padding:0}
.sb-dnav__row{margin:0;border-bottom:1px solid rgba(168,188,216,.1)}
.sb-dnav__row:last-child{border-bottom:0}

.sb-dnav__item{position:relative;display:flex;align-items:center;gap:11px;width:100%;
  min-height:58px;padding:15px 12px 15px 12px;margin-inline:-12px;
  border-radius:10px;text-decoration:none;color:#fff;
  font-family:var(--sb-display);font-weight:600;font-size:1.0625rem;
  letter-spacing:-.015em;line-height:1.25;
  transition:background-color .2s var(--sb-ease),color .2s var(--sb-ease)}
.sb-dnav__item:hover,.sb-dnav__item:focus-visible{text-decoration:none;
  background:rgba(255,255,255,.045);color:#fff}
.sb-dnav__item:active{background:rgba(0,229,168,.08)}
.sb-dnav__item:focus-visible{outline:2px solid var(--sb-signal);outline-offset:2px}

/* Het accentlijntje links komt uit de rand tevoorschijn in plaats van de
   rij te verspringen. */
.sb-dnav__item::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;
  border-radius:2px;background:var(--sb-signal);
  transform:scaleY(0);transform-origin:50% 50%;opacity:0;
  transition:transform .22s var(--sb-ease),opacity .22s var(--sb-ease)}
.sb-dnav__item:hover::before,.sb-dnav__item:focus-visible::before,
.sb-dnav__item[aria-current="page"]::before{transform:none;opacity:1}

.sb-dnav__dot{margin:0;flex:0 0 auto}
.sb-dnav__label{flex:1 1 auto;min-width:0}
.sb-dnav__arrow{flex:0 0 auto;width:7px;height:11px;color:rgba(168,188,216,.42);
  transition:transform .22s var(--sb-ease),color .22s var(--sb-ease)}
.sb-dnav__item:hover .sb-dnav__arrow,.sb-dnav__item:focus-visible .sb-dnav__arrow{
  color:var(--sb-signal);transform:translateX(3px)}

.sb-dnav__item[aria-current="page"]{color:var(--sb-signal);background:rgba(0,229,168,.06)}
.sb-dnav__item[aria-current="page"] .sb-dnav__arrow{color:var(--sb-signal)}

/* Rustig binnenkomen: de rijen schuiven één voor één op hun plek zodra de
   drawer open staat. Geen beweging bij een gesloten drawer, dus geen werk
   op de achtergrond. */
.sb-drawer[data-open="true"] .sb-dnav__row{animation:sb-dnav-in .34s var(--sb-ease) both}
.sb-drawer[data-open="true"] .sb-dnav__row:nth-child(1){animation-delay:.04s}
.sb-drawer[data-open="true"] .sb-dnav__row:nth-child(2){animation-delay:.08s}
.sb-drawer[data-open="true"] .sb-dnav__row:nth-child(3){animation-delay:.12s}
.sb-drawer[data-open="true"] .sb-dnav__row:nth-child(4){animation-delay:.16s}
.sb-drawer[data-open="true"] .sb-dnav__row:nth-child(5){animation-delay:.2s}
.sb-drawer[data-open="true"] .sb-dnav__row:nth-child(n+6){animation-delay:.24s}
.sb-drawer[data-open="true"] .sb-dnav__kop{animation:sb-dnav-in .3s var(--sb-ease) both}
@keyframes sb-dnav-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.sb-drawer__foot{padding-top:clamp(16px,3.5vw,20px);
  border-top:1px solid rgba(168,188,216,.2);
  box-shadow:0 -14px 26px -18px rgba(2,8,18,.9)}
.sb-drawer__foot .sb-btn--block{min-height:54px;font-size:1rem}

@media (prefers-reduced-motion:reduce){
  .sb-drawer[data-open="true"] .sb-dnav__row,
  .sb-drawer[data-open="true"] .sb-dnav__kop{animation:none;opacity:1;transform:none}
  .sb-dnav__item,.sb-dnav__item::before,.sb-dnav__arrow{transition:none}
  .sb-dnav__item:hover .sb-dnav__arrow,
  .sb-dnav__item:focus-visible .sb-dnav__arrow{transform:none}
  .sb-dnav__item::before{transform:none}
  .sb-dnav__item:not(:hover):not(:focus-visible):not([aria-current="page"])::before{opacity:0}
}

/* Private label heeft geen eigen dienstkleur in sb-brand.css, want het is geen
   eigen pagina maar een route op de homepage. Het stipje volgt daarom het
   signaalgroen dat die route in de route finder ook gebruikt. */
.sb-svc-dot[data-svc="pack"]{background:var(--sb-signal);box-shadow:0 0 0 3px rgba(0,229,168,.16)}
/* Leverancier vinden zit binnen dezelfde familie, maar is een eigen instap.
   Daarom hetzelfde groen met een open ring in plaats van een gevulde stip. */
.sb-svc-dot[data-svc="find"]{background:transparent;border:2px solid var(--sb-signal);
  box-shadow:0 0 0 3px rgba(0,229,168,.1)}

/* ============================================================
   PRIVATE LABEL — /pages/private-label

   Eigen wereld binnen dezelfde signatuur: diep navy en mint blijven de
   basis, maar deze pagina mag verpakkingspapier en een terughoudend
   technisch amber gebruiken. Geen tweede huisstijl, alleen twee kleuren
   die hier logisch zijn.

   Alles wat beweegt hangt aan --sp (0..1), gezet door de scroll-modules in
   sb8.js. Bij verminder-beweging zet die module --sp op 1 en staat elke
   scene meteen in de eindstand.
   ============================================================ */
.sb8-wl{
  --wl-paper:#E8DFD1;
  --wl-paper-2:#CFC2AD;
  --wl-paper-3:#B4A48C;
  --wl-amber:#DDA65E;
  --wl-line:rgba(168,188,216,.18);
  --wl-line-2:rgba(168,188,216,.32);
  --wl-mute:#9DB4D2;
  --wl-sig:var(--sb8-signal);
}
.sb8-wl__lbl{color:var(--wl-amber)}
.sb8-wl__head{max-width:74ch;margin-bottom:clamp(30px,4.6vw,58px)}
.sb8-wl__lead{margin-top:14px;color:var(--wl-mute)}
.sb8-wl__ill{margin:clamp(18px,2.4vw,28px) 0 0;text-align:center;
  font-family:var(--sb8-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(157,180,210,.5)}
.sb8-wl__note{margin:clamp(16px,2vw,22px) 0 0;padding-left:14px;max-width:62ch;
  border-left:1px solid rgba(0,229,168,.42);
  font-size:13.5px;line-height:1.6;color:rgba(157,180,210,.86)}

/* ---------- de doos: drie vlakken, geen echte 3D ----------
   Voorkant, zijkant en klep zijn drie rechthoeken waarvan er twee gekanteld
   staan. Dat leest als een doos, kost niets en blijft scherp op elk scherm. */
/* De drie doosvlakken lezen --bc, --bc2 en --bc3. Die staan bewust op
   .sb8-wl en niet op de doos zelf: een declaratie op het element wint van een
   geërfde waarde, en dan kon het packaging lab de kleur niet meer omzetten. */
.sb8-wl{--bc:var(--wl-paper);--bc2:var(--wl-paper-2);--bc3:var(--wl-paper-3)}
.wlb,.wlbox,.wlsig,.wlend{position:relative;display:block;
  width:var(--bw,clamp(150px,17vw,228px));aspect-ratio:1/1.02}
.wlb s,.wlbox s,.wlsig s,.wlend s,.wlb u,.wlbox u,.wlsig u,.wlend u{text-decoration:none}

.wlb__front,.wlbox__front,.wlsig__front,.wlend__front{
  position:absolute;left:0;bottom:0;width:74%;height:70%;
  background:var(--bc);border:1px solid rgba(8,24,46,.18);border-radius:2px}
.wlb__side,.wlbox__side,.wlsig__side,.wlend__side{
  position:absolute;right:0;bottom:6%;width:28%;height:64%;
  background:var(--bc2);border:1px solid rgba(8,24,46,.16);border-radius:2px;
  transform:skewY(-15deg);transform-origin:0 100%}
.wlb__lid,.wlbox__lid,.wlsig__lid,.wlend__lid{
  position:absolute;left:0;top:14%;width:74%;height:20%;
  background:var(--bc3);border:1px solid rgba(8,24,46,.16);border-radius:2px;
  transform:skewX(-42deg);transform-origin:0 100%}

.wlb__mark,.wlbox__mark,.wlsig__mark,.wlend__mark{
  position:absolute;left:8%;bottom:44%;z-index:3;
  font-family:var(--sb8-mono);font-size:clamp(8px,.72vw,10.5px);
  letter-spacing:.22em;color:#12243E;font-weight:600}
.wlb__label,.wlbox__label,.wlsig__label,.wlend__label{
  position:absolute;left:8%;bottom:18%;z-index:3;
  display:grid;gap:4px;width:44%;padding:7px 8px;border-radius:2px;
  background:#fff;border:1px solid rgba(8,24,46,.2);
  box-shadow:0 4px 12px -6px rgba(4,16,31,.5)}
.wlb__label em,.wlbox__label em,.wlsig__label em,.wlend__label em{
  display:block;height:3px;border-radius:1px;background:rgba(8,24,46,.3)}
.wlb__label em:last-child,.wlbox__label em:last-child,
.wlsig__label em:last-child,.wlend__label em:last-child{width:58%}
.wlb__label i{display:block;height:8px;border-radius:1px;
  background:repeating-linear-gradient(90deg,#12243E 0 1.5px,transparent 1.5px 3.5px)}

/* ============================================================
   HERO
   ============================================================ */
.sb8-wlh{padding-block:clamp(84px,10vw,150px) clamp(56px,7vw,104px)}
.sb8-wlh__aura{position:absolute;inset:auto -10% 30% 40%;height:70%;pointer-events:none;
  background:radial-gradient(52% 52% at 60% 40%,rgba(0,229,168,.14),transparent 70%);z-index:0}
.sb8-wlh__grid{position:relative;z-index:1;display:grid;gap:clamp(34px,5vw,64px);align-items:center}
@media (min-width:1000px){.sb8-wlh__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
.sb8-wlh__lead{margin-top:18px;max-width:52ch}
.sb8-wlh__pts{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:10px;max-width:50ch}
.sb8-wlh__pts li{display:flex;gap:11px;align-items:flex-start;
  font-size:14.5px;line-height:1.5;color:rgba(232,240,250,.9)}
.sb8-wlh__pts i{flex:0 0 auto;width:6px;height:6px;margin-top:7px;border-radius:2px;
  background:var(--wl-sig);box-shadow:0 0 0 3px rgba(0,229,168,.16)}

.sb8-wlh__stage{position:relative;display:grid;justify-items:center;gap:clamp(20px,3vw,32px)}
.sb8-wlh__studio{position:relative;display:grid;place-items:center;width:100%;
  aspect-ratio:1/.78;max-width:520px;border-radius:18px;
  border:1px solid var(--wl-line);
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.055),rgba(255,255,255,.012))}

/* fase 0: alleen een omtrek, nog niets afgemaakt */
.sb8-wlh__studio .wlb{--bw:clamp(168px,19vw,258px);z-index:2}
/* Tot de doos gevuld is staat het merk op een donkere ondergrond, dus dan
   mag het niet de inktkleur van het papier houden. */
.sb8-wlh__studio .wlb__mark{color:#9DB4D2;transition:opacity .6s var(--sb8-ease),
  transform .6s var(--sb8-ease),color .6s var(--sb8-ease)}
.sb8-wlh__studio[data-ph="3"] .wlb__mark,.sb8-wlh__studio[data-ph="4"] .wlb__mark,
.sb8-wlh__studio[data-ph="5"] .wlb__mark,.sb8-wlh__studio[data-ph="6"] .wlb__mark{color:#12243E}
.sb8-wlh__studio .wlb__front,.sb8-wlh__studio .wlb__side,.sb8-wlh__studio .wlb__lid{
  background:transparent;border:1px dashed rgba(168,188,216,.34);
  transition:background-color .7s var(--sb8-ease),border-color .7s var(--sb8-ease),
             opacity .7s var(--sb8-ease),transform .7s var(--sb8-ease)}
/* Bij binnenkomst is het product nog onaf, maar het moet wel als doos te
   herkennen zijn. Daarom staan alle drie de vlakken er meteen als stippellijn,
   alleen nog zonder kleur en zonder label. */
.sb8-wlh__studio .wlb__side,.sb8-wlh__studio .wlb__lid{opacity:.4}
.sb8-wlh__studio .wlb__mark,.sb8-wlh__studio .wlb__label{
  opacity:0;transform:translateY(6px);
  transition:opacity .6s var(--sb8-ease),transform .6s var(--sb8-ease)}
.sb8-wlh__studio .wlb__label{transform:translateX(-18px) rotate(-5deg)}

.sb8-wlh__studio[data-ph="1"] .wlb__mark,
.sb8-wlh__studio[data-ph="2"] .wlb__mark,
.sb8-wlh__studio[data-ph="3"] .wlb__mark,
.sb8-wlh__studio[data-ph="4"] .wlb__mark,
.sb8-wlh__studio[data-ph="5"] .wlb__mark,
.sb8-wlh__studio[data-ph="6"] .wlb__mark{opacity:1;transform:none}

.wlsw{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  display:flex;gap:7px;z-index:3}
.wlsw s{display:block;width:16px;height:16px;border-radius:4px;text-decoration:none;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--sb8-ease),transform .5s var(--sb8-ease);
  transition-delay:calc(var(--i) * 110ms)}
.wlsw s:nth-child(1){background:var(--wl-sig)}
.wlsw s:nth-child(2){background:var(--wl-paper)}
.wlsw s:nth-child(3){background:var(--wl-amber)}
.sb8-wlh__studio[data-ph="2"] .wlsw s,
.sb8-wlh__studio[data-ph="3"] .wlsw s,
.sb8-wlh__studio[data-ph="4"] .wlsw s,
.sb8-wlh__studio[data-ph="5"] .wlsw s,
.sb8-wlh__studio[data-ph="6"] .wlsw s{opacity:1;transform:none}

.sb8-wlh__studio[data-ph="3"] .wlb__front,.sb8-wlh__studio[data-ph="4"] .wlb__front,
.sb8-wlh__studio[data-ph="5"] .wlb__front,.sb8-wlh__studio[data-ph="6"] .wlb__front,
.sb8-wlh__studio[data-ph="3"] .wlb__side,.sb8-wlh__studio[data-ph="4"] .wlb__side,
.sb8-wlh__studio[data-ph="5"] .wlb__side,.sb8-wlh__studio[data-ph="6"] .wlb__side,
.sb8-wlh__studio[data-ph="3"] .wlb__lid,.sb8-wlh__studio[data-ph="4"] .wlb__lid,
.sb8-wlh__studio[data-ph="5"] .wlb__lid,.sb8-wlh__studio[data-ph="6"] .wlb__lid{
  opacity:1;border-style:solid;border-color:rgba(8,24,46,.18)}
.sb8-wlh__studio[data-ph="3"] .wlb__front,.sb8-wlh__studio[data-ph="4"] .wlb__front,
.sb8-wlh__studio[data-ph="5"] .wlb__front,.sb8-wlh__studio[data-ph="6"] .wlb__front{background:var(--wl-paper)}
.sb8-wlh__studio[data-ph="3"] .wlb__side,.sb8-wlh__studio[data-ph="4"] .wlb__side,
.sb8-wlh__studio[data-ph="5"] .wlb__side,.sb8-wlh__studio[data-ph="6"] .wlb__side{background:var(--wl-paper-2)}
.sb8-wlh__studio[data-ph="3"] .wlb__lid,.sb8-wlh__studio[data-ph="4"] .wlb__lid,
.sb8-wlh__studio[data-ph="5"] .wlb__lid,.sb8-wlh__studio[data-ph="6"] .wlb__lid{background:var(--wl-paper-3)}

.sb8-wlh__studio[data-ph="4"] .wlb__label,.sb8-wlh__studio[data-ph="5"] .wlb__label,
.sb8-wlh__studio[data-ph="6"] .wlb__label{opacity:1;transform:none}

.wlwire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;
  fill:none;overflow:visible}
.wlwire__p{stroke:var(--wl-sig);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;
  opacity:.75;transition:stroke-dashoffset .8s var(--sb8-ease);transition-delay:var(--d,0s)}
.sb8-wlh__studio[data-ph="5"] .wlwire__p,.sb8-wlh__studio[data-ph="6"] .wlwire__p{stroke-dashoffset:0}

.wlnode{position:absolute;display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:999px;z-index:3;
  border:1px solid var(--wl-line-2);background:rgba(4,16,31,.82);
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.16em;color:var(--wl-mute);
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--sb8-ease),transform .5s var(--sb8-ease),
             border-color .5s var(--sb8-ease),color .5s var(--sb8-ease)}
.wlnode i{width:6px;height:6px;border-radius:50%;background:rgba(168,188,216,.5)}
.wlnode--a{right:4%;top:20%}
.wlnode--b{right:2%;bottom:20%}
.sb8-wlh__studio[data-ph="5"] .wlnode,.sb8-wlh__studio[data-ph="6"] .wlnode{
  opacity:1;transform:none;border-color:rgba(0,229,168,.42);color:#E8F4EF}
.sb8-wlh__studio[data-ph="5"] .wlnode i,.sb8-wlh__studio[data-ph="6"] .wlnode i{
  background:var(--wl-sig);box-shadow:0 0 0 3px rgba(0,229,168,.18)}

.wlstatus{position:absolute;left:50%;bottom:-13px;transform:translate(-50%,6px);
  padding:7px 14px;border-radius:999px;z-index:4;
  background:var(--wl-sig);color:#05261D;
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.18em;font-weight:600;
  opacity:0;transition:opacity .5s var(--sb8-ease),transform .5s var(--sb8-ease)}
.sb8-wlh__studio[data-ph="6"] .wlstatus{opacity:1;transform:translate(-50%,0)}

.sb8-wlh__rail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 18px;width:100%}
.sb8-wlh__rail li{display:flex;align-items:center;gap:7px;
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;
  color:rgba(157,180,210,.48);transition:color .4s var(--sb8-ease)}
.sb8-wlh__rail i{width:7px;height:7px;border-radius:2px;background:rgba(168,188,216,.26);
  transition:background-color .4s var(--sb8-ease),box-shadow .4s var(--sb8-ease)}
.sb8-wlh__rail li[data-on="1"]{color:#E8F0FA}
.sb8-wlh__rail li[data-on="1"] i{background:var(--wl-sig)}
.sb8-wlh__rail li[data-now="1"] i{box-shadow:0 0 0 4px rgba(0,229,168,.18)}

/* ============================================================
   STOP 01 — VAN PRODUCT NAAR MERK
   ============================================================ */
.sb8-wlm__grid{display:grid;gap:clamp(18px,3vw,34px);align-items:center;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.sb8-wlm__side{margin:0;display:grid;justify-items:center;gap:14px;
  padding:clamp(22px,3vw,38px) clamp(14px,2vw,26px);border-radius:16px;
  border:1px solid var(--wl-line);background:rgba(255,255,255,.022)}
.sb8-wlm__side figcaption{font-family:var(--sb8-mono);font-size:9.5px;letter-spacing:.18em;
  color:rgba(157,180,210,.82)}
.sb8-wlm__side--brand{border-color:rgba(0,229,168,.3);
  background:linear-gradient(180deg,rgba(0,229,168,.06),rgba(255,255,255,.015))}
.sb8-wlm__side--brand figcaption{color:var(--wl-sig)}

.wlprod{position:relative;display:block;width:clamp(96px,11vw,148px);aspect-ratio:1/1.24}
.wlprod s{position:absolute;text-decoration:none;border-radius:4px}
/* Het kale product stond op .04 wit en verdween daardoor in het paneel. Het
   moet zichtbaar genoeg zijn om de vergelijking te kunnen maken. */
.wlprod s:nth-child(1){inset:0 0 18% 0;border:1px dashed rgba(168,188,216,.5);
  background:rgba(255,255,255,.075)}
.wlprod s:nth-child(2){left:26%;right:26%;top:-6%;height:12%;border-radius:3px;
  border:1px dashed rgba(168,188,216,.5);background:rgba(255,255,255,.09)}
.wlprod--brand s:nth-child(1),.wlprod--brand s:nth-child(2){border-style:solid}
.wlprod--brand s:nth-child(1){border-color:rgba(8,24,46,.2);background:var(--wl-paper)}
.wlprod--brand s:nth-child(2){border-color:rgba(8,24,46,.2);background:var(--wl-paper-2)}
.wlprod__mark{position:absolute;left:10%;top:24%;z-index:2;
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.2em;color:#12243E;font-weight:600;
  opacity:calc(clamp(0,(var(--sp,0) - .18) * 4,1))}
.wlprod__strip{position:absolute;left:0;right:0;top:46%;height:9%;z-index:2;
  background:var(--wl-sig);transform:scaleX(calc(clamp(0,(var(--sp,0) - .3) * 3.4,1)));
  transform-origin:0 50%}

.sb8-wlm__arrow{display:grid;place-items:center;width:clamp(30px,4vw,56px)}
.sb8-wlm__arrow i{display:block;width:100%;height:1px;position:relative;
  background:linear-gradient(90deg,rgba(168,188,216,.2),var(--wl-sig));
  transform:scaleX(calc(clamp(0,var(--sp,0) * 2.4,1)));transform-origin:0 50%}
.sb8-wlm__arrow i::after{content:"";position:absolute;right:-1px;top:-3px;
  width:7px;height:7px;border-top:1px solid var(--wl-sig);border-right:1px solid var(--wl-sig);
  transform:rotate(45deg)}

.sb8-wlm__stack{list-style:none;margin:clamp(26px,3.6vw,42px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px}
.sb8-wlm__stack li{display:flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  border:1px solid var(--wl-line);background:rgba(255,255,255,.028);
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.16em;
  color:rgba(157,180,210,.55);
  --a:clamp(0,calc((var(--sp,0) - var(--i) * .16) * 7),1);
  opacity:calc(.5 + var(--a) * .5);
  transform:translateY(calc((1 - var(--a)) * 10px));
  border-color:color-mix(in srgb,rgba(0,229,168,.5) calc(var(--a) * 100%),rgba(168,188,216,.18))}
.sb8-wlm__stack li i{width:6px;height:6px;border-radius:2px;
  background:color-mix(in srgb,var(--wl-sig) calc(var(--a) * 100%),rgba(168,188,216,.3))}
.sb8-wlm__stack li b{font-weight:500;
  color:color-mix(in srgb,#E8F0FA calc(var(--a) * 100%),rgba(157,180,210,.55))}

.sb8-wlm__notes{list-style:none;margin:clamp(26px,3.6vw,42px) 0 0;padding:0;
  display:grid;gap:clamp(14px,2vw,22px)}
@media (min-width:760px){.sb8-wlm__notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.sb8-wlm__notes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sb8-wlm__notes li{padding-left:14px;border-left:1px solid var(--wl-line-2)}
.sb8-wlm__notes b{display:block;margin-bottom:6px;font-family:var(--sb8-mono);
  font-size:9px;letter-spacing:.16em;color:var(--wl-amber);font-weight:500}
.sb8-wlm__notes span{font-size:13.5px;line-height:1.55;color:rgba(157,180,210,.86)}

@media (max-width:719px){
  .sb8-wlm__grid{grid-template-columns:minmax(0,1fr);justify-items:center}
  .sb8-wlm__side{width:100%}
  .sb8-wlm__arrow{width:100%;height:34px}
  .sb8-wlm__arrow i{width:1px;height:100%;margin-inline:auto;
    background:linear-gradient(180deg,rgba(168,188,216,.2),var(--wl-sig));
    transform:scaleY(calc(clamp(0,var(--sp,0) * 2.4,1)));transform-origin:50% 0}
  .sb8-wlm__arrow i::after{right:-3px;bottom:-1px;top:auto;transform:rotate(135deg)}
}

/* ============================================================
   STOP 02 — PACKAGING LAB
   ============================================================ */
.sb8-wlp__lab{display:grid;gap:clamp(22px,3.4vw,44px);align-items:center;
  padding:clamp(20px,3vw,38px);border-radius:20px;
  border:1px solid var(--wl-line);
  background:radial-gradient(110% 80% at 70% 0%,rgba(255,255,255,.05),rgba(255,255,255,.012))}
@media (min-width:900px){.sb8-wlp__lab{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

.sb8-wlp__controls{display:grid;gap:clamp(16px,2.2vw,24px)}
.sb8-wlp__setlbl{margin:0 0 9px;font-family:var(--sb8-mono);font-size:9px;
  letter-spacing:.18em;color:rgba(157,180,210,.62)}
.sb8-wlp__chips{display:flex;flex-wrap:wrap;gap:8px}
.sb8-wlp__chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;
  padding:9px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--wl-line-2);background:rgba(255,255,255,.03);color:#E8F0FA;
  font-family:var(--sb8-sans);font-size:13.5px;font-weight:500;
  transition:border-color .22s var(--sb8-ease),background-color .22s var(--sb8-ease),
             color .22s var(--sb8-ease)}
.sb8-wlp__chip:hover{border-color:rgba(0,229,168,.45)}
.sb8-wlp__chip:focus-visible{outline:2px solid var(--wl-sig);outline-offset:2px}
.sb8-wlp__chip[aria-pressed="true"]{border-color:var(--wl-sig);
  background:rgba(0,229,168,.1);color:#fff}
.sb8-wlp__chip i{width:13px;height:13px;border-radius:4px;border:1px solid rgba(8,24,46,.25)}
.sb8-wlp__chip i[data-swatch="mint"]{background:var(--wl-sig)}
.sb8-wlp__chip i[data-swatch="ink"]{background:#12243E;border-color:rgba(168,188,216,.4)}
.sb8-wlp__chip i[data-swatch="paper"]{background:var(--wl-paper)}

.sb8-wlp__stage{position:relative;display:grid;place-items:center;min-height:clamp(240px,32vh,340px)}
.sb8-wlp__stage .wlbox{--bw:clamp(168px,19vw,250px);z-index:2;
  transition:transform .5s var(--sb8-ease)}
.sb8-wlp__shadow{position:absolute;left:50%;bottom:8%;width:52%;height:16px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(4,16,31,.6),transparent 72%)}

.sb8-wlp__lab .wlbox__front,.sb8-wlp__lab .wlbox__side,.sb8-wlp__lab .wlbox__lid{
  transition:background-color .42s var(--sb8-ease),box-shadow .42s var(--sb8-ease)}
.sb8-wlp__lab[data-kleur="mint"] .wlbox{--bc:#7FEFD0;--bc2:#4FDCB4;--bc3:#36C79E}
.sb8-wlp__lab[data-kleur="ink"] .wlbox{--bc:#1D3557;--bc2:#16293F;--bc3:#0F1E30}
.sb8-wlp__lab[data-kleur="paper"] .wlbox{--bc:var(--wl-paper);--bc2:var(--wl-paper-2);--bc3:var(--wl-paper-3)}
.sb8-wlp__lab[data-kleur="ink"] .wlbox__mark{color:#E8F0FA}

.sb8-wlp__lab[data-afwerking="glans"] .wlbox__front{
  background-image:linear-gradient(118deg,rgba(255,255,255,.55) 0 18%,transparent 42%)}
.sb8-wlp__lab[data-afwerking="reli"] .wlbox__front{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 -6px 14px -8px rgba(8,24,46,.6)}

.sb8-wlp__lab .wlbox__label{transition:transform .46s var(--sb8-ease),width .46s var(--sb8-ease),
  left .46s var(--sb8-ease),bottom .46s var(--sb8-ease),opacity .3s var(--sb8-ease)}
.sb8-wlp__lab[data-label="zij"] .wlbox__label{left:auto;right:1%;bottom:26%;width:24%;
  transform:skewY(-15deg)}
.sb8-wlp__lab[data-label="wikkel"] .wlbox__label{left:0;width:74%;bottom:30%;border-radius:0}

.wlbox__insert{position:absolute;left:14%;bottom:52%;z-index:1;display:flex;gap:5px;
  opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--sb8-ease),transform .4s var(--sb8-ease)}
.wlbox__insert i{display:block;width:26px;height:34px;border-radius:2px;
  background:#fff;border:1px solid rgba(8,24,46,.22);
  box-shadow:0 5px 12px -7px rgba(4,16,31,.7)}
.wlbox__insert i:nth-child(2){transform:rotate(7deg)}
.sb8-wlp__lab[data-insert="1"] .wlbox__insert{opacity:1;transform:none}
.sb8-wlp__lab[data-insert="1"] .wlbox__lid{transform:skewX(-42deg) translateY(-16px) rotate(-6deg)}
.sb8-wlp__lab .wlbox__lid{transition:transform .5s var(--sb8-ease),background-color .42s var(--sb8-ease)}

@media (max-width:899px){
  .sb8-wlp__lab{grid-template-columns:minmax(0,1fr)}
  .sb8-wlp__stage{order:-1}
  .sb8-wlp__controls{gap:14px}
  .sb8-wlp__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px;margin-inline:calc(var(--sb8-gutter) * -.5);
    padding-inline:calc(var(--sb8-gutter) * .5)}
  .sb8-wlp__chips::-webkit-scrollbar{display:none}
  .sb8-wlp__chip{flex:0 0 auto}
}

/* ============================================================
   STOP 03 — LABELING
   ============================================================ */
.sb8-wll__grid{display:grid;gap:clamp(26px,4vw,56px);align-items:center}
@media (min-width:900px){.sb8-wll__grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}

.sb8-wll__rows{display:grid;gap:10px}
.sb8-wll__row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;
  border:1px solid var(--wl-line);background:rgba(255,255,255,.028);
  --a:clamp(0,calc((var(--sp,0) - var(--i) * .13) * 7),1);
  opacity:calc(.42 + var(--a) * .58);
  transform:translateX(calc((1 - var(--a)) * -14px));
  border-color:color-mix(in srgb,rgba(0,229,168,.42) calc(var(--a) * 100%),rgba(168,188,216,.18))}
.sb8-wll__row b{flex:0 0 auto;font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.16em;
  font-weight:500;color:color-mix(in srgb,#E8F0FA calc(var(--a) * 100%),rgba(157,180,210,.6))}
.sb8-wll__row s{flex:1 1 auto;height:2px;border-radius:1px;text-decoration:none;
  background:color-mix(in srgb,rgba(0,229,168,.5) calc(var(--a) * 100%),rgba(168,188,216,.2))}

.sb8-wll__stage{position:relative;display:grid;place-items:center;
  min-height:clamp(240px,32vh,340px);border-radius:18px;
  border:1px solid var(--wl-line);
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.wllab{position:relative;display:block;width:clamp(190px,22vw,290px);aspect-ratio:1/.82}
.wllab__box{position:absolute;inset:8% 6% 6% 6%;border-radius:4px;text-decoration:none;
  background:var(--wl-paper);border:1px solid rgba(8,24,46,.2)}
.wllab__label{position:absolute;left:12%;top:26%;width:56%;display:grid;gap:7px;
  padding:12px 13px;border-radius:3px;background:#fff;border:1px solid rgba(8,24,46,.22);
  box-shadow:0 10px 24px -14px rgba(4,16,31,.85);
  opacity:calc(clamp(0,(var(--sp,0) - .12) * 4,1));
  transform:translate(calc((1 - clamp(0,(var(--sp,0) - .12) * 3,1)) * -46px),
                      calc((1 - clamp(0,(var(--sp,0) - .12) * 3,1)) * 18px))
            rotate(calc((1 - clamp(0,(var(--sp,0) - .12) * 3,1)) * -7deg))}
.wllab__mark{display:block;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.2em;
  color:#12243E;font-weight:600;font-style:normal}
.wllab__ln{display:block;height:3px;border-radius:1px;background:rgba(8,24,46,.26)}
.wllab__ln--s{width:54%}
.wllab__code{display:flex;gap:2px;align-items:flex-end;height:15px;font-style:normal}
.wllab__code b{display:block;width:2px;height:100%;background:#12243E;border-radius:1px}
.wllab__code b:nth-child(2n){height:72%}
.wllab__code b:nth-child(3n){height:88%;width:3px}
.wllab__scan{position:absolute;left:4%;right:4%;height:2px;border-radius:2px;
  top:calc(10% + clamp(0,(var(--sp,0) - .42) * 1.9,1) * 74%);
  background:linear-gradient(90deg,transparent,var(--wl-sig),transparent);
  box-shadow:0 0 16px 2px rgba(0,229,168,.42);
  opacity:calc(clamp(0,(var(--sp,0) - .42) * 6,1) * (1 - clamp(0,(var(--sp,0) - .9) * 8,1)))}

.sb8-wll__check{display:flex;gap:11px;align-items:flex-start;margin:clamp(22px,3vw,32px) 0 0;
  padding:14px 16px;border-radius:12px;max-width:66ch;
  border:1px solid rgba(221,166,94,.34);background:rgba(221,166,94,.07);
  font-size:13.5px;line-height:1.55;color:rgba(232,240,250,.92)}
.sb8-wll__check i{flex:0 0 auto;width:7px;height:7px;margin-top:6px;border-radius:2px;
  background:var(--wl-amber);box-shadow:0 0 0 3px rgba(221,166,94,.18)}

/* ============================================================
   STOP 04 — LEVERANCIERSNETWERK
   ============================================================ */
.sb8-wln__aura{position:absolute;inset:10% -20% 10% 20%;pointer-events:none;z-index:0;
  background:radial-gradient(46% 46% at 40% 50%,rgba(0,229,168,.1),transparent 70%)}
.sb8-wln__grid{position:relative;z-index:1;display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:1000px){.sb8-wln__grid{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}}

.sb8-wln__map{position:relative;width:100%;aspect-ratio:560/420;
  max-width:620px;margin-inline:auto}
.sb8-wln__wires{position:absolute;inset:0;width:100%;height:100%;fill:none;overflow:visible}
.wnw{stroke:rgba(168,188,216,.26);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .7s var(--sb8-ease),stroke .4s var(--sb8-ease)}
.sb8-wln[data-on="1"] .wnw{stroke-dashoffset:calc(1 - clamp(0,(var(--sp,0) - var(--i) * .1) * 5,1))}
.sb8-wln[data-on="1"] .wnw{stroke:color-mix(in srgb,rgba(0,229,168,.5) calc(clamp(0,(var(--sp,0) - var(--i) * .1) * 5,1) * 100%),rgba(168,188,216,.26))}

.sb8-wln__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:clamp(96px,13vw,136px);aspect-ratio:1;
  border-radius:50%;z-index:3;
  border:1px solid rgba(0,229,168,.5);background:rgba(0,229,168,.09);
  box-shadow:0 0 0 10px rgba(0,229,168,.05)}
.sb8-wln__core b{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;
  text-align:center;line-height:1.5;color:#E8F4EF;font-weight:500;padding:0 8px}

.sb8-wln__node{position:absolute;display:flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:999px;z-index:2;white-space:nowrap;
  border:1px solid var(--wl-line-2);background:rgba(4,16,31,.9);
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;color:rgba(157,180,210,.6);
  transition:border-color .36s var(--sb8-ease),color .36s var(--sb8-ease),
             opacity .36s var(--sb8-ease),transform .36s var(--sb8-ease)}
.sb8-wln__node i{width:7px;height:7px;border-radius:50%;background:rgba(168,188,216,.36);
  transition:background-color .36s var(--sb8-ease),box-shadow .36s var(--sb8-ease)}
.sb8-wln__node[style*="--i:0"]{left:50%;top:6%;transform:translate(-50%,-50%)}
.sb8-wln__node[style*="--i:1"]{left:84%;top:31%;transform:translate(-50%,-50%)}
.sb8-wln__node[style*="--i:2"]{left:81%;top:79%;transform:translate(-50%,-50%)}
.sb8-wln__node[style*="--i:3"]{left:19%;top:79%;transform:translate(-50%,-50%)}
.sb8-wln__node[style*="--i:4"]{left:16%;top:31%;transform:translate(-50%,-50%)}
.sb8-wln[data-on="1"] .sb8-wln__node{opacity:.42}
.sb8-wln .sb8-wln__node[data-on="1"]{opacity:1;border-color:rgba(0,229,168,.55);color:#fff}
.sb8-wln .sb8-wln__node[data-on="1"] i{background:var(--wl-sig);box-shadow:0 0 0 4px rgba(0,229,168,.18)}

.sb8-wln__pulse{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px;
  border-radius:50%;z-index:4;background:var(--wl-sig);
  box-shadow:0 0 0 6px rgba(0,229,168,.16),0 0 18px 3px rgba(0,229,168,.42);
  opacity:0;transition:opacity .3s var(--sb8-ease),transform .5s var(--sb8-ease)}
.sb8-wln[data-on="1"] .sb8-wln__pulse{opacity:1}
/* De puls reist naar de node die aan de beurt is. De positie komt uit JS,
   in procenten van de kaart, zodat hij op elk formaat op de node landt. */
.sb8-wln__pulse{left:var(--px,50%);top:var(--py,50%);
  transition:opacity .3s var(--sb8-ease),left .55s var(--sb8-ease),top .55s var(--sb8-ease)}

.sb8-wln__side{display:grid;gap:clamp(16px,2.2vw,24px);align-content:center}
.sb8-wln__regio{display:inline-flex;align-items:center;gap:9px;justify-self:start;margin:0;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(221,166,94,.4);background:rgba(221,166,94,.08);
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.2em;color:var(--wl-amber)}
.sb8-wln__regio i{width:6px;height:6px;border-radius:50%;background:var(--wl-amber)}
.sb8-wln__proof{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.sb8-wln__proof li{padding-left:16px;border-left:1px solid rgba(0,229,168,.4)}
.sb8-wln__proof b{display:block;margin-bottom:5px;font-family:var(--sb8-display);
  font-size:clamp(17px,1.5vw,22px);font-weight:700;letter-spacing:-.02em;color:#fff}
.sb8-wln__proof span{font-size:13.5px;line-height:1.55;color:rgba(157,180,210,.86)}

@media (max-width:719px){
  .sb8-wln__map{aspect-ratio:1/1.02;max-width:420px}
  .sb8-wln__node{font-size:8px;padding:8px 10px;gap:6px}
  .sb8-wln__node[style*="--i:0"]{top:4%}
  .sb8-wln__node[style*="--i:1"]{left:78%;top:29%}
  .sb8-wln__node[style*="--i:2"]{left:74%;top:80%}
  .sb8-wln__node[style*="--i:3"]{left:26%;top:80%}
  .sb8-wln__node[style*="--i:4"]{left:22%;top:29%}
}

/* ============================================================
   BEWIJSMOMENT — DAYONE
   ============================================================ */
.sb8-wlpr__grid{display:grid;gap:clamp(28px,4.4vw,64px);align-items:center}
@media (min-width:1000px){.sb8-wlpr__grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}}
.sb8-wlpr__shot{margin:0;display:grid;gap:12px}
.sb8-wlpr__mask{position:relative;display:block;border-radius:16px;overflow:hidden;
  border:1px solid var(--wl-line);aspect-ratio:4/4.7;
  clip-path:inset(0 calc((1 - clamp(0,var(--sp,0) * 2.2,1)) * 24%) 0 0 round 16px)}
.sb8-wlpr__mask img{width:100%;height:100%;object-fit:cover;display:block}
.sb8-wlpr__node{position:absolute;right:16px;bottom:16px;width:10px;height:10px;
  border-radius:50%;background:var(--wl-sig);
  box-shadow:0 0 0 5px rgba(0,229,168,.16),0 0 18px 3px rgba(0,229,168,.4)}
.sb8-wlpr__shot figcaption{font-family:var(--sb8-mono);font-size:9px;letter-spacing:.16em;
  color:rgba(157,180,210,.6)}
.sb8-wlpr__copy{display:grid;gap:0}
.sb8-wlpr__facts{list-style:none;margin:clamp(24px,3.2vw,34px) 0 0;padding:0;
  display:grid;gap:clamp(16px,2.2vw,22px);counter-reset:wlpr}
@media (min-width:640px){.sb8-wlpr__facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sb8-wlpr__facts li{padding-top:14px;border-top:1px solid var(--wl-line-2)}
.sb8-wlpr__facts b{display:block;margin-bottom:6px;font-family:var(--sb8-display);
  font-size:clamp(19px,1.8vw,27px);font-weight:700;letter-spacing:-.025em;color:var(--wl-sig)}
.sb8-wlpr__facts span{font-size:13px;line-height:1.5;color:rgba(157,180,210,.84)}

/* ============================================================
   STOP 05 — PRODUCTIECONTROLE
   ============================================================ */
.sb8-wlc__line{position:relative;display:flex;justify-content:space-between;
  padding:26px clamp(4px,2vw,26px) 0}
.sb8-wlc__rail{position:absolute;left:clamp(4px,2vw,26px);right:clamp(4px,2vw,26px);top:32px;
  height:1px;background:var(--wl-line-2)}
.sb8-wlc__rail i{display:block;height:100%;width:calc(clamp(0,var(--sp,0) * 1.15,1) * 100%);
  background:var(--wl-sig);box-shadow:0 0 12px 1px rgba(0,229,168,.4)}
.sb8-wlc__st{position:relative;display:grid;justify-items:center;gap:11px;flex:1 1 0;min-width:0;
  --a:clamp(0,calc((var(--sp,0) * 1.15 - var(--i) * .2) * 8),1)}
.sb8-wlc__st i{width:13px;height:13px;border-radius:4px;
  background:color-mix(in srgb,var(--wl-sig) calc(var(--a) * 100%),#0B1F38);
  border:1px solid color-mix(in srgb,rgba(0,229,168,.6) calc(var(--a) * 100%),rgba(168,188,216,.3));
  box-shadow:0 0 0 calc(var(--a) * 4px) rgba(0,229,168,.13)}
.sb8-wlc__st b{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;
  text-align:center;font-weight:500;
  color:color-mix(in srgb,#E8F0FA calc(var(--a) * 100%),rgba(157,180,210,.5))}
.sb8-wlc__node{position:absolute;top:26px;left:calc(clamp(4px,2vw,26px) + clamp(0,var(--sp,0) * 1.15,1) * (100% - 2 * clamp(4px,2vw,26px)));
  width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--wl-sig);
  box-shadow:0 0 0 5px rgba(0,229,168,.14),0 0 16px 3px rgba(0,229,168,.45)}

.sb8-wlc__panel{margin-top:clamp(26px,3.6vw,40px);padding:clamp(18px,2.6vw,28px);
  border-radius:16px;border:1px solid var(--wl-line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  opacity:clamp(0,calc((var(--sp,0) - .18) * 5),1);
  transform:translateY(calc((1 - clamp(0,(var(--sp,0) - .18) * 5,1)) * 16px))}
.sb8-wlc__ph{margin:0 0 16px;font-family:var(--sb8-mono);font-size:9px;letter-spacing:.2em;
  color:var(--wl-amber)}
.sb8-wlc__rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:760px){.sb8-wlc__rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px}}
.sb8-wlc__rows li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:10px;border-bottom:1px solid rgba(168,188,216,.1);
  --a:clamp(0,calc((var(--sp,0) - .24 - var(--i) * .08) * 8),1);
  opacity:calc(.35 + var(--a) * .65)}
.sb8-wlc__rows b{font-size:13.5px;font-weight:500;color:rgba(232,240,250,.92)}
.sb8-wlc__rows s{text-decoration:none;font-family:var(--sb8-mono);font-size:8.5px;
  letter-spacing:.14em;padding:5px 10px;border-radius:999px;white-space:nowrap;
  color:color-mix(in srgb,var(--wl-sig) calc(var(--a) * 100%),rgba(157,180,210,.6));
  border:1px solid color-mix(in srgb,rgba(0,229,168,.45) calc(var(--a) * 100%),rgba(168,188,216,.22))}

@media (max-width:639px){
  .sb8-wlc__line{flex-direction:column;align-items:flex-start;gap:18px;padding:0 0 0 4px}
  .sb8-wlc__rail{left:10px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .sb8-wlc__rail i{width:100%;height:calc(clamp(0,var(--sp,0) * 1.15,1) * 100%)}
  .sb8-wlc__st{flex-direction:row;display:flex;align-items:center;gap:14px;width:100%}
  .sb8-wlc__st b{text-align:left}
  .sb8-wlc__node{top:calc(clamp(0,var(--sp,0) * 1.15,1) * 100%);left:10px;margin-left:-5.5px;margin-top:-5.5px}
}

/* ============================================================
   STOP 06 — FULFILLMENT
   ============================================================ */
.sb8-wlf__stage{display:grid;gap:clamp(22px,3vw,36px);padding:clamp(20px,3vw,36px);
  border-radius:20px;border:1px solid var(--wl-line);
  background:radial-gradient(110% 80% at 50% 0%,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.sb8-wlf__chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:10px 14px}
.sb8-wlf__chain li{display:flex;align-items:center;gap:8px;
  --a:clamp(0,calc((var(--sp,0) - var(--i) * .16) * 7),1)}
.sb8-wlf__chain i{width:8px;height:8px;border-radius:2px;
  background:color-mix(in srgb,var(--wl-sig) calc(var(--a) * 100%),rgba(168,188,216,.26))}
.sb8-wlf__chain b{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;font-weight:500;
  color:color-mix(in srgb,#E8F0FA calc(var(--a) * 100%),rgba(157,180,210,.5))}

.sb8-wlf__grid{position:relative;display:grid;place-items:center;
  min-height:clamp(180px,26vh,260px)}
.sb8-wlf__seed{position:absolute;left:50%;top:50%;width:34px;height:30px;margin:-15px 0 0 -17px;
  border-radius:3px;background:var(--wl-paper);border:1px solid rgba(8,24,46,.22);
  opacity:calc(1 - clamp(0,(var(--sp,0) - .2) * 4,1));
  transform:scale(calc(1 + clamp(0,(var(--sp,0) - .2) * 4,1) * .3))}
.sb8-wlf__pkgs{position:relative;display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(8px,1.4vw,16px);width:min(100%,520px)}
.sb8-wlf__pkgs s{display:block;aspect-ratio:1/.86;border-radius:3px;text-decoration:none;
  background:var(--wl-paper);border:1px solid rgba(8,24,46,.22);
  box-shadow:0 6px 14px -10px rgba(4,16,31,.9);
  --a:clamp(0,calc((var(--sp,0) - .22 - var(--i) * .045) * 9),1);
  opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 22px)) scale(calc(.6 + var(--a) * .4))}
.sb8-wlf__pkgs s::after{content:"";position:absolute}
.sb8-wlf__pkgs s:nth-child(-n+4){background:#F3EDE3}

.sb8-wlf__tag{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.16em}
.sb8-wlf__tag s{text-decoration:none;
  color:color-mix(in srgb,rgba(157,180,210,.5) calc(clamp(0,(var(--sp,0) - .5) * 4,1) * 100%),#E8F0FA)}
.sb8-wlf__tag i{width:18px;height:1px;background:rgba(168,188,216,.34)}
.sb8-wlf__tag b{font-weight:500;
  color:color-mix(in srgb,var(--wl-sig) calc(clamp(0,(var(--sp,0) - .5) * 4,1) * 100%),rgba(157,180,210,.5))}

@media (max-width:519px){
  .sb8-wlf__pkgs{grid-template-columns:repeat(4,1fr)}
  .sb8-wlf__chain{justify-content:flex-start;gap:9px 12px}
}

/* ============================================================
   HET SIGNATUURMOMENT

   Anderhalf scherm scrollruimte, meer niet. De scene blijft staan, de
   pagina scrollt gewoon door: geen scroll hijacking.
   ============================================================ */
.sb8-wls{min-height:250vh}
.sb8-wls__pin{position:sticky;top:0;min-height:100svh;display:grid;align-content:center;
  padding-block:clamp(78px,11vh,120px) clamp(30px,6vh,60px)}
.sb8-wls__in{display:grid;gap:clamp(20px,3vh,34px);justify-items:center;text-align:center}
/* max-width op de wrapper werkte hier niet: justify-items:center geeft het
   item fit-content breedte, en ch rekent daar met de bodytekst in plaats van
   met de kopgrootte. Daarom staat de begrenzing op de kop zelf. */
.sb8-wls__head{display:grid;gap:12px;justify-items:center;width:100%}
.sb8-wls__head .sb8-d2{max-width:20ch;margin-inline:auto}
.sb8-wls__stage{position:relative;display:grid;justify-items:center;gap:clamp(18px,3vh,30px);width:100%}

.sb8-wls .wlsig{--bw:clamp(150px,16vw,222px)}
.sb8-wls .wlsig__front,.sb8-wls .wlsig__side,.sb8-wls .wlsig__lid{
  background:transparent;border:1px dashed rgba(168,188,216,.34)}
.sb8-wls[data-on="1"] .wlsig__front{
  background:color-mix(in srgb,var(--wl-paper) calc(clamp(0,(var(--sp,0) - .14) * 5,1) * 100%),transparent);
  border-style:solid;
  border-color:color-mix(in srgb,rgba(8,24,46,.2) calc(clamp(0,(var(--sp,0) - .14) * 5,1) * 100%),rgba(168,188,216,.34))}
.sb8-wls[data-on="1"] .wlsig__side{
  opacity:clamp(0,(var(--sp,0) - .2) * 5,1);
  background:var(--wl-paper-2);border-style:solid;border-color:rgba(8,24,46,.18)}
.sb8-wls[data-on="1"] .wlsig__lid{
  opacity:clamp(0,(var(--sp,0) - .2) * 5,1);
  background:var(--wl-paper-3);border-style:solid;border-color:rgba(8,24,46,.18)}
.sb8-wls .wlsig__mark{opacity:clamp(0,(var(--sp,0) - .06) * 6,1)}
.sb8-wls .wlsig__label{
  opacity:clamp(0,(var(--sp,0) - .34) * 5,1);
  transform:translateX(calc((1 - clamp(0,(var(--sp,0) - .34) * 5,1)) * -34px))
            rotate(calc((1 - clamp(0,(var(--sp,0) - .34) * 5,1)) * -6deg))}
.wlsig__sw{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);display:flex;gap:6px}
.wlsig__sw s{display:block;width:14px;height:14px;border-radius:4px;text-decoration:none;
  --a:clamp(0,calc((var(--sp,0) - .1 - var(--i) * .04) * 7),1);
  opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 8px))}
.wlsig__sw s:nth-child(1){background:var(--wl-sig)}
.wlsig__sw s:nth-child(2){background:var(--wl-paper)}
.wlsig__sw s:nth-child(3){background:var(--wl-amber)}

.wlsig__sup,.wlsig__run{position:absolute;display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(0,229,168,.42);background:rgba(4,16,31,.86);
  font-family:var(--sb8-mono);font-size:8px;letter-spacing:.16em;color:#E8F4EF}
.wlsig__sup i,.wlsig__run i{width:6px;height:6px;border-radius:50%;background:var(--wl-sig)}
.wlsig__sup{left:-42%;top:18%;
  opacity:clamp(0,(var(--sp,0) - .48) * 6,1);
  transform:translateX(calc((1 - clamp(0,(var(--sp,0) - .48) * 6,1)) * -18px))}
.wlsig__run{right:-42%;top:46%;
  opacity:clamp(0,(var(--sp,0) - .6) * 6,1);
  transform:translateX(calc((1 - clamp(0,(var(--sp,0) - .6) * 6,1)) * 18px))}
.wlsig__ship{position:absolute;left:50%;bottom:-30%;transform:translateX(-50%);display:flex;gap:6px}
.wlsig__ship s{display:block;width:18px;height:16px;border-radius:2px;text-decoration:none;
  background:var(--wl-paper);border:1px solid rgba(8,24,46,.22);
  --a:clamp(0,calc((var(--sp,0) - .72 - var(--i) * .05) * 9),1);
  opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 12px))}

.sb8-wls__steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:8px 14px;margin-top:clamp(30px,6vh,54px)}
.sb8-wls__steps li{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.16em;
  padding-bottom:5px;border-bottom:1px solid transparent;
  --a:clamp(0,calc((var(--sp,0) - var(--i) * .15) * 9),1);
  color:color-mix(in srgb,#fff calc(var(--a) * 100%),rgba(157,180,210,.42));
  border-bottom-color:color-mix(in srgb,var(--wl-sig) calc(var(--a) * 100%),transparent)}

.sb8-wls__arc{position:relative;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:10px;margin:0;
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.18em;color:rgba(157,180,210,.6)}
.sb8-wls__arc span{--a:1}
.sb8-wls__arc i{width:16px;height:1px;background:rgba(168,188,216,.34)}
.sb8-wls__pulse{display:block;width:9px;height:9px;border-radius:50%;background:var(--wl-sig);
  opacity:clamp(0,(var(--sp,0) - .9) * 12,1);
  box-shadow:0 0 0 calc(clamp(0,(var(--sp,0) - .9) * 12,1) * 8px) rgba(0,229,168,.14),
             0 0 22px 4px rgba(0,229,168,.45)}

@media (max-width:719px){
  .sb8-wls{min-height:200vh}
  .sb8-wls .wlsig{--bw:clamp(128px,38vw,168px)}
  .wlsig__sup{left:-14%;top:4%}
  .wlsig__run{right:-14%;top:58%}
  .sb8-wls__steps{gap:7px 10px}
}

/* ============================================================
   CAPABILITY RAIL
   ============================================================ */
.sb8-wlk__rail{display:grid;gap:0;border-top:1px solid var(--wl-line)}
.sb8-wlk__item{border-bottom:1px solid var(--wl-line)}
.sb8-wlk__btn{display:flex;align-items:center;gap:clamp(12px,2vw,22px);width:100%;
  min-height:66px;padding:18px 6px;background:none;border:0;cursor:pointer;text-align:left;
  color:#fff;transition:color .22s var(--sb8-ease),background-color .22s var(--sb8-ease)}
.sb8-wlk__btn:hover{background:rgba(255,255,255,.035)}
.sb8-wlk__btn:focus-visible{outline:2px solid var(--wl-sig);outline-offset:-2px}
.sb8-wlk__btn s{flex:0 0 auto;text-decoration:none;font-family:var(--sb8-mono);font-size:9px;
  letter-spacing:.16em;color:rgba(157,180,210,.5)}
.sb8-wlk__btn b{flex:1 1 auto;min-width:0;font-family:var(--sb8-display);
  font-size:clamp(18px,2vw,29px);font-weight:700;letter-spacing:-.022em;line-height:1.15}
.sb8-wlk__btn i{flex:0 0 auto;position:relative;width:13px;height:13px}
.sb8-wlk__btn i::before,.sb8-wlk__btn i::after{content:"";position:absolute;
  background:var(--wl-sig);border-radius:1px;transition:transform .26s var(--sb8-ease)}
.sb8-wlk__btn i::before{left:0;right:0;top:6px;height:1.5px}
.sb8-wlk__btn i::after{top:0;bottom:0;left:6px;width:1.5px}
.sb8-wlk__btn[aria-selected="true"]{background:rgba(0,229,168,.05)}
.sb8-wlk__btn[aria-selected="true"] s{color:var(--wl-sig)}
.sb8-wlk__btn[aria-selected="true"] i::after{transform:scaleY(0)}

.sb8-wlk__panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s var(--sb8-ease),opacity .28s var(--sb8-ease);opacity:0}
.sb8-wlk__panel > p{overflow:hidden;margin:0}
.sb8-wlk__panel[data-open="1"]{grid-template-rows:1fr;opacity:1}
.sb8-wlk__panel[data-open="1"] > p{padding:0 6px 22px;max-width:62ch;
  font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.6;color:rgba(157,180,210,.9)}

/* ============================================================
   WAAR STA JE NU
   ============================================================ */
.sb8-wlw__box{display:grid;gap:clamp(20px,3vw,34px);padding:clamp(20px,3vw,34px);
  border-radius:20px;border:1px solid var(--wl-line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
@media (min-width:900px){.sb8-wlw__box{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.sb8-wlw__opts{display:grid;gap:9px;align-content:start}
.sb8-wlw__opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;
  padding:14px 16px;border-radius:12px;cursor:pointer;text-align:left;
  border:1px solid var(--wl-line-2);background:rgba(255,255,255,.028);color:#E8F0FA;
  transition:border-color .22s var(--sb8-ease),background-color .22s var(--sb8-ease)}
.sb8-wlw__opt:hover{border-color:rgba(0,229,168,.42)}
.sb8-wlw__opt:focus-visible{outline:2px solid var(--wl-sig);outline-offset:2px}
.sb8-wlw__opt i{flex:0 0 auto;width:9px;height:9px;border-radius:3px;
  background:rgba(168,188,216,.3);transition:background-color .22s var(--sb8-ease),
  box-shadow .22s var(--sb8-ease)}
.sb8-wlw__opt b{font-size:14.5px;font-weight:500;line-height:1.35}
.sb8-wlw__opt[aria-pressed="true"]{border-color:var(--wl-sig);background:rgba(0,229,168,.08)}
.sb8-wlw__opt[aria-pressed="true"] i{background:var(--wl-sig);box-shadow:0 0 0 4px rgba(0,229,168,.16)}
.sb8-wlw__out{align-self:start;padding:clamp(16px,2.4vw,24px);border-radius:14px;
  border:1px solid var(--wl-line);background:rgba(4,16,31,.42)}
.sb8-wlw__p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(232,240,250,.9)}
.sb8-wlw__chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sb8-wlw__chips li{padding:7px 12px;border-radius:999px;
  border:1px solid rgba(0,229,168,.36);background:rgba(0,229,168,.07);
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;color:#CFF5E8}

/* ============================================================
   FINALE
   ============================================================ */
.sb8-wlz__aura{position:absolute;inset:auto -14% 0 44%;height:84%;pointer-events:none;z-index:0;
  background:radial-gradient(52% 52% at 58% 56%,rgba(0,229,168,.15),transparent 70%)}
.sb8-wlz__grid{position:relative;z-index:1;display:grid;gap:clamp(30px,4.4vw,58px);align-items:center}
@media (min-width:900px){.sb8-wlz__grid{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}}
.sb8-wlz__copy .sb8-btnrow{margin-top:clamp(22px,3vw,30px)}
.sb8-wlz__scope{margin:18px 0 0;max-width:56ch;font-size:13.5px;line-height:1.6;
  color:rgba(157,180,210,.8)}
.sb8-wlz__stage{display:grid;justify-items:center;gap:20px}
.sb8-wlz .wlend{--bw:clamp(148px,16vw,212px)}
.sb8-wlz__stat{margin:0;padding:7px 14px;border-radius:999px;background:var(--wl-sig);color:#05261D;
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.18em;font-weight:600}

/* ============================================================
   VERMINDER BEWEGING

   De scroll-modules zetten --sp al op 1, dus elke scene staat in eindstand.
   Hier gaan alleen de overgangen en de hero-lus eruit.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sb8-wl *,.sb8-wl *::before,.sb8-wl *::after{
    transition-duration:.001ms!important;animation:none!important}
  .sb8-wls{min-height:auto}
  .sb8-wls__pin{position:static;min-height:0;padding-block:var(--sb8-chapter-y)}
  .sb8-wlpr__mask{clip-path:none}
  .wlwire__p{stroke-dashoffset:0}
  .wnw{stroke-dashoffset:0}
}

/* ============================================================
   LEVERANCIER VINDEN
   ============================================================ */

/* ---------- hero ---------- */
.sb8-sfh{padding-block:clamp(84px,10vw,150px) clamp(52px,7vw,96px)}
.sb8-sfh__aura{position:absolute;inset:auto -12% 24% 44%;height:72%;pointer-events:none;z-index:0;
  background:radial-gradient(52% 52% at 58% 44%,rgba(0,229,168,.13),transparent 70%)}
.sb8-sfh__grid{position:relative;z-index:1;display:grid;gap:clamp(34px,5vw,64px);align-items:center}
@media (min-width:1000px){.sb8-sfh__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}}
.sb8-sfh__lead{margin-top:18px;max-width:52ch}
.sb8-sfh__pts{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:10px;max-width:50ch}
.sb8-sfh__pts li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;
  color:rgba(232,240,250,.9)}
.sb8-sfh__pts i{flex:0 0 auto;width:6px;height:6px;margin-top:7px;border-radius:2px;
  background:var(--wl-sig);box-shadow:0 0 0 3px rgba(0,229,168,.16)}
.sb8-sfh__stage{display:grid;justify-items:center;gap:16px}
.sb8-sfh__net{position:relative;width:100%;max-width:460px;aspect-ratio:420/340;
  border-radius:18px;border:1px solid var(--wl-line);
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.sb8-sfh__wires{position:absolute;inset:0;width:100%;height:100%;fill:none}
.sfw{stroke:rgba(0,229,168,.4);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .8s var(--sb8-ease);transition-delay:calc(var(--i) * 110ms)}
.sb8-sfh[data-on="1"] .sfw{stroke-dashoffset:0}
.sb8-sfh__dot{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;margin:-3.5px;
  border-radius:50%;background:rgba(168,188,216,.34);
  opacity:0;transform:scale(.6);
  transition:opacity .5s var(--sb8-ease),transform .5s var(--sb8-ease);
  transition-delay:calc(var(--i) * 60ms)}
.sb8-sfh[data-on="1"] .sb8-sfh__dot{opacity:1;transform:none}
.sb8-sfh__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:clamp(92px,12vw,124px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(0,229,168,.5);background:rgba(0,229,168,.09);
  box-shadow:0 0 0 10px rgba(0,229,168,.05)}
.sb8-sfh__core b{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;text-align:center;
  line-height:1.5;color:#E8F4EF;font-weight:500;padding:0 8px}

/* ---------- de check ---------- */
.sb8-sf{padding-block:var(--sb8-chapter-y)}
.sb8-sf__grid{display:grid;gap:clamp(24px,3.6vw,48px);align-items:start}
@media (min-width:1000px){.sb8-sf__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}

.sb8-sf__panel{position:relative;padding:clamp(20px,3vw,34px);border-radius:20px;
  border:1px solid var(--wl-line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014))}
.sb8-sf__top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:12px}
.sb8-sf__ref,.sb8-sf__stepl{margin:0;font-family:var(--sb8-mono);font-size:9px;
  letter-spacing:.18em;color:rgba(157,180,210,.6)}
.sb8-sf__ref b{color:rgba(232,240,250,.9);font-weight:500}
.sb8-sf__stepl{color:var(--wl-sig)}
.sb8-sf__bar{height:2px;border-radius:2px;background:rgba(168,188,216,.18);overflow:hidden;
  margin-bottom:clamp(22px,3vw,32px)}
.sb8-sf__bar i{display:block;height:100%;width:20%;background:var(--wl-sig);
  box-shadow:0 0 12px 1px rgba(0,229,168,.45);
  transition:width .42s var(--sb8-ease)}

.sb8-sf__q{border:0;padding:0;margin:0;min-width:0}
.sb8-sf__legend{padding:0;font-family:var(--sb8-display);font-weight:700;
  font-size:clamp(20px,2.1vw,30px);line-height:1.15;letter-spacing:-.02em;color:#fff;
  text-wrap:balance}
.sb8-sf__sub{margin:12px 0 0;font-size:14px;line-height:1.55;color:rgba(157,180,210,.86);
  max-width:56ch}
.sb8-sf__opts{display:grid;gap:9px;margin-top:clamp(20px,2.6vw,28px)}
@media (min-width:560px){.sb8-sf__opts[data-multi]{grid-template-columns:repeat(2,minmax(0,1fr))}}

.sb8-sf__opt{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;
  padding:14px 16px;border-radius:12px;cursor:pointer;text-align:left;
  border:1px solid var(--wl-line-2);background:rgba(255,255,255,.03);color:#E8F0FA;
  font-family:var(--sb8-sans);font-size:14.5px;font-weight:500;line-height:1.35;
  transition:border-color .2s var(--sb8-ease),background-color .2s var(--sb8-ease),
             transform .2s var(--sb8-ease)}
.sb8-sf__opt:hover{border-color:rgba(0,229,168,.45);background:rgba(255,255,255,.05)}
.sb8-sf__opt:active{transform:scale(.99)}
.sb8-sf__opt:focus-visible{outline:2px solid var(--wl-sig);outline-offset:2px}
.sb8-sf__opt s{flex:0 0 auto;position:relative;width:16px;height:16px;border-radius:5px;
  text-decoration:none;border:1px solid rgba(168,188,216,.42);
  transition:border-color .2s var(--sb8-ease),background-color .2s var(--sb8-ease)}
.sb8-sf__opts[data-multi="0"] .sb8-sf__opt s{border-radius:50%}
.sb8-sf__opt s::after{content:"";position:absolute;inset:3px;border-radius:2px;
  background:var(--wl-sig);opacity:0;transform:scale(.4);
  transition:opacity .18s var(--sb8-ease),transform .18s var(--sb8-ease)}
.sb8-sf__opts[data-multi="0"] .sb8-sf__opt s::after{border-radius:50%}
.sb8-sf__opt b{font-weight:500;min-width:0}
.sb8-sf__opt[aria-pressed="true"]{border-color:var(--wl-sig);background:rgba(0,229,168,.09);color:#fff}
.sb8-sf__opt[aria-pressed="true"] s{border-color:var(--wl-sig)}
.sb8-sf__opt[aria-pressed="true"] s::after{opacity:1;transform:none}

.sb8-sf__err{display:flex;align-items:center;gap:9px;margin:16px 0 0;padding:11px 14px;
  border-radius:10px;border:1px solid rgba(221,166,94,.42);background:rgba(221,166,94,.09);
  font-size:13.5px;color:#F3E2CA}
.sb8-sf__nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:clamp(22px,3vw,30px)}
.sb8-sf__back{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 4px;
  background:none;border:0;cursor:pointer;color:rgba(157,180,210,.86);
  font-family:var(--sb8-sans);font-size:14px;font-weight:500;
  transition:color .2s var(--sb8-ease)}
.sb8-sf__back:hover{color:#fff}
.sb8-sf__back:focus-visible{outline:2px solid var(--wl-sig);outline-offset:2px;border-radius:6px}
.sb8-sf__back s{display:block;width:7px;height:7px;text-decoration:none;
  border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}
.sb8-sf__next{margin-left:auto}

/* ---------- zoeken ---------- */
.sb8-sf__wait{display:grid;justify-items:center;gap:16px;text-align:center;
  padding:clamp(30px,6vw,56px) 0}
.sb8-sf__spin{display:flex;gap:7px}
.sb8-sf__spin i{width:8px;height:8px;border-radius:50%;background:var(--wl-sig);
  animation:sf-pulse 1.1s var(--sb8-ease) infinite}
.sb8-sf__spin i:nth-child(2){animation-delay:.14s}
.sb8-sf__spin i:nth-child(3){animation-delay:.28s}
@keyframes sf-pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:none}}
.sb8-sf__waith{margin:0;font-family:var(--sb8-display);font-weight:700;
  font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em;color:#fff}
.sb8-sf__waits{margin:0;font-size:13.5px;color:rgba(157,180,210,.8);min-height:1.4em}

/* ---------- resultaat ---------- */
.sb8-sf__resl{margin:0 0 10px;display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  border:1px solid rgba(0,229,168,.45);background:rgba(0,229,168,.09);
  font-family:var(--sb8-mono);font-size:9px;letter-spacing:.18em;color:var(--wl-sig)}
.sb8-sf__resh{margin:0;color:#fff}
.sb8-sf__rest{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:rgba(157,180,210,.9);
  max-width:56ch}
.sb8-sf__sum{margin:clamp(20px,2.8vw,28px) 0 0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--wl-line)}
.sb8-sf__row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:12px 0;border-bottom:1px solid rgba(168,188,216,.1)}
.sb8-sf__row dt{margin:0;flex:0 0 auto;font-family:var(--sb8-mono);font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(157,180,210,.62)}
.sb8-sf__row dd{margin:0;text-align:right;font-size:14px;color:#E8F0FA;min-width:0}
.sb8-sf__rescta{margin-top:clamp(22px,3vw,30px)}
.sb8-sf__again{margin-top:16px;padding:8px 2px;min-height:40px;background:none;border:0;
  cursor:pointer;color:rgba(157,180,210,.7);font-family:var(--sb8-sans);font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px}
.sb8-sf__again:hover{color:#fff}
.sb8-sf__again:focus-visible{outline:2px solid var(--wl-sig);outline-offset:2px;border-radius:6px}

/* ---------- het netwerkbeeld ---------- */
.sb8-sf__map{position:relative;width:100%;aspect-ratio:1/1;max-width:520px;
  margin-inline:auto;border-radius:20px;border:1px solid var(--wl-line);
  background:radial-gradient(110% 90% at 50% 0%,rgba(255,255,255,.045),rgba(255,255,255,.012))}
/* Op brede schermen blijft het netwerkbeeld meelopen. Het paneel links wordt
   in de resultaatstand een stuk langer, en zonder dit staat het beeld ver
   boven het resultaat uit beeld. */
@media (min-width:1000px){.sb8-sf__map{position:sticky;top:clamp(96px,12vh,140px)}}
.sb8-sf__maplbl{position:absolute;left:16px;top:14px;z-index:3;
  font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.2em;
  color:rgba(157,180,210,.5);transition:color .4s var(--sb8-ease)}
.sb8-sf__maplbl[data-narrow="1"]{color:var(--wl-sig)}
.sb8-sf__wires{position:absolute;inset:0;width:100%;height:100%;fill:none}
.sf-wire{stroke:rgba(168,188,216,.2);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .6s var(--sb8-ease),opacity .45s var(--sb8-ease);
  transition-delay:var(--d,0ms);opacity:0}
.sf-wire[data-on="1"]{stroke-dashoffset:0;opacity:1}
.sb8-sf__nodes{position:absolute;inset:0}
.sf-node{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;margin:-4.5px;
  border-radius:50%;background:rgba(168,188,216,.34);
  opacity:0;transform:scale(.5);
  transition:opacity .45s var(--sb8-ease),transform .45s var(--sb8-ease),
             background-color .45s var(--sb8-ease),box-shadow .45s var(--sb8-ease);
  transition-delay:var(--d,0ms)}
.sf-node[data-on="1"]{opacity:1;transform:none}
.sf-node[data-win="1"]{background:var(--wl-sig);width:14px;height:14px;margin:-7px;
  box-shadow:0 0 0 6px rgba(0,229,168,.14),0 0 22px 4px rgba(0,229,168,.45)}
.sb8-sf__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:grid;place-items:center;width:clamp(96px,13vw,132px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(0,229,168,.5);background:rgba(4,16,31,.86);
  box-shadow:0 0 0 10px rgba(0,229,168,.05)}
.sb8-sf__core b{font-family:var(--sb8-mono);font-size:8.5px;letter-spacing:.14em;text-align:center;
  line-height:1.5;color:#E8F4EF;font-weight:500;padding:0 10px}

@media (max-width:999px){
  .sb8-sf__map{order:-1;max-width:340px;aspect-ratio:1/.72}
  .sb8-sf__opts[data-multi="1"]{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:559px){
  .sb8-sf__next{margin-left:0;width:100%;justify-content:center}
  .sb8-sf__nav{flex-direction:column-reverse;align-items:stretch}
  .sb8-sf__back{justify-content:center}
  .sb8-sf__row{flex-direction:column;gap:4px}
  .sb8-sf__row dd{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .sb8-sf *,.sb8-sfh *{transition-duration:.001ms!important;animation:none!important}
  .sb8-sfh__dot,.sb8-sf-node{opacity:1;transform:none}
  .sfw,.sf-wire[data-on="1"]{stroke-dashoffset:0}
}

/* ===== LEVERANCIER VINDEN, NA DE CHECK ===================================== */
.sb8-sfn__grid{display:grid;gap:clamp(30px,4.2vw,56px);align-items:start}
@media (min-width:1000px){.sb8-sfn__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.sb8-sfn__steps{list-style:none;margin:clamp(26px,3.4vw,40px) 0 0;padding:0;display:grid;gap:0}
.sb8-sfn__step{display:flex;gap:clamp(14px,1.8vw,22px);align-items:flex-start;
  padding:clamp(18px,2.2vw,24px) 0;border-top:1px solid rgba(168,188,216,.13)}
.sb8-sfn__step:first-child{border-top:0;padding-top:0}
.sb8-sfn__num{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  border:1px solid rgba(0,229,168,.35);background:rgba(0,229,168,.08);
  font-family:var(--sb8-mono);font-size:12px;color:var(--wl-sig)}
.sb8-sfn__txt{min-width:0}
.sb8-sfn__kop{margin:6px 0 0;font-family:var(--sb8-display);font-weight:700;
  font-size:clamp(17px,1.5vw,20px);line-height:1.25;color:#fff}
.sb8-sfn__txt p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:rgba(157,180,210,.88);max-width:46ch}
.sb8-sfn__card{position:relative;overflow:hidden;padding:clamp(22px,3vw,34px);border-radius:20px;
  border:1px solid rgba(168,188,216,.16);background:linear-gradient(180deg,rgba(18,26,40,.94),rgba(12,18,29,.96))}
.sb8-sfn__glow{position:absolute;inset:-40% -30% auto auto;width:74%;height:70%;pointer-events:none;
  background:radial-gradient(circle at 70% 30%,rgba(0,229,168,.16),transparent 66%);filter:blur(12px)}
.sb8-sfn__cl{position:relative;margin:0 0 12px;font-family:var(--sb8-mono);font-size:9px;
  letter-spacing:.2em;color:var(--wl-sig)}
.sb8-sfn__ckop{position:relative;margin:0;font-family:var(--sb8-display);font-weight:700;
  font-size:clamp(20px,2vw,25px);line-height:1.2;color:#fff;max-width:22ch}
.sb8-sfn__ctekst{position:relative;margin:14px 0 0;font-size:14.5px;line-height:1.6;color:rgba(157,180,210,.9)}
.sb8-sfn__cpts{position:relative;list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.sb8-sfn__cpts li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.5;
  color:rgba(200,216,236,.94)}
.sb8-sfn__cpts i{flex:0 0 auto;width:6px;height:6px;margin-top:7px;border-radius:2px;
  background:var(--wl-sig);transform:rotate(45deg)}
.sb8-sfn__cbtn{position:relative;margin-top:clamp(22px,2.8vw,28px)}
@media (max-width:640px){
  .sb8-sfn__cbtn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .sb8-sfn *{transition-duration:.001ms!important;animation:none!important}
}

/* ===== ANTWOORDEN UIT DE LEVERANCIERSCHECK IN HET CONTACTFORMULIER ======== */
.sb-levcheck{padding:16px 18px;border-radius:14px;border:1px solid rgba(0,229,168,.3);
  background:rgba(0,229,168,.06)}
.sb-levcheck[hidden]{display:none}
.sb-levcheck__top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:0 0 12px}
.sb-levcheck__lbl{font-family:var(--sb8-mono,ui-monospace,monospace);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#00E5A8}
.sb-levcheck__del{padding:6px 2px;min-height:32px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:12.5px;color:rgba(157,180,210,.86);text-decoration:underline;
  text-underline-offset:3px}
.sb-levcheck__del:hover{color:#fff}
.sb-levcheck__del:focus-visible{outline:2px solid #00E5A8;outline-offset:2px;border-radius:6px}
.sb-levcheck__sum{margin:0;padding:0;display:grid;gap:0}
.sb-levcheck__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:8px 0;border-top:1px solid rgba(168,188,216,.13)}
.sb-levcheck__row:first-child{border-top:0;padding-top:0}
.sb-levcheck__row dt{margin:0;flex:0 0 auto;font-family:var(--sb8-mono,ui-monospace,monospace);
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(157,180,210,.72)}
.sb-levcheck__row dd{margin:0;text-align:right;font-size:13.5px;color:#E8F0FA;min-width:0}
@media (max-width:560px){
  .sb-levcheck__row{flex-direction:column;gap:3px}
  .sb-levcheck__row dd{text-align:left}
}