:root {
  /* Mold Dawgs brand palette (sampled from assets/brand/logo-master.png:
     forest green #1f4225 + ink #141615 + white — paper-and-ink badge feel).
     Reskin of the base two-tier system: the logo green is already deep, so ONE
     green carries both tiers — text accents on cream AND filled CTAs with
     white text (#1f4225 on #fff ≈ 10.9:1, well past AA). Legacy --yellow*/
     --red* token names are kept so every existing rule reskins from here at
     once (same convention the donor used). Page background is warm cream, not
     white — the deliberate vintage-badge look; pure white is reserved for
     cards and the badge plate so they lift off the cream. */
  --yellow: #1f4225;
  --yellow-deep: #16311b;
  --yellow-tint: #e9efe5;
  --red: #1f4225;
  --red-deep: #16311b;
  --red-deeper: #0f2413;  /* hover for filled CTAs (white text, AA+) */
  --ok: #1e9e4a;          /* brighter green — checkmarks only */
  --green: #1f4225;       /* canonical name; new rules use this */
  --green-deep: #16311b;
  --green-tint: #e9efe5;
  --black: #141615;
  --ink: #141615;
  --muted: #565b52;
  --line: #e0dccd;
  --logo-gray: #d0d0d0;
  --bg: #faf6ec;
  --bg-warm: #f1ebdb;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", 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.1;
  text-wrap: balance;
  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;
  /* 1.15rem rather than 1.4: with six items the row has to share 1000px with the
     phone CTA and the logo, and the wider gap squeezed the logo at that width. */
  gap: 1.15rem;
  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);
}
/* Current page: coral label + a persistent underline (same bar as the hover
   state, just locked open) so you can always tell where you are. */
nav.primary a[aria-current="page"] {
  color: #ff6a4d;
}
nav.primary a[aria-current="page"]::after {
  transform: scaleX(1);
  background: #ff6a4d;
}

.tel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--yellow);
  color: var(--black);
  text-decoration: none;
  padding: 0.7rem 1.15rem;
  border-radius: 3px;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.2rem;
  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;
}

/* Full horizontal nav appears at 1000px — covers iPad landscape (1024).
   Six items + phone CTA + logo fit comfortably at that width. */
@media (min-width: 1000px) {
  nav.primary {
    display: inline-flex;
  }
}

/* ===== Nav layout: phone on the LEFT, logo on the RIGHT (order-only swap) =====
   The two side zones share equal flex so the center nav stays optically
   centered even though the left cluster (hours + phone) is wider than the
   logo. flex-basis:0 + grow:1 gives each side (container - nav) / 2. */
@media (min-width: 1000px) {
  .topbar-inner > div { order: 1; flex: 1 1 0; justify-content: flex-start; }
  .topbar-inner > nav.primary { order: 2; flex: 0 0 auto; }
  .topbar-inner > .brand { order: 3; flex: 1 1 0; justify-content: flex-end; }
}
/* Mobile put the phone first and the logo last, so with the header's duplicate
   phone button removed the wrapper div was left empty but still holding
   margin-right:auto -- which shoved the logo across to sit against the
   hamburger. Brand leads now and takes the auto margin itself: logo left,
   hamburger right, which is where a phone visitor looks for each. */
@media (max-width: 999px) {
  .topbar-inner > div:not(.brand) { display: none; }
  .topbar-inner > .brand { order: 1; margin-right: auto; }
}

/* ===== 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: 40px;
  }
  .tel-cta {
    padding: 0.5rem 0.7rem;
    font-size: 1rem;
    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;
}
/* The scroll-morphing topbar (brand swapped for Call + Text Us past 60px) is
   gone. It pinned a second phone CTA to the screen while the floating pill
   already held one, so a scrolled phone carried two identical tel: links and
   134px of permanent chrome -- 16.4% of a 375x812 viewport. It was also a
   full-width bar carrying Call AND Text, which is the pattern the pill replaced,
   and its container was aria-hidden="true" around two still-focusable links, so
   keyboard and screen-reader users tabbed into controls that were never
   announced (WCAG 4.1.2). Dropping it also gives the brand mark back as the
   tap-to-go-home affordance, which the swap removed exactly when a visitor was
   deepest in the page. The pill is now the single persistent action. */

/* ===== 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: 12px 16px;
  align-items: center;
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; min-height: 48px; justify-content: center; }
}
.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: var(--red-deep);
}
.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;
}
@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 ===== */
/* Homepage strip: a curated, hand-picked "best of" showcase, frozen and
   undated on purpose -- scripts/fetch-reviews.mjs never writes index.html,
   so this list only changes by hand (Ryan, 2026-08-10: curated means
   undated; a hand-picked set must never silently refresh out from under a
   human's choice). It scrolls horizontally at every width, the way a real
   review widget does: one card and a peek of the next on a phone, three on
   desktop, the rest a swipe away.
   flex (not grid-auto-flow: column) on purpose: grid-auto-flow inside
   overflow-x: auto collapses to a single vertical column in iOS Safari.
   flex-shrink: 0 is what keeps cards from being squashed to fit the row. */
