/* Site overrides layered on top of the captured theme stylesheet.
   Loaded after style.css so equal-specificity rules win. */

/* One radius for everything button-shaped. 8px is the theme's own default, so
   the pages we haven't restyled already agree with it. The only deliberate
   exception is the icon-only notice dismiss, which stays a circle. */
:root {
  --btn-radius: 8px;
}

.btn,
.quote-btn {
  border-radius: var(--btn-radius);
}

/* Mobile header scrolls with the page instead of floating over it.
   The theme pins .navbar and reserves body padding for it below 992px. */
@media (max-width: 991.98px) {
  .navbar {
    position: static;
  }
  body {
    padding-top: 0;
  }
}

/* ------------------------------------------------------------------
   Header redesign: swap the flat 2015-era chrome for a modern header.
   Dark charcoal utility strip with quiet links and a single red CTA,
   a white nav bar carried by soft layered shadow instead of a hard
   border, animated underlines on nav links, and rounded dropdowns.
   ------------------------------------------------------------------ */

/* --- Top utility strip: charcoal ground, brand colors as accents --- */
#top-bar {
  background: linear-gradient(180deg, #202020, #191919);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#top-bar .row {
  align-items: center;
  min-height: 46px;
}
#top-bar .top-link {
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.875rem 0.875rem;
  position: relative;
  transition: color 0.2s ease;
}
#top-bar .top-link::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: #edb200;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
#top-bar .top-link:hover,
#top-bar .top-link:focus {
  background: transparent;
  color: #fff;
}
#top-bar .top-link:hover::after,
#top-bar .top-link:focus::after {
  transform: scaleX(1);
}
/* Phone number: quiet text link with gold icon, no red block */
#top-bar .phone-num {
  background: transparent;
  border: 0;
  color: #fff;
  font-family: Oswald, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.625rem 1rem;
  transition: color 0.2s ease;
}
#top-bar .phone-num:hover,
#top-bar .phone-num:focus {
  background: transparent;
  border: 0;
  color: #edb200;
  box-shadow: none;
}
/* Quote CTA: rounded, weighted pill instead of a full-height slab */
#top-bar .quote-btn {
  height: auto;
  margin: 6px 0;
  background: #ba2525;
  border: 0;
  border-radius: var(--btn-radius);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.5rem 1.375rem;
  box-shadow: 0 2px 6px rgba(186, 37, 37, 0.35), 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#top-bar .quote-btn:hover,
#top-bar .quote-btn:focus {
  background: #d02c2c;
  border: 0;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(186, 37, 37, 0.45), 0 8px 20px rgba(0, 0, 0, 0.3);
}
#top-bar .quote-btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(237, 178, 0, 0.4);
}

/* --- Main nav bar: soft shadow, no hard rule --- */
@media (min-width: 992px) {
  .navbar {
    border-bottom: 0;
    box-shadow: 0 1px 2px rgba(25, 25, 25, 0.06), 0 6px 18px rgba(25, 25, 25, 0.08);
  }
}
/* Desktop-only (xl expand point): scoped so offcanvas colors stay intact */
@media (min-width: 1200px) {
  /* Nav links: tighter rhythm, considered tracking, animated underline */
  .navbar-expand-xl .navbar-nav .nav-link {
    color: #191919;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.045em;
    padding: 1.625rem 0.875rem;
    position: relative;
    transition: color 0.2s ease;
  }
  .navbar-expand-xl .navbar-nav > .nav-item > .nav-link::after {
    content: "";
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: 1.125rem;
    height: 3px;
    border-radius: 3px;
    background: #ba2525;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
  }
  .navbar-expand-xl .navbar-nav .nav-link:hover,
  .navbar-expand-xl .navbar-nav .nav-link:focus,
  .navbar-expand-xl .navbar-nav .nav-link.show {
    color: #ba2525;
    background: transparent;
  }
  .navbar-expand-xl .navbar-nav > .nav-item > .nav-link:hover::after,
  .navbar-expand-xl .navbar-nav > .nav-item > .nav-link:focus::after,
  .navbar-expand-xl .navbar-nav > .nav-item > .nav-link.show::after {
    transform: scaleX(1);
  }
  /* Icons read as accents, slightly quieter than the label */
  .navbar-expand-xl .navbar-nav > .nav-item > .nav-link .fas {
    font-size: 0.875em;
    opacity: 0.9;
  }

  /* --- Desktop dropdowns: hover-open card, styled to match the header ---
     The panel is always display:block but hidden via opacity/visibility so
     it can fade/slide in when the parent item is hovered or holds keyboard
     focus (:focus-within). Bootstrap's click-toggle may still add .show and
     Popper inline positioning, but visibility is governed entirely here, so
     a clicked-open menu still closes the moment the pointer leaves. */
  .navbar-expand-xl .navbar-nav .dropdown > .dropdown-menu {
    display: block;
    top: 100%;
    left: 0.25rem;
    min-width: 15rem;
    margin: 0;
    border: 1px solid rgba(25, 25, 25, 0.06);
    border-top: 3px solid #ba2525;
    border-radius: 12px;
    padding: 0.625rem;
    box-shadow: 0 4px 10px rgba(25, 25, 25, 0.08), 0 18px 40px rgba(25, 25, 25, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.2s ease,
      visibility 0s linear 0.2s;
  }
  /* :has(:focus-visible) rather than :focus-within — a mouse click also
     leaves focus on the toggle, which would pin a clicked menu open after
     the pointer left; :focus-visible limits the hold-open to keyboard. */
  .navbar-expand-xl .navbar-nav .dropdown:hover > .dropdown-menu,
  .navbar-expand-xl .navbar-nav .dropdown:has(:focus-visible) > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.16s ease, transform 0.2s ease, visibility 0s;
  }
  /* Keep the parent's red state + underline lit while the menu is open */
  .navbar-expand-xl .navbar-nav .dropdown:hover > .nav-link,
  .navbar-expand-xl .navbar-nav .dropdown:has(:focus-visible) > .nav-link {
    color: #ba2525;
  }
  .navbar-expand-xl .navbar-nav > .dropdown:hover > .nav-link::after,
  .navbar-expand-xl .navbar-nav > .dropdown:has(:focus-visible) > .nav-link::after {
    transform: scaleX(1);
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu .nav-link {
    border-bottom: 0;
    border-radius: var(--btn-radius);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    padding: 0.6875rem 0.875rem 0.6875rem 1.875rem;
    transition: color 0.15s ease, background-color 0.15s ease,
      padding-left 0.15s ease;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu .nav-link::before {
    left: 0.875rem;
    top: 0.6875rem;
    transition: transform 0.15s ease;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu .nav-link::after {
    content: none;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu .nav-link:hover,
  .navbar-expand-xl .navbar-nav .dropdown-menu .nav-link:focus {
    color: #ba2525;
    background: #fbfafa;
    padding-left: 2.125rem;
  }
  /* The closing "view all" row reads as a footer: hairline above, green */
  .navbar-expand-xl .navbar-nav .dropdown-menu > li:last-child {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid rgba(25, 25, 25, 0.08);
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu > li:last-child .nav-link {
    color: #298253;
    font-weight: 500;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu > li:last-child .nav-link:hover,
  .navbar-expand-xl .navbar-nav .dropdown-menu > li:last-child .nav-link:focus {
    color: #1f6a43;
    background: rgba(41, 130, 83, 0.08);
  }
}

/* --- Mobile header (<992px): calm white bar on a soft shadow --- */
@media (max-width: 991.98px) {
  .navbar {
    padding: 0.625rem 0;
    border-bottom: 0;
    box-shadow: 0 1px 2px rgba(25, 25, 25, 0.06), 0 6px 18px rgba(25, 25, 25, 0.1);
  }
  .navbar .container-xxl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Keep the logo a sensible size on small screens. !important beats the
     theme's per-breakpoint fixed logo width/height rules. */
  .navbar .navbar-brand img {
    height: 38px !important;
    width: auto !important;
  }
  /* Call and Menu: matched rounded buttons — green solid for the call
     action, quiet charcoal outline for the menu. */
  .navbar-toggler {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 54px;
    min-height: 52px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--btn-radius);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  .navbar-toggler .tog-t {
    display: block;
    margin: 0;
    font-family: Oswald, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  /* Call: solid green pill, white text */
  a.navbar-toggler {
    color: #fff;
    background: #298253;
    box-shadow: 0 2px 6px rgba(41, 130, 83, 0.35);
  }
  a.navbar-toggler:hover,
  a.navbar-toggler:focus {
    color: #fff;
    background: #2f9560;
  }
  a.navbar-toggler .tog-t {
    color: rgba(255, 255, 255, 0.85);
  }
  /* Menu: quiet charcoal button on an off-white chip */
  .navbar-toggler.menu-toggler {
    color: #191919;
    background: #f3f1f1;
  }
  .navbar-toggler.menu-toggler:hover,
  .navbar-toggler.menu-toggler:focus {
    background: #e9e6e6;
  }
  .navbar-toggler.menu-toggler .tog-t {
    color: #191919;
  }
  /* Space between the Call and Menu buttons. */
  .navbar .main-navigation {
    margin-left: 0.5rem;
  }
}

/* --- Offcanvas menu panel: softer dividers, roomier links --- */
@media (max-width: 1199.98px) {
  .navbar-collapse {
    border-left: 0;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
  }
  .navbar-collapse .nb-h {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .navbar-collapse .nav-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    padding: 0.875rem 1rem 0.875rem 1.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .navbar-collapse .nav-link:hover,
  .navbar-collapse .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
  }
  .navbar-collapse .dropdown-menu .nav-link {
    padding-left: 2.25rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
  }
  /* Weighted CTA buttons at the foot of the panel */
  .navbar-collapse .btn {
    border-radius: var(--btn-radius);
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.25rem;
  }
}

/* Hiring notice: the captured markup's last header section, given a dismiss
   button in lib/load-page.ts. The attribute is set before the markup parses,
   so a notice dismissed on an earlier visit never flashes into view. */
/* Restyled to sit inside the header's own system: the same charcoal as the
   top bar, the hero eyebrow's tracked gold Oswald for the label, quiet white
   DM Sans copy, and a single gold link. No applied motif — the strip earns
   its place through proportion and type, not decoration. The ground is a
   deep brand green rather than the top bar's charcoal — dark enough to read
   as part of the header stack, green enough to keep the brand above the fold.
   Flat, not a gradient: the mobile pinned label and the dismiss button carry
   their own opaque patches of this colour to mask the marquee text sliding
   behind them, and a gradient would make those patches visibly mismatch.
   !important throughout beats the section's inline styles. */
#hiring-notice {
  position: relative;
  background: #1e3d2f !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding: 10px 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: background-color 0.15s ease;
}

/* Copy: calmer size than the inline 17px, slightly transparent so the gold
   label and link carry the hierarchy. */
.hiring-notice-track {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px !important;
  letter-spacing: 0.015em;
}
/* "Now Hiring": the hero eyebrow's voice — small, tracked-out gold Oswald. */
.hiring-notice-label,
.hiring-notice-inline-label {
  color: #edb200 !important;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  font-weight: 500 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* A quiet separator instead of the colon the copy used to carry. */
.hiring-notice-inline-label::after,
.hiring-notice-label::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.8em;
  margin-left: 0.75em;
  vertical-align: -0.08em;
  background: rgba(255, 255, 255, 0.28);
}
.hiring-notice-inline-label {
  margin-right: 0.25em;
}
/* The one action: gold, with the top bar's underline appearing on hover of
   the whole strip (it is all one hit target). */
.hiring-notice-track a {
  color: #edb200 !important;
  font-weight: 500;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
#hiring-notice:hover .hiring-notice-track a,
#hiring-notice:focus-within .hiring-notice-track a {
  color: #ffc41a !important;
  text-decoration-color: #ffc41a;
}

/* Hover lift for the whole strip; desktop only — on mobile the pinned label
   and dismiss carry their own opaque charcoal patches that wouldn't follow. */
@media (min-width: 992px) {
  #hiring-notice:hover {
    background: #244a39 !important;
  }
}

/* Stretched over the notice so the whole strip is one hit target. Sits under
   the dismiss button, which needs to stay separately clickable. */
.hiring-notice-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hiring-notice-link:focus-visible {
  outline: 2px solid #edb200;
  outline-offset: -4px;
}

.hiring-notice-dismiss {
  z-index: 2;
}

@media (min-width: 992px) {
  /* Keep the centred text clear of the dismiss button. */
  .hiring-notice-track {
    padding-right: 2.5rem;
  }

  /* The marquee duplicate and the pinned label are mobile-only; the viewport
     gets out of the way so the captured centred layout is unchanged. */
  .hiring-notice-track[aria-hidden],
  .hiring-notice-label {
    display: none;
  }

  .hiring-notice-viewport {
    display: contents;
  }
}

[data-hiring-dismissed] #hiring-notice {
  display: none;
}

.hiring-notice-dismiss {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.hiring-notice-dismiss:hover,
.hiring-notice-dismiss:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------------------------
   Nav icons: Font Awesome Free 6.7.2 solid SVGs, vendored under
   themes/sarnago/icons/ (see the README there for licensing).

   Files rather than the theme's webfont, because that font is an older
   subset: it has no `dumpster` glyph at all, and the two names the markup
   asks for -- fa-user-hard-hat and fa-digging -- are Pro-only and render
   as blank boxes. The class names below are therefore the captured
   markup's, which no longer describe what is drawn; each rule says what
   it actually shows.

   Delivered as mask-image so background-color: currentColor keeps them on
   the gold .text-warning and following any link color change. Scoped to
   #priNav, so FA icons elsewhere on the site are untouched; the same
   markup drives both the desktop bar and the mobile offcanvas.
   ------------------------------------------------------------------ */
#priNav .nav-link i.fas::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.15em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}

/* Employment's markup has a typo ("text warning"), so it never gets
   the gold class; color it to match its siblings. */
#priNav .nav-link i.fa-digging {
  color: #edb200;
}

/* About: a group of people */
#priNav .nav-link i.fa-users {
  --nav-icon: url("/wp-content/themes/sarnago/icons/users.svg");
}

/* Dumpsters: an actual roll-off dumpster, not a wastebasket */
#priNav .nav-link i.fa-trash {
  --nav-icon: url("/wp-content/themes/sarnago/icons/dumpster.svg");
}

/* Base Materials: a mound of aggregate */
#priNav .nav-link i.fa-clipboard-list {
  --nav-icon: url("/wp-content/themes/sarnago/icons/mound.svg");
}

/* Demolition: a hammer reads as the trade at 16px */
#priNav .nav-link i.fa-user-hard-hat {
  --nav-icon: url("/wp-content/themes/sarnago/icons/hammer.svg");
}

/* C&D Transfer Station: recycling */
#priNav .nav-link i.fa-recycle {
  --nav-icon: url("/wp-content/themes/sarnago/icons/recycle.svg");
}

/* Contact: a phone handset */
#priNav .nav-link i.fa-address-book {
  --nav-icon: url("/wp-content/themes/sarnago/icons/phone.svg");
}

/* Employment: a hard hat */
#priNav .nav-link i.fa-digging {
  --nav-icon: url("/wp-content/themes/sarnago/icons/helmet-safety.svg");
}

/* Gallery: a stack of photos */
#priNav .nav-link i.fa-camera {
  --nav-icon: url("/wp-content/themes/sarnago/icons/images.svg");
}

/* FAQs */
#priNav .nav-link i.fa-question {
  --nav-icon: url("/wp-content/themes/sarnago/icons/circle-question.svg");
}

/* Service Agreement: a signed document */
#priNav .nav-link i.fa-pen {
  --nav-icon: url("/wp-content/themes/sarnago/icons/file-signature.svg");
}

/* Reviews */
#priNav .nav-link i.fa-star {
  --nav-icon: url("/wp-content/themes/sarnago/icons/star.svg");
}

/* On mobile the notice wrapped to three lines and ate the top of the page.
   Instead it scrolls as a single line: two identical tracks sit side by side
   and both shift left by one track width, so the loop has no visible seam.
   The !importants override the captured markup's inline styles, which set a
   max-width, auto margins and a 17px size that can't otherwise be beaten. */
@media (max-width: 991.98px) {
  #hiring-notice {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 8px 0 !important;
  }

  /* Pinned, so the message always reads as a hiring ad no matter where the
     scrolling copy happens to be. It sits above the tracks on the notice's own
     background, which the text then slides behind. */
  .hiring-notice-label {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 0 0 0 0.75rem;
    background: #1e3d2f;
    box-shadow: 0.75rem 0 0.5rem #1e3d2f;
  }
  .hiring-notice-label::after {
    margin-right: 0.75em;
  }

  /* The label is pinned outside, so the copies must not repeat it. */
  .hiring-notice-inline-label {
    display: none;
  }

  .hiring-notice-viewport {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .hiring-notice-track {
    flex: 0 0 auto;
    max-width: none !important;
    margin: 0 !important;
    padding-right: 3rem;
    font-size: 15px !important;
    white-space: nowrap;
    animation: hiring-notice-scroll 22s linear infinite;
  }

  /* Sits on the notice's own background so the text passes cleanly behind. */
  .hiring-notice-dismiss {
    right: 0;
    background: #1e3d2f;
    box-shadow: -0.5rem 0 0.5rem #1e3d2f;
  }
}

@keyframes hiring-notice-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hiring-notice-track {
    animation: none;
  }

  /* Without the animation the copy is redundant and the line needs to be
     reachable by hand instead. */
  .hiring-notice-track[aria-hidden] {
    display: none;
  }

  #hiring-notice {
    overflow-x: auto;
  }
}

