/* Green Mountain Turf — About, Services and the five service pages.
   Loaded after site.css via "css": ["services"] in the page meta.
   Geometry measured on the live Wix pages at a 1440px viewport. */

/* ---------- Shared tweaks for these pages ---------- */
.svc-includes .section-head .h-sec,
.svc-process .section-head .h-sec,
.svc-faq-sec .section-head .h-sec { margin-top: 8px; }
.svc-hero p { max-width: 980px; margin-top: 13px; }
.svc-hero.tall { min-height: 411px; }

/* ---------- Intro split (copy left, photo right) ---------- */
.svc-intro { padding: 76px 0 75px; }
.svc-intro .split.rev { grid-template-columns: 1fr 563px; gap: 33px; }
.svc-intro .split-copy { padding-left: 5px; }
.svc-intro .split-media { margin-right: 6px; }
.svc-intro .split-copy .btn { margin-top: 30px; min-width: 228px; }
.svc-intro .split-media img,
.svc-why .split-media img { border-radius: 30px; }

/* ---------- "Why choose" split (photo left, copy right) ---------- */
.svc-why { padding: 81px 0; }
.svc-why .split { grid-template-columns: 563px 1fr; gap: 37px; }
.svc-why .split-media { margin-left: 3px; }
.svc-why .checklist { margin-top: 32px; }
.svc-why .checklist li { font-size: 18px; line-height: 32.4px; }

/* ---------- "What X includes": diamond lattice ---------- */
/* The lattice (five green-framed diamonds joined by black connectors) is the live site's own SVG. */
.svc-includes { padding: 70px 0 61px; }
.diamonds {
  position: relative;
  width: 1169px; height: 549px;
  margin: 61px auto 0;
  background: url("icons/svc-diamonds.svg") 0 0 / 1169px 549px no-repeat;
}
.tile {
  position: absolute;
  top: calc(var(--top) - 11px);
  width: 250px; margin-left: -125px;
  text-align: center;
}
.tile::before { content: ""; display: block; width: 29px; height: 3px; margin: 0 auto 8px; background: var(--green); }
.tile h3 { width: calc(var(--tw) + 4px); max-width: 100%; margin: 0 auto; font-size: 20px; line-height: 28px; }
.tile p { width: calc(var(--dw) + 2px); max-width: 100%; margin: 10px auto 0; font-size: 16px; line-height: 22.4px; }
.tile.t1 { left: 379px; }
.tile.t2 { left: 793.5px; }
.tile.t3 { left: 166.5px; }
.tile.t4 { left: 582.5px; }
.tile.t5 { left: 1001.5px; }

/* ---------- "Our Process": four cards from the live process SVG ---------- */
.svc-process { padding: 72px 0 70px; }
.steps {
  display: grid;
  grid-template-columns: 240px 68px 240px 69px 240px 68px 240px;
  width: 1166px; height: 371px;
  margin: 65px auto 0; padding: 0;
  list-style: none;
  background: url("icons/svc-process.svg") 0 0 / 1166px 371px no-repeat;
}
.step { position: relative; height: 371px; text-align: center; }
.step .num {
  display: block; margin-top: 5px;
  font-family: var(--font-head); font-weight: 800; font-size: 40px; line-height: 56px; color: #000;
}
.step h3, .step p { position: absolute; left: 50%; transform: translateX(-50%); }
.step h3 { top: 96px; width: calc(var(--tw) + 4px); font-size: 20px; line-height: 28px; }
.step p { top: 166px; width: calc(var(--dw) + 2px); font-size: 16px; line-height: 22.4px; }
.step-arrow { display: flex; justify-content: center; padding-top: 195px; }
.step-arrow img { width: 22px; height: 14px; transform: rotate(90deg); }

/* ---------- FAQ accordion ---------- */
.svc-faq-sec { padding: 62px 0 42px; }
.svc-faq { max-width: 1075px; margin-top: 54px; gap: 12px; }
.svc-faq .faq-item { border: 1px solid var(--green); }
.svc-faq .faq-item summary {
  padding: 26px 76px 26px 24px;
  font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 25.2px;
}
.svc-faq .faq-item summary::after {
  right: 24px; width: 27px; height: 27px;
  border: 0; transform: translateY(-50%);
  background: url("icons/svc-faq-closed.svg") center / contain no-repeat;
}
.svc-faq .faq-item[open] summary::after { transform: translateY(-50%); background-image: url("icons/svc-faq-open.svg"); }
.svc-faq .faq-body { padding: 0 24px 40px; font-size: 16px; line-height: 24px; }
.svc-faq .faq-body p + p { margin-top: 24px; }

/* ---------- Call to action band ---------- */
.svc-cta { padding: 82px 0 84px; }
.svc-cta .h-sec { margin-top: 7px; }
.svc-cta .lead { margin-top: 13px; }
.svc-cta .cta-actions { gap: 17px; margin-top: 42px; }
.svc-cta .btn { min-width: 199px; }