.reviews {
  display: flex;
  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 > * {
  flex: 0 0 84%;
  flex-shrink: 0;
  scroll-snap-align: start;
}
@media (min-width: 800px) {
  .reviews > * {
    flex-basis: calc((100% - 2.5rem) / 3);
  }
}
/* JS-injected swipe indicator (built by the inline script at the foot of
   index.html, NOT by any file in assets/js): a little left-right bar that
   tracks the strip, visible on iOS where a styled native scrollbar never
   renders. Kept at top level, not inside a mobile query -- the review strip
   scrolls at every width. */
.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;
}

/* Review cards, styled to read as a real Google widget: initial avatar,
   name + date, the Google mark, gold stars over the quote. Gold (not brand
   red) is deliberate -- it's the strongest cue the rating is real Google
   data rather than a testimonial written in-house. Bordered + hard-shadow
   to match the site's chunky card system (DESIGN POLISH PASS, below). */
.review {
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--black);
  padding: 1.4rem 1.35rem;
  display: flex;
  flex-direction: column;
}
.rv-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}
/* Initial disc, cycled across the site's own 3 dark tokens only -- never a
   color outside the brand palette. White text clears AA against all three:
   --black and --red-deep are comfortably past 4.5:1; --ok lands near 3.5:1,
   which needs the "large text" 3:1 floor -- hence 1.2rem/700 here (body
   text is 17px, so 1.2rem = 20.4px, past the 18.66px-bold AA threshold). */
.rv-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
}
.reviews .review:nth-child(3n + 2) .rv-avatar,
.reviews-grid .review:nth-child(3n + 2) .rv-avatar {
  background: var(--red-deep);
}
.reviews .review:nth-child(3n) .rv-avatar,
.reviews-grid .review:nth-child(3n) .rv-avatar {
  background: var(--ok);
}
.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;
}
/* Google's own star gold. At ~1.7:1 on white it can't carry meaning alone,
   so the row carries an aria-label stating the rating in words rather than
   depending on the glyphs. */
.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);
}

/* ===== 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);
}

/* ===== Floating sticky Call button (mobile + desktop) ===== */
.mobile-cta {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  left: auto;
  z-index: 60;
  display: flex;
  gap: 0;
  background: transparent;
  border-top: none;
  padding: 0;
}
.mobile-cta a.book {
  display: none; /* keep just the Call button */
}
.mobile-cta a.call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--red-deep);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.85rem 1.5rem;
  border-radius: 50px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.mobile-cta a.call:hover {
  background: var(--yellow);
}
.mobile-cta a.call::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: #fff;
  -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;
}

/* 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;
}

/* Compact chooser, used where full detail sections follow on the same page.
   With photos the three cards ran 2,124px on a phone, and the sections below
   repeat the very same three images at a larger size -- so every dumpster was
   shown twice before the visitor had decided anything. Three near-identical
   black boxes also discriminate nothing in a comparison; the prices and
   capacities do that work. Dropping the photo halves the chooser and lets the
   detail sections keep the photography they were built around. */
.sizes-compare .size-card img { display: none; }
.sizes-compare .size-card { padding-top: 1.7rem; }
.sizes-compare .size-card .yd { margin-top: 0; }

/* Consent line under the quote form. The policy was footer-linked on all 63
   pages but absent at the point of collection, which is the only place it does
   any work. */
.form-consent {
  margin-top: 0.85rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}
.form-consent a { color: var(--ink); font-weight: 600; }

/* Service-area line under the hero CTAs. These eleven town names used to sit
   mid-paragraph in the lead, where they read as a run-on sentence and pushed
   the first dumpster below the fold. Set as a caption they stay on the page for
   geo relevance without costing a screen of body copy. */
.hero-towns {
  margin-top: 1.35rem;
  max-width: 44em;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}
.hero-towns a {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.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;
}
/* h3 carried a margin-top and h2 carried none, so a 42.5px heading sat 18px
   below the paragraph above it and 21px above its own — closer to the text it
   followed than the text it introduced. Blog posts and guides stack up to
   seven h2s in one .prose block, so the inversion ran their whole length.
   Space above a heading should beat space below by roughly 2:1.
   :not(:first-child) leaves the section's own padding alone. */
