/* ============================================================
   DAN'S PLUMBING — "Walking the Line"
   The logo is a 1950s American line drawing, so the type is
   Libre Franklin — the open cut of Franklin Gothic, the face
   that ran alongside that kind of spot illustration at the
   time. Warm off-white paper, one black ink, hairline rules,
   and a lot of air. Nothing shouts; the mark does the talking.
   ============================================================ */

:root {
  --paper:     #FBFAF8;
  --paper-2:   #F4F2EC;
  --paper-3:   #EAE7DF;
  --ink:       #141413;

  --fg:        #141413;
  --fg-2:      #46453F;
  /* #666662 is the lightest muted value that still clears WCAG AA (4.5:1)
     on all three grounds — paper, tint and paper-3. Verified, don't lighten. */
  --fg-3:      #666662;
  --on-ink:    #FBFAF8;
  --on-ink-2:  rgba(251, 250, 248, 0.72);

  --rule:      #141413;
  --rule-thin: #E2DFD6;
  --rule-mid:  #CFCBBE;
  --rule-inv:  rgba(251, 250, 248, 0.26);

  --display: 'Libre Franklin Variable', 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Libre Franklin Variable', 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --serif:   var(--display);

  --step--2: clamp(0.7rem, 0.68rem + 0.1vw, 0.76rem);
  --step--1: clamp(0.8rem, 0.77rem + 0.14vw, 0.88rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  --step-1:  clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem);
  --step-2:  clamp(1.35rem, 1.2rem + 0.75vw, 1.85rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.2vw, 2.45rem);
  /* the display face is far wider than the condensed gothic this replaced,
     so the top of the scale comes down to hold the same measure */
  --step-4:  clamp(2.05rem, 1.55rem + 2.1vw, 3.1rem);
  --step-5:  clamp(2.5rem, 1.75rem + 3.2vw, 4.2rem);

  --gutter: clamp(1.15rem, 0.85rem + 1.6vw, 2.25rem);
  --bay:    clamp(3.5rem, 2.6rem + 4.6vw, 7rem);
  --max:    78rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

::selection { background: var(--ink); color: var(--paper); }

/* Calling is the whole point of this site. Big type gives a short line-box,
   so every tel:/sms: link gets padded out to a comfortable 44px tap target.
   :where() keeps this at ZERO specificity — an attribute selector would
   otherwise outrank plain class rules like `.callbar { display: none }`
   and leak the mobile call bar onto desktop. */
:where(a[href^='tel:'], a[href^='sms:']) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* visible on every interactive thing, on both grounds */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.dark :focus-visible, .on-ink :focus-visible {
  outline-color: var(--on-ink);
}

/* ---------- type ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: none;
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.12; letter-spacing: -0.022em; }
h4 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.018em; }

p { text-wrap: pretty; }

/* The second voice inside a heading. It was an italic serif in the old
   print scheme; here the same markup reads as a lighter, quieter weight,
   which is how the hero says "since 1977" without changing typeface. */
.serif {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  color: var(--fg-2);
  text-transform: none;
  letter-spacing: -0.028em;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 38ch;
  font-weight: 400;
}

/* section label — a hairline lead-in, not a stencil bar */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg-3);
}
.tag::before {
  content: '';
  width: 2.2em; height: 1px;
  background: var(--rule-mid);
}
.dark .tag, .on-ink .tag { color: var(--on-ink-2); }
.dark .tag::before, .on-ink .tag::before { background: var(--rule-inv); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.bay  { padding-block: var(--bay); }

/* hairline rules — the line he walks */
.rule-heavy { height: 1.5px; background: var(--ink); border: 0; }
.rule-thin  { height: 1px; background: var(--rule-thin); border: 0; }
.edge-top    { border-top: 1.5px solid var(--ink); }
.edge-bottom { border-bottom: 1.5px solid var(--ink); }

.dark { background: var(--ink); color: var(--on-ink); }
/* `:where(p)` keeps this at one class of specificity, so a page's own rule for
   a paragraph always wins — .offer__w and .ft__word both set their colour with
   a single class and would otherwise lose to this and render at 72% opacity.
   (Astro used to give component styles the edge automatically; this restores
   that without touching every page stylesheet.) */
.dark :where(p) { color: var(--on-ink-2); }
.tint { background: var(--paper-2); }

/* ---------- photography ----------
   Straight grayscale now rather than a multiplied halftone: the new scheme
   hangs photographs as prints inside a hairline, so they need their own
   white rather than letting the paper bleed through the highlights. */
.ht {
  width: 100%;
  filter: grayscale(1) contrast(1.05);
}
.plate { background: var(--paper); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.85em 1.6em;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  transition: background .18s, color .18s, border-color .18s;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-mid); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--on-ink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--on-ink:hover { background: transparent; color: var(--paper); }

/* numerals in a phone number should never wobble between weights */
.btn, .tel__n, .num { font-variant-numeric: tabular-nums; }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s cubic-bezier(.16,1,.3,1) backwards; }
.d1{animation-delay:.05s} .d2{animation-delay:.12s} .d3{animation-delay:.19s}
.d4{animation-delay:.26s} .d5{animation-delay:.33s} .d6{animation-delay:.4s}

