*{box-sizing:border-box;}
body{margin:0;font-family:'Hanken Grotesk',sans-serif;color:#0B1F33;background:#fff;overflow-x:hidden;}
html{scroll-behavior:smooth;}
::selection{background:#60C048;color:#0B1F33;}
img{max-width:100%;}
a{color:inherit;}
summary::-webkit-details-marker{display:none;}
details[open] .faq-chev{transform:rotate(180deg);}
.g1-container{max-width:1280px;margin:0 auto;padding:0 28px;}
.g1-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;}
.g1-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;font-weight:700;text-decoration:none;}
/* mega-menu + nav item hover states (replace design's style-hover attrs) — filled alongside Task 5/7 */

/* ============================================================
   Task 8 — Homepage responsive rules.
   The design source is desktop-only; these stack the homepage
   grids/flex rows and fluidise fixed widths so there is NO
   horizontal scroll at any width. !important overrides the
   inline styles ported verbatim from the design.
   ============================================================ */

/* Belt-and-braces: never allow the page to scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* --- Tablet / small-desktop --- */
@media (max-width: 960px) {
  /* Two-column feature + intro + CTA splits stack to one column. */
  .g1-split { grid-template-columns: 1fr !important; }
  /* On the residential feature row the image comes first in source;
     keep image above the copy when stacked (natural order is fine). */
  .g1-split--feature img { height: 280px !important; }
  /* Multi-column card grids collapse to a comfortable min. */
  .g1-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
  /* Hide the cramped desktop nav links under 960px to avoid overflow.
     The hamburger (shown at the same breakpoint just below) replaces them. */
  .g1-site-header nav > div:nth-child(2) { display: none !important; }
}

/* ============================================================
   Task 8M — Mobile navigation (hamburger + slide-in drawer).
   Breakpoint is intentionally the SAME 960px used above to hide the
   desktop nav links, so there is never a width with neither shown.
   ============================================================ */

/* Hamburger button — hidden on desktop by default. */
.g1-burger {
  display: none;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}
.g1-burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.g1-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.g1-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.g1-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .g1-burger { display: inline-flex; }
  /* Prevents nav-bar overflow: the CTA remains reachable in the drawer footer. */
  .g1-nav-cta { display: none !important; }
}

/* Backdrop */
.g1-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 18, 30, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  z-index: 90;
}
.g1-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* Drawer panel */
.g1-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(88vw, 360px);
  background: #0B1F33;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  z-index: 100;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.g1-drawer.is-open { transform: translateX(0); }

.g1-drawer-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: #0B1F33;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 2;
}
.g1-drawer-logo { display: flex; align-items: center; background: #fff; padding: 6px 11px; border-radius: 9px; }
.g1-drawer-logo img { height: 22px; width: auto; display: block; }
.g1-drawer-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
}

.g1-drawer-nav { padding: 8px 12px 16px; }

/* Accordions */
.g1-accordion { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.g1-accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 14px 8px;
  background: transparent;
  border: 0;
  color: #EAF0F5;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.g1-accordion-chev { flex: 0 0 auto; transition: transform 0.25s ease; color: #7AD45F; }
.g1-accordion-head[aria-expanded="true"] .g1-accordion-chev { transform: rotate(180deg); }
.g1-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: flex;
  flex-direction: column;
}
.g1-accordion-panel.is-open { max-height: 2000px; }

.g1-drawer-group-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7AD45F;
  font-weight: 500;
  margin: 12px 0 6px 8px;
}
.g1-drawer-link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 8px;
  color: #EAF0F5;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
}
.g1-drawer-link:hover, .g1-drawer-link:focus-visible { background: rgba(255, 255, 255, 0.06); }
.g1-drawer-link--plain {
  min-height: 52px;
  padding: 14px 8px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.g1-drawer-hq { font-size: 9.5px; color: #7AD45F; font-weight: 600; letter-spacing: 0.05em; }

/* Footer utility links / phone / CTA */
.g1-drawer-foot {
  margin-top: auto;
  padding: 16px 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.g1-drawer-util { display: flex; flex-wrap: wrap; gap: 8px; }
.g1-drawer-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-weight: 500;
}
.g1-drawer-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  color: #7AD45F;
  font-size: 15px;
  text-decoration: none;
}
.g1-drawer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  background: #60C048;
  color: #0B1F33;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 18px;
  border-radius: 999px;
}