.prose h2:not(:first-child) {
  margin-top: 3.25rem;
}
.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 badge + card grid (dedicated reviews page) ===== */
/* Reviews trust badge: [stars / EXCELLENT] | [G  5.0 / Rated on Google] */
.reviews-summary {
  width: auto;
  margin: 0 auto;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  gap: 1.4rem;
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 10px;
  padding: 1rem 1.85rem;
  box-shadow: 6px 6px 0 var(--black);
}
.rs-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.reviews-summary-stars {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--yellow);
  letter-spacing: 0.12em;
  text-shadow:
    -1px -1px 0 var(--black),
    1px -1px 0 var(--black),
    -1px 1px 0 var(--black),
    1px 1px 0 var(--black);
}
.reviews-summary-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
}
.rs-source {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--line);
}
.rs-source svg {
  flex-shrink: 0;
}
.rs-source-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.rs-source-text .rb-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.rs-source-text .rb-text strong {
  margin-bottom: 0.1rem;
}
.rs-source-text strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--black);
}
.rs-source-text span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
/* Dedicated reviews-page grid: the same .review cards as the homepage
   strip, laid out as a grid instead of a horizontal scroller. Natural
   height (no stretch/align-items:stretch) so uneven review lengths read as
   real rather than padded to match. */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
  align-items: start;
}
/* Reviews-page display cap (Ryan, 2026-08-10, tightened from 6): 3 cards on
   mobile, 12 on desktop by default; scripts/fetch-reviews.mjs assigns these
   classes to cards past that count when it (re)generates the grid, and the
   show-more script below removes them in matching batches. display:none
   only -- every rendered card stays in the HTML source, so it's still
   crawlable, and the render cap itself (currently 30 cards, not the full
   feed) is enforced in the generator, not here. */
@media (max-width: 640px) {
  .review.is-capped-mobile {
    display: none;
  }
}
.review.is-capped {
  display: none;
}
.reviews-show-more {
  min-height: 48px;
  justify-content: center;
}
@media (max-width: 640px) {
  .reviews-show-more {
    width: 100%;
  }
}
@media (max-width: 460px) {
  /* Stack the two halves so the badge can't overflow a narrow phone (it was
     a fixed ~379px wide and pushed past a 375px screen, causing side-scroll). */
  .reviews-summary {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    padding: 0.85rem 1.25rem;
    max-width: 100%;
    box-sizing: border-box;
  }
  .rs-rating {
    text-align: center;
  }
  .reviews-summary-stars {
    font-size: 1.5rem;
  }
  .rs-source {
    padding: 0.7rem 0 0;
    border-left: none;
    border-top: 2px solid var(--line);
    justify-content: center;
  }
  .rs-source-text strong {
    font-size: 1.3rem;
  }
}

/* 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);
}
/* Legend under the area map: explains the pin and the shaded coverage area */
.area-map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  margin: 0.95rem auto 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.area-map-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.amleg-pin {
  display: inline-flex;
  flex-shrink: 0;
}
.amleg-swatch {
  width: 20px;
  height: 14px;
  flex-shrink: 0;
  background: rgba(253, 93, 20, 0.16);
  border: 2px solid #141414;
  border-radius: 3px;
}

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

/* ===== Dandy Ridge: 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);
}
/* Job types that have their own page read as links without breaking the row. */
.item-grid a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--red-deep);
  text-underline-offset: 3px;
}
.item-grid a:hover {
  color: var(--red-deep);
}
.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); }
}

/* ===== Dandy Ridge: pricing table + fee list ===== */
/* Let the rates table scroll on narrow screens instead of pushing the page wide. */
.price-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.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;
}
.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;
}

/* ===== Dandy Ridge: 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(2.25rem, 5.5vw, 4.5rem) 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; }
/* object-position nudged down from center to 40% so the sunset band sits below
   the nav instead of getting cut awkwardly right at the top edge. */
.hero-bg-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.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) 46%, rgba(0,0,0,0.82) 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.82) 0%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.08) 70%),
      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 4px rgba(0,0,0,0.92), 0 1px 22px rgba(0,0,0,0.55); }
.hero.hero-bg .hero-accent { color: #ff6a4d; display: inline-block; }
.hero.hero-bg .lead { color: rgba(255,255,255,0.85); max-width: 36em; margin-bottom: 2rem; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.eyebrow-on-dark {
  background: none; padding: 0; color: #ff6a4d;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.17em; text-transform: uppercase; margin-bottom: 1.25rem; display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.6);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 1.75rem; }
@media (max-width: 640px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; min-height: 48px; justify-content: center; }
}
.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); }
.trust-link { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; }
.trust-link:hover { text-decoration: underline; }

