:root {
  /* Proudfoot Rolloffs brand palette (sampled from the lion logo:
     red #E82030 + black + white/silver — no secondary accent color).
     Reskin of the base two-tier system: to stay on a disciplined
     red/black/white brand, BOTH the action tier (--red) and the accent tier
     (legacy --yellow* token names) map to the same lion red. Two-shade red
     system (dumpster-brand-red-contrast): bright #e82030 (4.49:1) is for
     accents/large text; filled CTAs with white text use --red-deep #c11824
     (6.1:1 AA), hover --red-deeper #9e1220. Black = text, borders, dark
     sections. Accents are red, so accepted/restricted icons split: --ok
     (green) ✓, --red ✕. Legacy --yellow* names kept so every existing rule
     reskins from here at once. */
  --yellow: #e82030;
  --yellow-deep: #c11824;
  --yellow-tint: #fdeaec;
  --red: #e82030;
  --red-deep: #c11824;
  --red-deeper: #9e1220;  /* AA hover for filled CTAs (white text) */
  /* Accent used on photos and dark sections. Red is a dark colour, so red on
     near-black separates poorly even when the ratio passes: base red sits at
     4.2:1 there and reads muddy. An earlier fix lifted it to #ff4152, which
     looked pink, and the reason was saturation, not hue: 0.75 against the
     brand's 0.86. This keeps the brand's saturation at 0.86 and takes the red
     to full brightness instead, which buys 5.0:1 without the wash-out. */
  --red-on-dark: #ff2436;
  --ok: #1e9e4a;          /* green — "accepted" checkmarks only */
  --black: #0b0b0b;
  --ink: #141414;
  --muted: #5a5a5a;
  --line: #e4e4e7;
  --logo-gray: #d0d0d0;
  --bg: #ffffff;
  --bg-warm: #f5f5f6;

  --font-display: "Oswald", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --max: 1280px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  color: var(--black);
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
}

.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.08;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1em;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ===== Photo placeholder ===== */
.photo {
  background: var(--yellow-tint);
  border: 2px dashed var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.photo::before {
  content: "PHOTO";
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  background: var(--black);
  color: var(--yellow);
  padding: 4px 8px;
  border-radius: 2px;
}
.photo span {
  font-family: var(--font-body);
  color: #6a5a00;
  font-size: 0.85rem;
  max-width: 80%;
  text-align: center;
  line-height: 1.4;
  padding: 2rem 1rem 1rem;
}
.photo.ar-hero {
  aspect-ratio: 5 / 4;
}
.photo.ar-square {
  aspect-ratio: 1 / 1;
}
.photo.ar-wide {
  aspect-ratio: 16 / 9;
}
.photo.ar-tall {
  aspect-ratio: 4 / 5;
}
.photo.ar-card {
  aspect-ratio: 3 / 2;
}

/* When a real <img> is in the .photo container, hide placeholder styling */
.photo:has(img) {
  background: transparent;
  border: none;
}
.photo:has(img)::before {
  display: none;
}
.photo:has(img) span {
  display: none;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Nav ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 11, 0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #1f1f1f;
}

/* When users follow an #anchor link, scroll lands with breathing room
   above the section heading rather than slamming the section to the
   sticky topbar's edge. */
[id] {
  scroll-margin-top: 110px;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  gap: 1.5rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--black);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.brand-mark {
  height: 74px;
  width: auto;
  display: block;
  margin: 0.5rem 0;
  flex-shrink: 0;
}
.brand {
  flex-shrink: 0;
}
nav.primary {
  display: none;
  gap: 1.4rem;
  font-weight: 500;
  white-space: nowrap;
}
nav.primary a {
  color: #fff;
  text-decoration: none;
  font-size: 0.97rem;
  position: relative;
  padding-bottom: 4px;
  transition: color 180ms ease;
}
nav.primary a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
nav.primary a:hover {
  color: #fff;
}
nav.primary a:hover::after {
  transform: scaleX(1);
}
/* You-are-here: reuses the hover underline, held open. topbar-scroll.js sets
   aria-current, and section pages resolve to their hub (a town page marks
   "Service Area", a post marks "Blog"). */
nav.primary a[aria-current="page"]::after {
  transform: scaleX(1);
}
nav.primary a[aria-current="page"] {
  font-weight: 700;
}

.tel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--yellow);
  color: var(--black);
  text-decoration: none;
  padding: 0.65rem 1rem;
  border-radius: 3px;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 0.95rem;
  white-space: nowrap;
}
.tel-cta:hover {
  background: var(--red-deeper);
}
.tel-cta::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--black);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 1.7z'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 1.7z'/></svg>")
    center/contain no-repeat;
}

.hours-pill {
  display: none;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}
.hours-pill strong {
  color: #fff;
  font-weight: 600;
}

/* Full horizontal nav appears at 1000px — covers iPad landscape (1024).
   The 6-item nav + logo + phone only needs ~774px, so 1000 is safe. */
@media (min-width: 1000px) {
  nav.primary {
    display: inline-flex;
  }
}
/* "Open 7 Days" pill stays desktop-only so it never crowds the nav. */
@media (min-width: 1080px) {
  .hours-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
}

/* ===== Mobile hamburger menu ===== */
.nav-toggle-cb {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.nav-toggle {
  display: none;
}
@media (max-width: 999px) {
  /* Push brand to the left, group call + hamburger on the right */
  .topbar-inner {
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-height: 76px;
  }
  .brand {
    margin-right: auto;
  }
  .brand-mark {
    height: 56px;
  }
  .tel-cta {
    padding: 0.5rem 0.55rem;
    font-size: 0.85rem;
    gap: 0.35rem;
  }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 4px;
    flex-shrink: 0;
    order: 10;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition:
      transform 180ms ease,
      opacity 180ms ease;
  }
  .topbar:has(.nav-toggle-cb:checked) .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .topbar:has(.nav-toggle-cb:checked) .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .topbar:has(.nav-toggle-cb:checked) .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .topbar:has(.nav-toggle-cb:checked) nav.primary {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0b0b0b;
    padding: 0.5rem 1.5rem;
    border-top: 2px solid #1f1f1f;
    border-bottom: 2px solid var(--red);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    z-index: 49;
    gap: 0;
  }
  .topbar:has(.nav-toggle-cb:checked) nav.primary a {
    padding: 0.95rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .topbar:has(.nav-toggle-cb:checked) nav.primary a:last-child {
    border-bottom: none;
  }
}

/* ===== Scroll-morphing topbar (mobile only) — slide transition ===== */
.topbar-inner {
  position: relative;
  overflow: hidden;
}
/* When hamburger nav is open, allow overflow so the drawer can drop below */
.topbar:has(.nav-toggle-cb:checked) .topbar-inner {
  overflow: visible;
}
.topbar-scroll-cta {
  display: none;
}
.brand,
.tel-cta {
  transition:
    transform 340ms cubic-bezier(0.33, 1, 0.68, 1),
    opacity 340ms cubic-bezier(0.33, 1, 0.68, 1);
}
@media (max-width: 899px) {
  /* backdrop-filter forces per-frame compositing of everything behind the
     fixed bar; at 97%-opaque black the blur is invisible but the frame cost
     is real on phones. Solid color = fluid morph. */
  .topbar {
    --morph: 0; /* 0..1, written by topbar-scroll.js from scroll position */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #0f0f0f;
  }
  /* Scroll-DRIVEN morph: positions interpolate from --morph, so the swap
     tracks the finger. The 90ms linear transition only smooths the steps
     between discrete scroll events, it is not the animation itself. */
  .topbar .brand,
  .topbar .tel-cta {
    transform: translateY(calc(var(--morph) * -10px));
    opacity: calc(1 - var(--morph));
    transition: transform 90ms linear, opacity 90ms linear;
  }
  .topbar-scroll-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    left: var(--pad);
    right: calc(var(--pad) + 56px); /* leave room for hamburger (44px) + gap */
    top: 50%;
    transform: translateY(-50%) translateY(calc((1 - var(--morph)) * 12px));
    opacity: var(--morph);
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform 90ms linear, opacity 90ms linear;
  }
  .topbar.topbar-scrolled .brand,
  .topbar.topbar-scrolled .tel-cta {
    pointer-events: none;
  }
  .topbar.topbar-scrolled .topbar-scroll-cta {
    pointer-events: auto;
  }
  .topbar-scroll-cta a {
    flex: 1;
    text-align: center;
    background: var(--yellow);
    color: var(--black);
    padding: 0.65rem 0.75rem;
    border-radius: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--black);
  }
}

/* ===== Hero ===== */
.hero {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--yellow);
  padding: 4px 10px;
  margin-bottom: 1.5rem;
  border-radius: 2px;
}

.hero p.lead {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: var(--muted);
  max-width: 32em;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  border-radius: 6px;
  border: 2px solid var(--black);
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--black);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}
.btn-primary {
  background: var(--yellow);
  color: var(--black);
}
.btn-primary:hover {
  background: var(--red-deeper);
  /* Bigger lift + deeper shadow than the generic .btn so the main
     CTA feels weighty on hover. */
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--black);
}
.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}
.btn-secondary {
  background: transparent;
  color: var(--black);
}
.btn-secondary:hover {
  background: var(--black);
  color: #fff;
}
.btn-big {
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  font-weight: 700;
  padding: 0.85rem 1.5rem;
}

.tel-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  color: var(--black);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--yellow);
  padding: 0.85rem 1.5rem;
  border-radius: 6px;
  border: 2px solid var(--black);
  margin-bottom: 0.75rem;
  box-shadow: 4px 4px 0 var(--black);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}
.tel-big:hover {
  background: var(--red-deeper);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}
