/* Homepage (LEAD-340/356, gebruikersregel 20:29): in tweekoloms fotoblokken is de tekstkolom even hoog als de foto;
   kop en eyebrow boven, knoppen onderaan gelijk met de foto, foto volgt de kolomhoogte (cover). Kolommen vast op
   minmax(0,1fr) en aspect-ratio uit, zodat pro's verhouding geen terugkoppeling geeft (LEAD-356).
   Zelfde grens als dienst.css (861px); daaronder blijft de pro-stapeling. style.css blijft bytegelijk aan pro. */
.reasons__lead{margin-top:1rem;color:var(--muted);line-height:1.65;max-width:46ch}
@media(min-width:861px){
.story__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.story__body{display:flex;flex-direction:column}
.story__body .story__cta{margin-top:auto}
.story__media{display:flex}
.story__photo{width:100%;aspect-ratio:auto;min-height:0;height:100%}
.story__photo img{width:100%;height:100%;object-fit:cover}
.reasons__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}
.reasons--alt .reasons__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.reasons__body{display:flex;flex-direction:column}
.reasons__body .reasons__cta{margin-top:auto}
.reasons__media{display:flex;flex-direction:column}
.reasons__photo{flex:1;aspect-ratio:auto;min-height:0;height:100%}
.reasons__photo img{width:100%;height:100%;object-fit:cover}
}
/* LEAD-355: stapcijfers in de werkwijzekaarten vol wit. */
.step__no{color:#fff;opacity:1}
/* LEAD-358: gestapelde weergave: fotokolom van Vakkundig transport met vaste breedte, hoogte via pro-verhouding vóór het lazy laden. */
@media(max-width:880px){
.reasons--alt .reasons__media{width:100%;max-width:24rem}
}
/* LEAD-363: tekstlink in de genummerde lijst (pro geeft links geen opmaak). */
.reasons__list a{color:#1D75BD;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* LEAD-400: keurmerkenrij op de homepage, zelfde vorm als op de dienstenpagina's (dienst.css). */
.keurmerken{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.keurmerken:empty{display:none}
.keurmerken li{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(14,44,74,.12);border-radius:10px;padding:8px 12px;min-height:50px}
.keurmerken img{display:block;height:34px;width:auto}
.keurmerken__tekst{font-family:"Poppins",sans-serif;font-weight:700;font-size:.86rem;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
@media(max-width:760px){.keurmerken{gap:8px}.keurmerken li{padding:6px 10px;min-height:42px}.keurmerken img{height:28px}.keurmerken__tekst{font-size:.8rem}}
/* ISO-beeldmerk in de tekstchip (LEAD-400/403): beeldmerk links, tekst rechts. */
.keurmerken__tekst{gap:8px}
.keurmerken__tekst img{display:block;height:34px;width:auto}
@media(max-width:760px){.keurmerken__tekst img{height:28px}}

/* LEAD-410 (gebruikerswens 23:47): keurmerkenrij rechtsboven in de oranje offertebox, op de plek van de oude
   trustknop, en groter. De pro-regel .of-trust is absoluut gepositioneerd; de rij mag de kop niet raken. */
.of-trust .keurmerken{margin:0;justify-content:flex-end}
.of-trust .keurmerken img{height:44px}
.of-trust .keurmerken__tekst{font-size:.92rem}
.of-trust .keurmerken__tekst img{height:44px}
.of-box{padding-top:clamp(28px,3.4vw,44px)}
@media(min-width:881px){
/* LEAD-461: de rij staat BINNEN de oranje balk, rechtsboven, absoluut zodat de balk even hoog blijft als pro. */
.of-trust{position:absolute;top:16px;right:24px;z-index:6}
.of-trust .keurmerken{margin:0}
.of-trust .keurmerken img,.of-trust .keurmerken__tekst img{height:34px}
.of-trust .keurmerken li{min-height:44px;padding:6px 10px}
.of-trust .keurmerken__tekst{font-size:.86rem}
}
@media(max-width:880px){
/* LEAD-450: op 390 mag de balk niet hoger worden dan pro, dus de rij compacter dan op desktop. */
.of-trust .keurmerken{margin:0 0 6px}
.of-trust .keurmerken img,.of-trust .keurmerken__tekst img{height:24px}
.of-trust .keurmerken li{min-height:32px;padding:4px 8px}
.of-trust .keurmerken__tekst{font-size:.74rem}
}
@media(max-width:880px){
.of-trust .keurmerken{justify-content:flex-start}
.of-trust .keurmerken img,.of-trust .keurmerken__tekst img{height:36px}
.of-box{padding-top:clamp(28px,3.4vw,44px)}
}
@media(max-width:760px){
.of-trust .keurmerken img,.of-trust .keurmerken__tekst img{height:34px}
.of-trust .keurmerken__tekst{font-size:.82rem}
}
/* Google-beoordelingen staan op de homepage nu onder het formulier, waar eerst de keurmerken stonden. */
.of-reviews{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem}
/* LEAD-442: knoppenrijen op de homepage; op 390 onder elkaar. */
.reasons__cta,.story__cta,.rev__cta{display:flex;flex-wrap:wrap;gap:.7rem}
@media(max-width:420px){.reasons__cta .btn,.story__cta .btn,.rev__cta .btn{width:100%;justify-content:center}}

/* LEAD-462: crew-uitsnede en keurmerkenrij horen bij het formulierblok, niet bij de sectie. .of-box is al
   position relative in pro; de uitsnede hangt nu aan de box (bottom 100 procent) en verspringt dus niet meer. */
.of-box{overflow:visible}
.of-crew{right:clamp(8px,3vw,40px)}
/* LEAD-450: op 390 dezelfde bakhoogte als pro, dus de rij compact. */
@media(max-width:880px){
.of-trust .keurmerken{margin:0 0 4px;gap:6px}
.of-trust .keurmerken img,.of-trust .keurmerken__tekst img{height:20px}
.of-trust .keurmerken li{min-height:28px;padding:3px 7px}
.of-trust .keurmerken__tekst{font-size:.7rem}
}

/* LEAD-453: stilstaande herobanner variant 01 in plaats van de video. Het beeld ligt op dezelfde laag als de
   oude video (z-index -3), dus ONDER .hero__veil (-2) en .hero__grain (-1); de sluier werkt daardoor echt.
   De achtergrond van .hero komt uit style.css (pro-poster) en wordt hier overschreven, style.css blijft ongemoeid. */
/* De homepage houdt de pro-video met de pro-poster; de banner geldt alleen op de andere routes. */
.hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-3}
/* De eyebrow in merkoranje haalde op de oude beelden niet overal 4,5; een iets zwaardere sluier links boven
   waar de eyebrow staat, lost dat op zonder style.css te raken (LEAD-463). */
.hero__veil::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,26,45,.55) 0 38%,rgba(9,26,45,.18) 62%,rgba(9,26,45,0) 100%)}

