/* ==========================================================================
   BannerBazen · v9 · "In één oogopslag, in beweging", met het blok en de baan
   Content first. Eén lettertype, oranje alleen als punt, lijn en knop.
   Grote koppen met de oranje punt; alles wat beweegt, beweegt omdat het
   iets uitlegt.
   ========================================================================== */
/* v13: Neue Haas Grotesk Display, zoals in de Odido-case: koppen in 65 Medium, leestekst in 55 Roman.
   v14, 23 oktober: de webfonts van Commercial Type (weblicentie bannerbazen.nl, zie pijplijn/letter.py) */
@font-face{font-family:"NHaas";src:url(/assets/fonts/NeueHaasGroteskDisplay-55Roman-Web.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NHaas";src:url(/assets/fonts/NeueHaasGroteskDisplay-65Medium-Web.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
/* v14, ronde 20: tot de letter er is, staat de tekst in Arial (of wat erop lijkt), even breed gemaakt als Neue Haas
   (55: 92,4 %, 65: 95,5 %, gemeten): dan verspringt er niets als de letter binnenkomt (geen preload meer, zie basis.py) */
@font-face{font-family:"NHaas vang";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica"),local("Roboto");size-adjust:92.4%;font-weight:400;font-style:normal}
@font-face{font-family:"NHaas vang";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica"),local("Roboto");size-adjust:95.5%;font-weight:500 700;font-style:normal}

:root{
  --papier:#F5F5F5;--wit:#FFFFFF;--offwit:#EFEBE6;--inkt:#1D1D1B;--zwart:#111110;--or:#FB4E29;--or-d:#E8401C;
  --grijs:#6E6E67;--steen:#9C9B95;
  --bg:var(--papier);--fg:var(--inkt);--fg-2:color-mix(in srgb,var(--inkt) 74%,var(--papier));--fg-3:color-mix(in srgb,var(--inkt) 64%,var(--papier));
  /* v14, ronde 19: --fg-3 was 42% (#9A9A99, 2,6:1 op papier); nu 64% (#6B6B69, 4,9:1; op wit 5,4:1), en --fg-2 74% (6,8:1)
     zodat er verschil blijft. In donker rekent dezelfde menging met de omgedraaide kleuren (6,9:1 en hoger).
     --or-tekst: oranje voor kleine tekst (onder 24 px), #C43210, 5,1:1 op papier; groot en als vlak blijft het #FB4E29 */
  --or-tekst:#C43210;
  --lijn:rgba(29,29,27,.13);--lijn-2:rgba(29,29,27,.28);--pen:var(--or);--focus:var(--or);--vlak:var(--wit);
  --rand:clamp(20px,4.2vw,72px);--kop-h:78px;--tl-h:46px;--max:1720px;
  --ease:cubic-bezier(.2,.7,.1,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --r:14px;
  /* vast, ook in donker: tekst op oranje */
  --inkt-vast:#1D1D1B;--papier-vast:#F5F5F5;--tl-rest-0:#D8D8D5;
  /* het lettertype en de spatiëring (v13): die van de Odido-case. Elke negatieve letter-spacing is
     calc(waarde * --krap + --lucht); krap 1 en lucht 0 is de schaal van de case (-.045em op de grootste kop) */
  --font:"NHaas","NHaas vang","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;--krap:1;--lucht:0em;
  color-scheme:light;
}
.thema-donker,[data-thema="donker"].thema-donker{--bg:var(--zwart);--fg:var(--papier);--fg-2:color-mix(in srgb,var(--papier) 72%,var(--zwart));--fg-3:color-mix(in srgb,var(--papier) 58%,var(--zwart));--or-tekst:var(--or);
  --lijn:rgba(245,245,245,.14);--lijn-2:rgba(245,245,245,.3);--vlak:#1C1C1A;color-scheme:dark}
.thema-oranje{--bg:var(--or);--fg:var(--inkt);--fg-2:color-mix(in srgb,var(--inkt) 92%,var(--or));--fg-3:color-mix(in srgb,var(--inkt) 92%,var(--or));--or-tekst:var(--inkt);
  --lijn:rgba(29,29,27,.2);--lijn-2:rgba(29,29,27,.4);--pen:var(--inkt);--focus:var(--inkt);--vlak:#FF6A4A}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kop-h) + var(--tl-h) + 12px)}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--font);font-weight:400;
  font-size:18px;line-height:1.5;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg,iframe{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.16em}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:500}
b,strong{font-weight:500}
::selection{background:var(--or);color:var(--inkt-vast)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main{display:block;outline:none}
section,header,footer{position:relative}
[data-thema],.thema-donker,.thema-oranje{background:var(--bg);color:var(--fg)}
[hidden]{display:none!important}

.naar-inhoud{position:fixed;left:12px;top:-60px;z-index:200;background:var(--inkt);color:var(--papier);padding:10px 16px;border-radius:999px;text-decoration:none;font-size:15px;transition:top .2s}
.naar-inhoud:focus{top:12px}

/* ---------- typografie --------------------------------------------------- */
.label{font-size:12px;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:var(--fg-2)}
/* een oogje (het label boven een kop) krijgt een dun oranje streepje ervoor; op oranje in inkt. v16, 5 november (Frank: "bij
   geef ons een seintje staat geen oranje streepje"): ook het oogje van het contactblok (.cb__oog). v16, 6 november (Frank: "check
   dat in de cases ook het oranje lijntje is"): ook de oogjes van de hoofdstukken in de cases (.d-oog, duo.css) */
:root{--streep:var(--or)}
.thema-oranje{--streep:var(--inkt)}
:is(.hero__oog,.sk>.label,.zin__oog,.ai__oog,.cb__oog,.d-oog,.label:has(+ :is(h1,h2,h3,.titel,.vragen__v))):not(.ai__tag)::before{
  content:"";display:inline-block;width:40px;height:2px;margin-right:12px;vertical-align:.3em;background:var(--streep)}
/* v16, 5 november (Frank: "Die eyebrows (oogjes) mogen sowieso nice opgebouwd worden. oranje streepje groeit vanaf links, dan
   letter voor letter de titel"): elk oogje met een streepje bouwt zich op als het in beeld komt (beweging.js, onderaan). Tot
   dan is het er niet (opacity: een schermlezer leest het gewoon): eerst tot het script er is (hooguit tot het vangnet), dan
   zolang het wacht (.oog-wacht). Dan groeit het streepje van links en komen de letters één voor één (.oog-l; beweging.js
   knipt de tekst daarvoor in letters en zet er na afloop weer gewone tekst neer). Bij minder beweging, zonder JavaScript en
   op papier staat het er gewoon. */
@media screen{
  .js:not(.rustig):not(.vangnet):not(.oog-js) :is(.hero__oog,.sk>.label,.zin__oog,.ai__oog,.cb__oog,.d-oog,.label:has(+ :is(h1,h2,h3,.titel,.vragen__v))):not(.ai__tag),
  .oog-js .oog-wacht{opacity:0}
}
.oog-bouw::before{transform:scaleX(0);transform-origin:0 50%}
.oog-bouw .oog-l{opacity:0}
.oog-bouw.is-in::before{transform:none;transition:transform .6s cubic-bezier(.65,0,.35,1) var(--oog-d,0ms)}
.oog-bouw.is-in .oog-l{opacity:1;transition:opacity .16s linear calc(var(--oog-d,0ms) + .42s + var(--i,0) * var(--oog-stap,26ms))}
.titel{font-size:clamp(46px,7.2vw,152px);line-height:.92;letter-spacing:calc(-.045em * var(--krap) + var(--lucht));font-weight:500;text-wrap:balance;overflow-wrap:break-word}
.titel--xl{font-size:clamp(52px,9vw,190px)}
.titel--reus{font-size:clamp(84px,19vw,380px);line-height:.84;letter-spacing:calc(-.06em * var(--krap) + var(--lucht))}
.titel--l{font-size:clamp(42px,6vw,124px)}
.titel--m{font-size:clamp(34px,4.4vw,86px);line-height:.96;letter-spacing:calc(-.04em * var(--krap) + var(--lucht))}
.punt{color:var(--or)}
.punt--wit{color:var(--papier)}
.thema-oranje .punt:not(.punt--wit){color:var(--inkt)}
.groot{font-size:clamp(21px,1.9vw,32px);line-height:1.22;letter-spacing:calc(-.018em * var(--krap) + var(--lucht))}
.pijl{width:1em;height:1em;flex:none;transition:transform .3s var(--ease)}
.knop:not(.knop--vloei):hover .pijl{transform:translateX(4px)}

/* ---------- de tekstlink met pijl (ronde 15): de mix van 01 en 02 uit tekstlinks.html ----------
   Met de muis erop (of de focus): de tekst rolt uit zijn masker en een kopie komt van onder, de pijl rolt rechts weg en
   een kopie komt van links (02), en de streep trekt zich terug naar rechts en komt van links weer aan (01). Ga je eraf,
   dan rolt alles terug en blijft de streep staan. Alleen op de tekstlinks (.pijl-link), ook als ze in een kaart staan (dan
   rolt hij als je op de kaart komt); de knoppen en de andere pijlen houden hun eigen beweging.
   De opbouw (masker, kopie, tweede pijl) zet site.js (tekstlink); zonder script is het een gewone link met streep.
     <span class="pl__m"><span class="pl__t" data-t="tekst">tekst</span></span>    de kopie is .pl__t::after
     <span class="pl__pm" aria-hidden="true"><svg class="pijl"/><svg class="pijl"/></span>
   De kopie komt uit data-t: geen dubbele tekst in de pagina, en content: … / "" houdt hem uit de schermlezer. Hij loopt
   mee over twee regels als de tekst dat doet. De streep is twee lijnen (::before ligt er, ::after komt erbij), zodat hij
   nooit verspringt als je er halverwege af gaat. */
:root{--pl-ease:cubic-bezier(.16,1,.3,1);--pl-in:cubic-bezier(.6,0,.35,1)}
.pijl-link{position:relative;display:inline-flex;align-items:center;gap:.45em;text-decoration:none;font-size:inherit;padding-bottom:3px;line-height:1.2}
/* zonder script wijst de pijl van Vorige zo naar links; met script draait het masker om (dan rolt hij ook naar links) */
.pijl-link--terug>.pijl{transform:rotate(180deg)}
.pijl-link--terug .pl__pm{transform:scaleX(-1)}
.pijl-link::before,.pijl-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;pointer-events:none}
.pijl-link::before{transform-origin:100% 50%;transition:transform .45s var(--pl-ease)}
.pijl-link::after{transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--pl-in)}
.pijl-link:is(:hover,:focus-visible)::before,:is(a,button):is(:hover,:focus-visible) .pijl-link::before{transform:scaleX(0);transition:transform .35s var(--pl-in)}
.pijl-link:is(:hover,:focus-visible)::after,:is(a,button):is(:hover,:focus-visible) .pijl-link::after{transform:scaleX(1);transition:transform .45s var(--pl-in) .35s}
.pijl-link--terug::before{transform-origin:0 50%}
.pijl-link--terug::after{transform-origin:100% 50%}
/* de tekst: het masker steekt .15em boven en onder de regel uit (de onderstok van de j), met negatieve marges: er
   verschuift niets. De kopie staat één masker lager */
.pl__m{display:block;overflow:hidden;padding-block:.15em;margin-block:-.15em}
.pl__t{position:relative;display:block;transition:transform .55s var(--pl-ease)}
@supports (content:"x" / ""){
  .pl__t::after{content:attr(data-t) / "";position:absolute;left:0;right:0;top:calc(100% + .3em)}
  :is(a,button):is(:hover,:focus-visible) .pl__t{transform:translateY(calc(-100% - .3em))}
}
/* meer regels: elke regel zijn eigen masker en kopie (site.js zet ze, op de regels van de browser), een tik na elkaar.
   Tussen twee regels steken de maskers maar .04em uit (tussen de onderstok en de stok van de volgende regel is ruimte),
   zodat een regel die rolt nooit over de regel eronder of erboven komt; boven en onder het geheel weer .15em */
.pl__t.is-regels{display:flex;flex-direction:column}   /* geen marges die samenvallen: de regels staan precies waar ze stonden */
.pl__t.is-regels::after{content:none}
:is(a,button):is(:hover,:focus-visible) .pl__t.is-regels{transform:none}
.pl__rm{display:block;overflow:hidden;padding-block:.04em;margin-block:-.04em}
.pl__rm:first-child{padding-top:.15em;margin-top:-.15em}
.pl__rm:last-child{padding-bottom:.15em;margin-bottom:-.15em}
.pl__rt{position:relative;display:block;white-space:nowrap;transition:transform .55s var(--pl-ease) calc(var(--i,0) * 45ms)}
@supports (content:"x" / ""){
  .pl__rt::after{content:attr(data-t) / "";position:absolute;left:0;right:0;top:calc(100% + .3em)}
  :is(a,button):is(:hover,:focus-visible) .pl__rt{transform:translateY(calc(-100% - .3em))}
}
/* de pijl: de eerste geeft de maat (wat de pijl op die plek ook is), de tweede wacht links ernaast */
.pl__pm{position:relative;display:block;flex:none;overflow:hidden}
.pl__pm .pijl{display:block;transition:transform .55s var(--pl-ease)}
.pl__pm .pijl+.pijl{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateX(-120%)}
:is(a,button):is(:hover,:focus-visible) .pl__pm .pijl{transform:translateX(120%);transition-delay:.06s}
:is(a,button):is(:hover,:focus-visible) .pl__pm .pijl+.pijl{transform:translateX(0)}
/* minder beweging: niets rolt, de pijl schuift een stukje op (zoals vroeger) */
.rustig :is(a,button):is(:hover,:focus-visible) :is(.pl__t,.pl__rt){transform:none}
.rustig :is(a,button):is(:hover,:focus-visible) .pl__pm .pijl{transform:none}
.rustig :is(a,button):is(:hover,:focus-visible) .pl__pm .pijl+.pijl{transform:translateX(-120%)}
.rustig :is(a,button):is(:hover,:focus-visible) .pl__pm{translate:3px 0}
.rustig :is(a,button):is(:hover,:focus-visible) .pijl-link--terug .pl__pm,.rustig .pijl-link--terug:is(:hover,:focus-visible) .pl__pm{translate:-3px 0}
.aanleveren{position:relative;font-size:14px;line-height:1.4;color:var(--fg-2);border:1px dashed var(--or);border-radius:10px;padding:10px 14px;
  background:repeating-linear-gradient(-45deg,transparent 0 10px,color-mix(in srgb,var(--or) 7%,transparent) 10px 11px)}
.aanleveren b{color:var(--or);font-weight:500;margin-right:.4em}
/* ?schoon verbergt alle aanlever- en bevestigpunten (voor een presentatie), ?nakijken zet ze terug */
.schoon .aanleveren,.schoon .aanleveren-inline{display:none!important}
.thema-oranje .aanleveren{border-color:var(--inkt)}
.thema-oranje .aanleveren b{color:var(--inkt)}
.aanleveren-inline{font-style:normal;font-size:.72em;letter-spacing:.06em;text-transform:uppercase;color:var(--or);border:1px dashed var(--or);border-radius:999px;padding:1px 7px;margin-left:.4em;vertical-align:.15em;white-space:nowrap}
@media (max-width:420px){.aanleveren-inline{white-space:normal;border-radius:8px}}

/* ---------- knoppen ------------------------------------------------------ */
.knoppen{display:flex;flex-wrap:wrap;gap:10px}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 24px;border-radius:999px;text-decoration:none;
  font-size:17px;line-height:1;letter-spacing:calc(-.01em * var(--krap) + var(--lucht));border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);white-space:nowrap}
.knop svg:not(.pijl){width:16px;height:16px}
.knop--inkt{background:var(--inkt);color:var(--papier)}
.knop--inkt:hover{background:var(--or);color:var(--inkt)}
.thema-oranje .knop--inkt:hover{background:var(--papier);color:var(--inkt)}
.knop--or{background:var(--or);color:var(--inkt-vast)}
.knop--or:hover{background:var(--inkt);color:var(--papier)}
.thema-donker .knop--or:hover{background:var(--papier);color:var(--inkt)}
.knop--lijn{border-color:currentColor;color:var(--fg)}
.knop--lijn:hover{background:var(--fg);color:var(--bg)}
.knop--kaal{color:var(--fg-2);padding:0 10px}
.knop--kaal:hover{color:var(--fg)}
.knop--klein{min-height:40px;padding:0 16px;font-size:15px}
.knop--groot{min-height:62px;padding:0 30px;font-size:19px}
.knop__tel{font-size:.8em;opacity:.75;margin-left:.1em}
/* de knop van de site (knoppen.html, 11): een pil met de pijl erin. Bij hover groeit de
   cirkel als een druppel uit de knop en knapt los, met de pijl erin; bij weggaan smelt hij
   terug. De vorm ligt achter de tekst, in twee lagen: een vloeibare laag (SVG-filter #bb-goo,
   alleen zichtbaar tijdens de beweging) en een scherpe laag, zodat de randen scherp blijven.
   De tekst rolt gemaskt van onder: de kopie staat als schaduw 1,3em lager.
   Kleuren via --k-vul/--k-op (rust) en --k-vul-h/--k-op-h (hover). */
.knop.knop--vloei{--kh:52px;--kp:24px;--kg:8px;--kz:1.55em;
  --k-vul:var(--inkt);--k-op:var(--papier);--k-vul-h:var(--or);--k-op-h:var(--inkt-vast);
  position:relative;isolation:isolate;height:var(--kh);min-height:0;padding:0 var(--kp);gap:.55em;border:0;background:none!important;
  color:var(--k-op);transition:color .3s var(--ease)}
.knop--vloei.knop--or{--k-vul:var(--or);--k-op:var(--inkt-vast);--k-vul-h:var(--inkt);--k-op-h:var(--papier)}
.thema-donker .knop--vloei.knop--or{--k-vul-h:var(--papier);--k-op-h:var(--inkt)}
.thema-oranje .knop--vloei.knop--inkt{--k-vul-h:var(--papier)}
.knop--vloei.knop--lijn{--k-vul:var(--k-achter,var(--bg));--k-op:var(--fg);--k-vul-h:var(--fg);--k-op-h:var(--bg)}
.knop--vloei.knop--klein{--kh:40px;--kp:16px;--kg:6px}
.knop--vloei.knop--groot{--kh:62px;--kp:30px;--kg:10px}
.knop.knop--vloei:is(:hover,:focus-visible){--k-nu:var(--k-vul-h);color:var(--k-op-h)}
.kop__cta.knop--vloei{--kh:44px;--kp:20px;--kg:6px;font-size:15px}
.knop__vorm{position:absolute;inset:0;z-index:-1;pointer-events:none}
.knop__goo{position:absolute;inset:0;filter:url(#bb-goo);visibility:hidden;transition:visibility 0s .95s}
.knop--vloei:is(:hover,:focus-visible) .knop__goo{visibility:visible;transition-delay:0s}
.knop__pil,.knop__bol{position:absolute;top:0;height:100%;border-radius:999px;background:var(--k-nu,var(--k-vul))}
.knop__goo :is(.knop__pil,.knop__bol){top:1px;height:calc(100% - 2px)}
.knop__goo .knop__pil{left:1px;width:calc(100% - 2px)}
.knop__goo .knop__bol{left:calc(100% - var(--kh) + 1px);width:calc(var(--kh) - 2px)}
/* de lijnknop is gevuld met de achtergrondkleur (--k-achter, standaard --bg): zo kleurt hij net als de
   dichte knoppen meteen terug, ook terwijl de cirkel nog terugkomt. De pil met de lijn ligt boven de
   cirkel, zodat de cirkel de lijn niet afdekt. */
.knop--lijn>.knop__vorm>.knop__pil{box-shadow:inset 0 0 0 1px var(--k-op);z-index:1}
.knop__pil{left:0;width:100%}
.knop__bol{left:calc(100% - var(--kh));width:var(--kh)}
/* weg: de cirkel zuigt terug de knop in, daarna groeit de knop terug.
   Ronde 13: alles in de knop beweegt met left, top en width, niet met transform. Een transform loopt in de
   browser op een eigen draad, de vloeibare laag (#bb-goo), de kleur en de pil niet: had de pagina het even
   druk, dan liep de cirkel weg bij zijn druppel en flikkerde hij bij het teruggaan. Nu lopen ze op één klok. */
.knop__pil{transition:width .5s var(--ease) .06s,background-color .3s var(--ease)}
.knop__bol{transition:left .55s cubic-bezier(.6,0,.3,1),background-color .3s var(--ease)}
/* erheen: de knop trekt in, de cirkel schiet eruit en knapt los */
.knop--vloei:is(:hover,:focus-visible) .knop__pil{width:calc(100% - var(--kz));transition:width .5s var(--ease),background-color .3s var(--ease)}
.knop--vloei:is(:hover,:focus-visible) .knop__goo .knop__pil{width:calc(100% - var(--kz) - 2px)}
.knop--vloei:is(:hover,:focus-visible) .knop__bol{left:calc(100% + var(--kg) - var(--kz));transition:left .62s cubic-bezier(.25,.8,.25,1.12),background-color .3s var(--ease)}
.knop--vloei:is(:hover,:focus-visible) .knop__goo .knop__bol{left:calc(100% + var(--kg) - var(--kz) + 1px)}
.knop--vloei .knop__tekst{display:block;overflow:hidden;line-height:1.3;margin-block:-.15em}
.knop--vloei .knop__tekst>span{display:block;position:relative;top:0;text-shadow:0 1.3em currentColor;transition:top .55s var(--ease)}
.knop--vloei:is(:hover,:focus-visible) .knop__tekst>span{top:-1.3em}
.knop--vloei .pijl{position:relative;left:0;transition:left .55s cubic-bezier(.6,0,.3,1)}
.knop--vloei:is(:hover,:focus-visible) .pijl{left:calc(var(--kg) + var(--kh) / 2 + var(--kp) + .5em - var(--kz));transition:left .62s cubic-bezier(.25,.8,.25,1.12)}
/* naast elkaar: ruimte voor de cirkel die eruit komt */
.knoppen .knop--vloei:not(:last-child){margin-right:calc(var(--kh) + var(--kg) - var(--kz) - 4px)}
/* minder beweging: alleen de kleur */
.rustig .knop--vloei :is(.knop__bol,.knop__goo){display:none}
.rustig .knop--vloei:is(:hover,:focus-visible) .knop__pil{width:100%}
/* alleen de pil op volle breedte: met width:100% klapte de tekst in tot niets (de knop werd een zwarte pil met een pijl) */
.rustig .knop--vloei:is(:hover,:focus-visible) .pijl{left:0}
.rustig .knop--vloei:is(:hover,:focus-visible) .knop__tekst>span{top:0}
.chip{display:inline-flex;align-items:center;gap:.45em;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--lijn-2);font-size:15px;line-height:1;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.chip span{font-size:.8em;color:var(--fg-3)}
.chip:hover{border-color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip[aria-pressed="true"] span{color:inherit;opacity:.75}
.rond{width:48px;height:48px;border-radius:50%;border:1px solid var(--lijn-2);display:grid;place-items:center;transition:background .2s,color .2s}
.rond:hover{background:var(--fg);color:var(--bg)}
.rond .pijl{width:18px;height:18px}
.rond[data-kennis="-1"] .pijl{transform:rotate(180deg)}
.rond:disabled{opacity:.3;pointer-events:none}

/* ---------- kop: balk, menu en tijdlijn ---------------------------------- */
.kop{position:fixed;left:0;right:0;top:0;z-index:100;transition:transform .45s var(--ease);pointer-events:none;--expo:cubic-bezier(.16,1,.3,1)}
.kop>*{pointer-events:auto}
.kop__balk{position:relative;z-index:2;height:var(--kop-h);display:flex;align-items:center;gap:clamp(14px,2vw,32px);padding:0 var(--rand);background:color-mix(in srgb,var(--papier) 88%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:background .3s,color .3s}
.kop.is-weg{transform:translateY(calc(-1 * var(--kop-h)))}
/* het logo schaalt als één geheel: beeldmerk --m, woordmerk 118/30 daarvan, ruimte ertussen 1/3 */
.merk{--m:30px;display:inline-flex;align-items:center;gap:calc(var(--m) / 3);text-decoration:none;color:var(--inkt);flex:none}
.merk__beeld{width:var(--m);height:auto;fill:var(--or);flex:none}
.merk__woord{width:calc(var(--m) * 118 / 30);height:auto;flex:none}
.kop__cta{flex:none}
.kop__menu{display:none;align-items:center;gap:12px;min-height:44px;padding:0 4px 0 12px;font-size:16px}
.kop__menu i{width:22px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .35s var(--ease)}
html.menu-open .kop__menu i{transform:scaleY(.15)}

/* tekst die gemaskt van onder rolt (menuknoppen): de kopie staat als schaduw 1,3em lager.
   12 november (Frank: "check even op firefox, de letters in het menu worden rechts soms afgesneden (cases bijv)"): elk
   masker in het menu steekt links en rechts .08em uit, met negatieve marges (er verschuift niets), zoals de maskers van
   de koppen. Firefox knipte anders de laatste letter rechts af: het masker is zo breed als de tekst, en die tekst staat krap. */
.nav__rol{display:block;overflow:hidden;line-height:1.3;margin:-.15em -.08em;padding:0 .08em}
.nav__rol>span{display:block;text-shadow:0 1.3em currentColor;transition:transform .5s var(--ease)}
:is(.nav__knop,.kop__menu):is(:hover,:focus-visible) .nav__rol>span{transform:translateY(-1.3em)}

/* de knoppen in de balk */
.kop__nav{flex:1;display:flex;align-items:center;min-width:0;position:relative;align-self:stretch}
.nav__lijst{display:flex;align-items:center;gap:2px}
.nav__knop{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-size:16px;opacity:.62;transition:opacity .25s}
.nav__knop:is(:hover,:focus-visible,[aria-expanded="true"]),.nav__knop.is-hier{opacity:1}
.nav__knop.is-hier::after{content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--or)}

/* een paneel: kolommen met een label en links. Elke tekst komt van onder uit zijn masker, regel na regel
   (een kleine stagger, richting v8). Weg gaat een paneel meteen, zonder animatie: zo bouwt het nieuwe vrij op */
.nav__paneel{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:0 clamp(36px,4.4vw,80px);visibility:hidden;pointer-events:none}
.nav__paneel.is-aan{visibility:visible;pointer-events:auto}
/* de lade gaat dicht: de tekst blijft staan en de lade schuift eroverheen */
.nav__paneel.is-blijf{visibility:visible}
.nav__kol ul{display:grid;gap:1px;align-content:start}
.nav__label{font-size:12px;line-height:1.2;letter-spacing:.07em;text-transform:uppercase;opacity:.5;margin-bottom:14px}
.nav__link{display:inline-flex;text-decoration:none;font-size:15px;line-height:1.35;padding:4px 0;opacity:.72;transition:opacity .25s}
.nav__link--groot{font-size:clamp(24px,2.1vw,32px);line-height:1.08;letter-spacing:calc(-.028em * var(--krap) + var(--lucht));padding:3px 0;opacity:1}
.nav__kol ul:hover .nav__link{opacity:.38}
.nav__kol ul .nav__link:is(:hover,:focus-visible){opacity:1}
.nav__m{display:block;overflow:hidden;padding:0 .08em .1em;margin:0 -.08em -.1em}   /* 12 november: .08em links en rechts (Firefox, zie .nav__rol) */
.nav__m>span{display:block;transform:translateY(112%)}
.nav__paneel:is(.is-aan,.is-blijf) .nav__m>span{transform:none}
.nav__paneel.is-aan .nav__m>span{transition:transform .7s var(--ease) calc(var(--i,0) * 32ms + 10ms)}
.nav__waas{position:fixed;inset:0;z-index:90;background:radial-gradient(80% 50% at 50% 0%,rgba(17,17,16,.32),rgba(17,17,16,.16) 70%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.nav__waas.is-aan{opacity:1;pointer-events:auto}
.nav__lade{position:absolute;left:0;right:0;top:0;height:0;overflow:hidden;z-index:1;pointer-events:none}
.kop.nav-open .nav__lade{pointer-events:auto}

/* de lade: de balk wordt doorzichtig en de lade schuift eronder open, zoals in v8 (navigatie 1) */
.nav__lade{background:color-mix(in srgb,var(--papier) 95%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);
  color:var(--inkt);transition:height .65s var(--expo),box-shadow .5s;box-shadow:0 0 0 rgba(17,17,16,0)}
.kop.nav-open .nav__lade{box-shadow:0 50px 100px -30px rgba(17,17,16,.35)}
.nav__kaart{position:relative}
.nav__lade .nav__paneel{position:absolute;top:calc(var(--kop-h) + 30px);left:calc(var(--rand) + var(--nav-x,0px))}

/* de index: het menu op een telefoon, over het hele scherm */
.nav-index{position:fixed;inset:0;z-index:150;background:var(--inkt);color:var(--papier);overflow:auto;overscroll-behavior:contain;opacity:0;transition:opacity .4s var(--ease)}
.nav-index.is-open{opacity:1}
.nav-index__in{min-height:100%;padding:calc(var(--kop-h) + 30px) var(--rand) 40px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:repeat(4,auto) 1fr auto;gap:0 clamp(30px,5vw,90px)}
.nav-index__groepen{display:contents}
.nav-index__item{display:contents}
.nav-index__groep{grid-column:1;display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,24px);text-align:left;padding:.04em 0;font-size:clamp(46px,6.4vw,112px);line-height:1;letter-spacing:calc(-.045em * var(--krap) + var(--lucht));color:rgba(245,245,245,.34);transition:color .3s}
.nav-index__groep:is(:hover,:focus-visible,[aria-expanded="true"]){color:var(--papier)}
.nav-index__nr{flex:none;width:2em;margin-top:1.1em;font-size:14px;letter-spacing:.06em;color:var(--or-tekst);font-variant-numeric:tabular-nums}
.nav-index__naam>span{transform:translateY(112%);transition:transform .4s var(--ease)}
.nav-index.is-open .nav-index__naam>span{transform:none;transition:transform .9s var(--expo) calc(var(--i,0) * 70ms + 120ms)}
.nav-index .nav__paneel{grid-column:2;grid-row:1/span 5;align-self:start;margin-top:.6em;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,max-content));gap:34px clamp(30px,4vw,64px)}
.nav-index .nav__kol--groot{grid-column:1/-1}
.nav-index .nav__link--groot{font-size:clamp(28px,2.6vw,40px)}
.nav-index__onder{grid-column:1/-1;grid-row:6;align-self:end;display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px clamp(30px,5vw,80px);margin-top:48px;padding-top:24px;border-top:1px solid rgba(245,245,245,.14)}
.nav-index__deel .label{color:rgba(245,245,245,.55);margin-bottom:10px}
.nav-index__hst{display:flex;flex-wrap:wrap;gap:4px 18px;max-width:640px}
.nav-index__hst a{display:inline-flex;gap:8px;align-items:baseline;text-decoration:none;font-size:16px;opacity:.8}
.nav-index__hst a:hover{opacity:1}
.nav-index__hst span{font-size:11px;color:var(--or-tekst);font-variant-numeric:tabular-nums}
.nav-index__contact{display:grid;gap:4px;font-size:18px}
.nav-index__contact a{text-decoration:none}
.nav-index__deel:last-child{margin-left:auto}
.nav-index .knop--vloei.knop--or{--k-vul-h:var(--papier);--k-op-h:var(--inkt)}
html.menu-open .kop{z-index:160;transform:none}
html.menu-open .kop .kop__balk{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--papier)}
html.menu-open .kop .merk{color:var(--papier)}
html.menu-open .kop .merk__beeld{fill:var(--or)}
html.menu-open .kop .kop__cta,html.menu-open .kop .tl,html.menu-open .kop .kop__nav{opacity:0;pointer-events:none}

/* de tijdlijn: elke pagina een banner van dertig seconden, de hoofdstukken als keyframes */
.tl{position:relative;height:var(--tl-h);padding:0 var(--rand);background:linear-gradient(to bottom,color-mix(in srgb,var(--papier) 88%,transparent),color-mix(in srgb,var(--papier) 0%,transparent));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.tl:hover,.tl:focus-within{-webkit-mask-image:none;mask-image:none}
.tl{--tl-rest:var(--tl-rest-0);--tl-af:var(--or);--tl-kop:var(--or)}
.tl__lijn{position:absolute;left:var(--rand);right:var(--rand);top:10px;height:1px;background:var(--tl-rest)}
.tl__vol{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);background:var(--tl-af)}
.tl__vol::after{content:"";position:absolute;right:-1px;top:50%;width:2px;height:12px;margin-top:-6px;background:var(--tl-kop);border-radius:1px}
.tl__stops{position:absolute;left:var(--rand);right:var(--rand);top:0;height:100%}
.tl__stops li{position:absolute;left:calc(var(--x) * 100%);top:0}
.tl__stops a{position:absolute;left:0;top:0;display:block;text-decoration:none;padding:3px 10px 10px;transform:translateX(-50%);min-width:28px;min-height:28px}
.tl__punt{position:absolute;left:50%;top:6px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--tl-rest);transition:transform .3s var(--ease),background .25s,box-shadow .25s}
.tl__stops li.is-voorbij .tl__punt{background:var(--tl-af)}
.tl__stops li.is-hier .tl__punt{background:var(--tl-kop);transform:scale(1.45);box-shadow:0 0 0 3px color-mix(in srgb,var(--tl-kop) 20%,transparent)}
.tl__stops a:is(:hover,:focus-visible) .tl__punt{transform:scale(1.5)}
/* het huidige hoofdstuk staat onder zijn stip; elke andere stip krijgt bij hover een tooltip met nummer en naam */
.tl__label{position:absolute;left:50%;top:21px;display:inline-flex;align-items:baseline;gap:7px;transform:translate(-50%,-3px);font-size:11.5px;line-height:1;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;padding:6px 0;border-radius:999px;color:var(--inkt);opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease),background-color .2s,padding .2s}
.tl__label b{font-weight:500;color:var(--or-tekst);font-variant-numeric:tabular-nums}
.tl__stops li:first-child .tl__label{left:0;transform:translate(0,-3px)}
.tl__stops li:last-child .tl__label{left:auto;right:0;transform:translate(0,-3px)}
.tl__stops li:first-child a{transform:translateX(-10px)}
.tl__stops li:last-child a{transform:translateX(calc(-100% + 10px))}
.tl__stops li:first-child .tl__punt{left:10px}
.tl__stops li:last-child .tl__punt{left:auto;right:5.5px}
.tl__stops li.is-hier .tl__label{opacity:1;transform:translate(-50%,0)}
.tl__stops a:is(:hover,:focus-visible) .tl__label{opacity:1;transform:translate(-50%,0);padding:7px 11px;background:var(--inkt);color:var(--papier);box-shadow:0 8px 20px -8px rgba(17,17,16,.5)}
.tl__stops li:first-child :is(.tl__label,a:is(:hover,:focus-visible) .tl__label),.tl__stops li.is-hier:first-child .tl__label,
.tl__stops li:last-child :is(.tl__label,a:is(:hover,:focus-visible) .tl__label),.tl__stops li.is-hier:last-child .tl__label{transform:translate(0,0)}
.tl__stops:has(a:is(:hover,:focus-visible)) li.is-hier a:not(:hover):not(:focus-visible) .tl__label{opacity:0}
.kop.is-weg .tl{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
.kop.is-weg .tl__lijn{top:0;height:2px;left:0;right:0}
.kop.is-weg .tl__stops{left:0;right:0}
.kop.is-weg .tl__punt{transform:scale(.6);top:-3.5px}
.kop.is-weg .tl__stops li.is-hier .tl__punt{transform:scale(.9);box-shadow:none}
.kop.is-weg .tl__stops a:is(:hover,:focus-visible) .tl__punt{transform:scale(1.2)}
.kop.is-weg .tl__label{top:12px}
.kop.is-weg .tl__stops li.is-hier .tl__label{opacity:0}
.kop.is-weg .tl__stops a:is(:hover,:focus-visible) .tl__label{opacity:1}
.tl--leeg .tl__lijn{top:10px}

/* kop boven donkere en oranje vlakken */
.kop[data-onder="donker"] .kop__balk{background:color-mix(in srgb,var(--zwart) 82%,transparent);color:var(--papier)}
.kop[data-onder="donker"] .merk{color:var(--papier)}
.kop[data-onder="donker"] .tl{background:linear-gradient(to bottom,color-mix(in srgb,var(--zwart) 82%,transparent),transparent)}
.kop[data-onder="donker"] .tl{--tl-rest:rgba(245,245,245,.26)}
.kop[data-onder="donker"] .tl__label{color:var(--papier)}
.kop[data-onder="donker"] .tl__stops a:is(:hover,:focus-visible) .tl__label{background:var(--papier);color:var(--inkt)}
.kop[data-onder="donker"] .kop__cta{--k-vul-h:var(--papier);--k-op-h:var(--inkt)}
.kop[data-onder="oranje"] .kop__balk{background:color-mix(in srgb,var(--or) 90%,transparent)}
.kop[data-onder="oranje"] .merk__beeld{fill:var(--inkt)}
.kop[data-onder="oranje"] .kop__cta{--k-vul:var(--inkt);--k-op:var(--papier);--k-vul-h:var(--papier);--k-op-h:var(--inkt)}
.kop[data-onder="oranje"] .nav__knop.is-hier::after{background:var(--papier)}
.kop[data-onder="oranje"] .tl{background:linear-gradient(to bottom,color-mix(in srgb,var(--or) 90%,transparent),transparent)}
.kop[data-onder="oranje"] .tl{--tl-rest:rgba(29,29,27,.24);--tl-af:var(--inkt);--tl-kop:var(--papier)}
.kop[data-onder="oranje"] .tl__label b{color:var(--papier)}
.kop[data-onder="oranje"] .tl__stops a:is(:hover,:focus-visible) .tl__label b{color:var(--or)}
/* is de lade open, dan is de kop licht, wat eronder ook ligt (deze regels staan na die voor een donker of oranje vlak) */
.kop.nav-open .kop__balk{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--inkt)}
.kop.nav-open .merk{color:var(--inkt)}
.kop.nav-open .merk__beeld{fill:var(--or)}
.kop.nav-open .kop__cta{--k-vul:var(--or);--k-op:var(--inkt-vast);--k-vul-h:var(--inkt);--k-op-h:var(--papier)}
.kop.nav-open .nav__knop.is-hier::after{background:var(--or)}

/* ---------- secties ------------------------------------------------------ */
main>section{padding:clamp(80px,11vw,180px) var(--rand)}
.sk{max-width:1200px;margin-bottom:clamp(36px,5vw,72px)}
.sk__oog{margin-bottom:clamp(14px,1.6vw,24px)}
.sk__intro{margin-top:clamp(18px,2vw,30px);max-width:44ch;font-size:clamp(20px,1.6vw,27px);line-height:1.3;letter-spacing:calc(-.015em * var(--krap) + var(--lucht));color:var(--fg-2)}
.sk--klein{margin-bottom:24px}
.sk--klein .sk__intro{font-size:18px;margin-top:8px}
.lopend p{font-size:clamp(19px,1.35vw,23px);line-height:1.45;max-width:58ch;color:var(--fg-2)}
.lopend p+p,.lopend p+h3,.lopend h3+p,.lopend p+.aanleveren{margin-top:1em}
.lopend h3.label{margin-top:2em}
/* ---------- hero: het logo op ware grootte, de kop vult de rest -------- */
.hero{min-height:100svh;padding:calc(var(--kop-h) + var(--tl-h) + clamp(16px,3vh,48px)) var(--rand) clamp(20px,3vh,40px)!important;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;column-gap:var(--hgap);row-gap:clamp(24px,4vh,48px);align-items:center}
.hero__tekst{grid-column:1;grid-row:1;align-self:center;min-width:0;max-width:calc(var(--vb,100vw) - 2 * var(--rand) - 706px - var(--hgap))}
.hero__oog{margin-bottom:clamp(14px,2.4vh,30px)}
/* WIJ / MAKEN / BANNERS: in kapitalen, en zo groot dat de breedste regel de ruimte naast het
   logo vult. --kb: de breedte van die regel in em, en --vb: de breedte van het venster zonder
   schuifbalk (allebei van home.js). De kolom is die breedte min de randen, het logo en de
   ruimte ertussen; die ruimte is minstens 48 px, want een draaiend blok steekt tot 45 px uit.
   Niet hoger dan het logo ernaast (174 px), behalve op een hoog scherm, en hooguit 200 px. */
.hero{--hgap:clamp(48px,calc(6vw - 28px),96px)}
.hero__h1{--hk:clamp(52px,min(calc((var(--vb,100vw) - 2 * var(--rand) - 706px - var(--hgap)) / var(--kb,4.62)),max(174px,calc((100svh - 550px) / 2.58))),200px);
  font-size:var(--hk);line-height:.86;letter-spacing:calc(-.03em * var(--krap) + var(--lucht));font-weight:500;text-transform:uppercase;margin-left:-.03em}
/* 9 november (Frank: "banners komt niet uit een mask"): het masker liep .27em onder de regel door, bij de derde regel tot
   in de tekst eronder, dus daar schoof BANNERS zichtbaar omhoog. .1em is genoeg voor deze kapitalen (NHaas: de baseline staat
   .07em boven de onderkant, het laagste punt .016em eronder), en de regels houden dezelfde afstand (de marges vallen samen). */
.hero__regel{display:block;overflow:hidden;padding:.1em .08em;margin:-.1em -.08em}
.hero__regel>span{display:inline-block}
.hero__onder{margin-top:clamp(18px,3vh,38px);max-width:36ch;font-size:clamp(19px,calc(var(--hk) * .13),28px);line-height:1.3;letter-spacing:calc(-.015em * var(--krap) + var(--lucht));color:var(--fg-2)}
.hero .knoppen{margin-top:clamp(20px,3.4vh,40px)}
.hero__logo{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:14px}
.logo-mp{--s:1;position:relative;width:calc(706px * var(--s));height:calc(600px * var(--s));flex:none}
/* elk formaat is een blok: voor staat de uiting die speelt. Bij het draaien draait de voorkant weg
   en draait een tweede kant met de opname in beeld, als de twee zijden van een blok. Een derde kant
   staat plat op de plek van de voorkant klaar met het echte bestand, stil op het moment van de
   opname (klok.js ?meld&wacht); als het blok voor 97% is gedraaid, verschijnt hij en speelt hij
   verder (home.js). In rust staat er geen 3D-transform op: ware grootte, gewoon in de pagina. */
.slot{position:absolute;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);transform-origin:0 0;transform:scale(var(--s));perspective:1500px}
.slot--hp{left:0;top:0}
.slot--mr{left:calc(370px * var(--s));top:0}
.slot--lr{left:calc(370px * var(--s));top:calc(320px * var(--s))}
.slot__vlak{position:absolute;inset:0;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;visibility:hidden}
.slot__vlak.is-voor{visibility:visible;z-index:2}
.slot__vlak.is-zicht{visibility:visible}
.slot__vlak.is-klaar{visibility:visible;z-index:3;opacity:0;pointer-events:none}
.slot__vlak.is-klaar.is-aan{opacity:1}
.slot__werk{position:absolute;inset:0;overflow:hidden;background:var(--wit);box-shadow:0 0 0 1px var(--lijn)}
.slot__werk img,.slot__werk iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.slot__werk iframe{pointer-events:none;color-scheme:light}
.slot__vlak.is-voor .slot__werk[data-inter] iframe{pointer-events:auto}
/* het logo begint oranje en draait dan het eerste werk in beeld (home.js haalt het oranje daarna
   weg). Loopt er geen JavaScript, dan verdwijnt het na zes seconden vanzelf. */
.slot__dek{position:absolute;inset:0;background:var(--or);pointer-events:none;animation:dek-weg 0s linear 6s forwards}
@keyframes dek-weg{to{visibility:hidden}}
.no-js .slot__dek,.rustig .slot__dek{display:none}
.slot__label{position:absolute;left:0;top:100%;margin-top:calc(8px / var(--s));font-size:calc(12px / var(--s));line-height:1.25;color:var(--fg-3);white-space:nowrap;transform-origin:0 0}
.slot__label a{text-decoration:none;color:var(--fg-2)}
.slot__label b{font-weight:500;color:var(--fg-2)}
.slot__label a:hover{text-decoration:underline}
/* het merk rolt mee als het blok draait: het oude gaat er boven uit, het nieuwe komt van onder */
.slot__merk{display:inline-block;vertical-align:bottom;overflow:hidden;padding:0 .1em .12em;margin:0 -.1em -.12em}
.slot__merk>span{display:inline-block}
.slot__naam{font-style:normal}
.is-geschaald .slot__naam{display:none}
.slot--mr .slot__label{top:auto;bottom:100%;margin:0 0 calc(8px / var(--s))}
/* de uitleg onder het logo: klein, licht en zo breed als het logo */
.hero__uitleg{width:calc(706px * var(--s,1));padding-top:24px;display:flex;align-items:flex-start;gap:16px;font-size:13px;line-height:1.5;color:var(--uitleg,var(--fg-3))}
.hero__schaal{display:none;gap:8px;align-items:baseline;margin-top:6px}
/* ronde 12: onder het logo wisselt de uitleg met wat een klant zegt, zolang zijn uiting in beeld is (home.js).
   Alles staat in één cel van het grid: de cel is zo hoog als de langste, dus er verspringt niets. */
.hero__wissel{display:grid;flex:1;min-width:0}
.hero__wissel>*{grid-area:1/1;transition:opacity .45s ease,visibility .45s}
.rustig .hero__wissel>*{transition:none}
.hero__schaal output{font-variant-numeric:tabular-nums;color:var(--fg-2)}
/* v14, ronde 19: geen Schaal 1 : 2,02 meer op een telefoon; de uitleg zegt het (ware grootte, of op een groter scherm) */
.hero__klein{display:none}
.is-geschaald .hero__ware{display:none}
.is-geschaald .hero__klein{display:inline}
/* pauzeren (v14, ronde 19: altijd te zien en aan te tikken): v15, 25 oktober (Frank): een rond knopje rechts naast de
   uitleg onder het logo, op elk scherm. Met de muis pauzeert het logo ook al zolang je erop staat. */
.hero__pauze{position:relative;flex:none;margin-top:-6px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--wit);color:var(--inkt);border:1px solid var(--lijn-2);transition:background .2s,color .2s,border-color .2s}
.hero__pauze:hover{background:var(--inkt);border-color:var(--inkt);color:var(--papier)}
.hero__pauze svg{width:12px;height:12px}
.hero__pauze svg+svg,.hero__pauze[data-stil] svg:first-child{display:none}
.hero__pauze[data-stil] svg+svg{display:block}
/* v14, 21 oktober (Frank: die pauzeknop mag sowieso even uit): weg, tenzij het logo-menu hem aanzet (home.js, logo-menu.js) */
.zonder-pauze .hero__pauze{display:none}
/* zonder titels (het logo-menu): de regels onder de blokken weg; het logo blijft staan waar het stond */
.zonder-titels .slot__label{visibility:hidden}
/* terug naar oranje (home.js): een kant van het blok is helemaal oranje, zoals het logo begint */
.slot__oranje{position:absolute;inset:0;background:var(--or);pointer-events:none}
/* schaduw bij het draaien (het logo-menu): over de hele kant, ook over het lijntje eromheen */
.slot__schaduw{position:absolute;inset:-1px;z-index:1;background:#000;opacity:0;pointer-events:none}
.rustig .hero__pauze,.no-js .hero__pauze{display:none}
.hero__voet{grid-column:1/-1;grid-row:2;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-top:1px solid var(--lijn);padding-top:18px}
.cert .label{margin-bottom:10px}
.cert__lijst{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center}
.cert__lijst li{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.cert__merk{width:22px;height:22px;display:grid;place-items:center}
.cert__merk svg{width:22px;height:22px;overflow:visible}
/* de opbouw (cert.js, uit design23/herostandalone_57): elke vorm heeft een lijn in zijn eigen kleur, die
   alleen te zien is terwijl hij zichzelf tekent; daarna staat alleen de vulling er, net als zonder script */
.cert__merk svg *{vector-effect:non-scaling-stroke}
.cert__merk [data-draw]{stroke-opacity:0}
.cert.is-wacht [data-draw]{fill-opacity:0}
.cert.is-wacht [data-fade],.cert.is-wacht :is(.cert__titel,.cert__naam){opacity:0}
.hero__scroll{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.hero__scroll i{width:1px;height:30px;background:var(--fg-2);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:0;width:1px;height:30%;background:var(--or);transform:translateY(-100%);animation:druppel 2.2s var(--ease-io) infinite}
@keyframes druppel{to{transform:translateY(333.4%)}}

/* ---------- wie we zijn: de zin vult zichzelf -------------------------- */
.zin{padding-top:clamp(60px,8vw,120px)!important;padding-bottom:clamp(16px,2vw,32px)!important}
.zin__vast{min-height:calc(100svh - var(--kop-h) - var(--tl-h));display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,40px);max-width:var(--max)}
.zin__tekst{font-size:clamp(34px,4.5vw,96px);line-height:1.04;letter-spacing:calc(-.04em * var(--krap) + var(--lucht));text-wrap:pretty;max-width:22em}
.zin__tekst .w{opacity:var(--o,1);transition:opacity .2s linear}
/* v14, 24 oktober (Frank: "het verschil tussen de niet gescrollde tekst en daarna veel te klein, maak de eerste tekst lichter"):
   .16, zoals de beeldjes. In ronde 19 was het .48 (3:1, voor het contrast), maar dan zie je de zin niet opkomen. De tekst
   voor schermlezers staat los (sr-only), en bij minder beweging staat alles meteen op 1 */
.js:not(.rustig) .zin__tekst .w{--o:.16}
.js:not(.rustig) .zin__tekst .w.is-aan{--o:1}
.zin__term{color:var(--inkt)}
.pil{display:inline-block;vertical-align:-.06em;width:1.9em;height:.8em;border-radius:999px;overflow:hidden;position:relative;background:var(--inkt);margin:0 .02em;
  transition:opacity .4s,filter .4s,transform .5s var(--ease)}
.js:not(.rustig) .pil{opacity:.16;filter:grayscale(1);transform:scale(.86)}
.js:not(.rustig) .pil.is-aan{opacity:1;filter:none;transform:none}
.pil img,.pil video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pil--staand{width:1.25em}
.tel{font-variant-numeric:tabular-nums}
/* v16, 5 november (Frank: "door de 50 jaar bannerervaring animatie schokt het op mobiel"): de 50 die optelt, houdt de breedte
   van 50 (home.js zet min-width als hij begint), het getal rechts erin: de rest van de zin blijft staan */
.zin .tel .w{display:inline-block;text-align:right}
.laag-streep{color:var(--or);animation:cursor 1.1s steps(1) infinite}
@keyframes cursor{50%{opacity:0}}
/* wat eindeloos rondgaat, staat buiten beeld stil (site.js): anders rekent de browser elk frame door */
.lus-uit,.lus-uit *,.lus-uit::before,.lus-uit::after,.lus-uit *::before,.lus-uit *::after{animation-play-state:paused!important}
.zin__meer{font-size:20px}

/* ---------- logostrip: merken die ons belden ------------------------------ */
.logos{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,72px);
  padding:clamp(34px,4.4vw,64px) 0 clamp(34px,4.4vw,64px) var(--rand);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.logos__kop{max-width:12ch;line-height:1.35}
.logos__baan{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos__rij{display:flex;align-items:center;flex:none;gap:clamp(48px,5.5vw,104px);padding-right:clamp(48px,5.5vw,104px)}
.logos__rij li{flex:none;display:grid;place-items:center}
.logos__rij img{width:calc(var(--lw) * var(--lk,1) * 1px);height:calc(var(--lh) * var(--lk,1) * 1px);filter:grayscale(1) contrast(1.1);opacity:.72;transition:filter .3s,opacity .3s}
.logos__rij li:hover img{filter:none;opacity:1}
.no-js .logos__baan,.rustig .logos__baan{-webkit-mask-image:none;mask-image:none}
.no-js .logos__rij,.rustig .logos__rij{flex:1;flex-wrap:wrap;row-gap:30px;padding-right:var(--rand)}
.no-js .logos__rij[aria-hidden],.rustig .logos__rij[aria-hidden]{display:none}

/* ---------- wat we maken: vijf vakken, één blok dat draait (v9) -----------
   De insteek van v8, compacter: links de vakken, rechts één blok van 300 × 600
   met vier kanten. Elk vak heeft een eigen zijde: een echte HTML5-uiting, twee
   uit één template, of een video. In rust staat de voorkant op ware grootte;
   het draaien is één transform (zie blok.js). */
.maken__live{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px clamp(24px,4vw,72px);padding-top:clamp(36px,4vw,64px)}
.maken__live .label{max-width:12ch;line-height:1.35}
.maken__live .cert__lijst{gap:12px 34px}
.maken__live .cert__lijst li{font-size:16px}
.maken__rest{grid-column:2;font-size:15px;color:var(--fg-2)}
.alleen-tik{display:none}
@media (hover:none),(pointer:coarse){.alleen-muis{display:none}.alleen-tik{display:inline}}

/* links een smalle lijst: per rij het nummer, de naam en een knop naar de pagina; rechts zoveel mogelijk ruimte voor het blok */
.mk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:center}
/* de lijst is zo breed als de langste rij, in elk lettertype en elke spatiëring (een naam breekt niet);
   de uitleg telt daarbij niet mee. v10: eerst tot 520 px, en daar paste Helvetica Neue niet in */
.mk__uitleg{contain:inline-size}
/* de tabs en de knoppen zijn twee lijsten naast elkaar (een link hoort niet in een tablist);
   subgrid legt ze rij voor rij gelijk, zodat elke knop op de hoogte van zijn vak staat */
.mk__rijen{--mk-gaan:122px;display:grid;grid-template-columns:minmax(0,1fr) var(--mk-gaan);grid-template-rows:repeat(var(--n,5),auto);border-top:1px solid var(--lijn)}
.mk__lijst,.mk__gaan{grid-row:1/-1;display:grid;grid-template-rows:subgrid;list-style:none;margin:0;padding:0}
.mk__lijst{grid-column:1}
.mk__gaan{grid-column:2}
.mk__lijst li,.mk__gaan li{display:grid}
/* de lijn onder een rij is één lijn, onder het vak en zijn knop door (twee randen naast elkaar
   kunnen een halve pixel verschillend uitkomen) */
.mk__lijst li{position:relative}
.mk__lijst li::after{content:"";position:absolute;left:0;right:calc(-1 * var(--mk-gaan));bottom:0;height:1px;background:var(--lijn);pointer-events:none}
.mk__gaan li{align-items:center;justify-items:end}
.mk__vak{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;padding:clamp(14px,1.5vw,22px) 8px clamp(14px,1.5vw,22px) 0;
  background:none;border:0;text-align:left;color:var(--fg-3);cursor:pointer;font:inherit}
.mk__nr{font-size:13px;font-variant-numeric:tabular-nums;color:var(--fg-3);transition:color .3s}
.mk__naam{font-size:clamp(22px,2.15vw,32px);line-height:1.02;letter-spacing:calc(-.035em * var(--krap) + var(--lucht));font-weight:500;white-space:nowrap;transition:color .35s,transform .6s var(--ease)}
.mk__vak[aria-selected="true"]{color:var(--fg)}
.mk__vak[aria-selected="true"] .mk__naam{transform:translateX(12px)}
.mk__vak[aria-selected="true"] .mk__nr{color:var(--or-tekst)}
@media (hover:hover) and (pointer:fine){.mk__vak:hover{color:var(--fg)}}
/* de knop van het gekozen vak is oranje, de rest een lijnknop */
.mk__knop{transition:color .3s var(--ease)}
.mk__knop.is-aan{--k-vul:var(--or);--k-op:var(--inkt-vast);--k-vul-h:var(--inkt);--k-op-h:var(--papier)}
.mk__knop.is-aan>.knop__vorm>.knop__pil{box-shadow:none}
.mk__knop:not(.is-aan){--k-op:var(--fg-2)}
.mk__knop:not(.is-aan)>.knop__vorm>.knop__pil{box-shadow:inset 0 0 0 1px var(--lijn-2)}
.mk__verder{display:none;margin:0}
@supports not (grid-template-rows:subgrid){
  .mk__lijst,.mk__gaan{grid-template-rows:none}
  .mk__vak{height:76px;padding-block:0}
  .mk__gaan li{height:76px}
}
.mk__uitleg{display:grid;margin-top:clamp(18px,2vw,28px)}
.mk__tekst{grid-area:1/1}
/* v14: alleen bij een wissel (blok.js zet is-gewisseld): bij het laden staat de eerste tekst er gewoon, anders speelt
   de fade pas als de sectie in beeld komt en meet Lighthouse het contrast halverwege. De knop (telefoon) schuift alleen. */
.mk.is-gewisseld .mk__tekst:not([hidden])>*{animation:mk-in .5s var(--ease) both}
.mk.is-gewisseld .mk__tekst:not([hidden])>.mk__verder{animation-name:mk-schuif}
@keyframes mk-schuif{from{transform:translateY(10px)}}
.mk__tekst p{margin:0;font-size:clamp(17px,1.2vw,20px);line-height:1.4;color:var(--fg-2);max-width:44ch}
.mk__tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px;padding:0}
.mk__tags li{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--lijn-2);border-radius:999px;padding:5px 10px;color:var(--fg-2)}
@keyframes mk-in{from{opacity:0;transform:translateY(10px)}}
.no-js .mk__tekst[hidden]{display:block}
/* v16, 5 november (Frank: "als je nu bij wat we maken over richmedia gaat verspringt het hele blok"): de teksten staan
   op elkaar in één vak en houden allemaal hun plek, de verborgen onzichtbaar. Het vak is zo hoog als de hoogste tekst
   (rich media, met het keurmerk), dus de lijst ernaast schuift niet meer op als je een ander specialisme kiest. */
