/* ==========================================================================
   Richting C · de branchekiezer (kiezer.css). Bovenop c.css en sheet.css.
   Wat hier beweegt op een gebaar wordt in kiezer.js door een veer gestuurd
   (Motion.spring) en raakt alleen transform en opacity. CSS-overgangen staan
   hier alleen op toestanden zonder vinger erachter: indrukken, oplichten.
   Klassen op <html>, gezet voor de eerste verf (zie de kop van index.html):
   kz = JavaScript draait · nacht-on = de nachtdienst als stapel met rail ·
   tally-live = het 3D-turfteken slaat straks de streep · static = geen beweging.
   ========================================================================== */

/* ---------- koppen verspringen niet als het lettertype binnenkomt ----------
   Smalle Archivo (wdth 70, 800) is 0,763 keer zo breed als de vette Arial waarop de browser terugvalt. Zonder dit
   breekt een kop eerst over meer regels en klapt de pagina in zodra Archivo er is (gemeten: CLS 0,15 op 768 px).
   Deze terugval is even breed gemaakt, dus de regels breken meteen goed. Lopende tekst en mono schelen minder dan 1%. */
@font-face{font-family:"Archivo Terugval";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Roboto Bold"),local("Roboto-Bold"),local("Arial");size-adjust:76.3%;font-weight:100 900}
h1,h2,h3,.h-cond{font-family:'Archivo','Archivo Terugval',sans-serif}

/* ---------- held: links de belofte, rechts het object, vrij in de ruimte ---------- */
.hero{position:relative;padding:clamp(28px,3.4vw,52px) 0 clamp(36px,4.4vw,68px)}
.hero-in > *{position:relative;z-index:1}
.hero-in > .hero-3d{z-index:0}
.hero-3d{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.hero-3d svg{pointer-events:none}
/* het stilstaande merkteken: zonder JavaScript, en tot tally3d.js zijn eigen (zelfde) tekening neerzet */
html:not(.tally-live) .hero-3d:empty{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -6 94 68'%3E%3Cg fill='%23F4F3EF'%3E%3Crect width='8' height='56' rx='4'/%3E%3Crect x='16' width='8' height='56' rx='4'/%3E%3Crect x='32' width='8' height='56' rx='4'/%3E%3Crect x='48' width='8' height='56' rx='4'/%3E%3C/g%3E%3Crect x='-10' y='26' width='76' height='8' rx='4' fill='%23C6F24E' transform='rotate(-14 28 30)'/%3E%3C/svg%3E") center/min(70%,420px) auto no-repeat}
@media(min-width:941px){
  .hero-in > :not(.hero-3d){max-width:min(780px,55%)}
  .hero h1{font-size:clamp(50px,6.5vw,104px)}
  .hero .lede{margin-top:clamp(16px,1.8vw,26px)}
  .hero-ctas{margin-top:clamp(18px,2vw,28px)}
  /* het vlak loopt door tot achter de kopregel en tot de onderrand van de held; het object staat in het midden */
  .hero-3d{position:absolute;left:49%;right:0;top:-68px;bottom:0;min-height:520px}
}
@media(max-width:940px){
  /* mobiel: direct onder de kop, zodat "af komt." en de streep die landt in één blik vallen */
  .hero-3d{height:56vh;min-height:320px;max-height:560px;margin:-34px calc(var(--gutter) * -1) 0}
  html:not(.hero-tall) .hero-3d{height:38vh;min-height:230px;max-height:340px} /* alleen het stilstaande teken: minder hoog */
  .hero .lede{margin-top:6px}
}

/* bij het object, klein: wat je ermee kunt. Alleen als het echt draait (tally-live), anders valt er niets te slepen. */
.hero-3d-hint{display:none;visibility:hidden;font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55);text-align:center;pointer-events:none}
html.hero-tall .hero-3d-hint{display:block} /* de regel houdt zijn plek, ook als het object terugvalt op het stilstaande teken */
html.tally-live .hero-3d-hint{visibility:visible}
@media(min-width:941px){.hero-in > .hero-3d-hint{position:absolute;z-index:0;left:49%;right:0;bottom:13%;max-width:none}}
@media(max-width:940px){.hero-3d-hint{margin:-6px 0 14px}}

/* "af komt." licht op als de streep landt (tally:strike). De echte tekst blijft staan voor schermlezer,
   zoekmachine en selectie; twee lagen wisselen alleen van dekking. Zonder tally-live is hij gewoon lime. */
.afkomt{position:relative;display:inline-block;white-space:nowrap}
html.tally-live .afkomt{color:transparent}
html.tally-live .afkomt::before,html.tally-live .afkomt::after{content:attr(data-lit);content:attr(data-lit) / "";position:absolute;left:0;top:0;transition:opacity .32s ease;pointer-events:none}
html.tally-live .afkomt::before{color:var(--fg);opacity:1}
html.tally-live .afkomt::after{color:var(--lime);opacity:0}
html.tally-live.tally-struck .afkomt::before{opacity:0}
html.tally-live.tally-struck .afkomt::after{opacity:1}

/* de twee beloftes onder de knoppen: mono, iets groter dan de geruststelling eronder, lime stip ervoor */
.belofte{display:flex;align-items:baseline;gap:10px;margin-top:clamp(18px,2.2vw,26px);font:500 13px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.belofte .led{transform:translateY(-1px)}
.belofte i{font-style:normal;color:var(--fg-55)}
.belofte [hidden]{display:none}
.belofte-reviews{color:var(--fg-70);margin-left:6px}
.hero .belofte + .micro{margin-top:8px}
@media(max-width:560px){.belofte{font-size:12.5px}.belofte-t > span{display:block}.belofte-t > i{display:none}}

/* de drie tellers als smalle strook. Vaste kolommen: een getal dat optelt duwt zijn buren niet weg. */
.hero-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px clamp(14px,2.4vw,36px);margin-top:clamp(24px,3vw,40px);padding-top:18px;border-top:1px solid var(--line-soft)}
.hero-counts > div{display:flex;flex-direction:column;gap:6px;min-width:0}
.hero-counts .num{font-size:clamp(28px,2.7vw,42px);white-space:nowrap}
.hero-counts > div > span{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55)}
.hc-src{grid-column:1/-1;display:flex;align-items:center;gap:10px;font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55)}