/* LEAD-479: de eyebrow in de hero wordt wit met het oranje streepje ervoor; in merkoranje haalde hij op de
   lichte delen van de banner de norm niet (slechtste glyphpixel 1,0 tot 2,8). Plus een zwaarder verloop
   linksboven over de sluier, waar de kop en de eyebrow staan. style.css blijft ongemoeid. */
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:var(--orange)}
.hero__veil::after{background:linear-gradient(100deg,rgba(9,26,45,.72) 0 34%,rgba(9,26,45,.42) 58%,rgba(9,26,45,.05) 100%)}
/* LEAD-480: hero op de homepage 10 procent hoger dan pro (pro: min(92vh,860px)). */
/* LEAD-500: de homepage erfde uit style.css een bovenmarge van 96 px, minder dan de vaste header van 112, en een
   ondermarge tot 288 px. Daardoor plakte de eyebrow tegen het logo en paste de inhoud niet in 640. Home krijgt nu
   dezelfde marges als de dienstpagina's: 144 px boven, dus 32 px lucht onder de header, en dezelfde ondermarge. */
/* LEAD-503: dezelfde borging als op de dienstpagina's. min-height in plaats van height, zodat de hero
   meegroeit in plaats van de tekst achter de oranje kaart te duwen, en een onderpadding die de pull van
   die kaart meerekent (variabelen in site.css). */
@media(min-width:761px){.hero{min-height:640px}}
@media(max-width:760px){.hero{min-height:88vh}}
.hero__content{padding-block:144px calc(var(--of-pull) + var(--hero-lucht))}
@media(max-width:760px){.hero__content{padding-block:146px calc(var(--of-pull) + var(--hero-lucht))}}

/* browser_pages mat 14 px zijwaartse overloop op de homepage bij 390 px. De oorzaak is geen element maar
   een pseudo-element: het gekleurde vlak achter het beeld (.reasons__media::before) staat 16 px opgeschoven
   en 5 graden gedraaid, en stak daardoor buiten het scherm, waardoor de pagina zijwaarts kon schuiven.
   De sectie knipt dat af; clip en niet hidden, want clip maakt van de sectie geen schuifbak.
   Stond eerst onder een breekpunt van 760 px, met de aanname dat er daarboven ruimte genoeg was.
   Die aanname was fout. -13 mat op 16 september 25 px overloop, en het is geen scherpe grens bij
   1100: het geldt in het hele gebied waar het tweekolomsraster staat en de viewport onder ongeveer
   1150 px blijft, dus ook op 1099 en 1101. Onder 880 px valt het raster terug naar een kolom en
   daar zat de oude clip. Daarom geldt de clip nu op elke breedte en niet onder een nieuw breekpunt. Gemeten met en
   zonder: op 390, 1440 en 1600 verandert er niets, op 1099, 1100 en 1101 gaat de overloop van 25
   naar 0, en de schermafdruk van de sectie op 1440 is met en zonder clip byte-gelijk. */
.reasons{overflow-x:clip}