/* ------------------------------------------------------------------
   Home hero: fit inside the first viewport with the header, and a
   light modernization pass. Scoped to .jumbotron:not(.page-header) so
   the inner-page header jumbotrons are untouched.
   ------------------------------------------------------------------ */

/* The header above is 110-175px depending on viewport and whether the
   hiring notice is showing; a 180px allowance keeps header + hero at or
   under one viewport either way (min-height only fills, never overflows).
   svh instead of vh so mobile Safari's dynamic toolbar doesn't clip. */
.jumbotron:not(.page-header) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 180px);
  min-height: calc(100svh - 180px);
  padding-top: 1.25rem;
  padding-bottom: 1.75rem;
}

/* Directional scrim: light at the top so the photo reads, deepening
   toward the text and buttons, instead of the old flat-ish overlay. */
.jumbotron:not(.page-header):after {
  background: linear-gradient(
    180deg,
    rgba(25, 25, 25, 0.42) 0%,
    rgba(25, 25, 25, 0.6) 55%,
    rgba(25, 25, 25, 0.82) 100%
  );
}

/* Pin-up: sized by viewport height so she never pushes the CTAs below
   the fold. width:auto keeps the aspect ratio against the height cap. */
.jumbotron:not(.page-header) .pin-up {
  width: auto;
  height: auto;
  max-width: min(200px, 44vw);
  max-height: 24vh;
  max-height: max(24svh, 150px);
}

/* Eyebrow: gold, tracked out, quieter than the h1 it introduces.
   !important on color: the markup's .text-white utility carries one. */
.jumbotron:not(.page-header) .sub-heading {
  color: #edb200 !important;
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-bottom: 0.5rem;
}

/* Reined-in display type: the theme's .display-2 runs to 72px and three
   or four lines, which alone blows the fold. */
.jumbotron:not(.page-header) h1 {
  font-size: clamp(1.55rem, 0.9rem + 2.5vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 12px rgba(25, 25, 25, 0.4);
}

/* Location line: drop the dated 1px top/bottom rules and uppercase slab;
   a tracked, slightly transparent line in the body face instead.
   !important needed: the theme sets its padding with !important. */
.jumbotron:not(.page-header) .jumbo-txt {
  border-top: 0;
  border-bottom: 0;
  padding: 0 !important;
  margin-bottom: 1.25rem;
  color: rgba(251, 250, 250, 0.88);
  font-family: "DM Sans", sans-serif;
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.15rem);
  letter-spacing: 0.14em;
}

/* CTA hierarchy: solid green phone button as the primary action,
   Contact Us as a quiet outline alongside it. */
.jumbotron:not(.page-header) .btn {
  border-radius: var(--btn-radius);
  padding: 0.625rem 1.375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.jumbotron:not(.page-header) .btn[href^="tel"] {
  background-color: #298253;
  border-color: #298253;
  box-shadow: 0 4px 14px rgba(25, 25, 25, 0.35);
}

.jumbotron:not(.page-header) .btn[href^="tel"]:hover,
.jumbotron:not(.page-header) .btn[href^="tel"]:focus {
  background-color: #216a44;
  border-color: #216a44;
}

.jumbotron:not(.page-header) .btn[href="/contact/"] {
  background-color: transparent;
  border: 1px solid rgba(251, 250, 250, 0.65);
  color: #fbfafa;
}

.jumbotron:not(.page-header) .btn[href="/contact/"]:hover,
.jumbotron:not(.page-header) .btn[href="/contact/"]:focus {
  background-color: rgba(251, 250, 250, 0.12);
  border-color: #fbfafa;
  color: #fbfafa;
}

/* Small phones: tighter buttons so the pair can share one row. */
@media (max-width: 575.98px) {
  .jumbotron:not(.page-header) .btn {
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
  }
}

/* Desktop: the pin-up rides in its own column beside the text, so she
   can take more of the viewport's height there. */
@media (min-width: 992px) {
  .jumbotron:not(.page-header) .pin-up {
    max-width: 100%;
    max-height: 52vh;
    max-height: max(52svh, 300px);
  }
}

/* Below ~375px the 220px logo plus the two 54px togglers no longer fit on one
   row, so they wrapped and the header grew from 72px to 124px — which pushed
   the hero past the fold on small phones. Shrinking the logo keeps one row.
   !important for the same reason as the rule above: the theme sets the logo's
   width and height per breakpoint. */
@media (max-width: 374.98px) {
  .navbar .navbar-brand img {
    height: 30px !important;
  }

  .navbar-toggler {
    min-width: 48px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* Short phones (iPhone SE and similar) have too little height for the hero's
   floors — the pin-up's 150px minimum alone outweighs the space left once the
   hiring notice is showing. Tighten the floors rather than let it overflow. */
@media (max-width: 575.98px) and (max-height: 640px) {
  .jumbotron:not(.page-header) {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .jumbotron:not(.page-header) .pin-up {
    max-height: max(18svh, 96px);
  }

  .jumbotron:not(.page-header) h1 {
    margin-bottom: 0.5rem;
  }

  .jumbotron:not(.page-header) .jumbo-txt {
    margin-bottom: 0.5rem;
  }
}

/* Nav and hero read cleaner without icons — the labels carry it on their own.
   The SVG mask set above is left in place but inert; it only applies through
   these ::before rules, so hiding the <i> elements switches the whole set off.
   The leading space before each label collapses, so no gap is left behind. */
/* The hero's two CTAs read cleaner as plain labels; the nav keeps its icons.
   The leading space before each label collapses, so no gap is left behind. */
.jumbotron:not(.page-header) .btn i.fas {
  display: none;
}



/* ==================================================================
   Footer — CTA-led, three bands.
   (1) "Need a dumpster?" band: the page's summary — lead, one line
   of proof, the phone/quote pair. (2) Directory grid: logo with the
   small pin-up beneath it, Address / Contact / Follow and the three
   menus with every heading on one row. (3) Near-black legal bar.
   Same language as the header: Oswald uppercase, gold accents,
   gold-underline-sweep hovers, soft shadows over hard borders,
   --btn-radius on anything button-shaped. The Bootstrap columns in
   the captured markup are flattened with grid/display:contents —
   markup is treated as content, not layout.

   Shared with the homepage: .footer-cta-lead, .footer-cta-support
   and the .footer-cta-actions button rules are deliberately NOT
   scoped under .site-footer, so the injected mid-page band
   (.footer-cta.home-mid-cta, laid out by home.css) gets the
   pixel-identical pair. Everything that shapes the footer band as a
   room (ground, shadow, edge) is scoped to the footer.
   ================================================================== */

/* --- Band 1: CTA -------------------------------------------------- */

/* A half-step lighter than the grid band's ground so it reads as its
   own room, closed by a hairline. */
.footer-cta {
  background: linear-gradient(180deg, #262626, #202020);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3rem 1.5rem 3.25rem;
  text-align: center;
}
/* Footer only: the band closes as a room edge over the directory,
   not as a stripe — a soft cast shadow, lifted above the grid. */
.site-footer > .footer-cta {
  position: relative;
  z-index: 1;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

/* The lead is the hero's voice at footer scale: big tracked Oswald. */
.footer-cta-lead {
  font-family: Oswald, sans-serif;
  font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fbfafa;
  margin-bottom: 1.375rem;
}
/* A short gold tick above the lead anchors it to the brand the same
   way the section headings' gold rules do. */
.footer-cta-lead::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: #edb200;
  margin: 0 auto 1.125rem;
}

/* Proof beside the ask: the licence numbers and the response promise
   (both already on the page) in one quiet line between the lead and
   the pair. Pulled up into the lead's margin so it reads as its
   caption, with a full step before the buttons. */
.footer-cta .footer-cta-support {
  font: 400 0.9375rem/1.5 "DM Sans", sans-serif;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  margin: -0.5rem auto 1.375rem;
  max-width: 40rem;
}

.footer-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
}

/* Both actions on the shared radius and weight; green phone, red
   quote — the header CTA pairing. Keyed without a .site-footer
   ancestor on purpose: the mid-page pair must compute identically. */
.footer-cta-actions .btn {
  border: 0;
  border-radius: var(--btn-radius);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 1.0625rem;
  padding: 0.75rem 1.75rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}
.footer-cta-phone.btn {
  background-color: #298253;
  box-shadow: 0 2px 6px rgba(41, 130, 83, 0.35), 0 8px 18px rgba(0, 0, 0, 0.3);
}
.footer-cta-phone.btn:hover,
.footer-cta-phone.btn:focus {
  background-color: #2f9560;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(41, 130, 83, 0.45), 0 10px 22px rgba(0, 0, 0, 0.35);
}
.footer-cta-quote.btn {
  background-color: #ba2525;
  color: #fff;
  box-shadow: 0 2px 6px rgba(186, 37, 37, 0.35), 0 8px 18px rgba(0, 0, 0, 0.3);
}
.footer-cta-quote.btn:hover,
.footer-cta-quote.btn:focus {
  background-color: #cf3030;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(186, 37, 37, 0.45), 0 10px 22px rgba(0, 0, 0, 0.35);
}

/* Parity guard. home.css levels every body button with a generic
   `.home #main :is(section, .bg-form) .btn` rule, which outranks the
   shared rule above and would give the mid-page pair a different
   padding from the footer pair. This re-asserts only the shared
   metrics on the mid pair at higher specificity, so the two pairs
   compute identically whatever the body rule does. Colours, shadows
   and hover states still come from the shared rules. */
#main .footer-cta.home-mid-cta .footer-cta-actions .btn {
  border: 0;
  border-radius: var(--btn-radius);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 1.0625rem;
  padding: 0.75rem 1.75rem;
}
@media (max-width: 991.98px) {
  #main .footer-cta.home-mid-cta .footer-cta-actions .btn {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* --- Band 2: directory grid --------------------------------------- */

.site-footer {
  background: linear-gradient(180deg, #202020, #191919 360px);
}

/* One measure with the body: every homepage section runs a 1200px
   container, so the footer's left edge lands on the same line. */
.site-footer .container {
  max-width: 1200px;
}

/* Headings: Oswald eyebrows with a short gold rule, echoing the top
   bar. Rule centres under the mobile text-center layout and
   left-aligns from lg up. */
.site-footer h3 {
  font-family: Oswald, sans-serif;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.site-footer h3::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #edb200;
  margin: 0.4375rem auto 0;
}
/* The webfont heading glyphs (building/phone/envelope/share) fight the
   clean Oswald eyebrows; the gold rule already carries the accent. */
.site-footer h3 i.fas {
  display: none;
}

/* Contact column rhythm */
.site-footer .foot-logo {
  max-width: 240px;
  margin-bottom: 0.25rem;
}
.site-footer address {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  margin-bottom: 0;
}
/* The Contact heading sits outside the .mt-4 wrappers its siblings get. */
.site-footer .col-lg-3 > h3 {
  margin-top: 1.375rem;
}

/* Gold inline links (map, email): the top bar's underline sweep.
   Inline-block with a little vertical padding so each is a real tap
   target; the negative margin keeps the line rhythm where it was. */
.site-footer .link-warning {
  display: inline-block;
  padding: 0.375rem 0;
  margin: -0.375rem 0;
  color: #edb200;
  text-decoration: none;
  background-image: linear-gradient(#ffcb1f, #ffcb1f);
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  background-position: 0 calc(100% - 0.3125rem);
  transition: color 0.2s ease, background-size 0.25s ease;
}
.site-footer .link-warning:hover,
.site-footer .link-warning:focus {
  color: #ffcb1f;
  background-size: 100% 1.5px;
}

/* Phone in the contact column: demoted from a button to a plain gold
   text link — the CTA band above owns the button treatment, and two
   green buttons in one footer would compete. Keeps a 40px+ hit box. */
.site-footer .container.d-p .btn.btn-secondary {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0.375rem 0;
  margin: -0.375rem 0;
  line-height: 1.5;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #edb200;
  background-image: linear-gradient(#ffcb1f, #ffcb1f);
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  background-position: 0 calc(100% - 0.3125rem);
  transition: color 0.2s ease, background-size 0.25s ease;
  box-shadow: none;
}
.site-footer .container.d-p .btn.btn-secondary:hover,
.site-footer .container.d-p .btn.btn-secondary:focus {
  color: #ffcb1f;
  background-color: transparent;
  background-size: 100% 1.5px;
  box-shadow: none;
  transform: none;
}
/* Its little red webfont phone glyph reads as clutter next to plain
   text. */
.site-footer .container.d-p .btn.btn-secondary i.fas {
  display: none;
}

/* Social: 44px chips on the shared radius; gold fill on hover. */
.site-footer .list-social li {
  font-size: 1.0625rem;
}
.site-footer .list-social li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--btn-radius);
  transition: color 0.2s ease, background-color 0.2s ease,
    transform 0.2s ease, box-shadow 0.2s ease;
}
.site-footer .list-social li > a:hover,
.site-footer .list-social li > a:focus {
  color: #191919;
  background: #edb200;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* Menu links: quiet by default, white + gold underline sweep on hover.
   Tap targets without changing rhythm: the list items carry no
   margin (the theme's own !important has to be matched), each link
   is an inline-block with half a rem of padding top and bottom
   (38.5px hit box), and a small negative margin hands most of that
   padding back so the visual pitch stays the approved ~31px. The
   sweep is positioned up inside the padding so it underlines the
   text, not the hit box. */
.foot-menu li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.foot-menu a {
  display: inline-block;
  padding: 0.5rem 0;
  margin: -0.1875rem 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-decoration: none;
  background-image: linear-gradient(#edb200, #edb200);
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 calc(100% - 0.375rem);
  transition: color 0.2s ease, background-size 0.25s ease;
}
.foot-menu a:hover,
.foot-menu a:focus {
  color: #fff;
  background-size: 100% 2px;
}
/* The current page reads as located, not linked. */
.foot-menu .current-menu-item > a {
  color: #fff;
}

/* Pin-up: brand mark, not layout driver — no border column around her. */
.service-agreement-border {
  border-left: 0;
}

/* --- Band 2 layout, desktop --------------------------------------- */
@media (min-width: 992px) {
  /* The theme's .d-p climbs to 4rem at this width; the grid band is a
     directory, not a hero — keep it dense. */
  .site-footer .d-p {
    padding-top: 2.75rem;
    padding-bottom: 2.5rem;
  }

  /* One shared grid for the whole band. The Bootstrap wrappers are
     flattened with display:contents so every contact field and every
     menu is a cell on the same five-row grid — no single stacked
     column can stretch the band and leave a void beside itself.
     Columns: logo | Address | Contact | Menu | Dumpsters |
     Products & Services. */
  .site-footer .container.d-p > .row > .col-lg-3,
  .site-footer .container.d-p > .row > .col-lg-9,
  .site-footer .col-lg-9 > .row,
  .site-footer .col-lg-9 .col-lg-auto {
    display: contents;
  }
  .site-footer .container.d-p > .row {
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-template-rows: auto auto auto auto 1fr;
    justify-content: space-between;
    /* 1.5rem, not wider: the six natural cell widths sum to ~1030px
       and must sit inside the 1200px measure's 1176px content box
       without squeezing Address or Dumpsters into wraps; the slack is
       spread by space-between. */
    column-gap: 1.5rem;
    row-gap: 0;
  }

  /* Columns, left to right: logo (with the pin-up beneath it), Address,
     Contact, Menu, Dumpsters, Products & Services. Every heading shares
     row one, so Address and Contact sit level with the menu headings
     rather than a row below them. */

  /* Column 1, row 1: the logo. */
  .site-footer .col-lg-3 > a[rel="home"] {
    grid-area: 1 / 1 / 2 / 2;
    align-self: start;
  }
  .site-footer .foot-logo {
    max-width: 200px;
    margin-bottom: 0;
  }

  /* Column 2: Address, heading and value together in one cell. */
  .site-footer .col-lg-3 > div:nth-of-type(1) {
    grid-area: 1 / 2 / 6 / 3;
    margin-top: 0 !important;
  }

  /* Column 3: Contact. The markup leaves this heading outside the
     wrapper its value sits in, so it needs a cell of its own on the
     heading line, with the phone and email stacked beneath it. */
  .site-footer .container.d-p > .row > .col-lg-3 > h3 {
    grid-area: 1 / 3 / 2 / 4;
    align-self: start;
    margin-top: 0 !important;
  }
  .site-footer .col-lg-3 > div:nth-of-type(2) {
    grid-area: 2 / 3 / 3 / 4; /* phone */
    margin-top: 0 !important;
  }
  .site-footer .col-lg-3 > div:nth-of-type(3) {
    grid-area: 3 / 3 / 4 / 4; /* email */
    margin-top: 0.375rem !important;
  }
  .site-footer .col-lg-3 > div:nth-of-type(4) {
    grid-area: 4 / 3 / 6 / 4; /* follow */
    margin-top: 1.5rem !important;
    align-self: start;
  }

  /* Headings all start flush at the top of their cells. */
  .site-footer .col-lg-3 > div > h3,
  .site-footer .col-lg-9 h3 {
    margin-top: 0;
  }

  /* Social chips flush left; !important matches the theme utility. */
  .site-footer .list-social li {
    margin-left: 0 !important;
    margin-right: 0.625rem !important;
  }
  .site-footer h3::after {
    margin-left: 0;
  }

  /* Column 4: Menu. Its heading and list are siblings, so they take
     adjacent cells; the others keep heading and list in one wrapper. */
  .site-footer .col-lg-auto > h3 {
    grid-area: 1 / 4 / 2 / 5;
    align-self: start;
    margin-top: 0;
  }
  .site-footer .col-lg-auto > ul {
    grid-area: 2 / 4 / 6 / 5;
  }

  /* Column 5: Dumpsters. */
  .site-footer .col-lg-9 .col-lg-auto > .mt-4 {
    grid-area: 1 / 5 / 6 / 6;
    margin-top: 0 !important;
  }

  /* Column 6: Products & Services. */
  .site-footer .col-lg-9 .col-lg-3:not(.service-agreement-border) {
    grid-area: 1 / 6 / 6 / 7;
    width: auto;
    max-width: 13rem;
    padding: 0;
    margin: 0;
  }
  .site-footer .col-lg-9 .col-lg-3:not(.service-agreement-border) > h3 {
    white-space: nowrap;
  }

  /* Pin-up: tucked under the logo, filling column one's own height
     rather than claiming a column of her own. */
  .service-agreement-border {
    grid-area: 2 / 1 / 6 / 2;
    align-self: end;
    justify-self: start;
    width: auto;
    padding: 0;
    margin: 0;
  }
  /* Explicit height, and max-width released: .img-fluid's
     max-width:100% is circular against an auto grid track and
     collapses the image to nothing. */
  .service-agreement-border .pin-up {
    height: 200px;
    width: auto;
    max-width: none;
    margin: 0 !important; /* the utility's mx-auto */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
  }
}

/* Narrow desktop (992–1200): same grid, tighter gaps and a smaller
   pin-up so the six tracks fit the narrower container. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Six tracks leave this heading no room to stay on one line — it ran
     ~28px past the viewport, which body{overflow-x:hidden} silently
     clipped. Let it wrap instead. */
  .site-footer .col-lg-9 .col-lg-3:not(.service-agreement-border) > h3 {
    white-space: normal;
  }

  .site-footer .container.d-p > .row {
    column-gap: 1rem;
  }
  /* When the six tracks are over-constrained, grid shares the
     shortfall equally and breaks "10-Yard Dumpster" and the address
     mid-phrase. Pin those two at their natural width so the only
     column that gives is Products & Services, whose long items wrap
     anyway. */
  .site-footer .col-lg-3 > div:nth-of-type(1),
  .site-footer .col-lg-9 .col-lg-auto > .mt-4 {
    min-width: max-content;
  }
  .site-footer .foot-logo {
    max-width: 170px;
  }
  .service-agreement-border .pin-up {
    height: 150px;
  }
}

/* --- Band 2 layout, mobile ---------------------------------------- */
@media (max-width: 991.98px) {
  .footer-cta {
    padding: 2.25rem 1.25rem 2.5rem;
  }
  .footer-cta-actions .btn {
    flex: 1 1 10rem;
    max-width: 20rem;
    white-space: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .site-footer .d-p {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  /* Mobile pin-up (the theme shows .pin-up-foot here): a small mark
     above the logo, not a poster. */
  .pin-up-foot {
    max-width: 80px;
    margin-bottom: 0.375rem;
  }

  /* Tighter type rhythm at phone widths. */
  .site-footer h3 {
    margin-bottom: 0.5rem;
  }

  /* Contact column: tighter block rhythm. !important matches the
     .mt-4 utility being overridden. */
  .site-footer .col-lg-3 .mt-4 {
    margin-top: 1.125rem !important;
  }
  .site-footer .col-lg-3 > h3 {
    margin-top: 1.125rem;
  }
  .site-footer .list-social li > a {
    margin: 0 auto;
  }

  /* Menus: divider off the contact column, then a two-column grid —
     Menu | Dumpsters side by side, Products & Services across the
     bottom — left-aligned like a directory. */
  .site-footer .col-lg-9 {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .site-footer .col-lg-9 > .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.25rem;
    text-align: left;
    /* The Bootstrap row's negative side margins would pull the grid to
       the viewport edge once the columns' gutter padding is zeroed. */
    margin: 0;
  }
  .site-footer .col-lg-9 > .row > * {
    width: auto;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }
  .site-footer .col-lg-9 h3::after {
    margin-left: 0;
  }
  /* Menu + Dumpsters share one full-width row as an internal pair. */
  .site-footer .col-lg-9 .col-lg-auto {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 1.25rem;
  }
  /* !important: the grid owns the rhythm, not the .mt-4 utility. */
  .site-footer .col-lg-9 .col-lg-auto > .mt-4 {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0 !important;
  }
  .site-footer .col-lg-9 .col-lg-3:not(.service-agreement-border) {
    grid-column: 1 / -1;
  }
}

/* --- Band 3: legal bar -------------------------------------------- */

/* Recede rather than announce: near-black ground, hairline divider
   (!important: the markup's .border-white sets #fff!important), and a
   three-step type hierarchy — copyright, licences, reCAPTCHA — each
   step clearing AA on #141414 (.85 / .72 / .5 white). */
.site-info {
  background: #141414;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  padding-top: 1.625rem !important;
  padding-bottom: 1.625rem !important;
}
.site-info p {
  margin-bottom: 0.375rem !important;
}
.site-info p:first-child {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
}
.site-info p:nth-child(2) {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.site-info p:last-child {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  margin-bottom: 0 !important;
}
/* Legal links: inline-block with vertical padding for a real hit
   box; the negative margin keeps the bar's three lines on their
   rhythm. */
.site-info a {
  display: inline-block;
  padding: 0.375rem 0;
  margin: -0.375rem 0;
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
/* !important: the privacy link carries the .text-white utility. */
.site-info p:first-child a {
  color: rgba(255, 255, 255, 0.85) !important;
}
.site-info p:last-child a {
  color: rgba(255, 255, 255, 0.7);
}
.site-info a:hover,
.site-info a:focus {
  color: #edb200 !important;
}

/* Sticky-bar clearance for the legal bar on the homepage lives in
   home.css (body.home:has(.mobile-cta-bar) .site-info), keyed to the
   shared --mobile-bar-h custom property the bar itself is sized by. */

/* --- Motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .footer-cta-actions .btn,
  .site-footer .list-social li > a,
  .foot-menu a,
  .site-footer .link-warning,
  .site-info a,
  .site-footer .container.d-p .btn.btn-secondary {
    transition: none;
    transform: none !important;
  }
}

/* ==================================================================
   Shared page kit — the homepage design system applied site-wide.

   Loaded after footer.css and BEFORE home.css, so anything the
   homepage needs to do differently still wins without !important.

   Part 1 is the kit moved verbatim out of home.css: every selector
   that read `.home` now reads `:root` (same 0,1,0 specificity, so
   the homepage renders identically) and `body.home` reads `body`.
   The `home-` class prefix on kit classes (.home-h2, .home-eyebrow,
   .home-textlink, .home-actions, .home-fact-row, .home-trust,
   .home-materials, .home-dumpsters-all, .home-ghost) is historical:
   they are the site-wide kit hooks, stamped by the loader on inner
   pages too. Part 2 is the inner-page work, scoped body:not(.home),
   to [data-page="…"] stamped on #content by the loader, or to
   captured body classes (.single-roll_off_dumpster,
   .post-type-archive-review).

   GOLD GUARDRAIL: gold #edb200 on light grounds is a MARK only
   (ticks, rules, stars, chip grounds, list markers, focus rings) —
   never text (1.9:1 on white). Eyebrows on white/off-white are
   #191919 with a 20x2 gold rule before them. Gold text appears only
   on charcoal or photo grounds.

   Every asset path is absolute (/wp-content/...): this file is
   inlined into a <style> by PageHtml.tsx, so a relative path would
   resolve against the page, not the theme folder.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Global kit
   ------------------------------------------------------------------ */

:root {
  --mobile-bar-h: 66px;
}

/* Bootstrap's g-5 rows overhang the containers' 12px padding with empty
   gutter margin; body{overflow-x:hidden} was silently absorbing it.
   clip (not hidden) stops it per-section without creating scroll
   containers. */
:root #main > * {
  overflow-x: clip;
}

/* Measure: one 1200px line for every body section. The heroes' own
   .jumbotron containers are excluded so the bands keep their layout.
   Inner pages often put the content container directly under #main. */
:root #main > :not(.jumbotron) :is(.container, .container-xl),
:root #main > .container,
.home-trust > ul,
.home-mid-cta-inner {
  max-width: 1200px;
}

/* Rhythm: the theme's 4–6rem sections read as dead air. */
:root #main .d-p {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (max-width: 767.98px) {
  :root #main .d-p {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Heading kit: every section h2, 32px floor, 44px at 1440. */
:root #main :is(.home-h2, .display-3, .display-4, .display-5) {
  font: 600 clamp(2rem, 1.5rem + 1.8vw, 2.75rem) / 1.1 Oswald, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #191919;
  margin-bottom: 0;
}
/* The gold tick under every section h2. Centred by default; the
   left-aligned sections zero the left margin. */
:root #main :is(.home-h2, .display-3, .display-4, .display-5)::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: #edb200;
  margin: 0.875rem auto 0;
}

/* Eyebrow kit. Light ground: near-black with a 20x2 gold rule. */
.home-eyebrow {
  display: block;
  font: 500 0.8125rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #191919;
  margin: 0 0 0.625rem;
}
.home-eyebrow::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: #edb200;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 0.625rem;
}
/* Dark ground: gold text, no rule. */
.home-eyebrow--dark {
  color: #edb200;
}
.home-eyebrow--dark::before {
  display: none;
}

/* Button kit: one spec for every solid button in the body. The
   section:not(.footer-cta) scope is mandatory so the footer pair keeps
   footer.css's 50px size. .d-p covers the inner pages' container
   divs and .pg-header-actions the inner header bands. The scope and
   the exclusions sit in :where() so the kit stays at 1,2,0 and the
   element rules below (Gravity submits, card CTA, ghost) outrank it. */
:root #main :where(section:not(.footer-cta), .bg-form, .d-p, .pg-header-actions) .btn:where(:not(.home-textlink):not(.home-ghost)) {
  border: 0;
  border-radius: var(--btn-radius);
  font: 600 1rem / 1 "DM Sans", sans-serif;
  letter-spacing: 0.02em;
  padding: 0.8125rem 1.625rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* Green: phone only. */
:root #main :where(section:not(.footer-cta), .bg-form, .d-p, .pg-header-actions) .btn-secondary:where(:not(.home-textlink):not(.home-ghost):not(.gform_button)) {
  background-color: #298253;
  color: #fff;
  box-shadow: 0 2px 6px rgba(41, 130, 83, 0.3), 0 6px 16px rgba(0, 0, 0, 0.15);
}
:root #main :where(section:not(.footer-cta), .bg-form, .d-p, .pg-header-actions) .btn-secondary:where(:not(.home-textlink):not(.home-ghost):not(.gform_button)):hover,
:root #main :where(section:not(.footer-cta), .bg-form, .d-p, .pg-header-actions) .btn-secondary:where(:not(.home-textlink):not(.home-ghost):not(.gform_button)):focus {
  background-color: #2f9560;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(41, 130, 83, 0.4), 0 8px 20px rgba(0, 0, 0, 0.2);
}
/* Red: quote / submit. */
:root #main :where(section:not(.footer-cta), .bg-form, .d-p, .pg-header-actions) .btn-primary:where(:not(.home-textlink):not(.home-ghost)) {
  background-color: #ba2525;
  color: #fff;
  box-shadow: 0 2px 6px rgba(186, 37, 37, 0.3), 0 6px 16px rgba(0, 0, 0, 0.15);
}
:root #main :where(section:not(.footer-cta), .bg-form, .d-p, .pg-header-actions) .btn-primary:where(:not(.home-textlink):not(.home-ghost)):hover,
:root #main :where(section:not(.footer-cta), .bg-form, .d-p, .pg-header-actions) .btn-primary:where(:not(.home-textlink):not(.home-ghost)):focus {
  background-color: #cf3030;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(186, 37, 37, 0.4), 0 8px 20px rgba(0, 0, 0, 0.2);
}
/* Gravity submits on every form are RED: red = quote, green stays
   reserved for tel: links. Specificity 1,2,0 beats the theme's
   .btn-secondary:focus green ring and the kit's green variant. */
:root #main .gform_button.btn {
  background: #ba2525;
  color: #fff;
  box-shadow: 0 2px 6px rgba(186, 37, 37, 0.35), 0 8px 18px rgba(0, 0, 0, 0.3);
}
:root #main .gform_button.btn:hover,
:root #main .gform_button.btn:focus {
  background: #cf3030;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(237, 178, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.3);
}
/* Focus ring on every interactive element in the body. */
:root #main :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #edb200;
  outline-offset: 3px;
}

