/* xnovo 3.0 · secties die op meer pagina's terugkomen (na basis.css)
   Werk (.w), statement in het vonkvlak (.s), diensten vastgezet (.d), demovenster (.p/.pw), prijs (.r), team (.t).
   Uitgesplitst uit studio2.css + studio3.css (6 okt 2026); volgorde van de regels is bewaard. */

/* ---------------------------------------------------------------- werk: kaarten die stapelen */
.w{background:var(--inkt);color:var(--papier);padding-bottom:12vh}
.w-noot{margin:0 auto;padding:0 var(--rand) 4vh;max-width:44em;text-align:center;color:rgba(244,244,241,.66);font-size:16px}
.w-kaart{position:sticky;top:0;height:100svh;padding:clamp(70px,8vh,96px) var(--rand) clamp(16px,3vh,28px)}
.w-binnen{position:relative;height:100%;border-radius:clamp(18px,2vw,30px);overflow:hidden;background:#0b0b0a;transform-origin:50% 0;will-change:transform}
.w-binnen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.w-binnen::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,17,16,.86) 0%,rgba(18,17,16,0) 46%);pointer-events:none}
.w-dim{position:absolute;inset:0;z-index:3;background:#000;opacity:0;pointer-events:none}
.w-info{position:absolute;z-index:2;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);bottom:clamp(20px,3vw,44px);display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:6px 28px}
.w-nr{grid-column:1 / -1;font-size:14px;color:rgba(244,244,241,.7)}
.w-info h3{grid-column:1 / 3;font:430 clamp(56px,9.5vw,170px)/.86 var(--sans);letter-spacing:-.055em}
.w-info p{grid-column:1 / 3;margin:0;color:rgba(244,244,241,.78)}
.w-info .lnk{grid-column:3;grid-row:2 / 4;align-self:end;justify-self:end}
.w-kaart--jij .w-binnen{background:var(--papier);color:var(--inkt)}
.w-kaart--jij .w-binnen::after{display:none}
.w-jij{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:24px}
.w-jij-kop{margin:0;font:430 var(--groot)/.94 var(--sans);letter-spacing:-.05em;max-width:9em}
.w-jij-klein{margin:0;font-size:16px}

/* ---------------------------------------------------------------- statement: het oranje blok */
.s{background:var(--vonk);color:var(--inkt)}
.s-pin{min-height:100svh;padding:clamp(96px,12vh,140px) var(--rand) clamp(48px,8vh,96px);display:flex;flex-direction:column;justify-content:center;gap:clamp(40px,7vh,88px);overflow:hidden}
.s-groot{font-size:clamp(56px,9vw,160px);line-height:.92;letter-spacing:-.055em}
.s-zoom{display:inline-block;transform-origin:0 60%;will-change:transform}
.s-rest{display:inline-block}
.s-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kol);border-top:1.5px solid var(--inkt)}
.s-stappen li{padding-top:20px;display:flex;flex-direction:column;gap:10px}
.s-stappen span{font:500 15px/1 var(--sans)}
.s-stappen h3{font-size:clamp(24px,2.2vw,34px)}
.s-stappen p{margin:0;color:rgba(18,17,16,.82);max-width:24em}