.tel-big:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}
.tel-big::before {
  content: "";
  width: 1.1em;
  height: 1.1em;
  background: var(--black);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 1.7z'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 1.7z'/></svg>")
    center/contain no-repeat;
  flex-shrink: 0;
}

.tel-sub {
  font-size: 0.95rem;
  color: var(--muted);
}

.text-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  color: var(--black);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--yellow);
  padding: 0.85rem 1.5rem;
  border-radius: 6px;
  border: 2px solid var(--black);
  margin-bottom: 0.75rem;
  margin-left: 0.75rem;
  box-shadow: 4px 4px 0 var(--black);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}
.text-big:hover {
  background: var(--red-deeper);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}
.text-big:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}
.text-big::before {
  content: "";
  width: 1.1em;
  height: 1.1em;
  background: var(--black);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/></svg>")
    center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/></svg>")
    center/contain no-repeat;
  flex-shrink: 0;
}
@media (max-width: 500px) {
  .text-big {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* ===== Trust strip ===== */
.trust {
  background: var(--bg-warm);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
}
.trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.95rem;
}
.trust-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.trust-item strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--black);
}
.trust-item span {
  color: var(--muted);
}

/* ===== Section base ===== */
section.block {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
section.block.alt {
  background: var(--bg-warm);
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head p {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 36em;
}

/* ===== Services two-up ===== */
.services-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 800px) {
  .services-split {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
.svc-card {
  position: relative;
  background: var(--black);
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.svc-card .photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  border-color: rgba(245, 184, 0, 0.6);
}
.svc-card .photo::before {
  background: var(--yellow);
  color: var(--black);
}
.svc-card .svc-body {
  position: relative;
  z-index: 1;
  padding: 2rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 30%,
    rgba(0, 0, 0, 0.55) 75%,
    transparent
  );
}
.svc-card h3 {
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 0.5rem;
}
.svc-card p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;
  font-size: 0.97rem;
  line-height: 1.5;
}
.svc-card a.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--red-deep);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.svc-card a.svc-link:hover {
  color: #fff;
}

/* ===== Sizes row ===== */
.sizes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
/* Mobile: 2-up squeezes the cards into wrapped prices and truncated buttons.
   Swap to a native scroll-snap carousel: one roomy card at a time, the next
   one peeking to invite the swipe, momentum physics for free. */
@media (max-width: 699px) {
  .sizes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad);
    padding-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
    /* Styled native scrollbar (Android/desktop). iOS ignores this, so the
       JS-drawn .hscroll indicator below is the cross-device affordance. */
    scrollbar-width: thin;
    scrollbar-color: var(--red-deep) var(--line);
  }
  .sizes::-webkit-scrollbar {
    height: 5px;
  }
  .sizes::-webkit-scrollbar-track {
    background: var(--line);
    border-radius: 3px;
  }
  .sizes::-webkit-scrollbar-thumb {
    background: var(--red-deep);
    border-radius: 3px;
  }
  .sizes > .size-card {
    scroll-snap-align: center;
  }
}

/* Google Maps embed. The embed code ships fixed 600x450 pixel attributes,
   which overflow a phone, so the wrapper drives the size instead and the
   iframe just fills it. */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--black);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--black);
  background: var(--line);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 700px) {
  .map-embed {
    aspect-ratio: 4 / 3;
    box-shadow: 4px 4px 0 var(--black);
  }
}

/* Goes-in / stays-out chart. Two cards, green check tier and red cross tier,
   matching the house convention that green marks accepted and red marks
   restricted. Same border-and-hard-shadow treatment as the size cards. */
.allow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.25rem;
}
@media (min-width: 800px) {
  .allow-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }
}
.allow-card {
  background: #fff;
  border: 3px solid var(--black);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--black);
  display: flex;
  flex-direction: column;
}
.allow-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.4rem;
}
.allow-yes .allow-head {
  background: var(--ok);
  color: #fff;
}
.allow-no .allow-head {
  background: var(--black);
  color: #fff;
}
.allow-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
  color: inherit;
}
.allow-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.14);
}
.allow-list {
  list-style: none;
  padding: 1.4rem 1.4rem 0;
  margin: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
@media (min-width: 480px) {
  .allow-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.9rem;
  }
}
.allow-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--ink);
}
.allow-list li::before {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
}
.allow-yes .allow-list li {
  background: #f0faf3;
  border-color: rgba(30, 158, 74, 0.35);
}
.allow-yes .allow-list li::before {
  content: "✓";
  background: var(--ok);
  color: #fff;
}
.allow-no .allow-list li {
  background: #faf7f7;
  border-color: rgba(11, 11, 11, 0.14);
}
.allow-no .allow-list li::before {
  content: "✕";
  background: var(--red-deep);
  color: #fff;
}
.allow-note {
  margin: 1.4rem;
  padding: 0.9rem 1.05rem;
  background: var(--bg);
  border-left: 3px solid var(--line);
  border-radius: 4px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Inline call-to-action link used in body copy (price strips, service cost
   sections, town pages). Was 54 copies of the same inline style; one class
   means these all restyle from a single place. */
.call-link {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--red-deep);
}
.call-link:hover,
.call-link:focus-visible {
  color: var(--red-deeper);
}

/* Verified-reviews badge, styled to Google's own surface language rather than
   the site's chunky house style: hairline #dadce0 border, Material elevation
   instead of a hard offset shadow, Google's text greys (#202124 / #5f6368),
   Google blue for the action, and the body font rather than condensed Oswald.
   The whole card is the link. */
.verified-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 44rem;
  margin: 2.25rem auto 0;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  box-shadow: none;
  text-decoration: none;
  font-family: var(--font-body);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.verified-badge:hover,
.verified-badge:focus-visible {
  transform: none;
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(60, 64, 67, 0.3),
    0 2px 6px 2px rgba(60, 64, 67, 0.15);
}
.vb-mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: transparent;
}
.vb-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.vb-top {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #202124;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
/* Google shows a star row beside the average rather than a claim of veracity,
   so the badge does the same: a factual summary, not a statement from us. */
.vb-stars {
  color: #fbbc04;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin-right: 0.15rem;
}
.vb-sub {
  font-size: 0.82rem;
  color: #5f6368;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.vb-go {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: #1a73e8;
  white-space: nowrap;
}
.verified-badge:hover .vb-go {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .verified-badge {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .vb-go {
    margin-left: 0;
    width: 100%;
  }
}

/* Footer social row + chamber member badge. Icons inherit currentColor so the
   whole row recolors from one rule. */
.foot-social {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.foot-social a {
  color: #fff;
  opacity: 0.75;
  display: inline-flex;
  transition: opacity 140ms ease, color 140ms ease;
}
.foot-social a:hover,
.foot-social a:focus-visible {
  opacity: 1;
  color: var(--red-on-dark);
}
.foot-social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}
.foot-chamber {
  display: block;
  width: 190px;
  height: auto;
  margin-top: 1.1rem;
  opacity: 0.85;
}

/* "Do you come to me?" checker above the service-area map. Injected by
   area-map.js, which owns the polygon the answer is tested against. */
.area-check {
  margin: 0 0 1.25rem;
  /* The hero sits above this now, so the in-hero "Check My Address" button
     jumps here. The sticky topbar is 118px at desktop, so clear that plus a
     little breathing room or the field label lands underneath it. */
  scroll-margin-top: 8.5rem;
}
.area-check label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.area-check-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.area-check-row input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.area-check-row input:focus {
  border-color: var(--black);
  outline: none;
}
.area-check-result {
  margin: 0.7rem 0 0;
  font-weight: 600;
  min-height: 1.3em;
}
.area-check-result.is-yes {
  color: var(--ok);
}
.area-check-result.is-maybe,
.area-check-result.is-unknown {
  color: var(--red-deep);
}
.area-check-result.is-busy {
  color: var(--muted);
}
.area-check-result a {
  color: inherit;
}

/* JS-injected swipe indicator: a little left-right scrollbar that tracks the
   carousel, visible on every platform including iOS. Kept at top level rather
   than inside the mobile query because the review strip scrolls at every
   width; the size carousel only scrolls below 700px. */
.hscroll-track {
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  margin: 0.75rem auto 0;
  max-width: 11rem;
  position: relative;
  overflow: hidden;
}
.hscroll-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--red-deep);
  border-radius: 3px;
  transition: none;
}
@media (min-width: 700px) {
  .sizes {
    grid-template-columns: repeat(4, 1fr);
  }
}
.size-card {
  border: 1px solid var(--line);
  padding: 1.5rem 1.25rem;
  background: #fff;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.size-card:hover {
  border-color: var(--yellow);
}
.size-card .yd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.2px;
  color: var(--black);
  line-height: 1.05;
  display: block;
}
.size-card .yd small {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}
.size-card p {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ===== Story strip ===== */
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .story-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}
.story-grid .photo.ar-tall {
  max-height: 540px;
}

.story-body p {
  font-size: 1.05rem;
  line-height: 1.65;
}
.story-body p.kicker {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--black);
  line-height: 1.35;
  margin-bottom: 1.25rem;
}

/* ===== Reviews ===== */
/* Review strip scrolls horizontally at every width, the way a real review
   widget does: three cards visible on desktop, one and a bit on a phone, the
   rest a swipe away. Native scrollbar is hidden; topbar-scroll.js draws the
   track/thumb indicator beneath it (iOS never renders styled scrollbars). */