.js .mk__tekst[hidden]{display:block!important;visibility:hidden}   /* !important: [hidden] staat bovenaan op display:none!important */

/* het blok: een podium met perspectief; het blok zelf staat een halve diepte naar achteren,
   zodat de voorkant in rust precies in het vlak van de pagina ligt (ware grootte).
   Staand 300 × 600; voor een liggende zijde (rich media, DOOH) kantelt het blok een
   kwartslag en is de voorkant 600 × 300, en die video schaalt mee met het podium (tot 1,45
   keer, 870 × 435). Het podium is zo breed als de kolom (tot 880) en 600 hoog. */
.mk__blok{display:grid;justify-items:center;gap:22px}
.mk__podium{position:relative;width:min(100%,880px);height:600px;perspective:1700px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* het blok ligt boven zijn schaduw: draait of kantelt hij, dan valt de schaduw erachter en niet eroverheen */
.mk__kubus{position:absolute;z-index:1;left:calc(50% - 150px);top:0;width:300px;height:600px;transform-style:preserve-3d;
  transform:scale(1) translateZ(-150px) rotateZ(0deg) rotateY(0deg);transition:transform .7s cubic-bezier(.65,0,.35,1)}
.mk__kubus.zonder{transition:none}
.mk__zijde{position:absolute;inset:0;overflow:hidden;background:var(--inkt);visibility:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(150px)}
.mk__zijde.is-zicht,.no-js .mk__zijde:first-child,.rustig .mk__zijde.is-voor{visibility:visible}
.mk__in{position:relative;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);overflow:hidden;background:#fff}
.mk__in img,.mk__in iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mk__in iframe{opacity:0;pointer-events:none;color-scheme:light}
.mk__in iframe.is-geladen{opacity:1}
.mk__zijde.is-voor .mk__in[data-inter] iframe{pointer-events:auto}
/* tijdens het draaien staan de posters erop: een uiting in een draaiend vlak laat de browser elk
   frame zijn plek opnieuw doorgeven; met alleen beelden draait het blok op de grafische kaart */
.mk__kubus.is-draait .mk__in iframe{visibility:hidden;pointer-events:none!important}
.mk__link{position:absolute;inset:0;z-index:2}
.mk__in .raam__hint{z-index:3}
.mk__zijde--duo{background:var(--papier);display:grid;grid-template-rows:250px 100px 250px}
.mk__feed{display:grid;align-content:center;gap:5px;padding:0 16px;border-block:1px solid var(--lijn)}
.mk__feed .label{font-size:10px;color:var(--fg-3)}
.mk__feed code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk__feed code b{color:var(--or-tekst);font-weight:500;margin-right:6px}
.mk__zijde--video video{display:block;width:100%;height:100%;object-fit:cover;background:#111}
/* v16, 4 november: de social reel is 9:16 en staat heel in de zijde van 1 : 2, met zwart boven en onder (zoals een telefoon) */
.mk__zijde--916 video{object-fit:contain;background:#000}
/* het Reels-stramien over de social video (b_home.reels, uit v11/bannerbazen website 4): alsof hij op een
   account draait. In de letter van de telefoon, niet die van de site */
.ig{position:absolute;inset:0;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:12px;
  line-height:1.3;letter-spacing:0;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.ig::before{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62))}
.ig svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.ig b{font-weight:inherit}
.ig-top{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.ig-top b{flex:1}
.ig-top svg{width:24px;height:24px}
.ig-side{position:absolute;right:10px;bottom:52px;display:flex;flex-direction:column;align-items:center;gap:16px;font-size:11.5px;font-weight:600}
.ig-side span{display:flex;flex-direction:column;align-items:center;gap:3px}
.ig-side svg{width:26px;height:26px}
.ig-foot{position:absolute;left:12px;right:56px;bottom:26px}
.ig-acc{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;margin-bottom:7px}
.ig-acc i{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#2a2a2e,#56565c);border:1.5px solid #fff;flex:none}
.ig-acc em{font-style:normal;opacity:.8}
.ig-acc u{text-decoration:none;border:1px solid rgba(255,255,255,.85);border-radius:6px;padding:3px 8px;font-size:11.5px}
.ig-foot p{margin:0 0 8px;font-size:12.5px;max-width:30ch}
.ig-foot p span{opacity:.75}
.ig-audio{display:flex;align-items:center;gap:6px;font-size:11.5px;opacity:.95}
.ig-audio svg{width:14px;height:14px}
.ig-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.28)}
.ig-bar i{display:block;height:100%;width:0;background:#fff}
/* een liggende zijde: 600 × 300, een kwartslag gedraaid op de zijde; ligt het blok, dan staat hij recht */
.mk__lig{position:absolute;left:50%;top:50%;width:600px;height:300px;margin:-150px 0 0 -300px;transform:rotate(90deg)}
.mk__schaduw{position:absolute;left:50%;width:312px;margin-left:-156px;bottom:-24px;height:26px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(17,17,16,.26),transparent 70%);transition:transform .7s cubic-bezier(.65,0,.35,1)}
.mk__kubus.is-draait~.mk__schaduw{transform:scaleX(1.3)}
.mk__podium.is-liggend .mk__schaduw{transform:translateY(calc(150px * var(--lig, 1) - 300px)) scaleX(calc(1.95 * var(--lig, 1)))}
.mk__podium.met-slepen{cursor:grab}
.mk__podium.is-slepen{cursor:grabbing}
.mk__onder{display:flex;align-items:center;justify-content:space-between;gap:18px;width:300px}
.mk__metas{display:grid;min-width:0}
.mk__meta{grid-area:1/1;margin:0;font-size:13px;line-height:1.35;color:var(--fg-2)}
.mk__meta:not(.is-aan){visibility:hidden}
.mk.is-gewisseld .mk__meta.is-aan{animation:mk-in .45s var(--ease) both}
.mk__meta b{color:var(--fg);font-weight:500}
.mk__meta span{display:block;color:var(--fg-2)}
.mk__pijlen{display:flex;gap:8px;flex:none}
.mk__pijlen .rond{width:44px;height:44px}
.rond--terug .pijl,.pijl--terug{transform:rotate(180deg)}
@media (max-width:1100px){
  .mk{gap:32px}
  .mk__naam{font-size:clamp(22px,2.6vw,30px)}
}
@media (max-width:860px){
  .mk{grid-template-columns:minmax(0,1fr)}
  .mk__rijen{display:contents}
  .mk__gaan{display:none}
  .mk__verder{display:block}
  .mk__lijst{grid-row:auto;display:flex;gap:8px;overflow-x:auto;border:0;scrollbar-width:none;margin-inline:calc(var(--rand) * -1);padding:2px var(--rand)}
  .mk__lijst::-webkit-scrollbar{display:none}
  .mk__lijst li{border:0;flex:none}
  .mk__lijst li::after{display:none}
  .mk__vak{grid-template-columns:auto auto;gap:8px;padding:10px 15px;border:1px solid var(--lijn-2);border-radius:999px}
  .mk__naam{font-size:15px;letter-spacing:calc(-.01em * var(--krap) + var(--lucht))}
  .mk__vak[aria-selected="true"]{background:var(--inkt);border-color:var(--inkt);color:var(--papier)}
  .mk__vak[aria-selected="true"] .mk__nr{color:var(--or)}   /* v14: op de inktkleurige pil het gewone oranje (5:1) */
  .mk__vak[aria-selected="true"] .mk__naam{transform:none}
  .mk__uitleg{margin-top:16px}
}
@media (max-width:860px){
  /* op een telefoon: de vakken boven het blok, de uitleg eronder. Ligt het blok, dan krimpt
     het podium mee (de vakken waar je op tikt, blijven op hun plek) */
  .mk__links{display:contents}
  .mk__lijst{order:1}
  .mk__blok{order:2}
  .mk__uitleg{order:3}
  .mk__podium{width:min(600px,100%);transition:height .7s cubic-bezier(.65,0,.35,1)}
  .mk__podium.is-liggend{height:calc(300px * var(--lig, 1) + 24px)}
  .mk__kubus{top:calc(50% - 300px)}
  .mk__podium.is-liggend .mk__schaduw{transform:scaleX(calc(1.95 * var(--lig, 1)))}
  /* het kantelen mag even buiten het scherm komen, zonder dat de pagina breder wordt */
  #wat-we-maken{overflow-x:clip}
}

/* ---------- cases: de baan (v9, de insteek van v8) -------------------------
   Eén rij grote beelden, edge to edge. Sleep, gooi, eindeloos rond; elk beeld
   schuift binnen zijn kader mee (--over: hoeveel procent het uitsteekt). baan.js */
.baan{position:relative;overflow:hidden;margin-inline:calc(var(--rand) * -1);touch-action:pan-y;user-select:none;-webkit-user-select:none;
  --dia-w:min(48vw,820px);--dia-h:calc(var(--dia-w) / 1.9);--gat:6px;margin-top:clamp(8px,1.5vw,20px)}
.baan__spoor{position:relative;height:calc(var(--dia-h) + 66px);transform-origin:50% 40%;transition:transform .7s var(--ease)}
.baan.is-druk .baan__spoor{transform:scale(.985)}
.baan__dia{position:absolute;left:0;top:0;width:var(--dia-w);display:block;color:inherit;text-decoration:none;will-change:transform;-webkit-user-drag:none}
.baan__beeld{display:block;position:relative;height:var(--dia-h);overflow:hidden;background:rgba(29,29,27,.12)}
.baan__schuif{position:absolute;top:0;bottom:0;left:calc(var(--over) * -1%);width:calc(100% + var(--over) * 2%);will-change:transform}
.baan__schuif img,.baan__schuif video{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media (hover:hover) and (pointer:fine){.baan__dia:hover .baan__schuif :is(img,video){transform:scale(1.05)}}
/* ronde 10: de abri in de DOOH-reel staat helemaal in beeld: geen zoom bij hover (en geen meeschuiven, --over:0) */
.baan__dia[data-heel] .baan__schuif :is(img,video){transform:none}
.baan__onder{display:grid;gap:3px;padding-top:12px;padding-right:20px}
.baan__soort{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2)}
.baan__titel{font-size:clamp(16px,1.25vw,20px);line-height:1.25;letter-spacing:calc(-.012em * var(--krap) + var(--lucht));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.baan__dia:focus-visible{outline:none}
.baan__dia:focus-visible .baan__beeld{outline:3px solid var(--focus);outline-offset:-3px}
.baan__balk{display:flex;align-items:center;gap:18px;margin-top:22px}
.baan__hint{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--fg-2)}
.baan__hint i{display:block;width:28px;height:1px;background:currentColor}
.baan__teller{margin:0 0 0 auto;font-size:14px;font-variant-numeric:tabular-nums;color:var(--fg-2)}
.baan__teller span{color:var(--fg)}
.baan__pijlen{display:flex;gap:8px}
.baan-cursor{position:fixed;left:0;top:0;z-index:95;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--inkt);color:var(--papier);
  display:grid;place-items:center;font-size:13px;letter-spacing:.02em;pointer-events:none;opacity:0;scale:.3;transform:translate3d(-300px,-300px,0);
  transition:opacity .25s,scale .5s var(--ease)}
.baan-cursor.is-aan{opacity:1;scale:1}
.baan-cursor.is-druk{scale:.8}
.baan.met-cursor,.baan.met-cursor *{cursor:none}
/* ---------- de cursor van de site: Pil (muispil.js, v14, 24 oktober) ----------
   Een oranje punt die uitrekt tot een pil met één woord; het begin van de pil blijft bij de muis, met een stip waar je
   precies wijst. Alleen met een muis en pas na de eerste beweging (html.muispil-aan). Breedte van de pil: --pw. */
html.muispil-aan,html.muispil-aan *{cursor:none!important}
html.muispil-aan :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,[contenteditable]:not([contenteditable=false])){cursor:text!important}
html.muispil-aan select{cursor:default!important}
.muispil{--d:12px;position:fixed;left:0;top:0;z-index:2147483000;width:var(--d);height:var(--d);margin:calc(var(--d) * -.5) 0 0 calc(var(--d) * -.5);
  border-radius:999px;overflow:hidden;background:var(--or);pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0);will-change:transform;
  transition:width .34s var(--ease),height .34s var(--ease),margin .34s var(--ease),opacity .2s,background-color .2s}