/* ---------- elke sectie eindigt met één knop en de geruststelling ernaast ---------- */
.kz-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(22px,2.8vw,36px)}
.kz-cta .micro{margin:0}
.kz-cta-t{flex:1 1 100%;font-family:var(--display);font-weight:600;font-stretch:90%;font-variation-settings:'wdth' 90;font-size:clamp(19px,1.7vw,25px);line-height:1.25;color:var(--fg);max-width:44ch}
.kz-cta-vraag{margin-top:clamp(28px,3.4vw,48px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line-soft);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px clamp(24px,5vw,80px);align-items:center}
.kz-cta-vraag .kz-cta-t{max-width:40ch}
.kz-cta-a{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
@media(max-width:860px){.kz-cta-vraag{grid-template-columns:1fr}}
@media(max-width:560px){.kz-cta .btn{width:100%}}
.nowrap{white-space:nowrap}
.band-lede{margin-top:clamp(18px,2.2vw,28px)}
.band-mail{font-size:15.5px;color:var(--fg-70);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:.4em;flex-wrap:wrap}
.band-mail span{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(244,243,239,.4);text-underline-offset:4px}
.band-mail:hover span{text-decoration-color:var(--lime)}
/* de vaste balk op mobiel draagt de hoofdknop; in de kopregel staat hij daarom pas vanaf 701px */
.sticky-cta .btn{flex-direction:column;gap:3px;line-height:1.1}
.sticky-cta .btn small{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.72}
@media(max-width:700px){.nav-cta-m{display:none}}

/* ---------- 01 · de nachtdienst ----------
   Basis (zonder JavaScript, minder beweging, ?static=1): 07:00 staat klaar en de nacht is een gewone lijst. */
.nacht{overflow:hidden;padding:clamp(20px,3.6vw,52px);padding-top:clamp(18px,2.4vw,30px);display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px)}
.nacht-sky{position:absolute;left:0;right:0;top:0;height:170px;pointer-events:none}
.nacht-sky i{position:absolute;inset:0;opacity:0}
.nacht-sky i::before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.nacht-sky i::after{content:"";position:absolute;inset:0}
.sky-dusk::before{background:linear-gradient(90deg,transparent,#FFB224 14%,#FF7A59 40%,rgba(140,162,255,.9) 78%,transparent)}
.sky-dusk::after{background:radial-gradient(58% 100% at 20% 0,rgba(255,138,76,.2),transparent 72%)}
.sky-night::before{background:linear-gradient(90deg,transparent,rgba(61,102,255,.85) 26%,rgba(140,162,255,.55) 72%,transparent)}
.sky-night::after{background:radial-gradient(64% 100% at 50% 0,rgba(20,54,245,.24),transparent 72%)}
.sky-dawn::before{background:linear-gradient(90deg,transparent,rgba(140,162,255,.7) 12%,var(--lime) 52%,var(--ivory) 80%,transparent)}
.sky-dawn::after{background:radial-gradient(58% 100% at 80% 0,rgba(198,242,78,.2),transparent 72%)}
.nacht-sky .sky-dawn{opacity:1}
.nacht-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;position:relative}
.nacht-tag b{font-weight:500}
.nacht-tag{display:inline-flex;align-items:center;gap:10px;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-70)}
.nacht-stage{position:relative;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.nacht-clock{display:grid;font:500 clamp(72px,12vw,176px)/.86 var(--mono);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--fg);justify-self:start}
.nk{grid-area:1/1;display:none;white-space:nowrap}
.nk-klaar{display:block;color:var(--lime)}
.nk-dawn{color:var(--lime)}
.nacht-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,44px)}
.nm{padding:16px 0 18px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px;min-width:0}
.nm-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font:500 11.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--peri)}
.nm-h time{color:var(--lime);letter-spacing:.06em;font-size:13px}
.nm-i{color:var(--fg-55)}
.nm p{font-size:15.5px;line-height:1.5;color:var(--fg-70);max-width:44ch}
.nm-klaar{border-top-color:var(--lime)}
.nm-klaar p{color:var(--fg)}
.nm-stamp{transform:rotate(-2deg);transform-origin:0 50%}
.nr,.nacht-pause{display:none}
.nacht-foot{font:500 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55);border-top:1px solid var(--line-soft);padding-top:14px}
@media(max-width:900px){.nacht-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.nacht-list{grid-template-columns:1fr}.nacht-clock{font-size:clamp(72px,24vw,112px)}}