/* Lock body scroll while the drawer is open */
body.g1-drawer-open { overflow: hidden; }

/* --- Large phone / small tablet --- */
@media (max-width: 768px) {
  .g1-cards { grid-template-columns: 1fr !important; }
  .g1-grid-2 { grid-template-columns: 1fr !important; }
  .g1-hero { padding-top: clamp(96px, 22vw, 132px) !important; min-height: 0 !important; }
  .g1-hero-title { font-size: clamp(2rem, 9vw, 3rem) !important; }
  /* Reduce oversized section padding a touch on phones. */
  section { padding-left: 20px; padding-right: 20px; }
  /* Footer (from footer.php) — stack its 4-col grid so it never overflows. */
  footer > div > div[style*="1.4fr"] { grid-template-columns: 1fr 1fr !important; }
  /* Footer licenses: one per line on phones so a number never breaks mid-string
     (the owner flagged "GA Lic. # LVU40584" splitting across two lines). The
     inter-item separator dots are redundant once each license owns a line. */
  .g1-footer-lics { flex-direction: column !important; }
  .g1-footer-lics .g1-lic-sep { display: none !important; }
  /* Announcement bar: the three license numbers wrap to a second row on phones and
     push the bar to double height. They stay in the footer, where the crawlable
     licensing signal already lives, so drop them from the top bar here. */
  .g1-ann-lic { display: none !important; }
  /* Hero: give the CTA row room to breathe before the Residential/Commercial toggle,
     which sits directly beneath it once the hero collapses to min-height:0. */
  .g1-hero-ctas { margin-bottom: 28px !important; }
}

/* --- Small phone --- */
@media (max-width: 480px) {
  .g1-hero-title { font-size: clamp(1.85rem, 10vw, 2.4rem) !important; }
  /* Hero segmented toggle buttons: let them shrink instead of forcing 150px each. */
  .g1-hero [data-hero-set] { min-width: 0 !important; padding-left: 16px !important; padding-right: 16px !important; }
  /* Feature images a little shorter on tiny screens. */
  .g1-split--feature img { height: 220px !important; }
  /* Footer to a single column at the very bottom widths. */
  footer > div > div[style*="1.4fr"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Task 9 — Commercial Hub responsive rules.
   The hero + local-partner splits reuse .g1-split (stacks at 960px);
   the card grids reuse .g1-cards. The only new hook is .g1-grid-3
   (the "at a glance" check list), stacked here so it never overflows.
   ============================================================ */
@media (max-width: 960px) {
  .g1-grid-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .g1-grid-3 { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Task 11 — Residential Detail: comparison table.
   The 4-column comparison grid can't legibly stack on phones, so it
   scrolls horizontally inside its own container (min-width keeps the
   columns readable) instead of forcing the whole page to scroll.
   ============================================================ */
.g1-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.g1-table-scroll > div { min-width: 620px; }

/* ============================================================
   Careers page — redesign hooks.
   .g1-role-row : job-board listing rows (title | tags | Apply).
                  Row on desktop, stacks to a column on phones.
   .g1-steps    : "How hiring works" numbered steps. 4 across →
                  2 → 1 as the viewport narrows.
   .g1-stats    : hero credibility stat strip. 4 across → 2 → 1.
   ============================================================ */
.g1-role-row [data-role-toggle] { display: flex; align-items: center; gap: 24px; }
.g1-role-row .g1-role-main { flex: 1 1 auto; min-width: 0; }
.g1-role-row .g1-role-side { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }
@media (max-width: 720px) {
  .g1-role-row [data-role-toggle] { flex-direction: column; align-items: flex-start; gap: 14px; }
  .g1-role-row .g1-role-side { width: 100%; justify-content: space-between; }
}

.g1-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 860px) { .g1-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .g1-steps { grid-template-columns: 1fr; } }

.g1-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 36px; }
@media (max-width: 760px) { .g1-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .g1-stats { grid-template-columns: 1fr; } }

/* ============================================================
   Tasks 12/13 — Service Area (city hub + service spokes).
   Reuses .g1-split (hero, stacks @960), .g1-grid-2 (services, @768)
   and .g1-grid-3 (explore/testimonials, @960→@640). The only new
   hook is .g1-grid-4 (industries/properties + trust-point grids):
   4 across → 2 → 1 as the viewport narrows, so it never overflows.
   ============================================================ */
@media (max-width: 960px) { .g1-grid-4 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .g1-grid-4 { grid-template-columns: 1fr !important; } }