/* Hero floating card */
.hero-card { background: #fff; border-radius: 8px; padding: 1.5rem; border: 3px solid var(--black); box-shadow: 8px 8px 0 var(--yellow); 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: 2px solid var(--line); }
.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: var(--black); line-height: 1.1; }
.hero-card-kicker { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.15rem; }
.hero-card-phone { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 1.85rem; line-height: 1.05; color: var(--black); text-decoration: none; letter-spacing: -0.01em; }
.hero-card-phone:hover { color: var(--red); }
.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: var(--ink); 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(--yellow); color: var(--black); 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); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--yellow); }
.hero-card-cta:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--yellow); }

/* ===== 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(--yellow);
}
.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;
}
/* 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: 12px 16px;
  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;
}
@media (max-width: 640px) {
  .cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-buttons .tel-big,
  .cta-buttons .text-big,
  .cta-buttons .book-big {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    box-sizing: border-box;
  }
}
.tel-big::before,
.text-big::before {
  background: #fff;
}
.mobile-cta a.call {
  background: var(--red-deep);
  color: #fff;
}
.price-asterisk {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ============================================================
   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;
  /* No overflow:hidden — the availability badge straddles the top border and a
     clip slices it. Verified before/after: card sizes, image boxes and page
     height unchanged, so the clip was protecting nothing. */
}
.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 */
/* The featured card's frame is IDENTICAL to its neighbours. It used to carry a
   red border, a heavier red shadow and a 10px lift, which all made sense when a
   red ribbon sat across its top — the frame connected to the ribbon. With the
   ribbon replaced by a typographic label, the red frame is orphaned: a row of
   cards where one has a different border colour and sits higher reads as a
   rendering fault, not as emphasis. One clear differentiator (the label) beats
   three half-signals fighting each other. */

/* --- 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;
}

/* 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);
}

/* ============================================================
   "What goes in" allow / don't-allow card grid (dumpsters page).
   DF colors: orange = accepted,
   red = not accepted (matches our do/don't system).
   ============================================================ */
.allow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 800px) {
  .allow-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }
}
.allow-card {
  background: #fff;
  border: 2px 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.15rem 1.5rem;
}
.allow-yes .allow-head {
  background: var(--yellow);
  color: var(--black);
}
.allow-no .allow-head {
  background: var(--black);
  color: #fff;
}
.allow-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0;
  color: inherit;
}
.allow-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1rem;
}
.allow-yes .allow-badge {
  background: rgba(0, 0, 0, 0.1);
}
.allow-no .allow-badge {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.allow-list {
  list-style: none;
  padding: 1.5rem 1.5rem 0;
  margin: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}
@media (min-width: 480px) {
  .allow-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }
}
.allow-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--ink);
  background: #fff;
}
.allow-yes .allow-list li {
  background: var(--yellow-tint);
  border-color: rgba(253, 93, 20, 0.4);
}
.allow-no .allow-list li {
  background: #f7f6f4;
  border-color: rgba(20, 20, 20, 0.14);
}
.allow-list li::before {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.7rem;
  border: 1.5px solid var(--black);
}
.allow-yes .allow-list li::before {
  content: "✓";
  background: var(--yellow);
  color: var(--black);
}
.allow-no .allow-list li::before {
  content: "✕";
  background: var(--red-deep);
  color: #fff;
}
.allow-note {
  margin: 1.5rem;
  padding: 0.95rem 1.1rem;
  background: var(--bg-warm);
  border-radius: 6px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  border-left: 3px solid var(--yellow);
}
.allow-no .allow-note {
  border-left-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,
.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;
  }
}

/* Removing the scroll-morphing topbar left the header's own phone button on
   screen at every scroll position, and .mobile-cta is position:fixed with no
   media query -- so a phone showed two identical always-visible tel: links,
   one at y=15 and one at y=734. The pill is the persistent mobile action, so
   the header drops its duplicate and gets 145px back for the brand mark.
   Desktop keeps its header number: there is room, and it is conventional. */
@media (max-width: 999px) {
  .topbar .tel-cta { display: none; }
}

/* ===== 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: 400;
  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.6rem 1.5rem; transition: border-color 150ms ease, box-shadow 150ms ease; }
.why-card:hover { border-color: var(--black); box-shadow: 5px 5px 0 var(--red-deep); }
.why-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--red-deep); color: #fff; margin-bottom: 1.1rem; }
.why-icon svg { width: 1.6rem; height: 1.6rem; }
.why-card h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; }
.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); } }
/* Pricing "what's included" cards. The numbers were buried mid-sentence, so
   each card leads with its figures and keeps the prose for the caveats. */
.pnote {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
}
.pnote h3 { margin: 0 0 .9rem; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }
.pnote p { margin: 0; color: var(--muted); font-size: .95rem; }
.pnote .why-icon { margin-bottom: 1rem; }

.pnote-figs {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: .55rem;
}
.pnote-figs li { display: flex; align-items: baseline; gap: .6rem; }
.pnote-figs strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--red-deep);
  min-width: 3.6rem;
  flex-shrink: 0;
}
.pnote-figs span { font-size: .88rem; color: var(--muted); line-height: 1.3; }