/* met beweging: één grote klok, één kaart die overvloeit, en de rail eronder */
html.nacht-on .nacht-sky .sky-dawn{opacity:0}
html.nacht-on .nacht-sky .sky-night,html.nacht-on .nacht-sky .sky-dusk{opacity:1}
html.nacht-on .nacht-stage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,88px);align-items:center}
html.nacht-on .nk{display:block}
html.nacht-on .nk-klaar{display:none}
html.nacht-on .nk-dawn{opacity:0}
html.nacht-on .nacht-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:center;--fade:28px;overflow:hidden;padding:6px var(--fade);margin:-6px calc(var(--fade) * -1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
html.nacht-on .nm{grid-area:1/1;border:0;padding:0;gap:clamp(10px,1.2vw,16px);opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}
html.nacht-on .nm:first-child{opacity:1}
html.nacht-on .nm.is-cur{pointer-events:auto;-webkit-user-select:text;user-select:text}
html.nacht-on .nacht.is-moving .nm{will-change:transform,opacity}
html.nacht-on .nm-h time{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.nacht-on .nm p{font-family:var(--display);font-weight:600;font-stretch:90%;font-variation-settings:'wdth' 90;font-size:clamp(22px,2.7vw,41px);line-height:1.16;letter-spacing:0;color:var(--fg);max-width:24ch;text-wrap:balance}
html.nacht-on .nm-stamp{opacity:0}
@media(max-width:820px){
  html.nacht-on .nacht-stage{grid-template-columns:minmax(0,1fr);gap:16px}
  html.nacht-on .nacht-list{align-items:start;--fade:18px}
  html.nacht-on .nm p{max-width:26ch}
  .nacht-tag b{display:none}
}

/* de pauzeknop (WCAG 2.2.2): klein in beeld, ruim raakvlak */
html.nacht-on .nacht-pause{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:rgba(10,14,22,.55);color:var(--fg-70);font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;flex:none;cursor:pointer;position:relative;transition:transform .1s ease-out,color .15s,border-color .15s}
.nacht-pause::after{content:"";position:absolute;inset:-6px}
.nacht-pause svg{width:10px;height:10px;fill:currentColor;flex:none}
.nacht-pause .ic-play,.nacht-pause[data-state="paused"] .ic-pause{display:none}
.nacht-pause[data-state="paused"] .ic-play{display:block}
.nacht-pause:hover{color:var(--fg);border-color:rgba(140,162,255,.5)}
.nacht-pause:active{transform:scale(.96)}

/* de rail: een tijdas op schaal (elke halfuur een streepje), zes momenten, één knop om vast te pakken.
   touch-action pan-y: horizontaal is van de rail, verticaal blijft van de pagina. */
html.nacht-on .nr{display:block;position:relative;height:84px;--inset:24px;margin:0 -6px;touch-action:pan-y;cursor:grab;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.nr-track{position:absolute;left:var(--inset);right:var(--inset);top:38px;height:0}
.nr-line,.nr-fill{position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:1px}
.nr-line{background:rgba(244,243,239,.16)}
.nr-fill{background:linear-gradient(90deg,var(--cobalt),var(--lime));transform-origin:0 50%;transform:scaleX(0)}
/* 22:30 ligt op 25/535 van de nacht; daarna 17 keer een halfuur tot 07:00 */
.nr-ticks{position:absolute;left:4.6729%;right:0;top:-12px;height:7px;background:repeating-linear-gradient(90deg,rgba(244,243,239,.24) 0,rgba(244,243,239,.24) 1px,transparent 1px,transparent 5.88235%)}
.nr-stop{position:absolute;left:calc(var(--p) * 100%);top:0;width:0;height:0}
.nr-stop::before,.nr-stop::after{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%}
.nr-stop::before{background:#1B2436;border:1.5px solid rgba(244,243,239,.34)}
.nr-stop::after{background:var(--lime);opacity:0;transition:opacity .16s ease}
.nr-stop.is-passed::after{opacity:1}
.nr-stop b{position:absolute;top:24px;left:0;transform:translateX(-50%);font:500 11px/1 var(--mono);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--fg);opacity:.5;transition:opacity .2s ease;white-space:nowrap}
.nr-stop.is-cur b{opacity:1}
.nr-thumb{position:absolute;left:0;top:0;width:0;height:0}
.nacht.is-moving .nr-thumb,.nacht.is-moving .nr-fill{will-change:transform}
.nr-knob{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;background:var(--ink);border:1.5px solid var(--lime);color:var(--lime);display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.9),inset 0 1px 0 rgba(244,243,239,.1);transition:transform .1s ease-out}
.nr-knob svg{width:18px;height:11px;position:relative}
.nr-knob-dawn{position:absolute;inset:-1.5px;border-radius:50%;background:var(--lime);opacity:0}
.nacht.is-dawn .nr-knob{color:var(--ink)}
.nacht.is-held .nr-knob{transform:scale(1.14)}
.nr:focus-visible{outline:none}
.nr:focus-visible .nr-knob{outline:2px solid var(--ivory);outline-offset:4px}
@media(max-width:560px){
  html.nacht-on .nr{--inset:20px;margin:0 -4px}
  .nr-stop b{font-size:10px;letter-spacing:0}
}

/* ---------- 02 · de branchekaarten ---------- */
/* De onthulling van base.js zet transform op de kaart en wint daarmee van :hover en :active uit c.css.
   Indrukken en optillen lopen daarom over scale en translate: eigen eigenschappen, eigen overgang. */
.bento .bcell{overflow:hidden;isolation:isolate}
.js .bento .bcell{transition:opacity .6s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms),scale .12s ease-out,translate .35s var(--ease),border-color .35s,background .35s}
.js.static .bento .bcell{transition:none}
.bento .bcell:active{transform:none;scale:.985}
@media(hover:hover) and (pointer:fine){
  .bento .bcell:hover{translate:0 -3px}
  .bento .bcell[data-soon]:hover .b-arrow{background:rgba(198,242,78,.12);border-color:var(--lime);border-style:solid;color:var(--lime);transform:rotate(90deg)}
}
.bento .bcell h3{font-size:clamp(36px,3.7vw,60px)}
.bento .bcell-main h3{font-size:clamp(44px,5.2vw,84px)}
.bento .b-tag{font-weight:700;font-stretch:88%;font-variation-settings:'wdth' 88;font-size:clamp(21px,1.8vw,27px);line-height:1.14;max-width:22ch;text-wrap:balance}
.bento .bcell-main .b-tag{font-size:clamp(23px,2.2vw,33px);max-width:20ch}
.b-src{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55);align-self:center}
.b-go{align-self:flex-start;margin-top:10px;min-height:46px;padding:0 20px;font-size:15px;pointer-events:none}
.b-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:10px}
.b-foot .b-status{margin:0}
.b-more{font:600 14.5px/1.3 var(--body);color:var(--fg);display:inline-flex;align-items:center;gap:8px}
.b-more::after{content:"";width:14px;height:1.5px;background:currentColor;opacity:.5;transition:transform .3s var(--ease),opacity .3s;transform-origin:0 50%}
@media(hover:hover) and (pointer:fine){.bento .bcell:hover .b-more::after{transform:scaleX(1.8);opacity:1}.bento .bcell-main:hover .b-go .arr{transform:translateX(3px)}}