.reviews {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews::-webkit-scrollbar {
  display: none;
}
.reviews .review {
  scroll-snap-align: start;
}
@media (min-width: 800px) {
  .reviews {
    grid-auto-columns: calc((100% - 2.5rem) / 3);
  }
}
/* Review cards, styled like a Google review widget: initial avatar, name +
   date, Google mark, then gold stars over the quote. Gold (not brand red) is
   deliberate here; it is the strongest visual cue that the rating is real
   Google data rather than a testimonial we wrote. */
.review {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.4rem 1.35rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(11, 11, 11, 0.07);
  display: flex;
  flex-direction: column;
}
.rv-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}
.rv-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--red-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.reviews .review:nth-child(3n + 2) .rv-avatar {
  background: #33383d;
}
.reviews .review:nth-child(3n) .rv-avatar {
  background: #4a6572;
}
.rv-who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.rv-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 0.97rem;
}
.rv-date {
  font-size: 0.8rem;
  color: var(--muted);
}
.rv-g {
  margin-left: auto;
  flex-shrink: 0;
}
.rv-stars {
  margin: 0 0 0.6rem;
  color: #fbbc04;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  line-height: 1;
}
.review blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

.google-cta {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.google-cta a {
  color: var(--black);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
}

/* ===== Service area ===== */
.area-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .area-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}
.big-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(8rem, 18vw, 14rem);
  line-height: 0.85;
  color: var(--black);
  letter-spacing: -0.06em;
  display: block;
}
.big-num-cap {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-top: 0.5rem;
  display: block;
  max-width: 18em;
}

.town-list {
  columns: 2;
  column-gap: 1.5rem;
  font-size: 0.97rem;
  line-height: 1.85;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) {
  .town-list {
    columns: 3;
  }
}
.town-list li a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.town-list li a:hover {
  border-bottom-color: var(--yellow);
}
.town-list li.more {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--black);
  margin-top: 0.5rem;
}

/* ===== FAQ ===== */
/* FAQ accordion — card style, matching the junk-page service accordion */
.faq {
  max-width: 50rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq details {
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 150ms;
}
.faq details[open] {
  box-shadow: 4px 4px 0 var(--yellow);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--black);
  transition: background 120ms;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  background: #fafaf7;
}
.faq summary::after {
  content: "+";
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 0.8;
  flex-shrink: 0;
  color: var(--black);
  transition: transform 0.2s;
}
.faq details[open] summary {
  border-bottom: 1px solid var(--line);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details > p,
.faq details > ul {
  margin: 0;
  padding: 1rem 1.25rem;
  color: var(--ink);
  line-height: 1.6;
}
.faq details > ul {
  padding-left: 2.6rem;
}
.faq details > p + p,
.faq details > p + ul {
  padding-top: 0;
}

/* ===== Final CTA ===== */
.cta-final {
  background: var(--black);
  color: #fff;
  text-align: center;
}
.cta-final h2 {
  color: #fff;
  max-width: 18em;
  margin-left: auto;
  margin-right: auto;
}
.cta-final h2 em {
  color: var(--yellow);
  font-style: normal;
}
.cta-final p {
  color: rgba(255, 255, 255, 0.75);
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}
.cta-final .cta-row {
  justify-content: center;
}
.cta-final .tel-big,
.cta-final .text-big,
.cta-final .btn {
  border-color: var(--yellow);
  box-shadow: 4px 4px 0 var(--yellow);
}
.cta-final .tel-big:hover,
.cta-final .text-big:hover,
.cta-final .btn:hover {
  box-shadow: 6px 6px 0 var(--yellow);
}
.cta-final .tel-big:active,
.cta-final .text-big:active,
.cta-final .btn:active {
  box-shadow: 0 0 0 var(--yellow);
}
.cta-final .btn-primary {
  background: var(--yellow);
  color: var(--black);
}
.cta-final .btn-primary:hover {
  background: var(--red-deeper);
}
.cta-final .btn-secondary {
  background: transparent;
  color: var(--red-deep);
}
.cta-final .btn-secondary:hover {
  background: var(--yellow);
  color: var(--black);
}

/* ===== Footer ===== */
footer.site {
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.7);
  padding: 4rem 0 2rem;
  font-size: 0.92rem;
}
footer.site .foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
@media (min-width: 640px) {
  footer.site .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 960px) {
  footer.site .foot-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}
footer.site h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
footer.site a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
footer.site a:hover {
  color: var(--yellow);
}
footer.site ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer.site ul li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
footer.site .foot-brand {
  display: block;
  height: 110px;
  width: auto;
  margin-bottom: 0.85rem;
}
footer.site .nap p {
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
}
footer.site .nap strong {
  color: #fff;
  font-weight: 600;
}
footer.site .legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ===== Sticky mobile CTA (legacy bottom bar — superseded by scroll-morph topbar) ===== */
.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--yellow);
  padding: 0.85rem 1rem;
  display: none;
  gap: 0.5rem;
  z-index: 60;
  border-top: 2px solid var(--black);
}
.mobile-cta a {
  flex: 1;
  text-align: center;
  padding: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-cta a.call,
.mobile-cta a.book {
  background: var(--black);
  color: var(--yellow);
}
@media (min-width: 900px) {
  .mobile-cta {
    display: none;
  }
}

/* Add bottom padding on mobile so sticky CTA doesn't cover content */
@media (max-width: 899px) {
  footer.site {
    padding-bottom: 6rem;
  }
}

/* ===== Sub-page primitives ===== */

.crumb {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.crumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.crumb a:hover {
  color: var(--black);
  border-bottom-color: var(--yellow);
}
.crumb .sep {
  opacity: 0.4;
  margin: 0 0.35rem;
}
.crumb .current {
  color: var(--black);
}

.page-hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  max-width: 18em;
}
.page-hero .lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 36em;
  line-height: 1.55;
  margin-top: 1rem;
}

.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .page-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
  }
}
@media (min-width: 900px) {
  .page-grid .photo {
    min-height: 320px;
  }
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin: 2rem 0;
}
@media (min-width: 700px) {
  .spec-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}
.spec {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.1rem 1.25rem;
  border-radius: 4px;
}
.spec .label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.35rem;
}
.spec .val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--black);
  line-height: 1.05;
}

.prose p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
}
.prose p + p {
  margin-top: 1em;
}
.prose h3 {
  margin-top: 2rem;
}
.prose ul {
  padding-left: 1.25rem;
  line-height: 1.7;
}
.prose ul li {
  margin-bottom: 0.35rem;
}
.prose a {
  color: var(--black);
  border-bottom: 2px solid var(--yellow);
  text-decoration: none;
}
.prose a:hover {
  color: var(--yellow-deep);
}
/* Buttons inside prose keep button styling, not link styling */
.prose a.btn {
  border-bottom: 0;
}
.prose a.btn-primary {
  color: #fff;
}
.prose a.btn-primary:hover {
  color: #fff;
}

/* Related sizes row */
.related-sizes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-top: 1.5rem;
}
@media (min-width: 700px) {
  .related-sizes {
    grid-template-columns: repeat(4, 1fr);
  }
}
.related-sizes a {
  display: block;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.15s;
}
.related-sizes a:hover {
  border-color: var(--yellow);
}
.related-sizes a strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--black);
}
.related-sizes a small {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.related-sizes a.current {
  border-color: var(--black);
  background: #faf8f2;
}

/* Map: single HQ pin + permanent label (Google-style coverage map) */
.hq-pin {
  background: transparent;
  border: none;
}
.leaflet-tooltip.hq-label {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--black);
  padding: 3px 9px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.leaflet-tooltip.hq-label::before {
  display: none;
}

/* Per-size "see details" link on the dumpsters size cards */
.size-card .size-more {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--red-deep);
  text-decoration: none;
}
.size-card .size-more:hover {
  text-decoration: underline;
}

/* Dense town chips (homepage service-area section) */
.related-sizes.areas-towns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.related-sizes.areas-towns a {
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
}
.related-sizes.areas-towns a:hover {
  border-color: var(--red);
}
.related-sizes.areas-towns a strong {
  display: inline;
  font-size: 0.95rem;
  font-weight: 700;
}
.related-sizes.areas-towns a small {
  display: none;
}

/* AI-summary / quick-facts callout (answer-engine snippet) */
.ai-summary {
  background: #faf8f2;
  border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
}
.ai-summary h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}
.ai-summary ul {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.4rem;
}
.ai-summary li {
  font-size: 0.97rem;
  line-height: 1.45;
}
.ai-summary strong {
  font-family: var(--font-display);
}

/* ===== Reviews: summary card + live widget (responsive) ===== */
.iframe-full {
  min-width: 100%;
  width: 100%;
}
/* ≤799px: stacked — summary as a slim banner above the widget */
.reviews-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: stretch;
}
/* Google review summary. Styled to Google's own surface rather than the house
   style: hairline border, soft elevation, gold stars, Google's greys, body
   font. Layout mirrors how Google states a rating (number, star row, then the
   count beneath). No "Excellent" word: that's Trustpilot vocabulary, Google
   never labels a rating.
   The .rb-text > strong + span structure is load-bearing, fetch-reviews.mjs
   patches exactly that shape to keep the number current, so it stays put and
   display:contents lets its children sit in this grid. */
