/* ============================================================
   Martinez Bros Landscape — navbar layout + typography fixes
   Responsive overlap/clipping fixes plus a unified navbar font
   (brand font Oswald) across every page. Does NOT change the
   site's colors or theme. Loaded after the Webflow stylesheet
   so these win where needed.
   ============================================================ */

/* ---------- Navbar variant 4 (index, about-us, contact) ----------
   Webflow baked rogue fixed widths (1200px / 2600px) and negative
   transforms onto the title + location text, which made them overlap
   each other and the logo. Neutralize those and lay the bar out as:
   [ title + location | centered logo | menu ]                      */
.waves-master-nav-4 {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}
.waves-master-nav-4 .text-block-27 {
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
  line-height: 1.05 !important;
}
.waves-master-nav-4 .spokane-wa {
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
  line-height: 1.05 !important;
}
.waves-master-nav-4 .waves---nav-brand-link {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  height: 60px !important;
  width: auto !important;
}
.waves-master-nav-4 .waves---brand {
  transform: none !important;
  height: 100% !important;
  width: auto !important;
}
.waves-master-nav-4 .waves-right-nav-4 {
  margin-left: auto !important;
}

/* Tighten the left cluster on smaller screens so the centered logo
   never collides with the title/location or the hamburger button.   */
@media screen and (max-width: 991px) {
  .waves-master-nav-4 .text-block-27 { font-size: 0.95rem !important; }
  .waves-master-nav-4 .spokane-wa { font-size: 0.6rem !important; }
  .waves-master-nav-4 .waves---nav-brand-link { height: 50px !important; }
}
@media screen and (max-width: 600px) {
  .waves-master-nav-4 { gap: 8px !important; }
  .waves-master-nav-4 .text-block-27 {
    font-size: 0.72rem !important;
    max-width: 33vw !important;
    white-space: normal !important;
    line-height: 1.0 !important;
    -webkit-text-stroke-width: 0 !important;
  }
  .waves-master-nav-4 .spokane-wa { display: none !important; }
  .waves-master-nav-4 .waves---nav-brand-link { height: 40px !important; }
}

/* ---------- Navbar variant 5 (services, tree-services, hardscapes,
   fence, full-lawn, seasonal, landscape-renovations, spokane) ----------
   Desktop is fine. On mobile a baked-in negative transform shoves the
   logo off the left edge so it clips and overlaps the brand text.
   Reset the transform and cap the logo size only on small screens.    */
