/* Approved home extensions: real project film and responsive hero photographs. */
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 850ms cubic-bezier(.16,1,.3,1);pointer-events:none}
.hero-slide.is-current{opacity:1}
.hero-slide.is-current{z-index:1}
.hero-slide.is-incoming{opacity:1;z-index:2}
.hero-slide .hero-photo{animation:none}
.hero-slide:is(.is-current,.is-incoming) .hero-photo{will-change:transform}

.recent-roof-section{background:var(--page)}
.recent-roof-panel{display:grid;grid-template-columns:.85fr 1.35fr;gap:48px;align-items:center;padding:40px;border-radius:var(--radius);background:var(--roof-card)}
.recent-roof-copy .accent{color:var(--accent)}
.recent-roof-copy h2{color:var(--text);font-size:clamp(38px,3.8vw,54px)}
.recent-roof-copy>p{margin-top:20px;font-size:18px;line-height:1.65}
.feature-quote{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.feature-quote blockquote{font-size:22px;line-height:1.5;color:var(--text)}
.feature-quote figcaption{margin-top:18px;color:var(--muted);font-size:15px;line-height:1.7}
.feature-quote strong{color:var(--text);font-weight:600}
.recent-roof-video{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--page)}
.recent-roof-video video{display:block;width:100%;height:100%;object-fit:contain;background:var(--page);color-scheme:dark;cursor:pointer}
.recent-roof-video video:focus-visible{outline:3px solid var(--accent);outline-offset:-5px}
@media(max-width:1040px){.recent-roof-panel{grid-template-columns:1fr;gap:32px;padding:32px}.recent-roof-copy h2{max-width:24ch}.feature-quote{max-width:48ch}}
@media(max-width:700px){.hero-slide:not(:first-child) .hero-photo{height:100%;top:0;object-position:50% 50%}.recent-roof-panel{padding:26px;gap:28px}.recent-roof-copy h2{font-size:36px;line-height:1.13}.recent-roof-copy>p{font-size:17px;margin-top:16px}.feature-quote{margin-top:24px;padding-top:22px}.feature-quote blockquote{font-size:21px}.feature-quote figcaption{font-size:15px;margin-top:14px}.recent-roof-video{border-radius:12px}}
@media(max-width:380px){.recent-roof-panel{padding:24px}.recent-roof-copy h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}