/* Quiet-link kit: every navigational action is a tracked Oswald label
   with a gold underline sweep. Keyed on a class (not a broad :not()
   chain) on purpose: it cannot strip a real button. background-color
   rather than the background shorthand, so the sweep's background-image
   survives the !important. */
:root #main .home-textlink,
:root .dumpster-hover a.stretched-link,
.home-materials .card a.stretched-link {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0;
  padding: 0 0 2px;
  min-height: 0;
  display: inline-block;
  font: 500 0.875rem / 1.4 Oswald, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #191919;
  text-decoration: none;
  text-shadow: none;
  background-image: linear-gradient(#edb200, #edb200) !important;
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  transition: color 0.2s ease, background-size 0.25s ease;
  transform: none;
}
:root #main .home-textlink:hover,
:root #main .home-textlink:focus,
:root .dumpster-hover a.stretched-link:hover,
:root .dumpster-hover a.stretched-link:focus,
.home-materials .card a.stretched-link:hover,
.home-materials .card a.stretched-link:focus {
  color: #191919;
  background-size: 100% 2px;
  transform: none;
}
:root #main .home-textlink i.fas,
:root #main a.stretched-link i.fas {
  color: #edb200;
}
/* Dark variant: only on charcoal/photo grounds. */
:root #main .home-textlink--gold {
  color: #edb200;
}
:root #main .home-textlink--gold:hover,
:root #main .home-textlink--gold:focus {
  color: #ffcb1f;
}
/* Phone as a quiet link: green is the phone colour (4.6:1 on white). */
:root #main .home-textlink--phone {
  color: #298253;
}
:root #main .home-textlink--phone:hover,
:root #main .home-textlink--phone:focus {
  color: #298253;
}

/* Ghost kit: only on photo grounds, where a text link would be lost. */
:root #main .home-ghost.btn {
  background: transparent !important;
  border: 2px solid rgba(251, 250, 250, 0.55);
  color: #fbfafa;
  box-shadow: none;
  border-radius: var(--btn-radius);
  font: 600 1rem / 1 "DM Sans", sans-serif;
  letter-spacing: 0.02em;
  padding: calc(0.8125rem - 2px) calc(1.625rem - 2px);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
:root #main .home-ghost.btn:hover,
:root #main .home-ghost.btn:focus {
  border-color: #edb200;
  background: rgba(251, 250, 250, 0.08) !important;
  color: #fbfafa;
  box-shadow: none;
  transform: none;
}
:root #main .home-ghost i.fas {
  color: #edb200;
}

/* Action rows: one solid ask beside one quiet link. */
.home-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  margin-top: 0.5rem;
}

/* Fact rows: big Oswald figure over a small caption. */
.home-fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 2rem;
}
.home-fact-row li {
  display: grid;
  gap: 0.25rem;
}
.home-fact-row strong {
  font: 600 1.75rem / 1 Oswald, sans-serif;
  color: #191919;
  text-transform: uppercase;
}
.home-fact-row span {
  font: 500 0.8125rem / 1.3 "DM Sans", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5a5a;
  max-width: 16rem;
}

/* Inputs, every Gravity form alike (all forms sit in a .gform_wrapper,
   inside the hero card, the charcoal band, or a light page). */
:root #main .gform_wrapper .form-control,
:root #main .gform_wrapper .form-select {
  background-color: #fff;
  border: 0;
  border-radius: var(--btn-radius);
  min-height: 48px;
  padding: 0.5rem 0.875rem;
  box-shadow: inset 0 0 0 1px rgba(25, 25, 25, 0.12);
  color: #191919;
  font-size: 1rem;
}
:root #main .gform_wrapper .form-control::placeholder {
  color: #5a5a5a;
}
:root #main .gform_wrapper .form-control:focus,
:root #main .gform_wrapper .form-select:focus {
  box-shadow: inset 0 0 0 1px #edb200, 0 0 0 3px rgba(237, 178, 0, 0.35);
  outline: 0;
}
:root #main .gform_wrapper .gfield {
  margin-bottom: 0.875rem;
}
:root #main .gform_wrapper textarea.form-control {
  height: 6rem;
  min-height: 6rem;
}
/* Required marks and the legend, dark grounds (hero card, band panel). */
:root .jumbo-form .gfield_required,
:root .bg-form .gfield_required {
  color: #edb200;
}
:root .jumbo-form .gform_required_legend,
:root .bg-form .gform_required_legend {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;
}
/* Light grounds (contact, free quote, employment): red mark, grey legend. */
body:not(.home) #main .container.d-p .gfield_required {
  color: #ba2525;
}
body:not(.home) #main .container.d-p .gform_required_legend {
  color: #5a5a5a;
  font-size: 0.8125rem;
}
/* Native radios / checkboxes (employment): the primary accent. */
body:not(.home) #main .gform_wrapper :is(input[type="radio"], input[type="checkbox"]) {
  accent-color: #ba2525;
  width: 1.0625rem;
  height: 1.0625rem;
}

/* On-page quote anchors land with the card / band heading in view. */
#gf_1 {
  scroll-margin-top: 11.5rem; /* the card's heading + intro sit above the anchor */
}
#gf_2 {
  scroll-margin-top: 18rem; /* the band's eyebrow, h2, lead and panel padding */
}
#reviews {
  scroll-margin-top: 1rem;
}
#gf_3,
#gf_4,
#gform_wrapper_5 {
  scroll-margin-top: 2rem;
}

