.roof-system{background:#f4f2ee;color:#252a2e;margin:0;padding:80px 24px;scroll-margin-top:32px;font-family:Onest,Arial,sans-serif}.roof-system *{box-sizing:border-box}.roof-system__inner{max-width:1160px;margin:0 auto}.roof-system__heading{max-width:780px;margin:0 0 40px}.roof-system__eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:#a82625;margin:0 0 14px}.roof-system h2{font-size:clamp(30px,4vw,46px);line-height:1.12;letter-spacing:-1px;margin:0 0 20px}.roof-system__heading>p:last-child{font-size:18px;line-height:1.65;margin:0}.roof-system__layout{display:grid;grid-template-columns:1.12fr 1fr;gap:36px;align-items:start}.roof-system__diagram{margin:0;background:#e9e6e0;border-radius:18px;padding:12px 12px 22px;position:sticky;top:24px}.roof-system__diagram svg{display:block;width:100%;height:auto;overflow:visible}.roof-system__diagram figcaption{font-size:12px;line-height:1.5;color:#596065;padding:0 16px;margin:0}.roof-system__hotspots circle{fill:white;stroke:#a82625;stroke-width:2;transition:fill .15s}.roof-system__hotspots text{fill:#a82625;text-anchor:middle;font:700 19px Arial,sans-serif;pointer-events:none}.roof-system__hotspots a:hover circle,.roof-system__hotspots a[aria-current=true] circle{fill:#a82625}.roof-system__hotspots a:hover text,.roof-system__hotspots a[aria-current=true] text{fill:white}.roof-system__hotspots a:focus-visible circle{stroke:#215ecc;stroke-width:5}.roof-system[data-enhanced=true] [data-system-layer]{opacity:.65;transition:opacity .2s}.roof-system[data-enhanced=true] [data-system-layer][data-active=true]{opacity:1}.roof-system__tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 24px}.roof-system [hidden]{display:none!important}.roof-system__tabs button{padding:12px 14px;background:transparent;color:#42484c;border:1px solid #c9c6c0;border-radius:8px;text-align:left;font:600 14px/1.35 Onest,Arial,sans-serif;cursor:pointer;min-height:46px}.roof-system__tabs button:hover{background:#fff}.roof-system__tabs button[aria-selected=true]{background:#252a2e;border-color:#252a2e;color:white}.roof-system__tabs button:focus-visible,.roof-system__cta a:focus-visible{outline:3px solid #215ecc;outline-offset:4px}.roof-system__panels article{background:#fff;padding:28px;border-radius:12px;margin:0 0 16px;scroll-margin-top:24px}.roof-system__step{color:#a82625;font-size:11px;font-weight:700;letter-spacing:1.4px;margin:0 0 12px}.roof-system h3{font-size:28px;line-height:1.2;margin:0 0 16px}.roof-system__panels article>p:not(.roof-system__step){font-size:16px;line-height:1.7;margin:0 0 18px}.roof-system__panels article>p:last-child{margin:0}.roof-system__question{border-top:1px solid #eee;padding-top:18px}.roof-system__question strong{display:block;margin-bottom:4px}.roof-system__cta a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-radius:8px;background:#a82625;color:white;font-size:15px;font-weight:600;line-height:1.5;text-decoration:none}.roof-system__cta a:hover{background:#832020}.roof-system__cta p{font-size:12px;line-height:1.6;margin:10px 0 0;color:#596065}@media(max-width:760px){.roof-system{padding:48px 20px}.roof-system__layout{grid-template-columns:1fr;gap:24px}.roof-system__heading{margin-bottom:24px}.roof-system__diagram{position:static}.roof-system__panels article{padding:24px}.roof-system__heading>p:last-child{font-size:16px}}@media(prefers-reduced-motion:reduce){.roof-system [data-system-layer],.roof-system__hotspots circle{transition:none}}
.roof-system__canvas{width:100%;height:400px;position:relative;touch-action:pan-y}.roof-system__canvas canvas{display:block;width:100%;height:100%;border-radius:12px;touch-action:pan-y;cursor:grab}.roof-system__canvas canvas:active{cursor:grabbing}.roof-system__model-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px 18px}.roof-system__model-controls label{font-size:12px;font-weight:600;display:flex;flex-direction:column;gap:8px;flex:1}.roof-system__model-controls input{width:100%;accent-color:#a82625;cursor:pointer}.roof-system__model-controls button{border:1px solid #b6b2ac;background:transparent;padding:8px 12px;border-radius:6px;color:#363c40;font:600 12px Onest,Arial,sans-serif;cursor:pointer}.roof-system__model-controls button:focus-visible,.roof-system__model-controls input:focus-visible{outline:3px solid #215ecc;outline-offset:4px}.roof-system__canvas canvas:focus-visible{outline:3px solid #215ecc;outline-offset:4px}@media(max-width:760px){.roof-system__canvas{height:310px}}
.roof-system__layout{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}.roof-system__diagram,.roof-system__explorer,.roof-system__canvas{min-width:0}.roof-system__canvas canvas{max-width:100%}@media(max-width:760px){.roof-system__layout{grid-template-columns:minmax(0,1fr)}}
.roof-system__walk{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px}.roof-system__walk button{border:0;padding:8px 0;background:transparent;color:#a82625;font:600 13px Onest,Arial,sans-serif;cursor:pointer}.roof-system__walk button:disabled{color:#858a8d;cursor:default}.roof-system__walk button:focus-visible{outline:3px solid #215ecc;outline-offset:4px}.roof-system__walk span{font-size:12px;color:#596065}