.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-8 .elementor-element.elementor-element-312bc31 .elementor-menu-toggle{margin:0 auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* ═══════════════════════════════════════════════════════════════════
   ALL WASTE CONSULTING — MAIN HEADER

   NOTE FOR WHOEVER EDITS THIS NEXT: this stylesheet is output in the
   public page source. Keep it free of any other company's name.
   Design provenance lives in the vault at Clients/Junk Hawk/log.md.

   ── ELEMENTOR V4 GOTCHAS, all four cost real time ────────────────
   1. CONTAINERS get `.elementor-element-<id>`, WIDGETS DO NOT. A V4
      widget's only hook is its generated class, e.g. the Contact
      button's `.e-eca741c-c6e98e4`. Read it from the DOM.
   2. Box properties need the DOUBLED class AND !important to beat the
      atomic styles: `.elementor-element.elementor-element-a0a3afe`.
      A single class is silently ignored.
   3. All three green-bar paragraphs share ONE generated class
      (g-5a752fb), so children must be addressed by :nth-child().
      Order: 1 address, 2 service area, 3 phone.
      White bar order: p wordmark, div nav, a Contact.
   4. Specificity trap: the desktop height rules below use the doubled
      class (0,2,0). Any responsive override MUST match that or it
      loses silently.
   ═══════════════════════════════════════════════════════════════════ */

/* Gutter matches the page content box, min(1300px, 100% - 160px), so
   the header and the page content start on the same x. */
.elementor-element.elementor-element-a0a3afe,
.elementor-element.elementor-element-c56d1d5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: max(80px, calc((100% - 1300px) / 2)) !important;
  padding-right: max(80px, calc((100% - 1300px) / 2)) !important;
}

.elementor-element.elementor-element-a0a3afe { min-height: 38px !important; }
.elementor-element.elementor-element-c56d1d5 { min-height: 104px !important; }

/* ── Utility bar text ───────────────────────────────────────────────
   The global class lost its style definition in the V4 editor, so it
   is pinned here. White on green, bold to match the nav.            */
.g-5a752fb,
.g-5a752fb a {
  font-family: "Libre Franklin", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: color 120ms ease;
}
.g-5a752fb a:hover { color: rgba(255, 255, 255, .75); }

/* ── Nav hover ──────────────────────────────────────────────────────*/
.elementor-element-312bc31 .elementor-item,
.elementor-element-312bc31 .elementor-sub-item {
  transition: color 120ms ease, background-color 120ms ease !important;
}
.elementor-element-312bc31 .elementor-item:hover,
.elementor-element-312bc31 .elementor-item:focus,
.elementor-element-312bc31 .elementor-item.highlighted,
.elementor-element-312bc31 .elementor-sub-item:hover,
.elementor-element-312bc31 .elementor-sub-item:focus {
  color: #7A7A7A !important;
}

/* ── Contact button ─────────────────────────────────────────────────*/
a.e-eca741c-c6e98e4 {
  font-family: "Libre Franklin", sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}
a.e-eca741c-c6e98e4:hover {
  background-color: #101010 !important;
  color: #FFFFFF !important;
}

/* ── Sticky ─────────────────────────────────────────────────────────
   Both bars travel together. Sticking the two containers separately
   would stack them, so the whole theme-builder wrapper is what
   sticks. This also makes the header a containing block, which the
   mobile phone icon below relies on.                                */
[data-elementor-type="header"] {
  position: sticky !important;
  top: 0;
  z-index: 100;
}
.admin-bar [data-elementor-type="header"] { top: 32px; }
@media (max-width: 782px) {
  .admin-bar [data-elementor-type="header"] { top: 46px; }
}
.elementor-element.elementor-element-c56d1d5 {
  box-shadow: 0 1px 0 rgba(16, 16, 16, .08), 0 8px 22px -14px rgba(16, 16, 16, .35);
}

