html {
  overflow-x: hidden;
}

.services-page {
  --services-pine: #060807;
  --services-ivory: #F2EFE6;
  --services-rust: #A84B29;
  /* Section eyebrows are sage; rust means clickable (owner, 2026-09-07).
     Same decision as home.css, applied here because the confusion is not
     homepage-only: an eyebrow and a text link were the same rust, the same
     size and the same tracking on every page. Her words on the two rejected
     alternatives: the underline was "old school ugly", and dropping rust
     from eyebrows was out because "I wanna leave the eyebrow color rust I
     like it" -- green was her own idea and keeps rust to one meaning. */
  --services-eyebrow-c: #93a886;
  --home-ink: #060807;
  --home-ink-soft: #060807;
  --home-cream: #F2EFE6;
  --home-muted: #F2EFE6;
  --home-rust: #A84B29;
  --home-rust-dark: #A84B29;
  /* Ivory at 23%, as on the home page -- NOT solid #F2EFE6, which is what
     this was. The token drives four separate rules (the header's bottom
     edge, the footer's top edge, and both dividers in the mobile menu), so
     overriding it to a full-strength ivory turned every one of them into a
     hard white rule on pine. A hairline is the intent; a rule is not. */
  --home-line: rgba(242, 239, 230, 0.23);
  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);
  /* The hairline under the header, as on the home page. It was removed
     outright when the owner flagged it -- but what was wrong with it was its
     WEIGHT: this stylesheet had redefined --home-line to a solid ivory, so
     the header carried a hard white rule instead of a 23% hairline. The
     token is fixed above, so the border can simply come back, and the top of
     every page matches again. */
  border-bottom: 1px solid var(--home-line);
  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);
}

/* Geometry and type copied from .inner-hero in inner-pages.css, value for
   value. Services is the last page with its own hero component, and it was
   the last page whose band was a different height (357px against everyone
   else's 300) and whose headline was a different size. The owner: make it
   "consistent with every other one ... the home page should be only outlyer".
   test/heroParity.test.js fails if these two drift apart again. */
.services-hero {
  align-items: end;
  background: var(--services-pine);
  color: var(--services-ivory);
  display: grid;
  min-height: 300px;
  overflow: hidden;
}

.services-hero__copy {
  margin: 0 auto;
  max-width: 1360px;
  padding: clamp(64px, 6.2vw, 94px) clamp(24px, 7vw, 112px) clamp(70px, 6.5vw, 98px);
  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-eyebrow-c);
}

.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(4rem, 6.1vw, 7rem);
  letter-spacing: -0.035em;
  line-height: 0.84;
  max-width: 980px;
}

.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);
  /* One H2 size per role site-wide (owner's font inventory, dispatched
     2026-08-30): these are section headings like every inner page's, so
     they use the inner spec, not a private 4.6vw. */
  font-size: clamp(2.7rem, 4.2vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 0.9;
  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);
  /* One lede style site-wide (owner's font inventory, dispatched
     2026-08-30): the four service ledes ran uppercase-regular at their
     own size while every other page's lede -- including this page's own
     closing -- is bold sentence case at the inner spec. */
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.03;
  margin: 0 0 16px;
  max-width: 680px;
}

