/* =========================================================================
   Landscape Services hub.

   Values transcribed from final_html/Landscape Services Hub.dc.html.

   NOTE: three blocks here share a NAME with the installation pages but not a
   style — the towns panel is light sage rather than pine, the commercial lane
   is pine rather than the lighter green, and the steps are ruled columns
   rather than cards. Hence its own `svc-*` namespace; do not fold these into
   the `inst-*` rules.
   ========================================================================= */

.svc-lead {
  font-size: 17px; line-height: 1.7; color: #3A4A40;
  max-width: 820px; margin: 0 auto !important; text-align: center;
  text-wrap: pretty;
}

/* ---- What We Install ---------------------------------------------------- */
.svc-install { margin-top: 52px; }
.svc-install h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px; font-weight: 700; color: #2C2218; margin: 0; text-align: center;
}

/* Same card component as the Products hub, one step larger in this build. */
.cat-grid-3--svc { gap: 20px; }
.cat-card--svc .cat-card__thumb { height: 186px; }
.cat-card--svc .cat-card__body { padding: 20px 22px 22px; gap: 8px; }
.cat-card--svc .cat-card__name { font-size: 21px; }
.cat-card--svc .cat-card__arrow { font-size: 18px; }
.cat-card--svc .cat-card__desc { font-size: 13.5px; line-height: 1.55; }

/* ---- Rather not do it yourself? ---------------------------------------- */
/* Centred sage panel. No gold left rule — that belongs to the installation
   pages' version of this block, which is a different treatment. */
.svc-rather {
  background: #EAF3EC; border: 1px solid #C8E6D8; border-radius: 12px;
  padding: 40px 44px; margin-top: 56px;
  max-width: 900px; margin-left: auto; margin-right: auto;
}
.svc-rather h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px; font-weight: 700; color: #2C2218; margin: 0;
}
.svc-rather p {
  font-size: 15px; line-height: 1.75; color: #3A4A40;
  margin: 12px 0 0 !important; text-wrap: pretty;
}

/* ---- How It Works — ruled columns, gap 0 -------------------------------- */
.svc-steps { margin-top: 56px; }
.svc-steps h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px; font-weight: 700; color: #2C2218; margin: 0; text-align: center;
}
.svc-steps__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-top: 32px;
}
.svc-step { padding: 0 26px; border-left: 2px solid #E0DACE; }
.svc-step__num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px; font-weight: 700; color: #F7B51C;
}
.svc-step p {
  font-size: 14.5px; line-height: 1.65; color: #4A3F35;
  margin: 12px 0 0 !important; text-wrap: pretty;
}

/* ---- Where We Work — light sage on this page --------------------------- */
.svc-towns {
  background: #EAF3EC; border: 1px solid #C8E6D8; border-radius: 12px;
  padding: 36px 40px; margin-top: 56px; text-align: center;
}
.svc-towns__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #3A6B52;
}
.svc-towns h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px; font-weight: 700; color: #2D5441; margin: 12px 0 0;
}
.svc-towns__pills {
  display: flex; align-items: center; justify-content: center;
  gap: 10px 12px; flex-wrap: wrap; margin-top: 20px;
}
.svc-town {
  background: #2D5441; border: 1px solid #234135; color: #C8E6D8;
  font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 99px;
}

@media (max-width: 1024px) {
  .cat-grid-3--svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

@media (max-width: 767px) {
  .svc-lead { font-size: 15.5px; }
  .svc-install { margin-top: 40px; }
  .svc-install h2 { font-size: 28px; }
  .cat-grid-3--svc { grid-template-columns: 1fr; }
  .svc-rather { padding: 26px 20px; margin-top: 40px; }
  .svc-rather h2 { font-size: 23px; }
  .svc-steps { margin-top: 40px; }
  .svc-steps h2 { font-size: 26px; }
  .svc-steps__grid { grid-template-columns: 1fr; row-gap: 22px; }
  /* A left rule on a single stacked column reads as a stray line. */
  .svc-step { padding: 0 0 0 18px; }
  .svc-towns { padding: 28px 20px; margin-top: 40px; }
  .svc-towns h2 { font-size: 22px; }
}