/* Reveal only once JS confirms itself, so a failed script never blanks the page */
.js .obs { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js .obs.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .obs { opacity: 1; transform: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 10000;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 0.9rem 1.2rem; background: var(--ink); color: var(--paper);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ============================================================
   SITE CHROME
   Header, footer, page banner, photographic plates and the
   mobile call bar. These were scoped component styles in the
   old build; every public page carries all of them, so they
   live here rather than in five separate files.
   ============================================================ */

/* ---------- header ---------- */
.hd {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-thin);
}
.hd__in { display: flex; align-items: center; gap: clamp(0.75rem, 2.5vw, 2.5rem); min-height: 80px; }

/* the lockup: mark, hairline, wordmark — read as one object */
.brand { display: flex; align-items: center; gap: 13px; margin-right: auto; padding-block: 0.4rem; }
.brand img { width: 36px; }
.brand__bar { width: 1px; height: 34px; background: var(--rule-mid); flex: none; }
.brand__txt { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand__txt strong {
  font-family: var(--display);
  font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.brand__txt em {
  font-style: normal;
  font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.155em; text-transform: uppercase;
  color: var(--fg-3);
}

.nav { display: flex; gap: clamp(0.9rem, 2vw, 2.1rem); }
.nav__a {
  display: inline-block;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-2);
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: border-color .18s, color .18s;
}
.nav__a:hover, .nav__a.is-on { color: var(--fg); border-bottom-color: var(--ink); }

.tel { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1; padding-block: 0.4rem; }
.tel__k { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
.tel__n { font-family: var(--display); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.01em; }
.tel:hover .tel__n { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--rule-mid); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  list-style: none;
}
.burger::-webkit-details-marker { display: none; }
.burger::marker { content: ''; }
.burger__b { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .25s; }
.mn[open] .burger__b:first-of-type { transform: translateY(3.25px) rotate(45deg); }
.mn[open] .burger__b:last-of-type  { transform: translateY(-3.25px) rotate(-45deg); }

/* The drawer hangs off the sticky header; the <details> element itself takes
   no room in the header row beyond its button. */
.mn { display: none; position: static; }
.mnav {
  position: absolute; left: 0; right: 0; top: 100%;
  border-top: 1px solid var(--rule-thin); border-bottom: 1.5px solid var(--ink);
  padding: 1.1rem var(--gutter) 1.6rem; background: var(--paper);
  z-index: 99;
}
.mnav nav { display: flex; flex-direction: column; }
.mnav nav a {
  font-family: var(--display);
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.022em;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--rule-thin);
}
.mnav nav a[aria-current='page'] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.mnav .btn { width: 100%; margin-top: 1.2rem; }

@media (max-width: 960px) {
  .hd { position: sticky; }
  .hd__in { position: relative; min-height: 68px; gap: 0.75rem; }
  .nav { display: none; }
  /* the number stays in the header on a phone; only its label goes */
  .tel { display: flex; align-items: center; }
  .tel__k { display: none; }
  .tel__n { font-size: 0.9rem; }
  .mn { display: block; }
  .burger { display: flex; }
  .brand img { width: 32px; }
  .brand__txt em { font-size: 0.5rem; letter-spacing: 0.11em; white-space: nowrap; }
}
@media (max-width: 400px) {
  .brand__txt em { display: none; }
  .tel__n { font-size: 0.82rem; }
}

/* ---------- page banner ---------- */
.ph { padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(2rem, 4vw, 3.25rem); border-bottom: 1.5px solid var(--ink); }
.ph__in { max-width: 62rem; }
.ph h1 { font-size: var(--step-4); margin-block: 1rem 1.2rem; }
.ph h1 .serif { font-size: 1.06em; }
.ph .lede { max-width: 48ch; }

/* ---------- photographic plates ---------- */
.plate-img { position: relative; display: block; overflow: hidden; }
.plate-img > img { display: block; width: 100%; }

.plate-img__c {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1);
}