/* Buttons, not inline links: on a phone these are the tap targets. */
.pnote-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: 1.1rem; }
.pnote-cta .btn { font-size: .9rem; padding: .6rem .9rem; }

.pnote-closer {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  max-width: 44ch;
}

/* ============================================================
   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; }
}

/* Town-page cost list: flat rates for the sizes that town books most. */
.cost-stack { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; max-width: 34rem; }
.cost-stack li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.cost-stack li span { color: var(--muted); }
.cost-stack li strong { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; white-space: nowrap; }
.cost-stack .cost-total { border-bottom: 0; border-top: 2px solid var(--black); margin-top: .2rem; }
.cost-stack .cost-total span { color: var(--black); font-weight: 600; }
.cost-stack .cost-total strong { color: var(--red-deep); font-size: 1.35rem; }

/* --- "Call for availability" in a price slot ------------------------------
   The monthly rate is no longer published (Ryan, 2026-08-18). A word sitting
   in a slot sized for numerals reads as a shouted price, so these drop to
   label scale and muted ink: the row still aligns, but the eye reads it as
   "no number here, ring us" rather than as an amount. */
.rate-amt.rate-call {
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .01em;
  line-height: 1.25;
  white-space: normal;
  max-width: 8.5rem;
}
.sc-amt.sc-call,
.price-rows .amt.amt-call {
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* --- Town-page offer cards ------------------------------------------------
   These were using .related-sizes, the same component as the Nearby Towns and
   Common Jobs link grids further down the page: the thing being sold looked
   exactly like a nav link, with the price set as muted 0.85rem body text. An
   offer needs its own weight -- price as the loudest element, one line saying
   what it is for, and the booking action on the card where the decision gets
   made instead of a generic pair of buttons underneath. */
.offer-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.25rem; }
/* minmax(0,1fr), not 1fr: these cards sit in the narrow story-grid body
   column, where auto-sized 1fr tracks took their width from content and came
   out 208/224/201 instead of thirds. The 1080px breakpoint is the point where
   that column is actually wide enough for three; below it they stack. */
@media (min-width: 1080px) { .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } }

.offer {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.4rem 1.3rem;
}
/* The 20-yard is the flagship and the 3-day is the best seller, so it gets the
   heavier frame. One emphasised card only; two would cancel each other out. */
.offer.is-flag { border: 2px solid var(--black); box-shadow: 5px 5px 0 var(--red-deep); }
.offer-flag {
  position: absolute; top: -.7rem; left: 1.2rem;
  font-family: var(--font-display); font-weight: 700; font-size: .64rem;
  letter-spacing: .09em; text-transform: uppercase; color: #fff;
  background: var(--red-deep); border-radius: 3px; padding: .25rem .5rem;
}
.offer .offer-name { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
/* .prose a draws a 2px red border-bottom; on a card title that reads as a
   stray underline, and text-decoration:none does not clear a border. */
.offer .offer-name a { color: var(--black); text-decoration: none; border-bottom: 0; }
.offer .offer-name a:hover { color: var(--red-deep); text-decoration: underline; }
.offer .offer-price {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 2.1rem; line-height: 1; color: var(--red-deep);
}
.offer .offer-price span { font-size: .9rem; font-weight: 600; color: var(--muted); margin-left: .35rem; white-space: nowrap; }
.offer .offer-alt { margin: .45rem 0 0; font-size: .85rem; color: var(--muted); }
.offer .offer-fit {
  margin: .9rem 0 1.2rem; padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--muted);
}
/* margin-top:auto keeps the three buttons on one line across cards of
   different text length instead of floating at three different heights. */
.offer-cta { margin-top: auto; text-align: center; white-space: nowrap; padding-left: .6rem; padding-right: .6rem; }
.prose .offer-foot { margin-top: 1.1rem; font-size: .88rem; color: var(--muted); }

/* --- Size-page spec card (hero, right rail) -------------------------------
   The size pages opened with prices jammed into an inline-styled paragraph.
   This is the same information as a scannable card: rate rows, the specs a
   buyer checks (footprint, capacity, what's included) and the booking CTA. */
.hero-split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .hero-split { grid-template-columns: 1.35fr 1fr; gap: 3rem; } }
.hero-split-copy .lead { max-width: none; }