@media(max-width:720px){.bento .bcell-main .b-arrow{display:none}} /* mobiel: de telefoon staat bovenaan en de knop Bekijk het werk zegt het al */
/* lichtvlek onder de cursor: een vaste schijf die alleen verschuift (transform), onder de tekst, boven het glas */
.bento .bcell::before{content:"";position:absolute;z-index:-1;left:-300px;top:-300px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(140,162,255,.16),rgba(140,162,255,.055) 46%,transparent 72%);
  transform:translate3d(var(--mx,0px),var(--my,0px),0);opacity:0;transition:opacity .4s ease;pointer-events:none}
.bento .bcell.is-lit::before{opacity:1;will-change:transform}

/* de voorvertoning in het blad */
.bv{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.bv .kicker{padding-right:52px}
.bv h2{font-size:clamp(30px,4vw,50px);max-width:16ch}
.bv-wat{font-size:clamp(16px,1.2vw,17.5px);line-height:1.55;color:var(--fg-70);max-width:58ch}
.bv-blok{display:flex;flex-direction:column;gap:2px}
.bv-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55);padding-bottom:10px}
.bv-bewijs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.bv-bewijs li{padding:13px 0;border-top:1px solid var(--line-soft);font-size:16px;line-height:1.45;color:var(--fg)}
.bv-bewijs li:last-child{border-bottom:1px solid var(--line-soft)}
.bv-bewijs b{font:500 1.06em/1 var(--mono);letter-spacing:-.03em;word-spacing:-.28em;color:var(--lime);white-space:nowrap;font-variant-numeric:tabular-nums}
.bv-eerlijk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:baseline}
.bv-eerlijk span{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--peri)}
.bv-eerlijk p{font-size:15.5px;line-height:1.5;color:var(--fg-70)}
.bv .b-status{margin:0}
.bv-acties{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:4px;padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line-soft)}
.bv-acties .micro{margin:0;max-width:60ch}
@media(max-width:520px){.bv-eerlijk{grid-template-columns:1fr}.bv-acties .btn{width:100%}}
/* van voorvertoning naar audit in hetzelfde blad: de nieuwe inhoud vervaagt kort in */
.sheet-body.kz-swap{animation:kz-swap .24s ease both}
@keyframes kz-swap{from{opacity:0}to{opacity:1}}

