/* RedBilt site layer. Loaded AFTER modernist.css. Most layout lives in inline styles in
   index.html (copied verbatim from the source design); this file holds only what inline
   styles can't express: resets, hover/active/focus states, breakpoints, and JS-toggled states. */

html,body{margin:0;padding:0;background:#101010;-webkit-text-size-adjust:100%}
body{font-family:"Archivo",system-ui,sans-serif;color:#F5F5F2;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
*{box-sizing:border-box}
[hidden]{display:none!important}

/* ---------- header (JS toggles .is-solid / .is-menu on <header>) ---------- */
.site-header{background:transparent;color:#F5F5F2;border-bottom:2px solid transparent}
.site-header.is-solid{background:rgba(16,16,16,.94);border-bottom-color:#303030}
.site-header.is-menu{background:#101010;border-bottom-color:transparent}
.site-nav{height:96px}
.site-header.is-solid .site-nav,.site-header.is-menu .site-nav{height:76px}
.site-logo{height:64px}
.site-header.is-solid .site-logo,.site-header.is-menu .site-logo{height:52px}
@media (max-width:899.98px){
  .site-logo{height:42px}
  .site-header.is-solid .site-logo,.site-header.is-menu .site-logo{height:38px}
}
/* nav variant switch at 1180px */
.nav-wide{display:flex}
.nav-narrow{display:none}
@media (max-width:1179.98px){.nav-wide{display:none}.nav-narrow{display:flex}}

/* ---------- mobile breakpoint (900px) ---------- */
.hero-inner{padding-bottom:clamp(28px,5vh,56px)}
.hero-img{object-position:50% 58%}
.ba-frame{aspect-ratio:21/10}
.foot-bottom{padding-bottom:28px}
.svc-panel{display:block}
@media (max-width:899.98px){
  .hero-inner{padding-bottom:96px}
  .hero-img{object-position:50% 42%}
  .ba-frame{aspect-ratio:4/3}
  .foot-bottom{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .svc-panel{display:none}
}
/* featured 04: once row B stacks (760px and below) drop the 78% right-offset and run full width */
@media (max-width:760.98px){
  .fp-stair{max-width:100%!important}
}
/* featured 02: once row A stacks (below ~960px) show the full 3:4 photo, as in the screenshots */
@media (max-width:959.98px){
  .fp-tall{flex:none!important;aspect-ratio:3/4!important}
}

/* ---------- hover / active / focus states ---------- */
.skip:focus{left:12px!important;top:12px!important}
.hv-op1:hover{opacity:1!important}
.hv-white:hover{background:#ffffff!important}
.hv-g20:hover{gap:20px!important}
.hv-g32:hover{gap:32px!important}
.hv-g38:hover{gap:38px!important}
.hv-g52:hover{gap:52px!important}
.hv-heroghost:hover{border-color:#F5F5F2!important;background:rgba(16,16,16,.42)!important}
.hv-outline:hover{border-color:#F5F5F2!important;background:rgba(245,245,242,.05)!important}
.hv-invert:hover{background:var(--color-text)!important;color:var(--color-bg)!important}
.hv-lb:hover{background:var(--color-bg)!important;color:var(--color-text)!important}
.hv-submit:hover{padding-right:14px!important;background:#ffffff!important}
.hv-a400:hover{color:var(--color-accent-400)!important}
.hv-a700:hover{color:var(--color-accent-700)!important}
.hv-text:hover{color:var(--color-text)!important}
.hv-reset:hover{color:var(--color-accent-700)!important;border-color:var(--color-accent)!important}
.press:active{transform:translateY(1px)}
/* photo hover: brightness lift (+ zoom variants) */
.hv-img:hover{filter:brightness(1.04)!important}
.hv-z103:hover{transform:scale(1.03)!important}
.hv-z1035:hover{transform:scale(1.035)!important}
.hv-z104:hover{transform:scale(1.04)!important}
.gbtn:focus-visible{outline:2px solid var(--color-accent)!important;outline-offset:2px}

/* ---------- estimate builder (contact page) ---------- */
.eb-choice[aria-pressed="true"]{border-color:#8c8c8a!important}
@media (hover:hover){
  .eb-choice:hover{border-color:#6e6e6c!important;background:#151515!important}
  .eb-choice:hover [data-eb-arrow]{background:#F5F5F2!important;color:#101010!important;border-color:#F5F5F2!important}
}
.eb-choice:active [data-eb-arrow]{background:#F5F5F2!important;color:#101010!important;border-color:#F5F5F2!important}
.eb-seg[aria-checked="true"]{background:#F5F5F2!important;color:#101010!important;border-color:#F5F5F2!important;position:relative}
@media (hover:hover){
  .eb-seg[aria-checked="false"]:hover{border-color:#F5F5F2!important;position:relative}
  .eb-pstep:not(:disabled):not([aria-current]):hover{color:var(--color-text)!important}
}
[data-eb-focus]:focus{outline:none}
#eb-preview:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.filter-bar::-webkit-scrollbar{display:none}