/* Only fetch + reveal where hovering is actually possible. */
@media (hover: hover) and (pointer: fine) {
  .plate-img__c { background: var(--colour) center / cover no-repeat; }
  .plate-img:hover .plate-img__c,
  .plate-img:focus-within .plate-img__c { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .plate-img__c { transition: none; }
}

/* ---------- footer ---------- */
.ft { padding-block: clamp(3rem, 5vw, 5rem) 2rem; border-top: 1.5px solid var(--ink); }

.ft__top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule-inv);
}
.ft__mark { display: flex; align-items: flex-end; gap: 1.1rem; }
.ft__mark img { width: 62px; }
.ft__word {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.8rem); line-height: 0.9; color: var(--on-ink);
}
.ft__since { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink-2); margin-top: 0.5rem; }
.ft__tel {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  color: var(--on-ink); letter-spacing: -0.01em;
}
.ft__tel:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 3px; }

.ft__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 2rem 1.75rem; padding-block: 2.25rem; }
.ft__h {
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-ink); font-weight: 700;
  padding-bottom: 0.7rem; margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-inv);
  line-height: 1.3;
}
.ft__col ul { list-style: none; padding: 0; }
.ft__col li { font-size: 0.85rem; color: var(--on-ink-2); padding-block: 0.16rem; }
.ft__links li, .ft__towns li { padding-block: 0; }
.ft__links li a, .ft__towns li a { display: flex; align-items: center; min-height: 44px; }
.ft__links li a:hover, .ft__towns li a:hover { color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; }
.ft__note { font-size: 0.85rem; max-width: 26ch; }
.ft__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.4rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-ink); border-bottom: 2px solid var(--on-ink); padding-bottom: 2px; }

.ft__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem;
  padding-top: 1.5rem; border-top: 1px solid var(--rule-inv);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-2);
}
.ft__base p { color: inherit; }

/* ---------- mobile call bar ---------- */
.callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  text-align: center; line-height: 1.15;
  border-top: 1px solid rgba(251,250,248,0.18);
}
.callbar__k { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }
.callbar__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem; letter-spacing: -0.01em;
}
@media (max-width: 960px) {
  .callbar { display: block; }
  body { padding-bottom: 4.4rem; }
}

/* ============================================================
   SHARED COMPONENTS (inc/components.php)
   Trust strip, steps, reviews, FAQ, chips, town links, CTA,
   breadcrumb, the above-the-fold ask and the dark fact bar.
   Page stylesheets may override any of these.
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumb { border-bottom: 1px solid var(--rule-thin); }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; padding: 0.15rem 0; margin: 0; }
.crumb li { display: flex; align-items: center; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.crumb li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.55; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumb [aria-current='page'] { color: var(--ink); }

/* ---------- above-the-fold ask ---------- */
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem clamp(1.1rem, 2.5vw, 1.75rem); margin-top: clamp(1.5rem, 3vw, 2rem); }
.ask__btn { font-size: var(--step-0); padding-inline: 1.35em; }
.ask__note { font-size: 0.98rem; line-height: 1.6; color: var(--fg-2); max-width: 36ch; }