/* ---------- 03 · stempels bij de grote tellers ---------- */
.count .stamp{align-self:flex-start}
.werkt-met{margin-top:18px;font:500 11.5px/1.7 var(--mono);letter-spacing:.06em;color:var(--fg-70)}
.werkt-met span{text-transform:uppercase;letter-spacing:.14em;color:var(--peri);margin-right:6px}
.werkt-modellen{margin-top:6px;font-size:10.5px;color:var(--fg-55)}
/* tekstronde 2 (K7): de lijst met klussen is weg, het paneel met klanten en werkwijze staat alleen in de rij */
.proofrow{grid-template-columns:minmax(0,1fr)}
.jobs li{grid-template-columns:110px minmax(0,1fr)}
.jobs li > span:last-child{overflow-wrap:anywhere}
@media(max-width:380px){.jobs li{grid-template-columns:96px minmax(0,1fr);gap:10px}.log{padding:18px}}

/* ---------- 04 · van 60 naar 200 punten: de score als schuif met turfstreepjes ---------- */
.turf{display:none}
html.kz .turf{display:block;padding:clamp(20px,3.4vw,48px);margin-bottom:14px;--inset:22px}
.turf-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px clamp(24px,4.6vw,72px);align-items:end}
.turf-score{display:flex;flex-direction:column;gap:8px}
.turf-score .num{font-size:clamp(64px,9vw,136px);display:inline-block;min-width:3ch;letter-spacing:-.06em}
.turf-score span{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55)}
.turf-meta{display:flex;flex-wrap:wrap;gap:12px clamp(20px,3.4vw,52px);margin:0}
.turf-meta dt{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55)}
.turf-meta dd{margin:6px 0 0;font:500 clamp(16px,1.4vw,19px)/1.2 var(--mono);font-variant-numeric:tabular-nums;color:var(--fg-70);white-space:nowrap}
.turf-meta dd b{font-weight:500;color:var(--fg)}
.turf-stamp{align-self:start;justify-self:end}
.turf-body{position:relative;margin-top:clamp(20px,3vw,40px);touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.turf-field{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));padding:0 var(--inset);row-gap:14px}
.tg{display:block;padding:0 13%}
.tg svg{display:block;width:100%;height:auto;overflow:visible}
.tg line{fill:none;stroke-width:7;stroke-linecap:round}
.tg .g{stroke:rgba(244,243,239,.1)}
.tg .s{stroke:var(--ivory);stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.tg .s5{stroke:var(--lime)}
.turf-rail{position:relative;height:60px;outline:none}
.turf-track{position:absolute;left:var(--inset);right:var(--inset);top:32px;height:0}
.turf-line,.turf-fill{position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:1px}
.turf-line{background:rgba(244,243,239,.16)}
.turf-fill{background:linear-gradient(90deg,var(--cobalt),var(--lime));transform-origin:0 50%;transform:scaleX(0)}
.turf-mark{position:absolute;left:calc(var(--p) * 100%);top:-7px;width:1px;height:14px;background:rgba(244,243,239,.34)}
.turf-thumb{position:absolute;left:0;top:0;width:0;height:0}
.turf.is-moving .turf-thumb,.turf.is-moving .turf-fill{will-change:transform}
.turf-knob{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;background:var(--ink);border:1.5px solid var(--lime);color:var(--lime);display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.9),inset 0 1px 0 rgba(244,243,239,.1);transition:transform .1s ease-out}
.turf-knob svg{width:18px;height:11px}
.turf.is-held .turf-knob{transform:scale(1.14)}
.turf-rail:focus-visible .turf-knob{outline:2px solid var(--ivory);outline-offset:4px}
.turf-zones{position:relative;display:flex;justify-content:space-between;gap:12px;margin:0 var(--inset);font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.turf-zones span{opacity:.5;transition:opacity .25s ease;white-space:nowrap}
.turf-zones b{font-weight:500}
.turf-zones span.is-now{opacity:1}
.turf-zones [style]{position:absolute;top:0;left:calc((var(--a) + var(--b)) / 2 * 100%);transform:translateX(-50%)}
@media(max-width:900px){
  .turf-zones [style]{display:none}
  .turf-head{grid-template-columns:minmax(0,1fr) auto}
  .turf-meta{grid-column:1/-1;grid-row:2;margin:0}
}
@media(max-width:420px){.turf-zones b{display:none}}
@media(max-width:720px){
  html.kz .turf{--inset:20px}
  .turf-field{grid-template-columns:repeat(10,minmax(0,1fr))}
  .tg{padding:0 11%}
}
.steps .step .sn{flex-direction:column;align-items:flex-start;gap:10px}
/* de fase-kaart licht op als de score zijn gebied ingaat: een laag erboven wisselt van dekking */
.step{isolation:isolate}
.step::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--lime);background:linear-gradient(180deg,rgba(198,242,78,.08),rgba(198,242,78,0) 58%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}
html.kz .step .sn > span:first-child{display:inline-flex;align-items:center;gap:9px}
html.kz .step .sn > span:first-child::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);opacity:.22;transition:opacity .3s ease;flex:none}
html.kz .step.is-now::after{opacity:1}
html.kz .step.is-now .sn > span:first-child::before,html.kz .step.is-done .sn > span:first-child::before{opacity:1}

