/* =========================================================================
   GREEN GRASS — CHROME (utility bar, header/nav, footer)
   =========================================================================
   Built from the Figma header/footer spec.
   Source: homepage frame 100:225 ("Hubspot Updates") in file
   2CLC6SeMzT7uTTldJ2l2We, and D+B frame 253:257 in Sam97X22QijxDkNlX12cd6.

   ⚠ LOGO SIZING — read this before changing it again.
   The frame's lockup bounding box is 286 x 102 in a 130px band, which reads as
   "logo is 78% of the header height". Applied literally that produced a lockup
   about twice the size it appears in the comp: the 286x102 box includes the
   lockup's own generous internal whitespace, and the mark plus wordmark plus
   tagline only occupy part of it. In the mockup the lockup spans roughly 18% of
   viewport width; applied literally it spanned 35%.
   The numbers below are set so the RENDERED lockup matches the comp, not so the
   bounding box matches the spec. There is also an override in assets/brand.css —
   this file loads after it, so this file wins. Change both or neither.

   OTHER MEASURED VALUES:
     nav labels              Montserrat 10px / 500 / 1px tracking / caps
     Contact Us pill         145 x 45, radius 50
     footer link headings    Montserrat, caps, sage
     footer monogram         877 wide watermark behind the columns

   CALLRAIL: the phone renders as plain selectable text in the utility bar, the
   footer, and the mobile call bar. swap.js matches that string and substitutes a
   tracking number. Do not wrap digits in separate elements or render as an image.

   ⚠ SOCIAL ICONS ARE STYLED IN gg-decoration.css, NOT HERE.
   This file used to set `.gg-social a { opacity: .75 }`, which survived the restyle
   in gg-decoration.css and left the icons washed out.

   ⚠ MOBILE HEADER IS DELIBERATELY MINIMAL — logo + hamburger only, like Bertog's.
   The utility bar is hidden below 900px and the phone lives in the fixed call bar at
   the bottom. Customer Portal and Contact Us move into the drawer via
   .gg-nav__link--mobile, emitted by render-body-pages.js.

   ⚠ NAV NOW CARRIES SEVEN TOP-LEVEL ITEMS, not the frame's six — Service Areas was
   promoted out of the About dropdown so the nine city pages are reachable from every
   page. If it crowds at some widths, move Commercial or Portfolio into a dropdown
   rather than shrinking the type below 10px.
   ========================================================================= */