/* ---------- dark fact bar ---------- */
.bar { border-block: 1.5px solid var(--ink); }
.bar__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bar__it { padding: 1.35rem 1.25rem; border-left: 1px solid var(--rule-inv); }
.bar__it:first-child { border-left: 0; padding-left: 0; }
.bar__k { display: block; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-ink-2); margin-bottom: 0.55rem; }
.bar__v { display: block; font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.45; color: var(--on-ink); }
@media (max-width: 900px) {
  .bar__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar__it:nth-child(odd) { border-left: 0; padding-left: 0; }
  .bar__it:nth-child(n + 3) { border-top: 1px solid var(--rule-inv); }
}
@media (max-width: 520px) {
  .bar__in { grid-template-columns: minmax(0, 1fr); }
  .bar__it { border-left: 0; padding-left: 0; }
  .bar__it + .bar__it { border-top: 1px solid var(--rule-inv); }
}

/* ---------- trust strip ---------- */
.trust { border-block: 1.5px solid var(--ink); }
.trust__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust__it { padding: 1.1rem 1.25rem; border-left: 1px solid var(--rule-inv); }
.trust__it:first-child { border-left: 0; padding-left: 0; }
.trust:not(.dark) .trust__it { border-left-color: var(--rule-thin); }
.trust__k { display: block; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-ink-2); margin-bottom: 0.4rem; }
.trust:not(.dark) .trust__k { color: var(--fg-3); }
.trust__v { display: inline-flex; align-items: center; min-height: 28px; font-family: var(--display); font-weight: 700; font-size: 0.98rem; line-height: 1.3; color: var(--on-ink); }
.trust:not(.dark) .trust__v { color: var(--fg); }
a.trust__v:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .trust__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__it:nth-child(odd) { border-left: 0; padding-left: 0; }
  .trust__it:nth-child(n + 3) { border-top: 1px solid var(--rule-inv); }
  .trust:not(.dark) .trust__it:nth-child(n + 3) { border-top-color: var(--rule-thin); }
}

/* ---------- shared section head ---------- */
.head h2 { margin-top: 1rem; font-size: var(--step-3); }

/* ---------- steps ---------- */
.how { padding-block: clamp(3.5rem, 6vw, 6rem); border-top: 1.5px solid var(--ink); }
.steps { list-style: none; padding: 0; margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
.steps__it { padding: 1.5rem 1.5rem 0 0; border-top: 1.5px solid var(--on-ink); }
.steps__it + .steps__it { border-left: 1px solid var(--rule-inv); padding-left: 1.5rem; }
.steps__n { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--on-ink); display: block; margin-bottom: 0.7rem; }
.steps__it h3 { font-size: var(--step-1); color: var(--on-ink); margin-bottom: 0.5rem; }
.steps__it p { font-size: 0.9rem; }
@media (max-width: 720px) {
  .steps__it + .steps__it { border-left: 0; padding-left: 0; }
  .steps__it { padding-right: 0; margin-top: 1.25rem; }
}