/* ---------- slot: het aanbod, en wie je spreekt ---------- */
.aanbod-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr);gap:clamp(28px,5vw,88px);align-items:end}
.band.aanbod h2{font-size:clamp(40px,5.4vw,88px);max-width:17ch;margin-top:14px}
.aanbod .band-lede{max-width:50ch}
.aanbod .band-row{margin-top:clamp(22px,2.6vw,34px)}
/* wie je spreekt: de naamkaarten staan in c/wie.css, hier het paneel en de tekst */
.wie{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);padding:clamp(16px,1.8vw,24px)}
.wie-copy{display:flex;flex-direction:column;gap:10px;min-width:0}
.wie-copy h3{font-size:clamp(26px,2.3vw,34px);line-height:.98}
.zin{display:inline-block}
.wie-copy p{font-size:15.5px;line-height:1.5;color:var(--fg-70)}
/* drie beloftes bij de laatste knop, elk op een eigen regel */
.beloftes{list-style:none;padding:0;margin:clamp(18px,2.2vw,26px) 0 0;display:flex;flex-direction:column;gap:9px}
.beloftes li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:12px;align-items:baseline;font-family:var(--display);font-weight:600;font-stretch:90%;font-variation-settings:'wdth' 90;font-size:clamp(18px,1.5vw,22px);line-height:1.25;color:var(--fg)}
.beloftes li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);transform:translateY(-2px)}
@media(max-width:1000px){.aanbod-grid{grid-template-columns:1fr;align-items:start}.wie{max-width:520px}}
.merkregel .sec-in{padding-top:clamp(44px,6vw,96px);padding-bottom:clamp(44px,6vw,96px)}
.merkregel .h-cond{font-size:clamp(40px,6.4vw,108px);max-width:14ch}
.merkregel .h-cond em{font-style:normal;color:var(--lime)}