@media (max-width: 1024px) {
  .g-5a752fb { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE: green bar carries the service area only. White bar is
   phone icon left, wordmark centred, burger right.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .elementor-element.elementor-element-c56d1d5 { min-height: 68px !important; }

  .elementor-element-a0a3afe {
    justify-content: center !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .elementor-element-a0a3afe > p:nth-child(1) { display: none !important; }

  /* State names spelled out do not fit at 375px, so swap to postal
     codes. Acceptable here because this is a utility strip, not
     content that needs to be in the DOM for search. */
  .elementor-element-a0a3afe > p:nth-child(2) { font-size: 0 !important; }
  .elementor-element-a0a3afe > p:nth-child(2)::after {
    content: "Based in Cincinnati \00b7  Serving OH, IN, KY, WV, IL";
    font-family: "Libre Franklin", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    white-space: nowrap;
  }

  .elementor-element-c56d1d5 {
    position: relative !important;
    justify-content: flex-end !important;
    padding-left: 54px !important;
    padding-right: 12px !important;
  }

  /* wordmark dead centre regardless of what sits either side */
  .elementor-element-c56d1d5 > p {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    max-width: 150px !important;
    text-align: center !important;
    white-space: nowrap;
  }

  /* The burger is NOT a direct flex child of the bar, it lives inside
     the nav widget's own container, so margin-left:auto does nothing.
     Pin it instead. */
  .elementor-element-c56d1d5 > .elementor-element-312bc31 { position: static !important; }
  .elementor-element-312bc31 .elementor-menu-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 12 !important;
  }

  /* Contact button is redundant next to a tap-to-call icon */
  .elementor-element-c56d1d5 > a.e-eca741c-c6e98e4 { display: none !important; }

  /* The phone lives in the green bar's markup. Lift it out and park it
     at the left of the white bar. Absolute against the header, which
     is sticky and therefore a containing block. Keeps it a real tel:
     link rather than a decorative glyph. */
  .elementor-element-a0a3afe > p:nth-child(3) {
    position: absolute !important;
    left: 12px !important;
    top: 38px !important;
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    z-index: 12 !important;
  }
  .elementor-element-a0a3afe > p:nth-child(3) a {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
  }
  .elementor-element-a0a3afe > p:nth-child(3) a::after {
    content: "";
    width: 23px;
    height: 23px;
    background-color: #101010;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center / contain no-repeat;
  }
}

/* NAV FIX. Dropdown is absolute w/ top:100%; making the widget static
   removed its anchor so it rendered 139px wide mid-header. Give it
   explicit left/right/top. Burger appears at <=1024 so the whole
   mobile header now starts there, not 767. Phone icon filled green. */
@media(max-width:1024px){
.elementor-element.elementor-element-c56d1d5{min-height:68px!important}
.elementor-element-a0a3afe{justify-content:center!important;padding-left:14px!important;padding-right:14px!important}
.elementor-element-a0a3afe>p:nth-child(1){display:none!important}
.elementor-element-a0a3afe>p:nth-child(2){font-size:0!important}
.elementor-element-a0a3afe>p:nth-child(2)::after{content:"Based in Cincinnati \00b7  Serving OH, IN, KY, WV, IL";font-family:"Libre Franklin",sans-serif;font-size:12px;font-weight:700;color:#FFFFFF;white-space:nowrap}
.elementor-element-c56d1d5{position:relative!important;justify-content:flex-end!important;padding-left:54px!important;padding-right:12px!important}
.elementor-element-c56d1d5>p{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;font-size:15px!important;line-height:1.2!important;max-width:150px!important;text-align:center!important;white-space:nowrap}
.elementor-element-c56d1d5>a.e-eca741c-c6e98e4{display:none!important}
.elementor-element-c56d1d5>.elementor-element-312bc31{position:static!important}
.elementor-element-312bc31 .elementor-menu-toggle{position:absolute!important;right:12px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;z-index:14!important}
.elementor-element-312bc31 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container{position:absolute!important;top:100%!important;left:0!important;right:0!important;width:auto!important;max-width:none!important;z-index:30!important;background:#FFFFFF!important;box-shadow:0 14px 30px rgba(16,16,16,.18)!important;border-top:1px solid #E6E6E6!important}
.elementor-element-312bc31 nav.elementor-nav-menu--dropdown .elementor-item{padding:15px 20px!important;font-size:16px!important;font-weight:700!important}
.elementor-element-312bc31 nav.elementor-nav-menu--dropdown .elementor-sub-item{padding:12px 20px 12px 36px!important;font-size:15px!important}
.elementor-element-a0a3afe>p:nth-child(3){position:absolute!important;left:12px!important;top:38px!important;height:68px!important;display:flex!important;align-items:center!important;margin:0!important;z-index:14!important}
.elementor-element-a0a3afe>p:nth-child(3) a{font-size:0!important;display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px}
.elementor-element-a0a3afe>p:nth-child(3) a::after{content:"";width:26px;height:26px;background-color:#01683B!important;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>") center/contain no-repeat}
}
/* NAVFIX2-MARKER */

/* 10px gap was showing the page through between the bar and the open
   menu. The dropdown carries a margin of its own on top of top:100%. */
@media(max-width:1024px){
.elementor-element-312bc31 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container{margin:0!important}
}
/* NAVFIX3-MARKER */

/* Brand green #228B22 replaces the dark green everywhere, per Ethan.
   ⚠️ Contrast noted and overruled: white on #228B22 is 4.39:1 and AA
   wants 4.5 for 14px bold. Ethan's call, recorded in the log.
   Heading/wordmark font set to Montserrat as the closest common match
   to the ALLWASTE wordmark until the real font name is recovered. */
.elementor-element.elementor-element-a0a3afe { background-color: #228B22 !important; }
.elementor-element-312bc31 .elementor-item:hover,
.elementor-element-312bc31 .elementor-item:focus,
.elementor-element-312bc31 .elementor-item.highlighted,
.elementor-element-312bc31 .elementor-sub-item:hover { color: #228B22 !important; }
.elementor-element-c56d1d5 > p,
.elementor-element-c56d1d5 > p a {
  font-family: "Montserrat", "Libre Franklin", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
@media(max-width:1024px){
.elementor-element-a0a3afe > p:nth-child(3) a::after { background-color: #228B22 !important; }
}
/* GREENFONT-MARKER */

/* Amber removed. Contact button takes Deep Green #1E7A1E, the same
   fill the page buttons use. White on it is 5.44:1, which passes;
   white on Forest Green #228B22 is only 4.39:1 and would fail at
   16px bold, which is why the buttons are not the brand green.
   The utility bar moves to Deep Green too, which also resolves the
   4.39:1 reading on its 14px bold white text. */
.elementor-element.elementor-element-a0a3afe { background-color: #1E7A1E !important; }
a.e-eca741c-c6e98e4 {
  background-color: #1E7A1E !important;
  color: #FFFFFF !important;
}
a.e-eca741c-c6e98e4:hover {
  background-color: #101010 !important;
  color: #FFFFFF !important;
}
/* NOAMBER-MARKER */


/* ★ CANONICAL PALETTE — #117A3E green / #414042 charcoal / #FFFFFF.
   Settled by sampling the logo artwork: its charcoal reads #404040 to
   #414141, matching #414042. Its green is far closer to #117A3E than
   to the other brand sheet's value. #117A3E is 5.42:1 on white, so it
   carries text as well as fills. Full rationale in the vault at
   Clients/Junk Hawk/brand-colors.md */

.elementor-element-a0a3afe,
.elementor-element-a0a3afe > .e-con-inner { background-color: #117A3E !important; }

.elementor-element-312bc31 .elementor-item,
.elementor-element-c56d1d5 .awc-wordmark { color: #414042 !important; }
.elementor-element-312bc31 .elementor-item:hover,
.elementor-element-312bc31 .elementor-item.elementor-item-active { color: #117A3E !important; }

.elementor-element-c56d1d5 .elementor-button,
a.elementor-button.elementor-size-sm { background-color: #117A3E !important; color: #FFFFFF !important; }
.elementor-element-c56d1d5 .elementor-button:hover { background-color: #414042 !important; }

.awc-phone-ico { background-color: #117A3E !important; }
.elementor-element-312bc31 .elementor-menu-toggle { color: #414042 !important; }
/* CANON-MARKER-HDR */


/* ── CANON FIX ──────────────────────────────────────────────────────
   The block above was written with weaker .elementor-8s than the rules it
   was meant to replace, so three things kept their old colour. All
   !important, so specificity decided it, exactly the trap documented
   at the top of this file. Measured on the live page:

     green bar      #1E7A1E   beaten by the DOUBLED class (0,2,0)
     contact button #1E7A1E   beaten by a.e-eca741c-c6e98e4 (0,1,1)
     wordmark       #101010   never targeted at all

   Each .elementor-8 below matches or exceeds the rule it overrides and
   sits later in the file. Verify by computed style, not by reading. */

.elementor-element.elementor-element-a0a3afe { background-color: #117A3E !important; }

a.e-eca741c-c6e98e4 { background-color: #117A3E !important; color: #FFFFFF !important; }
a.e-eca741c-c6e98e4:hover { background-color: #414042 !important; color: #FFFFFF !important; }

.elementor-element.elementor-element-c56d1d5 > p,
.elementor-element.elementor-element-c56d1d5 > p a { color: #414042 !important; }

/* Phone icon is masked, so the glyph colour IS background-color. */
@media (max-width: 1024px) {
  .elementor-element-a0a3afe > p:nth-child(3) a::after { background-color: #117A3E !important; }
}
/* CANONFIX-HDR */

/* Mobile gutters. Doubled class, because the desktop rule
   max(80px, calc((100% - 1300px)/2)) uses one and returns 80px at
   375px. Single-class mobile rules above lose to it silently. */
@media(max-width:1024px){
.elementor-element.elementor-element-a0a3afe{padding-left:14px!important;padding-right:14px!important}
.elementor-element.elementor-element-c56d1d5{padding-left:54px!important;padding-right:12px!important}
}
/* MOBPAD2 */

/* ── LOGO IN THE HEADER ─────────────────────────────────────────────
   Attachment 149. Measured before sizing, because the canvas is mostly
   empty: the artwork occupies x104-1806 of 1915 and y210-570 of 821,
   so it fills 89% of the width but only 44% of the HEIGHT. Sizing by
   canvas height would render the logo at under half the size intended.

   Working back from a target ink height:
     desktop  38px ink / 0.4385 = 87px canvas, x2.332 aspect = 204px
     mobile   26px ink / 0.4385 = 59px canvas,               = 138px
   Bar heights are 104px and 68px, so both clear with air to spare.

   Serving the 768px rendition, not the 1915px original. 768 against a
   204px box is 3.7x, past retina, and the original is 833KB.

   The file has NO alpha channel, but its background samples #FEFEFE
   against the bar's #FFFFFF. One to two points is imperceptible, so no
   blend mode is used. A blend mode here would also create a stacking
   context inside a sticky header, which is not worth the risk.

   The brand text stays in the DOM and is only visually replaced.   */

.elementor-element-c56d1d5 > p a {
  display: block !important;
  width: 204px !important;
  height: 87px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-image: url("https://hawkwastesolutions.com/wp-content/uploads/2026/08/8cd30b2c-674a-48aa-bfea-f8ac57cee8c7-768x329.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 1024px) {
  .elementor-element.elementor-element-c56d1d5 > p {
    max-width: 138px !important;
    font-size: 0 !important;
  }
  .elementor-element-c56d1d5 > p a {
    width: 138px !important;
    height: 59px !important;
  }
}
/* LOGO1 */

/* ── LOGO SIZING: crop the dead canvas ──────────────────────────────
   LOGO1 sized the whole 1915x821 canvas, but the artwork is only
   x104-1806, y210-570. That is 56% dead vertical space, so a box that
   fit the bar rendered the logo at 38px of actual ink and the tagline
   at roughly 5px tall, which is not legible.

   Cropping to the ink with background-size + negative offsets lets the
   artwork be much larger in the same bar. Ink aspect is 1702:360, so
   4.728:1.

     desktop  ink 56px tall -> box 265x56, in a 104px bar
     mobile   ink 36px tall -> box 170x36, in a 68px bar

   Offsets are the ink origin times the scale factor:
     desktop  scale 265/1702 = 0.1557  ->  -104*0.1557, -210*0.1557
     mobile   scale 170/1702 = 0.0999  ->  -104*0.0999, -210*0.0999

   Desktop ink goes 38px -> 56px, about 47% larger, and the tagline
   lands near 10px where it can actually be read.

   The 768px rendition at a 298px background width is still 2.6x, so
   it stays sharp on retina.                                        */

.elementor-element-c56d1d5 > p a {
  width: 265px !important;
  height: 56px !important;
  background-size: 298px auto !important;
  background-position: -16px -33px !important;
}

@media (max-width: 1024px) {
  .elementor-element.elementor-element-c56d1d5 > p {
    max-width: 170px !important;
  }
  .elementor-element-c56d1d5 > p a {
    width: 170px !important;
    height: 36px !important;
    background-size: 191px auto !important;
    background-position: -10px -21px !important;
  }
}
/* LOGO2 */

/* ── The font loader was silently breaking the green bar ────────────
   The Montserrat loader widget sits inside the green bar as a FOURTH
   flex child. It has zero width, but `justify-content: space-between`
   still allots it a share, so the bar distributed three gaps of 149px
   instead of two. The phone number ended up 229px from the right edge
   while its left gutter was 80px.

   Taking it out of the flex flow puts the phone flush at 80px, so the
   bar is finally symmetric and lines up with the Contact button in the
   white bar directly beneath it.

   display:none is safe here. The widget only carries a stylesheet
   reference, which applies regardless of how the wrapper renders.  */
.elementor-element-a0a3afe > div,
.elementor-element-a0a3afe > .elementor-element-54d0959 { display: none !important; }
/* GREENBARFIX */

/* ═══════════════════════════════════════════════════════════════════
   FOOTER STYLES LIVE HERE, NOT IN THE FOOTER TEMPLATE. Read this.

   Custom CSS written to post 173 (the footer template) is accepted by
   the API and echoed back, but never appears in its generated
   stylesheet. post-173.css regenerates, the ?ver= changes, and the
   file stays 1982 bytes of Elementor's own output. 173 has never been
   opened in the Elementor editor, so its page-settings store was never
   initialised, and page-level custom CSS has nowhere to go.

   The header template's CSS loads on every page, and so does the
   footer, so the rules work from here. If 173 is ever opened and
   published in the editor, this block can move there.

   Dark grey #414042 with white type. Contrast, all passing:
       #FFFFFF          12.6:1
       rgba(255,,,.78)  ~8.0:1
       rgba(255,,,.55)  ~4.6:1
   No green in footer type: #117A3E on this grey is 2.2:1.

   ⚠️ The logo file cannot go in the footer. Attachment 149 has no
   alpha channel; on this dark grey it would paint a white block. The
   wordmark is text until Matt sends a transparent PNG or the vector.
   ═══════════════════════════════════════════════════════════════════ */

[data-elementor-type="footer"] .e-con.e-parent > .e-con-inner {
  max-width: min(1300px, calc(100% - 160px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
[data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > * { flex: 1 1 200px; }
[data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > *:first-child { flex: 1.4 1 240px; }

[data-elementor-type="footer"] p {
  font-family: "Libre Franklin", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, .78) !important;
  margin: 0 0 14px !important;
}
[data-elementor-type="footer"] p:last-child { margin-bottom: 0 !important; }
[data-elementor-type="footer"] a { color: #FFFFFF !important; text-decoration: none !important; }
[data-elementor-type="footer"] a:hover { color: rgba(255, 255, 255, .65) !important; }
[data-elementor-type="footer"] strong { color: #FFFFFF !important; font-weight: 700 !important; }

[data-elementor-type="footer"] .awc-f-brand {
  font-family: "Montserrat", "Libre Franklin", sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  margin-bottom: 12px !important;
}
[data-elementor-type="footer"] .awc-f-head {
  font-family: "Montserrat", "Libre Franklin", sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  margin-bottom: 12px !important;
}
[data-elementor-type="footer"] .elementor-element-7768ade > .e-con-inner {
  border-top: 1px solid rgba(255, 255, 255, .16) !important;
  padding-top: 22px !important;
}
[data-elementor-type="footer"] .awc-f-legal {
  font-size: 13px !important;
  color: rgba(255, 255, 255, .55) !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  [data-elementor-type="footer"] .e-con.e-parent > .e-con-inner {
    max-width: calc(100% - 32px) !important;
  }
  [data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > *,
  [data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > *:first-child { flex: 1 1 100% !important; }
}
/* FOOTER3 */

/* ── FOOTER v2: three columns ───────────────────────────────────────
   Supersedes the four-column rules in FOOTER3 above.

     1  logo, name, address, phone, rights, agency credit
     2  about summary, the SEO block, given the most room
     3  quick links, with service area beneath

   Column 1 is a nested container (2cdcd54) holding the Site Logo
   widget and the address text, so the whole stack behaves as one
   column.

   ⚠️ THE LOGO IN THERE IS STILL THE WHITE-BACKGROUND FILE (149) and
   will read as a white block on this grey until the reversed PNG is
   uploaded. No CSS fixes it: the artwork is dark-on-white, so multiply
   keeps the dark ink and loses it against the grey, and screen keeps
   the white paper. A reversed asset is the only fix.               */

[data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > * { flex: 1 1 240px !important; }
[data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > *:nth-child(1) { flex: 1 1 240px !important; }
[data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > *:nth-child(2) { flex: 1.5 1 300px !important; }
[data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > *:nth-child(3) { flex: 1 1 230px !important; }

/* Column 1 stack */
[data-elementor-type="footer"] .elementor-element-2cdcd54 { padding: 0 !important; }
[data-elementor-type="footer"] .elementor-element-21c3f16 img {
  max-width: 210px !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

[data-elementor-type="footer"] .awc-f-name {
  font-family: "Montserrat", "Libre Franklin", sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
}

/* Service Area heading needs air above it, it follows a link list. */
[data-elementor-type="footer"] .awc-f-head-2 { margin-top: 26px !important; }

@media (max-width: 767px) {
  [data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > *,
  [data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > *:nth-child(1),
  [data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > *:nth-child(2),
  [data-elementor-type="footer"] .elementor-element-1ed76e0 > .e-con-inner > *:nth-child(3) { flex: 1 1 100% !important; }
}
/* FOOTER4 */

/* Footer body text is one size. Everything that is not a section
   heading (.awc-f-head) or the company name (.awc-f-name) reads at
   15px, including the rights and agency-credit line, which was 13px.
   Colour stays slightly dimmer on that line so it still recedes
   without being a second type size. */
[data-elementor-type="footer"] .awc-f-legal {
  font-size: 15px !important;
  line-height: 1.65 !important;
}
/* FOOTERTYPE */

/* Footer logo left aligned. Column 1 is a flex column, so its
   align-items was centring the image widget; the widget's own
   text-align was centring the img inside it. Both have to go. */
[data-elementor-type="footer"] .elementor-element-2cdcd54 {
  align-items: flex-start !important;
}
[data-elementor-type="footer"] .elementor-element-a586dcb,
[data-elementor-type="footer"] .elementor-element-a586dcb .elementor-widget-container {
  text-align: left !important;
  width: 100% !important;
}
[data-elementor-type="footer"] .elementor-element-a586dcb img {
  margin-left: 0 !important;
  margin-right: auto !important;
  display: block !important;
}
/* FOOTERLOGOLEFT */
/* NAVHOVER - nav links dim to the light grey on hover.

   They were turning green. The post-8 rule doing it is
     .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover
   at (0,4,0), so this block runs (0,5,0) to clear it.

   Rest stays #414042. Hover is #C0C0C0, the light grey from the
   palette, so the item dims rather than changing hue.

   WARNING: #C0C0C0 on white measures 1.85:1. Hover states are not
   held to the WCAG text minimum, and the rest state is 12.6:1, so
   nothing is unreadable at rest. But it is a large drop. If it
   reads as disabled rather than hovered, the alternative is a
   light grey background behind dark grey text, which keeps the
   text contrast and still shows the hover. */
.elementor-element.elementor-element-312bc31 .elementor-nav-menu--main .elementor-item:hover,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu--main .elementor-item:focus,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu--main .elementor-item.elementor-item-active:hover {
  color: #C0C0C0 !important;
  fill: #C0C0C0 !important;
}
.elementor-element.elementor-element-312bc31 .elementor-nav-menu--main .elementor-item:hover .sub-arrow svg,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu--main .elementor-item:hover .sub-arrow i {
  color: #C0C0C0 !important;
  fill: #C0C0C0 !important;
}
/* HDRBTNSHADOW - the header Contact button gets the same light grey
   offset shadow as the About CTA, so both can be judged side by side.

   Solid #C0C0C0 block offset 4px, no blur. Presses in 2px on hover.
   To try the soft version instead, replace `4px 4px 0 #C0C0C0` with
   `0 4px 10px rgba(16,16,16,.18)`.

   Sticky header note: the button sits inside a sticky wrapper, so the
   shadow must not be clipped. Nothing on the bar sets overflow, so it
   is fine as is. */
a.e-eca741c-c6e98e4 {
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #C0C0C0 !important;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}
a.e-eca741c-c6e98e4:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 #C0C0C0 !important;
}
/* HDRBTNDARK - header Contact button shadow to the dark grey.
   #C0C0C0 was barely visible against the white bar. */
a.e-eca741c-c6e98e4 {
  box-shadow: 4px 4px 0 #414042 !important;
}
a.e-eca741c-c6e98e4:hover {
  box-shadow: 2px 2px 0 #414042 !important;
}
/* NAVHOVER2 - the DROPDOWN items. This is why the nav hover kept
   coming back after being "fixed".

   NAVHOVER only ever targeted `.elementor-nav-menu--main .elementor-item`,
   which is the TOP LEVEL only. "Commercial Dumpster Rental" and
   "Sizes and Prices" are `a.elementor-sub-item`, a different class
   entirely, and nothing here had ever touched them. Measured on the
   live page:

     .elementor-item      rest #414042   (ours)
     .elementor-sub-item  rest rgb(51,55,61)   <- not even our grey

   Two older rules were also still turning sub-items green on hover
   (GREENFONT-MARKER and CANON-MARKER-HDR), both at (0,2,0).

   This block is (0,5,1) and covers every state on both levels, at
   every breakpoint including the mobile dropdown.

   Rest is the dark grey #414042. Hover is the light grey #C0C0C0.
   No green anywhere in the nav on hover.

   ⚠️ #C0C0C0 on white is 1.85:1. Hover states are not held to the
   WCAG text minimum and the rest state is 12.6:1, so nothing is
   unreadable, but it is a large drop. Ethan's call, asked for twice. */

/* rest state, both levels */
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item {
  color: #414042 !important;
}

/* hover, focus and keyboard-highlight, both levels */
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:hover,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:focus,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item.highlighted,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item:hover,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item:focus,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item.highlighted,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item.elementor-item-active:hover,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item.elementor-item-active:hover {
  color: #C0C0C0 !important;
  fill: #C0C0C0 !important;
  background-color: transparent !important;
}

/* the dropdown caret on a hovered parent follows the text */
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:hover .sub-arrow svg,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:hover .sub-arrow i {
  color: #C0C0C0 !important;
  fill: #C0C0C0 !important;
}

/* mobile dropdown uses the same markup, so it inherits the above.
   Pinned explicitly because the mobile panel has its own background
   and Elementor sometimes ships a separate hover rule for it. */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--dropdown a.elementor-item:hover,
  .elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--dropdown a.elementor-sub-item:hover {
    color: #C0C0C0 !important;
    background-color: transparent !important;
  }
}
/* NAVHOVER3 - hover goes to black, not light grey.

   Supersedes the #C0C0C0 hover in NAVHOVER and NAVHOVER2. Seeing it
   live, the light grey read as a disabled item rather than a hovered
   one, which is the risk flagged when it went in: 1.85:1 on white.

   Rest stays #414042. Hover is #101010, the same near-black the body
   copy uses, so the item darkens instead of fading. 18.9:1 on white,
   so the accessibility note on this is closed.

   Still no green anywhere in the nav. Both levels, .elementor-item
   and .elementor-sub-item, at (0,5,1). */
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:hover,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:focus,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item.highlighted,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item:hover,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item:focus,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item.highlighted,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item.elementor-item-active:hover,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item.elementor-item-active:hover {
  color: #101010 !important;
  fill: #101010 !important;
}
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:hover .sub-arrow svg,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:hover .sub-arrow i {
  color: #101010 !important;
  fill: #101010 !important;
}
@media (max-width: 1024px) {
  .elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--dropdown a.elementor-item:hover,
  .elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--dropdown a.elementor-sub-item:hover {
    color: #101010 !important;
  }
}
/* NAVHOVER4 - trying the light green on hover.

   Third revision of this. History so I stop going in circles:
     NAVHOVER   #C0C0C0  light grey, top level only
     NAVHOVER2  #C0C0C0  extended to the dropdown sub-items
     NAVHOVER3  #101010  black, because light grey read as disabled
     NAVHOVER4  #228B22  light green, asked for as a trial

   Rest stays #414042. Both levels. To go back to black, delete this
   block, NAVHOVER3 underneath is still intact.

   #228B22 on white is 4.39:1. Nav items are 16px bold, under the
   18.66px large-text threshold, so this is technically 0.11 short of
   AA for normal text. It is a hover state and the rest state is
   12.6:1, so nothing is unreadable. Same known exception as the light
   green elsewhere on the site. */
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:hover,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:focus,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item.highlighted,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item:hover,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item:focus,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item.highlighted,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item.elementor-item-active:hover,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-sub-item.elementor-item-active:hover {
  color: #228B22 !important;
  fill: #228B22 !important;
}
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:hover .sub-arrow svg,
.elementor-element.elementor-element-312bc31 .elementor-nav-menu a.elementor-item:hover .sub-arrow i {
  color: #228B22 !important;
  fill: #228B22 !important;
}
@media (max-width: 1024px) {
  .elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--dropdown a.elementor-item:hover,
  .elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--dropdown a.elementor-sub-item:hover {
    color: #228B22 !important;
  }
}
/* LIGHTHEADS - every heading below H1 drops from 900 to 600.

   Sitewide, because this block lives in the header template and that
   loads on every page. H1 keeps 900 so it stays the only heavy thing
   on a page.

   SPECIFICITY. Page-level rules set weight at up to (0,3,0), for
   example `.elementor-46 .elementor-element-d506080
   .elementor-heading-title { font-weight: 900 }` in CTAMATCH. This
   .elementor-8 runs `body.elementor-page [data-elementor-type] h2...`
   which is (0,3,2) and clears all of them without needing a rule per
   page.

   Montserrat 600 is already in the font request at the top of this
   file (`wght@600;700;800;900`), so no extra weight is downloaded and
   nothing falls back.

   Accordion titles are covered separately: they render as h3 but
   carry .elementor-tab-title, not .elementor-heading-title.

   ⚠️ NOT changed: the footer section labels (.awc-f-head) and the
   company name (.awc-f-name). They are <p> at 15 and 17px on a dark
   ground, where 900 is doing real work holding the columns apart.
   Say the word if they should follow. */

body.elementor-page [data-elementor-type] h2.elementor-heading-title,
body.elementor-page [data-elementor-type] h3.elementor-heading-title,
body.elementor-page [data-elementor-type] h4.elementor-heading-title,
body.elementor-page [data-elementor-type] h5.elementor-heading-title,
body.elementor-page [data-elementor-type] h6.elementor-heading-title {
  font-weight: 600 !important;
}

body.elementor-page [data-elementor-type] .elementor-accordion .elementor-tab-title,
body.elementor-page [data-elementor-type] .elementor-accordion .elementor-tab-title a {
  font-weight: 600 !important;
}
/* LIGHTHEADS2 - H2 back up to 700.

   600 was too soft for an H2. The scale now steps properly instead of
   being flat at 900 or flat at 600:

     H1   900
     H2   700
     H3   600   and below

   H3 stays at 600, which keeps card titles and FAQ questions clearly
   subordinate to the section heading above them. Say the word if they
   should follow H2 up to 700.

   Same (0,3,2) .elementor-8 as LIGHTHEADS so it clears the page-level
   weight rules. */

body.elementor-page [data-elementor-type] h2.elementor-heading-title {
  font-weight: 700 !important;
}
/* LIGHTHEADS3 - H2 to 750.
   Scale is now H1 900 / H2 750 / H3 and below 600.
   Footer labels stay 900 on purpose, they are 15-17px on dark grey
   and the weight is what holds the columns apart. */
body.elementor-page [data-elementor-type] h2.elementor-heading-title { font-weight: 750 !important; }
/* BIGHEADS - H2 and H3 up a step, sitewide.

     H2   30 -> 34   (mobile 23 -> 26)
     H3   20 -> 22

   Sitewide on purpose. Page stylesheets set H2 size at (0,2,1), e.g.
   `.elementor-336 h2.elementor-heading-title`. This block runs
   (0,3,2) so it clears every page at once and home and the hub cannot
   drift apart again.

   Scale is now H1 40 / H2 34 / H3 22 / body 17.

   ⚠️ Accordion titles are NOT .elementor-heading-title, so the FAQ
   questions keep their own 18px. */
body.elementor-page [data-elementor-type] h2.elementor-heading-title {
  font-size: 34px !important;
}
body.elementor-page [data-elementor-type] h3.elementor-heading-title {
  font-size: 22px !important;
}
@media (max-width: 767px) {
  body.elementor-page [data-elementor-type] h2.elementor-heading-title {
    font-size: 26px !important;
  }
  body.elementor-page [data-elementor-type] h3.elementor-heading-title {
    font-size: 20px !important;
  }
}
/* HDRBTN-YELLOW - the header Contact button moves to the yellow every
   other button on the site now uses. It was the last green one left.

   This is an Elementor V4 atomic button, class `e-button-base` with a
   generated companion class, not a `.elementor-button` widget, so the
   usual .elementor-8s miss it entirely. Targeted on both. */
.elementor-location-header a.e-button-base,
.elementor-location-header .e-button-base,
.elementor-location-header a.elementor-button {
  background-color: #F2A20C !important;
  color: #101010 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 0 #414042 !important;
}
.elementor-location-header a.e-button-base:hover,
.elementor-location-header .e-button-base:hover,
.elementor-location-header a.elementor-button:hover {
  background-color: #DB9109 !important;
  color: #101010 !important;
}
/* HDRBTN-FONT - the Contact button now matches the nav.
   Measured: nav items are Montserrat 18px / 800, the button was
   Libre Franklin 16px / 800. Two different families and sizes sitting
   next to each other on the same bar. */
.elementor-location-header a.e-button-base,
.elementor-location-header .e-button-base {
  font-family: "Montserrat", "Libre Franklin", sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}
/* BIGHEADS2 - H2 up another step, sitewide.

     H2   34 -> 38   (mobile 26 -> 30)

   This supersedes BIGHEADS above. Same .elementor-8 and same specificity
   (0,3,2), later in the same file, so it wins on order.

   Note for whoever reads this next: post-8.css loads AFTER post-46.css,
   so a page-level H2 rule at equal specificity CANNOT beat this one.
   That is why the matching rule in HOMEV12 had no effect and this
   block exists. Change H2 size here, not on a page. */
body.elementor-page [data-elementor-type] h2.elementor-heading-title {
  font-size: 38px !important;
  line-height: 1.25 !important;
}
@media (max-width: 767px) {
  body.elementor-page [data-elementor-type] h2.elementor-heading-title {
    font-size: 30px !important;
    line-height: 1.25 !important;
  }
}
/* BIGHEADS3 - corrects BIGHEADS2, which went too far.

   BIGHEADS2 put H2 at 38 desktop / 30 mobile. Measured after it went
   live, that collided with the H1:

     desktop   H1 40   H2 38    2px apart
     mobile    H1 30   H2 30    IDENTICAL, on home and the hub both

   The H1 is the ceiling and it is only 40/30, so H2 has limited room.
   36/28 is a real step up from the old 34/26 and still reads as
   subordinate.

   If H2 should be bigger than this, the H1 has to move first.
   Recommended pairing: H1 46/34, which frees H2 to sit at 38/30.
   Not done here because the desktop hero size was set deliberately.

   Scale is now H1 40 / H2 36 / H3 22 / body 17.

   line-height restored to 1.5, the value it had before BIGHEADS2
   tightened it to 1.25. That was an unrequested change. */
body.elementor-page [data-elementor-type] h2.elementor-heading-title {
  font-size: 36px !important;
  line-height: 1.5 !important;
}
@media (max-width: 767px) {
  body.elementor-page [data-elementor-type] h2.elementor-heading-title {
    font-size: 28px !important;
    line-height: 1.5 !important;
  }
}
/* NAVACTIVE1 - the current page's item in the MOBILE menu was a dark
   slate block with dark grey text on it.

   Measured in the open mobile menu:
     background  #3F444B   (Elementor's default active-item fill)
     text        #414042   (ours, from NAVHOVER2)
     contrast    about 1.02:1

   Two near-identical dark greys stacked, so the current page read as a
   grey smear rather than a highlight. Desktop is unaffected: there the
   active item is transparent with an underline.

   Active item now takes the light grey card fill with the brand green
   text, which is 5.1:1 and matches how the rest of the site marks
   things. Hover stays the light green from NAVHOVER4.

   ⚠️ MEASURING NOTE: nav items carry `transition: color 120ms,
   background-color 120ms`. When probing :hover or .elementor-item-active
   from the console, computed style returns the FROM value and the
   change looks like it failed. Add `transition: none` before reading
   or you will chase a rule that is actually working. Cost two wrong
   diagnoses on this bug. */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
  .elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
    background-color: #F4F4F4 !important;
    color: #117A3E !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   HEADSCALE1 - one heading scale for the whole site.

   Measured across all six pages at 1440 before writing this. What was
   actually live:

     H1   home 40.03 / hub 40.03 / contact 40 / commercial 40
          ABOUT 34          <- 6px small
          FAQ  40 but weight 800, everything else 900

     H3   home 22/750 · hub 22/750
          ABOUT 22/600     <- wrong weight
          FAQ   24/750     <- 2px big, and 22 on mobile where the rest are 20
          commercial 18/600  <- accordion titles, correct as is, left alone

     H2   36/750 everywhere, but the COLOUR was all over the place:
          home        #414042 grey, every heading
          hub         grey AND white AND green on one page
          about       #228B22 on "Our Mission", #117A3E on the rest
          faq/contact/commercial  #117A3E

   ── The colour decision: DARK GREY #414042 ────────────────────────
   Grey, not green, for three reasons:
     1. Home is already all grey and it is the most recently tuned page.
     2. Green is already doing three other jobs (brand fill, body links,
        the logo). If section headings are green too, green stops
        signalling anything.
     3. #414042 on white is 9.8:1. #117A3E is 5.42:1.

   ── The H1 scale ─────────────────────────────────────────────────
   Home and the hub use clamp(30px, 2.78vw, 52px), which is fluid and
   already tuned. The other four pages had flat values. Rather than
   flatten the good one, the fluid scale goes everywhere.
   At 1440 that is 40.03px, at 375 it clamps to 30px.

   ── Specificity ──────────────────────────────────────────────────
   Page rules reach (0,3,2), e.g. the FAQ's
   `body.elementor-page .elementor-563 .awc-faq h3`. These run (0,4,2)
   so they win on specificity rather than relying on load order.
   The single white-heading exception at the bottom runs (0,5,2).
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- H1 ---------- */
body.elementor-page [data-elementor-type] .elementor-widget h1.elementor-heading-title {
  font-size: clamp(30px, 2.78vw, 52px) !important;
  line-height: 1.16 !important;
  font-weight: 900 !important;
}

/* ---------- H3, heading widgets and raw h3 inside text editors ---------- */
body.elementor-page [data-elementor-type] .elementor-widget h3.elementor-heading-title,
body.elementor-page [data-elementor-type] .elementor-widget.elementor-widget-text-editor h3 {
  font-size: 22px !important;
  font-weight: 750 !important;
}
@media (max-width: 767px) {
  body.elementor-page [data-elementor-type] .elementor-widget h3.elementor-heading-title,
  body.elementor-page [data-elementor-type] .elementor-widget.elementor-widget-text-editor h3 {
    font-size: 20px !important;
  }
}

/* ---------- H2 and H3 colour ---------- */
body.elementor-page [data-elementor-type] .elementor-widget h2.elementor-heading-title,
body.elementor-page [data-elementor-type] .elementor-widget h3.elementor-heading-title,
body.elementor-page [data-elementor-type] .elementor-widget.elementor-widget-text-editor h3 {
  color: #414042 !important;
}

/* ---------- THE ONE EXCEPTION ----------
   Swept every h2 and h3 on all six pages for a light colour. Exactly
   one came back: the hub's reviews heading, which sits on the dark
   band and would become unreadable grey-on-dark. It stays white.
   If another dark-ground section is ever added, it needs a line here. */
body.elementor-page .elementor-336 .elementor-element.elementor-element-6e07f0f h2.elementor-heading-title {
  color: #FFFFFF !important;
}
/* HEADSCALE2 - the last H2 outlier.

   After HEADSCALE1 every H2 measured 36px except one: the hub's CTA
   heading "Ready to Book Your Dumpster?" at 34.56px, which is a 2.4vw
   fluid value set at page level and above BIGHEADS3's (0,3,2).

   1.44px is not visible on its own, but "consistent across all pages"
   was the brief, so the size joins the colour rule at (0,4,2). */
body.elementor-page [data-elementor-type] .elementor-widget h2.elementor-heading-title {
  font-size: 36px !important;
}
@media (max-width: 767px) {
  body.elementor-page [data-elementor-type] .elementor-widget h2.elementor-heading-title {
    font-size: 28px !important;
  }
}
/* LINKCOLOR1 - one colour for every in-copy link, sitewide.

   Swept every link on all six pages. Three different treatments were
   live, and one of them was not a brand colour at all:

     home rail CTAs  ("Get Waste Brokering" and 9 siblings)  #228B22
     FAQ body links  ("dumpster rental page", the phone)     #228B22
     ABOUT "FAQ page" link                                   #CC3366
                                                             ^ pink,
     an unstyled browser/theme default that nobody had ever set.

   All three go to #117A3E, the canonical brand green already used for
   the utility bar, the logo and the header.

   Why not keep the light green: #228B22 on white is **4.39:1**, under
   the 4.5 AA minimum for normal-size text. It has been carried as a
   known exception for a while. #117A3E is **5.42:1** and passes, and
   it is the same hue family, so nothing about the look changes except
   that the green is slightly deeper.

   Buttons are excluded. The yellow buttons keep near-black text and
   the CTA buttons keep white. */

/* in-copy links */
body.elementor-page [data-elementor-type="wp-page"] .elementor-widget-text-editor a:not(.elementor-button):not(.e-button-base),
body.elementor-page [data-elementor-type="wp-page"] .elementor-widget-heading a:not(.elementor-button):not(.e-button-base) {
  color: #117A3E !important;
}

/* the commercial rail card CTAs, which carry .elementor-button but
   render as plain green text rather than a filled button */
body.elementor-page .elementor-46 .elementor-element-e372486 a.elementor-button {
  color: #117A3E !important;
}
/* LINKCOLOR2 - corrects LINKCOLOR1 overreach.

   LINKCOLOR1 set in-copy links to #117A3E and excluded `.elementor-button`
   and `.e-button-base`. The hub's five "Book Online" buttons are neither:
   the size cards are hand-written markup inside a TEXT-EDITOR widget and
   the button class is `.awc-sz-btn`. So they were caught, and rendered
   green text on the yellow fill while every other button on the site is
   near-black on yellow.

   Verified with .matches(): the LINKCOLOR1 .elementor-8 does match them.
   My mistake, introduced earlier today.

   LINKCOLOR1 is (0,5,2). This runs (0,6,2) so it wins outright.

   Any future hand-rolled button inside a text widget needs adding here,
   or LINKCOLOR1 will colour it as body copy. */
body.elementor-page [data-elementor-type="wp-page"] .elementor-widget.elementor-widget-text-editor .awc-sz-foot a.awc-sz-btn,
body.elementor-page [data-elementor-type="wp-page"] .elementor-widget.elementor-widget-text-editor a.awc-sz-btn {
  color: #101010 !important;
}
/* CTATRUCK1 - one size for the truck in the final CTA, sitewide.

   All three CTA sections use the SAME file, awc-rolloff-cut.png, at
   three different sizes. Measured at 1440:

     FAQ    605 x 197   <- Ethan: "the truck size on the FAQ page is
     hub    531 x 173      better than the about us one"
     about  520 x 170

   Targeted on the filename rather than per-page widget IDs, because
   the image sits in a different widget on each page and ID-keyed rules
   on this build die silently whenever an element is rebuilt.

   width:100% with a max-width lets it shrink inside a narrower column
   rather than overflowing, so nothing breaks if a CTA row is ever
   re-laid out. */
body.elementor-page [data-elementor-type="wp-page"] img[src*="awc-rolloff-cut"] {
  width: 100% !important;
  max-width: 605px !important;
  height: auto !important;
}
/* CTATRUCK2 - exempt the hub HERO from CTATRUCK1.

   awc-rolloff-cut.png is used three times on the hub: the hero
   (12fbcba), a how-it-works step (26df910) and the final CTA (d0b8f50).
   CTATRUCK1 matched on filename, so it capped the hero too and took it
   from 624 to 605. Small, but unintended.

   Measured with the rule disabled: hero 624, CTA 531. Net effect of
   CTATRUCK1 that is actually wanted is the About CTA growing 520 -> 582.
   The hub CTA is unchanged at 531 because its column, not the image,
   is the constraint.

   The step image at 400px was never affected, being under the cap. */
body.elementor-page .elementor-336 .elementor-element-12fbcba img[src*="awc-rolloff-cut"] {
  max-width: none !important;
}
/* LINKCOLOR3 - generalises LINKCOLOR2 instead of naming classes.

   LINKCOLOR2 fixed `.awc-sz-btn` and its own comment warned that any
   future hand-rolled button inside a text widget would need adding.
   The commercial hub's `.awc-cs-btn` shipped an hour later and came out
   green on yellow, exactly as predicted.

   Matching on `[class*="-btn"]` covers awc-sz-btn, awc-cs-btn and
   anything named the same way from here, so this stops being a
   recurring bug. (0,5,2), same as LINKCOLOR1 but later in the file. */
body.elementor-page [data-elementor-type="wp-page"] .elementor-widget.elementor-widget-text-editor a[class*="-btn"] {
  color: #101010 !important;
}
/* CTATRUCK3 - corrects CTATRUCK2, which removed a ceiling instead of raising it.

   Ethan, on a wide monitor: "you made the dumpster way too big on the
   dumpster rental page... it looks fine normally, but I'm on a wide
   screen, so it looks way too big."

   Measured at 2560:
     hub hero panel   1273 wide
     truck            1185 x 386
     native file       920 x 300

   **29% past native**, so it was upscaling and going soft as well as
   dominating the layout.

   CTATRUCK2 set `max-width: none` on this image to exempt it from
   CTATRUCK1's 605px CTA cap. That removed the ceiling altogether rather
   than raising it, so the truck grew with the viewport without limit.

   680px instead. At 1440 the panel only offers 625, so **nothing changes
   at normal widths**, which is the size Ethan says looks right. At 2560
   it stops at 680 and never exceeds the 920 native.

   A first attempt at this went into post 336 as (0,3,1) and lost to
   CTATRUCK2's (0,4,2). Fixed here in the same file instead, same
   .elementor-8, later in the cascade. Tenth specificity miss on this build. */
body.elementor-page .elementor-336 .elementor-element-12fbcba img[src*="awc-rolloff-cut"] {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* LEGALPAGES - Privacy (774) and Terms (772).

   Both are plain prose pages built from one heading widget and one text
   widget, so they need the site's layout and type applied. Written here
   in the header template rather than twice in two page stylesheets,
   since the two pages are identical in structure and this keeps them
   from drifting apart.

   Measure is capped at 820px, which is the right call for a document
   people actually read. The commercial page's body copy was widened back
   to full width on request, but that is a marketing page; a privacy
   policy at 140 characters a line is punishing.

   H2 size is deliberately smaller than the sitewide 36. These are
   document sub-headings inside a long read, not section headings on a
   marketing page, and 36 would shout. */

body.page-id-774 .e-con.e-parent > .e-con-inner,
body.page-id-772 .e-con.e-parent > .e-con-inner {
  max-width: min(1300px, 100% - 160px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 64px !important;
  padding-bottom: 80px !important;
}

body.page-id-774 h1.elementor-heading-title,
body.page-id-772 h1.elementor-heading-title {
  color: #414042 !important;
  margin-bottom: 8px !important;
}

body.page-id-774 .elementor-widget-text-editor,
body.page-id-772 .elementor-widget-text-editor {
  max-width: 820px !important;
}

body.page-id-774 .elementor-widget-text-editor h2,
body.page-id-772 .elementor-widget-text-editor h2 {
  font-family: "Montserrat", "Libre Franklin", sans-serif !important;
  font-size: 24px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  color: #414042 !important;
  margin: 34px 0 12px !important;
}

body.page-id-774 .elementor-widget-text-editor p,
body.page-id-772 .elementor-widget-text-editor p,
body.page-id-774 .elementor-widget-text-editor li,
body.page-id-772 .elementor-widget-text-editor li {
  font-family: "Libre Franklin", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #101010 !important;
}
body.page-id-774 .elementor-widget-text-editor p,
body.page-id-772 .elementor-widget-text-editor p { margin: 0 0 16px !important; }

body.page-id-774 .elementor-widget-text-editor ul,
body.page-id-772 .elementor-widget-text-editor ul {
  margin: 0 0 18px !important;
  padding-left: 22px !important;
}
body.page-id-774 .elementor-widget-text-editor li,
body.page-id-772 .elementor-widget-text-editor li { margin-bottom: 7px !important; }

body.page-id-774 .elementor-widget-text-editor a,
body.page-id-772 .elementor-widget-text-editor a { color: #117A3E !important; }

@media (max-width: 767px) {
  body.page-id-774 .e-con.e-parent > .e-con-inner,
  body.page-id-772 .e-con.e-parent > .e-con-inner {
    max-width: calc(100% - 32px) !important;
    padding-top: 44px !important;
    padding-bottom: 56px !important;
  }
  body.page-id-774 .elementor-widget-text-editor h2,
  body.page-id-772 .elementor-widget-text-editor h2 { font-size: 21px !important; }
}
/* LEGALPAGES2 - containment fix for LEGALPAGES.

   LEGALPAGES scoped its rules to body.page-id-774 / body.page-id-772,
   which reaches the header and footer templates too, not just the page
   content. Measured against /about/ as a control, it changed four things
   in the footer of those two pages only:

     .e-con-inner   padding-bottom  48px -> 80px
     text editor    max-width       100% -> 820px
     footer p       Montserrat -> Libre Franklin, #FFF -> #101010,
                    line-height 1.65 -> 1.7, margin-bottom 8px -> 16px
     footer a       #FFF -> #117A3E

   The paragraph colour was the one that mattered: #101010 body text on
   the dark footer band, effectively invisible, on two pages and nowhere
   else. Caught by measuring, not by looking.

   Adding .elementor-location-header / -footer puts these one class above
   the LEGALPAGES .elementor-8s, so they win. Values below are the measured
   /about/ values, not guesses.

   This block is also the containment: everything in LEGALPAGES now
   applies to page content only. If a text editor with an h2, ul or li
   is ever added to the footer, extend the guard here. */

body.page-id-774 .elementor-location-header .e-con.e-parent > .e-con-inner,
body.page-id-772 .elementor-location-header .e-con.e-parent > .e-con-inner,
body.page-id-774 .elementor-location-footer .e-con.e-parent > .e-con-inner,
body.page-id-772 .elementor-location-footer .e-con.e-parent > .e-con-inner {
  padding-bottom: 48px !important;
}

body.page-id-774 .elementor-location-header .elementor-widget-text-editor,
body.page-id-772 .elementor-location-header .elementor-widget-text-editor,
body.page-id-774 .elementor-location-footer .elementor-widget-text-editor,
body.page-id-772 .elementor-location-footer .elementor-widget-text-editor {
  max-width: 100% !important;
}

body.page-id-774 .elementor-location-header .elementor-widget-text-editor p,
body.page-id-772 .elementor-location-header .elementor-widget-text-editor p,
body.page-id-774 .elementor-location-footer .elementor-widget-text-editor p,
body.page-id-772 .elementor-location-footer .elementor-widget-text-editor p {
  font-family: "Montserrat", "Libre Franklin", sans-serif !important;
  color: #FFFFFF !important;
  line-height: 1.65 !important;
  margin-bottom: 8px !important;
}

body.page-id-774 .elementor-location-header .elementor-widget-text-editor a,
body.page-id-772 .elementor-location-header .elementor-widget-text-editor a,
body.page-id-774 .elementor-location-footer .elementor-widget-text-editor a,
body.page-id-772 .elementor-location-footer .elementor-widget-text-editor a {
  color: #FFFFFF !important;
}
/* LEGALPAGES3 - kill the containers' own 40px horizontal padding.

   Measured: the Privacy and Terms e-cons were created with 40px left
   and right padding. About's carries 0. That padding stacks on top of
   the gutter LEGALPAGES sets on .e-con-inner, so these two pages ran
   1185px wide at desktop against every other page's 1265, and a cramped
   248px at 375 against 328.

   Zeroed here rather than in the element settings so it survives a
   rebuild of the container, and written against the page wrapper rather
   than the element id for the same reason. Gutter now comes from one
   place only, the max-width in LEGALPAGES. */

body.page-id-774 .elementor-774 > .e-con.e-parent,
body.page-id-772 .elementor-772 > .e-con.e-parent {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* LEGALPAGES4 - CORRECTION to LEGALPAGES2's footer restore.

   LEGALPAGES2 restored the footer by sampling ONE paragraph with
   querySelector and generalising it. That paragraph was .awc-f-name,
   the company name line, which is legitimately 17px Montserrat 900
   white. Every other footer paragraph is 15px Libre Franklin at 78%
   white, so the "restore" flattened ten of eleven paragraphs into the
   style of the one I happened to sample, and my own match check
   compared only that same first paragraph and reported a pass.

   This block mirrors the authored footer rules above verbatim rather
   than inferring them from computed style. Values are copied from the
   [data-elementor-type="footer"] rules in the FOOTER block, so if
   those change, change these with them.

   Specificity: adding .elementor alongside .elementor-location-footer
   puts these at (0,4,2), one class above the LEGALPAGES2 .elementor-8s, so
   they win by specificity rather than by document order. */

body.page-id-774 .elementor.elementor-location-footer .elementor-widget-text-editor p,
body.page-id-772 .elementor.elementor-location-footer .elementor-widget-text-editor p {
  font-family: "Libre Franklin", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, .78) !important;
  margin: 0 0 14px !important;
}

body.page-id-774 .elementor.elementor-location-footer .elementor-widget-text-editor p:last-child,
body.page-id-772 .elementor.elementor-location-footer .elementor-widget-text-editor p:last-child {
  margin-bottom: 0 !important;
}

body.page-id-774 .elementor.elementor-location-footer .elementor-widget-text-editor p.awc-f-brand,
body.page-id-772 .elementor.elementor-location-footer .elementor-widget-text-editor p.awc-f-brand {
  font-family: "Montserrat", "Libre Franklin", sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  margin: 0 0 12px !important;
}

body.page-id-774 .elementor.elementor-location-footer .elementor-widget-text-editor p.awc-f-name,
body.page-id-772 .elementor.elementor-location-footer .elementor-widget-text-editor p.awc-f-name {
  font-family: "Montserrat", "Libre Franklin", sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
  margin: 0 0 8px !important;
}

body.page-id-774 .elementor.elementor-location-footer .elementor-widget-text-editor p.awc-f-head,
body.page-id-772 .elementor.elementor-location-footer .elementor-widget-text-editor p.awc-f-head {
  font-family: "Montserrat", "Libre Franklin", sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  margin: 0 0 12px !important;
}

body.page-id-774 .elementor.elementor-location-footer .elementor-widget-text-editor p.awc-f-head-2,
body.page-id-772 .elementor.elementor-location-footer .elementor-widget-text-editor p.awc-f-head-2 {
  margin-top: 26px !important;
}

body.page-id-774 .elementor.elementor-location-footer .elementor-widget-text-editor p.awc-f-legal,
body.page-id-772 .elementor.elementor-location-footer .elementor-widget-text-editor p.awc-f-legal {
  font-family: "Libre Franklin", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, .55) !important;
  margin: 0 !important;
}
/* SERVICEPAGES1 - shared layout for the interior commercial service pages.
   Waste Consulting (798) and Waste Brokering (800).

   Every value below was MEASURED off the live commercial trash service
   page rather than reconstructed from its stylesheet, which by now runs
   to 37KB across a dozen superseding markers. Measured end state, at
   1440 and at 375, is the source of truth.

   Written once for both pages instead of twice per page, and scoped to
   the document wrapper .elementor-798 / .elementor-800 rather than
   body.page-id-N, which reaches the header and footer too. That mistake
   is recorded in LEGALPAGES2.

   Structural .elementor-8s, not element ids: first e-parent is the hero,
   last is the CTA. ID-keyed CSS on this build dies silently whenever an
   element is rebuilt. */

/* ── Hero, green band ──────────────────────────────────────────────── */

.elementor-798 > .e-con.e-parent:first-child,
.elementor-800 > .e-con.e-parent:first-child {
  background-color: #117A3E !important;
}

@media (min-width: 1025px) {
  .elementor-798 > .e-con.e-parent:first-child > .e-con-inner,
  .elementor-800 > .e-con.e-parent:first-child > .e-con-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    column-gap: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Copy column carries the page gutter itself, because the inner has
     gone full bleed so the image can reach the right edge. */
  .elementor-798 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget:not(.elementor-widget-image),
  .elementor-800 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget:not(.elementor-widget-image) {
    grid-column: 1 !important;
    padding-left: 80px !important;
    padding-right: 52px !important;
  }
  .elementor-798 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-heading,
  .elementor-800 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-heading {
    padding-top: 54px !important;
    padding-bottom: 22px !important;
  }
  .elementor-798 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-text-editor,
  .elementor-800 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-text-editor {
    padding-bottom: 34px !important;
  }
  .elementor-798 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-button,
  .elementor-800 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-button {
    padding-bottom: 54px !important;
  }

  /* The grey panel IS the image widget, stretched to fill its cell.
     Not a pseudo-element and not a container background. */
  .elementor-798 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-image,
  .elementor-800 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-image {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    background-color: #F4F4F5 !important;
    padding: 24px 10px 24px 57px !important;
    display: flex !important;
    align-items: center !important;
  }
  .elementor-798 > .e-con.e-parent:first-child .elementor-widget-image img,
  .elementor-800 > .e-con.e-parent:first-child .elementor-widget-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Below 1025 the hero becomes two stacked bands, photo above green.
   order:-1 does the reordering; the 100vw block is what makes the grey
   band reach both edges. overflow-x:clip on the parent is required
   because 100vw exceeds clientWidth by the scrollbar width. */
@media (max-width: 1024px) {
  .elementor-798 > .e-con.e-parent:first-child,
  .elementor-800 > .e-con.e-parent:first-child {
    overflow-x: clip !important;
  }
  .elementor-798 > .e-con.e-parent:first-child > .e-con-inner,
  .elementor-800 > .e-con.e-parent:first-child > .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 48px !important;
  }
  .elementor-798 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-image,
  .elementor-800 > .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-image {
    order: -1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 34px !important;
    padding: 28px 24px !important;
    background-color: #F4F4F5 !important;
  }
}

/* ── Body sections ─────────────────────────────────────────────────── */

@media (min-width: 1025px) {
  .elementor-798 > .e-con.e-parent:nth-child(2) .elementor-widget-text-editor p,
  .elementor-800 > .e-con.e-parent:nth-child(2) .elementor-widget-text-editor p,
  .elementor-798 > .e-con.e-parent:nth-child(2) .elementor-widget-text-editor li,
  .elementor-800 > .e-con.e-parent:nth-child(2) .elementor-widget-text-editor li {
    max-width: 820px !important;
  }
}

.elementor-798 > .e-con.e-parent:nth-child(2) > .e-con-inner,
.elementor-800 > .e-con.e-parent:nth-child(2) > .e-con-inner {
  padding-top: 58px !important;
  padding-bottom: 20px !important;
}

.elementor-798 > .e-con.e-parent:nth-child(2) .elementor-widget-heading,
.elementor-800 > .e-con.e-parent:nth-child(2) .elementor-widget-heading {
  margin-top: 34px !important;
  margin-bottom: 14px !important;
}
.elementor-798 > .e-con.e-parent:nth-child(2) .elementor-widget-heading:first-child,
.elementor-800 > .e-con.e-parent:nth-child(2) .elementor-widget-heading:first-child {
  margin-top: 0 !important;
}

.elementor-798 > .e-con.e-parent:nth-child(2) .elementor-widget-text-editor ul,
.elementor-800 > .e-con.e-parent:nth-child(2) .elementor-widget-text-editor ul {
  margin: 0 0 18px !important;
  padding-left: 22px !important;
}
.elementor-798 > .e-con.e-parent:nth-child(2) .elementor-widget-text-editor li,
.elementor-800 > .e-con.e-parent:nth-child(2) .elementor-widget-text-editor li {
  margin-bottom: 7px !important;
}

/* ── Closing CTA, grey band with the truck on the right ────────────── */

.elementor-798 > .e-con.e-parent:last-child,
.elementor-800 > .e-con.e-parent:last-child {
  background-color: #F4F4F4 !important;
}

@media (min-width: 1025px) {
  .elementor-798 > .e-con.e-parent:last-child > .e-con-inner,
  .elementor-800 > .e-con.e-parent:last-child > .e-con-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 632px) !important;
    align-items: center !important;
    column-gap: 44px !important;
    padding: 56px 0 !important;
  }
  .elementor-798 > .e-con.e-parent:last-child > .e-con-inner > .elementor-widget:not(.elementor-widget-image),
  .elementor-800 > .e-con.e-parent:last-child > .e-con-inner > .elementor-widget:not(.elementor-widget-image) {
    grid-column: 1 !important;
  }
  .elementor-798 > .e-con.e-parent:last-child > .e-con-inner > .elementor-widget-image,
  .elementor-800 > .e-con.e-parent:last-child > .e-con-inner > .elementor-widget-image {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
  }
  .elementor-798 > .e-con.e-parent:last-child .elementor-widget-image img,
  .elementor-800 > .e-con.e-parent:last-child .elementor-widget-image img {
    width: 600px !important;
    max-width: 600px !important;
    height: auto !important;
  }
}

.elementor-798 > .e-con.e-parent:last-child .elementor-widget-heading,
.elementor-800 > .e-con.e-parent:last-child .elementor-widget-heading {
  margin-bottom: 16px !important;
}
.elementor-798 > .e-con.e-parent:last-child .elementor-widget-button,
.elementor-800 > .e-con.e-parent:last-child .elementor-widget-button {
  margin-top: 26px !important;
}

@media (max-width: 1024px) {
  .elementor-798 > .e-con.e-parent:last-child > .e-con-inner,
  .elementor-800 > .e-con.e-parent:last-child > .e-con-inner {
    padding: 40px 0 !important;
  }
  .elementor-798 > .e-con.e-parent:last-child .elementor-widget-image,
  .elementor-800 > .e-con.e-parent:last-child .elementor-widget-image {
    margin-top: 24px !important;
  }
  .elementor-798 > .e-con.e-parent:last-child .elementor-widget-image img,
  .elementor-800 > .e-con.e-parent:last-child .elementor-widget-image img {
    max-width: 420px !important;
    height: auto !important;
  }
}
/* NAVACTIVE-DESKTOP - the active item in a DESKTOP dropdown was invisible.

   Measured on /commercial-trash-service/ with the Commercial dropdown
   open: the active sub-item rendered #414042 text on a #3F444B
   background. That is about 1.02:1. The item was there, readable as a
   dark grey block and nothing else.

   This is the same defect already fixed once, but that fix was written
   as `@media (max-width: 1024px)` on `nav.elementor-nav-menu--dropdown`,
   so it only ever covered the mobile burger menu. The desktop submenu,
   `nav.elementor-nav-menu--main .sub-menu`, was never touched.

   It stayed hidden because until today the Commercial dropdown held a
   single item, so the dark block looked like the panel's own styling.
   Adding Waste Consulting and Waste Brokering put two readable items
   beside it and the fault became obvious.

   Same treatment as the mobile fix so the two match: light grey card
   fill, brand green text. #117A3E on #F4F4F4 is 5.1:1. */

.elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active,
.elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active:hover,
.elementor-element.elementor-element-312bc31 nav.elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active:focus {
  background-color: #F4F4F4 !important;
  color: #117A3E !important;
}
/* RAILCUTOUT - stop the AllWaste container being stretched on the rail.

   The commercial rail cards render their image with `object-fit: fill`
   in a box whose ratio is 2.00. Photographs survive that because a
   little distortion in a scene is invisible. A product cut-out does
   not: awc container 401 is 800x310, ratio 2.58, so filling a 2.00 box
   stretches it about 29% vertically. The container reads short and fat
   and the AW logo on its side stretches with it.

   The size cards get away with the same fill because their box happens
   to be 2.57, near enough to the file's own ratio to hide it.

   `contain` keeps the true proportions and letterboxes into the card's
   own ground rather than cropping, which matters here because the logo
   sits centre-right and a cover crop could clip it.

   Scoped to this one widget deliberately. The other rail cards are
   photographs and should keep filling their boxes. */

.elementor-46 .elementor-element.elementor-element-a760501 img {
  object-fit: contain !important;
  object-position: center !important;
  background-color: #FFFFFF !important;
}
/* RAILCUTOUT2 - supersedes the white ground in RAILCUTOUT.

   RAILCUTOUT put the AllWaste container cut-out on #FFFFFF. Against
   neighbouring cards that carry edge-to-edge photographs, a cut-out on
   white reads as a bigger, more zoomed image even though it is
   letterboxed and actually smaller. The subject fills the frame while
   the photos have context around theirs.

   #F4F4F5 is the ground this build already uses behind cut-outs: the
   rental hub size cards, and the hero panels on all three heroes. Using
   it here makes the letterboxing look deliberate and sits the card with
   the rest of the set.

   Padding matches the size-card treatment so the container is inset
   rather than touching the card edges, which is the other half of why
   it read as oversized. */

.elementor-46 .elementor-element.elementor-element-a760501 img {
  object-fit: contain !important;
  object-position: center !important;
  background-color: #F4F4F5 !important;
  padding: 10px !important;
}
/* RAILCUTOUT3 - same treatment for the compactor cut-out.

   aw-stationary-compactor.png (891) is a transparent PNG at 2914x1440,
   ratio 2.02, which is near enough to the card's 2.00 box that `fill`
   would barely distort it. Using `contain` anyway so it matches the
   roll-off card exactly and cannot drift if the box ratio ever changes.

   Background is the same #F4F4F5 the roll-off card and the size cards
   use. Because the PNG carries real alpha, the grey shows through
   properly rather than sitting behind a white rectangle. */

.elementor-46 .elementor-element.elementor-element-1eb952c img {
  object-fit: contain !important;
  object-position: center !important;
  background-color: #F4F4F5 !important;
  padding: 10px !important;
}

/* ── LOGO3 (log 394): Hawk Waste Solutions wordmark, the hawk as the W ──
   Attachment 3043, the 768px rendition. The file is cropped to the ink,
   1097x283 (3.876:1), so the box is the logo and needs no offsets.
     desktop          56px tall -> 217x56 in the 104px bar, left-aligned
     1024 and down    44px tall -> 171x44, centred in the 68px bar
   Overrides LOGO1 and LOGO2 above by coming later with the same
   .elementor-8s. To go back to the old logo, delete this block.          */
.elementor-element-c56d1d5 > p a {
  width: 217px !important;
  height: 56px !important;
  background-image: url("https://hawkwastesolutions.com/wp-content/uploads/2026/09/hawk-waste-solutions-logo-768x198.png") !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 1024px) {
  .elementor-element.elementor-element-c56d1d5 > p { max-width: 171px !important; }
  .elementor-element-c56d1d5 > p a {
    width: 171px !important;
    height: 44px !important;
    background-size: contain !important;
    background-position: center !important;
  }
}
/* LOGO3 *//* End custom CSS */