:root{--bg:#f7faf8;--card:#fff;--text:#0b1210;--muted:rgba(11,18,16,.72);--line:rgba(11,18,16,.10);--shadow:0 18px 46px rgba(11,18,16,.10);--radius:22px;--green:#70b020;--orange:#d07010;}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:1120px;margin:0 auto;padding:0 16px}.muted{color:var(--muted)}a{color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.9);text-decoration:none;font-weight:800;cursor:pointer}
.btn.primary{border-color:rgba(0,200,83,.45);background:linear-gradient(180deg,rgba(0,200,83,.16),rgba(0,169,74,.10))}
.header{position:sticky;top:0;z-index:80;backdrop-filter:blur(10px);background:rgba(247,250,248,.82);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo{
  text-indent:-9999px;
  overflow:hidden;

  width:44px;height:44px;border-radius:16px;display:block;flex:0 0 auto;
  background-image:url("../img/beaverbuild-icon.png");
  background-size:90%;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#ffffff;
  border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(11,18,16,.12);
}
.brand-text .t{font-weight:950;display:block;line-height:1.05}.brand-text .s{font-size:.92rem;color:var(--muted);display:block;margin-top:2px}
.menu{display:none;gap:8px;align-items:center}.menu a{text-decoration:none;font-weight:850;padding:10px 12px;border-radius:14px;color:rgba(11,18,16,.78)}
.dd{position:relative}.dd-btn{display:inline-flex;align-items:center;gap:8px}.dd-btn:after{content:"▾";opacity:.65;font-size:.9em}
.dd-menu{display:none;position:absolute;top:100%;left:0;min-width:220px;padding:8px;margin-top:8px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.96);box-shadow:var(--shadow)}
.dd-menu a{display:block;padding:10px 10px;border-radius:14px}.dd-menu a:hover{background:rgba(11,18,16,.06)}
@media (min-width:981px){.menu{display:flex}.dd:hover .dd-menu,.dd-menu:hover{display:block}}
.actions{display:flex;align-items:center;gap:10px}
.iconbar{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.85)}
.icon{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(11,18,16,.10);box-shadow:0 10px 24px rgba(11,18,16,.08)}
.mobile-btn{display:inline-flex}@media (min-width:981px){.mobile-btn{display:none}}
.mobile-drawer{display:none;position:fixed;inset:0;z-index:999;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(8px);padding:84px 16px 20px;overflow:auto;-webkit-overflow-scrolling:touch}
.mobile-drawer.open{display:block}
.mobile-drawer a{display:block;padding:12px 12px;border-radius:16px;text-decoration:none;font-weight:900;color:rgba(11,18,16,.86)}
.mobile-drawer .sub{margin-left:10px;border-left:2px solid rgba(0,200,83,.25);padding-left:10px}
.hero{padding:18px 0 8px}.hero-card{border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.94);box-shadow:var(--shadow);padding:16px}
.h1{font-size:1.55rem;margin:0 0 8px;letter-spacing:-.02em}@media (min-width:981px){.h1{font-size:2.25rem}}
.grid{display:grid;gap:12px}@media (min-width:981px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}}
.section{padding:12px 0}.card{border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.94);box-shadow:var(--shadow);padding:14px}
.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}.gallery-card{grid-column:span 12;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.96);box-shadow:0 16px 40px rgba(11,18,16,.10)}
@media (min-width:981px){.gallery-card{grid-column:span 4}}
.gallery-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.gallery-meta{padding:12px 12px 14px}
.gallery-meta .k{margin:0 0 4px;font-weight:950}.gallery-meta .m{margin:0;color:var(--muted);font-size:.95rem;line-height:1.35}
.bottom-split{display:grid;gap:12px}@media (min-width:981px){.bottom-split{grid-template-columns:1.05fr .95fr;gap:16px}}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media (min-width:981px){.team-grid{grid-template-columns:repeat(4,1fr)}}
.member{border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.92);overflow:hidden}
.member img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}.member .meta{padding:10px}
.member .meta .n{margin:0;font-weight:950}.member .meta .r{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.footer{padding:18px 0 26px;border-top:1px solid var(--line);margin-top:10px}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.38);z-index:120;padding:16px}
.modal.open{display:grid}.modal-card{width:min(740px,100%);border-radius:26px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.96);box-shadow:0 30px 90px rgba(0,0,0,.25);overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
.modal-body{padding:14px}.form-grid{display:grid;gap:10px}@media (min-width:981px){.form-grid{grid-template-columns:repeat(2,1fr)}}
label{display:block;font-weight:900;font-size:.95rem}
input,select,textarea{width:100%;margin-top:6px;padding:12px 12px;border-radius:16px;border:1px solid rgba(11,18,16,.14);background:rgba(255,255,255,.96);font:inherit}
textarea{min-height:112px;resize:vertical}
.notice{font-size:.92rem;color:rgba(11,18,16,.62);margin-top:8px;line-height:1.35}
:focus-visible{outline:3px solid rgba(0,200,83,.40);outline-offset:2px}

