/* TMD final mobile navigation + gallery filter hardening — 2026-09-20 */
@media (max-width: 1100px) {
  html.menu-open,
  body.menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body .site-header {
    z-index: 1001 !important;
  }

  body .menu-toggle,
  body.menu-open .menu-toggle {
    position: relative !important;
    inset: auto !important;
    z-index: 1003 !important;
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation;
  }

  body .site-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding:
      calc(var(--mobile-menu-top, var(--header-height, 76px)) + 18px)
      max(22px, env(safe-area-inset-right))
      calc(30px + env(safe-area-inset-bottom))
      max(22px, env(safe-area-inset-left)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    white-space: normal !important;
    background: #f7faf4 !important;
    background-image: none !important;
    color: #173725 !important;
    border: 0 !important;
    border-radius: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(100%, 0, 0) !important;
    transition:
      transform .28s cubic-bezier(.22,.75,.24,1),
      opacity .18s ease,
      visibility 0s linear .28s !important;
    will-change: transform;
  }

  body .site-nav.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    transition-delay: 0s !important;
  }

  body .site-nav > a,
  body .nav-dropdown > summary {
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(87,120,91,.24) !important;
    font-family: var(--sans) !important;
    font-size: 1.06rem !important;
    line-height: 1.35 !important;
    touch-action: manipulation;
  }

  body .nav-dropdown > summary {
    justify-content: space-between !important;
  }

  body .nav-submenu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px 0 12px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body .nav-submenu a {
    min-height: 46px !important;
    padding: 10px 8px !important;
    display: flex !important;
    align-items: center !important;
    font-size: .94rem !important;
    touch-action: manipulation;
  }

  body .nav-mobile-bottom {
    width: 100% !important;
    max-width: none !important;
    margin: auto 0 0 !important;
    padding-top: 24px !important;
  }

  body .nav-mobile-bottom .btn {
    width: 100% !important;
    min-height: 54px !important;
  }

  /* Snow page: force the header and drawer to use the same winter palette.
     This is loaded after snow-removal-winter.css, so the hamburger cannot be
     obscured or inherit a mismatched menu state. */
  body.snow-page .site-nav,
  body.snow-page.winter-redesign .site-nav {
    background: #102936 !important;
    color: #fff !important;
  }

  body.snow-page.menu-open .site-header,
  html.menu-open body.snow-page .site-header,
  body.snow-page.winter-redesign.menu-open .site-header,
  html.menu-open body.snow-page.winter-redesign .site-header {
    z-index: 1002 !important;
    background: #102936 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.14) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.snow-page .site-nav > a,
  body.snow-page .nav-dropdown > summary {
    color: #fff !important;
    border-bottom-color: rgba(255,255,255,.15) !important;
  }

  body.snow-page .nav-submenu,
  body.snow-page .nav-submenu a {
    color: #fff !important;
    background: transparent !important;
  }

  body.snow-page .menu-toggle,
  body.snow-page.menu-open .menu-toggle {
    color: #fff !important;
    border-color: rgba(255,255,255,.35) !important;
    background: transparent !important;
  }

  body.snow-page .menu-toggle span,
  body.snow-page.menu-open .menu-toggle span {
    background: #fff !important;
  }
}

@media (max-width: 619px) {
  body .brand-copy { display: none !important; }
  body .header-quote { display: none !important; }
  body .header-actions { gap: 8px !important; }
  body .nav-shell { gap: 8px !important; }
}

/* Gallery filters: no sideways swipe on phones. Let the controls wrap into
   centered rows so Before & After is always visible. */
