/* 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){
  /* 30 sep: dimmen bij hover weg, Martine las het als tekst die wegvalt */
  .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}

/* 28 sep, ronde door het uitvouwverhaal (Tessa: "niet top, duidelijk maken"). 1: de pijl "Visitor guide QR" eindigt
   bewust op de rand van het vel en leek daardoor bij Stand passport te horen; nu krijgt het QR-vak zelf een rand zolang
   de labels staan. 2: stapkoppen braken in de smalle kolom over vijf regels; kleiner, zodat ze in twee of drie passen. */
.hbstory .jstick.annon #pgstage .bqcell[data-tour="4"]>.mback{outline:2px solid var(--merkdiep,#3a4f9a);outline-offset:-2px}
@media (min-width:821px){.hbstory .jstep h3{font-size:clamp(1.5rem,1.05rem + 1.25vw,2.15rem) !important;line-height:1.1 !important}}

/* 28 sep (Tessa: kop "te veel en te druk, vooral in het Nederlands"): koppen ingekort tot ~45 tekens in alle talen,
   en de kop mag iets breder (13ch brak ook korte koppen over vier regels). */
@media (min-width:821px){.hbstory .h3 h1{max-width:min(16ch,calc(56vw - var(--links))) !important}}

/* 30 sep 2026 (feedback Martine op castle): het concept eerst. Drie nieuwe blokken in dezelfde taal als
   "Who it's for": kop links, rijen met een lijn, tekst in inkt, geen iconen of kaartjes, merkkleur alleen op de knop. */
.hbstory .pijlers .pjhead{margin:0 0 clamp(28px,4vw,44px)}
.hbstory .pijlers .pjhead h2{margin:0;max-width:22ch}
.hbstory .pijlers .pjhead p{margin:16px 0 0;max-width:62ch;font-size:1.05rem;line-height:1.6;color:var(--inkt)}
.hbstory .pijlers .pjrijen{list-style:none;margin:0;padding:0;border-top:1px solid var(--rand)}
.hbstory .pijlers .pjrij{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(20px,4vw,64px);padding:clamp(26px,3.5vw,40px) 0;border-bottom:1px solid var(--rand)}
.hbstory .pijlers .pjwie{display:flex;align-items:baseline;gap:18px}
.hbstory .pijlers .pjnr{font-size:clamp(2.4rem,1.8rem + 2vw,3.6rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--inkt)}
.hbstory .pijlers .pjwie h3{margin:0;font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);line-height:1.2;letter-spacing:-.015em}
.hbstory .pijlers .pjwat p{margin:0 0 12px;max-width:60ch;font-size:1.02rem;line-height:1.62;color:var(--inkt)}
.hbstory .pijlers .pjwat p:last-child{margin-bottom:0}
.hbstory .pijlers .pjwat p b{font-weight:700}
.hbstory .pijlers .pjwat .pjexample{color:var(--grijs)}
.hbstory .pijlers .pjwat .pjexample b{color:var(--inkt)}

.hbstory .roi{background:var(--papier)}
.hbstory .roi .roigrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start}
.hbstory .roi h2{margin:0 0 16px;max-width:18ch}
.hbstory .roi .roitekst>p{margin:0;max-width:52ch;font-size:1.05rem;line-height:1.6;color:var(--inkt)}
.hbstory .roi .roibewijs{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--rand)}
.hbstory .roi .roibewijs blockquote{margin:0;padding:0;border:0;font-size:1.02rem;font-style:normal;line-height:1.55;color:var(--inkt)}
.hbstory .roi .roibewijs figcaption{margin-top:10px;font-size:.84rem;line-height:1.4;color:var(--grijs)}
.hbstory .roi .roireken{display:grid;gap:16px;padding:clamp(22px,3vw,34px);background:#fff;border:1px solid var(--rand);border-radius:10px}
.hbstory .roi .roireken label{display:grid;gap:6px;font-size:.92rem;font-weight:600;color:var(--inkt)}
.hbstory .roi .roireken input{box-sizing:border-box;width:100%;padding:10px 12px;font:inherit;font-size:1.1rem;font-weight:600;color:var(--inkt);background:#fff;border:1px solid var(--rand);border-radius:10px}
.hbstory .roi .roireken input:focus{outline:2px solid var(--merkdiep,var(--gold));outline-offset:1px}
.hbstory .roi .roiuit{display:grid;gap:4px;margin:6px 0 0;padding-top:16px;border-top:1px solid var(--rand)}
.hbstory .roi .roiuit b{font-size:clamp(2rem,1.5rem + 2vw,3rem);line-height:1.05;letter-spacing:-.02em;color:var(--inkt)}
.hbstory .roi .roiuit>span{font-size:.95rem;color:var(--grijs)}
.hbstory .roi .roinoot{margin:0;font-size:.86rem;line-height:1.5;color:var(--grijs)}
.hbstory .roi .roireken .btn{justify-self:start}

.hbstory .klantcase .kcgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:end}
.hbstory .klantcase h2{margin:0 0 16px;max-width:20ch}
.hbstory .klantcase .kctekst>p{margin:0;max-width:56ch;font-size:1.05rem;line-height:1.6;color:var(--inkt)}
.hbstory .klantcase .kccitaat{margin:24px 0 0}
.hbstory .klantcase .kccitaat blockquote{margin:0;padding:0;border:0;font-size:1.1rem;font-style:normal;line-height:1.55;color:var(--inkt);quotes:"\201C" "\201D"}
.hbstory .klantcase .kccitaat blockquote::before{content:open-quote}
.hbstory .klantcase .kccitaat blockquote::after{content:close-quote}
.hbstory .klantcase .kccitaat figcaption{margin-top:10px;font-size:.84rem;color:var(--grijs)}
.hbstory .klantcase .kcfeiten{list-style:none;margin:0;padding:0;border-top:1px solid var(--rand)}
.hbstory .klantcase .kcfeiten li{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--rand)}
.hbstory .klantcase .kcfeiten b{min-width:4.5ch;font-size:clamp(2rem,1.5rem + 1.6vw,2.8rem);line-height:1;letter-spacing:-.02em;color:var(--inkt)}
.hbstory .klantcase .kcfeiten b.plain{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.hbstory .klantcase .kcfeiten span{font-size:1rem;color:var(--grijs)}

/* Martine: klantnamen groter */
.hbstory .bewijs3 ul.b3spoor img{height:44px !important;max-width:190px !important}
.hbstory .bewijs3 ul.b3spoor img.vierkant{height:60px !important;max-width:100px !important}
.hbstory .bewijs3 ul.b3spoor li.b3tekst{font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem) !important}