.dd:before{content:"";position:absolute;left:0;right:0;top:100%;height:10px;}

.timeline-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:12px}
@media (min-width:720px){.timeline-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:981px){.timeline-grid{grid-template-columns:repeat(5,1fr)}}
.timeline-step{border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.94);overflow:hidden}
.timeline-step img{width:100%;aspect-ratio:16/10;object-fit:contain;display:block;background:rgba(247,250,248,.9);padding:8px}
.timeline-step .meta{padding:10px}
.timeline-step .meta .d{margin:0;font-weight:950}
.timeline-step .meta .t{margin:4px 0 0;color:var(--muted);font-size:.92rem;line-height:1.32}

.dd.open .dd-menu{display:block}

@media (max-width:480px){.timeline-step img{aspect-ratio:4/3}}

/* Sticky CTA (mobile) */
@media (max-width:980px){
  body{padding-bottom:92px;}
  .sticky-cta{
    position:fixed;left:12px;right:12px;bottom:12px;z-index:160;
    display:flex;gap:10px;align-items:center;justify-content:space-between;
    padding:10px;border-radius:20px;border:1px solid var(--line);
    background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
    box-shadow:0 22px 60px rgba(11,18,16,.16);
  }
  .sticky-cta .btn{flex:1;justify-content:center;}
  .sticky-cta .btn.primary{flex:1.15;}
}
@media (min-width:981px){
  .sticky-cta{display:none;}
}

/* Social icon colors */
.icon.google{background:#ffffff;border-color:rgba(66,133,244,.35);}
.icon.yelp{background:#ffffff;border-color:rgba(211,0,0,.35);}
.icon.facebook{background:#ffffff;border-color:rgba(24,119,242,.35);}
.icon.youtube{background:#ffffff;border-color:rgba(255,0,0,.35);}
.icon.instagram{background:#ffffff;border-color:rgba(225,48,108,.35);}

.brand .tagline{display:block;color:var(--muted);font-weight:700;font-size:.82rem;line-height:1.1;margin-top:2px}
@media (max-width:430px){.brand .tagline{display:none}}

/* Nav highlight */
.menu a.active,.dd.open>.dd-btn{
  color:var(--text);
  background:rgba(11,18,16,.04);
  border:1px solid rgba(112,176,32,.45);
}
.menu a:hover,.dd-btn:hover{
  background:rgba(11,18,16,.03);
}

@media (max-width:980px){
  .drawer .dd-menu{display:none}
  .drawer .dd.open .dd-menu{display:block}
}

/* Team cards */
.team{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
.team-card{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.7)}
.avatar{width:44px;height:44px;border-radius:16px;overflow:hidden;border:1px solid var(--line);flex:0 0 auto;background:#fff}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:480px){.team{grid-template-columns:1fr}}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  color:rgba(11,18,16,.82);
  font-weight:800;font-size:.92rem;
  box-shadow:0 10px 30px rgba(11,18,16,.08);
}
.chip-link{text-decoration:none;cursor:pointer}
.chip-link:hover{background:rgba(112,176,32,.10);border-color:rgba(112,176,32,.35)}

/* Accordion */
.acc{border:1px solid var(--line);border-radius:18px;padding:12px 14px;background:rgba(255,255,255,.88);box-shadow:0 10px 30px rgba(11,18,16,.06)}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}
.acc>summary::-webkit-details-marker{display:none}
.acc[open]{background:rgba(255,255,255,.94)}

/* Projects list */
.proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:820px){.proj-grid{grid-template-columns:1fr}}
.proj-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.86);text-decoration:none;color:inherit;box-shadow:0 10px 30px rgba(11,18,16,.06)}
.proj-card:hover{border-color:rgba(112,176,32,.35);background:rgba(112,176,32,.06)}
.proj-card .t{margin:0 0 6px;font-weight:950}
.proj-card .d{margin:0;color:var(--muted);line-height:1.45}

/* Mini accordion */
.acc-mini{border:1px solid var(--line);border-radius:16px;padding:10px 12px;background:rgba(255,255,255,.88)}
.acc-mini>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}
.acc-mini>summary::-webkit-details-marker{display:none}

/* Lock background when mobile menu open */
html.nav-open, body.nav-open{height:100%;overflow:hidden}