.muispil.is-aan{opacity:1}
.muispil i{position:absolute;left:12px;top:12px;width:6px;height:6px;border-radius:50%;background:#1D1D1B;opacity:0;transition:opacity .15s}
.muispil b{position:absolute;left:26px;top:50%;translate:0 -50%;font:500 13px/1 var(--font);letter-spacing:.01em;white-space:nowrap;color:#1D1D1B;
  opacity:0;transition:opacity .15s}
.muispil.is-woord{width:var(--pw,96px);height:30px;margin:-15px 0 0 -15px;transform-origin:15px 50%}
.muispil.is-woord i,.muispil.is-woord b{opacity:1;transition-delay:.1s}
.muispil[data-vlak="oranje"]{background:#1D1D1B}
.muispil[data-vlak="oranje"] i{background:#F5F5F5}
.muispil[data-vlak="oranje"] b{color:#F5F5F5}
.muispil[data-soort="tekst"]{--d:7px}
.muispil[data-soort="link"]{--d:30px}
.muispil.is-aan[data-soort="link"][data-vlak="licht"]:not(.is-woord){mix-blend-mode:multiply}   /* de tekst blijft leesbaar */
.muispil.is-aan[data-soort="link"][data-vlak="donker"]:not(.is-woord){opacity:.35}
.muispil.is-aan[data-soort="link"][data-vlak="oranje"]:not(.is-woord){opacity:.25}
.muispil:is([data-soort="knop"],[data-soort="veld"]){--d:0px}
/* het baken (25 oktober, Frank: "een subtiele soort beacon, pulserend..heel lichtjes"): in een knop is de punt weg (de knop
   doet zijn eigen hover). Waar de muis staat, staat dan een kleine stip met een zachte puls. Oranje; inkt als de knop onder
   de muis oranje is (data-op, muispil.js). De puls loopt alleen als het baken er staat */
.muispil-baken{position:fixed;left:0;top:0;z-index:2147483000;width:0;height:0;pointer-events:none;color:#FB4E29;opacity:0;visibility:hidden;
  transform:translate3d(-100px,-100px,0);transition:opacity .2s,visibility 0s .2s}
.muispil-baken.is-aan{opacity:1;visibility:visible;transition:opacity .25s .08s,visibility 0s}
.muispil-baken[data-op="oranje"]{color:#1D1D1B}
.muispil-baken::before,.muispil-baken::after{content:"";position:absolute;border-radius:50%;animation:muispil-puls 1.8s cubic-bezier(.25,.6,.3,1) infinite paused}
.muispil-baken::before{left:-3px;top:-3px;width:6px;height:6px;background:currentColor;animation-name:muispil-stip}
.muispil-baken::after{left:-12px;top:-12px;width:24px;height:24px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:0}
.muispil-baken.is-aan::before,.muispil-baken.is-aan::after{animation-play-state:running}
@keyframes muispil-stip{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}
@keyframes muispil-puls{0%{opacity:.4;transform:scale(.3)}80%,100%{opacity:0;transform:scale(1.15)}}
.rustig .muispil-baken::before,.rustig .muispil-baken::after{animation:none}
.rustig .muispil-baken::after{opacity:.2}
@media (prefers-reduced-motion:reduce){.muispil-baken::before,.muispil-baken::after{animation:none}.muispil-baken::after{opacity:.2}}
.cases--baan .cases__prijzen{margin-top:clamp(56px,6vw,96px)}
.cases__alles{margin-top:clamp(28px,3vw,44px)}
@media (max-width:760px){
  .baan{--dia-w:84vw}
  .baan__hint{display:none}
  .baan__titel{white-space:normal}
}
.rustig .baan__spoor{transition:none}


/* ---------- werk: de wand op ware grootte -------------------------------- */
.wand{--goot:clamp(20px,1.6vw,40px);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(40px,5vw,72px) var(--goot)}
.wand__rij{display:contents}
.wand__stapel{display:flex;flex-direction:column;gap:var(--goot);align-items:flex-start}
.raam{width:calc(var(--w) * var(--s,1) * 1px);flex:none}
.raam__vak{position:relative;width:calc(var(--w) * var(--s,1) * 1px);height:calc(var(--h) * var(--s,1) * 1px)}
.raam__in{position:absolute;left:0;top:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);transform:scale(var(--s,1));transform-origin:0 0;overflow:hidden;background:var(--wit);box-shadow:0 0 0 1px var(--lijn)}
.raam__in img,.raam__in iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.raam__in iframe{color-scheme:light;opacity:0}
.raam__in iframe.is-geladen{opacity:1}
.raam__link{position:absolute;inset:0;z-index:2}
.raam__hint{position:absolute;right:8px;top:8px;z-index:2;background:var(--inkt);color:var(--papier);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 10px;pointer-events:none}
.raam__label{margin-top:12px;font-size:14px;line-height:1.3;color:var(--fg-2);display:flex;flex-wrap:wrap;gap:0 .5em;max-width:calc(var(--w) * var(--s,1) * 1px + 40px)}
.raam__label b{color:var(--fg);font-weight:500}
.raam__label a{text-decoration:none}
.raam__label a:hover{text-decoration:underline}
.raam__maat{color:var(--fg-3);font-variant-numeric:tabular-nums}
.raam:hover .raam__in{box-shadow:0 0 0 1px var(--or)}
.raam__in:focus-within,.slot__werk:focus-within,[data-podium] [data-live]:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.werkblok__alles{margin-top:clamp(48px,6vw,90px);text-align:center}
/* echt werk: een vast grid, zoals de trio in de chat. Drie kolommen van 336, alles links op de kolom */
.wg{--kol:336px;--goot:28px;display:grid;gap:clamp(40px,3.6vw,56px) 0;justify-content:start}
.wg__rij{display:grid;grid-template-columns:repeat(3,var(--kol));gap:0 var(--goot);align-items:start}
.wg__kol--stapel{display:grid;gap:var(--goot);align-content:start}
.wg__band{width:calc(3 * var(--kol) + 2 * var(--goot))}
.werkblok .werkblok__alles{text-align:left}
/* past het grid niet (onder 1170 px), dan dezelfde veegstrook als de wand */
@media (max-width:1170px){
  .wg{display:flex;align-items:flex-end;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--rand));padding:4px var(--rand) 12px;scroll-padding:0 var(--rand);scrollbar-width:none}
  .wg::-webkit-scrollbar{display:none}
  .wg__rij,.wg__kol,.wg__band{display:contents}
  .wg .raam{scroll-snap-align:start}
  .werkblok .wand__veeg,.ex-werk .wand__veeg{display:flex}
}
/* echt werk op de home: één set, geordend zoals een setpreview. Eerst de rectangles, dan de
   billboard, dan de leaderboard, dan de staande formaten met ernaast het verhaal van de set.
   Zo breed als de drie rectangles naast elkaar: 300 + 336 + 320 en twee goten = 1004 */
.set{--goot:24px;display:grid;grid-template-columns:484px 496px;gap:34px var(--goot);justify-content:start}
.set__formaten{display:contents}
.set__rij{grid-column:1/-1;display:flex;align-items:flex-start;gap:var(--goot)}
.set__rij--staand{grid-column:1}
.set__maat{margin:0 0 10px;font-size:13px;line-height:1.2;color:var(--fg-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.set__maat b{color:var(--fg);font-weight:500;margin-right:.3em}
.set .raam:hover .set__maat b{color:var(--or-tekst)}
.set .raam.is-verkleind .set__maat::after{content:"· verkleind";margin-left:.3em}
:lang(en) .set .raam.is-verkleind .set__maat::after{content:"· scaled down"}
.set__veeg.wand__veeg{display:none}
.set__info{grid-column:2;grid-row:4;align-self:end;padding-left:clamp(0px,2vw,24px)}
.set__titel{margin-top:14px;font-size:clamp(26px,2.3vw,36px);line-height:1.04;letter-spacing:calc(-.035em * var(--krap) + var(--lucht));font-weight:500;text-wrap:balance}
.set__tekst{margin-top:14px;max-width:36ch;font-size:17px;line-height:1.42;color:var(--fg-2)}
.set .set__feiten{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}
.set .set__feiten .set__opdracht{grid-column:1/-1}   /* 12 november: In opdracht van (House of Communication) over de hele breedte */
.set__alles{margin-top:30px}
/* v14: een set zonder rij met alleen staande formaten, als setpreview (Frank, 20 oktober). Twee kolommen: --k1 zo breed
   als de laatste rij, --k2 voor het verhaal (b_home.werkset rekent ze uit). Laat de set naast de laatste rij een vak
   open (de BMW X1), dan staat het verhaal daarin, bovenaan gelijk met de rij; anders in een eigen kolom ernaast, onderaan
   gelijk met de rij (.set--naast: de gouden sprietjes, met de 300 × 250 en de 320 × 240 gestapeld naast de 300 × 600) */
.set__stapel{display:flex;flex-direction:column;justify-content:space-between;gap:var(--goot);align-self:stretch}
@media (min-width:1100px){
  .set--plat{grid-template-columns:var(--k1) var(--k2)}
  .set--plat .set__rij:last-of-type{grid-column:1}
  .set--plat .set__info{grid-column:2;grid-row:var(--rij);align-self:start;padding-left:0}
  .set--naast{column-gap:clamp(36px,3.6vw,64px)}
  .set--naast .set__info{align-self:end}
}
/* past de set niet op ware grootte, dan is elke rij een eigen veegstrook, in dezelfde volgorde:
   zo is elke strook maar zo hoog als zijn formaten. Een billboard of leaderboard die breder is
   dan het scherm, schaalt mee (werk.js); het verhaal staat eronder */
@media (max-width:1099px){
  .set{display:block}
  .set__formaten{display:grid;gap:26px}
  .set__rij{display:flex;align-items:flex-start;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--rand));padding:2px var(--rand) 4px;scroll-padding:0 var(--rand);scrollbar-width:none}
  .set__rij::-webkit-scrollbar{display:none}
  .set .raam{scroll-snap-align:start}
  .set__veeg.wand__veeg{display:flex;margin-top:-14px}
  .set__stapel{display:contents}
  .set__info{margin-top:clamp(34px,6vw,52px);padding-left:0;max-width:560px}
}
@media (max-width:520px){
  .set .set__feiten{gap:0 14px}
  .set .set__feiten dd{font-size:15px}
}

/* ---------- wanneer je ons belt ------------------------------------------ */
.routes{padding-bottom:clamp(60px,8vw,120px)!important}
/* Wanneer bel je ons: links staan kop, routes en teller stil; rechts scrol je door vier gesprekken.
   De knop van de route die je leest staat aan, met een oranje balk die meeloopt. */
.rtp{--plak:144px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,100px);align-items:start}
.rtp__links{position:sticky;top:var(--plak);transition:top .45s var(--ease)}
.rtp__links .sk{margin-bottom:28px}
.rtp__rechts{min-width:0}
/* de routes als stapel onder de grote titel: de route die je leest staat groot, met voor wie
   hij is; de routes die je gehad hebt, staan klein en grijs erboven; wat nog komt, staat er nog niet */
.rt__stapel{list-style:none;margin:clamp(26px,3vw,46px) 0 0;padding:0;display:grid;max-width:560px}
.rt__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.rt__sub.is-hier,.rt__sub.is-gehad{grid-template-rows:1fr}
.rt__sub>a{min-height:0;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline;
  color:var(--fg-3);text-decoration:none}
.rt__sub>a>*{transform:translateY(110%);transition:transform .6s var(--ease)}
.rt__sub.is-hier>a>*,.rt__sub.is-gehad>a>*{transform:none}
.rt__subnr{font-size:13px;font-variant-numeric:tabular-nums;color:var(--fg-3)}
.rt__subnr b{font-weight:500}
.rt__subnaam{display:block;padding:.06em 0 .1em;font-size:clamp(17px,1.3vw,22px);line-height:1.04;letter-spacing:calc(-.03em * var(--krap) + var(--lucht));font-weight:500;text-wrap:balance;
  transition:font-size .55s var(--ease),color .4s,transform .6s var(--ease)}
.rt__subvoor{grid-column:2;color:var(--or-tekst);margin-top:12px}
.rt__sub:not(.is-hier) .rt__subvoor{display:none}
.rt__sub.is-gehad{margin-bottom:8px}
.rt__sub.is-gehad .rt__subnaam .punt{color:inherit}
.rt__sub.is-gehad>a:hover{color:var(--fg)}
.rt__sub.is-hier .rt__subnaam{font-size:clamp(34px,3.3vw,60px);color:var(--fg)}
.rt__sub.is-hier .rt__subnr{color:var(--fg)}
.rt__sub.is-hier .rt__subnr b{color:var(--or-tekst)}
.no-js .rt__sub{grid-template-rows:1fr}
.no-js .rt__sub>a>*{transform:none}
.rustig .rt__sub,.rustig .rt__sub>a>*,.rustig .rt__subnaam{transition:none}
/* v15, 26 oktober (Frank: "misschien ------- OF --------- zoiets?"): tussen twee gesprekken geen dun lijntje meer, maar een
   lijn met OF erin, zodat je ziet dat er een ander gesprek begint (b_routes.routes) */
.al__of{display:flex;align-items:center;gap:22px;margin:clamp(70px,8vw,130px) 0 clamp(56px,6vw,100px);
  font-size:13px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--fg-2)}