@media (max-width: 620px) {
  body .gallery-filter-bar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    border-radius: 18px !important;
    margin-inline: auto !important;
  }

  body .gallery-filter-bar .filter-btn {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* -------------------------------------------------------------------------
   Canonical mobile navigation: use the exact homepage drawer system on every
   page, including Lawn Care and Snow Removal. This block intentionally sits
   last so page-specific redesign CSS cannot override the working home menu.
   ------------------------------------------------------------------------- */
@media (max-width:1100px){
  html.menu-open,body.menu-open{overflow:hidden!important;overscroll-behavior:none!important}
  html body .site-header{z-index:1200!important}

  html.menu-open body .site-header,
  body.menu-open .site-header{
    background:rgba(246,249,243,.99)!important;
    color:#173725!important;
    border-color:rgba(23,55,37,.12)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:0 8px 24px rgba(18,55,35,.10)!important;
  }

  html body #main-navigation.site-nav{
    position:fixed!important;
    inset:var(--mobile-menu-top,var(--header-height,76px)) 0 0 0!important;
    z-index:1190!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:18px max(22px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    white-space:normal!important;
    background:#f7faf4!important;
    background-image:none!important;
    color:#173725!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translate3d(100%,0,0)!important;
    transition:transform .28s cubic-bezier(.22,.75,.24,1),opacity .18s ease,visibility 0s linear .28s!important;
  }

  html body #main-navigation.site-nav.is-open{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition-delay:0s!important;
  }

  html body #main-navigation.site-nav>a,
  html body #main-navigation.site-nav .nav-dropdown>summary{
    width:100%!important;
    min-height:52px!important;
    margin:0!important;
    padding:14px 0!important;
    display:flex!important;
    align-items:center!important;
    color:#173725!important;
    background:transparent!important;
    border:0!important;
    border-bottom:1px solid rgba(87,120,91,.22)!important;
    font-family:var(--sans)!important;
    font-size:1.06rem!important;
    font-weight:700!important;
    line-height:1.35!important;
    text-decoration:none!important;
  }

  html body #main-navigation.site-nav>a[aria-current="page"]{color:#176840!important}

  html body #main-navigation.site-nav .nav-dropdown{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    color:#173725!important;
  }

  html body #main-navigation.site-nav .nav-dropdown>summary{
    justify-content:space-between!important;
    list-style:none!important;
  }

  html body #main-navigation.site-nav .nav-dropdown>summary .icon{color:#173725!important}

  html body #main-navigation.site-nav .nav-submenu{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:6px 0 12px 14px!important;
    color:#173725!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }

  html body #main-navigation.site-nav .nav-submenu a{
    min-height:46px!important;
    padding:10px 8px!important;
    display:flex!important;
    align-items:center!important;
    color:#294b35!important;
    background:transparent!important;
    font-size:.94rem!important;
    text-decoration:none!important;
  }

  html body #main-navigation.site-nav .nav-mobile-bottom{
    width:100%!important;
    max-width:none!important;
    margin:auto 0 0!important;
    padding-top:24px!important;
  }

  html body #main-navigation.site-nav .nav-mobile-bottom .btn{
    width:100%!important;
    min-height:54px!important;
  }

  html body #main-navigation.site-nav .social-icons{justify-content:center!important}

  html body .menu-toggle,
  html body.menu-open .menu-toggle,
  html.menu-open body .menu-toggle{
    position:relative!important;
    inset:auto!important;
    z-index:1210!important;
    display:flex!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex:0 0 44px!important;
    align-items:center!important;
    justify-content:center!important;
    color:#173725!important;
    background:rgba(255,255,255,.92)!important;
    border-color:rgba(23,55,37,.42)!important;
    box-shadow:none!important;
    touch-action:manipulation!important;
  }

  html body .menu-toggle span,
  html body.menu-open .menu-toggle span,
  html.menu-open body .menu-toggle span{background:#173725!important}

  html body.menu-open .header-phone,
  html.menu-open body .header-phone{
    color:#173725!important;
    background:#fff!important;
    border-color:rgba(23,55,37,.28)!important;
  }

  html body.menu-open .brand-copy strong,
  html body.menu-open .brand-copy small,
  html.menu-open body .brand-copy strong,
  html.menu-open body .brand-copy small{color:#173725!important}
}

/* Snow Removal mobile header icon contrast fix — 2026-09-20
   Keep the homepage navigation mechanics; only adapt the hamburger contrast
   to the snow page's glass -> light header transition. */
@media (max-width:1100px){
  html body.snow-page.winter-redesign:not(.menu-open) .site-header:not(.is-scrolled) .menu-toggle{
    color:#fff!important;
    background:rgba(9,40,58,.18)!important;
    border-color:rgba(255,255,255,.58)!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.03)!important;
  }

  html body.snow-page.winter-redesign:not(.menu-open) .site-header:not(.is-scrolled) .menu-toggle span{
    background:#fff!important;
  }

  html body.snow-page.winter-redesign .site-header.is-scrolled .menu-toggle,
  html body.snow-page.winter-redesign.menu-open .site-header .menu-toggle,
  html.menu-open body.snow-page.winter-redesign .site-header .menu-toggle{
    color:#102936!important;
    background:#fff!important;
    border-color:#8fbdd4!important;
    box-shadow:0 2px 10px rgba(16,41,54,.06)!important;
  }

  html body.snow-page.winter-redesign .site-header.is-scrolled .menu-toggle span,
  html body.snow-page.winter-redesign.menu-open .site-header .menu-toggle span,
  html.menu-open body.snow-page.winter-redesign .site-header .menu-toggle span{
    background:#102936!important;
  }
}

/* Explicit mobile close icon — 2026-09-20
   The same menu toggle becomes a high-contrast X whenever the drawer is open. */
@media (max-width:1100px){
  html body .menu-toggle span{
    display:block!important;
    width:19px!important;
    height:2px!important;
    margin:0!important;
    border-radius:999px!important;
    transform-origin:50% 50%!important;
    transition:transform .22s ease, opacity .16s ease, background-color .2s ease!important;
  }

  html body .menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg)!important;
  }

  html body .menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0!important;
    transform:scaleX(0)!important;
  }

  html body .menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg)!important;
  }

  html body .menu-toggle[aria-expanded="false"] span:nth-child(1),
  html body .menu-toggle[aria-expanded="false"] span:nth-child(2),
  html body .menu-toggle[aria-expanded="false"] span:nth-child(3){
    opacity:1!important;
    transform:none!important;
  }
}



/* Mobile menu viewport pinning — 2026-09-20
   When the drawer is open, pin the entire header to the visible viewport so
   the close X can never scroll off-screen. The drawer begins immediately
   below that pinned header. */
@media (max-width:1100px){
  html.menu-open body .site-header,
  body.menu-open .site-header{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:0!important;
    width:100%!important;
    margin:0!important;
    z-index:1300!important;
  }

  html.menu-open body #main-navigation.site-nav,
  body.menu-open #main-navigation.site-nav{
    top:var(--mobile-menu-top,var(--header-height,76px))!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    height:auto!important;
    max-height:none!important;
    z-index:1290!important;
  }

  html.menu-open body .menu-toggle,
  body.menu-open .menu-toggle{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    z-index:1310!important;
  }
}