@media screen and (max-width: 767px) {
  .waves-master-nav-5 {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .waves-master-nav-5 .waves---nav-brand-link-2 {
    transform: none !important;
    height: auto !important;
    align-self: center !important;
    padding-left: 4px !important;
  }
  .waves-master-nav-5 .waves---brand-2 {
    transform: none !important;
    height: 42px !important;
    width: auto !important;
    max-width: none !important;
  }
  .waves-master-nav-5 .text-block-29 {
    transform: none !important;
    width: auto !important;
    max-width: 42vw !important;
    white-space: normal !important;
    font-size: 0.8rem !important;
    line-height: 1.0 !important;
    margin: 0 !important;
  }
  .waves-master-nav-5 .waves-right-nav-5 {
    margin-left: auto !important;
  }
}

/* ---------- Plain "Coachella" navbar (coachella, concrete, pavers,
   pergolas, artificial-turf, lighting-services, coachella-services,
   coachella-hardscape, Coachella-landscape-design) ----------
   Desktop centering (translate) is intentional; only keep the logo
   image from being clipped at the left edge on mobile.                */
@media screen and (max-width: 767px) {
  .coachella-image-navbar {
    height: 42px !important;
    width: auto !important;
    max-width: none !important;
  }
  .coachella-image-brand-link,
  .coachella-image-navbar-link {
    padding-left: 4px !important;
  }
}

/* ============================================================
   Unified navbar typography (every page, every nav variant)
   The bars were mixing italics, text-strokes (outlines) and
   different letter-spacing, which read as sloppy. Standardize
   ALL navbar text to the company brand font (Oswald), upright,
   uppercase, with consistent spacing and no outline.
   Icons (hamburger / dropdown arrows) are left untouched.
   ============================================================ */
.waves-navbar-4 .w-nav-link,
.waves-navbar-4 .w-dropdown-link,
.waves-navbar-4 .w-dropdown-toggle,
.waves-navbar-4 .w-button,
.waves-navbar-4 .text-block-27,
.waves-navbar-4 .spokane-wa,
.waves-navbar-4 .text-block-26,
.waves-navbar-5 .w-nav-link,
.waves-navbar-5 .w-dropdown-link,
.waves-navbar-5 .w-dropdown-toggle,
.waves-navbar-5 .w-button,
.waves-navbar-5 .text-block-29,
.waves-navbar-5 .text-block-28,
.navbar-coachella .w-nav-link,
.navbar-coachella .w-dropdown-link,
.navbar-coachella .w-dropdown-toggle,
.navbar-coachella .w-button,
.navbar-coachella .coachella-image-brand,
.navbar-coachella .text-block-13 {
  font-family: 'Oswald', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  -webkit-text-stroke-width: 0 !important;
}

/* Brand wordmarks a touch heavier so the company name reads as the anchor */
.waves-navbar-4 .text-block-27,
.waves-navbar-5 .text-block-29,
.navbar-coachella .coachella-image-brand {
  font-weight: 600 !important;
}

/* ============================================================
   Homepage hero collage / scrolling carousel — show full images
   Keep the collage at its original (big) size, but display the
   WHOLE picture of each image instead of cropping it to fill.
   ============================================================ */
.waves-image-gallery-4 {
  object-fit: contain !important;
}

/* Close the gaps so the collage images sit tight together */
.waves-top-grid-gallery-4,
.waves-bottom-gird-gallery-4 {
  grid-column-gap: 0 !important;
  grid-row-gap: 0 !important;
  margin-bottom: 0 !important;
}
.waves-small-image-wrap-gallery-4,
.waves-medium-image-wrap-gallery-4,
.waves-big-image-wrap-gallery-4 {
  height: 100% !important;
}

/* ============================================================
   Hero background image -> black fade
   Fade the bottom of the hero image into the black section below
   (where the collage images sit) for a smooth seam. The image
   itself is untouched; this is just a gradient overlay.
   ============================================================ */
.section-7 {
  position: relative !important;
}
.section-7::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 380px;
  /* Fade to the exact page charcoal (#14130F) so the hero blends
     seamlessly into the section below — no tonal line at the seam. */
  background: linear-gradient(to bottom, rgba(20, 19, 15, 0) 0%, rgba(20, 19, 15, 0.7) 55%, rgba(20, 19, 15, 1) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   Coachella page navbar — match the homepage navbar style:
   dark glass bar, logo centered, green "Coachella California"
   label on the left, hamburger on the right. Scoped to the
   coachella page only (.coachella-body1) so the other pages are
   untouched. Self-contained (no theme dependency).
   ============================================================ */
.coachella-body1 .navbar-coachella {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 78px !important;
  padding: 0 22px !important;
  background-color: rgba(20, 19, 15, 0.85) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(244, 241, 233, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8) !important;
}
.coachella-body1 .navbar-coachella .container-11 {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: 100% !important;
  gap: 14px !important;
  padding: 0 !important;
}
/* logo centered */
.coachella-body1 .coachella-image-brand {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
}
.coachella-body1 .coachella-image-nav {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
}
/* "Coachella, California" label — left, green */
.coachella-body1 .martinez-brothers {
  order: 0 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #8FBE6A !important;
  font-family: 'Oswald', sans-serif !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
/* hamburger right — vertically centered in the bar (Webflow's baked
   float/padding left it floating high, especially on mobile). */
.coachella-body1 .coachella-nav-button {
  order: 5 !important;
  margin-left: auto !important;
  background: transparent !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  width: 44px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  transform: none !important;   /* kill Webflow's baked translateY(-20px) */
  float: none !important;
}
.coachella-body1 .icon-6 {
  color: #F4F1E9 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
/* hide ONLY the leftover duplicate "Feature / Pricing / Resources" navbar
   (.navbar-logo-center wraps BOTH navbars, so hide just the duplicate's
   wrapper .navbar-logo-center-2). */
.coachella-body1 .navbar-logo-center-2 { display: none !important; }

@media screen and (max-width: 600px) {
  .coachella-body1 .navbar-coachella { height: 62px !important; padding: 0 14px !important; }
  .coachella-body1 .coachella-image-brand { height: 38px !important; }
  .coachella-body1 .martinez-brothers {
    font-size: 0.7rem !important;
    letter-spacing: 0.06em !important;
    white-space: normal !important;
    max-width: 42vw !important;
    line-height: 1.0 !important;
  }
}