/* Anti horizontal scroll */
html,body{max-width:100%;overflow-x:hidden;}
*,*::before,*::after{box-sizing:border-box;}
img,video{max-width:100%;height:auto;}

/* Mobile overflow / scaling fixes (prevents horizontal "side scroll") */
@media (max-width:980px){
  /* Keep Estimate visible; sticky CTA also exists */
  /* Allow flex children to shrink instead of forcing overflow */
  .nav, .actions, .brand-text{min-width:0;}
  .actions{flex-wrap:nowrap;}
  .actions .btn{min-width:0;}

  .sticky-cta{flex-wrap:wrap;}
  .sticky-cta .btn{min-width:0;flex:1 1 180px;}
}

@media (max-width:420px){
  /* Hide phone number fragments in tight spaces */
  .actions [data-phone-link] [data-phone-text]{display:none;}
  .sticky-cta [data-phone-link] [data-phone-text]{display:none;}
}

.icon svg,.icon img{width:20px;height:20px;display:block}
.icon{background:#fff}

/* --- Mobile header + social bar fixes (Jan 2026) --- */
.iconbar{flex-wrap:wrap;max-width:100%;}
.iconbar .icon{flex:0 0 auto;}

@media (max-width:520px){
  /* Keep header compact so the menu button is always visible */
  .actions [data-phone-link]{display:none;}
  .actions{gap:6px;}
  .brand-text .t{font-size:1.02rem;}
  .logo{width:40px;height:40px;border-radius:14px;}
  .mobile-btn{padding:10px 12px;}
}


/* --- MOBILE MENU OVERLAY FIX (Jan 2026) --- */
@media (max-width: 980px){
  /* iOS Safari: backdrop-filter on sticky header can break fixed overlays */
  .header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(247,250,248,.96);}

  /* tighten header layout so menu button is fully visible */
  .nav{gap:8px;}
  .brand{gap:8px;min-width:0;flex:1 1 auto;}
  .logo{width:38px;height:38px;border-radius:14px;}
  .brand-text .t{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw;}

  .actions{gap:8px;flex:0 0 auto;}
  /* hide phone button in header (mobile has sticky CTA anyway) */
  .actions > a.btn:not(.primary){display:none;}
  .actions > a.btn.primary{padding:10px 12px;border-radius:16px;}

  /* make menu button big + high-contrast */
  .mobile-btn{
    width:44px;height:44px;
    padding:0;
    border-radius:16px;
    font-size:20px;
    line-height:1;
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 36px rgba(11,18,16,.14);
  }
}

/* Drawer overlay: force true full-screen and avoid container clipping */
.mobile-drawer{
  position:fixed;
  top:0;left:0;
  width:100vw;
  height:100vh;
  max-width:100vw;
  max-height:100vh;
}

/* If we portal the drawer to <body>, keep spacing below header */
.mobile-drawer{padding:84px 16px 20px;}
@media (max-width: 980px){
  .mobile-drawer{padding-top:76px;}
}

.reviews-widget{margin-top:12px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.96)}
@media (max-width:980px){}


/* Performance pass */
.section,
.gallery-card,
.timeline-step,
.member,
.proj-card,
.acc,
.acc-mini{
  content-visibility:auto;
  contain-intrinsic-size: 1px 700px;
}

img[loading="lazy"]{
  will-change:auto;
}

}


/* Project plan without photos */
.timeline-grid picture,
.timeline-grid img[alt^="Timeline Day"]{
  display:none !important;
}
.timeline-step{
  min-height:auto !important;
  padding:16px 18px !important;
}
.timeline-step .meta{
  width:100% !important;
}
.timeline-step .meta .d{
  margin:0 0 6px !important;
  font-size:18px !important;
  font-weight:700 !important;
}
.timeline-step .meta .t{
  margin:0 !important;
}

/* Typical pricing */
.price-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-top:14px;
}
.price-item{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:18px;
  background:#fff;
}
.price-item .k{
  margin:0 0 6px;
  font-weight:700;
}
.price-item .v{
  margin:0;
  color:#22C55E;
  font-weight:700;
}
.price-note{
  margin:10px 0 0;
  opacity:.78;
}
@media (max-width: 768px){
  .timeline-step{ padding:14px 16px !important; }
}



@media (min-width: 1024px) {
  .price-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  .price-item {
    min-height: 150px;
    padding: 24px !important;
    border-radius: 16px !important;
  }

  .price-item .k {
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  .price-item .v {
    font-size: 24px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  .card h2 {
    font-size: 30px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  .muted,
  .price-note {
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: 900px;
  }
}