.roofing-demo{background:#071d30;color:#fff;padding:60px 0}.roofing-demo .eyebrow{color:#f8d329}.roofing-demo h2{font-size:36px;line-height:1.15;letter-spacing:-1px}.roofing-demo .intro{font-size:16px;color:#c2d0dc;line-height:1.7;max-width:620px}.roofing-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:38px;align-items:center}.roofing-stage{position:relative;background:radial-gradient(ellipse at 50% 50%,#193d58,#0b2439 65%);border:1px solid #ffffff17;border-radius:12px;overflow:hidden}.roofing-stage canvas{display:block;width:100%;height:440px;touch-action:pan-y}.roofing-view-label{position:absolute;top:20px;left:22px;color:#b7c9d9;font-size:12px;letter-spacing:1.4px}.roofing-stage-note{position:absolute;bottom:18px;left:22px;right:22px;color:#b7c9d9;font-size:12px;text-align:center}.roofing-controls{display:flex;gap:10px;flex-wrap:wrap;margin:17px 0}.roofing-controls button{border:1px solid #ffffff55;background:transparent;color:white;padding:11px 15px;border-radius:4px;font-size:14px;min-height:44px}.roofing-controls button:first-child{background:#f8d329;border-color:#f8d329;color:#071d30;font-weight:bold}.roofing-controls button:hover{border-color:#f8d329}.roofing-steps{display:grid;gap:9px;margin:25px 0}.roofing-steps button{display:flex;align-items:center;gap:14px;text-align:left;width:100%;border:1px solid #ffffff20;background:#ffffff04;color:#c6d5e2;padding:13px 16px;border-radius:5px;font-size:15px;min-height:48px}.roofing-steps button span{color:#c6d5e2;font-size:13px;width:25px}.roofing-steps button[aria-pressed=true]{border-color:#f8d329;background:#f8d32913;color:#fff}.roofing-steps button[aria-pressed=true] span{color:#f8d329}.roofing-detail{font-size:15px;line-height:1.7;color:#c6d5e2;min-height:78px}.roofing-disclaimer{font-size:12px!important;color:#a8bdcd!important;line-height:1.6!important;max-width:750px}.roofing-demo .button{margin-top:12px}.roofing-detail strong{color:#f8d329}.roofing-stage canvas:focus-visible{outline-offset:-5px}@media(max-width:900px){.roofing-layout{grid-template-columns:1fr;gap:20px}.roofing-stage canvas{height:420px}.roofing-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.roofing-copy .intro,.roofing-copy h2,.roofing-copy .eyebrow,.roofing-copy .button{grid-column:1/-1}.roofing-detail{align-self:center}}@media(max-width:600px){.roofing-demo{padding:38px 0}.roofing-demo h2{font-size:29px}.roofing-stage canvas{height:330px}.roofing-view-label{font-size:10px}.roofing-copy{display:block}.roofing-steps{grid-template-columns:1fr 1fr;gap:7px}.roofing-steps button{padding:11px 9px;font-size:13px;gap:7px}.roofing-steps button:last-child{grid-column:1/-1}.roofing-controls{gap:8px}.roofing-controls button{font-size:13px;padding:10px 12px}.roofing-detail{min-height:65px}}
.roofing-materials{display:flex;gap:8px;margin-bottom:14px}.roofing-materials button{border:1px solid #ffffff55;border-radius:4px;background:transparent;color:white;padding:12px 24px;font-size:16px;min-height:48px}.roofing-materials button[aria-pressed=true]{background:#f8d329;border-color:#f8d329;color:#071d30;font-weight:700}.roofing-steps button .cover-name{width:auto;color:inherit;font-size:inherit}.roofing-back{font-size:14px;font-weight:700}.roofing-page-intro{padding:65px 0 50px}.roofing-page-intro h1{font-size:clamp(32px,4vw,54px);line-height:1.1;letter-spacing:-1.5px;color:#071d30}.roofing-page-intro>p:not(.eyebrow){max-width:740px;line-height:1.7;font-size:18px}.roofing-services{padding:60px 0}.roofing-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0}.roofing-service-grid article{border-top:3px solid #f8d329;padding-top:18px}.roofing-service-grid p{line-height:1.7}.roofing-page footer{flex-wrap:wrap}.roofing-page header{gap:20px}.roofing-page header .phone{margin-left:auto}@media(max-width:600px){.roofing-page-intro{padding:35px 0}.roofing-service-grid{grid-template-columns:1fr}.roofing-page header{flex-wrap:wrap;gap:10px}.roofing-page header .phone{margin-left:0}.roofing-page header .roofing-back{font-size:14px}.roofing-view-label{font-size:12px}.roofing-steps button{font-size:14px}.roofing-controls button{font-size:14px}}

#toiture-3d .roofing-steps button .cover-name,#toiture-3d .roofing-steps button .ridge-name{width:auto;color:inherit;font-size:inherit}#toiture-3d .roofing-stage canvas{height:470px}@media(max-width:600px){#toiture-3d .roofing-stage canvas{height:340px}#toiture-3d .roofing-steps button{line-height:1.4}}