/* ---------- Sprinkler Upgrades: "Save Water. Save Money." (photo is the section background) ---------- */
.svc-rebates { position: relative; min-height: 560px; background: #000; overflow: hidden; }
.svc-rebates > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.svc-rebates .container { position: relative; padding-top: 90px; padding-bottom: 90px; }
.svc-rebates-copy { max-width: 599px; margin-left: 61px; }
.svc-rebates .h-sec { margin: 0; color: #fff; }
.svc-rebates .copy { margin-top: 14px; }
.svc-rebates .copy p { color: #fff; }
.svc-rebates .copy p + p { margin-top: 0; }
.svc-rebates .copy a { text-decoration: underline; }
.svc-rebates .copy a:hover { color: var(--green); }
.svc-rebates .btn { margin-top: 30px; min-width: 228px; }

/* ---------- Sprinkler Upgrades: Rainbird R-VAN nozzles ---------- */
.svc-rvan { padding: 46px 0 74px; }
.svc-rvan .container { display: grid; grid-template-columns: 550px 1fr; gap: 64px; align-items: start; }
.svc-rvan-media img { width: 550px; height: 463px; object-fit: cover; }
.svc-rvan .h-sec { max-width: 475px; margin-top: 26px; }
.svc-rvan .copy { margin-top: 11px; }
.svc-rvan .copy p + p { margin-top: 0; }

/* ---------- Services page ---------- */
.svc-cards-sec { padding: 66px 0 69px; }

/* ---------- Responsive ---------- */
@media (max-width: 1219px) {
  /* Lattice: each item becomes its own green-framed diamond */
  .diamonds { display: flex; flex-wrap: wrap; justify-content: center; width: auto; height: auto; background: none; }
  .tile {
    position: relative; top: auto; left: auto !important; margin: -24px 0;
    width: 360px; height: 360px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    isolation: isolate;
  }
  .tile::after {
    content: ""; position: absolute; inset: 52px; z-index: -1;
    border: 11px solid var(--green); border-radius: 18px; background: #f5f5f5;
    transform: rotate(45deg);
  }
  .tile h3 { width: min(calc(var(--tw) + 4px), 190px); }
  .tile p { width: min(calc(var(--dw) + 2px), 190px); }
  .diamonds { padding: 24px 0; }

  /* Process: cards wrap; each card shows its own slice of the process SVG */
  .steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; width: auto; height: auto; background: none; }
  .step { width: 240px; background: url("icons/svc-process.svg") 0 0 / 1166px 371px no-repeat; }
  .step.s2 { background-position: -308px 0; }
  .step.s3 { background-position: -617px 0; }
  .step.s4 { background-position: -925px 0; }
  .step p { width: min(calc(var(--dw) + 2px), 236px); }
  .step-arrow { display: none; }

  .svc-rvan .container { grid-template-columns: 1fr 1fr; gap: 40px; }
  .svc-rvan-media img { width: 100%; height: auto; aspect-ratio: 550 / 463; }
}
@media (max-width: 980px) {
  .svc-intro .split.rev, .svc-why .split { grid-template-columns: 1fr; gap: 40px; }
  .svc-intro .split-copy { padding-left: 0; }
  .svc-intro .split-media, .svc-why .split-media { margin: 0; }
  .svc-intro .split-media img, .svc-why .split-media img { height: auto !important; aspect-ratio: 563 / 499; }
  .svc-rebates > .bg { object-position: 25% 50%; }
  .svc-rebates::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .5); }
  .svc-rebates .container { z-index: 2; padding-top: 64px; padding-bottom: 64px; }
  .svc-rebates-copy { margin-left: 0; }
  .svc-rvan .container { grid-template-columns: 1fr; }
  .svc-rvan .h-sec { margin-top: 0; }
}
@media (max-width: 620px) {
  .svc-intro, .svc-why { padding: 56px 0; }
  .svc-includes, .svc-process, .svc-cta, .svc-faq-sec { padding-top: 56px; padding-bottom: 56px; }
  .svc-hero p { font-size: 16px; line-height: 22.4px; }
  .svc-faq .faq-item summary { padding: 20px 56px 20px 16px; font-size: 16px; line-height: 22.4px; }
  .svc-faq .faq-item summary::after { right: 16px; }
  .svc-faq .faq-body { padding: 0 16px 24px; }
  .svc-cta .btn { min-width: 0; }
  .tile { width: 340px; height: 340px; margin: -22px 0; }
  .tile::after { inset: 50px; }
  .tile h3 { width: min(calc(var(--tw) + 4px), 170px); font-size: 18px; line-height: 25px; }
  .tile p { width: min(calc(var(--dw) + 2px), 180px); font-size: 15px; line-height: 21px; }
}