/* Global mobile safety layer for all pages */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Desktop: make Service Areas dropdown match Services dropdown polish */
@media (min-width: 1024px) {
  #nav-links .nav-service-areas-mega {
    width: 240px !important;
    max-width: calc(100vw - 3rem) !important;
    padding: 0 !important;
    border: 1px solid rgba(216,156,72,0.28) !important;
    border-radius: 10px !important;
    overflow: visible !important;
    background: #0b0b0d !important;
    box-shadow: 0 24px 52px rgba(0,0,0,0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  #nav-links .nav-service-areas-mega a {
    display: block !important;
    padding: 1rem 1.15rem !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 1.18rem !important;
    font-weight: 900 !important;
    font-style: italic !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
    border-bottom: 1px solid rgba(216,156,72,0.14) !important;
    transition: background 0.22s ease, color 0.22s ease !important;
    border-radius: 6px !important;
    color: var(--gold, #D89C48) !important;
    background: transparent !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
  }

  #nav-links .nav-service-areas-mega a:hover {
    color: #fff !important;
    background: rgba(216,156,72,0.12) !important;
  }

  #nav-links .nav-service-areas-mega a:last-child {
    border-bottom: 0 !important;
  }
}

/* Footer brand description must remain centered on every page/template */
footer .footer-grid > div:first-child > p,
footer .footer-grid > div:first-child > p[style] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

/* Site-wide removal: "Our Work" + "Other Jobs We Handle" sections */
#gallery,
#who-we-work-with {
  display: none !important;
}

#testimonials .testi-gallery-grid {
  grid-template-columns: 1fr !important;
}

#testimonials .testi-left {
  grid-column: 1 / -1 !important;
}

/* Keep "What We Handle" kicker gold on item/service templates across all breakpoints */
main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:first-child p:first-child {
  color: #D89C48 !important;
}

/* Keep "What We Handle" + "Call the JOCKS" cards stacked for visual symmetry on desktop and mobile */
main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div {
  grid-template-columns: 1fr !important;
}