@media (max-width:820px){
  .hbstory .pijlers .pjrij,.hbstory .roi .roigrid,.hbstory .klantcase .kcgrid{grid-template-columns:1fr;gap:14px}
  .hbstory .roi .roigrid,.hbstory .klantcase .kcgrid{gap:28px}
  .hbstory .bewijs3 ul.b3spoor img{height:36px !important;max-width:150px !important}
  .hbstory .bewijs3 ul.b3spoor img.vierkant{height:48px !important;max-width:80px !important}
}

/* 30 sep: de nieuwe blokken kregen via .sec de pastel tint (patroon 1 van rust.css). Wit en papier om en om. */
.hbstory section.pijlers,.hbstory section.klantcase{background:#fff !important}
.hbstory section.roi{background:var(--papier) !important}
.hbstory .klantcase .kcfeiten li{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:18px;align-items:baseline}
.hbstory .klantcase .kcfeiten b,.hbstory .klantcase .kcfeiten b.plain{min-width:0;font-size:clamp(1.4rem,1.15rem + .9vw,1.9rem)}

/* 30 sep: het dagverhaal in de uitvouwanimatie. Het label is de pijler (1, 2, 3 zoals het blok erboven), niet het stapnummer. */
.hbstory .physical.dagv .jstep .je::before{content:attr(data-pijler) " · " !important;counter-increment:none}
/* licht.css en v3.css verbergen oude stapnummers (3,4,5,7,8 en 1,12,13,14). In het dagverhaal staan alleen gekozen stappen. */
.hbstory .physical.dagv .jstep[data-step]{display:flex !important}

/* 30 sep (Martine, video): de regel "Free sample · live in 2 to 3 weeks" moet opvallen (pages.home.hero3_bewijs_groot). */
.hbstory .h3 .h3bewijs.groot{display:inline-block;margin-top:18px;padding:9px 16px;font-size:1rem;font-weight:600;line-height:1.4;color:#fff !important;background:rgba(0,0,0,.42);border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hbstory .h3 .h3bewijs.groot{max-width:none !important;white-space:nowrap;font-size:.95rem}
@media (max-width:820px){.hbstory .h3 .h3bewijs.groot{white-space:normal;display:block;padding:12px 14px;border-radius:12px;color:var(--inkt) !important;background:#fff;border:1px solid var(--rand);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* 30 sep: beeld bij de pijlers, logo's en de Booqi van de klant. Alleen echte beelden van het eigen product. */
.hbstory .pijlers .pjwie{display:block}
.hbstory .pijlers .pjkop{display:flex;align-items:baseline;gap:18px}
.hbstory .pijlers .pjbeeld{margin:22px 0 0}
.hbstory .pijlers .pjbeeld img{display:block;height:auto}
.hbstory .pijlers .pj-kaart img{width:100%;max-width:440px}
.hbstory .pijlers .pj-foto img{width:78%;max-width:340px;border-radius:10px}
.hbstory .pijlers .pj-scherm img{width:54%;max-width:230px;border-radius:24px;border:1px solid var(--rand);box-shadow:0 18px 40px -22px rgba(20,24,32,.35)}
.hbstory .roi .roilogo{display:block;height:46px;width:auto;margin:0 0 14px}
.hbstory section.klantcase{padding-bottom:0 !important;overflow:hidden}
.hbstory .klantcase .kcgrid{align-items:end}
.hbstory .klantcase .kctekst{padding-bottom:clamp(38px,4.6vw,68px)}
.hbstory .klantcase .kclogo{display:block;height:64px;width:auto;margin:0 0 20px}
.hbstory .klantcase .kcfeiten{margin-top:26px}
.hbstory .klantcase .kcbeeld{margin:0;align-self:end}
.hbstory .klantcase .kcbeeld img{display:block;width:100%;max-width:560px;height:auto;margin-left:auto}
@media (max-width:820px){
  .hbstory .pijlers .pj-kaart img{max-width:100%}
  .hbstory .klantcase .kctekst{padding-bottom:0}
  .hbstory .klantcase .kcbeeld img{max-width:420px;margin:0 auto}
}
.hbstory .pijlers .pj-foto img{width:62%;max-width:280px}
.hbstory .pijlers .pj-scherm img{width:44%;max-width:200px}
@media (min-width:821px){.hbstory .klantcase .kcbeeld{margin-right:calc(-1 * var(--links))}.hbstory .klantcase .kcbeeld img{max-width:none;width:calc(100% + var(--links))}}

/* 30 sep, ronde 2 (Tessa: "veel tekst, mensen gaan het niet lezen"): de pijlers dragen op het beeld.
   Groot beeld, om en om links en rechts, naast alleen de pijlernaam, één uitkomst en hoe je het meet. */
.hbstory .pijlers.pjbeeldig .pjhead{margin:0 0 clamp(8px,2vw,20px)}
.hbstory .pijlers.pjbeeldig .pjrijen{border-top:0}
.hbstory .pijlers.pjbeeldig .pjrij{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px);padding:clamp(28px,4vw,56px) 0;border-bottom:0}
.hbstory .pijlers.pjbeeldig .pjrij:nth-child(even) .pjbeeld{order:2}
.hbstory .pijlers.pjbeeldig .pjbeeld{margin:0;display:flex;justify-content:center;align-items:center}
.hbstory .pijlers.pjbeeldig .pj-kaart img{width:100%;max-width:520px}
.hbstory .pijlers.pjbeeldig .pj-foto img{width:auto;max-width:100%;max-height:420px}
.hbstory .pijlers.pjbeeldig .pj-scherm img{width:auto;max-width:100%;max-height:440px}
.hbstory .pijlers.pjbeeldig .pjnaam{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;font-size:1rem;font-weight:600;color:var(--merkdiep,var(--gold))}
.hbstory .pijlers.pjbeeldig .pjnaam .pjnr{font-size:1rem;letter-spacing:0;color:inherit}
.hbstory .pijlers.pjbeeldig .pjnaam .pjnr::after{content:" ·"}
.hbstory .pijlers.pjbeeldig .pjtekst h3{margin:0 0 18px;max-width:17ch;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.1;letter-spacing:-.02em;color:var(--inkt)}
.hbstory .pijlers.pjbeeldig .pjmeet{margin:0;max-width:40ch;font-size:1rem;line-height:1.55;color:var(--grijs)}
.hbstory .pijlers.pjbeeldig .pjmeet b{color:var(--inkt)}

/* Blarney compact: hun Booqi in een klein vak, de arm loopt uit het vak (geen snijrand), feiten naast elkaar */
.hbstory section.klantcase{padding-bottom:clamp(38px,4.6vw,68px) !important}
.hbstory .klantcase .kcgrid{grid-template-columns:minmax(0,280px) minmax(0,1fr) !important;align-items:center !important}
.hbstory .klantcase .kcbeeld{order:-1;position:relative;margin:0 !important;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--papier)}
.hbstory .klantcase .kcbeeld img{position:absolute;left:-6%;bottom:-8%;width:124% !important;max-width:none !important;margin:0 !important}
.hbstory .klantcase .kctekst{padding-bottom:0 !important}
.hbstory .klantcase h2{max-width:none;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem)}
.hbstory .klantcase .kclogo{height:52px;margin-bottom:16px}
.hbstory .klantcase .kcfeiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px;padding-top:18px;border-top:1px solid var(--rand)}
.hbstory .klantcase .kcfeiten li{display:block !important;padding:0;border:0}
.hbstory .klantcase .kcfeiten b,.hbstory .klantcase .kcfeiten b.plain{display:block;font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem)}
.hbstory .klantcase .kcfeiten span{display:block;margin-top:4px;font-size:.92rem}