.al__of::before,.al__of::after{content:"";flex:1;height:1px;background:var(--lijn-2)}
.rt-kopregel{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:16px}
@media (min-width:1101px){.rtp__rechts .rt-kopregel,.rtp__rechts .rt-naam{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.rt-nr{font-size:14px;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg-3)}
.rt-nr b{color:var(--fg);font-weight:500}
.rt-voor{color:var(--or-tekst)}
.rt-naam{font-size:clamp(40px,4.3vw,82px);line-height:.98;letter-spacing:calc(-.045em * var(--krap) + var(--lucht));max-width:12ch;text-wrap:balance;padding-bottom:.08em}
.rt-verder{margin-top:clamp(28px,3vw,40px)}
.rt__slot{margin-top:clamp(60px,7vw,110px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--lijn);padding-top:28px}
.rt__slot p{font-size:clamp(20px,1.6vw,28px);line-height:1.25;letter-spacing:calc(-.015em * var(--krap) + var(--lucht));max-width:30ch}

/* het gesprek */
.al__gesprek{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:clamp(28px,3vw,44px)}
.al__label{margin:18px 0 2px 46px;font-size:12px;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.al__label:first-child{margin-top:0}
.al__label--jij{align-self:flex-end;margin-left:0}
.al__msg{position:relative;max-width:min(82%,520px)}
.al__msg--jij{align-self:flex-end}
.al__msg--wij{margin-left:46px}
.al__msg--media{max-width:calc(100% - 46px)}
.al__bel{padding:13px 18px 14px;border-radius:22px;font-size:clamp(18px,1.3vw,21px);line-height:1.34;letter-spacing:calc(-.008em * var(--krap) + var(--lucht))}
.al__msg--jij .al__bel{background:var(--inkt);color:var(--papier);border-bottom-right-radius:6px}
.al__msg--wij .al__bel{background:var(--wit);box-shadow:0 0 0 1px var(--lijn);border-bottom-left-radius:6px}
.al__msg--media .al__bel{padding:8px 8px 14px}
.al__msg--media .al__bel>p,.al__bron{padding:0 10px}
.al__msg--media .al__bel>p{margin-top:12px}
.al__bron{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:var(--fg-3)}
.al__bijlage{position:relative;border-radius:15px;overflow:hidden}
.al__msg--keyvisual .al__bijlage,.al__msg--campagne .al__bijlage{padding:12px;background:var(--papier)}
/* past de set niet naast elkaar, dan veeg je erdoorheen: alles blijft op ware grootte */
.al__bijlage .rtb-set,.al__bijlage .rtb-kanaal{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.rtb-set::-webkit-scrollbar,.rtb-kanaal::-webkit-scrollbar{display:none}
.al__bijlage .rtb-set>*,.al__bijlage .rtb-kanaal>*{scroll-snap-align:start}
.al__bijlage::after{content:"";position:absolute;right:0;top:0;bottom:0;width:56px;background:linear-gradient(to right,color-mix(in srgb,var(--papier) 0%,transparent),var(--papier));
  opacity:0;transition:opacity .3s;pointer-events:none}
.al__bijlage.is-meer::after{opacity:1}
.al__msg--vastloopt .rtb-bord{max-width:none;border-radius:15px}
.al__msg--bureau .rtb-pv{max-width:none;border-radius:15px;box-shadow:0 0 0 1px var(--lijn)}
.al__av{position:absolute;left:-46px;bottom:0;width:34px;height:34px;border-radius:50%;background:var(--inkt);display:grid;place-items:center}
.al__av svg{width:16px;height:auto;fill:var(--or)}
.al__bijlagen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.al__bestand{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 10px;border-radius:12px;background:rgba(245,245,245,.13);font-size:14px;line-height:1.1}
.al__bestand svg{width:12px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
/* typen: een klein wolkje met drie puntjes, dan het bericht */
.al__typt{position:absolute;left:0;bottom:0;display:flex;gap:5px;padding:15px 16px;border-radius:22px;border-bottom-left-radius:6px;background:var(--wit);box-shadow:0 0 0 1px var(--lijn);
  opacity:0;transform:scale(.7);transform-origin:0 100%;transition:opacity .2s,transform .3s var(--ease);pointer-events:none}
.al__typt i{width:7px;height:7px;border-radius:50%;background:var(--fg-3);opacity:.45}
.al__msg.is-typt:not(.is-er) .al__typt i{animation:al-typt 1s ease-in-out infinite}
.al__typt i:nth-child(2){animation-delay:.15s}
.al__typt i:nth-child(3){animation-delay:.3s}
@keyframes al-typt{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.js:not(.rustig) .al__bel{opacity:0;transform:translateY(14px) scale(.96);transform-origin:0 100%;transition:opacity .22s,transform .4s var(--ease)}
.js:not(.rustig) .al__msg--jij .al__bel{transform-origin:100% 100%}
/* een bijlage met uitingen schaalt nooit, ook niet bij binnenkomen: alleen schuiven */
.js:not(.rustig) .al__msg--media .al__bel{transform:translateY(18px);transition:transform .4s var(--ease)}
.js:not(.rustig) .al__msg.is-er .al__bel{opacity:1;transform:none}
.js:not(.rustig) .al__msg.is-typt:not(.is-er) .al__typt{opacity:1;transform:none}
.al__msg.is-er .al__typt{transition:none;opacity:0}
.js:not(.rustig) .al__av{opacity:0;transition:opacity .3s}
.js:not(.rustig) .al__msg.is-typt .al__av,.js:not(.rustig) .al__msg.is-er .al__av{opacity:1}
.js:not(.rustig) .al__label{opacity:0;transition:opacity .5s}
.js:not(.rustig) .al__label.is-er{opacity:1}

/* het bewijs in een bericht: set, kanalen, storingsbord, previewlink */
.rtb-set{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
.rtb-set__stapel{display:grid;gap:20px;align-content:start}
.rtb-kanaal{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px}
.rtb-abri{position:relative;width:225px;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#111110;flex:none;
  box-shadow:0 24px 50px -24px rgba(17,17,16,.45),0 0 0 1px rgba(17,17,16,.08)}
.rtb-abri video{width:100%;height:100%;object-fit:cover}
.rtb-abri figcaption{position:absolute;left:10px;bottom:10px;font-size:11px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(17,17,16,.6);padding:4px 8px;border-radius:6px}
/* iets dat omwisselt: de eerste tekst schuift weg, de tweede komt eronder vandaan */
.rtb-wissel{display:inline-grid;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.rtb-wissel>span{grid-area:1/1;min-width:0;transition:transform .55s var(--ease),opacity .4s}
.rtb-wissel>span+span{transform:translateY(110%);opacity:0}
.is-klaar .rtb-wissel>span:first-child,.is-gewisseld .rtb-wissel>span:first-child{transform:translateY(-110%);opacity:0}
.is-klaar .rtb-wissel>span+span,.is-gewisseld .rtb-wissel>span+span{transform:none;opacity:1}
/* het storingsbord: elk punt klapt om, zoals een vertrekbord */
.rtb-bord{--b-lijn:rgba(245,245,245,.14);max-width:560px;background:var(--inkt);color:var(--papier);border-radius:18px;padding:clamp(20px,2.2vw,30px);font-variant-numeric:tabular-nums}
.rtb-bord__kop{display:flex;align-items:center;gap:12px;font-size:clamp(24px,2vw,32px);line-height:1.15;letter-spacing:calc(-.025em * var(--krap) + var(--lucht))}
.rtb-bord__kop i{flex:none;width:11px;height:11px;border-radius:50%;background:var(--or);animation:rtb-knipper 1.1s steps(2,jump-none) infinite;transition:box-shadow .4s}
@keyframes rtb-knipper{50%{opacity:.15}}
.rtb-bord.is-klaar .rtb-bord__kop i{animation:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--or) 28%,transparent)}
.rtb-bord__regel{display:grid;margin-top:6px;font-size:16px;line-height:1.3;color:rgba(245,245,245,.62)}
.rtb-bord ul{margin-top:20px;border-top:1px solid var(--b-lijn)}
.rtb-bord li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--b-lijn);font-size:16px;line-height:1.3}
.rtb-bord__wat{color:rgba(245,245,245,.82)}
.rtb-flap{display:grid;perspective:320px;text-align:right;white-space:nowrap}
.rtb-flap>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;backface-visibility:hidden;transform-origin:50% 50%;
  transition:transform .5s var(--ease),opacity .3s}
.rtb-flap__fout{color:var(--or-tekst)}
.rtb-flap__goed{color:var(--papier);transform:rotateX(-90deg);opacity:0}
.rtb-bord li.is-om .rtb-flap__fout{transform:rotateX(90deg);opacity:0}
.rtb-bord li.is-om .rtb-flap__goed{transform:none;opacity:1}
.rtb-ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* de previewlink: eerst met onze naam, dan met de jouwe. In een previewscherm mag de set kleiner. */
.rtb-pv{max-width:600px;background:var(--wit);border-radius:16px;overflow:hidden;color:var(--inkt);box-shadow:0 30px 60px -30px rgba(17,17,16,.35),0 0 0 1px rgba(17,17,16,.08)}
.rtb-pv__balk{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#efefec;font-size:13px;line-height:1.3;color:var(--grijs)}
.rtb-pv__balk i{flex:none;width:10px;height:10px;border-radius:50%;background:#d0d0cc}
.rtb-pv__balk>.rtb-wissel{flex:1;min-width:0;margin-left:10px;padding:4px 10px;background:var(--wit);border-radius:7px}
.rtb-pv__balk>.rtb-wissel>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtb-pv__kop{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 14px;border-bottom:1px solid #ececea;font-size:13px;line-height:1.3}
.rtb-pv__logo{padding:5px 10px;border:1px solid var(--inkt);border-radius:7px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;transition:border-color .4s}
.is-gewisseld .rtb-pv__logo{border-color:#9c9b95;border-style:dashed}
.rtb-pv__meta{color:var(--grijs)}
.rtb-pv__ok{margin-left:auto;padding:6px 14px;border-radius:999px;background:var(--inkt);color:var(--papier)}
.rtb-pv__set{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:16px;background:#f6f6f4}
.rtb-pv__set figure{width:calc(var(--w) * .28px);display:grid;gap:4px}
.rtb-pv__set img{width:100%;height:auto;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.rtb-pv__set figcaption{font-size:10px;line-height:1.2;color:var(--grijs)}
@media (max-width:1100px){
  /* één kolom: de titel van elke route staat boven zijn gesprek */
  .rtp{grid-template-columns:minmax(0,1fr);gap:clamp(36px,6vw,56px)}
  .rtp__links{position:static}
  .rt__stapel{display:none}
  .rt-naam{font-size:clamp(34px,7vw,56px)}
  .rtp__rechts>article{scroll-margin-top:90px}
}
@media (max-width:700px){
  .al__msg{max-width:88%}
  .al__msg--wij{margin-left:40px}
  .al__label{margin-left:40px}
  .al__av{left:-40px;width:30px;height:30px}
  /* een bijlage krijgt de hele breedte, zodat een 336 breed formaat op ware grootte past */
  .al__msg--media{max-width:100%;margin-left:0}
  .al__msg--media .al__av{display:none}
  .al__msg--media .al__bel{padding:0 0 12px;overflow:hidden}
  .al__msg--media .al__bel>p,.al__msg--media .al__bron{padding:0 14px}
  .al__msg--media .al__bijlage{border-radius:0}
  .al__msg--keyvisual .al__bijlage,.al__msg--campagne .al__bijlage{padding:7px}
  .rtb-abri{width:180px}
  .rtb-bord li{flex-wrap:wrap;gap:4px 16px}
}

/* ---------- cases (oranje) ----------------------------------------------- */
.cases__lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.cases__prijzen{margin-top:clamp(56px,7vw,110px);display:grid;gap:20px}
.cases__prijzen .erkenning{margin-bottom:0}
.thema-oranje .erkenning__tekst{color:var(--fg-2)}
.ck{display:grid;grid-template-rows:auto 1fr;background:var(--papier);border-radius:22px;overflow:hidden;color:var(--inkt);--streep:var(--or);--k-achter:var(--papier)}
.ck--groot{grid-column:1/-1;grid-template-columns:1.25fr 1fr;grid-template-rows:auto}
.ck__beeld{display:block;overflow:hidden;background:var(--offwit)}
.ck__beeld img{width:100%;height:100%;object-fit:cover;aspect-ratio:1280/576;transition:transform 1.2s var(--ease)}
.ck__beeld--vlak{background:var(--vlak)}
.ck__beeld--vlak img{object-fit:contain}
.cases--pagina{padding-top:clamp(40px,6vw,90px)!important}
.ck:hover .ck__beeld img{transform:scale(1.04)}
.ck__tekst{padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;gap:14px}
.ck__tekst :is(h2,h3){font-size:clamp(26px,2.4vw,44px);line-height:1.02;letter-spacing:calc(-.035em * var(--krap) + var(--lucht))}
.ck__tekst :is(h2,h3) a{text-decoration:none}
.ck__tekst>p:not(.label):not(.ck__lees){color:var(--grijs);font-size:17px;line-height:1.42}
.ck .label{color:var(--grijs)}
.ck__lees{margin-top:auto;padding-top:8px}
.quote blockquote p{font-size:clamp(22px,1.9vw,34px);line-height:1.2;letter-spacing:calc(-.02em * var(--krap) + var(--lucht))}
.quote figcaption{margin-top:14px;font-size:15px;color:var(--fg-2)}
.quote figcaption b{color:var(--fg)}
.quote--klein{border-left:2px solid var(--or);padding-left:18px;margin:6px 0}
.quote--klein blockquote p{font-size:19px;line-height:1.3}
.quote--klein figcaption{font-size:13px;margin-top:8px;color:var(--grijs)}
.quote--groot{margin:clamp(40px,6vw,90px) 0;max-width:1100px}
.quote--groot blockquote p{font-size:clamp(30px,3.6vw,64px);line-height:1.06;letter-spacing:calc(-.035em * var(--krap) + var(--lucht))}
/* v14: een lange quote (meer dan 180 tekens) iets kleiner */
.quote--groot.quote--lang blockquote p{max-width:40ch;font-size:clamp(22px,2.4vw,38px);line-height:1.2}

/* ---------- AI (donker) -------------------------------------------------- */
.ai{padding-top:0!important}
.ai__bouw{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(30px,5vw,90px);padding-top:calc(var(--kop-h) + var(--tl-h))}
.ai__links{display:flex;flex-direction:column;gap:20px}
/* rechts: honderd keer hetzelfde, dan één die werkt */
.ai__beeld{position:relative;display:grid;place-items:center;min-height:min(560px,62svh)}
.ai__beeld>*{grid-area:1/1}
.ai__prompt{display:flex;align-items:center;gap:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(16px,1.5vw,24px);letter-spacing:0;border:1px solid var(--lijn-2);border-radius:14px;padding:16px 20px;background:var(--vlak);transition:opacity .5s,transform .6s var(--ease)}
.ai__prompt::before{content:"›";color:var(--or);margin-right:8px}
.ai__prompt i{width:9px;height:1.2em;background:var(--or);animation:cursor 1s steps(1) infinite}
.ai__veel-vak{display:grid;gap:14px;width:min(100%,640px)}
.ai__veel{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}
.ai__veel li{aspect-ratio:6/5;background:linear-gradient(155deg,hsl(var(--t) 14% 25%),hsl(var(--t) 10% 16%));border-radius:4px;position:relative;overflow:hidden;opacity:0;transform:scale(.4);transition:opacity .35s,transform .5s var(--ease)}
.ai__veel li s{position:absolute;right:9%;top:16%;width:34%;aspect-ratio:1;border-radius:50%;background:hsl(var(--t) 16% 38%)}
.ai__veel li i{position:absolute;left:10%;height:9%;background:hsl(var(--t) 8% 52%);border-radius:2px}
.ai__veel li i:nth-of-type(1){top:22%;width:44%}
.ai__veel li i:nth-of-type(2){top:37%;width:30%}
.ai__veel li b{position:absolute;left:10%;bottom:14%;width:34%;height:15%;border-radius:9px;background:hsl(var(--t) 30% 58%)}
.ai__veel li:nth-child(3n) s{left:33%;right:auto;top:10%;width:34%}
.ai__veel li:nth-child(3n) i:nth-of-type(1){top:56%;left:22%;width:56%}
.ai__veel li:nth-child(3n) i:nth-of-type(2){display:none}
.ai__veel li:nth-child(3n) b{left:33%;bottom:9%}
.ai__veel li:nth-child(4n+1) s{top:auto;bottom:-14%;right:-6%;width:52%}
.ai__meta{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:0;color:var(--fg-2);opacity:0;transition:opacity .4s}
.ai__bouw[data-stand="1"] .ai__meta{opacity:1;transition-delay:1s}
.ai__een{display:grid;justify-items:center;gap:14px;opacity:0;transition:opacity 0s}
.ai__een-vak{position:relative;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);overflow:hidden;box-shadow:0 0 0 2px var(--or),0 30px 80px -20px rgba(251,78,41,.45)}
.ai__een-vak img,.ai__een-vak iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ai__een-vak iframe{opacity:0}
.ai__een-vak iframe.is-geladen{opacity:1}
.ai__een figcaption{font-size:14px;color:var(--fg-2)}
.ai__bouw[data-stand="0"] .ai__prompt{opacity:1}
.ai__bouw:not([data-stand="0"]) .ai__prompt{opacity:0;transform:translateY(-30px)}
.ai__bouw[data-stand="1"] .ai__veel li{opacity:1;transform:none;transition-delay:var(--d)}
.ai__bouw[data-stand="2"] .ai__veel li{opacity:0;transform:scale(.2);transition-delay:calc(var(--d) * .3)}
.ai__bouw[data-stand="2"] .ai__een{opacity:1;transition-delay:.35s}
.rustig .ai__bouw,.no-js .ai__bouw{grid-template-columns:minmax(0,1fr)}
.rustig .ai__beeld,.no-js .ai__beeld{display:none}
.ai__frames{position:relative;display:grid}
.ai__frame{grid-area:1/1;align-self:center;font-size:clamp(40px,6.2vw,128px);line-height:.98;letter-spacing:calc(-.045em * var(--krap) + var(--lucht));max-width:16ch;transition:opacity .5s,transform .7s var(--ease),filter .5s}
.js:not(.rustig) .ai__frame{opacity:0;transform:translateY(40px);filter:blur(6px)}
.js:not(.rustig) .ai__frame.is-aan{opacity:1;transform:none;filter:none}
.js:not(.rustig) .ai__frame.is-weg{opacity:0;transform:translateY(-40px);filter:blur(6px)}
/* met maskers: de regels doen het werk, het frame zelf staat stil */
.ai--masker .ai__frame{opacity:1!important;transform:none!important;filter:none!important;transition:none}
.ai--masker .ai__frame:not(.is-aan){pointer-events:none}
.ai__frame[data-frame="2"]>span{color:var(--or)}
.rustig .ai__frames,.no-js .ai__frames{gap:.4em}
.rustig .ai__frame,.no-js .ai__frame{grid-area:auto;font-size:clamp(36px,4.6vw,88px)}
.ai__teller{font-variant-numeric:tabular-nums}
.rustig .ai__teller,.no-js .ai__teller{display:none}
.ai__uitleg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,5vw,100px);padding:clamp(40px,6vw,90px) 0;border-top:1px solid var(--lijn)}
.ai__tekst{font-size:clamp(22px,2vw,34px);line-height:1.22;letter-spacing:calc(-.02em * var(--krap) + var(--lucht))}
.ai__kolommen{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ai__kolommen h3{margin-bottom:16px}
.ai__kolommen li{padding:12px 0;border-top:1px solid var(--lijn);font-size:18px;line-height:1.3;color:var(--fg-2)}
.ai__wij li{color:var(--fg)}
.ai__wij li:last-child{color:var(--or)}
.ai__nieuw{padding-top:clamp(40px,6vw,90px);border-top:1px solid var(--lijn)}
.ai__producten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.ai__product{border:1px solid var(--lijn-2);border-radius:20px;padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:14px;background:var(--vlak)}
.ai__tag{display:flex;align-items:center;gap:8px;color:var(--or)}
.ai__tag i{width:8px;height:8px;border-radius:50%;background:var(--or);animation:puls 1.6s ease-in-out infinite}
@keyframes puls{50%{opacity:.25}}
.ai__product :is(h3,h4){font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:calc(-.03em * var(--krap) + var(--lucht))}
.ai__product p:not(.label){color:var(--fg-2);font-size:17px;line-height:1.42}
.ai__product .ai__regel{margin-top:auto;padding-top:12px;border-top:1px solid var(--lijn);color:var(--fg);font-size:16px}
.ai__knop{margin-top:clamp(28px,3vw,48px)}
/* home: na het derde frame de knop naar de AI-pagina */
.ai__meer{margin-top:clamp(8px,1.4vw,20px);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s,transform .7s var(--ease),visibility 0s .5s}
.ai__bouw[data-stand="2"] .ai__meer{opacity:1;visibility:visible;transform:none;transition:opacity .5s .5s,transform .8s var(--ease) .5s,visibility 0s}
.rustig .ai__meer,.no-js .ai__meer{opacity:1;visibility:visible;transform:none}
/* de AI-pagina */
.ai-kop{padding-top:calc(var(--kop-h) + var(--tl-h) + clamp(40px,7vw,110px))!important}
.ai-kop .label{margin-bottom:18px}
.ai-kop__lead{margin-top:clamp(22px,2.6vw,40px);max-width:30ch;font-size:clamp(26px,2.6vw,44px);line-height:1.12;letter-spacing:calc(-.03em * var(--krap) + var(--lucht));color:var(--fg-2)}
.ai-kop__lead b{display:block;color:var(--or-tekst)}   /* v16, 5 november (Frank): "In de onze" op de volgende regel */
.ai-kop__tekst{margin-top:clamp(28px,3vw,48px);max-width:42ch}
.ai-sectie{border-top:1px solid var(--lijn)}
.ai-sectie .ai__kolommen{max-width:1100px}

/* ---------- vragen ------------------------------------------------------- */
.vragen{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,100px);align-items:start}
.vragen__meest{margin-top:20px;border-top:1px solid var(--lijn);padding-top:24px}
.vragen__v{font-size:clamp(26px,2.4vw,42px);line-height:1.05;letter-spacing:calc(-.035em * var(--krap) + var(--lucht));margin-top:10px}
.vragen__a{font-size:clamp(46px,5vw,96px);line-height:.95;letter-spacing:calc(-.05em * var(--krap) + var(--lucht));color:var(--or)}
.vragen__a .punt{color:var(--inkt)}
.vr__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.vr__tabs button{display:inline-flex;align-items:center;gap:.5em;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--lijn-2);font-size:15px;transition:background .2s,color .2s}
.vr__tabs button span{font-size:.8em;color:var(--fg-3)}
.vr__tabs button[aria-selected="true"]{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.vr__tabs button[aria-selected="true"] span{color:inherit;opacity:.75}
.js .vr__paneel[data-verborgen]{display:none}
.no-js .vr__paneel+.vr__paneel{margin-top:30px}
.vr{border-top:1px solid var(--lijn)}
.vr:last-child{border-bottom:1px solid var(--lijn)}
.vr summary{list-style:none;display:grid;grid-template-columns:40px 1fr 32px;gap:12px;align-items:center;padding:20px 0;cursor:pointer;font-size:clamp(19px,1.45vw,25px);line-height:1.2;letter-spacing:calc(-.015em * var(--krap) + var(--lucht))}
.vr summary::-webkit-details-marker{display:none}
.vr__nr{font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.vr summary .plus{width:18px;height:18px;justify-self:end;transition:transform .35s var(--ease)}
.vr[open] summary .plus{transform:rotate(45deg)}
.vr summary:hover .vr__v{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.vr__a{padding:0 44px 24px 52px}
.vr__a p{font-size:18px;line-height:1.5;color:var(--fg-2);max-width:56ch}
/* v14, 22 oktober: de link naar het briefingsformulier onder een antwoord */
.vr__a .vr__pdf{margin-top:12px;font-size:16px;color:var(--fg-3)}
.vr__a .vr__pdf .pdf-link{font-size:16px}
/* v14, 22 oktober: de link naar de prijslijst onder het antwoord op wat het kost */
.vr__a .vr__prl{margin-top:12px;font-size:16px}

/* ---------- de prijslijst (v14, 22 oktober; b_prijslijst.py, prijslijst.js) -----------------------------------------
   Een echte 300 × 250, op ware grootte, bij de vragen: op de home, de Ads-pagina en drie vakken links onder de kop (en
   blijft staan terwijl je door de vragen gaat), op een telefoon na de vragen. Hij houdt de kleuren van een banner, ook in
   donker. Drie beelden als een kubus (prijslijst.js zet de draaiing); zonder JavaScript, bij minder beweging of zonder
   script staat alleen het formulier er (beeld 3), en na het versturen Komt eraan (.is-binnen, zonder script :target). */
.vragen--prl{grid-template-rows:auto 1fr;row-gap:clamp(28px,3vw,48px)}
.vragen--prl .vragen__rechts{grid-column:2;grid-row:1 / span 2}
.vragen__prl{grid-column:1;grid-row:2;position:sticky;top:calc(var(--kop-h) + var(--tl-h) + 24px)}
.prl{width:min(300px,100%)}
.prl__banner{--papier:#F5F5F5;--wit:#FFFFFF;--inkt:#1D1D1B;--zwart:#111110;--or:#FB4E29;--focus:#1D1D1B;color-scheme:light;
  position:relative;height:250px;overflow:hidden;isolation:isolate;perspective:900px;background:#111110;color:#1D1D1B;
  box-shadow:0 0 0 1px var(--lijn);font-size:14px;line-height:1.3;text-align:left;-webkit-tap-highlight-color:transparent}
.prl.is-speelt .prl__banner{cursor:pointer}
.prl__vlak{position:absolute;inset:0;display:flex;flex-direction:column;padding:18px 20px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.prl__vlak::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--s,0);pointer-events:none}
.prl__vlak--1{z-index:3;background:#111110;color:#F5F5F5;justify-content:flex-end}
.prl__vlak--2{z-index:2;background:#FFFFFF}
.prl__vlak--3{z-index:1;background:#FB4E29}
.prl__binnen{z-index:4;--focus:#FB4E29;background:#111110;color:#F5F5F5;justify-content:flex-end}
/* wat er staat zonder script: het formulier. Met script staat beeld 1 er al tot de banner begint (vangnet: na 3,5 s
   zonder prijslijst.js toch het formulier) */
.prl__vlak--1,.prl__vlak--2,.prl__binnen{visibility:hidden}
.js:not(.rustig) .prl:not(.is-eind):not(.is-binnen) .prl__vlak--1{visibility:visible}
.vangnet .prl:not(.is-klaar) .prl__vlak--1{visibility:hidden}
.prl.is-binnen .prl__binnen,.prl__binnen:target{visibility:visible}
.prl__banner:has(.prl__binnen:target) .prl__vlak--3{visibility:hidden}
.prl__merk{position:absolute;top:18px;right:20px;width:22px;height:auto;fill:currentColor}
/* beeld 1: de vraag, regel voor regel uit een masker; het vraagteken oranje */
.prl__vraag{font-size:52px;line-height:.92;font-weight:500;letter-spacing:calc(-.045em * var(--krap) + var(--lucht))}
.prl__r{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.prl__r>span{display:block}
.prl__vt{display:inline-block;font-weight:inherit;color:#FB4E29}
/* beeld 2: de formaten, de bedragen zwart op wit */
.prl__vast{max-width:calc(100% - 34px);text-wrap:balance;font-size:24px;line-height:1.02;font-weight:500;letter-spacing:calc(-.03em * var(--krap) + var(--lucht))}
.prl__lijst{margin-top:14px;font-size:14px;line-height:1;font-variant-numeric:tabular-nums}
.prl__lijst li{display:flex;align-items:center;height:23px}
.prl__maat{flex:none}
.prl__stip{flex:1;align-self:center;height:1px;margin:3px 8px 0;background:radial-gradient(circle,rgba(29,29,27,.5) .6px,transparent .9px) 0 50%/4px 1px repeat-x}
.prl__prijs{flex:none;display:inline-flex;align-items:center}
.prl__lak{display:block;width:var(--b);height:12px;margin-left:2px;background:#1D1D1B;border-radius:1px;transform-origin:0 50%}
.prl__klein{font-size:12px;line-height:1.3}
.prl__vlak--2 .prl__klein{margin-top:auto;color:#5A5A55}
/* beeld 3: het formulier */
.prl__kop{max-width:calc(100% - 34px);text-wrap:balance;margin-bottom:auto;font-size:30px;line-height:1;font-weight:500;letter-spacing:calc(-.035em * var(--krap) + var(--lucht))}
.prl__veld{display:block;width:calc(100% - 16px);height:42px;padding:0 18px;border:0;border-radius:999px;background:#FFFFFF;color:#1D1D1B;font-size:16px;line-height:42px}
.prl__veld::placeholder{color:#6B6B69;opacity:1}
.prl__veld:focus-visible{outline:2px solid #1D1D1B;outline-offset:2px}
.prl__veld[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #1D1D1B}
/* v14, 23 oktober: de knop 16 px smaller dan de banner breed is: bij hover komt de cirkel 27 px uit de knop (--kh + --kg - --kz),
   en die moet binnen de banner blijven, met lucht */
.prl .prl__knop.knop--vloei{--kh:44px;--kp:18px;--kg:6px;--k-vul:#1D1D1B;--k-op:#F5F5F5;--k-vul-h:#F5F5F5;--k-op-h:#1D1D1B;width:calc(100% - 16px);margin-top:8px;font-size:15px;justify-content:space-between}
/* de pijl rechts in de knop, niet midden achter de tekst: bij hover schuift hij zo in de cirkel (zoals bij elke knop op de site) */
.prl__form.is-bezig .prl__knop{opacity:.6;pointer-events:none}
.prl__vlak--3 .prl__klein{margin-top:9px;color:#1D1D1B}
.prl__belofte a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.prl__fout{position:absolute;left:20px;right:20px;bottom:18px;font-weight:500}
.prl__fout a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.prl__form.is-fout .prl__belofte{visibility:hidden}
/* binnen */
.prl__binnen:focus{outline:none}
.prl__binnen:focus-visible{outline:2px solid #FB4E29;outline-offset:-4px}
.prl__binnen-kop{font-size:46px;line-height:.95;font-weight:500;letter-spacing:calc(-.045em * var(--krap) + var(--lucht))}
.prl__binnen-tekst{max-width:19em;margin-top:10px;font-size:15px;line-height:1.35;color:rgba(245,245,245,.8)}
.prl__binnen-link{margin-top:14px;font-size:15px}
/* het bijschrift, zoals bij het werk op ware grootte, met Opnieuw afspelen */
.prl__onder{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px;line-height:1.35;color:var(--fg-3)}
.prl__onder b{display:block;font-weight:500;color:var(--fg)}
.prl__opnieuw{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:28px;margin-top:-3px;font-size:14px;color:var(--fg-2);transition:color .2s}
.prl__opnieuw svg{width:14px;height:14px}
.prl__opnieuw:hover{color:var(--fg)}
/* de link naar de prijslijst: even laten zien waar hij staat */
.prl.is-wijs .prl__banner{animation:prl-wijs 1.1s var(--ease)}
@keyframes prl-wijs{from{box-shadow:0 0 0 1px var(--lijn),0 0 0 0 rgba(251,78,41,.6)}to{box-shadow:0 0 0 1px var(--lijn),0 0 0 22px rgba(251,78,41,0)}}
@media print{.prl,.vr__prl,.prl-baan{display:none}}
/* v14, 23 oktober: dezelfde banner als leaderboard, 728 × 90, onder de kennisartikelen en de gidsen (b_prijslijst.baan).
   Eén banner, twee formaten, zoals een responsive plek bij een uitgever: is de strook smaller dan 728 px (een telefoon),
   dan is hij de 300 × 250 hierboven. Links het beeldmerk, dan per beeld: de vraag op één regel / de kop met de formaten
   in twee kolommen / de kop, het veld, de knop en de kleine letters. De knop houdt 44 px rechts: de cirkel van de hover
   steekt 24 px uit de knop en blijft zo binnen de banner. De kubus kantelt hier naar boven (prijslijst.js). */
.prl-baan{display:flex;justify-content:center;padding:clamp(40px,5vw,72px) var(--rand) 0}
.prl--728{width:min(728px,100%);container-type:inline-size}
.prl--728 .prl__banner,.prl--728 .prl__onder{max-width:300px;margin-inline:auto}
.prl__maat--728{display:none}
@container (min-width:728px){
  .prl--728 .prl__banner{max-width:none;height:90px;perspective:600px}
  .prl--728 .prl__onder{max-width:none;align-items:center}
  .prl--728 .prl__onder b{display:inline}
  .prl--728 .prl__maat--300{display:none}
  .prl--728 .prl__maat--728{display:inline}
  .prl--728 .prl__vlak{flex-direction:row;align-items:center;padding:0 24px 0 70px}
  .prl--728 .prl__merk{top:33px;left:24px;right:auto;width:28px}
  .prl--728 .prl__vlak--1{justify-content:flex-start}
  .prl--728 .prl__vraag{font-size:46px;line-height:1;white-space:nowrap}
  .prl--728 .prl__r{display:inline-block;vertical-align:top;margin-right:.22em}
  .prl--728 .prl__r:last-child{margin-right:0}
  .prl--728 .prl__vlak--2{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:36px;row-gap:4px;align-content:center}
  .prl--728 .prl__vast{grid-column:1;grid-row:1;width:10em;max-width:none;font-size:21px;align-self:end}
  .prl--728 .prl__vlak--2 .prl__klein{grid-column:1;grid-row:2;margin-top:0;font-size:11.5px}
  .prl--728 .prl__lijst{grid-column:2;grid-row:1 / span 2;align-self:center;margin-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}
  .prl--728 .prl__lijst li{height:24px}
  .prl--728 .prl__vlak--3{display:grid;grid-template-columns:auto minmax(150px,1fr) auto;grid-template-rows:40px auto;column-gap:8px;row-gap:5px;align-content:center;padding:0 44px 0 70px}
  .prl--728 .prl__kop{grid-column:1;grid-row:1 / span 2;align-self:center;max-width:7.4em;margin:0 18px 0 0;font-size:22px;line-height:1.02}
  .prl--728 .prl__veld{grid-column:2;grid-row:1;width:100%;height:40px;line-height:40px;padding:0 16px;font-size:16px}
  .prl--728 .prl__knop.knop--vloei{grid-column:3;grid-row:1;width:auto;margin-top:0;--kh:40px;--kp:16px;font-size:14px}
  .prl--728 .prl__vlak--3 .prl__klein{grid-column:2 / span 2;grid-row:2;margin-top:0;font-size:11px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .prl--728 .prl__fout{position:static;grid-column:2 / span 2;grid-row:2}
  .prl--728 .prl__binnen{gap:26px;justify-content:flex-start}
  .prl--728 .prl__binnen-kop{font-size:38px;white-space:nowrap}
  .prl--728 .prl__binnen-tekst{max-width:18em;margin-top:0;font-size:14px}
  .prl--728 .prl__binnen-link{flex:none;margin:0 0 0 auto;font-size:14px;white-space:nowrap}   /* krimpt niet: anders schuift de pijl in de tekst */
}

/* ---------- kennis ------------------------------------------------------- */
.kennis__kop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.kennis__kop .sk{margin-bottom:clamp(30px,4vw,56px)}
.kennis__knoppen{display:flex;gap:8px;margin-bottom:clamp(30px,4vw,56px)}
/* v15, 26 oktober (Frank: "als ik nu scroll over de artikelen-carrousel op de homepage dan probeert hij eerst die images te
   scrollen ipv de page"): de rij schuift alleen opzij. De kaarten die nog binnen moeten komen, staan 46 px lager
   (beweging.js, .bw-rij); daardoor was de rij ook een paar pixels verticaal te scrollen, en dat ving het scrollen op. */
.kennis__rij{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,24vw,380px);gap:clamp(16px,1.8vw,28px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  margin:0 calc(-1 * var(--rand));padding:4px var(--rand) 20px;scrollbar-width:none;scroll-padding:0 var(--rand)}
.kennis__rij::-webkit-scrollbar{display:none}
.kk{scroll-snap-align:start}
.kk__link{display:flex;flex-direction:column;gap:10px;text-decoration:none;height:100%}
.kk__beeld{display:block;aspect-ratio:644/960;border-radius:16px;overflow:hidden;background:var(--offwit)}
.kk__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.kk__link:hover .kk__beeld img{transform:scale(1.05)}
.kk__meta{display:flex;gap:10px;margin-top:6px}
.kk__meta b{color:var(--or-tekst);font-weight:500}
.kk__titel{font-size:clamp(19px,1.4vw,24px);line-height:1.15;letter-spacing:calc(-.02em * var(--krap) + var(--lucht))}
.kk__auteur{font-size:14px;color:var(--fg-2)}
.kk__lees{margin-top:auto;display:inline-flex;align-items:center;gap:.4em;font-size:15px;padding-top:6px}
.kennis__alles{margin-top:24px}

/* (v13: het contactblok en de voet staan onderaan, bij v13) */
/* ---------- werk: overzicht ----------------------------------------------- */
.werk-kop,.kennis-kop,.start-kop,.over-kop,.case-kop,.cases-kop,.detail-kop,.niets{padding-top:calc(var(--kop-h) + var(--tl-h) + clamp(40px,7vw,110px))!important}
.werk-kop .label,.kennis-kop .label,.start-kop .label,.over-kop>.label,.case-kop>.label,.cases-kop>.label{margin-bottom:18px}
.werk-kop__intro,.kennis-kop__lead,.start-kop__lead,.over-kop__lead,.case-kop__lead,.cases-kop__intro,.detail-kop__lead{margin-top:clamp(18px,2.4vw,34px);max-width:40ch;font-size:clamp(21px,1.8vw,30px);line-height:1.28;letter-spacing:calc(-.015em * var(--krap) + var(--lucht));color:var(--fg-2)}
.werk-lijst{padding-top:0!important}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters--soort{margin-top:10px}
.werk-lijst__teller{margin:22px 0 18px;font-size:15px;color:var(--fg-2)}
/* alle werk: kolommen van 320 px, elke uiting op zijn eigen hoogte gestapeld, zonder kaders.
   Breder dan 320 (leaderboard, billboard) wordt verkleind. Zonder js: css-kolommen. */
.tegels{--gat:clamp(40px,3.6vw,60px);columns:336px;column-gap:clamp(28px,3vw,56px)}
.tegels>.tg{break-inside:avoid;margin-bottom:var(--gat)}
/* de wand mag tot 24 px van de rand: zo past er op een 16" scherm een vijfde kolom bij */
.js .tegels[data-tegels]{display:grid;grid-template-columns:repeat(auto-fill,336px);justify-content:space-between;column-gap:20px;grid-auto-rows:4px;align-items:start;margin:0 min(0px,calc(24px - var(--rand)))}
.js .tegels[data-tegels]>.tg{margin:0}
.tg{min-width:0}
.tg[hidden]{display:none}
.tg__link{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:12px;text-decoration:none;color:inherit}
.tg__vak{position:relative;display:block;width:calc(var(--w) * var(--k,1) * 1px);max-width:100%;aspect-ratio:var(--w)/var(--h);background:#fff;box-shadow:0 0 0 1px var(--lijn);overflow:hidden;transition:box-shadow .25s}
.tg__vak img{display:block;width:100%;height:100%}
/* v14: video op de wand (social en DOOH), geschaald naar de kolom. De video ligt over het beeld en verschijnt pas als hij
   speelt (werk.js zet is-aan), zonder fade */
.tg__vak--video{background:var(--inkt-vast)}
.tg__vak--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.tg__vak--video video.is-aan{opacity:1}
/* v14, 21 oktober: max-width:none, anders maakte de regel voor alle iframes (max-width:100%) een billboard of leaderboard
   eerst zo smal als de kolom en daarna nog eens kleiner (een klein vak links in de tegel). De uiting komt in 0,3 s over de still. */
.tg__vak .tg__live{position:absolute;left:0;top:0;border:0;pointer-events:none;transform-origin:0 0;opacity:0;max-width:none;transition:opacity .3s}
.tg__vak .tg__live.is-geladen{opacity:1}
.tg__link:hover .tg__vak{box-shadow:0 0 0 1px var(--or)}
.tg__meta{display:grid;gap:2px;font-size:15px;line-height:1.3;max-width:320px}
.tg__meta b{font-weight:500;font-size:17px}
.tg__meta>span{color:var(--fg-2)}
.tg__maat{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--fg-3)!important;font-size:13px;font-variant-numeric:tabular-nums;margin-top:4px}
.tg__maat i{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--lijn-2);border-radius:999px;padding:2px 7px;color:var(--fg-2)}
.tg__maat em{font-style:normal;color:var(--fg-3)}
.tegels.tegels--rij{columns:auto;display:flex;flex-wrap:wrap;align-items:flex-end;gap:40px clamp(28px,3vw,56px)}
.tegels--rij>.tg{margin:0;flex:none;width:max(calc(var(--w) * var(--k,1) * 1px),200px);max-width:100%}
.detail-meer .wand__veeg{margin-top:-12px}
.werk-lijst__leeg{padding:40px 0;font-size:20px}

/* ---------- detail -------------------------------------------------------- */
/* het kruimelpad is het oogje boven de kop: de weg erheen in lichter grijs, dan waar je bent.
   Loopt hij over twee regels, dan begint de tweede onder de tekst, niet onder het streepje */
.kruimel{padding-left:52px;text-indent:-52px}
.kruimel ol{display:inline;margin:0;padding:0;list-style:none}
.kruimel li{display:inline;white-space:nowrap}
/* waar je bent gaat als geheel naar de tweede regel als hij niet meer past; is hij langer dan een regel, dan breekt hij zelf af */
.kruimel li[aria-current]{display:inline-block;max-width:100%;white-space:normal;text-indent:0}
.kruimel li:not(:last-child)::after{content:"/";margin:0 .2em 0 .55em;color:var(--fg-3)}
.kruimel a{color:var(--fg-3);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:color .2s}   /* v15: een link is niet alleen kleur */
.kruimel a:is(:hover,:focus-visible){color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.detail-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:start}
.detail-kop .label{margin-bottom:16px}
.feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:30px;border-top:1px solid var(--lijn)}
.feiten div{padding:14px 0;border-bottom:1px solid var(--lijn)}
.feiten dt{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);margin-bottom:4px}
.feiten dd{font-size:17px;line-height:1.35}
.feiten--rij{grid-template-columns:repeat(4,minmax(0,1fr))}
.detail-kop__aanleveren{margin-top:24px;max-width:52ch}
/* v14: wat er in de uiting zit (teksten.WERK_OVER), onder de intro; leestekst, geen animatie */
.detail-kop__over{margin-top:clamp(14px,1.6vw,22px);max-width:46ch;font-size:clamp(17px,1.25vw,19px);line-height:1.55;letter-spacing:-.005em;color:var(--fg)}
/* ronde 12: wat de klant zegt, bij zijn werk */
.detail-kop__quote{margin-top:28px;max-width:52ch}
.detail-kop__werk{position:sticky;top:calc(var(--kop-h) + var(--tl-h) + 20px);display:flex;justify-content:center}
.podium{--s:1;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.detail-kop--breed{grid-template-columns:minmax(0,1fr)}
.detail-kop--breed .detail-kop__werk{order:-1;position:relative;top:0;justify-content:flex-start}
.detail-kop--breed .podium{align-items:flex-start}
@media (min-width:1101px){
  .detail-kop--breed .detail-kop__tekst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(30px,5vw,90px);align-items:start}
  .detail-kop--breed .detail-kop__tekst>*{grid-column:1}
  /* ronde 12: de feiten, de quote en het aanleverpunt samen in de tweede kolom, direct onder elkaar */
  .detail-kop--breed .detail-kop__tekst>.detail-kop__zij{grid-column:2;grid-row:1/span 5}
  .detail-kop--breed .feiten{margin-top:0}
}
.podium__vak{position:relative;width:calc(var(--w) * var(--s) * 1px);height:calc(var(--h) * var(--s) * 1px)}
.podium__in{position:absolute;left:0;top:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);transform:scale(var(--s));transform-origin:0 0;background:#fff;box-shadow:0 30px 70px -30px rgba(17,17,16,.45),0 0 0 1px var(--lijn)}
.podium__in img,.podium__in iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.podium__in iframe{opacity:0}
.podium__in iframe.is-geladen{opacity:1}
.podium__onder{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--fg-2)}
.detail-gebouwd,.detail-sb,.detail-meer{border-top:1px solid var(--lijn)}
.gebouwd{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:clamp(24px,3vw,56px);align-items:start}
.gebouwd--case{margin-top:clamp(30px,4vw,60px)}
.detail-meer__nav{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(40px,5vw,70px);padding-top:24px;border-top:1px solid var(--lijn)}
.detail-meer__nav a{padding-bottom:2px;font-size:18px;gap:14px;max-width:46%}
.detail-meer__nav a::before,.detail-meer__nav a::after{content:none}   /* Vorige en Volgende: geen streep */
.detail-meer__nav small{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);margin-bottom:4px}

/* de explosietekening */
.tekening{--label-b:250px;--veld-pad:24px;--s-max:1.4;--p:0;position:relative;margin:0}
.tekening__veld{position:relative;height:var(--veld-h,640px);overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;border-radius:22px;
  background:var(--wit);background-image:radial-gradient(circle,rgba(29,29,27,.12) .8px,transparent 1.2px);background-size:24px 24px;background-position:center;box-shadow:0 0 0 1px var(--lijn)}
.tekening.is-slepen .tekening__veld{cursor:grabbing}
.tekening__scene{position:absolute;left:50%;top:50%;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);margin:calc(var(--h) * -.5px) 0 0 calc(var(--w) * -.5px);
  transform-style:preserve-3d;transform:translate(var(--dx,0px),var(--dy,0px)) scale(var(--s,.8)) rotateX(var(--rx,14deg)) rotateY(var(--ry,-36deg));will-change:transform}
.vlak{position:absolute;inset:0;transform:translateZ(var(--z,calc((var(--i) - (var(--n) - 1) / 2) * 52px)));pointer-events:none;transition:opacity .35s}
.vlak::after{content:"";position:absolute;inset:0;border:1px solid var(--lijn-2);pointer-events:none;transition:border-color .2s}
.vlak--overgang::after{border-style:dashed}
.vlak--overgang::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(29,29,27,.08) 9px 10px)}
.vlak__beeld{-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 0 .6px rgba(29,29,27,.5));position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);width:calc(var(--bw) * 1px);height:calc(var(--bh) * 1px);max-width:none;pointer-events:auto}
.vlak__live{position:absolute;left:0;top:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);border:0;display:block;background:transparent;pointer-events:none;opacity:0;transition:opacity .25s;color-scheme:light}
.is-levend .vlak__live{opacity:1}
.is-levend .vlak__beeld{opacity:0}
.is-levend .vlak--overgang::before{opacity:.35}
.is-wissel .vlak__live{opacity:0}
.vlak__nr{position:absolute;left:calc(var(--ax) * 1px);top:calc(var(--ay) * 1px);translate:-50% -50%;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;line-height:1;background:var(--wit);color:var(--inkt);border:1px solid var(--inkt)}
.js .vlak__nr{display:none}
.tekening.is-solo .vlak{opacity:.1}
.tekening.is-solo .vlak.is-gekozen{opacity:1}
.vlak.is-gekozen::after,.vlak.is-licht::after{border-color:var(--pen);border-width:1.5px}
.tekening.is-dicht .vlak::after{border-color:transparent}
.tekening.is-dicht .vlak--overgang::before{opacity:0}
.tekening__lijnen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:var(--zicht,1);transition:opacity .4s}
.tekening__lijnen .as{stroke:var(--lijn-2);stroke-width:1;stroke-dasharray:14 4 2 4}
.tekening__lijnen .leider polyline{fill:none;stroke:var(--inkt);stroke-width:1;opacity:.6;transition:stroke .2s,opacity .2s}
.tekening__lijnen .leider circle{fill:var(--inkt)}
.tekening__lijnen .leider.is-gekozen polyline,.tekening__lijnen .leider.is-licht polyline{stroke:var(--pen);stroke-width:1.5;opacity:1}
.tekening__lijnen .leider.is-gekozen circle,.tekening__lijnen .leider.is-licht circle{fill:var(--pen)}
.tekening.is-solo .leider:not(.is-gekozen){opacity:.25}
.tekening.is-dicht .tekening__lijnen{opacity:0}
.tekening__labels{position:absolute;left:0;top:0;pointer-events:none;display:none}
.js .tekening__labels{display:block}
.tekening:not(.met-labels) .label__tekst{display:none}
.tekening:not(.met-labels) .tekening__labels li{width:auto}
.tekening__labels li{position:absolute;left:0;top:0;display:flex;align-items:flex-start;gap:9px;width:calc(var(--label-b) - 16px);transition:opacity .3s;will-change:transform}
.tekening.is-dicht .tekening__labels li{opacity:0}
.tekening.is-solo .tekening__labels li:not(.is-gekozen){opacity:.3}
.ballon{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--inkt);display:grid;place-items:center;font-size:11px;line-height:1;background:var(--wit);color:var(--inkt);transition:background .2s,color .2s,border-color .2s}
.is-gekozen>.ballon,.is-licht>.ballon,[aria-pressed="true"]>.ballon{background:var(--or);border-color:var(--or)}
.label__tekst{display:grid;gap:1px;padding-top:3px;min-width:0}
.label__tekst b{font-weight:500;font-size:14px;line-height:1.15;letter-spacing:calc(-.01em * var(--krap) + var(--lucht))}
.label__tekst i{font-style:normal;font-size:11px;line-height:1.25;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tekening__bediening{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:16px 4px 0;font-size:14px}
.tekening__tijd{font-variant-numeric:tabular-nums;color:var(--fg-2);min-width:70px}
.tekening__bediening [data-herstel]{margin-left:auto}
.schuif{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2)}
.schuif input{appearance:none;-webkit-appearance:none;width:clamp(110px,12vw,180px);height:24px;background:transparent;cursor:pointer}
.schuif input::-webkit-slider-runnable-track{height:2px;background:var(--inkt);border-radius:2px}
.schuif input::-moz-range-track{height:2px;background:var(--inkt)}
.schuif input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--or);border:0;margin-top:-8px}
.schuif input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--or);border:0}
.schuif span{white-space:nowrap}
.tekening [data-speel] svg{width:14px;height:14px}
.is-spelend [data-speel]{background:var(--or);color:var(--inkt)}
.is-laden [data-speel]{opacity:.6}
.no-js .tekening__bediening{display:none}

/* stuklijst, als rustige lijst */
.sl{--p:0;font-size:15px}
.sl__kop{display:grid;grid-template-columns:1fr 44%;gap:10px;padding:0 0 10px;border-bottom:1px solid var(--inkt);position:relative}
.sl__kop .speelkop{position:absolute;top:0;bottom:-1px;width:2px;background:var(--pen);left:calc(56% + 10px + var(--p) * (44% - 10px));pointer-events:none}
.sl__rij{border-bottom:1px solid var(--lijn)}
.sl__kies{width:100%;display:grid;grid-template-columns:52px 26px minmax(0,1fr) 44%;gap:10px;align-items:center;text-align:left;padding:8px 0;min-height:52px;transition:background .15s}
.sl__rij.is-licht .sl__kies,.sl__rij.is-gekozen .sl__kies{background:color-mix(in srgb,var(--pen) 8%,transparent)}
.sl__duim{width:52px;height:38px;display:grid;place-items:center;background-image:linear-gradient(45deg,rgba(29,29,27,.07) 25%,transparent 25% 75%,rgba(29,29,27,.07) 75%),linear-gradient(45deg,rgba(29,29,27,.07) 25%,transparent 25% 75%,rgba(29,29,27,.07) 75%);background-size:8px 8px;background-position:0 0,4px 4px;border-radius:6px}
.sl__duim img{max-width:48px;max-height:34px;width:auto;height:auto}
.sl__naam{display:grid;gap:1px;line-height:1.2}
.sl__naam small{font-size:12px;color:var(--fg-3)}
.sl__tijd{position:relative;height:14px}
.sl__tijd::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dotted var(--lijn-2)}
.sl__tijd i{position:absolute;top:2px;bottom:2px;background:var(--inkt);left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);min-width:2px;border-radius:2px}
.vlak-soort-overgang .sl__tijd i{background:repeating-linear-gradient(-45deg,var(--inkt) 0 2px,transparent 2px 4px);border:1px solid var(--inkt)}

/* storyboard */
.sb{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(calc(var(--cb) * 1px),100%),1fr));gap:20px 14px}
.sb li{display:grid;gap:8px;justify-items:start}
.sb__beeld{display:block;width:min(calc(var(--cb) * 1px),100%);aspect-ratio:var(--cb)/var(--ch);background-image:var(--url);background-size:calc(var(--n) * 100%) 100%;background-position:calc(var(--bx) / max(1, var(--n) - 1) * 100%) 0;box-shadow:0 0 0 1px var(--lijn);border-radius:4px}
.sb__t{font-size:13px;color:var(--fg-2);font-variant-numeric:tabular-nums}

/* ---------- case ---------------------------------------------------------- */
.case-kop{padding-bottom:clamp(40px,6vw,90px)!important}
.case-kop__lead{max-width:44ch}
.case-kop .feiten{margin-top:clamp(30px,4vw,56px)}
.case-kop__beeld{margin:clamp(30px,4vw,60px) calc(-1 * var(--rand)) 0;overflow:hidden;background:#7b72ff}
.case-kop__beeld img{width:100%;aspect-ratio:1280/576;object-fit:cover}
.samenvatting{margin-top:clamp(40px,5vw,80px);display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;max-width:1300px}
.samenvatting__tekst{font-size:clamp(23px,2.2vw,38px);line-height:1.2;letter-spacing:calc(-.022em * var(--krap) + var(--lucht))}
.case-sectie{border-top:1px solid var(--lijn)}
.case-twee{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,90px);align-items:start}
.case-foto img,.duo img{width:100%;border-radius:18px}
.familie__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,4vw,56px)}
.familie__tabs button{display:inline-flex;align-items:center;gap:.5em;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--lijn-2);font-size:17px}
.familie__tabs button span{font-size:.8em;color:var(--fg-3)}
.familie__tabs button[aria-selected="true"]{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.familie__tabs button[aria-selected="true"] span{color:inherit;opacity:.75}
.js .familie__paneel[data-verborgen]{display:none}
.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin-bottom:clamp(30px,4vw,60px)}
.vier article{border-top:2px solid var(--inkt);padding-top:16px;display:grid;gap:10px;align-content:start}
.vier h3{font-size:clamp(21px,1.6vw,28px);line-height:1.08;letter-spacing:calc(-.025em * var(--krap) + var(--lucht))}
.vier p:not(.label){color:var(--fg-2);font-size:16px;line-height:1.45}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px)}
.duo figcaption{margin-top:10px;font-size:14px;color:var(--fg-2)}
.duo__video{border-radius:18px;overflow:hidden;background:#111;aspect-ratio:1080/1350;display:grid;place-items:center}
.duo__video video{height:100%;width:auto;max-width:none}
.case-breed{margin-bottom:clamp(30px,4vw,60px)}
.case-breed img{width:100%;border-radius:18px;aspect-ratio:1280/576;object-fit:cover}
.zes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2vw,30px);margin-bottom:30px;counter-reset:zes}
.zes li{display:grid;gap:6px;padding:18px 0;border-top:1px solid var(--lijn);counter-increment:zes}
.zes li::before{content:counter(zes,decimal-leading-zero);font-size:13px;color:var(--fg-3)}
.zes b{font-size:clamp(21px,1.6vw,28px);letter-spacing:calc(-.025em * var(--krap) + var(--lucht));line-height:1.1;font-weight:500}
.zes span{color:var(--fg-2);font-size:16px}
.moeilijk{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,60px);margin-bottom:30px}
.moeilijk li{padding:20px 0;border-top:1px solid var(--lijn);font-size:18px;line-height:1.45;color:var(--fg-2)}
.moeilijk b{color:var(--fg);display:block;font-size:clamp(20px,1.5vw,26px);letter-spacing:calc(-.02em * var(--krap) + var(--lucht));margin-bottom:4px}
.cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px)}
.cijfers li{display:grid;gap:10px;border-top:2px solid var(--inkt);padding-top:16px;align-content:start}
.cijfers b{font-size:clamp(54px,6vw,120px);line-height:.9;letter-spacing:calc(-.05em * var(--krap) + var(--lucht));font-weight:500}
.cijfers span{font-size:16px;line-height:1.4;color:var(--fg-2)}
.credits{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;border-top:1px solid var(--lijn);padding-top:24px}
.credits dl{display:grid;gap:12px}
.credits dt{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.credits dd{font-size:18px}
.volgende-case{display:grid;gap:24px}
.volgende-case__link{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;text-decoration:none;border-bottom:2px solid var(--inkt);padding-bottom:20px}
.volgende-case__link>span:last-child{display:inline-flex;align-items:center;gap:.4em;font-size:clamp(20px,1.6vw,28px)}

/* ---------- over ons ------------------------------------------------------ */
.over-feiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin:clamp(40px,6vw,90px) 0}
.over-feiten li{border-top:2px solid var(--inkt);padding-top:16px;display:grid;gap:8px}
.over-feiten b{font-size:clamp(64px,8vw,160px);line-height:.88;letter-spacing:calc(-.06em * var(--krap) + var(--lucht));font-weight:500}
.over-feiten b span{color:var(--or)}
.over-feiten li>span{font-size:18px;color:var(--fg-2);max-width:22ch}
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin-bottom:24px}
.persoon{display:grid;gap:10px;align-content:start}
.persoon__beeld{aspect-ratio:300/250;background:var(--offwit);border-radius:16px;display:grid;place-items:center;overflow:hidden;position:relative}
.persoon__beeld span{font-size:clamp(46px,5vw,90px);letter-spacing:calc(-.05em * var(--krap) + var(--lucht));color:var(--steen)}
.persoon h3{font-size:clamp(22px,1.7vw,30px);letter-spacing:calc(-.025em * var(--krap) + var(--lucht));line-height:1.05}
.persoon__rol{color:var(--fg-2);font-size:16px}
/* v14, 23 oktober (Frank): de titel boven de rol */
.persoon__titel{display:block;color:var(--fg);font-weight:500;letter-spacing:calc(-.01em * var(--krap) + var(--lucht))}
.persoon__schreef{font-size:15px;line-height:1.35}
.persoon__schreef a{text-decoration:none;display:inline}
.persoon__schreef a:hover{text-decoration:underline}
.persoon__schreef .pijl{display:inline;vertical-align:-.12em;margin-left:.2em;width:.9em;height:.9em}
.persoon__beeld--foto{background:var(--offwit)}
.persoon__beeld--foto img{width:100%;height:100%;object-fit:cover;display:block}
.persoon--plus .persoon__beeld{background:none;border:1px dashed var(--lijn-2)}
.over-sectie{border-top:1px solid var(--lijn)}
.over-sectie.thema-donker{border-top:0}
.stappen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);position:relative}
.stappen::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--lijn-2)}
.stap{position:relative;display:grid;gap:10px;align-content:start;padding-top:44px}
.stap__nr{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--inkt);color:var(--papier);display:grid;place-items:center;font-size:13px}
.stap h3{font-size:clamp(22px,1.8vw,32px);letter-spacing:calc(-.03em * var(--krap) + var(--lucht));line-height:1}
.stap p{color:var(--fg-2);font-size:16px;line-height:1.42}
.stap__ai{border:1px dashed var(--or);border-radius:10px;padding:8px 10px;font-size:14px!important}
.stap__ai .label{color:var(--or-tekst);display:block;margin-bottom:4px}
.stappen__noot{margin-top:30px;font-size:18px;color:var(--fg-2)}
.stappen__noot .pijl-link{color:var(--fg);margin-left:6px}
.misgaat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,60px);margin-bottom:40px}
.misgaat li{padding:24px 0;border-top:1px solid var(--lijn)}
.misgaat h3{font-size:clamp(24px,2.2vw,40px);letter-spacing:calc(-.03em * var(--krap) + var(--lucht));line-height:1.04;margin-bottom:8px}
.misgaat p{color:var(--fg-2);font-size:18px}
.over-twee{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,100px);align-items:start}
/* 11 november (Frank: geen woord alleen op de laatste regel): de kop in de smalle kolom naast de voorbeelden (De Merkset) en
   de kop van een werkpagina naast de uiting iets kleiner dan titel--l (6vw), anders stond het laatste woord vaak alleen */