/* Cards and panels. */
:root .dumpster-hover,
.home-materials .card,
:root .reviews-sec .card {
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.12);
}
:root .jumbo-form,
.home-scale-plinth,
:root .bg-form .mw-1200 {
  background: linear-gradient(180deg, #202020, #191919) !important; /* .jumbo-form's bg-dark */
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(25, 25, 25, 0.12), 0 24px 48px rgba(25, 25, 25, 0.22);
}

/* ------------------------------------------------------------------
   2. Trust strip — the hero's caption on home, the page header's on
   the service and product pages (injected by the loader).
   ------------------------------------------------------------------ */
.home-trust {
  background: #141414;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 60px;
}
.home-trust ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 2.75rem;
  margin: 0 auto;
  padding: 0.875rem 1rem;
  list-style: none;
}
.home-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 0.8125rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.home-trust li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 2.75rem;
}
.home-trust a {
  color: inherit;
  text-decoration: none;
  padding-bottom: 1px;
  background-image: linear-gradient(#edb200, #edb200);
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  background-position: 0 100%;
  transition: background-size 0.25s ease;
}
.home-trust a:hover,
.home-trust a:focus {
  background-size: 100% 1.5px;
}
.home-ti {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  color: #edb200;
  -webkit-mask: var(--ti) center / contain no-repeat;
  mask: var(--ti) center / contain no-repeat;
}
.home-ti--licence {
  --ti: url(/wp-content/themes/sarnago/icons/file-signature.svg);
}
.home-ti--star {
  --ti: url(/wp-content/themes/sarnago/icons/star.svg);
}
.home-ti--dumpster {
  --ti: url(/wp-content/themes/sarnago/icons/dumpster.svg);
}
.home-ti--map {
  --ti: url(/wp-content/themes/sarnago/icons/location-dot.svg);
}
/* Under 1200 the four items no longer fit on one line at the full
   tracking; tighten so the rail stays a single row down to 992. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .home-trust ul {
    gap: 0 1.5rem;
  }
  .home-trust li {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
  .home-trust li + li {
    padding-left: 1.5rem;
  }
}
@media (max-width: 767.98px) {
  .home-trust ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 0.875rem;
    padding: 0.625rem 1rem 0.75rem;
  }
  .home-trust li {
    font-size: 0.75rem;
    white-space: normal;
  }
  .home-trust li + li {
    border-left: 0;
    padding-left: 0;
  }
  .home-ti {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }
}

/* ------------------------------------------------------------------
   3. Dumpster cards — home's size cards and the roll-off page's photo
   cards share the .dumpster-hover chassis.
   ------------------------------------------------------------------ */
:root .dumpster-hover {
  padding: 1rem 1rem 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
:root .dumpster-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(25, 25, 25, 0.08), 0 22px 44px rgba(25, 25, 25, 0.18);
}
/* One scale for the four cut-outs on a warm stone tile; the theme's
   top:-5px hop is killed. */
:root .dumpster-hover img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #f3f1ee;
  padding: 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(25, 25, 25, 0.06);
  top: 0 !important;
  transition: none;
}
:root .dumpster-hover .text-center {
  text-align: left !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.375rem;
  padding-top: 0.875rem;
}
:root .dumpster-hover h3 {
  font: 600 1.375rem / 1.2 Oswald, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #191919;
  margin: 0;
}
:root .dumpster-spec {
  font: 400 0.875rem / 1.5 "DM Sans", sans-serif;
  color: #373737;
  margin: 0;
}
:root .dumpster-fit {
  font: italic 400 0.8125rem / 1.5 "DM Sans", sans-serif;
  color: rgba(25, 25, 25, 0.65);
  margin: 0;
}
/* The per-card ask sits above the stretched link and wins the click. */
:root #main .dumpster-cta {
  display: flex;
  width: 100%;
  margin-top: auto;
  position: relative;
  z-index: 2;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  white-space: nowrap;
}
:root .dumpster-hover .dumpster-cta,
:root .dumpster-hover:hover .dumpster-cta {
  color: #fff; /* beats the theme's .dumpster-hover:hover a red */
}
:root .dumpster-hover a.stretched-link {
  font-size: 0.8125rem;
  margin-top: 0.75rem;
  align-self: flex-start;
}
:root .dumpster-hover:hover a.stretched-link {
  color: #191919;
  background-size: 100% 2px;
}
.home-dumpsters-all {
  margin-top: 2rem !important; /* .mt-5 */
}

/* ------------------------------------------------------------------
   4. Our Reviews — charcoal room (home and the six inner pages that
   carry the same captured section).
   ------------------------------------------------------------------ */
:root .reviews-sec {
  background: linear-gradient(180deg, #202020, #191919);
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}
:root .reviews-sec .row.g-5 {
  --bs-gutter-x: 1.5rem; /* 2rem would overhang the container by 4px a side */
  align-items: start;
}
:root .reviews-sec .col-lg-3 > .mb-2 .fa-star {
  font-size: 1.25rem;
  margin-right: 0.25rem;
}
:root #main .reviews-sec :is(h2, h3).display-5 {
  color: #fbfafa !important;
  margin-bottom: 1rem;
}
:root #main .reviews-sec :is(h2, h3).display-5::after {
  margin-left: 0;
}
:root .reviews-sec .col-lg-3 > .lead {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.25rem !important;
}
:root .reviews-sec .home-actions {
  margin: 0 0 0.25rem;
}
/* Dark variant of the quiet link (1,3,0 outranks the kit's 1,2,0). */
:root #main .reviews-sec .home-textlink {
  color: #fbfafa;
}
:root #main .reviews-sec .home-textlink:hover,
:root #main .reviews-sec .home-textlink:focus {
  color: #fbfafa;
}
:root .reviews-sec .card {
  text-align: left !important;
  height: 100%;
  overflow: hidden;
}
:root .reviews-sec .card .p-4 {
  padding: 1.75rem 1.625rem 1.5rem !important;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  gap: 1rem 0.75rem;
  align-items: end;
}
/* The quote block, opened by a gold Oswald quotation mark. */
:root .reviews-sec .overflow-scroll {
  grid-column: 1 / -1;
  align-self: start;
  scrollbar-width: thin;
}
:root .reviews-sec .overflow-scroll::before {
  content: "\201C";
  display: block;
  font: 600 3rem / 0.9 Oswald, sans-serif;
  color: #edb200;
  height: 1.75rem;
}
@media (min-width: 992px) {
  :root .reviews-sec .overflow-scroll {
    overflow: visible !important;
    max-height: none !important;
  }
}
@media (max-width: 991.98px) {
  :root .reviews-sec .overflow-scroll {
    overflow: auto !important;
  }
}
:root .reviews-sec .card .lead,
:root .reviews-sec .card .lead p,
:root .reviews-sec .card .lead span {
  font-size: 1rem;
  line-height: 1.65;
  color: #373737;
  margin: 0;
}
:root .reviews-sec .fs-5 {
  grid-column: 1;
  font: 600 1rem / 1.2 Oswald, sans-serif !important; /* .fs-5 */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #191919;
  margin: 0 !important;
}
/* One row: name / stars / Google mark in full colour. */
:root .reviews-sec .card .mt-3 {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
}
:root .reviews-sec .card .mt-3 .fa-star {
  font-size: 0.875rem;
}
:root .reviews-sec .card .mt-3 img {
  display: inline-block !important;
  width: 72px;
  height: auto;
  margin: 0 0 0 0.5rem !important;
  filter: none;
  opacity: 1;
}

/* Narrow desktop (992–1199): the cards are ~230px wide, so the name
   and the stars/mark row stack instead of sharing a line that would
   overflow the card. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root .reviews-sec .card .p-4 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
    row-gap: 0.5rem;
  }
  :root .reviews-sec .fs-5,
  :root .reviews-sec .card .mt-3 {
    grid-column: 1;
  }
  :root .reviews-sec .card .mt-3 {
    flex-wrap: wrap;
  }
}

/* ------------------------------------------------------------------
   5. Material cards — home's section and the materials page share the
   .home-materials hook (stamped there by the loader).
   ------------------------------------------------------------------ */
.home-materials > .d-p {
  background: #fff;
  padding: 2.5rem 0 3.5rem;
}
.home-materials .row.gy-4 {
  --bs-gutter-x: 1.5rem; /* 2rem would overhang the container by 4px a side */
  --bs-gutter-y: 1.75rem;
}
.home-materials .card {
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home-materials .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(25, 25, 25, 0.08), 0 22px 44px rgba(25, 25, 25, 0.18);
}
/* The captured 1:1 texture photos towered over their own copy. */
.home-materials .card-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f3f1ee;
  box-shadow: inset 0 0 0 1px rgba(25, 25, 25, 0.08);
  border-radius: 0;
}
.home-materials .card-body {
  padding: 1.125rem 1.375rem 1.25rem;
  text-align: left;
}
/* Titles near-black (red is for actions), each with a short gold tick. */
.home-materials .card-title {
  color: #191919 !important; /* .text-primary */
  font: 600 1.1875rem / 1.2 Oswald, sans-serif;
  letter-spacing: 0.04em;
  text-align: left !important;
  margin: 0 0 0.625rem;
}
.home-materials .card-title::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #edb200;
  margin-top: 0.5rem;
}
.home-materials .card-text {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #373737;
  margin-bottom: 0.75rem !important; /* .mb-2 */
}
.home-materials .card-text ul {
  padding-left: 1.125rem;
  margin-bottom: 0;
}
.home-materials .card-text li {
  margin-bottom: 0.125rem;
}
.home-materials .card-text li::marker {
  color: #edb200;
}
.home-materials .card a.stretched-link {
  font-size: 0.8125rem;
  margin-top: auto;
  align-self: flex-start;
}
.home-materials .card:hover a.stretched-link {
  color: #191919;
  background-size: 100% 2px;
}

/* ------------------------------------------------------------------
   6. Estimate Request Form — the closing ask (home and the six inner
   pages that carry the same captured band, all Gravity form 2).
   ------------------------------------------------------------------ */
:root .bg-form {
  background: #fbfafa !important; /* the gravel texture goes */
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}
:root .bg-form:after {
  display: none;
}
:root #main .bg-form h2::before {
  content: "Free Estimate";
  display: block;
  font: 500 0.8125rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #191919;
  width: max-content;
  margin: 0 auto 0.625rem;
  padding-left: calc(20px + 0.625rem);
  background: linear-gradient(#edb200, #edb200) 0 50% / 20px 2px no-repeat;
}
:root #main .bg-form h2 {
  color: #191919 !important; /* .text-white */
  margin-bottom: 1rem !important; /* .mb-4 */
}
:root .bg-form .mw-800 {
  margin-bottom: 2.5rem !important;
}
:root .bg-form .mw-800 > .lead {
  color: #373737 !important; /* .text-white */
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}
:root .bg-form .link-white {
  color: #298253 !important;
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(#edb200, #edb200);
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size 0.25s ease;
}
:root .bg-form .link-white:hover,
:root .bg-form .link-white:focus {
  background-size: 100% 2px;
}
.home-form-promise {
  font-size: 0.9375rem;
  color: #5a5a5a;
  margin: 0;
}
/* The charcoal panel. */
:root .bg-form .mw-1200 {
  max-width: 1000px;
  padding: 2.5rem 2.5rem 2.25rem;
  box-shadow: 0 4px 10px rgba(25, 25, 25, 0.12), 0 28px 56px rgba(25, 25, 25, 0.24);
}
/* The two Gravity HTML sub-headings become dark eyebrows. */
:root .bg-form #field_2_14 h3,
:root .bg-form #field_2_13 p.h3 {
  font: 500 0.8125rem / 1.3 Oswald, sans-serif !important; /* .h3 */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #edb200 !important;
  margin: 1.5rem 0 0.875rem;
}
:root .bg-form #field_2_14 h3 {
  margin-top: 0;
}
:root .bg-form #field_2_14 h3::after,
:root .bg-form #field_2_13 p.h3::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #edb200;
  margin-top: 0.5rem;
}
:root .bg-form .gform_footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding-bottom: 0;
}
:root #main .bg-form .gform_button {
  width: auto !important;
  min-width: 16rem;
  display: inline-flex;
  margin: 0 auto;
}
.home-form-alt {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.home-form-alt a {
  color: #edb200;
  font-weight: 600;
  text-decoration: none;
}
.home-form-alt a:hover,
.home-form-alt a:focus {
  color: #ffcb1f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The band on phones: tighter panel, full-width submit. */
@media (max-width: 767.98px) {
  :root .bg-form .mw-1200 {
    padding: 2rem 1.25rem;
  }
  :root #main .bg-form .gform_button {
    width: 100% !important;
  }
}

/* ------------------------------------------------------------------
   7. Shared mobile kit (≤991.98px)
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  /* Under 992px the g-5 rows' -1.5rem gutter margins overhang the
     containers' .75rem padding by 12px a side. */
  :root #main .row.g-5 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
  }

  :root #main .dumpster-hover .dumpster-cta {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  /* Reviews: three cards stacked; the ask under the lead. */
  :root .reviews-sec {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  :root .reviews-sec .row.gy-4 {
    --bs-gutter-y: 1rem;
  }
  :root .reviews-sec .card .p-4 {
    padding: 1.125rem 1rem 1rem !important;
    gap: 0.75rem 0.5rem;
  }
  :root .reviews-sec .overflow-scroll::before {
    font-size: 2.5rem;
    height: 1.5rem;
  }
  :root .reviews-sec .card .lead,
  :root .reviews-sec .card .lead p,
  :root .reviews-sec .card .lead span {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  :root .reviews-sec .home-actions .home-phone-btn {
    width: 100%;
    max-width: 20rem;
  }
  :root .reviews-sec .col-lg-3 .home-textlink {
    display: inline-block;
    width: auto;
    margin-top: 1rem !important;
  }

  /* Sticky bar: people call from job sites — the two conversion
     actions ride the bottom edge of every phone viewport. The
     observer in the loader hides it while another phone button is on
     screen. */
  :root .mobile-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    gap: 0.625rem;
    min-height: var(--mobile-bar-h);
    padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom));
    background: rgba(25, 25, 25, 0.96);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.25s ease;
  }
  :root .mobile-cta-bar.is-hidden {
    transform: translateY(110%);
  }
  :root .mobile-cta-bar .btn {
    flex: 1 1 0;
    border: 0;
    border-radius: var(--btn-radius);
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    padding: 0.6875rem 0.5rem;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
  }
  :root .mobile-cta-bar .btn-secondary {
    background-color: #298253;
    box-shadow: 0 2px 6px rgba(41, 130, 83, 0.35);
  }
  :root .mobile-cta-bar .btn-primary {
    background-color: #ba2525;
    box-shadow: 0 2px 6px rgba(186, 37, 37, 0.35);
  }
  /* Keep the legal bar readable above the pinned bar. */
  body:has(.mobile-cta-bar) .site-info {
    padding-bottom: calc(1.625rem + var(--mobile-bar-h) + env(safe-area-inset-bottom)) !important;
  }
}
@media (min-width: 992px) {
  :root .mobile-cta-bar {
    display: none;
  }
}

/* Tablets: material cards two-up with the wide tile. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .home-materials .row.gy-4 > :is(.col-lg-4, .col-sm-6) {
    width: 50%;
  }
}

/* Material cards as media objects on phones. */
@media (max-width: 575.98px) {
  .home-materials .card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
  }
  .home-materials .card-img {
    aspect-ratio: 1;
    width: 104px;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 0 0 12px;
  }
  .home-materials .card-body {
    padding: 0.75rem 0.875rem;
  }
  .home-materials .card-title {
    font-size: 1rem;
    margin: 0 0 0.5rem;
  }
  .home-materials .card-text {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0.5rem !important;
  }
  .home-materials .card a.stretched-link {
    font-size: 0.75rem;
  }
}

/* ==================================================================
   Part 2 — inner pages only (body:not(.home) / [data-page] / captured
   body classes). Nothing below this line can touch the homepage.
   ================================================================== */

/* ------------------------------------------------------------------
   8. Page header band. Covers header.page-header.jumbotron and the
   FAQs / Reviews div.jumbotron (which, lacking .page-header, would
   otherwise inherit the home hero's 100svh floor from overrides.css).
   ------------------------------------------------------------------ */
body:not(.home) #content .jumbotron {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 3.5rem 0 3rem;
  background-size: cover;
  background-position: 50% 40%;
}
/* Directional scrim: readable at the baseline, photo showing up top. */
body:not(.home) #content .jumbotron:after {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.5) 0%, rgba(25, 25, 25, 0.66) 55%, rgba(25, 25, 25, 0.82) 100%);
}
body:not(.home) #content .jumbotron h1 {
  font: 600 clamp(2rem, 1.4rem + 2.2vw, 3.25rem) / 1.12 Oswald, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: #fbfafa;
  margin: 0 !important; /* .mb-4 on the FAQs / Reviews h1 */
  text-shadow: 0 2px 12px rgba(25, 25, 25, 0.4);
}
body:not(.home) #content .jumbotron h1::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: #edb200;
  margin: 1rem auto 0;
}
/* The "In Clearwater, FL" sub-line: the dated 1px rules and 2rem slab
   become a quiet tracked line above the tick. */
body:not(.home) #content .jumbotron .serv-jumbo-sub {
  border: 0;
  max-width: none;
  margin: 0.625rem auto 0;
  padding: 0;
  font: 500 0.9375rem / 1.4 "DM Sans", sans-serif;
  letter-spacing: 0.14em;
  color: rgba(251, 250, 250, 0.85);
}
/* The Reviews band's lead sentence. !important: .text-white. */
body:not(.home) #content .jumbotron .lead {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 62ch;
  margin: 1.125rem auto 0;
}