/* ------------------------------------------------------------ utility bar -- */
.gg-utility {
  background: var(--gg-slate-deep);
  color: var(--gg-on-dark-mut);
  font-family: var(--gg-ui);
  font-size: 12px;
  letter-spacing: .04em;
}
.gg-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding-block: 8px;
  flex-wrap: wrap;
}
.gg-utility__left,
.gg-utility__right { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap; }
.gg-utility a { color: inherit; text-decoration: none; }
.gg-utility a:hover { color: var(--gg-accent); }
.gg-utility__item { display: inline-flex; align-items: center; gap: 7px; }
.gg-utility__item svg { flex: 0 0 auto; opacity: .8; }
.gg-utility__portal {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 0 16px; border: 1px solid var(--gg-rule-dark); border-radius: 50px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
/* ⚠ THE HOVER LABEL WAS INVISIBLE. `.gg-utility a:hover` above sets the colour to
   --gg-accent (#c1c38b) and outranks a bare `.gg-utility__portal:hover`, so on hover
   the pill filled with --gg-sage (#c1c291) and painted the text in a near-identical
   green — the button read as an empty capsule. That is the "update the CUSTOMER
   PORTAL font color on hover so that it's visible" note from the Aug 2026 review.
   Qualifying the selector with .gg-utility wins the tie; contrast goes 1.0:1 -> 6.3:1. */
.gg-utility a.gg-utility__portal:hover,
.gg-utility a.gg-utility__portal:focus-visible {
  background: var(--gg-sage);
  color: var(--gg-ink);
  border-color: transparent;
}

/* ----------------------------------------------------------------- header -- */
.gg-header {
  background: var(--gg-cream);
  border-bottom: 1px solid var(--gg-rule);
  position: relative;
  z-index: 40;
}
.gg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 32px);
  min-height: clamp(70px, 6vw, 96px);
  padding-block: 10px;
}
/* Sized so the rendered lockup matches the comp — see the note at the top. */
.gg-brand { display: flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.gg-brand img {
  height: clamp(38px, 3.4vw, 52px);
  width: auto;
  max-width: 300px;
  display: block;
}

/* Nav gets the room the smaller lockup frees up. */
.gg-nav { display: flex; align-items: center; gap: clamp(9px, 1.3vw, 22px); flex-wrap: nowrap; }
.gg-nav__link {
  font-family: var(--gg-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gg-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 6px;
}
.gg-nav__link:hover { color: var(--gg-olive); }
.gg-nav__link[aria-current='page'] { color: var(--gg-olive); }

/* Drawer-only items — hidden on desktop, where Customer Portal is in the utility
   bar and Contact Us is the header pill. */
.gg-nav__link--mobile { display: none; }

.gg-nav__group { position: relative; }
.gg-nav__menu {
  position: absolute; top: 100%; left: 0; min-width: 232px;
  background: var(--gg-cream); border: 1px solid var(--gg-rule);
  padding: 8px 0; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity .16s ease, translate .16s ease, visibility .16s;
  box-shadow: 0 12px 32px rgba(45,60,57,.1);
}
/* The Service Areas menu sits near the right-hand end of the nav, so a
   left-anchored panel can run off the viewport. Anchoring the last two groups to
   their right edge keeps them on screen. */
.gg-nav__group:nth-last-of-type(1) .gg-nav__menu,
.gg-nav__group:nth-last-of-type(2) .gg-nav__menu { left: auto; right: 0; }

.gg-nav__group:hover .gg-nav__menu,
.gg-nav__group:focus-within .gg-nav__menu { opacity: 1; visibility: visible; translate: 0 0; }
.gg-nav__menu a {
  display: block; padding: 9px 18px;
  font-family: var(--gg-body); font-size: 14px; color: var(--gg-ink-soft); text-decoration: none;
}
.gg-nav__menu a:hover { background: var(--gg-sage-pale); color: var(--gg-ink); }

.gg-header__cta { flex: 0 0 auto; }

.gg-navtoggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--gg-rule); border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
}
.gg-navtoggle span, .gg-navtoggle span::before, .gg-navtoggle span::after {
  display: block; width: 20px; height: 1.5px; background: var(--gg-ink); content: '';
  margin-inline: auto; position: relative;
}
.gg-navtoggle span::before { top: -6px; position: absolute; }
.gg-navtoggle span::after  { top: 6px;  position: absolute; }
/* Open state reads as a close control rather than staying a hamburger. */
.gg-header__inner[data-open='true'] .gg-navtoggle span { background: transparent; }
.gg-header__inner[data-open='true'] .gg-navtoggle span::before { top: 0; rotate: 45deg; }
.gg-header__inner[data-open='true'] .gg-navtoggle span::after  { top: 0; rotate: -45deg; }

/* ----------------------------------------------------------------- footer -- */
.gg-footer {
  position: relative;
  background: var(--gg-slate-deep);
  color: var(--gg-on-dark);
  padding-top: clamp(48px, 6vw, 84px);
  overflow: clip;
}
.gg-footer > * { position: relative; z-index: 1; }

/* ⚠ COLUMN COUNT IS NOT HARD-CODED ANY MORE.
   This was `repeat(4, minmax(0,1fr))`, so adding the Service Areas column created a
   fifth track that had nowhere to go — it would have wrapped under the brand block.
   auto-fit lets the footer absorb a new column without a CSS change; the brand block
   keeps its own fixed track. */
.gg-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 200px) repeat(auto-fit, minmax(136px, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}
.gg-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.gg-footer__brand img { width: clamp(110px, 12vw, 150px); height: auto; display: block; }
.gg-footer h2 {
  font-family: var(--gg-ui);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gg-accent); margin: 0 0 16px;
}
.gg-footer ul { list-style: none; margin: 0; padding: 0; }
.gg-footer li { margin-bottom: 9px; }
.gg-footer li a {
  font-family: var(--gg-body); font-size: 14px; line-height: 1.4;
  color: var(--gg-on-dark-mut); text-decoration: none;
}
.gg-footer li a:hover { color: #fff; }

.gg-footer__meta {
  display: flex; align-items: center; gap: clamp(16px, 4vw, 56px);
  flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 56px);
  padding-block: 22px;
  border-top: 1px solid var(--gg-rule-dark);
  font-family: var(--gg-body); font-size: 14px; color: var(--gg-on-dark-mut);
}
.gg-footer__meta a { color: inherit; text-decoration: none; }
.gg-footer__meta a:hover { color: #fff; }
.gg-footer__meta .gg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gg-sage); flex: 0 0 auto; }

