html {
  overflow-x: hidden;
}

.inner-page {
  --inner-pine: #060807;
  --inner-ivory: #F2EFE6;
  --inner-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. */
  --inner-eyebrow: #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(--inner-pine);
  color: var(--inner-ivory);
  overflow-x: hidden;
  width: 100%;
}

.inner-page main,
.inner-hero,
.inner-content {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.inner-page .home-header {
  background: var(--inner-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;
}

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

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

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

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

/* OWNER: "between each page ... it should almost feel like the only thing
   changing on top is the words."
   
   The band was content-sized, so a longer title made a taller black block and
   moving between pages felt like the furniture shifting. Measured across the
   inner pages it ran 276, 276, 276, 286 and 373px.

   Fixed now. The band is one height everywhere and the copy sits on its
   baseline, so the words change and nothing else does. min-height rather than
   height, so a title that genuinely needs more room still gets it instead of
   being clipped. */
.inner-hero {
  align-items: end;
  background: var(--inner-pine);
  color: var(--inner-ivory);
  display: grid;
  min-height: 300px;
}

.inner-hero__copy {
  margin: 0 auto;
  max-width: 1360px;
  /* 24px, not 42px, at the narrow end. At 320px the old floor left 236px for
     the headline and "HANDLED." needs about 240, so the band scrolled
     sideways -- only on the one page whose headline has a long word in it.
     24px also lines the headline up with the content below, which uses the
     same floor. */
  padding: clamp(64px, 6.2vw, 94px) clamp(24px, 7vw, 112px) clamp(70px, 6.5vw, 98px);
  width: 100%;
}

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

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

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

.inner-hero h1 {
  color: var(--inner-ivory);
  font-size: clamp(4rem, 6.1vw, 7rem);
  letter-spacing: -0.035em;
  line-height: 0.84;
  max-width: 980px;
}

.inner-content {
  background: var(--inner-ivory);
  color: var(--inner-pine);
  padding: 0 clamp(24px, 7vw, 112px);
}

.inner-content__wrap {
  margin: 0 auto;
  max-width: 1220px;
  width: 100%;
}

.inner-row {
  align-items: start;
  border-bottom: 1px solid rgba(6, 8, 7, 0.22);
  display: grid;
  gap: clamp(50px, 7vw, 108px);
  grid-template-columns: minmax(250px, 0.72fr) minmax(480px, 1.28fr);
  padding: clamp(64px, 6vw, 86px) 0;
}

.inner-row:last-child {
  border-bottom: 0;
}

.inner-row__heading {
  display: grid;
  gap: 15px;
}

.inner-row__heading h2,
.inner-row__heading h3 {
  border-bottom: 1px solid var(--inner-pine);
  color: var(--inner-pine);
  font-size: clamp(2.7rem, 4.2vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 0.9;
  padding-bottom: 22px;
}

.inner-row__body {
  max-width: 720px;
  min-width: 0;
}

.inner-lede {
  color: var(--inner-pine);
  font-family: var(--home-narrow);
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.03;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.inner-copy {
  color: var(--inner-pine);
  font-size: clamp(1.05rem, 1.22vw, 1.2rem);
  line-height: 1.62;
  margin: 0;
  max-width: 700px;
}

.inner-copy + .inner-copy {
  margin-top: 18px;
}

.inner-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}

.inner-button {
  align-items: center;
  background: var(--inner-pine);
  border: 1px solid var(--inner-pine);
  color: var(--inner-ivory) !important;
  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;
}

/* OWNER 2026-08-30, after comparing every rust link on the site: "None of
   them should be underlined." Resting state is bare rust everywhere; the
   underline appears on hover only (the treatment the owner approved for the
   pricing tables). The border-bottom fakes came off in the same sweep. */
.inner-text-link {
  color: var(--inner-rust) !important;
  font-family: var(--home-narrow);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  padding: 7px 0 5px;
  text-transform: uppercase;
}

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

.contact-intro {
  margin-bottom: 28px;
}

.contact-list {
  border-top: 1px solid var(--inner-pine);
  display: grid;
}

.contact-item {
  align-items: center;
  border-bottom: 1px solid rgba(6, 8, 7, 0.35);
  display: grid;
  gap: 18px;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  min-height: 88px;
  padding: 17px 0;
}

.contact-item--phone {
  grid-template-columns: minmax(0, 1fr) auto;
}

.contact-item__value--phone {
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
}

.contact-item__label {
  color: var(--inner-eyebrow);
  font-family: var(--home-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.contact-item__value {
  color: var(--inner-pine) !important;
  font-family: var(--home-narrow);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.05;
  min-width: 0;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.contact-item__action {
  color: var(--inner-rust) !important;
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 5px 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact-item__actions {
  align-items: center;
  display: flex;
  gap: 14px;
}

.contact-socials {
  border-top: 1px solid var(--inner-pine);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 30px;
  padding-top: 20px;
}

.contact-socials a {
  color: var(--inner-rust) !important;
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding-bottom: 4px;
  text-transform: uppercase;
}

@media (max-width: 1040px) and (min-width: 841px) {
  .inner-row {
    gap: 48px;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  }

  .contact-item {
    grid-template-columns: 120px minmax(0, 1fr) auto;
  }

  .contact-item--phone {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 840px) {
  .inner-hero__copy {
    padding: 58px 42px 66px;
  }

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

  .inner-content {
    padding: 0 42px;
  }

  .inner-row {
    gap: 24px;
    grid-template-columns: 1fr;
    padding: 46px 0 50px;
  }

  .inner-row__heading {
    gap: 11px;
  }

  .inner-row__heading h2,
.inner-row__heading h3 {
    font-size: clamp(2.2rem, 8.4vw, 3.2rem);
    line-height: 0.94;
    padding-bottom: 16px;
  }

  .inner-lede {
    font-size: clamp(1.45rem, 5.8vw, 1.95rem);
    line-height: 1.06;
    margin-bottom: 16px;
  }

  .inner-copy {
    font-size: clamp(1.04rem, 4.35vw, 1.24rem);
    line-height: 1.52;
  }

  .inner-actions {
    align-items: stretch;
    display: grid;
    gap: 14px;
    margin-top: 28px;
  }

  .inner-button {
    min-height: 58px;
    width: 100%;
  }

  .inner-text-link {
    justify-self: start;
    font-size: 0.96rem;
  }

  .about-facts {
    grid-template-columns: 1fr;
  }

  .about-fact,
  .about-fact + .about-fact {
    border-bottom: 1px solid rgba(6, 8, 7, 0.3);
    border-right: 0;
    padding: 17px 0;
  }

  .about-fact:last-child {
    border-bottom: 0;
  }

  .contact-item,
  .contact-item--phone {
    align-items: start;
    gap: 8px;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px 0 20px;
  }

  .contact-item__value {
    font-size: clamp(1.55rem, 6.7vw, 2.05rem);
  }

  .contact-item__value--phone {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }

  .contact-item--email .contact-item__value {
    font-size: clamp(1.2rem, 5.3vw, 1.55rem);
    line-height: 1.12;
  }

  .contact-item__actions {
    margin-top: 4px;
  }

  .contact-item__action {
    font-size: 0.88rem;
  }

  .contact-socials {
    display: grid;
    gap: 16px;
  }
}

@media (max-width: 420px) {
  .inner-hero__copy,
  .inner-content {
    padding-left: 24px;
    padding-right: 24px;
  }

  .inner-hero__copy {
    padding-top: 44px;
    padding-bottom: 52px;
  }

  .inner-row {
    padding: 42px 0 46px;
  }

  .inner-row__heading h2,
.inner-row__heading h3 {
    font-size: clamp(2.1rem, 9vw, 2.9rem);
  }

  .contact-item__value {
    font-size: clamp(1.42rem, 6.8vw, 1.85rem);
  }

  .contact-item__value--phone {
    font-size: clamp(1.8rem, 8.2vw, 2.2rem);
  }

  .contact-item--email .contact-item__value {
    font-size: clamp(1.12rem, 5.1vw, 1.38rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-page *,
  .inner-page *::before,
  .inner-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* v16 combined About + Contact foundation */
.inner-hero--contact {
  scroll-margin-top: 0;
}

.inner-contact-title {
  color: var(--inner-ivory);
  font-size: clamp(4rem, 6.1vw, 7rem);
  letter-spacing: -0.035em;
  line-height: 0.84;
  max-width: 980px;
}

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

/* v17 combined About + Contact foundation corrections */
/* About remains editorial/narrative; Contact is intentionally utility-first. */
.about-page .inner-row {
  /* Hairline restored 2026-08-27 (owner: "missing the very faint thin line
     in between each section"). It was zeroed here when About was
     narrative-only; now that Contact's rows are siblings in the same
     pattern, the sections need the same separation every other page has. */
  border-bottom: 1px solid rgba(6, 8, 7, 0.18);
  padding-top: 54px;
  padding-bottom: 54px;
}

.about-page .inner-row:last-child {
  border-bottom: 0;
}

.about-page .inner-row:first-child {
  padding-top: 58px;
  padding-bottom: 46px;
}

.about-page .inner-row:nth-child(2) {
  padding-top: 48px;
  padding-bottom: 56px;
}

.about-page .inner-row:last-child {
  padding-top: 50px;
  padding-bottom: 72px;
}

.about-page .inner-row:last-child .inner-actions {
  margin-top: 28px;
}

/* Build note badge — kept for any inner page that flags in-progress work.
   (Its original second user, /start-service/, was retired 2026-08-29.) */
.build-note {
  border: 1px solid color-mix(in srgb, var(--inner-rust) 55%, transparent);
  color: var(--inner-rust);
  display: inline-block;
  font-family: var(--home-bold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
  padding: 6px 8px 5px;
  text-transform: uppercase;
}

.build-note--inline {
  margin-top: 18px;
}

/* Contact does not reuse the numbered editorial-row component. */
.inner-content--contact {
  padding-top: 0;
  padding-bottom: 0;
}

.contact-content {
  padding-top: clamp(58px, 5vw, 76px);
  padding-bottom: clamp(58px, 4.8vw, 74px);
}

/* This page is a single flowing column, not the two-column layout these
   elements were originally styled for. margin-left:auto was leftover from
   that older structure and pushed the phone/email/service-area block to
   the right while the blurb above it (a plain paragraph, no such rule)
   stayed left-aligned — visually splitting one column into two. */
.contact-utility,
.contact-section,
.contact-blurb,
.contact-actions {
  max-width: 760px;
  width: 100%;
}

.contact-utility {
  display: grid;
  gap: 2px;
  font-style: normal;
}

.contact-method {
  display: grid;
  gap: 9px;
}

.contact-method__label {
  color: var(--inner-eyebrow);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0;
  text-transform: uppercase;
}

.contact-method__value {
  align-items: baseline;
  color: var(--inner-pine) !important;
  display: inline-flex;
  font-family: var(--home-narrow);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-style: normal;
  font-weight: 700;
  gap: 9px;
  justify-self: start;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-decoration: none;
}

.contact-method__value--email {
  /* No nowrap on desktop: at narrower desktop widths, forcing this long
     address onto one line made it look cramped next to the much larger
     phone number. Allowing a wrap keeps it readable at a comfortable size.
     Mobile keeps nowrap at a smaller size (see media queries), where it fits. */
  font-size: clamp(1.4rem, 2.35vw, 2.1rem);
  overflow-wrap: anywhere;
  text-transform: none;
}

.contact-method__alt:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-method__value span,
.contact-section__link span {
  color: var(--inner-rust);
}

.contact-section {
  border-top: 1px solid rgba(6, 8, 7, 0.24);
  margin-top: 52px;
  padding-top: 46px;
}

.contact-section h3 {
  color: var(--inner-pine);
  font-size: clamp(2.35rem, 3.7vw, 3.8rem);
  letter-spacing: -0.03em;
  line-height: 0.92;
  margin-bottom: 26px;
}

.contact-section .inner-lede {
  margin-bottom: 12px;
}

/* OWNER 2026-08-30 rust-type inventory: every small rust label on the site
   carries the eyebrow spec — 0.72rem / 700 / uppercase / 0.2em. The About
   links and socials were at 0.92rem narrow and 0.88rem, the odd ones out. */
.contact-section__link {
  color: var(--inner-rust) !important;
  display: inline-flex;
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  gap: 8px;
  letter-spacing: 0.2em;
  margin-top: 22px;
  text-transform: uppercase;
}

.contact-socials {
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 0;
  padding-top: 0;
}

.contact-socials a {
  border-bottom: 0;
  font-size: 0.92rem;
  padding-bottom: 0;
}

@media (max-width: 840px) {

  .about-page .inner-row,
  .about-page .inner-row:first-child,
  .about-page .inner-row:nth-child(2) {
    padding-top: 40px;
    padding-bottom: 42px;
  }

  .about-page .inner-row:last-child {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .contact-content {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .contact-utility,
  .contact-section {
    margin-left: 0;
    max-width: none;
  }

  .contact-method__value--email {
    /* Wrapping is fine here; a readable address beats a cramped single line. */
    font-size: clamp(1.05rem, 4.4vw, 1.3rem);
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
  }

  .contact-section {
    margin-top: 44px;
    padding-top: 40px;
  }

  .contact-section h3 {
    font-size: clamp(1.95rem, 7.8vw, 2.75rem);
    margin-bottom: 24px;
  }

  .contact-socials {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
  }

  .contact-socials a {
    font-size: 0.88rem;
  }
}

@media (max-width: 420px) {

  .contact-method__value--email {
    font-size: clamp(1rem, 4.2vw, 1.15rem);
  }
}

/* REMOVED 2026-08-29 (owner item 13): a v18 "polish" gave About's eyebrows
   1rem against the 0.72rem every other page uses -- the "bigger rust" she
   spotted above Born on Route 219. She weighed keeping it ("it might look
   better im not sure"); the call is one eyebrow size site-wide, because a
   reader moving between pages reads a size change as a meaning change, and
   there is none. If the eyebrows should be bigger, they get bigger
   everywhere, in the base rule. */

/* v20 Service Area foundation */
.service-area-content {
  padding-top: 0;
  padding-bottom: 0;
}

.service-area-section {
  align-items: start;
  display: grid;
  gap: clamp(50px, 7vw, 108px);
  grid-template-columns: minmax(250px, 0.72fr) minmax(480px, 1.28fr);
  /* The left column is a short heading and the right is a long list, so the
     stock bottom rhythm left a ~140px band of nothing under the towns before
     the divider. Trimmed for this page only -- these sections are not used
     anywhere else. */
  padding: clamp(56px, 5vw, 74px) 0 clamp(52px, 4.4vw, 66px);
}

.service-area-section__heading h2 {
  border-bottom: 1px solid var(--inner-pine);
  color: var(--inner-pine);
  font-family: var(--home-narrow);
  font-size: clamp(2.7rem, 4.2vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin: 0;
  padding-bottom: 22px;
  text-transform: uppercase;
}

.service-area-section__body {
  max-width: 760px;
  min-width: 0;
}

.service-area-list {
  column-count: 3;
  column-gap: clamp(28px, 4vw, 54px);
  list-style: none;
  margin: 42px 0 0;
  padding: 0;
}

.service-area-list li {
  break-inside: avoid;
  color: var(--inner-pine);
  font-family: var(--home-narrow);
  font-size: clamp(1.15rem, 1.45vw, 1.42rem);
  font-weight: 700;
  /* OWNER: "the dashes on Based in Colden are alternating different, do we
     want that?" No -- and it was not a choice. Every dash is the same drawn
     2px bar, but a 1.15 line-height on a fluid font size made each row start
     on a different fraction of a pixel (.64, .30, .95, .61, .27 ...). A 2px
     bar at y=.64 rasterises crisp; the same bar at y=.30 splits across two
     pixel rows and renders thin and grey. Hence the alternating.

     A whole-number row pitch lands every row, and so every dash, on the same
     sub-pixel offset. 34px covers the largest font size the clamp reaches. */
  line-height: 20px;
  margin: 0 0 14px;
  min-height: 20px;
  padding-left: 18px;
  position: relative;
  text-transform: uppercase;
}

.service-area-list li::before {
  background: var(--inner-rust);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0.52em;
  width: 9px;
}

.service-area-actions {
  margin-top: 36px;
}

@media (max-width: 1040px) and (min-width: 841px) {
  .service-area-section {
    gap: 48px;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  }

  .service-area-list {
    column-count: 2;
  }
}

@media (max-width: 840px) {
  .service-area-section {
    gap: 24px;
    grid-template-columns: 1fr;
    padding: 48px 0 58px;
  }

  .service-area-section__heading h2 {
    font-size: clamp(2.2rem, 8.4vw, 3.2rem);
    line-height: 0.94;
    padding-bottom: 16px;
  }

  .service-area-list {
    column-count: 2;
    column-gap: 22px;
    margin-top: 34px;
  }

  .service-area-list li {
    font-size: clamp(1.05rem, 4.4vw, 1.28rem);
    margin-bottom: 15px;
    padding-left: 15px;
  }

  .service-area-list li::before {
    width: 8px;
  }

  .service-area-actions {
    margin-top: 30px;
  }
}

@media (max-width: 420px) {
  .service-area-section {
    padding: 44px 0 52px;
  }

  .service-area-list {
    column-gap: 16px;
  }

  .service-area-list li {
    font-size: clamp(0.98rem, 4.25vw, 1.12rem);
    padding-left: 13px;
  }
}

/* v21 Service Area ZIP fallback: visible town list stays primary; ZIP is only for unlisted smaller communities. */
/* This block used to be a standalone card with its own eyebrow, heading and
   copy, so it carried a divider rule and 120px of air. The heading and copy
   were later moved out to the section header, but the rule and the padding
   stayed -- leaving a horizontal line that separates a paragraph from the
   field that belongs to it, with a dead 120px band around it. The section
   already provides the heading and the separation, so the block just needs
   room to breathe under the copy. */
.service-area-zip {
  margin-top: 26px;
}

.service-area-zip__eyebrow {
  color: var(--inner-eyebrow);
  font-family: var(--home-bold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 13px;
  text-transform: uppercase;
}

.service-area-zip h3 {
  color: var(--inner-pine);
  font-family: var(--home-narrow);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.94;
  margin: 0;
  text-transform: uppercase;
}

.service-area-zip__copy {
  color: var(--inner-pine);
  font-family: var(--home-regular);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 590px;
}

.service-area-zip__form {
  margin-top: 26px;
  max-width: 520px;
}

.service-area-zip__form > label {
  color: var(--inner-pine);
  display: block;
  font-family: var(--home-bold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 9px;
  text-transform: uppercase;
}

/* OWNER: "get rid of the bright rust outline around the zip code look up.
   that bar and all address bars should be translucent with the instructions
   on the inside and button at the end." Same object as the address box in the
   homepage hero: one bordered field with the button joined to it, the
   instruction living in the placeholder rather than on a label above.

   The rust ring is gone, but NOT the focus indicator -- a field you cannot
   tell you are typing in is worse than a loud one. It is a pine ring now,
   which is visible without shouting. */
.service-area-zip__controls {
  align-items: stretch;
  /* OWNER chose fully transparent over a 42% white fill. On a flat ivory page
     "translucent" and "transparent" look the same -- 42% white over ivory
     rendered as rgb(247,246,240) against a rgb(242,239,230) page, a five to
     ten point difference nobody reads as translucency. It only works on the
     hero, where a photograph is behind it. So: no box, just the field. */
  background: transparent;
  /* OWNER: "the white line on the hero shot is much more subtle and I think
     I like that better than the stark line on the other pages." The hero uses
     cream at 30%; this was pine at 55%, roughly twice as strong. Softened to
     match, so the field is drawn rather than boxed. */
  border: 1px solid color-mix(in srgb, var(--inner-pine) 30%, transparent);
  display: flex;
  flex-wrap: wrap;
  max-width: 520px;
}

/* OWNER 2026-08-30: text boxes are translucent with a hairline edge and
   NOTHING happens to that edge on hover or focus -- no darkening, no glow,
   no thickening. The caret is the focus indicator. (This replaces the
   earlier darken-on-focus treatment.) */
.service-area-zip__controls input {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--inner-pine);
  flex: 1 1 200px;
  font-family: var(--home-regular);
  font-size: 1.02rem;
  min-height: 54px;
  min-width: 0;
  outline: none;
  padding: 0 16px;
}

.service-area-zip__controls input::placeholder {
  color: #6b6e68;
}

.service-area-zip__controls button {
  appearance: none;
  background: var(--inner-pine);
  border: 1px solid var(--inner-pine);
  border-radius: 0;
  color: var(--inner-ivory);
  cursor: pointer;
  font-family: var(--home-bold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  min-height: 50px;
  padding: 0 22px;
  text-transform: uppercase;
}

.service-area-zip__controls button:hover {
  background: var(--inner-rust);
  border-color: var(--inner-rust);
}

.service-area-zip__result {
  color: var(--inner-pine);
  font-family: var(--home-bold);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 15px 0 0;
  min-height: 1.4em;
}

.service-area-zip__result.is-approved {
  color: var(--inner-rust);
}

/* Empty until a ZIP is checked: no margin, no reserved line, so the link
   under it sits where it should (owner, 2026-09-03, item 20). */
.service-area-zip__result:empty {
  margin: 0;
  min-height: 0;
}

.service-area-zip__result.is-outside,
.service-area-zip__result.is-error {
  color: var(--inner-pine);
}

@media (max-width: 840px) {
  .service-area-zip {
    margin-top: 40px;
    padding-top: 34px;
  }

  .service-area-zip h3 {
    font-size: clamp(1.8rem, 7vw, 2.35rem);
  }

  .service-area-zip__copy {
    margin-top: 14px;
  }
}

@media (max-width: 420px) {
  .service-area-zip__controls {
    grid-template-columns: 1fr;
  }

  .service-area-zip__controls button {
    width: 100%;
  }
}

/* v22 FAQ foundation: visible operational answers, no accordion and no duplicated pricing tables. */
.faq-content {
  padding-top: 0;
  padding-bottom: 0;
}

.faq-list {
  padding: clamp(34px, 3.2vw, 48px) 0 0;
}

.faq-item {
  align-items: start;
  border-bottom: 1px solid rgba(6, 8, 7, 0.22);
  display: grid;
  gap: clamp(42px, 6vw, 96px);
  grid-template-columns: minmax(290px, 0.78fr) minmax(420px, 1.22fr);
  padding: clamp(38px, 4vw, 58px) 0;
}

.faq-item:first-child {
  border-top: 1px solid rgba(6, 8, 7, 0.22);
}

.faq-item h2 {
  color: var(--inner-pine);
  font-family: var(--home-narrow);
  font-size: clamp(1.75rem, 2.4vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 0;
  max-width: 430px;
  text-transform: uppercase;
}

.faq-answer {
  max-width: 720px;
  min-width: 0;
}

.faq-answer p {
  color: var(--inner-pine);
  font-family: var(--home-regular);
  font-size: clamp(1.02rem, 1.18vw, 1.15rem);
  line-height: 1.62;
  margin: 0;
}

.faq-answer a {
  color: var(--inner-rust);
  font-family: var(--home-bold);
  font-weight: 700;
  text-decoration: none;
}

.faq-answer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-answer strong {
  font-family: var(--home-bold);
  font-weight: 700;
}

.faq-footer-action {
  display: flex;
  justify-content: flex-end;
  padding: clamp(42px, 4.8vw, 70px) 0 clamp(58px, 6vw, 86px);
}

@media (max-width: 1040px) and (min-width: 841px) {
  .faq-item {
    gap: 48px;
    grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.18fr);
  }
}

@media (max-width: 840px) {
  .faq-list {
    padding-top: 20px;
  }

  .faq-item {
    gap: 16px;
    grid-template-columns: 1fr;
    padding: 34px 0 36px;
  }

  .faq-item h2 {
    font-size: clamp(1.65rem, 7vw, 2.2rem);
    line-height: 1;
    max-width: 620px;
  }

  .faq-answer p {
    font-size: clamp(1rem, 4.2vw, 1.08rem);
    line-height: 1.58;
  }

  .faq-footer-action {
    justify-content: flex-start;
    padding: 38px 0 58px;
  }
}


/* The per-page mobile headline sizes are gone. Each of them was added so one
   long headline would fit, and each left that page's headline a different
   size from its neighbours' -- five sizes across six pages. They are no
   longer needed: the hero's padding floor dropped from 42px to 24px, which
   gives every headline 36px more room at every width, and measuring at 320,
   390 and 430 shows all six fitting the shared size inside the same 300px
   band. The longest wraps to three lines at 320px, which is fine: the band
   aligns its copy to the bottom, so a short headline sits lower with more
   air above it rather than the band changing height. */
/* Mobile: make the contact methods behave as tappable action targets rather
   than plain text links. Same markup, no duplicated button row — the phone,
   text, and email links each become a full-width tap target meeting the
   44px minimum, so acting on them is one thumb tap. */
@media (max-width: 840px) {
  .contact-method {
    border: 1px solid rgba(6, 8, 7, 0.18);
    border-radius: 4px;
    gap: 6px;
    padding: 16px 18px 18px;
  }

  .contact-method__value {
    min-height: 44px;
    align-items: center;
  }

  .contact-method__alt {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* Contact: action buttons first (act now), readable details below (look up,
   copy, save to contacts). Replaces the older label + "send a text instead"
   arrangement, which repeated the same information three ways and left the
   email rendering visibly smaller than the phone. */
/* Buttons are a mobile pattern only (tap to act). On desktop, working
   tel:/mailto: links plus a readable number and address are enough — no
   button row needed there. */
.contact-actions {
  display: none;
}

.contact-action {
  align-items: center;
  background: var(--inner-pine);
  border: 1px solid var(--inner-pine);
  color: var(--inner-cream, #F2EFE6) !important;
  display: inline-flex;
  font-family: var(--home-narrow);
  font-size: 0.92rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.1em;
  min-height: 52px;
  text-decoration: none;
  text-transform: uppercase;
}

.contact-action:hover {
  background: var(--inner-rust);
  border-color: var(--inner-rust);
}

.contact-action:focus-visible {
  outline: 3px solid var(--inner-rust);
  outline-offset: 3px;
}

/* Readable details: phone and email at the SAME size, quieter than the
   buttons above so they support rather than compete. */
.contact-utility {
  display: grid;
  gap: 10px;
}

.contact-utility .contact-method__value--email {
  /* Variant C (owner pick, 2026-08-30, after "the orange font on this page
     still looks funny"): pine values with a small rust caption under each,
     the calculator's own pattern. After the rust consolidation, every other
     rust on the site is either a small-caps label or an in-sentence link --
     these two were the only rust that was big, bold and untracked, which is
     exactly why they read as off. Rust now means one thing everywhere. */
  align-items: flex-start;
  color: var(--inner-pine) !important;
  display: flex;
  flex-direction: column;
  font-family: var(--home-bold);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: 700;
  gap: 4px;
  justify-self: start;
  letter-spacing: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-decoration: none;
  text-transform: none;
}

.contact-utility a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The caption under each contact value -- the site's one small-label spec
   (0.72rem / 700 / uppercase / 0.2em), same as every rust label. */
.contact-method__tag {
  color: var(--inner-rust);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

/* CALL / TEXT / EMAIL: shown by CAPABILITY, not just by width (owner,
   2026-09-05, tapping the number on her phone: "it opens to call, shouldn't
   it open to text").

   The buttons were phone-width-only because sms: does nothing on a desktop.
   But a phone asking for the desktop site reports ~980px, so she got the
   desktop presentation -- one tel: link tagged "Call or text" that can only
   call -- on a device where texting is the fastest way to reach us and the
   page says so two lines above.

   `(hover: none) and (pointer: coarse)` is the device asking, not the window:
   a phone in desktop mode still answers yes, a laptop still answers no. So
   the Text button appears wherever texting actually works, and no dead sms:
   link is added to real desktops.

   2026-10-08: the owner deleted the business line, so Call and Text are gone
   and Email is the one button. The capability rule still decides button
   versus readable address; one column, because there is one button. */
@media (max-width: 840px), (hover: none) and (pointer: coarse) {
  .contact-actions {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    margin-bottom: 26px;
  }

  /* OWNER 2026-09-05: "either the black buttons or the orange links, but I
     don't think we need both. And while the black buttons aren't the norm
     format I think they are way easier on a phone, especially for older
     people." So the device decides which: buttons where tapping is how you
     reach us, the readable phone/email pair where it is not. The number and
     the address are still on the page either way -- the footer carries both
     on every page. This supersedes the UI standards note (Aug 20) that had
     mobile showing the buttons AND the pair. */
  .contact-utility {
    display: none;
  }
}


/* Short line between the action buttons and the readable number/email. */
.contact-blurb {
  color: var(--inner-pine);
  font-family: var(--home-regular);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 14px;
  margin-top: 0;
}

/* Contact section heading (04), reusing .inner-row__heading so it matches
   the numbered sections above it (01 Based here, 02, 03 Four seasons)
   instead of jumping straight into buttons/text with no equivalent header. */
.contact-content .inner-row__heading {
  margin-bottom: 32px;
}

@media (max-width: 840px) {
  .contact-content .inner-row__heading {
    margin-bottom: 24px;
  }
}

/* The contact block opens with its own "Get in touch." band, so its
   numbering restarts at 01 (owner, 2026-08-27). Its last row closes on the
   footer, so it drops the divider rule the stacked rows above it carry. */
.inner-row--last {
  border-bottom: 0;
}

/* Service area sections carry rust numbers like every other numbered section
   on the site (owner, 2026-08-27). "Check your ZIP" was a subheading buried
   under the town list; it is a real tool, so it is section 02 in the same
   two-column pattern. */
.service-area-section__heading .inner-label {
  color: var(--inner-eyebrow, #93a886);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0 0 8px;
}

/* OWNER item 10 (2026-08-29): "there seems to be a larger space before the
   line and check your zip" -- right. The divider was double-padded: 64px of
   margin above it AND 64px of padding below, on top of the first section's
   own 56px, totalling ~185px where the standard row rhythm runs ~135. The
   margin goes; the sections' own padding carries the divider. */
.service-area-section + .service-area-section {
  border-top: 1px solid rgba(6, 8, 7, 0.22);
  padding-top: clamp(48px, 5.5vw, 70px);
}



/* The ZIP answer is now a sentence with a link in it, not a bare status line,
   so it needs room to breathe and its links need to read as links. */
.service-area-zip__result {
  line-height: 1.55;
  margin-top: 16px;
  max-width: 620px;
}

.service-area-zip__result strong {
  display: block;
  font-family: var(--home-bold);
  margin-bottom: 4px;
}

.service-area-zip__result a {
  color: var(--inner-rust);
  text-decoration: none;
}

.service-area-zip__result a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Yes" is rust on the headline only — the sentence under it stays readable
   pine rather than a whole paragraph of accent colour. */
.service-area-zip__result.is-approved {
  color: var(--inner-pine);
}

.service-area-zip__result.is-approved strong {
  color: var(--inner-rust);
}

/* ---- The closing hand-off bar (shared: pricing, FAQ) ------------------- */
/* Deliberately the same object as the homepage hero box, in ivory rather
   than over a photograph: one calculator handoff on the site, recognisable
   in both places. */
.pr-finder {
  align-items: stretch;
  /* Same softening as the ZIP bar -- the hero hairline is the reference. */
  border: 1px solid color-mix(in srgb, var(--inner-pine) 30%, transparent);
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  max-width: 620px;
}

.pr-finder__input {
  /* Transparent, like the hero's. A 42% white fill sat lighter than the
     cream behind it, so the field read as a pale box rather than a rule with
     a label inside it. */
  background: transparent;
  border: 0;
  color: var(--inner-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;
}

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

/* No focus treatment on the box at all (owner, 2026-08-30): the edge does
   not darken, glow, or thicken when someone clicks in or types. */
.pr-finder__submit {
  background: var(--inner-rust);
  border: 0;
  color: var(--inner-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;
}

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

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

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

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

}

/* 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(--inner-pine);
  -webkit-box-shadow: 0 0 0 1000px var(--inner-ivory, #f2efe6) inset;
  box-shadow: 0 0 0 1000px var(--inner-ivory, #f2efe6) inset;
  caret-color: var(--inner-pine);
  /* The fill colour never gets to animate in. */
  transition: background-color 100000s ease-in-out 0s;
}

.pr-note {
  column-gap: 30px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
}

.pr-note {
  color: var(--inner-pine);
  font-family: var(--home-regular);
  font-size: 0.95rem;
  line-height: 1.58;
  margin: 16px 0 0;
  max-width: 720px;
}

.pr-note a {
  color: var(--inner-rust);
  text-decoration: none;
}

.pr-note a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* OWNER 2026-09-05, reading the closing block on her phone: "I think on the
   mobile site the links should be stacked."

   They wrap rather than stack, so where they break depends on how long each
   one happens to be -- two on the first line, one on the second, one on the
   third. That reads as an accident, and it is: nothing chose those pairings.
   One per line at phone widths, and the row gap opens up so each is its own
   tap target rather than three lines of text 6px apart. */
@media (max-width: 700px) {
  .pr-note {
    display: grid;
    justify-items: start;
    row-gap: 12px;
  }
}

/* ---- One focus story for every address/ZIP field --------
   Nothing. No ring, no darkening, no glow (owner, 2026-08-30). The global
   rust ring was landing on these on plain click, which read as the box
   "turning orange"; the caret is the only focus signal a text box gives. */
.pr-finder__input:focus,
.pr-finder__input:focus-visible,
.service-area-zip__controls input:focus,
.service-area-zip__controls input:focus-visible {
  outline: none;
}

/* The ZIP button was pine that flipped to rust on hover -- the only button
   in the family doing a colour swap. Standardised to the finder buttons:
   rust always, darker on hover. */
.service-area-zip__controls button {
  background: var(--inner-rust);
  border-color: var(--inner-rust);
}

.service-area-zip__controls button:hover {
  background: #8f3f22;
  border-color: #8f3f22;
}

/* ---- Item 10: one rust-text style for the contact links ----------------
   Owner rust-type inventory 2026-08-30: that one style is the sitewide
   eyebrow spec — 0.72rem / 700 / uppercase / 0.2em. */
.contact-section__link,
.contact-socials a {
  color: var(--inner-rust);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
}

.contact-section__link:hover,
.contact-socials a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}