/* The in-band ask on service and product pages (loader-injected). */
.pg-header-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
  margin-top: 1.625rem;
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------------
   9. Breadcrumb: from a green bar to a quiet stone strip.
   ------------------------------------------------------------------ */
body:not(.home) .breadcrumb {
  background-color: #f3f1ee;
  border-bottom: 0;
  padding: 0.6875rem 0;
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
body:not(.home) .breadcrumb,
body:not(.home) .breadcrumb span {
  color: #5a5a5a;
}
body:not(.home) .breadcrumb a {
  color: #298253;
  font-weight: 600;
  text-decoration: none;
}
body:not(.home) .breadcrumb a:hover,
body:not(.home) .breadcrumb a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #edb200;
}

/* ------------------------------------------------------------------
   10. Inner content kit: plain headings, body copy, media. Scoped to
   the two content shells (div.container.d-p pages, and section.d-p >
   .container pages minus the reviews / form bands).
   ------------------------------------------------------------------ */
body:not(.home) #main :where(.container.d-p, .d-p:not(.reviews-sec):not(.bg-form) > :is(.container, .container-xl)) h2:where(:not([class*="display-"])) {
  font: 600 clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem) / 1.15 Oswald, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #191919;
  margin: 0 0 1rem;
}
body:not(.home) #main :where(.container.d-p, .d-p:not(.reviews-sec):not(.bg-form) > :is(.container, .container-xl)) h2:where(:not([class*="display-"]))::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: #edb200;
  margin: 0.75rem 0 0;
}
body:not(.home) #main :where(.container.d-p, .d-p:not(.reviews-sec):not(.bg-form) > :is(.container, .container-xl)) h2.text-center:where(:not([class*="display-"]))::after {
  margin-left: auto;
  margin-right: auto;
}
body:not(.home) #main :where(.container.d-p, .d-p:not(.reviews-sec):not(.bg-form) > :is(.container, .container-xl)) h3:where(:not(.accordion-header):not(.card-title):not([class*="display-"])) {
  font: 500 1.25rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #191919;
  margin: 1.5rem 0 0.625rem;
}
/* Section lead-ins set as .h3 slabs (demolition's "Expert Demolition
   Services" intro) become body-face standfirsts. !important: .text-dark. */
body:not(.home) #main :where(.container.d-p, .d-p:not(.reviews-sec):not(.bg-form) > :is(.container, .container-xl)) p.h3 {
  font: 400 1.125rem / 1.6 "DM Sans", sans-serif;
  text-transform: none;
  color: #373737 !important;
  max-width: 62ch;
  margin: 0 auto 1rem;
}
/* Body copy: the theme's 300-weight 1.25rem .lead reads thin. The
   reviews/band leads are excluded by scope; the cards' .overflow-scroll
   lead by the :not(). */
body:not(.home) #main :where(.container.d-p, .d-p:not(.reviews-sec):not(.bg-form) > :is(.container, .container-xl)) :where(.lead:not(.overflow-scroll):not(.card-text)) {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: #373737;
}
/* Inline links in copy: green with the gold sweep. */
body:not(.home) #main :where(.container.d-p, .d-p:not(.reviews-sec):not(.bg-form) > :is(.container, .container-xl)) :where(:is(p, li) > a:not(.btn):not(.home-textlink)),
body:not(.home) #main .link-info {
  color: #298253;
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(#edb200, #edb200);
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size 0.25s ease;
}
body:not(.home) #main :where(.container.d-p, .d-p:not(.reviews-sec):not(.bg-form) > :is(.container, .container-xl)) :where(:is(p, li) > a:not(.btn):not(.home-textlink)):hover,
body:not(.home) #main :where(.container.d-p, .d-p:not(.reviews-sec):not(.bg-form) > :is(.container, .container-xl)) :where(:is(p, li) > a:not(.btn):not(.home-textlink)):focus,
body:not(.home) #main .link-info:hover,
body:not(.home) #main .link-info:focus {
  color: #298253;
  background-size: 100% 2px;
}
/* Content photos: 8px tiles under a soft shadow, video/embed frames
   12px. */
body:not(.home) #main :where(.container.d-p, .d-p:not(.reviews-sec):not(.bg-form) > :is(.container, .container-xl)) img.img-fluid:where(:not(.foot-logo):not(.position-relative)),
body:not(.home) #main .container img.wp-post-image:not(.card-img) {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.08), 0 14px 32px rgba(25, 25, 25, 0.14);
  max-width: 100%;
  height: auto;
}
body:not(.home) #main .ratio {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(25, 25, 25, 0.08), 0 18px 40px rgba(25, 25, 25, 0.16);
}
/* The theme's Font Awesome Pro list glyphs never load; a gold dot
   marks each .dump-list item instead. */
body:not(.home) .dump-list ul li {
  font-size: 1rem;
  color: #373737;
}
body:not(.home) .dump-list ul li::before,
body:not(.home) .dump-list ul li::after {
  content: "";
  font: 0 / 0 a; /* the theme puts an FA Pro glyph here; kill it */
  overflow: hidden;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #edb200;
  top: 0.55em;
  left: 0.75rem;
}

/* ------------------------------------------------------------------
   11. Special Offer band (materials and the roll-off archive; the
   loader stamps .pg-offer — on the product pages the same captured
   band becomes the rail's .pg-offer-panel instead, section 13).
   !important where a Bootstrap utility
   (.bg-light, .border-bottom, .pb-*/.pt-*) carries one.
   ------------------------------------------------------------------ */
.pg-offer {
  background-color: #f3f1ee !important; /* .bg-light */
  border-bottom: 0 !important; /* .border-bottom */
  padding-top: 2.75rem !important; /* .pt-4 */
  padding-bottom: 3rem !important; /* .pb-5 */
}
.pg-offer h2 {
  font: 600 clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem) / 1.15 Oswald, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #191919;
  margin: 0 0 0.75rem;
}
.pg-offer h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: #edb200;
  margin: 0.75rem auto 0;
}
/* The "Special Offer" kicker becomes the standard light-ground eyebrow.
   !important: .text-secondary. */
.pg-offer .sub-heading {
  display: block;
  font: 500 0.8125rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #191919 !important;
  margin: 0 auto 0.625rem;
  width: max-content;
  padding-left: calc(20px + 0.625rem);
  background: linear-gradient(#edb200, #edb200) 0 50% / 20px 2px no-repeat;
}
.pg-offer .lead {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  color: #373737;
}
.pg-offer .home-actions {
  justify-content: center;
  margin-top: 1.125rem;
}

/* ------------------------------------------------------------------
   12. Demolition "Why Choose" band (.pg-why, stamped).
   ------------------------------------------------------------------ */
.pg-why {
  background-color: #fbfafa !important; /* .bg-light */
  border-bottom: 0 !important; /* .border-bottom */
  padding-top: 3.5rem !important; /* .pt-4 */
  padding-bottom: 4rem !important; /* .pb-5 */
}
.pg-why h2.display-3 {
  margin: 0 0 1rem !important; /* .my-4 */
}
.pg-why > .container > .h3 {
  font: 400 1.125rem / 1.6 "DM Sans", sans-serif;
  text-transform: none;
  color: #373737 !important; /* .text-dark */
  max-width: 62ch;
  margin: 0 auto 1.5rem;
}
/* The loose 2x glyphs become chips on a soft gold ground.
   !important: .text-secondary. */
.pg-why i.fas.fa-2x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--btn-radius);
  background: rgba(237, 178, 0, 0.16);
  color: #191919 !important;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.pg-why h3.point {
  font: 500 1.1875rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #191919;
  border: 0;
  padding: 0;
  margin-bottom: 0.5rem;
}
.pg-why .col-lg-4 .lead {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: #373737;
  max-width: 34rem;
  margin: 0 auto;
}

/* ------------------------------------------------------------------
   13. Product pages (10/20/30/40-yard), revamped. Off-white band; the
   spec sheet is a white card (h2 + lead, stat band, materials chips,
   inclusions list, charcoal price panel); the photo column is a sticky
   rail: photo tile over the Special Offer panel (relocated there by
   the loader — it was a second display-scale band under the h1).
   ------------------------------------------------------------------ */
.single-roll_off_dumpster .pg-product {
  background: #fbfafa;
}
/* Bootstrap's .align-items-center carries !important: with centred
   columns the short photo floated against the tall sheet. Stretch
   gives the rail column the sheet's height so the rail can ride
   sticky beside it. */
.single-roll_off_dumpster .pg-product .row {
  align-items: stretch !important; /* .align-items-center */
}
@media (min-width: 992px) {
  /* The sheet is the denser column: 7-ish/5-ish over .col-lg-6's 50/50. */
  .single-roll_off_dumpster .pg-product .row > .order-lg-1 {
    width: 57%;
  }
  .single-roll_off_dumpster .pg-product .row > .order-lg-2 {
    width: 43%;
  }
  .single-roll_off_dumpster .pg-rail {
    position: sticky;
    top: 1.5rem;
  }
}

/* The spec sheet. */
.single-roll_off_dumpster .bg-light.border {
  background-color: #fff !important; /* .bg-light */
  border: 0 !important; /* .border */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.12);
  padding: 2.25rem 2.25rem 2rem !important; /* .p-3 .p-lg-4 */
}
/* Left-aligned sheet: the captured card centred its h2 over
   left-aligned lists. !important: .text-center. */
.single-roll_off_dumpster #main .bg-light.border h2 {
  text-align: left !important; /* .text-center */
  margin-bottom: 1.25rem !important; /* .mb-4 */
}
/* Outranks the content kit's centred-tick variant for h2.text-center. */
.single-roll_off_dumpster #main .bg-light.border h2.text-center::after {
  margin-left: 0;
  margin-right: 0;
}
/* The .u-sub loses the theme's 1px rules and green, and reads as the
   tracked sub-line between the name and the tick. */
.single-roll_off_dumpster .bg-light.border h2 .u-sub {
  border: 0;
  padding: 0;
  margin-top: 0.375rem;
  font: 500 0.875rem / 1.4 "DM Sans", sans-serif;
  letter-spacing: 0.14em;
  color: #5a5a5a;
}
.single-roll_off_dumpster .bg-light.border > .lead {
  max-width: 60ch;
  margin-bottom: 0;
}
.single-roll_off_dumpster #main .bg-light.border h3.h4 {
  font: 500 1.0625rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #191919;
  margin: 0 0 0.375rem;
}
/* Spec glyphs are gold marks. !important: .text-secondary. */
.single-roll_off_dumpster #main .bg-light.border h3.h4 i.fas {
  color: #edb200 !important;
  margin-right: 0.25rem;
}
.single-roll_off_dumpster .bg-light.border .my-4 {
  margin-top: 1.375rem !important;
  margin-bottom: 1.375rem !important;
}

/* At-a-glance stat band (loader-injected .home-fact-row variant). */
.single-roll_off_dumpster .pg-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: #f3f1ee;
  border-radius: 12px;
}
.single-roll_off_dumpster .pg-stats strong {
  font-size: 1.3125rem;
}
.single-roll_off_dumpster .pg-stats span {
  max-width: none;
}

/* Usage list as material chips (the group is identified by its
   captured hard-hat glyph). */
.single-roll_off_dumpster .my-4:has(.fa-hard-hat) .dump-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0.625rem 0 0;
}
.single-roll_off_dumpster .my-4:has(.fa-hard-hat) .dump-list ul li {
  margin: 0;
  padding: 0.4375rem 0.875rem;
  background: #f3f1ee;
  border-radius: var(--btn-radius);
  font: 500 0.9375rem / 1.2 "DM Sans", sans-serif;
  color: #191919;
}
.single-roll_off_dumpster .my-4:has(.fa-hard-hat) .dump-list ul li::before,
.single-roll_off_dumpster .my-4:has(.fa-hard-hat) .dump-list ul li::after {
  display: none; /* chips need no gold-dot marker */
}

/* Inclusions checklist: kill the double indent (browser ul padding +
   the theme's 2rem Font Awesome Pro clearance on each li). */
.single-roll_off_dumpster .dump-list ul {
  padding-left: 0;
  margin: 0.375rem 0 0;
}
.single-roll_off_dumpster .dump-list ul li {
  padding-left: 1.375rem;
}
.single-roll_off_dumpster .dump-list ul li::before {
  left: 0.125rem;
}

/* Price panel: the captured Pricing group and the ask, fused on
   charcoal at the sheet's foot. */
.single-roll_off_dumpster .pg-price-panel {
  background: linear-gradient(180deg, #202020, #191919);
  border-radius: 12px;
  padding: 1.5rem 1.625rem;
  margin-top: 1.75rem;
  box-shadow: 0 4px 10px rgba(25, 25, 25, 0.12), 0 18px 36px rgba(25, 25, 25, 0.2);
}
/* !important both ways: the sheet's .my-4 spacing rule above carries it. */
.single-roll_off_dumpster .pg-price-panel .my-4 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.single-roll_off_dumpster #main .pg-price-panel h3.h4 {
  color: #fbfafa;
}
.single-roll_off_dumpster .pg-price-panel .dump-p {
  padding-left: 0; /* the theme's 2rem FA Pro clearance points at nothing */
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.single-roll_off_dumpster .pg-price-panel .home-actions {
  margin-top: 1.125rem;
  gap: 0.75rem 1rem;
}

/* The rail: photo tile + Special Offer panel. */
.single-roll_off_dumpster .pg-rail {
  display: grid;
  gap: 1.25rem;
}
.single-roll_off_dumpster .pg-rail img.wp-post-image {
  width: 100%;
  height: auto;
  margin-bottom: 0 !important; /* .mb-4 */
  border-radius: 8px; /* image tile */
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.08), 0 14px 32px rgba(25, 25, 25, 0.14);
}
.single-roll_off_dumpster .pg-offer-panel {
  background: #f3f1ee;
  border-radius: 12px;
  padding: 1.5rem 1.625rem;
}
.single-roll_off_dumpster .pg-offer-panel .container {
  max-width: none;
  padding: 0;
  text-align: left !important; /* .text-center */
}
/* The "Special Offer" kicker as the standard light-ground eyebrow.
   !important: .text-secondary. */
.single-roll_off_dumpster .pg-offer-panel .sub-heading {
  display: block;
  font: 500 0.8125rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #191919 !important;
  margin: 0 0 0.5rem;
  width: max-content;
  padding-left: calc(20px + 0.625rem);
  background: linear-gradient(#edb200, #edb200) 0 50% / 20px 2px no-repeat;
}
.single-roll_off_dumpster .pg-offer-title {
  font: 600 1.1875rem / 1.35 Oswald, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #191919;
  margin: 0 0 0.875rem;
}

/* Product pages, mobile: the rail stacks over the sheet (captured
   order-1/order-2); panel and sheet tighten; the price-panel pair goes
   full width for thumbs. */
@media (max-width: 991.98px) {
  .single-roll_off_dumpster .pg-rail {
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .single-roll_off_dumpster .pg-offer-panel {
    padding: 1.25rem 1.25rem 1.375rem;
  }
  .single-roll_off_dumpster .pg-price-panel {
    padding: 1.25rem 1.125rem 1.375rem;
  }
  .single-roll_off_dumpster .pg-price-panel .home-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .single-roll_off_dumpster .pg-price-panel .home-actions .btn {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .single-roll_off_dumpster .pg-stats {
    grid-template-columns: 1fr;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
  }
}

/* ------------------------------------------------------------------
   14. Roll-off page: the four photo cards (.pg-dumpsters, stamped).
   The .dumpster-hover chassis comes from the kit; the photos run
   edge-to-edge instead of the home cut-outs' stone tile.
   ------------------------------------------------------------------ */
/* Off-white band, as home's fleet section. */
.pg-dumpsters {
  background: #fbfafa;
}
.pg-dumpsters .row {
  align-items: stretch !important; /* .align-items-center */
}
.pg-dumpsters .row > * {
  display: flex;
}
.pg-dumpsters .dumpster-hover {
  width: 100%;
}
.pg-dumpsters .dumpster-hover img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  padding: 0;
  background: #f3f1ee;
}
/* #main prefix: outranks the inner content kit's h3 rule, which also
   reaches into this .d-p > .container-xl section. */
#main .pg-dumpsters .dumpster-hover h3 {
  font: 600 1.1875rem / 1.2 Oswald, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #191919;
  margin: 0;
}
.pg-dumpsters .dumpster-hover a.stretched-link {
  margin-top: 0.5rem;
}
/* Narrow desktop (992–1199): four-up cards are ~220px inside; the
   nowrap CTA label needs the smaller cut. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #main .pg-dumpsters .dumpster-cta {
    font-size: 0.875rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* ------------------------------------------------------------------
   15. Materials page intro fine print.
   ------------------------------------------------------------------ */
.pg-materials .text-center.mb-4 > p:not(.lead) {
  font-size: 0.9375rem;
  color: #5a5a5a;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   16. Form pages: contact, free quote, employment. Off-white ground,
   the form on a white card.
   ------------------------------------------------------------------ */
:is([data-page="contact"], [data-page="free-quote"], [data-page="employment"]) #main {
  background: #fbfafa;
}
:is([data-page="contact"], [data-page="free-quote"], [data-page="employment"]) #main .container.d-p .gform_wrapper {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.12);
  padding: 1.75rem 1.75rem 1.5rem;
}
/* Fields on the white card need the ring to carry the edge. */
:is([data-page="contact"], [data-page="free-quote"], [data-page="employment"]) #main .gform_wrapper .form-control,
:is([data-page="contact"], [data-page="free-quote"], [data-page="employment"]) #main .gform_wrapper .form-select {
  box-shadow: inset 0 0 0 1px rgba(25, 25, 25, 0.18);
}
:is([data-page="contact"], [data-page="free-quote"], [data-page="employment"]) #main .gform_wrapper label,
:is([data-page="contact"], [data-page="free-quote"], [data-page="employment"]) #main .gform_wrapper legend {
  color: #191919;
}
[data-page="free-quote"] #main .container.d-p,
[data-page="employment"] #main .container.d-p {
  max-width: 880px;
}
/* The h2 already opens with the kit tick; the captured <hr> under the
   employment intro would double it. */
