@import url('../stage7/interactive.css');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700;800&display=swap');
.br-header{--br-red:#D7282F;--br-ink:#171A1F;font-family:Barlow,sans-serif;position:relative;z-index:100;background:#fff;color:var(--br-ink)}
.br-header *{box-sizing:border-box}.br-header a{text-decoration:none;color:inherit}.br-top{background:#171A1F;color:#d8dadd;font-size:12px;line-height:1.4;padding:8px max(24px,calc((100% - 1340px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px}.br-top a{font-weight:700;color:#fff;white-space:nowrap}.br-nav-wrap{max-width:1390px;margin:auto;min-height:98px;display:flex;align-items:center;gap:30px;padding:14px 24px}.br-logo{flex:none}.br-logo img{width:112px;height:auto;display:block}.br-nav{display:flex;align-items:center;gap:24px;margin-left:auto}.br-toplink{font-size:15px;font-weight:600;white-space:nowrap}.br-toplink:hover,.br-toplink:focus-visible{color:var(--br-red)}.br-nav-group{display:flex;align-items:center;gap:4px;position:relative}.br-expand{border:0;background:none;color:inherit;cursor:pointer;min-width:32px;min-height:44px;padding:8px;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:15px;white-space:nowrap}.br-expand svg{width:10px;height:10px;transition:transform .2s}.br-expand[aria-expanded=true] svg{transform:rotate(180deg)}.br-panel{position:absolute;top:calc(100% + 18px);left:-20px;background:#fff;padding:22px;border:1px solid #e6e1d6;border-top:3px solid var(--br-red);box-shadow:0 18px 45px #171a1f24;border-radius:0 0 8px 8px;min-width:220px;z-index:110}.br-panel[hidden]{display:none!important}.br-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px}.br-panel-grid{display:flex;flex-direction:column;gap:2px}.br-panel.areas{left:auto;right:0}.br-panel a{display:block;padding:10px 12px;font-size:14px;font-weight:600;border-radius:4px;line-height:1.4}.br-panel a:hover,.br-panel a:focus-visible{background:#fff0f0;color:#b01b24}.br-panel a[aria-current=page]{background:#fff0f0;color:#b01b24}.br-estimate{background:#D7282F;color:#fff!important;padding:14px 20px;border-radius:4px;font-weight:700;white-space:nowrap;line-height:1.3}.br-estimate:hover{background:#ac1c25}.br-menu-toggle{display:none;background:#fff;border:1px solid #ddd;color:#171a1f;padding:12px;border-radius:4px;font:600 14px Barlow,sans-serif;gap:8px;align-items:center;cursor:pointer}.br-header a:focus-visible,.br-header button:focus-visible{outline:3px solid #D7282F;outline-offset:4px}.br-skip{position:fixed;left:16px;top:-100px;padding:14px;background:#fff;color:#171a1f;z-index:9999}.br-skip:focus{top:12px}.br-header .br-panel-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#737780;margin:0 12px 12px}

/* Services and Service Areas scroll. Overflow on the panel itself clips the
   hover bridge, so the pointer drops into the 18px gap and the menu closes.
   The panel box includes that gap; the list inside keeps the scrollbar. */
.br-panel.services,
.br-panel.areas{
  top:calc(100% - 8px);
  width:min(320px,calc(100vw - 48px));
  max-height:none;
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:26px 0 0;
  border-radius:0
}
.br-panel.services::before,
.br-panel.areas::before{content:none}
.br-panel.services .br-panel-grid,
.br-panel.areas .br-panel-grid{
  max-height:min(70vh,28rem);
  overflow-x:hidden;
  overflow-y:scroll;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#8b8680 #f3eee6;
  background:#fff;
  padding:22px;
  border:1px solid #e6e1d6;
  border-top:3px solid var(--br-red);
  box-shadow:0 18px 45px #171a1f24;
  border-radius:0 0 8px 8px
}
.br-panel.services .br-panel-grid::-webkit-scrollbar,
.br-panel.areas .br-panel-grid::-webkit-scrollbar{width:10px}
.br-panel.services .br-panel-grid::-webkit-scrollbar-track,
.br-panel.areas .br-panel-grid::-webkit-scrollbar-track{background:#f3eee6}
.br-panel.services .br-panel-grid::-webkit-scrollbar-thumb,
.br-panel.areas .br-panel-grid::-webkit-scrollbar-thumb{background:#8b8680;border-radius:8px;border:2px solid #f3eee6}
@media(max-width:1150px){.br-nav{gap:13px}.br-nav-wrap{gap:16px}.br-logo img{width:96px}.br-toplink,.br-expand{font-size:14px}}
@media(max-width:980px){.br-top{font-size:11px;padding:8px 18px}.br-nav-wrap{min-height:82px;flex-wrap:wrap;padding:12px 18px;gap:12px}.br-logo img{width:91px}.br-menu-toggle{display:flex;margin-left:auto}.br-nav-wrap>.br-estimate{order:2;padding:12px 16px;font-size:14px}.br-menu-toggle{order:1}.br-nav{order:3;flex-basis:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:12px 0 18px;border-top:1px solid #eee}.br-header.nav-ready .br-nav:not(.is-open){display:none}.br-nav>.br-toplink{padding:14px 6px}.br-nav-group{flex-wrap:wrap;border-bottom:1px solid #eee;justify-content:space-between}.br-nav-group>.br-toplink{padding:14px 6px}.br-expand.full{justify-content:space-between;flex:1;padding:14px 6px}.br-panel,.br-panel.areas,.br-panel.services{position:static;width:100%;min-width:0;max-height:none;overflow:visible;box-shadow:none;border:0;border-left:2px solid #D7282F;border-radius:0;padding:0 6px 12px 12px;margin:0 0 14px;left:auto;right:auto}.br-panel::before{content:none}.br-panel-grid{gap:0}.br-panel.services .br-panel-grid,.br-panel.areas .br-panel-grid{max-height:none;overflow:visible;background:transparent;padding:0;border:0;box-shadow:none;border-radius:0}.br-panel a{font-size:14px;padding:10px 6px}.br-panel-label{display:none}.br-top span{max-width:225px}.br-nav-wrap>.br-estimate{margin-left:0}}
@media(max-width:460px){.br-top{font-size:10px;gap:10px}.br-top span{max-width:185px}.br-panel-grid{grid-template-columns:1fr}.br-menu-toggle{padding:10px}.br-nav-wrap>.br-estimate{padding:12px;font-size:13px}.br-nav-wrap{gap:8px}}
@media(prefers-reduced-motion:reduce){.br-expand svg{transition:none}}

/* Keep every destination reachable if enhancement is unavailable. */
.br-header:not(.nav-ready) .br-panel[hidden]{display:block!important;position:static;width:auto;min-width:0;box-shadow:none;border:0;padding:8px}
.br-header:not(.nav-ready) .br-nav,.br-header:not(.nav-ready) .br-nav-group{display:block}
.br-header:not(.nav-ready) .br-expand,.br-header:not(.nav-ready) .br-menu-toggle{display:none}

/* support.js marks html.js before first paint. Skip the expanded no-script
   menu so the header does not open tall and then collapse. */
html.js .br-header:not(.nav-ready) .br-panel[hidden]{display:none!important}
html.js .br-header:not(.nav-ready) .br-nav{display:flex;align-items:center}
html.js .br-header:not(.nav-ready) .br-nav-group{display:flex;align-items:center}
html.js .br-header:not(.nav-ready) .br-expand{display:flex}
@media(max-width:980px){
  html.js .br-header:not(.nav-ready) .br-nav{display:none}
  html.js .br-header:not(.nav-ready) .br-menu-toggle{display:flex;margin-left:auto}
}

/* The design-export renderer does not preserve empty boolean attributes. */
.br-header.nav-ready .br-expand[aria-expanded="false"] + .br-panel{display:none!important}

/* Keep the page inside the device width. overflow-x on html/body is a last-line
   clip; the rules below fix the actual wide children on Design Canvas pages. */
html,body{max-width:100%}
html:has(#dc-root),html:has(#dc-root) body{overflow-x:hidden;overflow-x:clip}
#dc-root,.sc-host{max-width:100%;min-width:0}
#dc-root *,#dc-root *::before,#dc-root *::after{box-sizing:border-box}
#dc-root img,#dc-root svg,#dc-root video,#dc-root iframe{max-width:100%;height:auto}
#dc-root iframe{width:100%}
#dc-root input,#dc-root select,#dc-root textarea{max-width:100%;min-width:0;width:100%;box-sizing:border-box}
#dc-root :is(div,section,footer,form,label){min-width:0}

/* Proof marquee is width:max-content (~3.4k). Parent must be a definite box
   or the track expands the document even with overflow:hidden. */
#dc-root section:has(> [style*="max-content"]){width:100%;max-width:100%;overflow:hidden}
#dc-root [style*="max-content"]{max-width:none}

@media(max-width:900px){
  #dc-root section [style*="grid-template-columns"]{grid-template-columns:1fr 1fr!important}
  #dc-root footer [style*="grid-template-columns"]{grid-template-columns:1fr 1fr!important;gap:28px!important}
  #dc-root h1{font-size:clamp(36px,10vw,62px)!important}
}
@media(max-width:640px){
  #dc-root section [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #dc-root footer [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #dc-root section,#dc-root footer{padding-left:20px!important;padding-right:20px!important}
}

@media(prefers-reduced-motion:reduce){
  #dc-root [style*="brehm-marquee"],#dc-root [style*="max-content"]{animation:none!important}
}

/* Final QA: 24px minimum tap target for the top-bar phone link. */
.br-top a{display:inline-block;padding:6px 0;margin:-6px 0}
.br-nav>.br-toplink,.br-nav-group>.br-toplink{padding:6px 0}