/* ---------------------------------------------------------------- demovenster */
.p{padding:var(--sectie) var(--rand) 0}
.p-kop{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--kol);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.p-kop h2{grid-column:1 / span 7}.p-kop .lead{grid-column:8 / span 5}
.p-venster{height:min(86vh,820px);border-radius:clamp(18px,2vw,30px);overflow:hidden;background:#EEF2F1;transform-origin:50% 0;will-change:transform}
.p-venster iframe{display:block;width:100%;height:100%;border:0}
.p-onder{margin:16px 0 0;color:var(--steen);font-size:15px}

/* ---------------------------------------------------------------- prijs */
.r{padding:var(--sectie) var(--rand) 0}
.r h2{max-width:12em}
.r-rij{display:grid;grid-template-columns:1fr 1fr;gap:var(--kol);margin-top:clamp(40px,5vw,72px)}
.r-kaart{background:var(--wit);border-radius:28px;padding:14px 30px 34px;display:flex;flex-direction:column;gap:10px;--hairline-plate:#FFFFFF}
.r-fig{margin:0 -16px 4px}
.r-soort{margin:0;font-weight:500;color:var(--steen)}
.r-kaart h3{font-size:clamp(28px,2.6vw,40px)}
.r-kaart p{margin:0}
.r-kaart .lnk{align-self:flex-start;margin-top:14px}

/* ---------------------------------------------------------------- team */
.t{padding:var(--sectie) var(--rand) 0}
.t h2{max-width:13em}
.t-rij{display:grid;grid-template-columns:1fr 1fr;gap:var(--kol);margin-top:clamp(40px,5vw,72px)}
.t-maker{display:flex;flex-direction:column;gap:10px}
.t-maker:nth-child(2){margin-top:clamp(40px,8vw,120px)}
.t-portret{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;display:grid;place-items:center}
.t-portret--m{background:radial-gradient(circle at 50% 62%,var(--gloed),var(--vonk) 55%,#E04A12)}
.t-portret--e{background:radial-gradient(circle at 50% 62%,#A9DCE2,var(--lagune) 55%,#3E8E98)}
.t-portret small{position:absolute;left:18px;bottom:16px;font-size:14px}
.t-maker h3{font-size:clamp(32px,3vw,48px);margin-top:12px}
.t-maker p{margin:0;color:var(--steen)}
.t-maker .lnk{align-self:flex-start;margin-top:4px}

@media (max-width:900px){
  .w-kaart{padding:72px 12px 14px}
  .w-info{grid-template-columns:1fr}
  .w-info h3,.w-info p,.w-info .lnk{grid-column:1;grid-row:auto;justify-self:start}
  .w-info h3{font-size:clamp(48px,14vw,72px)}
  .s-stappen{grid-template-columns:1fr;gap:22px}
  .p-kop{grid-template-columns:1fr}.p-kop h2,.p-kop .lead{grid-column:1 / -1}.p-kop .lead{margin-top:18px}
  .p-venster{height:820px}
  .r-rij,.t-rij{grid-template-columns:1fr}
  .t-maker:nth-child(2){margin-top:0}
}

/* ---------------------------------------------------------------- overgangen: secties met blokken onderin */
.w,.s,.d,.r,.t{position:relative;overflow:clip}
.s-pin{position:relative;z-index:1}

/* ---------------------------------------------------------------- diensten (CoMinVi): vastgezet, het figuur draait door */
.d{background:var(--papier)}
.d-pin{height:100svh;display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:center;gap:var(--kol);padding:90px var(--rand) 40px}
.d-label{margin:0 0 22px;font-size:14px;color:var(--steen)}
.d-lijst{list-style:none;margin:0;padding:0}
.d-lijst li{font:430 clamp(36px,3.6vw,60px)/1.02 var(--sans);letter-spacing:-.045em;color:rgba(18,17,16,.18);transition:color .5s var(--ease-energie);cursor:pointer}
.d-lijst li.is-aan{color:var(--inkt)}
.d-midden{position:relative;aspect-ratio:1;width:100%;max-height:72svh;justify-self:center}
.d-canvas{position:absolute;inset:6%;width:88%;height:88%;display:block}
.d-wijzer{position:absolute;inset:0}
.d-wijzer svg{width:100%;height:100%;overflow:visible}
.d-wijzer circle{fill:none;stroke:rgba(18,17,16,.32);stroke-width:1.4;stroke-dasharray:1.2 5.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.d-wijzer i{position:absolute;inset:0}
.d-wijzer i::before{content:"";position:absolute;left:50%;top:-8px;width:2px;height:18px;margin-left:-1px;background:var(--vonk);border-radius:2px}
.d-rechts{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding:22px 0}
.d-teller{margin:0;align-self:flex-end;font:500 15px/1 var(--sans);color:var(--steen);font-variant-numeric:tabular-nums}
.d-teller span{color:var(--inkt)}
.d-teksten{position:relative;min-height:280px}
.d-tekst{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden}
.d-tekst.is-aan{opacity:1;visibility:visible}
.d-tekst q{font:italic 400 clamp(21px,1.7vw,26px)/1.18 var(--sans);color:var(--vonk-tekst);quotes:"“" "”"}
.d-tekst h3{font:430 clamp(26px,2.2vw,36px)/1.04 var(--sans);letter-spacing:-.035em}
.d-tekst p{margin:0;color:var(--grafiet)}
.d-tekst .lnk{align-self:flex-start;margin-top:4px}


/* ---------------------------------------------------------------- statement: de lijn tekent pas als de zin op zijn plek staat */
.s-stappen{border-top:0;position:relative}
.s-stappen::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--inkt);transform:scaleX(var(--lijn,1));transform-origin:0 50%}
.d-tekst h3,.r-kaart h3,.s-stappen h3{text-wrap:balance}
/* werk: een echte opening */
.w-intro{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--kol);align-items:end;padding:72px var(--rand) clamp(40px,7vh,80px)}
.w-kop{grid-column:1 / span 6;display:flex;flex-direction:column;gap:18px}
.w-label{margin:0;font-size:14px;color:rgba(244,244,241,.6)}
.w-getal{margin:0;display:flex;align-items:flex-end;gap:.18em;font:430 var(--reus)/.8 var(--sans);letter-spacing:-.06em}
.w-getal span{font-size:.24em;line-height:1.02;letter-spacing:-.03em;padding-bottom:.12em}
.w-getal b{font-weight:430}
.w-intro .w-noot{grid-column:8 / span 5;margin:0;padding:0;max-width:none;text-align:left;font-size:clamp(20px,1.7vw,26px);line-height:1.35;letter-spacing:-.015em;color:rgba(244,244,241,.86)}
.p-venster{height:auto;min-height:min(86vh,820px);background:var(--inkt);color:var(--papier);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(32px,5vw,96px);align-items:center;padding:clamp(28px,5vw,80px)}
.r{padding-bottom:calc(var(--blok-h) + 64px)}
/* team: donker, portretten als effen kleurvlakken */
.t{background:var(--inkt);color:var(--papier);padding-bottom:var(--sectie)}
.t-maker p{color:rgba(244,244,241,.66)}
.t-portret--m{background:var(--vonk)}
.t-portret--e{background:var(--lagune)}
.t-portret small{z-index:1;color:var(--inkt);left:20px;bottom:calc(18% + 10px)}
@media (max-width:900px){
  .w-intro{grid-template-columns:1fr;row-gap:14px;padding-top:96px}
  .w-kop,.w-intro .w-noot{grid-column:1}
  .p-venster{grid-template-columns:1fr;padding:22px 14px 14px;min-height:0}
}
/* diensten: het actieve woord krijgt het blok */
.d-lijst li{position:relative;transition:color .5s var(--ease-energie),transform .6s var(--ease-uit)}
.d-lijst li::before{content:"";position:absolute;left:-.42em;top:50%;width:.24em;height:.24em;margin-top:-.1em;background:var(--vonk);transform:scale(0);transition:transform .5s var(--ease-wissel)}
.d-lijst li.is-aan{transform:translateX(.42em)}
.d-lijst li.is-aan::before{transform:scale(1)}
@media (max-width:900px){.d-lijst li.is-aan{transform:none}.d-lijst li::before{display:none}}

/* werk: elk project in een eigen kader, de titel op een effen balk eronder */
.w-binnen{display:flex;flex-direction:column;background:#0E0D0C;border:1px solid rgba(244,244,241,.1)}
.w-binnen::after{display:none}
.w-media{position:relative;flex:1 1 auto;min-height:0;margin:8px 8px 0;border-radius:calc(clamp(18px,2vw,30px) - 8px);overflow:hidden;background:#000}
.w-media video{position:absolute;left:0;width:100%;top:-9%;height:109%;object-fit:cover;object-position:top}
.w-info{position:relative;left:auto;right:auto;bottom:auto;padding:clamp(16px,1.8vw,24px) clamp(18px,2.4vw,36px) clamp(18px,2vw,28px)}
.w-info h3{font-size:clamp(44px,6vw,104px)}
/* prijs: de belofte direct onder de kop */
.r-sub{margin-top:clamp(18px,2vw,28px)}
@media (max-width:900px){
  .w-kaart{height:auto;top:76px;padding:0 var(--rand) 18px}
  .w-media{flex:none;aspect-ratio:16/10}
  .w-info h3{font-size:clamp(40px,12vw,56px)}
  .w-kaart--jij .w-binnen{min-height:64svh}
  .w-getal{font-size:clamp(88px,30vw,140px)}
}
/* een sprong via het menu landt onder de kop */
.w-intro{padding-top:120px}
@media (max-width:900px){.w-intro{padding-top:96px}}
/* werk: elke kaart blijft even liggen voordat de volgende komt */
.w-kaart + .w-kaart{margin-top:30vh}
.w-getal span{font-size:.22em}
@media (max-width:900px){.w-kaart + .w-kaart{margin-top:12vh}}
#werk{scroll-margin-top:36px}
.w-intro{padding-top:56px}
/* ruimte voor de blokken waar tekst onderin staat */
.s{padding-bottom:var(--blok-h)}
.d{padding-bottom:var(--blok-h)}
.t{padding-bottom:calc(var(--blok-h) + 48px)}
@media (max-width:900px){
  .w-intro{padding-top:40px}
  .s,.d{padding-bottom:var(--blok-h)}
  .w-media{aspect-ratio:4/3}
  .w-media video{object-position:50% 0}
}
/* diensten: de zin van de klant is de grote regel */
.d-tekst q{font-size:clamp(32px,2.9vw,50px);line-height:1.04;letter-spacing:-.01em}
.d-tekst h3{font-size:clamp(20px,1.5vw,24px);letter-spacing:-.02em}
.d-teksten{min-height:340px}
/* prijs: rechte hoeken en een hairline, zoals het blok; het bedrag als cijferregel */
.r-kaart{border-radius:0;background:transparent;border:1px solid rgba(18,17,16,.16);padding:22px 28px 30px;--hairline-plate:#F4F4F1}
.r-fig{max-height:210px;overflow:hidden;display:flex;justify-content:center}
.r-fig > *{max-width:340px;margin:0 auto}
.r-prijs{margin:6px 0 0!important;font:430 clamp(40px,4.2vw,68px)/1 var(--sans);letter-spacing:-.045em}
.r-prijs small{font:400 16px/1.3 var(--sans);letter-spacing:0;color:var(--steen)}
.r-prijs .bevestig{font-size:16px;letter-spacing:0;vertical-align:middle}
@media (max-width:900px){
  .w-media{aspect-ratio:16/10}
  .d-tekst q{font-size:26px}
  .d-teksten{min-height:250px}
}
/* minder lege ruimte direct na een blokovergang */
.p,.t{padding-top:clamp(72px,8vw,120px)}
/* team: de trap is de vorm van de kaart zelf */
.t-portret{border-radius:0;clip-path:polygon(0 0,100% 0,100% 82%,90% 82%,90% 88%,80% 88%,80% 94%,70% 94%,70% 100%,0 100%)}
.t-portret small{bottom:16px}
.s{padding-bottom:calc(var(--blok-h) * .6)}
@media (max-width:900px){.s{padding-bottom:calc(var(--blok-h) * .6)}}
/* de grote koppen blijven duidelijk kleiner dan de H1 */
.s-groot{font-size:clamp(48px,6.6vw,120px)}
.w-info h3{font-size:clamp(44px,5.2vw,92px)}
/* één letter: nadruk met gewicht */
.s-wit{font-weight:640;color:var(--inkt)}
.d-tekst q{font:430 clamp(28px,2.4vw,40px)/1.08 var(--sans);letter-spacing:-.03em;color:var(--vonk-tekst)}
.t-portret > span{font:500 clamp(160px,19vw,320px)/1 var(--sans);letter-spacing:-.07em;color:rgba(18,17,16,.9)}
/* werk: kleiner, het komt niet schermvullend op je af */
.w-kaart{padding:15vh 12vw 9vh}
.w-kaart + .w-kaart{margin-top:22vh}
.w-info h3{font-size:clamp(40px,4.2vw,76px)}
@media (max-width:900px){
  .w-kaart{padding:0 var(--rand) 18px}
  .w-kaart + .w-kaart{margin-top:12vh}
  .d-tekst q{font-size:24px}
  .t-portret > span{font-size:clamp(140px,40vw,200px)}
}
.s-groot{font-size:clamp(46px,6vw,112px)}

/* ---------------------------------------------------------------- demovenster: de demo in een venster op een geschilderd vlak (Cursor) */
.p-venster{display:block;height:auto;min-height:0;padding:clamp(18px,5vw,80px);border-radius:clamp(18px,2vw,30px);overflow:hidden;position:relative;
  background:radial-gradient(55% 70% at 18% 28%,rgba(199,227,75,.55),transparent 70%),radial-gradient(60% 75% at 88% 78%,rgba(95,180,190,.75),transparent 72%),radial-gradient(38% 48% at 74% 12%,rgba(255,100,33,.38),transparent 70%),radial-gradient(70% 60% at 40% 100%,rgba(244,244,241,.35),transparent 70%),#6F948F}
.p-venster::before{content:"";position:absolute;inset:0;background:url(../beeld/noise.avif) 0 0/240px;opacity:.22;mix-blend-mode:overlay;pointer-events:none}
.pw{position:relative;max-width:1180px;margin:0 auto;background:var(--papier);border-radius:12px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 90px -30px rgba(18,17,16,.55),0 0 0 1px rgba(18,17,16,.12)}
.pw-balk{display:flex;align-items:center;gap:14px;height:42px;padding:0 14px;background:#EDEDE9;border-bottom:1px solid rgba(18,17,16,.1);font-size:13px}
.pw-dots{display:flex;gap:6px}.pw-dots i{width:10px;height:10px;border-radius:50%;background:rgba(18,17,16,.16)}
.pw-titel{font-weight:600}
.pw-label{margin-left:auto;font:500 12px/1 var(--sans);color:var(--steen);border:1px solid rgba(18,17,16,.14);border-radius:999px;padding:5px 10px}
.pw-lijf{display:grid;grid-template-columns:minmax(240px,300px) 1fr}
.pw-zij{display:flex;flex-direction:column;gap:22px;padding:18px 16px;border-right:1px solid rgba(18,17,16,.1);overflow:auto}
.pw-kop{margin:0;font-size:13px;color:var(--steen)}
.pw-demos{list-style:none;margin:-12px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pw-demos button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border:0;border-radius:9px;background:transparent;text-align:left;cursor:pointer;transition:background .3s var(--ease-energie)}
.pw-demos button:hover{background:#EDEDE9}
.pw-demos button[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 1px rgba(18,17,16,.12)}
.pw-demos b{font:600 14.5px/1.25 var(--sans)}.pw-demos span{font-size:13px;color:var(--steen)}
.pw-stappen{list-style:none;margin:0;padding:0;border-top:1px solid rgba(18,17,16,.1)}
.pw-stappen li{display:flex;gap:12px;padding:10px 2px;border-bottom:1px solid rgba(18,17,16,.1);font-size:14px;color:var(--steen);transition:color .3s var(--ease-energie)}
.pw-stappen b{font-weight:500;font-variant-numeric:tabular-nums}
.pw-stappen li.is-aan{color:var(--inkt);font-weight:600}.pw-stappen li.is-aan b{color:var(--vonk-tekst)}
.pw-stappen li.is-klaar{color:var(--inkt)}
.pw-scherm{position:relative;min-width:0;background:var(--nevel)}
.pw-scherm iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:900px){
  .p-venster{padding:14px 10px}
  .pw-lijf{grid-template-columns:1fr;height:auto}
  .pw-zij{border-right:0;border-bottom:1px solid rgba(18,17,16,.1);gap:14px;padding:14px 12px}
  .pw-demos{flex-direction:row;overflow-x:auto;margin-top:-6px;scrollbar-width:none}
  .pw-demos li{flex:none}
  .pw-demos span,.pw-stappen{display:none}
  .pw-scherm{height:720px}
  .pw-label{display:none}
}
.pw{color:var(--inkt)}
/* voorbeeldfoto: een rustige kaart zoals een bestand in een app */
.pw-foto{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.pw-foto figure{position:relative;margin:0;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(18,17,16,.1)}
.pw-foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;cursor:grab;transition:transform .6s var(--ease-uit)}
.pw-foto img:active{cursor:grabbing}
.pw-foto figure:hover img{transform:scale(1.03)}
.pw-foto figcaption{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:6px;background:rgba(244,244,241,.92);font:500 11.5px/1 var(--sans);color:var(--inkt)}
.pw-foto-knop{display:flex;align-items:center;justify-content:space-between;gap:10px;height:40px;padding:0 14px;border:0;border-radius:9px;background:var(--inkt);color:var(--papier);font:600 13.5px/1 var(--sans);cursor:pointer;transition:background .3s var(--ease-energie)}
.pw-foto-knop i{font-style:normal;transition:transform .5s var(--ease-uit)}
.pw-foto-knop:hover i{transform:translateX(3px)}
.pw-sleep{margin:-2px 0 0;font-size:12.5px;color:var(--steen);text-align:center}
.pw-foto.is-gebruikt .pw-foto-knop{background:#fff;color:var(--inkt);box-shadow:0 0 0 1px rgba(18,17,16,.14)}
.pw-foto.is-gebruikt .pw-foto-knop i{color:var(--vonk-tekst)}
@media (max-width:900px){
  .pw-foto{margin-top:0;display:grid;grid-template-columns:88px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:6px;align-items:center}
  .pw-foto .pw-kop{grid-column:1 / -1}
  .pw-foto figure{grid-row:2}
  .pw-foto figcaption,.pw-sleep{display:none}
  .pw-foto-knop{grid-row:2}
}
/* zijbalk past altijd in het venster */
/* het venster groeit mee met de demo (die meldt zijn hoogte, basis.js), nooit met de schermhoogte: anders kapt hij af op een laag scherm (10 nov) */
@media (min-width:901px){.pw-scherm{height:740px}}
.pw-zij{gap:18px}
.pw-demos button{padding:8px 12px}
.pw-stappen li{padding:8px 2px}
.pw-foto{gap:8px}
.pw-foto img{aspect-ratio:16/10}
@media (max-width:900px){.pw-foto img{aspect-ratio:4/3}}

/* ---------------------------------------------------------------- prijs met drie kaarten en wat erin zit (contact, webdesign) */
.r-rij--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r-lijst{list-style:none;margin:14px 0 0!important;padding:0;border-top:1px solid rgba(18,17,16,.14)}
.r-lijst li{padding:11px 0 10px;border-bottom:1px solid rgba(18,17,16,.14);font-size:16px;line-height:1.4;color:var(--grafiet)}
.r-noot{margin:22px 0 0;max-width:46em;color:var(--steen);font-size:16px}
.r-noot b{color:var(--inkt);font-weight:600}
@media (max-width:1100px){.r-rij--3{grid-template-columns:1fr}}
.r-tijd{margin:0!important;font-size:15px;color:var(--steen)}
/* demovenster zonder zijbalk (contact): alleen de werkende demo */
.p-venster--los .pw-scherm{height:min(74vh,700px)}
@media (max-width:900px){.p-venster--los .pw-scherm{height:680px}}
/* prijs op de homepage: website en beheer naast elkaar, automatisering als brede balk eronder */
.r-rij--2x2{grid-template-columns:1fr 1fr}
.r-kaart--balk{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;align-items:center;column-gap:clamp(24px,3vw,56px)}
.r-kaart--balk .r-fig{margin:0;max-height:200px}
.r-balk-tekst{display:flex;flex-direction:column;gap:10px}
.r-kaart--balk .lnk{align-self:center;margin-top:0;white-space:nowrap}
@media (max-width:900px){
  .r-rij--2x2{grid-template-columns:1fr}
  .r-kaart--balk{grid-template-columns:1fr;row-gap:10px}
  .r-kaart--balk .lnk{align-self:flex-start;white-space:normal}
}
/* demo: de knoppen halen de tikgrens van 44 px (DESIGN §13) */
.pw-foto-knop,.pw-demos button{min-height:44px}

/* ---------------------------------------------------------------- telefoon (8 okt): ingeklapte adresbalk, blokovergangen */
@media (max-width:900px){
  /* Vastgezette scènes zijn zo hoog als het scherm mét ingeklapte adresbalk (lvh), zodat er onderin geen strook van de
     volgende sectie verschijnt en de blokovergang pas na de pin binnenkomt. De inhoud blijft binnen het kleinste scherm (svh):
     de extra hoogte gaat in de padding onderin. */
  /* "Zo werkt het" is op een telefoon niet vastgezet (studio3.js): gewoon zo hoog als de inhoud */
  .s-pin{min-height:0;padding-bottom:clamp(48px,8vh,96px)}
  /* de band is een volle blokhoogte; met 0,6 viel hij over de laatste stap */
  .s{padding-bottom:var(--blok-h)}

}

/* ---------------------------------------------------------------- werk (8 okt): elke video in een vast 16:9-venster, minder scrollen per kaart */
.w-kaart{height:auto;padding:11vh 12vw 4vh}
.w-kaart + .w-kaart{margin-top:6vh}
/* de kaart is zo breed dat het 16:9-venster plus de naam eronder altijd heel in beeld past */
.w-binnen{height:auto;max-width:calc((100svh - 15vh - 200px) * 16 / 9 + 16px);margin-inline:auto}
.w-media{flex:none;aspect-ratio:16 / 9}
.w-media video{top:0;height:100%;object-fit:cover;object-position:50% 0}
.w-kaart--jij .w-binnen{min-height:56svh}
/* scroll-hint in de intro van het werk */
.w-scroll{display:flex;align-items:center;gap:10px;margin:0;font:500 14px/1 var(--sans);letter-spacing:.02em;color:rgba(244,244,241,.66)}
.w-scroll i{position:relative;display:block;width:1.5px;height:26px;background:rgba(244,244,241,.2);overflow:hidden}
.w-scroll i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--vonk);animation:xn-scroll 1.6s var(--ease-energie) infinite}
.w-intro .w-scroll{grid-column:8 / span 5;margin-top:18px}
@media (prefers-reduced-motion:reduce){.w-scroll i::after{animation:none;top:30%}}
@media (max-width:900px){
  .w-kaart{padding:0 var(--rand) 14px}
  .w-kaart + .w-kaart{margin-top:4vh}
  .w-binnen{max-width:none}
  .w-media{aspect-ratio:16 / 9}
  .w-intro .w-scroll{grid-column:1;margin-top:6px}
}
/* werk zonder getal (webdesign, 8 okt): een korte kop in plaats van een zwakke statistiek */
.w-getal--tekst{font-size:clamp(48px,5.4vw,96px);line-height:.95;letter-spacing:-.05em;display:block}
@media (max-width:900px){.w-getal--tekst{font-size:clamp(44px,12vw,60px)}}

/* 9 nov: werk op een telefoon, de kaarten stapelen niet meer maar staan onder elkaar (studio3.js en webdesign.js zetten daar ook
   het terugwijken uit); twee bewegende sites boven elkaar was de drukste plek van de site */
@media (max-width:900px){.w-kaart{position:relative;top:auto}}

/* ---------------------------------------------------------------- de diensten op een telefoon: een uitklaplijst (10 nov)
   "Wat we bouwen" (home) en "Waar het werkt" (automatisering). Feedback 9 nov "niet scanbaar"; Milan koos uitklappen.
   De rij met nummer en naam is het ankerpunt om te scannen, zoals de namenlijst op desktop. Eén dienst staat open: het
   draaiende figuur naast de naam, daaronder één of twee regels en de links. De kop (h3) zei bijna hetzelfde als de naam en
   op Automatisering zegt "Nu" al wat het citaat zegt: die staan op een telefoon uit beeld, maar blijven in de pagina voor
   schermlezers en zoekmachines; desktop toont ze gewoon. drie.js (dienstenTelefoon) bouwt de knoppen en zet .d--lijst. */
.d-lijst button{display:block;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.d-nr,.d-ico,.d-plus{display:none}
@media (max-width:900px){
  .d.d--lijst .d-pin{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:0;align-items:start;height:auto;min-height:0;gap:0;padding:72px var(--rand) 8px}
  .d.d--lijst .d-links,.d.d--lijst .d-rechts,.d.d--lijst .d-lijst,.d.d--lijst .d-teksten{display:contents}
  .d.d--lijst .d-label{grid-row:1;grid-column:1 / -1;margin:0 0 14px}
  .d.d--lijst .d-teller{display:none}
  .d.d--lijst .d-pin::after{content:"";grid-row:10;grid-column:1 / -1;border-top:1px solid rgba(18,17,16,.14)}
  /* de rijen */
  .d.d--lijst .d-lijst li{grid-row:var(--r);grid-column:1 / -1;display:block;margin:0;transform:none;color:var(--inkt);border-top:1px solid rgba(18,17,16,.14)}
  .d.d--lijst .d-lijst li.is-aan{grid-column:1;align-self:stretch}
  .d.d--lijst .d-lijst li::before{display:none}
  .d.d--lijst .d-lijst button{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"nr ico plus" "naam ico plus";align-items:center;column-gap:14px;width:100%;min-height:0;padding:14px 0;color:var(--inkt);white-space:normal;cursor:pointer}
  .d.d--lijst .d-nr{display:block;grid-area:nr;align-self:end;margin-bottom:6px;font:500 13px/1 var(--sans);letter-spacing:0;color:var(--steen);font-variant-numeric:tabular-nums}
  .d.d--lijst .d-naam{grid-area:naam;align-self:start;font:430 clamp(26px,7.4vw,30px)/1.04 var(--sans);letter-spacing:-.04em;text-wrap:balance}
  .d.d--lijst .d-ico{grid-area:ico;width:56px;height:56px;margin:-6px 0}
  .d.d--lijst .d-ico:not([hidden]){display:block}
  .d.d--lijst .d-plus{display:block;grid-area:plus;position:relative;width:32px;height:32px;border:1px solid rgba(18,17,16,.22);border-radius:50%}
  .d.d--lijst .d-plus::before,.d.d--lijst .d-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--inkt);border-radius:1px}
  .d.d--lijst .d-plus::after{transform:rotate(90deg)}
  .d.d--lijst .d-lijst li.is-aan .d-ico,.d.d--lijst .d-lijst li.is-aan .d-plus{display:none}
  .d.d--lijst .d-lijst li.is-aan .d-nr{color:var(--vonk-tekst)}
  /* het figuur in de open rij, rechts naast de naam */
  .d.d--lijst .d-midden{grid-row:var(--r);grid-column:2;position:relative;top:auto;z-index:auto;width:116px;height:110px;max-width:none;margin:0;padding:6px 0 0;background:none;border-top:1px solid rgba(18,17,16,.14)}
  .d.d--lijst .d-wijzer,.d.d--lijst .d-canvas{inset:auto;left:50%;top:50%;translate:-50% -50%}
  .d.d--lijst .d-wijzer{width:100px;height:100px}
  .d.d--lijst .d-canvas{width:88px;height:88px}
  /* de tekst van de open dienst */
  .d.d--lijst .d-tekst{grid-row:var(--r);grid-column:1 / -1;position:relative;top:auto;bottom:auto;opacity:1;visibility:visible;gap:12px;padding:2px 0 28px;border-top:0}
  .d.d--lijst .d-tekst:not(.is-aan){display:none}
  .d.d--lijst .d-tekst.is-aan{animation:d-open .5s var(--ease-uit) both}
  .d.d--lijst .d-tekst q{font-size:18px;line-height:1.25;letter-spacing:-.015em}
  .d.d--lijst .d-tekst h3,.d.d--lijst.d--auto .d-tekst q{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .d.d--lijst .d-acties{flex-direction:column;align-items:flex-start;gap:0;margin-top:-6px}
  .d.d--lijst .d-nustraks{margin:0}
  @keyframes d-open{from{opacity:0;transform:translateY(12px)}}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.d.d--lijst .d-tekst.is-aan{animation:none}}