.reviews-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 auto;
  padding: 0.8rem 1.15rem;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-family: var(--font-body);
  text-align: left;
}
.rs-source {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 0;
  border-left: 0;
}
.rs-source svg {
  flex-shrink: 0;
}
.rs-source-text {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.1rem;
}
.rb-text {
  display: contents;
}
.rs-source-text strong,
.rb-text strong {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1;
  color: #202124;
  letter-spacing: 0;
}
.rs-stars {
  grid-column: 2;
  grid-row: 1;
  color: #fbbc04;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}
.rs-source-text span:not(.rs-stars):not(.rb-text),
.rb-text > span {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.82rem;
  font-weight: 400;
  color: #5f6368;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
@media (max-width: 460px) {
  .reviews-summary {
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
  }
  .rs-source-text strong,
  .rb-text strong {
    font-size: 1.3rem;
  }
  .rs-stars {
    font-size: 0.85rem;
  }
}

/* Follow-on block under the dumpsters hub size cards: longer-term prompt, the
   two sizing tools, and the overage footnote. Light-surface pills, since
   .town-pills is white-on-translucent and only works over the dark hero. */
.terms-after {
  margin-top: 1.6rem;
  text-align: center;
}
.terms-longer {
  margin: 0 0 0.9rem;
}
.tool-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.tool-pills a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--black);
  text-decoration: none;
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 3px;
  padding: 0.45rem 0.9rem;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.tool-pills a:hover,
.tool-pills a:focus-visible {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
}
.terms-fine {
  margin: 0;
  font-size: 0.78rem;
  color: #666;
}

/* Pickup-load slider. The thumb is a truck and the track is a road, so the two
   have to behave like one object: the tyres sit ON the line rather than the
   line cutting through the cab, and the road behind the truck fills in as you
   drag, which is the only cue that the control is a measure and not a switch.

   --ls-pct is a plain number (0-100) set by load-slider.js. The fill can't be
   a bare percentage: a thumb's centre travels from half-a-thumb to
   width-minus-half-a-thumb, so a raw percentage drifts off the truck at both
   ends. The calc below maps it onto that shorter path.

   -webkit- and -moz- track/thumb rules are written out separately; a combined
   selector list is dropped wholesale by both engines. */
.load-slider {
  --ls-pct: 38.46;
  --ls-thumb: 60px;
  margin: 1.75rem 0 2.25rem;
  padding: 1.6rem 1.6rem 1.4rem;
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 8px;
}
.ls-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--black);
  margin-bottom: 1.75rem;
}
.ls-rail {
  position: relative;
  padding-top: 2.5rem;
}
/* Rides the truck. Same travel mapping as the fill, so it stays centred over
   the thumb at both ends instead of drifting. aria-hidden because the slider's
   own value text already announces the count; an <output> here would make
   every arrow-key step speak twice. */
.ls-bubble {
  position: absolute;
  top: 0;
  left: calc(var(--ls-pct) / 100 * (100% - var(--ls-thumb)) + var(--ls-thumb) / 2);
  transform: translateX(-50%);
  padding: 0.3rem 0.7rem;
  background: var(--black);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  white-space: nowrap;
  color: #fff;
}
.ls-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  /* Follows the truck when the bubble itself is pinned at a rail end. */
  left: calc(50% + var(--ls-caret, 0px));
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--black);
}
.load-slider input[type="range"]:active ~ .ls-bubble,
.ls-rail:has(input:active) .ls-bubble {
  background: var(--red-deep);
}
.ls-rail:has(input:active) .ls-bubble::after {
  border-top-color: var(--red-deep);
}
.load-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 65px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
}
.load-slider input[type="range"]:active {
  cursor: grabbing;
}
.load-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.9) 0 9px, transparent 9px 20px)
      center / 100% 2px no-repeat,
    linear-gradient(
      to right,
      var(--red-deep) 0
        calc(var(--ls-pct) / 100 * (100% - var(--ls-thumb)) + var(--ls-thumb) / 2),
      #14140f 0
    );
}
.load-slider input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.9) 0 9px, transparent 9px 20px)
      center / 100% 2px no-repeat,
    linear-gradient(
      to right,
      var(--red-deep) 0
        calc(var(--ls-pct) / 100 * (100% - var(--ls-thumb)) + var(--ls-thumb) / 2),
      #14140f 0
    );
}
.load-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 60px;
  height: 32px;
  margin-top: -26.53px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2034%22%3E%3Cpath%20d%3D%22M5%2024V17.2q0-1.2%201.2-1.2h6.6L16.8%208q.6-1.1%201.9-1.1h10.6q1.3%200%201.9%201.1l3%208h3.3v-2h20q1.6%200%201.6%201.7V24z%22%20fill%3D%22%23c11824%22%20stroke%3D%22%230b0b0b%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M18.6%2015.2l2.7-5.1h7.2l1.9%205.1z%22%20fill%3D%22%23e8eef3%22%2F%3E%3Ccircle%20cx%3D%2215.6%22%20cy%3D%2224%22%20r%3D%225.3%22%20fill%3D%22%230b0b0b%22%2F%3E%3Ccircle%20cx%3D%2215.6%22%20cy%3D%2224%22%20r%3D%221.9%22%20fill%3D%22%23e8eef3%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2224%22%20r%3D%225.3%22%20fill%3D%22%230b0b0b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2224%22%20r%3D%221.9%22%20fill%3D%22%23e8eef3%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.load-slider input[type="range"]::-moz-range-thumb {
  width: 60px;
  height: 32px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2034%22%3E%3Cpath%20d%3D%22M5%2024V17.2q0-1.2%201.2-1.2h6.6L16.8%208q.6-1.1%201.9-1.1h10.6q1.3%200%201.9%201.1l3%208h3.3v-2h20q1.6%200%201.6%201.7V24z%22%20fill%3D%22%23c11824%22%20stroke%3D%22%230b0b0b%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M18.6%2015.2l2.7-5.1h7.2l1.9%205.1z%22%20fill%3D%22%23e8eef3%22%2F%3E%3Ccircle%20cx%3D%2215.6%22%20cy%3D%2224%22%20r%3D%225.3%22%20fill%3D%22%230b0b0b%22%2F%3E%3Ccircle%20cx%3D%2215.6%22%20cy%3D%2224%22%20r%3D%221.9%22%20fill%3D%22%23e8eef3%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2224%22%20r%3D%225.3%22%20fill%3D%22%230b0b0b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2224%22%20r%3D%221.9%22%20fill%3D%22%23e8eef3%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  transform: translateY(-13.53px);
}
.load-slider input[type="range"]:focus-visible {
  outline: 3px solid var(--red-deep);
  outline-offset: 8px;
  border-radius: 6px;
}
/* One notch per load, so the stops are readable without a number on each. */
.ls-ticks {
  height: 6px;
  margin: 0.45rem calc(var(--ls-half, 30px)) 0;
  background-image: linear-gradient(to right, var(--line) 0 1px, transparent 1px);
  background-size: calc(100% / 13) 100%;
  background-repeat: repeat-x;
}
.ls-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.ls-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.ls-count {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.ls-size {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--black);
}
.ls-meta {
  margin-top: 0.45rem;
  font-size: 0.88rem;
  color: #5a5a5a;
}
.load-slider .ls-link {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: #fff;
  text-decoration: none;
  background: var(--red-deep);
  border: 2px solid var(--red-deep);
  border-radius: 4px;
  padding: 0.6rem 1.3rem;
  transition: background 140ms ease, border-color 140ms ease;
}
.load-slider .ls-link:hover,
.load-slider .ls-link:focus-visible {
  background: var(--black);
  border-color: var(--black);
}
.load-slider .ls-note {
  margin: 1.2rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #6b6b6b;
}
@media (max-width: 560px) {
  .load-slider {
    padding: 1.2rem 1.1rem 1.1rem;
  }
  .ls-size {
    font-size: 1.7rem;
  }
  .ls-scale {
    font-size: 0.63rem;
  }
}

/* Project accordion on the size guide. Native <details> on purpose: the copy
   ships in the HTML and stays fully indexable, which is not true of panels
   whose content is injected on click. No FAQPage schema on these either, since
   they are project headings rather than questions. */
.proj-list {
  margin-top: 1.5rem;
}
.proj {
  margin-bottom: 0.8rem;
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 6px;
}
.proj summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.35rem;
  cursor: pointer;
  list-style: none;
  border-radius: 4px;
}
.proj summary::-webkit-details-marker {
  display: none;
}
/* The label is an <h3> so these project names land in the document outline; a
   crawler otherwise sees unlabelled disclosure widgets under a lone H2. Reset
   so the heading doesn't disturb the summary row. */
.proj summary h3,
.faq summary h3 {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.proj summary h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--black);
}
.proj summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--red-deep);
}
.proj[open] summary::after {
  content: "\2212";
}
.proj summary:hover {
  background: #f7f6f5;
}
.proj summary:focus-visible {
  outline: 3px solid var(--red-deep);
  outline-offset: -3px;
}
.proj > p {
  margin: 0;
  padding: 0.4rem 1.35rem 1.35rem;
  font-size: 0.95rem;
  line-height: 1.72;
  color: #333;
}
@media (prefers-reduced-motion: no-preference) {
  .proj[open] > p {
    animation: proj-open 160ms ease-out;
  }
  @keyframes proj-open {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Homeowners vs contractors comparison on the services hub. Built on
   .price-table; a real table (not two divs) so the row labels are <th scope>
   and a screen reader pairs each cell with what it means. */
.price-table.compare-table {
  margin-top: 1.75rem;
  table-layout: fixed;
}
.compare-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.compare-table th[scope="col"] {
  width: 34%;
}
.compare-table th[scope="col"]:first-child {
  width: 18%;
}
.compare-table tbody th[scope="row"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 1rem;
}
.compare-table td {
  vertical-align: top;
  font-size: 0.92rem;
  line-height: 1.5;
}
.compare-table td.size {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--red-deep);
}
/* Visually hidden but still announced: the empty corner cell of the header row. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table td,
  .compare-table tbody th {
    display: block;
    width: auto;
  }
  .compare-table thead {
    display: none;
  }
  .compare-table tr {
    border-bottom: 1px solid var(--line);
  }
  .compare-table tbody th[scope="row"] {
    border-bottom: 0;
    padding-bottom: 0.2rem;
  }
  /* With the column header hidden, each cell has to name its own side. */
  .compare-table td::before {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red-deep);
  }
  .compare-table td:nth-of-type(1)::before { content: "Homeowners"; }
  .compare-table td:nth-of-type(2)::before { content: "Contractors & builders"; }
  .compare-table td {
    padding: 0.3rem 1rem 0.7rem;
    border-bottom: 0;
  }
}