@media (max-width: 1023px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  #main-nav,
  #nav-inner,
  header,
  .site-header {
    max-width: 100%;
  }

  .mega-menu,
  .services-mega-menu,
  .services-mega-panel,
  .nav-mega,
  .dropdown-panel {
    max-width: min(96vw, 420px) !important;
    left: 0 !important;
    right: auto !important;
  }

  #mobile-menu {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  .hero {
    height: auto !important;
    min-height: clamp(380px, 120vw, 540px) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .hero-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 0.75rem !important;
  }

  .hero-text {
    max-width: 100% !important;
    padding-top: 0 !important;
  }

  .hero-copy {
    max-width: 100% !important;
    min-height: 0 !important;
  }

  .hero-mascot-wrap {
    width: min(76vw, 320px) !important;
    max-width: 320px !important;
    justify-self: center !important;
    align-self: end !important;
    margin: 0 auto -1rem !important;
  }

  .hero-mascot-wrap img {
    transform: none !important;
  }

  .service-steps-row,
  .states,
  .cards-grid,
  .services-grid,
  [class*="cards-grid"],
  [class*="services-grid"] {
    grid-template-columns: 1fr !important;
  }

  [class*="grid"] > * {
    min-width: 0;
  }

  .hero .btn-red,
  .hero .btn-gold-cta,
  .hero .btn-white,
  .hero .btn {
    max-width: 100%;
  }

  .mobile-submenu,
  .mobile-sub-links,
  .mobile-services-accordion-panel {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Mobile trust + readability sweep (site-wide) */
@media (max-width: 1023px) {
  #chat-nudge {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #nav-links {
    display: none !important;
  }

  #nav-actions .nav-phone-btn,
  #nav-actions .nav-quote-btn,
  #main-nav #nav-actions .nav-phone-btn,
  #main-nav #nav-actions .nav-quote-btn {
    display: none !important;
  }

  #hamburger {
    display: flex !important;
  }

  #nav-inner {
    grid-template-columns: minmax(110px, 1fr) auto !important;
    column-gap: 0.65rem !important;
    padding-inline: 0.85rem !important;
  }

  #nav-inner > a {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    grid-column: 1 !important;
    justify-self: start !important;
  }

  #nav-logo-wrap {
    height: 76px !important;
  }

  #nav-logo-wrap img {
    height: calc(100% - 0.5rem) !important;
  }

  #mobile-menu {
    inset: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(102px + env(safe-area-inset-top, 0px)) 0.28rem calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(0, 0, 0, 0.992) !important;
    backdrop-filter: blur(0px) saturate(1) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, -10px, 0) scale(0.987) !important;
    transform-origin: top center !important;
    transition:
      opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.52s,
      backdrop-filter 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #mobile-menu-inner {
    width: min(100%, 26.6rem) !important;
    align-items: stretch !important;
    gap: 0.72rem !important;
    margin: 0 auto !important;
    opacity: 0 !important;
    transform: translate3d(0, 12px, 0) scale(0.99) !important;
    transition:
      opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #mobile-menu.open,
  body.mobile-menu-open #mobile-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    backdrop-filter: blur(16px) saturate(1.05) !important;
    transition:
      opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s,
      backdrop-filter 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #mobile-menu.open #mobile-menu-inner,
  body.mobile-menu-open #mobile-menu-inner {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .mobile-menu-section {
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
  }

  .mobile-menu-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 0.82rem 0.94rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.9rem;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
  }

  .mobile-menu-caret {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
  }

  .mobile-menu-section.is-open .mobile-menu-caret {
    transform: rotate(180deg);
  }

  .mobile-menu-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    border-top: 1px solid rgba(216, 156, 72, 0);
  }

  .mobile-menu-section.is-open .mobile-menu-panel {
    border-top-color: rgba(216, 156, 72, 0.2);
  }

  .mobile-menu-panel a {
    display: block;
    padding: 0.68rem 0.94rem;
    color: #d89c48 !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.77rem;
    font-weight: 700;
    line-height: 1.3;
    border-top: 1px solid rgba(216, 156, 72, 0.24);
  }

  .mobile-menu-panel a:first-child {
    border-top: 0;
  }

  .mobile-menu-panel a:hover {
    color: #fff !important;
    background: rgba(216, 156, 72, 0.12);
  }

  .mobile-direct-link {
    display: block;
    width: 100%;
    border: 1px solid rgba(216, 156, 72, 0.24);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    padding: 0.88rem 0.94rem;
    color: #d89c48 !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: left;
  }

  .mobile-direct-link:hover {
    color: #fff !important;
    background: rgba(216, 156, 72, 0.12);
  }

  /* Legacy nested mobile-submenu styles removed.
     Canonical mobile menu is now a single top-level Services panel
     with three direct links rendered by assets/mobile-sweep.js. */

  /* Sitewide lock: force identical mobile menu sizing/spacing on every page */
  #mobile-menu #mobile-menu-inner {
    width: min(100%, 426px) !important;
    max-width: 426px !important;
    padding-top: clamp(14px, 3vh, 22px) !important;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 14px !important;
  }

  #mobile-menu #mobile-menu-inner .mobile-menu-section {
    width: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
  }

  #mobile-menu #mobile-menu-inner .mobile-menu-toggle {
    font-size: 12px !important;
    letter-spacing: 0.09em !important;
    font-weight: 900 !important;
    padding: 10px 12px !important;
    line-height: 1.2 !important;
  }

  #mobile-menu #mobile-menu-inner .mobile-menu-panel a {
    font-size: 12px !important;
    line-height: 1.28 !important;
    letter-spacing: 0.08em !important;
    font-weight: 800 !important;
    padding: 10px 12px !important;
  }

  main section {
    padding-top: clamp(2rem, 6vw, 3rem) !important;
    padding-bottom: clamp(2rem, 6vw, 3rem) !important;
  }
}

