/* Rust (25 sep 2026). Tessa: "de site voelt nog super AI". Naast Mews, Apaleo en
   Cuseum gelegd waren het zeven dingen: pastel merkkleur als achtergrond in elke
   sectie, tweekleurige koppen, sloganfragmenten ("Scan. Open. Explore."),
   kapitalen-labeltjes met een streepje, rasters van icoon + titel + tekst, een
   nep-dashboard met stockfoto's, en alles gecentreerd. Dit haalt ze weg: neutraal
   wit en gebroken wit, koppen in één kleur en links, de merkkleur alleen op
   knoppen, links en één vlak. */
.hbstory{--papier:#f6f5f2;--wit:#ffffff;--rand:#e5e2dc;--grijs:#5c5850;--inkt:#1c1a17}

/* 1. achtergronden: wit en gebroken wit om en om, geen merkpastel */
.hbstory .hero{background:var(--papier) !important}
.hbstory .topnav,.hbstory .topnav:not(.scrolled),.hbstory .topnav.scrolled{background:rgba(246,245,242,.94) !important}
.hbstory .wie{background:var(--wit) !important}
.hbstory .zondermet{background:var(--papier) !important;border-bottom:0 !important}
.hbstory .physical{background:var(--wit) !important}
.hbstory .dagmet{background:var(--papier) !important}
.hbstory .why{background:var(--wit) !important}
.hbstory .results,.hbstory .casestudy{background:var(--papier) !important}
.hbstory .fits{background:var(--papier) !important}
.hbstory .proc,.hbstory #how{background:var(--wit) !important}
.hbstory .faq{background:var(--papier) !important}
.hbstory .pricing{background:var(--wit) !important}
.hbstory .physical .sustain{background:var(--papier) !important;border:0 !important}

/* 2. koppen in één kleur (het castle-cursief blijft, maar in inkt) */
.hbstory h1 span,.hbstory h2 span,.hbstory h2 .gold-shine,.hbstory .shead2 span,.hbstory .physical .ritual span{
  color:inherit !important;-webkit-text-fill-color:currentColor !important;background:none !important;animation:none !important}
.hbstory .cta-final h2 span{text-decoration:none !important}
.hbstory .physical .stbig{color:var(--inkt) !important}

/* 3 en 4. geen slogans en geen kapitalen-labeltjes */
.hbstory .act,.hbstory .eyebrow,.hbstory .prail,.hbstory .physical .ritual,.hbstory .hero .kicker .rit,.hbstory .trustband{display:none !important}
.hbstory .jstep .je{text-transform:none !important;letter-spacing:0 !important;font-size:.92rem !important;font-weight:600 !important}
.hbstory .zmkop span{letter-spacing:0}

/* 7. links uitlijnen */
.hbstory .physhead,.hbstory .shead2,.hbstory .prochead,.hbstory .faqhead,.hbstory .results .shead2{text-align:left !important;margin-left:0 !important;margin-right:0 !important}
.hbstory .physhead p,.hbstory .prochead p,.hbstory .shead2 p{margin-left:0 !important;margin-right:0 !important}
.hbstory .faqlist{margin-left:0 !important;margin-right:0 !important}
.hbstory .physhead h2,.hbstory .shead2 h2,.hbstory .prochead h2,.hbstory .faqhead h2,.hbstory .why h2{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem) !important;line-height:1.1 !important;letter-spacing:-.025em !important;max-width:22ch}

/* 5. geen icoonrasters: tekst met een lijn erboven */
.hbstory .lfeat .lfi,.hbstory .priceinc .gdk,.hbstory .priceinc .pi > svg,.hbstory .priceinc .pi > span:first-child:empty{display:none !important}
.hbstory .lfeat .lf{border-top:1px solid var(--rand);padding-top:14px}
.hbstory .priceinc .pi{border-top:1px solid var(--rand);padding-top:14px}
.hbstory .fitcol li::before{display:none !important}
.hbstory .fitcol li svg{display:none !important}
.hbstory .fitcol li{padding-left:0 !important;border-top:1px solid var(--rand);padding-block:11px !important;margin:0 !important}
.hbstory .procsteps .pn{background:none !important;color:var(--gold) !important;border:0 !important;width:auto !important;height:auto !important;font-size:1.5rem !important;font-weight:700 !important;box-shadow:none !important;justify-content:flex-start !important}
.hbstory .ctastappen li::before{border:0 !important;width:auto !important;height:auto !important;content:counter(st) "." !important;font-size:.98rem !important}

/* 6. geen nep-dashboard en geen stockfotorij: alleen de tekst en het bewijs */
.hbstory .why .measviz,.hbstory .why .whypics{display:none !important}
.hbstory .why .whygrid{grid-template-columns:1fr !important}
.hbstory .why .whycopy{max-width:62ch}

/* de hero-kop ook in één kleur (licht.css had hier een sterkere regel) */
.hbstory .hero h1 span,.hbstory .hero .gold-shine{color:var(--inkt) !important;-webkit-text-fill-color:var(--inkt) !important}
.hbstory .physical h2 span,.hbstory .physical .gold-shine,.hbstory .results h2 span,.hbstory .casestudy h2 span{color:var(--inkt) !important;-webkit-text-fill-color:var(--inkt) !important}
.hbstory .priceinc .pi{padding-left:0 !important}
.hbstory .priceinc .pi > *:first-child:not(b):not(strong):not(h3):not(h4):not(p){display:none !important}
.hbstory .pricing .wrap{text-align:left !important}
.hbstory .priceinc{margin-left:0 !important;margin-right:0 !important;max-width:none !important;justify-content:start !important}
.hbstory .priceinc .pi::before,.hbstory .priceinc .pi::after{display:none !important;content:none !important}
.hbstory .pricing .btn{margin-left:0 !important}
.hbstory .pricing .pi > svg,.hbstory .pricing .pi svg{display:none !important}.hbstory .pricing .pi{gap:0 !important;padding-left:0 !important;grid-template-columns:1fr !important}
.hbstory .pricing .pi{display:none !important}

/* Het uitvouwverhaal langzamer en leesbaarder (Tessa 25 sep: "dat mensen dat echt
   goed lezen en er niet zo snel doorheen scrollen"). Elke stap krijgt ruim een
   scherm scrollruimte, de actieve stap is groot en volledig zichtbaar, de rest
   treedt terug, en een stapnummer maakt duidelijk dat het een verhaal is. */
@media (min-width:821px){
  html{scroll-snap-type:y proximity}
  .hbstory .jstep{min-height:108vh !important;scroll-snap-align:center;scroll-snap-stop:normal}
  .hbstory .jsteps{padding:10vh 0 30vh !important;counter-reset:jst}
  .hbstory .jstep{counter-increment:jst;opacity:.14 !important;transform:translateY(18px) !important;transition:opacity .6s ease,transform .6s ease !important}
  .hbstory .jstep.on{opacity:1 !important;transform:none !important}
  .hbstory .jstep h3{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem) !important;line-height:1.12 !important;margin:10px 0 14px !important}
  .hbstory .jstep p{font-size:1.1rem !important;line-height:1.65 !important;max-width:36ch !important;color:var(--inkt) !important;opacity:.82}
  .hbstory .jstep .je::before{content:counter(jst) " · ";font-variant-numeric:tabular-nums;color:var(--grijs)}
}