.spec-card {
  background: var(--bg);
  border: 2px solid var(--black);
  border-radius: 10px;
  padding: 1.4rem 1.35rem;
  box-shadow: 6px 6px 0 var(--red-deep);
}
.sc-name {
  margin: 0 0 .9rem; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.sc-rows { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.sc-rows li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.sc-rows li:last-child { border-bottom: 0; }
.sc-term { flex: 1; font-family: var(--font-display); font-weight: 600; }
.sc-amt { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--red-deep); }
.sc-flag {
  font-family: var(--font-display); font-weight: 700; font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: var(--red-deep); border-radius: 3px; padding: .2rem .4rem; white-space: nowrap;
}
.sc-specs { margin: 0 0 1rem; padding: 1rem 0 0; border-top: 1px solid var(--line); }
.sc-specs > div { display: flex; gap: .75rem; padding: .3rem 0; }
.sc-specs dt { flex: 0 0 5.2rem; font-weight: 600; color: var(--black); font-size: .9rem; }
.sc-specs dd { margin: 0; color: var(--muted); font-size: .9rem; }
.sc-note { margin: 0 0 1.1rem; font-size: .85rem; color: var(--muted); }
.sc-cta { display: flex; flex-direction: column; gap: .5rem; }
.sc-cta .btn { text-align: center; }

/* --- 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);
}


/* "Most Popular" pill for the best-value 3-day 20-yard option
   (pricing table row + the 20-yard page price list) */
.pop-badge {
  display: inline-block;
  background: var(--red-deep);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* Genuine comparison table (the size guide) on a phone. Five columns cannot
   hold their meaning at 375px, and horizontal scroll hides the columns that
   decide the choice. Each row becomes a labelled block instead, carrying its
   own headers down from data-label so nothing depends on a thead the visitor
   can no longer see. Scoped to tables that opt in, so it cannot leak. */
@media (max-width: 700px) {
  .price-table-stack, .price-table-stack thead, .price-table-stack tbody,
  .price-table-stack tr, .price-table-stack td { display: block; width: 100%; }
  .price-table-stack thead { display: none; }
  .price-table-stack tbody tr {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.7rem;
    background: #fff;
  }
  .price-table-stack tbody td {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    border: 0;
    padding: 0.3rem 0;
  }
  .price-table-stack tbody td::before {
    content: attr(data-label);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .price-table-stack tbody td.price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--ink);
  }
}

/* ============================================================
   RATE CARDS — one panel per product, replacing the grouped rates table.

   The rates are not tabular data. A table asserts every row is the same kind
   of thing; these are three different products, each with its own set of
   rental periods. Forcing that two-level hierarchy into a flat table needs
   colspan "group" rows, and a colspan row still physically sits inside the
   column grid — which is why "20-yard roll-off" kept reading as a value under
   the "Rental period" header no matter how the band was styled. That was
   structural, not cosmetic, and three restyles could not fix it.

   Second tell: the "Includes" column said "Up to 1 ton" on five of six rows.
   A column that repeats is not a column — it is a property of the product,
   so it now sits once per panel in .rate-note.

   As panels, the size is a real heading, each price sits beside its own Book
   affordance, and the whole thing stacks on mobile with no layout hacks.
   ============================================================ */
/* stretch, not start: at 456/357/278px the three panels ended on three
   different baselines, which reads as unfinished rather than deliberate.
   Equal heights with the footnote pushed to the bottom squares them off. */
.rate-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.75rem;
  align-items: stretch;
}
/* Below the three-up breakpoint the panels stretched to the container -- 790px
   wide at 859px viewport, which stranded "3 days" 489px from its own price, the
   exact eye-travel problem this rebuild existed to remove, reintroduced at
   tablet width. Capping the measure is the fix.
   The breakpoint stays at 860 rather than the 760 used by .sizes.cols-3: a rate
   row carries a price and a Book button side by side and needs ~245px, so three
   up at 760 leaves 216px and the button overflows its own panel. Same-looking
   components, genuinely different minimum widths. */
.rate-cards { max-width: 560px; margin-inline: auto; }
@media (min-width: 860px) {
  .rate-cards {
    /* minmax(0,…) so the three columns stay exactly equal; plain 1fr floors at
       min-content and the panel holding the monthly rate + Book grew wider than its
       neighbours. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: none;
  }
}

.rate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 3px solid var(--black);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--black);
  padding: 1.5rem 1.35rem 1.35rem;
  /* No overflow:hidden — the availability badge straddles the top border. */
}
.rate-card.featured { border-color: var(--red-deep); box-shadow: 6px 6px 0 var(--red-deep); }

.rate-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.rate-spec {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
}

.rate-rows { list-style: none; margin: 1.15rem 0 0; padding: 0; }
.rate-rows li + li { margin-top: 0.5rem; }

/* Whole row is the target: a 44px+ tap area on mobile, and the price sits
   next to the action instead of across a 1,180px table row. */
.rate-rows a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 0.9rem;
  min-height: 56px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, background 140ms ease;
}
.rate-rows a:hover,
.rate-rows a:focus-visible {
  border-color: var(--red-deep);
  background: var(--yellow-tint);
}