@media (max-width: 767px) {
  footer,
  footer p,
  footer a,
  footer li,
  footer h2,
  footer h3,
  footer h4,
  footer h5,
  footer h6,
  footer span,
  footer div {
    text-align: center !important;
  }

  footer .footer-inner {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  footer .footer-grid,
  footer .footer-grid[style] {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  footer .footer-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  footer .footer-grid > div > div,
  footer .footer-grid > div > div > div {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  footer .footer-grid > div p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Lock footer visual scale to home-page standard across all pages */
  footer .footer-grid > div:first-child img {
    height: 8rem !important;
    object-fit: contain !important;
    margin-bottom: 1.25rem !important;
    filter: brightness(1.1) !important;
  }

  footer .footer-grid > div:first-child > p {
    font-size: 0.72rem !important;
    line-height: 1.9 !important;
    max-width: 22rem !important;
    margin: 0 0 1.5rem !important;
    text-align: center !important;
  }

  footer .footer-grid > div:nth-child(2) li,
  footer .footer-grid > div:nth-child(3) p {
    font-size: 0.72rem !important;
    line-height: 2 !important;
  }

  footer .footer-social-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  footer img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 16px !important;
  }

  .container,
  .content-shell,
  .page-shell,
  .hero-inner {
    padding-inline: 1rem !important;
  }

  .hero {
    min-height: 0 !important;
    padding-top: clamp(2.7rem, 9vw, 3.4rem) !important;
    padding-bottom: clamp(2.1rem, 7vw, 2.8rem) !important;
  }

  /* Keep hero mascot visually connected to hero bottom on phones */
  .hero:has(.hero-mascot-wrap) {
    padding-bottom: 0 !important;
  }

  .hero:has(.hero-mascot-wrap) .hero-text {
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero:has(.hero-mascot-wrap) .hero-text .junk-ribbon {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero:has(.hero-mascot-wrap) .hero-text .junk-hero-title-lock {
    font-size: clamp(1.95rem, 8.7vw, 2.85rem) !important;
    line-height: 0.96 !important;
    white-space: nowrap !important;
  }

  .hero:has(.hero-mascot-wrap) .hero-text > div[style*="display:flex"] {
    justify-content: center !important;
    width: 100% !important;
  }

  .hero-layout {
    min-height: 100% !important;
  }

  .hero-mascot-wrap {
    align-self: end !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }

  h1 {
    font-size: clamp(2.2rem, 11vw, 3.5rem) !important;
    line-height: 1.02 !important;
  }

  h2 {
    font-size: clamp(1.5rem, 8vw, 2.3rem) !important;
    line-height: 1.08 !important;
  }

  h3 {
    font-size: clamp(1.05rem, 5vw, 1.3rem) !important;
    line-height: 1.2 !important;
  }

  p,
  li,
  .hero-copy,
  .section-lead {
    font-size: clamp(0.96rem, 3.9vw, 1.03rem) !important;
    line-height: 1.62 !important;
  }

  [style*="font-size:0.5"],
  [style*="font-size:0.55"],
  [style*="font-size:0.6"],
  [style*="font-size:0.63"],
  [style*="font-size:0.64"],
  [style*="font-size:0.65"],
  [style*="font-size:0.66"],
  [style*="font-size:0.68"],
  [style*="font-size:0.72"],
  [style*="font-size:0.74"],
  [style*="font-size:0.75"],
  [style*="font-size:0.78"],
  [style*="font-size:0.8"],
  [style*="font-size:0.82"],
  [style*="font-size:0.84"],
  [style*="font-size:0.88"],
  [style*="font-size:0.9"],
  [style*="font-size:0.92"] {
    font-size: clamp(0.94rem, 3.8vw, 1rem) !important;
    line-height: 1.6 !important;
  }

  .btn-red,
  .btn-white,
  .btn-gold,
  .btn-gold-cta {
    min-height: 50px !important;
    padding-inline: 1rem !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.08em !important;
  }

  .steps-grid,
  .service-steps-row,
  .cards-grid,
  .services-grid,
  .support-grid,
  .trust-row,
  [class*="cards-grid"],
  [class*="services-grid"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .step-card,
  .service-card,
  .support-card,
  .factor-card,
  .info-card {
    padding: 0.95rem !important;
    border-radius: 12px !important;
  }

  .check-row {
    padding: 0.72rem 0.8rem !important;
  }

  .save-list li {
    padding: 0.66rem 0.74rem !important;
  }

  .service-steps-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .service-steps-row > article:nth-child(1) { order: 1 !important; }
  .service-steps-row > article:nth-child(2) { order: 2 !important; }
  .service-steps-row > article:nth-child(3) { order: 3 !important; }

  main:has(.service-steps-row),
  main:has(.service-flow-shell) {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Enforce section flow on item/service templates:
     Hero -> Steps -> What We Handle + Call the JOCKS -> remaining sections */
  main:has(.service-steps-row) > section {
    order: 4 !important;
  }

  main:has(.service-steps-row) > section.hero {
    order: 1 !important;
  }

  main:has(.service-steps-row) > section:has(.service-steps-row) {
    order: 2 !important;
  }

  main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) {
    order: 3 !important;
  }

  main:has(.service-steps-row) > section:has(.service-steps-row) > div > article:nth-child(1) {
    order: 1 !important;
  }
  main:has(.service-steps-row) > section:has(.service-steps-row) > div > article:nth-child(2) {
    order: 2 !important;
  }
  main:has(.service-steps-row) > section:has(.service-steps-row) > div > article:nth-child(3) {
    order: 3 !important;
  }

  /* Demolition hub uses a wrapper div after hero; keep hero first there too */
  main:has(.service-flow-shell) > * {
    order: 3 !important;
  }

  main:has(.service-flow-shell) > section.hero {
    order: 1 !important;
  }

  main:has(.service-flow-shell) > .service-flow-shell {
    order: 2 !important;
  }

  /* Stack "What We Handle / Call the JOCKS" two-column rows on mobile */
  div[style*="grid-template-columns:minmax(0,2fr)"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  div[style*="grid-template-columns:minmax(0,2fr) minmax(260px,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Match junk-removal card typography for "What We Handle" + "Call the JOCKS" */
  main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:first-child p:first-child {
    font-size: 0.66rem !important;
    letter-spacing: 0.22em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin-bottom: 0.32rem !important;
  }

  main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:first-child h2 {
    font-size: clamp(2rem, 8.9vw, 2.48rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    margin-bottom: 0.62rem !important;
  }

  main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:first-child p {
    font-size: 1rem !important;
    line-height: 1.62 !important;
    color: rgba(0, 0, 0, 0.74) !important;
  }

  main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:nth-child(2) p:first-child {
    font-size: 0.66rem !important;
    letter-spacing: 0.2em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin-bottom: 0.46rem !important;
  }

  main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:nth-child(2) h3 {
    font-size: 1.28rem !important;
    line-height: 1.12 !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    margin-bottom: 0.5rem !important;
  }

  main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:nth-child(2) p {
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
  }

  main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:nth-child(2) .btn-red {
    min-height: 40px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.08em !important;
    padding: 0.52rem 0.9rem !important;
  }
}

/* Desktop fallback: force mobile mode via ?mobile=1 */
html.mobile-force body {
  font-size: 16px !important;
}

html.mobile-force #nav-links {
  display: none !important;
}

html.mobile-force #chat-nudge {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.mobile-force #nav-actions .nav-phone-btn,
html.mobile-force #nav-actions .nav-quote-btn {
  display: none !important;
}

html.mobile-force #hamburger {
  display: flex !important;
}

html.mobile-force #nav-inner {
  grid-template-columns: minmax(110px, 1fr) auto !important;
  column-gap: 0.65rem !important;
  padding-inline: 0.85rem !important;
}

html.mobile-force #nav-inner > a {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  grid-column: 1 !important;
  justify-self: start !important;
}

html.mobile-force #nav-logo-wrap {
  height: 76px !important;
}

html.mobile-force #mobile-menu {
  inset: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 102px 0.28rem 86px !important;
  background: rgba(0, 0, 0, 0.992) !important;
  backdrop-filter: blur(0px) saturate(1) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, -10px, 0) scale(0.987) !important;
  transform-origin: top center !important;
  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.52s,
    backdrop-filter 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html.mobile-force #mobile-menu-inner {
  width: min(100%, 26.6rem) !important;
  align-items: stretch !important;
  gap: 0.72rem !important;
  margin: 0 auto !important;
  opacity: 0 !important;
  transform: translate3d(0, 12px, 0) scale(0.99) !important;
  transition:
    opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html.mobile-force #mobile-menu.open,
html.mobile-force body.mobile-menu-open #mobile-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  backdrop-filter: blur(16px) saturate(1.05) !important;
  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s,
    backdrop-filter 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html.mobile-force #mobile-menu.open #mobile-menu-inner,
html.mobile-force body.mobile-menu-open #mobile-menu-inner {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

html.mobile-force .container,
html.mobile-force .content-shell,
html.mobile-force .page-shell,
html.mobile-force .hero-inner {
  padding-inline: 1rem !important;
}

html.mobile-force .hero {
  min-height: 0 !important;
  padding-top: clamp(2.7rem, 9vw, 3.4rem) !important;
  padding-bottom: clamp(2.1rem, 7vw, 2.8rem) !important;
}

html.mobile-force .hero:has(.hero-mascot-wrap) {
  padding-bottom: 0 !important;
}

html.mobile-force .hero:has(.hero-mascot-wrap) .hero-text {
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
  text-align: center !important;
}

html.mobile-force .hero:has(.hero-mascot-wrap) .hero-text .junk-ribbon {
  margin-left: auto !important;
  margin-right: auto !important;
}

html.mobile-force .hero:has(.hero-mascot-wrap) .hero-text .junk-hero-title-lock {
  font-size: clamp(1.95rem, 8.7vw, 2.85rem) !important;
  line-height: 0.96 !important;
  white-space: nowrap !important;
}

html.mobile-force .hero:has(.hero-mascot-wrap) .hero-text > div[style*="display:flex"] {
  justify-content: center !important;
  width: 100% !important;
}

html.mobile-force .hero-layout {
  min-height: 100% !important;
}

html.mobile-force .hero-mascot-wrap {
  align-self: end !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

html.mobile-force h1 {
  font-size: clamp(2.2rem, 11vw, 3.5rem) !important;
  line-height: 1.02 !important;
}

html.mobile-force h2 {
  font-size: clamp(1.5rem, 8vw, 2.3rem) !important;
  line-height: 1.08 !important;
}

html.mobile-force h3 {
  font-size: clamp(1.05rem, 5vw, 1.3rem) !important;
  line-height: 1.2 !important;
}

html.mobile-force p,
html.mobile-force li,
html.mobile-force .hero-copy,
html.mobile-force .section-lead {
  font-size: clamp(0.96rem, 3.9vw, 1.03rem) !important;
  line-height: 1.62 !important;
}

html.mobile-force .steps-grid,
html.mobile-force .service-steps-row,
html.mobile-force .cards-grid,
html.mobile-force .services-grid,
html.mobile-force .support-grid,
html.mobile-force .trust-row,
html.mobile-force [class*="cards-grid"],
html.mobile-force [class*="services-grid"] {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}

html.mobile-force .service-steps-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

html.mobile-force .service-steps-row > article:nth-child(1) { order: 1 !important; }
html.mobile-force .service-steps-row > article:nth-child(2) { order: 2 !important; }
html.mobile-force .service-steps-row > article:nth-child(3) { order: 3 !important; }

html.mobile-force main:has(.service-steps-row),
html.mobile-force main:has(.service-flow-shell) {
  display: flex !important;
  flex-direction: column !important;
}

html.mobile-force main:has(.service-steps-row) > section {
  order: 4 !important;
}

html.mobile-force main:has(.service-steps-row) > section.hero {
  order: 1 !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(.service-steps-row) {
  order: 2 !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) {
  order: 3 !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(.service-steps-row) > div > article:nth-child(1) {
  order: 1 !important;
}
html.mobile-force main:has(.service-steps-row) > section:has(.service-steps-row) > div > article:nth-child(2) {
  order: 2 !important;
}
html.mobile-force main:has(.service-steps-row) > section:has(.service-steps-row) > div > article:nth-child(3) {
  order: 3 !important;
}

html.mobile-force main:has(.service-flow-shell) > * {
  order: 3 !important;
}

html.mobile-force main:has(.service-flow-shell) > section.hero {
  order: 1 !important;
}

html.mobile-force main:has(.service-flow-shell) > .service-flow-shell {
  order: 2 !important;
}

html.mobile-force div[style*="grid-template-columns:minmax(0,2fr)"] {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}

html.mobile-force div[style*="grid-template-columns:minmax(0,2fr) minmax(260px,1fr)"] {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:first-child p:first-child {
  font-size: 0.66rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin-bottom: 0.32rem !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:first-child h2 {
  font-size: clamp(2rem, 8.9vw, 2.48rem) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  margin-bottom: 0.62rem !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:first-child p {
  font-size: 1rem !important;
  line-height: 1.62 !important;
  color: rgba(0, 0, 0, 0.74) !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:nth-child(2) p:first-child {
  font-size: 0.66rem !important;
  letter-spacing: 0.2em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin-bottom: 0.46rem !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:nth-child(2) h3 {
  font-size: 1.28rem !important;
  line-height: 1.12 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:nth-child(2) p {
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}

html.mobile-force main:has(.service-steps-row) > section:has(> div[style*="grid-template-columns:minmax(0,2fr)"]) > div > article:nth-child(2) .btn-red {
  min-height: 40px !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.08em !important;
  padding: 0.52rem 0.9rem !important;
}

/* ===== Premium Rhythm Polish (global, low-risk) ===== */
:root {
  --jocks-shell-max: 80rem;
  --jocks-copy-max: 56rem;
  --jocks-desktop-section-space: clamp(3.5rem, 5.2vw, 5.8rem);
  --jocks-mobile-section-space: clamp(2.5rem, 8vw, 3.5rem);
  --jocks-inner-gap-desktop: clamp(1rem, 1.8vw, 1.7rem);
  --jocks-inner-gap-mobile: clamp(0.7rem, 3.6vw, 1rem);
}

/* Keep major shells consistent without redesigning the visual language */
main > section > div[style*="max-width:80rem"],
main > section > div[style*="max-width: 80rem"] {
  max-width: var(--jocks-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main > section > div[style*="max-width:56rem"],
main > section > div[style*="max-width: 56rem"] {
  max-width: var(--jocks-copy-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Align section text rhythm across service/state/review templates */
.section-kicker {
  margin-bottom: 0.45rem !important;
}

.section-title {
  margin-bottom: 0.68rem !important;
}

.section-copy,
.hero-copy {
  max-width: 54rem;
  line-height: 1.62 !important;
}

/* Stabilize common interactive regions to reduce perceived "jumping" */
#testimonial-container {
  min-height: clamp(220px, 24vw, 290px) !important;
}

#contact .demo-jobber-shell {
  min-height: clamp(640px, 62vw, 820px) !important;
}

#contact .demo-jobber-target,
#contact .demo-jobber-target iframe {
  min-height: inherit !important;
}

.ba-compare {
  aspect-ratio: 16 / 10;
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem !important;
}

@media (min-width: 768px) {
  main > section.hero + section {
    margin-top: var(--jocks-desktop-section-space);
  }

  main > section > div[style*="max-width:80rem"],
  main > section > div[style*="max-width: 80rem"] {
    padding-left: clamp(1.25rem, 1.8vw, 1.6rem) !important;
    padding-right: clamp(1.25rem, 1.8vw, 1.6rem) !important;
  }
}

@media (max-width: 767px) {
  main > section.hero + section {
    margin-top: var(--jocks-mobile-section-space);
  }

  .section-copy,
  .hero-copy {
    max-width: 100% !important;
  }

  .hero-btns {
    justify-content: center !important;
    gap: var(--jocks-inner-gap-mobile) !important;
  }

  .hero-btns > a,
  .hero-btns > button {
    min-width: min(100%, 15.6rem);
  }

  #testimonial-container {
    min-height: 260px !important;
  }

  #contact .demo-jobber-shell {
    min-height: 620px !important;
  }

  /* Keep mobile sticky CTA bar buttons compact and even */
  #mobile-cta-bar a {
    min-height: 46px !important;
    padding: 0.58rem 0.85rem !important;
    line-height: 1.05 !important;
    font-size: 0.78rem !important;
  }

  /* Tighten the small black-card "CALL NOW!" button on service item pages */
  a.btn-red[style*="margin-top:0.7rem"][style*="font-size:0.66rem"] {
    min-height: 40px !important;
    padding: 0.52rem 0.92rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
  }
}

/* ===== Global Mobile Hamburger Lock (site-wide parity) ===== */
@media (max-width: 1023px) {
  #main-nav {
    z-index: 12000 !important;
    transition:
      background-color 0.44s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.44s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.44s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.44s cubic-bezier(0.22, 1, 0.36, 1),
      backdrop-filter 0.44s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #nav-inner {
    grid-template-columns: 160px 1fr auto !important;
    align-items: center !important;
    column-gap: 0.45rem !important;
  }

  #nav-inner > a {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  #nav-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  /* Match reduce-waste behavior: keep nav visible while menu is open so
     the hamburger-to-X animation remains visible on every page. */
  body.mobile-menu-open #main-nav {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.985) !important;
    background-color: rgba(0, 0, 0, 0.985) !important;
    border-bottom: 1px solid rgba(216, 156, 72, 0.28) !important;
    backdrop-filter: blur(10px) saturate(1.02) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34) !important;
  }

  body.mobile-menu-open #main-nav #hamburger {
    display: flex !important;
  }

  /* Higher-specificity safety lock: defeat page-level
     `body.mobile-menu-open #main-nav { display:none !important; }` */
  html body.mobile-menu-open nav#main-nav,
  html body.mobile-menu-open #main-nav {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.mobile-menu-open nav#main-nav #hamburger,
  html body.mobile-menu-open #main-nav #hamburger {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #hamburger {
    display: flex !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  #hamburger span {
    display: block !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 2px !important;
    min-height: 2px !important;
    max-height: 2px !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    background: #fff !important;
    flex: 0 0 2px !important;
    transform-origin: center !important;
    transition: transform 0.25s ease, opacity 0.2s ease !important;
  }

  #hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  #hamburger.open span:nth-child(2) {
    opacity: 0 !important;
  }

  #hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* Use hamburger morph as the only close control site-wide */
  #mobile-menu-close,
  #mobile-menu.open #mobile-menu-close,
  body.mobile-menu-open #mobile-menu-close {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Keep panel below navbar so nav + morphing hamburger stay visible */
  #mobile-menu,
  #mobile-menu.open,
  body.mobile-menu-open #mobile-menu {
    inset: 76px 0 0 0 !important;
    top: 76px !important;
    height: calc(100dvh - 76px) !important;
    max-height: calc(100dvh - 76px) !important;
    z-index: 11900 !important;
  }
}

@media (max-width: 360px) {
  #hamburger {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  #hamburger span {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
  }
}

