/* site.css - shared header/footer/nav chrome, loaded on every page.
   Edit this file + partials/header.html + partials/footer.html, then run
   `node build.mjs` to restamp every page. Do not hand-edit the chrome
   markup inside individual page files - it will be overwritten. */

/* CHROME:START - header/footer/nav/animation additions, safe to regenerate */
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#0E2A22;padding:.9rem 1.4rem;
  border-radius:0 0 10px 0;font-weight:700;z-index:3000;text-decoration:none;}
.skip-link:focus{left:0;}

/* mobile nav toggle button (hidden until the nav collapses) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);border-radius:12px;cursor:pointer;padding:0;
  margin-left:.35rem;flex-shrink:0;transition:background .18s ease,border-color .18s ease;}
.nav-toggle:hover,.nav-toggle:active{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);}
.nav-toggle span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;
  transition:transform .22s ease,opacity .22s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{display:none;flex-direction:column;gap:.15rem;max-width:1200px;margin:0 auto;
  padding:0 1.5rem;overflow:hidden;max-height:0;transition:max-height .28s ease;}
.mobile-nav a{color:#EFE8DD;text-decoration:none;font-weight:600;font-size:.98rem;
  padding:.85rem .2rem;border-bottom:1px solid rgba(255,255,255,.08);}
.mobile-nav a[aria-current="page"]{color:var(--copper-light);}
.main-nav a[aria-current="page"]{color:#fff;border-bottom:2px solid var(--copper-light);padding-bottom:4px;}
header.nav-open .mobile-nav{display:flex;max-height:80vh;overflow-y:auto;padding-top:.4rem;padding-bottom:.4rem;}
.nav-scrim{display:none;}

@media(max-width:900px){
  header .header-inner nav.main-nav{display:none;}
  .nav-toggle{display:flex;}
}

/* scroll-reveal: fades content in as it enters the viewport; off by default so
   pages render correctly even if JS fails to load */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .nav-toggle span,.mobile-nav{transition:none;}
}
/* CHROME:END */

/* CHROME-FOOTER:START - full footer skin, injected on every page so the
   rebuilt markup (.footer-grid/.footer-brand) renders correctly even on
   pages whose own <style> only ever defined the old .footer-inner/.footer-col
   classes; harmless (just reinforces the same values) on pages that already
   had these rules */