.review-widget-wrap {
  width: 100%;
}
/* Reviews page: live Google review cards (built from reviews-live.json) */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.review-card {
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 8px;
  padding: 1.4rem 1.5rem;
  box-shadow: 4px 4px 0 var(--yellow);
  display: flex;
  flex-direction: column;
}
.review-card .rc-stars {
  margin: 0;
  color: var(--yellow);
  font-size: 1.05rem;
  letter-spacing: 2px;
  line-height: 1;
}
.review-card .rc-body {
  margin: 0.85rem 0 1.1rem;
  color: var(--ink);
  line-height: 1.55;
}
.review-card .rc-meta {
  margin: auto 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--black);
}
.review-card .rc-date {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
@media (max-width: 460px) {
  .reviews-summary {
    gap: 1rem;
    padding: 0.85rem 1.1rem;
  }
  .reviews-summary-stars {
    font-size: 1.4rem;
  }
  .rs-source {
    padding-left: 1rem;
  }
  .rs-source-text strong {
    font-size: 1.3rem;
  }
}
@media (max-width: 410px) {
  .reviews-summary {
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
  }
  .reviews-summary-stars {
    font-size: 1.15rem;
    letter-spacing: 0.08em;
  }
  .reviews-summary-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }
  .rs-source {
    padding-left: 0.7rem;
    gap: 0.5rem;
  }
  .rs-source svg {
    width: 24px;
    height: 24px;
  }
  .rs-source-text strong {
    font-size: 1.15rem;
  }
  .rs-source-text span {
    font-size: 0.7rem;
  }
}

/* Town index */
.region {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
}
.region h3 {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}
.region .region-cap {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.region-towns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 700px) {
  .region-towns {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1000px) {
  .region-towns {
    grid-template-columns: repeat(4, 1fr);
  }
}
.region-towns li a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.97rem;
  border-bottom: 1px dotted transparent;
}
.region-towns li a:hover {
  border-bottom-color: var(--yellow);
}
.region-towns .hq a {
  font-weight: 700;
}
.region-towns .hq a::after {
  content: " · HQ";
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
}

/* Items lists for acceptable-items page */
.items-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 800px) {
  .items-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.items-block {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  padding: 1.5rem 1.75rem;
  border-radius: 4px;
}
.items-block.warn {
  border-left-color: #c77;
}
.items-block.no {
  border-left-color: var(--black);
}
.items-block h3 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}
.items-block ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--ink);
}

/* Contact NAP card */
.nap-card {
  background: var(--bg-warm);
  border: 1px solid var(--line);
  padding: 2rem;
  border-radius: 4px;
}
.nap-card .label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.25rem;
}
.nap-card .val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--black);
  margin-bottom: 1.25rem;
  display: block;
}
.nap-card .val a {
  color: var(--black);
  text-decoration: none;
  border-bottom: 2px solid var(--yellow);
}

/* ===== Town search ===== */
.town-search {
  margin: 0 0 3rem;
  max-width: 640px;
  position: relative;
}
.town-search label {
  display: block;
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black);
  margin: 0 0 0.65rem;
}
.town-search-input-wrap {
  position: relative;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.town-search-input-wrap:focus-within {
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(245, 184, 0, 0.18);
}
.town-search input[type="search"] {
  width: 100%;
  padding: 1.1rem 3rem 1.1rem 3.25rem;
  font-family: var(--font-body) !important;
  font-size: 1.1rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  font-weight: 500;
}
.town-search input[type="search"]::-webkit-search-decoration,
.town-search input[type="search"]::-webkit-search-cancel-button,
.town-search input[type="search"]::-webkit-search-results-button,
.town-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.town-search input::placeholder {
  color: #9a9a9a;
  font-weight: 400;
}
.town-search-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--ink);
  pointer-events: none;
  opacity: 0.7;
}
.town-search-input-wrap:focus-within .town-search-icon {
  opacity: 1;
  color: var(--black);
}

.town-search .clear-btn {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: var(--bg-warm);
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  transition:
    background 0.15s,
    color 0.15s;
}
.town-search .clear-btn:hover {
  background: var(--yellow);
  color: var(--black);
}
.town-search.has-query .clear-btn {
  display: flex;
}

.town-search-count {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  color: var(--muted);
  font-family: var(--font-body);
  min-height: 1.2em;
}
.town-search-count strong {
  color: var(--black);
  font-weight: 700;
}

/* ===== Suggestions dropdown ===== */
.town-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
  max-height: 380px;
  overflow-y: auto;
  z-index: 30;
  display: none;
  padding: 0.35rem 0;
}
.town-suggestions.is-open {
  display: block;
}
.town-suggestion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.3;
  border: 0;
}
.town-suggestion + .town-suggestion {
  border-top: 1px solid var(--line);
}
.town-suggestion:hover,
.town-suggestion.is-active {
  background: var(--yellow-tint);
}
.town-suggestion.is-active {
  outline: 2px solid var(--yellow);
  outline-offset: -2px;
}
.town-suggestion-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--black);
  font-size: 1.05rem;
}
.town-suggestion-name mark {
  background: transparent;
  color: var(--yellow-deep);
  font-weight: 700;
  padding: 0;
}
.town-suggestion-region {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.town-suggestion-empty {
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
}

/* ===== No-match fallback panel ===== */
.no-match {
  display: none;
  padding: 2rem 1.75rem;
  margin: 0 0 2rem;
  background: var(--bg-warm);
  border-left: 4px solid var(--yellow);
  border-radius: 4px;
}
.no-match.is-active {
  display: block;
}
.no-match h3 {
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
}
.no-match p {
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 36em;
  margin: 0 0 1.25rem;
}

/* Hidden state for filtered items */
.region-towns li.is-hidden,
.region.is-hidden {
  display: none;
}

/* ===== Blog featured image / category banner ===== */
.featured-image {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--ink);
  margin: 0;
  display: block;
}
.post-banner {
  background: var(--yellow);
  border: 3px solid var(--black);
  border-radius: 6px;
  padding: 2.25rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
}
.post-banner-mark {
  width: 72px;
  height: 72px;
  background: var(--black);
  color: var(--yellow);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.post-banner-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  letter-spacing: 0.04em;
  color: var(--black);
  text-transform: uppercase;
  line-height: 1.02;
}
.post-banner-text small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  margin-top: 0.35rem;
}
@media (max-width: 600px) {
  .post-banner {
    padding: 1.5rem 1.25rem;
    gap: 1rem;
  }
  .post-banner-mark {
    width: 56px;
    height: 56px;
    font-size: 1.9rem;
  }
}

/* Stop region container from being too tight on mobile when search opens */
@media (max-width: 600px) {
  .town-suggestions {
    max-height: 280px;
  }
  .town-suggestion-region {
    display: none;
  }
}

/* ===== Service area map ===== */
.map-wrap {
  position: relative;
  margin: 0 0 2.5rem;
}
#service-map {
  height: 640px;
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--bg-warm);
  z-index: 1;
}
@media (max-width: 600px) {
  #service-map {
    height: 420px;
  }
}
/* Static service-area map (image + our own pin, no JS) */
.town-map-static {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 6px 6px 0 var(--black);
}
.town-map-static img {
  display: block;
  width: 100%;
  height: auto;
}
.town-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  width: 30px;
  height: 40px;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* Static service-AREA map (home + hub): base image + SVG coverage overlay + HQ pin, no JS */
.area-map-static {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 6px 6px 0 var(--black);
}
.area-map-static img {
  display: block;
  width: 100%;
  height: auto;
}
.area-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.area-map-pin {
  position: absolute;
  width: 30px;
  height: 40px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  z-index: 2;
}
/* Label that floats above the HQ pin so it's clear the pin = home base */
.area-map-flag {
  position: absolute;
  transform: translate(-50%, -58px);
  background: var(--black);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.2;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.28);
}
/* soft diamond nub instead of a sharp triangle */
.area-map-flag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 9px;
  height: 9px;
  background: var(--black);
  border-radius: 0 0 2px 0;
  transform: translate(-50%, -5px) rotate(45deg);
}.amleg-pin {
  display: inline-flex;
  flex-shrink: 0;
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-family: var(--font-body);
}
.map-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.map-legend .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--ink);
  flex-shrink: 0;
}
.map-legend .dot.hq {
  background: var(--ink);
  border-color: var(--yellow);
  position: relative;
}

/* Leaflet marker custom styling */
.town-marker-icon {
  background: transparent;
  border: 0;
}
.town-marker-icon .dot {
  width: 16px;
  height: 16px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.12s;
}
.town-marker-icon:hover .dot {
  transform: scale(1.25);
}
.town-marker-icon.hq .dot {
  width: 26px;
  height: 26px;
  background: var(--ink);
  border-color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--yellow);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}
.town-marker-icon.hq .dot::after {
  content: "HQ";
}