[data-page="employment"] #main .container.d-p hr {
  display: none;
}
/* Contact: the info card sheds its 1px border for the card kit. */
[data-page="contact"] .border.bg-light {
  background-color: #fff !important; /* .bg-light */
  border: 0 !important; /* .border */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.12);
  padding: 1.75rem 1.5rem !important; /* .py-4 .px-3 */
}
[data-page="contact"] #main .border.bg-light h3 {
  font-size: 1rem;
  margin: 0 0 0.375rem;
}
[data-page="contact"] .border.bg-light h3 i.fas {
  color: #edb200 !important; /* .text-secondary: marks, not text */
}
[data-page="contact"] .border.bg-light address,
[data-page="contact"] .border.bg-light .table {
  font-size: 0.9375rem;
  color: #373737;
  margin-bottom: 0;
}
[data-page="contact"] .border.bg-light .table th {
  font-weight: 600;
  color: #191919;
  padding-left: 0;
}
[data-page="contact"] .border.bg-light .mt-4 {
  margin-top: 1.25rem !important;
}
/* The map keeps the .ratio frame kit (12px, shadow); just drop the
   captured 1px border. */
[data-page="contact"] .ratio.border {
  border: 0 !important;
}

/* ------------------------------------------------------------------
   17. About page.
   ------------------------------------------------------------------ */
[data-page="about-us"] .container.d-p .home-fact-row {
  margin: 1.5rem 0 1.75rem;
}
[data-page="about-us"] .container.d-p .home-actions {
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------------
   18. FAQs: the accordion as a stack of cards.
   ------------------------------------------------------------------ */
[data-page="faqs"] .accordion {
  max-width: 880px;
  margin: 0 auto;
}
[data-page="faqs"] .accordion-item {
  border: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(25, 25, 25, 0.05), 0 6px 16px rgba(25, 25, 25, 0.08);
}
[data-page="faqs"] .accordion-button {
  font: 600 1rem / 1.45 "DM Sans", sans-serif;
  color: #191919;
  background: #fff;
  padding: 1.0625rem 1.25rem;
  box-shadow: none;
}
/* Open state: a gold inset mark instead of the theme's red wash. */
[data-page="faqs"] .accordion-button:not(.collapsed) {
  color: #191919;
  background: #fff;
  box-shadow: inset 3px 0 0 #edb200;
}
[data-page="faqs"] .accordion-button:focus {
  box-shadow: inset 0 0 0 2px rgba(237, 178, 0, 0.6);
}
[data-page="faqs"] .accordion-button:not(.collapsed):focus {
  box-shadow: inset 3px 0 0 #edb200, inset 0 0 0 2px rgba(237, 178, 0, 0.6);
}
/* Near-black chevron in both states (the theme's open state is red). */
[data-page="faqs"] .accordion-button::after,
[data-page="faqs"] .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23191919'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-page="faqs"] .accordion-body {
  padding: 0 1.25rem 1.125rem;
}
[data-page="faqs"] #main .accordion-body.lead,
[data-page="faqs"] #main .accordion-body.lead p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: #373737;
  margin-bottom: 0;
}
[data-page="faqs"] #main {
  background: #fbfafa;
}

/* ------------------------------------------------------------------
   19. Gallery: the float grid becomes a real grid of 8px photo tiles.
   The [data-page] prefix outranks the NextGEN plugin styles, which
   load after this inlined sheet.
   ------------------------------------------------------------------ */
[data-page="gallery"] .ngg-galleryoverview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
[data-page="gallery"] .ngg-gallery-thumbnail-box {
  float: none;
  margin: 0;
  width: auto;
}
[data-page="gallery"] .ngg-gallery-thumbnail {
  float: none;
  margin: 0;
  border: 0;
  width: 100%;
}
[data-page="gallery"] .ngg-gallery-thumbnail a {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.08), 0 10px 22px rgba(25, 25, 25, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-page="gallery"] .ngg-gallery-thumbnail a:hover,
[data-page="gallery"] .ngg-gallery-thumbnail a:focus {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(25, 25, 25, 0.1), 0 18px 36px rgba(25, 25, 25, 0.2);
}
[data-page="gallery"] .ngg-gallery-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 0;
  padding: 0;
  margin: 0;
}

/* ------------------------------------------------------------------
   20. Reviews page: the note cards in a masonry-ish column flow.
   (This page has no <main>; scoped to its captured body class.)
   ------------------------------------------------------------------ */
.post-type-archive-review .site-content {
  background: #fbfafa;
}
.post-type-archive-review section.container.d-p {
  max-width: 1200px;
}
@media (min-width: 768px) {
  .post-type-archive-review section.container.d-p {
    column-count: 2;
    column-gap: 1.5rem;
  }
}
@media (min-width: 1200px) {
  .post-type-archive-review section.container.d-p {
    column-count: 3;
  }
}
.post-type-archive-review .note-card {
  break-inside: avoid;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.12);
  padding: 1.5rem 1.5rem 1.375rem;
  margin-bottom: 1.5rem !important; /* .mb-3 */
}
.post-type-archive-review .note-card h3 {
  font: 600 1.0625rem / 1.2 Oswald, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #191919;
  margin: 0 0 0.375rem;
}
.post-type-archive-review .note-card .mb-2 {
  margin-bottom: 0.5rem !important;
}
.post-type-archive-review .note-card .fa-star {
  font-size: 0.875rem;
  margin-right: 0.125rem;
}
.post-type-archive-review .note-card p {
  font-size: 1rem;
  line-height: 1.65;
  color: #373737;
  margin: 0;
}

/* ------------------------------------------------------------------
   21. Legal pages: quiet and readable.
   ------------------------------------------------------------------ */
:is([data-page="privacy-policy"], [data-page="service-agreement"]) #main .container.d-p {
  max-width: 840px;
}
[data-page="privacy-policy"] #main .container.d-p h2:where(:not([class*="display-"])) {
  font-size: 1.375rem;
  margin: 2.25rem 0 0.75rem;
}
[data-page="privacy-policy"] #main .container.d-p h2:where(:not([class*="display-"]))::after {
  width: 24px;
  height: 2px;
  margin-top: 0.5rem;
}
[data-page="privacy-policy"] #main .container.d-p h3:not([class*="display-"]) {
  font-size: 1.125rem;
}
[data-page="privacy-policy"] #main .container.d-p h4 {
  font: 600 1rem / 1.4 "DM Sans", sans-serif;
  color: #191919;
  margin: 1.25rem 0 0.375rem;
}
/* The captured contact block reuses the footer's white-on-dark markup
   on this white page; both carry the .text-white utility. */
[data-page="privacy-policy"] #main .container.d-p .text-white {
  color: #191919 !important; /* .text-white */
}
[data-page="privacy-policy"] #main .container.d-p .phone-num {
  color: #298253;
  font-weight: 600;
  text-decoration: none;
}

/* ------------------------------------------------------------------
   22. Inner pages, mobile.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  body:not(.home) #content .jumbotron {
    padding: 2.5rem 0 2.25rem;
  }
  .pg-header-actions {
    margin-top: 1.25rem;
  }
  .pg-header-actions .btn {
    flex: 1 1 0;
    max-width: 16rem;
  }
  .single-roll_off_dumpster .bg-light.border {
    padding: 1.375rem 1.25rem !important; /* .p-3 */
  }
  :is([data-page="contact"], [data-page="free-quote"], [data-page="employment"]) #main .container.d-p .gform_wrapper {
    padding: 1.25rem 1rem 1.125rem;
  }
  [data-page="gallery"] .ngg-galleryoverview {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
  [data-page="about-us"] .home-actions .btn,
  .pg-offer .home-actions .btn {
    width: 100%;
    max-width: 20rem;
  }
  .pg-offer .home-actions {
    flex-direction: column;
    gap: 0.875rem;
  }
}

/* Roll-off photo cards two-up on tablets. (Was 380px for the bare
   name-only cards; with the spec and fit lines a 170px card wraps every
   word, so small phones get one full-width card per size.) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .pg-dumpsters .row.gy-4 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }
  .pg-dumpsters .row.gy-4 > * {
    width: 50%;
  }
  .pg-dumpsters .dumpster-hover {
    padding: 0.75rem 0.75rem 1rem;
  }
  #main .pg-dumpsters .dumpster-hover h3 {
    font-size: 1rem;
  }
  .pg-dumpsters .dumpster-hover a.stretched-link {
    font-size: 0.75rem;
  }
  #main .pg-dumpsters .dumpster-cta {
    font-size: 0.8125rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* ------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root #main .btn,
  :root .dumpster-cta,
  :root #main .card,
  :root .dumpster-hover,
  :root .dumpster-hover img,
  .home-textlink,
  :root .mobile-cta-bar,
  [data-page="gallery"] .ngg-gallery-thumbnail a {
    transition: none !important;
    transform: none !important;
  }
}

/* ==================================================================
   Generated pages — the block vocabulary used by lib/blocks.ts.

   These pages emit the captured site's own hooks wherever one exists
   (.page-header.jumbotron, .d-p, .home-eyebrow, .home-h2,
   .home-fact-row, .home-textlink, .footer-cta), so most of their look
   comes from pages.css for free. What follows styles only the blocks
   that have no captured equivalent.
   ================================================================== */

/* --- Section grounds and rhythm ------------------------------------ */
.pg-generated #main > .d-p {
  background: #fff;
  padding: 3.5rem 0;
}
.pg-generated #main > .d-p.pg-alt {
  background: #fbfafa;
}

/* The lead under a section heading. */
.pg-generated .pg-lead {
  max-width: 68ch;
  margin: 0.875rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #373737;
}

/* --- Prose --------------------------------------------------------- */
.pg-generated .pg-prose {
  max-width: 68ch;
  margin-top: 1.5rem;
}
.pg-generated .pg-prose p {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #373737;
}
.pg-generated .pg-prose p:last-child {
  margin-bottom: 0;
}
.pg-generated .pg-prose strong {
  color: #191919;
  font-weight: 600;
}

/* --- Card grid ----------------------------------------------------- */
.pg-generated .pg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.pg-generated .pg-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.375rem 1.5rem 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pg-generated .d-p.pg-alt .pg-card {
  background: #fff;
}
.pg-generated .pg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(25, 25, 25, 0.08), 0 20px 40px rgba(25, 25, 25, 0.16);
}
.pg-generated .pg-card h3 {
  margin: 0;
  font: 600 1.125rem / 1.25 Oswald, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #191919;
}
.pg-generated .pg-card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #5a5a5a;
  flex: 1;
}
.pg-generated .pg-card .home-textlink {
  margin-top: 0.375rem;
  align-self: flex-start;
}

/* --- Gold-dot lists ------------------------------------------------ */
.pg-generated .pg-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.625rem 2rem;
  max-width: 900px;
}
.pg-generated .pg-list li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #373737;
}
.pg-generated .pg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #edb200;
}
.pg-generated .pg-subhead {
  margin: 2rem 0 0;
  font: 600 1.0625rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #191919;
}

/* --- Tables -------------------------------------------------------- */
.pg-generated .pg-table-wrap {
  margin-top: 1.75rem;
  overflow-x: auto;
}
.pg-generated .pg-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.1);
}
.pg-generated .pg-table th {
  text-align: left;
  padding: 0.875rem 1.125rem;
  background: linear-gradient(180deg, #202020, #191919);
  color: #fbfafa;
  font: 500 0.75rem / 1.2 Oswald, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pg-generated .pg-table td {
  padding: 0.875rem 1.125rem;
  border-top: 1px solid rgba(25, 25, 25, 0.08);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #373737;
  vertical-align: top;
}
.pg-generated .pg-table tr:first-child td {
  border-top: 0;
}
.pg-generated .pg-table td:first-child {
  font-weight: 600;
  color: #191919;
}

/* --- Numbered steps ------------------------------------------------ */
.pg-generated .pg-steps {
  counter-reset: step;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.pg-generated .pg-steps li {
  counter-increment: step;
  position: relative;
  padding: 1.375rem 1.5rem 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.1);
}
/* The order is the information here — these are sequential job stages. */
.pg-generated .pg-steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.625rem;
  border-radius: 50%;
  background: #edb200;
  color: #191919;
  font: 600 0.875rem / 1 Oswald, sans-serif;
}
.pg-generated .pg-steps h3 {
  margin: 0 0 0.375rem;
  font: 600 1.0625rem / 1.25 Oswald, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #191919;
}
.pg-generated .pg-steps p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #5a5a5a;
}

/* --- FAQ ----------------------------------------------------------- */
.pg-generated .pg-faq {
  margin-top: 0.5rem;
  max-width: 900px;
}
.pg-generated .pg-faq-item {
  padding: 1.375rem 0;
  border-bottom: 1px solid rgba(25, 25, 25, 0.1);
}
.pg-generated .pg-faq-item:last-child {
  border-bottom: 0;
}
.pg-generated .pg-faq-item h3 {
  margin: 0 0 0.5rem;
  font: 600 1.125rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.02em;
  color: #191919;
}
.pg-generated .pg-faq-item p {
  margin: 0;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
  color: #373737;
}

/* --- Related links ------------------------------------------------- */
.pg-generated .pg-related ul {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.pg-generated .pg-related li a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border-radius: var(--btn-radius);
  box-shadow: 0 1px 3px rgba(25, 25, 25, 0.08), 0 6px 16px rgba(25, 25, 25, 0.08);
  font-size: 0.9375rem;
  color: #191919;
  text-decoration: none;
  transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pg-generated .pg-related li a:hover,
.pg-generated .pg-related li a:focus {
  color: #ba2525;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.1), 0 10px 22px rgba(25, 25, 25, 0.14);
}

/* --- Service-area columns on the hub ------------------------------- */
.pg-generated .pg-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 1.75rem;
}
.pg-generated .pg-area-col h3 {
  margin: 0 0 0.75rem;
  font: 600 0.9375rem / 1.2 Oswald, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #191919;
}
.pg-generated .pg-area-col h3::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin-top: 0.4375rem;
  border-radius: 2px;
  background: #edb200;
}
.pg-generated .pg-area-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-generated .pg-area-col li {
  padding: 0.1875rem 0;
}
.pg-generated .pg-area-col a {
  font-size: 0.9375rem;
  color: #373737;
  text-decoration: none;
  transition: color 0.15s ease;
}
.pg-generated .pg-area-col a:hover,
.pg-generated .pg-area-col a:focus {
  color: #ba2525;
}

/* --- The in-page CTA band ------------------------------------------ */
/* .footer-cta styling comes from footer.css; this only stops the page
   band inheriting the footer band's own room-edge shadow. */
.pg-generated #main .footer-cta.pg-cta {
  box-shadow: none;
}

@media (max-width: 767.98px) {
  .pg-generated #main > .d-p {
    padding: 2.5rem 0;
  }
  .pg-generated .pg-list {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   Link bands added to the CAPTURED hub pages (/materials/,
   /demolition/, /roll-off-dumpsters/, the transfer station, home).
   Those pages do not carry .pg-generated, so the rules above miss
   them — these repeat the pieces the bands actually use.
   ------------------------------------------------------------------ */
.pg-generated-band {
  background: #fbfafa;
  padding: 3rem 0;
}
.pg-generated-band .pg-related ul {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.pg-generated-band .pg-related li a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border-radius: var(--btn-radius);
  box-shadow: 0 1px 3px rgba(25, 25, 25, 0.08), 0 6px 16px rgba(25, 25, 25, 0.08);
  font-size: 0.9375rem;
  color: #191919;
  text-decoration: none;
  transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pg-generated-band .pg-related li a:hover,
.pg-generated-band .pg-related li a:focus {
  color: #ba2525;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.1), 0 10px 22px rgba(25, 25, 25, 0.14);
}
/* The band sits inside #main on the homepage, whose flex order rules
   would otherwise float it to the top. */
.home #main > .pg-generated-band {
  order: 11;
}

/* ==========================================================================
   sarnagoandsonsdemolition.com — this site's own layer.

   Everything before this file (overrides / footer / pages / generated) is the
   shared Sarnago design system, carried over unchanged from the recycling
   site. Only what is genuinely new to the demolition site belongs here, so the
   two sites can keep taking each other's fixes.
   ========================================================================== */

/* --- Licence notice ------------------------------------------------------
   Replaces the recycling site's "Now Hiring" marquee in the same slot at the
   foot of the header. Demolition buyers check the licence before anything
   else, so the credential goes above the fold on every page. */

#licence-notice {
  background: #1b3a2f;
  border-top: 4px solid #f4b400;
  border-bottom: 4px solid #f4b400;
  padding: 7px 12px;
}

.licence-notice-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.35;
  text-align: center;
}

.licence-notice-label {
  color: #1b3a2f;
  background: #f4b400;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.8px;
  padding: 2px 9px;
  border-radius: 3px;
  flex: none;
}

.licence-notice-cta {
  color: #f4b400;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 180, 0, 0.45);
}

.licence-notice-cta:hover,
.licence-notice-cta:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
}