@media (max-width:820px){
  .hbstory .pijlers.pjbeeldig .pjrij{grid-template-columns:1fr;gap:18px}
  .hbstory .pijlers.pjbeeldig .pjrij:nth-child(even) .pjbeeld{order:0}
  .hbstory .pijlers.pjbeeldig .pj-foto img{max-height:320px}
  .hbstory .pijlers.pjbeeldig .pj-scherm img{max-height:340px}
  .hbstory .klantcase .kcgrid{grid-template-columns:1fr !important}
  .hbstory .klantcase .kcbeeld{width:220px}
  .hbstory .klantcase .kcfeiten{gap:14px}
}
.hbstory .klantcase .kcbeeld img{width:172% !important;left:-6% !important;top:7% !important;bottom:auto !important}

/* 30 sep, ronde 3: de pijlers als story. Drie balkjes naast elkaar, één podium. Alleen echte productbeelden. */
.hbstory .pjs{margin-top:clamp(18px,3vw,34px)}
.hbstory .pjs-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.hbstory .pjs-tab{display:block;padding:0 0 14px;margin:0;text-align:left;font:inherit;color:var(--grijs);background:none;border:0;cursor:pointer}
.hbstory .pjs-bar{display:block;height:3px;margin:0 0 12px;overflow:hidden;background:var(--rand);border-radius:3px}
.hbstory .pjs-bar i{display:block;height:100%;width:0;background:var(--merkdiep,var(--gold))}
.hbstory .pjs-tab.klaar .pjs-bar i{width:100%}
.hbstory .pjs-tab.on .pjs-bar i{width:100%}
.hbstory .pjs.speelt .pjs-tab.on .pjs-bar i{width:0;animation:pjsLoop var(--pjs-duur,7s) linear forwards}
.hbstory .pjs.pauze .pjs-tab.on .pjs-bar i{animation-play-state:paused}
@keyframes pjsLoop{to{width:100%}}
.hbstory .pjs-naam{font-size:1rem;font-weight:600;line-height:1.3}
.hbstory .pjs-naam b{margin-right:4px}
.hbstory .pjs-tab.on .pjs-naam,.hbstory .pjs-tab:hover .pjs-naam{color:var(--inkt)}
.hbstory .pjs-tab:focus-visible{outline:2px solid var(--merkdiep,var(--gold));outline-offset:4px;border-radius:4px}
.hbstory .pjs-stage{display:grid;margin-top:clamp(18px,2.6vw,30px)}
.hbstory .pjs-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px);min-height:clamp(380px,40vw,500px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s}
.hbstory .pjs-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .5s ease,visibility 0s}
.hbstory .pjs-beeld{margin:0;display:flex;justify-content:center;align-items:center}
.hbstory .pjs-beeld.pj-kaart img{width:100%;max-width:540px}
.hbstory .pjs-beeld.pj-foto img{max-width:100%;max-height:460px;border-radius:10px}
.hbstory .pjs-beeld.pj-scherm img{max-width:100%;max-height:470px;border-radius:26px;border:1px solid var(--rand);box-shadow:0 18px 40px -22px rgba(20,24,32,.35)}
.hbstory .pjs-tekst .pjnaam{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;font-size:1rem;font-weight:600;color:var(--merkdiep,var(--gold))}
.hbstory .pjs-tekst .pjnr{font-size:1rem;letter-spacing:0;color:inherit}
.hbstory .pjs-tekst .pjnr::after{content:" ·"}
.hbstory .pjs-tekst h3{margin:0 0 18px;max-width:16ch;font-size:clamp(1.8rem,1.2rem + 2vw,2.9rem);line-height:1.08;letter-spacing:-.02em;color:var(--inkt)}
.hbstory .pjs-tekst .pjmeet{margin:0;max-width:40ch;font-size:1rem;line-height:1.55;color:var(--grijs)}
.hbstory .pjs-tekst .pjmeet b{color:var(--inkt)}
/* zonder JavaScript: alle drie onder elkaar */
.hbstory .pjs:not(.js) .pjs-slide{grid-area:auto;opacity:1;visibility:visible;transform:none;margin-bottom:40px}
.hbstory .pjs:not(.js) .pjs-tabs{display:none}
@media (prefers-reduced-motion:reduce){.hbstory .pjs-slide,.hbstory .pjs-slide.on{transition:none;transform:none}}
@media (max-width:820px){
  .hbstory .pjs-tabs{gap:8px}
  .hbstory .pjs-naam{font-size:.82rem}
  .hbstory .pjs-slide{grid-template-columns:1fr;gap:20px;min-height:0;align-items:start}
  .hbstory .pjs-beeld.pj-foto img,.hbstory .pjs-beeld.pj-scherm img{max-height:320px}
  .hbstory .pjs-tekst h3{font-size:clamp(1.6rem,1.2rem + 2vw,2.1rem)}
}
.hbstory .pjs-tabs{align-items:start}
.hbstory .pjs-tekst .pjnaam{display:none}
.hbstory .pjs-slide{min-height:clamp(320px,32vw,440px)}
.hbstory .pjs-stage{margin-top:clamp(8px,1.4vw,16px)}
.hbstory .pijlers .pjs-tekst .pjnaam{display:none !important}

