/* Gedeeld skelet-stylesheet voor dienstenpagina (LEAD-327/334/343/356). Vanaf LEAD-343 is dit bestand de bron; particulier.css is buiten gebruik.
   Basis = assets/css/particulier.css op het syncmoment (sha 5ae5946e); sindsdien eigen wijzigingen (LEAD-355/356), dus niet meer gelijk aan particulier.css. */
/* Particulier gebruikt de bestaande pro-componenten en hun vormgeving. */
.part-services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.part-service-number{font-family:"Archivo Black",sans-serif;font-size:2.1rem;line-height:1;opacity:.35;margin-bottom:1.1rem}
.part-service-detail{margin-top:1rem}
.part-page .of-trust-arrow{width:18px;height:18px;flex-shrink:0}
.part-faq-list details{padding:1.15rem 0;border-bottom:1px solid var(--line)}
.part-faq-list details:first-child{border-top:1px solid var(--line)}
.part-faq-list summary{font-weight:800;cursor:pointer;line-height:1.5;padding-right:.5rem}
.part-faq-list details p{color:var(--muted);margin-top:.85rem}
.part-faq-list a{text-decoration:underline;text-underline-offset:3px}
.part-page :is(a,button,input,select,summary):focus-visible{outline:3px solid #1D75BD;outline-offset:4px}
@media(max-width:760px){.part-services-grid{grid-template-columns:1fr}}

/* Door Shahab gekozen teamblok, tussen de twee fotoblokken. */
.part-team{background:#1D75BD;color:var(--white);overflow:hidden}
.part-team__inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;min-height:420px}
.part-team__copy{padding-block:3.5rem;position:relative;z-index:1}
/* LEAD-524: op het blauwe teamvlak haalde de oranje eyebrow 2,13; wit haalt daar 4,85, net als de
   witte tekst eronder. Het oranje streepje ervoor blijft. */
.part-team .eyebrow{color:#fff;margin-bottom:1.1rem}
.part-team h2{font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.08;letter-spacing:-.035em}
.part-team p{color:var(--white);margin-top:1.3rem;max-width:480px;line-height:1.7}
.part-team .btn{margin-top:1.6rem}
.part-team__photo{width:125%;max-width:none;height:430px;object-fit:contain;object-position:center bottom;align-self:end;justify-self:center}
.part-story-after .story__media{order:2}
.part-story-after .story__media::before{background:#1D75BD}
@media(max-width:860px){.part-story-after .story__media{order:0}}
@media(max-width:800px){.part-team__inner{grid-template-columns:1fr;gap:0}.part-team__copy{padding-block:3rem 0;max-width:560px}.part-team__photo{width:100%;max-width:740px;height:auto;margin-top:1.5rem;justify-self:center}}
@media(max-width:560px){.part-team__copy{padding-top:2.8rem}.part-team h2{font-size:2.15rem}.part-team p{font-size:.98rem}}

/* De gekantelde fotoachtergrond mag de mobiele pagina niet breder maken. */
.part-page .reasons{overflow:clip}
.part-questions .reasons__body{display:grid;justify-items:start;gap:.2rem}
.part-questions .reasons__body .eyebrow{margin-bottom:0}
.part-questions .reasons__body h2{max-width:none}
/* LEAD-419: FAQ-beeld is nu de staande Actros; het volgt de hoogte van de vragenkolom. */
.part-faq-truck{width:100%;max-width:340px;height:auto;object-fit:contain;object-position:left top}
@media(min-width:881px){
/* De linkerkolom is een flexkolom, zodat de Actros de resterende hoogte vult en de kolom gelijk loopt met
   de vragenkolom, ook op pagina's met minder vragen. */
.part-questions .reasons__body{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
/* LEAD-440: het kader pakt de hoogte die de vragenkolom overlaat; het beeld staat er absoluut in en telt dus
   niet mee voor de kolomhoogte. Ondergrens 220 px zodat het bij een korte vragenlijst zichtbaar blijft. */
/* LEAD-446: vaste maat op elke pagina. Voorspelbaarheid gaat voor kolomvulling: de wagen is overal 340 px
   breed (minimaal 260) en de hoogte volgt uit de verhouding; een klein gat op een pagina met veel vragen
   is beter dan een wagen die per pagina van maat verspringt. */
/* LEAD-482: de linkerkolom mag nooit langer worden dan de vragenkolom. De kolommen rekken samen op; het kader
   krimpt mee binnen de grenzen 260 tot 340 px breed, het beeld houdt zijn verhouding. */
.part-questions .reasons__grid{align-items:stretch}
.part-faq-kader{width:340px;min-width:260px;max-width:100%;flex:0 1 auto;min-height:0;margin-block:.6rem;overflow:hidden}
.part-faq-truck{width:100%;height:100%;max-height:100%;object-fit:contain;object-position:left top}
}
@media(max-width:880px){
/* gestapeld: het beeld staat gewoon in de stroom, niet absoluut */
.part-faq-kader{position:static;min-height:0;max-width:300px}
.part-faq-truck{position:static;width:100%;height:auto;aspect-ratio:1600/2347}
}
.part-questions .reasons__cta{margin-top:0}

/* LEAD-311 en LEAD-317 (gebruikerswens 19:23 en 19:38): dienstenkaarten 01 en 03 Draagkracht-oranje, 02 Draagkracht-blauw, alle letters wit. Vervangt de contrastfix CONTRAST-023. */
.part-page .part-services-grid .svc--ink{background:var(--orange)}
.part-page .part-services-grid .svc--orange{background:#1D75BD}
/* LEAD-521: beide kaarten dragen witte tekst. Keuze van de eigenaar, gemaakt met de cijfers erbij. */
.part-page .part-services-grid .svc :is(h3,p,li,a,.part-service-number){color:#fff}
.part-page .part-services-grid .part-service-number{opacity:1}

/* Blok Persoonlijke verhuisservice: variant 3 uit dossier varianten/variants.css, keuze Shahab 15-sep, vervangt het eerste reasons-blok. */
.home-v3{position:relative;overflow:clip}
.home-v3 h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.home-v3 .btn svg{width:18px;height:18px}
/* ---------- V3: breed teambeeld met 3 punten ---------- */
.home-v3{background:var(--paper);padding-block:clamp(3.2rem,6.5vw,5.2rem)}
.home-v3__head{max-width:44rem;margin:0 0 1.8rem}
.home-v3__head .eyebrow{margin-bottom:.7rem}
.home-v3__banner{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:21/9;min-height:280px}
.home-v3__banner img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.home-v3__tag{position:absolute;left:18px;top:18px;background:var(--orange);color:#fff;font-family:"Poppins",sans-serif;font-weight:700;font-size:.86rem;padding:.5rem .9rem;border-radius:999px;box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.home-v3__points{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:-2.2rem;position:relative;padding-inline:clamp(0rem,3vw,2rem)}
.home-v3__point{border-radius:var(--radius);padding:1.5rem 1.4rem;color:#fff;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease);box-shadow:var(--shadow-sm)}
.home-v3__point:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.home-v3__point--ink{background:#1D75BD}
.home-v3__point--orange{background:var(--orange)}
.home-v3__point--dark{background:var(--ink)}
.home-v3__no{font-family:"Archivo Black",sans-serif;font-size:1.9rem;line-height:1;opacity:.28;margin-bottom:.8rem}
.home-v3__point h3{font-size:1.15rem;margin-bottom:.4rem}
.home-v3__point p{font-size:.94rem;line-height:1.55;color:rgba(255,255,255,.86)}
.home-v3__point a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.home-v3__foot{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;justify-content:space-between}
.home-v3__foot p{color:var(--muted);max-width:44ch}
.home-v3__foot p a{color:#1D75BD;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:rgba(29,117,189,.35)}
.home-v3__foot p a:hover{text-decoration-color:#1D75BD}
.home-v3__cta{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:880px){
  .home-v3__banner{aspect-ratio:16/10;min-height:0}
  .home-v3__points{grid-template-columns:1fr;margin-top:1rem;padding-inline:0}
}

/* Bronstructuur dienstenkaarten hersteld (GO regie 15-9): lijst zonder bolletjes, zelfde maat en kleur als de p van de kaart. */
.part-page .part-service-detail{list-style:none;padding:0;margin:1rem 0 0;font-size:.95rem;line-height:1.55;display:grid;gap:.3rem}

/* LEAD-316 (gebruikerswens 19:27): rechterkaart van het variant-3-blok in Draagkracht-blauw, tekst wit; bodytekst van de drie kaarten volledig wit voor een gelijk beeld. */
.part-page .home-v3__point--dark{background:#1D75BD}
.part-page .home-v3__point p{color:#fff}

/* LEAD-317 (gebruikerswens 19:38): groot VD-beeldmerk als decoratie rechts achter het dienstenblok, naar het patroon van .rev__mark in pro; gedempt, niet klikbaar, sectie clipt zodat 390 niet overloopt. */
.part-page .part-services{position:relative;overflow:clip}
.part-page .part-services>.wrap{position:relative;z-index:1}
.part-page .part-services__mark{position:absolute;z-index:0;pointer-events:none;user-select:none;right:-9%;top:50%;transform:translateY(-50%);width:min(58vw,820px);height:auto;opacity:.16}
@media(max-width:760px){.part-page .part-services__mark{width:135vw;right:-55vw;top:42%;opacity:.13}}

/* LEAD-319 (goedgekeurd 19:50): truckversie V1-tekst uit varianten-kaarten-truck, regels overgenomen onder .part-page. Kaartkleuren, VD-beeldmerk en overflow clip staan hierboven al (LEAD-311/317) en zijn niet herhaald. */
.part-page .kt1{background:var(--paper)}
.part-page .kt__truck{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 32px rgba(14,44,74,.28))}
.part-page .kt1__top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:2rem 4rem;margin-bottom:2.4rem}
.part-page .kt1t__media{width:400px;align-self:stretch;display:flex;align-items:flex-end}
.part-page .kt1t__text{display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;padding:.6rem 0}
.part-page .kt1t__text .services__head{margin:0 0 1.2rem;max-width:none}
.part-page .kt1t__text h2{font-size:clamp(2rem,3.9vw,3.1rem);line-height:1.06;letter-spacing:-.035em}
.part-page .kt1t__p{color:var(--muted);font-size:1.05rem;line-height:1.7;max-width:56ch;margin-top:1rem}
.part-page .kt1t__cta{display:flex;flex-wrap:wrap;gap:.8rem}
@media(max-width:880px){.part-page .kt1__top{grid-template-columns:1fr;gap:1.5rem}.part-page .kt1t__media{width:min(100%,280px);justify-self:center;align-self:auto}.part-page .kt1t__text{padding:0}}

/* LEAD-325 (gebruikerswens): verzendknop van de offerte-overlay in pro-groen, zoals btn--wa; style.css blijft gelijk aan pro. */
.part-page .of-cta{background:var(--wa)}
.part-page .of-cta:hover{background:var(--wa-deep)}

/* LEAD-328, LEAD-332 en LEAD-336 (gebruikerswens 20:03, 20:11 en 20:24): truck in het truckblok in totaal 12,5 procent van de blokbreedte naar links, via een lege derde rasterkolom (12,5 procent min de kolomruimte van 4rem); alleen desktop, op 390 gestapeld ongewijzigd. */
@media(min-width:881px){.part-page .kt1__top{grid-template-columns:minmax(0,1fr) auto calc(12.5% - 4rem)}}

/* LEAD-331 (gebruikerswens 20:07): cijfers 01/02/03 op de kaarten van het variant-3-blok vol wit, gelijk aan het truckblok. */
.part-page .home-v3__point .home-v3__no{color:#fff;opacity:1}

/* LEAD-337 (gebruikerswens 20:29): in tweekoloms fotoblokken is de tekstkolom even hoog als de foto; kop boven, knoppen onderaan gelijk met de foto, foto vult de kolom. Op 390 gestapeld ongewijzigd. */
@media(min-width:861px){
.part-page .story__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.part-page .story__body{display:flex;flex-direction:column}
.part-page .story__body .story__cta{margin-top:auto}
.part-page .story__media{display:flex}
.part-page .story__photo{aspect-ratio:auto;min-height:0;height:100%;width:100%}
.part-page .story__photo img{width:100%;height:100%;object-fit:cover;display:block}
.part-page .reasons--alt .reasons__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}
.part-page .reasons--alt .reasons__body{display:flex;flex-direction:column}
.part-page .reasons--alt .reasons__cta{margin-top:auto}
.part-page .reasons--alt .reasons__media{display:flex;flex-direction:column}
.part-page .reasons--alt .reasons__photo{flex:1;aspect-ratio:auto;min-height:0;height:100%}
.part-page .reasons--alt .reasons__photo img{width:100%;height:100%;object-fit:cover;display:block}
}
.part-page .part-price__lead{color:var(--muted);line-height:1.7;margin-top:1rem;max-width:56ch}
.part-page .reasons--alt .reasons__list{margin-top:1.2rem}

/* LEAD-343 (gebruikerswens 20:33): vrijstaande liggende uitsnede (bijv. aanhangerlift) even groot als het tekstblok.
   Zet in inhoud.json truck.klasse op " kt__truck--breed" (met spatie); standaard leeg = staande truck zoals particulier. */
@media(min-width:881px){
.part-page .kt1__top:has(.kt__truck--breed){grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:stretch}   /* LEAD-423: beeldkolom iets breder */
.part-page .kt1__top:has(.kt__truck--breed) .kt1t__media{width:auto;min-width:0;position:relative;align-self:stretch;display:block}
.part-page .kt__truck--breed{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
/* LEAD-534: met een iconenrij dekte dit absolute beeldvak (inset:0) de hele kolom af, dus ook de rij, en
   waren de drie labels niet meer aanwijsbaar. Staat er een rij in, dan blijft de kolom een flexkolom: de
   rij houdt zijn eigen hoogte en het beeld krijgt wat overblijft, zodat de som weer gelijk is aan de
   tekstkolom. Zonder rij verandert er niets, want dan valt :has() niet. */
.part-page .kt1__top:has(.kt__truck--breed) .kt1t__media:has(.kt1t__iconen li){display:flex;flex-direction:column;gap:1.2rem}
.part-page .kt1t__media:has(.kt1t__iconen li) .kt__truck--breed{position:static;flex:1 1 0;min-height:0;height:auto}
}
@media(max-width:880px){
.part-page .kt1__top:has(.kt__truck--breed) .kt1t__media{width:100%;max-width:none;justify-self:stretch}
.part-page .kt__truck--breed{width:100%;height:auto}
}

/* LEAD-356: geen terugkoppeling tussen pro's aspect-ratio en de gelijke-hoogteregel: kolommen vast op minmax(0,1fr),
   foto volgt de tekstkolom (aspect-ratio auto, height 100 procent, cover). Teamblok: foto even hoog als de tekstkolom
   (height 100 procent, contain, onder uitgelijnd); tekst wordt niet ingekort. */
@media(min-width:801px){
.part-page .part-team__inner{align-items:stretch}
}

/* LEAD-355 (gebruikerswens 21:08): stapcijfers 01 tot 04 in de werkwijzekaarten vol wit. */
.part-page .step__no{color:#fff;opacity:1}

/* LEAD-358: op de gestapelde weergave (t/m 880px) krijgt de fotokolom van het prijsblok een vaste breedte, zodat de
   pro-verhouding 4/5 de hoogte al bepaalt vóór het lazy laden van de foto (pro: 0 px hoog tot de foto geladen is, sprong bij scrollen). */
@media(max-width:880px){
.part-page .reasons--alt .reasons__media{width:100%;max-width:24rem}
}

/* LEAD-377 (gebruikerswens 22:05): rechterkolom van het teamblok vult met een optionele iconenrij en actieregel
   boven de uitsnede; de foto neemt de resterende hoogte (contain, onderaan), zodat kolom en tekst gelijk lopen.
   Iconen komen uit de gedeelde set assets/img/icons/ in Draagkracht-oranje (keuze Shahab 22:11). */
.part-team__media{display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;min-width:0;min-height:0}
.part-team__iconen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.6rem 1rem;align-content:start}
.part-team__iconen:empty{display:none}
.part-team__iconen li{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center}
.part-team__iconen img{width:44px;height:44px;flex:none}
@media(min-width:801px){.part-team__iconen img{width:56px;height:56px}.part-team__iconen span{font-size:.98rem}}
.part-team__iconen span{color:#fff;font-weight:700;font-size:.92rem;line-height:1.3}
.part-page .part-team__photo{width:125%;max-width:none;height:auto;min-height:0;flex:0 1 auto;object-fit:contain;object-position:center bottom;align-self:center;margin-bottom:-1px}
@media(min-width:801px){
/* LEAD-428: /zakelijke-verhuizingen/ is de maatstaf. De rechterkolom heeft daar een vaste inhoudshoogte van
   594 px: bovenmarge 110 (3,5rem plus de verschuiving van LEAD-417) + iconenrij 84 + tussenruimte 22 + zichtbare
   foto 378. Die hoogte staat nu vast op elke pagina en de kolom lijnt onderaan uit, zodat een kortere tekst het
   blok niet laat inzakken. Een langere tekst dan zeven a acht regels laat het blok uitlopen; dat is inhoudswerk. */
.part-page .part-team__media{height:594px;min-height:594px;flex:none;align-self:end;padding-top:calc(3.5rem + 54px)}
.part-page .part-team__photo{flex:1 1 auto}
}
@media(max-width:800px){
.part-team__media{gap:1.2rem;padding-top:1.5rem}
.part-page .part-team__photo{width:100%;max-width:740px;margin-top:0}
}
@media(max-width:420px){
.part-team__iconen{grid-template-columns:repeat(2,1fr)}
}

/* LEAD-393/397/400: keurmerkenrij onder de knoppenrij in de oranje offertebalk. Witte chip per item, zodat de rij
   op een licht, oranje en navy vlak leesbaar blijft ongeacht de kleur van het logo. Geen link, alt is de kale naam. */
.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}
}

/* LEAD-424: optionele iconenrij boven het beeld in het truckblok, zelfde opbouw als in het teamblok.
   Op het lichte vlak blijven de iconen oranje en de labels navy. */
.part-page .kt1t__media{flex-direction:column;gap:1.2rem}
.part-page .kt1t__iconen:empty{display:none}
.part-page .kt1t__iconen{width:100%}
.part-page .kt1t__iconen span{color:var(--ink)}
@media(max-width:880px){.part-page .kt1t__iconen{max-width:320px;margin-inline:auto}}

/* LEAD-427 (gebruikerswens 00:52): de voettekst onder de drie dienstkaarten was circa 420 px breed en liep
   daardoor over acht regels, met een groot gat naar de knoppen. De tekst krijgt nu tot twee derde van de rij
   (maximaal 75 tekens) en de knoppen blijven rechts staan zonder dat gat. */
.part-page .home-v3__foot{gap:1rem 2rem;align-items:center}
.part-page .home-v3__foot p{max-width:none;flex:1 1 62%;min-width:0}
.part-page .home-v3__cta{flex:0 1 auto;min-width:0}   /* LEAD-470: mag krimpen en wikkelen op mobiel */
@media(max-width:1100px){.part-page .home-v3__foot p{flex-basis:100%}}

/* LEAD-442: knoppenrijen met twee of drie acties; op 390 onder elkaar zonder overloop. */
.part-knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.part-page .reasons__cta,.part-page .story__cta,.part-page .kt1t__cta{display:flex;flex-wrap:wrap;gap:.7rem}
@media(max-width:420px){.part-knoppen .btn,.part-page .reasons__cta .btn,.part-page .story__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 banner staat als <picture> in de hero; een CSS-achtergrond erbij zou hetzelfde beeld dubbel laden. */
.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-472 (gebruikerswens 03:34): op de dienstpagina's is de hero 30 procent lager dan de pro-hero.
   Vaste maten, zodat alle negen gelijk zijn. Pro: 828 op 1440, 792 op 1100, 481 op 390. */
/* LEAD-503: min-height in plaats van height. De hero is 640 zolang de inhoud past en groeit daarna mee;
   met een vaste height bleef de rij op 640 staan, viel de tekst eronder achter de oranje kaart en knipte
   overflow:hidden (style.css 102) de rest weg. Zo kan de speling (hoogte min inhoud) niet negatief worden. */
.part-page .hero{min-height:640px}
@media(max-width:1100px){.part-page .hero{min-height:640px}}
@media(max-width:880px){.part-page .hero{min-height:371px}}   /* mobiel inhoudgestuurd */
/* LEAD-493: de heroinhoud lijnt onderaan uit; bij een kop van drie of vier regels schoof het blok achter de
   vaste header van 112 px. Bovenpadding is nu 144 px, dus altijd 32 px lucht onder de header. Past de inhoud
   dan niet meer in de vaste hoogte, dan groeit de hero mee in plaats van dat de tekst eronder verdwijnt. */
/* LEAD-503: de onderpadding reserveert precies de pull van de oranje kaart plus 40 px lucht, in dezelfde
   grootheid als de pull zelf (vensterbreedte). Op 1440 is dat 104 + 40 = 144, gelijk aan wat er stond;
   op 390 is dat 48 + 40 = 88 in plaats van 56, want daar was de lucht maar 8 px. */
.part-page .hero__content{padding-block:144px calc(var(--of-pull) + var(--hero-lucht))}
@media(max-width:760px){.part-page .hero__content{padding-block:146px calc(var(--of-pull) + var(--hero-lucht))}}   /* ook op mobiel 32 px onder de header */

/* 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-515: kruimelpad in het hoofdskelet, optioneel gevuld uit inhoud.json. Zelfde vorm en plaats als
   .dh-kruim op de hubs (CLAUDE-BLOK) en .tip-kruim op de tips, hier onder de neutrale naam .kruimelpad.
   Het staat als eerste in .hero__content en die begint 144 px onder de bovenkant van de hero, dus 32 px
   onder de vaste header van 112 px; daarmee kan het nooit achter de header vallen.
   list-style:none is niet optioneel: zonder die regel staan er bolletjes voor de kruimels. */
/* Wit, niet de .82 van de hubs: op de lichtste plek van de herofoto haalt gedempt wit 4,4 op de
   glyphpixels en dat is onder de norm. Vol wit haalt daar 13,2 (1440) en 10,6 (390). */
.part-page .kruimelpad{font-size:.85rem;margin-bottom:1.1rem;color:#fff}
.part-page .kruimelpad ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0}
.part-page .kruimelpad li+li::before{content:"/";margin-right:.5rem;opacity:.8}  /* .6 haalde 3,65 op de glyphpixels, onder de 4,5 */
.part-page .kruimelpad a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.part-page .kruimelpad [aria-current]{color:#fff}
/* Een pagina zonder kruimelpad rendert een lege lijst; die mag geen ruimte en geen oriëntatiepunt voor
   een schermlezer achterlaten. */
.part-page .kruimelpad:not(:has(li)){display:none}
.part-page .kruimelpad ol:empty{display:none}

/* LEAD-526: een link in de prijsintro kreeg exact de kleur en het gewicht van de tekst eromheen en ook geen
   onderstreping, dus voor een lezer bestond hij niet. Juist die link draagt het lifttarief naar de pagina met
   de voorwaarden. Zelfde opmaak als de links in het v3-blok en in de lijst. */
.part-page .part-price__lead a{color:#1D75BD;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* LEAD-532: de kop met een lange plaatsnaam een maat kleiner in plaats van een tweede regel, waardoor de
   hero 17 px boven de ontwerphoogte uitgroeide. Alleen vanaf 881 px: daaronder heeft de hero geen vaste
   hoogte en past de naam ook een maat kleiner niet op een regel, dus daar levert verkleinen alleen een
   kleinere kop op. site.js zet de klasse en haalt hem weg als hij niets oplost. */
@media(min-width:881px){.part-page .hero__title--lang{font-size:clamp(2.6rem,4.9vw,3.9rem)}}