/* On phones the sentence is too long to read at a glance; the credential is
   the part that matters, so the supporting text goes and the ask stays. */
@media (max-width: 575.98px) {
  .licence-notice-text {
    font-size: 13px;
  }
  .licence-notice-text .lic-extra {
    display: none;
  }
}

/* --- Callout panel -------------------------------------------------------
   New block: the "read this first" note. Permits, asbestos, the 50% rule —
   demolition has several of these and they need to stop the eye. */

.pg-note {
  border-left: 4px solid #f4b400;
  background: #f7f6f3;
  padding: 20px 24px;
  margin: 32px 0;
  border-radius: 0 4px 4px 0;
}

.pg-note h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 8px;
}

.pg-note p {
  margin: 0;
}

.pg-alt .pg-note {
  background: #fff;
}

/* --- Service-area index --------------------------------------------------
   The /service-areas/ hub lists 33 cities. A card grid at that count is a
   wall; a dense column list is scannable and keeps the internal links close
   together, which is the point of the page. */

.pg-area-grid {
  columns: 4 190px;
  column-gap: 32px;
  margin-top: 8px;
}

.pg-area-group {
  break-inside: avoid;
  margin-bottom: 26px;
}

.pg-area-group h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #6b6b6b;
  border-bottom: 1px solid #e2e0db;
  padding-bottom: 6px;
  margin: 0 0 10px;
}

.pg-area-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pg-area-group li + li {
  margin-top: 5px;
}

.pg-area-group a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
}

.pg-area-group a:hover,
.pg-area-group a:focus-visible {
  color: #b81f24;
  border-bottom-color: currentColor;
}

/* --- Price table ---------------------------------------------------------
   Every service page carries one. The middle column is the number people came
   for, so it gets the weight. */

.pg-table td:nth-child(2) {
  font-weight: 700;
  white-space: nowrap;
}

.pg-price-note {
  font-size: 0.9rem;
  color: #6b6b6b;
  margin-top: 12px;
}

/* --- Two-column list -----------------------------------------------------
   "What's included" beside "what changes the price". Both are scan lists and
   neither deserves a full-width row on its own. */

.pg-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 48px;
}

.pg-split > div > h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* --- Gallery grid --------------------------------------------------------
   The gallery page (pages/core.ts). Uniform crops so a camera-roll mix of
   portrait and landscape shots reads as one wall, not a ransom note. */

.pg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 32px;
}

.pg-gallery figure {
  margin: 0;
}

.pg-gallery img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
}

/* --- Contact map ---------------------------------------------------------
   The embedded map on the contact page. */

.pg-map {
  margin-top: 32px;
}

.pg-map iframe {
  display: block;
  width: 100%;
  border-radius: 4px;
}

/* --- Forms ---------------------------------------------------------------
   The quote, contact and employment forms. Dormant until FORM_ENDPOINT in
   lib/pages/core.ts points at a real handler — until then the submit composes
   a pre-filled email — but styled as the real thing, because the page has to
   look like it takes the enquiry either way. */

.pg-form {
  margin: 0;
  /* Anchor target from the band and the mobile bar; keep it clear of the
     sticky header. */
  scroll-margin-top: 6rem;
}

.pg-form-field {
  margin: 0 0 1rem;
}

.pg-form-field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: #191919;
}

/* Most fields are required, so the exceptions get the marker, not the rule.
   "(optional)" beside a label raises completion more than an asterisk beside
   every other one: it says how little is being asked. */
.pg-form-opt {
  font-weight: 400;
  color: #6b6b6b;
}

/* Name and phone share a row from tablet up so the card stays short enough
   for the submit to sit above the fold. minmax(0, …) so a long autofill
   value cannot push the grid wider than the card. */
.pg-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 1rem;
}

@media (min-width: 576px) {
  .pg-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Controls. The 16px floor is not a taste decision: iOS zooms the page on
   focus for anything smaller, and the visitor comes back from the keyboard to
   a viewport that has drifted sideways. */
#main .pg-form input,
#main .pg-form textarea,
#main .pg-form select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid rgb(25 25 25 / 0.22);
  border-radius: 8px;
  background: #fff;
  color: #191919;
  font: 400 max(1rem, 16px) / 1.4 "DM Sans", sans-serif;
  box-shadow: inset 0 1px 2px rgb(25 25 25 / 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#main .pg-form input,
#main .pg-form textarea {
  -webkit-appearance: none;
  appearance: none;
}

#main .pg-form textarea {
  min-height: 6rem;
  line-height: 1.5;
  resize: vertical;
}

/* The select keeps its native arrow; drawing one costs an asset. */
#main .pg-form select {
  padding-right: 2.25rem;
}

#main .pg-form input:hover,
#main .pg-form textarea:hover,
#main .pg-form select:hover {
  border-color: rgb(25 25 25 / 0.4);
}

/* Focus is the site's gold ring, drawn as a shadow so it hugs the radius
   instead of boxing it. Outline is dropped here only — every link and button
   keeps the shared ring. */
#main .pg-form input:focus,
#main .pg-form textarea:focus,
#main .pg-form select:focus {
  outline: 0;
  border-color: #edb200;
  box-shadow: 0 0 0 3px rgb(237 178 0 / 0.35);
}

/* No placeholders anywhere: a label that vanishes on the first keystroke is
   not a label, and grey example text fails contrast. Hints go under the
   field, where they survive being typed into. */
.pg-form-help {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #6b6b6b;
}

/* Errors only once the visitor has actually been in the field. :user-invalid,
   not :invalid — the latter paints every required field red on page load.
   Kept in their own rules because a browser lacking the pseudo-class drops
   the whole selector list it appears in. */
#main .pg-form input:user-invalid,
#main .pg-form textarea:user-invalid,
#main .pg-form select:user-invalid {
  border-color: #ba2525;
}

#main .pg-form input:user-invalid:focus,
#main .pg-form textarea:user-invalid:focus,
#main .pg-form select:user-invalid:focus {
  border-color: #ba2525;
  box-shadow: 0 0 0 3px rgb(186 37 37 / 0.25);
}

.pg-form-err {
  display: none;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
  color: #ba2525;
}

.pg-form input:user-invalid ~ .pg-form-err,
.pg-form textarea:user-invalid ~ .pg-form-err,
.pg-form select:user-invalid ~ .pg-form-err {
  display: block;
}

/* The honeypot. Positioned off-canvas rather than display:none, because the
   bots worth stopping skip hidden fields. Out of the tab order and
   aria-hidden, so a screen reader never lands on it. */
.pg-form-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit. Red, because the site already made the rule: red is the quote and
   the submit, green is a phone number and nothing else. Full width and taller
   than the shared button so it is the largest thing on the card. */
#main .pg-form .pg-form-submit {
  width: 100%;
  min-height: 56px;
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
}

#main .pg-form .pg-form-submit:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgb(186 37 37 / 0.35);
}

/* The line under the button is what a hesitating visitor reads last. */
.pg-form-assure {
  margin: 0.875rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #5a5a5a;
}

/* Written in by the lead-form script (@sarnago/leads/client). A failed send
   sits above the fields, which still hold what was typed. */
.lead-form-status {
  border: 1px solid #ba2525;
  border-left-width: 4px;
  background: #fbfafa;
  color: #191919;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: 4px;
}

/* Replaces the form once the lead is in. */
.lead-form-done {
  border: 1px solid #298253;
  border-left-width: 4px;
  background: #fbfafa;
  color: #373737;
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
}

.lead-form-done:focus {
  outline: none;
}

.lead-form-done p {
  margin: 0;
}

.lead-form-done .lead-form-done-title {
  color: #191919;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

#main .pg-form .pg-form-submit[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* --- Lead form section ---------------------------------------------------
   The form card on /free-quote/, /contact/ and /employment/. It sits directly
   under the title band and pulls up into it, so the first field is on screen
   before anyone scrolls. A form three sections down is a footnote, and it is
   the only channel on the site that leaves a written record.

   Card left, phone panel right: the phone books the visit on the same call, so
   it stays in view while the form leads. Below 992px the panel drops under the
   card — form first, because a phone user already has the sticky call bar. */

.d-p.pg-lead-form {
  padding-top: 0;
  padding-bottom: 3.5rem;
  background: #fbfafa;
}

/* Room in the band for the overlap, and a shorter band above it. The header
   stack already costs 168px before the band starts; trimming the band's own
   top padding is what gets the first field on screen on a 768px laptop.
   Progressive: without :has() the card still pulls up, just closer to the
   band's sub-line. */
#content .jumbotron:has(+ .d-p.pg-lead-form) {
  padding-top: 2rem;
  padding-bottom: 5.25rem;
}

.pg-lead-grid {
  /* Above the band's scrim, which is a positioned ::after. */
  position: relative;
  z-index: 2;
  margin-top: -3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem 3rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .pg-lead-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
}

/* The card. Red top rule so it reads as the ask, the same signal the header
   button carries; the shadow is heavier than a normal card because this one
   lifts off a photograph rather than a white page. position:relative anchors
   the off-canvas honeypot. */
.pg-lead-card {
  position: relative;
  padding: 1.5rem 2rem 1.5rem;
  background: #fff;
  border-top: 4px solid #ba2525;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgb(25 25 25 / 0.08), 0 24px 48px rgb(25 25 25 / 0.18);
}

.pg-lead-card-title {
  margin: 0 0 0.375rem;
  font: 600 clamp(1.5rem, 1.2rem + 1vw, 1.875rem) / 1.1 Oswald, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #191919;
}

.pg-lead-card-sub {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5a5a5a;
}

/* The panel is text on the tinted ground, not a second box — one card per
   section, or nothing reads as the card. The top padding clears the pull-up so
   the copy starts below the photograph rather than on it. */
.pg-lead-aside {
  padding-top: 3.75rem;
}

@media (max-width: 991.98px) {
  .pg-lead-aside {
    padding-top: 0;
  }
}

.pg-lead-aside h3 {
  margin: 0 0 0.75rem;
  font: 600 1.375rem / 1.15 Oswald, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #191919;
}

/* The phone as a button at display size. */
#main .pg-lead-aside .pg-lead-tel {
  width: 100%;
  min-height: 54px;
  margin: 0 0 1rem;
  font: 600 1.375rem / 1 Oswald, sans-serif;
  letter-spacing: 0.04em;
}

.pg-lead-meta {
  display: grid;
  gap: 0.375rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #373737;
}

.pg-lead-meta strong {
  display: inline-block;
  min-width: 3.5rem;
  font-weight: 600;
  color: #191919;
}

/* The email and the address are long; they may break rather than push the
   column sideways. */
.pg-lead-meta a {
  color: #191919;
  text-decoration: underline;
  text-decoration-color: rgb(25 25 25 / 0.35);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.pg-lead-meta a:hover,
.pg-lead-meta a:focus-visible {
  color: #ba2525;
  text-decoration-color: currentColor;
}

/* The trust bullets: what the facts row used to say, moved next to the form
   that needs it said. */
.pg-lead-points {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid #e2e0db;
  list-style: none;
}

.pg-lead-points li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #373737;
}

.pg-lead-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #edb200;
}

/* Phones: less card padding so the fields keep their width, and a shallower
   overlap because the band is shorter. */
@media (max-width: 575.98px) {
  .pg-lead-grid {
    margin-top: -2rem;
  }

  .pg-lead-card {
    padding: 1.375rem 1.125rem 1.25rem;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main .pg-form input,
  #main .pg-form textarea,
  #main .pg-form select,
  #main .pg-form .pg-form-submit,
  #main .pg-lead-aside .pg-lead-tel {
    transition: none;
    transform: none;
  }
}


/* --- Location NAP block --------------------------------------------------
   The name/address/phone on a Google Business Profile landing page has to be
   readable as a unit and has to match the listing character for character.
   Giving it its own panel keeps it from being edited casually as prose. */

.pg-nap {
  border: 1px solid #e2e0db;
  border-left: 4px solid #b81f24;
  background: #fff;
  padding: 20px 24px;
  margin: 28px 0;
  border-radius: 0 4px 4px 0;
  display: grid;
  gap: 4px;
}

.pg-alt .pg-nap {
  background: #f7f6f3;
}

.pg-nap p {
  margin: 0;
}

.pg-nap-addr {
  font-size: 1.05rem;
  line-height: 1.5;
}

.pg-nap-tel a {
  font-family: Oswald, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: #b81f24;
}

.pg-nap-tel a:hover,
.pg-nap-tel a:focus-visible {
  text-decoration: underline;
}

.pg-nap-hours {
  font-size: 0.92rem;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}


/* --- Interior-page photography -------------------------------------------
   The interior templates carry one captioned photo per page (photoFigure in
   lib/blocks.ts). Full container width on purpose: a 16:9 photo cropped into
   a thumbnail stops being proof and becomes decoration. */

.pg-figure {
  margin: 32px 0 8px;
}

.pg-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.pg-figure figcaption {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #6b6b6b;
}

/* --- Mid-page ask ---------------------------------------------------------
   inlineCta in lib/blocks.ts. Long interior pages had exactly two conversion
   points — the band at the top and the footer CTA — with several screens of
   text between them; this panel puts one in the middle. Dark green with the
   gold rule so it reads as the licence notice's sibling: an ask from the
   company, not another content block. It carries a real tel: button, so the
   mobile sticky bar hides itself while this is on screen. */

.pg-cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin: 36px 0 4px;
  padding: 22px 26px;
  background: #1b3a2f;
  border-left: 4px solid #f4b400;
  border-radius: 4px;
}

.pg-cta-inline-lead {
  font-family: Oswald, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #fff;
  margin: 0 0 2px;
}

.pg-cta-inline-sub {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
}

.pg-cta-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 575px) {
  .pg-cta-inline-actions {
    width: 100%;
  }
  .pg-cta-inline-actions .btn {
    flex: 1 1 0;
  }
}

/* The estimate link that follows a quote-factor table. */
.pg-estimate {
  margin: 14px 0 0;
  font-size: 1.05rem;
}

/* ==========================================================================
   Footer layout — overrides the inherited grid.

   footer.css flattens the Bootstrap wrappers with `display: contents` and
   places every cell of a six-column grid by `:nth-of-type()`: logo, Address,
   Contact, Menu, Dumpsters, Products & Services. That mapping is positional,
   and it was written against the recycling site's child order.

   This site's footer has different children — no pin-up, no separate phone and
   email blocks, a Contact block that carries its own heading, and three menu
   columns instead of three plus a nested pair. Under the inherited rules the
   Contact block gets assigned the single row meant for a phone number and the
   Follow block gets the row meant for an email, so the two overlap.

   Rather than bend the markup back into a shape those selectors expect, the
   placement is redefined here for the structure that actually exists. Same
   selectors, later file, so these win on document order.

   Columns: identity | Services | Service Areas | Company.
   ========================================================================== */