html.mobile-force #nav-inner {
  grid-template-columns: 160px 1fr auto !important;
}

html.mobile-force #nav-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

html.mobile-force #hamburger {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}

html.mobile-force #hamburger span {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  background: #fff !important;
  flex: 0 0 2px !important;
  transform-origin: center !important;
  transition: transform 0.25s ease, opacity 0.2s ease !important;
}

html.mobile-force #hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}

html.mobile-force #hamburger.open span:nth-child(2) {
  opacity: 0 !important;
}

html.mobile-force #hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

html.mobile-force #main-nav {
  z-index: 12000 !important;
  transition:
    background-color 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 0.44s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html.mobile-force body.mobile-menu-open #main-nav {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.985) !important;
  background-color: rgba(0, 0, 0, 0.985) !important;
  border-bottom: 1px solid rgba(216, 156, 72, 0.28) !important;
  backdrop-filter: blur(10px) saturate(1.02) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34) !important;
}

html.mobile-force body.mobile-menu-open nav#main-nav #hamburger,
html.mobile-force body.mobile-menu-open #main-nav #hamburger {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html.mobile-force #mobile-menu-close,
html.mobile-force #mobile-menu.open #mobile-menu-close,
html.mobile-force body.mobile-menu-open #mobile-menu-close {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.mobile-force #mobile-menu,
html.mobile-force #mobile-menu.open,
html.mobile-force body.mobile-menu-open #mobile-menu {
  inset: 76px 0 0 0 !important;
  top: 76px !important;
  height: calc(100dvh - 76px) !important;
  max-height: calc(100dvh - 76px) !important;
  z-index: 11900 !important;
}

