/* Mobile navigation stays anchored below the fixed-height header row. */
@media (max-width: 820px) {
  .hero { min-height: 0; }
  .hero .server-visual { display: none; }

  /* Match the compact circular Olark launcher used by the new control panel. */
  body .olark-launch-button-wrapper.olark-text-button {
    right: 18px !important;
    bottom: 18px !important;
    left: auto !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  #hbl-live-chat-wrapper #olark-wrapper .olark-launch-button-wrapper .olark-launch-button.olark-text-button {
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: flex !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(54, 226, 167, .65) !important;
    border-radius: 999px !important;
    background: #071f2a !important;
    box-shadow: 0 14px 32px rgba(6, 31, 40, .3) !important;
    clip-path: none !important;
    font-size: 0 !important;
  }

  #hbl-live-chat-wrapper #olark-wrapper .olark-launch-button-wrapper .olark-launch-button.olark-text-button::before {
    content: "";
    display: block !important;
    width: 23px;
    height: 23px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.6 8.6 0 0 1-7.7 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.6A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 1 1 21 11.5Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 11h.01M12 11h.01M16 11h.01' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.6 8.6 0 0 1-7.7 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.6A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 1 1 21 11.5Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 11h.01M12 11h.01M16 11h.01' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  body .olark-launch-button-wrapper > svg,
  body .olark-launch-button-wrapper .olark-launch-button > svg,
  body .olark-launch-button-wrapper .olark-launch-button > img,
  body .olark-launch-button-wrapper .olark-launch-button > span,
  body .olark-launch-button-wrapper .olark-launch-button > div,
  body .olark-launch-button-wrapper .olark-launch-button > p { display: none !important; }

  .site-header,
  .site-header.open {
    height: 80px;
    padding-bottom: 0;
    flex-wrap: nowrap;
    align-items: center;
  }

  .site-header .brand-logo-link { align-self: center; }
  .mobile-language-picker { margin-left: auto; align-self: center; }
  .mobile-language-picker + .menu-toggle { margin-left: 4px; }

  .menu-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #d8e7e4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(6, 31, 40, .06);
    transition: border-color .2s, background .2s, box-shadow .2s;
  }

  .menu-toggle:hover,
  .menu-toggle:focus-visible,
  .site-header.open .menu-toggle {
    border-color: #8edbc5;
    background: #effbf7;
    box-shadow: 0 7px 20px rgba(11, 157, 116, .12);
  }

  .menu-toggle span {
    width: 20px;
    transition: transform .2s ease;
  }

  .site-header.open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  .site-header.open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .site-header.open .nav {
    position: absolute;
    z-index: 110;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    width: auto;
    max-height: calc(100dvh - 118px);
    margin: 0;
    padding: 14px max(24px, calc((100vw - 1240px) / 2)) 20px;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border-top: 1px solid #edf3f1;
    border-bottom: 1px solid #d8e7e4;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 45px rgba(6, 31, 40, .14);
    backdrop-filter: blur(18px);
    animation: mobile-nav-in .18s ease-out;
  }

  .site-header.open .nav > a,
  .site-header.open .nav-menu-button {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    justify-content: space-between;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #16313a;
    font-weight: 700;
    text-decoration: none;
  }

  .site-header.open .nav > a { display: flex; align-items: center; }
  .site-header.open .nav > a:hover,
  .site-header.open .nav > a:focus-visible,
  .site-header.open .nav-menu-button:hover,
  .site-header.open .nav-menu-button:focus-visible,
  .site-header.open .nav-group.open .nav-menu-button {
    border-color: #d9eee8;
    background: #effbf7;
    color: #087d5b;
  }

  .site-header.open .nav-group { width: 100%; }
  .site-header.open .mega-menu,
  .site-header.open .nav-group.open .mega-menu {
    width: 100%;
    margin: 6px 0 8px;
    padding: 12px;
    border: 1px solid #dcece8;
    border-radius: 13px;
    background: #f7fbfa;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  }

  .site-header.open .mega-menu > strong {
    padding: 2px 4px 10px;
    color: #527078;
    font-size: .72rem;
    letter-spacing: .12em;
  }

  .site-header.open .mega-menu-grid { gap: 7px; padding-top: 0; }
  .site-header.open .mega-menu-grid > a {
    min-height: 64px;
    border-color: #e1ece9;
    background: #fff;
    box-shadow: 0 4px 12px rgba(6, 31, 40, .035);
  }

  .site-header.open .mega-menu-grid > a:hover,
  .site-header.open .mega-menu-grid > a:focus-visible {
    border-color: #9ddfcd;
    background: #effbf7;
    transform: translateY(-1px);
  }

  @keyframes mobile-nav-in {
    from { opacity: 0; transform: translateY(-7px); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 560px) {
  .site-header,
  .site-header.open { height: 68px; padding-right: 18px; padding-left: 18px; }
  .site-header.open .nav { max-height: calc(100dvh - 106px); padding: 12px 18px 18px; }
  .menu-toggle { width: 42px; height: 42px; }
}

@media (max-width: 380px) {
  .site-header .brand-logo-link { width: 148px; flex-basis: 148px; }
  .site-header { gap: 7px; padding-right: 14px; padding-left: 14px; }
  .mobile-language-picker + .menu-toggle { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.open .nav { animation: none; }
  .menu-toggle span { transition: none; }
}