/* v3 (26 sep 2026). Alleen op markten met pages.home.v3 = true.
   Tweede ronde na "we zijn er nog niet": niet nog een laagje, maar één systeem.
     Raster   : alles begint op dezelfde lijn als de container (1120 px, 26 px marge).
                --links is die lijn gemeten vanaf de schermrand.
     Knoppen  : één vorm (10 px hoek), één hoogte, merkkleur vol of inkt omlijnd.
     Kleur    : warm papier en een tint donkerder; de merkkleur alleen op knoppen en
                één groot vlak (de afsluiter), egaal, zonder gloed.
     Secties  : waar een kop alleen stond met een lege rechterhelft, staat hij nu
                links en de inhoud rechts (5/7).
   Bronnen: scratchpad/ref2/RAPPORT.md (Rijksmuseum, Wildsam, Papier, Oura, Louisiana). */
.hbstory{--papier:#f3efe7;--wit:#faf8f3;--rand:#e2dccf;--links:max(26px,calc((100vw - 1120px) / 2 + 26px));--hoek:10px}
body,.hbstory{background:var(--wit)}

/* knoppen: één vorm */
.hbstory .btn,.hbstory button.btn,.hbstory .topnav .btn,.hbstory footer button,.hbstory footer input[type=email],.hbstory footer input[type=text]{border-radius:var(--hoek) !important}
.hbstory .h3knoppen .btn,.hbstory .cta-final .btn,.hbstory .pricing .btn,.hbstory .why .btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center}
.hbstory .topnav .btn{min-height:44px}
.hbstory .pricing .btn,.hbstory .why .btn{background:var(--merkdiep,var(--gold)) !important}
/* geen zwevende knop naar boven: de referenties hebben hem niet, hij lag over tekst */
.hbstory #totop{display:none !important}