/* ===== Global Quality Polish ===== */
html {
  scroll-padding-top: 96px;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

/* Keep primary mobile controls readable and non-wrapping */
#mobile-cta-bar a,
#nav-actions a,
#mobile-menu-inner a {
  white-space: nowrap;
}

/* Consistent visible keyboard focus for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(216, 156, 72, 0.92) !important;
  outline-offset: 2px !important;
}

/* Guard against accidental nav control stacking in small widths */
@media (max-width: 1023px) {
  #nav-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
}

/* ===== Final mobile lock: home chips + reduce-waste globe/card ===== */
@media (max-width: 767px) {
  /* Home page recycling chips: keep all three balanced and non-cramped */
  body.home-page .waste-chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.28rem !important;
    width: 100% !important;
  }

  body.home-page .waste-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    gap: 0.27rem !important;
    padding: 0.44rem 0.38rem !important;
  }

  body.home-page .waste-chip img,
  body.home-page .waste-chip svg {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
  }

  body.home-page .waste-chip.repurpose svg {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    stroke-width: 2.35 !important;
  }

  /* Reduce-waste hero composition: bigger globe + wider, shorter card */
  body.reduce-waste-page .hero-card-wrap {
    position: relative !important;
    min-height: 17.8rem !important;
    display: block !important;
    width: min(100%, 22rem) !important;
    margin: 0 auto !important;
    transform: translateY(-0.35rem) !important;
  }

  body.reduce-waste-page .hero-card-wrap::before {
    position: absolute !important;
    inset: auto !important;
    left: -1.05rem !important;
    right: auto !important;
    top: auto !important;
    bottom: -0.15rem !important;
    width: clamp(14.9rem, 66vw, 17.6rem) !important;
    height: clamp(14.9rem, 66vw, 17.6rem) !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1 !important;
  }

  body.reduce-waste-page .hero .hero-card {
    position: absolute !important;
    left: auto !important;
    right: 0.05rem !important;
    top: 0.25rem !important;
    width: clamp(12.9rem, 55vw, 14.65rem) !important;
    padding: 0.78rem 0.92rem 0.72rem !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 3 !important;
    border-radius: 16px !important;
  }

  body.reduce-waste-page .hero-card h2 {
    font-size: 1rem !important;
    line-height: 0.96 !important;
    margin-bottom: 0.42rem !important;
  }

  body.reduce-waste-page .hero-card ul {
    gap: 0.46rem !important;
  }

  body.reduce-waste-page .hero-card li {
    grid-template-columns: 0.82rem 1fr !important;
    gap: 0.42rem !important;
    font-size: 0.71rem !important;
    line-height: 1.24 !important;
  }

  body.reduce-waste-page .why-matters-section {
    margin-top: -1.55rem !important;
    padding-top: 0 !important;
  }
}