/* ---------- reviews ---------- */
.rv { border-top: 1.5px solid var(--ink); }
.rv__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.rv__score { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--display); }
.rv__score strong { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.rv__score .rv__stars { font-size: 1rem; letter-spacing: 0.08em; }
.rv__n { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.rv__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1.5px solid var(--ink); border-left: 1px solid var(--rule-thin); }
.rv__it { margin: 0; padding: clamp(1.4rem, 2.4vw, 2rem); border-right: 1px solid var(--rule-thin); border-bottom: 1px solid var(--rule-thin); background: var(--paper); display: flex; flex-direction: column; }
.rv__it .rv__stars { font-size: 0.85rem; letter-spacing: 0.12em; margin-bottom: 0.8rem; }
.rv__t { font-family: var(--display); font-weight: 500; font-size: var(--step-1); line-height: 1.4; letter-spacing: -0.012em; flex: 1; }
.rv__who { margin-top: 1.2rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.rv__who span { color: var(--fg-3); font-weight: 600; }
.rv__links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1.25rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.rv__links a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid var(--ink); }

/* ---------- FAQ ---------- */
.faq { border-top: 1.5px solid var(--ink); }
.faq__list { margin: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1.5px solid var(--ink); }
.faq__it { padding-block: 1.4rem; border-bottom: 1px solid var(--rule-thin); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1rem clamp(1.5rem, 4vw, 3rem); }
.faq__it dt { font-family: var(--display); font-weight: 700; font-size: var(--step-1); line-height: 1.15; }
.faq__it dd { margin: 0; font-size: 0.97rem; line-height: 1.65; color: var(--fg-2); }
@media (max-width: 760px) { .faq__it { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ---------- chips ---------- */
.chips { list-style: none; padding: 0; margin-top: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips a, .chips span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.5rem 0.95rem; border: 1.5px solid var(--ink);
  font-family: var(--display); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.chips a:hover, .chips .is-on { background: var(--ink); color: var(--paper); }

/* ---------- town links ---------- */
.towns-inline { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.towns-inline li { border-bottom: 1px solid var(--rule-thin); }
.towns-inline a, .towns-inline span { display: flex; align-items: center; min-height: 52px; font-family: var(--display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.015em; }
.towns-inline a::after { content: '\2192'; margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.towns-inline a:hover::after { opacity: 1; transform: none; }
.towns-inline span { color: var(--fg-3); }

/* ---------- closing CTA ---------- */
.cta { padding-block: clamp(3.5rem, 6vw, 5.5rem); border-top: 1.5px solid var(--ink); }
.cta__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.5rem 4rem; align-items: center; }
.cta h2 { margin-top: 1rem; color: var(--on-ink); font-size: var(--step-3); }
.cta__note { font-size: 1rem; line-height: 1.65; margin-top: 1.1rem; max-width: 42ch; }
.cta__k { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-ink-2); margin-bottom: 0.5rem; }
.cta__tel { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; color: var(--on-ink); margin-bottom: 1.3rem; white-space: nowrap; }
.cta__tel:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 4px; }

/* ---------- full-bleed photo band ---------- */
.band { border-block: 1.5px solid var(--ink); background: var(--paper); }
.band img { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; object-position: center; }
@media (max-width: 700px) { .band img { aspect-ratio: 4 / 3; object-position: 38% center; } }

/* footer address column */
.ft__addr { font-style: normal; font-size: 0.85rem; line-height: 1.6; color: var(--on-ink-2); }
.ft__addr strong { color: var(--on-ink); }
.ft__addr a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink); }
.ft__addr a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft__col--nap .ft__note { margin-top: 0.5rem; max-width: 30ch; }
.ft__base a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- one-line CTA, mid-page ---------- */
.ctal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1rem;
  border-top: 1px solid var(--rule-mid);
  font-size: 0.86rem; color: var(--fg-3);
}
.ctal__lead { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; }
.ctal__tel { font-family: var(--display); font-weight: 800; font-size: var(--step-2); letter-spacing: -0.02em; color: var(--fg); }
.ctal__tel:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ctal__more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.74rem; color: var(--fg); border-bottom: 2px solid var(--ink); }
.jobs__s { display: inline-flex; align-items: center; min-height: 40px; margin-top: 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; border-bottom: 1.5px solid var(--ink); }

/* ---------- header: request a visit ---------- */
.hd__book {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 0.9rem; border: 1.5px solid var(--ink);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; transition: background .18s, color .18s;
}
.hd__book:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 960px) { .hd__book { display: none; } }
.ask__book { font-size: var(--step--1); }

