/* =========================================================
   SERVICE PAGES — Shared Stylesheet
   ========================================================= */

/* =========================================================
   NAV FIXES — force correct show/hide behavior
   ========================================================= */
@media (max-width: 768px) {
  .nav__links { display: none !important; }
  .nav__hamburger { display: flex !important; }
}
@media (min-width: 769px) {
  .nav__mobile:not(.open) { display: none !important; }
  .nav__hamburger { display: none !important; }
  .nav__links { display: flex !important; }
}

/* Hero */
.sp-hero {
  background: linear-gradient(rgba(10,25,10,.72), rgba(10,25,10,.72)),
              url('Images Landscaping/hero-patio.webp') center/cover no-repeat;
  padding: 140px 0 80px;
  text-align: center;
}
.sp-hero__eyebrow {
  color: #4ade80;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.sp-hero h1 {
  font-family: 'Russo One', sans-serif;
  font-size: clamp(1.75rem, 5vw, 3rem);
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.sp-hero p {
  color: rgba(255,255,255,.8);
  font-size: 1.05rem;
  max-width: 580px;
  margin: 0 auto 2rem;
}
.sp-hero__btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.sp-hero__trust {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}
.sp-hero__trust span {
  color: rgba(255,255,255,.7);
  font-size: .85rem;
}

/* Section headers */
.sp-section-header {
  text-align: center;
  margin-bottom: 3rem;
}
.sp-section-header h2 {
  margin-top: .5rem;
}
.sp-section-header p {
  max-width: 600px;
  margin: .75rem auto 0;
  color: #4a5568;
}

/* Feature cards grid */
.sp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.sp-card {
  background: #f0f0eb;
  border-radius: 12px;
  padding: 1.75rem;
}
.sp-card__icon {
  font-size: 1.75rem;
  margin-bottom: .75rem;
}
.sp-card h3 {
  font-size: 1.05rem;
  margin-bottom: .5rem;
}
.sp-card p {
  color: #4a5568;
  font-size: .92rem;
  line-height: 1.6;
}

/* Process steps */
.sp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.sp-step {
  text-align: center;
  padding: 1.5rem 1rem;
}
.sp-step__num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1a5c12;
  color: #fff;
  font-family: 'Russo One', sans-serif;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.sp-step h3 {
  font-size: .95rem;
  margin-bottom: .4rem;
}
.sp-step p {
  color: #4a5568;
  font-size: .88rem;
  line-height: 1.55;
}

/* Dark section (service area) */
.sp-dark {
  background: #1a3318;
  color: #fff;
  text-align: center;
}
.sp-dark h2 { color: #fff; margin-bottom: 1rem; }
.sp-dark p { color: rgba(255,255,255,.75); max-width: 600px; margin: 0 auto 2rem; }
.sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}
.sp-chip {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .35rem 1.1rem;
  font-size: .875rem;
}

/* FAQ */
.sp-faq {
  max-width: 760px;
  margin: 0 auto;
}

/* Pricing cards */
.sp-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto 1.5rem;
}
.sp-price-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.4rem 1rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.sp-price-card h3 {
  font-size: .95rem;
  color: #1a5c12;
  margin-bottom: .4rem;
}
.sp-price-card .price {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.sp-price-card small {
  color: #4a5568;
  font-size: .8rem;
}

/* btn--outline override for dark bg */
.sp-btn-outline {
  border: 2px solid rgba(255,255,255,.4);
  color: #fff;
  background: transparent;
  padding: .875rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: border-color .2s;
}
.sp-btn-outline:hover { border-color: #fff; }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 640px) {
  .sp-hero {
    padding: 90px 1rem 48px;
  }
  .sp-hero h1 {
    font-size: 1.6rem;
  }
  .sp-hero p {
    font-size: .95rem;
  }
  .sp-hero__btns {
    flex-direction: column;
    align-items: center;
  }
  .sp-hero__btns .btn,
  .sp-hero__btns .sp-btn-outline {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
  .sp-hero__trust {
    gap: .75rem;
  }
  .sp-cards {
    grid-template-columns: 1fr;
  }
  .sp-steps {
    grid-template-columns: 1fr 1fr;
  }
  .sp-pricing {
    grid-template-columns: 1fr 1fr;
  }
  .sp-chip {
    font-size: .8rem;
    padding: .3rem .9rem;
  }
  .sp-section-header h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 400px) {
  .sp-steps {
    grid-template-columns: 1fr;
  }
  .sp-pricing {
    grid-template-columns: 1fr;
  }
}