footer{background:var(--ink-deep);color:#B7AC9C;padding:3.6rem 1.5rem 2rem;}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;gap:2.6rem;grid-template-columns:1.15fr .8fr .85fr .8fr .75fr;}
.footer-grid h3{color:#fff;font-size:.85rem;margin-bottom:1.1rem;text-transform:uppercase;letter-spacing:1px;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid ul li{margin-bottom:.6rem;font-size:.88rem;}
.footer-grid a{text-decoration:none;color:#B7AC9C;}
.footer-grid a:hover{color:#fff;}
.footer-brand .brand{color:#fff;margin-bottom:1rem;}
.footer-brand p{font-size:.85rem;line-height:1.85;margin:0;}
.footer-bottom{max-width:1200px;margin:2.6rem auto 0;padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;color:#A79C8C;}
.footer-disclaimer{max-width:1200px;margin:1.4rem auto 0;font-size:.74rem;line-height:1.7;color:#8F8474;}
@media(max-width:1150px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr;}}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
/* CHROME-FOOTER:END */

/* CHROME-HEADER:START - full header skin, injected on every page so the
   rebuilt header (nav-toggle, mobile-nav, header-cta) renders correctly even
   on the handful of minimal legal-page templates (terms/privacy/accessibility)
   whose own <style> never defined more than .brand/.call-btn; harmless (just
   reinforces the same values) on pages that already had these rules */
header{background:rgba(14,12,10,.92);backdrop-filter:blur(10px);color:#fff;padding:.9rem 1.5rem;
  position:sticky;top:0;z-index:1000;border-bottom:1px solid rgba(31,157,111,.20);}
.header-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:#fff;
  font-family:'Fraunces',serif;font-weight:700;font-size:1.12rem;}
.brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--copper),var(--copper-dark));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-mark svg{width:19px;height:19px;}
nav.main-nav{display:flex;gap:1.7rem;align-items:center;flex-wrap:wrap;}
nav.main-nav a{color:#D9CFC2;text-decoration:none;font-weight:600;font-size:.89rem;}
nav.main-nav a:hover{color:#fff;}
.header-cta{display:flex;align-items:center;gap:.9rem;}
.header-open{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:#B7D9A8;font-weight:700;}
.dot{width:7px;height:7px;border-radius:50%;background:#79D94F;box-shadow:0 0 0 3px rgba(121,217,79,.22);}
.call-btn{background:linear-gradient(135deg,var(--copper-light),var(--copper));color:#fff!important;
  padding:.62rem 1.2rem;border-radius:9px;font-weight:800;text-decoration:none;font-size:.9rem;
  white-space:nowrap;box-shadow:0 6px 18px rgba(31,157,111,.35);}
.call-btn:hover{filter:brightness(1.06);}
/* CHROME-HEADER:END */

/* CHROME-DROPDOWN:START - Services / Service Areas submenus in the nav */
.nav-item{position:relative;}
.nav-drop-toggle{background:none;border:none;color:#D9CFC2;font:inherit;font-weight:600;font-size:.89rem;
  cursor:pointer;display:inline-flex;align-items:center;gap:.32rem;padding:0;}
.nav-drop-toggle:hover{color:#fff;}
.nav-drop-toggle.current{color:#fff;border-bottom:2px solid var(--copper-light);padding-bottom:4px;}
.nav-drop-toggle .chev{width:11px;height:11px;transition:transform .2s ease;flex-shrink:0;}
.nav-item.open .nav-drop-toggle .chev{transform:rotate(180deg);}
.nav-item.open .nav-drop-toggle{color:#fff;}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 16px);left:0;
  background:var(--ink-deep);border:1px solid rgba(31,157,111,.25);border-radius:14px;
  padding:.6rem;width:500px;max-width:min(500px,90vw);max-height:70vh;overflow-y:auto;
  grid-template-columns:1fr 1fr;gap:1px;box-shadow:0 24px 48px rgba(0,0,0,.42);z-index:1100;}
.nav-item.open .dropdown-menu{display:grid;}
.dropdown-menu a{color:#D9CFC2;text-decoration:none;font-size:.83rem;font-weight:600;
  padding:.55rem .65rem;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dropdown-menu a:hover{background:rgba(255,255,255,.07);color:#fff;}
.dropdown-menu a[aria-current="page"]{color:var(--copper-light);}
.dropdown-menu a.view-all{grid-column:1/-1;color:var(--copper-light);
  border-bottom:1px solid rgba(255,255,255,.1);border-radius:8px 8px 0 0;margin-bottom:.3rem;padding-bottom:.75rem;}

.mobile-nav-item{border-bottom:1px solid rgba(255,255,255,.08);}
.mobile-drop-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;
  background:none;border:none;color:#EFE8DD;font:inherit;font-weight:600;font-size:.98rem;
  padding:.85rem .2rem;cursor:pointer;text-align:left;}
.mobile-drop-toggle.current span{color:var(--copper-light);}
.mobile-drop-toggle .chev{width:14px;height:14px;transition:transform .22s ease;flex-shrink:0;color:#B7AC9C;}
.mobile-nav-item.open .mobile-drop-toggle .chev{transform:rotate(180deg);}
.mobile-submenu{display:flex;flex-direction:column;max-height:0;overflow:hidden;
  transition:max-height .3s ease;}
.mobile-nav-item.open .mobile-submenu{max-height:1600px;}
.mobile-submenu a{color:#C9BFB1;font-weight:500;font-size:.9rem;padding:.6rem .2rem .6rem 1rem;
  border-top:1px solid rgba(255,255,255,.05);text-decoration:none;display:block;}
.mobile-submenu a[aria-current="page"]{color:var(--copper-light);}
/* CHROME-DROPDOWN:END */
