/* Rijmbos website: rustige flow, tekst en beeld wisselen van kant */
/* woordband: compacte, rustig doorlopende scheiding i.p.v. 4 schermen scroll */
.woordband{height:auto!important;border-top:1px solid var(--r);border-bottom:1px solid var(--r)}
.wb-plak{position:static!important;height:auto!important;padding:46px 0!important;display:block!important;overflow:hidden}
.woordband span{font-size:clamp(44px,6vw,92px)!important;padding:0!important;transform:none!important;animation:wbLoop 60s linear infinite}
@keyframes wbLoop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* gedeelde split-opbouw (zelfde ritme als "Onze aanpak") */
.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.tl-beeld{margin:0;position:relative}
.tl-beeld>picture,.gb-hoofd{display:block;border-radius:28px;overflow:hidden;background:#e8e8eb}
.tl-beeld img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transform:scale(1.05);transition:transform 1.8s cubic-bezier(.19,1,.22,1)}
.tl-beeld.zicht img{transform:none}
#over .tweeluik{margin-bottom:110px}

#over .kop.links p{color:var(--g)}
/* contact: gegevens links, gevel met voordeur rechts */
.contact-tl{align-items:center}
.contact-lijst{grid-template-columns:1fr!important;gap:12px!important;margin-top:40px}
.contact-lijst>div{padding:26px 30px!important}
.gevel-beeld{padding:0 0 60px 60px}
.gb-deur{position:absolute;left:0;bottom:0;width:38%;border-radius:22px;overflow:hidden;box-shadow:0 0 0 10px #fff,0 30px 60px rgba(0,0,0,.12)}
.gb-deur img{aspect-ratio:3/4}
.gevel-beeld figcaption{position:absolute;right:0;bottom:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
@media (max-width:834px){
 .tweeluik{grid-template-columns:1fr;gap:34px}
 #over .tweeluik{margin-bottom:60px}
 .kop.links{text-align:left}
 .gevel-beeld{padding:0 0 46px 40px;margin-top:20px}
 .gb-deur{width:42%;box-shadow:0 0 0 6px #fff,0 20px 40px rgba(0,0,0,.12);border-radius:16px}
 .gevel-beeld figcaption{font-size:10px;bottom:8px}
 .wb-plak{padding:30px 0!important}
}
@media (prefers-reduced-motion:reduce){.woordband span{animation:none}.tl-beeld img{transform:none}}
.rustig .tl-beeld img{transform:none}

/* reactieknop: op mobiel onderaan, zodat het menu vrij blijft */
@media (max-width:834px){.rx-vast{top:auto!important;bottom:16px!important}}

/* ===== v3: hero zonder scrolleffect, video van Luc ===== */
.hero-vast{height:auto!important}
.hero-vast .hero{position:relative!important;height:100vh!important;min-height:600px}
.hero-vast .hero .beeld{clip-path:none!important}
.hero-vast .hero .beeld video,.hero-vast .hero .beeld .still{transform:none!important}
.hero-vast .embleem-lijn,.hero-vast .adres-tag{display:none!important}
.hero-vast .hero .inhoud{opacity:1!important;transform:none!important}
.hero-vast .scrollhint{opacity:1!important}
.hero-vast .hero .beeld::after{background:linear-gradient(180deg,rgba(14,26,40,.42) 0%,rgba(14,26,40,.12) 42%,rgba(14,26,40,0) 62%,rgba(14,26,40,.18) 100%)!important}
/* ===== v3: woordband met bessen die erin overvloeien ===== */
.woordband{position:relative;overflow:hidden}
.wb-bes{position:absolute;top:0;right:0;bottom:0;width:min(46%,640px);display:block;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 35%,#000 75%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 35%,#000 75%)}
.wb-bes img{width:100%;height:100%;object-fit:cover;object-position:60% 45%}
.woordband .wb-plak{position:relative!important;z-index:1}
/* ===== v3: beelden lopen tot de rand van het scherm en vloeien over in de sectie ===== */
#over .tl-beeld{margin-left:min(0px,calc(540px - 50vw));}
#over .tl-beeld>picture{border-radius:0;background:none;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
#over .tl-beeld img{aspect-ratio:1/1;object-position:50% 60%}
#over .tweeluik{grid-template-columns:1.15fr .85fr;gap:40px}
.gevel-beeld{margin-right:min(0px,calc(540px - 50vw));padding:0 0 60px 0}
.gb-hoofd{border-radius:0!important;background:none!important;-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 50%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,#000 0%,#000 50%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
.gb-hoofd img{aspect-ratio:1/1;object-position:50% 40%}
.contact-tl{grid-template-columns:.85fr 1.15fr!important;gap:40px!important}
.gb-deur{left:6%;width:30%}
.gevel-beeld figcaption{right:max(22px,calc(50vw - 540px))}
/* LinkedIn, subtiel */
.li-link{display:inline-flex;align-items:center;gap:8px;color:var(--g);font-size:13px;transition:color .2s}
.li-link svg{width:16px;height:16px;fill:currentColor}
.li-link:hover{color:var(--a)}
.contact-li{margin-top:22px}
@media (max-width:834px){
 #over .tweeluik,.contact-tl{grid-template-columns:1fr!important}
 #over .tl-beeld{margin:0 -22px}
 .gevel-beeld{margin:0 -22px;padding-bottom:50px}
 #over .tl-beeld>picture,.gb-hoofd{-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 30%);mask-image:linear-gradient(0deg,transparent 0%,#000 30%);-webkit-mask-composite:source-over;mask-composite:add}
 .gb-deur{left:22px;width:36%}
 .gevel-beeld figcaption{right:22px}
 .wb-bes{width:70%}
}
.li-link[hidden]{display:none!important}
.gevel-beeld figcaption{left:calc(6% + 30% + 26px);right:auto!important;z-index:2}
@media (max-width:834px){.gevel-beeld figcaption{left:calc(22px + 36% + 14px)}}
/* Mobiele terugval: bewegende wolken zonder video */
.m-scene{display:none}
@media (max-width:820px){
 .val-terug .m-scene{display:block;position:absolute;inset:0;overflow:hidden;z-index:0}
 .val-terug .m-scene>*{position:absolute;left:50%;top:50%;width:max(100%,56.25vh);height:max(100%,177.78vw);transform:translate(-50%,-50%)}
 .val-terug .m-wolken{background:url(/website/wolken-kleur.webp) repeat-x 0 0/auto 62.5%;animation:mWolken 200s linear infinite}
 .val-terug .m-scene img{width:100%;height:100%;object-fit:cover}
 .val-terug video{opacity:0!important}
}
@keyframes mWolken{from{background-position:0 0}to{background-position:calc(var(--sw,4800px) * -1) 0}}
@media (prefers-reduced-motion:reduce){.val-terug .m-wolken{animation:none}}
/* ===== v4: woordband leesbaar — tekst links, bessen rechts, nooit over elkaar ===== */
.woordband .wb-plak{width:64%;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 82%,transparent 100%)}
.wb-bes{width:42%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 22%,#000 45%)!important;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 22%,#000 45%)!important}
.woordband span{-webkit-text-stroke:1px rgba(29,29,31,.45)!important}
@media (max-width:834px){.woordband .wb-plak{width:74%}.wb-bes{width:36%!important}}
/* ===== footer ===== */
.voet{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.voet-l,.voet-r{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.voet-r a{color:var(--g);transition:color .2s}.voet-r a:hover{color:var(--a)}
.voet .li-link{font-size:12px}
.voet .li-link svg{width:14px;height:14px}
@media (max-width:834px){.voet{flex-direction:column;align-items:flex-start;gap:10px}.voet-l,.voet-r{gap:6px 16px}}
/* ===== juridische pagina's ===== */
.site-header.vast{background:rgba(255,255,255,.92)}
.juridisch{padding:140px 0 110px}
.juridisch .wrap{max-width:780px}
.juridisch .label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin:0 0 14px}
.juridisch h1{font-size:clamp(40px,5vw,64px);line-height:1.04;margin:0 0 12px}
.juridisch .datum{color:var(--g);font-size:14px;margin:0 0 56px}
.juridisch h2{font-size:22px;line-height:1.25;margin:44px 0 14px;letter-spacing:-.02em}
.juridisch p,.juridisch li{font-size:17px;line-height:1.65;color:#424245}
.juridisch p{margin:0 0 14px}
.juridisch ul{margin:0 0 14px;padding-left:20px}.juridisch li{margin-bottom:8px}
.juridisch a{color:var(--a);text-decoration:underline;text-underline-offset:3px}
.juridisch .zie-ook{margin-top:44px}
@media (max-width:834px){.juridisch{padding:100px 0 70px}}

/* ===== v5: woordband — tekst volledig weg vóór de bessen beginnen ===== */
.woordband .wb-plak{width:56%!important;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 96%)!important;mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 96%)!important}
.wb-bes{width:40%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 25%,#000 50%)!important;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 25%,#000 50%)!important}
@media (max-width:834px){.woordband .wb-plak{width:66%!important}.wb-bes{width:34%!important}}
/* LinkedIn in de kaart van RIJMBOS BV */
.kaart-bv{position:relative}
.li-kaart{position:absolute;top:24px;right:26px;display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--g)!important;transition:color .2s}
.li-kaart svg{width:18px;height:18px;fill:#0A66C2;opacity:.85;transition:opacity .2s}
.li-kaart:hover{color:var(--a)!important}.li-kaart:hover svg{opacity:1}
.li-kaart[hidden]{display:none!important}
/* v5b: de lus via 'translate' (los van 'transform', die door de ontwerpscripts vastgezet wordt) */
.woordband span{animation:wbLoop2 60s linear infinite!important}
@keyframes wbLoop2{from{translate:0 0}to{translate:-50% 0}}
@media (prefers-reduced-motion:reduce){.woordband span{animation:none!important}}
.woordband .wb-plak{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 70%,transparent 96%)!important;mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 70%,transparent 96%)!important}
/* ===== voorstel: grijs van Over ons loopt over in de lucht boven de gevel (alleen homepage) ===== */
#over{background:linear-gradient(180deg,#F5F5F7 0%,#F5F5F7 calc(100% - 260px),#fff 100%)!important;padding-bottom:170px!important}
#contact{padding-top:0!important;position:relative;z-index:1}
#contact .gevel-beeld{margin-top:-150px}
#contact .gb-hoofd{-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 50%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 14%,#000 62%,transparent 100%)!important;mask-image:linear-gradient(270deg,#000 0%,#000 50%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 14%,#000 62%,transparent 100%)!important}
#contact .tweeluik>div:first-child{padding-top:60px}
@media (max-width:834px){#over{background:linear-gradient(180deg,#F5F5F7 0%,#F5F5F7 calc(100% - 140px),#fff 100%)!important}#contact{padding-top:60px!important}#contact .gevel-beeld{margin-top:20px}#contact .tweeluik>div:first-child{padding-top:0}}
@media (max-width:834px){#over{padding-bottom:90px!important}#contact .gb-hoofd{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 70%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 70%,transparent 100%)!important}}
/* portretten homepage: onthullingscirkel groot genoeg zodat de onderhoeken niet schuin afgesneden worden */
#over .persoon .cirkel.in{clip-path:inset(0 round 28px)}

/* v04: woordband met detail van het huis (dakkapellen) */
.wb-bes img{object-position:50% 55%}
/* v04 mobiel: zetel bij Over ons ook bovenaan zacht ingevloeid */
@media (max-width:834px){#over .tl-beeld>picture{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 72%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 72%,transparent 100%)!important}}

/* v04: woordband zonder foto, tekst over de volle breedte met zachte randen */
.woordband .wb-plak{width:100%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)!important}
@media (max-width:834px){.woordband .wb-plak{width:100%!important}}

/* v11: mobiele hero breder beeld (1080x1280) - fallback-scene volgt dezelfde verhouding */
.val-terug .m-scene>*{width:max(100%,84.375vh);height:max(100%,118.52vw)}

/* v13: banners op subpagina's (mobiel) lager, pand groot en imposant in beeld */
@media (max-width:820px){
  .hero.sub{height:min(54vh,470px);min-height:360px}
  .hero.sub .inhoud{bottom:8vh}
}

/* v16 woordband (opmerking Luc): geen omlijnde letters meer (de 'e' toonde interne lijnen),
   kleiner en rustiger; RIJMBOS in de gespatieerde kapitalen van het logo */
.woordband span{font-family:"Inter Tight",sans-serif!important;font-weight:500!important;font-size:clamp(30px,3.6vw,56px)!important;letter-spacing:-.02em!important;color:#B9BEC1!important;-webkit-text-stroke:0!important;line-height:1.25!important}
.woordband b{font-weight:600!important;letter-spacing:.24em!important;font-size:.62em;color:#505D62!important;-webkit-text-stroke:0!important;vertical-align:.18em}
.woordband{padding:34px 0!important}
@media (max-width:834px){.woordband span{font-size:30px!important}.woordband{padding:22px 0!important}}

/* v17: LinkedIn van Marc en Peter */
.li-p{display:inline-flex;align-items:center;gap:7px;color:#6E6E73;font-size:14px;text-decoration:none}
.li-p svg{width:15px;height:15px;fill:#0A66C2}
.li-p:hover{color:#1D1D1F}
.profiel .li-p{margin:18px 0 0 22px;vertical-align:baseline}
.kaart-p{position:relative}
.kaart-p .li-p{position:absolute;top:30px;right:28px;font-size:13px}
@media (max-width:834px){.profiel .li-p{margin:14px 0 0;display:flex}.kaart-p .li-p{top:22px;right:20px}}

/* v20: taalkeuze in het menu */
.taalnav{display:inline-flex;align-items:center;gap:2px;margin-left:10px;padding-left:16px;border-left:1px solid currentColor;border-left-color:rgba(127,127,127,.35);font-size:12px;letter-spacing:.12em}
.taalnav a{padding:4px 6px!important;opacity:.55}
.taalnav a.on{opacity:1;font-weight:600}
.taalnav a:hover{opacity:1}
@media (min-width:821px){.site-header:not(.solid) .taalnav a{color:#fff!important}.site-header:not(.solid) .taalnav{border-left-color:rgba(255,255,255,.4)}}
@media (max-width:820px){.nav.open .taalnav,.taalnav{margin:10px 0 0;padding:12px 0 0;border-left:0;border-top:1px solid var(--r);gap:18px;font-size:14px}.taalnav a{border-bottom:0!important;padding:6px 0!important}}

/* v21: geen horizontaal schuiven op mobiel */
html,body{overflow-x:clip;max-width:100%}

/* v23: menu op mobiel als donker glas (pand blijft zichtbaar, tekst wit) */
@media (max-width:820px){
  .site-header:has(.nav.open){background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
  .site-header:has(.nav.open) .brand,.site-header:has(.nav.open) .menu-btn{color:#fff!important}
  .site-header:has(.nav.open) .brand .light{display:block!important}
  .site-header:has(.nav.open) .brand .dark{display:none!important}
  .nav.open{position:fixed!important;top:0!important;left:0;right:0;z-index:-1;padding:70px 22px 22px!important;
    background:rgba(20,26,30,.5)!important;-webkit-backdrop-filter:blur(18px) saturate(140%)!important;backdrop-filter:blur(18px) saturate(140%)!important;
    box-shadow:0 20px 40px rgba(0,0,0,.18)}
  .nav.open:before{content:"";position:absolute;left:22px;right:22px;top:56px;border-top:1px solid rgba(255,255,255,.16)}
  .nav.open a{color:#fff!important;border-bottom-color:rgba(255,255,255,.2)!important;text-shadow:0 1px 10px rgba(0,0,0,.3)}
  .nav.open a.actief{font-weight:600}
  body:has(.nav.open) .hero .inhoud{opacity:0;transition:opacity .25s}
  .nav.open .taalnav{border-top-color:rgba(255,255,255,.2)!important}
  .nav.open .taalnav a{opacity:.6}.nav.open .taalnav a.on{opacity:1}
}