.roof-systems-page{background:#050606;color:#fff}.roof-systems-hero{position:relative;isolation:isolate;min-height:650px;display:grid;place-items:center;overflow:hidden}.roof-systems-hero-poster,.roof-systems-hero-video{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover}.roof-systems-hero-video{z-index:-2}.roof-systems-hero-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#000b,#0008 48%,#000d)}.roof-systems-hero-content{padding-block:58px;text-align:center}.roof-systems-hero h1{max-width:980px;margin:0 auto;font:400 clamp(48px,6vw,78px)/.98 var(--font-display);letter-spacing:5px;text-transform:uppercase;text-wrap:balance;animation:roof-system-hero-in .9s ease-out both}.roof-systems-hero-content>p{max-width:890px;margin:25px auto 32px;color:#fff;font-size:clamp(21px,3vw,39px);line-height:1.35;text-wrap:balance;animation:roof-system-hero-in .9s ease-out .12s both}.roof-systems-jump-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;max-width:1050px;margin-inline:auto}.roof-systems-jump-grid a{min-height:63px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 23px;border:1.5px solid var(--orange);border-radius:999px;background:#08090980;color:#fff;font:500 13px var(--font-mono);letter-spacing:2px;transition:background .25s,border-color .25s,transform .25s;backdrop-filter:blur(4px);animation:roof-system-hero-in .72s ease-out both}.roof-systems-jump-grid a:first-child{animation-delay:.2s}.roof-systems-jump-grid a:nth-child(2){animation-delay:.27s}.roof-systems-jump-grid a:nth-child(3){animation-delay:.34s}.roof-systems-jump-grid a:nth-child(4){animation-delay:.41s}.roof-systems-jump-grid a:nth-child(5){animation-delay:.48s}.roof-systems-jump-grid a:nth-child(6){animation-delay:.55s}.roof-systems-jump-grid a:focus-visible,.roof-systems-jump-grid a:hover{background:var(--orange);border-color:var(--orange);color:#121414;transform:translateY(-2px)}.roof-systems-jump-grid svg{width:27px;height:27px;stroke-width:1.8;flex:none}.roof-system-panel{position:relative;isolation:isolate;min-height:760px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;scroll-margin-top:125px;background:#111}.roof-system-background{z-index:-3;object-fit:cover;transform:scale(1.015);transition:transform 4s ease-out}.roof-system-panel-shade{position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,#0001,#0001 40%,#000c 82%,#000e)}.roof-system-cutout{position:absolute;z-index:-1;top:9%;left:50%;width:min(48vw,610px);height:auto;max-height:47%;object-fit:contain;opacity:0;filter:drop-shadow(0 22px 32px #0008);transform:translateX(-50%) scale(.72)}.roof-system-panel.is-visible .roof-system-background{transform:scale(1.06)}.roof-system-panel.is-visible .roof-system-cutout-punch{animation:roof-system-punch 1.2s cubic-bezier(.2,.76,.28,1) .08s both}.roof-system-panel.is-visible .roof-system-cutout-expand{animation:roof-system-expand 1.2s cubic-bezier(.2,.76,.28,1) .08s both}.roof-system-copy{width:100%;padding:48px max(24px,calc((100vw - 1080px)/2)) 58px;text-align:center;background:linear-gradient(180deg,transparent,#000c 25%,#000e);opacity:0;transform:translateY(75px)}.roof-system-panel.is-visible .roof-system-copy{animation:roof-system-glide 1.2s cubic-bezier(.16,.82,.24,1) .12s both}.roof-system-copy h2{margin:0;font:400 clamp(36px,4.3vw,58px)/1 var(--font-display);text-transform:uppercase;letter-spacing:-1.5px}.roof-system-copy p{max-width:960px;margin:13px auto 24px;color:#eee;font-size:15px;line-height:1.65}.roof-system-learn{min-width:210px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;background:var(--orange);color:#151717;font-weight:800}.roof-system-learn svg{width:19px;transition:transform .2s}.roof-system-learn:hover svg{transform:translateX(4px)}@keyframes roof-system-hero-in{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}@keyframes roof-system-punch{0%{opacity:0;transform:translateX(-50%) scale(.58)}58%{opacity:1;transform:translateX(-50%) scale(1.06)}to{opacity:1;transform:translateX(-50%) scale(1)}}@keyframes roof-system-expand{0%{opacity:0;transform:translateX(-50%) scale(.35)}to{opacity:1;transform:translateX(-50%) scale(1)}}@keyframes roof-system-glide{0%{opacity:0;transform:translateY(75px)}to{opacity:1;transform:none}}@media(max-width:900px){.roof-systems-hero{min-height:720px}.roof-systems-jump-grid{grid-template-columns:repeat(2,1fr)}.roof-system-panel{min-height:720px}.roof-system-cutout{top:11%;width:min(68vw,560px)}.roof-system-copy{padding-bottom:45px}}@media(max-width:620px){.roof-systems-hero{min-height:760px}.roof-systems-hero-content{padding:42px 17px}.roof-systems-hero h1{font-size:45px;line-height:1.02;letter-spacing:1.8px}.roof-systems-hero-content>p{margin:19px auto 25px;font-size:21px}.roof-systems-jump-grid{grid-template-columns:1fr;gap:9px}.roof-systems-jump-grid a{min-height:52px;padding-inline:18px;font-size:11px;letter-spacing:1.4px}.roof-systems-jump-grid svg{width:23px;height:23px}.roof-system-panel{min-height:680px;scroll-margin-top:104px}.roof-system-cutout{top:11%;width:82vw;max-height:42%}.roof-system-copy{padding:150px 19px 40px}.roof-system-copy h2{font-size:37px;letter-spacing:-1px}.roof-system-copy p{font-size:14px;line-height:1.55}.roof-system-learn{min-width:185px}}@media(prefers-reduced-motion:reduce){.roof-systems-hero-video{display:none}.roof-system-panel.is-visible .roof-system-copy,.roof-system-panel.is-visible .roof-system-cutout,.roof-systems-hero h1,.roof-systems-hero-content>p,.roof-systems-jump-grid a{animation:none;opacity:1;transform:translateX(-50%) scale(1)}.roof-system-panel.is-visible .roof-system-copy{transform:none}.roof-system-panel.is-visible .roof-system-background{transform:scale(1.015)}}