/* Dienstenhub Draagkracht (dh-*), naar de opbouw van feitsma.nl/diensten/ maar volledig in de Draagkracht-huisstijl.
   Bouwt op style.css (tokens, .wrap, .eyebrow, .btn, .hero, .offerte-overlay). Scoped: alles onder .dh-page. CLAUDE-BLOK, 15 september 2026. */
.dh-page{overflow:clip}
.dh-page .btn svg{width:18px;height:18px;flex:none}

/* 1. hero met poster (geen video) + kruimelpad */
.dh-hero{min-height:640px}
@media(max-width:1100px){.dh-hero{min-height:640px}}
@media(max-width:880px){.dh-hero{min-height:371px}}   /* mobiel inhoudgestuurd, gelijk aan dienst.css */
.dh-hero .hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-3}
/* De poster stond zonder z-index boven .hero__veil (z-index -2), waardoor de donkere sluier niets deed
   en tekst op een lichte foto stond. In de pro-hero ligt de video onder de sluier; dit herstelt dat. */
.dh-hero .hero__content{padding-block:144px calc(var(--of-pull) + var(--hero-lucht));max-width:50rem}
/* De pro-sluier is een radiaal verloop dat linksboven bijna transparant is, precies waar de eyebrow staat.
   Een extra lineair verloop in dezelfde merkkleur maakt die hoek donkerder, zodat kleine witte tekst
   de 4,5:1 haalt. Alleen op de hub-hero, de pro-homepage blijft ongemoeid. */
.dh-hero .hero__veil{background-image:linear-gradient(105deg, rgba(14,44,74,.78) 0%, rgba(14,44,74,.55) 38%, rgba(14,44,74,.18) 68%, rgba(14,44,74,0) 88%), radial-gradient(120% 90% at 70% 18%, rgba(21,35,59,0) 30%, rgba(21,35,59,.55) 100%)}
.dh-kruim{font-size:.85rem;margin-bottom:1.2rem;color:rgba(255,255,255,.8)}
.dh-kruim ol{list-style:none;display:flex;gap:.5rem;padding:0;margin:0}
.dh-kruim li+li::before{content:"/";margin-right:.5rem;opacity:.6}
.dh-kruim a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Eyebrow op de herofoto: oranje tekst haalde op de glyphs maar 1,1 tot 1,3 op /verhuizen/ en /zakelijk/.
   Wit met het oranje streepje ervoor houdt het merkaccent en haalt ruim de 4,5:1 (LEAD-449). */