.over-twee .titel--l,.detail-kop__tekst .titel--l{font-size:clamp(40px,5vw,104px)}
.over-twee .aanleveren{margin-top:24px;max-width:46ch}
.plank-blok{display:grid;gap:16px;min-width:0}
.plank{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:flex-end}
.plank figure{flex:none}
.plank figure{display:grid;gap:10px}
.plank figcaption{font-size:14px;color:var(--fg-2)}
.plank figcaption b{color:var(--fg);font-weight:500}
.plank__vak{position:relative}
.plank__in{position:relative;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);overflow:hidden;box-shadow:0 0 0 1px var(--lijn);background:#fff}
.plank__in img,.plank__in iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.plank__in iframe{opacity:0}
.plank__in iframe.is-geladen{opacity:1}
.plank__noot{font-size:15px;color:var(--fg-2);max-width:44ch}
@media (max-width:700px){
  .plank{flex-wrap:nowrap;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--rand));padding:4px var(--rand) 10px;scroll-padding:0 var(--rand);scrollbar-width:none}
  .plank::-webkit-scrollbar{display:none}
  .plank figure{scroll-snap-align:start}
}
/* v16, 5 november: drie prijzen (het keurmerk van Weborama staat nu bij rich media, .keurmerk hieronder) */
.erkenning{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin-bottom:24px}
.erkenning li{display:grid;gap:8px;align-content:start;border-top:2px solid var(--inkt);padding-top:18px}
.erkenning img{height:32px;width:auto;margin-bottom:6px}
.erkenning__woord{font-size:26px;letter-spacing:calc(-.03em * var(--krap) + var(--lucht));line-height:32px;margin-bottom:6px}
.erkenning b{font-size:20px;font-weight:500;letter-spacing:calc(-.02em * var(--krap) + var(--lucht))}
.erkenning__tekst{color:var(--fg-2);font-size:15px;line-height:1.45}
.merknaam{white-space:nowrap}
/* ronde 18: de bron bij elke prijs, het keurmerk in onze vormen, en klein dat Weborama nu Adways heet */
.erkenning__bron{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;line-height:1.4}
.erkenning__bron a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .2s}
.erkenning__bron a:is(:hover,:focus-visible){color:var(--or-tekst)}
.erkenning__keur{display:block;height:32px;width:auto;margin-bottom:6px;color:var(--fg);overflow:visible}
/* v14, 23 oktober (Frank): het logo van Adways staat als een woord achter Weborama heet nu: een spatie ervoor, de
   x-hoogte van het logo (77 van 151 px) gelijk aan die van de letter (0,517 em), en de basislijn van het logo (de y
   zakt 34 van 151 px onder de rest) op die van de tekst. Het logo is de link naar de lijst van Adways; de klikvlakte
   is 25 px hoog (padding), zonder dat de regel hoger wordt. */