/* 30 sep, ronde 4 (Tessa: "mensen scrollen er voorbij", "app-schermpje niet sterk"): scrollgestuurd podium op desktop,
   en de app in de telefoon van de site (zelfde rand als .phone in newhome.css, eigen kopie). */
.hbstory .pjs .pjs-bar i{width:var(--v,0%) !important;animation:none !important;transition:width .12s linear}
@media (min-width:821px){
  .hbstory .pjs.js{height:calc(100vh + var(--n,3) * 60vh)}
  .hbstory .pjs.js .pjs-pin{position:sticky;top:84px;padding-top:6px;background:inherit}
}
.hbstory .pjs-tel{position:relative;width:min(262px,78%);padding:9px;border-radius:44px;background:linear-gradient(155deg,#43434a,#101012 52%,#2a2a30);box-shadow:0 46px 84px -34px rgba(12,14,20,.55),0 0 0 1px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.07);transform:rotate(-3deg)}
.hbstory .pjs-tel::before{content:"";position:absolute;left:-2px;top:112px;width:3px;height:30px;border-radius:3px 0 0 3px;background:#17171a;box-shadow:0 42px 0 #17171a}
.hbstory .pjs-tel::after{content:"";position:absolute;right:-2px;top:146px;width:3px;height:52px;border-radius:0 3px 3px 0;background:#17171a}
.hbstory .pjs-tel img{display:block;width:100% !important;max-height:none !important;height:auto;border:0 !important;border-radius:36px !important;box-shadow:none !important}
.hbstory .pjs-eiland{position:absolute;top:18px;left:50%;width:31%;height:22px;margin-left:-15.5%;border-radius:12px;background:#0b0b0d;z-index:2}
.hbstory .pjs-beeld.pj-scherm{padding:10px 0 20px}
@media (max-width:820px){.hbstory .pjs-tel{width:min(220px,62%)}}
@media (max-width:820px){.hbstory .pijlers .pjs-tekst .pjnaam{display:flex !important}.hbstory .pjs-slide{margin-bottom:44px}}

/* 30 sep (Tessa: "hoe voorkomen we dat bezoekers geirriteerd raken"): korter vast, niet bij minder beweging of lage schermen. */
@media (min-width:821px){.hbstory .pjs.js{height:calc(100vh + var(--n,3) * 35vh)}}
@media (min-width:821px) and (max-height:720px),(prefers-reduced-motion:reduce){
  .hbstory .pjs.js{height:auto}
  .hbstory .pjs.js .pjs-pin{position:static}
  .hbstory .pjs.js .pjs-tabs{display:none}
  .hbstory .pjs.js .pjs-slide{grid-area:auto;opacity:1;visibility:visible;transform:none;margin-bottom:40px}
  .hbstory .pijlers .pjs-tekst .pjnaam{display:flex !important}
}
@media (min-width:821px){.hbstory .physical.dagv .jstep{min-height:62vh !important}}
/* Blarney zonder productbeeld: logo groot links, tekst rechts */
.hbstory .klantcase .kcgrid.zonder{grid-template-columns:minmax(0,220px) minmax(0,1fr) !important;align-items:start !important}
.hbstory .klantcase .kcgrid.zonder .kclogo{height:auto;width:100%;max-width:200px;margin:8px 0 0}
@media (max-width:820px){.hbstory .klantcase .kcgrid.zonder .kclogo{max-width:140px}}

/* 30 sep, ronde 6: de pijlers als stilstaande strook (geen tweede slider). Tekst met een lijn erboven, groot nummer. */
.hbstory .pijlers .pjstrook{list-style:none;margin:clamp(20px,3vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,56px)}
.hbstory .pijlers .pjstrook li{padding-top:18px;border-top:2px solid var(--inkt)}
.hbstory .pijlers .pjstrook .pjs-nr{display:block;font-size:clamp(2.6rem,2rem + 2vw,3.8rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--inkt)}
.hbstory .pijlers .pjstrook .pjs-naam{margin:14px 0 8px;font-size:.98rem;font-weight:600;color:var(--merkdiep,var(--gold))}
.hbstory .pijlers .pjstrook h3{margin:0 0 14px;font-size:clamp(1.3rem,1.05rem + .8vw,1.7rem);line-height:1.2;letter-spacing:-.015em;color:var(--inkt)}
.hbstory .pijlers .pjstrook .pjmeet{margin:0 0 16px;font-size:.96rem;line-height:1.55;color:var(--grijs)}
.hbstory .pijlers .pjstrook .pjmeet b{color:var(--inkt)}
.hbstory .pijlers .pjstrook .pjs-naar{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--merkdiep,var(--gold));text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.hbstory .pijlers .pjstrook .pjs-naar::after{content:"\2193"}
.hbstory .pijlers .pjhead p{max-width:52ch}
.hbstory .physical.dagv .jstep{scroll-margin-top:32vh}
@media (max-width:820px){.hbstory .pijlers .pjstrook{grid-template-columns:1fr;gap:28px}}

/* 30 sep, ronde 7: de pijlers als hoofdstukken. Wit en #f6f5f2 om en om, kop links, één echt beeld, geen kaartjes. */
.hbstory section.hoofdstuk{background:#fff}
.hbstory section.hoofdstuk.h-even,.hbstory section.roi.inh{background:#f6f5f2 !important}
.hbstory .hoofdstuk .hgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px);min-height:min(78vh,720px)}
.hbstory .hoofdstuk.h-even .hbeeld{order:-1}
.hbstory .hoofdstuk .hlabel{display:flex;align-items:center;gap:14px;margin:0 0 20px;font-size:1rem;font-weight:600;color:var(--merkdiep,var(--gold))}
.hbstory .hoofdstuk .hnr{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:2px solid currentColor;font-size:1.25rem;font-weight:700}
.hbstory .hoofdstuk h2{margin:0 0 22px;max-width:15ch;font-size:clamp(2.1rem,1.4rem + 2.6vw,3.5rem);line-height:1.04;letter-spacing:-.025em;color:var(--inkt)}
.hbstory .hoofdstuk .hantw{margin:0 0 18px;max-width:44ch;font-size:clamp(1.08rem,1rem + .3vw,1.22rem);line-height:1.55;color:var(--inkt)}
.hbstory .hoofdstuk .hmeet{margin:0 0 20px;max-width:46ch;font-size:.98rem;line-height:1.55;color:var(--grijs)}
.hbstory .hoofdstuk .hmeet b{color:var(--inkt)}
.hbstory .hoofdstuk .hnaar{display:inline-flex;gap:6px;font-weight:600;color:var(--merkdiep,var(--gold));text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.hbstory .hoofdstuk .hnaar::after{content:"\2193"}
.hbstory .hoofdstuk .hbeeld{margin:0;display:flex;justify-content:center;align-items:center}
.hbstory .hoofdstuk .h-foto img{max-width:100%;max-height:520px;border-radius:12px}
.hbstory .hoofdstuk .h-kaart img{width:100%;max-width:580px}
.hbstory .hoofdstuk .h-scherm{padding:12px 0 24px}
.hbstory section.roi.inh{padding-top:0 !important}
/* de hero-kop is de belofte: elk deel springt naar zijn hoofdstuk */
.hbstory .h3 h1 a.h3pk{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em;text-decoration-color:rgba(255,255,255,.45)}
.hbstory .h3 h1 a.h3pk:hover{text-decoration-color:currentColor}
@media (max-width:820px){
  .hbstory .h3 h1 a.h3pk{text-decoration-color:rgba(0,0,0,.25)}
  .hbstory .hoofdstuk .hgrid{grid-template-columns:1fr;min-height:0;gap:24px}
  .hbstory .hoofdstuk.h-even .hbeeld{order:0}
  .hbstory .hoofdstuk .h-foto img{max-height:360px}
}
.hbstory section.roi.inh h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);max-width:22ch}

/* 30 sep: pijlernamen prominenter. Groter kopje per hoofdstuk en een vaste balk onder het menu in de hoofdstukken. */
.hbstory .hoofdstuk .hlabel{gap:16px;margin-bottom:24px}
.hbstory .hoofdstuk .hnr{width:58px;height:58px;font-size:1.5rem;flex:none}
.hbstory .hoofdstuk .hnaamblok{display:flex;flex-direction:column;line-height:1.15}
.hbstory .hoofdstuk .hnaamblok small{font-size:.86rem;font-weight:600;color:var(--grijs)}
.hbstory .hoofdstuk .hnaamblok b{font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);font-weight:700;color:var(--merkdiep,var(--gold))}
.pijlerbalk{position:fixed;left:0;right:0;top:var(--pbtop,64px);z-index:60;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rand,#e2dccf);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.pijlerbalk.aan{opacity:1;transform:none;pointer-events:auto}
.pijlerbalk[hidden]{display:block}
.pijlerbalk .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,28px)}
.pijlerbalk a{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 0 9px;font-size:.95rem;font-weight:600;color:var(--grijs,#5c5850);text-decoration:none;border-bottom:3px solid transparent}
.pijlerbalk a .pbnr{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid currentColor;font-size:.8rem}
.pijlerbalk a .pbnaam{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pijlerbalk a.on{color:var(--merkdiep,#2d4f8a);border-bottom-color:currentColor}
@media (max-width:820px){.pijlerbalk a{font-size:.74rem;gap:6px}.pijlerbalk a .pbnr{width:20px;height:20px;font-size:.7rem}}
@media (prefers-reduced-motion:reduce){.pijlerbalk{transition:none}}

/* 30 sep (Tessa: "de insert nog wat te veel AI"): castle-vakken in de lijn van de dummy's van 29 sep (Kunstareal).
   Voucher = foto boven, wit vlak met klein label, titel en regel; infovlak wit met inkt; QR met zilveren rand.
   Eerst alleen castle (body.market-castle), de andere markten volgen na akkoord. */
body.market-castle .hbstory .bqface.offer.photo{background-color:#fff !important;background-size:100% 56% !important;background-position:top center !important;background-repeat:no-repeat !important;justify-content:flex-start}
body.market-castle .hbstory .bqface.offer.photo::after{display:none !important}
body.market-castle .hbstory .bqface.offer .oseal{display:none !important}
body.market-castle .hbstory .bqface.offer .obar{position:absolute !important;left:0;right:0;top:56%;bottom:0;display:flex;flex-direction:column;gap:2px;padding:6px 7px 6px !important;background:#fff;border-top:1px solid #e6e3dc}
body.market-castle .hbstory .bqface.offer .obar::before{content:"Voucher";display:flex;align-items:center;gap:3px;font-size:5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1771f0;line-height:1}
body.market-castle .hbstory #pgstage .obar b{color:#1c2230 !important;font-size:8px !important;line-height:1.15 !important;text-transform:none !important;letter-spacing:-.01em !important}
body.market-castle .hbstory #pgstage .obar i{color:#5c5850 !important;font-size:6px !important;line-height:1.3;display:block}
body.market-castle .hbstory .bqface.c-gold{background:#fff !important;border-left:1px solid #e6e3dc}
body.market-castle .hbstory .bqface.c-gold .bqeb{color:#1771f0 !important}
body.market-castle .hbstory .bqface.c-gold .bqti,body.market-castle .hbstory .bqface.c-gold .bqmini i b{color:#1c2230 !important}
body.market-castle .hbstory .bqface.c-gold .bqmini i{color:#5c5850 !important}
body.market-castle .hbstory .bqqf{padding:5px !important;border-radius:9px !important;background:#fff !important;box-shadow:0 0 0 3px #e9ebee,0 0 0 4.5px #b9bec5,0 3px 8px rgba(0,0,0,.35) !important}

/* 30 sep, ronde 2 (Tessa: "minder wit, en niet dat felle blauw voor de Booqi, dat maakt het goedkoop"): het drukwerk op het
   podium in diep kasteelblauw (#1F3A66) en steentint (#EFEAE1), gelijk aan card.print_accent/print_papier. */
body.market-castle .hbstory .bqface.offer .obar::before{color:#1F3A66 !important}
body.market-castle .hbstory .bqface.offer .obar{border-top-color:#ddd5c8 !important}
body.market-castle .hbstory .bqface.c-gold{background:#EFEAE1 !important;border-left-color:#ddd5c8 !important}
body.market-castle .hbstory .bqface.c-gold .bqeb{color:#1F3A66 !important}

/* 30 sep, audit (Tessa: "veel witruimte"): hoofdstukken zonder vaste minimumhoogte, dagverhaal strakker,
   ROI-knop met genoeg contrast, vouchers op de voorkant in steentint i.p.v. wit. */
.hbstory .hoofdstuk .hgrid{min-height:0 !important}
.hbstory section.hoofdstuk{padding-top:clamp(40px,5vw,72px) !important;padding-bottom:clamp(40px,5vw,72px) !important}
@media (min-width:821px){.hbstory .physical.dagv .jstep{min-height:55vh !important}}
.hbstory .roi .roireken .btn{background:var(--merkdiep,#2d4f8a) !important}
body.market-castle .hbstory .bqface.offer.photo{background-color:#EFEAE1 !important}
body.market-castle .hbstory .bqface.offer .obar{background:#EFEAE1 !important;border-top-color:#ddd5c8 !important}

/* 30 sep, audit (Tessa: "op de website ook nog veel witruimte"): 9vw (130 px) boven en onder elk blok werd met 14 blokken
   ruim twee schermen lucht. Nu hooguit 84 px. Alle v3-markten. */
.hbstory section.sec:not(.hoofdstuk):not(.roi),.hbstory section.proc,.hbstory section.faq{padding-top:clamp(48px,5.8vw,84px) !important;padding-bottom:clamp(48px,5.8vw,84px) !important}
.hbstory section#how{padding-top:clamp(48px,5.8vw,84px) !important;padding-bottom:clamp(48px,5.8vw,84px) !important}

/* 30 sep, ronde 9 (Tessa: "lelijke kaders ai", "dubbele images"): geen vak meer om de beelden. Elk hoofdstuk heeft
   een eigen opstelling van echte renders (FRONT/BACK uitgevouwen, telefoon, hand). Loopt een render uit het beeld
   (een arm), dan valt die rand op de schermrand (rand-l, rand-r) of op de onderkant van de sectie (rand-o), met een
   andere tint eronder: een arm houdt nooit midden op de pagina op. Kant en rand per hoofdstuk in tools/concept.py. */
.hbstory section.hoofdstuk{overflow-x:clip;--hbleed:calc(max(0px,(100vw - 1120px) / 2) + 26px)}
.hbstory section.hoofdstuk.h-bg-steen{background:#f6f5f2 !important}
.hbstory section.hoofdstuk.h-bg-wit{background:#fff !important}
.hbstory .hoofdstuk.h-beeld-links .hbeeld{order:-1}
.hbstory .hoofdstuk.h-beeld-rechts .hbeeld{order:0}
.hbstory .hoofdstuk .h-render{display:block;width:100%}
.hbstory .hoofdstuk .hrender{display:block;width:100%;height:auto}
.hbstory .hoofdstuk .hbeeld.rand-l{margin-left:calc(-1 * var(--hbleed));width:calc(100% + var(--hbleed))}
.hbstory .hoofdstuk .hbeeld.rand-r{margin-right:calc(-1 * var(--hbleed));width:calc(100% + var(--hbleed))}
.hbstory section.hoofdstuk.h-rand-o{padding-bottom:0 !important}
.hbstory .hoofdstuk .hbeeld.rand-o{align-self:end}
.hbstory .hoofdstuk.h-rand-o .htekst{padding-bottom:clamp(40px,5vw,72px)}
@media (max-width:820px){.hbstory .hoofdstuk.h-beeld-links .hbeeld{order:0}.hbstory .hoofdstuk.h-rand-o .htekst{padding-bottom:0}}
/* onder een hoofdstuk waar de arm onder uit het beeld loopt, begint het rekenvoorbeeld als eigen vlak, met lucht */
.hbstory section.hoofdstuk.h-rand-o + section.roi.inh{padding-top:clamp(44px,5.5vw,80px) !important}
/* een beeld zonder aflopende rand mag de buitenmarge in, zodat het niet kleiner oogt dan de aflopende beelden */
@media (min-width:821px){
  .hbstory .hoofdstuk.h-beeld-links .hbeeld.h-render:not(.rand-l) .hrender{width:118%;max-width:none;margin-left:-18%}
  .hbstory .hoofdstuk.h-beeld-rechts .hbeeld.h-render:not(.rand-r) .hrender{width:118%;max-width:none;margin-right:-18%}
}

/* 13 okt 2026 (Nout, op 1909 px breed: "de handen staan te ver naar de buitenkant en links is hij erg ver naar binnen
   ingelijnd"). Op een breed scherm stond de inhoud in een kolom van 1120 px (tekst pas op 420 px) terwijl de hand in de hero
   en de renders in de hoofdstukken tot de schermrand liepen. Vanaf 1480 px is de kolom 1320 px, de hand staat binnen de
   rechterlijn van de inhoud en een arm in de hoofdstukken loopt tot de schermrand (anders houdt hij midden op de pagina op). */
@media (min-width:1480px){
  .hbstory{--links:calc((100vw - 1320px) / 2 + 26px)}
  body .hbstory .wrap,body .hbstory .dg .wrap,body .hbstory .voetmerk,body .tel3rij{max-width:1320px}
  .hbstory section.hoofdstuk{--hbleed:calc((100vw - 1320px) / 2 + 26px)}   /* een arm (rand-l, rand-r) loopt nog steeds tot de schermrand */
  .hbstory .h3hand{right:calc(var(--links) - 70px);max-width:44%}
  .hbstory .h3tekst>*{max-width:min(700px,calc(52vw - var(--links)))}
}


/* 13 okt 2026 (Nout: "de handen naast elkaar, van onder", "de hand met de telefoon is te ver afgesneden", geen kader of fade).
   De hero-handen zijn nu een beeld met de gids en de telefoon naast elkaar, beide armen van onderen. Ze staan op de onderrand
   van de hero (niets meer afgesneden, echt.css zette bottom -10% en height 107%) en binnen de rechterlijn van de inhoud.
   Alleen voor markten met dat nieuwe beeld (handen/samen.py); een markt met de oude hand (arm van rechts) erbij zetten zou de arm
   midden in de lucht afsnijden. */
@media (min-width:821px){
  body.market-museum .hbstory .h3tekst>*:not(h1),body.market-themepark .hbstory .h3tekst>*:not(h1){max-width:min(600px,calc(50vw - var(--links))) !important}
  body.market-museum .hbstory .h3hand,body.market-themepark .hbstory .h3hand{right:calc(var(--links) - 24px) !important;bottom:0 !important;height:88% !important;max-width:max(320px,min(46%,calc(100vw - 2 * var(--links) - 640px))) !important;object-fit:contain;object-position:right bottom}
}
@media (max-width:820px){
  body.market-museum .hbstory .h3hand,body.market-themepark .hbstory .h3hand{right:50% !important;transform:translateX(50%);bottom:0 !important;height:94% !important;max-width:92% !important}
}
/* Museum hero: product mockup (covers, phone and the unfolded sheet) instead of hands, 13 okt 2026 */
@media (min-width:821px){
  body.market-museum .hbstory .h3hand{right:calc(var(--links) - 40px) !important;bottom:7% !important;height:84% !important;max-width:max(360px,min(50%,calc(100vw - 2 * var(--links) + 10px - min(600px,50vw - var(--links))))) !important;object-position:right center !important;filter:none !important}
}
@media (max-width:820px){
  body.market-museum .hbstory .h3hand{height:90% !important;bottom:5% !important;filter:none !important}
}

/* Hotel hero: rustige productmockup (de uitgevouwen HotelBooqi, de covers met de keycard en de telefoon met BooqiConnect) in plaats
   van handen, zoals museum (8995937), 13 okt 2026 */
@media (min-width:821px){
  body.market-hotel .hbstory .h3hand{right:calc(var(--links) - 40px) !important;bottom:7% !important;height:84% !important;max-width:max(360px,min(50%,calc(100vw - 2 * var(--links) - 600px))) !important;filter:none !important}
}
@media (max-width:820px){
  body.market-hotel .hbstory .h3hand{height:90% !important;bottom:5% !important;filter:none !important}
}

/* Hero op smalle schermen voor elke markt (13 okt 2026, Nout: "dit fixen voor iedereen", "zonder kader alleen die losse mockup"):
   geen fotokader met een bijgesneden beeld, maar het herobeeld los, heel en gecentreerd boven de tekst. */
@media (max-width:820px){
  html body .hbstory .h3kader .h3beeld{background:none !important;border-radius:0 !important;box-shadow:none !important;
    height:clamp(260px,78vw,440px) !important;overflow:visible !important;animation:none !important}
  html body .hbstory .h3kader .h3beeld::before,html body .hbstory .h3kader .h3beeld::after{display:none !important}
  html body .hbstory .h3kader .h3hand{left:50% !important;right:auto !important;top:auto !important;bottom:0 !important;transform:translateX(-50%) !important;
    height:100% !important;width:auto !important;max-width:100% !important;object-fit:contain !important;object-position:center bottom !important;filter:none !important}
}