.roof-phone-detail-header[hidden]{display:none}
.roof-weather-launch{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:transparent;color:#303843;border:0;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.roof-components-heading{display:none}
.roof-mobile-tools .roof-weather-launch{order:2}
@media(max-width:760px){
 html[data-roof-embed="home"] body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase .story-panel,
 body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase .story-panel{order:-1;padding:18px 0 14px;width:100%;min-width:0}
 body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase .story-panel .eyebrow{font-size:11px;letter-spacing:.09em;margin:0 0 6px;color:#505762}
 body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase #caption-title{font-size:34px;line-height:1.05;letter-spacing:-.045em;margin:0 0 10px;max-width:100%;text-wrap:balance}
 body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase #caption-description{font-size:16px;line-height:1.45;max-width:100%;color:#444b55}
 body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase .story-actions{margin:12px 0 0}
 body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase .story-primary-actions .button-primary{min-height:44px;padding:11px 18px;font-size:15px}
 body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase :is(#explore-roof-button,.hero-call,.hero-location,.art-bottomline,.roof-layer-choice){display:none}
 html[data-roof-embed="home"] body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase .art-region,
 body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase .art-region{height:clamp(255px,76vw,430px);order:0;margin-top:0}
 body:not(.storm-cinema) #roof-showcase .roof-mobile-tools{gap:0;padding:12px 0 4px;order:1}
 body:not(.storm-cinema) #roof-showcase .roof-mobile-tools #storm-button{min-height:58px;border-radius:10px;padding:10px 14px}
 body:not(.storm-cinema) #roof-showcase .roof-mobile-tools #storm-button strong{font-size:17px}
 body:not(.storm-cinema) #roof-showcase .roof-mobile-tools #storm-button small{font-size:13px}
 body:not(.storm-cinema):not(.roof-detail-mobile) #roof-showcase .component-navigation{display:block;padding:6px 0 14px;margin:0;border-top:1px solid #e4e5e8}
 .roof-components-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0 9px;color:#434b56;font-size:14px;line-height:1.4}
 .roof-components-heading span:last-child{font-size:13px;white-space:nowrap}
 body:not(.storm-cinema):not(.roof-detail-mobile) #component-rail{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;gap:10px;padding:2px 0 8px;counter-reset:none}
 body:not(.storm-cinema):not(.roof-detail-mobile) #component-rail .component-card{flex:0 0 116px;display:flex;flex-direction:column;gap:8px;padding:0;border:0;scroll-snap-align:start;min-width:0;background:#fff;border-radius:6px;overflow:visible}
 body:not(.storm-cinema):not(.roof-detail-mobile) #component-rail .thumbnail-frame{order:0;width:116px;height:76px;margin:0;border-radius:6px;overflow:hidden;background:#f2f3f5}
 body:not(.storm-cinema):not(.roof-detail-mobile) #component-rail .thumbnail{width:100%;height:100%;object-fit:cover}
 body:not(.storm-cinema):not(.roof-detail-mobile) #component-rail .component-name{order:1;font-size:14px;line-height:1.3;text-align:left;white-space:normal;color:#262b32;padding:0 2px 5px}
 #component-rail .component-name:before{display:none}
 body.roof-detail-mobile #roof-showcase{position:fixed;inset:0;z-index:120;overflow:auto;overscroll-behavior:contain;height:100dvh;height:var(--roof-visible-height,100dvh);margin:0;padding:0 0 max(20px,env(safe-area-inset-bottom));background:#fff;scrollbar-gutter:stable}
 body.roof-detail-mobile .roof-phone-detail-header{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#fff;border-bottom:1px solid #e4e5e8}
 .roof-phone-detail-header img{width:142px;height:auto;max-width:48%;object-fit:contain}
 body.roof-detail-mobile #roof-showcase #back-button:not([hidden]){position:static;inset:auto;visibility:visible;display:flex;min-width:100px;min-height:44px;gap:8px;justify-content:center;font-size:15px;background:#f2f3f5;border-radius:24px;color:#242931}
 body.roof-detail-mobile #roof-showcase .photo-stage{display:flex;flex-direction:column;padding:0;margin:0;width:100%;height:auto;min-height:0}
 body.roof-detail-mobile #roof-showcase .art-region{order:0;position:relative;inset:auto;width:100%;height:clamp(220px,39dvh,380px);min-height:0;margin:0;background:#f4f5f6}
 body.roof-detail-mobile #roof-showcase .art-region.has-detail-panel .photographic-host{inset:0;height:100%}
 body.roof-detail-mobile #roof-showcase .art-topline{display:none}
 body.roof-detail-mobile #roof-showcase .art-bottomline{display:none}
 body.roof-detail-mobile #roof-showcase .story-panel{order:1;width:100%;padding:18px 20px 0;display:flex;gap:0}
 body.roof-detail-mobile #roof-showcase .story-copy{display:block;padding:0;max-height:none;overflow:visible}
 body.roof-detail-mobile #roof-showcase :is(.hero-peaked-mark,.story-actions,.roof-mobile-tools,.component-navigation){display:none!important}
 body.roof-detail-mobile #roof-showcase .story-panel .eyebrow{font-size:12px;line-height:1.4;margin:0 0 6px;letter-spacing:.08em;color:#555d68}
 body.roof-detail-mobile #roof-showcase #caption-title{font-size:27px;line-height:1.12;letter-spacing:-.035em;max-width:none;margin:0 0 10px}
 body.roof-detail-mobile #roof-showcase #caption-description{font-size:16px;line-height:1.5;max-width:none;color:#444b55}
 body.roof-detail-mobile #roof-showcase .story-copy:has(.roof-closed-captions:not([hidden])) #caption-description{display:none}
 body.roof-detail-mobile #roof-showcase .roof-closed-captions{background:transparent;border:0;padding:0;margin:0;color:#303742;font-size:16px;line-height:1.5}
 body.roof-detail-mobile #roof-showcase .roof-caption-label{display:none}
 body.roof-detail-mobile #roof-showcase .playback-panel{order:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:none;margin:14px 0 0;padding:0;border:0}
 body.roof-detail-mobile #roof-showcase .play-button{font-size:15px;min-height:44px;padding:8px 16px;background:#20262e;color:#fff;border-radius:24px;min-width:100px;justify-content:center}
 body.roof-detail-mobile #roof-showcase .narration-controls{display:flex;gap:14px;flex:1;padding:0;justify-content:flex-end}
 body.roof-detail-mobile #roof-showcase .narration-controls button{font-size:14px;min-height:44px;padding:8px 6px;color:#303742;background:#fff;border:1px solid #ccd0d6;border-radius:6px}
 body.roof-detail-mobile #roof-showcase .narration-controls button[aria-pressed=true]{background:#edf1f6;color:#26364b;border-color:#929eaf}
 body.roof-detail-mobile #roof-showcase #narration-status{display:none}
 body.roof-detail-mobile #roof-showcase .seek-control{flex:1 0 100%;margin:0}
 body.roof-detail-mobile #roof-showcase .seek-control input{min-height:36px;height:36px}
 body.roof-detail-mobile #roof-showcase .playback-meta{display:flex;width:100%;justify-content:space-between}
 body.roof-detail-mobile #roof-showcase .playback-meta :is(output,select){font-size:14px;color:#535b66}
 body.roof-detail-mobile #roof-showcase .detail-lead-actions{order:2;margin:16px 0 0;padding-top:16px;border-top:1px solid #e4e5e8;gap:10px}
 body.roof-detail-mobile #roof-showcase .detail-inspection-link{font-size:16px;min-height:46px;text-align:center;justify-content:center}
 body.roof-detail-mobile #roof-showcase .detail-call{display:none}
 body.roof-detail-mobile #roof-showcase .installation-notes{margin-top:12px;max-width:none}
 body.roof-detail-mobile #roof-showcase .installation-notes summary{font-size:15px;min-height:44px;padding-top:10px}
 body.roof-detail-mobile #roof-showcase .installation-notes :is(p,a){font-size:15px;color:#434b56}
 body.roof-detail-mobile #roof-showcase .vent-control{max-width:none;margin-top:12px}
 body.roof-detail-mobile #roof-showcase .vent-control :is(label,select){font-size:16px;min-height:44px}
 body.roof-detail-mobile :focus-visible{outline:3px solid #006bd6;outline-offset:3px}
 html[data-accessibility-text] body.roof-detail-mobile #roof-showcase :is(h1,p,button,a,summary){overflow-wrap:anywhere}
 html[data-accessibility-text] body.roof-detail-mobile .roof-phone-detail-header{flex-wrap:wrap}
}