.erkenning__nu{display:block;font-size:13px;line-height:1.3;color:var(--fg-2)}
.erkenning__adways{display:inline-block;width:3.523em;height:1em;vertical-align:-.225em;background:currentColor;
  -webkit-mask:url(/assets/img/awards/adways.png) left center/contain no-repeat;mask:url(/assets/img/awards/adways.png) left center/contain no-repeat}
.erkenning__adways-link{color:inherit;padding:6px 0;transition:color .2s}
.erkenning__adways-link:is(:hover,:focus-visible){color:var(--or-tekst)}
/* v16, 5 november (Frank: Weborama Certified is niet iets wat je wint): het keurmerk als los blokje bij rich media
   (basis.keurmerk): het vaantje met de twee woorden, ernaast waarvoor en dat Weborama nu Adways heet. Bovenaan
   /expertise/rich-media/ onder de knoppen, op de home onder de tags van Rich media (en in de lijst op een telefoon). */
.keurmerk{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;margin:0}
.keurmerk .erkenning__keur{grid-row:1 / span 2;margin:0}
.keurmerk .erkenning__tekst{font-size:14px;line-height:1.35;color:var(--fg-2)}
.keurmerk .erkenning__nu{font-size:13px}
.ex-kop__keur,.apto__keur{margin-top:clamp(22px,2.4vw,34px)}
.mk__keur{margin:0 0 18px}
/* in de smalle lijst op een telefoon: het vaantje boven de twee regels */
.mk-mob__keur{margin-top:8px;grid-template-columns:minmax(0,1fr);row-gap:6px}
.mk-mob__keur .erkenning__keur{grid-row:auto}
.staan{margin:clamp(50px,6vw,100px) 0;display:grid;gap:12px}
/* v14, 23 oktober: nog één quote (die van Leroy Westhoff), over de hele breedte met een regel van hooguit 22 em */
.over-quotes{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,60px)}
.over-quotes .quote blockquote p{max-width:22em}

/* ---------- kennis-pagina ------------------------------------------------- */
.kennis-kop .filters{margin-top:30px}
.kennis-lijst{padding-top:0!important}
.kennis-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(30px,3vw,48px) clamp(16px,2vw,30px)}
.kennis-raster li[hidden]{display:none}
.kennis-lijst__noot{margin-top:30px;font-size:14px;color:var(--fg-2)}

/* ---------- start een project --------------------------------------------- */
.start-kop{padding-bottom:clamp(30px,4vw,60px)!important}
.start{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(30px,5vw,100px);padding:0 var(--rand) clamp(80px,10vw,160px);align-items:start}
.start__form{display:grid;gap:clamp(36px,5vw,64px);max-width:860px}
.stap-f{border:0;margin:0;padding:0;min-width:0;display:grid;gap:18px}
.stap-f legend{display:flex;align-items:center;gap:16px;font-size:clamp(28px,2.8vw,48px);line-height:1;letter-spacing:calc(-.035em * var(--krap) + var(--lucht));padding:0;margin-bottom:6px}
.stap-f__nr{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--inkt);display:grid;place-items:center;font-size:17px;letter-spacing:0;transition:background .25s,color .25s,border-color .25s}
.stap-f.is-klaar .stap-f__nr{background:var(--inkt);color:var(--papier)}
.stap-f.is-klaar .stap-f__nr::after{content:"✓";position:absolute;font-size:0}
.stap-f__hint{font-size:16px;color:var(--fg-2);max-width:56ch;margin-top:-6px}
.keuzes{display:flex;flex-wrap:wrap;gap:10px}
.keus{position:relative}
.keus input{position:absolute;opacity:0;inset:0;cursor:pointer}
.keus span{display:inline-flex;align-items:center;min-height:50px;padding:0 20px;border-radius:999px;border:1px solid var(--lijn-2);font-size:17px;transition:background .2s,color .2s,border-color .2s;background:var(--wit)}
.keus input:checked+span{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.keus input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
.keus:hover span{border-color:var(--inkt)}
.kaartkeuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kaartkeus{position:relative}
.kaartkeus input{position:absolute;opacity:0;inset:0;cursor:pointer}
.kaartkeus>span{display:grid;gap:4px;padding:18px 20px;border-radius:16px;border:1px solid var(--lijn-2);background:var(--wit);transition:border-color .2s,box-shadow .2s;min-height:100%}
.kaartkeus b{font-size:20px;letter-spacing:calc(-.02em * var(--krap) + var(--lucht));font-weight:500}
.kaartkeus i{font-style:normal;color:var(--fg-2);font-size:15px}
.kaartkeus input:checked+span{border-color:var(--or);box-shadow:0 0 0 2px var(--or)}
.kaartkeus input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
.kaartkeus:hover>span{border-color:var(--inkt)}
.wanneer{display:grid;gap:16px}
.wanneer__snel{display:flex;flex-wrap:wrap;gap:8px}
.wanneer__snel .chip{min-height:46px;background:var(--wit)}
.wanneer__snel .chip[aria-pressed="true"]{background:var(--inkt)}
.veld{display:grid;gap:8px}
.veld>span{font-size:15px;color:var(--fg-2)}
.veld>span i{font-style:normal;color:var(--fg-3);font-size:13px;margin-left:.3em}
.veld input,.veld textarea{width:100%;border:0;border-bottom:1.5px solid var(--inkt);background:transparent;padding:10px 0;font-size:20px;letter-spacing:calc(-.01em * var(--krap) + var(--lucht));border-radius:0;outline:none}
.veld input:focus,.veld textarea:focus{border-bottom-color:var(--or)}
.veld textarea{resize:vertical;min-height:64px;line-height:1.35}
.veld--datum{max-width:280px}
.veld--groot textarea{font-size:22px}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
.veld--breed{grid-column:1/-1}
.veld [aria-invalid="true"]{border-bottom-color:var(--or)}
.fout{color:var(--or-tekst);font-size:14px}
/* ronde 12: het uploadvlak (upload.js), op /aanleveren/ en bij stap 2 van Start een project */
.upload{position:relative;display:grid;gap:12px}
.upload__hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0}
.upload__veld{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.upload__vlak{display:grid;justify-items:center;gap:8px;padding:clamp(26px,3.4vw,44px) 20px;border:1.5px dashed var(--lijn-2);border-radius:14px;background:var(--vlak);text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s}
.upload__vlak:hover,.upload__vlak.is-erboven{border-color:var(--or);background:color-mix(in srgb,var(--or) 7%,var(--vlak))}
.upload__veld:focus-visible+.upload__vlak{outline:2px solid var(--or);outline-offset:3px}
.upload__icoon svg{display:block;width:40px;height:40px;color:var(--or)}
.upload__tekst{font-size:clamp(18px,1.5vw,22px);line-height:1.3}
.upload__tekst b{font-weight:500}
.upload__tekst u{text-underline-offset:.18em;text-decoration-thickness:1px}
.upload__klein{font-size:13px;line-height:1.4;color:var(--fg-3);max-width:46ch}
.upload__lijst{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.upload__lijst:empty{display:none}
.upload__bestand{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:50px;padding:10px 10px 10px 14px;border:1px solid var(--lijn);border-radius:10px;background:var(--bg);overflow:hidden}
.upload__naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.upload__maat{font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.upload__bestand.is-fout{border-color:var(--or)}
.upload__bestand.is-fout .upload__maat{color:var(--or-tekst);white-space:normal;text-align:right}
.upload__bestand.is-klaar .upload__maat{color:var(--fg)}
.upload__balk{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--or);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .2s linear}
.upload__weg{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--fg-2);cursor:pointer;display:grid;place-items:center}
.upload__weg:hover,.upload__weg:focus-visible{background:var(--lijn);color:var(--fg)}
.upload__weg svg{width:14px;height:14px}
.upload.is-bezig .upload__vlak{opacity:.45;pointer-events:none}
.upload.is-uit .upload__vlak{display:none}
.upload__uit{font-size:16px;line-height:1.4;color:var(--fg-2)}
.upload__uit a{color:var(--fg)}
.rustig .upload__balk{transition:none}
/* het briefingsformulier (pdf) */
.pdf-link{display:inline-flex;align-items:baseline;gap:.45em;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--lijn-2);padding-bottom:1px;transition:border-color .2s}
/* de tekst bepaalt de basislijn (de pijl staat in het midden), zodat '(pdf, invulbaar)' ernaast op dezelfde lijn staat */
.pdf-link svg{width:1em;height:1em;flex:none;align-self:center;color:var(--or)}
.pdf-link:hover,.pdf-link:focus-visible{border-bottom-color:var(--or)}
.start-kop__pdf{margin-top:10px;font-size:18px;color:var(--fg-2)}
.start-kop__pdf>span{white-space:nowrap}   /* (pdf, invulbaar) breekt niet: liever in zijn geheel op de volgende regel */
.start__upload{display:grid;gap:10px;margin-top:10px}
.veld-kop{font-size:15px;color:var(--fg-2)}
.veld-kop i{font-style:normal;color:var(--fg-3);font-size:13px;margin-left:.3em}
/* /aanleveren/ */
.aanl__links{min-width:0;display:grid}
.aanl__privacy{font-size:13px!important;color:var(--fg-3)!important}
.aanl__privacy a{color:inherit}
.aanl__klaar{display:grid;gap:18px;justify-items:start;max-width:860px;padding:clamp(28px,4vw,52px);border:1px solid var(--lijn);border-radius:16px;background:var(--vlak);outline:none}
.aanl__klaar-kop{font-size:clamp(48px,5.4vw,92px);line-height:.92;letter-spacing:calc(-.045em * var(--krap) + var(--lucht));font-weight:500}
.aanl__klaar-tekst{font-size:clamp(19px,1.5vw,24px);line-height:1.3;max-width:40ch}
.aanl__lijst{display:grid;gap:6px;list-style:none;margin:0;padding:0;font-size:15px;color:var(--fg-2)}
.aanl__lijst li{display:grid;grid-template-columns:20px 1fr}
.aanl__lijst li::before{content:"✓";color:var(--or)}
.nodig__lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;list-style:none;margin:clamp(30px,4vw,56px) 0 0;padding:0}
.nodig__item{display:grid;align-content:start;gap:8px;padding:22px 24px 24px;border:1px solid var(--lijn);border-radius:12px;background:var(--vlak)}
.nodig__nr{font-size:13px;color:var(--or-tekst);font-variant-numeric:tabular-nums}
.nodig__item h3{font-size:clamp(20px,1.6vw,24px);line-height:1.15;letter-spacing:calc(-.02em * var(--krap) + var(--lucht));font-weight:500}
.nodig__item p{font-size:16px;line-height:1.45;color:var(--fg-2)}
.nodig__pdf{margin-top:4px}
.nodig__pdf .pdf-link{font-size:15px}
.wanneer__uit{font-size:clamp(22px,2vw,32px);letter-spacing:calc(-.02em * var(--krap) + var(--lucht));line-height:1.15;min-height:1.2em}
.wanneer__uit b{color:var(--or-tekst);font-weight:500}
.formaten-uit:empty{display:none}
.formaten-uit{background:var(--wit);border-radius:16px;padding:18px;box-shadow:0 0 0 1px var(--lijn)}
.start__verstuur{display:grid;gap:12px;justify-items:start;border-top:1px solid var(--lijn);padding-top:30px}
.start__verstuur>p{font-size:15px;color:var(--fg-2)}
/* ronde 15: Liever bellen? onder de knop, als de blokken rechts (Wat er daarna gebeurt, Langskomen); in de kop staat
   alleen nog de download, zoals op Aanleveren */
.start__bel{display:grid;gap:8px;margin-top:22px}
.start__bel p:not(.label){font-size:18px;color:var(--fg-2)}
.start__bel a{color:var(--fg)}
.start__status:empty{display:none}
.start__status a{text-decoration:underline;text-underline-offset:.18em;font-weight:500}
.start__form.is-bezig .start__verstuur .knop{opacity:.6;cursor:progress}
.start__status{color:var(--fg)!important;font-size:17px!important}
.start__zij{position:sticky;top:calc(var(--kop-h) + var(--tl-h) + 20px);display:grid;gap:26px}
.briefing{background:var(--wit);border-radius:20px;padding:24px;box-shadow:0 0 0 1px var(--lijn)}
.briefing .label{margin-bottom:14px}
.briefing__lijst{display:grid}
.briefing__lijst li{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--lijn);font-size:15px;line-height:1.3}
.briefing__lijst span{color:var(--fg-3)}
.briefing__lijst b{font-weight:500;color:var(--fg-3);overflow-wrap:anywhere}
.briefing__lijst li.is-klaar b{color:var(--fg)}
.briefing__lijst li.is-klaar span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--or);margin-right:7px;vertical-align:.08em}
.briefing__balk{height:4px;background:var(--lijn);border-radius:4px;margin-top:14px;overflow:hidden}
.briefing__balk i{display:block;height:100%;width:calc(var(--klaar,0) * 100%);background:var(--or);transition:width .5s var(--ease)}
.daarna ol{display:grid;gap:10px;counter-reset:d;margin-top:12px}
.daarna li{counter-increment:d;display:grid;grid-template-columns:28px 1fr;font-size:16px;line-height:1.35}
.daarna li::before{content:counter(d);width:22px;height:22px;border-radius:50%;border:1px solid var(--lijn-2);display:grid;place-items:center;font-size:12px}
.adres p:last-child{margin-top:8px;font-size:16px}

