/* --- WhatsApp "Quick Estimate" header CTA --- */
/* Builds on the existing .button style (turquoise --green background,
   pill radius, hover state) — only the header-specific sizing lives here. */

.nav_cta {
  grid-column-gap: .4rem;
  grid-row-gap: .4rem;
  z-index: 100;
  letter-spacing: .04em;
  white-space: nowrap;
  flex: none;
  padding: .7rem 1.25rem;
  font-family: Coolvetica Condensed, sans-serif;
  font-size: 1.125rem;
  line-height: 1;
}

.nav_cta .icon-16 {
  flex: none;
}

.nav_cta.is-mobile {
  display: none;
}

/* Desktop navigation: the CTA sits after "Contact us" in the right-hand
   link group. The group is switched to auto width so it can grow towards
   the centred logo, and the (purely spacing) grid gap is reduced to give
   that group room without moving either link group. */
@media screen and (min-width: 992px) {
  .nav_menu-items-inner {
    grid-column-gap: 6rem;
  }

  .nav_menu-link-wrap.has-cta {
    grid-column-gap: 2rem;
    width: auto;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .nav_menu-link-wrap.has-cta {
    grid-column-gap: 1.25rem;
  }

  .nav_cta.is-desktop {
    padding: .6rem 1rem;
    font-size: 1rem;
  }
}

/* Mobile header: logo | quick estimate | hamburger.
   The brand box is shrunk to the logo itself so the three items fit. */
@media screen and (max-width: 991px) {
  .nav_brand {
    width: auto;
  }

  .nav_cta.is-desktop {
    display: none;
  }

  .nav_cta.is-mobile {
    padding: .55rem 1rem;
    font-size: 1rem;
    display: flex;
  }
}

@media screen and (max-width: 479px) {
  .nav_logo {
    width: 4.75rem;
    height: 4.75rem;
  }

  .nav_cta.is-mobile {
    grid-column-gap: .35rem;
    grid-row-gap: .35rem;
    padding: .5rem .8rem;
    font-size: .9375rem;
  }
}

/* Static (logo-only) headers on the legal and 404 pages. */
.static_brand .nav_cta {
  margin-left: auto;
}

.utility_nav-cta {
  position: absolute;
  top: 2rem;
  right: 2rem;
}

/* The 404 logo is centred, so on narrow screens the CTA sits under it
   instead of in the corner. */
@media screen and (max-width: 767px) {
  .utility_nav-cta {
    inset: 13.25rem auto auto 50%;
    transform: translate(-50%);
  }
}