.gg-legal {
  background: var(--gg-slate);
  padding-block: 16px;
  text-align: center;
  font-family: var(--gg-ui); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gg-on-dark-mut);
}

/* --------------------------------------------------------- mobile call bar --
   The phone, floating at the bottom — the one control that should always be within
   thumb reach. Carries the safe-area inset so it clears the home indicator on
   notched iPhones rather than sitting under it. */
.gg-callbar {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 60;
  align-items: center; justify-content: center; gap: 10px;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  background: var(--gg-sage); color: var(--gg-ink);
  font-family: var(--gg-ui); font-size: 14px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 -2px 16px rgba(45, 60, 57, .18);
}

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1360px) {
  .gg-nav { gap: 10px; }
  .gg-nav__link { font-size: 10px; letter-spacing: .07em; }
}

/* ---- tablet + mobile drawer ------------------------------------------------
   Three things were broken here, all visible on a phone:
   1. min-width: 232px on the submenus was never reset, so in the drawer every
      submenu forced 232px and the page overflowed sideways on a 390px viewport.
   2. Every submenu was force-expanded, dumping all sub-links on screen at once.
   3. The drawer grew the header instead of overlaying the page, because it was a
      wrapped flex item inside .gg-header__inner.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .gg-navtoggle { display: block; order: 3; }

  .gg-nav {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    top: var(--gg-header-bottom, 72px);
    z-index: 45;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(16px, 5vw, 28px) 96px;
    background: var(--gg-cream);
    border-top: 1px solid var(--gg-rule);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .gg-header__inner[data-open='true'] .gg-nav { display: flex; }

  .gg-nav__group { position: static; }
  .gg-nav__link {
    font-size: 12.5px;
    padding-block: 13px;
    border-bottom: 1px solid var(--gg-rule);
  }

  /* Drawer-only items, set apart from the service nav above them. */
  .gg-nav__link--mobile {
    display: block;
    color: var(--gg-olive);
    letter-spacing: .14em;
  }
  .gg-nav__link--mobile:first-of-type { margin-top: 10px; }

  .gg-nav__menu,
  .gg-nav__group:nth-last-of-type(1) .gg-nav__menu,
  .gg-nav__group:nth-last-of-type(2) .gg-nav__menu {
    position: static;
    min-width: 0;          /* the fix for the sideways overflow */
    width: auto;
    max-width: 100%;
    left: auto;
    right: auto;
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    border: 0;
    border-left: 1px solid var(--gg-rule);
    box-shadow: none;
    background: none;
    padding: 6px 0 10px 14px;
    margin-left: 2px;
  }
  .gg-nav__menu a {
    padding: 8px 0;
    font-size: 14px;
    overflow-wrap: anywhere;   /* long service names can't force a wider box */
  }

  .gg-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- mobile: logo + hamburger only ----------------------------------------
   The utility bar goes entirely. Everything on it is reachable elsewhere: the phone
   is in the call bar, Customer Portal is in the drawer, address and hours are in the
   footer and in schema, and the socials are in the footer. What's left is the logo
   and the hamburger — which is what Bertog's mobile header does. */
@media (max-width: 900px) {
  .gg-utility { display: none; }

  .gg-brand img { height: 36px; }
  .gg-header__cta { display: none; }
  .gg-header__inner { min-height: 64px; }

  .gg-callbar { display: flex; }
  /* Clears the fixed call bar, safe-area inset included, so it can't cover the last
     line of the footer. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .gg-footer__grid { grid-template-columns: 1fr; }
  .gg-footer__meta { gap: 8px 20px; }
}

@media (max-width: 520px) {
  .gg-callbar { font-size: 13px; }
}

@media print {
  .gg-utility, .gg-callbar, .gg-navtoggle, .gg-nav { display: none; }
  .gg-footer { background: none; color: #000; }
}