.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 {
  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: 58px 24px 66px;
  }

  .services-hero h1 {
    font-size: clamp(3.3rem, 13.5vw, 5.4rem);
    line-height: 0.86;
  }

  .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;
  }

  /* OWNER 2026-09-05, on the phone: "is the spacing funky on the mobile site
     on this page?" It was two rules doing one job. Each section opens with a
     hairline across the top AND the heading carries its own underline, and in
     one column those land about 70px apart with nothing between them but the
     number and the title -- the same doubled-rule pattern the pricing page
     had this morning. On the desktop layout the underline sits in the heading
     COLUMN and the top rule is the only thing separating two tall sections,
     so it stays there; here the underline is already full width and says the
     same thing. */
  .service-section + .service-section::before {
    display: none;
  }

  .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 {
    /* Same mobile metrics the closing lede already used -- one lede
       style at every width, not just desktop. */
    font-size: clamp(1.45rem, 5.8vw, 1.95rem);
    line-height: 1.06;
    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) {
  /* The headline no longer shrinks again here. It was 2.15rem against every
     other page's 3.3rem, which is where Services' odd-one-out feeling came
     from at phone size; the shared rule at 840px handles it. */
  .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. */
/* OWNER 2026-08-30: "the bottom should be the same ... on the bottom of
   every page." The site-standard closing -- the black band pricing and FAQ
   end on -- with values copied from .inner-hero/.inner-contact-title, since
   this page does not load inner-pages.css. */
.services-exact {
  align-items: end;
  background: var(--services-pine, #060807);
  color: var(--services-ivory, #F2EFE6);
  display: grid;
  min-height: 300px;
}

.services-exact__copy {
  margin: 0 auto;
  max-width: 1360px;
  padding: clamp(64px, 6.2vw, 94px) clamp(24px, 7vw, 112px) clamp(70px, 6.5vw, 98px);
  width: 100%;
}

.services-exact__eyebrow {
  color: var(--services-eyebrow-c, #93a886);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

/* Same numbers as .inner-contact-title -- the owner compared the four
   closing bands side by side (2026-08-30) and this one was the odd one out:
   64px title against 78px everywhere else. Copied values drift; these are
   now pinned by test/closingParity.test.js. */
.services-exact__title {
  color: var(--services-ivory, #F2EFE6);
  font-family: var(--home-narrow);
  font-size: clamp(4rem, 6.1vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.84;
  margin: 0;
  max-width: 980px;
  text-transform: uppercase;
}

@media (max-width: 840px) {
  .services-exact__title {
    font-size: clamp(3.3rem, 13.5vw, 5.4rem);
    line-height: 0.86;
  }
}

/* The address row below the band follows the page's own numbered-section
   layout -- except where that layout disagrees with the standard closing.
   Scoped to .services-closing so the numbered service sections above keep
   the page's own sizes; here, the heading, lede and links carry the exact
   values of .inner-row__heading h2, .inner-lede and .pr-note, so the four
   closings read as one component. */
.services-closing {
  background: var(--services-ivory, #F2EFE6);
}

.services-closing .service-heading h2 {
  font-size: clamp(2.7rem, 4.2vw, 4.6rem);
  line-height: 0.9;
  padding-bottom: 22px;
}

/* The closing lede now differs from the base only in width -- the type
   metrics unified into .service-lede itself (owner's font inventory). */
.services-closing .service-lede {
  margin: 0 0 18px;
  max-width: none;
}

/* The links line is .pr-note verbatim: small, regular, rust, underlined. */
.services-closing__line {
  column-gap: 30px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
}

.services-closing__line {
  color: var(--services-pine, #060807);
  font-family: var(--home-regular);
  font-size: 0.95rem;
  line-height: 1.58;
  margin: 16px 0 0;
  max-width: 720px;
}

/* The address box, copied from .pr-finder in inner-pages.css because THIS
   PAGE DOES NOT LOAD THAT SHEET -- services/ loads home.css and services.css
   only. The same reason .services-closing__line exists as a copy of .pr-note.
   Owner, 2026-09-05: "its missing the address box on the mobile site." It was
   missing at every width; this was the one closing block on the site that
   offered a link to the calculator where the other six offer the box. */
.pr-finder {
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--services-pine, #060807) 30%, transparent);
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  max-width: 620px;
}

.pr-finder__input {
  background: transparent;
  border: 0;
  color: var(--services-pine, #060807);
  flex: 1 1 240px;
  font-family: var(--home-sans);
  font-size: 1.02rem;
  min-height: 60px;
  min-width: 0;
  outline: none;
  padding: 14px 18px;
}

.pr-finder__input::placeholder {
  color: #6b6e68;
}

/* No focus treatment on the box itself (owner, 2026-08-30). */
/* Chrome paints its own pale wash inside any field it recognises as an
   address, and it beats a stylesheet that does not name the state. The
   calculator's boxes were fixed on 2026-09-01; these -- the closing address
   box on every inner page -- never were, which is why the owner saw it "again"
   on 2026-09-05. This ground is opaque cream, so the fix is the calculator's
   verbatim: fill the field with the page's own colour and keep the site's one
   text-box treatment. */
.pr-finder__input:-webkit-autofill,
.pr-finder__input:-webkit-autofill:hover,
.pr-finder__input:-webkit-autofill:focus,
.pr-finder__input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--services-pine, #060807);
  -webkit-box-shadow: 0 0 0 1000px var(--services-ivory, #F2EFE6) inset;
  box-shadow: 0 0 0 1000px var(--services-ivory, #F2EFE6) inset;
  caret-color: var(--services-pine, #060807);
  /* The fill colour never gets to animate in. */
  transition: background-color 100000s ease-in-out 0s;
}

.pr-finder__submit {
  background: var(--services-rust, #A84B29);
  border: 0;
  color: var(--services-ivory, #F2EFE6);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--home-narrow);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  min-height: 60px;
  padding: 14px 26px;
  text-transform: uppercase;
}

.pr-finder__submit:hover {
  background: #8f3f22;
}

.pr-finder__submit:focus-visible {
  outline: 3px solid var(--services-pine, #060807);
  outline-offset: 2px;
}

@media (max-width: 840px) {
  .pr-finder {
    max-width: none;
  }

  .pr-finder__input,
  .pr-finder__submit {
    flex: 1 1 100%;
  }
}

/* OWNER 2026-09-05: "on the mobile site the links should be stacked." They
   wrapped, so where they broke depended on how long each happened to be --
   two on one line, one on the next. Nothing chose those pairings. One per
   line on a phone, with room between them to be separate tap targets. */
@media (max-width: 700px) {
  .services-closing__line {
    display: grid;
    justify-items: start;
    row-gap: 12px;
  }
}

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

.services-closing__line a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

@media (max-width: 840px) {
  .services-closing .service-heading h2 {
    font-size: clamp(2.2rem, 8.4vw, 3.2rem);
    line-height: 0.94;
    padding-bottom: 16px;
  }

  /* No closing-specific lede override any more: the base .service-lede
     mobile metrics above ARE these values now (one lede style site-wide). */
}

@media (max-width: 420px) {
  .services-closing .service-heading h2 {
    font-size: clamp(2.1rem, 9vw, 2.9rem);
  }
}

/* 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. */
/* Page-prefixed: the bare class lost its margins to the .services-page h3
   reset (class+type beats class) and nobody noticed because paragraph
   bottom-margins papered over it. */
.services-page .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);
}

/* The address hand-off, mirroring .pr-finder on the pricing page: transparent
   field, hairline border, button flush at the end, and a focus that darkens
   the edge rather than drawing a second one inside it. */
.services-finder {
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--services-pine) 30%, transparent);
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  max-width: 620px;
}

.services-finder__input {
  background: transparent;
  border: 0;
  color: var(--services-pine);
  flex: 1 1 240px;
  font-family: var(--home-sans);
  font-size: 1.02rem;
  min-height: 60px;
  min-width: 0;
  outline: none;
  padding: 14px 18px;
}

.services-finder__input::placeholder {
  color: #6b6e68;
}

/* Same focus story as every other address box (owner, 2026-08-30): nothing
   changes on the box -- no darkening, no ring. The caret is the signal. */
.services-finder__input:focus,
.services-finder__input:focus-visible {
  outline: none;
}

.services-finder__submit {
  background: var(--services-rust);
  border: 0;
  color: var(--services-ivory);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--home-narrow);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  min-height: 60px;
  padding: 14px 26px;
  text-transform: uppercase;
}

.services-finder__submit:hover {
  background: #8f3f22;
}

.services-finder__submit:focus-visible {
  outline: 3px solid var(--services-pine);
  outline-offset: 2px;
}

/* Under 840px the field and button stack full-width, like .pr-finder. */
@media (max-width: 840px) {
  .services-finder {
    max-width: none;
  }

  .services-finder__input,
  .services-finder__submit {
    flex: 1 1 100%;
  }
}

/* Room before the Plant By Number subhead. It followed the landscaping copy
   with nothing between them, so the question read as the next sentence of
   that paragraph rather than as a new thing. */
/* CORRECTED TWICE, 2026-08-29. The first fix set 34px and the owner rightly
   said "still no space" -- because NO margin here ever applied: the page's
   h3 reset (.services-page h3, class+type) outweighs a single class, so
   .service-subhead's own 26px and this rule both silently lost. The page
   prefix wins the specificity fight the honest way. This is a paragraph
   ending and a new thought starting, so it gets a real gap. */
.services-page .service-subhead--spaced {
  margin-top: 56px;
}

/* The visit scope, as a list a buyer can actually check off -- OWNER:
   "im not sure i would purchase that without understanding what i am
   paying so much for". Dash markers, matching the price list's own visit
   lists. Held to the shared scope by test/seasonalScopeParity.test.js. */
.services-page .service-scope {
  list-style: none;
  margin: 10px 0 6px;
  max-width: 700px;
  padding: 0;
}

.services-page .service-scope li {
  border-bottom: 1px solid rgba(6, 8, 7, 0.14);
  color: var(--services-pine);
  font-size: clamp(0.98rem, 1.05vw, 1.05rem);
  line-height: 1.5;
  padding: 7px 0 7px 20px;
  position: relative;
}

.services-page .service-scope li::before {
  color: var(--services-rust);
  content: "–";
  left: 0;
  position: absolute;
}

.services-page .service-scope li:last-child {
  border-bottom: 0;
}

/* The one sentence that applies to both visits above it. */
.service-copy-single--footline {
  color: color-mix(in srgb, var(--services-pine) 72%, transparent);
  margin-top: 26px;
}

/* Their name links to them. Ridge Trail installs the plan; PBN designs it,
   and a reader who has never heard of them should be one click from finding
   out rather than taking our word for it. */
.service-subhead a {
  color: var(--services-rust);
  text-decoration: none;
}

.service-subhead a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.service-subhead a:hover { color: var(--services-rust); }

/* The closing is a numbered row under its own band now, so it uses the
   standard section layout untouched. */