/* Leaflet popup styling */
.leaflet-popup-content-wrapper {
  border-radius: 4px;
  border: 2px solid var(--ink);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.leaflet-popup-content {
  margin: 0.85rem 1rem;
  font-family: var(--font-body);
}
.leaflet-popup-content .popup-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--black);
  display: block;
  margin-bottom: 0.35rem;
}
.leaflet-popup-content .popup-name .hq-tag {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
  margin-left: 0.4rem;
}
.leaflet-popup-content .popup-link {
  display: inline-block;
  color: var(--black);
  text-decoration: none;
  border-bottom: 2px solid var(--yellow);
  font-weight: 700;
  font-size: 0.92rem;
  padding-bottom: 1px;
}
.leaflet-popup-content .popup-link:hover {
  color: var(--yellow-deep);
}
.leaflet-popup-tip {
  border: 2px solid var(--ink);
}

/* ===== Proudfoot: homepage size cards with image + price (3-up) ===== */
.sizes.cols-3 {
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .sizes.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.size-card.priced {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.size-card.priced img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  height: auto;
  margin-bottom: 0.5rem;
}
.size-card.priced .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--yellow-deep);
  display: block;
  margin: 0.1rem 0 0.6rem;
}
.size-card.priced ul {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.size-card.priced ul li::before {
  content: "✓ ";
  color: var(--yellow-deep);
  font-weight: 700;
}

/* ===== Junk-removal item chips ===== */
.item-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 700px) {
  .item-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.item-grid span {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
.item-grid span::before {
  content: "🔥";
  font-size: 0.85rem;
  flex: 0 0 auto;
}
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.25rem 1.25rem 1.4rem;
}
.step .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--yellow-deep);
  line-height: 1;
}
.step h3 {
  margin: 0.4rem 0 0.3rem;
}
.step p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}
@media (min-width: 760px) {
  .steps.steps-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Proudfoot: pricing table + fee list ===== */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.price-table th,
.price-table td {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
}
.price-table thead th {
  background: var(--black);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.price-table tbody tr:last-child td {
  border-bottom: none;
}
.price-table .size {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--black);
}
.price-table .amt {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--yellow-deep);
  white-space: nowrap;
}
/* Narrow variant for short two-column spec tables. The full-width .price-table
   is built for the 5-column rate grid; at prose width a size/tonnage pair
   strands most of the row in whitespace. */
.price-table.spec-table {
  max-width: 26rem;
}
.price-table.spec-table .amt {
  text-align: right;
}
.price-table.spec-table th:last-child {
  text-align: right;
}

.fee-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.fee-list li {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  border-radius: 4px;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
}
.fee-list li strong {
  font-family: var(--font-display);
  color: var(--black);
}
.includes {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 600px) {
  .includes {
    grid-template-columns: repeat(2, 1fr);
  }
}
.includes li {
  font-size: 0.98rem;
}
.includes li::before {
  content: "✓ ";
  color: var(--yellow-deep);
  font-weight: 700;
}

/* ===== Proudfoot: service menu (his Residential/Commercial lists) ===== */
.svc-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (min-width: 760px) {
  .svc-menu {
    grid-template-columns: repeat(2, 1fr);
  }
}
.svc-menu .col {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--yellow);
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.75rem;
}
.svc-menu .col h3 {
  margin: 0 0 0.75rem;
}
.svc-menu .col ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.svc-menu .col li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 500;
}
.svc-menu .col li::before {
  content: "🔥 ";
}
.svc-area {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ===== Acceptable items: approved / restricted lists ===== */
.no-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.5rem;
}
.no-list li {
  font-size: 0.98rem;
}
.no-list li::before {
  content: "✕ ";
  color: var(--yellow-deep);
  font-weight: 700;
}

/* ===== Online booking embed (survcart / Docket) ===== */
.booking-embed {
  position: relative;
  width: 100%;
  min-height: 720px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.booking-embed iframe {
  width: 100%;
  min-height: 720px;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== Booking modal (SurvCart / Docket) ===== */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.booking-modal.is-open {
  display: block;
  opacity: 1;
}
.booking-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}
.booking-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100vw - 2rem));
  height: min(780px, calc(100vh - 2rem));
  background: transparent;
  border: 2px solid var(--black);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--yellow);
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.booking-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  border: 2px solid var(--black);
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--font-display);
  transition:
    background 150ms,
    transform 150ms;
}
.booking-modal-close:hover {
  background: var(--yellow);
  color: var(--black);
  transform: scale(1.05);
}
.booking-modal-iframe {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  display: block;
  background: transparent;
}
@media (max-width: 600px) {
  .booking-modal-content {
    width: calc(100vw - 4.5rem);
    height: calc(100vh - 11rem);
    border-radius: 8px;
    border: 2px solid var(--black);
    box-shadow: 4px 4px 0 var(--yellow);
  }
  .booking-modal-close {
    top: 10px;
    right: 10px;
  }
  .booking-modal-iframe {
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

/* While the booking modal is open, hide the LeadConnector chat widget
   so its bottom-right bubble doesn't overlap the booking form's submit. */
html.booking-modal-open chat-widget,
html.booking-modal-open #chat-widget,
html.booking-modal-open [id^="lc_chat"],
html.booking-modal-open [class*="chat-widget"],
html.booking-modal-open iframe[src*="chat-widget"],
html.booking-modal-open iframe[src*="leadconnectorhq.com"] {
  display: none !important;
}

/* ===== Full-bleed hero (real-photo background) ===== */
.hero.hero-bg {
  position: relative;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(5rem, 10vw, 8rem);
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.hero.hero-bg .wrap.hero-grid { width: 100%; }
.hero-bg-media { position: absolute; inset: 0; z-index: -2; }
/* The photo's quiet zone (field, tree line, empty asphalt) is on its left;
   the truck's big white phone number sits centre-right. Anchoring left keeps
   the headline off that lettering. Matters most on phones, where the tall
   container crops far more of the width away. */
.hero-bg-media img { width: 100%; height: 100%; object-fit: cover; object-position: 34% center; display: block; }
@media (max-width: 899px) {
  .hero-bg-media img { object-position: 22% center; }
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  /* Lighter over the sky (top) so the sunset shows, darker toward the bottom
     where the headline + buttons sit. */
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.84) 100%);
  z-index: -1;
}
@media (min-width: 900px) {
  .hero-bg-overlay {
    /* Directional scrim: dark behind the left text column, clear over the
       right/top so the sunset comes through. */
    background:
      linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.05) 68%),
      linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 38%, rgba(0,0,0,0) 62%);
  }
}
.hero.hero-bg .hero-grid { align-items: center; }
.hero.hero-bg .hero-content { color: #fff; }
.hero.hero-bg h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.8rem); line-height: 1.05; margin-bottom: 1rem; text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
.hero.hero-bg .hero-accent {
  color: var(--red-on-dark);
  display: inline-block;
  /* Lifts the accent off busy photography without dimming the colour. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 16px rgba(0, 0, 0, 0.7);
}
.hero.hero-bg .lead { color: rgba(255,255,255,0.96); text-shadow: 0 1px 10px rgba(0,0,0,0.65); max-width: 36em; margin-bottom: 2rem; font-size: clamp(1rem, 1.4vw, 1.15rem); }.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; }
.btn.btn-on-dark, .btn-secondary.btn-on-dark {
  background: transparent; color: #fff; border-color: #fff; box-shadow: 4px 4px 0 var(--yellow);
}
.btn.btn-on-dark:hover, .btn-secondary.btn-on-dark:hover { background: #fff; color: var(--black); }

/* Trust bar */
.trust-bar {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--ink);
}
.trust-bar li { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.trust-bar .trust-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); color: var(--black);
  font-size: 0.7rem; font-weight: 700; border: 1px solid var(--black);
}
.trust-bar-on-dark { color: #fff; font-weight: 700; gap: 0.6rem 0.6rem; }
.trust-bar-on-dark li {
  background: rgba(17,17,17,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); color: #fff;
}
.trust-bar-on-dark .trust-check { background: var(--yellow); color: var(--black); border: 1px solid var(--black); }

/* Hero floating card */
/* Matches .town-spec on the inner pages: a translucent panel the photo shows
   through, rather than an opaque slab covering it. Alpha is 0.62 rather than
   something lighter because these heroes have bright areas (sky, the white
   lettering on the truck) and the blur carries them through: at 0.46 white
   text over those spots measured 3.2:1, under the 4.5 minimum. */
.hero-card {
  background: rgba(11, 11, 11, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}
.hero-card-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.hero-card-logo { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; }
.hero-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0; color: #fff; line-height: 1.1; }
.hero-card-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; }
.hero-card-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; line-height: 1.4; color: rgba(255, 255, 255, 0.92); font-family: var(--font-display); font-weight: 600; }
.hero-card-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; border: 2px solid var(--black); }
.hero-card-cta { display: block; background: var(--red-deep); color: #fff; text-align: center; padding: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 4px; box-shadow: 0 0 0 var(--yellow); transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.hero-card-cta:hover { background: var(--red-deeper); }
.hero-card-cta:active { transform: translateY(1px); }

/* ===== Full-bleed centered hero (major pages: dumpsters, services, service area) ===== */
.hero.hero-bg-centered {
  text-align: center;
  padding-bottom: clamp(7rem, 11vw, 9rem);
}
.hero.hero-bg-centered .hero-content-centered {
  max-width: 56rem;
  margin: 0 auto;
  color: #fff;
}
.hero.hero-bg-centered h1 {
  color: #fff;
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.hero.hero-bg-centered .hero-accent {
  color: var(--red-on-dark);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 16px rgba(0, 0, 0, 0.7);
}
.hero.hero-bg-centered .lead {
  color: rgba(255, 255, 255, 0.88);
  max-width: 44rem;
  margin: 0 auto 2rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.hero.hero-bg-centered .hero-ctas {
  justify-content: center;
  margin-bottom: 0;
}
.hero.hero-bg-centered .eyebrow {
  margin-bottom: 1.25rem;
}

/* ============================================================
   COLOR HIERARCHY (override): RED = filled action buttons,
   ORANGE = accents (eyebrows, checks, underlines, prices, etc.)
   Red ties the CTAs to the red dumpster; orange stays the accent.
   ============================================================ */
.btn-primary {
  background: var(--red-deep);
  color: #fff;
}
.btn-primary:hover {
  background: var(--red-deeper);
}
/* Topbar phone pill + scroll-morph Call/Text CTAs */
.tel-cta {
  background: var(--red-deep);
  color: #fff;
}
.tel-cta:hover {
  background: var(--red-deeper);
}
.tel-cta::before {
  background: #fff;
}
.topbar-scroll-cta a {
  background: var(--red-deep);
  color: #fff;
}
/* Big phone + text CTAs (hero/section/contact) */
.tel-big,
.text-big {
  background: var(--red-deep);
  color: #fff;
}
.tel-big:hover,
.text-big:hover {
  background: var(--red-deeper);
}
/* Prominent "Book Online" button — flame-orange so it stands out from the
   red Call/Text buttons. The primary action on dumpster pages. */
.book-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  background: var(--yellow);
  color: var(--black);
  padding: 0.85rem 1.5rem;
  border-radius: 6px;
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}
.book-big:hover {
  background: var(--red-deeper);
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
}
.book-big:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--black);
}
/* Unified CTA button group: one centered, wrapping row (fixes the
   split-row / off-center spacing). */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
}
.cta-buttons .tel-big,
.cta-buttons .text-big,
.cta-buttons .book-big {
  margin: 0;
}
.cta-final .cta-buttons {
  justify-content: center;
}
.tel-big::before,
.text-big::before {
  background: #fff;
}
/* Legacy sticky mobile bar */
.mobile-cta {
  background: var(--black);
}
.mobile-cta a.call,
.mobile-cta a.book {
  background: var(--red-deep);
  color: #fff;
}

