@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 {
  --home-ink: #07100b;
  --home-ink-soft: #101811;
  --home-cream: #f1eadf;
  --home-muted: #c8c7c1;
  --home-rust: #b5532f;
  --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;
}

.home-page button,
.home-page 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;
}

.mobile-menu__phone {
  display: grid;
  font-family: var(--home-narrow);
  font-size: 0.9rem;
  gap: 5px;
  letter-spacing: 0.12em;
  margin-top: 30px;
  text-transform: uppercase;
}

.mobile-menu__phone strong {
  font-size: 1.6rem;
}

body.menu-open {
  overflow: hidden;
}

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

.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;
  padding: clamp(156px, 19vh, 206px) 0 148px clamp(44px, 8vw, 126px);
  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));
  left: clamp(44px, 8vw, 126px);
  position: absolute;
  right: clamp(44px, 8vw, 126px);
  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%;
    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;
    padding: 48px 26px 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);
}

.home-finder:focus-within {
  border-color: var(--home-rust);
  box-shadow: 0 0 0 2px var(--home-rust);
}

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