@media (min-width: 992px) {
  /* Flatten only the menu wrappers. The identity column stays a normal block
     so the logo, address, contact and social stack inside one grid cell
     instead of each needing a hand-placed row. */
  .site-footer .container.d-p > .row > .col-lg-3 {
    display: block;
    /* Bootstrap sets .col-lg-3 { width: 25% }. As a grid item that percentage
       resolves against its grid cell, not the row, collapsing the column to a
       quarter of its own width — which wrapped the address one word per line.
       The track sizing below is what should set this column's width. */
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .site-footer .container.d-p > .row > .col-lg-9,
  .site-footer .col-lg-9 > .row {
    display: contents;
  }
  .site-footer .col-lg-9 .col-lg-auto {
    display: block;
  }

  .site-footer .container.d-p > .row {
    grid-template-columns: minmax(230px, 1.15fr) 1fr 1fr 1.1fr;
    grid-template-rows: auto;
    column-gap: 2.5rem;
    justify-content: initial;
    align-items: start;
  }

  /* Drop every hand-placed cell from the inherited six-column grid. Auto
     placement is correct once the wrappers above are flattened. */
  .site-footer .col-lg-3 > a[rel="home"],
  .site-footer .container.d-p > .row > .col-lg-3 > h3,
  .site-footer .col-lg-3 > div:nth-of-type(1),
  .site-footer .col-lg-3 > div:nth-of-type(2),
  .site-footer .col-lg-3 > div:nth-of-type(3),
  .site-footer .col-lg-3 > div:nth-of-type(4) {
    grid-area: auto;
  }

  /* The identity column reads as one block, so its own rhythm is restored —
     the inherited rules had zeroed these margins to sit in fixed grid rows. */
  .site-footer .col-lg-3 > div:nth-of-type(1) {
    margin-top: 1.5rem !important;
  }
  .site-footer .col-lg-3 > div:nth-of-type(2),
  .site-footer .col-lg-3 > div:nth-of-type(3) {
    margin-top: 1.5rem !important;
  }

  /* The nested "Dumpsters & Material" menu sits under Company rather than
     beside it: it is a pointer to the sister site, not a fourth column. */
  .site-footer .col-lg-9 .col-lg-auto > .mt-4 {
    margin-top: 1.75rem !important;
  }
}

/* Narrow desktop: the four tracks are comfortable, but the gap can tighten. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-footer .container.d-p > .row {
    column-gap: 1.5rem;
  }
  .site-footer .col-lg-9 h3 {
    white-space: normal;
  }
}

@media (max-width: 991.98px) {
  /* Below lg the inherited rules span each menu across both tracks and turn
     it into an internal two-column pair — again keyed to a structure with a
     nested menu in that slot. Here each menu is simply its own cell. */
  .site-footer .col-lg-9 .col-lg-auto {
    grid-column: auto;
    display: block;
  }
  .site-footer .col-lg-9 > .row {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  /* Footer link text is the anchor text Google reads, so it stays "Clearwater
     Demolition" rather than being shortened to fit. At phone widths two
     columns cannot hold that without the second one running off the edge, so
     the menus go single-column instead of the labels going vague. */
  @media (max-width: 575.98px) {
    .site-footer .col-lg-9 > .row {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }
  /* Nothing in a footer menu should be able to push the page sideways. */
  .site-footer .foot-menu a {
    display: block;
    overflow-wrap: anywhere;
  }
  /* The sister-site menu keeps its separation from Company above it. */
  .site-footer .col-lg-9 .col-lg-auto > .mt-4 {
    margin-top: 1.5rem !important;
  }
}

/* The legal line carries two licence numbers and runs long. Centred and
   unbroken it overflowed the viewport at phone widths, where body
   overflow-x:hidden quietly clipped it rather than wrapping it. */
.site-footer .site-info {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.site-footer .site-info p {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* The footer carries all three yards. Each address is its own block, and the
   satellite yards are prefixed with the line that says nobody can attend them,
   so the three do not read as one run-on address. */
.site-footer .foot-yard {
  line-height: 1.5;
}

.site-footer .foot-yard + .foot-yard {
  padding-top: 0.75rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
}

.site-footer .foot-yard-note {
  font-size: 0.8125rem;
  opacity: 0.75;
  margin-bottom: 0.125rem;
}

/* ---------------------------------------------------------------- icons */

/* Icons are the glyph itself in a span, not the theme's `fa-` classes — see
   the note on icon() in lib/blocks.ts for why that mechanism had to go. These
   rules are all the classes used to supply: the face, and the fixed-width box.

   font-style is reset because the markup used to be <i>, and anything that
   inherits italic would make the browser synthesise an oblique glyph. */
.ico {
  display: inline-block;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.ico-brand {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/* What fa-fw did: a fixed box so stacked labels align. */
.ico-fw {
  width: 1.25em;
  text-align: center;
}

/* ------------------------------------------------- sister-site top-bar CTA */

/* Dumpsters, base material and the transfer station are all on the recycling
   site. A visitor who wants a roll-off had no route there above the footer, so
   the top bar carries one next to the quote button.

   It is deliberately quieter than that button: outlined on the red bar rather
   than filled like the green "Get A Free Quote", because sending the wrong
   visitor sideways must not compete with asking the right one to convert. */
#top-bar .sister-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  padding: 8px 1.25rem;
  color: #fff;
  font-family: Oswald, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-top: none;
  border-bottom: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

#top-bar .sister-btn .ico {
  color: #edb200;
}

#top-bar .sister-btn:hover,
#top-bar .sister-btn:focus-visible {
  background-color: #fff;
  color: #ba2525;
}

#top-bar .sister-btn:hover .ico,
#top-bar .sister-btn:focus-visible .ico {
  color: #ba2525;
}

/* The label shortens before it wraps, and the bar keeps its one-line height.
   Below this the icon and the short label carry it on their own. */
#top-bar .sister-btn-short {
  display: none;
}

@media (max-width: 1399.98px) {
  #top-bar .sister-btn-full {
    display: none;
  }

  #top-bar .sister-btn-short {
    display: inline;
  }
}

/* In the off-canvas drawer it sits under the phone and quote buttons, where
   the top bar is not rendered at all. */
.sister-btn-drawer {
  border-color: rgb(255 255 255 / 0.45);
  color: #fff;
}

.sister-btn-drawer .ico {
  color: #edb200;
}

/* ==================================================================
   Homepage — the visually led page lib/pages/core.ts::homePage() emits.

   Everything here is scoped under body.home (the homepage is the only
   page that gets that class, see HOME_BODY_ATTRS in lib/shell.ts), so
   none of it can leak into the other 245 pages. This file is the LAST
   layer in the cascade (components/PageHtml.tsx), so where a kit rule
   from pages.css has to bend for the homepage, an equal-specificity
   selector here wins on order — the overrides below deliberately mirror
   the kit's `:root #main` prefix as `.home #main` for exactly that.

   Section rhythm, top to bottom:
     photo hero (dark) → trust strip (charcoal, pages.css) → services
     (white, photo cards) → own-yard split (charcoal + photo) → process
     (white) → fleet band (full-bleed photo) → cost (tinted) → areas
     (white, map) → project strip (tinted) → guides (white) → FAQ
     (tinted) → closing CTA (charcoal, footer.css).

   The generated-page kit in generated.css is scoped to .pg-generated,
   which the homepage body does not carry — so the pg-* blocks the
   homepage reuses (pg-lead, pg-steps, pg-table, pg-faq, pg-related)
   are re-specced here, on the homepage's grounds.

   GOLD GUARDRAIL (same as the sister site): gold #edb200 on light
   grounds is a mark only — ticks, rules, chips — never text (1.9:1 on
   white). Gold text appears only on charcoal or photo grounds.

   Asset paths are absolute (/wp-content/...): dev inlines this file
   into a <style>, so a relative path would resolve against the page.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Section grounds and shared bits
   ------------------------------------------------------------------ */
.home #main > .d-p {
  background: #fff;
}
.home #main > .d-p.pg-alt {
  background: #fbfafa;
}

/* The lead sentence under a section heading (blocks.ts heading()). */
.home .pg-lead {
  max-width: 68ch;
  margin: 0.875rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #373737;
}

/* Left-align the kit h2's gold tick everywhere on this page — every
   homepage section is left-set, not centred. */
.home #main .home-h2::after {
  margin-left: 0;
}

/* Inline links in homepage running text (the cost caveat's guide
   link): the site's green-with-gold-sweep treatment, which pages.css
   scopes to body:not(.home). */
.home .pg-price-note a,
.home .pg-lead a {
  color: #298253;
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(#edb200, #edb200);
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size 0.25s ease;
}
.home .pg-price-note a:hover,
.home .pg-price-note a:focus,
.home .pg-lead a:hover,
.home .pg-lead a:focus {
  background-size: 100% 2px;
}

/* Fact tiles (blocks.ts facts() emits div.home-fact, which pages.css
   only specs in its <li> form). Light-ground colors; the yard section
   swaps them for its dark ground below. */
.home .home-fact {
  display: grid;
  gap: 0.25rem;
}
.home .home-fact-value {
  font: 600 1.75rem / 1 Oswald, sans-serif;
  color: #191919;
  text-transform: uppercase;
}
.home .home-fact-label {
  font: 500 0.8125rem / 1.3 "DM Sans", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5a5a;
  max-width: 16rem;
}

/* ------------------------------------------------------------------
   2. Hero — a real photograph, not the shared band()
   ------------------------------------------------------------------ */
.home .home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(86vh, 660px);
  padding: 4.5rem 0 5rem;
  background: #141414; /* paints before the photo decodes */
}
.home .home-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The excavator and the torn-open house sit right of centre in
     demo-7; keep them in frame while the copy takes the left. */
  object-position: 68% 42%;
}
/* Reading ground: solid on the left where the type sits, open on the
   right where the machine is; a bottom fade seats the hero on the
   charcoal trust strip below it. */
.home .home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 14, 14, 0.88) 0%, rgba(14, 14, 14, 0.6) 46%, rgba(14, 14, 14, 0.16) 100%),
    linear-gradient(180deg, rgba(14, 14, 14, 0) 78%, rgba(20, 20, 20, 0.9) 100%);
}
.home .home-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.home .home-hero-kicker {
  font: 500 0.8125rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #edb200;
  margin: 0 0 0.875rem;
}
.home .home-hero h1 {
  font: 600 clamp(2.375rem, 1.7rem + 3vw, 3.875rem) / 1.04 Oswald, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fbfafa;
  max-width: 15ch;
  margin: 0;
}
.home .home-hero-place {
  display: block;
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 0.375em;
  padding-top: 0.5em;
  border-top: 3px solid #edb200;
  max-width: max-content;
}
.home .home-hero-lead {
  margin: 1.375rem 0 0;
  max-width: 54ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}
.home .home-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
  margin-top: 1.625rem;
}
.home .home-hero-note {
  margin: 0.875rem 0 0;
  font: 500 0.8125rem / 1.4 "DM Sans", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

/* ------------------------------------------------------------------
   3. Services — photo cards + the compact list
   ------------------------------------------------------------------ */
.home .home-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.home .home-svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home .home-svc-card:hover,
.home .home-svc-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(25, 25, 25, 0.08), 0 20px 40px rgba(25, 25, 25, 0.16);
}
.home .home-svc-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.home .home-svc-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.125rem 1.25rem 1.25rem;
  flex: 1;
}
.home .home-svc-body h3 {
  margin: 0;
  font: 600 1.125rem / 1.25 Oswald, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #191919;
}
.home .home-svc-body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5a5a5a;
  flex: 1;
}
.home .home-svc-more {
  margin-top: 0.375rem;
  font: 600 0.8125rem / 1.2 Oswald, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ba2525;
}
.home .home-svc-card:hover .home-svc-more,
.home .home-svc-card:focus-visible .home-svc-more {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #edb200;
}

/* The rest of the services, as link chips. */
.home .home-svc-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1.5rem 0 0;
  padding: 0;
}
.home .home-svc-list a,
.home .home-areas-list a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border-radius: var(--btn-radius);
  box-shadow: 0 1px 3px rgba(25, 25, 25, 0.08), 0 6px 16px rgba(25, 25, 25, 0.08);
  font-size: 0.9375rem;
  color: #191919;
  text-decoration: none;
  transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.home .home-svc-list a:hover,
.home .home-svc-list a:focus,
.home .home-areas-list a:hover,
.home .home-areas-list a:focus {
  color: #ba2525;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.1), 0 10px 22px rgba(25, 25, 25, 0.14);
}
.home .home-svc-all {
  font-weight: 600;
}

/* ------------------------------------------------------------------
   4. The own-yard section — the money section, charcoal + photo
   ------------------------------------------------------------------ */
.home .home-yard {
  background: #191919;
  padding: 4.5rem 0;
}
.home .home-yard-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.home .home-yard-media {
  margin: 0;
}
.home .home-yard-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.home .home-yard-media figcaption {
  margin-top: 0.75rem;
  font: 500 0.8125rem / 1.4 Oswald, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.home #main .home-yard .home-h2 {
  color: #fbfafa;
}
.home .home-yard-copy > p:not(.home-eyebrow) {
  margin: 1.25rem 0 0;
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}
/* Fact tiles flip to the dark palette. Gold figures are fine here —
   this is a charcoal ground. */
.home .home-yard .home-fact-value {
  color: #edb200;
}
.home .home-yard .home-fact-label {
  color: rgba(255, 255, 255, 0.62);
}
.home .home-yard .home-fact-row {
  margin: 1.75rem 0 1.5rem;
}

/* ------------------------------------------------------------------
   5. Process — the numbered step cards (generated.css kit, re-scoped)
   ------------------------------------------------------------------ */
.home .pg-steps {
  counter-reset: step;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.home .pg-steps li {
  counter-increment: step;
  padding: 1.375rem 1.5rem 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.1);
}
.home .pg-steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.625rem;
  border-radius: 50%;
  background: #edb200;
  color: #191919;
  font: 600 0.875rem / 1 Oswald, sans-serif;
}
.home .pg-steps h3 {
  margin: 0 0 0.375rem;
  font: 600 1.0625rem / 1.25 Oswald, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #191919;
}
.home .pg-steps p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #5a5a5a;
}

/* ------------------------------------------------------------------
   6. Fleet band — full-bleed photo, the mid-page ask
   ------------------------------------------------------------------ */
.home .home-fleet {
  padding: 5rem 0;
  background-image: linear-gradient(90deg, rgba(14, 14, 14, 0.9) 0%, rgba(14, 14, 14, 0.62) 52%, rgba(14, 14, 14, 0.3) 100%),
    url(/wp-content/uploads/home-fleet-1400.jpg);
  background-size: cover;
  background-position: 50% 62%;
  background-repeat: no-repeat;
}
.home #main .home-fleet .home-h2 {
  color: #fbfafa;
  max-width: 22ch;
}
.home .home-fleet-lead {
  margin: 1.25rem 0 0;
  max-width: 54ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

/* ------------------------------------------------------------------
   7. Cost teaser — the price table (generated.css kit, re-scoped)
   ------------------------------------------------------------------ */
.home .pg-table-wrap {
  margin-top: 1.75rem;
  overflow-x: auto; /* the table scrolls inside itself on phones */
}
.home .pg-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.06), 0 12px 28px rgba(25, 25, 25, 0.1);
}
.home .pg-table th {
  text-align: left;
  padding: 0.875rem 1.125rem;
  background: linear-gradient(180deg, #202020, #191919);
  color: #fbfafa;
  font: 500 0.75rem / 1.2 Oswald, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.home .pg-table td {
  padding: 0.875rem 1.125rem;
  border-top: 1px solid rgba(25, 25, 25, 0.08);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #373737;
  vertical-align: top;
}
.home .pg-table tr:first-child td {
  border-top: 0;
}
.home .pg-table td:first-child {
  font-weight: 600;
}
.home .pg-table td:first-child a {
  color: #191919;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: #edb200;
}
.home .pg-table td:first-child a:hover,
.home .pg-table td:first-child a:focus {
  color: #ba2525;
}

/* ------------------------------------------------------------------
   8. Service areas — city chips beside the map
   ------------------------------------------------------------------ */
.home .home-areas-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 3rem;
  align-items: center;
}
.home .home-areas-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1.5rem 0 1.25rem;
  padding: 0;
}
/* Chips on white need a visible edge the shadow alone doesn't give. */
.home .home-svc-list a,
.home .home-areas-list a {
  border: 1px solid rgba(25, 25, 25, 0.08);
}
.home .home-areas-map img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-left: auto;
}

/* ------------------------------------------------------------------
   9. Project strip — four photos feeding /gallery/
   ------------------------------------------------------------------ */
.home .home-strip {
  padding: 4rem 0;
  background: #fbfafa;
}
.home .home-strip-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.home .home-strip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
.home .home-strip-item {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.08), 0 12px 28px rgba(25, 25, 25, 0.12);
}
.home .home-strip-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.home .home-strip-item:hover img,
.home .home-strip-item:focus-visible img {
  transform: scale(1.03);
}

/* ------------------------------------------------------------------
   10. Guides row + FAQ (generated.css kits, re-scoped)
   ------------------------------------------------------------------ */
.home .pg-related ul {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.home .pg-related li a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: var(--btn-radius);
  box-shadow: 0 1px 3px rgba(25, 25, 25, 0.08), 0 6px 16px rgba(25, 25, 25, 0.08);
  font-size: 0.9375rem;
  color: #191919;
  text-decoration: none;
  transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.home .pg-related li a:hover,
.home .pg-related li a:focus {
  color: #ba2525;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.1), 0 10px 22px rgba(25, 25, 25, 0.14);
}

.home .pg-faq {
  margin-top: 0.5rem;
  max-width: 900px;
}
.home .pg-faq-item {
  padding: 1.375rem 0;
  border-bottom: 1px solid rgba(25, 25, 25, 0.1);
}
.home .pg-faq-item:last-child {
  border-bottom: 0;
}
.home .pg-faq-item h3 {
  margin: 0 0 0.5rem;
  font: 600 1.125rem / 1.3 Oswald, sans-serif;
  letter-spacing: 0.02em;
  color: #191919;
}
.home .pg-faq-item p {
  margin: 0;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
  color: #373737;
}

/* The price caveat under the cost table. demolition.css specs the
   base; this pins its measure on the homepage's wide section. */
.home .pg-price-note {
  max-width: 74ch;
}

/* The closing CTA reuses the footer band; only its room-edge shadow
   goes (it sits mid-document here, not against the footer seam). */
.home #main .footer-cta.pg-cta {
  box-shadow: none;
}

/* The homepage's crumb trail is just "Home" — a green bar saying only
   that between the CTA and the footer is noise. The BreadcrumbList
   JSON-LD still ships; only the visual strip goes. */
.home .breadcrumb {
  display: none;
}

/* ------------------------------------------------------------------
   11. Tablet and phone
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .home .home-hero {
    min-height: 0;
    padding: 3.5rem 0 4rem;
  }
  /* Narrower frame: keep the machine in shot and deepen the scrim —
     the copy now sits over the photo's busy centre. */
  .home .home-hero-img {
    object-position: 74% 42%;
  }
  .home .home-hero::after {
    background: linear-gradient(90deg, rgba(14, 14, 14, 0.88) 0%, rgba(14, 14, 14, 0.7) 55%, rgba(14, 14, 14, 0.4) 100%),
      linear-gradient(180deg, rgba(14, 14, 14, 0) 78%, rgba(20, 20, 20, 0.9) 100%);
  }

  /* The two split bands stack: photo first, copy second. */
  .home .home-yard {
    padding: 3.5rem 0;
  }
  .home .home-yard-inner,
  .home .home-areas-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .home .home-areas-map img {
    max-width: 300px;
    margin: 0 auto;
  }

  .home .home-fleet {
    padding: 3.5rem 0;
  }

  .home .home-strip {
    padding: 3rem 0;
  }
  .home .home-strip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .home .home-hero-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
  .home .home-fact-row {
    gap: 1rem 1.75rem;
  }
  .home .home-fact-value {
    font-size: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  /* The 800px fleet crop for phone pipes. */
  .home .home-fleet {
    background-image: linear-gradient(90deg, rgba(14, 14, 14, 0.9) 0%, rgba(14, 14, 14, 0.66) 55%, rgba(14, 14, 14, 0.42) 100%),
      url(/wp-content/uploads/home-fleet-800.jpg);
  }
  .home .home-strip-row {
    gap: 0.75rem;
  }
}