.mobile-bottom-nav{display:none}

@media(max-width:1080px){
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important}
  .site-nav-menu,.site-nav-toggle{display:none!important}
  .site-nav-inner{width:min(100% - 24px,1320px)}
  .site-brand{min-width:0;margin-right:auto}
  .site-nav-actions{flex:0 0 auto}
  .mobile-bottom-nav{position:fixed;right:0;bottom:0;left:0;z-index:1045;display:grid;height:calc(68px + env(safe-area-inset-bottom));padding:7px max(7px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(7px,env(safe-area-inset-left));border-top:1px solid rgba(25,86,67,.1);background:rgba(255,255,255,.94);box-shadow:0 -10px 32px rgba(20,64,50,.1);grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;backdrop-filter:blur(18px);font-family:'Be Vietnam Pro',sans-serif}
  .mobile-bottom-nav>a{position:relative;display:flex;min-width:0;height:54px;padding:4px 2px;align-items:center;justify-content:center;flex-direction:column;gap:2px;border-radius:15px;color:#75867f;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .18s ease,transform .18s ease}
  .mobile-bottom-nav>a::before{position:absolute;top:2px;z-index:-1;width:48px;height:34px;border-radius:13px;background:#e5f6ef;content:'';opacity:0;transform:scale(.72);transition:opacity .18s ease,transform .18s ease}
  .mobile-bottom-nav>a:active{transform:scale(.94)}
  .mobile-nav-icon{display:grid;width:32px;height:30px;place-items:center;font-size:1.08rem;line-height:1;filter:grayscale(.28);transition:filter .18s ease,transform .18s ease}
  .mobile-bottom-nav>a>span:last-child{max-width:100%;overflow:hidden;font-size:.51rem;font-weight:700;letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap}
  .mobile-bottom-nav>a.is-active{color:#08745c}
  .mobile-bottom-nav>a.is-active::before{opacity:1;transform:scale(1)}
  .mobile-bottom-nav>a.is-active .mobile-nav-icon{filter:none;transform:translateY(-1px) scale(1.06)}
}

@media(max-width:370px){
  .site-brand>span:last-child{font-size:.88rem}
  .mobile-bottom-nav{padding-inline:3px}
  .mobile-bottom-nav>a>span:last-child{font-size:.47rem}
  .mobile-nav-icon{font-size:1rem}
}

@media(prefers-reduced-motion:reduce){
  .mobile-bottom-nav>a,.mobile-bottom-nav>a::before,.mobile-nav-icon{transition:none}
}