.dh-hero .hero__content .eyebrow{color:#fff}
.dh-hero .hero__content .eyebrow::before{background:var(--orange)}
.dh-hero .hero__sub{max-width:40rem}
.dh-page .of-cta{background:var(--wa)}
.dh-page .of-cta:hover{background:var(--wa-deep)}

/* 2. springpills (alleen als een hub meer dan een groep heeft) */
.dh-spring{background:#fff;border-bottom:1px solid var(--line);padding-block:.9rem}
.dh-spring .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.dh-spring__label{font-family:"Poppins",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dh-spring ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0}
.dh-spring a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;padding:.5rem .95rem;border-radius:999px;border:1.5px solid var(--line);color:var(--ink)}
.dh-spring a span{background:#1D75BD;color:#fff;font-size:.72rem;padding:.1rem .45rem;border-radius:999px}
.dh-spring a:hover{border-color:#1D75BD}

/* 3. groep: introkaart + kaartenraster */
.dh-groep{padding-block:clamp(3rem,6vw,5rem);background:var(--paper-2)}
.dh-groep--wit{background:#fff}
.dh-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,3vw,2.6rem);background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;padding:clamp(1.8rem,3.5vw,3rem)}
.dh-intro__tekst{padding:0;display:flex;flex-direction:column;justify-content:flex-start;gap:0}
.dh-intro__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto;padding-top:1.4rem}
.dh-intro__foto{border-radius:16px;overflow:hidden}
.dh-intro__tekst h2{font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.03em;max-width:20ch}
.dh-intro__tekst p{color:var(--muted);line-height:1.7;margin-top:1rem;max-width:60ch}
.dh-intro__wij{border-left:3px solid var(--orange);padding-left:1rem;font-size:.95rem}
.dh-intro__foto{align-self:stretch}
.dh-intro__wij a{color:#1D75BD;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dh-intro__foto{min-height:320px}
.dh-intro__foto img{width:100%;height:100%;object-fit:cover;display:block}
.dh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:1.4rem}
.dh-kaart{position:relative;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:.9rem .9rem 1.4rem;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.dh-kaart:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.dh-kaart__thumb{aspect-ratio:2/1;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.dh-kaart__thumb img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.dh-kaart h3{font-size:1.15rem;margin:1rem .4rem .35rem}
.dh-kaart h3 a{color:var(--ink);text-decoration:none}
.dh-kaart h3 a::after{content:"";position:absolute;inset:0}
.dh-kaart p{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 .4rem;flex:1}
.dh-kaart__meer{display:inline-flex;align-items:center;gap:.4rem;margin:1rem .4rem 0;color:#1D75BD;font-weight:700;font-size:.9rem}
.dh-kaart__meer svg{width:16px;height:16px}
.dh-kaart:focus-within{outline:3px solid #1D75BD;outline-offset:3px}

/* 4. wagenband: merkblauw met bakwagen-uitsnede */
.dh-wagen{padding-block:clamp(2rem,4vw,3rem)}
.dh-wagen__kaart{background:#1D75BD;color:#fff;border-radius:22px;display:grid;grid-template-columns:1fr 1.25fr;gap:1.5rem 2.5rem;align-items:stretch;padding:clamp(1.8rem,3.5vw,3rem);overflow:clip;box-shadow:var(--shadow)}
/* LEAD-524: het zachte oranje haalde op het merkblauw 2,69:1, ruim onder de 4,5 van WCAG AA.
   Gerekend met de OPGEGEVEN kleuren, want dit is een effen vlak: #F8B45A op #1D75BD. Wit geeft
   4,85:1; het oranje blijft staan als streepje, zodat het merkaccent niet verdwijnt. */
.dh-wagen .eyebrow{color:#fff}
.dh-wagen .eyebrow::before{background:var(--orange)}
.dh-wagen h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.03em}
.dh-wagen p{color:rgba(255,255,255,.88);line-height:1.7;margin-top:1rem;max-width:52ch}
.dh-wagen__tekst{display:flex;flex-direction:column;height:100%}
.dh-wagen__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto;padding-top:1.5rem}
.dh-wagen__foto{width:100%;height:100%;object-fit:contain;object-position:right bottom;justify-self:end;filter:drop-shadow(0 20px 26px rgba(0,0,0,.3))}

/* 5. vangnet: tweekoloms kaart, foto links, tekstkolom even hoog als de foto (regel 15-sep) */
.dh-slot{padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.dh-slot__kaart{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,3vw,2.6rem);background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;padding:clamp(1.8rem,3.5vw,3rem)}
.dh-slot__foto{align-self:stretch;min-height:320px;border-radius:16px;overflow:hidden}
.dh-slot__foto img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.dh-slot__tekst{padding:0;display:flex;flex-direction:column}
.dh-slot__tekst h2{font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.03em;max-width:20ch}
.dh-slot__tekst p{color:var(--muted);line-height:1.7;margin-top:1rem;max-width:60ch}
.dh-slot__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto;padding-top:1.4rem}
.dh-page .dh-slot__cta .btn--ghost{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.dh-page .dh-slot__cta .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #1D75BD;color:#1D75BD}
@media(max-width:1000px){.dh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){
  .dh-intro{grid-template-columns:1fr;padding:1.2rem 1.2rem 1.8rem}.dh-intro__foto{order:-1;min-height:0;aspect-ratio:16/10}
  .dh-slot__kaart{grid-template-columns:1fr;padding:1.2rem 1.2rem 1.8rem}.dh-slot__foto{min-height:0;aspect-ratio:16/10}
  .dh-wagen__kaart{grid-template-columns:1fr}.dh-wagen__tekst{height:auto}.dh-wagen__foto{width:min(100%,480px);height:auto;justify-self:center}
}
@media(max-width:760px){.dh-grid{grid-template-columns:1fr}.dh-hero .hero__content{padding-block:146px calc(var(--of-pull) + var(--hero-lucht))}}

/* Keurmerkenrij: zelfde plek en maten als root in dienst.css, dus in .of-trust op de plek van de
   reviewknop. Daar voegt hij geen hoogte toe aan de oranje balk (LEAD-451). */
.dh-page .of-trust{position:absolute;top:16px;right:24px;z-index:6}
.dh-page .of-trust .keurmerken{margin:0;justify-content:flex-end}
.dh-page .of-trust .keurmerken img{height:44px}
@media(max-width:760px){.dh-page .of-trust{position:static;justify-content:flex-start;flex-wrap:wrap;margin-bottom:14px}
  .dh-page .of-trust .keurmerken{justify-content:flex-start}}
/* Keurmerkenrij, opbouw en maten gelijk aan dienst.css van root (LEAD-405) */
.dh-page .keurmerken{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.dh-page .keurmerken:empty{display:none}
.dh-page .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}
.dh-page .keurmerken img{display:block;height:34px;width:auto}
.dh-page .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){.dh-page .keurmerken{gap:8px}.dh-page .keurmerken li{padding:6px 10px;min-height:42px}.dh-page .keurmerken img{height:28px}}