/* ============================================================
   Shared structural/UX components
   brought over from the reference site. Orange (--yellow) =
   accent, consistent with the red-primary hierarchy.
   ============================================================ */

/* --- Size-card polish (chunky border + top accent bar + hover lift) --- */
.size-card {
  border: 3px solid var(--black);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--black);
  position: relative;
  overflow: hidden;
  /* Column, so the actions block's margin-top:auto has something to push
     against. Without this the card is a plain block and the buttons sit
     wherever the copy happens to end, which is different in every card. */
  display: flex;
  flex-direction: column;
}
.size-card-link {
  /* Takes the slack, so uneven copy lengths land the CTAs on one line. */
  flex: 1 1 auto;
}
.size-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--yellow);
}
.size-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--yellow);
  border-color: var(--black);
}
.size-card.priced {
  padding-top: 1.75rem;
}
/* Featured "Most Popular" card (the 20-yard) — red frame + labeled banner */
.size-card.featured {
  border-color: var(--red-deep);
  box-shadow: 8px 8px 0 var(--red-deep);
  padding-top: 2.6rem;
}
.size-card.featured::before {
  content: "★ Most Popular";
  height: auto;
  padding: 0.45rem 0.5rem;
  background: var(--red-deep);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
}
.size-card.featured:hover {
  box-shadow: 11px 11px 0 var(--red-deep);
}
@media (min-width: 760px) {
  .sizes.cols-3 .size-card.featured {
    transform: translateY(-10px);
  }
  .sizes.cols-3 .size-card.featured:hover {
    transform: translate(-3px, -13px);
  }
}

/* --- Why-us pillar grid --- */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 850px) {
  .pillar-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.pillar {
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 6px;
  padding: 1.5rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.pillar-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--black);
}
.pillar-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.pillar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* --- Town-page "services available here" quick-link cards --- */
.town-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
@media (min-width: 600px) {
  .town-services-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 900px) {
  .town-services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.town-service-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 150ms,
    box-shadow 150ms;
  box-shadow: 3px 3px 0 var(--black);
}
.town-service-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--yellow);
}
.town-service-card .ts-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--black);
}
.town-service-card .ts-detail {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

/* --- Contact quick-links related block --- */
.quick-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
@media (min-width: 640px) {
  .quick-links {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 900px) {
  .quick-links {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   DESIGN POLISH PASS (2026-06-11): unify flat cards into the
   brand's chunky bordered-card family for visual consistency.
   ============================================================ */

/* Process steps — number becomes an orange circle badge */
.step {
  border: 2px solid var(--black);
  border-radius: 8px;
  padding: 1.6rem 1.4rem 1.45rem;
  box-shadow: 5px 5px 0 var(--black);
  position: relative;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}
.step:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--yellow);
}
.step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  font-size: 1.3rem;
  margin-bottom: 0.9rem;
}

/* Review cards — bordered + hard shadow to match the card system */
.review {
  border: 2px solid var(--black);
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--black);
}
.review .stars {
  font-size: 1.15rem;
}

/* Specialty-cleanout cards (services.html) — were an orphan dark
   image-card with no image (rendered as a black box). Restyle to the
   site's white chunky card with an orange top accent. */
.svc-card {
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--black);
  min-height: 0;
  overflow: hidden;
  position: relative;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}
.svc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--yellow);
  z-index: 2;
}
.svc-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--yellow);
}
.svc-card .svc-body {
  background: none;
  padding: 2.25rem 1.85rem 1.85rem;
}
.svc-card h3 {
  color: var(--black);
}
.svc-card p {
  color: var(--ink);
}
.svc-card a.svc-link {
  color: var(--yellow-deep);
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 1px;
}
.svc-card a.svc-link:hover {
  color: var(--black);
}

/* Restricted-items list — red ✕ marks (red = stop/no) to contrast
   with the orange ✓ on the approved list. */
.no-list li::before {
  color: var(--red);
}
/* ===== Why-us pillar grid (homepage "why folks keep calling us back") ===== */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 850px) {
  .pillar-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.pillar {
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 8px;
  padding: 1.6rem 1.35rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  box-shadow: 5px 5px 0 var(--black);
}
.pillar-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--black);
}
.pillar-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.pillar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* ============================================================
   ACCESSIBILITY (audit fixes): keyboard focus, reduced motion,
   mobile tap targets.
   ============================================================ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
.town-service-card:focus-visible,
.size-card:focus-visible {
  outline: 3px solid var(--yellow-deep);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Light focus ring on red/dark surfaces for contrast */
.btn-primary:focus-visible,
.tel-cta:focus-visible,
.tel-big:focus-visible,
.text-big:focus-visible,
.btn-on-dark:focus-visible,
.hero-card-cta:focus-visible,
.cta-final a:focus-visible,
.topbar-scroll-cta a:focus-visible,
.mobile-cta a:focus-visible {
  outline-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Bigger mobile tap target on the topbar phone pill (was ~22px) */
@media (max-width: 999px) {
  .tel-cta {
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
  }
}

/* ===== Service accordion (junk-removal style) ===== */
.service-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.acc-item {
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 150ms;
}
.acc-item[open] {
  box-shadow: 4px 4px 0 var(--yellow);
}
.acc-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--black);
  transition: background 120ms;
}
.acc-item summary::-webkit-details-marker {
  display: none;
}
.acc-item summary:hover {
  background: #fafaf7;
}
.acc-title {
  flex: 1;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.acc-icon {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 0.8;
  color: var(--black);
  transition: transform 0.2s;
}
.acc-icon::before {
  content: "+";
}
.acc-item[open] .acc-icon {
  transform: rotate(45deg);
}
.acc-body {
  padding: 0 1.25rem 1.25rem;
  color: var(--ink);
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 0;
}
.acc-body p {
  margin: 0 0 0.85rem;
  color: var(--ink);
}
.acc-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 1px;
}
.acc-link:hover {
  color: var(--red-deep);
  border-bottom-color: var(--black);
}

/* ===== Mid-page booking CTA band ===== */
.cta-band {
  background: var(--red-deep);
  border: 3px solid var(--black);
  box-shadow: 8px 8px 0 var(--black);
  border-radius: 8px;
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.cta-band h2 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 0.5rem;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
}
.cta-band-row {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-band .btn-book {
  background: #fff;
  color: var(--red-deep);
  border: 2px solid var(--black);
}
.cta-band .btn-book:hover {
  background: var(--black);
  color: #fff;
}
.cta-band .btn-call {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.cta-band .btn-call:hover {
  background: #fff;
  color: var(--red-deep);
}

/* Contact-page Google Map embed */
.map-embed {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
.map-embed iframe { display: block; width: 100%; }

/* About-page "why us" cards */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 800px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem 1.4rem; }
.why-card h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: 1.15rem; }
.why-card p { margin: 0; color: var(--muted); }

/* Pricing page "good to know" notes */
.price-note-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.5rem; }
@media (min-width: 800px) { .price-note-grid { grid-template-columns: repeat(3, 1fr); } }
.price-note { border-left: 3px solid var(--red); padding: .25rem 0 .25rem 1rem; }
.price-note h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.05rem; }
.price-note p { margin: 0; color: var(--muted); font-size: .97rem; }

/* ============================================================
   Homepage conversion additions (2026-07-12)
   Stats band · size-card actions · pull-quote · service-area map
   ============================================================ */