.rate-term {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.rate-term small {
  display: block;
  font-family: var(--font-body, inherit);
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 0.1rem;
}
/* Rank label, not a second call to action — so it is not brand red. */
.rate-flag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.12em;
}

/* Price in ink: size carries it, and red is left to mean "the action". */
.rate-amt {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A real control, not a caption. As small red text under the price this read
   as a label and not something you click — on a pricing page that is the
   primary conversion element, so it gets button affordance and a 40px body. */
.rate-go {
  grid-column: 2;
  justify-self: end;
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 1.15rem;
  border-radius: 6px;
  background: var(--red-deep);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 140ms ease;
}
.rate-rows a:hover .rate-go,
.rate-rows a:focus-visible .rate-go { background: var(--red-deeper); }

/* Pinned to the bottom so the equal-height panels align their footnotes. */
.rate-note {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: auto;
}

/* --- Interactive price picker --- */
.price-picker {
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem;
}
.pp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-bottom: 1.5rem;
}
.pp-field-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.pp-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pp-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--black);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 4px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.pp-btn:hover { border-color: var(--black); }
.pp-btn.is-active {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}
.pp-btn[hidden] { display: none; }
.pp-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(216, 51, 31, 0.06);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}
.pp-result-copy { display: flex; flex-direction: column; }
.pp-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1;
  color: var(--black);
}
.pp-inc { font-size: 0.9rem; color: var(--muted); margin-top: 0.35rem; }
.pp-cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--red-deep);
  padding: 0.8rem 1.4rem;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease;
}
.pp-cta:hover, .pp-cta:focus-visible { background: var(--yellow); color: var(--black); }
.pp-note { margin: 0.85rem 0 0; font-size: 0.85rem; color: var(--muted); }
.pp-allrates { margin-top: 1rem; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }

/* Lead form wrapping the picker */
.pp-intro { margin: 1rem 0 1.25rem; font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--muted); max-width: 40em; }
.pp-fields { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.5rem; }
.pp-input { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 180px; }
.pp-input input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--black);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  width: 100%;
}
.pp-input input:focus { outline: none; border-color: var(--black); }
button.pp-cta { border: none; cursor: pointer; }
.pp-formerr { margin: 0.85rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--red-deep); }
.price-rows li.featured .dur { 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 {
  display: flex; gap: 0.6rem; margin-top: auto; padding-top: 1.1rem;
  /* When both buttons can't fit side by side (narrow phones ~360px and below),
     wrap them to full-width stacked rows instead of squishing the labels onto
     two cramped lines. */
  flex-wrap: wrap;
}
.size-act {
  /* Share the row when they fit; nowrap stops the label squishing to two lines,
     and flex-wrap on the parent lets them stack to full width only when the card
     is genuinely too narrow for both. */
  flex: 1 1 auto; text-align: center; text-decoration: none; white-space: nowrap;
  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; } }


/* Availability badge on the dumpster cards. "Available today" is a STOCK
   statement (this size is in the yard), not a delivery promise, so it carries
   no turnaround wording — which matters here, where four towns need notice.
   Colours are this site's own tokens: near-black chip, and the palette's own
   --ok green for the status dot (never an imported green; on a red-brand site
   a red dot would read as an alert, not availability). */
.avail-badge {
  position: absolute;
  top: -0.75rem;
  right: 0.6rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.72rem;
  height: 30px;
  border-radius: 999px;
  background: var(--black);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
}
.avail-badge::before {
  content: "";
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--ok);
}
@media (max-width: 640px) {
  .avail-badge { font-size: 0.68rem; right: 0.7rem; }
}


/* RANK vs STATUS — two different kinds of information, so two different visual
   registers rather than two competing pills.

   "Available Today" is a STATUS: it appears on every card, so it stays the
   filled pill on the border — consistent position, scannable down the row.
   "Most Popular" is a RANK: it appears on exactly ONE card, and a second filled
   pill of the same shape and weight just read as a mismatched twin of the first
   at every position tried (six of them). So rank becomes a typographic label
   inside the card, above the size name, where product labels live on real
   product cards.

   The slot is reserved on EVERY card, so the featured card's photo, title and
   buttons stay aligned with its neighbours — an in-flow label on one card only
   dropped its contents 42px below the rest of the row. */
.size-card .yd::before {
  content: "";
  display: block;
  height: 1.15rem;
  margin-bottom: 0.15rem;
}
.size-card.featured .yd::before {
  content: "★ Most Popular";
  color: var(--red-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.15rem;
}




/* The size cards each carried a "Details" button pointing at the same URL as the
   card link wrapping the photo and copy, so two of the card's links went one
   place. With the duplicate gone the booking button is alone and takes the full
   width, which is a bigger tap target than half a row. */
.size-card-actions .size-act:only-child { width: 100%; flex: 1 1 100%; }


/* Size-picker result buttons. They were two <a> in a <p> with an inline
   margin-left, so on a phone the pair wrapped with the second button indented
   and the widths ragged. Equal width, aligned, full-width once stacked. */
.pr-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1rem 0 0; }
.pr-actions .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 640px) {
  .pr-actions { flex-direction: column; align-items: stretch; }
  .pr-actions .btn { width: 100%; }
}