/* ---------- forms (contact page and the request-a-visit block) ---------- */
.frm { border-top: 1.5px solid var(--ink); padding-top: 1.75rem; }
.frm__h { font-size: var(--step-1); margin-bottom: 0.5rem; }
.frm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .frm__row { grid-template-columns: 1fr; } }
.fld { margin-top: 1rem; }
.fld label { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.4rem; }
.fld label span { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--fg-3); }
.fld input, .fld textarea, .fld select {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--fg);
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0;
  padding: 0.75rem 0.85rem; min-height: 52px;
}
.fld select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
.fld textarea { resize: vertical; min-height: 8rem; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.frm button { margin-top: 1.5rem; }
.frm__fine { font-size: 0.84rem; color: var(--fg-3); margin-top: 1rem; max-width: 42ch; }
.frm__err { margin-top: 1rem; border: 1.5px solid #B23A28; background: #FBEDEA; color: #B23A28; padding: 0.85rem 1rem; font-size: 0.95rem; font-weight: 600; line-height: 1.5; }

.bk { border-top: 1.5px solid var(--ink); background: var(--paper-2); }
/* The form is the point of this band, so it gets the larger half and a floor
   of its own: below about 940px the two columns would squeeze it thinner than
   a form should be, so they stack instead. */
.bk__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(26rem, 1.35fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.bk__in h2 { font-size: var(--step-3); margin-top: 1rem; }
.bk__lede { font-size: 1rem; line-height: 1.65; color: var(--fg-2); margin-top: 1rem; max-width: 38ch; }
.bk__lede a { font-weight: 700; color: var(--fg); border-bottom: 1.5px solid var(--ink); }
.bk__form { padding-top: 0; border-top: 0; }
.bk__form .fld:first-child, .bk__form .frm__row:first-of-type .fld { margin-top: 0; }
@media (max-width: 940px) { .bk__in { grid-template-columns: minmax(0, 1fr); } .bk__frame { max-width: 34rem; } }
/* On a phone every pixel of the frame's padding comes off the form fields, so
   the frame closes in on the iframe. */
@media (max-width: 600px) { .bk__frame { padding: 0.75rem 0.75rem 0.85rem; } }

/* ---------- find us: the map band above the footer, on every page ---------- */
.findus { border-top: 1.5px solid var(--ink); background: var(--paper-2); padding-block: clamp(2.5rem, 5vw, 4rem); }
.findus__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.findus__h { font-size: var(--step-3); margin-top: 1rem; }
.findus__addr { font-style: normal; font-family: var(--display); font-weight: 600; font-size: var(--step-1); line-height: 1.35; margin-top: 0.9rem; }
.findus__line { margin-top: 0.7rem; font-size: 0.95rem; line-height: 1.6; color: var(--fg-2); max-width: 40ch; }
.findus__line a { font-weight: 700; color: var(--fg); }
.findus__line a:hover { text-decoration: underline; text-underline-offset: 3px; }
.findus__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 1rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.findus__links a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid var(--ink); }
.findus__map { border: 1.5px solid var(--ink); background: var(--paper); }
.findus__map iframe { display: block; filter: grayscale(1) contrast(1.05); }
@media (max-width: 820px) { .findus__in { grid-template-columns: 1fr; } }

/* ---------- Housecall Pro lead form, in our frame ---------- */
.bk__alt { margin-top: 0.9rem; font-size: 0.92rem; color: var(--fg-2); }
.bk__alt a { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.74rem; color: var(--fg); border-bottom: 2px solid var(--ink); }
.bk__frame { border: 1.5px solid var(--ink); background: var(--paper); padding: clamp(1rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.75rem) 1rem; }
.bk__iframe { display: block; width: 100%; border: 0; min-height: 620px; transition: height .2s ease; }
.bk__fallback { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--rule-thin); font-size: 0.78rem; line-height: 1.5; color: var(--fg-3); }
.bk__fallback a { font-weight: 700; color: var(--fg); }
.bk__fallback a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct__form { border-top: 1.5px solid var(--ink); padding-top: 1.75rem; margin-top: 2rem; }
.ct__form .bk__frame { max-width: 34rem; }
.ct__formnote { font-size: 0.95rem; color: var(--fg-2); margin: 0.5rem 0 1rem; max-width: 46ch; }
.ct__formnote a { color: var(--fg); }
.ct__book { margin-top: 1rem; }