/* v2.10.18 — viewport-balanced mobile navigation spacing */
@media (max-width:1360px){
  .mobile-menu{
    --menu-inline:clamp(12px,3.7vw,16px);
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:calc(82px + env(safe-area-inset-top)) var(--menu-inline) calc(12px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    scroll-padding-block:calc(86px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-bottom))!important;
  }
  .mobile-menu::before{
    inset:calc(74px + env(safe-area-inset-top)) 8px 8px!important;
  }
  .mobile-menu>*{
    flex:0 0 auto!important;
    min-width:0!important;
  }
  .mobile-menu-intro{
    margin:0!important;
    padding:12px 14px!important;
  }
  .mobile-menu-group{
    gap:6px!important;
    margin:0!important;
  }
  .mobile-menu-featured-grid,
  .mobile-menu-link-grid,
  .mobile-menu-action-stack{
    gap:7px!important;
  }
  .mobile-menu a.nav-product{
    min-height:68px!important;
    height:68px!important;
  }
  .mobile-menu-link-grid a{
    min-height:44px!important;
    height:44px!important;
  }
  .mobile-menu-action-stack :is(.m-call,.portal-mobile-link,.mobile-apply){
    min-height:46px!important;
    height:46px!important;
  }
  .mobile-menu-trust{
    min-height:18px!important;
    padding:0!important;
  }
}

/* Very short viewports keep every target usable and rely on deliberate scrolling. */
@media (max-width:1360px) and (max-height:620px){
  .mobile-menu{
    justify-content:flex-start!important;
    gap:7px!important;
    padding-top:calc(78px + env(safe-area-inset-top))!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
  }
  .mobile-menu::before{inset:calc(70px + env(safe-area-inset-top)) 7px 7px!important}
  .mobile-menu-intro{padding:11px 13px!important}
  .mobile-menu-group{gap:5px!important}
  .mobile-menu-featured-grid,
  .mobile-menu-link-grid,
  .mobile-menu-action-stack{gap:6px!important}
  .mobile-menu a.nav-product{min-height:66px!important;height:66px!important}
  .mobile-menu-link-grid a{min-height:44px!important;height:44px!important}
  .mobile-menu-action-stack :is(.m-call,.portal-mobile-link,.mobile-apply){min-height:44px!important;height:44px!important}
}


/* Compact phones scale gently before the mid-height layout takes over. */
@media (max-width:1360px) and (min-height:621px) and (max-height:700px){
  .mobile-menu-intro{padding:clamp(12px,1.8dvh,13px) 14px!important}
  .mobile-menu a.nav-product{
    min-height:clamp(68px,10.3dvh,72px)!important;
    height:clamp(68px,10.3dvh,72px)!important;
  }
  .mobile-menu-link-grid a{
    min-height:clamp(44px,6.6dvh,46px)!important;
    height:clamp(44px,6.6dvh,46px)!important;
  }
  .mobile-menu-action-stack :is(.m-call,.portal-mobile-link,.mobile-apply){
    min-height:clamp(46px,6.9dvh,48px)!important;
    height:clamp(46px,6.9dvh,48px)!important;
  }
}

/* Mid-height phones add room gradually without creating empty bands. */
@media (max-width:1360px) and (min-height:701px) and (max-height:760px){
  .mobile-menu{
    gap:9px!important;
    padding-top:calc(84px + env(safe-area-inset-top))!important;
    padding-bottom:calc(14px + env(safe-area-inset-bottom))!important;
  }
  .mobile-menu::before{inset:calc(76px + env(safe-area-inset-top)) 8px 8px!important}
  .mobile-menu-intro{padding:13px 14px!important}
  .mobile-menu-group{gap:7px!important}
  .mobile-menu a.nav-product{
    min-height:clamp(72px,10.8dvh,82px)!important;
    height:clamp(72px,10.8dvh,82px)!important;
  }
  .mobile-menu-link-grid a{
    min-height:clamp(46px,7dvh,54px)!important;
    height:clamp(46px,7dvh,54px)!important;
  }
  .mobile-menu-action-stack :is(.m-call,.portal-mobile-link,.mobile-apply){
    min-height:clamp(48px,7.2dvh,56px)!important;
    height:clamp(48px,7.2dvh,56px)!important;
  }
}

/* Standard modern phones use extra height inside controls, not as oversized gaps. */
@media (max-width:1360px) and (min-height:761px) and (max-height:859px){
  .mobile-menu{
    gap:clamp(10px,1.4dvh,12px)!important;
    padding-top:calc(clamp(84px,10.5dvh,92px) + env(safe-area-inset-top))!important;
    padding-bottom:calc(clamp(16px,2.1dvh,19px) + env(safe-area-inset-bottom))!important;
  }
  .mobile-menu::before{inset:calc(clamp(76px,9.6dvh,84px) + env(safe-area-inset-top)) 8px 8px!important}
  .mobile-menu-intro{padding:clamp(13px,1.7dvh,15px) 15px!important}
  .mobile-menu-group{gap:7px!important}
  .mobile-menu a.nav-product{
    min-height:clamp(80px,10.9dvh,92px)!important;
    height:clamp(80px,10.9dvh,92px)!important;
  }
  .mobile-menu-link-grid a,
  .mobile-menu-action-stack :is(.m-call,.portal-mobile-link,.mobile-apply){
    min-height:clamp(56px,7.5dvh,64px)!important;
    height:clamp(56px,7.5dvh,64px)!important;
  }
}

/* Tall phones remain balanced by scaling tap targets modestly and evenly. */
@media (max-width:1360px) and (min-height:860px){
  .mobile-menu{
    gap:clamp(12px,1.5dvh,15px)!important;
    padding-top:calc(clamp(92px,10.3dvh,98px) + env(safe-area-inset-top))!important;
    padding-bottom:calc(clamp(19px,2.3dvh,22px) + env(safe-area-inset-bottom))!important;
  }
  .mobile-menu::before{inset:calc(clamp(84px,9.5dvh,90px) + env(safe-area-inset-top)) 9px 9px!important}
  .mobile-menu-intro{padding:clamp(15px,1.75dvh,16px)!important}
  .mobile-menu-group{gap:8px!important}
  .mobile-menu-featured-grid,
  .mobile-menu-link-grid,
  .mobile-menu-action-stack{gap:8px!important}
  .mobile-menu a.nav-product{
    min-height:clamp(92px,10.7dvh,100px)!important;
    height:clamp(92px,10.7dvh,100px)!important;
  }
  .mobile-menu-link-grid a,
  .mobile-menu-action-stack :is(.m-call,.portal-mobile-link,.mobile-apply){
    min-height:clamp(64px,7.7dvh,72px)!important;
    height:clamp(64px,7.7dvh,72px)!important;
  }
}