html {
  overflow-x: hidden;
}

.services-page {
  --services-pine: #060807;
  --services-ivory: #F2EFE6;
  --services-rust: #A84B29;
  --home-ink: #060807;
  --home-ink-soft: #060807;
  --home-cream: #F2EFE6;
  --home-muted: #F2EFE6;
  --home-rust: #A84B29;
  --home-rust-dark: #A84B29;
  --home-line: #F2EFE6;
  background: var(--services-pine);
  color: var(--services-ivory);
  overflow-x: hidden;
  width: 100%;
}

.services-page main,
.services-hero,
.service-section {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.services-page .home-header {
  background: var(--services-pine);
  position: relative;
}

.services-page .home-brand img {
  display: none;
}

.services-page .home-brand__name small,
.services-page .mobile-menu nav a span {
  color: var(--services-rust);
}

.services-page .desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.services-page .home-footer {
  background: var(--services-pine);
  border-top-color: var(--services-ivory);
  color: var(--services-ivory);
}

.services-hero {
  background: var(--services-pine);
  color: var(--services-ivory);
  min-height: 0;
  overflow: hidden;
}

.services-hero__copy {
  align-content: center;
  display: grid;
  margin: 0 auto;
  max-width: 1360px;
  padding: clamp(68px, 7vw, 108px) clamp(42px, 7vw, 112px) clamp(72px, 7.5vw, 108px);
  width: 100%;
}

.services-eyebrow,
.service-number {
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0;
  text-transform: uppercase;
}

.services-eyebrow,
.services-eyebrow--rust,
.service-number {
  color: var(--services-rust);
}

.services-eyebrow {
  margin-bottom: 20px;
}

.services-page h1,
.services-page h2,
.services-page h3 {
  font-family: var(--home-narrow);
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.services-hero h1 {
  color: var(--services-ivory);
  font-size: clamp(3.25rem, 4.55vw, 5.45rem);
  letter-spacing: -0.035em;
  line-height: 0.83;
}

.service-section {
  background: var(--services-ivory);
  color: var(--services-pine);
  padding: 92px clamp(24px, 7vw, 112px) 0;
  position: relative;
}

.service-section + .service-section::before {
  background: var(--services-pine);
  content: "";
  height: 1px;
  left: 50%;
  max-width: 1220px;
  opacity: 0.18;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: calc(100% - clamp(48px, 14vw, 224px));
}

.service-section:last-of-type {
  padding-bottom: 96px;
}

.service-section__inner {
  align-items: start;
  column-gap: clamp(60px, 7.5vw, 116px);
  display: grid;
  grid-template-columns: minmax(270px, 0.76fr) minmax(520px, 1.24fr);
  margin: 0 auto;
  max-width: 1220px;
  width: 100%;
}

.service-heading {
  align-self: start;
  display: grid;
  gap: 16px;
  margin: 0;
  min-width: 0;
}

.service-number {
  padding: 0;
}

.service-heading > div {
  min-width: 0;
}

.service-heading h2 {
  border-bottom: 1px solid var(--services-pine);
  color: var(--services-pine);
  font-size: clamp(2.9rem, 4.6vw, 5rem);
  letter-spacing: -0.035em;
  line-height: 0.88;
  padding-bottom: 24px;
}

.service-body {
  align-self: start;
  max-width: 700px;
  min-width: 0;
  width: 100%;
}

.service-copy,
.landscaping-copy,
.seasonal-rows,
.section-actions {
  margin-left: 0;
  margin-right: 0;
  max-width: 700px;
  width: 100%;
}

.service-copy,
.landscaping-copy {
  border: 0;
  padding: 0;
}

.service-copy p,
.landscaping-copy p,
.seasonal-row p,
.service-heading__intro {
  color: var(--services-pine);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  max-width: 700px;
}

.service-copy p,
.landscaping-copy p {
  margin: 0;
}

.service-body > .services-eyebrow {
  margin: 0 0 16px;
}

/* The eyebrow used to be inert label text with the actual "Start Service"
   action buried at the bottom of the section, past the full description.
   The action now sits right next to the eyebrow, near the top. */
/* One ask per service section (owner, 2026-08-27). This used to be a
   space-between row holding the eyebrow AND a rust "Start Service" link,
   which wrapped into a stacked pile at tablet widths and, at any width,
   asked for two different things while the button below asked for a
   third. The link is gone; the eyebrow now sits alone as context. */
.service-eyebrow-line {
  margin: 0 0 16px;
}

.service-eyebrow-line > .services-eyebrow {
  margin: 0;
}

.service-lede {
  color: var(--services-pine);
  font-family: var(--home-narrow);
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: 0.02em;
  line-height: 1.06;
  margin: 0 0 16px;
  max-width: 680px;
  text-transform: uppercase;
}

.service-heading__intro {
  margin: 0 0 26px;
}

.seasonal-rows {
  border-top: 1px solid var(--services-pine);
}

.seasonal-row {
  border-bottom: 1px solid var(--services-pine);
  display: grid;
  gap: 9px;
  grid-template-columns: 1fr;
  min-height: 0;
  padding: 22px 0 24px;
}

.seasonal-row h3 {
  color: var(--services-pine);
  font-size: clamp(1.95rem, 2.7vw, 3rem);
  letter-spacing: -0.01em;
  line-height: 0.94;
}

.seasonal-row p {
  margin: 0;
}

.plant-plan-note {
  border-bottom: 1px solid var(--services-pine);
  border-top: 1px solid var(--services-pine);
  margin-top: 26px;
  max-width: 700px;
  padding: 22px 0 20px;
  width: 100%;
}

.plant-plan-note h3 {
  color: var(--services-pine);
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
  letter-spacing: -0.012em;
  line-height: 1;
  max-width: 600px;
}

.plant-plan-note p {
  color: var(--services-pine);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  margin: 11px 0 0;
  max-width: 660px;
}

.plant-plan-note span {
  color: var(--services-rust);
  display: inline-block;
  font-family: var(--home-narrow);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  margin-top: 12px;
  text-transform: uppercase;
}

.section-actions,
.section-actions--light,
.section-actions--landscaping {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: flex-start;
  margin-top: 30px;
}

.services-button {
  align-items: center;
  display: inline-flex;
  font-family: var(--home-narrow);
  font-size: 0.88rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.1em;
  min-height: 52px;
  padding: 11px 21px;
  text-align: center;
  text-transform: uppercase;
}

.services-button--primary,
.services-button--outline,
.services-page a.services-button--primary,
.services-page a.services-button--outline {
  background: var(--services-pine);
  border: 1px solid var(--services-pine);
  color: var(--services-ivory);
}

.services-button--primary:hover,
.services-button--outline:hover {
  background: var(--services-pine);
  color: var(--services-ivory);
}

.services-text-link,
.services-text-link--light,
.services-page a.services-text-link,
.services-page a.services-text-link--light {
  border-bottom: 1px solid var(--services-rust);
  color: var(--services-rust);
  font-family: var(--home-narrow);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  padding: 7px 0 5px;
  text-transform: uppercase;
}

.services-text-link span {
  margin-left: 7px;
}


/* v12 desktop composition refinement — mobile intentionally frozen */
@media (min-width: 841px) {
  .services-hero__copy {
    padding-top: clamp(52px, 5vw, 76px);
    padding-bottom: clamp(56px, 5.2vw, 80px);
  }

  .mowing-section {
    padding-top: 78px;
  }

  .one-time-section {
    padding-top: 70px;
  }

  .seasonal-section {
    padding-top: 84px;
  }

  .landscaping-section {
    padding-top: 78px;
  }

  .service-lede {
    max-width: 610px;
  }

  .service-copy p,
  .landscaping-copy p,
  .service-heading__intro {
    max-width: 625px;
  }

  .seasonal-row p {
    max-width: 610px;
  }

  .section-actions,
  .section-actions--light,
  .section-actions--landscaping {
    gap: 16px;
    margin-top: 24px;
  }

  .services-button {
    font-size: 0.83rem;
    min-height: 48px;
    padding: 10px 18px;
  }

  .services-text-link,
  .services-text-link--light,
  .services-page a.services-text-link,
  .services-page a.services-text-link--light {
    font-size: 0.85rem;
    padding-bottom: 4px;
  }

  .plant-plan-note {
    margin-top: 34px;
    padding: 19px 0 17px;
  }

  .plant-plan-note h3 {
    font-size: clamp(1.5rem, 1.85vw, 1.95rem);
    line-height: 1.01;
    max-width: 545px;
  }

  .plant-plan-note p {
    font-size: 0.98rem;
    line-height: 1.5;
    max-width: 600px;
  }

  .plant-plan-note span {
    margin-top: 10px;
  }
}

@media (max-width: 1040px) and (min-width: 841px) {
  .service-section__inner {
    column-gap: 50px;
    grid-template-columns: minmax(240px, 0.72fr) minmax(450px, 1.28fr);
  }

  .service-heading h2 {
    font-size: clamp(2.8rem, 4.8vw, 4.1rem);
  }
}

@media (max-width: 840px) {
  .services-page .home-header {
    background: var(--services-pine);
    position: relative;
  }

  .services-hero__copy {
    padding: 40px 24px 36px;
  }

  .services-hero h1 {
    font-size: clamp(2.15rem, 9.4vw, 2.8rem);
    line-height: 0.9;
  }

  .services-eyebrow,
  .service-number {
    font-size: 0.66rem;
    letter-spacing: 0.19em;
  }

  /* v13 mobile normalization: every primary service uses the same vertical rhythm. */
  .service-section {
    overflow: hidden;
    padding: 44px 24px 0;
  }

  .service-section:last-of-type {
    padding-bottom: 56px;
  }

  .service-section__inner {
    display: block;
    max-width: 680px;
  }

  .service-heading {
    gap: 8px;
    margin-bottom: 22px;
  }

  .service-heading h2 {
    font-size: clamp(2.1rem, 9.4vw, 2.55rem);
    line-height: 0.9;
    padding-bottom: 16px;
  }

  .service-body {
    max-width: 680px;
  }

  .service-body > .services-eyebrow {
    margin-bottom: 12px;
  }

  .service-copy p,
  .landscaping-copy p,
  .seasonal-row p,
  .service-heading__intro,
  .plant-plan-note p {
    font-size: 0.95rem;
    line-height: 1.52;
  }

  .service-lede {
    font-size: clamp(1.25rem, 5vw, 1.45rem);
    line-height: 1.08;
    margin-bottom: 12px;
  }

  .service-heading__intro {
    margin-bottom: 20px;
  }

  /* Seasonal sub-services stay informative but no longer become a second hierarchy scale. */
  .seasonal-row {
    gap: 7px;
    padding: 18px 0 19px;
  }

  .seasonal-row h3 {
    font-size: 1.48rem;
    line-height: 1;
  }

  /* Plant By Number follows the same secondary-heading scale as Seasonal rows. */
  .plant-plan-note {
    margin-top: 24px;
    padding: 19px 0 18px;
  }

  .plant-plan-note h3 {
    font-size: 1.48rem;
    line-height: 1;
    max-width: 520px;
  }

  .plant-plan-note span {
    font-size: 0.76rem;
    margin-top: 10px;
  }

  /* Every service ends with the same mobile CTA order and spacing. */
  .section-actions,
  .section-actions--light,
  .section-actions--landscaping {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    margin-top: 24px;
  }

  .services-button {
    font-size: 0.79rem;
    letter-spacing: 0.08em;
    max-width: 100%;
    min-height: 50px;
    padding-left: 14px;
    padding-right: 14px;
    width: 100%;
  }

  .services-text-link,
  .services-text-link--light {
    align-self: flex-start;
    font-size: 0.82rem;
  }
}

@media (max-width: 390px) {
  .services-hero h1 {
    font-size: 2.15rem;
  }

  .service-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Closing reference line to the published rates. Formatted to match the
   price list's own closing line: ivory field, a rule that reads as the end
   of the page's content, big condensed type. It previously sat in its own
   pine band directly above the pine footer, which made it look like a
   stray line inside the footer rather than the end of the page. */
.services-closing {
  background: var(--services-ivory, #F2EFE6);
  padding: 0 clamp(20px, 5vw, 72px) clamp(46px, 5vw, 68px);
}

.services-closing__line {
  border-top: 2px solid var(--services-pine, #060807);
  margin: 0 auto;
  max-width: 1200px;
  padding-top: 22px;
}

.services-closing__line a {
  color: var(--services-pine, #060807);
  font-family: var(--home-narrow);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.services-closing__line a span {
  color: var(--services-rust, #A84B29);
}

.services-closing__line a:hover {
  color: var(--services-rust, #A84B29);
}

.services-closing__line a:focus-visible {
  outline: 3px solid var(--services-rust, #A84B29);
  outline-offset: 4px;
}

/* One heading + one paragraph per section (owner, 2026-08-27). The seasonal
   rows and the Plant By Number aside each carried their own rules, which
   stacked into a ladder of black lines down the section. */
.service-subhead {
  color: var(--services-pine);
  font-family: var(--home-narrow);
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 26px 0 10px;
  text-transform: uppercase;
}

.service-copy-single {
  color: var(--services-pine);
  font-family: var(--home-regular);
  font-size: 1rem;
  line-height: 1.62;
  margin: 0;
  max-width: 680px;
}

/* Two clear spaces below the pricing button before the section ends. */
.section-actions {
  margin-bottom: clamp(28px, 3.5vw, 44px);
}