/* 1. hero */
.hbstory .h3{padding:12px 12px 10px;background:var(--wit) !important;overflow:visible !important;height:auto !important;min-height:0 !important}
.h3kader{position:relative;min-height:clamp(560px,calc(100svh - 76px),900px);display:flex;align-items:flex-end;border-radius:18px;overflow:hidden;background:#2b2621}
.h3beeld{position:absolute;inset:0;background:var(--foto) center/cover no-repeat}
.h3beeld::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,15,10,.66) 0%,rgba(20,15,10,.42) 34%,rgba(20,15,10,0) 60%),linear-gradient(0deg,rgba(20,15,10,.5),rgba(20,15,10,0) 50%)}
/* lichte foto (sneeuw, strand): het verloop gaat verder en dieper, anders zakt witte tekst weg */
.h3kader.licht .h3beeld::before{background:linear-gradient(90deg,rgba(20,15,10,.8) 0%,rgba(20,15,10,.64) 38%,rgba(20,15,10,.14) 66%,rgba(20,15,10,0) 80%),linear-gradient(0deg,rgba(20,15,10,.55),rgba(20,15,10,0) 55%)}
.h3hand{position:absolute;right:0;bottom:0;height:97%;width:auto;max-width:48%;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 34px 44px rgba(0,0,0,.38))}
.h3tekst{position:relative;z-index:2;width:auto;flex:1 1 auto;padding:clamp(28px,3.6vw,60px) clamp(28px,3.6vw,60px) clamp(28px,3.6vw,60px) calc(var(--links) - 12px);color:#fff}
.hbstory .h3 .h3voor{margin:0 0 20px !important;font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.84)}
.hbstory .h3 h1{margin:0;font-size:clamp(2.3rem,min(1rem + 3.2vw,7.4svh),4.4rem) !important;line-height:.98 !important;letter-spacing:-.042em !important;font-weight:600;color:#fff !important;text-wrap:balance;max-width:none}
.hbstory .h3 h1 span{color:#fff !important;-webkit-text-fill-color:#fff !important}
.hbstory .h3 .h3sub{margin:22px 0 0 !important;max-width:34em;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.45;color:rgba(255,255,255,.9)}
.h3knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hbstory .h3knoppen .btn.o{background:rgba(255,255,255,.1) !important;color:#fff !important;border:1px solid rgba(255,255,255,.62) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hbstory .h3 .h3bewijs{margin:18px 0 0 !important;font-size:.86rem;color:rgba(255,255,255,.74)}
/* drukke foto (confetti, bladeren): een zachte schaduw onder de tekst houdt hem leesbaar zonder het beeld dicht te zetten */
@media (min-width:821px){.hbstory .h3 .h3tekst{text-shadow:0 1px 18px rgba(12,9,6,.45),0 1px 3px rgba(12,9,6,.35)}.hbstory .h3 .h3tekst .btn{text-shadow:none}}
/* geen inloopanimatie: de knoppen waren anderhalve seconde onzichtbaar en de kop werd afgeknipt */
.hbstory .h3 h1,.hbstory .h3 .h3tekst>*,.hbstory .h3 .btn{animation:none !important;opacity:1 !important;transform:none !important;clip-path:none !important}
/* "Pages for" hoort bij de hero, op dezelfde lijn als de rest, zonder eigen vlak */
.h3voor2{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:0;padding:18px 0 0 calc(var(--links) - 12px);font-size:.92rem;color:var(--grijs)}
.h3voor2 a{color:var(--inkt);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--rand)}
.h3voor2 a:hover{text-decoration-color:currentColor}
@media (max-width:820px){
  .h3{padding:8px 8px 0}
  .h3kader{height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;background:none;border-radius:0;overflow:visible}
  .h3tekst{position:static;width:auto;padding:22px 10px 24px;color:var(--inkt)}
  .hbstory .h3 .h3voor{color:var(--grijs) !important}
  .hbstory .h3 h1,.hbstory .h3 h1 span{color:var(--inkt) !important;-webkit-text-fill-color:var(--inkt) !important;font-size:clamp(2.1rem,1.3rem + 4vw,2.9rem) !important}
  .hbstory .h3 .h3sub{color:var(--tekst,#34312c) !important}
  .hbstory .h3 .h3bewijs{color:var(--grijs) !important}
  .hbstory .h3knoppen .btn.o{background:transparent !important;color:var(--inkt) !important;border-color:var(--rand) !important}
  /* beeld eerst: de plek en de gids in de hand zijn het eerste wat je op de telefoon ziet.
     Compact, zodat de eerste knop op 390x844 nog boven de cookiebalk staat. */
  .h3beeld{position:relative;height:clamp(200px,52vw,300px);border-radius:14px;overflow:hidden}
  .h3tekst{display:flex;flex-direction:column;padding-top:14px !important}
  .hbstory .h3 .h3voor{order:9;margin:16px 0 0 !important}
  .hbstory .h3 .h3sub{margin-top:14px !important}
  .h3knoppen{margin-top:18px}
  .h3hand{max-width:78%;height:98%}
  .h3voor2{padding:16px 10px 0}
}

/* 2. secties met een lege rechterhelft: kop links, inhoud rechts */
@media (min-width:980px){
  .hbstory .zondermet .wrap,.hbstory .pricing .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  .hbstory .zondermet .wrap>*,.hbstory .pricing .wrap>*{grid-column:2}
  .hbstory .zondermet .wrap>h2,.hbstory .pricing .wrap>.shead2{grid-column:1;grid-row:1 / span 4;position:sticky;top:110px;margin:0 !important}
  .hbstory .pricing .shead2 h2{margin-top:0 !important}
  .hbstory .pricing .priceinc{grid-template-columns:repeat(2,minmax(0,1fr)) !important;margin-top:0 !important}
  .hbstory .pricing .wrap>.btn{justify-self:start;margin-top:28px}
  .hbstory .why .whycopy{display:grid !important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);max-width:none !important;align-items:start}
  .hbstory .why .whycopy>*{grid-column:2}
  .hbstory .why .whycopy>h2{grid-column:1;grid-row:1 / span 6;margin:0 !important}
  .hbstory .why .whycopy>.btn{justify-self:start}
  .hbstory .why .whycopy>.eyebrow,.hbstory .why .whycopy>.act{display:none !important}
}

/* 3. uitvouwverhaal */
@media (min-width:821px){
  .hbstory .jstep{min-height:74vh !important;opacity:0 !important}
  .hbstory .jstep.on{opacity:1 !important}
  .hbstory .jstep p{color:var(--tekst,#34312c) !important;opacity:1 !important}
}
/* de app-stappen staan weer in het verhaal (Tessa 26 sep): de app moet prominent binnenkomen */
/* aanwijzers bij het omslaan: gewone zinnen, geen kapitalen met een streepje */
.hbstory .jann .jt{text-transform:none !important;letter-spacing:0 !important;font-weight:600 !important;font-size:13px !important;color:var(--inkt) !important}
/* scanmoment: zie het blok 'Scannen en de app' onderaan */
/* duurzaamheid: de kop breekt af, op mobiel niet in een smalle kolom */
@media (max-width:820px){.hbstory .physical .sustain{flex-direction:column !important;align-items:flex-start !important}.hbstory .physical .sustain .stbig{flex:none !important;width:100% !important;max-width:100% !important;min-width:0;white-space:normal !important}}

/* 4. de waaier, op het raster */
.tel3{padding:var(--ruim,120px) 0;background:var(--papier);overflow:hidden}
.hbstory .tel3kop h2{margin:0 0 16px}
.tel3kop p{margin:0;max-width:52ch;font-size:clamp(1.05rem,1rem + .2vw,1.2rem);line-height:1.6;color:var(--tekst,#34312c)}
.tel3rij{list-style:none;margin:clamp(56px,6vw,96px) auto 0;padding:0 26px;max-width:1120px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(14px,1.8vw,28px);align-items:start}
.tel3rij li{--d:calc(var(--i) - (var(--n) - 1) / 2);transform:translateY(calc(max(var(--d),calc(var(--d) * -1)) * 40px))}
.tel3ph{margin:0 0 22px;width:100%;aspect-ratio:840/1722;border-radius:30px;border:7px solid #17161b;background:#17161b;overflow:hidden;box-shadow:0 40px 60px -30px rgba(40,30,20,.45)}
.tel3ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.tel3rij h3{margin:0 0 8px;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em;color:var(--inkt)}
.tel3rij p{margin:0;font-size:.95rem;line-height:1.55;color:var(--tekst,#34312c)}
/* tablet en mobiel: twee per rij, niets buiten beeld */
@media (max-width:980px){
  .tel3rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 18px;padding:0 20px}
  .tel3rij li{transform:none}
  .tel3ph{border-width:6px;border-radius:24px}
}

/* 5. een dag: staande beelden die tot de rand van hun vlak lopen */
.hbstory .dagbeeld{aspect-ratio:4/5;border-radius:var(--hoek);background:#ebe6dc;border:0}
.hbstory .dagmoment .dagbeeld img{width:100%;height:100%;object-fit:cover;padding:0 !important}
/* de hand komt van rechts: pols tegen de rand, niet halverwege het vlak */
.hbstory .dagmoment:first-child .dagbeeld img{object-fit:contain;object-position:right center}
.hbstory .dagmoment.scherm .dagbeeld img{object-position:top}
.hbstory .dagmoment h3{display:inline;margin:0;font-size:1.02rem}
.hbstory .dagmoment h3::after{content:' '}
.hbstory .dagmoment p{display:inline;font-size:1rem !important}
.hbstory .dagmoment .dagbeeld{margin-bottom:16px}

/* 6. fits: foto op papier, geen restjes van vinkjes */
/* de foto heeft een koele grijze achtergrond ingebakken; vermenigvuldigd met papier valt die weg */
.hbstory .fitpic{background-color:var(--papier) !important;background-blend-mode:multiply;border-radius:var(--hoek);overflow:hidden}
.hbstory .fitcol li::after,.hbstory .fitcol li::before{display:none !important;content:none !important}

/* 7. de afsluiter: één egaal merkvlak, rustig */
.hbstory .cta-final{background:var(--merkdiep,var(--gold)) !important;background-image:none !important}
.hbstory .cta-final::after,.hbstory .cta-final::before{display:none !important}
.hbstory .cta-final .eyebrow,.hbstory .cta-final .ctastappen{display:none !important}
.hbstory .ctabadges{gap:4px 0}
.hbstory .ctabadges span{background:none !important;border:0 !important;padding:0 !important;font-weight:500}
.hbstory .ctabadges span::before{display:none !important}
.hbstory .ctabadges{column-gap:26px !important;row-gap:6px !important}
.hbstory .ctabadges span+span::before{display:none !important}

/* ===== Toevoegingen ronde 3 (26 sep, Tessa: "minimaal 20 dingen") ===== */
/* 1. het merk groot onderaan de voet, van kant tot kant */
.hbstory .voetmerk{max-width:1120px;margin:0 auto;padding:clamp(28px,4vw,56px) 26px clamp(12px,1.6vw,24px);overflow:hidden;line-height:1}
.hbstory .voetmerk span{display:inline-block;white-space:nowrap;font-size:13vw;letter-spacing:-.045em;line-height:1.08;padding-bottom:.06em;color:rgba(255,255,255,.12)}
.hbstory .voetmerk b{font-weight:700}
.hbstory .voetmerk i{font-style:normal;font-weight:300}
/* 2. links: de onderstreping groeit mee */
.hbstory .h3voor2 a,.hbstory .wiewie a,.hbstory footer .fcol a,.hbstory .copylink{text-decoration:none !important;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.8,.2,1)}
.hbstory .h3voor2 a{background-image:linear-gradient(var(--rand),var(--rand)),linear-gradient(currentColor,currentColor);background-size:100% 1px,0 1px;background-position:0 100%,0 100%;padding-bottom:3px}
.hbstory .h3voor2 a:hover{background-size:100% 1px,100% 1px}
.hbstory .wiewie a:hover,.hbstory footer .fcol a:hover,.hbstory .copylink:hover{background-size:100% 1px}
/* 3. de hoofdknoppen krijgen een pijl die meeschuift */
.hbstory .h3knoppen .btn:not(.o)::after,.hbstory .cta-final .btn.g::after,.hbstory .pricing .btn::after,.hbstory .why .btn::after{content:'\2192';display:inline-block;margin-left:10px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hbstory .h3knoppen .btn:not(.o):hover::after,.hbstory .cta-final .btn.g:hover::after,.hbstory .pricing .btn:hover::after,.hbstory .why .btn:hover::after{transform:translateX(4px)}
/* 4. de heldfoto zoomt heel langzaam, alsof het beeld ademt */
@media (prefers-reduced-motion:no-preference){
  .h3beeld{background-size:112% auto;animation:h3zoom 24s ease-in-out infinite alternate}
  @keyframes h3zoom{from{background-size:112% auto}to{background-size:120% auto}}
}
@media (max-aspect-ratio:4/3){.h3beeld{background-size:cover !important;animation:none !important}}
.h3hand{will-change:transform}
/* 6. onthullen bij inscrollen: beelden openen van onder naar boven, rijen komen omhoog */
.v3js .sfeer.onthul img,.v3js .dagbeeld.onthul,.v3js .fitpic.onthul,.v3js .tel3ph.onthul{clip-path:inset(12% 0 0 0 round var(--hoek));transition:clip-path 1s cubic-bezier(.2,.8,.2,1)}
.v3js .sfeer.onthul img{clip-path:inset(10% 0 0 0)}
.v3js .onthul.zien img,.v3js .dagbeeld.onthul.zien,.v3js .fitpic.onthul.zien,.v3js .tel3ph.onthul.zien{clip-path:inset(0 0 0 0 round var(--hoek))}
.v3js .sfeer.onthul.zien img{clip-path:inset(0)}
.v3js .zmrij.onthul,.v3js .procsteps li.onthul,.v3js .wierij.onthul,.v3js .h3voor2.onthul{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.v3js .zmrij.onthul.zien,.v3js .procsteps li.onthul.zien,.v3js .wierij.onthul.zien,.v3js .h3voor2.onthul.zien{opacity:1;transform:none}
/* 7. FAQ: zacht openvouwen, plus wordt min */
.hbstory .faqlist .fa{overflow:hidden;transition:height .32s cubic-bezier(.2,.8,.2,1)}
.hbstory .faqlist summary{cursor:pointer}
/* 8. het menu schuift weg bij naar beneden scrollen */
.hbstory .topnav{transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s}
.hbstory .topnav.weg{transform:translateY(-100%)}
/* 9. tekst selecteren in de merkkleur */
.hbstory ::selection{background:var(--merkdiep,var(--gold));color:#fff}
/* 10. de afsluiter: tekst links, het product groot rechts, tot de onderrand */
@media (min-width:980px){
  .hbstory .cta-final{overflow:hidden;text-align:left !important}
  .hbstory .cta-final .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,4vw,72px);align-items:end;padding-top:clamp(72px,8vw,120px) !important;padding-bottom:0 !important}
  .hbstory .cta-final .wrap>*{grid-column:1;text-align:left !important;margin-left:0 !important;margin-right:0 !important}
  .hbstory .cta-final .wrap>.ctabooqi{grid-column:2;grid-row:1 / span 8;align-self:end;justify-self:end;width:auto !important;max-width:100% !important;height:clamp(380px,40vw,560px) !important;object-fit:contain;object-position:right bottom;margin:0 calc(-1 * var(--links)) 0 0 !important;filter:drop-shadow(0 30px 40px rgba(0,0,0,.3))}
  .hbstory .cta-final h2{max-width:14ch !important;margin-left:0 !important}
  .hbstory .cta-final .row{justify-content:flex-start !important}
  .hbstory .cta-final .ctabadges{justify-content:flex-start !important}
  .hbstory .cta-final .copylink{margin:18px 0 clamp(64px,7vw,110px) !important;justify-content:flex-start}
}
/* 11. papier: een heel lichte korrel op de achtergrond, want het product is papier.
   Niet op de 3D-gids (die flikkert dan), alleen op de pagina zelf. */
.hbstory::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:45;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .33 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E")}
/* 12. de telefoons komen gestaffeld omhoog en tillen iets op onder de muis */
.v3js .tel3ph.onthul{transform:translateY(40px);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s ease,clip-path 1s}
.v3js .tel3rij li:nth-child(2) .tel3ph.onthul{transition-delay:.08s}.v3js .tel3rij li:nth-child(3) .tel3ph.onthul{transition-delay:.16s}
.v3js .tel3rij li:nth-child(4) .tel3ph.onthul{transition-delay:.24s}.v3js .tel3rij li:nth-child(5) .tel3ph.onthul{transition-delay:.32s}
.v3js .tel3ph.onthul.zien{transform:none;opacity:1}
@media (hover:hover){.tel3rij li .tel3ph{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}.tel3rij li:hover .tel3ph{transform:translateY(-10px) !important;box-shadow:0 50px 70px -30px rgba(40,30,20,.5)}}
/* 13. de dagbeelden zoomen licht in onder de muis */
.hbstory .dagbeeld{overflow:hidden}
@media (hover:hover){.hbstory .dagbeeld img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}.hbstory .dagmoment:hover .dagbeeld img{transform:scale(1.045)}}
/* 14. de vier stappen: een lijn die ze verbindt en meeloopt */
.hbstory .procsteps{position:relative}
.hbstory .procsteps li{border-top:0 !important}
.hbstory .procsteps::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--rand)}
.hbstory .procsteps::after{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:var(--merkdiep,var(--gold));transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.hbstory .procsteps.zien::after{transform:scaleX(1)}
.hbstory .procsteps li{padding-top:26px !important}
/* 15. de rijen van "wat verandert" lichten op onder de muis */
@media (hover:hover){.hbstory .zmrij{transition:background-color .25s}.hbstory .zmrij:hover{background:rgba(255,255,255,.55)}}
/* 16. de dichte gids ligt schuin op de sfeerfoto */
.hbstory .sfeer .sfeergids{animation:none !important;clip-path:none !important;object-fit:contain !important;position:absolute;right:clamp(24px,9vw,160px);bottom:-6%;width:clamp(130px,15vw,230px);height:auto;transform:rotate(-8deg);filter:drop-shadow(0 30px 34px rgba(0,0,0,.45));z-index:2}
.hbstory .sfeer{overflow:visible !important}
.hbstory .sfeer>img:first-child{border-radius:0}
.hbstory .sfeer{isolation:isolate}
.hbstory .sfeer .sfeerlijst{position:absolute;inset:0;overflow:hidden}
/* 17. mobiel: een vaste knop onderaan zodra je voorbij de hero bent */
.h3balk{display:none}
@media (max-width:820px){
  .h3balk{display:block;position:fixed;left:12px;right:72px;bottom:12px;z-index:60;transform:translateY(140%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .h3balk.aan{transform:none}
  .h3balk .btn{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}
}
/* 18. de pijl bij de doelgroeplinks schuift mee */
.hbstory .wiewie a .wiepijl,.hbstory .wiewie a svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hbstory .wiewie a:hover .wiepijl,.hbstory .wiewie a:hover svg{transform:translateX(5px)}
@media (max-width:820px){.hbstory .sfeer .sfeergids{bottom:7%;right:18px;width:clamp(96px,26vw,140px)}}

/* ===== Uit onderzoek ronde 3 (scratchpad/ref3/RAPPORT.md) ===== */
/* 19. de sfeerfoto begint in een kader en groeit uit tot de volle breedte (Yestalgia) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:821px){
    .hbstory .sfeer .sfeerlijst{animation:sfeergroei linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes sfeergroei{from{inset:0 clamp(24px,8vw,140px);border-radius:18px}to{inset:0 0;border-radius:0}}
  }
}
/* 20. boven de afsluiter een perforatie, zoals een voucher die je afscheurt */
.hbstory .cta-final{position:relative}
.hbstory .cta-final::before{display:block !important;content:'' !important;position:absolute;left:0;right:0;top:-1px;height:12px;background:radial-gradient(circle at 10px 0,var(--wit) 5px,transparent 5.5px) 0 0/20px 12px repeat-x !important;z-index:2;pointer-events:none}
.hbstory .cta-final .wrap::before{content:'';position:absolute;left:0;right:0;top:22px;border-top:1.5px dashed rgba(255,255,255,.28)}
/* 21. in de FAQ en bij "fits" dimt de rest als je er één aanwijst */
@media (hover:hover){
  .hbstory .faqlist:hover details:not(:hover) summary,.hbstory .fitcol:hover li:not(:hover){opacity:.45}
  .hbstory .faqlist summary,.hbstory .fitcol li{transition:opacity .25s ease}
}
/* 22 (vervaagde herotekst) weggehaald: de scroll-tijdlijn zette de tekst bij het laden al
   wazig, omdat de hero dan al tegen de onderrand van het scherm staat. */
/* 23. een handgetekende streep onder het laatste woord van de afsluiter, die zichzelf tekent */
.hbstory .cta-final h2 .gold-shine{position:relative;white-space:nowrap}
.hbstory .cta-final h2 .streep{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible;pointer-events:none}
.hbstory .cta-final h2 .streep path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset .9s cubic-bezier(.6,.1,.3,1) .2s}
.hbstory .cta-final.zien h2 .streep path{stroke-dashoffset:0}
/* 24. ruitjes op de proceslijn, bij elke stap één */
.hbstory .procsteps li{position:relative}
.hbstory .procsteps li::before{content:'';position:absolute;left:0;top:-4px;width:9px;height:9px;background:var(--wit);border:1.5px solid var(--merkdiep,var(--gold));transform:rotate(45deg);transition:background-color .4s .6s}
.hbstory .procsteps.zien li::before{background:var(--merkdiep,var(--gold))}
/* 25. foto's komen wazig binnen en worden scherp */
.v3js .dagbeeld img,.v3js .sfeerlijst img,.v3js .fitpic{transition:filter .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.v3js img.laadt{filter:blur(14px)}
.hbstory .sfeer{background:transparent !important}
/* de tekstbreedte staat los van de marge tot het raster: op 1920 bleef er anders 400 px over */
@media (min-width:821px){.h3tekst>*{max-width:min(660px,calc(52vw - var(--links)))}.hbstory .h3 h1{max-width:min(13ch,calc(52vw - var(--links))) !important}}
@media (min-width:1100px){.h3knoppen{flex-wrap:nowrap}}
/* Laag scherm (1366x657): het vel en de scan-telefoon schoven onder het menu,
   want de plakpositie was 50vh - 295px = 33 px. Nooit hoger dan onder het menu. */
@media (min-width:821px){.hbstory .jstick{top:max(78px,calc(50vh - 295px)) !important}}
@media (min-width:821px) and (max-height:760px){.hbstory .jstick .pgscan .phone,.hbstory .jstick.scanstage .pgscan .phone{width:240px !important}}
@media (min-width:821px) and (max-height:760px){.hbstory .jstick .jann{display:none !important}}

/* ===== Doorloop van de Booqi (Tessa 26 sep: "werkt niet gebruiksvriendelijk") =====
   1. geen snappen meer: de pagina sprong naar elke stap en vocht met het trackpad;
   2. houvast: een stappenbalk bij het beeld (klikbaar) en een link om over te slaan;
   3. sneller: kortere stappen, de camera reageert in 0,8 s in plaats van 1,15 s. */
html{scroll-snap-type:none !important}
.hbstory .jstep{scroll-snap-align:none !important}
@media (min-width:821px){
  .hbstory .jstep{min-height:66vh !important;opacity:.16 !important;transition:opacity .45s ease !important}
  .hbstory .jstep.on{opacity:1 !important}
  .hbstory .jstick .scene{transition-duration:.8s !important}
}
.hbstory .jnav{position:absolute;left:50%;bottom:-54px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;z-index:5;font-size:.86rem;color:var(--grijs);white-space:nowrap}
.hbstory .jnav ol{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.hbstory .jnav button{width:30px;height:4px;padding:0;border:0;border-radius:2px;background:var(--rand);cursor:pointer;transition:background-color .3s,width .3s}
.hbstory .jnav button[aria-current="step"]{background:var(--merkdiep,var(--gold));width:44px}
.hbstory .jnav button:focus-visible{outline:2px solid var(--merkdiep,var(--gold));outline-offset:4px}
.hbstory .jnav .jteller{font-variant-numeric:tabular-nums;min-width:3.2em}
.hbstory .jnav a{color:var(--inkt);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--rand)}
@media (max-width:820px){.hbstory .jnav{display:none}}

/* ===== Scannen en de app (Tessa 26 sep: "hij scant de QR op de Booqi niet meer, de app moet
   veel prominenter") =====
   1. de Booqi blijft helder in beeld, met een ring om de QR-code;
   2. de telefoon staat schuin naast de code en scant hem (3,5 s, de camera toont de code);
   3. na de scan opent de app op de telefoon, nog steeds naast de Booqi (Tessa 26 sep: de Booqi
      verdween na 3,5 s en er bleef een leeg kader op het merkvlak staan);
   4. in de app-stappen staat de telefoon groot op een vlak in de merkkleur. */
@media (min-width:821px){
  .hbstory .jnav{top:-50px;bottom:auto}
  .hbstory .jstick.scanstage #pgstage{opacity:1 !important;transition:opacity .7s ease .15s}
  .hbstory .jstick.scanstage #pgstage .bqface{filter:none !important}
  .hbstory .jstick.scanstage #pgstage [data-tour="4"] .bqface{outline:3px solid var(--merkdiep,var(--gold));outline-offset:3px;animation:qrring 1.4s ease-in-out infinite}
  @keyframes qrring{50%{outline-offset:9px;outline-color:color-mix(in srgb,var(--merkdiep,var(--gold)) 35%,transparent)}}
  .hbstory .jstick .pgscan{transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .5s ease !important}
  .hbstory .jstick.scanstage .pgscan{transform:translate(-50%,-50%) translate(clamp(170px,15vw,230px),56px) rotate(8deg) scale(.72) !important}
  .hbstory .jstick.scanstage:has(.pgscan.toured) [data-tour="4"] .bqface{animation:none;outline:0}
  /* het merkvlak achter de telefoon zodra de app er is */
  .hbstory .jstick::after{content:'';position:absolute;left:50%;top:50%;width:min(92%,560px);height:112%;border-radius:22px;background:var(--merkdiep,var(--gold));
    transform:translate(-50%,-50%) scale(.82);opacity:0;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1);z-index:0;pointer-events:none}
  .hbstory .jstick.phoneup::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .hbstory .jstick .scene,.hbstory .jstick .pgscan{position:relative;z-index:1}
  .hbstory .jstick .pgscan{position:absolute}
  .hbstory .jstick.phoneup .pgscan{transform:translate(-50%,-50%) scale(1.08) !important}
  .hbstory .jstick.phoneup .jnav,.hbstory .jstick.phoneup .jnav a{color:var(--grijs)}
}
/* fits: de hand zonder grijze foto-achtergrond, pols tegen de rand */
.hbstory .fitpic.v3hand{background-size:contain !important;background-position:right center !important;background-repeat:no-repeat !important;background-blend-mode:normal !important}
/* tijdens het scannen: geen dim-laag over de panelen, alleen de QR-cel licht op */
@media (min-width:821px){
  .hbstory .jstick.scanstage #pgstage .bqface::after,.hbstory .jstick.scanstage #pgstage .mback::after{opacity:0 !important}
  .hbstory .jstick.scanstage #pgstage .bqface,.hbstory .jstick.scanstage #pgstage .mback{filter:none !important}
  .hbstory .jstick.scanstage #pgstage .bqcell:not([data-tour="4"])>.mback,.hbstory .jstick.scanstage #pgstage .bqcell:not([data-tour="4"])>.bqface{filter:saturate(.9) brightness(.97) !important}
  /* stappenbalk: verticale rail links naast het beeld, de telefoon valt er nooit overheen */
  .hbstory .jnav{top:50% !important;bottom:auto !important;left:-34px !important;transform:translateY(-50%) !important;flex-direction:column;gap:10px;font-size:.74rem}
  .hbstory .jnav ol{flex-direction:column;gap:5px}
  .hbstory .jnav button{width:3px !important;height:18px;border-radius:2px}
  .hbstory .jnav button[aria-current="step"]{width:3px !important;height:34px}
  .hbstory .jnav .jteller{min-width:0;text-align:center}
  .hbstory .jnav a{font-size:.74rem}
}
@media (min-width:821px){
  .hbstory .jstick.scanstage #pgstage [data-tour="4"]>.bqface{outline:0 !important;box-shadow:inset 0 0 0 4px var(--merkdiep,var(--gold)) !important;animation:qrring2 1.3s ease-in-out infinite !important}
  @keyframes qrring2{50%{box-shadow:inset 0 0 0 9px var(--merkdiep,var(--gold))}}
  .hbstory .jstick.scanstage:has(.pgscan.toured) [data-tour="4"]>.bqface{animation:none !important;box-shadow:none !important}
}

.hbstory .qrring{position:absolute;z-index:3;border:4px solid var(--merkdiep,var(--gold));border-radius:8px;pointer-events:none;opacity:0;transition:opacity .4s ease}
@media (min-width:821px){
  /* pas na het infaden van de Booqi, anders zweeft het kader even los op het merkvlak (terug van de app-stap) */
  .hbstory .jstick.scanstage:not(:has(.pgscan.toured)) .qrring{opacity:1;animation:qrpuls 1.2s ease-in-out infinite;transition:opacity .4s ease .7s}
  @keyframes qrpuls{50%{transform:scale(1.08);border-color:color-mix(in srgb,var(--merkdiep,var(--gold)) 45%,transparent)}}
}
/* Openvouwen zonder sprong (Tessa 26 sep: "een extra lege cover linksboven"): de dichte
   stand schoof het boekje 300 px op. Bij het openen verdween die verschuiving in één keer
   terwijl de camera nog ingezoomd stond, en de cover flitste groot over de tekstkolom.
   Nu centreert alleen de camera (fitCam0 in newhome.js) en blijft het vel op zijn plek. */
@media (min-width:821px){.hbstory .jstick #pgstage.closed{transform:scale(.7) rotateX(4deg) !important}}

/* ===== De vakken rond de kaart op de website (Tessa 26 sep: "niet alle titels zijn gelijk,
   ook niet op de kaartzijde"; "de QR met een zilveren rand, zoals op de achterkant") =====
   Zelfde kopstijl als de insert: Poppins vet, gewone zinsopbouw, geen letterafstand. */
.hbstory #pgstage .obar b,.hbstory #pgstage .bqeb,.hbstory #pgstage .bqqc{text-transform:none !important;letter-spacing:-.01em !important;font-weight:700 !important}
.hbstory #pgstage .obar b{font-size:9px !important;line-height:1.12 !important}
.hbstory #pgstage .obar i{color:rgba(255,255,255,.86) !important;font-style:normal !important}
.hbstory #pgstage .bqeb{font-size:8px !important;color:inherit}
.hbstory #pgstage .bqeb svg{display:none !important}
.hbstory #pgstage .bqmini b,.hbstory #pgstage .bqmini span{letter-spacing:0 !important}
.hbstory #pgstage .bqface.qr{background:#1f1a1d !important}
.hbstory #pgstage .bqqc{font-size:7.5px !important;color:#fff !important;margin-bottom:7px !important}
.hbstory #pgstage .bqqf{padding:3px !important;border-radius:6px !important;border:0 !important;
  background:linear-gradient(142deg,#fbfbfc 0%,#cfd4d9 20%,#8e949b 44%,#f0f2f4 58%,#a8aeb5 82%,#f4f6f8 100%) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.45),inset 0 0 0 .5px rgba(255,255,255,.6) !important}
.hbstory #pgstage .bqqf svg{border-radius:3px;display:block}
/* Aanwijspijlen bij het omslaan: ze liepen tot midden in de vakken en dus door de tekst.
   Nu eindigen ze op de rand van het vel, boven of onder het vak waar ze bij horen. */
@media (min-width:821px){
  .hbstory .jann .l1{d:path("M 62 126 H 123 V 172")} .hbstory .jann .h1{transform:translate(0,-61px)}
  .hbstory .jann .l2{d:path("M 408 672 V 604")}      .hbstory .jann .h2{transform:translate(0,196px)}
  .hbstory .jann .l3{d:path("M 772 126 V 390 H 768")} .hbstory .jann .h3{transform:translate(52px,0)}
  .hbstory .jann .l4{d:path("M 62 672 H 123 V 604")} .hbstory .jann .h4{transform:translate(0,58px)}
}

/* Afsluiter, ronde 2 (Tessa 26 sep: "nog veel lege ruimte"): de productset (omslagen, telefoon,
   achterkant) vult de rechterhelft en loopt tot de onderrand; minder lucht boven. */
@media (min-width:980px){
  .hbstory .cta-final .wrap::before{display:none}
  .hbstory .cta-final .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) !important;column-gap:clamp(24px,3vw,56px) !important;
    padding-top:clamp(64px,6vw,96px) !important;align-items:center !important;min-height:clamp(520px,44vw,640px)}
  .hbstory .cta-final .wrap>.ctabooqi{align-self:end !important;justify-self:stretch !important;width:100% !important;height:auto !important;
    max-height:none !important;object-fit:contain;object-position:center bottom;margin:0 0 -8px 0 !important;
    filter:drop-shadow(0 34px 44px rgba(0,0,0,.35)) !important}
  .hbstory .cta-final .copylink{margin-bottom:clamp(56px,6vw,90px) !important}
}
@media (max-width:979px){.hbstory .cta-final .ctabooqi{width:min(92%,520px) !important;height:auto !important}}
@media (min-width:980px){.hbstory .cta-final .wrap>.ctabooqi{width:calc(100% + clamp(40px,5vw,110px)) !important;max-width:none !important;margin-right:calc(-1 * clamp(40px,5vw,110px)) !important}}
@media (min-width:821px){.hbstory .jstick .tnav,.hbstory .jstick .bqctrls{display:none !important}}


/* Bij de kaartstap wordt de rechterkolom bewust 700px breed. Een lang NL-woord ("bezienswaardigheden")
   rekte de linkerkolom op, waarna de insert rechts van het scherm viel. Alleen links mag krimpen. */
@media (min-width:821px){.hbstory .jgrid{grid-template-columns:minmax(0,1fr) 1.05fr}}
html[lang^=nl] .hbstory .jstep h3{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;hyphenate-limit-chars:11 5 5}
/* Het pop-effect op de resultaatcijfers schaalde een blok van de volle kolombreedte op tot 113%,
   zodat het op tablet even buiten het scherm stond. Het cijfer is nu zo breed als zichzelf. */
.hbstory .results .stat .v{display:inline-block;transform-origin:left center}

/* Menubalk die niet past (DE/ES-woorden plus de taalknop): v3.js zet .navkrap en dan wordt het
   het hamburgermenu, zoals onder 1020px. De demoknop blijft staan. */
.hbstory .topnav.navkrap .navlinks{display:none}
.hbstory .topnav.navkrap .navburger{display:inline-flex}
.hbstory .topnav.navkrap.menu-open .navlinks .mobonly{display:block}
.hbstory .topnav.navkrap.menu-open .navlinks{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:2px;background:hsl(calc(var(--hb-h,42.93) + 2.07) 50% 96.86% / .98);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:14px 22px 20px;border-bottom:1px solid var(--line);box-shadow:0 20px 30px -18px hsl(calc(var(--hb-h,42.93) + -4.75) 57.89% 7.45% / .4)}
.hbstory .topnav.navkrap.menu-open .navlinks a{padding:11px 0;font-size:1rem;border-bottom:1px solid var(--line)}
.hbstory .topnav.navkrap.menu-open .navlinks a::after{display:none}
@media (min-width:1021px) and (max-width:1360px){.hbstory .navlinks{gap:clamp(16px,1.9vw,30px)}}
/* mobiel: een lang laatste woord in de contactkop ("terminal de croisière.") mag afbreken */
@media (max-width:480px){.hbstory .cta-final h2 .gold-shine{white-space:normal}}

/* Contrast (27 sep 2026, audit, axe-core): labels en koppen in de felle merkkleur haalden 1,7 tot 3,3:1
   op het papier; nu in de donkere merkkleur. --muted (41%) haalde 4,0 tot 4,4; nu 34%. Footerlinks lichter. */
.hbstory{--muted:hsl(calc(var(--hb-h,42.93) + -4.22) 14.83% 34%)}
.hbstory :is(.eyebrow,.je,.wielink,.zmkop span,.act span,.csug span,[role="columnheader"],.whymeas b),
.hbstory details[open] > summary,.hbstory summary{color:var(--merkdiep) !important}
.hbstory .fsoc a{color:hsl(calc(var(--hb-h,42.93) + -8.31) 13.4% 72%)}
.hbstory .flang{color:hsl(calc(var(--hb-h,42.93) + -6.93) 10% 68%)}
.hbstory .physical .jstep .je,.hbstory .physical span.je,.hbstory .jstep .je{color:var(--merkdiep) !important}
.hbstory footer.site .fsoc a,.hbstory footer.site .flegal a{color:hsl(calc(var(--hb-h,42.93) + -8.31) 13.4% 72%) !important}
/* mobiel: de lichtere herofoto */
@media (max-width:820px){.h3beeld{background-image:var(--foto-m,var(--foto)) !important}}

/* Audit 27 sep 2026, actie 5: de homepage korter en scherper.
   1. Het uitvouwverhaal in zes stappen: dicht, kaartzijde, omslaan, scannen en twee schermen.
      newhome.js en v3.js slaan verborgen stappen over; elke stap stuurt het vel met zijn eigen nummer.
      Zonder eigen appstappen (hotel, vakantiepark) is het tweede scherm de aanbiedingen in plaats
      van de kaart: de kaart zat al in de kaartzijde, en aan aanbiedingen verdient een hotel. */
.hbstory .jstep[data-step="1"],.hbstory .jstep[data-step="12"],.hbstory .jstep[data-step="14"],
.hbstory .jstep[data-step="13"][data-scherm],.hbstory .jstep[data-step="11"]:not([data-scherm]){display:none !important}
/* 2. Bewijs direct onder de hero: klantnamen uit de doelgroepen en een kort citaat. */
.hbstory .bewijs3{padding:clamp(30px,3.4vw,46px) 0 clamp(26px,3vw,40px);border-bottom:1px solid var(--rand)}
.hbstory .bewijs3 .wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:22px}
.hbstory .bewijs3 .b3kop{margin:0 0 12px !important;font-size:.82rem;font-weight:600;line-height:1.3;color:var(--merkdiep,var(--gold))}
/* de streep staat links van elke naam; die van de eerste naam op een regel valt buiten de lijst en wordt afgeknipt */
.hbstory .bewijs3 ul{list-style:none;margin:0 0 0 -15px;padding:0;display:flex;flex-wrap:wrap;row-gap:6px;overflow:hidden}
.hbstory .bewijs3 li{position:relative;margin:0 0 0 -1px;padding:0 14px 0 15px;font-size:clamp(.98rem,.92rem + .25vw,1.1rem);font-weight:600;line-height:1.4;letter-spacing:-.012em;color:var(--inkt)}
.hbstory .bewijs3 li::before{content:'';position:absolute;left:0;top:.3em;bottom:.3em;width:1px;background:var(--rand)}
.hbstory .bewijs3 figure{margin:0}
.hbstory .bewijs3 blockquote{margin:0;padding:0;border:0;font-size:clamp(.98rem,.94rem + .15vw,1.06rem);font-style:normal;line-height:1.55;color:var(--inkt);quotes:"\201C" "\201D"}
.hbstory .bewijs3 blockquote::before{content:open-quote}
.hbstory .bewijs3 blockquote::after{content:close-quote}
.hbstory .bewijs3 figcaption{margin-top:10px;font-size:.84rem;line-height:1.4;color:var(--grijs)}
@media (min-width:821px){
  .hbstory .bewijs3 .wrap.b3twee{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,96px);align-items:center}
  .hbstory .bewijs3 .b3twee figure{padding-left:clamp(24px,2.6vw,40px);border-left:1px solid var(--rand)}
}
@media (max-width:820px){
  .hbstory .bewijs3 .b3twee figure{padding-top:20px;border-top:1px solid var(--rand)}
}
.hbstory .h3 h1 .heel{white-space:nowrap}

/* Juridische pagina's en 404 (27 sep 2026). Er stond geen regel CSS voor .hbpage, dus elke
   tussenkop kreeg de maat van een homepagesectie. Nu: links de drie pagina's, rechts een leeskolom. */
.hbstory .hbpage{padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,112px);background:var(--wit)}
.hbstory .hbdoc{display:grid;grid-template-columns:minmax(0,1fr);row-gap:28px}
@media (min-width:821px){
  .hbstory .hbdoc{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  .hbstory .hbdocnav{position:sticky;top:110px}
}
.hbstory .hbdocnav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rand)}
.hbstory .hbdocnav li{margin:0;border-bottom:1px solid var(--rand)}
.hbstory .hbdocnav a{display:block;padding:14px 0;font-size:.95rem;font-weight:500;line-height:1.35;color:var(--grijs);text-decoration:none}
.hbstory .hbdocnav a:hover{color:var(--inkt)}
.hbstory .hbdocnav a[aria-current]{color:var(--inkt);font-weight:600}
.hbstory .hbdoctekst{max-width:44em}
.hbstory .hbpage h1{margin:0 0 28px !important;font-size:clamp(2.2rem,1.6rem + 2.4vw,3.4rem) !important;line-height:1.02 !important;letter-spacing:-.035em !important;font-weight:600;color:var(--inkt) !important;text-wrap:balance}
.hbstory .hbdoctekst h2{margin:44px 0 12px !important;padding-top:20px;border-top:1px solid var(--rand);font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem) !important;line-height:1.2 !important;letter-spacing:-.02em !important;font-weight:600;color:var(--inkt) !important;text-transform:none !important;max-width:none}
.hbstory .hbdoctekst h1+h2{margin-top:0 !important}
.hbstory .hbdoctekst h3{margin:26px 0 8px !important;font-size:1.05rem !important;line-height:1.3 !important;letter-spacing:-.01em !important;font-weight:600;color:var(--inkt) !important;text-transform:none !important}
.hbstory .hbdoctekst p,.hbstory .hbdoctekst li{font-size:1rem;line-height:1.65;color:var(--inkt);max-width:none}
.hbstory .hbdoctekst p{margin:0 0 14px}
.hbstory .hbdoctekst ul,.hbstory .hbdoctekst ol{margin:0 0 18px;padding-left:1.2em}
.hbstory .hbdoctekst li{margin:0 0 6px}
.hbstory .hbdoctekst a{color:var(--merkdiep,var(--gold));text-decoration:underline;text-underline-offset:3px}
.hbstory .hbdoctekst table{width:100%;margin:12px 0 24px;border-collapse:collapse;font-size:.9rem}
.hbstory .hbdoctekst th,.hbstory .hbdoctekst td{padding:10px 14px 10px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rand);line-height:1.45;color:var(--inkt)}
.hbstory .hbdoctekst thead th{font-size:.8rem;font-weight:600;color:var(--merkdiep,var(--gold));border-bottom-color:var(--inkt)}
.hbstory .hbdoctekst td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;white-space:nowrap}
@media (max-width:820px){.hbstory .hbdoctekst table{display:block;overflow-x:auto}}
.hbstory .hb404 .wrap{min-height:min(56vh,520px);display:flex;flex-direction:column;justify-content:center}
.hbstory .hb404 .hbdocvoor{margin:0 0 12px !important;font-size:.9rem;font-weight:600;color:var(--merkdiep,var(--gold))}
.hbstory .hb404 h1{margin-bottom:16px !important}
.hbstory .hb404 .hbdoclead{margin:0;max-width:32em;font-size:1.15rem;line-height:1.5;color:var(--grijs)}
.hbstory .hbdocknoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hbstory .hbdocknoppen .btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center}
.hbstory .hbdocknoppen .btn:not(.o){background:var(--merkdiep,var(--gold)) !important;color:#fff !important}

/* Knoppen in de merkkleur (Tessa 28 sep: "Plan een demo" en "Aanmelden" met donkere tekst op bruin en
   oranje). Overal de diepe merktint (--merkdiep, gerekend op wit 5,4:1) met witte tekst. */
.hbstory .btn.g,.hbstory .btn.g:hover,.hbstory footer button,.hbstory footer button:hover,
.hbstory #cookieok,.hbstory #cookieok:hover,.hbstory .cdock-fab,.hbstory .cdock-fab:hover,.hbstory #csend,.hbstory #csend:hover{background:var(--merkdiep,var(--gold)) !important;color:#fff !important;border-color:transparent !important}
.hbstory .cdock-fab svg{stroke:#fff}

/* 28 sep, schermafdrukken Tessa */
/* Stappenbalk: groeit naar links, weg van het beeld. "Overslaan" is breder dan "Skip" en viel over de binnenkant. */
@media (min-width:821px){.hbstory .jnav{left:auto !important;right:calc(100% + 14px) !important;align-items:flex-end}}
/* Badges in de afsluiter: elk een eigen bolletje, zodat een afgebroken regel nog als lijstje leest */
.hbstory .cta-final .ctabadges span{position:relative;padding-left:13px !important;white-space:nowrap}
.hbstory .cta-final .ctabadges span::after{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:currentColor;opacity:.6}
/* Bewijsstrook met alleen namen: label en namen op één regel, geen lege rechterhelft */
@media (min-width:821px){
  .hbstory .bewijs3 .wrap:not(.b3twee) .b3namen{display:flex;align-items:baseline;gap:28px}
  .hbstory .bewijs3 .wrap:not(.b3twee) .b3kop{margin:0 !important;flex:none}
}

/* 28 sep (Tessa): de gids hoort onder de sfeerfoto uit te steken. Sinds "What changes" weg is volgt het
   verhaal direct, en die sectie tekende zijn achtergrond over het uitstekende stuk. Band erboven leggen. */
.hbstory .sfeer{position:relative;z-index:3}
@media (max-width:820px){.hbstory .sfeer .sfeergids{bottom:-9%}}

/* Klantenband (28 sep): logo's en namen lopen rond, pauzeren onder de muis, staan stil bij minder beweging */
.hbstory .bewijs3 .b3namen{min-width:0}
.hbstory .bewijs3 .b3rij{display:flex;min-width:0;flex:1}
.hbstory .bewijs3 .b3rij.loopt{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)}
.hbstory .bewijs3 ul.b3spoor{display:flex;align-items:center;flex:none;gap:0 46px;margin:0 !important;padding:0 46px 0 0;overflow:visible !important;list-style:none}
.hbstory .bewijs3 .b3rij:not(.loopt) ul.b3spoor{flex-wrap:wrap;row-gap:14px;flex:1}
.hbstory .bewijs3 ul.b3spoor li{margin:0 !important;padding:0 !important;display:flex;align-items:center;min-height:40px}
.hbstory .bewijs3 ul.b3spoor li::before,.hbstory .bewijs3 ul.b3spoor li::after{display:none !important}
.hbstory .bewijs3 ul.b3spoor img{display:block;height:34px;width:auto;max-width:160px;object-fit:contain;opacity:.82}
.hbstory .bewijs3 ul.b3spoor li.b3tekst{font-size:1.02rem;font-weight:600;letter-spacing:-.012em;color:var(--inkt);white-space:nowrap}
.hbstory .bewijs3 .b3rij.loopt ul.b3spoor{animation:b3loop calc(var(--n) * 3.4s) linear infinite}
.hbstory .bewijs3 .b3rij.loopt:hover ul.b3spoor{animation-play-state:paused}
@keyframes b3loop{to{transform:translateX(-100%)}}
@media (min-width:821px){.hbstory .bewijs3 .wrap:not(.b3twee) .b3namen{align-items:center}}
@media (max-width:820px){.hbstory .bewijs3 ul.b3spoor img{height:28px;max-width:130px}.hbstory .bewijs3 ul.b3spoor{gap:0 34px;padding-right:34px}}
@media (prefers-reduced-motion:reduce){
  .hbstory .bewijs3 .b3rij.loopt{-webkit-mask-image:none;mask-image:none}
  .hbstory .bewijs3 .b3rij.loopt ul.b3spoor{animation:none;flex-wrap:wrap;row-gap:14px;flex:1}
  .hbstory .bewijs3 .b3rij.loopt ul.b3spoor[aria-hidden]{display:none}
}
.hbstory .bewijs3 ul.b3spoor img{opacity:1;filter:contrast(1.3)}
.hbstory .bewijs3 ul.b3spoor img.vierkant{height:48px;max-width:80px}
@media (max-width:820px){.hbstory .bewijs3 ul.b3spoor img.vierkant{height:40px}}

/* hulppagina: video 16:9 */
.hbstory .hbdoctekst .hbvideo{position:relative;aspect-ratio:16/9;margin:8px 0 26px;border-radius:var(--hoek,10px);overflow:hidden;background:#111}
.hbstory .hbdoctekst .hbvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 28 sep (Tessa: beeld naast 'Fits how you already work' niet sterk). Het handenbeeld is rechts en onder
   afgesneden waar de armen uit beeld lopen; los op de pagina vielen die snijlijnen in het niets. Nu staat het
   in een getint vlak met precies die randen, zodat de armen het vlak uit lopen. Beeld: hero-hand (scherp,
   actueel scherm, per taal) in plaats van inhand. */
@media(min-width:721px){.hbstory .fitsgrid{grid-template-columns:1fr 1fr 1fr}}
.hbstory .fitpic.v3hand{align-self:start;aspect-ratio:937/1270;min-height:0;height:auto;background-size:100% auto !important;background-position:right bottom !important;background-color:var(--tint,#ece4f2) !important;border-radius:var(--hoek,14px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--merkdiep,#5a3d7a) 8%,transparent)}

/* 28 sep, tweede ronde (Tessa: 'weer een AI-achtig beeld'). Het pastel vlak met zwevende handen is AI-patroon 1
   (pastel vlak per sectie) en de hand-render stond al drie keer op de pagina. Nu de echte balie-display, recht,
   los op de pagina: het gaat hier over hoe het past bij de balie en de ticketverkoop. */
.hbstory .fitpic.v3display{aspect-ratio:892/1300;background-color:transparent !important;background-size:contain !important;background-position:center bottom !important;box-shadow:none !important;border-radius:0 !important;overflow:visible;max-width:360px;width:100%;justify-self:start}