/* formaten op schaal (start) */
.fmt{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.fmt__vak{display:grid;gap:6px;justify-items:start}
.fmt__vlak{background:color-mix(in srgb,var(--or) 16%,var(--wit));box-shadow:inset 0 0 0 1px var(--or)}
.fmt__vak span{font-size:12px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.fmt__som{flex-basis:100%;font-size:14px;color:var(--fg-2)}

/* ---------- ronde 17: 'Start een project' zweeft onderin, op een telefoon ------ */
.plak{display:none}
@media (max-width:700px){
  .plak{display:block;position:fixed;left:var(--rand);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:90;
    opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .3s var(--ease),transform .45s var(--ease);
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}
  .plak.is-aan{opacity:1;transform:none;pointer-events:auto}
  .rustig .plak{transform:none;transition:opacity .2s linear}
  html.menu-open .plak{opacity:0;pointer-events:none}
  .plak.is-aan.is-weg{opacity:0;transform:translateY(18px);pointer-events:none}   /* v15: niet over een andere knop */
  .plak.op-oranje .knop--or{background:var(--inkt);border-color:var(--inkt);color:var(--papier)}
  body:has(.plak.is-aan) .hulp:not(.is-open){opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}   /* v15: op een telefoon één zwevend element: de knop; het mannetje boven en onderaan de pagina */
}
@media print{.plak{display:none!important}}

/* ---------- bedankt (ronde 17): na Start een project ---------------------- */
.bedankt{padding-top:calc(var(--kop-h) + var(--tl-h) + clamp(40px,7vw,110px))!important;display:grid;gap:22px;justify-items:start}
.bedankt .label{margin-bottom:-4px}
.bedankt__lead{max-width:40ch;font-size:clamp(21px,1.8vw,30px);line-height:1.55;letter-spacing:-.005em;color:var(--fg-2)}
.bedankt__ref,.bedankt__bestanden,.bedankt__voorbeeld{max-width:60ch;font-size:18px;line-height:1.5}
.bedankt__ref b{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.bedankt__bestanden--mis,.bedankt__voorbeeld{padding:14px 18px;border-radius:14px;background:var(--wit);box-shadow:0 0 0 1px var(--lijn)}
.bedankt__bestanden--mis{box-shadow:0 0 0 1px var(--or)}
.bedankt :is(.bedankt__ref,.bedankt__bestanden,.bedankt__voorbeeld) a,.bedankt .daarna a{text-decoration:underline;text-underline-offset:.18em}
.bedankt__rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,70px);width:100%;max-width:980px;margin-top:clamp(12px,2vw,30px);
  padding-top:28px;border-top:1px solid var(--lijn)}
.bedankt__rij .daarna>p:not(.label){margin-top:12px;font-size:16px;line-height:1.55;max-width:42ch}
.bedankt .knoppen{margin-top:clamp(10px,2vw,28px)}
@media (max-width:700px){.bedankt__rij{grid-template-columns:1fr}}

/* ---------- 404 ----------------------------------------------------------- */
.niets{min-height:80svh;display:grid;align-content:center;gap:24px}
.niets p:not(.label){font-size:22px;max-width:40ch;color:var(--fg-2)}
/* ---------- hero: de kop komt binnen met css (v14, ronde 20) ---------------
   Vanaf de eerste verf, zonder op het script te wachten (eerst wachtte alles op home.js, de letter en het oranje): de
   regels uit hun masker (zoals expo.out, 1,1 s, na elkaar), dan het oogje, de knoppen, de uitleg en de voet. Zolang het
   oranje van een overgang of van binnenkomen er is (html[data-overgang]), wacht het; het vangnet (na 3,5 s) laat het
   hoe dan ook lopen. De intro (hero__onder) staat er meteen. */
@keyframes hero-regel{from{transform:translateY(140%)}}
@keyframes hero-rest{from{opacity:0;transform:translateY(16px)}}
.js:not(.rustig) .hero__regel>span{animation:hero-regel 1.1s cubic-bezier(.16,1,.3,1) both}
.js:not(.rustig) .hero__regel:nth-child(2)>span{animation-delay:.1s}
.js:not(.rustig) .hero__regel:nth-child(3)>span{animation-delay:.2s}
.js:not(.rustig) :is(.hero .knoppen,.hero__uitleg,.hero__voet){animation:hero-rest .9s cubic-bezier(.33,1,.68,1) .4s both}   /* v16: het oogje bouwt op (beweging.js) */
.js:not(.rustig) .hero .knoppen{animation-delay:.48s}
.js:not(.rustig) .hero__uitleg{animation-delay:.56s}
.js:not(.rustig) .hero__voet{animation-delay:.64s}
html[data-overgang]:not(.vangnet) :is(.hero__regel>span,.hero .knoppen,.hero__uitleg,.hero__voet){animation-play-state:paused}
.vangnet [data-split]{opacity:1!important}

/* ---------- beweging (v7) ------------------------------------------------
   De bewegingslaag (beweging.js) zet deze klassen; zonder JavaScript of bij
   'minder beweging' doen ze niets. */
.drijf{display:block;width:100%;height:100%}
.js:not(.rustig) .trek-onder{border-bottom-color:transparent!important;background-image:linear-gradient(var(--trek-k),var(--trek-k));background-repeat:no-repeat;
  background-position:0 100%;background-size:0% var(--trek-h,1px);transition:background-size 1.3s var(--ease)}
.js:not(.rustig) .trek-boven{border-top-color:transparent!important;background-image:linear-gradient(var(--trek-k),var(--trek-k));background-repeat:no-repeat;
  background-position:0 0;background-size:0% var(--trek-h,1px);transition:background-size 1.3s var(--ease)}
.js:not(.rustig) .trek-onder.is-getrokken,.js:not(.rustig) .trek-boven.is-getrokken{background-size:100% var(--trek-h,1px)}
/* v16, 5 november: de werkwijze stap voor stap (beweging.js). Over de grijze lijn loopt oranje tot --stap-p (de scroll);
   een gehaalde stap (is-bereikt) vult zijn rondje en komt op kleur, de stap waar de lijn nu is (is-hier) is oranje. Alleen
   op een scherm: op papier staan de stappen zoals altijd. Tot dan trok de lijn zich één keer (stappen--trek). */
@media screen{
  .stappen--scroll::before{background:linear-gradient(90deg,var(--or) calc(var(--stap-p,0) * 100%),var(--lijn-2) 0)}
  .stappen--scroll .stap__nr{transition:background-color .35s,color .35s,box-shadow .35s,transform .5s var(--ease)}
  .stappen--scroll .stap:not(.is-bereikt) .stap__nr{background:var(--papier);color:var(--fg-3);box-shadow:inset 0 0 0 1.5px var(--lijn-2)}
  .stappen--scroll .is-hier .stap__nr{background:var(--or);color:var(--inkt);transform:scale(1.15)}
  /* de tekst in een gedempte kleur, niet met opacity: die van de kop is van SplitText (data-split) */
  .stappen--scroll .stap>:not(.stap__nr){transition:color .5s var(--ease),border-color .5s var(--ease),transform .7s var(--ease)}
  .stappen--scroll .stap:not(.is-bereikt)>:not(.stap__nr){color:color-mix(in srgb,var(--inkt) 32%,transparent);transform:translateX(-12px)}
  .stappen--scroll .stap:not(.is-bereikt) .stap__ai{border-color:var(--lijn-2)}
  .stappen--scroll .stap:not(.is-bereikt) .stap__ai .label{color:inherit}
}
@media screen and (max-width:1100px){
  .stappen--scroll::before{background:linear-gradient(180deg,var(--or) calc(var(--stap-p,0) * 100%),var(--lijn-2) 0)}
}
.is-sleepbaar{cursor:grab}
.is-sleepbaar.is-slepen{cursor:grabbing;user-select:none}
.is-sleepbaar.is-slepen a{pointer-events:none}

/* ---------- paginaovergangen (overgang.js) --------------------------------
   Een pagina waar je via een overgang binnenkomt, begint oranje: de regel in de
   kop zet html.overgang-in, overgang.js neemt het over. Lukt dat niet, dan gaat
   het oranje na 2,5 s vanzelf weg. */
html.overgang-in::after{content:"";position:fixed;inset:0;z-index:2147483000;background:#FB4E29;animation:overgang-vangnet .2s linear 2.5s forwards}
@keyframes overgang-vangnet{to{opacity:0;visibility:hidden}}
/* binnenkomen zonder overgang (v14): de pagina begint oranje met het logo klein in het midden, en gaat dan open in
   banners vanuit het midden, met het logo erop (overgang.js). Zwarte blokken en een wit woord op oranje, ook in donker.
   Maten uit het beeldmerk (168,5 × 143,3) en het woordmerk (1643 × 209): --hb is de hoogte van het logo. Tot v13 was
   het de Volloper (het logo als laadbalk, met een percentage). Komt overgang.js niet, dan gaat het oranje na 2,5 s weg
   (vangnet), anders houdt overgang.js het bij (html.laden-js) */
.laden{display:none}
html[data-overgang="laden"] .laden{position:fixed;inset:0;z-index:2147483002;display:grid;place-items:center;pointer-events:none;
  animation:overgang-vangnet .2s linear 2.5s forwards}
html.laden-js[data-overgang="laden"] .laden,html.laden-js.overgang-in::after{animation:none}
.laden__logo{--hb:min(40px,9.6vw);position:relative;display:block;width:calc(var(--hb) * 6.1902);height:var(--hb)}
.laden__blok{position:absolute;background:#1D1D1B}
.laden__blok:nth-child(1){left:0;top:0;width:calc(var(--hb) * .49965);height:calc(var(--hb) * .9993)}
.laden__blok:nth-child(2){left:calc(var(--hb) * .61619);top:0;width:calc(var(--hb) * .50314);height:calc(var(--hb) * .4208)}
.laden__blok:nth-child(3){left:calc(var(--hb) * .61619);top:calc(var(--hb) * .53873);width:calc(var(--hb) * .55967);height:calc(var(--hb) * .46127)}
.laden__woord{position:absolute;left:calc(var(--hb) * 1.56781);top:calc(var(--hb) * .206);width:calc(var(--hb) * 4.62241);height:calc(var(--hb) * .588);overflow:hidden}
.laden__woord :is(img,svg){display:block;width:100%;height:100%;color:#FFFFFF}
/* het woord rolt erin (0,55 s) terwijl het logo er staat; daarna gaat het oranje open (overgang.js) */
@keyframes laden-woord{from{transform:translateY(112%)}}
html.js:not(.rustig)[data-overgang="laden"] .laden__woord :is(img,svg){animation:laden-woord .55s cubic-bezier(.16,1,.3,1) .06s both}
.laden.is-weg{opacity:0;transition:opacity .14s linear}
.overgang{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:2147483001;pointer-events:none}
canvas.overgang{display:block}
.overgang--doek{display:flex;align-items:flex-end;padding:0 var(--rand) clamp(40px,9vh,100px);background:var(--or);transform:translateY(100%)}
.overgang__naam{overflow:hidden;padding:.1em .08em .27em;margin:-.1em -.08em -.27em;font-size:clamp(52px,9vw,190px);line-height:.92;letter-spacing:calc(-.045em * var(--krap) + var(--lucht));font-weight:500;color:var(--inkt)}
.overgang__naam span{display:inline-block;transform:translateY(115%)}
.overgang__naam i{font-style:normal;color:var(--papier)}
.overgang-kiezer{position:fixed;left:14px;bottom:14px;z-index:300;display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:calc(100vw - 28px);padding:6px 6px 6px 14px;
  border-radius:24px;background:var(--inkt);color:var(--papier);font-size:13px;line-height:1;box-shadow:0 12px 30px -12px rgba(0,0,0,.45)}
.overgang-kiezer .label{color:rgba(245,245,245,.6);margin-right:6px}
.overgang-kiezer button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;transition:background .2s,color .2s}
.overgang-kiezer button b{font-weight:500;opacity:.55}
.overgang-kiezer button:hover{background:rgba(245,245,245,.12)}
.overgang-kiezer button[aria-pressed="true"]{background:var(--or);color:var(--inkt)}

/* ---------- onthullen ---------------------------------------------------- */
.js:not(.rustig) [data-onthul]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js:not(.rustig) [data-onthul].is-in{opacity:1;transform:none}
.js:not(.rustig) [data-split]:not(.is-gesplitst){opacity:0}
.titel .regel{display:block;overflow:hidden;padding:.1em .08em .27em;margin:-.1em -.08em -.27em}
/* koppen die regel voor regel binnenkomen (SplitText-masker): ruimte voor onderstokken (g, j, p), accenten en overhang.
   Het masker knipt anders de onderkant van de letters af. Ronde 11: die ruimte komt uit een clip-path die buiten het
   masker valt, niet meer uit padding met een negatieve marge: die marges vielen tussen twee regels samen, zodat elke
   volgende regel .1em te laag stond en na de animatie (als de kop weer gewone tekst wordt) een tik omhoog sprong. */
.regel-tekst-mask{padding:0!important;margin:0!important;overflow:visible!important;clip-path:inset(-.1em -.08em -.27em -.08em)}
.heel{white-space:nowrap}   /* een woord met een streepje breekt in een kop niet (koppen_heel in basis.py) */
.titel .regel>span{display:inline-block}

/* ---------- rustig: geen beweging ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- breedtes -------------------------------------------------------- */
/* het logo met de drie uitingen (706 px) past naast de kop vanaf 1280 px; smaller staat het eronder, op ware grootte */
@media (max-width:1279px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;min-height:0}
  .hero__tekst{grid-row:1}
  .hero__logo{grid-column:1;grid-row:2;align-items:flex-start;min-width:0;width:100%}
  .hero__voet{grid-row:3}
  .hero__tekst{max-width:none}
  .hero__h1{--hk:clamp(44px,calc((var(--vb,100vw) - 2 * var(--rand)) / var(--kb,4.62)),150px)}
  .hero__onder{font-size:clamp(19px,2.2vw,28px)}
}
@media (max-width:1240px){
  .ai__producten{grid-template-columns:1fr 1fr}
  .ai__producten .ai__product:last-child{grid-column:1/-1}
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gebouwd{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1100px){
  .vragen{grid-template-columns:minmax(0,1fr)}
  .vragen--prl{grid-template-rows:none}
  .vragen--prl .vragen__rechts,.vragen__prl{grid-column:auto;grid-row:auto}
  .vragen__prl{position:static}
  .ai__uitleg{grid-template-columns:minmax(0,1fr)}
  .ai__bouw{grid-template-columns:minmax(0,1fr);align-content:center;gap:24px}
  .ai__beeld{min-height:0;height:330px}
  .ai__veel-vak{width:min(100%,360px)}
  .detail-kop{grid-template-columns:minmax(0,1fr)}
  .detail-kop__werk{position:relative;top:0;order:-1}
  .case-twee,.over-twee{grid-template-columns:minmax(0,1fr)}
  .vier,.cijfers,.erkenning{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stappen{grid-template-columns:minmax(0,1fr);gap:0}
  .stappen::before{left:15px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .stap{padding:0 0 28px 56px}
  .stap__nr{top:0}
  .start{grid-template-columns:minmax(0,1fr)}
  .start__zij{position:relative;top:0}
  .feiten--rij{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:999px){
  .kop__nav{visibility:hidden}
  .kop__menu{display:inline-flex}
  .kop__balk{justify-content:space-between}
  .nav__lade,.nav__waas{display:none}
  .nav-index__in{display:block;padding-top:calc(var(--kop-h) + 16px)}
  .nav-index__groepen{display:block}
  .nav-index__item{display:block;border-bottom:1px solid rgba(245,245,245,.12)}
  .nav-index__groep{width:100%;padding:.18em 0;font-size:clamp(38px,10vw,64px)}
  .nav-index__nr{margin-top:.75em}
  .nav-index .nav__paneel{display:none;margin:0;padding:6px 0 24px 0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .nav-index .nav__paneel.is-aan{display:grid}
  .nav-index .nav__link--groot{font-size:clamp(24px,6.4vw,32px)}
  .nav-index__onder{margin-top:32px}
  .nav-index__deel:last-child{margin-left:0}
}
@media (max-width:900px){
  :root{--kop-h:66px;--tl-h:34px}
  /* ronde 17: de naam van een stip niet weg (display:none), maar onzichtbaar: zo houdt de link zijn naam voor schermlezers */
  .tl__label{width:1px;height:1px;padding:0!important;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;
    border:0;background:none!important;box-shadow:none!important}
  .tl__punt{width:8px;height:8px;margin-left:-4px;top:6.5px}
  .tl__stops li:last-child .tl__punt{right:6px}
  .cases__lijst{grid-template-columns:minmax(0,1fr)}
  .ck--groot{grid-template-columns:minmax(0,1fr)}
  .zes{grid-template-columns:1fr 1fr}
  .moeilijk,.misgaat,.over-quotes{grid-template-columns:minmax(0,1fr)}
  .samenvatting,.credits{grid-template-columns:minmax(0,1fr);gap:10px}
  .over-feiten{grid-template-columns:minmax(0,1fr);gap:20px}
  .kennis__knoppen{display:none}
  .sl__kies{grid-template-columns:44px 26px minmax(0,1fr) 34%}
  .sl__duim{width:44px}
}
@media (max-width:700px){
  body{font-size:17px}
  .kop__cta{display:none}
  .merk:not(.merk--groot){--m:26px}
  .hero__voet{flex-direction:column;align-items:flex-start}
  .cert__lijst{gap:8px 16px}
  .zin__tekst{font-size:clamp(30px,8.6vw,54px)}
  .ai__producten{grid-template-columns:minmax(0,1fr)}
  .ai__kolommen{grid-template-columns:minmax(0,1fr)}
  .duo,.vier,.cijfers,.erkenning,.zes{grid-template-columns:minmax(0,1fr)}
  .kaartkeuzes,.velden{grid-template-columns:minmax(0,1fr)}
  .team{grid-template-columns:1fr 1fr}
  .tegels{columns:1;--gat:30px}
  .js .tegels[data-tegels]{margin:0}
  .tg__meta{font-size:13px}
  .tg__maat em{display:none}
  .tg__meta b{font-size:15px}
  .tegels.tegels--rij{flex-wrap:nowrap;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--rand));padding:4px var(--rand) 14px;scroll-padding:0 var(--rand);scrollbar-width:none}
  .tegels.tegels--rij::-webkit-scrollbar{display:none}
  .tegels.tegels--rij{align-items:flex-start}
  .tegels--rij>.tg{scroll-snap-align:start;max-width:calc(100vw - 2 * var(--rand))}
  .tegels--rij>.tg[style*="--h:600"]{order:-1}
  .detail-meer__nav{flex-direction:column}
  .detail-meer__nav a{max-width:none}
  .vr summary{grid-template-columns:28px 1fr 24px}
  .vr__a{padding:0 0 22px 40px}
  .feiten{grid-template-columns:minmax(0,1fr)}
  .briefing__lijst li{grid-template-columns:96px 1fr}
  .tekening{--veld-h:460px}
}
@media (max-width:420px){
  .team{grid-template-columns:minmax(0,1fr)}
}
/* EINDE */

/* ---------- smal: wand als veegstrook, logostrip en platforms ------------- */
.wand__veeg{display:none;align-items:center;gap:10px;margin-top:6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.wand__veeg i{width:34px;height:1px;background:currentColor;position:relative}
.wand__veeg i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
@media (max-width:700px){
  .wand{display:flex;align-items:flex-end;justify-items:initial;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--rand));padding:4px var(--rand) 14px;scroll-padding:0 var(--rand);scrollbar-width:none}
  .wand::-webkit-scrollbar{display:none}
  .wand__rij,.wand__stapel{display:contents}
  .wand .raam{scroll-snap-align:start}
  .wand .raam[style*="--h:600"]{order:-1}
  .wand__veeg{display:flex}
  .logos{grid-template-columns:minmax(0,1fr);gap:20px;padding-left:0}
  .logos__kop{max-width:none;padding:0 var(--rand)}
  .logos__rij{--lk:.72;gap:40px;padding-right:40px}
  .maken__live{grid-template-columns:minmax(0,1fr)}
  .maken__rest{grid-column:1}
  .cases__prijzen .erkenning{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .cases__prijzen .erkenning__woord{font-size:22px}
}

/* ==========================================================================
   v10: donker
   ========================================================================== */
/* (v13: het lettertype en de spatiëring liggen vast, zie boven; de breedte ook, zie onderaan) */

/* ---------- donker ----------
   Donker draait het palet om: papier wordt inkt (de pagina #1D1D1B), inkt wordt papier (de tekst).
   Wit (kaarten, panelen) wordt een tint lichter dan de pagina. Oranje blijft oranje, met inkt erop.
   Wat al donker of oranje was, houdt het palet van licht en ziet er dus hetzelfde uit: de oranje
   banden, de donkere banden en de voet (die zijn nu dieper zwart dan de pagina), het menu op een
   telefoon, de kop boven zo'n band, en de toestellen en schermen in de pagina (blok, iPad, telefoon,
   abri, previewer, storingsbord). */
:root:is([data-modus="donker"],[data-scroll="donker"]){
  --papier:#1D1D1B;--wit:#272725;--offwit:#2E2D2A;--inkt:#F2F2EF;--grijs:#A4A39C;--steen:#77766F;--or-tekst:#FF6240;
  --lijn:rgba(242,242,239,.14);--lijn-2:rgba(242,242,239,.3);--tl-rest-0:rgba(242,242,239,.22);
  color-scheme:dark}
/* ronde 15, een test op de home: vanaf Echt werk op ware grootte wordt de pagina zwart met witte tekst, bij Wanneer bel
   je ons? weer licht (home.js zet data-scroll="donker" op html; uit met ?zwart=uit). Het is het palet van donker, met
   een overgang: de kleuren zijn geregistreerd (@property), zodat de browser ertussen kan tweenen; alleen tijdens de
   wissel (html.scroll-tween), niet bij de knop in de kop */
@property --papier{syntax:'<color>';inherits:true;initial-value:#F5F5F5}
@property --wit{syntax:'<color>';inherits:true;initial-value:#FFFFFF}
@property --offwit{syntax:'<color>';inherits:true;initial-value:#EFEBE6}
@property --inkt{syntax:'<color>';inherits:true;initial-value:#1D1D1B}
@property --grijs{syntax:'<color>';inherits:true;initial-value:#6E6E67}
@property --steen{syntax:'<color>';inherits:true;initial-value:#9C9B95}
@property --lijn{syntax:'<color>';inherits:true;initial-value:rgba(29,29,27,.13)}
@property --lijn-2{syntax:'<color>';inherits:true;initial-value:rgba(29,29,27,.28)}
@property --tl-rest-0{syntax:'<color>';inherits:true;initial-value:#D8D8D5}
:root.scroll-tween{transition:--papier .6s var(--ease-io),--wit .6s var(--ease-io),--offwit .6s var(--ease-io),--inkt .6s var(--ease-io),
  --grijs .6s var(--ease-io),--steen .6s var(--ease-io),--lijn .6s var(--ease-io),--lijn-2 .6s var(--ease-io),--tl-rest-0 .6s var(--ease-io)}
/* 12 november: de achtergrond zelf tweent niet meer, hij bouwt op in banners (home.js, overgang.js BBOpbouw): een canvas
   over het hele scherm, áchter de inhoud (de pagina-achtergrond komt van body; de secties zijn doorzichtig) */
.opbouw{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
/* met de banners tweenen tekst en lijnen lineair: dan zijn ze sneller halverwege, leesbaar op zwart en op licht */
:root.scroll-opbouw{transition-timing-function:linear}
/* het palet van licht, voor wat al donker of oranje was (de banden zetten hun eigen --bg en --fg) */
:root:is([data-modus="donker"],[data-scroll="donker"]) :is(.thema-oranje,.thema-donker){
  --papier:#F5F5F5;--wit:#FFFFFF;--offwit:#EFEBE6;--inkt:#1D1D1B;--zwart:#111110;--grijs:#6E6E67;--steen:#9C9B95;color-scheme:light}
:root:is([data-modus="donker"],[data-scroll="donker"]) .thema-donker{--or-tekst:var(--or)}
:root:is([data-modus="donker"],[data-scroll="donker"]) .thema-oranje{--or-tekst:var(--inkt)}
:root:is([data-modus="donker"],[data-scroll="donker"]) .thema-donker{color-scheme:dark}
/* eilanden die precies zo blijven als in licht, ook hun lijnen en grijzen */
:root:is([data-modus="donker"],[data-scroll="donker"]) :is(.nav-index,.kop[data-onder="donker"]:not(.nav-open),.kop[data-onder="oranje"]:not(.nav-open),.mk__kubus,.rtb-bord,.rtb-pv,
  .overgang-kiezer,.ipad,.tel__toestel,.scherm__kast,.ex-video),:root:is([data-modus="donker"],[data-scroll="donker"]).menu-open .kop{
  --papier:#F5F5F5;--wit:#FFFFFF;--offwit:#EFEBE6;--inkt:#1D1D1B;--zwart:#111110;--grijs:#6E6E67;--steen:#9C9B95;
  --bg:#F5F5F5;--fg:#1D1D1B;--fg-2:color-mix(in srgb,#1D1D1B 74%,#F5F5F5);--fg-3:color-mix(in srgb,#1D1D1B 64%,#F5F5F5);--or-tekst:#C43210;
  --lijn:rgba(29,29,27,.13);--lijn-2:rgba(29,29,27,.28);--vlak:#FFFFFF;--tl-rest-0:#D8D8D5}
/* de kop boven een oranje band: tekst in inkt, zoals in licht (de kleur erft anders van de pagina) */
:root:is([data-modus="donker"],[data-scroll="donker"]) .kop[data-onder="oranje"]:not(.nav-open) .kop__balk{color:#1D1D1B}
/* het gekozen vak als pil (telefoon) is in donker licht: het nummer in een dieper oranje */
@media (max-width:860px){:root:is([data-modus="donker"],[data-scroll="donker"]) .mk__vak[aria-selected="true"] .mk__nr{color:#C7381A}}   /* v14: alleen waar het een pil is */
/* uitingen en demo's zijn licht, wat er ook omheen staat */
:root:is([data-modus="donker"],[data-scroll="donker"]) iframe{color-scheme:light}
/* de logo's van de merken en de prijzen zijn inkt: in donker omgekeerd, zonder kleur bij hover */
:root:is([data-modus="donker"],[data-scroll="donker"]) .logos__rij img{filter:grayscale(1) invert(1) contrast(1.05);opacity:.7}
:root:is([data-modus="donker"],[data-scroll="donker"]) .logos__rij li:hover img{filter:grayscale(1) invert(1);opacity:1}
/* Ben (v14): het lichtblauw werd in grijs te licht (in donker te donker); eerst donkerder maken */
.logos__rij img[src$="/ben.svg"]{filter:grayscale(1) brightness(.42) contrast(1.1)}
:root:is([data-modus="donker"],[data-scroll="donker"]) .logos__rij img[src$="/ben.svg"]{filter:grayscale(1) brightness(.42) invert(1) contrast(1.05)}
:root:is([data-modus="donker"],[data-scroll="donker"]) .logos__rij li:hover img[src$="/ben.svg"]{filter:grayscale(1) brightness(.42) invert(1)}
:root:is([data-modus="donker"],[data-scroll="donker"]) .erkenning img{filter:invert(1)}
:root:is([data-modus="donker"],[data-scroll="donker"]) .thema-oranje .erkenning img{filter:none}
/* de tekening: een donker veld met lichte puntjes */
:root:is([data-modus="donker"],[data-scroll="donker"]) .tekening__veld{background-image:radial-gradient(circle,rgba(242,242,239,.14) .8px,transparent 1.2px)}
:root:is([data-modus="donker"],[data-scroll="donker"]) .vlak--overgang::before{background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(242,242,239,.1) 9px 10px)}
:root:is([data-modus="donker"],[data-scroll="donker"]) .sl__duim{background-image:linear-gradient(45deg,rgba(242,242,239,.07) 25%,transparent 25% 75%,rgba(242,242,239,.07) 75%),linear-gradient(45deg,rgba(242,242,239,.07) 25%,transparent 25% 75%,rgba(242,242,239,.07) 75%)}
/* toestellen op een donkere pagina: een dunne rand, anders verdwijnt de rand van de telefoon en het scherm */
:root:is([data-modus="donker"],[data-scroll="donker"]) .tel__toestel{box-shadow:0 0 0 1.5px rgba(242,242,239,.16),0 30px 60px -30px rgba(0,0,0,.7)}
:root:is([data-modus="donker"],[data-scroll="donker"]) .scherm__kast{box-shadow:0 0 0 1.5px rgba(242,242,239,.12),0 26px 50px -30px rgba(0,0,0,.7)}
/* schaduwen: in donker iets dieper */
:root:is([data-modus="donker"],[data-scroll="donker"]) .podium__in{box-shadow:0 30px 70px -30px rgba(0,0,0,.7),0 0 0 1px var(--lijn)}

/* ---------- de knop voor licht en donker, in de kop ---------- */
.kop__modus{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 26%,transparent);
  transition:border-color .2s}
.kop__modus:is(:hover,:focus-visible){border-color:currentColor}
.kop__modus svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ease),opacity .3s}
.modus__zon{opacity:0;transform:rotate(-90deg) scale(.5)}
:root[data-modus="donker"] .modus__zon{opacity:1;transform:none}
:root[data-modus="donker"] .modus__maan{opacity:0;transform:rotate(90deg) scale(.5)}
.no-js .kop__modus{display:none}
/* ronde 11: de taalknop (EN op een Nederlandse pagina, NL op een Engelse), in de vorm van de knop voor licht en donker */
.kop__taal{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 26%,transparent);
  font-size:12.5px;font-weight:500;letter-spacing:.06em;line-height:1;text-decoration:none;color:inherit;transition:border-color .2s}
.kop__taal:is(:hover,:focus-visible){border-color:currentColor}
.kop__taal+.kop__modus{margin-left:calc(8px - clamp(14px,2vw,32px))}   /* de twee ronde knoppen dicht bij elkaar */
.rustig .kop__modus svg{transition:opacity .2s}



/* ==========================================================================
   v13: de typografie, het contactblok en de voet van de Odido-case
   (BannerBazen-3.0/case-odido-iphone-duo/index.html), en een maximale breedte van 1600 px
   ========================================================================== */
/* ---------- koppen: 65 Medium met de spatiëring van de case (--krap 1, zie :root) ----------
   Regelafstand zoals de case: .94 voor een paginakop, .98 voor een sectiekop, 1,12 voor een uitspraak.
   De maten blijven die van v12. */
html .titel{line-height:.94}
html :is(.titel--m,.pagina-expertise .sk>.titel,.pagina-dae .sk>.titel){line-height:.98}
html :is(.ai-kop__lead,.samenvatting__tekst,.quote:not(.quote--groot):not(.quote--klein) blockquote p,.wanneer__uit){line-height:1.12}
/* wat Medium was en blijft (de body is nu Roman): koppen die geen h1 tot h4 zijn, namen, cijfers, uitspraken,
   knoppen, tabs, labels en het menu */
html :is(.zin__tekst,.ai__frame,.ai-kop__lead,.samenvatting__tekst,.quote blockquote p,.is-p__citaat,.persoon__beeld span,.live__titel,
  .stap-f legend,.stap-f__nr,.rtb-wissel,.erkenning__woord,.ex-verder__naam,.ex-platform__naam,.volgende-case__link>span:last-child,
  .vr summary,.vr__v,.kk__titel,.baan__titel,.wanneer__uit,.pijl-link,.cert__naam,
  .knop,.chip,.vr__tabs button,.familie__tabs button,.keus span,.kk__lees,.live__knop,.knop-uitleg,.kaart__knop,.sl__naam,
  .nav__knop,.kop__menu,.nav__label,.nav__link,.nav-index__groep,.nav-index__nr,.nav-index__hst a,.nav-index__contact a,.tl__label,
  .mk__tags li,.baan__soort,.live__formaat,.raam__hint,.rtb-abri figcaption,.tg__maat i,.schuif,.tel__uit span,.rect__label,
  .leeg__kader i,.al__label,.feiten dt,.credits dt,.rtb-pv__logo,.aanleveren-inline,.detail-meer__nav a,
  .vr__nr,.stap__nr,.mk__nr,.deel__nr,.ex-kaart__nr,.rt-nr,.rt__subnr,.ballon){font-weight:500}
html .sl__naam small{font-weight:400}
/* kleine tekst in de knoppen en het menu zoals in de case: de knop zonder spatiëring, het menu op -.005em
   (Neue Haas Display staat klein al krap) */
html :is(.knop,.chip,.kop__cta){letter-spacing:0}
html :is(.nav__knop,.nav__link:not(.nav__link--groot),.kop__menu,.nav-index__hst a){letter-spacing:-.005em}

/* ---------- leestekst: 55 Roman (de body, regelafstand 1,5) ----------
   Intro's zoals de lead in de case: 1,55 en -.005em. Lopende tekst ook op 1,55. */
html :is(.sk__intro,.werk-kop__intro,.kennis-kop__lead,.start-kop__lead,.over-kop__lead,.case-kop__lead,.cases-kop__intro,.detail-kop__lead,
  .ex-kop__lead,.dae-kop__lead p,.apto__lead,.hero__onder,.rt__slot p,.ai__tekst,.leeg__tekst,.niets p:not(.label),.lopend p,
  .pr-kop__lead,.pr-case__tekst,.pr-probeer__lead,.pr-groep__intro,.pr-uk__tekst){line-height:1.55;letter-spacing:-.005em}
html :is(.vr__a p,.moeilijk li,.fase__tekst>p:last-child,.dae-wie__groep p,.ck__tekst>p:not(.label):not(.ck__lees),.dae-dienst p,.ai__product p:not(.label),
  .set__tekst,.mk__tekst p,.apto__tekst,.apto__situatie>p:not(.label),.stap p,.ex-kaart p,.feed__regels li,.kaart__tekst,.tel__uitleg,
  .ex-platform p,.ex-verder__tekst,.rm-werk__punten p,.delen p,.vier p:not(.label),.gh-schuif__noten span:last-child,.misgaat p,.ex-erkenning,
  .stappen__noot,.al__bel>p){line-height:1.55}

/* ---------- het contactblok: de opmaak van de case, de tekst en de knoppen van de pagina ----------
   Oogje, kop (max 13 tekens breed), de tekst als de lead in de case, dan de knoppen. Op de achtergrond van de
   pagina, direct boven de voet. De lege takeover op rich media blijft zijn eigen afsluiting. */
main>section.cb{padding-top:clamp(96px,11vw,160px);padding-bottom:0}
/* na een sectie op dezelfde achtergrond is de ondermarge van die sectie al de witruimte van de case
   (zoals daar: de hoofdstukken hebben geen ondermarge, het contactblok wel een bovenmarge) */
main>:not([data-thema]):not(.thema-oranje):not(.thema-donker)+section.cb:not([data-thema]){padding-top:0}
.cb__oog{margin-bottom:18px;font-size:11.5px;line-height:1.2;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.cb__titel{max-width:17ch;font-size:clamp(40px,5.4vw,76px);line-height:.98;font-weight:500;letter-spacing:-.04em;text-wrap:balance}   /* 11 november: 17ch (was 13), anders stond campagne? of planning? alleen op de laatste regel */
.cb__tekst{margin-top:clamp(20px,2vw,26px);max-width:46ch;display:grid;gap:12px}
.cb__tekst p{font-size:clamp(16px,1.3vw,19px);line-height:1.55;letter-spacing:-.005em;color:var(--fg-2)}
.cb__vraag b{font-weight:500;color:var(--fg)}
/* de rij is ook .knoppen: naast een knop blijft ruimte voor de cirkel die er bij hover uit komt */
.cb__rij{display:flex;flex-wrap:wrap;gap:12px 10px;align-items:center;margin-top:34px}
.cb__noot{margin-top:18px;max-width:60ch;font-size:13px;line-height:1.5;color:var(--fg-2)}
.cb__mail{font-size:clamp(18px,1.6vw,22px);color:var(--fg-2);text-decoration:none;transition:color .2s}
.cb__mail:hover{color:var(--fg)}

/* ---------- de voet: de footer van de case ----------
   Een lijn, vier kolommen (Services, Bureau, Contact, Volg ons) en de regel eronder. Op de achtergrond van de
   pagina, in de kolom van de inhoud. Klein grijs in --fg-2 (de --fg-3 van de case haalt geen 4,5 : 1). */
/* de ruimte boven de voet is padding, geen marge: op een donkere voet (AI) is hij dan ook donker */
.voet{padding:clamp(80px,10vw,140px) var(--rand) 0}
/* boven de lijn weer het grote logo en We own the screen. (v12), in de letter van de case */
.voet__boven{--vm:clamp(48px,6vw,90px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:clamp(40px,5vw,72px)}
.merk--groot{--m:var(--vm,clamp(48px,6vw,90px))}
.voet .merk{color:var(--fg)}
/* ronde 15: We own the screen. even groot als het woord in het logo, op dezelfde basislijn. De B van het woordmerk is
   .4849 × --m hoog en de hoofdletter van de Haas .719em, dus de letter is .6744 × --m. De basislijn van het woord ligt
   .187 × --m boven de onderkant van het logo, die van de zin .1665em boven de onderkant van zijn regel: het verschil
   is de marge eronder (.066 × --m, nagemeten). Zo staan ze naast elkaar op één lijn, en even breed */
.voet__slogan{font-size:calc(var(--vm) * .6744);line-height:1;letter-spacing:-.035em;font-weight:500;margin-bottom:calc(var(--vm) * .066)}
.voet__kolommen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:60px 0 36px;border-top:1px solid var(--lijn)}
.voet__kop{margin-bottom:14px;font-size:11.5px;line-height:1.2;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.voet__kolommen a{display:block;width:fit-content;padding:3px 0;font-size:15px;line-height:1.5;color:var(--fg-2);text-decoration:none;transition:color .2s}
.voet__kolommen a:hover{color:var(--fg)}
/* v14, 20 oktober (Frank: doe daar de icons): Volg ons als een rij iconen uit het oude thema, in de ronde knop van de kop
   (zoals EN en licht/donker); 40 px om aan te tikken */
.voet__social{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,40px);justify-content:start;gap:8px;padding-top:2px}
@media (max-width:700px){.voet__social{gap:6px}}   /* op een telefoon krimpen de knoppen een beetje, zodat ze op één rij blijven */
.voet__kolommen .voet__social a{display:grid;place-items:center;width:100%;aspect-ratio:1;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 26%,transparent);transition:color .2s,border-color .2s}
.voet__kolommen .voet__social a:is(:hover,:focus-visible){color:var(--fg);border-color:currentColor}
.voet__icoon{width:18px;height:18px}
.voet__onder{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-bottom:40px;font-size:13px;line-height:1.5;color:var(--fg-2)}
.voet__onder a{display:inline-flex;align-items:center;min-height:24px;text-decoration:none;transition:color .2s}   /* v14: minstens 24 px om aan te tikken */
.voet__onder a:hover{color:var(--fg)}
.voet__jur{white-space:nowrap}   /* 11 november: Privacy, Cookies en Voorwaarden blijven samen, nooit Voorwaarden alleen op een regel */
@media (max-width:980px){.voet__kolommen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- de breedte: nooit breder dan 1600 px ----------
   Tekst en beeld max 1600, de marges erbuiten; vlakken lopen door tot de rand van het scherm. (Tot v13 kon de proef
   ook 1600 inclusief de marges of alles binnen 1600 kiezen; v14: de proef is weg, dit is de breedte.)
   --vb is de breedte van het venster zonder schuifbalk (site.js). */
:root{--max-b:1600px;--rand:max(clamp(20px,4.2vw,72px),calc((var(--vb,100vw) - var(--max-b)) / 2))}

/* ---------- ronde 16: de vitrine (b_vitrine.py, vitrine.js) ---------------------------------------------
   De cases als een stapel casepagina's: elk blad is het begin van zijn pagina (duo.css): het oogje met merk en jaar, de
   diensten als pillen, de kop in drie regels met de grijze derde, de film en de cijfers. Met script liggen de bladen op
   elkaar (--p: de plek in de stapel, 0 ligt boven; de volgende twee steken er een randje boven uit). Het bovenste blad
   bouwt op als een banner: de regels uit hun masker, de film van onder, de rest erachteraan. Zonder script staan de
   bladen onder elkaar; bij minder beweging staat alles meteen en wisselen ze zonder vlucht. */
.vt{--vt-stap:clamp(9px,1.05vw,16px);--vt-r:22px;position:relative}
.vt__stapel{display:grid;gap:clamp(20px,2.4vw,36px)}
.vt__kaart{--fg:var(--inkt);--fg-2:color-mix(in srgb,var(--inkt) 74%,var(--papier));--fg-3:color-mix(in srgb,var(--inkt) 64%,var(--papier));
  --lijn:color-mix(in srgb,var(--inkt) 13%,transparent);--lijn-2:color-mix(in srgb,var(--inkt) 28%,transparent);
  --streep:var(--or);--pen:var(--or);--focus:var(--or);--bg:var(--papier);
  position:relative;display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-areas:"boven boven" "tekst film" "cijfers cijfers";
  column-gap:clamp(28px,4vw,72px);row-gap:clamp(18px,2.1vw,32px);padding:clamp(20px,3vw,44px);border-radius:var(--vt-r);
  background:var(--papier);color:var(--inkt)}
.vt .vt__kaart .punt:not(.punt--wit){color:var(--or)}
.vt__boven{grid-area:boven;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.vt__oog{font-size:11.5px;line-height:1.2;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.vt__tags{display:flex;flex-wrap:wrap;gap:6px}
.vt__tag{padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--inkt) 6%,transparent);color:var(--fg-2);font-size:11.5px;line-height:1.2;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.vt__tekst{grid-area:tekst;display:flex;flex-direction:column;min-width:0}
.vt__titel{font-size:clamp(34px,4.3vw,70px);line-height:.94;font-weight:500;letter-spacing:calc(-.045em * var(--krap) + var(--lucht))}
.vt__titel a{display:block;color:inherit;text-decoration:none;-webkit-user-drag:none}
.vt__titel a:focus-visible{outline-offset:6px}
/* elke regel in zijn eigen masker, met ruimte voor de staart van een g of j, en (12 november, Firefox) .08em links en
   rechts: de koppen staan op -.045em, de laatste letter van een volle regel liep anders net buiten het masker */
.vt__r{display:block;overflow:hidden;padding:0 .08em .1em;margin:0 -.08em -.1em}
.vt__r>span{display:block}
.vt__r--grijs{color:color-mix(in srgb,var(--inkt) 52%,var(--papier))}
.vt__lead{margin-top:clamp(18px,2vw,28px);max-width:40ch;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:var(--fg-2)}
.vt__lees{margin-top:auto;padding-top:24px}
.vt__film{grid-area:film;position:relative;display:block;align-self:start;aspect-ratio:2/1;border-radius:4px;overflow:hidden;background:#000;color:#fff;-webkit-user-drag:none}
.vt__beeld{position:absolute;inset:0;display:block}
.vt__beeld :is(img,video){width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.2s var(--ease)}
/* v16, 5 november (Frank: bij de iPhone Duo wordt de copy net ongelukkig afgesneden, bovenin dat hallo): de film is
   YouTube 16:9 en heeft tekst boven (Hallo.) en onder (de balk van Odido): hier de hele film, 16:9, en het label linksboven,
   waar het niets van de film bedekt. Tot dan 2:1 met object-position 50% 78%. */
.vt__kaart[data-slug="odido-iphone-duo"] .vt__film{aspect-ratio:16/9}
.vt__kaart[data-slug="odido-iphone-duo"] .vt__label{top:12px;bottom:auto}
@media (hover:hover) and (pointer:fine){.vt__kaart.is-voor .vt__film:hover .vt__beeld :is(img,video){transform:scale(1.035)}}
.vt__label{position:absolute;left:14px;bottom:12px;z-index:2;max-width:calc(100% - 28px);padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12.5px;line-height:1.3;color:#fff}
.vt__cijfers{grid-area:cijfers;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--lijn)}
.vt__cijfers li{padding:16px 18px 0 0}
.vt__cijfers b{display:block;font-size:clamp(30px,3.1vw,50px);line-height:1;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.vt__cijfers span{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--fg-2)}

/* de balk: de index (de namen, met een lijn die volloopt zolang de case voor ligt), de teller en de knoppen */
.vt__balk{display:flex;align-items:center;gap:16px 26px;margin-top:clamp(22px,2.4vw,34px)}
.vt__index{display:flex;flex:1;min-width:0;gap:clamp(10px,1.4vw,22px)}
.vt__index li{flex:1;min-width:0}
.vt__index button{position:relative;display:flex;align-items:baseline;gap:8px;width:100%;padding:14px 0 10px;text-align:left;font-size:14px;line-height:1.2;
  color:var(--fg-2);white-space:nowrap;transition:color .3s}
.vt__index button:hover,.vt__index button[aria-current="true"]{color:var(--fg)}
.vt__tnr{font-size:11.5px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.vt__tnaam{min-width:0;overflow:hidden;text-overflow:ellipsis}
.vt__index i{position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:color-mix(in srgb,var(--fg) 24%,transparent);overflow:hidden}
.vt__index i::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:0 50%;transform:scaleX(0)}
.vt__index button[aria-current="true"] i::after{transform:scaleX(var(--v,1))}
.vt__teller{display:none;margin:0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--fg-2)}
.vt__teller span{color:var(--fg)}
.vt__knoppen{display:flex;flex:none;gap:8px}
.vt__ico{width:16px;height:16px}
.vt__ico-speel,.vt__pauze[aria-pressed="true"] .vt__ico-pauze{display:none}
.vt__pauze[aria-pressed="true"] .vt__ico-speel{display:block}
html:not(.js) .vt__balk,.vt__pauze[hidden]{display:none}

/* met script: een stapel */
.js .vt__stapel{gap:0;padding-top:calc(var(--vt-stap) * 2);touch-action:pan-y;-webkit-user-select:none;user-select:none}
.js .vt__kaart{--d:min(var(--p,0),2);grid-area:1/1;z-index:calc(20 - var(--p,0));transform-origin:50% 0;
  transform:translate3d(0,calc(var(--d) * var(--vt-stap) * -1),0) scale(calc(1 - var(--d) * .034));
  transition:transform .8s var(--ease-io),opacity .45s,background-color .8s,box-shadow .8s;box-shadow:0 26px 50px -34px rgba(0,0,0,.45)}
.js .vt__kaart[data-p="1"]{background:color-mix(in srgb,var(--papier) 93%,var(--inkt))}
.js .vt__kaart[data-p="2"]{background:color-mix(in srgb,var(--papier) 86%,var(--inkt))}
.js .vt__kaart[data-diep]{opacity:0;visibility:hidden;transition:transform .8s var(--ease-io),opacity .3s,visibility 0s .3s}
.js .vt__kaart:not(.is-voor){pointer-events:none}
.js .vt__kaart.is-sleep{transition:none;cursor:grabbing}
.js .vt__kaart.is-terug{opacity:0;transition:none}
.vt__kaart.is-stil,.vt__kaart.is-stil *{transition:none!important}
/* het blad dat boven komt, bouwt op: de regels uit hun masker, de film van onder, de rest erachteraan */
.js:not(.rustig) .vt__kaart .vt__r>span{transform:translate3d(0,112%,0);transition:transform .95s var(--ease) calc(.2s + var(--r) * .085s)}
.js:not(.rustig) .vt__kaart :is(.vt__boven,.vt__lead,.vt__lees,.vt__cijfers li){opacity:0;transform:translate3d(0,14px,0);transition:opacity .6s,transform .9s var(--ease)}
.js:not(.rustig) .vt__kaart .vt__film{clip-path:inset(100% 0 0 0 round 4px);transition:clip-path 1s var(--ease-io) .12s}
.js:not(.rustig) .vt__kaart .vt__beeld{transform:scale(1.14);transition:transform 1.7s var(--ease) .12s}
.js:not(.rustig) .vt.is-binnen .vt__kaart.is-voor .vt__r>span,
.js:not(.rustig) .vt.is-binnen .vt__kaart.is-voor :is(.vt__boven,.vt__lead,.vt__lees,.vt__cijfers li),
.js:not(.rustig) .vt.is-binnen .vt__kaart.is-voor .vt__beeld{opacity:1;transform:none}
.js:not(.rustig) .vt.is-binnen .vt__kaart.is-voor .vt__film{clip-path:inset(0 0 0 0 round 4px)}
.js:not(.rustig) .vt.is-binnen .vt__kaart.is-voor .vt__boven{transition-delay:.1s}
.js:not(.rustig) .vt.is-binnen .vt__kaart.is-voor .vt__lead{transition-delay:.42s}
.js:not(.rustig) .vt.is-binnen .vt__kaart.is-voor .vt__lees{transition-delay:.52s}
.js:not(.rustig) .vt.is-binnen .vt__kaart.is-voor .vt__cijfers li{transition-delay:calc(.5s + var(--c,0) * .07s)}
.js .vt__kaart.is-voor .vt__film{cursor:pointer}
/* de vlucht gaat tot de rand van het oranje vlak */
.cases--vitrine{overflow-x:clip}

@media (max-width:999px){
  .vt__kaart{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* v14, ronde 19: de namen blijven (eerst alleen 01 tot 06): de index wordt een rij om te vegen */
  .vt__index{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .vt__index::-webkit-scrollbar{display:none}
  .vt__index li{flex:none}
  .vt__index button{width:auto;padding-right:4px}
}
@media (max-width:700px){
  .vt{--vt-r:16px}
  .vt__kaart{grid-template-columns:minmax(0,1fr);grid-template-areas:"boven" "film" "tekst" "cijfers";padding:18px;row-gap:18px}
  .vt__titel{font-size:clamp(30px,8.4vw,40px)}
  .vt__lees{padding-top:18px}
  .vt__cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vt__cijfers li:nth-child(n+3){display:none}
  .vt__balk{flex-wrap:wrap;gap:12px 16px}
  .vt__index{flex:1 1 100%;margin-inline:calc(var(--rand) * -1);padding-inline:var(--rand)}
  .vt__knoppen{margin-left:auto}
}

/* ---------- ronde 16: de prijzen net boven het contactblok (Frank; ze stonden in de cases) ----------
   Een label en de vier prijzen op een rij, zoals ze in de cases stonden, nu op de pagina. Het contactblok erna
   houdt geen eigen ruimte erboven (site.css: een blok zonder thema ervoor), dus de ruimte zit hier onder. */
main>section.prijzen{padding-top:0;padding-bottom:clamp(72px,8vw,128px)}
.prijzen__kop{margin-bottom:clamp(18px,2vw,26px)}
.prijzen .erkenning{margin-bottom:0}
@media (max-width:700px){
  .prijzen .erkenning{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .prijzen .erkenning__woord{font-size:22px}
}
.js .vt__kaart.is-stil{pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .js:not(.rustig) .vt__kaart.is-voor .vt__film,.js:not(.rustig) .vt.is-sleept .vt__stapel,.js:not(.rustig) .vt.is-sleept .vt__stapel *{cursor:none}
}

/* ---------- ronde 17: smalle telefoons (320 tot 380 px): de kop past, het menu blijft heel ------------
   (onderaan, zodat het wint van de regels voor 700 px en van .kop__taal en .kop__modus)
   Daarboven staat er 'Menu' naast de streepjes; hier alleen de streepjes (het woord blijft voor schermlezers). */
@media (max-width:380px){
  .kop__menu{padding:0;min-width:44px;justify-content:flex-end}
  .kop__menu .nav__rol{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:340px){
  .kop__balk{gap:10px}
  .merk:not(.merk--groot){--m:23px}
  .kop__taal,.kop__modus{width:36px;height:36px}
  .kop__taal+.kop__modus{margin-left:-4px}
}

/* ---------- v14: de korte briefing (b_kort.py, kort.js) ---------------------------------------------------
   Op /digital-advertising-experts/ (meteen onder de kop) en /contact/. Links de kop, de link naar de uitgebreide
   briefing en Liever bellen?; rechts vijf velden: naam, mail, bedrijf, wat en wanneer. Smal onder elkaar. */
.kort{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"kop form" "zij form";
  column-gap:clamp(32px,5vw,96px);align-items:start}
.kort__kop{grid-area:kop}
.kort__form{grid-area:form}
.kort__zij{grid-area:zij}
.kort__kop .sk{margin-bottom:clamp(22px,2.6vw,36px)}
.kort__meer{display:grid;gap:6px;justify-items:start;font-size:17px;line-height:1.4;color:var(--fg-2);max-width:40ch}
.kort__meer .pijl-link{color:var(--fg)}
.kort__bel{display:grid;gap:8px;margin-top:clamp(24px,3vw,40px)}
.kort__bel p:not(.label){font-size:18px;color:var(--fg-2)}
.kort__bel a{color:var(--fg)}
.kort__form{display:grid;gap:clamp(28px,3vw,40px);min-width:0}
.kort__groep{border:0;padding:0;margin:0;min-width:0}
.kort__groep legend{padding:0;margin-bottom:14px}
.kort .keus span{min-height:46px;padding:0 18px;font-size:16px}
.kort__verstuur{display:grid;gap:12px;justify-items:start;border-top:1px solid var(--lijn);padding-top:clamp(22px,2.4vw,30px)}
.kort__noot{font-size:15px;line-height:1.45;color:var(--fg-2);max-width:56ch}
.kort__noot a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.kort__form.is-bezig .kort__verstuur .knop{opacity:.6;cursor:progress}
.pagina-contact .kort{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin-bottom:clamp(48px,6vw,90px)}
/* v15, 25 oktober (Frank: "die quote staat daar erg ongelukkig"): de quote stond vast onder de link naar de uitgebreide
   briefing, tussen die link en Liever bellen?. Nu staan die twee bij elkaar en staat de quote onderaan de kolom, gelijk met
   het eind van het formulier, naast Verstuur. Smal (één kolom) staat hij na Liever bellen?. */
.kort__zij{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start}
.kort__zij .kort__bel{margin-bottom:clamp(36px,4vw,56px)}
.kort__zij .kort__quote{margin:auto 0 0}
@media (max-width:960px){.kort{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"kop" "form" "zij";row-gap:0}
  .kort__zij{margin-top:clamp(36px,6vw,56px)}}
@media (max-width:700px){.kort .velden{grid-template-columns:minmax(0,1fr)}}

/* ---------- v14, ronde 20: binnenkomen met css (beweging.js) ---------------------------------------------
   beweging.js zet de klassen als het element in de buurt is en is-in als het in beeld komt; daarna gaan de klassen er
   weer af (dan geldt de eigen stijl van het element, ook bij hover). Eerst deed GSAP dit per element, met een
   ScrollTrigger elk. Easing: zoals expo.out. */
.js:not(.rustig) .bw-rij{opacity:0;transform:translate3d(0,var(--bw-y,46px),0)}
.js:not(.rustig) .bw-rij.is-in{opacity:1;transform:none;transition:opacity .95s cubic-bezier(.16,1,.3,1) var(--bw-d,0ms),transform .95s cubic-bezier(.16,1,.3,1) var(--bw-d,0ms)}
.js:not(.rustig) .bw-foto{clip-path:inset(100% 0 0 0)}
.js:not(.rustig) .bw-foto .bw-media{transform:scale(1.22)}
.js:not(.rustig) .bw-foto--klein .bw-media{transform:scale(1.12)}
.js:not(.rustig) .bw-foto.is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.15s cubic-bezier(.16,1,.3,1) var(--bw-d,0ms)}
.js:not(.rustig) .bw-foto.is-in .bw-media{transform:none;transition:transform 1.6s cubic-bezier(.16,1,.3,1) var(--bw-d,0ms)}
/* het beeld in een casekader drijft mee (alleen groot, met een muis): een fractie groter, zodat er nooit een rand komt */
@media (min-width:1101px) and (hover:hover) and (pointer:fine){.js:not(.rustig) .drijf--drijft{transform:scale(1.08)}}

/* ---------- v14, ronde 20: op een telefoon rekent de browser alleen aan wat in de buurt is ----------------
   De home is lang (zo'n 3.000 elementen); content-visibility laat de browser de secties ver onder het beeld overslaan
   (opmaak, stijl en verf), tot je er in de buurt komt. De hoogte onthoudt hij (auto), dus de schuifbalk en de ankers
   blijven kloppen. Alleen op een telefoon, alleen onder de eerste twee secties. */
@media (max-width:767px){
  .pagina-home main>section:nth-of-type(n+4),.pagina-home .voet{content-visibility:auto;contain-intrinsic-size:auto 1200px}
}

/* ---------- v14, 23 oktober (Frank): foto's schuiven een klein beetje binnen hun kader mee met de scroll ----------
   Scroll je naar beneden, dan kruipt de foto omhoog in zijn masker. Alleen css (scroll-driven animations): geen
   rekenwerk op de pagina, en de browser doet het naast het scrollen. Het kader is het onderwerp van de tijdlijn (een
   kader met overflow:hidden is zelf een scrollcontainer, dus de foto kan niet zijn eigen view() nemen; in de vitrine is
   dat de film om het beeld); de kennisrij schuift zelf opzij, daar telt de rij. De foto is 8% groter, zodat er nooit een rand komt. Zonder ondersteuning, bij
   minder beweging (ook .rustig) en zonder foto staat alles gewoon stil. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html:not(.rustig) :is(.kk__beeld,.vt__film,.art-beeld,.art-fig--foto,.persoon__beeld--foto,.d-film--beeld,.ex-kaart__beeld){view-timeline:--foto block}
    html:not(.rustig) .kennis__rij{view-timeline:--foto-rij block}
    html:not(.rustig) :is(.kk__beeld,.vt__beeld,.art-beeld,.art-fig--foto,.persoon__beeld--foto,.d-film--beeld,.ex-kaart__beeld) img{
      scale:1.13;animation:foto-schuif linear both;   /* v15 (Frank: iets meer): 6%, en 13% groter zodat er geen rand komt */
     animation-timeline:--foto;animation-range:cover 0% cover 100%}
    html:not(.rustig) .kennis__rij .kk__beeld img{animation-timeline:--foto-rij}
  }
}
@keyframes foto-schuif{from{translate:0 6%}to{translate:0 -6%}}
@media (max-width:700px){body:has(.hulp.is-open) .plak{opacity:0;pointer-events:none}}   /* v15: het hulppaneel gaat voor */

/* ---------- v15: ritme (het voorstel van 24 oktober, basis.sectiekop met vorm) ------------------------------
   Niet elke sectie opent met oogje, reuzenkop en oranje punt. Op de home: hero en Cases de reuzenkop, Contact de
   reuzenkop rechts, en daartussen het label (Wat we maken), de kop op formaat (Echt werk), het gesprek (Wanneer bel je
   ons?), het getal (Vragen) en de rug (Kennis). AI houdt zijn eigen vorm. */

/* g: het label */
.sk--label{margin-bottom:clamp(26px,3vw,40px)}
.sk__kop-label{font-size:clamp(22px,1.9vw,30px);line-height:1.1;font-weight:500;letter-spacing:calc(-.02em * var(--krap) + var(--lucht))}
.sk--label .sk__intro{margin-top:10px;font-size:clamp(17px,1.25vw,20px);max-width:52ch}

/* b: de kop op formaat (728 x 90) */
.sk--formaat{margin-bottom:clamp(36px,4.5vw,64px)}
.sk__formaat{position:relative;width:100%;max-width:728px;aspect-ratio:728/90;display:flex;align-items:center;
  padding:0 clamp(14px,2vw,24px);border:1.5px dashed var(--or);margin-top:34px}
.sk__formaat::before{content:"";position:absolute;left:-1px;right:-1px;top:-12px;height:9px;
  border:1px solid color-mix(in srgb,currentColor 45%,transparent);border-bottom:0}
.sk__maat{position:absolute;left:0;top:-34px;font-size:12px;line-height:1;letter-spacing:.02em;color:var(--fg-2);font-variant-numeric:tabular-nums}
.sk__formaat-kop{font-size:clamp(20px,3.4vw,42px);line-height:1;font-weight:500;letter-spacing:calc(-.04em * var(--krap) + var(--lucht));white-space:nowrap}
@media (max-width:560px){.sk__formaat{aspect-ratio:auto;min-height:72px;padding-block:12px}.sk__formaat-kop{white-space:normal;font-size:24px}}

/* d: het getal */
.sk--getal{margin-bottom:clamp(30px,4vw,56px)}
.sk__getal-rij{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:end}
.sk__getal{font-size:clamp(96px,11vw,200px);line-height:.78;font-weight:500;letter-spacing:calc(-.065em * var(--krap) + var(--lucht));font-variant-numeric:tabular-nums}
.sk__getal-kop{font-size:clamp(24px,2.2vw,36px);line-height:1.04;font-weight:500;letter-spacing:calc(-.03em * var(--krap) + var(--lucht));max-width:12ch}
.sk--getal .sk__intro{margin-top:10px;font-size:clamp(16px,1.2vw,19px);max-width:30ch}
@media (max-width:560px){.sk__getal-rij{grid-template-columns:1fr;gap:10px}}

/* e: op de rug (Kennis): de kop gedraaid in de kantlijn, de rij over de volle breedte */
@media (min-width:1100px){
  .kennis--rug{display:grid;grid-template-columns:clamp(64px,5.4vw,96px) minmax(0,1fr);column-gap:clamp(24px,3vw,48px);align-items:start}
  .kennis--rug .kennis__kop,.kennis--rug .kennis__kop .sk{display:contents}
  .kennis--rug .sk__rug{grid-column:1;grid-row:2;writing-mode:vertical-rl;align-self:start;justify-self:start;
    font-size:clamp(44px,3.8vw,64px);line-height:.9;white-space:nowrap;margin:0}
  .kennis--rug .sk__intro{grid-column:2;grid-row:1;margin:0 0 clamp(24px,3vw,40px);max-width:52ch;font-size:clamp(17px,1.3vw,21px)}
  .kennis--rug .kennis__knoppen{grid-column:2;grid-row:1;justify-self:end;align-self:end}
  .kennis--rug .kennis__rij{grid-column:2;grid-row:2}
  .kennis--rug .kennis__alles{grid-column:2;grid-row:3}
}
@media (max-width:1099px){.sk__rug{font-size:clamp(44px,9vw,80px)}}

/* f: het gesprek (Wanneer bel je ons?) */
.sk--bel .sk__wie{margin-bottom:10px}
.sk__bubbel{display:inline-block;max-width:16ch;text-wrap:balance;padding:.32em .5em .38em;border-radius:.42em .42em .12em .42em;background:var(--inkt);color:var(--papier);
  font-size:clamp(40px,4.6vw,80px);line-height:1;font-weight:500;letter-spacing:calc(-.04em * var(--krap) + var(--lucht))}
.sk__bubbel .punt{color:var(--or)}
.sk__typt{display:flex;gap:6px;width:max-content;margin-top:12px;padding:13px 16px;border:1px solid var(--lijn);border-radius:18px 18px 18px 6px;background:var(--wit)}
.sk__typt i{width:7px;height:7px;border-radius:50%;background:var(--fg-2);opacity:.55}
@media (prefers-reduced-motion:no-preference){.sk__typt i{animation:sk-tik 1.2s 5}   /* v15: vijf keer, dan stil (geen eindeloze animatie buiten beeld) */.sk__typt i:nth-child(2){animation-delay:.2s}.sk__typt i:nth-child(3){animation-delay:.4s}}
@keyframes sk-tik{0%,60%,100%{opacity:.25}30%{opacity:.9}}
.sk--bel .sk__intro{margin-top:22px}

/* a': de reuzenkop rechts (Contact op de home) */
@media (min-width:900px){
  .cb--rechts{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
  .cb--rechts .cb__tekst{justify-items:end}
  .cb--rechts .cb__rij{justify-content:flex-end}
}
.sk__rug{font-weight:500;line-height:.92;letter-spacing:calc(-.045em * var(--krap) + var(--lucht));text-wrap:balance}   /* v15: geen .titel, geen masker (staat gedraaid) */

/* v15: de Merkset op Over ons (b_over.py, teksten.OVER["merkset"]): drie stappen */
.merkset{list-style:none;margin:clamp(22px,2.6vw,34px) 0 clamp(20px,2.4vw,30px);padding:0;display:grid;gap:0;max-width:56ch;counter-reset:ms}
.merkset li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;padding:14px 0;border-top:1px solid var(--lijn);counter-increment:ms}
.merkset li::before{content:counter(ms,decimal-leading-zero);grid-row:1/span 2;font-size:12px;line-height:1.9;color:var(--or-tekst);font-variant-numeric:tabular-nums}
.merkset b{font-weight:500;font-size:clamp(18px,1.4vw,22px);letter-spacing:-.015em}
.merkset span{font-size:16px;line-height:1.5;color:var(--fg-2)}

/* ==========================================================================
   v15, 25 oktober (7): mobiel (Frank: "mobile optimization, aanpassingen voor mobiel")
   Tot 767 px (dezelfde grens als home.js) laat de site een selectie zien en zegt hij dat het meeste het best op een
   groter scherm staat. Wat hier wordt verborgen, staat op een groter scherm gewoon zoals het was.
   ========================================================================== */
.alleen-mobiel,.mk-mob,.rt-mob,.cm,.groot-scherm{display:none}
@media (max-width:767px){
  /* de oranje tijdlijn onder de kop: weg (de kop is daardoor 46 px lager) */
  :root{--tl-h:0px}
  .kop .tl{display:none}

  /* 10 november (mobiel, ronde 1): tekst alleen voor een telefoon, of juist niet; een knop alleen op een telefoon */
  .niet-mobiel{display:none}
  .alleen-mobiel{display:inline}
  .knop.alleen-mobiel{display:inline-flex}
  /* het logo: alleen de korte uitleg (teksten.HERO logo_mobiel), zonder de zin over ware grootte */
  .is-geschaald .hero__klein{display:none}

  /* het logo blijft zoals het was: drie formaten, verkleind (Frank, 25 oktober: "het deed het toch op mobiel") */

  /* wat we maken: geen blok en geen tabs, de vijf specialismen onder elkaar */
  .maken .mk{display:none}
  .maken .sk__intro .alleen-muis,.maken .sk__intro .alleen-tik{display:none}
  .maken .sk__intro .alleen-mobiel{display:inline}
  .mk-mob{display:block;list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
  .mk-mob li{border-bottom:1px solid var(--lijn)}
  .mk-mob__item{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;gap:10px;align-items:start;padding:20px 0;text-decoration:none;color:var(--fg)}
  .mk-mob__nr{padding-top:6px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--or-tekst)}
  .mk-mob__tekst{display:grid;gap:6px}
  .mk-mob__naam{font-size:24px;line-height:1.05;letter-spacing:calc(-.035em * var(--krap) + var(--lucht));font-weight:500}
  .mk-mob__uitleg{font-size:16px;line-height:1.4;color:var(--fg-2)}
  .mk-mob__item .pijl{width:16px;height:16px;margin-top:6px}

  /* echt werk op ware grootte: de formaten onder elkaar in plaats van veegstroken (een te breed formaat schaalt, werk.js) */
  .set .set__rij{flex-direction:column;align-items:flex-start;gap:28px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .set .set__veeg.wand__veeg{display:none}

  /* wanneer bel je ons: de vier routes onder elkaar, zonder de gesprekken */
  .routes .rtp{display:none}
  .rt-mob{display:block}
  .rt-mob__lijst{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--lijn)}
  .rt-mob__route{padding:24px 0 26px;border-bottom:1px solid var(--lijn)}
  .rt-mob__naam{margin-top:10px;font-size:30px;line-height:1.02;letter-spacing:calc(-.04em * var(--krap) + var(--lucht));font-weight:500;text-wrap:balance}
  .rt-mob__tekst{margin-top:12px;font-size:17px;line-height:1.42;color:var(--fg-2)}
  .rt-mob__verder{margin-top:16px;font-size:17px}

  /* geen vitrine en geen AI-hoofdstuk op de home. v16, 5 november (Frank: "recent werk mag weg op mobiel"): Recent werk
     (#werk) ook niet; Bekijk ons werk in de hero gaat dan naar /werk/ (home.js). 10 november: wel twee lichte casekaarten
     na de merken (.cm hieronder), en Cases weer in het menu en de voet */
  .pagina-home .cases,.pagina-home .ai,.pagina-home .werkblok{display:none}
  /* in het menu ook de hoofdstukken Werk, Cases en AI van de home niet; de nummers tellen door zonder gat */
  .pagina-home .nav-index__hst li:has(> a[href="#cases"]),.pagina-home .nav-index__hst li:has(> a[href="#ai"]),
  .pagina-home .nav-index__hst li:has(> a[href="#werk"]){display:none}
  .pagina-home .nav-index__hst{counter-reset:hst}
  .pagina-home .nav-index__hst li:not(:has(> a[href="#cases"],> a[href="#ai"],> a[href="#werk"])) a span{font-size:0}
  .pagina-home .nav-index__hst li:not(:has(> a[href="#cases"],> a[href="#ai"],> a[href="#werk"])) a span::before{counter-increment:hst;content:counter(hst,decimal-leading-zero);font-size:11px}
  /* 10 november (mobiel, ronde 1): Cases staat weer in het menu en in de voet; de losse cases in het menu (Uitgelicht) niet */
  .nav-index li:has(> a[href*="/cases/"]:not([href$="/cases/"])){display:none}
  /* v16, 5 november: een kolom met alleen cases (Uitgelicht bij Werk) valt dan helemaal weg, met zijn label */
  .nav-index .nav__kol:not(:has(> ul > li > a:not([href*="/cases/"]))){display:none}

  /* /werk/ (10 november, mobiel ronde 1): de hele wand als raster van stills in twee kolommen (werk.js, stapelMobiel),
     zestien tegelijk met Meer werk; de filters als rijen die je opzij veegt. Tot dan: tien rectangles en een laptop (25 okt.) */
  .pagina-werk .filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--rand));padding:2px var(--rand);
    scrollbar-width:none}
  .pagina-werk .filters::-webkit-scrollbar{display:none}
  .pagina-werk .filters .chip{flex:none}
  .js .tegels[data-tegels]{column-gap:12px}
  .pagina-werk .tg__link{gap:8px}
  .pagina-werk .tg__meta{font-size:12.5px;line-height:1.3}
  .pagina-werk .tg__meta b{font-size:14px}
  .pagina-werk .tg__meta>span:not(.tg__maat){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pagina-werk .tg__maat{gap:4px;margin-top:2px;font-size:12px}
  .pagina-werk .tg__maat i{font-size:10px;padding:1px 6px}
  .werk-lijst__meer{display:flex;justify-content:center;margin-top:6px}

  /* de home: twee lichte casekaarten na de merken (10 november, mobiel ronde 1; b_home.cases_mobiel) */
  .cm{display:block}
  main>section.cm{padding:40px var(--rand) 60px}
  .cm__kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
  .cm__kop .pijl-link{font-size:15px}
  .cm__lijst{list-style:none;margin:0;padding:0;display:grid;gap:36px}
  .cm__kaart{display:grid;gap:8px;text-decoration:none;color:var(--fg)}
  .cm__beeld{display:block;aspect-ratio:760/342;border-radius:16px;overflow:hidden;background:var(--offwit)}
  .cm__beeld img{display:block;width:100%;height:100%;object-fit:cover}
  .cm__oog{margin-top:6px;font-size:12px;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:var(--fg-2)}
  .cm__titel{font-size:24px;line-height:1.08;letter-spacing:calc(-.03em * var(--krap) + var(--lucht));font-weight:500;text-wrap:balance}
  .cm__tekst{font-size:16px;line-height:1.42;color:var(--fg-2)}
  .cm__lees{display:inline-flex;align-items:center;gap:.4em;font-size:15px;margin-top:2px}
  .cm__lees .pijl{width:14px;height:14px}

  /* rich media: geen takeover (APTO) en geen previewer met de takeovers; de interscroller en de SwipeCubes blijven */
  .pagina-rich .apto__wand,.pagina-rich .apto__uitleg,.pagina-rich .apto__situatie,.pagina-rich #live,
  .pagina-rich .apto__intro .knoppen a[href="#live"]{display:none}
  .pagina-rich .apto{margin-top:var(--kop-h)}
  /* het lege takeover-kader om de slotvraag (header en skins in stippellijn) hoort bij de APTO: weg; de vraag blijft */
  .pagina-rich .leeg__kader{display:none}
  .pagina-rich .leeg__in{padding-top:clamp(56px,12vw,80px)}
  .pagina-rich .apto__kolom{width:auto;margin:0;min-height:0;padding:28px var(--rand) 8px;background:none}

  /* gemaakt voor een groot scherm: een kaartje onderin, boven Start een project, één keer per browser (site.js) */
  .groot-scherm:not([hidden]){display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;position:fixed;z-index:95;
    left:12px;right:12px;bottom:calc(100px + env(safe-area-inset-bottom,0px));padding:14px 10px 14px 14px;border-radius:14px;background:#1D1D1B;color:#F5F5F5;
    box-shadow:0 18px 40px -18px rgba(17,17,16,.55),0 0 0 1px rgba(245,245,245,.12);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s var(--ease),transform .45s var(--ease)}
  .groot-scherm.is-aan{opacity:1;transform:none;pointer-events:auto}
  .groot-scherm p{margin:0;font-size:14px;line-height:1.4;color:rgba(245,245,245,.8)}
  .groot-scherm b{display:block;margin-bottom:2px;font-weight:500;color:#F5F5F5}
  .groot-scherm__ic{position:relative;width:26px;height:22px;margin-top:2px}
  .groot-scherm__ic i{position:absolute;border:1.5px solid var(--or);border-radius:3px}
  .groot-scherm__ic i:first-child{left:0;top:0;width:24px;height:16px}
  .groot-scherm__ic i:last-child{right:-2px;bottom:-2px;width:9px;height:14px;background:#1D1D1B}
  .groot-scherm__dicht{width:32px;height:32px;margin:-6px 0 0;display:grid;place-items:center;border-radius:50%;color:#F5F5F5;background:rgba(245,245,245,.1)}
  .groot-scherm__dicht svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
  .rustig .groot-scherm{transition:none}
}