/* Vet (25 sep 2026, avond). Tessa: "ik voel het nog steeds niet ... mega vet".
   Onderzoek: Teenage Engineering, AirTag, Linear, Stripe, Rabbit, Pitch, Framer,
   plus de lijstjes over AI-achtige sites (925studios, superdesign). Wat ons
   scheidde van die sites was niet kleur maar schaal: alle koppen 41,6px, tekst
   15px grijs, beelden als postzegels, een uitvouwverhaal van 11.000px leeg wit.
   Regels hier:
   1. Eén dominante typeschaal: grote koppen, strak gespatieerd, tekst 17-18px in inkt.
   2. Beeld mag tot de rand (sfeerband); foto's niet allemaal in hetzelfde kaartje.
   3. Ruimte tussen secties groter, binnen secties strakker (contrast in ritme).
   4. Het uitvouwverhaal houdt zijn tempo, maar met minder lege scrollruimte.
   5. Geen donkere tegelwand achter de telefoon: de telefoon staat op wit.
   6. Beweging alleen waar het iets zegt: de band zoomt zacht uit bij het scrollen,
      knoppen veren. Niets voor wie minder beweging wil.
   Laadt als allerlaatste, na rust.css. */

.hbstory{--tekst:#34312c;--ruim:clamp(88px,9vw,148px)}

/* 1. typeschaal */
.hbstory h2,
.hbstory .physhead h2,.hbstory .shead2 h2,.hbstory .prochead h2,.hbstory .faqhead h2,.hbstory .why h2,
.hbstory .dagmet h2,.hbstory .zondermet h2,.hbstory .wie2 h2,.hbstory .pricing h2{
  font-size:clamp(2.1rem,1.1rem + 2.9vw,3.7rem) !important;line-height:1.02 !important;
  letter-spacing:-.037em !important;font-weight:600 !important;max-width:17ch;text-wrap:balance}
.hbstory .cta-final h2{font-size:clamp(2.2rem,1.1rem + 3.2vw,4rem) !important;line-height:1.02 !important;letter-spacing:-.037em !important;text-wrap:balance}
.hbstory .hero .wrap{grid-template-columns:1.12fr .88fr}
.hbstory .hero h1{font-size:clamp(2.3rem,1.1rem + 3vw,4.1rem) !important;line-height:1 !important;letter-spacing:-.04em !important;text-wrap:balance}
.hbstory .hero .sub{font-size:clamp(1.05rem,.98rem + .35vw,1.25rem);color:var(--tekst)}
.hbstory .physhead p,.hbstory .prochead p,.hbstory .shead2 p,.hbstory .why .whycopy p,.hbstory .pricing .wrap > p{
  font-size:clamp(1.05rem,1rem + .2vw,1.2rem) !important;line-height:1.6 !important;color:var(--tekst) !important;max-width:52ch}
.hbstory .zmrij,.hbstory .wiewat p,.hbstory .faq p,.hbstory .dagmoment p,.hbstory .procsteps p,.hbstory .fitcol li{font-size:1.02rem !important;line-height:1.6 !important}
.hbstory .dagmoment p,.hbstory .procsteps p{color:var(--tekst) !important}

/* 3. ritme: meer lucht tussen secties */
.hbstory section.wie,.hbstory .zondermet,.hbstory .dagmet,.hbstory .why,.hbstory .fits,.hbstory .proc,.hbstory #how,
.hbstory .faq,.hbstory .pricing{padding-block:var(--ruim) !important}
.hbstory .zondermet h2,.hbstory .dagmet h2,.hbstory .faqhead h2{margin-bottom:clamp(28px,3.4vw,52px) !important}

/* 2. sfeerband over de volle breedte */
.hbstory .sfeer{position:relative;margin:0;height:clamp(340px,74vh,780px);overflow:hidden;background:#1c1a17}
.hbstory .sfeer img{display:block;width:100%;height:100%;object-fit:cover}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hbstory .sfeer img{animation:sfeerzoom linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes sfeerzoom{from{transform:scale(1.14)}to{transform:scale(1)}}
  }
}

/* een dag: grotere, staande beelden; product op papier, foto's tot de rand */
.hbstory .dagrij{gap:clamp(18px,2.2vw,30px)}
.hbstory .dagbeeld{aspect-ratio:4/5;border-radius:6px;border:0;background:#ecebe6}
.hbstory .dagbeeld img{padding:6%}
.hbstory .dagmoment h3{font-size:1.15rem;margin-top:18px}
.hbstory .dagmoment h3::before{color:var(--grijs)}

/* stappen: grote cijfers in inkt, niet in merkkleur */
.hbstory .procsteps .pn{font-size:clamp(2.6rem,2rem + 1.6vw,3.6rem) !important;font-weight:400 !important;color:var(--inkt) !important;letter-spacing:-.04em;line-height:1 !important;margin-bottom:10px}

/* 4. uitvouwverhaal: zelfde tempo, minder leeg wit */
@media (min-width:821px){
  .hbstory .jstep{min-height:86vh !important}
  .hbstory .jsteps{padding:6vh 0 22vh !important}
  .hbstory .jstep h3{font-size:clamp(2rem,1.2rem + 2vw,3rem) !important;line-height:1.04 !important;letter-spacing:-.035em !important}
}

/* 5. telefoon op wit, het vel erachter treedt terug */
.hbstory .jstick.phoneup #pgstage{opacity:0;transition:opacity .6s ease}
.hbstory .jstick.phoneup .bqface{filter:none !important}

/* 6. knoppen veren, beelden reageren */
.hbstory .btn{transition:transform .25s cubic-bezier(.2,.9,.3,1.3),box-shadow .25s ease,background-color .25s ease}
.hbstory .btn:hover{transform:translateY(-2px)}
.hbstory .btn:active{transform:translateY(0) scale(.98)}
@media (prefers-reduced-motion:reduce){.hbstory .btn,.hbstory .btn:hover{transition:none;transform:none}}

@media (max-width:900px){
  .hbstory .hero .wrap{grid-template-columns:1fr}
  .hbstory .hero h1{font-size:clamp(2.05rem,1.4rem + 3.4vw,2.8rem) !important}
  .hbstory .sfeer{height:clamp(260px,52vh,440px)}
  .hbstory .dagbeeld{aspect-ratio:4/3}
}

/* De tweekleurige kop in de resultaten won van rust.css (een sterkere regel voor
   .gold-shine); in één kleur zoals alle andere koppen. */
.hbstory section.results h2 span,.hbstory section.results h2 .gold-shine{color:var(--inkt) !important;-webkit-text-fill-color:var(--inkt) !important;background:none !important}
/* Menulinks breken niet af: in het Nederlands werd "Over ons" twee regels. */
.hbstory .topnav nav a{white-space:nowrap}

/* Audit 26 sep (Tessa: "NIEUWE AUDIT"). Fouten die in elke richting weg moeten. */
/* Kaders zijn AI: scheiden met een haarlijn en witruimte. */
.hbstory .physical .sustain{border-radius:0 !important;background:none !important;border-top:1px solid var(--rand) !important;padding:28px 0 0 !important}
.hbstory .whyproof{border-radius:0;background:none;padding:14px 0 0;border-top:1px solid var(--rand);font-size:1.08rem;color:var(--inkt)}
/* De oude situatie grijs, niet doorgestreept: doorhalen las op mobiel als een fout. */
.hbstory .zmrij s{text-decoration:none;color:var(--grijs)}
/* FAQ: kop links, vragen rechts, in plaats van één smalle kolom met een lege helft. */
@media (min-width:980px){
  .hbstory .faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,110px);align-items:start}
  .hbstory .faq .faqhead{position:sticky;top:110px}
  .hbstory .faq .faqlist{max-width:none !important;width:100%}
}
/* Mobiel: de knop naar boven lag over de tekst; de chatknop kleiner en in de hoek. */
@media (max-width:820px){
  .hbstory #totop{display:none !important}
  .hbstory #cfab{width:44px !important;height:44px !important;right:12px !important;bottom:12px !important}
}
/* De duurzaamheidskop mocht niet afbreken en liep op city de pagina uit; de tekst
   ernaast werd een kolom van twee woorden. */
.hbstory .physical .sustain .stbig{white-space:normal !important;flex:0 1 36%;min-width:0;font-size:clamp(1.4rem,.9rem + 1.3vw,2.1rem) !important;line-height:1.12;font-weight:600 !important}
.hbstory .physical .sustain .st{flex:1 1 0;min-width:220px}
/* Het afsluitblok is gecentreerd: de kop ook (de algemene 17ch zette hem scheef). */
.hbstory .cta-final h2{max-width:20ch;margin-left:auto !important;margin-right:auto !important}
/* Tekst buiten beeld (Tessa 26 sep): de testimonials schoven als carrousel, dus
   kaarten hingen half buiten het scherm. Nu alle kaarten zichtbaar in een raster. */
.hbstory .tgrid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;overflow:visible !important;gap:clamp(18px,2.4vw,34px) !important;scroll-snap-type:none !important}
.hbstory .tgrid .tcard{flex:none !important;min-width:0}
@media (max-width:980px){.hbstory .tgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:620px){.hbstory .tgrid{grid-template-columns:1fr !important}}