@font-face {
  font-family: "Ridge Narrow";
  src: url("/assets/nimbus-sans-narrow-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

@font-face {
  font-family: "Ridge Sans";
  src: url("/assets/nimbus-sans-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Ridge Sans";
  src: url("/assets/nimbus-sans-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  /* THE ONE LEFT EDGE (2026-09-05). Sections 01, 03 and 04 land here by
     construction -- .home-story's 6vw padding plus the centring of its
     1180px wrapper inside what is left. This expression is that same number
     in one step, so section 02 and the aerial legend can use it directly
     instead of approximating it with a different formula and drifting.

       1440px  ->  130px      1366px  ->  93px      1024px  ->  61px

     The percentage resolves where the variable is USED, against that
     element's containing block -- which is why .home-story__measured's
     max-width had to go: it made 100% mean 1420 rather than the section. */
  --home-inset: max(6vw, calc((100% - 1180px) / 2));

  --home-ink: #07100b;
  --home-ink-soft: #101811;
  --home-cream: #f1eadf;
  --home-muted: #c8c7c1;
  --home-rust: #b5532f;
  /* SECTION EYEBROWS ARE SAGE, LINKS ARE RUST (owner, 2026-09-07: "maybe
     there is a green we could use for the 01/ headings" ... "1 for now").
     It settles a real problem: .home-story__label and a.home-story__link were
     IDENTICAL -- same rust, same 0.72rem, same 700 weight, same 0.2em
     tracking, same uppercase -- so "03 / WEEKLY MOWING" and "WHAT THE
     FOUNDING TEN IS" differed by an arrow and nothing told a reader which one
     was clickable. She asked the question herself.
     Two other answers were tried and rejected by her, in her words: a resting
     underline ("old school ugly", and it also failed test/rustLinks against
     her own 2026-08-30 rule that a rust link rests bare), and dropping rust
     from the eyebrows ("I wanna leave the eyebrow color rust I like it").
     Green was her idea and it is the better one: rust keeps a single meaning,
     nothing is underlined, and the label reads as a label.
     7.5:1 on the ink, and chosen over a saturated grass green because the
     section 01 eyebrow sits ON a photograph of grass. */
  --home-eyebrow: #93a886;
  --home-rust-dark: #8e3f25;
  --home-line: rgba(241, 234, 223, 0.23);
  --home-narrow: "Ridge Narrow", "Arial Narrow", sans-serif;
  --home-sans: "Ridge Sans", Arial, sans-serif;
  /* Emphasis / utility role per Brand Book v2.0: phone numbers, prices,
     dates, subheads, interface emphasis. Same family as --home-sans;
     rules using it declare font-weight:700, which loads nimbus-sans-bold. */
  --home-bold: "Ridge Sans", Arial, sans-serif;
  /* Body / utility role per Brand Book v2.0: body copy, supporting
     information, instructions, UI text. Nimbus Sans Regular. */
  --home-regular: "Ridge Sans", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--home-ink);
  scroll-behavior: smooth;
}

body.home-page {
  background: var(--home-ink);
  color: var(--home-cream);
  font-family: var(--home-sans);
  margin: 0;
  min-width: 320px;
}

/* Homepage review accent: muted clay-rust rather than saturated orange. */
body.home-page:not(.services-page) {
  --home-rust: #a35a3e;
  --home-rust-dark: #82452f;
}

.home-page a {
  color: inherit;
  text-decoration: none;
}

.home-page button,
.home-page a {
  -webkit-tap-highlight-color: transparent;
}

/* :where() keeps this reset at ZERO specificity. As `.home-page button`
   (0,1,1) it silently beat every single-class component rule (0,1,0) --
   all the closing submit buttons "styled" in Ridge Narrow actually
   rendered in the inherited sans, and only their caps and tracking
   survived, which is why it half-passed inspection (owner's services
   font inventory, 2026-08-30). A reset's job is to beat the browser
   default, never the component. */
.home-page :where(button, input) {
  font: inherit;
}

.home-page img {
  display: block;
  max-width: 100%;
}

.home-page :focus-visible {
  outline: 3px solid var(--home-rust);
  outline-offset: 4px;
}

.skip-link {
  background: var(--home-cream);
  color: var(--home-ink) !important;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: -6rem;
  z-index: 1000;
}

.skip-link:focus {
  top: 1rem;
}

.home-header {
  align-items: center;
  background: #07100bf7;
  border-bottom: 1px solid var(--home-line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  height: 94px;
  padding: 10px clamp(22px, 4.5vw, 76px);
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 40;
}

.home-brand {
  align-items: center;
  display: inline-flex;
  gap: 13px;
  width: max-content;
}

.home-brand__name {
  display: grid;
  line-height: 1;
  text-transform: uppercase;
}

.home-brand__name strong {
  font-family: var(--home-narrow);
  font-size: 1.75rem;
  letter-spacing: 0.075em;
}

.home-brand__name small {
  color: #d16c49;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.29em;
  margin-top: 7px;
}

.desktop-nav {
  align-items: center;
  display: flex;
  gap: clamp(20px, 2.5vw, 40px);
  justify-content: flex-end;
  margin-right: clamp(24px, 3vw, 48px);
}

.desktop-nav a,
.desktop-cta,
.menu-toggle__label {
  font-family: var(--home-narrow);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.desktop-nav a {
  position: relative;
}

.desktop-nav a::after {
  background: var(--home-rust);
  bottom: -8px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
  width: 100%;
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}

.desktop-cta {
  align-items: center;
  background: var(--home-rust);
  display: inline-flex;
  height: 52px;
  justify-content: center;
  min-width: 156px;
  padding: 0 22px;
}

.desktop-cta:hover {
  background: var(--home-rust-dark);
}

.menu-toggle {
  align-items: center;
  background: none;
  border: 0;
  color: var(--home-cream);
  cursor: pointer;
  display: none;
  gap: 13px;
  padding: 8px 0 8px 12px;
}

.menu-toggle__lines {
  display: grid;
  gap: 6px;
  width: 29px;
}

.menu-toggle__lines i {
  background: currentColor;
  display: block;
  height: 2px;
  width: 100%;
}

.mobile-menu {
  background: var(--home-ink);
  inset: 0;
  overflow-y: auto;
  padding: 0 clamp(24px, 7vw, 56px) 36px;
  position: fixed;
  z-index: 100;
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__topline {
  align-items: center;
  border-bottom: 1px solid var(--home-line);
  display: flex;
  height: 94px;
  justify-content: space-between;
}

.mobile-menu__topline span {
  color: var(--home-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.mobile-menu__topline button {
  background: none;
  border: 0;
  color: var(--home-cream);
  cursor: pointer;
  font-size: 2.4rem;
  line-height: 1;
  padding: 8px;
}

.mobile-menu nav {
  display: grid;
  margin-top: 26px;
}

.mobile-menu nav a {
  align-items: center;
  border-bottom: 1px solid var(--home-line);
  display: flex;
  font-family: var(--home-narrow);
  font-size: clamp(2.15rem, 10vw, 4rem);
  justify-content: space-between;
  line-height: 1;
  padding: 15px 0;
  text-transform: uppercase;
}

.mobile-menu nav a span {
  color: var(--home-rust);
  font-family: var(--home-sans);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

body.menu-open {
  overflow: hidden;
}

.home-hero {
  min-height: min(820px, 100svh);
  overflow: hidden;
  position: relative;
}

/* The hero's exit mirrors the page's ending (owner, 2026-08-30: "do you
   think the hero shot needs to be faded into the first scroll down like
   the bottom picture does?"): the photo dissolves into the page ink over
   its last stretch, the same scrim feather the Route 219 section uses to
   emerge from it. The two photographs bookend the scroll and breathe the
   same way -- image into black going down, black into image at the end. */
.home-hero::after {
  background: linear-gradient(180deg, rgba(7, 16, 11, 0) 0%, rgba(7, 16, 11, 0.55) 62%, #07100b 100%);
  bottom: 0;
  content: "";
  height: 190px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

/* The hero's own content (z-index 2) and service dock (z-index 3) already
   ride above this feather's z-index 1 -- nothing else to lift. */

.home-hero__image,
.home-hero__shade {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.home-hero__image {
  object-fit: cover;
  object-position: center center;
}

.home-hero__shade {
  background:
    linear-gradient(90deg, rgba(3, 9, 5, 0.9) 0%, rgba(3, 9, 5, 0.66) 35%, rgba(3, 9, 5, 0.04) 72%),
    linear-gradient(0deg, rgba(3, 9, 5, 0.84) 0%, transparent 45%);
}

.home-hero__content {
  max-width: 660px;
  /* THE LEFT EDGE IS --home-inset, like everything else (2026-09-05).
     It was clamp(44px, 8vw, 126px) -- a THIRD formula, after the sections'
     two. Owner: "the hero page text now doesn't align I think." She is right,
     and it never did: the hero sat 15px LEFT of the sections at 1440 and 16px
     RIGHT of them at 1366, so the mismatch even changed direction with the
     window. It was invisible while sections 02 and 03 were also out on their
     own; aligning those left the hero as the only thing on the page not on
     the edge. The mobile overrides below keep their own tighter gutter. */
  padding: clamp(156px, 19vh, 206px) 0 148px var(--home-inset);
  position: relative;
  z-index: 2;
}

.home-kicker,
.home-services-line,
.home-phone {
  font-family: var(--home-narrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-kicker {
  color: #deded8;
  font-size: clamp(0.86rem, 1.2vw, 1rem);
  margin: 16px 0 25px;
}

.home-kicker span {
  margin: 0 5px;
}

.home-hero h1 {
  font-family: var(--home-narrow);
  font-size: clamp(6rem, 10vw, 9.4rem);
  letter-spacing: -0.035em;
  line-height: 0.75;
  margin: 0;
  text-transform: uppercase;
}

.home-rust-line {
  background: var(--home-rust);
  display: block;
  height: 7px;
  margin: 34px 0 27px;
  width: 112px;
}

.home-services-line {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.05;
  margin: 0;
}

.home-actions {
  display: flex;
  gap: 12px;
}

.home-button {
  align-items: center;
  border: 1px solid rgba(241, 234, 223, 0.48);
  display: inline-flex;
  font-family: var(--home-narrow);
  font-size: 1rem;
  font-weight: 700;
  height: 62px;
  justify-content: center;
  letter-spacing: 0.11em;
  min-width: 184px;
  padding: 0 22px;
  text-transform: uppercase;
}

.home-button--primary {
  background: var(--home-rust);
  border-color: var(--home-rust);
}

.home-button--primary:hover {
  background: var(--home-rust-dark);
  border-color: var(--home-rust-dark);
}

.home-button--outline:hover {
  background: var(--home-cream);
  color: var(--home-ink);
}

.home-phone {
  display: inline-block;
  font-size: 0.98rem;
}

.desktop-service-dock {
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  /* --home-inset, like everything else (2026-09-05). It kept the hero's old
     clamp(44px, 8vw, 126px) when the hero moved to the shared edge an hour
     earlier: this dock is positioned against the SECTION, not inside
     .home-hero__content, so it was not carried along. Owner: "the weekly
     mowing and the three other texts needs to be realigned so it's aligned
     with the top and bottom text box and text." At 1366 it sat at 109 while
     the headline, the meta line and the address box were all at 93. */
  left: var(--home-inset);
  position: absolute;
  right: var(--home-inset);
  width: auto;
  z-index: 3;
}

.desktop-service-dock a {
  background: transparent;
  border: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 96px;
  padding: 18px 22px;
}

.desktop-service-dock a:first-child {
  padding-left: 0;
}

.desktop-service-dock span {
  color: var(--home-rust);
  font-size: 0.7rem;
  font-weight: 700;
  grid-row: 1 / 3;
  margin-right: 14px;
  padding-top: 4px;
}

.desktop-service-dock strong {
  font-family: var(--home-narrow);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.desktop-service-dock small {
  color: #aeb1aa;
  font-size: 0.75rem;
  margin-top: 8px;
}

.desktop-service-dock a:hover {
  background: var(--home-rust);
}

.desktop-service-dock a:hover span,
.desktop-service-dock a:hover small {
  color: var(--home-cream);
}

.mobile-service-list {
  display: none;
}

.home-footer {
  align-items: center;
  background: #030704;
  border-top: 1px solid var(--home-line);
  color: #989d96;
  display: flex;
  font-size: 0.72rem;
  justify-content: space-between;
  letter-spacing: 0.08em;
  padding: 25px clamp(24px, 5vw, 72px);
  text-transform: uppercase;
}

.home-footer a {
  color: var(--home-cream);
}

/* Copyright line reads as clearly secondary to the phone/email contact
   info, not the same visual weight. */
.home-footer > span {
  font-size: 0.62rem;
  opacity: 0.8;
}

.mobile-only {
  display: none;
}

@media (max-width: 1090px) {
  .desktop-nav {
    gap: 12px;
    margin-right: 12px;
  }

  .desktop-nav a {
    font-size: 0.74rem;
  }

  .desktop-cta {
    font-size: 0.82rem;
    min-width: 142px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .home-brand__name strong {
    font-size: 1.45rem;
  }

  .home-brand img {
    height: 60px;
    width: 60px;
  }

  .desktop-service-dock {
    width: auto;
  }
}

@media (min-width: 841px) {
  .home-footer {
    /* Was flex-end, which pushed contact and copyright into one bunched
       cluster on the right (owner, 2026-08-27: "looks a bit messy"). The
       two groups now sit at opposite ends with the width between them. */
    justify-content: space-between;
  }
}

@media (max-width: 840px) {
  .home-header {
    grid-template-columns: 1fr auto;
    height: 66px;
    padding: 8px 18px;
    position: relative;
  }

  .home-brand {
    gap: 0;
  }

  .home-brand__name strong {
    font-size: 1.28rem;
    letter-spacing: 0.07em;
  }

  .home-brand__name small {
    font-size: 0.56rem;
    letter-spacing: 0.28em;
    margin-top: 5px;
  }

  .desktop-nav,
  .desktop-cta {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-menu__topline {
    height: 66px;
  }

  .home-hero {
    min-height: 500px;
  }

  .home-hero__image {
    filter: brightness(1.15) contrast(0.94) saturate(1.03);
    height: 100%;
    /* Tuned to the ORIGINAL phone art (941x1672), restored 2026-08-30 at
       the owner's call ("cant u go back to the original mobile and use
       that") after a replacement lost the mower and sharpness. This
       anchor and that image travel together -- retune if it changes. */
    object-position: center 20%;
  }

  .home-hero__shade {
    background:
      linear-gradient(90deg, rgba(3, 9, 5, 0.52) 0%, rgba(3, 9, 5, 0.2) 52%, rgba(3, 9, 5, 0) 82%),
      linear-gradient(0deg, rgba(3, 9, 5, 0.46) 0%, rgba(3, 9, 5, 0.14) 32%, rgba(3, 9, 5, 0) 58%);
  }

  .home-hero__content {
    max-width: none;
    /* The horizontal gutter is --home-inset here too (2026-09-05), not a flat
       26px. Below 840 the sections stayed on 6vw while the hero dropped to
       26, so the two disagreed by 24px at 840 and closed only as the window
       narrowed toward 420. The ≤420 rule below keeps its own tuned 25px --
       at that size 6vw is 25.2, so it is the same number by another route. */
    padding: 48px var(--home-inset) 32px;
  }

  .home-kicker {
    font-size: 0.78rem;
    line-height: 1.1;
    margin: 15px 0 24px;
    max-width: 300px;
  }

  .home-kicker > span {
    margin-left: 0;
    margin-right: 0;
  }

  .home-kicker__role,
  .home-kicker__place {
    display: block;
  }

  .home-kicker__divider {
    display: none;
  }

  .home-kicker__place {
    margin-top: 5px;
    white-space: nowrap;
  }

  .home-hero h1 {
    font-size: clamp(3.2rem, 16.8vw, 4.4rem);
    line-height: 0.78;
    white-space: nowrap;
  }

  .home-rust-line {
    height: 5px;
    margin: 23px 0 20px;
    width: 74px;
  }

  .home-services-line {
    font-size: 1.28rem;
    letter-spacing: 0.11em;
    white-space: nowrap;
  }

  .mobile-only {
    display: initial;
  }

  .home-button {
    flex: 1 1 0;
    font-size: 0.82rem;
    height: 54px;
    letter-spacing: 0.08em;
    min-width: 0;
    padding: 0 10px;
    white-space: nowrap;
  }

  .home-phone {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    margin-top: 22px;
    white-space: nowrap;
  }

  .desktop-service-dock {
    display: none;
  }

  .mobile-service-list {
    background: var(--home-ink);
    display: grid;
    padding: 0 25px 24px;
  }

  .mobile-service-list > a {
    align-items: center;
    border-top: 1px solid var(--home-line);
    display: grid;
    gap: 10px;
    grid-template-columns: 22px minmax(0, 1fr) 24px;
    min-height: 74px;
    padding: 0 4px;
  }

  .mobile-service-list > a:last-child {
    border-bottom: 1px solid var(--home-line);
  }

  .mobile-service-list__number {
    color: var(--home-rust);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .mobile-service-list > a > span:nth-child(2) {
    display: block;
  }

  .mobile-service-list strong {
    font-family: var(--home-narrow);
    font-size: clamp(1.18rem, 5.55vw, 1.35rem);
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-service-list i {
    align-self: center;
    color: #c3c5c0;
    font-size: 1.05rem;
    font-style: normal;
    justify-self: end;
    line-height: 1;
  }

  .home-footer {
    align-items: start;
    display: grid;
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .menu-toggle__label {
    display: none;
  }

  .home-hero {
    min-height: 500px;
  }

  .home-hero__content {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 42px;
  }

  .home-hero h1 {
    font-size: clamp(3.2rem, 16.8vw, 4.25rem);
  }

  .home-kicker {
    max-width: 280px;
  }

}

@media (max-height: 720px) and (max-width: 840px) {
  .home-hero {
    min-height: 480px;
  }

  .home-hero__content {
    padding-top: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}

/* Footer contact — phone and email visible on every page, per Brand Book
   ("visible utility across website, print and profiles"). Modest size:
   this is the "looking for it" case, not a call to action. */
.home-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  justify-content: flex-end;
}

.home-footer__contact a {
  color: var(--home-cream);
  text-decoration: none;
  /* Email addresses read wrong in caps, and the footer's blanket uppercase
     transform made it inconsistent with the lowercase version on the contact
     page. Opt these links out. */
  text-transform: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.home-footer__contact a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The footer wraps rather than overflowing: the email address is long
   enough that on many phone widths a single row runs off the right edge
   and truncates mid-word. Wrapping is enabled at all sizes, and the whole
   footer stacks below 900px (not 700px — the overflow starts well above a
   typical phone-portrait width once the email is in there). */
.home-footer {
  flex-wrap: wrap;
  gap: 10px 20px;
}

@media (max-width: 900px) {
  .home-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .home-footer__contact {
    gap: 6px 18px;
    justify-content: flex-start;
  }

  .home-footer__contact a {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* ---- Homepage address box (2026-08-27) ----
   OWNER: "a translucent enter your address box ... with a rust box at the
   end of the translucent box that says see your prices." It sits low in the
   hero, over the photograph, so the strongest thing the business has --
   type an address, get a real price -- is the first action on the page.
   Replaces two buttons that pointed at the same idea.

   The field is translucent over the image, not a solid card: the photo
   stays visible through it. A dark scrim behind the text keeps contrast
   legible regardless of what the photo is doing underneath. */

.home-finder {
  align-items: stretch;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* Lighter tint (was 0.42): the photograph should read THROUGH the box,
     not sit behind a pine panel. The blur keeps the typed address legible
     over whatever the image is doing underneath. */
  background: rgba(6, 8, 7, 0.22);
  border: 1px solid rgba(242, 239, 230, 0.30);
  display: flex;
  flex-wrap: wrap;
  /* Sits low in the frame, but the gap has to scale with the window: a
     fixed 118px pushed the box below the fold on a short laptop screen.
     vh-based, so it drops further on tall displays and stays visible on
     short ones. */
  margin: clamp(26px, 4vh, 52px) 0 0;
  max-width: 560px;
}

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

.home-finder__input::placeholder {
  color: rgba(242, 239, 230, 0.72);
}

/* OWNER: "the address look up on the hero page also does that orange outline
   while you're typing, it feels very mid 90s." It did -- a 2px rust ring plus
   a rust border, over a photograph. Gone.

   The indicator itself stays, because a field you cannot tell you are typing
   in is a worse problem than a loud one. Over a dark photo a pine ring would
   be invisible, so this brightens the existing hairline to cream instead:
   the same object, just definitely focused. */
.home-finder:focus-within {
  border-color: rgba(242, 239, 230, 0.75);
}

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

.home-finder__submit:hover {
  background: var(--home-rust-dark);
}

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

/* The two secondary links sit on ONE row under the address box. Stacked,
   they crowded it -- two small lines immediately under a 60px field read
   as clutter. The bullet divider matches the kicker above. */
.home-hero__links {
  align-items: center;
  margin-top: 10px;
  color: rgba(242, 239, 230, 0.82);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--home-regular);
  font-size: 0.92rem;
  gap: 6px 14px;
  margin: 10px 0 0;
}

.home-hero__links > a {
  color: var(--home-cream);
}

@media (max-width: 840px) {
  .home-finder {
    max-width: 100%;
  }

  .home-finder__input {
    flex: 1 1 100%;
  }

  .home-finder__submit {
    flex: 1 1 100%;
  }
}

/* Screen-reader-only label text. The homepage loads only home.css, so this
   has to live here -- without it the address field's label renders as
   stray text in the hero. */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Footer, regrouped 2026-08-27. Price List used to sit inside the contact
   cluster beside the phone and email, so a navigation link read as a way to
   reach us -- and four items on one line with no grouping wrapped badly on
   phones, orphaning "Price List" onto its own row. Two groups now: how to
   reach us on the left, page meta on the right. */
.home-footer__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.home-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

@media (max-width: 900px) {
  .home-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   SHORT DESKTOP WINDOWS (the common 1366x768 laptop).

   The hero column is a fixed ~910px stack, so on any window under about
   800px of usable height the address box -- the primary call to action --
   fell entirely below the fold. Measured at a 640px viewport: the box ran
   698-760px, i.e. off-screen with the phone number above it also cut. Moving
   the phone above the box (which the owner asked for, and which is right)
   cost the last ~44px of margin the box had.

   Two things were wrong, and the headline is the bigger one. At 10vw the h1
   is 137px in a 551px-wide column, so "YOUR LAWN." cannot fit on one line and
   wraps to THREE lines despite the <br> asking for two. That accidental third
   line is 102px of the overflow on its own.

   So on short windows: size the headline to the two lines it was written for,
   and tighten the vertical rhythm. Nothing here changes tall screens, where
   the original composition still renders exactly as designed.
   Verified in Chromium at 600/640/700/768px viewport heights.
--------------------------------------------------------------------------- */
@media (min-width: 841px) and (max-height: 820px) {
  /* The hero is a fixed stack in a box the window is too short for, so every
     number here is a measured budget rather than a taste call.

     Top padding must clear the header, which is 94px tall and absolutely
     positioned OVER the hero -- trimming below that slides the headline
     behind it. Bottom padding is not free space either: the service dock is
     absolutely positioned inside the hero, so the content has to reserve its
     full height or the dock lands on top of the address box. Both of those
     happened while tuning this, and both are invisible until you render it. */
  .home-hero__content {
    padding-bottom: 96px;
    padding-top: 118px;
  }

  /* The hero column is a fixed 660px box whose left padding GROWS with the
     window (102px at 1280, 126px at 1600+), so the text column gets NARROWER
     as the monitor gets wider -- 558px down to 534px. A purely vw-based size
     wraps to three lines on a wide-but-short window even after it fits on a
     1366, so the cap is what fits the narrowest column. */
  .home-hero h1 {
    font-size: min(8.2vw, 96px);
  }

  .home-rust-line {
    margin: 18px 0 16px;
  }

  .home-kicker {
    margin: 14px 0 18px;
  }

  /* The owner wanted real air between "Owner-operated" and the address box,
     without pushing the box into the service dock below it. Measured at her
     window (1279x600, the tightest case): at 22px there were 48px of unused
     clearance under the box, so the gap can nearly double and still leave a
     genuine 28px below. The clamp gives taller windows a little more. */
  .home-finder {
    margin-top: clamp(42px, 6vh, 56px);
  }

  /* A more compact dock: it is the least important thing in the frame, and
     the four services it links are repeated in full immediately below. */
  .desktop-service-dock {
    bottom: 16px;
  }

  .desktop-service-dock a {
    min-height: 58px;
    padding-bottom: 10px;
    padding-top: 10px;
  }
}


/* OWNER: "the address look up on the hero page also does that orange outline
   while you're typing, it feels very mid 90s." It was not the hero's own
   styling -- it was the global `.home-page :focus-visible` ring landing on
   every text field on every page, in the old #a35a3e orange. Every body on
   the site carries .home-page, so that selector reached all of them.

   Browsers treat a focused text input as always matching :focus-visible, so
   the ring showed while TYPING rather than only on keyboard navigation, which
   is the opposite of what the rule is for.

   Safe to drop here because each field shows focus another way: the hero box
   brightens its hairline to cream, and the ZIP and pricing bars take a pine
   inset ring. Links and buttons keep their outline. */
/* Chrome's autofill paints its own pale wash and a warm border INSIDE the
   field the moment it recognises an address, and it beats a stylesheet that
   does not name it. That is the "faint orange outline inside the enter your
   address text box" the owner reported 2026-09-01 -- not a focus ring, not
   the hairline: the browser.

   The box is translucent over a photograph, so an inset wash cannot be used
   to cover it without killing the blur. The transition delay is the standard
   answer: the fill colour never gets to animate in. */
.home-page input:-webkit-autofill,
.home-page input:-webkit-autofill:hover,
.home-page input:-webkit-autofill:focus,
.home-page input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--home-cream);
  caret-color: var(--home-cream);
  transition: background-color 100000s ease-in-out 0s;
}

/* OWNER 2026-09-05: "why is the box highlighted again when I go to type?"
   Because the delay above is the whole defence here, and it only holds for
   the FILLED state. While Chrome's saved-address list is open it also
   PREVIEWS the value into the field, and that repaint is not something a
   transition delays -- so the pale wash lands on a box that is see-through
   over a photograph, which is the brightest possible place for it.
   The calculator's boxes never showed it because their fix fills the field
   with the page colour; this one could not, because the field is transparent
   ON PURPOSE (backdrop blur on the wrap, photo reading through).

   So: the same inset, in the hero's own ink rather than cream. It covers
   Chrome's wash, keeps the field dark, and only ever applies in the autofill
   state -- the resting field is untouched and still see-through. Some of the
   blur is traded for it, in a state that lasts as long as it takes to pick an
   address, which is the right way round. */
.home-page .home-finder__input:-webkit-autofill,
.home-page .home-finder__input:-webkit-autofill:hover,
.home-page .home-finder__input:-webkit-autofill:focus,
.home-page .home-finder__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(6, 8, 7, 0.88) inset;
  box-shadow: 0 0 0 1000px rgba(6, 8, 7, 0.88) inset;
}

.home-page input[type="text"]:focus-visible,
.home-page input[type="search"]:focus-visible,
.home-page input[type="number"]:focus-visible,
.home-page input[type="email"]:focus-visible,
.home-page input[type="tel"]:focus-visible,
.home-page textarea:focus-visible {
  outline: none;
}

/* ---- The scroll story (owner, 2026-08-30) -----------------------------
   Four short sections below the hero so the whole pitch lands in one
   scroll for the visitor who never opens a menu. Same dark idiom as the
   hero, same label spec as the rest of the site. The hero stays the one
   action; the closing section repeats it with a second address form. */

.home-story {
  border-top: 1px solid var(--home-line);
  padding: 84px 6vw;
}

.home-story__wrap {
  display: grid;
  gap: 40px;
  grid-template-columns: 220px minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1180px;
}

/* Section 01: the photograph fills the section and the copy sits on it.
   Same grammar as the hero and as Route 219 -- full bleed, type on the
   image, a feathered scrim keeping it readable. The drawn canvas field
   that used to live here is gone; a real photograph of the last inch beats
   any illustration of it. */
.home-story.home-story--edge {
  background-color: #0c1c14;
  /* RENAMED 2026-09-03, deliberately. stampAssets.mjs versions only .css and
     .js, and _headers caches /assets/* for a week, so swapping an image in
     place leaves every returning visitor on the old one. A new filename
     changes this stylesheet, which changes its hash, which is what the HTML
     asks for. Rename the file whenever a background image is replaced. */
  background-image: url("/assets/edge-grass-daylight.jpg");
  background-position: 50% 78%;
  background-size: cover;
  /* OWNER 2026-09-02: the photos "seem kinda separate from one another" --
     the hairline every story section carried drew a rule across each seam.
     Photo sections meet on feathers, never on a line. */
  border-top: none;
  overflow: hidden;
  padding-bottom: 150px;
  padding-top: 96px;
  position: relative;
}

/* Dark at the top where the words are, clear at the bottom where the cut
   edge and the asphalt are. */
/* Light enough to see the grass. The first pass was so heavy the photograph
   read as a dark green wall, which is the one thing this section cannot be:
   the picture IS the argument. */
/* Three layers now (owner, 2026-09-02, "the pixels melt into one another"):
   the top opens in the SAME ink the hero dissolves into, so the two
   photographs hand off through one dark rather than two nearly-matching
   ones; the lateral shade; and a bottom feather that carries the asphalt
   down into the ink section 02 develops out of. No edge is a cut. */
.home-story--edge::before {
  background:
    linear-gradient(180deg, #07100b 0%, rgba(8, 20, 14, 0.62) 22%, rgba(8, 20, 14, 0.36) 44%, rgba(8, 20, 14, 0.1) 66%, rgba(8, 20, 14, 0) 80%),
    linear-gradient(180deg, rgba(7, 16, 11, 0) 0%, rgba(7, 16, 11, 0) 74%, rgba(7, 16, 11, 0.55) 90%, #07100b 100%),
    linear-gradient(90deg, rgba(8, 20, 14, 0.6) 0%, rgba(8, 20, 14, 0.22) 46%, rgba(8, 20, 14, 0) 72%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.home-story--edge .home-story__wrap {
  position: relative;
  z-index: 2;
}

.home-story--edge p {
  max-width: 52ch;
}

/* THE ONE PARAGRAPH (2026-09-06). The owner sent her Canva comp twice: "the
   layout for the words was never changed", then "I don't want the picture
   changed just how the text is layed out."
   Her comp stacks three things on the photograph -- eyebrow, headline, one
   paragraph. The page had four. The first sentence wore .home-story__lede,
   a 1.5-2rem bold sub-headline, and the second sat in .home-edge__cut,
   absolutely positioned at the FOOT of the section with its own radial
   ground. Two halves of one thought at opposite ends of the picture in two
   different sizes; no amount of nudging was going to make that read as her
   comp, because the structure was the difference.
   The TYPE here is the pinned block's, kept deliberately: she asked for this
   size on 2026-09-05 -- "the difference sentence is too small and it doesn't
   make sense that sentence is small". It is in the flow now, that is all.
   The photograph and its scrim are untouched, as asked. */
.home-story--edge .home-edge__line {
  color: var(--home-cream);
  font-size: clamp(1.18rem, 1.05vw + 0.85rem, 1.5rem);
  line-height: 1.4;
  margin: 0;
  max-width: 52ch;
}

/* One left-aligned column: the label sits ABOVE the headline the way the
   owner's comps set it, rather than in the 220px side column the other
   sections use. */
.home-story--edge .home-story__wrap {
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Section 02: the aerial IS the page ----------------------------------
   Owner, 2026-09-01: "the aerial image should be the entire page and just as
   beautiful as the 219 photo." Same grammar as 01 and 04: the photograph is
   the section's background, full bleed, and the words sit on it behind a
   scrim light enough that the picture stays the point. The half-and-half
   layout it replaces was a picture in a box with the box removed.

   Where the eye goes: the lot sits centre-right of the frame, so the copy
   takes the LEFT column over the neighbour's dark tree line, and the lot --
   the thing being explained -- stays clear on the right. The legend sits at
   the bottom right, under the lot it labels. */
.home-story.home-story--measured {
  background-color: #07100b;
  /* Three layers on ONE box. The two gradients carry the same size and
     position as the photograph, so their 0% and 100% land exactly on its
     edges: since the picture stopped covering the section (2026-09-05) it
     has edges to hide, and this site's rule is that photographs meet on
     feathers, never on a line. */
  background-image:
    linear-gradient(180deg, #07100b 0%, rgba(7, 16, 11, 0) 22%, rgba(7, 16, 11, 0) 78%, #07100b 100%),
    linear-gradient(90deg, #07100b 0%, rgba(7, 16, 11, 0) 20%),
    url("/assets/how-it-works-plan.jpg");
  /* OWNER 2026-09-01: "the house image needs to be more on the right and
     then fades to the black on the left." The photograph is nearly the
     section's own aspect, so `cover` could only slide it a few pixels;
     it is drawn larger than the section and anchored to the LEFT edge, which
     carries the lot into the right two-thirds. The vertical anchor keeps the
     house and drive in frame. */
  /* THE WHITE LINE IS IN THE PICTURE. The parcel outline and the mowable
     dash are drawn into the photograph (it is an illustration, not a live
     lookup), so wherever the picture goes, the rectangle goes. Owner,
     2026-09-01: "the property line looks funny" -- at the first cut's 134%
     the rectangle's left side ran behind the paragraph and its right side
     sat on the frame edge. Sized and placed so the WHOLE rectangle (which
     spans 24.5%-79% of the image's width) sits inside the frame, to the
     right of the reading column, with the image's own edge buried in the
     solid part of the fade. Desktop: 110% wide, 12vw in from the left. */
  /* ZOOMED OUT 2026-09-05 (owner: "zoom out so the parcel reads as a
     property. Keep it in the same position"). At 110% the drawn rectangle
     was 767px wide and 621px tall in a 1280x828 section -- it filled the
     frame, so the eye read a lawn, not a lot with a house on it and
     neighbours either side. At 78% the same rectangle is 544x441 with the
     property's surroundings around it.

     The rectangle keeps its place on screen rather than its anchor in the
     picture: its centre sits at 24.4-78.9% of the image's width, so holding
     that centre at 68.75% of the section means sliding the left anchor from
     12vw to 28.5vw as the picture shrinks. Vertical likewise, 42% -> 50%. */
  background-position: 28.5vw 50%, 28.5vw 50%, 28.5vw 50%;
  /* The picture no longer covers the section, so the tile that was never
     visible before would have repeated above and below it. */
  background-repeat: no-repeat;
  background-size: 78% auto, 78% auto, 78% auto;
  border-top: none;
  min-height: clamp(640px, 92vh, 940px);
  overflow: hidden;
  padding: clamp(96px, 12vh, 150px) 0 clamp(120px, 14vh, 170px);
  position: relative;
}

/* Three layers, each doing one job: the top feather (the flat ink of 01
   dissolves into the photograph, no seam), the lateral shade (solid enough
   under the reading column, gone by mid-frame so the lawn breathes), and a
   bottom feather into the founding band. Kept light on purpose -- the first
   scrim on 01 was so heavy the grass read as a dark wall (owner). */
.home-story--measured::before {
  background:
    linear-gradient(180deg, #07100b 0%, rgba(7, 16, 11, 0.55) 14%, rgba(7, 16, 11, 0.08) 34%, rgba(7, 16, 11, 0) 60%, rgba(16, 24, 17, 0.62) 88%, var(--home-ink-soft) 100%),
    /* The left fade: solid page ink under the reading column, then a LONG
       ramp -- a third of the width -- to nothing, so the photograph
       develops out of the dark rather than starting at a line (owner:
       "not a border or like straight black"). */
    linear-gradient(90deg, #07100b 0%, #07100b 16%, rgba(7, 16, 11, 0.94) 26%, rgba(7, 16, 11, 0.7) 38%, rgba(7, 16, 11, 0.36) 50%, rgba(7, 16, 11, 0.1) 62%, rgba(7, 16, 11, 0) 72%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* The figure no longer carries the image (the section does); it carries the
   legend, and the radial ground the legend needs to survive any photograph.
   Kept as a figure so the alt text and the caption stay attached. */
.home-story__measured {
  margin: 0 auto;
  /* WAS 1420px (2026-09-05). Owner: "the text on the difference lives page
     and see how the price works I think are not aligned." Measured, she was
     right: at 1366 section 01's copy began at 93px and section 02's at 61px,
     and the edge jumped as you scrolled. This wrapper's 1420 was half the
     cause -- it made the body's percentage resolve against 1420 rather than
     against the section, so no inset written on the body could ever match
     the other sections. The inset lives on .home-measured__body now. */
  max-width: none;
  /* Deliberately NOT a containing block: the figure below positions against
     the section, so its radial ground reaches the section's edges. Bounded to
     this 1420px wrapper it ended in a straight edge on wide screens -- a
     visible rectangle behind the legend. */
  position: static;
  z-index: 2;
}

.home-measured__shot {
  inset: 0;
  margin: 0;
  pointer-events: none;
  position: absolute;
  /* Above the section's scrim (z-index 1), not below it. When the wrapper
     stopped being a stacking context the figure fell under the bottom
     feather and the legend read grey. Its img is 1px and invisible; its
     radial ground is the same ink the scrim is, so painting it on top
     changes nothing but the legend's legibility. */
  z-index: 2;
}

.home-measured__shot img {
  /* The section paints the photograph; the img exists for its alt text. */
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 1px;
}

.home-measured__shot::after {
  background:
    /* Under the legend. The legend has to be legible on whatever picture
       is swapped in, so it carries its own ground. */
    radial-gradient(70% 60% at 96% 100%, rgba(7, 16, 11, 0.92) 0%, rgba(7, 16, 11, 0.6) 46%, rgba(7, 16, 11, 0) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.home-measured__shot figcaption {
  bottom: clamp(20px, 3vw, 38px);
  color: var(--home-cream);
  display: grid;
  font-family: var(--home-sans);
  font-size: 0.54rem; /* owner 2026-09-02 smaller, 2026-09-05 smaller again */
  gap: 7px;
  justify-items: end;
  letter-spacing: 0.06em;
  max-width: 36ch;
  pointer-events: auto;
  position: absolute;
  /* The same edge as every section's copy, mirrored, so the legend lines up
     with the reading column rather than hugging the monitor edge. */
  right: var(--home-inset);
  text-align: right;
  text-transform: uppercase;
  z-index: 2;
}

.home-legend {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  gap: 12px;
}

.home-legend__solid,
.home-legend__dash {
  display: inline-block;
  flex: none;
  height: 2px;
  /* Down from 34px with the type (2026-09-05). A swatch that stays put while
     its label shrinks stops reading as a key and starts reading as a rule
     across the photograph. */
  width: 26px;
}

.home-legend__solid {
  background: rgba(241, 234, 223, 0.9);
}

.home-legend__dash {
  background: repeating-linear-gradient(90deg, var(--home-rust) 0 8px, transparent 8px 14px);
}

/* The reading column: left, on the shade, the width of a comfortable line.
   Its inset is THE homepage inset -- see --home-inset. */
.home-measured__body {
  margin: 0;
  max-width: none;
  padding: 0 var(--home-inset);
  position: relative;
  z-index: 2;
}

.home-measured__body > * {
  max-width: 460px;
}

/* Wide monitors: past 1600px the reading wrapper is centred and the copy
   starts further in, so the picture is pinned to a fixed size and slid
   right by the same amount, keeping the rectangle just clear of the words
   and inside the frame. */
/* THE MIDDLE WIDTHS (owner, 2026-09-05: "this still doesn't look right, I
   can't pinpoint why"). Section 02 was tuned at 1280+ and again below 900,
   and 900-1200 -- which is what a phone asking for the desktop site reports
   -- fell between them: the picture's left edge lands at 279px while the
   reading column still runs to about 560, so the last third of every line
   sat on lit lawn instead of on the ink, and the section held its 920px
   minimum against 420px of content, leaving a third of it empty under the
   steps.

   So at these widths the picture moves right and shrinks a little (the whole
   drawn rectangle still clears the words), the left fade stays solid further
   across, the measure is shorter, and the section stops reserving height it
   has nothing to put in. */
@media (min-width: 901px) and (max-width: 1200px) {
  .home-story.home-story--measured {
    background-position: 34vw 50%, 34vw 50%, 34vw 50%;
    background-size: 74% auto, 74% auto, 74% auto;
    /* Tall enough for the copy and the picture, and no taller: the legend
       belongs under the lot it labels, not 200px below it at the foot of an
       empty band. */
    min-height: clamp(500px, 64vh, 700px);
    padding: clamp(64px, 8vh, 96px) 0 clamp(56px, 6vh, 80px);
  }

  .home-story--measured::before {
    background:
      linear-gradient(180deg, #07100b 0%, rgba(7, 16, 11, 0.55) 14%, rgba(7, 16, 11, 0.08) 34%, rgba(7, 16, 11, 0) 60%, rgba(16, 24, 17, 0.62) 88%, var(--home-ink-soft) 100%),
      linear-gradient(90deg, #07100b 0%, #07100b 30%, rgba(7, 16, 11, 0.92) 42%, rgba(7, 16, 11, 0.66) 54%, rgba(7, 16, 11, 0.3) 66%, rgba(7, 16, 11, 0) 78%);
  }

  .home-measured__body .home-story__lede {
    max-width: 22ch;
  }

  .home-measured__body p {
    max-width: 42ch;
  }
}

@media (min-width: 1600px) {
  .home-story.home-story--measured {
    /* Same zoom-out, same held centre, at the width where the picture stops
       scaling with the page (2026-09-05). */
    background-position: calc(50% + 340px) 50%, calc(50% + 340px) 50%, calc(50% + 340px) 50%;
    background-size: 1250px auto, 1250px auto, 1250px auto;
  }
}

.home-measured__body h2 {
  margin-bottom: 14px;
}

.home-measured__body .home-story__lede {
  max-width: 36ch;
}

.home-measured__body p {
  color: #e4e1d8;
}

/* Four steps in a row, numbers only. The comps hung icons on these -- a pin,
   a checklist, a dollar sign -- and generic interface icons on a page whose
   whole appeal is that it does not look generic cost more than they gave. */
.home-steps {
  border-top: 1px solid rgba(241, 234, 223, 0.28);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 26px 0 24px;
  padding: 22px 0 0;
}

.home-steps li {
  border-left: 1px solid rgba(241, 234, 223, 0.28);
  color: var(--home-cream);
  font-family: var(--home-sans);
  font-size: 0.86rem;
  line-height: 1.35;
  padding: 0 14px;
}

.home-steps li:first-child {
  border-left: 0;
  padding-left: 0;
}

.home-steps i {
  color: var(--home-rust);
  display: block;
  font-family: var(--home-narrow);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  /* A phone crops the frame to a tall strip: keep the house and the drive in
     it (an image and its object-position are a matched pair), put the words
     on a heavier top shade, and let the lot show through beneath them. */
  .home-story.home-story--measured {
    background-position: 54% 40%;
    background-size: cover;
    min-height: 0;
    /* 2026-09-12: 300 -> 216 below. The band is DELIBERATE -- it is where
       the lot shows through under the legend, and the legend has nothing to
       point at without it -- but at 300 it was a hole, and under the old
       scrim the dashed rectangle in it barely registered, so the owner read
       it as empty ("not looking professional"). Shorter so it is a picture
       and not a pause, and the scrim below opens earlier so the lines the
       legend names are actually legible. 84 on top for the same reason as
       section 01: a phone should not carry more air than a desktop. */
    padding: 84px 0 216px;
  }

  /* Heavy through EVERY line of text -- the copy, the four steps, the link
     and the legend, which ends at 74% of the section at 390 -- and open only
     in the band below the legend, where the lot is the content.

     CORRECTED 2026-09-13. The 09-12 version of this rule said "OPEN by the
     middle" and did exactly that: 42% ink at 48%, 6% at 62%. The middle is
     where the steps sit. So the rectangle's dashed top edge ran straight
     through "03 Choose the work" and along SEE EVERY PUBLISHED RATE -- the
     owner's own screenshot showed it and the fix was flagged, not made.

     WHY THE PHOTOGRAPH CANNOT BE MOVED INSTEAD. background-size is cover on
     a 390x817 strip; a 1672x941 image scales to the HEIGHT there, 1452px
     wide, so there is horizontal slack and zero vertical slack. Three
     values of background-position-y rendered pixel-identical. The
     rectangle sits where it sits on a phone; only the shade can decide
     what is legible over it. */
  .home-story--measured::before {
    background:
      linear-gradient(180deg, rgba(7, 16, 11, 0.96) 0%, rgba(7, 16, 11, 0.9) 40%, rgba(7, 16, 11, 0.86) 64%, rgba(7, 16, 11, 0.5) 74%, rgba(7, 16, 11, 0.08) 84%, rgba(7, 16, 11, 0) 93%, var(--home-ink-soft) 100%);
  }

  .home-measured__body {
    max-width: none;
    padding: 0 clamp(22px, 6vw, 40px);
  }

  /* The legend leaves the corner and goes into the flow AFTER the copy: on a
     phone the copy is the full width, so a corner-anchored legend landed on
     the steps. Below it, the lot shows through the bottom of the section. */
  .home-story__measured {
    display: flex;
    flex-direction: column;
  }

  .home-measured__shot {
    inset: auto;
    margin: 28px 0 0;
    order: 2;
    position: static;
  }

  .home-measured__shot::after {
    display: none;
  }

  .home-measured__shot figcaption {
    justify-items: start;
    max-width: none;
    padding: 0 clamp(22px, 6vw, 40px);
    position: static;
    text-align: left;
  }

  .home-legend {
    flex-direction: row;
  }

  .home-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }

  .home-steps li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---- The Founding Ten band --------------------------------------------
   A band, not a section: the four rates moved to the pricing page, where a
   customer is actually comparing them, and what stays here is the claim and
   a way to check it. */
.home-founding {
  background: var(--home-ink-soft);
  /* No rule: the aerial above feathers into this exact colour and the 219
     photograph below develops out of it (owner, 2026-09-02). */
  border-top: none;
  /* 6vw, not clamp(22px, 4.5vw, 76px) (2026-09-05). With the clamp this band
     happened to agree with sections 01 and 04 on a wide screen -- their
     1180px wrapper's centring made up the difference -- and drifted 15px left
     of them below about 1300, which is most laptops. Same padding as
     .home-story now, so it tracks them at every width instead of at one. */
  padding: 40px 6vw;
}

/* OWNER 2026-09-03, choosing between three rendered options: TWO columns.
   The heading holds the left; the sentence and the link stack beside it.
 *
 * What this replaces (owner, 2026-09-02, "fix the spacing"): heading /
 * sentence / link across one baseline-aligned line. That stretched three
 * items over the full 1180px measure and left 211px of nothing between the
 * sentence and the link, and it squeezed the sentence into a 417px column
 * that wrapped it to two cramped lines.
 *
 * Her version is SHORTER than the row it replaces -- 149px against 158 --
 * while giving the sentence 853px instead of 417, so it sits on one line.
 * That works because the heading and the two stacked lines are near enough
 * the same height that the heading stops being something the row has to make
 * space around and becomes the left edge of the block. Nothing reaches across
 * the page any more, so there is no hole to leave.
 *
 * Rows: 1 the label, 2 the sentence, 3 the link. The heading spans 2 and 3. */
/* THE TWO-COLUMN BAND (owner's pick from three rendered options,
   2026-09-03): the heading holds the left, the sentence and the link stack
   beside it. Reverted here 2026-09-05 after a day as a .home-story section --
   "revert the structure, keep the fix."

   THE FIX, which is what was actually wrong:

   1. TYPE SCALE. The band was the one section that was not a .home-story, so
      it inherited none of the shared type and carried its own: an h2 at
      clamp(1.5rem, 2.2vw, 2rem) against every other section's
      clamp(2rem, 3.4vw, 2.9rem), and its own 1.02rem body line. The heading
      was not looking smaller, it WAS smaller, by two steps. Both now read
      from the same declarations the story sections use, further down.

   2. THE SENTENCE'S LEFT EDGE MOVED. `grid-template-columns: auto minmax(0,
      1fr)` sized the first column to the HEADING, and the heading is
      rewritten on every request -- "The Founding Ten." / "Reserve your
      route." / "Start this season." -- so the sentence started at a different
      x in each rate state, and nobody would ever see two states side by side
      to catch it. The column is a fixed measure now, wide enough for the
      longest heading at the new size, so the sentence's left edge is the same
      in every state. */
.home-founding__wrap {
  align-items: start;
  column-gap: clamp(28px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1180px;
  row-gap: 12px;
}

.home-founding .home-story__label {
  grid-column: 1 / -1;
  margin: 0;
}

.home-founding h2 {
  grid-column: 1;
  grid-row: 2 / 4;
}

.home-founding__line {
  grid-column: 2;
  grid-row: 2;
  /* The Worker rewrites this element by class on every request; the measure
     is its own, so a longer sentence in another rate state still breaks
     before the full column. */
  max-width: 92ch;
}

.home-founding .home-story__link {
  grid-column: 2;
  grid-row: 3;
  /* Bigger with the sentence it belongs to (owner, 2026-09-05). Every other
     __link on the page keeps 0.72rem. */
  font-size: 0.84rem;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .home-founding__wrap {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .home-founding h2,
  .home-founding__line,
  .home-founding .home-story__link {
    grid-column: auto;
    /* The desktop grid places these on explicit rows; one column stacks them
       in source order, so the placement has to be cleared, not just the
       column, or the heading spans two rows it no longer has. */
    grid-row: auto;
  }

  .home-founding .home-story__link {
    margin-top: 4px;
    white-space: normal;
  }
}




.home-story__label {
  margin: 0 0 14px;
}

@media (max-width: 700px) {
  .home-story.home-story--edge {
    background-position: 50% 84%;
    padding-bottom: 120px;
  }

  /* The phone scrim replaces the desktop one wholesale, so it has to carry
     its own feathers: the top opens in the hero's exit ink, and the foot
     melts into the ink section 02 develops from. Without the second one the
     asphalt ran straight into a line (owner's phone, 2026-09-02). */
  .home-story--edge::before {
    background:
      linear-gradient(180deg, #07100b 0%, rgba(8, 20, 14, 0.93) 22%, rgba(8, 20, 14, 0.9) 58%, rgba(8, 20, 14, 0.6) 76%, rgba(8, 20, 14, 0.12) 88%, rgba(7, 16, 11, 0.55) 95%, #07100b 100%);
  }
}

.home-story__label {
  margin: 0;
}

@media (max-width: 900px) {
  .home-story__measured {
    grid-template-columns: 1fr;
  }

  .home-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }

  .home-steps li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}

.home-story__label {
  color: var(--home-eyebrow);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 6px 0 0;
  text-transform: uppercase;
}

/* The HEADINGS are listed together (owner, 2026-09-05: bring the band "to the
   same scale as 01, 02 and 04"). One declaration, so they cannot drift.
   The band's SENTENCE and LINK are no longer in that arrangement -- see
   .home-founding__line below, same day, same owner. */
.home-story h2,
.home-founding h2 {
  color: var(--home-cream);
  font-family: var(--home-narrow);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.02;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.home-story p {
  color: var(--home-muted);
  font-family: var(--home-sans);
  font-size: 1.06rem;
  line-height: 1.65;
  margin: 0 0 14px;
  max-width: 60ch;
}

/* THE BAND SETS ITS OWN SIZE AGAIN (owner, 2026-09-05: "make the first ten
   weekly and what the founding ten is text bigger").
   Earlier the same day she asked for the band to match sections 01, 02 and
   04, and it was folded into the rule above. That still holds for the
   HEADING. The sentence is a different job from a story paragraph: it is the
   offer, it is one sentence long, and it is the only copy in the band. It
   is written by the Worker on every request, so nothing here may depend on
   its length. */
.home-founding__line {
  color: var(--home-cream);
  font-family: var(--home-sans);
  font-size: 1.28rem;
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 60ch;
}

/* The one line in a story section that a skimmer is guaranteed to read.
   Owner, 2026-08-31: the three text sections between the two photos were
   "a lot reading to understand a company for someone skimming" -- so each
   one now leads with a statement at the inner-lede metrics the rest of the
   site already uses, and the explanation follows in small type. */
.home-story p.home-story__lede {
  color: var(--home-cream);
  font-family: var(--home-sans);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 18px;
  max-width: 24ch;
}

.home-story p strong {
  color: var(--home-cream);
}

/* OWNER 2026-09-05: "home-story__link should be rust -- that covers 'What
   the Founding Ten is' and 'See every published rate' together." It was
   written rust here and rendered cream on all three: `.home-page a { color:
   inherit }` is (0,1,1) and beat this rule's (0,1,0). The class carries the
   type name so the specificity is stated rather than nudged. */
/* OWNER 2026-09-05 ASKED WHETHER THIS READS AS A LINK: "do I think it's clear
   that the weekly mowing number is not hyperlink and the what the founding
   ten is?" It does not, and it cannot: this rule and .home-story__label are
   IDENTICAL -- same rust, same 0.72rem, same 700 weight, same 0.2em tracking,
   same uppercase. "03 / WEEKLY MOWING" and "WHAT THE FOUNDING TEN IS" differ
   by an arrow.
   A resting underline was tried and REVERTED the same hour: test/rustLinks
   holds her own rule from 2026-08-30, "None of them should be underlined --
   a rust link rests bare; the underline appears on hover only." Both real
   answers to her question contradict something she has already decided, so
   this waits for her rather than being nudged. The only change here is the
   band's own size bump, below. */
.home-page a.home-story__link {
  color: var(--home-rust);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.home-story__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Steps: the number rides INLINE with the title (owner, 2026-08-30: "the
   second section is pushed over to the right" -- a number column indented
   this section's text against every other section's). One left edge. */
.home-story__steps {
  display: grid;
  gap: 20px;
  margin: 8px 0 6px;
  /* Same measure as the rates strip and the text (owner, 2026-08-30: the
     step hairlines ran to the container edge while everything else stopped
     at the reading column -- two different right edges for no reason). */
  max-width: 640px;
}

.home-story__step {
  border-top: 1px solid var(--home-line);
  padding-top: 16px;
}

.home-story__step-title {
  color: var(--home-cream);
  font-family: var(--home-narrow);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.home-story__step-title i {
  color: var(--home-rust);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-right: 14px;
  vertical-align: 2px;
}

.home-story__rates {
  border-top: 1px solid var(--home-line);
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 26px 0 22px;
  max-width: 640px;
  padding-top: 22px;
}

.home-story__rate strong {
  color: var(--home-cream);
  display: block;
  font-family: var(--home-narrow);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.home-story__rate span {
  color: var(--home-muted);
  display: block;
  font-family: var(--home-sans);
  font-size: 0.85rem;
  margin-top: 6px;
}

/* ---- Section 04: the Route 219 photograph ----------------------------
   The owner's own windshield sunrise on the road the company is named
   for, dashboard deliberately in frame. Three background layers: the
   scrim feather (page ink, opaque at the top, dissolving over the first
   third -- the professional transition from the flat section above: no
   border, no seam, the photo develops out of the dark), a lateral shade
   that keeps the left reading column solid while the sunrise breathes on
   the right, and the photo itself anchored to its BOTTOM edge so the
   hood and wipers stay in frame. */
.home-story--photo {
  background:
    linear-gradient(180deg, var(--home-ink-soft) 0%, rgba(16, 24, 17, 0.7) 16%, rgba(7, 16, 11, 0.5) 34%, rgba(7, 16, 11, 0.45) 62%, rgba(7, 16, 11, 0.82) 88%, #07100b 100%),
    linear-gradient(100deg, rgba(7, 16, 11, 0.55) 0%, rgba(7, 16, 11, 0.28) 55%, rgba(7, 16, 11, 0.12) 100%),
    url("/assets/rt219-sunrise.jpg") center bottom / cover no-repeat;
  border-top: none;
  /* Trimmed 2026-09-07 ("it looks too big still"). 230px of empty photo above
     the copy and 150 below was 380px of padding on a section carrying about
     sixty words. The photograph still reads; it just does not hold the page
     open on its own. */
  padding-bottom: 104px;
  padding-top: 128px;
}

.home-story--photo .home-story__wrap {
  align-items: start;
  gap: 60px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.home-story--photo .home-story__label {
  grid-column: 1 / -1;
  margin: 0 0 26px;
}

/* The road's name at the hero's own scale and metrics -- same face, same
   tracking, same leading, so the page closes in the voice it opened in
   (owner, 2026-08-30: "the font looks different" caught a looser
   tracking; it is now the hero's exactly). */
.home-story--photo h2 {
  font-size: clamp(4.4rem, 8.2vw, 7.6rem);
  grid-column: 2;
  grid-row: 2;
  letter-spacing: -0.035em;
  line-height: 0.75;
  margin: 0;
  text-align: right;
}

.home-story__body {
  grid-column: 1;
  grid-row: 2;
}

.home-story--photo p {
  color: #e4e1d8;
}

/* The closing: the same block every other page carries, so it keeps the
   closing family's words and metrics (no period, tight tracking), not
   the story sections' -- owner, 2026-08-30: "is that consistent with
   all our other stuff?" */
/* The closer's own band (2026-09-07). It was a block inside 04 with a 190px
   top margin; the offset is the section's padding now, and the ground is ink
   rather than the Route 219 photograph. */
.home-close {
  background: var(--home-ink);
  border-top: none;
  padding: 0;
}

.home-story__close {
  margin: 0 auto;
  max-width: 720px;
  /* 150/150 was 300px of air around a heading, one line and a field
     (2026-09-07). */
  padding: 104px 0 116px;
  text-align: center;
}

.home-story__close h2 {
  font-size: clamp(2.7rem, 4.2vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin: 0 0 18px;
  text-align: center;
}

.home-story__close p {
  margin-left: auto;
  margin-right: auto;
}

.home-story__finder {
  margin: 26px auto 0;
  max-width: 560px;
}

@media (max-width: 840px) {
  .home-story {
    padding: 60px 6vw;
  }

  /* Two classes on purpose: this block is LATER in the file than the edge
     section's own rules, so a single-class rule there loses to the line
     above and the cut strip ends up under the last sentence. */
  .home-story.home-story--edge {
    /* 2026-09-12. This was 140 over 196, and the 196 had a reason dated
       2026-09-05: "the caption sits in this padding ... the asphalt now
       starts above the caption." There is no caption. The section's only
       text is the label, the heading and the one paragraph, all ABOVE the
       photo; the strip below them held space for a line that was cut and
       never told the stylesheet. Same shape as the labor-rate field: a
       value outliving the thing it was made for. The owner, on her phone:
       "the mobile site is not looking professional" -- and this band was
       a third of a screen of nothing after the asphalt.

       What stays is the cut edge itself, which is the argument of the
       section: enough room below the paragraph for the grass line and the
       asphalt to read as a photograph, not a hole. 140 on top became 72
       because a phone had MORE air above the label than a desktop (96),
       which is backwards. Measured at 390. */
    padding-bottom: 112px;
    padding-top: 72px;
  }

  .home-story__wrap {
    gap: 14px;
    grid-template-columns: 1fr;
  }

  .home-story__label {
    margin-top: 0;
  }

  .home-story__rates {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-story--photo {
    padding-bottom: 72px;
    padding-top: 84px;
  }

  /* Must repeat the specificity of the desktop rule, or the two-column
     grid survives onto phones and crushes the copy into a sliver. */
  .home-story--photo .home-story__wrap {
    gap: 14px;
    grid-template-columns: 1fr;
  }

  /* And release the desktop row pins, or the title renders BELOW the
     body copy: heading first, then the story. */
  .home-story__body {
    grid-column: auto;
    grid-row: auto;
  }

  /* One column on a phone: the title leads, at the hero's own mobile
     scale, left-aligned like everything else at this width. */
  .home-story--photo h2 {
    font-size: clamp(3.2rem, 15vw, 4.4rem);
    grid-column: auto;
    grid-row: auto;
    line-height: 0.78;
    margin-bottom: 10px;
    text-align: left;
  }

  .home-story__close {
    padding: 76px 0 84px;
  }

  .home-story__close h2 {
    font-size: clamp(2.2rem, 8.4vw, 3.2rem);
    line-height: 0.94;
  }
}

/* ---- PHONES: THE WORDS COME OFF THE PHOTOGRAPHS (2026-09-16) -------------
   Owner: "the words cover the entire photo so it looks funny." True of all
   three photo sections at phone width. On a desktop the copy sits BESIDE the
   picture in two columns; on a phone it sat ON it, and the only way to keep
   words legible over a photograph is to shade the photograph until it is not
   one. Every scrim tuned on 09-05, 09-12 and 09-13 was that fight, and the
   09-13 dash-under-the-link fix was the fourth round of it.

   So below 900px the sections stop painting a background and stop shading
   anything: the words sit on ink, and the photograph follows them in flow,
   full width, untouched. 01 and 04 carry a phone-only <figure> for it. 02
   already had an in-flow <img> -- kept at 1px and opacity 0 "for its alt
   text" -- and on a phone it is simply allowed to be a picture, with the
   legend it always had sitting under it where the lines are. Nothing about
   the desktop changes; .home-story__phone-photo does not exist above 900. */
.home-story__phone-photo { display: none; margin: 0; }

@media (max-width: 900px) {
  .home-story.home-story--edge,
  .home-story.home-story--photo,
  .home-story.home-story--measured {
    background-image: none;
    background-color: var(--home-ink);
    padding-bottom: 0;
  }
  .home-story--edge::before,
  .home-story--photo::before,
  .home-story--measured::before {
    display: none;
  }
  /* Edge to edge, like 02's aerial: the section pads 6vw each side at every
     width under 900, and a photograph inset by that on a 390px phone reads
     as a thumbnail. Negative margins pull it back out to the viewport. The
     width/height attributes on each <img> are the files' REAL pixel sizes
     (1536x864, 1776x1800), read with `file`, not typed from memory -- the
     first pass had 1600x1067 on both, which was a number nobody measured. */
  .home-story__phone-photo {
    display: block;
    margin: 36px -6vw 0;
  }
  .home-story__phone-photo img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* 02: the hidden img becomes the picture. */
  .home-measured__shot img {
    display: block;
    height: auto;
    opacity: 1;
    position: static;
    width: 100%;
  }
  .home-measured__shot {
    margin: 36px 0 0;
  }
  .home-measured__shot figcaption {
    margin-top: 14px;
  }
}