/* --- Stats band (real facts, sits under the hero) --- */
.stat-band { background: var(--black); }
.stat-band .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255, 255, 255, 0.12);
  border-radius: 8px; overflow: hidden; margin-top: 0; margin-bottom: 0;
}
.stat-band { padding: 0; }
.stat-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.25rem; padding: 1.4rem 1rem;
  background: var(--black); color: #fff; text-decoration: none;
  transition: background 0.15s;
}
.stat-item:hover { background: #191919; }
.stat-item .si-val {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1; color: #fff;
}
.stat-item:hover .si-val { color: var(--red); }
.stat-item .si-label {
  font-size: 0.8rem; line-height: 1.3; color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 700px) {
  .stat-band .wrap { grid-template-columns: 1fr 1fr; }
}

/* --- Size cards: per-duration price table --- */
.price-rows { list-style: none; padding: 0; margin: 0.5rem 0 0.7rem; }
.price-rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.3rem 0; border-bottom: 1px dotted var(--line);
}
.price-rows li:last-child { border-bottom: none; }
/* override the feature-bullet checkmark that .size-card.priced ul li::before adds */
.size-card.priced .price-rows li::before { content: none; }
.price-rows .dur {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted);
}
.price-rows .amt {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  line-height: 1; color: var(--red-deep);
}

/* --- Size cards: info link + booking action footer --- */
.size-card-link { display: block; text-decoration: none; color: inherit; }
.size-card-dims {
  display: block; margin: 0 0 0.6rem; font-size: 0.82rem;
  color: var(--muted); line-height: 1.4;
}
.size-card-actions {
  /* Stacked, not side by side: at four cards across, two flex:1 buttons get
     ~110px each and any label longer than one word wraps mid-phrase. */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.1rem;
}
.size-act {
  flex: 1; text-align: center; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  padding: 0.7rem 0.9rem; border-radius: 4px; transition: background 0.15s, color 0.15s;
}
.size-act-book { background: var(--red-deep); color: #fff; }
.size-act-book:hover { background: var(--black); }
.size-act-info {
  background: transparent; color: var(--black);
  border: 1px solid var(--line);
}
.size-act-info:hover { border-color: var(--black); }

/* --- Owner pull-quote (story section) --- */
.pull-quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.28;
  letter-spacing: -0.01em; color: var(--black);
  border-left: 4px solid var(--red); padding-left: 1.2rem;
  margin: 1.5rem 0; quotes: none;
}

/* --- Service-area map (Leaflet, keyless) --- */
#area-map {
  min-height: 400px; height: 400px; margin: 0 0 2rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-warm); z-index: 0;
}
#area-map .leaflet-popup-content { margin: 0.6rem 0.9rem; font-family: var(--font-body); }
@media (max-width: 700px) { #area-map { min-height: 300px; height: 300px; } }

/* ===== Proudfoot: sticky bottom call bar ON for mobile (owner request:
   "want to speak to a human, press the button"). (legacy comment removed)
   the scroll-morphing topbar; Proudfoot runs both. ===== */
@media (max-width: 899px) {
  .mobile-cta {
    display: flex;
  }
  /* Call-only on the mobile bar: Text lives in the scrolled topbar already,
     and one full-width Call button is the stronger single ask. Desktop keeps
     both pills (no Text affordance in the desktop topbar). */
  .mobile-cta a.book {
    display: none;
  }
  body {
    padding-bottom: 4.4rem; /* keep the bar off the footer/legal text */
  }
}

/* ===== Proudfoot: desktop floating call pill (call-first policy). The same
   .mobile-cta element every page already carries becomes a bottom-right pill
   cluster on desktop, so the number is one click away at any scroll depth.
   The sticky topbar shows the number too; this is the louder affordance. ===== */
@media (min-width: 900px) {
  footer.site {
    padding-bottom: 7rem; /* keep the floating call pill off the legal row */
  }
  .mobile-cta {
    display: flex;
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    width: auto;
    background: transparent;
    border-top: 0;
    padding: 0;
    gap: 0.6rem;
  }
  .mobile-cta a {
    flex: none;
    border-radius: 999px;
    border: 2px solid var(--black);
    box-shadow: 4px 4px 0 var(--black);
    padding: 0.9rem 1.5rem;
    font-size: 1.05rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  }
  .mobile-cta a.call {
    background: var(--red-deep);
    color: #fff;
  }
  .mobile-cta a.call:hover {
    background: var(--red-deeper);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--black);
  }
  .mobile-cta a.book {
    background: #fff;
    color: var(--black);
  }
  .mobile-cta a.book:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--black);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOWN PAGE HERO + SUB-AREA SYSTEM
   Structure borrowed from a competitor teardown, rebuilt in the house
   idiom: 6px radius, 2px black border, 4px hard offset shadow. The only
   softer surface is the glass spec panel, which is not a card or a button.
   Emitted by scripts/build-town-pages.mjs.
   ═══════════════════════════════════════════════════════════════════════ */

/* Two-tone headings: constant part in ink, town name in brand red.
   #e82030 on white is 4.49:1 — over the 3:1 large-text bar, under AA for
   body. Scoped to h1/h2 scale only, never body copy. */
.kw { color: var(--red); }
/* On the photo hero the base red goes muddy against dark imagery, same as the
   homepage headline. Step up to the on-dark tier and lift it off the picture.
   The in-body .kw above stays base red; it sits on white. */
.town-hero .kw {
  color: var(--red-on-dark);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 16px rgba(0, 0, 0, 0.7);
}

/* Tinted eyebrow. The solid-red .eyebrow still exists for the pages that
   use it; this is the quieter variant for stacked section headers. */
.eyebrow-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-deep);
  background: var(--yellow-tint);
  border: 1px solid rgba(232, 32, 48, 0.22);
  padding: 6px 14px;
  border-radius: 2px;
  margin-bottom: 1.1rem;
}
.eyebrow-soft.on-dark {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ── Hero ── */
.town-hero { position: relative; overflow: hidden; background: var(--black); }
.town-hero-media { position: absolute; inset: 0; z-index: 0; }
.town-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Directional, not flat: heaviest behind the copy, lightest over the part
   of the photo worth seeing. */
.town-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    rgba(11, 11, 11, 0.94) 0%,
    rgba(11, 11, 11, 0.88) 34%,
    rgba(11, 11, 11, 0.72) 62%,
    rgba(11, 11, 11, 0.86) 100%
  );
}
.town-hero .wrap { position: relative; z-index: 2; }
.town-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(2.75rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 62rem) {
  .town-hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; }
}
.town-hero h1 { color: #fff; margin: 0 0 1rem; line-height: 1.04; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
.town-hero-sub {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 34rem;
  margin: 0 0 1.75rem;
}
.town-hero .crumb { color: rgba(255, 255, 255, 0.6); }
.town-hero .crumb a { color: rgba(255, 255, 255, 0.82); }
/* The base .crumb .current is black for the light page-hero, which left the
   current-page segment unreadable against the photo. */
.town-hero .crumb .current { color: #fff; }
.town-hero .crumb a:hover { color: #fff; border-bottom-color: var(--red-on-dark); }
.town-hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
/* Buttons keep the house shadow; it flips white to survive on dark. */
.town-hero .btn { border-color: #fff; box-shadow: 4px 4px 0 #fff; }
.town-hero .btn-secondary { color: #fff; }
/* Google rating chip in the hero. Same Google surface language as the review
   summary badge, sized down to a chip: it sits over a dark photo, so it needs
   its own light plate to read as Google's rather than ours.
   The score/count spans are load-bearing, fetch-reviews.mjs patches them. */
.g-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.42rem 0.72rem;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-family: var(--font-body);
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.15s ease;
}
.g-rating:hover,
.g-rating:focus-visible {
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
}
.g-rating-logo {
  flex-shrink: 0;
}
.g-rating-score {
  font-weight: 500;
  font-size: 0.98rem;
  color: #202124;
}
.g-rating-stars {
  color: #fbbc04;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.g-rating-count {
  font-size: 0.8rem;
  font-weight: 400;
  color: #5f6368;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .g-rating {
    gap: 0.38rem;
    padding: 0.38rem 0.6rem;
  }
  .g-rating-count {
    font-size: 0.74rem;
  }
}

/* Glass spec panel. 10px radius: it reads as a surface, not brand geometry. */
.town-spec {
  background: rgba(11, 11, 11, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.town-spec-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.town-spec-tile {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 1rem 0.6rem;
  text-align: center;
}
.town-spec-val {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  line-height: 1.15;
}
.town-spec-key {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.town-spec-rule { height: 1px; background: rgba(255, 255, 255, 0.14); margin: 1.35rem 0 1.1rem; }
.town-spec-also {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.7rem;
}
/* Neighbour-town links above the fold. */
.town-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.town-pills a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 0.4rem 0.8rem;
  transition: background 140ms ease, border-color 140ms ease;
}
.town-pills a:hover { background: rgba(232, 32, 48, 0.28); border-color: var(--red); }

/* ── Sub-area block (01/02/03 motif) ── */
.subareas { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 45rem) { .subareas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .subareas { grid-template-columns: repeat(4, 1fr); } }
.subarea {
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--black);
  padding: 1.4rem 1.3rem 1.5rem;
}
.subarea-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--logo-gray);
  margin-bottom: 0.65rem;
}
.subarea h3 { font-size: 1.15rem; margin: 0 0 0.5rem; line-height: 1.25; }
.subarea p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.subareas-note { margin-top: 1.5rem; font-family: var(--font-display); font-weight: 600; color: var(--ink); }

/* Sticky-bar clearance for the hero rating line. Placed last because the
   town-hero block further up the sheet would otherwise win the cascade.
   The bar is pinned to the viewport, so padding under the rating can't move
   it; the only lever is tightening what sits above it and slimming the bar. */
@media (max-width: 899px) {
  .town-hero-ctas,
  .hero-ctas {
    margin-bottom: 0.75rem;
  }
  .g-rating {
    margin-top: 0;
  }
  .mobile-cta {
    padding: 0.45rem 1rem;
  }
  .mobile-cta a {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .town-hero-sub {
    margin-bottom: 1.25rem;
  }
}