/* Secondary text link beside a primary button. Was four declarations written
   inline, twice, including a margin-left that would indent it once the pair
   stacked on a phone. The row owns the spacing now. */
.cta-inline { color: var(--ink); font-family: var(--font-display); font-weight: 700; }
.cta-inline:hover { text-decoration: underline; }
.cta-inline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
@media (max-width: 640px) {
  .cta-inline-row { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-inline-row .btn { width: 100%; }
}

/* ============================================================
   Mold Dawgs comp overrides — paper-and-ink light theme
   (Appended at design-lock; fold into the base sections during
   the pre-launch CSS pass. Donor topbar was near-black; this
   brand is cream/ink, so the chrome flips light.)
   ============================================================ */
.topbar {
  background: rgba(250, 246, 236, 0.96);
  border-bottom: 1px solid var(--line);
}
.topbar .primary a { color: var(--ink); }
.topbar .primary a:hover { color: var(--green); }
.topbar .nav-toggle span { background: var(--ink); }
.brand-mark { height: 64px; margin: 0.35rem 0; }

.tel-cta {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.tel-cta:hover { background: var(--green-deep); }
.tel-cta::before { content: none; }

/* Hero — badge comp */
.hero-badge {
  background:
    radial-gradient(ellipse at 78% 42%, rgba(31, 66, 37, 0.08), transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.hero-badge-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.hero-badge .eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: var(--green);
  margin: 0 0 0.75rem;
}
.hero-badge h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 900;
  color: var(--ink);
}
.hero-badge .hero-accent { color: var(--green); }
.hero-badge p.lead {
  color: var(--muted);
  max-width: 56ch;
}
.hero-badge-checks {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.45rem;
  color: var(--ink);
  font-weight: 600;
}
.hero-badge-checks li::before {
  content: "✓";
  color: var(--green);
  font-weight: 700;
  margin-right: 0.55rem;
}
.hero-badge-art { display: flex; justify-content: center; }
.hero-badge-art img {
  width: min(100%, 480px);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(20, 22, 21, 0.18));
}
@media (max-width: 900px) {
  .hero-badge-grid { grid-template-columns: 1fr; }
  .hero-badge-art { order: -1; }
  .hero-badge-art img { width: min(60vw, 320px); }
}

/* Mold Dawgs: undo the donor's phone-left/logo-right swap — badge brand leads. */
@media (min-width: 1000px) {
  .topbar-inner > .brand { order: 1; flex: 1 1 0; justify-content: flex-start; }
  .topbar-inner > nav.primary { order: 2; flex: 0 0 auto; }
  .topbar-inner > div { order: 3; flex: 1 1 0; justify-content: flex-end; display: flex; }
}

/* Mold Dawgs: dark bands go deep green; plates go cream (badge logic). */
.stat-band { background: var(--green); }
.stat-band .si-val { color: #fff; }
.stat-band .si-label { color: rgba(250, 246, 236, 0.78); }
.stat-band .stat-item:hover .si-val { color: #fff; }

.cta-final { background: var(--green-deep); }
.cta-final .book-big {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--ink);
}
.cta-final .book-big:hover {
  background: #ffffff;
  color: var(--green-deep);
}
.stat-item { background: var(--green); }
.stat-item:hover { background: #28522f; }

/* Mold Dawgs: city-page map container */
.city-map { height: 320px; border-radius: 8px; border: 1px solid var(--line); }

/* Mold Dawgs: blog cards + post CTA */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }
.post-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20, 22, 21, 0.1); }
.post-card .post-thumb img { width: 100%; height: auto; display: block; }
.post-card-body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.post-card .post-meta { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.post-card h3 { font-size: 1.25rem; margin: 0; }
.post-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.post-card .read-more { margin-top: auto; padding-top: 0.5rem; color: var(--green); font-weight: 700; }
.post-cta {
  margin-top: 2.5rem; padding: 1.75rem; background: var(--green-tint);
  border: 1px solid var(--line); border-radius: 10px; text-align: center;
}
.post-cta p { max-width: 46em; margin: 0 auto 1.25rem; }

/* Mold Dawgs: align card CTAs to the card bottom regardless of text length */
.why-card { display: flex; flex-direction: column; }
.why-card .btn { margin-top: auto; align-self: flex-start; }
.why-card p:last-of-type { margin-bottom: 1rem; }