/* ---------- de lopende band: vast te pakken ---------- */
.ticker.kz-band{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.ticker.kz-band .ticker-track{animation:none;will-change:transform}

/* ---------- voorkeuren ---------- */
@media (prefers-reduced-motion: reduce){.sheet-body.kz-swap{animation:kz-swap .2s ease both!important}}
@media (prefers-contrast: more){.nr-line,.turf-line{background:var(--fg-70)}.tg .g{stroke:rgba(244,243,239,.3)}}

/* ---------- 06 · jouw nachtdienst: de zesde kaart, met de week als klein live object (nacht3d.js) ---------- */
.bento .bcell-nacht{grid-column:span 4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);align-items:center;min-height:0}
.bcell-nacht .bc-copy{height:100%}
.b-nacht3d{position:relative;aspect-ratio:640/420;width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(90% 80% at 50% 100%,rgba(198,242,78,.07),transparent 60%),linear-gradient(180deg,#0E1526,#070A12)}
.b-nacht3d svg{width:100%;height:100%}
.b-nacht3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .5s var(--ease)}
.b-nacht3d[data-staat="3d"] canvas{opacity:1}
.b-nacht3d[data-staat="3d"] svg{opacity:0;transition:opacity .5s var(--ease)}
/* telefoon en tablet: de dag-lus als film (nachtfilm.js), de poster erboven tot hij speelt */
.b-nacht3d .nd-film-poster,.b-nacht3d .nd-film{display:none}
@media (pointer:coarse),(max-width:899px){
  .b-nacht3d .nd-film-poster,.b-nacht3d .nd-film{display:block;position:absolute;inset:0;width:100%;height:100%}
  .b-nacht3d .nd-film{object-fit:cover;z-index:1}
  .b-nacht3d .nd-film-poster{z-index:2;transition:opacity .25s var(--ease)}
  .b-nacht3d .nd-film-poster img{display:block;width:100%;height:100%;object-fit:cover}
  .b-nacht3d.is-speelt>.nd-film-poster{opacity:0}
}
@media(max-width:1000px){.bento .bcell-nacht{grid-column:span 6}}
@media(max-width:720px){.bento .bcell-nacht{grid-column:span 1;grid-template-columns:minmax(0,1fr)}.b-nacht3d{order:-1}.bcell-nacht .b-arrow{display:none}}
/* de kaart weet hoe laat het is (klok.js); zonder JavaScript alleen de vraag */
.b-klok{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:10px;font:500 12px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-70)}
.b-klok time{font-size:15px;font-weight:600;color:var(--lime);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.b-klok time:empty{display:none}