/* Native roof explorer. Artwork, motion, zoom and controls have separate layers. */
.roof-system{--roof-ink:#272727;--roof-muted:#727272;--roof-line:#e3e3e3;--roof-paper:#ffffff;background:var(--roof-paper);color:var(--roof-ink);font-family:var(--body,Arial,sans-serif);position:relative;isolation:isolate;overflow:hidden}
.roof-system *{box-sizing:border-box}.roof-system button,.roof-system a{-webkit-tap-highlight-color:transparent}.roof-system button{font-family:inherit}.roof-system button:focus-visible,.roof-system a:focus-visible,.roof-component-info:focus-visible{outline:2px solid #5d5d5d;outline-offset:5px}.roof-system h1,.roof-system h2,.roof-system p{margin:0}.roof-system-main{position:relative;display:grid;grid-template-columns:35% minmax(0,1fr);min-height:710px;max-width:1800px;margin:auto}
.roof-system-copy{align-self:start;position:relative;z-index:3;padding:99px 0 72px 16.5%}.roof-system-eyebrow{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;line-height:1.5;font-weight:500;color:#727272}.roof-system h1{font-family:var(--body,Arial,sans-serif);font-size:clamp(3.25rem,4.45vw,5.5rem);font-weight:600;letter-spacing:-.067em;line-height:1.02;margin:23px -30px 27px 0;overflow-wrap:anywhere}.roof-system h1>span{display:block}.roof-system-intro{font-size:clamp(.97rem,1.26vw,1.2rem);line-height:1.55;color:#696969;max-width:365px;white-space:pre-line}.roof-system-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:29px;align-items:center}.roof-primary,.roof-secondary{border:1px solid #383838;border-radius:100px;min-height:49px;padding:12px 22px;display:inline-flex;align-items:center;justify-content:center;gap:17px;font-size:.76rem;font-weight:500;line-height:1.4;text-decoration:none;transition:background .2s,color .2s}.roof-primary{background:#353535;color:#ffffff}.roof-primary:hover{background:#575757}.roof-secondary{background:transparent;color:var(--roof-ink);border-color:#b8b8b8}.roof-secondary:hover{background:#f0f0f0}.roof-system .roof-system-location{font-size:.71rem;color:#888888;margin-top:23px}.roof-system-work{display:inline-flex;align-items:center;gap:15px;margin-top:22px;font-size:.7rem;color:#5d5d5d;text-underline-offset:5px}.roof-system-work:hover{text-decoration:underline}
.roof-system-stage{position:relative;min-width:0;min-height:710px;scroll-margin-top:calc(var(--owner-offset,0px) + 100px);background:#ffffff}.roof-artwork-perspective{position:absolute;inset:0 8% 66px 0%;perspective:1800px;perspective-origin:50% 50%;pointer-events:none;overflow:visible}.roof-artwork{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%;transition:none!important;animation:none!important;overflow:visible;touch-action:pan-y pinch-zoom;pointer-events:auto}.roof-artwork.is-tracking{will-change:transform}.roof-artwork-zoom{position:absolute;inset:10% 4%;transform:scale(var(--roof-zoom,1));transform-origin:52% 47%;transition:transform .28s ease-out;touch-action:pan-y pinch-zoom}.roof-system-image{position:absolute;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none;touch-action:pan-y pinch-zoom}.roof-system[data-view=photo] .roof-artwork-zoom{inset:13% 10% 9%}.roof-system[data-view=photo] .roof-system-image[data-roof-image=photo]{object-fit:cover;border-radius:3px;box-shadow:0 20px 40px #27272712}
.roof-component-info{position:absolute;z-index:4;left:0;top:29%;width:222px;padding:20px 20px 17px;background:#fffffff2;border:1px solid #e8e8e8;border-radius:9px;box-shadow:0 10px 38px #39393915;backdrop-filter:blur(14px)}.roof-component-info h2{font:600 .97rem/1.4 var(--body,Arial,sans-serif);letter-spacing:-.035em;display:flex;gap:7px;align-items:baseline}.roof-info-slash{font-weight:300;color:#9c9c9c}.roof-component-info>p[data-roof-body]{font-size:.75rem;line-height:1.5;color:#7a7a7a;margin:7px 0 13px}.roof-material-tabs{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:30px;background:#f1f1f1;gap:3px}.roof-material-tabs button{border:0;border-radius:30px;background:transparent;color:#6c6c6c;font-size:.63rem;padding:6px 8px;line-height:1.4}.roof-material-tabs button[aria-selected=true]{background:#393939;color:#ffffff;box-shadow:0 2px 6px #3636361f}.roof-material-panel{margin-top:12px}.roof-material-swatch{height:52px;border:1px solid #c7ccc3;background:repeating-linear-gradient(120deg,transparent 0 17px,#ffffff75 18px 19px,transparent 20px 47px),repeating-linear-gradient(30deg,#afb8ad 0 2px,#c7cec2 3px 4px);border-radius:3px;box-shadow:inset 0 0 20px #dce0d540}.roof-material-panel[data-material=felt] .roof-material-swatch{background:repeating-radial-gradient(ellipse at 30% 30%,#454a42 0 1px,#6b6e63 2px 3px,#4e5249 4px 5px);border-color:#62675d}.roof-material-panel>p{font-size:.65rem;line-height:1.5;color:#828282;margin-top:9px}.roof-component-info .roof-info-detail{font-size:.61rem;line-height:1.45;color:#959595;margin-top:12px;padding-top:10px;border-top:1px solid #efefef}
.roof-hotspots{position:absolute;inset:0;pointer-events:none;z-index:3;transition:opacity .18s}.roof-pin{position:absolute;display:grid;place-items:center;width:31px;height:31px;padding:0;border:1px solid #d8d8d8;background:#fffffff2;color:#383838;border-radius:50%;font-size:.66rem;font-weight:600;box-shadow:0 3px 11px #1f1f1f1b;pointer-events:auto;transition:background .18s,color .18s,box-shadow .18s}.roof-pin:after{content:'';position:absolute;height:24px;width:1px;top:100%;left:50%;background:#89898990;transform:rotate(23deg);transform-origin:top}.roof-pin[aria-pressed=true]{background:#3a3a3a;color:#ffffff;border-color:#3a3a3a;box-shadow:0 0 0 5px #c8c8c875}.roof-pin-drip-edge{left:42%;top:61%}.roof-pin-starter{left:37%;top:52%}.roof-pin-underlayment{left:32%;top:42%}.roof-pin-fastening{left:29%;top:31%}.roof-pin-ventilation{left:72%;top:24%}.roof-pin-ridge-cap{left:50%;top:10%}.roof-pin-ventilation:after{height:31px;transform:rotate(30deg)}.roof-pin-ridge-cap:after{height:23px;transform:rotate(40deg)}.roof-system.is-zoomed .roof-hotspots{visibility:hidden;opacity:0}
.roof-view-controls{position:absolute;left:4%;right:5%;bottom:34px;z-index:5;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.roof-view-toggle,.roof-zoom-controls{display:flex;align-items:center;padding:4px;background:#f5f5f5ee;border:1px solid #e2e2e2;border-radius:30px;box-shadow:0 4px 20px #3131310a;backdrop-filter:blur(12px)}.roof-view-toggle button{border:0;background:transparent;border-radius:30px;padding:10px 19px;font-size:.66rem;color:#666666;white-space:nowrap;line-height:1.4}.roof-view-toggle button[aria-pressed=true]{background:#424242;color:#ffffff}.roof-zoom-controls button{display:grid;place-items:center;width:32px;height:32px;padding:0;background:transparent;border:0;border-radius:50%;font-size:1.15rem;color:#3f3f3f;line-height:1}.roof-zoom-controls button:disabled{opacity:.35;cursor:default}.roof-zoom-controls button:not(:disabled):hover{background:#e5e5e5}.roof-zoom-controls output{width:47px;text-align:center;font-size:.7rem;color:#484848}.roof-zoom-controls .roof-fit{width:auto;padding:0 11px;border-left:1px solid #dbdbdb;border-radius:0;font-size:.62rem;margin-left:4px}.roof-reset{border:0;background:transparent;color:#878787;font-size:.65rem;text-decoration:underline;text-underline-offset:3px;padding:9px 4px}.roof-view-caption{position:absolute;bottom:11px;left:0;right:5%;text-align:right;font-size:.58rem;color:#979797;line-height:1.4}.roof-image-error{position:absolute;left:10%;right:10%;top:15%;padding:20px;background:#f1f1f1;color:#656565;z-index:6;font-size:.8rem;border:1px solid #d5d5d5}
.roof-component-rail{border-top:1px solid var(--roof-line);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-width:1800px;margin:auto;padding:22px 2.4% 24px;background:#ffffff;position:relative;z-index:6}.roof-component-tab{position:relative;min-width:0;text-align:left;padding:9px 20px 0;border:0;border-right:1px solid #eeeeee;background:transparent;color:#3f3f3f;transition:background .2s;cursor:pointer;border-radius:0}.roof-component-tab:last-child{border-right:0}.roof-component-tab:before{content:'';position:absolute;left:20px;right:20px;top:-23px;height:2px;background:#646464;transform:scaleX(0);transition:transform .22s}.roof-component-tab[aria-selected=true]:before{transform:scaleX(1)}.roof-component-tab:hover,.roof-component-tab[aria-selected=true]{background:#f7f7f7}.roof-tab-heading{display:flex;align-items:baseline;gap:12px;line-height:1.4;min-height:20px}.roof-tab-heading>span{font-size:.7rem;font-weight:500;color:#7b7b7b;font-variant-numeric:tabular-nums}.roof-tab-heading strong{font-size:.78rem;font-weight:600;letter-spacing:-.025em}.roof-tab-summary{display:block;font-size:.61rem;line-height:1.45;color:#959595;margin:7px 0 7px 27px;min-height:28px}.roof-tab-art{display:block;background:linear-gradient(#f9f9f9,#f3f3f3);margin:0 -7px}.roof-tab-art svg{display:block;width:100%;height:auto;max-height:124px}.roof-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.roof-system-main{min-height:800px}.roof-system-stage{min-height:800px}.roof-system-copy{padding-top:122px}.roof-component-info{width:246px;top:29%;padding:23px}.roof-component-info h2{font-size:1.08rem}.roof-component-info>p[data-roof-body]{font-size:.81rem}.roof-material-panel>p{font-size:.71rem}.roof-view-controls{bottom:40px}.roof-view-caption{bottom:16px}.roof-tab-art svg{max-height:146px}}
@media(max-width:1150px){.roof-system-main{grid-template-columns:38% minmax(0,1fr);min-height:650px}.roof-system-stage{min-height:650px}.roof-system-copy{padding:81px 0 65px 13%}.roof-system h1{font-size:3.5rem;margin-right:0}.roof-system-intro{font-size:.97rem;max-width:310px}.roof-system-actions{gap:9px}.roof-primary,.roof-secondary{font-size:.68rem;padding:11px 16px;min-height:44px}.roof-component-info{left:0;top:37%;width:197px;padding:16px}.roof-component-info h2{font-size:.88rem}.roof-component-info>p[data-roof-body]{font-size:.68rem}.roof-material-panel>p{font-size:.6rem}.roof-material-swatch{height:38px}.roof-info-detail{display:none}.roof-artwork-perspective{inset:0 10% 73px 3%}.roof-pin{width:26px;height:26px;font-size:.59rem}.roof-pin-fastening{left:28%;top:30%}.roof-pin-underlayment{left:41%;top:41%}.roof-pin-starter{left:45%;top:51%}.roof-pin-drip-edge{left:53%;top:61%}.roof-view-controls{left:-12%;right:3%;gap:7px;bottom:40px}.roof-view-toggle button{font-size:.6rem;padding:9px 13px}.roof-reset{font-size:.59rem}.roof-view-caption{font-size:.52rem;right:4%;bottom:12px}.roof-component-rail{padding:18px 1.4% 20px}.roof-component-tab{padding:8px 11px 0}.roof-component-tab:before{left:11px;right:11px;top:-19px}.roof-tab-heading{gap:7px}.roof-tab-heading strong{font-size:.71rem}.roof-tab-heading>span{font-size:.62rem}.roof-tab-summary{margin-left:21px;font-size:.56rem;min-height:32px}}
@media(max-width:850px){.roof-system-main{display:block;min-height:0}.roof-system-copy{padding:50px 7% 20px;max-width:730px}.roof-system-eyebrow{font-size:.6rem;letter-spacing:.23em}.roof-system h1{font-size:clamp(3.2rem,7.8vw,4.8rem);margin:20px 0 20px;max-width:700px}.roof-system-intro{font-size:1rem;max-width:520px}.roof-system-actions{margin-top:24px;gap:10px}.roof-primary,.roof-secondary{font-size:.75rem;min-height:47px;padding:11px 23px}.roof-system .roof-system-location{font-size:.68rem;margin-top:20px}.roof-system-work{position:absolute;right:7%;bottom:20px;font-size:.68rem;margin-top:0}.roof-system-stage{min-height:620px;margin:0 auto;max-width:780px}.roof-artwork-perspective{inset:0 0 89px}.roof-artwork-zoom{inset:8% 12%}.roof-hotspots{display:none}.roof-component-info{left:5%;top:auto;bottom:105px;width:208px;padding:17px;background:#fffffff5}.roof-component-info>p[data-roof-body]{font-size:.69rem}.roof-component-info h2{font-size:.9rem}.roof-material-swatch{height:35px}.roof-material-panel>p{font-size:.61rem}.roof-material-tabs button{font-size:.6rem}.roof-view-controls{left:4%;right:4%;bottom:42px;gap:10px}.roof-view-toggle button{font-size:.65rem;padding:10px 16px}.roof-view-caption{left:5%;right:5%;bottom:15px;text-align:center;font-size:.56rem}.roof-component-rail{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:17px 5% 20px;gap:0;scrollbar-width:thin}.roof-component-tab{flex:0 0 176px;scroll-snap-align:center;padding:8px 14px 0}.roof-component-tab:before{left:14px;right:14px;top:-18px}.roof-tab-heading strong{font-size:.76rem}.roof-tab-summary{font-size:.6rem;min-height:29px}.roof-tab-art svg{max-height:107px}.roof-system[data-view=photo] .roof-artwork-zoom{inset:8% 12% 6%}}
@media(max-width:520px){.roof-system-copy{padding:37px 7% 17px}.roof-system h1{font-size:clamp(2.8rem,10.2vw,3.7rem);letter-spacing:-.065em;margin:18px 0}.roof-system-eyebrow{font-size:.51rem;letter-spacing:.23em}.roof-system-intro{font-size:.88rem;line-height:1.6}.roof-system-actions{margin-top:22px;gap:8px}.roof-primary,.roof-secondary{padding:12px 17px;font-size:.66rem;min-height:44px;gap:12px}.roof-system .roof-system-location{font-size:.6rem;margin-top:17px}.roof-system-work{position:static;margin-top:13px;font-size:.63rem}.roof-system-stage{min-height:595px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 7% 123px}.roof-artwork-perspective{inset:0 0 auto;height:345px}.roof-artwork-zoom{inset:3% 12%;transform-origin:52% 45%}.roof-component-info{position:relative;left:auto;bottom:auto;top:auto;width:100%;margin:313px 0 0;padding:15px 17px;min-height:134px;border-radius:8px;box-shadow:0 7px 22px #4545450a;backdrop-filter:none}.roof-component-info h2{font-size:.91rem}.roof-component-info>p[data-roof-body]{font-size:.72rem;margin:7px 0 12px;line-height:1.5}.roof-material-tabs{width:160px}.roof-material-panel{display:grid;grid-template-columns:67px minmax(0,1fr);gap:11px;align-items:start;margin-top:11px}.roof-material-panel>p{margin-top:0;font-size:.62rem;line-height:1.5}.roof-material-swatch{height:50px}.roof-view-controls{left:5%;right:5%;bottom:37px;gap:8px;flex-wrap:wrap}.roof-view-toggle{flex:0 0 auto}.roof-view-toggle button{font-size:.59rem;padding:9px 13px}.roof-zoom-controls{padding:3px}.roof-zoom-controls button{height:28px;width:27px;font-size:1.1rem}.roof-zoom-controls output{width:42px;font-size:.65rem}.roof-zoom-controls .roof-fit{padding:0 8px;font-size:.58rem}.roof-reset{font-size:.57rem;padding:8px 3px}.roof-view-caption{font-size:.5rem;bottom:12px;left:7%;right:7%}.roof-system[data-view=finished] .roof-system-stage,.roof-system[data-view=photo] .roof-system-stage{min-height:438px}.roof-system[data-view=photo] .roof-artwork-zoom{inset:8% 12%}.roof-system[data-view=photo] .roof-view-controls{bottom:39px}.roof-component-tab{flex-basis:160px;padding-inline:12px}.roof-tab-heading strong{font-size:.72rem}.roof-tab-heading>span{font-size:.6rem}.roof-tab-summary{font-size:.57rem}.roof-tab-art svg{max-height:97px}.roof-image-error{font-size:.72rem;top:30px}}
@media(prefers-reduced-motion:reduce){.roof-artwork{transform:none!important;will-change:auto}.roof-artwork-zoom,.roof-pin,.roof-hotspots,.roof-component-tab,.roof-component-tab:before{transition:none!important}}
html:not(.motion-on) .roof-artwork{transform:none!important;will-change:auto}html:not(.motion-on) .roof-artwork-zoom{transition:none}

/* The one selected marker identifies an illustrative detail without crowding the roof. */
.roof-system .roof-pin{transform:translate(-50%,-100%)}.roof-system .roof-pin:after{height:20px;transform:none}

/* Reserve horizontal space for 120% zoom plus pointer tilt. Vertical inset keeps the illustration inside the hero at its top limit. */