/* Service-areas page + the ten city pages (Arvada, Lakewood, ...).
   Measured from the live Wix pages at 1440px; builds on the shared classes in site.css. */

/* ---------- Dark image hero ---------- */
.area-hero p { max-width: 980px; margin-top: 13px; }

/* ---------- Image + copy splits ---------- */
.area-split .split-media img { border-radius: 30px; }
.area-split .copy { max-width: 557px; }
.area-split .copy p + p { margin-top: 0; }
.area-why .section-head .h-sec, .area-faq .section-head .h-sec, .area-cta .h-sec { margin-top: 8px; }
.area-split .split-copy .h-sec { max-width: 529px; }
.area-split .split-copy .btn { margin-top: 35px; }

.area-intro { padding: 82px 0 77px; }
.area-intro .split { gap: 38px; }
.area-intro .split-media img { height: 499px; }

.area-services { padding: 76px 0 51px; }
.area-intro .split, .area-lighting .split { align-items: start; }
/* copy column starts at x=143, image at x=733 (1440 viewport); per-city widths/offsets are inline */
.area-services .split.rev { grid-template-columns: 590px 563px; gap: 0; align-items: start; padding-left: 25px; padding-right: 26px; }
.area-services .split-copy .h-sec { max-width: 577px; }
.area-services .lead { margin-top: 15px; }
.area-services .checklist { margin-top: 21px; }
.area-services .checklist li { font-size: 18px; line-height: 32.4px; }
.area-services .checklist li::before { top: 5px; }

.area-lighting { padding: 82px 0 79px; }
.area-lighting .split-media img { height: 530px; }
.area-lighting .split-copy .h-sec { font-size: 40px; line-height: 56px; max-width: 529px; }
.area-lighting .copy { max-width: 549px; }

/* ---------- Why Choose Green Mountain Turf: blobs hanging from icons ---------- */
.area-why { padding: 64px 0 76px; }
.area-why .section-head .lead { max-width: 630px; }
.why-graphic { position: relative; width: 1150px; height: 585px; margin: -72px 0 0 7px; }
.why-graphic .why-bg { position: absolute; left: 0; top: 17px; width: 1150px; height: 568px; }
.why-card { position: absolute; text-align: center; }
.why-card .why-ic {
  position: absolute; width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.why-card.dark .why-ic { background: var(--green); }
.why-card h3 { position: absolute; font-size: 20px; line-height: 28px; }
.why-card p { position: absolute; font-size: 16px; line-height: 22.4px; }
.why-card.dark h3, .why-card.dark p { color: #fff; }
.why-card.c1 .why-ic { left: 104px; top: 0; }
.why-card.c1 h3 { left: 30px; top: 134px; width: 207px; }
.why-card.c1 p { left: 33px; top: 204px; width: 201px; }
.why-card.c2 .why-ic { left: 325px; top: 105px; }
.why-card.c2 h3 { left: 251px; top: 250px; width: 207px; }
.why-card.c2 p { left: 262px; top: 316px; width: 184px; }
.why-card.c3 .why-ic { left: 544px; top: 204px; }
.why-card.c3 h3 { left: 482px; top: 338px; width: 184px; }
.why-card.c3 p { left: 478px; top: 410px; width: 192px; }
.why-card.c4 .why-ic { left: 765px; top: 105px; }
.why-card.c4 h3 { left: 691px; top: 250px; width: 207px; }
.why-card.c4 p { left: 698px; top: 316px; width: 192px; }
.why-card.c5 .why-ic { left: 985px; top: 0; }
.why-card.c5 h3 { left: 922px; top: 134px; width: 184px; }
.why-card.c5 p { left: 918px; top: 206px; width: 207px; }

/* ---------- FAQ (Wix FAQ widget look) ---------- */
.area-faq { padding: 62px 0 74px; }
.area-faq .section-head .lead { max-width: 672px; }
.area-faq .faq { margin-top: 55px; }
.area-faq .faq-item summary { padding: 26px 64px 26px 24px; font-weight: 700; font-size: 18px; line-height: 25.2px; }
.area-faq .faq-item summary::after {
  width: 27px; height: 27px; right: 24px; border: 0;
  background: url("icons/area-faq-closed.svg") center / contain no-repeat;
  transform: translateY(-50%);
}
.area-faq .faq-item[open] summary::after { background-image: url("icons/area-faq-open.svg"); transform: translateY(-50%); }
.area-faq .faq-item .faq-body { padding: 0 24px 40px; font-size: 16px; line-height: 24px; }

/* ---------- Call to action band ---------- */
.area-cta { padding: 82px 0 83px; }
.area-cta .lead { max-width: 980px; }
.area-cta .cta-actions { margin-top: 42px; }

/* ---------- Service areas page: map + intro ---------- */
.area-map { position: relative; height: 500px; background: #e5e3df; }
.area-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.area-sa-intro { padding: 81px 0 78px; }
.area-sa-intro .split { gap: 37px; }
.area-sa-intro .split-media img { height: 483px; }
.area-sa-intro .split-copy .h-sec { max-width: 500px; }

/* Live Wix sections have fixed heights per page; --h carries them (desktop only). */
@media (min-width: 981px) {
  .area-intro, .area-why, .area-services, .area-lighting, .area-faq, .area-cta { min-height: var(--h, auto); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .area-services .split.rev { grid-template-columns: 1fr 1fr; padding-left: 20px; padding-right: 20px; }
  .area-intro .split, .area-lighting .split, .area-sa-intro .split { grid-template-columns: 1fr 1fr; }
  .why-graphic {
    width: auto; height: auto; margin: 60px 0 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 56px 20px;
  }
  .why-graphic .why-bg { display: none; }
  .why-card { position: relative; background: var(--green); border-radius: 60px; padding: 52px 18px 34px; }
  .why-card.dark { background: #000; }
  .why-card h3, .why-card p { position: static; width: auto !important; }
  .why-card .why-ic { position: absolute; width: 58px; height: 58px; left: 50% !important; top: -29px !important; transform: translateX(-50%); }
  .why-card p { margin-top: 12px; }
}
@media (max-width: 980px) {
  .area-intro .split, .area-lighting .split, .area-sa-intro .split, .area-services .split.rev { grid-template-columns: 1fr; gap: 40px; }
  .area-services .split-media { order: -1; }
  .area-split .split-copy, .area-split .split-media img { margin-top: 0 !important; }
  .area-services .split-media img { height: auto !important; }
  .area-split .split-media img { height: auto; aspect-ratio: 563 / 499; }
  .area-intro, .area-services, .area-lighting, .area-sa-intro, .area-why, .area-faq, .area-cta { padding: 56px 0; }
  .area-lighting .split-copy .h-sec { font-size: 32px; line-height: 44px; }
  .area-map { height: 380px; }
}
@media (max-width: 620px) {
  .area-hero { min-height: 320px; padding: 40px 0; }
  .area-lighting .split-copy .h-sec { font-size: 28px; line-height: 38px; }
  .area-faq .faq-item summary { font-size: 16px; padding: 20px 52px 20px 18px; }
  .area-faq .faq-item summary::after { right: 16px; }
  .area-faq .faq-item .faq-body { padding: 0 18px 24px; }
  .area-cta .btn { white-space: normal; text-align: center; }
}