/* Home page "Roofing in action" gallery */
.roof-gallery{margin-top:40px}
.rg-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink,#080d16)}
.rg-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.rg-slide.is-active{opacity:1;z-index:1}
.rg-slide button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.rg-slide img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 45%;transform:scale(1.02);transition:transform 7s ease-out}
.rg-slide.is-active img{transform:scale(1.09)}
.rg-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:64px 28px 24px;background:linear-gradient(rgba(8,13,22,0),rgba(8,13,22,.85));color:#fff;pointer-events:none}
.rg-title{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rg-count{font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--blue-light,#7fafd9);white-space:nowrap}
.rg-nav{position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-24px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.4);background:rgba(8,13,22,.55);color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.rg-nav svg{width:22px;height:22px}
.rg-prev{left:18px}
.rg-next{right:18px}
.rg-nav:hover,.rg-nav:focus-visible{background:var(--blue,#194d86);border-color:var(--blue,#194d86)}
.rg-progress{position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;background:rgba(255,255,255,.15)}
.rg-progress span{display:block;width:0;height:100%;background:var(--blue-light,#7fafd9)}
.roof-gallery.is-playing .rg-progress span{animation:rg-progress var(--rg-delay,5s) linear forwards}
@keyframes rg-progress{to{width:100%}}
.rg-strip{margin-top:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rg-track{display:flex;gap:12px;width:max-content;animation:rg-flow 45s linear infinite}
.rg-strip:hover .rg-track,.rg-strip:focus-within .rg-track,html.motion-paused .rg-track{animation-play-state:paused}
@keyframes rg-flow{to{transform:translateX(calc(-50% - 6px))}}
.rg-thumb{flex:0 0 auto;width:168px;aspect-ratio:4/3;padding:0;border:2px solid transparent;background:none;cursor:pointer;opacity:.65;transition:opacity .2s,border-color .2s}
.rg-thumb img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.rg-thumb:hover,.rg-thumb:focus-visible{opacity:1}
.rg-thumb.is-active{opacity:1;border-color:var(--blue,#194d86)}
html.motion-paused .rg-slide img{transition:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .rg-slide,.rg-slide img{transition:none}
  .rg-slide img,.rg-slide.is-active img{transform:none}
  .rg-track{animation:none}
  .rg-strip{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:700px){
  .roof-gallery{margin-top:28px}
  .rg-stage{aspect-ratio:4/3}
  .rg-nav{width:40px;height:40px;margin-top:-20px}
  .rg-prev{left:10px}
  .rg-next{right:10px}
  .rg-caption{padding:44px 16px 18px}
  .rg-title{font-size:15px}
  .rg-thumb{width:116px}
}