/* ===== Wow Bouwbedrijf Brik: prefab-route, van werkplaats naar dak langs de duimstok uit hun logo ===== */
.brik-route .br-werk{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:center;max-width:1120px;margin:0 auto}
.br-podium{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#141618;box-shadow:0 26px 50px -22px rgba(20,22,24,.45)}
.br-beeld{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s cubic-bezier(.22,.61,.36,1)}
.br-beeld img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform 6.5s linear}
.br-beeld.actief{opacity:1}
.br-beeld.actief img{transform:scale(1.07)}
.br-podium::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(to top,rgba(11,12,13,.62),transparent);pointer-events:none}
.br-label{position:absolute;left:18px;bottom:18px;z-index:2;display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:16px;line-height:1.2;max-width:calc(100% - 36px)}
.br-label-nr{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:15px}
.br-label-tekst{transition:opacity .45s ease}
.br-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.br-stappen li{display:flex}
.br-stappen .br-stap{height:100%;justify-content:flex-start}
.br-stap{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:#fff;border:1.5px solid transparent;border-radius:16px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--ink);
  transition:border-color .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.br-stap b{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--salie);color:var(--accent);display:grid;place-items:center;font-size:14px;transition:background .5s ease,color .5s ease,border-color .5s ease}
.br-stap strong{display:block;font-size:16.5px;line-height:1.3;margin-bottom:3px}
.br-stap em{display:block;font-style:normal;font-size:14.5px;line-height:1.55;color:var(--tekst)}
.br-stap:hover{border-color:rgba(var(--accent-rgb),.35)}
.br-stap.actief{border-color:var(--accent);box-shadow:0 14px 30px -18px rgba(var(--accent-rgb),.55);}
.br-stap.actief b{background:var(--accent);border-color:var(--accent);color:#fff}
.br-stap:focus-visible,.br-duimstok:focus-visible{outline:3px solid var(--salie);outline-offset:3px}
/* de duimstok: zelfde lijnmaat als onder het logo, met een dakkapelletje dat meerijdt */
.br-duimstok{max-width:1120px;margin:clamp(26px,3.4vw,40px) auto 0;padding:46px 6px 4px;cursor:pointer;touch-action:pan-y;user-select:none}
.br-lat{position:relative;height:34px;border-top:2.5px solid var(--ink);
  background-image:repeating-linear-gradient(to right,var(--ink) 0 1.5px,transparent 1.5px 100%),repeating-linear-gradient(to right,var(--ink) 0 1.5px,transparent 1.5px 100%);
  background-size:calc(100% / 40) 9px,calc(100% / 8) 18px;background-repeat:repeat-x;background-position:0 0,0 0}
.br-vul{position:absolute;left:0;top:-2.5px;height:5px;width:12.5%;background:var(--accent);border-radius:0 3px 3px 0;transition:width .85s cubic-bezier(.22,.61,.36,1)}
.br-maat{position:absolute;left:0;right:0;top:20px;display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--tekst)}
.br-maat span{width:0;display:flex;justify-content:center}
.br-rijder{position:absolute;bottom:calc(100% + 6px);left:12.5%;width:48px;height:34px;margin-left:-24px;color:var(--accent);transition:left .85s cubic-bezier(.22,.61,.36,1)}
.br-rijder svg{width:100%;height:100%;display:block}
.br-duimstok.sleept .br-vul,.br-duimstok.sleept .br-rijder{transition:none}
.br-actie{text-align:center;margin-top:clamp(24px,3vw,34px)}
@media(max-width:900px){
  .brik-route .br-werk{grid-template-columns:minmax(0,1fr)}
  .br-stap.actief{transform:none}
}
@media(max-width:640px){
  .br-stappen{grid-template-columns:minmax(0,1fr)}
  .br-stap{padding:12px 14px}
  .br-stap em{font-size:14px}
  .br-label{font-size:14.5px;left:14px;bottom:14px}
  .br-actie .knop{width:100%;white-space:normal}
}
@media (prefers-reduced-motion: reduce){
  .br-beeld,.br-beeld img,.br-vul,.br-rijder,.br-stap,.br-label-tekst{transition:none!important}
  .br-beeld.actief img{transform:none}
}
@media print{.br-duimstok,.br-actie{display:none}}