.roof-explorer{background:var(--color-deep);color:#f5f8fa;scroll-margin-top:24px}.roof-explorer-inner{max-width:1440px;margin:auto;padding:84px 48px 64px}.roof-explorer-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:42px}.roof-explorer-kicker{font-size:13px;margin:0 0 20px;color:#bfd0db}.roof-explorer-heading h2{font-size:clamp(36px,4vw,58px);font-weight:500;letter-spacing:-.045em;line-height:1.07;margin:0}.roof-explorer-heading>p{max-width:350px;font-size:16px;line-height:1.65;color:#c4d3dc;margin:0 0 4px}.roof-service-choices{display:grid;grid-template-columns:repeat(6,1fr);margin-bottom:32px;border-bottom:1px solid #47606f}.roof-service-choices button{display:flex;align-items:center;gap:12px;min-height:64px;font:inherit;font-size:14px;padding:12px 8px;text-align:left;color:#c4d3dc;background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;cursor:pointer}.roof-service-choices button>span{font-size:10px;opacity:.8}.roof-service-choices button[aria-pressed=true]{color:#fff;border-bottom-color:#d1e3ee}.roof-service-choices button:hover{background:#ffffff0b;color:#fff}.roof-explorer-layout{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(260px,1fr);gap:40px;align-items:start}.roof-explorer-figure{margin:0;min-width:0}.roof-explorer-image{position:relative;aspect-ratio:3/2;touch-action:pan-y;overflow:hidden;border-radius:8px;background:#294859}.roof-explorer-image img{object-fit:cover;border-radius:0}.roof-explorer-image[data-comparable=true]{cursor:ew-resize}.roof-explorer-after{position:absolute;inset:0;transition:opacity .3s}.roof-image-label,.roof-image-status{position:absolute;left:18px;top:18px;padding:7px 12px;font-size:12px;background:#102c3b;color:#fff;border-radius:4px}.roof-after-label{left:auto;right:18px}.roof-image-status{top:auto;bottom:18px;z-index:2}.roof-explorer-figure figcaption{font-size:11px;line-height:1.6;color:#bbced9;margin-top:16px;max-width:700px}.roof-compare-control{margin-top:20px}.roof-compare-control>label{font-size:12px;display:block;text-align:center;color:#d1dfe7;margin-bottom:8px}.roof-compare-control>div{display:flex;align-items:center;gap:12px;font-size:12px}.roof-compare-control input{flex:1;min-width:0;height:44px;accent-color:#d1e3ee;cursor:ew-resize}.roof-compare-control button{min-width:68px;min-height:44px;padding:8px;border:1px solid #587382;border-radius:4px;background:transparent;color:#fff;font:inherit;white-space:nowrap;cursor:pointer}.roof-compare-control button[aria-pressed=true]{background:#e4edf3;color:#173447}.roof-compare-line{position:absolute;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 0 1px #173447;pointer-events:none}.roof-compare-handle{position:absolute;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;background:#fff;color:#193b4f;border:2px solid #173447;box-shadow:0 0 0 3px #fff;border-radius:50%;pointer-events:none}.roof-compare-hint{position:absolute;top:calc(50% - 58px);transform:translateX(-50%);padding:8px 12px;white-space:nowrap;border-radius:4px;background:#102c3b;color:#fff;font-size:12px;font-weight:500;pointer-events:none}.roof-explorer-figure:focus-within .roof-compare-handle{outline:3px solid #fff;outline-offset:6px;box-shadow:0 0 0 10px #173447}.roof-view-switch{display:grid;grid-template-columns:1fr 1.1fr;border:1px solid #587382;border-radius:6px;padding:3px;gap:3px;margin-bottom:34px}.roof-view-switch button{padding:12px 9px;background:transparent;border:0;border-radius:3px;font:inherit;font-size:13px;color:#d7e3ea;min-height:44px;cursor:pointer}.roof-view-switch button[aria-pressed=true]{background:#e4edf3;color:#173447}.roof-explorer-copy{min-height:300px}.roof-explorer-step{font-size:11px!important;letter-spacing:.12em;color:#b6cedc!important;margin:0 0 16px!important}.roof-explorer-copy h3{font-size:clamp(27px,2.5vw,35px);line-height:1.1;font-weight:500;margin:0 0 18px;letter-spacing:-.035em}.roof-explorer-copy>p{color:#d1dce3;font-size:15px;line-height:1.65;margin:0}.roof-change-note{border-top:1px solid #486270;margin-top:26px;padding-top:20px}.roof-change-note>span{display:block;font-size:11px;color:#a9c1d0;margin-bottom:8px}.roof-change-note p{font-size:13px;line-height:1.65;color:#cfdee7;margin:0}.roof-explorer-panel>a{display:inline-block;color:#fff;font-size:14px;text-decoration:none;border-bottom:1px solid #94b3c4;padding:12px 0 6px;margin-top:24px}.roof-layer-choices{display:grid;margin-bottom:24px}.roof-layer-choices button{display:grid;grid-template-columns:25px 1fr 12px;align-items:center;gap:10px;min-height:44px;padding:10px 8px;font:inherit;font-size:13px;text-align:left;border:0;border-bottom:1px solid #405d6e;border-radius:0;background:transparent;color:#c9d9e2;cursor:pointer}.roof-layer-choices button>span:first-child{font-size:10px}.roof-layer-choices button[aria-pressed=true]{background:#284e65;color:#fff}.roof-layer-choices+.roof-explorer-copy{min-height:0}.roof-layer-choices+.roof-explorer-copy h3{font-size:23px}.roof-layer-pin{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#f6fafde8;color:#173447;border:1px solid #173447;font-size:12px;cursor:pointer}.roof-layer-pin[aria-pressed=true]{background:#173447;color:#fff;border:2px solid #fff;outline:4px solid #17344744}.roof-explorer a:focus-visible,.roof-explorer button:focus-visible,.roof-explorer input:focus-visible{outline:3px solid #d1e3ee;outline-offset:4px}@media (max-width:1100px){.roof-explorer-inner{padding:64px 28px}.roof-explorer-layout{gap:28px;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr)}.roof-service-choices button{font-size:12px;gap:6px}}@media (max-width:900px){.roof-explorer-layout{grid-template-columns:1fr}.roof-explorer-panel{display:block;max-width:none}.roof-explorer-copy{min-height:0}.roof-service-choices{grid-template-columns:repeat(3,1fr)}.roof-service-choices button{font-size:14px;min-height:54px}.roof-view-switch{max-width:340px;margin-bottom:24px}.roof-layer-choices{grid-template-columns:1fr 1fr;gap:0 16px}.roof-change-note{max-width:640px}}@media (max-width:600px){.roof-explorer-inner{padding:52px 20px}.roof-explorer-heading{display:block;margin-bottom:26px}.roof-explorer-heading>p{margin-top:22px;font-size:14px}.roof-service-choices{margin-bottom:22px}.roof-service-choices button{font-size:12px;gap:5px;padding:10px 4px}.roof-service-choices button span{display:none}.roof-explorer-image{margin-left:-20px;margin-right:-20px;border-radius:0}.roof-image-label{top:12px;left:12px;font-size:10px;padding:5px 9px}.roof-after-label{left:auto;right:12px}.roof-layer-pin{width:44px;height:44px;font-size:11px}.roof-explorer-figure figcaption{font-size:10px}.roof-layer-choices{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.roof-explorer-after{transition:none}}