/* Roofing motion stays scoped to this concept. */
body[data-design=roof] .hero__right img{object-position:center;filter:saturate(.8) contrast(1.04) brightness(.85)}
.roof__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.8) contrast(1.04) brightness(.85);opacity:0;transition:opacity .5s;pointer-events:none}
.roof__video.ready{opacity:1}
.roof-video-toggle{position:absolute;top:24px;left:24px;z-index:5;min-height:44px;padding:11px 14px;border:1px solid #f0ede577;background:#171a1be6;color:#f0ede5;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.06em}
.roof-video-toggle[hidden]{display:none}
.roof-video-toggle:hover{border-color:var(--orange);color:#ffad96}
.roof-video-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
@media(max-width:1100px){body[data-design=roof] .hero{grid-template-columns:1fr;min-height:0}
body[data-design=roof] .hero__right{position:relative;inset:auto;grid-row:1;min-height:clamp(260px,45vw,440px);opacity:1}
body[data-design=roof] .hero__right:before{background:linear-gradient(0deg,#171a1b90,transparent 45%);pointer-events:none}
body[data-design=roof] .hero__right:after{font-size:65px;right:25px;bottom:17px}
body[data-design=roof] .hero__left{grid-row:2;padding:42px 25px 48px}
body[data-design=roof] .hero__left h1{font-size:clamp(74px,11vw,120px);line-height:.94;margin:32px 0 35px;letter-spacing:-.07em}
body[data-design=roof] .hero__bottom{max-width:600px}
body[data-design=roof] .hero__photo-label{display:block;writing-mode:horizontal-tb;transform:none;left:25px;bottom:20px;font-size:9px;max-width:calc(100% - 120px);line-height:1.6;letter-spacing:.04em}
body[data-design=roof] .diagonal{width:230px;height:58px;right:-85px;top:23px;transform:rotate(35deg);padding-bottom:14px;font-size:8px}}
@media(max-width:600px){body[data-design=roof] .hero__right{min-height:clamp(240px,62vw,340px)}
body[data-design=roof] .hero__left{padding:34px 20px 42px}
body[data-design=roof] .hero__left h1{font-size:clamp(53px,14vw,84px);line-height:.98;margin:28px 0 30px}
body[data-design=roof] .hero__bottom{gap:22px}
body[data-design=roof] .hero__photo-label{left:20px;bottom:18px;font-size:8px}
.roof-video-toggle{top:17px;left:20px;padding:10px 12px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.roof__video{transition:none;display:none}.roof__video.requested{display:block}}